@vuu-ui/vuu-ui-controls 0.0.26

package/cjs/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":["useRef","useCallback","selected","isSingleSelection","isMultiSelection","id","useKeyboardNavigation","useCollapsibleGroups","useSelection","useListDrop","useLayoutEffectSkipFirst","hasSelection","useDragDrop","useTypeahead","useViewportTracking","closestListItemIndex"],"mappings":"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"}

package/cjs/list/useListDrop.js

@@ -0,0 +1,92 @@
+'use strict';
+
+var React = require('react');
+require('../common-hooks/collectionProvider.js');
+require('../common-hooks/use-resize-observer.js');
+var selectionTypes = require('../common-hooks/selectionTypes.js');
+
+const useListDrop = ({
+  dataHook,
+  onDrop,
+  onMoveListItem,
+  selected,
+  setHighlightedIndex,
+  setSelected
+}) => {
+  const selectedByIndexRef = React.useRef([]);
+  const dataHookRef = React.useRef(dataHook);
+  dataHookRef.current = dataHook;
+  const adjustIndex = React.useCallback(
+    (index, fromIndex, toIndex) => {
+      if (index === fromIndex) {
+        return toIndex;
+      } else if (index < Math.min(fromIndex, toIndex) || index > Math.max(fromIndex, toIndex)) {
+        return index;
+      }
+      if (fromIndex < index) {
+        return index - 1;
+      } else {
+        return index + 1;
+      }
+    },
+    []
+  );
+  const reorderSelectedIndices = React.useCallback(
+    (selected2, fromIndex, toIndex) => {
+      const selectedIndices = selected2.map(
+        (id) => dataHookRef.current.indexOfItemById(id)
+      );
+      return selectedIndices.map(
+        (item) => adjustIndex(item, fromIndex, toIndex)
+      );
+    },
+    [adjustIndex]
+  );
+  const handleDrop = React.useCallback(
+    (options) => {
+      const { fromIndex, toIndex } = options;
+      if (selectionTypes.hasSelection(selected)) {
+        selectedByIndexRef.current = reorderSelectedIndices(
+          selected,
+          fromIndex,
+          toIndex
+        );
+      }
+      if (options.isExternal) {
+        onDrop?.(options);
+      } else {
+        onMoveListItem?.(fromIndex, toIndex);
+      }
+      setHighlightedIndex(-1);
+    },
+    [
+      selected,
+      setHighlightedIndex,
+      reorderSelectedIndices,
+      onDrop,
+      onMoveListItem
+    ]
+  );
+  const handleDropSettle = React.useCallback(
+    (toIndex) => {
+      setHighlightedIndex(toIndex);
+    },
+    [setHighlightedIndex]
+  );
+  React.useEffect(() => {
+    const { current: selectedByIndex } = selectedByIndexRef;
+    if (selectionTypes.hasSelection(selectedByIndex)) {
+      selectedByIndexRef.current = [];
+      const postDropSelected = Array.isArray(selectedByIndex) ? selectedByIndex.map((i) => dataHook.data[i].id) : dataHook.data[selectedByIndex].id;
+      selectedByIndexRef.current = [];
+      setSelected(postDropSelected);
+    }
+  }, [dataHook.data, setSelected]);
+  return {
+    handleDrop,
+    onDropSettle: handleDropSettle
+  };
+};
+
+exports.useListDrop = useListDrop;
+//# sourceMappingURL=useListDrop.js.map

package/cjs/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":["useRef","useCallback","selected","hasSelection","useEffect"],"mappings":"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"}

