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

package/dist/esm/parts/DropdownMenuItemFactory.js

@@ -0,0 +1,85 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import {
+  ActionMenuItem,
+  SingleMenuItem,
+  MultiMenuItem,
+  SubmenuItem,
+  Separator,
+  Section,
+  SingleWithSubmenuItem,
+  SkeletonMenuItem
+} from "@elliemae/ds-legacy-menu-items";
+import { DSDropdownMenuContext } from "../DropdownMenuContext.js";
+import { useDropdownMenuItemHandlers } from "../hooks/index.js";
+const menuItemMap = {
+  action: ActionMenuItem,
+  single: SingleMenuItem,
+  checkbox: MultiMenuItem,
+  submenu: SubmenuItem,
+  separator: Separator,
+  section: Section,
+  singleWithSubmenu: SingleWithSubmenuItem,
+  skeleton: SkeletonMenuItem
+};
+const DropdownMenuItemFactory = ({ option, style, innerRef, optionsShouldHavePadding }) => {
+  const {
+    props: { selectedOptions, onOptionClick, openedSubmenus, onSubmenuToggle, onClickOutside },
+    activeDescendant,
+    DSDropdownMenuV2
+  } = useContext(DSDropdownMenuContext);
+  if (!(option.type in menuItemMap)) {
+    throw new Error(
+      `Provided option type (${option.type}) is not valid. Please provide one of ${Object.keys(menuItemMap).join(
+        ", "
+      )}`
+    );
+  }
+  const type = option.type;
+  const Component = menuItemMap[type];
+  const { onDropdownKeyDown, ...handlers } = useDropdownMenuItemHandlers(option);
+  const itemProps = useMemo(
+    () => ({
+      ...handlers,
+      innerRef,
+      isActive: activeDescendant === option.dsId,
+      isSelected: selectedOptions ? !!selectedOptions[option.dsId] : false,
+      isSubmenuOpened: openedSubmenus ? !!openedSubmenus[option.dsId] : false,
+      tabIndex: -1,
+      optionsShouldHavePadding,
+      wrapperStyles: style,
+      Dropdown: DSDropdownMenuV2,
+      dropdownProps: {
+        ...option,
+        options: option.type === "submenu" || option.type === "singleWithSubmenu" ? option.options : [],
+        onClickOutside,
+        onOptionClick,
+        onSubmenuToggle,
+        selectedOptions,
+        openedSubmenus,
+        onKeyDown: onDropdownKeyDown
+      }
+    }),
+    [
+      handlers,
+      innerRef,
+      activeDescendant,
+      option,
+      selectedOptions,
+      openedSubmenus,
+      optionsShouldHavePadding,
+      style,
+      DSDropdownMenuV2,
+      onClickOutside,
+      onOptionClick,
+      onSubmenuToggle,
+      onDropdownKeyDown
+    ]
+  );
+  return /* @__PURE__ */ jsx(Component, { ...option, ...itemProps });
+};
+export {
+  DropdownMenuItemFactory
+};
+//# sourceMappingURL=DropdownMenuItemFactory.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/DropdownMenuItemFactory.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\nimport React, { useContext, useMemo } from 'react';\nimport {\n  ActionMenuItem,\n  SingleMenuItem,\n  MultiMenuItem,\n  SubmenuItem,\n  Separator,\n  Section,\n  SingleWithSubmenuItem,\n  SkeletonMenuItem,\n} from '@elliemae/ds-legacy-menu-items';\nimport type { DSDropdownMenuT } from '../react-desc-prop-types.js';\nimport { DSDropdownMenuContext } from '../DropdownMenuContext.js';\nimport { useDropdownMenuItemHandlers } from '../hooks/index.js';\n\nconst menuItemMap = {\n  action: ActionMenuItem,\n  single: SingleMenuItem,\n  checkbox: MultiMenuItem,\n  submenu: SubmenuItem,\n  separator: Separator,\n  section: Section,\n  singleWithSubmenu: SingleWithSubmenuItem,\n  skeleton: SkeletonMenuItem,\n};\n\nexport const DropdownMenuItemFactory: React.ComponentType<{\n  option: DSDropdownMenuT.Item;\n  style?: Record<string, unknown>;\n  innerRef?: (el: HTMLElement) => void;\n  optionsShouldHavePadding: boolean;\n}> = ({ option, style, innerRef, optionsShouldHavePadding }): JSX.Element => {\n  const {\n    props: { selectedOptions, onOptionClick, openedSubmenus, onSubmenuToggle, onClickOutside },\n    activeDescendant,\n    DSDropdownMenuV2,\n  } = useContext(DSDropdownMenuContext);\n\n  if (!(option.type in menuItemMap)) {\n    throw new Error(\n      `Provided option type (${option.type}) is not valid. Please provide one of ${Object.keys(menuItemMap).join(\n        ', ',\n      )}`,\n    );\n  }\n  const type = option.type as\n    | 'action'\n    | 'single'\n    | 'checkbox'\n    | 'separator'\n    | 'section'\n    | 'skeleton'\n    | 'singleWithSubmenu';\n\n  const Component = menuItemMap[type];\n\n  const { onDropdownKeyDown, ...handlers } = useDropdownMenuItemHandlers(option);\n\n  const itemProps = useMemo(\n    () => ({\n      ...handlers,\n      innerRef,\n      isActive: activeDescendant === option.dsId,\n      isSelected: selectedOptions ? !!selectedOptions[option.dsId] : false,\n      isSubmenuOpened: openedSubmenus ? !!openedSubmenus[option.dsId] : false,\n      tabIndex: -1 as const,\n      optionsShouldHavePadding,\n      wrapperStyles: style,\n      Dropdown: DSDropdownMenuV2,\n      dropdownProps: {\n        ...option,\n        options: option.type === 'submenu' || option.type === 'singleWithSubmenu' ? option.options : [],\n        onClickOutside,\n        onOptionClick,\n        onSubmenuToggle,\n        selectedOptions,\n        openedSubmenus,\n        onKeyDown: onDropdownKeyDown,\n      },\n    }),\n    [\n      handlers,\n      innerRef,\n      activeDescendant,\n      option,\n      selectedOptions,\n      openedSubmenus,\n      optionsShouldHavePadding,\n      style,\n      DSDropdownMenuV2,\n      onClickOutside,\n      onOptionClick,\n      onSubmenuToggle,\n      onDropdownKeyDown,\n    ],\n  );\n\n  return <Component {...option} {...itemProps} />;\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACkGd;AAjGT,SAAgB,YAAY,eAAe;AAC3C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,SAAS,6BAA6B;AACtC,SAAS,mCAAmC;AAE5C,MAAM,cAAc;AAAA,EAClB,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,mBAAmB;AAAA,EACnB,UAAU;AACZ;AAEO,MAAM,0BAKR,CAAC,EAAE,QAAQ,OAAO,UAAU,yBAAyB,MAAmB;AAC3E,QAAM;AAAA,IACJ,OAAO,EAAE,iBAAiB,eAAe,gBAAgB,iBAAiB,eAAe;AAAA,IACzF;AAAA,IACA;AAAA,EACF,IAAI,WAAW,qBAAqB;AAEpC,MAAI,EAAE,OAAO,QAAQ,cAAc;AACjC,UAAM,IAAI;AAAA,MACR,yBAAyB,OAAO,6CAA6C,OAAO,KAAK,WAAW,EAAE;AAAA,QACpG;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,QAAM,OAAO,OAAO;AASpB,QAAM,YAAY,YAAY,IAAI;AAElC,QAAM,EAAE,mBAAmB,GAAG,SAAS,IAAI,4BAA4B,MAAM;AAE7E,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL,GAAG;AAAA,MACH;AAAA,MACA,UAAU,qBAAqB,OAAO;AAAA,MACtC,YAAY,kBAAkB,CAAC,CAAC,gBAAgB,OAAO,IAAI,IAAI;AAAA,MAC/D,iBAAiB,iBAAiB,CAAC,CAAC,eAAe,OAAO,IAAI,IAAI;AAAA,MAClE,UAAU;AAAA,MACV;AAAA,MACA,eAAe;AAAA,MACf,UAAU;AAAA,MACV,eAAe;AAAA,QACb,GAAG;AAAA,QACH,SAAS,OAAO,SAAS,aAAa,OAAO,SAAS,sBAAsB,OAAO,UAAU,CAAC;AAAA,QAC9F;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAO,oBAAC,aAAW,GAAG,QAAS,GAAG,WAAW;AAC/C;",
+  "names": []
+}

