@vuu-ui/vuu-ui-controls 0.13.2 → 0.13.3

package/cjs/packages/vuu-ui-controls/src/drag-drop/useDragDropNaturalMovement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragDropNaturalMovement.js","sources":["../../../../../src/drag-drop/useDragDropNaturalMovement.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, useState } from \"react\";\n\nimport {\n  Direction,\n  DropOptions,\n  InternalDragDropProps,\n  InternalDragHookResult,\n  ViewportRange,\n} from \"./dragDropTypes\";\nimport { useDragDisplacers } from \"./useDragDisplacers\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  dimensions,\n  getIndexOfDraggedItem,\n  getItemParentContainer,\n  getNextDropTarget,\n  MeasuredDropTarget,\n  measureDropTargets,\n  NOT_HIDDEN,\n  NOT_OVERFLOWED,\n} from \"./drop-target-utils\";\n\ntype DragPosition = {\n  direction?: Direction;\n  insertionPosition: number;\n};\n\nexport const useDragDropNaturalMovement = ({\n  containerRef,\n  orientation = \"horizontal\",\n  itemQuery = \"*\",\n  selected,\n  viewportRange,\n}: InternalDragDropProps): InternalDragHookResult => {\n  const dragPositionRef = useRef<DragPosition>({\n    direction: undefined,\n    insertionPosition: -1,\n  });\n  const isScrollable = useRef(false);\n  /** current position of dragged element */\n  const dragPosRef = useRef<number>(-1);\n  const measuredDropTargets = useRef<MeasuredDropTarget[]>([]);\n  const overflowMenuShowingRef = useRef(false);\n\n  const [showOverflow, setShowOverflow] = useState(false);\n\n  const { clearSpacers, displaceItem, displaceLastItem, setTerminalSpacer } =\n    useDragDisplacers(orientation);\n\n  const draggedItemRef = useRef<MeasuredDropTarget>(undefined);\n  const fullItemQuery = `:is(${itemQuery}${NOT_OVERFLOWED}${NOT_HIDDEN},.vuuOverflowContainer-OverflowIndicator)`;\n\n  const indexOf = (dropTarget: MeasuredDropTarget) =>\n    measuredDropTargets.current.findIndex((d) => d.id === dropTarget.id);\n\n  // Shouldn't need this - but viewportRange is always stale in stopScrolling. Checked all dependencies\n  // look ok. Something to do with setTimeout / scrollHandler ?\n  const rangeRef = useRef<ViewportRange>(undefined);\n  rangeRef.current = viewportRange;\n\n  const handleScrollStart = useCallback(\n    (scrollDirection: \"fwd\" | \"bwd\") => {\n      const itemContainer = getItemParentContainer(\n        containerRef.current,\n        itemQuery,\n      );\n      const { current: draggedItem } = draggedItemRef;\n\n      // When we start scrolling, insert a spacer at the start of end of the collection.\n      // This is what we will need if user scrolls right to end and it will give the correct\n      // scrollHeight. Ig user stops scrolling before start/end we will reposition the\n      // spacer(s) appropriately\n      if (itemContainer && draggedItem) {\n        setTerminalSpacer(\n          itemContainer,\n          scrollDirection === \"fwd\" ? \"end\" : \"start\",\n          draggedItem.size,\n        );\n      }\n    },\n    [containerRef, itemQuery, setTerminalSpacer],\n  );\n\n  const handleScrollStop = useCallback(\n    (scrollDirection: \"fwd\" | \"bwd\") => {\n      const { current: container } = containerRef;\n      const { current: draggedItem } = draggedItemRef;\n      const { current: dragPosition } = dragPositionRef;\n      if (container && draggedItem) {\n        const dropTargets = (measuredDropTargets.current = measureDropTargets(\n          container,\n          orientation,\n          fullItemQuery,\n          rangeRef.current,\n        ));\n\n        const dropTargetAtBoundary =\n          scrollDirection === \"fwd\" ? dropTargets.at(-1) : dropTargets.at(0);\n\n        if (dropTargetAtBoundary) {\n          const { mid, end, size, start } = dropTargetAtBoundary;\n          if (scrollDirection === \"fwd\") {\n            const draggedDropTarget = {\n              ...draggedItem,\n              start: Math.round(start + size),\n              mid: Math.round(mid + size),\n              end: Math.round(end + size),\n            };\n            dropTargets.push(draggedDropTarget);\n            dragPosition.insertionPosition = dropTargetAtBoundary.index + 1;\n          } else {\n            const draggedDropTarget = {\n              ...draggedItem,\n              start: Math.round(start - size),\n              mid: Math.round(mid - size),\n              end: Math.round(end - size),\n            };\n            dropTargets.unshift(draggedDropTarget);\n            dragPosition.insertionPosition = 0;\n          }\n        }\n      }\n    },\n    [containerRef, fullItemQuery, orientation],\n  );\n\n  const beginDrag = useCallback(\n    (dragElement: HTMLElement) => {\n      if (\n        //TODO need a different check for selected\n        dragElement.ariaSelected &&\n        Array.isArray(selected) &&\n        selected.length > 1\n      ) {\n        console.log(\"its a selected element, and we have a multi select\");\n      }\n      const { current: container } = containerRef;\n      const { current: dragPosition } = dragPositionRef;\n\n      if (container && dragElement) {\n        const internalDrag = container.contains(dragElement);\n        const { SCROLL_SIZE, CLIENT_SIZE } = dimensions(orientation);\n        const { id: draggedItemId } = dragElement;\n        const { [SCROLL_SIZE]: scrollSize, [CLIENT_SIZE]: clientSize } =\n          container;\n        isScrollable.current = scrollSize > clientSize;\n        const dropTargets = (measuredDropTargets.current = measureDropTargets(\n          container,\n          orientation,\n          fullItemQuery,\n          viewportRange,\n          draggedItemId,\n        ));\n\n        if (internalDrag) {\n          const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n          const draggedItem = dropTargets[indexOfDraggedItem];\n          if (draggedItem && container) {\n            draggedItemRef.current = draggedItem;\n            const displaceFunction = draggedItem.isLast\n              ? displaceLastItem\n              : displaceItem;\n\n            // This should return the insertion position of dragged item\n            // which depends on both dro[Target and direction]\n            dragPosition.insertionPosition = displaceFunction(\n              dropTargets,\n              draggedItem,\n              draggedItem.size,\n              false,\n              \"static\",\n            );\n          }\n        } else {\n          // prettier-ignore\n          const { top: dragPos, height: size } = dragElement.getBoundingClientRect();\n          // prettier-ignore\n          const dropTarget = getNextDropTarget( dropTargets, dragPos, size, \"fwd\");\n          const index = dropTargets.indexOf(dropTarget);\n          const { start, end, mid } = dropTarget;\n\n          // need to compute the correct position of this\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          const draggedItem = (draggedItemRef.current = {\n            end,\n            mid,\n            start,\n            isDraggedItem: true,\n            isExternal: true,\n            size,\n          });\n\n          const indexOfDropTarget = dropTargets.indexOf(dropTarget);\n          // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n          // @ts-ignore\n          dropTargets.splice(indexOfDropTarget, 0, draggedItem);\n          for (let i = index + 1; i < dropTargets.length; i++) {\n            const target = dropTargets[i];\n            target.mid += size;\n            target.end += size;\n            target.start += size;\n          }\n\n          const displaceFunction = dropTarget.isLast\n            ? displaceLastItem\n            : displaceItem;\n\n          displaceFunction(\n            dropTargets,\n            dropTarget,\n            dropTarget.size,\n            true,\n            \"static\",\n          );\n        }\n      }\n    },\n    [\n      containerRef,\n      displaceItem,\n      displaceLastItem,\n      fullItemQuery,\n      orientation,\n      selected,\n      viewportRange,\n    ],\n  );\n\n  const [showPopup, hidePopup] = useMemo(() => {\n    let popupShowing = false;\n    const show = (dropTarget: MeasuredDropTarget) => {\n      if (!popupShowing) {\n        popupShowing = true;\n        const button = dropTarget.element.querySelector(\n          \".vuuPopupMenu\",\n        ) as HTMLElement;\n        if (button) {\n          dispatchMouseEvent(button, \"click\");\n        }\n      }\n    };\n\n    const hide = (dropTarget: MeasuredDropTarget) => {\n      if (popupShowing) {\n        popupShowing = false;\n        const button = dropTarget.element.querySelector(\n          \".vuuPopupMenu\",\n        ) as HTMLElement;\n        if (button) {\n          dispatchMouseEvent(button, \"click\");\n        }\n      }\n    };\n\n    return [show, hide];\n  }, []);\n\n  const drag = useCallback(\n    (dragPos: number, mouseMoveDirection: \"fwd\" | \"bwd\") => {\n      const { current: draggedItem } = draggedItemRef;\n      const { current: dragPosition } = dragPositionRef;\n\n      if (draggedItem) {\n        if (containerRef.current) {\n          dragPosRef.current = dragPos;\n\n          const { current: dropTargets } = measuredDropTargets;\n          const nextDropTarget = getNextDropTarget(\n            dropTargets,\n            dragPos,\n            draggedItem.size,\n            mouseMoveDirection,\n          );\n\n          if (nextDropTarget && !nextDropTarget.isDraggedItem) {\n            if (nextDropTarget.isOverflowIndicator) {\n              // Does this belong in here or can we abstract it out\n              setShowOverflow((overflowMenuShowingRef.current = true));\n              showPopup(nextDropTarget);\n            } else {\n              const { size } = draggedItem;\n              const targetIndex = indexOf(nextDropTarget);\n\n              const displaceFunc =\n                targetIndex === dropTargets.length - 1\n                  ? displaceLastItem\n                  : displaceItem;\n\n              dragPosition.insertionPosition = displaceFunc(\n                dropTargets,\n                nextDropTarget,\n                size,\n                true,\n                mouseMoveDirection,\n              );\n\n              const overflowIndicator = dropTargets.at(\n                -1,\n              ) as MeasuredDropTarget;\n              hidePopup(overflowIndicator);\n              setShowOverflow((overflowMenuShowingRef.current = false));\n            }\n          }\n          dragPosition.direction = mouseMoveDirection;\n        }\n      }\n    },\n    [containerRef, displaceItem, displaceLastItem, hidePopup, showPopup],\n  );\n\n  const drop = useCallback((): DropOptions => {\n    clearSpacers();\n    const { current: dropTargets } = measuredDropTargets;\n    const { current: dragPosition } = dragPositionRef;\n    const indexOfDraggedItem = getIndexOfDraggedItem(dropTargets);\n    const draggedItem = dropTargets[indexOfDraggedItem];\n    const { insertionPosition } = dragPosition;\n    const { index: fromIndex, isExternal } = draggedItem;\n\n    if (overflowMenuShowingRef.current) {\n      setShowOverflow(false);\n    }\n\n    dragPosition.direction = undefined;\n    dragPosition.insertionPosition = -1;\n\n    const isLastItem = indexOfDraggedItem === dropTargets.length - 1;\n    const toIndex = overflowMenuShowingRef.current\n      ? -1\n      : fromIndex < insertionPosition && !isLastItem\n        ? insertionPosition - 1\n        : insertionPosition;\n\n    return { fromIndex, toIndex, isExternal };\n  }, [clearSpacers]);\n\n  const releaseDrag = useCallback(() => {\n    clearSpacers(true);\n  }, [clearSpacers]);\n\n  return {\n    beginDrag,\n    drag,\n    drop,\n    handleScrollStart,\n    handleScrollStop,\n    releaseDrag,\n    revealOverflowedItems: showOverflow,\n  };\n};\n"],"names":["useRef","useState","useDragDisplacers","NOT_OVERFLOWED","NOT_HIDDEN","useCallback","getItemParentContainer","measureDropTargets","dimensions","getIndexOfDraggedItem","getNextDropTarget","useMemo","dispatchMouseEvent"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/drag-drop/useDropIndicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDropIndicator.js","sources":["../../../../../src/drag-drop/useDropIndicator.ts"],"sourcesContent":["import { useCallback, useMemo } from \"react\";\nimport { dropZone, MeasuredDropTarget } from \"./drop-target-utils\";\nimport { createDropIndicatorPosition } from \"./Draggable\";\n\nexport const SPACER_SIZE = 0;\n\nexport type DropIndicatorHookResult = {\n  positionDropIndicator: (\n    dropTarget: MeasuredDropTarget,\n    dropZone: dropZone\n  ) => HTMLElement;\n  clearSpacer: () => void;\n};\n\nexport type DropIndicatorHook = () => DropIndicatorHookResult;\n\nexport const useDropIndicator: DropIndicatorHook = () => {\n  const spacer = useMemo(() => createDropIndicatorPosition(), []);\n  const clearSpacer = useCallback(() => spacer.remove(), [spacer]);\n  const positionDropIndicator = useCallback(\n    (dropTarget: MeasuredDropTarget, dropZone: \"start\" | \"end\" = \"end\") => {\n      if (dropZone === \"end\") {\n        dropTarget.element.after(spacer);\n      } else {\n        dropTarget.element.before(spacer);\n      }\n      return spacer;\n    },\n    [spacer]\n  );\n\n  return {\n    positionDropIndicator,\n    clearSpacer,\n  };\n};\n"],"names":["useMemo","createDropIndicatorPosition","useCallback","dropZone"],"mappings":";;;;;AAgBO,MAAM,mBAAsC,MAAM;AACvD,EAAA,MAAM,SAASA,aAAQ,CAAA,MAAMC,qCAA4B,EAAA,EAAG,EAAE,CAAA;AAC9D,EAAM,MAAA,WAAA,GAAcC,kBAAY,MAAM,MAAA,CAAO,QAAU,EAAA,CAAC,MAAM,CAAC,CAAA;AAC/D,EAAA,MAAM,qBAAwB,GAAAA,iBAAA;AAAA,IAC5B,CAAC,UAAgCC,EAAAA,SAAAA,GAA4B,KAAU,KAAA;AACrE,MAAA,IAAIA,cAAa,KAAO,EAAA;AACtB,QAAW,UAAA,CAAA,OAAA,CAAQ,MAAM,MAAM,CAAA;AAAA,OAC1B,MAAA;AACL,QAAW,UAAA,CAAA,OAAA,CAAQ,OAAO,MAAM,CAAA;AAAA;AAElC,MAAO,OAAA,MAAA;AAAA,KACT;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAO,OAAA;AAAA,IACL,qBAAA;AAAA,IACA;AAAA,GACF;AACF;;;;"}

