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

package/dist-es/tabs-next/TabNextContext.js

@@ -0,0 +1,18 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const TabsContext = createContext("TabsContext", {
+  disabled: false,
+  select: () => void 0,
+  isSelected: () => false,
+  setFocusable: () => void 0,
+  isFocusable: () => false,
+  registerTab: () => void 0,
+  unregisterTab: () => void 0
+});
+function useTabs() {
+  return useContext(TabsContext);
+}
+
+export { TabsContext, useTabs };
+//# sourceMappingURL=TabNextContext.js.map

package/dist-es/tabs-next/TabNextContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabNextContext.js","sources":["../src/tabs-next/TabNextContext.tsx"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { ReactNode, SyntheticEvent, useContext } from \"react\";\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport interface TabsContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (id: string) => boolean;\n  setFocusable: (id: string) => void;\n  isFocusable: (id: string) => boolean;\n  registerTab: (tab: TabValue) => void;\n  unregisterTab: (id: string) => void;\n}\n\nexport const TabsContext = createContext<TabsContextValue>(\"TabsContext\", {\n  disabled: false,\n  select: () => undefined,\n  isSelected: () => false,\n  setFocusable: () => undefined,\n  isFocusable: () => false,\n  registerTab: () => undefined,\n  unregisterTab: () => undefined,\n});\n\nexport function useTabs() {\n  return useContext(TabsContext);\n}\n"],"names":[],"mappings":";;;AAkBa,MAAA,WAAA,GAAc,cAAgC,aAAe,EAAA;AAAA,EACxE,QAAU,EAAA,KAAA;AAAA,EACV,QAAQ,MAAM,KAAA,CAAA;AAAA,EACd,YAAY,MAAM,KAAA;AAAA,EAClB,cAAc,MAAM,KAAA,CAAA;AAAA,EACpB,aAAa,MAAM,KAAA;AAAA,EACnB,aAAa,MAAM,KAAA,CAAA;AAAA,EACnB,eAAe,MAAM,KAAA,CAAA;AACvB,CAAC,EAAA;AAEM,SAAS,OAAU,GAAA;AACxB,EAAA,OAAO,WAAW,WAAW,CAAA,CAAA;AAC/B;;;;"}

package/dist-es/tabs-next/TabstripNext.css.js

@@ -0,0 +1,4 @@
+var css_248z = "/* Component class applied to the root element */\n.saltTabstripNext {\n  display: flex;\n  flex-wrap: nowrap;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  width: 100%;\n}\n\n.saltTabstripNext::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  background: var(--salt-container-primary-borderColor);\n}\n\n.saltTabstripNext .saltTabNext-wrapper {\n  padding-right: var(--salt-spacing-50);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabstripNext.css.js.map

package/dist-es/tabs-next/TabstripNext.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabstripNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist-es/tabs-next/TabstripNext.js

@@ -0,0 +1,172 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import clsx from 'clsx';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { Overflow } from '@fluentui/react-overflow';
+import { OverflowMenu } from './OverflowMenu.js';
+import css_248z from './TabstripNext.css.js';
+import { TabsContext } from './TabNextContext.js';
+
+const withBaseName = makePrefixer("saltTabstripNext");
+const TabstripNext = forwardRef(
+  function TabstripNext2(props, ref) {
+    const {
+      children,
+      className,
+      disabled,
+      selected: selectedProp,
+      defaultSelected,
+      onChange,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tabstrip-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const tabstripRef = useRef(null);
+    const handleRef = useForkRef(tabstripRef, ref);
+    const [selected, setSelected] = useControlled({
+      controlled: selectedProp,
+      default: defaultSelected,
+      name: "TabstripNext",
+      state: "selected"
+    });
+    const [focusable, setFocusableState] = useState(
+      selected
+    );
+    const [overflowOpen, setOverflowOpen] = useState(false);
+    const select = useCallback(
+      (event) => {
+        const newValue = event.currentTarget.value;
+        setSelected(newValue);
+        if (selected !== newValue) {
+          onChange == null ? void 0 : onChange(event, { value: newValue });
+        }
+      },
+      [onChange, selected, setSelected]
+    );
+    const isSelected = useCallback(
+      (id) => {
+        return selected === id;
+      },
+      [selected]
+    );
+    const setFocusable = useCallback((id) => {
+      setFocusableState(id);
+    }, []);
+    const isFocusable = useCallback(
+      (id) => {
+        return focusable === id || !focusable;
+      },
+      [focusable]
+    );
+    const [tabList, setTabList] = useState([]);
+    const registerTab = useCallback((tab) => {
+      setTabList((list) => list.concat([tab]));
+    }, []);
+    const unregisterTab = useCallback((id) => {
+      setTabList((list) => list.filter((item) => item.value !== id));
+    }, []);
+    const handleKeyDown = (event) => {
+      var _a, _b, _c, _d, _e, _f;
+      if (overflowOpen)
+        return;
+      const elements = Array.from(
+        (_b = (_a = tabstripRef.current) == null ? void 0 : _a.querySelectorAll(
+          `div:not([data-overflowing]) > [role="tab"]:not([disabled])`
+        )) != null ? _b : []
+      );
+      const currentIndex = elements.findIndex(
+        (element) => element === (targetWindow == null ? void 0 : targetWindow.document.activeElement)
+      );
+      if (currentIndex < 0)
+        return;
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight":
+          (_c = elements[Math.min(currentIndex + 1, elements.length)]) == null ? void 0 : _c.focus();
+          break;
+        case "ArrowUp":
+        case "ArrowLeft":
+          (_d = elements[Math.max(0, currentIndex - 1)]) == null ? void 0 : _d.focus();
+          break;
+        case "Home":
+          (_e = elements[0]) == null ? void 0 : _e.focus();
+          break;
+        case "End":
+          (_f = elements[elements.length - 1]) == null ? void 0 : _f.focus();
+      }
+      onKeyDown == null ? void 0 : onKeyDown(event);
+    };
+    const handleOverflowItemClick = (event, item) => {
+      if (item) {
+        setSelected(item.value);
+        requestAnimationFrame(() => {
+          var _a;
+          const element = (_a = tabstripRef.current) == null ? void 0 : _a.querySelector(
+            `[value="${item.value}"]`
+          );
+          if (element instanceof HTMLElement) {
+            element == null ? void 0 : element.focus();
+          }
+        });
+        if (selected !== item.value) {
+          onChange == null ? void 0 : onChange(event, { value: item.value });
+        }
+      }
+    };
+    const handleOverflowOpenChange = (isOpen) => {
+      setOverflowOpen(isOpen);
+    };
+    const value = useMemo(
+      () => ({
+        select,
+        isSelected,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab
+      }),
+      [
+        select,
+        isSelected,
+        setFocusable,
+        isFocusable,
+        registerTab,
+        unregisterTab
+      ]
+    );
+    return /* @__PURE__ */ jsx(TabsContext.Provider, {
+      value,
+      children: /* @__PURE__ */ jsx(Overflow, {
+        ref: handleRef,
+        children: /* @__PURE__ */ jsxs("div", {
+          role: "tablist",
+          className: clsx(
+            withBaseName(),
+            withBaseName("horizontal"),
+            className
+          ),
+          onKeyDown: handleKeyDown,
+          ...rest,
+          children: [
+            children,
+            /* @__PURE__ */ jsx(OverflowMenu, {
+              tabs: tabList,
+              onOpenChange: handleOverflowOpenChange,
+              onSelectionChange: handleOverflowItemClick
+            })
+          ]
+        })
+      })
+    });
+  }
+);
+
+export { TabstripNext };
+//# sourceMappingURL=TabstripNext.js.map

