@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.100

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragDropNaturalMovement.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDragDropNaturalMovement.js","sources":["../src/tabs/drag-drop/useDragDropNaturalMovement.tsx"],"sourcesContent":["import { MouseEventHandler, useCallback, useRef, useState } from \"react\";\n\nimport { DragDropHook, Direction } from \"./dragDropTypes\";\nimport { useDragSpacers } from \"./useDragSpacers\";\n\nimport {\n  dimensions,\n  isDraggedElement,\n  MeasuredDropTarget,\n  measureDropTargets,\n  moveDragItem,\n  getDraggedItem,\n  getNextDropTarget,\n} from \"./drag-utils\";\n\nimport { Draggable } from \"./Draggable\";\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              setShowOverflow((overflowMenuShowingRef.current = 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              setShowOverflow((overflowMenuShowingRef.current = 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      setIsDragging,\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":";;;;;;;;;;AAiBA,MAAM,aAAgB,GAAA,CAAA,CAAA;AAEf,MAAM,6BAA2C,CAAC;AAAA,EACvD,MAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACd,YAAA;AAAA,EACA,SAAY,GAAA,GAAA;AACd,CAAM,KAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AACtD,EAAM,MAAA,sBAAA,GAAyBC,aAAO,KAAK,CAAA,CAAA;AAC3C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAID,eAAS,KAAK,CAAA,CAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAA6B,IAAI,CAAA,CAAA;AACrE,EAAM,MAAA,YAAA,GAAeC,aAAuB,IAAI,CAAA,CAAA;AAChD,EAAM,MAAA,QAAA,GAAWA,aAAO,CAAC,CAAA,CAAA;AACzB,EAAM,MAAA,WAAA,GAAcA,aAAO,CAAC,CAAA,CAAA;AAC5B,EAAM,MAAA,WAAA,GAAcA,aAAO,CAAC,CAAA,CAAA;AAC5B,EAAM,MAAA,cAAA,GAAiBA,aAAsB,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,aAAaA,YAAO,CAAA,EAAE,OAAO,CAAG,EAAA,GAAA,EAAK,GAAG,CAAA,CAAA;AAC9C,EAAA,MAAM,gBAAgBA,YAA8B,EAAA,CAAA;AACpD,EAAM,MAAA,UAAA,GAAaA,aAAkC,IAAI,CAAA,CAAA;AACzD,EAAM,MAAA,mBAAA,GAAsBA,YAA6B,CAAA,EAAE,CAAA,CAAA;AAC3D,EAAA,MAAM,EAAE,YAAA,EAAc,YAAc,EAAA,gBAAA,KAAqBC,6BAAe,EAAA,CAAA;AAExE,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,GAAoB,KAAA;AACnB,MAAA,MAAM,EAAE,GAAA,EAAQ,GAAAC,oBAAA,CAAW,WAAW,CAAA,CAAA;AACtC,MAAM,MAAA,EAAA,CAAG,GAAM,GAAA,SAAA,EAAc,GAAA,GAAA,CAAA;AAC7B,MAAM,MAAA,EAAE,OAAS,EAAA,aAAA,EAAkB,GAAA,WAAA,CAAA;AACnC,MAAM,MAAA,EAAE,OAAS,EAAA,iBAAA,EAAsB,GAAA,UAAA,CAAA;AACvC,MAAM,MAAA,EAAE,OAAS,EAAA,WAAA,EAAgB,GAAA,mBAAA,CAAA;AACjC,MAAM,MAAA,WAAA,GAAcC,yBAAe,WAAW,CAAA,CAAA;AAE9C,MAAA,IAAI,IAAK,CAAA,GAAA,CAAI,aAAgB,GAAA,SAAS,IAAI,CAAG,EAAA;AAC3C,QAAA,WAAA,CAAY,OAAU,GAAA,SAAA,CAAA;AAEtB,QAAM,MAAA,YAAA,GAAe,YAAY,QAAS,CAAA,OAAA,CAAA;AAE1C,QAAA,MAAM,GAAM,GAAA,QAAA,CAAS,OAAU,GAAA,WAAA,CAAY,OAAU,GAAA,YAAA,CAAA;AACrD,QAAA,MAAM,YAAY,IAAK,CAAA,GAAA;AAAA,UACrB,WAAW,OAAQ,CAAA,KAAA;AAAA,UACnB,IAAK,CAAA,GAAA,CAAI,UAAW,CAAA,OAAA,CAAQ,KAAK,GAAG,CAAA;AAAA,SACtC,CAAA;AAEA,QAAI,IAAA,YAAA,CAAa,OAAW,IAAA,YAAA,CAAa,OAAS,EAAA;AAEhD,UAAM,MAAA,KAAA,GAAQ,WAAgB,KAAA,YAAA,GAAe,MAAS,GAAA,KAAA,CAAA;AACtD,UAAa,YAAA,CAAA,OAAA,CAAQ,KAAM,CAAA,KAAA,CAAA,GAAS,CAAG,EAAA,SAAA,CAAA,EAAA,CAAA,CAAA;AAEvC,UAAM,MAAA,SAAA,GAAY,aAAgB,GAAA,SAAA,GAAY,KAAQ,GAAA,KAAA,CAAA;AACtD,UAAM,MAAA,SAAA,GAAY,YAAY,WAAY,CAAA,OAAA,CAAA;AAC1C,UAAA,MAAM,WACJ,GAAA,SAAA,KAAc,KAAQ,GAAA,SAAA,GAAY,YAAY,IAAO,GAAA,SAAA,CAAA;AAEvD,UAAA,MAAM,cAAiB,GAAAC,2BAAA;AAAA,YACrB,mBAAoB,CAAA,OAAA;AAAA,YACpB,WAAA;AAAA,YACA,SAAA;AAAA,WACF,CAAA;AAEA,UAAA,IACE,mBACC,cAAe,CAAA,KAAA,MAAU,uDAAmB,KAC3C,CAAA,IAAA,SAAA,KAAc,cAAc,OAC9B,CAAA,EAAA;AACA,YAAA,IAAI,eAAe,mBAAqB,EAAA;AAEtC,cAAiB,eAAA,CAAA,sBAAA,CAAuB,UAAU,IAAK,CAAA,CAAA;AAAA,aAClD,MAAA;AACL,cAAM,MAAA,cAAA,GAAiBC,sBAAa,CAAA,WAAA,EAAa,cAAc,CAAA,CAAA;AAC/D,cAAMC,MAAAA,YAAAA,GAAcH,yBAAe,cAAc,CAAA,CAAA;AAEjD,cAAM,MAAA,iBAAA,GACJ,cAAeG,CAAAA,YAAAA,CAAY,YAAe,GAAA,CAAA,CAAA,CAAA;AAC5C,cAAA,IAAI,iBAAmB,EAAA;AACrB,gBAAA,YAAA;AAAA,kBACE,iBAAA;AAAA,kBACAA,YAAY,CAAA,IAAA;AAAA,kBACZ,IAAA;AAAA,kBACA,SAAA;AAAA,iBACF,CAAA;AAAA,eACK,MAAA;AACL,gBAAM,MAAA,aAAA,GACJ,cAAeA,CAAAA,YAAAA,CAAY,YAAe,GAAA,CAAA,CAAA,CAAA;AAC5C,gBAAiB,gBAAA,CAAA,aAAA,EAAeA,YAAY,CAAA,IAAA,EAAM,IAAI,CAAA,CAAA;AAAA,eACxD;AACA,cAAA,mBAAA,CAAoB,OAAU,GAAA,cAAA,CAAA;AAC9B,cAAiB,eAAA,CAAA,sBAAA,CAAuB,UAAU,KAAM,CAAA,CAAA;AAAA,aAC1D;AAEA,YAAA,UAAA,CAAW,OAAU,GAAA,cAAA,CAAA;AACrB,YAAA,aAAA,CAAc,OAAU,GAAA,SAAA,CAAA;AAAA,WAC1B;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,YAAA,EAAc,YAAc,EAAA,gBAAA,EAAkB,WAAW,CAAA;AAAA,GAC5D,CAAA;AAEA,EAAM,MAAA,kBAAA,GAAqBL,kBAAY,MAAM;AAC3C,IAAS,QAAA,CAAA,mBAAA,CAAoB,WAAa,EAAA,oBAAA,EAAsB,KAAK,CAAA,CAAA;AACrE,IAAS,QAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,kBAAA,EAAoB,KAAK,CAAA,CAAA;AAEjE,IAAa,YAAA,EAAA,CAAA;AAEb,IAAM,MAAA,EAAE,OAAS,EAAA,WAAA,EAAgB,GAAA,mBAAA,CAAA;AACjC,IAAM,MAAA,WAAA,GAAcE,yBAAe,WAAW,CAAA,CAAA;AAC9C,IAAA,MAAM,EAAE,SAAY,GAAA,CAAA,CAAA,EAAI,KAAO,EAAA,YAAA,EAAc,SAAY,GAAA,WAAA,CAAA;AAEzD,IAAM,MAAA,SAAA,GAAY,SAAc,KAAA,CAAA,CAAA,GAAK,SAAY,GAAA,KAAA,CAAA;AACjD,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,aAAA,CAAc,OAAU,GAAA,KAAA,CAAA,CAAA;AAExB,IAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAElB,IAAA,IAAI,uBAAuB,OAAS,EAAA;AAClC,MAAA,MAAA,CAAO,WAAW,CAAE,CAAA,CAAA,CAAA;AAAA,KACtB,MAAA,IAAW,cAAc,OAAS,EAAA;AAChC,MAAA,MAAA,CAAO,WAAW,OAAO,CAAA,CAAA;AAAA,KAC3B;AACA,IAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,IAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,GAClB,EAAA,CAAC,YAAc,EAAA,oBAAA,EAAsB,MAAM,CAAC,CAAA,CAAA;AAE/C,EAAA,MAAM,kBAAqB,GAAAF,iBAAA;AAAA,IACzB,CAAC,GAAoB,KAAA;AACnB,MAAA,MAAM,EAAE,GAAA,EAAK,KAAM,EAAA,GAAIC,qBAAW,WAAW,CAAA,CAAA;AAC7C,MAAM,MAAA,EAAA,CAAG,GAAM,GAAA,SAAA,EAAc,GAAA,GAAA,CAAA;AAE7B,MAAA,MAAM,YAAY,GAAI,CAAA,MAAA,CAAA;AACtB,MAAM,MAAA,WAAA,GAAc,SAAU,CAAA,OAAA,CAAQ,SAAS,CAAA,CAAA;AAC/C,MAAA,IAAI,WAAa,EAAA;AAEf,QAAA,MAAM,QAAQ,CAAO,IAAA,EAAA,SAAA,CAAA,yDAAA,CAAA,CAAA;AACrB,QAAA,MAAM,WAAc,GAAAK,4BAAA;AAAA,UAClB,YAAa,CAAA,OAAA;AAAA,UACb,WAAA;AAAA,UACA,WAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAEA,QAAM,MAAA,WAAA,GAAc,WAAY,CAAA,IAAA,CAAKC,0BAAgB,CAAA,CAAA;AACrD,QAAI,IAAA,WAAA,IAAe,aAAa,OAAS,EAAA;AACvC,UAAA,mBAAA,CAAoB,OAAU,GAAA,WAAA,CAAA;AAC9B,UAAA,UAAA,CAAW,OAAU,GAAA,WAAA,CAAA;AAErB,UAAM,MAAA,aAAA,GAAgB,YAAa,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAA;AACjE,UAAM,MAAA,aAAA,GAAgB,WAAY,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAA;AAChE,UAAY,WAAA,CAAA,OAAA,GAAU,YAAY,WAAY,CAAA,KAAA,CAAA;AAC9C,UAAA,MAAM,CAAC,QAAQ,CAAI,GAAA,WAAA,CAAY,MAAM,CAAE,CAAA,CAAA,CAAA;AACvC,UAAA,MAAM,eAAe,QAAS,CAAA,GAAA,CAAA;AAE9B,UAAQ,OAAA,CAAA,GAAA,CAAI,EAAE,QAAA,EAAU,CAAA,CAAA;AAExB,UAAW,UAAA,CAAA,OAAA,CAAQ,QAAQ,aAAc,CAAA,KAAA,CAAA,CAAA;AACzC,UAAA,UAAA,CAAW,OAAQ,CAAA,GAAA,GAAM,QAAS,CAAA,mBAAA,GAC9B,KAAK,GAAI,CAAA,QAAA,CAAS,KAAO,EAAA,aAAA,CAAc,KAAQ,GAAA,WAAA,CAAY,IAAI,CAAA,GAC/D,eAAe,WAAY,CAAA,IAAA,CAAA;AAE/B,UAAA,aAAA;AAAA,4BACGC,cAAA,CAAAC,mBAAA,EAAA;AAAA,cACC,kBAAkB,CAAY,SAAA,EAAA,WAAA,CAAA,CAAA;AAAA,cAC9B,GAAK,EAAA,YAAA;AAAA,cACL,IAAM,EAAA,aAAA;AAAA,cACN,OAAA,EAAS,WAAY,CAAA,SAAA,CAAU,IAAI,CAAA;AAAA,aACrC,CAAA;AAAA,WACF,CAAA;AAEA,UAAA,IAAI,gBAAgB,QAAU,EAAA;AAC5B,YAAM,MAAA,QAAA,GAAW,WAAY,CAAA,WAAA,CAAY,KAAQ,GAAA,CAAA,CAAA,CAAA;AACjD,YAAa,YAAA,CAAA,QAAA,EAAU,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAAA,WACzC,MAAA;AACL,YAAM,MAAA,aAAA,GAAgB,YAAY,WAAY,CAAA,KAAA,CAAA,CAAA;AAC9C,YAAiB,gBAAA,CAAA,aAAA,EAAe,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAAA,WACzD;AAEA,UAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,SACpB;AAEA,QAAS,QAAA,CAAA,gBAAA,CAAiB,WAAa,EAAA,oBAAA,EAAsB,KAAK,CAAA,CAAA;AAClE,QAAS,QAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,kBAAA,EAAoB,KAAK,CAAA,CAAA;AAAA,OAChE;AAAA,KACF;AAAA,IACA;AAAA,MACE,YAAA;AAAA,MACA,YAAA;AAAA,MACA,gBAAA;AAAA,MACA,oBAAA;AAAA,MACA,kBAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,uBAA0B,GAAAT,iBAAA;AAAA,IAC9B,CAAC,GAAoB,KAAA;AACnB,MAAA,MAAM,EAAE,GAAA,EAAQ,GAAAC,oBAAA,CAAW,WAAW,CAAA,CAAA;AACtC,MAAM,MAAA,EAAA,CAAG,GAAM,GAAA,SAAA,EAAc,GAAA,GAAA,CAAA;AAC7B,MAAA,MAAM,iBAAoB,GAAA,IAAA,CAAK,GAAI,CAAA,SAAA,GAAY,SAAS,OAAO,CAAA,CAAA;AAC/D,MAAI,IAAA,iBAAA,GAAoB,aAAiB,IAAA,YAAA,CAAa,OAAS,EAAA;AAC7D,QAAA,IAAI,eAAe,OAAS,EAAA;AAC1B,UAAO,MAAA,CAAA,YAAA,CAAa,eAAe,OAAO,CAAA,CAAA;AAC1C,UAAA,cAAA,CAAe,OAAU,GAAA,IAAA,CAAA;AAAA,SAC3B;AACA,QAAS,QAAA,CAAA,mBAAA;AAAA,UACP,WAAA;AAAA,UACA,uBAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AACA,QAAS,QAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,qBAAA,EAAuB,KAAK,CAAA,CAAA;AAEpE,QAAA,kBAAA,CAAmB,GAAG,CAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAAA,IACA,CAAC,YAAc,EAAA,kBAAA,EAAoB,WAAW,CAAA;AAAA,GAChD,CAAA;AAEA,EAAM,MAAA,qBAAA,GAAwBD,kBAAY,MAAM;AAC9C,IAAA,IAAI,eAAe,OAAS,EAAA;AAC1B,MAAO,MAAA,CAAA,YAAA,CAAa,eAAe,OAAO,CAAA,CAAA;AAC1C,MAAA,cAAA,CAAe,OAAU,GAAA,IAAA,CAAA;AAAA,KAC3B;AACA,IAAS,QAAA,CAAA,mBAAA,CAAoB,WAAa,EAAA,uBAAA,EAAyB,KAAK,CAAA,CAAA;AACxE,IAAS,QAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,qBAAA,EAAuB,KAAK,CAAA,CAAA;AAAA,GACtE,EAAG,CAAC,uBAAuB,CAAC,CAAA,CAAA;AAE5B,EAAA,MAAM,gBAAsC,GAAAA,iBAAA;AAAA,IAC1C,CAAC,GAAQ,KAAA;AACP,MAAA,IAAI,YAAa,CAAA,OAAA,IAAW,CAAC,GAAA,CAAI,gBAAkB,EAAA;AACjD,QAAA,MAAM,EAAE,GAAA,EAAQ,GAAAC,oBAAA,CAAW,WAAW,CAAA,CAAA;AACtC,QAAM,MAAA,EAAA,CAAG,GAAM,GAAA,SAAA,EAAc,GAAA,GAAA,CAAA;AAC7B,QAAA,QAAA,CAAS,OAAU,GAAA,SAAA,CAAA;AACnB,QAAA,WAAA,CAAY,OAAU,GAAA,SAAA,CAAA;AAEtB,QAAS,QAAA,CAAA,gBAAA,CAAiB,WAAa,EAAA,uBAAA,EAAyB,KAAK,CAAA,CAAA;AACrE,QAAS,QAAA,CAAA,gBAAA,CAAiB,SAAW,EAAA,qBAAA,EAAuB,KAAK,CAAA,CAAA;AAEjE,QAAA,GAAA,CAAI,OAAQ,EAAA,CAAA;AAEZ,QAAe,cAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC/C,UAAS,QAAA,CAAA,mBAAA;AAAA,YACP,WAAA;AAAA,YACA,uBAAA;AAAA,YACA,KAAA;AAAA,WACF,CAAA;AACA,UAAS,QAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,qBAAA,EAAuB,KAAK,CAAA,CAAA;AAEpE,UAAA,kBAAA,CAAmB,IAAI,WAAW,CAAA,CAAA;AAAA,WACjC,GAAG,CAAA,CAAA;AAAA,OACR;AAAA,KACF;AAAA,IACA;AAAA,MACE,YAAA;AAAA,MACA,kBAAA;AAAA,MACA,WAAA;AAAA,MACA,uBAAA;AAAA,MACA,qBAAA;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,mBAAmB,UACrB,GAAAC,wBAAA,CAAe,mBAAoB,CAAA,OAAO,EAAE,SAC5C,GAAA,CAAA,CAAA,CAAA;AAEJ,EAAO,OAAA;AAAA,IACL,SAAW,EAAA,UAAA;AAAA,IACX,aAAe,EAAA,IAAA;AAAA,IACf,gBAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAa,EAAA,gBAAA;AAAA,IACb,qBAAuB,EAAA,YAAA;AAAA,GACzB,CAAA;AACF;;;;"}

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragSpacers.js