package/cjs/list/useListHeight.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+require('../common-hooks/collectionProvider.js');
+var useResizeObserver = require('../common-hooks/use-resize-observer.js');
+
+const getContentHeight = (itemCount, itemHeight, itemGapSize = 0) => {
+  if (itemCount === 0) {
+    return 0;
+  } else if (itemGapSize === 0) {
+    return itemCount * itemHeight;
+  } else {
+    return itemCount - 1 * (itemHeight + itemGapSize) + itemHeight;
+  }
+};
+const useListHeight = ({
+  displayedItemCount,
+  getItemHeight,
+  // TODO no need to incur the cost of a resizeObserver if height is explicit
+  height,
+  itemCount,
+  itemGapSize,
+  itemHeight: itemHeightProp = 36,
+  size
+}) => {
+  const [measuredItemHeight, setMeasuredItemHeight] = React.useState(itemHeightProp);
+  const [, forceUpdate] = React.useState({});
+  const proxyItemRef = React.useRef(null);
+  const [contentHeight, computedListHeight] = React.useMemo(() => {
+    let result = 0;
+    const itemHeight = measuredItemHeight ?? itemHeightProp;
+    const contentHeight2 = getContentHeight(itemCount, itemHeight, itemGapSize);
+    if (height !== void 0) {
+      return [contentHeight2, void 0];
+    }
+    const preferredItemCount = Math.min(displayedItemCount, itemCount) || displayedItemCount;
+    if (typeof getItemHeight === "function") {
+      result += Array(preferredItemCount).fill(0).reduce(
+        (total, _, index) => total + getItemHeight(index) + itemGapSize,
+        0
+      ) - // We don't want gap after the last item
+      itemGapSize;
+    } else {
+      result += preferredItemCount * Number(itemHeight) + (preferredItemCount - 1) * itemGapSize;
+    }
+    const listHeight = result;
+    return [contentHeight2, listHeight];
+  }, [
+    displayedItemCount,
+    getItemHeight,
+    height,
+    itemCount,
+    itemGapSize,
+    itemHeightProp,
+    measuredItemHeight
+  ]);
+  const handleRowHeight = React.useCallback(({ height: height2 }) => {
+    if (typeof height2 === "number") {
+      setMeasuredItemHeight(height2);
+    }
+  }, []);
+  const rowHeightProxyRef = React.useCallback((el) => {
+    proxyItemRef.current = el;
+    forceUpdate({});
+  }, []);
+  useResizeObserver.useResizeObserver(proxyItemRef, useResizeObserver.HeightOnly, handleRowHeight, true);
+  return {
+    computedListHeight,
+    contentHeight,
+    listClientHeight: size?.height,
+    listItemHeight: measuredItemHeight,
+    rowHeightProxyRef
+  };
+};
+
+exports.useListHeight = useListHeight;
+//# sourceMappingURL=useListHeight.js.map

package/cjs/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":["useState","useRef","useMemo","contentHeight","useCallback","height","useResizeObserver","HeightOnly"],"mappings":"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"}

package/cjs/list/useScrollPosition.js

@@ -0,0 +1,74 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var React = require('react');
+
+const getRange = (scrollPos, height, itemCount, itemHeight) => {
+  const viewportRowCount = Math.ceil(height / itemHeight);
+  const from = Math.floor(scrollPos / itemHeight);
+  const to = Math.ceil(from + viewportRowCount - 1);
+  return {
+    atStart: from === 0,
+    atEnd: to === itemCount - 1,
+    from,
+    to
+  };
+};
+const useScrollPosition = ({
+  containerSize: listHeight,
+  itemCount: listItemCount,
+  itemGapSize: listItemGapSize = 0,
+  itemSize: listItemHeight,
+  onViewportScroll
+}) => {
+  const firstVisibleRowRef = React.useRef(0);
+  const lastVisibleRowRef = React.useRef(0);
+  const scrollPosRef = React.useRef(0);
+  const range = React.useMemo(() => {
+    return getRange(
+      scrollPosRef.current,
+      listHeight,
+      listItemCount,
+      listItemHeight + listItemGapSize
+    );
+  }, [listHeight, listItemCount, listItemHeight, listItemGapSize]);
+  const [viewportRange, setViewportRange] = React.useState(range);
+  core.useIsomorphicLayoutEffect(() => {
+    setViewportRange(range);
+  }, [range]);
+  const handleVerticalScroll = React.useCallback(
+    (e) => {
+      const scrollTop = e.target.scrollTop;
+      if (scrollTop !== scrollPosRef.current) {
+        scrollPosRef.current = scrollTop;
+        const itemHeight = listItemHeight + listItemGapSize;
+        const range2 = getRange(
+          scrollTop,
+          listHeight,
+          listItemCount,
+          itemHeight
+        );
+        if (range2.from !== firstVisibleRowRef.current || range2.to !== lastVisibleRowRef.current) {
+          firstVisibleRowRef.current = range2.from;
+          lastVisibleRowRef.current = range2.to;
+          onViewportScroll?.(range2.from, range2.to);
+          setViewportRange(range2);
+        }
+      }
+    },
+    [
+      listItemHeight,
+      listItemGapSize,
+      listHeight,
+      listItemCount,
+      onViewportScroll
+    ]
+  );
+  return {
+    onVerticalScroll: handleVerticalScroll,
+    viewportRange
+  };
+};
+
+exports.useScrollPosition = useScrollPosition;
+//# sourceMappingURL=useScrollPosition.js.map

