@salt-ds/lab 1.0.0-alpha.49 → 1.0.0-alpha.50

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

@@ -1,4 +1,4 @@
-import React, { createElement } from 'react';
+import { cloneElement, createElement } from 'react';
 import { isResponsiveAttribute, liftResponsivePropsToFormField } from '../../responsive/utils.js';
 import { ToolbarField } from '../toolbar-field/ToolbarField.js';
 
@@ -21,7 +21,7 @@ const renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed
       orientation
     };
     if (item.element.type === ToolbarField) {
-      return React.cloneElement(item.element, {
+      return cloneElement(item.element, {
         key: index,
         ...toolbarItemProps
       });
@@ -35,7 +35,7 @@ const renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed
         "data-priority": 2,
         key: index,
         "data-orientation": orientation
-      }, React.cloneElement(item.element, { ...restProps }));
+      }, cloneElement(item.element, { ...restProps }));
     }
     return /* @__PURE__ */ createElement(ToolbarField, {
       ...toolbarItemProps,
@@ -44,7 +44,7 @@ const renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed
       "data-priority": 2,
       key: index,
       "data-orientation": orientation
-    }, React.cloneElement(item.element, {
+    }, cloneElement(item.element, {
       id: `tooltray-control-${item.id}`
     }));
   });

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

