@itwin/itwinui-react 3.18.0 → 3.18.1

package/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/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/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,
     {

package/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/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.1';
 const u = new Proxy(
   {},
   {

package/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/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/esm/core/Dialog/DialogContext.d.ts

@@ -80,14 +80,15 @@ export type DialogContextProps = {
      * Defaults to false if using `Dialog` and true if using `Modal`.
      */
     portal?: PortalProps['portal'];
-    /**
-     * Dialog root ref. For internal use.
-     */
-    dialogRootRef?: React.RefObject<HTMLDivElement | null>;
     /**
      * Determines the positioning of Dialog on page.
      */
     placement?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 };
-export declare const DialogContext: React.Context<DialogContextProps | undefined>;
-export declare const useDialogContext: () => DialogContextProps;
+type DialogContextInternalProps = {
+    dialogRootRef: React.RefObject<HTMLDivElement | null>;
+    setDialogElement: (dialogElement: HTMLElement | null) => void;
+};
+export declare const DialogContext: React.Context<(DialogContextProps & DialogContextInternalProps) | undefined>;
+export declare const useDialogContext: () => (DialogContextProps & DialogContextInternalProps) | undefined;
+export {};

package/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);

package/esm/core/Dialog/DialogMain.d.ts

@@ -11,7 +11,7 @@ export type DialogMainProps = {
      * Content of the dialog.
      */
     children: React.ReactNode;
-} & Omit<DialogContextProps, 'closeOnExternalClick' | 'dialogRootRef'>;
+} & Omit<DialogContextProps, 'closeOnExternalClick'>;
 /**
  * Dialog component which can wrap any content.
  * @example

package/esm/core/Dialog/DialogMain.js

@@ -13,27 +13,27 @@ import { useDialogContext } from './DialogContext.js';
 import { DialogDragContext } from './DialogDragContext.js';
 import { useDragAndDrop } from '../../utils/hooks/useDragAndDrop.js';
 import { DialogMainContext } from './DialogMainContext.js';
-export const DialogMain = React.forwardRef((props, ref) => {
+export const DialogMain = React.forwardRef((props, forwardedRef) => {
   let 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();
@@ -130,7 +130,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
         className,
       ),
       role: 'dialog',
-      ref: useMergedRefs(dialogRef, mountRef, ref),
+      ref: useMergedRefs(dialogRef, mountRef, setDialogElement, forwardedRef),
       onKeyDown: handleKeyDown,
       tabIndex: -1,
       'data-iui-placement': placement,

package/esm/core/Dialog/DialogTitleBar.js

@@ -13,9 +13,9 @@ export 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/esm/core/Menu/MenuItem.js

@@ -31,19 +31,22 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   let logWarning = 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(MenuContext);
   let dropdownMenu = React.useContext(DropdownMenuContext);
-  let shouldCloseMenuOnClick = React.useContext(
-    DropdownMenuCloseOnClickContext,
-  );
+  let shouldCloseMenuOnClick =
+    React.useContext(DropdownMenuCloseOnClickContext) && !hasSubMenu;
   let menuItemRef = React.useRef(null);
   let submenuId = useId();
   let popoverProps = React.useMemo(
@@ -53,12 +56,12 @@ export 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;
@@ -85,8 +88,8 @@ export 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({
@@ -112,7 +115,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
       sublabel && React.createElement(ListItem.Description, null, sublabel),
     ),
     !endIcon &&
-      subMenuItems.length > 0 &&
+      hasSubMenu &&
       React.createElement(
         ListItem.Icon,
         {
@@ -134,7 +137,7 @@ export const MenuItem = React.forwardRef((props, forwardedRef) => {
   return React.createElement(
     React.Fragment,
     null,
-    subMenuItems.length > 0 && !disabled
+    hasSubMenu && !disabled
       ? React.createElement(
           Menu,
           {

package/esm/core/Table/Table.js

@@ -23,6 +23,7 @@ import {
   useMergedRefs,
   useLatestRef,
   useVirtualScroll,
+  useId,
 } from '../../utils/index.js';
 import { TableInstanceContext } from './utils.js';
 import { TableRowMemoized } from './TableRowMemoized.js';
@@ -111,6 +112,7 @@ export const Table = (props) => {
     getRowId,
     caption = 'Table',
     role,
+    scrollToRow,
     ..._rest
   } = props;
   let { ariaRestAttributes, nonAriaRestAttributes } = React.useMemo(
@@ -456,6 +458,7 @@ export const Table = (props) => {
   let tableRef = React.useRef(null);
   let { scrollToIndex, tableRowRef } = useScrollToRow({
     ...props,
+    scrollToRow,
     page,
   });
   let columnRefs = React.useRef({});
@@ -598,7 +601,7 @@ export const Table = (props) => {
   React.useEffect(() => {
     updateStickyState();
   }, []);
-  let captionId = React.useId();
+  let captionId = useId();
   return React.createElement(
     TableInstanceContext.Provider,
     {

package/esm/core/Tooltip/Tooltip.js

@@ -26,7 +26,7 @@ import {
   useMergedRefs,
 } from '../../utils/index.js';
 export const defaultTooltipDelay = {
-  open: 100,
+  open: 200,
   close: 200,
 };
 let useTooltip = (options = {}) => {

package/esm/styles.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "3.18.0",
+  "version": "3.18.1",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",