fix(react-drawer): use context to fetch dialog id (#29273)

microsoft · Sep 25, 2023 · a56c408 · a56c408
1 parent 2828134
commit a56c408
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/change/@fluentui-react-drawer-30e2677b-918d-444b-b5f3-aca797ecc5ed.json b/change/@fluentui-react-drawer-30e2677b-918d-444b-b5f3-aca797ecc5ed.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "fix: use context to fetch dialog id",
+ "packageName": "@fluentui/react-drawer",
+ "email": "marcosvmmoura@gmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/...es/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts b/...es/react-components/react-drawer/src/components/DrawerHeaderTitle/useDrawerHeaderTitle.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { getNativeElementProps, slot } from '@fluentui/react-utilities';
-import { useDialogTitle_unstable } from '@fluentui/react-dialog';
+import { useDialogContext_unstable } from '@fluentui/react-dialog';
 
 import type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHeaderTitle.types';
 
@@ -10,12 +10,11 @@ import type { DrawerHeaderTitleProps, DrawerHeaderTitleState } from './DrawerHea
  * @param props - props from this instance of DrawerHeaderTitle
  */
 const useHeadingProps = ({ children, heading }: DrawerHeaderTitleProps) => {
- const resolvedHeading = slot.resolveShorthand(heading) || {};
- const { root: titleProps } = useDialogTitle_unstable(resolvedHeading, React.createRef());
+ const id = useDialogContext_unstable(ctx => ctx.dialogTitleId);
 
- return slot.optional(titleProps, {
+ return slot.optional(heading, {
  defaultProps: {
- ...titleProps,
+ id,
  children,
  },
  renderByDefault: true,