@salt-ds/lab 1.0.0-alpha.54 → 1.0.0-alpha.56

package/dist-es/tabs/drag-drop/useDragSpacers.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDragSpacers.js","sources":["../src/tabs/drag-drop/useDragSpacers.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport { createDragSpacer } from \"./Draggable\";\nimport type { MeasuredDropTarget } from \"./drag-utils\";\nimport type { Direction } from \"./dragDropTypes\";\n\nexport const useDragSpacers = () => {\n  const animationFrame = useRef(0);\n  const transitioning = useRef(false);\n\n  const spacers = useMemo(\n    // We only need to listen for transition end on one of the spacers\n    () => [createDragSpacer(transitioning), createDragSpacer()],\n    [],\n  );\n\n  const clearSpacers = useCallback(\n    () =>\n      spacers.forEach((spacer) => spacer.parentElement?.removeChild(spacer)),\n    [spacers],\n  );\n\n  const animateTransition = useCallback(\n    (size: number) => {\n      const [spacer1, spacer2] = spacers;\n      animationFrame.current = requestAnimationFrame(() => {\n        transitioning.current = true;\n        spacer1.style.cssText = \"width: 0px\";\n        spacer2.style.cssText = `width: ${size}px`;\n        spacers[0] = spacer2;\n        spacers[1] = spacer1;\n      });\n    },\n    [spacers],\n  );\n\n  const cancelAnyPendingAnimation = useCallback(() => {\n    if (animationFrame.current) {\n      cancelAnimationFrame(animationFrame.current);\n      animationFrame.current = 0;\n    }\n  }, []);\n\n  const displaceItem = useCallback(\n    (\n      item: MeasuredDropTarget | null,\n      size: number,\n      useTransition = false,\n      direction?: Direction,\n    ) => {\n      if (item) {\n        const [spacer1, spacer2] = spacers;\n        cancelAnyPendingAnimation();\n        if (useTransition) {\n          if (transitioning.current) {\n            clearSpacers();\n\n            spacer1.style.cssText = `width: ${size}px`;\n            spacer2.style.cssText = \"width: 0px\";\n\n            const target =\n              direction === \"fwd\"\n                ? item.element.previousElementSibling\n                : item.element.nextElementSibling;\n\n            item.element.parentElement?.insertBefore(spacer1, target);\n            item.element.parentElement?.insertBefore(spacer2, item.element);\n          } else {\n            item.element.parentElement?.insertBefore(spacer2, item.element);\n          }\n          animateTransition(size);\n        } else {\n          spacer1.style.cssText = `width: ${size}px`;\n          item.element.parentElement?.insertBefore(spacer1, item.element);\n        }\n      }\n    },\n    [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n  );\n  const displaceLastItem = useCallback(\n    (item: MeasuredDropTarget, size: number, useTransition = false) => {\n      const [spacer1, spacer2] = spacers;\n      cancelAnyPendingAnimation();\n      if (useTransition) {\n        if (transitioning.current) {\n          clearSpacers();\n\n          spacer1.style.cssText = `width: ${size}px`;\n          spacer2.style.cssText = \"width: 0px\";\n\n          item.element.parentElement?.insertBefore(\n            spacer1,\n            item.element.previousElementSibling,\n          );\n          item.element.parentElement?.insertBefore(\n            spacer2,\n            item.element.nextElementSibling,\n          );\n        } else {\n          item.element.parentElement?.insertBefore(\n            spacer2,\n            item.element.nextElementSibling,\n          );\n        }\n        animateTransition(size);\n      } else {\n        spacer1.style.cssText = `width: ${size}px`;\n        item.element.parentElement?.insertBefore(\n          spacer1,\n          item.element.nextElementSibling,\n        );\n      }\n    },\n    [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n  );\n\n  return {\n    displaceItem,\n    displaceLastItem,\n    clearSpacers,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useDragSpacers.js","sources":["../src/tabs/drag-drop/useDragSpacers.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport { createDragSpacer } from \"./Draggable\";\nimport type { MeasuredDropTarget } from \"./drag-utils\";\nimport type { Direction } from \"./dragDropTypes\";\n\nexport const useDragSpacers = () => {\n  const animationFrame = useRef(0);\n  const transitioning = useRef(false);\n\n  const spacers = useMemo(\n    // We only need to listen for transition end on one of the spacers\n    () => [createDragSpacer(transitioning), createDragSpacer()],\n    [],\n  );\n\n  const clearSpacers = useCallback(\n    () =>\n      spacers.forEach((spacer) => spacer.parentElement?.removeChild(spacer)),\n    [spacers],\n  );\n\n  const animateTransition = useCallback(\n    (size: number) => {\n      const [spacer1, spacer2] = spacers;\n      animationFrame.current = requestAnimationFrame(() => {\n        transitioning.current = true;\n        spacer1.style.cssText = \"width: 0px\";\n        spacer2.style.cssText = `width: ${size}px`;\n        spacers[0] = spacer2;\n        spacers[1] = spacer1;\n      });\n    },\n    [spacers],\n  );\n\n  const cancelAnyPendingAnimation = useCallback(() => {\n    if (animationFrame.current) {\n      cancelAnimationFrame(animationFrame.current);\n      animationFrame.current = 0;\n    }\n  }, []);\n\n  const displaceItem = useCallback(\n    (\n      item: MeasuredDropTarget | null,\n      size: number,\n      useTransition = false,\n      direction?: Direction,\n    ) => {\n      if (item) {\n        const [spacer1, spacer2] = spacers;\n        cancelAnyPendingAnimation();\n        if (useTransition) {\n          if (transitioning.current) {\n            clearSpacers();\n\n            spacer1.style.cssText = `width: ${size}px`;\n            spacer2.style.cssText = \"width: 0px\";\n\n            const target =\n              direction === \"fwd\"\n                ? item.element.previousElementSibling\n                : item.element.nextElementSibling;\n\n            item.element.parentElement?.insertBefore(spacer1, target);\n            item.element.parentElement?.insertBefore(spacer2, item.element);\n          } else {\n            item.element.parentElement?.insertBefore(spacer2, item.element);\n          }\n          animateTransition(size);\n        } else {\n          spacer1.style.cssText = `width: ${size}px`;\n          item.element.parentElement?.insertBefore(spacer1, item.element);\n        }\n      }\n    },\n    [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n  );\n  const displaceLastItem = useCallback(\n    (item: MeasuredDropTarget, size: number, useTransition = false) => {\n      const [spacer1, spacer2] = spacers;\n      cancelAnyPendingAnimation();\n      if (useTransition) {\n        if (transitioning.current) {\n          clearSpacers();\n\n          spacer1.style.cssText = `width: ${size}px`;\n          spacer2.style.cssText = \"width: 0px\";\n\n          item.element.parentElement?.insertBefore(\n            spacer1,\n            item.element.previousElementSibling,\n          );\n          item.element.parentElement?.insertBefore(\n            spacer2,\n            item.element.nextElementSibling,\n          );\n        } else {\n          item.element.parentElement?.insertBefore(\n            spacer2,\n            item.element.nextElementSibling,\n          );\n        }\n        animateTransition(size);\n      } else {\n        spacer1.style.cssText = `width: ${size}px`;\n        item.element.parentElement?.insertBefore(\n          spacer1,\n          item.element.nextElementSibling,\n        );\n      }\n    },\n    [animateTransition, cancelAnyPendingAnimation, clearSpacers, spacers],\n  );\n\n  return {\n    displaceItem,\n    displaceLastItem,\n    clearSpacers,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/tabs/useActivationIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import {\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  WidthOnly,\n  type orientationType,\n  useResizeObserver,\n} from \"../responsive\";\n\ntype activationIndicatorStyles = {\n  height?: number;\n  left?: number;\n  top?: number;\n  width?: number;\n  hasChanged?: boolean;\n};\n\nconst MEASUREMENTS = {\n  horizontal: {\n    pos: \"left\" as keyof activationIndicatorStyles,\n    size: \"width\" as keyof activationIndicatorStyles,\n  },\n  vertical: {\n    pos: \"top\" as keyof activationIndicatorStyles,\n    size: \"height\" as keyof activationIndicatorStyles,\n  },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n  rootRef,\n  tabId,\n  orientation,\n}: {\n  rootRef: RefObject<HTMLDivElement | null>;\n  tabId?: string | null;\n  orientation: orientationType;\n}): activationIndicatorStyles {\n  const [style, setStyle] = useState<activationIndicatorStyles>({\n    left: 0,\n    width: 0,\n  });\n  // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n  // means our useEffect below will re-run only when the tab changes, not after every style change\n  // as well.\n\n  const styleRef = useRef(style);\n\n  const getTabPos = useCallback(() => {\n    const { pos, size } = MEASUREMENTS[orientation];\n    return [pos, size];\n  }, [orientation]);\n\n  const createIndicatorStyle = useCallback(\n    (tabElement: HTMLElement | null): activationIndicatorStyles => {\n      if (tabElement) {\n        const tabRect = tabElement.getBoundingClientRect() as any;\n        if (rootRef.current && tabRect) {\n          const rootRect = rootRef.current.getBoundingClientRect() as any;\n          const [pos, size] = getTabPos();\n          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n          const newPos = tabRect[pos] - rootRect[pos];\n          const newSize = tabRect[size];\n\n          return {\n            [pos]: newPos,\n            [size]: newSize,\n            hasChanged: newPos !== existingPos || newSize !== existingSize,\n          };\n        }\n      }\n      return {};\n    },\n    [rootRef, getTabPos],\n  );\n\n  const onResize = useCallback(() => {\n    requestAnimationFrame(() => {\n      if (tabId) {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          setStyle(newStyle);\n        }\n      }\n    });\n  }, [createIndicatorStyle, tabId]);\n\n  useEffect(() => {\n    if (tabId) {\n      // The timeout is employed in case selectedTab has been selected from\n      // overflow menu. In this case, the tab is only restored to visibility\n      // in the render cycle after selection.\n      setTimeout(() => {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          styleRef.current = newStyle;\n          setStyle(newStyle);\n        }\n      }, 50);\n    }\n  }, [createIndicatorStyle, tabId]);\n\n  useResizeObserver(rootRef, WidthOnly, onResize);\n\n  return style;\n}\n"],"names":[],"mappings":";;;;;AAqBA,MAAM,YAAe,GAAA;AAAA,EACnB,UAAY,EAAA;AAAA,IACV,GAAK,EAAA,MAAA;AAAA,IACL,IAAM,EAAA,OAAA;AAAA,GACR;AAAA,EACA,QAAU,EAAA;AAAA,IACR,GAAK,EAAA,KAAA;AAAA,IACL,IAAM,EAAA,QAAA;AAAA,GACR;AACF,CAAA,CAAA;AAGO,SAAS,sBAAuB,CAAA;AAAA,EACrC,OAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AACF,CAI8B,EAAA;AAC5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,QAAoC,CAAA;AAAA,IAC5D,IAAM,EAAA,CAAA;AAAA,IACN,KAAO,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAKD,EAAM,MAAA,QAAA,GAAW,OAAO,KAAK,CAAA,CAAA;AAE7B,EAAM,MAAA,SAAA,GAAY,YAAY,MAAM;AAClC,IAAA,MAAM,EAAE,GAAA,EAAK,IAAK,EAAA,GAAI,YAAa,CAAA,WAAA,CAAA,CAAA;AACnC,IAAO,OAAA,CAAC,KAAK,IAAI,CAAA,CAAA;AAAA,GACnB,EAAG,CAAC,WAAW,CAAC,CAAA,CAAA;AAEhB,EAAA,MAAM,oBAAuB,GAAA,WAAA;AAAA,IAC3B,CAAC,UAA8D,KAAA;AAC7D,MAAA,IAAI,UAAY,EAAA;AACd,QAAM,MAAA,OAAA,GAAU,WAAW,qBAAsB,EAAA,CAAA;AACjD,QAAI,IAAA,OAAA,CAAQ,WAAW,OAAS,EAAA;AAC9B,UAAM,MAAA,QAAA,GAAW,OAAQ,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAA;AACvD,UAAA,MAAM,CAAC,GAAA,EAAK,IAAI,CAAA,GAAI,SAAU,EAAA,CAAA;AAC9B,UAAA,MAAM,GAAG,GAAM,GAAA,WAAA,EAAA,CAAc,IAAO,GAAA,YAAA,KAAiB,QAAS,CAAA,OAAA,CAAA;AAC9D,UAAM,MAAA,MAAA,GAAS,OAAQ,CAAA,GAAA,CAAA,GAAO,QAAS,CAAA,GAAA,CAAA,CAAA;AACvC,UAAA,MAAM,UAAU,OAAQ,CAAA,IAAA,CAAA,CAAA;AAExB,UAAO,OAAA;AAAA,YACL,CAAC,GAAM,GAAA,MAAA;AAAA,YACP,CAAC,IAAO,GAAA,OAAA;AAAA,YACR,UAAA,EAAY,MAAW,KAAA,WAAA,IAAe,OAAY,KAAA,YAAA;AAAA,WACpD,CAAA;AAAA,SACF;AAAA,OACF;AACA,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAAA,IACA,CAAC,SAAS,SAAS,CAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,QAAA,GAAW,YAAY,MAAM;AACjC,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,IAAI,KAAO,EAAA;AACT,QAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAC3C,QAAA,MAAM,EAAE,UAAA,EAAA,GAAe,QAAS,EAAA,GAAI,qBAAqB,KAAK,CAAA,CAAA;AAC9D,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,SACnB;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACA,EAAA,CAAC,oBAAsB,EAAA,KAAK,CAAC,CAAA,CAAA;AAEhC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAO,EAAA;AAIT,MAAA,UAAA,CAAW,MAAM;AACf,QAAM,MAAA,KAAA,GAAQ,QAAS,CAAA,cAAA,CAAe,KAAK,CAAA,CAAA;AAC3C,QAAA,MAAM,EAAE,UAAA,EAAA,GAAe,QAAS,EAAA,GAAI,qBAAqB,KAAK,CAAA,CAAA;AAC9D,QAAA,IAAI,UAAY,EAAA;AACd,UAAA,QAAA,CAAS,OAAU,GAAA,QAAA,CAAA;AACnB,UAAA,QAAA,CAAS,QAAQ,CAAA,CAAA;AAAA,SACnB;AAAA,SACC,EAAE,CAAA,CAAA;AAAA,KACP;AAAA,GACC,EAAA,CAAC,oBAAsB,EAAA,KAAK,CAAC,CAAA,CAAA;AAEhC,EAAkB,iBAAA,CAAA,OAAA,EAAS,WAAW,QAAQ,CAAA,CAAA;AAE9C,EAAO,OAAA,KAAA,CAAA;AACT;;;;"}
+{"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import {\n  type RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  WidthOnly,\n  type orientationType,\n  useResizeObserver,\n} from \"../responsive\";\n\ntype activationIndicatorStyles = {\n  height?: number;\n  left?: number;\n  top?: number;\n  width?: number;\n  hasChanged?: boolean;\n};\n\nconst MEASUREMENTS = {\n  horizontal: {\n    pos: \"left\" as keyof activationIndicatorStyles,\n    size: \"width\" as keyof activationIndicatorStyles,\n  },\n  vertical: {\n    pos: \"top\" as keyof activationIndicatorStyles,\n    size: \"height\" as keyof activationIndicatorStyles,\n  },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n  rootRef,\n  tabId,\n  orientation,\n}: {\n  rootRef: RefObject<HTMLDivElement | null>;\n  tabId?: string | null;\n  orientation: orientationType;\n}): activationIndicatorStyles {\n  const [style, setStyle] = useState<activationIndicatorStyles>({\n    left: 0,\n    width: 0,\n  });\n  // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n  // means our useEffect below will re-run only when the tab changes, not after every style change\n  // as well.\n\n  const styleRef = useRef(style);\n\n  const getTabPos = useCallback(() => {\n    const { pos, size } = MEASUREMENTS[orientation];\n    return [pos, size];\n  }, [orientation]);\n\n  const createIndicatorStyle = useCallback(\n    (tabElement: HTMLElement | null): activationIndicatorStyles => {\n      if (tabElement) {\n        const tabRect = tabElement.getBoundingClientRect() as any;\n        if (rootRef.current && tabRect) {\n          const rootRect = rootRef.current.getBoundingClientRect() as any;\n          const [pos, size] = getTabPos();\n          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n          const newPos = tabRect[pos] - rootRect[pos];\n          const newSize = tabRect[size];\n\n          return {\n            [pos]: newPos,\n            [size]: newSize,\n            hasChanged: newPos !== existingPos || newSize !== existingSize,\n          };\n        }\n      }\n      return {};\n    },\n    [rootRef, getTabPos],\n  );\n\n  const onResize = useCallback(() => {\n    requestAnimationFrame(() => {\n      if (tabId) {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          setStyle(newStyle);\n        }\n      }\n    });\n  }, [createIndicatorStyle, tabId]);\n\n  useEffect(() => {\n    if (tabId) {\n      // The timeout is employed in case selectedTab has been selected from\n      // overflow menu. In this case, the tab is only restored to visibility\n      // in the render cycle after selection.\n      setTimeout(() => {\n        const tabEl = document.getElementById(tabId);\n        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);\n        if (hasChanged) {\n          styleRef.current = newStyle;\n          setStyle(newStyle);\n        }\n      }, 50);\n    }\n  }, [createIndicatorStyle, tabId]);\n\n  useResizeObserver(rootRef, WidthOnly, onResize);\n\n  return style;\n}\n"],"names":[],"mappings":"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"}

