@itwin/itwinui-react 1.32.0 → 1.34.0

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

@@ -0,0 +1,120 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useColumnDragAndDrop = void 0;
+var react_table_1 = require("react-table");
+var REORDER_ACTIONS = {
+    columnDragStart: 'columnDragStart',
+    columnDragEnd: 'columnDragEnd',
+};
+var useColumnDragAndDrop = function (isEnabled) { return function (hooks) {
+    hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
+}; };
+exports.useColumnDragAndDrop = useColumnDragAndDrop;
+var defaultGetDragAndDropProps = function (isEnabled) { return function (props, _a) {
+    var instance = _a.instance, header = _a.header;
+    if (!isEnabled || header.disableReordering) {
+        return props;
+    }
+    var onDragStart = function () {
+        instance.dispatch({
+            type: REORDER_ACTIONS.columnDragStart,
+            columnIndex: instance.flatHeaders.indexOf(header),
+        });
+    };
+    var setOnDragColumnStyle = function (event, position) {
+        var columnElement = event.currentTarget;
+        columnElement.classList.remove('iui-reorder-column-right');
+        columnElement.classList.remove('iui-reorder-column-left');
+        if (position === 'left') {
+            columnElement.classList.add('iui-reorder-column-left');
+        }
+        else if (position === 'right') {
+            columnElement.classList.add('iui-reorder-column-right');
+        }
+    };
+    var reorderColumns = function (tableColumns, srcIndex, dstIndex) {
+        var newTableColumns = __spreadArray([], tableColumns, true);
+        var removed = newTableColumns.splice(srcIndex, 1)[0];
+        newTableColumns.splice(dstIndex, 0, removed);
+        return newTableColumns;
+    };
+    var onDragOver = function (event) {
+        event.preventDefault();
+        var headerIndex = instance.flatHeaders.indexOf(header);
+        if (instance.state.columnReorderStartIndex !== headerIndex) {
+            setOnDragColumnStyle(event, instance.state.columnReorderStartIndex > headerIndex ? 'left' : 'right');
+        }
+    };
+    var onDragLeave = function (event) {
+        setOnDragColumnStyle(event);
+    };
+    var onDrop = function (event) {
+        event.preventDefault();
+        setOnDragColumnStyle(event);
+        var columnIds = instance.flatHeaders.map(function (x) { return x.id; });
+        var srcIndex = instance.state.columnReorderStartIndex;
+        var dstIndex = columnIds.findIndex(function (x) { return x === header.id; });
+        if (srcIndex === dstIndex || srcIndex === -1 || dstIndex === -1) {
+            return;
+        }
+        instance.setColumnOrder(reorderColumns(columnIds, srcIndex, dstIndex));
+        instance.dispatch({
+            type: REORDER_ACTIONS.columnDragEnd,
+            columnIndex: -1,
+        });
+    };
+    return [
+        props,
+        {
+            draggable: true,
+            onDragStart: onDragStart,
+            onDragOver: onDragOver,
+            onDragLeave: onDragLeave,
+            onDrop: onDrop,
+        },
+    ];
+}; };
+var reducer = function (newState, action) {
+    switch (action.type) {
+        case react_table_1.actions.init:
+            return __assign(__assign({}, newState), { columnReorderStartIndex: -1 });
+        case REORDER_ACTIONS.columnDragStart:
+            return __assign(__assign({}, newState), { columnReorderStartIndex: action.columnIndex });
+        case REORDER_ACTIONS.columnDragEnd:
+            return __assign(__assign({}, newState), { columnReorderStartIndex: -1 });
+        default:
+            return newState;
+    }
+};
+var useInstance = function (instance) {
+    var flatHeaders = instance.flatHeaders, getHooks = instance.getHooks;
+    var getInstance = (0, react_table_1.useGetLatest)(instance);
+    flatHeaders.forEach(function (header) {
+        header.getDragAndDropProps = (0, react_table_1.makePropGetter)(getHooks().getDragAndDropProps, {
+            instance: getInstance(),
+            header: header,
+        });
+    });
+};

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

