@salt-ds/lab 1.0.0-alpha.0

package/dist-es/packages/lab/src/tabs/useTabs.js

@@ -0,0 +1,39 @@
+import { useIdMemo, useControlled } from '@salt-ds/core';
+import { useCallback } from 'react';
+import { useItemsWithIds } from './useItemsWithIds.js';
+
+const useTabs = ({
+  activeTabIndex: activeTabIndexProp,
+  children,
+  defaultActiveTabIndex,
+  id: idProp,
+  onActiveChange
+}) => {
+  var _a;
+  const id = useIdMemo(idProp);
+  const [itemsWithIds] = useItemsWithIds(children, id);
+  const [activeTabIndex, setActiveTabIndex] = useControlled({
+    controlled: activeTabIndexProp,
+    default: defaultActiveTabIndex != null ? defaultActiveTabIndex : 0,
+    name: "useTabs",
+    state: "activeTabIndex"
+  });
+  const handleTabActivated = useCallback(
+    (tabIndex) => {
+      setActiveTabIndex(tabIndex);
+      onActiveChange == null ? void 0 : onActiveChange(tabIndex);
+    },
+    [onActiveChange, setActiveTabIndex]
+  );
+  const contentItem = itemsWithIds[activeTabIndex];
+  return {
+    id,
+    onActiveChange: handleTabActivated,
+    activeTabIndex,
+    tabs: itemsWithIds,
+    tabPanel: (_a = contentItem == null ? void 0 : contentItem.element) != null ? _a : null
+  };
+};
+
+export { useTabs };
+//# sourceMappingURL=useTabs.js.map

package/dist-es/packages/lab/src/tabs/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabs.js","sources":["../src/tabs/useTabs.ts"],"sourcesContent":["import { useControlled, useIdMemo } from \"@salt-ds/core\";\nimport { ReactNode, useCallback } from \"react\";\nimport { TabDescriptor } from \"./TabsTypes\";\nimport { useItemsWithIds } from \"./useItemsWithIds\";\n\nexport interface TabsHookProps {\n  activeTabIndex?: number;\n  children: ReactNode;\n  defaultActiveTabIndex?: number;\n  id?: string;\n  onActiveChange?: (tabIndex: number) => void;\n}\n\nexport interface TabsHookResult {\n  activeTabIndex?: number;\n  id: string;\n  onActiveChange?: (tabIndex: number) => void;\n  tabPanel?: ReactNode;\n  tabs: TabDescriptor[];\n}\n\nexport const useTabs = ({\n  activeTabIndex: activeTabIndexProp,\n  children,\n  defaultActiveTabIndex,\n  id: idProp,\n  onActiveChange,\n}: TabsHookProps): TabsHookResult => {\n  const id = useIdMemo(idProp);\n  const [itemsWithIds] = useItemsWithIds(children, id);\n\n  const [activeTabIndex, setActiveTabIndex] = useControlled({\n    controlled: activeTabIndexProp,\n    default: defaultActiveTabIndex ?? 0,\n    name: \"useTabs\",\n    state: \"activeTabIndex\",\n  });\n\n  const handleTabActivated = useCallback(\n    (tabIndex: number) => {\n      setActiveTabIndex(tabIndex);\n      onActiveChange?.(tabIndex);\n    },\n    [onActiveChange, setActiveTabIndex]\n  );\n\n  const contentItem = itemsWithIds[activeTabIndex];\n\n  return {\n    id,\n    onActiveChange: handleTabActivated,\n    activeTabIndex,\n    tabs: itemsWithIds,\n    tabPanel: contentItem?.element ?? null,\n  };\n};\n"],"names":[],"mappings":";;;;AAqBO,MAAM,UAAU,CAAC;AAAA,EACtB,cAAgB,EAAA,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,EAAI,EAAA,MAAA;AAAA,EACJ,cAAA;AACF,CAAqC,KAAA;AA3BrC,EAAA,IAAA,EAAA,CAAA;AA4BE,EAAM,MAAA,EAAA,GAAK,UAAU,MAAM,CAAA,CAAA;AAC3B,EAAA,MAAM,CAAC,YAAY,CAAI,GAAA,eAAA,CAAgB,UAAU,EAAE,CAAA,CAAA;AAEnD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,aAAc,CAAA;AAAA,IACxD,UAAY,EAAA,kBAAA;AAAA,IACZ,SAAS,qBAAyB,IAAA,IAAA,GAAA,qBAAA,GAAA,CAAA;AAAA,IAClC,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,gBAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,QAAqB,KAAA;AACpB,MAAA,iBAAA,CAAkB,QAAQ,CAAA,CAAA;AAC1B,MAAiB,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,gBAAgB,iBAAiB,CAAA;AAAA,GACpC,CAAA;AAEA,EAAA,MAAM,cAAc,YAAa,CAAA,cAAA,CAAA,CAAA;AAEjC,EAAO,OAAA;AAAA,IACL,EAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,IAChB,cAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,IACN,QAAA,EAAA,CAAU,EAAa,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAA,OAAA,KAAb,IAAwB,GAAA,EAAA,GAAA,IAAA;AAAA,GACpC,CAAA;AACF;;;;"}