@@ -1,107 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var Draggable = require('./Draggable.js');
-
-const useDragSpacers = () => {
-  const animationFrame = React.useRef(0);
-  const transitioning = React.useRef(false);
-  const spacers = React.useMemo(
-    () => [Draggable.createDragSpacer(transitioning), Draggable.createDragSpacer()],
-    []
-  );
-  const clearSpacers = React.useCallback(
-    () => spacers.forEach((spacer) => {
-      var _a;
-      return (_a = spacer.parentElement) == null ? void 0 : _a.removeChild(spacer);
-    }),
-    []
-  );
-  const animateTransition = React.useCallback((size) => {
-    const [spacer1, spacer2] = spacers;
-    animationFrame.current = requestAnimationFrame(() => {
-      transitioning.current = true;
-      spacer1.style.cssText = "width: 0px";
-      spacer2.style.cssText = `width: ${size}px`;
-      spacers[0] = spacer2;
-      spacers[1] = spacer1;
-    });
-  }, []);
-  const cancelAnyPendingAnimation = React.useCallback(() => {
-    if (animationFrame.current) {
-      cancelAnimationFrame(animationFrame.current);
-      animationFrame.current = 0;
-    }
-  }, []);
-  const displaceItem = React.useCallback(
-    (item = null, size, useTransition = false, direction) => {
-      var _a, _b, _c, _d;
-      if (item) {
-        const [spacer1, spacer2] = spacers;
-        cancelAnyPendingAnimation();
-        if (useTransition) {
-          if (transitioning.current) {
-            clearSpacers();
-            spacer1.style.cssText = `width: ${size}px`;
-            spacer2.style.cssText = `width: 0px`;
-            const target = direction === "fwd" ? item.element.previousElementSibling : item.element.nextElementSibling;
-            (_a = item.element.parentElement) == null ? void 0 : _a.insertBefore(spacer1, target);
-            (_b = item.element.parentElement) == null ? void 0 : _b.insertBefore(spacer2, item.element);
-          } else {
-            (_c = item.element.parentElement) == null ? void 0 : _c.insertBefore(spacer2, item.element);
-          }
-          animateTransition(size);
-        } else {
-          spacer1.style.cssText = `width: ${size}px`;
-          (_d = item.element.parentElement) == null ? void 0 : _d.insertBefore(spacer1, item.element);
-        }
-      }
-    },
-    []
-  );
-  const displaceLastItem = React.useCallback(
-    (item, size, useTransition = false) => {
-      var _a, _b, _c, _d;
-      const [spacer1, spacer2] = spacers;
-      cancelAnyPendingAnimation();
-      if (useTransition) {
-        if (transitioning.current) {
-          clearSpacers();
-          spacer1.style.cssText = `width: ${size}px`;
-          spacer2.style.cssText = `width: 0px`;
-          (_a = item.element.parentElement) == null ? void 0 : _a.insertBefore(
-            spacer1,
-            item.element.previousElementSibling
-          );
-          (_b = item.element.parentElement) == null ? void 0 : _b.insertBefore(
-            spacer2,
-            item.element.nextElementSibling
-          );
-        } else {
-          (_c = item.element.parentElement) == null ? void 0 : _c.insertBefore(
-            spacer2,
-            item.element.nextElementSibling
-          );
-        }
-        animateTransition(size);
-      } else {
-        spacer1.style.cssText = `width: ${size}px`;
-        (_d = item.element.parentElement) == null ? void 0 : _d.insertBefore(
-          spacer1,
-          item.element.nextElementSibling
-        );
-      }
-    },
-    []
-  );
-  return {
-    displaceItem,
-    displaceLastItem,
-    clearSpacers
-  };
-};
-
-exports.useDragSpacers = useDragSpacers;
-//# sourceMappingURL=useDragSpacers.js.map

