@salt-ds/lab 1.0.0-alpha.8 → 1.0.0-alpha.81

package/dist-es/toolbar/Toolbar.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useIdMemo, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef, Children, cloneElement } from 'react';
+import { isOverflowed } from '../responsive/overflowUtils.js';
+import { useOverflowCollectionItems } from '../responsive/useOverflowCollectionItems.js';
+import { useOverflowLayout } from '../responsive/useOverflowLayout.js';
+import '../responsive/useResizeObserver.js';
+import { renderToolbarItems } from './internal/renderToolbarItems.js';
+import { OverflowPanel } from './overflow-panel/OverflowPanel.js';
+import { OverflowSeparator } from './overflow-panel/OverflowSeparator.js';
+import css_248z from './Toolbar.css.js';
+import { Tooltray } from './Tooltray.js';
+
+const classBase = "saltToolbar";
+const Toolbar = forwardRef(
+  function Toolbar2(props, ref) {
+    const {
+      TooltipComponent,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy,
+      children,
+      className,
+      id: idProp,
+      overflowButtonIcon,
+      overflowButtonLabel,
+      overflowButtonPlacement = "end",
+      responsive = true,
+      disabled = false,
+      orientation = "horizontal",
+      ...restProp
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toolbar",
+      css: css_248z,
+      window: targetWindow
+    });
+    const toolbarId = useIdMemo(idProp);
+    const containerRef = useRef(null);
+    const setContainerRef = useForkRef(ref, containerRef);
+    const collectionHook = useOverflowCollectionItems({
+      children,
+      id: toolbarId,
+      orientation,
+      label: "Toolbar"
+    });
+    const [innerContainerRef] = useOverflowLayout({
+      collectionHook,
+      id: toolbarId,
+      orientation,
+      label: "Toolbar"
+    });
+    const overflowedItems = collectionHook.data.filter(isOverflowed);
+    const overflowMenuItems = overflowedItems.reduce(
+      (items, item, i, arr) => {
+        const { element, id } = item;
+        if (element.type === Tooltray) {
+          const tooltrayProps = element.props;
+          const nestedElements = tooltrayProps.children;
+          items.push(
+            ...Children.map(
+              nestedElements,
+              (el) => cloneElement(el, {
+                "data-is-inside-panel": true,
+                key: id
+              })
+            )
+          );
+          if (i < arr.length - 1) {
+            items.push(/* @__PURE__ */ jsx(OverflowSeparator, {}, `separator-${id}`));
+          }
+        } else {
+          items.push(
+            cloneElement(element, {
+              key: id,
+              "data-is-inside-panel": true
+            })
+          );
+        }
+        return items;
+      },
+      []
+    );
+    const overflowIndicator = collectionHook.data.find(
+      (i) => i.isOverflowIndicator
+    );
+    const overflowPanel = overflowIndicator ? /* @__PURE__ */ jsx(
+      OverflowPanel,
+      {
+        className: clsx("saltToolbarField"),
+        "data-index": collectionHook.data.length,
+        "data-overflow-indicator": true,
+        "data-priority": 1,
+        id: overflowIndicator.id,
+        triggerButtonIcon: overflowButtonIcon,
+        triggerButtonLabel: overflowButtonLabel,
+        children: overflowMenuItems
+      }
+    ) : null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        "aria-labelledby": clsx(toolbarId, ariaLabelledBy),
+        "aria-orientation": orientation,
+        className: clsx(classBase, className, {
+          [`${classBase}-disabled`]: disabled,
+          // TODO whats this for ?
+          [`${classBase}-nonResponsive`]: !responsive
+        }),
+        id: toolbarId,
+        ref: setContainerRef,
+        role: "toolbar",
+        ...restProp,
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "Responsive-inner",
+            ref: innerContainerRef,
+            "data-collapsing": collectionHook.data.some((item) => item.collapsing),
+            children: [
+              overflowButtonPlacement === "start" && overflowPanel,
+              renderToolbarItems(collectionHook, overflowedItems, orientation),
+              overflowButtonPlacement === "end" && overflowPanel
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+
+export { Toolbar };
+//# sourceMappingURL=Toolbar.js.map

package/dist-es/toolbar/Toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toolbar.js","sources":["../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  type ReactElement,\n  useRef,\n} from \"react\";\n\nimport {\n  isOverflowed,\n  useOverflowCollectionItems,\n  useOverflowLayout,\n} from \"../responsive\";\nimport { renderToolbarItems } from \"./internal/renderToolbarItems\";\nimport { OverflowPanel } from \"./overflow-panel/OverflowPanel\";\nimport { OverflowSeparator } from \"./overflow-panel/OverflowSeparator\";\nimport toolbarCss from \"./Toolbar.css\";\nimport type { ToolbarProps } from \"./ToolbarProps\";\nimport { Tooltray } from \"./Tooltray\";\nimport type { TooltrayProps } from \"./TooltrayProps\";\n\nconst classBase = \"saltToolbar\";\n\n/**\n * The core Toolbar implementation, without the external wrapper provided by Toolbar.js\n */\nexport const Toolbar = forwardRef<HTMLDivElement, ToolbarProps>(\n  function Toolbar(props, ref) {\n    const {\n      TooltipComponent,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      children,\n      className,\n      id: idProp,\n      overflowButtonIcon,\n      overflowButtonLabel,\n      overflowButtonPlacement = \"end\",\n      responsive = true,\n      disabled = false,\n      orientation = \"horizontal\",\n      ...restProp\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toolbar\",\n      css: toolbarCss,\n      window: targetWindow,\n    });\n\n    const toolbarId = useIdMemo(idProp);\n    const containerRef = useRef<HTMLDivElement>(null);\n\n    const setContainerRef = useForkRef(ref, containerRef);\n\n    const collectionHook = useOverflowCollectionItems({\n      children,\n      id: toolbarId,\n      orientation,\n      label: \"Toolbar\",\n    });\n\n    const [innerContainerRef] = useOverflowLayout({\n      collectionHook,\n      id: toolbarId,\n      orientation,\n      label: \"Toolbar\",\n    });\n\n    const overflowedItems = collectionHook.data.filter(isOverflowed);\n\n    const overflowMenuItems = overflowedItems.reduce<ReactElement[]>(\n      (items, item, i, arr) => {\n        const { element, id } = item;\n        if (element.type === Tooltray) {\n          const tooltrayProps = element.props as TooltrayProps;\n          const nestedElements = tooltrayProps.children as ReactElement[];\n          items.push(\n            ...Children.map(nestedElements, (el) =>\n              cloneElement(el, {\n                \"data-is-inside-panel\": true,\n                key: id,\n              }),\n            ),\n          );\n          if (i < arr.length - 1) {\n            items.push(<OverflowSeparator key={`separator-${id}`} />);\n          }\n        } else {\n          items.push(\n            cloneElement(element, {\n              key: id,\n              \"data-is-inside-panel\": true,\n            }),\n          );\n        }\n        return items;\n      },\n      [] as ReactElement[],\n    );\n\n    const overflowIndicator = collectionHook.data.find(\n      (i) => i.isOverflowIndicator,\n    );\n\n    const overflowPanel = overflowIndicator ? (\n      <OverflowPanel\n        className={clsx(\"saltToolbarField\")}\n        data-index={collectionHook.data.length}\n        data-overflow-indicator\n        data-priority={1}\n        id={overflowIndicator.id}\n        triggerButtonIcon={overflowButtonIcon}\n        triggerButtonLabel={overflowButtonLabel}\n      >\n        {overflowMenuItems}\n      </OverflowPanel>\n    ) : null;\n\n    //TODO when we drive this from the overflowItems, the overflowIndicator will\n    // be an overflowItem\n    return (\n      <div\n        aria-label={ariaLabel}\n        // Using `classnames` to join string together. User may want to provide\n        // custom ids (e.g. id from counter label), so the element is labelled by\n        // multiple items\n        aria-labelledby={clsx(toolbarId, ariaLabelledBy)}\n        aria-orientation={orientation}\n        className={clsx(classBase, className, {\n          [`${classBase}-disabled`]: disabled,\n          // TODO whats this for ?\n          [`${classBase}-nonResponsive`]: !responsive,\n        })}\n        id={toolbarId}\n        ref={setContainerRef}\n        role=\"toolbar\"\n        {...restProp}\n      >\n        <div\n          className=\"Responsive-inner\"\n          ref={innerContainerRef}\n          data-collapsing={collectionHook.data.some((item) => item.collapsing)}\n        >\n          {overflowButtonPlacement === \"start\" && overflowPanel}\n          {renderToolbarItems(collectionHook, overflowedItems, orientation)}\n          {overflowButtonPlacement === \"end\" && overflowPanel}\n        </div>\n      </div>\n    );\n  },\n);\n"],"names":["Toolbar","toolbarCss"],"mappings":"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"}

