@atlaskit/portal 5.4.1 → 5.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +13 -0
- package/constants/package.json +17 -0
- package/dist/cjs/entry-points/constants.js +18 -0
- package/dist/cjs/entry-points/portal.js +13 -0
- package/dist/cjs/internal/components/internal-portal-new.js +8 -6
- package/dist/cjs/internal/components/internal-portal.js +7 -5
- package/dist/cjs/internal/utils/append-portal-container-if-not-appended.js +27 -0
- package/dist/cjs/internal/utils/create-atlaskit-portal.js +20 -0
- package/dist/cjs/internal/utils/create-container.js +13 -0
- package/dist/cjs/internal/utils/create-portal-parent.js +27 -0
- package/dist/cjs/internal/utils/get-body.js +13 -0
- package/dist/cjs/internal/utils/remove-portal-container.js +28 -0
- package/dist/cjs/internal/utils/remove-portal-parent.js +18 -0
- package/dist/es2019/entry-points/constants.js +1 -0
- package/dist/es2019/entry-points/portal.js +1 -0
- package/dist/es2019/internal/components/internal-portal-new.js +3 -1
- package/dist/es2019/internal/components/internal-portal.js +3 -1
- package/dist/es2019/internal/utils/append-portal-container-if-not-appended.js +21 -0
- package/dist/es2019/internal/utils/create-atlaskit-portal.js +14 -0
- package/dist/es2019/internal/utils/create-container.js +7 -0
- package/dist/es2019/internal/utils/create-portal-parent.js +21 -0
- package/dist/es2019/internal/utils/get-body.js +7 -0
- package/dist/es2019/internal/utils/remove-portal-container.js +22 -0
- package/dist/es2019/internal/utils/remove-portal-parent.js +12 -0
- package/dist/esm/entry-points/constants.js +1 -0
- package/dist/esm/entry-points/portal.js +1 -0
- package/dist/esm/internal/components/internal-portal-new.js +3 -1
- package/dist/esm/internal/components/internal-portal.js +3 -1
- package/dist/esm/internal/utils/append-portal-container-if-not-appended.js +21 -0
- package/dist/esm/internal/utils/create-atlaskit-portal.js +14 -0
- package/dist/esm/internal/utils/create-container.js +7 -0
- package/dist/esm/internal/utils/create-portal-parent.js +21 -0
- package/dist/esm/internal/utils/get-body.js +7 -0
- package/dist/esm/internal/utils/remove-portal-container.js +22 -0
- package/dist/esm/internal/utils/remove-portal-parent.js +12 -0
- package/dist/types/entry-points/constants.d.ts +1 -0
- package/dist/types/entry-points/portal.d.ts +1 -0
- package/dist/types/internal/utils/append-portal-container-if-not-appended.d.ts +1 -0
- package/dist/types/internal/utils/create-atlaskit-portal.d.ts +1 -0
- package/dist/types/internal/utils/create-container.d.ts +1 -0
- package/dist/types/internal/utils/create-portal-parent.d.ts +1 -0
- package/dist/types/internal/utils/get-body.d.ts +5 -0
- package/dist/types/internal/utils/remove-portal-container.d.ts +1 -0
- package/dist/types/internal/utils/remove-portal-parent.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/constants.d.ts +1 -0
- package/dist/types-ts4.5/entry-points/portal.d.ts +1 -0
- package/dist/types-ts4.5/internal/utils/append-portal-container-if-not-appended.d.ts +1 -0
- package/dist/types-ts4.5/internal/utils/create-atlaskit-portal.d.ts +1 -0
- package/dist/types-ts4.5/internal/utils/create-container.d.ts +1 -0
- package/dist/types-ts4.5/internal/utils/create-portal-parent.d.ts +1 -0
- package/dist/types-ts4.5/internal/utils/get-body.d.ts +5 -0
- package/dist/types-ts4.5/internal/utils/remove-portal-container.d.ts +1 -0
- package/dist/types-ts4.5/internal/utils/remove-portal-parent.d.ts +1 -0
- package/package.json +14 -14
- package/portal/package.json +17 -0
- package/dist/cjs/internal/utils/portal-dom-utils.js +0 -104
- package/dist/es2019/internal/utils/portal-dom-utils.js +0 -99
- package/dist/esm/internal/utils/portal-dom-utils.js +0 -99
- package/dist/types/internal/utils/portal-dom-utils.d.ts +0 -20
- package/dist/types-ts4.5/internal/utils/portal-dom-utils.d.ts +0 -20
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @atlaskit/portal
|
|
2
2
|
|
|
3
|
+
## 5.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`31b1ede297136`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/31b1ede297136) -
|
|
8
|
+
Autofix: add explicit package exports (barrel removal)
|
|
9
|
+
|
|
10
|
+
## 5.4.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Updated dependencies
|
|
15
|
+
|
|
3
16
|
## 5.4.1
|
|
4
17
|
|
|
5
18
|
### Patch Changes
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/portal/constants",
|
|
3
|
+
"main": "../dist/cjs/entry-points/constants.js",
|
|
4
|
+
"module": "../dist/esm/entry-points/constants.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/entry-points/constants.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"**/*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/entry-points/constants.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/entry-points/constants.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "PORTAL_MOUNT_EVENT", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _constants.PORTAL_MOUNT_EVENT;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "PORTAL_UNMOUNT_EVENT", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _constants.PORTAL_UNMOUNT_EVENT;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
var _constants = require("../constants");
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "default", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function get() {
|
|
10
|
+
return _portal.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _portal = _interopRequireDefault(require("../portal"));
|
|
@@ -12,7 +12,9 @@ var _reactDom = require("react-dom");
|
|
|
12
12
|
var _appProvider = require("@atlaskit/app-provider");
|
|
13
13
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
14
|
var _useIsomorphicLayoutEffect = require("../hooks/use-isomorphic-layout-effect");
|
|
15
|
-
var
|
|
15
|
+
var _createAtlaskitPortal = require("../utils/create-atlaskit-portal");
|
|
16
|
+
var _createPortalParent = require("../utils/create-portal-parent");
|
|
17
|
+
var _removePortalParent = require("../utils/remove-portal-parent");
|
|
16
18
|
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); }
|
|
17
19
|
function InternalPortalNew(props) {
|
|
18
20
|
var zIndex = props.zIndex,
|
|
@@ -26,9 +28,9 @@ function InternalPortalNew(props) {
|
|
|
26
28
|
(0, _useIsomorphicLayoutEffect.useIsomorphicLayoutEffect)(function () {
|
|
27
29
|
if ((0, _platformFeatureFlags.fg)('import_into_jsm_in_template_gallery_killswitch')) {
|
|
28
30
|
if (!isClosed) {
|
|
29
|
-
var tempPortalContainer = (0,
|
|
31
|
+
var tempPortalContainer = (0, _createAtlaskitPortal.createAtlaskitPortal)(zIndex);
|
|
30
32
|
setAtlaskitPortal(tempPortalContainer);
|
|
31
|
-
var portalParent = (0,
|
|
33
|
+
var portalParent = (0, _createPortalParent.createPortalParent)();
|
|
32
34
|
if (!tempPortalContainer || !portalParent) {
|
|
33
35
|
return;
|
|
34
36
|
}
|
|
@@ -36,15 +38,15 @@ function InternalPortalNew(props) {
|
|
|
36
38
|
return function () {
|
|
37
39
|
if (portalParent) {
|
|
38
40
|
portalParent.removeChild(tempPortalContainer);
|
|
39
|
-
!portalParent.hasChildNodes() && (0,
|
|
41
|
+
!portalParent.hasChildNodes() && (0, _removePortalParent.removePortalParent)(portalParent);
|
|
40
42
|
}
|
|
41
43
|
setAtlaskitPortal(null);
|
|
42
44
|
};
|
|
43
45
|
}
|
|
44
46
|
} else {
|
|
45
|
-
var _tempPortalContainer = (0,
|
|
47
|
+
var _tempPortalContainer = (0, _createAtlaskitPortal.createAtlaskitPortal)(zIndex);
|
|
46
48
|
setAtlaskitPortal(_tempPortalContainer);
|
|
47
|
-
var _portalParent = (0,
|
|
49
|
+
var _portalParent = (0, _createPortalParent.createPortalParent)();
|
|
48
50
|
if (!_tempPortalContainer || !_portalParent) {
|
|
49
51
|
return;
|
|
50
52
|
}
|
|
@@ -9,7 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
9
9
|
var _reactDom = require("react-dom");
|
|
10
10
|
var _appProvider = require("@atlaskit/app-provider");
|
|
11
11
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
12
|
-
var
|
|
12
|
+
var _appendPortalContainerIfNotAppended = require("../utils/append-portal-container-if-not-appended");
|
|
13
|
+
var _createContainer = require("../utils/create-container");
|
|
14
|
+
var _removePortalContainer = require("../utils/remove-portal-container");
|
|
13
15
|
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); }
|
|
14
16
|
function InternalPortal(props) {
|
|
15
17
|
var zIndex = props.zIndex,
|
|
@@ -17,7 +19,7 @@ function InternalPortal(props) {
|
|
|
17
19
|
_props$isClosed = props.isClosed,
|
|
18
20
|
isClosed = _props$isClosed === void 0 ? false : _props$isClosed;
|
|
19
21
|
var container = (0, _react.useMemo)(function () {
|
|
20
|
-
return (0,
|
|
22
|
+
return (0, _createContainer.createContainer)(zIndex);
|
|
21
23
|
}, [zIndex]);
|
|
22
24
|
var colorMode = (0, _appProvider.useColorMode)();
|
|
23
25
|
|
|
@@ -25,17 +27,17 @@ function InternalPortal(props) {
|
|
|
25
27
|
// the portal will be added to the DOM before the children render.
|
|
26
28
|
// For any further changes, ensure that the container does not have a
|
|
27
29
|
// parent besides the portal parent.
|
|
28
|
-
(0,
|
|
30
|
+
(0, _appendPortalContainerIfNotAppended.appendPortalContainerIfNotAppended)(container);
|
|
29
31
|
(0, _react.useEffect)(function () {
|
|
30
32
|
if ((0, _platformFeatureFlags.fg)('import_into_jsm_in_template_gallery_killswitch')) {
|
|
31
33
|
if (isClosed) {
|
|
32
|
-
(0,
|
|
34
|
+
(0, _removePortalContainer.removePortalContainer)(container);
|
|
33
35
|
}
|
|
34
36
|
}
|
|
35
37
|
}, [isClosed, container]);
|
|
36
38
|
(0, _react.useEffect)(function () {
|
|
37
39
|
return function () {
|
|
38
|
-
(0,
|
|
40
|
+
(0, _removePortalContainer.removePortalContainer)(container);
|
|
39
41
|
};
|
|
40
42
|
}, [container]);
|
|
41
43
|
return /*#__PURE__*/(0, _reactDom.createPortal)(colorMode ? /*#__PURE__*/_react.default.createElement(_appProvider.ThemeProvider, {
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.appendPortalContainerIfNotAppended = void 0;
|
|
7
|
+
var _constants = require("../constants");
|
|
8
|
+
var _getBody2 = require("./get-body");
|
|
9
|
+
var getPortalParent = function getPortalParent() {
|
|
10
|
+
var parentElement = document.querySelector(_constants.portalParentSelector);
|
|
11
|
+
if (!parentElement) {
|
|
12
|
+
var _getBody;
|
|
13
|
+
var parent = document.createElement('div');
|
|
14
|
+
parent.className = _constants.portalParentClassName;
|
|
15
|
+
// we are setting display to flex because we want each portal to create a new stacking context
|
|
16
|
+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
17
|
+
parent.style.display = 'flex';
|
|
18
|
+
(_getBody = (0, _getBody2.getBody)()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
19
|
+
return parent;
|
|
20
|
+
}
|
|
21
|
+
return parentElement;
|
|
22
|
+
};
|
|
23
|
+
var appendPortalContainerIfNotAppended = exports.appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
|
|
24
|
+
if (!container.parentElement) {
|
|
25
|
+
getPortalParent().appendChild(container);
|
|
26
|
+
}
|
|
27
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createAtlaskitPortal = void 0;
|
|
7
|
+
var _constants = require("../constants");
|
|
8
|
+
var isDocumentDefined = function isDocumentDefined() {
|
|
9
|
+
return document !== undefined;
|
|
10
|
+
};
|
|
11
|
+
var createAtlaskitPortal = exports.createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
|
|
12
|
+
//atlaskit-portal div
|
|
13
|
+
if (isDocumentDefined()) {
|
|
14
|
+
var atlaskitportal = document.createElement('div');
|
|
15
|
+
atlaskitportal.className = _constants.portalClassName;
|
|
16
|
+
atlaskitportal.style.zIndex = "".concat(zIndex);
|
|
17
|
+
return atlaskitportal;
|
|
18
|
+
}
|
|
19
|
+
return;
|
|
20
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createContainer = void 0;
|
|
7
|
+
var _constants = require("../constants");
|
|
8
|
+
var createContainer = exports.createContainer = function createContainer(zIndex) {
|
|
9
|
+
var container = document.createElement('div');
|
|
10
|
+
container.className = _constants.portalClassName;
|
|
11
|
+
container.style.zIndex = "".concat(zIndex);
|
|
12
|
+
return container;
|
|
13
|
+
};
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createPortalParent = void 0;
|
|
7
|
+
var _constants = require("../constants");
|
|
8
|
+
var _getBody2 = require("./get-body");
|
|
9
|
+
var isDocumentDefined = function isDocumentDefined() {
|
|
10
|
+
return document !== undefined;
|
|
11
|
+
};
|
|
12
|
+
var createPortalParent = exports.createPortalParent = function createPortalParent() {
|
|
13
|
+
//atlaskit-portal-container div
|
|
14
|
+
if (isDocumentDefined()) {
|
|
15
|
+
var parentElement = document.querySelector(_constants.portalParentSelector);
|
|
16
|
+
if (!parentElement) {
|
|
17
|
+
var _getBody;
|
|
18
|
+
var parent = document.createElement('div');
|
|
19
|
+
parent.className = _constants.portalParentClassName;
|
|
20
|
+
parent.style.display = 'flex';
|
|
21
|
+
(_getBody = (0, _getBody2.getBody)()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
22
|
+
return parent;
|
|
23
|
+
}
|
|
24
|
+
return parentElement;
|
|
25
|
+
}
|
|
26
|
+
return;
|
|
27
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.getBody = void 0;
|
|
7
|
+
/**
|
|
8
|
+
* Returns document body element
|
|
9
|
+
* @return {number} - The document body element
|
|
10
|
+
*/
|
|
11
|
+
var getBody = exports.getBody = function getBody() {
|
|
12
|
+
return document.body;
|
|
13
|
+
};
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.removePortalContainer = void 0;
|
|
7
|
+
var _constants = require("../constants");
|
|
8
|
+
var _getBody2 = require("./get-body");
|
|
9
|
+
var getPortalParent = function getPortalParent() {
|
|
10
|
+
var parentElement = document.querySelector(_constants.portalParentSelector);
|
|
11
|
+
if (!parentElement) {
|
|
12
|
+
var _getBody;
|
|
13
|
+
var parent = document.createElement('div');
|
|
14
|
+
parent.className = _constants.portalParentClassName;
|
|
15
|
+
// we are setting display to flex because we want each portal to create a new stacking context
|
|
16
|
+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
17
|
+
parent.style.display = 'flex';
|
|
18
|
+
(_getBody = (0, _getBody2.getBody)()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
19
|
+
return parent;
|
|
20
|
+
}
|
|
21
|
+
return parentElement;
|
|
22
|
+
};
|
|
23
|
+
var removePortalContainer = exports.removePortalContainer = function removePortalContainer(container) {
|
|
24
|
+
var parent = getPortalParent();
|
|
25
|
+
if (parent.contains(container)) {
|
|
26
|
+
parent.removeChild(container);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.removePortalParent = void 0;
|
|
7
|
+
var _getBody2 = require("./get-body");
|
|
8
|
+
var isDocumentDefined = function isDocumentDefined() {
|
|
9
|
+
return document !== undefined;
|
|
10
|
+
};
|
|
11
|
+
var removePortalParent = exports.removePortalParent = function removePortalParent(parentElement) {
|
|
12
|
+
if (isDocumentDefined()) {
|
|
13
|
+
if (parentElement) {
|
|
14
|
+
var _getBody;
|
|
15
|
+
(_getBody = (0, _getBody2.getBody)()) === null || _getBody === void 0 || _getBody.removeChild(parentElement);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../portal';
|
|
@@ -3,7 +3,9 @@ import { createPortal } from 'react-dom';
|
|
|
3
3
|
import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
|
|
6
|
-
import { createAtlaskitPortal
|
|
6
|
+
import { createAtlaskitPortal } from '../utils/create-atlaskit-portal';
|
|
7
|
+
import { createPortalParent } from '../utils/create-portal-parent';
|
|
8
|
+
import { removePortalParent } from '../utils/remove-portal-parent';
|
|
7
9
|
export default function InternalPortalNew(props) {
|
|
8
10
|
const {
|
|
9
11
|
zIndex,
|
|
@@ -2,7 +2,9 @@ import React, { useEffect, useMemo } from 'react';
|
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
3
|
import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
-
import { appendPortalContainerIfNotAppended
|
|
5
|
+
import { appendPortalContainerIfNotAppended } from '../utils/append-portal-container-if-not-appended';
|
|
6
|
+
import { createContainer } from '../utils/create-container';
|
|
7
|
+
import { removePortalContainer } from '../utils/remove-portal-container';
|
|
6
8
|
export default function InternalPortal(props) {
|
|
7
9
|
const {
|
|
8
10
|
zIndex,
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
+
import { getBody } from './get-body';
|
|
3
|
+
const getPortalParent = () => {
|
|
4
|
+
const parentElement = document.querySelector(portalParentSelector);
|
|
5
|
+
if (!parentElement) {
|
|
6
|
+
var _getBody;
|
|
7
|
+
const parent = document.createElement('div');
|
|
8
|
+
parent.className = portalParentClassName;
|
|
9
|
+
// we are setting display to flex because we want each portal to create a new stacking context
|
|
10
|
+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
11
|
+
parent.style.display = 'flex';
|
|
12
|
+
(_getBody = getBody()) === null || _getBody === void 0 ? void 0 : _getBody.appendChild(parent);
|
|
13
|
+
return parent;
|
|
14
|
+
}
|
|
15
|
+
return parentElement;
|
|
16
|
+
};
|
|
17
|
+
export const appendPortalContainerIfNotAppended = container => {
|
|
18
|
+
if (!container.parentElement) {
|
|
19
|
+
getPortalParent().appendChild(container);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { portalClassName } from '../constants';
|
|
2
|
+
const isDocumentDefined = () => {
|
|
3
|
+
return document !== undefined;
|
|
4
|
+
};
|
|
5
|
+
export const createAtlaskitPortal = zIndex => {
|
|
6
|
+
//atlaskit-portal div
|
|
7
|
+
if (isDocumentDefined()) {
|
|
8
|
+
const atlaskitportal = document.createElement('div');
|
|
9
|
+
atlaskitportal.className = portalClassName;
|
|
10
|
+
atlaskitportal.style.zIndex = `${zIndex}`;
|
|
11
|
+
return atlaskitportal;
|
|
12
|
+
}
|
|
13
|
+
return;
|
|
14
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
+
import { getBody } from './get-body';
|
|
3
|
+
const isDocumentDefined = () => {
|
|
4
|
+
return document !== undefined;
|
|
5
|
+
};
|
|
6
|
+
export const createPortalParent = () => {
|
|
7
|
+
//atlaskit-portal-container div
|
|
8
|
+
if (isDocumentDefined()) {
|
|
9
|
+
const parentElement = document.querySelector(portalParentSelector);
|
|
10
|
+
if (!parentElement) {
|
|
11
|
+
var _getBody;
|
|
12
|
+
const parent = document.createElement('div');
|
|
13
|
+
parent.className = portalParentClassName;
|
|
14
|
+
parent.style.display = 'flex';
|
|
15
|
+
(_getBody = getBody()) === null || _getBody === void 0 ? void 0 : _getBody.appendChild(parent);
|
|
16
|
+
return parent;
|
|
17
|
+
}
|
|
18
|
+
return parentElement;
|
|
19
|
+
}
|
|
20
|
+
return;
|
|
21
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
+
import { getBody } from './get-body';
|
|
3
|
+
const getPortalParent = () => {
|
|
4
|
+
const parentElement = document.querySelector(portalParentSelector);
|
|
5
|
+
if (!parentElement) {
|
|
6
|
+
var _getBody;
|
|
7
|
+
const parent = document.createElement('div');
|
|
8
|
+
parent.className = portalParentClassName;
|
|
9
|
+
// we are setting display to flex because we want each portal to create a new stacking context
|
|
10
|
+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
11
|
+
parent.style.display = 'flex';
|
|
12
|
+
(_getBody = getBody()) === null || _getBody === void 0 ? void 0 : _getBody.appendChild(parent);
|
|
13
|
+
return parent;
|
|
14
|
+
}
|
|
15
|
+
return parentElement;
|
|
16
|
+
};
|
|
17
|
+
export const removePortalContainer = container => {
|
|
18
|
+
const parent = getPortalParent();
|
|
19
|
+
if (parent.contains(container)) {
|
|
20
|
+
parent.removeChild(container);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { getBody } from './get-body';
|
|
2
|
+
const isDocumentDefined = () => {
|
|
3
|
+
return document !== undefined;
|
|
4
|
+
};
|
|
5
|
+
export const removePortalParent = parentElement => {
|
|
6
|
+
if (isDocumentDefined()) {
|
|
7
|
+
if (parentElement) {
|
|
8
|
+
var _getBody;
|
|
9
|
+
(_getBody = getBody()) === null || _getBody === void 0 ? void 0 : _getBody.removeChild(parentElement);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../portal';
|
|
@@ -4,7 +4,9 @@ import { createPortal } from 'react-dom';
|
|
|
4
4
|
import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
|
|
5
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
6
|
import { useIsomorphicLayoutEffect } from '../hooks/use-isomorphic-layout-effect';
|
|
7
|
-
import { createAtlaskitPortal
|
|
7
|
+
import { createAtlaskitPortal } from '../utils/create-atlaskit-portal';
|
|
8
|
+
import { createPortalParent } from '../utils/create-portal-parent';
|
|
9
|
+
import { removePortalParent } from '../utils/remove-portal-parent';
|
|
8
10
|
export default function InternalPortalNew(props) {
|
|
9
11
|
var zIndex = props.zIndex,
|
|
10
12
|
children = props.children,
|
|
@@ -2,7 +2,9 @@ import React, { useEffect, useMemo } from 'react';
|
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
3
|
import { ThemeProvider, useColorMode } from '@atlaskit/app-provider';
|
|
4
4
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
-
import { appendPortalContainerIfNotAppended
|
|
5
|
+
import { appendPortalContainerIfNotAppended } from '../utils/append-portal-container-if-not-appended';
|
|
6
|
+
import { createContainer } from '../utils/create-container';
|
|
7
|
+
import { removePortalContainer } from '../utils/remove-portal-container';
|
|
6
8
|
export default function InternalPortal(props) {
|
|
7
9
|
var zIndex = props.zIndex,
|
|
8
10
|
children = props.children,
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
+
import { getBody } from './get-body';
|
|
3
|
+
var getPortalParent = function getPortalParent() {
|
|
4
|
+
var parentElement = document.querySelector(portalParentSelector);
|
|
5
|
+
if (!parentElement) {
|
|
6
|
+
var _getBody;
|
|
7
|
+
var parent = document.createElement('div');
|
|
8
|
+
parent.className = portalParentClassName;
|
|
9
|
+
// we are setting display to flex because we want each portal to create a new stacking context
|
|
10
|
+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
11
|
+
parent.style.display = 'flex';
|
|
12
|
+
(_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
13
|
+
return parent;
|
|
14
|
+
}
|
|
15
|
+
return parentElement;
|
|
16
|
+
};
|
|
17
|
+
export var appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
|
|
18
|
+
if (!container.parentElement) {
|
|
19
|
+
getPortalParent().appendChild(container);
|
|
20
|
+
}
|
|
21
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { portalClassName } from '../constants';
|
|
2
|
+
var isDocumentDefined = function isDocumentDefined() {
|
|
3
|
+
return document !== undefined;
|
|
4
|
+
};
|
|
5
|
+
export var createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
|
|
6
|
+
//atlaskit-portal div
|
|
7
|
+
if (isDocumentDefined()) {
|
|
8
|
+
var atlaskitportal = document.createElement('div');
|
|
9
|
+
atlaskitportal.className = portalClassName;
|
|
10
|
+
atlaskitportal.style.zIndex = "".concat(zIndex);
|
|
11
|
+
return atlaskitportal;
|
|
12
|
+
}
|
|
13
|
+
return;
|
|
14
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { portalClassName } from '../constants';
|
|
2
|
+
export var createContainer = function createContainer(zIndex) {
|
|
3
|
+
var container = document.createElement('div');
|
|
4
|
+
container.className = portalClassName;
|
|
5
|
+
container.style.zIndex = "".concat(zIndex);
|
|
6
|
+
return container;
|
|
7
|
+
};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
+
import { getBody } from './get-body';
|
|
3
|
+
var isDocumentDefined = function isDocumentDefined() {
|
|
4
|
+
return document !== undefined;
|
|
5
|
+
};
|
|
6
|
+
export var createPortalParent = function createPortalParent() {
|
|
7
|
+
//atlaskit-portal-container div
|
|
8
|
+
if (isDocumentDefined()) {
|
|
9
|
+
var parentElement = document.querySelector(portalParentSelector);
|
|
10
|
+
if (!parentElement) {
|
|
11
|
+
var _getBody;
|
|
12
|
+
var parent = document.createElement('div');
|
|
13
|
+
parent.className = portalParentClassName;
|
|
14
|
+
parent.style.display = 'flex';
|
|
15
|
+
(_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
16
|
+
return parent;
|
|
17
|
+
}
|
|
18
|
+
return parentElement;
|
|
19
|
+
}
|
|
20
|
+
return;
|
|
21
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
+
import { getBody } from './get-body';
|
|
3
|
+
var getPortalParent = function getPortalParent() {
|
|
4
|
+
var parentElement = document.querySelector(portalParentSelector);
|
|
5
|
+
if (!parentElement) {
|
|
6
|
+
var _getBody;
|
|
7
|
+
var parent = document.createElement('div');
|
|
8
|
+
parent.className = portalParentClassName;
|
|
9
|
+
// we are setting display to flex because we want each portal to create a new stacking context
|
|
10
|
+
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
11
|
+
parent.style.display = 'flex';
|
|
12
|
+
(_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
13
|
+
return parent;
|
|
14
|
+
}
|
|
15
|
+
return parentElement;
|
|
16
|
+
};
|
|
17
|
+
export var removePortalContainer = function removePortalContainer(container) {
|
|
18
|
+
var parent = getPortalParent();
|
|
19
|
+
if (parent.contains(container)) {
|
|
20
|
+
parent.removeChild(container);
|
|
21
|
+
}
|
|
22
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { getBody } from './get-body';
|
|
2
|
+
var isDocumentDefined = function isDocumentDefined() {
|
|
3
|
+
return document !== undefined;
|
|
4
|
+
};
|
|
5
|
+
export var removePortalParent = function removePortalParent(parentElement) {
|
|
6
|
+
if (isDocumentDefined()) {
|
|
7
|
+
if (parentElement) {
|
|
8
|
+
var _getBody;
|
|
9
|
+
(_getBody = getBody()) === null || _getBody === void 0 || _getBody.removeChild(parentElement);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../portal';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const appendPortalContainerIfNotAppended: (container: HTMLDivElement) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const createAtlaskitPortal: (zIndex: number | string) => HTMLDivElement | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const createContainer: (zIndex: number | string) => HTMLDivElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const createPortalParent: () => Element | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const removePortalContainer: (container: HTMLDivElement) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const removePortalParent: (parentElement: Element) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../constants';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '../portal';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const appendPortalContainerIfNotAppended: (container: HTMLDivElement) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const createAtlaskitPortal: (zIndex: number | string) => HTMLDivElement | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const createContainer: (zIndex: number | string) => HTMLDivElement;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const createPortalParent: () => Element | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const removePortalContainer: (container: HTMLDivElement) => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const removePortalParent: (parentElement: Element) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/portal",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.5.0",
|
|
4
4
|
"description": "A wrapper for rendering components in React portals.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -39,9 +39,9 @@
|
|
|
39
39
|
}
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@atlaskit/app-provider": "^4.
|
|
42
|
+
"@atlaskit/app-provider": "^4.3.0",
|
|
43
43
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
44
|
-
"@atlaskit/theme": "^
|
|
44
|
+
"@atlaskit/theme": "^23.2.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
@@ -52,20 +52,20 @@
|
|
|
52
52
|
"@af/accessibility-testing": "workspace:^",
|
|
53
53
|
"@af/integration-testing": "workspace:^",
|
|
54
54
|
"@af/visual-regression": "workspace:^",
|
|
55
|
-
"@atlaskit/button": "^23.
|
|
55
|
+
"@atlaskit/button": "^23.11.0",
|
|
56
56
|
"@atlaskit/code": "^17.4.0",
|
|
57
57
|
"@atlaskit/css": "^0.19.0",
|
|
58
|
-
"@atlaskit/docs": "^11.
|
|
59
|
-
"@atlaskit/flag": "^17.
|
|
60
|
-
"@atlaskit/icon": "^34.
|
|
61
|
-
"@atlaskit/inline-dialog": "^18.
|
|
62
|
-
"@atlaskit/link": "^3.
|
|
63
|
-
"@atlaskit/modal-dialog": "^14.
|
|
64
|
-
"@atlaskit/onboarding": "^14.
|
|
65
|
-
"@atlaskit/primitives": "^
|
|
58
|
+
"@atlaskit/docs": "^11.8.0",
|
|
59
|
+
"@atlaskit/flag": "^17.11.0",
|
|
60
|
+
"@atlaskit/icon": "^34.3.0",
|
|
61
|
+
"@atlaskit/inline-dialog": "^18.1.0",
|
|
62
|
+
"@atlaskit/link": "^3.4.0",
|
|
63
|
+
"@atlaskit/modal-dialog": "^14.18.0",
|
|
64
|
+
"@atlaskit/onboarding": "^14.6.0",
|
|
65
|
+
"@atlaskit/primitives": "^19.0.0",
|
|
66
66
|
"@atlaskit/section-message": "^8.12.0",
|
|
67
|
-
"@atlaskit/tokens": "^
|
|
68
|
-
"@atlaskit/tooltip": "^21.
|
|
67
|
+
"@atlaskit/tokens": "^13.0.0",
|
|
68
|
+
"@atlaskit/tooltip": "^21.2.0",
|
|
69
69
|
"@atlassian/feature-flags-test-utils": "^1.0.0",
|
|
70
70
|
"@atlassian/react-compiler-gating": "workspace:^",
|
|
71
71
|
"@atlassian/ssr-tests": "workspace:^",
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@atlaskit/portal/portal",
|
|
3
|
+
"main": "../dist/cjs/entry-points/portal.js",
|
|
4
|
+
"module": "../dist/esm/entry-points/portal.js",
|
|
5
|
+
"module:es2019": "../dist/es2019/entry-points/portal.js",
|
|
6
|
+
"sideEffects": [
|
|
7
|
+
"**/*.compiled.css"
|
|
8
|
+
],
|
|
9
|
+
"types": "../dist/types/entry-points/portal.d.ts",
|
|
10
|
+
"typesVersions": {
|
|
11
|
+
">=4.5 <5.9": {
|
|
12
|
+
"*": [
|
|
13
|
+
"../dist/types-ts4.5/entry-points/portal.d.ts"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
}
|
|
@@ -1,104 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.removePortalParent = exports.removePortalContainer = exports.createPortalParent = exports.createContainer = exports.createAtlaskitPortal = exports.appendPortalContainerIfNotAppended = void 0;
|
|
7
|
-
var _constants = require("../constants");
|
|
8
|
-
/**
|
|
9
|
-
* Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
|
|
10
|
-
* it is not be attached to any DOM node at this stage.
|
|
11
|
-
* @param {number | string} zIndex - the z-index value of the newly created portal container element
|
|
12
|
-
* @return {number} - The newly created container element
|
|
13
|
-
*/
|
|
14
|
-
var createContainer = exports.createContainer = function createContainer(zIndex) {
|
|
15
|
-
var container = document.createElement('div');
|
|
16
|
-
container.className = _constants.portalClassName;
|
|
17
|
-
container.style.zIndex = "".concat(zIndex);
|
|
18
|
-
return container;
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* Returns document body element
|
|
23
|
-
* @return {number} - The document body element
|
|
24
|
-
*/
|
|
25
|
-
var getBody = function getBody() {
|
|
26
|
-
return document.body;
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
/**
|
|
30
|
-
* Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'
|
|
31
|
-
* @return {Element} - The portal parent container div element
|
|
32
|
-
*/
|
|
33
|
-
var getPortalParent = function getPortalParent() {
|
|
34
|
-
var parentElement = document.querySelector(_constants.portalParentSelector);
|
|
35
|
-
if (!parentElement) {
|
|
36
|
-
var _getBody;
|
|
37
|
-
var parent = document.createElement('div');
|
|
38
|
-
parent.className = _constants.portalParentClassName;
|
|
39
|
-
// we are setting display to flex because we want each portal to create a new stacking context
|
|
40
|
-
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
41
|
-
parent.style.display = 'flex';
|
|
42
|
-
(_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
43
|
-
return parent;
|
|
44
|
-
}
|
|
45
|
-
return parentElement;
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Removes portal container from portal parent container
|
|
50
|
-
* @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
|
|
51
|
-
*/
|
|
52
|
-
var removePortalContainer = exports.removePortalContainer = function removePortalContainer(container) {
|
|
53
|
-
var parent = getPortalParent();
|
|
54
|
-
if (parent.contains(container)) {
|
|
55
|
-
parent.removeChild(container);
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
|
|
59
|
-
/**
|
|
60
|
-
* Appends portal container to portal parent container if it hasn't already been done
|
|
61
|
-
* @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
|
|
62
|
-
*/
|
|
63
|
-
var appendPortalContainerIfNotAppended = exports.appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
|
|
64
|
-
if (!container.parentElement) {
|
|
65
|
-
getPortalParent().appendChild(container);
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
var isDocumentDefined = function isDocumentDefined() {
|
|
69
|
-
return document !== undefined;
|
|
70
|
-
};
|
|
71
|
-
var createAtlaskitPortal = exports.createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
|
|
72
|
-
//atlaskit-portal div
|
|
73
|
-
if (isDocumentDefined()) {
|
|
74
|
-
var atlaskitportal = document.createElement('div');
|
|
75
|
-
atlaskitportal.className = _constants.portalClassName;
|
|
76
|
-
atlaskitportal.style.zIndex = "".concat(zIndex);
|
|
77
|
-
return atlaskitportal;
|
|
78
|
-
}
|
|
79
|
-
return;
|
|
80
|
-
};
|
|
81
|
-
var createPortalParent = exports.createPortalParent = function createPortalParent() {
|
|
82
|
-
//atlaskit-portal-container div
|
|
83
|
-
if (isDocumentDefined()) {
|
|
84
|
-
var parentElement = document.querySelector(_constants.portalParentSelector);
|
|
85
|
-
if (!parentElement) {
|
|
86
|
-
var _getBody2;
|
|
87
|
-
var parent = document.createElement('div');
|
|
88
|
-
parent.className = _constants.portalParentClassName;
|
|
89
|
-
parent.style.display = 'flex';
|
|
90
|
-
(_getBody2 = getBody()) === null || _getBody2 === void 0 || _getBody2.appendChild(parent);
|
|
91
|
-
return parent;
|
|
92
|
-
}
|
|
93
|
-
return parentElement;
|
|
94
|
-
}
|
|
95
|
-
return;
|
|
96
|
-
};
|
|
97
|
-
var removePortalParent = exports.removePortalParent = function removePortalParent(parentElement) {
|
|
98
|
-
if (isDocumentDefined()) {
|
|
99
|
-
if (parentElement) {
|
|
100
|
-
var _getBody3;
|
|
101
|
-
(_getBody3 = getBody()) === null || _getBody3 === void 0 || _getBody3.removeChild(parentElement);
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
};
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { portalClassName, portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
|
|
5
|
-
* it is not be attached to any DOM node at this stage.
|
|
6
|
-
* @param {number | string} zIndex - the z-index value of the newly created portal container element
|
|
7
|
-
* @return {number} - The newly created container element
|
|
8
|
-
*/
|
|
9
|
-
export const createContainer = zIndex => {
|
|
10
|
-
const container = document.createElement('div');
|
|
11
|
-
container.className = portalClassName;
|
|
12
|
-
container.style.zIndex = `${zIndex}`;
|
|
13
|
-
return container;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Returns document body element
|
|
18
|
-
* @return {number} - The document body element
|
|
19
|
-
*/
|
|
20
|
-
const getBody = () => {
|
|
21
|
-
return document.body;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'
|
|
26
|
-
* @return {Element} - The portal parent container div element
|
|
27
|
-
*/
|
|
28
|
-
const getPortalParent = () => {
|
|
29
|
-
const parentElement = document.querySelector(portalParentSelector);
|
|
30
|
-
if (!parentElement) {
|
|
31
|
-
var _getBody;
|
|
32
|
-
const parent = document.createElement('div');
|
|
33
|
-
parent.className = portalParentClassName;
|
|
34
|
-
// we are setting display to flex because we want each portal to create a new stacking context
|
|
35
|
-
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
36
|
-
parent.style.display = 'flex';
|
|
37
|
-
(_getBody = getBody()) === null || _getBody === void 0 ? void 0 : _getBody.appendChild(parent);
|
|
38
|
-
return parent;
|
|
39
|
-
}
|
|
40
|
-
return parentElement;
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Removes portal container from portal parent container
|
|
45
|
-
* @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
|
|
46
|
-
*/
|
|
47
|
-
export const removePortalContainer = container => {
|
|
48
|
-
const parent = getPortalParent();
|
|
49
|
-
if (parent.contains(container)) {
|
|
50
|
-
parent.removeChild(container);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Appends portal container to portal parent container if it hasn't already been done
|
|
56
|
-
* @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
|
|
57
|
-
*/
|
|
58
|
-
export const appendPortalContainerIfNotAppended = container => {
|
|
59
|
-
if (!container.parentElement) {
|
|
60
|
-
getPortalParent().appendChild(container);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const isDocumentDefined = () => {
|
|
64
|
-
return document !== undefined;
|
|
65
|
-
};
|
|
66
|
-
export const createAtlaskitPortal = zIndex => {
|
|
67
|
-
//atlaskit-portal div
|
|
68
|
-
if (isDocumentDefined()) {
|
|
69
|
-
const atlaskitportal = document.createElement('div');
|
|
70
|
-
atlaskitportal.className = portalClassName;
|
|
71
|
-
atlaskitportal.style.zIndex = `${zIndex}`;
|
|
72
|
-
return atlaskitportal;
|
|
73
|
-
}
|
|
74
|
-
return;
|
|
75
|
-
};
|
|
76
|
-
export const createPortalParent = () => {
|
|
77
|
-
//atlaskit-portal-container div
|
|
78
|
-
if (isDocumentDefined()) {
|
|
79
|
-
const parentElement = document.querySelector(portalParentSelector);
|
|
80
|
-
if (!parentElement) {
|
|
81
|
-
var _getBody2;
|
|
82
|
-
const parent = document.createElement('div');
|
|
83
|
-
parent.className = portalParentClassName;
|
|
84
|
-
parent.style.display = 'flex';
|
|
85
|
-
(_getBody2 = getBody()) === null || _getBody2 === void 0 ? void 0 : _getBody2.appendChild(parent);
|
|
86
|
-
return parent;
|
|
87
|
-
}
|
|
88
|
-
return parentElement;
|
|
89
|
-
}
|
|
90
|
-
return;
|
|
91
|
-
};
|
|
92
|
-
export const removePortalParent = parentElement => {
|
|
93
|
-
if (isDocumentDefined()) {
|
|
94
|
-
if (parentElement) {
|
|
95
|
-
var _getBody3;
|
|
96
|
-
(_getBody3 = getBody()) === null || _getBody3 === void 0 ? void 0 : _getBody3.removeChild(parentElement);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
};
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
import { portalClassName, portalParentClassName, portalParentSelector } from '../constants';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
|
|
5
|
-
* it is not be attached to any DOM node at this stage.
|
|
6
|
-
* @param {number | string} zIndex - the z-index value of the newly created portal container element
|
|
7
|
-
* @return {number} - The newly created container element
|
|
8
|
-
*/
|
|
9
|
-
export var createContainer = function createContainer(zIndex) {
|
|
10
|
-
var container = document.createElement('div');
|
|
11
|
-
container.className = portalClassName;
|
|
12
|
-
container.style.zIndex = "".concat(zIndex);
|
|
13
|
-
return container;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
/**
|
|
17
|
-
* Returns document body element
|
|
18
|
-
* @return {number} - The document body element
|
|
19
|
-
*/
|
|
20
|
-
var getBody = function getBody() {
|
|
21
|
-
return document.body;
|
|
22
|
-
};
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'
|
|
26
|
-
* @return {Element} - The portal parent container div element
|
|
27
|
-
*/
|
|
28
|
-
var getPortalParent = function getPortalParent() {
|
|
29
|
-
var parentElement = document.querySelector(portalParentSelector);
|
|
30
|
-
if (!parentElement) {
|
|
31
|
-
var _getBody;
|
|
32
|
-
var parent = document.createElement('div');
|
|
33
|
-
parent.className = portalParentClassName;
|
|
34
|
-
// we are setting display to flex because we want each portal to create a new stacking context
|
|
35
|
-
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
|
|
36
|
-
parent.style.display = 'flex';
|
|
37
|
-
(_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
|
|
38
|
-
return parent;
|
|
39
|
-
}
|
|
40
|
-
return parentElement;
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* Removes portal container from portal parent container
|
|
45
|
-
* @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
|
|
46
|
-
*/
|
|
47
|
-
export var removePortalContainer = function removePortalContainer(container) {
|
|
48
|
-
var parent = getPortalParent();
|
|
49
|
-
if (parent.contains(container)) {
|
|
50
|
-
parent.removeChild(container);
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* Appends portal container to portal parent container if it hasn't already been done
|
|
56
|
-
* @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
|
|
57
|
-
*/
|
|
58
|
-
export var appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {
|
|
59
|
-
if (!container.parentElement) {
|
|
60
|
-
getPortalParent().appendChild(container);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
var isDocumentDefined = function isDocumentDefined() {
|
|
64
|
-
return document !== undefined;
|
|
65
|
-
};
|
|
66
|
-
export var createAtlaskitPortal = function createAtlaskitPortal(zIndex) {
|
|
67
|
-
//atlaskit-portal div
|
|
68
|
-
if (isDocumentDefined()) {
|
|
69
|
-
var atlaskitportal = document.createElement('div');
|
|
70
|
-
atlaskitportal.className = portalClassName;
|
|
71
|
-
atlaskitportal.style.zIndex = "".concat(zIndex);
|
|
72
|
-
return atlaskitportal;
|
|
73
|
-
}
|
|
74
|
-
return;
|
|
75
|
-
};
|
|
76
|
-
export var createPortalParent = function createPortalParent() {
|
|
77
|
-
//atlaskit-portal-container div
|
|
78
|
-
if (isDocumentDefined()) {
|
|
79
|
-
var parentElement = document.querySelector(portalParentSelector);
|
|
80
|
-
if (!parentElement) {
|
|
81
|
-
var _getBody2;
|
|
82
|
-
var parent = document.createElement('div');
|
|
83
|
-
parent.className = portalParentClassName;
|
|
84
|
-
parent.style.display = 'flex';
|
|
85
|
-
(_getBody2 = getBody()) === null || _getBody2 === void 0 || _getBody2.appendChild(parent);
|
|
86
|
-
return parent;
|
|
87
|
-
}
|
|
88
|
-
return parentElement;
|
|
89
|
-
}
|
|
90
|
-
return;
|
|
91
|
-
};
|
|
92
|
-
export var removePortalParent = function removePortalParent(parentElement) {
|
|
93
|
-
if (isDocumentDefined()) {
|
|
94
|
-
if (parentElement) {
|
|
95
|
-
var _getBody3;
|
|
96
|
-
(_getBody3 = getBody()) === null || _getBody3 === void 0 || _getBody3.removeChild(parentElement);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
|
|
3
|
-
* it is not be attached to any DOM node at this stage.
|
|
4
|
-
* @param {number | string} zIndex - the z-index value of the newly created portal container element
|
|
5
|
-
* @return {number} - The newly created container element
|
|
6
|
-
*/
|
|
7
|
-
export declare const createContainer: (zIndex: number | string) => HTMLDivElement;
|
|
8
|
-
/**
|
|
9
|
-
* Removes portal container from portal parent container
|
|
10
|
-
* @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
|
|
11
|
-
*/
|
|
12
|
-
export declare const removePortalContainer: (container: HTMLDivElement) => void;
|
|
13
|
-
/**
|
|
14
|
-
* Appends portal container to portal parent container if it hasn't already been done
|
|
15
|
-
* @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
|
|
16
|
-
*/
|
|
17
|
-
export declare const appendPortalContainerIfNotAppended: (container: HTMLDivElement) => void;
|
|
18
|
-
export declare const createAtlaskitPortal: (zIndex: number | string) => HTMLDivElement | undefined;
|
|
19
|
-
export declare const createPortalParent: () => Element | undefined;
|
|
20
|
-
export declare const removePortalParent: (parentElement: Element) => void;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Creates a new portal container element with provided z-index and class name 'atlaskit-portal',
|
|
3
|
-
* it is not be attached to any DOM node at this stage.
|
|
4
|
-
* @param {number | string} zIndex - the z-index value of the newly created portal container element
|
|
5
|
-
* @return {number} - The newly created container element
|
|
6
|
-
*/
|
|
7
|
-
export declare const createContainer: (zIndex: number | string) => HTMLDivElement;
|
|
8
|
-
/**
|
|
9
|
-
* Removes portal container from portal parent container
|
|
10
|
-
* @param {HTMLDivElement | undefined} container - portal container to be removed from portal parent container
|
|
11
|
-
*/
|
|
12
|
-
export declare const removePortalContainer: (container: HTMLDivElement) => void;
|
|
13
|
-
/**
|
|
14
|
-
* Appends portal container to portal parent container if it hasn't already been done
|
|
15
|
-
* @param {HTMLDivElement | undefined} container - portal container to be added to portal parent container
|
|
16
|
-
*/
|
|
17
|
-
export declare const appendPortalContainerIfNotAppended: (container: HTMLDivElement) => void;
|
|
18
|
-
export declare const createAtlaskitPortal: (zIndex: number | string) => HTMLDivElement | undefined;
|
|
19
|
-
export declare const createPortalParent: () => Element | undefined;
|
|
20
|
-
export declare const removePortalParent: (parentElement: Element) => void;
|