@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.100

package/dist-es/button-bar/ButtonBar.js

@@ -0,0 +1,182 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, Children, useMemo } from 'react';
+import css_248z from './ButtonBar.css.js';
+import { ButtonBarContext } from './internal/ButtonBarContext.js';
+import { DescendantProvider } from './internal/DescendantContext.js';
+import { useDescendants } from './internal/useDescendants.js';
+
+const DefaultButtonsOrderByVariant = {
+  cta: {
+    order: 0,
+    alignLeftOrder: 1,
+    stackOrder: 2
+  },
+  primary: {
+    order: 1,
+    alignLeftOrder: 2,
+    stackOrder: 1
+  },
+  secondary: {
+    order: 2,
+    alignLeftOrder: 0,
+    stackOrder: 0
+  }
+};
+function getPriorityForButton(item, field) {
+  const variant = (item == null ? void 0 : item.variant) || "primary";
+  return (item == null ? void 0 : item[field]) ?? DefaultButtonsOrderByVariant[variant][field];
+}
+const createComparatorForField = (field, sort, alignLeft, childrenData) => {
+  let equalityResult;
+  if (field === "order" || field === "stackOrder") {
+    equalityResult = sort === "asc" ? 1 : 0;
+  } else {
+    equalityResult = alignLeft ? 1 : -1;
+  }
+  function createDescComparator(indexA, indexB) {
+    const priorityA = getPriorityForButton(childrenData[indexA], field);
+    const priorityB = getPriorityForButton(childrenData[indexB], field);
+    if (priorityA == null && priorityB == null) {
+      return 0;
+    }
+    if (priorityA == null) {
+      return 1;
+    }
+    if (priorityB == null) {
+      return -1;
+    }
+    if (priorityA === priorityB) {
+      return equalityResult;
+    }
+    return priorityB - priorityA;
+  }
+  function createAscComparator(indexA, indexB) {
+    return createDescComparator(indexA, indexB) * -1;
+  }
+  return sort === "asc" ? createAscComparator : createDescComparator;
+};
+function alignSecondaryChild(orderedChildrenData, sortOrder, alignLeft) {
+  const noSecondaryChildren = { index: void 0, align: void 0 };
+  if (sortOrder === "asc" || alignLeft) {
+    const firstSecondaryChildIndex = orderedChildrenData.findIndex(
+      (childData) => childData.variant === "secondary"
+    );
+    if (firstSecondaryChildIndex !== -1) {
+      const originalChildIndex = orderedChildrenData[firstSecondaryChildIndex].index;
+      return { index: originalChildIndex, align: "right" };
+    }
+    return noSecondaryChildren;
+  }
+  let index = orderedChildrenData.length;
+  while (index--) {
+    if (orderedChildrenData[index].variant === "secondary") {
+      return { index: orderedChildrenData[index].index, align: "left" };
+    }
+  }
+  return noSecondaryChildren;
+}
+const withBaseName = makePrefixer("saltButtonBar");
+const ButtonBar = forwardRef(
+  function ButtonBar2({
+    alignLeft = false,
+    children: childrenProp,
+    className,
+    disableAutoAlignment,
+    sortAlignLeft = "desc",
+    sortOrder = "desc",
+    sortStackOrder = "desc",
+    stackAtBreakpoint = "xs",
+    ...rest
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-button-bar",
+      css: css_248z,
+      window: targetWindow
+    });
+    const [childrenData, setChildrenData] = useDescendants();
+    const matches = false;
+    const childrenArray = Children.toArray(childrenProp);
+    const childrenIndexes = childrenArray.map((_, index) => index);
+    createComparatorForField(
+      "stackOrder",
+      sortStackOrder,
+      alignLeft,
+      childrenData
+    );
+    const orderComparator = createComparatorForField(
+      "order",
+      sortOrder,
+      alignLeft,
+      childrenData
+    );
+    const alignLeftComparator = createComparatorForField(
+      "alignLeftOrder",
+      sortAlignLeft,
+      alignLeft,
+      childrenData
+    );
+    let orderedChildrenIndexes;
+    if (childrenData.length !== childrenIndexes.length) {
+      orderedChildrenIndexes = childrenIndexes;
+    } else {
+      orderedChildrenIndexes = childrenIndexes.sort(
+        alignLeft ? alignLeftComparator : orderComparator
+      );
+    }
+    let secondaryChildAlignment = {
+      index: void 0,
+      align: void 0
+    };
+    if (!disableAutoAlignment) {
+      secondaryChildAlignment = alignSecondaryChild(
+        orderedChildrenIndexes.map((index) => ({
+          index,
+          ...childrenData[index]
+        })),
+        sortOrder,
+        alignLeft
+      );
+    }
+    const hasSecondaryButtons = childrenData.some(
+      (buttonData) => buttonData.variant === "secondary"
+    );
+    const orderedChildren = orderedChildrenIndexes.map(
+      (index) => childrenArray[index]
+    );
+    const buttonBarContextValue = useMemo(
+      () => ({
+        matches,
+        alignedIndex: secondaryChildAlignment.index,
+        align: secondaryChildAlignment.align
+      }),
+      [secondaryChildAlignment.align, secondaryChildAlignment.index]
+    );
+    return /* @__PURE__ */ jsx(ButtonBarContext.Provider, { value: buttonBarContextValue, children: /* @__PURE__ */ jsx(DescendantProvider, { items: childrenData, setItems: setChildrenData, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": "button bar",
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("stacked")]: matches,
+            [withBaseName("alignLeft")]: alignLeft,
+            [withBaseName("autoAligning")]: hasSecondaryButtons && !disableAutoAlignment
+          },
+          className
+        ),
+        ref,
+        role: "region",
+        ...rest,
+        children: orderedChildren
+      }
+    ) }) });
+  }
+);
+
+export { ButtonBar, DefaultButtonsOrderByVariant };
+//# sourceMappingURL=ButtonBar.js.map

