@itwin/itwinui-react 3.19.7 → 3.20.0

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.19.7",
+  "version": "3.20.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -100,8 +100,8 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-require-extensions": "^0.1.3",
     "jsdom": "^26.0.0",
-    "react": "19.1.0",
-    "react-dom": "19.1.0",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "5",
     "vite": "~6.4.1",
     "vitest": "^2.1.9"
@@ -109,10 +109,10 @@
   "peerDependencies": {
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0",
-    "@stratakit/foundations": ">=0.4.0"
+    "@stratakit/mui": ">=0.1.1"
   },
   "peerDependenciesMeta": {
-    "@stratakit/foundations": {
+    "@stratakit/mui": {
       "optional": true
     }
   },