@contentful/f36-popover 4.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/LICENSE.md +7 -0
  2. package/README.mdx +109 -0
  3. package/dist/main.js +231 -0
  4. package/dist/main.js.map +1 -0
  5. package/dist/module.js +222 -0
  6. package/dist/module.js.map +1 -0
  7. package/dist/types.d.ts +727 -0
  8. package/dist/types.d.ts.map +1 -0
  9. package/package.json +38 -0
package/LICENSE.md ADDED
@@ -0,0 +1,7 @@
1
+ Copyright (c) 2018-present Contentful GmbH
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4
+
5
+ The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6
+
7
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
package/README.mdx ADDED
@@ -0,0 +1,109 @@
1
+ ---
2
+ title: 'Popover'
3
+ type: 'component'
4
+ status: 'stable'
5
+ slug: /components/popover/
6
+ github: 'https://github.com/contentful/forma-36/tree/forma-v4/packages/components/popover'
7
+ storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-popover--basic'
8
+ typescript: ./src/Popover.tsx
9
+ ---
10
+
11
+ Popover is used to display some content on top of another, and should be paired with a clickable trigger element.
12
+ It is a base for other more specific component, like `Menu`, `Autocomplete` and `Multiselect`. Please, consider using these specific componenets to cover your needs.
13
+
14
+ ## How to use Popover
15
+
16
+ - Only if `Menu`, `Autocomplete` and `Multiselect` components are not covering your use cases, you should use `Popover`.
17
+ - Before using this component, double-check your design requirements. We are providing `Menu`, `Autocomplete`, and `Multiselect` for more specific use-cases and they can address your needs.
18
+ - Keep in mind that you will have to implement everything related to accessibility for the popover content.
19
+ - Component is controllable, so don't forget to pass `onClose` callback prop. Otherwise `closeOnEsc` and `closeOnBlur` will not work properly.
20
+
21
+ ## Code examples
22
+
23
+ - Pass trigger component as a child for `Popover.Trigger`.
24
+ NOTE: 🚨 Ensure that the component that you pass accepts `ref`. Consider using `forwardRef` for functional components.
25
+ - Pass popover content as a child for `Popover.Content`
26
+
27
+ ```tsx
28
+ // import { Popover } from '@contentful/f36-popover';
29
+
30
+ // import { Button } from '@contentful/f36-button';
31
+ // import { Paragraph } from '@contentful/f36-typography';
32
+ // import { Box } from '@contentful/f36-core';
33
+
34
+ function PopoverExample() {
35
+ const [isOpen, setIsOpen] = React.useState(false);
36
+ return (
37
+ <Popover isOpen={isOpen} onClose={() => setIsOpen(false)}>
38
+ <Popover.Trigger>
39
+ <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
40
+ </Popover.Trigger>
41
+ <Popover.Content>
42
+ <Box padding="spacingM">
43
+ <Paragraph>This is the content.</Paragraph>
44
+ <Button>Some action</Button>
45
+ </Box>
46
+ </Popover.Content>
47
+ </Popover>
48
+ );
49
+ }
50
+ ```
51
+
52
+ ## Trapping focus within Popover
53
+
54
+ If the popover contains interactive elements that user can navigate through with `Tab`,
55
+ consider using [react-focus-lock](https://github.com/theKashey/react-focus-lock) to trap the focus within Popover
56
+
57
+ ```tsx static=true
58
+ // import { Popover } from '@contentful/f36-popover';
59
+
60
+ // import { Button } from '@contentful/f36-button';
61
+ // import { Stack } from '@contentful/f36-core';
62
+ // import { Switch } from '@contentful/f36-forms';
63
+
64
+ // import FocusLock from 'react-focus-lock';
65
+
66
+ function PopoverExample() {
67
+ const [isOpen, setIsOpen] = React.useState(false);
68
+ return (
69
+ <Popover isOpen={isOpen} onClose={() => setIsOpen(false)}>
70
+ <Popover.Trigger>
71
+ <Button onClick={() => setIsOpen(!isOpen)}>Toggle</Button>
72
+ </Popover.Trigger>
73
+ <Popover.Content>
74
+ {/* Just wrap your content with FocusLock component */}
75
+ <FocusLock>
76
+ <Stack
77
+ padding="spacingM"
78
+ margin="none"
79
+ spacing="spacingS"
80
+ flexDirection="column"
81
+ >
82
+ <Switch>Option 1</Switch>
83
+ <Switch>Option 2</Switch>
84
+ <Switch>Option 3</Switch>
85
+ </Stack>
86
+ </FocusLock>
87
+ </Popover.Content>
88
+ </Popover>
89
+ );
90
+ }
91
+ ```
92
+
93
+ ## Content recommendations
94
+
95
+ - Use an interactive element such as `button` for `Popover.Trigger`
96
+
97
+ ## Accessibility
98
+
99
+ - If the popover contains interactive elements that user can navigate through with `Tab`, consider using [react-focus-lock](https://github.com/theKashey/react-focus-lock) to trap the focus within Popover
100
+ - When the popover is opened, focus is moved to the `Popover.Content`. If you set `autoFocus`to `false`, it will not move the focus.
101
+ - When the popover is open and focus is within the `Popover.Content`, click on `Esc` key will close the popover. If you set `closeOnEsc` to `false`, it will not close.
102
+ - When the popover is open and focus is within the `Popover.Content`, click outside popover or blurring out will close the it. If you set `closeOnBlur` to `false`, it will not close.
103
+ - All the necessary a11y attributes for `Popover.Content` and `Popover.Trigger` are provided.
104
+
105
+ ## Props
106
+
107
+ import { Props } from '@contentful/f36-docs-utils';
108
+
109
+ <Props of="Popover" />
package/dist/main.js ADDED
@@ -0,0 +1,231 @@
1
+ var $36WSQ$react = require("react");
2
+ var $36WSQ$contentfulf36core = require("@contentful/f36-core");
3
+ var $36WSQ$reactpopper = require("react-popper");
4
+ var $36WSQ$emotion = require("emotion");
5
+ var $36WSQ$contentfulf36utils = require("@contentful/f36-utils");
6
+ var $36WSQ$contentfulf36tokens = require("@contentful/f36-tokens");
7
+
8
+ function $parcel$export(e, n, v, s) {
9
+ Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
10
+ }
11
+ function $parcel$interopDefault(a) {
12
+ return a && a.__esModule ? a.default : a;
13
+ }
14
+
15
+ $parcel$export(module.exports, "Popover", () => $dd96ee4ab94ee75f$export$5b6b19405a83ff9d);
16
+ $parcel$export(module.exports, "PopoverTrigger", () => $b3e2e9dc1eae953e$export$7dacb05d26466c3);
17
+ $parcel$export(module.exports, "PopoverContent", () => $ec6b27dd96eb674c$export$d7e1f420b25549ff);
18
+
19
+
20
+
21
+ const $a5e54ab4533eb4d3$var$PopoverContext = ($parcel$interopDefault($36WSQ$react)).createContext(undefined);
22
+ const $a5e54ab4533eb4d3$export$1468d0761b26e6c8 = ()=>{
23
+ const context = ($parcel$interopDefault($36WSQ$react)).useContext($a5e54ab4533eb4d3$var$PopoverContext);
24
+ if (context === undefined) throw new Error('usePopoverContext must be used within a PopoverContextProvider');
25
+ return context;
26
+ };
27
+ const $a5e54ab4533eb4d3$export$f5300fbf692a63ec = $a5e54ab4533eb4d3$var$PopoverContext.Provider;
28
+
29
+
30
+
31
+ function $ed3840333e471e4e$export$5b6b19405a83ff9d(props) {
32
+ const { children: children , isOpen: isOpen , placement: placement = 'bottom-start' , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [
33
+ 1,
34
+ 4
35
+ ] } = props;
36
+ const [triggerElement, setTriggerElement] = $36WSQ$react.useState(null);
37
+ const [popoverElement, setPopoverElement] = $36WSQ$react.useState(null);
38
+ const { attributes: popperAttributes , forceUpdate: forceUpdate , styles: popperStyles } = $36WSQ$reactpopper.usePopper(triggerElement, popoverElement, {
39
+ placement: placement,
40
+ modifiers: [
41
+ {
42
+ name: 'offset',
43
+ options: {
44
+ offset: offset
45
+ }
46
+ },
47
+ {
48
+ ...$ed3840333e471e4e$var$sameWidth,
49
+ enabled: isFullWidth
50
+ },
51
+ {
52
+ name: 'preventOverflow',
53
+ enabled: isAutoalignmentEnabled,
54
+ options: {
55
+ mainAxis: true
56
+ }
57
+ },
58
+ {
59
+ name: 'flip',
60
+ enabled: isAutoalignmentEnabled
61
+ }
62
+ ]
63
+ });
64
+ $36WSQ$react.useEffect(()=>{
65
+ if (isOpen && autoFocus && popoverElement) popoverElement.focus({
66
+ preventScroll: true
67
+ });
68
+ // eslint-disable-next-line react-hooks/exhaustive-deps
69
+ }, [
70
+ isOpen,
71
+ popoverElement
72
+ ]);
73
+ $36WSQ$react.useEffect(()=>{
74
+ if (isOpen && forceUpdate) forceUpdate();
75
+ }, [
76
+ isOpen,
77
+ forceUpdate
78
+ ]);
79
+ const popoverGeneratedId = $36WSQ$contentfulf36core.useId(null, 'popover-content');
80
+ const popoverId = id || popoverGeneratedId;
81
+ const closeAndFocusTrigger = $36WSQ$react.useCallback(()=>{
82
+ onClose === null || onClose === void 0 ? void 0 : onClose(); // setTimeout trick to make it work with focus-lock
83
+ setTimeout(()=>{
84
+ return triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus({
85
+ preventScroll: true
86
+ });
87
+ }, 0);
88
+ }, [
89
+ onClose,
90
+ triggerElement
91
+ ]);
92
+ const contextValue = $36WSQ$react.useMemo(()=>{
93
+ return {
94
+ isOpen: isOpen,
95
+ usePortal: usePortal,
96
+ getTriggerProps: (_ref = null)=>({
97
+ ref: $36WSQ$contentfulf36core.mergeRefs(setTriggerElement, _ref),
98
+ ['aria-expanded']: Boolean(isOpen),
99
+ ['aria-controls']: popoverId
100
+ })
101
+ ,
102
+ getPopoverProps: (_props = {
103
+ }, _ref = null)=>{
104
+ return {
105
+ ...popperAttributes.popper,
106
+ style: {
107
+ ..._props.style || {
108
+ },
109
+ ...popperStyles.popper
110
+ },
111
+ ref: $36WSQ$contentfulf36core.mergeRefs(setPopoverElement, _ref),
112
+ id: popoverId,
113
+ onBlur: (event)=>{
114
+ if (_props.onBlur) _props.onBlur(event);
115
+ if (!closeOnBlur) return;
116
+ const relatedTarget = event.relatedTarget;
117
+ const targetIsPopover = popoverElement === relatedTarget || (popoverElement === null || popoverElement === void 0 ? void 0 : popoverElement.contains(relatedTarget));
118
+ const targetIsTrigger = triggerElement === relatedTarget || (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(relatedTarget));
119
+ if (targetIsPopover || targetIsTrigger) return;
120
+ onClose === null || onClose === void 0 ? void 0 : onClose();
121
+ },
122
+ onKeyDown: (event)=>{
123
+ if (_props.onKeyDown) _props.onKeyDown(event);
124
+ if (closeOnEsc && event.key === 'Escape') closeAndFocusTrigger();
125
+ }
126
+ };
127
+ }
128
+ };
129
+ }, [
130
+ isOpen,
131
+ popperAttributes,
132
+ popperStyles,
133
+ usePortal,
134
+ popoverId,
135
+ closeOnEsc,
136
+ closeOnBlur,
137
+ popoverElement,
138
+ triggerElement,
139
+ closeAndFocusTrigger,
140
+ onClose
141
+ ]);
142
+ return(/*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).createElement($a5e54ab4533eb4d3$export$f5300fbf692a63ec, {
143
+ value: contextValue
144
+ }, children));
145
+ }
146
+ /**
147
+ * Sets the popover width to the size of the trigger element.
148
+ */ const $ed3840333e471e4e$var$sameWidth = {
149
+ name: 'sameWidth',
150
+ enabled: true,
151
+ phase: 'beforeWrite',
152
+ requires: [
153
+ 'computeStyles'
154
+ ],
155
+ fn: ({ state: state })=>{
156
+ state.styles.popper.width = `${state.rects.reference.width}px`;
157
+ },
158
+ effect: ({ state: state })=>()=>{
159
+ const reference = state.elements.reference;
160
+ state.elements.popper.style.width = `${reference.offsetWidth}px`;
161
+ }
162
+ };
163
+
164
+
165
+
166
+
167
+
168
+
169
+
170
+
171
+ const $ac842fe302ff665f$export$fbd764fe961047f7 = (isOpen)=>({
172
+ container: /*#__PURE__*/ $36WSQ$emotion.css({
173
+ display: isOpen ? 'initial' : 'none',
174
+ background: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).colorWhite,
175
+ border: 0,
176
+ borderRadius: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).borderRadiusMedium,
177
+ boxShadow: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).boxShadowDefault,
178
+ zIndex: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).zIndexDropdown,
179
+ '&:focus': {
180
+ outline: 'none'
181
+ },
182
+ '&:focus-visible': {
183
+ boxShadow: ($parcel$interopDefault($36WSQ$contentfulf36tokens)).glowPrimary
184
+ }
185
+ })
186
+ })
187
+ ;
188
+
189
+
190
+ const $ec6b27dd96eb674c$var$_PopoverContent = (props, ref)=>{
191
+ const { children: children , className: className , testId: testId = 'cf-ui-popover-content' , role: role = 'dialog' , ...otherProps } = props;
192
+ const { isOpen: isOpen , getPopoverProps: getPopoverProps , usePortal: usePortal } = $a5e54ab4533eb4d3$export$1468d0761b26e6c8();
193
+ const styles = $ac842fe302ff665f$export$fbd764fe961047f7(isOpen);
194
+ const content = /*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).createElement("div", {
195
+ ...otherProps,
196
+ ...getPopoverProps(otherProps, ref),
197
+ className: $36WSQ$emotion.cx(styles.container, className),
198
+ "data-test-id": testId,
199
+ tabIndex: -1,
200
+ role: role,
201
+ // for internal contentful apps usage
202
+ "data-position-absolute": true
203
+ }, children);
204
+ return usePortal ? /*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).createElement($36WSQ$contentfulf36utils.Portal, null, content) : content;
205
+ };
206
+ const $ec6b27dd96eb674c$export$d7e1f420b25549ff = /*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).forwardRef($ec6b27dd96eb674c$var$_PopoverContent);
207
+
208
+
209
+
210
+
211
+ const $b3e2e9dc1eae953e$export$7dacb05d26466c3 = (props)=>{
212
+ const child = ($parcel$interopDefault($36WSQ$react)).Children.only(props.children);
213
+ const { getTriggerProps: getTriggerProps } = $a5e54ab4533eb4d3$export$1468d0761b26e6c8();
214
+ var ref;
215
+ return(/*#__PURE__*/ ($parcel$interopDefault($36WSQ$react)).cloneElement(child, {
216
+ ...getTriggerProps(child.ref),
217
+ 'aria-haspopup': (ref = child.props['aria-haspopup']) !== null && ref !== void 0 ? ref : 'dialog'
218
+ }));
219
+ };
220
+
221
+
222
+ const $dd96ee4ab94ee75f$export$5b6b19405a83ff9d = $ed3840333e471e4e$export$5b6b19405a83ff9d;
223
+ $dd96ee4ab94ee75f$export$5b6b19405a83ff9d.Content = $ec6b27dd96eb674c$export$d7e1f420b25549ff;
224
+ $dd96ee4ab94ee75f$export$5b6b19405a83ff9d.Trigger = $b3e2e9dc1eae953e$export$7dacb05d26466c3;
225
+
226
+
227
+
228
+
229
+
230
+
231
+ //# sourceMappingURL=main.js.map
package/dist/main.js.map ADDED
@@ -0,0 +1 @@
1
+ {"mappings":"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","sources":["packages/components/popover/src/index.ts","packages/components/popover/src/CompoundPopover.tsx","packages/components/popover/src/Popover.tsx","packages/components/popover/src/PopoverContext.ts","packages/components/popover/src/PopoverContent/PopoverContent.tsx","packages/components/popover/src/PopoverContent/PopoverContent.styles.ts","packages/components/popover/src/PopoverTrigger/PopoverTrigger.tsx"],"sourcesContent":["export { Popover } from './CompoundPopover';\nexport type { PopoverProps } from './Popover';\nexport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\nexport type { PopoverTriggerProps } from './PopoverTrigger/PopoverTrigger';\nexport { PopoverContent } from './PopoverContent/PopoverContent';\nexport type { PopoverContentProps } from './PopoverContent/PopoverContent';\n","import { Popover as OriginalPopover } from './Popover';\nimport { PopoverContent } from './PopoverContent/PopoverContent';\nimport { PopoverTrigger } from './PopoverTrigger/PopoverTrigger';\n\ntype CompoundPopover = typeof OriginalPopover & {\n Content: typeof PopoverContent;\n Trigger: typeof PopoverTrigger;\n};\n\nexport const Popover = OriginalPopover as CompoundPopover;\nPopover.Content = PopoverContent;\nPopover.Trigger = PopoverTrigger;\n","import React, { useMemo, useState, useEffect, useCallback } from 'react';\nimport { useId, mergeRefs, ExpandProps } from '@contentful/f36-core';\nimport { Placement, Modifier } from '@popperjs/core';\nimport { PopoverContextProvider, PopoverContextType } from './PopoverContext';\nimport { usePopper } from 'react-popper';\n\nexport interface PopoverProps {\n children: React.ReactNode;\n\n /**\n * Boolean to determine if the Popover should be the same width as\n * the trigger element\n *\n * @default false\n */\n isFullWidth?: boolean;\n\n /**\n * Boolean to control whether or not the Popover is open\n *\n * @default false\n */\n isOpen?: boolean;\n\n /**\n * Callback fired when the popover closes\n */\n onClose?: () => void;\n\n /**\n * Determines the preferred position of the Popover. This position is not\n * guaranteed, as the Popover might be moved to fit the viewport\n *\n * @default bottom-start\n */\n placement?: Placement;\n\n /**\n * Boolean to control if popover is allowed to change its placement automatically\n * based on available space in the viewport.\n *\n * For example:\n * If you set placement prop to bottom, but there isn't enough space to position the popover in that direction,\n * it will change the popper placement to top. As soon as enough space is detected, the placement will be reverted to the defined one.\n *\n * If you want the popover to strictly follow the placement prop you should set this prop to false.\n *\n * @default true\n */\n isAutoalignmentEnabled?: boolean;\n\n /**\n * Boolean to control whether or not to render the Popover in a React Portal.\n * Rendering content inside a Portal allows the Popover to escape the bounds\n * of its parent while still being positioned correctly. Using a Portal is\n * necessary if an ancestor of the Popover hides overflow.\n *\n * @default true\n */\n usePortal?: boolean;\n\n /**\n * If true, the popover will close when you blur out it by clicking outside or tabbing out\n *\n * @default true\n */\n closeOnBlur?: boolean;\n\n /**\n * If true, the popover will close when you hit the Esc key\n *\n * @default true\n */\n closeOnEsc?: boolean;\n\n /**\n * If true, the popover will be focused after opening\n *\n * @default true\n */\n autoFocus?: boolean;\n\n /**\n * Popover id. Will be used as an `id` attribute on popover\n * and as `aria-controls` attribute on trigger\n *\n * @default true\n */\n id?: string;\n\n /**\n * The `X-axis` and `Y-axis` offset to position popper element\n * from its trigger element. `[X, Y]`\n *\n * @default [1, 4]\n */\n offset?: [number, number];\n}\n\nexport function Popover(props: ExpandProps<PopoverProps>) {\n const {\n children,\n isOpen,\n placement = 'bottom-start',\n isFullWidth = false,\n isAutoalignmentEnabled = true,\n usePortal = true,\n closeOnBlur = true,\n closeOnEsc = true,\n onClose,\n autoFocus = true,\n id,\n offset = [1, 4],\n } = props;\n\n const [triggerElement, setTriggerElement] = useState<HTMLElement | null>(\n null,\n );\n const [popoverElement, setPopoverElement] = useState<HTMLElement | null>(\n null,\n );\n\n const {\n attributes: popperAttributes,\n forceUpdate,\n styles: popperStyles,\n } = usePopper(triggerElement, popoverElement, {\n placement,\n modifiers: [\n {\n name: 'offset',\n options: {\n offset,\n },\n },\n {\n ...sameWidth,\n enabled: isFullWidth,\n },\n {\n name: 'preventOverflow',\n enabled: isAutoalignmentEnabled,\n options: {\n mainAxis: true,\n },\n },\n {\n name: 'flip',\n enabled: isAutoalignmentEnabled,\n },\n ],\n });\n\n useEffect(() => {\n if (isOpen && autoFocus && popoverElement) {\n popoverElement.focus({ preventScroll: true });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isOpen, popoverElement]);\n\n useEffect(() => {\n if (isOpen && forceUpdate) {\n forceUpdate();\n }\n }, [isOpen, forceUpdate]);\n\n const popoverGeneratedId = useId(null, 'popover-content');\n const popoverId = id || popoverGeneratedId;\n\n const closeAndFocusTrigger = useCallback(() => {\n onClose?.();\n\n // setTimeout trick to make it work with focus-lock\n setTimeout(() => triggerElement?.focus({ preventScroll: true }), 0);\n }, [onClose, triggerElement]);\n\n const contextValue: PopoverContextType = useMemo(\n () => ({\n isOpen,\n usePortal,\n getTriggerProps: (_ref = null) => ({\n ref: mergeRefs(setTriggerElement, _ref),\n ['aria-expanded']: Boolean(isOpen),\n ['aria-controls']: popoverId,\n }),\n getPopoverProps: (_props = {}, _ref = null) => ({\n ...popperAttributes.popper,\n style: {\n ...(_props.style || {}),\n ...popperStyles.popper,\n },\n ref: mergeRefs(setPopoverElement, _ref),\n id: popoverId,\n onBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n if (_props.onBlur) {\n _props.onBlur(event);\n }\n\n if (!closeOnBlur) {\n return;\n }\n\n const relatedTarget = event.relatedTarget as Node;\n\n const targetIsPopover =\n popoverElement === relatedTarget ||\n popoverElement?.contains(relatedTarget);\n const targetIsTrigger =\n triggerElement === relatedTarget ||\n triggerElement?.contains(relatedTarget);\n\n if (targetIsPopover || targetIsTrigger) {\n return;\n }\n\n onClose?.();\n },\n onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (_props.onKeyDown) {\n _props.onKeyDown(event);\n }\n\n if (closeOnEsc && event.key === 'Escape') {\n closeAndFocusTrigger();\n }\n },\n }),\n }),\n [\n isOpen,\n popperAttributes,\n popperStyles,\n usePortal,\n popoverId,\n closeOnEsc,\n closeOnBlur,\n popoverElement,\n triggerElement,\n closeAndFocusTrigger,\n onClose,\n ],\n );\n\n return (\n <PopoverContextProvider value={contextValue}>\n {children}\n </PopoverContextProvider>\n );\n}\n\n/**\n * Sets the popover width to the size of the trigger element.\n */\nconst sameWidth: Modifier<'sameWidth', any> = {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => () => {\n const reference = state.elements.reference as HTMLElement;\n state.elements.popper.style.width = `${reference.offsetWidth}px`;\n },\n};\n","import React, { HTMLProps } from 'react';\n\nexport type PopoverContextType = {\n isOpen: boolean;\n usePortal: boolean;\n getPopoverProps: (\n _props: HTMLProps<HTMLDivElement>,\n _ref: React.Ref<HTMLDivElement>,\n ) => HTMLProps<HTMLDivElement>;\n getTriggerProps: (_ref: React.Ref<HTMLElement>) => HTMLProps<HTMLElement>;\n};\n\nconst PopoverContext = React.createContext<PopoverContextType | undefined>(\n undefined,\n);\n\nexport const usePopoverContext = () => {\n const context = React.useContext(PopoverContext);\n\n if (context === undefined) {\n throw new Error(\n 'usePopoverContext must be used within a PopoverContextProvider',\n );\n }\n\n return context;\n};\n\nexport const PopoverContextProvider = PopoverContext.Provider;\n","import React from 'react';\nimport { cx } from 'emotion';\nimport {\n CommonProps,\n PropsWithHTMLElement,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { usePopoverContext } from '../PopoverContext';\nimport { Portal } from '@contentful/f36-utils';\nimport { getPopoverContentStyles } from './PopoverContent.styles';\n\ninterface PopoverContentInternalProps extends CommonProps {\n children?: React.ReactNode;\n}\n\nexport type PopoverContentProps = PropsWithHTMLElement<\n PopoverContentInternalProps,\n 'div'\n>;\n\nconst _PopoverContent = (props: ExpandProps<PopoverContentProps>, ref) => {\n const {\n children,\n className,\n testId = 'cf-ui-popover-content',\n role = 'dialog',\n ...otherProps\n } = props;\n const { isOpen, getPopoverProps, usePortal } = usePopoverContext();\n\n const styles = getPopoverContentStyles(isOpen);\n\n const content = (\n <div\n {...otherProps}\n {...getPopoverProps(otherProps, ref)}\n className={cx(styles.container, className)}\n data-test-id={testId}\n tabIndex={-1}\n role={role}\n // specific attribute to mark that this element is absolute positioned\n // for internal contentful apps usage\n data-position-absolute\n >\n {children}\n </div>\n );\n\n return usePortal ? <Portal>{content}</Portal> : content;\n};\n\nexport const PopoverContent = React.forwardRef(_PopoverContent);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getPopoverContentStyles = (isOpen: boolean) => ({\n container: css({\n display: isOpen ? 'initial' : 'none',\n background: tokens.colorWhite,\n border: 0,\n borderRadius: tokens.borderRadiusMedium,\n boxShadow: tokens.boxShadowDefault,\n zIndex: tokens.zIndexDropdown,\n '&:focus': {\n outline: 'none',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n});\n","import React from 'react';\nimport { usePopoverContext } from '../PopoverContext';\n\nexport interface PopoverTriggerProps {\n children: React.ReactNode;\n}\n\n/**\n * PopoverTrigger opens the popover. It must be an interactive element.\n */\nexport const PopoverTrigger = (props: PopoverTriggerProps) => {\n const child = React.Children.only(props.children) as any;\n const { getTriggerProps } = usePopoverContext();\n\n return React.cloneElement(child, {\n ...getTriggerProps(child.ref),\n 'aria-haspopup': child.props['aria-haspopup'] ?? 'dialog',\n });\n};\n"],"names":["Popover","PopoverProps","PopoverTrigger","PopoverTriggerProps","PopoverContent","PopoverContentProps","OriginalPopover","CompoundPopover","Content","Trigger","React","useMemo","useState","useEffect","useCallback","useId","mergeRefs","ExpandProps","Placement","Modifier","PopoverContextProvider","PopoverContextType","usePopper","children","ReactNode","isFullWidth","isOpen","onClose","placement","isAutoalignmentEnabled","usePortal","closeOnBlur","closeOnEsc","autoFocus","id","offset","props","triggerElement","setTriggerElement","HTMLElement","popoverElement","setPopoverElement","attributes","popperAttributes","forceUpdate","styles","popperStyles","modifiers","name","options","sameWidth","enabled","mainAxis","focus","preventScroll","popoverGeneratedId","popoverId","closeAndFocusTrigger","setTimeout","contextValue","getTriggerProps","_ref","ref","Boolean","getPopoverProps","_props","popper","style","onBlur","event","FocusEvent","HTMLDivElement","relatedTarget","Node","targetIsPopover","contains","targetIsTrigger","onKeyDown","KeyboardEvent","key","phase","requires","fn","state","width","rects","reference","effect","elements","offsetWidth","HTMLProps","Ref","PopoverContext","createContext","undefined","usePopoverContext","context","useContext","Error","Provider","CommonProps","PropsWithHTMLElement","Portal","getPopoverContentStyles","PopoverContentInternalProps","_PopoverContent","className","testId","role","otherProps","content","container","forwardRef","tokens","display","background","colorWhite","border","borderRadius","borderRadiusMedium","boxShadow","boxShadowDefault","zIndex","zIndexDropdown","outline","glowPrimary","child","Children","only","cloneElement"],"version":3,"file":"main.js.map"}
package/dist/module.js ADDED
@@ -0,0 +1,222 @@
1
+ import $hYGFM$react, {useState as $hYGFM$useState, useEffect as $hYGFM$useEffect, useCallback as $hYGFM$useCallback, useMemo as $hYGFM$useMemo} from "react";
2
+ import {useId as $hYGFM$useId, mergeRefs as $hYGFM$mergeRefs} from "@contentful/f36-core";
3
+ import {usePopper as $hYGFM$usePopper} from "react-popper";
4
+ import {cx as $hYGFM$cx, css as $hYGFM$css} from "emotion";
5
+ import {Portal as $hYGFM$Portal} from "@contentful/f36-utils";
6
+ import $hYGFM$contentfulf36tokens from "@contentful/f36-tokens";
7
+
8
+
9
+
10
+
11
+ const $8c1b76e1106abdf5$var$PopoverContext = $hYGFM$react.createContext(undefined);
12
+ const $8c1b76e1106abdf5$export$1468d0761b26e6c8 = ()=>{
13
+ const context = $hYGFM$react.useContext($8c1b76e1106abdf5$var$PopoverContext);
14
+ if (context === undefined) throw new Error('usePopoverContext must be used within a PopoverContextProvider');
15
+ return context;
16
+ };
17
+ const $8c1b76e1106abdf5$export$f5300fbf692a63ec = $8c1b76e1106abdf5$var$PopoverContext.Provider;
18
+
19
+
20
+
21
+ function $fd548c9231cfa260$export$5b6b19405a83ff9d(props) {
22
+ const { children: children , isOpen: isOpen , placement: placement = 'bottom-start' , isFullWidth: isFullWidth = false , isAutoalignmentEnabled: isAutoalignmentEnabled = true , usePortal: usePortal = true , closeOnBlur: closeOnBlur = true , closeOnEsc: closeOnEsc = true , onClose: onClose , autoFocus: autoFocus = true , id: id , offset: offset = [
23
+ 1,
24
+ 4
25
+ ] } = props;
26
+ const [triggerElement, setTriggerElement] = $hYGFM$useState(null);
27
+ const [popoverElement, setPopoverElement] = $hYGFM$useState(null);
28
+ const { attributes: popperAttributes , forceUpdate: forceUpdate , styles: popperStyles } = $hYGFM$usePopper(triggerElement, popoverElement, {
29
+ placement: placement,
30
+ modifiers: [
31
+ {
32
+ name: 'offset',
33
+ options: {
34
+ offset: offset
35
+ }
36
+ },
37
+ {
38
+ ...$fd548c9231cfa260$var$sameWidth,
39
+ enabled: isFullWidth
40
+ },
41
+ {
42
+ name: 'preventOverflow',
43
+ enabled: isAutoalignmentEnabled,
44
+ options: {
45
+ mainAxis: true
46
+ }
47
+ },
48
+ {
49
+ name: 'flip',
50
+ enabled: isAutoalignmentEnabled
51
+ }
52
+ ]
53
+ });
54
+ $hYGFM$useEffect(()=>{
55
+ if (isOpen && autoFocus && popoverElement) popoverElement.focus({
56
+ preventScroll: true
57
+ });
58
+ // eslint-disable-next-line react-hooks/exhaustive-deps
59
+ }, [
60
+ isOpen,
61
+ popoverElement
62
+ ]);
63
+ $hYGFM$useEffect(()=>{
64
+ if (isOpen && forceUpdate) forceUpdate();
65
+ }, [
66
+ isOpen,
67
+ forceUpdate
68
+ ]);
69
+ const popoverGeneratedId = $hYGFM$useId(null, 'popover-content');
70
+ const popoverId = id || popoverGeneratedId;
71
+ const closeAndFocusTrigger = $hYGFM$useCallback(()=>{
72
+ onClose === null || onClose === void 0 ? void 0 : onClose(); // setTimeout trick to make it work with focus-lock
73
+ setTimeout(()=>{
74
+ return triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.focus({
75
+ preventScroll: true
76
+ });
77
+ }, 0);
78
+ }, [
79
+ onClose,
80
+ triggerElement
81
+ ]);
82
+ const contextValue = $hYGFM$useMemo(()=>{
83
+ return {
84
+ isOpen: isOpen,
85
+ usePortal: usePortal,
86
+ getTriggerProps: (_ref = null)=>({
87
+ ref: $hYGFM$mergeRefs(setTriggerElement, _ref),
88
+ ['aria-expanded']: Boolean(isOpen),
89
+ ['aria-controls']: popoverId
90
+ })
91
+ ,
92
+ getPopoverProps: (_props = {
93
+ }, _ref = null)=>{
94
+ return {
95
+ ...popperAttributes.popper,
96
+ style: {
97
+ ..._props.style || {
98
+ },
99
+ ...popperStyles.popper
100
+ },
101
+ ref: $hYGFM$mergeRefs(setPopoverElement, _ref),
102
+ id: popoverId,
103
+ onBlur: (event)=>{
104
+ if (_props.onBlur) _props.onBlur(event);
105
+ if (!closeOnBlur) return;
106
+ const relatedTarget = event.relatedTarget;
107
+ const targetIsPopover = popoverElement === relatedTarget || (popoverElement === null || popoverElement === void 0 ? void 0 : popoverElement.contains(relatedTarget));
108
+ const targetIsTrigger = triggerElement === relatedTarget || (triggerElement === null || triggerElement === void 0 ? void 0 : triggerElement.contains(relatedTarget));
109
+ if (targetIsPopover || targetIsTrigger) return;
110
+ onClose === null || onClose === void 0 ? void 0 : onClose();
111
+ },
112
+ onKeyDown: (event)=>{
113
+ if (_props.onKeyDown) _props.onKeyDown(event);
114
+ if (closeOnEsc && event.key === 'Escape') closeAndFocusTrigger();
115
+ }
116
+ };
117
+ }
118
+ };
119
+ }, [
120
+ isOpen,
121
+ popperAttributes,
122
+ popperStyles,
123
+ usePortal,
124
+ popoverId,
125
+ closeOnEsc,
126
+ closeOnBlur,
127
+ popoverElement,
128
+ triggerElement,
129
+ closeAndFocusTrigger,
130
+ onClose
131
+ ]);
132
+ return(/*#__PURE__*/ $hYGFM$react.createElement($8c1b76e1106abdf5$export$f5300fbf692a63ec, {
133
+ value: contextValue
134
+ }, children));
135
+ }
136
+ /**
137
+ * Sets the popover width to the size of the trigger element.
138
+ */ const $fd548c9231cfa260$var$sameWidth = {
139
+ name: 'sameWidth',
140
+ enabled: true,
141
+ phase: 'beforeWrite',
142
+ requires: [
143
+ 'computeStyles'
144
+ ],
145
+ fn: ({ state: state })=>{
146
+ state.styles.popper.width = `${state.rects.reference.width}px`;
147
+ },
148
+ effect: ({ state: state })=>()=>{
149
+ const reference = state.elements.reference;
150
+ state.elements.popper.style.width = `${reference.offsetWidth}px`;
151
+ }
152
+ };
153
+
154
+
155
+
156
+
157
+
158
+
159
+
160
+
161
+ const $8a165eef2449d46a$export$fbd764fe961047f7 = (isOpen)=>({
162
+ container: /*#__PURE__*/ $hYGFM$css({
163
+ display: isOpen ? 'initial' : 'none',
164
+ background: $hYGFM$contentfulf36tokens.colorWhite,
165
+ border: 0,
166
+ borderRadius: $hYGFM$contentfulf36tokens.borderRadiusMedium,
167
+ boxShadow: $hYGFM$contentfulf36tokens.boxShadowDefault,
168
+ zIndex: $hYGFM$contentfulf36tokens.zIndexDropdown,
169
+ '&:focus': {
170
+ outline: 'none'
171
+ },
172
+ '&:focus-visible': {
173
+ boxShadow: $hYGFM$contentfulf36tokens.glowPrimary
174
+ }
175
+ })
176
+ })
177
+ ;
178
+
179
+
180
+ const $249e5486684b1d2a$var$_PopoverContent = (props, ref)=>{
181
+ const { children: children , className: className , testId: testId = 'cf-ui-popover-content' , role: role = 'dialog' , ...otherProps } = props;
182
+ const { isOpen: isOpen , getPopoverProps: getPopoverProps , usePortal: usePortal } = $8c1b76e1106abdf5$export$1468d0761b26e6c8();
183
+ const styles = $8a165eef2449d46a$export$fbd764fe961047f7(isOpen);
184
+ const content = /*#__PURE__*/ $hYGFM$react.createElement("div", {
185
+ ...otherProps,
186
+ ...getPopoverProps(otherProps, ref),
187
+ className: $hYGFM$cx(styles.container, className),
188
+ "data-test-id": testId,
189
+ tabIndex: -1,
190
+ role: role,
191
+ // for internal contentful apps usage
192
+ "data-position-absolute": true
193
+ }, children);
194
+ return usePortal ? /*#__PURE__*/ $hYGFM$react.createElement($hYGFM$Portal, null, content) : content;
195
+ };
196
+ const $249e5486684b1d2a$export$d7e1f420b25549ff = /*#__PURE__*/ $hYGFM$react.forwardRef($249e5486684b1d2a$var$_PopoverContent);
197
+
198
+
199
+
200
+
201
+ const $2ab55052da688660$export$7dacb05d26466c3 = (props)=>{
202
+ const child = $hYGFM$react.Children.only(props.children);
203
+ const { getTriggerProps: getTriggerProps } = $8c1b76e1106abdf5$export$1468d0761b26e6c8();
204
+ var ref;
205
+ return(/*#__PURE__*/ $hYGFM$react.cloneElement(child, {
206
+ ...getTriggerProps(child.ref),
207
+ 'aria-haspopup': (ref = child.props['aria-haspopup']) !== null && ref !== void 0 ? ref : 'dialog'
208
+ }));
209
+ };
210
+
211
+
212
+ const $52a0de85cb27ef74$export$5b6b19405a83ff9d = $fd548c9231cfa260$export$5b6b19405a83ff9d;
213
+ $52a0de85cb27ef74$export$5b6b19405a83ff9d.Content = $249e5486684b1d2a$export$d7e1f420b25549ff;
214
+ $52a0de85cb27ef74$export$5b6b19405a83ff9d.Trigger = $2ab55052da688660$export$7dacb05d26466c3;
215
+
216
+
217
+
218
+
219
+
220
+
221
+ export {$52a0de85cb27ef74$export$5b6b19405a83ff9d as Popover, $2ab55052da688660$export$7dacb05d26466c3 as PopoverTrigger, $249e5486684b1d2a$export$d7e1f420b25549ff as PopoverContent};
222
+ //# sourceMappingURL=module.js.map