package/dist-es/packages/lab/src/tabs/useTabstrip.js

@@ -0,0 +1,211 @@
+import { useRef, useCallback, createElement, useEffect } from 'react';
+import { Tab } from './Tab.js';
+import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { useDragDrop } from './drag-drop/useDragDrop.js';
+import { useSelection } from './useSelection.js';
+import { useEditableItem } from './useEditableItem.js';
+
+const useTabstrip = ({
+  activeTabIndex: activeTabIndexProp,
+  allowDragDrop = false,
+  collectionHook,
+  defaultActiveTabIndex,
+  editing: editingProp,
+  idRoot,
+  innerContainerRef,
+  keyBoardActivation,
+  onActiveChange,
+  onCloseTab,
+  onEnterEditMode,
+  onExitEditMode,
+  onMoveTab,
+  orientation,
+  promptForNewTabName
+}) => {
+  const lastSelection = useRef(
+    activeTabIndexProp || defaultActiveTabIndex || 0
+  );
+  const pendingNewTab = useRef(null);
+  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);
+  const keyboardHook = useKeyboardNavigation({
+    indexPositions: collectionHook.data,
+    keyBoardActivation,
+    orientation,
+    selectedIndex: lastSelection.current
+  });
+  const selectionHook = useSelection({
+    defaultSelected: defaultActiveTabIndex,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    onSelectionChange: onActiveChange,
+    selected: activeTabIndexProp
+  });
+  lastSelection.current = selectionHook.selected;
+  const handleDrop = useCallback(
+    (fromIndex, toIndex) => {
+      onMoveTab == null ? void 0 : onMoveTab(fromIndex, toIndex);
+      if (toIndex === -1) ; else {
+        if (selectionHook.selected === fromIndex) {
+          selectionHook.activateTab(toIndex);
+        } else if (fromIndex > selectionHook.selected && toIndex <= selectionHook.selected) {
+          selectionHook.activateTab(selectionHook.selected + 1);
+        } else if (fromIndex < selectionHook.selected && toIndex >= selectionHook.selected) {
+          selectionHook.activateTab(selectionHook.selected - 1);
+        }
+      }
+    },
+    [onMoveTab, selectionHook]
+  );
+  const dragDropHook = useDragDrop({
+    allowDragDrop,
+    containerRef: innerContainerRef,
+    extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".saltTab"
+  });
+  const editableHook = useEditableItem({
+    editing: editingProp,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    indexPositions: collectionHook.data,
+    onEnterEditMode,
+    onExitEditMode
+  });
+  const handleExitEditMode = useCallback(
+    (originalValue, editedValue, allowDeactivation, tabIndex) => {
+      editableHook.onExitEditMode(
+        originalValue,
+        editedValue,
+        allowDeactivation,
+        tabIndex
+      );
+      if (!allowDeactivation) {
+        keyboardHook.focusTab(tabIndex, false, true);
+      }
+    },
+    [editableHook, keyboardHook]
+  );
+  const handleClick = useCallback(
+    (evt, tabIndex) => {
+      if (!dragDropHook.isDragging) {
+        keyboardHook.onClick(evt, tabIndex);
+        selectionHook.onClick(evt, tabIndex);
+      }
+    },
+    [dragDropHook.isDragging, keyboardHook, selectionHook]
+  );
+  const handleKeyDown = useCallback(
+    (evt) => {
+      keyboardHook.onKeyDown(evt);
+      if (!evt.defaultPrevented) {
+        selectionHook.onKeyDown(evt);
+      }
+      if (!evt.defaultPrevented) {
+        editableHook.onKeyDown(evt);
+      }
+    },
+    [keyboardHook, selectionHook, editableHook]
+  );
+  const navigationProps2 = {
+    onFocus: keyboardHook.onFocus,
+    onKeyDown: handleKeyDown
+  };
+  const tabProps = {
+    onClick: handleClick,
+    onEnterEditMode: editableHook.onEnterEditMode,
+    onExitEditMode: handleExitEditMode
+  };
+  const addTab = useCallback(
+    (indexPosition = collectionHook.data.length - 1) => {
+      const tabId = pendingNewTab.current = `${idRoot}-${collectionHook.data.length}`;
+      const overflowIndicator = collectionHook.data.find(
+        (i) => i.isOverflowIndicator
+      );
+      const newTabs = collectionHook.data.filter(
+        (item) => {
+          var _a;
+          return (_a = item.label) == null ? void 0 : _a.startsWith("New Tab");
+        }
+      );
+      const count = newTabs.length + 1;
+      collectionHook.dispatch({
+        type: "add-child-item",
+        idRoot,
+        element: createElement(Tab, {
+          editable: true,
+          label: `New Tab ${count}`,
+          id: tabId
+        }),
+        indexPosition: overflowIndicator ? indexPosition - 1 : indexPosition
+      });
+    },
+    [collectionHook, idRoot]
+  );
+  const selectNewTab = useCallback(
+    (tabId) => {
+      const tab = collectionHook.data.find((item) => item.id === tabId);
+      if (tab) {
+        selectionHook.activateTab(tab.index);
+        if (promptForNewTabName) {
+          editableHook.setEditing(true);
+        } else {
+          keyboardHook.focusTab(tab.index);
+        }
+      }
+    },
+    [
+      collectionHook.data,
+      editableHook,
+      keyboardHook,
+      promptForNewTabName,
+      selectionHook
+    ]
+  );
+  const closeTab = useCallback(
+    (indexPosition) => {
+      if (!collectionHook.isControlled) {
+        collectionHook.dispatch({
+          type: "remove-item",
+          indexPosition
+        });
+        if (collectionHook.data.length > 1) {
+          if (indexPosition === selectionHook.selected && indexPosition === collectionHook.data.length - 1) {
+            selectionHook.activateTab(indexPosition - 1);
+          }
+          onCloseTab == null ? void 0 : onCloseTab(indexPosition);
+          if (indexPosition < selectionHook.selected) {
+            selectionHook.activateTab(selectionHook.selected - 1);
+          }
+        }
+      } else {
+        onCloseTab == null ? void 0 : onCloseTab(indexPosition);
+      }
+    },
+    [collectionHook, onCloseTab, selectionHook]
+  );
+  useEffect(() => {
+    if (pendingNewTab.current) {
+      const { current: tabId } = pendingNewTab;
+      pendingNewTab.current = null;
+      selectNewTab(tabId);
+    }
+  }, [collectionHook.data, promptForNewTabName, selectNewTab]);
+  return {
+    activateTab: selectionHook.activateTab,
+    addTab,
+    closeTab,
+    containerProps: keyboardHook.containerProps,
+    controlledSelection: selectionHook.isControlled,
+    editing: editableHook.editing,
+    focusTab: keyboardHook.focusTab,
+    focusIsWithinComponent: keyboardHook.focusIsWithinComponent,
+    focusVisible: keyboardHook.focusVisible,
+    highlightedIdx: keyboardHook.highlightedIdx,
+    activeTabIndex: selectionHook.selected,
+    navigationProps: navigationProps2,
+    tabProps,
+    ...dragDropHook
+  };
+};
+
+export { useTabstrip };
+//# sourceMappingURL=useTabstrip.js.map