package/dist-es/toolbar/ToolbarButton.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* .saltToolbarButton {\n    outline: none !important;\n} */\n\n.saltToolbarButton:not([data-is-inside-panel]) {\n  --saltButton-fontSize: 0;\n  --saltButton-letterSpacing: 0;\n  gap: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToolbarButton.css.js.map

package/dist-es/toolbar/ToolbarButton.css.js.map

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

package/dist-es/toolbar/ToolbarButton.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import { Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import css_248z from './ToolbarButton.css.js';
+
+const ToolbarButton = forwardRef(
+  function ToolbarButton2({ label, ...props }, forwardedRef) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toolbar-button",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "secondary",
+        ...props,
+        className: "saltToolbarButton",
+        "data-overflow-label": label,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+
+export { ToolbarButton };
+//# sourceMappingURL=ToolbarButton.js.map

package/dist-es/toolbar/ToolbarButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarButton.js","sources":["../src/toolbar/ToolbarButton.tsx"],"sourcesContent":["import { Button, type ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport toolbarButtonCss from \"./ToolbarButton.css\";\n\nexport type ToolbarButtonProps = ButtonProps & {\n  overflowLabel?: string;\n  label?: string;\n};\n\nexport const ToolbarButton = forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n  function ToolbarButton({ label, ...props }, forwardedRef) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toolbar-button\",\n      css: toolbarButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Button\n        variant=\"secondary\"\n        {...props}\n        className=\"saltToolbarButton\"\n        data-overflow-label={label}\n        ref={forwardedRef}\n      />\n    );\n  },\n);\n"],"names":["ToolbarButton","toolbarButtonCss"],"mappings":";;;;;;;AAYO,MAAM,aAAA,GAAgB,UAAA;AAAA,EAC3B,SAASA,cAAAA,CAAc,EAAE,OAAO,GAAG,KAAA,IAAS,YAAA,EAAc;AACxD,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,uBACE,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAQ,WAAA;AAAA,QACP,GAAG,KAAA;AAAA,QACJ,SAAA,EAAU,mBAAA;AAAA,QACV,qBAAA,EAAqB,KAAA;AAAA,QACrB,GAAA,EAAK;AAAA;AAAA,KACP;AAAA,EAEJ;AACF;;;;"}

package/dist-es/toolbar/Tooltray.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltTooltray {\n  --toolbar-tooltray-height: var(--toolbar-size);\n}\n\n.saltTooltray {\n  background: inherit;\n  flex-shrink: 0;\n  flex-grow: 0;\n  position: relative;\n  overflow: hidden;\n  align-items: flex-start;\n  justify-content: flex-start;\n}\n\n.saltTooltray-horizontal {\n  height: var(--toolbar-tooltray-height);\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n.saltTooltray > .Responsive-inner {\n  align-items: center;\n  display: flex;\n  flex: 1;\n  flex-wrap: nowrap;\n  gap: 0 !important;\n  justify-content: inherit;\n}\n\n/* .saltTooltray-horizontal > .Responsive-inner > :not(:last-child) { */\n.saltTooltray-horizontal > .Responsive-inner > * {\n  margin-top: var(--salt-size-unit);\n  margin-right: var(--salt-size-unit);\n}\n\n/* .saltTooltray-horizontal:first-child {\n  padding-left: var(--salt-size-unit);\n} */\n/* .saltTooltray-horizontal:last-child {\n  padding-right: var(--salt-size-unit);\n} */\n\n.saltTooltray-horizontal:not(:first-child) {\n  margin-left: var(--salt-size-unit);\n  padding-left: calc(var(--salt-size-unit) * 2);\n}\n.saltTooltray-horizontal:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  background: var(--salt-separable-primary-borderColor);\n  top: 8px;\n  left: 0;\n  width: 1px;\n  height: 28px;\n}\n\n.saltTooltray > .Responsive-inner > .saltToolbarField {\n  flex: 0 0 auto;\n}\n\n.saltTooltray > .Responsive-inner > *[data-pad-start=\"true\"] {\n  margin-left: auto;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"] {\n  flex-shrink: 0;\n}\n.saltTooltray[data-collapsible=\"dynamic\"] > .Responsive-inner {\n  flex-wrap: wrap;\n}\n.saltTooltray[data-collapsing=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsed=\"true\"] {\n  flex-shrink: 1;\n}\n\n.saltTooltray[data-collapsible=\"dynamic\"][data-collapsed=\"true\"] {\n  flex-basis: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=Tooltray.css.js.map

package/dist-es/toolbar/Tooltray.css.js.map

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

package/dist-es/toolbar/Tooltray.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useIdMemo } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { cloneElement } from 'react';
+import { useOverflowCollectionItems } from '../responsive/useOverflowCollectionItems.js';
+import { useOverflowLayout } from '../responsive/useOverflowLayout.js';
+import { renderTrayTools } from './internal/renderTrayTools.js';
+import { OverflowPanel } from './overflow-panel/OverflowPanel.js';
+import css_248z from './Tooltray.css.js';
+
+const Tooltray = (props) => {
+  const {
+    "aria-label": ariaLabel,
+    // Tooltray itself doesn't use these alignment props directly,
+    // they are read and used by the parent Toolbar
+    alignEnd,
+    alignStart,
+    children,
+    className: classNameProp,
+    collapse: collapseProp,
+    collapsed: collapsedProp,
+    "data-collapsible": collapse = collapseProp,
+    "data-collapsed": collapsed = collapsedProp,
+    id: idProp,
+    isInsidePanel = false,
+    overflowButtonIcon,
+    overflowButtonLabel,
+    orientation = "horizontal",
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-tooltray",
+    css: css_248z,
+    window: targetWindow
+  });
+  const tooltrayId = useIdMemo(idProp);
+  const className = clsx(
+    "saltTooltray",
+    classNameProp,
+    `saltTooltray-${orientation}`,
+    { "saltTooltray-tooltrayOverflowed": isInsidePanel }
+  );
+  const collectionHook = useOverflowCollectionItems({
+    children,
+    id: tooltrayId,
+    label: "Tooltray",
+    orientation
+  });
+  const [innerContainerRef] = useOverflowLayout({
+    collectionHook,
+    id: tooltrayId,
+    orientation,
+    label: "Tooltray"
+  });
+  const overflowedItems = collapsed ? collectionHook.data.filter((item) => !item.isOverflowIndicator) : collectionHook.data.filter((item) => item.overflowed);
+  const overflowMenuItems = overflowedItems.map(
+    (i) => cloneElement(collectionHook.data[i.index].element, {
+      "data-is-inside-panel": true,
+      key: i.index
+    })
+  ).reverse();
+  const overflowIndicator = collectionHook.data.find(
+    (i) => i.isOverflowIndicator
+  );
+  const tooltrayProps = {
+    className,
+    "data-collapsed": collapsed,
+    "data-collapsible": collapse
+  };
+  return /* @__PURE__ */ jsx("div", { ...rest, ...tooltrayProps, id: tooltrayId, children: /* @__PURE__ */ jsxs("div", { className: clsx("Responsive-inner"), ref: innerContainerRef, children: [
+    renderTrayTools(
+      collectionHook,
+      overflowedItems,
+      orientation,
+      collapsed
+    ),
+    overflowIndicator || collapsed ? /* @__PURE__ */ jsx(
+      OverflowPanel,
+      {
+        className: clsx("saltToolbarField"),
+        "data-index": collectionHook.data.length,
+        "data-overflow-indicator": true,
+        "data-priority": 1,
+        id: overflowIndicator == null ? void 0 : overflowIndicator.id,
+        triggerButtonIcon: overflowButtonIcon,
+        triggerButtonLabel: overflowButtonLabel,
+        children: overflowMenuItems
+      }
+    ) : null
+  ] }) });
+};
+
+export { Tooltray };
+//# sourceMappingURL=Tooltray.js.map

package/dist-es/toolbar/Tooltray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltray.js","sources":["../src/toolbar/Tooltray.tsx"],"sourcesContent":["import { useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { cloneElement } from \"react\";\n\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { useOverflowLayout } from \"../responsive/useOverflowLayout\";\n\nimport { renderTrayTools } from \"./internal/renderTrayTools\";\nimport { OverflowPanel } from \"./overflow-panel/OverflowPanel\";\nimport tooltrayCss from \"./Tooltray.css\";\nimport type { TooltrayProps } from \"./TooltrayProps\";\n\nexport const Tooltray = (props: TooltrayProps) => {\n  const {\n    \"aria-label\": ariaLabel,\n    // Tooltray itself doesn't use these alignment props directly,\n    // they are read and used by the parent Toolbar\n    alignEnd,\n    alignStart,\n    children,\n    className: classNameProp,\n    collapse: collapseProp,\n    collapsed: collapsedProp,\n    \"data-collapsible\": collapse = collapseProp,\n    \"data-collapsed\": collapsed = collapsedProp,\n    id: idProp,\n    isInsidePanel = false,\n    overflowButtonIcon,\n    overflowButtonLabel,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tooltray\",\n    css: tooltrayCss,\n    window: targetWindow,\n  });\n  const tooltrayId = useIdMemo(idProp);\n\n  const className = clsx(\n    \"saltTooltray\",\n    classNameProp,\n    `saltTooltray-${orientation}`,\n    { \"saltTooltray-tooltrayOverflowed\": isInsidePanel },\n  );\n\n  const collectionHook = useOverflowCollectionItems({\n    children,\n    id: tooltrayId,\n    label: \"Tooltray\",\n    orientation,\n  });\n\n  const [innerContainerRef] = useOverflowLayout({\n    collectionHook,\n    id: tooltrayId,\n    orientation,\n    label: \"Tooltray\",\n  });\n  const overflowedItems = collapsed\n    ? collectionHook.data.filter((item) => !item.isOverflowIndicator)\n    : collectionHook.data.filter((item) => item.overflowed);\n\n  const overflowMenuItems = overflowedItems\n    .map((i) =>\n      cloneElement(collectionHook.data[i.index].element, {\n        \"data-is-inside-panel\": true,\n        key: i.index,\n      }),\n    )\n    .reverse();\n\n  const overflowIndicator = collectionHook.data.find(\n    (i) => i.isOverflowIndicator,\n  );\n\n  // bring them back when we get into overflow\n  const tooltrayProps = {\n    className,\n    \"data-collapsed\": collapsed,\n    \"data-collapsible\": collapse,\n  };\n\n  return (\n    <div {...rest} {...tooltrayProps} id={tooltrayId}>\n      <div className={clsx(\"Responsive-inner\")} ref={innerContainerRef}>\n        {renderTrayTools(\n          collectionHook,\n          overflowedItems,\n          orientation,\n          collapsed,\n        )}\n        {overflowIndicator || collapsed ? (\n          <OverflowPanel\n            className={clsx(\"saltToolbarField\")}\n            data-index={collectionHook.data.length}\n            data-overflow-indicator\n            data-priority={1}\n            id={overflowIndicator?.id}\n            triggerButtonIcon={overflowButtonIcon}\n            triggerButtonLabel={overflowButtonLabel}\n          >\n            {overflowMenuItems}\n          </OverflowPanel>\n        ) : null}\n      </div>\n    </div>\n  );\n};\n"],"names":["tooltrayCss"],"mappings":"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"}

