@salt-ds/lab 1.0.0-alpha.71 → 1.0.0-alpha.73

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

@@ -1,21 +1,21 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useCallback, cloneElement, createElement } from 'react';
 import { makePrefixer, useIcon, useIdMemo, useControlled, Button } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { ToolbarField } from '../toolbar-field/ToolbarField.js';
-import { OverflowSeparator } from './OverflowSeparator.js';
 import '../../common-hooks/collectionProvider.js';
 import '../../common-hooks/keyUtils.js';
 import { useCollectionItems } from '../../common-hooks/useCollectionItems.js';
 import { useKeyboardNavigationPanel } from '../../common-hooks/useKeyboardNavigationPanel.js';
 import '../../responsive/useResizeObserver.js';
+import '../../dropdown/Dropdown.js';
 import { DropdownBase } from '../../dropdown/DropdownBase.js';
 import '../../dropdown/DropdownButton.js';
-import '../../dropdown/Dropdown.js';
 import '../../form-field-context-legacy/FormFieldLegacyContext.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
+import { ToolbarField } from '../toolbar-field/ToolbarField.js';
 import css_248z from './OverflowPanel.css.js';
+import { OverflowSeparator } from './OverflowSeparator.js';
 
 const withBaseName = makePrefixer("saltOverflowPanel");
 const OverflowPanel = forwardRef(function DropdownPanel({

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

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

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useToolbarField } from './useToolbarField.js';
 import { FormFieldLegacy } from '../../form-field-legacy/FormFieldLegacy.js';
 import '../../form-field-legacy/FormLabel.js';
+import { useToolbarField } from './useToolbarField.js';
 
 const ToolbarField = forwardRef(function ToolbarField2(props, forwardedRef) {
   const toolbarFieldProps = useToolbarField(props);

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarField.js","sources":["../src/toolbar/toolbar-field/ToolbarField.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from \"react\";\nimport type { 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":["ToolbarField","FormField"],"mappings":";;;;;;AAMO,MAAM,YAAe,GAAA,UAAA,CAAW,SAASA,aAAAA,CAC9C,OACA,YACA,EAAA;AACA,EAAM,MAAA,iBAAA,GAAoB,gBAAgB,KAAK,CAAA;AAC/C,EAAA,uBAAQ,GAAA,CAAAC,eAAA,EAAA,EAAW,GAAG,iBAAA,EAAmB,KAAK,YAAc,EAAA,CAAA;AAC9D,CAAC;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":["ToolbarField","FormField"],"mappings":";;;;;;AAKO,MAAM,YAAe,GAAA,UAAA,CAAW,SAASA,aAAAA,CAC9C,OACA,YACA,EAAA;AACA,EAAM,MAAA,iBAAA,GAAoB,gBAAgB,KAAK,CAAA;AAC/C,EAAA,uBAAQ,GAAA,CAAAC,eAAA,EAAA,EAAW,GAAG,iBAAA,EAAmB,KAAK,YAAc,EAAA,CAAA;AAC9D,CAAC;AAED,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}

package/dist-es/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  type MouseEvent,\n  type ReactElement,\n  type ReactNode,\n  isValidElement,\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":[],"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":[],"mappings":";;;;AAeA,MAAM,0BAA0B,MAAM,IAAA;AACtC,MAAM,eAAA,GAAkB,CAAC,UAAA,EAAY,OAAO,CAAA;AAE5C,MAAM,mBAAA,GAAsB,CAAC,OAA+B,KAAA;AAC1D,EAAI,IAAA,cAAA,CAAe,OAAO,CAAG,EAAA;AAC3B,IAAM,MAAA,EAAE,MAAS,GAAA,OAAA;AACjB,IAAI,IAAA,OAAO,SAAS,QAAU,EAAA;AAC5B,MAAO,OAAA,IAAA;AAAA;AAET,IAAI,IAAA,OAAO,IAAK,CAAA,IAAA,KAAS,QAAU,EAAA;AACjC,MAAA,OAAO,IAAK,CAAA,IAAA;AAAA;AAEd,IAAA,IAAI,iBAAiB,IAAM,EAAA;AACzB,MAAA,OAAQ,IAA6B,CAAA,WAAA;AAAA;AAEvC,IAAO,OAAA,EAAA;AAAA;AAET,EAAM,MAAA,KAAA;AAAA,IACJ;AAAA,GACF;AACF,CAAA;AAIA,MAAM,kBAAkB,CAAC,OAAA,KACvB,eAAe,OAAO,CAAA,IAAK,QAAQ,IAAS,KAAA,aAAA;AAIvC,MAAM,wBAA2B,GAAA,CACtC,KACA,EAAA,eAAA,GAAkB,KACI,KAAA;AACtB,EAAA,IAAI,mBAA2C,GAAA,uBAAA;AAC/C,EAAA,IAAI,OAAmC,GAAA,UAAA;AACvC,EAAA,MAAM,OAAU,GAAA,KAAA;AAChB,EAAI,IAAA,cAAA,CAAe,OAAO,CAAG,EAAA;AAC3B,IAAM,MAAA,IAAA,GAAO,oBAAoB,OAAO,CAAA;AACxC,IAAI,IAAA,eAAA,CAAgB,QAAS,CAAA,IAAI,CAAG,EAAA;AAClC,MAAsB,mBAAA,GAAA,MAAA;AACtB,MAAU,OAAA,GAAA,SAAA;AAAA;AACZ;AAEF,EAAO,OAAA;AAAA,IACL,4BAA8B,EAAA,mBAAA;AAAA,IAC9B,WAAW,IAAK,CAAA;AAAA,MACd,mCAAA,EACE,eAAmB,IAAA,eAAA,CAAgB,OAAO,CAAA;AAAA,MAC5C,CAAC,CAAA,oBAAA,EAAuB,OAAO,CAAA,CAAE,GAAG;AAAA,KACrC,CAAA;AAAA,IACD,SAAW,EAAA;AAAA,GACb;AACF;AAGA,MAAM,qBAAA,GAAwB,CAAC,OAAA,EAAS,UAAU,CAAA;AAErC,MAAA,eAAA,GAAkB,CAC7B,KACsB,KAAA;AACtB,EAAM,MAAA;AAAA,IACJ,4BAA8B,EAAA,gCAAA;AAAA,IAC9B,SAAW,EAAA,aAAA;AAAA,IACX,eAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,IAChB,OAAA;AAAA,IACA,GAAG;AAAA,GACD,GAAA,KAAA;AAEJ,EAAM,MAAA,gBAAA,GAAmB,mBAAoB,CAAA,KAAA,CAAM,QAAQ,CAAA;AAC3D,EAAM,MAAA,EAAE,WAAW,4BAA8B,EAAA,GAAG,iBAClD,GAAA,wBAAA,CAAyB,KAAM,CAAA,QAAA,EAAU,eAAe,CAAA;AAE1D,EAAM,MAAA,cAAA,GACJ,kBAAuB,KAAA,eAAA,GAAkB,KAAQ,GAAA,MAAA,CAAA;AAInD,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAAkC,KAAA;AACjC,MAAA,IAAI,OAAW,IAAA,CAAC,qBAAsB,CAAA,QAAA,CAAS,gBAAgB,CAAG,EAAA;AAChE,QAAA,OAAA,CAAQ,CAAC,CAAA;AAAA;AACX,KACF;AAAA,IACA,CAAC,kBAAkB,OAAO;AAAA,GAC5B;AACA,EAAO,OAAA;AAAA,IACL,8BACE,gCAAoC,IAAA,4BAAA;AAAA,IACtC,SAAW,EAAA,IAAA,CAAK,kBAAoB,EAAA,aAAA,EAAe,SAAS,CAAA;AAAA,IAC5D,cAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,GAAG,IAAA;AAAA,IACH,GAAG;AAAA,GACL;AACF;;;;"}

package/dist-es/tree/Tree.js

@@ -1,21 +1,21 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useCallback, isValidElement, createElement } from 'react';
 import { makePrefixer, useIdMemo, useForkRef } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { useAutoSizer } from '../common-hooks/useAutoSizer.js';
 import { calcPreferredHeight } from '../common-hooks/calcPreferredHeight.js';
 import '../common-hooks/collectionProvider.js';
 import '../common-hooks/keyUtils.js';
 import { closestListItemIndex } from '../common-hooks/list-dom-utils.js';
+import { useAutoSizer } from '../common-hooks/useAutoSizer.js';
 import { useCollectionItems } from '../common-hooks/useCollectionItems.js';
 import { GROUP_SELECTION_NONE } from '../common-hooks/useSelection.js';
 import '../responsive/useResizeObserver.js';
 import { isSelected } from '../common-hooks/utils/isSelected.js';
+import css_248z from './Tree.css.js';
 import { TreeNode } from './TreeNode.js';
 import { useTree } from './useTree.js';
-import { useComponentCssInjection } from '@salt-ds/styles';
-import { useWindow } from '@salt-ds/window';
-import css_248z from './Tree.css.js';
 
 const withBaseName = makePrefixer("saltTree");
 const Tree = forwardRef(function Tree2({

package/dist-es/tree/Tree.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  type MouseEvent,\n  type ReactElement,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useRef,\n} from \"react\";\n\nimport {\n  type CollectionIndexer,\n  type CollectionItem,\n  GROUP_SELECTION_NONE,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  calcPreferredHeight,\n  closestListItemIndex,\n  isSelected,\n  useAutoSizer,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport type { TreeProps } from \"./treeTypes\";\n\nimport { TreeNode } from \"./TreeNode\";\nimport { useTree } from \"./useTree\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport treeCss from \"./Tree.css\";\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nconst getSelectedItemsFromSource = (\n  source: any[],\n  selectionStrategy: SelectionStrategy,\n  result: any[] = [],\n) => {\n  const isSingleSelection =\n    selectionStrategy === \"default\" || selectionStrategy === \"deselectable\";\n  for (const item of source) {\n    if (item.selected === true) {\n      result.push(item);\n      if (isSingleSelection) {\n        break;\n      }\n    }\n    if (item.childNodes) {\n      getSelectedItemsFromSource(item.childNodes, selectionStrategy, result);\n      if (isSingleSelection && result.length === 1) {\n        break;\n      }\n    }\n  }\n\n  return isSingleSelection ? result[0] : result.length > 0 ? result : undefined;\n};\n\nexport const Tree = forwardRef(function Tree<\n  Item,\n  Selection extends SelectionStrategy = \"deselectable\",\n>(\n  {\n    className,\n    defaultSelected,\n    disabled,\n    groupSelection = GROUP_SELECTION_NONE,\n    height,\n    id: idProp,\n    onHighlight,\n    onToggle,\n    onSelect,\n    onSelectionChange,\n    revealSelected,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    style: styleProp,\n    width,\n    ...htmlAttributes\n  }: TreeProps<Item, Selection>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree\",\n    css: treeCss,\n    window: targetWindow,\n  });\n\n  const id = useIdMemo(idProp);\n  const rootRef = useRef(null);\n  const contentRef = useRef(null);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    options: {\n      noChildrenLabel: \"No children available\",\n      revealSelected: revealSelected\n        ? Boolean(selectedProp) || Boolean(defaultSelected) || false\n        : undefined,\n    },\n  });\n\n  //------------- from original List\n  const preferredHeight =\n    height ??\n    calcPreferredHeight({\n      displayedItemCount: 10,\n      itemCount: collectionHook.data.length,\n      itemHeight: 36,\n      // getItemHeight,\n      // itemGapSize,\n    });\n\n  const autoSize = useAutoSizer<HTMLDivElement>({\n    containerRef: rootRef,\n    responsive: width === undefined || height === undefined,\n    height: preferredHeight,\n    width,\n  });\n  //---------------\n\n  const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n    (evt, selectedItem) => {\n      if (onSelect) {\n        if (isValidElement(selectedItem.value)) {\n          onSelect(evt, selectedItem.label as any);\n        } else if (selectedItem.value !== null) {\n          onSelect(evt, selectedItem.value);\n        }\n      }\n    },\n    [onSelect],\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<CollectionItem<Item>, Selection>\n  >(\n    (evt, selected) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (onSelectionChange) {\n        onSelectionChange(\n          evt,\n          Array.isArray(selected)\n            ? (selected.map((s) => s.value) as returnType)\n            : selected && (selected.value as returnType),\n        );\n      }\n    },\n    [onSelectionChange],\n  );\n\n  // const getSelected = (\n  //   sel: Item | null | Item[]\n  // ):\n  //   | undefined\n  //   | (Selection extends SingleSelectionStrategy\n  //       ? CollectionItem<Item> | null\n  //       : CollectionItem<Item>[]) => {\n  //   if (sel !== undefined) {\n  //     return collectionHook.itemToCollectionItem<Selection, typeof sel>(sel);\n  //   } else if (Array.isArray(source)) {\n  //     const selected = getSelectedItemsFromSource(\n  //       source,\n  //       selectionStrategy ?? \"default\"\n  //     );\n  //     return Array.isArray(selected)\n  //       ? collectionHook.itemToCollectionItem(selected)\n  //       : selected\n  //       ? collectionHook.toCollectionItem(selected)\n  //       : undefined;\n  //   }\n  // };\n\n  const {\n    focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected,\n  } = useTree<Item, Selection>({\n    collectionHook,\n    containerRef: rootRef,\n    contentRef,\n    // Note this isn't enough for a Tree, because of nested structure\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    disabled,\n    groupSelection,\n    onHighlight,\n    onSelect: handleSelect,\n    onSelectionChange: handleSelectionChange,\n    onToggle,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  // TODO move into useTree (see useList)\n  const defaultItemHandlers = {\n    onMouseEnter: (evt: MouseEvent) => {\n      // if (!isScrolling.current) {\n      const idx = closestListItemIndex(evt.target as HTMLElement);\n      if (idx != null) {\n        highlightItemAtIndex(idx);\n      }\n      // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n      // }\n    },\n  };\n\n  const propsCommonToAllListItems = {\n    ...defaultItemHandlers,\n    ...listItemHandlers,\n    isLeaf: true,\n    role: \"treeitem\",\n  };\n  // const allowGroupSelect = groupSelectionEnabled(groupSelection);\n  const allowGroupSelect = false;\n\n  /**\n   * Add a ListItem from source item\n   */\n  function addLeafNode(\n    list: ReactElement[],\n    item: CollectionItem<Item>,\n    idx: CollectionIndexer,\n  ) {\n    const itemProps = {\n      \"aria-disabled\": disabled || item.disabled,\n      \"aria-level\": item.level,\n      \"data-idx\": idx.value,\n      description: item.description,\n      id: item.id,\n      key: item.id,\n      highlighted: idx.value === highlightedIdx || undefined,\n      selected: isSelected<Item>(selected, item),\n      className: clsx({\n        focusVisible: focusVisible === idx.value,\n      }),\n    };\n\n    list.push(\n      <TreeNode\n        {...propsCommonToAllListItems}\n        {...itemProps}\n        label={item.label}\n      >\n        {/* {item.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n      </TreeNode>,\n    );\n    idx.value += 1;\n  }\n\n  function addGroupNode(\n    list: ReactElement[],\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer,\n    id: string,\n    title: string,\n  ) {\n    const { value: i } = idx;\n    const item = items[i];\n    idx.value += 1;\n    list.push(\n      <TreeNode\n        {...defaultItemHandlers}\n        {...listItemHandlers}\n        aria-disabled={disabled || item.disabled}\n        aria-expanded={item.expanded}\n        aria-level={item.level}\n        className={clsx({\n          focusVisible: focusVisible === i,\n          [withBaseName(\"toggle\")]: !allowGroupSelect,\n        })}\n        // data-icon={child.icon}\n        data-idx={i}\n        data-selectable\n        description={item.description}\n        highlighted={i === highlightedIdx}\n        id={id}\n        key={`header-${i}`}\n        label={title}\n        selected={isSelected<Item>(selected, item)}\n      >\n        {item.expanded ? (\n          <ul className={withBaseName(\"child-nodes\")} role=\"group\">\n            {renderItems(items, idx, (item.level ?? 0) + 1)}\n          </ul>\n        ) : null}\n      </TreeNode>,\n    );\n  }\n\n  const renderItems = (\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    level = 1,\n  ): ReactElement[] => {\n    const listItems: ReactElement[] = [];\n    while (idx.value < items.length) {\n      const item = items[idx.value];\n      if (item.level != null && item.level < level) {\n        break;\n      }\n      if (item.childNodes != null && item.id != null && item.label != null) {\n        addGroupNode(listItems, items, idx, item.id, item.label);\n      } else {\n        addLeafNode(listItems, item, idx);\n      }\n    }\n\n    return listItems;\n  };\n\n  function renderEmpty() {\n    // if (emptyMessage || showEmptyMessage) {\n    //   return (\n    //     <span className={withBaseName(\"empty-message\")}>\n    //       {emptyMessage ?? defaultEmptyMessage}\n    //     </span>\n    //   );\n    // } else {\n    return null;\n    // }\n  }\n\n  const renderContent = () => {\n    if (collectionHook.data.length) {\n      return renderItems(collectionHook.data);\n    }\n    renderEmpty();\n  };\n\n  return (\n    <div\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listProps}\n      className={clsx(withBaseName(), className)}\n      id={`Tree-${id}`}\n      ref={useForkRef(rootRef, forwardedRef)}\n      style={{ ...styleProp, ...autoSize }}\n      tabIndex={0}\n    >\n      <ul\n        className={withBaseName(\"scrollingContentContainer\")}\n        ref={contentRef}\n        role=\"tree\"\n        // style={{ height: contentHeight }}\n      >\n        {renderContent()}\n      </ul>\n    </div>\n  );\n});\n"],"names":["Tree","treeCss","selected","id"],"mappings":"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"}
+{"version":3,"file":"Tree.js","sources":["../src/tree/Tree.tsx"],"sourcesContent":["import { makePrefixer, useForkRef, useIdMemo } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ForwardedRef,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  type CollectionIndexer,\n  type CollectionItem,\n  calcPreferredHeight,\n  closestListItemIndex,\n  GROUP_SELECTION_NONE,\n  isSelected,\n  type SelectHandler,\n  type SelectionChangeHandler,\n  type SelectionStrategy,\n  type SingleSelectionStrategy,\n  useAutoSizer,\n  useCollectionItems,\n} from \"../common-hooks\";\nimport treeCss from \"./Tree.css\";\nimport { TreeNode } from \"./TreeNode\";\nimport type { TreeProps } from \"./treeTypes\";\nimport { useTree } from \"./useTree\";\n\nconst withBaseName = makePrefixer(\"saltTree\");\n\nconst getSelectedItemsFromSource = (\n  source: any[],\n  selectionStrategy: SelectionStrategy,\n  result: any[] = [],\n) => {\n  const isSingleSelection =\n    selectionStrategy === \"default\" || selectionStrategy === \"deselectable\";\n  for (const item of source) {\n    if (item.selected === true) {\n      result.push(item);\n      if (isSingleSelection) {\n        break;\n      }\n    }\n    if (item.childNodes) {\n      getSelectedItemsFromSource(item.childNodes, selectionStrategy, result);\n      if (isSingleSelection && result.length === 1) {\n        break;\n      }\n    }\n  }\n\n  return isSingleSelection ? result[0] : result.length > 0 ? result : undefined;\n};\n\nexport const Tree = forwardRef(function Tree<\n  Item,\n  Selection extends SelectionStrategy = \"deselectable\",\n>(\n  {\n    className,\n    defaultSelected,\n    disabled,\n    groupSelection = GROUP_SELECTION_NONE,\n    height,\n    id: idProp,\n    onHighlight,\n    onToggle,\n    onSelect,\n    onSelectionChange,\n    revealSelected,\n    selected: selectedProp,\n    selectionStrategy,\n    source,\n    style: styleProp,\n    width,\n    ...htmlAttributes\n  }: TreeProps<Item, Selection>,\n  forwardedRef?: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree\",\n    css: treeCss,\n    window: targetWindow,\n  });\n\n  const id = useIdMemo(idProp);\n  const rootRef = useRef(null);\n  const contentRef = useRef(null);\n\n  const collectionHook = useCollectionItems<Item>({\n    id,\n    source,\n    options: {\n      noChildrenLabel: \"No children available\",\n      revealSelected: revealSelected\n        ? Boolean(selectedProp) || Boolean(defaultSelected) || false\n        : undefined,\n    },\n  });\n\n  //------------- from original List\n  const preferredHeight =\n    height ??\n    calcPreferredHeight({\n      displayedItemCount: 10,\n      itemCount: collectionHook.data.length,\n      itemHeight: 36,\n      // getItemHeight,\n      // itemGapSize,\n    });\n\n  const autoSize = useAutoSizer<HTMLDivElement>({\n    containerRef: rootRef,\n    responsive: width === undefined || height === undefined,\n    height: preferredHeight,\n    width,\n  });\n  //---------------\n\n  const handleSelect = useCallback<SelectHandler<CollectionItem<Item>>>(\n    (evt, selectedItem) => {\n      if (onSelect) {\n        if (isValidElement(selectedItem.value)) {\n          onSelect(evt, selectedItem.label as any);\n        } else if (selectedItem.value !== null) {\n          onSelect(evt, selectedItem.value);\n        }\n      }\n    },\n    [onSelect],\n  );\n\n  const handleSelectionChange = useCallback<\n    SelectionChangeHandler<CollectionItem<Item>, Selection>\n  >(\n    (evt, selected) => {\n      type returnType = Selection extends SingleSelectionStrategy\n        ? Item | null\n        : Item[];\n      if (onSelectionChange) {\n        onSelectionChange(\n          evt,\n          Array.isArray(selected)\n            ? (selected.map((s) => s.value) as returnType)\n            : selected && (selected.value as returnType),\n        );\n      }\n    },\n    [onSelectionChange],\n  );\n\n  // const getSelected = (\n  //   sel: Item | null | Item[]\n  // ):\n  //   | undefined\n  //   | (Selection extends SingleSelectionStrategy\n  //       ? CollectionItem<Item> | null\n  //       : CollectionItem<Item>[]) => {\n  //   if (sel !== undefined) {\n  //     return collectionHook.itemToCollectionItem<Selection, typeof sel>(sel);\n  //   } else if (Array.isArray(source)) {\n  //     const selected = getSelectedItemsFromSource(\n  //       source,\n  //       selectionStrategy ?? \"default\"\n  //     );\n  //     return Array.isArray(selected)\n  //       ? collectionHook.itemToCollectionItem(selected)\n  //       : selected\n  //       ? collectionHook.toCollectionItem(selected)\n  //       : undefined;\n  //   }\n  // };\n\n  const {\n    focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected,\n  } = useTree<Item, Selection>({\n    collectionHook,\n    containerRef: rootRef,\n    contentRef,\n    // Note this isn't enough for a Tree, because of nested structure\n    defaultSelected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof defaultSelected\n    >(defaultSelected),\n    disabled,\n    groupSelection,\n    onHighlight,\n    onSelect: handleSelect,\n    onSelectionChange: handleSelectionChange,\n    onToggle,\n    selected: collectionHook.itemToCollectionItem<\n      Selection,\n      typeof selectedProp\n    >(selectedProp),\n    selectionStrategy,\n  });\n\n  // TODO move into useTree (see useList)\n  const defaultItemHandlers = {\n    onMouseEnter: (evt: MouseEvent) => {\n      // if (!isScrolling.current) {\n      const idx = closestListItemIndex(evt.target as HTMLElement);\n      if (idx != null) {\n        highlightItemAtIndex(idx);\n      }\n      // onMouseEnterListItem && onMouseEnterListItem(evt, idx);\n      // }\n    },\n  };\n\n  const propsCommonToAllListItems = {\n    ...defaultItemHandlers,\n    ...listItemHandlers,\n    isLeaf: true,\n    role: \"treeitem\",\n  };\n  // const allowGroupSelect = groupSelectionEnabled(groupSelection);\n  const allowGroupSelect = false;\n\n  /**\n   * Add a ListItem from source item\n   */\n  function addLeafNode(\n    list: ReactElement[],\n    item: CollectionItem<Item>,\n    idx: CollectionIndexer,\n  ) {\n    const itemProps = {\n      \"aria-disabled\": disabled || item.disabled,\n      \"aria-level\": item.level,\n      \"data-idx\": idx.value,\n      description: item.description,\n      id: item.id,\n      key: item.id,\n      highlighted: idx.value === highlightedIdx || undefined,\n      selected: isSelected<Item>(selected, item),\n      className: clsx({\n        focusVisible: focusVisible === idx.value,\n      }),\n    };\n\n    list.push(\n      <TreeNode\n        {...propsCommonToAllListItems}\n        {...itemProps}\n        label={item.label}\n      >\n        {/* {item.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n      </TreeNode>,\n    );\n    idx.value += 1;\n  }\n\n  function addGroupNode(\n    list: ReactElement[],\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer,\n    id: string,\n    title: string,\n  ) {\n    const { value: i } = idx;\n    const item = items[i];\n    idx.value += 1;\n    list.push(\n      <TreeNode\n        {...defaultItemHandlers}\n        {...listItemHandlers}\n        aria-disabled={disabled || item.disabled}\n        aria-expanded={item.expanded}\n        aria-level={item.level}\n        className={clsx({\n          focusVisible: focusVisible === i,\n          [withBaseName(\"toggle\")]: !allowGroupSelect,\n        })}\n        // data-icon={child.icon}\n        data-idx={i}\n        data-selectable\n        description={item.description}\n        highlighted={i === highlightedIdx}\n        id={id}\n        key={`header-${i}`}\n        label={title}\n        selected={isSelected<Item>(selected, item)}\n      >\n        {item.expanded ? (\n          <ul className={withBaseName(\"child-nodes\")} role=\"group\">\n            {renderItems(items, idx, (item.level ?? 0) + 1)}\n          </ul>\n        ) : null}\n      </TreeNode>,\n    );\n  }\n\n  const renderItems = (\n    items: CollectionItem<Item>[],\n    idx: CollectionIndexer = { value: 0 },\n    level = 1,\n  ): ReactElement[] => {\n    const listItems: ReactElement[] = [];\n    while (idx.value < items.length) {\n      const item = items[idx.value];\n      if (item.level != null && item.level < level) {\n        break;\n      }\n      if (item.childNodes != null && item.id != null && item.label != null) {\n        addGroupNode(listItems, items, idx, item.id, item.label);\n      } else {\n        addLeafNode(listItems, item, idx);\n      }\n    }\n\n    return listItems;\n  };\n\n  function renderEmpty() {\n    // if (emptyMessage || showEmptyMessage) {\n    //   return (\n    //     <span className={withBaseName(\"empty-message\")}>\n    //       {emptyMessage ?? defaultEmptyMessage}\n    //     </span>\n    //   );\n    // } else {\n    return null;\n    // }\n  }\n\n  const renderContent = () => {\n    if (collectionHook.data.length) {\n      return renderItems(collectionHook.data);\n    }\n    renderEmpty();\n  };\n\n  return (\n    <div\n      {...htmlAttributes}\n      {...listHandlers}\n      {...listProps}\n      className={clsx(withBaseName(), className)}\n      id={`Tree-${id}`}\n      ref={useForkRef(rootRef, forwardedRef)}\n      style={{ ...styleProp, ...autoSize }}\n      tabIndex={0}\n    >\n      <ul\n        className={withBaseName(\"scrollingContentContainer\")}\n        ref={contentRef}\n        role=\"tree\"\n        // style={{ height: contentHeight }}\n      >\n        {renderContent()}\n      </ul>\n    </div>\n  );\n});\n"],"names":["Tree","treeCss","selected","id"],"mappings":"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"}

package/dist-es/tree/TreeNode.js

@@ -1,9 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { TriangleRightIcon } from '@salt-ds/icons';
-import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
+import { TriangleRightIcon } from '@salt-ds/icons';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
 import css_248z from './TreeNode.css.js';
 
 const withBaseName = makePrefixer("saltTreeNode");

package/dist-es/tree/TreeNode.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.js","sources":["../src/tree/TreeNode.tsx"],"sourcesContent":["import { TriangleRightIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport type { HTMLAttributes, MouseEventHandler, ReactNode } from \"react\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport treeNodeCss from \"./TreeNode.css\";\n\nconst withBaseName = makePrefixer(\"saltTreeNode\");\nexport interface TreeNodeProps\n  extends Omit<HTMLAttributes<HTMLLIElement>, \"onMouseEnter\"> {\n  children?: ReactNode;\n  description?: string;\n  highlighted?: boolean;\n  idx?: number;\n  isLeaf?: boolean;\n  label?: string;\n  onMouseEnter?: MouseEventHandler;\n  selected?: boolean;\n}\n\nexport const TreeNode = ({\n  \"aria-level\": ariaLevel,\n  children,\n  className: classNameProp,\n  description,\n  highlighted,\n  idx,\n  isLeaf = false,\n  label,\n  onMouseEnter,\n  selected,\n  ...props\n}: TreeNodeProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node\",\n    css: treeNodeCss,\n    window: targetWindow,\n  });\n\n  const className = clsx(withBaseName(), classNameProp, {\n    [withBaseName(\"highlighted\")]: highlighted,\n  });\n\n  return (\n    <li {...props} className={className} role=\"presentation\">\n      <div\n        aria-level={ariaLevel}\n        aria-selected={selected || undefined}\n        className={withBaseName(\"item\")}\n        onMouseEnter={onMouseEnter}\n        role=\"treeitem\"\n      >\n        {isLeaf === false ? (\n          <span className={withBaseName(\"toggle\")} data-toggle={true}>\n            <TriangleRightIcon />\n          </span>\n        ) : null}\n        <div className={withBaseName(\"label\")}>\n          {/* {child.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n          {label}\n        </div>\n        {description !== undefined ? (\n          <div className={withBaseName(\"description\")}>{description}</div>\n        ) : null}\n      </div>\n      {children}\n    </li>\n  );\n};\n"],"names":["treeNodeCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAazC,MAAM,WAAW,CAAC;AAAA,EACvB,YAAc,EAAA,SAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAS,GAAA,KAAA;AAAA,EACT,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,IACpD,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG;AAAA,GAChC,CAAA;AAED,EAAA,4BACG,IAAI,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAsB,MAAK,cACxC,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAe,QAAY,IAAA,MAAA;AAAA,QAC3B,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC9B,YAAA;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,MAAA,KAAW,KACV,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,CAAG,EAAA,aAAA,EAAa,IACpD,EAAA,QAAA,kBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,CAAA,EACrB,CACE,GAAA,IAAA;AAAA,8BACH,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAEjC,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,UACC,WAAA,KAAgB,yBACd,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,aAAa,CAAI,EAAA,QAAA,EAAA,WAAA,EAAY,CACxD,GAAA;AAAA;AAAA;AAAA,KACN;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"TreeNode.js","sources":["../src/tree/TreeNode.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { TriangleRightIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { HTMLAttributes, MouseEventHandler, ReactNode } from \"react\";\n\nimport treeNodeCss from \"./TreeNode.css\";\n\nconst withBaseName = makePrefixer(\"saltTreeNode\");\nexport interface TreeNodeProps\n  extends Omit<HTMLAttributes<HTMLLIElement>, \"onMouseEnter\"> {\n  children?: ReactNode;\n  description?: string;\n  highlighted?: boolean;\n  idx?: number;\n  isLeaf?: boolean;\n  label?: string;\n  onMouseEnter?: MouseEventHandler;\n  selected?: boolean;\n}\n\nexport const TreeNode = ({\n  \"aria-level\": ariaLevel,\n  children,\n  className: classNameProp,\n  description,\n  highlighted,\n  idx,\n  isLeaf = false,\n  label,\n  onMouseEnter,\n  selected,\n  ...props\n}: TreeNodeProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-tree-node\",\n    css: treeNodeCss,\n    window: targetWindow,\n  });\n\n  const className = clsx(withBaseName(), classNameProp, {\n    [withBaseName(\"highlighted\")]: highlighted,\n  });\n\n  return (\n    <li {...props} className={className} role=\"presentation\">\n      <div\n        aria-level={ariaLevel}\n        aria-selected={selected || undefined}\n        className={withBaseName(\"item\")}\n        onMouseEnter={onMouseEnter}\n        role=\"treeitem\"\n      >\n        {isLeaf === false ? (\n          <span className={withBaseName(\"toggle\")} data-toggle={true}>\n            <TriangleRightIcon />\n          </span>\n        ) : null}\n        <div className={withBaseName(\"label\")}>\n          {/* {child.icon ? <span className={`${classBase}Node-icon`} /> : null} */}\n          {label}\n        </div>\n        {description !== undefined ? (\n          <div className={withBaseName(\"description\")}>{description}</div>\n        ) : null}\n      </div>\n      {children}\n    </li>\n  );\n};\n"],"names":["treeNodeCss"],"mappings":";;;;;;;;AASA,MAAM,YAAA,GAAe,aAAa,cAAc,CAAA;AAazC,MAAM,WAAW,CAAC;AAAA,EACvB,YAAc,EAAA,SAAA;AAAA,EACd,QAAA;AAAA,EACA,SAAW,EAAA,aAAA;AAAA,EACX,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAA;AAAA,EACA,MAAS,GAAA,KAAA;AAAA,EACT,KAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,IACpD,CAAC,YAAA,CAAa,aAAa,CAAC,GAAG;AAAA,GAChC,CAAA;AAED,EAAA,4BACG,IAAI,EAAA,EAAA,GAAG,KAAO,EAAA,SAAA,EAAsB,MAAK,cACxC,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAe,QAAY,IAAA,MAAA;AAAA,QAC3B,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC9B,YAAA;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,MAAA,KAAW,KACV,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,QAAQ,CAAG,EAAA,aAAA,EAAa,IACpD,EAAA,QAAA,kBAAA,GAAA,CAAC,iBAAkB,EAAA,EAAA,CAAA,EACrB,CACE,GAAA,IAAA;AAAA,8BACH,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,OAAO,GAEjC,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,UACC,WAAA,KAAgB,yBACd,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,aAAa,CAAI,EAAA,QAAA,EAAA,WAAA,EAAY,CACxD,GAAA;AAAA;AAAA;AAAA,KACN;AAAA,IACC;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/tree/useTree.js

@@ -1,9 +1,9 @@
 import { useRef, useCallback } from 'react';
-import '@salt-ds/core';
 import '../common-hooks/collectionProvider.js';
 import '../common-hooks/keyUtils.js';
-import { useCollapsibleGroups } from '../common-hooks/useCollapsibleGroups.js';
 import { closestListItemIndex } from '../common-hooks/list-dom-utils.js';
+import '@salt-ds/core';
+import { useCollapsibleGroups } from '../common-hooks/useCollapsibleGroups.js';
 import { useKeyboardNavigation } from '../common-hooks/useKeyboardNavigation.js';
 import { useSelection } from '../common-hooks/useSelection.js';
 import { useViewportTracking } from '../common-hooks/useViewportTracking.js';

package/dist-es/tree/useTree.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type MouseEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  type ListHandlers,\n  type SelectionStrategy,\n  closestListItemIndex,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useViewportTracking,\n} from \"../common-hooks\";\nimport type { ListControlProps } from \"../list/listTypes\";\nimport type { TreeHookProps, TreeHookResult } from \"./treeTypes\";\nimport { useKeyboardNavigation as useTreeNavigation } from \"./use-tree-keyboard-navigation\";\n\nexport const useTree = <Item, Selection extends SelectionStrategy = \"default\">({\n  collectionHook,\n  containerRef,\n  contentRef = containerRef,\n  defaultSelected,\n  disabled,\n  onSelect,\n  onSelectionChange,\n  onToggle,\n  onHighlight: onHighlightProp,\n  selected: selectedProp,\n  selectionStrategy,\n}: // totalItemCount,\nTreeHookProps<Item, Selection>): TreeHookResult<Item, Selection> => {\n  const lastSelection = useRef(selectedProp || defaultSelected);\n\n  const handleKeyboardNavigation = (\n    evt: KeyboardEvent<HTMLElement>,\n    nextIdx: number,\n  ) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n  };\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigation<Item, Selection>({\n      containerRef,\n      indexPositions: collectionHook.data,\n      onHighlight: onHighlightProp,\n      onKeyboardNavigation: handleKeyboardNavigation,\n      selected: lastSelection.current,\n    });\n\n  const collapsibleHook = useCollapsibleGroups<Item>({\n    collapsibleHeaders: true,\n    collectionHook,\n    highlightedIdx,\n    onToggle,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected,\n    // groupSelection,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n    onSelect,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy: selectionStrategy,\n  });\n\n  const treeNavigationHook = useTreeNavigation<Item>({\n    collectionHook,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n  });\n\n  const handleClick = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      collapsibleHook?.onClick?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onClick?.(evt);\n      }\n    },\n    [collapsibleHook, selectionHook],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      keyboardHook.listProps.onKeyDown?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook?.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        treeNavigationHook.listHandlers.onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook.onKeyDown,\n      keyboardHook.listProps,\n      selectionHook.listHandlers,\n      treeNavigationHook.listHandlers,\n    ],\n  );\n\n  // This is only appropriate when we are directly controlling a List,\n  // not when a control is manipulating the list\n  const { isScrolling } = useViewportTracking({\n    containerRef,\n    contentRef,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n  });\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      if (!isScrolling.current && !disabled) {\n        keyboardHook.listProps.onMouseMove();\n        const idx = closestListItemIndex(evt.target as HTMLElement);\n        if (idx !== undefined && idx !== highlightedIdx) {\n          const item = collectionHook.data[idx];\n          if (item.disabled) {\n            keyboardHook.setHighlightedIndex(-1);\n          } else {\n            keyboardHook.setHighlightedIndex(idx);\n          }\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      disabled,\n      keyboardHook.setHighlightedIndex,\n      highlightedIdx,\n      isScrolling,\n    ],\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIdx === undefined || highlightedIdx === -1\n      ? undefined\n      : collectionHook.data[highlightedIdx]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const listProps: ListControlProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: keyboardHook.listProps.onBlur,\n    onFocus: keyboardHook.listProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,\n    onMouseLeave: keyboardHook.listProps.onMouseLeave,\n  };\n\n  const listHandlers: ListHandlers = /*listHandlersProp || */ {\n    onClick: handleClick,\n    // MouseEnter would be much better for this. There is a bug in Cypress\n    // wheby it emits spurious MouseEnter (and MouseOver) events around\n    // keypress events, which break many tests.\n    onMouseMove: handleMouseMove,\n  };\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected: selectionHook.selected,\n    setSelected: selectionHook.setSelected,\n  };\n};\n"],"names":["useTreeNavigation"],"mappings":"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"}
+{"version":3,"file":"useTree.js","sources":["../src/tree/useTree.ts"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type MouseEvent,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  closestListItemIndex,\n  type ListHandlers,\n  type SelectionStrategy,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useViewportTracking,\n} from \"../common-hooks\";\nimport type { ListControlProps } from \"../list/listTypes\";\nimport type { TreeHookProps, TreeHookResult } from \"./treeTypes\";\nimport { useKeyboardNavigation as useTreeNavigation } from \"./use-tree-keyboard-navigation\";\n\nexport const useTree = <Item, Selection extends SelectionStrategy = \"default\">({\n  collectionHook,\n  containerRef,\n  contentRef = containerRef,\n  defaultSelected,\n  disabled,\n  onSelect,\n  onSelectionChange,\n  onToggle,\n  onHighlight: onHighlightProp,\n  selected: selectedProp,\n  selectionStrategy,\n}: // totalItemCount,\nTreeHookProps<Item, Selection>): TreeHookResult<Item, Selection> => {\n  const lastSelection = useRef(selectedProp || defaultSelected);\n\n  const handleKeyboardNavigation = (\n    evt: KeyboardEvent<HTMLElement>,\n    nextIdx: number,\n  ) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIdx);\n  };\n\n  const { highlightedIndex: highlightedIdx, ...keyboardHook } =\n    useKeyboardNavigation<Item, Selection>({\n      containerRef,\n      indexPositions: collectionHook.data,\n      onHighlight: onHighlightProp,\n      onKeyboardNavigation: handleKeyboardNavigation,\n      selected: lastSelection.current,\n    });\n\n  const collapsibleHook = useCollapsibleGroups<Item>({\n    collapsibleHeaders: true,\n    collectionHook,\n    highlightedIdx,\n    onToggle,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected,\n    // groupSelection,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n    onSelect,\n    onSelectionChange,\n    selected: selectedProp,\n    selectionStrategy: selectionStrategy,\n  });\n\n  const treeNavigationHook = useTreeNavigation<Item>({\n    collectionHook,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n  });\n\n  const handleClick = useCallback(\n    (evt: MouseEvent<HTMLElement>) => {\n      collapsibleHook?.onClick?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onClick?.(evt);\n      }\n    },\n    [collapsibleHook, selectionHook],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      keyboardHook.listProps.onKeyDown?.(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook?.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        treeNavigationHook.listHandlers.onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook.onKeyDown,\n      keyboardHook.listProps,\n      selectionHook.listHandlers,\n      treeNavigationHook.listHandlers,\n    ],\n  );\n\n  // This is only appropriate when we are directly controlling a List,\n  // not when a control is manipulating the list\n  const { isScrolling } = useViewportTracking({\n    containerRef,\n    contentRef,\n    highlightedIdx,\n    indexPositions: collectionHook.data,\n  });\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      if (!isScrolling.current && !disabled) {\n        keyboardHook.listProps.onMouseMove();\n        const idx = closestListItemIndex(evt.target as HTMLElement);\n        if (idx !== undefined && idx !== highlightedIdx) {\n          const item = collectionHook.data[idx];\n          if (item.disabled) {\n            keyboardHook.setHighlightedIndex(-1);\n          } else {\n            keyboardHook.setHighlightedIndex(idx);\n          }\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      disabled,\n      keyboardHook.setHighlightedIndex,\n      highlightedIdx,\n      isScrolling,\n    ],\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIdx === undefined || highlightedIdx === -1\n      ? undefined\n      : collectionHook.data[highlightedIdx]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const listProps: ListControlProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: keyboardHook.listProps.onBlur,\n    onFocus: keyboardHook.listProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDownCapture: keyboardHook.listProps.onMouseDownCapture,\n    onMouseLeave: keyboardHook.listProps.onMouseLeave,\n  };\n\n  const listHandlers: ListHandlers = /*listHandlersProp || */ {\n    onClick: handleClick,\n    // MouseEnter would be much better for this. There is a bug in Cypress\n    // wheby it emits spurious MouseEnter (and MouseOver) events around\n    // keypress events, which break many tests.\n    onMouseMove: handleMouseMove,\n  };\n\n  const listItemHandlers = {\n    onClick: handleClick,\n  };\n\n  return {\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx,\n    highlightItemAtIndex: keyboardHook.setHighlightedIndex,\n    listHandlers,\n    listProps,\n    listItemHandlers,\n    selected: selectionHook.selected,\n    setSelected: selectionHook.setSelected,\n  };\n};\n"],"names":["useTreeNavigation"],"mappings":"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"}

