@itwin/itwinui-react 1.45.0 → 1.47.0

package/cjs/core/Table/filters/FilterToggle.d.ts

@@ -4,7 +4,6 @@ import '@itwin/itwinui-css/css/table.css';
 import { StylingProps } from '../../utils';
 export declare type FilterToggleProps<T extends Record<string, unknown>> = {
     column: HeaderGroup<T>;
-    ownerDocument?: Document;
 } & StylingProps;
 /**
  * Handles showing filter icon and opening filter component.

package/cjs/core/Table/filters/FilterToggle.js

@@ -41,9 +41,9 @@ var Buttons_1 = require("../../Buttons");
  * Handles showing filter icon and opening filter component.
  */
 var FilterToggle = function (props) {
-    var column = props.column, _a = props.ownerDocument, ownerDocument = _a === void 0 ? (0, utils_1.getDocument)() : _a, className = props.className, rest = __rest(props, ["column", "ownerDocument", "className"]);
+    var column = props.column, className = props.className, rest = __rest(props, ["column", "className"]);
     (0, utils_1.useTheme)();
-    var _b = react_1.default.useState(false), isVisible = _b[0], setIsVisible = _b[1];
+    var _a = react_1.default.useState(false), isVisible = _a[0], setIsVisible = _a[1];
     var close = react_1.default.useCallback(function () { return setIsVisible(false); }, []);
     var setFilter = react_1.default.useCallback(function (filterValue) {
         column.setFilter(filterValue);
@@ -54,7 +54,7 @@ var FilterToggle = function (props) {
         close();
     }, [close, column]);
     var isColumnFiltered = column.filterValue != null && column.filterValue !== '';
-    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
+    return (react_1.default.createElement(react_1.default.Fragment, null, column.canFilter && column.Filter && (react_1.default.createElement(utils_1.Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close },
         react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || isColumnFiltered, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
                 // Prevents from triggering sort

package/cjs/core/Table/hooks/useResizeColumns.d.ts

@@ -1,5 +1,37 @@
+/**
+ * Copied from react-table as useResizeColumns and made some changes:
+ *  - Added TS typings
+ *  - Added sibling/next column resize when resizing
+ *  - Favoring min/max widths when resizing
+ *  - Added owner document support
+ * @link https://github.com/tannerlinsley/react-table/blob/master/src/plugin-hooks/useResizeColumns.js
+ */
+/**
+ * MIT License
+ *
+ * Copyright (c) 2016 Tanner Linsley
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+import React from 'react';
 import { Hooks } from 'react-table';
 export declare const useResizeColumns: {
-    <T extends Record<string, unknown>>(ownerDocument: Document | undefined): (hooks: Hooks<T>) => void;
+    <T extends Record<string, unknown>>(ownerDocument: React.RefObject<Document | undefined>): (hooks: Hooks<T>) => void;
     pluginName: string;
 };

package/cjs/core/Table/hooks/useResizeColumns.js

@@ -33,24 +33,19 @@ var isTouchEvent = function (event) {
 };
 var defaultGetResizerProps = function (ownerDocument) { return function (props, _a) {
     var instance = _a.instance, header = _a.header, nextHeader = _a.nextHeader;
-    if (!ownerDocument) {
-        return props;
-    }
-    var dispatch = instance.dispatch, flatHeaders = instance.flatHeaders;
+    var dispatch = instance.dispatch;
     var onResizeStart = function (e, header) {
+        var _a, _b, _c;
         // lets not respond to multiple touches (e.g. 2 or 3 fingers)
         if (isTouchEvent(e) && e.touches && e.touches.length > 1) {
             return;
         }
-        // Setting `width` here because it might take several rerenders until actual column width is set.
-        flatHeaders.forEach(function (h) {
-            if (!h.width) {
-                h.width = h.resizeWidth;
-            }
-        });
-        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [d.id, d.width]; });
+        var headerIdWidths = getLeafHeaders(header).map(function (d) { return [
+            d.id,
+            getHeaderWidth(d),
+        ]; });
         var nextHeaderIdWidths = nextHeader
-            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, d.width]; })
+            ? getLeafHeaders(nextHeader).map(function (d) { return [d.id, getHeaderWidth(d)]; })
             : [];
         var clientX = isTouchEvent(e)
             ? Math.round(e.touches[0].clientX)
@@ -69,8 +64,10 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 moveHandler: function (e) { return dispatchMove(e.clientX); },
                 upEvent: 'mouseup',
                 upHandler: function () {
-                    ownerDocument.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
-                    ownerDocument.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    var _a, _b, _c;
+                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mousemove', handlersAndEvents.mouse.moveHandler);
+                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseup', handlersAndEvents.mouse.upHandler);
+                    (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.removeEventListener('mouseleave', handlersAndEvents.mouse.upHandler);
                     dispatchEnd();
                 },
             },
@@ -85,8 +82,9 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 },
                 upEvent: 'touchend',
                 upHandler: function () {
-                    ownerDocument.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
-                    ownerDocument.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
+                    var _a, _b;
+                    (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(handlersAndEvents.touch.moveEvent, handlersAndEvents.touch.moveHandler);
+                    (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.removeEventListener(handlersAndEvents.touch.upEvent, handlersAndEvents.touch.moveHandler);
                     dispatchEnd();
                 },
             },
@@ -97,13 +95,16 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
         var passiveIfSupported = passiveEventSupported()
             ? { passive: false }
             : false;
-        ownerDocument.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
-        ownerDocument.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        (_a = ownerDocument.current) === null || _a === void 0 ? void 0 : _a.addEventListener(events.moveEvent, events.moveHandler, passiveIfSupported);
+        (_b = ownerDocument.current) === null || _b === void 0 ? void 0 : _b.addEventListener(events.upEvent, events.upHandler, passiveIfSupported);
+        if (!isTouchEvent(e)) {
+            (_c = ownerDocument.current) === null || _c === void 0 ? void 0 : _c.addEventListener('mouseleave', handlersAndEvents.mouse.upHandler, passiveIfSupported);
+        }
         dispatch({
             type: react_table_1.actions.columnStartResizing,
             columnId: header.id,
-            columnWidth: header.width,
-            nextColumnWidth: nextHeader === null || nextHeader === void 0 ? void 0 : nextHeader.width,
+            columnWidth: getHeaderWidth(header),
+            nextColumnWidth: getHeaderWidth(nextHeader),
             headerIdWidths: headerIdWidths,
             nextHeaderIdWidths: nextHeaderIdWidths,
             clientX: clientX,
@@ -120,6 +121,8 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
                 e.persist();
                 // Prevents from triggering drag'n'drop
                 e.preventDefault();
+                // Prevents from triggering sort
+                e.stopPropagation();
                 onResizeStart(e, header);
             },
             onTouchStart: function (e) {
@@ -155,13 +158,29 @@ var reducer = function (newState, action, previousState, instance) {
     if (action.type === react_table_1.actions.columnResizing) {
         var clientX = action.clientX;
         var _a = newState.columnResizing, _b = _a.startX, startX = _b === void 0 ? 0 : _b, _c = _a.columnWidth, columnWidth = _c === void 0 ? 1 : _c, _d = _a.nextColumnWidth, nextColumnWidth = _d === void 0 ? 1 : _d, _e = _a.headerIdWidths, headerIdWidths = _e === void 0 ? [] : _e, _f = _a.nextHeaderIdWidths, nextHeaderIdWidths = _f === void 0 ? [] : _f;
+        if (!instance) {
+            return newState;
+        }
         var deltaX = clientX - startX;
         var newColumnWidths = getColumnWidths(headerIdWidths, deltaX / columnWidth);
-        var newNextColumnWidths = getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth);
-        if (!isNewColumnWidthsValid(newColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders) ||
-            !isNewColumnWidthsValid(newNextColumnWidths, instance === null || instance === void 0 ? void 0 : instance.flatHeaders)) {
+        var isTableWidthDecreasing = calculateTableWidth(newColumnWidths, instance.flatHeaders) <
+            instance.tableWidth;
+        var newNextColumnWidths = (instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'fit' ||
+            ((instance === null || instance === void 0 ? void 0 : instance.columnResizeMode) === 'expand' && isTableWidthDecreasing)
+            ? getColumnWidths(nextHeaderIdWidths, -deltaX / nextColumnWidth)
+            : {};
+        if (!isNewColumnWidthsValid(newColumnWidths, instance.flatHeaders) ||
+            !isNewColumnWidthsValid(newNextColumnWidths, instance.flatHeaders) ||
+            !isNewTableWidthValid(__assign(__assign({}, newColumnWidths), newNextColumnWidths), instance)) {
             return newState;
         }
+        // Setting `width` here because it might take several rerenders until actual column width is set.
+        // Also setting after the actual resize happened.
+        instance === null || instance === void 0 ? void 0 : instance.flatHeaders.forEach(function (h) {
+            if (!h.width) {
+                h.width = h.resizeWidth;
+            }
+        });
         return __assign(__assign({}, newState), { columnResizing: __assign(__assign({}, newState.columnResizing), { columnWidths: __assign(__assign(__assign({}, newState.columnResizing.columnWidths), newColumnWidths), newNextColumnWidths) }) });
     }
     if (action.type === react_table_1.actions.columnDoneResizing) {
@@ -201,25 +220,53 @@ var isNewColumnWidthsValid = function (columnWidths, headers) {
     }
     return true;
 };
+var isNewTableWidthValid = function (columnWidths, instance) {
+    if (instance.columnResizeMode === 'fit') {
+        return true;
+    }
+    var newTableWidth = 0;
+    for (var _i = 0, _a = instance.flatHeaders; _i < _a.length; _i++) {
+        var header = _a[_i];
+        newTableWidth += columnWidths[header.id]
+            ? columnWidths[header.id]
+            : getHeaderWidth(header);
+    }
+    // `tableWidth` is whole number therefore we need to round the `newTableWidth`
+    if (Math.round(newTableWidth) < instance.tableWidth) {
+        return false;
+    }
+    return true;
+};
 var useInstanceBeforeDimensions = function (instance) {
-    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing;
+    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks, columnResizing = instance.state.columnResizing, columnResizeMode = instance.columnResizeMode;
     var getInstance = (0, react_table_1.useGetLatest)(instance);
     flatHeaders.forEach(function (header, index) {
         var _a;
         var resizeWidth = columnResizing.columnWidths[header.id];
         header.width = resizeWidth || header.width || header.originalWidth;
         header.isResizing = columnResizing.isResizingColumn === header.id;
-        var headerToResize = header.disableResizing
+        var headerToResize = header.disableResizing && columnResizeMode === 'fit'
             ? getPreviousResizableHeader(header, instance)
             : header;
-        var nextResizableHeader = getNextResizableHeader(header, instance);
+        // When `columnResizeMode` is `expand` and it is a last column,
+        // then try to find some column on the left side to resize
+        // when table width is decreasing.
+        var nextResizableHeader = columnResizeMode === 'expand' && index === flatHeaders.length - 1
+            ? getPreviousResizableHeader(header, instance)
+            : getNextResizableHeader(header, instance);
         header.canResize =
             header.disableResizing != null ? !header.disableResizing : true;
         // Show resizer when header is resizable or when next header is resizable
         // and there is resizable columns on the left side of the resizer.
-        header.isResizerVisible =
-            (header.canResize && !!nextResizableHeader) ||
-                (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+        if (columnResizeMode === 'fit') {
+            header.isResizerVisible =
+                (header.canResize && !!nextResizableHeader) ||
+                    (headerToResize && !!((_a = instance.flatHeaders[index + 1]) === null || _a === void 0 ? void 0 : _a.canResize));
+            // When resize mode is `expand` show resizer on the current resizable column.
+        }
+        else {
+            header.isResizerVisible = header.canResize && !!headerToResize;
+        }
         header.getResizerProps = (0, react_table_1.makePropGetter)(getHooks().getResizerProps, {
             instance: getInstance(),
             header: headerToResize,
@@ -259,6 +306,19 @@ function getLeafHeaders(header) {
     recurseHeader(header);
     return leafHeaders;
 }
+var getHeaderWidth = function (header) {
+    return Number(header.width || header.resizeWidth || 0);
+};
+var calculateTableWidth = function (columnWidths, headers) {
+    var newTableWidth = 0;
+    for (var _i = 0, headers_1 = headers; _i < headers_1.length; _i++) {
+        var header = headers_1[_i];
+        newTableWidth += columnWidths[header.id]
+            ? columnWidths[header.id]
+            : getHeaderWidth(header);
+    }
+    return newTableWidth;
+};
 // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#safely_detecting_option_support
 var passiveSupported = null;
 var passiveEventSupported = function () {

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/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';