@itwin/itwinui-react 3.17.0 → 3.17.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 3.17.2
+
+### Patch Changes
+
+- [#2442](https://github.com/iTwin/iTwinUI/pull/2442): Removed a leftover `@layer` name, which was originally intended to support _very_ old versions of iTwinUI.
+- [#2443](https://github.com/iTwin/iTwinUI/pull/2443): Fixed bug in `Modal` where focus was sometimes jumping from a modal child to the modal itself.
+- [#2431](https://github.com/iTwin/iTwinUI/pull/2431): Force text wrapping for long words. Affected components: `Text`, `NonIdealState`, `Stepper`, `WorkflowDiagram`.
+- [#2446](https://github.com/iTwin/iTwinUI/pull/2446): Fixed background color in menus when the [theme bridge](https://github.com/iTwin/iTwinUI/wiki/iTwinUI-v5-theme-bridge) is enabled.
+
+## 3.17.1
+
+### Patch Changes
+
+- [#2436](https://github.com/iTwin/iTwinUI/pull/2436): The **theme bridge** has been updated to handle the breaking changes introduced in `@itwin/itwinui-react@5.0.0-alpha.6`.
+- [#2430](https://github.com/iTwin/iTwinUI/pull/2430): Fixed bug in `SplitButton` where the `dropdownMenuProps.middleware` prop was not respected.
+- [#2430](https://github.com/iTwin/iTwinUI/pull/2430): Fixed a `SplitButton` bug where `dropdownMenuProps` was accidentally being added to the DOM.
+- [#2430](https://github.com/iTwin/iTwinUI/pull/2430): Added missing `div` props in `dropdownMenuProps`'s type for `DropdownButton` and `SplitButton`.
+
 ## 3.17.0
 
 ### Minor Changes

package/DEV-cjs/core/Buttons/SplitButton.js

@@ -29,9 +29,11 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
     children,
     wrapperProps,
     menuButtonProps,
+    dropdownMenuProps,
     portal = true,
     ...rest
   } = props;
+  let { middleware, ...dropdownMenuPropsRest } = dropdownMenuProps || {};
   let [visible, setVisible] = _react.useState(false);
   let menuContent = _react.useMemo(() => {
     if ('function' == typeof menuItems)
@@ -43,6 +45,7 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
     onVisibleChange: setVisible,
     placement: menuPlacement,
     matchWidth: true,
+    middleware,
   };
   let labelId = (0, _index.useId)();
   let trigger = _react.createElement(
@@ -96,9 +99,13 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
         trigger: trigger,
         portal: portal,
         positionReference: positionReference,
-        onKeyDown: ({ key }) => {
-          if ('Tab' === key) setVisible(false);
-        },
+        ...dropdownMenuPropsRest,
+        onKeyDown: (0, _index.mergeEventHandlers)(
+          dropdownMenuPropsRest?.onKeyDown,
+          ({ key }) => {
+            if ('Tab' === key) setVisible(false);
+          },
+        ),
       },
       menuContent,
     ),

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

@@ -107,7 +107,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
       dialogRef.current?.focus({
         preventScroll: true,
       });
-  }, [dialogRef, previousFocusedElement, setFocus]);
+  }, [setFocus]);
   let beforeClose = _react.useCallback(() => {
     if (
       dialogRef.current?.contains(

package/DEV-cjs/styles.js

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

package/DEV-cjs/utils/components/FocusTrap.js

@@ -11,37 +11,42 @@ Object.defineProperty(exports, 'FocusTrap', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _focusable = require('../functions/focusable.js');
-const _react1 = require('../functions/react.js');
 const FocusTrap = (props) => {
   let { children } = props;
-  let childRef = _react.useRef(void 0);
-  let getFirstLastFocusables = () => {
-    let elements = (0, _focusable.getTabbableElements)(childRef.current);
+  let firstFocusTrapRef = _react.useRef(null);
+  let getFirstLastFocusables = _react.useCallback(() => {
+    let childrenElement = firstFocusTrapRef.current?.nextElementSibling;
+    let elements = (0, _focusable.getTabbableElements)(childrenElement);
     let firstElement = elements[0];
     let lastElement = elements[(elements.length || 1) - 1];
     return [firstElement, lastElement];
-  };
-  let onFirstFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === firstElement) lastElement?.focus();
-    else firstElement?.focus();
-  };
-  let onLastFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === lastElement) firstElement?.focus();
-    else lastElement?.focus();
-  };
+  }, []);
+  let onFirstFocus = _react.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === firstElement) lastElement?.focus();
+      else firstElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
+  let onLastFocus = _react.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === lastElement) firstElement?.focus();
+      else lastElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
   return _react.createElement(
     _react.Fragment,
     null,
     _react.createElement('div', {
+      ref: firstFocusTrapRef,
       tabIndex: 0,
       onFocus: onFirstFocus,
       'aria-hidden': true,
     }),
-    (0, _react1.cloneElementWithRef)(children, () => ({
-      ref: childRef,
-    })),
+    children,
     _react.createElement('div', {
       tabIndex: 0,
       onFocus: onLastFocus,

package/DEV-esm/core/Buttons/SplitButton.js

@@ -4,6 +4,7 @@ import { Button } from './Button.js';
 import { IconButton } from './IconButton.js';
 import {
   Box,
+  mergeEventHandlers,
   SvgCaretDownSmall,
   SvgCaretUpSmall,
   useId,
@@ -20,9 +21,11 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     children,
     wrapperProps,
     menuButtonProps,
+    dropdownMenuProps,
     portal = true,
     ...rest
   } = props;
+  let { middleware, ...dropdownMenuPropsRest } = dropdownMenuProps || {};
   let [visible, setVisible] = React.useState(false);
   let menuContent = React.useMemo(() => {
     if ('function' == typeof menuItems)
@@ -34,6 +37,7 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     onVisibleChange: setVisible,
     placement: menuPlacement,
     matchWidth: true,
+    middleware,
   };
   let labelId = useId();
   let trigger = React.createElement(
@@ -87,9 +91,13 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         trigger: trigger,
         portal: portal,
         positionReference: positionReference,
-        onKeyDown: ({ key }) => {
-          if ('Tab' === key) setVisible(false);
-        },
+        ...dropdownMenuPropsRest,
+        onKeyDown: mergeEventHandlers(
+          dropdownMenuPropsRest?.onKeyDown,
+          ({ key }) => {
+            if ('Tab' === key) setVisible(false);
+          },
+        ),
       },
       menuContent,
     ),

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

@@ -101,7 +101,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
       dialogRef.current?.focus({
         preventScroll: true,
       });
-  }, [dialogRef, previousFocusedElement, setFocus]);
+  }, [setFocus]);
   let beforeClose = React.useCallback(() => {
     if (
       dialogRef.current?.contains(

package/DEV-esm/styles.js

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

package/DEV-esm/utils/components/FocusTrap.js

@@ -1,36 +1,41 @@
 import * as React from 'react';
 import { getTabbableElements } from '../functions/focusable.js';
-import { cloneElementWithRef } from '../functions/react.js';
 export const FocusTrap = (props) => {
   let { children } = props;
-  let childRef = React.useRef(void 0);
-  let getFirstLastFocusables = () => {
-    let elements = getTabbableElements(childRef.current);
+  let firstFocusTrapRef = React.useRef(null);
+  let getFirstLastFocusables = React.useCallback(() => {
+    let childrenElement = firstFocusTrapRef.current?.nextElementSibling;
+    let elements = getTabbableElements(childrenElement);
     let firstElement = elements[0];
     let lastElement = elements[(elements.length || 1) - 1];
     return [firstElement, lastElement];
-  };
-  let onFirstFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === firstElement) lastElement?.focus();
-    else firstElement?.focus();
-  };
-  let onLastFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === lastElement) firstElement?.focus();
-    else lastElement?.focus();
-  };
+  }, []);
+  let onFirstFocus = React.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === firstElement) lastElement?.focus();
+      else firstElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
+  let onLastFocus = React.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === lastElement) firstElement?.focus();
+      else lastElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
   return React.createElement(
     React.Fragment,
     null,
     React.createElement('div', {
+      ref: firstFocusTrapRef,
       tabIndex: 0,
       onFocus: onFirstFocus,
       'aria-hidden': true,
     }),
-    cloneElementWithRef(children, () => ({
-      ref: childRef,
-    })),
+    children,
     React.createElement('div', {
       tabIndex: 0,
       onFocus: onLastFocus,

package/cjs/core/Buttons/DropdownButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from './Button.js';
-import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type DropdownButtonProps = {
     /**
@@ -16,9 +16,9 @@ export type DropdownButtonProps = {
      */
     styleType?: 'default' | 'borderless' | 'high-visibility';
     /**
-     * Props for the `DropdownMenu` which extends `PopoverProps`.
+     * Props for the `DropdownMenu` which extends the props of `Popover`.
      */
-    dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
+    dropdownMenuProps?: Omit<React.ComponentProps<typeof DropdownMenu>, 'menuItems' | 'children'>;
 } & Omit<ButtonProps, 'styleType' | 'endIcon'>;
 /**
  * Button that opens a DropdownMenu.

package/cjs/core/Buttons/SplitButton.d.ts

@@ -31,7 +31,7 @@ export type SplitButtonProps = ButtonProps & {
     /**
      * Props to customize menu behavior.
      */
-    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'>;
+    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'> & React.ComponentProps<'div'>;
 } & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.

package/cjs/core/Buttons/SplitButton.js

@@ -29,9 +29,11 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
     children,
     wrapperProps,
     menuButtonProps,
+    dropdownMenuProps,
     portal = true,
     ...rest
   } = props;
+  let { middleware, ...dropdownMenuPropsRest } = dropdownMenuProps || {};
   let [visible, setVisible] = _react.useState(false);
   let menuContent = _react.useMemo(() => {
     if ('function' == typeof menuItems)
@@ -43,6 +45,7 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
     onVisibleChange: setVisible,
     placement: menuPlacement,
     matchWidth: true,
+    middleware,
   };
   let labelId = (0, _index.useId)();
   let trigger = _react.createElement(
@@ -96,9 +99,13 @@ const SplitButton = _react.forwardRef((props, forwardedRef) => {
         trigger: trigger,
         portal: portal,
         positionReference: positionReference,
-        onKeyDown: ({ key }) => {
-          if ('Tab' === key) setVisible(false);
-        },
+        ...dropdownMenuPropsRest,
+        onKeyDown: (0, _index.mergeEventHandlers)(
+          dropdownMenuPropsRest?.onKeyDown,
+          ({ key }) => {
+            if ('Tab' === key) setVisible(false);
+          },
+        ),
       },
       menuContent,
     ),

package/cjs/core/Dialog/DialogMain.js

@@ -107,7 +107,7 @@ const DialogMain = _react.forwardRef((props, ref) => {
       dialogRef.current?.focus({
         preventScroll: true,
       });
-  }, [dialogRef, previousFocusedElement, setFocus]);
+  }, [setFocus]);
   let beforeClose = _react.useCallback(() => {
     if (
       dialogRef.current?.contains(

package/cjs/styles.js

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

package/cjs/utils/components/FocusTrap.js

@@ -11,37 +11,42 @@ Object.defineProperty(exports, 'FocusTrap', {
 const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require('react'));
 const _focusable = require('../functions/focusable.js');
-const _react1 = require('../functions/react.js');
 const FocusTrap = (props) => {
   let { children } = props;
-  let childRef = _react.useRef(void 0);
-  let getFirstLastFocusables = () => {
-    let elements = (0, _focusable.getTabbableElements)(childRef.current);
+  let firstFocusTrapRef = _react.useRef(null);
+  let getFirstLastFocusables = _react.useCallback(() => {
+    let childrenElement = firstFocusTrapRef.current?.nextElementSibling;
+    let elements = (0, _focusable.getTabbableElements)(childrenElement);
     let firstElement = elements[0];
     let lastElement = elements[(elements.length || 1) - 1];
     return [firstElement, lastElement];
-  };
-  let onFirstFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === firstElement) lastElement?.focus();
-    else firstElement?.focus();
-  };
-  let onLastFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === lastElement) firstElement?.focus();
-    else lastElement?.focus();
-  };
+  }, []);
+  let onFirstFocus = _react.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === firstElement) lastElement?.focus();
+      else firstElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
+  let onLastFocus = _react.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === lastElement) firstElement?.focus();
+      else lastElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
   return _react.createElement(
     _react.Fragment,
     null,
     _react.createElement('div', {
+      ref: firstFocusTrapRef,
       tabIndex: 0,
       onFocus: onFirstFocus,
       'aria-hidden': true,
     }),
-    (0, _react1.cloneElementWithRef)(children, () => ({
-      ref: childRef,
-    })),
+    children,
     _react.createElement('div', {
       tabIndex: 0,
       onFocus: onLastFocus,

package/esm/core/Buttons/DropdownButton.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { ButtonProps } from './Button.js';
-import type { DropdownMenuProps } from '../DropdownMenu/DropdownMenu.js';
+import { DropdownMenu } from '../DropdownMenu/DropdownMenu.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 export type DropdownButtonProps = {
     /**
@@ -16,9 +16,9 @@ export type DropdownButtonProps = {
      */
     styleType?: 'default' | 'borderless' | 'high-visibility';
     /**
-     * Props for the `DropdownMenu` which extends `PopoverProps`.
+     * Props for the `DropdownMenu` which extends the props of `Popover`.
      */
-    dropdownMenuProps?: Omit<DropdownMenuProps, 'menuItems' | 'children'>;
+    dropdownMenuProps?: Omit<React.ComponentProps<typeof DropdownMenu>, 'menuItems' | 'children'>;
 } & Omit<ButtonProps, 'styleType' | 'endIcon'>;
 /**
  * Button that opens a DropdownMenu.

package/esm/core/Buttons/SplitButton.d.ts

@@ -31,7 +31,7 @@ export type SplitButtonProps = ButtonProps & {
     /**
      * Props to customize menu behavior.
      */
-    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'>;
+    dropdownMenuProps?: Pick<Parameters<typeof usePopover>[0], 'middleware'> & React.ComponentProps<'div'>;
 } & Pick<PortalProps, 'portal'>;
 /**
  * Split button component with a DropdownMenu.

package/esm/core/Buttons/SplitButton.js

@@ -4,6 +4,7 @@ import { Button } from './Button.js';
 import { IconButton } from './IconButton.js';
 import {
   Box,
+  mergeEventHandlers,
   SvgCaretDownSmall,
   SvgCaretUpSmall,
   useId,
@@ -20,9 +21,11 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     children,
     wrapperProps,
     menuButtonProps,
+    dropdownMenuProps,
     portal = true,
     ...rest
   } = props;
+  let { middleware, ...dropdownMenuPropsRest } = dropdownMenuProps || {};
   let [visible, setVisible] = React.useState(false);
   let menuContent = React.useMemo(() => {
     if ('function' == typeof menuItems)
@@ -34,6 +37,7 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
     onVisibleChange: setVisible,
     placement: menuPlacement,
     matchWidth: true,
+    middleware,
   };
   let labelId = useId();
   let trigger = React.createElement(
@@ -87,9 +91,13 @@ export const SplitButton = React.forwardRef((props, forwardedRef) => {
         trigger: trigger,
         portal: portal,
         positionReference: positionReference,
-        onKeyDown: ({ key }) => {
-          if ('Tab' === key) setVisible(false);
-        },
+        ...dropdownMenuPropsRest,
+        onKeyDown: mergeEventHandlers(
+          dropdownMenuPropsRest?.onKeyDown,
+          ({ key }) => {
+            if ('Tab' === key) setVisible(false);
+          },
+        ),
       },
       menuContent,
     ),

package/esm/core/Dialog/DialogMain.js

@@ -101,7 +101,7 @@ export const DialogMain = React.forwardRef((props, ref) => {
       dialogRef.current?.focus({
         preventScroll: true,
       });
-  }, [dialogRef, previousFocusedElement, setFocus]);
+  }, [setFocus]);
   let beforeClose = React.useCallback(() => {
     if (
       dialogRef.current?.contains(

package/esm/styles.js

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

package/esm/utils/components/FocusTrap.js

@@ -1,36 +1,41 @@
 import * as React from 'react';
 import { getTabbableElements } from '../functions/focusable.js';
-import { cloneElementWithRef } from '../functions/react.js';
 export const FocusTrap = (props) => {
   let { children } = props;
-  let childRef = React.useRef(void 0);
-  let getFirstLastFocusables = () => {
-    let elements = getTabbableElements(childRef.current);
+  let firstFocusTrapRef = React.useRef(null);
+  let getFirstLastFocusables = React.useCallback(() => {
+    let childrenElement = firstFocusTrapRef.current?.nextElementSibling;
+    let elements = getTabbableElements(childrenElement);
     let firstElement = elements[0];
     let lastElement = elements[(elements.length || 1) - 1];
     return [firstElement, lastElement];
-  };
-  let onFirstFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === firstElement) lastElement?.focus();
-    else firstElement?.focus();
-  };
-  let onLastFocus = (event) => {
-    let [firstElement, lastElement] = getFirstLastFocusables();
-    if (event.relatedTarget === lastElement) firstElement?.focus();
-    else lastElement?.focus();
-  };
+  }, []);
+  let onFirstFocus = React.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === firstElement) lastElement?.focus();
+      else firstElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
+  let onLastFocus = React.useCallback(
+    (event) => {
+      let [firstElement, lastElement] = getFirstLastFocusables();
+      if (event.relatedTarget === lastElement) firstElement?.focus();
+      else lastElement?.focus();
+    },
+    [getFirstLastFocusables],
+  );
   return React.createElement(
     React.Fragment,
     null,
     React.createElement('div', {
+      ref: firstFocusTrapRef,
       tabIndex: 0,
       onFocus: onFirstFocus,
       'aria-hidden': true,
     }),
-    cloneElementWithRef(children, () => ({
-      ref: childRef,
-    })),
+    children,
     React.createElement('div', {
       tabIndex: 0,
       onFocus: onLastFocus,

package/package.json

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