package/dist-es/button-bar/ButtonBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBar.js","sources":["../src/button-bar/ButtonBar.tsx"],"sourcesContent":["import { type ButtonVariant, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  forwardRef,\n  type HTMLAttributes,\n  type ReactNode,\n  useMemo,\n} from \"react\";\nimport buttonBarCss from \"./ButtonBar.css\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { DescendantProvider } from \"./internal/DescendantContext\";\nimport { useDescendants } from \"./internal/useDescendants\";\n\n// biome-ignore lint/suspicious/noExplicitAny: any is used here to allow flexibility in the type of keys\nexport type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;\n\ntype ButtonBarOrderKey = \"order\" | \"alignLeftOrder\" | \"stackOrder\";\nexport type ButtonBarSortOrder = \"asc\" | \"desc\";\n\nexport const DefaultButtonsOrderByVariant: Record<\n  ButtonVariant,\n  Record<ButtonBarOrderKey, number>\n> = {\n  cta: {\n    order: 0,\n    alignLeftOrder: 1,\n    stackOrder: 2,\n  },\n  primary: {\n    order: 1,\n    alignLeftOrder: 2,\n    stackOrder: 1,\n  },\n  secondary: {\n    order: 2,\n    alignLeftOrder: 0,\n    stackOrder: 0,\n  },\n};\n\ntype OrderedButtonData = { variant?: ButtonVariant } & PartialRecord<\n  ButtonBarOrderKey,\n  number\n>;\n\nfunction getPriorityForButton(\n  item: OrderedButtonData,\n  field: ButtonBarOrderKey,\n) {\n  const variant = item?.variant || \"primary\";\n  return item?.[field] ?? DefaultButtonsOrderByVariant[variant][field];\n}\nconst createComparatorForField = (\n  field: ButtonBarOrderKey,\n  sort: ButtonBarSortOrder,\n  alignLeft: boolean,\n  childrenData: Array<OrderedButtonData>,\n) => {\n  let equalityResult: number;\n  if (field === \"order\" || field === \"stackOrder\") {\n    equalityResult = sort === \"asc\" ? 1 : 0;\n  } else {\n    equalityResult = alignLeft ? 1 : -1;\n  }\n\n  function createDescComparator(indexA: number, indexB: number) {\n    const priorityA = getPriorityForButton(childrenData[indexA], field);\n    const priorityB = getPriorityForButton(childrenData[indexB], field);\n    if (priorityA == null && priorityB == null) {\n      return 0;\n    }\n    if (priorityA == null) {\n      return 1;\n    }\n    if (priorityB == null) {\n      return -1;\n    }\n    if (priorityA === priorityB) {\n      return equalityResult;\n    }\n    return priorityB - priorityA;\n  }\n\n  function createAscComparator(indexA: number, indexB: number) {\n    return createDescComparator(indexA, indexB) * -1;\n  }\n\n  return sort === \"asc\" ? createAscComparator : createDescComparator;\n};\n\nfunction alignSecondaryChild(\n  orderedChildrenData: Array<OrderedButtonData & { index: number }>,\n  sortOrder: ButtonBarSortOrder,\n  alignLeft: boolean,\n): { index?: number; align?: \"left\" | \"right\" } {\n  const noSecondaryChildren = { index: undefined, align: undefined };\n  if (sortOrder === \"asc\" || alignLeft) {\n    const firstSecondaryChildIndex = orderedChildrenData.findIndex(\n      (childData) => childData.variant === \"secondary\",\n    );\n\n    if (firstSecondaryChildIndex !== -1) {\n      const originalChildIndex =\n        orderedChildrenData[firstSecondaryChildIndex].index;\n      return { index: originalChildIndex, align: \"right\" };\n    }\n    return noSecondaryChildren;\n  }\n  let index = orderedChildrenData.length;\n  while (index--) {\n    if (orderedChildrenData[index].variant === \"secondary\") {\n      return { index: orderedChildrenData[index].index, align: \"left\" };\n    }\n  }\n  return noSecondaryChildren;\n}\n\nexport interface ButtonBarProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * By default ButtonBar lays buttons from right to left horizontally ordering action buttons by order prop.\n   * Use this prop to lay button from left to right instead.\n   * Actions buttons will be ordered by alignLeftOrder prop.\n   */\n  alignLeft?: boolean;\n  /**\n   * A list of OrderButtons. Required to have some children.\n   */\n  children: ReactNode;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * By default ButtonBar aligns secondary buttons to the left while displayed horizontally\n   * and to the right while aligned left or sorting ascending.\n   * Use this prop to disable this behavior.\n   */\n  disableAutoAlignment?: boolean;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and aligned left.\n   */\n  sortAlignLeft?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is NOT stacked and NOT aligned left.\n   */\n  sortOrder?: ButtonBarSortOrder;\n  /**\n   * By default ButtonBar sorts buttons in descending order.\n   * Use this prop to change that when the button bar is stacked.\n   */\n  sortStackOrder?: ButtonBarSortOrder;\n  /**\n   * When the viewport is equal to or smaller than the breakpoint the buttons will be stacked vertically.\n   * Alternatively pass a screen width number in pixels.\n   * Use `0` to disable this feature. Defaults to 'xs'.\n   * Actions buttons will be ordered by stackOrder prop.\n   */\n  stackAtBreakpoint?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | number;\n}\n\nconst withBaseName = makePrefixer(\"saltButtonBar\");\n\nexport const ButtonBar = forwardRef<HTMLDivElement, ButtonBarProps>(\n  function ButtonBar(\n    {\n      alignLeft = false,\n      children: childrenProp,\n      className,\n      disableAutoAlignment,\n      sortAlignLeft = \"desc\",\n      sortOrder = \"desc\",\n      sortStackOrder = \"desc\",\n      stackAtBreakpoint = \"xs\",\n      ...rest\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-button-bar\",\n      css: buttonBarCss,\n      window: targetWindow,\n    });\n\n    const [childrenData, setChildrenData] = useDescendants<OrderedButtonData>();\n    // TODO: we need a mechanism to work with breakpoints.\n    const matches = false;\n\n    const childrenArray = Children.toArray(childrenProp);\n    const childrenIndexes = childrenArray.map((_, index) => index);\n    const stackOrderComparator = createComparatorForField(\n      \"stackOrder\",\n      sortStackOrder,\n      alignLeft,\n      childrenData,\n    );\n    const orderComparator = createComparatorForField(\n      \"order\",\n      sortOrder,\n      alignLeft,\n      childrenData,\n    );\n    const alignLeftComparator = createComparatorForField(\n      \"alignLeftOrder\",\n      sortAlignLeft,\n      alignLeft,\n      childrenData,\n    );\n\n    let orderedChildrenIndexes: number[];\n\n    if (childrenData.length !== childrenIndexes.length) {\n      orderedChildrenIndexes = childrenIndexes;\n    } else {\n      orderedChildrenIndexes = matches\n        ? childrenIndexes.sort(stackOrderComparator)\n        : childrenIndexes.sort(\n            alignLeft ? alignLeftComparator : orderComparator,\n          );\n    }\n\n    let secondaryChildAlignment: { index?: number; align?: \"left\" | \"right\" } =\n      {\n        index: undefined,\n        align: undefined,\n      };\n    if (!disableAutoAlignment) {\n      secondaryChildAlignment = alignSecondaryChild(\n        orderedChildrenIndexes.map((index) => ({\n          index,\n          ...childrenData[index],\n        })),\n        sortOrder,\n        alignLeft,\n      );\n    }\n\n    const hasSecondaryButtons = childrenData.some(\n      (buttonData) => buttonData.variant === \"secondary\",\n    );\n\n    const orderedChildren = orderedChildrenIndexes.map(\n      (index) => childrenArray[index],\n    );\n\n    const buttonBarContextValue = useMemo(\n      () => ({\n        matches,\n        alignedIndex: secondaryChildAlignment.index,\n        align: secondaryChildAlignment.align,\n      }),\n      [secondaryChildAlignment.align, secondaryChildAlignment.index],\n    );\n\n    return (\n      <ButtonBarContext.Provider value={buttonBarContextValue}>\n        <DescendantProvider items={childrenData} setItems={setChildrenData}>\n          <div\n            aria-label=\"button bar\"\n            className={clsx(\n              withBaseName(),\n              {\n                [withBaseName(\"stacked\")]: matches,\n                [withBaseName(\"alignLeft\")]: alignLeft,\n                [withBaseName(\"autoAligning\")]:\n                  hasSecondaryButtons && !disableAutoAlignment,\n              },\n              className,\n            )}\n            ref={ref}\n            role=\"region\"\n            {...rest}\n          >\n            {orderedChildren}\n          </div>\n        </DescendantProvider>\n      </ButtonBarContext.Provider>\n    );\n  },\n);\n"],"names":["ButtonBar","buttonBarCss"],"mappings":"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"}

