pragmate-ui/collapsible/collapsible.browser.mjs

An advanced, on-demand React UI library optimized for BeyondJS. Pragmate UI provides modular, responsive, and accessible components with a focus on efficient bundle sizes and a streamlined development process.

import * as dependency_0 from '@beyond-js/kernel/bundle';
import * as dependency_1 from '@beyond-js/kernel/styles';
import * as dependency_2 from 'react';
import * as dependency_3 from 'pragmate-ui/icons';
import * as dependency_4 from 'pragmate-ui/base';

const {Bundle: __Bundle} = dependency_0;
const __pkg = new __Bundle({"module":{"vspecifier":"pragmate-ui@1.0.1/collapsible"},"type":"code"}, import.meta.url).package();;

__pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1],['react', dependency_2],['pragmate-ui/icons', dependency_3],['pragmate-ui/base', dependency_4]]);

brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/collapsible')


const ims = new Map();

/***************************
INTERNAL MODULE: ./accordion
***************************/

ims.set('./accordion', {hash: 2388911095, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AccordionContext = exports.Accordion = void 0;
exports.Container = Container;
exports.Header = Header;
exports.Item = Item;
exports.useAccordionContext = void 0;
var _react = require("react");
var _icons = require("pragmate-ui/icons");
const AccordionContext = exports.AccordionContext = _react.default.createContext({});
const useAccordionContext = () => _react.default.useContext(AccordionContext);
exports.useAccordionContext = useAccordionContext;
/*bundle */function Header({
  disabled,
  children,
  index
}) {
  const {
    setOpened,
    opened
  } = useAccordionContext();
  const onClick = event => {
    event.stopPropagation();
    event.currentTarget.classList.toggle('accordion-item__header-icon--opened');
    setOpened(index === opened ? false : index);
  };
  const attrs = {};
  if (!disabled) attrs.onClick = onClick;
  const icon = opened ? 'expandMore' : 'chevronRight';
  return _react.default.createElement("header", {
    ...attrs,
    className: "accordion-item__header"
  }, children, _react.default.createElement("div", {
    className: "accordion-item__header-icon"
  }, _react.default.createElement(_icons.IconButton, {
    icon: icon,
    className: "accordion-item__icon-button circle"
  })));
}
/*bundle */function Item({
  disabled,
  children,
  title,
  index
}) {
  const {
    opened
  } = useAccordionContext();
  let cls = `accordion-item${index === opened ? ` accordion-item--opened` : ``}`;
  if (disabled) cls += ` accordion-item--disabled`;
  return _react.default.createElement("article", {
    className: cls
  }, title && _react.default.createElement(Header, {
    disabled: disabled,
    index: index
  }, title), _react.default.createElement("div", {
    className: "accordion-item__content"
  }, children));
}
/*bundle */function Container({
  children,
  active = 0
}) {
  const [opened, setOpened] = _react.default.useState(active);
  const onChange = event => {};
  const value = {
    onChange,
    opened,
    setOpened
  };
  _react.default.useEffect(() => setOpened(active), [active]);
  const output = [];
  _react.default.Children.map(children, (child, index) => {
    if (!child) return null;
    output.push(_react.default.cloneElement(child, {
      index,
      key: `item$.${index}`
    }));
  });
  return _react.default.createElement(AccordionContext.Provider, {
    value: value
  }, _react.default.createElement("div", {
    className: "accordion"
  }, output));
}
/*bundle */const Accordion = exports.Accordion = {
  Header,
  Item,
  Container
};
}});

/*************************
INTERNAL MODULE: ./content
*************************/

ims.set('./content', {hash: 4052548813, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CollapsibleContent = CollapsibleContent;
var _react = require("react");
var _context = require("./context");
/*bundle */function CollapsibleContent({
  className,
  children
}) {
  const {
    open,
    toggleable
  } = (0, _context.useCollapsibleContext)();
  const cls = `collapsible__content${className ? ` ${className}` : ''} ${open ? ' collapsible__content--opened' : ''}`;
  if (!toggleable) return null;
  return _react.default.createElement("section", {
    className: cls
  }, children);
}
}});

/*************************
INTERNAL MODULE: ./context
*************************/

