@vuu-ui/vuu-ui-controls 0.9.2 → 0.10.0

package/cjs/list/useList.js.map

@@ -1 +1 @@
-{"version":3,"file":"useList.js","sources":["../../src/list/useList.ts"],"sourcesContent":["import { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  RefCallback,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  hasSelection,\n  isMultiSelection,\n  isSingleSelection,\n  ListHandlers,\n  MultiSelectionHandler,\n  SelectHandler,\n  SelectionStrategy,\n  SingleSelectionHandler,\n} from \"../common-hooks\";\nimport { DragStartHandler, useDragDrop } from \"../drag-drop\";\nimport {\n  closestListItemIndex,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useTypeahead,\n  useViewportTracking,\n} from \"./common-hooks\";\n\nimport { ListControlProps, ListHookProps, ListHookResult } from \"./listTypes\";\nimport { useListDrop } from \"./useListDrop\";\n\nexport const useList = <Item, S extends SelectionStrategy>({\n  allowDragDrop = false,\n  collapsibleHeaders,\n  collectionHook: dataHook,\n  contentRef,\n  defaultHighlightedIndex,\n  defaultSelected,\n  disabled,\n  disableAriaActiveDescendant,\n  disableHighlightOnFocus,\n  disableTypeToSelect,\n  highlightedIndex: highlightedIndexProp,\n  id,\n  label = \"\",\n  listHandlers: listHandlersProp,\n  onClick: onClickProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onKeyboardNavigation,\n  onKeyDown,\n  onMoveListItem,\n  onSelect,\n  onSelectionChange,\n  restoreLastFocus,\n  selected,\n  selectionStrategy,\n  selectionKeys,\n  stickyHeaders,\n  tabToSelect,\n  viewportRange,\n}: ListHookProps<Item, S>): ListHookResult<Item> => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const lastSelection = useRef<string[] | undefined>(\n    selected || defaultSelected,\n  );\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIndex: number) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIndex);\n    onKeyboardNavigation?.(evt, nextIndex);\n  };\n\n  // TODO where do these belong ?\n  const handleSelect = useCallback<SelectHandler>(\n    (evt, selectedId) => {\n      if (onSelect) {\n        if (selectedId !== null) {\n          onSelect(evt, dataHook.itemById(selectedId));\n        }\n      }\n    },\n    [dataHook, onSelect],\n  );\n\n  const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    if (el) {\n      containerRef.current = el;\n      scrollContainerRef.current = el.querySelector(\".vuuList-viewport\");\n    }\n  }, []);\n\n  const handleSelectionChange = useCallback<MultiSelectionHandler>(\n    (evt, selected) => {\n      // TODO what about empty selection\n      if (onSelectionChange) {\n        if (isSingleSelection(selectionStrategy)) {\n          const [selectedItem] = selected;\n          (onSelectionChange as SingleSelectionHandler<Item>)(\n            evt,\n            dataHook.itemById(selectedItem),\n          );\n        } else if (isMultiSelection(selectionStrategy)) {\n          const selectedItems = selected.map((id) => dataHook.itemById(id));\n          (onSelectionChange as MultiSelectionHandler<Item>)(\n            evt,\n            selectedItems,\n          );\n        }\n      }\n    },\n    [dataHook, onSelectionChange, selectionStrategy],\n  );\n\n  const {\n    highlightedIndex,\n    containerProps: {\n      onKeyDown: navigationKeyDown,\n      onMouseMove: navigationMouseMove,\n      ...navigationControlProps\n    },\n    setHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef: scrollContainerRef,\n    defaultHighlightedIndex,\n    disableHighlightOnFocus,\n    highlightedIndex: highlightedIndexProp,\n    itemCount: dataHook.data.length,\n    label,\n    onHighlight,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    restoreLastFocus,\n    selected: lastSelection.current,\n    viewportItemCount: 10,\n  });\n\n  const collapsibleHook = useCollapsibleGroups({\n    collapsibleHeaders,\n    highlightedIdx: highlightedIndex,\n    collectionHook: dataHook,\n  });\n\n  const handleDragStart = useCallback<DragStartHandler>(\n    (dragDropState) => {\n      setHighlightedIndex(-1);\n      onDragStart?.(dragDropState);\n    },\n    [onDragStart, setHighlightedIndex],\n  );\n\n  const selectionHook = useSelection({\n    containerRef,\n    defaultSelected,\n    highlightedIndex: highlightedIndex,\n    itemQuery: \".vuuListItem\",\n    label: `${label}:useList`,\n    onClick: onClickProp,\n    onSelect: handleSelect,\n    onSelectionChange: handleSelectionChange,\n    selected,\n    selectionStrategy,\n    selectionKeys,\n    tabToSelect,\n  });\n\n  const { handleDrop, onDropSettle } = useListDrop<Item>({\n    dataHook,\n    onDrop,\n    onMoveListItem,\n    selected: selectionHook.selected,\n    setHighlightedIndex,\n    setSelected: selectionHook.setSelected,\n  });\n\n  const { setSelected } = selectionHook;\n  useLayoutEffectSkipFirst(() => {\n    if (hasSelection(lastSelection.current)) {\n      setSelected([]);\n    }\n  }, [selected, dataHook.data, setSelected]);\n\n  const {\n    onMouseDown,\n    isDragging,\n    isScrolling: isDragDropScrolling,\n    ...dragDropHook\n  } = useDragDrop({\n    allowDragDrop,\n    draggableClassName: \"list-item\",\n    orientation: \"vertical\",\n    containerRef,\n    id,\n    itemQuery: \".vuuListItem\",\n    onDragStart: handleDragStart,\n    onDrop: handleDrop,\n    onDropSettle,\n    viewportRange,\n  });\n\n  const { onKeyDown: typeaheadOnKeyDown } = useTypeahead<Item>({\n    disableTypeToSelect,\n    highlightedIdx: highlightedIndex,\n    highlightItemAtIndex: setHighlightedIndex,\n    typeToNavigate: true,\n    items: dataHook.data,\n  });\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      if (!evt.defaultPrevented) {\n        typeaheadOnKeyDown?.(evt);\n      }\n      // We still let the keyboard navigation hook process the event even\n      // if it has been handled by the typeahead hook. That is so it can\n      // correctly manage the focusVisible state.\n      navigationKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook?.onKeyDown?.(evt);\n      }\n\n      if (!evt.defaultPrevented) {\n        onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook,\n      navigationKeyDown,\n      onKeyDown,\n      selectionHook.listHandlers,\n      typeaheadOnKeyDown,\n    ],\n  );\n\n  // This is only appropriate when we are directly controlling a List,\n  // not when a control is manipulating the list\n  const { isScrolling: isViewportScrolling, scrollIntoView } =\n    useViewportTracking({\n      containerRef: scrollContainerRef,\n      contentRef,\n      highlightedIdx: highlightedIndex,\n      indexPositions: dataHook.data,\n      stickyHeaders,\n    });\n\n  const isScrolling =\n    isViewportScrolling.current || isDragDropScrolling.current;\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      if (!isScrolling && !disabled && !isDragging) {\n        navigationMouseMove();\n        const idx = closestListItemIndex(evt.target as HTMLElement);\n        if (idx !== -1 && idx !== highlightedIndex) {\n          const item = dataHook.data[idx];\n          if (!item || item.disabled) {\n            setHighlightedIndex(-1);\n          } else {\n            setHighlightedIndex(idx);\n          }\n        }\n      }\n    },\n    [\n      isDragging,\n      isScrolling,\n      disabled,\n      setHighlightedIndex,\n      navigationMouseMove,\n      highlightedIndex,\n      dataHook.data,\n    ],\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIndex === undefined ||\n    highlightedIndex === -1 ||\n    disableAriaActiveDescendant\n      ? undefined\n      : dataHook.data[highlightedIndex]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  // controlProps ?\n  const listControlProps: ListControlProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: navigationControlProps.onBlur,\n    onFocus: navigationControlProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDown: onMouseDown,\n    onMouseDownCapture: navigationControlProps.onMouseDownCapture,\n    onMouseLeave: navigationControlProps.onMouseLeave,\n  };\n\n  const listHandlers: ListHandlers = listHandlersProp || {\n    onClick: selectionHook.listHandlers.onClick,\n    // MouseEnter would be much better for this. There is a bug in Cypress\n    // wheby it emits spurious MouseEnter (and MouseOver) events around\n    // keypress events, which break many tests.\n    onMouseMove: handleMouseMove,\n  };\n\n  return {\n    containerRef,\n    setContainerRef,\n    focusVisible: keyboardHook.focusVisible,\n    controlledHighlighting: keyboardHook.controlledHighlighting,\n    highlightedIndex,\n    keyboardNavigation: keyboardHook.keyboardNavigation,\n    listHandlers,\n    listItemHeaderHandlers: collapsibleHook,\n    listControlProps,\n    scrollIntoView,\n    //TODO given that we firs onSelect and onSelectionCHange with Item(s), should we return Item(s) here ?\n    selected: selectionHook.selected,\n    setHighlightedIndex,\n    setIgnoreFocus: keyboardHook.setIgnoreFocus,\n    setSelected: selectionHook.setSelected,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useCallback","selected","isSingleSelection","isMultiSelection","id","useKeyboardNavigation","useCollapsibleGroups","useSelection","useListDrop","useLayoutEffectSkipFirst","hasSelection","useDragDrop","useTypeahead","useViewportTracking","closestListItemIndex"],"mappings":"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"}
+{"version":3,"file":"useList.js","sources":["../../src/list/useList.ts"],"sourcesContent":["import { useLayoutEffectSkipFirst } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  RefCallback,\n  useCallback,\n  useRef,\n} from \"react\";\nimport {\n  hasSelection,\n  isMultiSelection,\n  isSingleSelection,\n  ListHandlers,\n  MultiSelectionHandler,\n  SelectHandler,\n  SelectionStrategy,\n  SingleSelectionHandler,\n} from \"../common-hooks\";\nimport { DragStartHandler, useDragDrop } from \"../drag-drop\";\nimport {\n  closestListItemIndex,\n  useCollapsibleGroups,\n  useKeyboardNavigation,\n  useSelection,\n  useTypeahead,\n  useViewportTracking,\n} from \"./common-hooks\";\n\nimport { ListControlProps, ListHookProps, ListHookResult } from \"./listTypes\";\nimport { useListDrop } from \"./useListDrop\";\n\nexport const useList = <Item, S extends SelectionStrategy>({\n  allowDragDrop = false,\n  collapsibleHeaders,\n  collectionHook: dataHook,\n  contentRef,\n  defaultHighlightedIndex,\n  defaultSelected,\n  disabled,\n  disableAriaActiveDescendant,\n  disableHighlightOnFocus,\n  disableTypeToSelect,\n  highlightedIndex: highlightedIndexProp,\n  id,\n  label = \"\",\n  listHandlers: listHandlersProp,\n  onClick: onClickProp,\n  onDragStart,\n  onDrop,\n  onHighlight,\n  onKeyboardNavigation,\n  onKeyDown,\n  onMoveListItem,\n  onSelect,\n  onSelectionChange,\n  restoreLastFocus,\n  selected,\n  selectionStrategy,\n  selectionKeys,\n  stickyHeaders,\n  tabToSelect,\n  viewportRange,\n}: ListHookProps<Item, S>): ListHookResult<Item> => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const scrollContainerRef = useRef<HTMLDivElement | null>(null);\n\n  const lastSelection = useRef<string[] | undefined>(\n    selected || defaultSelected,\n  );\n  const handleKeyboardNavigation = (evt: KeyboardEvent, nextIndex: number) => {\n    selectionHook.listHandlers.onKeyboardNavigation?.(evt, nextIndex);\n    onKeyboardNavigation?.(evt, nextIndex);\n  };\n\n  // TODO where do these belong ?\n  const handleSelect = useCallback<SelectHandler>(\n    (evt, selectedId) => {\n      if (onSelect) {\n        if (selectedId !== null) {\n          onSelect(evt, dataHook.itemById(selectedId));\n        }\n      }\n    },\n    [dataHook, onSelect],\n  );\n\n  const setContainerRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    if (el) {\n      containerRef.current = el;\n      scrollContainerRef.current = el.querySelector(\".vuuList-viewport\");\n    }\n  }, []);\n\n  const handleSelectionChange = useCallback<MultiSelectionHandler>(\n    (evt, selected) => {\n      // TODO what about empty selection\n      if (onSelectionChange) {\n        if (isSingleSelection(selectionStrategy)) {\n          const [selectedItem] = selected;\n          (onSelectionChange as SingleSelectionHandler<Item>)(\n            evt,\n            dataHook.itemById(selectedItem),\n          );\n        } else if (isMultiSelection(selectionStrategy)) {\n          const selectedItems = selected.map((id) => dataHook.itemById(id));\n          (onSelectionChange as MultiSelectionHandler<Item>)(\n            evt,\n            selectedItems,\n          );\n        }\n      }\n    },\n    [dataHook, onSelectionChange, selectionStrategy],\n  );\n\n  const {\n    highlightedIndex,\n    containerProps: {\n      onKeyDown: navigationKeyDown,\n      onMouseMove: navigationMouseMove,\n      ...navigationControlProps\n    },\n    setHighlightedIndex,\n    ...keyboardHook\n  } = useKeyboardNavigation({\n    containerRef: scrollContainerRef,\n    defaultHighlightedIndex,\n    disableHighlightOnFocus,\n    highlightedIndex: highlightedIndexProp,\n    itemCount: dataHook.data.length,\n    label,\n    onHighlight,\n    onKeyboardNavigation: handleKeyboardNavigation,\n    restoreLastFocus,\n    selected: lastSelection.current,\n    viewportItemCount: 10,\n  });\n\n  const collapsibleHook = useCollapsibleGroups({\n    collapsibleHeaders,\n    highlightedIdx: highlightedIndex,\n    collectionHook: dataHook,\n  });\n\n  const handleDragStart = useCallback<DragStartHandler>(\n    (dragDropState) => {\n      setHighlightedIndex(-1);\n      onDragStart?.(dragDropState);\n    },\n    [onDragStart, setHighlightedIndex],\n  );\n\n  const selectionHook = useSelection({\n    containerRef,\n    defaultSelected,\n    highlightedIndex: highlightedIndex,\n    itemQuery: \".vuuListItem\",\n    label: `${label}:useList`,\n    onClick: onClickProp,\n    onSelect: handleSelect,\n    onSelectionChange: handleSelectionChange,\n    selected,\n    selectionStrategy,\n    selectionKeys,\n    tabToSelect,\n  });\n\n  const { handleDrop, onDropSettle } = useListDrop<Item>({\n    dataHook,\n    onDrop,\n    onMoveListItem,\n    selected: selectionHook.selected,\n    setHighlightedIndex,\n    setSelected: selectionHook.setSelected,\n  });\n\n  const { setSelected } = selectionHook;\n  useLayoutEffectSkipFirst(() => {\n    if (hasSelection(lastSelection.current)) {\n      setSelected([]);\n    }\n  }, [selected, dataHook.data, setSelected]);\n\n  const {\n    onMouseDown,\n    isDragging,\n    isScrolling: isDragDropScrolling,\n    ...dragDropHook\n  } = useDragDrop({\n    allowDragDrop,\n    draggableClassName: \"list-item\",\n    orientation: \"vertical\",\n    containerRef,\n    id,\n    itemQuery: \".vuuListItem\",\n    onDragStart: handleDragStart,\n    onDrop: handleDrop,\n    onDropSettle,\n    viewportRange,\n  });\n\n  const { onKeyDown: typeaheadOnKeyDown } = useTypeahead<Item>({\n    disableTypeToSelect,\n    highlightedIdx: highlightedIndex,\n    highlightItemAtIndex: setHighlightedIndex,\n    typeToNavigate: true,\n    items: dataHook.data,\n  });\n\n  const handleKeyDown = useCallback(\n    (evt: KeyboardEvent) => {\n      if (!evt.defaultPrevented) {\n        typeaheadOnKeyDown?.(evt);\n      }\n      // We still let the keyboard navigation hook process the event even\n      // if it has been handled by the typeahead hook. That is so it can\n      // correctly manage the focusVisible state.\n      navigationKeyDown(evt);\n      if (!evt.defaultPrevented) {\n        selectionHook.listHandlers.onKeyDown?.(evt);\n      }\n      if (!evt.defaultPrevented) {\n        collapsibleHook?.onKeyDown?.(evt);\n      }\n\n      if (!evt.defaultPrevented) {\n        onKeyDown?.(evt);\n      }\n    },\n    [\n      collapsibleHook,\n      navigationKeyDown,\n      onKeyDown,\n      selectionHook.listHandlers,\n      typeaheadOnKeyDown,\n    ],\n  );\n\n  // This is only appropriate when we are directly controlling a List,\n  // not when a control is manipulating the list\n  const { isScrolling: isViewportScrolling, scrollIntoView } =\n    useViewportTracking({\n      containerRef: scrollContainerRef,\n      contentRef,\n      highlightedIdx: highlightedIndex,\n      indexPositions: dataHook.data,\n      stickyHeaders,\n    });\n\n  const isScrolling =\n    isViewportScrolling.current || isDragDropScrolling.current;\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      if (!isScrolling && !disabled && !isDragging) {\n        navigationMouseMove();\n        const idx = closestListItemIndex(evt.target as HTMLElement);\n        if (idx !== -1 && idx !== highlightedIndex) {\n          const item = dataHook.data[idx];\n          if (!item || item.disabled) {\n            setHighlightedIndex(-1);\n          } else {\n            setHighlightedIndex(idx);\n          }\n        }\n      }\n    },\n    [\n      isDragging,\n      isScrolling,\n      disabled,\n      setHighlightedIndex,\n      navigationMouseMove,\n      highlightedIndex,\n      dataHook.data,\n    ],\n  );\n\n  const getActiveDescendant = () =>\n    highlightedIndex === undefined ||\n    highlightedIndex === -1 ||\n    disableAriaActiveDescendant\n      ? undefined\n      : dataHook.data[highlightedIndex]?.id;\n\n  // We need this on reEntry for navigation hook to handle focus\n  lastSelection.current = selectionHook.selected;\n\n  // controlProps ?\n  const listControlProps: ListControlProps = {\n    \"aria-activedescendant\": getActiveDescendant(),\n    onBlur: navigationControlProps.onBlur,\n    onFocus: navigationControlProps.onFocus,\n    onKeyDown: handleKeyDown,\n    onMouseDown: onMouseDown,\n    onMouseDownCapture: navigationControlProps.onMouseDownCapture,\n    onMouseLeave: navigationControlProps.onMouseLeave,\n  };\n\n  const listHandlers: ListHandlers = listHandlersProp || {\n    onClick: selectionHook.listHandlers.onClick,\n    // MouseEnter would be much better for this. There is a bug in Cypress\n    // wheby it emits spurious MouseEnter (and MouseOver) events around\n    // keypress events, which break many tests.\n    onMouseMove: handleMouseMove,\n  };\n\n  return {\n    containerRef,\n    setContainerRef,\n    focusVisible: keyboardHook.focusVisible,\n    controlledHighlighting: keyboardHook.controlledHighlighting,\n    highlightedIndex,\n    keyboardNavigation: keyboardHook.keyboardNavigation,\n    listHandlers,\n    listItemHeaderHandlers: collapsibleHook,\n    listControlProps,\n    scrollIntoView,\n    //TODO given that we firs onSelect and onSelectionCHange with Item(s), should we return Item(s) here ?\n    selected: selectionHook.selected,\n    setHighlightedIndex,\n    setIgnoreFocus: keyboardHook.setIgnoreFocus,\n    setSelected: selectionHook.setSelected,\n    ...dragDropHook,\n  };\n};\n"],"names":["useRef","useCallback","selected","isSingleSelection","isMultiSelection","id","useKeyboardNavigation","useCollapsibleGroups","useSelection","useListDrop","useLayoutEffectSkipFirst","hasSelection","useDragDrop","useTypeahead","useViewportTracking","closestListItemIndex"],"mappings":"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"}