package/dist-es/tabs/useEditableItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEditableItem.js","sources":["../src/tabs/useEditableItem.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback } from \"react\";\nimport type { OverflowItem } from \"../responsive\";\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number,\n) => void;\n\nexport interface Editable {\n  editing: boolean;\n  onEnterEditMode: () => void;\n  onExitEditMode: ExitEditModeHandler;\n  setEditing: (value: boolean) => void;\n}\nexport interface EditableItemHookProps extends Partial<Editable> {\n  highlightedIdx: number;\n  indexPositions: OverflowItem[];\n}\n\nexport interface EditableItemHookResult extends Editable {\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useEditableItem = ({\n  editing: editingProp,\n  highlightedIdx,\n  indexPositions,\n  onEnterEditMode: onEnterEditModeProp,\n  onExitEditMode: onExitEditModeProp,\n}: EditableItemHookProps): EditableItemHookResult => {\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: false,\n    name: \"useEditableItem\",\n    state: \"editing\",\n  });\n\n  const onEnterEditMode = useCallback(() => {\n    setEditing(true);\n    onEnterEditModeProp?.();\n  }, [onEnterEditModeProp]);\n\n  const onExitEditMode = (\n    originalValue: string,\n    editedValue: string,\n    allowDeactivation: boolean,\n    tabIndex: number,\n  ) => {\n    setEditing(false);\n    console.log(\"exit edit mode\");\n    onExitEditModeProp?.(\n      originalValue,\n      editedValue,\n      allowDeactivation,\n      tabIndex,\n    );\n  };\n\n  const onKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      console.log(`useEditableItem onKeyDown ${highlightedIdx}`, {\n        editable: indexPositions[highlightedIdx]?.editable,\n      });\n      if (isEditKey(evt.key) && indexPositions[highlightedIdx]?.editable) {\n        onEnterEditMode();\n      }\n    },\n    [onEnterEditMode, highlightedIdx, indexPositions],\n  );\n\n  return {\n    editing,\n    onKeyDown,\n    onEnterEditMode,\n    onExitEditMode,\n    setEditing,\n  };\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,2BAAe,IAAA,GAAA,CAAI,CAAC,OAAA,EAAS,GAAG,CAAC,CAAA,CAAA;AACvC,MAAM,SAAY,GAAA,CAAC,GAAgB,KAAA,QAAA,CAAS,IAAI,GAAG,CAAA,CAAA;AAwB5C,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAS,EAAA,WAAA;AAAA,EACT,cAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAiB,EAAA,mBAAA;AAAA,EACjB,cAAgB,EAAA,kBAAA;AAClB,CAAqD,KAAA;AACnD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,iBAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,IAAA,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,EAAA,CAAA;AAAA,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,cAAiB,GAAA,CACrB,aACA,EAAA,WAAA,EACA,mBACA,QACG,KAAA;AACH,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,IAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA;AAAA,MACE,aAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,KAAA,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,GAAuB,KAAA;AAjE5B,MAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAkEM,MAAQ,OAAA,CAAA,GAAA,CAAI,6BAA6B,cAAkB,CAAA,CAAA,EAAA;AAAA,QACzD,QAAA,EAAA,CAAU,EAAe,GAAA,cAAA,CAAA,cAAA,CAAA,KAAf,IAAgC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA;AAAA,OAC3C,CAAA,CAAA;AACD,MAAA,IAAI,UAAU,GAAI,CAAA,GAAG,OAAK,EAAe,GAAA,cAAA,CAAA,cAAA,CAAA,KAAf,mBAAgC,QAAU,CAAA,EAAA;AAClE,QAAgB,eAAA,EAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,eAAiB,EAAA,cAAA,EAAgB,cAAc,CAAA;AAAA,GAClD,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useEditableItem.js","sources":["../src/tabs/useEditableItem.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, useCallback } from \"react\";\nimport type { OverflowItem } from \"../responsive\";\n\nconst editKeys = new Set([\"Enter\", \" \"]);\nconst isEditKey = (key: string) => editKeys.has(key);\n\nexport type ExitEditModeHandler = (\n  originalValue: string,\n  editedValue: string,\n  allowDeactivation: boolean,\n  tabIndex: number,\n) => void;\n\nexport interface Editable {\n  editing: boolean;\n  onEnterEditMode: () => void;\n  onExitEditMode: ExitEditModeHandler;\n  setEditing: (value: boolean) => void;\n}\nexport interface EditableItemHookProps extends Partial<Editable> {\n  highlightedIdx: number;\n  indexPositions: OverflowItem[];\n}\n\nexport interface EditableItemHookResult extends Editable {\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useEditableItem = ({\n  editing: editingProp,\n  highlightedIdx,\n  indexPositions,\n  onEnterEditMode: onEnterEditModeProp,\n  onExitEditMode: onExitEditModeProp,\n}: EditableItemHookProps): EditableItemHookResult => {\n  const [editing, setEditing] = useControlled({\n    controlled: editingProp,\n    default: false,\n    name: \"useEditableItem\",\n    state: \"editing\",\n  });\n\n  const onEnterEditMode = useCallback(() => {\n    setEditing(true);\n    onEnterEditModeProp?.();\n  }, [onEnterEditModeProp]);\n\n  const onExitEditMode = (\n    originalValue: string,\n    editedValue: string,\n    allowDeactivation: boolean,\n    tabIndex: number,\n  ) => {\n    setEditing(false);\n    console.log(\"exit edit mode\");\n    onExitEditModeProp?.(\n      originalValue,\n      editedValue,\n      allowDeactivation,\n      tabIndex,\n    );\n  };\n\n  const onKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      console.log(`useEditableItem onKeyDown ${highlightedIdx}`, {\n        editable: indexPositions[highlightedIdx]?.editable,\n      });\n      if (isEditKey(evt.key) && indexPositions[highlightedIdx]?.editable) {\n        onEnterEditMode();\n      }\n    },\n    [onEnterEditMode, highlightedIdx, indexPositions],\n  );\n\n  return {\n    editing,\n    onKeyDown,\n    onEnterEditMode,\n    onExitEditMode,\n    setEditing,\n  };\n};\n"],"names":[],"mappings":";;;AAIA,MAAM,2BAAe,IAAA,GAAA,CAAI,CAAC,OAAA,EAAS,GAAG,CAAC,CAAA;AACvC,MAAM,SAAY,GAAA,CAAC,GAAgB,KAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAwB5C,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAS,EAAA,WAAA;AAAA,EACT,cAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAiB,EAAA,mBAAA;AAAA,EACjB,cAAgB,EAAA;AAClB,CAAqD,KAAA;AACnD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,aAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,iBAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAM,MAAA,eAAA,GAAkB,YAAY,MAAM;AACxC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,EAAA;AAAA,GACF,EAAG,CAAC,mBAAmB,CAAC,CAAA;AAExB,EAAA,MAAM,cAAiB,GAAA,CACrB,aACA,EAAA,WAAA,EACA,mBACA,QACG,KAAA;AACH,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA;AAC5B,IAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA;AAAA,MACE,aAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA,KAAA;AAAA,GAEJ;AAEA,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,GAAuB,KAAA;AAjE5B,MAAA,IAAA,EAAA,EAAA,EAAA;AAkEM,MAAQ,OAAA,CAAA,GAAA,CAAI,CAA6B,0BAAA,EAAA,cAAc,CAAI,CAAA,EAAA;AAAA,QACzD,QAAU,EAAA,CAAA,EAAA,GAAA,cAAA,CAAe,cAAc,CAAA,KAA7B,IAAgC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA;AAAA,OAC3C,CAAA;AACD,MAAI,IAAA,SAAA,CAAU,IAAI,GAAG,CAAA,KAAA,CAAK,oBAAe,cAAc,CAAA,KAA7B,mBAAgC,QAAU,CAAA,EAAA;AAClE,QAAgB,eAAA,EAAA;AAAA;AAClB,KACF;AAAA,IACA,CAAC,eAAiB,EAAA,cAAA,EAAgB,cAAc;AAAA,GAClD;AAEA,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-es/tabs/useItemsWithIds.js