package/dist-es/packages/lab/src/tabs/useTabstrip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n  createElement,\n  KeyboardEvent,\n  MouseEvent,\n  RefObject,\n  useEffect,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { Tab } from \"./Tab\";\nimport {\n  ContainerNavigationProps,\n  useKeyboardNavigation,\n} from \"./useKeyboardNavigation\";\nimport { dragStrategy, useDragDrop, DragHookResult } from \"./drag-drop\";\nimport { useSelection } from \"./useSelection\";\nimport {\n  ExitEditModeHandler,\n  useEditableItem,\n  EditableItemHookResult,\n} from \"./useEditableItem\";\nimport { OverflowCollectionHookResult } from \"../responsive\";\n\nimport {\n  composableTabProps,\n  exitEditHandler,\n  navigationProps,\n  TabDescriptor,\n  TabElement,\n} from \"./TabsTypes\";\n\ninterface tabstripHookProps {\n  activeTabIndex?: number;\n  allowDragDrop?: boolean | dragStrategy;\n  collectionHook: OverflowCollectionHookResult;\n  defaultActiveTabIndex?: number;\n  defaultTabs?: TabDescriptor[];\n  editing?: boolean;\n  enableAddTab: boolean;\n  idRoot: string;\n  innerContainerRef: RefObject<HTMLDivElement>;\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  onActiveChange?: (tabIndex: number) => void;\n  onCloseTab?: (indexPosition: number) => void;\n  onEnterEditMode?: () => void;\n  onExitEditMode?: ExitEditModeHandler;\n  onMoveTab?: (fromIndex: number, toIndex: number) => void;\n  orientation: \"horizontal\" | \"vertical\";\n  promptForNewTabName?: boolean;\n  tabs?: TabDescriptor[] | TabElement[];\n}\n\ninterface tabstripHookResult\n  extends DragHookResult,\n    Pick<EditableItemHookResult, \"editing\"> {\n  activateTab: (tabIndex: number) => void;\n  activeTabIndex: number;\n  addTab: (indexPosition?: number) => void;\n  closeTab: (indexPosition: number) => void;\n  containerProps: ContainerNavigationProps;\n  controlledSelection: boolean;\n  highlightedIdx: number;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  focusTab: (tabIndex: number, immediateFocus?: boolean) => void;\n  navigationProps: navigationProps;\n  tabProps: composableTabProps;\n}\n\nexport const useTabstrip = ({\n  activeTabIndex: activeTabIndexProp,\n  allowDragDrop = false,\n  collectionHook,\n  defaultActiveTabIndex,\n  editing: editingProp,\n  idRoot,\n  innerContainerRef,\n  keyBoardActivation,\n  onActiveChange,\n  onCloseTab,\n  onEnterEditMode,\n  onExitEditMode,\n  onMoveTab,\n  orientation,\n  promptForNewTabName,\n}: tabstripHookProps): tabstripHookResult & DragHookResult => {\n  const lastSelection = useRef(\n    activeTabIndexProp || defaultActiveTabIndex || 0\n  );\n  const pendingNewTab = useRef<string | null>(null);\n\n  const overflowedItems = collectionHook.data.filter((item) => item.overflowed);\n\n  const keyboardHook = useKeyboardNavigation({\n    indexPositions: collectionHook.data,\n    keyBoardActivation,\n    orientation,\n    selectedIndex: lastSelection.current,\n  });\n\n  const selectionHook = useSelection({\n    defaultSelected: defaultActiveTabIndex,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    onSelectionChange: onActiveChange,\n    selected: activeTabIndexProp,\n  });\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  const handleDrop = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      onMoveTab?.(fromIndex, toIndex);\n      if (toIndex === -1) {\n        // nothing to do\n      } else {\n        if (selectionHook.selected === fromIndex) {\n          selectionHook.activateTab(toIndex);\n        } else if (\n          fromIndex > selectionHook.selected &&\n          toIndex <= selectionHook.selected\n        ) {\n          selectionHook.activateTab(selectionHook.selected + 1);\n        } else if (\n          fromIndex < selectionHook.selected &&\n          toIndex >= selectionHook.selected\n        ) {\n          selectionHook.activateTab(selectionHook.selected - 1);\n        }\n      }\n    },\n    [onMoveTab, selectionHook]\n  );\n\n  const dragDropHook = useDragDrop({\n    allowDragDrop,\n    containerRef: innerContainerRef,\n    extendedDropZone: overflowedItems.length > 0,\n    onDrop: handleDrop,\n    orientation: \"horizontal\",\n    itemQuery: \".saltTab\",\n  });\n\n  const editableHook = useEditableItem({\n    editing: editingProp,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    indexPositions: collectionHook.data,\n    onEnterEditMode,\n    onExitEditMode,\n  });\n\n  const handleExitEditMode = useCallback<exitEditHandler>(\n    (originalValue, editedValue, allowDeactivation, tabIndex) => {\n      editableHook.onExitEditMode(\n        originalValue,\n        editedValue,\n        allowDeactivation,\n        tabIndex\n      );\n      if (!allowDeactivation) {\n        // this indicates that Enter or Esc key has been pressed, hence we\n        // want to make sure keyboardHook treats this as a keyboard event\n        // (and applies focusVisible). The last parameter here does that.\n        keyboardHook.focusTab(tabIndex, false, true);\n      }\n    },\n    [editableHook, keyboardHook]\n  );\n\n  const handleClick = useCallback(\n    (evt: MouseEvent, tabIndex: number) => {\n      // releasing the mouse at end of drag will trigger a click, ignore those\n      if (!dragDropHook.isDragging) {\n        keyboardHook.onClick(evt, tabIndex);\n        selectionHook.onClick(evt, tabIndex);\n      }\n    },\n    [dragDropHook.isDragging, keyboardHook, selectionHook]\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      keyboardHook.onKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.onKeyDown(evt);\n      }\n      if (!evt.defaultPrevented) {\n        editableHook.onKeyDown(evt);\n      }\n    },\n    [keyboardHook, selectionHook, editableHook]\n  );\n\n  const navigationProps = {\n    onFocus: keyboardHook.onFocus,\n    onKeyDown: handleKeyDown,\n  };\n\n  const tabProps: composableTabProps = {\n    onClick: handleClick,\n    onEnterEditMode: editableHook.onEnterEditMode,\n    onExitEditMode: handleExitEditMode,\n  };\n\n  const addTab = useCallback(\n    // The -1 is to account for the AddTab button - we shouldn't assume this\n    (indexPosition: number = collectionHook.data.length - 1) => {\n      const tabId =\n        (pendingNewTab.current = `${idRoot}-${collectionHook.data.length}`);\n      const overflowIndicator = collectionHook.data.find(\n        (i) => i.isOverflowIndicator\n      );\n      const newTabs = collectionHook.data.filter((item) =>\n        item.label?.startsWith(\"New Tab\")\n      );\n      const count = newTabs.length + 1;\n      collectionHook.dispatch({\n        type: \"add-child-item\",\n        idRoot,\n        element: createElement(Tab, {\n          editable: true,\n          label: `New Tab ${count}`,\n          id: tabId,\n        }),\n        indexPosition: overflowIndicator ? indexPosition - 1 : indexPosition,\n      });\n    },\n    [collectionHook, idRoot]\n  );\n\n  const selectNewTab = useCallback(\n    (tabId: string) => {\n      const tab = collectionHook.data.find((item) => item.id === tabId);\n      if (tab) {\n        selectionHook.activateTab(tab.index);\n        if (promptForNewTabName) {\n          // this will take care of focus, which will be set to the editable input\n          editableHook.setEditing(true);\n        } else {\n          keyboardHook.focusTab(tab.index);\n        }\n      }\n    },\n    [\n      collectionHook.data,\n      editableHook,\n      keyboardHook,\n      promptForNewTabName,\n      selectionHook,\n    ]\n  );\n\n  const closeTab = useCallback(\n    (indexPosition: number) => {\n      if (!collectionHook.isControlled) {\n        collectionHook.dispatch({\n          type: \"remove-item\",\n          indexPosition,\n        });\n        if (collectionHook.data.length > 1) {\n          if (\n            indexPosition === selectionHook.selected &&\n            //TODO need to exclude overflow indicator, addButton\n            indexPosition === collectionHook.data.length - 1\n          ) {\n            selectionHook.activateTab(indexPosition - 1);\n          }\n          // does this have to be here ?\n          onCloseTab?.(indexPosition);\n          if (indexPosition < selectionHook.selected) {\n            selectionHook.activateTab(selectionHook.selected - 1);\n          }\n        }\n      } else {\n        onCloseTab?.(indexPosition);\n      }\n    },\n    [collectionHook, onCloseTab, selectionHook]\n  );\n\n  useEffect(() => {\n    if (pendingNewTab.current) {\n      const { current: tabId } = pendingNewTab;\n      pendingNewTab.current = null;\n      selectNewTab(tabId);\n    }\n  }, [collectionHook.data, promptForNewTabName, selectNewTab]);\n\n  return {\n    activateTab: selectionHook.activateTab,\n    addTab,\n    closeTab,\n    containerProps: keyboardHook.containerProps,\n    controlledSelection: selectionHook.isControlled,\n    editing: editableHook.editing,\n    focusTab: keyboardHook.focusTab,\n    focusIsWithinComponent: keyboardHook.focusIsWithinComponent,\n    focusVisible: keyboardHook.focusVisible,\n    highlightedIdx: keyboardHook.highlightedIdx,\n    activeTabIndex: selectionHook.selected,\n    navigationProps,\n    tabProps,\n    ...dragDropHook,\n  };\n};\n"],"names":["navigationProps"],"mappings":"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"}