@@ -35,6 +35,7 @@ var useExpanderCell = function (subComponent, expanderCell, isRowDisabled) { ret
             maxWidth: 48,
             columnClassName: 'iui-slot',
             cellClassName: 'iui-slot',
+            disableReordering: true,
             Cell: function (props) {
                 var row = props.row;
                 if (!subComponent(row)) {

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

@@ -112,16 +112,20 @@ var defaultGetResizerProps = function (ownerDocument) { return function (props,
     return [
         props,
         {
-            onMouseDown: function (e) {
-                e.persist();
+            onClick: function (e) {
                 // Prevents from triggering sort
                 e.stopPropagation();
+            },
+            onMouseDown: function (e) {
+                e.persist();
+                // Prevents from triggering drag'n'drop
+                e.preventDefault();
                 onResizeStart(e, header);
             },
             onTouchStart: function (e) {
                 e.persist();
-                // Prevents from triggering sort
-                e.stopPropagation();
+                // Prevents from triggering drag'n'drop
+                e.preventDefault();
                 onResizeStart(e, header);
             },
             style: {

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

@@ -45,6 +45,7 @@ var useSelectionCell = function (isSelectable, isRowDisabled) { return function
             maxWidth: 48,
             columnClassName: 'iui-slot',
             cellClassName: 'iui-slot',
+            disableReordering: true,
             Header: function (_a) {
                 var getToggleAllRowsSelectedProps = _a.getToggleAllRowsSelectedProps, rows = _a.rows, initialRows = _a.initialRows, state = _a.state;
                 var disabled = rows.every(function (row) { return isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original); });
@@ -55,8 +56,7 @@ var useSelectionCell = function (isSelectable, isRowDisabled) { return function
             },
             Cell: function (_a) {
                 var row = _a.row;
-                return (react_1.default.createElement("span", { onClick: function (e) { return e.stopPropagation(); } },
-                    react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original) }))));
+                return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
             },
         }
     ], columns, true); });

package/cjs/core/ToggleSwitch/ToggleSwitch.js

@@ -57,20 +57,23 @@ exports.ToggleSwitch = react_1.default.forwardRef(function (props, ref) {
     (0, utils_1.useTheme)();
     var inputElementRef = react_1.default.useRef(null);
     var refs = (0, utils_1.useMergedRefs)(inputElementRef, ref);
+    var WrapperComponent = label ? 'label' : 'div';
     react_1.default.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (react_1.default.createElement("label", { className: (0, classnames_1.default)('iui-toggle-switch', { 'iui-disabled': disabled }, className), style: style },
-        react_1.default.createElement("input", __assign({ type: 'checkbox', disabled: disabled, ref: refs }, rest)),
-        labelPosition === 'left' && label && (react_1.default.createElement("span", { className: 'iui-label' }, label)),
-        react_1.default.createElement("span", { className: 'iui-toggle' },
-            icon &&
-                react_1.default.cloneElement(icon, {
-                    className: (0, classnames_1.default)('iui-icon', icon.props.className),
-                }),
-            react_1.default.createElement("span", { className: 'iui-handle' })),
-        labelPosition === 'right' && label && (react_1.default.createElement("span", { className: 'iui-label' }, label))));
+    return (react_1.default.createElement(WrapperComponent, { className: (0, classnames_1.default)('iui-toggle-switch-wrapper', {
+            'iui-disabled': disabled,
+            'iui-label-on-right': label && labelPosition === 'right',
+            'iui-label-on-left': label && labelPosition === 'left',
+        }, className), style: style },
+        react_1.default.createElement("input", __assign({ className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs }, rest)),
+        icon &&
+            react_1.default.cloneElement(icon, {
+                className: (0, classnames_1.default)('iui-toggle-switch-icon', icon.props.className),
+                'aria-hidden': true,
+            }),
+        label && react_1.default.createElement("span", { className: 'iui-toggle-switch-label' }, label)));
 });
 exports.default = exports.ToggleSwitch;

package/cjs/core/UserIcon/UserIcon.js

@@ -30,9 +30,6 @@ exports.UserIcon = exports.defaultStatusTitles = 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 Away_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Away"));
-var Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -63,17 +60,11 @@ var UserIcon = function (props) {
     var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
     (0, utils_1.useTheme)();
     var statusTitles = __assign(__assign({}, exports.defaultStatusTitles), translatedStatusTitles);
-    var iconMap = {
-        away: react_1.default.createElement(Away_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
-        offline: react_1.default.createElement(CloseSmall_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
-        online: react_1.default.createElement(Checkmark_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
-        busy: react_1.default.createElement(react_1.default.Fragment, null),
-    };
     return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         react_1.default.createElement("span", { className: 'iui-stroke' }),
         status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', (_b = {},
                 _b["iui-" + status] = !!status,
-                _b)), "aria-label": statusTitles[status] }, iconMap[status]))));
+                _b)), "aria-label": statusTitles[status] }))));
 };
 exports.UserIcon = UserIcon;
 exports.default = exports.UserIcon;

