@atlaskit/popup 1.15.1 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/popup
 
+## 1.16.0
+
+### Minor Changes
+
+-   [#95249](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/95249)
+    [`039491355ada`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/039491355ada) -
+    Adds new entry points for an alternate experimental Popup API using composable components. The
+    new exports are prefixed with UNSAFE should only be used after agreement with the Design System
+    team.
+
 ## 1.15.1
 
 ### Patch Changes

package/dist/cjs/compositional/popup.js

@@ -0,0 +1,165 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PopupTrigger = exports.PopupContent = exports.Popup = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _layering = require("@atlaskit/layering");
+var _popper = require("@atlaskit/popper");
+var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+var _constants = require("@atlaskit/theme/constants");
+var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
+var _useGetMemoizedMergedTriggerRef = require("../use-get-memoized-merged-trigger-ref");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
+var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var TriggerRefContext = /*#__PURE__*/(0, _react.createContext)(null);
+var SetTriggerRefContext = /*#__PURE__*/(0, _react.createContext)(_noop.default);
+var EnsureIsInsidePopupContext = /*#__PURE__*/(0, _react.createContext)(false);
+
+// Used to ensure popup sub-components are used within a Popup
+// and provide a useful error message if not.
+var useEnsureIsInsidePopup = function useEnsureIsInsidePopup() {
+  var context = (0, _react.useContext)(EnsureIsInsidePopupContext);
+  (0, _tinyInvariant.default)(context, 'PopupTrigger and PopupContent components must be used within a Popup');
+};
+/**
+ * __Popup__
+ *
+ * Popup is a composable component that provides the context for the trigger and content components.
+ *
+ * Usage example:
+ * ```jsx
+ * <Popup>
+ *   <PopupTrigger>
+ *     {(props) => (
+ *       <button type="button" {...props}>Click me</button>
+ *      )}
+ *   </PopupTrigger>
+ *   <PopupContent>
+ *     {(props) => <div>Hello world</div>}
+ *   </PopupContent>
+ * </Popup>
+ * ```
+ */
+var Popup = exports.Popup = function Popup(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    triggerRef = _useState2[0],
+    setTriggerRef = _useState2[1];
+  return /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
+    value: true
+  }, /*#__PURE__*/_react.default.createElement(IdContext.Provider, {
+    value: id
+  }, /*#__PURE__*/_react.default.createElement(TriggerRefContext.Provider, {
+    value: triggerRef
+  }, /*#__PURE__*/_react.default.createElement(SetTriggerRefContext.Provider, {
+    value: setTriggerRef
+  }, /*#__PURE__*/_react.default.createElement(IsOpenContext.Provider, {
+    value: isOpen
+  }, /*#__PURE__*/_react.default.createElement(_popper.Manager, null, children))))));
+};
+/**
+ * __Popup trigger__
+ *
+ * Popup trigger is the component that renders the trigger for the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref2) {
+  var children = _ref2.children;
+  useEnsureIsInsidePopup();
+  var isOpen = (0, _react.useContext)(IsOpenContext);
+  var id = (0, _react.useContext)(IdContext);
+  var setTriggerRef = (0, _react.useContext)(SetTriggerRefContext);
+  var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
+  return /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref3) {
+    var ref = _ref3.ref;
+    return children({
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+      'aria-controls': id,
+      'aria-expanded': isOpen,
+      'aria-haspopup': true
+    });
+  });
+};
+var defaultLayer = _constants.layers.layer();
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+var PopupContent = exports.PopupContent = function PopupContent(_ref4) {
+  var children = _ref4.children,
+    boundary = _ref4.boundary,
+    offset = _ref4.offset,
+    strategy = _ref4.strategy,
+    onClose = _ref4.onClose,
+    testId = _ref4.testId,
+    _ref4$rootBoundary = _ref4.rootBoundary,
+    rootBoundary = _ref4$rootBoundary === void 0 ? 'viewport' : _ref4$rootBoundary,
+    _ref4$shouldFlip = _ref4.shouldFlip,
+    shouldFlip = _ref4$shouldFlip === void 0 ? true : _ref4$shouldFlip,
+    _ref4$placement = _ref4.placement,
+    placement = _ref4$placement === void 0 ? 'auto' : _ref4$placement,
+    fallbackPlacements = _ref4.fallbackPlacements,
+    popupComponent = _ref4.popupComponent,
+    _ref4$autoFocus = _ref4.autoFocus,
+    autoFocus = _ref4$autoFocus === void 0 ? true : _ref4$autoFocus,
+    _ref4$zIndex = _ref4.zIndex,
+    zIndex = _ref4$zIndex === void 0 ? defaultLayer : _ref4$zIndex,
+    _ref4$shouldUseCaptur = _ref4.shouldUseCaptureOnOutsideClick,
+    shouldUseCaptureOnOutsideClick = _ref4$shouldUseCaptur === void 0 ? false : _ref4$shouldUseCaptur,
+    _ref4$shouldRenderToP = _ref4.shouldRenderToParent,
+    shouldRenderToParent = _ref4$shouldRenderToP === void 0 ? false : _ref4$shouldRenderToP,
+    _ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
+    shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo;
+  useEnsureIsInsidePopup();
+  var isOpen = (0, _react.useContext)(IsOpenContext);
+  var id = (0, _react.useContext)(IdContext);
+  var triggerRef = (0, _react.useContext)(TriggerRefContext);
+  if (!isOpen) {
+    return null;
+  }
+  var popperWrapper = /*#__PURE__*/_react.default.createElement(_layering.UNSAFE_LAYERING, {
+    isDisabled: false
+  }, /*#__PURE__*/_react.default.createElement(_popperWrapper.default, {
+    content: children,
+    isOpen: isOpen,
+    placement: placement,
+    fallbackPlacements: fallbackPlacements,
+    boundary: boundary,
+    rootBoundary: rootBoundary,
+    shouldFlip: shouldFlip,
+    offset: offset,
+    popupComponent: popupComponent,
+    id: id,
+    testId: testId,
+    onClose: onClose,
+    autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
+    triggerRef: triggerRef,
+    strategy: strategy
+  }));
+  if (shouldRenderToParent) {
+    return popperWrapper;
+  }
+  return /*#__PURE__*/_react.default.createElement(_portal.default, {
+    zIndex: zIndex
+  }, popperWrapper);
+};

