@vuu-ui/vuu-ui-controls 0.9.1 → 0.9.3

package/esm/packages/vuu-ui-controls/src/list/common-hooks/utils/isSelected.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isSelected.js","sources":["../../../../../../../src/list/common-hooks/utils/isSelected.ts"],"sourcesContent":["import { CollectionItem } from \"../../../common-hooks/collectionTypes\";\n\nexport function isSelected<Item>(\n  selectedId: string | string[] | null,\n  item: CollectionItem<Item>\n): boolean {\n  const isSelected = Array.isArray(selectedId)\n    ? selectedId.includes(item.id)\n    : selectedId === item.id;\n  return isSelected;\n}\n"],"names":["isSelected"],"mappings":"AAEgB,SAAA,UAAA,CACd,YACA,IACS,EAAA;AACT,EAAMA,MAAAA,WAAAA,GAAa,KAAM,CAAA,OAAA,CAAQ,UAAU,CAAA,GACvC,UAAW,CAAA,QAAA,CAAS,IAAK,CAAA,EAAE,CAC3B,GAAA,UAAA,KAAe,IAAK,CAAA,EAAA;AACxB,EAAOA,OAAAA,WAAAA;AACT;;;;"}

package/esm/packages/vuu-ui-controls/src/list/useList.js.map

@@ -0,0 +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":["selected","id"],"mappings":"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"}

package/esm/packages/vuu-ui-controls/src/list/useListDrop.js.map

@@ -0,0 +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":["selected"],"mappings":"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"}

package/esm/packages/vuu-ui-controls/src/list/useListHeight.js.map

@@ -0,0 +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":["contentHeight","height"],"mappings":"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"}

package/esm/packages/vuu-ui-controls/src/list/useScrollPosition.js.map

@@ -0,0 +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":["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,GAAqB,OAAO,CAAC,CAAA;AACnC,EAAM,MAAA,iBAAA,GAAoB,OAAO,CAAC,CAAA;AAClC,EAAM,MAAA,YAAA,GAAe,OAAO,CAAC,CAAA;AAE7B,EAAM,MAAA,KAAA,GAAQ,QAAQ,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,GAAI,SAAwB,KAAK,CAAA;AAEvE,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,gBAAA,CAAiB,KAAK,CAAA;AAAA,GACxB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,oBAAuB,GAAA,WAAA;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,MAAMA,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/esm/packages/vuu-ui-controls/src/measured-container/MeasuredContainer.js

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { forwardRef } from 'react';
+import { useMeasuredContainer } from './useMeasuredContainer.js';
+import { useForkRef } from '@salt-ds/core';
+import cx from 'clsx';
+import measuredContainerCss from './MeasuredContainer.css.js';
+
+const baseClass = "vuuMeasuredContainer";
+const MeasuredContainer = forwardRef(function MeasuredContainer2({
+  children,
+  className,
+  height,
+  onResize,
+  style,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "vuu-measured-container",
+    css: measuredContainerCss,
+    window: targetWindow
+  });
+  const { containerRef, ...containerMeasurements } = useMeasuredContainer({
+    height,
+    onResize,
+    width
+  });
+  const { cssSize, innerSize } = containerMeasurements;
+  const unmeasured = innerSize === void 0;
+  const getStyle = () => {
+    return unmeasured ? {
+      ...style,
+      "--measured-css-height": `${cssSize.height}`,
+      "--measured-css-width": `${cssSize.width}`
+    } : {
+      ...style,
+      "--measured-css-height": `${cssSize.height}`,
+      "--measured-css-width": `${cssSize.width}`,
+      "--measured-px-height": `${innerSize?.height}px`,
+      "--measured-px-width": `${innerSize?.width}px`
+    };
+  };
+  const forkedRef = useForkRef(containerRef, forwardedRef);
+  return unmeasured ? /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, `${baseClass}-ummeasured`),
+      style: getStyle(),
+      ref: containerRef
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, className),
+      ref: forkedRef,
+      style: getStyle(),
+      children
+    }
+  );
+});
+
+export { MeasuredContainer };
+//# sourceMappingURL=MeasuredContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MeasuredContainer.js","sources":["../../../../../src/measured-container/MeasuredContainer.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { CSSProperties, forwardRef, ForwardedRef, HTMLAttributes } from \"react\";\nimport { MeasuredSize, useMeasuredContainer } from \"./useMeasuredContainer\";\nimport { useForkRef } from \"@salt-ds/core\";\nimport cx from \"clsx\";\n\nimport measuredContainerCss from \"./MeasuredContainer.css\";\n\nexport interface MeasuredContainerProps 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          ...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":["MeasuredContainer"],"mappings":";;;;;;;;;AAqBA,MAAM,SAAY,GAAA,sBAAA;AAEL,MAAA,iBAAA,GAAoB,UAAW,CAAA,SAASA,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,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,oBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0B,oBAAqB,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,GAAY,UAAW,CAAA,YAAA,EAAc,YAAY,CAAA;AAEvD,EAAA,OAAO,UACL,mBAAA,GAAA;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,mBAAA,GAAA;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/esm/packages/vuu-ui-controls/src/measured-container/useMeasuredContainer.js

