@elliemae/ds-menu-button 3.39.0-rc.1

package/dist/esm/DSMenuButton.js

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { describe } from "@elliemae/ds-props-helpers";
+import { DSDMenuButtonPropTypesSchema } from "./react-desc-prop-types.js";
+import { useDSMenuButton } from "./config/useMenuButton.js";
+import { DSMenuButtonName } from "./constants/index.js";
+import { MenuButtonContext } from "./DSMenuButtonCTX.js";
+import { MenuButtonContent } from "./parts/MenuButtonContent.js";
+const DSMenuButton = (props) => {
+  const ctx = useDSMenuButton(props);
+  return /* @__PURE__ */ jsx(MenuButtonContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx(MenuButtonContent, {}) });
+};
+DSMenuButton.displayName = DSMenuButtonName;
+const DSMenuButtonWithSchema = describe(DSMenuButton);
+DSMenuButtonWithSchema.propTypes = DSDMenuButtonPropTypesSchema;
+export {
+  DSMenuButton,
+  DSMenuButtonWithSchema
+};
+//# sourceMappingURL=DSMenuButton.js.map

package/dist/esm/DSMenuButton.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenuButton.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { type MenuButtonT, DSDMenuButtonPropTypesSchema } from './react-desc-prop-types.js';\nimport { useDSMenuButton } from './config/useMenuButton.js';\nimport { DSMenuButtonName } from './constants/index.js';\nimport { MenuButtonContext } from './DSMenuButtonCTX.js';\nimport { MenuButtonContent } from './parts/MenuButtonContent.js';\n\nconst DSMenuButton = <T extends object = object>(props: MenuButtonT.Props<T>) => {\n  const ctx = useDSMenuButton(props);\n\n  return (\n    <MenuButtonContext.Provider value={ctx}>\n      <MenuButtonContent />\n    </MenuButtonContext.Provider>\n  );\n};\n\nDSMenuButton.displayName = DSMenuButtonName;\nconst DSMenuButtonWithSchema = describe(DSMenuButton);\nDSMenuButtonWithSchema.propTypes = DSDMenuButtonPropTypesSchema;\n\nexport { DSMenuButton, DSMenuButtonWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACajB;AAZN,SAAS,gBAAgB;AACzB,SAA2B,oCAAoC;AAC/D,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,yBAAyB;AAClC,SAAS,yBAAyB;AAElC,MAAM,eAAe,CAA4B,UAAgC;AAC/E,QAAM,MAAM,gBAAgB,KAAK;AAEjC,SACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,KACjC,8BAAC,qBAAkB,GACrB;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "names": []
+}

package/dist/esm/DSMenuButtonCTX.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import React2 from "react";
+const defaultContext = {};
+const MenuButtonContext = React2.createContext(defaultContext);
+export {
+  MenuButtonContext
+};
+//# sourceMappingURL=DSMenuButtonCTX.js.map

package/dist/esm/DSMenuButtonCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/DSMenuButtonCTX.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport type { MenuButtonT } from './react-desc-prop-types.js';\ninterface MenuButtonContextProps<T extends object = object> {\n  focusedOption: string | null;\n  setFocusedOption: React.Dispatch<React.SetStateAction<string | null>>;\n  selectedKeys: string[];\n  onSelectionChange: (selectedKeys: string[], parentId: string, item: MenuButtonT.Item) => void;\n  propsWithDefault: MenuButtonT.InternalProps<T>;\n}\n\nconst defaultContext = {} as MenuButtonContextProps<object>;\n\nexport const MenuButtonContext = React.createContext(defaultContext);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAUlB,MAAM,iBAAiB,CAAC;AAEjB,MAAM,oBAAoBA,OAAM,cAAc,cAAc;",
+  "names": ["React"]
+}