package/dist/cjs/entry-points/experimental/compositional.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Popup", {
+  enumerable: true,
+  get: function get() {
+    return _popup.Popup;
+  }
+});
+Object.defineProperty(exports, "PopupContent", {
+  enumerable: true,
+  get: function get() {
+    return _popup.PopupContent;
+  }
+});
+Object.defineProperty(exports, "PopupTrigger", {
+  enumerable: true,
+  get: function get() {
+    return _popup.PopupTrigger;
+  }
+});
+var _popup = require("../../compositional/popup");

package/dist/cjs/popup.js

@@ -8,12 +8,12 @@ exports.default = exports.Popup = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _layering = require("@atlaskit/layering");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
 var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
+var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger-ref");
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /** @jsx jsx */
 
@@ -50,33 +50,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-
-  /*
-   * Get a memoized functional ref for use within this Popup's Trigger.
-   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
-   * This is memoized within our component as to not be shared across all Popup instances, just this one.
-   *
-   * This is complex because the inputs are split across three different scopes:
-   *  - `props.isOpen`
-   *  - `useState.setTriggerRef`
-   *  - `renderProps.ref`
-   */
-  var _useState3 = (0, _react.useState)(function () {
-      return (0, _memoizeOne.default)(function (ref, setTriggerRef, isOpen) {
-        return function (node) {
-          if (node && isOpen) {
-            if (typeof ref === 'function') {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-            setTriggerRef(node);
-          }
-        };
-      });
-    }),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
-    getMergedTriggerRef = _useState4[0];
+  var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
   var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: false
   }, (0, _react2.jsx)(_popperWrapper.default, {

package/dist/cjs/use-get-memoized-merged-trigger-ref.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGetMemoizedMergedTriggerRef = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+/*
+ * Get a memoized functional ref for use within a Popup's Trigger.
+ * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+ * This is memoized within a component as to not be shared across all Popup instances.
+ *
+ * This is complex because the inputs are split across three different scopes:
+ *  - `props.isOpen`
+ *  - `useState.setTriggerRef`
+ *  - `renderProps.ref`
+ */
+var useGetMemoizedMergedTriggerRef = exports.useGetMemoizedMergedTriggerRef = function useGetMemoizedMergedTriggerRef() {
+  var _useState = (0, _react.useState)(function () {
+      return (0, _memoizeOne.default)(function (ref, setTriggerRef, isOpen) {
+        return function (node) {
+          if (node && isOpen) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    getMemoizedMergedTriggerRef = _useState2[0];
+  return getMemoizedMergedTriggerRef;
+};

package/dist/es2019/compositional/popup.js

@@ -0,0 +1,144 @@
+import React, { createContext, useContext, useState } from 'react';
+import invariant from 'tiny-invariant';
+import noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { Manager, Reference } from '@atlaskit/popper';
+import Portal from '@atlaskit/portal';
+import { layers } from '@atlaskit/theme/constants';
+import PopperWrapper from '../popper-wrapper';
+import { useGetMemoizedMergedTriggerRef } from '../use-get-memoized-merged-trigger-ref';
+const IsOpenContext = /*#__PURE__*/createContext(false);
+const IdContext = /*#__PURE__*/createContext(undefined);
+const TriggerRefContext = /*#__PURE__*/createContext(null);
+const SetTriggerRefContext = /*#__PURE__*/createContext(noop);
+const EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
+
+// Used to ensure popup sub-components are used within a Popup
+// and provide a useful error message if not.
+const useEnsureIsInsidePopup = () => {
+  const context = useContext(EnsureIsInsidePopupContext);
+  invariant(context, 'PopupTrigger and PopupContent components must be used within a Popup');
+};
+/**
+ * __Popup__
+ *
+ * Popup is a composable component that provides the context for the trigger and content components.
+ *
+ * Usage example:
+ * ```jsx
+ * <Popup>
+ *   <PopupTrigger>
+ *     {(props) => (
+ *       <button type="button" {...props}>Click me</button>
+ *      )}
+ *   </PopupTrigger>
+ *   <PopupContent>
+ *     {(props) => <div>Hello world</div>}
+ *   </PopupContent>
+ * </Popup>
+ * ```
+ */
+export const Popup = ({
+  children,
+  id,
+  isOpen = false
+}) => {
+  const [triggerRef, setTriggerRef] = useState(null);
+  return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(IdContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement(TriggerRefContext.Provider, {
+    value: triggerRef
+  }, /*#__PURE__*/React.createElement(SetTriggerRefContext.Provider, {
+    value: setTriggerRef
+  }, /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
+    value: isOpen
+  }, /*#__PURE__*/React.createElement(Manager, null, children))))));
+};
+/**
+ * __Popup trigger__
+ *
+ * Popup trigger is the component that renders the trigger for the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export const PopupTrigger = ({
+  children
+}) => {
+  useEnsureIsInsidePopup();
+  const isOpen = useContext(IsOpenContext);
+  const id = useContext(IdContext);
+  const setTriggerRef = useContext(SetTriggerRefContext);
+  const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  return /*#__PURE__*/React.createElement(Reference, null, ({
+    ref
+  }) => children({
+    ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+    'aria-controls': id,
+    'aria-expanded': isOpen,
+    'aria-haspopup': true
+  }));
+};
+const defaultLayer = layers.layer();
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export const PopupContent = ({
+  children,
+  boundary,
+  offset,
+  strategy,
+  onClose,
+  testId,
+  rootBoundary = 'viewport',
+  shouldFlip = true,
+  placement = 'auto',
+  fallbackPlacements,
+  popupComponent,
+  autoFocus = true,
+  zIndex = defaultLayer,
+  shouldUseCaptureOnOutsideClick = false,
+  shouldRenderToParent = false,
+  shouldDisableFocusLock = false
+}) => {
+  useEnsureIsInsidePopup();
+  const isOpen = useContext(IsOpenContext);
+  const id = useContext(IdContext);
+  const triggerRef = useContext(TriggerRefContext);
+  if (!isOpen) {
+    return null;
+  }
+  const popperWrapper = /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+    content: children,
+    isOpen: isOpen,
+    placement: placement,
+    fallbackPlacements: fallbackPlacements,
+    boundary: boundary,
+    rootBoundary: rootBoundary,
+    shouldFlip: shouldFlip,
+    offset: offset,
+    popupComponent: popupComponent,
+    id: id,
+    testId: testId,
+    onClose: onClose,
+    autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
+    triggerRef: triggerRef,
+    strategy: strategy
+  }));
+  if (shouldRenderToParent) {
+    return popperWrapper;
+  }
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: zIndex
+  }, popperWrapper);
+};

