npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.76 → 1.0.0-alpha.78 - Mend

@salt-ds/lab 1.0.0-alpha.76 → 1.0.0-alpha.78

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (686) hide show

package/dist-cjs/tabs/drag-drop/drag-utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drag-utils.js","sources":["../src/tabs/drag-drop/drag-utils.ts"],"sourcesContent":["import type { orientationType } from \"../../responsive\";\nimport { type Direction, FWD } from \"./dragDropTypes\";\n\nconst LEFT_RIGHT = [\"left\", \"right\"];\nconst TOP_BOTTOM = [\"top\", \"bottom\"];\n// duplicated in repsonsive\n\nexport type MeasuredDropTarget = {\n currentIndex: number;\n dataIndex?: number;\n element: HTMLElement;\n index: number;\n isDraggedElement: boolean;\n isOverflowIndicator?: boolean;\n start: number;\n end: number;\n mid: number;\n size: number;\n};\n\nexport type targetType = {\n element: HTMLElement \| null;\n index: number;\n isLast?: boolean;\n};\n\ntype MousePosKey = keyof Pick<MouseEvent, \"clientX\" \| \"clientY\">;\ntype DOMRectKey = keyof Omit<DOMRect, \"toJSON\">;\ntype DOMRectDimensionKey = keyof Pick<DOMRect, \"width\" \| \"height\">;\ntype Dimension = keyof Pick<DOMRect, \"width\" \| \"height\">;\ntype ElementDimension = keyof Pick<\n HTMLElement,\n \| \"scrollHeight\"\n \| \"scrollWidth\"\n \| \"clientHeight\"\n \| \"clientWidth\"\n \| \"scrollTop\"\n \| \"scrollLeft\"\n>;\n\nexport const measureElementSizeAndPosition = (\n element: HTMLElement,\n dimension: Dimension = \"width\",\n includeAutoMargin = false,\n) => {\n const pos = dimension === \"width\" ? \"left\" : \"top\";\n const { [dimension]: size, [pos]: position } =\n element.getBoundingClientRect();\n const { padEnd = false, padStart = false } = element.dataset;\n const style = getComputedStyle(element);\n const [start, end] = dimension === \"width\" ? LEFT_RIGHT : TOP_BOTTOM;\n const marginStart =\n padStart && !includeAutoMargin\n ? 0\n : Number.parseInt(style.getPropertyValue(`margin-${start}`), 10);\n const marginEnd =\n padEnd && !includeAutoMargin\n ? 0\n : Number.parseInt(style.getPropertyValue(`margin-${end}`), 10);\n\n let minWidth = size;\n const flexShrink = Number.parseInt(style.getPropertyValue(\"flex-shrink\"), 10);\n if (flexShrink > 0) {\n const flexBasis = Number.parseInt(style.getPropertyValue(\"flex-basis\"), 10);\n if (!Number.isNaN(flexBasis) && flexBasis > 0) {\n minWidth = flexBasis;\n }\n }\n return [position, marginStart + minWidth + marginEnd];\n};\n\nconst DIMENSIONS = {\n horizontal: {\n CLIENT_SIZE: \"clientWidth\" as ElementDimension,\n CONTRA: \"top\" as DOMRectKey,\n CONTRA_POS: \"clientY\" as MousePosKey,\n DIMENSION: \"width\" as DOMRectDimensionKey,\n END: \"right\" as DOMRectKey,\n POS: \"clientX\" as MousePosKey,\n SCROLL_POS: \"scrollTop\" as ElementDimension,\n SCROLL_SIZE: \"scrollWidth\" as ElementDimension,\n START: \"left\" as DOMRectKey,\n },\n vertical: {\n CLIENT_SIZE: \"clientHeight\" as ElementDimension,\n CONTRA: \"left\" as DOMRectKey,\n CONTRA_POS: \"clientX\" as MousePosKey,\n DIMENSION: \"height\" as DOMRectDimensionKey,\n END: \"bottom\" as DOMRectKey,\n POS: \"clientY\" as MousePosKey,\n SCROLL_POS: \"scrollLeft\" as ElementDimension,\n SCROLL_SIZE: \"scrollHeight\" as ElementDimension,\n START: \"top\" as DOMRectKey,\n },\n};\nexport const dimensions = (orientation: orientationType) =>\n DIMENSIONS[orientation];\n\nexport const getDraggedItem = (\n measuredItems: MeasuredDropTarget[],\n): MeasuredDropTarget => {\n const result = measuredItems.find((item) => item.isDraggedElement);\n if (result) {\n return result;\n }\n throw Error(\"measuredItems do not contain a draggedElement\");\n};\n\nexport const moveDragItem = (\n measuredItems: MeasuredDropTarget[],\n dropTarget: MeasuredDropTarget,\n): MeasuredDropTarget[] => {\n const items: MeasuredDropTarget[] = measuredItems.slice();\n const draggedItem = getDraggedItem(items);\n const draggedIndex = items.indexOf(draggedItem!);\n const targetIndex = items.indexOf(dropTarget);\n\n const firstPos = Math.min(draggedIndex, targetIndex);\n const lastPos = Math.max(draggedIndex, targetIndex);\n let { start } = items[firstPos];\n\n items[draggedIndex] = { ...dropTarget };\n items[targetIndex] = { ...draggedItem };\n\n for (let i = firstPos; i <= lastPos; i++) {\n const item = items[i];\n item.currentIndex = i;\n item.start = start;\n item.end = start + item.size;\n item.mid = start + item.size / 2;\n start = item.end;\n }\n\n return items;\n};\n\nexport const isDraggedElement = (item: MeasuredDropTarget) =>\n item.isDraggedElement;\n\nexport const measureDropTargets = (\n container: HTMLElement,\n orientation: orientationType,\n draggedItem: HTMLElement,\n itemQuery?: string,\n) => {\n const dragThresholds: MeasuredDropTarget[] = [];\n\n // TODO need to make sure we're including only the children we should\n const children = Array.from(\n itemQuery ? container.querySelectorAll(itemQuery) : container.children,\n );\n let previousThreshold = null;\n for (let index = 0; index < children.length; index++) {\n const element = children[index] as HTMLElement;\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n const [start, size] = measureElementSizeAndPosition(element, dimension);\n\n previousThreshold = {\n currentIndex: index,\n dataIndex: Number.parseInt(element.dataset.index ?? \"-1\"),\n index,\n isDraggedElement: element === draggedItem,\n isOverflowIndicator: element.dataset.overflowIndicator === \"true\",\n element: element as HTMLElement,\n start,\n end: start + size,\n size,\n mid: start + size / 2,\n };\n\n dragThresholds.push(previousThreshold);\n }\n return dragThresholds;\n};\n\nexport const getNextDropTarget = (\n dropTargets: MeasuredDropTarget[],\n pos: number,\n direction: Direction,\n) => {\n const len = dropTargets.length;\n if (direction === FWD) {\n for (let index = 0; index < len; index++) {\n let dropTarget = dropTargets[index];\n const { start, mid, end } = dropTarget;\n if (pos > end) {\n continue;\n }\n if (pos > mid) {\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n if (pos > start) {\n dropTarget = dropTargets[index - 1];\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n }\n } else {\n for (let index = len - 1; index >= 0; index--) {\n let dropTarget = dropTargets[index];\n const { start, mid, end } = dropTarget;\n if (pos < start) {\n continue;\n }\n if (pos < mid) {\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n if (pos < end) {\n dropTarget = dropTargets[Math.min(len - 1, index + 1)];\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n }\n }\n return null;\n};\n"],"names":["FWD"],"mappings":"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"}
1	+ {"version":3,"file":"drag-utils.js","sources":["../src/tabs/drag-drop/drag-utils.ts"],"sourcesContent":["import type { orientationType } from \"../../responsive\";\nimport { type Direction, FWD } from \"./dragDropTypes\";\n\nconst LEFT_RIGHT = [\"left\", \"right\"];\nconst TOP_BOTTOM = [\"top\", \"bottom\"];\n// duplicated in repsonsive\n\nexport type MeasuredDropTarget = {\n currentIndex: number;\n dataIndex?: number;\n element: HTMLElement;\n index: number;\n isDraggedElement: boolean;\n isOverflowIndicator?: boolean;\n start: number;\n end: number;\n mid: number;\n size: number;\n};\n\nexport type targetType = {\n element: HTMLElement \| null;\n index: number;\n isLast?: boolean;\n};\n\ntype MousePosKey = keyof Pick<MouseEvent, \"clientX\" \| \"clientY\">;\ntype DOMRectKey = keyof Omit<DOMRect, \"toJSON\">;\ntype DOMRectDimensionKey = keyof Pick<DOMRect, \"width\" \| \"height\">;\ntype Dimension = keyof Pick<DOMRect, \"width\" \| \"height\">;\ntype ElementDimension = keyof Pick<\n HTMLElement,\n \| \"scrollHeight\"\n \| \"scrollWidth\"\n \| \"clientHeight\"\n \| \"clientWidth\"\n \| \"scrollTop\"\n \| \"scrollLeft\"\n>;\n\nexport const measureElementSizeAndPosition = (\n element: HTMLElement,\n dimension: Dimension = \"width\",\n includeAutoMargin = false,\n) => {\n const pos = dimension === \"width\" ? \"left\" : \"top\";\n const { [dimension]: size, [pos]: position } =\n element.getBoundingClientRect();\n const { padEnd = false, padStart = false } = element.dataset;\n const style = getComputedStyle(element);\n const [start, end] = dimension === \"width\" ? LEFT_RIGHT : TOP_BOTTOM;\n const marginStart =\n padStart && !includeAutoMargin\n ? 0\n : Number.parseInt(style.getPropertyValue(`margin-${start}`), 10);\n const marginEnd =\n padEnd && !includeAutoMargin\n ? 0\n : Number.parseInt(style.getPropertyValue(`margin-${end}`), 10);\n\n let minWidth = size;\n const flexShrink = Number.parseInt(style.getPropertyValue(\"flex-shrink\"), 10);\n if (flexShrink > 0) {\n const flexBasis = Number.parseInt(style.getPropertyValue(\"flex-basis\"), 10);\n if (!Number.isNaN(flexBasis) && flexBasis > 0) {\n minWidth = flexBasis;\n }\n }\n return [position, marginStart + minWidth + marginEnd];\n};\n\nconst DIMENSIONS = {\n horizontal: {\n CLIENT_SIZE: \"clientWidth\" as ElementDimension,\n CONTRA: \"top\" as DOMRectKey,\n CONTRA_POS: \"clientY\" as MousePosKey,\n DIMENSION: \"width\" as DOMRectDimensionKey,\n END: \"right\" as DOMRectKey,\n POS: \"clientX\" as MousePosKey,\n SCROLL_POS: \"scrollTop\" as ElementDimension,\n SCROLL_SIZE: \"scrollWidth\" as ElementDimension,\n START: \"left\" as DOMRectKey,\n },\n vertical: {\n CLIENT_SIZE: \"clientHeight\" as ElementDimension,\n CONTRA: \"left\" as DOMRectKey,\n CONTRA_POS: \"clientX\" as MousePosKey,\n DIMENSION: \"height\" as DOMRectDimensionKey,\n END: \"bottom\" as DOMRectKey,\n POS: \"clientY\" as MousePosKey,\n SCROLL_POS: \"scrollLeft\" as ElementDimension,\n SCROLL_SIZE: \"scrollHeight\" as ElementDimension,\n START: \"top\" as DOMRectKey,\n },\n};\nexport const dimensions = (orientation: orientationType) =>\n DIMENSIONS[orientation];\n\nexport const getDraggedItem = (\n measuredItems: MeasuredDropTarget[],\n): MeasuredDropTarget => {\n const result = measuredItems.find((item) => item.isDraggedElement);\n if (result) {\n return result;\n }\n throw Error(\"measuredItems do not contain a draggedElement\");\n};\n\nexport const moveDragItem = (\n measuredItems: MeasuredDropTarget[],\n dropTarget: MeasuredDropTarget,\n): MeasuredDropTarget[] => {\n const items: MeasuredDropTarget[] = measuredItems.slice();\n const draggedItem = getDraggedItem(items);\n const draggedIndex = items.indexOf(draggedItem!);\n const targetIndex = items.indexOf(dropTarget);\n\n const firstPos = Math.min(draggedIndex, targetIndex);\n const lastPos = Math.max(draggedIndex, targetIndex);\n let { start } = items[firstPos];\n\n items[draggedIndex] = { ...dropTarget };\n items[targetIndex] = { ...draggedItem };\n\n for (let i = firstPos; i <= lastPos; i++) {\n const item = items[i];\n item.currentIndex = i;\n item.start = start;\n item.end = start + item.size;\n item.mid = start + item.size / 2;\n start = item.end;\n }\n\n return items;\n};\n\nexport const isDraggedElement = (item: MeasuredDropTarget) =>\n item.isDraggedElement;\n\nexport const measureDropTargets = (\n container: HTMLElement,\n orientation: orientationType,\n draggedItem: HTMLElement,\n itemQuery?: string,\n) => {\n const dragThresholds: MeasuredDropTarget[] = [];\n\n // TODO need to make sure we're including only the children we should\n const children = Array.from(\n itemQuery ? container.querySelectorAll(itemQuery) : container.children,\n );\n let previousThreshold = null;\n for (let index = 0; index < children.length; index++) {\n const element = children[index] as HTMLElement;\n const dimension = orientation === \"horizontal\" ? \"width\" : \"height\";\n const [start, size] = measureElementSizeAndPosition(element, dimension);\n\n previousThreshold = {\n currentIndex: index,\n dataIndex: Number.parseInt(element.dataset.index ?? \"-1\"),\n index,\n isDraggedElement: element === draggedItem,\n isOverflowIndicator: element.dataset.overflowIndicator === \"true\",\n element: element as HTMLElement,\n start,\n end: start + size,\n size,\n mid: start + size / 2,\n };\n\n dragThresholds.push(previousThreshold);\n }\n return dragThresholds;\n};\n\nexport const getNextDropTarget = (\n dropTargets: MeasuredDropTarget[],\n pos: number,\n direction: Direction,\n) => {\n const len = dropTargets.length;\n if (direction === FWD) {\n for (let index = 0; index < len; index++) {\n let dropTarget = dropTargets[index];\n const { start, mid, end } = dropTarget;\n if (pos > end) {\n continue;\n }\n if (pos > mid) {\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n if (pos > start) {\n dropTarget = dropTargets[index - 1];\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n }\n } else {\n for (let index = len - 1; index >= 0; index--) {\n let dropTarget = dropTargets[index];\n const { start, mid, end } = dropTarget;\n if (pos < start) {\n continue;\n }\n if (pos < mid) {\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n if (pos < end) {\n dropTarget = dropTargets[Math.min(len - 1, index + 1)];\n return dropTarget.isDraggedElement ? null : dropTarget;\n }\n }\n }\n return null;\n};\n"],"names":["FWD"],"mappings":"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"}