package/dist/esm/config/useMenuButton.js

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { useMemo, useState } from "react";
+import { useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { DSDMenuButtonPropTypes, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const useDSMenuButton = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSDMenuButtonPropTypes);
+  const { selectedKeys, onSelectionChange } = propsWithDefault;
+  const [focusedOption, setFocusedOption] = useState(null);
+  return useMemo(
+    () => ({
+      propsWithDefault,
+      focusedOption,
+      setFocusedOption,
+      selectedKeys,
+      onSelectionChange
+    }),
+    [focusedOption, propsWithDefault, selectedKeys, onSelectionChange]
+  );
+};
+export {
+  useDSMenuButton
+};
+//# sourceMappingURL=useMenuButton.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useMenuButton.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type MenuButtonT, DSDMenuButtonPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSMenuButton = <T extends object = object>(propsFromUser: MenuButtonT.Props<T>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<MenuButtonT.InternalProps<T>>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSDMenuButtonPropTypes);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  const { selectedKeys, onSelectionChange } = propsWithDefault;\n  const [focusedOption, setFocusedOption] = useState<string | null>(null);\n\n  return useMemo(\n    () => ({\n      propsWithDefault,\n      focusedOption,\n      setFocusedOption,\n      selectedKeys,\n      onSelectionChange,\n    }),\n    [focusedOption, propsWithDefault, selectedKeys, onSelectionChange],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,gBAAgB;AAClC,SAAS,oCAAoC;AAC7C,SAA2B,wBAAwB,oBAAoB;AACvE,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,CAA4B,kBAAwC;AAIjG,QAAM,mBAAmB,6BAA2D,eAAe,YAAY;AAC/G,mBAAiB,kBAAkB,sBAAsB;AAMzD,QAAM,EAAE,cAAc,kBAAkB,IAAI;AAC5C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AAEtE,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,eAAe,kBAAkB,cAAc,iBAAiB;AAAA,EACnE;AACF;",
+  "names": []
+}

package/dist/esm/config/useValidateProps.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { useValidateTypescriptPropTypes } from "@elliemae/ds-props-helpers";
+import { DSMenuButtonName } from "../constants/index.js";
+const useValidateProps = (props, propTypes) => {
+  useValidateTypescriptPropTypes(props, propTypes, DSMenuButtonName);
+};
+export {
+  useValidateProps
+};
+//# sourceMappingURL=useValidateProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useValidateProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useValidateTypescriptPropTypes } from '@elliemae/ds-props-helpers';\nimport type { WeakValidationMap } from 'react';\nimport { type MenuButtonT } from '../react-desc-prop-types.js';\nimport { DSMenuButtonName } from '../constants/index.js';\n\nexport const useValidateProps = <T extends object = object>(\n  props: MenuButtonT.InternalProps<T>,\n  propTypes: WeakValidationMap<unknown>,\n): void => {\n  // we validate the \"required if\" via 'isRequiredIf from our custom PropTypes\n  useValidateTypescriptPropTypes(props, propTypes, DSMenuButtonName);\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,sCAAsC;AAG/C,SAAS,wBAAwB;AAE1B,MAAM,mBAAmB,CAC9B,OACA,cACS;AAET,iCAA+B,OAAO,WAAW,gBAAgB;AACnE;",
+  "names": []
+}

package/dist/esm/constants/index.js

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSMenuButtonName = "DSMenuButton";
+const MENU_BUTTON_SLOTS = {
+  root: "root"
+};
+const MENU_BUTTON_DATATEST_ID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);
+export {
+  DSMenuButtonName,
+  MENU_BUTTON_DATATEST_ID,
+  MENU_BUTTON_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = 'DSMenuButton';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_SLOTS = {\n  root: 'root',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_DATATEST_ID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAGzB,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AACR;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
+  "names": []
+}

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { DSMenuButton, DSMenuButtonWithSchema } from "./DSMenuButton.js";
+import { DSMenuButtonName, MENU_BUTTON_DATATEST_ID, MENU_BUTTON_SLOTS } from "./constants/index.js";
+export {
+  DSMenuButton,
+  DSMenuButtonName,
+  DSMenuButtonWithSchema,
+  MENU_BUTTON_DATATEST_ID,
+  MENU_BUTTON_SLOTS
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type MenuButtonT } from './react-desc-prop-types.js';\nexport { DSMenuButtonName, MENU_BUTTON_DATATEST_ID, MENU_BUTTON_SLOTS } from './constants/index.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;AAErD,SAAS,kBAAkB,yBAAyB,yBAAyB;",
+  "names": []
+}

package/dist/esm/package.json