package/dist-es/toolbar/internal/renderToolbarItems.js

@@ -0,0 +1,82 @@
+import { jsx } from 'react/jsx-runtime';
+import { cloneElement } from 'react';
+import { isCollapsedOrCollapsing } from '../../responsive/overflowUtils.js';
+import '@salt-ds/core';
+import '../../responsive/useResizeObserver.js';
+import { liftResponsivePropsToFormField } from '../../responsive/utils.js';
+import { Tooltray } from '../Tooltray.js';
+import { ToolbarField } from '../toolbar-field/ToolbarField.js';
+
+const renderToolbarItems = (collectionHook, overflowedItems, orientation) => {
+  let centerAlign = false;
+  let rightAlign = false;
+  const items = collectionHook.data;
+  const collapseItems = items.filter(isCollapsedOrCollapsing);
+  return items.filter((item) => !item.isOverflowIndicator).map((item, index) => {
+    const props = item.element.props;
+    const overflowed = overflowedItems.findIndex((item2) => item2.index === index) === -1 ? void 0 : true;
+    const collapseItem = collapseItems.find((item2) => item2.index === index);
+    const collapsed = (collapseItem == null ? void 0 : collapseItem.collapsed) || void 0;
+    const collapsing = (collapseItem == null ? void 0 : collapseItem.collapsing) || void 0;
+    const {
+      alignCenter: alignCenterProp,
+      alignEnd: alignEndProp,
+      alignStart: alignStartProp,
+      "data-align-center": alignCenter = alignCenterProp,
+      "data-align-end": alignEnd = alignEndProp,
+      "data-align-start": alignStart = alignStartProp
+    } = props;
+    let dataPadStart = false;
+    let dataPadEnd = false;
+    if (alignCenter && !centerAlign) {
+      centerAlign = true;
+      dataPadStart = true;
+    } else if (centerAlign && !alignCenter) {
+      rightAlign = true;
+      dataPadStart = true;
+    } else if (alignEnd && !rightAlign) {
+      rightAlign = true;
+      dataPadStart = true;
+    } else if (alignStart) {
+      dataPadEnd = true;
+    }
+    const toolbarItemProps = {
+      id: item.id,
+      key: item.id,
+      "data-index": index,
+      "data-priority": props["data-priority"] ?? 2,
+      "data-pad-start": dataPadStart || void 0,
+      "data-pad-end": dataPadEnd || void 0,
+      "data-collapsed": collapsed,
+      "data-collapsing": collapsing,
+      "data-overflowed": overflowed,
+      orientation
+    };
+    if (item.element.type === Tooltray) {
+      return cloneElement(item.element, toolbarItemProps);
+    }
+    switch (item.element.type) {
+      case ToolbarField: {
+        const props2 = item.element.props;
+        return cloneElement(item.element, {
+          ...toolbarItemProps,
+          children: cloneElement(props2.children, {
+            // Inject an id that nested Control can use to query status via context
+            id: `toolbar-control-${item.id}`
+          })
+        });
+      }
+      default: {
+        const [responsiveProps, componentProps] = liftResponsivePropsToFormField(item.element.props);
+        return /* @__PURE__ */ jsx(ToolbarField, { ...responsiveProps, ...toolbarItemProps, children: cloneElement(item.element, {
+          ...componentProps,
+          // Inject an id that nested Control can use to query status via context
+          id: `toolbar-control-${item.id}`
+        }) });
+      }
+    }
+  });
+};
+
+export { renderToolbarItems };
+//# sourceMappingURL=renderToolbarItems.js.map

