@itwin/itwinui-react 1.44.0 → 1.46.0

package/cjs/core/Table/actionHandlers/selectHandler.js

@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.onSingleSelectHandler = exports.onSelectHandler = void 0;
+exports.onShiftSelectHandler = exports.onSingleSelectHandler = exports.onSelectHandler = void 0;
 /**
  * Handles selection when clicked on a checkbox.
  */
@@ -61,12 +61,45 @@ var onSingleSelectHandler = function (state, action, instance, onSelect, isRowDi
         };
         handleRow_1(instance.rowsById[action.id]);
     }
-    var newState = __assign(__assign({}, state), { selectedRowIds: selectedRowIds });
+    var newState = __assign(__assign({}, state), { lastSelectedRowId: action.id, selectedRowIds: selectedRowIds });
     // Passing to `onSelectHandler` to handle filtered sub-rows
     (0, exports.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
     return newState;
 };
 exports.onSingleSelectHandler = onSingleSelectHandler;
+/**
+ * Handles selection when clicked on a row while shift key is pressed.
+ */
+var onShiftSelectHandler = function (state, action, instance, onSelect, isRowDisabled) {
+    if (instance == null) {
+        return state;
+    }
+    var startIndex = Math.max(0, instance.flatRows.findIndex(function (row) { return row.id === state.lastSelectedRowId; }));
+    var endIndex = Math.max(0, instance.flatRows.findIndex(function (row) { return row.id === action.id; }));
+    if (startIndex > endIndex) {
+        var temp = startIndex;
+        startIndex = endIndex;
+        endIndex = temp;
+    }
+    var selectedRowIds = {};
+    // 1. Select all rows between start and end
+    instance.flatRows
+        .slice(startIndex, endIndex + 1)
+        .forEach(function (r) { return (selectedRowIds[r.id] = true); });
+    // 2. Select all children of the last row (endIndex)
+    // Since lastRow's children come after endIndex + 1 (not selected in step 1)
+    var handleRow = function (row) {
+        selectedRowIds[row.id] = true;
+        row.subRows.forEach(function (r) { return handleRow(r); });
+    };
+    handleRow(instance.flatRows[endIndex]);
+    var newState = __assign(__assign({}, state), { selectedRowIds: selectedRowIds });
+    // 3.1 Deselect all selected disabled rows and their children
+    // 3.2 Convert all partially selected rows marked with tick mark to horizontal line
+    (0, exports.onSelectHandler)(newState, instance, onSelect, isRowDisabled);
+    return newState;
+};
+exports.onShiftSelectHandler = onShiftSelectHandler;
 var getSelectedData = function (selectedRowIds, instance) {
     var selectedData = [];
     var setSelectedData = function (row) {

package/cjs/core/Table/cells/DefaultCell.d.ts

@@ -1,6 +1,19 @@
 import React from 'react';
 import { CellRendererProps } from 'react-table';
-export declare type DefaultCellProps<T extends Record<string, unknown>> = CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
+export declare type DefaultCellProps<T extends Record<string, unknown>> = {
+    /**
+     * Custom icon to be displayed at the beginning of the cell.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Custom icon to be displayed at the end of the cell.
+     */
+    endIcon?: JSX.Element;
+    /**
+     * Status of the cell.
+     */
+    status?: 'positive' | 'negative' | 'warning';
+} & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.

package/cjs/core/Table/cells/DefaultCell.js

@@ -44,12 +44,18 @@ var classnames_1 = __importDefault(require("classnames"));
  * }
  */
 var DefaultCell = function (props) {
+    var _a;
     // Omitting `cellProps`
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    var _a = props.cellElementProps, cellElementClassName = _a.className, cellElementStyle = _a.style, cellElementProps = __rest(_a, ["className", "style"]), children = props.children, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, rest = __rest(props, ["cellElementProps", "children", "cellProps", "isDisabled", "className", "style"]);
-    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest, { className: (0, classnames_1.default)(cellElementClassName, className, {
-            'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original),
-        }), style: __assign(__assign({}, cellElementStyle), style) }), children));
+    var _b = props.cellElementProps, cellElementClassName = _b.className, cellElementStyle = _b.style, cellElementProps = __rest(_b, ["className", "style"]), children = props.children, startIcon = props.startIcon, endIcon = props.endIcon, cellProps = props.cellProps, isDisabled = props.isDisabled, className = props.className, style = props.style, status = props.status, rest = __rest(props, ["cellElementProps", "children", "startIcon", "endIcon", "cellProps", "isDisabled", "className", "style", "status"]);
+    return (react_1.default.createElement("div", __assign({}, cellElementProps, rest, { className: (0, classnames_1.default)(cellElementClassName, className, (_a = {
+                'iui-disabled': isDisabled === null || isDisabled === void 0 ? void 0 : isDisabled(cellProps.row.original)
+            },
+            _a["iui-".concat(status)] = !!status,
+            _a)), style: __assign(__assign({}, cellElementStyle), style) }),
+        startIcon && react_1.default.createElement("div", { className: 'iui-cell-start-icon' }, startIcon),
+        children,
+        endIcon && react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, endIcon)));
 };
 exports.DefaultCell = DefaultCell;
 exports.default = exports.DefaultCell;

