@itwin/itwinui-react 1.33.0 → 1.34.1

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

@@ -13,8 +13,6 @@ export declare type ButtonGroupProps = {
      * and returns the `ReactNode` to render.
      *
      * The placement of this button can be controlled using the `overflowPlacement` prop.
-     *
-     * *Note: this will not work with `orientation='vertical'`.*
      */
     overflowButton?: (firstOverflowingIndex: number) => React.ReactNode;
     /**

package/esm/core/ButtonGroup/ButtonGroup.js

@@ -57,16 +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, _b = props.orientation, orientation = _b === void 0 ? 'horizontal' : _b, rest = __rest(props, ["children", "className", "style", "overflowButton", "overflowPlacement", "orientation"]);
+    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 _c = useOverflow(items, !overflowButton), overflowRef = _c[0], visibleCount = _c[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': orientation === 'horizontal',
             'iui-button-group-vertical': orientation === 'vertical',
-        }, className), style: __assign(__assign({}, (!!overflowButton &&
-            orientation === 'horizontal' && { width: '100%' })), style), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (React.createElement(React.Fragment, null,
+        }, 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.js

@@ -294,9 +294,9 @@ export var ComboBox = function (props) {
                     }
                     (_a = dropdownMenuProps === null || dropdownMenuProps === void 0 ? void 0 : dropdownMenuProps.onHide) === null || _a === void 0 ? void 0 : _a.call(dropdownMenuProps, instance);
                 } }),
-                React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
+                React.createElement(Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
                         ? getOptionId(focusedIndex)
-                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps))),
+                        : undefined, role: 'combobox', "aria-controls": isOpen ? id + "-list" : undefined, "aria-autocomplete": 'list', spellCheck: false, autoCapitalize: 'none', autoCorrect: 'off' }, inputProps, { onChange: onInput }))),
             React.createElement("span", { ref: toggleButtonRef, className: cx('iui-end-icon', {
                     'iui-actionable': !(inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled),
                     'iui-disabled': inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled,

package/esm/core/Slider/Slider.js

@@ -202,11 +202,20 @@ export var Slider = React.forwardRef(function (props, ref) {
             newValues[closestValueIndex] = pointerValue;
             setCurrentValues(newValues);
             onChange === null || onChange === void 0 ? void 0 : onChange(newValues);
+            onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(newValues);
             focusThumb(containerRef.current, closestValueIndex);
             event.preventDefault();
             event.stopPropagation();
         }
-    }, [min, max, step, currentValues, getAllowableThumbRange, onChange]);
+    }, [
+        min,
+        max,
+        step,
+        currentValues,
+        getAllowableThumbRange,
+        onChange,
+        onUpdate,
+    ]);
     useEventListener('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     useEventListener('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var tickMarkArea = React.useMemo(function () {

package/esm/core/Table/Table.d.ts

@@ -170,6 +170,11 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      * @beta
      */
     enableVirtualization?: boolean;
+    /**
+     * Flag whether columns can be reordered.
+     * @default false
+     */
+    enableColumnReordering?: boolean;
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).

package/esm/core/Table/Table.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, } from 'react-table';
+import { actions as TableActions, useFlexLayout, useFilters, useRowSelect, useSortBy, useTable, useExpanded, usePagination, useColumnOrder, } from 'react-table';
 import { ProgressRadial } from '../ProgressIndicators';
 import { useTheme, useResizeObserver } from '../utils';
 import '@itwin/itwinui-css/css/table.css';
@@ -36,7 +36,7 @@ import { getCellStyle } from './utils';
 import { TableRowMemoized } from './TableRowMemoized';
 import { FilterToggle } from './filters';
 import { customFilterFunctions } from './filters/customFilterFunctions';
-import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, } from './hooks';
+import { useExpanderCell, useSelectionCell, useSubRowFiltering, useSubRowSelection, useResizeColumns, useColumnDragAndDrop, } from './hooks';
 import { onExpandHandler, onFilterHandler, onSelectHandler, } from './actionHandlers';
 import { onSingleSelectHandler } from './actionHandlers/selectHandler';
 import { onTableResizeEnd, onTableResizeStart, } from './actionHandlers/resizeHandler';