package/dist-cjs/tabs/drag-drop/dragDropTypes.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dragDropTypes.js","sources":["../src/tabs/drag-drop/dragDropTypes.ts"],"sourcesContent":["import type { MouseEventHandler, RefObject } from \"react\";\n\nimport type { orientationType } from \"../../responsive\";\n\nexport type dragStrategy = \"drop-indicator\" \| \"natural-movement\";\n\nexport type Direction = \"fwd\" \| \"bwd\";\nexport const FWD: Direction = \"fwd\";\nexport const BWD: Direction = \"bwd\";\n\nexport type Rect = {\n height: number;\n left: number;\n top: number;\n width: number;\n};\n\nexport type DragHookResult = {\n draggable: JSX.Element \| null;\n dropIndicator: JSX.Element \| null;\n draggedItemIndex?: number;\n isDragging: boolean;\n onMouseDown?: MouseEventHandler;\n revealOverflowedItems: boolean;\n // tabProps?: Partial<TabProps>;\n};\n\nexport type DragDropHook = (props: {\n allowDragDrop?: boolean \| dragStrategy;\n extendedDropZone?: boolean;\n onDrop: (fromIndex: number, toIndex: number) => void;\n orientation: orientationType;\n containerRef: RefObject<HTMLElement>;\n itemQuery?: string;\n}) => DragHookResult;\n"],"names":[],"mappings":";;AAOO,MAAM,GAAiB~~,GAAA~~;;;;"}
1	+ {"version":3,"file":"dragDropTypes.js","sources":["../src/tabs/drag-drop/dragDropTypes.ts"],"sourcesContent":["import type { MouseEventHandler, RefObject } from \"react\";\n\nimport type { orientationType } from \"../../responsive\";\n\nexport type dragStrategy = \"drop-indicator\" \| \"natural-movement\";\n\nexport type Direction = \"fwd\" \| \"bwd\";\nexport const FWD: Direction = \"fwd\";\nexport const BWD: Direction = \"bwd\";\n\nexport type Rect = {\n height: number;\n left: number;\n top: number;\n width: number;\n};\n\nexport type DragHookResult = {\n draggable: JSX.Element \| null;\n dropIndicator: JSX.Element \| null;\n draggedItemIndex?: number;\n isDragging: boolean;\n onMouseDown?: MouseEventHandler;\n revealOverflowedItems: boolean;\n // tabProps?: Partial<TabProps>;\n};\n\nexport type DragDropHook = (props: {\n allowDragDrop?: boolean \| dragStrategy;\n extendedDropZone?: boolean;\n onDrop: (fromIndex: number, toIndex: number) => void;\n orientation: orientationType;\n containerRef: RefObject<HTMLElement>;\n itemQuery?: string;\n}) => DragHookResult;\n"],"names":[],"mappings":";;AAOO,MAAM,GAAA,GAAiB;;;;"}

package/dist-cjs/tabs/drag-drop/useDragDrop.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDragDrop.js","sources":["../src/tabs/drag-drop/useDragDrop.ts"],"sourcesContent":["import type { DragDropHook } from \"./dragDropTypes\";\nimport { useDragDropNaturalMovement } from \"./useDragDropNaturalMovement\";\n\nconst NULL_DRAG_DROP_RESULT = {\n draggable: null,\n isDragging: false,\n dropIndicator: null,\n revealOverflowedItems: false,\n};\nconst noDragDrop: DragDropHook = () => NULL_DRAG_DROP_RESULT;\n\nexport const useDragDrop: DragDropHook = ({\n allowDragDrop,\n ...dragDropProps\n}) => {\n const useDragDropHook: DragDropHook = allowDragDrop\n ? useDragDropNaturalMovement\n : noDragDrop;\n\n return useDragDropHook(dragDropProps);\n};\n"],"names":["useDragDropNaturalMovement"],"mappings":";;;;AAGA,MAAM,~~qBAAwB~~,~~GAAA~~;AAAA,EAC5B,~~SAAW~~,~~EAAA~~,IAAA;AAAA,EACX,~~UAAY~~,~~EAAA~~,KAAA;AAAA,EACZ,~~aAAe~~,~~EAAA~~,IAAA;AAAA,EACf,~~qBAAuB~~,~~EAAA~~;AACzB,CAAA;AACA,MAAM,aAA2B,MAAM,qBAAA;AAEhC,MAAM,cAA4B,CAAC;AAAA,EACxC,aAAA;AAAA,EACA,GAAG;AACL,~~CAAM~~,~~KAAA~~;AACJ,~~EAAM~~,~~MAAA~~,eAAA,GAAgC,gBAClCA,~~qDACA~~,~~GAAA~~,UAAA;AAEJ,EAAA,OAAO,gBAAgB,aAAa,CAAA;AACtC;;;;"}
1	+ {"version":3,"file":"useDragDrop.js","sources":["../src/tabs/drag-drop/useDragDrop.ts"],"sourcesContent":["import type { DragDropHook } from \"./dragDropTypes\";\nimport { useDragDropNaturalMovement } from \"./useDragDropNaturalMovement\";\n\nconst NULL_DRAG_DROP_RESULT = {\n draggable: null,\n isDragging: false,\n dropIndicator: null,\n revealOverflowedItems: false,\n};\nconst noDragDrop: DragDropHook = () => NULL_DRAG_DROP_RESULT;\n\nexport const useDragDrop: DragDropHook = ({\n allowDragDrop,\n ...dragDropProps\n}) => {\n const useDragDropHook: DragDropHook = allowDragDrop\n ? useDragDropNaturalMovement\n : noDragDrop;\n\n return useDragDropHook(dragDropProps);\n};\n"],"names":["useDragDropNaturalMovement"],"mappings":";;;;AAGA,MAAM,qBAAA,GAAwB;AAAA,EAC5B,SAAA,EAAW,IAAA;AAAA,EACX,UAAA,EAAY,KAAA;AAAA,EACZ,aAAA,EAAe,IAAA;AAAA,EACf,qBAAA,EAAuB;AACzB,CAAA;AACA,MAAM,aAA2B,MAAM,qBAAA;AAEhC,MAAM,cAA4B,CAAC;AAAA,EACxC,aAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,eAAA,GAAgC,gBAClCA,qDAAA,GACA,UAAA;AAEJ,EAAA,OAAO,gBAAgB,aAAa,CAAA;AACtC;;;;"}