package/dist-cjs/packages/lab/src/tabs/drag-drop/useDragSpacers.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useDragSpacers.js","sources":["../src/tabs/drag-drop/useDragSpacers.ts"],"sourcesContent":["import { useCallback, useMemo, useRef } from \"react\";\nimport { MeasuredDropTarget } from \"./drag-utils\";\nimport { createDragSpacer } from \"./Draggable\";\nimport { Direction } from \"./dragDropTypes\";\n\nexport const useDragSpacers = () => {\n  const animationFrame = useRef(0);\n  const transitioning = useRef(false);\n\n  const spacers = useMemo(\n    // We only need to listen for transition end on one of the spacers\n    () => [createDragSpacer(transitioning), createDragSpacer()],\n    []\n  );\n\n  const clearSpacers = useCallback(\n    () =>\n      spacers.forEach((spacer) => spacer.parentElement?.removeChild(spacer)),\n    []\n  );\n\n  const animateTransition = useCallback((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\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 = 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    []\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    []\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/packages/lab/src/tabs/useActivationIndicator.js

@@ -1,82 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-require('@salt-ds/core');
-require('react/jsx-runtime');
-var useResizeObserver = require('../responsive/useResizeObserver.js');
-
-const MEASUREMENTS = {
-  horizontal: {
-    pos: "left",
-    size: "width"
-  },
-  vertical: {
-    pos: "top",
-    size: "height"
-  }
-};
-function useActivationIndicator({
-  rootRef,
-  tabId,
-  orientation
-}) {
-  const [style, setStyle] = React.useState({
-    left: 0,
-    width: 0
-  });
-  const styleRef = React.useRef(style);
-  const getTabPos = React.useCallback(() => {
-    const { pos, size } = MEASUREMENTS[orientation];
-    return [pos, size];
-  }, [orientation]);
-  const createIndicatorStyle = React.useCallback(
-    (tabElement) => {
-      if (tabElement) {
-        const tabRect = tabElement.getBoundingClientRect();
-        if (rootRef.current && tabRect) {
-          const rootRect = rootRef.current.getBoundingClientRect();
-          const [pos, size] = getTabPos();
-          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;
-          const newPos = tabRect[pos] - rootRect[pos];
-          const newSize = tabRect[size];
-          return {
-            [pos]: newPos,
-            [size]: newSize,
-            hasChanged: newPos !== existingPos || newSize !== existingSize
-          };
-        }
-      }
-      return {};
-    },
-    [orientation, rootRef]
-  );
-  const onResize = React.useCallback(() => {
-    requestAnimationFrame(() => {
-      if (tabId) {
-        const tabEl = document.getElementById(tabId);
-        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);
-        if (hasChanged) {
-          setStyle(newStyle);
-        }
-      }
-    });
-  }, [createIndicatorStyle, tabId]);
-  React.useEffect(() => {
-    if (tabId) {
-      setTimeout(() => {
-        const tabEl = document.getElementById(tabId);
-        const { hasChanged, ...newStyle } = createIndicatorStyle(tabEl);
-        if (hasChanged) {
-          setStyle(styleRef.current = newStyle);
-        }
-      }, 50);
-    }
-  }, [createIndicatorStyle, tabId]);
-  useResizeObserver.useResizeObserver(rootRef, useResizeObserver.WidthOnly, onResize);
-  return style;
-}
-
-exports.useActivationIndicator = useActivationIndicator;
-//# sourceMappingURL=useActivationIndicator.js.map