package/cjs/core/index.d.ts

@@ -62,6 +62,8 @@ export { SideNavigation, SidenavButton, SidenavSubmenu, SidenavSubmenuHeader, }
 export type { SideNavigationProps, SidenavButtonProps, SidenavSubmenuProps, SidenavSubmenuHeaderProps, } from './SideNavigation';
 export { Slider } from './Slider';
 export type { SliderProps } from './Slider';
+export { StatusMessage } from './StatusMessage';
+export type { StatusMessageProps } from './StatusMessage';
 export { Table, tableFilters, FilterButtonBar, DefaultCell, EditableCell, TablePaginator, } from './Table';
 export type { TableProps, TableFilterProps, TableFilterValue, DateRangeFilterOptions, FilterButtonBarProps, DefaultCellProps, EditableCellProps, TablePaginatorProps, TablePaginatorRendererProps, } from './Table';
 export { Tag, TagContainer } from './Tag';

package/cjs/core/index.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModalButtonBar = exports.Modal = exports.MenuExtraContent = 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.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.ButtonGroup = exports.SplitButton = exports.IdeasButton = exports.IconButton = exports.DropdownButton = exports.Button = exports.Breadcrumbs = exports.Badge = exports.Alert = void 0;
-exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = 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.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
+exports.MiddleTextTruncation = exports.ColorValue = exports.useTheme = exports.getUserColor = exports.Wizard = exports.UserIconGroup = exports.UserIcon = exports.Text = exports.KbdKeys = 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.TablePaginator = exports.EditableCell = exports.DefaultCell = exports.FilterButtonBar = exports.tableFilters = exports.Table = exports.StatusMessage = exports.Slider = exports.SidenavSubmenuHeader = exports.SidenavSubmenu = exports.SidenavButton = exports.SideNavigation = exports.Select = exports.RadioTileGroup = exports.RadioTile = exports.Radio = exports.ProgressRadial = exports.ProgressLinear = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -102,6 +102,8 @@ Object.defineProperty(exports, "SidenavSubmenu", { enumerable: true, get: functi
 Object.defineProperty(exports, "SidenavSubmenuHeader", { enumerable: true, get: function () { return SideNavigation_1.SidenavSubmenuHeader; } });
 var Slider_1 = require("./Slider");
 Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return Slider_1.Slider; } });
+var StatusMessage_1 = require("./StatusMessage");
+Object.defineProperty(exports, "StatusMessage", { enumerable: true, get: function () { return StatusMessage_1.StatusMessage; } });
 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; } });

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

