@atlaskit/popup 1.6.4 → 1.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/popup.js +27 -19
  3. package/dist/cjs/version.json +1 -1
  4. package/dist/es2019/popup.js +24 -19
  5. package/dist/es2019/version.json +1 -1
  6. package/dist/esm/popup.js +27 -19
  7. package/dist/esm/version.json +1 -1
  8. package/dist/types/types.d.ts +5 -0
  9. package/dist/types-ts4.5/types.d.ts +5 -0
  10. package/package.json +9 -2
  11. package/report.api.md +1 -0
  12. package/tmp/api-report-tmp.d.ts +1 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/popup
2
2
 
3
+ ## 1.7.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`eca89633804`](https://bitbucket.org/atlassian/atlassian-frontend/commits/eca89633804) - Add a new prop `shouldRenderToParent` to allow render popup into a DOM node within the parent DOM hierarchy instead of React portal.
8
+
3
9
  ## 1.6.4
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/popup.js CHANGED
@@ -8,6 +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
12
  var _popper = require("@atlaskit/popper");
12
13
  var _portal = _interopRequireDefault(require("@atlaskit/portal"));
13
14
  var _constants = require("@atlaskit/theme/constants");
@@ -38,11 +39,32 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
38
39
  _ref$zIndex = _ref.zIndex,
39
40
  zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
40
41
  _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
41
- shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
42
+ shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
43
+ _ref$shouldRenderToPa = _ref.shouldRenderToParent,
44
+ shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
42
45
  var _useState = (0, _react.useState)(null),
43
46
  _useState2 = (0, _slicedToArray2.default)(_useState, 2),
44
47
  triggerRef = _useState2[0],
45
48
  setTriggerRef = _useState2[1];
49
+ var renderPopperWrapper = function renderPopperWrapper() {
50
+ return (0, _react2.jsx)(_popperWrapper.default, {
51
+ content: content,
52
+ isOpen: isOpen,
53
+ placement: placement,
54
+ fallbackPlacements: fallbackPlacements,
55
+ boundary: boundary,
56
+ rootBoundary: rootBoundary,
57
+ shouldFlip: shouldFlip,
58
+ offset: offset,
59
+ popupComponent: PopupContainer,
60
+ id: id,
61
+ testId: testId,
62
+ onClose: onClose,
63
+ autoFocus: autoFocus,
64
+ shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
65
+ triggerRef: triggerRef
66
+ });
67
+ };
46
68
  return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
47
69
  var _ref3 = _ref2.ref;
48
70
  return trigger({
@@ -60,25 +82,11 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
60
82
  'aria-expanded': isOpen,
61
83
  'aria-haspopup': true
62
84
  });
63
- }), isOpen && (0, _react2.jsx)(_portal.default, {
85
+ }), isOpen && ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : (0, _react2.jsx)(_portal.default, {
86
+ zIndex: zIndex
87
+ }, renderPopperWrapper()) : (0, _react2.jsx)(_portal.default, {
64
88
  zIndex: zIndex
65
- }, (0, _react2.jsx)(_popperWrapper.default, {
66
- content: content,
67
- isOpen: isOpen,
68
- placement: placement,
69
- fallbackPlacements: fallbackPlacements,
70
- boundary: boundary,
71
- rootBoundary: rootBoundary,
72
- shouldFlip: shouldFlip,
73
- offset: offset,
74
- popupComponent: PopupContainer,
75
- id: id,
76
- testId: testId,
77
- onClose: onClose,
78
- autoFocus: autoFocus,
79
- shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
80
- triggerRef: triggerRef
81
- })));
89
+ }, renderPopperWrapper())));
82
90
  });
83
91
  exports.Popup = Popup;
84
92
  var _default = Popup;
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.6.4",
3
+ "version": "1.7.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/popup.js CHANGED
@@ -2,6 +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
6
  import { Manager, Reference } from '@atlaskit/popper';
6
7
  import Portal from '@atlaskit/portal';
7
8
  import { layers } from '@atlaskit/theme/constants';
