@itwin/itwinui-react 3.12.2 → 3.13.0

package/cjs/utils/components/VirtualScroll.d.ts

@@ -1,75 +0,0 @@
-import * as React from 'react';
-export type VirtualScrollProps = {
-    /**
-     * Length of the items to virtualize.
-     */
-    itemsLength: number;
-    /**
-     * Single item render function, which gives index of the item (0 based) in the data array
-     * and expects to get the JSX of that element to render.
-     * Recommended to memoize the reference of the function.
-     */
-    itemRenderer: (index: number) => JSX.Element;
-    /**
-     * Number of items to be rendered at the start and the end.
-     * Not recommended to go lower than the visible items in viewport.
-     * @default 10
-     */
-    bufferSize?: number;
-    /**
-     * Index of the first element on initial render.
-     */
-    scrollToIndex?: number;
-} & React.ComponentPropsWithRef<'div'>;
-/**
- * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
- * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
- *
- * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
- * and other is for transformation (translateY) to show the correct part of the list.
- *
- * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
- * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
- * @example
- * const itemRenderer = React.useCallback(() => (
- *  <div key={index}>
- *    This is my item #{index}
- *  </div>
- * ), [])
- * <VirtualScroll
- *  itemsLength={1000}
- *  itemRenderer={itemRenderer}
- * />
- * @private
- */
-export declare const VirtualScroll: React.ForwardRefExoticComponent<Omit<VirtualScrollProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/**
- * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
- * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.
- * @example
- * const itemRenderer = React.useCallback((index: number) => (
- *  <li key={index}>
- *    This is my item #{index}
- *  </li>
- * ), [])
- *
- * const { outerProps, innerProps, visibleChildren } = useVirtualization({itemsLength: 1000, itemRenderer: itemRenderer});
- * return (
- *  <div {...outerProps}>
- *   <ul {...innerProps}>
- *    {visibleChildren}
- *   </ul>
- *  </div>
- * );
- * @private
- */
-export declare const useVirtualization: (props: VirtualScrollProps) => {
-    outerProps: React.HTMLAttributes<HTMLElement>;
-    innerProps: {
-        readonly style: {
-            readonly willChange: "transform";
-        };
-        readonly ref: (instance: HTMLElement | null) => void;
-    };
-    visibleChildren: JSX.Element[];
-};

package/cjs/utils/components/VirtualScroll.js

