@itwin/itwinui-react 1.45.0 → 1.46.0

package/cjs/core/utils/components/Resizer.js

@@ -0,0 +1,206 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Resizer = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var functions_1 = require("../functions");
+/**
+ * Component that allows to resize parent element.
+ * Parent must have `position: relative`.
+ * @private
+ * @example
+ * const ref = React.useRef<HTMLDivElement>(null);
+ * return (
+ *   <div ref={ref} style={{ position: 'relative' }}>
+ *     <Resizer elementRef={ref} />
+ *   </div>
+ * );
+ */
+var Resizer = function (props) {
+    var elementRef = props.elementRef, containerRef = props.containerRef, onResizeEnd = props.onResizeEnd;
+    var onResizePointerDown = function (event) {
+        if (!elementRef.current || event.button !== 0) {
+            return;
+        }
+        var initialPointerX = event.clientX;
+        var initialPointerY = event.clientY;
+        var _a = (0, functions_1.getTranslateValues)(elementRef.current), initialTranslateX = _a[0], initialTranslateY = _a[1];
+        var _b = elementRef.current.getBoundingClientRect(), initialWidth = _b.width, initialHeight = _b.height;
+        var width = "".concat(initialWidth, "px");
+        var height = "".concat(initialHeight, "px");
+        var translateX = initialTranslateX;
+        var translateY = initialTranslateY;
+        var minWidth = parseFloat(getComputedStyle(elementRef.current).minWidth);
+        var minHeight = parseFloat(getComputedStyle(elementRef.current).minHeight);
+        var resizer = event.currentTarget.dataset.iuiResizer;
+        var originalUserSelect = elementRef.current.ownerDocument.body.style.userSelect;
+        elementRef.current.ownerDocument.body.style.userSelect = 'none';
+        var onResizePointerMove = function (event) {
+            var _a, _b, _c, _d, _e, _f, _g;
+            if (!elementRef.current) {
+                return;
+            }
+            var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+            var clientX = (0, functions_1.getBoundedValue)(event.clientX, (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _b !== void 0 ? _b : 0, (_d = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : elementRef.current.ownerDocument.documentElement.clientWidth) !== null && _d !== void 0 ? _d : 0);
+            var clientY = (0, functions_1.getBoundedValue)(event.clientY, (_e = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _e !== void 0 ? _e : 0, (_g = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : elementRef.current.ownerDocument.documentElement.clientHeight) !== null && _g !== void 0 ? _g : 0);
+            var diffX = initialPointerX - clientX;
+            var diffY = initialPointerY - clientY;
+            switch (resizer) {
+                case 'top-left': {
+                    var newHeight = initialHeight + diffY;
+                    if (newHeight >= minHeight) {
+                        height = elementRef.current.style.height = "".concat(newHeight, "px");
+                        translateY = initialTranslateY - diffY;
+                    }
+                    var newWidth = initialWidth + diffX;
+                    if (newWidth >= minWidth) {
+                        width = elementRef.current.style.width = "".concat(newWidth, "px");
+                        translateX = initialTranslateX - diffX;
+                    }
+                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    break;
+                }
+                case 'top': {
+                    var newHeight = initialHeight + diffY;
+                    if (newHeight < minHeight) {
+                        break;
+                    }
+                    height = elementRef.current.style.height = "".concat(newHeight, "px");
+                    translateY = initialTranslateY - diffY;
+                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    break;
+                }
+                case 'top-right': {
+                    var newHeight = initialHeight + diffY;
+                    if (newHeight >= minHeight) {
+                        height = elementRef.current.style.height = "".concat(newHeight, "px");
+                        translateY = initialTranslateY - diffY;
+                    }
+                    width = elementRef.current.style.width = "".concat(initialWidth - diffX, "px");
+                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    break;
+                }
+                case 'right': {
+                    width = elementRef.current.style.width = "".concat(initialWidth - diffX, "px");
+                    break;
+                }
+                case 'bottom-right': {
+                    width = elementRef.current.style.width = "".concat(initialWidth - diffX, "px");
+                    height = elementRef.current.style.height = "".concat(initialHeight - diffY, "px");
+                    break;
+                }
+                case 'bottom': {
+                    height = elementRef.current.style.height = "".concat(initialHeight - diffY, "px");
+                    break;
+                }
+                case 'bottom-left': {
+                    var newWidth = initialWidth + diffX;
+                    if (newWidth >= minWidth) {
+                        width = elementRef.current.style.width = "".concat(newWidth, "px");
+                        translateX = initialTranslateX - diffX;
+                    }
+                    height = elementRef.current.style.height = "".concat(initialHeight - diffY, "px");
+                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    break;
+                }
+                case 'left': {
+                    var newWidth = initialWidth + diffX;
+                    if (newWidth < minWidth) {
+                        break;
+                    }
+                    width = elementRef.current.style.width = "".concat(newWidth, "px");
+                    translateX = initialTranslateX - diffX;
+                    elementRef.current.style.transform = "translate(".concat(translateX, "px, ").concat(translateY, "px)");
+                    break;
+                }
+                default:
+                    break;
+            }
+        };
+        elementRef.current.ownerDocument.addEventListener('pointermove', onResizePointerMove);
+        elementRef.current.ownerDocument.addEventListener('pointerup', function () {
+            document.removeEventListener('pointermove', onResizePointerMove);
+            if (elementRef.current) {
+                elementRef.current.ownerDocument.body.style.userSelect = originalUserSelect;
+                onResizeEnd === null || onResizeEnd === void 0 ? void 0 : onResizeEnd({
+                    width: width,
+                    height: height,
+                    transform: "translate(".concat(translateX, "px, ").concat(translateY, "px)"),
+                });
+            }
+        }, { once: true });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("div", { "data-iui-resizer": 'top-left', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: -4,
+                left: -4,
+                width: 12,
+                height: 12,
+                cursor: 'nw-resize',
+            } }),
+        react_1.default.createElement("div", { "data-iui-resizer": 'top', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: -4,
+                left: 8,
+                right: 8,
+                height: 8,
+                cursor: 'n-resize',
+            } }),
+        react_1.default.createElement("div", { "data-iui-resizer": 'top-right', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: -4,
+                right: -4,
+                width: 12,
+                height: 12,
+                cursor: 'ne-resize',
+            } }),
+        react_1.default.createElement("div", { "data-iui-resizer": 'right', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: 8,
+                right: -4,
+                bottom: 8,
+                width: 8,
+                cursor: 'e-resize',
+            } }),
+        react_1.default.createElement("div", { "data-iui-resizer": 'bottom-right', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                bottom: -4,
+                right: -4,
+                width: 12,
+                height: 12,
+                cursor: 'se-resize',
+            } }),
+        react_1.default.createElement("div", { "data-iui-resizer": 'bottom', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                bottom: -4,
+                left: 8,
+                right: 8,
+                height: 8,
+                cursor: 's-resize',
+            } }),
+        react_1.default.createElement("div", { "data-iui-resizer": 'bottom-left', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                bottom: -4,
+                left: -4,
+                width: 12,
+                height: 12,
+                cursor: 'sw-resize',
+            } }),
+        react_1.default.createElement("div", { "data-iui-resizer": 'left', onPointerDown: onResizePointerDown, style: {
+                position: 'absolute',
+                top: 8,
+                left: -4,
+                bottom: 8,
+                width: 8,
+                cursor: 'w-resize',
+            } })));
+};
+exports.Resizer = Resizer;
+exports.default = exports.Resizer;

