@atlaskit/popup 5.1.0 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/popup
 
+## 5.1.2
+
+### Patch Changes
+
+- [`7793dc62dd564`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7793dc62dd564) -
+  Internal refactor of upcoming top-layer usage
+- Updated dependencies
+
+## 5.1.1
+
+### Patch Changes
+
+- [`662546a79c2bc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/662546a79c2bc) -
+  Guard the `update()` call in `RepositionOnUpdate` so it is only invoked when the Popper
+  render-prop `update` is a function. On Safari the Popper instance can be undefined when the layout
+  effect fires, which previously threw `TypeError: e.update is not a function` and left consumers
+  (such as the Jira status transition popup) stuck with an indefinite spinner.
+
 ## 5.1.0
 
 ### Minor Changes

package/compass.yml

@@ -0,0 +1,47 @@
+configVersion: 1
+id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/80e5b53f-4a74-4009-bfc1-2c8685b672be
+name: '@atlaskit/popup'
+ownerId: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
+labels:
+  - platform-code
+  - platform-afm
+typeId: OTHER
+fields:
+  tier: 4
+  lifecycle: Active
+  isMonorepoProject: true
+links:
+  - name: Root Repository
+    type: REPOSITORY
+    url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
+  - name: Slack Channel
+    type: CHAT_CHANNEL
+    url: https://atlassian.enterprise.slack.com/archives/CFJ9DU39U # #help-design-system
+  - name: Popup
+    type: REPOSITORY
+    url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/design-system/popup
+customFields:
+  - name: Department
+    type: text
+    value: Eng - Design System Fundamentals
+  - name: Technical Owner
+    type: user
+    value: ari:cloud:identity::user/557058:86a9b692-7997-49cb-9984-080801b1de91 # Jared Crowe
+  - name: Reviewer Team
+    type: text
+    value: ari:cloud:teams::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
+  - name: Required Reviewers Opt In
+    type: boolean
+    value: true
+  - name: Reviewer Selection Mechanism
+    type: text
+    value: random(3)
+  - name: Required Reviewer Approvals
+    type: number
+    value: 1
+  - name: Trusted Committers
+    type: text
+    value: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
+  - name: Trusted Reviewer Teams
+    type: text
+    value: ari:cloud:teams::team/42f4416b-e028-4daa-b2a5-afe213ac75e1 # Design System Designers

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

@@ -13,7 +13,6 @@ var React = _react;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _runtime = require("@compiled/react/runtime");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _animations = require("@atlaskit/top-layer/animations");
 var _placementMap = require("@atlaskit/top-layer/placement-map");
 var _popover = require("@atlaskit/top-layer/popover");
 var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
@@ -23,7 +22,6 @@ var _topLayerBridge = require("../internal/top-layer-bridge");
 var _triggerRefObjectContext = require("./trigger-ref-object-context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var overflowAutoStyles = null;
-var animation = (0, _animations.popupMotion)();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};
@@ -189,7 +187,7 @@ function PopupContentTopLayer(_ref) {
     ref: popoverRef
   }, roleProps, {
     isOpen: isOpen,
-    animate: animation,
+    animate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
     testId: testId && "".concat(testId, "--content")

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

@@ -13,7 +13,6 @@ var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _animations = require("@atlaskit/top-layer/animations");
 var _getAriaForTrigger = require("@atlaskit/top-layer/get-aria-for-trigger");
 var _placementMap = require("@atlaskit/top-layer/placement-map");
 var _popover = require("@atlaskit/top-layer/popover");
@@ -27,7 +26,6 @@ var contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
   default: ""
 };
-var animation = (0, _animations.popupMotion)();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};
@@ -234,7 +232,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
-    animate: animation,
+    animate: true,
     placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {

package/dist/cjs/reposition-on-update.js

@@ -18,8 +18,14 @@ var RepositionOnUpdate = exports.RepositionOnUpdate = function RepositionOnUpdat
       isFirstRenderRef.current = false;
       return;
     }
-    // callback function from popper that repositions pop-up on content Update
-    update();
+    // callback function from popper that repositions pop-up on content Update.
+    // Guard against `update` being undefined: on Safari the Popper instance may
+    // not be fully initialised when this layout effect fires, in which case the
+    // render-prop `update` is undefined and calling it throws
+    // `TypeError: e.update is not a function`.
+    if (typeof update === 'function') {
+      update();
+    }
   }, [update]);
 
   // wrapping in fragment to make TS happy (known issue with FC returning children)

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import noop from '@atlaskit/ds-lib/noop';
-import { popupMotion } from '@atlaskit/top-layer/animations';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -14,7 +13,6 @@ import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from '../internal/top-layer-bridge';
 import { TriggerRefObjectContext } from './trigger-ref-object-context';
 const overflowAutoStyles = null;
-const animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 const EMPTY_STYLE = {};
@@ -197,7 +195,7 @@ export function PopupContentTopLayer({
     ref: popoverRef
   }, roleProps, {
     isOpen: isOpen,
-    animate: animation,
+    animate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
     testId: testId && `${testId}--content`

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { popupMotion } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
@@ -18,7 +17,6 @@ const contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
   default: ""
 };
-const animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 const EMPTY_STYLE = {};
@@ -244,7 +242,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
-    animate: animation,
+    animate: true,
     placement: topLayerPlacement,
     testId: testId && `${testId}--content`
   }), Container ? /*#__PURE__*/React.createElement(Container, {

package/dist/es2019/reposition-on-update.js

@@ -11,8 +11,14 @@ export const RepositionOnUpdate = ({
       isFirstRenderRef.current = false;
       return;
     }
-    // callback function from popper that repositions pop-up on content Update
-    update();
+    // callback function from popper that repositions pop-up on content Update.
+    // Guard against `update` being undefined: on Safari the Popper instance may
+    // not be fully initialised when this layout effect fires, in which case the
+    // render-prop `update` is undefined and calling it throws
+    // `TypeError: e.update is not a function`.
+    if (typeof update === 'function') {
+      update();
+    }
   }, [update]);
 
   // wrapping in fragment to make TS happy (known issue with FC returning children)

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ax, ix } from '@compiled/react/runtime';
 import noop from '@atlaskit/ds-lib/noop';
-import { popupMotion } from '@atlaskit/top-layer/animations';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
@@ -14,7 +13,6 @@ import { useWidthFromAnchor } from '@atlaskit/top-layer/use-width-from-anchor';
 import { useRoleProps } from '../internal/top-layer-bridge';
 import { TriggerRefObjectContext } from './trigger-ref-object-context';
 var overflowAutoStyles = null;
-var animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};
@@ -180,7 +178,7 @@ export function PopupContentTopLayer(_ref) {
     ref: popoverRef
   }, roleProps, {
     isOpen: isOpen,
-    animate: animation,
+    animate: true,
     placement: topLayerPlacement,
     onClose: handleOnClose,
     testId: testId && "".concat(testId, "--content")

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

@@ -5,7 +5,6 @@ import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { Fragment, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import { popupMotion } from '@atlaskit/top-layer/animations';
 import { getAriaForTrigger } from '@atlaskit/top-layer/get-aria-for-trigger';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map';
 import { createPopoverCloseEvent, Popover } from '@atlaskit/top-layer/popover';
@@ -18,7 +17,6 @@ var contentOverflowStyles = {
   fitViewport: "_1reo1wug _18m91wug",
   default: ""
 };
-var animation = popupMotion();
 
 // Top-layer positioning is handled by CSS Anchor Positioning, not inline styles.
 var EMPTY_STYLE = {};
@@ -225,7 +223,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
-    animate: animation,
+    animate: true,
     placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {

package/dist/esm/reposition-on-update.js

@@ -10,8 +10,14 @@ export var RepositionOnUpdate = function RepositionOnUpdate(_ref) {
       isFirstRenderRef.current = false;
       return;
     }
-    // callback function from popper that repositions pop-up on content Update
-    update();
+    // callback function from popper that repositions pop-up on content Update.
+    // Guard against `update` being undefined: on Safari the Popper instance may
+    // not be fully initialised when this layout effect fires, in which case the
+    // render-prop `update` is undefined and calling it throws
+    // `TypeError: e.update is not a function`.
+    if (typeof update === 'function') {
+      update();
+    }
   }, [update]);
 
   // wrapping in fragment to make TS happy (known issue with FC returning children)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "5.1.0",
+	"version": "5.1.2",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,14 +34,14 @@
 		"@atlaskit/css": "^1.0.0",
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/layering": "^4.1.0",
-		"@atlaskit/motion": "^7.2.0",
+		"@atlaskit/motion": "^7.3.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/popper": "^8.2.0",
+		"@atlaskit/popper": "^8.3.0",
 		"@atlaskit/portal": "^6.1.0",
-		"@atlaskit/primitives": "^20.1.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.1.0",
-		"@atlaskit/top-layer": "^1.2.0",
+		"@atlaskit/tokens": "^15.8.0",
+		"@atlaskit/top-layer": "^1.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
 		"bind-event-listener": "^3.0.0",
@@ -57,21 +57,21 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^24.2.0",
+		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/code": "^18.2.0",
-		"@atlaskit/docs": "^12.0.0",
+		"@atlaskit/docs": "^12.1.0",
 		"@atlaskit/form": "^16.1.0",
-		"@atlaskit/heading": "^6.1.0",
-		"@atlaskit/icon": "^36.1.0",
-		"@atlaskit/link": "^4.1.0",
+		"@atlaskit/heading": "^6.2.0",
+		"@atlaskit/icon": "^37.0.0",
+		"@atlaskit/link": "^4.3.0",
 		"@atlaskit/modal-dialog": "^16.1.0",
 		"@atlaskit/section-message": "^9.2.0",
 		"@atlaskit/textfield": "^9.1.0",
 		"@atlaskit/toggle": "^17.1.0",
-		"@atlassian/feature-flags-test-utils": "^1.1.0",
+		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@atlassian/ssr-tests": "workspace:^",
 		"@atlassian/structured-docs-types": "workspace:^",
-		"@atlassian/testing-library": "^0.7.0",
+		"@atlassian/testing-library": "^0.11.0",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",

package/popup.docs.tsx

@@ -8,10 +8,13 @@ const documentation: StructuredContentSource = {
 			name: 'Popup',
 			description: 'A component for displaying popup content relative to a trigger element.',
 			status: 'general-availability',
+			designSource: {
+				figmaUrl: 'https://go.atlassian.com/figma-library-ads-82088-103357',
+			},
 			import: {
 				name: 'Popup',
-				package: '@atlaskit/popup',
-				type: 'default',
+				package: '@atlaskit/popup/popup',
+				type: 'named',
 				packagePath: path.resolve(__dirname),
 				packageJson: require('./package.json'),
 			},