package/dist-es/toolbar/internal/renderToolbarItems.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToolbarItems.js","sources":["../src/toolbar/internal/renderToolbarItems.tsx"],"sourcesContent":["import { cloneElement, type HTMLAttributes, type ReactElement } from \"react\";\nimport {\n  isCollapsedOrCollapsing,\n  liftResponsivePropsToFormField,\n  type OverflowCollectionHookResult,\n  type OverflowItem,\n  type orientationType,\n} from \"../../responsive\";\nimport type { ToolbarAlignmentProps } from \"../ToolbarProps\";\n\nimport { Tooltray } from \"../Tooltray\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\n\n// These are the props we use for item alignment, either from individual element\n// declarations - e.g Tooltray (alignLeft etc) or generic data- attributes\ninterface ToolbarElementProps\n  extends ToolbarAlignmentProps,\n    HTMLAttributes<HTMLDivElement> {\n  \"data-align-center\"?: boolean;\n  \"data-align-end\"?: boolean;\n  \"data-align-start\"?: boolean;\n  \"data-priority\"?: number;\n}\n\nexport const renderToolbarItems = (\n  collectionHook: OverflowCollectionHookResult,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType,\n): JSX.Element[] => {\n  let centerAlign = false;\n  let rightAlign = false;\n\n  const items = collectionHook.data;\n  const collapseItems = items.filter(isCollapsedOrCollapsing);\n\n  return items\n    .filter((item) => !item.isOverflowIndicator)\n    .map((item: OverflowItem, index) => {\n      const props = item.element.props as ToolbarElementProps;\n      const overflowed =\n        overflowedItems.findIndex((item) => item.index === index) === -1\n          ? undefined\n          : true;\n      const collapseItem = collapseItems.find((item) => item.index === index);\n      const collapsed = collapseItem?.collapsed || undefined;\n      const collapsing = collapseItem?.collapsing || undefined;\n\n      const {\n        alignCenter: alignCenterProp,\n        alignEnd: alignEndProp,\n        alignStart: alignStartProp,\n        \"data-align-center\": alignCenter = alignCenterProp,\n        \"data-align-end\": alignEnd = alignEndProp,\n        \"data-align-start\": alignStart = alignStartProp,\n      } = props;\n\n      let dataPadStart = false;\n      let dataPadEnd = false;\n      if (alignCenter && !centerAlign) {\n        centerAlign = true;\n        dataPadStart = true;\n      } else if (centerAlign && !alignCenter) {\n        rightAlign = true;\n        dataPadStart = true;\n      } else if (alignEnd && !rightAlign) {\n        rightAlign = true;\n        dataPadStart = true;\n      } else if (alignStart) {\n        dataPadEnd = true;\n      }\n\n      const toolbarItemProps = {\n        id: item.id,\n        key: item.id,\n        \"data-index\": index,\n        \"data-priority\": props[\"data-priority\"] ?? 2,\n        \"data-pad-start\": dataPadStart || undefined,\n        \"data-pad-end\": dataPadEnd || undefined,\n        \"data-collapsed\": collapsed,\n        \"data-collapsing\": collapsing,\n        \"data-overflowed\": overflowed,\n        orientation,\n      };\n\n      if (item.element.type === Tooltray) {\n        return cloneElement(item.element, toolbarItemProps);\n      }\n      switch (item.element.type) {\n        case ToolbarField: {\n          const props = item.element.props as ToolbarFieldProps;\n          return cloneElement(item.element, {\n            ...toolbarItemProps,\n            children: cloneElement(props.children as ReactElement, {\n              // Inject an id that nested Control can use to query status via context\n              id: `toolbar-control-${item.id}`,\n            }),\n          } as ToolbarFieldProps);\n        }\n        default: {\n          const [responsiveProps, componentProps] =\n            liftResponsivePropsToFormField(item.element.props);\n\n          return (\n            <ToolbarField {...responsiveProps} {...toolbarItemProps}>\n              {cloneElement(item.element, {\n                ...componentProps,\n                // Inject an id that nested Control can use to query status via context\n                id: `toolbar-control-${item.id}`,\n              })}\n            </ToolbarField>\n          );\n        }\n      }\n    });\n};\n"],"names":["item","props"],"mappings":"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"}