@@ -23,9 +24,27 @@ export const Popup = /*#__PURE__*/memo(({
23
24
  popupComponent: PopupContainer,
24
25
  autoFocus = true,
25
26
  zIndex = defaultLayer,
26
- shouldUseCaptureOnOutsideClick = false
27
+ shouldUseCaptureOnOutsideClick = false,
28
+ shouldRenderToParent = false
27
29
  }) => {
28
30
  const [triggerRef, setTriggerRef] = useState(null);
31
+ const renderPopperWrapper = () => jsx(PopperWrapper, {
32
+ content: content,
33
+ isOpen: isOpen,
34
+ placement: placement,
35
+ fallbackPlacements: fallbackPlacements,
36
+ boundary: boundary,
37
+ rootBoundary: rootBoundary,
38
+ shouldFlip: shouldFlip,
39
+ offset: offset,
40
+ popupComponent: PopupContainer,
41
+ id: id,
42
+ testId: testId,
43
+ onClose: onClose,
44
+ autoFocus: autoFocus,
45
+ shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
46
+ triggerRef: triggerRef
47
+ });
29
48
  return jsx(Manager, null, jsx(Reference, null, ({
30
49
  ref
31
50
  }) => {
@@ -44,24 +63,10 @@ export const Popup = /*#__PURE__*/memo(({
44
63
  'aria-expanded': isOpen,
45
64
  'aria-haspopup': true
46
65
  });
47
- }), isOpen && jsx(Portal, {
66
+ }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : jsx(Portal, {
48
67
  zIndex: zIndex
49
- }, jsx(PopperWrapper, {
50
- content: content,
51
- isOpen: isOpen,
52
- placement: placement,
53
- fallbackPlacements: fallbackPlacements,
54
- boundary: boundary,
55
- rootBoundary: rootBoundary,
56
- shouldFlip: shouldFlip,
57
- offset: offset,
58
- popupComponent: PopupContainer,
59
- id: id,
60
- testId: testId,
61
- onClose: onClose,
62
- autoFocus: autoFocus,
63
- shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
64
- triggerRef: triggerRef
65
- })));
68
+ }, renderPopperWrapper()) : jsx(Portal, {
69
+ zIndex: zIndex
70
+ }, renderPopperWrapper())));
66
71
  });
67
72
  export default Popup;
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.6.4",
3
+ "version": "1.7.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/popup.js CHANGED
@@ -3,6 +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
7
  import { Manager, Reference } from '@atlaskit/popper';
7
8
  import Portal from '@atlaskit/portal';
8
9
  import { layers } from '@atlaskit/theme/constants';
@@ -30,11 +31,32 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
30
31
  _ref$zIndex = _ref.zIndex,
31
32
  zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
32
33
  _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
33
- shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture;
34
+ shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
35
+ _ref$shouldRenderToPa = _ref.shouldRenderToParent,
36
+ shouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa;
34
37
  var _useState = useState(null),
35
38
  _useState2 = _slicedToArray(_useState, 2),
36
39
  triggerRef = _useState2[0],
37
40
  setTriggerRef = _useState2[1];
41
+ var renderPopperWrapper = function renderPopperWrapper() {
42
+ return jsx(PopperWrapper, {
43
+ content: content,
44
+ isOpen: isOpen,
45
+ placement: placement,
46
+ fallbackPlacements: fallbackPlacements,
47
+ boundary: boundary,
48
+ rootBoundary: rootBoundary,
49
+ shouldFlip: shouldFlip,
50
+ offset: offset,
51
+ popupComponent: PopupContainer,
52
+ id: id,
53
+ testId: testId,
54
+ onClose: onClose,
55
+ autoFocus: autoFocus,
56
+ shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
57
+ triggerRef: triggerRef
58
+ });
59
+ };
38
60
  return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
39
61
  var _ref3 = _ref2.ref;
40
62
  return trigger({
@@ -52,24 +74,10 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
52
74
  'aria-expanded': isOpen,
53
75
  'aria-haspopup': true
54
76
  });