package/dist/esm/parts/DropdownMenuListBox.js

@@ -0,0 +1,105 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from "react";
+import { DSInputText } from "@elliemae/ds-legacy-form-input-text";
+import { DSDropdownMenuContext } from "../DropdownMenuContext.js";
+import { DropdownMenuDataTestId } from "../DropdownMenuDataTestId.js";
+import { useDropdownListboxHandlers } from "../hooks/useDropdownListboxHandlers.js";
+import { StyledInputWrapper, StyledListBoxWrapper, StyledHeaderWrapper, StyledOptionListWrapper } from "../styled.js";
+import { DropdownMenuEmptyState } from "./DropdownMenuEmptyState.js";
+import { DropdownMenuItemFactory } from "./DropdownMenuItemFactory.js";
+import { DropdownMenuSkeleton } from "./DropdownMenuSkeleton.js";
+import { useAutofocusContainerOnOpen, useGetOptionSpecialAttributes } from "../hooks/index.js";
+const DropdownMenuListBox = () => {
+  const ctx = useContext(DSDropdownMenuContext);
+  const {
+    triggerReferenceElement,
+    props: {
+      isSkeleton,
+      options,
+      hasInput,
+      inputValue,
+      onInputChange,
+      HeaderComp,
+      minWidth: userMinWidth,
+      maxHeight: userMaxHeight
+    },
+    activeDescendant,
+    listboxReference,
+    inputReference,
+    virtualListHelpers: { totalSize, virtualItems }
+  } = ctx;
+  useAutofocusContainerOnOpen();
+  const { onKeyDown, onMouseEnter, onMouseLeave } = useDropdownListboxHandlers();
+  const { optionsShouldHavePadding } = useGetOptionSpecialAttributes();
+  const minWidth = useMemo(
+    () => userMinWidth !== void 0 ? userMinWidth : Math.max(triggerReferenceElement?.offsetWidth ?? 0, 162),
+    [triggerReferenceElement?.offsetWidth, userMinWidth]
+  );
+  return useMemo(() => {
+    if (virtualItems.length === 0) {
+      return /* @__PURE__ */ jsx(DropdownMenuEmptyState, { minWidth, maxHeight: userMaxHeight || 400 });
+    }
+    return /* @__PURE__ */ jsx(
+      StyledListBoxWrapper,
+      {
+        minWidth,
+        maxHeight: userMaxHeight || 400,
+        ref: listboxReference,
+        tabIndex: 0,
+        "data-testid": DropdownMenuDataTestId.MENU_WRAPPER,
+        onKeyDown,
+        onMouseEnter,
+        onMouseLeave,
+        hasHeader: !!HeaderComp,
+        children: isSkeleton ? /* @__PURE__ */ jsx(DropdownMenuSkeleton, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          HeaderComp && /* @__PURE__ */ jsx(StyledHeaderWrapper, { alignItems: "center", children: /* @__PURE__ */ jsx(HeaderComp, { ctx }) }),
+          hasInput && /* @__PURE__ */ jsx(StyledInputWrapper, { hasHeader: !!HeaderComp, children: /* @__PURE__ */ jsx(DSInputText, { value: inputValue, onChange: onInputChange, innerRef: inputReference }) }, "dropdown-listbox-input-wrapper"),
+          /* @__PURE__ */ jsx(
+            StyledOptionListWrapper,
+            {
+              "aria-activedescendant": activeDescendant,
+              "data-testid": DropdownMenuDataTestId.LISTBOX,
+              role: "listbox",
+              "aria-label": "List of options",
+              style: { height: totalSize || 16 },
+              children: virtualItems.map((vItem) => /* @__PURE__ */ jsx(
+                DropdownMenuItemFactory,
+                {
+                  option: options[vItem.index],
+                  style: { position: "absolute", top: vItem.start, left: 0, width: "100%" },
+                  innerRef: vItem.measureRef,
+                  optionsShouldHavePadding
+                },
+                `dropdown-listbox-option-${options[vItem.index].dsId}`
+              ))
+            }
+          )
+        ] })
+      }
+    );
+  }, [
+    HeaderComp,
+    activeDescendant,
+    ctx,
+    hasInput,
+    inputReference,
+    inputValue,
+    isSkeleton,
+    listboxReference,
+    minWidth,
+    onInputChange,
+    onKeyDown,
+    onMouseEnter,
+    onMouseLeave,
+    options,
+    optionsShouldHavePadding,
+    totalSize,
+    userMaxHeight,
+    virtualItems
+  ]);
+};
+export {
+  DropdownMenuListBox
+};
+//# sourceMappingURL=DropdownMenuListBox.js.map

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-legacy-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        ref={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,KAAK;AAAA,QACL,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-legacy-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",
+      "aria-busy": "true",
+      ref: loadingRef,
+      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-legacy-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      aria-busy=\"true\"\n      ref={loadingRef}\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,aAAU;AAAA,MACV,KAAK;AAAA,MACL;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-legacy-menu-items";
+import { Grid } from "@elliemae/ds-legacy-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-legacy-menu-items';\nimport { Grid } from '@elliemae/ds-legacy-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-legacy-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-legacy-props-helpers';\nimport type { SizingProps } from '@elliemae/ds-legacy-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-legacy-grid";
+import { styled, space, sizing, position, layout } from "@elliemae/ds-legacy-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-legacy-grid';\nimport { styled, space, sizing, position, layout } from '@elliemae/ds-legacy-system';\nimport type { LayoutProps, SpaceProps, SizingProps, PositionProps } from '@elliemae/ds-legacy-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