@salt-ds/lab 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist-cjs/carousel/Carousel.js

@@ -0,0 +1,115 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var React = require('react');
+var icons = require('@salt-ds/icons');
+var DeckLayout = require('../deck-layout/DeckLayout.js');
+var clsx = require('clsx');
+var useSlideSelection = require('../utils/useSlideSelection.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Carousel$1 = require('./Carousel.css.js');
+
+const withBaseName = core.makePrefixer("saltCarousel");
+const Carousel = React.forwardRef(
+  function Carousel2({
+    initialIndex,
+    animation = "slide",
+    carouselDescription,
+    children,
+    className,
+    compact,
+    id: idProp,
+    ...rest
+  }, ref) {
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-carousel",
+      css: Carousel$1,
+      window: targetWindow
+    });
+    const id = core.useId(idProp);
+    const slidesCount = React.Children.count(children);
+    const [_, selectedSlide, handleSlideSelection] = useSlideSelection.useSlideSelection(initialIndex);
+    const moveSlide = (direction) => {
+      const moveLeft = selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;
+      const moveRight = selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;
+      const newSelection = direction === "left" ? moveLeft : moveRight;
+      const newTransition = direction === "left" ? "decrease" : "increase";
+      handleSlideSelection(newSelection, newTransition);
+    };
+    const handleRadioChange = ({
+      target: { value }
+    }) => {
+      handleSlideSelection(Number(value));
+    };
+    React.useEffect(() => {
+      if (process.env.NODE_ENV !== "production") {
+        if (slidesCount < 1) {
+          console.warn(
+            "Carousel component requires more than one children to render. At least two elements should be provided."
+          );
+        }
+      }
+    }, [slidesCount]);
+    return /* @__PURE__ */ jsxRuntime.jsxs(core.GridLayout, {
+      "aria-label": carouselDescription,
+      "aria-roledescription": "carousel",
+      id,
+      role: "region",
+      ref,
+      gap: 0,
+      columns: 3,
+      className: clsx.clsx(
+        withBaseName(),
+        compact && withBaseName("compact"),
+        className
+      ),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+          variant: "secondary",
+          className: withBaseName("prev-button"),
+          onClick: () => moveSlide("left"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {
+            size: 2
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(DeckLayout.DeckLayout, {
+          activeIndex: selectedSlide,
+          animation,
+          className: withBaseName("slider"),
+          children
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+          variant: "secondary",
+          className: withBaseName("next-button"),
+          onClick: () => moveSlide("right"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
+            size: 2
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", {
+          className: withBaseName("dots"),
+          children: /* @__PURE__ */ jsxRuntime.jsx(core.RadioButtonGroup, {
+            "aria-label": "Carousel buttons",
+            onChange: handleRadioChange,
+            value: `${selectedSlide}`,
+            direction: "horizontal",
+            children: Array.from({ length: slidesCount }, (_2, index) => ({
+              value: `${index}`
+            })).map((radio) => /* @__PURE__ */ jsxRuntime.jsx(core.RadioButton, {
+              ...radio
+            }))
+          })
+        })
+      ]
+    });
+  }
+);
+
+exports.Carousel = Carousel;
+//# sourceMappingURL=Carousel.js.map

package/dist-cjs/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../src/carousel/Carousel.tsx"],"sourcesContent":["import {\n  Button,\n  GridLayout,\n  makePrefixer,\n  RadioButton,\n  RadioButtonGroup,\n  useId,\n} from \"@salt-ds/core\";\nimport {\n  ChangeEventHandler,\n  Children,\n  forwardRef,\n  HTMLAttributes,\n  ReactElement,\n  useEffect,\n} from \"react\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { DeckLayout } from \"../deck-layout\";\nimport { clsx } from \"clsx\";\n\nimport { useSlideSelection } from \"../utils\";\nimport { CarouselSlideProps } from \"./CarouselSlide\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport carouselCss from \"./Carousel.css\";\n\nconst withBaseName = makePrefixer(\"saltCarousel\");\n\nexport interface CarouselProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * The initial Index enables you to select the active slide in the carousel.\n   * Optional, default 0.\n   **/\n  initialIndex?: number;\n  /**\n   * The animation when the slides are shown.\n   * Optional. Defaults to `slide`\n   **/\n  animation?: \"slide\" | \"fade\";\n  /**\n   * If this props is passed it will set the aria-label with value to the carousel container.\n   * Optional. Defaults to undefined\n   */\n  carouselDescription?: string;\n  /**\n   * Collection of slides to render\n   * Component must implement CarouselSlideProps. Mandatory.\n   */\n  children: Array<ReactElement<CarouselSlideProps>>;\n  /**\n   * This prop will enable compact / reduced width mode.\n   * The navigation buttons would be part of indicators\n   * Optional. Defaults to false\n   **/\n  compact?: boolean;\n  /**\n   * It sets the id for the Carousel Container.\n   * String. Optional\n   */\n  id?: string;\n}\n\nexport const Carousel = forwardRef<HTMLDivElement, CarouselProps>(\n  function Carousel(\n    {\n      initialIndex,\n      animation = \"slide\",\n      carouselDescription,\n      children,\n      className,\n      compact,\n      id: idProp,\n      ...rest\n    },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-carousel\",\n      css: carouselCss,\n      window: targetWindow,\n    });\n\n    const id = useId(idProp);\n    const slidesCount = Children.count(children);\n\n    const [_, selectedSlide, handleSlideSelection] =\n      useSlideSelection(initialIndex);\n\n    const moveSlide = (direction: \"left\" | \"right\") => {\n      const moveLeft =\n        selectedSlide === 0 ? slidesCount - 1 : selectedSlide - 1;\n      const moveRight =\n        selectedSlide === slidesCount - 1 ? 0 : selectedSlide + 1;\n      const newSelection = direction === \"left\" ? moveLeft : moveRight;\n      const newTransition = direction === \"left\" ? \"decrease\" : \"increase\";\n      handleSlideSelection(newSelection, newTransition);\n    };\n\n    const handleRadioChange: ChangeEventHandler<HTMLInputElement> = ({\n      target: { value },\n    }) => {\n      handleSlideSelection(Number(value));\n    };\n\n    useEffect(() => {\n      if (process.env.NODE_ENV !== \"production\") {\n        if (slidesCount < 1) {\n          console.warn(\n            \"Carousel component requires more than one children to render. At least two elements should be provided.\"\n          );\n        }\n      }\n    }, [slidesCount]);\n\n    return (\n      <GridLayout\n        aria-label={carouselDescription}\n        aria-roledescription=\"carousel\"\n        id={id}\n        role=\"region\"\n        ref={ref}\n        gap={0}\n        columns={3}\n        className={clsx(\n          withBaseName(),\n          compact && withBaseName(\"compact\"),\n          className\n        )}\n        {...rest}\n      >\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"prev-button\")}\n          onClick={() => moveSlide(\"left\")}\n        >\n          <ChevronLeftIcon size={2} />\n        </Button>\n        <DeckLayout\n          activeIndex={selectedSlide}\n          animation={animation}\n          className={withBaseName(\"slider\")}\n        >\n          {children}\n        </DeckLayout>\n        <Button\n          variant=\"secondary\"\n          className={withBaseName(\"next-button\")}\n          onClick={() => moveSlide(\"right\")}\n        >\n          <ChevronRightIcon size={2} />\n        </Button>\n        <div className={withBaseName(\"dots\")}>\n          <RadioButtonGroup\n            aria-label=\"Carousel buttons\"\n            onChange={handleRadioChange}\n            value={`${selectedSlide}`}\n            direction={\"horizontal\"}\n          >\n            {Array.from({ length: slidesCount }, (_, index) => ({\n              value: `${index}`,\n            })).map((radio) => (\n              <RadioButton {...radio} />\n            ))}\n          </RadioButtonGroup>\n        </div>\n      </GridLayout>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","Carousel","useWindow","useComponentCssInjection","carouselCss","useId","Children","useSlideSelection","useEffect","jsxs","GridLayout","clsx","jsx","Button","ChevronLeftIcon","DeckLayout","ChevronRightIcon","RadioButtonGroup","_","RadioButton"],"mappings":"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"}

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

