@atlaskit/popup 1.9.3 → 1.10.1

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 CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 1.10.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`a54578d2ea9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a54578d2ea9) - This removes the feature flag for the `shouldRenderToParent` prop. The prop is available for use.
8
+
9
+ ## 1.10.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [`f355884a4aa`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f355884a4aa) - [ux] Support to press escape key and only close the top layer
14
+
15
+ ### Patch Changes
16
+
17
+ - Updated dependencies
18
+
3
19
  ## 1.9.3
4
20
 
5
21
  ### Patch Changes
@@ -10,7 +10,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
10
10
  var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
11
11
  var _react = require("react");
12
12
  var _react2 = require("@emotion/react");
13
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
13
  var _popper = require("@atlaskit/popper");
15
14
  var _colors = require("@atlaskit/theme/colors");
16
15
  var _constants = require("@atlaskit/theme/constants");
@@ -30,12 +29,14 @@ var popupStyles = (0, _react2.css)((_css = {
30
29
  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
31
30
  }, (0, _defineProperty2.default)(_css, _tokens.CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(_colors.N0, ")")), (0, _defineProperty2.default)(_css, ':focus', {
32
31
  outline: 'none'
33
- }), _css), !(0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') && {
32
+ }), _css));
33
+ var popupOverflowStyles = (0, _react2.css)({
34
34
  overflow: 'auto'
35
35
  });
36
36
  var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
37
+ var shouldRenderToParent = props.shouldRenderToParent;
37
38
  return (0, _react2.jsx)("div", (0, _extends2.default)({
38
- css: popupStyles
39
+ css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
39
40
  }, props, {
40
41
  ref: ref
41
42
  }));
@@ -58,7 +59,8 @@ function PopperWrapper(_ref) {
58
59
  _ref$autoFocus = _ref.autoFocus,
59
60
  autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
60
61
  triggerRef = _ref.triggerRef,
61
- shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
62
+ shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
63
+ shouldRenderToParent = _ref.shouldRenderToParent;
62
64
  var _useState = (0, _react.useState)(null),
63
65
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
64
66
  popupRef = _useState2[0],
@@ -116,7 +118,8 @@ function PopperWrapper(_ref) {
116
118
  // using tabIndex={-1} would cause a bug where Safari focuses
117
119
  // first on the browser address bar when using keyboard
118
120
  ,
119
- tabIndex: autoFocus ? 0 : undefined
121
+ tabIndex: autoFocus ? 0 : undefined,
122
+ shouldRenderToParent: shouldRenderToParent
120
123
  }, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
121
124
  update: update
122
125
  }, content({
package/dist/cjs/popup.js CHANGED
@@ -8,7 +8,7 @@ exports.default = exports.Popup = void 0;
8
8
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
9
  var _react = require("react");
10
10
  var _react2 = require("@emotion/react");
11
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
+ var _layering = require("@atlaskit/layering");
12
12
  var _popper = require("@atlaskit/popper");
13
13
  var _portal = _interopRequireDefault(require("@atlaskit/portal"));
14
14
  var _constants = require("@atlaskit/theme/constants");
@@ -46,7 +46,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
46
46
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
47
47
  triggerRef = _useState2[0],
48
48
  setTriggerRef = _useState2[1];
49
- var renderPopperWrapper = (0, _react2.jsx)(_popperWrapper.default, {
49
+ var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, null, (0, _react2.jsx)(_popperWrapper.default, {
50
50
  content: content,
51
51
  isOpen: isOpen,
52
52
  placement: placement,
@@ -61,8 +61,9 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
61
61
  onClose: onClose,
62
62
  autoFocus: autoFocus,
63
63
  shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
64
+ shouldRenderToParent: shouldRenderToParent,
64
65
  triggerRef: triggerRef
65
- });
66
+ }));
66
67
  return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
67
68
  var _ref3 = _ref2.ref;
68
69
  return trigger({
@@ -80,9 +81,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
80
81
  'aria-expanded': isOpen,
81
82
  'aria-haspopup': true
82
83
  });
83
- }), isOpen && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
84
- zIndex: zIndex
85
- }, renderPopperWrapper) : (0, _react2.jsx)(_portal.default, {
84
+ }), isOpen && (shouldRenderToParent ? renderPopperWrapper : (0, _react2.jsx)(_portal.default, {
86
85
  zIndex: zIndex
87
86
  }, renderPopperWrapper)));
88
87
  });
@@ -8,12 +8,15 @@ exports.useCloseManager = void 0;
8
8
  var _react = require("react");
9
9
  var _bindEventListener = require("bind-event-listener");
10
10
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
11
+ var _layering = require("@atlaskit/layering");
11
12
  var useCloseManager = function useCloseManager(_ref) {
12
13
  var isOpen = _ref.isOpen,
13
14
  onClose = _ref.onClose,
14
15
  popupRef = _ref.popupRef,
15
16
  triggerRef = _ref.triggerRef,
16
17
  capture = _ref.shouldUseCaptureOnOutsideClick;
18
+ var _UNSAFE_useLayering = (0, _layering.UNSAFE_useLayering)(),
19
+ isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
17
20
  (0, _react.useEffect)(function () {
18
21
  if (!isOpen || !popupRef) {
19
22
  return _noop.default;
@@ -44,6 +47,9 @@ var useCloseManager = function useCloseManager(_ref) {
44
47
  }
45
48
  };
46
49
  var onKeyDown = function onKeyDown(event) {
50
+ if (isLayerDisabled()) {
51
+ return;
52
+ }
47
53
  var key = event.key;
48
54
  if (key === 'Escape' || key === 'Esc') {
49
55
  closePopup(event);
@@ -60,6 +66,6 @@ var useCloseManager = function useCloseManager(_ref) {
60
66
  listener: onKeyDown
61
67
  }]);
62
68
  return unbind;
63
- }, [isOpen, onClose, popupRef, triggerRef, capture]);
69
+ }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
64
70
  };
65
71
  exports.useCloseManager = useCloseManager;
@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
2
2
  /** @jsx jsx */
3
3
  import { forwardRef, useMemo, useState } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
5
  import { Popper } from '@atlaskit/popper';
7
6
  import { N0, N50A, N60A } from '@atlaskit/theme/colors';
8
7
  import { layers } from '@atlaskit/theme/constants';
@@ -22,14 +21,20 @@ const popupStyles = css({
22
21
  ':focus': {
23
22
  outline: 'none'
24
23
  }
25
- }, !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
24
+ });
25
+ const popupOverflowStyles = css({
26
26
  overflow: 'auto'
27
27
  });
28
- const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => jsx("div", _extends({
29
- css: popupStyles
30
- }, props, {
31
- ref: ref
32
- })));
28
+ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
29
+ const {
30
+ shouldRenderToParent
31
+ } = props;
32
+ return jsx("div", _extends({
33
+ css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
34
+ }, props, {
35
+ ref: ref
36
+ }));
37
+ });
33
38
  function PopperWrapper({
34
39
  isOpen,
35
40
  id,
@@ -45,7 +50,8 @@ function PopperWrapper({
45
50
  popupComponent: PopupContainer = DefaultPopupComponent,
46
51
  autoFocus = true,
47
52
  triggerRef,
48
- shouldUseCaptureOnOutsideClick
53
+ shouldUseCaptureOnOutsideClick,
54
+ shouldRenderToParent
49
55
  }) {
50
56
  const [popupRef, setPopupRef] = useState(null);
51
57
  const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -97,7 +103,8 @@ function PopperWrapper({
97
103
  // using tabIndex={-1} would cause a bug where Safari focuses
98
104
  // first on the browser address bar when using keyboard
99
105
  ,
100
- tabIndex: autoFocus ? 0 : undefined
106
+ tabIndex: autoFocus ? 0 : undefined,
107
+ shouldRenderToParent: shouldRenderToParent
101
108
  }, jsx(RepositionOnUpdate, {
102
109
  update: update
103
110
  }, content({
@@ -2,7 +2,7 @@
2
2
  /** @jsx jsx */
3
3
  import { memo, useState } from 'react';
4
4
  import { jsx } from '@emotion/react';
5
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
5
+ import { UNSAFE_LAYERING } from '@atlaskit/layering';
6
6
  import { Manager, Reference } from '@atlaskit/popper';
7
7
  import Portal from '@atlaskit/portal';
8
8
  import { layers } from '@atlaskit/theme/constants';
@@ -28,7 +28,7 @@ export const Popup = /*#__PURE__*/memo(({
28
28
  shouldRenderToParent = false
29
29
  }) => {
30
30
  const [triggerRef, setTriggerRef] = useState(null);
31
- const renderPopperWrapper = jsx(PopperWrapper, {
31
+ const renderPopperWrapper = jsx(UNSAFE_LAYERING, null, jsx(PopperWrapper, {
32
32
  content: content,
33
33
  isOpen: isOpen,
34
34
  placement: placement,
@@ -43,8 +43,9 @@ export const Popup = /*#__PURE__*/memo(({
43
43
  onClose: onClose,
44
44
  autoFocus: autoFocus,
45
45
  shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
46
+ shouldRenderToParent: shouldRenderToParent,
46
47
  triggerRef: triggerRef
47
- });
48
+ }));
48
49
  return jsx(Manager, null, jsx(Reference, null, ({
49
50
  ref
50
51
  }) => {
@@ -63,9 +64,7 @@ export const Popup = /*#__PURE__*/memo(({
63
64
  'aria-expanded': isOpen,
64
65
  'aria-haspopup': true
65
66
  });
66
- }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
67
- zIndex: zIndex
68
- }, renderPopperWrapper) : jsx(Portal, {
67
+ }), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
69
68
  zIndex: zIndex
70
69
  }, renderPopperWrapper)));
71
70
  });
@@ -1,6 +1,7 @@
1
1
  import { useEffect } from 'react';
2
2
  import { bindAll } from 'bind-event-listener';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
+ import { UNSAFE_useLayering } from '@atlaskit/layering';
4
5
  export const useCloseManager = ({
5
6
  isOpen,
6
7
  onClose,
@@ -8,6 +9,9 @@ export const useCloseManager = ({
8
9
  triggerRef,
9
10
  shouldUseCaptureOnOutsideClick: capture
10
11
  }) => {
12
+ const {
13
+ isLayerDisabled
14
+ } = UNSAFE_useLayering();
11
15
  useEffect(() => {
12
16
  if (!isOpen || !popupRef) {
13
17
  return noop;
@@ -40,6 +44,9 @@ export const useCloseManager = ({
40
44
  }
41
45
  };
42
46
  const onKeyDown = event => {
47
+ if (isLayerDisabled()) {
48
+ return;
49
+ }
43
50
  const {
44
51
  key
45
52
  } = event;
@@ -58,5 +65,5 @@ export const useCloseManager = ({
58
65
  listener: onKeyDown
59
66
  }]);
60
67
  return unbind;
61
- }, [isOpen, onClose, popupRef, triggerRef, capture]);
68
+ }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
62
69
  };
@@ -5,7 +5,6 @@ var _css;
5
5
  /** @jsx jsx */
6
6
  import { forwardRef, useMemo, useState } from 'react';
7
7
  import { css, jsx } from '@emotion/react';
8
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
8
  import { Popper } from '@atlaskit/popper';
10
9
  import { N0, N50A, N60A } from '@atlaskit/theme/colors';
11
10
  import { layers } from '@atlaskit/theme/constants';
@@ -23,12 +22,14 @@ var popupStyles = css((_css = {
23
22
  boxShadow: "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
24
23
  }, _defineProperty(_css, CURRENT_SURFACE_CSS_VAR, "var(--ds-surface-overlay, ".concat(N0, ")")), _defineProperty(_css, ':focus', {
25
24
  outline: 'none'
26
- }), _css), !getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') && {
25
+ }), _css));
26
+ var popupOverflowStyles = css({
27
27
  overflow: 'auto'
28
28
  });
29
29
  var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
30
+ var shouldRenderToParent = props.shouldRenderToParent;
30
31
  return jsx("div", _extends({
31
- css: popupStyles
32
+ css: [popupStyles, !shouldRenderToParent && popupOverflowStyles]
32
33
  }, props, {
33
34
  ref: ref
34
35
  }));
@@ -51,7 +52,8 @@ function PopperWrapper(_ref) {
51
52
  _ref$autoFocus = _ref.autoFocus,
52
53
  autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
53
54
  triggerRef = _ref.triggerRef,
54
- shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick;
55
+ shouldUseCaptureOnOutsideClick = _ref.shouldUseCaptureOnOutsideClick,
56
+ shouldRenderToParent = _ref.shouldRenderToParent;
55
57
  var _useState = useState(null),
56
58
  _useState2 = _slicedToArray(_useState, 2),
57
59
  popupRef = _useState2[0],
@@ -109,7 +111,8 @@ function PopperWrapper(_ref) {
109
111
  // using tabIndex={-1} would cause a bug where Safari focuses
110
112
  // first on the browser address bar when using keyboard
111
113
  ,
112
- tabIndex: autoFocus ? 0 : undefined
114
+ tabIndex: autoFocus ? 0 : undefined,
115
+ shouldRenderToParent: shouldRenderToParent
113
116
  }, jsx(RepositionOnUpdate, {
114
117
  update: update
115
118
  }, content({
package/dist/esm/popup.js CHANGED
@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
3
3
  /** @jsx jsx */
4
4
  import { memo, useState } from 'react';
5
5
  import { jsx } from '@emotion/react';
6
- import { getBooleanFF } from '@atlaskit/platform-feature-flags';
6
+ import { UNSAFE_LAYERING } from '@atlaskit/layering';
7
7
  import { Manager, Reference } from '@atlaskit/popper';
8
8
  import Portal from '@atlaskit/portal';
9
9
  import { layers } from '@atlaskit/theme/constants';
@@ -38,7 +38,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
38
38
  _useState2 = _slicedToArray(_useState, 2),
39
39
  triggerRef = _useState2[0],
40
40
  setTriggerRef = _useState2[1];
41
- var renderPopperWrapper = jsx(PopperWrapper, {
41
+ var renderPopperWrapper = jsx(UNSAFE_LAYERING, null, jsx(PopperWrapper, {
42
42
  content: content,
43
43
  isOpen: isOpen,
44
44
  placement: placement,
@@ -53,8 +53,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
53
53
  onClose: onClose,
54
54
  autoFocus: autoFocus,
55
55
  shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
56
+ shouldRenderToParent: shouldRenderToParent,
56
57
  triggerRef: triggerRef
57
- });
58
+ }));
58
59
  return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
59
60
  var _ref3 = _ref2.ref;
60
61
  return trigger({
@@ -72,9 +73,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
72
73
  'aria-expanded': isOpen,
73
74
  'aria-haspopup': true
74
75
  });
75
- }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
76
- zIndex: zIndex
77
- }, renderPopperWrapper) : jsx(Portal, {
76
+ }), isOpen && (shouldRenderToParent ? renderPopperWrapper : jsx(Portal, {
78
77
  zIndex: zIndex
79
78
  }, renderPopperWrapper)));
80
79
  });
@@ -1,12 +1,15 @@
1
1
  import { useEffect } from 'react';
2
2
  import { bindAll } from 'bind-event-listener';
3
3
  import noop from '@atlaskit/ds-lib/noop';
4
+ import { UNSAFE_useLayering } from '@atlaskit/layering';
4
5
  export var useCloseManager = function useCloseManager(_ref) {
5
6
  var isOpen = _ref.isOpen,
6
7
  onClose = _ref.onClose,
7
8
  popupRef = _ref.popupRef,
8
9
  triggerRef = _ref.triggerRef,
9
10
  capture = _ref.shouldUseCaptureOnOutsideClick;
11
+ var _UNSAFE_useLayering = UNSAFE_useLayering(),
12
+ isLayerDisabled = _UNSAFE_useLayering.isLayerDisabled;
10
13
  useEffect(function () {
11
14
  if (!isOpen || !popupRef) {
12
15
  return noop;
@@ -37,6 +40,9 @@ export var useCloseManager = function useCloseManager(_ref) {
37
40
  }
38
41
  };
39
42
  var onKeyDown = function onKeyDown(event) {
43
+ if (isLayerDisabled()) {
44
+ return;
45
+ }
40
46
  var key = event.key;
41
47
  if (key === 'Escape' || key === 'Esc') {
42
48
  closePopup(event);
@@ -53,5 +59,5 @@ export var useCloseManager = function useCloseManager(_ref) {
53
59
  listener: onKeyDown
54
60
  }]);
55
61
  return unbind;
56
- }, [isOpen, onClose, popupRef, triggerRef, capture]);
62
+ }, [isOpen, onClose, popupRef, triggerRef, capture, isLayerDisabled]);
57
63
  };
@@ -1,4 +1,4 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { PopperWrapperProps } from './types';
3
- declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
3
+ declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
4
4
  export default PopperWrapper;
@@ -56,6 +56,11 @@ export interface PopupComponentProps {
56
56
  * Tab index passed through by the parent popup.
57
57
  */
58
58
  tabIndex: number | undefined;
59
+ /**
60
+ * The root element where the popup should be rendered.
61
+ * Defaults to `false`.
62
+ */
63
+ shouldRenderToParent?: boolean;
59
64
  }
60
65
  interface BaseProps {
61
66
  /**
@@ -134,6 +139,11 @@ interface BaseProps {
134
139
  * `capture: true`.
135
140
  */
136
141
  shouldUseCaptureOnOutsideClick?: boolean;
142
+ /**
143
+ * The root element where the popup should be rendered.
144
+ * Defaults to `false`.
145
+ */
146
+ shouldRenderToParent?: boolean;
137
147
  }
138
148
  export interface PopupProps extends BaseProps {
139
149
  /**
@@ -148,11 +158,6 @@ export interface PopupProps extends BaseProps {
148
158
  * Defaults to `layers.layer()` from `@atlaskit/theme`.
149
159
  */
150
160
  zIndex?: number;
151
- /**
152
- * The root element where the popup should be rendered.
153
- * Defaults to `false`.
154
- */
155
- shouldRenderToParent?: boolean;
156
161
  }
157
162
  export interface PopperWrapperProps extends BaseProps {
158
163
  triggerRef: TriggerRef;
@@ -1,4 +1,4 @@
1
1
  import { jsx } from '@emotion/react';
2
2
  import { PopperWrapperProps } from './types';
3
- declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
3
+ declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, shouldRenderToParent, }: PopperWrapperProps): jsx.JSX.Element;
4
4
  export default PopperWrapper;
@@ -56,6 +56,11 @@ export interface PopupComponentProps {
56
56
  * Tab index passed through by the parent popup.
57
57
  */
58
58
  tabIndex: number | undefined;
59
+ /**
60
+ * The root element where the popup should be rendered.
61
+ * Defaults to `false`.
62
+ */
63
+ shouldRenderToParent?: boolean;
59
64
  }
60
65
  interface BaseProps {
61
66
  /**
@@ -137,6 +142,11 @@ interface BaseProps {
137
142
  * `capture: true`.
138
143
  */
139
144
  shouldUseCaptureOnOutsideClick?: boolean;
145
+ /**
146
+ * The root element where the popup should be rendered.
147
+ * Defaults to `false`.
148
+ */
149
+ shouldRenderToParent?: boolean;
140
150
  }
141
151
  export interface PopupProps extends BaseProps {
142
152
  /**
@@ -151,11 +161,6 @@ export interface PopupProps extends BaseProps {
151
161
  * Defaults to `layers.layer()` from `@atlaskit/theme`.
152
162
  */
153
163
  zIndex?: number;
154
- /**
155
- * The root element where the popup should be rendered.
156
- * Defaults to `false`.
157
- */
158
- shouldRenderToParent?: boolean;
159
164
  }
160
165
  export interface PopperWrapperProps extends BaseProps {
161
166
  triggerRef: TriggerRef;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.9.3",
3
+ "version": "1.10.1",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,11 +36,11 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@atlaskit/ds-lib": "^2.2.0",
39
- "@atlaskit/platform-feature-flags": "^0.2.0",
39
+ "@atlaskit/layering": "^0.2.0",
40
40
  "@atlaskit/popper": "^5.5.0",
41
41
  "@atlaskit/portal": "^4.3.0",
42
- "@atlaskit/theme": "^12.5.0",
43
- "@atlaskit/tokens": "^1.18.0",
42
+ "@atlaskit/theme": "^12.6.0",
43
+ "@atlaskit/tokens": "^1.25.0",
44
44
  "@babel/runtime": "^7.0.0",
45
45
  "@emotion/react": "^11.7.1",
46
46
  "bind-event-listener": "^2.1.1",
@@ -53,12 +53,11 @@
53
53
  "devDependencies": {
54
54
  "@af/accessibility-testing": "*",
55
55
  "@af/visual-regression": "*",
56
- "@atlaskit/button": "^16.9.0",
56
+ "@atlaskit/button": "^16.10.0",
57
57
  "@atlaskit/icon": "^21.12.0",
58
58
  "@atlaskit/ssr": "*",
59
59
  "@atlaskit/visual-regression": "*",
60
60
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
61
- "@atlassian/feature-flags-test-utils": "*",
62
61
  "@testing-library/dom": "^8.17.1",
63
62
  "@testing-library/react": "^12.1.5",
64
63
  "ast-types": "^0.13.3",
@@ -95,10 +94,5 @@
95
94
  }
96
95
  },
97
96
  "homepage": "https://atlassian.design/components/popup/",
98
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
99
- "platform-feature-flags": {
100
- "platform.design-system-team.render-popup-in-parent_f73ij": {
101
- "type": "boolean"
102
- }
103
- }
97
+ "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
104
98
  }
package/report.api.md CHANGED
@@ -40,6 +40,7 @@ interface BaseProps {
40
40
  popupComponent?: ComponentType<PopupComponentProps>;
41
41
  rootBoundary?: 'document' | 'viewport';
42
42
  shouldFlip?: boolean;
43
+ shouldRenderToParent?: boolean;
43
44
  shouldUseCaptureOnOutsideClick?: boolean;
44
45
  testId?: string;
45
46
  }
@@ -64,13 +65,13 @@ export interface PopupComponentProps {
64
65
  children: ReactNode;
65
66
  id?: string;
66
67
  ref: Ref<HTMLDivElement>;
68
+ shouldRenderToParent?: boolean;
67
69
  style: CSSProperties;
68
70
  tabIndex: number | undefined;
69
71
  }
70
72
 
71
73
  // @public (undocumented)
72
74
  export interface PopupProps extends BaseProps {
73
- shouldRenderToParent?: boolean;
74
75
  trigger: (props: TriggerProps) => React_2.ReactNode;
75
76
  zIndex?: number;
76
77
  }
@@ -29,6 +29,7 @@ interface BaseProps {
29
29
  popupComponent?: ComponentType<PopupComponentProps>;
30
30
  rootBoundary?: 'document' | 'viewport';
31
31
  shouldFlip?: boolean;
32
+ shouldRenderToParent?: boolean;
32
33
  shouldUseCaptureOnOutsideClick?: boolean;
33
34
  testId?: string;
34
35
  }
@@ -53,13 +54,13 @@ export interface PopupComponentProps {
53
54
  children: ReactNode;
54
55
  id?: string;
55
56
  ref: Ref<HTMLDivElement>;
57
+ shouldRenderToParent?: boolean;
56
58
  style: CSSProperties;
57
59
  tabIndex: number | undefined;
58
60
  }
59
61
 
60
62
  // @public (undocumented)
61
63
  export interface PopupProps extends BaseProps {
62
- shouldRenderToParent?: boolean;
63
64
  trigger: (props: TriggerProps) => React_2.ReactNode;
64
65
  zIndex?: number;
65
66
  }