@atlaskit/portal 4.5.0 → 4.6.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.
Files changed (16) hide show
  1. package/CHANGELOG.md +471 -455
  2. package/__perf__/default.tsx +3 -3
  3. package/__perf__/examples.tsx +26 -19
  4. package/dist/cjs/internal/utils/portal-dom-utils.js +2 -1
  5. package/dist/es2019/internal/utils/portal-dom-utils.js +2 -1
  6. package/dist/esm/internal/utils/portal-dom-utils.js +2 -1
  7. package/dist/types/internal/components/internal-portal.d.ts +1 -1
  8. package/dist/types/internal/hooks/use-is-subsequent-render.d.ts +1 -1
  9. package/dist/types/portal.d.ts +1 -1
  10. package/dist/types/types.d.ts +2 -2
  11. package/dist/types-ts4.5/internal/components/internal-portal.d.ts +1 -1
  12. package/dist/types-ts4.5/internal/hooks/use-is-subsequent-render.d.ts +1 -1
  13. package/dist/types-ts4.5/portal.d.ts +1 -1
  14. package/dist/types-ts4.5/types.d.ts +2 -2
  15. package/package.json +91 -93
  16. package/report.api.md +14 -17
package/__perf__/default.tsx CHANGED
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import Portal from '../src';
4
4
 
5
5
  export default () => (
6
- <Portal zIndex={100}>
7
- <p>portal</p>
8
- </Portal>
6
+ <Portal zIndex={100}>
7
+ <p>portal</p>
8
+ </Portal>
9
9
  );
package/__perf__/examples.tsx CHANGED
@@ -5,25 +5,32 @@ import { token } from '@atlaskit/tokens';
5
5
  import Portal from '../src';
6
6
 
7
7
  const PortalPerformance = () => {
8
- return (
9
- <Portal zIndex={200}>
10
- <div
11
- style={{
12
- position: 'absolute',
13
- top: token('space.300', '24px'),
14
- left: token('space.300', '24px'),
15
- background: 'lightpink',
16
- padding: token('space.300', '24px'),
17
- borderRadius: '3px',
18
- // this z-index is relative to the portal
19
- zIndex: 1,
20
- }}
21
- >
22
- <p>portal z-index: 200</p>
23
- <p>element z-index: 1</p>
24
- </div>
25
- </Portal>
26
- );
8
+ return (
9
+ <Portal zIndex={200}>
10
+ <div
11
+ style={{
12
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
13
+ position: 'absolute',
14
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
15
+ top: token('space.300', '24px'),
16
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
17
+ left: token('space.300', '24px'),
18
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
19
+ background: 'lightpink',
20
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
21
+ padding: token('space.300', '24px'),
22
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
23
+ borderRadius: '3px',
24
+ // this z-index is relative to the portal
25
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
26
+ zIndex: 1,
27
+ }}
28
+ >
29
+ <p>portal z-index: 200</p>
30
+ <p>element z-index: 1</p>
31
+ </div>
32
+ </Portal>
33
+ );
27
34
  };
28
35
 
29
36
  export default PortalPerformance;
