@itwin/itwinui-react 3.19.7 → 3.20.1

package/DEV-esm/core/Table/TableCell.js

@@ -5,7 +5,7 @@ import { SubRowExpander } from './SubRowExpander.js';
 import { SELECTION_CELL_ID } from './columns/index.js';
 import { DefaultCell } from './cells/index.js';
 import { Box } from '../../utils/index.js';
-import { DefaultCellRendererPropsChildren } from './cells/DefaultCell.js';
+import { DefaultCellContext } from './cells/DefaultCell.js';
 export const TableCell = (props) => {
   let {
     cell,
@@ -46,24 +46,18 @@ export const TableCell = (props) => {
     }),
     [cell, tableInstance],
   );
-  let cellContent = React.useMemo(
+  let expander = React.useMemo(
     () =>
-      React.createElement(
-        React.Fragment,
-        null,
-        tableHasSubRows &&
-          hasSubRowExpander &&
-          cell.row.canExpand &&
-          React.createElement(SubRowExpander, {
+      tableHasSubRows && hasSubRowExpander && cell.row.canExpand
+        ? React.createElement(SubRowExpander, {
             cell: cell,
             isDisabled: isDisabled,
             cellProps: cellProps,
             expanderCell: expanderCell,
             density: density,
             slot: 'start',
-          }),
-        cell.render('Cell'),
-      ),
+          })
+        : null,
     [
       cell,
       cellProps,
@@ -74,32 +68,34 @@ export const TableCell = (props) => {
       tableHasSubRows,
     ],
   );
-  let defaultCellRendererChildren = React.useMemo(
+  let cellContent = React.useMemo(() => cell.render('Cell'), [cell]);
+  let shadows = React.useMemo(
     () =>
       React.createElement(
         React.Fragment,
         null,
-        cellContent,
         'left' === cell.column.sticky &&
           tableInstance.state.sticky.isScrolledToRight &&
           React.createElement(Box, {
             className: 'iui-table-cell-shadow-right',
-            slot: 'shadows',
           }),
         'right' === cell.column.sticky &&
           tableInstance.state.sticky.isScrolledToLeft &&
           React.createElement(Box, {
             className: 'iui-table-cell-shadow-left',
-            slot: 'shadows',
           }),
       ),
     [
       cell.column.sticky,
-      cellContent,
       tableInstance.state.sticky.isScrolledToLeft,
       tableInstance.state.sticky.isScrolledToRight,
     ],
   );
+  let defaultCellRendererChildren = React.useMemo(
+    () =>
+      React.createElement(React.Fragment, null, expander, cellContent, shadows),
+    [cellContent, expander, shadows],
+  );
   let cellRendererProps = React.useMemo(
     () => ({
       cellElementProps,
@@ -112,9 +108,16 @@ export const TableCell = (props) => {
     React.Fragment,
     null,
     React.createElement(
-      DefaultCellRendererPropsChildren.Provider,
+      DefaultCellContext.Provider,
       {
-        value: defaultCellRendererChildren,
+        value: React.useMemo(
+          () => ({
+            children: defaultCellRendererChildren,
+            expander,
+            shadows,
+          }),
+          [defaultCellRendererChildren, expander, shadows],
+        ),
       },
       cell.column.cellRenderer
         ? cell.column.cellRenderer({

package/DEV-esm/core/Table/cells/DefaultCell.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { defaultColumn } from 'react-table';
 import cx from 'classnames';
-import { Box, lineClamp, ShadowRoot } from '../../../utils/index.js';
+import { Box } from '../../../utils/index.js';
 import { TableInstanceContext } from '../utils.js';
-export const DefaultCellRendererPropsChildren = React.createContext(void 0);
+export const DefaultCellContext = React.createContext({});
 export const DefaultCell = (props) => {
   let instance = React.useContext(TableInstanceContext);
   let isCustomCell = React.useMemo(
@@ -12,8 +12,9 @@ export const DefaultCell = (props) => {
         ?.Cell !== defaultColumn.Cell,
     [instance, props.cellProps.column.id],
   );
+  let defaultCellContext = React.useContext(DefaultCellContext);
   let isCellRendererChildrenCustom =
-    React.useContext(DefaultCellRendererPropsChildren) !== props.children;
+    defaultCellContext.children !== props.children;
   let isDefaultTextCell =
     'string' == typeof props.cellProps.value &&
     !isCustomCell &&
@@ -32,10 +33,33 @@ export const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = isDefaultTextCell,
+    text = isDefaultTextCell ? cellProps.value : void 0,
+    clamp = !!text,
     ...rest
   } = props;
   let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
+  let decorations = {
+    start: startIcon
+      ? React.createElement(
+          Box,
+          {
+            className: 'iui-table-cell-start-icon',
+            key: `${cellElementKey}-start`,
+          },
+          startIcon,
+        )
+      : null,
+    end: endIcon
+      ? React.createElement(
+          Box,
+          {
+            className: 'iui-table-cell-end-icon',
+            key: `${cellElementKey}-end`,
+          },
+          endIcon,
+        )
+      : null,
+  };
   return React.createElement(
     Box,
     {
@@ -50,87 +74,41 @@ export const DefaultCell = (props) => {
         ...style,
       },
     },
-    React.createElement(
-      ShadowRoot,
-      {
-        key: `${cellElementKey}-shadow-root`,
-        flush: false,
-        css: css,
-      },
-      React.createElement('slot', {
-        name: 'start',
-      }),
-      React.createElement(
-        TableCellContent,
-        {
-          shouldRenderWrapper: isDefaultTextCell,
-        },
-        clamp
-          ? React.createElement(
-              'div',
-              {
-                className: lineClamp.className,
-              },
-              React.createElement('slot', null),
-            )
-          : React.createElement('slot', null),
-      ),
-      React.createElement('slot', {
-        name: 'end',
-      }),
-      React.createElement('slot', {
-        name: 'shadows',
-      }),
-    ),
-    startIcon &&
-      React.createElement(
-        Box,
-        {
-          className: 'iui-table-cell-start-icon',
-          slot: 'start',
-          key: `${cellElementKey}-start`,
-        },
-        startIcon,
-      ),
-    children,
-    endIcon &&
-      React.createElement(
-        Box,
-        {
-          className: 'iui-table-cell-end-icon',
-          slot: 'end',
-          key: `${cellElementKey}-end`,
-        },
-        endIcon,
-      ),
+    (() => {
+      if (text)
+        return React.createElement(
+          React.Fragment,
+          null,
+          decorations.start,
+          defaultCellContext.expander,
+          React.createElement(
+            Box,
+            {
+              className: 'iui-table-cell-default-content',
+              onClick: (e) => e.stopPropagation(),
+            },
+            clamp
+              ? React.createElement(
+                  Box,
+                  {
+                    className: 'iui-line-clamp',
+                  },
+                  text,
+                )
+              : text,
+          ),
+          decorations.end,
+          defaultCellContext.shadows,
+        );
+      return React.createElement(
+        React.Fragment,
+        null,
+        decorations.start,
+        children,
+        decorations.end,
+      );
+    })(),
   );
 };
 if ('development' === process.env.NODE_ENV)
   DefaultCell.displayName = 'DefaultCell';
-let TableCellContent = (props) => {
-  let { children, shouldRenderWrapper } = props;
-  return shouldRenderWrapper
-    ? React.createElement(
-        'div',
-        {
-          className: '_iui-table-cell-default-content',
-          onClick: (e) => e.stopPropagation(),
-        },
-        children,
-      )
-    : children;
-};
-let css = `
-._iui-table-cell-default-content {
-  position: relative;
-  isolation: isolate;
-}
-._iui-table-cell-default-content::before {
-  content: '';
-  display: block;
-  position: absolute;
-  inset: -6px;
-  z-index: -1;
-}
-${lineClamp.css}
-`;

package/DEV-esm/core/Table/columns/expanderColumn.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { SvgChevronRight } from '../../../utils/index.js';
+import { SvgChevronRightSmall } from '../../../utils/index.js';
 import { IconButton } from '../../Buttons/IconButton.js';
 import { DefaultCell } from '../cells/index.js';
 export const EXPANDER_CELL_ID = 'iui-table-expander';
@@ -32,7 +32,7 @@ export const ExpanderColumn = (props = {}) => {
           disabled: isDisabled?.(props.row.original),
           'aria-expanded': row.isExpanded,
         },
-        React.createElement(SvgChevronRight, null),
+        React.createElement(SvgChevronRightSmall, null),
       );
     },
     cellRenderer: (props) =>

package/DEV-esm/core/Tabs/Tabs.js

@@ -72,7 +72,8 @@ let TabsWrapperPresentation = React.forwardRef((props, forwardedRef) => {
   let { orientation = 'horizontal', ...rest } = props;
   return React.createElement(Box, {
     ...rest,
-    className: cx('iui-tabs-wrapper', `iui-${orientation}`, props.className),
+    className: cx('iui-tabs-wrapper', props.className),
+    'data-iui-orientation': orientation,
     ref: forwardedRef,
   });
 });
@@ -267,6 +268,7 @@ let Tab = React.forwardRef((props, forwardedRef) => {
         if ('auto' === focusActivationMode && !props.disabled)
           setActiveValue(value);
       }),
+      'data-iui-orientation': orientation,
     },
     label ? React.createElement(Tabs.TabLabel, null, label) : children,
   );
@@ -313,17 +315,20 @@ if ('development' === process.env.NODE_ENV)
   TabDescription.displayName = 'Tabs.TabDescription';
 let TabsActions = React.forwardRef((props, ref) => {
   let { wrapperProps, className, children, ...rest } = props;
+  let { orientation } = useSafeContext(TabsContext);
   return React.createElement(
     Box,
     {
       ...wrapperProps,
       className: cx('iui-tabs-actions-wrapper', wrapperProps?.className),
+      'data-iui-orientation': orientation,
     },
     React.createElement(
       Box,
       {
         className: cx('iui-tabs-actions', className),
         ref: ref,
+        'data-iui-orientation': orientation,
         ...rest,
       },
       children,
@@ -334,7 +339,7 @@ if ('development' === process.env.NODE_ENV)
   TabsActions.displayName = 'Tabs.Actions';
 let TabsPanel = React.forwardRef((props, ref) => {
   let { value, className, children, ...rest } = props;
-  let { activeValue, idPrefix } = useSafeContext(TabsContext);
+  let { activeValue, idPrefix, orientation } = useSafeContext(TabsContext);
   return React.createElement(
     Box,
     {
@@ -345,6 +350,7 @@ let TabsPanel = React.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
       id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+      'data-iui-orientation': orientation,
     },
     children,
   );

package/DEV-esm/core/Tile/Tile.js

@@ -188,7 +188,7 @@ let TileNameIcon = React.forwardRef((props, forwardedRef) => {
 });
 if ('development' === process.env.NODE_ENV)
   TileNameIcon.displayName = 'Tile.NameIcon';
-let TileNameLabel = polymorphic.span('iui-tile-name-label');
+let TileNameLabel = polymorphic.h2('iui-tile-name-label');
 if ('development' === process.env.NODE_ENV)
   TileNameLabel.displayName = 'Tile.NameLabel';
 let TileContentArea = polymorphic.div('iui-tile-content');
@@ -221,7 +221,6 @@ let TileMoreOptions = React.forwardRef((props, forwardedRef) => {
       {
         onVisibleChange: setIsMenuVisible,
         menuItems: children,
-        closeOnItemClick: true,
       },
       React.createElement(
         IconButton,

package/DEV-esm/core/Tree/TreeNodeExpander.js

@@ -1,12 +1,9 @@
 import * as React from 'react';
 import cx from 'classnames';
-import { SvgChevronRight, SvgChevronRightSmall } from '../../utils/index.js';
+import { SvgChevronRightSmall } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
-import { TreeContext } from './TreeContext.js';
 export const TreeNodeExpander = React.forwardRef((props, ref) => {
   let { isExpanded, expanderIconProps = {}, ...rest } = props;
-  let size = React.useContext(TreeContext)?.size ?? 'default';
-  let ChevronIcon = 'small' === size ? SvgChevronRightSmall : SvgChevronRight;
   return React.createElement(
     IconButton,
     {
@@ -16,7 +13,7 @@ export const TreeNodeExpander = React.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
     },
-    React.createElement(ChevronIcon, {
+    React.createElement(SvgChevronRightSmall, {
       ...expanderIconProps,
       className: cx(
         'iui-tree-node-content-expander-icon',

package/DEV-esm/styles.js

@@ -1,4 +1,4 @@
-const t = '3.19.7';
+const t = '3.20.1';
 const u = new Proxy(
   {},
   {

package/cjs/core/Breadcrumbs/Breadcrumbs.js

@@ -169,7 +169,7 @@ const Separator = ({ separator }) =>
       className: 'iui-breadcrumbs-separator',
       'aria-hidden': true,
     },
-    separator ?? _react.createElement(_index.SvgChevronRight, null),
+    separator ?? _react.createElement(_index.SvgChevronRightSmall, null),
   );
 const BreadcrumbsItem = _react.forwardRef((props, forwardedRef) => {
   let { as: asProp, ...rest } = props;

package/cjs/core/ComboBox/ComboBox.js

@@ -24,8 +24,12 @@ const _ComboBoxMenuItem = require('./ComboBoxMenuItem.js');
 const isMultipleEnabled = (variable, multiple) =>
   multiple && (Array.isArray(variable) || null == variable);
 const isSingleOnChange = (onChange, multiple) => !multiple;
-const getOptionId = (option, idPrefix) =>
-  option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+const getOptionId = (option, idPrefix) => {
+  if (option.id) return option.id;
+  if ('string' == typeof option.value || 'number' == typeof option.value)
+    return `${idPrefix}-option-${option.value.toString().replace(/\s/g, '-')}`;
+  return `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+};
 const ComboBox = _react.forwardRef((props, forwardedRef) => {
   let idPrefix = (0, _index.useId)();
   let defaultFilterFunction = _react.useCallback(

package/cjs/core/Dialog/Dialog.d.ts

@@ -36,7 +36,7 @@ export declare const Dialog: PolymorphicForwardRefComponent<"div", DialogProps>
         children?: React.ReactNode;
         titleText?: React.ReactNode;
     } & Pick<DialogContextProps, "onClose" | "isDismissible" | "isDraggable">> & {
-        Title: PolymorphicForwardRefComponent<"div", {}>;
+        Title: PolymorphicForwardRefComponent<"h2", {}>;
     };
     Content: PolymorphicForwardRefComponent<"div", {}>;
     ButtonBar: PolymorphicForwardRefComponent<"div", {}>;

package/cjs/core/Dialog/DialogTitleBar.d.ts

@@ -29,6 +29,6 @@ type DialogTitleBarProps = {
  * </Dialog.TitleBar>
  */
 export declare const DialogTitleBar: PolymorphicForwardRefComponent<"div", DialogTitleBarProps> & {
-    Title: PolymorphicForwardRefComponent<"div", {}>;
+    Title: PolymorphicForwardRefComponent<"h2", {}>;
 };
 export {};

package/cjs/core/Dialog/DialogTitleBarTitle.d.ts

@@ -5,4 +5,4 @@
  *   <Dialog.TitleBar.Title>My dialog title</Dialog.TitleBar.Title>
  * </Dialog.TitleBar>
  */
-export declare const DialogTitleBarTitle: import("../../utils/props.js").PolymorphicForwardRefComponent<"div", {}>;
+export declare const DialogTitleBarTitle: import("../../utils/props.js").PolymorphicForwardRefComponent<"h2", {}>;

package/cjs/core/Dialog/DialogTitleBarTitle.js

@@ -9,6 +9,6 @@ Object.defineProperty(exports, 'DialogTitleBarTitle', {
   },
 });
 const _index = require('../../utils/index.js');
-const DialogTitleBarTitle = _index.polymorphic.div('iui-dialog-title');
+const DialogTitleBarTitle = _index.polymorphic.h2('iui-dialog-title');
 if ('development' === process.env.NODE_ENV)
   DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';

package/cjs/core/DropdownMenu/DropdownMenu.d.ts

@@ -30,7 +30,7 @@ export type DropdownMenuProps = {
     };
     /**
      * If `true`, closes the `DropdownMenu` when any descendant `MenuItem` is clicked.
-     * @default false
+     * @default true
      */
     closeOnItemClick?: boolean;
 } & Pick<Parameters<typeof usePopover>[0], 'visible' | 'onVisibleChange' | 'placement' | 'matchWidth'> & Pick<React.ComponentProps<typeof Menu>, 'positionReference'> & Pick<PortalProps, 'portal'>;

package/cjs/core/DropdownMenu/DropdownMenu.js

@@ -48,7 +48,7 @@ const DropdownMenuContent = _react.forwardRef((props, forwardedRef) => {
     onVisibleChange,
     portal = true,
     middleware,
-    closeOnItemClick = false,
+    closeOnItemClick = true,
     ...rest
   } = props;
   let [visible, setVisible] = (0, _index.useControlledState)(

package/cjs/core/ExpandableBlock/ExpandableBlock.js

@@ -147,7 +147,7 @@ const ExpandableBlockExpandIcon = _react.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     children ??
-      _react.createElement(_index.SvgChevronRight, {
+      _react.createElement(_index.SvgChevronRightSmall, {
         'aria-hidden': true,
       }),
   );

package/cjs/core/InformationPanel/InformationPanelHeader.d.ts

@@ -36,7 +36,7 @@ type InformationPanelHeaderProps = {
  *     </>
  *   )}
  * >
- *   <Text variant='subheading'>InfoPanel heading</Text>
+ *   <Text variant='subheading' as='h2'>InfoPanel heading</Text>
  * </InformationPanelHeader>
  */
 export declare const InformationPanelHeader: PolymorphicForwardRefComponent<"div", InformationPanelHeaderProps>;

package/cjs/core/InformationPanel/InformationPanelHeader.js

@@ -28,7 +28,6 @@ const InformationPanelHeader = _react.forwardRef((props, forwardedRef) => {
     _react.createElement(
       _index.Box,
       {
-        as: 'span',
         className: 'iui-information-header-label',
       },
       children,

package/cjs/core/StatusMessage/StatusMessage.d.ts

@@ -5,7 +5,7 @@ type StatusMessageProps = {
     /**
      * Custom icon to be displayed at the beginning.
      *
-     * - It will default to the `status` icon, if `status` is set.
+     * - It will default to the `status` icon, if `status` is set. Else, it defaults to no icon.
      * - If `startIcon` is set to `null`, no icon will be displayed, even if `status` is set.
      */
     startIcon?: React.JSX.Element | null;

package/cjs/core/Table/SubRowExpander.js

@@ -38,7 +38,7 @@ const SubRowExpander = (props) => {
             disabled: isDisabled,
             ...rest,
           },
-          _react.createElement(_index.SvgChevronRight, {
+          _react.createElement(_index.SvgChevronRightSmall, {
             style: {
               transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0,
             },

package/cjs/core/Table/Table.js

@@ -561,7 +561,7 @@ const Table = (props) => {
     count: page.length,
     getScrollElement: () => tableRef.current,
     estimateSize: () => rowHeight,
-    getItemKey: (index) => page[index].id,
+    getItemKey: _react.useCallback((index) => page[index].id, [page]),
     overscan: 1,
   });
   (0, _index.useLayoutEffect)(() => {

package/cjs/core/Table/TableCell.js

@@ -67,24 +67,18 @@ const TableCell = (props) => {
     }),
     [cell, tableInstance],
   );
-  let cellContent = _react.useMemo(
+  let expander = _react.useMemo(
     () =>
-      _react.createElement(
-        _react.Fragment,
-        null,
-        tableHasSubRows &&
-          hasSubRowExpander &&
-          cell.row.canExpand &&
-          _react.createElement(_SubRowExpander.SubRowExpander, {
+      tableHasSubRows && hasSubRowExpander && cell.row.canExpand
+        ? _react.createElement(_SubRowExpander.SubRowExpander, {
             cell: cell,
             isDisabled: isDisabled,
             cellProps: cellProps,
             expanderCell: expanderCell,
             density: density,
             slot: 'start',
-          }),
-        cell.render('Cell'),
-      ),
+          })
+        : null,
     [
       cell,
       cellProps,
@@ -95,32 +89,40 @@ const TableCell = (props) => {
       tableHasSubRows,
     ],
   );
-  let defaultCellRendererChildren = _react.useMemo(
+  let cellContent = _react.useMemo(() => cell.render('Cell'), [cell]);
+  let shadows = _react.useMemo(
     () =>
       _react.createElement(
         _react.Fragment,
         null,
-        cellContent,
         'left' === cell.column.sticky &&
           tableInstance.state.sticky.isScrolledToRight &&
           _react.createElement(_index2.Box, {
             className: 'iui-table-cell-shadow-right',
-            slot: 'shadows',
           }),
         'right' === cell.column.sticky &&
           tableInstance.state.sticky.isScrolledToLeft &&
           _react.createElement(_index2.Box, {
             className: 'iui-table-cell-shadow-left',
-            slot: 'shadows',
           }),
       ),
     [
       cell.column.sticky,
-      cellContent,
       tableInstance.state.sticky.isScrolledToLeft,
       tableInstance.state.sticky.isScrolledToRight,
     ],
   );
+  let defaultCellRendererChildren = _react.useMemo(
+    () =>
+      _react.createElement(
+        _react.Fragment,
+        null,
+        expander,
+        cellContent,
+        shadows,
+      ),
+    [cellContent, expander, shadows],
+  );
   let cellRendererProps = _react.useMemo(
     () => ({
       cellElementProps,
@@ -133,9 +135,16 @@ const TableCell = (props) => {
     _react.Fragment,
     null,
     _react.createElement(
-      _DefaultCell.DefaultCellRendererPropsChildren.Provider,
+      _DefaultCell.DefaultCellContext.Provider,
       {
-        value: defaultCellRendererChildren,
+        value: _react.useMemo(
+          () => ({
+            children: defaultCellRendererChildren,
+            expander,
+            shadows,
+          }),
+          [defaultCellRendererChildren, expander, shadows],
+        ),
       },
       cell.column.cellRenderer
         ? cell.column.cellRenderer({

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

@@ -16,12 +16,23 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
     /**
      * Should the contents of the cell be clamped after a certain number of lines?
      *
-     * Will be enabled by default if the cell content is a string and a custom `Cell`
-     * is not specified in the column object.
+     * Will be enabled by default if the `text` prop is used, or if the cell content
+     * is a string and a custom `Cell` is not specified in the column object.
      */
     clamp?: boolean;
+    /**
+     * Main text content displayed inside the cell. This takes precedence over `children`.
+     *
+     * This will be conditionally wrapped with additional elements for better text selection
+     * experience and also for line clamping (if `clamp` prop is not set to `false`).
+     */
+    text?: string;
 } & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
-export declare const DefaultCellRendererPropsChildren: React.Context<React.ReactNode>;
+export declare const DefaultCellContext: React.Context<{
+    children?: React.ReactNode;
+    expander?: React.ReactNode;
+    shadows?: React.ReactNode;
+}>;
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.