@@ -0,0 +1,137 @@
+import { isValidNumber } from '@vuu-ui/vuu-utils';
+import { useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { useResizeObserver } from './useResizeObserver.js';
+
+const ClientWidthHeight = ["clientHeight", "clientWidth"];
+const WidthOnly = ["clientWidth"];
+const HeightOnly = ["clientHeight"];
+const NO_MEASUREMENT = [];
+const isNumber = (val) => Number.isFinite(val);
+const reduceSizeHeight = (size, value) => {
+  if (value === 0) {
+    return size;
+  } else {
+    return {
+      height: size.height - value,
+      width: size.width
+    };
+  }
+};
+const getInitialValue = (value, defaultValue) => {
+  if (isValidNumber(value)) {
+    return `${value}px`;
+  } else if (typeof value === "string") {
+    return value;
+  } else {
+    return defaultValue;
+  }
+};
+const getInitialCssSize = (height, width) => {
+  return {
+    height: getInitialValue(height, "100%"),
+    width: getInitialValue(width, "auto")
+  };
+};
+const getInitialInnerSize = (height, width) => {
+  if (isValidNumber(height) && isValidNumber(width)) {
+    return {
+      height,
+      width
+    };
+  }
+};
+const useMeasuredContainer = ({
+  defaultHeight = 0,
+  defaultWidth = 0,
+  height,
+  onResize: onResizeProp,
+  width
+}) => {
+  const containerRef = useRef(null);
+  const [size, setSize] = useState({
+    css: getInitialCssSize(height, width),
+    inner: getInitialInnerSize(height, width),
+    outer: {
+      height: height ?? "100%",
+      width: width ?? "auto"
+    }
+  });
+  const fixedHeight = typeof height === "number";
+  const fixedWidth = typeof width === "number";
+  const dimensions = fixedHeight && fixedWidth ? NO_MEASUREMENT : fixedHeight ? WidthOnly : fixedWidth ? HeightOnly : ClientWidthHeight;
+  useMemo(() => {
+    setSize((currentSize) => {
+      const { inner, outer } = currentSize;
+      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
+        const { height: innerHeight, width: innerWidth } = inner;
+        const { height: outerHeight, width: outerWidth } = outer;
+        if (outerHeight !== height || outerWidth !== width) {
+          const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+          return {
+            ...currentSize,
+            outer: { height, width },
+            inner: { height: height - heightDiff, width: width - widthDiff }
+          };
+        }
+      }
+      return currentSize;
+    });
+  }, [height, width]);
+  const onResize = useCallback(
+    ({ clientWidth, clientHeight }) => {
+      const { css, inner, outer } = size;
+      let newState = size;
+      if (fixedHeight && isNumber(clientWidth) && Math.floor(clientWidth) !== inner?.width) {
+        newState = {
+          css,
+          outer,
+          inner: {
+            width: Math.floor(clientWidth) || defaultWidth,
+            height
+          }
+        };
+      } else if (fixedWidth && isNumber(clientHeight) && Math.floor(clientHeight) !== inner?.height) {
+        newState = {
+          css,
+          outer,
+          inner: {
+            height: Math.floor(clientHeight) || defaultHeight,
+            width
+          }
+        };
+      } else if (isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== inner?.width || clientHeight !== inner?.height)) {
+        newState = {
+          css,
+          outer,
+          inner: {
+            width: Math.floor(clientWidth) || defaultWidth,
+            height: Math.floor(clientHeight) || defaultHeight
+          }
+        };
+      }
+      if (newState !== size) {
+        setSize(newState);
+      }
+    },
+    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width]
+  );
+  useEffect(() => {
+    if (size.inner) {
+      if (containerRef.current) {
+        size.inner.width = containerRef.current.clientWidth;
+        onResizeProp?.(size.inner);
+      }
+    }
+  }, [onResizeProp, size.inner]);
+  useResizeObserver(containerRef, dimensions, onResize, true);
+  return {
+    containerRef,
+    cssSize: size.css,
+    outerSize: size.outer,
+    innerSize: size.inner
+  };
+};
+
+export { reduceSizeHeight, useMeasuredContainer };
+//# sourceMappingURL=useMeasuredContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useMeasuredContainer.js","sources":["../../../../../src/measured-container/useMeasuredContainer.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport {\n  CSSProperties,\n  RefObject,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { MeasuredContainerProps } from \"./MeasuredContainer\";\nimport { useResizeObserver, ResizeHandler } from \"./useResizeObserver\";\n\nconst ClientWidthHeight = [\"clientHeight\", \"clientWidth\"];\nconst WidthOnly = [\"clientWidth\"];\nconst HeightOnly = [\"clientHeight\"];\nconst NO_MEASUREMENT = [] as const;\n\nexport interface ClientSize {\n  clientHeight: number;\n  clientWidth: number;\n}\n\nexport interface MeasuredProps\n  extends Pick<MeasuredContainerProps, \"height\" | \"onResize\" | \"width\"> {\n  defaultHeight?: number;\n  defaultWidth?: number;\n}\n\nexport type CssSize = Pick<CSSProperties, \"height\" | \"width\">;\n\nexport interface MeasuredSize {\n  height: number;\n  width: number;\n}\n\ninterface MeasuredState {\n  css: CssSize;\n  outer: CssSize;\n  inner?: MeasuredSize;\n}\n\nconst isNumber = (val: unknown): val is number => Number.isFinite(val);\n\nexport interface MeasuredContainerHookResult {\n  containerRef: RefObject<HTMLDivElement>;\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":[],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowContainer.js","sources":["../../../../../src/overflow-container/OverflowContainer.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { asReactElements, orientationType, useId } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport React, { ForwardedRef, forwardRef, HTMLAttributes } from \"react\";\nimport { OverflowItem } from \"./overflow-utils\";\nimport { useOverflowContainer } from \"./useOverflowContainer\";\n\nimport overflowContainerCss from \"./OverflowContainer.css\";\n\nconst classBase = \"vuuOverflowContainer\";\n\nexport interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  allowDragDrop?: boolean;\n  debugId?: string;\n  onMoveItem?: (fromIndex: number, toIndex: number) => void;\n  onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;\n  orientation?: orientationType;\n  overflowIcon?: string;\n  overflowPosition?: \"start\" | \"end\" | number;\n}\n\nconst WrapContainer = React.memo(\n  ({\n    PopupMenuProps,\n    allowDragDrop,\n    children,\n    id,\n    onMoveItem,\n    onSwitchWrappedItemIntoView,\n    orientation,\n    overflowIcon,\n  }: Omit<OverflowContainerProps, \"orientation\"> &\n    Required<Pick<OverflowContainerProps, \"orientation\">>) => {\n    const childElements = asReactElements(children);\n    const {\n      draggable,\n      draggedItemIndex,\n      menuActionHandler,\n      menuBuilder,\n      onItemMouseDown,\n      rootRef,\n    } = useOverflowContainer({\n      allowDragDrop,\n      itemCount: childElements.length,\n      onMoveItem,\n      onSwitchWrappedItemIntoView,\n      orientation,\n    });\n\n    const content = childElements.map((childEl, i) => {\n      const {\n        \"data-align\": align,\n        \"data-overflow-priority\": overflowPriority = \"0\",\n        id: itemId = `${id}-${i}`,\n        label = `Item ${i + 1}`,\n      } = 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","OverflowContainer"],"mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"useOverflowContainer.js","sources":["../../../../../src/overflow-container/useOverflowContainer.ts"],"sourcesContent":["import { 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":[],"mappings":";;;;;;AA6BO,MAAM,uBAAuB,CAAC;AAAA,EACnC,aAAgB,GAAA,KAAA;AAAA,EAChB,SAAA;AAAA,EACA,UAAA;AAAA,EACA,2BAAA;AAAA,EACA;AACF,CAAkC,KAAA;AAChC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAgC,IAAI,CAAA;AACtE,EAAM,MAAA,eAAA,GAAkB,OAAuB,gBAAgB,CAAA;AAE/D,EAAM,MAAA,YAAA,GAAe,OAA8B,IAAI,CAAA;AAEvD,EAAM,MAAA,mBAAA,GAAsB,WAAY,CAAA,CAAC,QAAyB,KAAA;AAChE,IAAA,IAAI,aAAa,OAAS,EAAA;AACxB,MAAA,YAAA,CAAa,QACV,aAAc,CAAA,gDAAgD,CAC7D,EAAA,YAAA,CAAa,YAAY,QAAQ,CAAA;AAAA;AACvC,GACF,EAAG,EAAE,CAAA;AAEL,EAAM,MAAA,YAAA,GAAe,YAAY,YAAY;AAC3C,IAAA,IAAI,SAAW,EAAA;AACb,MAAI,IAAA,CAAC,UAAY,EAAA,OAAO,CAAI,GAAA,4BAAA;AAAA,QAC1B,SAAA;AAAA,QACA;AAAA,OACF;AACA,MAAA,gCAAA;AAAA,QACE,SAAA;AAAA,QACA,OAAA;AAAA,QACA;AAAA,OACF;AACA,MAAI,IAAA,2CAAA,CAA4C,OAAO,CAAG,EAAA;AACxD,QAAA,OAAA,GAAU,MAAM,kCAAA;AAAA,UACd,SAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MACE,OAAA,4CAAA,CAA6C,UAAY,EAAA,OAAO,CAChE,EAAA;AACA,QAAC,CAAA,UAAA,EAAY,OAAO,CAAA,GAAI,MAAM,kCAAA;AAAA,UAC5B,SAAA;AAAA,UACA,UAAA;AAAA,UACA,OAAA;AAAA,UACA;AAAA,SACF;AAAA;AAEF,MAAI,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACxB,QAAI,IAAA,uCAAA,CAAwC,SAAW,EAAA,WAAW,CAAG,EAAA;AACnE,UAAU,OAAA,GAAA,gBAAA;AAAA;AACZ;AAGF,MAAA,IAAI,gBAAgB,OAAQ,CAAA,MAAA,KAAW,CAAK,IAAA,OAAA,CAAQ,SAAS,CAAG,EAAA;AAC9D,QAAA,mBAAA,CAAoB,GAAG,CAAA;AAAA,iBACd,eAAgB,CAAA,OAAA,CAAQ,SAAS,CAAK,IAAA,OAAA,CAAQ,WAAW,CAAG,EAAA;AACrE,QAAA,mBAAA,CAAoB,IAAI,CAAA;AAAA;AAG1B,MAAA,eAAA,CAAgB,OAAU,GAAA,OAAA;AAAA;AAC5B,GACC,EAAA,CAAC,SAAW,EAAA,WAAA,EAAa,mBAAmB,CAAC,CAAA;AAEhD,EAAM,MAAA,eAAA,GAAkB,CACtB,GAGG,KAAA,OAAO,QAAQ,QAAY,IAAA,GAAA,KAAQ,QAAQ,cAAkB,IAAA,GAAA;AAElE,EAAA,MAAM,CAAC,WAAA,EAAa,iBAAiB,CAAA,GAAI,QAAQ,MAG5C;AACH,IAAO,OAAA;AAAA,MACL,MAAM;AACJ,QAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,eAAA;AAC/B,QAAO,OAAA,SAAA,CAAU,GAAI,CAAA,CAAC,IAAuB,KAAA;AAC3C,UAAO,OAAA;AAAA,YACL,OAAO,IAAK,CAAA,KAAA;AAAA,YACZ,MAAA,EAAQ,CAAiB,cAAA,EAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AAAA,YACnC,OAAA,EAAS,EAAE,YAAA,EAAc,IAAK;AAAA,WAChC;AAAA,SACD,CAAA;AAAA,OACH;AAAA;AAAA;AAAA,MAGA,CAAC,EAAE,OAAA,EAAc,KAAA;AACf,QAAI,IAAA,SAAA,IAAa,eAAgB,CAAA,OAAO,CAAG,EAAA;AAEzC,UAAM,MAAA,GAAG,YAAY,CAAI,GAAA,yBAAA;AAAA,YACvB,SAAA;AAAA,YACA,OAAQ,CAAA,YAAA;AAAA,YACR;AAAA,WACF;AACA,UAAA,eAAA,CAAgB,OAAU,GAAA,YAAA;AAC1B,UAAA,2BAAA,GAA8B,QAAQ,YAAY,CAAA;AAAA;AAEpD,QAAO,OAAA,IAAA;AAAA;AACT,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,2BAAA,EAA6B,WAAW,CAAC,CAAA;AAExD,EAAM,MAAA,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAA,MAAM,EAAE,QAAA,EAAa,GAAA,QAAA,CAAS,WAAW,CAAA;AACzC,IAAA,IAAI,WAAc,GAAA,CAAA;AAClB,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,EAAE,CAAC,QAAQ,GAAG,UAAA,KAAe,KAAM,CAAA,WAAA;AAGzC,QAAM,MAAA,IAAA,GAAO,IAAK,CAAA,KAAA,CAAM,UAAoB,CAAA;AAC5C,QAAA,IAAI,aAAc,CAAA,IAAI,CAAK,IAAA,WAAA,KAAgB,IAAM,EAAA;AAC/C,UAAc,WAAA,GAAA,IAAA;AACd,UAAa,YAAA,EAAA;AAAA;AACf;AACF,KACD,CAAA;AAAA,GACA,EAAA,CAAC,YAAc,EAAA,WAAW,CAAC,CAAA;AAE9B,EAAA,wBAAA,CAAyB,MAAM;AAC7B,IAAa,YAAA,EAAA;AAAA,GACZ,EAAA,CAAC,YAAc,EAAA,SAAS,CAAC,CAAA;AAE5B,EAAA,OAAA,CAAQ,MAAM;AACZ,IAAA,IAAI,SAAW,EAAA;AACb,MAAA,cAAA,CAAe,QAAQ,SAAS,CAAA;AAAA;AAClC,GACC,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA;AAE9B,EAAM,MAAA,WAAA,GAAc,WAAY,CAAA,CAAC,EAA8B,KAAA;AAC7D,IAAc,YAAA,CAAA,YAAA,CAAa,UAAU,EAAG,CAAA;AAAA,GAC1C,EAAG,EAAE,CAAA;AAEL,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,EAAE,SAAW,EAAA,OAAA,EAA2B,KAAA;AACvC,MAAA,UAAA,GAAa,WAAW,OAAO,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,UAAU;AAAA,GACb;AAEA,EAAA,MAAM,EAAE,WAAa,EAAA,2BAAA,EAA6B,GAAG,YAAA,KACnD,WAAY,CAAA;AAAA,IACV,aAAA;AAAA,IACA,YAAA;AAAA;AAAA,IAEA,kBAAoB,EAAA,CAAA,oBAAA,CAAA;AAAA;AAAA,IAEpB,MAAQ,EAAA,UAAA;AAAA,IACR,WAAa,EAAA,YAAA;AAAA,IACb,SAAW,EAAA;AAAA,GACZ,CAAA;AAEH,EAAO,OAAA;AAAA,IACL,iBAAA;AAAA,IACA,WAAA;AAAA,IACA,eAAiB,EAAA,2BAAA;AAAA,IACjB,OAAS,EAAA,WAAA;AAAA,IACT,GAAG;AAAA,GACL;AACF;;;;"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"PriceTicker.js","sources":["../../../../../src/price-ticker/PriceTicker.tsx"],"sourcesContent":["import {\n  getMovingValueDirection,\n  isValidNumber,\n  numericFormatter,\n  valueChangeDirection,\n} from \"@vuu-ui/vuu-utils\";\nimport { HTMLAttributes, memo, useMemo, useRef } from \"react\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nconst classBase = \"vuuPriceTicker\";\n\nimport priceTickerCss from \"./PriceTicker.css\";\n\nconst getValueFormatter = (decimals: number) =>\n  numericFormatter({\n    type: {\n      name: \"number\",\n      formatting: {\n        decimals,\n        zeroPad: true,\n      },\n    },\n  });\n\ntype State = [number | undefined, valueChangeDirection | undefined];\nconst INITIAL_VALUE: State = [undefined, undefined];\n\nexport interface PriceTickerProps extends HTMLAttributes<HTMLDivElement> {\n  decimals?: number;\n  price?: number;\n  showArrow?: boolean;\n}\n\nexport const PriceTicker = memo(\n  ({\n    className,\n    decimals = 2,\n    price,\n    showArrow,\n    ...htmlAttributes\n  }: PriceTickerProps) => {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-price-ticker\",\n      css: priceTickerCss,\n      window: targetWindow,\n    });\n\n    const ref = useRef<State>(INITIAL_VALUE);\n    const [prevValue, prevDirection] = ref.current;\n    const formatNumber = useMemo(() => getValueFormatter(decimals), [decimals]);\n\n    const direction = isValidNumber(prevValue)\n      ? getMovingValueDirection(price, prevDirection, prevValue, decimals)\n      : \"\";\n\n    ref.current = [price, direction];\n\n    return (\n      <div {...htmlAttributes} className={cx(classBase, className, direction)}>\n        {formatNumber(price)}\n        {showArrow ? <span data-icon=\"price-arrow\" /> : null}\n      </div>\n    );\n  },\n);\nPriceTicker.displayName = \"PriceTicker\";\n"],"names":[],"mappings":";;;;;;;;AAWA,MAAM,SAAY,GAAA,gBAAA;AAIlB,MAAM,iBAAA,GAAoB,CAAC,QAAA,KACzB,gBAAiB,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,GAAA,IAAA;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,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,GAAA,GAAM,OAAc,aAAa,CAAA;AACvC,IAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,GAAI,CAAA,OAAA;AACvC,IAAM,MAAA,YAAA,GAAe,QAAQ,MAAM,iBAAA,CAAkB,QAAQ,CAAG,EAAA,CAAC,QAAQ,CAAC,CAAA;AAE1E,IAAM,MAAA,SAAA,GAAY,cAAc,SAAS,CAAA,GACrC,wBAAwB,KAAO,EAAA,aAAA,EAAe,SAAW,EAAA,QAAQ,CACjE,GAAA,EAAA;AAEJ,IAAI,GAAA,CAAA,OAAA,GAAU,CAAC,KAAA,EAAO,SAAS,CAAA;AAE/B,IACE,uBAAA,IAAA,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,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,WAAA,EAAU,eAAc,CAAK,GAAA;AAAA,KAClD,EAAA,CAAA;AAAA;AAGN;AACA,WAAA,CAAY,WAAc,GAAA,aAAA;;;;"}

