@atlaskit/popup 4.16.4 → 4.16.6

package/dist/es2019/compositional/popup-content.js

@@ -0,0 +1,107 @@
+import React, { useCallback, useContext } from 'react';
+import { Layering } from '@atlaskit/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import Portal from '@atlaskit/portal';
+import PopperWrapper from '../popper-wrapper';
+import { usePopupAppearance } from '../use-appearance';
+import { IdContext } from './id-context';
+import { IsOpenContext } from './is-open-context';
+import { TriggerRefContext } from './trigger-ref-context';
+import { useEnsureIsInsidePopup } from './use-ensure-is-inside-popup';
+const defaultLayer = 400;
+const shouldDisableGpuAccelerationModifiers = [{
+  name: 'computeStyles',
+  options: {
+    gpuAcceleration: false
+  }
+}];
+/**
+ * __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 = ({
+  xcss,
+  appearance: inAppearance = 'default',
+  children,
+  boundary,
+  offset,
+  strategy,
+  onClose,
+  testId,
+  rootBoundary = 'viewport',
+  shouldFlip = true,
+  placement = 'auto',
+  fallbackPlacements,
+  popupComponent,
+  autoFocus = true,
+  zIndex = defaultLayer,
+  shouldUseCaptureOnOutsideClick = false,
+  shouldRenderToParent: inShouldRenderToParent,
+  shouldDisableFocusLock = false,
+  shouldFitContainer,
+  shouldFitViewport,
+  shouldDisableGpuAcceleration = false,
+  role,
+  titleId
+}) => {
+  useEnsureIsInsidePopup();
+  const isOpen = useContext(IsOpenContext);
+  const id = useContext(IdContext);
+  const triggerRef = useContext(TriggerRefContext);
+  const {
+    appearance,
+    shouldRenderToParent
+  } = usePopupAppearance({
+    appearance: inAppearance,
+    shouldRenderToParent: inShouldRenderToParent
+  });
+  const handleOpenLayerObserverCloseSignal = useCallback(() => {
+    onClose === null || onClose === void 0 ? void 0 : onClose(null);
+  }, [onClose]);
+  useNotifyOpenLayerObserver({
+    isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
+  if (!isOpen) {
+    return null;
+  }
+  const popperWrapper = /*#__PURE__*/React.createElement(Layering, {
+    isDisabled: false
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+    xcss: xcss,
+    appearance: appearance,
+    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,
+    shouldFitContainer: shouldFitContainer,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
+    triggerRef: triggerRef,
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport,
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
+  }));
+  if (shouldRenderToParent) {
+    return popperWrapper;
+  }
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: zIndex
+  }, popperWrapper);
+};

package/dist/es2019/compositional/popup-trigger.js

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Reference } from '@atlaskit/popper';
+import { useGetMemoizedMergedTriggerRefNew } from '../use-get-memoized-merged-trigger-ref-new';
+import { IdContext } from './id-context';
+import { IsOpenContext } from './is-open-context';
+import { RoleContext } from './role-context';
+import { SetTriggerRefContext } from './set-trigger-ref-context';
+import { useEnsureIsInsidePopup } from './use-ensure-is-inside-popup';
+/**
+ * __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 id = useContext(IdContext);
+  const setTriggerRef = useContext(SetTriggerRefContext);
+  const isOpen = useContext(IsOpenContext);
+  const getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
+  const role = useContext(RoleContext);
+  return /*#__PURE__*/React.createElement(Reference, null, ({
+    ref
+  }) => children({
+    ref: getMergedTriggerRef(ref, setTriggerRef),
+    'aria-controls': id,
+    'aria-expanded': isOpen,
+    'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
+  }));
+};

package/dist/es2019/compositional/popup.js

@@ -1,28 +1,12 @@
-import React, { createContext, useCallback, useContext, useState } from 'react';
-import invariant from 'tiny-invariant';
-import noop from '@atlaskit/ds-lib/noop';
+import React, { useState } from 'react';
 import { useId } from '@atlaskit/ds-lib/use-id';
