@itwin/itwinui-react 3.15.5 → 3.16.0

package/DEV-cjs/utils/hooks/useOverflow.js

@@ -1,76 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'useOverflow', {
-  enumerable: true,
-  get: function () {
-    return useOverflow;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _useMergedRefs = require('./useMergedRefs.js');
-const _useResizeObserver = require('./useResizeObserver.js');
-const _useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.js');
-const STARTING_MAX_ITEMS_COUNT = 20;
-const useOverflow = (
-  itemsCount,
-  disabled = false,
-  orientation = 'horizontal',
-) => {
-  let containerRef = _react.useRef(null);
-  let [visibleCount, setVisibleCount] = _react.useState(() =>
-    disabled ? itemsCount : Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT),
-  );
-  let needsFullRerender = _react.useRef(true);
-  let [containerSize, setContainerSize] = _react.useState(0);
-  let previousContainerSize = _react.useRef(0);
-  let updateContainerSize = _react.useCallback(
-    ({ width, height }) =>
-      setContainerSize('horizontal' === orientation ? width : height),
-    [orientation],
-  );
-  let [resizeRef, observer] = (0, _useResizeObserver.useResizeObserver)(
-    updateContainerSize,
-  );
-  let resizeObserverRef = _react.useRef(observer);
-  (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    if (disabled) setVisibleCount(itemsCount);
-    else {
-      setVisibleCount(Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT));
-      needsFullRerender.current = true;
-    }
-  }, [containerSize, disabled, itemsCount]);
-  let mergedRefs = (0, _useMergedRefs.useMergedRefs)(containerRef, resizeRef);
-  (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    if (!containerRef.current || disabled) {
-      resizeObserverRef.current?.disconnect();
-      return;
-    }
-    let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
-    let availableSize = containerRef.current[`offset${dimension}`];
-    let requiredSize = containerRef.current[`scroll${dimension}`];
-    if (availableSize < requiredSize) {
-      let avgItemSize = requiredSize / visibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      setVisibleCount(visibleItems > 0 ? visibleItems : 1);
-    } else if (needsFullRerender.current) {
-      let childrenSize = Array.from(containerRef.current.children).reduce(
-        (sum, child) => sum + child[`offset${dimension}`],
-        0,
-      );
-      let currentVisibleCount =
-        visibleCount || Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
-      let avgItemSize = childrenSize / currentVisibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      if (!isNaN(visibleItems))
-        setVisibleCount(Math.min(itemsCount, 2 * visibleItems));
-    }
-    needsFullRerender.current = false;
-  }, [containerSize, visibleCount, disabled, itemsCount, orientation]);
-  (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    previousContainerSize.current = containerSize;
-  }, [containerSize]);
-  return [mergedRefs, visibleCount];
-};

package/DEV-esm/utils/hooks/useOverflow.js

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { useMergedRefs } from './useMergedRefs.js';
-import { useResizeObserver } from './useResizeObserver.js';
-import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
-let STARTING_MAX_ITEMS_COUNT = 20;
-export const useOverflow = (
-  itemsCount,
-  disabled = false,
-  orientation = 'horizontal',
-) => {
-  let containerRef = React.useRef(null);
-  let [visibleCount, setVisibleCount] = React.useState(() =>
-    disabled ? itemsCount : Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT),
-  );
-  let needsFullRerender = React.useRef(true);
-  let [containerSize, setContainerSize] = React.useState(0);
-  let previousContainerSize = React.useRef(0);
-  let updateContainerSize = React.useCallback(
-    ({ width, height }) =>
-      setContainerSize('horizontal' === orientation ? width : height),
-    [orientation],
-  );
-  let [resizeRef, observer] = useResizeObserver(updateContainerSize);
-  let resizeObserverRef = React.useRef(observer);
-  useLayoutEffect(() => {
-    if (disabled) setVisibleCount(itemsCount);
-    else {
-      setVisibleCount(Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT));
-      needsFullRerender.current = true;
-    }
-  }, [containerSize, disabled, itemsCount]);
-  let mergedRefs = useMergedRefs(containerRef, resizeRef);
-  useLayoutEffect(() => {
-    if (!containerRef.current || disabled) {
-      resizeObserverRef.current?.disconnect();
-      return;
-    }
-    let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
-    let availableSize = containerRef.current[`offset${dimension}`];
-    let requiredSize = containerRef.current[`scroll${dimension}`];
-    if (availableSize < requiredSize) {
-      let avgItemSize = requiredSize / visibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      setVisibleCount(visibleItems > 0 ? visibleItems : 1);
-    } else if (needsFullRerender.current) {
-      let childrenSize = Array.from(containerRef.current.children).reduce(
-        (sum, child) => sum + child[`offset${dimension}`],
-        0,
-      );
-      let currentVisibleCount =
-        visibleCount || Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
-      let avgItemSize = childrenSize / currentVisibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      if (!isNaN(visibleItems))
-        setVisibleCount(Math.min(itemsCount, 2 * visibleItems));
-    }
-    needsFullRerender.current = false;
-  }, [containerSize, visibleCount, disabled, itemsCount, orientation]);
-  useLayoutEffect(() => {
-    previousContainerSize.current = containerSize;
-  }, [containerSize]);
-  return [mergedRefs, visibleCount];
-};