@@ -18,11 +18,7 @@ const useItemsWithIds = (children, id = "root") => {
           id: tabPanelId,
           key: tabId
         };
-        const element = child.type === TabPanel ? cloneElement(child, props) : /* @__PURE__ */ createElement(TabPanel, {
-          ...props,
-          label,
-          key: tabId
-        }, child);
+        const element = child.type === TabPanel ? cloneElement(child, props) : /* @__PURE__ */ createElement(TabPanel, { ...props, label, key: tabId }, child);
         const tab = {
           closeable,
           element,

package/dist-es/tabs/useItemsWithIds.js.map

@@ -1 +1 @@
-{"version":3,"file":"useItemsWithIds.js","sources":["../src/tabs/useItemsWithIds.tsx"],"sourcesContent":["import {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { TabPanel } from \"./TabPanel\";\nimport type { TabDescriptor } from \"./TabsTypes\";\n\ntype TabMap = { [key: string]: TabDescriptor };\n\nexport const useItemsWithIds = (\n  children: ReactNode,\n  id = \"root\",\n): [TabDescriptor[], (id: string) => TabDescriptor] => {\n  const normalizeItems = useCallback(\n    (items: ReactNode): [TabDescriptor[], TabMap] => {\n      const sourceMap: TabMap = {};\n      const tabDescriptors: TabDescriptor[] = Children.toArray(items)\n        .filter(isValidElement)\n        .map((child: ReactElement, index: number) => {\n          const {\n            \"data-label\": dataLabel = `Tab ${index + 1}`,\n            enableClose: closeable,\n            label = dataLabel,\n          } = child.props;\n          const tabId = `${id}-${index}`;\n          const tabPanelId = `${tabId}-panel`;\n          const props = {\n            \"aria-labelledby\": tabId,\n            id: tabPanelId,\n            key: tabId,\n          };\n          const element: JSX.Element | undefined =\n            child.type === TabPanel ? (\n              cloneElement(child, props)\n            ) : (\n              <TabPanel {...props} label={label} key={tabId}>\n                {child}\n              </TabPanel>\n            );\n          const tab: TabDescriptor = {\n            closeable,\n            element,\n            id: tabId,\n            label,\n          };\n          sourceMap[tabId] = tab;\n          return tab;\n        });\n      return [tabDescriptors, sourceMap];\n    },\n    [id],\n  );\n\n  const [sourceWithIds, sourceMap] = useMemo(() => {\n    return normalizeItems(children);\n  }, [normalizeItems, children]);\n\n  const itemById = useCallback((id: string) => sourceMap[id], [sourceMap]);\n\n  return [sourceWithIds, itemById];\n};\n"],"names":["sourceMap","id"],"mappings":";;;AAcO,MAAM,eAAkB,GAAA,CAC7B,QACA,EAAA,EAAA,GAAK,MACgD,KAAA;AACrD,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,KAAgD,KAAA;AAC/C,MAAA,MAAMA,aAAoB,EAAC,CAAA;AAC3B,MAAM,MAAA,cAAA,GAAkC,QAAS,CAAA,OAAA,CAAQ,KAAK,CAAA,CAC3D,MAAO,CAAA,cAAc,CACrB,CAAA,GAAA,CAAI,CAAC,KAAA,EAAqB,KAAkB,KAAA;AAC3C,QAAM,MAAA;AAAA,UACJ,YAAA,EAAc,SAAY,GAAA,CAAA,IAAA,EAAO,KAAQ,GAAA,CAAA,CAAA,CAAA;AAAA,UACzC,WAAa,EAAA,SAAA;AAAA,UACb,KAAQ,GAAA,SAAA;AAAA,YACN,KAAM,CAAA,KAAA,CAAA;AACV,QAAM,MAAA,KAAA,GAAQ,GAAG,EAAM,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACvB,QAAA,MAAM,aAAa,CAAG,EAAA,KAAA,CAAA,MAAA,CAAA,CAAA;AACtB,QAAA,MAAM,KAAQ,GAAA;AAAA,UACZ,iBAAmB,EAAA,KAAA;AAAA,UACnB,EAAI,EAAA,UAAA;AAAA,UACJ,GAAK,EAAA,KAAA;AAAA,SACP,CAAA;AACA,QAAM,MAAA,OAAA,GACJ,MAAM,IAAS,KAAA,QAAA,GACb,aAAa,KAAO,EAAA,KAAK,oBAExB,aAAA,CAAA,QAAA,EAAA;AAAA,UAAU,GAAG,KAAA;AAAA,UAAO,KAAA;AAAA,UAAc,GAAK,EAAA,KAAA;AAAA,SAAA,EACrC,KACH,CAAA,CAAA;AAEJ,QAAA,MAAM,GAAqB,GAAA;AAAA,UACzB,SAAA;AAAA,UACA,OAAA;AAAA,UACA,EAAI,EAAA,KAAA;AAAA,UACJ,KAAA;AAAA,SACF,CAAA;AACA,QAAAA,WAAU,KAAS,CAAA,GAAA,GAAA,CAAA;AACnB,QAAO,OAAA,GAAA,CAAA;AAAA,OACR,CAAA,CAAA;AACH,MAAO,OAAA,CAAC,gBAAgBA,UAAS,CAAA,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,EAAE,CAAA;AAAA,GACL,CAAA;AAEA,EAAA,MAAM,CAAC,aAAA,EAAe,SAAS,CAAA,GAAI,QAAQ,MAAM;AAC/C,IAAA,OAAO,eAAe,QAAQ,CAAA,CAAA;AAAA,GAC7B,EAAA,CAAC,cAAgB,EAAA,QAAQ,CAAC,CAAA,CAAA;AAE7B,EAAM,MAAA,QAAA,GAAW,YAAY,CAACC,GAAAA,KAAe,UAAUA,GAAK,CAAA,EAAA,CAAC,SAAS,CAAC,CAAA,CAAA;AAEvE,EAAO,OAAA,CAAC,eAAe,QAAQ,CAAA,CAAA;AACjC;;;;"}
+{"version":3,"file":"useItemsWithIds.js","sources":["../src/tabs/useItemsWithIds.tsx"],"sourcesContent":["import {\n  Children,\n  type ReactElement,\n  type ReactNode,\n  cloneElement,\n  isValidElement,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { TabPanel } from \"./TabPanel\";\nimport type { TabDescriptor } from \"./TabsTypes\";\n\ntype TabMap = { [key: string]: TabDescriptor };\n\nexport const useItemsWithIds = (\n  children: ReactNode,\n  id = \"root\",\n): [TabDescriptor[], (id: string) => TabDescriptor] => {\n  const normalizeItems = useCallback(\n    (items: ReactNode): [TabDescriptor[], TabMap] => {\n      const sourceMap: TabMap = {};\n      const tabDescriptors: TabDescriptor[] = Children.toArray(items)\n        .filter(isValidElement)\n        .map((child: ReactElement, index: number) => {\n          const {\n            \"data-label\": dataLabel = `Tab ${index + 1}`,\n            enableClose: closeable,\n            label = dataLabel,\n          } = child.props;\n          const tabId = `${id}-${index}`;\n          const tabPanelId = `${tabId}-panel`;\n          const props = {\n            \"aria-labelledby\": tabId,\n            id: tabPanelId,\n            key: tabId,\n          };\n          const element: JSX.Element | undefined =\n            child.type === TabPanel ? (\n              cloneElement(child, props)\n            ) : (\n              <TabPanel {...props} label={label} key={tabId}>\n                {child}\n              </TabPanel>\n            );\n          const tab: TabDescriptor = {\n            closeable,\n            element,\n            id: tabId,\n            label,\n          };\n          sourceMap[tabId] = tab;\n          return tab;\n        });\n      return [tabDescriptors, sourceMap];\n    },\n    [id],\n  );\n\n  const [sourceWithIds, sourceMap] = useMemo(() => {\n    return normalizeItems(children);\n  }, [normalizeItems, children]);\n\n  const itemById = useCallback((id: string) => sourceMap[id], [sourceMap]);\n\n  return [sourceWithIds, itemById];\n};\n"],"names":["sourceMap","id"],"mappings":";;;AAcO,MAAM,eAAkB,GAAA,CAC7B,QACA,EAAA,EAAA,GAAK,MACgD,KAAA;AACrD,EAAA,MAAM,cAAiB,GAAA,WAAA;AAAA,IACrB,CAAC,KAAgD,KAAA;AAC/C,MAAA,MAAMA,aAAoB,EAAC;AAC3B,MAAM,MAAA,cAAA,GAAkC,QAAS,CAAA,OAAA,CAAQ,KAAK,CAAA,CAC3D,MAAO,CAAA,cAAc,CACrB,CAAA,GAAA,CAAI,CAAC,KAAA,EAAqB,KAAkB,KAAA;AAC3C,QAAM,MAAA;AAAA,UACJ,YAAc,EAAA,SAAA,GAAY,CAAO,IAAA,EAAA,KAAA,GAAQ,CAAC,CAAA,CAAA;AAAA,UAC1C,WAAa,EAAA,SAAA;AAAA,UACb,KAAQ,GAAA;AAAA,YACN,KAAM,CAAA,KAAA;AACV,QAAA,MAAM,KAAQ,GAAA,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAC5B,QAAM,MAAA,UAAA,GAAa,GAAG,KAAK,CAAA,MAAA,CAAA;AAC3B,QAAA,MAAM,KAAQ,GAAA;AAAA,UACZ,iBAAmB,EAAA,KAAA;AAAA,UACnB,EAAI,EAAA,UAAA;AAAA,UACJ,GAAK,EAAA;AAAA,SACP;AACA,QAAA,MAAM,OACJ,GAAA,KAAA,CAAM,IAAS,KAAA,QAAA,GACb,aAAa,KAAO,EAAA,KAAK,CAEzB,mBAAA,aAAA,CAAC,YAAU,GAAG,KAAA,EAAO,KAAc,EAAA,GAAA,EAAK,SACrC,KACH,CAAA;AAEJ,QAAA,MAAM,GAAqB,GAAA;AAAA,UACzB,SAAA;AAAA,UACA,OAAA;AAAA,UACA,EAAI,EAAA,KAAA;AAAA,UACJ;AAAA,SACF;AACA,QAAAA,UAAAA,CAAU,KAAK,CAAI,GAAA,GAAA;AACnB,QAAO,OAAA,GAAA;AAAA,OACR,CAAA;AACH,MAAO,OAAA,CAAC,gBAAgBA,UAAS,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,EAAE;AAAA,GACL;AAEA,EAAA,MAAM,CAAC,aAAA,EAAe,SAAS,CAAA,GAAI,QAAQ,MAAM;AAC/C,IAAA,OAAO,eAAe,QAAQ,CAAA;AAAA,GAC7B,EAAA,CAAC,cAAgB,EAAA,QAAQ,CAAC,CAAA;AAE7B,EAAM,MAAA,QAAA,GAAW,YAAY,CAACC,GAAAA,KAAe,UAAUA,GAAE,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEvE,EAAO,OAAA,CAAC,eAAe,QAAQ,CAAA;AACjC;;;;"}

package/dist-es/tabs/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type FocusEvent,\n  type FocusEventHandler,\n  type KeyboardEvent,\n  type MouseEvent,\n  type MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  End,\n  Home,\n} from \"../common-hooks\";\nimport type { OverflowItem } from \"../responsive\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n  horizontal: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowLeft]: \"bwd\",\n    [ArrowRight]: \"fwd\",\n  } as directionMap,\n  vertical: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowUp]: \"bwd\",\n    [ArrowDown]: \"fwd\",\n  } as directionMap,\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\",\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n  if (direction === \"start\") {\n    return 0;\n  }\n  if (direction === \"end\") {\n    return count - 1;\n  }\n  if (direction === \"bwd\") {\n    if (idx > 0) {\n      return idx - 1;\n    }\n    return idx;\n  }\n  if (idx === null) {\n    return 0;\n  }\n  if (idx === count - 1) {\n    return idx;\n  }\n  return idx + 1;\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n  el\n    ? el.hasAttribute(\"tabindex\")\n      ? el\n      : (el.querySelector(\"[tabindex]\") as HTMLElement)\n    : null;\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  indexPositions: OverflowItem[];\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number | null;\n}\n\ninterface TabstripNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  highlightedIdx: number;\n  focusTab: (\n    tabIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: MouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  indexPositions,\n  keyBoardActivation,\n  orientation,\n  selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n  const manualActivation = keyBoardActivation === \"manual\";\n  const mouseClickPending = useRef(false);\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\n  const [, forceRefresh] = useState({});\n  const [highlightedIdx, _setHighlightedIdx] = useControlled({\n    controlled: highlightedIdxProp,\n    default: defaultHighlightedIdx,\n    name: \"UseKeyboardNavigation\",\n  });\n\n  const setHighlightedIdx = useCallback((value: number) => {\n    focusedRef.current = value;\n    _setHighlightedIdx(value);\n  }, []);\n\n  const keyboardNavigation = useRef(false);\n\n  const focusTab = useCallback(\n    (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n      // The timeout is important in two scenarios:\n      // 1) where tab has overflowed and is being selected from overflow menu.\n      // We must not focus it until the overflow mechanism + render has restored\n      // it to the main display.\n      // 2) when we are focussing a new tab\n      // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n      // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n      // styled by css class) focus style will briefly linger on both.\n      setHighlightedIdx(tabIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const item = indexPositions.find((i) => i.index === tabIndex);\n\n        if (item) {\n          const focussableElement = getFocusableElement(\n            document.getElementById(item.id),\n          );\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, 70);\n      }\n    },\n    [indexPositions, setHighlightedIdx],\n  );\n\n  const onFocus = (e: FocusEvent<HTMLElement>) => {\n    // If focus is received by keyboard navigation, item with tabindex 0 will receive\n    // focus. If the item receiving focus has tabindex -1, then focus has been set\n    // programatically. We must respect this and not reset focus to selected tab.\n    if (focusedRef.current === -1) {\n      // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n      // the click event will have set correct value.\n      if (e.target.tabIndex === -1) {\n        // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n        // to revisit this and add code here if we may get focus set programatically in other ways.\n      } else {\n        setTimeout(() => {\n          // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n          if (focusedRef.current === -1 && selectedTabIndex !== null) {\n            setHighlightedIdx(selectedTabIndex);\n          }\n        }, 200);\n      }\n    }\n  };\n\n  const nextFocusableItemIdx = useCallback(\n    (\n      direction: directionType = \"fwd\",\n      idx = direction === \"fwd\" ? -1 : indexPositions.length,\n    ) => {\n      let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n      while (\n        ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) ||\n          (nextDirection === \"bwd\" && nextIdx > 0)) &&\n        !isFocusable(indexPositions[nextIdx])\n      ) {\n        const newIdx = nextItemIdx(\n          indexPositions.length,\n          nextDirection,\n          nextIdx,\n        );\n        if (newIdx === nextIdx) {\n          break;\n        }\n        nextIdx = newIdx;\n      }\n      return nextIdx;\n    },\n    [indexPositions],\n  );\n\n  // forceFocusVisible supports an edge case - first or last Tab are clicked\n  // then Left or Right Arrow keys are pressed, There will be no navigation\n  // but focusVisible must be applied\n  const navigateChildItems = useCallback(\n    (e: KeyboardEvent, forceFocusVisible = false) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        if (manualActivation) {\n          focusTab(nextIdx, immediateFocus);\n        } else {\n          // activateTab(newTabIndex);\n        }\n      } else if (forceFocusVisible) {\n        forceRefresh({});\n      }\n    },\n    [\n      highlightedIdx,\n      manualActivation,\n      nextFocusableItemIdx,\n      focusTab,\n      orientation,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e, true);\n        }\n      }\n    },\n    [indexPositions, navigateChildItems, orientation],\n  );\n\n  // TODO, in common hooks, we use mouse movement to track current highlighted\n  // index, rather than rely on component item reporting it\n  const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = () => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  };\n\n  const handleContainerMouseDown = useCallback(\n    (evt: MouseEvent) => {\n      if (!hasFocus) {\n        mouseClickPending.current = true;\n      }\n      keyboardNavigation.current = false;\n    },\n    [hasFocus],\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n      const destTarget = e.relatedTarget as HTMLElement;\n      if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n        setHighlightedIdx(-1);\n        setHasFocus(false);\n      }\n    },\n    onMouseDownCapture: handleContainerMouseDown,\n    onFocus: handleFocus,\n    onMouseLeave: () => {\n      keyboardNavigation.current = true;\n      setHighlightedIdx(-1);\n      mouseClickPending.current = false;\n    },\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      hasFocus &&\n      selectedTabIndex !== undefined &&\n      selectedTabIndex !== null\n    ) {\n      focusTab(selectedTabIndex);\n    }\n  }, [focusTab, hasFocus, selectedTabIndex]);\n\n  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusTab,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/tabs/useKeyboardNavigation.ts"],"sourcesContent":["import { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type FocusEvent,\n  type FocusEventHandler,\n  type KeyboardEvent,\n  type MouseEvent,\n  type MouseEventHandler,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  ArrowDown,\n  ArrowLeft,\n  ArrowRight,\n  ArrowUp,\n  End,\n  Home,\n} from \"../common-hooks\";\nimport type { OverflowItem } from \"../responsive\";\n\ntype orientationType = \"horizontal\" | \"vertical\";\ntype directionType = \"bwd\" | \"fwd\" | \"start\" | \"end\";\ntype directionMap = { [key: string]: directionType };\nconst navigation = {\n  horizontal: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowLeft]: \"bwd\",\n    [ArrowRight]: \"fwd\",\n  } as directionMap,\n  vertical: {\n    [Home]: \"start\",\n    [End]: \"end\",\n    [ArrowUp]: \"bwd\",\n    [ArrowDown]: \"fwd\",\n  } as directionMap,\n};\n\nconst isNavigationKey = (\n  key: string,\n  orientation: orientationType = \"horizontal\",\n) => navigation[orientation][key] !== undefined;\n\nfunction nextItemIdx(count: number, direction: directionType, idx: number) {\n  if (direction === \"start\") {\n    return 0;\n  }\n  if (direction === \"end\") {\n    return count - 1;\n  }\n  if (direction === \"bwd\") {\n    if (idx > 0) {\n      return idx - 1;\n    }\n    return idx;\n  }\n  if (idx === null) {\n    return 0;\n  }\n  if (idx === count - 1) {\n    return idx;\n  }\n  return idx + 1;\n}\n\nconst isFocusable = (item: OverflowItem) => !item.overflowed;\nconst getFocusableElement = (el: HTMLElement | null) =>\n  el\n    ? el.hasAttribute(\"tabindex\")\n      ? el\n      : (el.querySelector(\"[tabindex]\") as HTMLElement)\n    : null;\n\nexport interface ContainerNavigationProps {\n  onBlur: FocusEventHandler;\n  onFocus: FocusEventHandler;\n  onMouseDownCapture: MouseEventHandler;\n  onMouseLeave: MouseEventHandler;\n}\n\ninterface TabstripNavigationHookProps {\n  defaultHighlightedIdx?: number;\n  highlightedIdx?: number;\n  indexPositions: OverflowItem[];\n  keyBoardActivation?: \"manual\" | \"automatic\";\n  orientation: orientationType;\n  selectedIndex: number | null;\n}\n\ninterface TabstripNavigationHookResult {\n  containerProps: ContainerNavigationProps;\n  highlightedIdx: number;\n  focusTab: (\n    tabIndex: number,\n    immediateFocus?: boolean,\n    withKeyboard?: boolean,\n  ) => void;\n  focusVisible: number;\n  focusIsWithinComponent: boolean;\n  onClick: (evt: MouseEvent, tabIndex: number) => void;\n  onFocus: (evt: FocusEvent<HTMLElement>) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n}\n\nexport const useKeyboardNavigation = ({\n  defaultHighlightedIdx = -1,\n  highlightedIdx: highlightedIdxProp,\n  indexPositions,\n  keyBoardActivation,\n  orientation,\n  selectedIndex: selectedTabIndex = 0,\n}: TabstripNavigationHookProps): TabstripNavigationHookResult => {\n  const manualActivation = keyBoardActivation === \"manual\";\n  const mouseClickPending = useRef(false);\n  const focusedRef = useRef<number>(-1);\n  const [hasFocus, setHasFocus] = useState(false);\n  const [, forceRefresh] = useState({});\n  const [highlightedIdx, _setHighlightedIdx] = useControlled({\n    controlled: highlightedIdxProp,\n    default: defaultHighlightedIdx,\n    name: \"UseKeyboardNavigation\",\n  });\n\n  const setHighlightedIdx = useCallback((value: number) => {\n    focusedRef.current = value;\n    _setHighlightedIdx(value);\n  }, []);\n\n  const keyboardNavigation = useRef(false);\n\n  const focusTab = useCallback(\n    (tabIndex: number, immediateFocus = false, withKeyboard?: boolean) => {\n      // The timeout is important in two scenarios:\n      // 1) where tab has overflowed and is being selected from overflow menu.\n      // We must not focus it until the overflow mechanism + render has restored\n      // it to the main display.\n      // 2) when we are focussing a new tab\n      // We MUST NOT delay focus when using keyboard nav, else when focus moves from\n      // close button (focus ring styled by :focus-visible) to Tab label (focus ring\n      // styled by css class) focus style will briefly linger on both.\n      setHighlightedIdx(tabIndex);\n\n      if (withKeyboard === true && !keyboardNavigation.current) {\n        keyboardNavigation.current = true;\n      }\n\n      const setFocus = () => {\n        const item = indexPositions.find((i) => i.index === tabIndex);\n\n        if (item) {\n          const focussableElement = getFocusableElement(\n            document.getElementById(item.id),\n          );\n          focussableElement?.focus();\n        }\n      };\n      if (immediateFocus) {\n        setFocus();\n      } else {\n        setTimeout(setFocus, 70);\n      }\n    },\n    [indexPositions, setHighlightedIdx],\n  );\n\n  const onFocus = (e: FocusEvent<HTMLElement>) => {\n    // If focus is received by keyboard navigation, item with tabindex 0 will receive\n    // focus. If the item receiving focus has tabindex -1, then focus has been set\n    // programatically. We must respect this and not reset focus to selected tab.\n    if (focusedRef.current === -1) {\n      // Focus is entering tabstrip. Assume keyboard - if it'a actually mouse-driven,\n      // the click event will have set correct value.\n      if (e.target.tabIndex === -1) {\n        // Do nothing, assume focus is being passed back to button by closing dialog. Might need\n        // to revisit this and add code here if we may get focus set programatically in other ways.\n      } else {\n        setTimeout(() => {\n          // The selected tab will have tabIndex 0 make sure our internal state is aligned.\n          if (focusedRef.current === -1 && selectedTabIndex !== null) {\n            setHighlightedIdx(selectedTabIndex);\n          }\n        }, 200);\n      }\n    }\n  };\n\n  const nextFocusableItemIdx = useCallback(\n    (\n      direction: directionType = \"fwd\",\n      idx = direction === \"fwd\" ? -1 : indexPositions.length,\n    ) => {\n      let nextIdx = nextItemIdx(indexPositions.length, direction, idx);\n      const nextDirection =\n        direction === \"start\" ? \"fwd\" : direction === \"end\" ? \"bwd\" : direction;\n      while (\n        ((nextDirection === \"fwd\" && nextIdx < indexPositions.length) ||\n          (nextDirection === \"bwd\" && nextIdx > 0)) &&\n        !isFocusable(indexPositions[nextIdx])\n      ) {\n        const newIdx = nextItemIdx(\n          indexPositions.length,\n          nextDirection,\n          nextIdx,\n        );\n        if (newIdx === nextIdx) {\n          break;\n        }\n        nextIdx = newIdx;\n      }\n      return nextIdx;\n    },\n    [indexPositions],\n  );\n\n  // forceFocusVisible supports an edge case - first or last Tab are clicked\n  // then Left or Right Arrow keys are pressed, There will be no navigation\n  // but focusVisible must be applied\n  const navigateChildItems = useCallback(\n    (e: KeyboardEvent, forceFocusVisible = false) => {\n      const direction = navigation[orientation][e.key];\n      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);\n      if (nextIdx !== highlightedIdx) {\n        const immediateFocus = true;\n        if (manualActivation) {\n          focusTab(nextIdx, immediateFocus);\n        } else {\n          // activateTab(newTabIndex);\n        }\n      } else if (forceFocusVisible) {\n        forceRefresh({});\n      }\n    },\n    [\n      highlightedIdx,\n      manualActivation,\n      nextFocusableItemIdx,\n      focusTab,\n      orientation,\n    ],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {\n        e.preventDefault();\n        if (keyboardNavigation.current) {\n          navigateChildItems(e);\n        } else {\n          keyboardNavigation.current = true;\n          navigateChildItems(e, true);\n        }\n      }\n    },\n    [indexPositions, navigateChildItems, orientation],\n  );\n\n  // TODO, in common hooks, we use mouse movement to track current highlighted\n  // index, rather than rely on component item reporting it\n  const handleItemClick = (_: MouseEvent, tabIndex: number) => {\n    setHighlightedIdx(tabIndex);\n  };\n\n  const handleFocus = () => {\n    if (!hasFocus) {\n      setHasFocus(true);\n      if (!mouseClickPending.current) {\n        keyboardNavigation.current = true;\n      } else {\n        mouseClickPending.current = false;\n      }\n    }\n  };\n\n  const handleContainerMouseDown = useCallback(\n    (evt: MouseEvent) => {\n      if (!hasFocus) {\n        mouseClickPending.current = true;\n      }\n      keyboardNavigation.current = false;\n    },\n    [hasFocus],\n  );\n\n  const containerProps = {\n    onBlur: (e: FocusEvent) => {\n      const sourceTarget = (e.target as HTMLElement).closest(\".saltTabstrip\");\n      const destTarget = e.relatedTarget as HTMLElement;\n      if (sourceTarget && !sourceTarget?.contains(destTarget)) {\n        setHighlightedIdx(-1);\n        setHasFocus(false);\n      }\n    },\n    onMouseDownCapture: handleContainerMouseDown,\n    onFocus: handleFocus,\n    onMouseLeave: () => {\n      keyboardNavigation.current = true;\n      setHighlightedIdx(-1);\n      mouseClickPending.current = false;\n    },\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    if (\n      hasFocus &&\n      selectedTabIndex !== undefined &&\n      selectedTabIndex !== null\n    ) {\n      focusTab(selectedTabIndex);\n    }\n  }, [focusTab, hasFocus, selectedTabIndex]);\n\n  return {\n    containerProps,\n    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,\n    focusIsWithinComponent: hasFocus,\n    highlightedIdx,\n    focusTab,\n    onClick: handleItemClick,\n    onFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/tabs/useSelection.js

@@ -11,7 +11,7 @@ const useSelection = ({
 }) => {
   const [selected, setSelected, isControlled] = useControlled({
     controlled: selectedProp,
-    default: defaultSelected != null ? defaultSelected : 0,
+    default: defaultSelected ?? 0,
     name: "Tabstrip",
     state: "value"
   });

package/dist-es/tabs/useSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelection.js","sources":["../src/tabs/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, type MouseEvent, useCallback } from \"react\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport const isTabElement = (el: HTMLElement): boolean =>\n  el?.matches('[class*=\"saltTab \"]');\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n}: {\n  defaultSelected?: number;\n  highlightedIdx: number;\n  onSelectionChange?: (tabIndex: number) => void;\n  selected?: number | null;\n}): {\n  activateTab: (tabIndex: number) => void;\n  isControlled: boolean;\n  onClick: (evt: MouseEvent<Element>, tabIndex: number) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  selected: number | null;\n} => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? 0,\n    name: \"Tabstrip\",\n    state: \"value\",\n  });\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (tabIndex: number) => {\n      setSelected(tabIndex);\n      onSelectionChange?.(tabIndex);\n    },\n    [onSelectionChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const targetElement = e.target as HTMLElement;\n      if (\n        isSelectionEvent(e) &&\n        highlightedIdx !== selected &&\n        isTabElement(targetElement)\n      ) {\n        e.stopPropagation();\n        e.preventDefault();\n        selectItem(highlightedIdx);\n      }\n    },\n    [isSelectionEvent, highlightedIdx, selected, selectItem],\n  );\n\n  const onClick = useCallback(\n    (e: MouseEvent, tabIndex: number) => {\n      if (tabIndex !== selected) {\n        selectItem(tabIndex);\n      }\n    },\n    [selectItem, selected],\n  );\n\n  return {\n    activateTab: selectItem,\n    isControlled,\n    onClick,\n    onKeyDown: handleKeyDown,\n    selected,\n  };\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA,CAAA;AAEnC,MAAM,YAAe,GAAA,CAAC,EAC3B,KAAA,EAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAI,OAAQ,CAAA,qBAAA,EAAA;AAGP,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAU,EAAA,YAAA;AACZ,CAWK,KAAA;AACH,EAAA,MAAM,CAAC,QAAA,EAAU,WAAa,EAAA,YAAY,IAAI,aAAc,CAAA;AAAA,IAC1D,UAAY,EAAA,YAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,IAAA,GAAA,eAAA,GAAA,CAAA;AAAA,IAC5B,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA,OAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAqB,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,QAAqB,KAAA;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA,CAAA;AACpB,MAAoB,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,CAAA,CAAA;AAAA,KACtB;AAAA,IACA,CAAC,iBAAiB,CAAA;AAAA,GACpB,CAAA;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,MAAM,gBAAgB,CAAE,CAAA,MAAA,CAAA;AACxB,MAAA,IACE,iBAAiB,CAAC,CAAA,IAClB,mBAAmB,QACnB,IAAA,YAAA,CAAa,aAAa,CAC1B,EAAA;AACA,QAAA,CAAA,CAAE,eAAgB,EAAA,CAAA;AAClB,QAAA,CAAA,CAAE,cAAe,EAAA,CAAA;AACjB,QAAA,UAAA,CAAW,cAAc,CAAA,CAAA;AAAA,OAC3B;AAAA,KACF;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAgB,EAAA,QAAA,EAAU,UAAU,CAAA;AAAA,GACzD,CAAA;AAEA,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,GAAe,QAAqB,KAAA;AACnC,MAAA,IAAI,aAAa,QAAU,EAAA;AACzB,QAAA,UAAA,CAAW,QAAQ,CAAA,CAAA;AAAA,OACrB;AAAA,KACF;AAAA,IACA,CAAC,YAAY,QAAQ,CAAA;AAAA,GACvB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,WAAa,EAAA,UAAA;AAAA,IACb,YAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useSelection.js","sources":["../src/tabs/useSelection.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { type KeyboardEvent, type MouseEvent, useCallback } from \"react\";\n\nconst defaultSelectionKeys = [\"Enter\", \" \"];\n\nexport const isTabElement = (el: HTMLElement): boolean =>\n  el?.matches('[class*=\"saltTab \"]');\n\n// TODO use SelectionProps\nexport const useSelection = ({\n  defaultSelected,\n  highlightedIdx,\n  onSelectionChange,\n  selected: selectedProp,\n}: {\n  defaultSelected?: number;\n  highlightedIdx: number;\n  onSelectionChange?: (tabIndex: number) => void;\n  selected?: number | null;\n}): {\n  activateTab: (tabIndex: number) => void;\n  isControlled: boolean;\n  onClick: (evt: MouseEvent<Element>, tabIndex: number) => void;\n  onKeyDown: (evt: KeyboardEvent) => void;\n  selected: number | null;\n} => {\n  const [selected, setSelected, isControlled] = useControlled({\n    controlled: selectedProp,\n    default: defaultSelected ?? 0,\n    name: \"Tabstrip\",\n    state: \"value\",\n  });\n\n  const isSelectionEvent = useCallback(\n    (evt: KeyboardEvent) => defaultSelectionKeys.includes(evt.key),\n    [],\n  );\n\n  const selectItem = useCallback(\n    (tabIndex: number) => {\n      setSelected(tabIndex);\n      onSelectionChange?.(tabIndex);\n    },\n    [onSelectionChange],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const targetElement = e.target as HTMLElement;\n      if (\n        isSelectionEvent(e) &&\n        highlightedIdx !== selected &&\n        isTabElement(targetElement)\n      ) {\n        e.stopPropagation();\n        e.preventDefault();\n        selectItem(highlightedIdx);\n      }\n    },\n    [isSelectionEvent, highlightedIdx, selected, selectItem],\n  );\n\n  const onClick = useCallback(\n    (e: MouseEvent, tabIndex: number) => {\n      if (tabIndex !== selected) {\n        selectItem(tabIndex);\n      }\n    },\n    [selectItem, selected],\n  );\n\n  return {\n    activateTab: selectItem,\n    isControlled,\n    onClick,\n    onKeyDown: handleKeyDown,\n    selected,\n  };\n};\n"],"names":[],"mappings":";;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAEnC,MAAM,YAAe,GAAA,CAAC,EAC3B,KAAA,EAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAI,OAAQ,CAAA,qBAAA;AAGP,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAU,EAAA;AACZ,CAWK,KAAA;AACH,EAAA,MAAM,CAAC,QAAA,EAAU,WAAa,EAAA,YAAY,IAAI,aAAc,CAAA;AAAA,IAC1D,UAAY,EAAA,YAAA;AAAA,IACZ,SAAS,eAAmB,IAAA,CAAA;AAAA,IAC5B,IAAM,EAAA,UAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAqB,CAAA,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,QAAqB,KAAA;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,MAAoB,iBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,iBAAA,CAAA,QAAA,CAAA;AAAA,KACtB;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAqB,KAAA;AACpB,MAAA,MAAM,gBAAgB,CAAE,CAAA,MAAA;AACxB,MAAA,IACE,iBAAiB,CAAC,CAAA,IAClB,mBAAmB,QACnB,IAAA,YAAA,CAAa,aAAa,CAC1B,EAAA;AACA,QAAA,CAAA,CAAE,eAAgB,EAAA;AAClB,QAAA,CAAA,CAAE,cAAe,EAAA;AACjB,QAAA,UAAA,CAAW,cAAc,CAAA;AAAA;AAC3B,KACF;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAgB,EAAA,QAAA,EAAU,UAAU;AAAA,GACzD;AAEA,EAAA,MAAM,OAAU,GAAA,WAAA;AAAA,IACd,CAAC,GAAe,QAAqB,KAAA;AACnC,MAAA,IAAI,aAAa,QAAU,EAAA;AACzB,QAAA,UAAA,CAAW,QAAQ,CAAA;AAAA;AACrB,KACF;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,GACvB;AAEA,EAAO,OAAA;AAAA,IACL,WAAa,EAAA,UAAA;AAAA,IACb,YAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX;AAAA,GACF;AACF;;;;"}