package/esm/packages/vuu-ui-controls/src/split-button/SplitButton.css.js

@@ -0,0 +1,4 @@
+var splitButtonCss = ".vuuSplitButton {\n  --saltButton-background: var(--split-background);\n  --saltButton-background-hover: var(--split-background);\n  --vuuPopupMenu-background: var(--split-background);\n  --vuuPopupMenu-iconSize: 20px;\n\n  /** less verbose local refs */\n  --background: var(--vuuSplitButton-background);\n  --foreground: var(--vuuSplitButton-foreground);\n  --background-hover: var(--vuuSplitButton-background-hover);\n  --foreground-hover: var(--vuuSplitButton-foreground-hover);\n\n  --border-radius: var(--vuuSplitButton-borderRadius, 0px);\n  --main-border-radius: var(--border-radius) 0 0 var(--border-radius);\n  --trigger-border-radius: 0 var(--border-radius) var(--border-radius) 0;\n  --trigger-border-style: solid solid solid none;\n\n  align-items: center;\n  border: none;\n  border-radius: var(--border-radius);\n  display: flex;\n\n  .vuuSplitButton-main {\n    border-radius: var(--main-border-radius);\n  }\n  .vuuSplitButton-trigger {\n    border-radius: var(--trigger-border-radius);\n  }\n}\n\n.vuuSplitButton.vuuFocusVisible {\n  .saltButton {\n    outline-style: none;\n  }\n  &.vuuSplitButton-primary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-bold-background-hover)\n    );\n  }\n  &.vuuSplitButton-secondary {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-subtle-background-hover)\n    );\n  }\n  &.vuuSplitButton-cta {\n    --split-background: var(\n      --background-hover,\n      var(--salt-actionable-accented-bold-background-hover)\n    );\n    .vuuSplitButton-trigger {\n      --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n    }\n  }\n}\n\n/** TODO move into theme */\n.vuuFocusVisible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.vuuSplitButton-primary {\n  --split-background: var(\n    --background,\n    var(--salt-actionable-bold-background)\n  );\n  --split-background-active: var(--salt-actionable-bold-background-active);\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n\n.vuuSplitButton-primary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background-hover,\n    var(--salt-actionable-bold-background-hover)\n  );\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton-secondary {\n  --saltButton-borderColor: var(--split-background);\n  --split-background: var(\n    --background,\n    var(--salt-actionable-subtle-background)\n  );\n  --split-background-active: var(--salt-actionable-subtle-background-active);\n  --split-color-active: var(--salt-actionable-subtle-foreground-active);\n}\n\n.vuuSplitButton-secondary:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-subtle-background-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-subtle-foreground-hover);\n  }\n}\n\n.vuuSplitButton-cta {\n  --split-background: var(--background, var(--salt-actionable-accented-bold-background));\n  --split-background-active: var(--salt-actionable-accented-bold-background-active;\n  --split-color-active: var(--salt-actionable-bold-foreground-active);\n}\n.vuuSplitButton-cta:hover:not(.vuuSplitButton-disabled) {\n  --vuuButton-borderColor: var(--split-background);\n  --split-background: var(--salt-actionable-accented-bold-background-hover);\n  --split-color: var(--salt-actionable-bold-foreground-hover);\n  .saltButton {\n    --saltButton-text-color: var(--salt-actionable-bold-foreground-hover);\n    --vuu-icon-color: var(--salt-actionable-bold-foreground-hover);\n  }\n}\n\n.vuuSplitButton:has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--split-background-active);\n  .vuuSplitButton-trigger {\n    --vuu-icon-color: var(--split-color-active);\n  }\n}\n";
+
+export { splitButtonCss as default };
+//# sourceMappingURL=SplitButton.css.js.map

