@elliemae/ds-menu-button 3.45.0-rc.1 → 3.45.0-rc.2

package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js

@@ -0,0 +1,91 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel,
+  StyledContentWrapper,
+  StyledGlobalMenuItemWrapper
+} from "@elliemae/ds-menu-items-commons";
+import React2 from "react";
+import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
+import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
+const ActivableMenuItem = ({
+  itemNode
+}) => {
+  const { dsId, plainItem } = itemNode;
+  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const {
+    focusRegion,
+    menuItemEventsHandlers: {
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }
+  } = React2.useContext(MenuBehaviouralContextProviderContext);
+  const gridLayout = React2.useMemo(() => {
+    const cols = LeftDecComponent ? ["min-content", "auto"] : ["auto"];
+    if (secondaryLabel) cols.push("auto");
+    return cols;
+  }, [LeftDecComponent, secondaryLabel]);
+  const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
+  focusedRegionPerformanceHelper.current = focusRegion;
+  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
+  const handleFocusOnRender = React2.useCallback(
+    (node) => {
+      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        node.focus();
+      }
+    },
+    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
+    [dsId, focusRegion]
+    // we are using the "as='div'", typescript is not able to infer the correct type
+    // the logic here actually receives a ref to a HTMLDivElement,
+    //   but the component must think this is a HTMLLIElement ref callback
+  );
+  const handleOnMouseEnter = React2.useCallback(
+    (e) => {
+      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+    },
+    [handleFocusableMenuItemOnMouseEnter, itemNode]
+  );
+  const handleOnFocusReconciliation = React2.useCallback(() => {
+    handleMenuItemFocusReconciliation(itemNode);
+  }, [handleMenuItemFocusReconciliation, itemNode]);
+  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
+  return /* @__PURE__ */ jsx(
+    StyledGlobalMenuItemWrapper,
+    {
+      innerRef: handleFocusOnRender,
+      onKeyDown: handleFocusableMenuItemKeyDown,
+      onClick: handleFocusableMenuItemClick,
+      onMouseEnter: handleOnMouseEnter,
+      onFocus: handleOnFocusReconciliation,
+      as: "div",
+      id: `${spacelessDsIdForDom}`,
+      role: "menuitem",
+      tabIndex: isFocused ? 0 : -1,
+      "aria-disabled": disabled,
+      applyAriaDisabled: disabled,
+      children: /* @__PURE__ */ jsxs(
+        StyledContentWrapper,
+        {
+          cols: gridLayout,
+          minHeight: "16px",
+          gutter: "xxs",
+          alignItems: "center",
+          minWidth: minWidth ?? void 0,
+          children: [
+            LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
+            /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
+            secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  ActivableMenuItem
+};
+//# sourceMappingURL=ActivableMenuItem.js.map

package/dist/esm/parts/DSMenuItemRendererFactory/ActivableMenuItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/ActivableMenuItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\n\nexport const ActivableMenuItem: React.ComponentType<{ itemNode: DSMenuButtonT.MenuNodeActivableItem }> = ({\n  itemNode,\n}) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n\n  const {\n    focusRegion,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      onFocus={handleOnFocusReconciliation}\n      as=\"div\"\n      id={`${spacelessDsIdForDom}`}\n      role=\"menuitem\"\n      tabIndex={isFocused ? 0 : -1}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n      >\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n        {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC6EjB,SAOsB,KAPtB;AA5EN;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAE5B,MAAM,oBAA4F,CAAC;AAAA,EACxG;AACF,MAAM;AACJ,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AAExF,QAAM;AAAA,IACJ;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,MAAM,IAAI,CAAC,MAAM;AACjE,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AAEtE,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AACA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,MAAM;AACL,0CAAoC,UAAU,CAAC;AAAA,IACjD;AAAA,IACA,CAAC,qCAAqC,QAAQ;AAAA,EAChD;AACA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,sCAAkC,QAAQ;AAAA,EAC5C,GAAG,CAAC,mCAAmC,QAAQ,CAAC;AAEhD,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AAExE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,SAAS;AAAA,MACT,IAAG;AAAA,MACH,IAAI,GAAG,mBAAmB;AAAA,MAC1B,MAAK;AAAA,MACL,UAAU,YAAY,IAAI;AAAA,MAC1B,iBAAe;AAAA,MACf,mBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAErB;AAAA,+BAAmB,oBAAC,oBAAiB,IAAK;AAAA,YAC3C,oBAAC,sBAAoB,iBAAM;AAAA,YAC1B,mBAAmB,UAAa,oBAAC,+BAA6B,0BAAe;AAAA;AAAA;AAAA,MAChF;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js

@@ -0,0 +1,134 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel,
+  StyledContentWrapper,
+  StyledGlobalMenuItemWrapper
+} from "@elliemae/ds-menu-items-commons";
+import React2 from "react";
+import { useFloatingContext } from "@elliemae/ds-floating-context";
+import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
+import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
+const placementOrderPreference = [
+  "right-start",
+  "right-start",
+  "right",
+  "left-start",
+  "left-end",
+  "left"
+];
+const ActivableWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
+  const { dsId, plainItem } = itemNode;
+  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const floatingContext = useFloatingContext({
+    placement: placementOrderPreference[0],
+    placementOrderPreference,
+    animationDuration: 100,
+    customOffset: [0, 0]
+  });
+  const {
+    refs: { setReference }
+  } = floatingContext;
+  const {
+    focusRegion,
+    openedSubItems,
+    menuItemEventsHandlers: {
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }
+  } = React2.useContext(MenuBehaviouralContextProviderContext);
+  const gridLayout = React2.useMemo(() => {
+    const cols = LeftDecComponent ? ["min-content", "auto"] : ["auto"];
+    if (secondaryLabel) cols.push("auto");
+    return cols;
+  }, [LeftDecComponent, secondaryLabel]);
+  const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
+  focusedRegionPerformanceHelper.current = focusRegion;
+  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
+  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
+  const handleFocusOnRender = React2.useCallback(
+    (node) => {
+      setReference(node);
+      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        node.focus();
+      }
+    },
+    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
+    [dsId, focusRegion, setReference]
+    // we are using the "as='div'", typescript is not able to infer the correct type
+    // the logic here actually receives a ref to a HTMLDivElement,
+    //   but the component must think this is a HTMLLIElement ref callback
+  );
+  const handleOnMouseEnter = React2.useCallback(
+    (e) => {
+      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+    },
+    [handleFocusableMenuItemOnMouseEnter, itemNode]
+  );
+  const handleOnFocusReconciliation = React2.useCallback(() => {
+    handleMenuItemFocusReconciliation(itemNode);
+  }, [handleMenuItemFocusReconciliation, itemNode]);
+  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StyledGlobalMenuItemWrapper,
+      {
+        innerRef: handleFocusOnRender,
+        onKeyDown: handleFocusableMenuItemKeyDown,
+        onClick: handleFocusableMenuItemClick,
+        onMouseEnter: handleOnMouseEnter,
+        onFocus: handleOnFocusReconciliation,
+        as: "div",
+        id: `${spacelessDsIdForDom}`,
+        tabIndex: isFocused ? 0 : -1,
+        role: "menuitem",
+        "aria-controls": (
+          /* ********************************************************************************************************************
+           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls
+           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.
+           * ********************************************************************************************************************
+           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM
+           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error
+           * ******************************************************************************************************************** */
+          isExpanded ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
+        ),
+        "aria-haspopup": "menu",
+        "aria-expanded": isExpanded,
+        "aria-disabled": disabled,
+        applyAriaDisabled: disabled,
+        children: /* @__PURE__ */ jsxs(
+          StyledContentWrapper,
+          {
+            cols: gridLayout,
+            minHeight: "16px",
+            gutter: "xxs",
+            alignItems: "center",
+            minWidth: minWidth ?? void 0,
+            children: [
+              LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
+              /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
+              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FlyoutMenuCircularDepInject,
+      {
+        isMenuOpen: isExpanded,
+        floatingContext: floatingContext.context,
+        floatingStyles: floatingContext.floatingStyles,
+        setFloatingRef: floatingContext.refs.setFloating,
+        itemNode
+      }
+    )
+  ] });
+};
+export {
+  ActivableWithSubmenuMenuItem
+};
+//# sourceMappingURL=ActivableWithSubmenuMenuItem.js.map

package/dist/esm/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/ActivableWithSubmenuMenuItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useFloatingContext, type DSHookFloatingContextT } from '@elliemae/ds-floating-context';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\nimport { type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nconst placementOrderPreference: Required<DSHookFloatingContextT.Props>['placementOrderPreference'] = [\n  'right-start',\n  'right-start',\n  'right',\n  'left-start',\n  'left-end',\n  'left',\n];\nexport const ActivableWithSubmenuMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeActivableWithSubmenuItem;\n  FlyoutMenuCircularDepInject: DSMenuItemRendererFactoryT.RequiredProps['FlyoutMenuCircularDepInject'];\n}> = ({ itemNode, FlyoutMenuCircularDepInject }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n  const floatingContext = useFloatingContext({\n    placement: placementOrderPreference[0],\n    placementOrderPreference,\n    animationDuration: 100,\n    customOffset: [0, 0],\n  });\n  const {\n    refs: { setReference },\n  } = floatingContext;\n\n  const {\n    focusRegion,\n    openedSubItems,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'auto'] : ['auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      setReference(node);\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion, setReference],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <>\n      <StyledGlobalMenuItemWrapper\n        innerRef={handleFocusOnRender}\n        onKeyDown={handleFocusableMenuItemKeyDown}\n        onClick={handleFocusableMenuItemClick}\n        onMouseEnter={handleOnMouseEnter}\n        onFocus={handleOnFocusReconciliation}\n        as=\"div\"\n        id={`${spacelessDsIdForDom}`}\n        tabIndex={isFocused ? 0 : -1}\n        role=\"menuitem\"\n        aria-controls={\n          /* ********************************************************************************************************************\n           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls\n           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.\n           * ********************************************************************************************************************\n           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM\n           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error\n           * ******************************************************************************************************************** */\n          isExpanded\n            ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\\s/g, '')}`).join(' ')\n            : undefined\n        }\n        aria-haspopup=\"menu\"\n        aria-expanded={isExpanded}\n        aria-disabled={disabled}\n        applyAriaDisabled={disabled}\n      >\n        <StyledContentWrapper\n          cols={gridLayout}\n          minHeight=\"16px\"\n          gutter=\"xxs\"\n          alignItems=\"center\"\n          minWidth={minWidth ?? undefined}\n        >\n          {LeftDecComponent ? <LeftDecComponent /> : null}\n          <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n          {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n        </StyledContentWrapper>\n      </StyledGlobalMenuItemWrapper>\n      <FlyoutMenuCircularDepInject\n        isMenuOpen={isExpanded}\n        floatingContext={floatingContext.context}\n        floatingStyles={floatingContext.floatingStyles}\n        setFloatingRef={floatingContext.refs.setFloating}\n        itemNode={itemNode}\n      />\n    </>\n  );\n};\n"],
+  "mappings": "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",
+  "names": ["React"]
+}

package/dist/esm/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.js

@@ -0,0 +1,78 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { describe } from "@elliemae/ds-props-helpers";
+import { StyledGroupLabel } from "@elliemae/ds-menu-items-commons";
+import { useMenuItemRendererFactory } from "./config/useMenuItemRendererFactory.js";
+import { DSMenuItemRendererFactoryName } from "./constants/index.js";
+import { DSMenuItemRendererFactoryPropTypesSchema } from "./react-desc-prop-types.js";
+import { ActivableMenuItem } from "./ActivableMenuItem.js";
+import { SingleSelectMenuItem } from "./SingleSelectMenuItem.js";
+import { SingleSelectWithSubmenuMenuItem } from "./SingleSelectWithSubmenuMenuItem.js";
+import { MultipleSelectMenuItem } from "./MultipleSelectMenuItem.js";
+import { WithSubmenuMenuItem } from "./WithSubmenuMenuItem.js";
+import { MultipleSelectWithSubmenuMenuItem } from "./MultipleSelectWithSubmenuMenuItem.js";
+import { ActivableWithSubmenuMenuItem } from "./ActivableWithSubmenuMenuItem.js";
+import {
+  isActivableNode,
+  isSkeletonNode,
+  isMultipleSelectOnlyNode,
+  isSingleSelectOnlyNode,
+  isSeparatorNode,
+  isGroup,
+  isWithSubmenuOnlyNode,
+  isSingleSelectNodeWithSubmenu,
+  isMultipleSelectWithSubmenuNode,
+  isActivableWithSubmenuNode
+} from "../../utils/nodesTypeguardsAndGetters.js";
+const DSMenuItemRendererFactory = (props) => {
+  const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);
+  const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;
+  if (ItemRenderer) return /* @__PURE__ */ jsx(ItemRenderer, { itemNode });
+  if (isSeparatorNode(itemNode)) return /* @__PURE__ */ jsx("hr", {});
+  if (isSkeletonNode(itemNode)) return /* @__PURE__ */ jsx("li", { children: "loading..." });
+  if (isActivableNode(itemNode)) return /* @__PURE__ */ jsx(ActivableMenuItem, { itemNode });
+  if (isMultipleSelectOnlyNode(itemNode)) return /* @__PURE__ */ jsx(MultipleSelectMenuItem, { itemNode });
+  if (isSingleSelectOnlyNode(itemNode)) return /* @__PURE__ */ jsx(SingleSelectMenuItem, { itemNode });
+  if (isWithSubmenuOnlyNode(itemNode))
+    return /* @__PURE__ */ jsx(WithSubmenuMenuItem, { itemNode, FlyoutMenuCircularDepInject });
+  if (isSingleSelectNodeWithSubmenu(itemNode))
+    return /* @__PURE__ */ jsx(SingleSelectWithSubmenuMenuItem, { itemNode, FlyoutMenuCircularDepInject });
+  if (isMultipleSelectWithSubmenuNode(itemNode))
+    return /* @__PURE__ */ jsx(
+      MultipleSelectWithSubmenuMenuItem,
+      {
+        itemNode,
+        FlyoutMenuCircularDepInject
+      }
+    );
+  if (isActivableWithSubmenuNode(itemNode))
+    return /* @__PURE__ */ jsx(ActivableWithSubmenuMenuItem, { itemNode, FlyoutMenuCircularDepInject });
+  if (isGroup(itemNode)) {
+    const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;
+    const spacelessIdForGroup = label ? `label-${label.replace(/\s/g, "")}` : void 0;
+    return /* @__PURE__ */ jsxs("div", { role: "group", "aria-labelledby": spacelessIdForGroup, style: minWidth ? { minWidth } : {}, children: [
+      label ? /* @__PURE__ */ jsxs(Grid, { cols: LeftDecComponent ? ["min-content", "1fr"] : ["1fr"], children: [
+        LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
+        /* @__PURE__ */ jsx(StyledGroupLabel, { role: "presentation", id: spacelessIdForGroup, children: label })
+      ] }) : null,
+      itemNode.children.map((subItemNode) => /* @__PURE__ */ jsx(
+        DSMenuItemRendererFactory,
+        {
+          itemNode: subItemNode,
+          FlyoutMenuCircularDepInject
+        },
+        `item-factory-${subItemNode.dsId}-${instanceUid}`
+      ))
+    ] });
+  }
+  throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);
+};
+DSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;
+const DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);
+DSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;
+export {
+  DSMenuItemRendererFactory,
+  DSMenuItemRendererFactoryWithSchema
+};
+//# sourceMappingURL=DSMenuItemRendererFactory.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/DSMenuItemRendererFactory.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable complexity */\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { StyledGroupLabel } from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport { useMenuItemRendererFactory } from './config/useMenuItemRendererFactory.js';\nimport { DSMenuItemRendererFactoryName } from './constants/index.js';\nimport { DSMenuItemRendererFactoryPropTypesSchema, type DSMenuItemRendererFactoryT } from './react-desc-prop-types.js';\nimport { ActivableMenuItem } from './ActivableMenuItem.js';\nimport { SingleSelectMenuItem } from './SingleSelectMenuItem.js';\nimport { SingleSelectWithSubmenuMenuItem } from './SingleSelectWithSubmenuMenuItem.js';\nimport { MultipleSelectMenuItem } from './MultipleSelectMenuItem.js';\nimport { WithSubmenuMenuItem } from './WithSubmenuMenuItem.js';\nimport { MultipleSelectWithSubmenuMenuItem } from './MultipleSelectWithSubmenuMenuItem.js';\nimport { ActivableWithSubmenuMenuItem } from './ActivableWithSubmenuMenuItem.js';\nimport {\n  isActivableNode,\n  isSkeletonNode,\n  isMultipleSelectOnlyNode,\n  isSingleSelectOnlyNode,\n  isSeparatorNode,\n  isGroup,\n  isWithSubmenuOnlyNode,\n  isSingleSelectNodeWithSubmenu,\n  isMultipleSelectWithSubmenuNode,\n  isActivableWithSubmenuNode,\n} from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst DSMenuItemRendererFactory: React.ComponentType<DSMenuItemRendererFactoryT.Props> = (props) => {\n  const { propsWithDefault, instanceUid } = useMenuItemRendererFactory(props);\n  const { itemNode, ItemRenderer, FlyoutMenuCircularDepInject } = propsWithDefault;\n\n  if (ItemRenderer) return <ItemRenderer itemNode={itemNode} />;\n\n  if (isSeparatorNode(itemNode)) return <hr />;\n  if (isSkeletonNode(itemNode)) return <li>loading...</li>;\n  if (isActivableNode(itemNode)) return <ActivableMenuItem itemNode={itemNode} />;\n  if (isMultipleSelectOnlyNode(itemNode)) return <MultipleSelectMenuItem itemNode={itemNode} />;\n  if (isSingleSelectOnlyNode(itemNode)) return <SingleSelectMenuItem itemNode={itemNode} />;\n\n  if (isWithSubmenuOnlyNode(itemNode))\n    return <WithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />;\n  if (isSingleSelectNodeWithSubmenu(itemNode))\n    return (\n      <SingleSelectWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n    );\n  if (isMultipleSelectWithSubmenuNode(itemNode))\n    return (\n      <MultipleSelectWithSubmenuMenuItem\n        itemNode={itemNode}\n        FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n      />\n    );\n  if (isActivableWithSubmenuNode(itemNode))\n    return (\n      <ActivableWithSubmenuMenuItem itemNode={itemNode} FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject} />\n    );\n\n  // defined in this file to avoid to have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component\n  //  if we eventually move this to a separate file,\n  //     we will have to inject the ItemRendererFactory prop in the \"GroupMenuItem\" component to avoid circular dependencies\n  if (isGroup(itemNode)) {\n    const { leftDecoration: LeftDecComponent, label, minWidth } = itemNode.plainItem;\n    const spacelessIdForGroup = label ? `label-${label.replace(/\\s/g, '')}` : undefined;\n\n    return (\n      <div role=\"group\" aria-labelledby={spacelessIdForGroup} style={minWidth ? { minWidth } : {}}>\n        {label ? (\n          <Grid cols={LeftDecComponent ? ['min-content', '1fr'] : ['1fr']}>\n            {LeftDecComponent ? <LeftDecComponent /> : null}\n            <StyledGroupLabel role=\"presentation\" id={spacelessIdForGroup}>\n              {label}\n            </StyledGroupLabel>\n          </Grid>\n        ) : null}\n        {itemNode.children.map((subItemNode) => (\n          <DSMenuItemRendererFactory\n            key={`item-factory-${subItemNode.dsId}-${instanceUid}`}\n            itemNode={subItemNode}\n            FlyoutMenuCircularDepInject={FlyoutMenuCircularDepInject}\n          />\n        ))}\n      </div>\n    );\n  }\n\n  // if we get here either\n  // - a new type of item has been added and this component wasn't updated\n  //   -> update this component to handle the new type\n  // - developer provided an invalid type for the item\n  //   -> developer should fix the item type\n  // ----------\n  // the following rule is disabled because this is LITERALLY an error throwing section,\n  //    of course typescript thinks type is never, that's why we are throwing an error...\n  // ----------\n  // eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n  throw new Error(`Invalid item type: ${JSON.stringify(itemNode)}`);\n};\n\nDSMenuItemRendererFactory.displayName = DSMenuItemRendererFactoryName;\nconst DSMenuItemRendererFactoryWithSchema = describe(DSMenuItemRendererFactory);\nDSMenuItemRendererFactoryWithSchema.propTypes = DSMenuItemRendererFactoryPropTypesSchema;\n\nexport { DSMenuItemRendererFactory, DSMenuItemRendererFactoryWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACgCI,cAoCjB,YApCiB;AA/B3B,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,wBAAwB;AAEjC,SAAS,kCAAkC;AAC3C,SAAS,qCAAqC;AAC9C,SAAS,gDAAiF;AAC1F,SAAS,yBAAyB;AAClC,SAAS,4BAA4B;AACrC,SAAS,uCAAuC;AAChD,SAAS,8BAA8B;AACvC,SAAS,2BAA2B;AACpC,SAAS,yCAAyC;AAClD,SAAS,oCAAoC;AAC7C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAEP,MAAM,4BAAmF,CAAC,UAAU;AAClG,QAAM,EAAE,kBAAkB,YAAY,IAAI,2BAA2B,KAAK;AAC1E,QAAM,EAAE,UAAU,cAAc,4BAA4B,IAAI;AAEhE,MAAI,aAAc,QAAO,oBAAC,gBAAa,UAAoB;AAE3D,MAAI,gBAAgB,QAAQ,EAAG,QAAO,oBAAC,QAAG;AAC1C,MAAI,eAAe,QAAQ,EAAG,QAAO,oBAAC,QAAG,wBAAU;AACnD,MAAI,gBAAgB,QAAQ,EAAG,QAAO,oBAAC,qBAAkB,UAAoB;AAC7E,MAAI,yBAAyB,QAAQ,EAAG,QAAO,oBAAC,0BAAuB,UAAoB;AAC3F,MAAI,uBAAuB,QAAQ,EAAG,QAAO,oBAAC,wBAAqB,UAAoB;AAEvF,MAAI,sBAAsB,QAAQ;AAChC,WAAO,oBAAC,uBAAoB,UAAoB,6BAA0D;AAC5G,MAAI,8BAA8B,QAAQ;AACxC,WACE,oBAAC,mCAAgC,UAAoB,6BAA0D;AAEnH,MAAI,gCAAgC,QAAQ;AAC1C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA;AAAA,IACF;AAEJ,MAAI,2BAA2B,QAAQ;AACrC,WACE,oBAAC,gCAA6B,UAAoB,6BAA0D;AAMhH,MAAI,QAAQ,QAAQ,GAAG;AACrB,UAAM,EAAE,gBAAgB,kBAAkB,OAAO,SAAS,IAAI,SAAS;AACvE,UAAM,sBAAsB,QAAQ,SAAS,MAAM,QAAQ,OAAO,EAAE,CAAC,KAAK;AAE1E,WACE,qBAAC,SAAI,MAAK,SAAQ,mBAAiB,qBAAqB,OAAO,WAAW,EAAE,SAAS,IAAI,CAAC,GACvF;AAAA,cACC,qBAAC,QAAK,MAAM,mBAAmB,CAAC,eAAe,KAAK,IAAI,CAAC,KAAK,GAC3D;AAAA,2BAAmB,oBAAC,oBAAiB,IAAK;AAAA,QAC3C,oBAAC,oBAAiB,MAAK,gBAAe,IAAI,qBACvC,iBACH;AAAA,SACF,IACE;AAAA,MACH,SAAS,SAAS,IAAI,CAAC,gBACtB;AAAA,QAAC;AAAA;AAAA,UAEC,UAAU;AAAA,UACV;AAAA;AAAA,QAFK,gBAAgB,YAAY,IAAI,IAAI,WAAW;AAAA,MAGtD,CACD;AAAA,OACH;AAAA,EAEJ;AAYA,QAAM,IAAI,MAAM,sBAAsB,KAAK,UAAU,QAAQ,CAAC,EAAE;AAClE;AAEA,0BAA0B,cAAc;AACxC,MAAM,sCAAsC,SAAS,yBAAyB;AAC9E,oCAAoC,YAAY;",
+  "names": []
+}

