Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@atlaskit/portal

Package Overview
Dependencies
Maintainers
1
Versions
96
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@atlaskit/portal - npm Package Compare versions

Comparing version 4.2.12 to 4.2.13

6

CHANGELOG.md
# @atlaskit/portal
## 4.2.13
### Patch Changes
- [`4ba10567310`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ba10567310) - Internal changes.
## 4.2.12

@@ -4,0 +10,0 @@

3

dist/cjs/index.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -26,5 +25,3 @@ value: true

});
var _portal = _interopRequireDefault(require("./portal"));
var _constants = require("./constants");

11

dist/cjs/internal/components/internal-portal.js

@@ -7,19 +7,16 @@ "use strict";

exports.default = InternalPortal;
var _react = require("react");
var _reactDom = require("react-dom");
var _portalDomUtils = require("../utils/portal-dom-utils");
function InternalPortal(props) {
var zIndex = props.zIndex,
children = props.children;
children = props.children;
var container = (0, _react.useMemo)(function () {
return (0, _portalDomUtils.createContainer)(zIndex);
}, [zIndex]); // This is in the render method instead of useEffect so that
}, [zIndex]);
// This is in the render method instead of useEffect so that
// the portal will be added to the DOM before the children render.
// For any further changes, ensure that the container does not have a
// parent besides the portal parent.
(0, _portalDomUtils.appendPortalContainerIfNotAppended)(container);