package/dist/es2019/entry-points/experimental/compositional.js

@@ -0,0 +1 @@
+export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';

package/dist/es2019/popup.js

@@ -2,12 +2,12 @@
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import memoizeOne from 'memoize-one';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
+import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 const defaultLayer = layers.layer();
 export const Popup = /*#__PURE__*/memo(({
   isOpen,
@@ -31,29 +31,7 @@ export const Popup = /*#__PURE__*/memo(({
   strategy
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
-
-  /*
-   * Get a memoized functional ref for use within this Popup's Trigger.
-   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
-   * This is memoized within our component as to not be shared across all Popup instances, just this one.
-   *
-   * This is complex because the inputs are split across three different scopes:
-   *  - `props.isOpen`
-   *  - `useState.setTriggerRef`
-   *  - `renderProps.ref`
-   */
-  const [getMergedTriggerRef] = useState(() => memoizeOne((ref, setTriggerRef, isOpen) => {
-    return node => {
-      if (node && isOpen) {
-        if (typeof ref === 'function') {
-          ref(node);
-        } else if (ref) {
-          ref.current = node;
-        }
-        setTriggerRef(node);
-      }
-    };
-  }));
+  const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
   }, jsx(PopperWrapper, {

package/dist/es2019/use-get-memoized-merged-trigger-ref.js

@@ -0,0 +1,28 @@
+import { useState } from 'react';
+import memoizeOne from 'memoize-one';
+
+/*
+ * Get a memoized functional ref for use within a Popup's Trigger.
+ * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+ * This is memoized within a component as to not be shared across all Popup instances.
+ *
+ * This is complex because the inputs are split across three different scopes:
+ *  - `props.isOpen`
+ *  - `useState.setTriggerRef`
+ *  - `renderProps.ref`
+ */
+export const useGetMemoizedMergedTriggerRef = () => {
+  const [getMemoizedMergedTriggerRef] = useState(() => memoizeOne((ref, setTriggerRef, isOpen) => {
+    return node => {
+      if (node && isOpen) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        setTriggerRef(node);
+      }
+    };
+  }));
+  return getMemoizedMergedTriggerRef;
+};

package/dist/esm/compositional/popup.js

@@ -0,0 +1,155 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useContext, useState } from 'react';
+import invariant from 'tiny-invariant';
+import noop from '@atlaskit/ds-lib/noop';
+import { UNSAFE_LAYERING } from '@atlaskit/layering';
+import { Manager, Reference } from '@atlaskit/popper';
+import Portal from '@atlaskit/portal';
+import { layers } from '@atlaskit/theme/constants';
+import PopperWrapper from '../popper-wrapper';
+import { useGetMemoizedMergedTriggerRef } from '../use-get-memoized-merged-trigger-ref';
+var IsOpenContext = /*#__PURE__*/createContext(false);
+var IdContext = /*#__PURE__*/createContext(undefined);
+var TriggerRefContext = /*#__PURE__*/createContext(null);
+var SetTriggerRefContext = /*#__PURE__*/createContext(noop);
+var EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);
+
+// Used to ensure popup sub-components are used within a Popup
+// and provide a useful error message if not.
+var useEnsureIsInsidePopup = function useEnsureIsInsidePopup() {
+  var context = useContext(EnsureIsInsidePopupContext);
+  invariant(context, 'PopupTrigger and PopupContent components must be used within a Popup');
+};
+/**
+ * __Popup__
+ *
+ * Popup is a composable component that provides the context for the trigger and content components.
+ *
+ * Usage example:
+ * ```jsx
+ * <Popup>
+ *   <PopupTrigger>
+ *     {(props) => (
+ *       <button type="button" {...props}>Click me</button>
+ *      )}
+ *   </PopupTrigger>
+ *   <PopupContent>
+ *     {(props) => <div>Hello world</div>}
+ *   </PopupContent>
+ * </Popup>
+ * ```
+ */
+export var Popup = function Popup(_ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    _ref$isOpen = _ref.isOpen,
+    isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    triggerRef = _useState2[0],
+    setTriggerRef = _useState2[1];
+  return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(IdContext.Provider, {
+    value: id
+  }, /*#__PURE__*/React.createElement(TriggerRefContext.Provider, {
+    value: triggerRef
+  }, /*#__PURE__*/React.createElement(SetTriggerRefContext.Provider, {
+    value: setTriggerRef
+  }, /*#__PURE__*/React.createElement(IsOpenContext.Provider, {
+    value: isOpen
+  }, /*#__PURE__*/React.createElement(Manager, null, children))))));
+};
+/**
+ * __Popup trigger__
+ *
+ * Popup trigger is the component that renders the trigger for the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export var PopupTrigger = function PopupTrigger(_ref2) {
+  var children = _ref2.children;
+  useEnsureIsInsidePopup();
+  var isOpen = useContext(IsOpenContext);
+  var id = useContext(IdContext);
+  var setTriggerRef = useContext(SetTriggerRefContext);
+  var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  return /*#__PURE__*/React.createElement(Reference, null, function (_ref3) {
+    var ref = _ref3.ref;
+    return children({
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+      'aria-controls': id,
+      'aria-expanded': isOpen,
+      'aria-haspopup': true
+    });
+  });
+};
+var defaultLayer = layers.layer();
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export var PopupContent = function PopupContent(_ref4) {
+  var children = _ref4.children,
+    boundary = _ref4.boundary,
+    offset = _ref4.offset,
+    strategy = _ref4.strategy,
+    onClose = _ref4.onClose,
+    testId = _ref4.testId,
+    _ref4$rootBoundary = _ref4.rootBoundary,
+    rootBoundary = _ref4$rootBoundary === void 0 ? 'viewport' : _ref4$rootBoundary,
+    _ref4$shouldFlip = _ref4.shouldFlip,
+    shouldFlip = _ref4$shouldFlip === void 0 ? true : _ref4$shouldFlip,
+    _ref4$placement = _ref4.placement,
+    placement = _ref4$placement === void 0 ? 'auto' : _ref4$placement,
+    fallbackPlacements = _ref4.fallbackPlacements,
+    popupComponent = _ref4.popupComponent,
+    _ref4$autoFocus = _ref4.autoFocus,
+    autoFocus = _ref4$autoFocus === void 0 ? true : _ref4$autoFocus,
+    _ref4$zIndex = _ref4.zIndex,
+    zIndex = _ref4$zIndex === void 0 ? defaultLayer : _ref4$zIndex,
+    _ref4$shouldUseCaptur = _ref4.shouldUseCaptureOnOutsideClick,
+    shouldUseCaptureOnOutsideClick = _ref4$shouldUseCaptur === void 0 ? false : _ref4$shouldUseCaptur,
+    _ref4$shouldRenderToP = _ref4.shouldRenderToParent,
+    shouldRenderToParent = _ref4$shouldRenderToP === void 0 ? false : _ref4$shouldRenderToP,
+    _ref4$shouldDisableFo = _ref4.shouldDisableFocusLock,
+    shouldDisableFocusLock = _ref4$shouldDisableFo === void 0 ? false : _ref4$shouldDisableFo;
+  useEnsureIsInsidePopup();
+  var isOpen = useContext(IsOpenContext);
+  var id = useContext(IdContext);
+  var triggerRef = useContext(TriggerRefContext);
+  if (!isOpen) {
+    return null;
+  }
+  var popperWrapper = /*#__PURE__*/React.createElement(UNSAFE_LAYERING, {
+    isDisabled: false
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+    content: children,
+    isOpen: isOpen,
+    placement: placement,
+    fallbackPlacements: fallbackPlacements,
+    boundary: boundary,
+    rootBoundary: rootBoundary,
+    shouldFlip: shouldFlip,
+    offset: offset,
+    popupComponent: popupComponent,
+    id: id,
+    testId: testId,
+    onClose: onClose,
+    autoFocus: autoFocus,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
+    triggerRef: triggerRef,
+    strategy: strategy
+  }));
+  if (shouldRenderToParent) {
+    return popperWrapper;
+  }
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: zIndex
+  }, popperWrapper);
+};

