@commercetools-uikit/dropdown-menu 0.0.0-canary-20240412080035

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 commercetools GmbH
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,112 @@
+<!-- THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. -->
+<!-- This file is created by the `yarn generate-readme` script. -->
+
+# DropdownMenu
+
+## Description
+
+This component should be used whenever you need to display a floating panel after clicking on an element.
+
+It allows to use any component as the element used to trigger the floating panel.
+
+The panel can be customized to render whatever is needed. However, as a common use case would be to render a list of elements and select one of them, this component provides some helpers to easily implement such use case.
+
+Something to bear in mind is that, when the panel is open, the document scroll is blocked.
+
+## Installation
+
+```
+yarn add @commercetools-uikit/dropdown-menu
+```
+
+```
+npm --save install @commercetools-uikit/dropdown-menu
+```
+
+Additionally install the peer dependencies (if not present)
+
+```
+yarn add react
+```
+
+```
+npm --save install react
+```
+
+## Usage
+
+```jsx
+import CheckboxInput from '@commercetools-uikit/checkbox-input';
+import DropdownMenu from '@commercetools-uikit/dropdown-menu';
+import IconButton from '@commercetools-uikit/icon-button';
+import SecondaryButton from '@commercetools-uikit/secondary-button';
+import SpacingsStack from '@commercetools-uikit/spacings-stack';
+import Text from '@commercetools-uikit/text';
+import { ColumnsIcon, FilterIcon } from '@commercetools-uikit/icons';
+
+export const ListDropdownExample = () => {
+  return (
+    <DropdownMenu
+      triggerElement={<IconButton icon={<ColumnsIcon />} label="list" />}
+      menuHorizontalConstraint={6}
+      menuPosition="left"
+      menuType="list"
+    >
+      <DropdownMenu.ListMenuItem onClick={() => {}}>
+        Option 1
+      </DropdownMenu.ListMenuItem>
+      <DropdownMenu.ListMenuItem onClick={() => {}} isDisabled>
+        Option 2
+      </DropdownMenu.ListMenuItem>
+      <DropdownMenu.ListMenuItem onClick={() => {}}>
+        Option 3
+      </DropdownMenu.ListMenuItem>
+    </DropdownMenu>
+  );
+};
+
+export const CustomDropdownExample = () => {
+  return (
+    <DropdownMenu
+      triggerElement={
+        <SecondaryButton label="Filters" iconLeft={<FilterIcon />} />
+      }
+      menuHorizontalConstraint={6}
+      menuPosition="right"
+    >
+      <SpacingsStack scale="m">
+        <Text.Body>Store</Text.Body>
+        <CheckboxInput isChecked value="store" onChange={(event) => {}}>
+          Canada (FR)
+        </CheckboxInput>
+      </SpacingsStack>
+    </DropdownMenu>
+  );
+};
+```
+
+## Properties
+
+| Props                      | Type                                                  | Required | Default     | Description                                                                                                                                                             |
+| -------------------------- | ----------------------------------------------------- | :------: | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `menuPosition`             | `union`<br/>Possible values:<br/>`'left' , 'right'`   |          | `'left'`    | The position of the menu relative to the trigger element.                                                                                                               |
+| `triggerElement`           | `ReactElement`                                        |    ✅    |             | The element that triggers the dropdown.                                                                                                                                 |
+| `menuType`                 | `union`<br/>Possible values:<br/>`'default' , 'list'` |          | `'default'` | The type of the menu.&#xA;The 'default' type just renders a dropdown container but the 'list' type is intended to be used with the DropdownMenu.ListMenuItem component. |
+| `menuHorizontalConstraint` | `TMaxProp`                                            |          | `'auto'`    | The horizontal constraint of the menu.                                                                                                                                  |
+| `children`                 | `ReactNode`                                           |    ✅    |             | The content of the dropdown.                                                                                                                                            |
+
+# Additional info
+
+## ListMenuItem
+
+When using the list floating panel, the `DropdownMenu` component exposes an inner sub-component called `DropdownMenu.ListMenuItem` that should be used to render each item in the list.
+
+Clicking on an item will close the panel and call the `onClick` callback with the item's value.
+
+### Properties
+
+| Props        | Type         | Required | Default | Description                                       |
+| ------------ | ------------ | :------: | ------- | ------------------------------------------------- |
+| `isDisabled` | `boolean`    |          | `false` | Whether the item should be disabled.              |
+| `onClick`    | `() => void` |          |         | A callback to be called when the item is clicked. |
+| `children`   | `string`     |    ✅    |         | The label for the item.                           |

package/dist/commercetools-uikit-dropdown-menu.cjs.d.ts

@@ -0,0 +1,3 @@
+export * from "./declarations/src/index";
+export { default } from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29tbWVyY2V0b29scy11aWtpdC1kcm9wZG93bi1tZW51LmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==

package/dist/commercetools-uikit-dropdown-menu.cjs.dev.js

