@atlaskit/popup 4.4.5 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/popup
 
+## 4.6.0
+
+### Minor Changes
+
+- [`bfdf7891c505f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bfdf7891c505f) -
+  Fixes a bug with the compositional popup where focus was not being returned to the trigger when
+  the popup is closed. This was occurring in React 18 Strict Mode.
+
+  The regular popup was already using this fix behind the `platform-design-system-popup-ref` feature
+  gate.
+
+  This change to compositional popup is behind the feature gate
+  `platform-dst-popup-compositional-trigger-ref`.
+
+## 4.5.0
+
+### Minor Changes
+
+- [`0e417a8c4a92e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0e417a8c4a92e) -
+  Popup will now stay open when a click starts inside the popup but then moves outside the popup.
+  The `onClose` callback will not be called in this case. This aligns it with the behaviour of Modal
+  Dialog.
+
+  This change was previously behind a feature flag, which has now been removed.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.4.5
 
 ### Patch Changes

package/dist/cjs/compositional/popup.js

@@ -13,11 +13,13 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _layering = require("@atlaskit/layering");
 var _openLayerObserver = require("@atlaskit/layering/experimental/open-layer-observer");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _popperWrapper = _interopRequireDefault(require("../popper-wrapper"));
 var _useAppearance = require("../use-appearance");
 var _useGetMemoizedMergedTriggerRef = require("../use-get-memoized-merged-trigger-ref");
+var _useGetMemoizedMergedTriggerRefNew = require("../use-get-memoized-merged-trigger-ref-new");
 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 IsOpenContext = /*#__PURE__*/(0, _react.createContext)(false);
 var IdContext = /*#__PURE__*/(0, _react.createContext)(undefined);
