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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useMenuButton.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { useMemo, useState } from 'react';\nimport { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { type MenuButtonT, DSDMenuButtonPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport const useDSMenuButton = <T extends object = object>(propsFromUser: MenuButtonT.Props<T>) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<MenuButtonT.InternalProps<T>>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSDMenuButtonPropTypes);\n\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n\n  const { selectedKeys, onSelectionChange } = propsWithDefault;\n  const [focusedOption, setFocusedOption] = useState<string | null>(null);\n  const [triggerElementRef, setTriggerElementRef] = useState<HTMLElement | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n\n  return useMemo(\n    () => ({\n      propsWithDefault,\n      focusedOption,\n      setFocusedOption,\n      selectedKeys,\n      onSelectionChange,\n      triggerElementRef,\n      setTriggerElementRef,\n      isOpen,\n      setIsOpen,\n    }),\n    [propsWithDefault, focusedOption, selectedKeys, onSelectionChange, triggerElementRef, isOpen],\n  );\n};\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,SAAS,gBAAgB;AAClC,SAAS,oCAAoC;AAC7C,SAA2B,wBAAwB,oBAAoB;AACvE,SAAS,wBAAwB;AAE1B,MAAM,kBAAkB,CAA4B,kBAAwC;AAIjG,QAAM,mBAAmB,6BAA2D,eAAe,YAAY;AAC/G,mBAAiB,kBAAkB,sBAAsB;AAMzD,QAAM,EAAE,cAAc,kBAAkB,IAAI;AAC5C,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAwB,IAAI;AACtE,QAAM,CAAC,mBAAmB,oBAAoB,IAAI,SAA6B,IAAI;AACnF,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,eAAe,cAAc,mBAAmB,mBAAmB,MAAM;AAAA,EAC9F;AACF;",
-  "names": []
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSMenuButtonT, DSMenuButtonPropTypes, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\nimport { useSplitInherithedProps } from './useSplitInherithedProps.js';\nimport { useOptionsArrayToDsTree } from '../utils/useOptionsArrayToDsTree.js';\nimport { getFocusableNodes } from '../utils/nodesTypeguardsAndGetters.js';\nexport interface MenuButtonCTX extends ReturnType<typeof useSplitInherithedProps> {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useMenuButton = (propsFromUser: DSMenuButtonT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSMenuButtonT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSMenuButtonPropTypes);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `menu-button${uid(5)}`, []);\n  const [buttonDOMNode, setButtonDOMNode] = React.useState<HTMLElement | null>(null);\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n\n  // =============================================================================\n  // React hooks can't be invoked conditionally...\n  // =============================================================================\n  const { options: appOptions } = propsWithDefault;\n  const optionsArray: DSMenuButtonT.MenuItemInterface[] = Array.isArray(appOptions) ? appOptions : [];\n\n  const treeRootNodeFromOptionsArrayIfArray = useOptionsArrayToDsTree({\n    options: optionsArray,\n    instanceUid,\n    // this typecast is a safe type reconciliation, typescript checks they are compatible\n    // this typecast let us avoid to have to do the ` | OtherCompatibleType` dance\n  }).getRoot() as DSMenuButtonT.MenuNode;\n  const treeRootNode = React.useMemo(\n    () => (Array.isArray(appOptions) ? treeRootNodeFromOptionsArrayIfArray : appOptions),\n    [appOptions, treeRootNodeFromOptionsArrayIfArray],\n  );\n\n  // =============================================================================\n  // We calculate the focusableNodes from the treeRootNode.plainChildren via getFocusableNodes\n  // =============================================================================\n  const focusableNodes = React.useMemo(() => getFocusableNodes(treeRootNode), [treeRootNode]);\n  const splitInherithedProps = useSplitInherithedProps({\n    propsWithDefault,\n    setButtonDOMNode,\n    buttonDOMNode,\n    focusableNodes,\n    treeRootNode,\n  });\n\n  // =============================================================================\n  // if any item as a repeated dsId, we must throw an error,\n  //   the component will not work properly if the dsId is not guaranteed to be unique\n  //   (only validating focusableNodes may work, but as a good practice it's better to validate the whole tree)\n  // =============================================================================\n  const allNodes = treeRootNode.flatten();\n  const nodesWithRepeatedDsId = allNodes.filter(\n    (node, index, self) => self.findIndex((n) => n.dsId === node.dsId) !== index,\n  );\n  if (nodesWithRepeatedDsId.length > 0) {\n    throw new Error(\n      `DSMenuButton:\\nThe following dsId are repeated:\\n${nodesWithRepeatedDsId\n        .map((n) => n.dsId)\n        .join('\\n ')}\\n\\nThe dsId must be unique.`,\n    );\n  }\n\n  return React.useMemo<MenuButtonCTX>(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n      ...splitInherithedProps,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid, splitInherithedProps],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB,SAA6B,uBAAuB,oBAAoB;AACxE,SAAS,wBAAwB;AACjC,SAAS,+BAA+B;AACxC,SAAS,+BAA+B;AACxC,SAAS,yBAAyB;AAO3B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB,6BAA0D,eAAe,YAAY;AAC9G,mBAAiB,kBAAkB,qBAAqB;AAIxD,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,cAAc,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAClE,QAAM,CAAC,eAAe,gBAAgB,IAAIA,OAAM,SAA6B,IAAI;AAQjF,QAAM,EAAE,SAAS,WAAW,IAAI;AAChC,QAAM,eAAkD,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AAElG,QAAM,sCAAsC,wBAAwB;AAAA,IAClE,SAAS;AAAA,IACT;AAAA;AAAA;AAAA,EAGF,CAAC,EAAE,QAAQ;AACX,QAAM,eAAeA,OAAM;AAAA,IACzB,MAAO,MAAM,QAAQ,UAAU,IAAI,sCAAsC;AAAA,IACzE,CAAC,YAAY,mCAAmC;AAAA,EAClD;AAKA,QAAM,iBAAiBA,OAAM,QAAQ,MAAM,kBAAkB,YAAY,GAAG,CAAC,YAAY,CAAC;AAC1F,QAAM,uBAAuB,wBAAwB;AAAA,IACnD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAOD,QAAM,WAAW,aAAa,QAAQ;AACtC,QAAM,wBAAwB,SAAS;AAAA,IACrC,CAAC,MAAM,OAAO,SAAS,KAAK,UAAU,CAAC,MAAM,EAAE,SAAS,KAAK,IAAI,MAAM;AAAA,EACzE;AACA,MAAI,sBAAsB,SAAS,GAAG;AACpC,UAAM,IAAI;AAAA,MACR;AAAA;AAAA,EAAoD,sBACjD,IAAI,CAAC,MAAM,EAAE,IAAI,EACjB,KAAK,KAAK,CAAC;AAAA;AAAA;AAAA,IAChB;AAAA,EACF;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL;AAAA,IACA,CAAC,kBAAkB,cAAc,aAAa,oBAAoB;AAAA,EACpE;AACF;",
+  "names": ["React"]
 }

