@itwin/itwinui-react 3.17.4 → 3.18.0

package/DEV-cjs/core/Select/Select.js

@@ -30,7 +30,7 @@ const Select = _react.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
-Select.displayName = 'Select';
+if ('development' === process.env.NODE_ENV) Select.displayName = 'Select';
 const NativeSelect = _react.forwardRef((props, forwardedRef) => {
   let {
     triggerProps,
@@ -141,6 +141,36 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     });
     popoverProps?.onVisibleChange?.(false);
   }, [popoverProps]);
+  let handleOptionSelection = _react.useCallback(
+    (option, { isSelected = false } = {}) => {
+      if (isSingleOnChange(onChangeRef.current, multiple)) {
+        setUncontrolledValue(option.value);
+        onChangeRef.current?.(option.value);
+        hide();
+      } else {
+        setUncontrolledValue((prev) =>
+          isSelected
+            ? prev?.filter((i) => option.value !== i)
+            : [...(prev ?? []), option.value],
+        );
+        onChangeRef.current?.(option.value, isSelected ? 'removed' : 'added');
+      }
+      if (isMultipleEnabled(value, multiple)) {
+        let prevSelectedValue = value || [];
+        let newSelectedValue = isSelected
+          ? prevSelectedValue.filter((i) => option.value !== i)
+          : [...prevSelectedValue, option.value];
+        setLiveRegionSelection(
+          options
+            .filter((i) => newSelectedValue.includes(i.value))
+            .map((item) => item.label)
+            .filter(Boolean)
+            .join(', '),
+        );
+      }
+    },
+    [hide, multiple, onChangeRef, options, value],
+  );
   let menuItems = _react.useMemo(
     () =>
       options.map((option, index) => {
@@ -166,34 +196,9 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
             : null,
           onClick: () => {
             if (option.disabled) return;
-            if (isSingleOnChange(onChangeRef.current, multiple)) {
-              setUncontrolledValue(option.value);
-              onChangeRef.current?.(option.value);
-              hide();
-            } else {
-              setUncontrolledValue((prev) =>
-                isSelected
-                  ? prev?.filter((i) => option.value !== i)
-                  : [...(prev ?? []), option.value],
-              );
-              onChangeRef.current?.(
-                option.value,
-                isSelected ? 'removed' : 'added',
-              );
-            }
-            if (isMultipleEnabled(value, multiple)) {
-              let prevSelectedValue = value || [];
-              let newSelectedValue = isSelected
-                ? prevSelectedValue.filter((i) => option.value !== i)
-                : [...prevSelectedValue, option.value];
-              setLiveRegionSelection(
-                options
-                  .filter((i) => newSelectedValue.includes(i.value))
-                  .map((item) => item.label)
-                  .filter(Boolean)
-                  .join(', '),
-              );
-            }
+            handleOptionSelection(option, {
+              isSelected,
+            });
           },
           ref: (el) => {
             if (isSelected && !multiple)
@@ -206,7 +211,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
           ...menuItem.props,
         });
       }),
-    [hide, itemRenderer, multiple, onChangeRef, options, value],
+    [handleOptionSelection, itemRenderer, multiple, options, value],
   );
   let selectedItems = _react.useMemo(() => {
     if (null == value) return;
@@ -223,12 +228,18 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
     return index >= 0 ? index : 0;
   }, [options, value]);
   let tagRenderer = _react.useCallback(
-    (item) =>
+    (option) =>
       _react.createElement(_SelectTag.SelectTag, {
-        key: item.label,
-        label: item.label,
+        key: option.label,
+        label: option.label,
+        onRemove: () => {
+          handleOptionSelection(option, {
+            isSelected: true,
+          });
+          selectRef.current?.focus();
+        },
       }),
-    [],
+    [handleOptionSelection],
   );
   let popover = (0, _Popover.usePopover)({
     visible: isOpen,
@@ -282,6 +293,7 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
             },
             triggerProps?.className,
           ),
+          'data-iui-multi': multiple,
         },
         (!selectedItems || 0 === selectedItems.length) &&
           _react.createElement(
@@ -293,10 +305,8 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
             placeholder,
           ),
         isMultipleEnabled(selectedItems, multiple)
