@fluentui/react-popover 9.0.0-rc.6 → 9.0.0-rc.9
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +176 -9
- package/CHANGELOG.md +129 -83
- package/Spec.md +20 -0
- package/dist/{react-popover.d.ts → index.d.ts} +14 -2
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/components/Popover/Popover.types.js.map +1 -1
- package/lib/components/Popover/renderPopover.js +4 -2
- package/lib/components/Popover/renderPopover.js.map +1 -1
- package/lib/components/Popover/usePopover.js +38 -5
- package/lib/components/Popover/usePopover.js.map +1 -1
- package/lib/components/PopoverSurface/PopoverSurface.types.js.map +1 -1
- package/lib/components/PopoverSurface/renderPopoverSurface.js +10 -4
- package/lib/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib/components/PopoverSurface/usePopoverSurface.js +2 -0
- package/lib/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib/index.js +5 -4
- package/lib/index.js.map +1 -1
- package/lib/popoverContext.js +2 -1
- package/lib/popoverContext.js.map +1 -1
- package/lib-commonjs/components/Popover/renderPopover.js +4 -2
- package/lib-commonjs/components/Popover/renderPopover.js.map +1 -1
- package/lib-commonjs/components/Popover/usePopover.js +38 -5
- package/lib-commonjs/components/Popover/usePopover.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js +10 -4
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.js.map +1 -1
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js +2 -0
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.js.map +1 -1
- package/lib-commonjs/index.js +99 -5
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/popoverContext.js +2 -1
- package/lib-commonjs/popoverContext.js.map +1 -1
- package/package.json +12 -12
- package/lib/Popover.d.ts +0 -1
- package/lib/PopoverSurface.d.ts +0 -1
- package/lib/PopoverTrigger.d.ts +0 -1
- package/lib/components/Popover/Popover.d.ts +0 -6
- package/lib/components/Popover/Popover.types.d.ts +0 -109
- package/lib/components/Popover/index.d.ts +0 -4
- package/lib/components/Popover/renderPopover.d.ts +0 -5
- package/lib/components/Popover/usePopover.d.ts +0 -10
- package/lib/components/PopoverSurface/PopoverSurface.d.ts +0 -6
- package/lib/components/PopoverSurface/PopoverSurface.types.d.ts +0 -21
- package/lib/components/PopoverSurface/index.d.ts +0 -5
- package/lib/components/PopoverSurface/renderPopoverSurface.d.ts +0 -5
- package/lib/components/PopoverSurface/usePopoverSurface.d.ts +0 -12
- package/lib/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +0 -13
- package/lib/components/PopoverTrigger/PopoverTrigger.d.ts +0 -7
- package/lib/components/PopoverTrigger/PopoverTrigger.types.d.ts +0 -18
- package/lib/components/PopoverTrigger/index.d.ts +0 -4
- package/lib/components/PopoverTrigger/renderPopoverTrigger.d.ts +0 -5
- package/lib/components/PopoverTrigger/usePopoverTrigger.d.ts +0 -10
- package/lib/index.d.ts +0 -4
- package/lib/popoverContext.d.ts +0 -8
- package/lib-commonjs/Popover.d.ts +0 -1
- package/lib-commonjs/PopoverSurface.d.ts +0 -1
- package/lib-commonjs/PopoverTrigger.d.ts +0 -1
- package/lib-commonjs/components/Popover/Popover.d.ts +0 -6
- package/lib-commonjs/components/Popover/Popover.types.d.ts +0 -109
- package/lib-commonjs/components/Popover/index.d.ts +0 -4
- package/lib-commonjs/components/Popover/renderPopover.d.ts +0 -5
- package/lib-commonjs/components/Popover/usePopover.d.ts +0 -10
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.d.ts +0 -6
- package/lib-commonjs/components/PopoverSurface/PopoverSurface.types.d.ts +0 -21
- package/lib-commonjs/components/PopoverSurface/index.d.ts +0 -5
- package/lib-commonjs/components/PopoverSurface/renderPopoverSurface.d.ts +0 -5
- package/lib-commonjs/components/PopoverSurface/usePopoverSurface.d.ts +0 -12
- package/lib-commonjs/components/PopoverSurface/usePopoverSurfaceStyles.d.ts +0 -13
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.d.ts +0 -7
- package/lib-commonjs/components/PopoverTrigger/PopoverTrigger.types.d.ts +0 -18
- package/lib-commonjs/components/PopoverTrigger/index.d.ts +0 -4
- package/lib-commonjs/components/PopoverTrigger/renderPopoverTrigger.d.ts +0 -5
- package/lib-commonjs/components/PopoverTrigger/usePopoverTrigger.d.ts +0 -10
- package/lib-commonjs/index.d.ts +0 -4
- 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,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,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,13 +0,0 @@
|
|
1
|
-
import type { PopoverSize } from '../Popover/Popover.types';
|
2
|
-
import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
|
3
|
-
import type { SlotClassNames } from '@fluentui/react-utilities';
|
4
|
-
/**
|
5
|
-
* @deprecated Use `popoverSurfaceClassNames.root` instead.
|
6
|
-
*/
|
7
|
-
export declare const popoverSurfaceClassName = "fui-PopoverSurface";
|
8
|
-
export declare const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
|
9
|
-
export declare const arrowHeights: Record<PopoverSize, number>;
|
10
|
-
/**
|
11
|
-
* Apply styling to the PopoverSurface slots based on the state
|
12
|
-
*/
|
13
|
-
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,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;
|
package/lib-commonjs/index.d.ts
DELETED
@@ -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;
|