package/esm/packages/vuu-ui-controls/src/split-button/SplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitButton.js","sources":["../../../../../src/split-button/SplitButton.tsx"],"sourcesContent":["import { PopupMenu, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { Button, ButtonProps, useForkRef } from \"@salt-ds/core\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { useSplitButton } from \"./useSplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport splitButtonCss from \"./SplitButton.css\";\n\nexport interface SplitButtonProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onClick\">,\n    Pick<ButtonProps, \"onClick\"> {\n  ButtonProps?: Partial<Omit<ButtonProps, \"onClick\" | \"variant\">>;\n  PopupMenuProps?: Partial<PopupMenuProps>;\n  disabled?: boolean;\n  segmented?: boolean;\n  variant?: ButtonProps[\"variant\"];\n}\n\nconst classBase = \"vuuSplitButton\";\n\nexport const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(\n  function SplitButton(\n    {\n      ButtonProps: ButtonPropsProp,\n      PopupMenuProps: PopupMenuPropsProp,\n      children,\n      className,\n      disabled = false,\n      onClick,\n      segmented = false,\n      variant = \"primary\",\n      ...htmlAttributes\n    },\n    forwardedRef,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"vuu-split-button\",\n      css: splitButtonCss,\n      window: targetWindow,\n    });\n\n    const { ButtonProps, buttonRef, rootRef, PopupMenuProps, ...rootProps } =\n      useSplitButton({\n        ButtonProps: ButtonPropsProp,\n        PopupMenuProps: PopupMenuPropsProp,\n        classBase,\n        onClick,\n        segmented,\n      });\n\n    return (\n      <div\n        {...htmlAttributes}\n        {...rootProps}\n        className={cx(classBase, `${classBase}-${variant}`, className, {\n          [`${classBase}-disabled`]: disabled,\n          [`${classBase}-segmented`]: segmented,\n        })}\n        ref={useForkRef(forwardedRef, rootRef)}\n        data-showcase-center\n        tabIndex={-1}\n      >\n        <Button\n          {...ButtonProps}\n          className={`${classBase}-main`}\n          disabled={disabled}\n          ref={buttonRef}\n          variant={variant}\n        >\n          {children}\n        </Button>\n        <PopupMenu\n          {...PopupMenuProps}\n          className={`${classBase}-trigger`}\n          disabled={disabled}\n          icon={PopupMenuProps?.icon ?? \"chevron-down\"}\n          tabIndex={segmented ? 0 : -1}\n          variant={variant}\n        />\n      </div>\n    );\n  },\n);\n"],"names":["SplitButton","ButtonProps","PopupMenuProps"],"mappings":";;;;;;;;;;AAoBA,MAAM,SAAY,GAAA,gBAAA;AAEX,MAAM,WAAc,GAAA,UAAA;AAAA,EACzB,SAASA,YACP,CAAA;AAAA,IACE,WAAa,EAAA,eAAA;AAAA,IACb,cAAgB,EAAA,kBAAA;AAAA,IAChB,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,OAAA;AAAA,IACA,SAAY,GAAA,KAAA;AAAA,IACZ,OAAU,GAAA,SAAA;AAAA,IACV,GAAG;AAAA,KAEL,YACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAA,cAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAAC,EAAAA,YAAAA,EAAa,SAAW,EAAA,OAAA,EAAS,gBAAAC,eAAgB,EAAA,GAAG,SAAU,EAAA,GACpE,cAAe,CAAA;AAAA,MACb,WAAa,EAAA,eAAA;AAAA,MACb,cAAgB,EAAA,kBAAA;AAAA,MAChB,SAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,KACD,CAAA;AAEH,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,cAAA;AAAA,QACH,GAAG,SAAA;AAAA,QACJ,SAAA,EAAW,GAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAI,CAAA,EAAA,OAAO,IAAI,SAAW,EAAA;AAAA,UAC7D,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,QAAA;AAAA,UAC3B,CAAC,CAAA,EAAG,SAAS,CAAA,UAAA,CAAY,GAAG;AAAA,SAC7B,CAAA;AAAA,QACD,GAAA,EAAK,UAAW,CAAA,YAAA,EAAc,OAAO,CAAA;AAAA,QACrC,sBAAoB,EAAA,IAAA;AAAA,QACpB,QAAU,EAAA,CAAA,CAAA;AAAA,QAEV,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACE,GAAGD,YAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,KAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,GAAK,EAAA,SAAA;AAAA,cACL,OAAA;AAAA,cAEC;AAAA;AAAA,WACH;AAAA,0BACA,GAAA;AAAA,YAAC,SAAA;AAAA,YAAA;AAAA,cACE,GAAGC,eAAAA;AAAA,cACJ,SAAA,EAAW,GAAG,SAAS,CAAA,QAAA,CAAA;AAAA,cACvB,QAAA;AAAA,cACA,IAAA,EAAMA,iBAAgB,IAAQ,IAAA,cAAA;AAAA,cAC9B,QAAA,EAAU,YAAY,CAAI,GAAA,CAAA,CAAA;AAAA,cAC1B;AAAA;AAAA;AACF;AAAA;AAAA,KACF;AAAA;AAGN;;;;"}

