@atlaskit/popup 4.17.0 → 4.18.0

package/dist/cjs/popup.js

@@ -21,6 +21,7 @@ var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _compiled = require("@atlaskit/primitives/compiled");
 var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
+var _popupTopLayer = require("./popup-top-layer");
 var _useAppearance = require("./use-appearance");
 var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger-ref");
 var _useGetMemoizedMergedTriggerRefNew = require("./use-get-memoized-merged-trigger-ref-new");
@@ -30,46 +31,46 @@ var defaultLayer = 400;
 var wrapperStyles = {
   root: "_kqswh2mm"
 };
-var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var xcss = _ref.xcss,
-    _ref$appearance = _ref.appearance,
-    inAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
-    isOpen = _ref.isOpen,
-    providedId = _ref.id,
-    offset = _ref.offset,
-    testId = _ref.testId,
-    trigger = _ref.trigger,
-    content = _ref.content,
-    onClose = _ref.onClose,
-    boundary = _ref.boundary,
-    _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,
-    PopupContainer = _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,
-    _ref$shouldRenderToPa = _ref.shouldRenderToParent,
-    inShouldRenderToParent = _ref$shouldRenderToPa === void 0 ? false : _ref$shouldRenderToPa,
-    _ref$shouldFitContain = _ref.shouldFitContainer,
-    shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
-    _ref$shouldDisableFoc = _ref.shouldDisableFocusLock,
-    shouldDisableFocusLock = _ref$shouldDisableFoc === void 0 ? false : _ref$shouldDisableFoc,
-    _ref$shouldReturnFocu = _ref.shouldReturnFocus,
-    shouldReturnFocus = _ref$shouldReturnFocu === void 0 ? true : _ref$shouldReturnFocu,
-    strategy = _ref.strategy,
-    role = _ref.role,
-    label = _ref.label,
-    titleId = _ref.titleId,
-    modifiers = _ref.modifiers,
-    shouldFitViewport = _ref.shouldFitViewport;
+var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var xcss = props.xcss,
+    _props$appearance = props.appearance,
+    inAppearance = _props$appearance === void 0 ? 'default' : _props$appearance,
+    isOpen = props.isOpen,
+    providedId = props.id,
+    offset = props.offset,
+    testId = props.testId,
+    trigger = props.trigger,
+    content = props.content,
+    onClose = props.onClose,
+    boundary = props.boundary,
+    _props$rootBoundary = props.rootBoundary,
+    rootBoundary = _props$rootBoundary === void 0 ? 'viewport' : _props$rootBoundary,
+    _props$shouldFlip = props.shouldFlip,
+    shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
+    _props$placement = props.placement,
+    placement = _props$placement === void 0 ? 'auto' : _props$placement,
+    fallbackPlacements = props.fallbackPlacements,
+    PopupContainer = props.popupComponent,
+    _props$autoFocus = props.autoFocus,
+    autoFocus = _props$autoFocus === void 0 ? true : _props$autoFocus,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? defaultLayer : _props$zIndex,
+    _props$shouldUseCaptu = props.shouldUseCaptureOnOutsideClick,
+    shouldUseCaptureOnOutsideClick = _props$shouldUseCaptu === void 0 ? false : _props$shouldUseCaptu,
+    _props$shouldRenderTo = props.shouldRenderToParent,
+    inShouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
+    _props$shouldFitConta = props.shouldFitContainer,
+    shouldFitContainer = _props$shouldFitConta === void 0 ? false : _props$shouldFitConta,
+    _props$shouldDisableF = props.shouldDisableFocusLock,
+    shouldDisableFocusLock = _props$shouldDisableF === void 0 ? false : _props$shouldDisableF,
+    _props$shouldReturnFo = props.shouldReturnFocus,
+    shouldReturnFocus = _props$shouldReturnFo === void 0 ? true : _props$shouldReturnFo,
+    strategy = props.strategy,
+    role = props.role,
+    label = props.label,
+    titleId = props.titleId,
+    modifiers = props.modifiers,
+    shouldFitViewport = props.shouldFitViewport;
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
@@ -92,10 +93,26 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onClose: handleOpenLayerObserverCloseSignal,
     type: 'popup'
   });