@@ -88,9 +88,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 export var Table = function (props) {
     var _a;
-    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization"]);
+    var data = props.data, columns = props.columns, _b = props.isLoading, isLoading = _b === void 0 ? false : _b, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _c = props.isSelectable, isSelectable = _c === void 0 ? false : _c, onSelect = props.onSelect, onRowClick = props.onRowClick, _d = props.isSortable, isSortable = _d === void 0 ? false : _d, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _e = props.intersectionMargin, intersectionMargin = _e === void 0 ? 300 : _e, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _f = props.density, density = _f === void 0 ? 'default' : _f, _g = props.selectSubRows, selectSubRows = _g === void 0 ? true : _g, getSubRows = props.getSubRows, _h = props.selectRowOnClick, selectRowOnClick = _h === void 0 ? true : _h, paginatorRenderer = props.paginatorRenderer, _j = props.pageSize, pageSize = _j === void 0 ? 25 : _j, _k = props.isResizable, isResizable = _k === void 0 ? false : _k, _l = props.styleType, styleType = _l === void 0 ? 'default' : _l, _m = props.enableVirtualization, enableVirtualization = _m === void 0 ? false : _m, _o = props.enableColumnReordering, enableColumnReordering = _o === void 0 ? false : _o, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "styleType", "enableVirtualization", "enableColumnReordering"]);
     useTheme();
-    var _o = React.useState(), ownerDocument = _o[0], setOwnerDocument = _o[1];
+    var _p = React.useState(), ownerDocument = _p[0], setOwnerDocument = _p[1];
     var defaultColumn = React.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -146,7 +146,7 @@ export var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, isRowDisabled));