package/cjs/packages/vuu-ui-controls/src/drag-drop/useGlobalDragDrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGlobalDragDrop.js","sources":["../../../../../src/drag-drop/useGlobalDragDrop.ts"],"sourcesContent":["import { boxContainsPoint, dispatchCustomEvent } from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useRef } from \"react\";\nimport { MeasuredTarget } from \"./DragDropProvider\";\nimport { DragDropState } from \"./DragDropState\";\nimport { MouseOffset } from \"./dragDropTypes\";\n\nexport type ResumeDragHandler = (dragDropState: DragDropState) => boolean;\nexport type GlobalDropHandler = (dragDropState: DragDropState) => void;\n\nexport const useGlobalDragDrop = ({\n  onDragOverDropTarget,\n  onDrop,\n}: {\n  onDragOverDropTarget: (\n    dropTargetId: string,\n    dragDropState: DragDropState,\n  ) => boolean;\n  onDrop: (dropTargetId: string, dragDropState: DragDropState) => void;\n}) => {\n  const dropTargetRef = useRef<string>(undefined);\n  const measuredDropTargetsRef =\n    useRef<Record<string, MeasuredTarget>>(undefined);\n\n  const dragDropStateRef = useRef<DragDropState | null>(null);\n  /** current mouse position */\n  const mousePosRef = useRef<MouseOffset>({ x: 0, y: 0 });\n\n  const overDropTarget = useCallback((x: number, y: number) => {\n    const { current: dropTargets } = measuredDropTargetsRef;\n    if (dropTargets) {\n      for (const [id, measuredTarget] of Object.entries(dropTargets)) {\n        if (boxContainsPoint(measuredTarget, x, y)) {\n          return id;\n        }\n      }\n    }\n    return undefined;\n  }, []);\n\n  const dragMouseMoveHandler = useCallback(\n    (evt: MouseEvent) => {\n      const { clientX, clientY } = evt;\n      const { current: dragDropState } = dragDropStateRef;\n\n      mousePosRef.current.x = clientX;\n      mousePosRef.current.y = clientY;\n\n      if (dragDropState?.draggableElement) {\n        const { draggableElement, mouseOffset } = dragDropState;\n\n        const dragPosX = mousePosRef.current.x - mouseOffset.x;\n        const dragPosY = mousePosRef.current.y - mouseOffset.y;\n        draggableElement.style.top = `${dragPosY}px`;\n        draggableElement.style.left = `${dragPosX}px`;\n\n        const dropTargetId = overDropTarget(dragPosX, dragPosY);\n        if (dropTargetId) {\n          const dropTargetWillResumeDrag = onDragOverDropTarget(\n            dropTargetId,\n            dragDropState,\n          );\n          if (dropTargetWillResumeDrag) {\n            // prettier-ignore\n            document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n            document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n            dragDropStateRef.current = null;\n            dropTargetRef.current = undefined;\n          } else {\n            dropTargetRef.current = dropTargetId;\n          }\n        } else {\n          dropTargetRef.current = undefined;\n        }\n      }\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [],\n  );\n\n  const dragMouseUpHandler = useCallback(() => {\n    document.removeEventListener(\"mousemove\", dragMouseMoveHandler, false);\n    document.removeEventListener(\"mouseup\", dragMouseUpHandler, false);\n    const { current: dragDropState } = dragDropStateRef;\n    if (dragDropState) {\n      dragDropStateRef.current = null;\n      if (dropTargetRef.current) {\n        onDrop(dropTargetRef.current, dragDropState);\n      }\n      if (dragDropState.draggableElement) {\n        dispatchCustomEvent(dragDropState.draggableElement, \"vuu-dropped\");\n      }\n    }\n  }, [dragMouseMoveHandler, onDrop]);\n\n  const resumeDrag = useCallback<ResumeDragHandler>(\n    (dragDropState) => {\n      dragDropStateRef.current = dragDropState;\n      document.addEventListener(\"mousemove\", dragMouseMoveHandler, false);\n      document.addEventListener(\"mouseup\", dragMouseUpHandler, false);\n\n      return true;\n    },\n    [dragMouseMoveHandler, dragMouseUpHandler],\n  );\n\n  return {\n    measuredDropTargetsRef,\n    resumeDrag,\n  };\n};\n"],"names":["useRef","useCallback","boxContainsPoint","dispatchCustomEvent"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/editable/useEditableText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useEditableText.js","sources":["../../../../../src/editable/useEditableText.ts"],"sourcesContent":["import type { DataValueValidationChecker } from \"@vuu-ui/vuu-data-types\";\nimport { VuuRowDataItemType } from \"@vuu-ui/vuu-protocol-types\";\nimport type { DataItemEditHandler } from \"@vuu-ui/vuu-table-types\";\nimport { dispatchCustomEvent, getTypedValue } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  FormEventHandler,\n  KeyboardEvent,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nexport interface EditableTextHookProps<\n  T extends VuuRowDataItemType = VuuRowDataItemType,\n> {\n  clientSideEditValidationCheck?: DataValueValidationChecker;\n  value?: T;\n  onEdit?: DataItemEditHandler;\n  type?: \"string\" | \"number\" | \"boolean\";\n}\n\ntype EditState = {\n  message?: string;\n  value: string;\n};\n\nconst stringValueOf = (value?: VuuRowDataItemType) => value?.toString() ?? \"\";\n\nexport const useEditableText = <T extends string | number | boolean = string>({\n  clientSideEditValidationCheck,\n  value,\n  onEdit,\n  type = \"string\",\n}: EditableTextHookProps<T>) => {\n  // console.log(\"initial value: \", initialValue);\n  const [editState, setEditState] = useState<EditState>({\n    value: stringValueOf(value),\n  });\n  // console.log(\"edit state: \", editState);\n  const initialValueRef = useRef<string>(value?.toString() ?? \"\");\n  const isDirtyRef = useRef(false);\n\n  useMemo(() => {\n    if (initialValueRef.current !== value?.toString()) {\n      initialValueRef.current = stringValueOf(value);\n      setEditState({ message: \"\", value: stringValueOf(value) });\n      console.log(\"initial value changed to: \", value);\n    }\n  }, [value]);\n\n  const commit = useCallback(\n    async (target: HTMLElement) => {\n      const { value } = editState;\n      if (isDirtyRef.current) {\n        const result = clientSideEditValidationCheck?.(value, \"*\");\n        if (result?.ok === false) {\n          setEditState((state) => ({\n            ...state,\n            message: result?.messages?.join(\",\"),\n          }));\n        } else {\n          setEditState((state) => ({ ...state, message: undefined }));\n          const response = await onEdit?.(\n            { editType: \"commit\", value, isValid: true },\n            \"commit\",\n          );\n          if (response === true) {\n            isDirtyRef.current = false;\n            initialValueRef.current = value;\n            dispatchCustomEvent(target, \"vuu-commit\");\n          } else if (typeof response === \"string\") {\n            setEditState((state) => ({ ...state, message: response }));\n          }\n        }\n      } else {\n        // why, if not dirty ?\n        dispatchCustomEvent(target, \"vuu-commit\");\n      }\n    },\n    [clientSideEditValidationCheck, editState, onEdit],\n  );\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent<HTMLElement>) => {\n      if (evt.key === \"Enter\") {\n        commit(evt.target as HTMLElement);\n      } else if (\n        evt.key === \"ArrowRight\" ||\n        evt.key === \"ArrowLeft\" ||\n        evt.key === \"ArrowUp\" ||\n        evt.key === \"ArrowDown\"\n      ) {\n        evt.stopPropagation();\n      } else if (evt.key === \"Escape\") {\n        if (isDirtyRef.current) {\n          const { value: previousValue } = editState;\n          isDirtyRef.current = false;\n          setEditState({ value: initialValueRef.current, message: undefined });\n          // this assumes the original value was valid, is that safe ?\n          onEdit?.(\n            {\n              editType: \"cancel\",\n              isValid: true,\n              previousValue,\n              value: initialValueRef.current,\n            },\n            \"cancel\",\n          );\n        }\n      }\n    },\n    [commit, editState, onEdit],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (evt) => {\n      if (isDirtyRef.current) {\n        commit(evt.target as HTMLElement);\n      }\n    },\n    [commit],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const typedValue = getTypedValue(value, type);\n      console.log(\n        `[useEditableText] handleChange '${value}' typedValue ${typedValue}\n          initial value ${initialValueRef.current}\n        `,\n      );\n      isDirtyRef.current = value !== initialValueRef.current;\n      const result = clientSideEditValidationCheck?.(value, \"change\");\n      console.log({ result, value });\n      setEditState({ value });\n\n      onEdit?.(\n        { editType: \"change\", isValid: result?.ok !== false, value },\n        \"change\",\n      );\n      if (result?.ok === false) {\n        console.log(\"cell fails validation\");\n        setEditState({ value, message: result.messages?.join(\",\") });\n      }\n    },\n    [clientSideEditValidationCheck, onEdit, type],\n  );\n\n  return {\n    //TODO why are we detecting commit here, why not use VuuInput ?\n    inputProps: {\n      onBlur: handleBlur,\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleChange,\n    value: editState.value,\n    warningMessage: editState.message,\n  };\n};\n"],"names":["useState","useRef","useMemo","useCallback","value","dispatchCustomEvent","getTypedValue"],"mappings":";;;;;AA4BA,MAAM,aAAgB,GAAA,CAAC,KAA+B,KAAA,KAAA,EAAO,UAAc,IAAA,EAAA;AAEpE,MAAM,kBAAkB,CAA+C;AAAA,EAC5E,6BAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAO,GAAA;AACT,CAAgC,KAAA;AAE9B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,cAAoB,CAAA;AAAA,IACpD,KAAA,EAAO,cAAc,KAAK;AAAA,GAC3B,CAAA;AAED,EAAA,MAAM,eAAkB,GAAAC,YAAA,CAAe,KAAO,EAAA,QAAA,MAAc,EAAE,CAAA;AAC9D,EAAM,MAAA,UAAA,GAAaA,aAAO,KAAK,CAAA;AAE/B,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,eAAgB,CAAA,OAAA,KAAY,KAAO,EAAA,QAAA,EAAY,EAAA;AACjD,MAAgB,eAAA,CAAA,OAAA,GAAU,cAAc,KAAK,CAAA;AAC7C,MAAA,YAAA,CAAa,EAAE,OAAS,EAAA,EAAA,EAAI,OAAO,aAAc,CAAA,KAAK,GAAG,CAAA;AACzD,MAAQ,OAAA,CAAA,GAAA,CAAI,8BAA8B,KAAK,CAAA;AAAA;AACjD,GACF,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,MAAS,GAAAC,iBAAA;AAAA,IACb,OAAO,MAAwB,KAAA;AAC7B,MAAM,MAAA,EAAE,KAAAC,EAAAA,MAAAA,EAAU,GAAA,SAAA;AAClB,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,MAAA,GAAS,6BAAgCA,GAAAA,MAAAA,EAAO,GAAG,CAAA;AACzD,QAAI,IAAA,MAAA,EAAQ,OAAO,KAAO,EAAA;AACxB,UAAA,YAAA,CAAa,CAAC,KAAW,MAAA;AAAA,YACvB,GAAG,KAAA;AAAA,YACH,OAAS,EAAA,MAAA,EAAQ,QAAU,EAAA,IAAA,CAAK,GAAG;AAAA,WACnC,CAAA,CAAA;AAAA,SACG,MAAA;AACL,UAAA,YAAA,CAAa,CAAC,KAAW,MAAA,EAAE,GAAG,KAAO,EAAA,OAAA,EAAS,QAAY,CAAA,CAAA;AAC1D,UAAA,MAAM,WAAW,MAAM,MAAA;AAAA,YACrB,EAAE,QAAU,EAAA,QAAA,EAAU,KAAAA,EAAAA,MAAAA,EAAO,SAAS,IAAK,EAAA;AAAA,YAC3C;AAAA,WACF;AACA,UAAA,IAAI,aAAa,IAAM,EAAA;AACrB,YAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AACrB,YAAA,eAAA,CAAgB,OAAUA,GAAAA,MAAAA;AAC1B,YAAAC,4BAAA,CAAoB,QAAQ,YAAY,CAAA;AAAA,WAC1C,MAAA,IAAW,OAAO,QAAA,KAAa,QAAU,EAAA;AACvC,YAAA,YAAA,CAAa,CAAC,KAAW,MAAA,EAAE,GAAG,KAAO,EAAA,OAAA,EAAS,UAAW,CAAA,CAAA;AAAA;AAC3D;AACF,OACK,MAAA;AAEL,QAAAA,4BAAA,CAAoB,QAAQ,YAAY,CAAA;AAAA;AAC1C,KACF;AAAA,IACA,CAAC,6BAA+B,EAAA,SAAA,EAAW,MAAM;AAAA,GACnD;AAEA,EAAA,MAAM,aAAgB,GAAAF,iBAAA;AAAA,IACpB,CAAC,GAAoC,KAAA;AACnC,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,MAAA,CAAO,IAAI,MAAqB,CAAA;AAAA,OAEhC,MAAA,IAAA,GAAA,CAAI,GAAQ,KAAA,YAAA,IACZ,GAAI,CAAA,GAAA,KAAQ,WACZ,IAAA,GAAA,CAAI,GAAQ,KAAA,SAAA,IACZ,GAAI,CAAA,GAAA,KAAQ,WACZ,EAAA;AACA,QAAA,GAAA,CAAI,eAAgB,EAAA;AAAA,OACtB,MAAA,IAAW,GAAI,CAAA,GAAA,KAAQ,QAAU,EAAA;AAC/B,QAAA,IAAI,WAAW,OAAS,EAAA;AACtB,UAAM,MAAA,EAAE,KAAO,EAAA,aAAA,EAAkB,GAAA,SAAA;AACjC,UAAA,UAAA,CAAW,OAAU,GAAA,KAAA;AACrB,UAAA,YAAA,CAAa,EAAE,KAAO,EAAA,eAAA,CAAgB,OAAS,EAAA,OAAA,EAAS,QAAW,CAAA;AAEnE,UAAA,MAAA;AAAA,YACE;AAAA,cACE,QAAU,EAAA,QAAA;AAAA,cACV,OAAS,EAAA,IAAA;AAAA,cACT,aAAA;AAAA,cACA,OAAO,eAAgB,CAAA;AAAA,aACzB;AAAA,YACA;AAAA,WACF;AAAA;AACF;AACF,KACF;AAAA,IACA,CAAC,MAAQ,EAAA,SAAA,EAAW,MAAM;AAAA,GAC5B;AAEA,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,GAAQ,KAAA;AACP,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAA,MAAA,CAAO,IAAI,MAAqB,CAAA;AAAA;AAClC,KACF;AAAA,IACA,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,MAAM,YAAe,GAAAA,iBAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAA,MAAM,EAAE,KAAA,EAAAC,MAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAM,MAAA,UAAA,GAAaE,sBAAcF,CAAAA,MAAAA,EAAO,IAAI,CAAA;AAC5C,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,gCAAA,EAAmCA,MAAK,CAAA,aAAA,EAAgB,UAAU;AAAA,wBAAA,EAChD,gBAAgB,OAAO;AAAA,QAAA;AAAA,OAE3C;AACA,MAAW,UAAA,CAAA,OAAA,GAAUA,WAAU,eAAgB,CAAA,OAAA;AAC/C,MAAM,MAAA,MAAA,GAAS,6BAAgCA,GAAAA,MAAAA,EAAO,QAAQ,CAAA;AAC9D,MAAA,OAAA,CAAQ,GAAI,CAAA,EAAE,MAAQ,EAAA,KAAA,EAAAA,QAAO,CAAA;AAC7B,MAAa,YAAA,CAAA,EAAE,KAAAA,EAAAA,MAAAA,EAAO,CAAA;AAEtB,MAAA,MAAA;AAAA,QACE,EAAE,UAAU,QAAU,EAAA,OAAA,EAAS,QAAQ,EAAO,KAAA,KAAA,EAAO,OAAAA,MAAM,EAAA;AAAA,QAC3D;AAAA,OACF;AACA,MAAI,IAAA,MAAA,EAAQ,OAAO,KAAO,EAAA;AACxB,QAAA,OAAA,CAAQ,IAAI,uBAAuB,CAAA;AACnC,QAAa,YAAA,CAAA,EAAE,OAAAA,MAAO,EAAA,OAAA,EAAS,OAAO,QAAU,EAAA,IAAA,CAAK,GAAG,CAAA,EAAG,CAAA;AAAA;AAC7D,KACF;AAAA,IACA,CAAC,6BAA+B,EAAA,MAAA,EAAQ,IAAI;AAAA,GAC9C;AAEA,EAAO,OAAA;AAAA;AAAA,IAEL,UAAY,EAAA;AAAA,MACV,MAAQ,EAAA,UAAA;AAAA,MACR,SAAW,EAAA;AAAA,KACb;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV,OAAO,SAAU,CAAA,KAAA;AAAA,IACjB,gBAAgB,SAAU,CAAA;AAAA,GAC5B;AACF;;;;"}