@@ -9,6 +9,7 @@ export declare type InputContainerProps<T extends React.ElementType = 'div'> = {
     icon?: JSX.Element;
     isLabelInline?: boolean;
     isIconInline?: boolean;
+    statusMessage?: React.ReactNode;
 } & React.ComponentPropsWithoutRef<T>;
 /**
  * Input container to wrap inputs with label, and add optional message and icon.

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

@@ -39,23 +39,24 @@ var classnames_1 = __importDefault(require("classnames"));
 var InputContainer = function (props) {
     var _a;
     var _b;
-    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style"]);
+    var _c = props.as, Element = _c === void 0 ? 'div' : _c, label = props.label, disabled = props.disabled, required = props.required, status = props.status, message = props.message, icon = props.icon, isLabelInline = props.isLabelInline, isIconInline = props.isIconInline, children = props.children, className = props.className, style = props.style, statusMessage = props.statusMessage, rest = __rest(props, ["as", "label", "disabled", "required", "status", "message", "icon", "isLabelInline", "isIconInline", "children", "className", "style", "statusMessage"]);
     return (react_1.default.createElement(Element, __assign({ className: (0, classnames_1.default)('iui-input-container', (_a = {
                 'iui-disabled': disabled
             },
             _a["iui-" + status] = !!status,
             _a['iui-inline-label'] = isLabelInline,
             _a['iui-inline-icon'] = isIconInline,
-            _a['iui-with-message'] = !!message && !isLabelInline,
+            _a['iui-with-message'] = (!!message || !!icon || !!statusMessage) && !isLabelInline,
             _a), className), style: style }, rest),
         label && (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-label', {
                 'iui-required': required,
             }) }, label)),
         children,
-        icon &&
-            react_1.default.cloneElement(icon, {
-                className: (0, classnames_1.default)('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
-            }),
-        message && !isLabelInline && (react_1.default.createElement("div", { className: 'iui-message' }, message))));
+        statusMessage ? (statusMessage) : (react_1.default.createElement(react_1.default.Fragment, null,
+            icon &&
+                react_1.default.cloneElement(icon, {
+                    className: (0, classnames_1.default)('iui-input-icon', (_b = icon.props) === null || _b === void 0 ? void 0 : _b.className),
+                }),
+            message && !isLabelInline && (react_1.default.createElement("div", { className: 'iui-message' }, message))))));
 };
 exports.InputContainer = InputContainer;

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

@@ -1,7 +1,8 @@
 /**
  * Hook that uses `IntersectionObserver` to trigger `onIntersect` callback when element is in viewport.
- * Callback is called only once.
- * Hook returns a function that you need to use to set a reference of the element you want to observe.
+ * Callback is called only once by default (can be changed using the `once` parameter).
+ * @returns a callback ref that needs to be set on the element you want to observe.
+ * @private
  * @example
  * const onIntersection = React.useCallback(() => {
  *   console.log('Element is in viewport!');
@@ -9,4 +10,4 @@
  * const ref = useIntersection(onIntersection);
  * return (<div ref={ref}>One of many elements</div>);
  */
-export declare const useIntersection: (onIntersect: () => void, options?: IntersectionObserverInit) => (node: HTMLElement | null) => void;
+export declare const useIntersection: (onIntersect: () => void, options?: IntersectionObserverInit, once?: boolean) => (node: HTMLElement | null) => void;

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

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

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

@@ -1,13 +1,14 @@
 import React from 'react';
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * that should be visible based on the size of the container element.
  *
  * The returned number should be used to render the element with fewer items.
  *
  * @private
  * @param items Items that this element contains.
  * @param disabled Set to true to disconnect the observer.
+ * @param dimension 'horizontal' (default) or 'vertical'
  * @returns [callback ref to set on container, stateful count of visible items]
  *
  * @example
@@ -20,4 +21,4 @@ import React from 'react';
  *   </div>
  * );
  */
-export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean) => readonly [(instance: T | null) => void, number];
+export declare const useOverflow: <T extends HTMLElement>(items: React.ReactNode[] | string, disabled?: boolean, orientation?: 'horizontal' | 'vertical') => readonly [(instance: T | null) => void, number];

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

@@ -14,13 +14,14 @@ var useResizeObserver_1 = require("./useResizeObserver");
 var STARTING_MAX_ITEMS_COUNT = 20;
 /**
  * Hook that observes the size of an element and returns the number of items
- * that should be visible based on the width of the container element.
+ * that should be visible based on the size of the container element.
  *
  * The returned number should be used to render the element with fewer items.
  *
  * @private
  * @param items Items that this element contains.
  * @param disabled Set to true to disconnect the observer.
+ * @param dimension 'horizontal' (default) or 'vertical'
  * @returns [callback ref to set on container, stateful count of visible items]
  *
  * @example
@@ -33,20 +34,21 @@ var STARTING_MAX_ITEMS_COUNT = 20;
  *   </div>
  * );
  */