package/dist-cjs/packages/lab/src/tabs/useActivationIndicator.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useActivationIndicator.js","sources":["../src/tabs/useActivationIndicator.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef, useState } from \"react\";\nimport { orientationType } from \"../responsive\";\nimport { useResizeObserver, WidthOnly } from \"../responsive\";\n\ntype activationIndicatorStyles = {\n  height?: number;\n  left?: number;\n  top?: number;\n  width?: number;\n  hasChanged?: boolean;\n};\n\nconst MEASUREMENTS = {\n  horizontal: {\n    pos: \"left\" as keyof activationIndicatorStyles,\n    size: \"width\" as keyof activationIndicatorStyles,\n  },\n  vertical: {\n    pos: \"top\" as keyof activationIndicatorStyles,\n    size: \"height\" as keyof activationIndicatorStyles,\n  },\n};\n\n// Overflow can affect tab positions, so we recalculate when it changes\nexport function useActivationIndicator({\n  rootRef,\n  tabId,\n  orientation,\n}: {\n  rootRef: RefObject<HTMLDivElement | null>;\n  tabId?: string;\n  orientation: orientationType;\n}): activationIndicatorStyles {\n  const [style, setStyle] = useState<activationIndicatorStyles>({\n    left: 0,\n    width: 0,\n  });\n  // Keep style in a ref, so style is not a dependency for createIndicatorStyle, which in turn\n  // means our useEffect below will re-run only when the tab changes, not after every style change\n  // as well.\n\n  const styleRef = useRef(style);\n\n  const getTabPos = useCallback(() => {\n    const { pos, size } = MEASUREMENTS[orientation];\n    return [pos, size];\n  }, [orientation]);\n\n  const createIndicatorStyle = useCallback(\n    (tabElement: HTMLElement | null): activationIndicatorStyles => {\n      if (tabElement) {\n        const tabRect = tabElement.getBoundingClientRect() as any;\n        if (rootRef.current && tabRect) {\n          const rootRect = rootRef.current.getBoundingClientRect() as any;\n          const [pos, size] = getTabPos();\n          const { [pos]: existingPos, [size]: existingSize } = styleRef.current;\n          const newPos = tabRect[pos] - rootRect[pos];\n          const newSize = tabRect[size];\n\n          return {\n            [pos]: newPos,\n            [size]: newSize,\n            hasChanged: newPos !== existingPos || newSize !== existingSize,\n          };\n        }\n      }\n      return {};\n    },\n    [orientation, rootRef]\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          setStyle((styleRef.current = 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":"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"}

