@atlaskit/popup 1.23.2 → 1.24.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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-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-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-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.2",
+	"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/"