package/cjs/utils/hooks/useOverflow.d.ts

@@ -1,23 +0,0 @@
-/**
- * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the size of the container element.
- *
- * The returned number should be used to render the element with fewer items.
- *
- * @private
- * @param itemsCount Number of items that this element contains.
- * @param disabled Set to true to disconnect the observer.
- * @param dimension 'horizontal' (default) or 'vertical'
- * @returns [callback ref to set on container, stateful count of visible items]
- *
- * @example
- * const items = Array(10).fill().map((_, i) => <span>Item {i}</span>);
- * const [ref, visibleCount] = useOverflow(items);
- * ...
- * return (
- *   <div ref={ref}>
- *     {items.slice(0, visibleCount)}
- *   </div>
- * );
- */
-export declare const useOverflow: <T extends HTMLElement>(itemsCount: number, disabled?: boolean, orientation?: "horizontal" | "vertical") => readonly [(instance: T | null | undefined) => void, number];

package/cjs/utils/hooks/useOverflow.js

@@ -1,76 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'useOverflow', {
-  enumerable: true,
-  get: function () {
-    return useOverflow;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _useMergedRefs = require('./useMergedRefs.js');
-const _useResizeObserver = require('./useResizeObserver.js');
-const _useIsomorphicLayoutEffect = require('./useIsomorphicLayoutEffect.js');
-const STARTING_MAX_ITEMS_COUNT = 20;
-const useOverflow = (
-  itemsCount,
-  disabled = false,
-  orientation = 'horizontal',
-) => {
-  let containerRef = _react.useRef(null);
-  let [visibleCount, setVisibleCount] = _react.useState(() =>
-    disabled ? itemsCount : Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT),
-  );
-  let needsFullRerender = _react.useRef(true);
-  let [containerSize, setContainerSize] = _react.useState(0);
-  let previousContainerSize = _react.useRef(0);
-  let updateContainerSize = _react.useCallback(
-    ({ width, height }) =>
-      setContainerSize('horizontal' === orientation ? width : height),
-    [orientation],
-  );
-  let [resizeRef, observer] = (0, _useResizeObserver.useResizeObserver)(
-    updateContainerSize,
-  );
-  let resizeObserverRef = _react.useRef(observer);
-  (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    if (disabled) setVisibleCount(itemsCount);
-    else {
-      setVisibleCount(Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT));
-      needsFullRerender.current = true;
-    }
-  }, [containerSize, disabled, itemsCount]);
-  let mergedRefs = (0, _useMergedRefs.useMergedRefs)(containerRef, resizeRef);
-  (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    if (!containerRef.current || disabled) {
-      resizeObserverRef.current?.disconnect();
-      return;
-    }
-    let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
-    let availableSize = containerRef.current[`offset${dimension}`];
-    let requiredSize = containerRef.current[`scroll${dimension}`];
-    if (availableSize < requiredSize) {
-      let avgItemSize = requiredSize / visibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      setVisibleCount(visibleItems > 0 ? visibleItems : 1);
-    } else if (needsFullRerender.current) {
-      let childrenSize = Array.from(containerRef.current.children).reduce(
-        (sum, child) => sum + child[`offset${dimension}`],
-        0,
-      );
-      let currentVisibleCount =
-        visibleCount || Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
-      let avgItemSize = childrenSize / currentVisibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      if (!isNaN(visibleItems))
-        setVisibleCount(Math.min(itemsCount, 2 * visibleItems));
-    }
-    needsFullRerender.current = false;
-  }, [containerSize, visibleCount, disabled, itemsCount, orientation]);
-  (0, _useIsomorphicLayoutEffect.useLayoutEffect)(() => {
-    previousContainerSize.current = containerSize;
-  }, [containerSize]);
-  return [mergedRefs, visibleCount];
-};