package/dist-cjs/packages/lab/src/tabs/useEditableItem.js

@@ -1,59 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@salt-ds/core');
-var React = require('react');
-
-const editKeys = /* @__PURE__ */ new Set(["Enter", " "]);
-const isEditKey = (key) => editKeys.has(key);
-const useEditableItem = ({
-  editing: editingProp,
-  highlightedIdx,
-  indexPositions,
-  onEnterEditMode: onEnterEditModeProp,
-  onExitEditMode: onExitEditModeProp
-}) => {
-  const [editing, setEditing] = core.useControlled({
-    controlled: editingProp,
-    default: false,
-    name: "useEditableItem",
-    state: "editing"
-  });
-  const onEnterEditMode = React.useCallback(() => {
-    setEditing(true);
-    onEnterEditModeProp == null ? void 0 : onEnterEditModeProp();
-  }, [onEnterEditModeProp, setEditing]);
-  const onExitEditMode = (originalValue, editedValue, allowDeactivation, tabIndex) => {
-    setEditing(false);
-    console.log("exit edit mode");
-    onExitEditModeProp == null ? void 0 : onExitEditModeProp(
-      originalValue,
-      editedValue,
-      allowDeactivation,
-      tabIndex
-    );
-  };
-  const onKeyDown = React.useCallback(
-    (evt) => {
-      var _a, _b;
-      console.log(`useEditableItem onKeyDown ${highlightedIdx}`, {
-        editable: (_a = indexPositions[highlightedIdx]) == null ? void 0 : _a.editable
-      });
-      if (isEditKey(evt.key) && ((_b = indexPositions[highlightedIdx]) == null ? void 0 : _b.editable)) {
-        onEnterEditMode();
-      }
-    },
-    [onEnterEditMode, highlightedIdx, indexPositions]
-  );
-  return {
-    editing,
-    onKeyDown,
-    onEnterEditMode,
-    onExitEditMode,
-    setEditing
-  };
-};
-
-exports.useEditableItem = useEditableItem;
-//# sourceMappingURL=useEditableItem.js.map