package/esm/packages/vuu-ui-controls/src/split-button/SplitStateButton.css.js

@@ -0,0 +1,4 @@
+var splitStateButtonCss = ".vuuSplitStateButton {\n  --split-state-background: var(--salt-actionable-subtle-background);\n  --split-state-foreground: var(--salt-actionable-subtle-foreground);\n  --vuuSplitButton-background: var(--split-state-background);\n  --vuuSplitButton-foreground: var(--split-state-foreground);\n  --vuuSplitButton-background-hover: var(--split-state-background);\n  --vuuSplitButton-foreground-hover: var(--split-state-foreground);\n\n  .saltButton-primary:active,\n  .saltButton-primary.saltButton-active {\n    --saltButton-background-active: var(--salt-actionable-bold-background);\n    --saltButton-text-color-active: var(--salt-actionable-bold-foreground);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  --vuuButtonIcon-color: var(--salt-actionable-bold-foreground-active);\n  --saltButton-text-color: var(--salt-actionable-bold-foreground-active);\n  --saltButton-text-color-hover: var(--salt-actionable-bold-foreground-active);\n  --split-state-background: var(--salt-actionable-bold-background-active);\n  --split-state-foreground: var(--salt-actionable-bold-foreground-active);\n  &.focusVisible {\n    --split-state-background: var(--salt-actionable-bold-background-active);\n  }\n}\n\n.vuuSplitStateButton[aria-checked=\"true\"] {\n  .vuuEditableLabel-input {\n    color: var(--salt-actionable-bold-foreground-active);\n  }\n}\n\n.vuuSplitButton-main.saltButton-active + .vuuSplitButton-trigger,\n.vuuSplitButton-main:active + .vuuSplitButton-trigger {\n  --saltButton-background: var(--salt-actionable-bold-background);\n  .vuuIcon {\n    --vuu-icon-color: var(--salt-actionable-bold-foreground);\n  }\n}\n\n/** These two entries are to prevent the 'active' styling when space is pressed whilst editing a label */\n.vuuSplitStateButton:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-subtle-background);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-subtle-background);\n  }\n}\n.vuuSplitStateButton[aria-checked=\"true\"]:has(.vuuEditableLabel-editing):has(\n    .vuuSplitButton-main:active,\n    .vuuSplitButton-main.saltButton-active\n  ) {\n  --split-background: var(--salt-actionable-bold-background-active);\n  .saltButton-primary:active {\n    background: var(--salt-actionable-bold-background-active);\n  }\n}\n\n.vuuSplitStateButton:hover:not(.vuuSplitStateButton-disabled) {\n  .saltButton {\n    border-color: var(--salt-actionable-bold-foreground);\n  }\n}\n";
+
+export { splitStateButtonCss as default };
+//# sourceMappingURL=SplitStateButton.css.js.map