@@ -0,0 +1,7 @@
+{
+  "type": "module",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

package/dist/esm/parts/ItemFactory.js

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { MenuItem, Section, Separator } from "./MenuItem.js";
+const ItemFactory = ({
+  item,
+  innerRef,
+  onFocus,
+  tabIndex,
+  level,
+  selectionMode,
+  parentId
+}) => {
+  if (item.type === "separator") {
+    return /* @__PURE__ */ jsx(Separator, {});
+  }
+  if (item.type === "section") {
+    return /* @__PURE__ */ jsx(Section, { item });
+  }
+  return /* @__PURE__ */ jsx(
+    MenuItem,
+    {
+      item,
+      innerRef,
+      onFocus,
+      tabIndex,
+      level,
+      parentId,
+      selectionMode
+    },
+    item.dsId
+  );
+};
+export {
+  ItemFactory
+};
+//# sourceMappingURL=ItemFactory.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/ItemFactory.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable arrow-body-style */\nimport React from 'react';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { MenuItem, Section, Separator } from './MenuItem.js';\n\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\ninterface ItemFactoryProps {\n  item: MenuButtonT.Item;\n  level: number;\n  selectionMode?: 'single' | 'multiple';\n  parentId?: string;\n  tabIndex: TypescriptHelpersT.WCAGTabIndex;\n  onFocus: React.FocusEventHandler;\n  innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n}\n\nexport const ItemFactory: React.FC<ItemFactoryProps> = ({\n  item,\n  innerRef,\n  onFocus,\n  tabIndex,\n  level,\n  selectionMode,\n  parentId,\n}) => {\n  if (item.type === 'separator') {\n    return <Separator />;\n  }\n  if (item.type === 'section') {\n    return <Section item={item} />;\n  }\n  return (\n    <MenuItem\n      key={item.dsId}\n      item={item}\n      innerRef={innerRef}\n      onFocus={onFocus}\n      tabIndex={tabIndex}\n      level={level}\n      parentId={parentId}\n      selectionMode={selectionMode}\n    />\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC2BZ;AAvBX,SAAS,UAAU,SAAS,iBAAiB;AAatC,MAAM,cAA0C,CAAC;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,MAAI,KAAK,SAAS,aAAa;AAC7B,WAAO,oBAAC,aAAU;AAAA,EACpB;AACA,MAAI,KAAK,SAAS,WAAW;AAC3B,WAAO,oBAAC,WAAQ,MAAY;AAAA,EAC9B;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAPK,KAAK;AAAA,EAQZ;AAEJ;",
+  "names": []
+}

package/dist/esm/parts/MenuButtonContent.js

