@itwin/itwinui-react 3.17.3 → 3.18.0

package/esm/core/Select/Select.js

@@ -27,6 +27,7 @@ export const Select = React.forwardRef((props, forwardedRef) => {
     ref: forwardedRef,
   });
 });
+if ('development' === process.env.NODE_ENV) Select.displayName = 'Select';
 let NativeSelect = React.forwardRef((props, forwardedRef) => {
   let {
     triggerProps,
@@ -131,6 +132,36 @@ let 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) => {
@@ -156,34 +187,9 @@ let 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)
@@ -196,7 +202,7 @@ let 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;
@@ -213,12 +219,18 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
     return index >= 0 ? index : 0;
   }, [options, value]);
   let tagRenderer = React.useCallback(
-    (item) =>
+    (option) =>
       React.createElement(SelectTag, {
-        key: item.label,
-        label: item.label,
+        key: option.label,
+        label: option.label,
+        onRemove: () => {
+          handleOptionSelection(option, {
+            isSelected: true,
+          });
+          selectRef.current?.focus();
+        },
       }),
-    [],
+    [handleOptionSelection],
   );
   let popover = usePopover({
     visible: isOpen,
@@ -269,6 +281,7 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
             },
             triggerProps?.className,
           ),
+          'data-iui-multi': multiple,
         },
         (!selectedItems || 0 === selectedItems.length) &&
           React.createElement(
@@ -280,10 +293,8 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
             placeholder,
           ),
         isMultipleEnabled(selectedItems, multiple)