package/dist-es/packages/lab/src/toggle-button/ToggleButton.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+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/* 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\n  --saltButton-text-color: var(--salt-selectable-cta-foreground);\n  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-selected);\n  --saltButton-text-color-disabled: var(--salt-selectable-cta-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground);\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  --saltButton-text-color-hover: var(--salt-selectable-cta-foreground-disabled);\n  --saltButton-text-color-active: var(--salt-selectable-cta-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-cta-foreground-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  --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\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\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\n  --saltButton-text-color: var(--salt-selectable-primary-foreground);\n  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-selected);\n  --saltButton-text-color-disabled: var(--salt-selectable-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground);\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  --saltButton-text-color-hover: var(--salt-selectable-primary-foreground-disabled);\n  --saltButton-text-color-active: var(--salt-selectable-primary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-primary-foreground-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\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\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\n  --saltButton-text-color: var(--salt-selectable-secondary-foreground);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-hover);\n  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-selected);\n  --saltButton-text-color-disabled: var(--salt-selectable-secondary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground);\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  --saltButton-text-color-active: var(--salt-selectable-secondary-foreground-disabled);\n  --saltButton-text-color-hover: var(--salt-selectable-secondary-foreground-disabled);\n\n  --saltIcon-color: var(--salt-selectable-secondary-foreground-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  --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\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  --saltIcon-color: var(--salt-selectable-secondary-foreground-selectedDisabled);\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=ToggleButton.css.js.map

package/dist-es/packages/lab/src/toggle-button/ToggleButton.css.js.map

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

package/dist-es/packages/lab/src/toggle-button/ToggleButton.js

@@ -0,0 +1,113 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, Button } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef, useState, useRef, useContext, useCallback, useEffect } from 'react';
+import { ToggleButtonGroupContext } from './internal/ToggleButtonGroupContext.js';
+import { Tooltip } from '../tooltip/Tooltip.js';
+import '../tooltip/TooltipContext.js';
+import { useTooltip } from '../tooltip/useTooltip.js';
+import './ToggleButton.css.js';
+
+const withBaseName = makePrefixer("saltToggleButton");
+const ToggleButton = forwardRef(
+  (props, ref) => {
+    const {
+      "aria-label": ariaLabel,
+      className,
+      onToggle,
+      toggled = false,
+      tooltipText = ariaLabel,
+      variant: variantProp = "primary",
+      disabled: disabledProp,
+      disableTooltip: disableTooltipProp,
+      focusableWhenDisabled: focusableWhenDisabledProp,
+      "data-button-index": index,
+      ...restProps
+    } = props;
+    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 tabIndex = toggled && !disabled ? 0 : -1;
+    const { getTooltipProps, getTriggerProps } = useTooltip({
+      disabled: disableTooltip,
+      placement: orientation === "horizontal" ? "bottom" : "right"
+    });
+    const { ref: triggerRef, ...triggerProps } = getTriggerProps(
+      {
+        "aria-checked": toggled,
+        "aria-label": ariaLabel,
+        "aria-posinset": index !== void 0 ? index + 1 : void 0,
+        className: cx(
+          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 handleButtonRef = useForkRef(ref, buttonRef);
+    const handleIconOnlyButtonRef = useForkRef(
+      handleIconOnlyButton,
+      handleButtonRef
+    );
+    const handleRef = useForkRef(triggerRef, handleIconOnlyButtonRef);
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        /* @__PURE__ */ jsx(Tooltip, {
+          ...getTooltipProps({ title: tooltipText })
+        }),
+        /* @__PURE__ */ jsx(Button, {
+          ...triggerProps,
+          ref: handleRef
+        })
+      ]
+    });
+  }
+);
+
+export { ToggleButton };
+//# sourceMappingURL=ToggleButton.js.map