package/cjs/packages/vuu-ui-controls/src/editable-label/EditableLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableLabel.js","sources":["../../../../../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport {\n  ChangeEvent,\n  KeyboardEvent,\n  useCallback,\n  useLayoutEffect,\n  forwardRef,\n  ForwardedRef,\n  ReactElement,\n  useRef,\n  HTMLAttributes,\n  useImperativeHandle,\n} from \"react\";\nimport { Input, useControlled } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport editableLabelCss from \"./EditableLabel.css\";\n\nconst classBase = \"vuuEditableLabel\";\n\nexport type ExitEditModeHandler = (\n  originalLabel: string | undefined,\n  editedLabel: string | undefined,\n  allowDeactivation?: boolean,\n  editCancelled?: boolean,\n) => void;\n\nexport interface EditAPI {\n  beginEdit: () => void;\n}\n\nexport const NullEditAPI: EditAPI = {\n  beginEdit: () => undefined,\n};\n\nexport interface EditableLabelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  className?: string;\n  defaultEditing?: boolean;\n  defaultValue?: string;\n  editLabelApiRef?: ForwardedRef<EditAPI>;\n  editing?: boolean;\n  onEnterEditMode?: () => void;\n  onChange?: (value: string) => void;\n  onExitEditMode: ExitEditModeHandler;\n  defaultIsEditing?: boolean;\n  value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n  {\n    className: classNameProp,\n    defaultEditing,\n    defaultValue,\n    editLabelApiRef,\n    editing: editingProp,\n    onChange,\n    onEnterEditMode,\n    onExitEditMode,\n    value: valueProp,\n    ...restProps\n  }: EditableLabelProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n): ReactElement<EditableLabelProps> {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-editable-label\",\n    css: editableLabelCss,\n    window: targetWindow,\n  });\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const editingRef = useRef<boolean>(false);\n\n  const [value, setValue] = useControlled({\n    controlled: valueProp,\n    default: defaultValue ?? \"\",\n    name: \"EditableLabel\",\n    state: \"value\",\n  });\n\n  const [editing, _setEditing] = useControlled({\n    controlled: editingProp,\n    default: defaultEditing ?? false,\n    name: \"EditableLabel\",\n    state: \"editing\",\n  });\n\n  const setEditing = useCallback(\n    (value: boolean) => {\n      _setEditing((editingRef.current = value));\n    },\n    [_setEditing],\n  );\n\n  const initialValue = useRef(value);\n\n  useLayoutEffect(() => {\n    if (editing) {\n      if (inputRef.current !== null) {\n        inputRef.current.select();\n        inputRef.current.focus();\n      }\n    }\n  }, [editing, inputRef]);\n\n  const beginEdit = useCallback(() => {\n    setEditing(true);\n    onEnterEditMode?.();\n  }, [onEnterEditMode, setEditing]);\n\n  useImperativeHandle(\n    editLabelApiRef,\n    () => ({\n      beginEdit,\n    }),\n    [beginEdit],\n  );\n\n  const exitEditMode = useCallback(\n    ({ cancelEdit = false, allowDeactivation = false } = {}) => {\n      setEditing(false);\n      const originalValue = initialValue.current;\n      if (cancelEdit || originalValue === value) {\n        if (originalValue !== value) {\n          setValue(originalValue);\n        }\n        onExitEditMode?.(\n          originalValue,\n          originalValue,\n          allowDeactivation,\n          cancelEdit,\n        );\n      } else {\n        initialValue.current = value;\n        onExitEditMode?.(originalValue, value, allowDeactivation, cancelEdit);\n      }\n    },\n    [onExitEditMode, setEditing, setValue, value],\n  );\n\n  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n    const { value } = evt.target;\n    setValue(value);\n    onChange && onChange(value);\n  };\n\n  // We need the ref here as the blur fires before setEditing has taken effect,\n  // so we get a double call to exitEditMode if edit is cancelled.\n  const handleBlur = useCallback(() => {\n    if (editingRef.current) {\n      exitEditMode({ allowDeactivation: true });\n    }\n  }, [exitEditMode]);\n\n  const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n    if (editing && evt.key === \"Enter\") {\n      evt.stopPropagation();\n      // we are likely to lose focus as a consequence of user response\n      // to exitEdit transition, don't want it to trigger another\n      //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n      exitEditMode();\n    } else if (evt.key === \"ArrowRight\" || evt.key === \"ArrowLeft\") {\n      evt.stopPropagation();\n    } else if (evt.key === \"Escape\") {\n      exitEditMode({ cancelEdit: true });\n    }\n  };\n\n  const className = cx(classBase, classNameProp, {\n    [`${classBase}-editing`]: editing,\n  });\n  return (\n    <div\n      {...restProps}\n      className={className}\n      data-text={value}\n      ref={forwardedRef}\n    >\n      {editing ? (\n        <Input\n          inputProps={{ className: `${classBase}-input`, spellCheck: false }}\n          value={value}\n          onBlur={handleBlur}\n          onChange={handleChange}\n          onKeyDown={handleKeyDown}\n          inputRef={inputRef}\n          textAlign=\"left\"\n          variant=\"secondary\"\n        />\n      ) : (\n        <span className={`${classBase}-label`}>{value}</span>\n      )}\n    </div>\n  );\n});\n"],"names":["forwardRef","EditableLabel","useWindow","useComponentCssInjection","editableLabelCss","useRef","useControlled","useCallback","value","useLayoutEffect","useImperativeHandle","jsx","Input"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/expando-input/ExpandoInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandoInput.js","sources":["../../../../../src/expando-input/ExpandoInput.tsx"],"sourcesContent":["import { CommitHandler } from \"@vuu-ui/vuu-utils\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { ForwardedRef, forwardRef } from \"react\";\nimport { VuuInput, VuuInputProps } from \"../vuu-input\";\nimport expandoInputCss from \"./ExpandoInput.css\";\n\nconst classBase = \"vuuExpandoInput\";\n\nconst noop = () => undefined;\n\nexport interface ExpandoInputProps extends Omit<VuuInputProps, \"onCommit\"> {\n  onCommit?: CommitHandler;\n}\n\nexport const ExpandoInput = forwardRef(function ExpandoInput(\n  {\n    className: classNameProp,\n    errorMessage,\n    value,\n    inputProps,\n    onCommit = noop,\n    ...props\n  }: ExpandoInputProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-expando-input\",\n    css: expandoInputCss,\n    window: targetWindow,\n  });\n\n  return (\n    <div\n      className={cx(classBase, classNameProp, {\n        [`${classBase}-error`]: errorMessage,\n      })}\n      data-text={value}\n    >\n      <VuuInput\n        {...props}\n        errorMessage={errorMessage}\n        inputProps={{ ...inputProps, className: `${classBase}-input` }}\n        onCommit={onCommit}\n        ref={forwardedRef}\n        style={{ padding: 0 }}\n        textAlign=\"left\"\n        value={value}\n        variant=\"secondary\"\n      />\n    </div>\n  );\n});\n"],"names":["forwardRef","ExpandoInput","useWindow","useComponentCssInjection","expandoInputCss","jsx","VuuInput"],"mappings":";;;;;;;;;;AAQA,MAAM,SAAY,GAAA,iBAAA;AAElB,MAAM,OAAO,MAAM,KAAA,CAAA;AAMN,MAAA,YAAA,GAAeA,gBAAW,CAAA,SAASC,aAC9C,CAAA;AAAA,EACE,SAAW,EAAA,aAAA;AAAA,EACX,YAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,QAAW,GAAA,IAAA;AAAA,EACX,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,mBAAA;AAAA,IACR,GAAK,EAAAC,cAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,QACtC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,OACzB,CAAA;AAAA,MACD,WAAW,EAAA,KAAA;AAAA,MAEX,QAAA,kBAAAA,cAAA;AAAA,QAACC,iBAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA;AAAA,UACA,YAAY,EAAE,GAAG,YAAY,SAAW,EAAA,CAAA,EAAG,SAAS,CAAS,MAAA,CAAA,EAAA;AAAA,UAC7D,QAAA;AAAA,UACA,GAAK,EAAA,YAAA;AAAA,UACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,UACpB,SAAU,EAAA,MAAA;AAAA,UACV,KAAA;AAAA,UACA,OAAQ,EAAA;AAAA;AAAA;AACV;AAAA,GACF;AAEJ,CAAC;;;;"}

package/cjs/packages/vuu-ui-controls/src/icon-button/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../../../../../src/icon-button/Icon.tsx"],"sourcesContent":["import { HTMLAttributes } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport iconCss from \"./Icon.css\";\n\nconst classBase = \"vuuIcon\";\n\nexport interface IconProps extends HTMLAttributes<HTMLSpanElement> {\n  name: string;\n  size?: number;\n}\n\nexport const Icon = ({\n  className,\n  name,\n  size,\n  style: styleProp,\n  ...htmlAttributes\n}: IconProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-icon\",\n    css: iconCss,\n    window: targetWindow,\n  });\n\n  const style =\n    typeof size === \"number\"\n      ? { ...styleProp, \"--vuu-icon-size\": `${size}px` }\n      : styleProp;\n  return (\n    <span\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      data-icon={name}\n      role=\"img\"\n      style={style}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","iconCss","jsx"],"mappings":";;;;;;;;AAOA,MAAM,SAAY,GAAA,SAAA;AAOX,MAAM,OAAO,CAAC;AAAA,EACnB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAO,EAAA,SAAA;AAAA,EACP,GAAG;AACL,CAAiB,KAAA;AACf,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,UAAA;AAAA,IACR,GAAK,EAAAC,MAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,KAAA,GACJ,OAAO,IAAA,KAAS,QACZ,GAAA,EAAE,GAAG,SAAA,EAAW,iBAAmB,EAAA,CAAA,EAAG,IAAI,CAAA,EAAA,CAAA,EAC1C,GAAA,SAAA;AACN,EACE,uBAAAC,cAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,WAAW,EAAA,IAAA;AAAA,MACX,IAAK,EAAA,KAAA;AAAA,MACL;AAAA;AAAA,GACF;AAEJ;;;;"}

package/cjs/packages/vuu-ui-controls/src/icon-button/IconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButton.js","sources":["../../../../../src/icon-button/IconButton.tsx"],"sourcesContent":["import cx from \"clsx\";\nimport { Button, ButtonProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { Icon } from \"./Icon\";\nimport { forwardRef } from \"react\";\n\nimport iconButtonCss from \"./IconButton.css\";\n\nconst classBase = \"vuuIconButton\";\n\nexport interface IconButtonProps extends Omit<ButtonProps, \"children\"> {\n  icon: string;\n  size?: number;\n}\n\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n  function IconButton(\n    { \"aria-label\": ariaLabel, className, icon, size, ...buttonProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-icon-button\",\n      css: iconButtonCss,\n      window: targetWindow,\n    });\n\n    return (\n      <Button {...buttonProps} className={cx(classBase, className)} ref={ref}>\n        <Icon aria-label={ariaLabel} name={icon} size={size} />\n      </Button>\n    );\n  }\n);\n"],"names":["forwardRef","IconButton","useWindow","useComponentCssInjection","iconButtonCss","Button","Icon"],"mappings":";;;;;;;;;;;AASA,MAAM,SAAY,GAAA,eAAA;AAOX,MAAM,UAAa,GAAAA,gBAAA;AAAA,EACxB,SAASC,WACP,CAAA,EAAE,YAAc,EAAA,SAAA,EAAW,SAAW,EAAA,IAAA,EAAM,IAAM,EAAA,GAAG,WAAY,EAAA,EACjE,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,sCACGC,WAAQ,EAAA,EAAA,GAAG,WAAa,EAAA,SAAA,EAAW,GAAG,SAAW,EAAA,SAAS,CAAG,EAAA,GAAA,EAC5D,yCAACC,SAAK,EAAA,EAAA,YAAA,EAAY,WAAW,IAAM,EAAA,IAAA,EAAM,MAAY,CACvD,EAAA,CAAA;AAAA;AAGN;;;;"}