@@ -26,0 +23,0 @@ (0, _react.useEffect)(function () {

12

dist/cjs/internal/hooks/use-is-subsequent-render.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -9,13 +8,9 @@ value: true

exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = require("react");
var useIsSubsequentRender = function useIsSubsequentRender() {
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isSubsequentRender = _useState2[0],
setIsSubsequentRender = _useState2[1];
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isSubsequentRender = _useState2[0],
setIsSubsequentRender = _useState2[1];
(0, _react.useEffect)(function () {

@@ -26,4 +21,3 @@ setIsSubsequentRender(true);

};
var _default = useIsSubsequentRender;
exports.default = _default;

6

dist/cjs/internal/hooks/use-portal-event.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -9,9 +8,5 @@ value: true

exports.default = void 0;
var _react = require("react");
var _constants = require("../../constants");
var _portalCustomEvent = _interopRequireDefault(require("../utils/portal-custom-event"));
var useFirePortalEvent = function useFirePortalEvent(zIndex) {

@@ -26,4 +21,3 @@ var zIndexNumber = Number(zIndex);

};
var _default = useFirePortalEvent;
exports.default = _default;

8

dist/cjs/internal/utils/portal-custom-event.js

@@ -18,2 +18,3 @@ "use strict";

};
/**

@@ -24,6 +25,6 @@ * return layer name in Atlassian design system corresponding to given z-index

*/
var getLayerName = function getLayerName(zIndex) {
return zIndexToName.hasOwnProperty(zIndex) ? zIndexToName[zIndex] : null;
};
/**

@@ -35,4 +36,2 @@ * Creates a PortalEvent object with given eventName, given zIndex and corresponding layer

*/
var getEvent = function getEvent(eventName, zIndex) {

@@ -47,2 +46,3 @@ var detail = {

};
/**

@@ -53,4 +53,2 @@ * Dispatches a custom event on window with given eventName, given zIndex and corresponding layer

*/
function firePortalEvent(eventName, zIndex) {

@@ -57,0 +55,0 @@ var event = getEvent(eventName, zIndex);

23

dist/cjs/internal/utils/portal-dom-utils.js

@@ -7,5 +7,3 @@ "use strict";

exports.removePortalContainer = exports.createContainer = exports.appendPortalContainerIfNotAppended = void 0;
var _constants = require("../constants");
/**

@@ -23,2 +21,3 @@ * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',

};
/**

@@ -28,9 +27,7 @@ * Returns document body element

*/
exports.createContainer = createContainer;
var getBody = function getBody() {
return document.body;
};
/**

@@ -40,12 +37,9 @@ * Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'

*/
var getPortalParent = function getPortalParent() {
var parentElement = document.querySelector(_constants.portalParentSelector);
if (!parentElement) {
var parent = document.createElement('div');
parent.className = _constants.portalParentClassName; // we are setting display to flex because we want each portal to create a new stacking context
parent.className = _constants.portalParentClassName;
// we are setting display to flex because we want each portal to create a new stacking context
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
parent.style.display = 'flex';

@@ -55,5 +49,5 @@ getBody().appendChild(parent);

}
return parentElement;
};
/**

@@ -63,7 +57,6 @@ * Removes portal container from portal parent container

*/
var removePortalContainer = function removePortalContainer(container) {
getPortalParent().removeChild(container);
};
/**

@@ -73,6 +66,3 @@ * Appends portal container to portal parent container if it hasn't already been done

*/
exports.removePortalContainer = removePortalContainer;
var appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {

@@ -83,3 +73,2 @@ if (!container.parentElement) {

};
exports.appendPortalContainerIfNotAppended = appendPortalContainerIfNotAppended;

10

dist/cjs/portal.js
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {

@@ -9,15 +8,10 @@ value: true

exports.default = Portal;
var _react = _interopRequireDefault(require("react"));
var _internalPortal = _interopRequireDefault(require("./internal/components/internal-portal"));
var _useIsSubsequentRender = _interopRequireDefault(require("./internal/hooks/use-is-subsequent-render"));
var _usePortalEvent = _interopRequireDefault(require("./internal/hooks/use-portal-event"));
function Portal(props) {
var _props$zIndex = props.zIndex,
zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
children = props.children;
zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
children = props.children;
var isSubsequentRender = (0, _useIsSubsequentRender.default)();

@@ -24,0 +18,0 @@ (0, _usePortalEvent.default)(zIndex);

2

dist/cjs/version.json
{
"name": "@atlaskit/portal",
"version": "4.2.12",
"version": "4.2.13",
"sideEffects": false
}

5

dist/es2019/internal/components/internal-portal.js

@@ -9,7 +9,8 @@ import { useEffect, useMemo } from 'react';

} = props;
const container = useMemo(() => createContainer(zIndex), [zIndex]); // This is in the render method instead of useEffect so that
const container = useMemo(() => createContainer(zIndex), [zIndex]);
// This is in the render method instead of useEffect so that
// the portal will be added to the DOM before the children render.
// For any further changes, ensure that the container does not have a
// parent besides the portal parent.
appendPortalContainerIfNotAppended(container);

@@ -16,0 +17,0 @@ useEffect(() => {

2

dist/es2019/internal/hooks/use-is-subsequent-render.js
import { useEffect, useState } from 'react';
const useIsSubsequentRender = () => {

@@ -10,3 +9,2 @@ const [isSubsequentRender, setIsSubsequentRender] = useState(false);

};
export default useIsSubsequentRender;

2

dist/es2019/internal/hooks/use-portal-event.js
import { useEffect } from 'react';
import { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../../constants';
import firePortalEvent from '../utils/portal-custom-event';
const useFirePortalEvent = zIndex => {

@@ -14,3 +13,2 @@ const zIndexNumber = Number(zIndex);

};
export default useFirePortalEvent;

8

dist/es2019/internal/utils/portal-custom-event.js

@@ -12,2 +12,3 @@ const zIndexToName = {

};
/**

@@ -18,6 +19,6 @@ * return layer name in Atlassian design system corresponding to given z-index

*/
const getLayerName = zIndex => {
return zIndexToName.hasOwnProperty(zIndex) ? zIndexToName[zIndex] : null;
};
/**

@@ -29,4 +30,2 @@ * Creates a PortalEvent object with given eventName, given zIndex and corresponding layer

*/
const getEvent = (eventName, zIndex) => {

@@ -41,2 +40,3 @@ const detail = {

};
/**

@@ -47,4 +47,2 @@ * Dispatches a custom event on window with given eventName, given zIndex and corresponding layer

*/
export default function firePortalEvent(eventName, zIndex) {

@@ -51,0 +49,0 @@ const event = getEvent(eventName, zIndex);

18

dist/es2019/internal/utils/portal-dom-utils.js
import { portalClassName, portalParentClassName, portalParentSelector } from '../constants';
/**

@@ -8,3 +9,2 @@ * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',

*/
export const createContainer = zIndex => {

@@ -16,2 +16,3 @@ const container = document.createElement('div');

};
/**

@@ -21,6 +22,6 @@ * Returns document body element

*/
const getBody = () => {
return document.body;
};
/**

@@ -30,12 +31,9 @@ * Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'

*/
const getPortalParent = () => {
const parentElement = document.querySelector(portalParentSelector);
if (!parentElement) {
const parent = document.createElement('div');
parent.className = portalParentClassName; // we are setting display to flex because we want each portal to create a new stacking context
parent.className = portalParentClassName;
// we are setting display to flex because we want each portal to create a new stacking context
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
parent.style.display = 'flex';

@@ -45,5 +43,5 @@ getBody().appendChild(parent);

}
return parentElement;
};
/**

@@ -53,7 +51,6 @@ * Removes portal container from portal parent container

*/
export const removePortalContainer = container => {
getPortalParent().removeChild(container);
};
/**

@@ -63,3 +60,2 @@ * Appends portal container to portal parent container if it hasn't already been done

*/
export const appendPortalContainerIfNotAppended = container => {

@@ -66,0 +62,0 @@ if (!container.parentElement) {

2

dist/es2019/version.json
{
"name": "@atlaskit/portal",
"version": "4.2.12",
"version": "4.2.13",
"sideEffects": false
}

7

dist/esm/internal/components/internal-portal.js

@@ -6,10 +6,11 @@ import { useEffect, useMemo } from 'react';

var zIndex = props.zIndex,
children = props.children;
children = props.children;
var container = useMemo(function () {
return createContainer(zIndex);
}, [zIndex]); // This is in the render method instead of useEffect so that
}, [zIndex]);
// This is in the render method instead of useEffect so that
// the portal will be added to the DOM before the children render.
// For any further changes, ensure that the container does not have a
// parent besides the portal parent.
appendPortalContainerIfNotAppended(container);

@@ -16,0 +17,0 @@ useEffect(function () {

9

dist/esm/internal/hooks/use-is-subsequent-render.js
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useEffect, useState } from 'react';
var useIsSubsequentRender = function useIsSubsequentRender() {
var _useState = useState(false),
_useState2 = _slicedToArray(_useState, 2),
isSubsequentRender = _useState2[0],
setIsSubsequentRender = _useState2[1];
_useState2 = _slicedToArray(_useState, 2),
isSubsequentRender = _useState2[0],
setIsSubsequentRender = _useState2[1];
useEffect(function () {

@@ -15,3 +13,2 @@ setIsSubsequentRender(true);

};
export default useIsSubsequentRender;

2

dist/esm/internal/hooks/use-portal-event.js
import { useEffect } from 'react';
import { PORTAL_MOUNT_EVENT, PORTAL_UNMOUNT_EVENT } from '../../constants';
import firePortalEvent from '../utils/portal-custom-event';
var useFirePortalEvent = function useFirePortalEvent(zIndex) {

@@ -14,3 +13,2 @@ var zIndexNumber = Number(zIndex);

};
export default useFirePortalEvent;

8

dist/esm/internal/utils/portal-custom-event.js

@@ -12,2 +12,3 @@ var zIndexToName = {

};
/**

@@ -18,6 +19,6 @@ * return layer name in Atlassian design system corresponding to given z-index

*/
var getLayerName = function getLayerName(zIndex) {
return zIndexToName.hasOwnProperty(zIndex) ? zIndexToName[zIndex] : null;
};
/**

@@ -29,4 +30,2 @@ * Creates a PortalEvent object with given eventName, given zIndex and corresponding layer

*/
var getEvent = function getEvent(eventName, zIndex) {

@@ -41,2 +40,3 @@ var detail = {

};
/**

@@ -47,4 +47,2 @@ * Dispatches a custom event on window with given eventName, given zIndex and corresponding layer

*/
export default function firePortalEvent(eventName, zIndex) {

@@ -51,0 +49,0 @@ var event = getEvent(eventName, zIndex);

18

dist/esm/internal/utils/portal-dom-utils.js
import { portalClassName, portalParentClassName, portalParentSelector } from '../constants';
/**

@@ -8,3 +9,2 @@ * Creates a new portal container element with provided z-index and class name 'atlaskit-portal',

*/
export var createContainer = function createContainer(zIndex) {

@@ -16,2 +16,3 @@ var container = document.createElement('div');

};
/**

@@ -21,6 +22,6 @@ * Returns document body element

*/
var getBody = function getBody() {
return document.body;
};
/**

@@ -30,12 +31,9 @@ * Returns portal parent container. If no container exists already then it creates a new container with class name 'atlaskit-portal-container'

*/
var getPortalParent = function getPortalParent() {
var parentElement = document.querySelector(portalParentSelector);
if (!parentElement) {
var parent = document.createElement('div');
parent.className = portalParentClassName; // we are setting display to flex because we want each portal to create a new stacking context
parent.className = portalParentClassName;
// we are setting display to flex because we want each portal to create a new stacking context
// See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
parent.style.display = 'flex';

@@ -45,5 +43,5 @@ getBody().appendChild(parent);

}
return parentElement;
};
/**

@@ -53,7 +51,6 @@ * Removes portal container from portal parent container

*/
export var removePortalContainer = function removePortalContainer(container) {
getPortalParent().removeChild(container);
};
/**

@@ -63,3 +60,2 @@ * Appends portal container to portal parent container if it hasn't already been done

*/
export var appendPortalContainerIfNotAppended = function appendPortalContainerIfNotAppended(container) {

@@ -66,0 +62,0 @@ if (!container.parentElement) {

4

dist/esm/portal.js

@@ -7,4 +7,4 @@ import React from 'react';

var _props$zIndex = props.zIndex,
zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
children = props.children;
zIndex = _props$zIndex === void 0 ? 0 : _props$zIndex,
children = props.children;
var isSubsequentRender = useIsSubsequentRender();

@@ -11,0 +11,0 @@ useFirePortalEvent(zIndex);

2

dist/esm/version.json
{
"name": "@atlaskit/portal",
"version": "4.2.12",
"version": "4.2.13",
"sideEffects": false
}

41

package.json
{
"name": "@atlaskit/portal",
"version": "4.2.12",
"description": "Atlaskit wrapper for rendering components in React portals",
"version": "4.2.13",
"description": "A wrapper for rendering components in React portals.",
"publishConfig": {

@@ -15,14 +15,5 @@ "registry": "https://registry.npmjs.org/"

"types": "dist/types/index.d.ts",
"typesVersions": {
">=4.0 <4.5": {
"*": [
"dist/types-ts4.0/*",
"dist/types-ts4.0/index.d.ts"
]
}
},
"sideEffects": false,
"atlaskit:src": "src/index.tsx",
"atlassian": {
"disableProductCI": true,
"team": "Design System Team",

@@ -32,3 +23,3 @@ "releaseModel": "scheduled",

"name": "Portal",
"category": "Components"
"category": "Libraries"
}

@@ -41,3 +32,3 @@ },

"dependencies": {
"@atlaskit/theme": "^12.2.0",
"@atlaskit/theme": "^12.4.0",
"@babel/runtime": "^7.0.0"

@@ -50,14 +41,20 @@ },

"devDependencies": {
"@atlaskit/button": "^16.3.0",
"@atlaskit/banner": "^12.0.9",
"@atlaskit/button": "^16.6.0",
"@atlaskit/code": "^14.5.0",
"@atlaskit/docs": "*",
"@atlaskit/flag": "^14.7.0",
"@atlaskit/flag": "^15.1.0",
"@atlaskit/icon": "^21.11.0",
"@atlaskit/inline-dialog": "^13.4.0",
"@atlaskit/image": "^1.0.3",
"@atlaskit/inline-dialog": "^13.5.0",
"@atlaskit/modal-dialog": "^12.4.0",
"@atlaskit/onboarding": "^10.6.0",
"@atlaskit/onboarding": "^10.7.0",
"@atlaskit/section-message": "^6.3.9",
"@atlaskit/ssr": "*",
"@atlaskit/tooltip": "^17.6.0",
"@atlaskit/tokens": "^1.2.0",
"@atlaskit/tooltip": "^17.7.0",
"@atlaskit/visual-regression": "*",
"@atlaskit/webdriver-runner": "*",
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
"@emotion/react": "^11.7.1",
"@testing-library/react": "^12.1.5",

@@ -84,4 +81,6 @@ "bind-event-listener": "^2.1.1",

"analytics": "analytics-next",
"design-tokens": "spacing",
"theming": "tokens",
"design-tokens": [
"color",
"spacing"
],
"deprecation": "no-deprecated-imports",

@@ -94,4 +93,4 @@ "styling": [

},
"homepage": "https://atlaskit.atlassian.com/packages/design-system/portal",
"homepage": "https://atlassian.design/components/portal/",
"prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
}

6

README.md
# Portal
An Atlaskit wrapper for rendering components in React Portals.
A wrapper for rendering components in React portals.
## Installation
```sh
yarn add @atlaskit/portal
```
## Usage
Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/portal).
[View documentation](https://atlassian.design/components/portal/).

56

report.api.md

@@ -1,7 +0,16 @@

## API Report File for "@atlaskit/portal".
<!-- API Report Version: 2.3 -->
> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
## API Report File for "@atlaskit/portal"
[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
### Table of contents
- [Main Entry Types](#main-entry-types)
### Main Entry Types
<!--SECTION START: Main Entry Types-->
```ts

@@ -13,36 +22,37 @@ /// <reference types="react" />

/**
* Named layers of all z-index used in the Atlassian Design System.
*/
declare type LayerName = keyof Layers;
// @public
type LayerName = keyof Layers;
declare function Portal(props: PortalProps): JSX.Element | null;
// @public (undocumented)
function Portal(props: PortalProps): JSX.Element | null;
export default Portal;
export declare const PORTAL_MOUNT_EVENT = 'akPortalMount';
// @public (undocumented)
export const PORTAL_MOUNT_EVENT = 'akPortalMount';
export declare const PORTAL_UNMOUNT_EVENT = 'akPortalUnmount';
// @public (undocumented)
export const PORTAL_UNMOUNT_EVENT = 'akPortalUnmount';
/**
* Custom event object that will be fired when Atlassian Portal component is mounted and unmounted
*/
export declare type PortalEvent = CustomEvent<PortalEventDetail>;
// @public
export type PortalEvent = CustomEvent<PortalEventDetail>;
/**
* Interface for event to be fired on Atlassian Portal component mount and unmount
*/
declare interface PortalEventDetail {
// @public
interface PortalEventDetail {
// (undocumented)
layer: LayerName | null;
// (undocumented)
zIndex: number;
}
/**
* Interface for props to be passed in Atlassian Portal component
*/
export declare interface PortalProps {
// @public
export interface PortalProps {
// (undocumented)
children: React_2.ReactNode;
// (undocumented)
zIndex?: number | string;
}
export {};
// (No @packageDocumentation comment for this package)
```
<!--SECTION END: Main Entry Types-->
dist/types-ts4.0/constants.d.ts
dist/types-ts4.0/entry-points/types.d.ts
dist/types-ts4.0/index.d.ts
dist/types-ts4.0/internal/components/internal-portal.d.ts
dist/types-ts4.0/internal/constants.d.ts
dist/types-ts4.0/internal/hooks/use-is-subsequent-render.d.ts
dist/types-ts4.0/internal/hooks/use-portal-event.d.ts
dist/types-ts4.0/internal/types.d.ts
dist/types-ts4.0/internal/utils/portal-custom-event.d.ts
dist/types-ts4.0/internal/utils/portal-dom-utils.d.ts
dist/types-ts4.0/portal.d.ts
dist/types-ts4.0/types.d.ts
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc