@elliemae/ds-legacy-dropdownmenu 1.0.0-rc.1

package/dist/esm/config/useDropdownMenuConfig.js

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useVirtual } from "react-virtual";
+import { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from "@elliemae/ds-legacy-props-helpers";
+import { defaultProps, DSDropdownMenuV2PropTypes } from "../react-desc-prop-types.js";
+import { useReferenceConfig } from "./useReferenceConfig.js";
+import { isOptionFocuseable } from "../utils/index.js";
+import { DSDropdownMenuName } from "../exported-related/index.js";
+const estimateSize = () => 32;
+const useDropdownMenuConfig = (props, self) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(props, defaultProps);
+  useValidateTypescriptPropTypes(propsWithDefault, DSDropdownMenuV2PropTypes, DSDropdownMenuName);
+  const { options, inputValue, isOpened, actionRef } = propsWithDefault;
+  const { triggerReferenceElement, setTriggerReferenceElement, listboxReference, inputReference } = useReferenceConfig();
+  const [activeDescendant, setActiveDescendant] = useState(options.find(isOptionFocuseable)?.dsId ?? "");
+  useEffect(() => {
+    if (isOpened) {
+      setActiveDescendant(options.find(isOptionFocuseable)?.dsId ?? "");
+    }
+  }, [isOpened, inputValue]);
+  const virtualListHelpers = useVirtual({
+    size: options.length,
+    parentRef: listboxReference,
+    overscan: 15,
+    paddingStart: 0,
+    estimateSize
+  });
+  const { scrollToIndex } = virtualListHelpers;
+  const scrollToIndexInternal = useCallback(
+    (index, opts) => {
+      scrollToIndex(index, opts);
+      window.requestAnimationFrame(() => {
+        scrollToIndex(index, opts);
+      });
+    },
+    [scrollToIndex]
+  );
+  const scrollOptionIntoView = useCallback(
+    (dsId, opts = { align: "center" }) => {
+      const optionIndex = options.findIndex((opt) => opt.dsId === dsId);
+      scrollToIndexInternal(optionIndex, opts);
+    },
+    [options, scrollToIndexInternal]
+  );
+  useEffect(() => {
+    if (actionRef?.current) {
+      actionRef.current = {
+        setActiveDescendant,
+        scrollOptionIntoView,
+        scrollToIndex: scrollToIndexInternal
+      };
+    }
+  }, [actionRef, scrollOptionIntoView, scrollToIndexInternal]);
+  const ctx = useMemo(
+    () => ({
+      props: propsWithDefault,
+      virtualListHelpers,
+      triggerReferenceElement,
+      setTriggerReferenceElement,
+      listboxReference,
+      inputReference,
+      activeDescendant,
+      setActiveDescendant,
+      scrollOptionIntoView,
+      DSDropdownMenuV2: self
+    }),
+    [
+      propsWithDefault,
+      virtualListHelpers,
+      triggerReferenceElement,
+      setTriggerReferenceElement,
+      listboxReference,
+      inputReference,
+      activeDescendant,
+      scrollOptionIntoView,
+      self
+    ]
+  );
+  return ctx;
+};
+export {
+  useDropdownMenuConfig
+};
+//# sourceMappingURL=useDropdownMenuConfig.js.map