package/dist-es/packages/lab/src/toggle-button/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sources":["../src/toggle-button/ToggleButton.tsx"],"sourcesContent":["import { Button, ButtonProps, makePrefixer, useForkRef } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport {\n  forwardRef,\n  SyntheticEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { ToggleButtonGroupContext } from \"./internal/ToggleButtonGroupContext\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\n\nimport \"./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 [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    const { getTooltipProps, getTriggerProps } = useTooltip({\n      disabled: disableTooltip,\n      placement: orientation === \"horizontal\" ? \"bottom\" : \"right\",\n    });\n\n    const { ref: triggerRef, ...triggerProps } = getTriggerProps<typeof Button>(\n      {\n        \"aria-checked\": toggled,\n        \"aria-label\": ariaLabel,\n        \"aria-posinset\": index !== undefined ? index + 1 : undefined,\n        className: cx(\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,\n        focusableWhenDisabled,\n        role: groupContext ? \"radio\" : \"checkbox\",\n        tabIndex: groupContext ? tabIndex : undefined,\n        variant,\n        ...restProps,\n      }\n    );\n\n    const handleButtonRef = useForkRef(ref, buttonRef);\n    const handleIconOnlyButtonRef = useForkRef(\n      handleIconOnlyButton,\n      handleButtonRef\n    );\n    const handleRef = useForkRef(triggerRef, handleIconOnlyButtonRef);\n\n    return (\n      <>\n        <Tooltip {...getTooltipProps({ title: tooltipText })} />\n        <Button {...triggerProps} ref={handleRef} />\n      </>\n    );\n  }\n);\n"],"names":[],"mappings":"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"}