@@ -87,10 +89,11 @@ var PopupTrigger = exports.PopupTrigger = function PopupTrigger(_ref2) {
   var id = (0, _react.useContext)(IdContext);
   var setTriggerRef = (0, _react.useContext)(SetTriggerRefContext);
   var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
+  var getMergedTriggerRefNew = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
   return /*#__PURE__*/_react.default.createElement(_popper.Reference, null, function (_ref3) {
     var ref = _ref3.ref;
     return children({
-      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+      ref: (0, _platformFeatureFlags.fg)('platform-dst-popup-compositional-trigger-ref') ? getMergedTriggerRefNew(ref, setTriggerRef) : getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

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

@@ -90,7 +90,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
       var didClickStartInsidePopup = popupRef && mouseDownTarget.current instanceof Node && popupRef.contains(mouseDownTarget.current);
-      if (!isClickOnPopup && !isClickOnTrigger && ((0, _platformFeatureFlags.fg)('popup-onclose-fix-mouse-down-inside-popup') ? !didClickStartInsidePopup : true)) {
+      if (!isClickOnPopup && !isClickOnTrigger && !didClickStartInsidePopup) {
         closePopup(event);
         // If there was an outside click on a non-interactive element, the focus should be on the trigger.
         if (document.activeElement && !(0, _isElementInteractive.isInteractiveElement)(document.activeElement) && (0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {

package/dist/cjs/use-get-memoized-merged-trigger-ref-new.js

@@ -10,7 +10,8 @@ var _react = require("react");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-popup-ref`
+ * Implemented behind ff `platform-design-system-popup-ref` (for regular popup) and
+ * `platform-dst-popup-compositional-trigger-ref` (for compositional popup)
  * @returns Function to set trigger ref
  */
 var useGetMemoizedMergedTriggerRefNew = exports.useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {

package/dist/es2019/compositional/popup.js

@@ -4,11 +4,13 @@ import noop from '@atlaskit/ds-lib/noop';
 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 { useGetMemoizedMergedTriggerRef } from '../use-get-memoized-merged-trigger-ref';
+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);
@@ -75,10 +77,11 @@ export const PopupTrigger = ({
   const id = useContext(IdContext);
   const setTriggerRef = useContext(SetTriggerRefContext);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  const getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
   return /*#__PURE__*/React.createElement(Reference, null, ({
     ref
   }) => children({
-    ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+    ref: fg('platform-dst-popup-compositional-trigger-ref') ? getMergedTriggerRefNew(ref, setTriggerRef) : getMergedTriggerRef(ref, setTriggerRef, isOpen),
     'aria-controls': id,
     'aria-expanded': isOpen,
     'aria-haspopup': true

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

@@ -87,7 +87,7 @@ export const useCloseManager = ({
       const isClickOnPopup = popupRef && popupRef.contains(target);
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);
       const didClickStartInsidePopup = popupRef && mouseDownTarget.current instanceof Node && popupRef.contains(mouseDownTarget.current);
-      if (!isClickOnPopup && !isClickOnTrigger && (fg('popup-onclose-fix-mouse-down-inside-popup') ? !didClickStartInsidePopup : true)) {
+      if (!isClickOnPopup && !isClickOnTrigger && !didClickStartInsidePopup) {
         closePopup(event);
         // If there was an outside click on a non-interactive element, the focus should be on the trigger.
         if (document.activeElement && !isInteractiveElement(document.activeElement) && fg('platform_dst_popup-disable-focuslock')) {

package/dist/es2019/use-get-memoized-merged-trigger-ref-new.js

@@ -3,7 +3,8 @@ import memoizeOne from 'memoize-one';
 
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-popup-ref`
+ * Implemented behind ff `platform-design-system-popup-ref` (for regular popup) and
+ * `platform-dst-popup-compositional-trigger-ref` (for compositional popup)
  * @returns Function to set trigger ref
  */
 export const useGetMemoizedMergedTriggerRefNew = () => {

package/dist/esm/compositional/popup.js

@@ -5,11 +5,13 @@ import noop from '@atlaskit/ds-lib/noop';
 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 { useGetMemoizedMergedTriggerRef } from '../use-get-memoized-merged-trigger-ref';
+import { useGetMemoizedMergedTriggerRefNew } from '../use-get-memoized-merged-trigger-ref-new';
 var IsOpenContext = /*#__PURE__*/createContext(false);
 var IdContext = /*#__PURE__*/createContext(undefined);
 var TriggerRefContext = /*#__PURE__*/createContext(null);
@@ -78,10 +80,11 @@ export var PopupTrigger = function PopupTrigger(_ref2) {
   var id = useContext(IdContext);
   var setTriggerRef = useContext(SetTriggerRefContext);
   var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  var getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
   return /*#__PURE__*/React.createElement(Reference, null, function (_ref3) {
     var ref = _ref3.ref;
     return children({
-      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+      ref: fg('platform-dst-popup-compositional-trigger-ref') ? getMergedTriggerRefNew(ref, setTriggerRef) : getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

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

@@ -82,7 +82,7 @@ export var useCloseManager = function useCloseManager(_ref) {
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
       var didClickStartInsidePopup = popupRef && mouseDownTarget.current instanceof Node && popupRef.contains(mouseDownTarget.current);
-      if (!isClickOnPopup && !isClickOnTrigger && (fg('popup-onclose-fix-mouse-down-inside-popup') ? !didClickStartInsidePopup : true)) {
+      if (!isClickOnPopup && !isClickOnTrigger && !didClickStartInsidePopup) {
         closePopup(event);
         // If there was an outside click on a non-interactive element, the focus should be on the trigger.
         if (document.activeElement && !isInteractiveElement(document.activeElement) && fg('platform_dst_popup-disable-focuslock')) {

package/dist/esm/use-get-memoized-merged-trigger-ref-new.js

@@ -4,7 +4,8 @@ import memoizeOne from 'memoize-one';
 
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-popup-ref`
+ * Implemented behind ff `platform-design-system-popup-ref` (for regular popup) and
+ * `platform-dst-popup-compositional-trigger-ref` (for compositional popup)
  * @returns Function to set trigger ref
  */
 export var useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {

package/dist/types/use-get-memoized-merged-trigger-ref-new.d.ts

@@ -1,7 +1,8 @@
 import { type Dispatch, type SetStateAction } from 'react';
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-popup-ref`
+ * Implemented behind ff `platform-design-system-popup-ref` (for regular popup) and
+ * `platform-dst-popup-compositional-trigger-ref` (for compositional popup)
  * @returns Function to set trigger ref
  */
 export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;

package/dist/types-ts4.5/use-get-memoized-merged-trigger-ref-new.d.ts

@@ -1,7 +1,8 @@
 import { type Dispatch, type SetStateAction } from 'react';
 /**
  * Here setting ref is not dependent on isOpen flag which is failing in React 18 strict mode
- * Implemented behind ff `platform-design-system-popup-ref`
+ * Implemented behind ff `platform-design-system-popup-ref` (for regular popup) and
+ * `platform-dst-popup-compositional-trigger-ref` (for compositional popup)
  * @returns Function to set trigger ref
  */
 export declare const useGetMemoizedMergedTriggerRefNew: () => import("memoize-one").MemoizedFn<(ref: React.RefCallback<HTMLElement> | React.MutableRefObject<HTMLElement> | null, setTriggerRef: Dispatch<SetStateAction<HTMLElement | null>>) => (node: HTMLElement | null) => void>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popup",
-	"version": "4.4.5",
+	"version": "4.6.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,11 +34,11 @@
 	"dependencies": {
 		"@atlaskit/css": "^0.15.0",
 		"@atlaskit/ds-lib": "^5.1.0",
-		"@atlaskit/layering": "^3.1.0",
+		"@atlaskit/layering": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popper": "^7.1.0",
 		"@atlaskit/portal": "^5.1.0",
-		"@atlaskit/primitives": "^16.0.0",
+		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
@@ -56,18 +56,18 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.5.0",
-		"@atlaskit/code": "^17.2.0",
+		"@atlaskit/code": "^17.3.0",
 		"@atlaskit/docs": "^11.2.0",
 		"@atlaskit/form": "^14.2.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/modal-dialog": "^14.5.0",
-		"@atlaskit/section-message": "^8.7.0",
+		"@atlaskit/modal-dialog": "^14.6.0",
+		"@atlaskit/section-message": "^8.8.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.1.0",
-		"@atlassian/feature-flags-test-utils": "^0.3.0",
+		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
@@ -118,7 +118,7 @@
 		"popup-onclose-fix": {
 			"type": "boolean"
 		},
-		"popup-onclose-fix-mouse-down-inside-popup": {
+		"platform-dst-popup-compositional-trigger-ref": {
 			"type": "boolean"
 		}
 	},