@@ -1 +1 @@
-{"version":3,"file":"renderTrayTools.js","sources":["../src/toolbar/internal/renderTrayTools.tsx"],"sourcesContent":["import React, { 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 React.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          {React.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        {React.cloneElement(item.element, {\n          id: `tooltray-control-${item.id}`,\n        })}\n      </ToolbarField>\n    );\n  });\n};\n"],"names":[],"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,KAAS,YAAc,EAAA;AACtC,MAAO,OAAA,KAAA,CAAM,YAAa,CAAA,IAAA,CAAK,OAAS,EAAA;AAAA,QACtC,GAAK,EAAA,KAAA;AAAA,QACL,GAAG,gBAAA;AAAA,OACJ,CAAA,CAAA;AAAA,KACH;AACA,IAAA,IAAI,OAAO,IAAK,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,qBAAqB,CAAG,EAAA;AAClD,MAAA,MAAM,CAAC,YAAA,EAAc,SAAS,CAAA,GAAI,+BAA+B,KAAK,CAAA,CAAA;AACtE,MAAA,uBACG,aAAA,CAAA,YAAA,EAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACH,GAAG,gBAAA;AAAA,QAEJ,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,CAAA;AAAA,QACf,GAAK,EAAA,KAAA;AAAA,QACL,kBAAkB,EAAA,WAAA;AAAA,OAGjB,EAAA,KAAA,CAAM,aAAa,IAAK,CAAA,OAAA,EAAS,EAAE,GAAG,SAAA,EAAW,CACpD,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,aAAA,CAAA,YAAA,EAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,YAAY,EAAA,KAAA;AAAA,MACZ,iBAAiB,EAAA,UAAA;AAAA,MACjB,eAAe,EAAA,CAAA;AAAA,MACf,GAAK,EAAA,KAAA;AAAA,MACL,kBAAkB,EAAA,WAAA;AAAA,KAEjB,EAAA,KAAA,CAAM,YAAa,CAAA,IAAA,CAAK,OAAS,EAAA;AAAA,MAChC,EAAA,EAAI,oBAAoB,IAAK,CAAA,EAAA,CAAA,CAAA;AAAA,KAC9B,CACH,CAAA,CAAA;AAAA,GAEH,CAAA,CAAA;AACH;;;;"}
+{"version":3,"file":"renderTrayTools.js","sources":["../src/toolbar/internal/renderTrayTools.tsx"],"sourcesContent":["import React, { cloneElement, type ReactNode } from \"react\";\nimport type {\n  OverflowCollectionHookResult,\n  OverflowItem,\n} from \"../../responsive/overflowTypes\";\nimport {\n  isResponsiveAttribute,\n  liftResponsivePropsToFormField,\n} from \"../../responsive/utils\";\nimport type { OrientationShape } from \"../ToolbarProps\";\nimport { ToolbarField } from \"../toolbar-field/ToolbarField\";\n\ntype TooltrayItem = {\n  \"data-priority\"?: number | string;\n  className: string;\n};\n\nexport const renderTrayTools = (\n  collectionHook: OverflowCollectionHookResult,\n  overflowedItems: OverflowItem[],\n  orientation: OrientationShape,\n  collapsed?: boolean | string,\n): ReactNode => {\n  if (collapsed) {\n    return [];\n  }\n\n  let index = -1;\n\n  const items = collectionHook.data.filter((item) => !item.isOverflowIndicator);\n\n  return items.map((item) => {\n    index += 1;\n    const props = item.element.props as TooltrayItem;\n\n    const overflowed =\n      overflowedItems.findIndex((i) => i.index === index) === -1\n        ? undefined\n        : true;\n\n    const toolbarItemProps = {\n      \"data-index\": index,\n      \"data-priority\": props[\"data-priority\"] ?? 2,\n      \"data-overflowed\": overflowed,\n      id: item.id,\n      orientation,\n    };\n    if (item.element.type === ToolbarField) {\n      return cloneElement(item.element, {\n        key: index,\n        ...toolbarItemProps,\n      });\n    }\n    if (Object.keys(props).some(isResponsiveAttribute)) {\n      const [toolbarProps, restProps] = liftResponsivePropsToFormField(props);\n      return (\n        <ToolbarField\n          {...toolbarProps}\n          {...toolbarItemProps}\n          // don't think we need the data-index\n          data-index={index}\n          data-priority={2}\n          key={index}\n          data-orientation={orientation}\n        >\n          {/* We clone here just to remove the responsive props */}\n          {cloneElement(item.element, { ...restProps })}\n        </ToolbarField>\n      );\n    }\n    return (\n      <ToolbarField\n        {...toolbarItemProps}\n        data-index={index}\n        data-overflowed={overflowed}\n        data-priority={2}\n        key={index}\n        data-orientation={orientation}\n      >\n        {cloneElement(item.element, {\n          id: `tooltray-control-${item.id}`,\n        })}\n      </ToolbarField>\n    );\n  });\n};\n"],"names":[],"mappings":";;;;AAiBO,MAAM,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,KAAS,YAAc,EAAA;AACtC,MAAO,OAAA,YAAA,CAAa,KAAK,OAAS,EAAA;AAAA,QAChC,GAAK,EAAA,KAAA;AAAA,QACL,GAAG,gBAAA;AAAA,OACJ,CAAA,CAAA;AAAA,KACH;AACA,IAAA,IAAI,OAAO,IAAK,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,qBAAqB,CAAG,EAAA;AAClD,MAAA,MAAM,CAAC,YAAA,EAAc,SAAS,CAAA,GAAI,+BAA+B,KAAK,CAAA,CAAA;AACtE,MAAA,uBACG,aAAA,CAAA,YAAA,EAAA;AAAA,QACE,GAAG,YAAA;AAAA,QACH,GAAG,gBAAA;AAAA,QAEJ,YAAY,EAAA,KAAA;AAAA,QACZ,eAAe,EAAA,CAAA;AAAA,QACf,GAAK,EAAA,KAAA;AAAA,QACL,kBAAkB,EAAA,WAAA;AAAA,OAAA,EAGjB,aAAa,IAAK,CAAA,OAAA,EAAS,EAAE,GAAG,SAAA,EAAW,CAC9C,CAAA,CAAA;AAAA,KAEJ;AACA,IAAA,uBACG,aAAA,CAAA,YAAA,EAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,YAAY,EAAA,KAAA;AAAA,MACZ,iBAAiB,EAAA,UAAA;AAAA,MACjB,eAAe,EAAA,CAAA;AAAA,MACf,GAAK,EAAA,KAAA;AAAA,MACL,kBAAkB,EAAA,WAAA;AAAA,KAEjB,EAAA,YAAA,CAAa,KAAK,OAAS,EAAA;AAAA,MAC1B,EAAA,EAAI,oBAAoB,IAAK,CAAA,EAAA,CAAA,CAAA;AAAA,KAC9B,CACH,CAAA,CAAA;AAAA,GAEH,CAAA,CAAA;AACH;;;;"}

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

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useRef, useCallback, createElement } from 'react';
+import { forwardRef, useRef, useCallback, cloneElement, createElement } from 'react';
 import { makePrefixer, useIdMemo, useControlled, Button } from '@salt-ds/core';
 import { OverflowMenuIcon } from '@salt-ds/icons';
 import { clsx } from 'clsx';