package/esm/packages/vuu-ui-controls/src/split-button/SplitStateButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitStateButton.js","sources":["../../../../../src/split-button/SplitStateButton.tsx"],"sourcesContent":["import { SplitButton, SplitButtonProps } from \"./SplitButton\";\nimport cx from \"clsx\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { forwardRef } from \"react\";\n\nimport splitStateButtonCss from \"./SplitStateButton.css\";\n\nconst classBase = \"vuuSplitStateButton\";\n\nexport interface SplitStateButtonProps extends SplitButtonProps {\n  selected: boolean;\n}\n\nexport const SplitStateButton = forwardRef<\n  HTMLDivElement,\n  SplitStateButtonProps\n>(function SplitStateButton(\n  { className, selected, ...splitButtonProps },\n  forwardedRef\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-split-state-button\",\n    css: splitStateButtonCss,\n    window: targetWindow,\n  });\n\n  return (\n    <SplitButton\n      {...splitButtonProps}\n      aria-checked={selected}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    />\n  );\n});\n"],"names":["SplitStateButton"],"mappings":";;;;;;;;AAQA,MAAM,SAAY,GAAA,qBAAA;AAML,MAAA,gBAAA,GAAmB,UAG9B,CAAA,SAASA,iBACT,CAAA,EAAE,WAAW,QAAU,EAAA,GAAG,gBAAiB,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAA,mBAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EACE,uBAAA,GAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACE,GAAG,gBAAA;AAAA,MACJ,cAAc,EAAA,QAAA;AAAA,MACd,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA;AAAA;AAAA,GACP;AAEJ,CAAC;;;;"}

