@salt-ds/lab 1.0.0-alpha.10 → 1.0.0-alpha.101

package/dist-cjs/button-bar/internal/DescendantContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"DescendantContext.js","sources":["../src/button-bar/internal/DescendantContext.tsx"],"sourcesContent":["// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport {\n  createContext,\n  Dispatch,\n  MutableRefObject,\n  ReactNode,\n  SetStateAction,\n  useRef,\n  useState,\n} from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\n// //////////////////////////////////////////////////////////////////////////////\n// SUPER HACKS AHEAD: The React team will hate this enough to hopefully give us\n// a way to know the index of a descendant given a parent (will help generate\n// IDs for accessibility a long with the ability create maximally composable\n// component abstractions).\n//\n// This is all to avoid cloneElement. If we can avoid cloneElement then people\n// can have arbitrary markup around MenuItems.  This basically takes advantage\n// of react's render lifecycles to let us \"register\" descendants to an\n// ancestor, so that we can track all the descendants and manage focus on them,\n// etc.  The super hacks here are for the child to know it's index as well, so\n// that it can set attributes, match against state from above, etc.\ninterface DescendantProviderProps {\n  children?: ReactNode;\n  items: Record<string, any>[];\n  setItems: Dispatch<SetStateAction<Record<string, any>[]>>;\n}\n\ninterface DescendantContextType {\n  assigning?: MutableRefObject<boolean>;\n  setItems?: DescendantProviderProps[\"setItems\"];\n}\nexport const DescendantContext = createContext<DescendantContextType>({});\n\nexport function DescendantProvider({\n  items,\n  setItems,\n  ...props\n}: DescendantProviderProps) {\n  // On the first render we say we're \"assigning\", and the children will push\n  // into the array when they show up in their own useLayoutEffect.\n  const assigning = useRef(true);\n\n  // since children are pushed into the array in useLayoutEffect of the child,\n  // children can't read their index on first render.  So we need to cause a\n  // second render so they can read their index.\n  const [, forceUpdate] = useState<unknown>();\n\n  // parent useLayoutEffect is always last\n  useIsomorphicLayoutEffect(() => {\n    if (assigning.current) {\n      // At this point all of the children have pushed into the array so we set\n      // assigning to false and force an update. Since we're in\n      // useLayoutEffect, we won't get a flash of rendered content, it will all\n      // happen synchronously. And now that this is false, children won't push\n      // into the array on the forceUpdate\n      assigning.current = false;\n      forceUpdate({});\n    } else {\n      // After the forceUpdate completes, we end up here and set assigning back\n      // to true for the next update from the app\n      assigning.current = true;\n    }\n    return () => {\n      // this cleanup function runs right before the next render, so it's the\n      // right time to empty out the array to be reassigned with whatever shows\n      // up next render.\n      if (assigning.current) {\n        // we only want to empty out the array before the next render cycle if\n        // it was NOT the result of our forceUpdate, so being guarded behind\n        // assigning.current works\n        setItems([]);\n      }\n    };\n  }, [items]);\n\n  return (\n    <DescendantContext.Provider {...props} value={{ setItems, assigning }} />\n  );\n}\n"],"names":["createContext","useRef","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;;;AAkCa,MAAA,iBAAA,GAAoBA,mBAAqC,CAAA,EAAE,EAAA;AAEjE,SAAS,kBAAmB,CAAA;AAAA,EACjC,KAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,KAAA;AACL,CAA4B,EAAA;AAG1B,EAAM,MAAA,SAAA,GAAYC,aAAO,IAAI,CAAA,CAAA;AAK7B,EAAA,MAAM,GAAG,WAAW,CAAA,GAAIC,cAAkB,EAAA,CAAA;AAG1C,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,UAAU,OAAS,EAAA;AAMrB,MAAA,SAAA,CAAU,OAAU,GAAA,KAAA,CAAA;AACpB,MAAA,WAAA,CAAY,EAAE,CAAA,CAAA;AAAA,KACT,MAAA;AAGL,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AAAA,KACtB;AACA,IAAA,OAAO,MAAM;AAIX,MAAA,IAAI,UAAU,OAAS,EAAA;AAIrB,QAAA,QAAA,CAAS,EAAE,CAAA,CAAA;AAAA,OACb;AAAA,KACF,CAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAEV,EACE,uBAAAC,cAAA,CAAC,kBAAkB,QAAlB,EAAA;AAAA,IAA4B,GAAG,KAAA;AAAA,IAAO,KAAA,EAAO,EAAE,QAAA,EAAU,SAAU,EAAA;AAAA,GAAG,CAAA,CAAA;AAE3E;;;;;"}
+{"version":3,"file":"DescendantContext.js","sources":["../src/button-bar/internal/DescendantContext.tsx"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport {\n  createContext,\n  type Dispatch,\n  type MutableRefObject,\n  type ReactNode,\n  type SetStateAction,\n  useRef,\n  useState,\n} from \"react\";\n\n// //////////////////////////////////////////////////////////////////////////////\n// SUPER HACKS AHEAD: The React team will hate this enough to hopefully give us\n// a way to know the index of a descendant given a parent (will help generate\n// IDs for accessibility a long with the ability create maximally composable\n// component abstractions).\n//\n// This is all to avoid cloneElement. If we can avoid cloneElement then people\n// can have arbitrary markup around MenuItems.  This basically takes advantage\n// of React's render lifecycles to let us \"register\" descendants to an\n// ancestor, so that we can track all the descendants and manage focus on them,\n// etc.  The super hacks here are for the child to know its index as well, so\n// that it can set attributes, match against state from above, etc.\ninterface DescendantProviderProps {\n  children?: ReactNode;\n  items: Record<string, any>[];\n  setItems: Dispatch<SetStateAction<Record<string, any>[]>>;\n}\n\ninterface DescendantContextType {\n  assigning?: MutableRefObject<boolean>;\n  setItems?: DescendantProviderProps[\"setItems\"];\n}\nexport const DescendantContext = createContext<DescendantContextType>({});\n\nexport function DescendantProvider({\n  items,\n  setItems,\n  ...props\n}: DescendantProviderProps) {\n  // On the first render we say we're \"assigning\", and the children will push\n  // into the array when they show up in their own useLayoutEffect.\n  const assigning = useRef(true);\n\n  // since children are pushed into the array in useLayoutEffect of the child,\n  // children can't read their index on first render.  So we need to cause a\n  // second render so they can read their index.\n  const [, forceUpdate] = useState<unknown>();\n\n  // parent useLayoutEffect is always last\n  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want this to run when items change, not on every render\n  useIsomorphicLayoutEffect(() => {\n    if (assigning.current) {\n      // At this point all of the children have pushed into the array so we set\n      // assigning to false and force an update. Since we're in\n      // useLayoutEffect, we won't get a flash of rendered content, it will all\n      // happen synchronously. And now that this is false, children won't push\n      // into the array on the forceUpdate\n      assigning.current = false;\n      forceUpdate({});\n    } else {\n      // After the forceUpdate completes, we end up here and set assigning back\n      // to true for the next update from the app\n      assigning.current = true;\n    }\n    return () => {\n      // this cleanup function runs right before the next render, so it's the\n      // right time to empty out the array to be reassigned with whatever shows\n      // up next render.\n      if (assigning.current) {\n        // we only want to empty out the array before the next render cycle if\n        // it was NOT the result of our forceUpdate, so being guarded behind\n        // assigning.current works\n        setItems([]);\n      }\n    };\n  }, [items]);\n\n  return (\n    <DescendantContext.Provider {...props} value={{ setItems, assigning }} />\n  );\n}\n"],"names":["createContext","useRef","useState","useIsomorphicLayoutEffect","jsx"],"mappings":";;;;;;AAkCO,MAAM,iBAAA,GAAoBA,mBAAA,CAAqC,EAAE;AAEjE,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4B;AAG1B,EAAA,MAAM,SAAA,GAAYC,aAAO,IAAI,CAAA;AAK7B,EAAA,MAAM,GAAG,WAAW,CAAA,GAAIC,cAAA,EAAkB;AAI1C,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,UAAU,OAAA,EAAS;AAMrB,MAAA,SAAA,CAAU,OAAA,GAAU,KAAA;AACpB,MAAA,WAAA,CAAY,EAAE,CAAA;AAAA,IAChB,CAAA,MAAO;AAGL,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACtB;AACA,IAAA,OAAO,MAAM;AAIX,MAAA,IAAI,UAAU,OAAA,EAAS;AAIrB,QAAA,QAAA,CAAS,EAAE,CAAA;AAAA,MACb;AAAA,IACF,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,uBACEC,cAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA4B,GAAG,OAAO,KAAA,EAAO,EAAE,QAAA,EAAU,SAAA,EAAU,EAAG,CAAA;AAE3E;;;;;"}