package/dist/esm/config/useSplitInherithedProps.js

@@ -0,0 +1,111 @@
+import * as React from "react";
+import React2 from "react";
+const resolveRef = (ref, node) => {
+  if (typeof ref === "function") {
+    ref(node);
+  }
+  if ("current" in ref) {
+    ref.current = node;
+  }
+};
+const useSplitInherithedProps = ({
+  propsWithDefault,
+  setButtonDOMNode,
+  buttonDOMNode,
+  focusableNodes,
+  treeRootNode
+}) => {
+  const buttonDOMNodeRef = React2.useRef(null);
+  const {
+    options,
+    onClickOutside,
+    onOptionClick,
+    openedSubmenus,
+    onSubmenuToggle,
+    isLoading,
+    isSkeleton,
+    selectedOptions,
+    ItemRenderer,
+    innerRef,
+    selectedItems,
+    onDisplayedSubmenuChange,
+    onItemSelected,
+    onActivateItem,
+    onOpen,
+    onClose,
+    ...buttonInheritedProps
+  } = propsWithDefault;
+  const innerRefSnatchingNode = React2.useCallback(
+    (node) => {
+      setButtonDOMNode(node);
+      buttonDOMNodeRef.current = node;
+      if (innerRef) {
+        resolveRef(innerRef, node);
+      }
+    },
+    [innerRef, setButtonDOMNode]
+  );
+  const menuSpecificProps = React2.useMemo(
+    () => ({
+      options,
+      onClickOutside,
+      onOptionClick,
+      openedSubmenus,
+      onSubmenuToggle,
+      isLoading,
+      isSkeleton,
+      selectedOptions,
+      ItemRenderer
+    }),
+    [
+      options,
+      onClickOutside,
+      onOptionClick,
+      openedSubmenus,
+      onSubmenuToggle,
+      isLoading,
+      isSkeleton,
+      selectedOptions,
+      ItemRenderer
+    ]
+  );
+  return React2.useMemo(
+    () => ({
+      menuBehaviouralLayerProps: {
+        buttonDOMNode,
+        buttonDOMNodeRef,
+        selectedItems,
+        focusableNodes,
+        optionsTree: treeRootNode,
+        onDisplayedSubmenuChange,
+        onItemSelected,
+        onActivateItem,
+        onOpen,
+        onClose
+      },
+      opinionatedButtonProps: {
+        ...buttonInheritedProps,
+        innerRef: innerRefSnatchingNode,
+        menuSpecificProps
+      }
+    }),
+    [
+      buttonDOMNode,
+      selectedItems,
+      focusableNodes,
+      treeRootNode,
+      onDisplayedSubmenuChange,
+      onItemSelected,
+      onActivateItem,
+      onOpen,
+      onClose,
+      buttonInheritedProps,
+      innerRefSnatchingNode,
+      menuSpecificProps
+    ]
+  );
+};
+export {
+  useSplitInherithedProps
+};
+//# sourceMappingURL=useSplitInherithedProps.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/config/useSplitInherithedProps.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* *******************************************************\n * From official source definition\n *\n * Menu Button Pattern\n *  About This Pattern:\n *    A menu button is a button\n *      that opens a menu\n *         (as described in the Menu and Menubar Pattern).\n *\n * Since the menu button is a button, it inherits all the props from the Button component.\n * Since the menu button MUST have a menu, it also have a set of specific props used to handle the menu.\n * Because we build with atomic composition in mind, the \"logic layer\" is separated and has a yet another set of props.\n *\n * This is effectively an OOP \"extension\" of the Button component,\n *  so it has the same props,\n *  BUT also a few more to handle the specific behavior of the menu.\n *\n * this hooks is meant to take all the DSMenuButtonT.InternalProps with default already merged\n * and spit out menuSpecificProps & buttonInheritedProps\n ******************************************************* */\nimport {} from '@elliemae/ds-system';\nimport React from 'react';\nimport type { TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type DSMenuButtonT } from '../react-desc-prop-types.js';\n\n// react references may be functions or objects, this helpers identify the type and act accordingly\nconst resolveRef = (\n  ref: React.MutableRefObject<HTMLElement | null> | React.RefCallback<HTMLElement>,\n  node: HTMLElement,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n  }\n  if ('current' in ref) {\n    ref.current = node;\n  }\n};\n\ntype UseSplitInherithedPropsConfig = {\n  propsWithDefault: DSMenuButtonT.InternalProps;\n  buttonDOMNode: HTMLElement | null;\n  setButtonDOMNode: TypescriptHelpersT.StateSetter<HTMLElement | null>;\n  focusableNodes: DSMenuButtonT.PseudoFocusableMenuNodes[];\n  treeRootNode: DSMenuButtonT.MenuNode;\n};\nexport const useSplitInherithedProps = ({\n  propsWithDefault,\n  setButtonDOMNode,\n  buttonDOMNode,\n  focusableNodes,\n  treeRootNode,\n}: UseSplitInherithedPropsConfig) => {\n  const buttonDOMNodeRef = React.useRef<HTMLElement | null>(null);\n  // when this component has been wrote\n  // =============================================================================\n  // MENU BUTTON props are:\n  // Required\n  //  optionsTree, menuSpecificProps\n  // Default (we already have a value because props for this hook are already merged with default props)\n  //  onClickOutside, onOptionClick, openedSubmenus, onSubmenuToggle, isLoading, isSkeleton, selectedOptions\n  // Optional (may or may not be present)\n  //  ItemRenderer\n  // =============================================================================\n  //  Props for the DSMenuBehaviouralContextProvider\n  // =============================================================================\n  // Required\n  //  selectedItems, onItemSelected, onActivateItem,\n  // Optional\n  //  onDisplayedSubmenuChange, onOpen, onClose\n\n  const {\n    options,\n    onClickOutside,\n    onOptionClick,\n    openedSubmenus,\n    onSubmenuToggle,\n    isLoading,\n    isSkeleton,\n    selectedOptions,\n    ItemRenderer,\n    innerRef,\n    selectedItems,\n    onDisplayedSubmenuChange,\n    onItemSelected,\n    onActivateItem,\n    onOpen,\n    onClose,\n    ...buttonInheritedProps\n  } = propsWithDefault;\n\n  // the button is allowed to receive innerRef, but we also need to invoke the setButtonDOMNode to store the button node\n  // so we create a functional ref to do both\n  const innerRefSnatchingNode: Required<DSMenuButtonT.Props>['innerRef'] = React.useCallback(\n    (node: HTMLButtonElement) => {\n      setButtonDOMNode(node);\n      buttonDOMNodeRef.current = node;\n      if (innerRef) {\n        resolveRef(innerRef, node);\n      }\n    },\n    [innerRef, setButtonDOMNode],\n  );\n  const menuSpecificProps = React.useMemo(\n    () => ({\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      selectedOptions,\n      ItemRenderer,\n    }),\n    [\n      options,\n      onClickOutside,\n      onOptionClick,\n      openedSubmenus,\n      onSubmenuToggle,\n      isLoading,\n      isSkeleton,\n      selectedOptions,\n      ItemRenderer,\n    ],\n  );\n\n  return React.useMemo(\n    () => ({\n      menuBehaviouralLayerProps: {\n        buttonDOMNode,\n        buttonDOMNodeRef,\n        selectedItems,\n        focusableNodes,\n        optionsTree: treeRootNode,\n        onDisplayedSubmenuChange,\n        onItemSelected,\n        onActivateItem,\n        onOpen,\n        onClose,\n      },\n      opinionatedButtonProps: {\n        ...(buttonInheritedProps as DSMenuButtonT.ButtonInheritedProps),\n        innerRef: innerRefSnatchingNode,\n        menuSpecificProps,\n      },\n    }),\n    [\n      buttonDOMNode,\n      selectedItems,\n      focusableNodes,\n      treeRootNode,\n      onDisplayedSubmenuChange,\n      onItemSelected,\n      onActivateItem,\n      onOpen,\n      onClose,\n      buttonInheritedProps,\n      innerRefSnatchingNode,\n      menuSpecificProps,\n    ],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACqBvB,OAAOA,YAAW;AAKlB,MAAM,aAAa,CACjB,KACA,SACG;AACH,MAAI,OAAO,QAAQ,YAAY;AAC7B,QAAI,IAAI;AAAA,EACV;AACA,MAAI,aAAa,KAAK;AACpB,QAAI,UAAU;AAAA,EAChB;AACF;AASO,MAAM,0BAA0B,CAAC;AAAA,EACtC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACnC,QAAM,mBAAmBA,OAAM,OAA2B,IAAI;AAkB9D,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,IAAI;AAIJ,QAAM,wBAAmEA,OAAM;AAAA,IAC7E,CAAC,SAA4B;AAC3B,uBAAiB,IAAI;AACrB,uBAAiB,UAAU;AAC3B,UAAI,UAAU;AACZ,mBAAW,UAAU,IAAI;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,UAAU,gBAAgB;AAAA,EAC7B;AACA,QAAM,oBAAoBA,OAAM;AAAA,IAC9B,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AAEA,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL,2BAA2B;AAAA,QACzB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,aAAa;AAAA,QACb;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,wBAAwB;AAAA,QACtB,GAAI;AAAA,QACJ,UAAU;AAAA,QACV;AAAA,MACF;AAAA,IACF;AAAA,IACA;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF;AACF;",
+  "names": ["React"]
+}

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

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

