@itwin/itwinui-react 1.33.0 → 1.34.1

package/esm/core/utils/hooks/useIntersection.js

@@ -6,8 +6,9 @@ import React from 'react';
 import { getWindow } from '../functions/dom';
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
- * Callback is called only once.
- * Hook returns a function that you need to use to set a reference of the element you want to observe.
+ * Callback is called only once by default (can be changed using the `once` parameter).
+ * @returns a callback ref that needs to be set on the element you want to observe.
+ * @private
  * @example
  * const onIntersection = React.useCallback(() => {
  *   console.log('Element is in viewport!');
@@ -15,8 +16,9 @@ import { getWindow } from '../functions/dom';
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-export var useIntersection = function (onIntersect, options) {
+export var useIntersection = function (onIntersect, options, once) {
     if (options === void 0) { options = {}; }
+    if (once === void 0) { once = true; }
     var root = options.root, rootMargin = options.rootMargin, threshold = options.threshold;
     var observer = React.useRef();
     var setRef = React.useCallback(function (node) {
@@ -33,11 +35,14 @@ export var useIntersection = function (onIntersect, options) {
         observer.current = new IntersectionObserver(function (_a, obs) {
             var entry = _a[0];
             if (entry.isIntersecting) {
-                obs.disconnect();
+                if (once) {
+                    obs.disconnect();
+                }
                 onIntersect();
             }
         }, { root: root, rootMargin: rootMargin, threshold: threshold });
         observer.current.observe(node);
-    }, [onIntersect, root, rootMargin, threshold]);
+    }, [onIntersect, once, root, rootMargin, threshold]);
+    React.useEffect(function () { return function () { var _a; return (_a = observer.current) === null || _a === void 0 ? void 0 : _a.disconnect(); }; }, []);
     return setRef;
 };

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

@@ -1,13 +1,14 @@
 import React from 'react';
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * 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 items 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
@@ -20,4 +21,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: 'horizontal' | 'vertical') => readonly [(instance: T | null) => void, number];

package/esm/core/utils/hooks/useOverflow.js

@@ -8,13 +8,14 @@ import { useResizeObserver } from './useResizeObserver';
 var STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * 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 items 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
@@ -27,20 +28,21 @@ var STARTING_MAX_ITEMS_COUNT = 20;
  *   </div>
  * );
  */
-export var useOverflow = function (items, disabled) {
+export var useOverflow = function (items, disabled, orientation) {
     if (disabled === void 0) { disabled = false; }
+    if (orientation === void 0) { orientation = 'horizontal'; }
     var containerRef = React.useRef(null);
     var _a = React.useState(function () {
         return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
     }), visibleCount = _a[0], setVisibleCount = _a[1];
     var needsFullRerender = React.useRef(true);
-    var _b = React.useState(0), containerWidth = _b[0], setContainerWidth = _b[1];
-    var previousContainerWidth = React.useRef(0);
-    var updateContainerWidth = React.useCallback(function (_a) {
-        var width = _a.width;
-        return setContainerWidth(width);
-    }, []);
-    var _c = useResizeObserver(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
+    var _b = React.useState(0), containerSize = _b[0], setContainerSize = _b[1];
+    var previousContainerSize = React.useRef(0);
+    var updateContainerSize = React.useCallback(function (_a) {
+        var width = _a.width, height = _a.height;
+        return setContainerSize(orientation === 'horizontal' ? width : height);
+    }, [orientation]);
+    var _c = useResizeObserver(updateContainerSize), resizeRef = _c[0], observer = _c[1];
     var resizeObserverRef = React.useRef(observer);
     React.useLayoutEffect(function () {
         if (disabled) {
@@ -50,7 +52,7 @@ export var useOverflow = function (items, disabled) {
             setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
             needsFullRerender.current = true;
         }
-    }, [containerWidth, disabled, items]);
+    }, [containerSize, disabled, items]);
     var mergedRefs = useMergedRefs(containerRef, resizeRef);
     React.useLayoutEffect(function () {
         var _a;
@@ -58,24 +60,25 @@ export var useOverflow = function (items, disabled) {
             (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
             return;
         }
-        var availableWidth = containerRef.current.offsetWidth;
-        var requiredWidth = containerRef.current.scrollWidth;
-        if (availableWidth < requiredWidth) {
-            var avgItemWidth = requiredWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+        var dimension = orientation === 'horizontal' ? 'Width' : 'Height';
+        var availableSize = containerRef.current["offset" + dimension];
+        var requiredSize = containerRef.current["scroll" + dimension];
+        if (availableSize < requiredSize) {
+            var avgItemSize = requiredSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             setVisibleCount(visibleItems);
         }
         else if (needsFullRerender.current) {
-            var childrenWidth = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child.offsetWidth; }, 0);
-            var avgItemWidth = childrenWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset" + dimension]; }, 0);
+            var avgItemSize = childrenSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             // Doubling the visible items to overflow the container. Just to be safe.
             setVisibleCount(Math.min(items.length, visibleItems * 2));
         }
         needsFullRerender.current = false;
-    }, [containerWidth, visibleCount, disabled, items.length]);
+    }, [containerSize, visibleCount, disabled, items.length, orientation]);
     React.useLayoutEffect(function () {
-        previousContainerWidth.current = containerWidth;
-    }, [containerWidth]);
+        previousContainerSize.current = containerSize;
+    }, [containerSize]);
     return [mergedRefs, visibleCount];
 };

