@atlaskit/popup 1.4.1 → 1.5.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/popup
 
+## 1.5.0
+
+### Minor Changes
+
+- [`c520e306869`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c520e306869) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+## 1.4.2
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 1.4.1
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { useState } from 'react';
 
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 
 import Button from '@atlaskit/button/custom-theme-button';
 import MediaServicesAddCommentIcon from '@atlaskit/icon/glyph/media-services/add-comment';

package/dist/cjs/popper-wrapper.js

@@ -13,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _popper = require("@atlaskit/popper");
 
@@ -28,7 +28,7 @@ var _useCloseManager = require("./use-close-manager");
 var _useFocusManager = require("./use-focus-manager");
 
 /** @jsx jsx */
-var popupStyles = (0, _core.css)({
+var popupStyles = (0, _react2.css)({
   display: 'block',
   boxSizing: 'border-box',
   zIndex: _constants.layers.layer(),
@@ -42,10 +42,11 @@ var popupStyles = (0, _core.css)({
   }
 });
 var DefaultPopupComponent = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  return (0, _core.jsx)("div", (0, _extends2.default)({
-    css: popupStyles,
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: popupStyles
+  }, props, {
     ref: ref
-  }, props));
+  }));
 });
 
 function PopperWrapper(_ref) {
@@ -100,7 +101,7 @@ function PopperWrapper(_ref) {
       }
     }];
   }, [shouldFlip, rootBoundary, boundary, fallbackPlacements]);