package/dist-es/tabs/useTabs.js

@@ -9,12 +9,12 @@ const useTabs = ({
   id: idProp,
   onActiveChange
 }) => {
-  var _a, _b;
+  var _a;
   const id = useIdMemo(idProp);
   const [itemsWithIds] = useItemsWithIds(children, id);
   const [activeTabIndex, setActiveTabIndex] = useControlled({
     controlled: activeTabIndexProp,
-    default: defaultActiveTabIndex != null ? defaultActiveTabIndex : 0,
+    default: defaultActiveTabIndex ?? 0,
     name: "useTabs",
     state: "activeTabIndex"
   });
@@ -30,7 +30,7 @@ const useTabs = ({
     onActiveChange: handleTabActivated,
     activeTabIndex,
     tabs: itemsWithIds,
-    tabPanel: activeTabIndex === null ? null : (_b = (_a = itemsWithIds[activeTabIndex]) == null ? void 0 : _a.element) != null ? _b : null
+    tabPanel: activeTabIndex === null ? null : ((_a = itemsWithIds[activeTabIndex]) == null ? void 0 : _a.element) ?? null
   };
 };
 

package/dist-es/tabs/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabs.js","sources":["../src/tabs/useTabs.ts"],"sourcesContent":["import { useControlled, useIdMemo } from \"@salt-ds/core\";\nimport { type ReactNode, useCallback } from \"react\";\nimport type { TabDescriptor } from \"./TabsTypes\";\nimport { useItemsWithIds } from \"./useItemsWithIds\";\n\nexport interface TabsHookProps {\n  activeTabIndex?: number | null;\n  children: ReactNode;\n  defaultActiveTabIndex?: number;\n  id?: string;\n  onActiveChange?: (tabIndex: number) => void;\n}\n\nexport interface TabsHookResult {\n  activeTabIndex?: number | null;\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],\n  );\n\n  return {\n    id,\n    onActiveChange: handleTabActivated,\n    activeTabIndex,\n    tabs: itemsWithIds,\n    tabPanel:\n      activeTabIndex === null\n        ? null\n        : (itemsWithIds[activeTabIndex]?.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,EAAA,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,cAAc,CAAA;AAAA,GACjB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,EAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,IAChB,cAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,IACN,QAAA,EACE,mBAAmB,IACf,GAAA,IAAA,GAAA,CACC,wBAAa,cAAb,CAAA,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA8B,YAA9B,IAAyC,GAAA,EAAA,GAAA,IAAA;AAAA,GAClD,CAAA;AACF;;;;"}
+{"version":3,"file":"useTabs.js","sources":["../src/tabs/useTabs.ts"],"sourcesContent":["import { useControlled, useIdMemo } from \"@salt-ds/core\";\nimport { type ReactNode, useCallback } from \"react\";\nimport type { TabDescriptor } from \"./TabsTypes\";\nimport { useItemsWithIds } from \"./useItemsWithIds\";\n\nexport interface TabsHookProps {\n  activeTabIndex?: number | null;\n  children: ReactNode;\n  defaultActiveTabIndex?: number;\n  id?: string;\n  onActiveChange?: (tabIndex: number) => void;\n}\n\nexport interface TabsHookResult {\n  activeTabIndex?: number | null;\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],\n  );\n\n  return {\n    id,\n    onActiveChange: handleTabActivated,\n    activeTabIndex,\n    tabs: itemsWithIds,\n    tabPanel:\n      activeTabIndex === null\n        ? null\n        : (itemsWithIds[activeTabIndex]?.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;AACF,CAAqC,KAAA;AA3BrC,EAAA,IAAA,EAAA;AA4BE,EAAM,MAAA,EAAA,GAAK,UAAU,MAAM,CAAA;AAC3B,EAAA,MAAM,CAAC,YAAY,CAAI,GAAA,eAAA,CAAgB,UAAU,EAAE,CAAA;AAEnD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,aAAc,CAAA;AAAA,IACxD,UAAY,EAAA,kBAAA;AAAA,IACZ,SAAS,qBAAyB,IAAA,CAAA;AAAA,IAClC,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,MAAM,kBAAqB,GAAA,WAAA;AAAA,IACzB,CAAC,QAAqB,KAAA;AACpB,MAAA,iBAAA,CAAkB,QAAQ,CAAA;AAC1B,MAAiB,cAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAA,QAAA,CAAA;AAAA,KACnB;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAO,OAAA;AAAA,IACL,EAAA;AAAA,IACA,cAAgB,EAAA,kBAAA;AAAA,IAChB,cAAA;AAAA,IACA,IAAM,EAAA,YAAA;AAAA,IACN,QAAA,EACE,mBAAmB,IACf,GAAA,IAAA,GAAA,CAAA,CACC,kBAAa,cAAc,CAAA,KAA3B,mBAA8B,OAAW,KAAA;AAAA,GAClD;AACF;;;;"}

package/dist-es/tabs/useTabstrip.js

@@ -115,6 +115,7 @@ const useTabstrip = ({
     onExitEditMode: handleExitEditMode
   };
   const addTab = useCallback(
+    // The -1 is to account for the AddTab button - we shouldn't assume this
     (indexPosition = collectionHook.data.length - 1) => {
       const tabId = `${idRoot}-${collectionHook.data.length}`;
       pendingNewTab.current = tabId;
@@ -169,7 +170,8 @@ const useTabstrip = ({
           indexPosition
         });
         if (collectionHook.data.length > 1) {
-          if (indexPosition === selectionHook.selected && indexPosition === collectionHook.data.length - 1) {
+          if (indexPosition === selectionHook.selected && //TODO need to exclude overflow indicator, addButton
+          indexPosition === collectionHook.data.length - 1) {
             selectionHook.activateTab(indexPosition - 1);
           }
           onCloseTab == null ? void 0 : onCloseTab(indexPosition);

package/dist-es/tabs/useTabstrip.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type MouseEvent,\n  type RefObject,\n  createElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { OverflowCollectionHookResult } from \"../responsive\";\nimport { Tab } from \"./Tab\";\nimport {\n  type DragHookResult,\n  type dragStrategy,\n  useDragDrop,\n} from \"./drag-drop\";\nimport {\n  type EditableItemHookResult,\n  type ExitEditModeHandler,\n  useEditableItem,\n} from \"./useEditableItem\";\nimport {\n  type ContainerNavigationProps,\n  useKeyboardNavigation,\n} from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nimport type {\n  TabDescriptor,\n  TabElement,\n  composableTabProps,\n  exitEditHandler,\n  navigationProps,\n} from \"./TabsTypes\";\n\ninterface tabstripHookProps {\n  activeTabIndex?: number | null;\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 | null;\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 === null\n      ? null\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 === null) {\n          // do thing\n        } else 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 = `${idRoot}-${collectionHook.data.length}`;\n      pendingNewTab.current = tabId;\n\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 (\n            selectionHook.selected !== null &&\n            indexPosition < selectionHook.selected\n          ) {\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":[],"mappings":"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"}
+{"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n  type KeyboardEvent,\n  type MouseEvent,\n  type RefObject,\n  createElement,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport type { OverflowCollectionHookResult } from \"../responsive\";\nimport { Tab } from \"./Tab\";\nimport {\n  type DragHookResult,\n  type dragStrategy,\n  useDragDrop,\n} from \"./drag-drop\";\nimport {\n  type EditableItemHookResult,\n  type ExitEditModeHandler,\n  useEditableItem,\n} from \"./useEditableItem\";\nimport {\n  type ContainerNavigationProps,\n  useKeyboardNavigation,\n} from \"./useKeyboardNavigation\";\nimport { useSelection } from \"./useSelection\";\n\nimport type {\n  TabDescriptor,\n  TabElement,\n  composableTabProps,\n  exitEditHandler,\n  navigationProps,\n} from \"./TabsTypes\";\n\ninterface tabstripHookProps {\n  activeTabIndex?: number | null;\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 | null;\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 === null\n      ? null\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 === null) {\n          // do thing\n        } else 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 = `${idRoot}-${collectionHook.data.length}`;\n      pendingNewTab.current = tabId;\n\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 (\n            selectionHook.selected !== null &&\n            indexPosition < selectionHook.selected\n          ) {\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":[],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+var css_248z = ".saltTabBar {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n  gap: var(--salt-spacing-100);\n  position: relative;\n  box-sizing: border-box;\n}\n\n.saltTabBar-divider::before {\n  content: \"\";\n  position: absolute;\n  inset: auto 0 0 0;\n  height: var(--salt-size-border);\n  border-bottom: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-secondary-borderColor);\n}\n\n.saltTabBar-inset {\n  padding-left: var(--salt-spacing-300);\n  padding-right: var(--salt-spacing-300);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabBar.css.js.map

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

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

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

@@ -0,0 +1,39 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import css_248z from './TabBar.css.js';
+
+const withBaseName = makePrefixer("saltTabBar");
+const TabBar = forwardRef(
+  function TabBar2(props, ref) {
+    const { className, children, divider, inset, ...rest } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tab-bar",
+      css: css_248z,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("divider")]: divider,
+            [withBaseName("inset")]: inset
+          },
+          className
+        ),
+        ...rest,
+        ref,
+        children
+      }
+    );
+  }
+);
+
+export { TabBar };
+//# sourceMappingURL=TabBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\n\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport tabBarCss from \"./TabBar.css\";\n\nexport interface TabBarProps extends ComponentPropsWithRef<\"div\"> {\n  /**\n   * Styling variant with a bottom separator. Defaults to false\n   */\n  divider?: boolean;\n  /**\n   * Styling variant with left and right padding. Defaults to false\n   */\n  inset?: boolean;\n}\n\nconst withBaseName = makePrefixer(\"saltTabBar\");\n\nexport const TabBar = forwardRef<HTMLDivElement, TabBarProps>(\n  function TabBar(props, ref) {\n    const { className, children, divider, inset, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tab-bar\",\n      css: tabBarCss,\n      window: targetWindow,\n    });\n\n    return (\n      <div\n        className={clsx(\n          withBaseName(),\n          {\n            [withBaseName(\"divider\")]: divider,\n            [withBaseName(\"inset\")]: inset,\n          },\n          className,\n        )}\n        {...rest}\n        ref={ref}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n"],"names":["TabBar","tabBarCss"],"mappings":";;;;;;;;AAmBA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAEvC,MAAM,MAAS,GAAA,UAAA;AAAA,EACpB,SAASA,OAAO,CAAA,KAAA,EAAO,GAAK,EAAA;AAC1B,IAAA,MAAM,EAAE,SAAW,EAAA,QAAA,EAAU,SAAS,KAAO,EAAA,GAAG,MAAS,GAAA,KAAA;AAEzD,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,cAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAA,CAAa,SAAS,CAAC,GAAG,OAAA;AAAA,YAC3B,CAAC,YAAA,CAAa,OAAO,CAAC,GAAG;AAAA,WAC3B;AAAA,UACA;AAAA,SACF;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC;AAAA;AAAA,KACH;AAAA;AAGN;;;;"}

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

@@ -0,0 +1,4 @@
+var css_248z = "/* Component class applied to the root element */\n.saltTabListNext {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: flex-start;\n  align-items: center;\n  position: relative;\n  background: transparent;\n  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));\n  gap: var(--salt-spacing-100);\n  max-width: 100%;\n}\n\n.saltTabListNext-center {\n  justify-content: center;\n}\n\n.saltTabListNext-right {\n  justify-content: flex-end;\n}\n\n.saltTabListNext-activeColorPrimary {\n  --saltTabListNext-activeColor: var(--salt-container-primary-background);\n}\n\n.saltTabListNext-activeColorSecondary {\n  --saltTabListNext-activeColor: var(--salt-container-secondary-background);\n}\n\n.saltTabListNext-activeColorTertiary {\n  --saltTabListNext-activeColor: var(--salt-container-tertiary-background);\n}\n\n.saltTabListNext-overflowWarning {\n  display: none;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=TabListNext.css.js.map

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

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

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

@@ -0,0 +1,129 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useForkRef, useIsomorphicLayoutEffect, useId, capitalize } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef, useRef } from 'react';
+import css_248z from './TabListNext.css.js';
+import { TabOverflowList } from './TabOverflowList.js';
+import { useTabsNext } from './TabsNextContext.js';
+import { useOverflow } from './hooks/useOverflow.js';
+
+const withBaseName = makePrefixer("saltTabListNext");
+const TabListNext = forwardRef(
+  function TabstripNext(props, ref) {
+    const {
+      appearance = "bordered",
+      activeColor = "primary",
+      "aria-describedby": ariaDescribedBy,
+      children,
+      className,
+      onKeyDown,
+      ...rest
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tablist-next",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      selected,
+      getNext,
+      getPrevious,
+      getFirst,
+      getLast,
+      items,
+      activeTab,
+      menuOpen,
+      setMenuOpen,
+      returnFocus
+    } = useTabsNext();
+    const tabstripRef = useRef(null);
+    const handleRef = useForkRef(tabstripRef, ref);
+    const overflowButtonRef = useRef(null);
+    const [visible, hidden, isMeasuring] = useOverflow({
+      container: tabstripRef,
+      tabs: items,
+      children,
+      selected,
+      overflowButton: overflowButtonRef
+    });
+    const handleKeyDown = (event) => {
+      var _a, _b, _c;
+      onKeyDown == null ? void 0 : onKeyDown(event);
+      const actionMap = {
+        ArrowRight: getNext,
+        ArrowLeft: getPrevious,
+        Home: getFirst,
+        End: getLast,
+        ArrowUp: menuOpen ? getPrevious : void 0,
+        ArrowDown: menuOpen ? getNext : void 0
+      };
+      const action = actionMap[event.key];
+      if (action) {
+        event.preventDefault();
+        const activeTabId = (_a = activeTab.current) == null ? void 0 : _a.id;
+        if (!activeTabId) return;
+        const nextItem = action(activeTabId);
+        if (nextItem) {
+          (_b = nextItem.element) == null ? void 0 : _b.scrollIntoView({
+            block: "nearest",
+            inline: "nearest"
+          });
+          (_c = nextItem.element) == null ? void 0 : _c.focus({ preventScroll: true });
+        }
+      }
+    };
+    useIsomorphicLayoutEffect(() => {
+      var _a;
+      if (!returnFocus.current || visible.length < 1 || selected === void 0)
+        return;
+      const itemToFocus = items.find((i) => i.value === returnFocus.current);
+      (_a = itemToFocus == null ? void 0 : itemToFocus.element) == null ? void 0 : _a.focus({ preventScroll: true });
+      requestAnimationFrame(() => {
+        var _a2;
+        if (((_a2 = targetWindow == null ? void 0 : targetWindow.document) == null ? void 0 : _a2.activeElement) === (itemToFocus == null ? void 0 : itemToFocus.element)) {
+          returnFocus.current = void 0;
+        }
+      });
+    }, [visible, returnFocus, targetWindow, items, selected]);
+    const warningId = useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "tablist",
+        className: clsx(
+          withBaseName(),
+          withBaseName(appearance),
+          withBaseName("horizontal"),
+          withBaseName(`activeColor${capitalize(activeColor)}`),
+          className
+        ),
+        "data-ismeasuring": isMeasuring ? true : void 0,
+        ref: handleRef,
+        onKeyDown: handleKeyDown,
+        "aria-describedby": clsx(ariaDescribedBy, warningId),
+        ...rest,
+        children: [
+          hidden.length > 0 && /* @__PURE__ */ jsx("span", { id: warningId, className: withBaseName("overflowWarning"), children: "Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected" }),
+          visible,
+          /* @__PURE__ */ jsx(
+            TabOverflowList,
+            {
+              isMeasuring,
+              buttonRef: overflowButtonRef,
+              tabstripRef,
+              open: menuOpen,
+              setOpen: setMenuOpen,
+              children: hidden
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { TabListNext };
+//# sourceMappingURL=TabListNext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import {\n  capitalize,\n  makePrefixer,\n  useForkRef,\n  useId,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type KeyboardEvent,\n  forwardRef,\n  useRef,\n} from \"react\";\n\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\nimport { useOverflow } from \"./hooks/useOverflow\";\n\nconst withBaseName = makePrefixer(\"saltTabListNext\");\n\nexport interface TabListNextProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * Styling active color variant. Defaults to \"primary\".\n   */\n  activeColor?: \"primary\" | \"secondary\" | \"tertiary\";\n  /**\n   * The appearance of the tabs. Defaults to \"bordered\".\n   */\n  appearance?: \"bordered\" | \"transparent\";\n}\n\nexport const TabListNext = forwardRef<HTMLDivElement, TabListNextProps>(\n  function TabstripNext(props, ref) {\n    const {\n      appearance = \"bordered\",\n      activeColor = \"primary\",\n      \"aria-describedby\": ariaDescribedBy,\n      children,\n      className,\n      onKeyDown,\n      ...rest\n    } = props;\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tablist-next\",\n      css: tablistNextCss,\n      window: targetWindow,\n    });\n\n    const {\n      selected,\n      getNext,\n      getPrevious,\n      getFirst,\n      getLast,\n      items,\n      activeTab,\n      menuOpen,\n      setMenuOpen,\n      returnFocus,\n    } = useTabsNext();\n\n    const tabstripRef = useRef<HTMLDivElement>(null);\n    const handleRef = useForkRef(tabstripRef, ref);\n    const overflowButtonRef = useRef<HTMLButtonElement>(null);\n\n    const [visible, hidden, isMeasuring] = useOverflow({\n      container: tabstripRef,\n      tabs: items,\n      children,\n      selected,\n      overflowButton: overflowButtonRef,\n    });\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event);\n\n      const actionMap = {\n        ArrowRight: getNext,\n        ArrowLeft: getPrevious,\n        Home: getFirst,\n        End: getLast,\n        ArrowUp: menuOpen ? getPrevious : undefined,\n        ArrowDown: menuOpen ? getNext : undefined,\n      };\n\n      const action = actionMap[event.key as keyof typeof actionMap];\n\n      if (action) {\n        event.preventDefault();\n        const activeTabId = activeTab.current?.id;\n        if (!activeTabId) return;\n        const nextItem = action(activeTabId);\n        if (nextItem) {\n          nextItem.element?.scrollIntoView({\n            block: \"nearest\",\n            inline: \"nearest\",\n          });\n          nextItem.element?.focus({ preventScroll: true });\n        }\n      }\n    };\n\n    useIsomorphicLayoutEffect(() => {\n      if (!returnFocus.current || visible.length < 1 || selected === undefined)\n        return;\n\n      const itemToFocus = items.find((i) => i.value === returnFocus.current);\n      itemToFocus?.element?.focus({ preventScroll: true });\n\n      requestAnimationFrame(() => {\n        if (targetWindow?.document?.activeElement === itemToFocus?.element) {\n          returnFocus.current = undefined;\n        }\n      });\n    }, [visible, returnFocus, targetWindow, items, selected]);\n\n    const warningId = useId();\n\n    return (\n      <div\n        role=\"tablist\"\n        className={clsx(\n          withBaseName(),\n          withBaseName(appearance),\n          withBaseName(\"horizontal\"),\n          withBaseName(`activeColor${capitalize(activeColor)}`),\n          className,\n        )}\n        data-ismeasuring={isMeasuring ? true : undefined}\n        ref={handleRef}\n        onKeyDown={handleKeyDown}\n        aria-describedby={clsx(ariaDescribedBy, warningId)}\n        {...rest}\n      >\n        {hidden.length > 0 && (\n          <span id={warningId} className={withBaseName(\"overflowWarning\")}>\n            Note: This tab list includes overflow; tab positions may be\n            inaccurate or change when a tab is selected\n          </span>\n        )}\n        {visible}\n        <TabOverflowList\n          isMeasuring={isMeasuring}\n          buttonRef={overflowButtonRef}\n          tabstripRef={tabstripRef}\n          open={menuOpen}\n          setOpen={setMenuOpen}\n        >\n          {hidden}\n        </TabOverflowList>\n      </div>\n    );\n  },\n);\n"],"names":["tablistNextCss","_a"],"mappings":";;;;;;;;;;;AAsBA,MAAM,YAAA,GAAe,aAAa,iBAAiB,CAAA;AAc5C,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAAS,YAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,UAAa,GAAA,UAAA;AAAA,MACb,WAAc,GAAA,SAAA;AAAA,MACd,kBAAoB,EAAA,eAAA;AAAA,MACpB,QAAA;AAAA,MACA,SAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AACJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAA,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA,QACE,WAAY,EAAA;AAEhB,IAAM,MAAA,WAAA,GAAc,OAAuB,IAAI,CAAA;AAC/C,IAAM,MAAA,SAAA,GAAY,UAAW,CAAA,WAAA,EAAa,GAAG,CAAA;AAC7C,IAAM,MAAA,iBAAA,GAAoB,OAA0B,IAAI,CAAA;AAExD,IAAA,MAAM,CAAC,OAAA,EAAS,MAAQ,EAAA,WAAW,IAAI,WAAY,CAAA;AAAA,MACjD,SAAW,EAAA,WAAA;AAAA,MACX,IAAM,EAAA,KAAA;AAAA,MACN,QAAA;AAAA,MACA,QAAA;AAAA,MACA,cAAgB,EAAA;AAAA,KACjB,CAAA;AAED,IAAM,MAAA,aAAA,GAAgB,CAAC,KAAyC,KAAA;AA/EpE,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAgFM,MAAY,SAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,CAAA;AAEZ,MAAA,MAAM,SAAY,GAAA;AAAA,QAChB,UAAY,EAAA,OAAA;AAAA,QACZ,SAAW,EAAA,WAAA;AAAA,QACX,IAAM,EAAA,QAAA;AAAA,QACN,GAAK,EAAA,OAAA;AAAA,QACL,OAAA,EAAS,WAAW,WAAc,GAAA,KAAA,CAAA;AAAA,QAClC,SAAA,EAAW,WAAW,OAAU,GAAA,KAAA;AAAA,OAClC;AAEA,MAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,CAAM,GAA6B,CAAA;AAE5D,MAAA,IAAI,MAAQ,EAAA;AACV,QAAA,KAAA,CAAM,cAAe,EAAA;AACrB,QAAM,MAAA,WAAA,GAAA,CAAc,EAAU,GAAA,SAAA,CAAA,OAAA,KAAV,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,EAAA;AACvC,QAAA,IAAI,CAAC,WAAa,EAAA;AAClB,QAAM,MAAA,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,QAAA,IAAI,QAAU,EAAA;AACZ,UAAS,CAAA,EAAA,GAAA,QAAA,CAAA,OAAA,KAAT,mBAAkB,cAAe,CAAA;AAAA,YAC/B,KAAO,EAAA,SAAA;AAAA,YACP,MAAQ,EAAA;AAAA,WACV,CAAA;AACA,UAAA,CAAA,EAAA,GAAA,QAAA,CAAS,OAAT,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAkB,KAAM,CAAA,EAAE,eAAe,IAAK,EAAA,CAAA;AAAA;AAChD;AACF,KACF;AAEA,IAAA,yBAAA,CAA0B,MAAM;AA5GpC,MAAA,IAAA,EAAA;AA6GM,MAAA,IAAI,CAAC,WAAY,CAAA,OAAA,IAAW,OAAQ,CAAA,MAAA,GAAS,KAAK,QAAa,KAAA,KAAA,CAAA;AAC7D,QAAA;AAEF,MAAM,MAAA,WAAA,GAAc,MAAM,IAAK,CAAA,CAAC,MAAM,CAAE,CAAA,KAAA,KAAU,YAAY,OAAO,CAAA;AACrE,MAAA,CAAA,EAAA,GAAA,WAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,WAAA,CAAa,OAAb,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,KAAM,CAAA,EAAE,eAAe,IAAK,EAAA,CAAA;AAElD,MAAA,qBAAA,CAAsB,MAAM;AAnHlC,QAAAC,IAAAA,GAAAA;AAoHQ,QAAA,IAAA,CAAA,CAAIA,MAAA,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,QAAA,KAAd,gBAAAA,GAAwB,CAAA,aAAA,OAAkB,2CAAa,OAAS,CAAA,EAAA;AAClE,UAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAAA;AACxB,OACD,CAAA;AAAA,OACA,CAAC,OAAA,EAAS,aAAa,YAAc,EAAA,KAAA,EAAO,QAAQ,CAAC,CAAA;AAExD,IAAA,MAAM,YAAY,KAAM,EAAA;AAExB,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,SAAA;AAAA,QACL,SAAW,EAAA,IAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb,aAAa,UAAU,CAAA;AAAA,UACvB,aAAa,YAAY,CAAA;AAAA,UACzB,YAAa,CAAA,CAAA,WAAA,EAAc,UAAW,CAAA,WAAW,CAAC,CAAE,CAAA,CAAA;AAAA,UACpD;AAAA,SACF;AAAA,QACA,kBAAA,EAAkB,cAAc,IAAO,GAAA,KAAA,CAAA;AAAA,QACvC,GAAK,EAAA,SAAA;AAAA,QACL,SAAW,EAAA,aAAA;AAAA,QACX,kBAAA,EAAkB,IAAK,CAAA,eAAA,EAAiB,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAO,MAAA,CAAA,MAAA,GAAS,CACf,oBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,EAAA,EAAI,WAAW,SAAW,EAAA,YAAA,CAAa,iBAAiB,CAAA,EAAG,QAGjE,EAAA,yGAAA,EAAA,CAAA;AAAA,UAED,OAAA;AAAA,0BACD,GAAA;AAAA,YAAC,eAAA;AAAA,YAAA;AAAA,cACC,WAAA;AAAA,cACA,SAAW,EAAA,iBAAA;AAAA,cACX,WAAA;AAAA,cACA,IAAM,EAAA,QAAA;AAAA,cACN,OAAS,EAAA,WAAA;AAAA,cAER,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}