package/dist-es/utils/useEventCallback.js

@@ -8,7 +8,7 @@ function useEventCallback(fn) {
   });
   return useCallback(
     (...args) => (
-      // biome-ignore lint/style/noCommaOperator: This is a valid use case for the comma operator
+      // biome-ignore lint/complexity/noCommaOperator: This is a valid use case for the comma operator
       (0, ref.current)(...args)
     ),
     []

package/dist-es/utils/useEventCallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEventCallback.js","sources":["../src/utils/useEventCallback.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useRef } from \"react\";\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const ref = useRef(fn);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n  return useCallback(\n    (...args: Args) =>\n      // biome-ignore lint/style/noCommaOperator: This is a valid use case for the comma operator\n      (void 0, ref.current)(...args),\n    [],\n  );\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,iBACd,EAC2B,EAAA;AAC3B,EAAM,MAAA,GAAA,GAAM,OAAO,EAAE,CAAA;AACrB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,GAAA,CAAI,OAAU,GAAA,EAAA;AAAA,GACf,CAAA;AACD,EAAO,OAAA,WAAA;AAAA,IACL,CAAI,GAAA,IAAA;AAAA;AAAA,MAAA,IAEO,GAAA,CAAI,OAAS,EAAA,GAAG,IAAI;AAAA,KAAA;AAAA,IAC/B;AAAC,GACH;AACF;;;;"}
+{"version":3,"file":"useEventCallback.js","sources":["../src/utils/useEventCallback.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCallback, useRef } from \"react\";\n\n/**\n * https://github.com/facebook/react/issues/14099#issuecomment-440013892\n */\nexport function useEventCallback<Args extends unknown[], Return>(\n  fn: (...args: Args) => Return,\n): (...args: Args) => Return {\n  const ref = useRef(fn);\n  useIsomorphicLayoutEffect(() => {\n    ref.current = fn;\n  });\n  return useCallback(\n    (...args: Args) =>\n      // biome-ignore lint/complexity/noCommaOperator: This is a valid use case for the comma operator\n      (void 0, ref.current)(...args),\n    [],\n  );\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,iBACd,EAC2B,EAAA;AAC3B,EAAM,MAAA,GAAA,GAAM,OAAO,EAAE,CAAA;AACrB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,GAAA,CAAI,OAAU,GAAA,EAAA;AAAA,GACf,CAAA;AACD,EAAO,OAAA,WAAA;AAAA,IACL,CAAI,GAAA,IAAA;AAAA;AAAA,MAAA,IAEO,GAAA,CAAI,OAAS,EAAA,GAAG,IAAI;AAAA,KAAA;AAAA,IAC/B;AAAC,GACH;AACF;;;;"}

package/dist-es/window/ElectronWindow.js

@@ -1,12 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { useForkRef, useIsomorphicLayoutEffect, SaltProvider } from '@salt-ds/core';
-import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
-import ReactDOM from 'react-dom';
-import { Window as Window$1, isDesktop } from './WindowContext.js';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
-import css_248z from './ElectronWindow.css.js';
+import { forwardRef, useState, useRef, useCallback, useEffect } from 'react';
+import ReactDOM from 'react-dom';
 import { useWindowParentContext, WindowParentContext } from './desktop-utils.js';
+import css_248z from './ElectronWindow.css.js';
+import { Window as Window$1, isDesktop } from './WindowContext.js';
 
 const Window = forwardRef(function ElectronWindow2({ className, children, id = "dialog", open = true, style = {}, ...rest }, forwardedRef) {
   const { top, left, position, ...styleRest } = style;

package/dist-es/window/ElectronWindow.js.map

@@ -1 +1 @@
-{"version":3,"file":"ElectronWindow.js","sources":["../src/window/ElectronWindow.tsx"],"sourcesContent":["import {\n  SaltProvider,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport {\n  Window as SaltWindow,\n  type WindowProps,\n  isDesktop,\n} from \"./WindowContext\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport electronWindowCss from \"./ElectronWindow.css\";\nimport { WindowParentContext, useWindowParentContext } from \"./desktop-utils\";\n\nconst Window = forwardRef<HTMLDivElement, WindowProps>(function ElectronWindow(\n  { className, children, id = \"dialog\", open = true, style = {}, ...rest },\n  forwardedRef,\n): JSX.Element | null {\n  const { top, left, position, ...styleRest } = style;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-electron-window\",\n    css: electronWindowCss,\n    window: targetWindow,\n  });\n\n  const [mountNode, setMountNode] = useState<Element | null>(null);\n  const windowRoot = useRef<HTMLDivElement>(null);\n\n  const forkedRef = useForkRef(forwardedRef, windowRoot);\n\n  if (!mountNode) {\n    const win = window.open(\"\", id);\n    win?.document.write(\n      `<html lang=\"en\"><head><title>${id}</title><base href=\"${location.origin}\"><style>body {margin: 0;}</style></head><body></body></html>`,\n    );\n    document.head.querySelectorAll(\"style\").forEach((htmlElement) => {\n      (win as Window).document.head.appendChild(htmlElement.cloneNode(true));\n    });\n    const bodyElement = (win as Window).document.body;\n    setMountNode(bodyElement);\n  }\n\n  const parentWindow = useWindowParentContext();\n\n  const closeWindow = useCallback(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n    const { ipcRenderer } = global as any;\n    if (ipcRenderer) {\n      ipcRenderer.send(\"window-close\", { id: id });\n    }\n  }, [id]);\n\n  // The timeout is required to give the Dialog component time to report the correct height\n  // otherwise the window will be smaller than expected\n  useEffect(() => {\n    setTimeout(() => {\n      if (windowRoot.current) {\n        const { scrollHeight: height, scrollWidth: width } = windowRoot.current;\n        // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n        const { ipcRenderer } = global as any;\n        if (ipcRenderer) {\n          ipcRenderer.send(\"window-size\", {\n            id: id,\n            height: Math.ceil(height + 1),\n            width: Math.ceil(width + 1),\n          });\n        }\n      }\n    }, 80);\n  });\n\n  // The timeout is required to allow the window time to be moved into position and scaled\n  // before being shown to the user,\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n    const { ipcRenderer } = global as any;\n    if (ipcRenderer) {\n      setTimeout(() => {\n        ipcRenderer.send(\"window-ready\", { id: id });\n      }, 100);\n    }\n\n    return () => {\n      closeWindow();\n    };\n  }, [closeWindow, id]);\n\n  // The timeout is required to give the Dialog component time to report the correct height\n  // otherwise the window will be smaller than expected\n  useIsomorphicLayoutEffect(() => {\n    setTimeout(() => {\n      // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n      const { ipcRenderer } = global as any;\n      if (ipcRenderer) {\n        ipcRenderer.send(\"window-position\", {\n          id: id,\n          parentWindowID: parentWindow.id,\n          left: style.left,\n          top: style.top,\n        });\n      }\n    }, 90);\n  }, [style, id, parentWindow.id]);\n\n  return mountNode\n    ? ReactDOM.createPortal(\n        <SaltProvider>\n          <WindowParentContext.Provider\n            value={{\n              top: (style.top as number) + parentWindow.top,\n              left: (style.left as number) + parentWindow.left,\n              id: id,\n            }}\n          >\n            <div className=\"saltWindow\" ref={forkedRef}>\n              <div className={className} style={{ ...styleRest }} {...rest}>\n                {children}\n              </div>\n            </div>\n          </WindowParentContext.Provider>\n        </SaltProvider>,\n        mountNode,\n      )\n    : null;\n});\n\nexport const ElectronWindow = isDesktop ? Window : SaltWindow;\n"],"names":["ElectronWindow","electronWindowCss","SaltWindow"],"mappings":"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"}
+{"version":3,"file":"ElectronWindow.js","sources":["../src/window/ElectronWindow.tsx"],"sourcesContent":["import {\n  SaltProvider,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef, useCallback, useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { useWindowParentContext, WindowParentContext } from \"./desktop-utils\";\nimport electronWindowCss from \"./ElectronWindow.css\";\nimport {\n  isDesktop,\n  Window as SaltWindow,\n  type WindowProps,\n} from \"./WindowContext\";\n\nconst Window = forwardRef<HTMLDivElement, WindowProps>(function ElectronWindow(\n  { className, children, id = \"dialog\", open = true, style = {}, ...rest },\n  forwardedRef,\n): JSX.Element | null {\n  const { top, left, position, ...styleRest } = style;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-electron-window\",\n    css: electronWindowCss,\n    window: targetWindow,\n  });\n\n  const [mountNode, setMountNode] = useState<Element | null>(null);\n  const windowRoot = useRef<HTMLDivElement>(null);\n\n  const forkedRef = useForkRef(forwardedRef, windowRoot);\n\n  if (!mountNode) {\n    const win = window.open(\"\", id);\n    win?.document.write(\n      `<html lang=\"en\"><head><title>${id}</title><base href=\"${location.origin}\"><style>body {margin: 0;}</style></head><body></body></html>`,\n    );\n    document.head.querySelectorAll(\"style\").forEach((htmlElement) => {\n      (win as Window).document.head.appendChild(htmlElement.cloneNode(true));\n    });\n    const bodyElement = (win as Window).document.body;\n    setMountNode(bodyElement);\n  }\n\n  const parentWindow = useWindowParentContext();\n\n  const closeWindow = useCallback(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n    const { ipcRenderer } = global as any;\n    if (ipcRenderer) {\n      ipcRenderer.send(\"window-close\", { id: id });\n    }\n  }, [id]);\n\n  // The timeout is required to give the Dialog component time to report the correct height\n  // otherwise the window will be smaller than expected\n  useEffect(() => {\n    setTimeout(() => {\n      if (windowRoot.current) {\n        const { scrollHeight: height, scrollWidth: width } = windowRoot.current;\n        // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n        const { ipcRenderer } = global as any;\n        if (ipcRenderer) {\n          ipcRenderer.send(\"window-size\", {\n            id: id,\n            height: Math.ceil(height + 1),\n            width: Math.ceil(width + 1),\n          });\n        }\n      }\n    }, 80);\n  });\n\n  // The timeout is required to allow the window time to be moved into position and scaled\n  // before being shown to the user,\n  useEffect(() => {\n    // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n    const { ipcRenderer } = global as any;\n    if (ipcRenderer) {\n      setTimeout(() => {\n        ipcRenderer.send(\"window-ready\", { id: id });\n      }, 100);\n    }\n\n    return () => {\n      closeWindow();\n    };\n  }, [closeWindow, id]);\n\n  // The timeout is required to give the Dialog component time to report the correct height\n  // otherwise the window will be smaller than expected\n  useIsomorphicLayoutEffect(() => {\n    setTimeout(() => {\n      // biome-ignore lint/suspicious/noExplicitAny: any is simpler here.\n      const { ipcRenderer } = global as any;\n      if (ipcRenderer) {\n        ipcRenderer.send(\"window-position\", {\n          id: id,\n          parentWindowID: parentWindow.id,\n          left: style.left,\n          top: style.top,\n        });\n      }\n    }, 90);\n  }, [style, id, parentWindow.id]);\n\n  return mountNode\n    ? ReactDOM.createPortal(\n        <SaltProvider>\n          <WindowParentContext.Provider\n            value={{\n              top: (style.top as number) + parentWindow.top,\n              left: (style.left as number) + parentWindow.left,\n              id: id,\n            }}\n          >\n            <div className=\"saltWindow\" ref={forkedRef}>\n              <div className={className} style={{ ...styleRest }} {...rest}>\n                {children}\n              </div>\n            </div>\n          </WindowParentContext.Provider>\n        </SaltProvider>,\n        mountNode,\n      )\n    : null;\n});\n\nexport const ElectronWindow = isDesktop ? Window : SaltWindow;\n"],"names":["ElectronWindow","electronWindowCss","SaltWindow"],"mappings":"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"}

package/dist-types/button-bar/ButtonBar.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes, type ReactNode } from "react";
 import { type ButtonVariant } from "@salt-ds/core";
+import { type HTMLAttributes, type ReactNode } from "react";
 export type PartialRecord<K extends keyof any, T> = Partial<Record<K, T>>;
 type ButtonBarOrderKey = "order" | "alignLeftOrder" | "stackOrder";
 export type ButtonBarSortOrder = "asc" | "desc";

package/dist-types/calendar/Calendar.d.ts

@@ -1,7 +1,7 @@
 import { type ResponsiveProp } from "@salt-ds/core";
-import { type ComponentPropsWithoutRef, type ReactNode } from "react";
-import { type UseCalendarMultiSelectProps, type UseCalendarOffsetProps, type UseCalendarRangeProps, type UseCalendarSingleProps } from "./useCalendar";
 import type { DateFrameworkType, Timezone } from "@salt-ds/date-adapters";
+import { type ComponentPropsWithoutRef, type ReactNode } from "react";
+import { type UseCalendarMultiselectOffsetProps, type UseCalendarMultiselectRangeProps, type UseCalendarMultiselectSingleProps, type UseCalendarOffsetProps, type UseCalendarRangeProps, type UseCalendarSingleProps } from "./useCalendar";
 /**
  * Base props for the Calendar component.
  */
@@ -31,6 +31,10 @@ export interface CalendarBaseProps extends ComponentPropsWithoutRef<"div"> {
      * - If set to a valid IANA timezone identifier, the time will be returned for that specific timezone.
      */
     timezone?: Timezone;
+    /**
+     * If `true`, the calendar will be multiselect.
+     */
+    multiselect?: boolean;
 }
 /**
  * Props for the Calendar component with single date selection.
@@ -42,6 +46,20 @@ export interface CalendarSingleProps<TDate extends DateFrameworkType> extends Ca
      */
     selectionVariant: "single";
 }
+/**
+ * Props for the Calendar component with multi-select, date selection.
+ * @template TDate - The type of the date object.
+ */
+export interface CalendarMultiselectSingleProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarMultiselectSingleProps<TDate> {
+    /**
+     * The selection variant, set to "single".
+     */
+    selectionVariant: "single";
+    /**
+     * Multiple selection
+     */
+    multiselect: true;
+}
 /**
  * Props for the Calendar component with date range selection.
  * @template TDate - The type of the date object.
@@ -53,14 +71,18 @@ export interface CalendarRangeProps<TDate extends DateFrameworkType> extends Cal
     selectionVariant: "range";
 }
 /**
- * Props for the Calendar component with multi-select date selection.
+ * Props for the Calendar component with multi-select, date range selection.
  * @template TDate - The type of the date object.
  */
-export interface CalendarMultiSelectProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarMultiSelectProps<TDate> {
+export interface CalendarMultiselectRangeProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarMultiselectRangeProps<TDate> {
     /**
-     * The selection variant, set to "multiselect".
+     * The selection variant, set to "single".
+     */
+    selectionVariant: "range";
+    /**
+     * Multiple selection
      */
-    selectionVariant: "multiselect";
+    multiselect: true;
 }
 /**
  * Props for the Calendar component with offset date selection.
@@ -72,9 +94,23 @@ export interface CalendarOffsetProps<TDate extends DateFrameworkType> extends Ca
      */
     selectionVariant: "offset";
 }
+/**
+ * Props for the Calendar component with multi-select, offset date selection.
+ * @template TDate - The type of the date object.
+ */
+export interface CalendarMultiselectOffsetProps<TDate extends DateFrameworkType> extends CalendarBaseProps, UseCalendarMultiselectOffsetProps<TDate> {
+    /**
+     * The selection variant, set to "offset".
+     */
+    selectionVariant: "offset";
+    /**
+     * Multiple selection
+     */
+    multiselect: true;
+}
 /**
  * Type representing the props for the Calendar component with various selection variants.
  * @template TDate - The type of the date object.
  */
-export type CalendarProps<TDate extends DateFrameworkType> = CalendarSingleProps<TDate> | CalendarRangeProps<TDate> | CalendarMultiSelectProps<TDate> | CalendarOffsetProps<TDate>;
+export type CalendarProps<TDate extends DateFrameworkType> = CalendarSingleProps<TDate> | CalendarMultiselectSingleProps<TDate> | CalendarRangeProps<TDate> | CalendarMultiselectRangeProps<TDate> | CalendarOffsetProps<TDate> | CalendarMultiselectOffsetProps<TDate>;
 export declare const Calendar: import("react").ForwardRefExoticComponent<CalendarProps<any> & import("react").RefAttributes<HTMLDivElement>>;

package/dist-types/calendar/CalendarGrid.d.ts

@@ -1,9 +1,9 @@
 import { type ResponsiveProp } from "@salt-ds/core";
-import { type ComponentPropsWithoutRef } from "react";
-import type { CalendarDayProps } from "./internal/CalendarDay";
 import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import { type ComponentPropsWithoutRef } from "react";
 import { type CalendarMonthHeaderProps } from "./CalendarMonthHeader";
 import { type CalendarWeekHeaderProps } from "./CalendarWeekHeader";
+import type { CalendarDayProps } from "./internal/CalendarDay";
 /**
  * Props for the CalendarGrid component.
  * @template TDate - The type of the date object.

package/dist-types/calendar/CalendarMonthHeader.d.ts

@@ -1,5 +1,5 @@
-import { type ComponentPropsWithRef } from "react";
 import type { DateFrameworkType } from "@salt-ds/date-adapters";
+import { type ComponentPropsWithRef } from "react";
 /**
  * Props for the CalendarMonthHeader component.
  * @template TDate - The type of the date object.

package/dist-types/calendar/index.d.ts

@@ -1,8 +1,8 @@
 export * from "./Calendar";
+export * from "./CalendarGrid";
 export * from "./CalendarNavigation";
 export * from "./CalendarWeekHeader";
-export * from "./CalendarGrid";
-export * from "./useCalendarDay";
+export type { CalendarDayProps, renderCalendarDayProps, } from "./internal/CalendarDay";
 export * from "./useCalendar";
+export * from "./useCalendarDay";
 export * from "./useCalendarSelection";
-export type { renderCalendarDayProps, CalendarDayProps, } from "./internal/CalendarDay";