package/dist-es/toolbar/internal/renderTrayTools.js

@@ -0,0 +1,61 @@
+import { cloneElement, createElement } from 'react';
+import { isResponsiveAttribute, liftResponsivePropsToFormField } from '../../responsive/utils.js';
+import { ToolbarField } from '../toolbar-field/ToolbarField.js';
+
+const renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed) => {
+  if (collapsed) {
+    return [];
+  }
+  let index = -1;
+  const items = collectionHook.data.filter((item) => !item.isOverflowIndicator);
+  return items.map((item) => {
+    index += 1;
+    const props = item.element.props;
+    const overflowed = overflowedItems.findIndex((i) => i.index === index) === -1 ? void 0 : true;
+    const toolbarItemProps = {
+      "data-index": index,
+      "data-priority": props["data-priority"] ?? 2,
+      "data-overflowed": overflowed,
+      id: item.id,
+      orientation
+    };
+    if (item.element.type === ToolbarField) {
+      return cloneElement(item.element, {
+        key: index,
+        ...toolbarItemProps
+      });
+    }
+    if (Object.keys(props).some(isResponsiveAttribute)) {
+      const [toolbarProps, restProps] = liftResponsivePropsToFormField(props);
+      return /* @__PURE__ */ createElement(
+        ToolbarField,
+        {
+          ...toolbarProps,
+          ...toolbarItemProps,
+          "data-index": index,
+          "data-priority": 2,
+          key: index,
+          "data-orientation": orientation
+        },
+        cloneElement(item.element, { ...restProps })
+      );
+    }
+    return /* @__PURE__ */ createElement(
+      ToolbarField,
+      {
+        ...toolbarItemProps,
+        "data-index": index,
+        "data-overflowed": overflowed,
+        "data-priority": 2,
+        key: index,
+        "data-orientation": orientation
+      },
+      cloneElement(item.element, {
+        id: `tooltray-control-${item.id}`
+      })
+    );
+  });
+};
+
+export { renderTrayTools };
+//# sourceMappingURL=renderTrayTools.js.map

