@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.
Files changed (60) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/cjs/compositional/id-context.js +9 -0
  3. package/dist/cjs/compositional/is-inside-popup-context.js +19 -0
  4. package/dist/cjs/compositional/is-open-context.js +19 -0
  5. package/dist/cjs/compositional/popup-content.js +123 -0
  6. package/dist/cjs/compositional/popup-trigger.js +42 -0
  7. package/dist/cjs/compositional/popup.js +13 -165
  8. package/dist/cjs/compositional/role-context.js +10 -0
  9. package/dist/cjs/compositional/set-trigger-ref-context.js +12 -0
  10. package/dist/cjs/compositional/trigger-ref-context.js +10 -0
  11. package/dist/cjs/compositional/use-ensure-is-inside-popup.js +15 -0
  12. package/dist/cjs/entry-points/experimental/compositional.js +5 -3
  13. package/dist/cjs/popper-wrapper.js +24 -24
  14. package/dist/es2019/compositional/id-context.js +4 -0
  15. package/dist/es2019/compositional/is-inside-popup-context.js +14 -0
  16. package/dist/es2019/compositional/is-open-context.js +14 -0
  17. package/dist/es2019/compositional/popup-content.js +107 -0
  18. package/dist/es2019/compositional/popup-trigger.js +34 -0
  19. package/dist/es2019/compositional/popup.js +8 -153
  20. package/dist/es2019/compositional/role-context.js +3 -0
  21. package/dist/es2019/compositional/set-trigger-ref-context.js +4 -0
  22. package/dist/es2019/compositional/trigger-ref-context.js +3 -0
  23. package/dist/es2019/compositional/use-ensure-is-inside-popup.js +9 -0
  24. package/dist/es2019/entry-points/experimental/compositional.js +3 -1
  25. package/dist/es2019/popper-wrapper.js +24 -24
  26. package/dist/esm/compositional/id-context.js +4 -0
  27. package/dist/esm/compositional/is-inside-popup-context.js +14 -0
  28. package/dist/esm/compositional/is-open-context.js +14 -0
  29. package/dist/esm/compositional/popup-content.js +114 -0
  30. package/dist/esm/compositional/popup-trigger.js +34 -0
  31. package/dist/esm/compositional/popup.js +8 -160
  32. package/dist/esm/compositional/role-context.js +3 -0
  33. package/dist/esm/compositional/set-trigger-ref-context.js +4 -0
  34. package/dist/esm/compositional/trigger-ref-context.js +3 -0
  35. package/dist/esm/compositional/use-ensure-is-inside-popup.js +9 -0
  36. package/dist/esm/entry-points/experimental/compositional.js +3 -1
  37. package/dist/esm/popper-wrapper.js +24 -24
  38. package/dist/types/compositional/id-context.d.ts +2 -0
  39. package/dist/types/compositional/is-inside-popup-context.d.ts +11 -0
  40. package/dist/types/compositional/is-open-context.d.ts +11 -0
  41. package/dist/types/compositional/popup-content.d.ts +35 -0
  42. package/dist/types/compositional/popup-trigger.d.ts +13 -0
  43. package/dist/types/compositional/popup.d.ts +0 -45
  44. package/dist/types/compositional/role-context.d.ts +2 -0
  45. package/dist/types/compositional/set-trigger-ref-context.d.ts +2 -0
  46. package/dist/types/compositional/trigger-ref-context.d.ts +2 -0
  47. package/dist/types/compositional/use-ensure-is-inside-popup.d.ts +1 -0
  48. package/dist/types/entry-points/experimental/compositional.d.ts +6 -2
  49. package/dist/types-ts4.5/compositional/id-context.d.ts +2 -0
  50. package/dist/types-ts4.5/compositional/is-inside-popup-context.d.ts +11 -0
  51. package/dist/types-ts4.5/compositional/is-open-context.d.ts +11 -0
  52. package/dist/types-ts4.5/compositional/popup-content.d.ts +35 -0
  53. package/dist/types-ts4.5/compositional/popup-trigger.d.ts +13 -0
  54. package/dist/types-ts4.5/compositional/popup.d.ts +0 -45
  55. package/dist/types-ts4.5/compositional/role-context.d.ts +2 -0
  56. package/dist/types-ts4.5/compositional/set-trigger-ref-context.d.ts +2 -0
  57. package/dist/types-ts4.5/compositional/trigger-ref-context.d.ts +2 -0
  58. package/dist/types-ts4.5/compositional/use-ensure-is-inside-popup.d.ts +1 -0
  59. package/dist/types-ts4.5/entry-points/experimental/compositional.d.ts +6 -2
  60. package/package.json +10 -10
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 4.16.6
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 4.16.5
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
3
15
  ## 4.16.4