package/dist-cjs/packages/lab/src/tabs/useEditableItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEditableItem.js","sources":["../src/tabs/useEditableItem.ts"],"sourcesContent":["import { useControlled } from \"@salt-ds/core\";\nimport { useCallback, KeyboardEvent } from \"react\";\nimport { 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, setEditing]);\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,CAAA;AACvC,MAAM,SAAY,GAAA,CAAC,GAAgB,KAAA,QAAA,CAAS,IAAI,GAAG,CAAA,CAAA;AAwB5C,MAAM,kBAAkB,CAAC;AAAA,EAC9B,OAAS,EAAA,WAAA;AAAA,EACT,cAAA;AAAA,EACA,cAAA;AAAA,EACA,eAAiB,EAAA,mBAAA;AAAA,EACjB,cAAgB,EAAA,kBAAA;AAClB,CAAqD,KAAA;AACnD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,kBAAc,CAAA;AAAA,IAC1C,UAAY,EAAA,WAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,iBAAA;AAAA,IACN,KAAO,EAAA,SAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,eAAA,GAAkBC,kBAAY,MAAM;AACxC,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AACf,IAAA,mBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,mBAAA,EAAA,CAAA;AAAA,GACC,EAAA,CAAC,mBAAqB,EAAA,UAAU,CAAC,CAAA,CAAA;AAEpC,EAAA,MAAM,cAAiB,GAAA,CACrB,aACA,EAAA,WAAA,EACA,mBACA,QACG,KAAA;AACH,IAAA,UAAA,CAAW,KAAK,CAAA,CAAA;AAChB,IAAA,OAAA,CAAQ,IAAI,gBAAgB,CAAA,CAAA;AAC5B,IAAA,kBAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,kBAAA;AAAA,MACE,aAAA;AAAA,MACA,WAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,KAAA,CAAA;AAAA,GAEJ,CAAA;AAEA,EAAA,MAAM,SAAY,GAAAA,iBAAA;AAAA,IAChB,CAAC,GAAuB,KAAA;AAjE5B,MAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAkEM,MAAQ,OAAA,CAAA,GAAA,CAAI,6BAA6B,cAAkB,CAAA,CAAA,EAAA;AAAA,QACzD,QAAA,EAAA,CAAU,EAAe,GAAA,cAAA,CAAA,cAAA,CAAA,KAAf,IAAgC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,QAAA;AAAA,OAC3C,CAAA,CAAA;AACD,MAAA,IAAI,UAAU,GAAI,CAAA,GAAG,OAAK,EAAe,GAAA,cAAA,CAAA,cAAA,CAAA,KAAf,mBAAgC,QAAU,CAAA,EAAA;AAClE,QAAgB,eAAA,EAAA,CAAA;AAAA,OAClB;AAAA,KACF;AAAA,IACA,CAAC,eAAiB,EAAA,cAAA,EAAgB,cAAc,CAAA;AAAA,GAClD,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,OAAA;AAAA,IACA,SAAA;AAAA,IACA,eAAA;AAAA,IACA,cAAA;AAAA,IACA,UAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/dist-cjs/packages/lab/src/tabs/useItemsWithIds.js

@@ -1,55 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var TabPanel = require('./TabPanel.js');
-
-const useItemsWithIds = (children, id = "root") => {
-  const normalizeItems = React.useCallback(
-    (items) => {
-      const sourceMap2 = {};
-      const tabDescriptors = React.Children.toArray(items).filter(React.isValidElement).map((child, index) => {
-        const {
-          "data-label": dataLabel = `Tab ${index + 1}`,
-          enableClose: closeable,
-          label = dataLabel
-        } = child.props;
-        const tabId = `${id}-${index}`;
-        const tabPanelId = `${tabId}-panel`;
-        const props = {
-          "aria-labelledby": tabId,
-          id: tabPanelId,
-          key: tabId
-        };
-        const element = child.type === TabPanel.TabPanel ? React.cloneElement(child, props) : /* @__PURE__ */ jsxRuntime.jsx(TabPanel.TabPanel, {
-          ...props,
-          label,
-          children: child
-        });
-        const tab = {
-          closeable,
-          element,
-          id: tabId,
-          label
-        };
-        sourceMap2[tabId] = tab;
-        return tab;
-      });
-      return [tabDescriptors, sourceMap2];
-    },
-    [id]
-  );
-  const [sourceWithIds, sourceMap] = React.useMemo(() => {
-    return normalizeItems(children);
-  }, [normalizeItems, children]);
-  const itemById = React.useCallback(
-    (id2) => sourceMap[id2],
-    [sourceWithIds, sourceMap]
-  );
-  return [sourceWithIds, itemById];
-};
-
-exports.useItemsWithIds = useItemsWithIds;
-//# sourceMappingURL=useItemsWithIds.js.map