@@ -1,334 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-function _export(target, all) {
-  for (var name in all)
-    Object.defineProperty(target, name, {
-      enumerable: true,
-      get: all[name],
-    });
-}
-_export(exports, {
-  VirtualScroll: function () {
-    return VirtualScroll;
-  },
-  useVirtualization: function () {
-    return useVirtualization;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const _reactdom = _interop_require_wildcard._(require('react-dom'));
-const _index = require('../hooks/index.js');
-const unstable_batchedUpdates =
-  _reactdom.unstable_batchedUpdates ?? ((cb) => void cb());
-const getScrollableParent = (element, ownerDocument = document) => {
-  if (!element || element === ownerDocument.body) {
-    return ownerDocument.body;
-  }
-  return isElementScrollable(element)
-    ? element
-    : getScrollableParent(element.parentElement, ownerDocument);
-};
-const isElementScrollable = (element) => {
-  return /(auto|scroll|overlay)/.test(
-    getElementStyle(element, 'overflow') +
-      getElementStyle(element, 'overflow-y'),
-  );
-};
-const getElementStyle = (element, prop) => {
-  return getComputedStyle(element, null).getPropertyValue(prop);
-};
-const getElementHeight = (element) => {
-  return element?.getBoundingClientRect().height ?? 0;
-};
-const getElementHeightWithMargins = (element) => {
-  if (!element) {
-    return undefined;
-  }
-  const margin =
-    parseFloat(getElementStyle(element, 'margin-block-start')) +
-    parseFloat(getElementStyle(element, 'margin-block-end'));
-  return getElementHeight(element) + (isNaN(margin) ? 0 : margin);
-};
-const getNumberOfNodesInHeight = (childHeight, totalHeight) => {
-  if (!childHeight) {
-    return 0;
-  }
-  return Math.floor(totalHeight / childHeight);
-};
-const getTranslateValue = (childHeight, startIndex) => {
-  if (startIndex > 0) {
-    return childHeight * startIndex;
-  }
-  return 0;
-};
-const getVisibleNodeCount = (
-  childHeight,
-  startIndex,
-  childrenLength,
-  scrollContainer,
-) => {
-  return Math.min(
-    childrenLength - startIndex,
-    getNumberOfNodesInHeight(childHeight, getElementHeight(scrollContainer)),
-  );
-};
-const VirtualScroll = _react.forwardRef((props, ref) => {
-  const { innerProps, outerProps, visibleChildren } = useVirtualization(props);
-  return _react.createElement(
-    'div',
-    {
-      ...outerProps,
-      ref: ref,
-    },
-    _react.createElement('div', innerProps, visibleChildren),
-  );
-});
-const useVirtualization = (props) => {
-  const {
-    itemsLength,
-    itemRenderer,
-    bufferSize = 10,
-    scrollToIndex,
-    style,
-    ...rest
-  } = props;
-  const [startNode, setStartNode] = _react.useState(0);
-  const [visibleNodeCount, setVisibleNodeCount] = _react.useState(0);
-  const scrollContainer = _react.useRef();
-  const parentRef = _react.useRef(null);
-  const childHeight = _react.useRef({
-    first: 0,
-    middle: 0,
-    last: 0,
-  });
-  const onScrollRef = _react.useRef();
-  const [scrollContainerHeight, setScrollContainerHeight] = _react.useState(0);
-  const visibleIndex = _react.useRef({
-    start: 0,
-    end: 0,
-  });
-  const [isMounted, setIsMounted] = _react.useState(false);
-  const getScrollableContainer = () =>
-    scrollContainer.current ??
-    parentRef.current?.ownerDocument.scrollingElement;
-  const visibleChildren = _react.useMemo(() => {
-    const arr = [];
-    const endIndex = Math.min(
-      itemsLength,
-      startNode + visibleNodeCount + bufferSize * 2,
-    );
-    for (let i = startNode; i < endIndex; i++) {
-      arr.push(itemRenderer(i));
-    }
-    return arr;
-  }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
-  const updateChildHeight = _react.useCallback(() => {
-    if (!parentRef.current || !visibleChildren.length) {
-      return;
-    }
-    const firstChild = parentRef.current.children.item(0);
-    const secondChild = parentRef.current.children.item(1);
-    const lastChild = parentRef.current.children.item(
-      parentRef.current.children.length - 1,
-    );
-    const firstChildHeight = Number(
-      getElementHeightWithMargins(firstChild)?.toFixed(2) ?? 0,
-    );
-    childHeight.current = {
-      first: firstChildHeight,
-      middle: Number(
-        getElementHeightWithMargins(secondChild)?.toFixed(2) ??
-          firstChildHeight,
-      ),
-      last: Number(
-        getElementHeightWithMargins(lastChild)?.toFixed(2) ?? firstChildHeight,
-      ),
-    };
-  }, [visibleChildren.length]);
-  const onResize = _react.useCallback(
-    ({ height }) => {
-      if (height > 0) {
-        setIsMounted(true);
-      }
-      unstable_batchedUpdates(() => {
-        setScrollContainerHeight(height);
-        updateChildHeight();
-      });
-    },
-    [updateChildHeight],
-  );
-  const [resizeRef, resizeObserver] = (0, _index.useResizeObserver)(onResize);
-  (0, _index.useLayoutEffect)(() => {
-    const scrollableParent = getScrollableParent(
-      parentRef.current,
-      parentRef.current?.ownerDocument,
-    );
-    scrollContainer.current = scrollableParent;
-    resizeRef(scrollableParent);
-  }, [resizeRef]);
-  (0, _index.useLayoutEffect)(() => {
-    return () => resizeObserver?.disconnect();
-  }, [resizeObserver]);
-  (0, _index.useLayoutEffect)(() => updateChildHeight(), [updateChildHeight]);
-  const updateVirtualScroll = _react.useCallback(() => {
-    const scrollableContainer = getScrollableContainer();
-    if (!scrollableContainer) {
-      return;
-    }
-    const start = getNumberOfNodesInHeight(
-      childHeight.current.middle,
-      Math.round(scrollableContainer.scrollTop),
-    );
-    const visibleNodes = getVisibleNodeCount(
-      childHeight.current.middle,
-      start,
-      itemsLength,
-      scrollableContainer,
-    );
-    const startIndex = Math.min(
-      Math.max(0, start - bufferSize),
-      Math.max(0, itemsLength - bufferSize * 2 - visibleNodes),
-    );
-    visibleIndex.current = {
-      start: start,
-      end: start + visibleNodes,
-    };
-    setStartNode(startIndex);
-    setVisibleNodeCount(visibleNodes);
-    if (!parentRef.current) {
-      return;
-    }
-    parentRef.current.style.transform = `translateY(${getTranslateValue(
-      childHeight.current.middle,
-      startIndex,
-    )}px)`;
-  }, [bufferSize, itemsLength]);
-  const onScroll = _react.useCallback(() => {
-    updateVirtualScroll();
-  }, [updateVirtualScroll]);
-  const removeScrollListener = _react.useCallback(() => {
-    if (!onScrollRef.current) {
-      return;
-    }
-    !scrollContainer.current ||
-    scrollContainer.current === parentRef.current?.ownerDocument.body
-      ? parentRef.current?.ownerDocument.removeEventListener(
-          'scroll',
-          onScrollRef.current,
-        )
-      : scrollContainer.current.removeEventListener(
-          'scroll',
-          onScrollRef.current,
-        );
-  }, []);
-  (0, _index.useLayoutEffect)(() => {
-    removeScrollListener();
-    onScrollRef.current = onScroll;
-    if (
-      !scrollContainer.current ||
-      scrollContainer.current === parentRef.current?.ownerDocument.body
-    ) {
-      parentRef.current?.ownerDocument.addEventListener('scroll', onScroll);
-    } else {
-      scrollContainer.current.addEventListener('scroll', onScroll);
-    }
-    return removeScrollListener;
-  }, [onScroll, removeScrollListener]);
-  (0, _index.useLayoutEffect)(() => {
-    if (!isMounted) {
-      return;
-    }
-    const scrollableContainer = getScrollableContainer();
-    if (!scrollableContainer || scrollToIndex == null) {
-      return;
-    }
-    if (
-      scrollToIndex > visibleIndex.current.end ||
-      scrollToIndex < visibleIndex.current.start
-    ) {
-      const indexDiff =
-        scrollToIndex > visibleIndex.current.end
-          ? scrollToIndex - visibleIndex.current.end
-          : scrollToIndex - visibleIndex.current.start;
-      if (scrollToIndex === 0) {
-        scrollableContainer.scrollTo({
-          top: 0,
-        });
-        return;
-      }
-      scrollableContainer.scrollTo({
-        top:
-          indexDiff > 0
-            ? Math.ceil(scrollableContainer.scrollTop) +
-              indexDiff * childHeight.current.middle
-            : scrollToIndex * childHeight.current.middle,
-      });
-      const start = getNumberOfNodesInHeight(
-        childHeight.current.middle,
-        Math.round(scrollableContainer.scrollTop),
-      );
-      const visibleNodes = getVisibleNodeCount(
-        childHeight.current.middle,
-        start,
-        itemsLength,
-        scrollableContainer,
-      );
-      visibleIndex.current = {
-        start: start,
-        end: start + visibleNodes,
-      };
-    }
-    if (scrollToIndex === visibleIndex.current.start) {
-      const roundedScrollTop = Math.round(scrollableContainer.scrollTop);
-      const diff = roundedScrollTop % childHeight.current.middle;
-      diff > 0 &&
-        scrollableContainer.scrollTo({
-          top: roundedScrollTop - diff,
-        });
-      return;
-    }
-    if (scrollToIndex === visibleIndex.current.end) {
-      const diff =
-        (scrollableContainer.offsetHeight - childHeight.current.first) %
-        childHeight.current.middle;
-      const roundedScrollTop = Math.ceil(scrollableContainer.scrollTop);
-      const scrollTopMod = roundedScrollTop % childHeight.current.middle;
-      if (diff > 0 && scrollTopMod === 0) {
-        scrollableContainer.scrollTo({
-          top: roundedScrollTop + childHeight.current.middle - diff,
-        });
-      }
-    }
-  }, [scrollToIndex, isMounted, itemsLength]);
-  (0, _index.useLayoutEffect)(() => {
-    if (!scrollContainerHeight) {
-      return;
-    }
-    updateVirtualScroll();
-  }, [scrollContainerHeight, updateVirtualScroll]);
-  return {
-    outerProps: {
-      style: {
-        minBlockSize:
-          itemsLength > 1
-            ? Math.max(itemsLength - 2, 0) * childHeight.current.middle +
-              childHeight.current.first +
-              childHeight.current.last
-            : childHeight.current.middle,
-        minInlineSize: '100%',
-        ...style,
-      },
-      ...rest,
-    },
-    innerProps: {
-      style: {
-        willChange: 'transform',
-      },
-      ref: (0, _index.mergeRefs)(parentRef),
-    },
-    visibleChildren,
-  };
-};

package/esm/utils/components/VirtualScroll.d.ts

@@ -1,75 +0,0 @@
-import * as React from 'react';
-export type VirtualScrollProps = {
-    /**
-     * Length of the items to virtualize.
-     */
-    itemsLength: number;
-    /**
-     * Single item render function, which gives index of the item (0 based) in the data array
-     * and expects to get the JSX of that element to render.
-     * Recommended to memoize the reference of the function.
-     */
-    itemRenderer: (index: number) => JSX.Element;
-    /**
-     * Number of items to be rendered at the start and the end.
-     * Not recommended to go lower than the visible items in viewport.
-     * @default 10
-     */
-    bufferSize?: number;
-    /**
-     * Index of the first element on initial render.
-     */
-    scrollToIndex?: number;
-} & React.ComponentPropsWithRef<'div'>;
-/**
- * `VirtualScroll` component is used to render a huge amount of items in the DOM. It renders only the ones which are visible
- * and the amount provided through `bufferSize` prop at the start and the end. Can be used inside other components like `Table`.
- *
- * It has two wrapper elements, so DOM will be changed. One is used for setting full expected height in the scrollable container
- * and other is for transformation (translateY) to show the correct part of the list.
- *
- * Currently it works only with the direct vertically scrollable parent element. It does not work with body scroll.
- * It supports only static (same) height rows virtualization. Expect some issues, if list consists of different height elements.
- * @example
- * const itemRenderer = React.useCallback(() => (
- *  <div key={index}>
- *    This is my item #{index}
- *  </div>
- * ), [])
- * <VirtualScroll
- *  itemsLength={1000}
- *  itemRenderer={itemRenderer}
- * />
- * @private
- */
-export declare const VirtualScroll: React.ForwardRefExoticComponent<Omit<VirtualScrollProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-/**
- * `useVirtualization` is used for efficiently rendering only the visible rows from a large list.
- * It returns `outerProps` and `innerProps`, which need to be applied on 2 container elements and `visibleChildren` which is a list of virtualized items.
- * @example
- * const itemRenderer = React.useCallback((index: number) => (
- *  <li key={index}>
- *    This is my item #{index}
- *  </li>
- * ), [])
- *
- * const { outerProps, innerProps, visibleChildren } = useVirtualization({itemsLength: 1000, itemRenderer: itemRenderer});
- * return (
- *  <div {...outerProps}>
- *   <ul {...innerProps}>
- *    {visibleChildren}
- *   </ul>
- *  </div>
- * );
- * @private
- */
-export declare const useVirtualization: (props: VirtualScrollProps) => {
-    outerProps: React.HTMLAttributes<HTMLElement>;
-    innerProps: {
-        readonly style: {
-            readonly willChange: "transform";
-        };
-        readonly ref: (instance: HTMLElement | null) => void;
-    };
-    visibleChildren: JSX.Element[];
-};