package/dist-es/tabs-next/TabstripNext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabstripNext.js","sources":["../src/tabs-next/TabstripNext.tsx"],"sourcesContent":["import { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport clsx from \"clsx\";\nimport {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  ReactNode,\n  SyntheticEvent,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Overflow } from \"@fluentui/react-overflow\";\nimport { OverflowMenu } from \"./OverflowMenu\";\nimport tabstripCss from \"./TabstripNext.css\";\nimport { TabsContext } from \"./TabNextContext\";\nimport { SelectionChangeHandler } from \"../common-hooks\";\n\nconst withBaseName = makePrefixer(\"saltTabstripNext\");\n\nexport interface TabstripNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  disabled?: boolean;\n  /* Value for the uncontrolled version. */\n  selected?: string;\n  /* Callback for the controlled version. */\n  onChange?: (e: SyntheticEvent, data: { value: string }) => void;\n  /* Initial value for the uncontrolled version. */\n  defaultSelected?: string;\n}\n\ntype TabValue = {\n  value: string;\n  label: ReactNode;\n};\n\nexport const TabstripNext = forwardRef<HTMLDivElement, TabstripNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      children,\n      className,\n      disabled,\n      selected: selectedProp,\n      defaultSelected,\n      onChange,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tabstrip-next\",\n      css: tabstripCss,\n      window: targetWindow,\n    });\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n\n    const [selected, setSelected] = useControlled({\n      controlled: selectedProp,\n      default: defaultSelected,\n      name: \"TabstripNext\",\n      state: \"selected\",\n    });\n    const [focusable, setFocusableState] = useState<string | undefined>(\n      selected\n    );\n    const [overflowOpen, setOverflowOpen] = useState(false);\n\n    const select = useCallback(\n      (event: SyntheticEvent<HTMLButtonElement>) => {\n        const newValue = event.currentTarget.value;\n        setSelected(newValue);\n        if (selected !== newValue) {\n          onChange?.(event, { value: newValue });\n        }\n      },\n      [onChange, selected, setSelected]\n    );\n\n    const isSelected = useCallback(\n      (id: string | undefined) => {\n        return selected === id;\n      },\n      [selected]\n    );\n\n    const setFocusable = useCallback((id: string | undefined) => {\n      setFocusableState(id);\n    }, []);\n\n    const isFocusable = useCallback(\n      (id: string | undefined) => {\n        return focusable === id || !focusable;\n      },\n      [focusable]\n    );\n\n    const [tabList, setTabList] = useState<TabValue[]>([]);\n    const registerTab = useCallback((tab: TabValue) => {\n      setTabList((list) => list.concat([tab]));\n    }, []);\n\n    const unregisterTab = useCallback((id: string) => {\n      setTabList((list) => list.filter((item) => item.value !== id));\n    }, []);\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      if (overflowOpen) return;\n\n      const elements: HTMLElement[] = Array.from(\n        tabstripRef.current?.querySelectorAll(\n          `div:not([data-overflowing]) > [role=\"tab\"]:not([disabled])`\n        ) ?? []\n      );\n\n      const currentIndex = elements.findIndex(\n        (element) => element === targetWindow?.document.activeElement\n      );\n\n      if (currentIndex < 0) return;\n\n      switch (event.key) {\n        case \"ArrowDown\":\n        case \"ArrowRight\":\n          elements[Math.min(currentIndex + 1, elements.length)]?.focus();\n          break;\n        case \"ArrowUp\":\n        case \"ArrowLeft\":\n          elements[Math.max(0, currentIndex - 1)]?.focus();\n          break;\n        case \"Home\":\n          elements[0]?.focus();\n          break;\n        case \"End\":\n          elements[elements.length - 1]?.focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const handleOverflowItemClick: SelectionChangeHandler<TabValue> = (\n      event,\n      item\n    ) => {\n      if (item) {\n        setSelected(item.value);\n        requestAnimationFrame(() => {\n          const element = tabstripRef.current?.querySelector(\n            `[value=\"${item.value}\"]`\n          );\n          if (element instanceof HTMLElement) {\n            element?.focus();\n          }\n        });\n        if (selected !== item.value) {\n          onChange?.(event, { value: item.value });\n        }\n      }\n    };\n\n    const handleOverflowOpenChange = (isOpen: boolean) => {\n      setOverflowOpen(isOpen);\n    };\n\n    const value = useMemo(\n      () => ({\n        select,\n        isSelected,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n      }),\n      [\n        select,\n        isSelected,\n        setFocusable,\n        isFocusable,\n        registerTab,\n        unregisterTab,\n      ]\n    );\n\n    return (\n      <TabsContext.Provider value={value}>\n        <Overflow ref={handleRef}>\n          <div\n            role=\"tablist\"\n            className={clsx(\n              withBaseName(),\n              withBaseName(\"horizontal\"),\n              className\n            )}\n            onKeyDown={handleKeyDown}\n            {...rest}\n          >\n            {children}\n            <OverflowMenu\n              tabs={tabList}\n              onOpenChange={handleOverflowOpenChange}\n              onSelectionChange={handleOverflowItemClick}\n            />\n          </div>\n        </Overflow>\n      </TabsContext.Provider>\n    );\n  }\n);\n"],"names":["TabstripNext","tabstripCss"],"mappings":"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"}