package/cjs/core/utils/components/VirtualScroll.js

@@ -136,28 +136,6 @@ var useVirtualization = function (props) {
     // Used to mark when scroll container has height (updated by resize observer)
     // because before that calculations are not right
     var _e = react_1.default.useState(false), isMounted = _e[0], setIsMounted = _e[1];
-    var onResize = react_1.default.useCallback(function (_a) {
-        var height = _a.height;
-        // Initial value returned by resize observer is 0
-        // So wait for the next one
-        if (height > 0) {
-            setIsMounted(true);
-        }
-        setScrollContainerHeight(height);
-    }, []);
-    var _f = (0, useResizeObserver_1.useResizeObserver)(onResize), resizeRef = _f[0], resizeObserver = _f[1];
-    // Find scrollable parent
-    // Needed only on init
-    react_1.default.useLayoutEffect(function () {
-        var _a;
-        var scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
-        scrollContainer.current = scrollableParent;
-        resizeRef(scrollableParent);
-    }, [resizeRef]);
-    // Stop watching resize, when virtual scroll is unmounted
-    react_1.default.useLayoutEffect(function () {
-        return function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); };
-    }, [resizeObserver]);
     var getScrollableContainer = function () {
         var _a, _b;
         return (_a = scrollContainer.current) !== null && _a !== void 0 ? _a : (_b = parentRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument.scrollingElement;
@@ -170,8 +148,7 @@ var useVirtualization = function (props) {
         }
         return arr;
     }, [itemsLength, itemRenderer, bufferSize, startNode, visibleNodeCount]);
