@itwin/itwinui-react 1.48.0 → 2.0.0-dev.0

package/esm/core/Stepper/Stepper.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/stepper.css';
+export declare type StepperLocalization = {
+    stepsCountLabel: (currentStep: number, totalSteps: number) => string;
+};
+export declare type StepProperties = {
+    /**
+     * The title/label of the step.
+     */
+    name: string;
+    /**
+     * A tooltip giving detailed description to this step.
+     */
+    description?: string;
+};
+export declare type StepperProps = {
+    /**
+     * Current step index, 0 - based.
+     */
+    currentStep?: number;
+    /**
+     * An array of step objects.
+     */
+    steps: StepProperties[];
+    /**
+     *  The type of Stepper to display.
+     *  @default 'default'
+     */
+    type?: 'default' | 'long';
+    /**
+     *  Option to provide localized strings.
+     */
+    localization?: StepperLocalization;
+    /**
+     *  Click handler on completed step.
+     */
+    onStepClick?: (clickedIndex: number) => void;
+};
+export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLDivElement>>;
+export default Stepper;

package/esm/core/{Wizard/Wizard.js → Stepper/Stepper.js}

@@ -24,40 +24,23 @@ 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 cx from 'classnames';
 import React from 'react';
 import { useTheme } from '../utils';