package/dist-es/toggle-button/ToggleButton.css.js

@@ -1,4 +1,4 @@
-var css_248z = ".salt-density-touch {\n  --toggleButton-icon-padding: 11px;\n}\n\n.salt-density-low {\n  --toggleButton-icon-padding: 7px;\n}\n\n.salt-density-medium {\n  --toggleButton-icon-padding: 5px;\n}\n\n.salt-density-high {\n  --toggleButton-icon-padding: 1px;\n}\n\n.saltToggleButton-horizontal.saltToggleButton-iconOnly {\n  padding: var(--saltToggleButton-icon-padding, var(--toggleButton-icon-padding));\n}\n\n.saltToggleButton {\n  --saltButton-text-color: var(--salt-text-primary-foreground);\n  --saltButton-text-color-disabled: var(--salt-text-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-text-primary-foreground);\n}\n\n.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-text-color-active: var(--salt-text-primary-foreground-disabled);\n  --saltButton-text-color-hover: var(--salt-text-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* CTA */\n.saltToggleButton-cta {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-hover);\n  --saltButton-background-active: var(--salt-selectable-cta-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-background-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-selected);\n}\n.saltToggleButton-cta.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n  --saltButton-background-active: var(--salt-selectable-cta-background-disabled);\n}\n.saltToggleButton-cta.saltToggleButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-selectedDisabled);\n\n  --saltIcon-color-active: var(--salt-selectable-cta-foreground-selectedDisabled);\n}\n.saltToggleButton-cta.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-cta-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-selected);\n  --saltButton-text-color: var(--salt-selectable-cta-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-selected);\n}\n.saltToggleButton-cta.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-cta-background-selectedDisabled);\n  --saltButton-text-color-disabled: var(--salt-selectable-cta-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-selectedDisabled);\n}\n\n/* Primary */\n.saltToggleButton-primary {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-hover);\n  --saltButton-background-active: var(--salt-selectable-primary-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-primary-background-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-selected);\n}\n.saltToggleButton-primary.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-primary-background-disabled);\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n}\n.saltToggleButton-primary.saltToggleButton-disabled.saltButton-active {\n  --saltButton-background-active: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n.saltToggleButton-primary.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-primary-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-selected);\n  --saltButton-text-color: var(--salt-selectable-primary-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-selected);\n}\n.saltToggleButton-primary.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-primary-background-selectedDisabled);\n  --saltButton-text-color-disabled: var(--salt-selectable-primary-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n\n/* Secondary */\n.saltToggleButton-secondary {\n  --saltButton-background: var(--salt-selectable-background);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-hover);\n  --saltButton-background-active: var(--salt-selectable-secondary-background-selected);\n  --saltButton-background-disabled: var(--salt-selectable-background-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-selected);\n}\n.saltToggleButton-secondary.saltToggleButton-disabled.saltButton-disabled {\n  --saltButton-background-active: var(--salt-selectable-secondary-background-disabled);\n  --saltButton-background-hover: var(--salt-selectable-background-disabled);\n}\n.saltToggleButton-secondary.saltToggleButton-disabled.saltButton-active {\n  --saltButton-background-active: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-selectedDisabled);\n\n  --saltIcon-color-active: var(--salt-selectable-secondary-foreground-selectedDisabled);\n}\n.saltToggleButton-secondary.saltToggleButton-toggled {\n  --saltButton-background: var(--salt-selectable-secondary-background-selected);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-selected);\n  --saltButton-text-color: var(--salt-selectable-secondary-foreground-selected);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-selected);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-selected);\n}\n.saltToggleButton-secondary.saltToggleButton-toggled.saltToggleButton-disabled {\n  --saltButton-background-disabled: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-background-hover: var(--salt-selectable-secondary-background-selectedDisabled);\n  --saltButton-text-color-disabled: var(--salt-selectable-secondary-foreground-selectedDisabled);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-selectedDisabled);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-selectedDisabled);\n}\n";
+var css_248z = ".saltToggleButton {\n  align-items: center;\n  justify-content: center;\n  appearance: none;\n  display: inline-flex;\n  background: var(--salt-actionable-secondary-background);\n  border: 0 solid transparent;\n  border-radius: 0;\n  height: var(--salt-size-base);\n  color: var(--salt-actionable-secondary-foreground);\n  text-transform: var(--salt-actionable-textTransform);\n  font-weight: var(--salt-actionable-secondary-fontWeight);\n  font-family: var(--salt-text-fontFamily);\n  text-align: var(--salt-actionable-textAlign);\n  letter-spacing: var(--salt-actionable-letterSpacing);\n  line-height: var(--salt-text-lineHeight);\n  font-size: var(--salt-text-fontSize);\n  padding-inline: var(--salt-spacing-100);\n  gap: var(--salt-spacing-50);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground);\n}\n\n.saltToggleButton:hover {\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton:focus-visible {\n  outline: var(--salt-focused-outline);\n  background: var(--salt-actionable-secondary-background-hover);\n  color: var(--salt-actionable-secondary-foreground-hover);\n  cursor: var(--salt-actionable-cursor-hover);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-hover);\n}\n\n.saltToggleButton[aria-checked=\"true\"]:focus-visible {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton[aria-checked=\"true\"] {\n  background: var(--salt-actionable-secondary-background-active);\n  color: var(--salt-actionable-secondary-foreground-active);\n  cursor: var(--salt-actionable-cursor-active);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-active);\n}\n\n.saltToggleButton:disabled {\n  background: var(--salt-actionable-secondary-background-disabled);\n  cursor: var(--salt-actionable-cursor-disabled);\n  color: var(--salt-actionable-secondary-foreground-disabled);\n  --saltIcon-color: var(--salt-actionable-secondary-foreground-disabled);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=ToggleButton.css.js.map

