Fix missing useId import (#2411)

Co-authored-by: Rohan <[email protected]>
iTwin · Jan 22, 2025 · c34473a · c34473a
1 parent 200d483
commit c34473a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/cool-pants-greet.md b/.changeset/cool-pants-greet.md
@@ -0,0 +1,5 @@
+---
+'@itwin/itwinui-react': patch
+---
+
+Fixed `Panels.Trigger` not working in older React versions where `useId` is not available.
diff --git a/packages/itwinui-react/src/core/Panels/Panels.tsx b/packages/itwinui-react/src/core/Panels/Panels.tsx
@@ -16,6 +16,7 @@ import {
   useWarningLogger,
   useLayoutEffect,
   useLatestRef,
+  useId,
 } from '../../utils/index.js';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 import { IconButton } from '../Buttons/IconButton.js';
@@ -269,7 +270,7 @@ const PanelTrigger = (props: PanelTriggerProps) => {
   } = useSafeContext(PanelsWrapperContext);
   const { id: panelId } = useSafeContext(PanelContext);
 
-  const fallbackId = React.useId();
+  const fallbackId = useId();
   const triggerId = children.props.id || fallbackId;
 
   const onClick = React.useCallback(() => {