@@ -100,10 +100,7 @@ const OverflowPanel = forwardRef(function DropdownPanel({
             onClick: handleItemClick
           };
           if (type === ToolbarField) {
-            return React.cloneElement(
-              item.value,
-              formFieldProps
-            );
+            return cloneElement(item.value, formFieldProps);
           }
           return /* @__PURE__ */ createElement(ToolbarField, {
             ...formFieldProps,

package/dist-es/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  type ForwardedRef,\n  forwardRef,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\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          }\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          }\n          return (\n            <ToolbarField {...formFieldProps} key={item.id}>\n              {item.value}\n            </ToolbarField>\n          );\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}
+{"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 {\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { ToolbarField, type ToolbarFieldProps } from \"../toolbar-field\";\nimport { OverflowSeparator } from \"./OverflowSeparator\";\n\nimport {\n  useCollectionItems,\n  useKeyboardNavigationPanel,\n} from \"../../common-hooks\";\n\nimport { DropdownBase, type DropdownBaseProps } from \"../../dropdown\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport overflowPanelCss from \"./OverflowPanel.css\";\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          }\n          const formFieldProps = {\n            id: item.id,\n            inOverflowPanel: true,\n            key: item.id,\n            onClick: handleItemClick,\n          } as ToolbarFieldProps;\n\n          if (type === ToolbarField) {\n            return cloneElement(item.value as ReactElement, formFieldProps);\n          }\n          return (\n            <ToolbarField {...formFieldProps} key={item.id}>\n              {item.value}\n            </ToolbarField>\n          );\n        })}\n      </div>\n    </DropdownBase>\n  );\n});\n"],"names":["overflowPanelCss","useId"],"mappings":"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"}

package/dist-types/breadcrumbs/Breadcrumb.d.ts

@@ -1,6 +1,6 @@
 import { type TooltipProps } from "@salt-ds/core";
 import type { IconProps } from "@salt-ds/icons";
-import { type HTMLAttributes, type ReactNode } from "react";
+import { type ComponentType, type HTMLAttributes, type ReactNode } from "react";
 export interface BreadcrumbProps {
     children?: ReactNode;
     ContainerProps?: HTMLAttributes<HTMLLIElement>;
@@ -13,6 +13,6 @@ export interface BreadcrumbProps {
     minWidth?: number;
     onItemClick?: (item: any, event: any) => void;
     overflowLabel?: string;
-    Icon?: React.ComponentType<IconProps>;
+    Icon?: ComponentType<IconProps>;
 }
 export declare const Breadcrumb: import("react").ForwardRefExoticComponent<BreadcrumbProps & import("react").RefAttributes<HTMLLIElement>>;

package/dist-types/breadcrumbs/Breadcrumbs.d.ts

@@ -1,5 +1,5 @@
 import type { IconProps } from "@salt-ds/icons";
-import React, { type HTMLAttributes, type ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
     Menu?: any;
     SeparatorProps?: IconProps;
@@ -14,4 +14,4 @@ export interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
     className?: string;
     children?: ReactNode;
 }
-export declare const Breadcrumbs: React.ForwardRefExoticComponent<BreadcrumbsProps & React.RefAttributes<HTMLElement>>;
+export declare const Breadcrumbs: import("react").ForwardRefExoticComponent<BreadcrumbsProps & import("react").RefAttributes<HTMLElement>>;

package/dist-types/color-chooser/HexInput.d.ts

@@ -1,7 +1,8 @@
+import type { ChangeEvent } from "react";
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;
-    onSubmit: (hex: string | undefined, e?: React.ChangeEvent) => void;
+    onSubmit: (hex: string | undefined, e?: ChangeEvent) => void;
 }
 export declare const HexInput: ({ hexValue, disableAlphaChooser, onSubmit, }: HexInputProps) => JSX.Element;
 export {};

package/dist-types/color-chooser/HexInputField.d.ts