package/dist-es/toolbar/internal/renderTrayTools.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderTrayTools.js","sources":["../src/toolbar/internal/renderTrayTools.tsx"],"sourcesContent":["import { cloneElement, type ReactNode } from \"react\";\nimport type {\n  OverflowCollectionHookResult,\n  OverflowItem,\n} from \"../../responsive/overflowTypes\";\nimport {\n  isResponsiveAttribute,\n  liftResponsivePropsToFormField,\n} from \"../../responsive/utils\";\nimport type { OrientationShape } from \"../ToolbarProps\";\nimport { ToolbarField } from \"../toolbar-field/ToolbarField\";\n\ntype TooltrayItem = {\n  \"data-priority\"?: number | string;\n  className: string;\n};\n\nexport const renderTrayTools = (\n  collectionHook: OverflowCollectionHookResult,\n  overflowedItems: OverflowItem[],\n  orientation: OrientationShape,\n  collapsed?: boolean | string,\n): ReactNode => {\n  if (collapsed) {\n    return [];\n  }\n\n  let index = -1;\n\n  const items = collectionHook.data.filter((item) => !item.isOverflowIndicator);\n\n  return items.map((item) => {\n    index += 1;\n    const props = item.element.props as TooltrayItem;\n\n    const overflowed =\n      overflowedItems.findIndex((i) => i.index === index) === -1\n        ? undefined\n        : true;\n\n    const toolbarItemProps = {\n      \"data-index\": index,\n      \"data-priority\": props[\"data-priority\"] ?? 2,\n      \"data-overflowed\": overflowed,\n      id: item.id,\n      orientation,\n    };\n    if (item.element.type === ToolbarField) {\n      return cloneElement(item.element, {\n        key: index,\n        ...toolbarItemProps,\n      });\n    }\n    if (Object.keys(props).some(isResponsiveAttribute)) {\n      const [toolbarProps, restProps] = liftResponsivePropsToFormField(props);\n      return (\n        <ToolbarField\n          {...toolbarProps}\n          {...toolbarItemProps}\n          // don't think we need the data-index\n          data-index={index}\n          data-priority={2}\n          key={index}\n          data-orientation={orientation}\n        >\n          {/* We clone here just to remove the responsive props */}\n          {cloneElement(item.element, { ...restProps })}\n        </ToolbarField>\n      );\n    }\n    return (\n      <ToolbarField\n        {...toolbarItemProps}\n        data-index={index}\n        data-overflowed={overflowed}\n        data-priority={2}\n        key={index}\n        data-orientation={orientation}\n      >\n        {cloneElement(item.element, {\n          id: `tooltray-control-${item.id}`,\n        })}\n      </ToolbarField>\n    );\n  });\n};\n"],"names":[],"mappings":";;;;AAiBO,MAAM,eAAA,GAAkB,CAC7B,cAAA,EACA,eAAA,EACA,aACA,SAAA,KACc;AACd,EAAA,IAAI,SAAA,EAAW;AACb,IAAA,OAAO,EAAC;AAAA,EACV;AAEA,EAAA,IAAI,KAAA,GAAQ,EAAA;AAEZ,EAAA,MAAM,KAAA,GAAQ,eAAe,IAAA,CAAK,MAAA,CAAO,CAAC,IAAA,KAAS,CAAC,KAAK,mBAAmB,CAAA;AAE5E,EAAA,OAAO,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,KAAS;AACzB,IAAA,KAAA,IAAS,CAAA;AACT,IAAA,MAAM,KAAA,GAAQ,KAAK,OAAA,CAAQ,KAAA;AAE3B,IAAA,MAAM,UAAA,GACJ,eAAA,CAAgB,SAAA,CAAU,CAAC,CAAA,KAAM,EAAE,KAAA,KAAU,KAAK,CAAA,KAAM,EAAA,GACpD,MAAA,GACA,IAAA;AAEN,IAAA,MAAM,gBAAA,GAAmB;AAAA,MACvB,YAAA,EAAc,KAAA;AAAA,MACd,eAAA,EAAiB,KAAA,CAAM,eAAe,CAAA,IAAK,CAAA;AAAA,MAC3C,iBAAA,EAAmB,UAAA;AAAA,MACnB,IAAI,IAAA,CAAK,EAAA;AAAA,MACT;AAAA,KACF;AACA,IAAA,IAAI,IAAA,CAAK,OAAA,CAAQ,IAAA,KAAS,YAAA,EAAc;AACtC,MAAA,OAAO,YAAA,CAAa,KAAK,OAAA,EAAS;AAAA,QAChC,GAAA,EAAK,KAAA;AAAA,QACL,GAAG;AAAA,OACJ,CAAA;AAAA,IACH;AACA,IAAA,IAAI,OAAO,IAAA,CAAK,KAAK,CAAA,CAAE,IAAA,CAAK,qBAAqB,CAAA,EAAG;AAClD,MAAA,MAAM,CAAC,YAAA,EAAc,SAAS,CAAA,GAAI,+BAA+B,KAAK,CAAA;AACtE,MAAA,uBACE,aAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACE,GAAG,YAAA;AAAA,UACH,GAAG,gBAAA;AAAA,UAEJ,YAAA,EAAY,KAAA;AAAA,UACZ,eAAA,EAAe,CAAA;AAAA,UACf,GAAA,EAAK,KAAA;AAAA,UACL,kBAAA,EAAkB;AAAA,SAAA;AAAA,QAGjB,aAAa,IAAA,CAAK,OAAA,EAAS,EAAE,GAAG,WAAW;AAAA,OAC9C;AAAA,IAEJ;AACA,IAAA,uBACE,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAG,gBAAA;AAAA,QACJ,YAAA,EAAY,KAAA;AAAA,QACZ,iBAAA,EAAiB,UAAA;AAAA,QACjB,eAAA,EAAe,CAAA;AAAA,QACf,GAAA,EAAK,KAAA;AAAA,QACL,kBAAA,EAAkB;AAAA,OAAA;AAAA,MAEjB,YAAA,CAAa,KAAK,OAAA,EAAS;AAAA,QAC1B,EAAA,EAAI,CAAA,iBAAA,EAAoB,IAAA,CAAK,EAAE,CAAA;AAAA,OAChC;AAAA,KACH;AAAA,EAEJ,CAAC,CAAA;AACH;;;;"}