55
- }), isOpen && jsx(Portal, {
77
+ }), isOpen && (getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent ? renderPopperWrapper() : jsx(Portal, {
78
+ zIndex: zIndex
79
+ }, renderPopperWrapper()) : jsx(Portal, {
56
80
  zIndex: zIndex
57
- }, jsx(PopperWrapper, {
58
- content: content,
59
- isOpen: isOpen,
60
- placement: placement,
61
- fallbackPlacements: fallbackPlacements,
62
- boundary: boundary,
63
- rootBoundary: rootBoundary,
64
- shouldFlip: shouldFlip,
65
- offset: offset,
66
- popupComponent: PopupContainer,
67
- id: id,
68
- testId: testId,
69
- onClose: onClose,
70
- autoFocus: autoFocus,
71
- shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
72
- triggerRef: triggerRef
73
- })));
81
+ }, renderPopperWrapper())));
74
82
  });
75
83
  export default Popup;
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.6.4",
3
+ "version": "1.7.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/types/types.d.ts CHANGED
@@ -147,6 +147,11 @@ export interface PopupProps extends BaseProps {
147
147
  * Defaults to `layers.layer()` from `@atlaskit/theme`.
148
148
  */
149
149
  zIndex?: number;
150
+ /**
151
+ * The root element where the popup should be rendered.
152
+ * Defaults to `false`.
153
+ */
154
+ shouldRenderToParent?: boolean;
150
155
  }
151
156
  export interface PopperWrapperProps extends BaseProps {
152
157
  triggerRef: TriggerRef;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -150,6 +150,11 @@ export interface PopupProps extends BaseProps {
150
150
  * Defaults to `layers.layer()` from `@atlaskit/theme`.
151
151
  */
152
152
  zIndex?: number;
153
+ /**
154
+ * The root element where the popup should be rendered.
155
+ * Defaults to `false`.
156
+ */
157
+ shouldRenderToParent?: boolean;
153
158
  }
154
159
  export interface PopperWrapperProps extends BaseProps {
155
160
  triggerRef: TriggerRef;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/popup",
3
- "version": "1.6.4",
3
+ "version": "1.7.0",
4
4
  "description": "A popup displays brief content in an overlay.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -36,6 +36,7 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@atlaskit/ds-lib": "^2.2.0",
39
+ "@atlaskit/platform-feature-flags": "^0.2.0",
39
40
  "@atlaskit/popper": "^5.5.0",
40
41
  "@atlaskit/portal": "^4.3.0",
41
42
  "@atlaskit/theme": "^12.5.0",
@@ -62,6 +63,7 @@
62
63
  "@atlaskit/toggle": "^12.6.0",
63
64
  "@atlaskit/visual-regression": "*",
64
65
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
66
+ "@atlassian/feature-flags-test-utils": "*",
65
67
  "@testing-library/dom": "^8.17.1",
66
68
  "@testing-library/react": "^12.1.5",
67
69
  "ast-types": "^0.13.3",
@@ -99,5 +101,10 @@
99
101
  }
100
102
  },
101
103
  "homepage": "https://atlassian.design/components/popup/",
102
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
104
+ "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
105
+ "platform-feature-flags": {
106
+ "platform.design-system-team.render-popup-in-parent_f73ij": {
107
+ "type": "boolean"
108
+ }
109
+ }
103
110
  }
package/report.api.md CHANGED
@@ -70,6 +70,7 @@ export interface PopupComponentProps {
70
70
 
71
71
  // @public (undocumented)
72
72
  export interface PopupProps extends BaseProps {
73
+ shouldRenderToParent?: boolean;
73
74
  trigger: (props: TriggerProps) => React_2.ReactNode;
74
75
  zIndex?: number;
75
76
  }
package/tmp/api-report-tmp.d.ts CHANGED
@@ -59,6 +59,7 @@ export interface PopupComponentProps {
59
59
 
60
60
  // @public (undocumented)
61
61
  export interface PopupProps extends BaseProps {
62
+ shouldRenderToParent?: boolean;
62
63
  trigger: (props: TriggerProps) => React_2.ReactNode;
63
64
  zIndex?: number;
64
65
  }