package/esm/types/react-table-config.d.ts

@@ -32,6 +32,7 @@ declare module 'react-table' {
             isResizingColumn?: string;
         };
         isTableResizing?: boolean;
+        columnReorderStartIndex: number;
     }
     interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
         /**
@@ -67,11 +68,17 @@ declare module 'react-table' {
          * }
          */
         cellRenderer?: (props: CellRendererProps<D>) => React.ReactNode;
+        /**
+         * If true, column can't be reordered.
+         * @default false
+         */
+        disableReordering?: boolean;
     }
     interface ColumnInstance<D extends object = {}> extends UseFiltersColumnProps<D>, UseGroupByColumnProps<D>, UseResizeColumnsColumnProps<D>, UseSortByColumnProps<D> {
         originalWidth: number;
         resizeWidth?: number;
         isResizerVisible?: boolean;
+        getDragAndDropProps: () => TableKeyedProps;
     }
     interface Cell<D extends object = {}> extends UseGroupByCellProps<D>, UseRowStateCellProps<D> {
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.33.0",
+  "version": "1.34.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.50.0",
+    "@itwin/itwinui-css": "^0.52.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",
@@ -51,17 +51,17 @@
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",
-    "@storybook/addon-essentials": "~6.3.6",
-    "@storybook/addon-storysource": "~6.3.6",
-    "@storybook/addons": "~6.3.6",
-    "@storybook/api": "~6.3.6",
-    "@storybook/builder-webpack5": "~6.3.6",
-    "@storybook/components": "~6.3.6",
-    "@storybook/core-events": "~6.3.6",
-    "@storybook/manager-webpack5": "~6.3.6",
+    "@storybook/addon-essentials": "~6.4.19",
+    "@storybook/addon-storysource": "~6.4.19",
+    "@storybook/addons": "~6.4.19",
+    "@storybook/api": "~6.4.19",
+    "@storybook/builder-webpack5": "~6.4.19",
+    "@storybook/components": "~6.4.19",
+    "@storybook/core-events": "~6.4.19",
+    "@storybook/manager-webpack5": "~6.4.19",
     "@storybook/preset-typescript": "^3.0.0",
-    "@storybook/react": "~6.3.6",
-    "@storybook/theming": "~6.3.6",
+    "@storybook/react": "~6.4.19",
+    "@storybook/theming": "~6.4.19",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.1",
@@ -77,12 +77,13 @@
     "babel-loader": "^8.2.2",
     "concurrently": "^5.3.0",
     "cpx": "^1.5.0",
-    "creevey": "^0.7.36",
+    "creevey": "^0.8.0-beta.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.25.1",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.5.7",
     "fast-glob": "^3.2.5",
     "husky": "^4.0.0",
     "inquirer": "^6.2.2",
@@ -96,7 +97,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^2.6.2",
-    "storybook-dark-mode": "^1.0.8",
+    "storybook-dark-mode": "^1.0.9",
     "tippy.js": "^6.3.1",
     "ts-jest": "^27.0.4",
     "ts-loader": "^8.0.1",