package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverflowPanel.saltDropdownBase-popup {\n  background: var(--salt-container-primary-background);\n  border: solid 1px var(--salt-selectable-borderColor-hover);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltOverflowPanel-content {\n  --saltButton-justifyContent: flex-start;\n  align-items: stretch;\n  color: var(--salt-content-primary-foreground);\n  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid) var(--salt-container-primary-borderColor);\n  display: flex;\n  flex-direction: column;\n  padding: calc(var(--salt-size-unit) * 1.5) 0;\n  outline: none;\n}\n\n.saltOverflowPanel [aria-expanded=\"true\"] {\n  --saltButton-background: var(--salt-actionable-secondary-background-active);\n  --saltButton-background-hover: var(--salt-actionable-secondary-background-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltOverflowPanel.saltDropdownBase {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdownBase-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OverflowPanel.css.js.map

package/dist-es/toolbar/overflow-panel/OverflowPanel.css.js.map

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

package/dist-es/toolbar/overflow-panel/OverflowPanel.js

@@ -0,0 +1,115 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useCallback, cloneElement, createElement } from 'react';
+import { makePrefixer, useIcon, useIdMemo, useControlled, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import '../../common-hooks/collectionProvider.js';
+import '../../common-hooks/keyUtils.js';
+import { useCollectionItems } from '../../common-hooks/useCollectionItems.js';
+import { useKeyboardNavigationPanel } from '../../common-hooks/useKeyboardNavigationPanel.js';
+import '../../responsive/useResizeObserver.js';
+import '../../dropdown/Dropdown.js';
+import { DropdownBase } from '../../dropdown/DropdownBase.js';
+import '../../dropdown/DropdownButton.js';
+import '../../form-field-context-legacy/FormFieldLegacyContext.js';
+import { ToolbarField } from '../toolbar-field/ToolbarField.js';
+import css_248z from './OverflowPanel.css.js';
+import { OverflowSeparator } from './OverflowSeparator.js';
+
+const withBaseName = makePrefixer("saltOverflowPanel");
+const OverflowPanel = forwardRef(function DropdownPanel({
+  children,
+  className,
+  defaultIsOpen,
+  isOpen: isOpenProp,
+  onOpenChange,
+  triggerButtonIcon,
+  triggerButtonLabel,
+  ...props
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-overflow-panel",
+    css: css_248z,
+    window: targetWindow
+  });
+  const { OverflowIcon } = useIcon();
+  const id = useIdMemo();
+  const collectionHook = useCollectionItems({
+    id,
+    children
+  });
+  const triggerRef = useRef(null);
+  const [isOpen, setIsOpen] = useControlled({
+    controlled: isOpenProp,
+    default: defaultIsOpen || false,
+    name: "DropdownPanel"
+  });
+  const { highlightedIndex: highlightedIdx, ...keyboardHook } = useKeyboardNavigationPanel({
+    cycleFocus: true,
+    defaultHighlightedIndex: 0,
+    focusOnHighlight: true,
+    indexPositions: collectionHook.data
+  });
+  const focusTrigger = useCallback(() => {
+    if (triggerRef.current) {
+      triggerRef.current.focus();
+    }
+  }, []);
+  const setPanelRef = useCallback((el) => el == null ? void 0 : el.focus(), []);
+  const handleItemClick = (evt) => {
+    setIsOpen(false);
+    focusTrigger();
+  };
+  const handleOpenChange = (open) => {
+    setIsOpen(open);
+    onOpenChange == null ? void 0 : onOpenChange(open);
+  };
+  const getTriggerButtonIcon = () => triggerButtonIcon ?? triggerButtonLabel === void 0 ? /* @__PURE__ */ jsx(OverflowIcon, {}) : void 0;
+  return /* @__PURE__ */ jsxs(
+    DropdownBase,
+    {
+      ...props,
+      className: clsx(withBaseName(), className),
+      isOpen,
+      onOpenChange: handleOpenChange,
+      placement: "bottom-end",
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "secondary", ref: triggerRef, children: [
+          getTriggerButtonIcon(),
+          triggerButtonLabel
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: withBaseName("content"),
+            ref: setPanelRef,
+            tabIndex: -1,
+            ...keyboardHook.listProps,
+            children: collectionHook.data.map((item) => {
+              const { type } = item.value;
+              if (type === OverflowSeparator) {
+                return item.value;
+              }
+              const formFieldProps = {
+                id: item.id,
+                inOverflowPanel: true,
+                key: item.id,
+                onClick: handleItemClick
+              };
+              if (type === ToolbarField) {
+                return cloneElement(item.value, formFieldProps);
+              }
+              return /* @__PURE__ */ createElement(ToolbarField, { ...formFieldProps, key: item.id }, item.value);
+            })
+          }
+        )
+      ]
+    }
+  );
+});
+
+export { OverflowPanel };
+//# sourceMappingURL=OverflowPanel.js.map

