@itwin/itwinui-react 3.18.0 → 3.18.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 3.18.2
+
+### Patch Changes
+
+- [#2535](https://github.com/iTwin/iTwinUI/pull/2535): Fixed `Table` regression where custom content passed into `DefaultCell` was not stretching to the full cell width.
+- [#2524](https://github.com/iTwin/iTwinUI/pull/2524): Fixed `Popover` regression of unintended automatic resizing of floating content when opened.
+- [#2538](https://github.com/iTwin/iTwinUI/pull/2538): `Table`'s `caption` prop is now correctly applied.
+
+## 3.18.1
+
+### Patch Changes
+
+- [#2525](https://github.com/iTwin/iTwinUI/pull/2525): Fixed an issue in `Dialog`/`Modal` where nested floating elements (e.g. `Select` dropdown) were not interactable because they were being portaled incorrectly.
+- [#2526](https://github.com/iTwin/iTwinUI/pull/2526): `Tooltip`'s entry delay has been increased to match the exit delay. This change will help reduce the chances of a user accidentally triggering the tooltip, while also preventing multiple tooltips from showing at the same time.
+- [#2521](https://github.com/iTwin/iTwinUI/pull/2521): Fixed `Table` not working in older React versions where `useId` is not available.
+- [#2527](https://github.com/iTwin/iTwinUI/pull/2527): Fixed `Table` bug where it unintentionally tried to add `scrollToRow` to the DOM and thus led to a console error.
+- [#2512](https://github.com/iTwin/iTwinUI/pull/2512): Clicking a `MenuItem` with a submenu no longer closes the parent menu, regardless of `DropdownMenu`'s `closeOnItemClick` prop, for example.
+
 ## 3.18.0
 
 ### Minor Changes
@@ -22,6 +40,7 @@
   - [#2491](https://github.com/iTwin/iTwinUI/pull/2491): Adjusted the `z-index` value of `Popover` and other floating elements to match `Dialog`.
 
 - **Markup changes**:
+
   - [#2480](https://github.com/iTwin/iTwinUI/pull/2480): `<MenuExtraContent>` now renders a `<div>` instead of `<li>` to prevent invalid markup.
   - [#2481](https://github.com/iTwin/iTwinUI/pull/2481): `<SideNavigation>` now renders a `<nav>` as the topmost element. This creates a [navigation landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html) for assistive technology.
 

package/DEV-cjs/core/Dialog/Dialog.js

@@ -21,7 +21,7 @@ const _DialogContext = require('./DialogContext.js');
 const _DialogButtonBar = require('./DialogButtonBar.js');
 const _DialogMain = require('./DialogMain.js');
 const _index = require('../../utils/index.js');
-const DialogComponent = _react.forwardRef((props, ref) => {
+const DialogComponent = _react.forwardRef((props, forwardedRef) => {
   let {
     trapFocus = false,
     setFocus = trapFocus,
@@ -41,11 +41,7 @@ const DialogComponent = _react.forwardRef((props, ref) => {
   } = props;
   let dialogRootRef = _react.useRef(null);
   let [dialogElement, setDialogElement] = _react.useState(null);
-  let mergedRefs = (0, _index.useMergedRefs)(
-    ref,
-    dialogRootRef,
-    setDialogElement,
-  );
+  let mergedRefs = (0, _index.useMergedRefs)(forwardedRef, dialogRootRef);
   return isOpen
     ? _react.createElement(
         _DialogContext.DialogContext.Provider,
@@ -63,6 +59,8 @@ const DialogComponent = _react.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             placement,
+            dialogRootRef,
+            setDialogElement,
           },
         },
         _react.createElement(

package/DEV-cjs/core/Dialog/DialogBackdrop.js

@@ -22,11 +22,11 @@ const DialogBackdrop = _react.forwardRef((props, ref) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
   let dialogMainContext = (0, _DialogMainContext.useDialogMainContext)();
   let {
-    isVisible = dialogContext.isOpen,
-    isDismissible = dialogContext.isDismissible,
-    onClose = dialogContext.onClose,
-    closeOnExternalClick = dialogContext.closeOnExternalClick,
-    relativeTo = dialogContext.relativeTo,
+    isVisible = dialogContext?.isOpen,
+    isDismissible = dialogContext?.isDismissible,
+    onClose = dialogContext?.onClose,
+    closeOnExternalClick = dialogContext?.closeOnExternalClick,
+    relativeTo = dialogContext?.relativeTo,
     onMouseDown,
     className,
     style,

package/DEV-cjs/core/Dialog/DialogContext.js

@@ -20,4 +20,4 @@ _export(exports, {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const DialogContext = _react.createContext(void 0);
-const useDialogContext = () => _react.useContext(DialogContext) || {};
+const useDialogContext = () => _react.useContext(DialogContext);

package/DEV-cjs/core/Dialog/DialogMain.js

@@ -19,27 +19,27 @@ const _DialogContext = require('./DialogContext.js');
 const _DialogDragContext = require('./DialogDragContext.js');
 const _useDragAndDrop = require('../../utils/hooks/useDragAndDrop.js');
 const _DialogMainContext = require('./DialogMainContext.js');
-const DialogMain = _react.forwardRef((props, ref) => {
+const DialogMain = _react.forwardRef((props, forwardedRef) => {
   let dialogContext = (0, _DialogContext.useDialogContext)();
   let {
     className,
     children,
     styleType = 'default',
-    isOpen = dialogContext.isOpen,
-    isDismissible = dialogContext.isDismissible,
-    onClose = dialogContext.onClose,
-    closeOnEsc = dialogContext.closeOnEsc,
-    trapFocus = dialogContext.trapFocus,
-    setFocus = dialogContext.setFocus,
-    preventDocumentScroll = dialogContext.preventDocumentScroll,
+    isOpen = dialogContext?.isOpen,
+    isDismissible = dialogContext?.isDismissible,
+    onClose = dialogContext?.onClose,
+    closeOnEsc = dialogContext?.closeOnEsc,
+    trapFocus = dialogContext?.trapFocus,
+    setFocus = dialogContext?.setFocus,
+    preventDocumentScroll = dialogContext?.preventDocumentScroll,
     onKeyDown,
-    isDraggable = dialogContext.isDraggable,
-    isResizable = dialogContext.isResizable,
+    isDraggable = dialogContext?.isDraggable,
+    isResizable = dialogContext?.isResizable,
     style: propStyle,
-    placement = dialogContext.placement,
+    placement = dialogContext?.placement,
     ...rest
   } = props;
-  let { dialogRootRef } = dialogContext;
+  let { dialogRootRef, setDialogElement } = dialogContext || {};
   let dialogRef = _react.useRef(null);
   let previousFocusedElement = _react.useRef(null);
   let [style, setStyle] = _react.useState();
@@ -136,7 +136,12 @@ const DialogMain = _react.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: (0, _index.useMergedRefs)(dialogRef, mountRef, ref),
+      ref: (0, _index.useMergedRefs)(
+        dialogRef,
+        mountRef,
+        setDialogElement,
+        forwardedRef,
+      ),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,

package/DEV-cjs/core/Dialog/DialogTitleBar.js

@@ -27,9 +27,9 @@ const DialogTitleBar = Object.assign(
     let {
       children,
       titleText,
-      isDismissible = dialogContext.isDismissible,
-      onClose = dialogContext.onClose,
-      isDraggable = dialogContext.isDraggable,
+      isDismissible = dialogContext?.isDismissible,
+      onClose = dialogContext?.onClose,
+      isDraggable = dialogContext?.isDraggable,
       className,
       onPointerDown: onPointerDownProp,
       ...rest

package/DEV-cjs/core/Menu/MenuItem.js

@@ -37,19 +37,23 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = (0, _index.useWarningLogger)();
+  let hasSubMenu = _react.useMemo(
+    () => subMenuItems.length > 0,
+    [subMenuItems.length],
+  );
   if (
     'development' === process.env.NODE_ENV &&
     null != onClickProp &&
-    subMenuItems.length > 0
+    hasSubMenu
   )
     logWarning(
       'Passing a non-empty submenuItems array and onClick to MenuItem at the same time is not supported. This is because when a non empty submenuItems array is passed, clicking the MenuItem toggles the submenu visibility.',
     );
   let parentMenu = _react.useContext(_Menu.MenuContext);
   let dropdownMenu = _react.useContext(_DropdownMenu.DropdownMenuContext);
-  let shouldCloseMenuOnClick = _react.useContext(
-    _DropdownMenu.DropdownMenuCloseOnClickContext,
-  );
+  let shouldCloseMenuOnClick =
+    _react.useContext(_DropdownMenu.DropdownMenuCloseOnClickContext) &&
+    !hasSubMenu;
   let menuItemRef = _react.useRef(null);
   let submenuId = (0, _index.useId)();
   let popoverProps = _react.useMemo(
@@ -59,12 +63,12 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
         click: true,
         hover: true,
         listNavigation: {
-          nested: subMenuItems.length > 0,
+          nested: hasSubMenu,
           openOnArrowKeyDown: true,
         },
       },
     }),
-    [subMenuItems.length],
+    [hasSubMenu],
   );
   let onClick = () => {
     if (disabled) return;
@@ -91,8 +95,8 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
       role: role,
       tabIndex: isSelected ? 0 : -1,
       'aria-selected': isSelected,
-      'aria-haspopup': subMenuItems.length > 0 ? 'true' : void 0,
-      'aria-controls': subMenuItems.length > 0 ? submenuId : void 0,
+      'aria-haspopup': hasSubMenu ? 'true' : void 0,
+      'aria-controls': hasSubMenu ? submenuId : void 0,
       'aria-disabled': disabled,
       ...(parentMenu?.popoverGetItemProps != null
         ? parentMenu.popoverGetItemProps({
@@ -119,7 +123,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
         _react.createElement(_ListItem.ListItem.Description, null, sublabel),
     ),
     !endIcon &&
-      subMenuItems.length > 0 &&
+      hasSubMenu &&
       _react.createElement(
         _ListItem.ListItem.Icon,
         {
@@ -141,7 +145,7 @@ const MenuItem = _react.forwardRef((props, forwardedRef) => {
   return _react.createElement(
     _react.Fragment,
     null,
-    subMenuItems.length > 0 && !disabled
+    hasSubMenu && !disabled
       ? _react.createElement(
           _Menu.Menu,
           {

package/DEV-cjs/core/Popover/Popover.js

@@ -82,7 +82,6 @@ const usePopover = (options) => {
     open,
     onOpenChange,
     strategy: 'fixed',
-    transform: false,
     whileElementsMounted: _react.useMemo(
       () =>
         open
@@ -237,6 +236,7 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
     closeOnOutsideClick,
     role: 'dialog',
     middleware,
+    transform: false,
   });
   let [popoverElement, setPopoverElement] = _react.useState(null);
   let popoverRef = (0, _index.useMergedRefs)(
@@ -303,6 +303,7 @@ const Popover = _react.forwardRef((props, forwardedRef) => {
                     _index.Box,
                     {
                       className: (0, _classnames.default)(
+                        'iui-popover',
                         {
                           'iui-popover-surface': applyBackground,
                         },

package/DEV-cjs/core/Table/Table.js

@@ -99,6 +99,7 @@ const Table = (props) => {
     getRowId,
     caption = 'Table',
     role,
+    scrollToRow,
     ..._rest
   } = props;
   let { ariaRestAttributes, nonAriaRestAttributes } = _react.useMemo(
@@ -451,6 +452,7 @@ const Table = (props) => {
   let tableRef = _react.useRef(null);
   let { scrollToIndex, tableRowRef } = (0, _index1.useScrollToRow)({
     ...props,
+    scrollToRow,
     page,
   });
   let columnRefs = _react.useRef({});
@@ -593,7 +595,7 @@ const Table = (props) => {
   _react.useEffect(() => {
     updateStickyState();
   }, []);
-  let captionId = _react.useId();
+  let captionId = (0, _index.useId)();
   return _react.createElement(
     _utils.TableInstanceContext.Provider,
     {
@@ -618,7 +620,6 @@ const Table = (props) => {
           },
         }),
         role: role,
-        'aria-labelledby': captionId,
         onScroll: () => updateStickyState(),
         'data-iui-size': 'default' === density ? void 0 : density,
         ...outerAriaRestAttributes,
@@ -633,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',
           }),
@@ -649,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/DEV-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/DEV-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/DEV-cjs/core/Tooltip/Tooltip.js

@@ -26,7 +26,7 @@ const _classnames = /*#__PURE__*/ _interop_require_default._(
 const _react1 = require('@floating-ui/react');
 const _index = require('../../utils/index.js');
 const defaultTooltipDelay = {
-  open: 100,
+  open: 200,
   close: 200,
 };
 const useTooltip = (options = {}) => {

package/DEV-cjs/styles.js

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

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

@@ -12,7 +12,7 @@ import {
   Portal,
   PortalContainerContext,
 } from '../../utils/index.js';
-let DialogComponent = React.forwardRef((props, ref) => {
+let DialogComponent = React.forwardRef((props, forwardedRef) => {
   let {
     trapFocus = false,
     setFocus = trapFocus,
@@ -32,7 +32,7 @@ let DialogComponent = React.forwardRef((props, ref) => {
   } = props;
   let dialogRootRef = React.useRef(null);
   let [dialogElement, setDialogElement] = React.useState(null);
-  let mergedRefs = useMergedRefs(ref, dialogRootRef, setDialogElement);
+  let mergedRefs = useMergedRefs(forwardedRef, dialogRootRef);
   return isOpen
     ? React.createElement(
         DialogContext.Provider,
@@ -50,6 +50,8 @@ let DialogComponent = React.forwardRef((props, ref) => {
             isResizable,
             relativeTo,
             placement,
+            dialogRootRef,
+            setDialogElement,
           },
         },
         React.createElement(

package/DEV-esm/core/Dialog/DialogBackdrop.js

@@ -8,11 +8,11 @@ export const DialogBackdrop = React.forwardRef((props, ref) => {
   let dialogContext = useDialogContext();
   let dialogMainContext = useDialogMainContext();
   let {
-    isVisible = dialogContext.isOpen,
-    isDismissible = dialogContext.isDismissible,
-    onClose = dialogContext.onClose,
-    closeOnExternalClick = dialogContext.closeOnExternalClick,
-    relativeTo = dialogContext.relativeTo,
+    isVisible = dialogContext?.isOpen,
+    isDismissible = dialogContext?.isDismissible,
+    onClose = dialogContext?.onClose,
+    closeOnExternalClick = dialogContext?.closeOnExternalClick,
+    relativeTo = dialogContext?.relativeTo,
     onMouseDown,
     className,
     style,

package/DEV-esm/core/Dialog/DialogContext.js

@@ -1,3 +1,3 @@
 import * as React from 'react';
 export const DialogContext = React.createContext(void 0);
-export const useDialogContext = () => React.useContext(DialogContext) || {};
+export const useDialogContext = () => React.useContext(DialogContext);