package/cjs/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":["useRef","useMemo","useState","useIsomorphicLayoutEffect","useCallback","range"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var measuredContainerCss = "\n.vuuMeasuredContainer {\n    flex: var(--vuuMeasuredContainer-flex, none);\n    height: var(--vuuMeasuredContainer-height, var(--measured-css-height));\n    min-height: 0;\n    width: var(--measured-css-width);\n  \n}";
+
+module.exports = measuredContainerCss;
+//# sourceMappingURL=MeasuredContainer.css.js.map

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

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

package/cjs/measured-container/MeasuredContainer.js

@@ -0,0 +1,69 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var React = require('react');
+var useMeasuredContainer = require('./useMeasuredContainer.js');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var MeasuredContainer$1 = require('./MeasuredContainer.css.js');
+
+const baseClass = "vuuMeasuredContainer";
+const MeasuredContainer = React.forwardRef(function MeasuredContainer2({
+  children,
+  className,
+  height,
+  onResize,
+  style,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-measured-container",
+    css: MeasuredContainer$1,
+    window: targetWindow
+  });
+  const { containerRef, ...containerMeasurements } = useMeasuredContainer.useMeasuredContainer({
+    height,
+    onResize,
+    width
+  });
+  const { cssSize, innerSize } = containerMeasurements;
+  const unmeasured = innerSize === void 0;
+  const getStyle = () => {
+    return unmeasured ? {
+      "--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 = core.useForkRef(containerRef, forwardedRef);
+  return unmeasured ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, `${baseClass}-ummeasured`),
+      style: getStyle(),
+      ref: containerRef
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(baseClass, className),
+      ref: forkedRef,
+      style: getStyle(),
+      children
+    }
+  );
+});
+
+exports.MeasuredContainer = MeasuredContainer;
+//# sourceMappingURL=MeasuredContainer.js.map

