@salt-ds/lab 1.0.0-alpha.53 → 1.0.0-alpha.55

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

@@ -9,13 +9,12 @@ const renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed
   let index = -1;
   const items = collectionHook.data.filter((item) => !item.isOverflowIndicator);
   return items.map((item) => {
-    var _a;
     index += 1;
     const props = item.element.props;
     const overflowed = overflowedItems.findIndex((i) => i.index === index) === -1 ? void 0 : true;
     const toolbarItemProps = {
       "data-index": index,
-      "data-priority": (_a = props["data-priority"]) != null ? _a : 2,
+      "data-priority": props["data-priority"] ?? 2,
       "data-overflowed": overflowed,
       id: item.id,
       orientation
@@ -28,25 +27,33 @@ const renderTrayTools = (collectionHook, overflowedItems, orientation, collapsed
     }
     if (Object.keys(props).some(isResponsiveAttribute)) {
       const [toolbarProps, restProps] = liftResponsivePropsToFormField(props);
-      return /* @__PURE__ */ createElement(ToolbarField, {
-        ...toolbarProps,
+      return /* @__PURE__ */ createElement(
+        ToolbarField,
+        {
+          ...toolbarProps,
+          ...toolbarItemProps,
+          "data-index": index,
+          "data-priority": 2,
+          key: index,
+          "data-orientation": orientation
+        },
+        cloneElement(item.element, { ...restProps })
+      );
+    }
+    return /* @__PURE__ */ createElement(
+      ToolbarField,
+      {
         ...toolbarItemProps,
         "data-index": index,
+        "data-overflowed": overflowed,
         "data-priority": 2,
         key: index,
         "data-orientation": orientation
-      }, cloneElement(item.element, { ...restProps }));
-    }
-    return /* @__PURE__ */ createElement(ToolbarField, {
-      ...toolbarItemProps,
-      "data-index": index,
-      "data-overflowed": overflowed,
-      "data-priority": 2,
-      key: index,
-      "data-orientation": orientation
-    }, cloneElement(item.element, {
-      id: `tooltray-control-${item.id}`
-    }));
+      },
+      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, { 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;;;;"}
+{"version":3,"file":"renderTrayTools.js","sources":["../src/toolbar/internal/renderTrayTools.tsx"],"sourcesContent":["import { type ReactNode, cloneElement } 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;AAAA;AAGV,EAAA,IAAI,KAAQ,GAAA,CAAA,CAAA;AAEZ,EAAM,MAAA,KAAA,GAAQ,eAAe,IAAK,CAAA,MAAA,CAAO,CAAC,IAAS,KAAA,CAAC,KAAK,mBAAmB,CAAA;AAE5E,EAAO,OAAA,KAAA,CAAM,GAAI,CAAA,CAAC,IAAS,KAAA;AACzB,IAAS,KAAA,IAAA,CAAA;AACT,IAAM,MAAA,KAAA,GAAQ,KAAK,OAAQ,CAAA,KAAA;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;AAEN,IAAA,MAAM,gBAAmB,GAAA;AAAA,MACvB,YAAc,EAAA,KAAA;AAAA,MACd,eAAA,EAAiB,KAAM,CAAA,eAAe,CAAK,IAAA,CAAA;AAAA,MAC3C,iBAAmB,EAAA,UAAA;AAAA,MACnB,IAAI,IAAK,CAAA,EAAA;AAAA,MACT;AAAA,KACF;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;AAAA,OACJ,CAAA;AAAA;AAEH,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;AACtE,MACE,uBAAA,aAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACE,GAAG,YAAA;AAAA,UACH,GAAG,gBAAA;AAAA,UAEJ,YAAY,EAAA,KAAA;AAAA,UACZ,eAAe,EAAA,CAAA;AAAA,UACf,GAAK,EAAA,KAAA;AAAA,UACL,kBAAkB,EAAA;AAAA,SAAA;AAAA,QAGjB,aAAa,IAAK,CAAA,OAAA,EAAS,EAAE,GAAG,WAAW;AAAA,OAC9C;AAAA;AAGJ,IACE,uBAAA,aAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACE,GAAG,gBAAA;AAAA,QACJ,YAAY,EAAA,KAAA;AAAA,QACZ,iBAAiB,EAAA,UAAA;AAAA,QACjB,eAAe,EAAA,CAAA;AAAA,QACf,GAAK,EAAA,KAAA;AAAA,QACL,kBAAkB,EAAA;AAAA,OAAA;AAAA,MAEjB,YAAA,CAAa,KAAK,OAAS,EAAA;AAAA,QAC1B,EAAA,EAAI,CAAoB,iBAAA,EAAA,IAAA,CAAK,EAAE,CAAA;AAAA,OAChC;AAAA,KACH;AAAA,GAEH,CAAA;AACH;;;;"}

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

@@ -66,50 +66,49 @@ const OverflowPanel = forwardRef(function DropdownPanel({
     setIsOpen(open);
     onOpenChange == null ? void 0 : onOpenChange(open);
   };
-  const getTriggerButtonIcon = () => (triggerButtonIcon != null ? triggerButtonIcon : triggerButtonLabel === void 0) ? /* @__PURE__ */ jsx(OverflowIcon, {}) : void 0;
-  return /* @__PURE__ */ jsxs(DropdownBase, {
-    ...props,
-    className: clsx(withBaseName(), className),
-    isOpen,
-    onOpenChange: handleOpenChange,
-    placement: "bottom-end",
-    ref: forwardedRef,
-    children: [
-      /* @__PURE__ */ jsxs(Button, {
-        variant: "secondary",
-        ref: triggerRef,
-        children: [
+  const getTriggerButtonIcon = () => triggerButtonIcon ?? triggerButtonLabel === void 0 ? /* @__PURE__ */ jsx(OverflowIcon, {}) : void 0;
+  return /* @__PURE__ */ jsxs(
+    DropdownBase,
+    {
+      ...props,
+      className: clsx(withBaseName(), className),
+      isOpen,
+      onOpenChange: handleOpenChange,
+      placement: "bottom-end",
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsxs(Button, { variant: "secondary", ref: triggerRef, children: [
           getTriggerButtonIcon(),
           triggerButtonLabel
-        ]
-      }),
-      /* @__PURE__ */ jsx("div", {
-        className: withBaseName("content"),
-        ref: setPanelRef,
-        tabIndex: -1,
-        ...keyboardHook.listProps,
-        children: collectionHook.data.map((item) => {
-          const { type } = item.value;
-          if (type === OverflowSeparator) {
-            return item.value;
+        ] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: withBaseName("content"),
+            ref: setPanelRef,
+            tabIndex: -1,
+            ...keyboardHook.listProps,
+            children: collectionHook.data.map((item) => {
+              const { type } = item.value;
+              if (type === OverflowSeparator) {
+                return item.value;
+              }
+              const formFieldProps = {
+                id: item.id,
+                inOverflowPanel: true,
+                key: item.id,
+                onClick: handleItemClick
+              };
+              if (type === ToolbarField) {
+                return cloneElement(item.value, formFieldProps);
+              }
+              return /* @__PURE__ */ createElement(ToolbarField, { ...formFieldProps, key: item.id }, item.value);
+            })
           }
-          const formFieldProps = {
-            id: item.id,
-            inOverflowPanel: true,
-            key: item.id,
-            onClick: handleItemClick
-          };
-          if (type === ToolbarField) {
-            return cloneElement(item.value, formFieldProps);
-          }
-          return /* @__PURE__ */ createElement(ToolbarField, {
-            ...formFieldProps,
-            key: item.id
-          }, item.value);
-        })
-      })
-    ]
-  });
+        )
+      ]
+    }
+  );
 });
 
 export { OverflowPanel };

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 { 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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"}

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

@@ -14,10 +14,7 @@ const OverflowSeparator = (props) => {
     css: css_248z,
     window: targetWindow
   });
-  return /* @__PURE__ */ jsx("div", {
-    className: clsx(withBaseName(), className),
-    ...rest
-  });
+  return /* @__PURE__ */ jsx("div", { className: clsx(withBaseName(), className), ...rest });
 };
 OverflowSeparator.defaultProps = {
   focusable: false

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

@@ -1 +1 @@
-{"version":3,"file":"OverflowSeparator.js","sources":["../src/toolbar/overflow-panel/OverflowSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { HTMLAttributes, ReactElement } from \"react\";\nimport overflowSeparatorCss from \"./OverflowSeparator.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowSeparator\");\n\nexport interface OverflowSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  children?: never;\n  focusable?: boolean;\n}\n\nexport const OverflowSeparator = (\n  props: OverflowSeparatorProps,\n): ReactElement => {\n  const { className, focusable, ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-separator\",\n    css: overflowSeparatorCss,\n    window: targetWindow,\n  });\n  return <div className={clsx(withBaseName(), className)} {...rest} />;\n};\n\nOverflowSeparator.defaultProps = {\n  focusable: false,\n};\n"],"names":["overflowSeparatorCss"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA,CAAA;AAO5C,MAAA,iBAAA,GAAoB,CAC/B,KACiB,KAAA;AACjB,EAAA,MAAM,EAAE,SAAA,EAAW,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAC1C,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AACD,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,IAAA;AAAA,GAAM,CAAA,CAAA;AACpE,EAAA;AAEA,iBAAA,CAAkB,YAAe,GAAA;AAAA,EAC/B,SAAW,EAAA,KAAA;AACb,CAAA;;;;"}
+{"version":3,"file":"OverflowSeparator.js","sources":["../src/toolbar/overflow-panel/OverflowSeparator.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport type { HTMLAttributes, ReactElement } from \"react\";\nimport overflowSeparatorCss from \"./OverflowSeparator.css\";\n\nconst withBaseName = makePrefixer(\"saltOverflowSeparator\");\n\nexport interface OverflowSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n  children?: never;\n  focusable?: boolean;\n}\n\nexport const OverflowSeparator = (\n  props: OverflowSeparatorProps,\n): ReactElement => {\n  const { className, focusable, ...rest } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-overflow-separator\",\n    css: overflowSeparatorCss,\n    window: targetWindow,\n  });\n  return <div className={clsx(withBaseName(), className)} {...rest} />;\n};\n\nOverflowSeparator.defaultProps = {\n  focusable: false,\n};\n"],"names":["overflowSeparatorCss"],"mappings":";;;;;;;AAOA,MAAM,YAAA,GAAe,aAAa,uBAAuB,CAAA;AAO5C,MAAA,iBAAA,GAAoB,CAC/B,KACiB,KAAA;AACjB,EAAA,MAAM,EAAE,SAAA,EAAW,SAAW,EAAA,GAAG,MAAS,GAAA,KAAA;AAC1C,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,yBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AACD,EAAO,uBAAA,GAAA,CAAC,SAAI,SAAW,EAAA,IAAA,CAAK,cAAgB,EAAA,SAAS,CAAI,EAAA,GAAG,IAAM,EAAA,CAAA;AACpE;AAEA,iBAAA,CAAkB,YAAe,GAAA;AAAA,EAC/B,SAAW,EAAA;AACb,CAAA;;;;"}

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

@@ -6,10 +6,7 @@ import '../../form-field-legacy/FormLabel.js';
 
 const ToolbarField = forwardRef(function ToolbarField2(props, forwardedRef) {
   const toolbarFieldProps = useToolbarField(props);
-  return /* @__PURE__ */ jsx(FormFieldLegacy, {
-    ...toolbarFieldProps,
-    ref: forwardedRef
-  });
+  return /* @__PURE__ */ jsx(FormFieldLegacy, { ...toolbarFieldProps, ref: forwardedRef });
 });
 ToolbarField.displayName = "ToolbarField";
 

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,CAAA;AAC/C,EAAA,uBAAQ,GAAA,CAAAC,eAAA,EAAA;AAAA,IAAW,GAAG,iBAAA;AAAA,IAAmB,GAAK,EAAA,YAAA;AAAA,GAAc,CAAA,CAAA;AAC9D,CAAC,EAAA;AAED,YAAA,CAAa,WAAc,GAAA,cAAA;;;;"}
+{"version":3,"file":"ToolbarField.js","sources":["../src/toolbar/toolbar-field/ToolbarField.tsx"],"sourcesContent":["import { type ForwardedRef, forwardRef } from \"react\";\nimport 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;;;;"}

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

@@ -55,7 +55,7 @@ const useToolbarField = (props) => {
   } = props;
   const childElementName = getChildElementName(props.children);
   const { className, ActivationIndicatorComponent, ...calculatedProps } = getToolbarFormFieldProps(props.children, inOverflowPanel);
-  const labelPlacement = labelPlacementProp != null ? labelPlacementProp : inOverflowPanel ? "top" : "left";
+  const labelPlacement = labelPlacementProp ?? (inOverflowPanel ? "top" : "left");
   const handleClick = useCallback(
     (e) => {
       if (onClick && !InteractiveComponents.includes(childElementName)) {
@@ -65,7 +65,7 @@ const useToolbarField = (props) => {
     [childElementName, onClick]
   );
   return {
-    ActivationIndicatorComponent: ActivationIndicatorComponentProp != null ? ActivationIndicatorComponentProp : ActivationIndicatorComponent,
+    ActivationIndicatorComponent: ActivationIndicatorComponentProp ?? ActivationIndicatorComponent,
     className: clsx("saltToolbarField", classNameProp, className),
     labelPlacement,
     onClick: handleClick,

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  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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"}

package/dist-es/tree/Tree.js

@@ -54,10 +54,12 @@ const Tree = forwardRef(function Tree2({
       revealSelected: revealSelected ? Boolean(selectedProp) || Boolean(defaultSelected) || false : void 0
     }
   });
-  const preferredHeight = height != null ? height : calcPreferredHeight({
+  const preferredHeight = height ?? calcPreferredHeight({
     displayedItemCount: 10,
     itemCount: collectionHook.data.length,
     itemHeight: 36
+    // getItemHeight,
+    // itemGapSize,
   });
   const autoSize = useAutoSizer({
     containerRef: rootRef,
@@ -100,6 +102,7 @@ const Tree = forwardRef(function Tree2({
     collectionHook,
     containerRef: rootRef,
     contentRef,
+    // Note this isn't enough for a Tree, because of nested structure
     defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
     disabled,
     groupSelection,
@@ -140,43 +143,45 @@ const Tree = forwardRef(function Tree2({
       })
     };
     list.push(
-      /* @__PURE__ */ jsx(TreeNode, {
-        ...propsCommonToAllListItems,
-        ...itemProps,
-        label: item.label
-      })
+      /* @__PURE__ */ jsx(
+        TreeNode,
+        {
+          ...propsCommonToAllListItems,
+          ...itemProps,
+          label: item.label
+        }
+      )
     );
     idx.value += 1;
   }
   function addGroupNode(list, items, idx, id2, title) {
-    var _a;
     const { value: i } = idx;
     const item = items[i];
     idx.value += 1;
     list.push(
-      /* @__PURE__ */ createElement(TreeNode, {
-        ...defaultItemHandlers,
-        ...listItemHandlers,
-        "aria-disabled": disabled || item.disabled,
-        "aria-expanded": item.expanded,
-        "aria-level": item.level,
-        className: clsx({
-          focusVisible: focusVisible === i,
-          [withBaseName("toggle")]: !allowGroupSelect
-        }),
-        "data-idx": i,
-        "data-selectable": true,
-        description: item.description,
-        highlighted: i === highlightedIdx,
-        id: id2,
-        key: `header-${i}`,
-        label: title,
-        selected: isSelected(selected, item)
-      }, item.expanded ? /* @__PURE__ */ jsx("ul", {
-        className: withBaseName("child-nodes"),
-        role: "group",
-        children: renderItems(items, idx, ((_a = item.level) != null ? _a : 0) + 1)
-      }) : null)
+      /* @__PURE__ */ createElement(
+        TreeNode,
+        {
+          ...defaultItemHandlers,
+          ...listItemHandlers,
+          "aria-disabled": disabled || item.disabled,
+          "aria-expanded": item.expanded,
+          "aria-level": item.level,
+          className: clsx({
+            focusVisible: focusVisible === i,
+            [withBaseName("toggle")]: !allowGroupSelect
+          }),
+          "data-idx": i,
+          "data-selectable": true,
+          description: item.description,
+          highlighted: i === highlightedIdx,
+          id: id2,
+          key: `header-${i}`,
+          label: title,
+          selected: isSelected(selected, item)
+        },
+        item.expanded ? /* @__PURE__ */ jsx("ul", { className: withBaseName("child-nodes"), role: "group", children: renderItems(items, idx, (item.level ?? 0) + 1) }) : null
+      )
     );
   }
   const renderItems = (items, idx = { value: 0 }, level = 1) => {
@@ -199,22 +204,28 @@ const Tree = forwardRef(function Tree2({
       return renderItems(collectionHook.data);
     }
   };
-  return /* @__PURE__ */ jsx("div", {
-    ...htmlAttributes,
-    ...listHandlers,
-    ...listProps,
-    className: clsx(withBaseName(), className),
-    id: `Tree-${id}`,
-    ref: useForkRef(rootRef, forwardedRef),
-    style: { ...styleProp, ...autoSize },
-    tabIndex: 0,
-    children: /* @__PURE__ */ jsx("ul", {
-      className: withBaseName("scrollingContentContainer"),
-      ref: contentRef,
-      role: "tree",
-      children: renderContent()
-    })
-  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      ...listHandlers,
+      ...listProps,
+      className: clsx(withBaseName(), className),
+      id: `Tree-${id}`,
+      ref: useForkRef(rootRef, forwardedRef),
+      style: { ...styleProp, ...autoSize },
+      tabIndex: 0,
+      children: /* @__PURE__ */ jsx(
+        "ul",
+        {
+          className: withBaseName("scrollingContentContainer"),
+          ref: contentRef,
+          role: "tree",
+          children: renderContent()
+        }
+      )
+    }
+  );
 });
 
 export { Tree };

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 { 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":";;;;;;;;;;;;;;;;;;;AAoCA,MAAM,YAAA,GAAe,aAAa,UAAU,CAAA;AA2B/B,MAAA,IAAA,GAAO,UAAW,CAAA,SAASA,KAItC,CAAA;AAAA,EACE,SAAA;AAAA,EACA,eAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAiB,GAAA,oBAAA;AAAA,EACjB,MAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,WAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,QAAU,EAAA,YAAA;AAAA,EACV,iBAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,UAAU,MAAM,CAAA;AAC3B,EAAM,MAAA,OAAA,GAAU,OAAO,IAAI,CAAA;AAC3B,EAAM,MAAA,UAAA,GAAa,OAAO,IAAI,CAAA;AAE9B,EAAA,MAAM,iBAAiB,kBAAyB,CAAA;AAAA,IAC9C,EAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAS,EAAA;AAAA,MACP,eAAiB,EAAA,uBAAA;AAAA,MACjB,cAAA,EAAgB,iBACZ,OAAQ,CAAA,YAAY,KAAK,OAAQ,CAAA,eAAe,KAAK,KACrD,GAAA,KAAA;AAAA;AACN,GACD,CAAA;AAGD,EAAM,MAAA,eAAA,GACJ,UACA,mBAAoB,CAAA;AAAA,IAClB,kBAAoB,EAAA,EAAA;AAAA,IACpB,SAAA,EAAW,eAAe,IAAK,CAAA,MAAA;AAAA,IAC/B,UAAY,EAAA;AAAA;AAAA;AAAA,GAGb,CAAA;AAEH,EAAA,MAAM,WAAW,YAA6B,CAAA;AAAA,IAC5C,YAAc,EAAA,OAAA;AAAA,IACd,UAAA,EAAY,KAAU,KAAA,KAAA,CAAA,IAAa,MAAW,KAAA,KAAA,CAAA;AAAA,IAC9C,MAAQ,EAAA,eAAA;AAAA,IACR;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,KAAK,YAAiB,KAAA;AACrB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAI,IAAA,cAAA,CAAe,YAAa,CAAA,KAAK,CAAG,EAAA;AACtC,UAAS,QAAA,CAAA,GAAA,EAAK,aAAa,KAAY,CAAA;AAAA,SACzC,MAAA,IAAW,YAAa,CAAA,KAAA,KAAU,IAAM,EAAA;AACtC,UAAS,QAAA,CAAA,GAAA,EAAK,aAAa,KAAK,CAAA;AAAA;AAClC;AACF,KACF;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,MAAM,qBAAwB,GAAA,WAAA;AAAA,IAG5B,CAAC,KAAKC,SAAa,KAAA;AAIjB,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,iBAAA;AAAA,UACE,GAAA;AAAA,UACA,KAAM,CAAA,OAAA,CAAQA,SAAQ,CAAA,GACjBA,SAAS,CAAA,GAAA,CAAI,CAAC,CAAA,KAAM,CAAE,CAAA,KAAK,CAC5BA,GAAAA,SAAAA,IAAaA,SAAS,CAAA;AAAA,SAC5B;AAAA;AACF,KACF;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAwBA,EAAM,MAAA;AAAA,IACJ,YAAA;AAAA,IACA,cAAA;AAAA,IACA,oBAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,MACE,OAAyB,CAAA;AAAA,IAC3B,cAAA;AAAA,IACA,YAAc,EAAA,OAAA;AAAA,IACd,UAAA;AAAA;AAAA,IAEA,eAAA,EAAiB,cAAe,CAAA,oBAAA,CAG9B,eAAe,CAAA;AAAA,IACjB,QAAA;AAAA,IACA,cAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,iBAAmB,EAAA,qBAAA;AAAA,IACnB,QAAA;AAAA,IACA,QAAA,EAAU,cAAe,CAAA,oBAAA,CAGvB,YAAY,CAAA;AAAA,IACd;AAAA,GACD,CAAA;AAGD,EAAA,MAAM,mBAAsB,GAAA;AAAA,IAC1B,YAAA,EAAc,CAAC,GAAoB,KAAA;AAEjC,MAAM,MAAA,GAAA,GAAM,oBAAqB,CAAA,GAAA,CAAI,MAAqB,CAAA;AAC1D,MAAA,IAAI,OAAO,IAAM,EAAA;AACf,QAAA,oBAAA,CAAqB,GAAG,CAAA;AAAA;AAC1B;AAGF,GACF;AAEA,EAAA,MAAM,yBAA4B,GAAA;AAAA,IAChC,GAAG,mBAAA;AAAA,IACH,GAAG,gBAAA;AAAA,IACH,MAAQ,EAAA,IAAA;AAAA,IACR,IAAM,EAAA;AAAA,GACR;AAEA,EAAA,MAAM,gBAAmB,GAAA,KAAA;AAKzB,EAAS,SAAA,WAAA,CACP,IACA,EAAA,IAAA,EACA,GACA,EAAA;AACA,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,eAAA,EAAiB,YAAY,IAAK,CAAA,QAAA;AAAA,MAClC,cAAc,IAAK,CAAA,KAAA;AAAA,MACnB,YAAY,GAAI,CAAA,KAAA;AAAA,MAChB,aAAa,IAAK,CAAA,WAAA;AAAA,MAClB,IAAI,IAAK,CAAA,EAAA;AAAA,MACT,KAAK,IAAK,CAAA,EAAA;AAAA,MACV,WAAA,EAAa,GAAI,CAAA,KAAA,KAAU,cAAkB,IAAA,KAAA,CAAA;AAAA,MAC7C,QAAA,EAAU,UAAiB,CAAA,QAAA,EAAU,IAAI,CAAA;AAAA,MACzC,WAAW,IAAK,CAAA;AAAA,QACd,YAAA,EAAc,iBAAiB,GAAI,CAAA;AAAA,OACpC;AAAA,KACH;AAEA,IAAK,IAAA,CAAA,IAAA;AAAA,sBACH,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,yBAAA;AAAA,UACH,GAAG,SAAA;AAAA,UACJ,OAAO,IAAK,CAAA;AAAA;AAAA;AAGd,KACF;AACA,IAAA,GAAA,CAAI,KAAS,IAAA,CAAA;AAAA;AAGf,EAAA,SAAS,YACP,CAAA,IAAA,EACA,KACA,EAAA,GAAA,EACAC,KACA,KACA,EAAA;AACA,IAAM,MAAA,EAAE,KAAO,EAAA,CAAA,EAAM,GAAA,GAAA;AACrB,IAAM,MAAA,IAAA,GAAO,MAAM,CAAC,CAAA;AACpB,IAAA,GAAA,CAAI,KAAS,IAAA,CAAA;AACb,IAAK,IAAA,CAAA,IAAA;AAAA,sBACH,aAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UACE,GAAG,mBAAA;AAAA,UACH,GAAG,gBAAA;AAAA,UACJ,eAAA,EAAe,YAAY,IAAK,CAAA,QAAA;AAAA,UAChC,iBAAe,IAAK,CAAA,QAAA;AAAA,UACpB,cAAY,IAAK,CAAA,KAAA;AAAA,UACjB,WAAW,IAAK,CAAA;AAAA,YACd,cAAc,YAAiB,KAAA,CAAA;AAAA,YAC/B,CAAC,YAAA,CAAa,QAAQ,CAAC,GAAG,CAAC;AAAA,WAC5B,CAAA;AAAA,UAED,UAAU,EAAA,CAAA;AAAA,UACV,iBAAe,EAAA,IAAA;AAAA,UACf,aAAa,IAAK,CAAA,WAAA;AAAA,UAClB,aAAa,CAAM,KAAA,cAAA;AAAA,UACnB,EAAIA,EAAAA,GAAAA;AAAA,UACJ,GAAA,EAAK,UAAU,CAAC,CAAA,CAAA;AAAA,UAChB,KAAO,EAAA,KAAA;AAAA,UACP,QAAA,EAAU,UAAiB,CAAA,QAAA,EAAU,IAAI;AAAA,SAAA;AAAA,QAExC,KAAK,QACJ,mBAAA,GAAA,CAAC,QAAG,SAAW,EAAA,YAAA,CAAa,aAAa,CAAG,EAAA,IAAA,EAAK,OAC9C,EAAA,QAAA,EAAA,WAAA,CAAY,OAAO,GAAM,EAAA,CAAA,IAAA,CAAK,SAAS,CAAK,IAAA,CAAC,GAChD,CACE,GAAA;AAAA;AACN,KACF;AAAA;AAGF,EAAM,MAAA,WAAA,GAAc,CAClB,KACA,EAAA,GAAA,GAAyB,EAAE,KAAO,EAAA,CAAA,EAClC,EAAA,KAAA,GAAQ,CACW,KAAA;AACnB,IAAA,MAAM,YAA4B,EAAC;AACnC,IAAO,OAAA,GAAA,CAAI,KAAQ,GAAA,KAAA,CAAM,MAAQ,EAAA;AAC/B,MAAM,MAAA,IAAA,GAAO,KAAM,CAAA,GAAA,CAAI,KAAK,CAAA;AAC5B,MAAA,IAAI,IAAK,CAAA,KAAA,IAAS,IAAQ,IAAA,IAAA,CAAK,QAAQ,KAAO,EAAA;AAC5C,QAAA;AAAA;AAEF,MAAI,IAAA,IAAA,CAAK,cAAc,IAAQ,IAAA,IAAA,CAAK,MAAM,IAAQ,IAAA,IAAA,CAAK,SAAS,IAAM,EAAA;AACpE,QAAA,YAAA,CAAa,WAAW,KAAO,EAAA,GAAA,EAAK,IAAK,CAAA,EAAA,EAAI,KAAK,KAAK,CAAA;AAAA,OAClD,MAAA;AACL,QAAY,WAAA,CAAA,SAAA,EAAW,MAAM,GAAG,CAAA;AAAA;AAClC;AAGF,IAAO,OAAA,SAAA;AAAA,GACT;AAcA,EAAA,MAAM,gBAAgB,MAAM;AAC1B,IAAI,IAAA,cAAA,CAAe,KAAK,MAAQ,EAAA;AAC9B,MAAO,OAAA,WAAA,CAAY,eAAe,IAAI,CAAA;AAAA;AAE5B,GACd;AAEA,EACE,uBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACH,GAAG,YAAA;AAAA,MACH,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,EAAA,EAAI,QAAQ,EAAE,CAAA,CAAA;AAAA,MACd,GAAA,EAAK,UAAW,CAAA,OAAA,EAAS,YAAY,CAAA;AAAA,MACrC,KAAO,EAAA,EAAE,GAAG,SAAA,EAAW,GAAG,QAAS,EAAA;AAAA,MACnC,QAAU,EAAA,CAAA;AAAA,MAEV,QAAA,kBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,aAAa,2BAA2B,CAAA;AAAA,UACnD,GAAK,EAAA,UAAA;AAAA,UACL,IAAK,EAAA,MAAA;AAAA,UAGJ,QAAc,EAAA,aAAA;AAAA;AAAA;AACjB;AAAA,GACF;AAEJ,CAAC;;;;"}

package/dist-es/tree/TreeNode.js

@@ -29,36 +29,24 @@ const TreeNode = ({
   const className = clsx(withBaseName(), classNameProp, {
     [withBaseName("highlighted")]: highlighted
   });
-  return /* @__PURE__ */ jsxs("li", {
-    ...props,
-    className,
-    role: "presentation",
-    children: [
-      /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs("li", { ...props, className, role: "presentation", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
         "aria-level": ariaLevel,
         "aria-selected": selected || void 0,
         className: withBaseName("item"),
         onMouseEnter,
         role: "treeitem",
         children: [
-          isLeaf === false ? /* @__PURE__ */ jsx("span", {
-            className: withBaseName("toggle"),
-            "data-toggle": true,
-            children: /* @__PURE__ */ jsx(TriangleRightIcon, {})
-          }) : null,
-          /* @__PURE__ */ jsx("div", {
-            className: withBaseName("label"),
-            children: label
-          }),
-          description !== void 0 ? /* @__PURE__ */ jsx("div", {
-            className: withBaseName("description"),
-            children: description
-          }) : null
+          isLeaf === false ? /* @__PURE__ */ jsx("span", { className: withBaseName("toggle"), "data-toggle": true, children: /* @__PURE__ */ jsx(TriangleRightIcon, {}) }) : null,
+          /* @__PURE__ */ jsx("div", { className: withBaseName("label"), children: label }),
+          description !== void 0 ? /* @__PURE__ */ jsx("div", { className: withBaseName("description"), children: description }) : null
         ]
-      }),
-      children
-    ]
-  });
+      }
+    ),
+    children
+  ] });
 };
 
 export { TreeNode };

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,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,EACG,GAAA,KAAA;AACL,CAAqB,KAAA;AACnB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,gBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,SAAY,GAAA,IAAA,CAAK,YAAa,EAAA,EAAG,aAAe,EAAA;AAAA,IACpD,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,GAChC,CAAA,CAAA;AAED,EAAA,uBACG,IAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,KAAA;AAAA,IAAO,SAAA;AAAA,IAAsB,IAAK,EAAA,cAAA;AAAA,IACxC,QAAA,EAAA;AAAA,sBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,QACC,YAAY,EAAA,SAAA;AAAA,QACZ,iBAAe,QAAY,IAAA,KAAA,CAAA;AAAA,QAC3B,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,QAC9B,YAAA;AAAA,QACA,IAAK,EAAA,UAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,MAAA,KAAW,wBACT,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,QAAQ,CAAA;AAAA,YAAG,aAAa,EAAA,IAAA;AAAA,YACpD,8BAAC,iBAAkB,EAAA,EAAA,CAAA;AAAA,WACrB,CACE,GAAA,IAAA;AAAA,0BACH,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAEjC,QAAA,EAAA,KAAA;AAAA,WACH,CAAA;AAAA,UACC,WAAA,KAAgB,yBACd,GAAA,CAAA,KAAA,EAAA;AAAA,YAAI,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,YAAI,QAAA,EAAA,WAAA;AAAA,WAAY,CACxD,GAAA,IAAA;AAAA,SAAA;AAAA,OACN,CAAA;AAAA,MACC,QAAA;AAAA,KAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
+{"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,KAAA,CAAA;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;;;;"}