package/cjs/list/useListDrop.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListDrop.js","sources":["../../src/list/useListDrop.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport { CollectionHookResult, hasSelection } from \"../common-hooks\";\nimport { DropHandler } from \"../drag-drop\";\nimport { MoveItemHandler } from \"./listTypes\";\n\nexport interface ListDropProps<Item = string> {\n  dataHook: CollectionHookResult<Item>;\n  onDrop?: DropHandler;\n  onMoveListItem?: MoveItemHandler;\n  selected: string[];\n  setHighlightedIndex: (idx: number) => void;\n  setSelected: (selected: string[]) => void;\n}\n\nexport const useListDrop = <Item>({\n  dataHook,\n  onDrop,\n  onMoveListItem,\n  selected,\n  setHighlightedIndex,\n  setSelected,\n}: ListDropProps<Item>) => {\n  // Used to preserve selection across a drop event.\n  const selectedByIndexRef = useRef<number[]>([]);\n\n  /** prevent recreating reorderSelectedIndices when dataHook changes */\n  const dataHookRef = useRef(dataHook);\n  dataHookRef.current = dataHook;\n\n  const adjustIndex = useCallback(\n    (index: number, fromIndex: number, toIndex: number) => {\n      if (index === fromIndex) {\n        return toIndex;\n      } else if (\n        index < Math.min(fromIndex, toIndex) ||\n        index > Math.max(fromIndex, toIndex)\n      ) {\n        return index;\n      }\n      if (fromIndex < index) {\n        return index - 1;\n      } else {\n        return index + 1;\n      }\n    },\n    []\n  );\n\n  // Used after a drop event, to calculate wht the new selected indices will be\n  const reorderSelectedIndices = useCallback(\n    (selected: string[], fromIndex: number, toIndex: number) => {\n      const selectedIndices = selected.map((id) =>\n        dataHookRef.current.indexOfItemById(id)\n      );\n      return selectedIndices.map((item) =>\n        adjustIndex(item, fromIndex, toIndex)\n      );\n    },\n    [adjustIndex]\n  );\n\n  const handleDrop = useCallback<DropHandler>(\n    (options) => {\n      const { fromIndex, toIndex } = options;\n      if (hasSelection(selected)) {\n        selectedByIndexRef.current = reorderSelectedIndices(\n          selected,\n          fromIndex,\n          toIndex\n        );\n      }\n\n      if (options.isExternal) {\n        onDrop?.(options);\n      } else {\n        onMoveListItem?.(fromIndex, toIndex);\n      }\n      setHighlightedIndex(-1);\n    },\n    [\n      selected,\n      setHighlightedIndex,\n      reorderSelectedIndices,\n      onDrop,\n      onMoveListItem,\n    ]\n  );\n\n  const handleDropSettle = useCallback(\n    (toIndex: number) => {\n      setHighlightedIndex(toIndex);\n    },\n    [setHighlightedIndex]\n  );\n\n  useEffect(() => {\n    const { current: selectedByIndex } = selectedByIndexRef;\n    if (hasSelection(selectedByIndex)) {\n      selectedByIndexRef.current = [];\n      const postDropSelected = Array.isArray(selectedByIndex)\n        ? selectedByIndex.map((i) => dataHook.data[i].id)\n        : dataHook.data[selectedByIndex].id;\n\n      selectedByIndexRef.current = [];\n      // TODO gave up trying to figure out how to type this correctly\n      setSelected(postDropSelected as any);\n    }\n  }, [dataHook.data, setSelected]);\n\n  return {\n    handleDrop,\n    onDropSettle: handleDropSettle,\n  };\n};\n"],"names":["useRef","useCallback","selected","hasSelection","useEffect"],"mappings":"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"}
+{"version":3,"file":"useListDrop.js","sources":["../../src/list/useListDrop.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\nimport { CollectionHookResult, hasSelection } from \"../common-hooks\";\nimport { DropHandler } from \"../drag-drop\";\nimport { MoveItemHandler } from \"./listTypes\";\n\nexport interface ListDropProps<Item = string> {\n  dataHook: CollectionHookResult<Item>;\n  onDrop?: DropHandler;\n  onMoveListItem?: MoveItemHandler;\n  selected: string[];\n  setHighlightedIndex: (idx: number) => void;\n  setSelected: (selected: string[]) => void;\n}\n\nexport const useListDrop = <Item>({\n  dataHook,\n  onDrop,\n  onMoveListItem,\n  selected,\n  setHighlightedIndex,\n  setSelected,\n}: ListDropProps<Item>) => {\n  // Used to preserve selection across a drop event.\n  const selectedByIndexRef = useRef<number[]>([]);\n\n  /** prevent recreating reorderSelectedIndices when dataHook changes */\n  const dataHookRef = useRef(dataHook);\n  dataHookRef.current = dataHook;\n\n  const adjustIndex = useCallback(\n    (index: number, fromIndex: number, toIndex: number) => {\n      if (index === fromIndex) {\n        return toIndex;\n      } else if (\n        index < Math.min(fromIndex, toIndex) ||\n        index > Math.max(fromIndex, toIndex)\n      ) {\n        return index;\n      }\n      if (fromIndex < index) {\n        return index - 1;\n      } else {\n        return index + 1;\n      }\n    },\n    []\n  );\n\n  // Used after a drop event, to calculate wht the new selected indices will be\n  const reorderSelectedIndices = useCallback(\n    (selected: string[], fromIndex: number, toIndex: number) => {\n      const selectedIndices = selected.map((id) =>\n        dataHookRef.current.indexOfItemById(id)\n      );\n      return selectedIndices.map((item) =>\n        adjustIndex(item, fromIndex, toIndex)\n      );\n    },\n    [adjustIndex]\n  );\n\n  const handleDrop = useCallback<DropHandler>(\n    (options) => {\n      const { fromIndex, toIndex } = options;\n      if (hasSelection(selected)) {\n        selectedByIndexRef.current = reorderSelectedIndices(\n          selected,\n          fromIndex,\n          toIndex\n        );\n      }\n\n      if (options.isExternal) {\n        onDrop?.(options);\n      } else {\n        onMoveListItem?.(fromIndex, toIndex);\n      }\n      setHighlightedIndex(-1);\n    },\n    [\n      selected,\n      setHighlightedIndex,\n      reorderSelectedIndices,\n      onDrop,\n      onMoveListItem,\n    ]\n  );\n\n  const handleDropSettle = useCallback(\n    (toIndex: number) => {\n      setHighlightedIndex(toIndex);\n    },\n    [setHighlightedIndex]\n  );\n\n  useEffect(() => {\n    const { current: selectedByIndex } = selectedByIndexRef;\n    if (hasSelection(selectedByIndex)) {\n      selectedByIndexRef.current = [];\n      const postDropSelected = Array.isArray(selectedByIndex)\n        ? selectedByIndex.map((i) => dataHook.data[i].id)\n        : dataHook.data[selectedByIndex].id;\n\n      selectedByIndexRef.current = [];\n      // TODO gave up trying to figure out how to type this correctly\n      setSelected(postDropSelected as any);\n    }\n  }, [dataHook.data, setSelected]);\n\n  return {\n    handleDrop,\n    onDropSettle: handleDropSettle,\n  };\n};\n"],"names":["useRef","useCallback","selected","hasSelection","useEffect"],"mappings":"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"}