package/dist/esm/config/useDropdownMenuConfig.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useDropdownMenuConfig.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useCallback, useEffect, useMemo, useState } from 'react';\nimport { type ScrollToIndexOptions, useVirtual } from 'react-virtual';\nimport { useMemoMergePropsWithDefault, useValidateTypescriptPropTypes } from '@elliemae/ds-legacy-props-helpers';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { defaultProps, DSDropdownMenuV2PropTypes } from '../react-desc-prop-types.js';\nimport { useReferenceConfig } from './useReferenceConfig.js';\nimport { isOptionFocuseable } from '../utils/index.js';\nimport { DSDropdownMenuName } from '../exported-related/index.js';\n\nconst estimateSize = () => 32;\n\nexport const useDropdownMenuConfig = (\n  props: DSDropdownMenuT.Props,\n  self: React.ComponentType<DSDropdownMenuT.Props>,\n): DSDropdownMenuT.CTX => {\n  const propsWithDefault = useMemoMergePropsWithDefault<DSDropdownMenuT.InternalProps>(props, defaultProps);\n  useValidateTypescriptPropTypes(propsWithDefault, DSDropdownMenuV2PropTypes, DSDropdownMenuName);\n\n  const { options, inputValue, isOpened, actionRef } = propsWithDefault;\n\n  const { triggerReferenceElement, setTriggerReferenceElement, listboxReference, inputReference } =\n    useReferenceConfig();\n\n  const [activeDescendant, setActiveDescendant] = useState<string>(options.find(isOptionFocuseable)?.dsId ?? '');\n\n  // ---------------------------------------------------------------------------\n  // Focusing first option when dropdown opens or input changes\n  // ---------------------------------------------------------------------------\n  useEffect(() => {\n    if (isOpened) {\n      setActiveDescendant(options.find(isOptionFocuseable)?.dsId ?? '');\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpened, inputValue]);\n\n  // ===========================================================================\n  // Virtualization setup\n  // ===========================================================================\n  const virtualListHelpers = useVirtual({\n    size: options.length,\n    parentRef: listboxReference,\n    overscan: 15,\n    paddingStart: 0,\n    estimateSize,\n  });\n\n  const { scrollToIndex } = virtualListHelpers;\n\n  // ===========================================================================\n  // Scroll to index function\n  // ===========================================================================\n  const scrollToIndexInternal = useCallback(\n    (index: number, opts?: ScrollToIndexOptions) => {\n      // Since we could have dynamic sizing on the options, scrolling to an index may not work correctly sometimes.\n      // This is a workaround to ensure that the option is scrolled into view.\n      // More info -> https://github.com/TanStack/virtual/issues/381\n      scrollToIndex(index, opts);\n      window.requestAnimationFrame(() => {\n        scrollToIndex(index, opts);\n      });\n    },\n    [scrollToIndex],\n  );\n\n  // ===========================================================================\n  // Scroll into view function\n  // ===========================================================================\n  const scrollOptionIntoView = useCallback(\n    (dsId: string, opts: { align: 'start' | 'center' | 'end' | 'auto' } = { align: 'center' }) => {\n      const optionIndex = options.findIndex((opt) => opt.dsId === dsId);\n      scrollToIndexInternal(optionIndex, opts);\n    },\n    [options, scrollToIndexInternal],\n  );\n\n  // ===========================================================================\n  // Action ref setup\n  // ===========================================================================\n  useEffect(() => {\n    if (actionRef?.current) {\n      actionRef.current = {\n        setActiveDescendant,\n        scrollOptionIntoView,\n        scrollToIndex: scrollToIndexInternal,\n      };\n    }\n  }, [actionRef, scrollOptionIntoView, scrollToIndexInternal]);\n\n  // ===========================================================================\n  // Context setup\n  // ===========================================================================\n  const ctx = useMemo(\n    () => ({\n      props: propsWithDefault,\n      virtualListHelpers,\n      triggerReferenceElement,\n      setTriggerReferenceElement,\n      listboxReference,\n      inputReference,\n      activeDescendant,\n      setActiveDescendant,\n      scrollOptionIntoView,\n      DSDropdownMenuV2: self,\n    }),\n    [\n      propsWithDefault,\n      virtualListHelpers,\n      triggerReferenceElement,\n      setTriggerReferenceElement,\n      listboxReference,\n      inputReference,\n      activeDescendant,\n      scrollOptionIntoView,\n      self,\n    ],\n  );\n\n  return ctx;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,aAAa,WAAW,SAAS,gBAAgB;AAC1D,SAAoC,kBAAkB;AACtD,SAAS,8BAA8B,sCAAsC;AAE7E,SAAS,cAAc,iCAAiC;AACxD,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AAEnC,MAAM,eAAe,MAAM;AAEpB,MAAM,wBAAwB,CACnC,OACA,SACwB;AACxB,QAAM,mBAAmB,6BAA4D,OAAO,YAAY;AACxG,iCAA+B,kBAAkB,2BAA2B,kBAAkB;AAE9F,QAAM,EAAE,SAAS,YAAY,UAAU,UAAU,IAAI;AAErD,QAAM,EAAE,yBAAyB,4BAA4B,kBAAkB,eAAe,IAC5F,mBAAmB;AAErB,QAAM,CAAC,kBAAkB,mBAAmB,IAAI,SAAiB,QAAQ,KAAK,kBAAkB,GAAG,QAAQ,EAAE;AAK7G,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,0BAAoB,QAAQ,KAAK,kBAAkB,GAAG,QAAQ,EAAE;AAAA,IAClE;AAAA,EAEF,GAAG,CAAC,UAAU,UAAU,CAAC;AAKzB,QAAM,qBAAqB,WAAW;AAAA,IACpC,MAAM,QAAQ;AAAA,IACd,WAAW;AAAA,IACX,UAAU;AAAA,IACV,cAAc;AAAA,IACd;AAAA,EACF,CAAC;AAED,QAAM,EAAE,cAAc,IAAI;AAK1B,QAAM,wBAAwB;AAAA,IAC5B,CAAC,OAAe,SAAgC;AAI9C,oBAAc,OAAO,IAAI;AACzB,aAAO,sBAAsB,MAAM;AACjC,sBAAc,OAAO,IAAI;AAAA,MAC3B,CAAC;AAAA,IACH;AAAA,IACA,CAAC,aAAa;AAAA,EAChB;AAKA,QAAM,uBAAuB;AAAA,IAC3B,CAAC,MAAc,OAAuD,EAAE,OAAO,SAAS,MAAM;AAC5F,YAAM,cAAc,QAAQ,UAAU,CAAC,QAAQ,IAAI,SAAS,IAAI;AAChE,4BAAsB,aAAa,IAAI;AAAA,IACzC;AAAA,IACA,CAAC,SAAS,qBAAqB;AAAA,EACjC;AAKA,YAAU,MAAM;AACd,QAAI,WAAW,SAAS;AACtB,gBAAU,UAAU;AAAA,QAClB;AAAA,QACA;AAAA,QACA,eAAe;AAAA,MACjB;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,sBAAsB,qBAAqB,CAAC;AAK3D,QAAM,MAAM;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,kBAAkB;AAAA,IACpB;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/config/useReferenceConfig.js

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useRef, useState } from "react";
+const useReferenceConfig = () => {
+  const [triggerReferenceElement, setTriggerReferenceElement] = useState(null);
+  const listboxReference = useRef(null);
+  const inputReference = useRef(null);
+  return {
+    triggerReferenceElement,
+    setTriggerReferenceElement,
+    listboxReference,
+    inputReference
+  };
+};
+export {
+  useReferenceConfig
+};
+//# sourceMappingURL=useReferenceConfig.js.map

package/dist/esm/config/useReferenceConfig.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useReferenceConfig.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useRef, useState } from 'react';\n\nexport const useReferenceConfig = () => {\n  const [triggerReferenceElement, setTriggerReferenceElement] = useState<HTMLDivElement | null>(null);\n\n  const listboxReference = useRef<HTMLDivElement>(null);\n  const inputReference = useRef<HTMLInputElement>(null);\n\n  return {\n    triggerReferenceElement,\n    setTriggerReferenceElement,\n    listboxReference,\n    inputReference,\n  };\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,QAAQ,gBAAgB;AAE1B,MAAM,qBAAqB,MAAM;AACtC,QAAM,CAAC,yBAAyB,0BAA0B,IAAI,SAAgC,IAAI;AAElG,QAAM,mBAAmB,OAAuB,IAAI;AACpD,QAAM,iBAAiB,OAAyB,IAAI;AAEpD,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/esm/deprecated/CustomPhoneRenderer.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { aggregatedClasses } from "@elliemae/ds-legacy-classnames";
+const CustomPhoneRenderer = aggregatedClasses("div")("menu-item", "custom-phone-render");
+export {
+  CustomPhoneRenderer
+};
+//# sourceMappingURL=CustomPhoneRenderer.js.map

package/dist/esm/deprecated/CustomPhoneRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/CustomPhoneRenderer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// @ts-nocheck\nimport { aggregatedClasses } from '@elliemae/ds-legacy-classnames';\n\nexport const CustomPhoneRenderer = aggregatedClasses('div')('menu-item', 'custom-phone-render');\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,yBAAyB;AAE3B,MAAM,sBAAsB,kBAAkB,KAAK,EAAE,aAAa,qBAAqB;",
+  "names": []
+}