@@ -0,0 +1,229 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _styled = require('@emotion/styled/base');
+var _pt = require('prop-types');
+var React = require('react');
+var hooks = require('@commercetools-uikit/hooks');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var Constraints = require('@commercetools-uikit/constraints');
+var SpacingsStack = require('@commercetools-uikit/spacings-stack');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var _pt__default = /*#__PURE__*/_interopDefault(_pt);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+
+const DropdownMenuContext = /*#__PURE__*/React.createContext({
+  isOpen: false,
+  toggle: () => {}
+});
+function useDropdownMenuContext() {
+  const context = React.useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error('[ui-kit] DropdownMenu context can only be used in DropdownMenu children components.');
+  }
+  return {
+    isOpen: context.isOpen,
+    toggle: context.toggle
+  };
+}
+
+const DropDownTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return jsxRuntime.jsx("div", {
+    onClick: props.onClick,
+    ref: ref,
+    children: props.children
+  });
+});
+DropDownTrigger.displayName = 'DropDownTrigger';
+var DropdownTrigger = DropDownTrigger;
+
+function getDropdownMenuBaseStyles(params) {
+  return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", designSystem.designTokens.spacing20, ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXREcm9wZG93bk1lbnVCYXNlU3R5bGVzKHBhcmFtczoge1xuICBpc09wZW46IGJvb2xlYW47XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbn0pIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG4gICAgYm94LXNoYWRvdzogMCAycHggNXB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xuICAgIGRpc3BsYXk6ICR7cGFyYW1zLmlzT3BlbiA/ICdibG9jaycgOiAnbm9uZSd9O1xuICAgIG1hcmdpbi10b3A6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKHBhcmFtcy5ob3Jpem9udGFsQ29uc3RyYWludCl9O1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICB3aWR0aDogJHtwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6ICcxMDAlJ307XG4gICAgei1pbmRleDogNTtcbiAgYDtcbn1cblxudHlwZSBURHJvcGRvd25CYXNlTWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjdXN0b21TdHlsZXM/OiBDU1NQcm9wZXJ0aWVzO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5mdW5jdGlvbiBEcm9wZG93bkJhc2VNZW51KHByb3BzOiBURHJvcGRvd25CYXNlTWVudVByb3BzKSB7XG4gIGNvbnN0IG1lbnVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUxheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgLy8gVXBkYXRlIHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB3aGVuIGl0IGlzIG9wZW5cbiAgICBpZiAocHJvcHMuaXNPcGVuICYmIHByb3BzLnRyaWdnZXJFbGVtZW50UmVmLmN1cnJlbnQgJiYgbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzID1cbiAgICAgICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgIGNvbnN0IG1lbnVFbGVtZW50Q29vcmRpbmF0ZXMgPSBtZW51UmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS50b3AgPSBgJHtcbiAgICAgICAgdHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy50b3AgKyB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmhlaWdodFxuICAgICAgfXB4YDtcbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5sZWZ0ID1cbiAgICAgICAgcHJvcHMubWVudVBvc2l0aW9uID09PSAnbGVmdCdcbiAgICAgICAgICA/IGAke3RyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMubGVmdH1weGBcbiAgICAgICAgICA6IGAke1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmxlZnQgK1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLndpZHRoIC1cbiAgICAgICAgICAgICAgbWVudUVsZW1lbnRDb29yZGluYXRlcy53aWR0aFxuICAgICAgICAgICAgfXB4YDtcbiAgICB9XG4gIH0sIFtwcm9wcy5pc09wZW4sIHByb3BzLm1lbnVQb3NpdGlvbiwgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWZdKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Z2V0RHJvcGRvd25NZW51QmFzZVN0eWxlcyhwcm9wcyl9XG4gICAgICBzdHlsZT17cHJvcHMuY3VzdG9tU3R5bGVzfVxuICAgICAgcmVmPXttZW51UmVmfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duQ29udGVudE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duQ29udGVudE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkNvbnRlbnRNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgY3VzdG9tU3R5bGVzPXt7XG4gICAgICAgIHBhZGRpbmc6IGRlc2lnblRva2Vucy5zcGFjaW5nMzAsXG4gICAgICB9fVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgPC9Ecm9wZG93bkJhc2VNZW51PlxuICApO1xufTtcblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duTGlzdE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkxpc3RNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICA8U3BhY2luZ3NTdGFjayBzY2FsZT1cInhzXCI+e3Byb3BzLmNoaWxkcmVufTwvU3BhY2luZ3NTdGFjaz5cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuIl19 */");
+}
+function DropdownBaseMenu(props) {
+  const menuRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    // Update the position of the menu when it is open
+    if (props.isOpen && props.triggerElementRef.current && menuRef.current) {
+      const triggerElementCoordinates = props.triggerElementRef.current.getBoundingClientRect();
+      const menuElementCoordinates = menuRef.current.getBoundingClientRect();
+      menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
+      menuRef.current.style.left = props.menuPosition === 'left' ? "".concat(triggerElementCoordinates.left, "px") : "".concat(triggerElementCoordinates.left + triggerElementCoordinates.width - menuElementCoordinates.width, "px");
+    }
+  }, [props.isOpen, props.menuPosition, props.triggerElementRef]);
+  return jsxRuntime.jsx("div", {
+    css: getDropdownMenuBaseStyles(props),
+    style: props.customStyles,
+    ref: menuRef,
+    children: props.children
+  });
+}
+DropdownBaseMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default["default"].node.isRequired,
+  customStyles: _pt__default["default"].any,
+  horizontalConstraint: _pt__default["default"].any.isRequired,
+  isOpen: _pt__default["default"].bool.isRequired,
+  menuPosition: _pt__default["default"].oneOf(['left', 'right']).isRequired,
+  triggerElementRef: _pt__default["default"].any.isRequired
+} : {};
+const DropdownContentMenu = props => {
+  return jsxRuntime.jsx(DropdownBaseMenu, {
+    customStyles: {
+      padding: designSystem.designTokens.spacing30
+    },
+    horizontalConstraint: props.horizontalConstraint,
+    isOpen: props.isOpen,
+    menuPosition: props.menuPosition,
+    triggerElementRef: props.triggerElementRef,
+    children: props.children
+  });
+};
+DropdownContentMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default["default"].node.isRequired,
+  horizontalConstraint: _pt__default["default"].any.isRequired,
+  menuPosition: _pt__default["default"].oneOf(['left', 'right']).isRequired,
+  isOpen: _pt__default["default"].bool.isRequired,
+  triggerElementRef: _pt__default["default"].any.isRequired
+} : {};
+const DropdownListMenu = props => {
+  return jsxRuntime.jsx(DropdownBaseMenu, {
+    horizontalConstraint: props.horizontalConstraint,
+    isOpen: props.isOpen,
+    menuPosition: props.menuPosition,
+    triggerElementRef: props.triggerElementRef,
+    children: jsxRuntime.jsx(SpacingsStack__default["default"], {
+      scale: "xs",
+      children: props.children
+    })
+  });
+};
+DropdownListMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt__default["default"].node.isRequired,
+  horizontalConstraint: _pt__default["default"].any.isRequired,
+  menuPosition: _pt__default["default"].oneOf(['left', 'right']).isRequired,
+  isOpen: _pt__default["default"].bool.isRequired,
+  triggerElementRef: _pt__default["default"].any.isRequired
+} : {};
+
+function getDropdownListMenuItemStyles(props) {
+  return [/*#__PURE__*/react.css("display:block;text-align:left;text-wrap:wrap;width:100%;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";&:first-of-type{border-radius:", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, ";}&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPTyIsImZpbGUiOiJkcm9wZG93bi1tZW51LWxpc3QtaXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgQWNjZXNzaWJsZUJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9hY2Nlc3NpYmxlLWJ1dHRvbic7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IHVzZURyb3Bkb3duTWVudUNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0L2Ryb3Bkb3duLW1lbnUtY29udGV4dCc7XG5cbmZ1bmN0aW9uIGdldERyb3Bkb3duTGlzdE1lbnVJdGVtU3R5bGVzKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICAgIHRleHQtd3JhcDogd3JhcDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfSAke2Rlc2lnblRva2Vucy5zcGFjaW5nMzB9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn0gMCAwO1xuICAgICAgfVxuICAgICAgJjpsYXN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwIDAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn1cbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fTtcbiAgICAgIH1cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk5OH07XG4gICAgICB9XG4gICAgYCxcbiAgICBwcm9wcy5pc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWx9O1xuICAgICAgYCxcbiAgXTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMgPSB7XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICBpc0Rpc2FibGVkPzogYm9vbGVhbjtcbiAgY2hpbGRyZW46IHN0cmluZztcbn07XG5cbmZ1bmN0aW9uIERyb3Bkb3duTGlzdE1lbnVJdGVtKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICBjb25zdCB7IHRvZ2dsZSB9ID0gdXNlRHJvcGRvd25NZW51Q29udGV4dCgpO1xuICByZXR1cm4gKFxuICAgIDxBY2Nlc3NpYmxlQnV0dG9uXG4gICAgICBsYWJlbD17cHJvcHMuY2hpbGRyZW59XG4gICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgIHRvZ2dsZSgpO1xuICAgICAgICBwcm9wcy5vbkNsaWNrPy4oKTtcbiAgICAgIH19XG4gICAgICBpc0Rpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgICAgY3NzPXtnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wcyl9XG4gICAgPlxuICAgICAge3Byb3BzLmNoaWxkcmVufVxuICAgIDwvQWNjZXNzaWJsZUJ1dHRvbj5cbiAgKTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgRHJvcGRvd25MaXN0TWVudUl0ZW07XG4iXX0= */"), props.isDisabled && /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQlMiLCJmaWxlIjoiZHJvcGRvd24tbWVudS1saXN0LWl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IEFjY2Vzc2libGVCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvYWNjZXNzaWJsZS1idXR0b24nO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyB1c2VEcm9wZG93bk1lbnVDb250ZXh0IH0gZnJvbSAnLi4vY29udGV4dC9kcm9wZG93bi1tZW51LWNvbnRleHQnO1xuXG5mdW5jdGlvbiBnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICB0ZXh0LXdyYXA6IHdyYXA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fVxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9IDAgMDtcbiAgICAgIH1cbiAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMCAwICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn07XG4gICAgICB9XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5OTh9O1xuICAgICAgfVxuICAgIGAsXG4gICAgcHJvcHMuaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsfTtcbiAgICAgIGAsXG4gIF07XG59XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bkxpc3RNZW51SXRlbVByb3BzID0ge1xuICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBzdHJpbmc7XG59O1xuXG5mdW5jdGlvbiBEcm9wZG93bkxpc3RNZW51SXRlbShwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgY29uc3QgeyB0b2dnbGUgfSA9IHVzZURyb3Bkb3duTWVudUNvbnRleHQoKTtcbiAgcmV0dXJuIChcbiAgICA8QWNjZXNzaWJsZUJ1dHRvblxuICAgICAgbGFiZWw9e3Byb3BzLmNoaWxkcmVufVxuICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICB0b2dnbGUoKTtcbiAgICAgICAgcHJvcHMub25DbGljaz8uKCk7XG4gICAgICB9fVxuICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIGNzcz17Z2V0RHJvcGRvd25MaXN0TWVudUl0ZW1TdHlsZXMocHJvcHMpfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L0FjY2Vzc2libGVCdXR0b24+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuIl19 */")];
+}
+function DropdownListMenuItem(props) {
+  const _useDropdownMenuConte = useDropdownMenuContext(),
+    toggle = _useDropdownMenuConte.toggle;
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
+    label: props.children,
+    onClick: () => {
+      var _props$onClick;
+      toggle();
+      (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+    },
+    isDisabled: props.isDisabled,
+    css: getDropdownListMenuItemStyles(props),
+    children: props.children
+  });
+}
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const defaultProps = {
+  menuHorizontalConstraint: 'auto',
+  menuPosition: 'left',
+  menuType: 'default'
+};
+const Container = /*#__PURE__*/_styled__default["default"]("div", process.env.NODE_ENV === "production" ? {
+  target: "e5g0mzs0"
+} : {
+  target: "e5g0mzs0",
+  label: "Container"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1nrevy2",
+  styles: "position:relative;display:inline-block"
+} : {
+  name: "1nrevy2",
+  styles: "position:relative;display:inline-block",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1ENEIiLCJmaWxlIjoiZHJvcGRvd24tbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHtcbiAgdXNlQ2FsbGJhY2ssXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdHlwZSBSZWFjdEVsZW1lbnQsXG4gIHR5cGUgUmVhY3ROb2RlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUb2dnbGVTdGF0ZSB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2hvb2tzJztcbmltcG9ydCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgRHJvcGRvd25NZW51Q29udGV4dCBmcm9tICcuL2NvbnRleHQnO1xuaW1wb3J0IERyb3Bkb3duVHJpZ2dlciBmcm9tICcuL3RyaWdnZXInO1xuaW1wb3J0IHtcbiAgRHJvcGRvd25Db250ZW50TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudUl0ZW0sXG59IGZyb20gJy4vbWVudSc7XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bk1lbnVQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSByZWxhdGl2ZSB0byB0aGUgdHJpZ2dlciBlbGVtZW50LlxuICAgKi9cbiAgbWVudVBvc2l0aW9uPzogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgLyoqXG4gICAqIFRoZSBlbGVtZW50IHRoYXQgdHJpZ2dlcnMgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgdHJpZ2dlckVsZW1lbnQ6IFJlYWN0RWxlbWVudDtcbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBtZW51LlxuICAgKiBUaGUgJ2RlZmF1bHQnIHR5cGUganVzdCByZW5kZXJzIGEgZHJvcGRvd24gY29udGFpbmVyIGJ1dCB0aGUgJ2xpc3QnIHR5cGUgaXMgaW50ZW5kZWQgdG8gYmUgdXNlZCB3aXRoIHRoZSBEcm9wZG93bk1lbnUuTGlzdE1lbnVJdGVtIGNvbXBvbmVudC5cbiAgICovXG4gIG1lbnVUeXBlPzogJ2RlZmF1bHQnIHwgJ2xpc3QnO1xuICAvKipcbiAgICogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBvZiB0aGUgbWVudS5cbiAgICovXG4gIG1lbnVIb3Jpem9udGFsQ29uc3RyYWludD86IFRNYXhQcm9wO1xuICAvKipcbiAgICogVGhlIGNvbnRlbnQgb2YgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVERyb3Bkb3duTWVudVByb3BzLFxuICAnbWVudVBvc2l0aW9uJyB8ICdtZW51VHlwZScgfCAnbWVudUhvcml6b250YWxDb25zdHJhaW50J1xuPiA9IHtcbiAgbWVudUhvcml6b250YWxDb25zdHJhaW50OiAnYXV0bycsXG4gIG1lbnVQb3NpdGlvbjogJ2xlZnQnLFxuICBtZW51VHlwZTogJ2RlZmF1bHQnLFxufTtcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5gO1xuXG5mdW5jdGlvbiBEcm9wZG93bk1lbnUocHJvcHM6IFREcm9wZG93bk1lbnVQcm9wcykge1xuICBjb25zdCBbaXNPcGVuLCB0b2dnbGVdID0gdXNlVG9nZ2xlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB0cmlnZ2VyUmVmID0gUmVhY3QudXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcblxuICAvLyBXZSB1c2UgdGhlIGNvbnRleHQgc28gY2hpbGRyZW4gY2FuIHRvZ2dsZSB0aGUgZHJvcGRvd25cbiAgY29uc3QgY29udGV4dCA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKHtcbiAgICAgIGlzT3BlbixcbiAgICAgIHRvZ2dsZSxcbiAgICB9KSxcbiAgICBbaXNPcGVuLCB0b2dnbGVdXG4gICk7XG4gIGNvbnN0IE1lbnUgPVxuICAgIHByb3BzLm1lbnVUeXBlID09PSAnZGVmYXVsdCcgPyBEcm9wZG93bkNvbnRlbnRNZW51IDogRHJvcGRvd25MaXN0TWVudTtcblxuICAvLyBDbG9zZSB0aGUgZHJvcGRvd24gd2hlbiBjbGlja2luZyBvdXRzaWRlIG9mIGl0XG4gIGNvbnN0IGhhbmRsZUdsb2JhbENsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50KSA9PiB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudCA9IHRyaWdnZXJSZWYuY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIHRyaWdnZXJFbGVtZW50ICYmXG4gICAgICAgIGV2ZW50LnRhcmdldCAhPT0gdHJpZ2dlckVsZW1lbnQgJiZcbiAgICAgICAgd2luZG93LmRvY3VtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkgJiZcbiAgICAgICAgIXRyaWdnZXJFbGVtZW50LnBhcmVudEVsZW1lbnQ/LmNvbnRhaW5zKGV2ZW50LnRhcmdldClcbiAgICAgICkge1xuICAgICAgICB0b2dnbGUoZmFsc2UpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW3RyaWdnZXJSZWYsIHRvZ2dsZSwgaXNPcGVuXVxuICApO1xuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZUdsb2JhbENsaWNrKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlR2xvYmFsQ2xpY2spO1xuICAgIH07XG4gIH0sIFtoYW5kbGVHbG9iYWxDbGlja10pO1xuICAvLyBCbG9jayBzY3JvbGxpbmcgd2hlbiB0aGUgZHJvcGRvd24gaXMgb3BlblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChpc09wZW4pIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2hpZGRlbic7XG4gICAgfSBlbHNlIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2luaXRpYWwnO1xuICAgIH1cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LmRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSAnaW5pdGlhbCc7XG4gICAgfTtcbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duTWVudUNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2NvbnRleHR9PlxuICAgICAgPENvbnRhaW5lcj5cbiAgICAgICAgPERyb3Bkb3duVHJpZ2dlciBvbkNsaWNrPXt0b2dnbGV9IHJlZj17dHJpZ2dlclJlZn0+XG4gICAgICAgICAge3Byb3BzLnRyaWdnZXJFbGVtZW50fVxuICAgICAgICA8L0Ryb3Bkb3duVHJpZ2dlcj5cblxuICAgICAgICA8TWVudVxuICAgICAgICAgIGhvcml6b250YWxDb25zdHJhaW50PXtwcm9wcy5tZW51SG9yaXpvbnRhbENvbnN0cmFpbnQhfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIG1lbnVQb3NpdGlvbj17cHJvcHMubWVudVBvc2l0aW9uIX1cbiAgICAgICAgICB0cmlnZ2VyRWxlbWVudFJlZj17dHJpZ2dlclJlZn1cbiAgICAgICAgPlxuICAgICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICAgICAgPC9NZW51PlxuICAgICAgPC9Db250YWluZXI+XG4gICAgPC9Ecm9wZG93bk1lbnVDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufVxuRHJvcGRvd25NZW51LmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuRHJvcGRvd25NZW51Lkxpc3RNZW51SXRlbSA9IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuXG5leHBvcnQgZGVmYXVsdCBEcm9wZG93bk1lbnU7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+function DropdownMenu(props) {
+  const _useToggleState = hooks.useToggleState(false),
+    _useToggleState2 = _slicedToArray(_useToggleState, 2),
+    isOpen = _useToggleState2[0],
+    toggle = _useToggleState2[1];
+  const triggerRef = React__default["default"].useRef(null);
+
+  // We use the context so children can toggle the dropdown
+  const context = React.useMemo(() => ({
+    isOpen,
+    toggle
+  }), [isOpen, toggle]);
+  const Menu = props.menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
+
+  // Close the dropdown when clicking outside of it
+  const handleGlobalClick = React.useCallback(event => {
+    var _triggerElement$paren;
+    const triggerElement = triggerRef.current;
+    if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !((_triggerElement$paren = triggerElement.parentElement) !== null && _triggerElement$paren !== void 0 && _triggerElement$paren.contains(event.target))) {
+      toggle(false);
+    }
+  }, [triggerRef, toggle, isOpen]);
+  React.useEffect(() => {
+    window.addEventListener('click', handleGlobalClick);
+    return () => {
+      window.removeEventListener('click', handleGlobalClick);
+    };
+  }, [handleGlobalClick]);
+  // Block scrolling when the dropdown is open
+  React.useEffect(() => {
+    if (isOpen) {
+      window.document.body.style.overflow = 'hidden';
+    } else {
+      window.document.body.style.overflow = 'initial';
+    }
+    return () => {
+      window.document.body.style.overflow = 'initial';
+    };
+  }, [isOpen]);
+  return jsxRuntime.jsx(DropdownMenuContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsxs(Container, {
+      children: [jsxRuntime.jsx(DropdownTrigger, {
+        onClick: toggle,
+        ref: triggerRef,
+        children: props.triggerElement
+      }), jsxRuntime.jsx(Menu, {
+        horizontalConstraint: props.menuHorizontalConstraint,
+        isOpen: isOpen,
+        menuPosition: props.menuPosition,
+        triggerElementRef: triggerRef,
+        children: props.children
+      })]
+    })
+  });
+}
+DropdownMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  menuPosition: _pt__default["default"].oneOf(['left', 'right']),
+  triggerElement: _pt__default["default"].element.isRequired,
+  menuType: _pt__default["default"].oneOf(['default', 'list']),
+  menuHorizontalConstraint: _pt__default["default"].any,
+  children: _pt__default["default"].node.isRequired
+} : {};
+DropdownMenu.defaultProps = defaultProps;
+DropdownMenu.ListMenuItem = DropdownListMenuItem;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "19.0.0";
+
+exports["default"] = DropdownMenu;
+exports.useDropdownMenuContext = useDropdownMenuContext;
+exports.version = version;

