@atlaskit/popup 1.23.1 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/popup
 
+## 1.24.0
+
+### Minor Changes
+
+- [#124840](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124840)
+  [`2e4f70b9a71fa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2e4f70b9a71fa) -
+  Fix to set ref for trigger in React 18 Strict mode behind feature flag
+
+## 1.23.2
+
+### Patch Changes
+
+- [#134766](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134766)
+  [`56e1c0d98f0c2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/56e1c0d98f0c2) -
+  Fixed unnecessary closing of modal dialogs that opened from a popup.
+
 ## 1.23.1
 
 ### Patch Changes

package/dist/cjs/popup.js

@@ -17,6 +17,7 @@ var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
 var _popperWrapper = _interopRequireDefault(require("./popper-wrapper"));
 var _useGetMemoizedMergedTriggerRef = require("./use-get-memoized-merged-trigger-ref");
+var _useGetMemoizedMergedTriggerRefNew = require("./use-get-memoized-merged-trigger-ref-new");
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /**
  * @jsxRuntime classic
@@ -70,6 +71,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
+  var getMergedTriggerRefNew = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
   var generatedId = (0, _reactUid.useUID)();
   var id = providedId || generatedId;
   var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
@@ -103,7 +105,7 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var popupContent = (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
-      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+      ref: !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-20476-dropdown-menu') ? 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

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

@@ -60,17 +60,9 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if ((0, _platformFeatureFlags.fg)('platform_dst_popup-disable-focuslock')) {
-        var _document$activeEleme;
-        if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
-          //if it is a disabled layer, we need to disable its click listener.
-          return;
-        }
-      } else {
-        if (isLayerDisabled()) {
-          //if it is a disabled layer, we need to disable its click listener.
-          return;
-        }
+      if (isLayerDisabled()) {
+        //if it is a disabled layer, we need to disable its click listener.
+        return;
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
@@ -103,7 +95,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
           return;
         }
         if (key === 'Tab') {
-          var _document$activeEleme2;
+          var _document$activeEleme;
           // We have cases where we need to close the Popup on Tab press.
           // Example: DropdownMenu
           if (shouldCloseOnTab) {
@@ -113,7 +105,7 @@ var useCloseManager = exports.useCloseManager = function useCloseManager(_ref) {
             closePopup(event);
             return;
           }
-          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+          if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
             return;
           }
           if (shouldDisableFocusTrap) {

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

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGetMemoizedMergedTriggerRefNew = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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-dsp-20476-dropdown-menu`
+ * @returns Function to set trigger ref
+ */
+var useGetMemoizedMergedTriggerRefNew = exports.useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {
+  var _useState = (0, _react.useState)(function () {
+      return (0, _memoizeOne.default)(function (ref, setTriggerRef) {
+        return function (node) {
+          if (node) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 1),
+    getMemoizedMergedTriggerRefNew = _useState2[0];
+  return getMemoizedMergedTriggerRefNew;
+};

package/dist/es2019/popup.js

@@ -16,6 +16,7 @@ import { Box, xcss } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
 import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
+import { useGetMemoizedMergedTriggerRefNew } from './use-get-memoized-merged-trigger-ref-new';
 const defaultLayer = layers.layer();
 const wrapperStyles = xcss({
   position: 'relative'
@@ -49,6 +50,7 @@ export const Popup = /*#__PURE__*/memo(({
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  const getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
   const generatedId = useUID();
   const id = providedId || generatedId;
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
@@ -83,7 +85,7 @@ export const Popup = /*#__PURE__*/memo(({
     ref
   }) => {
     return trigger({
-      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+      ref: !fg('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true

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

@@ -57,17 +57,9 @@ export const useCloseManager = ({
       if (!doesDomNodeExist) {
         return;
       }
-      if (fg('platform_dst_popup-disable-focuslock')) {
-        var _document$activeEleme;
-        if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
-          //if it is a disabled layer, we need to disable its click listener.
-          return;
-        }
-      } else {
-        if (isLayerDisabled()) {
-          //if it is a disabled layer, we need to disable its click listener.
-          return;
-        }
+      if (isLayerDisabled()) {
+        //if it is a disabled layer, we need to disable its click listener.
+        return;
       }
       const isClickOnPopup = popupRef && popupRef.contains(target);
       const isClickOnTrigger = triggerRef && triggerRef.contains(target);
@@ -102,7 +94,7 @@ export const useCloseManager = ({
           return;
         }
         if (key === 'Tab') {
-          var _document$activeEleme2;
+          var _document$activeEleme;
           // We have cases where we need to close the Popup on Tab press.
           // Example: DropdownMenu
           if (shouldCloseOnTab) {
@@ -112,7 +104,7 @@ export const useCloseManager = ({
             closePopup(event);
             return;
           }
-          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+          if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
             return;
           }
           if (shouldDisableFocusTrap) {

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

@@ -0,0 +1,23 @@
+import { useState } from 'react';
+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-dsp-20476-dropdown-menu`
+ * @returns Function to set trigger ref
+ */
+export const useGetMemoizedMergedTriggerRefNew = () => {
+  const [getMemoizedMergedTriggerRefNew] = useState(() => memoizeOne((ref, setTriggerRef) => {
+    return node => {
+      if (node) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        setTriggerRef(node);
+      }
+    };
+  }));
+  return getMemoizedMergedTriggerRefNew;
+};

package/dist/esm/popup.js

@@ -17,6 +17,7 @@ import { Box, xcss } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import PopperWrapper from './popper-wrapper';
 import { useGetMemoizedMergedTriggerRef } from './use-get-memoized-merged-trigger-ref';
+import { useGetMemoizedMergedTriggerRefNew } from './use-get-memoized-merged-trigger-ref-new';
 var defaultLayer = layers.layer();
 var wrapperStyles = xcss({
   position: 'relative'
@@ -62,6 +63,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
+  var getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
   var generatedId = useUID();
   var id = providedId || generatedId;
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
@@ -95,7 +97,7 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
   var popupContent = jsx(Manager, null, jsx(Reference, null, function (_ref2) {
     var ref = _ref2.ref;
     return trigger({
-      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
+      ref: !fg('platform-design-system-dsp-20476-dropdown-menu') ? getMergedTriggerRef(ref, setTriggerRef, isOpen) : getMergedTriggerRefNew(ref, setTriggerRef),
       'aria-controls': isOpen ? id : undefined,
       'aria-expanded': isOpen,
       'aria-haspopup': role === 'dialog' && fg('platform_dst_popup-disable-focuslock') ? 'dialog' : true

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

@@ -52,17 +52,9 @@ export var useCloseManager = function useCloseManager(_ref) {
       if (!doesDomNodeExist) {
         return;
       }
-      if (fg('platform_dst_popup-disable-focuslock')) {
-        var _document$activeEleme;
-        if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
-          //if it is a disabled layer, we need to disable its click listener.
-          return;
-        }
-      } else {
-        if (isLayerDisabled()) {
-          //if it is a disabled layer, we need to disable its click listener.
-          return;
-        }
+      if (isLayerDisabled()) {
+        //if it is a disabled layer, we need to disable its click listener.
+        return;
       }
       var isClickOnPopup = popupRef && popupRef.contains(target);
       var isClickOnTrigger = triggerRef && triggerRef.contains(target);
@@ -95,7 +87,7 @@ export var useCloseManager = function useCloseManager(_ref) {
           return;
         }
         if (key === 'Tab') {
-          var _document$activeEleme2;
+          var _document$activeEleme;
           // We have cases where we need to close the Popup on Tab press.
           // Example: DropdownMenu
           if (shouldCloseOnTab) {
@@ -105,7 +97,7 @@ export var useCloseManager = function useCloseManager(_ref) {
             closePopup(event);
             return;
           }
-          if (isLayerDisabled() && (_document$activeEleme2 = document.activeElement) !== null && _document$activeEleme2 !== void 0 && _document$activeEleme2.closest('[aria-modal]')) {
+          if (isLayerDisabled() && (_document$activeEleme = document.activeElement) !== null && _document$activeEleme !== void 0 && _document$activeEleme.closest('[aria-modal]')) {
             return;
           }
           if (shouldDisableFocusTrap) {

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

@@ -0,0 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useState } from 'react';
+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-dsp-20476-dropdown-menu`
+ * @returns Function to set trigger ref
+ */
+export var useGetMemoizedMergedTriggerRefNew = function useGetMemoizedMergedTriggerRefNew() {
+  var _useState = useState(function () {
+      return memoizeOne(function (ref, setTriggerRef) {
+        return function (node) {
+          if (node) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState2 = _slicedToArray(_useState, 1),
+    getMemoizedMergedTriggerRefNew = _useState2[0];
+  return getMemoizedMergedTriggerRefNew;
+};

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

@@ -0,0 +1,7 @@
+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-dsp-20476-dropdown-menu`
+ * @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

@@ -0,0 +1,7 @@
+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-dsp-20476-dropdown-menu`
+ * @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": "1.23.1",
+	"version": "1.24.0",
 	"description": "A popup displays brief content in an overlay.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,10 +29,6 @@
 	},
 	"atlassian": {
 		"team": "Design System Team",
-		"productPushConsumption": [
-			"jira"
-		],
-		"releaseModel": "continuous",
 		"runReact18": true,
 		"website": {
 			"name": "Popup",
@@ -45,7 +41,7 @@
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.2.0",
 		"@atlaskit/portal": "^4.9.0",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.59.0",
 		"@babel/runtime": "^7.0.0",
@@ -113,6 +109,9 @@
 		},
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
+		},
+		"platform-design-system-dsp-20476-dropdown-menu": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"