package/dist/esm/deprecated/DSDropdownMenu.js

@@ -0,0 +1,143 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDeprecateComponent } from "@elliemae/ds-legacy-utilities";
+import { PropTypes, describe } from "@elliemae/ds-legacy-props-helpers";
+import { TooltipTextProvider } from "@elliemae/ds-legacy-truncated-tooltip-text";
+import { positions, PopperPositions, interactions, PopperInteractions } from "@elliemae/ds-legacy-popper";
+import { DropdownMenuWrapper } from "./DropdownMenuWrapper.js";
+const noop = () => null;
+const DSDropdownMenu = ({
+  containerProps = {},
+  className = "",
+  contentStyle = null,
+  options = [],
+  onSelectMenuItem = noop,
+  onOpenMenu = noop,
+  onClickOutsideMenu = noop,
+  preventOverflow = "viewport",
+  placement = PopperPositions.BOTTOM_START,
+  interactionType = PopperInteractions.CLICK,
+  triggerComponent = noop,
+  customMenu = null,
+  isOpen = void 0,
+  selection = {},
+  menuProps = {},
+  referenceNode = void 0,
+  focusOnOpen = false,
+  onClose = noop,
+  itemsRenderer = void 0,
+  responsiveHeight = false,
+  singleGroupSelection = false,
+  onSelectChange = noop,
+  minWidth = void 0,
+  maxWidth = void 0,
+  zIndex,
+  type,
+  loading = false,
+  hideIfNotVisible
+}) => {
+  useDeprecateComponent({ componentName: "ds-dropdown-menu", version: "3.x Date: 2023 Q3" });
+  return /* @__PURE__ */ jsx(TooltipTextProvider, { children: /* @__PURE__ */ jsx(
+    DropdownMenuWrapper,
+    {
+      hideIfNotVisible,
+      className,
+      containerProps,
+      contentStyle,
+      customMenu,
+      focusOnOpen,
+      interactionType,
+      isOpen,
+      itemsRenderer,
+      maxWidth,
+      menuProps,
+      minWidth,
+      onClickOutsideMenu,
+      onClose,
+      onOpenMenu,
+      onSelectChange,
+      onSelectMenuItem,
+      options,
+      placement,
+      preventOverflow,
+      referenceNode,
+      responsiveHeight,
+      selection,
+      singleGroupSelection,
+      triggerComponent,
+      type,
+      zIndex,
+      loading
+    }
+  ) });
+};
+const dropdownMenuProps = {
+  hideIfNotVisible: PropTypes.bool.description("Hide menu component if trigger component is not visible/scrolled away"),
+  containerProps: PropTypes.shape({}).description("Set of Properties attached to the main container"),
+  contentStyle: PropTypes.shape({}).description("Object style passed to the menu"),
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      type: PropTypes.string,
+      id: PropTypes.string,
+      label: PropTypes.string,
+      onClick: PropTypes.func,
+      leftAddon: PropTypes.element,
+      rightAddon: PropTypes.element,
+      rightAddonType: PropTypes.oneOf(["ellipsis"])
+    })
+  ).description("Options items for the dropdown menu. Check menu item types"),
+  onSelectMenuItem: PropTypes.func.description("Handler when user clicks on a menu item"),
+  onOpenMenu: PropTypes.func.description("Handler when the menu shows up"),
+  /**  Handler when user clicks outside the menu */
+  onClickOutsideMenu: PropTypes.func.description("Handler when user clicks outside the menu"),
+  /** Prevent to move the menu outside of the container defined when interacting with the page  */
+  preventOverflow: PropTypes.oneOf(["viewport", "scrollParent", "window"]).description(
+    "Prevent to move the menu outside of the container defined when interacting with the page"
+  ),
+  /** Menu placement */
+  placement: PropTypes.oneOf(positions).description("Menu placement"),
+  /** How to open the menu with click, hover */
+  interactionType: PropTypes.oneOf(interactions).description("How to open the menu with click, hover"),
+  /** The component that is going to open / close the menu */
+  triggerComponent: PropTypes.element.description("The component that is going to open / close the menu"),
+  /** Custom menu component */
+  customMenu: PropTypes.element.description("Custom menu component"),
+  /** Whether the menu is open or not */
+  isOpen: PropTypes.bool.description("Whether the menu is open or not"),
+  /** Selection state. Ex: { [itemId]: '{bool}', [idMultiSelectionItem]: '{string}' } */
+  selection: PropTypes.shape({}).description(
+    "Selection state. Ex: { [itemId]: {bool}, [idMultiSelectionItem]: {string} }"
+  ),
+  /** Props object passed to the menu component */
+  menuProps: PropTypes.shape({}).description("Props object passed to the menu component"),
+  /** Customize the items render */
+  itemsRenderer: PropTypes.func.description("Customize the items render"),
+  /** Customize menu format. Can be undefined or 'phone' */
+  type: PropTypes.string.description('Customize menu format. Can be undefined or "phone"'),
+  /** Customize menu minWidth. Can be undefined or 'number' */
+  minWidth: PropTypes.number.description('Customize menu minWidth. Can be undefined or "number"'),
+  /** Customize menu maxWidth. Can be undefined or 'number' */
+  maxWidth: PropTypes.number.description('Customize menu maxWidth. Can be undefined or "number"'),
+  /** Make the menu responsive, it uses a margin of 120 px */
+  responsiveHeight: PropTypes.bool.description("Make the menu responsive, it uses a margin of 120 px"),
+  /** Customize menu zIndex. Can be undefined or 'number' */
+  zIndex: PropTypes.number.description('Customize menu zIndex. Can be undefined or "number"'),
+  className: PropTypes.string.description("html class attribute"),
+  focusOnOpen: PropTypes.bool.description("focus element on open or not").defaultValue(true),
+  loading: PropTypes.bool.description("is loading content or not").defaultValue(false),
+  referenceNode: PropTypes.any.description("reference node"),
+  onClose: PropTypes.func.description("function called on close mene"),
+  onSelectChange: PropTypes.func.description("function called when selection changes"),
+  singleGroupSelection: PropTypes.bool.description("select items in same group or not")
+};
+DSDropdownMenu.propTypes = dropdownMenuProps;
+DSDropdownMenu.displayName = "DSDropdownMenu";
+const DropdownMenuWithSchema = describe(DSDropdownMenu);
+DropdownMenuWithSchema.propTypes = dropdownMenuProps;
+var DSDropdownMenu_default = DSDropdownMenu;
+export {
+  DSDropdownMenu,
+  DropdownMenuWithSchema,
+  DSDropdownMenu_default as default
+};
+//# sourceMappingURL=DSDropdownMenu.js.map