-import { Layering } from '@atlaskit/layering';
-import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { Manager, Reference } from '@atlaskit/popper';
-import Portal from '@atlaskit/portal';
-import PopperWrapper from '../popper-wrapper';
-import { usePopupAppearance } from '../use-appearance';
-import { useGetMemoizedMergedTriggerRefNew } from '../use-get-memoized-merged-trigger-ref-new';
-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);
-const RoleContext = /*#__PURE__*/createContext(undefined);
-
-// 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');
-};
+import { Manager } from '@atlaskit/popper';
+import { IdContext } from './id-context';
+import { EnsureIsInsidePopupContext } from './is-inside-popup-context';
+import { IsOpenContext } from './is-open-context';
+import { RoleContext } from './role-context';
+import { SetTriggerRefContext } from './set-trigger-ref-context';
+import { TriggerRefContext } from './trigger-ref-context';
 /**
  * __Popup__
  *
@@ -64,133 +48,4 @@ export const Popup = ({
   }, /*#__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 id = useContext(IdContext);
-  const setTriggerRef = useContext(SetTriggerRefContext);
-  const isOpen = useContext(IsOpenContext);
-  const getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
-  const role = useContext(RoleContext);
-  return /*#__PURE__*/React.createElement(Reference, null, ({
-    ref
-  }) => children({
-    ref: getMergedTriggerRef(ref, setTriggerRef),
-    'aria-controls': id,
-    'aria-expanded': isOpen,
-    'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
-  }));
-};
-const defaultLayer = 400;
-/**
- * Disables popper.js GPU acceleration for this popup.
- * This means only positioning will be used, without any transforms.
- *
- * Performance will be degraded if the popup is expected to move.
- */
-const shouldDisableGpuAccelerationModifiers = [{
-  name: 'computeStyles',
-  options: {
-    gpuAcceleration: false
-  }
-}];
-
-/**
- * __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 = ({
-  xcss,
-  appearance: inAppearance = 'default',
-  children,
-  boundary,
-  offset,
-  strategy,
-  onClose,
-  testId,
-  rootBoundary = 'viewport',
-  shouldFlip = true,
-  placement = 'auto',
-  fallbackPlacements,
-  popupComponent,
-  autoFocus = true,
-  zIndex = defaultLayer,
-  shouldUseCaptureOnOutsideClick = false,
-  shouldRenderToParent: inShouldRenderToParent,
-  shouldDisableFocusLock = false,
-  shouldFitContainer,
-  shouldFitViewport,
-  shouldDisableGpuAcceleration = false,
-  role,
-  titleId
-}) => {
-  useEnsureIsInsidePopup();
-  const isOpen = useContext(IsOpenContext);
-  const id = useContext(IdContext);
-  const triggerRef = useContext(TriggerRefContext);
-  const {
-    appearance,
-    shouldRenderToParent
-  } = usePopupAppearance({
-    appearance: inAppearance,
-    shouldRenderToParent: inShouldRenderToParent
-  });
-  const handleOpenLayerObserverCloseSignal = useCallback(() => {
-    onClose === null || onClose === void 0 ? void 0 : onClose(null);
-  }, [onClose]);
-  useNotifyOpenLayerObserver({
-    isOpen,
-    onClose: handleOpenLayerObserverCloseSignal,
-    type: 'popup'
-  });
-  if (!isOpen) {
-    return null;
-  }
-  const popperWrapper = /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(PopperWrapper, {
-    xcss: xcss,
-    appearance: appearance,
-    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,
-    shouldFitContainer: shouldFitContainer,
-    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
-    shouldRenderToParent: shouldRenderToParent,
-    shouldDisableFocusLock: shouldDisableFocusLock,
-    triggerRef: triggerRef,
-    strategy: strategy,
-    shouldFitViewport: shouldFitViewport,
-    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
-    role: role,
-    titleId: titleId
-  }));
-  if (shouldRenderToParent) {
-    return popperWrapper;
-  }
-  return /*#__PURE__*/React.createElement(Portal, {
-    zIndex: zIndex
-  }, popperWrapper);
 };

package/dist/es2019/compositional/role-context.js

@@ -0,0 +1,3 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+import { createContext } from 'react';
+export const RoleContext = /*#__PURE__*/createContext(undefined);