package/dist-cjs/button-bar/internal/useDescendant.js

@@ -1,14 +1,12 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
 var core = require('@salt-ds/core');
+var react = require('react');
 var DescendantContext = require('./DescendantContext.js');
 
 function useDescendant(descendant) {
-  const { assigning, setItems } = React.useContext(DescendantContext.DescendantContext);
-  const index = React.useRef(-1);
+  const { assigning, setItems } = react.useContext(DescendantContext.DescendantContext);
+  const index = react.useRef(-1);
   core.useIsomorphicLayoutEffect(() => {
     if ((assigning == null ? void 0 : assigning.current) && setItems) {
       setItems((old) => {

package/dist-cjs/button-bar/internal/useDescendant.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDescendant.js","sources":["../src/button-bar/internal/useDescendant.ts"],"sourcesContent":["// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useContext, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nimport { DescendantContext } from \"./DescendantContext\";\n\nexport function useDescendant(descendant: Record<string, any>): number {\n  const { assigning, setItems } = useContext(DescendantContext);\n  const index = useRef(-1);\n\n  useIsomorphicLayoutEffect(() => {\n    if (assigning?.current && setItems) {\n      setItems((old) => {\n        index.current = old.length;\n        return old.concat(descendant);\n      });\n    }\n  });\n\n  // first render its wrong, after a forceUpdate in parent useIsomorphicLayoutEffect it's\n  // right, and its all synchronous so we don't get any flashing\n  return index.current;\n}\n"],"names":["useContext","DescendantContext","useRef","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;AAMO,SAAS,cAAc,UAAyC,EAAA;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAS,EAAA,GAAIA,iBAAWC,mCAAiB,CAAA,CAAA;AAC5D,EAAM,MAAA,KAAA,GAAQC,aAAO,CAAE,CAAA,CAAA,CAAA;AAEvB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,CAAA,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAW,YAAW,QAAU,EAAA;AAClC,MAAA,QAAA,CAAS,CAAC,GAAQ,KAAA;AAChB,QAAA,KAAA,CAAM,UAAU,GAAI,CAAA,MAAA,CAAA;AACpB,QAAO,OAAA,GAAA,CAAI,OAAO,UAAU,CAAA,CAAA;AAAA,OAC7B,CAAA,CAAA;AAAA,KACH;AAAA,GACD,CAAA,CAAA;AAID,EAAA,OAAO,KAAM,CAAA,OAAA,CAAA;AACf;;;;"}
+{"version":3,"file":"useDescendant.js","sources":["../src/button-bar/internal/useDescendant.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useContext, useRef } from \"react\";\n\nimport { DescendantContext } from \"./DescendantContext\";\n\nexport function useDescendant(descendant: Record<string, any>): number {\n  const { assigning, setItems } = useContext(DescendantContext);\n  const index = useRef(-1);\n\n  useIsomorphicLayoutEffect(() => {\n    if (assigning?.current && setItems) {\n      setItems((old) => {\n        index.current = old.length;\n        return old.concat(descendant);\n      });\n    }\n  });\n\n  // first render its wrong, after a forceUpdate in parent useIsomorphicLayoutEffect it's\n  // right, and its all synchronous so we don't get any flashing\n  return index.current;\n}\n"],"names":["useContext","DescendantContext","useRef","useIsomorphicLayoutEffect"],"mappings":";;;;;;AAMO,SAAS,cAAc,UAAA,EAAyC;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAIA,iBAAWC,mCAAiB,CAAA;AAC5D,EAAA,MAAM,KAAA,GAAQC,aAAO,EAAE,CAAA;AAEvB,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,IAAA,CAAI,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAW,YAAW,QAAA,EAAU;AAClC,MAAA,QAAA,CAAS,CAAC,GAAA,KAAQ;AAChB,QAAA,KAAA,CAAM,UAAU,GAAA,CAAI,MAAA;AACpB,QAAA,OAAO,GAAA,CAAI,OAAO,UAAU,CAAA;AAAA,MAC9B,CAAC,CAAA;AAAA,IACH;AAAA,EACF,CAAC,CAAA;AAID,EAAA,OAAO,KAAA,CAAM,OAAA;AACf;;;;"}

package/dist-cjs/button-bar/internal/useDescendants.js

@@ -1,11 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
+var react = require('react');
 
 function useDescendants() {
-  return React.useState([]);
+  return react.useState([]);
 }
 
 exports.useDescendants = useDescendants;

package/dist-cjs/button-bar/internal/useDescendants.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDescendants.js","sources":["../src/button-bar/internal/useDescendants.ts"],"sourcesContent":["// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { useState, Dispatch, SetStateAction } from \"react\";\n\nexport function useDescendants<T>(): [T[], Dispatch<SetStateAction<T[]>>] {\n  return useState<T[]>([]);\n}\n"],"names":["useState"],"mappings":";;;;;;AAGO,SAAS,cAA0D,GAAA;AACxE,EAAO,OAAAA,cAAA,CAAc,EAAE,CAAA,CAAA;AACzB;;;;"}
+{"version":3,"file":"useDescendants.js","sources":["../src/button-bar/internal/useDescendants.ts"],"sourcesContent":["// Copied from https://gist.github.com/ryanflorence/10e9387f633f9d2e6f444a9bddaabf6e\nimport { type Dispatch, type SetStateAction, useState } from \"react\";\n\nexport function useDescendants<T>(): [T[], Dispatch<SetStateAction<T[]>>] {\n  return useState<T[]>([]);\n}\n"],"names":["useState"],"mappings":";;;;AAGO,SAAS,cAAA,GAA0D;AACxE,EAAA,OAAOA,cAAA,CAAc,EAAE,CAAA;AACzB;;;;"}

package/dist-cjs/cascading-menu/CascadingMenu.js

@@ -1,12 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
+var react = require('react');
 var core = require('@salt-ds/core');
 var useEventCallback = require('../utils/useEventCallback.js');
-require('../utils/useFloatingUI.js');
 var CascadingMenuList = require('./CascadingMenuList.js');
 var CascadingMenuAction = require('./internal/CascadingMenuAction.js');
 var menuPositioning = require('./internal/menuPositioning.js');
@@ -18,8 +15,7 @@ var useStateReducer = require('./internal/useStateReducer.js');
 var stateChangeTypes = require('./stateChangeTypes.js');
 
 const defaultItemToString = (item) => (item == null ? void 0 : item.title) || String(item);
-const noop = () => void 0;
-const CascadingMenu = React.forwardRef(
+const CascadingMenu = react.forwardRef(
   function CascadingMenu2(props, ref) {
     const {
       children,
@@ -37,6 +33,7 @@ const CascadingMenu = React.forwardRef(
       tooltipLeaveDelay = 0,
       height,
       rootPlacement,
+      // Add this to offset x, y on popper open
       rootPlacementOffset,
       menuTriggerRef: anchorRefProp,
       open: openProp,
@@ -48,8 +45,8 @@ const CascadingMenu = React.forwardRef(
     } = props;
     const density = core.useDensity();
     const refsManager = useRefsManager.useRefsManager();
-    const childrenRef = React.useRef(null);
-    const getMenuTriggerRef = React.useCallback(
+    const childrenRef = react.useRef(null);
+    const getMenuTriggerRef = react.useCallback(
       () => anchorRefProp || childrenRef.current,
       [anchorRefProp]
     );
@@ -59,12 +56,12 @@ const CascadingMenu = React.forwardRef(
       name: "CascadingMenu",
       state: "source"
     });
-    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);
-    const menusDataById = React.useMemo(
+    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = react.useState(false);
+    const menusDataById = react.useMemo(
       () => menuSource ? stateUtils.deriveFlatStateFromTree(menuSource) : {},
       [menuSource]
     );
-    const rootMenuId = React.useMemo(
+    const rootMenuId = react.useMemo(
       () => Object.keys(menusDataById).find((id) => menusDataById[id].level === 0),
       [menusDataById]
     );
@@ -72,11 +69,11 @@ const CascadingMenu = React.forwardRef(
       menusDataById,
       isNavigatingWithKeyboard
     );
-    const [state, dispatch] = React.useReducer(stateReducer, []);
+    const [state, dispatch] = react.useReducer(stateReducer, []);
     const rootMenuState = state[0];
     const prevState = core.usePrevious(state, void 0, []);
     const prevRootMenuState = prevState == null ? void 0 : prevState[0];
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!!rootMenuState !== !!prevRootMenuState) {
         if (!rootMenuState) {
           onClose == null ? void 0 : onClose();
@@ -85,15 +82,19 @@ const CascadingMenu = React.forwardRef(
         }
       }
     });
-    const openCloseMenu = React.useCallback(
-      (open) => dispatch({
-        type: open ? CascadingMenuAction.CascadingMenuAction.OPEN_MENU : CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
-        cause: stateChangeTypes.stateChangeTypes.MOUSE_TOGGLE,
-        targetId: rootMenuId
-      }),
+    const openCloseMenu = react.useCallback(
+      (open) => {
+        if (rootMenuId) {
+          dispatch({
+            type: open ? CascadingMenuAction.CascadingMenuAction.OPEN_MENU : CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
+            cause: stateChangeTypes.stateChangeTypes.MOUSE_TOGGLE,
+            targetId: rootMenuId
+          });
+        }
+      },
       [rootMenuId]
     );
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (openProp !== void 0 && openProp !== !!rootMenuState) {
         openCloseMenu(openProp);
       }
@@ -105,18 +106,20 @@ const CascadingMenu = React.forwardRef(
       clickAwayNodes,
       containingDocument,
       () => {
-        dispatch({
-          type: CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
-          cause: stateChangeTypes.stateChangeTypes.CLICKED_AWAY,
-          targetId: rootMenuId
-        });
+        if (rootMenuId) {
+          dispatch({
+            type: CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
+            cause: stateChangeTypes.stateChangeTypes.CLICKED_AWAY,
+            targetId: rootMenuId
+          });
+        }
       },
       () => {
         setIsNavigatingWithKeyboard(false);
       }
     );
     const handleResize = useEventCallback.useEventCallback(() => {
-      if (rootMenuState) {
+      if (rootMenuState && rootMenuId) {
         dispatch({
           type: CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
           cause: stateChangeTypes.stateChangeTypes.ON_RESIZE,
@@ -124,17 +127,17 @@ const CascadingMenu = React.forwardRef(
         });
       }
     });
-    React.useEffect(() => {
+    react.useEffect(() => {
       const win = core.ownerWindow(getMenuTriggerRef());
       win.addEventListener("resize", handleResize);
       return () => {
         win.removeEventListener("resize", handleResize);
       };
     }, [getMenuTriggerRef, handleResize]);
-    const onItemClickCallback = React.useCallback(
+    const onItemClickCallback = react.useCallback(
       (sourceItem, event) => {
         onItemClick == null ? void 0 : onItemClick(sourceItem, event);
-        if (!isNavigatingWithKeyboard) {
+        if (!isNavigatingWithKeyboard && rootMenuId) {
           dispatch({
             type: CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
             cause: stateChangeTypes.stateChangeTypes.ITEM_CLICKED,
@@ -144,11 +147,11 @@ const CascadingMenu = React.forwardRef(
       },
       [isNavigatingWithKeyboard, onItemClick, rootMenuId]
     );
-    const setMenuTriggerRef = React.useCallback((node) => {
+    const setMenuTriggerRef = react.useCallback((node) => {
       childrenRef.current = node;
     }, []);
     const handleRef = core.useForkRef(
-      React.isValidElement(children) ? children.ref : noop,
+      core.getRefFromChildren(children),
       setMenuTriggerRef
     );
     const [onMenuTriggerClick, onMenuTriggerKeydown] = useMenuTriggerHandlers.useMenuTriggerHandlers({
@@ -161,7 +164,7 @@ const CascadingMenu = React.forwardRef(
       menusDataById
     });
     const cloneMenuChildren = (cloneChildren) => {
-      if (React.isValidElement(cloneChildren)) {
+      if (react.isValidElement(cloneChildren)) {
         const childrenProps = {
           ...cloneChildren.props
         };
@@ -169,7 +172,7 @@ const CascadingMenu = React.forwardRef(
           childrenProps.onClick = onMenuTriggerClick;
           childrenProps.onKeyDown = onMenuTriggerKeydown;
         }
-        return React.cloneElement(cloneChildren, {
+        return react.cloneElement(cloneChildren, {
           ref: handleRef,
           ...childrenProps
         });
@@ -195,20 +198,21 @@ const CascadingMenu = React.forwardRef(
       getScreenBounds,
       disableMouseOutInteractions
     };
-    React.useEffect(() => {
+    react.useEffect(() => {
       if (!openProp) {
         setIsNavigatingWithKeyboard(false);
       }
     }, [openProp, rootPlacementOffset]);
-    return Object.keys(menusDataById).length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [
-        clonedChildren || null,
-        Object.values(state).map((menuState) => {
-          const data = menusDataById[menuState.id];
-          const isRoot = data.level === 0;
-          const parentElement = isRoot ? getMenuTriggerRef() : refsManager.get(data.parentId);
-          const isChildMenuOpen = !!state[data.level + 1];
-          return /* @__PURE__ */ React.createElement(CascadingMenuList.CascadingMenuList, {
+    return Object.keys(menusDataById).length > 0 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      clonedChildren || null,
+      Object.values(state).map((menuState) => {
+        const data = menusDataById[menuState.id];
+        const isRoot = data.level === 0;
+        const parentElement = isRoot ? getMenuTriggerRef() : refsManager.get((data == null ? void 0 : data.parentId) ?? "");
+        const isChildMenuOpen = !!state[data.level + 1];
+        return /* @__PURE__ */ react.createElement(
+          CascadingMenuList.CascadingMenuList,
+          {
             ...commonMenuProps,
             data,
             height,
@@ -222,10 +226,10 @@ const CascadingMenu = React.forwardRef(
             ref: isRoot ? ref : null,
             refsManager,
             rowHeight
-          });
-        })
-      ]
-    }) : null;
+          }
+        );
+      })
+    ] }) : null;
   }
 );
 

package/dist-cjs/cascading-menu/CascadingMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"CascadingMenu.js","sources":["../src/cascading-menu/CascadingMenu.tsx"],"sourcesContent":["import {\n  useControlled,\n  useDensity,\n  useForkRef,\n  ownerWindow,\n} from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n  MouseEvent,\n  KeyboardEvent,\n} from \"react\";\nimport { useEventCallback } from \"../utils\";\nimport { usePrevious } from \"@salt-ds/core\";\nimport { CascadingMenuProps, MenuDescriptor } from \"./CascadingMenuProps\";\n\nimport { CascadingMenuList } from \"./CascadingMenuList\";\nimport { CascadingMenuAction } from \"./internal/CascadingMenuAction\";\nimport { defaultGetScreenBounds } from \"./internal/menuPositioning\";\nimport { deriveFlatStateFromTree } from \"./internal/stateUtils\";\nimport { useClickAway } from \"./internal/useClickAway\";\nimport { useMenuTriggerHandlers } from \"./internal/useMenuTriggerHandlers\";\nimport { useRefsManager } from \"./internal/useRefsManager\";\nimport { useStateReducer } from \"./internal/useStateReducer\";\nimport { stateChangeTypes } from \"./stateChangeTypes\";\n\nconst defaultItemToString = (item: any) => item?.title || String(item);\n\nconst noop = () => undefined;\n\nexport const CascadingMenu = forwardRef<HTMLDivElement, CascadingMenuProps>(\n  function CascadingMenu(props, ref) {\n    const {\n      children,\n      className,\n      initialSource: initialSourceProp,\n      itemToString = defaultItemToString,\n      onClose,\n      onItemClick,\n      onOpen,\n      maxWidth = 544,\n      minWidth = 200,\n      delay = 300,\n      rowHeight,\n      tooltipEnterDelay = 1500,\n      tooltipLeaveDelay = 0,\n      height,\n      rootPlacement,\n      // Add this to offset x, y on popper open\n      rootPlacementOffset,\n      menuTriggerRef: anchorRefProp,\n      open: openProp,\n      getScreenBounds = defaultGetScreenBounds,\n      disableMouseOutInteractions,\n      disableClickAway,\n      containingDocument = globalThis.document,\n      source: sourceProp,\n    } = props;\n    const density = useDensity();\n\n    const refsManager = useRefsManager();\n    const childrenRef = useRef<HTMLElement | null>(null);\n    const getMenuTriggerRef = useCallback(\n      (): HTMLElement | null => anchorRefProp || childrenRef.current,\n      [anchorRefProp]\n    );\n\n    const [menuSource] = useControlled({\n      controlled: sourceProp,\n      default: initialSourceProp,\n      name: \"CascadingMenu\",\n      state: \"source\",\n    });\n\n    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =\n      useState(false);\n\n    const menusDataById = useMemo(\n      () => (menuSource ? deriveFlatStateFromTree(menuSource) : {}),\n      [menuSource]\n    );\n\n    const rootMenuId = useMemo(\n      () =>\n        Object.keys(menusDataById).find((id) => menusDataById[id].level === 0),\n      [menusDataById]\n    );\n\n    const stateReducer = useStateReducer(\n      menusDataById,\n      isNavigatingWithKeyboard\n    );\n    const [state, dispatch] = useReducer(stateReducer, []);\n    const rootMenuState = state[0];\n\n    // Call open and close callbacks after rendering as we know for sure whether the cascading menu is open or closed\n    const prevState = usePrevious(state, undefined, []);\n    const prevRootMenuState = prevState?.[0];\n    useEffect(() => {\n      if (!!rootMenuState !== !!prevRootMenuState) {\n        if (!rootMenuState) {\n          onClose?.();\n        } else if (rootMenuState) {\n          onOpen?.();\n        }\n      }\n    });\n\n    // Controlled opening/closing of the menu\n    const openCloseMenu = useCallback(\n      (open: boolean) =>\n        dispatch({\n          type: open\n            ? CascadingMenuAction.OPEN_MENU\n            : CascadingMenuAction.CLOSE_CASCADING_MENU,\n          cause: stateChangeTypes.MOUSE_TOGGLE,\n          targetId: rootMenuId!,\n        }),\n      [rootMenuId]\n    );\n    // do not re-render every time if prop does not change\n    useEffect(() => {\n      if (openProp !== undefined && openProp !== !!rootMenuState) {\n        openCloseMenu(openProp);\n      }\n    });\n\n    const clickAwayNodes = disableClickAway\n      ? null\n      : () =>\n          [getMenuTriggerRef(), ...refsManager.values()].filter(\n            (node) => node !== null\n          ) as HTMLElement[];\n    useClickAway(\n      clickAwayNodes,\n      containingDocument,\n      () => {\n        dispatch({\n          type: CascadingMenuAction.CLOSE_CASCADING_MENU,\n          cause: stateChangeTypes.CLICKED_AWAY,\n          targetId: rootMenuId!,\n        });\n      },\n      () => {\n        setIsNavigatingWithKeyboard(false);\n      }\n    );\n\n    const handleResize = useEventCallback(() => {\n      if (rootMenuState) {\n        dispatch({\n          type: CascadingMenuAction.CLOSE_CASCADING_MENU,\n          cause: stateChangeTypes.ON_RESIZE,\n          targetId: rootMenuId!,\n        });\n      }\n    });\n\n    useEffect(() => {\n      const win = ownerWindow(getMenuTriggerRef());\n\n      win.addEventListener(\"resize\", handleResize);\n      return () => {\n        win.removeEventListener(\"resize\", handleResize);\n      };\n    }, [getMenuTriggerRef, handleResize]);\n\n    // close the menu on item click via mouse\n    const onItemClickCallback = useCallback(\n      (sourceItem: MenuDescriptor, event: KeyboardEvent | MouseEvent) => {\n        onItemClick?.(sourceItem, event);\n\n        if (!isNavigatingWithKeyboard) {\n          dispatch({\n            type: CascadingMenuAction.CLOSE_CASCADING_MENU,\n            cause: stateChangeTypes.ITEM_CLICKED,\n            targetId: rootMenuId!,\n          });\n        }\n      },\n      [isNavigatingWithKeyboard, onItemClick, rootMenuId]\n    );\n\n    // Set up event handlers on menu trigger if passed\n    const setMenuTriggerRef = useCallback((node: HTMLElement) => {\n      childrenRef.current = node;\n    }, []);\n    const handleRef = useForkRef(\n      //TODO get to bottom of this\n      // @ts-ignore\n      isValidElement(children) ? children.ref : noop,\n      setMenuTriggerRef\n    );\n\n    const [onMenuTriggerClick, onMenuTriggerKeydown] = useMenuTriggerHandlers({\n      dispatch,\n      children,\n      setIsNavigatingWithKeyboard,\n      openCloseMenu,\n      rootMenuState,\n      rootMenuId,\n      menusDataById,\n    });\n\n    const cloneMenuChildren = (cloneChildren: ReactNode) => {\n      if (isValidElement(cloneChildren)) {\n        const childrenProps = {\n          ...cloneChildren.props,\n        };\n\n        if (openProp === undefined) {\n          childrenProps.onClick = onMenuTriggerClick;\n          childrenProps.onKeyDown = onMenuTriggerKeydown;\n        }\n\n        return cloneElement(cloneChildren, {\n          ref: handleRef,\n          ...childrenProps,\n        });\n      }\n      return null;\n    };\n\n    const clonedChildren = cloneMenuChildren(children);\n\n    const commonMenuProps = {\n      className,\n      delay,\n      itemToString,\n      maxWidth,\n      minWidth,\n      onItemClick: onItemClickCallback,\n      dispatch,\n      isNavigatingWithKeyboard,\n      setIsNavigatingWithKeyboard,\n      menusDataById,\n      tooltipEnterDelay,\n      tooltipLeaveDelay,\n      rootPlacement,\n      rootPlacementOffset,\n      getScreenBounds,\n      disableMouseOutInteractions,\n    };\n\n    useEffect(() => {\n      if (!openProp) {\n        setIsNavigatingWithKeyboard(false);\n      }\n    }, [openProp, rootPlacementOffset]);\n\n    return Object.keys(menusDataById).length > 0 ? (\n      <>\n        {clonedChildren || null}\n        {Object.values(state).map((menuState) => {\n          const data = menusDataById[menuState.id];\n\n          const isRoot = data.level === 0;\n          const parentElement = isRoot\n            ? getMenuTriggerRef()\n            : refsManager.get(data.parentId!);\n\n          const isChildMenuOpen = !!state[data.level + 1];\n          return (\n            <CascadingMenuList\n              {...commonMenuProps}\n              data={data}\n              height={height}\n              highlightedItemIndex={menuState.highlightedItemIndex}\n              isChildMenuOpen={isChildMenuOpen}\n              isRoot={isRoot}\n              key={`${density}${menuState.id}`}\n              menuId={menuState.id}\n              menuTriggerRef={getMenuTriggerRef()}\n              parentElement={parentElement}\n              ref={isRoot ? ref : null}\n              refsManager={refsManager}\n              rowHeight={rowHeight}\n            />\n          );\n        })}\n      </>\n    ) : null;\n  }\n);\n"],"names":["forwardRef","CascadingMenu","defaultGetScreenBounds","useDensity","useRefsManager","useRef","useCallback","useControlled","useState","useMemo","deriveFlatStateFromTree","useStateReducer","useReducer","usePrevious","useEffect","CascadingMenuAction","stateChangeTypes","useClickAway","useEventCallback","ownerWindow","useForkRef","isValidElement","useMenuTriggerHandlers","cloneElement","jsxs","Fragment","createElement","CascadingMenuList"],"mappings":"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"}
+{"version":3,"file":"CascadingMenu.js","sources":["../src/cascading-menu/CascadingMenu.tsx"],"sourcesContent":["import {\n  getRefFromChildren,\n  ownerWindow,\n  useControlled,\n  useDensity,\n  useForkRef,\n  usePrevious,\n} from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type KeyboardEvent,\n  type MouseEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\nimport { useEventCallback } from \"../utils\";\nimport { CascadingMenuList } from \"./CascadingMenuList\";\nimport type { CascadingMenuProps, MenuDescriptor } from \"./CascadingMenuProps\";\nimport { CascadingMenuAction } from \"./internal/CascadingMenuAction\";\nimport { defaultGetScreenBounds } from \"./internal/menuPositioning\";\nimport { deriveFlatStateFromTree } from \"./internal/stateUtils\";\nimport { useClickAway } from \"./internal/useClickAway\";\nimport { useMenuTriggerHandlers } from \"./internal/useMenuTriggerHandlers\";\nimport { useRefsManager } from \"./internal/useRefsManager\";\nimport { useStateReducer } from \"./internal/useStateReducer\";\nimport { stateChangeTypes } from \"./stateChangeTypes\";\n\nconst defaultItemToString = (item: any) => item?.title || String(item);\n\nexport const CascadingMenu = forwardRef<HTMLDivElement, CascadingMenuProps>(\n  function CascadingMenu(props, ref) {\n    const {\n      children,\n      className,\n      initialSource: initialSourceProp,\n      itemToString = defaultItemToString,\n      onClose,\n      onItemClick,\n      onOpen,\n      maxWidth = 544,\n      minWidth = 200,\n      delay = 300,\n      rowHeight,\n      tooltipEnterDelay = 1500,\n      tooltipLeaveDelay = 0,\n      height,\n      rootPlacement,\n      // Add this to offset x, y on popper open\n      rootPlacementOffset,\n      menuTriggerRef: anchorRefProp,\n      open: openProp,\n      getScreenBounds = defaultGetScreenBounds,\n      disableMouseOutInteractions,\n      disableClickAway,\n      containingDocument = globalThis.document,\n      source: sourceProp,\n    } = props;\n    const density = useDensity();\n\n    const refsManager = useRefsManager();\n    const childrenRef = useRef<HTMLElement | null>(null);\n    const getMenuTriggerRef = useCallback(\n      (): HTMLElement | null => anchorRefProp || childrenRef.current,\n      [anchorRefProp],\n    );\n\n    const [menuSource] = useControlled({\n      controlled: sourceProp,\n      default: initialSourceProp,\n      name: \"CascadingMenu\",\n      state: \"source\",\n    });\n\n    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] =\n      useState(false);\n\n    const menusDataById = useMemo(\n      () => (menuSource ? deriveFlatStateFromTree(menuSource) : {}),\n      [menuSource],\n    );\n\n    const rootMenuId = useMemo(\n      () =>\n        Object.keys(menusDataById).find((id) => menusDataById[id].level === 0),\n      [menusDataById],\n    );\n\n    const stateReducer = useStateReducer(\n      menusDataById,\n      isNavigatingWithKeyboard,\n    );\n    const [state, dispatch] = useReducer(stateReducer, []);\n    const rootMenuState = state[0];\n\n    // Call open and close callbacks after rendering as we know for sure whether the cascading menu is open or closed\n    const prevState = usePrevious(state, undefined, []);\n    const prevRootMenuState = prevState?.[0];\n    useEffect(() => {\n      if (!!rootMenuState !== !!prevRootMenuState) {\n        if (!rootMenuState) {\n          onClose?.();\n        } else if (rootMenuState) {\n          onOpen?.();\n        }\n      }\n    });\n\n    // Controlled opening/closing of the menu\n    const openCloseMenu = useCallback(\n      (open: boolean) => {\n        if (rootMenuId) {\n          dispatch({\n            type: open\n              ? CascadingMenuAction.OPEN_MENU\n              : CascadingMenuAction.CLOSE_CASCADING_MENU,\n            cause: stateChangeTypes.MOUSE_TOGGLE,\n            targetId: rootMenuId,\n          });\n        }\n      },\n      [rootMenuId],\n    );\n    // do not re-render every time if prop does not change\n    useEffect(() => {\n      if (openProp !== undefined && openProp !== !!rootMenuState) {\n        openCloseMenu(openProp);\n      }\n    });\n\n    const clickAwayNodes = disableClickAway\n      ? null\n      : () =>\n          [getMenuTriggerRef(), ...refsManager.values()].filter(\n            (node) => node !== null,\n          ) as HTMLElement[];\n    useClickAway(\n      clickAwayNodes,\n      containingDocument,\n      () => {\n        if (rootMenuId) {\n          dispatch({\n            type: CascadingMenuAction.CLOSE_CASCADING_MENU,\n            cause: stateChangeTypes.CLICKED_AWAY,\n            targetId: rootMenuId,\n          });\n        }\n      },\n      () => {\n        setIsNavigatingWithKeyboard(false);\n      },\n    );\n\n    const handleResize = useEventCallback(() => {\n      if (rootMenuState && rootMenuId) {\n        dispatch({\n          type: CascadingMenuAction.CLOSE_CASCADING_MENU,\n          cause: stateChangeTypes.ON_RESIZE,\n          targetId: rootMenuId,\n        });\n      }\n    });\n\n    useEffect(() => {\n      const win = ownerWindow(getMenuTriggerRef());\n\n      win.addEventListener(\"resize\", handleResize);\n      return () => {\n        win.removeEventListener(\"resize\", handleResize);\n      };\n    }, [getMenuTriggerRef, handleResize]);\n\n    // close the menu on item click via mouse\n    const onItemClickCallback = useCallback(\n      (sourceItem: MenuDescriptor, event: KeyboardEvent | MouseEvent) => {\n        onItemClick?.(sourceItem, event);\n\n        if (!isNavigatingWithKeyboard && rootMenuId) {\n          dispatch({\n            type: CascadingMenuAction.CLOSE_CASCADING_MENU,\n            cause: stateChangeTypes.ITEM_CLICKED,\n            targetId: rootMenuId,\n          });\n        }\n      },\n      [isNavigatingWithKeyboard, onItemClick, rootMenuId],\n    );\n\n    // Set up event handlers on menu trigger if passed\n    const setMenuTriggerRef = useCallback((node: HTMLElement) => {\n      childrenRef.current = node;\n    }, []);\n    const handleRef = useForkRef(\n      getRefFromChildren(children),\n      setMenuTriggerRef,\n    );\n\n    const [onMenuTriggerClick, onMenuTriggerKeydown] = useMenuTriggerHandlers({\n      dispatch,\n      children,\n      setIsNavigatingWithKeyboard,\n      openCloseMenu,\n      rootMenuState,\n      rootMenuId,\n      menusDataById,\n    });\n\n    const cloneMenuChildren = (cloneChildren: ReactNode) => {\n      if (isValidElement(cloneChildren)) {\n        const childrenProps = {\n          ...cloneChildren.props,\n        };\n\n        if (openProp === undefined) {\n          childrenProps.onClick = onMenuTriggerClick;\n          childrenProps.onKeyDown = onMenuTriggerKeydown;\n        }\n\n        return cloneElement(cloneChildren, {\n          ref: handleRef,\n          ...childrenProps,\n        });\n      }\n      return null;\n    };\n\n    const clonedChildren = cloneMenuChildren(children);\n\n    const commonMenuProps = {\n      className,\n      delay,\n      itemToString,\n      maxWidth,\n      minWidth,\n      onItemClick: onItemClickCallback,\n      dispatch,\n      isNavigatingWithKeyboard,\n      setIsNavigatingWithKeyboard,\n      menusDataById,\n      tooltipEnterDelay,\n      tooltipLeaveDelay,\n      rootPlacement,\n      rootPlacementOffset,\n      getScreenBounds,\n      disableMouseOutInteractions,\n    };\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: We want to run this if rootPlacementOffset changes.\n    useEffect(() => {\n      if (!openProp) {\n        setIsNavigatingWithKeyboard(false);\n      }\n    }, [openProp, rootPlacementOffset]);\n\n    return Object.keys(menusDataById).length > 0 ? (\n      <>\n        {clonedChildren || null}\n        {Object.values(state).map((menuState) => {\n          const data = menusDataById[menuState.id];\n\n          const isRoot = data.level === 0;\n          const parentElement = isRoot\n            ? getMenuTriggerRef()\n            : refsManager.get(data?.parentId ?? \"\");\n\n          const isChildMenuOpen = !!state[data.level + 1];\n          return (\n            <CascadingMenuList\n              {...commonMenuProps}\n              data={data}\n              height={height}\n              highlightedItemIndex={menuState.highlightedItemIndex}\n              isChildMenuOpen={isChildMenuOpen}\n              isRoot={isRoot}\n              key={`${density}${menuState.id}`}\n              menuId={menuState.id}\n              menuTriggerRef={getMenuTriggerRef()}\n              parentElement={parentElement}\n              ref={isRoot ? ref : null}\n              refsManager={refsManager}\n              rowHeight={rowHeight}\n            />\n          );\n        })}\n      </>\n    ) : null;\n  },\n);\n"],"names":["forwardRef","CascadingMenu","defaultGetScreenBounds","useDensity","useRefsManager","useRef","useCallback","useControlled","useState","useMemo","deriveFlatStateFromTree","useStateReducer","useReducer","usePrevious","useEffect","CascadingMenuAction","stateChangeTypes","useClickAway","useEventCallback","ownerWindow","useForkRef","getRefFromChildren","useMenuTriggerHandlers","isValidElement","cloneElement","jsxs","Fragment","createElement","CascadingMenuList"],"mappings":";;;;;;;;;;;;;;;;AAkCA,MAAM,sBAAsB,CAAC,IAAA,KAAA,CAAc,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,KAAA,KAAS,OAAO,IAAI,CAAA;AAE9D,MAAM,aAAA,GAAgBA,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,KAAA,EAAO,GAAA,EAAK;AACjC,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA,EAAe,iBAAA;AAAA,MACf,YAAA,GAAe,mBAAA;AAAA,MACf,OAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA,GAAW,GAAA;AAAA,MACX,QAAA,GAAW,GAAA;AAAA,MACX,KAAA,GAAQ,GAAA;AAAA,MACR,SAAA;AAAA,MACA,iBAAA,GAAoB,IAAA;AAAA,MACpB,iBAAA,GAAoB,CAAA;AAAA,MACpB,MAAA;AAAA,MACA,aAAA;AAAA;AAAA,MAEA,mBAAA;AAAA,MACA,cAAA,EAAgB,aAAA;AAAA,MAChB,IAAA,EAAM,QAAA;AAAA,MACN,eAAA,GAAkBC,sCAAA;AAAA,MAClB,2BAAA;AAAA,MACA,gBAAA;AAAA,MACA,qBAAqB,UAAA,CAAW,QAAA;AAAA,MAChC,MAAA,EAAQ;AAAA,KACV,GAAI,KAAA;AACJ,IAAA,MAAM,UAAUC,eAAA,EAAW;AAE3B,IAAA,MAAM,cAAcC,6BAAA,EAAe;AACnC,IAAA,MAAM,WAAA,GAAcC,aAA2B,IAAI,CAAA;AACnD,IAAA,MAAM,iBAAA,GAAoBC,iBAAA;AAAA,MACxB,MAA0B,iBAAiB,WAAA,CAAY,OAAA;AAAA,MACvD,CAAC,aAAa;AAAA,KAChB;AAEA,IAAA,MAAM,CAAC,UAAU,CAAA,GAAIC,kBAAA,CAAc;AAAA,MACjC,UAAA,EAAY,UAAA;AAAA,MACZ,OAAA,EAAS,iBAAA;AAAA,MACT,IAAA,EAAM,eAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACR,CAAA;AAED,IAAA,MAAM,CAAC,wBAAA,EAA0B,2BAA2B,CAAA,GAC1DC,eAAS,KAAK,CAAA;AAEhB,IAAA,MAAM,aAAA,GAAgBC,aAAA;AAAA,MACpB,MAAO,UAAA,GAAaC,kCAAA,CAAwB,UAAU,IAAI,EAAC;AAAA,MAC3D,CAAC,UAAU;AAAA,KACb;AAEA,IAAA,MAAM,UAAA,GAAaD,aAAA;AAAA,MACjB,MACE,MAAA,CAAO,IAAA,CAAK,aAAa,CAAA,CAAE,IAAA,CAAK,CAAC,EAAA,KAAO,aAAA,CAAc,EAAE,CAAA,CAAE,KAAA,KAAU,CAAC,CAAA;AAAA,MACvE,CAAC,aAAa;AAAA,KAChB;AAEA,IAAA,MAAM,YAAA,GAAeE,+BAAA;AAAA,MACnB,aAAA;AAAA,MACA;AAAA,KACF;AACA,IAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,IAAIC,gBAAA,CAAW,YAAA,EAAc,EAAE,CAAA;AACrD,IAAA,MAAM,aAAA,GAAgB,MAAM,CAAC,CAAA;AAG7B,IAAA,MAAM,SAAA,GAAYC,gBAAA,CAAY,KAAA,EAAO,MAAA,EAAW,EAAE,CAAA;AAClD,IAAA,MAAM,oBAAoB,SAAA,IAAA,IAAA,GAAA,MAAA,GAAA,SAAA,CAAY,CAAA,CAAA;AACtC,IAAAC,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,CAAC,aAAA,KAAkB,CAAC,CAAC,iBAAA,EAAmB;AAC3C,QAAA,IAAI,CAAC,aAAA,EAAe;AAClB,UAAA,OAAA,IAAA,IAAA,GAAA,MAAA,GAAA,OAAA,EAAA;AAAA,QACF,WAAW,aAAA,EAAe;AACxB,UAAA,MAAA,IAAA,IAAA,GAAA,MAAA,GAAA,MAAA,EAAA;AAAA,QACF;AAAA,MACF;AAAA,IACF,CAAC,CAAA;AAGD,IAAA,MAAM,aAAA,GAAgBR,iBAAA;AAAA,MACpB,CAAC,IAAA,KAAkB;AACjB,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,QAAA,CAAS;AAAA,YACP,IAAA,EAAM,IAAA,GACFS,uCAAA,CAAoB,SAAA,GACpBA,uCAAA,CAAoB,oBAAA;AAAA,YACxB,OAAOC,iCAAA,CAAiB,YAAA;AAAA,YACxB,QAAA,EAAU;AAAA,WACX,CAAA;AAAA,QACH;AAAA,MACF,CAAA;AAAA,MACA,CAAC,UAAU;AAAA,KACb;AAEA,IAAAF,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAA,KAAa,MAAA,IAAa,QAAA,KAAa,CAAC,CAAC,aAAA,EAAe;AAC1D,QAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,MACxB;AAAA,IACF,CAAC,CAAA;AAED,IAAA,MAAM,cAAA,GAAiB,gBAAA,GACnB,IAAA,GACA,MACE,CAAC,iBAAA,EAAkB,EAAG,GAAG,WAAA,CAAY,MAAA,EAAQ,CAAA,CAAE,MAAA;AAAA,MAC7C,CAAC,SAAS,IAAA,KAAS;AAAA,KACrB;AACN,IAAAG,yBAAA;AAAA,MACE,cAAA;AAAA,MACA,kBAAA;AAAA,MACA,MAAM;AACJ,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,QAAA,CAAS;AAAA,YACP,MAAMF,uCAAA,CAAoB,oBAAA;AAAA,YAC1B,OAAOC,iCAAA,CAAiB,YAAA;AAAA,YACxB,QAAA,EAAU;AAAA,WACX,CAAA;AAAA,QACH;AAAA,MACF,CAAA;AAAA,MACA,MAAM;AACJ,QAAA,2BAAA,CAA4B,KAAK,CAAA;AAAA,MACnC;AAAA,KACF;AAEA,IAAA,MAAM,YAAA,GAAeE,kCAAiB,MAAM;AAC1C,MAAA,IAAI,iBAAiB,UAAA,EAAY;AAC/B,QAAA,QAAA,CAAS;AAAA,UACP,MAAMH,uCAAA,CAAoB,oBAAA;AAAA,UAC1B,OAAOC,iCAAA,CAAiB,SAAA;AAAA,UACxB,QAAA,EAAU;AAAA,SACX,CAAA;AAAA,MACH;AAAA,IACF,CAAC,CAAA;AAED,IAAAF,eAAA,CAAU,MAAM;AACd,MAAA,MAAM,GAAA,GAAMK,gBAAA,CAAY,iBAAA,EAAmB,CAAA;AAE3C,MAAA,GAAA,CAAI,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAC3C,MAAA,OAAO,MAAM;AACX,QAAA,GAAA,CAAI,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,MAChD,CAAA;AAAA,IACF,CAAA,EAAG,CAAC,iBAAA,EAAmB,YAAY,CAAC,CAAA;AAGpC,IAAA,MAAM,mBAAA,GAAsBb,iBAAA;AAAA,MAC1B,CAAC,YAA4B,KAAA,KAAsC;AACjE,QAAA,WAAA,IAAA,IAAA,GAAA,MAAA,GAAA,WAAA,CAAc,UAAA,EAAY,KAAA,CAAA;AAE1B,QAAA,IAAI,CAAC,4BAA4B,UAAA,EAAY;AAC3C,UAAA,QAAA,CAAS;AAAA,YACP,MAAMS,uCAAA,CAAoB,oBAAA;AAAA,YAC1B,OAAOC,iCAAA,CAAiB,YAAA;AAAA,YACxB,QAAA,EAAU;AAAA,WACX,CAAA;AAAA,QACH;AAAA,MACF,CAAA;AAAA,MACA,CAAC,wBAAA,EAA0B,WAAA,EAAa,UAAU;AAAA,KACpD;AAGA,IAAA,MAAM,iBAAA,GAAoBV,iBAAA,CAAY,CAAC,IAAA,KAAsB;AAC3D,MAAA,WAAA,CAAY,OAAA,GAAU,IAAA;AAAA,IACxB,CAAA,EAAG,EAAE,CAAA;AACL,IAAA,MAAM,SAAA,GAAYc,eAAA;AAAA,MAChBC,wBAAmB,QAAQ,CAAA;AAAA,MAC3B;AAAA,KACF;AAEA,IAAA,MAAM,CAAC,kBAAA,EAAoB,oBAAoB,CAAA,GAAIC,6CAAA,CAAuB;AAAA,MACxE,QAAA;AAAA,MACA,QAAA;AAAA,MACA,2BAAA;AAAA,MACA,aAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,iBAAA,GAAoB,CAAC,aAAA,KAA6B;AACtD,MAAA,IAAIC,oBAAA,CAAe,aAAa,CAAA,EAAG;AACjC,QAAA,MAAM,aAAA,GAAgB;AAAA,UACpB,GAAG,aAAA,CAAc;AAAA,SACnB;AAEA,QAAA,IAAI,aAAa,MAAA,EAAW;AAC1B,UAAA,aAAA,CAAc,OAAA,GAAU,kBAAA;AACxB,UAAA,aAAA,CAAc,SAAA,GAAY,oBAAA;AAAA,QAC5B;AAEA,QAAA,OAAOC,mBAAa,aAAA,EAAe;AAAA,UACjC,GAAA,EAAK,SAAA;AAAA,UACL,GAAG;AAAA,SACJ,CAAA;AAAA,MACH;AACA,MAAA,OAAO,IAAA;AAAA,IACT,CAAA;AAEA,IAAA,MAAM,cAAA,GAAiB,kBAAkB,QAAQ,CAAA;AAEjD,IAAA,MAAM,eAAA,GAAkB;AAAA,MACtB,SAAA;AAAA,MACA,KAAA;AAAA,MACA,YAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA,EAAa,mBAAA;AAAA,MACb,QAAA;AAAA,MACA,wBAAA;AAAA,MACA,2BAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,iBAAA;AAAA,MACA,aAAA;AAAA,MACA,mBAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACF;AAGA,IAAAV,eAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,QAAA,EAAU;AACb,QAAA,2BAAA,CAA4B,KAAK,CAAA;AAAA,MACnC;AAAA,IACF,CAAA,EAAG,CAAC,QAAA,EAAU,mBAAmB,CAAC,CAAA;AAElC,IAAA,OAAO,OAAO,IAAA,CAAK,aAAa,CAAA,CAAE,MAAA,GAAS,oBACzCW,eAAA,CAAAC,mBAAA,EAAA,EACG,QAAA,EAAA;AAAA,MAAA,cAAA,IAAkB,IAAA;AAAA,MAClB,OAAO,MAAA,CAAO,KAAK,CAAA,CAAE,GAAA,CAAI,CAAC,SAAA,KAAc;AACvC,QAAA,MAAM,IAAA,GAAO,aAAA,CAAc,SAAA,CAAU,EAAE,CAAA;AAEvC,QAAA,MAAM,MAAA,GAAS,KAAK,KAAA,KAAU,CAAA;AAC9B,QAAA,MAAM,aAAA,GAAgB,SAClB,iBAAA,EAAkB,GAClB,YAAY,GAAA,CAAA,CAAI,IAAA,IAAA,IAAA,GAAA,MAAA,GAAA,IAAA,CAAM,aAAY,EAAE,CAAA;AAExC,QAAA,MAAM,kBAAkB,CAAC,CAAC,KAAA,CAAM,IAAA,CAAK,QAAQ,CAAC,CAAA;AAC9C,QAAA,uBACEC,mBAAA;AAAA,UAACC,mCAAA;AAAA,UAAA;AAAA,YACE,GAAG,eAAA;AAAA,YACJ,IAAA;AAAA,YACA,MAAA;AAAA,YACA,sBAAsB,SAAA,CAAU,oBAAA;AAAA,YAChC,eAAA;AAAA,YACA,MAAA;AAAA,YACA,GAAA,EAAK,CAAA,EAAG,OAAO,CAAA,EAAG,UAAU,EAAE,CAAA,CAAA;AAAA,YAC9B,QAAQ,SAAA,CAAU,EAAA;AAAA,YAClB,gBAAgB,iBAAA,EAAkB;AAAA,YAClC,aAAA;AAAA,YACA,GAAA,EAAK,SAAS,GAAA,GAAM,IAAA;AAAA,YACpB,WAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,MAEJ,CAAC;AAAA,KAAA,EACH,CAAA,GACE,IAAA;AAAA,EACN;AACF;;;;"}

package/dist-cjs/cascading-menu/CascadingMenuItem.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltMenuItem {\n  background: var(--salt-selectable-background);\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  right: 0;\n  cursor: pointer;\n  overflow: hidden;\n  text-align: left;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n\n.saltMenuItem-menuItemText {\n  flex-grow: 2;\n  white-space: nowrap;\n}\n\n.saltMenuItem-menuItemEndAdornment {\n  margin-left: 8px; /* density */\n}\n\n.saltMenuItem-menuItemStartAdornmentContainer {\n  margin-right: var(--salt-size-unit);\n  width: 12px;\n}\n\n.saltMenuItem-menuItemAdornmentHidden {\n  visibility: hidden;\n}\n\n.saltMenuItem.saltMenuItem-menuItemDivider {\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltMenuItem-menuItemHover:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltMenuItem.saltMenuItem-menuItemBlurSelected {\n  background: var(--salt-selectable-background-blurSelected) !important;\n}\n";
+var css_248z = ".saltCascadingMenuItem {\n  background: var(--salt-selectable-background);\n  display: flex;\n\n  align-items: center;\n  justify-content: space-between;\n\n  right: 0;\n  cursor: var(--salt-cursor-hover);\n  overflow: hidden;\n  text-align: left;\n  user-select: none;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  border-top: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) transparent;\n  border-bottom: var(--salt-size-fixed-100) var(--salt-selectable-borderStyle-selected) transparent;\n  box-sizing: border-box;\n}\n\n.saltCascadingMenuItem-menuItemText {\n  flex-grow: 2;\n  white-space: nowrap;\n}\n\n.saltCascadingMenuItem-menuItemEndAdornment {\n  margin-left: 8px; /* density */\n}\n\n.saltCascadingMenuItem-menuItemStartAdornmentContainer {\n  margin-right: var(--salt-size-unit);\n  width: 12px;\n}\n\n.saltCascadingMenuItem-menuItemAdornmentHidden {\n  visibility: hidden;\n}\n\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemDivider {\n  border-bottom: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-separable-secondary-borderColor);\n}\n\n.saltCascadingMenuItem-menuItemHover:hover {\n  background: var(--salt-selectable-background-hover);\n}\n\n/* extra specificity requred to override ListItem selected */\n.saltCascadingMenuItem.saltCascadingMenuItem-menuItemBlurSelected {\n  background: var(--salt-selectable-background-selected);\n  border-top-color: var(--salt-selectable-borderColor-selected);\n  border-bottom-color: var(--salt-selectable-borderColor-selected);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=CascadingMenuItem.css.js.map

package/dist-cjs/cascading-menu/CascadingMenuItem.js

@@ -1,39 +1,37 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 require('../list-deprecated/List.js');
 require('../list-deprecated/ListBase.js');
-require('../list-deprecated/ListItemBase.js');
 var ListItem = require('../list-deprecated/ListItem.js');
+require('../list-deprecated/ListItemBase.js');
 require('../list-deprecated/ListItemContext.js');
 require('../list-deprecated/ListStateContext.js');
-require('../utils/useFloatingUI.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var CascadingMenuItem = require('./CascadingMenuItem.css.js');
 
 const noop = () => void 0;
-const withBaseName = core.makePrefixer("saltMenuItem");
+const withBaseName = core.makePrefixer("saltCascadingMenuItem");
 const getIcon = (sourceItem, isDisabled = false) => {
   const CustomIcon = sourceItem.icon;
   if (CustomIcon) {
-    return /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, {
-      className: clsx.clsx(withBaseName("menuItemStartAdornment"), {
-        [withBaseName("menuItemDisabled")]: isDisabled
-      })
-    });
-  } else {
-    return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      CustomIcon,
+      {
+        className: clsx.clsx(withBaseName("menuItemStartAdornment"), {
+          [withBaseName("menuItemDisabled")]: isDisabled
+        })
+      }
+    );
   }
+  return null;
 };
-const DefaultMenuItem = React.forwardRef(
-  function(props, ref) {
+const DefaultMenuItem = react.forwardRef(
+  (props, ref) => {
     const {
       blurSelected,
       className,
@@ -57,15 +55,14 @@ const DefaultMenuItem = React.forwardRef(
       css: CascadingMenuItem,
       window: targetWindow
     });
-    const menuTextRef = React.useRef(null);
-    const [hasTooltip, setHasTooltip] = React.useState(false);
+    const { ExpandGroupIcon } = core.useIcon();
+    const menuTextRef = react.useRef(null);
+    const [hasTooltip, setHasTooltip] = react.useState(false);
     const menuText = itemToString(sourceItem);
-    React.useEffect(() => {
+    react.useEffect(() => {
       const element = menuTextRef.current;
-      if (element) {
-        if (element.offsetWidth < element.scrollWidth) {
-          setHasTooltip(true);
-        }
+      if (element && menuText != null) {
+        setHasTooltip(element.offsetWidth < element.scrollWidth);
       }
     }, [menuText]);
     const isDisabled = sourceItem.disabled;
@@ -77,68 +74,78 @@ const DefaultMenuItem = React.forwardRef(
       }
     };
     const interactionClasses = isNavigatingWithKeyboard ? {
-      [withBaseName(`menuItemKeyboardActive`)]: !isDisabled && isInteracted && !blurSelected,
-      [withBaseName(`menuItemKeyboardDisabled`)]: isDisabled && isInteracted
+      [withBaseName("menuItemKeyboardActive")]: !isDisabled && isInteracted && !blurSelected,
+      [withBaseName("menuItemKeyboardDisabled")]: isDisabled && isInteracted
     } : {
-      [withBaseName(`menuItemHover`)]: !isDisabled && !blurSelected
+      [withBaseName("menuItemHover")]: !isDisabled && !blurSelected
     };
     const icon = hasStartAdornment ? getIcon(sourceItem, isDisabled) : null;
     const tooltipTitle = sourceItem.tooltip || menuText;
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Tooltip, {
-      disableFocusListener: true,
-      disableHoverListener: true,
-      enterDelay: tooltipEnterDelay,
-      leaveDelay: tooltipLeaveDelay,
-      placement: "top",
-      disabled: !tooltipTitle || !hasTooltip || isChildMenuOpen,
-      content: tooltipTitle,
-      children: /* @__PURE__ */ jsxRuntime.jsxs(ListItem.ListItem, {
-        ref,
-        "aria-expanded": isChildMenuOpen || void 0,
-        className: clsx.clsx(
-          withBaseName(),
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Tooltip,
+      {
+        disableFocusListener: true,
+        disableHoverListener: true,
+        enterDelay: tooltipEnterDelay,
+        leaveDelay: tooltipLeaveDelay,
+        placement: "top",
+        disabled: !tooltipTitle || !hasTooltip || isChildMenuOpen,
+        content: tooltipTitle,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          ListItem.ListItem,
           {
-            [withBaseName("menuItemDivider")]: divider,
-            [withBaseName("menuItemBlurSelected")]: blurSelected,
-            [withBaseName("menuItemSelected")]: !isDisabled && !hasSubMenu && isInteracted,
-            ...interactionClasses,
-            [withBaseName("menuItemWithScrollbar")]: hasScrollbar
-          },
-          className
-        ),
-        disabled: isDisabled,
-        role: "menuitem",
-        onClick: handleOnClick,
-        item: sourceItem,
-        ...restProps,
-        children: [
-          hasStartAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: withBaseName("menuItemStartAdornmentContainer"),
-            children: icon
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: clsx.clsx(withBaseName("menuItemText"), {
-              [withBaseName("menuItemDisabled")]: isDisabled
-            }),
-            ref: menuTextRef,
-            children: menuText
-          }),
-          hasEndAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: clsx.clsx(withBaseName("menuItemEndAdornmentContainer"), {
-              [withBaseName("menuItemAdornmentHidden")]: !hasSubMenu
-            }),
-            children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
-              className: clsx.clsx(withBaseName("menuItemEndAdornment"), {
-                [withBaseName("menuItemDisabled")]: isDisabled
-              })
-            })
-          }),
-          divider && /* @__PURE__ */ jsxRuntime.jsx("div", {
-            role: "separator"
-          })
-        ]
-      })
-    });
+            ref,
+            "aria-expanded": isChildMenuOpen || void 0,
+            className: clsx.clsx(
+              withBaseName(),
+              {
+                [withBaseName("menuItemDivider")]: divider,
+                [withBaseName("menuItemBlurSelected")]: blurSelected,
+                [withBaseName("menuItemSelected")]: !isDisabled && !hasSubMenu && isInteracted,
+                ...interactionClasses,
+                [withBaseName("menuItemWithScrollbar")]: hasScrollbar
+              },
+              className
+            ),
+            disabled: isDisabled,
+            role: "menuitem",
+            onClick: handleOnClick,
+            item: sourceItem,
+            ...restProps,
+            children: [
+              hasStartAdornment && /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("menuItemStartAdornmentContainer"), children: icon }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: clsx.clsx(withBaseName("menuItemText"), {
+                    [withBaseName("menuItemDisabled")]: isDisabled
+                  }),
+                  ref: menuTextRef,
+                  children: menuText
+                }
+              ),
+              hasEndAdornment && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: clsx.clsx(withBaseName("menuItemEndAdornmentContainer"), {
+                    [withBaseName("menuItemAdornmentHidden")]: !hasSubMenu
+                  }),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    ExpandGroupIcon,
+                    {
+                      className: clsx.clsx(withBaseName("menuItemEndAdornment"), {
+                        [withBaseName("menuItemDisabled")]: isDisabled
+                      })
+                    }
+                  )
+                }
+              ),
+              divider && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "separator" })
+            ]
+          }
+        )
+      }
+    );
   }
 );