@atlaskit/popup 4.16.4 → 4.16.6
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/CHANGELOG.md +12 -0
- package/dist/cjs/compositional/id-context.js +9 -0
- package/dist/cjs/compositional/is-inside-popup-context.js +19 -0
- package/dist/cjs/compositional/is-open-context.js +19 -0
- package/dist/cjs/compositional/popup-content.js +123 -0
- package/dist/cjs/compositional/popup-trigger.js +42 -0
- package/dist/cjs/compositional/popup.js +13 -165
- package/dist/cjs/compositional/role-context.js +10 -0
- package/dist/cjs/compositional/set-trigger-ref-context.js +12 -0
- package/dist/cjs/compositional/trigger-ref-context.js +10 -0
- package/dist/cjs/compositional/use-ensure-is-inside-popup.js +15 -0
- package/dist/cjs/entry-points/experimental/compositional.js +5 -3
- package/dist/cjs/popper-wrapper.js +24 -24
- package/dist/es2019/compositional/id-context.js +4 -0
- package/dist/es2019/compositional/is-inside-popup-context.js +14 -0
- package/dist/es2019/compositional/is-open-context.js +14 -0
- package/dist/es2019/compositional/popup-content.js +107 -0
- package/dist/es2019/compositional/popup-trigger.js +34 -0
- package/dist/es2019/compositional/popup.js +8 -153
- package/dist/es2019/compositional/role-context.js +3 -0
- package/dist/es2019/compositional/set-trigger-ref-context.js +4 -0
- package/dist/es2019/compositional/trigger-ref-context.js +3 -0
- package/dist/es2019/compositional/use-ensure-is-inside-popup.js +9 -0
- package/dist/es2019/entry-points/experimental/compositional.js +3 -1
- package/dist/es2019/popper-wrapper.js +24 -24
- package/dist/esm/compositional/id-context.js +4 -0
- package/dist/esm/compositional/is-inside-popup-context.js +14 -0
- package/dist/esm/compositional/is-open-context.js +14 -0
- package/dist/esm/compositional/popup-content.js +114 -0
- package/dist/esm/compositional/popup-trigger.js +34 -0
- package/dist/esm/compositional/popup.js +8 -160
- package/dist/esm/compositional/role-context.js +3 -0
- package/dist/esm/compositional/set-trigger-ref-context.js +4 -0
- package/dist/esm/compositional/trigger-ref-context.js +3 -0
- package/dist/esm/compositional/use-ensure-is-inside-popup.js +9 -0
- package/dist/esm/entry-points/experimental/compositional.js +3 -1
- package/dist/esm/popper-wrapper.js +24 -24
- package/dist/types/compositional/id-context.d.ts +2 -0
- package/dist/types/compositional/is-inside-popup-context.d.ts +11 -0
- package/dist/types/compositional/is-open-context.d.ts +11 -0
- package/dist/types/compositional/popup-content.d.ts +35 -0
- package/dist/types/compositional/popup-trigger.d.ts +13 -0
- package/dist/types/compositional/popup.d.ts +0 -45
- package/dist/types/compositional/role-context.d.ts +2 -0
- package/dist/types/compositional/set-trigger-ref-context.d.ts +2 -0
- package/dist/types/compositional/trigger-ref-context.d.ts +2 -0
- package/dist/types/compositional/use-ensure-is-inside-popup.d.ts +1 -0
- package/dist/types/entry-points/experimental/compositional.d.ts +6 -2
- package/dist/types-ts4.5/compositional/id-context.d.ts +2 -0
- package/dist/types-ts4.5/compositional/is-inside-popup-context.d.ts +11 -0
- package/dist/types-ts4.5/compositional/is-open-context.d.ts +11 -0
- package/dist/types-ts4.5/compositional/popup-content.d.ts +35 -0
- package/dist/types-ts4.5/compositional/popup-trigger.d.ts +13 -0
- package/dist/types-ts4.5/compositional/popup.d.ts +0 -45
- package/dist/types-ts4.5/compositional/role-context.d.ts +2 -0
- package/dist/types-ts4.5/compositional/set-trigger-ref-context.d.ts +2 -0
- package/dist/types-ts4.5/compositional/trigger-ref-context.d.ts +2 -0
- package/dist/types-ts4.5/compositional/use-ensure-is-inside-popup.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/experimental/compositional.d.ts +6 -2
- package/package.json +10 -10
|
@@ -1,29 +1,13 @@
|
|
|
1
1
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
2
|
-
import React, {
|
|
3
|
-
import invariant from 'tiny-invariant';
|
|
4
|
-
import noop from '@atlaskit/ds-lib/noop';
|
|
2
|
+
import React, { useState } from 'react';
|
|
5
3
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import {
|
|
13
|
-
import { useGetMemoizedMergedTriggerRefNew } from '../use-get-memoized-merged-trigger-ref-new';
|
|
14
|
-
var IsOpenContext = /*#__PURE__*/createContext(false);
|
|
15
|
-
var IdContext = /*#__PURE__*/createContext(undefined);
|
|
16
|
-
var TriggerRefContext = /*#__PURE__*/createContext(null);
|
|
17
|
-
var SetTriggerRefContext = /*#__PURE__*/createContext(noop);
|
|
18
|
-
var EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
|
|
19
|
-
var RoleContext = /*#__PURE__*/createContext(undefined);
|
|
20
|
-
|
|
21
|
-
// Used to ensure popup sub-components are used within a Popup
|
|
22
|
-
// and provide a useful error message if not.
|
|
23
|
-
var useEnsureIsInsidePopup = function useEnsureIsInsidePopup() {
|
|
24
|
-
var context = useContext(EnsureIsInsidePopupContext);
|
|
25
|
-
invariant(context, 'PopupTrigger and PopupContent components must be used within a Popup');
|
|
26
|
-
};
|
|
4
|
+
import { Manager } from '@atlaskit/popper';
|
|
5
|
+
import { IdContext } from './id-context';
|
|
6
|
+
import { EnsureIsInsidePopupContext } from './is-inside-popup-context';
|
|
7
|
+
import { IsOpenContext } from './is-open-context';
|
|
8
|
+
import { RoleContext } from './role-context';
|
|
9
|
+
import { SetTriggerRefContext } from './set-trigger-ref-context';
|
|
10
|
+
import { TriggerRefContext } from './trigger-ref-context';
|
|
27
11
|
/**
|
|
28
12
|
* __Popup__
|
|
29
13
|
*
|
|
@@ -68,140 +52,4 @@ export var Popup = function Popup(_ref) {
|
|
|
68
52
|
}, /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
|
|
69
53
|
value: isOpen
|
|
70
54
|
}, /*#__PURE__*/React.createElement(Manager, null, children)))))));
|
|
71
|
-
};
|
|
72
|
-
/**
|
|
73
|
-
* __Popup trigger__
|
|
74
|
-
*
|
|
75
|
-
* Popup trigger is the component that renders the trigger for the popup.
|
|
76
|
-
*
|
|
77
|
-
* It must be a child of the Popup component.
|
|
78
|
-
*/
|
|
79
|
-
export var PopupTrigger = function PopupTrigger(_ref2) {
|
|
80
|
-
var children = _ref2.children;
|
|
81
|
-
useEnsureIsInsidePopup();
|
|
82
|
-
var id = useContext(IdContext);
|
|
83
|
-
var setTriggerRef = useContext(SetTriggerRefContext);
|
|
84
|
-
var isOpen = useContext(IsOpenContext);
|
|
85
|
-
var getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
|
|
86
|
-
var role = useContext(RoleContext);
|
|
87
|
-
return /*#__PURE__*/React.createElement(Reference, null, function (_ref3) {
|
|
88
|
-
var ref = _ref3.ref;
|
|
89
|
-
return children({
|
|
90
|
-
ref: getMergedTriggerRef(ref, setTriggerRef),
|
|
91
|
-
'aria-controls': id,
|
|
92
|
-
'aria-expanded': isOpen,
|
|
93
|
-
'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
|
|
94
|
-
});
|
|
95
|
-
});
|
|
96
|
-
};
|
|
97
|
-
var defaultLayer = 400;
|
|
98
|
-
/**
|
|
99
|
-
* Disables popper.js GPU acceleration for this popup.
|
|
100
|
-
* This means only positioning will be used, without any transforms.
|
|
101
|
-
*
|
|
102
|
-
* Performance will be degraded if the popup is expected to move.
|
|
103
|
-
*/
|
|
104
|
-
var shouldDisableGpuAccelerationModifiers = [{
|
|
105
|
-
name: 'computeStyles',
|
|
106
|
-
options: {
|
|
107
|
-
gpuAcceleration: false
|
|
108
|
-
}
|
|
109
|
-
}];
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* __Popup content__
|
|
113
|
-
*
|
|
114
|
-
* Popup content is the component that renders the content of the popup.
|
|
115
|
-
*
|
|
116
|
-
* It must be a child of the Popup component.
|
|
117
|
-
*/
|
|
118
|
-
export var PopupContent = function PopupContent(_ref4) {
|
|
119
|
-
var xcss = _ref4.xcss,
|
|
120
|
-
_ref4$appearance = _ref4.appearance,
|
|
121
|
-
inAppearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
|
|
122
|
-
children = _ref4.children,
|
|
123
|
-
boundary = _ref4.boundary,
|
|
124
|
-
offset = _ref4.offset,
|
|
125
|
-
strategy = _ref4.strategy,
|
|
126
|
-
onClose = _ref4.onClose,
|
|
127
|
-
testId = _ref4.testId,
|
|
128
|
-
_ref4$rootBoundary = _ref4.rootBoundary,
|
|
129
|
-
rootBoundary = _ref4$rootBoundary === void 0 ? 'viewport' : _ref4$rootBoundary,
|
|
130
|
-
_ref4$shouldFlip = _ref4.shouldFlip,
|
|
131
|
-
shouldFlip = _ref4$shouldFlip === void 0 ? true : _ref4$shouldFlip,
|
|
132
|
-
_ref4$placement = _ref4.placement,
|
|
133
|
-
placement = _ref4$placement === void 0 ? 'auto' : _ref4$placement,
|
|
134
|
-
fallbackPlacements = _ref4.fallbackPlacements,
|
|
135
|
-
popupComponent = _ref4.popupComponent,
|
|
136
|
-
_ref4$autoFocus = _ref4.autoFocus,
|
|
137
|
-
autoFocus = _ref4$autoFocus === void 0 ? true : _ref4$autoFocus,
|
|
138
|
-
_ref4$zIndex = _ref4.zIndex,
|
|
139
|
-
zIndex = _ref4$zIndex === void 0 ? defaultLayer : _ref4$zIndex,
|
|
140
|
-
_ref4$shouldUseCaptur = _ref4.shouldUseCaptureOnOutsideClick,
|
|
141
|
-
shouldUseCaptureOnOutsideClick = _ref4$shouldUseCaptur === void 0 ? false : _ref4$shouldUseCaptur,
|
|
142
|
-
inShouldRenderToParent = _ref4.shouldRenderToParent,
|
|
143
|
-
_ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
|
|
144
|
-
shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo,
|
|
145
|
-
shouldFitContainer = _ref4.shouldFitContainer,
|
|
146
|
-
shouldFitViewport = _ref4.shouldFitViewport,
|
|
147
|
-
_ref4$shouldDisableGp = _ref4.shouldDisableGpuAcceleration,
|
|
148
|
-
shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp,
|
|
149
|
-
role = _ref4.role,
|
|
150
|
-
titleId = _ref4.titleId;
|
|
151
|
-
useEnsureIsInsidePopup();
|
|
152
|
-
var isOpen = useContext(IsOpenContext);
|
|
153
|
-
var id = useContext(IdContext);
|
|
154
|
-
var triggerRef = useContext(TriggerRefContext);
|
|
155
|
-
var _usePopupAppearance = usePopupAppearance({
|
|
156
|
-
appearance: inAppearance,
|
|
157
|
-
shouldRenderToParent: inShouldRenderToParent
|
|
158
|
-
}),
|
|
159
|
-
appearance = _usePopupAppearance.appearance,
|
|
160
|
-
shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
|
|
161
|
-
var handleOpenLayerObserverCloseSignal = useCallback(function () {
|
|
162
|
-
onClose === null || onClose === void 0 || onClose(null);
|
|
163
|
-
}, [onClose]);
|
|
164
|
-
useNotifyOpenLayerObserver({
|
|
165
|
-
isOpen: isOpen,
|
|
166
|
-
onClose: handleOpenLayerObserverCloseSignal,
|
|
167
|
-
type: 'popup'
|
|
168
|
-
});
|
|
169
|
-
if (!isOpen) {
|
|
170
|
-
return null;
|
|
171
|
-
}
|
|
172
|
-
var popperWrapper = /*#__PURE__*/React.createElement(Layering, {
|
|
173
|
-
isDisabled: false
|
|
174
|
-
}, /*#__PURE__*/React.createElement(PopperWrapper, {
|
|
175
|
-
xcss: xcss,
|
|
176
|
-
appearance: appearance,
|
|
177
|
-
content: children,
|
|
178
|
-
isOpen: isOpen,
|
|
179
|
-
placement: placement,
|
|
180
|
-
fallbackPlacements: fallbackPlacements,
|
|
181
|
-
boundary: boundary,
|
|
182
|
-
rootBoundary: rootBoundary,
|
|
183
|
-
shouldFlip: shouldFlip,
|
|
184
|
-
offset: offset,
|
|
185
|
-
popupComponent: popupComponent,
|
|
186
|
-
id: id,
|
|
187
|
-
testId: testId,
|
|
188
|
-
onClose: onClose,
|
|
189
|
-
autoFocus: autoFocus,
|
|
190
|
-
shouldFitContainer: shouldFitContainer,
|
|
191
|
-
shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
|
|
192
|
-
shouldRenderToParent: shouldRenderToParent,
|
|
193
|
-
shouldDisableFocusLock: shouldDisableFocusLock,
|
|
194
|
-
triggerRef: triggerRef,
|
|
195
|
-
strategy: strategy,
|
|
196
|
-
shouldFitViewport: shouldFitViewport,
|
|
197
|
-
modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
|
|
198
|
-
role: role,
|
|
199
|
-
titleId: titleId
|
|
200
|
-
}));
|
|
201
|
-
if (shouldRenderToParent) {
|
|
202
|
-
return popperWrapper;
|
|
203
|
-
}
|
|
204
|
-
return /*#__PURE__*/React.createElement(Portal, {
|
|
205
|
-
zIndex: zIndex
|
|
206
|
-
}, popperWrapper);
|
|
207
55
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { useContext } from 'react';
|
|
2
|
+
import invariant from 'tiny-invariant';
|
|
3
|
+
import { EnsureIsInsidePopupContext } from './is-inside-popup-context';
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
6
|
+
export function useEnsureIsInsidePopup() {
|
|
7
|
+
var context = useContext(EnsureIsInsidePopupContext);
|
|
8
|
+
invariant(context, 'PopupTrigger and PopupContent components must be used within a Popup');
|
|
9
|
+
}
|
|
@@ -32,52 +32,52 @@ var focusRingStyles = {
|
|
|
32
32
|
};
|
|
33
33
|
var placementMap = {
|
|
34
34
|
top: {
|
|
35
|
-
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
36
|
-
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
35
|
+
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
36
|
+
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
37
37
|
},
|
|
38
38
|
'top-start': {
|
|
39
|
-
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
40
|
-
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
39
|
+
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
40
|
+
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
41
41
|
},
|
|
42
42
|
'top-end': {
|
|
43
|
-
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
44
|
-
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
43
|
+
enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
44
|
+
exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
45
45
|
},
|
|
46
46
|
bottom: {
|
|
47
|
-
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
48
|
-
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
47
|
+
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
48
|
+
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
49
49
|
},
|
|
50
50
|
'bottom-start': {
|
|
51
|
-
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
52
|
-
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
51
|
+
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
52
|
+
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
53
53
|
},
|
|
54
54
|
'bottom-end': {
|
|
55
|
-
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
56
|
-
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
55
|
+
enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
56
|
+
exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
57
57
|
},
|
|
58
58
|
left: {
|
|
59
|
-
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
60
|
-
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
59
|
+
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
60
|
+
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
61
61
|
},
|
|
62
62
|
'left-start': {
|
|
63
|
-
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
64
|
-
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
63
|
+
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
64
|
+
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
65
65
|
},
|
|
66
66
|
'left-end': {
|
|
67
|
-
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
68
|
-
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
67
|
+
enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
68
|
+
exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
69
69
|
},
|
|
70
70
|
right: {
|
|
71
|
-
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
72
|
-
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
71
|
+
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
72
|
+
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
73
73
|
},
|
|
74
74
|
'right-start': {
|
|
75
|
-
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
76
|
-
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
75
|
+
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
76
|
+
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
77
77
|
},
|
|
78
78
|
'right-end': {
|
|
79
|
-
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1)
|
|
80
|
-
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6)
|
|
79
|
+
enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
|
|
80
|
+
exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
83
|
var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Context } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* __Ensure is inside popup context__
|
|
4
|
+
*
|
|
5
|
+
* An ensure is inside popup context {description}.
|
|
6
|
+
*
|
|
7
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
8
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
9
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
10
|
+
*/
|
|
11
|
+
export declare const EnsureIsInsidePopupContext: Context<boolean>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Context } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* __Is open context__
|
|
4
|
+
*
|
|
5
|
+
* An is open context {description}.
|
|
6
|
+
*
|
|
7
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
8
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
9
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
10
|
+
*/
|
|
11
|
+
export declare const IsOpenContext: Context<boolean>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type ContentProps, type PopupProps as LegacyPopupProps } from '../types';
|
|
3
|
+
type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
|
|
4
|
+
children: (props: ContentProps) => React.ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* ___Use with caution___
|
|
7
|
+
*
|
|
8
|
+
* Disables popper.js GPU acceleration for this popup.
|
|
9
|
+
* This means only positioning will be used, without any transforms.
|
|
10
|
+
*
|
|
11
|
+
* Performance will be degraded if the popup is expected to move.
|
|
12
|
+
*
|
|
13
|
+
* This should almost never be used, but is sometimes needed
|
|
14
|
+
* to resolve layering issues.
|
|
15
|
+
*/
|
|
16
|
+
shouldDisableGpuAcceleration?: boolean;
|
|
17
|
+
};
|
|
18
|
+
type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
|
|
19
|
+
shouldFitContainer: true;
|
|
20
|
+
shouldRenderToParent?: true;
|
|
21
|
+
strategy?: 'absolute';
|
|
22
|
+
};
|
|
23
|
+
type StandardPopupContentProps = CommonContentPopupProps & {
|
|
24
|
+
shouldFitContainer?: false;
|
|
25
|
+
};
|
|
26
|
+
export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPopupContentProps;
|
|
27
|
+
/**
|
|
28
|
+
* __Popup content__
|
|
29
|
+
*
|
|
30
|
+
* Popup content is the component that renders the content of the popup.
|
|
31
|
+
*
|
|
32
|
+
* It must be a child of the Popup component.
|
|
33
|
+
*/
|
|
34
|
+
export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId, }: PopupContentProps) => React.JSX.Element | null;
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TriggerProps } from '../types';
|
|
3
|
+
export type PopupTriggerProps = {
|
|
4
|
+
children: (props: TriggerProps) => React.ReactNode;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* __Popup trigger__
|
|
8
|
+
*
|
|
9
|
+
* Popup trigger is the component that renders the trigger for the popup.
|
|
10
|
+
*
|
|
11
|
+
* It must be a child of the Popup component.
|
|
12
|
+
*/
|
|
13
|
+
export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type ContentProps, type PopupProps as LegacyPopupProps, type TriggerProps } from '../types';
|
|
3
2
|
export type PopupProps = {
|
|
4
3
|
children: React.ReactNode;
|
|
5
4
|
isOpen?: boolean;
|
|
@@ -26,47 +25,3 @@ export type PopupProps = {
|
|
|
26
25
|
* ```
|
|
27
26
|
*/
|
|
28
27
|
export declare const Popup: ({ children, id: providedId, isOpen, role, }: PopupProps) => React.JSX.Element;
|
|
29
|
-
export type PopupTriggerProps = {
|
|
30
|
-
children: (props: TriggerProps) => React.ReactNode;
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* __Popup trigger__
|
|
34
|
-
*
|
|
35
|
-
* Popup trigger is the component that renders the trigger for the popup.
|
|
36
|
-
*
|
|
37
|
-
* It must be a child of the Popup component.
|
|
38
|
-
*/
|
|
39
|
-
export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
|
|
40
|
-
type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
|
|
41
|
-
children: (props: ContentProps) => React.ReactNode;
|
|
42
|
-
/**
|
|
43
|
-
* ___Use with caution___
|
|
44
|
-
*
|
|
45
|
-
* Disables popper.js GPU acceleration for this popup.
|
|
46
|
-
* This means only positioning will be used, without any transforms.
|
|
47
|
-
*
|
|
48
|
-
* Performance will be degraded if the popup is expected to move.
|
|
49
|
-
*
|
|
50
|
-
* This should almost never be used, but is sometimes needed
|
|
51
|
-
* to resolve layering issues.
|
|
52
|
-
*/
|
|
53
|
-
shouldDisableGpuAcceleration?: boolean;
|
|
54
|
-
};
|
|
55
|
-
type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
|
|
56
|
-
shouldFitContainer: true;
|
|
57
|
-
shouldRenderToParent?: true;
|
|
58
|
-
strategy?: 'absolute';
|
|
59
|
-
};
|
|
60
|
-
type StandardPopupContentProps = CommonContentPopupProps & {
|
|
61
|
-
shouldFitContainer?: false;
|
|
62
|
-
};
|
|
63
|
-
export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPopupContentProps;
|
|
64
|
-
/**
|
|
65
|
-
* __Popup content__
|
|
66
|
-
*
|
|
67
|
-
* Popup content is the component that renders the content of the popup.
|
|
68
|
-
*
|
|
69
|
-
* It must be a child of the Popup component.
|
|
70
|
-
*/
|
|
71
|
-
export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId, }: PopupContentProps) => React.JSX.Element | null;
|
|
72
|
-
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useEnsureIsInsidePopup(): void;
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
export { Popup
|
|
2
|
-
export
|
|
1
|
+
export { Popup } from '../../compositional/popup';
|
|
2
|
+
export { PopupContent } from '../../compositional/popup-content';
|
|
3
|
+
export { PopupTrigger } from '../../compositional/popup-trigger';
|
|
4
|
+
export type { PopupProps } from '../../compositional/popup';
|
|
5
|
+
export type { PopupContentProps } from '../../compositional/popup-content';
|
|
6
|
+
export type { PopupTriggerProps } from '../../compositional/popup-trigger';
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Context } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* __Ensure is inside popup context__
|
|
4
|
+
*
|
|
5
|
+
* An ensure is inside popup context {description}.
|
|
6
|
+
*
|
|
7
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
8
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
9
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
10
|
+
*/
|
|
11
|
+
export declare const EnsureIsInsidePopupContext: Context<boolean>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Context } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* __Is open context__
|
|
4
|
+
*
|
|
5
|
+
* An is open context {description}.
|
|
6
|
+
*
|
|
7
|
+
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
8
|
+
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
9
|
+
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
10
|
+
*/
|
|
11
|
+
export declare const IsOpenContext: Context<boolean>;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type ContentProps, type PopupProps as LegacyPopupProps } from '../types';
|
|
3
|
+
type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
|
|
4
|
+
children: (props: ContentProps) => React.ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* ___Use with caution___
|
|
7
|
+
*
|
|
8
|
+
* Disables popper.js GPU acceleration for this popup.
|
|
9
|
+
* This means only positioning will be used, without any transforms.
|
|
10
|
+
*
|
|
11
|
+
* Performance will be degraded if the popup is expected to move.
|
|
12
|
+
*
|
|
13
|
+
* This should almost never be used, but is sometimes needed
|
|
14
|
+
* to resolve layering issues.
|
|
15
|
+
*/
|
|
16
|
+
shouldDisableGpuAcceleration?: boolean;
|
|
17
|
+
};
|
|
18
|
+
type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
|
|
19
|
+
shouldFitContainer: true;
|
|
20
|
+
shouldRenderToParent?: true;
|
|
21
|
+
strategy?: 'absolute';
|
|
22
|
+
};
|
|
23
|
+
type StandardPopupContentProps = CommonContentPopupProps & {
|
|
24
|
+
shouldFitContainer?: false;
|
|
25
|
+
};
|
|
26
|
+
export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPopupContentProps;
|
|
27
|
+
/**
|
|
28
|
+
* __Popup content__
|
|
29
|
+
*
|
|
30
|
+
* Popup content is the component that renders the content of the popup.
|
|
31
|
+
*
|
|
32
|
+
* It must be a child of the Popup component.
|
|
33
|
+
*/
|
|
34
|
+
export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId, }: PopupContentProps) => React.JSX.Element | null;
|
|
35
|
+
export {};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TriggerProps } from '../types';
|
|
3
|
+
export type PopupTriggerProps = {
|
|
4
|
+
children: (props: TriggerProps) => React.ReactNode;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* __Popup trigger__
|
|
8
|
+
*
|
|
9
|
+
* Popup trigger is the component that renders the trigger for the popup.
|
|
10
|
+
*
|
|
11
|
+
* It must be a child of the Popup component.
|
|
12
|
+
*/
|
|
13
|
+
export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { type ContentProps, type PopupProps as LegacyPopupProps, type TriggerProps } from '../types';
|
|
3
2
|
export type PopupProps = {
|
|
4
3
|
children: React.ReactNode;
|
|
5
4
|
isOpen?: boolean;
|
|
@@ -26,47 +25,3 @@ export type PopupProps = {
|
|
|
26
25
|
* ```
|
|
27
26
|
*/
|
|
28
27
|
export declare const Popup: ({ children, id: providedId, isOpen, role, }: PopupProps) => React.JSX.Element;
|
|
29
|
-
export type PopupTriggerProps = {
|
|
30
|
-
children: (props: TriggerProps) => React.ReactNode;
|
|
31
|
-
};
|
|
32
|
-
/**
|
|
33
|
-
* __Popup trigger__
|
|
34
|
-
*
|
|
35
|
-
* Popup trigger is the component that renders the trigger for the popup.
|
|
36
|
-
*
|
|
37
|
-
* It must be a child of the Popup component.
|
|
38
|
-
*/
|
|
39
|
-
export declare const PopupTrigger: ({ children }: PopupTriggerProps) => React.JSX.Element;
|
|
40
|
-
type CommonContentPopupProps = Pick<LegacyPopupProps, 'xcss' | 'appearance' | 'boundary' | 'offset' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldRenderToParent' | 'shouldUseCaptureOnOutsideClick' | 'shouldDisableFocusLock' | 'strategy' | 'zIndex' | 'shouldFitViewport' | 'role' | 'titleId'> & {
|
|
41
|
-
children: (props: ContentProps) => React.ReactNode;
|
|
42
|
-
/**
|
|
43
|
-
* ___Use with caution___
|
|
44
|
-
*
|
|
45
|
-
* Disables popper.js GPU acceleration for this popup.
|
|
46
|
-
* This means only positioning will be used, without any transforms.
|
|
47
|
-
*
|
|
48
|
-
* Performance will be degraded if the popup is expected to move.
|
|
49
|
-
*
|
|
50
|
-
* This should almost never be used, but is sometimes needed
|
|
51
|
-
* to resolve layering issues.
|
|
52
|
-
*/
|
|
53
|
-
shouldDisableGpuAcceleration?: boolean;
|
|
54
|
-
};
|
|
55
|
-
type ShouldFitContainerContentPopupProps = CommonContentPopupProps & {
|
|
56
|
-
shouldFitContainer: true;
|
|
57
|
-
shouldRenderToParent?: true;
|
|
58
|
-
strategy?: 'absolute';
|
|
59
|
-
};
|
|
60
|
-
type StandardPopupContentProps = CommonContentPopupProps & {
|
|
61
|
-
shouldFitContainer?: false;
|
|
62
|
-
};
|
|
63
|
-
export type PopupContentProps = ShouldFitContainerContentPopupProps | StandardPopupContentProps;
|
|
64
|
-
/**
|
|
65
|
-
* __Popup content__
|
|
66
|
-
*
|
|
67
|
-
* Popup content is the component that renders the content of the popup.
|
|
68
|
-
*
|
|
69
|
-
* It must be a child of the Popup component.
|
|
70
|
-
*/
|
|
71
|
-
export declare const PopupContent: ({ xcss, appearance: inAppearance, children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent: inShouldRenderToParent, shouldDisableFocusLock, shouldFitContainer, shouldFitViewport, shouldDisableGpuAcceleration, role, titleId, }: PopupContentProps) => React.JSX.Element | null;
|
|
72
|
-
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare function useEnsureIsInsidePopup(): void;
|
|
@@ -1,2 +1,6 @@
|
|
|
1
|
-
export { Popup
|
|
2
|
-
export
|
|
1
|
+
export { Popup } from '../../compositional/popup';
|
|
2
|
+
export { PopupContent } from '../../compositional/popup-content';
|
|
3
|
+
export { PopupTrigger } from '../../compositional/popup-trigger';
|
|
4
|
+
export type { PopupProps } from '../../compositional/popup';
|
|
5
|
+
export type { PopupContentProps } from '../../compositional/popup-content';
|
|
6
|
+
export type { PopupTriggerProps } from '../../compositional/popup-trigger';
|