@salt-ds/lab 1.0.0-alpha.61 → 1.0.0-alpha.62

package/dist-es/tabs-next/hooks/useOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.js","sources":["../src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n  ownerWindow,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useMemo,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement>;\n  selected?: string;\n  children: ReactNode;\n  tabs: Item[];\n  overflowButton: RefObject<HTMLButtonElement>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n  const { width } = element.getBoundingClientRect();\n  return Math.ceil(width);\n}\n\nexport function useOverflow({\n  tabs,\n  container,\n  overflowButton,\n  children,\n  selected,\n}: UseOverflowProps) {\n  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n    visibleCount: tabs.length,\n    isMeasuring: false,\n  });\n  const targetWindow = useWindow();\n\n  const updateOverflow = useEventCallback(() => {\n    const computeVisible = (visibleCount: number) => {\n      if (container.current && targetWindow) {\n        const items = Array.from(\n          container.current.querySelectorAll<HTMLElement>(\n            \"[data-overflowitem]\",\n          ),\n        );\n        const selectedTab = container.current.querySelector<HTMLElement>(\n          \"[role=tab][aria-selected=true]\",\n        )?.parentElement;\n\n        let maxWidth = container.current.clientWidth ?? 0;\n\n        const containerStyles = targetWindow.getComputedStyle(\n          container.current,\n        );\n        const gap = Number.parseInt(containerStyles.gap || \"0\");\n\n        let currentWidth = 0;\n        let newVisibleCount = 0;\n\n        const visible = [];\n\n        while (newVisibleCount < items.length) {\n          const element = items[newVisibleCount];\n          if (element) {\n            if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n              break;\n            }\n            currentWidth += getTabWidth(element) + gap;\n            visible.push(element);\n          }\n          newVisibleCount++;\n        }\n\n        if (newVisibleCount >= items.length) {\n          return newVisibleCount;\n        }\n\n        const overflowButtonWidth = overflowButton.current\n          ? overflowButton.current.offsetWidth + gap\n          : 0;\n        maxWidth -= overflowButtonWidth;\n\n        while (currentWidth > maxWidth) {\n          const removed = visible.pop();\n          if (!removed) break;\n          currentWidth -= getTabWidth(removed) + gap;\n          newVisibleCount--;\n        }\n\n        if (selectedTab && !visible.includes(selectedTab)) {\n          const selectedTabWidth = getTabWidth(selectedTab) + gap;\n          while (currentWidth + selectedTabWidth > maxWidth) {\n            const removed = visible.pop();\n            if (!removed) break;\n            currentWidth -= getTabWidth(selectedTab) + gap;\n            newVisibleCount--;\n          }\n        }\n\n        return Math.max(1, newVisibleCount);\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield {\n        visibleCount: tabs.length,\n        isMeasuring: true,\n      };\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(tabs.length);\n      const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n      yield {\n        visibleCount: newVisibleCount,\n        isMeasuring,\n      };\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield {\n          visibleCount: computeVisible(newVisibleCount),\n          isMeasuring: false,\n        };\n      }\n    });\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [selected]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        updateOverflow();\n      });\n    });\n    resizeObserver.observe(element);\n    if (element.parentElement) {\n      resizeObserver.observe(element.parentElement);\n    }\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [container, updateOverflow]);\n\n  const childArray = useMemo(() => Children.toArray(children), [children]);\n  const visible = childArray.slice(0, visibleCount || 1);\n  const hidden = childArray.slice(visibleCount || 1);\n\n  const hiddenSelectedIndex = hidden.findIndex(\n    // @ts-ignore\n    (child) => child?.props?.value === selected,\n  );\n\n  if (selected && hiddenSelectedIndex !== -1) {\n    const removed = hidden.splice(hiddenSelectedIndex, 1);\n    visible.push(removed[0]);\n  }\n\n  if (isMeasuring) {\n    return [childArray, [], isMeasuring] as const;\n  }\n\n  return [visible, hidden, isMeasuring] as const;\n}\n"],"names":["visibleCount","visible","isMeasuring"],"mappings":"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"}
+{"version":3,"file":"useOverflow.js","sources":["../src/tabs-next/hooks/useOverflow.ts"],"sourcesContent":["import {\n  ownerWindow,\n  useEventCallback,\n  useIsomorphicLayoutEffect,\n  useValueEffect,\n} from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport {\n  Children,\n  type ReactNode,\n  type RefObject,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseOverflowProps {\n  container: RefObject<HTMLElement>;\n  selected?: string;\n  children: ReactNode;\n  tabs: Item[];\n  overflowButton: RefObject<HTMLButtonElement>;\n}\n\nfunction getTabWidth(element: HTMLElement) {\n  const { width } = element.getBoundingClientRect();\n  return Math.ceil(width);\n}\n\nexport function useOverflow({\n  tabs,\n  container,\n  overflowButton,\n  children,\n  selected,\n}: UseOverflowProps) {\n  /**\n   * `visibleCount` doesn't include newly selected tab from overflow menu, which is removed in `computeVisible`\n   */\n  const [{ visibleCount, isMeasuring }, setVisibleItems] = useValueEffect({\n    visibleCount: tabs.length,\n    isMeasuring: false,\n  });\n  const targetWindow = useWindow();\n  const realSelectedIndex = useRef<number>(-1);\n\n  const updateOverflow = useEventCallback(() => {\n    const computeVisible = (visibleCount: number) => {\n      if (container.current && targetWindow) {\n        const items = Array.from(\n          container.current.querySelectorAll<HTMLElement>(\n            \"[data-overflowitem]\",\n          ),\n        );\n        const selectedTab = container.current.querySelector<HTMLElement>(\n          \"[role=tab][aria-selected=true]\",\n        )?.parentElement;\n\n        let maxWidth = container.current.clientWidth ?? 0;\n\n        const containerStyles = targetWindow.getComputedStyle(\n          container.current,\n        );\n        const gap = Number.parseInt(containerStyles.gap || \"0\");\n\n        let currentWidth = 0;\n        let newVisibleCount = 0;\n\n        const visible = [];\n\n        while (newVisibleCount < items.length) {\n          const element = items[newVisibleCount];\n          if (element) {\n            if (currentWidth + getTabWidth(element) + gap > maxWidth) {\n              break;\n            }\n            currentWidth += getTabWidth(element) + gap;\n            visible.push(element);\n          }\n          newVisibleCount++;\n        }\n\n        if (newVisibleCount >= items.length) {\n          return newVisibleCount;\n        }\n\n        const overflowButtonWidth = overflowButton.current\n          ? overflowButton.current.offsetWidth + gap\n          : 0;\n        maxWidth -= overflowButtonWidth;\n\n        while (currentWidth > maxWidth) {\n          const removed = visible.pop();\n          if (!removed) break;\n          currentWidth -= getTabWidth(removed) + gap;\n          newVisibleCount--;\n        }\n\n        if (selectedTab && !visible.includes(selectedTab)) {\n          const selectedTabWidth = getTabWidth(selectedTab) + gap;\n          while (currentWidth + selectedTabWidth > maxWidth) {\n            const removed = visible.pop();\n            if (!removed) break;\n            currentWidth -= getTabWidth(selectedTab) + gap;\n            newVisibleCount--;\n          }\n        }\n\n        // minimal count should be 0, if there is no space for any tab apart from selected tab from the overflow menu\n        return Math.max(0, newVisibleCount);\n      }\n      return visibleCount;\n    };\n\n    setVisibleItems(function* () {\n      // Show all\n      yield {\n        visibleCount: tabs.length,\n        isMeasuring: true,\n      };\n\n      // Measure the visible count\n      const newVisibleCount = computeVisible(tabs.length);\n      const isMeasuring = newVisibleCount < tabs.length && newVisibleCount > 0;\n      yield {\n        visibleCount: newVisibleCount,\n        isMeasuring,\n      };\n\n      // ensure the visible count is correct\n      if (isMeasuring) {\n        yield {\n          visibleCount: computeVisible(newVisibleCount),\n          isMeasuring: false,\n        };\n      }\n    });\n  });\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: we want to update when selected changes.\n  useIsomorphicLayoutEffect(() => {\n    updateOverflow();\n  }, [selected]);\n\n  useEffect(() => {\n    const handleWindowResize = () => {\n      updateOverflow();\n    };\n\n    targetWindow?.addEventListener(\"resize\", handleWindowResize);\n\n    return () => {\n      targetWindow?.removeEventListener(\"resize\", handleWindowResize);\n    };\n  }, [updateOverflow, targetWindow]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element) return;\n\n    const win = ownerWindow(element);\n\n    const resizeObserver = new win.ResizeObserver((entries) => {\n      requestAnimationFrame(() => {\n        if (entries.length === 0) return;\n\n        updateOverflow();\n      });\n    });\n    resizeObserver.observe(element);\n    if (element.parentElement) {\n      resizeObserver.observe(element.parentElement);\n    }\n\n    return () => {\n      if (element) {\n        resizeObserver.unobserve(element);\n      }\n    };\n  }, [container, updateOverflow]);\n\n  useEffect(() => {\n    const element = container?.current;\n    if (!element || isMeasuring) return;\n\n    const win = ownerWindow(element);\n\n    const mutationObserver = new win.MutationObserver(() => {\n      requestAnimationFrame(() => {\n        updateOverflow();\n      });\n    });\n\n    mutationObserver.observe(element, {\n      childList: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [container, updateOverflow, isMeasuring]);\n\n  const childArray = useMemo(() => Children.toArray(children), [children]);\n  const visible = useMemo(\n    () => childArray.slice(0, visibleCount),\n    [visibleCount, childArray],\n  );\n  const hidden = useMemo(\n    () => childArray.slice(visibleCount),\n    [childArray, visibleCount],\n  );\n\n  const hiddenSelectedIndex = hidden.findIndex(\n    // @ts-ignore\n    (child) => child?.props?.value === selected,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (visibleCount === childArray.length) {\n      realSelectedIndex.current = childArray.findIndex(\n        // @ts-ignore\n        (child) => child?.props?.value === selected,\n      );\n    }\n  }, [visibleCount, childArray, selected]);\n\n  if (selected && hiddenSelectedIndex !== -1) {\n    const removed = hidden.splice(hiddenSelectedIndex, 1);\n    visible.push(removed[0]);\n  }\n\n  if (isMeasuring) {\n    return [childArray, [], isMeasuring, realSelectedIndex] as const;\n  }\n\n  return [visible, hidden, isMeasuring, realSelectedIndex] as const;\n}\n"],"names":["visibleCount","visible","isMeasuring"],"mappings":"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"}

package/dist-es/tabs-next/hooks/useRestoreActiveTab.js

@@ -0,0 +1,91 @@
+import { useIsomorphicLayoutEffect, ownerWindow } from '@salt-ds/core';
+import { useRef, useEffect } from 'react';
+
+function useRestoreActiveTab({
+  container,
+  tabs,
+  realSelectedIndex,
+  removedActiveTabRef
+}) {
+  const tabsRef = useRef(tabs);
+  const previousTabsRef = useRef(tabs);
+  useIsomorphicLayoutEffect(() => {
+    tabsRef.current = tabs;
+    return () => {
+      previousTabsRef.current = tabs;
+    };
+  }, [tabs]);
+  useEffect(() => {
+    if (!container.current) return;
+    const win = ownerWindow(container.current);
+    const mutationObserver = new win.MutationObserver((mutations) => {
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+      for (const mutation of mutations) {
+        const removedItem = mutation.removedNodes[0] instanceof HTMLElement ? mutation.removedNodes[0] : null;
+        const removedItemWasTab = removedActiveTabRef.current && ((_a = removedItem == null ? void 0 : removedItem.dataset) == null ? void 0 : _a.overflowitem);
+        const activeTabWasRemoved = removedItemWasTab && !tabsRef.current.find(
+          ({ value }) => value === removedActiveTabRef.current
+        );
+        if (activeTabWasRemoved) {
+          const removedTab = removedItem == null ? void 0 : removedItem.querySelector('[role="tab"]');
+          let nextTab = null;
+          if ((removedTab == null ? void 0 : removedTab.ariaSelected) === "true" && realSelectedIndex.current != null && realSelectedIndex.current >= 0) {
+            nextTab = (_b = tabsRef.current[Math.min(realSelectedIndex.current, tabsRef.current.length - 1)]) == null ? void 0 : _b.element;
+          }
+          if (!nextTab) {
+            const previousTab = mutation.previousSibling instanceof HTMLElement ? mutation.previousSibling.querySelector(
+              '[role="tab"]'
+            ) : null;
+            if (!previousTab) {
+              nextTab = mutation.nextSibling instanceof HTMLElement ? (_c = mutation.nextSibling) == null ? void 0 : _c.querySelector(
+                '[role="tab"]'
+              ) : null;
+            } else {
+              const nextTabIndex = previousTab ? tabsRef.current.findIndex(
+                ({ element }) => element === previousTab
+              ) + 1 : -1;
+              nextTab = (_d = tabsRef.current[Math.min(nextTabIndex, tabsRef.current.length - 1)]) == null ? void 0 : _d.element;
+            }
+          }
+          if (!((_e = container.current) == null ? void 0 : _e.querySelector(
+            '[role="tab"][aria-selected="true"]'
+          ))) {
+            nextTab == null ? void 0 : nextTab.click();
+          }
+          if (!((_f = container.current) == null ? void 0 : _f.contains(win.document.activeElement))) {
+            if (nextTab == null ? void 0 : nextTab.isConnected) {
+              nextTab == null ? void 0 : nextTab.focus({ preventScroll: true });
+            } else {
+              (_h = (_g = container.current) == null ? void 0 : _g.querySelector(
+                '[role="tab"][aria-selected="true"]'
+              )) == null ? void 0 : _h.focus({ preventScroll: true });
+            }
+          }
+          removedActiveTabRef.current = void 0;
+        }
+        if (removedActiveTabRef.current) {
+          if (removedItemWasTab) {
+            const tabElement = (_i = tabsRef.current.find(
+              ({ value }) => value === removedActiveTabRef.current
+            )) == null ? void 0 : _i.element;
+            if (win.document.activeElement === win.document.body) {
+              tabElement == null ? void 0 : tabElement.focus();
+            }
+          } else if (removedItem == null ? void 0 : removedItem.dataset.overflow) {
+            (_k = (_j = tabsRef.current[tabsRef.current.length - 1]) == null ? void 0 : _j.element) == null ? void 0 : _k.focus();
+          }
+        }
+      }
+    });
+    mutationObserver.observe(container.current, {
+      childList: true,
+      subtree: true
+    });
+    return () => {
+      mutationObserver.disconnect();
+    };
+  }, [container, realSelectedIndex, removedActiveTabRef]);
+}
+
+export { useRestoreActiveTab };
+//# sourceMappingURL=useRestoreActiveTab.js.map

package/dist-es/tabs-next/hooks/useRestoreActiveTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRestoreActiveTab.js","sources":["../src/tabs-next/hooks/useRestoreActiveTab.ts"],"sourcesContent":["import { ownerWindow, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type MutableRefObject,\n  type RefObject,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { Item } from \"./useCollection\";\n\ninterface UseHandleRemovalProps {\n  container: RefObject<HTMLElement>;\n  tabs: Item[];\n  realSelectedIndex: RefObject<number>;\n  removedActiveTabRef: MutableRefObject<string | undefined>;\n}\n\nexport function useRestoreActiveTab({\n  container,\n  tabs,\n  realSelectedIndex,\n  removedActiveTabRef,\n}: UseHandleRemovalProps) {\n  const tabsRef = useRef(tabs);\n  const previousTabsRef = useRef(tabs);\n\n  useIsomorphicLayoutEffect(() => {\n    tabsRef.current = tabs;\n\n    return () => {\n      previousTabsRef.current = tabs;\n    };\n  }, [tabs]);\n\n  useEffect(() => {\n    if (!container.current) return;\n\n    const win = ownerWindow(container.current);\n\n    const mutationObserver = new win.MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        const removedItem =\n          mutation.removedNodes[0] instanceof HTMLElement\n            ? mutation.removedNodes[0]\n            : null;\n\n        const removedItemWasTab =\n          removedActiveTabRef.current && removedItem?.dataset?.overflowitem;\n\n        const activeTabWasRemoved =\n          removedItemWasTab &&\n          !tabsRef.current.find(\n            ({ value }) => value === removedActiveTabRef.current,\n          );\n\n        if (activeTabWasRemoved) {\n          const removedTab =\n            removedItem?.querySelector<HTMLElement>('[role=\"tab\"]');\n\n          let nextTab: HTMLElement | null | undefined = null;\n\n          if (\n            removedTab?.ariaSelected === \"true\" &&\n            realSelectedIndex.current != null &&\n            realSelectedIndex.current >= 0\n          ) {\n            nextTab =\n              tabsRef.current[\n                Math.min(realSelectedIndex.current, tabsRef.current.length - 1)\n              ]?.element;\n          }\n\n          if (!nextTab) {\n            const previousTab =\n              mutation.previousSibling instanceof HTMLElement\n                ? mutation.previousSibling.querySelector<HTMLElement>(\n                    '[role=\"tab\"]',\n                  )\n                : null;\n\n            if (!previousTab) {\n              nextTab =\n                mutation.nextSibling instanceof HTMLElement\n                  ? mutation.nextSibling?.querySelector<HTMLElement>(\n                      '[role=\"tab\"]',\n                    )\n                  : null;\n            } else {\n              const nextTabIndex = previousTab\n                ? tabsRef.current.findIndex(\n                    ({ element }) => element === previousTab,\n                  ) + 1\n                : -1;\n\n              nextTab =\n                tabsRef.current[\n                  Math.min(nextTabIndex, tabsRef.current.length - 1)\n                ]?.element;\n            }\n          }\n\n          if (\n            !container.current?.querySelector<HTMLElement>(\n              '[role=\"tab\"][aria-selected=\"true\"]',\n            )\n          ) {\n            nextTab?.click();\n          }\n\n          if (!container.current?.contains(win.document.activeElement)) {\n            if (nextTab?.isConnected) {\n              nextTab?.focus({ preventScroll: true });\n            } else {\n              container.current\n                ?.querySelector<HTMLElement>(\n                  '[role=\"tab\"][aria-selected=\"true\"]',\n                )\n                ?.focus({ preventScroll: true });\n            }\n          }\n\n          removedActiveTabRef.current = undefined;\n        }\n\n        // Focus the tab if it was moved from the overflow menu into the visible tabs\n        if (removedActiveTabRef.current) {\n          if (removedItemWasTab) {\n            const tabElement = tabsRef.current.find(\n              ({ value }) => value === removedActiveTabRef.current,\n            )?.element;\n\n            if (win.document.activeElement === win.document.body) {\n              tabElement?.focus();\n            }\n          } else if (removedItem?.dataset.overflow) {\n            tabsRef.current[tabsRef.current.length - 1]?.element?.focus();\n          }\n        }\n      }\n    });\n\n    mutationObserver.observe(container.current, {\n      childList: true,\n      subtree: true,\n    });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [container, realSelectedIndex, removedActiveTabRef]);\n}\n"],"names":[],"mappings":"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"}

package/dist-types/index.d.ts

@@ -37,6 +37,7 @@ export * from "./query-input";
 export * from "./responsive";
 export * from "./search-input";
 export * from "./slider";
+export * from "./splitter";
 export * from "./static-list";
 export * from "./stepped-tracker";
 export * from "./stepper-input";

package/dist-types/splitter/SplitHandle.d.ts

@@ -0,0 +1,21 @@
+import { type PanelResizeHandleProps } from "react-resizable-panels";
+export declare type SplitHandleVariant = "primary" | "secondary" | "tertiary" | "transparent";
+export declare type SplitHandleBorder = "top" | "bottom" | "right" | "left" | "top-bottom" | "left-right" | "none";
+export interface SplitHandleProps extends PanelResizeHandleProps {
+    /**
+     * Styling variant
+     * @default "primary"
+     */
+    variant?: SplitHandleVariant;
+    /**
+     * Change which sides get a border displayed
+     *
+     * Default is based on the orientation and appearance
+     * set on the parent Stepper components, ex.
+     * bordered + vertical = left-right
+     * bordered + horizontal = top-bottom
+     * transparent = none
+     */
+    border?: SplitHandleBorder;
+}
+export declare function SplitHandle({ variant: variantProp, border: borderProp, hitAreaMargins, className, ...props }: SplitHandleProps): import("react/jsx-runtime").JSX.Element;

package/dist-types/splitter/SplitPanel.d.ts

@@ -0,0 +1,10 @@
+import { type ImperativePanelHandle, type PanelProps } from "react-resizable-panels";
+export declare type SplitPanelVariant = "primary" | "secondary" | "tertiary";
+export interface SplitPanelProps extends PanelProps {
+    /**
+     * Styling variant
+     * @default "primary"
+     */
+    variant?: SplitPanelVariant;
+}
+export declare const SplitPanel: import("react").ForwardRefExoticComponent<SplitPanelProps & import("react").RefAttributes<ImperativePanelHandle>>;

package/dist-types/splitter/Splitter.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from "react";
+import { type PanelGroupProps } from "react-resizable-panels";
+export declare type SplitterAppearance = "bordered" | "transparent";
+export declare type SplitterOrientation = "horizontal" | "vertical";
+export declare const OrientationContext: import("react").Context<SplitterOrientation>;
+export declare const AppearanceContext: import("react").Context<SplitterAppearance>;
+export interface SplitterProps extends Omit<PanelGroupProps, "direction"> {
+    /**
+     * The orientation of the splitter.
+     * Replaces `PanelGroupProps["direction"]`
+     */
+    orientation: SplitterOrientation;
+    /**
+     * The appearance of the splitter.
+     * If set to "transparent", the splitter handle will
+     * be transparent, hence the background will be visible.
+     * @default "bordered"
+     */
+    appearance?: SplitterAppearance;
+    children: ReactNode;
+}
+export declare function Splitter({ orientation, appearance: appearanceProp, ...props }: SplitterProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export { Splitter, type SplitterProps } from "./Splitter";
+export { SplitPanel, type SplitPanelProps } from "./SplitPanel";
+export { SplitHandle, type SplitHandleProps } from "./SplitHandle";
+export type { ImperativePanelHandle } from "react-resizable-panels";

package/dist-types/splitter/utils.d.ts

@@ -0,0 +1,4 @@
+import type { SplitHandleBorder } from "./SplitHandle";
+import type { SplitterAppearance, SplitterOrientation } from "./Splitter";
+export declare function computeAccent(appearance: SplitterAppearance, orientation: SplitterOrientation): SplitHandleBorder;
+export declare function computeVariant(appearance: SplitterAppearance): "primary" | "transparent";

package/dist-types/stepped-tracker/Step.types.d.ts

@@ -11,11 +11,9 @@ export interface StepProps extends Omit<ComponentPropsWithoutRef<"li">, "onToggl
     substeps?: StepRecord[];
     children?: ReactNode;
 }
-export declare type StepRecord = (Omit<StepProps, "children"> & {
+export declare type StepRecord = Omit<StepProps, "children"> & {
     id: string;
-}) | (Omit<StepProps, "children"> & {
-    key: string;
-});
+};
 export declare type StepStatus = "warning" | "error";
 export declare type StepStage = "pending" | "locked" | "completed" | "inprogress" | "active";
 export declare type StepDepth = number;

package/dist-types/stepped-tracker/stepReducer.types.d.ts

@@ -2,10 +2,10 @@ import type { StepRecord } from ".";
 export interface StepReducerState {
     steps: StepRecord[];
     flatSteps: StepRecord[];
+    activeStepIndex: number;
     activeStep: StepRecord | null;
     previousStep: StepRecord | null;
     nextStep: StepRecord | null;
-    activeStepIndex: number;
     started: boolean;
     ended: boolean;
 }
@@ -14,11 +14,13 @@ export declare type StepReducerAction = {
 } | {
     type: "previous";
 } | {
-    type: "error";
+    type: "reset";
+} | {
+    type: "status/error";
 } | {
-    type: "warning";
+    type: "status/warning";
 } | {
-    type: "clear";
+    type: "status/clear";
 };
 export interface StepReducerOptions {
     activeStepId?: string;

package/dist-types/stepped-tracker/utils.d.ts

@@ -1,7 +1,10 @@
-import type { StepRecord, StepStage } from "./Step.types";
+import type { StepRecord, StepStage, StepStatus } from "./Step.types";
 import type { StepReducerOptions, StepReducerState } from "./stepReducer.types";
-export declare function assignSteps(steps: StepRecord[], stage?: StepStage): StepRecord[];
-export declare function resetSteps(steps: StepRecord[]): StepRecord[];
+export declare function assignStepsStage(steps: StepRecord[], stage?: StepStage): StepRecord[];
+export declare function assignStepStatus(steps: StepRecord[], stepId: string, status: StepStatus | undefined): StepRecord[];
+export declare function resetSteps(steps: StepRecord[], options?: {
+    resetStatus: boolean;
+}): StepRecord[];
 export declare function autoStageSteps(steps: StepRecord[], options?: StepReducerOptions): StepRecord[];
 export declare function flattenSteps(steps: StepRecord[]): StepRecord[];
 export declare function initStepReducerState(initialSteps: StepRecord[], options?: StepReducerOptions): StepReducerState;

package/dist-types/tabs/drag-drop/drag-utils.d.ts

@@ -20,24 +20,24 @@ export declare type targetType = {
 declare type Dimension = keyof Pick<DOMRect, "width" | "height">;
 export declare const measureElementSizeAndPosition: (element: HTMLElement, dimension?: Dimension, includeAutoMargin?: boolean) => number[];
 export declare const dimensions: (orientation: orientationType) => {
-    CLIENT_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    CLIENT_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
     CONTRA: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     CONTRA_POS: "clientX" | "clientY";
     DIMENSION: "height" | "width";
     END: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     POS: "clientX" | "clientY";
-    SCROLL_POS: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
-    SCROLL_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_POS: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
     START: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
 } | {
-    CLIENT_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    CLIENT_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
     CONTRA: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     CONTRA_POS: "clientX" | "clientY";
     DIMENSION: "height" | "width";
     END: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
     POS: "clientX" | "clientY";
-    SCROLL_POS: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
-    SCROLL_SIZE: "scrollWidth" | "scrollHeight" | "clientHeight" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_POS: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
+    SCROLL_SIZE: "scrollHeight" | "clientHeight" | "scrollWidth" | "clientWidth" | "scrollTop" | "scrollLeft";
     START: "x" | "y" | "height" | "width" | "left" | "right" | "top" | "bottom";
 };
 export declare const getDraggedItem: (measuredItems: MeasuredDropTarget[]) => MeasuredDropTarget;

package/dist-types/tabs-next/TabsNextContext.d.ts

@@ -13,7 +13,7 @@ export interface TabsNextContextValue extends Omit<ReturnType<typeof useCollecti
     selected?: string;
     setSelected: (event: SyntheticEvent, value: string) => void;
     activeTab: MutableRefObject<Pick<Item, "id" | "value"> | undefined>;
-    returnFocus: MutableRefObject<string | undefined>;
+    removedActiveTabRef: MutableRefObject<string | undefined>;
     menuOpen: boolean;
     setMenuOpen: Dispatch<SetStateAction<boolean>>;
 }

package/dist-types/tabs-next/hooks/useOverflow.d.ts

@@ -7,5 +7,5 @@ interface UseOverflowProps {
     tabs: Item[];
     overflowButton: RefObject<HTMLButtonElement>;
 }
-export declare function useOverflow({ tabs, container, overflowButton, children, selected, }: UseOverflowProps): readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], (string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], false] | readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], readonly [], true];
+export declare function useOverflow({ tabs, container, overflowButton, children, selected, }: UseOverflowProps): readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], (string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], false, import("react").MutableRefObject<number>] | readonly [(string | number | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | import("react").ReactPortal)[], readonly [], true, import("react").MutableRefObject<number>];
 export {};

