@elliemae/ds-menu-button 3.39.1-rc.0 → 3.40.0-rc.0

package/dist/cjs/parts/ItemFactory.js

@@ -58,7 +58,7 @@ const ItemFactory = ({
       tabIndex,
       level,
       parentId,
-      selectionMode
+      selectionMode: selectionMode || item.type
     },
     item.dsId
   );

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/ItemFactory.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BZ;AAvBX,sBAA6C;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,4CAAC,6BAAU;AAAA,EACpB;AACA,MAAI,KAAK,SAAS,WAAW;AAC3B,WAAO,4CAAC,2BAAQ,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;",
+  "sourcesContent": ["/* 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 || item.type}\n    />\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;AD2BZ;AAvBX,sBAA6C;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,4CAAC,6BAAU;AAAA,EACpB;AACA,MAAI,KAAK,SAAS,WAAW;AAC3B,WAAO,4CAAC,2BAAQ,MAAY;AAAA,EAC9B;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MAEC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,eAAe,iBAAiB,KAAK;AAAA;AAAA,IAPhC,KAAK;AAAA,EAQZ;AAEJ;",
   "names": []
 }

package/dist/cjs/parts/Menu.js

@@ -56,11 +56,11 @@ const Menu = (props) => {
       return;
     }
     if (listRect.right > window.innerWidth) {
-      setCoords({ x: -(rect?.width || 0), y: 0 });
+      setCoords({ x: -(minWidth || rect?.width || 0), y: 0 });
     } else {
       setCoords({ x: rect?.width || 0, y: 0 });
     }
