@itwin/itwinui-react 3.17.1 → 3.17.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # 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

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.1';
+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/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.1';
+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/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.1';
+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/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.1';
+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.1",
+  "version": "3.17.2",
   "author": "Bentley Systems",
   "license": "MIT",
   "type": "module",