@elliemae/ds-dropdownmenu-v2 3.25.0-next.3

package/dist/esm/parts/DropdownMenuListBox.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuListBox.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useContext, useMemo } from 'react';\nimport { DSInputText } from '@elliemae/ds-form-input-text';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { useDropdownListboxHandlers } from '../hooks/useDropdownListboxHandlers.js';\nimport { StyledInputWrapper, StyledListBoxWrapper, StyledHeaderWrapper, StyledOptionListWrapper } from '../styled.js';\nimport { DropdownMenuEmptyState } from './DropdownMenuEmptyState.js';\nimport { DropdownMenuItemFactory } from './DropdownMenuItemFactory.js';\nimport { DropdownMenuSkeleton } from './DropdownMenuSkeleton.js';\n\nimport { useAutofocusContainerOnOpen, useGetOptionSpecialAttributes } from '../hooks/index.js';\n\nexport const DropdownMenuListBox: React.ComponentType<Record<string, never>> = () => {\n  const ctx = useContext(DSDropdownMenuContext);\n  const {\n    triggerReferenceElement,\n    props: {\n      isSkeleton,\n      options,\n      hasInput,\n      inputValue,\n      onInputChange,\n      HeaderComp,\n      minWidth: userMinWidth,\n      maxHeight: userMaxHeight,\n    },\n    activeDescendant,\n    listboxReference,\n    inputReference,\n    virtualListHelpers: { totalSize, virtualItems },\n  } = ctx;\n\n  useAutofocusContainerOnOpen();\n\n  const { onKeyDown, onMouseEnter, onMouseLeave } = useDropdownListboxHandlers();\n\n  const { optionsShouldHavePadding } = useGetOptionSpecialAttributes();\n\n  const minWidth = useMemo(\n    () => (userMinWidth !== undefined ? userMinWidth : Math.max(triggerReferenceElement?.offsetWidth ?? 0, 162)),\n    [triggerReferenceElement?.offsetWidth, userMinWidth],\n  );\n\n  return useMemo(() => {\n    if (virtualItems.length === 0) {\n      return <DropdownMenuEmptyState minWidth={minWidth} maxHeight={userMaxHeight || 400} />;\n    }\n    return (\n      <StyledListBoxWrapper\n        minWidth={minWidth}\n        maxHeight={userMaxHeight || 400}\n        innerRef={listboxReference}\n        tabIndex={0}\n        data-testid={DropdownMenuDataTestId.MENU_WRAPPER}\n        onKeyDown={onKeyDown}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        hasHeader={!!HeaderComp}\n      >\n        {isSkeleton ? (\n          <DropdownMenuSkeleton />\n        ) : (\n          <>\n            {HeaderComp && (\n              <StyledHeaderWrapper alignItems=\"center\">\n                <HeaderComp ctx={ctx} />\n              </StyledHeaderWrapper>\n            )}\n            {hasInput && (\n              <StyledInputWrapper key=\"dropdown-listbox-input-wrapper\" hasHeader={!!HeaderComp}>\n                <DSInputText value={inputValue} onChange={onInputChange} innerRef={inputReference} />\n              </StyledInputWrapper>\n            )}\n            <StyledOptionListWrapper\n              aria-activedescendant={activeDescendant}\n              data-testid={DropdownMenuDataTestId.LISTBOX}\n              role=\"listbox\"\n              aria-label=\"List of options\"\n              style={{ height: totalSize || 16 }}\n            >\n              {virtualItems.map((vItem) => (\n                <DropdownMenuItemFactory\n                  option={options[vItem.index]}\n                  style={{ position: 'absolute', top: vItem.start, left: 0, width: '100%' }}\n                  key={`dropdown-listbox-option-${options[vItem.index].dsId}`}\n                  innerRef={vItem.measureRef}\n                  optionsShouldHavePadding={optionsShouldHavePadding}\n                />\n              ))}\n            </StyledOptionListWrapper>\n          </>\n        )}\n      </StyledListBoxWrapper>\n    );\n  }, [\n    HeaderComp,\n    activeDescendant,\n    ctx,\n    hasInput,\n    inputReference,\n    inputValue,\n    isSkeleton,\n    listboxReference,\n    minWidth,\n    onInputChange,\n    onKeyDown,\n    onMouseEnter,\n    onMouseLeave,\n    options,\n    optionsShouldHavePadding,\n    totalSize,\n    userMaxHeight,\n    virtualItems,\n  ]);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6CV,SAiBH,UAjBG,KAiBH,YAjBG;AA7Cb,SAAgB,YAAY,eAAe;AAC3C,SAAS,mBAAmB;AAC5B,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,kCAAkC;AAC3C,SAAS,oBAAoB,sBAAsB,qBAAqB,+BAA+B;AACvG,SAAS,8BAA8B;AACvC,SAAS,+BAA+B;AACxC,SAAS,4BAA4B;AAErC,SAAS,6BAA6B,qCAAqC;AAEpE,MAAM,sBAAkE,MAAM;AACnF,QAAM,MAAM,WAAW,qBAAqB;AAC5C,QAAM;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,WAAW;AAAA,IACb;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,oBAAoB,EAAE,WAAW,aAAa;AAAA,EAChD,IAAI;AAEJ,8BAA4B;AAE5B,QAAM,EAAE,WAAW,cAAc,aAAa,IAAI,2BAA2B;AAE7E,QAAM,EAAE,yBAAyB,IAAI,8BAA8B;AAEnE,QAAM,WAAW;AAAA,IACf,MAAO,iBAAiB,SAAY,eAAe,KAAK,IAAI,yBAAyB,eAAe,GAAG,GAAG;AAAA,IAC1G,CAAC,yBAAyB,aAAa,YAAY;AAAA,EACrD;AAEA,SAAO,QAAQ,MAAM;AACnB,QAAI,aAAa,WAAW,GAAG;AAC7B,aAAO,oBAAC,0BAAuB,UAAoB,WAAW,iBAAiB,KAAK;AAAA,IACtF;AACA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,iBAAiB;AAAA,QAC5B,UAAU;AAAA,QACV,UAAU;AAAA,QACV,eAAa,uBAAuB;AAAA,QACpC;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW,CAAC,CAAC;AAAA,QAEZ,uBACC,oBAAC,wBAAqB,IAEtB,iCACG;AAAA,wBACC,oBAAC,uBAAoB,YAAW,UAC9B,8BAAC,cAAW,KAAU,GACxB;AAAA,UAED,YACC,oBAAC,sBAAwD,WAAW,CAAC,CAAC,YACpE,8BAAC,eAAY,OAAO,YAAY,UAAU,eAAe,UAAU,gBAAgB,KAD7D,gCAExB;AAAA,UAEF;AAAA,YAAC;AAAA;AAAA,cACC,yBAAuB;AAAA,cACvB,eAAa,uBAAuB;AAAA,cACpC,MAAK;AAAA,cACL,cAAW;AAAA,cACX,OAAO,EAAE,QAAQ,aAAa,GAAG;AAAA,cAEhC,uBAAa,IAAI,CAAC,UACjB;AAAA,gBAAC;AAAA;AAAA,kBACC,QAAQ,QAAQ,MAAM,KAAK;AAAA,kBAC3B,OAAO,EAAE,UAAU,YAAY,KAAK,MAAM,OAAO,MAAM,GAAG,OAAO,OAAO;AAAA,kBAExE,UAAU,MAAM;AAAA,kBAChB;AAAA;AAAA,gBAFK,2BAA2B,QAAQ,MAAM,KAAK,EAAE;AAAA,cAGvD,CACD;AAAA;AAAA,UACH;AAAA,WACF;AAAA;AAAA,IAEJ;AAAA,EAEJ,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACH;",
+  "names": []
+}

package/dist/esm/parts/DropdownMenuLoading.js

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useLayoutEffect, useRef } from "react";
+import { DSCircularProgressIndicator } from "@elliemae/ds-circular-progress-indicator";
+import { DSDropdownMenuContext } from "../DropdownMenuContext.js";
+import { DropdownMenuDataTestId } from "../DropdownMenuDataTestId.js";
+import { StyledLoadingWrapper } from "../styled.js";
+const DropdownMenuLoading = () => {
+  const {
+    props: { onClickOutside },
+    triggerReferenceElement
+  } = useContext(DSDropdownMenuContext);
+  const loadingRef = useRef(null);
+  useLayoutEffect(() => {
+    loadingRef.current?.focus();
+  }, [loadingRef]);
+  const onKeyDown = useCallback(
+    (e) => {
+      if (e.code === "Escape" || e.code === "ArrowLeft")
+        onClickOutside(e);
+    },
+    [onClickOutside]
+  );
+  return /* @__PURE__ */ jsx(
+    StyledLoadingWrapper,
+    {
+      minWidth: triggerReferenceElement?.offsetWidth ?? 0,
+      justifyContent: "center",
+      alignItems: "center",
+      "data-testid": DropdownMenuDataTestId.LOADING,
+      tabIndex: 0,
+      role: "status",
+      innerRef: loadingRef,
+      "aria-busy": "true",
+      onKeyDown,
+      children: /* @__PURE__ */ jsx(DSCircularProgressIndicator, { size: "l" })
+    }
+  );
+};
+export {
+  DropdownMenuLoading
+};
+//# sourceMappingURL=DropdownMenuLoading.js.map

package/dist/esm/parts/DropdownMenuLoading.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuLoading.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useCallback, useContext, useLayoutEffect, useRef } from 'react';\nimport { DSCircularProgressIndicator } from '@elliemae/ds-circular-progress-indicator';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { DropdownMenuDataTestId } from '../DropdownMenuDataTestId.js';\nimport { StyledLoadingWrapper } from '../styled.js';\n\nexport const DropdownMenuLoading: React.ComponentType<Record<string, never>> = () => {\n  const {\n    props: { onClickOutside },\n    triggerReferenceElement,\n  } = useContext(DSDropdownMenuContext);\n\n  const loadingRef = useRef<HTMLDivElement>(null);\n\n  useLayoutEffect(() => {\n    loadingRef.current?.focus();\n  }, [loadingRef]);\n\n  const onKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      if (e.code === 'Escape' || e.code === 'ArrowLeft') onClickOutside(e);\n    },\n    [onClickOutside],\n  );\n\n  return (\n    <StyledLoadingWrapper\n      minWidth={triggerReferenceElement?.offsetWidth ?? 0}\n      justifyContent=\"center\"\n      alignItems=\"center\"\n      data-testid={DropdownMenuDataTestId.LOADING}\n      tabIndex={0}\n      role=\"status\"\n      innerRef={loadingRef}\n      aria-busy=\"true\"\n      onKeyDown={onKeyDown}\n    >\n      <DSCircularProgressIndicator size=\"l\" />\n    </StyledLoadingWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqCjB;AArCN,SAAgB,aAAa,YAAY,iBAAiB,cAAc;AACxE,SAAS,mCAAmC;AAC5C,SAAS,6BAA6B;AACtC,SAAS,8BAA8B;AACvC,SAAS,4BAA4B;AAE9B,MAAM,sBAAkE,MAAM;AACnF,QAAM;AAAA,IACJ,OAAO,EAAE,eAAe;AAAA,IACxB;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,QAAM,aAAa,OAAuB,IAAI;AAE9C,kBAAgB,MAAM;AACpB,eAAW,SAAS,MAAM;AAAA,EAC5B,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,YAAwC;AAAA,IAC5C,CAAC,MAAM;AACL,UAAI,EAAE,SAAS,YAAY,EAAE,SAAS;AAAa,uBAAe,CAAC;AAAA,IACrE;AAAA,IACA,CAAC,cAAc;AAAA,EACjB;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU,yBAAyB,eAAe;AAAA,MAClD,gBAAe;AAAA,MACf,YAAW;AAAA,MACX,eAAa,uBAAuB;AAAA,MACpC,UAAU;AAAA,MACV,MAAK;AAAA,MACL,UAAU;AAAA,MACV,aAAU;AAAA,MACV;AAAA,MAEA,8BAAC,+BAA4B,MAAK,KAAI;AAAA;AAAA,EACxC;AAEJ;",
+  "names": []
+}

package/dist/esm/parts/DropdownMenuSkeleton.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { SkeletonMenuItem } from "@elliemae/ds-menu-items";
+import { Grid } from "@elliemae/ds-grid";
+const DropdownMenuSkeleton = () => {
+  const SKELETON_AMOUNT = 5;
+  return /* @__PURE__ */ jsx(Grid, { children: Array(SKELETON_AMOUNT).fill(0).map((_, index) => /* @__PURE__ */ jsx(SkeletonMenuItem, { dsId: `${index}-skeleton` }, index)) });
+};
+export {
+  DropdownMenuSkeleton
+};
+//# sourceMappingURL=DropdownMenuSkeleton.js.map

package/dist/esm/parts/DropdownMenuSkeleton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuSkeleton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { SkeletonMenuItem } from '@elliemae/ds-menu-items';\nimport { Grid } from '@elliemae/ds-grid';\n\nexport const DropdownMenuSkeleton = () => {\n  const SKELETON_AMOUNT = 5;\n\n  return (\n    <Grid>\n      {Array(SKELETON_AMOUNT)\n        .fill(0)\n        .map((_, index) => (\n          <SkeletonMenuItem key={index} dsId={`${index}-skeleton`} />\n        ))}\n    </Grid>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACYb;AAXV,SAAS,wBAAwB;AACjC,SAAS,YAAY;AAEd,MAAM,uBAAuB,MAAM;AACxC,QAAM,kBAAkB;AAExB,SACE,oBAAC,QACE,gBAAM,eAAe,EACnB,KAAK,CAAC,EACN,IAAI,CAAC,GAAG,UACP,oBAAC,oBAA6B,MAAM,GAAG,oBAAhB,KAAkC,CAC1D,GACL;AAEJ;",
+  "names": []
+}

package/dist/esm/react-desc-prop-types.js

@@ -0,0 +1,102 @@
+import * as React from "react";
+import {
+  PropTypes,
+  globalAttributesPropTypes
+} from "@elliemae/ds-props-helpers";
+const optionTypes = PropTypes.oneOfType([
+  PropTypes.shape({
+    dsId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(["action"]),
+    label: PropTypes.string.isRequired,
+    secondaryLabel: PropTypes.string,
+    disabled: PropTypes.bool,
+    render: PropTypes.func
+  }),
+  PropTypes.shape({
+    dsId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(["single", "checkbox"]),
+    label: PropTypes.string.isRequired,
+    secondaryLabel: PropTypes.string,
+    value: PropTypes.any.isRequired,
+    disabled: PropTypes.bool,
+    render: PropTypes.func
+  }),
+  PropTypes.shape({
+    dsId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(["submenu", "singleWithSubmenu"]),
+    label: PropTypes.string.isRequired,
+    secondaryLabel: PropTypes.string,
+    value: PropTypes.any.isRequired,
+    disabled: PropTypes.bool,
+    rightAddon: PropTypes.oneOf(["chevron", "ellipsis"]),
+    options: PropTypes.array,
+    minWidth: PropTypes.any,
+    maxHeight: PropTypes.any,
+    render: PropTypes.func
+  }),
+  PropTypes.shape({
+    dsId: PropTypes.string.isRequired,
+    type: PropTypes.oneOf(["separator", "section"]),
+    label: PropTypes.string.isRequired,
+    render: PropTypes.func
+  })
+]);
+const DSDropdownMenuV2PropTypes = {
+  options: PropTypes.arrayOf(optionTypes).description("The array of option for the menu").omitValidation().isRequired,
+  isOpened: PropTypes.bool.description("Whether the dropdown menu is opened or not").isRequired,
+  onClickOutside: PropTypes.func.description("Callback executed when you click outside the dropdown menu, or press the Esc key").defaultValue(() => null),
+  selectedOptions: PropTypes.object.description(
+    "Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu"
+  ).defaultValue({}),
+  onOptionClick: PropTypes.func.description(
+    "Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order"
+  ).defaultValue(() => null),
+  openedSubmenus: PropTypes.object.description(
+    "Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus"
+  ).defaultValue({}),
+  onSubmenuToggle: PropTypes.func.description(
+    "Callback triggered when a submenu is opened or closed. We provide the next opened submenus, the clicked one and the event, in that order"
+  ).defaultValue(() => null),
+  startPlacementPreference: PropTypes.string.description("Where to place the popper for the dropdown menu").defaultValue("bottom-start"),
+  placementOrderPreference: PropTypes.arrayOf(PropTypes.string).description("Placement priorities for the dropdown menu").defaultValue(["bottom-start", "top-start", "right-start", "right-end", "left-start", "left-end"]),
+  customOffset: PropTypes.arrayOf(PropTypes.number).description("Custom offset for the dropdown menu").defaultValue([0, 4]),
+  wrapperStyles: PropTypes.object.description("Styling for the dropdown menu wrapper").defaultValue({}),
+  isLoading: PropTypes.bool.description("Whether the dropdown menu should render the loading indicator").defaultValue(false),
+  zIndex: PropTypes.number.description("ZIndex for the popper").defaultValue(10),
+  HeaderComp: PropTypes.func.description("Component to render as a header for the dropdown menu").defaultValue(void 0),
+  actionRef: PropTypes.object.description("Reference where all the exposed action callbacks will be exposed"),
+  minWidth: PropTypes.any.description("Minimum width for the dropdown menu").defaultValue(void 0),
+  maxHeight: PropTypes.any.description("Maximum height for the dropdown menu").defaultValue(void 0),
+  ...globalAttributesPropTypes,
+  onKeyDown: PropTypes.func.description("Callback executed when a key is pressed").defaultValue(() => null),
+  onMouseEnter: PropTypes.func.description("Callback executed when the mouse enter the dropdown menu").defaultValue(() => null),
+  onMouseLeave: PropTypes.func.description("Callback executed when the mouse leaves the dropdown menu").defaultValue(() => null),
+  isSkeleton: PropTypes.bool.description("Whether the dropdown menu should render the skeleton").defaultValue(false)
+};
+const defaultProps = {
+  onClickOutside: () => null,
+  onKeyDown: () => null,
+  onMouseEnter: () => null,
+  onMouseLeave: () => null,
+  selectedOptions: {},
+  onOptionClick: () => null,
+  openedSubmenus: {},
+  onSubmenuToggle: () => null,
+  isLoading: false,
+  hasInput: false,
+  inputValue: "",
+  inputPlaceholder: "Hint text",
+  onInputChange: () => null,
+  startPlacementPreference: "bottom-start",
+  placementOrderPreference: ["bottom-start", "top-start", "right-start", "right-end", "left-start", "left-end"],
+  customOffset: [0, 4],
+  wrapperStyles: {},
+  actionRef: { current: {} },
+  as: "div",
+  isSkeleton: false
+};
+export {
+  DSDropdownMenuV2PropTypes,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

package/dist/esm/react-desc-prop-types.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-use-before-define */\n/* eslint-disable max-lines */\nimport type { WeakValidationMap } from 'react';\nimport type React from 'react';\nimport type { useVirtual } from 'react-virtual';\nimport {\n  type GlobalAttributesT,\n  PropTypes,\n  type XstyledProps,\n  globalAttributesPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-system';\n\nexport namespace DSDropdownMenuT {\n  type PopperPlacementsT =\n    | 'top-start'\n    | 'top'\n    | 'top-end'\n    | 'right-start'\n    | 'right'\n    | 'right-end'\n    | 'bottom-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'left-end'\n    | 'left'\n    | 'left-start';\n\n  export interface RequiredProps {\n    options: Item[];\n    isOpened: boolean;\n  }\n\n  export interface DefaultProps {\n    onClickOutside: (e: MouseEvent | React.KeyboardEvent | TouchEvent) => void;\n    onKeyDown: React.KeyboardEventHandler;\n    onMouseEnter: React.MouseEventHandler;\n    onMouseLeave: React.MouseEventHandler;\n    selectedOptions: Record<string, boolean>;\n    onOptionClick: (\n      nextSelectedOptions: Record<string, boolean>,\n      clickedOption: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    openedSubmenus: Record<string, boolean>;\n    onSubmenuToggle: (\n      nextOpenedSubmenus: Record<string, boolean>,\n      submenu: Item,\n      e: React.MouseEvent | React.KeyboardEvent,\n    ) => void;\n    isLoading: boolean;\n    hasInput: boolean;\n    inputValue: string;\n    inputPlaceholder: string;\n    onInputChange: React.FormEventHandler<HTMLInputElement>;\n    startPlacementPreference: PopperPlacementsT;\n    placementOrderPreference: PopperPlacementsT[];\n    customOffset: [number, number];\n    wrapperStyles: Record<string, unknown>;\n    actionRef: React.MutableRefObject<Record<string, unknown>>;\n    as: keyof JSX.IntrinsicElements;\n    children?: React.ReactNode;\n    isSkeleton: false;\n  }\n\n  export interface OptionalProps {\n    zIndex?: number;\n    minWidth?: SizingProps['minWidth'];\n    maxHeight?: SizingProps['maxHeight'];\n    HeaderComp?: React.ComponentType<{ ctx?: DSDropdownMenuT.CTX }>;\n  }\n\n  export interface Props\n    extends Partial<DefaultProps>,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface InternalProps\n    extends DefaultProps,\n      OptionalProps,\n      Omit<GlobalAttributesT<HTMLButtonElement>, keyof DefaultProps | keyof OptionalProps | keyof RequiredProps>,\n      Omit<XstyledProps, 'zIndex'>,\n      RequiredProps {}\n\n  export interface CTX {\n    props: React.PropsWithChildren<InternalProps>;\n    triggerReferenceElement: HTMLDivElement | null;\n    setTriggerReferenceElement: React.Dispatch<React.SetStateAction<HTMLDivElement | null>>;\n    listboxReference: React.RefObject<HTMLDivElement>;\n    inputReference: React.RefObject<HTMLInputElement>;\n    activeDescendant: string;\n    setActiveDescendant: React.Dispatch<React.SetStateAction<string>>;\n    scrollOptionIntoView: (dsId: string) => void;\n    virtualListHelpers: ReturnType<typeof useVirtual>;\n    DSDropdownMenuV2: React.ComponentType<Props>;\n  }\n\n  interface CommonItemOptions {\n    dsId: string;\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    render?: React.ComponentType<any>;\n    onClick?: (e: React.MouseEvent | React.KeyboardEvent) => void;\n    onKeyDown?: (e: React.KeyboardEvent) => null;\n  }\n\n  export interface ItemActionOptions extends CommonItemOptions {\n    type: 'action';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSingleOptions extends CommonItemOptions {\n    type: 'single';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSingleWithSubmenuOptions extends CommonItemOptions {\n    type: 'singleWithSubmenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemCheckboxOptions extends CommonItemOptions {\n    type: 'checkbox';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n  }\n\n  export interface ItemSubmenuOptions extends CommonItemOptions {\n    type: 'submenu';\n    label: string;\n    value: unknown;\n    disabled?: boolean;\n    rightAddon?: 'chevron' | 'ellipsis';\n    options: Item[];\n  }\n\n  export interface ItemSeparatorOptions extends CommonItemOptions {\n    type: 'separator';\n  }\n\n  export interface ItemSectionOptions extends CommonItemOptions {\n    type: 'section';\n    label: string;\n  }\n\n  export interface ItemSkeletonOptions extends CommonItemOptions {\n    type: 'skeleton';\n  }\n\n  export type Item =\n    | ItemActionOptions\n    | ItemSingleOptions\n    | ItemCheckboxOptions\n    | ItemSubmenuOptions\n    | ItemSingleWithSubmenuOptions\n    | ItemSeparatorOptions\n    | ItemSectionOptions\n    | ItemSkeletonOptions;\n\n  export interface ItemDictionary {\n    [dsId: string]: {\n      original: Item;\n      containerRef: React.RefObject<HTMLDivElement>;\n      parent: string | null;\n    };\n  }\n}\n\nconst optionTypes = PropTypes.oneOfType([\n  PropTypes.shape({\n    dsId: PropTypes.string.isRequired,\n    type: PropTypes.oneOf(['action']),\n    label: PropTypes.string.isRequired,\n    secondaryLabel: PropTypes.string,\n    disabled: PropTypes.bool,\n    render: PropTypes.func,\n  }),\n  PropTypes.shape({\n    dsId: PropTypes.string.isRequired,\n    type: PropTypes.oneOf(['single', 'checkbox']),\n    label: PropTypes.string.isRequired,\n    secondaryLabel: PropTypes.string,\n    value: PropTypes.any.isRequired,\n    disabled: PropTypes.bool,\n    render: PropTypes.func,\n  }),\n  PropTypes.shape({\n    dsId: PropTypes.string.isRequired,\n    type: PropTypes.oneOf(['submenu', 'singleWithSubmenu']),\n    label: PropTypes.string.isRequired,\n    secondaryLabel: PropTypes.string,\n    value: PropTypes.any.isRequired,\n    disabled: PropTypes.bool,\n    rightAddon: PropTypes.oneOf(['chevron', 'ellipsis']),\n    options: PropTypes.array,\n    minWidth: PropTypes.any,\n    maxHeight: PropTypes.any,\n    render: PropTypes.func,\n  }),\n  PropTypes.shape({\n    dsId: PropTypes.string.isRequired,\n    type: PropTypes.oneOf(['separator', 'section']),\n    label: PropTypes.string.isRequired,\n    render: PropTypes.func,\n  }),\n]);\n\nexport const DSDropdownMenuV2PropTypes = {\n  options: PropTypes.arrayOf(optionTypes).description('The array of option for the menu').omitValidation().isRequired,\n  isOpened: PropTypes.bool.description('Whether the dropdown menu is opened or not').isRequired,\n  onClickOutside: PropTypes.func\n    .description('Callback executed when you click outside the dropdown menu, or press the Esc key')\n    .defaultValue(() => null),\n  selectedOptions: PropTypes.object\n    .description(\n      'Object with the ids of the options as keys, and booleans as keys. Represents the state of the current selection in the dropdown menu',\n    )\n    .defaultValue({}),\n  onOptionClick: PropTypes.func\n    .description(\n      'Callback triggered when an item is clicked or pressed. We provide the next selected options, the clicked option and the event, in that order',\n    )\n    .defaultValue(() => null),\n  openedSubmenus: PropTypes.object\n    .description(\n      'Object with the ids of the submenus as keys, and booleans as keys. Represents the state of the current opened submenus',\n    )\n    .defaultValue({}),\n  onSubmenuToggle: PropTypes.func\n    .description(\n      'Callback triggered when a submenu is opened or closed. We provide the next opened submenus, the clicked one and the event, in that order',\n    )\n    .defaultValue(() => null),\n  startPlacementPreference: PropTypes.string\n    .description('Where to place the popper for the dropdown menu')\n    .defaultValue('bottom-start'),\n  placementOrderPreference: PropTypes.arrayOf(PropTypes.string)\n    .description('Placement priorities for the dropdown menu')\n    .defaultValue(['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end']),\n  customOffset: PropTypes.arrayOf(PropTypes.number)\n    .description('Custom offset for the dropdown menu')\n    .defaultValue([0, 4]),\n  wrapperStyles: PropTypes.object.description('Styling for the dropdown menu wrapper').defaultValue({}),\n  isLoading: PropTypes.bool\n    .description('Whether the dropdown menu should render the loading indicator')\n    .defaultValue(false),\n  zIndex: PropTypes.number.description('ZIndex for the popper').defaultValue(10),\n  HeaderComp: PropTypes.func\n    .description('Component to render as a header for the dropdown menu')\n    .defaultValue(undefined),\n  actionRef: PropTypes.object.description('Reference where all the exposed action callbacks will be exposed'),\n  minWidth: PropTypes.any.description('Minimum width for the dropdown menu').defaultValue(undefined),\n  maxHeight: PropTypes.any.description('Maximum height for the dropdown menu').defaultValue(undefined),\n  ...globalAttributesPropTypes,\n  onKeyDown: PropTypes.func.description('Callback executed when a key is pressed').defaultValue(() => null),\n  onMouseEnter: PropTypes.func\n    .description('Callback executed when the mouse enter the dropdown menu')\n    .defaultValue(() => null),\n  onMouseLeave: PropTypes.func\n    .description('Callback executed when the mouse leaves the dropdown menu')\n    .defaultValue(() => null),\n  isSkeleton: PropTypes.bool.description('Whether the dropdown menu should render the skeleton').defaultValue(false),\n} as WeakValidationMap<unknown>;\n\nexport const defaultProps: DSDropdownMenuT.DefaultProps = {\n  onClickOutside: () => null,\n  onKeyDown: () => null,\n  onMouseEnter: () => null,\n  onMouseLeave: () => null,\n  selectedOptions: {},\n  onOptionClick: () => null,\n  openedSubmenus: {},\n  onSubmenuToggle: () => null,\n  isLoading: false,\n  hasInput: false,\n  inputValue: '',\n  inputPlaceholder: 'Hint text',\n  onInputChange: () => null,\n  startPlacementPreference: 'bottom-start',\n  placementOrderPreference: ['bottom-start', 'top-start', 'right-start', 'right-end', 'left-start', 'left-end'],\n  customOffset: [0, 4],\n  wrapperStyles: {},\n  actionRef: { current: {} },\n  as: 'div',\n  isSkeleton: false,\n};\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/esm/styled.js

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Grid } from "@elliemae/ds-grid";
+import { styled, space, sizing, position, layout } from "@elliemae/ds-system";
+import { DSDropdownMenuName, DSDropdownMenuSlots } from "./exported-related/index.js";
+const StyledTriggerWrapper = styled("div", { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.ROOT })`
+  width: fit-content;
+  ${space}
+  ${sizing}
+  ${position}
+  ${layout}
+`;
+const StyledListBoxWrapper = styled("div", {
+  name: DSDropdownMenuName,
+  slot: DSDropdownMenuSlots.LISTBOX_WRAPPER
+})`
+  ${sizing}
+  padding: ${(props) => props.hasHeader ? 0 : "4px"} 0 4px 0;
+  overflow-y: auto;
+  background-color: white;
+  outline: none;
+  list-style: none;
+`;
+const StyledOptionListWrapper = styled("ul", {
+  name: DSDropdownMenuName,
+  slot: DSDropdownMenuSlots.OPTION_LIST_WRAPPER
+})`
+  position: relative;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  outline: none;
+`;
+const StyledLoadingWrapper = styled(Grid, {
+  name: DSDropdownMenuName,
+  slot: DSDropdownMenuSlots.LOADING_WRAPPER
+})`
+  height: ${(props) => props.theme.space.xxl};
+  min-width: ${(props) => props.minWidth}px;
+  background-color: white;
+  outline: none;
+`;
+const StyledEmptyStateWrapper = styled(Grid, {
+  name: DSDropdownMenuName,
+  slot: DSDropdownMenuSlots.EMPTY_STATE_WRAPPER
+})`
+  font-weight: ${(props) => props.theme.fontWeights.regular};
+  font-size: ${(props) => props.theme.fontSizes.value[500]};
+  color: ${(props) => props.theme.colors.neutral[500]};
+`;
+const StyledInputWrapper = styled(Grid)`
+  padding-top: ${(props) => props.hasHeader ? props.theme.space.xxs : 0};
+  padding-left: ${(props) => props.theme.space.xxs};
+  padding-right: ${(props) => props.theme.space.xxs};
+  padding-bottom: ${(props) => props.theme.space.xxs};
+
+  .em-ds-input {
+    :focus,
+    :hover {
+      outline: none !important;
+      border: none !important;
+      box-shadow: none !important;
+    }
+    :focus {
+      border: 1px solid ${(props) => props.theme.colors.brand[700]} !important;
+      box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]} !important;
+    }
+  }
+`;
+const StyledHeaderWrapper = styled(Grid, { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.HEADER_WRAPPER })`
+  width: 100%;
+  border-bottom: 1px solid ${(props) => props.theme.colors.neutral[300]};
+  color: ${(props) => props.theme.colors.neutral[500]};
+  font-size: 12px;
+  padding-left: ${(props) => props.theme.space.xxxs};
+  position: sticky;
+  top: 0;
+  z-index: 20;
+  background-color: white;
+  min-height: 16px;
+`;
+export {
+  StyledEmptyStateWrapper,
+  StyledHeaderWrapper,
+  StyledInputWrapper,
+  StyledListBoxWrapper,
+  StyledLoadingWrapper,
+  StyledOptionListWrapper,
+  StyledTriggerWrapper
+};
+//# sourceMappingURL=styled.js.map

package/dist/esm/styled.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { styled, space, sizing, position, layout } from '@elliemae/ds-system';\nimport type { LayoutProps, SpaceProps, SizingProps, PositionProps } from '@elliemae/ds-system';\nimport { DSDropdownMenuName, DSDropdownMenuSlots } from './exported-related/index.js';\n\nexport const StyledTriggerWrapper = styled('div', { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.ROOT })<\n  LayoutProps & SpaceProps & SizingProps & PositionProps\n>`\n  width: fit-content;\n  ${space}\n  ${sizing}\n  ${position}\n  ${layout}\n`;\n\nexport const StyledListBoxWrapper = styled('div', {\n  name: DSDropdownMenuName,\n  slot: DSDropdownMenuSlots.LISTBOX_WRAPPER,\n})<{ minWidth: SizingProps['minWidth']; maxHeight: SizingProps['maxHeight']; hasHeader: boolean }>`\n  ${sizing}\n  padding: ${(props) => (props.hasHeader ? 0 : '4px')} 0 4px 0;\n  overflow-y: auto;\n  background-color: white;\n  outline: none;\n  list-style: none;\n`;\n\nexport const StyledOptionListWrapper = styled('ul', {\n  name: DSDropdownMenuName,\n  slot: DSDropdownMenuSlots.OPTION_LIST_WRAPPER,\n})`\n  position: relative;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  outline: none;\n`;\n\nexport const StyledLoadingWrapper = styled(Grid, {\n  name: DSDropdownMenuName,\n  slot: DSDropdownMenuSlots.LOADING_WRAPPER,\n})<{ minWidth: number }>`\n  height: ${(props) => props.theme.space.xxl};\n  min-width: ${(props) => props.minWidth}px;\n  background-color: white;\n  outline: none;\n`;\n\nexport const StyledEmptyStateWrapper = styled(Grid, {\n  name: DSDropdownMenuName,\n  slot: DSDropdownMenuSlots.EMPTY_STATE_WRAPPER,\n})<{ minWidth: SizingProps['minWidth']; maxHeight: SizingProps['maxHeight'] }>`\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  font-size: ${(props) => props.theme.fontSizes.value[500]};\n  color: ${(props) => props.theme.colors.neutral[500]};\n`;\n\nexport const StyledInputWrapper = styled(Grid)<{ hasHeader: boolean }>`\n  padding-top: ${(props) => (props.hasHeader ? props.theme.space.xxs : 0)};\n  padding-left: ${(props) => props.theme.space.xxs};\n  padding-right: ${(props) => props.theme.space.xxs};\n  padding-bottom: ${(props) => props.theme.space.xxs};\n\n  .em-ds-input {\n    :focus,\n    :hover {\n      outline: none !important;\n      border: none !important;\n      box-shadow: none !important;\n    }\n    :focus {\n      border: 1px solid ${(props) => props.theme.colors.brand[700]} !important;\n      box-shadow: inset 0 0 0 1px ${(props) => props.theme.colors.brand[700]} !important;\n    }\n  }\n`;\n\nexport const StyledHeaderWrapper = styled(Grid, { name: DSDropdownMenuName, slot: DSDropdownMenuSlots.HEADER_WRAPPER })`\n  width: 100%;\n  border-bottom: 1px solid ${(props) => props.theme.colors.neutral[300]};\n  color: ${(props) => props.theme.colors.neutral[500]};\n  font-size: 12px;\n  padding-left: ${(props) => props.theme.space.xxxs};\n  position: sticky;\n  top: 0;\n  z-index: 20;\n  background-color: white;\n  min-height: 16px;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,YAAY;AACrB,SAAS,QAAQ,OAAO,QAAQ,UAAU,cAAc;AAExD,SAAS,oBAAoB,2BAA2B;AAEjD,MAAM,uBAAuB,OAAO,OAAO,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,KAAK,CAAC;AAAA;AAAA,IAI1G;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAGG,MAAM,uBAAuB,OAAO,OAAO;AAAA,EAChD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,IACG;AAAA,aACS,CAAC,UAAW,MAAM,YAAY,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOxC,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQM,MAAM,uBAAuB,OAAO,MAAM;AAAA,EAC/C,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,YACW,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,eAC1B,CAAC,UAAU,MAAM;AAAA;AAAA;AAAA;AAKzB,MAAM,0BAA0B,OAAO,MAAM;AAAA,EAClD,MAAM;AAAA,EACN,MAAM,oBAAoB;AAC5B,CAAC;AAAA,iBACgB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,eACrC,CAAC,UAAU,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA,WAC9C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAG7C,MAAM,qBAAqB,OAAO,IAAI;AAAA,iBAC5B,CAAC,UAAW,MAAM,YAAY,MAAM,MAAM,MAAM,MAAM;AAAA,kBACrD,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,mBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,oBAC5B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAUvB,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,oCAC7B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAKpE,MAAM,sBAAsB,OAAO,MAAM,EAAE,MAAM,oBAAoB,MAAM,oBAAoB,eAAe,CAAC;AAAA;AAAA,6BAEzF,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA,WAC3D,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,kBAElC,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/dist/esm/utils/findInCircularList.js

@@ -0,0 +1,12 @@
+import * as React from "react";
+const findInCircularList = (list, from, criteria, step = 1) => {
+  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {
+    if (criteria(list[i]))
+      return i;
+  }
+  return from;
+};
+export {
+  findInCircularList
+};
+//# sourceMappingURL=findInCircularList.js.map

package/dist/esm/utils/findInCircularList.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/findInCircularList.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export const findInCircularList = <T>(list: T[], from: number, criteria: (item: T) => boolean, step = 1): number => {\n  for (let i = (from + step + list.length) % list.length; i !== from; i = (i + step + list.length) % list.length) {\n    if (criteria(list[i])) return i;\n  }\n  return from; // return same item\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAhB,MAAM,qBAAqB,CAAI,MAAW,MAAc,UAAgC,OAAO,MAAc;AAClH,WAAS,KAAK,OAAO,OAAO,KAAK,UAAU,KAAK,QAAQ,MAAM,MAAM,KAAK,IAAI,OAAO,KAAK,UAAU,KAAK,QAAQ;AAC9G,QAAI,SAAS,KAAK,CAAC,CAAC;AAAG,aAAO;AAAA,EAChC;AACA,SAAO;AACT;",
+  "names": []
+}

package/dist/esm/utils/index.js

@@ -0,0 +1,5 @@
+import * as React from "react";
+export * from "./findInCircularList.js";
+export * from "./isOptionFocuseable.js";
+export * from "./manageOpenedSubmenus.js";
+//# sourceMappingURL=index.js.map

package/dist/esm/utils/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './findInCircularList.js';\nexport * from './isOptionFocuseable.js';\nexport * from './manageOpenedSubmenus.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,cAAc;AACd,cAAc;",
+  "names": []
+}

package/dist/esm/utils/isOptionFocuseable.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+const isOptionFocuseable = (opt) => !["section", "separator"].includes(opt.type) && !("disabled" in opt && opt.disabled);
+export {
+  isOptionFocuseable
+};
+//# sourceMappingURL=isOptionFocuseable.js.map

package/dist/esm/utils/isOptionFocuseable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/isOptionFocuseable.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\nexport const isOptionFocuseable = (opt: DSDropdownMenuT.Item): boolean =>\n  !['section', 'separator'].includes(opt.type) && !('disabled' in opt && opt.disabled);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEhB,MAAM,qBAAqB,CAAC,QACjC,CAAC,CAAC,WAAW,WAAW,EAAE,SAAS,IAAI,IAAI,KAAK,EAAE,cAAc,OAAO,IAAI;",
+  "names": []
+}

package/dist/esm/utils/manageOpenedSubmenus.js

@@ -0,0 +1,37 @@
+import * as React from "react";
+const isSubmenu = (item) => item.type === "submenu" || item.type === "singleWithSubmenu";
+const buildItemToParentObject = (options, parent = "__root") => {
+  let obj = {};
+  options?.forEach((opt) => {
+    if (isSubmenu(opt)) {
+      obj[opt.dsId] = parent;
+      if ("options" in opt) {
+        obj = { ...obj, ...buildItemToParentObject(opt.options, opt.dsId) };
+      }
+    }
+  });
+  return obj;
+};
+const manageOpenedSubmenus = (options, selectedOptions, clickedOption) => {
+  if (!isSubmenu(clickedOption)) {
+    return selectedOptions;
+  }
+  if (selectedOptions[clickedOption.dsId] === false) {
+    return selectedOptions;
+  }
+  const itemToParent = buildItemToParentObject(options);
+  const nextSelectedOptions = { ...selectedOptions };
+  Object.keys(itemToParent).forEach((item) => {
+    nextSelectedOptions[item] = false;
+  });
+  let currentItem = clickedOption.dsId;
+  while (currentItem !== "__root") {
+    nextSelectedOptions[currentItem] = true;
+    currentItem = itemToParent[currentItem];
+  }
+  return nextSelectedOptions;
+};
+export {
+  manageOpenedSubmenus
+};
+//# sourceMappingURL=manageOpenedSubmenus.js.map

package/dist/esm/utils/manageOpenedSubmenus.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/utils/manageOpenedSubmenus.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { DSDropdownMenuT } from '../react-desc-prop-types.js';\n\nconst isSubmenu = (item: DSDropdownMenuT.Item): boolean => item.type === 'submenu' || item.type === 'singleWithSubmenu';\n\nconst buildItemToParentObject = (options: DSDropdownMenuT.Item[], parent = '__root'): Record<string, string> => {\n  let obj: Record<string, string> = {};\n  options?.forEach((opt) => {\n    if (isSubmenu(opt)) {\n      obj[opt.dsId] = parent;\n      if ('options' in opt) {\n        obj = { ...obj, ...buildItemToParentObject(opt.options, opt.dsId) };\n      }\n    }\n  });\n  return obj;\n};\n\nexport const manageOpenedSubmenus = (\n  options: DSDropdownMenuT.Item[],\n  selectedOptions: Record<string, boolean>,\n  clickedOption: DSDropdownMenuT.Item,\n): Record<string, boolean> => {\n  // If this options is not a submenu, do nothing\n  if (!isSubmenu(clickedOption)) {\n    return selectedOptions;\n  }\n\n  // If we are closing this submenu, do nothing\n  if (selectedOptions[clickedOption.dsId] === false) {\n    return selectedOptions;\n  }\n\n  // Get the item --> parent relationships of the submenus\n  const itemToParent = buildItemToParentObject(options);\n\n  // Clone the selected options\n  const nextSelectedOptions = { ...selectedOptions };\n\n  // Close all submenus\n  Object.keys(itemToParent).forEach((item) => {\n    nextSelectedOptions[item] = false;\n  });\n\n  // Open this submenu and all of it's parents\n  let currentItem = clickedOption.dsId;\n  while (currentItem !== '__root') {\n    nextSelectedOptions[currentItem] = true;\n    currentItem = itemToParent[currentItem];\n  }\n\n  return nextSelectedOptions;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB,MAAM,YAAY,CAAC,SAAwC,KAAK,SAAS,aAAa,KAAK,SAAS;AAEpG,MAAM,0BAA0B,CAAC,SAAiC,SAAS,aAAqC;AAC9G,MAAI,MAA8B,CAAC;AACnC,WAAS,QAAQ,CAAC,QAAQ;AACxB,QAAI,UAAU,GAAG,GAAG;AAClB,UAAI,IAAI,IAAI,IAAI;AAChB,UAAI,aAAa,KAAK;AACpB,cAAM,EAAE,GAAG,KAAK,GAAG,wBAAwB,IAAI,SAAS,IAAI,IAAI,EAAE;AAAA,MACpE;AAAA,IACF;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEO,MAAM,uBAAuB,CAClC,SACA,iBACA,kBAC4B;AAE5B,MAAI,CAAC,UAAU,aAAa,GAAG;AAC7B,WAAO;AAAA,EACT;AAGA,MAAI,gBAAgB,cAAc,IAAI,MAAM,OAAO;AACjD,WAAO;AAAA,EACT;AAGA,QAAM,eAAe,wBAAwB,OAAO;AAGpD,QAAM,sBAAsB,EAAE,GAAG,gBAAgB;AAGjD,SAAO,KAAK,YAAY,EAAE,QAAQ,CAAC,SAAS;AAC1C,wBAAoB,IAAI,IAAI;AAAA,EAC9B,CAAC;AAGD,MAAI,cAAc,cAAc;AAChC,SAAO,gBAAgB,UAAU;AAC/B,wBAAoB,WAAW,IAAI;AACnC,kBAAc,aAAa,WAAW;AAAA,EACxC;AAEA,SAAO;AACT;",
+  "names": []
+}

package/dist/types/DSDropdownMenu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { DSDropdownMenuT } from './react-desc-prop-types.js';
+declare const DSDropdownMenuV2: React.ComponentType<DSDropdownMenuT.Props>;
+declare const DSDropdownMenuV2WithSchema: import("@elliemae/ds-props-helpers/dist/types/propTypes/types.js").DocumentedReactComponent<DSDropdownMenuT.Props>;
+export { DSDropdownMenuV2, DSDropdownMenuV2WithSchema };

package/dist/types/DropdownMenuContext.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { DSDropdownMenuT } from './react-desc-prop-types.js';
+export declare const DSDropdownMenuContext: import("react").Context<DSDropdownMenuT.CTX>;

package/dist/types/DropdownMenuDataTestId.d.ts

@@ -0,0 +1,7 @@
+export declare const DropdownMenuDataTestId: {
+    TRIGGER_WRAPPER: string;
+    LISTBOX: string;
+    MENU_WRAPPER: string;
+    LOADING: string;
+    OPTION: string;
+};

package/dist/types/config/useDropdownMenuConfig.d.ts

@@ -0,0 +1,2 @@
+import type { DSDropdownMenuT } from '../react-desc-prop-types.js';
+export declare const useDropdownMenuConfig: (props: DSDropdownMenuT.Props, self: React.ComponentType<DSDropdownMenuT.Props>) => DSDropdownMenuT.CTX;

package/dist/types/config/useReferenceConfig.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const useReferenceConfig: () => {
+    triggerReferenceElement: HTMLDivElement | null;
+    setTriggerReferenceElement: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null>>;
+    listboxReference: import("react").RefObject<HTMLDivElement>;
+    inputReference: import("react").RefObject<HTMLInputElement>;
+};

package/dist/types/exported-related/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const DSDropdownMenuName = "DSDropdownMenu";
+export declare const DSDropdownMenuSlots: {
+    ROOT: string;
+    LOADING_WRAPPER: string;
+    LISTBOX_WRAPPER: string;
+    HEADER_WRAPPER: string;
+    OPTION_LIST_WRAPPER: string;
+    EMPTY_STATE_WRAPPER: string;
+};

package/dist/types/exported-related/index.d.ts

@@ -0,0 +1 @@
+export * from './constants.js';

package/dist/types/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useAutofocusContainerOnOpen.js';
+export * from './useDropdownMenuItemHandlers.js';
+export * from './useGetOptionSpecialAttributes.js';

package/dist/types/hooks/useAutofocusContainerOnOpen.d.ts

@@ -0,0 +1 @@
+export declare const useAutofocusContainerOnOpen: () => void;

package/dist/types/hooks/useDropdownListboxHandlers.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+type UseDropdownListboxHandlersType = () => {
+    onKeyDown: React.KeyboardEventHandler;
+    onMouseEnter: React.MouseEventHandler;
+    onMouseLeave?: React.MouseEventHandler;
+};
+export declare const useDropdownListboxHandlers: UseDropdownListboxHandlersType;
+export {};

package/dist/types/hooks/useDropdownMenuItemHandlers.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+import type { DSDropdownMenuT } from '../react-desc-prop-types.js';
+type UseDropdownMenuItemHandlersType = (option: DSDropdownMenuT.Item) => {
+    onClick: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onSubmenuOpen: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onSubmenuClose: (e: React.MouseEvent | React.KeyboardEvent) => void;
+    onDropdownKeyDown: React.KeyboardEventHandler;
+    onMouseEnter: React.MouseEventHandler;
+    onMouseLeave: React.MouseEventHandler;
+};
+export declare const useDropdownMenuItemHandlers: UseDropdownMenuItemHandlersType;
+export {};

package/dist/types/hooks/useGetOptionSpecialAttributes.d.ts

@@ -0,0 +1,3 @@
+export declare const useGetOptionSpecialAttributes: () => {
+    optionsShouldHavePadding: boolean;
+};

package/dist/types/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DSDropdownMenu.js';
+export * from './exported-related/index.js';
+export type { DSDropdownMenuT } from './react-desc-prop-types.js';
+export { DropdownMenuDataTestId } from './DropdownMenuDataTestId.js';

package/dist/types/parts/DropdownMenuContent.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DropdownMenuContent: React.ComponentType<Record<string, never>>;

package/dist/types/parts/DropdownMenuEmptyState.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SizingProps } from '@elliemae/ds-system';
+interface DropdownMenuEmptyStateProps {
+    minWidth: SizingProps['minWidth'];
+    maxHeight: SizingProps['maxHeight'];
+}
+export declare const DropdownMenuEmptyState: React.FC<DropdownMenuEmptyStateProps>;
+export {};

package/dist/types/parts/DropdownMenuItemFactory.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { DSDropdownMenuT } from '../react-desc-prop-types.js';
+export declare const DropdownMenuItemFactory: React.ComponentType<{
+    option: DSDropdownMenuT.Item;
+    style?: Record<string, unknown>;
+    innerRef?: (el: HTMLElement) => void;
+    optionsShouldHavePadding: boolean;
+}>;

package/dist/types/parts/DropdownMenuListBox.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DropdownMenuListBox: React.ComponentType<Record<string, never>>;

package/dist/types/parts/DropdownMenuLoading.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DropdownMenuLoading: React.ComponentType<Record<string, never>>;

package/dist/types/parts/DropdownMenuSkeleton.d.ts

@@ -0,0 +1 @@
+export declare const DropdownMenuSkeleton: () => import("react/jsx-runtime").JSX.Element;