package/dist-cjs/tabs/drag-drop/useDragDropNaturalMovement.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useDragDropNaturalMovement.js","sources":["../src/tabs/drag-drop/useDragDropNaturalMovement.tsx"],"sourcesContent":["import { type MouseEventHandler, useCallback, useRef, useState } from \"react\";\nimport { Draggable } from \"./Draggable\";\nimport {\n dimensions,\n getDraggedItem,\n getNextDropTarget,\n isDraggedElement,\n type MeasuredDropTarget,\n measureDropTargets,\n moveDragItem,\n} from \"./drag-utils\";\nimport type { Direction, DragDropHook } from \"./dragDropTypes\";\nimport { useDragSpacers } from \"./useDragSpacers\";\n\nconst dragThreshold = 3;\n\nexport const useDragDropNaturalMovement: DragDropHook = ({\n onDrop,\n orientation = \"horizontal\",\n containerRef,\n itemQuery = \"*\",\n}) => {\n const [showOverflow, setShowOverflow] = useState(false);\n const overflowMenuShowingRef = useRef(false);\n const [isDragging, setIsDragging] = useState(false);\n const [dragPortal, setDragPortal] = useState<JSX.Element \| null>(null);\n const draggableRef = useRef<HTMLDivElement>(null);\n const startPos = useRef(0);\n const previousPos = useRef(0);\n const mouseOffset = useRef(0);\n const mouseDownTimer = useRef<number \| null>(null);\n const dragLimits = useRef({ start: 0, end: 0 });\n const dragDirection = useRef<Direction \| undefined>();\n const dropTarget = useRef<MeasuredDropTarget \| null>(null);\n const measuredDropTargets = useRef<MeasuredDropTarget[]>([]);\n const { clearSpacers, displaceItem, displaceLastItem } = useDragSpacers();\n\n const dragMouseMoveHandler = useCallback(\n (evt: MouseEvent) => {\n const { POS } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n const { current: lastClientPos } = previousPos;\n const { current: currentDropTarget } = dropTarget;\n const { current: dropTargets } = measuredDropTargets;\n const draggedItem = getDraggedItem(dropTargets);\n\n if (Math.abs(lastClientPos - clientPos) > 0) {\n previousPos.current = clientPos;\n\n const moveDistance = clientPos - startPos.current;\n\n const pos = startPos.current - mouseOffset.current + moveDistance;\n const renderPos = Math.max(\n dragLimits.current.start,\n Math.min(dragLimits.current.end, pos),\n );\n\n if (draggableRef.current && containerRef.current) {\n // Have to redefine the following here as we're using it as a style type not a DOMRect type\n const START = orientation === \"horizontal\" ? \"left\" : \"top\";\n draggableRef.current.style[START] = `${renderPos}px`;\n\n const direction = lastClientPos < clientPos ? \"fwd\" : \"bwd\";\n const offsetPos = clientPos - mouseOffset.current;\n const leadingEdge =\n direction === \"fwd\" ? offsetPos + draggedItem.size : offsetPos;\n\n const nextDropTarget = getNextDropTarget(\n measuredDropTargets.current,\n leadingEdge,\n direction,\n );\n\n if (\n nextDropTarget &&\n (nextDropTarget.index !== currentDropTarget?.index \|\|\n direction !== dragDirection.current)\n ) {\n if (nextDropTarget.isOverflowIndicator) {\n // Does this belong in here or can we abstract it out\n overflowMenuShowingRef.current = true;\n setShowOverflow(true);\n } else {\n const newDropTargets = moveDragItem(dropTargets, nextDropTarget);\n const draggedItem = getDraggedItem(newDropTargets);\n\n const nextDisplacedItem =\n newDropTargets[draggedItem.currentIndex + 1];\n if (nextDisplacedItem) {\n displaceItem(\n nextDisplacedItem,\n draggedItem.size,\n true,\n direction,\n );\n } else {\n const displacedItem =\n newDropTargets[draggedItem.currentIndex - 1];\n displaceLastItem(displacedItem, draggedItem.size, true);\n }\n measuredDropTargets.current = newDropTargets;\n overflowMenuShowingRef.current = false;\n setShowOverflow(false);\n }\n\n dropTarget.current = nextDropTarget;\n dragDirection.current = direction;\n }\n }\n }\n },\n [containerRef, displaceItem, displaceLastItem, orientation],\n );\n\n const dragMouseUpHandler = useCallback(() => {\n document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n\n clearSpacers();\n\n const { current: dropTargets } = measuredDropTargets;\n const draggedItem = getDraggedItem(dropTargets);\n const { dataIndex = -1, index, currentIndex: toIndex } = draggedItem;\n\n const fromIndex = dataIndex !== -1 ? dataIndex : index;\n dropTarget.current = null;\n dragDirection.current = undefined;\n\n setDragPortal(null);\n\n if (overflowMenuShowingRef.current) {\n onDrop(fromIndex, -1);\n } else if (fromIndex !== toIndex) {\n onDrop(fromIndex, toIndex);\n }\n setShowOverflow(false);\n setIsDragging(false);\n }, [clearSpacers, dragMouseMoveHandler, onDrop]);\n\n const enterDraggingState = useCallback(\n (evt: MouseEvent) => {\n const { POS, START } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n\n const evtTarget = evt.target as HTMLElement;\n const dragElement = evtTarget.closest(itemQuery) as HTMLElement;\n if (dragElement) {\n // TODO this is very specific to responsive Container\n const query = `:is(${itemQuery}:not([data-overflowed=\"true\"]),[data-overflow-indicator])`;\n const dropTargets = measureDropTargets(\n containerRef.current as HTMLElement,\n orientation,\n dragElement,\n query,\n );\n\n const draggedItem = dropTargets.find(isDraggedElement);\n if (draggedItem && containerRef.current) {\n measuredDropTargets.current = dropTargets;\n dropTarget.current = draggedItem;\n\n const containerRect = containerRef.current.getBoundingClientRect();\n const draggableRect = draggedItem.element.getBoundingClientRect();\n mouseOffset.current = clientPos - draggedItem.start;\n const [lastItem] = dropTargets.slice(-1);\n const lastChildEnd = lastItem.end;\n\n console.log({ lastItem });\n\n dragLimits.current.start = containerRect[START];\n dragLimits.current.end = lastItem.isOverflowIndicator\n ? Math.max(lastItem.start, containerRect.right - draggedItem.size)\n : lastChildEnd - draggedItem.size;\n\n setDragPortal(\n <Draggable\n wrapperClassName={`tabstrip-${orientation}`}\n ref={draggableRef}\n rect={draggableRect}\n element={dragElement.cloneNode(true) as HTMLElement}\n />,\n );\n\n if (draggedItem !== lastItem) {\n const nextItem = dropTargets[draggedItem.index + 1];\n displaceItem(nextItem, draggedItem.size, false);\n } else {\n const displacedItem = dropTargets[draggedItem.index];\n displaceLastItem(displacedItem, draggedItem.size, false);\n }\n\n setIsDragging(true);\n }\n\n document.addEventListener(\"mousemove\", dragMouseMoveHandler, false);\n document.addEventListener(\"mouseup\", dragMouseUpHandler, false);\n }\n },\n [\n containerRef,\n displaceItem,\n displaceLastItem,\n dragMouseMoveHandler,\n dragMouseUpHandler,\n itemQuery,\n orientation,\n ],\n );\n\n const preDragMouseMoveHandler = useCallback(\n (evt: MouseEvent) => {\n const { POS } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n const mouseMoveDistance = Math.abs(clientPos - startPos.current);\n if (mouseMoveDistance > dragThreshold && containerRef.current) {\n if (mouseDownTimer.current) {\n window.clearTimeout(mouseDownTimer.current);\n mouseDownTimer.current = null;\n }\n document.removeEventListener(\n \"mousemove\",\n preDragMouseMoveHandler,\n false,\n );\n document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n enterDraggingState(evt);\n }\n },\n [containerRef, enterDraggingState, orientation],\n );\n\n const preDragMouseUpHandler = useCallback(() => {\n if (mouseDownTimer.current) {\n window.clearTimeout(mouseDownTimer.current);\n mouseDownTimer.current = null;\n }\n document.removeEventListener(\"mousemove\", preDragMouseMoveHandler, false);\n document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n }, [preDragMouseMoveHandler]);\n\n const mouseDownHandler: MouseEventHandler = useCallback(\n (evt) => {\n if (containerRef.current && !evt.defaultPrevented) {\n const { POS } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n startPos.current = clientPos;\n previousPos.current = clientPos;\n\n document.addEventListener(\"mousemove\", preDragMouseMoveHandler, false);\n document.addEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n evt.persist();\n\n mouseDownTimer.current = window.setTimeout(() => {\n document.removeEventListener(\n \"mousemove\",\n preDragMouseMoveHandler,\n false,\n );\n document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n enterDraggingState(evt.nativeEvent);\n }, 500);\n }\n },\n [\n containerRef,\n enterDraggingState,\n orientation,\n preDragMouseMoveHandler,\n preDragMouseUpHandler,\n ],\n );\n\n const draggedItemIndex = isDragging\n ? getDraggedItem(measuredDropTargets.current).dataIndex\n : -1;\n\n return {\n draggable: dragPortal,\n dropIndicator: null,\n draggedItemIndex,\n isDragging,\n onMouseDown: mouseDownHandler,\n revealOverflowedItems: showOverflow,\n };\n};\n"],"names":["useState","useRef","useDragSpacers","useCallback","dimensions","getDraggedItem","getNextDropTarget","moveDragItem","draggedItem","measureDropTargets","isDraggedElement","jsx","Draggable"],"mappings":"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"}
1	+ {"version":3,"file":"useDragDropNaturalMovement.js","sources":["../src/tabs/drag-drop/useDragDropNaturalMovement.tsx"],"sourcesContent":["import { type MouseEventHandler, useCallback, useRef, useState } from \"react\";\nimport { Draggable } from \"./Draggable\";\nimport {\n dimensions,\n getDraggedItem,\n getNextDropTarget,\n isDraggedElement,\n type MeasuredDropTarget,\n measureDropTargets,\n moveDragItem,\n} from \"./drag-utils\";\nimport type { Direction, DragDropHook } from \"./dragDropTypes\";\nimport { useDragSpacers } from \"./useDragSpacers\";\n\nconst dragThreshold = 3;\n\nexport const useDragDropNaturalMovement: DragDropHook = ({\n onDrop,\n orientation = \"horizontal\",\n containerRef,\n itemQuery = \"*\",\n}) => {\n const [showOverflow, setShowOverflow] = useState(false);\n const overflowMenuShowingRef = useRef(false);\n const [isDragging, setIsDragging] = useState(false);\n const [dragPortal, setDragPortal] = useState<JSX.Element \| null>(null);\n const draggableRef = useRef<HTMLDivElement>(null);\n const startPos = useRef(0);\n const previousPos = useRef(0);\n const mouseOffset = useRef(0);\n const mouseDownTimer = useRef<number \| null>(null);\n const dragLimits = useRef({ start: 0, end: 0 });\n const dragDirection = useRef<Direction \| undefined>();\n const dropTarget = useRef<MeasuredDropTarget \| null>(null);\n const measuredDropTargets = useRef<MeasuredDropTarget[]>([]);\n const { clearSpacers, displaceItem, displaceLastItem } = useDragSpacers();\n\n const dragMouseMoveHandler = useCallback(\n (evt: MouseEvent) => {\n const { POS } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n const { current: lastClientPos } = previousPos;\n const { current: currentDropTarget } = dropTarget;\n const { current: dropTargets } = measuredDropTargets;\n const draggedItem = getDraggedItem(dropTargets);\n\n if (Math.abs(lastClientPos - clientPos) > 0) {\n previousPos.current = clientPos;\n\n const moveDistance = clientPos - startPos.current;\n\n const pos = startPos.current - mouseOffset.current + moveDistance;\n const renderPos = Math.max(\n dragLimits.current.start,\n Math.min(dragLimits.current.end, pos),\n );\n\n if (draggableRef.current && containerRef.current) {\n // Have to redefine the following here as we're using it as a style type not a DOMRect type\n const START = orientation === \"horizontal\" ? \"left\" : \"top\";\n draggableRef.current.style[START] = `${renderPos}px`;\n\n const direction = lastClientPos < clientPos ? \"fwd\" : \"bwd\";\n const offsetPos = clientPos - mouseOffset.current;\n const leadingEdge =\n direction === \"fwd\" ? offsetPos + draggedItem.size : offsetPos;\n\n const nextDropTarget = getNextDropTarget(\n measuredDropTargets.current,\n leadingEdge,\n direction,\n );\n\n if (\n nextDropTarget &&\n (nextDropTarget.index !== currentDropTarget?.index \|\|\n direction !== dragDirection.current)\n ) {\n if (nextDropTarget.isOverflowIndicator) {\n // Does this belong in here or can we abstract it out\n overflowMenuShowingRef.current = true;\n setShowOverflow(true);\n } else {\n const newDropTargets = moveDragItem(dropTargets, nextDropTarget);\n const draggedItem = getDraggedItem(newDropTargets);\n\n const nextDisplacedItem =\n newDropTargets[draggedItem.currentIndex + 1];\n if (nextDisplacedItem) {\n displaceItem(\n nextDisplacedItem,\n draggedItem.size,\n true,\n direction,\n );\n } else {\n const displacedItem =\n newDropTargets[draggedItem.currentIndex - 1];\n displaceLastItem(displacedItem, draggedItem.size, true);\n }\n measuredDropTargets.current = newDropTargets;\n overflowMenuShowingRef.current = false;\n setShowOverflow(false);\n }\n\n dropTarget.current = nextDropTarget;\n dragDirection.current = direction;\n }\n }\n }\n },\n [containerRef, displaceItem, displaceLastItem, orientation],\n );\n\n const dragMouseUpHandler = useCallback(() => {\n document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n\n clearSpacers();\n\n const { current: dropTargets } = measuredDropTargets;\n const draggedItem = getDraggedItem(dropTargets);\n const { dataIndex = -1, index, currentIndex: toIndex } = draggedItem;\n\n const fromIndex = dataIndex !== -1 ? dataIndex : index;\n dropTarget.current = null;\n dragDirection.current = undefined;\n\n setDragPortal(null);\n\n if (overflowMenuShowingRef.current) {\n onDrop(fromIndex, -1);\n } else if (fromIndex !== toIndex) {\n onDrop(fromIndex, toIndex);\n }\n setShowOverflow(false);\n setIsDragging(false);\n }, [clearSpacers, dragMouseMoveHandler, onDrop]);\n\n const enterDraggingState = useCallback(\n (evt: MouseEvent) => {\n const { POS, START } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n\n const evtTarget = evt.target as HTMLElement;\n const dragElement = evtTarget.closest(itemQuery) as HTMLElement;\n if (dragElement) {\n // TODO this is very specific to responsive Container\n const query = `:is(${itemQuery}:not([data-overflowed=\"true\"]),[data-overflow-indicator])`;\n const dropTargets = measureDropTargets(\n containerRef.current as HTMLElement,\n orientation,\n dragElement,\n query,\n );\n\n const draggedItem = dropTargets.find(isDraggedElement);\n if (draggedItem && containerRef.current) {\n measuredDropTargets.current = dropTargets;\n dropTarget.current = draggedItem;\n\n const containerRect = containerRef.current.getBoundingClientRect();\n const draggableRect = draggedItem.element.getBoundingClientRect();\n mouseOffset.current = clientPos - draggedItem.start;\n const [lastItem] = dropTargets.slice(-1);\n const lastChildEnd = lastItem.end;\n\n console.log({ lastItem });\n\n dragLimits.current.start = containerRect[START];\n dragLimits.current.end = lastItem.isOverflowIndicator\n ? Math.max(lastItem.start, containerRect.right - draggedItem.size)\n : lastChildEnd - draggedItem.size;\n\n setDragPortal(\n <Draggable\n wrapperClassName={`tabstrip-${orientation}`}\n ref={draggableRef}\n rect={draggableRect}\n element={dragElement.cloneNode(true) as HTMLElement}\n />,\n );\n\n if (draggedItem !== lastItem) {\n const nextItem = dropTargets[draggedItem.index + 1];\n displaceItem(nextItem, draggedItem.size, false);\n } else {\n const displacedItem = dropTargets[draggedItem.index];\n displaceLastItem(displacedItem, draggedItem.size, false);\n }\n\n setIsDragging(true);\n }\n\n document.addEventListener(\"mousemove\", dragMouseMoveHandler, false);\n document.addEventListener(\"mouseup\", dragMouseUpHandler, false);\n }\n },\n [\n containerRef,\n displaceItem,\n displaceLastItem,\n dragMouseMoveHandler,\n dragMouseUpHandler,\n itemQuery,\n orientation,\n ],\n );\n\n const preDragMouseMoveHandler = useCallback(\n (evt: MouseEvent) => {\n const { POS } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n const mouseMoveDistance = Math.abs(clientPos - startPos.current);\n if (mouseMoveDistance > dragThreshold && containerRef.current) {\n if (mouseDownTimer.current) {\n window.clearTimeout(mouseDownTimer.current);\n mouseDownTimer.current = null;\n }\n document.removeEventListener(\n \"mousemove\",\n preDragMouseMoveHandler,\n false,\n );\n document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n enterDraggingState(evt);\n }\n },\n [containerRef, enterDraggingState, orientation],\n );\n\n const preDragMouseUpHandler = useCallback(() => {\n if (mouseDownTimer.current) {\n window.clearTimeout(mouseDownTimer.current);\n mouseDownTimer.current = null;\n }\n document.removeEventListener(\"mousemove\", preDragMouseMoveHandler, false);\n document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n }, [preDragMouseMoveHandler]);\n\n const mouseDownHandler: MouseEventHandler = useCallback(\n (evt) => {\n if (containerRef.current && !evt.defaultPrevented) {\n const { POS } = dimensions(orientation);\n const { [POS]: clientPos } = evt;\n startPos.current = clientPos;\n previousPos.current = clientPos;\n\n document.addEventListener(\"mousemove\", preDragMouseMoveHandler, false);\n document.addEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n evt.persist();\n\n mouseDownTimer.current = window.setTimeout(() => {\n document.removeEventListener(\n \"mousemove\",\n preDragMouseMoveHandler,\n false,\n );\n document.removeEventListener(\"mouseup\", preDragMouseUpHandler, false);\n\n enterDraggingState(evt.nativeEvent);\n }, 500);\n }\n },\n [\n containerRef,\n enterDraggingState,\n orientation,\n preDragMouseMoveHandler,\n preDragMouseUpHandler,\n ],\n );\n\n const draggedItemIndex = isDragging\n ? getDraggedItem(measuredDropTargets.current).dataIndex\n : -1;\n\n return {\n draggable: dragPortal,\n dropIndicator: null,\n draggedItemIndex,\n isDragging,\n onMouseDown: mouseDownHandler,\n revealOverflowedItems: showOverflow,\n };\n};\n"],"names":["useState","useRef","useDragSpacers","useCallback","dimensions","getDraggedItem","getNextDropTarget","moveDragItem","draggedItem","measureDropTargets","isDraggedElement","jsx","Draggable"],"mappings":"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"}