package/dist-es/button-bar/OrderedButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOrderedButton-alignLeft {\n  margin-right: auto;\n}\n\n.saltOrderedButton-alignRight {\n  margin-left: auto;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OrderedButton.css.js.map

package/dist-es/button-bar/OrderedButton.css.js.map

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

package/dist-es/button-bar/OrderedButton.js

@@ -0,0 +1,56 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, Button, capitalize } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { ButtonBarContext } from './internal/ButtonBarContext.js';
+import { useDescendant } from './internal/useDescendant.js';
+import css_248z from './OrderedButton.css.js';
+
+const withBasename = makePrefixer("saltOrderedButton");
+const OrderedButton = forwardRef(
+  function OrderedButton2({
+    className,
+    align: alignProp,
+    order,
+    alignLeftOrder,
+    stackOrder,
+    variant,
+    ...restProps
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-ordered-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });
+    const {
+      matches,
+      align: alignContext,
+      alignedIndex
+    } = useContext(ButtonBarContext);
+    const alignFromParent = index === alignedIndex ? alignContext : void 0;
+    const align = alignProp || alignFromParent;
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: clsx(
+          withBasename(),
+          {
+            [withBasename(`align${align ? capitalize(align) : ""}`)]: align && !matches,
+            [withBasename("stacked")]: matches
+          },
+          className
+        ),
+        ref,
+        variant,
+        ...restProps
+      }
+    );
+  }
+);
+
+export { OrderedButton };
+//# sourceMappingURL=OrderedButton.js.map

