@itwin/itwinui-react 1.32.0 → 1.34.0

package/esm/core/Footer/Footer.d.ts

@@ -11,8 +11,10 @@ export declare type TitleTranslations = {
 export declare type FooterProps = {
     /**
      * Customize footer elements.
+     * Providing a `FooterElement[]` will append the custom elements to the end of the default elements.
+     * Providing a function that returns a `FooterElement[]` allows further customization - whatever is returned from the function is displayed in the footer with no amendments.
      */
-    customElements?: FooterElement[];
+    customElements?: FooterElement[] | ((defaultElements: FooterElement[]) => FooterElement[]);
     /**
      * Provide localized strings.
      */
@@ -27,13 +29,23 @@ export declare type FooterElement = {
      * URL of the footer element.
      */
     url?: string;
+    /**
+     * Key of the footer element.
+     */
+    key?: keyof TitleTranslations | 'copyright' | (string & Record<never, never>);
 };
 /**
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
  * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example
+ * @example <caption>Appending custom element after default elements</caption>
  * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
+ * @example <caption>Returning only custom elements</caption>
+ * <Footer customElements={() => newFooterElements)} />
+ * @example <caption>Filtering out a specific element</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
+ * @example <caption>Changing a url</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
 export declare const Footer: (props: FooterProps) => JSX.Element;
 export default Footer;

package/esm/core/Footer/Footer.js

@@ -48,39 +48,62 @@ var footerTranslations = {
  * Footer element with all needed legal and info links.
  * Be sure to place it manually at the bottom of your page.
  * You can use position 'absolute' with relative body or set the height of the content and place footer at the end.
- * @example
+ * @example <caption>Appending custom element after default elements</caption>
  * <Footer customElements={[{title: 'Bentley', url: 'https://www.bentley.com/'}]} />
+ * @example <caption>Returning only custom elements</caption>
+ * <Footer customElements={() => newFooterElements)} />
+ * @example <caption>Filtering out a specific element</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.filter(({ key }) => key !== 'privacy' )} />
+ * @example <caption>Changing a url</caption>
+ * <Footer customElements={(defaultElements) => defaultElements.map(element => ({ ...element, url: element.key === 'privacy' ? customPrivacyUrl : element.url }))} />
  */
 export var Footer = function (props) {
     var customElements = props.customElements, translatedTitles = props.translatedTitles, className = props.className, rest = __rest(props, ["customElements", "translatedTitles", "className"]);
     useTheme();
-    var today = new Date();
     var titles = __assign(__assign({}, footerTranslations), translatedTitles);
     var defaultElements = [
         {
+            key: 'copyright',
+            title: "\u00A9 " + new Date().getFullYear() + " Bentley Systems, Incorporated",
+        },
+        {
+            key: 'termsOfService',
             title: titles.termsOfService,
             url: 'https://connect-agreementportal.bentley.com/AgreementApp/Home/Eula/view/readonly/BentleyConnect',
         },
-        { title: titles.privacy, url: 'https://www.bentley.com/en/privacy-policy' },
         {
+            key: 'privacy',
+            title: titles.privacy,
+            url: 'https://www.bentley.com/en/privacy-policy',
+        },
+        {
+            key: 'termsOfUse',
             title: titles.termsOfUse,
             url: 'https://www.bentley.com/en/terms-of-use-and-select-online-agreement',
         },
-        { title: titles.cookies, url: 'https://www.bentley.com/en/cookie-policy' },
-        { title: titles.legalNotices, url: 'https://connect.bentley.com/Legal' },
+        {
+            key: 'cookies',
+            title: titles.cookies,
+            url: 'https://www.bentley.com/en/cookie-policy',
+        },
+        {
+            key: 'legalNotices',
+            title: titles.legalNotices,
+            url: 'https://connect.bentley.com/Legal',
+        },
     ];
-    var elements = customElements
-        ? __spreadArray(__spreadArray([], defaultElements, true), customElements, true) : defaultElements;
+    var elements = defaultElements;
+    if (customElements) {
+        elements =
+            typeof customElements === 'function'
+                ? customElements(defaultElements)
+                : __spreadArray(__spreadArray([], defaultElements, true), customElements, true);
+    }
     return (React.createElement("footer", __assign({ className: cx('iui-legal-footer', className) }, rest),
-        React.createElement("ul", null,
-            React.createElement("li", null,
-                "\u00A9 ",
-                today.getFullYear(),
-                " Bentley Systems, Incorporated"),
-            elements.map(function (element, index) {
-                return (React.createElement("li", { key: element.title + "-" + index },
-                    React.createElement("span", { className: 'iui-separator' }),
-                    element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
-            }))));
+        React.createElement("ul", null, elements.map(function (element, index) {
+            return (React.createElement("li", { key: element.key || element.title + "-" + index },
+                index > 0 && React.createElement("span", { className: 'iui-separator' }),
+                element.url ? (React.createElement("a", { href: element.url, target: '_blank', rel: 'noreferrer' }, element.title)) : (element.title)));
+        }))));
 };
 export default Footer;

package/esm/core/InputGroup/InputGroup.js

@@ -45,8 +45,18 @@ import '@itwin/itwinui-css/css/inputs.css';
 export var InputGroup = function (props) {
     var children = props.children, _a = props.disabled, disabled = _a === void 0 ? false : _a, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, className = props.className, style = props.style, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["children", "disabled", "displayStyle", "label", "message", "status", "svgIcon", "className", "style", "required"]);
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon ? React.cloneElement(icon, { 'aria-hidden': true }) : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
+    var icon = function () {
+        if (svgIcon) {
+            return React.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return React.cloneElement(StatusIconMap[status](), {
+                'aria-hidden': true,
+            });
+        }
+        return undefined;
+    };
+    return (React.createElement(InputContainer, __assign({ label: label, disabled: disabled, required: required, status: status, message: message, icon: icon(), isLabelInline: displayStyle === 'inline', className: className, style: style }, rest),
         React.createElement("div", { className: 'iui-input-group' }, children)));
 };
 export default InputGroup;

package/esm/core/LabeledSelect/LabeledSelect.js

@@ -64,10 +64,16 @@ import '@itwin/itwinui-css/css/inputs.css';
 export var LabeledSelect = function (props) {
     var className = props.className, _a = props.disabled, disabled = _a === void 0 ? false : _a, label = props.label, message = props.message, status = props.status, svgIcon = props.svgIcon, _b = props.displayStyle, displayStyle = _b === void 0 ? 'default' : _b, style = props.style, selectClassName = props.selectClassName, selectStyle = props.selectStyle, _c = props.required, required = _c === void 0 ? false : _c, rest = __rest(props, ["className", "disabled", "label", "message", "status", "svgIcon", "displayStyle", "style", "selectClassName", "selectStyle", "required"]);
     useTheme();
-    var icon = svgIcon !== null && svgIcon !== void 0 ? svgIcon : (status && StatusIconMap[status]());
-    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' && icon
-            ? React.cloneElement(icon, { 'aria-hidden': true })
-            : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
+    var icon = function () {
+        if (svgIcon) {
+            return React.cloneElement(svgIcon, { 'aria-hidden': true });
+        }
+        if (status && message) {
+            return StatusIconMap[status]();
+        }
+        return undefined;
+    };
+    return (React.createElement(InputContainer, { label: label, disabled: disabled, required: required, status: status, message: message, icon: displayStyle === 'default' ? icon() : undefined, isLabelInline: displayStyle === 'inline', className: className, style: style },
         React.createElement(Select, __assign({ disabled: disabled, className: selectClassName, style: selectStyle }, rest))));
 };
 export default LabeledSelect;

package/esm/core/Slider/Slider.js

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

package/esm/core/StatusMessage/StatusMessage.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare type StatusMessageProps = {
+    /**
+     * Custom icon to be displayed at the beginning.
+     * It will default to the `status` icon, if it's set.
+     */
+    startIcon?: JSX.Element;
+    /**
+     * Message content.
+     */
+    children: React.ReactNode;
+    /**
+     * Status of the message.
+     */
+    status?: 'positive' | 'warning' | 'negative';
+};
+/**
+ * Component to display icon and text below the `Combobox` component.
+ * @example
+ * <StatusMessage>This is the text</StatusMessage>
+ * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
+ */
+export declare const StatusMessage: ({ startIcon: userStartIcon, children, status, }: StatusMessageProps) => JSX.Element;
+export default StatusMessage;

package/esm/core/StatusMessage/StatusMessage.js

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import { StatusIconMap, useTheme } from '../utils';
+import cx from 'classnames';
+/**
+ * Component to display icon and text below the `Combobox` component.
+ * @example
+ * <StatusMessage>This is the text</StatusMessage>
+ * <StatusMessage startIcon={<SvgStar />}>This is the text</StatusMessage>
+ */
+export var StatusMessage = function (_a) {
+    var userStartIcon = _a.startIcon, children = _a.children, status = _a.status;
+    useTheme();
+    var StartIcon = function () {
+        var _a;
+        var icon = userStartIcon !== null && userStartIcon !== void 0 ? userStartIcon : (status && StatusIconMap[status]());
+        if (!icon) {
+            return null;
+        }
+        return React.cloneElement(icon, {
+            className: cx('iui-input-icon', (_a = icon.props) === null || _a === void 0 ? void 0 : _a.className),
+            'aria-hidden': true,
+        });
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StartIcon, null),
+        React.createElement("div", { className: 'iui-message' }, children)));
+};
+export default StatusMessage;