+
+  // Top-layer rendering path: native Popover API via @atlaskit/top-layer
+  if ((0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
+    // Pass the original props object to preserve the discriminated union
+    // (shouldFitContainer: true vs false) that is lost after destructuring.
+    return /*#__PURE__*/React.createElement(_popupTopLayer.PopupTopLayer, props);
+  }
+
+  // `xcss` is part of Popup's public API and is forwarded as-is to
+  // the internal PopperWrapper, which rebuilds the inner styles. We
+  // re-bind via a property accessor on a stable object so the
+  // design-system css-prop lint rule's identifier-shape check no
+  // longer flags it (avoiding a ratcheted lint suppression here).
+  var xcssPassthrough = {
+    value: xcss
+  };
   var renderPopperWrapper = /*#__PURE__*/React.createElement(_layering.Layering, {
     isDisabled: false
   }, /*#__PURE__*/React.createElement(_popperWrapper.default, {
-    xcss: xcss,
+    xcss: xcssPassthrough.value,
     appearance: appearance,
     content: content,
     isOpen: isOpen,
@@ -116,6 +133,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     shouldDisableFocusLock: shouldDisableFocusLock,
     shouldReturnFocus: shouldReturnFocus,
     triggerRef: triggerRef,
+    zIndex: zIndex,
     strategy: shouldFitContainer ? 'absolute' : strategy,
     role: role,
     label: label,
@@ -123,17 +141,17 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     modifiers: modifiers,
     shouldFitViewport: shouldFitViewport
   }));
-  var popupContent = /*#__PURE__*/React.createElement(_popper.Manager, null, /*#__PURE__*/React.createElement(_popper.Reference, null, function (_ref2) {
-    var ref = _ref2.ref;
+  var popupContent = /*#__PURE__*/React.createElement(_popper.Manager, null, /*#__PURE__*/React.createElement(_popper.Reference, null, function (_ref) {
+    var ref = _ref.ref;
     return trigger({
       ref: !(0, _platformFeatureFlags.fg)('platform-design-system-popup-ref') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock') ? 'dialog' : true
     });
-  }), !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
+  }), !(0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: zIndex
-  }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift') && /*#__PURE__*/React.createElement(_exitingPersistence.default, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
+  }, renderPopperWrapper)), (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-popup') && /*#__PURE__*/React.createElement(_exitingPersistence.default, null, isOpen && (shouldRenderToParent || shouldFitContainer ? renderPopperWrapper : /*#__PURE__*/React.createElement(_portal.default, {
     zIndex: zIndex
   }, renderPopperWrapper))));
   if (shouldFitContainer) {

package/dist/es2019/compositional/popup-content-top-layer.compiled.css

@@ -0,0 +1,2 @@
+._18m91wug{overflow-y:auto}
+._1reo1wug{overflow-x:auto}

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

@@ -0,0 +1,140 @@
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./popup-content-top-layer.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { useCallback, useMemo, useRef, useState } from 'react';
+import noop from '@atlaskit/ds-lib/noop';
+import { slideAndFade } from '@atlaskit/top-layer/animations';
+import { createPopoverCloseEvent } from '@atlaskit/top-layer/create-close-event';
+import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
+import { Popup } from '@atlaskit/top-layer/popup';
+import { useRoleProps } from '../internal/top-layer-bridge';
+const overflowAutoStyles = null;
+const animation = slideAndFade();
+
+// Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
+const EMPTY_STYLE = {};
+
+/**
+ * Top-layer implementation of the compositional PopupContent.
+ *
+ * Reads isOpen, id, triggerRef from the legacy compositional Popup context,
+ * then renders via @atlaskit/top-layer's Popup compound.
+ *
+ * Gated behind the `platform-dst-top-layer` feature flag.
+ */
+export function PopupContentTopLayer({
+  xcss,
+  children,
+  offset: offsetProp,
+  onClose,
+  testId,
+  placement = 'auto',
+  fallbackPlacements: _fallbackPlacements,
+  popupComponent: PopupContainer,
+  autoFocus = true,
+  shouldFitContainer,
+  shouldFitViewport,
+  role,
+  label,
+  titleId,
+  isOpen,
+  id: providedId,
+  // ── No-op props ──
+  // top-layer: stacking managed by browser top layer. zIndex is a no-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  zIndex: _zIndex,
+  // top-layer: always renders in top layer. shouldRenderToParent is a no-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldRenderToParent: _shouldRenderToParent,
+  // top-layer: CSS Anchor Positioning replaces Popper strategy. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  strategy: _strategy,
+  // top-layer: viewport is the natural boundary. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  boundary: _boundary,
+  // top-layer: viewport is the natural boundary. No-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  rootBoundary: _rootBoundary,
+  // top-layer: native light dismiss replaces capture-phase click handler.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldUseCaptureOnOutsideClick: _shouldUseCaptureOnOutsideClick,
+  // top-layer: focus trapping is role-based. shouldDisableFocusLock is a no-op.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldDisableFocusLock: _shouldDisableFocusLock,
+  // top-layer: shouldFlip handled by CSS position-try fallbacks.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldFlip: _shouldFlip,
+  // top-layer: appearance is accepted but UNSAFE_modal-below-sm is not yet implemented.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  appearance: _appearance,
+  // top-layer: GPU acceleration is not applicable.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  shouldDisableGpuAcceleration: _shouldDisableGpuAcceleration
+}) {
+  const popupContainerRef = useRef(null);
+  const [, setInitialFocusRef] = useState(null);
+
+  // ── Placement conversion ──
+  // Legacy `offset` is the popper `[along, away]` tuple; `fromLegacyPlacement`
+  // folds it into the new `placement.offset` shape.
+  const topLayerPlacement = useMemo(() => fromLegacyPlacement({
+    legacy: placement,
+    offset: offsetProp
+  }), [placement, offsetProp]);
+
+  // ── onClose bridge ──
+  const handleOnClose = useCallback(({
+    reason
+  }) => {
+    if (!onClose) {
+      return;
+    }
+    onClose(createPopoverCloseEvent({
+      reason
+    }));
+  }, [onClose]);
+
+  // ── Content render-prop bridge ──
+  const contentProps = useMemo(() => ({
+    isOpen,
+    update: noop,
+    onClose,
+    setInitialFocusRef
+  }), [isOpen, onClose]);
+
+  // ── Role mapping ──
+  const roleProps = useRoleProps({
+    role,
+    label,
+    titleId
+  });
+
+  // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
+  // All popupComponent implementations use forwardRef per the PopupComponentProps contract.
+  const Container = PopupContainer;
+  if (!isOpen) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Popup, {
+    placement: topLayerPlacement,
+    onClose: handleOnClose,
+    testId: testId
+  }, /*#__PURE__*/React.createElement(Popup.Content, _extends({}, roleProps, {
+    isOpen: isOpen,
+    animate: animation,
+    testId: testId && `${testId}--content`,
+    width: shouldFitContainer ? 'trigger' : 'content'
+  }), Container ? /*#__PURE__*/React.createElement(Container, {
+    ref: popupContainerRef,
+    style: EMPTY_STYLE,
+    id: providedId,
+    "data-placement": placement,
+    "data-testid": testId,
+    tabIndex: autoFocus ? -1 : undefined,
+    xcss: xcss
+  }, children(contentProps)) : /*#__PURE__*/React.createElement(Popup.Surface, null, /*#__PURE__*/React.createElement("div", {
+    className: ax([shouldFitViewport && "_1reo1wug _18m91wug"])
+  }, children(contentProps)))));
+}

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