package/cjs/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          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n        } as CSSProperties)\n      : ({\n          ...style,\n          \"--measured-css-height\": `${cssSize.height}`,\n          \"--measured-css-width\": `${cssSize.width}`,\n          \"--measured-px-height\": `${innerSize?.height}px`,\n          \"--measured-px-width\": `${innerSize?.width}px`,\n        } as CSSProperties);\n  };\n\n  const forkedRef = useForkRef(containerRef, forwardedRef);\n\n  return unmeasured ? (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, `${baseClass}-ummeasured`)}\n      style={getStyle()}\n      ref={containerRef}\n    />\n  ) : (\n    <div\n      {...htmlAttributes}\n      className={cx(baseClass, className)}\n      ref={forkedRef}\n      style={getStyle()}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","MeasuredContainer","useWindow","useComponentCssInjection","measuredContainerCss","useMeasuredContainer","useForkRef","jsx"],"mappings":";;;;;;;;;;;AAqBA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAEL,MAAA,iBAAA,GAAoBA,gBAAW,CAAA,SAASC,kBACnD,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG,cAAA;AACL,CAAA,EACA,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,GAAG,qBAAA,KAA0BC,yCAAqB,CAAA;AAAA,IACtE,MAAA;AAAA,IACA,QAAA;AAAA,IACA,KAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,EAAE,OAAS,EAAA,SAAA,EAAc,GAAA,qBAAA,CAAA;AAC/B,EAAA,MAAM,aAAa,SAAc,KAAA,KAAA,CAAA,CAAA;AAEjC,EAAA,MAAM,WAAW,MAAM;AACrB,IAAA,OAAO,UACF,GAAA;AAAA,MACC,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,KAEzC,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,MACH,uBAAA,EAAyB,CAAG,EAAA,OAAA,CAAQ,MAAM,CAAA,CAAA;AAAA,MAC1C,sBAAA,EAAwB,CAAG,EAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAAA,MACxC,sBAAA,EAAwB,CAAG,EAAA,SAAA,EAAW,MAAM,CAAA,EAAA,CAAA;AAAA,MAC5C,qBAAA,EAAuB,CAAG,EAAA,SAAA,EAAW,KAAK,CAAA,EAAA,CAAA;AAAA,KAC5C,CAAA;AAAA,GACN,CAAA;AAEA,EAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,YAAA,EAAc,YAAY,CAAA,CAAA;AAEvD,EAAA,OAAO,UACL,mBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAW,EAAA,EAAA,CAAG,SAAW,EAAA,CAAA,EAAG,SAAS,CAAa,WAAA,CAAA,CAAA;AAAA,MAClD,OAAO,QAAS,EAAA;AAAA,MAChB,GAAK,EAAA,YAAA;AAAA,KAAA;AAAA,GAGP,mBAAAA,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,SAAA;AAAA,MACL,OAAO,QAAS,EAAA;AAAA,MAEf,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ,CAAC;;;;"}

package/cjs/measured-container/useMeasuredContainer.js

@@ -0,0 +1,127 @@
+'use strict';
+
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var React = require('react');
+var useResizeObserver = require('./useResizeObserver.js');
+
+const ClientWidthHeight = ["clientHeight", "clientWidth"];
+const WidthOnly = ["clientWidth"];
+const HeightOnly = ["clientHeight"];
+const NO_MEASUREMENT = [];
+const isNumber = (val) => Number.isFinite(val);
+const FULL_SIZE = { height: "100%", width: "auto" };
+const getInitialCssSize = (height, width) => {
+  if (vuuUtils.isValidNumber(height) && vuuUtils.isValidNumber(width)) {
+    return {
+      height: `${height}px`,
+      width: `${width}px`
+    };
+  } else if (typeof height === "string" || typeof width === "string") {
+    return {
+      height: height ?? "100%",
+      width: width ?? "auto"
+    };
+  } else {
+    return FULL_SIZE;
+  }
+};
+const getInitialInnerSize = (height, width) => {
+  if (vuuUtils.isValidNumber(height) && vuuUtils.isValidNumber(width)) {
+    return {
+      height,
+      width
+    };
+  }
+};
+const useMeasuredContainer = ({
+  defaultHeight = 0,
+  defaultWidth = 0,
+  height,
+  onResize: onResizeProp,
+  width
+}) => {
+  const containerRef = React.useRef(null);
+  const [size, setSize] = React.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;
+  React.useMemo(() => {
+    setSize((currentSize) => {
+      const { inner, outer } = currentSize;
+      if (vuuUtils.isValidNumber(height) && vuuUtils.isValidNumber(width) && inner && outer) {
+        const { height: innerHeight, width: innerWidth } = inner;
+        const { height: outerHeight, width: outerWidth } = outer;
+        if (outerHeight !== height || outerWidth !== width) {
+          const heightDiff = vuuUtils.isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
+          const widthDiff = vuuUtils.isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
+          return {
+            ...currentSize,
+            outer: { height, width },
+            inner: { height: height - heightDiff, width: width - widthDiff }
+          };
+        }
+      }
+      return currentSize;
+    });
+  }, [height, width]);
+  const onResize = React.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]
+  );
+  React.useEffect(() => {
+    if (size.inner) {
+      onResizeProp?.(size.inner);
+    }
+  }, [onResizeProp, size.inner]);
+  useResizeObserver.useResizeObserver(containerRef, dimensions, onResize, true);
+  return {
+    containerRef,
+    cssSize: size.css,
+    outerSize: size.outer,
+    innerSize: size.inner
+  };
+};
+
+exports.useMeasuredContainer = useMeasuredContainer;
+//# sourceMappingURL=useMeasuredContainer.js.map