package/dist-cjs/tabs/drag-drop/useDragSpacers.js.map CHANGED Viewed

	@@ -1 +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 for (const spacer of spacers) {\n spacer.parentElement?.removeChild(spacer);\n }\n }, [spacers]);\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":["useRef","useMemo","createDragSpacer","useCallback"],"mappings":";;;;;AAKO,MAAM,iBAAiB,MAAM;AAClC,~~EAAM~~,~~MAAA~~,cAAA,GAAiBA,aAAO,CAAC,CAAA;AAC/B,~~EAAM~~,~~MAAA~~,aAAA,GAAgBA,aAAO,KAAK,CAAA;AAElC,EAAA,MAAM,~~OAAU~~,~~GAAAC~~,aAAA;AAAA;AAAA,IAEd,MAAM,CAACC,0BAAA,CAAiB,aAAa,CAAA,EAAGA,4BAAkB,CAAA;AAAA,IAC1D;AAAC,GACH;AAEA,~~EAAM~~,~~MAAA~~,YAAA,GAAeC,kBAAY,MAAM;AAfzC,IAAA,IAAA,EAAA;AAgBI,IAAA,KAAA,MAAW,UAAU,~~OAAS~~,~~EAAA~~;AAC5B,~~MAAO~~,CAAA,EAAA,GAAA,MAAA,~~CAAA~~,aAAA,KAAP,mBAAsB,~~WAAY~~,~~CAAA~~,MAAA,CAAA;AAAA;~~AACpC~~,~~GACF~~,EAAG,CAAC,OAAO,CAAC,CAAA;AAEZ,EAAA,MAAM,~~iBAAoB~~,~~GAAAA~~,iBAAA;AAAA,IACxB,CAAC,~~IAAiB~~,~~KAAA~~;AAChB,MAAM,~~MAAA,~~CAAC,~~OAAS~~,~~EAAA~~,OAAO,~~CAAI~~,~~GAAA~~,OAAA;AAC3B,~~MAAe~~,cAAA,~~CAAA~~,OAAA,GAAU,sBAAsB,MAAM;AACnD,QAAA,aAAA,CAAc,~~OAAU~~,~~GAAA~~,IAAA;AACxB,QAAA,OAAA,CAAQ,MAAM,~~OAAU~~,~~GAAA~~,YAAA;AACxB,~~QAAQ~~,OAAA,~~CAAA~~,KAAA,CAAM,~~OAAU~~,~~GAAA~~,CAAA,OAAA,EAAU,IAAI,CAAA,EAAA,CAAA;AACtC,QAAA,OAAA,CAAQ,CAAC,~~CAAI~~,~~GAAA~~,OAAA;AACb,QAAA,OAAA,CAAQ,CAAC,~~CAAI~~,~~GAAA~~,OAAA;AAAA,~~OACd~~,CAAA;AAAA,~~KACH~~;AAAA,IACA,CAAC,OAAO;AAAA,GACV;AAEA,~~EAAM~~,~~MAAA~~,yBAAA,GAA4BA,kBAAY,MAAM;AAClD,IAAA,IAAI,eAAe,~~OAAS~~,~~EAAA~~;AAC1B,MAAA,oBAAA,CAAqB,eAAe,OAAO,CAAA;AAC3C,MAAA,cAAA,CAAe,~~OAAU~~,~~GAAA~~,CAAA;AAAA;~~AAC3B~~,~~GACF~~,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,~~YAAe~~,~~GAAAA~~,iBAAA;AAAA,IACnB,CACE,IAAA,EACA,~~IACA~~,~~EAAA~~,aAAA,GAAgB,OAChB,~~SACG~~,~~KAAA~~;AAhDT,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAiDM,MAAA,IAAI,~~IAAM~~,~~EAAA~~;AACR,~~QAAM~~,~~MAAA~~,CAAC,~~OAAS~~,~~EAAA~~,OAAO,~~CAAI~~,~~GAAA~~,OAAA;AAC3B,~~QAA0B~~,yBAAA,~~EAAA~~;AAC1B,QAAA,IAAI,~~aAAe~~,~~EAAA~~;AACjB,UAAA,IAAI,cAAc,~~OAAS~~,~~EAAA~~;AACzB,~~YAAa~~,YAAA,~~EAAA~~;AAEb,~~YAAQ~~,OAAA,~~CAAA~~,KAAA,CAAM,~~OAAU~~,~~GAAA~~,CAAA,OAAA,EAAU,IAAI,CAAA,EAAA,CAAA;AACtC,YAAA,OAAA,CAAQ,MAAM,~~OAAU~~,~~GAAA~~,YAAA;AAExB,YAAA,MAAM,SACJ,~~SAAc~~,~~KAAA~~,KAAA,GACV,KAAK,~~OAAQ~~,~~CAAA~~,sBAAA,GACb,KAAK,~~OAAQ~~,~~CAAA~~,kBAAA;AAEnB,YAAA,CAAA,EAAA,GAAA,IAAA,CAAK,~~OAAQ~~,~~CAAA~~,aAAA,KAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA,CAAa,~~OAAS~~,~~EAAA~~,MAAA,CAAA;AAClD,YAAA,CAAA,EAAA,GAAA,IAAA,CAAK,~~OAAQ~~,~~CAAA~~,aAAA,KAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA,CAAa,SAAS,~~IAAK~~,~~CAAA~~,OAAA,CAAA;AAAA,~~WAClD~~,~~MAAA~~;AACL,YAAA,CAAA,EAAA,GAAA,IAAA,CAAK,~~OAAQ~~,~~CAAA~~,aAAA,KAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA,CAAa,SAAS,~~IAAK~~,~~CAAA~~,OAAA,CAAA;AAAA;~~AAEzD~~,UAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,~~SACjB~~,~~MAAA~~;AACL,~~UAAQ~~,OAAA,~~CAAA~~,KAAA,CAAM,~~OAAU~~,~~GAAA~~,CAAA,OAAA,EAAU,IAAI,CAAA,EAAA,CAAA;AACtC,UAAA,CAAA,EAAA,GAAA,IAAA,CAAK,~~OAAQ~~,~~CAAA~~,aAAA,KAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA,CAAa,SAAS,~~IAAK~~,~~CAAA~~,OAAA,CAAA;AAAA;~~AACzD~~;~~AACF~~,~~KACF~~;AAAA,IACA,CAAC,iBAAA,EAAmB,~~yBAA2B~~,~~EAAA~~,YAAA,EAAc,OAAO;AAAA,GACtE;AACA,EAAA,MAAM,~~gBAAmB~~,~~GAAAA~~,iBAAA;AAAA,IACvB,CAAC,IAAA,EAA0B,~~IAAc~~,~~EAAA~~,aAAA,GAAgB,KAAU~~,KAAA~~;AA/EvE,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAgFM,MAAM,~~MAAA,~~CAAC,~~OAAS~~,~~EAAA~~,OAAO,~~CAAI~~,~~GAAA~~,OAAA;AAC3B,~~MAA0B~~,yBAAA,~~EAAA~~;AAC1B,MAAA,IAAI,~~aAAe~~,~~EAAA~~;AACjB,QAAA,IAAI,cAAc,~~OAAS~~,~~EAAA~~;AACzB,~~UAAa~~,YAAA,~~EAAA~~;AAEb,~~UAAQ~~,OAAA,~~CAAA~~,KAAA,CAAM,~~OAAU~~,~~GAAA~~,CAAA,OAAA,EAAU,IAAI,CAAA,EAAA,CAAA;AACtC,UAAA,OAAA,CAAQ,MAAM,~~OAAU~~,~~GAAA~~,YAAA;AAExB,~~UAAK~~,CAAA,EAAA,GAAA,IAAA,~~CAAA~~,OAAA,CAAQ,kBAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA;AAAA,YAC1B,OAAA;AAAA,YACA,KAAK,~~OAAQ~~,~~CAAA~~;AAAA,WAAA;AAEf,~~UAAK~~,CAAA,EAAA,GAAA,IAAA,~~CAAA~~,OAAA,CAAQ,kBAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA;AAAA,YAC1B,OAAA;AAAA,YACA,KAAK,~~OAAQ~~,~~CAAA~~;AAAA,WAAA;AAAA,~~SAEV~~,~~MAAA~~;AACL,~~UAAK~~,CAAA,EAAA,GAAA,IAAA,~~CAAA~~,OAAA,CAAQ,kBAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA;AAAA,YAC1B,OAAA;AAAA,YACA,KAAK,~~OAAQ~~,~~CAAA~~;AAAA,WAAA;AAAA;~~AAGjB~~,QAAA,iBAAA,CAAkB,IAAI,CAAA;AAAA,~~OACjB~~,~~MAAA~~;AACL,~~QAAQ~~,OAAA,~~CAAA~~,KAAA,CAAM,~~OAAU~~,~~GAAA~~,CAAA,OAAA,EAAU,IAAI,CAAA,EAAA,CAAA;AACtC,~~QAAK~~,CAAA,EAAA,GAAA,IAAA,~~CAAA~~,OAAA,CAAQ,kBAAb,~~IAA4B~~,GAAA,MAAA,GAAA,EAAA,~~CAAA~~,YAAA;AAAA,UAC1B,OAAA;AAAA,UACA,KAAK,~~OAAQ~~,~~CAAA~~;AAAA,SAAA;AAAA;~~AAEjB~~,~~KACF~~;AAAA,IACA,CAAC,iBAAA,EAAmB,~~yBAA2B~~,~~EAAA~~,YAAA,EAAc,OAAO;AAAA,GACtE;AAEA,~~EAAO~~,~~OAAA~~;AAAA,IACL,YAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}
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 for (const spacer of spacers) {\n spacer.parentElement?.removeChild(spacer);\n }\n }, [spacers]);\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":["useRef","useMemo","createDragSpacer","useCallback"],"mappings":"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"}