-    // Get child height when children available
-    react_1.default.useLayoutEffect(function () {
+    var updateChildHeight = react_1.default.useCallback(function () {
         var _a, _b, _c, _d, _e, _f;
         if (!parentRef.current || !visibleChildren.length) {
             return;
@@ -186,6 +163,31 @@ var useVirtualization = function (props) {
             last: Number((_f = (_e = getElementHeightWithMargins(lastChild)) === null || _e === void 0 ? void 0 : _e.toFixed(2)) !== null && _f !== void 0 ? _f : firstChildHeight),
         };
     }, [visibleChildren.length]);
+    var onResize = react_1.default.useCallback(function (_a) {
+        var height = _a.height;
+        // Initial value returned by resize observer is 0
+        // So wait for the next one
+        if (height > 0) {
+            setIsMounted(true);
+        }
+        setScrollContainerHeight(height);
+        updateChildHeight();
+    }, [updateChildHeight]);
+    var _f = (0, useResizeObserver_1.useResizeObserver)(onResize), resizeRef = _f[0], resizeObserver = _f[1];
+    // Find scrollable parent
+    // Needed only on init
+    react_1.default.useLayoutEffect(function () {
+        var _a;
+        var scrollableParent = getScrollableParent(parentRef.current, (_a = parentRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
+        scrollContainer.current = scrollableParent;
+        resizeRef(scrollableParent);
+    }, [resizeRef]);
+    // Stop watching resize, when virtual scroll is unmounted
+    react_1.default.useLayoutEffect(function () {
+        return function () { return resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect(); };
+    }, [resizeObserver]);
+    // Get child height when children available
+    react_1.default.useLayoutEffect(function () { return updateChildHeight(); }, [updateChildHeight]);
     var updateVirtualScroll = react_1.default.useCallback(function () {
         var scrollableContainer = getScrollableContainer();
         if (!scrollableContainer) {

package/cjs/core/utils/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Popover';
+export * from './Resizer';
 export * from './FocusTrap';
 export * from './InputContainer';
 export * from './icons';

package/cjs/core/utils/components/index.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 __exportStar(require("./Popover"), exports);
+__exportStar(require("./Resizer"), exports);
 __exportStar(require("./FocusTrap"), exports);
 __exportStar(require("./InputContainer"), exports);
 __exportStar(require("./icons"), exports);

package/cjs/core/utils/functions/index.d.ts

@@ -2,3 +2,4 @@ export * from './dom';
 export * from './colors';
 export * from './numbers';
 export * from './focusable';
+export * from './styles';

package/cjs/core/utils/functions/index.js

@@ -22,3 +22,4 @@ __exportStar(require("./dom"), exports);
 __exportStar(require("./colors"), exports);
 __exportStar(require("./numbers"), exports);
 __exportStar(require("./focusable"), exports);
+__exportStar(require("./styles"), exports);

package/cjs/core/utils/functions/styles.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in a array `[translateX, translateY]`
+ */
+export declare const getTranslateValues: (element: HTMLElement | null | undefined) => number[];

package/cjs/core/utils/functions/styles.js

@@ -0,0 +1,21 @@
+"use strict";
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTranslateValues = void 0;
+/**
+ * Returns translate values as an array of a given element.
+ * @param element HTML element you want to get translate value of
+ * @returns Translate values in pixels in a array `[translateX, translateY]`
+ */
+var getTranslateValues = function (element) {
+    if (!element) {
+        return [];
+    }
+    var transformValue = getComputedStyle(element).getPropertyValue('transform');
+    var matrix = new DOMMatrix(transformValue);
+    return [matrix.m41, matrix.m42];
+};
+exports.getTranslateValues = getTranslateValues;

package/cjs/core/utils/hooks/useContainerWidth.d.ts

@@ -13,5 +13,5 @@
  * ... // do something with width
  * return <div ref={ref}>...</div>;
  */
-export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null) => void, number];
+export declare const useContainerWidth: <T extends HTMLElement>(watchResizes?: boolean) => readonly [(instance: HTMLElement | null | undefined) => void, number];
 export default useContainerWidth;

package/cjs/core/utils/hooks/useDragAndDrop.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+/**
+ * Helper hook that handles elements drag logic.
+ * @param elementRef Element ref that is draggable.
+ * @param containerRect Bounding rectangle of container element that element can't go outside. If not passed window is used as a container.
+ * @returns
+ * `onPointerDown` - handler that is called when pointer is down and handles all the dragging logic.
+ * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
+ */
+export declare const useDragAndDrop: (elementRef: React.RefObject<HTMLElement>, containerRef?: React.RefObject<HTMLElement>, enabled?: boolean) => {
+    onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
+    transform: string;
+};
+export default useDragAndDrop;

package/cjs/core/utils/hooks/useDragAndDrop.js

@@ -0,0 +1,110 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragAndDrop = void 0;
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+var react_1 = __importDefault(require("react"));
+var functions_1 = require("../functions");
+var useEventListener_1 = require("./useEventListener");
+var useResizeObserver_1 = require("./useResizeObserver");
+var getContainerRect = function (containerRef) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    var containerRect = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    return {
+        top: (_b = containerRect === null || containerRect === void 0 ? void 0 : containerRect.top) !== null && _b !== void 0 ? _b : 0,
+        right: (_e = (_c = containerRect === null || containerRect === void 0 ? void 0 : containerRect.right) !== null && _c !== void 0 ? _c : (_d = (0, functions_1.getWindow)()) === null || _d === void 0 ? void 0 : _d.innerWidth) !== null && _e !== void 0 ? _e : 0,
+        bottom: (_h = (_f = containerRect === null || containerRect === void 0 ? void 0 : containerRect.bottom) !== null && _f !== void 0 ? _f : (_g = (0, functions_1.getWindow)()) === null || _g === void 0 ? void 0 : _g.innerHeight) !== null && _h !== void 0 ? _h : 0,
+        left: (_j = containerRect === null || containerRect === void 0 ? void 0 : containerRect.left) !== null && _j !== void 0 ? _j : 0,
+    };
+};
+/**
+ * Helper hook that handles elements drag logic.
+ * @param elementRef Element ref that is draggable.
+ * @param containerRect Bounding rectangle of container element that element can't go outside. If not passed window is used as a container.
+ * @returns
+ * `onPointerDown` - handler that is called when pointer is down and handles all the dragging logic.
+ * `transform` - current transform of the element, it is used to preserve drag position when element visibility is being toggled.
+ */
+var useDragAndDrop = function (elementRef, containerRef, enabled) {
+    if (enabled === void 0) { enabled = true; }
+    var grabOffsetX = react_1.default.useRef(0);
+    var grabOffsetY = react_1.default.useRef(0);
+    var translateX = react_1.default.useRef();
+    var translateY = react_1.default.useRef();
+    var containerRectRef = react_1.default.useRef(getContainerRect(containerRef));
+    var adjustTransform = react_1.default.useCallback(function () {
+        var _a;
+        if (!elementRef.current || !enabled) {
+            return;
+        }
+        var _b = (_a = elementRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect(), top = _b.top, right = _b.right, bottom = _b.bottom, left = _b.left;
+        var _c = (0, functions_1.getTranslateValues)(elementRef.current), newTranslateX = _c[0], newTranslateY = _c[1];
+        containerRectRef.current = getContainerRect(containerRef);
+        if (bottom > containerRectRef.current.bottom) {
+            newTranslateY -= bottom - containerRectRef.current.bottom;
+        }
+        if (top < containerRectRef.current.top) {
+            newTranslateY += containerRectRef.current.top - top;
+        }
+        if (right > containerRectRef.current.right) {
+            newTranslateX -= right - containerRectRef.current.right;
+        }
+        if (left < containerRectRef.current.left) {
+            newTranslateX += containerRectRef.current.left - left;
+        }
+        translateX.current = newTranslateX;
+        translateY.current = newTranslateY;
+        elementRef.current.style.transform = "translate(".concat(newTranslateX, "px, ").concat(newTranslateY, "px)");
+    }, [containerRef, elementRef, enabled]);
+    var _a = (0, useResizeObserver_1.useResizeObserver)(adjustTransform), resizeRef = _a[0], resizeObserver = _a[1];
+    resizeRef(containerRef === null || containerRef === void 0 ? void 0 : containerRef.current);
+    react_1.default.useEffect(function () {
+        return function () {
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, [resizeObserver]);
+    (0, useEventListener_1.useEventListener)('resize', function () {
+        adjustTransform();
+        if (translateX.current != null && translateY.current != null) {
+            setTransform("translate(".concat(translateX.current, "px, ").concat(translateY.current, "px)"));
+        }
+    }, (0, functions_1.getWindow)());
+    var _b = react_1.default.useState(''), transform = _b[0], setTransform = _b[1];
+    var onPointerMove = react_1.default.useRef(function (event) {
+        if (!elementRef.current) {
+            return;
+        }
+        var newTranslateX = event.clientX - grabOffsetX.current;
+        var newTranslateY = event.clientY - grabOffsetY.current;
+        elementRef.current.style.transform = "translate(".concat(newTranslateX, "px, ").concat(newTranslateY, "px)");
+        adjustTransform();
+    });
+    var originalUserSelect = react_1.default.useRef('');
+    var onPointerDown = react_1.default.useCallback(function (e) {
+        if (!elementRef.current || e.button !== 0 || !enabled) {
+            return;
+        }
+        var _a = (0, functions_1.getTranslateValues)(elementRef.current), x = _a[0], y = _a[1];
+        grabOffsetX.current = e.clientX - x;
+        grabOffsetY.current = e.clientY - y;
+        originalUserSelect.current = elementRef.current.style.userSelect;
+        // Prevents from selecting inner content when dragging.
+        elementRef.current.style.userSelect = 'none';
+        elementRef.current.ownerDocument.addEventListener('pointermove', onPointerMove.current);
+        elementRef.current.ownerDocument.addEventListener('pointerup', function () {
+            setTransform("translate(".concat(translateX.current, "px, ").concat(translateY.current, "px)"));
+            document.removeEventListener('pointermove', onPointerMove.current);
+            if (elementRef.current) {
+                elementRef.current.style.userSelect = originalUserSelect.current;
+            }
+        }, { once: true });
+    }, [elementRef, enabled]);
+    return { onPointerDown: onPointerDown, transform: transform };
+};
+exports.useDragAndDrop = useDragAndDrop;
+exports.default = exports.useDragAndDrop;

package/cjs/core/utils/hooks/useEventListener.d.ts

@@ -7,4 +7,4 @@
  *     containerRef.current?.ownerDocument,
  *  );
  */
-export declare const useEventListener: (eventName: string, handler: (event: Event) => void, element: HTMLElement | Document | undefined) => void;
+export declare const useEventListener: (eventName: string, handler: (event: Event) => void, element: HTMLElement | Document | Window | undefined) => void;

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

@@ -21,4 +21,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: 'horizontal' | 'vertical') => 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 | undefined) => void, number];

package/cjs/core/utils/hooks/useResizeObserver.d.ts

@@ -10,4 +10,4 @@
  * ...
  * return <div ref={ref}>...</div>;
  */
-export declare const useResizeObserver: <T extends HTMLElement>(onResize: (size: DOMRectReadOnly) => void) => readonly [(element: T | null) => void, ResizeObserver | undefined];
+export declare const useResizeObserver: <T extends HTMLElement>(onResize: (size: DOMRectReadOnly) => void) => readonly [(element: T | null | undefined) => void, ResizeObserver | undefined];

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

@@ -19,7 +19,7 @@ declare module 'react-table' {
          */
         isDisabled?: (rowData: D) => boolean;
     };
-    interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
+    interface TableOptions<D extends object = {}> extends Omit<UseTableOptions<D>, 'data'>, UseRowSelectOptions<D>, UseExpandedOptions<D>, UseFiltersOptions<D>, UsePaginationOptions<D>, UseGlobalFiltersOptions<D>, UseGlobalFiltersColumnOptions<D>, Omit<UseResizeColumnsOptions<D>, 'disableResizing'>, UseSortByOptions<D> {
         /**
          * Table data list.
          * Must be memoized.
@@ -50,6 +50,7 @@ declare module 'react-table' {
             isScrolledToRight?: boolean;
             isScrolledToLeft?: boolean;
         };
+        lastSelectedRowId?: string;
     }
     interface ColumnInterface<D extends object = {}> extends UseSortByColumnOptions<D>, UseFiltersColumnOptions<D>, UseResizeColumnsColumnOptions<D> {
         /**

package/esm/core/Breadcrumbs/Breadcrumbs.d.ts

@@ -16,6 +16,64 @@ export declare type BreadcrumbsProps = {
      * Defaults to the `SvgChevronRight` icon.
      */
     separator?: React.ReactNode;
+    /**
+     * If specified, this prop will be used to show a custom button when overflow happens,
+     * i.e. when there is not enough space to fit all the breadcrumbs.
+     *
+     * Expects a function that takes the number of items that are visible
+     * and returns the `ReactNode` to render.
+     *
+     * @example <caption>Uses the overflow button to redirect to the previous breadcrumb</caption>
+     *  <Breadcrumbs
+     *    overflowButton={(visibleCount: number) => {
+     *      const previousBreadcrumb = visibleCount > 1 ? items.length - visibleCount : items.length - 2;
+     *      return (
+     *        <Tooltip content={`Item ${previousBreadcrumb}`} placement='bottom'>
+     *          <IconButton
+     *            onClick={() => {
+     *              // click on "previousBreadcrumb"
+     *            }}
+     *          >
+     *            <SvgMoreSmall />
+     *          </IconButton>
+     *        </Tooltip>
+     *      );
+     *    }}
+     *  >
+     *    {items}
+     *  </Breadcrumbs>
+     *
+     * @example <caption>Uses the overflow button to add a dropdown that contains hidden breadcrumbs</caption>
+     *  <Breadcrumbs
+     *    overflowButton={(visibleCount) => (
+     *      <DropdownMenu
+     *        menuItems={(close) =>
+     *          Array(items.length - visibleCount)
+     *            .fill(null)
+     *            .map((_, _index) => {
+     *              const index = visibleCount > 1 ? _index + 1 : _index;
+     *              const onClick = () => {
+     *                // click on "index" breadcrumb
+     *                close();
+     *              };
+     *              return (
+     *                <MenuItem key={index} onClick={onClick}>
+     *                  Item {index}
+     *                </MenuItem>
+     *              );
+     *            })
+     *        }
+     *      >
+     *        <IconButton>
+     *          <SvgMoreSmall />
+     *        </IconButton>
+     *      </DropdownMenu>
+     *    )}
+     *  >
+     *    {items}
+     *  </Breadcrumbs>
+     */
+    overflowButton?: (visibleCount: number) => React.ReactNode;
 } & Omit<CommonProps, 'title'>;
 /**
  * A breadcrumb trail is used as a navigational aid to help users keep track
@@ -54,5 +112,63 @@ export declare const Breadcrumbs: React.ForwardRefExoticComponent<{
      * Defaults to the `SvgChevronRight` icon.
      */
     separator?: React.ReactNode;
+    /**
+     * If specified, this prop will be used to show a custom button when overflow happens,
+     * i.e. when there is not enough space to fit all the breadcrumbs.
+     *
+     * Expects a function that takes the number of items that are visible
+     * and returns the `ReactNode` to render.
+     *
+     * @example <caption>Uses the overflow button to redirect to the previous breadcrumb</caption>
+     *  <Breadcrumbs
+     *    overflowButton={(visibleCount: number) => {
+     *      const previousBreadcrumb = visibleCount > 1 ? items.length - visibleCount : items.length - 2;
+     *      return (
+     *        <Tooltip content={`Item ${previousBreadcrumb}`} placement='bottom'>
+     *          <IconButton
+     *            onClick={() => {
+     *              // click on "previousBreadcrumb"
+     *            }}
+     *          >
+     *            <SvgMoreSmall />
+     *          </IconButton>
+     *        </Tooltip>
+     *      );
+     *    }}
+     *  >
+     *    {items}
+     *  </Breadcrumbs>
+     *
+     * @example <caption>Uses the overflow button to add a dropdown that contains hidden breadcrumbs</caption>
+     *  <Breadcrumbs
+     *    overflowButton={(visibleCount) => (
+     *      <DropdownMenu
+     *        menuItems={(close) =>
+     *          Array(items.length - visibleCount)
+     *            .fill(null)
+     *            .map((_, _index) => {
+     *              const index = visibleCount > 1 ? _index + 1 : _index;
+     *              const onClick = () => {
+     *                // click on "index" breadcrumb
+     *                close();
+     *              };
+     *              return (
+     *                <MenuItem key={index} onClick={onClick}>
+     *                  Item {index}
+     *                </MenuItem>
+     *              );
+     *            })
+     *        }
+     *      >
+     *        <IconButton>
+     *          <SvgMoreSmall />
+     *        </IconButton>
+     *      </DropdownMenu>
+     *    )}
+     *  >
+     *    {items}
+     *  </Breadcrumbs>
+     */
+    overflowButton?: ((visibleCount: number) => React.ReactNode) | undefined;
 } & Omit<CommonProps, "title"> & React.RefAttributes<HTMLElement>>;
 export default Breadcrumbs;