package/esm/core/StatusMessage/index.d.ts

@@ -0,0 +1,4 @@
+export { StatusMessage } from './StatusMessage';
+export type { StatusMessageProps } from './StatusMessage';
+declare const _default: "./StatusMessage";
+export default _default;

package/esm/core/StatusMessage/index.js

@@ -0,0 +1,6 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+export { StatusMessage } from './StatusMessage';
+export default './StatusMessage';

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

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

package/esm/core/Table/Table.js

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

package/esm/core/Table/TableRowMemoized.js

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

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

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

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

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

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

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

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

@@ -48,9 +48,9 @@ export var FilterToggle = function (props) {
         close();
     }, [close, column]);
     return (React.createElement(React.Fragment, null, column.canFilter && column.Filter && (React.createElement(Popover, { content: column.render('Filter', { close: close, setFilter: setFilter, clearFilter: clearFilter }), placement: 'bottom-start', visible: isVisible, onClickOutside: close, appendTo: ownerDocument === null || ownerDocument === void 0 ? void 0 : ownerDocument.body },
-        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: cx('iui-filter-button', className), onClick: function () {
+        React.createElement(IconButton, __assign({ styleType: 'borderless', isActive: isVisible || column.filterValue, className: cx('iui-filter-button', className), onClick: function (e) {
                 setIsVisible(function (v) { return !v; });
-            }, 
-            // Prevents from triggering sort
-            onMouseDown: function (e) { return e.stopPropagation(); } }, rest), column.filterValue ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
+                // Prevents from triggering sort
+                e.stopPropagation();
+            } }, rest), column.filterValue ? React.createElement(SvgFilter, null) : React.createElement(SvgFilterHollow, null))))));
 };

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

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

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

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

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

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

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

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

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

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

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

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

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

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