package/dist/esm/deprecated/DSDropdownMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DSDropdownMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// @ts-nocheck\n/* eslint-disable max-lines */\nimport React from 'react';\nimport { useDeprecateComponent } from '@elliemae/ds-legacy-utilities';\nimport { PropTypes, describe } from '@elliemae/ds-legacy-props-helpers';\nimport { TooltipTextProvider } from '@elliemae/ds-legacy-truncated-tooltip-text';\n// todo: docgen handlers at the moment don't get data from alias\nimport { positions, PopperPositions, interactions, PopperInteractions } from '@elliemae/ds-legacy-popper';\nimport { DropdownMenuWrapper } from './DropdownMenuWrapper.js';\n\nconst noop = () => null;\n\nconst DSDropdownMenu = ({\n  containerProps = {},\n  className = '',\n  contentStyle = null,\n  options = [],\n  onSelectMenuItem = noop,\n  onOpenMenu = noop,\n  onClickOutsideMenu = noop,\n  preventOverflow = 'viewport',\n  placement = PopperPositions.BOTTOM_START,\n  interactionType = PopperInteractions.CLICK,\n  triggerComponent = noop,\n  customMenu = null,\n  isOpen = undefined,\n  selection = {},\n  menuProps = {},\n  referenceNode = undefined,\n  focusOnOpen = false,\n  onClose = noop,\n  itemsRenderer = undefined,\n  responsiveHeight = false,\n  singleGroupSelection = false,\n  onSelectChange = noop,\n  minWidth = undefined,\n  maxWidth = undefined,\n  zIndex,\n  type,\n  loading = false,\n  hideIfNotVisible,\n}) => {\n  useDeprecateComponent({ componentName: 'ds-dropdown-menu', version: '3.x Date: 2023 Q3' });\n\n  return (\n    <TooltipTextProvider>\n      <DropdownMenuWrapper\n        hideIfNotVisible={hideIfNotVisible}\n        className={className}\n        containerProps={containerProps}\n        contentStyle={contentStyle}\n        customMenu={customMenu}\n        focusOnOpen={focusOnOpen}\n        interactionType={interactionType}\n        isOpen={isOpen}\n        itemsRenderer={itemsRenderer}\n        maxWidth={maxWidth}\n        menuProps={menuProps}\n        minWidth={minWidth}\n        onClickOutsideMenu={onClickOutsideMenu}\n        onClose={onClose}\n        onOpenMenu={onOpenMenu}\n        onSelectChange={onSelectChange}\n        onSelectMenuItem={onSelectMenuItem}\n        options={options}\n        placement={placement}\n        preventOverflow={preventOverflow}\n        referenceNode={referenceNode}\n        responsiveHeight={responsiveHeight}\n        selection={selection}\n        singleGroupSelection={singleGroupSelection}\n        triggerComponent={triggerComponent}\n        type={type}\n        zIndex={zIndex}\n        loading={loading}\n      />\n    </TooltipTextProvider>\n  );\n};\n\nconst dropdownMenuProps = {\n  hideIfNotVisible: PropTypes.bool.description('Hide menu component if trigger component is not visible/scrolled away'),\n  containerProps: PropTypes.shape({}).description('Set of Properties attached to the main container'),\n  contentStyle: PropTypes.shape({}).description('Object style passed to the menu'),\n  options: PropTypes.arrayOf(\n    PropTypes.shape({\n      type: PropTypes.string,\n      id: PropTypes.string,\n      label: PropTypes.string,\n      onClick: PropTypes.func,\n      leftAddon: PropTypes.element,\n      rightAddon: PropTypes.element,\n      rightAddonType: PropTypes.oneOf(['ellipsis']),\n    }),\n  ).description('Options items for the dropdown menu. Check menu item types'),\n  onSelectMenuItem: PropTypes.func.description('Handler when user clicks on a menu item'),\n  onOpenMenu: PropTypes.func.description('Handler when the menu shows up'),\n  /**  Handler when user clicks outside the menu */\n  onClickOutsideMenu: PropTypes.func.description('Handler when user clicks outside the menu'),\n  /** Prevent to move the menu outside of the container defined when interacting with the page  */\n  preventOverflow: PropTypes.oneOf(['viewport', 'scrollParent', 'window']).description(\n    'Prevent to move the menu outside of the container defined when interacting with the page',\n  ),\n  /** Menu placement */\n  placement: PropTypes.oneOf(positions).description('Menu placement'),\n  /** How to open the menu with click, hover */\n  interactionType: PropTypes.oneOf(interactions).description('How to open the menu with click, hover'),\n  /** The component that is going to open / close the menu */\n  triggerComponent: PropTypes.element.description('The component that is going to open / close the menu'),\n  /** Custom menu component */\n  customMenu: PropTypes.element.description('Custom menu component'),\n  /** Whether the menu is open or not */\n  isOpen: PropTypes.bool.description('Whether the menu is open or not'),\n  /** Selection state. Ex: { [itemId]: '{bool}', [idMultiSelectionItem]: '{string}' } */\n  selection: PropTypes.shape({}).description(\n    'Selection state. Ex: { [itemId]: {bool}, [idMultiSelectionItem]: {string} }',\n  ),\n  /** Props object passed to the menu component */\n  menuProps: PropTypes.shape({}).description('Props object passed to the menu component'),\n  /** Customize the items render */\n  itemsRenderer: PropTypes.func.description('Customize the items render'),\n  /** Customize menu format. Can be undefined or 'phone' */\n  type: PropTypes.string.description('Customize menu format. Can be undefined or \"phone\"'),\n  /** Customize menu minWidth. Can be undefined or 'number' */\n  minWidth: PropTypes.number.description('Customize menu minWidth. Can be undefined or \"number\"'),\n  /** Customize menu maxWidth. Can be undefined or 'number' */\n  maxWidth: PropTypes.number.description('Customize menu maxWidth. Can be undefined or \"number\"'),\n  /** Make the menu responsive, it uses a margin of 120 px */\n  responsiveHeight: PropTypes.bool.description('Make the menu responsive, it uses a margin of 120 px'),\n  /** Customize menu zIndex. Can be undefined or 'number' */\n  zIndex: PropTypes.number.description('Customize menu zIndex. Can be undefined or \"number\"'),\n  className: PropTypes.string.description('html class attribute'),\n  focusOnOpen: PropTypes.bool.description('focus element on open or not').defaultValue(true),\n  loading: PropTypes.bool.description('is loading content or not').defaultValue(false),\n  referenceNode: PropTypes.any.description('reference node'),\n  onClose: PropTypes.func.description('function called on close mene'),\n  onSelectChange: PropTypes.func.description('function called when selection changes'),\n  singleGroupSelection: PropTypes.bool.description('select items in same group or not'),\n};\n\nDSDropdownMenu.propTypes = dropdownMenuProps;\nDSDropdownMenu.displayName = 'DSDropdownMenu';\nconst DropdownMenuWithSchema = describe(DSDropdownMenu);\nDropdownMenuWithSchema.propTypes = dropdownMenuProps;\n\nexport { DropdownMenuWithSchema, DSDropdownMenu };\nexport default DSDropdownMenu;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/deprecated/DropdownMenuContext.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import React2 from "react";
+const DropdownMenuContext = React2.createContext();
+var DropdownMenuContext_default = DropdownMenuContext;
+export {
+  DropdownMenuContext,
+  DropdownMenuContext_default as default
+};
+//# sourceMappingURL=DropdownMenuContext.js.map