-import '@itwin/itwinui-css/css/wizard.css';
-import { Step } from './Step';
-var defaultWizardLocalization = {
+import '@itwin/itwinui-css/css/stepper.css';
+import { StepperStep } from './StepperStep';
+var defaultStepperLocalization = {
     stepsCountLabel: function (currentStep, totalSteps) {
         return "Step ".concat(currentStep, " of ").concat(totalSteps, ":");
     },
 };
-/**
- * A wizard displays progress through a sequence of logical and numbered steps.
- * It may also be used for navigation.
- *
- * The `type` can be set to 'long' to show labels under steps.
- *
- * @example
- * <Wizard
- *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
- *  currentStep={0}
- *  type='long'
- *  />
- */
-export var Wizard = React.forwardRef(function (props, ref) {
-    var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, _b = props.localization, localization = _b === void 0 ? defaultWizardLocalization : _b, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
+export var Stepper = React.forwardRef(function (props, ref) {
+    var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, _b = props.localization, localization = _b === void 0 ? defaultStepperLocalization : _b, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
     var boundedCurrentStep = Math.min(Math.max(0, currentStep !== null && currentStep !== void 0 ? currentStep : 0), steps.length - 1);
     useTheme();
-    return (React.createElement("div", __assign({ className: cx('iui-wizard', {
-            'iui-long': type === 'long',
-            'iui-workflow': type === 'workflow',
-        }), ref: ref }, rest),
-        React.createElement("ol", null, steps.map(function (s, index) { return (React.createElement(Step, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })); })),
-        type === 'long' && (React.createElement("div", { className: 'iui-wizard-steps-label' },
-            React.createElement("span", { className: 'iui-steps-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
+    return (React.createElement("div", __assign({ className: 'iui-stepper', ref: ref }, rest),
+        React.createElement("ol", null, steps.map(function (s, index) { return (React.createElement(StepperStep, { key: index, index: index, title: type === 'long' ? '' : s.name, currentStepNumber: boundedCurrentStep, totalSteps: steps.length, type: type, onClick: onStepClick, description: s.description })); })),
+        type === 'long' && (React.createElement("div", { className: 'iui-stepper-steps-label' },
+            React.createElement("span", { className: 'iui-stepper-steps-label-count' }, localization.stepsCountLabel(boundedCurrentStep + 1, steps.length)),
             steps[boundedCurrentStep].name))));
 });
-export default Wizard;
+export default Stepper;

package/esm/core/{Wizard/Step.d.ts → Stepper/StepperStep.d.ts}

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { StylingProps } from '../utils';
-import { WizardType } from './Wizard';
-export declare type StepProps = {
+export declare type StepperStepProps = {
     /**
      * The title/label of the step.
      */
@@ -11,17 +10,17 @@ export declare type StepProps = {
      */
     index: number;
     /**
-     * the Wizard's current step number, 0-based.
+     * the Stepper's current step number, 0-based.
      */
     currentStepNumber: number;
     /**
-     * number of total steps in the wizard.
+     * number of total steps in the stepper.
      */
     totalSteps: number;
     /**
-     * Wizard type.
+     * Stepper type.
      */
-    type: WizardType;
+    type: 'default' | 'long';
     /**
      *  Click handler on completed step.
      */
@@ -31,4 +30,4 @@ export declare type StepProps = {
      */
     description?: string;
 } & StylingProps;
-export declare const Step: (props: StepProps) => JSX.Element;
+export declare const StepperStep: (props: StepperStepProps) => JSX.Element;

package/esm/core/{Wizard/Step.js → Stepper/StepperStep.js}

@@ -27,11 +27,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import cx from 'classnames';
 import React from 'react';
 import { Tooltip } from '../Tooltip';
-export var Step = function (props) {
+export var StepperStep = function (props) {
     var title = props.title, index = props.index, currentStepNumber = props.currentStepNumber, totalSteps = props.totalSteps, type = props.type, onClick = props.onClick, description = props.description, className = props.className, style = props.style, rest = __rest(props, ["title", "index", "currentStepNumber", "totalSteps", "type", "onClick", "description", "className", "style"]);
-    var isPast = type !== 'workflow' && currentStepNumber > index;
-    var isActive = type !== 'workflow' && currentStepNumber === index;
-    var isClickable = type !== 'workflow' && isPast && !!onClick;
+    var isPast = currentStepNumber > index;
+    var isActive = currentStepNumber === index;
+    var isClickable = isPast && !!onClick;
     var onCompletedClick = function () {
         if (isClickable) {
             onClick === null || onClick === void 0 ? void 0 : onClick(index);
@@ -45,12 +45,12 @@ export var Step = function (props) {
             onCompletedClick();
         }
     };
-    var stepShape = (React.createElement("li", __assign({ className: cx('iui-wizard-step', {
+    var stepShape = (React.createElement("li", __assign({ className: cx('iui-stepper-step', {
             'iui-current': isActive,
             'iui-clickable': isClickable,
         }, className), style: __assign({ width: type === 'default' ? "".concat(100 / totalSteps, "%") : undefined }, style), onClick: onCompletedClick, onKeyDown: onKeyDown, "aria-current": isActive ? 'step' : undefined, tabIndex: isClickable ? 0 : undefined }, rest),
-        React.createElement("div", { className: 'iui-wizard-track-content' },
-            React.createElement("span", { className: 'iui-wizard-circle' }, type === 'workflow' ? title : index + 1)),
-        type === 'default' && (React.createElement("span", { className: 'iui-wizard-step-name' }, title))));
+        React.createElement("div", { className: 'iui-stepper-track-content' },
+            React.createElement("span", { className: 'iui-stepper-circle' }, index + 1)),
+        type === 'default' && (React.createElement("span", { className: 'iui-stepper-step-name' }, title))));
     return description ? (React.createElement(Tooltip, { content: description }, stepShape)) : (stepShape);
 };

package/esm/core/Stepper/Wizard.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StepperProps, StepperLocalization } from './Stepper';
+/**
+ * @deprecated Since v2:
+ *
+ * - For `default` | `long`, use `StepperType` with `Stepper` instead
+ * - For `workflow`, use `WorkflowDiagram` instead
+ */
+export declare type WizardType = 'default' | 'long' | 'workflow';
+/**
+ * @deprecated Since v2, use `StepperLocalization` with `Stepper`
+ */
+export declare type WizardLocalization = StepperLocalization;
+/**
+ * @deprecated Since v2, use `StepperProps` with `Stepper` or `WorkflowDiagramProps` with `WorkflowDiagram`
+ */
+export declare type WizardProps = {
+    /**
+     *  The type of Wizard to display.
+     *  @default 'default'
+     */
+    type?: WizardType;
+} & Omit<StepperProps, 'type'>;
+/**
+ * @deprecated Since v2, use `Stepper` (type = `default` | `long`) or WorkflowDiagram (type = `workflow`)
+ *
+ * A wizard displays progress through a sequence of logical and numbered steps.
+ * It may also be used for navigation.
+ *
+ * The `type` can be set to 'long' to show labels under steps.
+ *
+ * @example
+ * <Wizard
+ *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
+ *  currentStep={0}
+ *  type='long'
+ *  />
+ */
+export declare const Wizard: React.ForwardRefExoticComponent<{
+    /**
+     *  The type of Wizard to display.
+     *  @default 'default'
+     */
+    type?: WizardType | undefined;
+} & Omit<StepperProps, "type"> & React.RefAttributes<HTMLDivElement>>;
+export default Wizard;

package/esm/core/Stepper/Wizard.js

@@ -0,0 +1,49 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * 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 { Stepper } from './Stepper';
+import { WorkflowDiagram } from './WorkflowDiagram';
+/**
+ * @deprecated Since v2, use `Stepper` (type = `default` | `long`) or WorkflowDiagram (type = `workflow`)
+ *
+ * A wizard displays progress through a sequence of logical and numbered steps.
+ * It may also be used for navigation.
+ *
+ * The `type` can be set to 'long' to show labels under steps.
+ *
+ * @example
+ * <Wizard
+ *  steps=[{name: "Step One"}, {name: "Step Two"}, {name: "Step Three"}]
+ *  currentStep={0}
+ *  type='long'
+ *  />
+ */
+export var Wizard = React.forwardRef(function (props, ref) {
+    var currentStep = props.currentStep, steps = props.steps, _a = props.type, type = _a === void 0 ? 'default' : _a, localization = props.localization, onStepClick = props.onStepClick, rest = __rest(props, ["currentStep", "steps", "type", "localization", "onStepClick"]);
+    return type !== 'workflow' ? (React.createElement(Stepper, __assign({ type: type, currentStep: currentStep, steps: steps, localization: localization, onStepClick: onStepClick, ref: ref }, rest))) : (React.createElement(WorkflowDiagram, __assign({ steps: steps, ref: ref }, rest)));
+});
+export default Wizard;

package/esm/core/Stepper/WorkflowDiagram.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import '@itwin/itwinui-css/css/workflow-diagram.css';
+import { StepperProps } from './Stepper';
+export declare type WorkflowDiagramProps = Pick<StepperProps, 'steps'>;
+export declare const WorkflowDiagram: React.ForwardRefExoticComponent<WorkflowDiagramProps & React.RefAttributes<HTMLDivElement>>;
+export default WorkflowDiagram;

package/esm/core/Stepper/WorkflowDiagram.js

@@ -0,0 +1,37 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * 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 { useTheme } from '../utils';
+import '@itwin/itwinui-css/css/workflow-diagram.css';
+import { WorkflowDiagramStep } from './WorkflowDiagramStep';
+export var WorkflowDiagram = React.forwardRef(function (props, ref) {
+    var steps = props.steps, rest = __rest(props, ["steps"]);
+    useTheme();
+    return (React.createElement("div", { ref: ref },
+        React.createElement("ol", __assign({ className: 'iui-workflow-diagram' }, rest), steps.map(function (s, index) { return (React.createElement(WorkflowDiagramStep, { key: index, title: s.name, description: s.description })); }))));
+});
+export default WorkflowDiagram;

package/esm/core/Stepper/WorkflowDiagramStep.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { StylingProps } from '../utils';
+import { StepperStepProps } from './StepperStep';
+export declare type WorkflowDiagramStepProps = Pick<StepperStepProps, 'title' | 'description'> & StylingProps;
+export declare const WorkflowDiagramStep: (props: WorkflowDiagramStepProps) => JSX.Element;

package/esm/core/Stepper/WorkflowDiagramStep.js

@@ -0,0 +1,35 @@
+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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import cx from 'classnames';
+import React from 'react';
+import { Tooltip } from '../Tooltip';
+export var WorkflowDiagramStep = function (props) {
+    var title = props.title, description = props.description, className = props.className, style = props.style, rest = __rest(props, ["title", "description", "className", "style"]);
+    var stepShape = (React.createElement("li", __assign({ className: cx('iui-workflow-diagram-step', className), style: style }, rest),
+        React.createElement("span", { className: 'iui-workflow-diagram-content' }, title)));
+    return description ? (React.createElement(Tooltip, { content: description }, stepShape)) : (stepShape);
+};

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

@@ -0,0 +1,8 @@
+export { Wizard } from './Wizard';
+export { Stepper } from './Stepper';
+export { WorkflowDiagram } from './WorkflowDiagram';
+export type { WizardProps, WizardType, WizardLocalization } from './Wizard';
+export type { StepperProps, StepProperties, StepperLocalization, } from './Stepper';
+export type { WorkflowDiagramProps } from './WorkflowDiagram';
+declare const _default: "./Wizard";
+export default _default;

package/esm/core/{Wizard → Stepper}/index.js

@@ -3,4 +3,6 @@
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
 export { Wizard } from './Wizard';
+export { Stepper } from './Stepper';
+export { WorkflowDiagram } from './WorkflowDiagram';
 export default './Wizard';

package/esm/core/Surface/Surface.js

@@ -26,7 +26,7 @@ var __rest = (this && this.__rest) || function (s, e) {
  *--------------------------------------------------------------------------------------------*/
 import React from 'react';
 import cx from 'classnames';
-import { useTheme, getWindow } from '../utils';
+import { useTheme } from '../utils';
 import '@itwin/itwinui-css/css/surface.css';
 /**
  * Helper function that returns one of the preset surface elevation values.
@@ -54,11 +54,9 @@ var getSurfaceElevationValue = function (elevation) {
  * <Surface elevation={2}>Surface Content</Surface>
  */
 export var Surface = React.forwardRef(function (props, ref) {
-    var _a, _b, _c;
-    var _d = props.elevation, elevation = _d === void 0 ? 0 : _d, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
+    var _a = props.elevation, elevation = _a === void 0 ? 0 : _a, className = props.className, style = props.style, children = props.children, rest = __rest(props, ["elevation", "className", "style", "children"]);
     useTheme();
-    var _style = ((_c = (_b = (_a = getWindow()) === null || _a === void 0 ? void 0 : _a.CSS) === null || _b === void 0 ? void 0 : _b.supports) === null || _c === void 0 ? void 0 : _c.call(_b, "--iui-surface-elevation: ".concat(getSurfaceElevationValue(elevation))))
-        ? __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style) : __assign({ boxShadow: getSurfaceElevationValue(elevation) }, style);
+    var _style = __assign({ '--iui-surface-elevation': getSurfaceElevationValue(elevation) }, style);
     return (React.createElement("div", __assign({ className: cx('iui-surface', className), style: _style, ref: ref }, rest), children));
 });
 export default Surface;

package/esm/core/Table/SubRowExpander.js

@@ -7,7 +7,7 @@ import SvgChevronRight from '@itwin/itwinui-icons-react/cjs/icons/ChevronRight';
 import { IconButton } from '../Buttons';
 export var SubRowExpander = function (props) {
     var cell = props.cell, isDisabled = props.isDisabled, cellProps = props.cellProps, expanderCell = props.expanderCell;
-    return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(IconButton, { style: { marginRight: 8 }, className: 'iui-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
+    return (React.createElement(React.Fragment, null, expanderCell ? (expanderCell(cellProps)) : (React.createElement(IconButton, { style: { marginRight: 8 }, className: 'iui-table-row-expander', styleType: 'borderless', size: 'small', onClick: function (e) {
             e.stopPropagation();
             cell.row.toggleRowExpanded();
         }, disabled: isDisabled }, React.createElement(SvgChevronRight, { style: {

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

@@ -35,6 +35,10 @@ export declare type TablePaginatorRendererProps = {
      * @default false
      */
     isLoading?: boolean;
+    /**
+     * Total number of rows selected (for mutli-selection mode only)
+     */
+    totalSelectedRowsCount?: number;
 };
 /**
  * Table props.
@@ -83,12 +87,10 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
     onSort?: (state: TableState<T>) => void;
     /**
      * Callback function when scroll reaches bottom. Can be used for lazy-loading the data.
-     * If you want to use it in older browsers e.g. IE, then you need to have IntersectionObserver polyfill.
      */
     onBottomReached?: () => void;
     /**
      * Callback function when row is in viewport.
-     * If you want to use it in older browsers e.g. IE, then you need to have IntersectionObserver polyfill.
      */
     onRowInViewport?: (rowData: T) => void;
     /**
@@ -137,6 +139,7 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
      */
     rowProps?: (row: Row<T>) => React.ComponentPropsWithRef<'div'> & {
         status?: 'positive' | 'warning' | 'negative';
+        isLoading?: boolean;
     };
     /**
      * Modify the density of the table (adjusts the row height).
@@ -166,8 +169,6 @@ export declare type TableProps<T extends Record<string, unknown> = Record<string
     /**
      * Flag whether columns are resizable.
      * In order to disable resizing for specific column, set `disableResizing: true` for that column.
-     *
-     * If you want to use it in older browsers e.g. IE, then you need to have `ResizeObserver` polyfill.
      * @default false
      */
     isResizable?: boolean;

package/esm/core/Table/Table.js

@@ -97,8 +97,7 @@ var flattenColumns = function (columns) {
  * />
  */
 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.selectionMode, selectionMode = _d === void 0 ? 'multi' : _d, _e = props.isSortable, isSortable = _e === void 0 ? false : _e, onSort = props.onSort, stateReducer = props.stateReducer, onBottomReached = props.onBottomReached, onRowInViewport = props.onRowInViewport, _f = props.intersectionMargin, intersectionMargin = _f === void 0 ? 300 : _f, subComponent = props.subComponent, onExpand = props.onExpand, onFilter = props.onFilter, globalFilterValue = props.globalFilterValue, emptyFilteredTableContent = props.emptyFilteredTableContent, filterFunctions = props.filterTypes, expanderCell = props.expanderCell, isRowDisabled = props.isRowDisabled, rowProps = props.rowProps, _g = props.density, density = _g === void 0 ? 'default' : _g, _h = props.selectSubRows, selectSubRows = _h === void 0 ? true : _h, getSubRows = props.getSubRows, _j = props.selectRowOnClick, selectRowOnClick = _j === void 0 ? true : _j, paginatorRenderer = props.paginatorRenderer, _k = props.pageSize, pageSize = _k === void 0 ? 25 : _k, _l = props.isResizable, isResizable = _l === void 0 ? false : _l, _m = props.columnResizeMode, columnResizeMode = _m === void 0 ? 'fit' : _m, _o = props.styleType, styleType = _o === void 0 ? 'default' : _o, _p = props.enableVirtualization, enableVirtualization = _p === void 0 ? false : _p, _q = props.enableColumnReordering, enableColumnReordering = _q === void 0 ? false : _q, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "columnResizeMode", "styleType", "enableVirtualization", "enableColumnReordering"]);
+    var data = props.data, columns = props.columns, _a = props.isLoading, isLoading = _a === void 0 ? false : _a, emptyTableContent = props.emptyTableContent, className = props.className, style = props.style, id = props.id, _b = props.isSelectable, isSelectable = _b === void 0 ? false : _b, onSelect = props.onSelect, onRowClick = props.onRowClick, _c = props.selectionMode, selectionMode = _c === void 0 ? 'multi' : _c, _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, globalFilterValue = props.globalFilterValue, 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.columnResizeMode, columnResizeMode = _l === void 0 ? 'fit' : _l, _m = props.styleType, styleType = _m === void 0 ? 'default' : _m, _o = props.enableVirtualization, enableVirtualization = _o === void 0 ? false : _o, _p = props.enableColumnReordering, enableColumnReordering = _p === void 0 ? false : _p, rest = __rest(props, ["data", "columns", "isLoading", "emptyTableContent", "className", "style", "id", "isSelectable", "onSelect", "onRowClick", "selectionMode", "isSortable", "onSort", "stateReducer", "onBottomReached", "onRowInViewport", "intersectionMargin", "subComponent", "onExpand", "onFilter", "globalFilterValue", "emptyFilteredTableContent", "filterTypes", "expanderCell", "isRowDisabled", "rowProps", "density", "selectSubRows", "getSubRows", "selectRowOnClick", "paginatorRenderer", "pageSize", "isResizable", "columnResizeMode", "styleType", "enableVirtualization", "enableColumnReordering"]);
     useTheme();
     var ownerDocument = React.useRef();
     var defaultColumn = React.useMemo(function () { return ({
@@ -272,6 +271,7 @@ export var Table = function (props) {
         isLoading: isLoading,
         onPageChange: gotoPage,
         onPageSizeChange: setPageSize,
+        totalSelectedRowsCount: selectionMode === 'single' ? 0 : instance.selectedFlatRows.length, // 0 when selectionMode = 'single' since totalSelectedRowCount is for multi-selection mode only
     }); }, [
         density,
         gotoPage,
@@ -280,8 +280,10 @@ export var Table = function (props) {
         setPageSize,
         state.pageIndex,
         state.pageSize,
+        instance.selectedFlatRows,
+        selectionMode,
     ]);
-    var _r = useScrollToRow(__assign(__assign({}, props), { page: page })), scrollToIndex = _r.scrollToIndex, tableRowRef = _r.tableRowRef;
+    var _q = useScrollToRow(__assign(__assign({}, props), { page: page })), scrollToIndex = _q.scrollToIndex, tableRowRef = _q.tableRowRef;
     var columnRefs = React.useRef({});
     var previousTableWidth = React.useRef(0);
     var onTableResize = React.useCallback(function (_a) {
@@ -294,7 +296,8 @@ export var Table = function (props) {
         // Update column widths when table was resized
         flatHeaders.forEach(function (header) {
             if (columnRefs.current[header.id]) {
-                header.resizeWidth = columnRefs.current[header.id].getBoundingClientRect().width;
+                header.resizeWidth =
+                    columnRefs.current[header.id].getBoundingClientRect().width;
             }
         });
         // If no column was resized then leave table resize handling to the flexbox
@@ -310,7 +313,8 @@ export var Table = function (props) {
             var newColumnWidths_1 = {};
             flatHeaders.forEach(function (column) {
                 if (columnRefs.current[column.id]) {
-                    newColumnWidths_1[column.id] = columnRefs.current[column.id].getBoundingClientRect().width;
+                    newColumnWidths_1[column.id] =
+                        columnRefs.current[column.id].getBoundingClientRect().width;
                 }
             });
             dispatch({ type: tableResizeEndAction, columnWidths: newColumnWidths_1 });
@@ -370,9 +374,9 @@ export var Table = function (props) {
                     resizeRef(element);
                 }
             }, id: id }, getTableProps({
-            className: cx('iui-table', (_a = {}, _a["iui-".concat(density)] = density !== 'default', _a), className),
+            className: cx('iui-table', className),
             style: __assign({ minWidth: 0 }, style),
-        }), ariaDataAttributes),
+        }), { "data-iui-size": density === 'default' ? undefined : density }, ariaDataAttributes),
             React.createElement("div", { className: 'iui-table-header-wrapper', ref: headerRef, onScroll: function () {
                     if (headerRef.current && bodyRef.current) {
                         bodyRef.current.scrollLeft = headerRef.current.scrollLeft;
@@ -381,19 +385,20 @@ export var Table = function (props) {
                 } },
                 React.createElement("div", { className: 'iui-table-header' }, headerGroups.slice(1).map(function (headerGroup) {
                     var headerGroupProps = headerGroup.getHeaderGroupProps({
-                        className: 'iui-row',
+                        className: 'iui-table-row',
                     });
                     return (React.createElement("div", __assign({}, headerGroupProps, { key: headerGroupProps.key }), headerGroup.headers.map(function (column, index) {
                         var _a = column.getSortByToggleProps(), onClick = _a.onClick, restSortProps = __rest(_a, ["onClick"]);
-                        var columnProps = column.getHeaderProps(__assign(__assign({}, restSortProps), { className: cx('iui-cell', {
+                        var columnProps = column.getHeaderProps(__assign(__assign({}, restSortProps), { className: cx('iui-table-cell', {
                                 'iui-actionable': column.canSort,
                                 'iui-sorted': column.isSorted,
-                                'iui-cell-sticky': !!column.sticky,
+                                'iui-table-cell-sticky': !!column.sticky,
                             }, column.columnClassName), style: __assign(__assign(__assign({}, getCellStyle(column, !!state.isTableResizing)), getStickyStyle(column, visibleColumns)), { flexWrap: 'unset' }) }));
                         return (React.createElement("div", __assign({}, columnProps, column.getDragAndDropProps(), { key: columnProps.key, title: undefined, ref: function (el) {
                                 if (el) {
                                     columnRefs.current[column.id] = el;
-                                    column.resizeWidth = el.getBoundingClientRect().width;
+                                    column.resizeWidth =
+                                        el.getBoundingClientRect().width;
                                 }
                             }, onMouseDown: function () {
                                 isHeaderDirectClick.current = true;
@@ -403,24 +408,28 @@ export var Table = function (props) {
                                     onClick === null || onClick === void 0 ? void 0 : onClick(e);
                                     isHeaderDirectClick.current = false;
                                 }
+                            }, tabIndex: showSortButton(column) ? 0 : undefined, onKeyDown: function (e) {
+                                if (e.key == 'Enter' && showSortButton(column)) {
+                                    column.toggleSortBy();
+                                }
                             } }),
                             column.render('Header'),
                             (showFilterButton(column) ||
                                 showSortButton(column)) && (React.createElement("div", { className: 'iui-table-header-actions-container' },
                                 showFilterButton(column) && (React.createElement(FilterToggle, { column: column })),
-                                showSortButton(column) && (React.createElement("div", { className: 'iui-cell-end-icon' }, column.isSortedDesc ||
-                                    (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-sort', "aria-hidden": true })))))),
+                                showSortButton(column) && (React.createElement("div", { className: 'iui-table-cell-end-icon' }, column.isSortedDesc ||
+                                    (!column.isSorted && column.sortDescFirst) ? (React.createElement(SvgSortDown, { className: 'iui-icon iui-table-sort', "aria-hidden": true })) : (React.createElement(SvgSortUp, { className: 'iui-icon iui-table-sort', "aria-hidden": true })))))),
                             isResizable &&
                                 column.isResizerVisible &&
                                 (index !== headerGroup.headers.length - 1 ||
-                                    columnResizeMode === 'expand') && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-resizer' }),
-                                React.createElement("div", { className: 'iui-resizer-bar' }))),
+                                    columnResizeMode === 'expand') && (React.createElement("div", __assign({}, column.getResizerProps(), { className: 'iui-table-resizer' }),
+                                React.createElement("div", { className: 'iui-table-resizer-bar' }))),
                             enableColumnReordering &&
-                                !column.disableReordering && (React.createElement("div", { className: 'iui-reorder-bar' })),
+                                !column.disableReordering && (React.createElement("div", { className: 'iui-table-reorder-bar' })),
                             column.sticky === 'left' &&
-                                state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-cell-shadow-right' })),
+                                state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
                             column.sticky === 'right' &&
-                                state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-cell-shadow-left' }))));
+                                state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' }))));
                     })));
                 }))),
             React.createElement("div", __assign({}, getTableBodyProps({
@@ -433,12 +442,12 @@ export var Table = function (props) {
                         headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
                         updateStickyState();
                     }
-                }, tabIndex: -1 }),
+                }, tabIndex: -1, "aria-multiselectable": (isSelectable && selectionMode === 'multi') || undefined }),
                 data.length !== 0 && (React.createElement(React.Fragment, null, enableVirtualization ? (React.createElement(VirtualScroll, { itemsLength: page.length, itemRenderer: virtualizedItemRenderer, scrollToIndex: scrollToIndex })) : (page.map(function (_, index) { return getPreparedRow(index); })))),
                 isLoading && data.length === 0 && (React.createElement("div", { className: 'iui-table-empty' },
                     React.createElement(ProgressRadial, { indeterminate: true }))),
-                isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-row' },
-                    React.createElement("div", { className: 'iui-cell', style: { justifyContent: 'center' } },
+                isLoading && data.length !== 0 && (React.createElement("div", { className: 'iui-table-row' },
+                    React.createElement("div", { className: 'iui-table-cell', style: { justifyContent: 'center' } },
                         React.createElement(ProgressRadial, { indeterminate: true, size: 'small', style: { float: 'none', marginLeft: 0 } })))),
                 !isLoading && data.length === 0 && !areFiltersSet && (React.createElement("div", { className: 'iui-table-empty' },
                     React.createElement("div", null, emptyTableContent))),

package/esm/core/Table/TableCell.js

@@ -34,8 +34,8 @@ export var TableCell = function (props) {
         };
     };
     var cellElementProps = cell.getCellProps({
-        className: cx('iui-cell', cell.column.cellClassName, {
-            'iui-cell-sticky': !!cell.column.sticky,
+        className: cx('iui-table-cell', cell.column.cellClassName, {
+            'iui-table-cell-sticky': !!cell.column.sticky,
         }),
         style: __assign(__assign(__assign({}, getCellStyle(cell.column, !!tableInstance.state.isTableResizing)), getSubRowStyle()), getStickyStyle(cell.column, tableInstance.visibleColumns)),
     });
@@ -49,9 +49,9 @@ export var TableCell = function (props) {
         children: (React.createElement(React.Fragment, null,
             cellContent,
             cell.column.sticky === 'left' &&
-                tableInstance.state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-cell-shadow-right' })),
+                tableInstance.state.sticky.isScrolledToRight && (React.createElement("div", { className: 'iui-table-cell-shadow-right' })),
             cell.column.sticky === 'right' &&
-                tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-cell-shadow-left' })))),
+                tableInstance.state.sticky.isScrolledToLeft && (React.createElement("div", { className: 'iui-table-cell-shadow-left' })))),
     };
     return (React.createElement(React.Fragment, null, cell.column.cellRenderer ? (cell.column.cellRenderer(__assign(__assign({}, cellRendererProps), { isDisabled: function () { return isDisabled; } }))) : (React.createElement(DefaultCell, __assign({}, cellRendererProps, { isDisabled: function () { return isDisabled; } })))));
 };