pragmate-ui/dropdown/dropdown.amd.js

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.

define(["exports", "module", "@beyond-js/kernel/bundle", "@beyond-js/kernel/styles", "react", "framer-motion", "pragmate-ui/components", "pragmate-ui/base"], function (_exports, _amd_module, dependency_0, dependency_1, dependency_2, dependency_3, dependency_4, dependency_5) {
  "use strict";

  Object.defineProperty(_exports, "__esModule", {
    value: true
  });
  _exports.useDropdownContext = _exports.hmr = _exports.__beyond_pkg = _exports.IDropdownProps = _exports.IDropdownItemProps = _exports.DropdownToggle = _exports.DropdownMenu = _exports.DropdownItem = _exports.DropdownContainer = _exports.Dropdown = void 0;
  const {
    Bundle: __Bundle
  } = dependency_0;
  const __pkg = new __Bundle({
    "module": {
      "vspecifier": "pragmate-ui@1.0.1/dropdown"
    },
    "type": "code"
  }, _amd_module.uri).package();
  ;
  __pkg.dependencies.update([['@beyond-js/kernel/styles', dependency_1], ['react', dependency_2], ['framer-motion', dependency_3], ['pragmate-ui/components', dependency_4], ['pragmate-ui/base', dependency_5]]);
  brequire('@beyond-js/kernel/styles').styles.register('pragmate-ui@1.0.1/dropdown');
  const ims = new Map();

  /*****************************************
  INTERNAL MODULE: ./components/animated-div
  *****************************************/

  ims.set('./components/animated-div', {
    hash: 744696097,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.AnimatedDiv = AnimatedDiv;
      var React = require("react");
      var _framerMotion = require("framer-motion");
      function AnimatedDiv({
        children,
        className
      } = {
        children: null,
        className: ''
      }) {
        return React.createElement(_framerMotion.motion.div, {
          className: className,
          animate: {
            opacity: 1,
            transition: {
              duration: 0.1
            },
            y: 0
          },
          exit: {
            transition: {
              duration: 0.3
            },
            opacity: 0
          }
        }, children);
      }
    }
  });

  /**************************************
  INTERNAL MODULE: ./components/container
  **************************************/

  ims.set('./components/container', {
    hash: 4207993415,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.DropdownContainer = DropdownContainer;
      var _react = require("react");
      var _context = require("../context");
      var _useClickContainer = require("../hooks/use-click-container");
      /*bundle*/
      function DropdownContainer({
        children,
        className
      }) {
        const {
          toggleMenu,
          setToggleMenu
        } = (0, _context.useDropdownContext)();
        const {
          ref
        } = (0, _useClickContainer.useClickContainer)({
          toggleMenu,
          setToggleMenu
        });
        const cls = `pui-dropdown-container${className ? ` ${className}` : ''}${toggleMenu ? ' pui-dropdown-container--opened' : ''}`;
        return _react.default.createElement("div", {
          ref: ref,
          className: cls
        }, children);
      }
    }
  });

  /*********************************
  INTERNAL MODULE: ./components/item
  *********************************/

  ims.set('./components/item', {
    hash: 2807941339,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.DropdownItem = DropdownItem;
      var _react = require("react");
      var _context = require("../context");
      var _components = require("pragmate-ui/components");
      /*bundle*/
      function DropdownItem(props) {
        const {
          setToggleMenu
        } = (0, _context.useDropdownContext)();
        const {
          children,
          className,
          onClick,
          as = _components.Link,
          tag = _components.Link
        } = props;
        const handleClick = async event => {
          event.stopPropagation();
          if (!!onClick && typeof onClick === 'function') await onClick(event);
          setToggleMenu(false);
        };
        const Control = tag ?? 'div';
        const cls = `pui-dropdown-menu__item${className ? ` ${className}` : ''}`;
        const properties = Object.assign({}, props);
        const toDelete = ['children', 'className', 'onClick', 'tag', 'id'];
        toDelete.forEach(key => delete properties[key]);
        return _react.default.createElement("li", null, _react.default.createElement(Control, {
          className: cls,
          onClick: handleClick,
          ...properties
        }, children));
      }
    }
  });

  /*********************************
  INTERNAL MODULE: ./components/menu
  *********************************/

  ims.set('./components/menu', {
    hash: 1155104003,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.DropdownMenu = DropdownMenu;
      var _react = require("react");
      var _context = require("../context");
      var _animatedDiv = require("./animated-div");
      /*bundle*/
      function DropdownMenu(props) {
        const {
          toggleMenu
        } = (0, _context.useDropdownContext)();
        if (!toggleMenu) return null;
        let cls = `pui-dropdown-menu  pui-dropdown-menu--opened`;
        return _react.default.createElement(_animatedDiv.AnimatedDiv, {
          className: cls
        }, _react.default.createElement("ul", {
          className: 'pui-dropdown-menu__list'
        }, props.children));
      }
    }
  });

  /***********************************
  INTERNAL MODULE: ./components/toggle
  ***********************************/

  ims.set('./components/toggle', {
    hash: 2994452618,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.DropdownToggle = DropdownToggle;
      var React = require("react");
      var _context = require("../context");
      /*bundle*/
      function DropdownToggle({
        children,
        className
      }) {
        const cls = `pui-dropdown__toggle${className ? ` ${className}` : ''}`;
        const {
          toggleMenu,
          setToggleMenu
        } = (0, _context.useDropdownContext)();
        const onClick = event => {
          event.stopPropagation();
          setToggleMenu(!toggleMenu);
        };
        return React.createElement("div", {
          onClick: onClick,
          className: cls
        }, children);
      }
    }
  });

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

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

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

  /*******************************************
  INTERNAL MODULE: ./hooks/use-click-container
  *******************************************/

  ims.set('./hooks/use-click-container', {
    hash: 2744155022,
    creator: function (require, exports) {
      "use strict";

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.useClickContainer = useClickContainer;
      var _react = require("react");
      function useClickContainer({
        toggleMenu,
        setToggleMenu
      }) {
        const ref = _react.default.useRef(null);
        _react.default.useEffect(() => {
          const onClick = event => {
            const {
              current
            } = ref;
            const {
              target,
              currentTarget
            } = event;
            const path = event.composedPath ? event.composedPath() : [];
            const pathTarget = path.length > 0 ? path[0] : null;
            const isSameNode = current === target || current === currentTarget || pathTarget === current;
            const isAChildren = current?.contains(pathTarget);
            if (toggleMenu && !isSameNode && !isAChildren) setToggleMenu(false);
          };
          globalThis.document.addEventListener('click', onClick);
          return () => globalThis.document.removeEventListener('click', onClick);
        }, [toggleMenu]);
        return {
          ref
        };
      }
    }
  });

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

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

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
      exports.Dropdown = Dropdown;
      var _react = require("react");
      var _context = require("./context");
      var _container = require("./components/container");
      /*bundle*/
      function Dropdown({
        children,
        className
      }) {
        const [toggleMenu, setToggleMenu] = _react.default.useState(false);
        const value = {
          toggleMenu,
          setToggleMenu
        };
        return _react.default.createElement(_context.DropdownContext.Provider, {
          value: value
        }, _react.default.createElement(_container.DropdownContainer, {
          className: className
        }, children));
      }
    }
  });

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

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

      Object.defineProperty(exports, "__esModule", {
        value: true
      });
    }
  });
  __pkg.exports.descriptor = [{
    "im": "./components/container",
    "from": "DropdownContainer",
    "name": "DropdownContainer"
  }, {
    "im": "./components/item",
    "from": "DropdownItem",
    "name": "DropdownItem"
  }, {
    "im": "./components/menu",
    "from": "DropdownMenu",
    "name": "DropdownMenu"
  }, {
    "im": "./components/toggle",
    "from": "DropdownToggle",
    "name": "DropdownToggle"
  }, {
    "im": "./context",
    "from": "useDropdownContext",
    "name": "useDropdownContext"
  }, {
    "im": "./index",
    "from": "Dropdown",
    "name": "Dropdown"
  }, {
    "im": "./types",
    "from": "IDropdownProps",
    "name": "IDropdownProps"
  }, {
    "im": "./types",
    "from": "IDropdownItemProps",
    "name": "IDropdownItemProps"
  }];
  let DropdownContainer = _exports.DropdownContainer = void 0,
    DropdownItem = _exports.DropdownItem = void 0,
    DropdownMenu = _exports.DropdownMenu = void 0,
    DropdownToggle = _exports.DropdownToggle = void 0,
    useDropdownContext = _exports.useDropdownContext = void 0,
    Dropdown = _exports.Dropdown = void 0,
    IDropdownProps = _exports.IDropdownProps = void 0,
    IDropdownItemProps = _exports.IDropdownItemProps = void 0;

  // Module exports
  __pkg.exports.process = function ({
    require,
    prop,
    value
  }) {
    (require || prop === 'DropdownContainer') && (_exports.DropdownContainer = DropdownContainer = require ? require('./components/container').DropdownContainer : value);
    (require || prop === 'DropdownItem') && (_exports.DropdownItem = DropdownItem = require ? require('./components/item').DropdownItem : value);
    (require || prop === 'DropdownMenu') && (_exports.DropdownMenu = DropdownMenu = require ? require('./components/menu').DropdownMenu : value);
    (require || prop === 'DropdownToggle') && (_exports.DropdownToggle = DropdownToggle = require ? require('./components/toggle').DropdownToggle : value);
    (require || prop === 'useDropdownContext') && (_exports.useDropdownContext = useDropdownContext = require ? require('./context').useDropdownContext : value);
    (require || prop === 'Dropdown') && (_exports.Dropdown = Dropdown = require ? require('./index').Dropdown : value);
    (require || prop === 'IDropdownProps') && (_exports.IDropdownProps = IDropdownProps = require ? require('./types').IDropdownProps : value);
    (require || prop === 'IDropdownItemProps') && (_exports.IDropdownItemProps = IDropdownItemProps = require ? require('./types').IDropdownItemProps : value);
  };
  const __beyond_pkg = _exports.__beyond_pkg = __pkg;
  const hmr = _exports.hmr = new function () {
    this.on = (event, listener) => void 0;
    this.off = (event, listener) => void 0;
  }();
  __pkg.initialise(ims);
});
//# sourceMappingURL=dropdown.amd.js.map