package/dist-es/toggle-button/ToggleButton.js

@@ -1,27 +1,26 @@
 import { jsx } from 'react/jsx-runtime';
-import { makePrefixer, Tooltip, Button } from '@salt-ds/core';
+import { forwardRef, useRef } from 'react';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
 import { clsx } from 'clsx';
-import { forwardRef, useState, useRef, useContext, useCallback, useEffect } from 'react';
-import { ToggleButtonGroupContext } from './internal/ToggleButtonGroupContext.js';
+import '../toggle-button-group/ToggleButtonGroup.js';
+import { useToggleButtonGroup } from '../toggle-button-group/ToggleButtonGroupContext.js';
 import { useWindow } from '@salt-ds/window';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import css_248z from './ToggleButton.css.js';
 
 const withBaseName = makePrefixer("saltToggleButton");
 const ToggleButton = forwardRef(
-  (props, ref) => {
+  function ToggleButton2(props, ref) {
     const {
-      "aria-label": ariaLabel,
+      children,
       className,
-      onToggle,
-      toggled = false,
-      tooltipText = ariaLabel,
-      variant: variantProp = "primary",
       disabled: disabledProp,
-      disableTooltip: disableTooltipProp,
-      focusableWhenDisabled: focusableWhenDisabledProp,
-      "data-button-index": index,
-      ...restProps
+      value,
+      onClick,
+      onFocus,
+      onChange,
+      selected: selectedProp,
+      ...rest
     } = props;
     const targetWindow = useWindow();
     useComponentCssInjection({
@@ -29,70 +28,41 @@ const ToggleButton = forwardRef(
       css: css_248z,
       window: targetWindow
     });
-    const [iconOnly, setIconOnly] = useState(false);
     const buttonRef = useRef(null);
-    const groupContext = useContext(ToggleButtonGroupContext);
-    const handleIconOnlyButton = useCallback(
-      (button) => {
-        setIconOnly(
-          (button == null ? void 0 : button.querySelector(".saltIcon")) != null && (button == null ? void 0 : button.childElementCount) === 1
-        );
-      },
-      [setIconOnly]
-    );
-    const {
-      register,
-      unregister,
-      disabled = disabledProp,
-      disableTooltip = disableTooltipProp,
-      focusableWhenDisabled = focusableWhenDisabledProp,
-      orientation = "horizontal",
-      variant = variantProp
-    } = groupContext || {};
-    useEffect(() => {
-      if (index !== void 0 && register && unregister && (!disabled || focusableWhenDisabled)) {
-        register(buttonRef.current, index);
-        return function cleanup() {
-          unregister(index);
-        };
-      }
-    }, [index, disabled, focusableWhenDisabled, register, unregister]);
-    const handleToggle = (event) => {
-      if (!disabled) {
-        onToggle == null ? void 0 : onToggle(event, !toggled);
-      }
+    const handleRef = useForkRef(ref, buttonRef);
+    const toggleButtonGroup = useToggleButtonGroup();
+    const toggleButtonGroupSelected = toggleButtonGroup ? toggleButtonGroup.isSelected(value) : selectedProp;
+    const focusable = toggleButtonGroup ? toggleButtonGroup == null ? void 0 : toggleButtonGroup.isFocused(value) : true;
+    const disabled = (toggleButtonGroup == null ? void 0 : toggleButtonGroup.disabled) || disabledProp;
+    const [selected, setSelected] = useControlled({
+      controlled: toggleButtonGroupSelected,
+      default: Boolean(selectedProp),
+      name: "ToggleButton",
+      state: "selected"
+    });
+    const handleClick = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.select(event);
+      setSelected(!selected);
+      onChange == null ? void 0 : onChange(event);
+      onClick == null ? void 0 : onClick(event);
+    };
+    const handleFocus = (event) => {
+      toggleButtonGroup == null ? void 0 : toggleButtonGroup.focus(value);
+      onFocus == null ? void 0 : onFocus(event);
     };
-    const tabIndex = toggled && !disabled ? 0 : -1;
-    return /* @__PURE__ */ jsx(Tooltip, {
-      content: tooltipText,
-      disabled: disableTooltip,
-      placement: orientation === "horizontal" ? "bottom" : "right",
-      children: /* @__PURE__ */ jsx(Button, {
-        ref: handleIconOnlyButton,
-        "aria-checked": toggled,
-        "aria-label": ariaLabel,
-        "aria-posinset": index !== void 0 ? index + 1 : void 0,
-        className: clsx(
-          withBaseName(),
-          withBaseName(orientation),
-          {
-            [withBaseName("primary")]: variant === "primary",
-            [withBaseName("cta")]: variant === "cta",
-            [withBaseName("secondary")]: variant === "secondary",
-            [withBaseName("toggled")]: toggled,
-            [withBaseName("disabled")]: disabled,
-            [withBaseName("iconOnly")]: iconOnly
-          },
-          className
-        ),
-        onClick: handleToggle,
-        disabled,
-        focusableWhenDisabled,
-        role: groupContext ? "radio" : "checkbox",
-        tabIndex: groupContext ? tabIndex : void 0,
-        variant,
-        ...restProps
-      })
+    const ariaChecked = selected && !disabled;
+    return /* @__PURE__ */ jsx("button", {
+      "aria-checked": ariaChecked,
+      className: clsx(withBaseName(), className),
+      disabled,
+      role: toggleButtonGroup ? "radio" : "checkbox",
+      ref: handleRef,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      tabIndex: focusable && !disabled ? 0 : -1,
+      value,
+      ...rest,
+      children
     });
   }
 );

package/dist-es/toggle-button/ToggleButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, Tooltip } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport {\n  forwardRef,\n  SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ToggleButtonGroupContext } from \"./internal/ToggleButtonGroupContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport type ToggleButtonToggleEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonProps extends ButtonProps {\n  \"aria-label\"?: string;\n  \"data-button-index\"?: number;\n  toggled?: boolean;\n  tooltipText?: string;\n  disableTooltip?: boolean;\n  onToggle?: ToggleButtonToggleEventHandler;\n}\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  (props, ref) => {\n    const {\n      \"aria-label\": ariaLabel,\n      className,\n      onToggle,\n      toggled = false,\n      tooltipText = ariaLabel,\n      variant: variantProp = \"primary\",\n      disabled: disabledProp,\n      disableTooltip: disableTooltipProp,\n      focusableWhenDisabled: focusableWhenDisabledProp,\n      \"data-button-index\": index,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const [iconOnly, setIconOnly] = useState(false);\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const groupContext = useContext(ToggleButtonGroupContext);\n\n    const handleIconOnlyButton = useCallback(\n      (button: HTMLButtonElement | null) => {\n        setIconOnly(\n          button?.querySelector(\".saltIcon\") != null &&\n            button?.childElementCount === 1\n        );\n      },\n      [setIconOnly]\n    );\n\n    const {\n      register,\n      unregister,\n      disabled = disabledProp,\n      disableTooltip = disableTooltipProp,\n      focusableWhenDisabled = focusableWhenDisabledProp,\n      orientation = \"horizontal\",\n      variant = variantProp,\n    } = groupContext || {};\n\n    useEffect(() => {\n      if (\n        index !== undefined &&\n        register &&\n        unregister &&\n        (!disabled || focusableWhenDisabled)\n      ) {\n        register(buttonRef.current, index);\n\n        return function cleanup() {\n          unregister(index);\n        };\n      }\n    }, [index, disabled, focusableWhenDisabled, register, unregister]);\n\n    const handleToggle = (event: SyntheticEvent<HTMLButtonElement>) => {\n      if (!disabled) {\n        onToggle?.(event, !toggled);\n      }\n    };\n\n    const tabIndex = toggled && !disabled ? 0 : -1;\n\n    return (\n      <Tooltip\n        content={tooltipText}\n        disabled={disableTooltip}\n        placement={orientation === \"horizontal\" ? \"bottom\" : \"right\"}\n      >\n        <Button\n          ref={handleIconOnlyButton}\n          aria-checked={toggled}\n          aria-label={ariaLabel}\n          aria-posinset={index !== undefined ? index + 1 : undefined}\n          className={clsx(\n            withBaseName(),\n            withBaseName(orientation),\n            {\n              [withBaseName(\"primary\")]: variant === \"primary\",\n              [withBaseName(\"cta\")]: variant === \"cta\",\n              [withBaseName(\"secondary\")]: variant === \"secondary\",\n              [withBaseName(\"toggled\")]: toggled,\n              [withBaseName(\"disabled\")]: disabled,\n              [withBaseName(\"iconOnly\")]: iconOnly,\n            },\n            className\n          )}\n          onClick={handleToggle}\n          disabled={disabled}\n          focusableWhenDisabled={focusableWhenDisabled}\n          role={groupContext ? \"radio\" : \"checkbox\"}\n          tabIndex={groupContext ? tabIndex : undefined}\n          variant={variant}\n          {...restProps}\n        />\n      </Tooltip>\n    );\n  }\n);\n"],"names":["toggleButtonCss"],"mappings":";;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAgB7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;AAAA,MACJ,YAAc,EAAA,SAAA;AAAA,MACd,SAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAU,GAAA,KAAA;AAAA,MACV,WAAc,GAAA,SAAA;AAAA,MACd,SAAS,WAAc,GAAA,SAAA;AAAA,MACvB,QAAU,EAAA,YAAA;AAAA,MACV,cAAgB,EAAA,kBAAA;AAAA,MAChB,qBAAuB,EAAA,yBAAA;AAAA,MACvB,mBAAqB,EAAA,KAAA;AAAA,MAClB,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC9C,IAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA,CAAA;AAChD,IAAM,MAAA,YAAA,GAAe,WAAW,wBAAwB,CAAA,CAAA;AAExD,IAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,MAC3B,CAAC,MAAqC,KAAA;AACpC,QAAA,WAAA;AAAA,UAAA,CACE,MAAQ,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAA,aAAA,CAAc,WAAgB,CAAA,KAAA,IAAA,IAAA,CACpC,iCAAQ,iBAAsB,MAAA,CAAA;AAAA,SAClC,CAAA;AAAA,OACF;AAAA,MACA,CAAC,WAAW,CAAA;AAAA,KACd,CAAA;AAEA,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAW,GAAA,YAAA;AAAA,MACX,cAAiB,GAAA,kBAAA;AAAA,MACjB,qBAAwB,GAAA,yBAAA;AAAA,MACxB,WAAc,GAAA,YAAA;AAAA,MACd,OAAU,GAAA,WAAA;AAAA,KACZ,GAAI,gBAAgB,EAAC,CAAA;AAErB,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IACE,UAAU,KACV,CAAA,IAAA,QAAA,IACA,UACC,KAAA,CAAC,YAAY,qBACd,CAAA,EAAA;AACA,QAAS,QAAA,CAAA,SAAA,CAAU,SAAS,KAAK,CAAA,CAAA;AAEjC,QAAA,OAAO,SAAS,OAAU,GAAA;AACxB,UAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAAA,SAClB,CAAA;AAAA,OACF;AAAA,OACC,CAAC,KAAA,EAAO,UAAU,qBAAuB,EAAA,QAAA,EAAU,UAAU,CAAC,CAAA,CAAA;AAEjE,IAAM,MAAA,YAAA,GAAe,CAAC,KAA6C,KAAA;AACjE,MAAA,IAAI,CAAC,QAAU,EAAA;AACb,QAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,OAAO,CAAC,OAAA,CAAA,CAAA;AAAA,OACrB;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,QAAW,GAAA,OAAA,IAAW,CAAC,QAAA,GAAW,CAAI,GAAA,CAAA,CAAA,CAAA;AAE5C,IAAA,uBACG,GAAA,CAAA,OAAA,EAAA;AAAA,MACC,OAAS,EAAA,WAAA;AAAA,MACT,QAAU,EAAA,cAAA;AAAA,MACV,SAAA,EAAW,WAAgB,KAAA,YAAA,GAAe,QAAW,GAAA,OAAA;AAAA,MAErD,QAAC,kBAAA,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,GAAK,EAAA,oBAAA;AAAA,QACL,cAAc,EAAA,OAAA;AAAA,QACd,YAAY,EAAA,SAAA;AAAA,QACZ,eAAe,EAAA,KAAA,KAAU,KAAY,CAAA,GAAA,KAAA,GAAQ,CAAI,GAAA,KAAA,CAAA;AAAA,QACjD,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,WAAW,CAAA;AAAA,UACxB;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAA,GAAI,OAAY,KAAA,SAAA;AAAA,YACvC,CAAC,YAAA,CAAa,KAAK,CAAA,GAAI,OAAY,KAAA,KAAA;AAAA,YACnC,CAAC,YAAA,CAAa,WAAW,CAAA,GAAI,OAAY,KAAA,WAAA;AAAA,YACzC,CAAC,YAAa,CAAA,SAAS,CAAI,GAAA,OAAA;AAAA,YAC3B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,WAC9B;AAAA,UACA,SAAA;AAAA,SACF;AAAA,QACA,OAAS,EAAA,YAAA;AAAA,QACT,QAAA;AAAA,QACA,qBAAA;AAAA,QACA,IAAA,EAAM,eAAe,OAAU,GAAA,UAAA;AAAA,QAC/B,QAAA,EAAU,eAAe,QAAW,GAAA,KAAA,CAAA;AAAA,QACpC,OAAA;AAAA,QACC,GAAG,SAAA;AAAA,OACN,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  forwardRef,\n  useRef,\n  MouseEvent,\n  FocusEvent,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useToggleButtonGroup } from \"../toggle-button-group\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport toggleButtonCss from \"./ToggleButton.css\";\n\nexport interface ToggleButtonProps extends ComponentProps<\"button\"> {\n  selected?: boolean;\n  onChange?: (event: MouseEvent<HTMLButtonElement>) => void;\n  value: string | ReadonlyArray<string> | number | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButton\");\n\nexport const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonProps>(\n  function ToggleButton(props, ref) {\n    const {\n      children,\n      className,\n      disabled: disabledProp,\n      value,\n      onClick,\n      onFocus,\n      onChange,\n      selected: selectedProp,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-toggle-button\",\n      css: toggleButtonCss,\n      window: targetWindow,\n    });\n\n    const buttonRef = useRef<HTMLButtonElement>(null);\n    const handleRef = useForkRef(ref, buttonRef);\n\n    const toggleButtonGroup = useToggleButtonGroup();\n\n    const toggleButtonGroupSelected = toggleButtonGroup\n      ? toggleButtonGroup.isSelected(value)\n      : selectedProp;\n    const focusable = toggleButtonGroup\n      ? toggleButtonGroup?.isFocused(value)\n      : true;\n    const disabled = toggleButtonGroup?.disabled || disabledProp;\n\n    const [selected, setSelected] = useControlled({\n      controlled: toggleButtonGroupSelected,\n      default: Boolean(selectedProp),\n      name: \"ToggleButton\",\n      state: \"selected\",\n    });\n\n    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.select(event);\n      setSelected(!selected);\n      onChange?.(event);\n      onClick?.(event);\n    };\n\n    const handleFocus = (event: FocusEvent<HTMLButtonElement>) => {\n      toggleButtonGroup?.focus(value);\n      onFocus?.(event);\n    };\n\n    const ariaChecked = selected && !disabled;\n\n    return (\n      <button\n        aria-checked={ariaChecked}\n        className={clsx(withBaseName(), className)}\n        disabled={disabled}\n        role={toggleButtonGroup ? \"radio\" : \"checkbox\"}\n        ref={handleRef}\n        onClick={handleClick}\n        onFocus={handleFocus}\n        tabIndex={focusable && !disabled ? 0 : -1}\n        value={value}\n        {...rest}\n      >\n        {children}\n      </button>\n    );\n  }\n);\n"],"names":["ToggleButton","toggleButtonCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroup.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltToggleButtonGroup {\n  display: flex;\n  background: var(--salt-container-primary-background);\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  width: fit-content;\n  gap: var(--salt-spacing-50);\n  padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  flex-direction: row;\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton {\n  justify-content: start;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-es/toggle-button-group/ToggleButtonGroup.js

@@ -0,0 +1,107 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState, useCallback, useMemo } from 'react';
+import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { useWindow } from '@salt-ds/window';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { ToggleButtonGroupContext } from './ToggleButtonGroupContext.js';
+import css_248z from './ToggleButtonGroup.css.js';
+
+const withBaseName = makePrefixer("saltToggleButtonGroup");
+const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2(props, ref) {
+  const {
+    children,
+    className,
+    value: valueProp,
+    defaultValue,
+    disabled,
+    onChange,
+    onKeyDown,
+    orientation = "horizontal",
+    ...rest
+  } = props;
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-toggle-button-group",
+    css: css_248z,
+    window: targetWindow
+  });
+  const groupRef = useRef(null);
+  const handleRef = useForkRef(ref, groupRef);
+  const [value, setValue] = useControlled({
+    default: defaultValue,
+    controlled: valueProp,
+    name: "ToggleButtonGroup",
+    state: "value"
+  });
+  const [focused, setFocused] = useState(value);
+  const select = useCallback(
+    (event) => {
+      const newValue = event.currentTarget.value;
+      setValue(newValue);
+      if (value !== newValue) {
+        onChange == null ? void 0 : onChange(event);
+      }
+    },
+    [onChange, value, setValue]
+  );
+  const isSelected = useCallback(
+    (id) => {
+      return value === id;
+    },
+    [value]
+  );
+  const focus = (id) => {
+    setFocused(id);
+  };
+  const isFocused = useCallback(
+    (id) => {
+      return focused === id || !focused;
+    },
+    [focused]
+  );
+  const contextValue = useMemo(
+    () => ({
+      select,
+      isSelected,
+      focus,
+      isFocused,
+      disabled
+    }),
+    [select, isSelected, isFocused, disabled]
+  );
+  const handleKeyDown = (event) => {
+    var _a, _b, _c, _d;
+    const elements = Array.from(
+      (_b = (_a = groupRef.current) == null ? void 0 : _a.querySelectorAll("button:not([disabled])")) != null ? _b : []
+    );
+    const currentIndex = elements.findIndex(
+      (element) => element === document.activeElement
+    );
+    switch (event.key) {
+      case "ArrowDown":
+      case "ArrowRight":
+        (_c = elements[(currentIndex + 1) % elements.length]) == null ? void 0 : _c.focus();
+        break;
+      case "ArrowUp":
+      case "ArrowLeft":
+        (_d = elements[(currentIndex - 1 + elements.length) % elements.length]) == null ? void 0 : _d.focus();
+        break;
+    }
+    onKeyDown == null ? void 0 : onKeyDown(event);
+  };
+  return /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, {
+    value: contextValue,
+    children: /* @__PURE__ */ jsx("div", {
+      className: clsx(withBaseName(), withBaseName(orientation), className),
+      role: "radiogroup",
+      ref: handleRef,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children
+    })
+  });
+});
+
+export { ToggleButtonGroup };
+//# sourceMappingURL=ToggleButtonGroup.js.map