package/dist-es/button-bar/OrderedButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedButton.js","sources":["../src/button-bar/OrderedButton.tsx"],"sourcesContent":["import {\n  Button,\n  type ButtonProps,\n  capitalize,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useContext } from \"react\";\nimport { ButtonBarContext } from \"./internal/ButtonBarContext\";\nimport { useDescendant } from \"./internal/useDescendant\";\n\nimport orderedButtonCss from \"./OrderedButton.css\";\n\nexport interface OrderedButtonProps extends ButtonProps {\n  /**\n   * Aligns the button (and any buttons before/after) it on the left/right\n   * of the container\n   */\n  align?: \"left\" | \"right\";\n  /**\n   * The order the button will be rendered when NOT stacked and the button bar is aligned left order.\n   * Buttons are ordered in descending order by default and then by their source order.\n   * This defaults to 1 for `CTA`, 2 for `regular` and 0 for `secondary`\n   */\n  alignLeftOrder?: number;\n  /**\n   * The className(s) of the component\n   */\n  className?: string;\n  /**\n   * The order the button will be rendered when NOT stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 0 for `CTA`, 1 for `regular` and 2 for `secondary`\n   */\n  order?: number;\n  /**\n   * The order the button will be rendered when stacked. Buttons are ordered\n   * in descending order by default and then by their source order.\n   * This defaults to 2 for `CTA`, 1 for `regular` and 0 for `secondary`\n   */\n  stackOrder?: number;\n}\n\nconst withBasename = makePrefixer(\"saltOrderedButton\");\n\nexport const OrderedButton = forwardRef<HTMLButtonElement, OrderedButtonProps>(\n  function OrderedButton(\n    {\n      className,\n      align: alignProp,\n      order,\n      alignLeftOrder,\n      stackOrder,\n      variant,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-ordered-button\",\n      css: orderedButtonCss,\n      window: targetWindow,\n    });\n\n    const index = useDescendant({ order, stackOrder, alignLeftOrder, variant });\n    const {\n      matches,\n      align: alignContext,\n      alignedIndex,\n    } = useContext(ButtonBarContext);\n\n    const alignFromParent = index === alignedIndex ? alignContext : undefined;\n    const align = alignProp || alignFromParent;\n\n    return (\n      <Button\n        className={clsx(\n          withBasename(),\n          {\n            [withBasename(`align${align ? capitalize(align) : \"\"}`)]:\n              align && !matches,\n            [withBasename(\"stacked\")]: matches,\n          },\n          className,\n        )}\n        ref={ref}\n        variant={variant}\n        {...restProps}\n      />\n    );\n  },\n);\n"],"names":["OrderedButton","orderedButtonCss"],"mappings":";;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CACP;AAAA,IACE,SAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,KAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,IACA,OAAA;AAAA,IACA,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,eAAe,SAAA,EAAU;AAC/B,IAAA,wBAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,QAAQ,aAAA,CAAc,EAAE,OAAO,UAAA,EAAY,cAAA,EAAgB,SAAS,CAAA;AAC1E,IAAA,MAAM;AAAA,MACJ,OAAA;AAAA,MACA,KAAA,EAAO,YAAA;AAAA,MACP;AAAA,KACF,GAAI,WAAW,gBAAgB,CAAA;AAE/B,IAAA,MAAM,eAAA,GAAkB,KAAA,KAAU,YAAA,GAAe,YAAA,GAAe,MAAA;AAChE,IAAA,MAAM,QAAQ,SAAA,IAAa,eAAA;AAE3B,IAAA,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,YAAA,EAAa;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,CAAA,KAAA,EAAQ,KAAA,GAAQ,UAAA,CAAW,KAAK,CAAA,GAAI,EAAE,CAAA,CAAE,CAAC,GACrD,KAAA,IAAS,CAAC,OAAA;AAAA,YACZ,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG;AAAA,WAC7B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACA,OAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,EAEJ;AACF;;;;"}