package/esm/packages/vuu-ui-controls/src/split-button/useSplitButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSplitButton.js","sources":["../../../../../src/split-button/useSplitButton.ts"],"sourcesContent":["import { MenuCloseHandler, PopupMenuProps } from \"@vuu-ui/vuu-popups\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEventHandler,\n  useCallback,\n  useRef,\n} from \"react\";\nimport { SplitButtonProps } from \"./SplitButton\";\n\nexport interface SplitButtonHookProps\n  extends Pick<\n    SplitButtonProps,\n    \"PopupMenuProps\" | \"ButtonProps\" | \"onClick\" | \"segmented\"\n  > {\n  classBase: string;\n}\n\nconst focusTargetIsEditableLabel = (target: EventTarget) => {\n  if ((target as HTMLElement).tagName === \"INPUT\") {\n    return true;\n  }\n  return false;\n};\n\nexport const useSplitButton = ({\n  ButtonProps: ButtonPropsProp,\n  PopupMenuProps,\n  classBase,\n  onClick,\n}: // segmented,\nSplitButtonHookProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const rootRef = useRef<HTMLDivElement>(null);\n\n  const onMenuClose = useCallback<MenuCloseHandler>((reason) => {\n    if (reason?.type !== \"tab-away\") {\n      const buttonMain = rootRef.current?.querySelector(\n        \".vuuSplitButton-main\",\n      ) as HTMLElement;\n      buttonMain?.focus();\n    }\n  }, []);\n\n  const menuProps: PopupMenuProps = {\n    ...PopupMenuProps,\n    anchorElement: rootRef,\n    menuClassName: `${classBase}-menu`,\n    onMenuClose,\n    popupPlacement: \"below-full-width\",\n  };\n\n  const handleRootFocus = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    if (!splitButton?.classList.contains(\"vuuFocusVisible\")) {\n      splitButton?.classList.add(\"vuuFocusVisible\");\n      if (!focusTargetIsEditableLabel(evt.target)) {\n        requestAnimationFrame(() => {\n          buttonRef.current?.focus();\n        });\n      }\n    }\n  }, []);\n\n  const handleRootBlur = useCallback<FocusEventHandler>((evt) => {\n    const { current: splitButton } = rootRef;\n    const target = evt.relatedTarget as HTMLElement;\n    if (!splitButton?.contains(target)) {\n      if (splitButton?.classList.contains(\"vuuFocusVisible\")) {\n        splitButton.classList.remove(\"vuuFocusVisible\");\n      }\n    }\n  }, []);\n\n  const handleButtonKeyDown = useCallback<\n    KeyboardEventHandler<HTMLButtonElement>\n  >(\n    (evt) => {\n      if (evt.key === \"ArrowDown\") {\n        const popupTrigger = rootRef.current?.querySelector(\n          `.${classBase}-trigger`,\n        ) as HTMLElement;\n        if (popupTrigger) {\n          dispatchMouseEvent(popupTrigger, \"click\");\n        }\n      }\n    },\n    [classBase],\n  );\n\n  const ButtonProps = {\n    ...ButtonPropsProp,\n    onClick,\n    onKeyDown: handleButtonKeyDown,\n  };\n\n  return {\n    ButtonProps,\n    PopupMenuProps: menuProps,\n    buttonRef,\n    rootRef,\n    onBlur: handleRootBlur,\n    onFocus: handleRootFocus,\n  };\n};\n"],"names":["PopupMenuProps"],"mappings":"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"}

package/esm/packages/vuu-ui-controls/src/table-search/SearchCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchCell.js","sources":["../../../../../src/table-search/SearchCell.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TableCellRendererProps } from \"@vuu-ui/vuu-table-types\";\n\nimport searchCellCss from \"./SearchCell.css\";\n\nconst classBase = \"vuuSearchCell\";\n\n// export to avoid tree shaking, component is not consumed directly\nexport const SearchCell = ({\n  column,\n  columnMap,\n  row,\n}: TableCellRendererProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-search-cell\",\n    css: searchCellCss,\n    window: targetWindow,\n  });\n\n  //TODO what about click handling\n\n  const key = columnMap[column.name];\n  const value = row[key];\n\n  return (\n    <div className={classBase} tabIndex={-1}>\n      <span data-icon=\"draggable\" />\n      {value}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAMA,MAAM,SAAY,GAAA,eAAA;AAGX,MAAM,aAAa,CAAC;AAAA,EACzB,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAA8B,KAAA;AAC5B,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,iBAAA;AAAA,IACR,GAAK,EAAA,aAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAID,EAAM,MAAA,GAAA,GAAM,SAAU,CAAA,MAAA,CAAO,IAAI,CAAA;AACjC,EAAM,MAAA,KAAA,GAAQ,IAAI,GAAG,CAAA;AAErB,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,SAAA,EAAW,UAAU,CACnC,CAAA,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,MAAA,EAAA,EAAK,aAAU,WAAY,EAAA,CAAA;AAAA,IAC3B;AAAA,GACH,EAAA,CAAA;AAEJ;;;;"}