package/dist/cjs/internal/utils/portal-dom-utils.js CHANGED
@@ -33,12 +33,13 @@ var getBody = function getBody() {
33
33
  var getPortalParent = function getPortalParent() {
34
34
  var parentElement = document.querySelector(_constants.portalParentSelector);
35
35
  if (!parentElement) {
36
+ var _getBody;
36
37
  var parent = document.createElement('div');
37
38
  parent.className = _constants.portalParentClassName;
38
39
  // we are setting display to flex because we want each portal to create a new stacking context
39
40
  // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
40
41
  parent.style.display = 'flex';
41
- getBody().appendChild(parent);
42
+ (_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
42
43
  return parent;
43
44
  }
44
45
  return parentElement;
package/dist/es2019/internal/utils/portal-dom-utils.js CHANGED
@@ -28,12 +28,13 @@ const getBody = () => {
28
28
  const getPortalParent = () => {
29
29
  const parentElement = document.querySelector(portalParentSelector);
30
30
  if (!parentElement) {
31
+ var _getBody;
31
32
  const parent = document.createElement('div');
32
33
  parent.className = portalParentClassName;
33
34
  // we are setting display to flex because we want each portal to create a new stacking context
34
35
  // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
35
36
  parent.style.display = 'flex';
36
- getBody().appendChild(parent);
37
+ (_getBody = getBody()) === null || _getBody === void 0 ? void 0 : _getBody.appendChild(parent);
37
38
  return parent;
38
39
  }
39
40
  return parentElement;
package/dist/esm/internal/utils/portal-dom-utils.js CHANGED
@@ -28,12 +28,13 @@ var getBody = function getBody() {
28
28
  var getPortalParent = function getPortalParent() {
29
29
  var parentElement = document.querySelector(portalParentSelector);
30
30
  if (!parentElement) {
31
+ var _getBody;
31
32
  var parent = document.createElement('div');
32
33
  parent.className = portalParentClassName;
33
34
  // we are setting display to flex because we want each portal to create a new stacking context
34
35
  // See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
35
36
  parent.style.display = 'flex';
36
- getBody().appendChild(parent);
37
+ (_getBody = getBody()) === null || _getBody === void 0 || _getBody.appendChild(parent);
37
38
  return parent;
38
39
  }
39
40
  return parentElement;
package/dist/types/internal/components/internal-portal.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactPortal } from 'react';
1
+ import { type ReactPortal } from 'react';
2
2
  interface InternalPortalProps {
3
3
  children: React.ReactNode;
4
4
  zIndex: number | string;
package/dist/types/internal/hooks/use-is-subsequent-render.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { MountStrategy } from '../types';
1
+ import { type MountStrategy } from '../types';
2
2
  declare const useIsSubsequentRender: (mountStrategy?: MountStrategy) => boolean;
3
3
  export default useIsSubsequentRender;
package/dist/types/portal.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import type { PortalProps } from './types';
3
- export default function Portal({ zIndex, children, mountStrategy, }: PortalProps): JSX.Element | null;
3
+ export default function Portal({ zIndex, children, mountStrategy }: PortalProps): JSX.Element | null;
package/dist/types/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { MountStrategy, PortalEventDetail } from './internal/types';
1
+ import type React from 'react';
2
+ import { type MountStrategy, type PortalEventDetail } from './internal/types';
3
3
  /**
4
4
  * Interface for props to be passed in Atlassian Portal component
5
5
  */
package/dist/types-ts4.5/internal/components/internal-portal.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactPortal } from 'react';
1
+ import { type ReactPortal } from 'react';
2
2
  interface InternalPortalProps {
3
3
  children: React.ReactNode;
4
4
  zIndex: number | string;
package/dist/types-ts4.5/internal/hooks/use-is-subsequent-render.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- import { MountStrategy } from '../types';
1
+ import { type MountStrategy } from '../types';
2
2
  declare const useIsSubsequentRender: (mountStrategy?: MountStrategy) => boolean;
3
3
  export default useIsSubsequentRender;
package/dist/types-ts4.5/portal.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import type { PortalProps } from './types';
3
- export default function Portal({ zIndex, children, mountStrategy, }: PortalProps): JSX.Element | null;
3
+ export default function Portal({ zIndex, children, mountStrategy }: PortalProps): JSX.Element | null;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { MountStrategy, PortalEventDetail } from './internal/types';
1
+ import type React from 'react';
2
+ import { type MountStrategy, type PortalEventDetail } from './internal/types';
3
3
  /**
4
4
  * Interface for props to be passed in Atlassian Portal component
5
5
  */
package/package.json CHANGED
@@ -1,94 +1,92 @@
1
1
  {
2
- "name": "@atlaskit/portal",
3
- "version": "4.5.0",
4
- "description": "A wrapper for rendering components in React portals.",
5
- "publishConfig": {
6
- "registry": "https://registry.npmjs.org/"
7
- },
8
- "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
- "author": "Atlassian Pty Ltd",
10
- "license": "Apache-2.0",
11
- "main": "dist/cjs/index.js",
12
- "module": "dist/esm/index.js",
13
- "module:es2019": "dist/es2019/index.js",
14
- "types": "dist/types/index.d.ts",
15
- "typesVersions": {
16
- ">=4.5 <4.9": {
17
- "*": [
18
- "dist/types-ts4.5/*",
19
- "dist/types-ts4.5/index.d.ts"
20
- ]
21
- }
22
- },
23
- "sideEffects": false,
24
- "atlaskit:src": "src/index.tsx",
25
- "atlassian": {
26
- "team": "Design System Team",
27
- "releaseModel": "continuous",
28
- "productPushConsumption": [
29
- "jira"
30
- ],
31
- "website": {
32
- "name": "Portal",
33
- "category": "Libraries"
34
- },
35
- "runReact18": true
36
- },
37
- "af:exports": {
38
- "./types": "./src/entry-points/types.tsx",
39
- ".": "./src/index.tsx"
40
- },
41
- "dependencies": {
42
- "@atlaskit/theme": "^12.7.0",
43
- "@babel/runtime": "^7.0.0"
44
- },
45
- "peerDependencies": {
46
- "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
47
- "react-dom": "^16.8.0"
48
- },
49
- "devDependencies": {
50
- "@af/accessibility-testing": "*",
51
- "@af/integration-testing": "*",
52
- "@atlaskit/ds-lib": "^2.3.0",
53
- "@atlaskit/modal-dialog": "^12.13.0",
54
- "@atlaskit/ssr": "*",
55
- "@atlaskit/tokens": "^1.45.0",
56
- "@atlaskit/tooltip": "^18.3.0",
57
- "@atlaskit/visual-regression": "*",
58
- "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
59
- "@emotion/react": "^11.7.1",
60
- "@testing-library/react": "^12.1.5",
61
- "@testing-library/react-hooks": "^8.0.1",
62
- "bind-event-listener": "^3.0.0",
63
- "raf-stub": "^2.0.1",
64
- "storybook-addon-performance": "^0.16.0",
65
- "typescript": "~5.4.2"
66
- },
67
- "keywords": [
68
- "atlaskit",
69
- "react",
70
- "ui"
71
- ],
72
- "techstack": {
73
- "@atlassian/frontend": {
74
- "import-structure": "atlassian-conventions"
75
- },
76
- "@repo/internal": {
77
- "dom-events": "use-bind-event-listener",
78
- "design-system": "v1",
79
- "ui-components": "lite-mode",
80
- "analytics": "analytics-next",
81
- "design-tokens": [
82
- "color",
83
- "spacing"
84
- ],
85
- "deprecation": "no-deprecated-imports",
86
- "styling": [
87
- "static",
88
- "emotion"
89
- ]
90
- }
91
- },
92
- "homepage": "https://atlassian.design/components/portal/",
93
- "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
94
- }
2
+ "name": "@atlaskit/portal",
3
+ "version": "4.6.1",
4
+ "description": "A wrapper for rendering components in React portals.",
5
+ "publishConfig": {
6
+ "registry": "https://registry.npmjs.org/"
7
+ },
8
+ "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
9
+ "author": "Atlassian Pty Ltd",
10
+ "license": "Apache-2.0",
11
+ "main": "dist/cjs/index.js",
12
+ "module": "dist/esm/index.js",
13
+ "module:es2019": "dist/es2019/index.js",
14
+ "types": "dist/types/index.d.ts",
15
+ "typesVersions": {
16
+ ">=4.5 <4.9": {
17
+ "*": [
18
+ "dist/types-ts4.5/*",
19
+ "dist/types-ts4.5/index.d.ts"
20
+ ]
21
+ }
22
+ },
23
+ "sideEffects": false,
24
+ "atlaskit:src": "src/index.tsx",
25
+ "atlassian": {
26
+ "team": "Design System Team",
27
+ "releaseModel": "continuous",
28
+ "productPushConsumption": [
29
+ "jira"
30
+ ],
31
+ "website": {
32
+ "name": "Portal",
33
+ "category": "Libraries"
34
+ },
35
+ "runReact18": true
36
+ },
37
+ "af:exports": {
38
+ "./types": "./src/entry-points/types.tsx",
39
+ ".": "./src/index.tsx"
40
+ },
41
+ "dependencies": {
42
+ "@atlaskit/theme": "^12.11.0",
43
+ "@babel/runtime": "^7.0.0"
44
+ },
45
+ "peerDependencies": {
46
+ "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
47
+ "react-dom": "^16.8.0"
48
+ },
49
+ "devDependencies": {
50
+ "@af/accessibility-testing": "*",
51
+ "@af/integration-testing": "*",
52
+ "@atlaskit/ds-lib": "^2.3.0",
53
+ "@atlaskit/modal-dialog": "^12.14.0",
54
+ "@atlaskit/ssr": "*",
55
+ "@atlaskit/tokens": "^1.53.0",
56
+ "@atlaskit/tooltip": "^18.5.0",
57
+ "@atlaskit/visual-regression": "*",
58
+ "@emotion/react": "^11.7.1",
59
+ "@testing-library/react": "^12.1.5",
60
+ "@testing-library/react-hooks": "^8.0.1",
61
+ "bind-event-listener": "^3.0.0",
62
+ "raf-stub": "^2.0.1",
63
+ "storybook-addon-performance": "^0.16.0",
64
+ "typescript": "~5.4.2"
65
+ },
66
+ "keywords": [
67
+ "atlaskit",
68
+ "react",
69
+ "ui"
70
+ ],
71
+ "techstack": {
72
+ "@atlassian/frontend": {
73
+ "import-structure": "atlassian-conventions"
74
+ },
75
+ "@repo/internal": {
76
+ "dom-events": "use-bind-event-listener",
77
+ "design-system": "v1",
78
+ "ui-components": "lite-mode",
79
+ "analytics": "analytics-next",
80
+ "design-tokens": [
81
+ "color",
82
+ "spacing"
83
+ ],
84
+ "deprecation": "no-deprecated-imports",
85
+ "styling": [
86
+ "static",
87
+ "emotion"
88
+ ]
89
+ }
90
+ },
91
+ "homepage": "https://atlassian.design/components/portal/"
92
+ }
package/report.api.md CHANGED
@@ -2,7 +2,8 @@
2
2
 
3
3
  ## API Report File for "@atlaskit/portal"
4
4
 
5
- > Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
5
+ > Do not edit this file. This report is auto-generated using
6
+ > [API Extractor](https://api-extractor.com/).
6
7
  > [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
7
8
 
8
9
  ### Table of contents
@@ -27,11 +28,7 @@ type LayerName = keyof Layers;
27
28
  type MountStrategy = 'effect' | 'layoutEffect';
28
29
 
29
30
  // @public (undocumented)
30
- function Portal({
31
- zIndex,
32
- children,
33
- mountStrategy,
34
- }: PortalProps): JSX.Element | null;
31
+ function Portal({ zIndex, children, mountStrategy }: PortalProps): JSX.Element | null;
35
32
  export default Portal;
36
33
 
37
34
  // @public (undocumented)
@@ -45,19 +42,19 @@ export type PortalEvent = CustomEvent<PortalEventDetail>;
45
42
 
46
43
  // @public
47
44
  interface PortalEventDetail {
48
- // (undocumented)
49
- layer: LayerName | null;
50
- // (undocumented)
51
- zIndex: number;
45
+ // (undocumented)
46
+ layer: LayerName | null;
47
+ // (undocumented)
48
+ zIndex: number;
52
49
  }
53
50
 
54
51
  // @public
55
52
  export interface PortalProps {
56
- // (undocumented)
57
- children: React_2.ReactNode;
58
- mountStrategy?: MountStrategy;
59
- // (undocumented)
60
- zIndex?: number | string;
53
+ // (undocumented)
54
+ children: React_2.ReactNode;
55
+ mountStrategy?: MountStrategy;
56
+ // (undocumented)
57
+ zIndex?: number | string;
61
58
  }
62
59
 
63
60
  // (No @packageDocumentation comment for this package)
@@ -71,8 +68,8 @@ export interface PortalProps {
71
68
 
72
69
  ```json
73
70
  {
74
- "react": "^16.8.0",
75
- "react-dom": "^16.8.0"
71
+ "react": "^16.8.0",
72
+ "react-dom": "^16.8.0"
76
73
  }
77
74
  ```
78
75