-  }, [level, rect?.height, rect?.width, referenceElement]);
+  }, [level, minWidth, rect?.height, rect?.width, referenceElement]);
   const config = {
     options: items.filter((item) => item.type !== "separator" && item.type !== "section").map((item) => item.dsId),
     direction: import_ds_hooks_keyboard_navigation.DIRECTIONS.VERTICAL,

package/dist/cjs/parts/Menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/Menu.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable import/no-cycle */\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\nimport { useKeyboardNavigation, DIRECTIONS } from '@elliemae/ds-hooks-keyboard-navigation';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\nimport { StyledMenu } from '../styled.js';\nimport { ItemFactory } from './ItemFactory.js';\n\ninterface SubMenuProps {\n  referenceElement: HTMLElement | null;\n  showSubMenu: boolean;\n  selectionMode?: 'single' | 'multiple';\n  setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  parentId?: string;\n  level: number;\n  items: MenuButtonT.Item[];\n  minWidth?: string | number;\n}\n\nexport const Menu: React.FC<SubMenuProps> = (props) => {\n  const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;\n  const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const rect = referenceElement?.getBoundingClientRect();\n  const [coords, setCoords] = useState<{ x: number; y: number }>({ x: rect?.width ?? 0, y: 0 });\n\n  // this logic will be part of the new popper custom hook\n  React.useLayoutEffect(() => {\n    const listRect = listRef?.current?.getBoundingClientRect();\n    if (!listRect) return;\n    if (level === 1) {\n      if (listRect.bottom < window.innerHeight) {\n        setCoords({ x: 0, y: rect?.height || 0 });\n      } else {\n        setCoords({ x: 0, y: -listRect.height });\n      }\n      return;\n    }\n    if (listRect.right > window.innerWidth) {\n      setCoords({ x: -(rect?.width || 0), y: 0 });\n    } else {\n      setCoords({ x: rect?.width || 0, y: 0 });\n    }\n  }, [level, rect?.height, rect?.width, referenceElement]);\n\n  const config = {\n    options: items.filter((item) => item.type !== 'separator' && item.type !== 'section').map((item) => item.dsId),\n    direction: DIRECTIONS.VERTICAL,\n    focusedOption,\n    setFocusedOption,\n  };\n\n  const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);\n\n  const { onKeyDown, onBlur } = getWrapperProps();\n\n  const handleOnMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.stopPropagation();\n      }\n      onKeyDown(event);\n    },\n    [onKeyDown],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      setTimeout(() => {\n        if (!listRef.current?.contains(document.activeElement)) {\n          setShowSubMenu(false);\n        }\n      });\n      onBlur(e);\n    },\n    [onBlur, setShowSubMenu],\n  );\n\n  const subMenuStyles = useMemo(\n    () => ({\n      position: 'absolute',\n      top: coords.y,\n      left: coords.x,\n      zIndex: 1001 + level,\n      minWidth,\n    }),\n    [coords, level, minWidth],\n  );\n\n  if (!referenceElement || !showSubMenu) return null;\n\n  return (\n    <StyledMenu\n      innerRef={listRef}\n      role=\"menu\"\n      onKeyDown={handleOnMenuKeyDown}\n      onBlur={handleOnBlur}\n      style={subMenuStyles}\n    >\n      {items.map((item) => (\n        <ItemFactory\n          key={item.dsId}\n          item={item}\n          selectionMode={selectionMode}\n          level={level}\n          parentId={parentId}\n          {...getItemProps(item.dsId)}\n        />\n      ))}\n    </StyledMenu>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable import/no-cycle */\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\nimport { useKeyboardNavigation, DIRECTIONS } from '@elliemae/ds-hooks-keyboard-navigation';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\nimport { StyledMenu } from '../styled.js';\nimport { ItemFactory } from './ItemFactory.js';\n\ninterface SubMenuProps {\n  referenceElement: HTMLElement | null;\n  showSubMenu: boolean;\n  selectionMode?: 'single' | 'multiple';\n  setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  parentId?: string;\n  level: number;\n  items: MenuButtonT.Item[];\n  minWidth?: string | number;\n}\n\nexport const Menu: React.FC<SubMenuProps> = (props) => {\n  const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;\n  const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const rect = referenceElement?.getBoundingClientRect();\n  const [coords, setCoords] = useState<{ x: number; y: number }>({ x: rect?.width ?? 0, y: 0 });\n\n  // this logic will be part of the new popper custom hook\n  React.useLayoutEffect(() => {\n    const listRect = listRef?.current?.getBoundingClientRect();\n    if (!listRect) return;\n    if (level === 1) {\n      if (listRect.bottom < window.innerHeight) {\n        setCoords({ x: 0, y: rect?.height || 0 });\n      } else {\n        setCoords({ x: 0, y: -listRect.height });\n      }\n      return;\n    }\n    if (listRect.right > window.innerWidth) {\n      setCoords({ x: -(minWidth || rect?.width || 0), y: 0 });\n    } else {\n      setCoords({ x: rect?.width || 0, y: 0 });\n    }\n  }, [level, minWidth, rect?.height, rect?.width, referenceElement]);\n\n  const config = {\n    options: items.filter((item) => item.type !== 'separator' && item.type !== 'section').map((item) => item.dsId),\n    direction: DIRECTIONS.VERTICAL,\n    focusedOption,\n    setFocusedOption,\n  };\n\n  const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);\n\n  const { onKeyDown, onBlur } = getWrapperProps();\n\n  const handleOnMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.stopPropagation();\n      }\n      onKeyDown(event);\n    },\n    [onKeyDown],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      setTimeout(() => {\n        if (!listRef.current?.contains(document.activeElement)) {\n          setShowSubMenu(false);\n        }\n      });\n      onBlur(e);\n    },\n    [onBlur, setShowSubMenu],\n  );\n\n  const subMenuStyles = useMemo(\n    () => ({\n      position: 'absolute',\n      top: coords.y,\n      left: coords.x,\n      zIndex: 1001 + level,\n      minWidth,\n    }),\n    [coords, level, minWidth],\n  );\n\n  if (!referenceElement || !showSubMenu) return null;\n\n  return (\n    <StyledMenu\n      innerRef={listRef}\n      role=\"menu\"\n      onKeyDown={handleOnMenuKeyDown}\n      onBlur={handleOnBlur}\n      style={subMenuStyles}\n    >\n      {items.map((item) => (\n        <ItemFactory\n          key={item.dsId}\n          item={item}\n          selectionMode={selectionMode}\n          level={level}\n          parentId={parentId}\n          {...getItemProps(item.dsId)}\n        />\n      ))}\n    </StyledMenu>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/parts/MenuButtonContent.js

@@ -60,10 +60,7 @@ const MenuButtonContent = () => {
   const globalProps = (0, import_ds_props_helpers.useGetGlobalAttributes)(propsWithDefault);
   const xstyledProps = (0, import_ds_props_helpers.useGetXstyledProps)(propsWithDefault);
   const firstItem = (0, import_react.useMemo)(() => {
-    const first = items.find((item) => item.type !== "separator");
-    if (first && first.type === "section") {
-      return first.childrens?.find((item) => item.type !== "separator");
-    }
+    const first = items.find((item) => item.type !== "separator" && item.type !== "section");
     return first;
   }, [items]);
   const handleOnKeyDown = (0, import_react.useCallback)(
@@ -89,10 +86,18 @@ const MenuButtonContent = () => {
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        setFocusedOption(items[0]?.dsId);
+        setFocusedOption(firstItem?.dsId || "");
+      }
+      if (e.key === "ArrowDown" && !isOpen) {
+        setIsOpen(true);
+        setFocusedOption(firstItem?.dsId || "");
+      }
+      if (e.key === "ArrowUp" && !isOpen) {
+        setIsOpen(true);
+        setFocusedOption(items[items.length - 1].dsId);
       }
     },
-    [items, setFocusedOption]
+    [firstItem?.dsId, isOpen, items, setFocusedOption, setIsOpen]
   );
   const handleOnClick = (0, import_react.useCallback)(() => {
     setIsOpen(!isOpen);

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MenuButtonContent.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useCallback, useContext, useRef } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { Menu } from './Menu.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 { setFocusedOption, triggerElementRef, setTriggerElementRef, isOpen, setIsOpen, propsWithDefault } =\n    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        triggerElementRef?.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      if ((event.key === 'Enter' || event.key === ' ') && !isOpen && firstItem) {\n        setFocusedOption(firstItem?.dsId);\n      }\n    },\n    [isOpen, firstItem, triggerElementRef, setFocusedOption, items],\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, setIsOpen]);\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={setTriggerElementRef}\n        setIsOpen={setIsOpen}\n        attributes={attributes}\n        listeners={listeners}\n        triggerElementProps={triggerElementProps}\n      />\n      {isOpen && (\n        <Menu\n          level={1}\n          items={items}\n          showSubMenu={isOpen}\n          setShowSubMenu={setIsOpen}\n          referenceElement={triggerElementRef}\n          selectionMode={selectionMode}\n          minWidth={menuMinWidth}\n        />\n      )}\n    </StyledMenuButtonWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* eslint-disable complexity */\nimport React, { useMemo, useCallback, useContext, useRef } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { Menu } from './Menu.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 { setFocusedOption, triggerElementRef, setTriggerElementRef, isOpen, setIsOpen, propsWithDefault } =\n    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' && item.type !== 'section');\n    return first;\n  }, [items]);\n\n  const handleOnKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        triggerElementRef?.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      if ((event.key === 'Enter' || event.key === ' ') && !isOpen && firstItem) {\n        setFocusedOption(firstItem?.dsId);\n      }\n    },\n    [isOpen, firstItem, triggerElementRef, setFocusedOption, items],\n  );\n\n  const handleOnTriggerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        setFocusedOption(firstItem?.dsId || '');\n      }\n      if (e.key === 'ArrowDown' && !isOpen) {\n        setIsOpen(true);\n        setFocusedOption(firstItem?.dsId || '');\n      }\n      if (e.key === 'ArrowUp' && !isOpen) {\n        setIsOpen(true);\n        setFocusedOption(items[items.length - 1].dsId);\n      }\n    },\n    [firstItem?.dsId, isOpen, items, setFocusedOption, setIsOpen],\n  );\n\n  const handleOnClick = useCallback(() => {\n    setIsOpen(!isOpen);\n  }, [isOpen, setIsOpen]);\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={setTriggerElementRef}\n        setIsOpen={setIsOpen}\n        attributes={attributes}\n        listeners={listeners}\n        triggerElementProps={triggerElementProps}\n      />\n      {isOpen && (\n        <Menu\n          level={1}\n          items={items}\n          showSubMenu={isOpen}\n          setShowSubMenu={setIsOpen}\n          referenceElement={triggerElementRef}\n          selectionMode={selectionMode}\n          minWidth={menuMinWidth}\n        />\n      )}\n    </StyledMenuButtonWrapper>\n  );\n};\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADoGnB;AAnGJ,mBAAgE;AAChE,8BAA2D;AAC3D,kBAAqB;AACrB,6BAAkC;AAElC,oBAAwC;AACxC,SAAS,kBAAkB,KAAmC,IAA8C;AAC1G,eAAAA,QAAM,UAAU,MAAM;AACpB,UAAM,WAAW,CAAC,UAAmC;AAEnD,UAAI,CAAC,KAAK,WAAW,KAAK,SAAS,WAAW,MAAM,MAAc,GAAG;AACnE;AAAA,MACF;AACA,SAAG,KAAK;AAAA,IACV;AACA,aAAS,iBAAiB,aAAa,QAAQ;AAC/C,aAAS,iBAAiB,cAAc,QAAQ;AAChD,WAAO,MAAM;AACX,eAAS,oBAAoB,aAAa,QAAQ;AAClD,eAAS,oBAAoB,cAAc,QAAQ;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,KAAK,EAAE,CAAC;AACd;AAEO,MAAM,oBAAoB,MAAM;AACrC,QAAM,EAAE,kBAAkB,mBAAmB,sBAAsB,QAAQ,WAAW,iBAAiB,QACrG,yBAAW,wCAAiB;AAE9B,QAAM,EAAE,OAAO,gBAAgB,eAAe,qBAAqB,aAAa,IAAI;AACpF,QAAM,kBAAc,gDAAuB,gBAAgB;AAC3D,QAAM,mBAAe,4CAAmB,gBAAgB;AAExD,QAAM,gBAAY,sBAAQ,MAAM;AAC9B,UAAM,QAAQ,MAAM,KAAK,CAAC,SAAS,KAAK,SAAS,eAAe,KAAK,SAAS,SAAS;AACvF,WAAO;AAAA,EACT,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,sBAAkB;AAAA,IACtB,CAAC,UAA+B;AAC9B,UAAI,MAAM,QAAQ,UAAU;AAC1B,2BAAmB,MAAM;AAAA,MAC3B;AACA,UAAI,MAAM,QAAQ,eAAe,QAAQ;AACvC,cAAM,eAAe;AACrB,yBAAiB,WAAW,QAAQ,EAAE;AAAA,MACxC;AACA,UAAI,MAAM,QAAQ,aAAa,QAAQ;AACrC,cAAM,eAAe;AACrB,yBAAiB,MAAM,MAAM,SAAS,CAAC,EAAE,IAAI;AAAA,MAC/C;AAEA,WAAK,MAAM,QAAQ,WAAW,MAAM,QAAQ,QAAQ,CAAC,UAAU,WAAW;AACxE,yBAAiB,WAAW,IAAI;AAAA,MAClC;AAAA,IACF;AAAA,IACA,CAAC,QAAQ,WAAW,mBAAmB,kBAAkB,KAAK;AAAA,EAChE;AAEA,QAAM,+BAA2B;AAAA,IAC/B,CAAC,MAA2B;AAC1B,UAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACtC,UAAE,eAAe;AACjB,yBAAiB,WAAW,QAAQ,EAAE;AAAA,MACxC;AACA,UAAI,EAAE,QAAQ,eAAe,CAAC,QAAQ;AACpC,kBAAU,IAAI;AACd,yBAAiB,WAAW,QAAQ,EAAE;AAAA,MACxC;AACA,UAAI,EAAE,QAAQ,aAAa,CAAC,QAAQ;AAClC,kBAAU,IAAI;AACd,yBAAiB,MAAM,MAAM,SAAS,CAAC,EAAE,IAAI;AAAA,MAC/C;AAAA,IACF;AAAA,IACA,CAAC,WAAW,MAAM,QAAQ,OAAO,kBAAkB,SAAS;AAAA,EAC9D;AAEA,QAAM,oBAAgB,0BAAY,MAAM;AACtC,cAAU,CAAC,MAAM;AAAA,EACnB,GAAG,CAAC,QAAQ,SAAS,CAAC;AAEtB,QAAM,iBAAa;AAAA,IACjB,OAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,iBAAiB;AAAA,IACnB;AAAA,IACA,CAAC,MAAM;AAAA,EACT;AAEA,QAAM,gBAAY;AAAA,IAChB,OAAO;AAAA,MACL,WAAW;AAAA,IACb;AAAA,IACA,CAAC,wBAAwB;AAAA,EAC3B;AAEA,QAAM,mBAAe,qBAA8B,IAAI;AACvD,oBAAkB,cAAc,MAAM,UAAU,KAAK,CAAC;AAEtD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS;AAAA,MACT,WAAW;AAAA,MACX,UAAU;AAAA,MACT,GAAG;AAAA,MACH,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,UAAU;AAAA,YACV;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA;AAAA,QACF;AAAA,QACC,UACC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP;AAAA,YACA,aAAa;AAAA,YACb,gBAAgB;AAAA,YAChB,kBAAkB;AAAA,YAClB;AAAA,YACA,UAAU;AAAA;AAAA,QACZ;AAAA;AAAA;AAAA,EAEJ;AAEJ;",
   "names": ["React"]
 }

package/dist/cjs/parts/MenuItem.js

@@ -38,6 +38,7 @@ var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = __toESM(require("react"));
 var import_ds_icons = require("@elliemae/ds-icons");
+var import_ds_typography = require("@elliemae/ds-typography");
 var import_ds_system = require("@elliemae/ds-system");
 var import_ds_grid = require("@elliemae/ds-grid");
 var import_DSMenuButtonCTX = require("../DSMenuButtonCTX.js");
@@ -92,7 +93,7 @@ const MenuItem = ({
   }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);
   const handleOnClick = (0, import_react.useCallback)(
     (e) => {
-      if (selectionMode === "multiple" || item.disabled) {
+      if (selectionMode !== "single" || item.disabled) {
         e.stopPropagation();
       }
       selectionLogic();
@@ -178,7 +179,7 @@ const MenuItem = ({
       isOpen: showSubMenu,
       level,
       isVertical,
-      disabled: item.disabled,
+      isDisabled: item.disabled,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           import_styled.StyledMenuItemContent,
@@ -233,7 +234,7 @@ const MenuItemContent = import_react.default.memo(
   }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_styled.StyledLeftContent, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SelectionAddon, { selectionMode, item, selectedKeys }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { lineHeight: 1.15 }, children: item.label })
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_typography.DSTypography, { variant: "b1", children: item.label })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledRightContent, { children: item.subitems ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
   ] })
@@ -244,7 +245,7 @@ const SelectionAddon = ({
   selectionMode
 }) => {
   if (selectionMode) {
-    return selectedKeys.includes(item.dsId) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.CheckmarkXsmall, { size: "m", color: ["brand-primary", "600"] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "24px" } });
+    return selectedKeys.includes(item.dsId) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_grid.Grid, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Checkmark, { size: "s", color: ["brand-primary", "600"] }) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { width: "16px" } });
   }
   return null;
 };

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/parts/MenuItem.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["/* 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 { Menu } from './Menu.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    triggerElementRef,\n    setIsOpen,\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 (item.disabled) return;\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' || item.disabled) {\n        e.stopPropagation();\n      }\n      selectionLogic();\n    },\n    [item.disabled, selectionLogic, selectionMode],\n  );\n  const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n    (event) => {\n      // Enter to close the menu and focus the trigger element\n      if (event.key === 'Enter' && !item.disabled) {\n        setIsOpen(false);\n        triggerElementRef?.focus();\n      }\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    [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, 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      disabled={item.disabled}\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        aria-disabled={item.disabled ? 'true' : 'false'}\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        <Menu\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", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": "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",
+  "sourcesContent": ["/* 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 { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\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 { Menu } from './Menu.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    triggerElementRef,\n    setIsOpen,\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 (item.disabled) return;\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 !== 'single' || item.disabled) {\n        e.stopPropagation();\n      }\n      selectionLogic();\n    },\n    [item.disabled, selectionLogic, selectionMode],\n  );\n  const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n    (event) => {\n      // Enter to close the menu and focus the trigger element\n      if (event.key === 'Enter' && !item.disabled) {\n        setIsOpen(false);\n        triggerElementRef?.focus();\n      }\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    [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, 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      isDisabled={item.disabled}\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        aria-disabled={item.disabled ? 'true' : 'false'}\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        <Menu\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        <DSTypography variant=\"b1\">{item.label}</DSTypography>\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        <Checkmark size=\"s\" color={['brand-primary', '600']} />\n      </Grid>\n    ) : (\n      <div style={{ width: '16px' }} />\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", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/cjs/styled.js

@@ -41,16 +41,6 @@ __export(styled_exports, {
 module.exports = __toCommonJS(styled_exports);
 var React = __toESM(require("react"));
 var import_ds_system = require("@elliemae/ds-system");
-const disabledOption = () => import_ds_system.css`
-  a {
-    color: ${({ theme }) => theme.colors.neutral[500]};
-  }
-  background-color: ${({ theme }) => theme.colors.neutral["000"]};
-  cursor: not-allowed;
-  * {
-    cursor: not-allowed;
-  }
-`;
 const StyledMenuButtonWrapper = (0, import_ds_system.styled)("div")`
   position: relative;
 `;
@@ -81,9 +71,12 @@ const StyledMenuItem = (0, import_ds_system.styled)("li")`
     min-width: 200px;
   }
 
-  &:hover {
-    background-color: brand-200;
-  }
+  ${({ isDisabled, theme }) => isDisabled && `
+    color: ${theme.colors.neutral[500]};
+    * {
+      cursor: not-allowed;
+    }
+  `}
 
   a:focus {
     outline: 1px solid brand-500;
@@ -91,8 +84,6 @@ const StyledMenuItem = (0, import_ds_system.styled)("li")`
   }
 
   ${({ isOpen, theme }) => isOpen ? `background-color: ${theme.colors.brand["200"]}` : ""}
-
-  ${({ disabled }) => disabled ? disabledOption() : ""}
 `;
 const StyledMenuItemContent = (0, import_ds_system.styled)("a")`
   display: flex;
@@ -136,5 +127,6 @@ const StyledSection = (0, import_ds_system.styled)("div")`
   display: flex;
   flex-direction: column;
   gap: 1px;
+  color: neutral-500;
 `;
 //# sourceMappingURL=styled.js.map

package/dist/cjs/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/styled.tsx", "../../../../../scripts/build/transpile/react-shim.js"],
-  "sourcesContent": ["import { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\n\nconst disabledOption = () => css`\n  a {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledMenuButtonWrapper = styled('div')`\n  position: relative;\n`;\n\nexport const StyledMenu = styled('ul')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  background-color: white;\n  /* height: 100%; */\n  ${xStyledCommonProps}\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),\n    0 2px 4px rgba(16, 22, 26, 0.2),\n    0 8px 24px rgba(16, 22, 26, 0.2);\n`;\n\nexport const StyledMenuItem = styled('li')<{\n  isVertical?: boolean;\n  level?: number;\n  isOpen?: boolean;\n  disabled?: boolean;\n}>`\n  position: relative;\n  background-color: white;\n  display: flex;\n  margin: 0;\n  min-height: 32px;\n  width: ${({ isVertical, level }) => (!isVertical && level === 0 ? 'auto' : '100%')};\n  cursor: pointer;\n\n  ul li {\n    min-width: 200px;\n  }\n\n  &:hover {\n    background-color: brand-200;\n  }\n\n  a:focus {\n    outline: 1px solid brand-500;\n    background-color: brand-200;\n  }\n\n  ${({ isOpen, theme }) => (isOpen ? `background-color: ${theme.colors.brand['200']}` : '')}\n\n  ${({ disabled }) => (disabled ? disabledOption() : '')}\n`;\n\nexport const StyledMenuItemContent = styled('a')<{ hasChildren?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  text-decoration: none;\n  color: inherit;\n  &:focus {\n    outline: none;\n  }\n  ${({ hasChildren }) => (hasChildren ? 'padding-left: 16px;' : 'padding: 0 16px;')}\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLeftContent = styled('div')`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n`;\n\nexport const StyledRightContent = styled('div')`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSeparator = styled('hr')`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('div')`\n  color: neutral-500;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 0 16px;\n  min-height: 24px;\n  justify-content: center;\n`;\n\nexport const StyledSection = styled('div')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAgD;AAEhD,MAAM,iBAAiB,MAAM;AAAA;AAAA,aAEhB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,sBAE/B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,8BAA0B,yBAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,iBAAa,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,mCAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,qBAAiB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhF,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAAA,IAEvF,CAAC,EAAE,SAAS,MAAO,WAAW,eAAe,IAAI,EAAG;AAAA;AAGjD,MAAM,4BAAwB,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,sBAAkB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,oBAAgB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import { xStyledCommonProps, styled } from '@elliemae/ds-system';\n\nexport const StyledMenuButtonWrapper = styled('div')`\n  position: relative;\n`;\n\nexport const StyledMenu = styled('ul')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  background-color: white;\n  /* height: 100%; */\n  ${xStyledCommonProps}\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),\n    0 2px 4px rgba(16, 22, 26, 0.2),\n    0 8px 24px rgba(16, 22, 26, 0.2);\n`;\n\nexport const StyledMenuItem = styled('li')<{\n  isVertical?: boolean;\n  level?: number;\n  isOpen?: boolean;\n  isDisabled?: boolean;\n}>`\n  position: relative;\n  background-color: white;\n  display: flex;\n  margin: 0;\n  min-height: 32px;\n  width: ${({ isVertical, level }) => (!isVertical && level === 0 ? 'auto' : '100%')};\n  cursor: pointer;\n\n  ul li {\n    min-width: 200px;\n  }\n\n  ${({ isDisabled, theme }) =>\n    isDisabled &&\n    `\n    color: ${theme.colors.neutral[500]};\n    * {\n      cursor: not-allowed;\n    }\n  `}\n\n  a:focus {\n    outline: 1px solid brand-500;\n    background-color: brand-200;\n  }\n\n  ${({ isOpen, theme }) => (isOpen ? `background-color: ${theme.colors.brand['200']}` : '')}\n`;\n\nexport const StyledMenuItemContent = styled('a')<{ hasChildren?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  text-decoration: none;\n  color: inherit;\n  &:focus {\n    outline: none;\n  }\n  ${({ hasChildren }) => (hasChildren ? 'padding-left: 16px;' : 'padding: 0 16px;')}\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLeftContent = styled('div')`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n`;\n\nexport const StyledRightContent = styled('div')`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSeparator = styled('hr')`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('div')`\n  color: neutral-500;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 0 16px;\n  min-height: 24px;\n  justify-content: center;\n`;\n\nexport const StyledSection = styled('div')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  color: neutral-500;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAA2C;AAEpC,MAAM,8BAA0B,yBAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,iBAAa,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,mCAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,qBAAiB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhF,CAAC,EAAE,YAAY,MAAM,MACrB,cACA;AAAA,aACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,GAInC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAGpF,MAAM,4BAAwB,yBAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,mCAAkB;AAAA;AAGf,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,sBAAkB,yBAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,yBAAqB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,oBAAgB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/ItemFactory.js

@@ -25,7 +25,7 @@ const ItemFactory = ({
       tabIndex,
       level,
       parentId,
-      selectionMode
+      selectionMode: selectionMode || item.type
     },
     item.dsId
   );

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

@@ -1,7 +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;",
+  "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 || item.type}\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,eAAe,iBAAiB,KAAK;AAAA;AAAA,IAPhC,KAAK;AAAA,EAQZ;AAEJ;",
   "names": []
 }

package/dist/esm/parts/Menu.js

@@ -23,11 +23,11 @@ const Menu = (props) => {
       return;
     }
     if (listRect.right > window.innerWidth) {
-      setCoords({ x: -(rect?.width || 0), y: 0 });
+      setCoords({ x: -(minWidth || rect?.width || 0), y: 0 });
     } else {
       setCoords({ x: rect?.width || 0, y: 0 });
     }
-  }, [level, rect?.height, rect?.width, referenceElement]);
+  }, [level, minWidth, rect?.height, rect?.width, referenceElement]);
   const config = {
     options: items.filter((item) => item.type !== "separator" && item.type !== "section").map((item) => item.dsId),
     direction: DIRECTIONS.VERTICAL,

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/parts/Menu.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\nimport { useKeyboardNavigation, DIRECTIONS } from '@elliemae/ds-hooks-keyboard-navigation';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\nimport { StyledMenu } from '../styled.js';\nimport { ItemFactory } from './ItemFactory.js';\n\ninterface SubMenuProps {\n  referenceElement: HTMLElement | null;\n  showSubMenu: boolean;\n  selectionMode?: 'single' | 'multiple';\n  setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  parentId?: string;\n  level: number;\n  items: MenuButtonT.Item[];\n  minWidth?: string | number;\n}\n\nexport const Menu: React.FC<SubMenuProps> = (props) => {\n  const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;\n  const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const rect = referenceElement?.getBoundingClientRect();\n  const [coords, setCoords] = useState<{ x: number; y: number }>({ x: rect?.width ?? 0, y: 0 });\n\n  // this logic will be part of the new popper custom hook\n  React.useLayoutEffect(() => {\n    const listRect = listRef?.current?.getBoundingClientRect();\n    if (!listRect) return;\n    if (level === 1) {\n      if (listRect.bottom < window.innerHeight) {\n        setCoords({ x: 0, y: rect?.height || 0 });\n      } else {\n        setCoords({ x: 0, y: -listRect.height });\n      }\n      return;\n    }\n    if (listRect.right > window.innerWidth) {\n      setCoords({ x: -(rect?.width || 0), y: 0 });\n    } else {\n      setCoords({ x: rect?.width || 0, y: 0 });\n    }\n  }, [level, rect?.height, rect?.width, referenceElement]);\n\n  const config = {\n    options: items.filter((item) => item.type !== 'separator' && item.type !== 'section').map((item) => item.dsId),\n    direction: DIRECTIONS.VERTICAL,\n    focusedOption,\n    setFocusedOption,\n  };\n\n  const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);\n\n  const { onKeyDown, onBlur } = getWrapperProps();\n\n  const handleOnMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.stopPropagation();\n      }\n      onKeyDown(event);\n    },\n    [onKeyDown],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      setTimeout(() => {\n        if (!listRef.current?.contains(document.activeElement)) {\n          setShowSubMenu(false);\n        }\n      });\n      onBlur(e);\n    },\n    [onBlur, setShowSubMenu],\n  );\n\n  const subMenuStyles = useMemo(\n    () => ({\n      position: 'absolute',\n      top: coords.y,\n      left: coords.x,\n      zIndex: 1001 + level,\n      minWidth,\n    }),\n    [coords, level, minWidth],\n  );\n\n  if (!referenceElement || !showSubMenu) return null;\n\n  return (\n    <StyledMenu\n      innerRef={listRef}\n      role=\"menu\"\n      onKeyDown={handleOnMenuKeyDown}\n      onBlur={handleOnBlur}\n      style={subMenuStyles}\n    >\n      {items.map((item) => (\n        <ItemFactory\n          key={item.dsId}\n          item={item}\n          selectionMode={selectionMode}\n          level={level}\n          parentId={parentId}\n          {...getItemProps(item.dsId)}\n        />\n      ))}\n    </StyledMenu>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable import/no-cycle */\nimport React, { useState, useMemo, useCallback, useContext } from 'react';\nimport { useKeyboardNavigation, DIRECTIONS } from '@elliemae/ds-hooks-keyboard-navigation';\nimport { MenuButtonContext } from '../DSMenuButtonCTX.js';\nimport type { MenuButtonT } from '../react-desc-prop-types.js';\nimport { StyledMenu } from '../styled.js';\nimport { ItemFactory } from './ItemFactory.js';\n\ninterface SubMenuProps {\n  referenceElement: HTMLElement | null;\n  showSubMenu: boolean;\n  selectionMode?: 'single' | 'multiple';\n  setShowSubMenu: React.Dispatch<React.SetStateAction<boolean>>;\n  parentId?: string;\n  level: number;\n  items: MenuButtonT.Item[];\n  minWidth?: string | number;\n}\n\nexport const Menu: React.FC<SubMenuProps> = (props) => {\n  const { referenceElement, showSubMenu, selectionMode, setShowSubMenu, parentId, level, items, minWidth } = props;\n  const { focusedOption, setFocusedOption } = useContext(MenuButtonContext);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const rect = referenceElement?.getBoundingClientRect();\n  const [coords, setCoords] = useState<{ x: number; y: number }>({ x: rect?.width ?? 0, y: 0 });\n\n  // this logic will be part of the new popper custom hook\n  React.useLayoutEffect(() => {\n    const listRect = listRef?.current?.getBoundingClientRect();\n    if (!listRect) return;\n    if (level === 1) {\n      if (listRect.bottom < window.innerHeight) {\n        setCoords({ x: 0, y: rect?.height || 0 });\n      } else {\n        setCoords({ x: 0, y: -listRect.height });\n      }\n      return;\n    }\n    if (listRect.right > window.innerWidth) {\n      setCoords({ x: -(minWidth || rect?.width || 0), y: 0 });\n    } else {\n      setCoords({ x: rect?.width || 0, y: 0 });\n    }\n  }, [level, minWidth, rect?.height, rect?.width, referenceElement]);\n\n  const config = {\n    options: items.filter((item) => item.type !== 'separator' && item.type !== 'section').map((item) => item.dsId),\n    direction: DIRECTIONS.VERTICAL,\n    focusedOption,\n    setFocusedOption,\n  };\n\n  const { getWrapperProps, getItemProps } = useKeyboardNavigation(config);\n\n  const { onKeyDown, onBlur } = getWrapperProps();\n\n  const handleOnMenuKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.stopPropagation();\n      }\n      onKeyDown(event);\n    },\n    [onKeyDown],\n  );\n\n  const handleOnBlur: React.FocusEventHandler<HTMLDivElement> = useCallback(\n    (e) => {\n      setTimeout(() => {\n        if (!listRef.current?.contains(document.activeElement)) {\n          setShowSubMenu(false);\n        }\n      });\n      onBlur(e);\n    },\n    [onBlur, setShowSubMenu],\n  );\n\n  const subMenuStyles = useMemo(\n    () => ({\n      position: 'absolute',\n      top: coords.y,\n      left: coords.x,\n      zIndex: 1001 + level,\n      minWidth,\n    }),\n    [coords, level, minWidth],\n  );\n\n  if (!referenceElement || !showSubMenu) return null;\n\n  return (\n    <StyledMenu\n      innerRef={listRef}\n      role=\"menu\"\n      onKeyDown={handleOnMenuKeyDown}\n      onBlur={handleOnBlur}\n      style={subMenuStyles}\n    >\n      {items.map((item) => (\n        <ItemFactory\n          key={item.dsId}\n          item={item}\n          selectionMode={selectionMode}\n          level={level}\n          parentId={parentId}\n          {...getItemProps(item.dsId)}\n        />\n      ))}\n    </StyledMenu>\n  );\n};\n"],
+  "mappings": "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",
   "names": ["React"]
 }

package/dist/esm/parts/MenuButtonContent.js

@@ -27,10 +27,7 @@ const MenuButtonContent = () => {
   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");
-    }
+    const first = items.find((item) => item.type !== "separator" && item.type !== "section");
     return first;
   }, [items]);
   const handleOnKeyDown = useCallback(
@@ -56,10 +53,18 @@ const MenuButtonContent = () => {
     (e) => {
       if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
-        setFocusedOption(items[0]?.dsId);
+        setFocusedOption(firstItem?.dsId || "");
+      }
+      if (e.key === "ArrowDown" && !isOpen) {
+        setIsOpen(true);
+        setFocusedOption(firstItem?.dsId || "");
+      }
+      if (e.key === "ArrowUp" && !isOpen) {
+        setIsOpen(true);
+        setFocusedOption(items[items.length - 1].dsId);
       }
     },
-    [items, setFocusedOption]
+    [firstItem?.dsId, isOpen, items, setFocusedOption, setIsOpen]
   );
   const handleOnClick = useCallback(() => {
     setIsOpen(!isOpen);

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

@@ -1,7 +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, { useMemo, useCallback, useContext, useRef } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { Menu } from './Menu.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 { setFocusedOption, triggerElementRef, setTriggerElementRef, isOpen, setIsOpen, propsWithDefault } =\n    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        triggerElementRef?.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      if ((event.key === 'Enter' || event.key === ' ') && !isOpen && firstItem) {\n        setFocusedOption(firstItem?.dsId);\n      }\n    },\n    [isOpen, firstItem, triggerElementRef, setFocusedOption, items],\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, setIsOpen]);\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={setTriggerElementRef}\n        setIsOpen={setIsOpen}\n        attributes={attributes}\n        listeners={listeners}\n        triggerElementProps={triggerElementProps}\n      />\n      {isOpen && (\n        <Menu\n          level={1}\n          items={items}\n          showSubMenu={isOpen}\n          setShowSubMenu={setIsOpen}\n          referenceElement={triggerElementRef}\n          selectionMode={selectionMode}\n          minWidth={menuMinWidth}\n        />\n      )}\n    </StyledMenuButtonWrapper>\n  );\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport React, { useMemo, useCallback, useContext, useRef } from 'react';\nimport { useGetGlobalAttributes, useGetXstyledProps } from '@elliemae/ds-props-helpers';\nimport { Menu } from './Menu.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 { setFocusedOption, triggerElementRef, setTriggerElementRef, isOpen, setIsOpen, propsWithDefault } =\n    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' && item.type !== 'section');\n    return first;\n  }, [items]);\n\n  const handleOnKeyDown = useCallback(\n    (event: React.KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        triggerElementRef?.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      if ((event.key === 'Enter' || event.key === ' ') && !isOpen && firstItem) {\n        setFocusedOption(firstItem?.dsId);\n      }\n    },\n    [isOpen, firstItem, triggerElementRef, setFocusedOption, items],\n  );\n\n  const handleOnTriggerOnKeyDown = useCallback(\n    (e: React.KeyboardEvent) => {\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault();\n        setFocusedOption(firstItem?.dsId || '');\n      }\n      if (e.key === 'ArrowDown' && !isOpen) {\n        setIsOpen(true);\n        setFocusedOption(firstItem?.dsId || '');\n      }\n      if (e.key === 'ArrowUp' && !isOpen) {\n        setIsOpen(true);\n        setFocusedOption(items[items.length - 1].dsId);\n      }\n    },\n    [firstItem?.dsId, isOpen, items, setFocusedOption, setIsOpen],\n  );\n\n  const handleOnClick = useCallback(() => {\n    setIsOpen(!isOpen);\n  }, [isOpen, setIsOpen]);\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={setTriggerElementRef}\n        setIsOpen={setIsOpen}\n        attributes={attributes}\n        listeners={listeners}\n        triggerElementProps={triggerElementProps}\n      />\n      {isOpen && (\n        <Menu\n          level={1}\n          items={items}\n          showSubMenu={isOpen}\n          setShowSubMenu={setIsOpen}\n          referenceElement={triggerElementRef}\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

@@ -1,13 +1,8 @@
 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 { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from "@elliemae/ds-icons";
+import { DSTypography } from "@elliemae/ds-typography";
 import { mergeRefs } from "@elliemae/ds-system";
 import { Grid } from "@elliemae/ds-grid";
 import { MenuButtonContext } from "../DSMenuButtonCTX.js";
@@ -69,7 +64,7 @@ const MenuItem = ({
   }, [item, onSelectionChange, parentId, selectedKeys, selectionMode]);
   const handleOnClick = useCallback(
     (e) => {
-      if (selectionMode === "multiple" || item.disabled) {
+      if (selectionMode !== "single" || item.disabled) {
         e.stopPropagation();
       }
       selectionLogic();
@@ -155,7 +150,7 @@ const MenuItem = ({
       isOpen: showSubMenu,
       level,
       isVertical,
-      disabled: item.disabled,
+      isDisabled: item.disabled,
       children: [
         /* @__PURE__ */ jsx(
           StyledMenuItemContent,
@@ -210,7 +205,7 @@ const MenuItemContent = React2.memo(
   }) => /* @__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(DSTypography, { variant: "b1", children: item.label })
     ] }),
     /* @__PURE__ */ jsx(StyledRightContent, { children: item.subitems ? /* @__PURE__ */ jsx(MenuItemAddon, { isOpen: showSubMenu, level }) : null })
   ] })
@@ -221,7 +216,7 @@ const SelectionAddon = ({
   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 selectedKeys.includes(item.dsId) ? /* @__PURE__ */ jsx(Grid, { children: /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) }) : /* @__PURE__ */ jsx("div", { style: { width: "16px" } });
   }
   return null;
 };

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

@@ -1,7 +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 { Menu } from './Menu.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    triggerElementRef,\n    setIsOpen,\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 (item.disabled) return;\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' || item.disabled) {\n        e.stopPropagation();\n      }\n      selectionLogic();\n    },\n    [item.disabled, selectionLogic, selectionMode],\n  );\n  const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n    (event) => {\n      // Enter to close the menu and focus the trigger element\n      if (event.key === 'Enter' && !item.disabled) {\n        setIsOpen(false);\n        triggerElementRef?.focus();\n      }\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    [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, 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      disabled={item.disabled}\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        aria-disabled={item.disabled ? 'true' : 'false'}\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        <Menu\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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",
+  "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 { TriangleUpSmall, Checkmark, TriangleDownSmall, ChevronSmallDown, ChevronSmallRight } from '@elliemae/ds-icons';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { DSTypography } from '@elliemae/ds-typography';\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 { Menu } from './Menu.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    triggerElementRef,\n    setIsOpen,\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 (item.disabled) return;\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 !== 'single' || item.disabled) {\n        e.stopPropagation();\n      }\n      selectionLogic();\n    },\n    [item.disabled, selectionLogic, selectionMode],\n  );\n  const onItemKeyDown: React.KeyboardEventHandler = useCallback(\n    (event) => {\n      // Enter to close the menu and focus the trigger element\n      if (event.key === 'Enter' && !item.disabled) {\n        setIsOpen(false);\n        triggerElementRef?.focus();\n      }\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    [item.disabled, item.subitems, level, setIsOpen, triggerElementRef, 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      isDisabled={item.disabled}\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        aria-disabled={item.disabled ? 'true' : 'false'}\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        <Menu\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        <DSTypography variant=\"b1\">{item.label}</DSTypography>\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        <Checkmark size=\"s\" color={['brand-primary', '600']} />\n      </Grid>\n    ) : (\n      <div style={{ width: '16px' }} />\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"]
 }

package/dist/esm/styled.js

@@ -1,15 +1,5 @@
 import * as React from "react";
-import { xStyledCommonProps, styled, css } from "@elliemae/ds-system";
-const disabledOption = () => css`
-  a {
-    color: ${({ theme }) => theme.colors.neutral[500]};
-  }
-  background-color: ${({ theme }) => theme.colors.neutral["000"]};
-  cursor: not-allowed;
-  * {
-    cursor: not-allowed;
-  }
-`;
+import { xStyledCommonProps, styled } from "@elliemae/ds-system";
 const StyledMenuButtonWrapper = styled("div")`
   position: relative;
 `;
@@ -40,9 +30,12 @@ const StyledMenuItem = styled("li")`
     min-width: 200px;
   }
 
-  &:hover {
-    background-color: brand-200;
-  }
+  ${({ isDisabled, theme }) => isDisabled && `
+    color: ${theme.colors.neutral[500]};
+    * {
+      cursor: not-allowed;
+    }
+  `}
 
   a:focus {
     outline: 1px solid brand-500;
@@ -50,8 +43,6 @@ const StyledMenuItem = styled("li")`
   }
 
   ${({ isOpen, theme }) => isOpen ? `background-color: ${theme.colors.brand["200"]}` : ""}