package/dist/es2019/compositional/set-trigger-ref-context.js

@@ -0,0 +1,4 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+import { createContext } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+export const SetTriggerRefContext = /*#__PURE__*/createContext(noop);

package/dist/es2019/compositional/trigger-ref-context.js

@@ -0,0 +1,3 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
+import { createContext } from 'react';
+export const TriggerRefContext = /*#__PURE__*/createContext(null);

package/dist/es2019/compositional/use-ensure-is-inside-popup.js

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import invariant from 'tiny-invariant';
+import { EnsureIsInsidePopupContext } from './is-inside-popup-context';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export function useEnsureIsInsidePopup() {
+  const context = useContext(EnsureIsInsidePopupContext);
+  invariant(context, 'PopupTrigger and PopupContent components must be used within a Popup');
+}

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

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

package/dist/es2019/popper-wrapper.js

@@ -28,52 +28,52 @@ const focusRingStyles = {
 };
 const placementMap = {
   top: {
-    enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'top-start': {
-    enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'top-end': {
-    enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-top, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInTop8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-top, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutTop8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   bottom: {
-    enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'bottom-start': {
-    enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'bottom-end': {
-    enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-bottom, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInBottom8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-bottom, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutBottom8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   left: {
-    enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'left-start': {
-    enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'left-end': {
-    enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-left, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInLeft8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-left, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutLeft8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   right: {
-    enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'right-start': {
-    enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   },
   'right-end': {
-    enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn)",
-    exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut)"
+    enter: "var(--ds-popup-enter-right, 150ms cubic-bezier(0.4, 1, 0.6, 1) SlideInRight8px, 150ms cubic-bezier(0.4, 1, 0.6, 1) FadeIn0to100)",
+    exit: "var(--ds-popup-exit-right, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) SlideOutRight8px, 100ms cubic-bezier(0.6, 0, 0.8, 0.6) FadeOut100to0)"
   }
 };
 const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {

package/dist/esm/compositional/id-context.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+/* eslint-disable @repo/internal/react/require-jsdoc */
+export var IdContext = /*#__PURE__*/createContext(undefined);

package/dist/esm/compositional/is-inside-popup-context.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Ensure is inside popup context__
+ *
+ * An ensure is inside popup context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export var EnsureIsInsidePopupContext = /*#__PURE__*/createContext(false);

package/dist/esm/compositional/is-open-context.js

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
+// Remove links that the component does not have (such as usage). If there are no links remove them all.
+/**
+ * __Is open context__
+ *
+ * An is open context {description}.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [Code](https://atlassian.design/components/{packageName}/code)
+ * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ */
+export var IsOpenContext = /*#__PURE__*/createContext(false);

package/dist/esm/compositional/popup-content.js

@@ -0,0 +1,114 @@
+import React, { useCallback, useContext } from 'react';
+import { Layering } from '@atlaskit/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import Portal from '@atlaskit/portal';
+import PopperWrapper from '../popper-wrapper';
+import { usePopupAppearance } from '../use-appearance';
+import { IdContext } from './id-context';
+import { IsOpenContext } from './is-open-context';
+import { TriggerRefContext } from './trigger-ref-context';
+import { useEnsureIsInsidePopup } from './use-ensure-is-inside-popup';
+var defaultLayer = 400;
+var shouldDisableGpuAccelerationModifiers = [{
+  name: 'computeStyles',
+  options: {
+    gpuAcceleration: false
+  }
+}];
+/**
+ * __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(_ref) {
+  var xcss = _ref.xcss,
+    _ref$appearance = _ref.appearance,
+    inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    children = _ref.children,
+    boundary = _ref.boundary,
+    offset = _ref.offset,
+    strategy = _ref.strategy,
+    onClose = _ref.onClose,
+    testId = _ref.testId,
+    _ref$rootBoundary = _ref.rootBoundary,
+    rootBoundary = _ref$rootBoundary === void 0 ? 'viewport' : _ref$rootBoundary,
+    _ref$shouldFlip = _ref.shouldFlip,
+    shouldFlip = _ref$shouldFlip === void 0 ? true : _ref$shouldFlip,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
+    fallbackPlacements = _ref.fallbackPlacements,
+    popupComponent = _ref.popupComponent,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? true : _ref$autoFocus,
+    _ref$zIndex = _ref.zIndex,
+    zIndex = _ref$zIndex === void 0 ? defaultLayer : _ref$zIndex,
+    _ref$shouldUseCapture = _ref.shouldUseCaptureOnOutsideClick,
+    shouldUseCaptureOnOutsideClick = _ref$shouldUseCapture === void 0 ? false : _ref$shouldUseCapture,
+    inShouldRenderToParent = _ref.shouldRenderToParent,
+    _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
+    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
+    shouldFitContainer = _ref.shouldFitContainer,
+    shouldFitViewport = _ref.shouldFitViewport,
+    _ref$shouldDisableGpu = _ref.shouldDisableGpuAcceleration,
+    shouldDisableGpuAcceleration = _ref$shouldDisableGpu === void 0 ? false : _ref$shouldDisableGpu,
+    role = _ref.role,
+    titleId = _ref.titleId;
+  useEnsureIsInsidePopup();
+  var isOpen = useContext(IsOpenContext);
+  var id = useContext(IdContext);
+  var triggerRef = useContext(TriggerRefContext);
+  var _usePopupAppearance = usePopupAppearance({
+      appearance: inAppearance,
+      shouldRenderToParent: inShouldRenderToParent
+    }),
+    appearance = _usePopupAppearance.appearance,
+    shouldRenderToParent = _usePopupAppearance.shouldRenderToParent;
+  var handleOpenLayerObserverCloseSignal = useCallback(function () {
+    onClose === null || onClose === void 0 || onClose(null);
+  }, [onClose]);
+  useNotifyOpenLayerObserver({
+    isOpen: isOpen,
+    onClose: handleOpenLayerObserverCloseSignal,
+    type: 'popup'
+  });
+  if (!isOpen) {
+    return null;
+  }
+  var popperWrapper = /*#__PURE__*/React.createElement(Layering, {
+    isDisabled: false
+  }, /*#__PURE__*/React.createElement(PopperWrapper, {
+    xcss: xcss,
+    appearance: appearance,
+    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,
+    shouldFitContainer: shouldFitContainer,
+    shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+    shouldRenderToParent: shouldRenderToParent,
+    shouldDisableFocusLock: shouldDisableFocusLock,
+    triggerRef: triggerRef,
+    strategy: strategy,
+    shouldFitViewport: shouldFitViewport,
+    modifiers: shouldDisableGpuAcceleration ? shouldDisableGpuAccelerationModifiers : undefined,
+    role: role,
+    titleId: titleId
+  }));
+  if (shouldRenderToParent) {
+    return popperWrapper;
+  }
+  return /*#__PURE__*/React.createElement(Portal, {
+    zIndex: zIndex
+  }, popperWrapper);
+};

package/dist/esm/compositional/popup-trigger.js

@@ -0,0 +1,34 @@
+import React, { useContext } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Reference } from '@atlaskit/popper';
+import { useGetMemoizedMergedTriggerRefNew } from '../use-get-memoized-merged-trigger-ref-new';
+import { IdContext } from './id-context';
+import { IsOpenContext } from './is-open-context';
+import { RoleContext } from './role-context';
+import { SetTriggerRefContext } from './set-trigger-ref-context';
+import { useEnsureIsInsidePopup } from './use-ensure-is-inside-popup';
+/**
+ * __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(_ref) {
+  var children = _ref.children;
+  useEnsureIsInsidePopup();
+  var id = useContext(IdContext);
+  var setTriggerRef = useContext(SetTriggerRefContext);
+  var isOpen = useContext(IsOpenContext);
+  var getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew();
+  var role = useContext(RoleContext);
+  return /*#__PURE__*/React.createElement(Reference, null, function (_ref2) {
+    var ref = _ref2.ref;
+    return children({
+      ref: getMergedTriggerRef(ref, setTriggerRef),
+      'aria-controls': id,
+      'aria-expanded': isOpen,
+      'aria-haspopup': role === 'dialog' && fg('platform_dst_nav4_flyout_menu_slots_close_button') ? 'dialog' : true
+    });
+  });
+};