@fluentui/react-popover 9.0.0-rc.5 → 9.0.0-rc.8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (74) hide show
  1. package/CHANGELOG.json +194 -1
  2. package/CHANGELOG.md +121 -74
  3. package/Spec.md +20 -0
  4. package/dist/{react-popover.d.ts → index.d.ts} +20 -2
  5. package/{lib → dist}/tsdoc-metadata.json +0 -0
  6. package/lib/components/Popover/Popover.types.js.map +1 -1
  7. package/lib/components/Popover/renderPopover.js +4 -2
  8. package/lib/components/Popover/renderPopover.js.map +1 -1
  9. package/lib/components/Popover/usePopover.js +38 -5
  10. package/lib/components/Popover/usePopover.js.map +1 -1
  11. package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
  12. package/lib/components/PopoverSurface/renderPopoverSurface.js +10 -4
  13. package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  14. package/lib/components/PopoverSurface/usePopoverSurface.js +2 -0
  15. package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  16. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js +8 -1
  17. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  18. package/lib/popoverContext.js +2 -1
  19. package/lib/popoverContext.js.map +1 -1
  20. package/lib-commonjs/components/Popover/renderPopover.js +4 -2
  21. package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
  22. package/lib-commonjs/components/Popover/usePopover.js +38 -5
  23. package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
  24. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +10 -4
  25. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
  26. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +2 -0
  27. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
  28. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js +9 -2
  29. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.js.map +1 -1
  30. package/lib-commonjs/popoverContext.js +2 -1
  31. package/lib-commonjs/popoverContext.js.map +1 -1
  32. package/package.json +14 -24
  33. package/lib/Popover.d.ts +0 -1
  34. package/lib/PopoverSurface.d.ts +0 -1
  35. package/lib/PopoverTrigger.d.ts +0 -1
  36. package/lib/components/Popover/Popover.d.ts +0 -6
  37. package/lib/components/Popover/Popover.types.d.ts +0 -109
  38. package/lib/components/Popover/index.d.ts +0 -4
  39. package/lib/components/Popover/renderPopover.d.ts +0 -5
  40. package/lib/components/Popover/usePopover.d.ts +0 -10
  41. package/lib/components/PopoverSurface/PopoverSurface.d.ts +0 -6
  42. package/lib/components/PopoverSurface/PopoverSurface.types.d.ts +0 -21
  43. package/lib/components/PopoverSurface/index.d.ts +0 -5
  44. package/lib/components/PopoverSurface/renderPopoverSurface.d.ts +0 -5
  45. package/lib/components/PopoverSurface/usePopoverSurface.d.ts +0 -12
  46. package/lib/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +0 -8
  47. package/lib/components/PopoverTrigger/PopoverTrigger.d.ts +0 -7
  48. package/lib/components/PopoverTrigger/PopoverTrigger.types.d.ts +0 -18
  49. package/lib/components/PopoverTrigger/index.d.ts +0 -4
  50. package/lib/components/PopoverTrigger/renderPopoverTrigger.d.ts +0 -5
  51. package/lib/components/PopoverTrigger/usePopoverTrigger.d.ts +0 -10
  52. package/lib/index.d.ts +0 -4
  53. package/lib/popoverContext.d.ts +0 -8
  54. package/lib-commonjs/Popover.d.ts +0 -1
  55. package/lib-commonjs/PopoverSurface.d.ts +0 -1
  56. package/lib-commonjs/PopoverTrigger.d.ts +0 -1
  57. package/lib-commonjs/components/Popover/Popover.d.ts +0 -6
  58. package/lib-commonjs/components/Popover/Popover.types.d.ts +0 -109
  59. package/lib-commonjs/components/Popover/index.d.ts +0 -4
  60. package/lib-commonjs/components/Popover/renderPopover.d.ts +0 -5
  61. package/lib-commonjs/components/Popover/usePopover.d.ts +0 -10
  62. package/lib-commonjs/components/PopoverSurface/PopoverSurface.d.ts +0 -6
  63. package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.d.ts +0 -21
  64. package/lib-commonjs/components/PopoverSurface/index.d.ts +0 -5
  65. package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.d.ts +0 -5
  66. package/lib-commonjs/components/PopoverSurface/usePopoverSurface.d.ts +0 -12
  67. package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +0 -8
  68. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.d.ts +0 -7
  69. package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.d.ts +0 -18
  70. package/lib-commonjs/components/PopoverTrigger/index.d.ts +0 -4
  71. package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.d.ts +0 -5
  72. package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.d.ts +0 -10
  73. package/lib-commonjs/index.d.ts +0 -4
  74. package/lib-commonjs/popoverContext.d.ts +0 -8
