@itwin/itwinui-react 3.19.7 → 3.20.0

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

@@ -13,8 +13,8 @@ _export(exports, {
   DefaultCell: function () {
     return DefaultCell;
   },
-  DefaultCellRendererPropsChildren: function () {
-    return DefaultCellRendererPropsChildren;
+  DefaultCellContext: function () {
+    return DefaultCellContext;
   },
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
@@ -26,7 +26,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 );
 const _index = require('../../../utils/index.js');
 const _utils = require('../utils.js');
-const DefaultCellRendererPropsChildren = _react.createContext(void 0);
+const DefaultCellContext = _react.createContext({});
 const DefaultCell = (props) => {
   let instance = _react.useContext(_utils.TableInstanceContext);
   let isCustomCell = _react.useMemo(
@@ -35,8 +35,9 @@ const DefaultCell = (props) => {
         ?.Cell !== _reacttable.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 &&
@@ -55,10 +56,33 @@ 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(
+          _index.Box,
+          {
+            className: 'iui-table-cell-start-icon',
+            key: `${cellElementKey}-start`,
+          },
+          startIcon,
+        )
+      : null,
+    end: endIcon
+      ? _react.createElement(
+          _index.Box,
+          {
+            className: 'iui-table-cell-end-icon',
+            key: `${cellElementKey}-end`,
+          },
+          endIcon,
+        )
+      : null,
+  };
   return _react.createElement(
     _index.Box,
     {
@@ -73,87 +97,41 @@ const DefaultCell = (props) => {
         ...style,
       },
     },
-    _react.createElement(
-      _index.ShadowRoot,
-      {
-        key: `${cellElementKey}-shadow-root`,
-        flush: false,
-        css: css,
-      },
-      _react.createElement('slot', {
-        name: 'start',
-      }),
-      _react.createElement(
-        TableCellContent,
-        {
-          shouldRenderWrapper: isDefaultTextCell,
-        },
-        clamp
-          ? _react.createElement(
-              'div',
-              {
-                className: _index.lineClamp.className,
-              },
-              _react.createElement('slot', null),
-            )
-          : _react.createElement('slot', null),
-      ),
-      _react.createElement('slot', {
-        name: 'end',
-      }),
-      _react.createElement('slot', {
-        name: 'shadows',
-      }),
-    ),
-    startIcon &&
-      _react.createElement(
-        _index.Box,
-        {
-          className: 'iui-table-cell-start-icon',
-          slot: 'start',
-          key: `${cellElementKey}-start`,
-        },
-        startIcon,
-      ),
-    children,
-    endIcon &&
-      _react.createElement(
-        _index.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(
+            _index.Box,
+            {
+              className: 'iui-table-cell-default-content',
+              onClick: (e) => e.stopPropagation(),
+            },
+            clamp
+              ? _react.createElement(
+                  _index.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';
-const TableCellContent = (props) => {
-  let { children, shouldRenderWrapper } = props;
-  return shouldRenderWrapper
-    ? _react.createElement(
-        'div',
-        {
-          className: '_iui-table-cell-default-content',
-          onClick: (e) => e.stopPropagation(),
-        },
-        children,
-      )
-    : children;
-};
-const 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;
-}
-${_index.lineClamp.css}
-`;

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

@@ -52,7 +52,7 @@ const ExpanderColumn = (props = {}) => {
           disabled: isDisabled?.(props.row.original),
           'aria-expanded': row.isExpanded,
         },
-        _react.createElement(_index.SvgChevronRight, null),
+        _react.createElement(_index.SvgChevronRightSmall, null),
       );
     },
     cellRenderer: (props) =>

package/cjs/core/Tabs/Tabs.js

@@ -85,11 +85,8 @@ const TabsWrapperPresentation = _react.forwardRef((props, forwardedRef) => {
   let { orientation = 'horizontal', ...rest } = props;
   return _react.createElement(_index.Box, {
     ...rest,
-    className: (0, _classnames.default)(
-      'iui-tabs-wrapper',
-      `iui-${orientation}`,
-      props.className,
-    ),
+    className: (0, _classnames.default)('iui-tabs-wrapper', props.className),
+    'data-iui-orientation': orientation,
     ref: forwardedRef,
   });
 });
@@ -290,6 +287,7 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
         if ('auto' === focusActivationMode && !props.disabled)
           setActiveValue(value);
       }),
+      'data-iui-orientation': orientation,
     },
     label ? _react.createElement(Tabs.TabLabel, null, label) : children,
   );
@@ -336,6 +334,7 @@ if ('development' === process.env.NODE_ENV)
   TabDescription.displayName = 'Tabs.TabDescription';
 const TabsActions = _react.forwardRef((props, ref) => {
   let { wrapperProps, className, children, ...rest } = props;
+  let { orientation } = (0, _index.useSafeContext)(TabsContext);
   return _react.createElement(
     _index.Box,
     {
@@ -344,12 +343,14 @@ const TabsActions = _react.forwardRef((props, ref) => {
         'iui-tabs-actions-wrapper',
         wrapperProps?.className,
       ),
+      'data-iui-orientation': orientation,
     },
     _react.createElement(
       _index.Box,
       {
         className: (0, _classnames.default)('iui-tabs-actions', className),
         ref: ref,
+        'data-iui-orientation': orientation,
         ...rest,
       },
       children,
@@ -360,7 +361,9 @@ if ('development' === process.env.NODE_ENV)
   TabsActions.displayName = 'Tabs.Actions';
 const TabsPanel = _react.forwardRef((props, ref) => {
   let { value, className, children, ...rest } = props;
-  let { activeValue, idPrefix } = (0, _index.useSafeContext)(TabsContext);
+  let { activeValue, idPrefix, orientation } = (0, _index.useSafeContext)(
+    TabsContext,
+  );
   return _react.createElement(
     _index.Box,
     {
@@ -371,6 +374,7 @@ const TabsPanel = _react.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
       id: `${idPrefix}-panel-${value.replaceAll(' ', '-')}`,
+      'data-iui-orientation': orientation,
     },
     children,
   );

package/cjs/core/Tile/Tile.d.ts

@@ -270,7 +270,7 @@ export declare const Tile: PolymorphicForwardRefComponent<"div", TileLegacyProps
      * </Tile.Wrapper>
      */
     NameIcon: PolymorphicForwardRefComponent<"div", {}>;
-    NameLabel: PolymorphicForwardRefComponent<"span", {}>;
+    NameLabel: PolymorphicForwardRefComponent<"h2", {}>;
     /**
      * Polymorphic Tile action component. Recommended to be used in `Tile.NameLabel` subcomponent.
      * Renders `a` element by default.

package/cjs/core/Tile/Tile.js

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

package/cjs/core/Toast/Toast.d.ts

@@ -40,6 +40,8 @@ export type ToastProps = {
     /**
      * Boolean indicating when the close button is visible.
      * When false, the toast will not have any close button.
+     *
+     * This prop has no effect when the toast `type` is set to `persisting`.
      */
     hasCloseButton?: boolean;
     /**

package/cjs/core/Tree/TreeNodeExpander.js

@@ -16,12 +16,8 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 );
 const _index = require('../../utils/index.js');
 const _IconButton = require('../Buttons/IconButton.js');
-const _TreeContext = require('./TreeContext.js');
 const TreeNodeExpander = _react.forwardRef((props, ref) => {
   let { isExpanded, expanderIconProps = {}, ...rest } = props;
-  let size = _react.useContext(_TreeContext.TreeContext)?.size ?? 'default';
-  let ChevronIcon =
-    'small' === size ? _index.SvgChevronRightSmall : _index.SvgChevronRight;
   return _react.createElement(
     _IconButton.IconButton,
     {
@@ -31,7 +27,7 @@ const TreeNodeExpander = _react.forwardRef((props, ref) => {
       ref: ref,
       ...rest,
     },
-    _react.createElement(ChevronIcon, {
+    _react.createElement(_index.SvgChevronRightSmall, {
       ...expanderIconProps,
       className: (0, _classnames.default)(
         'iui-tree-node-content-expander-icon',

package/cjs/styles.js

@@ -1,6 +1,6 @@
 'use strict';
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-const e = '3.19.7';
+const e = '3.20.0';
 const u = new Proxy(
   {},
   {

package/esm/core/Breadcrumbs/Breadcrumbs.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import cx from 'classnames';
 import {
-  SvgChevronRight,
   Box,
   OverflowContainer,
   useWarningLogger,
   cloneElementWithRef,
+  SvgChevronRightSmall,
 } from '../../utils/index.js';
 import { Button } from '../Buttons/Button.js';
 import { Anchor } from '../Typography/Anchor.js';
@@ -161,7 +161,7 @@ let Separator = ({ separator }) =>
       className: 'iui-breadcrumbs-separator',
       'aria-hidden': true,
     },
-    separator ?? React.createElement(SvgChevronRight, null),
+    separator ?? React.createElement(SvgChevronRightSmall, null),
   );
 let BreadcrumbsItem = React.forwardRef((props, forwardedRef) => {
   let { as: asProp, ...rest } = props;

package/esm/core/ComboBox/ComboBox.js

@@ -20,8 +20,12 @@ import { ComboBoxMenuItem } from './ComboBoxMenuItem.js';
 let isMultipleEnabled = (variable, multiple) =>
   multiple && (Array.isArray(variable) || null == variable);
 let isSingleOnChange = (onChange, multiple) => !multiple;
-let getOptionId = (option, idPrefix) =>
-  option.id ?? `${idPrefix}-option-${option.label.replace(/\s/g, '-')}`;
+let 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, '-')}`;
+};
 export const ComboBox = React.forwardRef((props, forwardedRef) => {
   let idPrefix = useId();
   let defaultFilterFunction = React.useCallback(

package/esm/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/esm/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/esm/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/esm/core/Dialog/DialogTitleBarTitle.js

@@ -1,4 +1,4 @@
 import { polymorphic } from '../../utils/index.js';
-export const DialogTitleBarTitle = polymorphic.div('iui-dialog-title');
+export const DialogTitleBarTitle = polymorphic.h2('iui-dialog-title');
 if ('development' === process.env.NODE_ENV)
   DialogTitleBarTitle.displayName = 'Dialog.TitleBar.Title';

package/esm/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/esm/core/DropdownMenu/DropdownMenu.js

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

package/esm/core/ExpandableBlock/ExpandableBlock.js

@@ -2,13 +2,13 @@ import cx from 'classnames';
 import * as React from 'react';
 import {
   StatusIconMap,
-  SvgChevronRight,
   Box,
   useSafeContext,
   polymorphic,
   mergeEventHandlers,
   ButtonBase,
   useId,
+  SvgChevronRightSmall,
 } from '../../utils/index.js';
 import { Icon } from '../Icon/Icon.js';
 import { LinkBox } from '../LinkAction/LinkAction.js';
@@ -128,7 +128,7 @@ let ExpandableBlockExpandIcon = React.forwardRef((props, forwardedRef) => {
       ...rest,
     },
     children ??
-      React.createElement(SvgChevronRight, {
+      React.createElement(SvgChevronRightSmall, {
         'aria-hidden': true,
       }),
   );

package/esm/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/esm/core/InformationPanel/InformationPanelHeader.js

@@ -15,7 +15,6 @@ export const InformationPanelHeader = React.forwardRef(
       React.createElement(
         Box,
         {
-          as: 'span',
           className: 'iui-information-header-label',
         },
         children,

package/esm/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/esm/core/Table/SubRowExpander.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';
 export const SubRowExpander = (props) => {
   let { cell, isDisabled, cellProps, expanderCell, density, ...rest } = props;
@@ -27,7 +27,7 @@ export const SubRowExpander = (props) => {
             disabled: isDisabled,
             ...rest,
           },
-          React.createElement(SvgChevronRight, {
+          React.createElement(SvgChevronRightSmall, {
             style: {
               transform: cell.row.isExpanded ? 'rotate(90deg)' : void 0,
             },

package/esm/core/Table/Table.js

@@ -567,7 +567,7 @@ export 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,
   });
   useLayoutEffect(() => {

package/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, cellContent, expander, 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/esm/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`.