@atlaskit/popup 6.0.1 → 6.0.3

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/popup
 
+## 6.0.3
+
+### Patch Changes
+
+- [`c3cae446aea72`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c3cae446aea72) -
+  Only set `aria-controls` while popup content is mounted and clarify the top-layer trigger helper
+  documentation.
+- Updated dependencies
+
+## 6.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.0.1
 
 ### Patch Changes

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

@@ -48,7 +48,8 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     testId = _ref.testId,
     trigger = _ref.trigger,
     content = _ref.content,
-    onClose = _ref.onClose,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? _noop.default : _ref$onClose,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
     _fallbackPlacements = _ref.fallbackPlacements,
@@ -76,7 +77,6 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     _appearance = _ref.appearance;
   var triggerRef = (0, _react.useRef)(null);
   var popoverRef = (0, _react.useRef)(null);
-  var popupContainerRef = (0, _react.useRef)(null);
 
   /**
    * Escape hatch for consumer-chosen initial focus target.
@@ -171,9 +171,6 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
   // No manual triggerRef.current?.focus() is needed.
   var handleOnClose = (0, _react.useCallback)(function (_ref2) {
     var reason = _ref2.reason;
-    if (!onClose) {
-      return;
-    }
     onClose((0, _popover.createPopoverCloseEvent)({
       reason: reason
     }));
@@ -199,10 +196,11 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     label: label,
     titleId: titleId
   });
+  var resolvedPopoverId = providedId !== null && providedId !== void 0 ? providedId : popoverId;
   var ariaAttributes = (0, _getAriaForTrigger.getAriaForTrigger)({
     role: (_roleProps$role = roleProps.role) !== null && _roleProps$role !== void 0 ? _roleProps$role : 'dialog',
     isOpen: isOpen,
-    popoverId: popoverId
+    popoverId: resolvedPopoverId
   });
 
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
@@ -214,7 +212,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     ref: function ref(node) {
       triggerRef.current = node;
     },
-    'aria-controls': providedId !== null && providedId !== void 0 ? providedId : popoverId,
+    'aria-controls': ariaAttributes['aria-controls'],
     // `aria-expanded` reflects current open state.
     'aria-expanded': ariaAttributes['aria-expanded'],
     // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
@@ -228,7 +226,7 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
   };
   return /*#__PURE__*/React.createElement(_react.Fragment, null, trigger(triggerProps), /*#__PURE__*/React.createElement(_popover.Popover, (0, _extends2.default)({
     ref: popoverRef,
-    id: providedId !== null && providedId !== void 0 ? providedId : popoverId
+    id: resolvedPopoverId
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
@@ -236,7 +234,6 @@ var PopupTopLayer = exports.PopupTopLayer = /*#__PURE__*/(0, _react.memo)(functi
     placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
-    ref: popupContainerRef,
     style: EMPTY_STYLE,
     id: providedId,
     "data-placement": placement,

package/dist/es2019/popper-wrapper.js

@@ -106,7 +106,6 @@ function PopperWrapper({
   rootBoundary,
   shouldFlip,
   placement = 'auto',
-  // @ts-ignore: [PIT-1685] Fails in post-office due to backwards incompatibility issue with React 18
   popupComponent: PopupContainer = DefaultPopupComponent,
   autoFocus = true,
   triggerRef,

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

@@ -38,7 +38,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   testId,
   trigger,
   content,
-  onClose,
+  onClose = noop,
   placement = 'auto',
   fallbackPlacements: _fallbackPlacements,
   shouldFlip: _shouldFlip = true,
@@ -89,7 +89,6 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   var _roleProps$role;
   const triggerRef = useRef(null);
   const popoverRef = useRef(null);
-  const popupContainerRef = useRef(null);
 
   /**
    * Escape hatch for consumer-chosen initial focus target.
@@ -183,9 +182,6 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   const handleOnClose = useCallback(({
     reason
   }) => {
-    if (!onClose) {
-      return;
-    }
     onClose(createPopoverCloseEvent({
       reason
     }));
@@ -195,7 +191,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   // Legacy content() receives { isOpen, update, setInitialFocusRef, onClose }.
   // update is a no-op because CSS Anchor Positioning self-updates.
   const contentProps = useMemo(() => ({
-    isOpen: isOpen,
+    isOpen,
     update: noop,
     onClose,
     setInitialFocusRef
@@ -209,10 +205,11 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     label,
     titleId
   });
+  const resolvedPopoverId = providedId !== null && providedId !== void 0 ? providedId : popoverId;
   const ariaAttributes = getAriaForTrigger({
     role: (_roleProps$role = roleProps.role) !== null && _roleProps$role !== void 0 ? _roleProps$role : 'dialog',
     isOpen,
-    popoverId
+    popoverId: resolvedPopoverId
   });
 
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
@@ -224,7 +221,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     ref: node => {
       triggerRef.current = node;
     },
-    'aria-controls': providedId !== null && providedId !== void 0 ? providedId : popoverId,
+    'aria-controls': ariaAttributes['aria-controls'],
     // `aria-expanded` reflects current open state.
     'aria-expanded': ariaAttributes['aria-expanded'],
     // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
@@ -238,7 +235,7 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
   };
   return /*#__PURE__*/React.createElement(Fragment, null, trigger(triggerProps), /*#__PURE__*/React.createElement(Popover, _extends({
     ref: popoverRef,
-    id: providedId !== null && providedId !== void 0 ? providedId : popoverId
+    id: resolvedPopoverId
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
@@ -246,7 +243,6 @@ export const PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer({
     placement: topLayerPlacement,
     testId: testId && `${testId}--content`
   }), Container ? /*#__PURE__*/React.createElement(Container, {
-    ref: popupContainerRef,
     style: EMPTY_STYLE,
     id: providedId,
     "data-placement": placement,

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

@@ -39,7 +39,8 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     testId = _ref.testId,
     trigger = _ref.trigger,
     content = _ref.content,
-    onClose = _ref.onClose,
+    _ref$onClose = _ref.onClose,
+    onClose = _ref$onClose === void 0 ? noop : _ref$onClose,
     _ref$placement = _ref.placement,
     placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
     _fallbackPlacements = _ref.fallbackPlacements,
@@ -67,7 +68,6 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     _appearance = _ref.appearance;
   var triggerRef = useRef(null);
   var popoverRef = useRef(null);
-  var popupContainerRef = useRef(null);
 
   /**
    * Escape hatch for consumer-chosen initial focus target.
@@ -162,9 +162,6 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
   // No manual triggerRef.current?.focus() is needed.
   var handleOnClose = useCallback(function (_ref2) {
     var reason = _ref2.reason;
-    if (!onClose) {
-      return;
-    }
     onClose(createPopoverCloseEvent({
       reason: reason
     }));
@@ -190,10 +187,11 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     label: label,
     titleId: titleId
   });
+  var resolvedPopoverId = providedId !== null && providedId !== void 0 ? providedId : popoverId;
   var ariaAttributes = getAriaForTrigger({
     role: (_roleProps$role = roleProps.role) !== null && _roleProps$role !== void 0 ? _roleProps$role : 'dialog',
     isOpen: isOpen,
-    popoverId: popoverId
+    popoverId: resolvedPopoverId
   });
 
   // Narrow to ForwardRefExoticComponent so JSX accepts the ref prop.
@@ -205,7 +203,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     ref: function ref(node) {
       triggerRef.current = node;
     },
-    'aria-controls': providedId !== null && providedId !== void 0 ? providedId : popoverId,
+    'aria-controls': ariaAttributes['aria-controls'],
     // `aria-expanded` reflects current open state.
     'aria-expanded': ariaAttributes['aria-expanded'],
     // FUDGE(top-layer-api): cast to the narrow public TriggerProps['aria-haspopup'] union.
@@ -219,7 +217,7 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
   };
   return /*#__PURE__*/React.createElement(Fragment, null, trigger(triggerProps), /*#__PURE__*/React.createElement(Popover, _extends({
     ref: popoverRef,
-    id: providedId !== null && providedId !== void 0 ? providedId : popoverId
+    id: resolvedPopoverId
   }, roleProps, {
     isOpen: isOpen,
     onClose: handleOnClose,
@@ -227,7 +225,6 @@ export var PopupTopLayer = /*#__PURE__*/memo(function PopupTopLayer(_ref) {
     placement: topLayerPlacement,
     testId: testId && "".concat(testId, "--content")
   }), Container ? /*#__PURE__*/React.createElement(Container, {
-    ref: popupContainerRef,
     style: EMPTY_STYLE,
     id: providedId,
     "data-placement": placement,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "6.0.1",
+	"version": "6.0.3",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,7 +41,7 @@
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/tokens": "^16.7.0",
-		"@atlaskit/top-layer": "^3.2.0",
+		"@atlaskit/top-layer": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",

package/popup.docs.tsx

@@ -1,52 +0,0 @@
-import path from 'path';
-
-import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
-
-const documentation: StructuredContentSource = {
-	components: [
-		{
-			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/popup',
-				type: 'named',
-				packagePath: path.resolve(__dirname),
-				packageJson: require('./package.json'),
-			},
-			usageGuidelines: [
-				'Use for contextual content that appears on demand',
-				'Position appropriately relative to trigger',
-				'Consider dismissal behavior',
-				'Use appropriate content sizing',
-			],
-			contentGuidelines: [
-				'Keep popup content focused and relevant',
-				'Use clear, concise content',
-				'Provide appropriate actions when needed',
-				'Consider content hierarchy',
-			],
-			accessibilityGuidelines: [
-				'Provide appropriate focus management',
-				'Use clear trigger labels',
-				'Ensure keyboard navigation support',
-				'Provide escape key dismissal',
-			],
-			examples: [
-				{
-					name: 'Popup',
-					description: 'Popup example',
-					source: path.resolve(__dirname, './examples/ai/popup.tsx'),
-				},
-			],
-			keywords: ['popup', 'overlay', 'floating', 'content', 'trigger'],
-			categories: ['overlay'],
-		},
-	],
-};
-
-export default documentation;