package/dist-cjs/tabs/useActivationIndicator.js.map CHANGED Viewed

	@@ -1 +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 type orientationType,\n useResizeObserver,\n WidthOnly,\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: Record<\n orientationType,\n { pos: \"left\" \| \"top\"; size: \"width\" \| \"height\" }\n> = {\n horizontal: {\n pos: \"left\",\n size: \"width\",\n },\n vertical: {\n pos: \"top\",\n size: \"height\",\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();\n if (rootRef.current && tabRect) {\n const rootRect = rootRef.current.getBoundingClientRect();\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":["useState","useRef","useCallback","useEffect","useResizeObserver","WidthOnly"],"mappings":";;;;;;;AAqBA,MAAM,~~YAGF~~,~~GAAA~~;AAAA,EACF,~~UAAY~~,~~EAAA~~;AAAA,IACV,~~GAAK~~,~~EAAA~~,MAAA;AAAA,IACL,~~IAAM~~,~~EAAA~~;AAAA,GACR;AAAA,EACA,~~QAAU~~,~~EAAA~~;AAAA,IACR,~~GAAK~~,~~EAAA~~,KAAA;AAAA,IACL,~~IAAM~~,~~EAAA~~;AAAA;AAEV,CAAA;AAGO,SAAS,~~sBAAuB~~,~~CAAA~~;AAAA,EACrC,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,~~CAI8B~~,~~EAAA~~;AAC5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,~~cAAoC~~,~~CAAA~~;AAAA,IAC5D,~~IAAM~~,~~EAAA~~,CAAA;AAAA,IACN,~~KAAO~~,~~EAAA~~;AAAA,GACR,CAAA;AAKD,~~EAAM~~,~~MAAA~~,QAAA,GAAWC,aAAO,KAAK,CAAA;AAE7B,~~EAAM~~,~~MAAA~~,SAAA,GAAYC,kBAAY,MAAM;AAClC,IAAA,MAAM,EAAE,GAAA,EAAK,~~IAAK~~,~~EAAA~~,GAAI,aAAa,WAAW,CAAA;AAC9C,~~IAAO~~,~~OAAA~~,CAAC,KAAK,IAAI,CAAA;AAAA,~~GACnB~~,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,~~oBAAuB~~,~~GAAAA~~,iBAAA;AAAA,IAC3B,CAAC,~~UAA8D~~,~~KAAA~~;AAC7D,MAAA,IAAI,~~UAAY~~,~~EAAA~~;AACd,~~QAAM~~,~~MAAA~~,OAAA,GAAU,WAAW,~~qBAAsB~~,~~EAAA~~;AACjD,~~QAAI~~,~~IAAA~~,OAAA,CAAQ,WAAW,~~OAAS~~,~~EAAA~~;AAC9B,~~UAAM~~,~~MAAA~~,QAAA,GAAW,~~OAAQ~~,~~CAAA~~,OAAA,CAAQ,~~qBAAsB~~,~~EAAA~~;AACvD,UAAA,MAAM,CAAC,GAAA,EAAK,IAAI,CAAA,GAAI,~~SAAU~~,~~EAAA~~;AAC9B,~~UAAM~~,~~MAAA~~,EAAE,CAAC,GAAG,GAAG,WAAA,EAAa,CAAC,IAAI,GAAG,~~YAAa~~,~~EAAA~~,GAAI,~~QAAS~~,~~CAAA~~,OAAA;AAC9D,UAAA,MAAM,~~MAAS~~,~~GAAA~~,OAAA,CAAQ,GAAG,CAAA,GAAI,SAAS,GAAG,CAAA;AAC1C,~~UAAM~~,~~MAAA~~,OAAA,GAAU,QAAQ,IAAI,CAAA;AAE5B,~~UAAO~~,~~OAAA~~;AAAA,YACL,CAAC,GAAG,GAAG,MAAA;AAAA,YACP,CAAC,IAAI,GAAG,OAAA;AAAA,YACR,UAAA,EAAY,~~MAAW~~,~~KAAA~~,WAAA,IAAe,~~OAAY~~,~~KAAA~~;AAAA,WACpD;AAAA;~~AACF~~;~~AAEF~~,MAAA,OAAO,EAAC;AAAA,~~KACV~~;AAAA,IACA,CAAC,SAAS,SAAS;AAAA,GACrB;AAEA,~~EAAM~~,~~MAAA~~,QAAA,GAAWA,kBAAY,MAAM;AACjC,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,IAAI,~~KAAO~~,~~EAAA~~;AACT,~~QAAM~~,~~MAAA~~,KAAA,GAAQ,~~QAAS~~,~~CAAA~~,cAAA,CAAe,KAAK,CAAA;AAC3C,QAAA,MAAM,EAAE,~~UAAY~~,~~EAAA~~,GAAG,~~QAAS~~,~~EAAA~~,GAAI,qBAAqB,KAAK,CAAA;AAC9D,QAAA,IAAI,~~UAAY~~,~~EAAA~~;AACd,UAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;~~AACnB~~;~~AACF~~,~~KACD~~,CAAA;AAAA,~~GACA~~,~~EAAA~~,CAAC,~~oBAAsB~~,~~EAAA~~,KAAK,CAAC,CAAA;AAEhC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,~~KAAO~~,~~EAAA~~;AAIT,MAAA,UAAA,CAAW,MAAM;AACf,~~QAAM~~,~~MAAA~~,KAAA,GAAQ,~~QAAS~~,~~CAAA~~,cAAA,CAAe,KAAK,CAAA;AAC3C,QAAA,MAAM,EAAE,~~UAAY~~,~~EAAA~~,GAAG,~~QAAS~~,~~EAAA~~,GAAI,qBAAqB,KAAK,CAAA;AAC9D,QAAA,IAAI,~~UAAY~~,~~EAAA~~;AACd,UAAA,QAAA,CAAS,~~OAAU~~,~~GAAA~~,QAAA;AACnB,UAAA,QAAA,CAAS,QAAQ,CAAA;AAAA;~~AACnB~~,~~SACC~~,EAAE,CAAA;AAAA;~~AACP~~,~~GACC~~,~~EAAA~~,CAAC,~~oBAAsB~~,~~EAAA~~,KAAK,CAAC,CAAA;AAEhC,~~EAAkBC~~,mCAAA,~~CAAA~~,OAAA,EAASC,6BAAW,QAAQ,CAAA;AAE9C,~~EAAO~~,~~OAAA~~,KAAA;AACT;;;;"}
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 type orientationType,\n useResizeObserver,\n WidthOnly,\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: Record<\n orientationType,\n { pos: \"left\" \| \"top\"; size: \"width\" \| \"height\" }\n> = {\n horizontal: {\n pos: \"left\",\n size: \"width\",\n },\n vertical: {\n pos: \"top\",\n size: \"height\",\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();\n if (rootRef.current && tabRect) {\n const rootRect = rootRef.current.getBoundingClientRect();\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":["useState","useRef","useCallback","useEffect","useResizeObserver","WidthOnly"],"mappings":";;;;;;;AAqBA,MAAM,YAAA,GAGF;AAAA,EACF,UAAA,EAAY;AAAA,IACV,GAAA,EAAK,MAAA;AAAA,IACL,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,GAAA,EAAK,KAAA;AAAA,IACL,IAAA,EAAM;AAAA;AAEV,CAAA;AAGO,SAAS,sBAAA,CAAuB;AAAA,EACrC,OAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAI8B;AAC5B,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,cAAA,CAAoC;AAAA,IAC5D,IAAA,EAAM,CAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAKD,EAAA,MAAM,QAAA,GAAWC,aAAO,KAAK,CAAA;AAE7B,EAAA,MAAM,SAAA,GAAYC,kBAAY,MAAM;AAClC,IAAA,MAAM,EAAE,GAAA,EAAK,IAAA,EAAK,GAAI,aAAa,WAAW,CAAA;AAC9C,IAAA,OAAO,CAAC,KAAK,IAAI,CAAA;AAAA,EACnB,CAAA,EAAG,CAAC,WAAW,CAAC,CAAA;AAEhB,EAAA,MAAM,oBAAA,GAAuBA,iBAAA;AAAA,IAC3B,CAAC,UAAA,KAA8D;AAC7D,MAAA,IAAI,UAAA,EAAY;AACd,QAAA,MAAM,OAAA,GAAU,WAAW,qBAAA,EAAsB;AACjD,QAAA,IAAI,OAAA,CAAQ,WAAW,OAAA,EAAS;AAC9B,UAAA,MAAM,QAAA,GAAW,OAAA,CAAQ,OAAA,CAAQ,qBAAA,EAAsB;AACvD,UAAA,MAAM,CAAC,GAAA,EAAK,IAAI,CAAA,GAAI,SAAA,EAAU;AAC9B,UAAA,MAAM,EAAE,CAAC,GAAG,GAAG,WAAA,EAAa,CAAC,IAAI,GAAG,YAAA,EAAa,GAAI,QAAA,CAAS,OAAA;AAC9D,UAAA,MAAM,MAAA,GAAS,OAAA,CAAQ,GAAG,CAAA,GAAI,SAAS,GAAG,CAAA;AAC1C,UAAA,MAAM,OAAA,GAAU,QAAQ,IAAI,CAAA;AAE5B,UAAA,OAAO;AAAA,YACL,CAAC,GAAG,GAAG,MAAA;AAAA,YACP,CAAC,IAAI,GAAG,OAAA;AAAA,YACR,UAAA,EAAY,MAAA,KAAW,WAAA,IAAe,OAAA,KAAY;AAAA,WACpD;AAAA,QACF;AAAA,MACF;AACA,MAAA,OAAO,EAAC;AAAA,IACV,CAAA;AAAA,IACA,CAAC,SAAS,SAAS;AAAA,GACrB;AAEA,EAAA,MAAM,QAAA,GAAWA,kBAAY,MAAM;AACjC,IAAA,qBAAA,CAAsB,MAAM;AAC1B,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,cAAA,CAAe,KAAK,CAAA;AAC3C,QAAA,MAAM,EAAE,UAAA,EAAY,GAAG,QAAA,EAAS,GAAI,qBAAqB,KAAK,CAAA;AAC9D,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,QACnB;AAAA,MACF;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA,EAAG,CAAC,oBAAA,EAAsB,KAAK,CAAC,CAAA;AAEhC,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAA,EAAO;AAIT,MAAA,UAAA,CAAW,MAAM;AACf,QAAA,MAAM,KAAA,GAAQ,QAAA,CAAS,cAAA,CAAe,KAAK,CAAA;AAC3C,QAAA,MAAM,EAAE,UAAA,EAAY,GAAG,QAAA,EAAS,GAAI,qBAAqB,KAAK,CAAA;AAC9D,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,QAAA,CAAS,OAAA,GAAU,QAAA;AACnB,UAAA,QAAA,CAAS,QAAQ,CAAA;AAAA,QACnB;AAAA,MACF,GAAG,EAAE,CAAA;AAAA,IACP;AAAA,EACF,CAAA,EAAG,CAAC,oBAAA,EAAsB,KAAK,CAAC,CAAA;AAEhC,EAAAC,mCAAA,CAAkB,OAAA,EAASC,6BAAW,QAAQ,CAAA;AAE9C,EAAA,OAAO,KAAA;AACT;;;;"}