package/dist-es/toggle-button-group/ToggleButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button-group/ToggleButtonGroup.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport { ToggleButtonGroupContext } from \"./ToggleButtonGroupContext\";\nimport toggleButtonGroupCss from \"./ToggleButtonGroup.css\";\n\nexport interface ToggleButtonGroupProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * The default value. Use when the component is not controlled.\n   */\n  defaultValue?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * If `true`, the Toggle Button Group will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The value. Use when the component is controlled.\n   */\n  value?: string | ReadonlyArray<string> | number | undefined;\n  /**\n   * Callback fired when the selection changes.\n   * @param event\n   */\n  onChange?: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  /**\n   * The orientation of the toggle buttons.\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(props, ref) {\n  const {\n    children,\n    className,\n    value: valueProp,\n    defaultValue,\n    disabled,\n    onChange,\n    onKeyDown,\n    orientation = \"horizontal\",\n    ...rest\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-toggle-button-group\",\n    css: toggleButtonGroupCss,\n    window: targetWindow,\n  });\n\n  const groupRef = useRef<HTMLDivElement>(null);\n  const handleRef = useForkRef(ref, groupRef);\n\n  const [value, setValue] = useControlled({\n    default: defaultValue,\n    controlled: valueProp,\n    name: \"ToggleButtonGroup\",\n    state: \"value\",\n  });\n  const [focused, setFocused] = useState<\n    string | ReadonlyArray<string> | number | undefined\n  >(value);\n\n  const select = useCallback(\n    (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newValue = event.currentTarget.value;\n      setValue(newValue);\n      if (value !== newValue) {\n        onChange?.(event);\n      }\n    },\n    [onChange, value, setValue]\n  );\n\n  const isSelected = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return value === id;\n    },\n    [value]\n  );\n\n  const focus = (id: string | ReadonlyArray<string> | number | undefined) => {\n    setFocused(id);\n  };\n\n  const isFocused = useCallback(\n    (id: string | ReadonlyArray<string> | number | undefined) => {\n      return focused === id || !focused;\n    },\n    [focused]\n  );\n\n  const contextValue = useMemo(\n    () => ({\n      select,\n      isSelected,\n      focus,\n      isFocused,\n      disabled,\n    }),\n    [select, isSelected, isFocused, disabled]\n  );\n\n  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const elements: HTMLElement[] = Array.from(\n      groupRef.current?.querySelectorAll(\"button:not([disabled])\") ?? []\n    );\n    const currentIndex = elements.findIndex(\n      (element) => element === document.activeElement\n    );\n    switch (event.key) {\n      case \"ArrowDown\":\n      case \"ArrowRight\":\n        elements[(currentIndex + 1) % elements.length]?.focus();\n        break;\n      case \"ArrowUp\":\n      case \"ArrowLeft\":\n        elements[\n          (currentIndex - 1 + elements.length) % elements.length\n        ]?.focus();\n        break;\n    }\n\n    onKeyDown?.(event);\n  };\n\n  return (\n    <ToggleButtonGroupContext.Provider value={contextValue}>\n      <div\n        className={clsx(withBaseName(), withBaseName(orientation), className)}\n        role=\"radiogroup\"\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        {...rest}\n      >\n        {children}\n      </div>\n    </ToggleButtonGroupContext.Provider>\n  );\n});\n"],"names":["ToggleButtonGroup","toggleButtonGroupCss"],"mappings":"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"}