package/dist-es/button-bar/internal/ButtonBarContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonBarContext.js","sources":["../src/button-bar/internal/ButtonBarContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\n\nexport interface ButtonBarContextValue {\n  matches: boolean;\n  alignedIndex?: number;\n  align?: \"left\" | \"right\";\n}\n\nexport const ButtonBarContext = createContext<ButtonBarContextValue>(\n  \"ButtonBarContext\",\n  {\n    matches: false,\n  },\n);\n"],"names":[],"mappings":";;AAQO,MAAM,gBAAA,GAAmB,aAAA;AAAA,EAC9B,kBAAA;AAAA,EACA;AAAA,IACE,OAAA,EAAS;AAAA;AAEb;;;;"}

package/dist-es/button-bar/internal/DescendantContext.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { createContext, useRef, useState } from 'react';
+
+const DescendantContext = createContext({});
+function DescendantProvider({
+  items,
+  setItems,
+  ...props
+}) {
+  const assigning = useRef(true);
+  const [, forceUpdate] = useState();
+  useIsomorphicLayoutEffect(() => {
+    if (assigning.current) {
+      assigning.current = false;
+      forceUpdate({});
+    } else {
+      assigning.current = true;
+    }
+    return () => {
+      if (assigning.current) {
+        setItems([]);
+      }
+    };
+  }, [items]);
+  return /* @__PURE__ */ jsx(DescendantContext.Provider, { ...props, value: { setItems, assigning } });
+}
+
+export { DescendantContext, DescendantProvider };
+//# sourceMappingURL=DescendantContext.js.map

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