package/dist-cjs/tabs/useEditableItem.js.map CHANGED Viewed

	@@ -1 +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":["useControlled","useCallback"],"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,GAAIA,~~kBAAc~~,~~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,GAAkBC,kBAAY,MAAM;AACxC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,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,MAAA,GAAA,kBAAA;AAAA,MACE,aAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA,KAAA;AAAA,~~GAEJ~~;AAEA,EAAA,MAAM,~~SAAY~~,~~GAAAA~~,iBAAA;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,MAAA,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;;;;"}
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":["useControlled","useCallback"],"mappings":";;;;;AAIA,MAAM,2BAAW,IAAI,GAAA,CAAI,CAAC,OAAA,EAAS,GAAG,CAAC,CAAA;AACvC,MAAM,SAAA,GAAY,CAAC,GAAA,KAAgB,QAAA,CAAS,IAAI,GAAG,CAAA;AAwB5C,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAA,EAAS,WAAA;AAAA,EACT,cAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAA,EAAiB,mBAAA;AAAA,EACjB,cAAA,EAAgB;AAClB,CAAA,KAAqD;AACnD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,kBAAA,CAAc;AAAA,IAC1C,UAAA,EAAY,WAAA;AAAA,IACZ,OAAA,EAAS,KAAA;AAAA,IACT,IAAA,EAAM,iBAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,eAAA,GAAkBC,kBAAY,MAAM;AACxC,IAAA,UAAA,CAAW,IAAI,CAAA;AACf,IAAA,mBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,mBAAA,EAAA;AAAA,EACF,CAAA,EAAG,CAAC,mBAAmB,CAAC,CAAA;AAExB,EAAA,MAAM,cAAA,GAAiB,CACrB,aAAA,EACA,WAAA,EACA,mBACA,QAAA,KACG;AACH,IAAA,UAAA,CAAW,KAAK,CAAA;AAChB,IAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA;AAC5B,IAAA,kBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,kBAAA;AAAA,MACE,aAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA;AAAA,KAAA;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,SAAA,GAAYA,iBAAA;AAAA,IAChB,CAAC,GAAA,KAAuB;AAjE5B,MAAA,IAAA,EAAA,EAAA,EAAA;AAkEM,MAAA,OAAA,CAAQ,GAAA,CAAI,CAAA,0BAAA,EAA6B,cAAc,CAAA,CAAA,EAAI;AAAA,QACzD,QAAA,EAAA,CAAU,EAAA,GAAA,cAAA,CAAe,cAAc,CAAA,KAA7B,IAAA,GAAA,MAAA,GAAA,EAAA,CAAgC;AAAA,OAC3C,CAAA;AACD,MAAA,IAAI,SAAA,CAAU,IAAI,GAAG,CAAA,KAAA,CAAK,oBAAe,cAAc,CAAA,KAA7B,mBAAgC,QAAA,CAAA,EAAU;AAClE,QAAA,eAAA,EAAgB;AAAA,MAClB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,eAAA,EAAiB,cAAA,EAAgB,cAAc;AAAA,GAClD;AAEA,EAAA,OAAO;AAAA,IACL,OAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/dist-cjs/tabs/useItemsWithIds.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useItemsWithIds.js","sources":["../src/tabs/useItemsWithIds.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n type ReactElement,\n type ReactNode,\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":["useCallback","sourceMap","Children","isValidElement","TabPanel","cloneElement","createElement","useMemo","id"],"mappings":";;;;;AAcO,MAAM,~~eAAkB~~,~~GAAA~~,CAC7B,~~QACA~~,~~EAAA~~,EAAA,GAAK,~~MACgD~~,~~KAAA~~;AACrD,EAAA,MAAM,~~cAAiB~~,~~GAAAA~~,iBAAA;AAAA,IACrB,CAAC,KAAgD~~,KAAA~~;AAC/C,MAAA,MAAMC,aAAoB,EAAC;AAC3B,MAAM,~~MAAA,~~cAAA,GAAkCC,~~cAAS~~,~~CAAA~~,OAAA,CAAQ,KAAK,CAAA,CAC3D,~~MAAO~~,~~CAAAC~~,oBAAc,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~~,~~KAAAC~~,iBAAA,GACbC,mBAAa,~~KAAO~~,~~EAAA~~,KAAK,~~CAEzB~~,~~mBAAAC~~,mBAAA,CAACF,qBAAU,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,QAAAH,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,GAAIM,cAAQ,MAAM;AAC/C,IAAA,OAAO,eAAe,QAAQ,CAAA;AAAA,~~GAC7B~~,~~EAAA~~,CAAC,~~cAAgB~~,~~EAAA~~,QAAQ,CAAC,CAAA;AAE7B,~~EAAM~~,~~MAAA~~,QAAA,GAAWP,kBAAY,CAACQ,GAAAA,KAAe,UAAUA,GAAE,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEvE,~~EAAO~~,~~OAAA~~,CAAC,eAAe,QAAQ,CAAA;AACjC;;;;"}
1	+ {"version":3,"file":"useItemsWithIds.js","sources":["../src/tabs/useItemsWithIds.tsx"],"sourcesContent":["import {\n Children,\n cloneElement,\n isValidElement,\n type ReactElement,\n type ReactNode,\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":["useCallback","sourceMap","Children","isValidElement","TabPanel","cloneElement","createElement","useMemo","id"],"mappings":";;;;;AAcO,MAAM,eAAA,GAAkB,CAC7B,QAAA,EACA,EAAA,GAAK,MAAA,KACgD;AACrD,EAAA,MAAM,cAAA,GAAiBA,iBAAA;AAAA,IACrB,CAAC,KAAA,KAAgD;AAC/C,MAAA,MAAMC,aAAoB,EAAC;AAC3B,MAAA,MAAM,cAAA,GAAkCC,cAAA,CAAS,OAAA,CAAQ,KAAK,CAAA,CAC3D,MAAA,CAAOC,oBAAc,CAAA,CACrB,GAAA,CAAI,CAAC,KAAA,EAAqB,KAAA,KAAkB;AAC3C,QAAA,MAAM;AAAA,UACJ,YAAA,EAAc,SAAA,GAAY,CAAA,IAAA,EAAO,KAAA,GAAQ,CAAC,CAAA,CAAA;AAAA,UAC1C,WAAA,EAAa,SAAA;AAAA,UACb,KAAA,GAAQ;AAAA,YACN,KAAA,CAAM,KAAA;AACV,QAAA,MAAM,KAAA,GAAQ,CAAA,EAAG,EAAE,CAAA,CAAA,EAAI,KAAK,CAAA,CAAA;AAC5B,QAAA,MAAM,UAAA,GAAa,GAAG,KAAK,CAAA,MAAA,CAAA;AAC3B,QAAA,MAAM,KAAA,GAAQ;AAAA,UACZ,iBAAA,EAAmB,KAAA;AAAA,UACnB,EAAA,EAAI,UAAA;AAAA,UACJ,GAAA,EAAK;AAAA,SACP;AACA,QAAA,MAAM,OAAA,GACJ,KAAA,CAAM,IAAA,KAASC,iBAAA,GACbC,mBAAa,KAAA,EAAO,KAAK,CAAA,mBAEzBC,mBAAA,CAACF,qBAAU,GAAG,KAAA,EAAO,KAAA,EAAc,GAAA,EAAK,SACrC,KACH,CAAA;AAEJ,QAAA,MAAM,GAAA,GAAqB;AAAA,UACzB,SAAA;AAAA,UACA,OAAA;AAAA,UACA,EAAA,EAAI,KAAA;AAAA,UACJ;AAAA,SACF;AACA,QAAAH,UAAAA,CAAU,KAAK,CAAA,GAAI,GAAA;AACnB,QAAA,OAAO,GAAA;AAAA,MACT,CAAC,CAAA;AACH,MAAA,OAAO,CAAC,gBAAgBA,UAAS,CAAA;AAAA,IACnC,CAAA;AAAA,IACA,CAAC,EAAE;AAAA,GACL;AAEA,EAAA,MAAM,CAAC,aAAA,EAAe,SAAS,CAAA,GAAIM,cAAQ,MAAM;AAC/C,IAAA,OAAO,eAAe,QAAQ,CAAA;AAAA,EAChC,CAAA,EAAG,CAAC,cAAA,EAAgB,QAAQ,CAAC,CAAA;AAE7B,EAAA,MAAM,QAAA,GAAWP,kBAAY,CAACQ,GAAAA,KAAe,UAAUA,GAAE,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEvE,EAAA,OAAO,CAAC,eAAe,QAAQ,CAAA;AACjC;;;;"}

package/dist-cjs/tabs/useKeyboardNavigation.js.map CHANGED Viewed

	@@ -1 +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":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","useIsomorphicLayoutEffect"],"mappings":"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"}
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":["Home","End","ArrowLeft","ArrowRight","ArrowUp","ArrowDown","useRef","useState","useControlled","useCallback","useIsomorphicLayoutEffect"],"mappings":"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"}