@@ -0,0 +1,127 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React2, { useState, useMemo, useCallback, useContext, useRef } from "react";
+import { useGetGlobalAttributes, useGetXstyledProps } from "@elliemae/ds-props-helpers";
+import { SubMenu } from "./SubMenu.js";
+import { MenuButtonContext } from "../DSMenuButtonCTX.js";
+import { StyledMenuButtonWrapper } from "../styled.js";
+function useOnClickOutside(ref, cb) {
+  React2.useEffect(() => {
+    const listener = (event) => {
+      if (!ref?.current || ref?.current?.contains?.(event.target)) {
+        return;
+      }
+      cb(event);
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, cb]);
+}
+const MenuButtonContent = () => {
+  const [referenceElement, setReferenceElement] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const { setFocusedOption, propsWithDefault } = useContext(MenuButtonContext);
+  const { items, TriggerElement, selectionMode, triggerElementProps, menuMinWidth } = propsWithDefault;
+  const globalProps = useGetGlobalAttributes(propsWithDefault);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const firstItem = useMemo(() => {
+    const first = items.find((item) => item.type !== "separator");
+    if (first && first.type === "section") {
+      return first.childrens?.find((item) => item.type !== "separator");
+    }
+    return first;
+  }, [items]);
+  const handleOnKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        referenceElement?.focus();
+      }
+      if (event.key === "ArrowDown" && isOpen) {
+        event.preventDefault();
+        setFocusedOption(firstItem?.dsId || "");
+      }
+      if (event.key === "ArrowUp" && isOpen) {
+        event.preventDefault();
+        setFocusedOption(items[items.length - 1].dsId);
+      }
+      if (event.key === "Enter" && isOpen) {
+        event.preventDefault();
+        setIsOpen(false);
+        referenceElement?.focus();
+      } else if ((event.key === "Enter" || event.key === " ") && !isOpen && firstItem) {
+        setFocusedOption(firstItem?.dsId);
+      }
+    },
+    [firstItem, items, isOpen, referenceElement, setFocusedOption]
+  );
+  const handleOnTriggerOnKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        setFocusedOption(items[0]?.dsId);
+      }
+    },
+    [items, setFocusedOption]
+  );
+  const handleOnClick = useCallback(() => {
+    setIsOpen(!isOpen);
+  }, [isOpen]);
+  const attributes = useMemo(
+    () => ({
+      "aria-haspopup": "true",
+      "aria-expanded": isOpen
+    }),
+    [isOpen]
+  );
+  const listeners = useMemo(
+    () => ({
+      onKeyDown: handleOnTriggerOnKeyDown
+    }),
+    [handleOnTriggerOnKeyDown]
+  );
+  const containerRef = useRef(null);
+  useOnClickOutside(containerRef, () => setIsOpen(false));
+  return /* @__PURE__ */ jsxs(
+    StyledMenuButtonWrapper,
+    {
+      onClick: handleOnClick,
+      onKeyDown: handleOnKeyDown,
+      innerRef: containerRef,
+      ...globalProps,
+      ...xstyledProps,
+      children: [
+        /* @__PURE__ */ jsx(
+          TriggerElement,
+          {
+            isOpen,
+            innerRef: setReferenceElement,
+            setIsOpen,
+            attributes,
+            listeners,
+            triggerElementProps
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(
+          SubMenu,
+          {
+            level: 1,
+            items,
+            showSubMenu: isOpen,
+            setShowSubMenu: setIsOpen,
+            referenceElement,
+            selectionMode,
+            minWidth: menuMinWidth
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  MenuButtonContent
+};
+//# sourceMappingURL=MenuButtonContent.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MenuButtonContent.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useState, useMemo, useCallback, useContext, useRef } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { SubMenu } from './SubMenu.js';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\n\nimport { StyledMenuButtonWrapper } from '../styled.js';\nfunction useOnClickOutside(ref: React.RefObject<HTMLElement>, cb: (event: MouseEvent | TouchEvent) => void) {\n  React.useEffect(() => {\n    const listener = (event: MouseEvent | TouchEvent) => {\n      // Do nothing if clicking ref's element or descendent elements\n      if (!ref?.current || ref?.current?.contains?.(event.target as Node)) {\n        return;\n      }\n      cb(event);\n    };\n    document.addEventListener('mousedown', listener);\n    document.addEventListener('touchstart', listener);\n    return () => {\n      document.removeEventListener('mousedown', listener);\n      document.removeEventListener('touchstart', listener);\n    };\n  }, [ref, cb]);\n}\n\nexport const MenuButtonContent = () => {\n  const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const { setFocusedOption, propsWithDefault } = useContext(MenuButtonContext);\n\n  const { items, TriggerElement, selectionMode, triggerElementProps, menuMinWidth } = propsWithDefault;\n  const globalProps = useGetGlobalAttributes(propsWithDefault);\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n\n  const firstItem = useMemo(() => {\n    const first = items.find((item) => item.type !== 'separator');\n    if (first && first.type === 'section') {\n      return first.childrens?.find((item) => item.type !== 'separator');\n    }\n    return first;\n  }, [items]);\n\n  const handleOnKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        referenceElement?.focus();\n      }\n      if (event.key === 'ArrowDown' && isOpen) {\n        event.preventDefault();\n        setFocusedOption(firstItem?.dsId || '');\n      }\n      if (event.key === 'ArrowUp' && isOpen) {\n        event.preventDefault();\n        setFocusedOption(items[items.length - 1].dsId);\n      }\n\n      // Enter to close the menu and focus the trigger element\n      if (event.key === 'Enter' && isOpen) {\n        event.preventDefault();\n        setIsOpen(false);\n        referenceElement?.focus();\n      } else if ((event.key === 'Enter' || event.key === ' ') && !isOpen && firstItem) {\n        setFocusedOption(firstItem?.dsId);\n      }\n    },\n    [firstItem, items, isOpen, referenceElement, setFocusedOption],\n  );\n\n  const handleOnTriggerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        setFocusedOption(items[0]?.dsId);\n      }\n    },\n    [items, setFocusedOption],\n  );\n\n  const handleOnClick = useCallback(() => {\n    setIsOpen(!isOpen);\n  }, [isOpen]);\n\n  const attributes = useMemo(\n    () => ({\n      'aria-haspopup': 'true',\n      'aria-expanded': isOpen,\n    }),\n    [isOpen],\n  );\n\n  const listeners = useMemo(\n    () => ({\n      onKeyDown: handleOnTriggerOnKeyDown,\n    }),\n    [handleOnTriggerOnKeyDown],\n  );\n\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  useOnClickOutside(containerRef, () => setIsOpen(false));\n\n  return (\n    <StyledMenuButtonWrapper\n      onClick={handleOnClick}\n      onKeyDown={handleOnKeyDown}\n      innerRef={containerRef}\n      {...globalProps}\n      {...xstyledProps}\n    >\n      <TriggerElement\n        isOpen={isOpen}\n        innerRef={setReferenceElement}\n        setIsOpen={setIsOpen}\n        attributes={attributes}\n        listeners={listeners}\n        triggerElementProps={triggerElementProps}\n      />\n      {isOpen && (\n        <SubMenu\n          level={1}\n          items={items}\n          showSubMenu={isOpen}\n          setShowSubMenu={setIsOpen}\n          referenceElement={referenceElement}\n          selectionMode={selectionMode}\n          minWidth={menuMinWidth}\n        />\n      )}\n    </StyledMenuButtonWrapper>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/parts/MenuItem.js

@@ -0,0 +1,227 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import React2, { useState, useCallback, useMemo } from "react";
+import {
+  TriangleUpSmall,
+  CheckmarkXsmall,
+  TriangleDownSmall,
+  ChevronSmallDown,
+  ChevronSmallRight
+} from "@elliemae/ds-icons";
+import { mergeRefs } from "@elliemae/ds-system";
+import { Grid } from "@elliemae/ds-grid";
+import { MenuButtonContext } from "../DSMenuButtonCTX.js";
+import {
+  StyledMenuItem,
+  StyledMenuItemContent,
+  StyledLeftContent,
+  StyledRightContent,
+  StyledSeparator,
+  StyledSection
+} from "../styled.js";
+import { SubMenu } from "./SubMenu.js";
+const MenuItemAddon = React2.memo(({ level, isOpen }) => {
+  if (level === 0)
+    return isOpen ? /* @__PURE__ */ jsx(TriangleUpSmall, { color: ["brand-primary", "600"] }) : /* @__PURE__ */ jsx(TriangleDownSmall, { color: ["brand-primary", "600"] });
+  return isOpen ? /* @__PURE__ */ jsx(ChevronSmallDown, { size: "m", color: ["brand-primary", "600"] }) : /* @__PURE__ */ jsx(ChevronSmallRight, { size: "m", color: ["brand-primary", "600"] });
+});
+const MenuItem = ({
+  innerRef,
+  tabIndex,
+  onFocus,
+  selectionMode,
+  item,
+  level,
+  parentId,
+  isVertical
+}) => {
+  const {
+    setFocusedOption,
+    focusedOption,
+    selectedKeys,
+    onSelectionChange,
+    propsWithDefault: { ItemRenderer }
+  } = React2.useContext(MenuButtonContext);
+  const listRef = React2.useRef(null);
+  const [showSubMenu, setShowSubMenu] = useState(false);
+  const [referenceElement, setReferenceElement] = React2.useState(null);
+  const itemRef = useCallback(
+    (node) => {
+      if (node !== null) {
+        if (focusedOption === item.dsId) node.focus();
+      }
+      return node;
+    },
+    [focusedOption, item.dsId]
+  );
+  const selectionLogic = useCallback(() => {
+    if (selectionMode === "single") {
+      const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];
+      onSelectionChange(newValue, parentId || "root", item);
+    }
+    if (selectionMode === "multiple") {
+      const newValue = selectedKeys.includes(item.dsId) ? selectedKeys.filter((key) => key !== item.dsId) : [...selectedKeys, item.dsId];
+      onSelectionChange(newValue, parentId || "root", item);
+    }
+  }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);
+  const handleOnClick = useCallback(
+    (e) => {
+      if (selectionMode === "multiple") {
+        e.stopPropagation();
+      }
+      selectionLogic();
+    },
+    [selectionLogic, selectionMode]
+  );
+  const onItemKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        selectionLogic();
+      }
+      if ((event.key === "ArrowDown" && level === 0 || event.key === "ArrowRight" && level !== 0) && item.subitems) {
+        event.preventDefault();
+        event.stopPropagation();
+        setShowSubMenu(true);
+        setFocusedOption(item.subitems[0].dsId);
+      }
+      if (event.key === "ArrowLeft" && level >= 2) {
+        event.preventDefault();
+        event.stopPropagation();
+        if (parentId) setFocusedOption(parentId);
+      }
+      if (event.key === "Escape" && level > 0) {
+        if (parentId !== void 0) {
+          setFocusedOption(parentId);
+        }
+      }
+    },
+    [level, item.subitems, selectionLogic, setFocusedOption, parentId]
+  );
+  const handleOnLIKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        setShowSubMenu(false);
+        if (level === 0) {
+          setFocusedOption(item.dsId);
+        }
+      }
+    },
+    [item.dsId, level, setFocusedOption]
+  );
+  const handleOnMouseEnter = useCallback(() => {
+    setShowSubMenu(true);
+    setFocusedOption(item.dsId);
+  }, [item.dsId, setFocusedOption]);
+  const handleOnMouseLeave = useCallback(() => {
+    setShowSubMenu(false);
+  }, []);
+  const ariaExpanded = useMemo(() => {
+    if (item.subitems) {
+      return showSubMenu ? "true" : "false";
+    }
+    return void 0;
+  }, [item.subitems, showSubMenu]);
+  const role = useMemo(() => {
+    if (selectionMode === "single") {
+      return "menuitemradio";
+    }
+    if (selectionMode === "multiple") {
+      return "menuitemcheckbox";
+    }
+    return "menuitem";
+  }, [selectionMode]);
+  const ariaChecked = useMemo(() => {
+    if (selectionMode === "multiple" || selectionMode === "single") {
+      return selectedKeys.includes(item.dsId) ? "true" : "false";
+    }
+    return void 0;
+  }, [item.dsId, selectionMode, selectedKeys]);
+  return /* @__PURE__ */ jsxs(
+    StyledMenuItem,
+    {
+      role: "none",
+      innerRef: listRef,
+      onMouseEnter: handleOnMouseEnter,
+      onMouseLeave: handleOnMouseLeave,
+      onKeyDown: handleOnLIKeyDown,
+      isOpen: showSubMenu,
+      level,
+      isVertical,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledMenuItemContent,
+          {
+            role,
+            "aria-checked": ariaChecked,
+            "aria-haspopup": item.subitems ? "true" : "false",
+            "aria-expanded": ariaExpanded,
+            innerRef: mergeRefs(innerRef, itemRef, setReferenceElement),
+            onKeyDown: onItemKeyDown,
+            onClick: handleOnClick,
+            hasChildren: item.subitems !== void 0,
+            onFocus,
+            tabIndex,
+            children: ItemRenderer ? /* @__PURE__ */ jsx(ItemRenderer, { item, isSelected: selectedKeys.includes(item.dsId) }) : /* @__PURE__ */ jsx(
+              MenuItemContent,
+              {
+                item,
+                selectionMode,
+                selectedKeys,
+                showSubMenu,
+                level
+              }
+            )
+          }
+        ),
+        item.subitems && showSubMenu && /* @__PURE__ */ jsx(
+          SubMenu,
+          {
+            level: level + 1,
+            items: item.subitems,
+            showSubMenu,
+            setShowSubMenu,
+            referenceElement,
+            parentId: item.dsId,
+            selectionMode: item.selectionMode,
+            minWidth: item.minWidth
+          }
+        )
+      ]
+    }
+  );
+};
+const MenuItemContent = React2.memo(
+  ({
+    item,
+    selectionMode,
+    selectedKeys,
+    showSubMenu,
+    level
+  }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(StyledLeftContent, { children: [
+      /* @__PURE__ */ jsx(SelectionAddon, { selectionMode, item, selectedKeys }),
+      /* @__PURE__ */ jsx("span", { style: { lineHeight: 1.15 }, children: item.label })
+    ] }),
+    /* @__PURE__ */ jsx(StyledRightContent, { children: item.subitems ? /* @__PURE__ */ jsx(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
+  ] })
+);
+const SelectionAddon = ({
+  item,
+  selectedKeys,
+  selectionMode
+}) => {
+  if (selectionMode) {
+    return selectedKeys.includes(item.dsId) ? /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(CheckmarkXsmall, { size: "m", color: ["brand-primary", "600"] }) }) : /* @__PURE__ */ jsx("div", { style: { width: "24px" } });
+  }
+  return null;
+};
+const Separator = () => /* @__PURE__ */ jsx("li", { role: "none", style: { padding: "0px 16px" }, children: /* @__PURE__ */ jsx(StyledSeparator, { role: "separator" }) });
+const Section = ({ item }) => /* @__PURE__ */ jsx("li", { role: "none", style: { padding: "0px 16px", minHeight: 24, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx(StyledSection, { role: "presentation", children: item.label }) });
+export {
+  MenuItem,
+  MenuItemAddon,
+  Section,
+  Separator
+};
+//# sourceMappingURL=MenuItem.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/MenuItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\n/* eslint-disable @typescript-eslint/no-use-before-define */\n/* eslint-disable complexity */\n/* eslint-disable max-lines */\nimport React, { useState, useCallback, useMemo } from 'react';\nimport {\n  TriangleUpSmall,\n  CheckmarkXsmall,\n  TriangleDownSmall,\n  ChevronSmallDown,\n  ChevronSmallRight,\n} from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { mergeRefs } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport {\n  StyledMenuItem,\n  StyledMenuItemContent,\n  StyledLeftContent,\n  StyledRightContent,\n  StyledSeparator,\n  StyledSection,\n} from '../styled.js';\nimport { SubMenu } from './SubMenu.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\n\nexport const MenuItemAddon = React.memo(({ level, isOpen }: { level: number; isOpen: boolean }) => {\n  if (level === 0)\n    return isOpen ? (\n      <TriangleUpSmall color={['brand-primary', '600']} />\n    ) : (\n      <TriangleDownSmall color={['brand-primary', '600']} />\n    );\n  return isOpen ? (\n    <ChevronSmallDown size=\"m\" color={['brand-primary', '600']} />\n  ) : (\n    <ChevronSmallRight size=\"m\" color={['brand-primary', '600']} />\n  );\n});\n\nexport const MenuItem = ({\n  innerRef,\n  tabIndex,\n  onFocus,\n  selectionMode,\n  item,\n  level,\n  parentId,\n  isVertical,\n}: {\n  selectionMode?: 'single' | 'multiple';\n  item: MenuButtonT.Item;\n  level: number;\n  parentId: string | undefined;\n  isVertical?: boolean;\n  tabIndex: number;\n  onFocus: React.FocusEventHandler;\n  innerRef: TypescriptHelpersT.AnyRef<HTMLElement>;\n}) => {\n  const {\n    setFocusedOption,\n    focusedOption,\n    selectedKeys,\n    onSelectionChange,\n    propsWithDefault: { ItemRenderer },\n  } = React.useContext(MenuButtonContext);\n  const listRef = React.useRef(null);\n  const [showSubMenu, setShowSubMenu] = useState(false);\n  const [referenceElement, setReferenceElement] = React.useState<HTMLElement | null>(null);\n  const itemRef = useCallback(\n    (node: HTMLElement | null) => {\n      if (node !== null) {\n        if (focusedOption === item.dsId) node.focus();\n      }\n      return node;\n    },\n    [focusedOption, item.dsId],\n  );\n\n  const selectionLogic = useCallback(() => {\n    if (selectionMode === 'single') {\n      const newValue = item.dsId === selectedKeys[0] ? [] : [item.dsId];\n      onSelectionChange(newValue, parentId || 'root', item);\n    }\n    if (selectionMode === 'multiple') {\n      const newValue = selectedKeys.includes(item.dsId)\n        ? selectedKeys.filter((key: string) => key !== item.dsId)\n        : [...selectedKeys, item.dsId];\n      onSelectionChange(newValue, parentId || 'root', item);\n    }\n  }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);\n\n  const handleOnClick: React.MouseEventHandler = useCallback(\n    (e) => {\n      if (selectionMode === 'multiple') {\n        e.stopPropagation();\n      }\n      selectionLogic();\n    },\n    [selectionLogic, selectionMode],\n  );\n  const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n    (event) => {\n      // selection\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        selectionLogic();\n      }\n      // open submenu logic\n      if (\n        ((event.key === 'ArrowDown' && level === 0) || (event.key === 'ArrowRight' && level !== 0)) &&\n        item.subitems\n      ) {\n        event.preventDefault();\n        event.stopPropagation();\n        setShowSubMenu(true);\n        setFocusedOption(item.subitems[0].dsId);\n      }\n\n      // close submenu logic\n      if (event.key === 'ArrowLeft' && level >= 2) {\n        event.preventDefault();\n        event.stopPropagation();\n        if (parentId) setFocusedOption(parentId);\n      }\n      if (event.key === 'Escape' && level > 0) {\n        if (parentId !== undefined) {\n          setFocusedOption(parentId);\n        }\n      }\n    },\n    [level, item.subitems, selectionLogic, setFocusedOption, parentId],\n  );\n\n  const handleOnLIKeyDown: React.KeyboardEventHandler = useCallback(\n    (e) => {\n      // logic to close all submenus and focus on parent\n      if (e.key === 'Enter') {\n        setShowSubMenu(false);\n        if (level === 0) {\n          setFocusedOption(item.dsId);\n        }\n      }\n    },\n    [item.dsId, level, setFocusedOption],\n  );\n\n  const handleOnMouseEnter = useCallback(() => {\n    setShowSubMenu(true);\n    setFocusedOption(item.dsId);\n  }, [item.dsId, setFocusedOption]);\n\n  const handleOnMouseLeave = useCallback(() => {\n    setShowSubMenu(false);\n  }, []);\n\n  const ariaExpanded = useMemo(() => {\n    if (item.subitems) {\n      return showSubMenu ? 'true' : 'false';\n    }\n    return undefined;\n  }, [item.subitems, showSubMenu]);\n\n  const role = useMemo(() => {\n    if (selectionMode === 'single') {\n      return 'menuitemradio';\n    }\n    if (selectionMode === 'multiple') {\n      return 'menuitemcheckbox';\n    }\n    return 'menuitem';\n  }, [selectionMode]);\n\n  const ariaChecked = useMemo(() => {\n    if (selectionMode === 'multiple' || selectionMode === 'single') {\n      return selectedKeys.includes(item.dsId) ? 'true' : 'false';\n    }\n    return undefined;\n  }, [item.dsId, selectionMode, selectedKeys]);\n\n  return (\n    <StyledMenuItem\n      role=\"none\"\n      innerRef={listRef}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n      onKeyDown={handleOnLIKeyDown}\n      isOpen={showSubMenu}\n      level={level}\n      isVertical={isVertical}\n    >\n      <StyledMenuItemContent\n        role={role}\n        aria-checked={ariaChecked}\n        aria-haspopup={item.subitems ? 'true' : 'false'}\n        aria-expanded={ariaExpanded}\n        innerRef={mergeRefs(innerRef, itemRef, setReferenceElement)}\n        onKeyDown={onItemKeyDown}\n        onClick={handleOnClick}\n        hasChildren={item.subitems !== undefined}\n        onFocus={onFocus}\n        tabIndex={tabIndex}\n      >\n        {ItemRenderer ? (\n          <ItemRenderer item={item} isSelected={selectedKeys.includes(item.dsId)} />\n        ) : (\n          <MenuItemContent\n            item={item}\n            selectionMode={selectionMode}\n            selectedKeys={selectedKeys}\n            showSubMenu={showSubMenu}\n            level={level}\n          />\n        )}\n      </StyledMenuItemContent>\n      {item.subitems && showSubMenu && (\n        <SubMenu\n          level={level + 1}\n          items={item.subitems}\n          showSubMenu={showSubMenu}\n          setShowSubMenu={setShowSubMenu}\n          referenceElement={referenceElement}\n          parentId={item.dsId}\n          selectionMode={item.selectionMode}\n          minWidth={item.minWidth}\n        />\n      )}\n    </StyledMenuItem>\n  );\n};\n\nconst MenuItemContent = React.memo(\n  ({\n    item,\n    selectionMode,\n    selectedKeys,\n    showSubMenu,\n    level,\n  }: {\n    item: MenuButtonT.Item;\n    selectionMode?: 'single' | 'multiple';\n    selectedKeys: string[];\n    showSubMenu: boolean;\n    level: number;\n  }) => (\n    <>\n      <StyledLeftContent>\n        <SelectionAddon selectionMode={selectionMode} item={item} selectedKeys={selectedKeys} />\n        <span style={{ lineHeight: 1.15 }}>{item.label}</span>\n      </StyledLeftContent>\n      <StyledRightContent>\n        {item.subitems ? <MenuItemAddon isOpen={showSubMenu} level={level} /> : null}\n      </StyledRightContent>\n    </>\n  ),\n);\n\nconst SelectionAddon = ({\n  item,\n  selectedKeys,\n  selectionMode,\n}: {\n  item: MenuButtonT.Item;\n  selectedKeys: string[];\n  selectionMode?: 'single' | 'multiple';\n}) => {\n  if (selectionMode) {\n    return selectedKeys.includes(item.dsId) ? (\n      <Grid>\n        <CheckmarkXsmall size=\"m\" color={['brand-primary', '600']} />\n      </Grid>\n    ) : (\n      <div style={{ width: '24px' }} />\n    );\n  }\n  return null;\n};\n\nexport const Separator = () => (\n  <li role=\"none\" style={{ padding: '0px 16px' }}>\n    <StyledSeparator role=\"separator\" />\n  </li>\n);\n\nexport const Section = ({ item }: { item: MenuButtonT.Item }) => (\n  <li role=\"none\" style={{ padding: '0px 16px', minHeight: 24, display: 'flex', alignItems: 'center' }}>\n    <StyledSection role=\"presentation\">{item.label}</StyledSection>\n  </li>\n);\n"],
+  "mappings": "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",
+  "names": ["React"]
+}