+    var instance = useTable(__assign(__assign({ manualPagination: !paginatorRenderer, paginateExpandedRows: false }, props), { columns: columns, defaultColumn: defaultColumn, disableSortBy: !isSortable, stateReducer: tableStateReducer, filterTypes: filterTypes, selectSubRows: selectSubRows, data: data, getSubRows: getSubRows, initialState: __assign({ pageSize: pageSize }, props.initialState) }), useFlexLayout, useResizeColumns(ownerDocument), useFilters, useSubRowFiltering(hasAnySubRows), useSortBy, useExpanded, usePagination, useRowSelect, useSubRowSelection, useExpanderCell(subComponent, expanderCell, isRowDisabled), useSelectionCell(isSelectable, isRowDisabled), useColumnOrder, useColumnDragAndDrop(enableColumnReordering));
     var getTableProps = instance.getTableProps, rows = instance.rows, headerGroups = instance.headerGroups, getTableBodyProps = instance.getTableBodyProps, prepareRow = instance.prepareRow, state = instance.state, allColumns = instance.allColumns, filteredFlatRows = instance.filteredFlatRows, dispatch = instance.dispatch, page = instance.page, gotoPage = instance.gotoPage, setPageSize = instance.setPageSize, flatHeaders = instance.flatHeaders;
     var ariaDataAttributes = Object.entries(rest).reduce(function (result, _a) {
         var key = _a[0], value = _a[1];
@@ -260,21 +260,21 @@ export var Table = function (props) {
                     className: 'iui-row',
                 });
                 return (React.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
-                    var _a = column.getSortByToggleProps(), onSortClick = _a.onClick, sortByProps = __rest(_a, ["onClick"]);
-                    var columnProps = column.getHeaderProps(__assign(__assign({}, sortByProps), { className: cx('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, getCellStyle(column, !!state.isTableResizing)) }));
-                    return (React.createElement("div", __assign({}, columnProps, { key: columnProps.key, title: undefined, ref: function (el) {
+                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: cx('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, getCellStyle(column, !!state.isTableResizing)) }));
+                    return (React.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
                             if (el && isResizable) {
                                 columnRefs.current[column.id] = el;
                                 column.resizeWidth = el.getBoundingClientRect().width;
                             }
-                        }, onMouseDown: onSortClick }),
+                        } }),
                         column.render('Header'),
                         !isLoading && (data.length != 0 || areFiltersSet) && (React.createElement(FilterToggle, { column: column, ownerDocument: ownerDocument })),
                         !isLoading && data.length != 0 && column.canSort && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
-                            React.createElement("div", { className: 'iui-resizer-bar' })))));
+                            React.createElement("div", { className: 'iui-resizer-bar' }))),
+                        enableColumnReordering && !column.disableReordering && (React.createElement("div", { className: 'iui-reorder-bar' }))));
                 })));
             })),
             React.createElement("div", __assign({}, getTableBodyProps({

package/esm/core/Table/TableRowMemoized.js

@@ -85,6 +85,7 @@ export var TableRowMemoized = React.memo(TableRow, function (prevProp, nextProp)
         prevProp.rowProps === nextProp.rowProps &&
         prevProp.expanderCell === nextProp.expanderCell &&
         prevProp.tableHasSubRows === nextProp.tableHasSubRows &&
+        prevProp.state.columnOrder === nextProp.state.columnOrder &&
         !nextProp.state.columnResizing.isResizingColumn &&
         !nextProp.state.isTableResizing;
 });

package/esm/core/Table/actionHandlers/resizeHandler.d.ts

@@ -11,6 +11,7 @@ export declare const onTableResizeStart: <T extends Record<string, unknown>>(sta
         columnWidths: Record<string, number>;
         isResizingColumn?: string | undefined;
     };
+    columnReorderStartIndex: number;
     columnOrder: import("react-table").IdType<T>[];
     expanded: Record<import("react-table").IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;
@@ -36,6 +37,7 @@ export declare const onTableResizeEnd: <T extends Record<string, unknown>>(state
         isResizingColumn?: string | undefined;
     };
     hiddenColumns?: import("react-table").IdType<T>[] | undefined;
+    columnReorderStartIndex: number;
     columnOrder: import("react-table").IdType<T>[];
     expanded: Record<import("react-table").IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;

package/esm/core/Table/actionHandlers/selectHandler.d.ts

@@ -19,6 +19,7 @@ export declare const onSingleSelectHandler: <T extends Record<string, unknown>>(
         isResizingColumn?: string | undefined;
     };
     isTableResizing?: boolean | undefined;
+    columnReorderStartIndex: number;
     columnOrder: import("react-table").IdType<T>[];
     expanded: Record<import("react-table").IdType<T>, boolean>;
     filters: import("react-table").Filters<T>;

package/esm/core/Table/filters/BaseFilter.js

@@ -25,7 +25,7 @@ export var BaseFilter = function (props) {
     useTheme();
     return (React.createElement("div", { className: cx('iui-column-filter', className), style: style, 
         // Prevents from triggering sort
-        onMouseDown: function (e) {
+        onClick: function (e) {
             e.stopPropagation();
         }, id: id }, children));
 };

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

@@ -48,9 +48,9 @@ export var FilterToggle = function (props) {
         close();
     }, [close, column]);
     return (React.createElement(React.Fragment, null, column.canFilter && column.Filter && (React.createElement(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 },
-        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: cx('iui-filter-button', className), onClick: function () {
+        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: cx('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
-            }, 
-            // Prevents from triggering sort
-            onMouseDown: function (e) { return e.stopPropagation(); } }, rest), column.filterValue ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
+                // Prevents from triggering sort
+                e.stopPropagation();
+            } }, rest), column.filterValue ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
 };

package/esm/core/Table/hooks/index.d.ts

@@ -3,3 +3,4 @@ export { SELECTION_CELL_ID, useSelectionCell } from './useSelectionCell';
 export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';
+export { useColumnDragAndDrop } from './useColumnDragAndDrop';

package/esm/core/Table/hooks/index.js

@@ -7,3 +7,4 @@ export { SELECTION_CELL_ID, useSelectionCell } from './useSelectionCell';
 export { useSubRowFiltering } from './useSubRowFiltering';
 export { useSubRowSelection } from './useSubRowSelection';
 export { useResizeColumns } from './useResizeColumns';
+export { useColumnDragAndDrop } from './useColumnDragAndDrop';

package/esm/core/Table/hooks/useColumnDragAndDrop.d.ts

@@ -0,0 +1,2 @@
+import { Hooks } from 'react-table';
+export declare const useColumnDragAndDrop: <T extends Record<string, unknown>>(isEnabled: boolean) => (hooks: Hooks<T>) => void;

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

@@ -0,0 +1,116 @@
+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));
+};
+import { actions, makePropGetter, useGetLatest, } from 'react-table';
+var REORDER_ACTIONS = {
+    columnDragStart: 'columnDragStart',
+    columnDragEnd: 'columnDragEnd',
+};
+export var useColumnDragAndDrop = function (isEnabled) { return function (hooks) {
+    hooks.getDragAndDropProps = [defaultGetDragAndDropProps(isEnabled)];
+    hooks.stateReducers.push(reducer);
+    hooks.useInstance.push(useInstance);
+}; };
+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 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 = useGetLatest(instance);
+    flatHeaders.forEach(function (header) {
+        header.getDragAndDropProps = makePropGetter(getHooks().getDragAndDropProps, {
+            instance: getInstance(),
+            header: header,
+        });
+    });
+};

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

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

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