4
16
 
5
17
  ### Patch Changes
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IdContext = void 0;
7
+ var _react = require("react");
8
+ /* eslint-disable @repo/internal/react/require-jsdoc */
9
+ var IdContext = exports.IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.EnsureIsInsidePopupContext = void 0;
7
+ var _react = require("react");
8
+ // TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
9
+ // Remove links that the component does not have (such as usage). If there are no links remove them all.
10
+ /**
11
+ * __Ensure is inside popup context__
12
+ *
13
+ * An ensure is inside popup context {description}.
14
+ *
15
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
16
+ * - [Code](https://atlassian.design/components/{packageName}/code)
17
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
18
+ */
19
+ var EnsureIsInsidePopupContext = exports.EnsureIsInsidePopupContext = /*#__PURE__*/(0, _react.createContext)(false);
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.IsOpenContext = void 0;
7
+ var _react = require("react");
8
+ // TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
9
+ // Remove links that the component does not have (such as usage). If there are no links remove them all.
10
+ /**
11
+ * __Is open context__
12
+ *
13
+ * An is open context {description}.
14
+ *
15
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
16
+ * - [Code](https://atlassian.design/components/{packageName}/code)
17
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
18
+ */
19
+ var IsOpenContext = exports.IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
@@ -0,0 +1,123 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ var _typeof = require("@babel/runtime/helpers/typeof");
5
+ Object.defineProperty(exports, "__esModule", {
6
+ value: true
7
+ });
8
+ exports.PopupContent = void 0;
9
+ var _react = _interopRequireWildcard(require("react"));
10
+ var _layering = require("@atlaskit/layering");
11
+ var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
12
+ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
13
+ var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
14
+ var _useAppearance = require("../use-appearance");
15
+ var _idContext = require("./id-context");
16
+ var _isOpenContext = require("./is-open-context");
17
+ var _triggerRefContext = require("./trigger-ref-context");
18
+ var _useEnsureIsInsidePopup = require("./use-ensure-is-inside-popup");
19
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
20
+ var defaultLayer = 400;
21
+ var shouldDisableGpuAccelerationModifiers = [{
22
+ name: 'computeStyles',
23
+ options: {
24
+ gpuAcceleration: false
25
+ }
26
+ }];
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
+ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
35
+ var xcss = _ref.xcss,
36
+ _ref$appearance = _ref.appearance,
37
+ inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
38
+ children = _ref.children,
39
+ boundary = _ref.boundary,
40
+ offset = _ref.offset,
41
+ strategy = _ref.strategy,
42
+ onClose = _ref.onClose,
43
+ testId = _ref.testId,
44
+ _ref$rootBoundary = _ref.rootBoundary,
45
+ rootBoundary = _ref$rootBoundary === void 0 ? 'viewport' : _ref$rootBoundary,
46
+ _ref$shouldFlip = _ref.shouldFlip,
47
+ shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
48
+ _ref$placement = _ref.placement,
49
+ placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
50
+ fallbackPlacements = _ref.fallbackPlacements,
51
+ popupComponent = _ref.popupComponent,
52
+ _ref$autoFocus = _ref.autoFocus,
53
+ autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
54
+ _ref$zIndex = _ref.zIndex,
55
+ zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
56
+ _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
57
+ shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
58
+ inShouldRenderToParent = _ref.shouldRenderToParent,
59
+ _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
60
+ shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
61
+ shouldFitContainer = _ref.shouldFitContainer,
62
+ shouldFitViewport = _ref.shouldFitViewport,
63
+ _ref$shouldDisableGpu = _ref.shouldDisableGpuAcceleration,
64
+ shouldDisableGpuAcceleration = _ref$shouldDisableGpu === void 0 ? false : _ref$shouldDisableGpu,
65
+ role = _ref.role,
66
+ titleId = _ref.titleId;
67
+ (0, _useEnsureIsInsidePopup.useEnsureIsInsidePopup)();
68
+ var isOpen = (0, _react.useContext)(_isOpenContext.IsOpenContext);
69
+ var id = (0, _react.useContext)(_idContext.IdContext);
70
+ var triggerRef = (0, _react.useContext)(_triggerRefContext.TriggerRefContext);
71
+ var _usePopupAppearance = (0, _useAppearance.usePopupAppearance)({
72
+ appearance: inAppearance,
73
+ shouldRenderToParent: inShouldRenderToParent
74
+ }),
75
+ appearance = _usePopupAppearance.appearance,
76
+ shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
77
+ var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
78
+ onClose === null || onClose === void 0 || onClose(null);
79
+ }, [onClose]);
80
+ (0, _openLayerObserver.useNotifyOpenLayerObserver)({
81
+ isOpen: isOpen,
82
+ onClose: handleOpenLayerObserverCloseSignal,
83
+ type: 'popup'
84
+ });
85
+ if (!isOpen) {
86
+ return null;
87
+ }
88
+ var popperWrapper = /*#__PURE__*/_react.default.createElement(_layering.Layering, {
89
+ isDisabled: false
90
+ }, /*#__PURE__*/_react.default.createElement(_popperWrapper.default, {
91
+ xcss: xcss,
92
+ appearance: appearance,
93
+ content: children,
94
+ isOpen: isOpen,
95
+ placement: placement,
96
+ fallbackPlacements: fallbackPlacements,
97
+ boundary: boundary,
98
+ rootBoundary: rootBoundary,
99
+ shouldFlip: shouldFlip,
100
+ offset: offset,
101
+ popupComponent: popupComponent,
102
+ id: id,
103
+ testId: testId,
104
+ onClose: onClose,
105
+ autoFocus: autoFocus,
106
+ shouldFitContainer: shouldFitContainer,
107
+ shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
108
+ shouldRenderToParent: shouldRenderToParent,
109
+ shouldDisableFocusLock: shouldDisableFocusLock,
110
+ triggerRef: triggerRef,
111
+ strategy: strategy,
112
+ shouldFitViewport: shouldFitViewport,
113
+ modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
114
+ role: role,
115
+ titleId: titleId
116
+ }));
117
+ if (shouldRenderToParent) {
118
+ return popperWrapper;
119
+ }
120
+ return /*#__PURE__*/_react.default.createElement(_portal.default, {
121
+ zIndex: zIndex
122
+ }, popperWrapper);
123
+ };
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+
3
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.PopupTrigger = void 0;
8
+ var _react = _interopRequireWildcard(require("react"));
9
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
10
+ var _popper = require("@atlaskit/popper");
11
+ var _useGetMemoizedMergedTriggerRefNew = require("../use-get-memoized-merged-trigger-ref-new");
12
+ var _idContext = require("./id-context");
13
+ var _isOpenContext = require("./is-open-context");
14
+ var _roleContext = require("./role-context");
15
+ var _setTriggerRefContext = require("./set-trigger-ref-context");
16
+ var _useEnsureIsInsidePopup = require("./use-ensure-is-inside-popup");
17
+ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
+ /**
19
+ * __Popup trigger__
20
+ *
21
+ * Popup trigger is the component that renders the trigger for the popup.
22
+ *
23
+ * It must be a child of the Popup component.
24
+ */
25
+ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref) {
26
+ var children = _ref.children;
27
+ (0, _useEnsureIsInsidePopup.useEnsureIsInsidePopup)();
28
+ var id = (0, _react.useContext)(_idContext.IdContext);
29
+ var setTriggerRef = (0, _react.useContext)(_setTriggerRefContext.SetTriggerRefContext);
30
+ var isOpen = (0, _react.useContext)(_isOpenContext.IsOpenContext);
31
+ var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
32
+ var role = (0, _react.useContext)(_roleContext.RoleContext);
33
+ return /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref2) {
34
+ var ref = _ref2.ref;
35
+ return children({
36
+ ref: getMergedTriggerRef(ref, setTriggerRef),
37
+ 'aria-controls': id,
38
+ 'aria-expanded': isOpen,
39
+ 'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
40
+ });
41
+ });
42
+ };
@@ -5,34 +5,18 @@ var _typeof = require("@babel/runtime/helpers/typeof");
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.PopupTrigger = exports.PopupContent = exports.Popup = void 0;
8
+ exports.Popup = void 0;
9
9
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
10
10
  var _react = _interopRequireWildcard(require("react"));