package/dist/esm/constants/index.js

@@ -1,13 +1,26 @@
 import * as React from "react";
 import { slotObjectToDataTestIds } from "@elliemae/ds-system";
 const DSMenuButtonName = "DSMenuButton";
+const MENU_ITEMS_TYPES = {
+  SEPARATOR: "separator",
+  ACTIVABLE_ITEM: "activable-item",
+  ACTIVABLE_WITH_SUBMENU_ITEM: "activable-with-submenu-item",
+  SKELETON_ITEM: "skeleton-item",
+  MULTIPLE_SELECT_ITEM: "multiple-select-item",
+  MULTIPLE_SELECT_WITH_SUBMENU_ITEM: "multiple-select-with-submenu-item",
+  WITH_SUBMENU_ITEM: "with-submenu-item",
+  SINGLE_SELECT_ITEM: "single-select-item",
+  SINGLE_SELECT_WITH_SUBMENU_ITEM: "single-select-with-submenu-item",
+  GROUP: "group"
+};
 const MENU_BUTTON_SLOTS = {
-  root: "root"
+  ROOT: "root"
 };
-const MENU_BUTTON_DATATEST_ID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);
+const MENU_BUTTON_DATA_TESTID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);
 export {
   DSMenuButtonName,
-  MENU_BUTTON_DATATEST_ID,
-  MENU_BUTTON_SLOTS
+  MENU_BUTTON_DATA_TESTID,
+  MENU_BUTTON_SLOTS,
+  MENU_ITEMS_TYPES
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../src/constants/index.ts"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = 'DSMenuButton';\n\n// we are giving \"component_name_slots\" to avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_SLOTS = {\n  root: 'root',\n} as const;\n\n// we are giving \"component_name_data_testid\" to avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_DATATEST_ID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAGzB,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AACR;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSMenuButtonName = 'DSMenuButton';\n\nexport const MENU_ITEMS_TYPES = {\n  SEPARATOR: 'separator',\n  ACTIVABLE_ITEM: 'activable-item',\n  ACTIVABLE_WITH_SUBMENU_ITEM: 'activable-with-submenu-item',\n  SKELETON_ITEM: 'skeleton-item',\n  MULTIPLE_SELECT_ITEM: 'multiple-select-item',\n  MULTIPLE_SELECT_WITH_SUBMENU_ITEM: 'multiple-select-with-submenu-item',\n  WITH_SUBMENU_ITEM: 'with-submenu-item',\n  SINGLE_SELECT_ITEM: 'single-select-item',\n  SINGLE_SELECT_WITH_SUBMENU_ITEM: 'single-select-with-submenu-item',\n  GROUP: 'group',\n} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_SLOTS = {\n  ROOT: 'root',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const MENU_BUTTON_DATA_TESTID = slotObjectToDataTestIds(DSMenuButtonName, MENU_BUTTON_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,mBAAmB;AAAA,EAC9B,WAAW;AAAA,EACX,gBAAgB;AAAA,EAChB,6BAA6B;AAAA,EAC7B,eAAe;AAAA,EACf,sBAAsB;AAAA,EACtB,mCAAmC;AAAA,EACnC,mBAAmB;AAAA,EACnB,oBAAoB;AAAA,EACpB,iCAAiC;AAAA,EACjC,OAAO;AACT;AAGO,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AACR;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
   "names": []
 }