package/cjs/list/useListHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useListHeight.js","sources":["../../src/list/useListHeight.ts"],"sourcesContent":["import { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport { RefCallback, useCallback, useMemo, useRef, useState } from \"react\";\nimport { HeightOnly, ResizeHandler, useResizeObserver } from \"../common-hooks\";\n\nexport interface ListHeightHookProps {\n  displayedItemCount: number;\n  getItemHeight?: (index: number) => number;\n  height?: number | string;\n  itemCount: number;\n  itemGapSize: number;\n  itemHeight?: number;\n  size: MeasuredSize | undefined;\n}\n\nexport interface HeightHookResult {\n  computedListHeight: number | undefined;\n  contentHeight: number;\n  listClientHeight?: number;\n  listItemHeight: number;\n  rowHeightProxyRef: RefCallback<HTMLDivElement>;\n}\n\nconst getContentHeight = (\n  itemCount: number,\n  itemHeight: number,\n  itemGapSize = 0,\n) => {\n  if (itemCount === 0) {\n    return 0;\n  } else if (itemGapSize === 0) {\n    return itemCount * itemHeight;\n  } else {\n    return itemCount - 1 * (itemHeight + itemGapSize) + itemHeight;\n  }\n};\n\nexport const useListHeight = ({\n  displayedItemCount,\n  getItemHeight,\n  // TODO no need to incur the cost of a resizeObserver if height is explicit\n  height,\n  itemCount,\n  itemGapSize,\n  itemHeight: itemHeightProp = 36,\n  size,\n}: ListHeightHookProps): HeightHookResult => {\n  // TODO default by density\n  const [measuredItemHeight, setMeasuredItemHeight] =\n    useState<number>(itemHeightProp);\n  // Not 100% sure why we need this forceUpdate\n  const [, forceUpdate] = useState({});\n  // This is a ref to the 'item proxy' a hiden list item used to detect css driven\n  // size changes (e.g. runtime density switch)\n  const proxyItemRef = useRef<HTMLDivElement | null>(null);\n\n  const [contentHeight, computedListHeight] = useMemo(() => {\n    let result = 0;\n    const itemHeight = measuredItemHeight ?? itemHeightProp;\n    const contentHeight = getContentHeight(itemCount, itemHeight, itemGapSize);\n    if (height !== undefined) {\n      // TODO if this is a percentage, convert to number\n      return [contentHeight, undefined];\n    }\n\n    // if there are 0 items we render with the preferred count\n    const preferredItemCount =\n      Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n    if (typeof getItemHeight === \"function\") {\n      result +=\n        Array(preferredItemCount)\n          .fill(0)\n          .reduce<number>(\n            (total, _, index) => total + getItemHeight(index) + itemGapSize,\n            0,\n          ) -\n        // We don't want gap after the last item\n        itemGapSize;\n    } else {\n      result +=\n        preferredItemCount * Number(itemHeight) +\n        (preferredItemCount - 1) * itemGapSize;\n    }\n\n    const listHeight = result;\n\n    return [contentHeight, listHeight];\n  }, [\n    displayedItemCount,\n    getItemHeight,\n    height,\n    itemCount,\n    itemGapSize,\n    itemHeightProp,\n    measuredItemHeight,\n  ]);\n\n  const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      setMeasuredItemHeight(height);\n    }\n  }, []);\n\n  const rowHeightProxyRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    proxyItemRef.current = el;\n    forceUpdate({});\n  }, []);\n\n  useResizeObserver(proxyItemRef, HeightOnly, handleRowHeight, true);\n\n  return {\n    computedListHeight,\n    contentHeight,\n    listClientHeight: size?.height,\n    listItemHeight: measuredItemHeight,\n    rowHeightProxyRef,\n  };\n};\n"],"names":["useState","useRef","useMemo","contentHeight","useCallback","height","useResizeObserver","HeightOnly"],"mappings":"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"}
+{"version":3,"file":"useListHeight.js","sources":["../../src/list/useListHeight.ts"],"sourcesContent":["import { MeasuredSize } from \"@vuu-ui/vuu-ui-controls\";\nimport { RefCallback, useCallback, useMemo, useRef, useState } from \"react\";\nimport { HeightOnly, ResizeHandler, useResizeObserver } from \"../common-hooks\";\n\nexport interface ListHeightHookProps {\n  displayedItemCount: number;\n  getItemHeight?: (index: number) => number;\n  height?: number | string;\n  itemCount: number;\n  itemGapSize: number;\n  itemHeight?: number;\n  size: MeasuredSize | undefined;\n}\n\nexport interface HeightHookResult {\n  computedListHeight: number | undefined;\n  contentHeight: number;\n  listClientHeight?: number;\n  listItemHeight: number;\n  rowHeightProxyRef: RefCallback<HTMLDivElement>;\n}\n\nconst getContentHeight = (\n  itemCount: number,\n  itemHeight: number,\n  itemGapSize = 0,\n) => {\n  if (itemCount === 0) {\n    return 0;\n  } else if (itemGapSize === 0) {\n    return itemCount * itemHeight;\n  } else {\n    return itemCount - 1 * (itemHeight + itemGapSize) + itemHeight;\n  }\n};\n\nexport const useListHeight = ({\n  displayedItemCount,\n  getItemHeight,\n  // TODO no need to incur the cost of a resizeObserver if height is explicit\n  height,\n  itemCount,\n  itemGapSize,\n  itemHeight: itemHeightProp = 36,\n  size,\n}: ListHeightHookProps): HeightHookResult => {\n  // TODO default by density\n  const [measuredItemHeight, setMeasuredItemHeight] =\n    useState<number>(itemHeightProp);\n  // Not 100% sure why we need this forceUpdate\n  const [, forceUpdate] = useState({});\n  // This is a ref to the 'item proxy' a hiden list item used to detect css driven\n  // size changes (e.g. runtime density switch)\n  const proxyItemRef = useRef<HTMLDivElement | null>(null);\n\n  const [contentHeight, computedListHeight] = useMemo(() => {\n    let result = 0;\n    const itemHeight = measuredItemHeight ?? itemHeightProp;\n    const contentHeight = getContentHeight(itemCount, itemHeight, itemGapSize);\n    if (height !== undefined) {\n      // TODO if this is a percentage, convert to number\n      return [contentHeight, undefined];\n    }\n\n    // if there are 0 items we render with the preferred count\n    const preferredItemCount =\n      Math.min(displayedItemCount, itemCount) || displayedItemCount;\n\n    if (typeof getItemHeight === \"function\") {\n      result +=\n        Array(preferredItemCount)\n          .fill(0)\n          .reduce<number>(\n            (total, _, index) => total + getItemHeight(index) + itemGapSize,\n            0,\n          ) -\n        // We don't want gap after the last item\n        itemGapSize;\n    } else {\n      result +=\n        preferredItemCount * Number(itemHeight) +\n        (preferredItemCount - 1) * itemGapSize;\n    }\n\n    const listHeight = result;\n\n    return [contentHeight, listHeight];\n  }, [\n    displayedItemCount,\n    getItemHeight,\n    height,\n    itemCount,\n    itemGapSize,\n    itemHeightProp,\n    measuredItemHeight,\n  ]);\n\n  const handleRowHeight: ResizeHandler = useCallback(({ height }) => {\n    if (typeof height === \"number\") {\n      setMeasuredItemHeight(height);\n    }\n  }, []);\n\n  const rowHeightProxyRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    proxyItemRef.current = el;\n    forceUpdate({});\n  }, []);\n\n  useResizeObserver(proxyItemRef, HeightOnly, handleRowHeight, true);\n\n  return {\n    computedListHeight,\n    contentHeight,\n    listClientHeight: size?.height,\n    listItemHeight: measuredItemHeight,\n    rowHeightProxyRef,\n  };\n};\n"],"names":["useState","useRef","useMemo","contentHeight","useCallback","height","useResizeObserver","HeightOnly"],"mappings":"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"}

