@atlaskit/popup 5.1.5 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/popup
 
+## 5.2.0
+
+### Minor Changes
+
+- [`3f6f3bd7da074`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f6f3bd7da074) -
+  Updates usage of the Top Layer primitives to consume changes to animation API.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.1.6
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.1.5
 
 ### Patch Changes

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

@@ -1,4 +1,4 @@
-/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -187,7 +187,7 @@ function PopupContentTopLayer(_ref) {
     ref: popoverRef
   }, roleProps, {
     isOpen: isOpen,
-    animate: true,
+    shouldAnimate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
     testId: testId && "".concat(testId, "--content")

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PopupContent = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _layering = require("@atlaskit/layering");
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _layering = require("@atlaskit/layering/layering");
+var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
@@ -87,7 +87,7 @@ var PopupContent = exports.PopupContent = function PopupContent(_ref) {
   // Safe conditional hook: feature flags are resolved once at startup.
   if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
       isOpen: isOpen,
       onClose: handleOpenLayerObserverCloseSignal,
       type: 'popup'

package/dist/cjs/popper-wrapper.compiled.css

@@ -1,4 +1,3 @@
-
 ._1r04idpf{inset:0}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}

package/dist/cjs/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -16,7 +16,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _runtime = require("@compiled/react/runtime");
-var _layering = require("@atlaskit/layering");
+var _useLayering2 = require("@atlaskit/layering/use-layering");
 var _motion = require("@atlaskit/motion");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
@@ -174,7 +174,7 @@ function PopperWrapper(_ref) {
     shouldDisableFocusTrap: shouldDisableFocusTrap,
     shouldRenderToParent: shouldRenderToParent
   });
