@itwin/itwinui-react 3.17.3 → 3.18.0

package/cjs/core/Stepper/WorkflowDiagram.js

@@ -44,3 +44,5 @@ const WorkflowDiagram = _react.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  WorkflowDiagram.displayName = 'WorkflowDiagram';

package/cjs/core/Surface/Surface.js

@@ -53,6 +53,8 @@ const SurfaceHeader = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SurfaceHeader.displayName = 'Surface.Header';
 const SurfaceBody = _react.forwardRef((props, ref) => {
   let { children, className, isPadded = false, ...rest } = props;
   let { setHasLayout } = (0, _index.useSafeContext)(SurfaceContext);
@@ -70,6 +72,8 @@ const SurfaceBody = _react.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SurfaceBody.displayName = 'Surface.Body';
 const Surface = Object.assign(
   _react.forwardRef((props, ref) => {
     let {
@@ -111,4 +115,7 @@ const Surface = Object.assign(
     Body: SurfaceBody,
   },
 );
+if ('development' === process.env.NODE_ENV) Surface.displayName = 'Surface';
 const SurfaceContext = _react.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  SurfaceContext.displayName = 'SurfaceContext';

package/cjs/core/Table/ColumnHeader.js

@@ -102,26 +102,26 @@ const ColumnHeader = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(
       _react.Fragment,
       null,
-      _react.createElement(
-        _index.ShadowRoot,
-        null,
-        'string' == typeof column.Header
-          ? _react.createElement(
+      'string' == typeof column.Header
+        ? _react.createElement(
+            _index.ShadowRoot,
+            null,
+            _react.createElement(
               _index.LineClamp,
               null,
               _react.createElement('slot', null),
-            )
-          : _react.createElement('slot', null),
-        _react.createElement('slot', {
-          name: 'actions',
-        }),
-        _react.createElement('slot', {
-          name: 'resizers',
-        }),
-        _react.createElement('slot', {
-          name: 'shadows',
-        }),
-      ),
+            ),
+            _react.createElement('slot', {
+              name: 'actions',
+            }),
+            _react.createElement('slot', {
+              name: 'resizers',
+            }),
+            _react.createElement('slot', {
+              name: 'shadows',
+            }),
+          )
+        : null,
       column.render('Header'),
       (showFilterButton(column) || showSortButton(column)) &&
         _react.createElement(

package/cjs/core/Table/Table.d.ts

@@ -44,7 +44,7 @@ export type TablePaginatorRendererProps = {
  * Table props.
  * columns and data must be memoized.
  */
-export type TableProps<T extends Record<string, unknown> = Record<string, unknown>> = Omit<TableOptions<T>, 'disableSortBy'> & {
+export type TableProps<T extends Record<string, unknown> = Record<string, unknown>> = Omit<TableOptions<T>, 'disableSortBy'> & Omit<React.ComponentPropsWithoutRef<'div'>, 'role' | 'onSelect'> & {
     /**
      * Flag whether data is loading.
      * @default false
@@ -203,6 +203,13 @@ export type TableProps<T extends Record<string, unknown> = Record<string, unknow
      * Passes custom props to Table body.
      */
     bodyProps?: React.ComponentProps<'div'>;
+    /**
+     * Passes props to the `role="table"` element within the wrapper.
+     *
+     * If `tableProps` or `role` is passed to `Table`, all ARIA attributes passed to `Table` will be passed to the wrapper.
+     * Else, all ARIA attributes will be passed to the inner element with `role="table"`.
+     */
+    tableProps?: React.ComponentProps<'div'>;
     /**
      * Passes custom props to empty table.
      */
@@ -231,9 +238,28 @@ export type TableProps<T extends Record<string, unknown> = Record<string, unknow
      * />
      */
     scrollToRow?: (rows: Row<T>[], data: T[]) => number;
+    /**
+     * Caption for the table.
+     *
+     * Although optional for backward compatibility, it is **recommended** to use it for accessibility purposes.
+     *
+     * @default "Table"
+     */
+    caption?: string;
+    /**
+     * If `tableProps` or `role` is passed to `Table`, all ARIA attributes passed to `Table` will be passed to the wrapper.
+     * Else, all ARIA attributes will be passed to the inner element with `role="table"`.
+     */
+    role?: React.AriaRole;
 } & Omit<CommonProps, 'title'>;
 /**
  * Table based on [react-table](https://react-table.tanstack.com/docs/api/overview).
+ *
+ * **Note**: If `tableProps` or `role` is passed to `Table`, all ARIA attributes passed to `Table` will be passed to the wrapper.
+ * Else, all ARIA attributes will be passed to the inner element with `role="table"`.
+ *
+ * ---
+ *
  * @example
  * const columns = React.useMemo(() => [
  *   {

package/cjs/core/Table/Table.js

@@ -37,6 +37,7 @@ const _index2 = require('./actionHandlers/index.js');
 const _index3 = require('./columns/index.js');
 const _ColumnHeader = require('./ColumnHeader.js');
 const _TableExpandableContentMemoized = require('./TableExpandableContentMemoized.js');
+const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
 const singleRowSelectedAction = 'singleRowSelected';
 const shiftRowSelectedAction = 'shiftRowSelected';
 const tableResizeStartAction = 'tableResizeStart';
@@ -93,10 +94,44 @@ const Table = (props) => {
     headerWrapperProps,
     headerProps,
     bodyProps,
+    tableProps,
     emptyTableContentProps,
     getRowId,
-    ...rest
+    caption = 'Table',
+    role,
+    ..._rest
   } = props;
+  let { ariaRestAttributes, nonAriaRestAttributes } = _react.useMemo(
+    () =>
+      Object.entries(_rest).reduce(
+        (result, [key, value]) => {
+          if (key.startsWith('aria-')) result.ariaRestAttributes[key] = value;
+          else result.nonAriaRestAttributes[key] = value;
+          return result;
+        },
+        {
+          ariaRestAttributes: {},
+          nonAriaRestAttributes: {},
+        },
+      ),
+    [_rest],
+  );
+  let { outerAriaRestAttributes, innerAriaRestAttributes } =
+    _react.useMemo(() => {
+      if (tableProps || role)
+        return {
+          outerAriaRestAttributes: {
+            ...ariaRestAttributes,
+          },
+          innerAriaRestAttributes: {},
+        };
+      return {
+        outerAriaRestAttributes: {},
+        innerAriaRestAttributes: {
+          ...ariaRestAttributes,
+        },
+      };
+    }, [ariaRestAttributes, role, tableProps]);
   (0, _index.useGlobals)();
   let ownerDocument = _react.useRef(void 0);
   let defaultColumn = _react.useMemo(
@@ -315,16 +350,21 @@ const Table = (props) => {
   } = instance;
   let headerGroups = _headerGroups;
   let logWarning = (0, _index.useWarningLogger)();
-  if (1 === columns.length && 'columns' in columns[0])
+  if (1 === columns.length && 'columns' in columns[0]) {
     headerGroups = _headerGroups.slice(1);
-  let ariaDataAttributes = Object.entries(rest).reduce(
-    (result, [key, value]) => {
-      if (key.startsWith('data-') || key.startsWith('aria-'))
-        result[key] = value;
-      return result;
-    },
-    {},
-  );
+    if ('development' === process.env.NODE_ENV)
+      logWarning(
+        "Table's `columns` prop should not have a top-level `Header` or sub-columns. They are only allowed to be passed for backwards compatibility.\n See https://github.com/iTwin/iTwinUI/wiki/iTwinUI-react-v2-migration-guide#breaking-changes",
+      );
+  }
+  if (
+    'development' === process.env.NODE_ENV &&
+    subComponent &&
+    data.some((item) => !!item.subRows?.length)
+  )
+    logWarning(
+      'Passing both `subComponent` and `data` with `subRows` is not supported. There are features designed for `subRows` that are not compatible with `subComponent` and vice versa.',
+    );
   let areFiltersSet =
     allColumns.some(
       (column) => null != column.filterValue && '' !== column.filterValue,
@@ -339,7 +379,7 @@ const Table = (props) => {
         !isDisabled &&
         selectRowOnClick &&
         !event.isDefaultPrevented()
-      ) {
+      )
         if ('multi' === selectionMode && event.shiftKey)
           dispatch({
             type: shiftRowSelectedAction,
@@ -353,7 +393,6 @@ const Table = (props) => {
             type: singleRowSelectedAction,
             id: row.id,
           });
-      }
     },
     [
       isRowDisabled,
@@ -554,6 +593,7 @@ const Table = (props) => {
   _react.useEffect(() => {
     updateStickyState();
   }, []);
+  let captionId = _react.useId();
   return _react.createElement(
     _utils.TableInstanceContext.Provider,
     {
@@ -577,10 +617,46 @@ const Table = (props) => {
             ...style,
           },
         }),
+        role: role,
+        'aria-labelledby': captionId,
         onScroll: () => updateStickyState(),
         'data-iui-size': 'default' === density ? void 0 : density,
-        ...ariaDataAttributes,
+        ...outerAriaRestAttributes,
+        ...nonAriaRestAttributes,
       },
+      _react.createElement(
+        _index.ShadowRoot,
+        null,
+        _react.createElement(
+          'div',
+          {
+            role: 'table',
+            ...innerAriaRestAttributes,
+            ...tableProps,
+          },
+          _react.createElement('slot', {
+            name: 'caption',
+          }),
+          _react.createElement('slot', {
+            name: 'iui-table-header-wrapper',
+          }),
+          _react.createElement('slot', {
+            name: 'iui-table-body',
+          }),
+        ),
+        _react.createElement('slot', {
+          name: 'iui-table-body-extra',
+        }),
+        _react.createElement('slot', null),
+      ),
+      _react.createElement(
+        _VisuallyHidden.VisuallyHidden,
+        {
+          slot: 'caption',
+          id: captionId,
+        },
+        caption,
+      ),
       headerGroups.map((headerGroup) => {
         headerGroup.headers = headerGroup.headers.filter(
           (header) =>
@@ -593,6 +669,7 @@ const Table = (props) => {
         return _react.createElement(
           _index.Box,
           {
+            slot: 'iui-table-header-wrapper',
             as: 'div',
             key: headerGroupProps.key,
             ...headerWrapperProps,
@@ -648,6 +725,7 @@ const Table = (props) => {
       _react.createElement(
         _index.Box,
         {
+          slot: 'iui-table-body',
           as: 'div',
           ...bodyProps,
           ...getTableBodyProps({
@@ -659,13 +737,13 @@ const Table = (props) => {
               bodyProps?.className,
             ),
           }),
-          'aria-multiselectable':
-            (isSelectable && 'multi' === selectionMode) || void 0,
+          role: void 0,
         },
         _react.createElement(
           _index.ShadowRoot,
           {
             css: virtualizerCss,
+            flush: false,
           },
           enableVirtualization && 0 !== data.length
             ? _react.createElement(
@@ -692,59 +770,49 @@ const Table = (props) => {
                   )
               : page.map((_, index) => getPreparedRow(index)),
           ),
-        isLoading &&
-          0 === data.length &&
+      ),
+      isLoading &&
+        0 === data.length &&
+        _react.createElement(
+          TableBodyExtraWrapper,
+          null,
           _react.createElement(
-            _index.Box,
-            {
-              as: 'div',
-              ...emptyTableContentProps,
-              className: (0, _classnames.default)(
-                'iui-table-empty',
-                emptyTableContentProps?.className,
-              ),
-            },
+            TableEmptyWrapper,
+            emptyTableContentProps,
             _react.createElement(_ProgressRadial.ProgressRadial, {
               indeterminate: true,
             }),
           ),
-        !isLoading &&
-          0 === data.length &&
-          !areFiltersSet &&
+        ),
+      !isLoading &&
+        0 === data.length &&
+        !areFiltersSet &&
+        _react.createElement(
+          TableBodyExtraWrapper,
+          null,
           _react.createElement(
-            _index.Box,
-            {
-              as: 'div',
-              ...emptyTableContentProps,
-              className: (0, _classnames.default)(
-                'iui-table-empty',
-                emptyTableContentProps?.className,
-              ),
-            },
+            TableEmptyWrapper,
+            emptyTableContentProps,
             _react.createElement('div', null, emptyTableContent),
           ),
-        !isLoading &&
-          (0 === data.length || 0 === rows.length) &&
-          areFiltersSet &&
+        ),
+      !isLoading &&
+        (0 === data.length || 0 === rows.length) &&
+        areFiltersSet &&
+        _react.createElement(
+          TableBodyExtraWrapper,
+          null,
           _react.createElement(
-            _index.Box,
-            {
-              as: 'div',
-              ...emptyTableContentProps,
-              className: (0, _classnames.default)(
-                'iui-table-empty',
-                emptyTableContentProps?.className,
-              ),
-            },
+            TableEmptyWrapper,
+            emptyTableContentProps,
             _react.createElement('div', null, emptyFilteredTableContent),
           ),
-      ),
+        ),
       isLoading &&
         0 !== data.length &&
         _react.createElement(
-          _index.Box,
+          TableBodyExtraWrapper,
           {
-            className: 'iui-table-body-extra',
             'data-iui-loading': 'true',
           },
           _react.createElement(_ProgressRadial.ProgressRadial, {
@@ -756,3 +824,34 @@ const Table = (props) => {
     ),
   );
 };
+if ('development' === process.env.NODE_ENV) Table.displayName = 'Table';
+const TableBodyExtraWrapper = _react.forwardRef((props, ref) => {
+  let { children, ...rest } = props;
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'div',
+      ref: ref,
+      slot: 'iui-table-body-extra',
+      ...rest,
+      className: (0, _classnames.default)(
+        'iui-table-body-extra',
+        rest.className,
+      ),
+    },
+    children,
+  );
+});
+const TableEmptyWrapper = _react.forwardRef((props, ref) => {
+  let { children, ...rest } = props;
+  return _react.createElement(
+    _index.Box,
+    {
+      as: 'div',
+      ref: ref,
+      ...rest,
+      className: (0, _classnames.default)('iui-table-empty', rest.className),
+    },
+    children,
+  );
+});

package/cjs/core/Table/TableCell.js

@@ -56,10 +56,12 @@ const TableCell = (props) => {
   });
   let cellProps = {
     ...tableInstance,
-    cell,
-    row: cell.row,
-    value: cell.value,
-    column: cell.column,
+    ...{
+      cell,
+      row: cell.row,
+      value: cell.value,
+      column: cell.column,
+    },
   };
   let cellContent = _react.createElement(
     _react.Fragment,

package/cjs/core/Table/actionHandlers/expandHandler.js

@@ -9,10 +9,8 @@ Object.defineProperty(exports, 'onExpandHandler', {
   },
 });
 const onExpandHandler = (newState, instance, onExpand) => {
-  if (!instance?.preFilteredFlatRows.length) {
-    onExpand?.([], newState);
-    return;
-  }
+  if (!instance?.preFilteredFlatRows.length)
+    return void onExpand?.([], newState);
   let expandedData = [];
   instance.preFilteredFlatRows.forEach((row) => {
     if (newState.expanded[row.id]) expandedData.push(row.original);

package/cjs/core/Table/actionHandlers/selectHandler.js

@@ -22,10 +22,7 @@ _export(exports, {
 });
 const _Table = require('../Table.js');
 const onSelectHandler = (newState, instance, onSelect, isRowDisabled) => {
-  if (!instance?.rows.length) {
-    onSelect?.([], newState);
-    return;
-  }
+  if (!instance?.rows.length) return void onSelect?.([], newState);
   let newSelectedRowIds = {};
   let handleRow = (row) => {
     if (isRowDisabled?.(row.original)) return false;

package/cjs/core/Table/cells/DefaultCell.js

@@ -61,29 +61,31 @@ const DefaultCell = (props) => {
       _index.ShadowRoot,
       {
         key: `${cellElementKey}-shadow-root`,
+        flush: false,
+        css: css,
       },
       _react.createElement('slot', {
         name: 'start',
-        key: `${cellElementKey}-shadow-root-start`,
       }),
-      clamp
-        ? _react.createElement(
-            _index.LineClamp,
-            {
-              key: `${cellElementKey}-shadow-root-slot`,
-            },
-            _react.createElement('slot', null),
-          )
-        : _react.createElement('slot', {
-            key: `${cellElementKey}-shadow-root-slot`,
-          }),
+      _react.createElement(
+        'div',
+        {
+          className: '_iui-table-cell-main-content',
+          onClick: (e) => e.stopPropagation(),
+        },
+        clamp
+          ? _react.createElement(
+              _index.LineClamp,
+              null,
+              _react.createElement('slot', null),
+            )
+          : _react.createElement('slot', null),
+      ),
       _react.createElement('slot', {
         name: 'end',
-        key: `${cellElementKey}-shadow-root-end`,
       }),
       _react.createElement('slot', {
         name: 'shadows',
-        key: `${cellElementKey}-shadow-root-shadows`,
       }),
     ),
     startIcon &&
@@ -109,3 +111,18 @@ const DefaultCell = (props) => {
       ),
   );
 };
+if ('development' === process.env.NODE_ENV)
+  DefaultCell.displayName = 'DefaultCell';
+const css = `
+._iui-table-cell-main-content {
+  position: relative;
+  isolation: isolate;
+}
+._iui-table-cell-main-content::before {
+  content: '';
+  display: block;
+  position: absolute;
+  inset: -6px;
+  z-index: -1;
+}
+`;

package/cjs/core/Table/cells/EditableCell.js

@@ -88,3 +88,5 @@ const EditableCell = (props) => {
     children,
   );
 };
+if ('development' === process.env.NODE_ENV)
+  EditableCell.displayName = 'EditableCell';

package/cjs/core/Table/columns/expanderColumn.js

@@ -37,24 +37,23 @@ const ExpanderColumn = (props = {}) => {
     cellClassName: 'iui-slot',
     Cell: (props) => {
       let { row } = props;
-      if (subComponent?.(row))
-        return _react.createElement(
-          _IconButton.IconButton,
-          {
-            'aria-label': 'Toggle expandable content',
-            className: 'iui-table-row-expander',
-            styleType: 'borderless',
-            size: 'small',
-            onClick: (e) => {
-              e.stopPropagation();
-              row.toggleRowExpanded();
-            },
-            disabled: isDisabled?.(props.row.original),
-            'aria-expanded': row.isExpanded,
+      if (!subComponent?.(row)) return null;
+      return _react.createElement(
+        _IconButton.IconButton,
+        {
+          'aria-label': 'Toggle expandable content',
+          className: 'iui-table-row-expander',
+          styleType: 'borderless',
+          size: 'small',
+          onClick: (e) => {
+            e.stopPropagation();
+            row.toggleRowExpanded();
           },
-          _react.createElement(_index.SvgChevronRight, null),
-        );
-      return null;
+          disabled: isDisabled?.(props.row.original),
+          'aria-expanded': row.isExpanded,
+        },
+        _react.createElement(_index.SvgChevronRight, null),
+      );
     },
     cellRenderer: (props) =>
       _react.createElement(_index1.DefaultCell, {

package/cjs/core/Table/columns/selectionColumn.js

@@ -52,6 +52,7 @@ const SelectionColumn = (props = {}) => {
       );
       let indeterminate =
         !checked && Object.keys(state.selectedRowIds).length > 0;
+      let nextToggleState = !rows.some((row) => row.isSelected);
       return _react.createElement(_Checkbox.Checkbox, {
         ...getToggleAllRowsSelectedProps(),
         style: {},
@@ -59,8 +60,8 @@ const SelectionColumn = (props = {}) => {
         checked: checked && !disabled,
         indeterminate: indeterminate,
         disabled: disabled,
-        onChange: () =>
-          toggleAllRowsSelected(!rows.some((row) => row.isSelected)),
+        'aria-label': `${nextToggleState ? 'Select' : 'Deselect'} all rows`,
+        onChange: () => toggleAllRowsSelected(nextToggleState),
       });
     },
     Cell: ({ row, selectSubRows = true }) =>
@@ -70,6 +71,7 @@ const SelectionColumn = (props = {}) => {
         title: '',
         disabled: isDisabled?.(row.original),
         onClick: (e) => e.stopPropagation(),
+        'aria-label': `${row.isSelected ? 'Deselect' : 'Select'} row`,
         onChange: () => {
           if (
             row.subRows.length > 0 &&

package/cjs/core/Tabs/Tabs.d.ts

@@ -52,12 +52,21 @@ type TabsWrapperOwnProps = {
      */
     defaultChecked?: never;
 } & TabsOrientationProps;
+type TabsWrapperPresentationOwnProps = {
+    orientation?: 'horizontal' | 'vertical';
+};
 type TabListOwnProps = {
     /**
      * Tab items.
      */
     children: React.ReactNode[];
 };
+type TabListPresentationOwnProps = {
+    type?: 'default' | 'borderless' | 'pill';
+    color?: 'blue' | 'green';
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'default' | 'large';
+};
 type TabOwnProps = {
     /**
      * Value used to associate the tab with a given panel.
@@ -293,3 +302,31 @@ export declare const Tabs: PolymorphicForwardRefComponent<"div", TabsLegacyProps
      */
     Panel: PolymorphicForwardRefComponent<"div", TabsPanelOwnProps>;
 };
+/**
+ * Presentational version of `Tabs`. It renders purely static elements, without any associated behaviors.
+ */
+export declare const unstable_TabsPresentation: {
+    Wrapper: PolymorphicForwardRefComponent<"div", TabsWrapperPresentationOwnProps>;
+    /**
+     * This could be used with `role="list"` or `role="tablist"`.
+     */
+    TabList: PolymorphicForwardRefComponent<"div", TabListPresentationOwnProps>;
+    /**
+     * This renders a button without any role by default. The rendered element can be changed using the `as` prop
+     * (e.g. `as="a"` or `as="div"`)
+     *
+     * When _not_ using `role="tab"`, the selected state can be set using `aria-current="true"` (or `aria-current="page"`).
+     *
+     * When using `role="tab"`, the selected state can be set using `aria-selected="true"`.
+     *
+     * Example:
+     * ```jsx
+     * <TabsPresentation.Tab
+     *   as="a"
+     *   href=""
+     *   aria-current="true"
+     * />
+     * ```
+     */
+    Tab: PolymorphicForwardRefComponent<"button", {}>;
+};