package/dist-cjs/packages/lab/src/tabs/useItemsWithIds.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useItemsWithIds.js","sources":["../src/tabs/useItemsWithIds.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport { TabPanel } from \"./TabPanel\";\nimport { 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}>\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(\n    (id: string) => sourceMap[id],\n    [sourceWithIds, sourceMap]\n  );\n\n  return [sourceWithIds, itemById];\n};\n"],"names":["useCallback","sourceMap","Children","isValidElement","TabPanel","cloneElement","jsx","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,CAAA;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,YAAA,EAAc,SAAY,GAAA,CAAA,IAAA,EAAO,KAAQ,GAAA,CAAA,CAAA,CAAA;AAAA,UACzC,WAAa,EAAA,SAAA;AAAA,UACb,KAAQ,GAAA,SAAA;AAAA,YACN,KAAM,CAAA,KAAA,CAAA;AACV,QAAM,MAAA,KAAA,GAAQ,GAAG,EAAM,CAAA,CAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AACvB,QAAA,MAAM,aAAa,CAAG,EAAA,KAAA,CAAA,MAAA,CAAA,CAAA;AACtB,QAAA,MAAM,KAAQ,GAAA;AAAA,UACZ,iBAAmB,EAAA,KAAA;AAAA,UACnB,EAAI,EAAA,UAAA;AAAA,UACJ,GAAK,EAAA,KAAA;AAAA,SACP,CAAA;AACA,QAAM,MAAA,OAAA,GACJ,MAAM,IAAS,KAAAC,iBAAA,GACbC,mBAAa,KAAO,EAAA,KAAK,oBAExBC,cAAA,CAAAF,iBAAA,EAAA;AAAA,UAAU,GAAG,KAAA;AAAA,UAAO,KAAA;AAAA,UAClB,QAAA,EAAA,KAAA;AAAA,SACH,CAAA,CAAA;AAEJ,QAAA,MAAM,GAAqB,GAAA;AAAA,UACzB,SAAA;AAAA,UACA,OAAA;AAAA,UACA,EAAI,EAAA,KAAA;AAAA,UACJ,KAAA;AAAA,SACF,CAAA;AACA,QAAAH,WAAU,KAAS,CAAA,GAAA,GAAA,CAAA;AACnB,QAAO,OAAA,GAAA,CAAA;AAAA,OACR,CAAA,CAAA;AACH,MAAO,OAAA,CAAC,gBAAgBA,UAAS,CAAA,CAAA;AAAA,KACnC;AAAA,IACA,CAAC,EAAE,CAAA;AAAA,GACL,CAAA;AAEA,EAAA,MAAM,CAAC,aAAA,EAAe,SAAS,CAAA,GAAIM,cAAQ,MAAM;AAC/C,IAAA,OAAO,eAAe,QAAQ,CAAA,CAAA;AAAA,GAC7B,EAAA,CAAC,cAAgB,EAAA,QAAQ,CAAC,CAAA,CAAA;AAE7B,EAAA,MAAM,QAAW,GAAAP,iBAAA;AAAA,IACf,CAACQ,QAAe,SAAUA,CAAAA,GAAAA,CAAAA;AAAA,IAC1B,CAAC,eAAe,SAAS,CAAA;AAAA,GAC3B,CAAA;AAEA,EAAO,OAAA,CAAC,eAAe,QAAQ,CAAA,CAAA;AACjC;;;;"}

package/dist-cjs/packages/lab/src/tabs/useKeyboardNavigation.js

