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

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

@@ -1,15 +1,9 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
+var react = require('react');
 var utils = require('../../responsive/utils.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 renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed) => {
   if (collapsed) {
     return [];
@@ -17,46 +11,51 @@ const renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed
   let index = -1;
   const items = collectionHook.data.filter((item) => !item.isOverflowIndicator);
   return items.map((item) => {
-    var _a;
     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": (_a = props["data-priority"]) != null ? _a : 2,
+      "data-priority": props["data-priority"] ?? 2,
       "data-overflowed": overflowed,
       id: item.id,
       orientation
     };
     if (item.element.type === ToolbarField.ToolbarField) {
-      return React__default["default"].cloneElement(item.element, {
+      return react.cloneElement(item.element, {
         key: index,
         ...toolbarItemProps
       });
-    } else {
-      if (Object.keys(props).some(utils.isResponsiveAttribute)) {
-        const [toolbarProps, restProps] = utils.liftResponsivePropsToFormField(props);
-        return /* @__PURE__ */ React.createElement(ToolbarField.ToolbarField, {
+    }
+    if (Object.keys(props).some(utils.isResponsiveAttribute)) {
+      const [toolbarProps, restProps] = utils.liftResponsivePropsToFormField(props);
+      return /* @__PURE__ */ react.createElement(
+        ToolbarField.ToolbarField,
+        {
           ...toolbarProps,
           ...toolbarItemProps,
           "data-index": index,
           "data-priority": 2,
           key: index,
           "data-orientation": orientation
-        }, React__default["default"].cloneElement(item.element, { ...restProps }));
-      } else {
-        return /* @__PURE__ */ React.createElement(ToolbarField.ToolbarField, {
-          ...toolbarItemProps,
-          "data-index": index,
-          "data-overflowed": overflowed,
-          "data-priority": 2,
-          key: index,
-          "data-orientation": orientation
-        }, React__default["default"].cloneElement(item.element, {
-          id: `tooltray-control-${item.id}`
-        }));
-      }
+        },
+        react.cloneElement(item.element, { ...restProps })
+      );
     }
+    return /* @__PURE__ */ react.createElement(
+      ToolbarField.ToolbarField,
+      {
+        ...toolbarItemProps,
+        "data-index": index,
+        "data-overflowed": overflowed,
+        "data-priority": 2,
+        key: index,
+        "data-orientation": orientation
+      },
+      react.cloneElement(item.element, {
+        id: `tooltray-control-${item.id}`
+      })
+    );
   });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"renderTrayTools.js","sources":["../src/toolbar/internal/renderTrayTools.tsx"],"sourcesContent":["import React, { ReactNode } from \"react\";\nimport {\n  OverflowCollectionHookResult,\n  OverflowItem,\n} from \"../../responsive/overflowTypes\";\nimport {\n  isResponsiveAttribute,\n  liftResponsivePropsToFormField,\n} from \"../../responsive/utils\";\nimport { ToolbarField } from \"../toolbar-field/ToolbarField\";\nimport { OrientationShape } from \"../ToolbarProps\";\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 React.cloneElement(item.element, {\n        key: index,\n        ...toolbarItemProps,\n      });\n    } else {\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            {React.cloneElement(item.element, { ...restProps })}\n          </ToolbarField>\n        );\n      } else {\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            {React.cloneElement(item.element, {\n              id: `tooltray-control-${item.id}`,\n            })}\n          </ToolbarField>\n        );\n      }\n    }\n  });\n};\n"],"names":["ToolbarField","React","isResponsiveAttribute","liftResponsivePropsToFormField","createElement"],"mappings":";;;;;;;;;;;;AAiBO,MAAM,eAAkB,GAAA,CAC7B,cACA,EAAA,eAAA,EACA,aACA,SACc,KAAA;AACd,EAAA,IAAI,SAAW,EAAA;AACb,IAAA,OAAO,EAAC,CAAA;AAAA,GACV;AAEA,EAAA,IAAI,KAAQ,GAAA,CAAA,CAAA,CAAA;AAEZ,EAAM,MAAA,KAAA,GAAQ,eAAe,IAAK,CAAA,MAAA,CAAO,CAAC,IAAS,KAAA,CAAC,KAAK,mBAAmB,CAAA,CAAA;AAE5E,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AA/B7B,IAAA,IAAA,EAAA,CAAA;AAgCI,IAAS,KAAA,IAAA,CAAA,CAAA;AACT,IAAM,MAAA,KAAA,GAAQ,KAAK,OAAQ,CAAA,KAAA,CAAA;AAE3B,IAAM,MAAA,UAAA,GACJ,eAAgB,CAAA,SAAA,CAAU,CAAC,CAAA,KAAM,EAAE,KAAU,KAAA,KAAK,CAAM,KAAA,CAAA,CAAA,GACpD,KACA,CAAA,GAAA,IAAA,CAAA;AAEN,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,YAAc,EAAA,KAAA;AAAA,MACd,eAAA,EAAA,CAAiB,EAAM,GAAA,KAAA,CAAA,eAAA,CAAA,KAAN,IAA0B,GAAA,EAAA,GAAA,CAAA;AAAA,MAC3C,iBAAmB,EAAA,UAAA;AAAA,MACnB,IAAI,IAAK,CAAA,EAAA;AAAA,MACT,WAAA;AAAA,KACF,CAAA;AACA,IAAI,IAAA,IAAA,CAAK,OAAQ,CAAA,IAAA,KAASA,yBAAc,EAAA;AACtC,MAAO,OAAAC,yBAAA,CAAM,YAAa,CAAA,IAAA,CAAK,OAAS,EAAA;AAAA,QACtC,GAAK,EAAA,KAAA;AAAA,QACL,GAAG,gBAAA;AAAA,OACJ,CAAA,CAAA;AAAA,KACI,MAAA;AACL,MAAA,IAAI,OAAO,IAAK,CAAA,KAAK,CAAE,CAAA,IAAA,CAAKC,2BAAqB,CAAG,EAAA;AAClD,QAAA,MAAM,CAAC,YAAA,EAAc,SAAS,CAAA,GAAIC,qCAA+B,KAAK,CAAA,CAAA;AACtE,QAAA,uBACGC,mBAAA,CAAAJ,yBAAA,EAAA;AAAA,UACE,GAAG,YAAA;AAAA,UACH,GAAG,gBAAA;AAAA,UAEJ,YAAY,EAAA,KAAA;AAAA,UACZ,eAAe,EAAA,CAAA;AAAA,UACf,GAAK,EAAA,KAAA;AAAA,UACL,kBAAkB,EAAA,WAAA;AAAA,SAGjB,EAAAC,yBAAA,CAAM,aAAa,IAAK,CAAA,OAAA,EAAS,EAAE,GAAG,SAAA,EAAW,CACpD,CAAA,CAAA;AAAA,OAEG,MAAA;AACL,QAAA,uBACGG,mBAAA,CAAAJ,yBAAA,EAAA;AAAA,UACE,GAAG,gBAAA;AAAA,UACJ,YAAY,EAAA,KAAA;AAAA,UACZ,iBAAiB,EAAA,UAAA;AAAA,UACjB,eAAe,EAAA,CAAA;AAAA,UACf,GAAK,EAAA,KAAA;AAAA,UACL,kBAAkB,EAAA,WAAA;AAAA,SAEjB,EAAAC,yBAAA,CAAM,YAAa,CAAA,IAAA,CAAK,OAAS,EAAA;AAAA,UAChC,EAAA,EAAI,oBAAoB,IAAK,CAAA,EAAA,CAAA,CAAA;AAAA,SAC9B,CACH,CAAA,CAAA;AAAA,OAEJ;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACH;;;;"}
+{"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":["ToolbarField","cloneElement","isResponsiveAttribute","liftResponsivePropsToFormField","createElement"],"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,KAASA,yBAAA,EAAc;AACtC,MAAA,OAAOC,kBAAA,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,CAAKC,2BAAqB,CAAA,EAAG;AAClD,MAAA,MAAM,CAAC,YAAA,EAAc,SAAS,CAAA,GAAIC,qCAA+B,KAAK,CAAA;AACtE,MAAA,uBACEC,mBAAA;AAAA,QAACJ,yBAAA;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,QAGjBC,mBAAa,IAAA,CAAK,OAAA,EAAS,EAAE,GAAG,WAAW;AAAA,OAC9C;AAAA,IAEJ;AACA,IAAA,uBACEG,mBAAA;AAAA,MAACJ,yBAAA;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,MAEjBC,kBAAA,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-cjs/toolbar/overflow-panel/OverflowPanel.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOverflowPanel.saltDropdown-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  --saltDropdown-popup-maxHeight: auto;\n  align-items: stretch;\n  color: var(--salt-text-primary-foreground);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) 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.saltDropdown {\n  --saltIcon-margin: 2px 0 0 0px;\n}\n\n.saltOverflowPanel.saltDropdown-popup .saltFormFieldLegacy:not(.saltFormFieldLegacy-toolbarButton) {\n  --saltFormFieldLegacy-margin: 0 12px 8px 12px;\n}\n";
+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";
 
 module.exports = css_248z;
 //# sourceMappingURL=OverflowPanel.css.js.map

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

@@ -1,34 +1,26 @@
 '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 icons = require('@salt-ds/icons');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var clsx = require('clsx');
-var React = require('react');
-var ToolbarField = require('../toolbar-field/ToolbarField.js');
-var OverflowSeparator = require('./OverflowSeparator.js');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
 var useCollectionItems = require('../../common-hooks/useCollectionItems.js');
 var useKeyboardNavigationPanel = require('../../common-hooks/useKeyboardNavigationPanel.js');
 require('../../responsive/useResizeObserver.js');
-require('../../utils/useFloatingUI.js');
+require('../../dropdown/Dropdown.js');
 var DropdownBase = require('../../dropdown/DropdownBase.js');
 require('../../dropdown/DropdownButton.js');
-require('../../dropdown/Dropdown.js');
 require('../../form-field-context-legacy/FormFieldLegacyContext.js');
+var ToolbarField = require('../toolbar-field/ToolbarField.js');
 var OverflowPanel$1 = require('./OverflowPanel.css.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var OverflowSeparator = require('./OverflowSeparator.js');
 
 const withBaseName = core.makePrefixer("saltOverflowPanel");
-const OverflowPanel = React.forwardRef(function DropdownPanel({
+const OverflowPanel = react.forwardRef(function DropdownPanel({
   children,
   className,
   defaultIsOpen,
@@ -44,15 +36,16 @@ const OverflowPanel = React.forwardRef(function DropdownPanel({
     css: OverflowPanel$1,
     window: targetWindow
   });
+  const { OverflowIcon } = core.useIcon();
   const id = core.useIdMemo();
   const collectionHook = useCollectionItems.useCollectionItems({
     id,
     children
   });
-  const triggerRef = React.useRef(null);
+  const triggerRef = react.useRef(null);
   const [isOpen, setIsOpen] = core.useControlled({
     controlled: isOpenProp,
-    default: defaultIsOpen != null ? defaultIsOpen : false,
+    default: defaultIsOpen || false,
     name: "DropdownPanel"
   });
   const { highlightedIndex: highlightedIdx, ...keyboardHook } = useKeyboardNavigationPanel.useKeyboardNavigationPanel({
@@ -61,12 +54,12 @@ const OverflowPanel = React.forwardRef(function DropdownPanel({
     focusOnHighlight: true,
     indexPositions: collectionHook.data
   });
-  const focusTrigger = React.useCallback(() => {
+  const focusTrigger = react.useCallback(() => {
     if (triggerRef.current) {
       triggerRef.current.focus();
     }
   }, []);
-  const setPanelRef = React.useCallback((el) => el == null ? void 0 : el.focus(), []);
+  const setPanelRef = react.useCallback((el) => el == null ? void 0 : el.focus(), []);
   const handleItemClick = (evt) => {
     setIsOpen(false);
     focusTrigger();
@@ -75,55 +68,49 @@ const OverflowPanel = React.forwardRef(function DropdownPanel({
     setIsOpen(open);
     onOpenChange == null ? void 0 : onOpenChange(open);
   };
-  const getTriggerButtonIcon = () => (triggerButtonIcon != null ? triggerButtonIcon : triggerButtonLabel === void 0) ? /* @__PURE__ */ jsxRuntime.jsx(icons.OverflowMenuIcon, {}) : void 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs(DropdownBase.DropdownBase, {
-    ...props,
-    className: clsx.clsx(withBaseName(), className),
-    isOpen,
-    onOpenChange: handleOpenChange,
-    placement: "bottom-end",
-    ref: forwardedRef,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(core.Button, {
-        variant: "secondary",
-        ref: triggerRef,
-        children: [
+  const getTriggerButtonIcon = () => triggerButtonIcon ?? triggerButtonLabel === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(OverflowIcon, {}) : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    DropdownBase.DropdownBase,
+    {
+      ...props,
+      className: clsx.clsx(withBaseName(), className),
+      isOpen,
+      onOpenChange: handleOpenChange,
+      placement: "bottom-end",
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Button, { variant: "secondary", ref: triggerRef, children: [
           getTriggerButtonIcon(),
           triggerButtonLabel
-        ]
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        className: withBaseName("content"),
-        ref: setPanelRef,
-        tabIndex: -1,
-        ...keyboardHook.listProps,
-        children: collectionHook.data.map((item) => {
-          const { type } = item.value;
-          if (type === OverflowSeparator.OverflowSeparator) {
-            return item.value;
-          } else {
-            const formFieldProps = {
-              id: item.id,
-              inOverflowPanel: true,
-              key: item.id,
-              onClick: handleItemClick
-            };
-            if (type === ToolbarField.ToolbarField) {
-              return React__default["default"].cloneElement(
-                item.value,
-                formFieldProps
-              );
-            } else {
-              return /* @__PURE__ */ jsxRuntime.jsx(ToolbarField.ToolbarField, {
-                ...formFieldProps,
-                children: item.value
-              });
-            }
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: withBaseName("content"),
+            ref: setPanelRef,
+            tabIndex: -1,
+            ...keyboardHook.listProps,
+            children: collectionHook.data.map((item) => {
+              const { type } = item.value;
+              if (type === OverflowSeparator.OverflowSeparator) {
+                return item.value;
+              }
+              const formFieldProps = {
+                id: item.id,
+                inOverflowPanel: true,
+                key: item.id,
+                onClick: handleItemClick
+              };
+              if (type === ToolbarField.ToolbarField) {
+                return react.cloneElement(item.value, formFieldProps);
+              }
+              return /* @__PURE__ */ react.createElement(ToolbarField.ToolbarField, { ...formFieldProps, key: item.id }, item.value);
+            })
           }
-        })
-      })
-    ]
-  });
+        )
+      ]
+    }
+  );
 });
 
 exports.OverflowPanel = OverflowPanel;

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowPanel.js","sources":["../src/toolbar/overflow-panel/OverflowPanel.tsx"],"sourcesContent":["import {\n  Button,\n  makePrefixer,\n  useControlled,\n  useIdMemo as useId,\n} from \"@salt-ds/core\";\nimport { OverflowMenuIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport React, {\n  ForwardedRef,\n  forwardRef,\n  MouseEvent,\n  ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ToolbarField, ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, DropdownBaseProps } from \"../../dropdown\";\n\nimport overflowPanelCss from \"./OverflowPanel.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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\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      <OverflowMenuIcon />\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          } else {\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 React.cloneElement(\n                item.value as ReactElement,\n                formFieldProps\n              );\n            } else {\n              return (\n                <ToolbarField {...formFieldProps}>{item.value}</ToolbarField>\n              );\n            }\n          }\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","overflowPanelCss","useId","useCollectionItems","useRef","useControlled","useKeyboardNavigationPanel","useCallback","jsx","OverflowMenuIcon","jsxs","DropdownBase","clsx","Button","OverflowSeparator","ToolbarField","React"],"mappings":"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"}
+{"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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","overflowPanelCss","useIcon","useId","useCollectionItems","useRef","useControlled","useKeyboardNavigationPanel","useCallback","jsx","jsxs","DropdownBase","clsx","Button","OverflowSeparator","ToolbarField","cloneElement","createElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltOverflowSeparator {\n  background: var(--salt-separable-tertiary-borderColor);\n  height: var(--salt-size-border);\n  margin: calc(var(--salt-size-unit) / 2) 0;\n}\n";
+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";
 
 module.exports = css_248z;
 //# sourceMappingURL=OverflowSeparator.css.js.map

package/dist-cjs/toolbar/overflow-panel/OverflowSeparator.js

@@ -1,13 +1,11 @@
 '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 OverflowSeparator$1 = require('./OverflowSeparator.css.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 
 const withBaseName = core.makePrefixer("saltOverflowSeparator");
 const OverflowSeparator = (props) => {
@@ -18,10 +16,7 @@ const OverflowSeparator = (props) => {
     css: OverflowSeparator$1,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: clsx.clsx(withBaseName(), className),
-    ...rest
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(withBaseName(), className), ...rest });
 };
 OverflowSeparator.defaultProps = {
   focusable: false

package/dist-cjs/toolbar/overflow-panel/OverflowSeparator.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowSeparator.js","sources":["../src/toolbar/overflow-panel/OverflowSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { HTMLAttributes, ReactElement } from \"react\";\nimport overflowSeparatorCss from \"./OverflowSeparator.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nconst withBaseName = makePrefixer(\"saltOverflowSeparator\");\n\nexport interface OverflowSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  children?: never;\n  focusable?: boolean;\n}\n\nexport const OverflowSeparator = (\n  props: OverflowSeparatorProps\n): ReactElement => {\n  const { className, focusable, ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-separator\",\n    css: overflowSeparatorCss,\n    window: targetWindow,\n  });\n  return <div className={clsx(withBaseName(), className)} {...rest} />;\n};\n\nOverflowSeparator.defaultProps = {\n  focusable: false,\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","overflowSeparatorCss","jsx","clsx"],"mappings":";;;;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA,CAAA;AAO5C,MAAA,iBAAA,GAAoB,CAC/B,KACiB,KAAA;AACjB,EAAA,MAAM,EAAE,SAAA,EAAW,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1C,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQC,cAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,GAAM,CAAA,CAAA;AACpE,EAAA;AAEA,iBAAA,CAAkB,YAAe,GAAA;AAAA,EAC/B,SAAW,EAAA,KAAA;AACb,CAAA;;;;"}
+{"version":3,"file":"OverflowSeparator.js","sources":["../src/toolbar/overflow-panel/OverflowSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { HTMLAttributes, ReactElement } from \"react\";\nimport overflowSeparatorCss from \"./OverflowSeparator.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowSeparator\");\n\nexport interface OverflowSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  children?: never;\n  focusable?: boolean;\n}\n\nexport const OverflowSeparator = (\n  props: OverflowSeparatorProps,\n): ReactElement => {\n  const { className, focusable, ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-separator\",\n    css: overflowSeparatorCss,\n    window: targetWindow,\n  });\n  return <div className={clsx(withBaseName(), className)} {...rest} />;\n};\n\nOverflowSeparator.defaultProps = {\n  focusable: false,\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","overflowSeparatorCss","jsx","clsx"],"mappings":";;;;;;;;;AAOA,MAAM,YAAA,GAAeA,kBAAa,uBAAuB,CAAA;AAOlD,MAAM,iBAAA,GAAoB,CAC/B,KAAA,KACiB;AACjB,EAAA,MAAM,EAAE,SAAA,EAAW,SAAA,EAAW,GAAG,MAAK,GAAI,KAAA;AAC1C,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,yBAAA;AAAA,IACR,GAAA,EAAKC,mBAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,uBAAOC,cAAA,CAAC,SAAI,SAAA,EAAWC,SAAA,CAAK,cAAa,EAAG,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,CAAA;AACpE;AAEA,iBAAA,CAAkB,YAAA,GAAe;AAAA,EAC/B,SAAA,EAAW;AACb,CAAA;;;;"}

package/dist-cjs/toolbar/toolbar-field/ToolbarField.js

@@ -1,19 +1,14 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var useToolbarField = require('./useToolbarField.js');
+var react = require('react');
 var FormFieldLegacy = require('../../form-field-legacy/FormFieldLegacy.js');
 require('../../form-field-legacy/FormLabel.js');
+var useToolbarField = require('./useToolbarField.js');
 
-const ToolbarField = React.forwardRef(function ToolbarField2(props, forwardedRef) {
+const ToolbarField = react.forwardRef(function ToolbarField2(props, forwardedRef) {
   const toolbarFieldProps = useToolbarField.useToolbarField(props);
-  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldLegacy.FormFieldLegacy, {
-    ...toolbarFieldProps,
-    ref: forwardedRef
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(FormFieldLegacy.FormFieldLegacy, { ...toolbarFieldProps, ref: forwardedRef });
 });
 ToolbarField.displayName = "ToolbarField";
 

package/dist-cjs/toolbar/toolbar-field/ToolbarField.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolbarField.js","sources":["../src/toolbar/toolbar-field/ToolbarField.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from \"react\";\nimport { ToolbarFieldProps } from \"./toolbarFieldTypes\";\nimport { useToolbarField } from \"./useToolbarField\";\n\nimport { FormFieldLegacy as FormField } from \"../../form-field-legacy\";\n\nexport const ToolbarField = forwardRef(function ToolbarField(\n  props: ToolbarFieldProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>\n) {\n  const toolbarFieldProps = useToolbarField(props);\n  return <FormField {...toolbarFieldProps} ref={forwardedRef} />;\n});\n\nToolbarField.displayName = \"ToolbarField\";\n"],"names":["forwardRef","ToolbarField","useToolbarField","jsx","FormField"],"mappings":";;;;;;;;;;AAMO,MAAM,YAAe,GAAAA,gBAAA,CAAW,SAASC,aAAAA,CAC9C,OACA,YACA,EAAA;AACA,EAAM,MAAA,iBAAA,GAAoBC,gCAAgB,KAAK,CAAA,CAAA;AAC/C,EAAA,uBAAQC,cAAA,CAAAC,+BAAA,EAAA;AAAA,IAAW,GAAG,iBAAA;AAAA,IAAmB,GAAK,EAAA,YAAA;AAAA,GAAc,CAAA,CAAA;AAC9D,CAAC,EAAA;AAED,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}
+{"version":3,"file":"ToolbarField.js","sources":["../src/toolbar/toolbar-field/ToolbarField.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from \"react\";\nimport { FormFieldLegacy as FormField } from \"../../form-field-legacy\";\nimport type { ToolbarFieldProps } from \"./toolbarFieldTypes\";\nimport { useToolbarField } from \"./useToolbarField\";\n\nexport const ToolbarField = forwardRef(function ToolbarField(\n  props: ToolbarFieldProps,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const toolbarFieldProps = useToolbarField(props);\n  return <FormField {...toolbarFieldProps} ref={forwardedRef} />;\n});\n\nToolbarField.displayName = \"ToolbarField\";\n"],"names":["forwardRef","ToolbarField","useToolbarField","jsx","FormField"],"mappings":";;;;;;;;AAKO,MAAM,YAAA,GAAeA,gBAAA,CAAW,SAASC,aAAAA,CAC9C,OACA,YAAA,EACA;AACA,EAAA,MAAM,iBAAA,GAAoBC,gCAAgB,KAAK,CAAA;AAC/C,EAAA,uBAAOC,cAAA,CAACC,+BAAA,EAAA,EAAW,GAAG,iBAAA,EAAmB,KAAK,YAAA,EAAc,CAAA;AAC9D,CAAC;AAED,YAAA,CAAa,WAAA,GAAc,cAAA;;;;"}

package/dist-cjs/toolbar/toolbar-field/useToolbarField.js

@@ -1,37 +1,35 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var clsx = require('clsx');
-var React = require('react');
+var react = require('react');
 var ToolbarButton = require('../ToolbarButton.js');
 
 const NullActivationIndicator = () => null;
 const primaryControls = ["Dropdown", "Input"];
 const getChildElementName = (element) => {
-  if (React.isValidElement(element)) {
+  if (react.isValidElement(element)) {
     const { type } = element;
     if (typeof type === "string") {
       return type;
-    } else if (typeof type.name === "string") {
+    }
+    if (typeof type.name === "string") {
       return type.name;
-    } else if ("displayName" in type) {
+    }
+    if ("displayName" in type) {
       return type.displayName;
-    } else {
-      return "";
     }
-  } else {
-    throw Error(
-      "useToolbarField, child of ToolbarField is not valid ReactElememnt"
-    );
+    return "";
   }
+  throw Error(
+    "useToolbarField, child of ToolbarField is not valid ReactElememnt"
+  );
 };
-const isToolbarButton = (element) => React.isValidElement(element) && element.type === ToolbarButton.ToolbarButton;
+const isToolbarButton = (element) => react.isValidElement(element) && element.type === ToolbarButton.ToolbarButton;
 const getToolbarFormFieldProps = (child, isOverflowPanel = false) => {
   let activationIndicator = NullActivationIndicator;
   let variant = "tertiary";
   const element = child;
-  if (React.isValidElement(element)) {
+  if (react.isValidElement(element)) {
     const name = getChildElementName(element);
     if (primaryControls.includes(name)) {
       activationIndicator = void 0;
@@ -59,8 +57,8 @@ const useToolbarField = (props) => {
   } = props;
   const childElementName = getChildElementName(props.children);
   const { className, ActivationIndicatorComponent, ...calculatedProps } = getToolbarFormFieldProps(props.children, inOverflowPanel);
-  const labelPlacement = labelPlacementProp != null ? labelPlacementProp : inOverflowPanel ? "top" : "left";
-  const handleClick = React.useCallback(
+  const labelPlacement = labelPlacementProp ?? (inOverflowPanel ? "top" : "left");
+  const handleClick = react.useCallback(
     (e) => {
       if (onClick && !InteractiveComponents.includes(childElementName)) {
         onClick(e);
@@ -69,7 +67,7 @@ const useToolbarField = (props) => {
     [childElementName, onClick]
   );
   return {
-    ActivationIndicatorComponent: ActivationIndicatorComponentProp != null ? ActivationIndicatorComponentProp : ActivationIndicatorComponent,
+    ActivationIndicatorComponent: ActivationIndicatorComponentProp ?? ActivationIndicatorComponent,
     className: clsx.clsx("saltToolbarField", classNameProp, className),
     labelPlacement,
     onClick: handleClick,

package/dist-cjs/toolbar/toolbar-field/useToolbarField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useToolbarField.js","sources":["../src/toolbar/toolbar-field/useToolbarField.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  isValidElement,\n  MouseEvent,\n  ReactElement,\n  ReactNode,\n  useCallback,\n} from \"react\";\nimport { ToolbarButton } from \"../ToolbarButton\";\nimport { ToolbarFieldProps } from \"./toolbarFieldTypes\";\n\ntype TypeWithDisplayName = { displayName: string };\ntype ActivationIndicator = ToolbarFieldProps[\"ActivationIndicatorComponent\"];\ntype ToolbarFormFieldVariant = \"primary\" | \"tertiary\";\n\nconst NullActivationIndicator = () => null;\nconst primaryControls = [\"Dropdown\", \"Input\"];\n\nconst getChildElementName = (element: ReactNode): string => {\n  if (isValidElement(element)) {\n    const { type } = element;\n    if (typeof type === \"string\") {\n      return type;\n    } else if (typeof type.name === \"string\") {\n      return type.name;\n    } else if (\"displayName\" in type) {\n      return (type as TypeWithDisplayName).displayName;\n    } else {\n      return \"\";\n    }\n  } else {\n    throw Error(\n      \"useToolbarField, child of ToolbarField is not valid ReactElememnt\"\n    );\n  }\n};\n\n// ToolbarButton gets special styling treatment in the OverflowPanel but styling is\n// applied to the FormField, so we need to target those FormFields hosting ToolbarButtons.\nconst isToolbarButton = (element: ReactElement): boolean =>\n  isValidElement(element) && element.type === ToolbarButton;\n\n// Some props for Toolbar FormFields depend on the control hosted by\n// the FormField.\nexport const getToolbarFormFieldProps = (\n  child: ReactNode,\n  isOverflowPanel = false\n): ToolbarFieldProps => {\n  let activationIndicator: ActivationIndicator = NullActivationIndicator;\n  let variant: ToolbarFormFieldVariant = \"tertiary\";\n  const element = child as ReactElement;\n  if (isValidElement(element)) {\n    const name = getChildElementName(element);\n    if (primaryControls.includes(name)) {\n      activationIndicator = undefined;\n      variant = \"primary\";\n    }\n  }\n  return {\n    ActivationIndicatorComponent: activationIndicator,\n    className: clsx({\n      \"saltFormFieldLegacy-toolbarButton\":\n        isOverflowPanel && isToolbarButton(element),\n      [`saltFormFieldLegacy-${variant}`]: variant,\n    }),\n    fullWidth: false,\n  };\n};\n\n// Eventually this list needs to be configurable at the Toolbar level\nconst InteractiveComponents = [\"Input\", \"Dropdown\"];\n\nexport const useToolbarField = (\n  props: ToolbarFieldProps\n): ToolbarFieldProps => {\n  const {\n    ActivationIndicatorComponent: ActivationIndicatorComponentProp,\n    className: classNameProp,\n    inOverflowPanel,\n    labelPlacement: labelPlacementProp,\n    onClick,\n    ...rest\n  } = props;\n\n  const childElementName = getChildElementName(props.children);\n  const { className, ActivationIndicatorComponent, ...calculatedProps } =\n    getToolbarFormFieldProps(props.children, inOverflowPanel);\n\n  const labelPlacement =\n    labelPlacementProp ?? (inOverflowPanel ? \"top\" : \"left\");\n\n  // disableFocusRing ???\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (onClick && !InteractiveComponents.includes(childElementName)) {\n        onClick(e);\n      }\n    },\n    [childElementName, onClick]\n  );\n  return {\n    ActivationIndicatorComponent:\n      ActivationIndicatorComponentProp ?? ActivationIndicatorComponent,\n    className: clsx(\"saltToolbarField\", classNameProp, className),\n    labelPlacement,\n    onClick: handleClick,\n    ...rest,\n    ...calculatedProps,\n  };\n};\n"],"names":["isValidElement","ToolbarButton","clsx","useCallback"],"mappings":"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"}
+{"version":3,"file":"useToolbarField.js","sources":["../src/toolbar/toolbar-field/useToolbarField.ts"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  useCallback,\n} from \"react\";\nimport { ToolbarButton } from \"../ToolbarButton\";\nimport type { ToolbarFieldProps } from \"./toolbarFieldTypes\";\n\ntype TypeWithDisplayName = { displayName: string };\ntype ActivationIndicator = ToolbarFieldProps[\"ActivationIndicatorComponent\"];\ntype ToolbarFormFieldVariant = \"primary\" | \"tertiary\";\n\nconst NullActivationIndicator = () => null;\nconst primaryControls = [\"Dropdown\", \"Input\"];\n\nconst getChildElementName = (element: ReactNode): string => {\n  if (isValidElement(element)) {\n    const { type } = element;\n    if (typeof type === \"string\") {\n      return type;\n    }\n    if (typeof type.name === \"string\") {\n      return type.name;\n    }\n    if (\"displayName\" in type) {\n      return (type as TypeWithDisplayName).displayName;\n    }\n    return \"\";\n  }\n  throw Error(\n    \"useToolbarField, child of ToolbarField is not valid ReactElememnt\",\n  );\n};\n\n// ToolbarButton gets special styling treatment in the OverflowPanel but styling is\n// applied to the FormField, so we need to target those FormFields hosting ToolbarButtons.\nconst isToolbarButton = (element: ReactElement): boolean =>\n  isValidElement(element) && element.type === ToolbarButton;\n\n// Some props for Toolbar FormFields depend on the control hosted by\n// the FormField.\nexport const getToolbarFormFieldProps = (\n  child: ReactNode,\n  isOverflowPanel = false,\n): ToolbarFieldProps => {\n  let activationIndicator: ActivationIndicator = NullActivationIndicator;\n  let variant: ToolbarFormFieldVariant = \"tertiary\";\n  const element = child as ReactElement;\n  if (isValidElement(element)) {\n    const name = getChildElementName(element);\n    if (primaryControls.includes(name)) {\n      activationIndicator = undefined;\n      variant = \"primary\";\n    }\n  }\n  return {\n    ActivationIndicatorComponent: activationIndicator,\n    className: clsx({\n      \"saltFormFieldLegacy-toolbarButton\":\n        isOverflowPanel && isToolbarButton(element),\n      [`saltFormFieldLegacy-${variant}`]: variant,\n    }),\n    fullWidth: false,\n  };\n};\n\n// Eventually this list needs to be configurable at the Toolbar level\nconst InteractiveComponents = [\"Input\", \"Dropdown\"];\n\nexport const useToolbarField = (\n  props: ToolbarFieldProps,\n): ToolbarFieldProps => {\n  const {\n    ActivationIndicatorComponent: ActivationIndicatorComponentProp,\n    className: classNameProp,\n    inOverflowPanel,\n    labelPlacement: labelPlacementProp,\n    onClick,\n    ...rest\n  } = props;\n\n  const childElementName = getChildElementName(props.children);\n  const { className, ActivationIndicatorComponent, ...calculatedProps } =\n    getToolbarFormFieldProps(props.children, inOverflowPanel);\n\n  const labelPlacement =\n    labelPlacementProp ?? (inOverflowPanel ? \"top\" : \"left\");\n\n  // disableFocusRing ???\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLDivElement>) => {\n      if (onClick && !InteractiveComponents.includes(childElementName)) {\n        onClick(e);\n      }\n    },\n    [childElementName, onClick],\n  );\n  return {\n    ActivationIndicatorComponent:\n      ActivationIndicatorComponentProp ?? ActivationIndicatorComponent,\n    className: clsx(\"saltToolbarField\", classNameProp, className),\n    labelPlacement,\n    onClick: handleClick,\n    ...rest,\n    ...calculatedProps,\n  };\n};\n"],"names":["isValidElement","ToolbarButton","clsx","useCallback"],"mappings":"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"}

package/dist-cjs/utils/escapeRegExp.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const regExp = /[.*+?^${}()|[\]\\]/g;
 function escapeRegExp(string) {
   return string.replace(regExp, "\\$&");

package/dist-cjs/utils/escapeRegExp.js.map

@@ -1 +1 @@
-{"version":3,"file":"escapeRegExp.js","sources":["../src/utils/escapeRegExp.ts"],"sourcesContent":["const regExp = /[.*+?^${}()|[\\]\\\\]/g;\n\nexport function escapeRegExp(string: string): string {\n  return string.replace(regExp, \"\\\\$&\");\n}\n"],"names":[],"mappings":";;;;AAAA,MAAM,MAAS,GAAA,qBAAA,CAAA;AAER,SAAS,aAAa,MAAwB,EAAA;AACnD,EAAO,OAAA,MAAA,CAAO,OAAQ,CAAA,MAAA,EAAQ,MAAM,CAAA,CAAA;AACtC;;;;"}
+{"version":3,"file":"escapeRegExp.js","sources":["../src/utils/escapeRegExp.ts"],"sourcesContent":["const regExp = /[.*+?^${}()|[\\]\\\\]/g;\n\nexport function escapeRegExp(string: string): string {\n  return string.replace(regExp, \"\\\\$&\");\n}\n"],"names":[],"mappings":";;AAAA,MAAM,MAAA,GAAS,qBAAA;AAER,SAAS,aAAa,MAAA,EAAwB;AACnD,EAAA,OAAO,MAAA,CAAO,OAAA,CAAQ,MAAA,EAAQ,MAAM,CAAA;AACtC;;;;"}

package/dist-cjs/utils/forwardCallbackProps.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const forwardCallbackProps = (ownProps, overrideProps) => {
   const props = Object.keys(ownProps).reduce(
     (map, name) => {

package/dist-cjs/utils/forwardCallbackProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"forwardCallbackProps.js","sources":["../src/utils/forwardCallbackProps.ts"],"sourcesContent":["/*\n  When we clone a React element and inject props, if any of these are\n  callback props, make sure original callback props are also invoked.\n\n React.cloneElement(\n    element,\n    forwardCallbackProps(element.props, overrideProps)\n  )\n */\n\ntype Props = Record<string, any>;\n\nexport const forwardCallbackProps = <P1 extends Props, P2 extends Props>(\n  ownProps: P1,\n  overrideProps: P2\n): P1 & P2 => {\n  const props = Object.keys(ownProps).reduce<Props>(\n    (map, name) => {\n      const ownProp = ownProps[name];\n      const overrideProp = overrideProps[name];\n      if (typeof ownProp === \"function\" && typeof overrideProp === \"function\") {\n        map[name] = (...args: unknown[]) => {\n          ownProp(...args);\n          overrideProp(...args);\n        };\n      }\n      return map;\n    },\n    { ...overrideProps }\n  );\n\n  return props as P1 & P2;\n};\n"],"names":[],"mappings":";;;;AAYa,MAAA,oBAAA,GAAuB,CAClC,QAAA,EACA,aACY,KAAA;AACZ,EAAA,MAAM,KAAQ,GAAA,MAAA,CAAO,IAAK,CAAA,QAAQ,CAAE,CAAA,MAAA;AAAA,IAClC,CAAC,KAAK,IAAS,KAAA;AACb,MAAA,MAAM,UAAU,QAAS,CAAA,IAAA,CAAA,CAAA;AACzB,MAAA,MAAM,eAAe,aAAc,CAAA,IAAA,CAAA,CAAA;AACnC,MAAA,IAAI,OAAO,OAAA,KAAY,UAAc,IAAA,OAAO,iBAAiB,UAAY,EAAA;AACvE,QAAI,GAAA,CAAA,IAAA,CAAA,GAAQ,IAAI,IAAoB,KAAA;AAClC,UAAA,OAAA,CAAQ,GAAG,IAAI,CAAA,CAAA;AACf,UAAA,YAAA,CAAa,GAAG,IAAI,CAAA,CAAA;AAAA,SACtB,CAAA;AAAA,OACF;AACA,MAAO,OAAA,GAAA,CAAA;AAAA,KACT;AAAA,IACA,EAAE,GAAG,aAAc,EAAA;AAAA,GACrB,CAAA;AAEA,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"forwardCallbackProps.js","sources":["../src/utils/forwardCallbackProps.ts"],"sourcesContent":["/*\n  When we clone a React element and inject props, if any of these are\n  callback props, make sure original callback props are also invoked.\n\n React.cloneElement(\n    element,\n    forwardCallbackProps(element.props, overrideProps)\n  )\n */\n\ntype Props = Record<string, any>;\n\nexport const forwardCallbackProps = <P1 extends Props, P2 extends Props>(\n  ownProps: P1,\n  overrideProps: P2,\n): P1 & P2 => {\n  const props = Object.keys(ownProps).reduce<Props>(\n    (map, name) => {\n      const ownProp = ownProps[name];\n      const overrideProp = overrideProps[name];\n      if (typeof ownProp === \"function\" && typeof overrideProp === \"function\") {\n        map[name] = (...args: unknown[]) => {\n          ownProp(...args);\n          overrideProp(...args);\n        };\n      }\n      return map;\n    },\n    { ...overrideProps },\n  );\n\n  return props as P1 & P2;\n};\n"],"names":[],"mappings":";;AAYO,MAAM,oBAAA,GAAuB,CAClC,QAAA,EACA,aAAA,KACY;AACZ,EAAA,MAAM,KAAA,GAAQ,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA,CAAE,MAAA;AAAA,IAClC,CAAC,KAAK,IAAA,KAAS;AACb,MAAA,MAAM,OAAA,GAAU,SAAS,IAAI,CAAA;AAC7B,MAAA,MAAM,YAAA,GAAe,cAAc,IAAI,CAAA;AACvC,MAAA,IAAI,OAAO,OAAA,KAAY,UAAA,IAAc,OAAO,iBAAiB,UAAA,EAAY;AACvE,QAAA,GAAA,CAAI,IAAI,CAAA,GAAI,CAAA,GAAI,IAAA,KAAoB;AAClC,UAAA,OAAA,CAAQ,GAAG,IAAI,CAAA;AACf,UAAA,YAAA,CAAa,GAAG,IAAI,CAAA;AAAA,QACtB,CAAA;AAAA,MACF;AACA,MAAA,OAAO,GAAA;AAAA,IACT,CAAA;AAAA,IACA,EAAE,GAAG,aAAA;AAAc,GACrB;AAEA,EAAA,OAAO,KAAA;AACT;;;;"}

package/dist-cjs/utils/isEmail.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const isEmail = (value) => {
   return !!value && /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(value);
 };

package/dist-cjs/utils/isEmail.js.map

@@ -1 +1 @@
-{"version":3,"file":"isEmail.js","sources":["../src/utils/isEmail.ts"],"sourcesContent":["export const isEmail = (value?: string): boolean => {\n  return !!value && /^\\w+([.-]?\\w+)*@\\w+([.-]?\\w+)*(\\.\\w{2,3})+$/.test(value);\n};\n"],"names":[],"mappings":";;;;AAAa,MAAA,OAAA,GAAU,CAAC,KAA4B,KAAA;AAClD,EAAA,OAAO,CAAC,CAAC,KAAS,IAAA,6CAAA,CAA8C,KAAK,KAAK,CAAA,CAAA;AAC5E;;;;"}
+{"version":3,"file":"isEmail.js","sources":["../src/utils/isEmail.ts"],"sourcesContent":["export const isEmail = (value?: string): boolean => {\n  return !!value && /^\\w+([.-]?\\w+)*@\\w+([.-]?\\w+)*(\\.\\w{2,3})+$/.test(value);\n};\n"],"names":[],"mappings":";;AAAO,MAAM,OAAA,GAAU,CAAC,KAAA,KAA4B;AAClD,EAAA,OAAO,CAAC,CAAC,KAAA,IAAS,6CAAA,CAA8C,KAAK,KAAK,CAAA;AAC5E;;;;"}

package/dist-cjs/utils/isPlainObject.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 const isPlainObject = (obj) => Object.prototype.toString.call(obj) === "[object Object]";
 
 exports.isPlainObject = isPlainObject;

package/dist-cjs/utils/isPlainObject.js.map

@@ -1 +1 @@
-{"version":3,"file":"isPlainObject.js","sources":["../src/utils/isPlainObject.ts"],"sourcesContent":["export const isPlainObject = (obj: Record<never, never>): boolean =>\n  Object.prototype.toString.call(obj) === \"[object Object]\";\n"],"names":[],"mappings":";;;;AAAa,MAAA,aAAA,GAAgB,CAAC,GAC5B,KAAA,MAAA,CAAO,UAAU,QAAS,CAAA,IAAA,CAAK,GAAG,CAAM,KAAA;;;;"}
+{"version":3,"file":"isPlainObject.js","sources":["../src/utils/isPlainObject.ts"],"sourcesContent":["export const isPlainObject = (obj: Record<never, never>): boolean =>\n  Object.prototype.toString.call(obj) === \"[object Object]\";\n"],"names":[],"mappings":";;AAAO,MAAM,aAAA,GAAgB,CAAC,GAAA,KAC5B,MAAA,CAAO,UAAU,QAAA,CAAS,IAAA,CAAK,GAAG,CAAA,KAAM;;;;"}