package/dist/esm/deprecated/DropdownMenuContext.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownMenuContext.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// @ts-nocheck\nimport React from 'react';\n\nconst DropdownMenuContext = React.createContext();\nexport { DropdownMenuContext };\nexport default DropdownMenuContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACCvB,OAAOA,YAAW;AAElB,MAAM,sBAAsBA,OAAM,cAAc;AAEhD,IAAO,8BAAQ;",
+  "names": ["React"]
+}

package/dist/esm/deprecated/DropdownMenuLoadingIndicator.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { styled } from "@elliemae/ds-legacy-system";
+import { DSCircularProgressIndicator } from "@elliemae/ds-legacy-circular-progress-indicator";
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  height: 56px;
+`;
+const LoadingIndicator = () => /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsx(DSCircularProgressIndicator, { size: "m" }) });
+var DropdownMenuLoadingIndicator_default = LoadingIndicator;
+export {
+  LoadingIndicator,
+  DropdownMenuLoadingIndicator_default as default
+};
+//# sourceMappingURL=DropdownMenuLoadingIndicator.js.map

package/dist/esm/deprecated/DropdownMenuLoadingIndicator.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownMenuLoadingIndicator.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// @ts-nocheck\nimport React from 'react';\nimport { styled } from '@elliemae/ds-legacy-system';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-legacy-circular-progress-indicator';\n\nconst Wrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  height: 56px;\n`;\n\nconst LoadingIndicator = () => (\n  <Wrapper>\n    <DSCircularProgressIndicator size=\"m\" />\n  </Wrapper>\n);\n\nexport { LoadingIndicator };\nexport default LoadingIndicator;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACanB;AAXJ,SAAS,cAAc;AACvB,SAAS,mCAAmC;AAE5C,MAAM,UAAU,OAAO;AAAA;AAAA;AAAA;AAAA;AAMvB,MAAM,mBAAmB,MACvB,oBAAC,WACC,8BAAC,+BAA4B,MAAK,KAAI,GACxC;AAIF,IAAO,uCAAQ;",
+  "names": []
+}

package/dist/esm/deprecated/DropdownMenuProvider.js

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { runAll, toggleInObject } from "@elliemae/ds-legacy-utilities";
+import { DropdownMenuContext } from "./DropdownMenuContext.js";
+const noop = () => null;
+const DropdownMenuProvider = ({
+  onSelectMenuItem = noop,
+  onOpenMenu = noop,
+  onClose,
+  children,
+  isOpen,
+  selection,
+  singleGroupSelection,
+  onSelectChange = noop
+}) => {
+  const [isMenuOpen, setMenuOpen] = useState(isOpen);
+  const closeMenu = useCallback(() => {
+    setMenuOpen(false);
+    onOpenMenu(false);
+    onClose();
+  });
+  const openMenu = useCallback(() => {
+    setMenuOpen(true);
+    onOpenMenu(true);
+  });
+  const handleItemClick = ({ item, group }) => {
+    let activeState;
+    let nextSelection = !singleGroupSelection ? selection : {};
+    if (group) {
+      activeState = group.active;
+      nextSelection = {
+        ...nextSelection,
+        [group.id]: activeState
+      };
+    } else {
+      const selectionItem = group || item;
+      activeState = selectionItem.active || selectionItem.checked;
+      nextSelection = Array.isArray(activeState) ? {
+        ...nextSelection,
+        [selectionItem.id]: activeState
+      } : toggleInObject(nextSelection, selectionItem.id, item.label || activeState || true);
+    }
+    onSelectChange({
+      item,
+      group,
+      selection: nextSelection
+    });
+    onSelectMenuItem(item, activeState, nextSelection);
+  };
+  const handleCloseOnClick = useCallback(({ item, group = {} }) => {
+    if (item.closeOnClick !== void 0) {
+      if (item.closeOnClick)
+        closeMenu();
+      return;
+    }
+    if (group.closeOnClick !== void 0) {
+      if (group.closeOnClick)
+        closeMenu();
+    }
+  }, []);
+  const valueProvider = useMemo(
+    () => ({
+      onItemClick: runAll(handleItemClick, handleCloseOnClick),
+      closeMenu,
+      openMenu,
+      isMenuOpen,
+      selection
+    }),
+    [isMenuOpen, selection]
+  );
+  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: valueProvider, children });
+};
+var DropdownMenuProvider_default = DropdownMenuProvider;
+export {
+  DropdownMenuProvider,
+  DropdownMenuProvider_default as default
+};
+//# sourceMappingURL=DropdownMenuProvider.js.map

