@codecademy/gamut 72.2.2-alpha.dfb0a2.0 → 72.2.2-alpha.f96392.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.
- package/dist/Alert/elements.d.ts +4 -4
- package/dist/Anchor/index.d.ts +9 -19
- package/dist/Anchor/index.js +6 -9
- package/dist/BarChart/BarRow/elements.d.ts +154 -156
- package/dist/BarChart/utils/hooks.d.ts +2 -2
- package/dist/BarChart/utils/hooks.js +1 -3
- package/dist/Box/GridBox.d.ts +0 -1
- package/dist/Box/GridBox.js +1 -1
- package/dist/Box/props.d.ts +1 -1
- package/dist/Breadcrumbs/index.d.ts +5 -5
- package/dist/Breadcrumbs/index.js +2 -2
- package/dist/Button/CTAButton.d.ts +2 -2
- package/dist/Button/FillButton.d.ts +4 -4
- package/dist/Button/IconButton.d.ts +4 -4
- package/dist/Button/StrokeButton.d.ts +4 -4
- package/dist/Button/TextButton.d.ts +4 -4
- package/dist/Button/index.d.ts +1 -1
- package/dist/Button/shared/InlineIconButton.d.ts +2 -2
- package/dist/Button/shared/styles.d.ts +3 -3
- package/dist/Button/shared/types.d.ts +1 -1
- package/dist/ButtonBase/ButtonBase.d.ts +4 -9
- package/dist/ButtonBase/ButtonBase.js +4 -11
- package/dist/ButtonBase/index.d.ts +1 -1
- package/dist/ButtonBase/index.js +1 -1
- package/dist/Card/elements.d.ts +430 -436
- package/dist/Card/styles.d.ts +8 -8
- package/dist/Coachmark/index.d.ts +1 -1
- package/dist/ConnectedForm/ConnectedForm.d.ts +1 -1
- package/dist/ConnectedForm/ConnectedFormGroup.js +7 -5
- package/dist/ConnectedForm/ConnectedInputs/ConnectedCheckbox.js +3 -1
- package/dist/ConnectedForm/utils.d.ts +1 -1
- package/dist/ConnectedForm/utils.js +1 -1
- package/dist/DataList/Tables/Rows/TableRow.js +5 -1
- package/dist/DatePicker/DatePickerInput/index.d.ts +1 -1
- package/dist/Disclosure/elements.d.ts +18 -24
- package/dist/FeatureShimmer/index.js +1 -1
- package/dist/Form/SelectDropdown/SelectDropdown.js +1 -1
- package/dist/Form/SelectDropdown/elements/containers.js +1 -1
- package/dist/Form/SelectDropdown/elements/controls.js +2 -2
- package/dist/Form/SelectDropdown/elements/multi-value.js +2 -2
- package/dist/Form/SelectDropdown/types/internal.d.ts +2 -2
- package/dist/Form/SelectDropdown/utils.js +1 -2
- package/dist/Form/elements/Form.d.ts +93 -93
- package/dist/Form/elements/FormGroup.d.ts +1 -1
- package/dist/Form/index.d.ts +0 -2
- package/dist/Form/index.js +1 -2
- package/dist/Form/styles/Checkbox-styles.d.ts +1 -1
- package/dist/GridForm/GridFormButtons/index.d.ts +7 -7
- package/dist/List/ListProvider.d.ts +1 -1
- package/dist/List/ListRow.js +3 -2
- package/dist/List/elements.d.ts +151 -153
- package/dist/Markdown/index.d.ts +1 -1
- package/dist/Markdown/index.js +1 -1
- package/dist/Menu/MenuItem.js +8 -11
- package/dist/Menu/MenuSeparator.js +2 -2
- package/dist/Menu/elements.d.ts +2 -2
- package/dist/Menu/index.d.ts +0 -1
- package/dist/Menu/index.js +1 -2
- package/dist/Modals/Dialog.js +2 -6
- package/dist/Modals/Modal.js +2 -5
- package/dist/Modals/elements.d.ts +35 -35
- package/dist/Pagination/AnimatedPaginationButtons.d.ts +108 -110
- package/dist/Pagination/EllipsisButton.d.ts +4 -4
- package/dist/Pagination/PaginationButton.d.ts +6 -6
- package/dist/Pagination/utils.d.ts +108 -110
- package/dist/Pagination/utils.js +11 -14
- package/dist/PatternBackdrop/PatternBackdrop.d.ts +34 -34
- package/dist/Popover/Popover.js +6 -6
- package/dist/Popover/types.d.ts +3 -4
- package/dist/PopoverContainer/PopoverContainer.js +9 -9
- package/dist/PopoverContainer/hooks.d.ts +4 -16
- package/dist/PopoverContainer/hooks.js +27 -50
- package/dist/PopoverContainer/types.d.ts +1 -2
- package/dist/Tabs/TabButton.d.ts +2 -2
- package/dist/Tabs/TabNavLink.d.ts +2 -2
- package/dist/Tabs/TabNavLink.js +2 -2
- package/dist/Tag/elements.d.ts +10 -16
- package/dist/Tag/index.js +1 -1
- package/dist/Tip/InfoTip/InfoTipButton.d.ts +4 -4
- package/dist/Tip/PreviewTip/elements.d.ts +6 -12
- package/dist/Tip/__tests__/helpers.d.ts +1 -1
- package/dist/Tip/shared/FloatingTip.js +2 -2
- package/dist/Tip/shared/types.d.ts +2 -2
- package/dist/Tip/shared/utils.js +1 -1
- package/dist/Toggle/elements.d.ts +38 -38
- package/dist/Typography/Text.d.ts +1 -2
- package/dist/Typography/Text.js +2 -3
- package/dist/Video/lib/VidstackPlayer.d.ts +1 -1
- package/dist/Video/lib/VidstackPlayer.js +12 -5
- package/dist/Video/styles.d.ts +1 -0
- package/dist/Video/styles.js +10 -0
- package/dist/Video/vidstack-vendor.css +3 -0
- package/dist/utils/react.js +2 -4
- package/package.json +12 -19
- package/dist/Video/styles/vds_base_theme.scss +0 -101
- package/dist/utils/nullish.d.ts +0 -10
- package/dist/utils/nullish.js +0 -11
package/dist/Pagination/utils.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import { timingValues } from '@codecademy/gamut-styles';
|
|
2
1
|
import { AnimatePresence, motion } from 'framer-motion';
|
|
3
2
|
import { useEffect, useRef } from 'react';
|
|
4
3
|
import * as React from 'react';
|
|
5
4
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
const FADE_DURATION_SECONDS = timingValues.base / 1000;
|
|
7
5
|
export const shouldPagesChange = ({
|
|
8
6
|
chapterSize,
|
|
9
7
|
currentPage,
|
|
@@ -51,7 +49,7 @@ export const wrapWithSlideAnimation = WrappedComponent => {
|
|
|
51
49
|
exit: "hidden",
|
|
52
50
|
initial: props.buttonDirection === 'forward' && isFirstRender.current ? 'shown' : 'hidden',
|
|
53
51
|
transition: {
|
|
54
|
-
duration:
|
|
52
|
+
duration: 0.3
|
|
55
53
|
},
|
|
56
54
|
variants: slideAnimationVariants,
|
|
57
55
|
children: /*#__PURE__*/_jsx(WrappedComponent, {
|
|
@@ -71,16 +69,6 @@ const fadeAnimationVariants = {
|
|
|
71
69
|
cursor: 'default'
|
|
72
70
|
}
|
|
73
71
|
};
|
|
74
|
-
const fadeTransition = {
|
|
75
|
-
duration: FADE_DURATION_SECONDS,
|
|
76
|
-
ease: 'easeOut',
|
|
77
|
-
transitionStart: {
|
|
78
|
-
visibility: 'visible'
|
|
79
|
-
},
|
|
80
|
-
transitionEnd: {
|
|
81
|
-
visibility: 'hidden'
|
|
82
|
-
}
|
|
83
|
-
};
|
|
84
72
|
export const createAnimatedFadeButton = WrappedComponent => {
|
|
85
73
|
const AnimatedButton = motion.create(WrappedComponent);
|
|
86
74
|
return props => /*#__PURE__*/_jsx(AnimatedButton, {
|
|
@@ -88,7 +76,16 @@ export const createAnimatedFadeButton = WrappedComponent => {
|
|
|
88
76
|
"aria-label": props.showButton === 'hidden' ? undefined : props['aria-label'],
|
|
89
77
|
disabled: props.showButton === 'hidden',
|
|
90
78
|
initial: false,
|
|
91
|
-
transition:
|
|
79
|
+
transition: {
|
|
80
|
+
transitionStart: {
|
|
81
|
+
visibility: 'visible'
|
|
82
|
+
},
|
|
83
|
+
duration: 0.3,
|
|
84
|
+
ease: [0.04, 0.62, 0.23, 0.98],
|
|
85
|
+
transitionEnd: {
|
|
86
|
+
visibility: 'hidden'
|
|
87
|
+
}
|
|
88
|
+
},
|
|
92
89
|
variants: fadeAnimationVariants,
|
|
93
90
|
...props
|
|
94
91
|
});
|
|
@@ -6,11 +6,11 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
6
6
|
theme?: import("@emotion/react").Theme;
|
|
7
7
|
as?: React.ElementType;
|
|
8
8
|
} & {
|
|
9
|
-
p?: import("@codecademy/variance").Scale<{
|
|
9
|
+
p?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
10
10
|
readonly property: "padding";
|
|
11
11
|
readonly scale: "spacing";
|
|
12
12
|
}>;
|
|
13
|
-
height?: import("@codecademy/variance").Scale<{
|
|
13
|
+
height?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
14
14
|
readonly property: {
|
|
15
15
|
readonly physical: "height";
|
|
16
16
|
readonly logical: "blockSize";
|
|
@@ -18,7 +18,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
18
18
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
19
19
|
readonly transform: (value: string | number) => string | 0;
|
|
20
20
|
}>;
|
|
21
|
-
width?: import("@codecademy/variance").Scale<{
|
|
21
|
+
width?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
22
22
|
readonly property: {
|
|
23
23
|
readonly physical: "width";
|
|
24
24
|
readonly logical: "inlineSize";
|
|
@@ -26,43 +26,43 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
26
26
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
27
27
|
readonly transform: (value: string | number) => string | 0;
|
|
28
28
|
}>;
|
|
29
|
-
alignSelf?: import("@codecademy/variance").Scale<{
|
|
29
|
+
alignSelf?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
30
30
|
readonly property: "alignSelf";
|
|
31
31
|
}>;
|
|
32
|
-
containerType?: import("@codecademy/variance").Scale<{
|
|
32
|
+
containerType?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
33
33
|
readonly property: "containerType";
|
|
34
34
|
}>;
|
|
35
|
-
direction?: import("@codecademy/variance").Scale<{
|
|
35
|
+
direction?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
36
36
|
readonly property: "direction";
|
|
37
37
|
}>;
|
|
38
|
-
display?: import("@codecademy/variance").Scale<{
|
|
38
|
+
display?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
39
39
|
readonly property: "display";
|
|
40
40
|
}>;
|
|
41
|
-
flexBasis?: import("@codecademy/variance").Scale<{
|
|
41
|
+
flexBasis?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
42
42
|
readonly property: "flexBasis";
|
|
43
43
|
}>;
|
|
44
|
-
flexGrow?: import("@codecademy/variance").Scale<{
|
|
44
|
+
flexGrow?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
45
45
|
readonly property: "flexGrow";
|
|
46
46
|
}>;
|
|
47
|
-
flexShrink?: import("@codecademy/variance").Scale<{
|
|
47
|
+
flexShrink?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
48
48
|
readonly property: "flexShrink";
|
|
49
49
|
}>;
|
|
50
|
-
gridColumnEnd?: import("@codecademy/variance").Scale<{
|
|
50
|
+
gridColumnEnd?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
51
51
|
readonly property: "gridColumnEnd";
|
|
52
52
|
}>;
|
|
53
|
-
gridColumnStart?: import("@codecademy/variance").Scale<{
|
|
53
|
+
gridColumnStart?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
54
54
|
readonly property: "gridColumnStart";
|
|
55
55
|
}>;
|
|
56
|
-
gridRowEnd?: import("@codecademy/variance").Scale<{
|
|
56
|
+
gridRowEnd?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
57
57
|
readonly property: "gridRowEnd";
|
|
58
58
|
}>;
|
|
59
|
-
gridRowStart?: import("@codecademy/variance").Scale<{
|
|
59
|
+
gridRowStart?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
60
60
|
readonly property: "gridRowStart";
|
|
61
61
|
}>;
|
|
62
|
-
justifySelf?: import("@codecademy/variance").Scale<{
|
|
62
|
+
justifySelf?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
63
63
|
readonly property: "justifySelf";
|
|
64
64
|
}>;
|
|
65
|
-
maxHeight?: import("@codecademy/variance").Scale<{
|
|
65
|
+
maxHeight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
66
66
|
readonly property: {
|
|
67
67
|
readonly physical: "maxHeight";
|
|
68
68
|
readonly logical: "maxBlockSize";
|
|
@@ -70,7 +70,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
70
70
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
71
71
|
readonly transform: (value: string | number) => string | 0;
|
|
72
72
|
}>;
|
|
73
|
-
maxWidth?: import("@codecademy/variance").Scale<{
|
|
73
|
+
maxWidth?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
74
74
|
readonly property: {
|
|
75
75
|
readonly physical: "maxWidth";
|
|
76
76
|
readonly logical: "maxInlineSize";
|
|
@@ -78,7 +78,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
78
78
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
79
79
|
readonly transform: (value: string | number) => string | 0;
|
|
80
80
|
}>;
|
|
81
|
-
minHeight?: import("@codecademy/variance").Scale<{
|
|
81
|
+
minHeight?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
82
82
|
readonly property: {
|
|
83
83
|
readonly physical: "minHeight";
|
|
84
84
|
readonly logical: "minBlockSize";
|
|
@@ -86,7 +86,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
86
86
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
87
87
|
readonly transform: (value: string | number) => string | 0;
|
|
88
88
|
}>;
|
|
89
|
-
minWidth?: import("@codecademy/variance").Scale<{
|
|
89
|
+
minWidth?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
90
90
|
readonly property: {
|
|
91
91
|
readonly physical: "minWidth";
|
|
92
92
|
readonly logical: "minInlineSize";
|
|
@@ -94,39 +94,39 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
94
94
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
95
95
|
readonly transform: (value: string | number) => string | 0;
|
|
96
96
|
}>;
|
|
97
|
-
order?: import("@codecademy/variance").Scale<{
|
|
97
|
+
order?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
98
98
|
readonly property: "order";
|
|
99
99
|
}>;
|
|
100
|
-
overflowX?: import("@codecademy/variance").Scale<{
|
|
100
|
+
overflowX?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
101
101
|
readonly property: {
|
|
102
102
|
readonly physical: "overflowX";
|
|
103
103
|
readonly logical: "overflowInline";
|
|
104
104
|
};
|
|
105
105
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
106
106
|
}>;
|
|
107
|
-
overflowY?: import("@codecademy/variance").Scale<{
|
|
107
|
+
overflowY?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
108
108
|
readonly property: {
|
|
109
109
|
readonly physical: "overflowY";
|
|
110
110
|
readonly logical: "overflowBlock";
|
|
111
111
|
};
|
|
112
112
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
113
113
|
}>;
|
|
114
|
-
verticalAlign?: import("@codecademy/variance").Scale<{
|
|
114
|
+
verticalAlign?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
115
115
|
readonly property: "verticalAlign";
|
|
116
116
|
}>;
|
|
117
|
-
gridArea?: import("@codecademy/variance").Scale<{
|
|
117
|
+
gridArea?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
118
118
|
readonly property: "gridArea";
|
|
119
119
|
}>;
|
|
120
|
-
gridColumn?: import("@codecademy/variance").Scale<{
|
|
120
|
+
gridColumn?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
121
121
|
readonly property: "gridColumn";
|
|
122
122
|
}>;
|
|
123
|
-
gridRow?: import("@codecademy/variance").Scale<{
|
|
123
|
+
gridRow?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
124
124
|
readonly property: "gridRow";
|
|
125
125
|
}>;
|
|
126
|
-
overflow?: import("@codecademy/variance").Scale<{
|
|
126
|
+
overflow?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
127
127
|
readonly property: "overflow";
|
|
128
128
|
}>;
|
|
129
|
-
px?: import("@codecademy/variance").Scale<{
|
|
129
|
+
px?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
130
130
|
readonly property: "padding";
|
|
131
131
|
readonly properties: {
|
|
132
132
|
readonly physical: readonly ["paddingLeft", "paddingRight"];
|
|
@@ -135,7 +135,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
135
135
|
readonly scale: "spacing";
|
|
136
136
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
137
137
|
}>;
|
|
138
|
-
py?: import("@codecademy/variance").Scale<{
|
|
138
|
+
py?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
139
139
|
readonly property: "padding";
|
|
140
140
|
readonly properties: {
|
|
141
141
|
readonly physical: readonly ["paddingTop", "paddingBottom"];
|
|
@@ -144,7 +144,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
144
144
|
readonly scale: "spacing";
|
|
145
145
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
146
146
|
}>;
|
|
147
|
-
pt?: import("@codecademy/variance").Scale<{
|
|
147
|
+
pt?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
148
148
|
readonly property: {
|
|
149
149
|
readonly physical: "paddingTop";
|
|
150
150
|
readonly logical: "paddingBlockStart";
|
|
@@ -152,7 +152,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
152
152
|
readonly scale: "spacing";
|
|
153
153
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
154
154
|
}>;
|
|
155
|
-
pb?: import("@codecademy/variance").Scale<{
|
|
155
|
+
pb?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
156
156
|
readonly property: {
|
|
157
157
|
readonly physical: "paddingBottom";
|
|
158
158
|
readonly logical: "paddingBlockEnd";
|
|
@@ -160,7 +160,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
160
160
|
readonly scale: "spacing";
|
|
161
161
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
162
162
|
}>;
|
|
163
|
-
pr?: import("@codecademy/variance").Scale<{
|
|
163
|
+
pr?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
164
164
|
readonly property: {
|
|
165
165
|
readonly physical: "paddingRight";
|
|
166
166
|
readonly logical: "paddingInlineEnd";
|
|
@@ -168,7 +168,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
168
168
|
readonly scale: "spacing";
|
|
169
169
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
170
170
|
}>;
|
|
171
|
-
pl?: import("@codecademy/variance").Scale<{
|
|
171
|
+
pl?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
172
172
|
readonly property: {
|
|
173
173
|
readonly physical: "paddingLeft";
|
|
174
174
|
readonly logical: "paddingInlineStart";
|
|
@@ -176,7 +176,7 @@ export declare const PatternBackdrop: import("react").ForwardRefExoticComponent<
|
|
|
176
176
|
readonly scale: "spacing";
|
|
177
177
|
readonly resolveProperty: (useLogicalProperties: boolean) => import("@codecademy/variance/dist/types/properties").PropertyMode;
|
|
178
178
|
}>;
|
|
179
|
-
dimensions?: import("@codecademy/variance").Scale<{
|
|
179
|
+
dimensions?: import("@codecademy/variance/dist/types/config").Scale<{
|
|
180
180
|
readonly property: "width";
|
|
181
181
|
readonly properties: {
|
|
182
182
|
readonly physical: readonly ["width", "height"];
|
package/dist/Popover/Popover.js
CHANGED
|
@@ -2,7 +2,7 @@ import { useElementDir, useLogicalProperties } from '@codecademy/gamut-styles';
|
|
|
2
2
|
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { useWindowScroll, useWindowSize } from 'react-use';
|
|
4
4
|
import { FocusTrap } from '../FocusTrap';
|
|
5
|
-
import {
|
|
5
|
+
import { useResizingParentEffect, useScrollingParentsEffect } from '../PopoverContainer/hooks';
|
|
6
6
|
import { Beak, BeakBox, PatternContainer, PopoverContainer, PopoverPortal, RaisedDiv } from './elements';
|
|
7
7
|
import { getBeakVariant } from './styles/beak';
|
|
8
8
|
import { getDefaultOffset, resolveHorizontalSideForRtl } from './utils';
|
|
@@ -113,10 +113,10 @@ export const Popover = ({
|
|
|
113
113
|
};
|
|
114
114
|
}, [horizontalOffset, popoverHeight, popoverWidth, position, resolvedSideAlign, targetRect, verticalOffset]);
|
|
115
115
|
useEffect(() => {
|
|
116
|
-
setTargetRect(
|
|
116
|
+
setTargetRect(targetRef?.current?.getBoundingClientRect());
|
|
117
117
|
}, [targetRef, isOpen, width, height, x, y]);
|
|
118
118
|
const updateTargetPosition = useCallback(rect => {
|
|
119
|
-
const target =
|
|
119
|
+
const target = targetRef?.current;
|
|
120
120
|
if (!target) return;
|
|
121
121
|
const newRect = rect || target.getBoundingClientRect();
|
|
122
122
|
setTargetRect(newRect);
|
|
@@ -132,7 +132,7 @@ export const Popover = ({
|
|
|
132
132
|
}, [targetRect, isInViewport, onRequestClose]);
|
|
133
133
|
const handleClickOutside = useCallback(e => {
|
|
134
134
|
const target = e.target;
|
|
135
|
-
const targetElement =
|
|
135
|
+
const targetElement = targetRef.current;
|
|
136
136
|
if (!targetElement) return;
|
|
137
137
|
|
|
138
138
|
/**
|
|
@@ -142,7 +142,7 @@ export const Popover = ({
|
|
|
142
142
|
if (targetElement.contains(target)) return;
|
|
143
143
|
onRequestClose?.();
|
|
144
144
|
}, [onRequestClose, targetRef]);
|
|
145
|
-
if ((!isOpen || !targetRef
|
|
145
|
+
if ((!isOpen || !targetRef) && !animation) return null;
|
|
146
146
|
const alignment = (variant === 'primary' || beak) && beak !== 'center' ? 'aligned' : 'centered';
|
|
147
147
|
const contents = /*#__PURE__*/_jsxs(PopoverContainer, {
|
|
148
148
|
align: resolvedSideAlign,
|
|
@@ -187,7 +187,7 @@ export const Popover = ({
|
|
|
187
187
|
});
|
|
188
188
|
return /*#__PURE__*/_jsx(PopoverPortal, {
|
|
189
189
|
animation: animation,
|
|
190
|
-
isOpen: Boolean(isOpen && targetRef
|
|
190
|
+
isOpen: Boolean(isOpen && targetRef),
|
|
191
191
|
children: skipFocusTrap ? /*#__PURE__*/_jsx(_Fragment, {
|
|
192
192
|
children: contents
|
|
193
193
|
}) : /*#__PURE__*/_jsx(FocusTrap, {
|
package/dist/Popover/types.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { PatternProps } from '@codecademy/gamut-patterns';
|
|
2
|
-
import { HTMLAttributes
|
|
2
|
+
import { HTMLAttributes } from 'react';
|
|
3
3
|
import { PopoverVariants } from './elements';
|
|
4
4
|
export type FocusTrapPopoverProps = {
|
|
5
5
|
/**
|
|
@@ -90,13 +90,12 @@ export type PopoverProps = PopoverBaseProps & PopoverVariants & Pick<HTMLAttribu
|
|
|
90
90
|
isOpen: boolean;
|
|
91
91
|
/**
|
|
92
92
|
* The target element around which the popover will be positioned.
|
|
93
|
-
* Only ref objects (e.g. from useRef) are supported at runtime; RefCallback is not.
|
|
94
93
|
*/
|
|
95
|
-
targetRef: RefObject<
|
|
94
|
+
targetRef: React.RefObject<Pick<HTMLDivElement, 'getBoundingClientRect' | 'contains'>>;
|
|
96
95
|
/**
|
|
97
96
|
* The PopoverContainer which contents will be rendered into.
|
|
98
97
|
*/
|
|
99
|
-
popoverContainerRef?: React.
|
|
98
|
+
popoverContainerRef?: React.RefObject<HTMLDivElement> | React.RefCallback<HTMLDivElement>;
|
|
100
99
|
/**
|
|
101
100
|
* Whether to add width restrictions to Popover.
|
|
102
101
|
*/
|
|
@@ -6,7 +6,7 @@ import * as React from 'react';
|
|
|
6
6
|
import { useWindowScroll, useWindowSize } from 'react-use';
|
|
7
7
|
import { BodyPortal } from '../BodyPortal';
|
|
8
8
|
import { FocusTrap } from '../FocusTrap';
|
|
9
|
-
import {
|
|
9
|
+
import { useResizingParentEffect, useScrollingParents, useScrollingParentsEffect } from './hooks';
|
|
10
10
|
import { getContainers, getPosition, isOutOfView } from './utils';
|
|
11
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
12
|
const PopoverContent = /*#__PURE__*/_styled("div", {
|
|
@@ -16,7 +16,7 @@ const PopoverContent = /*#__PURE__*/_styled("div", {
|
|
|
16
16
|
transform: {
|
|
17
17
|
property: 'transform'
|
|
18
18
|
}
|
|
19
|
-
})), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb3BvdmVyQ29udGFpbmVyL1BvcG92ZXJDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQW1CdUIiLCJmaWxlIjoiLi4vLi4vc3JjL1BvcG92ZXJDb250YWluZXIvUG9wb3ZlckNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBlbGVtZW50RGlyLCBzeXN0ZW0sIHVzZUVsZW1lbnREaXIgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VNZW1vLCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlV2luZG93U2Nyb2xsLCB1c2VXaW5kb3dTaXplIH0gZnJvbSAncmVhY3QtdXNlJztcblxuaW1wb3J0IHsgQm9keVBvcnRhbCB9IGZyb20gJy4uL0JvZHlQb3J0YWwnO1xuaW1wb3J0IHsgRm9jdXNUcmFwIH0gZnJvbSAnLi4vRm9jdXNUcmFwJztcbmltcG9ydCB7XG4gIGdldFJlZkVsZW1lbnQsXG4gIGdldFRhcmdldEFzRWxlbWVudCxcbiAgdXNlUmVzaXppbmdQYXJlbnRFZmZlY3QsXG4gIHVzZVNjcm9sbGluZ1BhcmVudHMsXG4gIHVzZVNjcm9sbGluZ1BhcmVudHNFZmZlY3QsXG59IGZyb20gJy4vaG9va3MnO1xuaW1wb3J0IHsgQ29udGFpbmVyU3RhdGUsIFBvcG92ZXJDb250YWluZXJQcm9wcywgVGFyZ2V0UmVmIH0gZnJvbSAnLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRDb250YWluZXJzLCBnZXRQb3NpdGlvbiwgaXNPdXRPZlZpZXcgfSBmcm9tICcuL3V0aWxzJztcblxuY29uc3QgUG9wb3ZlckNvbnRlbnQgPSBzdHlsZWQuZGl2KFxuICB2YXJpYW5jZS5jb21wb3NlKFxuICAgIHN5c3RlbS5wb3NpdGlvbmluZyxcbiAgICB2YXJpYW5jZS5jcmVhdGUoe1xuICAgICAgdHJhbnNmb3JtOiB7XG4gICAgICAgIHByb3BlcnR5OiAndHJhbnNmb3JtJyxcbiAgICAgIH0sXG4gICAgfSlcbiAgKVxuKTtcblxuZXhwb3J0IGNvbnN0IFBvcG92ZXJDb250YWluZXI6IFJlYWN0LkZDPFBvcG92ZXJDb250YWluZXJQcm9wcz4gPSAoe1xuICBhbGlnbm1lbnQgPSAnYm90dG9tLWxlZnQnLFxuICBvZmZzZXQgPSAyMCxcbiAgeSA9IDAsXG4gIHggPSAwLFxuICBpbnZlcnRBeGlzLFxuICBpbmxpbmUgPSBmYWxzZSxcbiAgaXNPcGVuLFxuICBvblJlcXVlc3RDbG9zZSxcbiAgdGFyZ2V0UmVmLFxuICBhbGxvd1BhZ2VJbnRlcmFjdGlvbixcbiAgY2xvc2VPblZpZXdwb3J0RXhpdCA9IGZhbHNlLFxuICBmb2N1c09uUHJvcHMsXG4gIC4uLnJlc3Rcbn0pID0+IHtcbiAgY29uc3QgcG9wb3ZlclJlZiA9IHVzZVJlZjxIVE1MRGl2RWxlbWVudD4obnVsbCk7XG4gIGNvbnN0IGhhc1JlcXVlc3RlZENsb3NlUmVmID0gdXNlUmVmKGZhbHNlKTtcbiAgY29uc3Qgb25SZXF1ZXN0Q2xvc2VSZWYgPSB1c2VSZWYob25SZXF1ZXN0Q2xvc2UpO1xuICBjb25zdCB7IHdpZHRoOiB3aW5XLCBoZWlnaHQ6IHdpbkggfSA9IHVzZVdpbmRvd1NpemUoKTtcbiAgY29uc3QgeyB4OiB3aW5YLCB5OiB3aW5ZIH0gPSB1c2VXaW5kb3dTY3JvbGwoKTtcbiAgY29uc3QgW2NvbnRhaW5lcnMsIHNldENvbnRhaW5lcnNdID0gdXNlU3RhdGU8Q29udGFpbmVyU3RhdGU+KCk7XG4gIGNvbnN0IFt0YXJnZXRSZWN0LCBzZXRUYXJnZXRSZWN0XSA9IHVzZVN0YXRlPERPTVJlY3Q+KCk7XG4gIGNvbnN0IHBhcmVudCA9IGNvbnRhaW5lcnM/LnBhcmVudDtcblxuICAvLyBNZW1vaXplIHNjcm9sbGluZyBwYXJlbnRzIHRvIGF2b2lkIGV4cGVuc2l2ZSBET00gdHJhdmVyc2Fsc1xuICBjb25zdCBzY3JvbGxpbmdQYXJlbnRzID0gdXNlU2Nyb2xsaW5nUGFyZW50cyh0YXJnZXRSZWYpO1xuXG4gIC8vIEtlZXAgb25SZXF1ZXN0Q2xvc2UgcmVmIHVwIHRvIGRhdGVcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBvblJlcXVlc3RDbG9zZVJlZi5jdXJyZW50ID0gb25SZXF1ZXN0Q2xvc2U7XG4gIH0sIFtvblJlcXVlc3RDbG9zZV0pO1xuXG4gIGNvbnN0IHRhcmdldERpciA9IHVzZUVsZW1lbnREaXIodGFyZ2V0UmVmKTtcblxuICBjb25zdCB0YXJnZXRFbCA9IHRhcmdldFJlZj8uY3VycmVudDtcbiAgLyoqXG4gICAqIFNlZSB7QGxpbmsgZ2V0Q29udGFpbmVyc30gZm9yIG1vcmUgaW5mb3JtYXRpb25cbiAgICogSW5saW5lOiBgbGF5b3V0U291cmNlYCBpcyBkZXJpdmVkIGZyb20gYG9mZnNldFBhcmVudGAuXG4gICAqIFBvcnRhbDogaS5lLiBpc24ndCBpbmxpbmUgc28gd2UgY2FuIHVzZSB0aGUgdGFyZ2V0IGl0c2VsZi5cbiAgICovXG4gIGNvbnN0IGxheW91dFNvdXJjZSA9XG4gICAgaW5saW5lICYmIHRhcmdldEVsPy5vZmZzZXRQYXJlbnQgaW5zdGFuY2VvZiBFbGVtZW50XG4gICAgICA/IHRhcmdldEVsLm9mZnNldFBhcmVudFxuICAgICAgOiB0YXJnZXRFbDtcbiAgY29uc3QgaXNSdGwgPSBpbmxpbmVcbiAgICA/IGxheW91dFNvdXJjZSBpbnN0YW5jZW9mIEVsZW1lbnQgJiYgZWxlbWVudERpcihsYXlvdXRTb3VyY2UpID09PSAncnRsJ1xuICAgIDogdGFyZ2V0RGlyID09PSAncnRsJztcblxuICBjb25zdCBwb3BvdmVyUG9zaXRpb24gPSB1c2VNZW1vKCgpID0+IHtcbiAgICBpZiAocGFyZW50ICE9PSB1bmRlZmluZWQpIHtcbiAgICAgIHJldHVybiBnZXRQb3NpdGlvbih7XG4gICAgICAgIGFsaWdubWVudCxcbiAgICAgICAgY29udGFpbmVyOiBwYXJlbnQsXG4gICAgICAgIGludmVydEF4aXMsXG4gICAgICAgIGlzUnRsLFxuICAgICAgICBvZmZzZXQsXG4gICAgICAgIHgsXG4gICAgICAgIHksXG4gICAgICB9KTtcbiAgICB9XG4gICAgcmV0dXJuIHsgc3R5bGVzOiB7fSwgZGlyTmV1dHJhbFN0eWxlczogdW5kZWZpbmVkIH07XG4gIH0sIFtwYXJlbnQsIHgsIHksIG9mZnNldCwgYWxpZ25tZW50LCBpbnZlcnRBeGlzLCBpc1J0bF0pO1xuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgdGFyZ2V0ID0gZ2V0UmVmRWxlbWVudCh0YXJnZXRSZWYpO1xuICAgIGlmICghdGFyZ2V0KSByZXR1cm47XG4gICAgc2V0Q29udGFpbmVycyhcbiAgICAgIGdldENvbnRhaW5lcnModGFyZ2V0IGFzIFRhcmdldFJlZiwgaW5saW5lLCB7IHg6IHdpblgsIHk6IHdpblkgfSlcbiAgICApO1xuICB9LCBbdGFyZ2V0UmVmLCBpbmxpbmUsIHdpblcsIHdpbkgsIHdpblgsIHdpblksIHRhcmdldFJlY3RdKTtcblxuICAvLyBVcGRhdGUgdGFyZ2V0IHJlY3RhbmdsZSB3aGVuIHdpbmRvdyBzaXplL3Njcm9sbCBjaGFuZ2VzXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgc2V0VGFyZ2V0UmVjdChnZXRSZWZFbGVtZW50KHRhcmdldFJlZik/LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpKTtcbiAgfSwgW3RhcmdldFJlZiwgaXNPcGVuLCB3aW5XLCB3aW5ILCB3aW5YLCB3aW5ZXSk7XG5cbiAgLy8gVXBkYXRlIHRhcmdldCByZWN0YW5nbGUgd2hlbiBwYXJlbnQgc2l6ZS9zY3JvbGwgY2hhbmdlc1xuICBjb25zdCB1cGRhdGVUYXJnZXRQb3NpdGlvbiA9IHVzZUNhbGxiYWNrKFxuICAgIChyZWN0PzogRE9NUmVjdCkgPT4ge1xuICAgICAgY29uc3QgdGFyZ2V0ID0gZ2V0UmVmRWxlbWVudCh0YXJnZXRSZWYpO1xuICAgICAgaWYgKCF0YXJnZXQpIHJldHVybjtcblxuICAgICAgY29uc3QgbmV3UmVjdCA9IHJlY3QgfHwgdGFyZ2V0LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpO1xuICAgICAgc2V0VGFyZ2V0UmVjdChuZXdSZWN0KTtcblxuICAgICAgY29uc3QgY3VycmVudFNjcm9sbFggPVxuICAgICAgICB3aW5kb3cucGFnZVhPZmZzZXQgfHwgZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LnNjcm9sbExlZnQ7XG4gICAgICBjb25zdCBjdXJyZW50U2Nyb2xsWSA9XG4gICAgICAgIHdpbmRvdy5wYWdlWU9mZnNldCB8fCBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2Nyb2xsVG9wO1xuXG4gICAgICBzZXRDb250YWluZXJzKFxuICAgICAgICBnZXRDb250YWluZXJzKHRhcmdldCBhcyBUYXJnZXRSZWYsIGlubGluZSwge1xuICAgICAgICAgIHg6IGN1cnJlbnRTY3JvbGxYLFxuICAgICAgICAgIHk6IGN1cnJlbnRTY3JvbGxZLFxuICAgICAgICB9KVxuICAgICAgKTtcbiAgICB9LFxuICAgIFt0YXJnZXRSZWYsIGlubGluZV1cbiAgKTtcblxuICB1c2VTY3JvbGxpbmdQYXJlbnRzRWZmZWN0KHRhcmdldFJlZiwgdXBkYXRlVGFyZ2V0UG9zaXRpb24pO1xuICB1c2VSZXNpemluZ1BhcmVudEVmZmVjdCh0YXJnZXRSZWYsIHNldFRhcmdldFJlY3QpO1xuXG4gIC8vIEhhbmRsZSBjbG9zZU9uVmlld3BvcnRFeGl0IHdpdGggY2FjaGVkIHNjcm9sbGluZyBwYXJlbnRzIGZvciBwZXJmb3JtYW5jZVxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIGlmICghY2xvc2VPblZpZXdwb3J0RXhpdCkgcmV0dXJuO1xuXG4gICAgY29uc3QgcmVjdCA9IHRhcmdldFJlY3QgfHwgY29udGFpbmVycz8udmlld3BvcnQ7XG4gICAgaWYgKCFyZWN0KSByZXR1cm47XG5cbiAgICBjb25zdCBpc091dCA9IGlzT3V0T2ZWaWV3KFxuICAgICAgcmVjdCxcbiAgICAgIGdldFRhcmdldEFzRWxlbWVudChnZXRSZWZFbGVtZW50KHRhcmdldFJlZikpID8/IHVuZGVmaW5lZCxcbiAgICAgIHNjcm9sbGluZ1BhcmVudHNcbiAgICApO1xuXG4gICAgaWYgKGlzT3V0ICYmICFoYXNSZXF1ZXN0ZWRDbG9zZVJlZi5jdXJyZW50KSB7XG4gICAgICBoYXNSZXF1ZXN0ZWRDbG9zZVJlZi5jdXJyZW50ID0gdHJ1ZTtcbiAgICAgIG9uUmVxdWVzdENsb3NlUmVmLmN1cnJlbnQ/LigpO1xuICAgIH0gZWxzZSBpZiAoIWlzT3V0KSB7XG4gICAgICBoYXNSZXF1ZXN0ZWRDbG9zZVJlZi5jdXJyZW50ID0gZmFsc2U7XG4gICAgfVxuICB9LCBbXG4gICAgdGFyZ2V0UmVjdCxcbiAgICBjb250YWluZXJzPy52aWV3cG9ydCxcbiAgICB0YXJnZXRSZWYsXG4gICAgY2xvc2VPblZpZXdwb3J0RXhpdCxcbiAgICBzY3JvbGxpbmdQYXJlbnRzLFxuICBdKTtcbiAgLyoqXG4gICAqIEFsbG93cyB0YXJnZXRSZWYgdG8gYmUgb3IgY29udGFpbiBhIGJ1dHRvbiB0aGF0IHRvZ2dsZXMgdGhlIHBvcG92ZXIgb3BlbiBhbmQgY2xvc2VkLlxuICAgKiBXaXRob3V0IHRoaXMgY2hlY2sgaXQgd291bGQgdG9nZ2xlIGNsb3NlZCB0aGVuIGJhY2sgb3BlbiBpbW1lZGlhdGVseS5cbiAgICovXG4gIGNvbnN0IGhhbmRsZUNsaWNrT3V0c2lkZSA9IHVzZUNhbGxiYWNrKFxuICAgIChlOiBNb3VzZUV2ZW50IHwgVG91Y2hFdmVudCkgPT4ge1xuICAgICAgY29uc3QgdGFyZ2V0ID0gZS50YXJnZXQgYXMgTm9kZTtcbiAgICAgIGNvbnN0IHRhcmdldEVsZW1lbnQgPSBnZXRSZWZFbGVtZW50KHRhcmdldFJlZik7XG5cbiAgICAgIGlmICghdGFyZ2V0RWxlbWVudCkgcmV0dXJuO1xuICAgICAgaWYgKHRhcmdldEVsZW1lbnQuY29udGFpbnModGFyZ2V0KSkgcmV0dXJuO1xuICAgICAgaWYgKHBvcG92ZXJSZWYuY3VycmVudD8uY29udGFpbnModGFyZ2V0KSkgcmV0dXJuO1xuXG4gICAgICAvLyBJZiB3ZSBnZXQgaGVyZSwgaXQncyBhIGdlbnVpbmUgb3V0c2lkZSBjbGlja1xuICAgICAgb25SZXF1ZXN0Q2xvc2U/LigpO1xuICAgIH0sXG4gICAgW29uUmVxdWVzdENsb3NlLCB0YXJnZXRSZWZdXG4gICk7XG5cbiAgLyoqXG4gICAqIEJhY2t1cCBjbGljayBvdXRzaWRlIGhhbmRsZXIgZm9yIGNhc2VzIHdoZXJlIEZvY3VzVHJhcCBkZXRlY3Rpb24gbWlnaHQgYmUgaW50ZXJmZXJlZCB3aXRoXG4gICAqIGJ5IG91ciBvd24gZmxvYXRpbmcgZWxlbWVudHNcbiAgICovXG4gIGNvbnN0IGhhbmRsZUdsb2JhbENsaWNrT3V0c2lkZSA9IHVzZUNhbGxiYWNrKFxuICAgIChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICBjb25zdCB0YXJnZXQgPSBlLnRhcmdldCBhcyBOb2RlO1xuICAgICAgY29uc3QgdGFyZ2V0RWxlbWVudCA9IGdldFJlZkVsZW1lbnQodGFyZ2V0UmVmKTtcblxuICAgICAgaWYgKCF0YXJnZXRFbGVtZW50IHx8ICFpc09wZW4pIHJldHVybjtcblxuICAgICAgaWYgKFxuICAgICAgICB0YXJnZXRFbGVtZW50LmNvbnRhaW5zKHRhcmdldCkgfHxcbiAgICAgICAgcG9wb3ZlclJlZi5jdXJyZW50Py5jb250YWlucyh0YXJnZXQpXG4gICAgICApXG4gICAgICAgIHJldHVybjtcblxuICAgICAgLy8gQ2hlY2sgaWYgdGhlIGNsaWNrZWQgZWxlbWVudCBpcyB3aXRoaW4gYW4gT3ZlcmxheSBjb21wb25lbnRcbiAgICAgIGNvbnN0IGNsaWNrZWRFbGVtZW50ID0gdGFyZ2V0IGFzIEVsZW1lbnQ7XG4gICAgICBpZiAoY2xpY2tlZEVsZW1lbnQuY2xvc2VzdCgnW2RhdGEtZmxvYXRpbmc9XCJvdmVybGF5XCJdJykpIHtcbiAgICAgICAgcmV0dXJuO1xuICAgICAgfVxuXG4gICAgICAvLyBDaGVjayBpZiB0aGUgY2xpY2tlZCBlbGVtZW50IGlzIHdpdGhpbiBhbm90aGVyIFBvcG92ZXIgb3IgUG9wb3ZlckNvbnRhaW5lclxuICAgICAgY29uc3QgaXNGbG9hdGluZ0VsZW1lbnQgPSBjbGlja2VkRWxlbWVudC5jbG9zZXN0KFxuICAgICAgICAnW2RhdGEtZmxvYXRpbmc9XCJwb3BvdmVyXCJdJ1xuICAgICAgKTtcbiAgICAgIGlmIChcbiAgICAgICAgaXNGbG9hdGluZ0VsZW1lbnQgJiZcbiAgICAgICAgIXBvcG92ZXJSZWYuY3VycmVudD8uY29udGFpbnMoaXNGbG9hdGluZ0VsZW1lbnQpXG4gICAgICApIHtcbiAgICAgICAgb25SZXF1ZXN0Q2xvc2U/LigpO1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIG9uUmVxdWVzdENsb3NlPy4oKTtcbiAgICB9LFxuICAgIFtvblJlcXVlc3RDbG9zZSwgdGFyZ2V0UmVmLCBpc09wZW5dXG4gICk7XG5cbiAgLy8gQmFja3VwIGdsb2JhbCBjbGljayBsaXN0ZW5lciBmb3Igd2hlbiBhIFBvcG92ZXIgb3IgUG9wb3ZlckNvbnRhaW5lciBpcyBvcGVuXG4gIHVzZUVmZmVjdCgoKSA9PiB7XG4gICAgaWYgKGlzT3Blbikge1xuICAgICAgLy8gVXNlIGEgc21hbGwgZGVsYXkgdG8gZW5zdXJlIHRoaXMgZG9lc24ndCBpbnRlcmZlcmUgd2l0aCB0aGUgRm9jdXNUcmFwJ3Mgb3duIGRldGVjdGlvblxuICAgICAgY29uc3QgdGltZW91dElkID0gc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICAgIGRvY3VtZW50LmFkZEV2ZW50TGlzdGVuZXIoJ21vdXNlZG93bicsIGhhbmRsZUdsb2JhbENsaWNrT3V0c2lkZSwgdHJ1ZSk7XG4gICAgICB9LCA1MCk7XG5cbiAgICAgIHJldHVybiAoKSA9PiB7XG4gICAgICAgIGNsZWFyVGltZW91dCh0aW1lb3V0SWQpO1xuICAgICAgICBkb2N1bWVudC5yZW1vdmVFdmVudExpc3RlbmVyKFxuICAgICAgICAgICdtb3VzZWRvd24nLFxuICAgICAgICAgIGhhbmRsZUdsb2JhbENsaWNrT3V0c2lkZSxcbiAgICAgICAgICB0cnVlXG4gICAgICAgICk7XG4gICAgICB9O1xuICAgIH1cbiAgfSwgW2lzT3BlbiwgaGFuZGxlR2xvYmFsQ2xpY2tPdXRzaWRlXSk7XG5cbiAgaWYgKCFpc09wZW4gfHwgIXRhcmdldFJlZi5jdXJyZW50KSByZXR1cm4gbnVsbDtcblxuICBjb25zdCB7XG4gICAgY2hpbGRyZW4sXG4gICAgc3R5bGU6IHJlc3RTdHlsZSxcbiAgICAuLi5yZXN0UHJvcHNcbiAgfSA9IHJlc3QgYXMgUmVhY3QuSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+O1xuXG4gIGNvbnN0IHsgZGlyTmV1dHJhbFN0eWxlcywgc3R5bGVzOiBwbGFjZW1lbnRTdHlsZXMgfSA9IHBvcG92ZXJQb3NpdGlvbjtcblxuICAvKipcbiAgICogTm9uLWVtcHR5IGBwbGFjZW1lbnRTdHlsZXNgIG1lcmdlZCBpbnRvIGlubGluZSBgc3R5bGVgXG4gICAqIGRpck5ldXRyYWxTdHlsZXNgIGxheWVyZWQgbGFzdCwgc2VlIHtAbGluayBnZXRQb3NpdGlvbn1cbiAgICovXG4gIGNvbnN0IHBsYWNlbWVudFN0eWxlc1RvTWVyZ2UgPVxuICAgIE9iamVjdC5rZXlzKHBsYWNlbWVudFN0eWxlcykubGVuZ3RoID4gMCA/IHBsYWNlbWVudFN0eWxlcyA6IG51bGw7XG5cbiAgY29uc3QgaGFzTWVyZ2VkU3R5bGUgPSBCb29sZWFuKFxuICAgIHJlc3RTdHlsZSB8fCBkaXJOZXV0cmFsU3R5bGVzIHx8IHBsYWNlbWVudFN0eWxlc1RvTWVyZ2VcbiAgKTtcbiAgY29uc3QgbWVyZ2VkU3R5bGUgPSBoYXNNZXJnZWRTdHlsZVxuICAgID8ge1xuICAgICAgICAuLi4odHlwZW9mIHJlc3RTdHlsZSA9PT0gJ29iamVjdCcgJiYgcmVzdFN0eWxlID8gcmVzdFN0eWxlIDoge30pLFxuICAgICAgICAuLi4ocGxhY2VtZW50U3R5bGVzVG9NZXJnZSA/PyB7fSksXG4gICAgICAgIC4uLmRpck5ldXRyYWxTdHlsZXMsXG4gICAgICB9XG4gICAgOiB1bmRlZmluZWQ7XG5cbiAgY29uc3QgY29udGVudCA9IChcbiAgICA8Rm9jdXNUcmFwXG4gICAgICBhbGxvd1BhZ2VJbnRlcmFjdGlvbj17aW5saW5lIHx8IGFsbG93UGFnZUludGVyYWN0aW9ufVxuICAgICAgZm9jdXNPblByb3BzPXtmb2N1c09uUHJvcHN9XG4gICAgICBvbkNsaWNrT3V0c2lkZT17aGFuZGxlQ2xpY2tPdXRzaWRlfVxuICAgICAgb25Fc2NhcGVLZXk9e29uUmVxdWVzdENsb3NlfVxuICAgID5cbiAgICAgIDxQb3BvdmVyQ29udGVudFxuICAgICAgICBkYXRhLWZsb2F0aW5nPVwicG9wb3ZlclwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwicG9wb3Zlci1jb250ZW50LWNvbnRhaW5lclwiXG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByZWY9e3BvcG92ZXJSZWZ9XG4gICAgICAgIC8qIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGUgKi9cbiAgICAgICAgc3R5bGU9e21lcmdlZFN0eWxlfVxuICAgICAgICB0YWJJbmRleD17LTF9XG4gICAgICAgIHpJbmRleD17aW5saW5lID8gNSA6ICdpbml0aWFsJ31cbiAgICAgICAgey4uLnJlc3RQcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9Qb3BvdmVyQ29udGVudD5cbiAgICA8L0ZvY3VzVHJhcD5cbiAgKTtcblxuICBpZiAoaW5saW5lKSByZXR1cm4gY29udGVudDtcblxuICByZXR1cm4gPEJvZHlQb3J0YWw+e2NvbnRlbnR9PC9Cb2R5UG9ydGFsPjtcbn07XG4iXX0= */");
|
|
19
|
+
})), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9Qb3BvdmVyQ29udGFpbmVyL1BvcG92ZXJDb250YWluZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWlCdUIiLCJmaWxlIjoiLi4vLi4vc3JjL1BvcG92ZXJDb250YWluZXIvUG9wb3ZlckNvbnRhaW5lci50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBlbGVtZW50RGlyLCBzeXN0ZW0sIHVzZUVsZW1lbnREaXIgfSBmcm9tICdAY29kZWNhZGVteS9nYW11dC1zdHlsZXMnO1xuaW1wb3J0IHsgdmFyaWFuY2UgfSBmcm9tICdAY29kZWNhZGVteS92YXJpYW5jZSc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyB1c2VDYWxsYmFjaywgdXNlRWZmZWN0LCB1c2VNZW1vLCB1c2VSZWYsIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0ICogYXMgUmVhY3QgZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgdXNlV2luZG93U2Nyb2xsLCB1c2VXaW5kb3dTaXplIH0gZnJvbSAncmVhY3QtdXNlJztcblxuaW1wb3J0IHsgQm9keVBvcnRhbCB9IGZyb20gJy4uL0JvZHlQb3J0YWwnO1xuaW1wb3J0IHsgRm9jdXNUcmFwIH0gZnJvbSAnLi4vRm9jdXNUcmFwJztcbmltcG9ydCB7XG4gIHVzZVJlc2l6aW5nUGFyZW50RWZmZWN0LFxuICB1c2VTY3JvbGxpbmdQYXJlbnRzLFxuICB1c2VTY3JvbGxpbmdQYXJlbnRzRWZmZWN0LFxufSBmcm9tICcuL2hvb2tzJztcbmltcG9ydCB7IENvbnRhaW5lclN0YXRlLCBQb3BvdmVyQ29udGFpbmVyUHJvcHMgfSBmcm9tICcuL3R5cGVzJztcbmltcG9ydCB7IGdldENvbnRhaW5lcnMsIGdldFBvc2l0aW9uLCBpc091dE9mVmlldyB9IGZyb20gJy4vdXRpbHMnO1xuXG5jb25zdCBQb3BvdmVyQ29udGVudCA9IHN0eWxlZC5kaXYoXG4gIHZhcmlhbmNlLmNvbXBvc2UoXG4gICAgc3lzdGVtLnBvc2l0aW9uaW5nLFxuICAgIHZhcmlhbmNlLmNyZWF0ZSh7XG4gICAgICB0cmFuc2Zvcm06IHtcbiAgICAgICAgcHJvcGVydHk6ICd0cmFuc2Zvcm0nLFxuICAgICAgfSxcbiAgICB9KVxuICApXG4pO1xuXG5leHBvcnQgY29uc3QgUG9wb3ZlckNvbnRhaW5lcjogUmVhY3QuRkM8UG9wb3ZlckNvbnRhaW5lclByb3BzPiA9ICh7XG4gIGFsaWdubWVudCA9ICdib3R0b20tbGVmdCcsXG4gIG9mZnNldCA9IDIwLFxuICB5ID0gMCxcbiAgeCA9IDAsXG4gIGludmVydEF4aXMsXG4gIGlubGluZSA9IGZhbHNlLFxuICBpc09wZW4sXG4gIG9uUmVxdWVzdENsb3NlLFxuICB0YXJnZXRSZWYsXG4gIGFsbG93UGFnZUludGVyYWN0aW9uLFxuICBjbG9zZU9uVmlld3BvcnRFeGl0ID0gZmFsc2UsXG4gIGZvY3VzT25Qcm9wcyxcbiAgLi4ucmVzdFxufSkgPT4ge1xuICBjb25zdCBwb3BvdmVyUmVmID0gdXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKTtcbiAgY29uc3QgaGFzUmVxdWVzdGVkQ2xvc2VSZWYgPSB1c2VSZWYoZmFsc2UpO1xuICBjb25zdCBvblJlcXVlc3RDbG9zZVJlZiA9IHVzZVJlZihvblJlcXVlc3RDbG9zZSk7XG4gIGNvbnN0IHsgd2lkdGg6IHdpblcsIGhlaWdodDogd2luSCB9ID0gdXNlV2luZG93U2l6ZSgpO1xuICBjb25zdCB7IHg6IHdpblgsIHk6IHdpblkgfSA9IHVzZVdpbmRvd1Njcm9sbCgpO1xuICBjb25zdCBbY29udGFpbmVycywgc2V0Q29udGFpbmVyc10gPSB1c2VTdGF0ZTxDb250YWluZXJTdGF0ZT4oKTtcbiAgY29uc3QgW3RhcmdldFJlY3QsIHNldFRhcmdldFJlY3RdID0gdXNlU3RhdGU8RE9NUmVjdD4oKTtcbiAgY29uc3QgcGFyZW50ID0gY29udGFpbmVycz8ucGFyZW50O1xuXG4gIC8vIE1lbW9pemUgc2Nyb2xsaW5nIHBhcmVudHMgdG8gYXZvaWQgZXhwZW5zaXZlIERPTSB0cmF2ZXJzYWxzXG4gIGNvbnN0IHNjcm9sbGluZ1BhcmVudHMgPSB1c2VTY3JvbGxpbmdQYXJlbnRzKHRhcmdldFJlZik7XG5cbiAgLy8gS2VlcCBvblJlcXVlc3RDbG9zZSByZWYgdXAgdG8gZGF0ZVxuICB1c2VFZmZlY3QoKCkgPT4ge1xuICAgIG9uUmVxdWVzdENsb3NlUmVmLmN1cnJlbnQgPSBvblJlcXVlc3RDbG9zZTtcbiAgfSwgW29uUmVxdWVzdENsb3NlXSk7XG5cbiAgY29uc3QgdGFyZ2V0RGlyID0gdXNlRWxlbWVudERpcih0YXJnZXRSZWYpO1xuXG4gIGNvbnN0IHRhcmdldEVsID0gdGFyZ2V0UmVmPy5jdXJyZW50O1xuICAvKipcbiAgICogU2VlIHtAbGluayBnZXRDb250YWluZXJzfSBmb3IgbW9yZSBpbmZvcm1hdGlvblxuICAgKiBJbmxpbmU6IGBsYXlvdXRTb3VyY2VgIGlzIGRlcml2ZWQgZnJvbSBgb2Zmc2V0UGFyZW50YC5cbiAgICogUG9ydGFsOiBpLmUuIGlzbid0IGlubGluZSBzbyB3ZSBjYW4gdXNlIHRoZSB0YXJnZXQgaXRzZWxmLlxuICAgKi9cbiAgY29uc3QgbGF5b3V0U291cmNlID1cbiAgICBpbmxpbmUgJiYgdGFyZ2V0RWw/Lm9mZnNldFBhcmVudCBpbnN0YW5jZW9mIEVsZW1lbnRcbiAgICAgID8gdGFyZ2V0RWwub2Zmc2V0UGFyZW50XG4gICAgICA6IHRhcmdldEVsO1xuICBjb25zdCBpc1J0bCA9IGlubGluZVxuICAgID8gbGF5b3V0U291cmNlIGluc3RhbmNlb2YgRWxlbWVudCAmJiBlbGVtZW50RGlyKGxheW91dFNvdXJjZSkgPT09ICdydGwnXG4gICAgOiB0YXJnZXREaXIgPT09ICdydGwnO1xuXG4gIGNvbnN0IHBvcG92ZXJQb3NpdGlvbiA9IHVzZU1lbW8oKCkgPT4ge1xuICAgIGlmIChwYXJlbnQgIT09IHVuZGVmaW5lZCkge1xuICAgICAgcmV0dXJuIGdldFBvc2l0aW9uKHtcbiAgICAgICAgYWxpZ25tZW50LFxuICAgICAgICBjb250YWluZXI6IHBhcmVudCxcbiAgICAgICAgaW52ZXJ0QXhpcyxcbiAgICAgICAgaXNSdGwsXG4gICAgICAgIG9mZnNldCxcbiAgICAgICAgeCxcbiAgICAgICAgeSxcbiAgICAgIH0pO1xuICAgIH1cbiAgICByZXR1cm4geyBzdHlsZXM6IHt9LCBkaXJOZXV0cmFsU3R5bGVzOiB1bmRlZmluZWQgfTtcbiAgfSwgW3BhcmVudCwgeCwgeSwgb2Zmc2V0LCBhbGlnbm1lbnQsIGludmVydEF4aXMsIGlzUnRsXSk7XG5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCB0YXJnZXQgPSB0YXJnZXRSZWY/LmN1cnJlbnQ7XG4gICAgaWYgKCF0YXJnZXQpIHJldHVybjtcbiAgICBzZXRDb250YWluZXJzKGdldENvbnRhaW5lcnModGFyZ2V0LCBpbmxpbmUsIHsgeDogd2luWCwgeTogd2luWSB9KSk7XG4gIH0sIFt0YXJnZXRSZWYsIGlubGluZSwgd2luVywgd2luSCwgd2luWCwgd2luWSwgdGFyZ2V0UmVjdF0pO1xuXG4gIC8vIFVwZGF0ZSB0YXJnZXQgcmVjdGFuZ2xlIHdoZW4gd2luZG93IHNpemUvc2Nyb2xsIGNoYW5nZXNcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBzZXRUYXJnZXRSZWN0KHRhcmdldFJlZj8uY3VycmVudD8uZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkpO1xuICB9LCBbdGFyZ2V0UmVmLCBpc09wZW4sIHdpblcsIHdpbkgsIHdpblgsIHdpblldKTtcblxuICAvLyBVcGRhdGUgdGFyZ2V0IHJlY3RhbmdsZSB3aGVuIHBhcmVudCBzaXplL3Njcm9sbCBjaGFuZ2VzXG4gIGNvbnN0IHVwZGF0ZVRhcmdldFBvc2l0aW9uID0gdXNlQ2FsbGJhY2soXG4gICAgKHJlY3Q/OiBET01SZWN0KSA9PiB7XG4gICAgICBjb25zdCB0YXJnZXQgPSB0YXJnZXRSZWY/LmN1cnJlbnQ7XG4gICAgICBpZiAoIXRhcmdldCkgcmV0dXJuO1xuXG4gICAgICBjb25zdCBuZXdSZWN0ID0gcmVjdCB8fCB0YXJnZXQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCk7XG4gICAgICBzZXRUYXJnZXRSZWN0KG5ld1JlY3QpO1xuXG4gICAgICBjb25zdCBjdXJyZW50U2Nyb2xsWCA9XG4gICAgICAgIHdpbmRvdy5wYWdlWE9mZnNldCB8fCBkb2N1bWVudC5kb2N1bWVudEVsZW1lbnQuc2Nyb2xsTGVmdDtcbiAgICAgIGNvbnN0IGN1cnJlbnRTY3JvbGxZID1cbiAgICAgICAgd2luZG93LnBhZ2VZT2Zmc2V0IHx8IGRvY3VtZW50LmRvY3VtZW50RWxlbWVudC5zY3JvbGxUb3A7XG5cbiAgICAgIHNldENvbnRhaW5lcnMoXG4gICAgICAgIGdldENvbnRhaW5lcnModGFyZ2V0LCBpbmxpbmUsIHsgeDogY3VycmVudFNjcm9sbFgsIHk6IGN1cnJlbnRTY3JvbGxZIH0pXG4gICAgICApO1xuICAgIH0sXG4gICAgW3RhcmdldFJlZiwgaW5saW5lXVxuICApO1xuXG4gIHVzZVNjcm9sbGluZ1BhcmVudHNFZmZlY3QodGFyZ2V0UmVmLCB1cGRhdGVUYXJnZXRQb3NpdGlvbik7XG5cbiAgdXNlUmVzaXppbmdQYXJlbnRFZmZlY3QodGFyZ2V0UmVmLCBzZXRUYXJnZXRSZWN0KTtcblxuICAvLyBIYW5kbGUgY2xvc2VPblZpZXdwb3J0RXhpdCB3aXRoIGNhY2hlZCBzY3JvbGxpbmcgcGFyZW50cyBmb3IgcGVyZm9ybWFuY2VcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoIWNsb3NlT25WaWV3cG9ydEV4aXQpIHJldHVybjtcblxuICAgIGNvbnN0IHJlY3QgPSB0YXJnZXRSZWN0IHx8IGNvbnRhaW5lcnM/LnZpZXdwb3J0O1xuICAgIGlmICghcmVjdCkgcmV0dXJuO1xuXG4gICAgY29uc3QgaXNPdXQgPSBpc091dE9mVmlldyhcbiAgICAgIHJlY3QsXG4gICAgICB0YXJnZXRSZWY/LmN1cnJlbnQgYXMgSFRNTEVsZW1lbnQsXG4gICAgICBzY3JvbGxpbmdQYXJlbnRzXG4gICAgKTtcblxuICAgIGlmIChpc091dCAmJiAhaGFzUmVxdWVzdGVkQ2xvc2VSZWYuY3VycmVudCkge1xuICAgICAgaGFzUmVxdWVzdGVkQ2xvc2VSZWYuY3VycmVudCA9IHRydWU7XG4gICAgICBvblJlcXVlc3RDbG9zZVJlZi5jdXJyZW50Py4oKTtcbiAgICB9IGVsc2UgaWYgKCFpc091dCkge1xuICAgICAgaGFzUmVxdWVzdGVkQ2xvc2VSZWYuY3VycmVudCA9IGZhbHNlO1xuICAgIH1cbiAgfSwgW1xuICAgIHRhcmdldFJlY3QsXG4gICAgY29udGFpbmVycz8udmlld3BvcnQsXG4gICAgdGFyZ2V0UmVmLFxuICAgIGNsb3NlT25WaWV3cG9ydEV4aXQsXG4gICAgc2Nyb2xsaW5nUGFyZW50cyxcbiAgXSk7XG4gIC8qKlxuICAgKiBBbGxvd3MgdGFyZ2V0UmVmIHRvIGJlIG9yIGNvbnRhaW4gYSBidXR0b24gdGhhdCB0b2dnbGVzIHRoZSBwb3BvdmVyIG9wZW4gYW5kIGNsb3NlZC5cbiAgICogV2l0aG91dCB0aGlzIGNoZWNrIGl0IHdvdWxkIHRvZ2dsZSBjbG9zZWQgdGhlbiBiYWNrIG9wZW4gaW1tZWRpYXRlbHkuXG4gICAqL1xuICBjb25zdCBoYW5kbGVDbGlja091dHNpZGUgPSB1c2VDYWxsYmFjayhcbiAgICAoZTogTW91c2VFdmVudCB8IFRvdWNoRXZlbnQpID0+IHtcbiAgICAgIGNvbnN0IHRhcmdldCA9IGUudGFyZ2V0IGFzIE5vZGU7XG4gICAgICBjb25zdCB0YXJnZXRFbGVtZW50ID0gdGFyZ2V0UmVmLmN1cnJlbnQ7XG5cbiAgICAgIGlmICghdGFyZ2V0RWxlbWVudCkgcmV0dXJuO1xuICAgICAgaWYgKHRhcmdldEVsZW1lbnQuY29udGFpbnModGFyZ2V0KSkgcmV0dXJuO1xuICAgICAgaWYgKHBvcG92ZXJSZWYuY3VycmVudD8uY29udGFpbnModGFyZ2V0KSkgcmV0dXJuO1xuXG4gICAgICAvLyBJZiB3ZSBnZXQgaGVyZSwgaXQncyBhIGdlbnVpbmUgb3V0c2lkZSBjbGlja1xuICAgICAgb25SZXF1ZXN0Q2xvc2U/LigpO1xuICAgIH0sXG4gICAgW29uUmVxdWVzdENsb3NlLCB0YXJnZXRSZWZdXG4gICk7XG5cbiAgLyoqXG4gICAqIEJhY2t1cCBjbGljayBvdXRzaWRlIGhhbmRsZXIgZm9yIGNhc2VzIHdoZXJlIEZvY3VzVHJhcCBkZXRlY3Rpb24gbWlnaHQgYmUgaW50ZXJmZXJlZCB3aXRoXG4gICAqIGJ5IG91ciBvd24gZmxvYXRpbmcgZWxlbWVudHNcbiAgICovXG4gIGNvbnN0IGhhbmRsZUdsb2JhbENsaWNrT3V0c2lkZSA9IHVzZUNhbGxiYWNrKFxuICAgIChlOiBNb3VzZUV2ZW50KSA9PiB7XG4gICAgICBjb25zdCB0YXJnZXQgPSBlLnRhcmdldCBhcyBOb2RlO1xuICAgICAgY29uc3QgdGFyZ2V0RWxlbWVudCA9IHRhcmdldFJlZi5jdXJyZW50O1xuXG4gICAgICBpZiAoIXRhcmdldEVsZW1lbnQgfHwgIWlzT3BlbikgcmV0dXJuO1xuXG4gICAgICBpZiAoXG4gICAgICAgIHRhcmdldEVsZW1lbnQuY29udGFpbnModGFyZ2V0KSB8fFxuICAgICAgICBwb3BvdmVyUmVmLmN1cnJlbnQ/LmNvbnRhaW5zKHRhcmdldClcbiAgICAgIClcbiAgICAgICAgcmV0dXJuO1xuXG4gICAgICAvLyBDaGVjayBpZiB0aGUgY2xpY2tlZCBlbGVtZW50IGlzIHdpdGhpbiBhbiBPdmVybGF5IGNvbXBvbmVudFxuICAgICAgY29uc3QgY2xpY2tlZEVsZW1lbnQgPSB0YXJnZXQgYXMgRWxlbWVudDtcbiAgICAgIGlmIChjbGlja2VkRWxlbWVudC5jbG9zZXN0KCdbZGF0YS1mbG9hdGluZz1cIm92ZXJsYXlcIl0nKSkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG5cbiAgICAgIC8vIENoZWNrIGlmIHRoZSBjbGlja2VkIGVsZW1lbnQgaXMgd2l0aGluIGFub3RoZXIgUG9wb3ZlciBvciBQb3BvdmVyQ29udGFpbmVyXG4gICAgICBjb25zdCBpc0Zsb2F0aW5nRWxlbWVudCA9IGNsaWNrZWRFbGVtZW50LmNsb3Nlc3QoXG4gICAgICAgICdbZGF0YS1mbG9hdGluZz1cInBvcG92ZXJcIl0nXG4gICAgICApO1xuICAgICAgaWYgKFxuICAgICAgICBpc0Zsb2F0aW5nRWxlbWVudCAmJlxuICAgICAgICAhcG9wb3ZlclJlZi5jdXJyZW50Py5jb250YWlucyhpc0Zsb2F0aW5nRWxlbWVudClcbiAgICAgICkge1xuICAgICAgICBvblJlcXVlc3RDbG9zZT8uKCk7XG4gICAgICAgIHJldHVybjtcbiAgICAgIH1cblxuICAgICAgb25SZXF1ZXN0Q2xvc2U/LigpO1xuICAgIH0sXG4gICAgW29uUmVxdWVzdENsb3NlLCB0YXJnZXRSZWYsIGlzT3Blbl1cbiAgKTtcblxuICAvLyBCYWNrdXAgZ2xvYmFsIGNsaWNrIGxpc3RlbmVyIGZvciB3aGVuIGEgUG9wb3ZlciBvciBQb3BvdmVyQ29udGFpbmVyIGlzIG9wZW5cbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBpZiAoaXNPcGVuKSB7XG4gICAgICAvLyBVc2UgYSBzbWFsbCBkZWxheSB0byBlbnN1cmUgdGhpcyBkb2Vzbid0IGludGVyZmVyZSB3aXRoIHRoZSBGb2N1c1RyYXAncyBvd24gZGV0ZWN0aW9uXG4gICAgICBjb25zdCB0aW1lb3V0SWQgPSBzZXRUaW1lb3V0KCgpID0+IHtcbiAgICAgICAgZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlR2xvYmFsQ2xpY2tPdXRzaWRlLCB0cnVlKTtcbiAgICAgIH0sIDUwKTtcblxuICAgICAgcmV0dXJuICgpID0+IHtcbiAgICAgICAgY2xlYXJUaW1lb3V0KHRpbWVvdXRJZCk7XG4gICAgICAgIGRvY3VtZW50LnJlbW92ZUV2ZW50TGlzdGVuZXIoXG4gICAgICAgICAgJ21vdXNlZG93bicsXG4gICAgICAgICAgaGFuZGxlR2xvYmFsQ2xpY2tPdXRzaWRlLFxuICAgICAgICAgIHRydWVcbiAgICAgICAgKTtcbiAgICAgIH07XG4gICAgfVxuICB9LCBbaXNPcGVuLCBoYW5kbGVHbG9iYWxDbGlja091dHNpZGVdKTtcblxuICBpZiAoIWlzT3BlbiB8fCAhdGFyZ2V0UmVmKSByZXR1cm4gbnVsbDtcblxuICBjb25zdCB7XG4gICAgY2hpbGRyZW4sXG4gICAgc3R5bGU6IHJlc3RTdHlsZSxcbiAgICAuLi5yZXN0UHJvcHNcbiAgfSA9IHJlc3QgYXMgUmVhY3QuSFRNTEF0dHJpYnV0ZXM8SFRNTERpdkVsZW1lbnQ+O1xuXG4gIGNvbnN0IHsgZGlyTmV1dHJhbFN0eWxlcywgc3R5bGVzOiBwbGFjZW1lbnRTdHlsZXMgfSA9IHBvcG92ZXJQb3NpdGlvbjtcblxuICAvKipcbiAgICogTm9uLWVtcHR5IGBwbGFjZW1lbnRTdHlsZXNgIG1lcmdlZCBpbnRvIGlubGluZSBgc3R5bGVgXG4gICAqIGRpck5ldXRyYWxTdHlsZXNgIGxheWVyZWQgbGFzdCwgc2VlIHtAbGluayBnZXRQb3NpdGlvbn1cbiAgICovXG4gIGNvbnN0IHBsYWNlbWVudFN0eWxlc1RvTWVyZ2UgPVxuICAgIE9iamVjdC5rZXlzKHBsYWNlbWVudFN0eWxlcykubGVuZ3RoID4gMCA/IHBsYWNlbWVudFN0eWxlcyA6IG51bGw7XG5cbiAgY29uc3QgaGFzTWVyZ2VkU3R5bGUgPSBCb29sZWFuKFxuICAgIHJlc3RTdHlsZSB8fCBkaXJOZXV0cmFsU3R5bGVzIHx8IHBsYWNlbWVudFN0eWxlc1RvTWVyZ2VcbiAgKTtcbiAgY29uc3QgbWVyZ2VkU3R5bGUgPSBoYXNNZXJnZWRTdHlsZVxuICAgID8ge1xuICAgICAgICAuLi4odHlwZW9mIHJlc3RTdHlsZSA9PT0gJ29iamVjdCcgJiYgcmVzdFN0eWxlID8gcmVzdFN0eWxlIDoge30pLFxuICAgICAgICAuLi4ocGxhY2VtZW50U3R5bGVzVG9NZXJnZSA/PyB7fSksXG4gICAgICAgIC4uLmRpck5ldXRyYWxTdHlsZXMsXG4gICAgICB9XG4gICAgOiB1bmRlZmluZWQ7XG5cbiAgY29uc3QgY29udGVudCA9IChcbiAgICA8Rm9jdXNUcmFwXG4gICAgICBhbGxvd1BhZ2VJbnRlcmFjdGlvbj17aW5saW5lIHx8IGFsbG93UGFnZUludGVyYWN0aW9ufVxuICAgICAgZm9jdXNPblByb3BzPXtmb2N1c09uUHJvcHN9XG4gICAgICBvbkNsaWNrT3V0c2lkZT17aGFuZGxlQ2xpY2tPdXRzaWRlfVxuICAgICAgb25Fc2NhcGVLZXk9e29uUmVxdWVzdENsb3NlfVxuICAgID5cbiAgICAgIDxQb3BvdmVyQ29udGVudFxuICAgICAgICBkYXRhLWZsb2F0aW5nPVwicG9wb3ZlclwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwicG9wb3Zlci1jb250ZW50LWNvbnRhaW5lclwiXG4gICAgICAgIHBvc2l0aW9uPVwiYWJzb2x1dGVcIlxuICAgICAgICByZWY9e3BvcG92ZXJSZWZ9XG4gICAgICAgIC8qIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBnYW11dC9uby1pbmxpbmUtc3R5bGUgKi9cbiAgICAgICAgc3R5bGU9e21lcmdlZFN0eWxlfVxuICAgICAgICB0YWJJbmRleD17LTF9XG4gICAgICAgIHpJbmRleD17aW5saW5lID8gNSA6ICdpbml0aWFsJ31cbiAgICAgICAgey4uLnJlc3RQcm9wc31cbiAgICAgID5cbiAgICAgICAge2NoaWxkcmVufVxuICAgICAgPC9Qb3BvdmVyQ29udGVudD5cbiAgICA8L0ZvY3VzVHJhcD5cbiAgKTtcblxuICBpZiAoaW5saW5lKSByZXR1cm4gY29udGVudDtcblxuICByZXR1cm4gPEJvZHlQb3J0YWw+e2NvbnRlbnR9PC9Cb2R5UG9ydGFsPjtcbn07XG4iXX0= */");
|
|
20
20
|
export const PopoverContainer = ({
|
|
21
21
|
alignment = 'bottom-left',
|
|
22
22
|
offset = 20,
|
|
@@ -81,7 +81,7 @@ export const PopoverContainer = ({
|
|
|
81
81
|
};
|
|
82
82
|
}, [parent, x, y, offset, alignment, invertAxis, isRtl]);
|
|
83
83
|
useEffect(() => {
|
|
84
|
-
const target =
|
|
84
|
+
const target = targetRef?.current;
|
|
85
85
|
if (!target) return;
|
|
86
86
|
setContainers(getContainers(target, inline, {
|
|
87
87
|
x: winX,
|
|
@@ -91,12 +91,12 @@ export const PopoverContainer = ({
|
|
|
91
91
|
|
|
92
92
|
// Update target rectangle when window size/scroll changes
|
|
93
93
|
useEffect(() => {
|
|
94
|
-
setTargetRect(
|
|
94
|
+
setTargetRect(targetRef?.current?.getBoundingClientRect());
|
|
95
95
|
}, [targetRef, isOpen, winW, winH, winX, winY]);
|
|
96
96
|
|
|
97
97
|
// Update target rectangle when parent size/scroll changes
|
|
98
98
|
const updateTargetPosition = useCallback(rect => {
|
|
99
|
-
const target =
|
|
99
|
+
const target = targetRef?.current;
|
|
100
100
|
if (!target) return;
|
|
101
101
|
const newRect = rect || target.getBoundingClientRect();
|
|
102
102
|
setTargetRect(newRect);
|
|
@@ -115,7 +115,7 @@ export const PopoverContainer = ({
|
|
|
115
115
|
if (!closeOnViewportExit) return;
|
|
116
116
|
const rect = targetRect || containers?.viewport;
|
|
117
117
|
if (!rect) return;
|
|
118
|
-
const isOut = isOutOfView(rect,
|
|
118
|
+
const isOut = isOutOfView(rect, targetRef?.current, scrollingParents);
|
|
119
119
|
if (isOut && !hasRequestedCloseRef.current) {
|
|
120
120
|
hasRequestedCloseRef.current = true;
|
|
121
121
|
onRequestCloseRef.current?.();
|
|
@@ -129,7 +129,7 @@ export const PopoverContainer = ({
|
|
|
129
129
|
*/
|
|
130
130
|
const handleClickOutside = useCallback(e => {
|
|
131
131
|
const target = e.target;
|
|
132
|
-
const targetElement =
|
|
132
|
+
const targetElement = targetRef.current;
|
|
133
133
|
if (!targetElement) return;
|
|
134
134
|
if (targetElement.contains(target)) return;
|
|
135
135
|
if (popoverRef.current?.contains(target)) return;
|
|
@@ -144,7 +144,7 @@ export const PopoverContainer = ({
|
|
|
144
144
|
*/
|
|
145
145
|
const handleGlobalClickOutside = useCallback(e => {
|
|
146
146
|
const target = e.target;
|
|
147
|
-
const targetElement =
|
|
147
|
+
const targetElement = targetRef.current;
|
|
148
148
|
if (!targetElement || !isOpen) return;
|
|
149
149
|
if (targetElement.contains(target) || popoverRef.current?.contains(target)) return;
|
|
150
150
|
|
|
@@ -176,7 +176,7 @@ export const PopoverContainer = ({
|
|
|
176
176
|
};
|
|
177
177
|
}
|
|
178
178
|
}, [isOpen, handleGlobalClickOutside]);
|
|
179
|
-
if (!isOpen || !targetRef
|
|
179
|
+
if (!isOpen || !targetRef) return null;
|
|
180
180
|
const {
|
|
181
181
|
children,
|
|
182
182
|
style: restStyle,
|
|
@@ -1,20 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
* Minimal element shape required for popover positioning.
|
|
4
|
-
* Accepts both HTMLElement and TargetRef so Popover and PopoverContainer can share hooks.
|
|
5
|
-
*/
|
|
6
|
-
export interface PopoverTargetElement {
|
|
7
|
-
getBoundingClientRect(): DOMRect;
|
|
8
|
-
contains(other: Node | null): boolean;
|
|
9
|
-
}
|
|
10
|
-
/** Resolves ref object to current element; returns null when unset. */
|
|
11
|
-
export declare function getRefElement(ref: RefObject<PopoverTargetElement | null>): PopoverTargetElement | null;
|
|
12
|
-
/** Casts minimal target to HTMLElement for utils that need full DOM (e.g. parentElement). */
|
|
13
|
-
export declare function getTargetAsElement(target: PopoverTargetElement | null): HTMLElement | null;
|
|
14
|
-
export declare const useScrollingParentsEffect: (targetRef: RefObject<PopoverTargetElement | null>, setTargetRect: (rect: DOMRect | undefined) => void) => void;
|
|
15
|
-
export declare const useResizingParentEffect: (targetRef: RefObject<PopoverTargetElement | null>, setTargetRect: (rect: DOMRect | undefined) => void) => void;
|
|
1
|
+
export declare const useScrollingParentsEffect: (targetRef: React.RefObject<Pick<HTMLDivElement, "getBoundingClientRect" | "contains">>, setTargetRect: (rect: DOMRect | undefined) => void) => void;
|
|
2
|
+
export declare const useResizingParentEffect: (targetRef: React.RefObject<Pick<HTMLDivElement, "getBoundingClientRect" | "contains">>, setTargetRect: (rect: DOMRect | undefined) => void) => void;
|
|
16
3
|
/**
|
|
17
4
|
* Memoizes the list of scrolling parent elements for a target element.
|
|
5
|
+
* This avoids expensive DOM traversals and getComputedStyle calls on every render.
|
|
18
6
|
* Returns an empty array if the target element is not available.
|
|
19
7
|
*/
|
|
20
|
-
export declare const useScrollingParents: (targetRef: RefObject<
|
|
8
|
+
export declare const useScrollingParents: (targetRef: React.RefObject<HTMLElement | null>) => HTMLElement[];
|
|
@@ -1,48 +1,18 @@
|
|
|
1
|
-
import { useEffect,
|
|
2
|
-
import { isNullish } from '../utils/nullish';
|
|
1
|
+
import { useEffect, useMemo } from 'react';
|
|
3
2
|
import { findAllAdditionalScrollingParents, findResizingParent } from './utils';
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Minimal element shape required for popover positioning.
|
|
7
|
-
* Accepts both HTMLElement and TargetRef so Popover and PopoverContainer can share hooks.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
/** Resolves ref object to current element; returns null when unset. */
|
|
11
|
-
export function getRefElement(ref) {
|
|
12
|
-
if (isNullish(ref)) return null;
|
|
13
|
-
return ref.current;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
/** Casts minimal target to HTMLElement for utils that need full DOM (e.g. parentElement). */
|
|
17
|
-
export function getTargetAsElement(target) {
|
|
18
|
-
return target;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Syncs ref.current to React state after each commit so hooks can depend on the
|
|
23
|
-
* resolved element when ref object identity is stable but .current updates.
|
|
24
|
-
*/
|
|
25
|
-
function useResolvedRefTarget(targetRef) {
|
|
26
|
-
const [resolved, setResolved] = useState(() => getRefElement(targetRef));
|
|
27
|
-
|
|
28
|
-
// ref.current updates do not change targetRef identity; run after every commit
|
|
29
|
-
// to sync. Functional setState bails out when the resolved node is unchanged.
|
|
30
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps -- intentional post-commit ref sync
|
|
31
|
-
useLayoutEffect(() => {
|
|
32
|
-
const el = getRefElement(targetRef);
|
|
33
|
-
setResolved(prev => prev === el ? prev : el);
|
|
34
|
-
});
|
|
35
|
-
return resolved;
|
|
36
|
-
}
|
|
37
3
|
export const useScrollingParentsEffect = (targetRef, setTargetRect) => {
|
|
38
|
-
const resolvedTarget = useResolvedRefTarget(targetRef);
|
|
39
4
|
useEffect(() => {
|
|
40
|
-
if (!
|
|
41
|
-
|
|
5
|
+
if (!targetRef.current) {
|
|
6
|
+
return;
|
|
7
|
+
}
|
|
8
|
+
const target = targetRef.current;
|
|
9
|
+
const scrollingParents = findAllAdditionalScrollingParents(target);
|
|
42
10
|
const updatePosition = () => {
|
|
43
|
-
setTargetRect(
|
|
11
|
+
setTargetRect(targetRef?.current?.getBoundingClientRect());
|
|
44
12
|
};
|
|
45
13
|
const cleanup = [];
|
|
14
|
+
|
|
15
|
+
// Add listeners to all scrolling parents (window scroll handled by useWindowScroll)
|
|
46
16
|
scrollingParents.forEach(parent => {
|
|
47
17
|
if (parent.addEventListener) {
|
|
48
18
|
parent.addEventListener('scroll', updatePosition, {
|
|
@@ -54,31 +24,38 @@ export const useScrollingParentsEffect = (targetRef, setTargetRect) => {
|
|
|
54
24
|
return () => {
|
|
55
25
|
cleanup.forEach(fn => fn());
|
|
56
26
|
};
|
|
57
|
-
}, [
|
|
27
|
+
}, [targetRef, setTargetRect]);
|
|
58
28
|
};
|
|
59
29
|
export const useResizingParentEffect = (targetRef, setTargetRect) => {
|
|
60
|
-
const resolvedTarget = useResolvedRefTarget(targetRef);
|
|
61
30
|
useEffect(() => {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
31
|
+
// handles movement of target within a clipped container e.g. Drawer
|
|
32
|
+
if (!targetRef.current || typeof ResizeObserver === 'undefined') {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const resizingParent = findResizingParent(targetRef.current);
|
|
36
|
+
if (!resizingParent?.addEventListener) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
65
39
|
const handler = () => {
|
|
66
|
-
setTargetRect(
|
|
40
|
+
setTargetRect(targetRef?.current?.getBoundingClientRect());
|
|
67
41
|
};
|
|
68
42
|
const ro = new ResizeObserver(handler);
|
|
69
43
|
ro.observe(resizingParent);
|
|
70
44
|
return () => ro.unobserve(resizingParent);
|
|
71
|
-
}, [
|
|
45
|
+
}, [targetRef, setTargetRect]);
|
|
72
46
|
};
|
|
73
47
|
|
|
74
48
|
/**
|
|
75
49
|
* Memoizes the list of scrolling parent elements for a target element.
|
|
50
|
+
* This avoids expensive DOM traversals and getComputedStyle calls on every render.
|
|
76
51
|
* Returns an empty array if the target element is not available.
|
|
77
52
|
*/
|
|
78
53
|
export const useScrollingParents = targetRef => {
|
|
79
|
-
const resolvedTarget = useResolvedRefTarget(targetRef);
|
|
80
54
|
return useMemo(() => {
|
|
81
|
-
if (!
|
|
82
|
-
|
|
83
|
-
|
|
55
|
+
if (!targetRef.current) {
|
|
56
|
+
return [];
|
|
57
|
+
}
|
|
58
|
+
return findAllAdditionalScrollingParents(targetRef.current);
|
|
59
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
60
|
+
}, [targetRef.current]);
|
|
84
61
|
};
|
|
@@ -54,9 +54,8 @@ export interface PopoverContainerProps extends PopoverAlignment, WithChildrenPro
|
|
|
54
54
|
onRequestClose?: () => void;
|
|
55
55
|
/**
|
|
56
56
|
* The target element around which the popover will be positioned.
|
|
57
|
-
* Only ref objects (e.g. from useRef) are supported at runtime; RefCallback is not.
|
|
58
57
|
*/
|
|
59
|
-
targetRef: RefObject<TargetRef
|
|
58
|
+
targetRef: RefObject<TargetRef>;
|
|
60
59
|
/**
|
|
61
60
|
* If true, it will allow outside page interaction. Popover container will still close when clicking outside of the popover or hitting the escape key.
|
|
62
61
|
*/
|