-  var _useLayering = (0, _layering.useLayering)(),
+  var _useLayering = (0, _useLayering2.useLayering)(),
     currentLevel = _useLayering.currentLevel;
   var mergedModifiers = (0, _react.useMemo)(function () {
     return [{

package/dist/cjs/popup-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -232,7 +232,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
-    animate: true,
+    shouldAnimate: true,
     placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {

package/dist/cjs/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup.tsx generated by @compiled/babel-plugin v0.40.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -13,8 +13,8 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _useId = require("@atlaskit/ds-lib/use-id");
-var _layering = require("@atlaskit/layering");
-var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _layering = require("@atlaskit/layering/layering");
+var _useNotifyOpenLayerObserver = require("@atlaskit/layering/use-notify-open-layer-observer");
 var _exitingPersistence = _interopRequireDefault(require("@atlaskit/motion/exiting-persistence"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
@@ -95,7 +95,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (props) {
   // Safe conditional hook: feature flags are resolved once at startup.
   if (!(0, _platformFeatureFlags.fg)('platform-dst-top-layer')) {
     // eslint-disable-next-line react-hooks/rules-of-hooks
-    (0, _openLayerObserver.useNotifyOpenLayerObserver)({
+    (0, _useNotifyOpenLayerObserver.useNotifyOpenLayerObserver)({
       isOpen: isOpen,
       onClose: handleOpenLayerObserverCloseSignal,
       type: 'popup'

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

@@ -8,7 +8,7 @@ exports.useCloseManager = void 0;
 var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _layering = require("@atlaskit/layering");
+var _useLayering2 = require("@atlaskit/layering/use-layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _isElementInteractive = require("./utils/is-element-interactive");
 var _useAnimationFrame2 = require("./utils/use-animation-frame");
@@ -25,7 +25,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
     shouldIgnoreCloseEvent = _ref.shouldIgnoreCloseEvent,
     shouldCloseOnTab = _ref.shouldCloseOnTab,
     shouldRenderToParent = _ref.shouldRenderToParent;
-  var _useLayering = (0, _layering.useLayering)(),
+  var _useLayering = (0, _useLayering2.useLayering)(),
     isLayerDisabled = _useLayering.isLayerDisabled,
     currentLevel = _useLayering.currentLevel;
   var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),

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

@@ -8,7 +8,7 @@ exports.useFocusManager = void 0;
 var _react = require("react");
 var _focusTrap = _interopRequireDefault(require("focus-trap"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _layering = require("@atlaskit/layering");
+var _useLayering2 = require("@atlaskit/layering/use-layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useAnimationFrame2 = require("./utils/use-animation-frame");
 var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
@@ -23,7 +23,7 @@ var useFocusManager = exports.useFocusManager = function useFocusManager(_ref) {
   var _useAnimationFrame = (0, _useAnimationFrame2.useAnimationFrame)(),
     requestFrame = _useAnimationFrame.requestFrame,
     cancelAllFrames = _useAnimationFrame.cancelAllFrames;
-  var _useLayering = (0, _layering.useLayering)(),
+  var _useLayering = (0, _useLayering2.useLayering)(),
     currentLevel = _useLayering.currentLevel;
   (0, _react.useEffect)(function () {
     if (!popupRef || shouldCloseOnTab) {

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

@@ -1,4 +1,4 @@
-/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-content-top-layer.compiled.css";
 import * as React from 'react';
@@ -195,7 +195,7 @@ export function PopupContentTopLayer({
     ref: popoverRef
   }, roleProps, {
     isOpen: isOpen,
-    animate: true,
+    shouldAnimate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
     testId: testId && `${testId}--content`

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
-import { Layering } from '@atlaskit/layering';
-import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { Layering } from '@atlaskit/layering/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import PopperWrapper from '../popper-wrapper';

package/dist/es2019/popper-wrapper.compiled.css

@@ -1,4 +1,3 @@
-
 ._1r04idpf{inset:0}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}

package/dist/es2019/popper-wrapper.js

@@ -1,10 +1,10 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popper-wrapper.compiled.css";
 import * as React from 'react';
 import { forwardRef, Fragment, useMemo, useState } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
-import { useLayering } from '@atlaskit/layering';
+import { useLayering } from '@atlaskit/layering/use-layering';
 import { Motion } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';

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

@@ -1,4 +1,4 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';
@@ -242,7 +242,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
-    animate: true,
+    shouldAnimate: true,
     placement: topLayerPlacement,
     testId: testId && `${testId}--content`
   }), Container ? /*#__PURE__*/React.createElement(Container, {

package/dist/es2019/popup.js

@@ -1,12 +1,12 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup.tsx generated by @compiled/babel-plugin v0.40.0 */
 /* eslint-disable @repo/internal/react/require-jsdoc */
 import "./popup.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { memo, useCallback, 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 { Layering } from '@atlaskit/layering/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';

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

@@ -2,7 +2,7 @@
 import { useEffect, useRef } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
-import { useLayering } from '@atlaskit/layering';
+import { useLayering } from '@atlaskit/layering/use-layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { isInteractiveElement } from './utils/is-element-interactive';
 import { useAnimationFrame } from './utils/use-animation-frame';

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
-import { useLayering } from '@atlaskit/layering';
+import { useLayering } from '@atlaskit/layering/use-layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnimationFrame } from './utils/use-animation-frame';
 export const useFocusManager = ({

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

@@ -1,4 +1,4 @@
-/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup-content-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-content-top-layer.compiled.css";
 import * as React from 'react';
@@ -178,7 +178,7 @@ export function PopupContentTopLayer(_ref) {
     ref: popoverRef
   }, roleProps, {
     isOpen: isOpen,
-    animate: true,
+    shouldAnimate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
     testId: testId && "".concat(testId, "--content")

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext } from 'react';
-import { Layering } from '@atlaskit/layering';
-import { useNotifyOpenLayerObserver } from '@atlaskit/layering/experimental/open-layer-observer';
+import { Layering } from '@atlaskit/layering/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import PopperWrapper from '../popper-wrapper';

package/dist/esm/popper-wrapper.compiled.css

@@ -1,4 +1,3 @@
-
 ._1r04idpf{inset:0}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
 ._2rko1mok{border-radius:var(--ds-radius-large,8px)}

package/dist/esm/popper-wrapper.js

@@ -1,4 +1,4 @@
-/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popper-wrapper.tsx generated by @compiled/babel-plugin v0.40.0 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -11,7 +11,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { forwardRef, Fragment, useMemo, useState } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
-import { useLayering } from '@atlaskit/layering';
+import { useLayering } from '@atlaskit/layering/use-layering';
 import { Motion } from '@atlaskit/motion';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Popper } from '@atlaskit/popper';

package/dist/esm/popup-top-layer.js

@@ -1,4 +1,4 @@
-/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup-top-layer.tsx generated by @compiled/babel-plugin v0.40.0 */
 import _extends from "@babel/runtime/helpers/extends";
 import "./popup-top-layer.compiled.css";
 import * as React from 'react';
@@ -223,7 +223,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
-    animate: true,
+    shouldAnimate: true,
     placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {

package/dist/esm/popup.js

@@ -1,4 +1,4 @@
-/* popup.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* popup.tsx generated by @compiled/babel-plugin v0.40.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./popup.compiled.css";
 import * as React from 'react';
@@ -7,8 +7,8 @@ import { ax, ix } from "@compiled/react/runtime";
 
 import { memo, useCallback, 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 { Layering } from '@atlaskit/layering/layering';
+import { useNotifyOpenLayerObserver } from '@atlaskit/layering/use-notify-open-layer-observer';
 import ExitingPersistence from '@atlaskit/motion/exiting-persistence';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';

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

@@ -2,7 +2,7 @@
 import { useEffect, useRef } from 'react';
 import { bind, bindAll } from 'bind-event-listener';
 import noop from '@atlaskit/ds-lib/noop';
-import { useLayering } from '@atlaskit/layering';
+import { useLayering } from '@atlaskit/layering/use-layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { isInteractiveElement } from './utils/is-element-interactive';
 import { useAnimationFrame } from './utils/use-animation-frame';

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

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import createFocusTrap from 'focus-trap';
 import noop from '@atlaskit/ds-lib/noop';
-import { useLayering } from '@atlaskit/layering';
+import { useLayering } from '@atlaskit/layering/use-layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { useAnimationFrame } from './utils/use-animation-frame';
 export var useFocusManager = function useFocusManager(_ref) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "5.1.5",
+	"version": "5.2.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,17 +33,17 @@
 	"dependencies": {
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/layering": "^4.1.0",
-		"@atlaskit/motion": "^7.3.0",
-		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/popper": "^8.3.0",
+		"@atlaskit/layering": "^5.0.0",
+		"@atlaskit/motion": "^7.5.0",
+		"@atlaskit/platform-feature-flags": "^2.1.0",
+		"@atlaskit/popper": "^8.4.0",
 		"@atlaskit/portal": "^6.1.0",
-		"@atlaskit/primitives": "^22.0.0",
+		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^16.0.0",
-		"@atlaskit/top-layer": "^1.8.0",
+		"@atlaskit/tokens": "^16.3.0",
+		"@atlaskit/top-layer": "^2.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.20.0",
+		"@compiled/react": "^1.0.0",
 		"bind-event-listener": "^3.0.0",
 		"focus-trap": "^2.4.5",
 		"memoize-one": "^6.0.0",
@@ -62,9 +62,9 @@
 		"@atlaskit/docs": "^12.1.0",
 		"@atlaskit/form": "^16.1.0",
 		"@atlaskit/heading": "^6.2.0",
-		"@atlaskit/icon": "^37.0.0",
+		"@atlaskit/icon": "^37.2.0",
 		"@atlaskit/link": "^4.3.0",
-		"@atlaskit/modal-dialog": "^16.1.0",
+		"@atlaskit/modal-dialog": "^16.2.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/toggle": "^17.1.0",