package/dist-types/tabs-next/hooks/useRestoreActiveTab.d.ts

@@ -0,0 +1,10 @@
+import { type MutableRefObject, type RefObject } from "react";
+import type { Item } from "./useCollection";
+interface UseHandleRemovalProps {
+    container: RefObject<HTMLElement>;
+    tabs: Item[];
+    realSelectedIndex: RefObject<number>;
+    removedActiveTabRef: MutableRefObject<string | undefined>;
+}
+export declare function useRestoreActiveTab({ container, tabs, realSelectedIndex, removedActiveTabRef, }: UseHandleRemovalProps): void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.61",
+  "version": "1.0.0-alpha.62",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -21,8 +21,8 @@
   ],
   "dependencies": {
     "@floating-ui/react": "^0.26.28",
-    "@salt-ds/core": "^1.41.0",
-    "@salt-ds/date-adapters": "0.1.0-alpha.2",
+    "@salt-ds/core": "^1.42.0",
+    "@salt-ds/date-adapters": "0.1.0-alpha.3",
     "@salt-ds/icons": "^1.13.2",
     "@salt-ds/styles": "0.2.1",
     "@salt-ds/window": "0.1.1",
@@ -35,6 +35,7 @@
     "deepmerge": "^4.2.2",
     "no-scroll": "^2.1.1",
     "react-color": "^2.19.3",
+    "react-resizable-panels": "^2.1.7",
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tabbable": "^6.0.0",