@itwin/itwinui-react 1.33.1 → 1.34.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [1.34.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.33.1...v1.34.0) (2022-03-22)
+
+### What's new
+
+* **Table:** support for draggable columns ([#561](https://www.github.com/iTwin/iTwinUI-react/issues/561)) ([0e741f5](https://www.github.com/iTwin/iTwinUI-react/commit/0e741f5c0838996a5f45c57abedf41daeef652d4))
+
+### Fixes
+
+* **ToggleSwitch:** updated toggle switch styles through css package ([#592](https://www.github.com/iTwin/iTwinUI-react/issues/592)) ([3a0be35](https://www.github.com/iTwin/iTwinUI-react/commit/3a0be355d4363fe7d704c3fd6f975c509c65da2b))
+* **UserIcon:** busy status now also shows an icon
+
 ### [1.33.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.33.0...v1.33.1) (2022-03-18)
 
 ### Fixes

package/cjs/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/cjs/core/Table/Table.js

@@ -94,9 +94,9 @@ var tableResizeEndAction = 'tableResizeEnd';
  */
 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"]);
     (0, utils_1.useTheme)();
-    var _o = react_1.default.useState(), ownerDocument = _o[0], setOwnerDocument = _o[1];
+    var _p = react_1.default.useState(), ownerDocument = _p[0], setOwnerDocument = _p[1];
     var defaultColumn = react_1.default.useMemo(function () { return ({
         maxWidth: 0,
         minWidth: 0,
@@ -152,7 +152,7 @@ var Table = function (props) {
             return getSubRows ? getSubRows(item, index) : item.subRows;
         });
     }, [data, getSubRows]);
-    var instance = (0, react_table_1.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) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, isRowDisabled));
+    var instance = (0, react_table_1.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) }), react_table_1.useFlexLayout, (0, hooks_1.useResizeColumns)(ownerDocument), react_table_1.useFilters, (0, hooks_1.useSubRowFiltering)(hasAnySubRows), react_table_1.useSortBy, react_table_1.useExpanded, react_table_1.usePagination, react_table_1.useRowSelect, hooks_1.useSubRowSelection, (0, hooks_1.useExpanderCell)(subComponent, expanderCell, isRowDisabled), (0, hooks_1.useSelectionCell)(isSelectable, isRowDisabled), react_table_1.useColumnOrder, (0, hooks_1.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];
@@ -266,21 +266,21 @@ var Table = function (props) {
                     className: 'iui-row',
                 });
                 return (react_1.default.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: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)) }));
-                    return (react_1.default.createElement("div", __assign({}, columnProps, { key: columnProps.key, title: undefined, ref: function (el) {
+                    var columnProps = column.getHeaderProps(__assign(__assign({}, column.getSortByToggleProps()), { className: (0, classnames_1.default)('iui-cell', { 'iui-actionable': column.canSort }, { 'iui-sorted': column.isSorted }, column.columnClassName), style: __assign({}, (0, utils_2.getCellStyle)(column, !!state.isTableResizing)) }));
+                    return (react_1.default.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_1.default.createElement(filters_1.FilterToggle, { column: column, ownerDocument: ownerDocument })),
                         !isLoading && data.length != 0 && column.canSort && (react_1.default.createElement("div", { className: 'iui-cell-end-icon' }, column.isSorted && column.isSortedDesc ? (react_1.default.createElement(SortUp_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (react_1.default.createElement(SortDown_1.default, { className: 'iui-icon iui-sort', "aria-hidden": true })))),
                         isResizable &&
                             column.isResizerVisible &&
                             index !== headerGroup.headers.length - 1 && (react_1.default.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
-                            react_1.default.createElement("div", { className: 'iui-resizer-bar' })))));
+                            react_1.default.createElement("div", { className: 'iui-resizer-bar' }))),
+                        enableColumnReordering && !column.disableReordering && (react_1.default.createElement("div", { className: 'iui-reorder-bar' }))));
                 })));
             })),
             react_1.default.createElement("div", __assign({}, getTableBodyProps({

package/cjs/core/Table/TableRowMemoized.js

@@ -92,6 +92,7 @@ exports.TableRowMemoized = react_1.default.memo(exports.TableRow, function (prev
         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/cjs/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/cjs/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/cjs/core/Table/filters/BaseFilter.js

@@ -31,7 +31,7 @@ var BaseFilter = function (props) {
     (0, utils_1.useTheme)();
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)('iui-column-filter', className), style: style, 
         // Prevents from triggering sort
-        onMouseDown: function (e) {
+        onClick: function (e) {
             e.stopPropagation();
         }, id: id }, children));
 };

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

@@ -54,10 +54,10 @@ var FilterToggle = function (props) {
         close();
     }, [close, column]);
     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 },
-        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('iui-filter-button', className), onClick: function () {
+        react_1.default.createElement(Buttons_1.IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: (0, classnames_1.default)('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_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
+                // Prevents from triggering sort
+                e.stopPropagation();
+            } }, rest), column.filterValue ? react_1.default.createElement(Filter_1.default, null) : react_1.default.createElement(FilterHollow_1.default, null))))));
 };
 exports.FilterToggle = FilterToggle;

package/cjs/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/cjs/core/Table/hooks/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.SELECTION_CELL_ID = exports.useExpanderCell = exports.EXPANDER_CELL_ID = void 0;
+exports.useColumnDragAndDrop = exports.useResizeColumns = exports.useSubRowSelection = exports.useSubRowFiltering = exports.useSelectionCell = exports.SELECTION_CELL_ID = exports.useExpanderCell = exports.EXPANDER_CELL_ID = void 0;
 /*---------------------------------------------------------------------------------------------
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
@@ -17,3 +17,5 @@ var useSubRowSelection_1 = require("./useSubRowSelection");
 Object.defineProperty(exports, "useSubRowSelection", { enumerable: true, get: function () { return useSubRowSelection_1.useSubRowSelection; } });
 var useResizeColumns_1 = require("./useResizeColumns");
 Object.defineProperty(exports, "useResizeColumns", { enumerable: true, get: function () { return useResizeColumns_1.useResizeColumns; } });
+var useColumnDragAndDrop_1 = require("./useColumnDragAndDrop");
+Object.defineProperty(exports, "useColumnDragAndDrop", { enumerable: true, get: function () { return useColumnDragAndDrop_1.useColumnDragAndDrop; } });

package/cjs/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/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); });

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/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/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); });

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "1.33.1",
+  "version": "1.34.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -40,7 +40,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^0.50.1",
+    "@itwin/itwinui-css": "^0.52.0",
     "@itwin/itwinui-icons-react": "^1.5.0",
     "@itwin/itwinui-illustrations-react": "^1.0.1",
     "@tippyjs/react": "^4.2.5",