@@ -0,0 +1 @@
+{"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":[],"mappings":";;;;AAkCO,MAAM,iBAAA,GAAoB,aAAA,CAAqC,EAAE;AAEjE,SAAS,kBAAA,CAAmB;AAAA,EACjC,KAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA4B;AAG1B,EAAA,MAAM,SAAA,GAAY,OAAO,IAAI,CAAA;AAK7B,EAAA,MAAM,GAAG,WAAW,CAAA,GAAI,QAAA,EAAkB;AAI1C,EAAA,yBAAA,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,uBACE,GAAA,CAAC,iBAAA,CAAkB,QAAA,EAAlB,EAA4B,GAAG,OAAO,KAAA,EAAO,EAAE,QAAA,EAAU,SAAA,EAAU,EAAG,CAAA;AAE3E;;;;"}

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

@@ -0,0 +1,20 @@
+import { useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useContext, useRef } from 'react';
+import { DescendantContext } from './DescendantContext.js';
+
+function useDescendant(descendant) {
+  const { assigning, setItems } = useContext(DescendantContext);
+  const index = useRef(-1);
+  useIsomorphicLayoutEffect(() => {
+    if ((assigning == null ? void 0 : assigning.current) && setItems) {
+      setItems((old) => {
+        index.current = old.length;
+        return old.concat(descendant);
+      });
+    }
+  });
+  return index.current;
+}
+
+export { useDescendant };
+//# sourceMappingURL=useDescendant.js.map

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