-          ? React.createElement(MultipleSelectButton, {
-              selectedItems: selectedItems,
-              selectedItemsRenderer: selectedItemRenderer,
-              tagRenderer: tagRenderer,
+          ? React.createElement(AutoclearingHiddenLiveRegion, {
+              text: liveRegionSelection,
             })
           : React.createElement(SingleSelectButton, {
               selectedItem: selectedItems,
@@ -294,9 +305,12 @@ let CustomSelect = React.forwardRef((props, forwardedRef) => {
         disabled: disabled,
         isOpen: isOpen,
       }),
-      multiple
-        ? React.createElement(AutoclearingHiddenLiveRegion, {
-            text: liveRegionSelection,
+      isMultipleEnabled(selectedItems, multiple)
+        ? React.createElement(MultipleSelectButton, {
+            selectedItems: selectedItems,
+            selectedItemsRenderer: selectedItemRenderer,
+            tagRenderer: tagRenderer,
+            size: 'small' === size ? 'small' : void 0,
           })
         : null,
     ),
@@ -395,6 +409,7 @@ let MultipleSelectButton = ({
   selectedItems,
   selectedItemsRenderer,
   tagRenderer,
+  size,
 }) => {
   let selectedItemsElements = React.useMemo(() => {
     if (!selectedItems) return [];
@@ -404,19 +419,18 @@ let MultipleSelectButton = ({
     React.Fragment,
     null,
     selectedItems &&
-      selectedItemsRenderer &&
-      selectedItemsRenderer(selectedItems),
-    selectedItems &&
-      !selectedItemsRenderer &&
       React.createElement(
         Box,
         {
           as: 'span',
           className: 'iui-content',
         },
-        React.createElement(SelectTagContainer, {
-          tags: selectedItemsElements,
-        }),
+        selectedItemsRenderer
+          ? selectedItemsRenderer(selectedItems)
+          : React.createElement(SelectTagContainer, {
+              tags: selectedItemsElements,
+              'data-iui-size': size,
+            }),
       ),
   );
 };

package/esm/core/Select/SelectTag.js

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

package/esm/core/SideNavigation/SideNavigation.d.ts

@@ -52,7 +52,7 @@ type SideNavigationProps = {
     /**
      * Passes props for SideNav wrapper.
      */
-    wrapperProps?: React.ComponentProps<'div'>;
+    wrapperProps?: React.ComponentProps<'nav'>;
     /**
      * Passes props for SideNav content.
      */
@@ -68,6 +68,10 @@ type SideNavigationProps = {
 };
 /**
  * Left side navigation menu component.
+ *
+ * Renders a `<nav>` landmark, which can be labelled using `wrapperProps['aria-labelledby']`
+ * or `wrapperProps['aria-label']`.
+ *
  * @example
  * <SideNavigation
  *   items={[

package/esm/core/SideNavigation/SideNavigation.js

@@ -44,6 +44,7 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     React.createElement(
       Box,
       {
+        as: 'nav',
         ...wrapperProps,
         className: cx('iui-side-navigation-wrapper', wrapperProps?.className),
         ref: forwardedRef,
@@ -56,7 +57,6 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
         React.createElement(
           Box,
           {
-            as: 'div',
             className: cx(
               'iui-side-navigation',
               {
@@ -101,3 +101,5 @@ export const SideNavigation = React.forwardRef((props, forwardedRef) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SideNavigation.displayName = 'SideNavigation';

package/esm/core/SideNavigation/SidenavButton.js

@@ -43,3 +43,5 @@ export const SidenavButton = React.forwardRef((props, ref) => {
         sidenavButton,
       );
 });
+if ('development' === process.env.NODE_ENV)
+  SidenavButton.displayName = 'SidenavButton';

package/esm/core/SideNavigation/SidenavSubmenu.js

@@ -19,3 +19,5 @@ export const SidenavSubmenu = React.forwardRef((props, ref) => {
     ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SidenavSubmenu.displayName = 'SidenavSubmenu';

package/esm/core/SideNavigation/SidenavSubmenuHeader.js

@@ -27,3 +27,5 @@ export const SidenavSubmenuHeader = React.forwardRef((props, forwardedRef) => {
       ),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SidenavSubmenuHeader.displayName = 'SidenavSubmenuHeader';

package/esm/core/SkipToContentLink/SkipToContentLink.js

@@ -14,3 +14,5 @@ export const SkipToContentLink = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SkipToContentLink.displayName = 'SkipToContentLink';

package/esm/core/Slider/Slider.js

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

package/esm/core/StatusMessage/StatusMessage.js

@@ -35,3 +35,5 @@ export const StatusMessage = React.forwardRef((props, ref) => {
     React.createElement(Box, contentProps, children),
   );
 });
+if ('development' === process.env.NODE_ENV)
+  StatusMessage.displayName = 'StatusMessage';

package/esm/core/Stepper/Stepper.js

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

package/esm/core/Stepper/WorkflowDiagram.js

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

package/esm/core/Surface/Surface.js

@@ -39,6 +39,8 @@ let SurfaceHeader = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SurfaceHeader.displayName = 'Surface.Header';
 let SurfaceBody = React.forwardRef((props, ref) => {
   let { children, className, isPadded = false, ...rest } = props;
   let { setHasLayout } = useSafeContext(SurfaceContext);
@@ -56,6 +58,8 @@ let SurfaceBody = React.forwardRef((props, ref) => {
     children,
   );
 });
+if ('development' === process.env.NODE_ENV)
+  SurfaceBody.displayName = 'Surface.Body';
 export const Surface = Object.assign(
   React.forwardRef((props, ref) => {
     let {
@@ -97,4 +101,7 @@ export const Surface = Object.assign(
     Body: SurfaceBody,
   },
 );
+if ('development' === process.env.NODE_ENV) Surface.displayName = 'Surface';
 let SurfaceContext = React.createContext(void 0);
+if ('development' === process.env.NODE_ENV)
+  SurfaceContext.displayName = 'SurfaceContext';

package/esm/core/Table/ColumnHeader.js

@@ -100,26 +100,26 @@ export const ColumnHeader = React.forwardRef((props, forwardedRef) => {
     React.createElement(
       React.Fragment,
       null,
-      React.createElement(
-        ShadowRoot,
-        null,
-        'string' == typeof column.Header
-          ? React.createElement(
+      'string' == typeof column.Header
+        ? React.createElement(
+            ShadowRoot,
+            null,
+            React.createElement(
               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/esm/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(() => [
  *   {