package/cjs/packages/vuu-ui-controls/src/icon-button/ToggleIconButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleIconButton.js","sources":["../../../../../src/icon-button/ToggleIconButton.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { IconButton, IconButtonProps } from \"./IconButton\";\n\nimport toggleIconCss from \"./ToggleIconButton.css\";\n\nconst classBase = \"vuuToggleIconButton\";\n\nexport interface ToggleIconButtonProps extends Omit<IconButtonProps, \"icon\"> {\n  isExpanded: boolean;\n}\n\nexport const ToggleIconButton = ({\n  className,\n  isExpanded,\n  size = 7,\n  variant = \"secondary\",\n  ...props\n}: ToggleIconButtonProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-toggle-icon-button\",\n    css: toggleIconCss,\n    window: targetWindow,\n  });\n\n  const icon = isExpanded ? \"triangle-down\" : \"triangle-right\";\n  return (\n    <IconButton\n      {...props}\n      className={cx(classBase, className)}\n      icon={icon}\n      size={size}\n      variant={variant}\n    />\n  );\n};\n"],"names":["useWindow","useComponentCssInjection","toggleIconCss","jsx","IconButton"],"mappings":";;;;;;;;;AAOA,MAAM,SAAY,GAAA,qBAAA;AAMX,MAAM,mBAAmB,CAAC;AAAA,EAC/B,SAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAO,GAAA,CAAA;AAAA,EACP,OAAU,GAAA,WAAA;AAAA,EACV,GAAG;AACL,CAA6B,KAAA;AAC3B,EAAA,MAAM,eAAeA,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,kBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,IAAA,GAAO,aAAa,eAAkB,GAAA,gBAAA;AAC5C,EACE,uBAAAC,cAAA;AAAA,IAACC,qBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,IAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/cjs/packages/vuu-ui-controls/src/index.js

@@ -0,0 +1,158 @@
+'use strict';
+
+var Calendar = require('./calendar/Calendar.js');
+var useCalendarDay = require('./calendar/useCalendarDay.js');
+var useCalendar = require('./calendar/useCalendar.js');
+var useSelection = require('./calendar/useSelection.js');
+var ColumnPicker = require('./column-picker/ColumnPicker.js');
+var ColumnSearch = require('./column-picker/ColumnSearch.js');
+var useControlled = require('./common-hooks/useControlled.js');
+var useResizeObserver = require('./common-hooks/use-resize-observer.js');
+var selectionTypes = require('./common-hooks/selectionTypes.js');
+var CycleStateButton = require('./cycle-state-button/CycleStateButton.js');
+var DateInput = require('./date-input/DateInput.js');
+var DatePicker = require('./date-picker/DatePicker.js');
+var dragDropTypes = require('./drag-drop/dragDropTypes.js');
+var DragDropProvider = require('./drag-drop/DragDropProvider.js');
+var DragDropState = require('./drag-drop/DragDropState.js');
+var useDragDrop = require('./drag-drop/useDragDrop.js');
+var dropTargetUtils = require('./drag-drop/drop-target-utils.js');
+var useGlobalDragDrop = require('./drag-drop/useGlobalDragDrop.js');
+var useEditableText = require('./editable/useEditableText.js');
+var EditableLabel = require('./editable-label/EditableLabel.js');
+var ExpandoInput = require('./expando-input/ExpandoInput.js');
+var Icon = require('./icon-button/Icon.js');
+var IconButton = require('./icon-button/IconButton.js');
+var ToggleIconButton = require('./icon-button/ToggleIconButton.js');
+var TablePicker = require('./instrument-picker/TablePicker.js');
+var TableSearch = require('./table-search/TableSearch.js');
+var MeasuredContainer = require('./measured-container/MeasuredContainer.js');
+var useMeasuredContainer = require('./measured-container/useMeasuredContainer.js');
+var OverflowContainer = require('./overflow-container/OverflowContainer.js');
+var overflowUtils = require('./overflow-container/overflow-utils.js');
+var PriceTicker = require('./price-ticker/PriceTicker.js');
+var SplitButton = require('./split-button/SplitButton.js');
+var SplitStateButton = require('./split-button/SplitStateButton.js');
+var TabNext = require('./tabs-next/TabNext.js');
+var TabListNext = require('./tabs-next/TabListNext.js');
+var TabsNext = require('./tabs-next/TabsNext.js');
+var TabNextPanel = require('./tabs-next/TabNextPanel.js');
+var TabBar = require('./tabs-next/TabBar.js');
+var TabNextTrigger = require('./tabs-next/TabNextTrigger.js');
+var TabNextAction = require('./tabs-next/TabNextAction.js');
+var Tabstrip = require('./tabstrip/Tabstrip.js');
+var Tab = require('./tabstrip/Tab.js');
+var tabstripDomUtils = require('./tabstrip/tabstrip-dom-utils.js');
+var Toolbar = require('./toolbar/Toolbar.js');
+var escapeRegExp = require('./utils/escapeRegExp.js');
+var isOverflowElement = require('./utils/isOverflowElement.js');
+var isPlainObject = require('./utils/isPlainObject.js');
+var forwardCallbackProps = require('./utils/forwardCallbackProps.js');
+var VuuDatePicker = require('./vuu-date-picker/VuuDatePicker.js');
+var VuuInput = require('./vuu-input/VuuInput.js');
+var VuuTypeaheadInput = require('./vuu-typeahead-input/VuuTypeaheadInput.js');
+var ContextPanelProvider = require('./context-panel-provider/ContextPanelProvider.js');
+var SortableList = require('./sortable-list/SortableList.js');
+
+
+
+exports.Calendar = Calendar.Calendar;
+exports.useCalendarDay = useCalendarDay.useCalendarDay;
+exports.useCalendar = useCalendar.useCalendar;
+exports.isRangeOrOffsetSelectionValue = useSelection.isRangeOrOffsetSelectionValue;
+exports.isRangeOrOffsetSelectionWithStartDate = useSelection.isRangeOrOffsetSelectionWithStartDate;
+exports.useSelectionCalendar = useSelection.useSelectionCalendar;
+exports.useSelectionDay = useSelection.useSelectionDay;
+exports.ColumnPicker = ColumnPicker.ColumnPicker;
+exports.ColumnSearch = ColumnSearch.ColumnSearch;
+exports.useControlled = useControlled.useControlled;
+exports.HeightOnly = useResizeObserver.HeightOnly;
+exports.WidthHeight = useResizeObserver.WidthHeight;
+exports.WidthOnly = useResizeObserver.WidthOnly;
+exports.useResizeObserver = useResizeObserver.useResizeObserver;
+exports.allowMultipleSelection = selectionTypes.allowMultipleSelection;
+exports.deselectionIsAllowed = selectionTypes.deselectionIsAllowed;
+exports.getFirstSelectedItem = selectionTypes.getFirstSelectedItem;
+exports.hasSelection = selectionTypes.hasSelection;
+exports.isMultiSelection = selectionTypes.isMultiSelection;
+exports.isSingleSelection = selectionTypes.isSingleSelection;
+exports.selectionIsDisallowed = selectionTypes.selectionIsDisallowed;
+exports.CycleStateButton = CycleStateButton.CycleStateButton;
+exports.DateInput = DateInput.DateInput;
+exports.DatePicker = DatePicker.DatePicker;
+exports.BWD = dragDropTypes.BWD;
+exports.FWD = dragDropTypes.FWD;
+exports.DragDropProvider = DragDropProvider.DragDropProvider;
+exports.useDragDropProvider = DragDropProvider.useDragDropProvider;
+exports.DragDropState = DragDropState.DragDropState;
+exports.useDragDrop = useDragDrop.useDragDrop;
+exports.NOT_HIDDEN = dropTargetUtils.NOT_HIDDEN;
+exports.NOT_OVERFLOWED = dropTargetUtils.NOT_OVERFLOWED;
+exports.cloneElement = dropTargetUtils.cloneElement;
+exports.constrainRect = dropTargetUtils.constrainRect;
+exports.dimensions = dropTargetUtils.dimensions;
+exports.dropTargetsDebugString = dropTargetUtils.dropTargetsDebugString;
+exports.getIndexOfDraggedItem = dropTargetUtils.getIndexOfDraggedItem;
+exports.getItemById = dropTargetUtils.getItemById;
+exports.getItemParentContainer = dropTargetUtils.getItemParentContainer;
+exports.getNextDropTarget = dropTargetUtils.getNextDropTarget;
+exports.getScrollableContainer = dropTargetUtils.getScrollableContainer;
+exports.isContainerScrollable = dropTargetUtils.isContainerScrollable;
+exports.measureDropTargets = dropTargetUtils.measureDropTargets;
+exports.measureElementSizeAndPosition = dropTargetUtils.measureElementSizeAndPosition;
+exports.mutateDropTargetsSwitchDropTargetPosition = dropTargetUtils.mutateDropTargetsSwitchDropTargetPosition;
+exports.removeDraggedItem = dropTargetUtils.removeDraggedItem;
+exports.useGlobalDragDrop = useGlobalDragDrop.useGlobalDragDrop;
+exports.useEditableText = useEditableText.useEditableText;
+exports.EditableLabel = EditableLabel.EditableLabel;
+exports.NullEditAPI = EditableLabel.NullEditAPI;
+exports.ExpandoInput = ExpandoInput.ExpandoInput;
+exports.Icon = Icon.Icon;
+exports.IconButton = IconButton.IconButton;
+exports.ToggleIconButton = ToggleIconButton.ToggleIconButton;
+exports.TablePicker = TablePicker.TablePicker;
+exports.TableSearch = TableSearch.TableSearch;
+exports.MeasuredContainer = MeasuredContainer.MeasuredContainer;
+exports.reduceSizeHeight = useMeasuredContainer.reduceSizeHeight;
+exports.useMeasuredContainer = useMeasuredContainer.useMeasuredContainer;
+exports.OverflowContainer = OverflowContainer.OverflowContainer;
+exports.NO_WRAPPED_ITEMS = overflowUtils.NO_WRAPPED_ITEMS;
+exports.applyOverflowClassToWrappedItems = overflowUtils.applyOverflowClassToWrappedItems;
+exports.correctForWrappedHighPriorityItems = overflowUtils.correctForWrappedHighPriorityItems;
+exports.correctForWrappedOverflowIndicator = overflowUtils.correctForWrappedOverflowIndicator;
+exports.getElementsMarkedAsWrapped = overflowUtils.getElementsMarkedAsWrapped;
+exports.getNonWrappedAndWrappedItems = overflowUtils.getNonWrappedAndWrappedItems;
+exports.highPriorityItemsHaveWrappedButShouldNotHave = overflowUtils.highPriorityItemsHaveWrappedButShouldNotHave;
+exports.markElementAsWrapped = overflowUtils.markElementAsWrapped;
+exports.overflowIndicatorHasWrappedButShouldNotHave = overflowUtils.overflowIndicatorHasWrappedButShouldNotHave;
+exports.removeOverflowIndicatorIfNoLongerNeeded = overflowUtils.removeOverflowIndicatorIfNoLongerNeeded;
+exports.sortByScreenOrder = overflowUtils.sortByScreenOrder;
+exports.switchWrappedItemIntoView = overflowUtils.switchWrappedItemIntoView;
+exports.unmarkItemsWhichAreNoLongerWrapped = overflowUtils.unmarkItemsWhichAreNoLongerWrapped;
+exports.PriceTicker = PriceTicker.PriceTicker;
+exports.SplitButton = SplitButton.SplitButton;
+exports.SplitStateButton = SplitStateButton.SplitStateButton;
+exports.TabNext = TabNext.TabNext;
+exports.TabListNext = TabListNext.TabListNext;
+exports.TabsNext = TabsNext.TabsNext;
+exports.TabNextPanel = TabNextPanel.TabNextPanel;
+exports.TabBar = TabBar.TabBar;
+exports.TabNextTrigger = TabNextTrigger.TabNextTrigger;
+exports.TabNextAction = TabNextAction.TabNextAction;
+exports.Tabstrip = Tabstrip.Tabstrip;
+exports.Tab = Tab.Tab;
+exports.getIndexOfEditedItem = tabstripDomUtils.getIndexOfEditedItem;
+exports.getIndexOfSelectedTab = tabstripDomUtils.getIndexOfSelectedTab;
+exports.Toolbar = Toolbar.Toolbar;
+exports.escapeRegExp = escapeRegExp.escapeRegExp;
+exports.isOverflowElement = isOverflowElement.isOverflowElement;
+exports.isPlainObject = isPlainObject.isPlainObject;
+exports.forwardCallbackProps = forwardCallbackProps.forwardCallbackProps;
+exports.VuuDatePicker = VuuDatePicker.VuuDatePicker;
+exports.VuuInput = VuuInput.VuuInput;
+exports.VuuTypeaheadInput = VuuTypeaheadInput.VuuTypeaheadInput;
+exports.ContextPanelProvider = ContextPanelProvider.ContextPanelProvider;
+exports.useContextPanel = ContextPanelProvider.useContextPanel;
+exports.SortableList = SortableList.SortableList;
+exports.SortableOption = SortableList.SortableOption;
+//# sourceMappingURL=index.js.map

package/cjs/packages/vuu-ui-controls/src/index.js.map

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