@@ -0,0 +1,232 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var useEventCallback = require('../utils/useEventCallback.js');
+var CascadingMenuList = require('./CascadingMenuList.js');
+var CascadingMenuAction = require('./internal/CascadingMenuAction.js');
+var menuPositioning = require('./internal/menuPositioning.js');
+var stateUtils = require('./internal/stateUtils.js');
+var useClickAway = require('./internal/useClickAway.js');
+var useMenuTriggerHandlers = require('./internal/useMenuTriggerHandlers.js');
+var useRefsManager = require('./internal/useRefsManager.js');
+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(
+  function CascadingMenu2(props, ref) {
+    const {
+      children,
+      className,
+      initialSource: initialSourceProp,
+      itemToString = defaultItemToString,
+      onClose,
+      onItemClick,
+      onOpen,
+      maxWidth = 544,
+      minWidth = 200,
+      delay = 300,
+      rowHeight,
+      tooltipEnterDelay = 1500,
+      tooltipLeaveDelay = 0,
+      height,
+      rootPlacement,
+      rootPlacementOffset,
+      menuTriggerRef: anchorRefProp,
+      open: openProp,
+      getScreenBounds = menuPositioning.defaultGetScreenBounds,
+      disableMouseOutInteractions,
+      disableClickAway,
+      containingDocument = globalThis.document,
+      source: sourceProp
+    } = props;
+    const density = core.useDensity();
+    const refsManager = useRefsManager.useRefsManager();
+    const childrenRef = React.useRef(null);
+    const getMenuTriggerRef = React.useCallback(
+      () => anchorRefProp || childrenRef.current,
+      [anchorRefProp]
+    );
+    const [menuSource] = core.useControlled({
+      controlled: sourceProp,
+      default: initialSourceProp,
+      name: "CascadingMenu",
+      state: "source"
+    });
+    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = React.useState(false);
+    const menusDataById = React.useMemo(
+      () => menuSource ? stateUtils.deriveFlatStateFromTree(menuSource) : {},
+      [menuSource]
+    );
+    const rootMenuId = React.useMemo(
+      () => Object.keys(menusDataById).find((id) => menusDataById[id].level === 0),
+      [menusDataById]
+    );
+    const stateReducer = useStateReducer.useStateReducer(
+      menusDataById,
+      isNavigatingWithKeyboard
+    );
+    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(() => {
+      if (!!rootMenuState !== !!prevRootMenuState) {
+        if (!rootMenuState) {
+          onClose == null ? void 0 : onClose();
+        } else if (rootMenuState) {
+          onOpen == null ? void 0 : onOpen();
+        }
+      }
+    });
+    const openCloseMenu = React.useCallback(
+      (open) => dispatch({
+        type: open ? CascadingMenuAction.CascadingMenuAction.OPEN_MENU : CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
+        cause: stateChangeTypes.stateChangeTypes.MOUSE_TOGGLE,
+        targetId: rootMenuId
+      }),
+      [rootMenuId]
+    );
+    React.useEffect(() => {
+      if (openProp !== void 0 && openProp !== !!rootMenuState) {
+        openCloseMenu(openProp);
+      }
+    });
+    const clickAwayNodes = disableClickAway ? null : () => [getMenuTriggerRef(), ...refsManager.values()].filter(
+      (node) => node !== null
+    );
+    useClickAway.useClickAway(
+      clickAwayNodes,
+      containingDocument,
+      () => {
+        dispatch({
+          type: CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
+          cause: stateChangeTypes.stateChangeTypes.CLICKED_AWAY,
+          targetId: rootMenuId
+        });
+      },
+      () => {
+        setIsNavigatingWithKeyboard(false);
+      }
+    );
+    const handleResize = useEventCallback.useEventCallback(() => {
+      if (rootMenuState) {
+        dispatch({
+          type: CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
+          cause: stateChangeTypes.stateChangeTypes.ON_RESIZE,
+          targetId: rootMenuId
+        });
+      }
+    });
+    React.useEffect(() => {
+      const win = core.ownerWindow(getMenuTriggerRef());
+      win.addEventListener("resize", handleResize);
+      return () => {
+        win.removeEventListener("resize", handleResize);
+      };
+    }, [getMenuTriggerRef, handleResize]);
+    const onItemClickCallback = React.useCallback(
+      (sourceItem, event) => {
+        onItemClick == null ? void 0 : onItemClick(sourceItem, event);
+        if (!isNavigatingWithKeyboard) {
+          dispatch({
+            type: CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU,
+            cause: stateChangeTypes.stateChangeTypes.ITEM_CLICKED,
+            targetId: rootMenuId
+          });
+        }
+      },
+      [isNavigatingWithKeyboard, onItemClick, rootMenuId]
+    );
+    const setMenuTriggerRef = React.useCallback((node) => {
+      childrenRef.current = node;
+    }, []);
+    const handleRef = core.useForkRef(
+      React.isValidElement(children) ? children.ref : noop,
+      setMenuTriggerRef
+    );
+    const [onMenuTriggerClick, onMenuTriggerKeydown] = useMenuTriggerHandlers.useMenuTriggerHandlers({
+      dispatch,
+      children,
+      setIsNavigatingWithKeyboard,
+      openCloseMenu,
+      rootMenuState,
+      rootMenuId,
+      menusDataById
+    });
+    const cloneMenuChildren = (cloneChildren) => {
+      if (React.isValidElement(cloneChildren)) {
+        const childrenProps = {
+          ...cloneChildren.props
+        };
+        if (openProp === void 0) {
+          childrenProps.onClick = onMenuTriggerClick;
+          childrenProps.onKeyDown = onMenuTriggerKeydown;
+        }
+        return React.cloneElement(cloneChildren, {
+          ref: handleRef,
+          ...childrenProps
+        });
+      }
+      return null;
+    };
+    const clonedChildren = cloneMenuChildren(children);
+    const commonMenuProps = {
+      className,
+      delay,
+      itemToString,
+      maxWidth,
+      minWidth,
+      onItemClick: onItemClickCallback,
+      dispatch,
+      isNavigatingWithKeyboard,
+      setIsNavigatingWithKeyboard,
+      menusDataById,
+      tooltipEnterDelay,
+      tooltipLeaveDelay,
+      rootPlacement,
+      rootPlacementOffset,
+      getScreenBounds,
+      disableMouseOutInteractions
+    };
+    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, {
+            ...commonMenuProps,
+            data,
+            height,
+            highlightedItemIndex: menuState.highlightedItemIndex,
+            isChildMenuOpen,
+            isRoot,
+            key: `${density}${menuState.id}`,
+            menuId: menuState.id,
+            menuTriggerRef: getMenuTriggerRef(),
+            parentElement,
+            ref: isRoot ? ref : null,
+            refsManager,
+            rowHeight
+          });
+        })
+      ]
+    }) : null;
+  }
+);
+
+exports.CascadingMenu = CascadingMenu;
+//# sourceMappingURL=CascadingMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingMenu.js","sources":["../src/cascading-menu/CascadingMenu.tsx"],"sourcesContent":["import {\n  useControlled,\n  useDensity,\n  useForkRef,\n  ownerWindow,\n  usePrevious,\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\";\n\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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"}

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