package/dist-es/packages/lab/src/toggle-button/ToggleButtonGroup.css.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".salt-density-high {\n  --toggleButton-group-height: calc(var(--salt-size-base) - var(--salt-size-unit) + 2px);\n}\n.salt-density-medium {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n.salt-density-low {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 2 / 3) + 2px);\n}\n.salt-density-touch {\n  --toggleButton-group-height: calc(var(--salt-size-base) - (var(--salt-size-unit) * 0.5) + 2px);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-cta {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-cta-borderColor, var(--salt-container-secondary-borderColor));\n}\n.saltToggleButtonGroup.saltToggleButtonGroup-primary {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-primary-borderColor, var(--salt-container-primary-borderColor));\n}\n\n.saltToggleButtonGroup {\n  --toggleButton-group-borderWidth: var(--saltToggleButton-group-borderWidth, var(--salt-size-border));\n  --toggleButton-group-borderStyle: var(--saltToggleButton-group-borderWidth, var(--salt-container-borderStyle));\n\n  display: inline-flex;\n  overflow: hidden;\n  padding: 2px;\n  border: var(--toggleButton-group-borderWidth) var(--toggleButton-group-borderStyle) var(--toggleButton-group-borderColor);\n}\n\n.saltToggleButtonGroup.saltToggleButtonGroup-secondary {\n  --toggleButton-group-borderColor: var(--saltToggleButton-group-secondary-borderColor, var(--salt-container-tertiary-borderColor));\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton {\n  height: var(--toggleButton-group-height);\n}\n\n.saltToggleButtonGroup-horizontal .saltToggleButton:not(:first-child) {\n  margin-left: 2px;\n}\n\n.saltToggleButtonGroup-vertical {\n  flex-direction: column;\n}\n\n.saltToggleButtonGroup-vertical .saltToggleButton:not(:first-child) {\n  margin-top: 2px;\n}\n";
+styleInject(css_248z);
+
+export { css_248z as default };
+//# sourceMappingURL=ToggleButtonGroup.css.js.map

package/dist-es/packages/lab/src/toggle-button/ToggleButtonGroup.css.js.map

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

package/dist-es/packages/lab/src/toggle-button/ToggleButtonGroup.js