package/cjs/packages/vuu-ui-controls/src/instrument-picker/TablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePicker.js","sources":["../../../../../src/instrument-picker/TablePicker.tsx"],"sourcesContent":["import type { DataSourceRowObject, TableSchema } from \"@vuu-ui/vuu-data-types\";\nimport { Table, type TableProps } from \"@vuu-ui/vuu-table\";\nimport {\n  Input,\n  useFloatingComponent,\n  useIdMemo,\n  type FloatingComponentProps,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { forwardRef, useMemo, type HTMLAttributes } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport tablePickerCss from \"./TablePicker.css\";\nimport { useTablePicker } from \"./useTablePicker\";\n\nconst classBase = \"vuuTablePicker\";\n\ninterface FloatingTableProps extends FloatingComponentProps {\n  collapsed?: boolean;\n}\n\nexport interface TablePickerProps\n  extends Omit<HTMLAttributes<HTMLElement>, \"onSelect\">,\n    Pick<TableProps, \"onSelect\"> {\n  TableProps?: Pick<TableProps, \"config\">;\n  rowToString?: (row: DataSourceRowObject) => string;\n  schema: TableSchema;\n  searchColumns?: string[];\n}\n\nconst FloatingTable = forwardRef<HTMLDivElement, FloatingTableProps>(\n  function FloatingTable(\n    { children, className, collapsed, open, ...props },\n    forwardedRef,\n  ) {\n    const { Component: FloatingComponent } = useFloatingComponent();\n    return (\n      <FloatingComponent\n        className={cx(\n          `${classBase}-floating-table`,\n          {\n            [`${classBase}-collapsed`]: collapsed,\n          },\n          className,\n        )}\n        role=\"listbox\"\n        open={open}\n        {...props}\n        ref={forwardedRef}\n      >\n        {children}\n      </FloatingComponent>\n    );\n  },\n);\n\nexport const TablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString,\n  schema,\n  searchColumns,\n  ...htmlAttributes\n}: TablePickerProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-picker\",\n    css: tablePickerCss,\n    window: targetWindow,\n  });\n\n  const tableId = useIdMemo();\n\n  const {\n    containerRef,\n    dataSource,\n    highlightedIndex,\n    floatingUIProps: { x, y, strategy, floating, reference },\n    inputProps,\n    interactionPropGetters: { getFloatingProps, getReferenceProps },\n    onKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef,\n    value,\n    width,\n  } = useTablePicker({\n    TableProps,\n    rowToString,\n    onSelect,\n    schema,\n    searchColumns,\n  });\n\n  const endAdornment = useMemo(\n    () => (\n      <IconButton\n        {...getReferenceProps()}\n        data-embedded\n        ref={reference}\n        icon=\"chevron-down\"\n        onKeyDown={onKeyDown}\n        variant=\"secondary\"\n      />\n    ),\n    [getReferenceProps, onKeyDown, reference],\n  );\n\n  return (\n    <div {...htmlAttributes} className={classBase} ref={containerRef}>\n      <Input {...inputProps} endAdornment={endAdornment} value={value} />\n      <FloatingTable\n        {...getFloatingProps()}\n        collapsed={!open}\n        id={tableId}\n        open={open}\n        left={x + 3}\n        position={strategy}\n        ref={floating}\n        top={y + 3}\n      >\n        <Table\n          {...tableHandlers}\n          config={tableConfig}\n          dataSource={dataSource}\n          highlightedIndex={highlightedIndex}\n          maxViewportRowLimit={10}\n          navigationStyle=\"row\"\n          ref={tableRef}\n          selectionModel=\"single\"\n          showColumnHeaders={false}\n          width={width - 3}\n        />\n      </FloatingTable>\n    </div>\n  );\n};\n"],"names":["forwardRef","FloatingTable","useFloatingComponent","jsx","useWindow","useComponentCssInjection","tablePickerCss","useIdMemo","useTablePicker","useMemo","IconButton","Input","Table"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/instrument-picker/useTablePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTablePicker.js","sources":["../../../../../src/instrument-picker/useTablePicker.ts"],"sourcesContent":["import {\n  flip,\n  size,\n  useClick,\n  useDismiss,\n  useInteractions,\n} from \"@floating-ui/react\";\nimport { useFloatingUI } from \"@salt-ds/core\";\nimport {\n  ChangeEvent,\n  KeyboardEventHandler,\n  RefCallback,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport type { DataSourceRowObject } from \"@vuu-ui/vuu-data-types\";\nimport type {\n  TableConfig,\n  TableRowSelectHandler,\n} from \"@vuu-ui/vuu-table-types\";\nimport { isStringColumn, toColumnName, useData } from \"@vuu-ui/vuu-utils\";\nimport type { TablePickerProps } from \"./TablePicker\";\nimport {\n  isNavigationKey,\n  isRowSelectionKey,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\n\nexport interface TablePickerHookProps\n  extends Pick<\n    TablePickerProps,\n    \"TableProps\" | \"onSelect\" | \"rowToString\" | \"schema\" | \"searchColumns\"\n  > {\n  defaultIsOpen?: boolean;\n  isOpen?: boolean;\n}\n\nconst defaultRowToString = (row: DataSourceRowObject) =>\n  Object.values(row.data).join(\" \");\n\nexport const useTablePicker = ({\n  TableProps,\n  onSelect,\n  rowToString = defaultRowToString,\n  schema,\n  searchColumns = schema.columns.filter(isStringColumn).map(toColumnName),\n}: TablePickerHookProps) => {\n  const { VuuDataSource } = useData();\n  const [value, setValue] = useState(\"\");\n  const [open, setOpen] = useState(false);\n\n  const widthRef = useRef(-1);\n\n  const tableColumns = TableProps?.config.columns;\n\n  const containerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    widthRef.current = el?.clientWidth ?? -1;\n  }, []);\n\n  const dataSource = useMemo(() => {\n    const columns = tableColumns ?? schema.columns;\n\n    return new VuuDataSource({\n      columns: columns.map((c) => c.name),\n      table: schema.table,\n    });\n  }, [tableColumns, VuuDataSource, schema]);\n\n  const navigation = useControlledTableNavigation(-1, dataSource.size);\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  // const handleOpenChange = useCallback<OpenChangeHandler>(\n  //   (open, closeReason) => {\n  //     setIsOpen(open);\n  //     onOpenChange?.(open, closeReason);\n  //   },\n  //   [onOpenChange, setIsOpen],\n  // );\n\n  const { context, elements, ...floatingUIProps } = useFloatingUI({\n    open,\n    onOpenChange: setOpen,\n    placement: \"bottom-end\",\n    strategy: \"fixed\",\n    middleware: [\n      size({\n        apply({ rects, elements, availableHeight }) {\n          Object.assign(elements.floating.style, {\n            minWidth: `${rects.reference.width}px`,\n            maxHeight: `max(calc(${availableHeight}px - var(--salt-spacing-100)), calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5))`,\n          });\n        },\n      }),\n      flip({ fallbackStrategy: \"initialPlacement\" }),\n    ],\n  });\n\n  const interactionPropGetters = useInteractions([\n    useDismiss(context),\n    useClick(context, { keyboardHandlers: false, toggle: false }),\n  ]);\n\n  const handleInputChange = useCallback(\n    (evt: ChangeEvent<HTMLInputElement>) => {\n      const { value } = evt.target;\n      setValue(value);\n\n      console.log(`input changed ${value}`);\n\n      if (value && value.trim().length) {\n        const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n        dataSource.filter = {\n          filter,\n        };\n      } else {\n        dataSource.filter = {\n          filter: \"\",\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  const handleSelectRow = useCallback<TableRowSelectHandler>(\n    (row) => {\n      const value = row === null ? \"\" : rowToString(row);\n      setValue(value);\n      onSelect?.(row);\n      // TODO do we need to include a reason ?\n      requestAnimationFrame(() => {\n        setOpen(false);\n      });\n    },\n    [onSelect, rowToString],\n  );\n\n  const handleKeyDown = useCallback<KeyboardEventHandler<HTMLElement>>(\n    (evt) => {\n      if (open) {\n        if (isNavigationKey(evt.key, \"row\") || isRowSelectionKey(evt.key)) {\n          navigation.onKeyDown(evt);\n        }\n      } else {\n        if (evt.key === \"ArrowDown\" || evt.key === \"Enter\") {\n          setOpen(true);\n        }\n      }\n    },\n    [navigation, open],\n  );\n\n  const inputProps = {\n    inputProps: {\n      autoComplete: \"off\",\n      onKeyDown: handleKeyDown,\n    },\n    onChange: handleInputChange,\n  };\n  const tableHandlers = {\n    onSelect: handleSelectRow,\n  };\n\n  const tableConfig = useMemo<TableConfig>(() => {\n    const config = TableProps?.config;\n    if (config) {\n      const {\n        columns = schema.columns,\n        columnLayout = \"fit\",\n        ...rest\n      } = config;\n      return {\n        columns,\n        columnLayout,\n        ...rest,\n      };\n    } else {\n      return {\n        columnLayout: \"fit\",\n        columns: schema.columns,\n      };\n    }\n  }, [TableProps, schema]);\n\n  return {\n    containerRef,\n    dataSource,\n    highlightedIndex: navigation.highlightedIndexRef.current,\n    floatingUIProps,\n    inputProps,\n    interactionPropGetters,\n    onKeyDown: handleKeyDown,\n    open,\n    tableConfig,\n    tableHandlers,\n    tableRef: navigation.tableRef,\n    value,\n    width: widthRef.current,\n  };\n};\n"],"names":["isStringColumn","toColumnName","useData","useState","useRef","useCallback","useMemo","useControlledTableNavigation","useFloatingUI","size","elements","flip","useInteractions","useDismiss","useClick","value","isNavigationKey","isRowSelectionKey"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/measured-container/MeasuredContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeasuredContainer.js","sources":["../../../../../src/measured-container/MeasuredContainer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, forwardRef, ForwardedRef, HTMLAttributes } from \"react\";\nimport { MeasuredSize, useMeasuredContainer } from \"./useMeasuredContainer\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\n\nimport measuredContainerCss from \"./MeasuredContainer.css\";\n\nexport interface MeasuredContainerProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onResize\"> {\n  /**\n   * A numeric value for height will result in a fixed height. To adapt to container\n   * use either a percentage height or 'auto'. Always use 'auto' when rendering\n   * within a column based flex container, together with a flex value (use the\n   * --vuuMeasuredContainer-flex CSS custom property))\n   */\n  height?: number | string;\n  onResize?: (size: MeasuredSize) => void;\n  width?: number | string;\n}\n\nconst baseClass = \"vuuMeasuredContainer\";\n\nexport const MeasuredContainer = forwardRef(function MeasuredContainer(\n  {\n    children,\n    className,\n    height,\n    onResize,\n    style,\n    width,\n    ...htmlAttributes\n  }: MeasuredContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-measured-container\",\n    css: measuredContainerCss,\n    window: targetWindow,\n  });\n\n  const { containerRef, ...containerMeasurements } = useMeasuredContainer({\n    height,\n    onResize,\n    width,\n  });\n\n  const { cssSize, innerSize } = containerMeasurements;\n  const unmeasured = innerSize === undefined;\n\n  const getStyle = () => {\n    return unmeasured\n      ? ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n        } as CSSProperties)\n      : ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n          \"--measured-px-height\": `${innerSize?.height}px`,\n          \"--measured-px-width\": `${innerSize?.width}px`,\n        } as CSSProperties);\n  };\n\n  const forkedRef = useForkRef(containerRef, forwardedRef);\n\n  return unmeasured ? (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, `${baseClass}-ummeasured`)}\n      style={getStyle()}\n      ref={containerRef}\n    />\n  ) : (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, className)}\n      ref={forkedRef}\n      style={getStyle()}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","MeasuredContainer","useWindow","useComponentCssInjection","measuredContainerCss","useMeasuredContainer","useForkRef","jsx"],"mappings":";;;;;;;;;;;AAsBA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoBA,gBAAW,CAAA,SAASC,kBACnD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0BC,yCAAqB,CAAA;AAAA,IACtE,MAAA;AAAA,IACA,QAAA;AAAA,IACA;AAAA,GACD,CAAA;AAED,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,qBAAA;AAC/B,EAAA,MAAM,aAAa,SAAc,KAAA,KAAA,CAAA;AAEjC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,OAAO,UACF,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,KAEzC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,MACxC,sBAAA,EAAwB,CAAG,EAAA,SAAA,EAAW,MAAM,CAAA,EAAA,CAAA;AAAA,MAC5C,qBAAA,EAAuB,CAAG,EAAA,SAAA,EAAW,KAAK,CAAA,EAAA;AAAA,KAC5C;AAAA,GACN;AAEA,EAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAEvD,EAAA,OAAO,UACL,mBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,MAClD,OAAO,QAAS,EAAA;AAAA,MAChB,GAAK,EAAA;AAAA;AAAA,GAGP,mBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,SAAA;AAAA,MACL,OAAO,QAAS,EAAA;AAAA,MAEf;AAAA;AAAA,GACH;AAEJ,CAAC;;;;"}

