@itwin/itwinui-react 3.16.4 → 3.16.6

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 3.16.6
+
+### Patch Changes
+
+- [#2411](https://github.com/iTwin/iTwinUI/pull/2411): Fixed `Panels.Trigger` not working in older React versions where `useId` is not available.
+- [#2407](https://github.com/iTwin/iTwinUI/pull/2407): Increased contrast (i.e. opacity) of light theme's text selection background. This also affects some other opacities of other components (e.g. shadows and hover backgrounds).
+
+## 3.16.5
+
+### Patch Changes
+
+- [#2402](https://github.com/iTwin/iTwinUI/pull/2402): Fixed an issue in `Tabs` where it wasn't recalculating the active stripe position when a new tab was asynchronously added to the tablist.
+
 ## 3.16.4
 
 ### Patch Changes

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

@@ -170,7 +170,7 @@ const PanelTrigger = (props) => {
     panels,
   } = (0, _index.useSafeContext)(PanelsWrapperContext);
   let { id: panelId } = (0, _index.useSafeContext)(PanelContext);
-  let fallbackId = _react.useId();
+  let fallbackId = (0, _index.useId)();
   let triggerId = children.props.id || fallbackId;
   let onClick = _react.useCallback(() => {
     if (null == activePanel) return;

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

@@ -176,7 +176,15 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
       });
     };
     if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  }, [
+    type,
+    orientation,
+    isActive,
+    tabsWidth,
+    setStripeProperties,
+    tablistRef,
+    value,
+  ]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);

package/DEV-cjs/styles.js

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

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

@@ -12,6 +12,7 @@ import {
   useWarningLogger,
   useLayoutEffect,
   useLatestRef,
+  useId,
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Flex } from '../Flex/Flex.js';
@@ -156,7 +157,7 @@ let PanelTrigger = (props) => {
     panels,
   } = useSafeContext(PanelsWrapperContext);
   let { id: panelId } = useSafeContext(PanelContext);
-  let fallbackId = React.useId();
+  let fallbackId = useId();
   let triggerId = children.props.id || fallbackId;
   let onClick = React.useCallback(() => {
     if (null == activePanel) return;

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

@@ -162,7 +162,15 @@ let Tab = React.forwardRef((props, forwardedRef) => {
       });
     };
     if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  }, [
+    type,
+    orientation,
+    isActive,
+    tabsWidth,
+    setStripeProperties,
+    tablistRef,
+    value,
+  ]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);

package/DEV-esm/styles.js

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

package/cjs/core/Panels/Panels.js

@@ -166,7 +166,7 @@ const PanelTrigger = (props) => {
     panels,
   } = (0, _index.useSafeContext)(PanelsWrapperContext);
   let { id: panelId } = (0, _index.useSafeContext)(PanelContext);
-  let fallbackId = _react.useId();
+  let fallbackId = (0, _index.useId)();
   let triggerId = children.props.id || fallbackId;
   let onClick = _react.useCallback(() => {
     if (null == activePanel) return;

package/cjs/core/Tabs/Tabs.js

@@ -174,7 +174,15 @@ const Tab = _react.forwardRef((props, forwardedRef) => {
       });
     };
     if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  }, [
+    type,
+    orientation,
+    isActive,
+    tabsWidth,
+    setStripeProperties,
+    tablistRef,
+    value,
+  ]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);

package/cjs/styles.js

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

package/esm/core/Panels/Panels.js

@@ -12,6 +12,7 @@ import {
   useWarningLogger,
   useLayoutEffect,
   useLatestRef,
+  useId,
 } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
 import { Flex } from '../Flex/Flex.js';
@@ -152,7 +153,7 @@ let PanelTrigger = (props) => {
     panels,
   } = useSafeContext(PanelsWrapperContext);
   let { id: panelId } = useSafeContext(PanelContext);
-  let fallbackId = React.useId();
+  let fallbackId = useId();
   let triggerId = children.props.id || fallbackId;
   let onClick = React.useCallback(() => {
     if (null == activePanel) return;

package/esm/core/Tabs/Tabs.js

@@ -160,7 +160,15 @@ let Tab = React.forwardRef((props, forwardedRef) => {
       });
     };
     if ('default' !== type && isActive) updateStripe();
-  }, [type, orientation, isActive, tabsWidth, setStripeProperties, tablistRef]);
+  }, [
+    type,
+    orientation,
+    isActive,
+    tabsWidth,
+    setStripeProperties,
+    tablistRef,
+    value,
+  ]);
   let onKeyDown = (event) => {
     if (event.altKey) return;
     let allTabs = Array.from(event.currentTarget.parentElement?.children ?? []);

package/esm/styles.js

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

package/package.json

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