@itwin/itwinui-react 3.18.1 → 3.18.2

package/cjs/core/Table/Table.js

@@ -620,7 +620,6 @@ const Table = (props) => {
           },
         }),
         role: role,
-        'aria-labelledby': captionId,
         onScroll: () => updateStickyState(),
         'data-iui-size': 'default' === density ? void 0 : density,
         ...outerAriaRestAttributes,
@@ -635,10 +634,15 @@ const Table = (props) => {
             role: 'table',
             ...innerAriaRestAttributes,
             ...tableProps,
+            'aria-labelledby': captionId,
           },
-          _react.createElement('slot', {
-            name: 'caption',
-          }),
+          _react.createElement(
+            _VisuallyHidden.VisuallyHidden,
+            {
+              id: captionId,
+            },
+            caption,
+          ),
           _react.createElement('slot', {
             name: 'iui-table-header-wrapper',
           }),
@@ -651,14 +655,6 @@ const Table = (props) => {
         }),
         _react.createElement('slot', null),
       ),
-      _react.createElement(
-        _VisuallyHidden.VisuallyHidden,
-        {
-          slot: 'caption',
-          id: captionId,
-        },
-        caption,
-      ),
       headerGroups.map((headerGroup) => {
         headerGroup.headers = headerGroup.headers.filter(
           (header) =>

package/cjs/core/Table/TableCell.js

@@ -19,6 +19,7 @@ const _SubRowExpander = require('./SubRowExpander.js');
 const _index = require('./columns/index.js');
 const _index1 = require('./cells/index.js');
 const _index2 = require('../../utils/index.js');
+const _DefaultCell = require('./cells/DefaultCell.js');
 const TableCell = (props) => {
   let {
     cell,
@@ -54,63 +55,97 @@ const TableCell = (props) => {
       ...(0, _utils.getStickyStyle)(cell.column, tableInstance.visibleColumns),
     },
   });
-  let cellProps = {
-    ...tableInstance,
-    ...{
+  let cellProps = _react.useMemo(
+    () => ({
+      ...tableInstance,
+      ...{
+        cell,
+        row: cell.row,
+        value: cell.value,
+        column: cell.column,
+      },
+    }),
+    [cell, tableInstance],
+  );
+  let cellContent = _react.useMemo(
+    () =>
+      _react.createElement(
+        _react.Fragment,
+        null,
+        tableHasSubRows &&
+          hasSubRowExpander &&
+          cell.row.canExpand &&
+          _react.createElement(_SubRowExpander.SubRowExpander, {
+            cell: cell,
+            isDisabled: isDisabled,
+            cellProps: cellProps,
+            expanderCell: expanderCell,
+            density: density,
+            slot: 'start',
+          }),
+        cell.render('Cell'),
+      ),
+    [
       cell,
-      row: cell.row,
-      value: cell.value,
-      column: cell.column,
-    },
-  };
-  let cellContent = _react.createElement(
-    _react.Fragment,
-    null,
-    tableHasSubRows &&
-      hasSubRowExpander &&
-      cell.row.canExpand &&
-      _react.createElement(_SubRowExpander.SubRowExpander, {
-        cell: cell,
-        isDisabled: isDisabled,
-        cellProps: cellProps,
-        expanderCell: expanderCell,
-        density: density,
-        slot: 'start',
-      }),
-    cell.render('Cell'),
+      cellProps,
+      density,
+      expanderCell,
+      hasSubRowExpander,
+      isDisabled,
+      tableHasSubRows,
+    ],
   );
-  let cellRendererProps = {
-    cellElementProps,
-    cellProps,
-    children: _react.createElement(
-      _react.Fragment,
-      null,
+  let defaultCellRendererChildren = _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,
-      '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',
-        }),
-    ),
-  };
+      tableInstance.state.sticky.isScrolledToLeft,
+      tableInstance.state.sticky.isScrolledToRight,
+    ],
+  );
+  let cellRendererProps = _react.useMemo(
+    () => ({
+      cellElementProps,
+      cellProps,
+      children: defaultCellRendererChildren,
+    }),
+    [cellElementProps, cellProps, defaultCellRendererChildren],
+  );
   return _react.createElement(
     _react.Fragment,
     null,
-    cell.column.cellRenderer
-      ? cell.column.cellRenderer({
-          ...cellRendererProps,
-          isDisabled: () => isDisabled,
-        })
-      : _react.createElement(_index1.DefaultCell, {
-          ...cellRendererProps,
-          isDisabled: () => isDisabled,
-        }),
+    _react.createElement(
+      _DefaultCell.DefaultCellRendererPropsChildren.Provider,
+      {
+        value: defaultCellRendererChildren,
+      },
+      cell.column.cellRenderer
+        ? cell.column.cellRenderer({
+            ...cellRendererProps,
+            isDisabled: () => isDisabled,
+          })
+        : _react.createElement(_index1.DefaultCell, {
+            ...cellRendererProps,
+            isDisabled: () => isDisabled,
+          }),
+    ),
   );
 };

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