package/cjs/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMeasuredContainer.js","sources":["../../../../../src/measured-container/useMeasuredContainer.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { MeasuredContainerProps } from \"./MeasuredContainer\";\nimport { useResizeObserver, ResizeHandler } from \"./useResizeObserver\";\n\nconst ClientWidthHeight = [\"clientHeight\", \"clientWidth\"];\nconst WidthOnly = [\"clientWidth\"];\nconst HeightOnly = [\"clientHeight\"];\nconst NO_MEASUREMENT = [] as const;\n\nexport interface ClientSize {\n  clientHeight: number;\n  clientWidth: number;\n}\n\nexport interface MeasuredProps\n  extends Pick<MeasuredContainerProps, \"height\" | \"onResize\" | \"width\"> {\n  defaultHeight?: number;\n  defaultWidth?: number;\n}\n\nexport type CssSize = Pick<CSSProperties, \"height\" | \"width\">;\n\nexport interface MeasuredSize {\n  height: number;\n  width: number;\n}\n\ninterface MeasuredState {\n  css: CssSize;\n  outer: CssSize;\n  inner?: MeasuredSize;\n}\n\nconst isNumber = (val: unknown): val is number => Number.isFinite(val);\n\nexport interface MeasuredContainerHookResult {\n  containerRef: RefObject<HTMLDivElement | null>;\n  cssSize: CssSize;\n  outerSize: CssSize;\n  innerSize?: MeasuredSize;\n}\n\nexport const reduceSizeHeight = (\n  size: MeasuredSize,\n  value: number,\n): MeasuredSize => {\n  if (value === 0) {\n    return size;\n  } else {\n    return {\n      height: size.height - value,\n      width: size.width,\n    };\n  }\n};\n\nconst getInitialValue = (\n  value: number | string | undefined,\n  defaultValue: \"auto\" | \"100%\",\n) => {\n  if (isValidNumber(value)) {\n    return `${value}px`;\n  } else if (typeof value === \"string\") {\n    return value;\n  } else {\n    return defaultValue;\n  }\n};\n\n// If (outer) height and width are known at initialisation (i.e. they\n// were passed as props), use as initial values for inner size. If there\n// is no border on Table, these values will not change. If there is a border,\n// inner values will be updated once measured.\nconst getInitialCssSize = (\n  height?: number | string,\n  width?: number | string,\n): CssSize => {\n  return {\n    height: getInitialValue(height, \"100%\"),\n    width: getInitialValue(width, \"auto\"),\n  };\n};\n\nconst getInitialInnerSize = (\n  height: unknown,\n  width: unknown,\n): MeasuredSize | undefined => {\n  if (isValidNumber(height) && isValidNumber(width)) {\n    return {\n      height,\n      width,\n    };\n  }\n};\n\nexport const useMeasuredContainer = ({\n  defaultHeight = 0,\n  defaultWidth = 0,\n  height,\n  onResize: onResizeProp,\n  width,\n}: MeasuredProps): MeasuredContainerHookResult => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [size, setSize] = useState<MeasuredState>({\n    css: getInitialCssSize(height, width),\n    inner: getInitialInnerSize(height, width),\n    outer: {\n      height: height ?? \"100%\",\n      width: width ?? \"auto\",\n    },\n  });\n  const fixedHeight = typeof height === \"number\";\n  const fixedWidth = typeof width === \"number\";\n\n  const dimensions =\n    fixedHeight && fixedWidth\n      ? NO_MEASUREMENT\n      : fixedHeight\n        ? WidthOnly\n        : fixedWidth\n          ? HeightOnly\n          : ClientWidthHeight;\n\n  useMemo(() => {\n    // TODO why call state from memo.\n    // Why not calculate size first inline, then assign that to state\n    // on first pass\n    setSize((currentSize) => {\n      const { inner, outer } = currentSize;\n      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {\n        const { height: innerHeight, width: innerWidth } = inner;\n        const { height: outerHeight, width: outerWidth } = outer;\n\n        if (outerHeight !== height || outerWidth !== width) {\n          const heightDiff = isValidNumber(outerHeight)\n            ? outerHeight - innerHeight\n            : 0;\n          const widthDiff = isValidNumber(outerWidth)\n            ? outerWidth - innerWidth\n            : 0;\n          return {\n            ...currentSize,\n            outer: { height, width },\n            inner: { height: height - heightDiff, width: width - widthDiff },\n          };\n        }\n      }\n      return currentSize;\n    });\n  }, [height, width]);\n\n  const onResize: ResizeHandler = useCallback(\n    ({ clientWidth, clientHeight }: Partial<ClientSize>) => {\n      const { css, inner, outer } = size;\n      let newState: MeasuredState = size;\n\n      if (\n        fixedHeight &&\n        isNumber(clientWidth) &&\n        Math.floor(clientWidth) !== inner?.width\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height,\n          },\n        };\n      } else if (\n        fixedWidth &&\n        isNumber(clientHeight) &&\n        Math.floor(clientHeight) !== inner?.height\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            height: Math.floor(clientHeight) || defaultHeight,\n            width,\n          },\n        };\n      } else if (\n        isNumber(clientHeight) &&\n        isNumber(clientWidth) &&\n        (clientWidth !== inner?.width || clientHeight !== inner?.height)\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height: Math.floor(clientHeight) || defaultHeight,\n          },\n        };\n      }\n\n      if (newState !== size) {\n        setSize(newState);\n      }\n    },\n    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width],\n  );\n\n  useEffect(() => {\n    if (size.inner) {\n      if (containerRef.current) {\n        // reassign using clientWidth to correctly account for borders\n        size.inner.width = containerRef.current.clientWidth;\n        onResizeProp?.(size.inner);\n      }\n    }\n  }, [onResizeProp, size.inner]);\n\n  useResizeObserver(containerRef, dimensions, onResize, true);\n\n  return {\n    containerRef,\n    cssSize: size.css,\n    outerSize: size.outer,\n    innerSize: size.inner,\n  };\n};\n"],"names":["isValidNumber","useRef","useState","useMemo","useCallback","useEffect","useResizeObserver"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/measured-container/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.js","sources":["../../../../../src/measured-container/useResizeObserver.ts"],"sourcesContent":["import { RefObject, useCallback, useEffect, useRef } from \"react\";\n\nexport const WidthHeight = [\"height\", \"width\"];\nexport const WidthOnly = [\"width\"];\n\nexport type measurements<T = string | number> = {\n  height?: T;\n  clientHeight?: number;\n  clientWidth?: number;\n  contentHeight?: number;\n  contentWidth?: number;\n  scrollHeight?: number;\n  scrollWidth?: number;\n  width?: T;\n};\ntype measuredDimension = keyof measurements<number>;\n\nexport type ResizeHandler = (measurements: measurements<number>) => void;\n\ntype observedDetails = {\n  onResize?: ResizeHandler;\n  measurements: measurements<number>;\n};\nconst observedMap = new Map<HTMLElement, observedDetails>();\n\nconst getTargetSize = (\n  element: HTMLElement,\n  size: {\n    height: number;\n    width: number;\n    contentHeight: number;\n    contentWidth: number;\n  },\n  dimension: measuredDimension,\n): number => {\n  switch (dimension) {\n    case \"height\":\n      return size.height;\n    case \"clientHeight\":\n      return Math.floor(element.clientHeight);\n    case \"clientWidth\":\n      return Math.floor(element.clientWidth);\n    case \"contentHeight\":\n      return size.contentHeight;\n    case \"contentWidth\":\n      return size.contentWidth;\n    case \"scrollHeight\":\n      return Math.ceil(Math.floor(element.scrollHeight));\n    case \"scrollWidth\":\n      return Math.ceil(Math.floor(element.scrollWidth));\n    case \"width\":\n      return size.width;\n    default:\n      return 0;\n  }\n};\n\n// TODO should we make this create-on-demand\nconst resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n  for (const entry of entries) {\n    const { target, borderBoxSize, contentBoxSize } = entry;\n    const observedTarget = observedMap.get(target as HTMLElement);\n    if (observedTarget) {\n      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;\n      const [{ blockSize: contentHeight, inlineSize: contentWidth }] =\n        contentBoxSize;\n      const { onResize, measurements } = observedTarget;\n      let sizeChanged = false;\n      for (const [dimension, size] of Object.entries(measurements)) {\n        const newSize = getTargetSize(\n          target as HTMLElement,\n          { height, width, contentHeight, contentWidth },\n          dimension as measuredDimension,\n        );\n\n        if (newSize !== size) {\n          sizeChanged = true;\n          measurements[dimension as measuredDimension] = newSize;\n        }\n      }\n      if (sizeChanged) {\n        // TODO only return measured sizes\n        onResize && onResize(measurements);\n      }\n    }\n  }\n});\n\n// TODO use an optional lag (default to false) to ask to fire onResize\n// with initial size\nexport function useResizeObserver(\n  ref: RefObject<Element | HTMLElement | null>,\n  dimensions: readonly string[],\n  onResize: ResizeHandler,\n  reportInitialSize = false,\n) {\n  const dimensionsRef = useRef(dimensions);\n\n  const measure = useCallback((target: HTMLElement): measurements<number> => {\n    const { width, height } = target.getBoundingClientRect();\n    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;\n    const flooredHeight = Math.floor(height);\n    const flooredWidth = Math.floor(width);\n\n    return dimensionsRef.current.reduce(\n      (map: { [key: string]: number }, dim) => {\n        map[dim] = getTargetSize(\n          target,\n          {\n            width: flooredWidth,\n            height: flooredHeight,\n            contentHeight,\n            contentWidth,\n          },\n          dim as measuredDimension,\n        );\n        return map;\n      },\n      {},\n    );\n  }, []);\n\n  // TODO use ref to store resizeHandler here\n  // resize handler registered with REsizeObserver will never change\n  // use ref to store user onResize callback here\n  // resizeHandler will call user callback.current\n\n  // Keep this effect separate in case user inadvertently passes different\n  // dimensions or callback instance each time - we only ever want to\n  // initiate new observation when ref changes.\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    async function registerObserver() {\n      // Create the map entry immediately. useEffect may fire below\n      // before fonts are ready and attempt to update entry\n      observedMap.set(target, { measurements: {} as measurements<number> });\n      // await document.fonts.ready;\n      const observedTarget = observedMap.get(target);\n      if (observedTarget) {\n        const measurements = measure(target);\n        observedTarget.measurements = measurements;\n        resizeObserver.observe(target);\n        if (reportInitialSize) {\n          onResize(measurements);\n        }\n      } else {\n        console.log(\n          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,\n          \"font-weight:bold; color:red;\",\n        );\n      }\n    }\n\n    if (target) {\n      // TODO might we want multiple callers to attach a listener to the same element ?\n      if (observedMap.has(target)) {\n        console.log(\n          `useResizeObserver attemping to observe same element twice`,\n          {\n            target,\n          },\n        );\n        // throw Error(\n        //   \"useResizeObserver attemping to observe same element twice\"\n        // );\n      }\n      // TODO set a pending entry on map\n      registerObserver();\n    }\n    return () => {\n      if (target && observedMap.has(target)) {\n        resizeObserver.unobserve(target);\n        observedMap.delete(target);\n      }\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [measure, ref]);\n\n  useEffect(() => {\n    const target = ref.current as HTMLElement;\n    const record = observedMap.get(target);\n    if (record) {\n      if (dimensionsRef.current !== dimensions) {\n        dimensionsRef.current = dimensions;\n        const measurements = measure(target);\n        record.measurements = measurements;\n      }\n      // Might not have changed, but no harm ...\n      record.onResize = onResize;\n    }\n  }, [dimensions, measure, ref, onResize]);\n}\n"],"names":["useRef","useCallback","useEffect"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/overflow-container/OverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowContainer.js","sources":["../../../../../src/overflow-container/OverflowContainer.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { asReactElements, orientationType, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { OverflowItem } from \"./overflow-utils\";\nimport { useOverflowContainer } from \"./useOverflowContainer\";\n\nimport overflowContainerCss from \"./OverflowContainer.css\";\n\nconst classBase = \"vuuOverflowContainer\";\n\nexport interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  allowDragDrop?: boolean;\n  debugId?: string;\n  onMoveItem?: (fromIndex: number, toIndex: number) => void;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n  orientation?: orientationType;\n  overflowIcon?: string;\n  overflowPosition?: \"start\" | \"end\" | number;\n}\n\nconst WrapContainer = React.memo(\n  ({\n    PopupMenuProps,\n    allowDragDrop,\n    children,\n    id,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation,\n    overflowIcon,\n  }: Omit<OverflowContainerProps, \"orientation\"> &\n    Required<Pick<OverflowContainerProps, \"orientation\">>) => {\n    const childElements = asReactElements(children);\n    const {\n      draggable,\n      draggedItemIndex,\n      menuActionHandler,\n      menuBuilder,\n      onItemMouseDown,\n      rootRef,\n    } = useOverflowContainer({\n      allowDragDrop,\n      itemCount: childElements.length,\n      onMoveItem,\n      onSwitchWrappedItemIntoView,\n      orientation,\n    });\n\n    const content = childElements.map((childEl, i) => {\n      const {\n        \"data-align\": align,\n        \"data-overflow-priority\": overflowPriority = \"0\",\n        id: itemId = `${id}-${i}`,\n        label = `Item ${i + 1}`,\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      } = childEl.props as any;\n      return (\n        <div\n          className={cx(`${classBase}-item`, {\n            \"vuuDraggable-dragAway\": draggedItemIndex === i,\n          })}\n          data-index={i}\n          data-align={align}\n          data-label={label}\n          data-overflow-priority={overflowPriority}\n          id={`${itemId}-wrapper`}\n          key={i}\n          onMouseDown={onItemMouseDown}\n        >\n          {childEl}\n        </div>\n      );\n    });\n\n    const overflowIndicator = (\n      <div\n        className={`${classBase}-OverflowIndicator`}\n        data-index=\"overflow\"\n        key=\"overflow\"\n      >\n        <PopupMenu\n          {...PopupMenuProps}\n          data-embedded\n          icon={overflowIcon}\n          menuBuilder={menuBuilder}\n          menuActionHandler={menuActionHandler}\n          tabIndex={-1}\n        />\n      </div>\n    );\n    content.push(overflowIndicator);\n\n    return (\n      <div className={cx(`${classBase}-wrapContainer`)} ref={rootRef}>\n        {content}\n        {draggable}\n      </div>\n    );\n  },\n);\n\nWrapContainer.displayName = \"OverflowContainer.InnerContainer\";\n\nexport const OverflowContainer = forwardRef(function OverflowContainer(\n  {\n    PopupMenuProps,\n    allowDragDrop = false,\n    children,\n    className,\n    id: idProp,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation = \"horizontal\",\n    overflowIcon,\n    overflowPosition,\n    ...htmlAttributes\n  }: OverflowContainerProps,\n  forwardedRef: ForwardedRef<HTMLDivElement>,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-overflow-container\",\n    css: overflowContainerCss,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(\n        cx(className, classBase, {\n          \"vuuOrientation-horizontal\": orientation === \"horizontal\",\n          \"vuuOrientation-vertical\": orientation === \"vertical\",\n        }),\n      )}\n      id={id}\n      ref={forwardedRef}\n    >\n      <WrapContainer\n        PopupMenuProps={PopupMenuProps}\n        allowDragDrop={allowDragDrop}\n        id={id}\n        orientation={orientation}\n        overflowIcon={overflowIcon}\n        overflowPosition={overflowPosition}\n        onMoveItem={onMoveItem}\n        onSwitchWrappedItemIntoView={onSwitchWrappedItemIntoView}\n      >\n        {children}\n      </WrapContainer>\n    </div>\n  );\n});\n"],"names":["PopupMenuProps","asReactElements","useOverflowContainer","jsx","PopupMenu","jsxs","forwardRef","OverflowContainer","useWindow","useComponentCssInjection","overflowContainerCss","useId"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/overflow-container/overflow-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overflow-utils.js","sources":["../../../../../src/overflow-container/overflow-utils.ts"],"sourcesContent":["import { getElementByDataIndex, orientationType } from \"@vuu-ui/vuu-utils\";\n\nconst NON_WRAPPED_ITEM = \".vuuOverflowContainer-item:not(.wrapped)\";\n\nexport type OverflowItem = {\n  index: string;\n  label: string;\n  overflowPriority: string;\n};\n\nexport const sortByScreenOrder = (elements: HTMLElement[]): HTMLElement[] =>\n  elements.sort((e1, e2) => {\n    const {\n      dataset: { index: idx1 = \"?\" },\n    } = e1;\n    const {\n      dataset: { index: idx2 = \"?\" },\n    } = e2;\n    const isOverflowed1 = e1.classList.contains(\"wrapped\");\n    const isOverflowed2 = e2.classList.contains(\"wrapped\");\n    const isOverflowedIndicator1 = idx1 === \"overflow\";\n    const isOverflowedIndicator2 = idx2 === \"overflow\";\n    if (isOverflowed1 && !isOverflowed2) {\n      return 1;\n    } else if (!isOverflowed1 && isOverflowed2) {\n      return -1;\n    }\n    if (isOverflowedIndicator1) {\n      return 1;\n    } else if (isOverflowedIndicator2) {\n      return -1;\n    }\n    return parseInt(idx1) > parseInt(idx2) ? 1 : -1;\n  });\n\nexport const NO_WRAPPED_ITEMS: OverflowItem[] = [];\n\n/**\n    Identify wrapped items by comparing position of each item. Any item\n    not to the right of preceeding item has wrapped. Note: on-screen \n    position of items does not necessarily match document position, due\n    to use of css order. This is taken into account by sorting. \n    TODO support Vertical orientation\n */\nexport const getNonWrappedAndWrappedItems = (\n  container: HTMLElement,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const nonWrappedItems: OverflowItem[] = [];\n  const wrappedItems: OverflowItem[] = [];\n  let currentPosition = -1;\n  let overflowed = false;\n  const sortedChildren = sortByScreenOrder(\n    Array.from(container.children) as HTMLElement[],\n  );\n  const positionAttribute = orientation === \"vertical\" ? \"top\" : \"left\";\n  for (const child of sortedChildren) {\n    const element = child as HTMLElement;\n    const {\n      dataset: { index = \"?\", label = \"?\", overflowPriority = \"0\" },\n    } = element;\n    const { [positionAttribute]: position } = element.getBoundingClientRect();\n    if (position <= currentPosition) {\n      if (index === \"overflow\") {\n        wrappedItems.push(nonWrappedItems.pop() as OverflowItem);\n      } else {\n        wrappedItems.push({ index, label, overflowPriority });\n      }\n      overflowed = true;\n    } else if (overflowed) {\n      wrappedItems.push({ index, label, overflowPriority });\n    } else {\n      nonWrappedItems.push({ index, label, overflowPriority });\n    }\n    currentPosition = position;\n  }\n  return [nonWrappedItems, wrappedItems];\n};\n\nexport const applyOverflowClassToWrappedItems = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  classBase?: string,\n) => {\n  let ignoreOverflow = false;\n  const className = classBase ? `${classBase}-overflowed` : \"overflow\";\n  if (overflowedItems.find(({ index }) => index === \"overflow\")) {\n    if (overflowedItems.length === 1) {\n      ignoreOverflow = true;\n    }\n  }\n  for (const element of container.children) {\n    const {\n      dataset: { index = \"?\" },\n    } = element as HTMLElement;\n    if (overflowedItems.length === 0 || ignoreOverflow) {\n      container.classList.remove(className);\n    } else {\n      container.classList.add(className);\n    }\n    if (\n      index !== \"overflow\" &&\n      overflowedItems.find((item) => item.index === index)\n    ) {\n      element.classList.add(\"wrapped\");\n    } else {\n      element.classList.remove(\"wrapped\");\n    }\n  }\n};\n\nconst maxPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.max(priority, parseInt(overflowPriority));\n\nconst minPriority = (priority: number, { overflowPriority }: OverflowItem) =>\n  Math.min(priority, parseInt(overflowPriority));\n\nexport const overflowIndicatorHasWrappedButShouldNotHave = (\n  wrappedItems: OverflowItem[],\n) => wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n\nconst getHighestPriorityItem = (overflowItems: OverflowItem[]) => {\n  let [highestPriorityItem] = overflowItems;\n  for (let i = 1; i < overflowItems.length; i++) {\n    const item = overflowItems[i];\n    if (\n      parseInt(item.overflowPriority) >\n      parseInt(highestPriorityItem.overflowPriority)\n    ) {\n      highestPriorityItem = item;\n    }\n  }\n  return highestPriorityItem;\n};\n\nexport const highPriorityItemsHaveWrappedButShouldNotHave = (\n  nonWrappedItems: OverflowItem[],\n  wrappedItems: OverflowItem[],\n) => {\n  const minNonwrappedPriority = nonWrappedItems.reduce<number>(\n    minPriority,\n    Number.MAX_SAFE_INTEGER,\n  );\n  const maxwrappedPriority = wrappedItems.reduce<number>(maxPriority, 0);\n  if (maxwrappedPriority > minNonwrappedPriority) {\n    return true;\n  } else {\n    return wrappedItems.length > 1 && wrappedItems.at(-1)?.index === \"overflow\";\n  }\n};\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedOverflowIndicator = (\n  container: HTMLElement,\n  overflowedItems: OverflowItem[],\n  orientation: orientationType,\n): Promise<OverflowItem[]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const newlyOverflowed = getNewItems(overflowedItems, o2);\n      newlyOverflowed.forEach((item) => markElementAsWrapped(container, item));\n      resolve(o2);\n    });\n  });\n\n/** \n  An edge case that may occur when reducing width from unwrapped to\n  wrapped, or on first render.\n  We overflow one or more items. Then, when the overflowIndicator assumes\n  full width, it may itself overflow.\n*/\nexport const correctForWrappedHighPriorityItems = (\n  container: HTMLElement,\n  nonWrapped: OverflowItem[],\n  wrapped: OverflowItem[],\n  orientation: orientationType,\n): Promise<[OverflowItem[], OverflowItem[]]> =>\n  new Promise((resolve) => {\n    requestAnimationFrame(() => {\n      const [, o2] = getNonWrappedAndWrappedItems(container, orientation);\n      const highPriorityWrappedItem = getHighestPriorityItem(o2);\n      if (highPriorityWrappedItem) {\n        const [nonWrappedItems, wrappedItems] = switchWrappedItemIntoView(\n          container,\n          highPriorityWrappedItem,\n          orientation,\n        );\n        resolve([nonWrappedItems, wrappedItems]);\n      } else {\n        resolve([nonWrapped, wrapped]);\n      }\n    });\n  });\n\nexport const markElementAsWrapped = (\n  container: HTMLElement,\n  item: OverflowItem,\n) => {\n  const el = getElementByDataIndex(container, item.index);\n  if (el) {\n    el.classList.add(\"wrapped\");\n  } else {\n    throw Error(\n      `markElementAsWrapped element item with index ${item.index} not found`,\n    );\n  }\n};\n\nexport const getElementsMarkedAsWrapped = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(\".wrapped\")) as HTMLElement[];\n\nconst getNewItems = (items1: OverflowItem[], items2: OverflowItem[]) => {\n  const newItems: OverflowItem[] = [];\n  for (const item of items2) {\n    if (!items1.find(({ index }) => index === item.index)) {\n      newItems.push(item);\n    }\n  }\n  return newItems;\n};\n\nexport const unmarkItemsWhichAreNoLongerWrapped = (\n  container: HTMLElement,\n  wrappedItems: OverflowItem[],\n) => {\n  const elementssMarkedAsWrapped = getElementsMarkedAsWrapped(container);\n  elementssMarkedAsWrapped.forEach((el) => {\n    const {\n      dataset: { index = \"?\" },\n    } = el;\n    if (!wrappedItems.find((i) => i.index === index)) {\n      el.classList.remove(\"wrapped\");\n    }\n  });\n};\n\nconst getOverflowIndicator = (container: HTMLElement) =>\n  container.querySelector('[data-index=\"overflow\"]') as HTMLElement;\nconst getOverflowedItem = (container: HTMLElement) =>\n  container.querySelector(\".wrapped\") as HTMLElement;\nconst getElementSize = (el: HTMLElement, sizeProperty: \"width\" | \"height\") => {\n  const size = parseInt(getComputedStyle(el).getPropertyValue(sizeProperty));\n  const margin =\n    sizeProperty === \"width\"\n      ? parseInt(getComputedStyle(el).getPropertyValue(\"margin-left\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-right\"))\n      : parseInt(getComputedStyle(el).getPropertyValue(\"margin-top\")) +\n        parseInt(getComputedStyle(el).getPropertyValue(\"margin-bottom\"));\n\n  return size + margin;\n};\n\nconst getAvailableSpace = (\n  container: HTMLElement,\n  overflowIndicator: HTMLElement,\n  orientation: orientationType,\n) => {\n  if (orientation === \"horizontal\") {\n    const { right: containerRight } = container.getBoundingClientRect();\n    const paddingRight = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-right\"),\n    );\n    const { right: indicatorRight } = overflowIndicator.getBoundingClientRect();\n    return containerRight - paddingRight - indicatorRight;\n  } else {\n    const { bottom: containerBottom } = container.getBoundingClientRect();\n    const paddingBottom = parseInt(\n      getComputedStyle(container).getPropertyValue(\"padding-bottom\"),\n    );\n    const { bottom: indicatorBottom } =\n      overflowIndicator.getBoundingClientRect();\n    return containerBottom - paddingBottom - indicatorBottom;\n  }\n};\n\n/**\n    An edge case. If container has grown but we still have one\n    wrapped item - could the wrapped item return to the fold if the overflow\n    indicaor were removed ?\n */\nexport const removeOverflowIndicatorIfNoLongerNeeded = (\n  container: HTMLElement,\n  orientation: orientationType,\n): boolean => {\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const overflowIndicator = getOverflowIndicator(container);\n  const availableSpace = getAvailableSpace(\n    container,\n    overflowIndicator,\n    orientation,\n  );\n  const indicatorWidth = getElementSize(overflowIndicator, sizeProperty);\n  const overflowedItem = getOverflowedItem(container);\n  const overflowWidth = getElementSize(overflowedItem, sizeProperty);\n\n  if (overflowWidth <= availableSpace + indicatorWidth) {\n    container.classList.remove(\"vuuOverflowContainer-wrapContainer-overflowed\");\n    overflowedItem.classList.remove(\"wrapped\");\n    return true;\n  }\n  return false;\n};\n\nconst byPriorityDescending = (h1: Element, h2: Element) => {\n  const {\n    dataset: { index: i1 = \"0\", overflowPriority: p1 = \"0\" },\n  } = h1 as HTMLElement;\n  const {\n    dataset: { index: i2 = \"0\", overflowPriority: p2 = \"0\" },\n  } = h2 as HTMLElement;\n\n  if (p1 > p2) {\n    return -1;\n  } else if (p1 < p2) {\n    return 1;\n  } else {\n    return parseInt(i1) - parseInt(i2);\n  }\n};\n\nconst getNonwrappedItemsByPriority = (container: HTMLElement) =>\n  Array.from(container.querySelectorAll(NON_WRAPPED_ITEM)).sort(\n    byPriorityDescending,\n  ) as HTMLElement[];\n\n/**\n * This is used both when an overflow menu is used to select an overflowed item\n * and when a high priority item has overflowed, whilst lower priority items\n * remain in view.\n */\nexport const switchWrappedItemIntoView = (\n  container: HTMLElement,\n  overflowItem: OverflowItem,\n  orientation: orientationType,\n): [OverflowItem[], OverflowItem[]] => {\n  const unwrappedItems = getNonwrappedItemsByPriority(container);\n  const targetElement = getElementByDataIndex(\n    container,\n    overflowItem.index,\n    true,\n  );\n  let pos = -1;\n  let unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n  const sizeProperty = orientation === \"horizontal\" ? \"width\" : \"height\";\n  const itemWidth = getElementSize(unwrappedItem, sizeProperty);\n  const targetWidth = getElementSize(targetElement, sizeProperty);\n  const overflowIndicator = getOverflowIndicator(container);\n  let availableSpace =\n    getAvailableSpace(container, overflowIndicator, orientation) + itemWidth;\n  if (availableSpace >= targetWidth) {\n    switchWrapOnElements(targetElement, unwrappedItem);\n  } else {\n    // we need to wrap multiple items to make space for the switched item\n    const { left: lastLeft } = unwrappedItem.getBoundingClientRect();\n    const baseAvailableSpace = availableSpace;\n    const wrapTargets = [unwrappedItem];\n    while (availableSpace < targetWidth) {\n      pos -= 1;\n      unwrappedItem = unwrappedItems.at(pos) as HTMLElement;\n      wrapTargets.push(unwrappedItem);\n      const { left: nextLeft } = unwrappedItem.getBoundingClientRect();\n      const extraSpace = lastLeft - nextLeft;\n      availableSpace = baseAvailableSpace + extraSpace;\n    }\n\n    targetElement?.classList.remove(\"wrapped\");\n    wrapTargets.forEach((item) => {\n      item.classList.add(\"wrapped\");\n    });\n  }\n  const [nonWrappedItems, wrappedItems] = getNonWrappedAndWrappedItems(\n    container,\n    orientation,\n  );\n  unmarkItemsWhichAreNoLongerWrapped(container, wrappedItems);\n  return [nonWrappedItems, wrappedItems];\n};\n\nconst switchWrapOnElements = (\n  wrappedElement?: HTMLElement | null,\n  nonWrappedElement?: HTMLElement,\n) => {\n  if (!wrappedElement || !nonWrappedElement) {\n    throw Error(\"switchWrapOnElements, element undefined\");\n  }\n  wrappedElement.classList.remove(\"wrapped\");\n  nonWrappedElement.classList.add(\"wrapped\");\n};\n"],"names":["getElementByDataIndex"],"mappings":"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"}