package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Grid } from "@elliemae/ds-grid";
+import { Checkmark } from "@elliemae/ds-icons";
+import {
+  StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel,
+  StyledContentWrapper,
+  StyledGlobalMenuItemWrapper
+} from "@elliemae/ds-menu-items-commons";
+import React2 from "react";
+import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
+import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
+const LeftBoxlessCheckbox = React2.memo(({ isSelected }) => /* @__PURE__ */ jsx(Grid, { width: "16px", children: isSelected ? /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) : /* @__PURE__ */ jsx("div", {}) }));
+const MultipleSelectMenuItem = ({ itemNode }) => {
+  const { dsId, plainItem } = itemNode;
+  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const {
+    focusRegion,
+    propsWithDefault,
+    menuItemEventsHandlers: {
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }
+  } = React2.useContext(MenuBehaviouralContextProviderContext);
+  const { selectedItems } = propsWithDefault;
+  const gridLayout = React2.useMemo(() => {
+    const cols = LeftDecComponent ? ["min-content", "min-content", "auto"] : ["min-content", "auto"];
+    if (secondaryLabel) cols.push("auto");
+    return cols;
+  }, [LeftDecComponent, secondaryLabel]);
+  const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
+  focusedRegionPerformanceHelper.current = focusRegion;
+  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
+  const isSelected = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);
+  const handleFocusOnRender = React2.useCallback(
+    (node) => {
+      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        node.focus();
+      }
+    },
+    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
+    [dsId, focusRegion]
+    // we are using the "as='div'", typescript is not able to infer the correct type
+    // the logic here actually receives a ref to a HTMLDivElement,
+    //   but the component must think this is a HTMLLIElement ref callback
+  );
+  const handleOnMouseEnter = React2.useCallback(
+    (e) => {
+      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+    },
+    [handleFocusableMenuItemOnMouseEnter, itemNode]
+  );
+  const handleOnFocusReconciliation = React2.useCallback(() => {
+    handleMenuItemFocusReconciliation(itemNode);
+  }, [handleMenuItemFocusReconciliation, itemNode]);
+  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
+  return /* @__PURE__ */ jsx(
+    StyledGlobalMenuItemWrapper,
+    {
+      innerRef: handleFocusOnRender,
+      onKeyDown: handleFocusableMenuItemKeyDown,
+      onClick: handleFocusableMenuItemClick,
+      onMouseEnter: handleOnMouseEnter,
+      as: "div",
+      onFocus: handleOnFocusReconciliation,
+      id: `${spacelessDsIdForDom}`,
+      tabIndex: isFocused ? 0 : -1,
+      role: "menuitemcheckbox",
+      "aria-checked": isSelected,
+      "aria-disabled": disabled,
+      applyAriaDisabled: disabled,
+      children: /* @__PURE__ */ jsxs(
+        StyledContentWrapper,
+        {
+          cols: gridLayout,
+          minHeight: "16px",
+          gutter: "xxs",
+          alignItems: "center",
+          minWidth: minWidth ?? void 0,
+          children: [
+            /* @__PURE__ */ jsx(LeftBoxlessCheckbox, { isSelected }),
+            LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
+            /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
+            secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  MultipleSelectMenuItem
+};
+//# sourceMappingURL=MultipleSelectMenuItem.js.map

package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuItemRendererFactory/MultipleSelectMenuItem.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { Checkmark } from '@elliemae/ds-icons';\nimport {\n  StyleMenuItemLabel,\n  StyleMenuItemSecondaryLabel,\n  StyledContentWrapper,\n  StyledGlobalMenuItemWrapper,\n} from '@elliemae/ds-menu-items-commons';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { MENU_FOCUS_REGIONS } from '../DSMenuBehaviouralContextProvider/constants/index.js';\n\nconst LeftBoxlessCheckbox = React.memo(({ isSelected }: { isSelected: boolean }) => (\n  <Grid width=\"16px\">{isSelected ? <Checkmark size=\"s\" color={['brand-primary', '600']} /> : <div />}</Grid>\n));\nexport const MultipleSelectMenuItem: React.ComponentType<{\n  itemNode: DSMenuButtonT.MenuNodeMultipleSelectItem;\n}> = ({ itemNode }) => {\n  const { dsId, plainItem } = itemNode;\n  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;\n  const {\n    focusRegion,\n    propsWithDefault,\n    menuItemEventsHandlers: {\n      handleFocusableMenuItemKeyDown,\n      handleFocusableMenuItemClick,\n      handleFocusableMenuItemOnMouseEnter,\n      handleMenuItemFocusReconciliation,\n    },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n  const { selectedItems } = propsWithDefault;\n\n  const gridLayout = React.useMemo(() => {\n    const cols = LeftDecComponent ? ['min-content', 'min-content', 'auto'] : ['min-content', 'auto'];\n    if (secondaryLabel) cols.push('auto');\n    return cols;\n  }, [LeftDecComponent, secondaryLabel]);\n\n  const focusedRegionPerformanceHelper = React.useRef(focusRegion);\n  focusedRegionPerformanceHelper.current = focusRegion;\n\n  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);\n  const isSelected = selectedItems.some((itemMarkesAsSelected) => itemMarkesAsSelected.dsId === dsId);\n\n  const handleFocusOnRender = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {\n        node.focus();\n      }\n    },\n    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set\n    [dsId, focusRegion],\n    // we are using the \"as='div'\", typescript is not able to infer the correct type\n    // the logic here actually receives a ref to a HTMLDivElement,\n    //   but the component must think this is a HTMLLIElement ref callback\n  ) as unknown as React.RefCallback<HTMLLIElement>;\n\n  const handleOnMouseEnter = React.useCallback<React.MouseEventHandler<HTMLDivElement>>(\n    (e) => {\n      handleFocusableMenuItemOnMouseEnter(itemNode, e);\n    },\n    [handleFocusableMenuItemOnMouseEnter, itemNode],\n  );\n  const handleOnFocusReconciliation = React.useCallback(() => {\n    handleMenuItemFocusReconciliation(itemNode);\n  }, [handleMenuItemFocusReconciliation, itemNode]);\n\n  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\\s/g, '')}`;\n  return (\n    <StyledGlobalMenuItemWrapper\n      innerRef={handleFocusOnRender}\n      onKeyDown={handleFocusableMenuItemKeyDown}\n      onClick={handleFocusableMenuItemClick}\n      onMouseEnter={handleOnMouseEnter}\n      as=\"div\"\n      onFocus={handleOnFocusReconciliation}\n      id={`${spacelessDsIdForDom}`}\n      tabIndex={isFocused ? 0 : -1}\n      role=\"menuitemcheckbox\"\n      aria-checked={isSelected}\n      aria-disabled={disabled}\n      applyAriaDisabled={disabled}\n    >\n      <StyledContentWrapper\n        cols={gridLayout}\n        minHeight=\"16px\"\n        gutter=\"xxs\"\n        alignItems=\"center\"\n        minWidth={minWidth ?? undefined}\n      >\n        <LeftBoxlessCheckbox isSelected={isSelected} />\n        {LeftDecComponent ? <LeftDecComponent /> : null}\n        <StyleMenuItemLabel>{label}</StyleMenuItemLabel>\n        {secondaryLabel !== undefined && <StyleMenuItemSecondaryLabel>{secondaryLabel}</StyleMenuItemSecondaryLabel>}\n      </StyledContentWrapper>\n    </StyledGlobalMenuItemWrapper>\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACcY,cAsE7B,YAtE6B;AAdnC,SAAS,YAAY;AACrB,SAAS,iBAAiB;AAC1B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,0BAA0B;AAEnC,MAAM,sBAAsBA,OAAM,KAAK,CAAC,EAAE,WAAW,MACnD,oBAAC,QAAK,OAAM,QAAQ,uBAAa,oBAAC,aAAU,MAAK,KAAI,OAAO,CAAC,iBAAiB,KAAK,GAAG,IAAK,oBAAC,SAAI,GAAG,CACpG;AACM,MAAM,yBAER,CAAC,EAAE,SAAS,MAAM;AACrB,QAAM,EAAE,MAAM,UAAU,IAAI;AAC5B,QAAM,EAAE,OAAO,gBAAgB,gBAAgB,kBAAkB,UAAU,SAAS,IAAI;AACxF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,IAAIA,OAAM,WAAW,qCAAqC;AAC1D,QAAM,EAAE,cAAc,IAAI;AAE1B,QAAM,aAAaA,OAAM,QAAQ,MAAM;AACrC,UAAM,OAAO,mBAAmB,CAAC,eAAe,eAAe,MAAM,IAAI,CAAC,eAAe,MAAM;AAC/F,QAAI,eAAgB,MAAK,KAAK,MAAM;AACpC,WAAO;AAAA,EACT,GAAG,CAAC,kBAAkB,cAAc,CAAC;AAErC,QAAM,iCAAiCA,OAAM,OAAO,WAAW;AAC/D,iCAA+B,UAAU;AAEzC,QAAM,YAAY,gBAAgB,mBAAmB,aAAa,IAAI;AACtE,QAAM,aAAa,cAAc,KAAK,CAAC,yBAAyB,qBAAqB,SAAS,IAAI;AAElG,QAAM,sBAAsBA,OAAM;AAAA,IAChC,CAAC,SAAyB;AACxB,UAAI,QAAQ,gBAAgB,mBAAmB,aAAa,IAAI,GAAG;AACjE,aAAK,MAAM;AAAA,MACb;AAAA,IACF;AAAA;AAAA,IAEA,CAAC,MAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIpB;AAEA,QAAM,qBAAqBA,OAAM;AAAA,IAC/B,CAAC,MAAM;AACL,0CAAoC,UAAU,CAAC;AAAA,IACjD;AAAA,IACA,CAAC,qCAAqC,QAAQ;AAAA,EAChD;AACA,QAAM,8BAA8BA,OAAM,YAAY,MAAM;AAC1D,sCAAkC,QAAQ;AAAA,EAC5C,GAAG,CAAC,mCAAmC,QAAQ,CAAC;AAEhD,QAAM,sBAAsB,gBAAgB,GAAG,IAAI,GAAG,QAAQ,OAAO,EAAE,CAAC;AACxE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV,WAAW;AAAA,MACX,SAAS;AAAA,MACT,cAAc;AAAA,MACd,IAAG;AAAA,MACH,SAAS;AAAA,MACT,IAAI,GAAG,mBAAmB;AAAA,MAC1B,UAAU,YAAY,IAAI;AAAA,MAC1B,MAAK;AAAA,MACL,gBAAc;AAAA,MACd,iBAAe;AAAA,MACf,mBAAmB;AAAA,MAEnB;AAAA,QAAC;AAAA;AAAA,UACC,MAAM;AAAA,UACN,WAAU;AAAA,UACV,QAAO;AAAA,UACP,YAAW;AAAA,UACX,UAAU,YAAY;AAAA,UAEtB;AAAA,gCAAC,uBAAoB,YAAwB;AAAA,YAC5C,mBAAmB,oBAAC,oBAAiB,IAAK;AAAA,YAC3C,oBAAC,sBAAoB,iBAAM;AAAA,YAC1B,mBAAmB,UAAa,oBAAC,+BAA6B,0BAAe;AAAA;AAAA;AAAA,MAChF;AAAA;AAAA,EACF;AAEJ;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSMenuItemRendererFactory/MultipleSelectWithSubmenuMenuItem.js

@@ -0,0 +1,148 @@
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFloatingContext } from "@elliemae/ds-floating-context";
+import { Grid } from "@elliemae/ds-grid";
+import { Checkmark, ChevronSmallRight, ParenthesisRemove } from "@elliemae/ds-icons";
+import {
+  StyleMenuItemLabel,
+  StyleMenuItemSecondaryLabel,
+  StyledContentWrapper,
+  StyledGlobalMenuItemWrapper
+} from "@elliemae/ds-menu-items-commons";
+import React2 from "react";
+import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
+import { MENU_FOCUS_REGIONS } from "../DSMenuBehaviouralContextProvider/constants/index.js";
+import { getIsMultipleSelectNodeWithSubmenuSelected } from "../DSMenuBehaviouralContextProvider/utils/multipleSelectionHelpers.js";
+const placementOrderPreference = [
+  "right-start",
+  "right-start",
+  "right",
+  "left-start",
+  "left-end",
+  "left"
+];
+const LeftBoxlessCheckbox = React2.memo(({ isSelected }) => /* @__PURE__ */ jsx(Grid, { width: "16px", children: isSelected ? isSelected === "mixed" ? /* @__PURE__ */ jsx(ParenthesisRemove, { size: "s", color: ["brand-primary", "600"] }) : /* @__PURE__ */ jsx(Checkmark, { size: "s", color: ["brand-primary", "600"] }) : /* @__PURE__ */ jsx("div", {}) }));
+const MultipleSelectWithSubmenuMenuItem = ({ itemNode, FlyoutMenuCircularDepInject }) => {
+  const { dsId, plainItem } = itemNode;
+  const { label, secondaryLabel, leftDecoration: LeftDecComponent, minWidth, disabled } = plainItem;
+  const floatingContext = useFloatingContext({
+    placement: placementOrderPreference[0],
+    placementOrderPreference,
+    animationDuration: 100,
+    customOffset: [0, 0]
+  });
+  const {
+    refs: { setReference }
+  } = floatingContext;
+  const {
+    focusRegion,
+    propsWithDefault,
+    openedSubItems,
+    menuItemEventsHandlers: {
+      handleFocusableMenuItemKeyDown,
+      handleFocusableMenuItemClick,
+      handleFocusableMenuItemOnMouseEnter,
+      handleMenuItemFocusReconciliation
+    }
+  } = React2.useContext(MenuBehaviouralContextProviderContext);
+  const { selectedItems } = propsWithDefault;
+  const gridLayout = React2.useMemo(() => {
+    const cols = LeftDecComponent ? ["min-content", "min-content", "auto"] : ["min-content", "auto"];
+    if (secondaryLabel) cols.push("auto");
+    cols.push("min-content");
+    return cols;
+  }, [LeftDecComponent, secondaryLabel]);
+  const focusedRegionPerformanceHelper = React2.useRef(focusRegion);
+  focusedRegionPerformanceHelper.current = focusRegion;
+  const isExpanded = openedSubItems.some((itemWithOpenSubmenu) => itemWithOpenSubmenu.dsId === dsId);
+  const isFocused = focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId);
+  const isSelected = React2.useMemo(
+    () => getIsMultipleSelectNodeWithSubmenuSelected({ itemNode, selectedItems }),
+    [itemNode, selectedItems]
+  );
+  const handleFocusOnRender = React2.useCallback(
+    (node) => {
+      setReference(node);
+      if (node && focusRegion === MENU_FOCUS_REGIONS.ITEM_BY_DSID(dsId)) {
+        node.focus();
+      }
+    },
+    // we need to change the callback reference every time the focusRegion changes or else the focus will not be set
+    [dsId, focusRegion, setReference]
+    // we are using the "as='div'", typescript is not able to infer the correct type
+    // the logic here actually receives a ref to a HTMLDivElement,
+    //   but the component must think this is a HTMLLIElement ref callback
+  );
+  const handleOnMouseEnter = React2.useCallback(
+    (e) => {
+      handleFocusableMenuItemOnMouseEnter(itemNode, e);
+    },
+    [handleFocusableMenuItemOnMouseEnter, itemNode]
+  );
+  const handleOnFocusReconciliation = React2.useCallback(() => {
+    handleMenuItemFocusReconciliation(itemNode);
+  }, [handleMenuItemFocusReconciliation, itemNode]);
+  const spacelessDsIdForDom = `ds-menu-item-${`${dsId}`.replace(/\s/g, "")}`;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      StyledGlobalMenuItemWrapper,
+      {
+        innerRef: handleFocusOnRender,
+        onKeyDown: handleFocusableMenuItemKeyDown,
+        onClick: handleFocusableMenuItemClick,
+        onMouseEnter: handleOnMouseEnter,
+        onFocus: handleOnFocusReconciliation,
+        as: "div",
+        id: `${spacelessDsIdForDom}`,
+        tabIndex: isFocused ? 0 : -1,
+        role: "menuitemcheckbox",
+        "aria-checked": isSelected,
+        "aria-controls": (
+          /* ********************************************************************************************************************
+           * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls
+           *    The aria-controls only needs to be set when the popup is visible, but it is valid and easier to program to reference an element that is not visible.
+           * ********************************************************************************************************************
+           * ^^^ some automated tools will mark an error if the aria-controls references an element that does (yet) exist in the DOM
+           *  so, while technically valid to not check if expanded, we are doing it to avoid automated tools marking an error
+           * ******************************************************************************************************************** */
+          isExpanded ? itemNode.plainChildren.map((child) => `ds-menu-item-${`${child.dsId}`.replace(/\s/g, "")}`).join(" ") : void 0
+        ),
+        "aria-haspopup": "menu",
+        "aria-expanded": isExpanded,
+        "aria-disabled": disabled,
+        applyAriaDisabled: disabled,
+        children: /* @__PURE__ */ jsxs(
+          StyledContentWrapper,
+          {
+            cols: gridLayout,
+            minHeight: "16px",
+            gutter: "xxs",
+            alignItems: "center",
+            minWidth: minWidth ?? void 0,
+            children: [
+              /* @__PURE__ */ jsx(LeftBoxlessCheckbox, { isSelected }),
+              LeftDecComponent ? /* @__PURE__ */ jsx(LeftDecComponent, {}) : null,
+              /* @__PURE__ */ jsx(StyleMenuItemLabel, { children: label }),
+              secondaryLabel !== void 0 && /* @__PURE__ */ jsx(StyleMenuItemSecondaryLabel, { children: secondaryLabel }),
+              /* @__PURE__ */ jsx(ChevronSmallRight, {})
+            ]
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      FlyoutMenuCircularDepInject,
+      {
+        isMenuOpen: isExpanded,
+        floatingContext: floatingContext.context,
+        floatingStyles: floatingContext.floatingStyles,
+        setFloatingRef: floatingContext.refs.setFloating,
+        itemNode
+      }
+    )
+  ] });
+};
+export {
+  MultipleSelectWithSubmenuMenuItem
+};
+//# sourceMappingURL=MultipleSelectWithSubmenuMenuItem.js.map