fix: PopoverTriggerChildProps should be exported (microsoft#25159)

* fix: PopoverTriggerChildProps should be exported * changefile * Update packages/react-components/react-components/src/index.ts Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com> Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
NotWoods · Nov 18, 2022 · d1e4cde · d1e4cde
1 parent 419d012
commit d1e4cde
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 23 deletions.
diff --git a/change/@fluentui-react-components-81148a7c-403f-4aed-a1a2-9412d2525260.json b/change/@fluentui-react-components-81148a7c-403f-4aed-a1a2-9412d2525260.json
@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "fix: Export PopoverTriggerChildProps",
+ "packageName": "@fluentui/react-components",
+ "email": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md
@@ -272,6 +272,7 @@ import { PopoverSurfaceProps } from '@fluentui/react-popover';
 import { PopoverSurfaceSlots } from '@fluentui/react-popover';
 import { PopoverSurfaceState } from '@fluentui/react-popover';
 import { PopoverTrigger } from '@fluentui/react-popover';
+import { PopoverTriggerChildProps } from '@fluentui/react-popover';
 import { PopoverTriggerProps } from '@fluentui/react-popover';
 import { PopoverTriggerState } from '@fluentui/react-popover';
 import { Portal } from '@fluentui/react-portal';
@@ -1132,6 +1133,8 @@ export { PopoverSurfaceState }
 
 export { PopoverTrigger }
 
+export { PopoverTriggerChildProps }
+
 export { PopoverTriggerProps }
 
 export { PopoverTriggerState }

diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts
@@ -469,6 +469,7 @@ export type {
  PopoverSurfaceProps,
  PopoverSurfaceSlots,
  PopoverSurfaceState,
+ PopoverTriggerChildProps,
  PopoverTriggerProps,
  PopoverTriggerState,
 } from '@fluentui/react-popover';

diff --git a/packages/react-components/react-popover/src/stories/Popover/PopoverCustomTrigger.stories.tsx b/packages/react-components/react-popover/src/stories/Popover/PopoverCustomTrigger.stories.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { makeStyles, Button, Popover, PopoverSurface } from '@fluentui/react-components';
-import type { PopoverProps } from '@fluentui/react-components';
+import { makeStyles, Button, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components';
+import type { PopoverTriggerChildProps } from '@fluentui/react-components';
 const useStyles = makeStyles({
  contentHeader: {
  marginTop: '0',
@@ -18,29 +18,24 @@ const ExampleContent = () => {
  );
 };
 
-export const CustomTrigger = () => {
- const [open, setOpen] = React.useState(false);
- const [target, setTarget] = React.useState<HTMLElement | null>(null);
-
- const onClick = () => setOpen(s => !s);
- const onOpenChange: PopoverProps['onOpenChange'] = (e, data) => {
- // handle custom trigger interactions separately
- if (e.target !== target) {
- setOpen(data.open);
- }
- };
+const CustomPopoverTrigger = React.forwardRef<HTMLButtonElement, Partial<PopoverTriggerChildProps>>((props, ref) => {
+ return (
+ <Button {...props} ref={ref}>
+ Custom Trigger
+ </Button>
+ );
+});
 
+export const CustomTrigger = () => {
  return (
- <>
- <Button aria-expanded={`${open}`} ref={setTarget} onClick={onClick}>
- Custom trigger
- </Button>
- <Popover positioning={{ target }} open={open} onOpenChange={onOpenChange}>
- <PopoverSurface>
- <ExampleContent />
- </PopoverSurface>
- </Popover>
- </>
+ <Popover>
+ <PopoverTrigger>
+ <CustomPopoverTrigger />
+ </PopoverTrigger>
+ <PopoverSurface>
+ <ExampleContent />
+ </PopoverSurface>
+ </Popover>
  );
 };