package/cjs/packages/vuu-ui-controls/src/overflow-container/useOverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowContainer.js","sources":["../../../../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import {\n  isValidNumber,\n  MEASURES,\n  useLayoutEffectSkipFirst,\n} from \"@vuu-ui/vuu-utils\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport {\n  applyOverflowClassToWrappedItems,\n  removeOverflowIndicatorIfNoLongerNeeded,\n  correctForWrappedHighPriorityItems,\n  getNonWrappedAndWrappedItems,\n  NO_WRAPPED_ITEMS,\n  highPriorityItemsHaveWrappedButShouldNotHave,\n  switchWrappedItemIntoView,\n  OverflowItem,\n  overflowIndicatorHasWrappedButShouldNotHave,\n  correctForWrappedOverflowIndicator,\n} from \"./overflow-utils\";\nimport { OverflowContainerProps } from \"./OverflowContainer\";\nimport { DropOptions, useDragDrop } from \"../drag-drop\";\nimport { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-context-menu\";\n\nexport interface OverflowContainerHookProps\n  extends Pick<OverflowContainerProps, \"allowDragDrop\" | \"onMoveItem\">,\n    Required<Pick<OverflowContainerProps, \"orientation\">> {\n  itemCount: number;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n}\n\nexport const useOverflowContainer = ({\n  allowDragDrop = false,\n  itemCount,\n  onMoveItem,\n  onSwitchWrappedItemIntoView,\n  orientation,\n}: OverflowContainerHookProps) => {\n  const [container, setContainer] = useState<HTMLDivElement | null>(null);\n  const wrappedItemsRef = useRef<OverflowItem[]>(NO_WRAPPED_ITEMS);\n  // Drag drop needs a ref to container\n  const containerRef = useRef<HTMLDivElement | null>(null);\n\n  const setOverflowTabIndex = useCallback((tabIndex: \"0\" | \"-1\") => {\n    if (containerRef.current) {\n      containerRef.current\n        .querySelector(\".vuuOverflowContainer-OverflowIndicator button\")\n        ?.setAttribute(\"tabindex\", tabIndex);\n    }\n  }, []);\n\n  const handleResize = useCallback(async () => {\n    if (container) {\n      let [nonWrapped, wrapped] = getNonWrappedAndWrappedItems(\n        container,\n        orientation,\n      );\n      applyOverflowClassToWrappedItems(\n        container,\n        wrapped,\n        \"vuuOverflowContainer-wrapContainer\",\n      );\n      if (overflowIndicatorHasWrappedButShouldNotHave(wrapped)) {\n        wrapped = await correctForWrappedOverflowIndicator(\n          container,\n          wrapped,\n          orientation,\n        );\n      }\n      while (\n        highPriorityItemsHaveWrappedButShouldNotHave(nonWrapped, wrapped)\n      ) {\n        [nonWrapped, wrapped] = await correctForWrappedHighPriorityItems(\n          container,\n          nonWrapped,\n          wrapped,\n          orientation,\n        );\n      }\n      if (wrapped.length === 1) {\n        if (removeOverflowIndicatorIfNoLongerNeeded(container, orientation)) {\n          wrapped = NO_WRAPPED_ITEMS;\n        }\n      }\n\n      if (wrappedItemsRef.current.length === 0 && wrapped.length > 0) {\n        setOverflowTabIndex(\"0\");\n      } else if (wrappedItemsRef.current.length > 0 && wrapped.length === 0) {\n        setOverflowTabIndex(\"-1\");\n      }\n\n      wrappedItemsRef.current = wrapped;\n    }\n  }, [container, orientation, setOverflowTabIndex]);\n\n  const hasOverflowItem = (\n    opt: unknown,\n  ): opt is {\n    overflowItem: OverflowItem;\n  } => typeof opt === \"object\" && opt !== null && \"overflowItem\" in opt;\n\n  const [menuBuilder, menuActionHandler] = useMemo((): [\n    MenuBuilder,\n    MenuActionHandler,\n  ] => {\n    return [\n      () => {\n        const { current: menuItems } = wrappedItemsRef;\n        return menuItems.map((item: OverflowItem) => {\n          return {\n            label: item.label,\n            id: `activate-item-${item.index}`,\n            options: { overflowItem: item },\n          };\n        });\n      },\n      // The menu items are our overflowed items, selecting one by default\n      // brings it back onto the toolbar - TODO is this right ?\n      (menuItemId, options) => {\n        if (container && hasOverflowItem(options)) {\n          // TODO do we always want to switch it into view - leave that to caller\n          const [, wrappedItems] = switchWrappedItemIntoView(\n            container,\n            options.overflowItem,\n            orientation,\n          );\n          wrappedItemsRef.current = wrappedItems;\n          onSwitchWrappedItemIntoView?.(options.overflowItem);\n        }\n        return true;\n      },\n    ];\n  }, [container, onSwitchWrappedItemIntoView, orientation]);\n\n  const resizeObserver = useMemo(() => {\n    const { sizeProp } = MEASURES[orientation];\n    let currentSize = 0;\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const { [sizeProp]: actualSize } = entry.contentRect;\n        // This is important. Sometimes tiny sub-pixel differeces\n        // can be reported, which break the layout assumptions\n        const size = Math.round(actualSize as number);\n        if (isValidNumber(size) && currentSize !== size) {\n          currentSize = size;\n          handleResize();\n        }\n      }\n    });\n  }, [handleResize, orientation]);\n\n  useLayoutEffectSkipFirst(() => {\n    handleResize();\n  }, [handleResize, itemCount]);\n\n  useMemo(() => {\n    if (container) {\n      resizeObserver.observe(container);\n    }\n  }, [container, resizeObserver]);\n\n  const callbackRef = useCallback((el: HTMLDivElement | null) => {\n    setContainer((containerRef.current = el));\n  }, []);\n\n  const handleDrop = useCallback(\n    ({ fromIndex, toIndex }: DropOptions) => {\n      onMoveItem?.(fromIndex, toIndex);\n    },\n    [onMoveItem],\n  );\n\n  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } =\n    useDragDrop({\n      allowDragDrop,\n      containerRef,\n      // this is for useDragDropNext\n      draggableClassName: `vuuOverflowContainer`,\n      // extendedDropZone: overflowedItems.length > 0,\n      onDrop: handleDrop,\n      orientation: \"horizontal\",\n      itemQuery: \".vuuOverflowContainer-item\",\n    });\n\n  return {\n    menuActionHandler,\n    menuBuilder,\n    onItemMouseDown: dragDropHookHandleMouseDown,\n    rootRef: callbackRef,\n    ...dragDropHook,\n  };\n};\n"],"names":["useState","useRef","NO_WRAPPED_ITEMS","useCallback","getNonWrappedAndWrappedItems","applyOverflowClassToWrappedItems","overflowIndicatorHasWrappedButShouldNotHave","correctForWrappedOverflowIndicator","highPriorityItemsHaveWrappedButShouldNotHave","correctForWrappedHighPriorityItems","removeOverflowIndicatorIfNoLongerNeeded","useMemo","switchWrappedItemIntoView","MEASURES","isValidNumber","useLayoutEffectSkipFirst","useDragDrop"],"mappings":";;;;;;;;AA6BO,MAAM,uBAAuB,CAAC;AAAA,EACnC,aAAgB,GAAA,KAAA;AAAA,EAChB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAAgC,IAAI,CAAA;AACtE,EAAM,MAAA,eAAA,GAAkBC,aAAuBC,8BAAgB,CAAA;AAE/D,EAAM,MAAA,YAAA,GAAeD,aAA8B,IAAI,CAAA;AAEvD,EAAM,MAAA,mBAAA,GAAsBE,iBAAY,CAAA,CAAC,QAAyB,KAAA;AAChE,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAA,YAAA,CAAa,QACV,aAAc,CAAA,gDAAgD,CAC7D,EAAA,YAAA,CAAa,YAAY,QAAQ,CAAA;AAAA;AACvC,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,YAAA,GAAeA,kBAAY,YAAY;AAC3C,IAAA,IAAI,SAAW,EAAA;AACb,MAAI,IAAA,CAAC,UAAY,EAAA,OAAO,CAAI,GAAAC,0CAAA;AAAA,QAC1B,SAAA;AAAA,QACA;AAAA,OACF;AACA,MAAAC,8CAAA;AAAA,QACE,SAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF;AACA,MAAI,IAAAC,yDAAA,CAA4C,OAAO,CAAG,EAAA;AACxD,QAAA,OAAA,GAAU,MAAMC,gDAAA;AAAA,UACd,SAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MACE,OAAAC,0DAAA,CAA6C,UAAY,EAAA,OAAO,CAChE,EAAA;AACA,QAAC,CAAA,UAAA,EAAY,OAAO,CAAA,GAAI,MAAMC,gDAAA;AAAA,UAC5B,SAAA;AAAA,UACA,UAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,QAAI,IAAAC,qDAAA,CAAwC,SAAW,EAAA,WAAW,CAAG,EAAA;AACnE,UAAU,OAAA,GAAAR,8BAAA;AAAA;AACZ;AAGF,MAAA,IAAI,gBAAgB,OAAQ,CAAA,MAAA,KAAW,CAAK,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AAC9D,QAAA,mBAAA,CAAoB,GAAG,CAAA;AAAA,iBACd,eAAgB,CAAA,OAAA,CAAQ,SAAS,CAAK,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACrE,QAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA;AAG1B,MAAA,eAAA,CAAgB,OAAU,GAAA,OAAA;AAAA;AAC5B,GACC,EAAA,CAAC,SAAW,EAAA,WAAA,EAAa,mBAAmB,CAAC,CAAA;AAEhD,EAAM,MAAA,eAAA,GAAkB,CACtB,GAGG,KAAA,OAAO,QAAQ,QAAY,IAAA,GAAA,KAAQ,QAAQ,cAAkB,IAAA,GAAA;AAElE,EAAA,MAAM,CAAC,WAAA,EAAa,iBAAiB,CAAA,GAAIS,cAAQ,MAG5C;AACH,IAAO,OAAA;AAAA,MACL,MAAM;AACJ,QAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,eAAA;AAC/B,QAAO,OAAA,SAAA,CAAU,GAAI,CAAA,CAAC,IAAuB,KAAA;AAC3C,UAAO,OAAA;AAAA,YACL,OAAO,IAAK,CAAA,KAAA;AAAA,YACZ,EAAA,EAAI,CAAiB,cAAA,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,YAC/B,OAAA,EAAS,EAAE,YAAA,EAAc,IAAK;AAAA,WAChC;AAAA,SACD,CAAA;AAAA,OACH;AAAA;AAAA;AAAA,MAGA,CAAC,YAAY,OAAY,KAAA;AACvB,QAAI,IAAA,SAAA,IAAa,eAAgB,CAAA,OAAO,CAAG,EAAA;AAEzC,UAAM,MAAA,GAAG,YAAY,CAAI,GAAAC,uCAAA;AAAA,YACvB,SAAA;AAAA,YACA,OAAQ,CAAA,YAAA;AAAA,YACR;AAAA,WACF;AACA,UAAA,eAAA,CAAgB,OAAU,GAAA,YAAA;AAC1B,UAAA,2BAAA,GAA8B,QAAQ,YAAY,CAAA;AAAA;AAEpD,QAAO,OAAA,IAAA;AAAA;AACT,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,2BAAA,EAA6B,WAAW,CAAC,CAAA;AAExD,EAAM,MAAA,cAAA,GAAiBD,cAAQ,MAAM;AACnC,IAAA,MAAM,EAAE,QAAA,EAAa,GAAAE,iBAAA,CAAS,WAAW,CAAA;AACzC,IAAA,IAAI,WAAc,GAAA,CAAA;AAClB,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,EAAE,CAAC,QAAQ,GAAG,UAAA,KAAe,KAAM,CAAA,WAAA;AAGzC,QAAM,MAAA,IAAA,GAAO,IAAK,CAAA,KAAA,CAAM,UAAoB,CAAA;AAC5C,QAAA,IAAIC,sBAAc,CAAA,IAAI,CAAK,IAAA,WAAA,KAAgB,IAAM,EAAA;AAC/C,UAAc,WAAA,GAAA,IAAA;AACd,UAAa,YAAA,EAAA;AAAA;AACf;AACF,KACD,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,WAAW,CAAC,CAAA;AAE9B,EAAAC,iCAAA,CAAyB,MAAM;AAC7B,IAAa,YAAA,EAAA;AAAA,GACZ,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA;AAE5B,EAAAJ,aAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,cAAA,CAAe,QAAQ,SAAS,CAAA;AAAA;AAClC,GACC,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAM,MAAA,WAAA,GAAcR,iBAAY,CAAA,CAAC,EAA8B,KAAA;AAC7D,IAAc,YAAA,CAAA,YAAA,CAAa,UAAU,EAAG,CAAA;AAAA,GAC1C,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAa,GAAAA,iBAAA;AAAA,IACjB,CAAC,EAAE,SAAW,EAAA,OAAA,EAA2B,KAAA;AACvC,MAAA,UAAA,GAAa,WAAW,OAAO,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,EAAE,WAAa,EAAA,2BAAA,EAA6B,GAAG,YAAA,KACnDa,uBAAY,CAAA;AAAA,IACV,aAAA;AAAA,IACA,YAAA;AAAA;AAAA,IAEA,kBAAoB,EAAA,CAAA,oBAAA,CAAA;AAAA;AAAA,IAEpB,MAAQ,EAAA,UAAA;AAAA,IACR,WAAa,EAAA,YAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACZ,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAiB,EAAA,2BAAA;AAAA,IACjB,OAAS,EAAA,WAAA;AAAA,IACT,GAAG;AAAA,GACL;AACF;;;;"}