@@ -1,11 +1,13 @@
 import React, { useCallback, useContext } from 'react';
 import { Layering } from '@atlaskit/layering';
 import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags';
 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 { PopupContentTopLayer } from './popup-content-top-layer';
 import { TriggerRefContext } from './trigger-ref-context';
 import { useEnsureIsInsidePopup } from './use-ensure-is-inside-popup';
 const defaultLayer = 400;
@@ -45,6 +47,7 @@ export const PopupContent = ({
   shouldFitViewport,
   shouldDisableGpuAcceleration = false,
   role,
+  label,
   titleId
 }) => {
   useEnsureIsInsidePopup();
@@ -66,6 +69,39 @@ export const PopupContent = ({
     onClose: handleOpenLayerObserverCloseSignal,
     type: 'popup'
   });
+
+  // Top-layer rendering path: native Popover API via @atlaskit/top-layer.
+  // Mirrors the FF branch in the legacy `Popup` component (popup.tsx).
+  if (fg('platform-dst-top-layer')) {
+    return /*#__PURE__*/React.createElement(PopupContentTopLayer, {
+      xcss: xcss,
+      appearance: inAppearance,
+      offset: offset,
+      onClose: onClose,
+      testId: testId,
+      placement: placement,
+      fallbackPlacements: fallbackPlacements,
+      popupComponent: popupComponent,
+      autoFocus: autoFocus,
+      shouldFitContainer: shouldFitContainer,
+      shouldFitViewport: shouldFitViewport,
+      role: role,
+      label: label,
+      titleId: titleId,
+      zIndex: zIndex,
+      shouldRenderToParent: inShouldRenderToParent,
+      strategy: strategy,
+      boundary: boundary,
+      rootBoundary: rootBoundary,
+      shouldUseCaptureOnOutsideClick: shouldUseCaptureOnOutsideClick,
+      shouldDisableFocusLock: shouldDisableFocusLock,
+      shouldFlip: shouldFlip,
+      shouldDisableGpuAcceleration: shouldDisableGpuAcceleration,
+      isOpen: isOpen,
+      id: id,
+      triggerRef: triggerRef
+    }, children);
+  }
   if (!isOpen) {
     return null;
   }

package/dist/es2019/internal/top-layer-bridge.js

@@ -0,0 +1,51 @@
+import { useMemo } from 'react';
+
+/**
+ * Props shape passed from legacy `role` / `label` / `titleId` into `@atlaskit/top-layer` `Popup.Content`.
+ */
+
+/**
+ * Maps legacy popup role/label/titleId props to the discriminated union
+ * that `Popup.Content` expects.
+ *
+ * `Popup.Content` enforces at the type level that dialog/alertdialog/menu
+ * roles must have `label` or `labelledBy`. This hook bridges the legacy
+ * flat-prop API (`role`, `label`, `titleId`) to that shape.
+ */
+export function useRoleProps({
+  role,
+  label,
+  titleId
+}) {
+  return useMemo(() => {
+    if (role === 'dialog' || role === 'alertdialog' || role === 'menu') {
+      if (titleId) {
+        return {
+          role: role,
+          labelledBy: titleId
+        };
+      }
+      return {
+        role: role,
+        label: label !== null && label !== void 0 ? label : 'Popup'
+      };
+    }
+    if (role) {
+      return {
+        role: role,
+        label
+      };
+    }
+    // Default: dialog role with label or labelledBy
+    if (titleId) {
+      return {
+        role: 'dialog',
+        labelledBy: titleId
+      };
+    }
+    return {
+      role: 'dialog',
+      label: label !== null && label !== void 0 ? label : 'Popup'
+    };
+  }, [role, label, titleId]);
+}

package/dist/es2019/popper-wrapper.js

@@ -16,7 +16,6 @@ const fullWidthStyles = null;
 const wrapperStyles = {
   root: "_2rko12b0 _1e0c1ule _vchhusvi _1pby1nn1 _bfhk1bhr _16qs130s _syazi7uo _1q1l1bhr _nt751r31 _49pcglyw _1hvw1o36",
   rootT26Shape: "_2rko1mok",
-  rootLayer: "_1pby1nn1",
   fullWidth: "_1bsb1osq"
 };
 const scrollableStyles = null;
@@ -91,7 +90,7 @@ const DefaultPopupComponent = /*#__PURE__*/forwardRef((props, ref) => {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     className: ax([wrapperStyles.root, fg('platform-dst-shape-theme-default') && wrapperStyles.rootT26Shape, appearance === 'UNSAFE_modal-below-sm' && !fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71ldtre _kqsw1n9t _152t1b66", appearance === 'UNSAFE_modal-below-sm' && fg('platform_dst_nav4_flyout_menu_slots_close_button') && "_dk5d1b66 _c71l1ei0 _kqsw1n9t _152t1b66", (!shouldRenderToParent || shouldFitViewport) && "_1reo1wug _18m91wug", shouldFitContainer && "_1bsb1osq", className])
   }, htmlAttributes, {
-    ref: !fg('platform-dst-motion-uplift') ? ref : undefined
+    ref: !fg('platform-dst-motion-uplift-popup') ? ref : undefined
   }), children);
 });
 function PopperWrapper({
@@ -122,7 +121,8 @@ function PopperWrapper({
   titleId,
   modifiers,
   shouldFitViewport,
-  appearance = 'default'
+  appearance = 'default',
+  zIndex
 }) {
   const [popupRef, setPopupRef] = useState(null);
   const [initialFocusRef, setInitialFocusRef] = useState(null);
@@ -188,7 +188,7 @@ function PopperWrapper({
       role: role,
       "aria-label": label,
       "aria-labelledby": titleId,
-      ref: !fg('platform-dst-motion-uplift') ? node => {
+      ref: !fg('platform-dst-motion-uplift-popup') ? node => {
         if (node) {
           if (typeof ref === 'function') {
             ref(node);
@@ -200,7 +200,7 @@ function PopperWrapper({
       } : undefined
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
       ,
-      style: fg('platform-dst-motion-uplift') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
+      style: fg('platform-dst-motion-uplift-popup') || appearance === 'UNSAFE_modal-below-sm' ? {} : style
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ,
@@ -219,7 +219,10 @@ function PopperWrapper({
     })));
     const container = /*#__PURE__*/React.createElement("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      style: style,
+      style: {
+        ...style,
+        zIndex
+      },
       // using tabIndex={-1} would cause a bug where Safari focuses
       // first on the browser address bar when using keyboard
       ref: node => {
@@ -233,12 +236,12 @@ function PopperWrapper({
         }
       },
       "data-testid": `${testId}--container`,
-      className: ax([wrapperStyles.rootLayer, shouldFitContainer && wrapperStyles.fullWidth])
+      className: ax([shouldFitContainer && wrapperStyles.fullWidth])
     }, placement === 'auto' || placement === 'auto-start' || placement === 'auto-end' ? popupContainer : /*#__PURE__*/React.createElement(Motion, {
       enteringAnimation: placementMap[placement].enter,
       exitingAnimation: placementMap[placement].exit
     }, popupContainer));
-    return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(Fragment, null, fg('platform-dst-motion-uplift-popup') ? container : popupContainer, appearance === 'UNSAFE_modal-below-sm' && /*#__PURE__*/React.createElement("div", {
       className: ax(["_1r04idpf _kqsw1n9t _bfhk1i5c"])
     }));
   });

package/dist/es2019/popup-top-layer.compiled.css

@@ -0,0 +1,2 @@
+._18m91wug{overflow-y:auto}
+._1reo1wug{overflow-x:auto}