@@ -0,0 +1,135 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useControlled } from '@salt-ds/core';
+import cx from 'classnames';
+import { forwardRef, useRef, useState, useCallback, useMemo, Children, cloneElement } from 'react';
+import { ToggleButtonGroupContext } from './internal/ToggleButtonGroupContext.js';
+import './ToggleButtonGroup.css.js';
+
+const withBaseName = makePrefixer("saltToggleButtonGroup");
+const getNextIndex = (nodes, index, increment) => (index + nodes.length + increment) % nodes.length;
+const getNextActive = (nodes, index, increment) => {
+  let nextIndex = getNextIndex(nodes, index, increment);
+  while (nextIndex !== index && !nodes[nextIndex]) {
+    nextIndex = getNextIndex(nodes, nextIndex, increment);
+  }
+  return nodes[nextIndex];
+};
+const ToggleButtonGroup = forwardRef(function ToggleButtonGroup2({
+  "aria-label": ariaLabel = "Toggle options",
+  children,
+  className,
+  disabled,
+  disableTooltip,
+  defaultSelectedIndex = 0,
+  focusableWhenDisabled,
+  selectedIndex: selectedIndexProp,
+  orientation = "horizontal",
+  variant = "primary",
+  width,
+  onChange,
+  onFocus,
+  onBlur,
+  ...restProps
+}, ref) {
+  const buttonRefs = useRef([]);
+  const [disableFocus, setDisableFocus] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useControlled({
+    controlled: selectedIndexProp,
+    default: defaultSelectedIndex,
+    name: "ToggleButtonGroup",
+    state: "selectedIndex"
+  });
+  const register = useCallback(
+    (node, index) => {
+      buttonRefs.current[index] = node || void 0;
+    },
+    []
+  );
+  const unregister = useCallback((index) => {
+    buttonRefs.current[index] = void 0;
+  }, []);
+  const handleFocus = (event) => {
+    setDisableFocus(true);
+    onFocus == null ? void 0 : onFocus(event);
+  };
+  const handleBlur = (event) => {
+    setDisableFocus(false);
+    onBlur == null ? void 0 : onBlur(event);
+  };
+  const handleToggle = (event, index, newValue) => {
+    if (!newValue) {
+      return;
+    }
+    setSelectedIndex(index);
+    onChange == null ? void 0 : onChange(event, index, newValue);
+  };
+  const handleKeyDown = (event, index) => {
+    var _a, _b;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      (_a = getNextActive(buttonRefs.current, index, 1)) == null ? void 0 : _a.focus();
+    }
+    if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      (_b = getNextActive(buttonRefs.current, index, -1)) == null ? void 0 : _b.focus();
+    }
+  };
+  const groupContext = useMemo(
+    () => ({
+      disabled,
+      disableFocus,
+      disableTooltip,
+      focusableWhenDisabled,
+      orientation,
+      register,
+      unregister,
+      variant
+    }),
+    [
+      disabled,
+      disableFocus,
+      disableTooltip,
+      focusableWhenDisabled,
+      orientation,
+      register,
+      unregister,
+      variant
+    ]
+  );
+  const childrenCount = Children.count(children);
+  const getToggleButtonItem = (child, index) => {
+    return cloneElement(child, {
+      ...child.props,
+      "data-button-index": index,
+      "aria-setsize": childrenCount + 1,
+      key: `button-${index}`,
+      toggled: selectedIndex === index,
+      onKeyDown: (event) => handleKeyDown(event, index),
+      onToggle: (event, newValue) => handleToggle(event, index, newValue)
+    });
+  };
+  return /* @__PURE__ */ jsx("div", {
+    ...restProps,
+    "aria-label": ariaLabel,
+    className: cx(
+      withBaseName(),
+      withBaseName(orientation),
+      {
+        [withBaseName("cta")]: variant === "cta",
+        [withBaseName("secondary")]: variant === "secondary",
+        [withBaseName("primary")]: variant === "primary"
+      },
+      className
+    ),
+    ref,
+    role: "radiogroup",
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    style: { width },
+    children: /* @__PURE__ */ jsx(ToggleButtonGroupContext.Provider, {
+      value: groupContext,
+      children: children && children.map(getToggleButtonItem)
+    })
+  });
+});
+
+export { ToggleButtonGroup };
+//# sourceMappingURL=ToggleButtonGroup.js.map