-var useOverflow = function (items, disabled) {
+var useOverflow = function (items, disabled, orientation) {
     if (disabled === void 0) { disabled = false; }
+    if (orientation === void 0) { orientation = 'horizontal'; }
     var containerRef = react_1.default.useRef(null);
     var _a = react_1.default.useState(function () {
         return disabled ? items.length : Math.min(items.length, STARTING_MAX_ITEMS_COUNT);
     }), visibleCount = _a[0], setVisibleCount = _a[1];
     var needsFullRerender = react_1.default.useRef(true);
-    var _b = react_1.default.useState(0), containerWidth = _b[0], setContainerWidth = _b[1];
-    var previousContainerWidth = react_1.default.useRef(0);
-    var updateContainerWidth = react_1.default.useCallback(function (_a) {
-        var width = _a.width;
-        return setContainerWidth(width);
-    }, []);
-    var _c = (0, useResizeObserver_1.useResizeObserver)(updateContainerWidth), resizeRef = _c[0], observer = _c[1];
+    var _b = react_1.default.useState(0), containerSize = _b[0], setContainerSize = _b[1];
+    var previousContainerSize = react_1.default.useRef(0);
+    var updateContainerSize = react_1.default.useCallback(function (_a) {
+        var width = _a.width, height = _a.height;
+        return setContainerSize(orientation === 'horizontal' ? width : height);
+    }, [orientation]);
+    var _c = (0, useResizeObserver_1.useResizeObserver)(updateContainerSize), resizeRef = _c[0], observer = _c[1];
     var resizeObserverRef = react_1.default.useRef(observer);
     react_1.default.useLayoutEffect(function () {
         if (disabled) {
@@ -56,7 +58,7 @@ var useOverflow = function (items, disabled) {
             setVisibleCount(Math.min(items.length, STARTING_MAX_ITEMS_COUNT));
             needsFullRerender.current = true;
         }
-    }, [containerWidth, disabled, items]);
+    }, [containerSize, disabled, items]);
     var mergedRefs = (0, useMergedRefs_1.useMergedRefs)(containerRef, resizeRef);
     react_1.default.useLayoutEffect(function () {
         var _a;
@@ -64,25 +66,26 @@ var useOverflow = function (items, disabled) {
             (_a = resizeObserverRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
             return;
         }
-        var availableWidth = containerRef.current.offsetWidth;
-        var requiredWidth = containerRef.current.scrollWidth;
-        if (availableWidth < requiredWidth) {
-            var avgItemWidth = requiredWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+        var dimension = orientation === 'horizontal' ? 'Width' : 'Height';
+        var availableSize = containerRef.current["offset" + dimension];
+        var requiredSize = containerRef.current["scroll" + dimension];
+        if (availableSize < requiredSize) {
+            var avgItemSize = requiredSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             setVisibleCount(visibleItems);
         }
         else if (needsFullRerender.current) {
-            var childrenWidth = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child.offsetWidth; }, 0);
-            var avgItemWidth = childrenWidth / visibleCount;
-            var visibleItems = Math.floor(availableWidth / avgItemWidth);
+            var childrenSize = Array.from(containerRef.current.children).reduce(function (sum, child) { return sum + child["offset" + dimension]; }, 0);
+            var avgItemSize = childrenSize / visibleCount;
+            var visibleItems = Math.floor(availableSize / avgItemSize);
             // Doubling the visible items to overflow the container. Just to be safe.
             setVisibleCount(Math.min(items.length, visibleItems * 2));
         }
         needsFullRerender.current = false;
-    }, [containerWidth, visibleCount, disabled, items.length]);
+    }, [containerSize, visibleCount, disabled, items.length, orientation]);
     react_1.default.useLayoutEffect(function () {
-        previousContainerWidth.current = containerWidth;
-    }, [containerWidth]);
+        previousContainerSize.current = containerSize;
+    }, [containerSize]);
     return [mergedRefs, visibleCount];
 };
 exports.useOverflow = useOverflow;

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

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

package/esm/core/ButtonGroup/ButtonGroup.d.ts