package/dist/esm/deprecated/DropdownMenuProvider.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownMenuProvider.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// @ts-nocheck\n/* eslint-disable react/prop-types */\n/* eslint-disable indent */\nimport React, { useCallback, useMemo, useState } from 'react';\nimport { runAll, toggleInObject } from '@elliemae/ds-legacy-utilities';\nimport { DropdownMenuContext } from './DropdownMenuContext.js';\n\nconst noop = () => null;\n\nconst DropdownMenuProvider = ({\n  onSelectMenuItem = noop,\n  onOpenMenu = noop,\n  onClose,\n  children,\n  isOpen,\n  selection,\n  singleGroupSelection,\n  onSelectChange = noop,\n}) => {\n  const [isMenuOpen, setMenuOpen] = useState(isOpen);\n\n  const closeMenu = useCallback(() => {\n    setMenuOpen(false);\n    onOpenMenu(false);\n    onClose();\n  });\n  const openMenu = useCallback(() => {\n    setMenuOpen(true);\n    onOpenMenu(true);\n  });\n\n  const handleItemClick = ({ item, group }) => {\n    let activeState;\n    // reset selection if single selection group is activated\n    let nextSelection = !singleGroupSelection ? selection : {};\n\n    if (group) {\n      activeState = group.active;\n      nextSelection = {\n        ...nextSelection,\n        [group.id]: activeState,\n      };\n    } else {\n      const selectionItem = group || item;\n      activeState = selectionItem.active || selectionItem.checked;\n\n      // can be toggled (radio with unselection)\n      nextSelection = Array.isArray(activeState)\n        ? {\n            ...nextSelection,\n            [selectionItem.id]: activeState,\n          }\n        : toggleInObject(nextSelection, selectionItem.id, item.label || activeState || true);\n    }\n    onSelectChange({\n      item,\n      group,\n      selection: nextSelection,\n    });\n    // todo: just pass item on item and group when selection callback,\n    //  use onSelectchange for nextSelection\n    onSelectMenuItem(item, activeState, nextSelection);\n  };\n\n  const handleCloseOnClick = useCallback(({ item, group = {} }) => {\n    if (item.closeOnClick !== undefined) {\n      if (item.closeOnClick) closeMenu();\n      return;\n    }\n    if (group.closeOnClick !== undefined) {\n      if (group.closeOnClick) closeMenu();\n    }\n  }, []);\n\n  const valueProvider = useMemo(\n    () => ({\n      onItemClick: runAll(handleItemClick, handleCloseOnClick),\n      closeMenu,\n      openMenu,\n      isMenuOpen,\n      selection,\n    }),\n    [isMenuOpen, selection],\n  );\n  return <DropdownMenuContext.Provider value={valueProvider}>{children}</DropdownMenuContext.Provider>;\n};\n\nexport { DropdownMenuProvider };\nexport default DropdownMenuProvider;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACoFd;AAjFT,SAAgB,aAAa,SAAS,gBAAgB;AACtD,SAAS,QAAQ,sBAAsB;AACvC,SAAS,2BAA2B;AAEpC,MAAM,OAAO,MAAM;AAEnB,MAAM,uBAAuB,CAAC;AAAA,EAC5B,mBAAmB;AAAA,EACnB,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AACnB,MAAM;AACJ,QAAM,CAAC,YAAY,WAAW,IAAI,SAAS,MAAM;AAEjD,QAAM,YAAY,YAAY,MAAM;AAClC,gBAAY,KAAK;AACjB,eAAW,KAAK;AAChB,YAAQ;AAAA,EACV,CAAC;AACD,QAAM,WAAW,YAAY,MAAM;AACjC,gBAAY,IAAI;AAChB,eAAW,IAAI;AAAA,EACjB,CAAC;AAED,QAAM,kBAAkB,CAAC,EAAE,MAAM,MAAM,MAAM;AAC3C,QAAI;AAEJ,QAAI,gBAAgB,CAAC,uBAAuB,YAAY,CAAC;AAEzD,QAAI,OAAO;AACT,oBAAc,MAAM;AACpB,sBAAgB;AAAA,QACd,GAAG;AAAA,QACH,CAAC,MAAM,EAAE,GAAG;AAAA,MACd;AAAA,IACF,OAAO;AACL,YAAM,gBAAgB,SAAS;AAC/B,oBAAc,cAAc,UAAU,cAAc;AAGpD,sBAAgB,MAAM,QAAQ,WAAW,IACrC;AAAA,QACE,GAAG;AAAA,QACH,CAAC,cAAc,EAAE,GAAG;AAAA,MACtB,IACA,eAAe,eAAe,cAAc,IAAI,KAAK,SAAS,eAAe,IAAI;AAAA,IACvF;AACA,mBAAe;AAAA,MACb;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IACb,CAAC;AAGD,qBAAiB,MAAM,aAAa,aAAa;AAAA,EACnD;AAEA,QAAM,qBAAqB,YAAY,CAAC,EAAE,MAAM,QAAQ,CAAC,EAAE,MAAM;AAC/D,QAAI,KAAK,iBAAiB,QAAW;AACnC,UAAI,KAAK;AAAc,kBAAU;AACjC;AAAA,IACF;AACA,QAAI,MAAM,iBAAiB,QAAW;AACpC,UAAI,MAAM;AAAc,kBAAU;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,MACL,aAAa,OAAO,iBAAiB,kBAAkB;AAAA,MACvD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,YAAY,SAAS;AAAA,EACxB;AACA,SAAO,oBAAC,oBAAoB,UAApB,EAA6B,OAAO,eAAgB,UAAS;AACvE;AAGA,IAAO,+BAAQ;",
+  "names": []
+}