@@ -21,6 +21,7 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
      */
     clamp?: boolean;
 } & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
+export declare const DefaultCellRendererPropsChildren: React.Context<React.ReactNode>;
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.

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

@@ -2,11 +2,20 @@
 Object.defineProperty(exports, '__esModule', {
   value: true,
 });
-Object.defineProperty(exports, 'DefaultCell', {
-  enumerable: true,
-  get: function () {
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  DefaultCell: function () {
     return DefaultCell;
   },
+  DefaultCellRendererPropsChildren: function () {
+    return DefaultCellRendererPropsChildren;
+  },
 });
 const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
@@ -17,6 +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 DefaultCell = (props) => {
   let instance = _react.useContext(_utils.TableInstanceContext);
   let isCustomCell = _react.useMemo(
@@ -25,6 +35,8 @@ const DefaultCell = (props) => {
         ?.Cell !== _reacttable.defaultColumn.Cell,
     [instance, props.cellProps.column.id],
   );
+  let isCellRendererChildrenCustom =
+    _react.useContext(DefaultCellRendererPropsChildren) !== props.children;
   let {
     cellElementProps: {
       className: cellElementClassName,
@@ -39,7 +51,9 @@ const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = 'string' == typeof cellProps.value && !isCustomCell,
+    clamp = 'string' == typeof cellProps.value &&
+      !isCustomCell &&
+      !isCellRendererChildrenCustom,
     ...rest
   } = props;
   let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
@@ -68,10 +82,9 @@ const DefaultCell = (props) => {
         name: 'start',
       }),
       _react.createElement(
-        'div',
+        TableCellContent,
         {
-          className: '_iui-table-cell-main-content',
-          onClick: (e) => e.stopPropagation(),
+          shouldRenderWrapper: isCellRendererChildrenCustom,
         },
         clamp
           ? _react.createElement(
@@ -113,12 +126,25 @@ const DefaultCell = (props) => {
 };
 if ('development' === process.env.NODE_ENV)
   DefaultCell.displayName = 'DefaultCell';
+const TableCellContent = (props) => {
+  let { children, shouldRenderWrapper } = props;
+  return shouldRenderWrapper
+    ? children
+    : _react.createElement(
+        'div',
+        {
+          className: '_iui-table-cell-default-content',
+          onClick: (e) => e.stopPropagation(),
+        },
+        children,
+      );
+};
 const css = `
-._iui-table-cell-main-content {
+._iui-table-cell-default-content {
   position: relative;
   isolation: isolate;
 }
-._iui-table-cell-main-content::before {
+._iui-table-cell-default-content::before {
   content: '';
   display: block;
   position: absolute;

package/cjs/styles.js

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

package/esm/core/Popover/Popover.js

@@ -86,7 +86,6 @@ export const usePopover = (options) => {
     open,
     onOpenChange,
     strategy: 'fixed',
-    transform: false,
     whileElementsMounted: React.useMemo(
       () =>
         open ? (...args) => autoUpdate(...args, autoUpdateOptions) : void 0,
@@ -238,6 +237,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
     closeOnOutsideClick,
     role: 'dialog',
     middleware,
+    transform: false,
   });
   let [popoverElement, setPopoverElement] = React.useState(null);
   let popoverRef = useMergedRefs(
@@ -304,6 +304,7 @@ export const Popover = React.forwardRef((props, forwardedRef) => {
                     Box,
                     {
                       className: cx(
+                        'iui-popover',
                         {
                           'iui-popover-surface': applyBackground,
                         },

package/esm/core/Table/Table.js

@@ -626,7 +626,6 @@ export const Table = (props) => {
           },
         }),
         role: role,
-        'aria-labelledby': captionId,
         onScroll: () => updateStickyState(),
         'data-iui-size': 'default' === density ? void 0 : density,
         ...outerAriaRestAttributes,
@@ -641,10 +640,15 @@ export const Table = (props) => {
             role: 'table',
             ...innerAriaRestAttributes,
             ...tableProps,
+            'aria-labelledby': captionId,
           },
-          React.createElement('slot', {
-            name: 'caption',
-          }),
+          React.createElement(
+            VisuallyHidden,
+            {
+              id: captionId,
+            },
+            caption,
+          ),
           React.createElement('slot', {
             name: 'iui-table-header-wrapper',
           }),
@@ -657,14 +661,6 @@ export const Table = (props) => {
         }),
         React.createElement('slot', null),
       ),
-      React.createElement(
-        VisuallyHidden,
-        {
-          slot: 'caption',
-          id: captionId,
-        },
-        caption,
-      ),
       headerGroups.map((headerGroup) => {
         headerGroup.headers = headerGroup.headers.filter(
           (header) =>

package/esm/core/Table/TableCell.js

@@ -5,6 +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';
 export const TableCell = (props) => {
   let {
     cell,
@@ -33,63 +34,97 @@ export const TableCell = (props) => {
       ...getStickyStyle(cell.column, tableInstance.visibleColumns),
     },
   });
-  let cellProps = {
-    ...tableInstance,
-    ...{
+  let cellProps = React.useMemo(
+    () => ({
+      ...tableInstance,
+      ...{
+        cell,
+        row: cell.row,
+        value: cell.value,
+        column: cell.column,
+      },
+    }),
+    [cell, tableInstance],
+  );
+  let cellContent = React.useMemo(
+    () =>
+      React.createElement(
+        React.Fragment,
+        null,
+        tableHasSubRows &&
+          hasSubRowExpander &&
+          cell.row.canExpand &&
+          React.createElement(SubRowExpander, {
+            cell: cell,
+            isDisabled: isDisabled,
+            cellProps: cellProps,
+            expanderCell: expanderCell,
+            density: density,
+            slot: 'start',
+          }),
+        cell.render('Cell'),
+      ),
+    [
       cell,
-      row: cell.row,
-      value: cell.value,
-      column: cell.column,
-    },
-  };
-  let cellContent = React.createElement(
-    React.Fragment,
-    null,
-    tableHasSubRows &&
-      hasSubRowExpander &&
-      cell.row.canExpand &&
-      React.createElement(SubRowExpander, {
-        cell: cell,
-        isDisabled: isDisabled,
-        cellProps: cellProps,
-        expanderCell: expanderCell,
-        density: density,
-        slot: 'start',
-      }),
-    cell.render('Cell'),
+      cellProps,
+      density,
+      expanderCell,
+      hasSubRowExpander,
+      isDisabled,
+      tableHasSubRows,
+    ],
   );
-  let cellRendererProps = {
-    cellElementProps,
-    cellProps,
-    children: React.createElement(
-      React.Fragment,
-      null,
+  let defaultCellRendererChildren = 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,
-      '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',
-        }),
-    ),
-  };
+      tableInstance.state.sticky.isScrolledToLeft,
+      tableInstance.state.sticky.isScrolledToRight,
+    ],
+  );
+  let cellRendererProps = React.useMemo(
+    () => ({
+      cellElementProps,
+      cellProps,
+      children: defaultCellRendererChildren,
+    }),
+    [cellElementProps, cellProps, defaultCellRendererChildren],
+  );
   return React.createElement(
     React.Fragment,
     null,
-    cell.column.cellRenderer
-      ? cell.column.cellRenderer({
-          ...cellRendererProps,
-          isDisabled: () => isDisabled,
-        })
-      : React.createElement(DefaultCell, {
-          ...cellRendererProps,
-          isDisabled: () => isDisabled,
-        }),
+    React.createElement(
+      DefaultCellRendererPropsChildren.Provider,
+      {
+        value: defaultCellRendererChildren,
+      },
+      cell.column.cellRenderer
+        ? cell.column.cellRenderer({
+            ...cellRendererProps,
+            isDisabled: () => isDisabled,
+          })
+        : React.createElement(DefaultCell, {
+            ...cellRendererProps,
+            isDisabled: () => isDisabled,
+          }),
+    ),
   );
 };

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

@@ -21,6 +21,7 @@ export type DefaultCellProps<T extends Record<string, unknown>> = {
      */
     clamp?: boolean;
 } & CellRendererProps<T> & React.ComponentPropsWithoutRef<'div'>;
+export declare const DefaultCellRendererPropsChildren: React.Context<React.ReactNode>;
 /**
  * Default cell.
  * It should be passed to `cellRenderer`.

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

@@ -3,6 +3,7 @@ import { defaultColumn } from 'react-table';
 import cx from 'classnames';
 import { Box, LineClamp, ShadowRoot } from '../../../utils/index.js';
 import { TableInstanceContext } from '../utils.js';
+export const DefaultCellRendererPropsChildren = React.createContext(void 0);
 export const DefaultCell = (props) => {
   let instance = React.useContext(TableInstanceContext);
   let isCustomCell = React.useMemo(
@@ -11,6 +12,8 @@ export const DefaultCell = (props) => {
         ?.Cell !== defaultColumn.Cell,
     [instance, props.cellProps.column.id],
   );
+  let isCellRendererChildrenCustom =
+    React.useContext(DefaultCellRendererPropsChildren) !== props.children;
   let {
     cellElementProps: {
       className: cellElementClassName,
@@ -25,7 +28,9 @@ export const DefaultCell = (props) => {
     className,
     style,
     status,
-    clamp = 'string' == typeof cellProps.value && !isCustomCell,
+    clamp = 'string' == typeof cellProps.value &&
+      !isCustomCell &&
+      !isCellRendererChildrenCustom,
     ...rest
   } = props;
   let { key: cellElementKey, ...cellElementPropsRest } = cellElementProps;
@@ -54,10 +59,9 @@ export const DefaultCell = (props) => {
         name: 'start',
       }),
       React.createElement(
-        'div',
+        TableCellContent,
         {
-          className: '_iui-table-cell-main-content',
-          onClick: (e) => e.stopPropagation(),
+          shouldRenderWrapper: isCellRendererChildrenCustom,
         },
         clamp
           ? React.createElement(
@@ -99,12 +103,25 @@ export const DefaultCell = (props) => {
 };
 if ('development' === process.env.NODE_ENV)
   DefaultCell.displayName = 'DefaultCell';
+let TableCellContent = (props) => {
+  let { children, shouldRenderWrapper } = props;
+  return shouldRenderWrapper
+    ? children
+    : React.createElement(
+        'div',
+        {
+          className: '_iui-table-cell-default-content',
+          onClick: (e) => e.stopPropagation(),
+        },
+        children,
+      );
+};
 let css = `
-._iui-table-cell-main-content {
+._iui-table-cell-default-content {
   position: relative;
   isolation: isolate;
 }
-._iui-table-cell-main-content::before {
+._iui-table-cell-default-content::before {
   content: '';
   display: block;
   position: absolute;

package/esm/styles.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.18.1",
+  "version": "3.18.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",
@@ -103,7 +103,7 @@
     "react": "19.1.0",
     "react-dom": "19.1.0",
     "typescript": "5",
-    "vite": "~6.2.5",
+    "vite": "~6.3.4",
     "vitest": "^2.1.9"
   },
   "peerDependencies": {