package/dist/esm/index.js

@@ -1,11 +1,15 @@
 import * as React from "react";
 import { DSMenuButton, DSMenuButtonWithSchema } from "./DSMenuButton.js";
-import { DSMenuButtonName, MENU_BUTTON_DATATEST_ID, MENU_BUTTON_SLOTS } from "./constants/index.js";
+import { MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES } from "./constants/index.js";
+import { isFocusableNode } from "./utils/nodesTypeguardsAndGetters.js";
+import { useOptionsArrayToDsTree } from "./utils/useOptionsArrayToDsTree.js";
 export {
   DSMenuButton,
-  DSMenuButtonName,
   DSMenuButtonWithSchema,
-  MENU_BUTTON_DATATEST_ID,
-  MENU_BUTTON_SLOTS
+  MENU_BUTTON_DATA_TESTID,
+  MENU_BUTTON_SLOTS,
+  MENU_ITEMS_TYPES,
+  isFocusableNode,
+  useOptionsArrayToDsTree
 };
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type MenuButtonT } from './react-desc-prop-types.js';\nexport { DSMenuButtonName, MENU_BUTTON_DATATEST_ID, MENU_BUTTON_SLOTS } from './constants/index.js';\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;AAErD,SAAS,kBAAkB,yBAAyB,yBAAyB;",
+  "sources": ["../../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this is a workaround to typescript error TS2742\n// https://github.com/microsoft/TypeScript/issues/47663\nimport type {} from '@xstyled/system';\nexport { DSMenuButton, DSMenuButtonWithSchema } from './DSMenuButton.js';\nexport { type DSMenuButtonT } from './react-desc-prop-types.js';\nexport { MENU_BUTTON_SLOTS, MENU_BUTTON_DATA_TESTID, MENU_ITEMS_TYPES } from './constants/index.js';\nexport { isFocusableNode } from './utils/nodesTypeguardsAndGetters.js';\nexport { useOptionsArrayToDsTree } from './utils/useOptionsArrayToDsTree.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACGvB,SAAS,cAAc,8BAA8B;AAErD,SAAS,mBAAmB,yBAAyB,wBAAwB;AAC7E,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;",
   "names": []
 }