-          ? _react.createElement(MultipleSelectButton, {
-              selectedItems: selectedItems,
-              selectedItemsRenderer: selectedItemRenderer,
-              tagRenderer: tagRenderer,
+          ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
+              text: liveRegionSelection,
             })
           : _react.createElement(SingleSelectButton, {
               selectedItem: selectedItems,
@@ -307,9 +317,12 @@ const CustomSelect = _react.forwardRef((props, forwardedRef) => {
         disabled: disabled,
         isOpen: isOpen,
       }),
-      multiple
-        ? _react.createElement(_index.AutoclearingHiddenLiveRegion, {
-            text: liveRegionSelection,
+      isMultipleEnabled(selectedItems, multiple)
+        ? _react.createElement(MultipleSelectButton, {
+            selectedItems: selectedItems,
+            selectedItemsRenderer: selectedItemRenderer,
+            tagRenderer: tagRenderer,
+            size: 'small' === size ? 'small' : void 0,
           })
         : null,
     ),
@@ -412,6 +425,7 @@ const MultipleSelectButton = ({
   selectedItems,
   selectedItemsRenderer,
   tagRenderer,
+  size,
 }) => {
   let selectedItemsElements = _react.useMemo(() => {
     if (!selectedItems) return [];
@@ -421,19 +435,18 @@ const MultipleSelectButton = ({
     _react.Fragment,
     null,
     selectedItems &&
-      selectedItemsRenderer &&
-      selectedItemsRenderer(selectedItems),
-    selectedItems &&
-      !selectedItemsRenderer &&
       _react.createElement(
         _index.Box,
         {
           as: 'span',
           className: 'iui-content',
         },
-        _react.createElement(_SelectTagContainer.SelectTagContainer, {
-          tags: selectedItemsElements,
-        }),
+        selectedItemsRenderer
+          ? selectedItemsRenderer(selectedItems)
+          : _react.createElement(_SelectTagContainer.SelectTagContainer, {
+              tags: selectedItemsElements,
+              'data-iui-size': size,
+            }),
       ),
   );
 };

package/DEV-cjs/core/Select/SelectTag.js

@@ -26,6 +26,7 @@ const SelectTag = _react.forwardRef((props, forwardedRef) => {
       },
       removeButtonProps: {
         className: 'iui-select-tag-button',
+        'aria-label': `Deselect ${label}`,
       },
       ref: forwardedRef,
       ...rest,

package/DEV-cjs/core/SideNavigation/SideNavigation.js

@@ -70,6 +70,7 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(
       _index.Box,
       {
+        as: 'nav',
         ...wrapperProps,
         className: (0, _classnames.default)(
           'iui-side-navigation-wrapper',
@@ -85,7 +86,6 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
         _react.createElement(
           _index.Box,
           {
-            as: 'div',
             className: (0, _classnames.default)(
               'iui-side-navigation',
               {
@@ -139,4 +139,5 @@ const SideNavigation = _react.forwardRef((props, forwardedRef) => {
     ),
   );
 });
-SideNavigation.displayName = 'SideNavigation';
+if ('development' === process.env.NODE_ENV)
+  SideNavigation.displayName = 'SideNavigation';

package/DEV-cjs/core/SideNavigation/SidenavButton.js

@@ -58,4 +58,5 @@ const SidenavButton = _react.forwardRef((props, ref) => {
         sidenavButton,
       );
 });
-SidenavButton.displayName = 'SidenavButton';
+if ('development' === process.env.NODE_ENV)
+  SidenavButton.displayName = 'SidenavButton';

package/DEV-cjs/core/SideNavigation/SidenavSubmenu.js

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

package/DEV-cjs/core/SideNavigation/SidenavSubmenuHeader.js

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

package/DEV-cjs/core/SkipToContentLink/SkipToContentLink.js

@@ -31,4 +31,5 @@ const SkipToContentLink = _react.forwardRef((props, ref) => {
     children,
   );
 });
-SkipToContentLink.displayName = 'SkipToContentLink';
+if ('development' === process.env.NODE_ENV)
+  SkipToContentLink.displayName = 'SkipToContentLink';

package/DEV-cjs/core/Slider/Slider.js

@@ -381,4 +381,4 @@ const Slider = _react.forwardRef((props, ref) => {
       ),
   );
 });
-Slider.displayName = 'Slider';
+if ('development' === process.env.NODE_ENV) Slider.displayName = 'Slider';

package/DEV-cjs/core/StatusMessage/StatusMessage.js

@@ -49,4 +49,5 @@ const StatusMessage = _react.forwardRef((props, ref) => {
     _react.createElement(_index.Box, contentProps, children),
   );
 });
-StatusMessage.displayName = 'StatusMessage';
+if ('development' === process.env.NODE_ENV)
+  StatusMessage.displayName = 'StatusMessage';

package/DEV-cjs/core/Stepper/Stepper.js

@@ -106,4 +106,4 @@ const Stepper = _react.forwardRef((props, ref) => {
       ),
   );
 });
-Stepper.displayName = 'Stepper';
+if ('development' === process.env.NODE_ENV) Stepper.displayName = 'Stepper';

package/DEV-cjs/core/Stepper/WorkflowDiagram.js

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

package/DEV-cjs/core/Surface/Surface.js

@@ -53,7 +53,8 @@ const SurfaceHeader = _react.forwardRef((props, ref) => {
     children,
   );
 });
-SurfaceHeader.displayName = 'Surface.Header';
+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);
@@ -71,7 +72,8 @@ const SurfaceBody = _react.forwardRef((props, ref) => {
     children,
   );
 });
-SurfaceBody.displayName = 'Surface.Body';
+if ('development' === process.env.NODE_ENV)
+  SurfaceBody.displayName = 'Surface.Body';
 const Surface = Object.assign(
   _react.forwardRef((props, ref) => {
     let {
@@ -113,6 +115,7 @@ const Surface = Object.assign(
     Body: SurfaceBody,
   },
 );
-Surface.displayName = 'Surface';
+if ('development' === process.env.NODE_ENV) Surface.displayName = 'Surface';
 const SurfaceContext = _react.createContext(void 0);
-SurfaceContext.displayName = 'SurfaceContext';
+if ('development' === process.env.NODE_ENV)
+  SurfaceContext.displayName = 'SurfaceContext';

package/DEV-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/DEV-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(
@@ -317,22 +352,19 @@ const Table = (props) => {
   let logWarning = (0, _index.useWarningLogger)();
   if (1 === columns.length && 'columns' in columns[0]) {
     headerGroups = _headerGroups.slice(1);
-    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)
+      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 (subComponent && data.some((item) => !!item.subRows?.length))
+  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 ariaDataAttributes = Object.entries(rest).reduce(
-    (result, [key, value]) => {
-      if (key.startsWith('data-') || key.startsWith('aria-'))
-        result[key] = value;
-      return result;
-    },
-    {},
-  );
   let areFiltersSet =
     allColumns.some(
       (column) => null != column.filterValue && '' !== column.filterValue,
@@ -347,7 +379,7 @@ const Table = (props) => {
         !isDisabled &&
         selectRowOnClick &&
         !event.isDefaultPrevented()
-      ) {
+      )
         if ('multi' === selectionMode && event.shiftKey)
           dispatch({
             type: shiftRowSelectedAction,
@@ -361,7 +393,6 @@ const Table = (props) => {
             type: singleRowSelectedAction,
             id: row.id,
           });
-      }
     },
     [
       isRowDisabled,
@@ -562,6 +593,7 @@ const Table = (props) => {
   _react.useEffect(() => {
     updateStickyState();
   }, []);
+  let captionId = _react.useId();
   return _react.createElement(
     _utils.TableInstanceContext.Provider,
     {
@@ -585,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) =>
@@ -601,6 +669,7 @@ const Table = (props) => {
         return _react.createElement(
           _index.Box,
           {
+            slot: 'iui-table-header-wrapper',
             as: 'div',
             key: headerGroupProps.key,
             ...headerWrapperProps,
@@ -656,6 +725,7 @@ const Table = (props) => {
       _react.createElement(
         _index.Box,
         {
+          slot: 'iui-table-body',
           as: 'div',
           ...bodyProps,
           ...getTableBodyProps({
@@ -667,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(
@@ -700,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, {
@@ -764,4 +824,34 @@ const Table = (props) => {
     ),
   );
 };
-Table.displayName = 'Table';
+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/DEV-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,