package/dist/esm/deprecated/DropdownMenuRenderer.js

@@ -0,0 +1,143 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { DSPopper } from "@elliemae/ds-legacy-popper";
+import { Menu } from "@elliemae/ds-legacy-common";
+import { convertPropToCssClassName } from "@elliemae/ds-legacy-classnames";
+import { runAll, isFunction, getComponentFromProps } from "@elliemae/ds-legacy-utilities";
+import { DropdownMenuContext } from "./DropdownMenuContext.js";
+import { renderOptions, factory } from "./decoratedMenuItemFactory.js";
+import { LoadingIndicator } from "./DropdownMenuLoadingIndicator.js";
+const blockName = "menu";
+const getMax = (options) => {
+  let max = 0;
+  options.forEach((o) => {
+    if (o && o.label && String(o.label).length > max)
+      max = String(o.label).length;
+  });
+  return max;
+};
+const DropdownMenuRenderer = ({
+  containerProps,
+  className,
+  options = [],
+  triggerComponent,
+  placement,
+  interactionType,
+  preventOverflow,
+  customMenu,
+  contentOffset,
+  contentStyle,
+  isOpen,
+  children,
+  menuProps,
+  referenceNode,
+  focusOnOpen: focusOnOpenProp,
+  onClickOutsideMenu,
+  responsiveHeight,
+  itemsRenderer,
+  maxWidth,
+  minWidth,
+  zIndex,
+  type,
+  loading,
+  hideIfNotVisible
+}) => {
+  const [focusOnOpen, setFocusOnOpenMenu] = useState(focusOnOpenProp);
+  const { isMenuOpen, openMenu, closeMenu } = useContext(DropdownMenuContext);
+  const maxOption = useMemo(() => {
+    let max = 0;
+    options.forEach((o) => {
+      if (o && o.label && String(o.label).length > max)
+        max = String(o.label).length;
+      if (o && o.items) {
+        const nestedMax = getMax(o.items);
+        if (nestedMax > max)
+          max = nestedMax;
+      }
+    });
+    return max;
+  }, [options]);
+  const optionsRendererd = useMemo(() => {
+    if (options[0] && options[0].type === "separator") {
+      options[0].showSeparator = false;
+    }
+    return isFunction(itemsRenderer) ? itemsRenderer(options, factory) : renderOptions(options);
+  }, [options]);
+  const dropdownBlockName = convertPropToCssClassName(blockName);
+  const menuContent = () => {
+    if (loading)
+      return /* @__PURE__ */ jsx(LoadingIndicator, {});
+    if (children)
+      return children;
+    if (optionsRendererd)
+      return optionsRendererd;
+  };
+  const MenuComponent = customMenu ? getComponentFromProps(customMenu, {
+    options,
+    focusOnOpen,
+    maxOption,
+    ...menuProps,
+    closeMenu,
+    loading
+  }) : /* @__PURE__ */ jsx(
+    Menu,
+    {
+      closeMenu,
+      focusOnOpen,
+      containerProps,
+      maxOption: type === "phone" ? maxOption : void 0,
+      maxWidth,
+      minWidth,
+      onClickOutside: onClickOutsideMenu,
+      onExitFocusGroup: closeMenu,
+      responsiveHeight,
+      type,
+      visible: true,
+      ...menuProps,
+      children: menuContent()
+    }
+  );
+  useEffect(() => {
+    setFocusOnOpenMenu(focusOnOpenProp);
+  });
+  return /* @__PURE__ */ jsx(
+    DSPopper,
+    {
+      hideIfNotVisible,
+      blockName: dropdownBlockName,
+      containerProps,
+      contentComponent: MenuComponent,
+      contentOffset,
+      contentStyle,
+      interactionType,
+      isOpen: isOpen !== void 0 ? isOpen : isMenuOpen,
+      onOpen: (opening) => opening ? openMenu() : closeMenu(),
+      placement,
+      preventOverflow,
+      referenceNode,
+      showArrow: false,
+      triggerComponent: getComponentFromProps(triggerComponent, {
+        onClick: interactionType === "hover" ? runAll(openMenu, triggerComponent.props.onClick) : runAll(!isMenuOpen ? openMenu : closeMenu, triggerComponent.props.onClick),
+        onMouseEnter: interactionType === "hover" ? openMenu : void 0,
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" || e.key === " ") {
+            e.preventDefault();
+            setFocusOnOpenMenu(true);
+            openMenu();
+          }
+          if (triggerComponent.props.onKeyPress)
+            triggerComponent.props.onKeyPress(e);
+        },
+        className: `${triggerComponent.props.className} ${className}`
+      }),
+      zIndex: zIndex || menuProps.zIndex
+    }
+  );
+};
+var DropdownMenuRenderer_default = DropdownMenuRenderer;
+export {
+  DropdownMenuRenderer,
+  DropdownMenuRenderer_default as default
+};
+//# sourceMappingURL=DropdownMenuRenderer.js.map

