@atlaskit/popup 1.3.8 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/popup
 
+## 1.4.0
+
+### Minor Changes
+
+- [`01d80d395bc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/01d80d395bc) - pass event to onOpenChange consistently
+
+### Patch Changes
+
+- [`8202e37941b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8202e37941b) - Internal code change turning on new linting rules.
+- Updated dependencies
+
+## 1.3.10
+
+### Patch Changes
+
+- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+
+## 1.3.9
+
+### Patch Changes
+
+- [`dcf8150c49c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/dcf8150c49c) - Allow `trigger` props to be applied to any HTML element tag without causing type errors for the `ref` type
+
 ## 1.3.8
 
 ### Patch Changes

package/__perf__/popup.tsx

@@ -14,6 +14,7 @@ function PopupStory() {
       trigger={(triggerProps) => (
         //@ts-ignore https://product-fabric.atlassian.net/browse/DST-1866
         <button
+          type="button"
           data-testid="popup-trigger"
           {...triggerProps}
           onClick={() => setIsOpen(!isOpen)}

package/codemods/__tests__/{1.0.0-lite-mode.ts → 1.0.0-lite-mode.tsx}

@@ -1,5 +1,7 @@
 jest.autoMockOff();
 
+import noop from '@atlaskit/ds-lib/noop';
+
 import transformer from '../1.0.0-lite-mode';
 
 const applyTransform = require('jscodeshift/dist/testUtils').applyTransform;
@@ -13,8 +15,6 @@ type TestArgs = {
   after?: () => void;
 };
 
-function noop() {}
-
 function check({
   it: name,
   original,
@@ -45,12 +45,12 @@ function check({
 }
 
 /**
- - `boundariesElement` has been replaced with two props: `boundary` and `rootBoundary`. The three supported values
-  from the boundariesElement prop have been split between the two as follows:
- - `boundariesElement="scrollParents"` has been renamed: use `boundary="clippingParents"`.
- - `boundariesElement="window"` has been renamed: use `rootBoundary="document"`, and acts in a similar fashion.
- - `boundariesElement="viewport"` has been moved: use `rootBoundary="viewport"`.
-*/
+ * - `boundariesElement` has been replaced with two props: `boundary` and `rootBoundary`. The three supported values
+ *  from the boundariesElement prop have been split between the two as follows:
+ * - `boundariesElement="scrollParents"` has been renamed: use `boundary="clippingParents"`.
+ * - `boundariesElement="window"` has been renamed: use `rootBoundary="document"`, and acts in a similar fashion.
+ * - `boundariesElement="viewport"` has been moved: use `rootBoundary="viewport"`.
+ */
 
 describe('Convert boundaries props', () => {
   check({
@@ -179,8 +179,8 @@ describe('Convert boundaries props', () => {
 
 describe('Convert offset props', () => {
   /**
-    `offset` prop is no longer a string, but an array of two integers (i.e. '0px 8px' is now [0, 8])
-  */
+   * `offset` prop is no longer a string, but an array of two integers (i.e. '0px 8px' is now [0, 8])
+   */
   check({
     it: 'should convert offset from a string to an array of two integers',
     original: `
@@ -315,9 +315,8 @@ describe('Convert offset props', () => {
     `,
   });
   /**
-    If a user is passing in an offset with vh, vw or % in the offset
-    Let them know that's no longer supported
-  */
+   * If a user is passing in an offset with vh, vw or % in the offset, let them know that's no longer supported
+   */
   check({
     it: 'should warn users using vh, vw or % in the offset',
     original: `
@@ -362,9 +361,8 @@ describe('Convert offset props', () => {
   });
 
   /**
-    If a user is passing in a variable for offset then we should leave a comment to
-    update it themselves
-  */
+   * If a user is passing in a variable for offset then we should leave a comment to update it themselves
+   */
   check({
     it: 'warn users passing in a variable for an offset',
     original: `
@@ -490,9 +488,10 @@ describe('Convert offset props', () => {
   });
 });
 
-/** Render Props:
-   - `scheduleUpdate`, for async updates, has been renamed to `update`, and now returns a Promise.
-  */
+/**
+ * Render Props:
+ * - `scheduleUpdate`, for async updates, has been renamed to `update`, and now returns a Promise.
+ */
 describe('Convert render props', () => {
   check({
     it: 'should rename schedulUpdate to `update`',

package/dist/cjs/index.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "Popup", {
   enumerable: true,
   get: function get() {
-    return _Popup.Popup;
+    return _popup.Popup;
   }
 });
 exports.default = void 0;
 
-var _Popup = require("./Popup");
+var _popup = require("./popup");
 
-var _default = _Popup.Popup;
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var _default = _popup.Popup;
 exports.default = _default;

package/dist/cjs/{PopperWrapper.js → popper-wrapper.js}

@@ -21,11 +21,11 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _RepositionOnUpdate = require("./RepositionOnUpdate");
+var _repositionOnUpdate = require("./reposition-on-update");
 
-var _useCloseManager = require("./useCloseManager");
+var _useCloseManager = require("./use-close-manager");
 
-var _useFocusManager = require("./useFocusManager");
+var _useFocusManager = require("./use-focus-manager");
 
 /** @jsx jsx */
 var popupStyles = (0, _core.css)({
@@ -128,7 +128,7 @@ function PopperWrapper(_ref) {
       // first on the browser address bar when using keyboard
       ,
       tabIndex: autoFocus ? 0 : undefined
-    }, (0, _core.jsx)(_RepositionOnUpdate.RepositionOnUpdate, {
+    }, (0, _core.jsx)(_repositionOnUpdate.RepositionOnUpdate, {
       update: update
     }, content({
       update: update,
@@ -137,7 +137,8 @@ function PopperWrapper(_ref) {
       setInitialFocusRef: setInitialFocusRef
     })));
   });
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 var _default = PopperWrapper;
 exports.default = _default;

package/dist/cjs/{Popup.js → popup.js}

@@ -19,7 +19,9 @@ var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 
 var _constants = require("@atlaskit/theme/constants");
 
-var _PopperWrapper = _interopRequireDefault(require("./PopperWrapper"));
+var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
+
+/* eslint-disable @repo/internal/react/require-jsdoc */
 
 /** @jsx jsx */
 var defaultLayer = _constants.layers.layer();
@@ -73,7 +75,7 @@ var Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     });
   }), isOpen && (0, _core.jsx)(_portal.default, {
     zIndex: zIndex
-  }, (0, _core.jsx)(_PopperWrapper.default, {
+  }, (0, _core.jsx)(_popperWrapper.default, {
     content: content,
     isOpen: isOpen,
     placement: placement,

package/dist/cjs/{RepositionOnUpdate.js → reposition-on-update.js}

@@ -13,6 +13,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
   var children = _ref.children,
       update = _ref.update;

package/dist/cjs/{useCloseManager.js → use-close-manager.js}

@@ -22,9 +22,9 @@ var useCloseManager = function useCloseManager(_ref) {
       return noop;
     }
 
-    var closePopup = function closePopup() {
+    var closePopup = function closePopup(event) {
       if (onClose) {
-        onClose();
+        onClose(event);
       }
     }; // This check is required for cases where components like
     // Select or DDM are placed inside a Popup. A click
@@ -35,8 +35,8 @@ var useCloseManager = function useCloseManager(_ref) {
     // https://codesandbox.io/s/atlaskitpopup-default-forked-2eb87?file=/example.tsx:0-1788
 
 
-    var onClick = function onClick(_ref2) {
-      var target = _ref2.target;
+    var onClick = function onClick(event) {
+      var target = event.target;
       var doesDomNodeExist = document.body.contains(target);
 
       if (!doesDomNodeExist) {
@@ -47,7 +47,7 @@ var useCloseManager = function useCloseManager(_ref) {
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
 
       if (!isClickOnPopup && !isClickOnTrigger) {
-        closePopup();
+        closePopup(event);
       }
     };
 
@@ -55,7 +55,7 @@ var useCloseManager = function useCloseManager(_ref) {
       var key = event.key;
 
       if (key === 'Escape' || key === 'Esc') {
-        closePopup();
+        closePopup(event);
       }
     };
 

package/dist/cjs/{useFocusManager.js → use-focus-manager.js}

@@ -11,14 +11,14 @@ var _react = require("react");
 
 var _focusTrap = _interopRequireDefault(require("focus-trap"));
 
-var noop = function noop() {};
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
       initialFocusRef = _ref.initialFocusRef;
   (0, _react.useEffect)(function () {
     if (!popupRef) {
-      return noop;
+      return _noop.default;
     }
 
     var trapConfig = {

package/dist/cjs/version.json

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

package/dist/es2019/index.js

@@ -1,3 +1,4 @@
-import { Popup } from './Popup';
-export { Popup };
+import { Popup } from './popup';
+export { Popup }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Popup;

package/dist/es2019/{PopperWrapper.js → popper-wrapper.js}

@@ -6,9 +6,9 @@ import { css, jsx } from '@emotion/core';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, layers } from '@atlaskit/theme/constants';
-import { RepositionOnUpdate } from './RepositionOnUpdate';
-import { useCloseManager } from './useCloseManager';
-import { useFocusManager } from './useFocusManager';
+import { RepositionOnUpdate } from './reposition-on-update';
+import { useCloseManager } from './use-close-manager';
+import { useFocusManager } from './use-focus-manager';
 const popupStyles = css({
   display: 'block',
   boxSizing: 'border-box',
@@ -104,6 +104,7 @@ function PopperWrapper({
       setInitialFocusRef
     })));
   });
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default PopperWrapper;

package/dist/es2019/{Popup.js → popup.js}

@@ -1,10 +1,12 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/core';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
-import PopperWrapper from './PopperWrapper';
+import PopperWrapper from './popper-wrapper';
 const defaultLayer = layers.layer();
 export const Popup = /*#__PURE__*/memo(({
   isOpen,

package/dist/es2019/{RepositionOnUpdate.js → reposition-on-update.js}

@@ -1,4 +1,5 @@
 import React, { Fragment, useLayoutEffect, useRef } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const RepositionOnUpdate = ({
   children,
   update

package/dist/es2019/{useCloseManager.js → use-close-manager.js}

@@ -15,9 +15,9 @@ export const useCloseManager = ({
       return noop;
     }
 
-    const closePopup = () => {
+    const closePopup = event => {
       if (onClose) {
-        onClose();
+        onClose(event);
       }
     }; // This check is required for cases where components like
     // Select or DDM are placed inside a Popup. A click
@@ -28,9 +28,10 @@ export const useCloseManager = ({
     // https://codesandbox.io/s/atlaskitpopup-default-forked-2eb87?file=/example.tsx:0-1788
 
 
-    const onClick = ({
-      target
-    }) => {
+    const onClick = event => {
+      const {
+        target
+      } = event;
       const doesDomNodeExist = document.body.contains(target);
 
       if (!doesDomNodeExist) {
@@ -41,7 +42,7 @@ export const useCloseManager = ({
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);
 
       if (!isClickOnPopup && !isClickOnTrigger) {
-        closePopup();
+        closePopup(event);
       }
     };
 
@@ -51,7 +52,7 @@ export const useCloseManager = ({
       } = event;
 
       if (key === 'Escape' || key === 'Esc') {
-        closePopup();
+        closePopup(event);
       }
     };
 

package/dist/es2019/{useFocusManager.js → use-focus-manager.js}

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
-
-const noop = () => {};
-
+import noop from '@atlaskit/ds-lib/noop';
 export const useFocusManager = ({
   popupRef,
   initialFocusRef

package/dist/es2019/version.json

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

package/dist/esm/index.js

@@ -1,3 +1,4 @@
-import { Popup } from './Popup';
-export { Popup };
+import { Popup } from './popup';
+export { Popup }; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 export default Popup;

package/dist/esm/{PopperWrapper.js → popper-wrapper.js}

@@ -7,9 +7,9 @@ import { css, jsx } from '@emotion/core';
 import { Popper } from '@atlaskit/popper';
 import { N0, N50A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, layers } from '@atlaskit/theme/constants';
-import { RepositionOnUpdate } from './RepositionOnUpdate';
-import { useCloseManager } from './useCloseManager';
-import { useFocusManager } from './useFocusManager';
+import { RepositionOnUpdate } from './reposition-on-update';
+import { useCloseManager } from './use-close-manager';
+import { useFocusManager } from './use-focus-manager';
 var popupStyles = css({
   display: 'block',
   boxSizing: 'border-box',
@@ -119,6 +119,7 @@ function PopperWrapper(_ref) {
       setInitialFocusRef: setInitialFocusRef
     })));
   });
-}
+} // eslint-disable-next-line @repo/internal/react/require-jsdoc
+
 
 export default PopperWrapper;

package/dist/esm/{Popup.js → popup.js}

@@ -1,12 +1,14 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
+/* eslint-disable @repo/internal/react/require-jsdoc */
+
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/core';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
-import PopperWrapper from './PopperWrapper';
+import PopperWrapper from './popper-wrapper';
 var defaultLayer = layers.layer();
 export var Popup = /*#__PURE__*/memo(function (_ref) {
   var isOpen = _ref.isOpen,

package/dist/esm/{RepositionOnUpdate.js → reposition-on-update.js}

@@ -1,4 +1,5 @@
 import React, { Fragment, useLayoutEffect, useRef } from 'react';
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
   var children = _ref.children,
       update = _ref.update;

package/dist/esm/{useCloseManager.js → use-close-manager.js}

@@ -14,9 +14,9 @@ export var useCloseManager = function useCloseManager(_ref) {
       return noop;
     }
 
-    var closePopup = function closePopup() {
+    var closePopup = function closePopup(event) {
       if (onClose) {
-        onClose();
+        onClose(event);
       }
     }; // This check is required for cases where components like
     // Select or DDM are placed inside a Popup. A click
@@ -27,8 +27,8 @@ export var useCloseManager = function useCloseManager(_ref) {
     // https://codesandbox.io/s/atlaskitpopup-default-forked-2eb87?file=/example.tsx:0-1788
 
 
-    var onClick = function onClick(_ref2) {
-      var target = _ref2.target;
+    var onClick = function onClick(event) {
+      var target = event.target;
       var doesDomNodeExist = document.body.contains(target);
 
       if (!doesDomNodeExist) {
@@ -39,7 +39,7 @@ export var useCloseManager = function useCloseManager(_ref) {
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
 
       if (!isClickOnPopup && !isClickOnTrigger) {
-        closePopup();
+        closePopup(event);
       }
     };
 
@@ -47,7 +47,7 @@ export var useCloseManager = function useCloseManager(_ref) {
       var key = event.key;
 
       if (key === 'Escape' || key === 'Esc') {
-        closePopup();
+        closePopup(event);
       }
     };
 

package/dist/esm/{useFocusManager.js → use-focus-manager.js}

@@ -1,8 +1,6 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
-
-var noop = function noop() {};
-
+import noop from '@atlaskit/ds-lib/noop';
 export var useFocusManager = function useFocusManager(_ref) {
   var popupRef = _ref.popupRef,
       initialFocusRef = _ref.initialFocusRef;

package/dist/esm/version.json

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

package/dist/types/index.d.ts

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

package/dist/types/types.d.ts

@@ -1,7 +1,7 @@
-import { ComponentType, CSSProperties, Dispatch, ReactNode, Ref, SetStateAction } from 'react';
+import React, { ComponentType, CSSProperties, Dispatch, ReactNode, Ref, SetStateAction } from 'react';
 import { Placement, PopperChildrenProps } from '@atlaskit/popper';
 export interface TriggerProps {
-    ref: Ref<HTMLElement>;
+    ref: Ref<any>;
     'aria-controls'?: string;
     'aria-expanded': boolean;
     'aria-haspopup': boolean;
@@ -21,7 +21,7 @@ export 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.
      */
@@ -115,7 +115,7 @@ 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.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.

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.3.8",
+  "version": "1.4.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -13,26 +13,28 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "af:exports": {
-    ".": "./src/index.ts",
-    "./types": "./src/types.ts"
+    ".": "./src/index.tsx",
+    "./types": "./src/types.tsx"
   },
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Popup"
+      "name": "Popup",
+      "category": "Components"
     }
   },
   "dependencies": {
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/popper": "^5.0.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
-    "bind-event-listener": "^2.1.0",
+    "bind-event-listener": "^2.1.1",
     "focus-trap": "^2.4.5"
   },
   "peerDependencies": {
@@ -46,7 +48,7 @@
     "@atlaskit/menu": "^1.3.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/section-message": "^6.1.0",
-    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/select": "^15.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/textfield": "^5.1.7",
     "@atlaskit/toggle": "^12.4.4",
@@ -73,6 +75,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",

package/report.api.md

@@ -0,0 +1,172 @@
+## API Report File for "@atlaskit/popup"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+import { ComponentType } from 'react';
+import { CSSProperties } from 'react';
+import { Dispatch } from 'react';
+import { FC } from 'react';
+import { Placement } from '@atlaskit/popper';
+import { PopperChildrenProps } from '@atlaskit/popper';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+import { SetStateAction } from 'react';
+
+declare 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?(): 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 declare 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: (() => void) | undefined;
+  /**
+   * Escape hatch to set the initial focus for a specific element when the popup is opened.
+   */
+  setInitialFocusRef: Dispatch<SetStateAction<HTMLElement | null>>;
+}
+
+declare const Popup: FC<PopupProps>;
+export { Popup };
+export default Popup;
+
+export declare 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;
+}
+
+export declare 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 declare interface TriggerProps {
+  ref: Ref<any>;
+  'aria-controls'?: string;
+  'aria-expanded': boolean;
+  'aria-haspopup': boolean;
+}
+
+export {};
+```