ims.set('./context', {hash: 4042704803, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useCollapsibleContext = exports.CollapsibleContext = void 0;
var _react = require("react");
const CollapsibleContext = exports.CollapsibleContext = _react.default.createContext(null);
const useCollapsibleContext = () => _react.default.useContext(CollapsibleContext);
exports.useCollapsibleContext = useCollapsibleContext;
}});

/************************
INTERNAL MODULE: ./header
************************/

ims.set('./header', {hash: 1101998287, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CollapsibleHeader = CollapsibleHeader;
var _react = require("react");
var _context = require("./context");
var _icons = require("pragmate-ui/icons");
/*bundle */function CollapsibleHeader({
  children,
  className,
  toggleTitle = true
}) {
  const {
    setOpen,
    onToggle,
    open,
    toggleable
  } = (0, _context.useCollapsibleContext)();
  const onClick = async () => {
    if (!onToggle) {
      setOpen(!open);
      return;
    }
    if (await onToggle(!open)) setOpen(!open);
  };
  const cls = `collapsible__header ${className ? ` ${className}` : ''} ${open ? 'open' : ''}`;
  const clsButton = `collapsible__button circle ${open ? ' collapsible__button--opened' : ''}`;
  const attrs = {
    className: cls
  };
  if (toggleTitle) {
    attrs.onClick = onClick;
  }
  return _react.default.createElement("header", {
    ...attrs
  }, _react.default.createElement("div", {
    className: "collapsible__header-content"
  }, children), toggleable && _react.default.createElement(_icons.IconButton, {
    onClick: onClick,
    className: clsButton,
    icon: 'left'
  }));
}
}});

/***********************
INTERNAL MODULE: ./index
***********************/

ims.set('./index', {hash: 4233091753, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CollapsibleContainer = CollapsibleContainer;
var _react = require("react");
var _context = require("./context");
/*bundle */function CollapsibleContainer({
  children,
  onToggle,
  open = false,
  className,
  toggleable = true,
  data
}) {
  open;
  const [opened, setOpen] = _react.default.useState(open);
  const value = {
    open: opened,
    setOpen,
    onToggle,
    toggleable,
    ...data
  };
  const cls = `collapsible__container ${className ? ` ${className}` : ''} `;
  _react.default.useEffect(() => {
    setOpen(open);
  }, [open]);
  return _react.default.createElement(_context.CollapsibleContext.Provider, {
    value: value
  }, _react.default.createElement("article", {
    className: cls
  }, children));
}
}});

/***********************
INTERNAL MODULE: ./types
***********************/

ims.set('./types', {hash: 1378472229, creator: function (require, exports) {
"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
}});

__pkg.exports.descriptor = [{"im":"./accordion","from":"Header","name":"Header"},{"im":"./accordion","from":"Item","name":"Item"},{"im":"./accordion","from":"Container","name":"Container"},{"im":"./accordion","from":"Accordion","name":"Accordion"},{"im":"./content","from":"CollapsibleContent","name":"CollapsibleContent"},{"im":"./header","from":"CollapsibleHeader","name":"CollapsibleHeader"},{"im":"./index","from":"CollapsibleContainer","name":"CollapsibleContainer"}];

export let Header, Item, Container, Accordion, CollapsibleContent, CollapsibleHeader, CollapsibleContainer;

// Module exports
__pkg.exports.process = function({require, prop, value}) {
    (require || prop === 'Header') && (Header = require ? require('./accordion').Header : value);
    (require || prop === 'Item') && (Item = require ? require('./accordion').Item : value);
    (require || prop === 'Container') && (Container = require ? require('./accordion').Container : value);
    (require || prop === 'Accordion') && (Accordion = require ? require('./accordion').Accordion : value);
    (require || prop === 'CollapsibleContent') && (CollapsibleContent = require ? require('./content').CollapsibleContent : value);
    (require || prop === 'CollapsibleHeader') && (CollapsibleHeader = require ? require('./header').CollapsibleHeader : value);
    (require || prop === 'CollapsibleContainer') && (CollapsibleContainer = require ? require('./index').CollapsibleContainer : value);

};
export const __beyond_pkg = __pkg;

export const hmr = new (function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
});


__pkg.initialise(ims);
//# sourceMappingURL=collapsible.browser.mjs.map