@@ -108,16 +108,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/esm/core/Table/hooks/useSelectionCell.js

@@ -39,6 +39,7 @@ export var useSelectionCell = function (isSelectable, isRowDisabled) { return fu
             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); });
@@ -49,8 +50,7 @@ export var useSelectionCell = function (isSelectable, isRowDisabled) { return fu
             },
             Cell: function (_a) {
                 var row = _a.row;
-                return (React.createElement("span", { onClick: function (e) { return e.stopPropagation(); } },
-                    React.createElement(Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original) }))));
+                return (React.createElement(Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
             },
         }
     ], columns, true); });

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -51,20 +51,23 @@ export var ToggleSwitch = React.forwardRef(function (props, ref) {
     useTheme();
     var inputElementRef = React.useRef(null);
     var refs = useMergedRefs(inputElementRef, ref);
+    var WrapperComponent = label ? 'label' : 'div';
     React.useEffect(function () {
         if (inputElementRef.current && setFocus) {
             inputElementRef.current.focus();
         }
     }, [setFocus]);
-    return (React.createElement("label", { className: cx('iui-toggle-switch', { 'iui-disabled': disabled }, className), style: style },
-        React.createElement("input", __assign({ type: 'checkbox', disabled: disabled, ref: refs }, rest)),
-        labelPosition === 'left' && label && (React.createElement("span", { className: 'iui-label' }, label)),
-        React.createElement("span", { className: 'iui-toggle' },
-            icon &&
-                React.cloneElement(icon, {
-                    className: cx('iui-icon', icon.props.className),
-                }),
-            React.createElement("span", { className: 'iui-handle' })),
-        labelPosition === 'right' && label && (React.createElement("span", { className: 'iui-label' }, label))));
+    return (React.createElement(WrapperComponent, { className: cx('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.createElement("input", __assign({ className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs }, rest)),
+        icon &&
+            React.cloneElement(icon, {
+                className: cx('iui-toggle-switch-icon', icon.props.className),
+                'aria-hidden': true,
+            }),
+        label && React.createElement("span", { className: 'iui-toggle-switch-label' }, label)));
 });
 export default ToggleSwitch;

package/esm/core/UserIcon/UserIcon.js

@@ -24,9 +24,6 @@ var __rest = (this && this.__rest) || function (s, e) {
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import SvgAway from '@itwin/itwinui-icons-react/cjs/icons/Away';
-import SvgCheckmark from '@itwin/itwinui-icons-react/cjs/icons/Checkmark';
-import SvgCloseSmall from '@itwin/itwinui-icons-react/cjs/icons/CloseSmall';
 import cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
@@ -57,16 +54,10 @@ export 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"]);
     useTheme();
     var statusTitles = __assign(__assign({}, defaultStatusTitles), translatedStatusTitles);
-    var iconMap = {
-        away: React.createElement(SvgAway, { className: 'iui-status-symbol', "aria-hidden": true }),
-        offline: React.createElement(SvgCloseSmall, { className: 'iui-status-symbol', "aria-hidden": true }),
-        online: React.createElement(SvgCheckmark, { className: 'iui-status-symbol', "aria-hidden": true }),
-        busy: React.createElement(React.Fragment, null),
-    };
     return (React.createElement("span", __assign({ className: cx('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (React.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         React.createElement("span", { className: 'iui-stroke' }),
         status && (React.createElement("span", { title: statusTitles[status], className: cx('iui-status', (_b = {},
                 _b["iui-" + status] = !!status,
-                _b)), "aria-label": statusTitles[status] }, iconMap[status]))));
+                _b)), "aria-label": statusTitles[status] }))));
 };
 export default UserIcon;

package/esm/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;