package/dist/esm/parts/DSFlyoutMenu/DSFlyoutMenu.js

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { FloatingWrapper } from "@elliemae/ds-floating-context";
+import { Grid } from "@elliemae/ds-grid";
+import { describe } from "@elliemae/ds-props-helpers";
+import { styled, xStyledCommonProps } from "@elliemae/ds-system";
+import React2 from "react";
+import { MenuBehaviouralContextProviderContext } from "../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js";
+import { DSMenuItemRendererFactory } from "../DSMenuItemRendererFactory/index.js";
+import { useFlyoutMenu } from "./config/useFlyoutMenu.js";
+import { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from "./constants/index.js";
+import { DSFlyoutMenuPropTypesSchema } from "./react-desc-prop-types.js";
+import { isRootNode } from "../../utils/nodesTypeguardsAndGetters.js";
+const StyledWrapper = styled(Grid, { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.ROOT })`
+  min-width: 150px;
+  background-color: white;
+  ${xStyledCommonProps}
+`;
+const StyledMenu = styled("div", { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`
+  padding: 0;
+  margin: 0;
+`;
+const DSFlyoutMenu = (props) => {
+  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);
+  const {
+    instanceUid,
+    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange }
+  } = React2.useContext(MenuBehaviouralContextProviderContext);
+  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;
+  const handleRefChange = React2.useCallback(
+    (node) => {
+      if (isRootNode(itemNode)) {
+        mainMenuRef.current = node;
+        return;
+      }
+      handleSubmenusRefChange(node, itemNode.dsId);
+    },
+    [handleSubmenusRefChange, itemNode, mainMenuRef]
+  );
+  return /* @__PURE__ */ jsx(
+    FloatingWrapper,
+    {
+      innerRef: setFloatingRef,
+      floatingStyles,
+      isOpen: isMenuOpen,
+      context: floatingContext,
+      children: /* @__PURE__ */ jsx(StyledWrapper, { getOwnerProps: () => propsWithDefault, getOwnerPropsArguments: () => ({}), ...xstyledProps, children: /* @__PURE__ */ jsx(StyledMenu, { role: "menu", innerRef: handleRefChange, children: itemNode.children.map((optionNode) => /* @__PURE__ */ jsx(
+        DSMenuItemRendererFactory,
+        {
+          itemNode: optionNode,
+          ItemRenderer,
+          FlyoutMenuCircularDepInject: DSFlyoutMenu
+        },
+        `flyout-menu-item-${optionNode.dsId}-${instanceUid}`
+      )) }) })
+    }
+  );
+};
+DSFlyoutMenu.displayName = DSFlyoutMenuName;
+const DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);
+DSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;
+export {
+  DSFlyoutMenu,
+  DSFlyoutMenuWithSchema
+};
+//# sourceMappingURL=DSFlyoutMenu.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/DSFlyoutMenu.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { FloatingWrapper } from '@elliemae/ds-floating-context';\nimport { Grid } from '@elliemae/ds-grid';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { styled, xStyledCommonProps } from '@elliemae/ds-system';\nimport React from 'react';\nimport type { DSMenuButtonT } from '../../react-desc-prop-types.js';\nimport { MenuBehaviouralContextProviderContext } from '../DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuItemRendererFactory } from '../DSMenuItemRendererFactory/index.js';\nimport { useFlyoutMenu } from './config/useFlyoutMenu.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\nimport { DSFlyoutMenuPropTypesSchema, type DSFlyoutMenuT } from './react-desc-prop-types.js';\nimport { isRootNode } from '../../utils/nodesTypeguardsAndGetters.js';\n\nconst StyledWrapper = styled(Grid, { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.ROOT })`\n  min-width: 150px;\n  background-color: white;\n  ${xStyledCommonProps}\n`;\n\nconst StyledMenu = styled('div', { name: DSFlyoutMenuName, slot: FLYOUT_MENU_SLOTS.LIST_WRAPPER })`\n  padding: 0;\n  margin: 0;\n`;\n\nconst DSFlyoutMenu: React.ComponentType<DSFlyoutMenuT.Props> = (props) => {\n  const { propsWithDefault, xstyledProps } = useFlyoutMenu(props);\n  const {\n    instanceUid,\n    globalEventsHelpers: { mainMenuRef, handleSubmenusRefChange },\n  } = React.useContext(MenuBehaviouralContextProviderContext);\n\n  const { setFloatingRef, floatingStyles, floatingContext, ItemRenderer, isMenuOpen, itemNode } = propsWithDefault;\n\n  const handleRefChange = React.useCallback(\n    (node: HTMLDivElement) => {\n      if (isRootNode(itemNode)) {\n        mainMenuRef.current = node;\n        return;\n      }\n      handleSubmenusRefChange(node, itemNode.dsId);\n    },\n    [handleSubmenusRefChange, itemNode, mainMenuRef],\n  );\n\n  return (\n    <FloatingWrapper\n      innerRef={setFloatingRef}\n      floatingStyles={floatingStyles}\n      isOpen={isMenuOpen}\n      context={floatingContext}\n    >\n      <StyledWrapper getOwnerProps={() => propsWithDefault} getOwnerPropsArguments={() => ({})} {...xstyledProps}>\n        <StyledMenu role=\"menu\" innerRef={handleRefChange}>\n          {itemNode.children.map((optionNode) => (\n            <DSMenuItemRendererFactory\n              key={`flyout-menu-item-${optionNode.dsId}-${instanceUid}`}\n              // DSTree doesn't support children having a polymorphic type, so we need to cast it manually\n              itemNode={optionNode as DSMenuButtonT.MenuNode}\n              ItemRenderer={ItemRenderer}\n              //  we are passing the DSFlyoutMenu component as a prop to the DSMenuItemRendererFactory\n              //    this solves the circular-ish dependency\n              FlyoutMenuCircularDepInject={DSFlyoutMenu}\n            />\n          ))}\n        </StyledMenu>\n      </StyledWrapper>\n    </FloatingWrapper>\n  );\n};\n\nDSFlyoutMenu.displayName = DSFlyoutMenuName;\nconst DSFlyoutMenuWithSchema = describe(DSFlyoutMenu);\nDSFlyoutMenuWithSchema.propTypes = DSFlyoutMenuPropTypesSchema;\n\nexport { DSFlyoutMenu, DSFlyoutMenuWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACsDX;AAtDZ,SAAS,uBAAuB;AAChC,SAAS,YAAY;AACrB,SAAS,gBAAgB;AACzB,SAAS,QAAQ,0BAA0B;AAC3C,OAAOA,YAAW;AAElB,SAAS,6CAA6C;AACtD,SAAS,iCAAiC;AAC1C,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB,yBAAyB;AACpD,SAAS,mCAAuD;AAChE,SAAS,kBAAkB;AAE3B,MAAM,gBAAgB,OAAO,MAAM,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,KAAK,CAAC;AAAA;AAAA;AAAA,IAGvF,kBAAkB;AAAA;AAGtB,MAAM,aAAa,OAAO,OAAO,EAAE,MAAM,kBAAkB,MAAM,kBAAkB,aAAa,CAAC;AAAA;AAAA;AAAA;AAKjG,MAAM,eAAyD,CAAC,UAAU;AACxE,QAAM,EAAE,kBAAkB,aAAa,IAAI,cAAc,KAAK;AAC9D,QAAM;AAAA,IACJ;AAAA,IACA,qBAAqB,EAAE,aAAa,wBAAwB;AAAA,EAC9D,IAAIA,OAAM,WAAW,qCAAqC;AAE1D,QAAM,EAAE,gBAAgB,gBAAgB,iBAAiB,cAAc,YAAY,SAAS,IAAI;AAEhG,QAAM,kBAAkBA,OAAM;AAAA,IAC5B,CAAC,SAAyB;AACxB,UAAI,WAAW,QAAQ,GAAG;AACxB,oBAAY,UAAU;AACtB;AAAA,MACF;AACA,8BAAwB,MAAM,SAAS,IAAI;AAAA,IAC7C;AAAA,IACA,CAAC,yBAAyB,UAAU,WAAW;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,UAAU;AAAA,MACV;AAAA,MACA,QAAQ;AAAA,MACR,SAAS;AAAA,MAET,8BAAC,iBAAc,eAAe,MAAM,kBAAkB,wBAAwB,OAAO,CAAC,IAAK,GAAG,cAC5F,8BAAC,cAAW,MAAK,QAAO,UAAU,iBAC/B,mBAAS,SAAS,IAAI,CAAC,eACtB;AAAA,QAAC;AAAA;AAAA,UAGC,UAAU;AAAA,UACV;AAAA,UAGA,6BAA6B;AAAA;AAAA,QANxB,oBAAoB,WAAW,IAAI,IAAI,WAAW;AAAA,MAOzD,CACD,GACH,GACF;AAAA;AAAA,EACF;AAEJ;AAEA,aAAa,cAAc;AAC3B,MAAM,yBAAyB,SAAS,YAAY;AACpD,uBAAuB,YAAY;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSFlyoutMenu/config/useFlyoutMenu.js

@@ -0,0 +1,24 @@
+import * as React from "react";
+import React2 from "react";
+import { useGetXstyledProps, useMemoMergePropsWithDefault } from "@elliemae/ds-props-helpers";
+import { uid } from "uid";
+import { DSFlyoutMenuPropTypesSchema, defaultProps } from "../react-desc-prop-types.js";
+import { useValidateProps } from "./useValidateProps.js";
+const useFlyoutMenu = (propsFromUser) => {
+  const propsWithDefault = useMemoMergePropsWithDefault(propsFromUser, defaultProps);
+  useValidateProps(propsWithDefault, DSFlyoutMenuPropTypesSchema);
+  const xstyledProps = useGetXstyledProps(propsWithDefault);
+  const instanceUid = React2.useMemo(() => `ds-flyout-menu-${uid(5)}`, []);
+  return React2.useMemo(
+    () => ({
+      propsWithDefault,
+      xstyledProps,
+      instanceUid
+    }),
+    [propsWithDefault, xstyledProps, instanceUid]
+  );
+};
+export {
+  useFlyoutMenu
+};
+//# sourceMappingURL=useFlyoutMenu.js.map