package/cjs/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\nconst FULL_SIZE: CssSize = { height: \"100%\", width: \"auto\" };\n\nexport interface MeasuredContainerHookResult {\n  containerRef: RefObject<HTMLDivElement>;\n  cssSize: CssSize;\n  outerSize: CssSize;\n  innerSize?: MeasuredSize;\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  if (isValidNumber(height) && isValidNumber(width)) {\n    return {\n      height: `${height}px`,\n      width: `${width}px`,\n    };\n  } else if (typeof height === \"string\" || typeof width === \"string\") {\n    return {\n      height: height ?? \"100%\",\n      width: width ?? \"auto\",\n    };\n  } else {\n    return FULL_SIZE;\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    setSize((currentSize) => {\n      const { inner, outer } = currentSize;\n      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {\n        const { height: innerHeight, width: innerWidth } = inner;\n        const { height: outerHeight, width: outerWidth } = outer;\n\n        if (outerHeight !== height || outerWidth !== width) {\n          const heightDiff = isValidNumber(outerHeight)\n            ? outerHeight - innerHeight\n            : 0;\n          const widthDiff = isValidNumber(outerWidth)\n            ? outerWidth - innerWidth\n            : 0;\n          return {\n            ...currentSize,\n            outer: { height, width },\n            inner: { height: height - heightDiff, width: width - widthDiff },\n          };\n        }\n      }\n      return currentSize;\n    });\n  }, [height, width]);\n\n  const onResize: ResizeHandler = useCallback(\n    ({ clientWidth, clientHeight }: Partial<ClientSize>) => {\n      const { css, inner, outer } = size;\n      let newState: MeasuredState = size;\n\n      if (\n        fixedHeight &&\n        isNumber(clientWidth) &&\n        Math.floor(clientWidth) !== inner?.width\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height,\n          },\n        };\n      } else if (\n        fixedWidth &&\n        isNumber(clientHeight) &&\n        Math.floor(clientHeight) !== inner?.height\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            height: Math.floor(clientHeight) || defaultHeight,\n            width,\n          },\n        };\n      } else if (\n        isNumber(clientHeight) &&\n        isNumber(clientWidth) &&\n        (clientWidth !== inner?.width || clientHeight !== inner?.height)\n      ) {\n        newState = {\n          css,\n          outer,\n          inner: {\n            width: Math.floor(clientWidth) || defaultWidth,\n            height: Math.floor(clientHeight) || defaultHeight,\n          },\n        };\n      }\n\n      if (newState !== size) {\n        setSize(newState);\n      }\n    },\n    [defaultHeight, defaultWidth, fixedHeight, fixedWidth, height, size, width]\n  );\n\n  useEffect(() => {\n    if (size.inner) {\n      onResizeProp?.(size.inner);\n    }\n  }, [onResizeProp, size.inner]);\n\n  useResizeObserver(containerRef, dimensions, onResize, true);\n\n  return {\n    containerRef,\n    cssSize: size.css,\n    outerSize: size.outer,\n    innerSize: size.inner,\n  };\n};\n"],"names":["isValidNumber","useRef","useState","useMemo","useCallback","useEffect","useResizeObserver"],"mappings":"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"}