@@ -1,7 +1,8 @@
+import { type ChangeEvent } from "react";
 interface HexInputProps {
     hexValue: string | undefined;
     disableAlphaChooser: boolean;
-    onSubmit: (hex: string | undefined, e?: React.ChangeEvent) => void;
+    onSubmit: (hex: string | undefined, e?: ChangeEvent) => void;
 }
 export declare const HexInput: ({ hexValue, disableAlphaChooser, onSubmit, }: HexInputProps) => JSX.Element;
 export {};

package/dist-types/color-chooser/RGBAInputField.d.ts

@@ -1,8 +1,9 @@
+import { type ChangeEvent } from "react";
 import type { RGBAValue } from "./Color";
 interface RGBInputProps {
     rgbaValue: RGBAValue;
     value: "r" | "g" | "b";
-    onSubmit: (rgb: RGBAValue, e?: React.ChangeEvent) => void;
+    onSubmit: (rgb: RGBAValue, e?: ChangeEvent) => void;
 }
 export declare const RGBInput: ({ rgbaValue, value, onSubmit, }: RGBInputProps) => JSX.Element;
 export {};

package/dist-types/color-chooser/Swatches.d.ts

@@ -1,9 +1,10 @@
+import type { ChangeEvent } from "react";
 import type { Color } from "./Color";
 export interface SwatchesTabProps {
     allColors: string[][];
     color: Color | undefined;
     alpha: number;
-    handleColorChange: (color: Color | undefined, finalSelection: boolean, e?: React.ChangeEvent) => void;
+    handleColorChange: (color: Color | undefined, finalSelection: boolean, e?: ChangeEvent) => void;
     displayColorName: string | undefined;
     placeholder: string | undefined;
     onDialogClosed: () => void;

package/dist-types/color-chooser/SwatchesPicker.d.ts

@@ -1,9 +1,10 @@
+import type { ChangeEvent } from "react";
 import type { Color } from "./Color";
 interface SwatchesPickerProps {
     allColors: string[][];
     color: Color | undefined;
     alpha?: number;
-    onChange: (color: Color | undefined, finalSelection: boolean, e?: React.ChangeEvent) => void;
+    onChange: (color: Color | undefined, finalSelection: boolean, e?: ChangeEvent) => void;
     onDialogClosed: () => void;
 }
 export declare const SwatchesPicker: ({ allColors, color, alpha, onChange, onDialogClosed, }: SwatchesPickerProps) => JSX.Element;

package/dist-types/common-hooks/keyUtils.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
+import type { KeyboardEvent } from "react";
 export declare const ArrowUp = "ArrowUp";
 export declare const ArrowDown = "ArrowDown";
 export declare const ArrowLeft = "ArrowLeft";
@@ -11,5 +11,5 @@ export declare const PageUp = "PageUp";
 export declare const PageDown = "PageDown";
 export declare const Space = " ";
 export declare const Tab = "Tab";
-export declare const isCharacterKey: (evt: React.KeyboardEvent) => boolean;
-export declare const isNavigationKey: ({ key }: React.KeyboardEvent) => boolean;
+export declare const isCharacterKey: (evt: KeyboardEvent) => boolean;
+export declare const isNavigationKey: ({ key }: KeyboardEvent) => boolean;

package/dist-types/common-hooks/selectionTypes.d.ts

@@ -1,4 +1,4 @@
-import type { SyntheticEvent } from "react";
+import type { KeyboardEvent, MouseEvent, SyntheticEvent } from "react";
 import type { CollectionItem } from "./collectionTypes";
 export declare const SINGLE = "default";
 export declare const MULTIPLE = "multiple";
@@ -20,10 +20,10 @@ export interface SelectionProps<Item, Selection extends SelectionStrategy = "def
     selectionStrategy?: Selection;
 }
 export interface ListHandlers {
-    onClick?: (event: React.MouseEvent) => void;
-    onKeyDown?: (event: React.KeyboardEvent) => void;
-    onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
-    onMouseMove?: (event: React.MouseEvent) => void;
+    onClick?: (event: MouseEvent) => void;
+    onKeyDown?: (event: KeyboardEvent) => void;
+    onKeyboardNavigation?: (event: KeyboardEvent, currentIndex: number) => void;
+    onMouseMove?: (event: MouseEvent) => void;
 }
 export interface SelectionHookProps<Item, Selection extends SelectionStrategy = "default"> extends SelectionProps<CollectionItem<Item>, Selection> {
     disableSelection?: boolean;

package/dist-types/common-hooks/useTypeahead.d.ts

@@ -1,3 +1,4 @@
+import { type KeyboardEvent } from "react";
 import type { CollectionItem } from "./collectionTypes";
 interface TypeaheadHookProps<Item> {
     disableTypeToSelect?: boolean;
@@ -8,7 +9,7 @@ interface TypeaheadHookProps<Item> {
     items: CollectionItem<Item>[];
 }
 interface TypeaheadHookResult {
-    onKeyDown?: (e: React.KeyboardEvent) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
 }
 export declare const useTypeahead: <Item>({ disableTypeToSelect, highlightedIdx, highlightItemAtIndex, typeToNavigate, items, applyIncrementalSearch, }: TypeaheadHookProps<Item>) => TypeaheadHookResult;
 export {};

package/dist-types/contact-details/internal/FavoriteToggle.d.ts

@@ -1,13 +1,12 @@
-import type React from "react";
-import { type FocusEventHandler, type KeyboardEventHandler, type MouseEventHandler } from "react";
+import { type FocusEventHandler, type KeyboardEventHandler, type MouseEvent, type MouseEventHandler } from "react";
 import { type StarIconContainerProps } from "./StarIconContainer";
 export interface FavoriteToggleProps extends Omit<StarIconContainerProps, "onChange"> {
     onBlur?: FocusEventHandler;
     onChange?: (isSelected: boolean) => void;
-    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    onClick?: (event: MouseEvent<HTMLSpanElement>) => void;
     onFocus?: FocusEventHandler;
     onKeyDown?: KeyboardEventHandler<HTMLSpanElement>;
     onMouseEnter?: MouseEventHandler<HTMLSpanElement>;
     onMouseLeave?: MouseEventHandler<HTMLSpanElement>;
 }
-export declare const FavoriteToggle: React.ForwardRefExoticComponent<FavoriteToggleProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const FavoriteToggle: import("react").ForwardRefExoticComponent<FavoriteToggleProps & import("react").RefAttributes<HTMLSpanElement>>;

package/dist-types/form-field-legacy/FormHelperText.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentPropsWithoutRef } from "react";
 import type { FormFieldLegacyProps as FormFieldProps } from "./FormFieldLegacy";
-export declare type FormHelperTextProps<E extends React.ElementType = "p"> = ComponentPropsWithoutRef<E> & {
+export interface FormHelperTextProps extends ComponentPropsWithoutRef<"p"> {
     helperText: FormFieldProps["helperText"];
     helperTextPlacement: FormFieldProps["helperTextPlacement"];
-};
-export declare const FormHelperText: <E extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "p">({ helperText, helperTextPlacement, ...restProps }: FormHelperTextProps<E>) => import("react/jsx-runtime").JSX.Element | null;
+}
+export declare const FormHelperText: ({ helperText, helperTextPlacement, ...restProps }: FormHelperTextProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist-types/index.d.ts

@@ -37,6 +37,7 @@ export * from "./skip-link";
 export * from "./slider";
 export * from "./stepped-tracker";
 export * from "./stepper-input";
+export * from "./system-status";
 export * from "./tabs";
 export * from "./tabs-next";
 export * from "./toast-group";

package/dist-types/list/listTypes.d.ts

@@ -1,12 +1,11 @@
-import type React from "react";
-import type { FocusEventHandler, ForwardedRef, HTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, PropsWithChildren, Ref, RefObject } from "react";
+import type { FocusEventHandler, ForwardedRef, HTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEventHandler, PropsWithChildren, ReactNode, Ref, RefObject } from "react";
 import type { CollectionHookResult, CollectionItem, ListHandlers, NavigationHookResult, ScrollingAPI, SelectHandler, SelectionChangeHandler, SelectionHookResult, SelectionProps, SelectionStrategy, ViewportTrackingResult } from "../common-hooks";
 export declare type ComponentType<T = unknown> = (props: PropsWithChildren<T>) => JSX.Element;
 export declare type ListItemType<T = unknown> = ComponentType<ListItemProps<T> & {
     ref?: Ref<HTMLDivElement>;
 }>;
 export interface ListItemProps<T = unknown> extends HTMLAttributes<HTMLDivElement> {
-    children?: React.ReactNode;
+    children?: ReactNode;
     disabled?: boolean;
     item?: T;
     itemHeight?: number | string;
@@ -170,7 +169,7 @@ export interface ListHookProps<Item, Selection extends SelectionStrategy> extend
     label?: string;
     listHandlers?: ListHandlers;
     onHighlight?: (index: number) => void;
-    onKeyboardNavigation?: (event: React.KeyboardEvent, currentIndex: number) => void;
+    onKeyboardNavigation?: (event: KeyboardEvent, currentIndex: number) => void;
     onKeyDown?: (evt: KeyboardEvent) => void;
     onSelect?: SelectHandler<Item>;
     onSelectionChange?: SelectionChangeHandler<Item, Selection>;

package/dist-types/slider/internal/useSliderKeyDown.d.ts

@@ -1,3 +1,4 @@
+import type { KeyboardEvent } from "react";
 import type { SliderChangeHandler, SliderValue } from "../types";
 import { type UpdateValueItem } from "./utils";
-export declare function useSliderKeyDown(value: SliderValue, min: number, max: number, pageStep: number, step: number, updateValueItem: UpdateValueItem, setValue: SliderChangeHandler, onChange?: SliderChangeHandler): (event: React.KeyboardEvent) => void;
+export declare function useSliderKeyDown(value: SliderValue, min: number, max: number, pageStep: number, step: number, updateValueItem: UpdateValueItem, setValue: SliderChangeHandler, onChange?: SliderChangeHandler): (event: KeyboardEvent) => void;

package/dist-types/system-status/SystemStatus.d.ts

@@ -0,0 +1,9 @@
+import { type ValidationStatus } from "@salt-ds/core";
+import { type HTMLAttributes } from "react";
+export interface SystemStatusProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     *  A string to determine the current state of the SystemStatus. Defaults to `info`.
+     */
+    status?: ValidationStatus;
+}
+export declare const SystemStatus: import("react").ForwardRefExoticComponent<SystemStatusProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/system-status/SystemStatusActions.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+interface SystemStatusActionsProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of SystemStatusActions
+     */
+    children: ReactNode;
+}
+export declare const SystemStatusActions: import("react").ForwardRefExoticComponent<SystemStatusActionsProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/system-status/SystemStatusContent.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+interface SystemStatusContentProps extends ComponentPropsWithoutRef<"div"> {
+    /**
+     * The content of SystemStatusContent
+     */
+    children: ReactNode;
+}
+export declare const SystemStatusContent: import("react").ForwardRefExoticComponent<SystemStatusContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist-types/system-status/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./SystemStatus";
+export * from "./SystemStatusContent";
+export * from "./SystemStatusActions";

package/dist-types/tabs/Tabstrip.d.ts

@@ -1,3 +1,2 @@
-import React from "react";
 import type { FocusAPI, TabstripProps } from "./TabsTypes";
-export declare const Tabstrip: React.ForwardRefExoticComponent<TabstripProps & React.RefAttributes<FocusAPI>>;
+export declare const Tabstrip: import("react").ForwardRefExoticComponent<TabstripProps & import("react").RefAttributes<FocusAPI>>;

package/dist-types/toolbar/overflow-panel/OverflowPanel.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { type DropdownBaseProps } from "../../dropdown";
 export interface DropdownPanelProps extends DropdownBaseProps {
     /**
@@ -10,4 +9,4 @@ export interface DropdownPanelProps extends DropdownBaseProps {
      */
     triggerButtonLabel?: string;
 }
-export declare const OverflowPanel: React.ForwardRefExoticComponent<DropdownPanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const OverflowPanel: import("react").ForwardRefExoticComponent<DropdownPanelProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.49",
+  "version": "1.0.0-alpha.50",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.32.0",
+    "@salt-ds/core": "^1.33.0",
     "@salt-ds/styles": "^0.2.1",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/icons": "^1.12.1"