package/cjs/list/useScrollPosition.js.map

@@ -1 +1 @@
-{"version":3,"file":"useScrollPosition.js","sources":["../../src/list/useScrollPosition.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { UIEvent, useCallback, useMemo, useRef, useState } from \"react\";\n\nexport type ViewportRange = {\n  atEnd: boolean;\n  atStart: boolean;\n  from: number;\n  to: number;\n};\n\ninterface ScrollPositionHookProps {\n  containerSize: number;\n  itemCount: number;\n  itemGapSize?: number;\n  itemSize: number;\n  onViewportScroll?: (\n    firstVisibleItemIndex: number,\n    lastVisibleitemIndex: number\n  ) => void;\n}\n\nconst getRange = (\n  scrollPos: number,\n  height: number,\n  itemCount: number,\n  itemHeight: number\n): ViewportRange => {\n  const viewportRowCount = Math.ceil(height / itemHeight);\n  const from = Math.floor(scrollPos / itemHeight);\n  const to = Math.ceil(from + viewportRowCount - 1);\n  return {\n    atStart: from === 0,\n    atEnd: to === itemCount - 1,\n    from,\n    to,\n  };\n};\n\nexport const useScrollPosition = ({\n  containerSize: listHeight,\n  itemCount: listItemCount,\n  itemGapSize: listItemGapSize = 0,\n  itemSize: listItemHeight,\n  onViewportScroll,\n}: ScrollPositionHookProps) => {\n  const firstVisibleRowRef = useRef(0);\n  const lastVisibleRowRef = useRef(0);\n  const scrollPosRef = useRef(0);\n\n  const range = useMemo(() => {\n    return getRange(\n      scrollPosRef.current,\n      listHeight,\n      listItemCount,\n      listItemHeight + listItemGapSize\n    );\n  }, [listHeight, listItemCount, listItemHeight, listItemGapSize]);\n\n  const [viewportRange, setViewportRange] = useState<ViewportRange>(range);\n\n  useIsomorphicLayoutEffect(() => {\n    setViewportRange(range);\n  }, [range]);\n\n  const handleVerticalScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      const scrollTop = (e.target as HTMLElement).scrollTop;\n      if (scrollTop !== scrollPosRef.current) {\n        scrollPosRef.current = scrollTop;\n        const itemHeight = listItemHeight + listItemGapSize;\n        const range = getRange(\n          scrollTop,\n          listHeight,\n          listItemCount,\n          itemHeight\n        );\n        if (\n          range.from !== firstVisibleRowRef.current ||\n          range.to !== lastVisibleRowRef.current\n        ) {\n          firstVisibleRowRef.current = range.from;\n          lastVisibleRowRef.current = range.to;\n          onViewportScroll?.(range.from, range.to);\n          setViewportRange(range);\n        }\n      }\n    },\n    [\n      listItemHeight,\n      listItemGapSize,\n      listHeight,\n      listItemCount,\n      onViewportScroll,\n    ]\n  );\n\n  return {\n    onVerticalScroll: handleVerticalScroll,\n    viewportRange,\n  };\n};\n"],"names":["useRef","useMemo","useState","useIsomorphicLayoutEffect","useCallback","range"],"mappings":"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"}
+{"version":3,"file":"useScrollPosition.js","sources":["../../src/list/useScrollPosition.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { UIEvent, useCallback, useMemo, useRef, useState } from \"react\";\n\nexport type ViewportRange = {\n  atEnd: boolean;\n  atStart: boolean;\n  from: number;\n  to: number;\n};\n\ninterface ScrollPositionHookProps {\n  containerSize: number;\n  itemCount: number;\n  itemGapSize?: number;\n  itemSize: number;\n  onViewportScroll?: (\n    firstVisibleItemIndex: number,\n    lastVisibleitemIndex: number\n  ) => void;\n}\n\nconst getRange = (\n  scrollPos: number,\n  height: number,\n  itemCount: number,\n  itemHeight: number\n): ViewportRange => {\n  const viewportRowCount = Math.ceil(height / itemHeight);\n  const from = Math.floor(scrollPos / itemHeight);\n  const to = Math.ceil(from + viewportRowCount - 1);\n  return {\n    atStart: from === 0,\n    atEnd: to === itemCount - 1,\n    from,\n    to,\n  };\n};\n\nexport const useScrollPosition = ({\n  containerSize: listHeight,\n  itemCount: listItemCount,\n  itemGapSize: listItemGapSize = 0,\n  itemSize: listItemHeight,\n  onViewportScroll,\n}: ScrollPositionHookProps) => {\n  const firstVisibleRowRef = useRef(0);\n  const lastVisibleRowRef = useRef(0);\n  const scrollPosRef = useRef(0);\n\n  const range = useMemo(() => {\n    return getRange(\n      scrollPosRef.current,\n      listHeight,\n      listItemCount,\n      listItemHeight + listItemGapSize\n    );\n  }, [listHeight, listItemCount, listItemHeight, listItemGapSize]);\n\n  const [viewportRange, setViewportRange] = useState<ViewportRange>(range);\n\n  useIsomorphicLayoutEffect(() => {\n    setViewportRange(range);\n  }, [range]);\n\n  const handleVerticalScroll = useCallback(\n    (e: UIEvent<HTMLElement>) => {\n      const scrollTop = (e.target as HTMLElement).scrollTop;\n      if (scrollTop !== scrollPosRef.current) {\n        scrollPosRef.current = scrollTop;\n        const itemHeight = listItemHeight + listItemGapSize;\n        const range = getRange(\n          scrollTop,\n          listHeight,\n          listItemCount,\n          itemHeight\n        );\n        if (\n          range.from !== firstVisibleRowRef.current ||\n          range.to !== lastVisibleRowRef.current\n        ) {\n          firstVisibleRowRef.current = range.from;\n          lastVisibleRowRef.current = range.to;\n          onViewportScroll?.(range.from, range.to);\n          setViewportRange(range);\n        }\n      }\n    },\n    [\n      listItemHeight,\n      listItemGapSize,\n      listHeight,\n      listItemCount,\n      onViewportScroll,\n    ]\n  );\n\n  return {\n    onVerticalScroll: handleVerticalScroll,\n    viewportRange,\n  };\n};\n"],"names":["useRef","useMemo","useState","useIsomorphicLayoutEffect","useCallback","range"],"mappings":";;;;;AAqBA,MAAM,QAAW,GAAA,CACf,SACA,EAAA,MAAA,EACA,WACA,UACkB,KAAA;AAClB,EAAA,MAAM,gBAAmB,GAAA,IAAA,CAAK,IAAK,CAAA,MAAA,GAAS,UAAU,CAAA;AACtD,EAAA,MAAM,IAAO,GAAA,IAAA,CAAK,KAAM,CAAA,SAAA,GAAY,UAAU,CAAA;AAC9C,EAAA,MAAM,EAAK,GAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,mBAAmB,CAAC,CAAA;AAChD,EAAO,OAAA;AAAA,IACL,SAAS,IAAS,KAAA,CAAA;AAAA,IAClB,KAAA,EAAO,OAAO,SAAY,GAAA,CAAA;AAAA,IAC1B,IAAA;AAAA,IACA;AAAA,GACF;AACF,CAAA;AAEO,MAAM,oBAAoB,CAAC;AAAA,EAChC,aAAe,EAAA,UAAA;AAAA,EACf,SAAW,EAAA,aAAA;AAAA,EACX,aAAa,eAAkB,GAAA,CAAA;AAAA,EAC/B,QAAU,EAAA,cAAA;AAAA,EACV;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,kBAAA,GAAqBA,aAAO,CAAC,CAAA;AACnC,EAAM,MAAA,iBAAA,GAAoBA,aAAO,CAAC,CAAA;AAClC,EAAM,MAAA,YAAA,GAAeA,aAAO,CAAC,CAAA;AAE7B,EAAM,MAAA,KAAA,GAAQC,cAAQ,MAAM;AAC1B,IAAO,OAAA,QAAA;AAAA,MACL,YAAa,CAAA,OAAA;AAAA,MACb,UAAA;AAAA,MACA,aAAA;AAAA,MACA,cAAiB,GAAA;AAAA,KACnB;AAAA,KACC,CAAC,UAAA,EAAY,aAAe,EAAA,cAAA,EAAgB,eAAe,CAAC,CAAA;AAE/D,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAwB,KAAK,CAAA;AAEvE,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,GACxB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,oBAAuB,GAAAC,iBAAA;AAAA,IAC3B,CAAC,CAA4B,KAAA;AAC3B,MAAM,MAAA,SAAA,GAAa,EAAE,MAAuB,CAAA,SAAA;AAC5C,MAAI,IAAA,SAAA,KAAc,aAAa,OAAS,EAAA;AACtC,QAAA,YAAA,CAAa,OAAU,GAAA,SAAA;AACvB,QAAA,MAAM,aAAa,cAAiB,GAAA,eAAA;AACpC,QAAA,MAAMC,MAAQ,GAAA,QAAA;AAAA,UACZ,SAAA;AAAA,UACA,UAAA;AAAA,UACA,aAAA;AAAA,UACA;AAAA,SACF;AACA,QAAA,IACEA,OAAM,IAAS,KAAA,kBAAA,CAAmB,WAClCA,MAAM,CAAA,EAAA,KAAO,kBAAkB,OAC/B,EAAA;AACA,UAAA,kBAAA,CAAmB,UAAUA,MAAM,CAAA,IAAA;AACnC,UAAA,iBAAA,CAAkB,UAAUA,MAAM,CAAA,EAAA;AAClC,UAAmBA,gBAAAA,GAAAA,MAAAA,CAAM,IAAMA,EAAAA,MAAAA,CAAM,EAAE,CAAA;AACvC,UAAA,gBAAA,CAAiBA,MAAK,CAAA;AAAA;AACxB;AACF,KACF;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,eAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EAAO,OAAA;AAAA,IACL,gBAAkB,EAAA,oBAAA;AAAA,IAClB;AAAA,GACF;AACF;;;;"}

