@itwin/itwinui-react 1.33.0 → 1.34.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+### [1.34.1](https://www.github.com/iTwin/iTwinUI-react/compare/v1.34.0...v1.34.1) (2022-03-24)
+
+### Fixes
+
+* **ComboBox:** Combine internal input onChange with `inputProps.onChange` ([#597](https://www.github.com/iTwin/iTwinUI-react/issues/597)) ([e033753](https://www.github.com/iTwin/iTwinUI-react/commit/e033753c81f3b9298df6eb198581c75344f96c00))
+
+## [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
+
+* **ButtonGroup:** Add vertical support to `overflowButton` ([#579](https://www.github.com/iTwin/iTwinUI-react/issues/579)) ([aad619b](https://www.github.com/iTwin/iTwinUI-react/commit/aad619b6dc7d65ffd79c8d33111489b1b8d27680))
+* **Slider:** Fixed to call onUpdate on rail click ([#587](https://www.github.com/iTwin/iTwinUI-react/issues/587)) ([e7cc679](https://www.github.com/iTwin/iTwinUI-react/commit/e7cc6796308928230f2d2c7c79b6ee35286595a7))
+* **Table:** Removed wrapper span from checkbox ([#583](https://www.github.com/iTwin/iTwinUI-react/issues/583)) ([996377b](https://www.github.com/iTwin/iTwinUI-react/commit/996377bf44cdacd9f42361f2199c2a83420ca15b))
+
 ## [1.33.0](https://www.github.com/iTwin/iTwinUI-react/compare/v1.32.0...v1.33.0) (2022-03-07)
 
 ### What's new

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

@@ -63,16 +63,15 @@ require("@itwin/itwinui-css/css/button.css");
  * </ButtonGroup>
  */
 exports.ButtonGroup = react_1.default.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_1.default.useMemo(function () { var _a; return (_a = react_1.default.Children.map(children, function (child) { return react_1.default.createElement("div", null, child); })) !== null && _a !== void 0 ? _a : []; }, [children]);
     (0, utils_1.useTheme)();
-    var _c = (0, utils_1.useOverflow)(items, !overflowButton), overflowRef = _c[0], visibleCount = _c[1];
+    var _c = (0, utils_1.useOverflow)(items, !overflowButton, orientation), overflowRef = _c[0], visibleCount = _c[1];
     var refs = (0, utils_1.useMergedRefs)(overflowRef, ref);
     return (react_1.default.createElement("div", __assign({ className: (0, classnames_1.default)({
             '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_1.default.createElement(react_1.default.Fragment, null,
+        }, className), "aria-orientation": orientation, ref: refs }, rest), !!overflowButton && visibleCount < items.length ? (react_1.default.createElement(react_1.default.Fragment, null,
         overflowButton && overflowPlacement === 'start' && (react_1.default.createElement("div", null, overflowButton(visibleCount))),
         items.slice(0, visibleCount - 1),
         overflowButton && overflowPlacement === 'end' && (react_1.default.createElement("div", null, overflowButton(visibleCount))))) : (items)));

package/cjs/core/ComboBox/ComboBox.js

@@ -300,9 +300,9 @@ 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_1.default.createElement(Input_1.Input, __assign({ ref: inputRef, onKeyDown: onKeyDown, onFocus: function () { return setIsOpen(true); }, onChange: onInput, value: inputValue, "aria-activedescendant": isOpen && focusedIndex > -1
+                react_1.default.createElement(Input_1.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_1.default.createElement("span", { ref: toggleButtonRef, className: (0, classnames_1.default)('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/cjs/core/Slider/Slider.js

@@ -208,11 +208,20 @@ exports.Slider = react_1.default.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,
+    ]);
     (0, utils_1.useEventListener)('pointermove', handlePointerMove, (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument);
     (0, utils_1.useEventListener)('pointerup', handlePointerUp, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.ownerDocument);
     var tickMarkArea = react_1.default.useMemo(function () {

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); });
@@ -55,8 +56,7 @@ var useSelectionCell = function (isSelectable, isRowDisabled) { return function
             },
             Cell: function (_a) {
                 var row = _a.row;
-                return (react_1.default.createElement("span", { onClick: function (e) { return e.stopPropagation(); } },
-                    react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original) }))));
+                return (react_1.default.createElement(Checkbox_1.Checkbox, __assign({}, row.getToggleRowSelectedProps(), { disabled: isRowDisabled === null || isRowDisabled === void 0 ? void 0 : isRowDisabled(row.original), onClick: function (e) { return e.stopPropagation(); } })));
             },
         }
     ], columns, true); });

package/cjs/core/ToggleSwitch/ToggleSwitch.js

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

package/cjs/core/UserIcon/UserIcon.js

@@ -30,9 +30,6 @@ exports.UserIcon = exports.defaultStatusTitles = void 0;
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-var Away_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Away"));
-var Checkmark_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/Checkmark"));
-var CloseSmall_1 = __importDefault(require("@itwin/itwinui-icons-react/cjs/icons/CloseSmall"));
 var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importDefault(require("react"));
 var utils_1 = require("../utils");
@@ -63,17 +60,11 @@ var UserIcon = function (props) {
     var _c = props.size, size = _c === void 0 ? 'small' : _c, status = props.status, abbreviation = props.abbreviation, image = props.image, _d = props.backgroundColor, backgroundColor = _d === void 0 ? 'white' : _d, title = props.title, translatedStatusTitles = props.translatedStatusTitles, className = props.className, style = props.style, rest = __rest(props, ["size", "status", "abbreviation", "image", "backgroundColor", "title", "translatedStatusTitles", "className", "style"]);
     (0, utils_1.useTheme)();
     var statusTitles = __assign(__assign({}, exports.defaultStatusTitles), translatedStatusTitles);
-    var iconMap = {
-        away: react_1.default.createElement(Away_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
-        offline: react_1.default.createElement(CloseSmall_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
-        online: react_1.default.createElement(Checkmark_1.default, { className: 'iui-status-symbol', "aria-hidden": true }),
-        busy: react_1.default.createElement(react_1.default.Fragment, null),
-    };
     return (react_1.default.createElement("span", __assign({ className: (0, classnames_1.default)('iui-user-icon', (_a = {}, _a["iui-" + size] = size !== 'medium', _a), className), title: title, style: style }, rest), image !== null && image !== void 0 ? image : (react_1.default.createElement("abbr", { className: 'iui-initials', style: { backgroundColor: backgroundColor } }, abbreviation === null || abbreviation === void 0 ? void 0 : abbreviation.substring(0, 2))),
         react_1.default.createElement("span", { className: 'iui-stroke' }),
         status && (react_1.default.createElement("span", { title: statusTitles[status], className: (0, classnames_1.default)('iui-status', (_b = {},
                 _b["iui-" + status] = !!status,
-                _b)), "aria-label": statusTitles[status] }, iconMap[status]))));
+                _b)), "aria-label": statusTitles[status] }))));
 };
 exports.UserIcon = UserIcon;
 exports.default = exports.UserIcon;

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

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

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

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

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

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