@@ -1,224 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@salt-ds/core');
-var React = require('react');
-require('../common-hooks/collectionProvider.js');
-var keyUtils = require('../common-hooks/keyUtils.js');
-require('react/jsx-runtime');
-require('../responsive/useResizeObserver.js');
-
-const navigation = {
-  horizontal: {
-    [keyUtils.Home]: "start",
-    [keyUtils.End]: "end",
-    [keyUtils.ArrowLeft]: "bwd",
-    [keyUtils.ArrowRight]: "fwd"
-  },
-  vertical: {
-    [keyUtils.Home]: "start",
-    [keyUtils.End]: "end",
-    [keyUtils.ArrowUp]: "bwd",
-    [keyUtils.ArrowDown]: "fwd"
-  }
-};
-const isNavigationKey = (key, orientation = "horizontal") => navigation[orientation][key] !== void 0;
-function nextItemIdx(count, direction, idx) {
-  if (direction === "start") {
-    return 0;
-  } else if (direction === "end") {
-    return count - 1;
-  } else if (direction === "bwd") {
-    if (idx > 0) {
-      return idx - 1;
-    } else {
-      return idx;
-    }
-  } else {
-    if (idx === null) {
-      return 0;
-    } else if (idx === count - 1) {
-      return idx;
-    } else {
-      return idx + 1;
-    }
-  }
-}
-const isFocusable = (item) => !item.overflowed;
-const getFocusableElement = (el) => el ? el.hasAttribute("tabindex") ? el : el.querySelector("[tabindex]") : null;
-const useKeyboardNavigation = ({
-  defaultHighlightedIdx = -1,
-  highlightedIdx: highlightedIdxProp,
-  indexPositions,
-  keyBoardActivation,
-  orientation,
-  selectedIndex: selectedTabIndex = 0
-}) => {
-  const manualActivation = keyBoardActivation === "manual";
-  const mouseClickPending = React.useRef(false);
-  const focusedRef = React.useRef(-1);
-  const [hasFocus, setHasFocus] = React.useState(false);
-  const [, forceRefresh] = React.useState({});
-  const [highlightedIdx, _setHighlightedIdx] = core.useControlled({
-    controlled: highlightedIdxProp,
-    default: defaultHighlightedIdx,
-    name: "UseKeyboardNavigation"
-  });
-  const setHighlightedIdx = React.useCallback(
-    (value) => {
-      _setHighlightedIdx(focusedRef.current = value);
-    },
-    [_setHighlightedIdx]
-  );
-  const keyboardNavigation = React.useRef(false);
-  const focusTab = React.useCallback(
-    (tabIndex, immediateFocus = false, withKeyboard) => {
-      setHighlightedIdx(tabIndex);
-      if (withKeyboard === true && !keyboardNavigation.current) {
-        keyboardNavigation.current = true;
-      }
-      const setFocus = () => {
-        const item = indexPositions.find((i) => i.index === tabIndex);
-        if (item) {
-          const focussableElement = getFocusableElement(
-            document.getElementById(item.id)
-          );
-          focussableElement == null ? void 0 : focussableElement.focus();
-        }
-      };
-      if (immediateFocus) {
-        setFocus();
-      } else {
-        setTimeout(setFocus, 70);
-      }
-    },
-    [indexPositions, setHighlightedIdx]
-  );
-  const onFocus = (e) => {
-    if (focusedRef.current === -1) {
-      if (e.target.tabIndex === -1) ; else {
-        setTimeout(() => {
-          if (focusedRef.current === -1) {
-            setHighlightedIdx(selectedTabIndex);
-          }
-        }, 200);
-      }
-    }
-  };
-  const nextFocusableItemIdx = React.useCallback(
-    (direction = "fwd", idx = direction === "fwd" ? -1 : indexPositions.length) => {
-      let nextIdx = nextItemIdx(indexPositions.length, direction, idx);
-      const nextDirection = direction === "start" ? "fwd" : direction === "end" ? "bwd" : direction;
-      while ((nextDirection === "fwd" && nextIdx < indexPositions.length || nextDirection === "bwd" && nextIdx > 0) && !isFocusable(indexPositions[nextIdx])) {
-        const newIdx = nextItemIdx(
-          indexPositions.length,
-          nextDirection,
-          nextIdx
-        );
-        if (newIdx === nextIdx) {
-          break;
-        } else {
-          nextIdx = newIdx;
-        }
-      }
-      return nextIdx;
-    },
-    [indexPositions]
-  );
-  const navigateChildItems = React.useCallback(
-    (e, forceFocusVisible = false) => {
-      const direction = navigation[orientation][e.key];
-      const nextIdx = nextFocusableItemIdx(direction, highlightedIdx);
-      if (nextIdx !== highlightedIdx) {
-        const immediateFocus = true;
-        if (manualActivation) {
-          focusTab(nextIdx, immediateFocus);
-        }
-      } else if (forceFocusVisible) {
-        forceRefresh({});
-      }
-    },
-    [
-      highlightedIdx,
-      manualActivation,
-      nextFocusableItemIdx,
-      focusTab,
-      orientation
-    ]
-  );
-  const handleKeyDown = React.useCallback(
-    (e) => {
-      if (indexPositions.length > 0 && isNavigationKey(e.key, orientation)) {
-        e.preventDefault();
-        if (keyboardNavigation.current) {
-          navigateChildItems(e);
-        } else {
-          keyboardNavigation.current = true;
-          navigateChildItems(e, true);
-        }
-      }
-    },
-    [indexPositions, navigateChildItems, orientation]
-  );
-  const handleItemClick = (_, tabIndex) => {
-    setHighlightedIdx(tabIndex);
-  };
-  const handleFocus = React.useCallback(
-    (evt) => {
-      if (!hasFocus) {
-        setHasFocus(true);
-        if (!mouseClickPending.current) {
-          keyboardNavigation.current = true;
-        } else {
-          mouseClickPending.current = false;
-        }
-      }
-    },
-    [hasFocus]
-  );
-  const handleContainerMouseDown = React.useCallback(
-    (evt) => {
-      if (!hasFocus) {
-        mouseClickPending.current = true;
-      }
-      keyboardNavigation.current = false;
-    },
-    [hasFocus]
-  );
-  const containerProps = {
-    onBlur: (e) => {
-      const sourceTarget = e.target.closest(".saltTabstrip");
-      const destTarget = e.relatedTarget;
-      if (sourceTarget && !(sourceTarget == null ? void 0 : sourceTarget.contains(destTarget))) {
-        setHighlightedIdx(-1);
-        setHasFocus(false);
-      }
-    },
-    onMouseDownCapture: handleContainerMouseDown,
-    onFocus: handleFocus,
-    onMouseLeave: () => {
-      keyboardNavigation.current = true;
-      setHighlightedIdx(-1);
-      mouseClickPending.current = false;
-    }
-  };
-  core.useIsomorphicLayoutEffect(() => {
-    if (hasFocus && selectedTabIndex !== void 0) {
-      focusTab(selectedTabIndex);
-    }
-  }, [focusTab, hasFocus, selectedTabIndex]);
-  return {
-    containerProps,
-    focusVisible: keyboardNavigation.current ? highlightedIdx : -1,
-    focusIsWithinComponent: hasFocus,
-    highlightedIdx,
-    focusTab,
-    onClick: handleItemClick,
-    onFocus,
-    onKeyDown: handleKeyDown
-  };
-};
-
-exports.useKeyboardNavigation = useKeyboardNavigation;
-//# sourceMappingURL=useKeyboardNavigation.js.map