package/dist/esm/parts/DSFlyoutMenu/config/useFlyoutMenu.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSFlyoutMenu/config/useFlyoutMenu.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { useGetXstyledProps, useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';\nimport { uid } from 'uid';\nimport { type DSFlyoutMenuT, DSFlyoutMenuPropTypesSchema, defaultProps } from '../react-desc-prop-types.js';\nimport { useValidateProps } from './useValidateProps.js';\n\nexport interface FlyoutMenuReturnedType {\n  propsWithDefault: DSFlyoutMenuT.InternalProps;\n  xstyledProps: ReturnType<typeof useGetXstyledProps>;\n  instanceUid: string;\n}\n\nexport const useFlyoutMenu = (propsFromUser: DSFlyoutMenuT.Props) => {\n  // =============================================================================\n  // MERGE WITH DEFAULT AND VALIDATE PROPS\n  // =============================================================================\n  const propsWithDefault = useMemoMergePropsWithDefault<DSFlyoutMenuT.InternalProps>(propsFromUser, defaultProps);\n  useValidateProps(propsWithDefault, DSFlyoutMenuPropTypesSchema);\n  // =============================================================================\n  // XSTYLED PROPS\n  // =============================================================================\n  const xstyledProps = useGetXstyledProps(propsWithDefault);\n  // =============================================================================\n  // AD HOC PER COMPONENT LOGIC\n  // =============================================================================\n  // custom code goes here, this is an example\n  const instanceUid = React.useMemo(() => `ds-flyout-menu-${uid(5)}`, []);\n\n  // =============================================================================\n  // HELPERS HOOKS CONFIGS\n  // =============================================================================\n\n  return React.useMemo<FlyoutMenuReturnedType>(\n    () => ({\n      propsWithDefault,\n      xstyledProps,\n      instanceUid,\n    }),\n    [propsWithDefault, xstyledProps, instanceUid],\n  );\n};\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,OAAOA,YAAW;AAClB,SAAS,oBAAoB,oCAAoC;AACjE,SAAS,WAAW;AACpB,SAA6B,6BAA6B,oBAAoB;AAC9E,SAAS,wBAAwB;AAQ1B,MAAM,gBAAgB,CAAC,kBAAuC;AAInE,QAAM,mBAAmB,6BAA0D,eAAe,YAAY;AAC9G,mBAAiB,kBAAkB,2BAA2B;AAI9D,QAAM,eAAe,mBAAmB,gBAAgB;AAKxD,QAAM,cAAcA,OAAM,QAAQ,MAAM,kBAAkB,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC;AAMtE,SAAOA,OAAM;AAAA,IACX,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,cAAc,WAAW;AAAA,EAC9C;AACF;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSFlyoutMenu/config/useValidateProps.js

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

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

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

package/dist/esm/parts/DSFlyoutMenu/constants/index.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { slotObjectToDataTestIds } from "@elliemae/ds-system";
+const DSFlyoutMenuName = "DSFlyoutMenu";
+const EXAMPLE_CONSTANTS = {};
+const FLYOUT_MENU_SLOTS = {
+  ROOT: "root",
+  LIST_WRAPPER: "list-wrapper"
+};
+const FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);
+export {
+  DSFlyoutMenuName,
+  EXAMPLE_CONSTANTS,
+  FLYOUT_MENU_DATA_TESTID,
+  FLYOUT_MENU_SLOTS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSFlyoutMenu/constants/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { slotObjectToDataTestIds } from '@elliemae/ds-system';\n\nexport const DSFlyoutMenuName = 'DSFlyoutMenu';\n\nexport const EXAMPLE_CONSTANTS = {} as const;\n\n// we are naming this with the ${component_name}_slots convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_SLOTS = {\n  ROOT: 'root',\n  LIST_WRAPPER: 'list-wrapper',\n} as const;\n\n// we are naming this with the ${component_name}_data_testid convention to namespace & avoid errors on duplicate exports variables in aggregators\nexport const FLYOUT_MENU_DATA_TESTID = slotObjectToDataTestIds(DSFlyoutMenuName, FLYOUT_MENU_SLOTS);\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,+BAA+B;AAEjC,MAAM,mBAAmB;AAEzB,MAAM,oBAAoB,CAAC;AAG3B,MAAM,oBAAoB;AAAA,EAC/B,MAAM;AAAA,EACN,cAAc;AAChB;AAGO,MAAM,0BAA0B,wBAAwB,kBAAkB,iBAAiB;",
+  "names": []
+}

package/dist/esm/parts/DSFlyoutMenu/index.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { DSFlyoutMenu, DSFlyoutMenuWithSchema } from "./DSFlyoutMenu.js";
+export {
+  DSFlyoutMenu,
+  DSFlyoutMenuWithSchema
+};
+//# sourceMappingURL=index.js.map

package/dist/esm/parts/DSFlyoutMenu/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/index.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { DSFlyoutMenu, DSFlyoutMenuWithSchema } from './DSFlyoutMenu.js';\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc,8BAA8B;",
+  "names": []
+}

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