package/esm/utils/hooks/useOverflow.d.ts

@@ -1,23 +0,0 @@
-/**
- * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the size of the container element.
- *
- * The returned number should be used to render the element with fewer items.
- *
- * @private
- * @param itemsCount Number of items that this element contains.
- * @param disabled Set to true to disconnect the observer.
- * @param dimension 'horizontal' (default) or 'vertical'
- * @returns [callback ref to set on container, stateful count of visible items]
- *
- * @example
- * const items = Array(10).fill().map((_, i) => <span>Item {i}</span>);
- * const [ref, visibleCount] = useOverflow(items);
- * ...
- * return (
- *   <div ref={ref}>
- *     {items.slice(0, visibleCount)}
- *   </div>
- * );
- */
-export declare const useOverflow: <T extends HTMLElement>(itemsCount: number, disabled?: boolean, orientation?: "horizontal" | "vertical") => readonly [(instance: T | null | undefined) => void, number];

package/esm/utils/hooks/useOverflow.js

@@ -1,63 +0,0 @@
-import * as React from 'react';
-import { useMergedRefs } from './useMergedRefs.js';
-import { useResizeObserver } from './useResizeObserver.js';
-import { useLayoutEffect } from './useIsomorphicLayoutEffect.js';
-let STARTING_MAX_ITEMS_COUNT = 20;
-export const useOverflow = (
-  itemsCount,
-  disabled = false,
-  orientation = 'horizontal',
-) => {
-  let containerRef = React.useRef(null);
-  let [visibleCount, setVisibleCount] = React.useState(() =>
-    disabled ? itemsCount : Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT),
-  );
-  let needsFullRerender = React.useRef(true);
-  let [containerSize, setContainerSize] = React.useState(0);
-  let previousContainerSize = React.useRef(0);
-  let updateContainerSize = React.useCallback(
-    ({ width, height }) =>
-      setContainerSize('horizontal' === orientation ? width : height),
-    [orientation],
-  );
-  let [resizeRef, observer] = useResizeObserver(updateContainerSize);
-  let resizeObserverRef = React.useRef(observer);
-  useLayoutEffect(() => {
-    if (disabled) setVisibleCount(itemsCount);
-    else {
-      setVisibleCount(Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT));
-      needsFullRerender.current = true;
-    }
-  }, [containerSize, disabled, itemsCount]);
-  let mergedRefs = useMergedRefs(containerRef, resizeRef);
-  useLayoutEffect(() => {
-    if (!containerRef.current || disabled) {
-      resizeObserverRef.current?.disconnect();
-      return;
-    }
-    let dimension = 'horizontal' === orientation ? 'Width' : 'Height';
-    let availableSize = containerRef.current[`offset${dimension}`];
-    let requiredSize = containerRef.current[`scroll${dimension}`];
-    if (availableSize < requiredSize) {
-      let avgItemSize = requiredSize / visibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      setVisibleCount(visibleItems > 0 ? visibleItems : 1);
-    } else if (needsFullRerender.current) {
-      let childrenSize = Array.from(containerRef.current.children).reduce(
-        (sum, child) => sum + child[`offset${dimension}`],
-        0,
-      );
-      let currentVisibleCount =
-        visibleCount || Math.min(itemsCount, STARTING_MAX_ITEMS_COUNT);
-      let avgItemSize = childrenSize / currentVisibleCount;
-      let visibleItems = Math.floor(availableSize / avgItemSize);
-      if (!isNaN(visibleItems))
-        setVisibleCount(Math.min(itemsCount, 2 * visibleItems));
-    }
-    needsFullRerender.current = false;
-  }, [containerSize, visibleCount, disabled, itemsCount, orientation]);
-  useLayoutEffect(() => {
-    previousContainerSize.current = containerSize;
-  }, [containerSize]);
-  return [mergedRefs, visibleCount];
-};