@@ -0,0 +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";
+
+module.exports = css_248z;
+//# sourceMappingURL=CascadingMenuItem.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingMenuItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

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

@@ -0,0 +1,145 @@
+'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 clsx = require('clsx');
+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/ListItemContext.js');
+require('../list-deprecated/ListStateContext.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 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;
+  }
+};
+const DefaultMenuItem = React.forwardRef(
+  function(props, ref) {
+    const {
+      blurSelected,
+      className,
+      hasEndAdornment,
+      hasScrollbar,
+      hasStartAdornment,
+      onItemClick,
+      itemToString,
+      isInteracted,
+      isNavigatingWithKeyboard,
+      isChildMenuOpen,
+      hasSubMenu,
+      sourceItem,
+      tooltipEnterDelay,
+      tooltipLeaveDelay,
+      ...restProps
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-cascading-menu-item",
+      css: CascadingMenuItem,
+      window: targetWindow
+    });
+    const menuTextRef = React.useRef(null);
+    const [hasTooltip, setHasTooltip] = React.useState(false);
+    const menuText = itemToString(sourceItem);
+    React.useEffect(() => {
+      const element = menuTextRef.current;
+      if (element) {
+        if (element.offsetWidth < element.scrollWidth) {
+          setHasTooltip(true);
+        }
+      }
+    }, [menuText]);
+    const isDisabled = sourceItem.disabled;
+    const divider = sourceItem.divider;
+    const onClick = isDisabled || hasSubMenu ? noop : onItemClick;
+    const handleOnClick = (event) => {
+      if (!isDisabled && !hasSubMenu) {
+        onClick == null ? void 0 : onClick(sourceItem, event);
+      }
+    };
+    const interactionClasses = isNavigatingWithKeyboard ? {
+      [withBaseName(`menuItemKeyboardActive`)]: !isDisabled && isInteracted && !blurSelected,
+      [withBaseName(`menuItemKeyboardDisabled`)]: isDisabled && isInteracted
+    } : {
+      [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(),
+          {
+            [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"
+          })
+        ]
+      })
+    });
+  }
+);
+
+exports.DefaultMenuItem = DefaultMenuItem;
+//# sourceMappingURL=CascadingMenuItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingMenuItem.js","sources":["../src/cascading-menu/CascadingMenuItem.tsx"],"sourcesContent":["import { makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { ChevronRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ListItem, ListItemProps } from \"../list-deprecated\";\nimport { MenuDescriptor } from \"./CascadingMenuProps\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport cascadingMenuItemCss from \"./CascadingMenuItem.css\";\n\nconst noop = () => undefined;\nconst withBaseName = makePrefixer(\"saltMenuItem\");\n\nconst getIcon = (sourceItem: MenuDescriptor, isDisabled = false) => {\n  const CustomIcon = sourceItem.icon;\n  if (CustomIcon) {\n    return (\n      <CustomIcon\n        className={clsx(withBaseName(\"menuItemStartAdornment\"), {\n          [withBaseName(\"menuItemDisabled\")]: isDisabled,\n        })}\n      />\n    );\n  } else {\n    return null;\n  }\n};\n\nexport interface MenuItemProps extends ListItemProps<MenuDescriptor> {\n  blurSelected: boolean;\n  className?: string;\n  hasEndAdornment: boolean;\n  hasScrollbar: boolean;\n  hasStartAdornment: boolean;\n  hasSubMenu: boolean;\n  isInteracted: boolean;\n  isChildMenuOpen: boolean;\n  isNavigatingWithKeyboard: boolean;\n  itemToString: Required<ListItemProps<MenuDescriptor>>[\"itemToString\"];\n  onItemClick?: (\n    sourceItem: MenuDescriptor,\n    event: MouseEvent | KeyboardEvent\n  ) => void;\n  sourceItem: MenuDescriptor;\n  tooltipEnterDelay: number;\n  tooltipLeaveDelay: number;\n}\n\nexport const DefaultMenuItem = forwardRef<HTMLDivElement, MenuItemProps>(\n  function (props, ref) {\n    const {\n      blurSelected,\n      className,\n      hasEndAdornment,\n      hasScrollbar,\n      hasStartAdornment,\n      onItemClick,\n      itemToString,\n      isInteracted,\n      isNavigatingWithKeyboard,\n      isChildMenuOpen,\n      hasSubMenu,\n      sourceItem,\n      tooltipEnterDelay,\n      tooltipLeaveDelay,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-cascading-menu-item\",\n      css: cascadingMenuItemCss,\n      window: targetWindow,\n    });\n\n    const menuTextRef = useRef<HTMLDivElement>(null);\n    const [hasTooltip, setHasTooltip] = useState(false);\n    const menuText = itemToString(sourceItem);\n\n    useEffect(() => {\n      const element = menuTextRef.current;\n      if (element) {\n        if (element.offsetWidth < element.scrollWidth) {\n          setHasTooltip(true);\n        }\n      }\n    }, [menuText]);\n\n    const isDisabled = sourceItem.disabled;\n    const divider = sourceItem.divider;\n\n    const onClick = isDisabled || hasSubMenu ? noop : onItemClick;\n\n    const handleOnClick = (event: MouseEvent) => {\n      if (!isDisabled && !hasSubMenu) {\n        onClick?.(sourceItem, event);\n      }\n    };\n    const interactionClasses = isNavigatingWithKeyboard\n      ? {\n          [withBaseName(`menuItemKeyboardActive`)]:\n            !isDisabled && isInteracted && !blurSelected,\n          [withBaseName(`menuItemKeyboardDisabled`)]:\n            isDisabled && isInteracted,\n        }\n      : {\n          [withBaseName(`menuItemHover`)]: !isDisabled && !blurSelected,\n        };\n\n    const icon = hasStartAdornment ? getIcon(sourceItem, isDisabled) : null;\n    const tooltipTitle = sourceItem.tooltip || menuText;\n\n    return (\n      <Tooltip\n        disableFocusListener\n        disableHoverListener\n        enterDelay={tooltipEnterDelay}\n        leaveDelay={tooltipLeaveDelay}\n        placement=\"top\"\n        disabled={!tooltipTitle || !hasTooltip || isChildMenuOpen}\n        content={tooltipTitle}\n      >\n        <ListItem\n          ref={ref}\n          aria-expanded={isChildMenuOpen || undefined}\n          className={clsx(\n            withBaseName(),\n            {\n              [withBaseName(\"menuItemDivider\")]: divider,\n              [withBaseName(\"menuItemBlurSelected\")]: blurSelected,\n              [withBaseName(\"menuItemSelected\")]:\n                !isDisabled && !hasSubMenu && isInteracted,\n              ...interactionClasses,\n              [withBaseName(\"menuItemWithScrollbar\")]: hasScrollbar,\n            },\n            className\n          )}\n          disabled={isDisabled}\n          role=\"menuitem\"\n          onClick={handleOnClick}\n          item={sourceItem}\n          // TODO highlightProps - see original code?\n          {...restProps}\n        >\n          {hasStartAdornment && (\n            <div className={withBaseName(\"menuItemStartAdornmentContainer\")}>\n              {icon}\n            </div>\n          )}\n          <div\n            className={clsx(withBaseName(\"menuItemText\"), {\n              [withBaseName(\"menuItemDisabled\")]: isDisabled,\n            })}\n            ref={menuTextRef}\n          >\n            {menuText}\n          </div>\n          {hasEndAdornment && (\n            <div\n              className={clsx(withBaseName(\"menuItemEndAdornmentContainer\"), {\n                [withBaseName(\"menuItemAdornmentHidden\")]: !hasSubMenu,\n              })}\n            >\n              <ChevronRightIcon\n                className={clsx(withBaseName(\"menuItemEndAdornment\"), {\n                  [withBaseName(\"menuItemDisabled\")]: isDisabled,\n                })}\n              />\n            </div>\n          )}\n          {divider && <div role=\"separator\" />}\n        </ListItem>\n      </Tooltip>\n    );\n  }\n);\n"],"names":["makePrefixer","jsx","clsx","forwardRef","useWindow","useComponentCssInjection","cascadingMenuItemCss","useRef","useState","useEffect","Tooltip","jsxs","ListItem","ChevronRightIcon"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltCascadingMenuList-popper {\n  background: var(--salt-container-primary-background);\n}\n\n.saltCascadingMenuList-popper {\n  --list-box-content: content-box;\n  --list-boxShadow: var(--salt-overlayable-shadow-popout);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=CascadingMenuList.css.js.map

package/dist-cjs/cascading-menu/CascadingMenuList.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingMenuList.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}