package/dist-es/packages/lab/src/toggle-button/ToggleButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroup.js","sources":["../src/toggle-button/ToggleButtonGroup.tsx"],"sourcesContent":["import { ButtonVariant, makePrefixer, useControlled } from \"@salt-ds/core\";\nimport cx from \"classnames\";\nimport {\n  Children,\n  cloneElement,\n  FocusEventHandler,\n  forwardRef,\n  HTMLAttributes,\n  KeyboardEvent,\n  ReactElement,\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  Orientation,\n  ToggleButtonGroupContext,\n} from \"./internal/ToggleButtonGroupContext\";\n\nimport \"./ToggleButtonGroup.css\";\n\nconst withBaseName = makePrefixer(\"saltToggleButtonGroup\");\n\nexport type ToggleButtonGroupChangeEventHandler = (\n  event: SyntheticEvent<HTMLButtonElement>,\n  index: number,\n  toggled: boolean\n) => void;\n\nexport interface ToggleButtonGroupProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  \"aria-label\"?: string;\n  disabled?: boolean;\n  disableTooltip?: boolean;\n  defaultSelectedIndex?: number;\n  focusableWhenDisabled?: boolean;\n  selectedIndex?: number;\n  orientation?: Orientation;\n  variant?: ButtonVariant;\n  width?: number;\n  children: Array<ReactElement>;\n  onChange?: ToggleButtonGroupChangeEventHandler;\n}\n\nconst getNextIndex = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => (index + nodes.length + increment) % nodes.length;\n\nconst getNextActive = (\n  nodes: Array<HTMLButtonElement | undefined>,\n  index: number,\n  increment: number\n) => {\n  let nextIndex = getNextIndex(nodes, index, increment);\n\n  while (nextIndex !== index && !nodes[nextIndex]) {\n    nextIndex = getNextIndex(nodes, nextIndex, increment);\n  }\n\n  return nodes[nextIndex];\n};\n\nexport const ToggleButtonGroup = forwardRef<\n  HTMLDivElement,\n  ToggleButtonGroupProps\n>(function ToggleButtonGroup(\n  {\n    \"aria-label\": ariaLabel = \"Toggle options\",\n    children,\n    className,\n    disabled,\n    disableTooltip,\n    defaultSelectedIndex = 0,\n    focusableWhenDisabled,\n    selectedIndex: selectedIndexProp,\n    orientation = \"horizontal\",\n    variant = \"primary\",\n    width,\n    onChange,\n    onFocus,\n    onBlur,\n    ...restProps\n  },\n  ref\n) {\n  const buttonRefs = useRef<Array<HTMLButtonElement | undefined>>([]);\n\n  const [disableFocus, setDisableFocus] = useState(false);\n  const [selectedIndex, setSelectedIndex] = useControlled({\n    controlled: selectedIndexProp,\n    default: defaultSelectedIndex,\n    name: \"ToggleButtonGroup\",\n    state: \"selectedIndex\",\n  });\n\n  const register = useCallback(\n    (node: HTMLButtonElement | null, index: number) => {\n      buttonRefs.current[index] = node || undefined;\n    },\n    []\n  );\n\n  const unregister = useCallback((index: number) => {\n    buttonRefs.current[index] = undefined;\n  }, []);\n\n  // When focus is not on the active button and when you tab out\n  // It should leave the toggle button group\n  // It should not go to active button\n  const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(true);\n    onFocus?.(event);\n  };\n\n  // When you tab out from toggle button group, it should restore tab index of active button\n  // When you tab back in, focus should go to active button\n  const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n    setDisableFocus(false);\n    onBlur?.(event);\n  };\n\n  const handleToggle: ToggleButtonGroupChangeEventHandler = (\n    event,\n    index,\n    newValue\n  ) => {\n    if (!newValue) {\n      return;\n    }\n    setSelectedIndex(index);\n    onChange?.(event, index, newValue);\n  };\n\n  const handleKeyDown = (\n    event: KeyboardEvent<HTMLButtonElement>,\n    index: number\n  ) => {\n    if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n      getNextActive(buttonRefs.current, index, 1)?.focus();\n    }\n\n    if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n      getNextActive(buttonRefs.current, index, -1)?.focus();\n    }\n  };\n\n  const groupContext = useMemo(\n    () => ({\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    }),\n    [\n      disabled,\n      disableFocus,\n      disableTooltip,\n      focusableWhenDisabled,\n      orientation,\n      register,\n      unregister,\n      variant,\n    ]\n  );\n\n  const childrenCount = Children.count(children);\n\n  const getToggleButtonItem = (child: ReactElement, index: number) => {\n    return cloneElement(child, {\n      ...child.props,\n      \"data-button-index\": index,\n      \"aria-setsize\": childrenCount + 1,\n      key: `button-${index}`,\n      toggled: selectedIndex === index,\n      onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) =>\n        handleKeyDown(event, index),\n      onToggle: (event: SyntheticEvent<HTMLButtonElement>, newValue: boolean) =>\n        handleToggle(event, index, newValue),\n    });\n  };\n\n  return (\n    <div\n      {...restProps}\n      aria-label={ariaLabel}\n      className={cx(\n        withBaseName(),\n        withBaseName(orientation),\n        {\n          [withBaseName(\"cta\")]: variant === \"cta\",\n          [withBaseName(\"secondary\")]: variant === \"secondary\",\n          [withBaseName(\"primary\")]: variant === \"primary\",\n        },\n        className\n      )}\n      ref={ref}\n      role=\"radiogroup\"\n      onFocus={handleFocus}\n      onBlur={handleBlur}\n      // TODO: Make this responsive?\n      style={{ width }}\n    >\n      <ToggleButtonGroupContext.Provider value={groupContext}>\n        {children && children.map(getToggleButtonItem)}\n      </ToggleButtonGroupContext.Provider>\n    </div>\n  );\n});\n"],"names":["ToggleButtonGroup"],"mappings":"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"}

package/dist-es/packages/lab/src/toggle-button/internal/ToggleButtonGroupContext.js

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+const ToggleButtonGroupContext = createContext(void 0);
+
+export { ToggleButtonGroupContext };
+//# sourceMappingURL=ToggleButtonGroupContext.js.map

package/dist-es/packages/lab/src/toggle-button/internal/ToggleButtonGroupContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButtonGroupContext.js","sources":["../src/toggle-button/internal/ToggleButtonGroupContext.ts"],"sourcesContent":["import { createContext } from \"react\";\nimport { ButtonVariant } from \"@salt-ds/core\";\n\nexport type Orientation = \"horizontal\" | \"vertical\";\n\nexport interface ToggleButtonGroupContextProps {\n  disabled?: boolean;\n  disableFocus?: boolean;\n  disableTooltip?: boolean;\n  focusableWhenDisabled?: boolean;\n  register: (node: HTMLButtonElement | null, index: number) => void;\n  unregister: (index: number) => void;\n  orientation?: Orientation;\n  variant?: ButtonVariant;\n}\n\nexport const ToggleButtonGroupContext = createContext<\n  ToggleButtonGroupContextProps | undefined\n>(undefined);\n"],"names":[],"mappings":";;AAgBa,MAAA,wBAAA,GAA2B,cAEtC,KAAS,CAAA;;;;"}