11
- var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
12
- var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
13
11
  var _useId = require("@atlaskit/ds-lib/use-id");
14
- var _layering = require("@atlaskit/layering");
15
- var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
16
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
12
  var _popper = require("@atlaskit/popper");
18
- var _portal = _interopRequireDefault(require("@atlaskit/portal"));
19
- var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
20
- var _useAppearance = require("../use-appearance");
21
- var _useGetMemoizedMergedTriggerRefNew = require("../use-get-memoized-merged-trigger-ref-new");
13
+ var _idContext = require("./id-context");
14
+ var _isInsidePopupContext = require("./is-inside-popup-context");
15
+ var _isOpenContext = require("./is-open-context");
16
+ var _roleContext = require("./role-context");
17
+ var _setTriggerRefContext = require("./set-trigger-ref-context");
18
+ var _triggerRefContext = require("./trigger-ref-context");
22
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
23
- var IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
24
- var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
25
- var TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);
26
- var SetTriggerRefContext = /*#__PURE__*/(0, _react.createContext)(_noop.default);
27
- var EnsureIsInsidePopupContext = /*#__PURE__*/(0, _react.createContext)(false);
28
- var RoleContext = /*#__PURE__*/(0, _react.createContext)(undefined);
29
-
30
- // Used to ensure popup sub-components are used within a Popup
31
- // and provide a useful error message if not.
32
- var useEnsureIsInsidePopup = function useEnsureIsInsidePopup() {
33
- var context = (0, _react.useContext)(EnsureIsInsidePopupContext);
34
- (0, _tinyInvariant.default)(context, 'PopupTrigger and PopupContent components must be used within a Popup');
35
- };
36
20
  /**
37
21
  * __Popup__
38
22
  *
@@ -64,153 +48,17 @@ var Popup = exports.Popup = function Popup(_ref) {
64
48
  setTriggerRef = _useState2[1];
65
49
  var generatedId = (0, _useId.useId)();
66
50
  var id = providedId || generatedId;
67
- return /*#__PURE__*/_react.default.createElement(RoleContext.Provider, {
51
+ return /*#__PURE__*/_react.default.createElement(_roleContext.RoleContext.Provider, {
68
52
  value: role
69
- }, /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
53
+ }, /*#__PURE__*/_react.default.createElement(_isInsidePopupContext.EnsureIsInsidePopupContext.Provider, {
70
54
  value: true
71
- }, /*#__PURE__*/_react.default.createElement(IdContext.Provider, {
55
+ }, /*#__PURE__*/_react.default.createElement(_idContext.IdContext.Provider, {
72
56
  value: id
73
- }, /*#__PURE__*/_react.default.createElement(TriggerRefContext.Provider, {
57
+ }, /*#__PURE__*/_react.default.createElement(_triggerRefContext.TriggerRefContext.Provider, {
74
58
  value: triggerRef
75
- }, /*#__PURE__*/_react.default.createElement(SetTriggerRefContext.Provider, {
59
+ }, /*#__PURE__*/_react.default.createElement(_setTriggerRefContext.SetTriggerRefContext.Provider, {
76
60
  value: setTriggerRef
77
- }, /*#__PURE__*/_react.default.createElement(IsOpenContext.Provider, {
61
+ }, /*#__PURE__*/_react.default.createElement(_isOpenContext.IsOpenContext.Provider, {
78
62
  value: isOpen
79
63
  }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, children)))))));
80
- };
81
- /**
82
- * __Popup trigger__
83
- *
84
- * Popup trigger is the component that renders the trigger for the popup.
85
- *
86
- * It must be a child of the Popup component.
87
- */
88
- var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref2) {
89
- var children = _ref2.children;
90
- useEnsureIsInsidePopup();
91
- var id = (0, _react.useContext)(IdContext);
92
- var setTriggerRef = (0, _react.useContext)(SetTriggerRefContext);
93
- var isOpen = (0, _react.useContext)(IsOpenContext);
94
- var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
95
- var role = (0, _react.useContext)(RoleContext);
96
- return /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref3) {
97
- var ref = _ref3.ref;
98
- return children({
99
- ref: getMergedTriggerRef(ref, setTriggerRef),
100
- 'aria-controls': id,
101
- 'aria-expanded': isOpen,
102
- 'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
103
- });
104
- });
105
- };
106
- var defaultLayer = 400;
107
- /**
108
- * Disables popper.js GPU acceleration for this popup.
109
- * This means only positioning will be used, without any transforms.
110
- *
111
- * Performance will be degraded if the popup is expected to move.
112
- */
113
- var shouldDisableGpuAccelerationModifiers = [{
114
- name: 'computeStyles',
115
- options: {
116
- gpuAcceleration: false
117
- }
118
- }];
119
-
120
- /**
121
- * __Popup content__
122
- *
123
- * Popup content is the component that renders the content of the popup.
124
- *
125
- * It must be a child of the Popup component.
126
- */
127
- var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
128
- var xcss = _ref4.xcss,
129
- _ref4$appearance = _ref4.appearance,
130
- inAppearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
131
- children = _ref4.children,
132
- boundary = _ref4.boundary,
133
- offset = _ref4.offset,
134
- strategy = _ref4.strategy,
135
- onClose = _ref4.onClose,
136
- testId = _ref4.testId,
137
- _ref4$rootBoundary = _ref4.rootBoundary,
138
- rootBoundary = _ref4$rootBoundary === void 0 ? 'viewport' : _ref4$rootBoundary,
139
- _ref4$shouldFlip = _ref4.shouldFlip,
140
- shouldFlip = _ref4$shouldFlip === void 0 ? true : _ref4$shouldFlip,
141
- _ref4$placement = _ref4.placement,
142
- placement = _ref4$placement === void 0 ? 'auto' : _ref4$placement,
143
- fallbackPlacements = _ref4.fallbackPlacements,
144
- popupComponent = _ref4.popupComponent,
145
- _ref4$autoFocus = _ref4.autoFocus,
146
- autoFocus = _ref4$autoFocus === void 0 ? true : _ref4$autoFocus,
147
- _ref4$zIndex = _ref4.zIndex,
148
- zIndex = _ref4$zIndex === void 0 ? defaultLayer : _ref4$zIndex,
149
- _ref4$shouldUseCaptur = _ref4.shouldUseCaptureOnOutsideClick,
150
- shouldUseCaptureOnOutsideClick = _ref4$shouldUseCaptur === void 0 ? false : _ref4$shouldUseCaptur,
151
- inShouldRenderToParent = _ref4.shouldRenderToParent,
152
- _ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
153
- shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo,
154
- shouldFitContainer = _ref4.shouldFitContainer,
155
- shouldFitViewport = _ref4.shouldFitViewport,
156
- _ref4$shouldDisableGp = _ref4.shouldDisableGpuAcceleration,
157
- shouldDisableGpuAcceleration = _ref4$shouldDisableGp === void 0 ? false : _ref4$shouldDisableGp,
158
- role = _ref4.role,
159
- titleId = _ref4.titleId;
160
- useEnsureIsInsidePopup();
161
- var isOpen = (0, _react.useContext)(IsOpenContext);
162
- var id = (0, _react.useContext)(IdContext);
163
- var triggerRef = (0, _react.useContext)(TriggerRefContext);
164
- var _usePopupAppearance = (0, _useAppearance.usePopupAppearance)({
165
- appearance: inAppearance,
166
- shouldRenderToParent: inShouldRenderToParent
167
- }),
168
- appearance = _usePopupAppearance.appearance,
169
- shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
170
- var handleOpenLayerObserverCloseSignal = (0, _react.useCallback)(function () {
171
- onClose === null || onClose === void 0 || onClose(null);
172
- }, [onClose]);
173
- (0, _openLayerObserver.useNotifyOpenLayerObserver)({
174
- isOpen: isOpen,
175
- onClose: handleOpenLayerObserverCloseSignal,
176
- type: 'popup'
177
- });
178
- if (!isOpen) {
179
- return null;
180
- }
181
- var popperWrapper = /*#__PURE__*/_react.default.createElement(_layering.Layering, {
182
- isDisabled: false
183
- }, /*#__PURE__*/_react.default.createElement(_popperWrapper.default, {
184
- xcss: xcss,
185
- appearance: appearance,
186
- content: children,
187
- isOpen: isOpen,
188
- placement: placement,
189
- fallbackPlacements: fallbackPlacements,
190
- boundary: boundary,
191
- rootBoundary: rootBoundary,
192
- shouldFlip: shouldFlip,
193
- offset: offset,
194
- popupComponent: popupComponent,
195
- id: id,
196
- testId: testId,
197
- onClose: onClose,
198
- autoFocus: autoFocus,
199
- shouldFitContainer: shouldFitContainer,
200
- shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
201
- shouldRenderToParent: shouldRenderToParent,
202
- shouldDisableFocusLock: shouldDisableFocusLock,
203
- triggerRef: triggerRef,
204
- strategy: strategy,
205
- shouldFitViewport: shouldFitViewport,
206
- modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
207
- role: role,
208
- titleId: titleId
209
- }));
210
- if (shouldRenderToParent) {
211
- return popperWrapper;
212
- }
213
- return /*#__PURE__*/_react.default.createElement(_portal.default, {
214
- zIndex: zIndex
215
- }, popperWrapper);
216
64
  };
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.RoleContext = void 0;
7
+ var _react = require("react");
8
+ /* eslint-disable @repo/internal/react/require-jsdoc */
9
+
10
+ var RoleContext = exports.RoleContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -0,0 +1,12 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.SetTriggerRefContext = void 0;
8
+ var _react = require("react");
9
+ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
10
+ /* eslint-disable @repo/internal/react/require-jsdoc */
11
+
12
+ var SetTriggerRefContext = exports.SetTriggerRefContext = /*#__PURE__*/(0, _react.createContext)(_noop.default);
@@ -0,0 +1,10 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.TriggerRefContext = void 0;
7
+ var _react = require("react");
8
+ /* eslint-disable @repo/internal/react/require-jsdoc */
9
+
10
+ var TriggerRefContext = exports.TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.useEnsureIsInsidePopup = useEnsureIsInsidePopup;
8
+ var _react = require("react");
9
+ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
10
+ var _isInsidePopupContext = require("./is-inside-popup-context");
11
+ // eslint-disable-next-line @repo/internal/react/require-jsdoc
12
+ function useEnsureIsInsidePopup() {
13
+ var context = (0, _react.useContext)(_isInsidePopupContext.EnsureIsInsidePopupContext);
14
+ (0, _tinyInvariant.default)(context, 'PopupTrigger and PopupContent components must be used within a Popup');
15
+ }
@@ -12,13 +12,15 @@ Object.defineProperty(exports, "Popup", {
12
12
  Object.defineProperty(exports, "PopupContent", {
13
13
  enumerable: true,
14
14
  get: function get() {
15
- return _popup.PopupContent;
15
+ return _popupContent.PopupContent;
16
16
  }
17
17
  });
18
18
  Object.defineProperty(exports, "PopupTrigger", {
19
19
  enumerable: true,
20
20
  get: function get() {
21
- return _popup.PopupTrigger;
21
+ return _popupTrigger.PopupTrigger;
22
22
  }
23
23
  });
24
- var _popup = require("../../compositional/popup");
24
+ var _popup = require("../../compositional/popup");
25
+ var _popupContent = require("../../compositional/popup-content");
26
+ var _popupTrigger = require("../../compositional/popup-trigger");
@@ -41,52 +41,52 @@ var focusRingStyles = {
41
41
  };
42
42
  var placementMap = {
43
43
  top: {
44
- enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
45
- exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
44
+ 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)",
45
+ 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)"
46
46
  },
47
47
  'top-start': {
48
- enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
49
- exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
48
+ 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)",
49
+ 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)"
50
50
  },