package/dist/commercetools-uikit-dropdown-menu.cjs.js

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./commercetools-uikit-dropdown-menu.cjs.prod.js");
+} else {
+  module.exports = require("./commercetools-uikit-dropdown-menu.cjs.dev.js");
+}

package/dist/commercetools-uikit-dropdown-menu.cjs.prod.js

@@ -0,0 +1,194 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _slicedToArray = require('@babel/runtime-corejs3/helpers/slicedToArray');
+var _styled = require('@emotion/styled/base');
+require('prop-types');
+var React = require('react');
+var hooks = require('@commercetools-uikit/hooks');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react = require('@emotion/react');
+var designSystem = require('@commercetools-uikit/design-system');
+var Constraints = require('@commercetools-uikit/constraints');
+var SpacingsStack = require('@commercetools-uikit/spacings-stack');
+var AccessibleButton = require('@commercetools-uikit/accessible-button');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+var _styled__default = /*#__PURE__*/_interopDefault(_styled);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Constraints__default = /*#__PURE__*/_interopDefault(Constraints);
+var SpacingsStack__default = /*#__PURE__*/_interopDefault(SpacingsStack);
+var AccessibleButton__default = /*#__PURE__*/_interopDefault(AccessibleButton);
+
+const DropdownMenuContext = /*#__PURE__*/React.createContext({
+  isOpen: false,
+  toggle: () => {}
+});
+function useDropdownMenuContext() {
+  const context = React.useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error('[ui-kit] DropdownMenu context can only be used in DropdownMenu children components.');
+  }
+  return {
+    isOpen: context.isOpen,
+    toggle: context.toggle
+  };
+}
+
+const DropDownTrigger = /*#__PURE__*/React.forwardRef((props, ref) => {
+  return jsxRuntime.jsx("div", {
+    onClick: props.onClick,
+    ref: ref,
+    children: props.children
+  });
+});
+DropDownTrigger.displayName = 'DropDownTrigger';
+var DropdownTrigger = DropDownTrigger;
+
+function getDropdownMenuBaseStyles(params) {
+  return /*#__PURE__*/react.css("background-color:", designSystem.designTokens.colorSurface, ";border:1px solid ", designSystem.designTokens.colorSurface, ";border-radius:", designSystem.designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", designSystem.designTokens.spacing20, ";max-width:", Constraints__default["default"].getMaxPropTokenValue(params.horizontalConstraint), ";position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + ("" ), "" );
+}
+function DropdownBaseMenu(props) {
+  const menuRef = React.useRef(null);
+  React.useLayoutEffect(() => {
+    // Update the position of the menu when it is open
+    if (props.isOpen && props.triggerElementRef.current && menuRef.current) {
+      const triggerElementCoordinates = props.triggerElementRef.current.getBoundingClientRect();
+      const menuElementCoordinates = menuRef.current.getBoundingClientRect();
+      menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
+      menuRef.current.style.left = props.menuPosition === 'left' ? "".concat(triggerElementCoordinates.left, "px") : "".concat(triggerElementCoordinates.left + triggerElementCoordinates.width - menuElementCoordinates.width, "px");
+    }
+  }, [props.isOpen, props.menuPosition, props.triggerElementRef]);
+  return jsxRuntime.jsx("div", {
+    css: getDropdownMenuBaseStyles(props),
+    style: props.customStyles,
+    ref: menuRef,
+    children: props.children
+  });
+}
+DropdownBaseMenu.propTypes = {};
+const DropdownContentMenu = props => {
+  return jsxRuntime.jsx(DropdownBaseMenu, {
+    customStyles: {
+      padding: designSystem.designTokens.spacing30
+    },
+    horizontalConstraint: props.horizontalConstraint,
+    isOpen: props.isOpen,
+    menuPosition: props.menuPosition,
+    triggerElementRef: props.triggerElementRef,
+    children: props.children
+  });
+};
+DropdownContentMenu.propTypes = {};
+const DropdownListMenu = props => {
+  return jsxRuntime.jsx(DropdownBaseMenu, {
+    horizontalConstraint: props.horizontalConstraint,
+    isOpen: props.isOpen,
+    menuPosition: props.menuPosition,
+    triggerElementRef: props.triggerElementRef,
+    children: jsxRuntime.jsx(SpacingsStack__default["default"], {
+      scale: "xs",
+      children: props.children
+    })
+  });
+};
+DropdownListMenu.propTypes = {};
+
+function getDropdownListMenuItemStyles(props) {
+  return [/*#__PURE__*/react.css("display:block;text-align:left;text-wrap:wrap;width:100%;padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing30, ";background-color:", designSystem.designTokens.colorSurface, ";&:first-of-type{border-radius:", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designSystem.designTokens.borderRadius6, " ", designSystem.designTokens.borderRadius6, ";}&:hover{background-color:", designSystem.designTokens.colorPrimary98, ";}" + ("" ), "" ), props.isDisabled && /*#__PURE__*/react.css("color:", designSystem.designTokens.colorNeutral, ";" + ("" ), "" )];
+}
+function DropdownListMenuItem(props) {
+  const _useDropdownMenuConte = useDropdownMenuContext(),
+    toggle = _useDropdownMenuConte.toggle;
+  return jsxRuntime.jsx(AccessibleButton__default["default"], {
+    label: props.children,
+    onClick: () => {
+      var _props$onClick;
+      toggle();
+      (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+    },
+    isDisabled: props.isDisabled,
+    css: getDropdownListMenuItemStyles(props),
+    children: props.children
+  });
+}
+
+const defaultProps = {
+  menuHorizontalConstraint: 'auto',
+  menuPosition: 'left',
+  menuType: 'default'
+};
+const Container = /*#__PURE__*/_styled__default["default"]("div", {
+  target: "e5g0mzs0"
+} )({
+  name: "1nrevy2",
+  styles: "position:relative;display:inline-block"
+} );
+function DropdownMenu(props) {
+  const _useToggleState = hooks.useToggleState(false),
+    _useToggleState2 = _slicedToArray(_useToggleState, 2),
+    isOpen = _useToggleState2[0],
+    toggle = _useToggleState2[1];
+  const triggerRef = React__default["default"].useRef(null);
+
+  // We use the context so children can toggle the dropdown
+  const context = React.useMemo(() => ({
+    isOpen,
+    toggle
+  }), [isOpen, toggle]);
+  const Menu = props.menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
+
+  // Close the dropdown when clicking outside of it
+  const handleGlobalClick = React.useCallback(event => {
+    var _triggerElement$paren;
+    const triggerElement = triggerRef.current;
+    if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !((_triggerElement$paren = triggerElement.parentElement) !== null && _triggerElement$paren !== void 0 && _triggerElement$paren.contains(event.target))) {
+      toggle(false);
+    }
+  }, [triggerRef, toggle, isOpen]);
+  React.useEffect(() => {
+    window.addEventListener('click', handleGlobalClick);
+    return () => {
+      window.removeEventListener('click', handleGlobalClick);
+    };
+  }, [handleGlobalClick]);
+  // Block scrolling when the dropdown is open
+  React.useEffect(() => {
+    if (isOpen) {
+      window.document.body.style.overflow = 'hidden';
+    } else {
+      window.document.body.style.overflow = 'initial';
+    }
+    return () => {
+      window.document.body.style.overflow = 'initial';
+    };
+  }, [isOpen]);
+  return jsxRuntime.jsx(DropdownMenuContext.Provider, {
+    value: context,
+    children: jsxRuntime.jsxs(Container, {
+      children: [jsxRuntime.jsx(DropdownTrigger, {
+        onClick: toggle,
+        ref: triggerRef,
+        children: props.triggerElement
+      }), jsxRuntime.jsx(Menu, {
+        horizontalConstraint: props.menuHorizontalConstraint,
+        isOpen: isOpen,
+        menuPosition: props.menuPosition,
+        triggerElementRef: triggerRef,
+        children: props.children
+      })]
+    })
+  });
+}
+DropdownMenu.propTypes = {};
+DropdownMenu.defaultProps = defaultProps;
+DropdownMenu.ListMenuItem = DropdownListMenuItem;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "19.0.0";
+
+exports["default"] = DropdownMenu;
+exports.useDropdownMenuContext = useDropdownMenuContext;
+exports.version = version;

package/dist/commercetools-uikit-dropdown-menu.esm.js

@@ -0,0 +1,214 @@
+import _slicedToArray from '@babel/runtime-corejs3/helpers/esm/slicedToArray';
+import _styled from '@emotion/styled/base';
+import _pt from 'prop-types';
+import React, { useContext, createContext, forwardRef, useRef, useLayoutEffect, useMemo, useCallback, useEffect } from 'react';
+import { useToggleState } from '@commercetools-uikit/hooks';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+import { designTokens } from '@commercetools-uikit/design-system';
+import Constraints from '@commercetools-uikit/constraints';
+import SpacingsStack from '@commercetools-uikit/spacings-stack';
+import AccessibleButton from '@commercetools-uikit/accessible-button';
+
+const DropdownMenuContext = /*#__PURE__*/createContext({
+  isOpen: false,
+  toggle: () => {}
+});
+function useDropdownMenuContext() {
+  const context = useContext(DropdownMenuContext);
+  if (!context) {
+    throw new Error('[ui-kit] DropdownMenu context can only be used in DropdownMenu children components.');
+  }
+  return {
+    isOpen: context.isOpen,
+    toggle: context.toggle
+  };
+}
+
+const DropDownTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx("div", {
+    onClick: props.onClick,
+    ref: ref,
+    children: props.children
+  });
+});
+DropDownTrigger.displayName = 'DropDownTrigger';
+var DropdownTrigger = DropDownTrigger;
+
+function getDropdownMenuBaseStyles(params) {
+  return /*#__PURE__*/css("background-color:", designTokens.colorSurface, ";border:1px solid ", designTokens.colorSurface, ";border-radius:", designTokens.borderRadius4, ";box-shadow:0 2px 5px 0px rgba(0, 0, 0, 0.15);display:", params.isOpen ? 'block' : 'none', ";margin-top:", designTokens.spacing20, ";max-width:", Constraints.getMaxPropTokenValue(params.horizontalConstraint), ";position:fixed;width:", params.horizontalConstraint === 'auto' ? 'auto' : '100%', ";z-index:5;" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownMenuBaseStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbWVudS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBZ0JZIiwiZmlsZSI6ImRyb3Bkb3duLW1lbnUtbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDU1NQcm9wZXJ0aWVzLFxuICBSZWFjdE5vZGUsXG4gIFJlZk9iamVjdCxcbiAgdXNlTGF5b3V0RWZmZWN0LFxuICB1c2VSZWYsXG59IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCB7IGRlc2lnblRva2VucyB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2Rlc2lnbi1zeXN0ZW0nO1xuaW1wb3J0IENvbnN0cmFpbnRzLCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgU3BhY2luZ3NTdGFjayBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9zcGFjaW5ncy1zdGFjayc7XG5cbmV4cG9ydCBmdW5jdGlvbiBnZXREcm9wZG93bk1lbnVCYXNlU3R5bGVzKHBhcmFtczoge1xuICBpc09wZW46IGJvb2xlYW47XG4gIGhvcml6b250YWxDb25zdHJhaW50OiBUTWF4UHJvcDtcbn0pIHtcbiAgcmV0dXJuIGNzc2BcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclN1cmZhY2V9O1xuICAgIGJvcmRlcjogMXB4IHNvbGlkICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgYm9yZGVyLXJhZGl1czogJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNH07XG4gICAgYm94LXNoYWRvdzogMCAycHggNXB4IDBweCByZ2JhKDAsIDAsIDAsIDAuMTUpO1xuICAgIGRpc3BsYXk6ICR7cGFyYW1zLmlzT3BlbiA/ICdibG9jaycgOiAnbm9uZSd9O1xuICAgIG1hcmdpbi10b3A6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH07XG4gICAgbWF4LXdpZHRoOiAke0NvbnN0cmFpbnRzLmdldE1heFByb3BUb2tlblZhbHVlKHBhcmFtcy5ob3Jpem9udGFsQ29uc3RyYWludCl9O1xuICAgIHBvc2l0aW9uOiBmaXhlZDtcbiAgICB3aWR0aDogJHtwYXJhbXMuaG9yaXpvbnRhbENvbnN0cmFpbnQgPT09ICdhdXRvJyA/ICdhdXRvJyA6ICcxMDAlJ307XG4gICAgei1pbmRleDogNTtcbiAgYDtcbn1cblxudHlwZSBURHJvcGRvd25CYXNlTWVudVByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3ROb2RlO1xuICBjdXN0b21TdHlsZXM/OiBDU1NQcm9wZXJ0aWVzO1xuICBob3Jpem9udGFsQ29uc3RyYWludDogVE1heFByb3A7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgbWVudVBvc2l0aW9uOiAnbGVmdCcgfCAncmlnaHQnO1xuICB0cmlnZ2VyRWxlbWVudFJlZjogUmVmT2JqZWN0PEhUTUxFbGVtZW50Pjtcbn07XG5mdW5jdGlvbiBEcm9wZG93bkJhc2VNZW51KHByb3BzOiBURHJvcGRvd25CYXNlTWVudVByb3BzKSB7XG4gIGNvbnN0IG1lbnVSZWYgPSB1c2VSZWY8SFRNTERpdkVsZW1lbnQ+KG51bGwpO1xuXG4gIHVzZUxheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgLy8gVXBkYXRlIHRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSB3aGVuIGl0IGlzIG9wZW5cbiAgICBpZiAocHJvcHMuaXNPcGVuICYmIHByb3BzLnRyaWdnZXJFbGVtZW50UmVmLmN1cnJlbnQgJiYgbWVudVJlZi5jdXJyZW50KSB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzID1cbiAgICAgICAgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWYuY3VycmVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKTtcbiAgICAgIGNvbnN0IG1lbnVFbGVtZW50Q29vcmRpbmF0ZXMgPSBtZW51UmVmLmN1cnJlbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG5cbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS50b3AgPSBgJHtcbiAgICAgICAgdHJpZ2dlckVsZW1lbnRDb29yZGluYXRlcy50b3AgKyB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmhlaWdodFxuICAgICAgfXB4YDtcbiAgICAgIG1lbnVSZWYuY3VycmVudC5zdHlsZS5sZWZ0ID1cbiAgICAgICAgcHJvcHMubWVudVBvc2l0aW9uID09PSAnbGVmdCdcbiAgICAgICAgICA/IGAke3RyaWdnZXJFbGVtZW50Q29vcmRpbmF0ZXMubGVmdH1weGBcbiAgICAgICAgICA6IGAke1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLmxlZnQgK1xuICAgICAgICAgICAgICB0cmlnZ2VyRWxlbWVudENvb3JkaW5hdGVzLndpZHRoIC1cbiAgICAgICAgICAgICAgbWVudUVsZW1lbnRDb29yZGluYXRlcy53aWR0aFxuICAgICAgICAgICAgfXB4YDtcbiAgICB9XG4gIH0sIFtwcm9wcy5pc09wZW4sIHByb3BzLm1lbnVQb3NpdGlvbiwgcHJvcHMudHJpZ2dlckVsZW1lbnRSZWZdKTtcblxuICByZXR1cm4gKFxuICAgIDxkaXZcbiAgICAgIGNzcz17Z2V0RHJvcGRvd25NZW51QmFzZVN0eWxlcyhwcm9wcyl9XG4gICAgICBzdHlsZT17cHJvcHMuY3VzdG9tU3R5bGVzfVxuICAgICAgcmVmPXttZW51UmVmfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L2Rpdj5cbiAgKTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duQ29udGVudE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duQ29udGVudE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkNvbnRlbnRNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgY3VzdG9tU3R5bGVzPXt7XG4gICAgICAgIHBhZGRpbmc6IGRlc2lnblRva2Vucy5zcGFjaW5nMzAsXG4gICAgICB9fVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICB7cHJvcHMuY2hpbGRyZW59XG4gICAgPC9Ecm9wZG93bkJhc2VNZW51PlxuICApO1xufTtcblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVQcm9wcyA9IHtcbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbiAgaG9yaXpvbnRhbENvbnN0cmFpbnQ6IFRNYXhQcm9wO1xuICBtZW51UG9zaXRpb246ICdsZWZ0JyB8ICdyaWdodCc7XG4gIGlzT3BlbjogYm9vbGVhbjtcbiAgdHJpZ2dlckVsZW1lbnRSZWY6IFJlZk9iamVjdDxIVE1MRWxlbWVudD47XG59O1xuZXhwb3J0IGNvbnN0IERyb3Bkb3duTGlzdE1lbnUgPSAocHJvcHM6IFREcm9wZG93bkxpc3RNZW51UHJvcHMpID0+IHtcbiAgcmV0dXJuIChcbiAgICA8RHJvcGRvd25CYXNlTWVudVxuICAgICAgaG9yaXpvbnRhbENvbnN0cmFpbnQ9e3Byb3BzLmhvcml6b250YWxDb25zdHJhaW50fVxuICAgICAgaXNPcGVuPXtwcm9wcy5pc09wZW59XG4gICAgICBtZW51UG9zaXRpb249e3Byb3BzLm1lbnVQb3NpdGlvbn1cbiAgICAgIHRyaWdnZXJFbGVtZW50UmVmPXtwcm9wcy50cmlnZ2VyRWxlbWVudFJlZn1cbiAgICA+XG4gICAgICA8U3BhY2luZ3NTdGFjayBzY2FsZT1cInhzXCI+e3Byb3BzLmNoaWxkcmVufTwvU3BhY2luZ3NTdGFjaz5cbiAgICA8L0Ryb3Bkb3duQmFzZU1lbnU+XG4gICk7XG59O1xuIl19 */");
+}
+function DropdownBaseMenu(props) {
+  const menuRef = useRef(null);
+  useLayoutEffect(() => {
+    // Update the position of the menu when it is open
+    if (props.isOpen && props.triggerElementRef.current && menuRef.current) {
+      const triggerElementCoordinates = props.triggerElementRef.current.getBoundingClientRect();
+      const menuElementCoordinates = menuRef.current.getBoundingClientRect();
+      menuRef.current.style.top = "".concat(triggerElementCoordinates.top + triggerElementCoordinates.height, "px");
+      menuRef.current.style.left = props.menuPosition === 'left' ? "".concat(triggerElementCoordinates.left, "px") : "".concat(triggerElementCoordinates.left + triggerElementCoordinates.width - menuElementCoordinates.width, "px");
+    }
+  }, [props.isOpen, props.menuPosition, props.triggerElementRef]);
+  return jsx("div", {
+    css: getDropdownMenuBaseStyles(props),
+    style: props.customStyles,
+    ref: menuRef,
+    children: props.children
+  });
+}
+DropdownBaseMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt.node.isRequired,
+  customStyles: _pt.any,
+  horizontalConstraint: _pt.any.isRequired,
+  isOpen: _pt.bool.isRequired,
+  menuPosition: _pt.oneOf(['left', 'right']).isRequired,
+  triggerElementRef: _pt.any.isRequired
+} : {};
+const DropdownContentMenu = props => {
+  return jsx(DropdownBaseMenu, {
+    customStyles: {
+      padding: designTokens.spacing30
+    },
+    horizontalConstraint: props.horizontalConstraint,
+    isOpen: props.isOpen,
+    menuPosition: props.menuPosition,
+    triggerElementRef: props.triggerElementRef,
+    children: props.children
+  });
+};
+DropdownContentMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt.node.isRequired,
+  horizontalConstraint: _pt.any.isRequired,
+  menuPosition: _pt.oneOf(['left', 'right']).isRequired,
+  isOpen: _pt.bool.isRequired,
+  triggerElementRef: _pt.any.isRequired
+} : {};
+const DropdownListMenu = props => {
+  return jsx(DropdownBaseMenu, {
+    horizontalConstraint: props.horizontalConstraint,
+    isOpen: props.isOpen,
+    menuPosition: props.menuPosition,
+    triggerElementRef: props.triggerElementRef,
+    children: jsx(SpacingsStack, {
+      scale: "xs",
+      children: props.children
+    })
+  });
+};
+DropdownListMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: _pt.node.isRequired,
+  horizontalConstraint: _pt.any.isRequired,
+  menuPosition: _pt.oneOf(['left', 'right']).isRequired,
+  isOpen: _pt.bool.isRequired,
+  triggerElementRef: _pt.any.isRequired
+} : {};
+
+function getDropdownListMenuItemStyles(props) {
+  return [/*#__PURE__*/css("display:block;text-align:left;text-wrap:wrap;width:100%;padding:", designTokens.spacing20, " ", designTokens.spacing30, ";background-color:", designTokens.colorSurface, ";&:first-of-type{border-radius:", designTokens.borderRadius6, " ", designTokens.borderRadius6, " 0 0;}&:last-of-type{border-radius:0 0 ", designTokens.borderRadius6, " ", designTokens.borderRadius6, ";}&:hover{background-color:", designTokens.colorPrimary98, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPTyIsImZpbGUiOiJkcm9wZG93bi1tZW51LWxpc3QtaXRlbS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgQWNjZXNzaWJsZUJ1dHRvbiBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9hY2Nlc3NpYmxlLWJ1dHRvbic7XG5pbXBvcnQgeyBkZXNpZ25Ub2tlbnMgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9kZXNpZ24tc3lzdGVtJztcbmltcG9ydCB7IHVzZURyb3Bkb3duTWVudUNvbnRleHQgfSBmcm9tICcuLi9jb250ZXh0L2Ryb3Bkb3duLW1lbnUtY29udGV4dCc7XG5cbmZ1bmN0aW9uIGdldERyb3Bkb3duTGlzdE1lbnVJdGVtU3R5bGVzKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICByZXR1cm4gW1xuICAgIGNzc2BcbiAgICAgIGRpc3BsYXk6IGJsb2NrO1xuICAgICAgdGV4dC1hbGlnbjogbGVmdDtcbiAgICAgIHRleHQtd3JhcDogd3JhcDtcbiAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgcGFkZGluZzogJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzIwfSAke2Rlc2lnblRva2Vucy5zcGFjaW5nMzB9O1xuICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JTdXJmYWNlfTtcbiAgICAgICY6Zmlyc3Qtb2YtdHlwZSB7XG4gICAgICAgIGJvcmRlci1yYWRpdXM6ICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn0gMCAwO1xuICAgICAgfVxuICAgICAgJjpsYXN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAwIDAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn1cbiAgICAgICAgICAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fTtcbiAgICAgIH1cbiAgICAgICY6aG92ZXIge1xuICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvclByaW1hcnk5OH07XG4gICAgICB9XG4gICAgYCxcbiAgICBwcm9wcy5pc0Rpc2FibGVkICYmXG4gICAgICBjc3NgXG4gICAgICAgIGNvbG9yOiAke2Rlc2lnblRva2Vucy5jb2xvck5ldXRyYWx9O1xuICAgICAgYCxcbiAgXTtcbn1cblxuZXhwb3J0IHR5cGUgVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMgPSB7XG4gIG9uQ2xpY2s/OiAoKSA9PiB2b2lkO1xuICBpc0Rpc2FibGVkPzogYm9vbGVhbjtcbiAgY2hpbGRyZW46IHN0cmluZztcbn07XG5cbmZ1bmN0aW9uIERyb3Bkb3duTGlzdE1lbnVJdGVtKHByb3BzOiBURHJvcGRvd25MaXN0TWVudUl0ZW1Qcm9wcykge1xuICBjb25zdCB7IHRvZ2dsZSB9ID0gdXNlRHJvcGRvd25NZW51Q29udGV4dCgpO1xuICByZXR1cm4gKFxuICAgIDxBY2Nlc3NpYmxlQnV0dG9uXG4gICAgICBsYWJlbD17cHJvcHMuY2hpbGRyZW59XG4gICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgIHRvZ2dsZSgpO1xuICAgICAgICBwcm9wcy5vbkNsaWNrPy4oKTtcbiAgICAgIH19XG4gICAgICBpc0Rpc2FibGVkPXtwcm9wcy5pc0Rpc2FibGVkfVxuICAgICAgY3NzPXtnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wcyl9XG4gICAgPlxuICAgICAge3Byb3BzLmNoaWxkcmVufVxuICAgIDwvQWNjZXNzaWJsZUJ1dHRvbj5cbiAgKTtcbn1cblxuZXhwb3J0IGRlZmF1bHQgRHJvcGRvd25MaXN0TWVudUl0ZW07XG4iXX0= */"), props.isDisabled && /*#__PURE__*/css("color:", designTokens.colorNeutral, ";" + (process.env.NODE_ENV === "production" ? "" : ";label:getDropdownListMenuItemStyles;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUtbGlzdC1pdGVtLnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUEyQlMiLCJmaWxlIjoiZHJvcGRvd24tbWVudS1saXN0LWl0ZW0udHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IEFjY2Vzc2libGVCdXR0b24gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvYWNjZXNzaWJsZS1idXR0b24nO1xuaW1wb3J0IHsgZGVzaWduVG9rZW5zIH0gZnJvbSAnQGNvbW1lcmNldG9vbHMtdWlraXQvZGVzaWduLXN5c3RlbSc7XG5pbXBvcnQgeyB1c2VEcm9wZG93bk1lbnVDb250ZXh0IH0gZnJvbSAnLi4vY29udGV4dC9kcm9wZG93bi1tZW51LWNvbnRleHQnO1xuXG5mdW5jdGlvbiBnZXREcm9wZG93bkxpc3RNZW51SXRlbVN0eWxlcyhwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgcmV0dXJuIFtcbiAgICBjc3NgXG4gICAgICBkaXNwbGF5OiBibG9jaztcbiAgICAgIHRleHQtYWxpZ246IGxlZnQ7XG4gICAgICB0ZXh0LXdyYXA6IHdyYXA7XG4gICAgICB3aWR0aDogMTAwJTtcbiAgICAgIHBhZGRpbmc6ICR7ZGVzaWduVG9rZW5zLnNwYWNpbmcyMH0gJHtkZXNpZ25Ub2tlbnMuc3BhY2luZzMwfTtcbiAgICAgIGJhY2tncm91bmQtY29sb3I6ICR7ZGVzaWduVG9rZW5zLmNvbG9yU3VyZmFjZX07XG4gICAgICAmOmZpcnN0LW9mLXR5cGUge1xuICAgICAgICBib3JkZXItcmFkaXVzOiAke2Rlc2lnblRva2Vucy5ib3JkZXJSYWRpdXM2fVxuICAgICAgICAgICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9IDAgMDtcbiAgICAgIH1cbiAgICAgICY6bGFzdC1vZi10eXBlIHtcbiAgICAgICAgYm9yZGVyLXJhZGl1czogMCAwICR7ZGVzaWduVG9rZW5zLmJvcmRlclJhZGl1czZ9XG4gICAgICAgICAgJHtkZXNpZ25Ub2tlbnMuYm9yZGVyUmFkaXVzNn07XG4gICAgICB9XG4gICAgICAmOmhvdmVyIHtcbiAgICAgICAgYmFja2dyb3VuZC1jb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JQcmltYXJ5OTh9O1xuICAgICAgfVxuICAgIGAsXG4gICAgcHJvcHMuaXNEaXNhYmxlZCAmJlxuICAgICAgY3NzYFxuICAgICAgICBjb2xvcjogJHtkZXNpZ25Ub2tlbnMuY29sb3JOZXV0cmFsfTtcbiAgICAgIGAsXG4gIF07XG59XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bkxpc3RNZW51SXRlbVByb3BzID0ge1xuICBvbkNsaWNrPzogKCkgPT4gdm9pZDtcbiAgaXNEaXNhYmxlZD86IGJvb2xlYW47XG4gIGNoaWxkcmVuOiBzdHJpbmc7XG59O1xuXG5mdW5jdGlvbiBEcm9wZG93bkxpc3RNZW51SXRlbShwcm9wczogVERyb3Bkb3duTGlzdE1lbnVJdGVtUHJvcHMpIHtcbiAgY29uc3QgeyB0b2dnbGUgfSA9IHVzZURyb3Bkb3duTWVudUNvbnRleHQoKTtcbiAgcmV0dXJuIChcbiAgICA8QWNjZXNzaWJsZUJ1dHRvblxuICAgICAgbGFiZWw9e3Byb3BzLmNoaWxkcmVufVxuICAgICAgb25DbGljaz17KCkgPT4ge1xuICAgICAgICB0b2dnbGUoKTtcbiAgICAgICAgcHJvcHMub25DbGljaz8uKCk7XG4gICAgICB9fVxuICAgICAgaXNEaXNhYmxlZD17cHJvcHMuaXNEaXNhYmxlZH1cbiAgICAgIGNzcz17Z2V0RHJvcGRvd25MaXN0TWVudUl0ZW1TdHlsZXMocHJvcHMpfVxuICAgID5cbiAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICA8L0FjY2Vzc2libGVCdXR0b24+XG4gICk7XG59XG5cbmV4cG9ydCBkZWZhdWx0IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuIl19 */")];
+}
+function DropdownListMenuItem(props) {
+  const _useDropdownMenuConte = useDropdownMenuContext(),
+    toggle = _useDropdownMenuConte.toggle;
+  return jsx(AccessibleButton, {
+    label: props.children,
+    onClick: () => {
+      var _props$onClick;
+      toggle();
+      (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props);
+    },
+    isDisabled: props.isDisabled,
+    css: getDropdownListMenuItemStyles(props),
+    children: props.children
+  });
+}
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+const defaultProps = {
+  menuHorizontalConstraint: 'auto',
+  menuPosition: 'left',
+  menuType: 'default'
+};
+const Container = /*#__PURE__*/_styled("div", process.env.NODE_ENV === "production" ? {
+  target: "e5g0mzs0"
+} : {
+  target: "e5g0mzs0",
+  label: "Container"
+})(process.env.NODE_ENV === "production" ? {
+  name: "1nrevy2",
+  styles: "position:relative;display:inline-block"
+} : {
+  name: "1nrevy2",
+  styles: "position:relative;display:inline-block",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbImRyb3Bkb3duLW1lbnUudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1ENEIiLCJmaWxlIjoiZHJvcGRvd24tbWVudS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUmVhY3QsIHtcbiAgdXNlQ2FsbGJhY2ssXG4gIHVzZUVmZmVjdCxcbiAgdXNlTWVtbyxcbiAgdHlwZSBSZWFjdEVsZW1lbnQsXG4gIHR5cGUgUmVhY3ROb2RlLFxufSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgeyB1c2VUb2dnbGVTdGF0ZSB9IGZyb20gJ0Bjb21tZXJjZXRvb2xzLXVpa2l0L2hvb2tzJztcbmltcG9ydCB7IHR5cGUgVE1heFByb3AgfSBmcm9tICdAY29tbWVyY2V0b29scy11aWtpdC9jb25zdHJhaW50cyc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgRHJvcGRvd25NZW51Q29udGV4dCBmcm9tICcuL2NvbnRleHQnO1xuaW1wb3J0IERyb3Bkb3duVHJpZ2dlciBmcm9tICcuL3RyaWdnZXInO1xuaW1wb3J0IHtcbiAgRHJvcGRvd25Db250ZW50TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudSxcbiAgRHJvcGRvd25MaXN0TWVudUl0ZW0sXG59IGZyb20gJy4vbWVudSc7XG5cbmV4cG9ydCB0eXBlIFREcm9wZG93bk1lbnVQcm9wcyA9IHtcbiAgLyoqXG4gICAqIFRoZSBwb3NpdGlvbiBvZiB0aGUgbWVudSByZWxhdGl2ZSB0byB0aGUgdHJpZ2dlciBlbGVtZW50LlxuICAgKi9cbiAgbWVudVBvc2l0aW9uPzogJ2xlZnQnIHwgJ3JpZ2h0JztcbiAgLyoqXG4gICAqIFRoZSBlbGVtZW50IHRoYXQgdHJpZ2dlcnMgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgdHJpZ2dlckVsZW1lbnQ6IFJlYWN0RWxlbWVudDtcbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBtZW51LlxuICAgKiBUaGUgJ2RlZmF1bHQnIHR5cGUganVzdCByZW5kZXJzIGEgZHJvcGRvd24gY29udGFpbmVyIGJ1dCB0aGUgJ2xpc3QnIHR5cGUgaXMgaW50ZW5kZWQgdG8gYmUgdXNlZCB3aXRoIHRoZSBEcm9wZG93bk1lbnUuTGlzdE1lbnVJdGVtIGNvbXBvbmVudC5cbiAgICovXG4gIG1lbnVUeXBlPzogJ2RlZmF1bHQnIHwgJ2xpc3QnO1xuICAvKipcbiAgICogVGhlIGhvcml6b250YWwgY29uc3RyYWludCBvZiB0aGUgbWVudS5cbiAgICovXG4gIG1lbnVIb3Jpem9udGFsQ29uc3RyYWludD86IFRNYXhQcm9wO1xuICAvKipcbiAgICogVGhlIGNvbnRlbnQgb2YgdGhlIGRyb3Bkb3duLlxuICAgKi9cbiAgY2hpbGRyZW46IFJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IGRlZmF1bHRQcm9wczogUGljazxcbiAgVERyb3Bkb3duTWVudVByb3BzLFxuICAnbWVudVBvc2l0aW9uJyB8ICdtZW51VHlwZScgfCAnbWVudUhvcml6b250YWxDb25zdHJhaW50J1xuPiA9IHtcbiAgbWVudUhvcml6b250YWxDb25zdHJhaW50OiAnYXV0bycsXG4gIG1lbnVQb3NpdGlvbjogJ2xlZnQnLFxuICBtZW51VHlwZTogJ2RlZmF1bHQnLFxufTtcblxuY29uc3QgQ29udGFpbmVyID0gc3R5bGVkLmRpdmBcbiAgcG9zaXRpb246IHJlbGF0aXZlO1xuICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG5gO1xuXG5mdW5jdGlvbiBEcm9wZG93bk1lbnUocHJvcHM6IFREcm9wZG93bk1lbnVQcm9wcykge1xuICBjb25zdCBbaXNPcGVuLCB0b2dnbGVdID0gdXNlVG9nZ2xlU3RhdGUoZmFsc2UpO1xuICBjb25zdCB0cmlnZ2VyUmVmID0gUmVhY3QudXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcblxuICAvLyBXZSB1c2UgdGhlIGNvbnRleHQgc28gY2hpbGRyZW4gY2FuIHRvZ2dsZSB0aGUgZHJvcGRvd25cbiAgY29uc3QgY29udGV4dCA9IHVzZU1lbW8oXG4gICAgKCkgPT4gKHtcbiAgICAgIGlzT3BlbixcbiAgICAgIHRvZ2dsZSxcbiAgICB9KSxcbiAgICBbaXNPcGVuLCB0b2dnbGVdXG4gICk7XG4gIGNvbnN0IE1lbnUgPVxuICAgIHByb3BzLm1lbnVUeXBlID09PSAnZGVmYXVsdCcgPyBEcm9wZG93bkNvbnRlbnRNZW51IDogRHJvcGRvd25MaXN0TWVudTtcblxuICAvLyBDbG9zZSB0aGUgZHJvcGRvd24gd2hlbiBjbGlja2luZyBvdXRzaWRlIG9mIGl0XG4gIGNvbnN0IGhhbmRsZUdsb2JhbENsaWNrID0gdXNlQ2FsbGJhY2soXG4gICAgKGV2ZW50KSA9PiB7XG4gICAgICBjb25zdCB0cmlnZ2VyRWxlbWVudCA9IHRyaWdnZXJSZWYuY3VycmVudDtcbiAgICAgIGlmIChcbiAgICAgICAgaXNPcGVuICYmXG4gICAgICAgIHRyaWdnZXJFbGVtZW50ICYmXG4gICAgICAgIGV2ZW50LnRhcmdldCAhPT0gdHJpZ2dlckVsZW1lbnQgJiZcbiAgICAgICAgd2luZG93LmRvY3VtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldCkgJiZcbiAgICAgICAgIXRyaWdnZXJFbGVtZW50LnBhcmVudEVsZW1lbnQ/LmNvbnRhaW5zKGV2ZW50LnRhcmdldClcbiAgICAgICkge1xuICAgICAgICB0b2dnbGUoZmFsc2UpO1xuICAgICAgfVxuICAgIH0sXG4gICAgW3RyaWdnZXJSZWYsIHRvZ2dsZSwgaXNPcGVuXVxuICApO1xuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdjbGljaycsIGhhbmRsZUdsb2JhbENsaWNrKTtcbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LnJlbW92ZUV2ZW50TGlzdGVuZXIoJ2NsaWNrJywgaGFuZGxlR2xvYmFsQ2xpY2spO1xuICAgIH07XG4gIH0sIFtoYW5kbGVHbG9iYWxDbGlja10pO1xuICAvLyBCbG9jayBzY3JvbGxpbmcgd2hlbiB0aGUgZHJvcGRvd24gaXMgb3BlblxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmIChpc09wZW4pIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2hpZGRlbic7XG4gICAgfSBlbHNlIHtcbiAgICAgIHdpbmRvdy5kb2N1bWVudC5ib2R5LnN0eWxlLm92ZXJmbG93ID0gJ2luaXRpYWwnO1xuICAgIH1cbiAgICByZXR1cm4gKCkgPT4ge1xuICAgICAgd2luZG93LmRvY3VtZW50LmJvZHkuc3R5bGUub3ZlcmZsb3cgPSAnaW5pdGlhbCc7XG4gICAgfTtcbiAgfSwgW2lzT3Blbl0pO1xuXG4gIHJldHVybiAoXG4gICAgPERyb3Bkb3duTWVudUNvbnRleHQuUHJvdmlkZXIgdmFsdWU9e2NvbnRleHR9PlxuICAgICAgPENvbnRhaW5lcj5cbiAgICAgICAgPERyb3Bkb3duVHJpZ2dlciBvbkNsaWNrPXt0b2dnbGV9IHJlZj17dHJpZ2dlclJlZn0+XG4gICAgICAgICAge3Byb3BzLnRyaWdnZXJFbGVtZW50fVxuICAgICAgICA8L0Ryb3Bkb3duVHJpZ2dlcj5cblxuICAgICAgICA8TWVudVxuICAgICAgICAgIGhvcml6b250YWxDb25zdHJhaW50PXtwcm9wcy5tZW51SG9yaXpvbnRhbENvbnN0cmFpbnQhfVxuICAgICAgICAgIGlzT3Blbj17aXNPcGVufVxuICAgICAgICAgIG1lbnVQb3NpdGlvbj17cHJvcHMubWVudVBvc2l0aW9uIX1cbiAgICAgICAgICB0cmlnZ2VyRWxlbWVudFJlZj17dHJpZ2dlclJlZn1cbiAgICAgICAgPlxuICAgICAgICAgIHtwcm9wcy5jaGlsZHJlbn1cbiAgICAgICAgPC9NZW51PlxuICAgICAgPC9Db250YWluZXI+XG4gICAgPC9Ecm9wZG93bk1lbnVDb250ZXh0LlByb3ZpZGVyPlxuICApO1xufVxuRHJvcGRvd25NZW51LmRlZmF1bHRQcm9wcyA9IGRlZmF1bHRQcm9wcztcblxuRHJvcGRvd25NZW51Lkxpc3RNZW51SXRlbSA9IERyb3Bkb3duTGlzdE1lbnVJdGVtO1xuXG5leHBvcnQgZGVmYXVsdCBEcm9wZG93bk1lbnU7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+function DropdownMenu(props) {
+  const _useToggleState = useToggleState(false),
+    _useToggleState2 = _slicedToArray(_useToggleState, 2),
+    isOpen = _useToggleState2[0],
+    toggle = _useToggleState2[1];
+  const triggerRef = React.useRef(null);
+
+  // We use the context so children can toggle the dropdown
+  const context = useMemo(() => ({
+    isOpen,
+    toggle
+  }), [isOpen, toggle]);
+  const Menu = props.menuType === 'default' ? DropdownContentMenu : DropdownListMenu;
+
+  // Close the dropdown when clicking outside of it
+  const handleGlobalClick = useCallback(event => {
+    var _triggerElement$paren;
+    const triggerElement = triggerRef.current;
+    if (isOpen && triggerElement && event.target !== triggerElement && window.document.contains(event.target) && !((_triggerElement$paren = triggerElement.parentElement) !== null && _triggerElement$paren !== void 0 && _triggerElement$paren.contains(event.target))) {
+      toggle(false);
+    }
+  }, [triggerRef, toggle, isOpen]);
+  useEffect(() => {
+    window.addEventListener('click', handleGlobalClick);
+    return () => {
+      window.removeEventListener('click', handleGlobalClick);
+    };
+  }, [handleGlobalClick]);
+  // Block scrolling when the dropdown is open
+  useEffect(() => {
+    if (isOpen) {
+      window.document.body.style.overflow = 'hidden';
+    } else {
+      window.document.body.style.overflow = 'initial';
+    }
+    return () => {
+      window.document.body.style.overflow = 'initial';
+    };
+  }, [isOpen]);
+  return jsx(DropdownMenuContext.Provider, {
+    value: context,
+    children: jsxs(Container, {
+      children: [jsx(DropdownTrigger, {
+        onClick: toggle,
+        ref: triggerRef,
+        children: props.triggerElement
+      }), jsx(Menu, {
+        horizontalConstraint: props.menuHorizontalConstraint,
+        isOpen: isOpen,
+        menuPosition: props.menuPosition,
+        triggerElementRef: triggerRef,
+        children: props.children
+      })]
+    })
+  });
+}
+DropdownMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  menuPosition: _pt.oneOf(['left', 'right']),
+  triggerElement: _pt.element.isRequired,
+  menuType: _pt.oneOf(['default', 'list']),
+  menuHorizontalConstraint: _pt.any,
+  children: _pt.node.isRequired
+} : {};
+DropdownMenu.defaultProps = defaultProps;
+DropdownMenu.ListMenuItem = DropdownListMenuItem;
+
+// NOTE: This string will be replaced on build time with the package version.
+var version = "19.0.0";
+
+export { DropdownMenu as default, useDropdownMenuContext, version };

package/dist/declarations/src/context/dropdown-menu-context.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export type TDropdownMenuContextProps = {
+    isOpen: boolean;
+    toggle: () => void;
+};
+declare const DropdownMenuContext: import("react").Context<TDropdownMenuContextProps>;
+export declare function useDropdownMenuContext(): {
+    isOpen: boolean;
+    toggle: () => void;
+};
+export default DropdownMenuContext;

package/dist/declarations/src/context/index.d.ts

@@ -0,0 +1,2 @@
+export { default, useDropdownMenuContext } from "./dropdown-menu-context.js";
+export type { TDropdownMenuContextProps } from "./dropdown-menu-context.js";

package/dist/declarations/src/dropdown-menu.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode } from 'react';
+import { type TMaxProp } from '@commercetools-uikit/constraints';
+import { DropdownListMenuItem } from "./menu/index.js";
+export type TDropdownMenuProps = {
+    menuPosition?: 'left' | 'right';
+    triggerElement: ReactElement;
+    menuType?: 'default' | 'list';
+    menuHorizontalConstraint?: TMaxProp;
+    children: ReactNode;
+};
+declare function DropdownMenu(props: TDropdownMenuProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare namespace DropdownMenu {
+    var defaultProps: Pick<TDropdownMenuProps, "menuPosition" | "menuHorizontalConstraint" | "menuType">;
+    var ListMenuItem: typeof DropdownListMenuItem;
+}
+export default DropdownMenu;

package/dist/declarations/src/export-types.d.ts

@@ -0,0 +1,4 @@
+export type { TDropdownMenuProps } from "./dropdown-menu.js";
+export type { TDropdownMenuContextProps } from "./context/index.js";
+export type { TDropdownContentMenuProps, TDropdownListMenuProps, TDropdownListMenuItemProps, } from "./menu/index.js";
+export type { TDropdownTriggerProps } from "./trigger/index.js";

package/dist/declarations/src/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from "./dropdown-menu.js";
+export { useDropdownMenuContext } from "./context/index.js";
+export { default as version } from "./version.js";
+export * from "./export-types.js";

package/dist/declarations/src/menu/dropdown-menu-list-item.d.ts

@@ -0,0 +1,7 @@
+export type TDropdownListMenuItemProps = {
+    onClick?: () => void;
+    isDisabled?: boolean;
+    children: string;
+};
+declare function DropdownListMenuItem(props: TDropdownListMenuItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export default DropdownListMenuItem;

package/dist/declarations/src/menu/dropdown-menu-menu.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, RefObject } from 'react';
+import { type TMaxProp } from '@commercetools-uikit/constraints';
+export declare function getDropdownMenuBaseStyles(params: {
+    isOpen: boolean;
+    horizontalConstraint: TMaxProp;
+}): import("@emotion/utils").SerializedStyles;
+export type TDropdownContentMenuProps = {
+    children: ReactNode;
+    horizontalConstraint: TMaxProp;
+    menuPosition: 'left' | 'right';
+    isOpen: boolean;
+    triggerElementRef: RefObject<HTMLElement>;
+};
+export declare const DropdownContentMenu: (props: TDropdownContentMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type TDropdownListMenuProps = {
+    children: ReactNode;
+    horizontalConstraint: TMaxProp;
+    menuPosition: 'left' | 'right';
+    isOpen: boolean;
+    triggerElementRef: RefObject<HTMLElement>;
+};
+export declare const DropdownListMenu: (props: TDropdownListMenuProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/declarations/src/menu/index.d.ts

@@ -0,0 +1,4 @@
+export { DropdownContentMenu, DropdownListMenu } from "./dropdown-menu-menu.js";
+export { default as DropdownListMenuItem } from "./dropdown-menu-list-item.js";
+export type { TDropdownContentMenuProps, TDropdownListMenuProps, } from "./dropdown-menu-menu.js";
+export type { TDropdownListMenuItemProps } from "./dropdown-menu-list-item.js";

package/dist/declarations/src/trigger/dropdown-menu-trigger.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+export type TDropdownTriggerProps = {
+    onClick: () => void;
+    children: ReactNode;
+};
+declare const DropDownTrigger: import("react").ForwardRefExoticComponent<TDropdownTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
+export default DropDownTrigger;

package/dist/declarations/src/trigger/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./dropdown-menu-trigger.js";
+export type { TDropdownTriggerProps } from "./dropdown-menu-trigger.js";

package/dist/declarations/src/version.d.ts

@@ -0,0 +1,2 @@
+declare const _default: "__@UI_KIT_PACKAGE/VERSION_OF_RELEASE__";
+export default _default;

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@commercetools-uikit/dropdown-menu",
+  "description": "The Dropdown Menu component represents a component that triggers the rendering of a floating menu.",
+  "version": "0.0.0-canary-20240412080035",
+  "bugs": "https://github.com/commercetools/ui-kit/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/commercetools/ui-kit.git",
+    "directory": "packages/components/dropdowns/dropdown-menu"
+  },
+  "homepage": "https://uikit.commercetools.com",
+  "keywords": [
+    "javascript",
+    "typescript",
+    "design-system",
+    "react",
+    "uikit"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "dist/commercetools-uikit-dropdown-menu.cjs.js",
+  "module": "dist/commercetools-uikit-dropdown-menu.esm.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.20.13",
+    "@babel/runtime-corejs3": "^7.20.13",
+    "@commercetools-uikit/accessible-button": "0.0.0-canary-20240412080035",
+    "@commercetools-uikit/constraints": "0.0.0-canary-20240412080035",
+    "@commercetools-uikit/design-system": "0.0.0-canary-20240412080035",
+    "@commercetools-uikit/hooks": "0.0.0-canary-20240412080035",
+    "@commercetools-uikit/secondary-button": "0.0.0-canary-20240412080035",
+    "@commercetools-uikit/spacings-inline": "0.0.0-canary-20240412080035",
+    "@commercetools-uikit/spacings-stack": "0.0.0-canary-20240412080035",
+    "@commercetools-uikit/utils": "0.0.0-canary-20240412080035",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "prop-types": "15.8.1",
+    "react-intl": "^6.3.2"
+  },
+  "devDependencies": {
+    "react": "17.0.2"
+  },
+  "peerDependencies": {
+    "react": "17.x"
+  }
+}