package/dist-cjs/tabs/useSelection.js.map CHANGED Viewed

	@@ -1 +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":["useControlled","useCallback"],"mappings":";;;;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAEnC,MAAM,~~YAAe~~,~~GAAA~~,CAAC,~~EAC3B~~,~~KAAA~~,EAAA,IAAA,IAAA,GAAA,MAAA,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,IAAIA,~~kBAAc~~,~~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~~,~~GAAAC~~,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,~~oBAAqB~~,~~CAAA~~,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D;AAAC,GACH;AAEA,EAAA,MAAM,~~UAAa~~,~~GAAAA~~,iBAAA;AAAA,IACjB,CAAC,~~QAAqB~~,~~KAAA~~;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,~~MAAoB~~,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,~~CAAA~~,QAAA,CAAA;AAAA,~~KACtB~~;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,MAAM,~~aAAgB~~,~~GAAAA~~,iBAAA;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~~,~~GAAAA~~,iBAAA;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;;;;;"}
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":["useControlled","useCallback"],"mappings":";;;;;AAGA,MAAM,oBAAA,GAAuB,CAAC,OAAA,EAAS,GAAG,CAAA;AAEnC,MAAM,YAAA,GAAe,CAAC,EAAA,KAC3B,EAAA,IAAA,IAAA,GAAA,MAAA,GAAA,EAAA,CAAI,OAAA,CAAQ,qBAAA;AAGP,MAAM,eAAe,CAAC;AAAA,EAC3B,eAAA;AAAA,EACA,cAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA,EAAU;AACZ,CAAA,KAWK;AACH,EAAA,MAAM,CAAC,QAAA,EAAU,WAAA,EAAa,YAAY,IAAIA,kBAAA,CAAc;AAAA,IAC1D,UAAA,EAAY,YAAA;AAAA,IACZ,SAAS,eAAA,IAAmB,CAAA;AAAA,IAC5B,IAAA,EAAM,UAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,gBAAA,GAAmBC,iBAAA;AAAA,IACvB,CAAC,GAAA,KAAuB,oBAAA,CAAqB,QAAA,CAAS,IAAI,GAAG,CAAA;AAAA,IAC7D;AAAC,GACH;AAEA,EAAA,MAAM,UAAA,GAAaA,iBAAA;AAAA,IACjB,CAAC,QAAA,KAAqB;AACpB,MAAA,WAAA,CAAY,QAAQ,CAAA;AACpB,MAAA,iBAAA,IAAA,IAAA,GAAA,MAAA,GAAA,iBAAA,CAAoB,QAAA,CAAA;AAAA,IACtB,CAAA;AAAA,IACA,CAAC,iBAAiB;AAAA,GACpB;AAEA,EAAA,MAAM,aAAA,GAAgBA,iBAAA;AAAA,IACpB,CAAC,CAAA,KAAqB;AACpB,MAAA,MAAM,gBAAgB,CAAA,CAAE,MAAA;AACxB,MAAA,IACE,iBAAiB,CAAC,CAAA,IAClB,mBAAmB,QAAA,IACnB,YAAA,CAAa,aAAa,CAAA,EAC1B;AACA,QAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,UAAA,CAAW,cAAc,CAAA;AAAA,MAC3B;AAAA,IACF,CAAA;AAAA,IACA,CAAC,gBAAA,EAAkB,cAAA,EAAgB,QAAA,EAAU,UAAU;AAAA,GACzD;AAEA,EAAA,MAAM,OAAA,GAAUA,iBAAA;AAAA,IACd,CAAC,GAAe,QAAA,KAAqB;AACnC,MAAA,IAAI,aAAa,QAAA,EAAU;AACzB,QAAA,UAAA,CAAW,QAAQ,CAAA;AAAA,MACrB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,YAAY,QAAQ;AAAA,GACvB;AAEA,EAAA,OAAO;AAAA,IACL,WAAA,EAAa,UAAA;AAAA,IACb,YAAA;AAAA,IACA,OAAA;AAAA,IACA,SAAA,EAAW,aAAA;AAAA,IACX;AAAA,GACF;AACF;;;;;"}

package/dist-cjs/tabs/useTabs.js.map CHANGED Viewed

	@@ -1 +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":["useIdMemo","useItemsWithIds","useControlled","useCallback"],"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,GAAKA,eAAU,MAAM,CAAA;AAC3B,EAAA,MAAM,CAAC,YAAY,~~CAAI~~,~~GAAAC~~,+BAAA,CAAgB,UAAU,EAAE,CAAA;AAEnD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIC,~~kBAAc~~,~~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~~,~~GAAAC~~,iBAAA;AAAA,IACzB,CAAC,~~QAAqB~~,~~KAAA~~;AACpB,MAAA,iBAAA,CAAkB,QAAQ,CAAA;AAC1B,~~MAAiB~~,cAAA,IAAA,IAAA,GAAA,MAAA,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;;;;"}
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":["useIdMemo","useItemsWithIds","useControlled","useCallback"],"mappings":";;;;;;AAqBO,MAAM,UAAU,CAAC;AAAA,EACtB,cAAA,EAAgB,kBAAA;AAAA,EAChB,QAAA;AAAA,EACA,qBAAA;AAAA,EACA,EAAA,EAAI,MAAA;AAAA,EACJ;AACF,CAAA,KAAqC;AA3BrC,EAAA,IAAA,EAAA;AA4BE,EAAA,MAAM,EAAA,GAAKA,eAAU,MAAM,CAAA;AAC3B,EAAA,MAAM,CAAC,YAAY,CAAA,GAAIC,+BAAA,CAAgB,UAAU,EAAE,CAAA;AAEnD,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAIC,kBAAA,CAAc;AAAA,IACxD,UAAA,EAAY,kBAAA;AAAA,IACZ,SAAS,qBAAA,IAAyB,CAAA;AAAA,IAClC,IAAA,EAAM,SAAA;AAAA,IACN,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAA,MAAM,kBAAA,GAAqBC,iBAAA;AAAA,IACzB,CAAC,QAAA,KAAqB;AACpB,MAAA,iBAAA,CAAkB,QAAQ,CAAA;AAC1B,MAAA,cAAA,IAAA,IAAA,GAAA,MAAA,GAAA,cAAA,CAAiB,QAAA,CAAA;AAAA,IACnB,CAAA;AAAA,IACA,CAAC,cAAc;AAAA,GACjB;AAEA,EAAA,OAAO;AAAA,IACL,EAAA;AAAA,IACA,cAAA,EAAgB,kBAAA;AAAA,IAChB,cAAA;AAAA,IACA,IAAA,EAAM,YAAA;AAAA,IACN,QAAA,EACE,mBAAmB,IAAA,GACf,IAAA,GAAA,CAAA,CACC,kBAAa,cAAc,CAAA,KAA3B,mBAA8B,OAAA,KAAW;AAAA,GAClD;AACF;;;;"}