@@ -0,0 +1 @@
+{"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":[],"mappings":";;;;AAMO,SAAS,cAAc,UAAA,EAAyC;AACrE,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAS,GAAI,WAAW,iBAAiB,CAAA;AAC5D,EAAA,MAAM,KAAA,GAAQ,OAAO,EAAE,CAAA;AAEvB,EAAA,yBAAA,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-es/button-bar/internal/useDescendants.js.map

@@ -0,0 +1 @@
+{"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":[],"mappings":";;AAGO,SAAS,cAAA,GAA0D;AACxE,EAAA,OAAO,QAAA,CAAc,EAAE,CAAA;AACzB;;;;"}

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

@@ -0,0 +1,235 @@
+import { jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, useState, useMemo, useReducer, useEffect, createElement, isValidElement, cloneElement } from 'react';
+import { useDensity, useControlled, usePrevious, ownerWindow, useForkRef, getRefFromChildren } from '@salt-ds/core';
+import { useEventCallback } from '../utils/useEventCallback.js';
+import { CascadingMenuList } from './CascadingMenuList.js';
+import { CascadingMenuAction } from './internal/CascadingMenuAction.js';
+import { defaultGetScreenBounds } from './internal/menuPositioning.js';
+import { deriveFlatStateFromTree } from './internal/stateUtils.js';
+import { useClickAway } from './internal/useClickAway.js';
+import { useMenuTriggerHandlers } from './internal/useMenuTriggerHandlers.js';
+import { useRefsManager } from './internal/useRefsManager.js';
+import { useStateReducer } from './internal/useStateReducer.js';
+import { stateChangeTypes } from './stateChangeTypes.js';
+
+const defaultItemToString = (item) => (item == null ? void 0 : item.title) || String(item);
+const CascadingMenu = 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,
+      // Add this to offset x, y on popper open
+      rootPlacementOffset,
+      menuTriggerRef: anchorRefProp,
+      open: openProp,
+      getScreenBounds = defaultGetScreenBounds,
+      disableMouseOutInteractions,
+      disableClickAway,
+      containingDocument = globalThis.document,
+      source: sourceProp
+    } = props;
+    const density = useDensity();
+    const refsManager = useRefsManager();
+    const childrenRef = useRef(null);
+    const getMenuTriggerRef = useCallback(
+      () => anchorRefProp || childrenRef.current,
+      [anchorRefProp]
+    );
+    const [menuSource] = useControlled({
+      controlled: sourceProp,
+      default: initialSourceProp,
+      name: "CascadingMenu",
+      state: "source"
+    });
+    const [isNavigatingWithKeyboard, setIsNavigatingWithKeyboard] = useState(false);
+    const menusDataById = useMemo(
+      () => menuSource ? deriveFlatStateFromTree(menuSource) : {},
+      [menuSource]
+    );
+    const rootMenuId = useMemo(
+      () => Object.keys(menusDataById).find((id) => menusDataById[id].level === 0),
+      [menusDataById]
+    );
+    const stateReducer = useStateReducer(
+      menusDataById,
+      isNavigatingWithKeyboard
+    );
+    const [state, dispatch] = useReducer(stateReducer, []);
+    const rootMenuState = state[0];
+    const prevState = usePrevious(state, void 0, []);
+    const prevRootMenuState = prevState == null ? void 0 : prevState[0];
+    useEffect(() => {
+      if (!!rootMenuState !== !!prevRootMenuState) {
+        if (!rootMenuState) {
+          onClose == null ? void 0 : onClose();
+        } else if (rootMenuState) {
+          onOpen == null ? void 0 : onOpen();
+        }
+      }
+    });
+    const openCloseMenu = useCallback(
+      (open) => {
+        if (rootMenuId) {
+          dispatch({
+            type: open ? CascadingMenuAction.OPEN_MENU : CascadingMenuAction.CLOSE_CASCADING_MENU,
+            cause: stateChangeTypes.MOUSE_TOGGLE,
+            targetId: rootMenuId
+          });
+        }
+      },
+      [rootMenuId]
+    );
+    useEffect(() => {
+      if (openProp !== void 0 && openProp !== !!rootMenuState) {
+        openCloseMenu(openProp);
+      }
+    });
+    const clickAwayNodes = disableClickAway ? null : () => [getMenuTriggerRef(), ...refsManager.values()].filter(
+      (node) => node !== null
+    );
+    useClickAway(
+      clickAwayNodes,
+      containingDocument,
+      () => {
+        if (rootMenuId) {
+          dispatch({
+            type: CascadingMenuAction.CLOSE_CASCADING_MENU,
+            cause: stateChangeTypes.CLICKED_AWAY,
+            targetId: rootMenuId
+          });
+        }
+      },
+      () => {
+        setIsNavigatingWithKeyboard(false);
+      }
+    );
+    const handleResize = useEventCallback(() => {
+      if (rootMenuState && rootMenuId) {
+        dispatch({
+          type: CascadingMenuAction.CLOSE_CASCADING_MENU,
+          cause: stateChangeTypes.ON_RESIZE,
+          targetId: rootMenuId
+        });
+      }
+    });
+    useEffect(() => {
+      const win = ownerWindow(getMenuTriggerRef());
+      win.addEventListener("resize", handleResize);
+      return () => {
+        win.removeEventListener("resize", handleResize);
+      };
+    }, [getMenuTriggerRef, handleResize]);
+    const onItemClickCallback = useCallback(
+      (sourceItem, event) => {
+        onItemClick == null ? void 0 : onItemClick(sourceItem, event);
+        if (!isNavigatingWithKeyboard && rootMenuId) {
+          dispatch({
+            type: CascadingMenuAction.CLOSE_CASCADING_MENU,
+            cause: stateChangeTypes.ITEM_CLICKED,
+            targetId: rootMenuId
+          });
+        }
+      },
+      [isNavigatingWithKeyboard, onItemClick, rootMenuId]
+    );
+    const setMenuTriggerRef = useCallback((node) => {
+      childrenRef.current = node;
+    }, []);
+    const handleRef = useForkRef(
+      getRefFromChildren(children),
+      setMenuTriggerRef
+    );
+    const [onMenuTriggerClick, onMenuTriggerKeydown] = useMenuTriggerHandlers({
+      dispatch,
+      children,
+      setIsNavigatingWithKeyboard,
+      openCloseMenu,
+      rootMenuState,
+      rootMenuId,
+      menusDataById
+    });
+    const cloneMenuChildren = (cloneChildren) => {
+      if (isValidElement(cloneChildren)) {
+        const childrenProps = {
+          ...cloneChildren.props
+        };
+        if (openProp === void 0) {
+          childrenProps.onClick = onMenuTriggerClick;
+          childrenProps.onKeyDown = onMenuTriggerKeydown;
+        }
+        return 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
+    };
+    useEffect(() => {
+      if (!openProp) {
+        setIsNavigatingWithKeyboard(false);
+      }
+    }, [openProp, rootPlacementOffset]);
+    return Object.keys(menusDataById).length > 0 ? /* @__PURE__ */ jsxs(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__ */ createElement(
+          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;
+  }
+);
+
+export { CascadingMenu };
+//# sourceMappingURL=CascadingMenu.js.map

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

@@ -0,0 +1 @@
+{"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":["CascadingMenu"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+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";
+
+export { css_248z as default };
+//# sourceMappingURL=CascadingMenuItem.css.js.map

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

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