package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useIcon,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  cloneElement,\n  type ForwardedRef,\n  forwardRef,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nconst withBaseName = makePrefixer(\"saltOverflowPanel\");\n\nexport interface DropdownPanelProps extends DropdownBaseProps {\n  /**\n   * Trigger button icon\n   */\n  triggerButtonIcon?: JSX.Element;\n  /**\n   * Trigger button text\n   */\n  triggerButtonLabel?: string;\n}\n\nexport const OverflowPanel = forwardRef(function DropdownPanel(\n  {\n    children,\n    className,\n    defaultIsOpen,\n    isOpen: isOpenProp,\n    onOpenChange,\n    triggerButtonIcon,\n    triggerButtonLabel,\n    ...props\n  }: DropdownPanelProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-panel\",\n    css: overflowPanelCss,\n    window: targetWindow,\n  });\n  const { OverflowIcon } = useIcon();\n  const id = useId();\n  const collectionHook = useCollectionItems<ReactElement>({\n    id,\n    children,\n  });\n\n  const triggerRef = useRef<HTMLButtonElement>(null);\n  const [isOpen, setIsOpen] = useControlled<boolean>({\n    controlled: isOpenProp,\n    default: defaultIsOpen || false,\n    name: \"DropdownPanel\",\n  });\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigationPanel({\n      cycleFocus: true,\n      defaultHighlightedIndex: 0,\n      focusOnHighlight: true,\n      indexPositions: collectionHook.data,\n    });\n\n  const focusTrigger = useCallback(() => {\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  }, []);\n\n  const setPanelRef = useCallback((el: HTMLElement | null) => el?.focus(), []);\n\n  const handleItemClick = (evt: MouseEvent) => {\n    // if (sourceItem.props[\"data-close-on-click\"] !== false) closeMenu();\n    setIsOpen(false);\n    focusTrigger();\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    setIsOpen(open);\n    onOpenChange?.(open);\n  };\n\n  const getTriggerButtonIcon = () =>\n    (triggerButtonIcon ?? triggerButtonLabel === undefined) ? (\n      <OverflowIcon />\n    ) : undefined;\n\n  return (\n    <DropdownBase\n      {...props}\n      className={clsx(withBaseName(), className)}\n      isOpen={isOpen}\n      onOpenChange={handleOpenChange}\n      placement=\"bottom-end\"\n      ref={forwardedRef}\n    >\n      <Button variant=\"secondary\" ref={triggerRef}>\n        {getTriggerButtonIcon()}\n        {triggerButtonLabel}\n      </Button>\n      <div\n        className={withBaseName(\"content\")}\n        ref={setPanelRef}\n        tabIndex={-1}\n        {...keyboardHook.listProps}\n      >\n        {collectionHook.data.map((item) => {\n          const { type } = item.value as ReactElement;\n          if (type === OverflowSeparator) {\n            return item.value;\n          }\n          const formFieldProps = {\n            id: item.id,\n            inOverflowPanel: true,\n            key: item.id,\n            onClick: handleItemClick,\n          } as ToolbarFieldProps;\n\n          if (type === ToolbarField) {\n            return cloneElement(item.value as ReactElement, formFieldProps);\n          }\n          return (\n            <ToolbarField {...formFieldProps} key={item.id}>\n              {item.value}\n            </ToolbarField>\n          );\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}

package/dist-es/toolbar/overflow-panel/OverflowSeparator.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverflowSeparator {\n  background: var(--salt-separable-tertiary-borderColor);\n  height: var(--salt-size-fixed-100);\n  margin: calc(var(--salt-size-unit) / 2) 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OverflowSeparator.css.js.map