package/dist-cjs/tabs/useTabstrip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n createElement,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { OverflowCollectionHookResult } from \"../responsive\";\nimport {\n type DragHookResult,\n type dragStrategy,\n useDragDrop,\n} from \"./drag-drop\";\nimport { Tab } from \"./Tab\";\nimport type {\n composableTabProps,\n exitEditHandler,\n navigationProps,\n TabDescriptor,\n TabElement,\n} from \"./TabsTypes\";\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\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":["useRef","useKeyboardNavigation","useSelection","useCallback","useDragDrop","useEditableItem","createElement","Tab","useEffect"],"mappings":"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"}
1	+ {"version":3,"file":"useTabstrip.js","sources":["../src/tabs/useTabstrip.ts"],"sourcesContent":["import {\n createElement,\n type KeyboardEvent,\n type MouseEvent,\n type RefObject,\n useCallback,\n useEffect,\n useRef,\n} from \"react\";\nimport type { OverflowCollectionHookResult } from \"../responsive\";\nimport {\n type DragHookResult,\n type dragStrategy,\n useDragDrop,\n} from \"./drag-drop\";\nimport { Tab } from \"./Tab\";\nimport type {\n composableTabProps,\n exitEditHandler,\n navigationProps,\n TabDescriptor,\n TabElement,\n} from \"./TabsTypes\";\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\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":["useRef","useKeyboardNavigation","useSelection","useCallback","useDragDrop","useEditableItem","createElement","Tab","useEffect"],"mappings":"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"}

package/dist-cjs/tabs-next/TabBar.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\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":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,~~MAAS~~,~~GAAAC~~,gBAAA;AAAA,EACpB,SAASC,~~OAAO~~,~~CAAA~~,KAAA,EAAO,~~GAAK~~,~~EAAA~~;AAC1B,IAAA,MAAM,EAAE,~~SAAW~~,~~EAAA~~,QAAA,EAAU,SAAS,~~KAAO~~,~~EAAA~~,GAAG,~~MAAS~~,~~GAAA~~,KAAA;AAEzD,IAAA,MAAM,eAAeC,~~gBAAU~~,~~EAAA~~;AAC/B,~~IAAyBC~~,+BAAA,~~CAAA~~;AAAA,MACvB,~~MAAQ~~,~~EAAA~~,cAAA;AAAA,MACR,~~GAAK~~,~~EAAAC~~,QAAA;AAAA,MACL,~~MAAQ~~,~~EAAA~~;AAAA,KACT,CAAA;AAED,~~IACE~~,~~uBAAAC~~,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,~~SAAW~~,~~EAAAC~~,SAAA;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~~;;;;"}
1	+ {"version":3,"file":"TabBar.js","sources":["../src/tabs-next/TabBar.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\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":["makePrefixer","forwardRef","TabBar","useWindow","useComponentCssInjection","tabBarCss","jsx","clsx"],"mappings":";;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA;AAEvC,MAAM,MAAA,GAASC,gBAAA;AAAA,EACpB,SAASC,OAAAA,CAAO,KAAA,EAAO,GAAA,EAAK;AAC1B,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,SAAS,KAAA,EAAO,GAAG,MAAK,GAAI,KAAA;AAEzD,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAKC,QAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA;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,EAEJ;AACF;;;;"}

package/dist-cjs/tabs-next/TabListNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import { capitalize, makePrefixer, useForkRef, useId } 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 forwardRef,\n type KeyboardEvent,\n useRef,\n} from \"react\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useRestoreActiveTab } from \"./hooks/useRestoreActiveTab\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\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 removedActiveTabRef,\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, realSelectedIndexRef] = useOverflow({\n container: tabstripRef,\n tabs: items,\n children,\n selected,\n overflowButton: overflowButtonRef,\n });\n\n useRestoreActiveTab({\n container: tabstripRef,\n tabs: items,\n realSelectedIndex: realSelectedIndexRef,\n removedActiveTabRef,\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?.parentElement?.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\n });\n nextItem.element?.focus({ preventScroll: true });\n }\n }\n };\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 {!isMeasuring && 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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useRestoreActiveTab","useId","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":";;;;;;;;;;;;;;AAgBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAc5C,MAAM,~~WAAc~~,~~GAAAC~~,gBAAA;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,eAAeC,~~gBAAU~~,~~EAAA~~;AAC/B,~~IAAyBC~~,+BAAA,~~CAAA~~;AAAA,MACvB,~~MAAQ~~,~~EAAA~~,mBAAA;AAAA,MACR,~~GAAK~~,~~EAAAC~~,aAAA;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,QACEC,~~2BAAY~~,~~EAAA~~;AAEhB,~~IAAM~~,~~MAAA~~,WAAA,GAAcC,aAAuB,IAAI,CAAA;AAC/C,~~IAAM~~,~~MAAA~~,SAAA,GAAYC,~~eAAW~~,~~CAAA~~,WAAA,EAAa,GAAG,CAAA;AAC7C,~~IAAM~~,~~MAAA~~,iBAAA,GAAoBD,aAA0B,IAAI,CAAA;AAExD,IAAA,MAAM,CAAC,~~OAAS~~,~~EAAA~~,MAAA,EAAQ,~~WAAa~~,~~EAAA~~,oBAAoB,IAAIE,~~uBAAY~~,~~CAAA~~;AAAA,MACvE,~~SAAW~~,~~EAAA~~,WAAA;AAAA,MACX,~~IAAM~~,~~EAAA~~,KAAA;AAAA,MACN,QAAA;AAAA,MACA,QAAA;AAAA,MACA,~~cAAgB~~,~~EAAA~~;AAAA,KACjB,CAAA;AAED,~~IAAoBC~~,uCAAA,~~CAAA~~;AAAA,MAClB,~~SAAW~~,~~EAAA~~,WAAA;AAAA,MACX,~~IAAM~~,~~EAAA~~,KAAA;AAAA,MACN,~~iBAAmB~~,~~EAAA~~,oBAAA;AAAA,MACnB;AAAA,KACD,CAAA;AAED,~~IAAM~~,~~MAAA~~,aAAA,GAAgB,CAAC,KAAyC~~,KAAA~~;AAhFpE,MAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AAiFM,~~MAAY~~,SAAA,IAAA,IAAA,GAAA,MAAA,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~~,MAAA;AAAA,QAClC,SAAA,EAAW,WAAW,~~OAAU~~,~~GAAA~~;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,MAAA,GAAA,EAAA,~~CAAA~~,EAAA;AACvC,QAAA,IAAI,CAAC,~~WAAa~~,~~EAAA~~;AAClB,~~QAAM~~,~~MAAA~~,QAAA,GAAW,OAAO,WAAW,CAAA;AACnC,QAAA,IAAI,~~QAAU~~,~~EAAA~~;AACZ,UAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,QAAA,CAAS,~~OAAT~~,~~KAAA~~,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,~~aAAlB~~,~~KAAA~~,IAAA,GAAA,MAAA,GAAA,EAAA,CAAiC,~~cAAe~~,~~CAAA~~;AAAA,YAC9C,~~KAAO~~,~~EAAA~~,SAAA;AAAA,YACP,~~MAAQ~~,~~EAAA~~;AAAA,WACV,CAAA;AACA,UAAA,CAAA,EAAA,GAAA,QAAA,CAAS,~~OAAT~~,~~KAAA~~,IAAA,GAAA,MAAA,GAAA,EAAA,CAAkB,~~KAAM~~,~~CAAA~~,EAAE,eAAe,~~IAAK~~,~~EAAA~~,CAAA;AAAA;~~AAChD~~;~~AACF~~,~~KACF~~;AAEA,IAAA,MAAM,YAAYC,~~UAAM~~,~~EAAA~~;AAExB,~~IACE~~,~~uBAAAC~~,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,~~IAAK~~,~~EAAA~~,SAAA;AAAA,QACL,~~SAAW~~,~~EAAAC~~,SAAA;AAAA,UACT,~~YAAa~~,~~EAAA~~;AAAA,UACb,aAAa,UAAU,CAAA;AAAA,UACvB,aAAa,YAAY,CAAA;AAAA,UACzB,~~YAAa~~,~~CAAA~~,CAAA,WAAA,EAAcC,~~eAAW~~,~~CAAA~~,WAAW,CAAC,CAAE,CAAA~~,CAAA~~;AAAA,UACpD;AAAA,SACF;AAAA,QACA,kBAAA,EAAkB,cAAc,~~IAAO~~,~~GAAA~~,MAAA;AAAA,QACvC,~~GAAK~~,~~EAAA~~,SAAA;AAAA,QACL,~~SAAW~~,~~EAAA~~,aAAA;AAAA,QACX,kBAAA,EAAkBD,~~SAAK~~,~~CAAA~~,eAAA,EAAiB,SAAS,CAAA;AAAA,QAChD,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,CAAC,~~WAAe~~,~~IAAA~~,MAAA,CAAO,~~MAAS~~,~~GAAA~~,CAAA,~~oBAC9BE~~,cAAA,~~CAAA~~,MAAA,EAAA,EAAK,EAAI,~~EAAA,~~SAAA,EAAW,~~SAAW~~,~~EAAA~~,YAAA,CAAa,iBAAiB,CAAA,EAAG,~~QAGjE~~,EAAA,yGAAA,~~EAAA~~,CAAA;AAAA,UAED,OAAA;AAAA,0BACDA,cAAA;AAAA,YAACC,+BAAA;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~~;;;;"}
1	+ {"version":3,"file":"TabListNext.js","sources":["../src/tabs-next/TabListNext.tsx"],"sourcesContent":["import { capitalize, makePrefixer, useForkRef, useId } 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 forwardRef,\n type KeyboardEvent,\n useRef,\n} from \"react\";\nimport { useOverflow } from \"./hooks/useOverflow\";\nimport { useRestoreActiveTab } from \"./hooks/useRestoreActiveTab\";\nimport tablistNextCss from \"./TabListNext.css\";\nimport { TabOverflowList } from \"./TabOverflowList\";\nimport { useTabsNext } from \"./TabsNextContext\";\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 removedActiveTabRef,\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, realSelectedIndexRef] = useOverflow({\n container: tabstripRef,\n tabs: items,\n children,\n selected,\n overflowButton: overflowButtonRef,\n });\n\n useRestoreActiveTab({\n container: tabstripRef,\n tabs: items,\n realSelectedIndex: realSelectedIndexRef,\n removedActiveTabRef,\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?.parentElement?.scrollIntoView({\n block: \"nearest\",\n inline: \"nearest\",\n });\n nextItem.element?.focus({ preventScroll: true });\n }\n }\n };\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 {!isMeasuring && 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":["makePrefixer","forwardRef","useWindow","useComponentCssInjection","tablistNextCss","useTabsNext","useRef","useForkRef","useOverflow","useRestoreActiveTab","useId","jsxs","clsx","capitalize","jsx","TabOverflowList"],"mappings":"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"}