package/esm/packages/vuu-ui-controls/src/table-search/TableSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSearch.js","sources":["../../../../../src/table-search/TableSearch.tsx"],"sourcesContent":["import { DataSource } from \"@vuu-ui/vuu-data-types\";\nimport {\n  Table,\n  TableProps,\n  useControlledTableNavigation,\n} from \"@vuu-ui/vuu-table\";\nimport { TableConfig } from \"@vuu-ui/vuu-table-types\";\nimport { registerComponent } from \"@vuu-ui/vuu-utils\";\nimport { Input } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport cx from \"clsx\";\nimport { HTMLAttributes, RefCallback, useCallback } from \"react\";\nimport { SearchCell } from \"./SearchCell\";\nimport { useTableSearch } from \"./useTableSearch\";\n\nimport instrumentSearchCss from \"./TableSearch.css\";\n\nconst classBase = \"vuuTableSearch\";\n\nconst defaultTableConfig: TableConfig = {\n  columns: [\n    { name: \"bbg\", hidden: true },\n    {\n      name: \"description\",\n      width: 200,\n      type: {\n        name: \"string\",\n        renderer: {\n          name: \"search-cell\",\n        },\n      },\n    },\n  ],\n  rowSeparators: true,\n};\n\nexport interface TableSearchProps extends HTMLAttributes<HTMLDivElement> {\n  TableProps?: Partial<TableProps>;\n  autoFocus?: boolean;\n  dataSource: DataSource;\n  placeHolder?: string;\n  searchColumns: string[];\n}\n\nconst searchIcon = <span data-icon=\"search\" />;\n\nexport const TableSearch = ({\n  TableProps,\n  autoFocus = false,\n  className,\n  dataSource: dataSourceProp,\n  placeHolder,\n  searchColumns,\n  ...htmlAttributes\n}: TableSearchProps) => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table-search\",\n    css: instrumentSearchCss,\n    window: targetWindow,\n  });\n\n  const { dataSource, onChange, searchState } = useTableSearch({\n    dataSource: dataSourceProp,\n    searchColumns,\n  });\n\n  const { highlightedIndexRef, onHighlight, onKeyDown, tableRef } =\n    useControlledTableNavigation(-1, dataSource?.size ?? 0);\n\n  const searchCallbackRef = useCallback<RefCallback<HTMLElement>>((el) => {\n    setTimeout(() => {\n      el?.querySelector(\"input\")?.focus();\n    }, 100);\n  }, []);\n\n  return (\n    <div {...htmlAttributes} className={cx(classBase, className)}>\n      <div className={`${classBase}-inputField`}>\n        <Input\n          inputProps={{ onKeyDown }}\n          endAdornment={searchIcon}\n          placeholder={placeHolder}\n          ref={autoFocus ? searchCallbackRef : null}\n          value={searchState.searchText}\n          onChange={onChange}\n        />\n      </div>\n\n      {dataSource ? (\n        <Table\n          disableFocus\n          id=\"instrument-search\"\n          rowHeight={25}\n          config={defaultTableConfig}\n          highlightedIndex={highlightedIndexRef.current}\n          renderBufferSize={100}\n          {...TableProps}\n          className={`${classBase}-list`}\n          dataSource={dataSource}\n          navigationStyle=\"row\"\n          onHighlight={onHighlight}\n          ref={tableRef}\n          showColumnHeaders={false}\n        />\n      ) : null}\n    </div>\n  );\n};\n\nregisterComponent(\"search-cell\", SearchCell, \"cell-renderer\", {\n  serverDataType: \"private\",\n});\n\nregisterComponent?.(\"TableSearch\", TableSearch, \"view\");\n"],"names":["TableProps"],"mappings":"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"}

package/esm/packages/vuu-ui-controls/src/table-search/useTableSearch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSearch.js","sources":["../../../../../src/table-search/useTableSearch.ts"],"sourcesContent":["import { FormEventHandler, useCallback, useMemo, useState } from \"react\";\nimport { TableSearchProps } from \"./TableSearch\";\n\nexport interface TableSearchHookProps\n  extends Pick<TableSearchProps, \"dataSource\" | \"searchColumns\"> {\n  label?: string;\n}\n\nexport const useTableSearch = ({\n  dataSource,\n  searchColumns,\n}: TableSearchHookProps) => {\n  const [searchState, setSearchState] = useState<{\n    searchText: string;\n    filter: string;\n  }>({ searchText: \"\", filter: \"\" });\n\n  const baseFilterPattern = useMemo(\n    // TODO make this contains once server supports it\n    () => searchColumns.map((col) => `${col} starts \"__VALUE__\"`).join(\" or \"),\n    [searchColumns],\n  );\n\n  const handleChange = useCallback<FormEventHandler>(\n    (evt) => {\n      const { value } = evt.target as HTMLInputElement;\n      const filter = baseFilterPattern.replaceAll(\"__VALUE__\", value);\n      setSearchState({\n        searchText: value,\n        filter,\n      });\n      if (dataSource) {\n        dataSource.filter = {\n          filter,\n        };\n      }\n    },\n    [baseFilterPattern, dataSource],\n  );\n\n  return {\n    dataSource,\n    onChange: handleChange,\n    searchState,\n  };\n};\n"],"names":[],"mappings":";;AAQO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,UAAA;AAAA,EACA;AACF,CAA4B,KAAA;AAC1B,EAAM,MAAA,CAAC,WAAa,EAAA,cAAc,CAAI,GAAA,QAAA,CAGnC,EAAE,UAAY,EAAA,EAAA,EAAI,MAAQ,EAAA,EAAA,EAAI,CAAA;AAEjC,EAAA,MAAM,iBAAoB,GAAA,OAAA;AAAA;AAAA,IAExB,MAAM,aAAc,CAAA,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAG,GAAG,CAAA,mBAAA,CAAqB,CAAE,CAAA,IAAA,CAAK,MAAM,CAAA;AAAA,IACzE,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,YAAe,GAAA,WAAA;AAAA,IACnB,CAAC,GAAQ,KAAA;AACP,MAAM,MAAA,EAAE,KAAM,EAAA,GAAI,GAAI,CAAA,MAAA;AACtB,MAAA,MAAM,MAAS,GAAA,iBAAA,CAAkB,UAAW,CAAA,WAAA,EAAa,KAAK,CAAA;AAC9D,MAAe,cAAA,CAAA;AAAA,QACb,UAAY,EAAA,KAAA;AAAA,QACZ;AAAA,OACD,CAAA;AACD,MAAA,IAAI,UAAY,EAAA;AACd,QAAA,UAAA,CAAW,MAAS,GAAA;AAAA,UAClB;AAAA,SACF;AAAA;AACF,KACF;AAAA,IACA,CAAC,mBAAmB,UAAU;AAAA,GAChC;AAEA,EAAO,OAAA;AAAA,IACL,UAAA;AAAA,IACA,QAAU,EAAA,YAAA;AAAA,IACV;AAAA,GACF;AACF;;;;"}

package/esm/packages/vuu-ui-controls/src/tabs-next/TabBar.css.js

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

package/esm/packages/vuu-ui-controls/src/tabs-next/TabBar.css.js.map

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