package/dist/esm/entry-points/experimental/compositional.js

@@ -0,0 +1 @@
+export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';

package/dist/esm/popup.js

@@ -3,12 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
-import memoizeOne from 'memoize-one';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
+import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
 var defaultLayer = layers.layer();
 export var Popup = /*#__PURE__*/memo(function (_ref) {
   var isOpen = _ref.isOpen,
@@ -42,33 +42,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-
-  /*
-   * Get a memoized functional ref for use within this Popup's Trigger.
-   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
-   * This is memoized within our component as to not be shared across all Popup instances, just this one.
-   *
-   * This is complex because the inputs are split across three different scopes:
-   *  - `props.isOpen`
-   *  - `useState.setTriggerRef`
-   *  - `renderProps.ref`
-   */
-  var _useState3 = useState(function () {
-      return memoizeOne(function (ref, setTriggerRef, isOpen) {
-        return function (node) {
-          if (node && isOpen) {
-            if (typeof ref === 'function') {
-              ref(node);
-            } else if (ref) {
-              ref.current = node;
-            }
-            setTriggerRef(node);
-          }
-        };
-      });
-    }),
-    _useState4 = _slicedToArray(_useState3, 1),
-    getMergedTriggerRef = _useState4[0];
+  var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
   }, jsx(PopperWrapper, {

package/dist/esm/use-get-memoized-merged-trigger-ref.js

@@ -0,0 +1,33 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+import memoizeOne from 'memoize-one';
+
+/*
+ * Get a memoized functional ref for use within a Popup's Trigger.
+ * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+ * This is memoized within a component as to not be shared across all Popup instances.
+ *
+ * This is complex because the inputs are split across three different scopes:
+ *  - `props.isOpen`
+ *  - `useState.setTriggerRef`
+ *  - `renderProps.ref`
+ */
+export var useGetMemoizedMergedTriggerRef = function useGetMemoizedMergedTriggerRef() {
+  var _useState = useState(function () {
+      return memoizeOne(function (ref, setTriggerRef, isOpen) {
+        return function (node) {
+          if (node && isOpen) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    getMemoizedMergedTriggerRef = _useState2[0];
+  return getMemoizedMergedTriggerRef;
+};

package/dist/types/compositional/popup.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { type ContentProps, type PopupProps as LegacyPopupProps, type TriggerProps } from '../types';
+export type PopupProps = {
+    children: React.ReactNode;
+    isOpen?: boolean;
+    id?: string;
+};
+/**
+ * __Popup__
+ *
+ * Popup is a composable component that provides the context for the trigger and content components.
+ *
+ * Usage example:
+ * ```jsx
+ * <Popup>
+ *   <PopupTrigger>
+ *     {(props) => (
+ *       <button type="button" {...props}>Click me</button>
+ *      )}
+ *   </PopupTrigger>
+ *   <PopupContent>
+ *     {(props) => <div>Hello world</div>}
+ *   </PopupContent>
+ * </Popup>
+ * ```
+ */
+export declare const Popup: ({ children, id, isOpen }: PopupProps) => JSX.Element;
+export type PopupTriggerProps = {
+    children: (props: TriggerProps) => React.ReactNode;
+};
+/**
+ * __Popup trigger__
+ *
+ * Popup trigger is the component that renders the trigger for the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
+export type PopupContentProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'strategy' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldUseCaptureOnOutsideClick' | 'shouldRenderToParent' | 'shouldDisableFocusLock' | 'zIndex'> & {
+    children: (props: ContentProps) => React.ReactNode;
+};
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopupContentProps) => JSX.Element | null;

package/dist/types/entry-points/experimental/compositional.d.ts

@@ -0,0 +1,2 @@
+export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';
+export type { PopupProps, PopupContentProps, PopupTriggerProps, } from '../../compositional/popup';

package/dist/types/use-get-memoized-merged-trigger-ref.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;

package/dist/types-ts4.5/compositional/popup.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { type ContentProps, type PopupProps as LegacyPopupProps, type TriggerProps } from '../types';
+export type PopupProps = {
+    children: React.ReactNode;
+    isOpen?: boolean;
+    id?: string;
+};
+/**
+ * __Popup__
+ *
+ * Popup is a composable component that provides the context for the trigger and content components.
+ *
+ * Usage example:
+ * ```jsx
+ * <Popup>
+ *   <PopupTrigger>
+ *     {(props) => (
+ *       <button type="button" {...props}>Click me</button>
+ *      )}
+ *   </PopupTrigger>
+ *   <PopupContent>
+ *     {(props) => <div>Hello world</div>}
+ *   </PopupContent>
+ * </Popup>
+ * ```
+ */
+export declare const Popup: ({ children, id, isOpen }: PopupProps) => JSX.Element;
+export type PopupTriggerProps = {
+    children: (props: TriggerProps) => React.ReactNode;
+};
+/**
+ * __Popup trigger__
+ *
+ * Popup trigger is the component that renders the trigger for the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupTrigger: ({ children }: PopupTriggerProps) => JSX.Element;
+export type PopupContentProps = Pick<LegacyPopupProps, 'boundary' | 'offset' | 'strategy' | 'onClose' | 'testId' | 'placement' | 'fallbackPlacements' | 'popupComponent' | 'shouldFlip' | 'rootBoundary' | 'autoFocus' | 'shouldUseCaptureOnOutsideClick' | 'shouldRenderToParent' | 'shouldDisableFocusLock' | 'zIndex'> & {
+    children: (props: ContentProps) => React.ReactNode;
+};
+/**
+ * __Popup content__
+ *
+ * Popup content is the component that renders the content of the popup.
+ *
+ * It must be a child of the Popup component.
+ */
+export declare const PopupContent: ({ children, boundary, offset, strategy, onClose, testId, rootBoundary, shouldFlip, placement, fallbackPlacements, popupComponent, autoFocus, zIndex, shouldUseCaptureOnOutsideClick, shouldRenderToParent, shouldDisableFocusLock, }: PopupContentProps) => JSX.Element | null;

package/dist/types-ts4.5/entry-points/experimental/compositional.d.ts

@@ -0,0 +1,2 @@
+export { Popup, PopupContent, PopupTrigger } from '../../compositional/popup';
+export type { PopupProps, PopupContentProps, PopupTriggerProps, } from '../../compositional/popup';

package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref.d.ts

@@ -0,0 +1,2 @@
+import { Dispatch, SetStateAction } from 'react';
+export declare const useGetMemoizedMergedTriggerRef: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>, isOpen: boolean) => (node: HTMLElement | null) => void>;

package/experimental/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/popup/experimental",
+  "main": "../dist/cjs/entry-points/experimental/compositional.js",
+  "module": "../dist/esm/entry-points/experimental/compositional.js",
+  "module:es2019": "../dist/es2019/entry-points/experimental/compositional.js",
+  "sideEffects": false,
+  "types": "../dist/types/entry-points/experimental/compositional.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.4": {
+      "*": [
+        "../dist/types-ts4.5/entry-points/experimental/compositional.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,8 @@
   "atlaskit:src": "src/index.tsx",
   "af:exports": {
     ".": "./src/index.tsx",
-    "./types": "./src/types.tsx"
+    "./types": "./src/types.tsx",
+    "./experimental": "./src/entry-points/experimental/compositional.tsx"
   },
   "atlassian": {
     "team": "Design System Team",
@@ -45,12 +46,13 @@
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.44.0",
+    "@atlaskit/tokens": "^1.45.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^3.0.0",
     "focus-trap": "^2.4.5",
-    "memoize-one": "^6.0.0"
+    "memoize-one": "^6.0.0",
+    "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ~18.2.0",
@@ -68,6 +70,7 @@
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
+    "@testing-library/user-event": "^14.4.3",
     "ast-types": "^0.13.3",
     "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",