-  return (0, _core.jsx)(_popper.Popper, {
+  return (0, _react2.jsx)(_popper.Popper, {
     placement: placement,
     offset: offset,
     modifiers: modifiers
@@ -109,7 +110,7 @@ function PopperWrapper(_ref) {
         style = _ref2.style,
         placement = _ref2.placement,
         update = _ref2.update;
-    return (0, _core.jsx)(PopupContainer, {
+    return (0, _react2.jsx)(PopupContainer, {
       id: id,
       "data-placement": placement,
       "data-testid": testId,
@@ -128,7 +129,7 @@ function PopperWrapper(_ref) {
       // first on the browser address bar when using keyboard
       ,
       tabIndex: autoFocus ? 0 : undefined
-    }, (0, _core.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
+    }, (0, _react2.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
       update: update
     }, content({
       update: update,

package/dist/cjs/popup.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _popper = require("@atlaskit/popper");
 
@@ -55,7 +55,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       triggerRef = _useState2[0],
       setTriggerRef = _useState2[1];
 
-  return (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref2) {
+  return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var _ref3 = _ref2.ref;
     return trigger({
       ref: function ref(node) {
@@ -73,9 +73,9 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
       'aria-expanded': isOpen,
       'aria-haspopup': true
     });
-  }), isOpen && (0, _core.jsx)(_portal.default, {
+  }), isOpen && (0, _react2.jsx)(_portal.default, {
     zIndex: zIndex
-  }, (0, _core.jsx)(_popperWrapper.default, {
+  }, (0, _react2.jsx)(_popperWrapper.default, {
     content: content,
     isOpen: isOpen,
     placement: placement,

package/dist/cjs/use-close-manager.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,7 +11,7 @@ var _react = require("react");
 
 var _bindEventListener = require("bind-event-listener");
 
-function noop() {}
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
@@ -19,7 +21,7 @@ var useCloseManager = function useCloseManager(_ref) {
       capture = _ref.shouldUseCaptureOnOutsideClick;
   (0, _react.useEffect)(function () {
     if (!isOpen || !popupRef) {
-      return noop;
+      return _noop.default;
     }
 
     var closePopup = function closePopup(event) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.4.1",
+	"version": "1.5.0",
 	"sideEffects": false
 }

package/dist/es2019/popper-wrapper.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, layers } from '@atlaskit/theme/constants';
@@ -23,9 +23,10 @@ const popupStyles = css({
   }
 });
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => jsx("div", _extends({
-  css: popupStyles,
+  css: popupStyles
+}, props, {
   ref: ref
-}, props)));
+})));
 
 function PopperWrapper({
   isOpen,

package/dist/es2019/popup.js

@@ -2,7 +2,7 @@
 
 /** @jsx jsx */
 import { memo, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';

package/dist/es2019/use-close-manager.js

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
 import { bindAll } from 'bind-event-listener';
-
-function noop() {}
-
+import noop from '@atlaskit/ds-lib/noop';
 export const useCloseManager = ({
   isOpen,
   onClose,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.4.1",
+	"version": "1.5.0",
 	"sideEffects": false
 }

package/dist/esm/popper-wrapper.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { forwardRef, useMemo, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, layers } from '@atlaskit/theme/constants';
@@ -25,9 +25,10 @@ var popupStyles = css({
 });
 var DefaultPopupComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   return jsx("div", _extends({
-    css: popupStyles,
+    css: popupStyles
+  }, props, {
     ref: ref
-  }, props));
+  }));
 });
 
 function PopperWrapper(_ref) {

package/dist/esm/popup.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import { memo, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';

package/dist/esm/use-close-manager.js

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
 import { bindAll } from 'bind-event-listener';
-
-function noop() {}
-
+import noop from '@atlaskit/ds-lib/noop';
 export var useCloseManager = function useCloseManager(_ref) {
   var isOpen = _ref.isOpen,
       onClose = _ref.onClose,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "1.4.1",
+	"version": "1.5.0",
 	"sideEffects": false
 }

package/dist/types/popper-wrapper.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { PopperWrapperProps } from './types';
-declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): JSX.Element;
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
 export default PopperWrapper;

package/dist/types-ts4.0/index.d.ts

@@ -0,0 +1,4 @@
+import { Popup } from './popup';
+export type { ContentProps, PopupComponentProps, PopupProps, TriggerProps, } from './types';
+export { Popup };
+export default Popup;

package/dist/types-ts4.0/popper-wrapper.d.ts

@@ -0,0 +1,4 @@
+import { jsx } from '@emotion/react';
+import { PopperWrapperProps } from './types';
+declare function PopperWrapper({ isOpen, id, offset, testId, content, fallbackPlacements, onClose, boundary, rootBoundary, shouldFlip, placement, popupComponent: PopupContainer, autoFocus, triggerRef, shouldUseCaptureOnOutsideClick, }: PopperWrapperProps): jsx.JSX.Element;
+export default PopperWrapper;

package/dist/types-ts4.0/popup.d.ts

@@ -0,0 +1,5 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { PopupProps } from './types';
+export declare const Popup: FC<PopupProps>;
+export default Popup;

package/dist/types-ts4.0/reposition-on-update.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { RepositionOnUpdateProps } from './types';
+export declare const RepositionOnUpdate: FC<RepositionOnUpdateProps>;

package/dist/types-ts4.0/types.d.ts

@@ -0,0 +1,169 @@
+import React, { ComponentType, CSSProperties, Dispatch, ReactNode, Ref, SetStateAction } from 'react';
+import { Placement, PopperChildrenProps } from '@atlaskit/popper';
+export interface TriggerProps {
+    ref: Ref<any>;
+    'aria-controls'?: string;
+    'aria-expanded': boolean;
+    'aria-haspopup': boolean;
+}
+export declare type PopupRef = HTMLDivElement | null;
+export declare type TriggerRef = HTMLElement | HTMLButtonElement | null;
+export interface ContentProps {
+    /**
+     * Will reposition the popup if any of the content has changed.
+     * Useful for when positions change and the popup was not aware.
+     */
+    update: PopperChildrenProps['update'];
+    /**
+     * Passed through from the parent popup.
+     */
+    isOpen: boolean;
+    /**
+     * Passed through from the parent popup.
+     */
+    onClose?: BaseProps['onClose'];
+    /**
+     * Escape hatch to set the initial focus for a specific element when the popup is opened.
+     */
+    setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
+}
+export interface PopupComponentProps {
+    /**
+     * Children passed passed through by the parent popup.
+     */
+    children: ReactNode;
+    /**
+     * Placement passed through by the parent popup.
+     */
+    'data-placement': Placement;
+    /**
+     * Test id passed through by the parent popup.
+     */
+    'data-testid'?: string;
+    /**
+     * Id passed through by the parent popup.
+     */
+    id?: string;
+    /**
+     * Ref that should be assigned to the root element.
+     */
+    ref: Ref<HTMLDivElement>;
+    /**
+     * Style that should be assigned to the root element.
+     */
+    style: CSSProperties;
+    /**
+     * Tab index passed through by the parent popup.
+     */
+    tabIndex: number | undefined;
+}
+interface BaseProps {
+    /**
+     * Used to either show or hide the popup.
+     * When set to `false` popup will not render anything to the DOM.
+     */
+    isOpen: boolean;
+    /**
+     * Render props for content that is displayed inside the popup.
+     */
+    content: (props: ContentProps) => React.ReactNode;
+    /**
+     * Id that is assigned to the popup container element.
+     */
+    id?: string;
+    /**
+     * Distance the popup should be offset from the reference in the format of [along, away] (units in px).
+     * Defaults to [0, 8] - which means the popup will be 8px away from the edge of the reference specified
+     * by the `placement` prop.
+     */
+    offset?: [
+        number,
+        number
+    ];
+    /**
+     * Placement of where the popup should be displayed relative to the trigger element.
+     * Defaults to `"auto"`.
+     */
+    placement?: Placement;
+    /**
+     * Defines a list of placements to try.
+     * When no space is available on the preferred placement,
+     * the modifier will test the ones provided in the list, and use the first useful one.
+     */
+    fallbackPlacements?: Placement[];
+    /**
+     * The boundary element that the popup will check for overflow.
+     * Defaults to `"clippingParents"` which are parent scroll containers,
+     * but can be set to any element.
+     */
+    boundary?: 'clippingParents' | HTMLElement;
+    /**
+     * The root boundary that the popup will check for overflow.
+     * Defaults to `"viewport"` but can be set to `"document"`.
+     */
+    rootBoundary?: 'viewport' | 'document';
+    /**
+     * Allows the Popup to be placed on the opposite side of its trigger if it does not fit in the viewport.
+     * Defaults to `true`.
+     */
+    shouldFlip?: boolean;
+    /**
+     * A `testId` prop is provided for specified elements,
+     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
+    /**
+     * Handler that is called when the popup wants to close itself.
+     * Generally this will be either when clicking away from the popup or pressing the escape key.
+     * You'll want to use this to set open state accordingly and then pump it back into the `isOpen` prop.
+     */
+    onClose?(event: Event | React.MouseEvent | React.KeyboardEvent): void;
+    /**
+     * The element that is shown when `isOpen` prop is `true`.
+     * The result of the `content` prop will be placed as children here.
+     * Defaults to an element with an elevation of `e200` with _no padding_.
+     */
+    popupComponent?: ComponentType<PopupComponentProps>;
+    /**
+     * Controls whether the popup takes focus when opening.
+     * This changes the `popupComponent` component tabIndex to `null`.
+     * Defaults to `true`.
+     */
+    autoFocus?: boolean;
+    /**
+     * Controls if the event which handles clicks outside the popup is be bound with
+     *  `capture: true`.
+     */
+    shouldUseCaptureOnOutsideClick?: boolean;
+}
+export interface PopupProps extends BaseProps {
+    /**
+     * Render props used to anchor the popup to your content.
+     * Make this an interactive element,
+     * such as an `@atlaskit/button` component.
+     */
+    trigger: (props: TriggerProps) => React.ReactNode;
+    /**
+     * Z-index that the popup should be displayed in.
+     * This is passed to the portal component.
+     * Defaults to `layers.layer()` from `@atlaskit/theme`.
+     */
+    zIndex?: number;
+}
+export interface PopperWrapperProps extends BaseProps {
+    triggerRef: TriggerRef;
+}
+export declare type CloseManagerHook = Pick<PopupProps, 'isOpen' | 'onClose'> & {
+    popupRef: PopupRef;
+    triggerRef: TriggerRef;
+    shouldUseCaptureOnOutsideClick?: boolean;
+};
+export declare type FocusManagerHook = {
+    popupRef: PopupRef;
+    initialFocusRef: HTMLElement | null;
+};
+export declare type RepositionOnUpdateProps = {
+    update: PopperChildrenProps['update'];
+};
+export {};

package/dist/types-ts4.0/use-close-manager.d.ts

@@ -0,0 +1,2 @@
+import { CloseManagerHook } from './types';
+export declare const useCloseManager: ({ isOpen, onClose, popupRef, triggerRef, shouldUseCaptureOnOutsideClick: capture, }: CloseManagerHook) => void;

package/dist/types-ts4.0/use-focus-manager.d.ts

@@ -0,0 +1,2 @@
+import { FocusManagerHook } from './types';
+export declare const useFocusManager: ({ popupRef, initialFocusRef, }: FocusManagerHook) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.4.1",
+  "version": "1.5.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,6 +12,13 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "dist/types-ts4.0/*"
+      ]
+    }
+  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
@@ -30,10 +37,10 @@
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
     "focus-trap": "^2.4.5"
   },
@@ -44,25 +51,25 @@
   "devDependencies": {
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/menu": "^1.3.0",
-    "@atlaskit/radio": "^5.3.0",
-    "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.6.0",
+    "@atlaskit/radio": "^5.4.0",
+    "@atlaskit/section-message": "^6.3.0",
+    "@atlaskit/select": "^15.7.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.1.7",
-    "@atlaskit/toggle": "^12.4.4",
+    "@atlaskit/textfield": "^5.3.0",
+    "@atlaskit/toggle": "^12.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@testing-library/dom": "^7.7.3",
-    "@testing-library/react": "^8.0.1",
+    "@testing-library/dom": "^8.17.1",
+    "@testing-library/react": "^12.1.5",
     "ast-types": "^0.13.3",
     "jest-axe": "^4.0.0",
     "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.3.5",
+    "typescript": "4.5.5",
     "wait-for-expect": "^1.2.0"
   },
   "keywords": [

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/popup"
+## API Report File for "@atlaskit/popup".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 import { ComponentType } from 'react';
@@ -9,6 +11,7 @@ import { Dispatch } from 'react';
 import { FC } from 'react';
 import { Placement } from '@atlaskit/popper';
 import { PopperChildrenProps } from '@atlaskit/popper';
+import { default as React_2 } from 'react';
 import { ReactNode } from 'react';
 import { Ref } from 'react';
 import { SetStateAction } from 'react';
@@ -22,7 +25,7 @@ declare interface BaseProps {
   /**
    * Render props for content that is displayed inside the popup.
    */
-  content: (props: ContentProps) => React.ReactNode;
+  content: (props: ContentProps) => React_2.ReactNode;
   /**
    * Id that is assigned to the popup container element.
    */
@@ -71,7 +74,7 @@ declare interface BaseProps {
    * Generally this will be either when clicking away from the popup or pressing the escape key.
    * You'll want to use this to set open state accordingly and then pump it back into the `isOpen` prop.
    */
-  onClose?(): void;
+  onClose?(event: Event | React_2.MouseEvent | React_2.KeyboardEvent): void;
   /**
    * The element that is shown when `isOpen` prop is `true`.
    * The result of the `content` prop will be placed as children here.
@@ -104,7 +107,7 @@ export declare interface ContentProps {
   /**
    * Passed through from the parent popup.
    */
-  onClose: (() => void) | undefined;
+  onClose?: BaseProps['onClose'];
   /**
    * Escape hatch to set the initial focus for a specific element when the popup is opened.
    */
@@ -152,7 +155,7 @@ export declare interface PopupProps extends BaseProps {
    * Make this an interactive element,
    * such as an `@atlaskit/button` component.
    */
-  trigger: (props: TriggerProps) => React.ReactNode;
+  trigger: (props: TriggerProps) => React_2.ReactNode;
   /**
    * Z-index that the popup should be displayed in.
    * This is passed to the portal component.

package/types/package.json

@@ -4,5 +4,12 @@
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
   "sideEffects": false,
-  "types": "../dist/types/types.d.ts"
+  "types": "../dist/types/types.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/types.d.ts"
+      ]
+    }
+  }
 }