-
-  ${({ disabled }) => disabled ? disabledOption() : ""}
 `;
 const StyledMenuItemContent = styled("a")`
   display: flex;
@@ -95,6 +86,7 @@ const StyledSection = styled("div")`
   display: flex;
   flex-direction: column;
   gap: 1px;
+  color: neutral-500;
 `;
 export {
   StyledLeftContent,

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { xStyledCommonProps, styled, css } from '@elliemae/ds-system';\n\nconst disabledOption = () => css`\n  a {\n    color: ${({ theme }) => theme.colors.neutral[500]};\n  }\n  background-color: ${({ theme }) => theme.colors.neutral['000']};\n  cursor: not-allowed;\n  * {\n    cursor: not-allowed;\n  }\n`;\n\nexport const StyledMenuButtonWrapper = styled('div')`\n  position: relative;\n`;\n\nexport const StyledMenu = styled('ul')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  background-color: white;\n  /* height: 100%; */\n  ${xStyledCommonProps}\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),\n    0 2px 4px rgba(16, 22, 26, 0.2),\n    0 8px 24px rgba(16, 22, 26, 0.2);\n`;\n\nexport const StyledMenuItem = styled('li')<{\n  isVertical?: boolean;\n  level?: number;\n  isOpen?: boolean;\n  disabled?: boolean;\n}>`\n  position: relative;\n  background-color: white;\n  display: flex;\n  margin: 0;\n  min-height: 32px;\n  width: ${({ isVertical, level }) => (!isVertical && level === 0 ? 'auto' : '100%')};\n  cursor: pointer;\n\n  ul li {\n    min-width: 200px;\n  }\n\n  &:hover {\n    background-color: brand-200;\n  }\n\n  a:focus {\n    outline: 1px solid brand-500;\n    background-color: brand-200;\n  }\n\n  ${({ isOpen, theme }) => (isOpen ? `background-color: ${theme.colors.brand['200']}` : '')}\n\n  ${({ disabled }) => (disabled ? disabledOption() : '')}\n`;\n\nexport const StyledMenuItemContent = styled('a')<{ hasChildren?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  text-decoration: none;\n  color: inherit;\n  &:focus {\n    outline: none;\n  }\n  ${({ hasChildren }) => (hasChildren ? 'padding-left: 16px;' : 'padding: 0 16px;')}\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLeftContent = styled('div')`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n`;\n\nexport const StyledRightContent = styled('div')`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSeparator = styled('hr')`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('div')`\n  color: neutral-500;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 0 16px;\n  min-height: 24px;\n  justify-content: center;\n`;\n\nexport const StyledSection = styled('div')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB,QAAQ,WAAW;AAEhD,MAAM,iBAAiB,MAAM;AAAA;AAAA,aAEhB,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA,sBAE/B,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAOzD,MAAM,0BAA0B,OAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,iBAAiB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAgBhF,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAAA,IAEvF,CAAC,EAAE,SAAS,MAAO,WAAW,eAAe,IAAI,EAAG;AAAA;AAGjD,MAAM,wBAAwB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,gBAAgB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { xStyledCommonProps, styled } from '@elliemae/ds-system';\n\nexport const StyledMenuButtonWrapper = styled('div')`\n  position: relative;\n`;\n\nexport const StyledMenu = styled('ul')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  list-style-type: none;\n  padding: 0;\n  margin: 0;\n  background-color: white;\n  /* height: 100%; */\n  ${xStyledCommonProps}\n  box-shadow: 0 0 0 1px rgba(16, 22, 26, 0.1),\n    0 2px 4px rgba(16, 22, 26, 0.2),\n    0 8px 24px rgba(16, 22, 26, 0.2);\n`;\n\nexport const StyledMenuItem = styled('li')<{\n  isVertical?: boolean;\n  level?: number;\n  isOpen?: boolean;\n  isDisabled?: boolean;\n}>`\n  position: relative;\n  background-color: white;\n  display: flex;\n  margin: 0;\n  min-height: 32px;\n  width: ${({ isVertical, level }) => (!isVertical && level === 0 ? 'auto' : '100%')};\n  cursor: pointer;\n\n  ul li {\n    min-width: 200px;\n  }\n\n  ${({ isDisabled, theme }) =>\n    isDisabled &&\n    `\n    color: ${theme.colors.neutral[500]};\n    * {\n      cursor: not-allowed;\n    }\n  `}\n\n  a:focus {\n    outline: 1px solid brand-500;\n    background-color: brand-200;\n  }\n\n  ${({ isOpen, theme }) => (isOpen ? `background-color: ${theme.colors.brand['200']}` : '')}\n`;\n\nexport const StyledMenuItemContent = styled('a')<{ hasChildren?: boolean }>`\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  text-decoration: none;\n  color: inherit;\n  &:focus {\n    outline: none;\n  }\n  ${({ hasChildren }) => (hasChildren ? 'padding-left: 16px;' : 'padding: 0 16px;')}\n  ${xStyledCommonProps}\n`;\n\nexport const StyledLeftContent = styled('div')`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  height: 100%;\n`;\n\nexport const StyledRightContent = styled('div')`\n  display: flex;\n  align-items: center;\n`;\n\nexport const StyledSeparator = styled('hr')`\n  border: 0;\n  border-top: 1px solid #697489;\n  margin: 4px 0px;\n  padding: 0;\n`;\n\nexport const StyledSectionLabel = styled('div')`\n  color: neutral-500;\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  padding: 0 16px;\n  min-height: 24px;\n  justify-content: center;\n`;\n\nexport const StyledSection = styled('div')`\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n  color: neutral-500;\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,oBAAoB,cAAc;AAEpC,MAAM,0BAA0B,OAAO,KAAK;AAAA;AAAA;AAI5C,MAAM,aAAa,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASjC,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAMf,MAAM,iBAAiB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAW9B,CAAC,EAAE,YAAY,MAAM,MAAO,CAAC,cAAc,UAAU,IAAI,SAAS,MAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOhF,CAAC,EAAE,YAAY,MAAM,MACrB,cACA;AAAA,aACS,MAAM,OAAO,QAAQ,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA,GAInC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOC,CAAC,EAAE,QAAQ,MAAM,MAAO,SAAS,qBAAqB,MAAM,OAAO,MAAM,KAAK,CAAC,KAAK,EAAG;AAAA;AAGpF,MAAM,wBAAwB,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAU3C,CAAC,EAAE,YAAY,MAAO,cAAc,wBAAwB,kBAAmB;AAAA,IAC/E,kBAAkB;AAAA;AAGf,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOtC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAKvC,MAAM,kBAAkB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,qBAAqB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUvC,MAAM,gBAAgB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
   "names": []
 }

package/dist/types/styled.d.ts

@@ -4,7 +4,7 @@ export declare const StyledMenuItem: import("styled-components").StyledComponent
     isVertical?: boolean | undefined;
     level?: number | undefined;
     isOpen?: boolean | undefined;
-    disabled?: boolean | undefined;
+    isDisabled?: boolean | undefined;
 } & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"li">, never>;
 export declare const StyledMenuItemContent: import("styled-components").StyledComponent<"a", import("@elliemae/ds-system").Theme, {
     hasChildren?: boolean | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-menu-button",
-  "version": "3.39.1-rc.0",
+  "version": "3.40.0-rc.0",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Menu Button",
   "files": [
@@ -38,21 +38,21 @@
   "dependencies": {
     "@xstyled/styled-components": "~3.6.0",
     "uid": "^2.0.2",
-    "@elliemae/ds-grid": "3.39.1-rc.0",
-    "@elliemae/ds-props-helpers": "3.39.1-rc.0",
-    "@elliemae/ds-icons": "3.39.1-rc.0",
-    "@elliemae/ds-system": "3.39.1-rc.0",
-    "@elliemae/ds-typescript-helpers": "3.39.1-rc.0",
-    "@elliemae/ds-typography": "3.39.1-rc.0",
-    "@elliemae/ds-button-v2": "3.39.1-rc.0",
-    "@elliemae/ds-hooks-keyboard-navigation": "3.39.1-rc.0"
+    "@elliemae/ds-button-v2": "3.40.0-rc.0",
+    "@elliemae/ds-grid": "3.40.0-rc.0",
+    "@elliemae/ds-icons": "3.40.0-rc.0",
+    "@elliemae/ds-props-helpers": "3.40.0-rc.0",
+    "@elliemae/ds-system": "3.40.0-rc.0",
+    "@elliemae/ds-typescript-helpers": "3.40.0-rc.0",
+    "@elliemae/ds-typography": "3.40.0-rc.0",
+    "@elliemae/ds-hooks-keyboard-navigation": "3.40.0-rc.0"
   },
   "devDependencies": {
     "@elliemae/pui-cli": "9.0.0-next.50",
     "@xstyled/system": "3.7.0",
     "lodash": "^4.17.21",
     "styled-components": "~5.3.9",
-    "@elliemae/ds-monorepo-devops": "3.39.1-rc.0"
+    "@elliemae/ds-monorepo-devops": "3.40.0-rc.0"
   },
   "peerDependencies": {
     "lodash": "^4.17.21",