package/dist-es/toggle-button-group/ToggleButtonGroupContext.js

@@ -0,0 +1,10 @@
+import { createContext } from '@salt-ds/core';
+import { useContext } from 'react';
+
+const ToggleButtonGroupContext = createContext("ToggleButtonGroupContext", void 0);
+function useToggleButtonGroup() {
+  return useContext(ToggleButtonGroupContext);
+}
+
+export { ToggleButtonGroupContext, useToggleButtonGroup };
+//# sourceMappingURL=ToggleButtonGroupContext.js.map

package/dist-es/toggle-button-group/ToggleButtonGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button-group/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { SyntheticEvent, useContext } from \"react\";\n\nexport interface ToggleButtonGroupContextValue {\n  disabled?: boolean;\n  select: (event: SyntheticEvent<HTMLButtonElement>) => void;\n  isSelected: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n  focus: (id: string | ReadonlyArray<string> | number | undefined) => void;\n  isFocused: (\n    id: string | ReadonlyArray<string> | number | undefined\n  ) => boolean;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextValue | undefined\n>(\"ToggleButtonGroupContext\", undefined);\n\nexport function useToggleButtonGroup() {\n  return useContext(ToggleButtonGroupContext);\n}\n"],"names":[],"mappings":";;;AAea,MAAA,wBAAA,GAA2B,aAEtC,CAAA,0BAAA,EAA4B,KAAS,CAAA,EAAA;AAEhC,SAAS,oBAAuB,GAAA;AACrC,EAAA,OAAO,WAAW,wBAAwB,CAAA,CAAA;AAC5C;;;;"}