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

package/dist-cjs/toolbar/Toolbar.js

@@ -1,26 +1,23 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
-var OverflowPanel = require('./overflow-panel/OverflowPanel.js');
-var OverflowSeparator = require('./overflow-panel/OverflowSeparator.js');
+var react = require('react');
 var overflowUtils = require('../responsive/overflowUtils.js');
-require('../responsive/useResizeObserver.js');
-require('../utils/useFloatingUI.js');
 var useOverflowCollectionItems = require('../responsive/useOverflowCollectionItems.js');
 var useOverflowLayout = require('../responsive/useOverflowLayout.js');
+require('../responsive/useResizeObserver.js');
 var renderToolbarItems = require('./internal/renderToolbarItems.js');
-var Tooltray = require('./Tooltray.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
+var OverflowPanel = require('./overflow-panel/OverflowPanel.js');
+var OverflowSeparator = require('./overflow-panel/OverflowSeparator.js');
 var Toolbar$1 = require('./Toolbar.css.js');
+var Tooltray = require('./Tooltray.js');
 
 const classBase = "saltToolbar";
-const Toolbar = React.forwardRef(
+const Toolbar = react.forwardRef(
   function Toolbar2(props, ref) {
     const {
       TooltipComponent,
@@ -44,7 +41,7 @@ const Toolbar = React.forwardRef(
       window: targetWindow
     });
     const toolbarId = core.useIdMemo(idProp);
-    const containerRef = React.useRef(null);
+    const containerRef = react.useRef(null);
     const setContainerRef = core.useForkRef(ref, containerRef);
     const collectionHook = useOverflowCollectionItems.useOverflowCollectionItems({
       children,
@@ -66,20 +63,20 @@ const Toolbar = React.forwardRef(
           const tooltrayProps = element.props;
           const nestedElements = tooltrayProps.children;
           items.push(
-            ...React.Children.map(
+            ...react.Children.map(
               nestedElements,
-              (el) => React.cloneElement(el, {
+              (el) => react.cloneElement(el, {
                 "data-is-inside-panel": true,
                 key: id
               })
             )
           );
           if (i < arr.length - 1) {
-            items.push(/* @__PURE__ */ jsxRuntime.jsx(OverflowSeparator.OverflowSeparator, {}, `separator-${i}`));
+            items.push(/* @__PURE__ */ jsxRuntime.jsx(OverflowSeparator.OverflowSeparator, {}, `separator-${id}`));
           }
         } else {
           items.push(
-            React.cloneElement(element, {
+            react.cloneElement(element, {
               key: id,
               "data-is-inside-panel": true
             })
@@ -92,39 +89,49 @@ const Toolbar = React.forwardRef(
     const overflowIndicator = collectionHook.data.find(
       (i) => i.isOverflowIndicator
     );
-    const overflowPanel = overflowIndicator ? /* @__PURE__ */ jsxRuntime.jsx(OverflowPanel.OverflowPanel, {
-      className: clsx.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__ */ jsxRuntime.jsx("div", {
-      "aria-label": ariaLabel,
-      "aria-labelledby": clsx.clsx(toolbarId, ariaLabelledBy),
-      "aria-orientation": orientation,
-      className: clsx.clsx(classBase, className, {
-        [`${classBase}-disabled`]: disabled,
-        [`${classBase}-nonResponsive`]: !responsive
-      }),
-      id: toolbarId,
-      ref: setContainerRef,
-      role: "toolbar",
-      ...restProp,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: "Responsive-inner",
-        ref: innerContainerRef,
-        "data-collapsing": collectionHook.data.some((item) => item.collapsing),
-        children: [
-          overflowButtonPlacement === "start" && overflowPanel,
-          renderToolbarItems.renderToolbarItems(collectionHook, overflowedItems, orientation),
-          overflowButtonPlacement === "end" && overflowPanel
-        ]
-      })
-    });
+    const overflowPanel = overflowIndicator ? /* @__PURE__ */ jsxRuntime.jsx(
+      OverflowPanel.OverflowPanel,
+      {
+        className: clsx.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__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-label": ariaLabel,
+        "aria-labelledby": clsx.clsx(toolbarId, ariaLabelledBy),
+        "aria-orientation": orientation,
+        className: clsx.clsx(classBase, className, {
+          [`${classBase}-disabled`]: disabled,
+          // TODO whats this for ?
+          [`${classBase}-nonResponsive`]: !responsive
+        }),
+        id: toolbarId,
+        ref: setContainerRef,
+        role: "toolbar",
+        ...restProp,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: "Responsive-inner",
+            ref: innerContainerRef,
+            "data-collapsing": collectionHook.data.some((item) => item.collapsing),
+            children: [
+              overflowButtonPlacement === "start" && overflowPanel,
+              renderToolbarItems.renderToolbarItems(collectionHook, overflowedItems, orientation),
+              overflowButtonPlacement === "end" && overflowPanel
+            ]
+          }
+        )
+      }
+    );
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"Toolbar.js","sources":["../src/toolbar/Toolbar.tsx"],"sourcesContent":["import { useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  Children,\n  cloneElement,\n  forwardRef,\n  ReactElement,\n  useRef,\n} from \"react\";\n\nimport { OverflowPanel } from \"./overflow-panel/OverflowPanel\";\nimport { OverflowSeparator } from \"./overflow-panel/OverflowSeparator\";\n\nimport {\n  isOverflowed,\n  useOverflowCollectionItems,\n  useOverflowLayout,\n} from \"../responsive\";\nimport { renderToolbarItems } from \"./internal/renderToolbarItems\";\nimport { ToolbarProps } from \"./ToolbarProps\";\nimport { Tooltray } from \"./Tooltray\";\nimport { TooltrayProps } from \"./TooltrayProps\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toolbarCss from \"./Toolbar.css\";\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-${i}`} />);\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":["forwardRef","Toolbar","useWindow","useComponentCssInjection","toolbarCss","useIdMemo","useRef","useForkRef","useOverflowCollectionItems","useOverflowLayout","isOverflowed","Tooltray","Children","cloneElement","jsx","OverflowSeparator","OverflowPanel","clsx","jsxs","renderToolbarItems"],"mappings":"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"}
+{"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":["forwardRef","Toolbar","useWindow","useComponentCssInjection","toolbarCss","useIdMemo","useRef","useForkRef","useOverflowCollectionItems","useOverflowLayout","isOverflowed","Tooltray","Children","cloneElement","jsx","OverflowSeparator","OverflowPanel","clsx","jsxs","renderToolbarItems"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-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}\n";
+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";
 
 module.exports = css_248z;
 //# sourceMappingURL=ToolbarButton.css.js.map

package/dist-cjs/toolbar/ToolbarButton.js

@@ -1,15 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var core = require('@salt-ds/core');
-var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var react = require('react');
 var ToolbarButton$1 = require('./ToolbarButton.css.js');
 
-const ToolbarButton = React.forwardRef(
+const ToolbarButton = react.forwardRef(
   function ToolbarButton2({ label, ...props }, forwardedRef) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
@@ -17,13 +15,16 @@ const ToolbarButton = React.forwardRef(
       css: ToolbarButton$1,
       window: targetWindow
     });
-    return /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-      variant: "secondary",
-      ...props,
-      className: "saltToolbarButton",
-      "data-overflow-label": label,
-      ref: forwardedRef
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      core.Button,
+      {
+        variant: "secondary",
+        ...props,
+        className: "saltToolbarButton",
+        "data-overflow-label": label,
+        ref: forwardedRef
+      }
+    );
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarButton.js","sources":["../src/toolbar/ToolbarButton.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport { Button, ButtonProps } from \"@salt-ds/core\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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":["forwardRef","ToolbarButton","useWindow","useComponentCssInjection","toolbarButtonCss","jsx","Button"],"mappings":";;;;;;;;;;;AAaO,MAAM,aAAgB,GAAAA,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,EAAE,KAAU,EAAA,GAAA,KAAA,IAAS,YAAc,EAAA;AACxD,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAAC,WAAA,EAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,KAAA;AAAA,MACJ,SAAU,EAAA,mBAAA;AAAA,MACV,qBAAqB,EAAA,KAAA;AAAA,MACrB,GAAK,EAAA,YAAA;AAAA,KACP,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"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":["forwardRef","ToolbarButton","useWindow","useComponentCssInjection","toolbarButtonCss","jsx","Button"],"mappings":";;;;;;;;;AAYO,MAAM,aAAA,GAAgBA,gBAAA;AAAA,EAC3B,SAASC,cAAAA,CAAc,EAAE,OAAO,GAAG,KAAA,IAAS,YAAA,EAAc;AACxD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,qBAAA;AAAA,MACR,GAAA,EAAKC,eAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAACC,WAAA;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-cjs/toolbar/Tooltray.js

@@ -1,22 +1,22 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
-var OverflowPanel = require('./overflow-panel/OverflowPanel.js');
+var react = require('react');
 var useOverflowCollectionItems = require('../responsive/useOverflowCollectionItems.js');
 var useOverflowLayout = require('../responsive/useOverflowLayout.js');
 var renderTrayTools = require('./internal/renderTrayTools.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
+var OverflowPanel = require('./overflow-panel/OverflowPanel.js');
 var Tooltray$1 = require('./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,
@@ -59,7 +59,7 @@ const Tooltray = (props) => {
   });
   const overflowedItems = collapsed ? collectionHook.data.filter((item) => !item.isOverflowIndicator) : collectionHook.data.filter((item) => item.overflowed);
   const overflowMenuItems = overflowedItems.map(
-    (i) => React.cloneElement(collectionHook.data[i.index].element, {
+    (i) => react.cloneElement(collectionHook.data[i.index].element, {
       "data-is-inside-panel": true,
       key: i.index
     })
@@ -72,33 +72,27 @@ const Tooltray = (props) => {
     "data-collapsed": collapsed,
     "data-collapsible": collapse
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ...rest,
-    ...tooltrayProps,
-    id: tooltrayId,
-    children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: clsx.clsx("Responsive-inner"),
-      ref: innerContainerRef,
-      children: [
-        renderTrayTools.renderTrayTools(
-          collectionHook,
-          overflowedItems,
-          orientation,
-          collapsed
-        ),
-        overflowIndicator || collapsed ? /* @__PURE__ */ jsxRuntime.jsx(OverflowPanel.OverflowPanel, {
-          className: clsx.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
-      ]
-    })
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, ...tooltrayProps, id: tooltrayId, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx("Responsive-inner"), ref: innerContainerRef, children: [
+    renderTrayTools.renderTrayTools(
+      collectionHook,
+      overflowedItems,
+      orientation,
+      collapsed
+    ),
+    overflowIndicator || collapsed ? /* @__PURE__ */ jsxRuntime.jsx(
+      OverflowPanel.OverflowPanel,
+      {
+        className: clsx.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
+  ] }) });
 };
 
 exports.Tooltray = Tooltray;

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

@@ -1 +1 @@
-{"version":3,"file":"Tooltray.js","sources":["../src/toolbar/Tooltray.tsx"],"sourcesContent":["import { useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { cloneElement } from \"react\";\nimport { OverflowPanel } from \"./overflow-panel/OverflowPanel\";\n\nimport { TooltrayProps } from \"./TooltrayProps\";\n\nimport { useOverflowCollectionItems } from \"../responsive/useOverflowCollectionItems\";\nimport { useOverflowLayout } from \"../responsive/useOverflowLayout\";\n\nimport { renderTrayTools } from \"./internal/renderTrayTools\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport tooltrayCss from \"./Tooltray.css\";\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":["useWindow","useComponentCssInjection","tooltrayCss","useIdMemo","clsx","useOverflowCollectionItems","useOverflowLayout","cloneElement","jsx","jsxs","renderTrayTools","OverflowPanel"],"mappings":"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"}
+{"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":["useWindow","useComponentCssInjection","tooltrayCss","useIdMemo","clsx","useOverflowCollectionItems","useOverflowLayout","cloneElement","jsx","jsxs","renderTrayTools","OverflowPanel"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AAChD,EAAA,MAAM;AAAA,IACJ,YAAA,EAAc,SAAA;AAAA;AAAA;AAAA,IAGd,QAAA;AAAA,IACA,UAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA,EAAW,aAAA;AAAA,IACX,QAAA,EAAU,YAAA;AAAA,IACV,SAAA,EAAW,aAAA;AAAA,IACX,oBAAoB,QAAA,GAAW,YAAA;AAAA,IAC/B,kBAAkB,SAAA,GAAY,aAAA;AAAA,IAC9B,EAAA,EAAI,MAAA;AAAA,IACJ,aAAA,GAAgB,KAAA;AAAA,IAChB,kBAAA;AAAA,IACA,mBAAA;AAAA,IACA,WAAA,GAAc,YAAA;AAAA,IACd,GAAG;AAAA,GACL,GAAI,KAAA;AAEJ,EAAA,MAAM,eAAeA,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,eAAA;AAAA,IACR,GAAA,EAAKC,UAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,UAAA,GAAaC,eAAU,MAAM,CAAA;AAEnC,EAAA,MAAM,SAAA,GAAYC,SAAA;AAAA,IAChB,cAAA;AAAA,IACA,aAAA;AAAA,IACA,gBAAgB,WAAW,CAAA,CAAA;AAAA,IAC3B,EAAE,mCAAmC,aAAA;AAAc,GACrD;AAEA,EAAA,MAAM,iBAAiBC,qDAAA,CAA2B;AAAA,IAChD,QAAA;AAAA,IACA,EAAA,EAAI,UAAA;AAAA,IACJ,KAAA,EAAO,UAAA;AAAA,IACP;AAAA,GACD,CAAA;AAED,EAAA,MAAM,CAAC,iBAAiB,CAAA,GAAIC,mCAAA,CAAkB;AAAA,IAC5C,cAAA;AAAA,IACA,EAAA,EAAI,UAAA;AAAA,IACJ,WAAA;AAAA,IACA,KAAA,EAAO;AAAA,GACR,CAAA;AACD,EAAA,MAAM,kBAAkB,SAAA,GACpB,cAAA,CAAe,IAAA,CAAK,MAAA,CAAO,CAAC,IAAA,KAAS,CAAC,IAAA,CAAK,mBAAmB,IAC9D,cAAA,CAAe,IAAA,CAAK,OAAO,CAAC,IAAA,KAAS,KAAK,UAAU,CAAA;AAExD,EAAA,MAAM,oBAAoB,eAAA,CACvB,GAAA;AAAA,IAAI,CAAC,MACJC,kBAAA,CAAa,cAAA,CAAe,KAAK,CAAA,CAAE,KAAK,EAAE,OAAA,EAAS;AAAA,MACjD,sBAAA,EAAwB,IAAA;AAAA,MACxB,KAAK,CAAA,CAAE;AAAA,KACR;AAAA,IAEF,OAAA,EAAQ;AAEX,EAAA,MAAM,iBAAA,GAAoB,eAAe,IAAA,CAAK,IAAA;AAAA,IAC5C,CAAC,MAAM,CAAA,CAAE;AAAA,GACX;AAGA,EAAA,MAAM,aAAA,GAAgB;AAAA,IACpB,SAAA;AAAA,IACA,gBAAA,EAAkB,SAAA;AAAA,IAClB,kBAAA,EAAoB;AAAA,GACtB;AAEA,EAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAO,GAAG,aAAA,EAAe,EAAA,EAAI,UAAA,EACpC,QAAA,kBAAAC,eAAA,CAAC,SAAI,SAAA,EAAWL,SAAA,CAAK,kBAAkB,CAAA,EAAG,KAAK,iBAAA,EAC5C,QAAA,EAAA;AAAA,IAAAM,+BAAA;AAAA,MACC,cAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,KACF;AAAA,IACC,qBAAqB,SAAA,mBACpBF,cAAA;AAAA,MAACG,2BAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWP,UAAK,kBAAkB,CAAA;AAAA,QAClC,YAAA,EAAY,eAAe,IAAA,CAAK,MAAA;AAAA,QAChC,yBAAA,EAAuB,IAAA;AAAA,QACvB,eAAA,EAAe,CAAA;AAAA,QACf,IAAI,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAmB,EAAA;AAAA,QACvB,iBAAA,EAAmB,kBAAA;AAAA,QACnB,kBAAA,EAAoB,mBAAA;AAAA,QAEnB,QAAA,EAAA;AAAA;AAAA,KACH,GACE;AAAA,GAAA,EACN,CAAA,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,28 +1,20 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ToolbarField = require('../toolbar-field/ToolbarField.js');
-var Tooltray = require('../Tooltray.js');
-require('@salt-ds/core');
+var react = require('react');
 var overflowUtils = require('../../responsive/overflowUtils.js');
+require('@salt-ds/core');
 require('../../responsive/useResizeObserver.js');
-require('../../utils/useFloatingUI.js');
 var utils = require('../../responsive/utils.js');
+var Tooltray = require('../Tooltray.js');
+var ToolbarField = require('../toolbar-field/ToolbarField.js');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const renderToolbarItems = (collectionHook, overflowedItems = [], orientation) => {
+const renderToolbarItems = (collectionHook, overflowedItems, orientation) => {
   let centerAlign = false;
   let rightAlign = false;
   const items = collectionHook.data;
   const collapseItems = items.filter(overflowUtils.isCollapsedOrCollapsing);
   return items.filter((item) => !item.isOverflowIndicator).map((item, index) => {
-    var _a;
     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);
@@ -54,7 +46,7 @@ const renderToolbarItems = (collectionHook, overflowedItems = [], orientation) =
       id: item.id,
       key: item.id,
       "data-index": index,
-      "data-priority": (_a = props["data-priority"]) != null ? _a : 2,
+      "data-priority": props["data-priority"] ?? 2,
       "data-pad-start": dataPadStart || void 0,
       "data-pad-end": dataPadEnd || void 0,
       "data-collapsed": collapsed,
@@ -63,27 +55,26 @@ const renderToolbarItems = (collectionHook, overflowedItems = [], orientation) =
       orientation
     };
     if (item.element.type === Tooltray.Tooltray) {
-      return React__default["default"].cloneElement(item.element, toolbarItemProps);
-    } else {
-      switch (item.element.type) {
-        case ToolbarField.ToolbarField:
-          const props2 = item.element.props;
-          return React__default["default"].cloneElement(item.element, {
-            ...toolbarItemProps,
-            children: React__default["default"].cloneElement(props2.children, {
-              id: `toolbar-control-${item.id}`
-            })
-          });
-        default:
-          const [responsiveProps, componentProps] = utils.liftResponsivePropsToFormField(item.element.props);
-          return /* @__PURE__ */ jsxRuntime.jsx(ToolbarField.ToolbarField, {
-            ...responsiveProps,
-            ...toolbarItemProps,
-            children: React__default["default"].cloneElement(item.element, {
-              ...componentProps,
-              id: `toolbar-control-${item.id}`
-            })
-          });
+      return react.cloneElement(item.element, toolbarItemProps);
+    }
+    switch (item.element.type) {
+      case ToolbarField.ToolbarField: {
+        const props2 = item.element.props;
+        return react.cloneElement(item.element, {
+          ...toolbarItemProps,
+          children: react.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] = utils.liftResponsivePropsToFormField(item.element.props);
+        return /* @__PURE__ */ jsxRuntime.jsx(ToolbarField.ToolbarField, { ...responsiveProps, ...toolbarItemProps, children: react.cloneElement(item.element, {
+          ...componentProps,
+          // Inject an id that nested Control can use to query status via context
+          id: `toolbar-control-${item.id}`
+        }) });
       }
     }
   });

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

@@ -1 +1 @@
-{"version":3,"file":"renderToolbarItems.js","sources":["../src/toolbar/internal/renderToolbarItems.tsx"],"sourcesContent":["import React, { HTMLAttributes, ReactElement } from \"react\";\n\nimport { ToolbarAlignmentProps } from \"../ToolbarProps\";\nimport { ToolbarField, ToolbarFieldProps } from \"../toolbar-field\";\n\nimport { Tooltray } from \"../Tooltray\";\n\nimport {\n  isCollapsedOrCollapsing,\n  liftResponsivePropsToFormField,\n  orientationType,\n  OverflowCollectionHookResult,\n  OverflowItem,\n} from \"../../responsive\";\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 React.cloneElement(item.element, toolbarItemProps);\n      } else {\n        switch (item.element.type) {\n          case ToolbarField:\n            const props = item.element.props as ToolbarFieldProps;\n            return React.cloneElement(item.element, {\n              ...toolbarItemProps,\n              children: React.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          default:\n            const [responsiveProps, componentProps] =\n              liftResponsivePropsToFormField(item.element.props);\n\n            return (\n              <ToolbarField {...responsiveProps} {...toolbarItemProps}>\n                {React.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":["isCollapsedOrCollapsing","item","Tooltray","React","ToolbarField","props","liftResponsivePropsToFormField","jsx"],"mappings":"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"}
+{"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":["isCollapsedOrCollapsing","item","Tooltray","cloneElement","ToolbarField","props","liftResponsivePropsToFormField","jsx"],"mappings":"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"}