@@ -0,0 +1,40 @@
+import * as React from "react";
+import {
+  PropTypes,
+  getPropsPerSlotPropTypes,
+  globalAttributesPropTypes,
+  xstyledPropTypes
+} from "@elliemae/ds-props-helpers";
+import {
+  DSMenuSpecificPropTypes,
+  defaultProps as menuSpecificDefaultProps
+} from "../../react-desc-prop-types.js";
+import { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from "./constants/index.js";
+const defaultProps = { ...menuSpecificDefaultProps };
+const DSFlyoutMenuPropTypes = {
+  itemNode: PropTypes.object.description("The parent menu node to render the menu from").isRequired,
+  setFloatingRef: PropTypes.func.description(
+    "The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)"
+  ).isRequired,
+  floatingStyles: PropTypes.object.description(
+    "The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)"
+  ).isRequired,
+  floatingContext: PropTypes.object.description(
+    "The context object from useFloatingContext, used to allow FloatingWrapper correct functionality"
+  ).isRequired,
+  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,
+  isMenuOpen: PropTypes.bool.description("Wheter or not this particular instance of the flyout menu is open").isRequired,
+  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),
+  ...globalAttributesPropTypes,
+  // this component is meant to be used from a ds-menu-button compliant API,
+  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...
+  ...DSMenuSpecificPropTypes,
+  ...xstyledPropTypes
+};
+const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes;
+export {
+  DSFlyoutMenuPropTypes,
+  DSFlyoutMenuPropTypesSchema,
+  defaultProps
+};
+//# sourceMappingURL=react-desc-prop-types.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSFlyoutMenu/react-desc-prop-types.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable @typescript-eslint/no-empty-interface */\nimport type { DSPropTypesSchema, ValidationMap } from '@elliemae/ds-props-helpers';\nimport {\n  PropTypes,\n  getPropsPerSlotPropTypes,\n  globalAttributesPropTypes,\n  xstyledPropTypes,\n} from '@elliemae/ds-props-helpers';\nimport { type TypescriptHelpersT } from '@elliemae/ds-typescript-helpers';\nimport { type useFloatingContext } from '@elliemae/ds-floating-context';\nimport {\n  DSMenuSpecificPropTypes,\n  defaultProps as menuSpecificDefaultProps,\n  type DSMenuButtonT,\n} from '../../react-desc-prop-types.js';\nimport { DSFlyoutMenuName, FLYOUT_MENU_SLOTS } from './constants/index.js';\n\nexport declare namespace DSFlyoutMenuT {\n  /*\n   * everything that is specifically added in this namespace declaration and is not part of the original component\n   * is because the original component is an \"opinionated widget\" that offloads a chunk of responsibilities from dev to dimsum\n   * as such, the widget generates those interfaces,\n   *  but the app developer is not supposed to know about them\n   *    untill they go atomic composition (this namespace)\n   */\n  export interface RequiredProps extends DSMenuButtonT.MenuSpecificRequiredProps {\n    // anchorNode: HTMLElement | null;\n    isMenuOpen: boolean;\n    itemNode:\n      | DSMenuButtonT.MenuNodeWithSubmenuItem\n      | DSMenuButtonT.MenuNodeSingleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeMultipleSelectWithSubmenuItem\n      | DSMenuButtonT.MenuNodeActivableWithSubmenuItem\n      | DSMenuButtonT.MenuNodeRootItem;\n    setFloatingRef: ReturnType<typeof useFloatingContext>['refs']['setFloating'];\n    floatingStyles: ReturnType<typeof useFloatingContext>['floatingStyles'];\n    floatingContext: ReturnType<typeof useFloatingContext>['context'];\n  }\n\n  export interface DefaultProps extends DSMenuButtonT.MenuSpecifiDefaultProps {}\n\n  export interface OptionalProps\n    extends TypescriptHelpersT.PropsForGlobalOnSlots<typeof DSFlyoutMenuName, typeof FLYOUT_MENU_SLOTS>,\n      DSMenuButtonT.MenuSpecificOptionalProps {}\n\n  export interface Props extends RequiredProps, Partial<DefaultProps>, OptionalProps {}\n\n  export interface InternalProps extends RequiredProps, DefaultProps, OptionalProps {}\n}\n\nexport const defaultProps: DSFlyoutMenuT.DefaultProps = { ...menuSpecificDefaultProps };\n\nexport const DSFlyoutMenuPropTypes: DSPropTypesSchema<DSFlyoutMenuT.Props> = {\n  itemNode: PropTypes.object.description('The parent menu node to render the menu from').isRequired,\n  setFloatingRef: PropTypes.func.description(\n    'The function to set the ref of the floating element (from useFloatingContext.refs.setFloating)',\n  ).isRequired,\n  floatingStyles: PropTypes.object.description(\n    'The styles to apply to the floating element to correctly position it (from useFloatingContext.floatingStyles)',\n  ).isRequired,\n  floatingContext: PropTypes.object.description(\n    'The context object from useFloatingContext, used to allow FloatingWrapper correct functionality',\n  ).isRequired,\n  // anchorNode: PropTypes.instanceOf(HTMLElement).isRequired,\n  isMenuOpen: PropTypes.bool.description('Wheter or not this particular instance of the flyout menu is open')\n    .isRequired,\n  ...getPropsPerSlotPropTypes(DSFlyoutMenuName, FLYOUT_MENU_SLOTS),\n  ...globalAttributesPropTypes,\n  // this component is meant to be used from a ds-menu-button compliant API,\n  //  for this reason we want to inherit the DSMenuButton props interface that relates to the menu and not the button...\n  ...DSMenuSpecificPropTypes,\n  ...xstyledPropTypes,\n};\n\nexport const DSFlyoutMenuPropTypesSchema = DSFlyoutMenuPropTypes as unknown as ValidationMap<DSFlyoutMenuT.Props>;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACEvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA,gBAAgB;AAAA,OAEX;AACP,SAAS,kBAAkB,yBAAyB;AAmC7C,MAAM,eAA2C,EAAE,GAAG,yBAAyB;AAE/E,MAAM,wBAAgE;AAAA,EAC3E,UAAU,UAAU,OAAO,YAAY,8CAA8C,EAAE;AAAA,EACvF,gBAAgB,UAAU,KAAK;AAAA,IAC7B;AAAA,EACF,EAAE;AAAA,EACF,gBAAgB,UAAU,OAAO;AAAA,IAC/B;AAAA,EACF,EAAE;AAAA,EACF,iBAAiB,UAAU,OAAO;AAAA,IAChC;AAAA,EACF,EAAE;AAAA;AAAA,EAEF,YAAY,UAAU,KAAK,YAAY,mEAAmE,EACvG;AAAA,EACH,GAAG,yBAAyB,kBAAkB,iBAAiB;AAAA,EAC/D,GAAG;AAAA;AAAA;AAAA,EAGH,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,8BAA8B;",
+  "names": []
+}