@@ -20,6 +20,11 @@ export declare type ButtonGroupProps = {
      * @default 'end'
      */
     overflowPlacement?: 'start' | 'end';
+    /**
+     * Should the buttons be placed in a horizontal or vertical layout?
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
 } & React.ComponentPropsWithRef<'div'>;
 /**
  * Group buttons together for common actions.
@@ -49,5 +54,5 @@ export declare type ButtonGroupProps = {
  *   {buttons}
  * </ButtonGroup>
  */
-export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ButtonGroup: React.ForwardRefExoticComponent<Pick<ButtonGroupProps, "orientation" | "key" | keyof React.HTMLAttributes<HTMLDivElement> | "overflowButton" | "overflowPlacement"> & React.RefAttributes<HTMLDivElement>>;
 export default ButtonGroup;

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -57,12 +57,15 @@ import '@itwin/itwinui-css/css/button.css';
  * </ButtonGroup>
  */
 export var ButtonGroup = React.forwardRef(function (props, ref) {
-    var children = props.children, className = props.className, style = props.style, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement"]);
+    var children = props.children, className = props.className, overflowButton = props.overflowButton, _a = props.overflowPlacement, overflowPlacement = _a === void 0 ? 'end' : _a, _b = props.orientation, orientation = _b === void 0 ? 'horizontal' : _b, rest = __rest(props, ["children", "className", "overflowButton", "overflowPlacement", "orientation"]);
     var items = React.useMemo(function () { var _a; return (_a = React.Children.map(children, function (child) { return React.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     useTheme();
-    var _b = useOverflow(items, !overflowButton), overflowRef = _b[0], visibleCount = _b[1];
+    var _c = useOverflow(items, !overflowButton, orientation), overflowRef = _c[0], visibleCount = _c[1];
     var refs = useMergedRefs(overflowRef, ref);
-    return (React.createElement("div", __assign({ className: cx('iui-button-group', className), style: __assign(__assign({}, (!!overflowButton && { width: '100%' })), style), ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
+    return (React.createElement("div", __assign({ className: cx({
+            'iui-button-group': orientation === 'horizontal',
+            'iui-button-group-vertical': orientation === 'vertical',
+        }, className), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
         overflowButton && overflowPlacement === 'start' && (React.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
         overflowButton && overflowPlacement === 'end' && (React.createElement("div", null, overflowButton(visibleCount))))) : (items)));

package/esm/core/ComboBox/ComboBox.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { InputProps } from '../Input';
 import { SelectOption } from '../Select';
 import { PopoverProps, CommonProps, InputContainerProps } from '../utils';
@@ -12,6 +12,11 @@ export declare type ComboBoxProps<T> = {
      * Controlled value of ComboBox.
      */
     value?: T;
+    /**
+     * Message shown below the combobox.
+     * Use `StatusMessage` component.
+     */
+    message?: React.ReactNode;
     /**
      * Callback fired when selected value changes.
      */

package/esm/core/ComboBox/ComboBox.js

@@ -32,6 +32,7 @@ import { Text } from '../Typography';
 import { InputContainer, useTheme, Popover, getFocusableElements, getRandomValue, mergeRefs, } from '../utils';
 import SvgCaretDownSmall from '@itwin/itwinui-icons-react/cjs/icons/CaretDownSmall';
 import 'tippy.js/animations/shift-away.css';
+import { StatusMessage } from '../StatusMessage';
 /**
  * ComboBox component that allows typing a value to filter the options in dropdown list.
  * Values can be selected either using mouse clicks or using the Enter key.
@@ -46,7 +47,7 @@ import 'tippy.js/animations/shift-away.css';
  * />
  */
 export var ComboBox = function (props) {
-    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "emptyStateMessage", "itemRenderer"]);
+    var options = props.options, value = props.value, onChange = props.onChange, filterFunction = props.filterFunction, className = props.className, inputProps = props.inputProps, dropdownMenuProps = props.dropdownMenuProps, message = props.message, status = props.status, _a = props.emptyStateMessage, emptyStateMessage = _a === void 0 ? 'No options found' : _a, itemRenderer = props.itemRenderer, rest = __rest(props, ["options", "value", "onChange", "filterFunction", "className", "inputProps", "dropdownMenuProps", "message", "status", "emptyStateMessage", "itemRenderer"]);
     // Generate a stateful random id if not specified
     var id = React.useState(function () {
         var _a, _b;
@@ -268,7 +269,8 @@ export var ComboBox = function (props) {
         itemRenderer,
         memoizedItems,
     ]);
-    return (React.createElement(InputContainer, __assign({ className: className, isIconInline: true }, rest, { id: id }),
+    return (React.createElement(InputContainer, __assign({ className: className, status: status, statusMessage: typeof message === 'string' ? (React.createElement(StatusMessage, { status: status }, message)) : (React.isValidElement(message) &&
+            React.cloneElement(message, { status: status })) }, rest, { id: id }),
         React.createElement("div", { className: 'iui-input-with-icon' },
             React.createElement(Popover, __assign({ placement: 'bottom-start', visible: isOpen, onClickOutside: function (_, _a) {
                     var _b;