@@ -1,109 +0,0 @@
1
- import * as React from 'react';
2
- import type { PopperVirtualElement, PositioningShorthand, usePopperMouseTarget } from '@fluentui/react-positioning';
3
- import type { PortalProps } from '@fluentui/react-portal';
4
- /**
5
- * Determines popover padding and arrow size
6
- */
7
- export declare type PopoverSize = 'small' | 'medium' | 'large';
8
- declare type PopoverCommons = Pick<PortalProps, 'mountNode'> & {
9
- /**
10
- * Controls the opening of the Popover
11
- */
12
- open: boolean;
13
- /**
14
- * Used to set the initial open state of the Popover in uncontrolled mode
15
- */
16
- defaultOpen?: boolean;
17
- /**
18
- * Call back when the component requests to change value
19
- * The `open` value is used as a hint when directly controlling the component
20
- */
21
- onOpenChange?: (e: OpenPopoverEvents, data: OnOpenChangeData) => void;
22
- /**
23
- * Flag to open the Popover by hovering the trigger
24
- */
25
- openOnHover?: boolean;
26
- /**
27
- * Flag to open the Popover as a context menu. Disables all other interactions
28
- */
29
- openOnContext?: boolean;
30
- /**
31
- * Do not display the arrow
32
- */
33
- noArrow?: boolean;
34
- /**
35
- * Determines popover padding and arrow size
36
- * @default medium
37
- */
38
- size?: PopoverSize;
39
- /**
40
- * A popover can appear styled with brand or inverted.
41
- * When not specified, the default style is used.
42
- */
43
- appearance?: 'brand' | 'inverted';
44
- /**
45
- * Should trap focus
46
- */
47
- trapFocus?: boolean;
48
- /**
49
- * Configures the position of the Popover
50
- */
51
- positioning?: PositioningShorthand;
52
- };
53
- /**
54
- * Popover Props
55
- */
56
- export declare type PopoverProps = Partial<PopoverCommons> & {
57
- /**
58
- * Can contain two children including {@link PopoverTrigger} and {@link PopoverSurface}.
59
- * Alternatively can only contain {@link PopoverSurface} if using a custom `target`.
60
- */
61
- children: [JSX.Element, JSX.Element] | JSX.Element;
62
- };
63
- /**
64
- * Popover State
65
- */
66
- export declare type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
67
- /**
68
- * Callback to open/close the Popover
69
- */
70
- setOpen: (e: OpenPopoverEvents, open: boolean) => void;
71
- /**
72
- * Callback to toggle the open state of the Popover
73
- */
74
- toggleOpen: (e: OpenPopoverEvents) => void;
75
- /**
76
- * Ref of the PopoverTrigger
77
- */
78
- triggerRef: React.MutableRefObject<HTMLElement | null>;
79
- /**
80
- * Ref of the PopoverSurface
81
- */
82
- contentRef: React.MutableRefObject<HTMLElement | null>;
83
- /**
84
- * Ref of the pointing arrow
85
- */
86
- arrowRef: React.MutableRefObject<HTMLDivElement | null>;
87
- /**
88
- * Anchors the popper to the mouse click for context events
89
- */
90
- contextTarget: PopperVirtualElement | undefined;
91
- /**
92
- * A callback to set the target of the popper to the mouse click for context events
93
- */
94
- setContextTarget: ReturnType<typeof usePopperMouseTarget>[1];
95
- size: NonNullable<PopoverProps['size']>;
96
- popoverTrigger: React.ReactElement | undefined;
97
- popoverSurface: React.ReactElement | undefined;
98
- };
99
- /**
100
- * Data attached to open/close events
101
- */
102
- export declare type OnOpenChangeData = {
103
- open: boolean;
104
- };
105
- /**
106
- * The supported events that will trigger open/close of the menu
107
- */
108
- export declare type OpenPopoverEvents = MouseEvent | TouchEvent | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement> | React.FocusEvent<HTMLElement>;
109
- export {};
@@ -1,4 +0,0 @@
1
- export * from './Popover';
2
- export * from './Popover.types';
3
- export * from './renderPopover';
4
- export * from './usePopover';
@@ -1,5 +0,0 @@
1
- import type { PopoverState } from './Popover.types';
2
- /**
3
- * Render the final JSX of Popover
4
- */
5
- export declare const renderPopover_unstable: (state: PopoverState) => JSX.Element;
@@ -1,10 +0,0 @@
1
- import type { PopoverProps, PopoverState } from './Popover.types';
2
- /**
3
- * Create the state required to render Popover.
4
- *
5
- * The returned state can be modified with hooks such as usePopoverStyles,
6
- * before being passed to renderPopover_unstable.
7
- *
8
- * @param props - props from this instance of Popover
9
- */
10
- export declare const usePopover_unstable: (props: PopoverProps) => PopoverState;
@@ -1,6 +0,0 @@
1
- import type { PopoverSurfaceProps } from './PopoverSurface.types';
2
- import type { ForwardRefComponent } from '@fluentui/react-utilities';
3
- /**
4
- * PopoverSurface component renders react children in a positioned box
5
- */
6
- export declare const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
@@ -1,21 +0,0 @@
1
- import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
2
- import type { PopoverContextValue } from '../../popoverContext';
3
- /**
4
- * PopoverSurface Props
5
- */
6
- export declare type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
7
- /**
8
- * Names of the slots in PopoverSurfaceProps
9
- */
10
- export declare type PopoverSurfaceSlots = {
11
- root: Slot<'div'>;
12
- };
13
- /**
14
- * PopoverSurface State
15
- */
16
- export declare type PopoverSurfaceState = ComponentState<PopoverSurfaceSlots> & Pick<PopoverContextValue, 'mountNode' | 'noArrow' | 'size' | 'appearance' | 'arrowRef'> & {
17
- /**
18
- * CSS class for the arrow element
19
- */
20
- arrowClassName?: string;
21
- };
@@ -1,5 +0,0 @@
1
- export * from './PopoverSurface';
2
- export * from './PopoverSurface.types';
3
- export * from './renderPopoverSurface';
4
- export * from './usePopoverSurface';
5
- export * from './usePopoverSurfaceStyles';
@@ -1,5 +0,0 @@
1
- import type { PopoverSurfaceState } from './PopoverSurface.types';
2
- /**
3
- * Render the final JSX of PopoverSurface
4
- */
5
- export declare const renderPopoverSurface_unstable: (state: PopoverSurfaceState) => JSX.Element;
@@ -1,12 +0,0 @@
1
- import * as React from 'react';
2
- import type { PopoverSurfaceProps, PopoverSurfaceState } from './PopoverSurface.types';
3
- /**
4
- * Create the state required to render PopoverSurface.
5
- *
6
- * The returned state can be modified with hooks such as usePopoverSurfaceStyles_unstable,
7
- * before being passed to renderPopoverSurface_unstable.
8
- *
9
- * @param props - props from this instance of PopoverSurface
10
- * @param ref - reference to root HTMLDivElement of PopoverSurface
11
- */
12
- export declare const usePopoverSurface_unstable: (props: PopoverSurfaceProps, ref: React.Ref<HTMLDivElement>) => PopoverSurfaceState;
@@ -1,8 +0,0 @@
1
- import type { PopoverSize } from '../Popover/Popover.types';
2
- import type { PopoverSurfaceState } from './PopoverSurface.types';
3
- export declare const popoverSurfaceClassName = "fui-PopoverSurface";
4
- export declare const arrowHeights: Record<PopoverSize, number>;
5
- /**
6
- * Apply styling to the PopoverSurface slots based on the state
7
- */
8
- export declare const usePopoverSurfaceStyles_unstable: (state: PopoverSurfaceState) => PopoverSurfaceState;
@@ -1,7 +0,0 @@
1
- import * as React from 'react';
2
- import type { FluentTriggerComponent } from '@fluentui/react-utilities';
3
- import type { PopoverTriggerProps } from './PopoverTrigger.types';
4
- /**
5
- * Wraps a trigger element as an only child and adds the necessary event handling to open a popover.
6
- */
7
- export declare const PopoverTrigger: React.FC<PopoverTriggerProps> & FluentTriggerComponent;
@@ -1,18 +0,0 @@
1
- import * as React from 'react';
2
- /**
3
- * PopoverTrigger Props
4
- */
5
- export declare type PopoverTriggerProps = {
6
- children: (React.ReactElement & {
7
- ref?: React.Ref<unknown>;
8
- }) | ((props: PopoverTriggerChildProps) => React.ReactElement | null);
9
- };
10
- /**
11
- * PopoverTrigger State
12
- */
13
- export declare type PopoverTriggerState = {
14
- children: React.ReactElement | null;
15
- };
16
- export declare type PopoverTriggerChildProps = {
17
- ref?: React.Ref<never>;
18
- } & Pick<React.HTMLAttributes<HTMLElement>, 'aria-haspopup' | 'onClick' | 'onMouseEnter' | 'onKeyDown' | 'onMouseLeave' | 'onContextMenu'>;
@@ -1,4 +0,0 @@
1
- export * from './PopoverTrigger';
2
- export * from './PopoverTrigger.types';
3
- export * from './renderPopoverTrigger';
4
- export * from './usePopoverTrigger';
@@ -1,5 +0,0 @@
1
- import type { PopoverTriggerState } from './PopoverTrigger.types';
2
- /**
3
- * Render the final JSX of PopoverTrigger
4
- */
5
- export declare const renderPopoverTrigger_unstable: (state: PopoverTriggerState) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;
@@ -1,10 +0,0 @@
1
- import type { PopoverTriggerProps, PopoverTriggerState } from './PopoverTrigger.types';
2
- /**
3
- * Create the state required to render PopoverTrigger.
4
- *
5
- * The returned state can be modified with hooks such as usePopoverTriggerStyles,
6
- * before being passed to renderPopoverTrigger_unstable.
7
- *
8
- * @param props - props from this instance of PopoverTrigger
9
- */
10
- export declare const usePopoverTrigger_unstable: (props: PopoverTriggerProps) => PopoverTriggerState;
@@ -1,4 +0,0 @@
1
- export * from './Popover';
2
- export * from './PopoverSurface';
3
- export * from './popoverContext';
4
- export * from './PopoverTrigger';
@@ -1,8 +0,0 @@
1
- import type { ContextSelector, Context } from '@fluentui/react-context-selector';
2
- import type { PopoverState } from './components/Popover/index';
3
- export declare const PopoverContext: Context<PopoverContextValue>;
4
- /**
5
- * Context shared between Popover and its children components
6
- */
7
- export declare type PopoverContextValue = Pick<PopoverState, 'toggleOpen' | 'setOpen' | 'triggerRef' | 'contentRef' | 'openOnHover' | 'openOnContext' | 'mountNode' | 'noArrow' | 'arrowRef' | 'size' | 'appearance' | 'trapFocus'>;
8
- export declare const usePopoverContext_unstable: <T>(selector: ContextSelector<PopoverContextValue, T>) => T;