package/cjs/measured-container/MeasuredContainer.js

@@ -34,6 +34,7 @@ const MeasuredContainer = React.forwardRef(function MeasuredContainer2({
   const unmeasured = innerSize === void 0;
   const getStyle = () => {
     return unmeasured ? {
+      ...style,
       "--measured-css-height": `${cssSize.height}`,
       "--measured-css-width": `${cssSize.width}`
     } : {

package/cjs/measured-container/MeasuredContainer.js.map

@@ -1 +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 extends HTMLAttributes<HTMLDivElement> {\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          \"--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":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,sBAAA,CAAA;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,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0BC,yCAAqB,CAAA;AAAA,IACtE,MAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,qBAAA,CAAA;AAC/B,EAAA,MAAM,aAAa,SAAc,KAAA,KAAA,CAAA,CAAA;AAEjC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,OAAO,UACF,GAAA;AAAA,MACC,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,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,CAAA;AAAA,KAC5C,CAAA;AAAA,GACN,CAAA;AAEA,EAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA,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,YAAA;AAAA,KAAA;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,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC;;;;"}
+{"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/measured-container/useMeasuredContainer.js

@@ -120,7 +120,10 @@ const useMeasuredContainer = ({
   );
   React.useEffect(() => {
     if (size.inner) {
-      onResizeProp?.(size.inner);
+      if (containerRef.current) {
+        size.inner.width = containerRef.current.clientWidth;
+        onResizeProp?.(size.inner);
+      }
     }
   }, [onResizeProp, size.inner]);
   useResizeObserver.useResizeObserver(containerRef, dimensions, onResize, true);

package/cjs/measured-container/useMeasuredContainer.js.map

@@ -1 +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>;\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      onResizeProp?.(size.inner);\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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"}
+{"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>;\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/measured-container/useResizeObserver.js.map

@@ -1 +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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"}
+{"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/overflow-container/OverflowContainer.js.map

@@ -1 +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      } = childEl.props;\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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"}
+{"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      } = childEl.props;\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/overflow-container/overflow-utils.js.map

@@ -1 +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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"}
+{"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/overflow-container/useOverflowContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport {\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\";\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            action: `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      ({ 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":"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"}
+{"version":3,"file":"useOverflowContainer.js","sources":["../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import { MenuActionHandler, MenuBuilder } from \"@vuu-ui/vuu-data-types\";\nimport {\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\";\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            action: `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      ({ 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":"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"}

package/cjs/price-ticker/PriceTicker.js.map

@@ -1 +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,CAAA;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,IAAA;AAAA,KACX;AAAA,GACF;AACF,CAAC,CAAA,CAAA;AAGH,MAAM,aAAA,GAAuB,CAAC,KAAA,CAAA,EAAW,KAAS,CAAA,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,cAAA;AAAA,GACmB,KAAA;AACtB,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,GAAA,GAAMC,aAAc,aAAa,CAAA,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA,CAAA;AACvC,IAAM,MAAA,YAAA,GAAeC,cAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAYC,uBAAc,SAAS,CAAA,GACrCC,iCAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA,CAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA,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,IAAA;AAAA,KAClD,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}
+{"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;;;;"}