package/dist/esm/deprecated/DropdownMenuRenderer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownMenuRenderer.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// @ts-nocheck\nimport React, { useContext, useEffect, useMemo, useState } from 'react';\nimport { DSPopper } from '@elliemae/ds-legacy-popper';\nimport { Menu } from '@elliemae/ds-legacy-common';\nimport { convertPropToCssClassName } from '@elliemae/ds-legacy-classnames';\nimport { runAll, isFunction, getComponentFromProps } from '@elliemae/ds-legacy-utilities';\nimport { DropdownMenuContext } from './DropdownMenuContext.js';\nimport { renderOptions, factory } from './decoratedMenuItemFactory.js';\nimport { LoadingIndicator } from './DropdownMenuLoadingIndicator.js';\n\nconst blockName = 'menu';\n\nconst getMax = (options) => {\n  let max = 0;\n  options.forEach((o) => {\n    if (o && o.label && String(o.label).length > max) max = String(o.label).length;\n  });\n  return max;\n};\n\nconst DropdownMenuRenderer = ({\n  containerProps,\n  className,\n  options = [],\n  triggerComponent,\n  placement,\n  interactionType,\n  preventOverflow,\n  customMenu,\n  contentOffset,\n  contentStyle,\n  isOpen,\n  children,\n  menuProps,\n  referenceNode,\n  focusOnOpen: focusOnOpenProp,\n  onClickOutsideMenu,\n  responsiveHeight,\n  itemsRenderer,\n  maxWidth,\n  minWidth,\n  zIndex,\n  type,\n  loading,\n  hideIfNotVisible,\n}) => {\n  const [focusOnOpen, setFocusOnOpenMenu] = useState(focusOnOpenProp);\n  const { isMenuOpen, openMenu, closeMenu } = useContext(DropdownMenuContext);\n  const maxOption = useMemo(() => {\n    let max = 0;\n    options.forEach((o) => {\n      if (o && o.label && String(o.label).length > max) max = String(o.label).length;\n      if (o && o.items) {\n        const nestedMax = getMax(o.items);\n        if (nestedMax > max) max = nestedMax;\n      }\n    });\n    return max;\n  }, [options]);\n  const optionsRendererd = useMemo(() => {\n    if (options[0] && options[0].type === 'separator') {\n      options[0].showSeparator = false;\n    }\n    return isFunction(itemsRenderer) ? itemsRenderer(options, factory) : renderOptions(options);\n  }, [options]);\n\n  const dropdownBlockName = convertPropToCssClassName(blockName);\n  const menuContent = () => {\n    if (loading) return <LoadingIndicator />;\n    if (children) return children;\n    if (optionsRendererd) return optionsRendererd;\n  };\n\n  const MenuComponent = customMenu ? (\n    getComponentFromProps(customMenu, {\n      options,\n      focusOnOpen,\n      maxOption,\n      ...menuProps,\n      closeMenu,\n      loading,\n    })\n  ) : (\n    <Menu\n      closeMenu={closeMenu}\n      focusOnOpen={focusOnOpen}\n      containerProps={containerProps}\n      maxOption={type === 'phone' ? maxOption : undefined}\n      maxWidth={maxWidth}\n      minWidth={minWidth}\n      onClickOutside={onClickOutsideMenu}\n      onExitFocusGroup={closeMenu}\n      responsiveHeight={responsiveHeight}\n      type={type}\n      visible\n      {...menuProps}\n    >\n      {menuContent()}\n    </Menu>\n  );\n\n  useEffect(() => {\n    setFocusOnOpenMenu(focusOnOpenProp);\n  });\n\n  return (\n    <DSPopper\n      hideIfNotVisible={hideIfNotVisible}\n      blockName={dropdownBlockName}\n      containerProps={containerProps}\n      contentComponent={MenuComponent}\n      contentOffset={contentOffset}\n      contentStyle={contentStyle}\n      interactionType={interactionType}\n      isOpen={isOpen !== undefined ? isOpen : isMenuOpen}\n      onOpen={(opening) => (opening ? openMenu() : closeMenu())}\n      placement={placement}\n      preventOverflow={preventOverflow}\n      referenceNode={referenceNode}\n      showArrow={false}\n      triggerComponent={getComponentFromProps(triggerComponent, {\n        onClick:\n          interactionType === 'hover'\n            ? runAll(openMenu, triggerComponent.props.onClick)\n            : runAll(!isMenuOpen ? openMenu : closeMenu, triggerComponent.props.onClick),\n        onMouseEnter: interactionType === 'hover' ? openMenu : undefined,\n        onKeyDown: (e) => {\n          if (e.key === 'ArrowDown' || e.key === ' ') {\n            e.preventDefault();\n            setFocusOnOpenMenu(true);\n            openMenu();\n          }\n          if (triggerComponent.props.onKeyPress) triggerComponent.props.onKeyPress(e);\n        },\n        className: `${triggerComponent.props.className} ${className}`,\n      })}\n      zIndex={zIndex || menuProps.zIndex}\n    />\n  );\n};\n\nexport { DropdownMenuRenderer };\nexport default DropdownMenuRenderer;\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/deprecated/DropdownMenuWrapper.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { DropdownMenuProvider } from "./DropdownMenuProvider.js";
+import { DropdownMenuRenderer } from "./DropdownMenuRenderer.js";
+const DropdownMenuWrapper = (props) => /* @__PURE__ */ jsx(DropdownMenuProvider, { ...props, children: /* @__PURE__ */ jsx(DropdownMenuRenderer, { ...props }) });
+var DropdownMenuWrapper_default = DropdownMenuWrapper;
+export {
+  DropdownMenuWrapper,
+  DropdownMenuWrapper_default as default
+};
+//# sourceMappingURL=DropdownMenuWrapper.js.map

package/dist/esm/deprecated/DropdownMenuWrapper.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/deprecated/DropdownMenuWrapper.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// @ts-nocheck\nimport React from 'react';\nimport { DropdownMenuProvider } from './DropdownMenuProvider.js';\nimport { DropdownMenuRenderer } from './DropdownMenuRenderer.js';\n\nconst DropdownMenuWrapper = (props) => (\n  <DropdownMenuProvider {...props}>\n    <DropdownMenuRenderer {...props} />\n  </DropdownMenuProvider>\n);\n\nexport { DropdownMenuWrapper };\nexport default DropdownMenuWrapper;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACOnB;AALJ,SAAS,4BAA4B;AACrC,SAAS,4BAA4B;AAErC,MAAM,sBAAsB,CAAC,UAC3B,oBAAC,wBAAsB,GAAG,OACxB,8BAAC,wBAAsB,GAAG,OAAO,GACnC;AAIF,IAAO,8BAAQ;",
+  "names": []
+}