package/dist/esm/parts/DSMenuBehaviouralContextProvider/DSMenuBehaviouralContextProvider.js

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { describe } from "@elliemae/ds-props-helpers";
+import { useOnBlurOut } from "@elliemae/ds-hooks-on-blur-out";
+import {
+  DSMenuBehaviouralContextProviderPropTypesSchema
+} from "./react-desc-prop-types.js";
+import { useMenuBehaviouralContextProvider } from "./config/useMenuBehaviouralContextProvider.js";
+import { MenuBehaviouralContextProviderContext } from "./MenuBehaviouralContextProviderCTX.js";
+import { DSMenuBehaviouralContextProviderName } from "./constants/index.js";
+const DSMenuBehaviouralContextProvider = (props) => {
+  const ctx = useMenuBehaviouralContextProvider(props);
+  const {
+    trackFocusRegionReset,
+    propsWithDefault: { children },
+    preventBlurReset
+  } = ctx;
+  const config = React2.useMemo(
+    () => ({
+      onBlur: () => {
+        if (!preventBlurReset.current) {
+          trackFocusRegionReset();
+          setTimeout(() => {
+            preventBlurReset.current = false;
+          });
+        }
+      }
+    }),
+    [preventBlurReset, trackFocusRegionReset]
+  );
+  const handleOnBlurOut = useOnBlurOut(config);
+  return /* @__PURE__ */ jsx(MenuBehaviouralContextProviderContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { onBlur: handleOnBlurOut, children }) });
+};
+DSMenuBehaviouralContextProvider.displayName = DSMenuBehaviouralContextProviderName;
+const DSMenuBehaviouralContextProviderWithSchema = describe(DSMenuBehaviouralContextProvider);
+DSMenuBehaviouralContextProviderWithSchema.propTypes = DSMenuBehaviouralContextProviderPropTypesSchema;
+export {
+  DSMenuBehaviouralContextProvider,
+  DSMenuBehaviouralContextProviderWithSchema
+};
+//# sourceMappingURL=DSMenuBehaviouralContextProvider.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuBehaviouralContextProvider/DSMenuBehaviouralContextProvider.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "// this not interactive per se, the implementation is listening the bubble phase of the events\n// from the children, this is the MVC pattern in action\n/* eslint-disable jsx-a11y/no-static-element-interactions */\nimport React from 'react';\nimport { describe } from '@elliemae/ds-props-helpers';\nimport { useOnBlurOut } from '@elliemae/ds-hooks-on-blur-out';\nimport {\n  type DSMenuBehaviouralContextProviderT,\n  DSMenuBehaviouralContextProviderPropTypesSchema,\n} from './react-desc-prop-types.js';\nimport { useMenuBehaviouralContextProvider } from './config/useMenuBehaviouralContextProvider.js';\nimport { MenuBehaviouralContextProviderContext } from './MenuBehaviouralContextProviderCTX.js';\nimport { DSMenuBehaviouralContextProviderName } from './constants/index.js';\n\nconst DSMenuBehaviouralContextProvider: React.ComponentType<DSMenuBehaviouralContextProviderT.Props> = (props) => {\n  const ctx = useMenuBehaviouralContextProvider(props);\n  const {\n    trackFocusRegionReset,\n    propsWithDefault: { children },\n    preventBlurReset,\n  } = ctx;\n\n  const config = React.useMemo(\n    () => ({\n      onBlur: () => {\n        // we have a portal, the portal temporarily steals the focus\n        //  invoking the blur event\n        // when the blur event is invoked because the focus is stolen we do not want to reset the focus\n        // any other blur event should reset the focus\n        if (!preventBlurReset.current) {\n          trackFocusRegionReset();\n          setTimeout(() => {\n            preventBlurReset.current = false;\n          });\n        }\n      },\n    }),\n    [preventBlurReset, trackFocusRegionReset],\n  );\n  const handleOnBlurOut = useOnBlurOut(config);\n  return (\n    <MenuBehaviouralContextProviderContext.Provider value={ctx}>\n      <div onBlur={handleOnBlurOut}>{children}</div>\n    </MenuBehaviouralContextProviderContext.Provider>\n  );\n};\n\nDSMenuBehaviouralContextProvider.displayName = DSMenuBehaviouralContextProviderName;\nconst DSMenuBehaviouralContextProviderWithSchema = describe(DSMenuBehaviouralContextProvider);\nDSMenuBehaviouralContextProviderWithSchema.propTypes = DSMenuBehaviouralContextProviderPropTypesSchema;\n\nexport { DSMenuBehaviouralContextProvider, DSMenuBehaviouralContextProviderWithSchema };\n"],
+  "mappings": "AAAA,YAAY,WAAW;AC0CjB;AAvCN,OAAOA,YAAW;AAClB,SAAS,gBAAgB;AACzB,SAAS,oBAAoB;AAC7B;AAAA,EAEE;AAAA,OACK;AACP,SAAS,yCAAyC;AAClD,SAAS,6CAA6C;AACtD,SAAS,4CAA4C;AAErD,MAAM,mCAAiG,CAAC,UAAU;AAChH,QAAM,MAAM,kCAAkC,KAAK;AACnD,QAAM;AAAA,IACJ;AAAA,IACA,kBAAkB,EAAE,SAAS;AAAA,IAC7B;AAAA,EACF,IAAI;AAEJ,QAAM,SAASA,OAAM;AAAA,IACnB,OAAO;AAAA,MACL,QAAQ,MAAM;AAKZ,YAAI,CAAC,iBAAiB,SAAS;AAC7B,gCAAsB;AACtB,qBAAW,MAAM;AACf,6BAAiB,UAAU;AAAA,UAC7B,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,kBAAkB,qBAAqB;AAAA,EAC1C;AACA,QAAM,kBAAkB,aAAa,MAAM;AAC3C,SACE,oBAAC,sCAAsC,UAAtC,EAA+C,OAAO,KACrD,8BAAC,SAAI,QAAQ,iBAAkB,UAAS,GAC1C;AAEJ;AAEA,iCAAiC,cAAc;AAC/C,MAAM,6CAA6C,SAAS,gCAAgC;AAC5F,2CAA2C,YAAY;",
+  "names": ["React"]
+}

package/dist/esm/parts/DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { createContext } from "react";
+const defaultContext = {};
+const MenuBehaviouralContextProviderContext = createContext(defaultContext);
+var MenuBehaviouralContextProviderCTX_default = MenuBehaviouralContextProviderContext;
+export {
+  MenuBehaviouralContextProviderContext,
+  MenuBehaviouralContextProviderCTX_default as default
+};
+//# sourceMappingURL=MenuBehaviouralContextProviderCTX.js.map

package/dist/esm/parts/DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSMenuBehaviouralContextProvider/MenuBehaviouralContextProviderCTX.ts"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { createContext } from 'react';\nimport type { MenuBehaviouralContextProviderCTX } from './config/useMenuBehaviouralContextProvider.js';\n\nconst defaultContext = {} as MenuBehaviouralContextProviderCTX;\n\n/** Context for cross component communication */\nexport const MenuBehaviouralContextProviderContext = createContext<MenuBehaviouralContextProviderCTX>(defaultContext);\n\nexport default MenuBehaviouralContextProviderContext;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,qBAAqB;AAG9B,MAAM,iBAAiB,CAAC;AAGjB,MAAM,wCAAwC,cAAiD,cAAc;AAEpH,IAAO,4CAAQ;",
+  "names": []
+}