51
51
  'top-end': {
52
- enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
53
- exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
52
+ 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)",
53
+ 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)"
54
54
  },
55
55
  bottom: {
56
- enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
57
- exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
56
+ 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)",
57
+ 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)"
58
58
  },
59
59
  'bottom-start': {
60
- enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
61
- exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
60
+ 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)",
61
+ 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)"
62
62
  },
63
63
  'bottom-end': {
64
- enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
65
- exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
64
+ 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)",
65
+ 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)"
66
66
  },
67
67
  left: {
68
- enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
69
- exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
68
+ 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)",
69
+ 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)"
70
70
  },
71
71
  'left-start': {
72
- enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
73
- exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
72
+ 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)",
73
+ 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)"
74
74
  },
75
75
  'left-end': {
76
- enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
77
- exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
76
+ 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)",
77
+ 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)"
78
78
  },
79
79
  right: {
80
- enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
81
- exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
80
+ 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)",
81
+ 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)"
82
82
  },
83
83
  'right-start': {
84
- enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
85
- exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
84
+ 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)",
85
+ 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)"
86
86
  },
87
87
  'right-end': {
88
- enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
89
- exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
88
+ 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)",
89
+ 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)"
90
90
  }
91
91
  };
92
92
  var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
@@ -0,0 +1,4 @@
1
+ import { createContext } from 'react';
2
+
3
+ /* eslint-disable @repo/internal/react/require-jsdoc */
4
+ export const IdContext = /*#__PURE__*/createContext(undefined);
@@ -0,0 +1,14 @@
1
+ import { createContext } from 'react';
2
+
3
+ // TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
4
+ // Remove links that the component does not have (such as usage). If there are no links remove them all.
5
+ /**
6
+ * __Ensure is inside popup context__
7
+ *
8
+ * An ensure is inside popup context {description}.
9
+ *
10
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
11
+ * - [Code](https://atlassian.design/components/{packageName}/code)
12
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
13
+ */
14
+ export const EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
@@ -0,0 +1,14 @@
1
+ import { createContext } from 'react';
2
+
3
+ // TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
4
+ // Remove links that the component does not have (such as usage). If there are no links remove them all.
5
+ /**
6
+ * __Is open context__
7
+ *
8
+ * An is open context {description}.
9
+ *
10
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
11
+ * - [Code](https://atlassian.design/components/{packageName}/code)
12
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
13
+ */
14
+ export const IsOpenContext = /*#__PURE__*/createContext(false);