package/cjs/core/index.d.ts

@@ -20,6 +20,8 @@ export { ComboBox } from './ComboBox';
 export type { ComboBoxProps } from './ComboBox';
 export { DatePicker, generateLocalizedStrings } from './DatePicker';
 export type { DatePickerProps } from './DatePicker';
+export { Dialog } from './Dialog';
+export type { DialogProps, DialogButtonBarProps, DialogContentProps, DialogMainProps, DialogTitleBarProps, } from './Dialog';
 export { DropdownMenu } from './DropdownMenu';
 export type { DropdownMenuProps } from './DropdownMenu';
 export { ErrorPage } from './ErrorPage';
@@ -72,7 +74,7 @@ export { StatusMessage } from './StatusMessage';
 export type { StatusMessageProps } from './StatusMessage';
 export { Surface } from './Surface';
 export type { SurfaceProps } from './Surface';
-export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
+export { Table, tableFilters, BaseFilter, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, ActionColumn, ExpanderColumn, SelectionColumn, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';
 export type { TagProps, TagContainerProps } from './Tag';

package/cjs/core/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuDivider = exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.Alert = void 0;
-exports.Kbd = exports.Code = exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = void 0;
+exports.MenuItem = exports.Menu = exports.LabeledTextarea = exports.LabeledSelect = exports.InputGroup = exports.LabeledInput = exports.Label = exports.Input = exports.InformationPanelContent = exports.InformationPanelBody = exports.InformationPanelHeader = exports.InformationPanelWrapper = exports.InformationPanel = exports.HorizontalTab = exports.HorizontalTabs = exports.Tab = exports.VerticalTabs = exports.HeaderLogo = exports.HeaderButton = exports.HeaderBreadcrumbs = exports.Header = exports.defaultFooterElements = exports.Footer = exports.FileUploadTemplate = exports.FileUpload = exports.Fieldset = exports.ExpandableBlock = exports.ErrorPage = exports.DropdownMenu = exports.Dialog = exports.generateLocalizedStrings = exports.DatePicker = exports.ComboBox = exports.ColorPalette = exports.ColorInputPanel = exports.ColorBuilder = exports.ColorSwatch = exports.ColorPicker = exports.Checkbox = exports.Carousel = exports.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Backdrop = exports.Alert = void 0;
+exports.Blockquote = exports.Title = exports.Subheading = exports.Small = exports.Leading = exports.Headline = exports.Body = exports.Anchor = exports.TreeNodeExpander = exports.TreeNode = exports.Tree = exports.Tooltip = exports.ToggleSwitch = exports.ThemeProvider = exports.toaster = exports.TimePicker = exports.Tile = exports.Textarea = exports.TagContainer = exports.Tag = exports.SelectionColumn = exports.ExpanderColumn = exports.ActionColumn = exports.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.BaseFilter = exports.tableFilters = exports.Table = exports.Surface = exports.StatusMessage = exports.Slider = exports.SkipToContentLink = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = exports.ModalContent = exports.ModalButtonBar = exports.Modal = exports.MenuItemSkeleton = exports.MenuExtraContent = exports.MenuDivider = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = exports.Kbd = exports.Code = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -41,6 +41,8 @@ Object.defineProperty(exports, "ComboBox", { enumerable: true, get: function ()
 var DatePicker_1 = require("./DatePicker");
 Object.defineProperty(exports, "DatePicker", { enumerable: true, get: function () { return DatePicker_1.DatePicker; } });
 Object.defineProperty(exports, "generateLocalizedStrings", { enumerable: true, get: function () { return DatePicker_1.generateLocalizedStrings; } });
+var Dialog_1 = require("./Dialog");
+Object.defineProperty(exports, "Dialog", { enumerable: true, get: function () { return Dialog_1.Dialog; } });
 var DropdownMenu_1 = require("./DropdownMenu");
 Object.defineProperty(exports, "DropdownMenu", { enumerable: true, get: function () { return DropdownMenu_1.DropdownMenu; } });
 var ErrorPage_1 = require("./ErrorPage");
@@ -119,6 +121,7 @@ Object.defineProperty(exports, "Surface", { enumerable: true, get: function () {
 var Table_1 = require("./Table");
 Object.defineProperty(exports, "Table", { enumerable: true, get: function () { return Table_1.Table; } });
 Object.defineProperty(exports, "tableFilters", { enumerable: true, get: function () { return Table_1.tableFilters; } });
+Object.defineProperty(exports, "BaseFilter", { enumerable: true, get: function () { return Table_1.BaseFilter; } });
 Object.defineProperty(exports, "FilterButtonBar", { enumerable: true, get: function () { return Table_1.FilterButtonBar; } });
 Object.defineProperty(exports, "DefaultCell", { enumerable: true, get: function () { return Table_1.DefaultCell; } });
 Object.defineProperty(exports, "EditableCell", { enumerable: true, get: function () { return Table_1.EditableCell; } });

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { CommonProps } from '../props';
 export declare type MiddleTextTruncationProps = {
     /**
@@ -10,12 +10,26 @@ export declare type MiddleTextTruncationProps = {
      * @default 6
      */
     endCharsCount?: number;
+    /**
+     * Custom renderer for the truncated text.
+     */
+    textRenderer?: (truncatedText: string, originalText: string) => React.ReactNode;
 } & CommonProps;
 /**
  * Truncates text with the ellipsis in the middle,
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 export declare const MiddleTextTruncation: (props: MiddleTextTruncationProps) => JSX.Element;
 export default MiddleTextTruncation;

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

@@ -38,10 +38,21 @@ var ELLIPSIS_CHAR = '…';
  * leaving defined number of chars at the end.
  * @example
  * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' />
+ * @example
+ * <MiddleTextTruncation text='ThisIsMyVeryLongFileName.dgn' endCharsCount={10} />
+ * @example
+ * <MiddleTextTruncation
+ *   text='ThisIsMyVeryLongFileName.dgn'
+ *   textRenderer={React.useCallback(
+ *     (truncatedText) => <b>{truncatedText}</b>,
+ *     []
+ *   )}
+ * />
  */
 var MiddleTextTruncation = function (props) {
-    var text = props.text, _a = props.endCharsCount, endCharsCount = _a === void 0 ? 6 : _a, style = props.style, rest = __rest(props, ["text", "endCharsCount", "style"]);
-    var _b = (0, useOverflow_1.useOverflow)(text), ref = _b[0], visibleCount = _b[1];
+    var _a;
+    var text = props.text, _b = props.endCharsCount, endCharsCount = _b === void 0 ? 6 : _b, textRenderer = props.textRenderer, style = props.style, rest = __rest(props, ["text", "endCharsCount", "textRenderer", "style"]);
+    var _c = (0, useOverflow_1.useOverflow)(text), ref = _c[0], visibleCount = _c[1];
     var truncatedText = react_1.default.useMemo(function () {
         if (visibleCount < text.length) {
             return "".concat(text.substring(0, visibleCount - endCharsCount - ELLIPSIS_CHAR.length)).concat(ELLIPSIS_CHAR).concat(text.substring(text.length - endCharsCount));
@@ -50,7 +61,7 @@ var MiddleTextTruncation = function (props) {
             return text;
         }
     }, [endCharsCount, text, visibleCount]);
-    return (react_1.default.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), truncatedText));
+    return (react_1.default.createElement("span", __assign({ style: __assign({ display: 'flex', minWidth: 0, flexGrow: 1, whiteSpace: 'nowrap' }, style), ref: ref }, rest), (_a = textRenderer === null || textRenderer === void 0 ? void 0 : textRenderer(truncatedText, text)) !== null && _a !== void 0 ? _a : truncatedText));
 };
 exports.MiddleTextTruncation = MiddleTextTruncation;
 exports.default = exports.MiddleTextTruncation;

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

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare type ResizerProps = {
+    /**
+     * Ref of the element that is being resized.
+     */
+    elementRef: React.RefObject<HTMLElement>;
+    /**
+     * Ref of the container element in order to avoid resizing past container boundaries.
+     * If not passed, viewport will be used.
+     */
+    containerRef?: React.RefObject<HTMLElement>;
+    /**
+     * Callback that is being called on resize end.
+     * Useful to preserve state if element is being closed.
+     */
+    onResizeEnd?: (style: React.CSSProperties) => void;
+};
+/**
+ * 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>
+ * );
+ */
+export declare const Resizer: (props: ResizerProps) => JSX.Element;
+export default Resizer;

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;