package/cjs/packages/vuu-ui-controls/src/price-ticker/PriceTicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PriceTicker.js","sources":["../../../../../src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  },\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":["numericFormatter","memo","useWindow","useComponentCssInjection","priceTickerCss","useRef","useMemo","isValidNumber","getMovingValueDirection","jsxs","jsx"],"mappings":";;;;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzBA,yBAAiB,CAAA;AAAA,EACf,IAAM,EAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,UAAY,EAAA;AAAA,MACV,QAAA;AAAA,MACA,OAAS,EAAA;AAAA;AACX;AAEJ,CAAC,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,CAAA;AAQ3C,MAAM,WAAc,GAAAC,UAAA;AAAA,EACzB,CAAC;AAAA,IACC,SAAA;AAAA,IACA,QAAW,GAAA,CAAA;AAAA,IACX,KAAA;AAAA,IACA,SAAA;AAAA,IACA,GAAG;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAeC,gBAAU,EAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,GAAA,GAAMC,aAAc,aAAa,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA;AACvC,IAAM,MAAA,YAAA,GAAeC,cAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAYC,uBAAc,SAAS,CAAA,GACrCC,iCAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA;AAE/B,IACE,uBAAAC,eAAA,CAAC,SAAK,GAAG,cAAA,EAAgB,WAAW,EAAG,CAAA,SAAA,EAAW,SAAW,EAAA,SAAS,CACnE,EAAA,QAAA,EAAA;AAAA,MAAA,YAAA,CAAa,KAAK,CAAA;AAAA,MAClB,SAAY,mBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA;AAAA,KAClD,EAAA,CAAA;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/cjs/packages/vuu-ui-controls/src/sortable-list/SortableList.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var sortable = require('../../../../node_modules/@dnd-kit/react/sortable.js');
+var react = require('@dnd-kit/react');
+var React = require('react');
+
+const SortableOption = ({
+  id,
+  index,
+  value,
+  ...optionProps
+}) => {
+  const { ref } = sortable.useSortable({ id, index });
+  return /* @__PURE__ */ jsxRuntime.jsx(core.Option, { ...optionProps, id, ref, value });
+};
+const SortableList = ({
+  children,
+  onReorderListItems,
+  ...listBoxProps
+}) => {
+  const listRef = React.useRef(null);
+  const handleDragEnd = React.useCallback(() => {
+    setTimeout(() => {
+      const listItems = listRef.current?.querySelectorAll(".saltOption");
+      if (listItems) {
+        const items = Array.from(listItems).map(({ id }) => id);
+        onReorderListItems?.(items);
+      }
+    }, 300);
+  }, [onReorderListItems]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(core.ListBox, { ...listBoxProps, ref: listRef, children }) });
+};
+
+exports.SortableList = SortableList;
+exports.SortableOption = SortableOption;
+//# sourceMappingURL=SortableList.js.map