@atlaskit/popup 1.23.2 → 1.24.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/popup
 
+## 1.24.1
+
+### Patch Changes
+
+- [#135608](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/135608)
+  [`7498a45496f8a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7498a45496f8a) -
+  Update to remove react-uid
+
+## 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/compositional/popup.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.PopupTrigger = exports.PopupContent = exports.Popup = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactUid = require("react-uid");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _layering = require("@atlaskit/layering");
 var _popper = require("@atlaskit/popper");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
@@ -59,7 +59,7 @@ var Popup = exports.Popup = function Popup(_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-  var generatedId = (0, _reactUid.useUID)();
+  var generatedId = (0, _reactUid.useId)();
   var id = providedId || generatedId;
   return /*#__PURE__*/_react.default.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true

package/dist/cjs/popup.js

@@ -8,7 +8,7 @@ exports.default = exports.Popup = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _reactUid = require("react-uid");
+var _reactUid = require("@atlaskit/ds-lib/react-uid");
 var _layering = require("@atlaskit/layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
@@ -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,7 +71,8 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var getMergedTriggerRef = (0, _useGetMemoizedMergedTriggerRef.useGetMemoizedMergedTriggerRef)();
-  var generatedId = (0, _reactUid.useUID)();
+  var getMergedTriggerRefNew = (0, _useGetMemoizedMergedTriggerRefNew.useGetMemoizedMergedTriggerRefNew)();
+  var generatedId = (0, _reactUid.useId)();
   var id = providedId || generatedId;
   var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: false
@@ -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/compositional/popup.js

@@ -1,7 +1,7 @@
 import React, { createContext, useContext, useState } from 'react';
-import { useUID } from 'react-uid';
 import invariant from 'tiny-invariant';
 import noop from '@atlaskit/ds-lib/noop';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
@@ -45,7 +45,7 @@ export const Popup = ({
   isOpen = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
-  const generatedId = useUID();
+  const generatedId = useId();
   const id = providedId || generatedId;
   return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true

package/dist/es2019/popup.js

@@ -7,7 +7,7 @@ import { memo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { useUID } from 'react-uid';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
@@ -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,7 +50,8 @@ export const Popup = /*#__PURE__*/memo(({
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
   const getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
-  const generatedId = useUID();
+  const getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
+  const generatedId = useId();
   const id = providedId || generatedId;
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
@@ -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/compositional/popup.js

@@ -1,8 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { createContext, useContext, useState } from 'react';
-import { useUID } from 'react-uid';
 import invariant from 'tiny-invariant';
 import noop from '@atlaskit/ds-lib/noop';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { Manager, Reference } from '@atlaskit/popper';
 import Portal from '@atlaskit/portal';
@@ -49,7 +49,7 @@ export var Popup = function Popup(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
-  var generatedId = useUID();
+  var generatedId = useId();
   var id = providedId || generatedId;
   return /*#__PURE__*/React.createElement(EnsureIsInsidePopupContext.Provider, {
     value: true

package/dist/esm/popup.js

@@ -8,7 +8,7 @@ import { memo, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { useUID } from 'react-uid';
+import { useId } from '@atlaskit/ds-lib/react-uid';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
@@ -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,7 +63,8 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
   var getMergedTriggerRef = useGetMemoizedMergedTriggerRef();
-  var generatedId = useUID();
+  var getMergedTriggerRefNew = useGetMemoizedMergedTriggerRefNew();
+  var generatedId = useId();
   var id = providedId || generatedId;
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: false
@@ -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.1",
 	"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",
@@ -53,7 +49,6 @@
 		"bind-event-listener": "^3.0.0",
 		"focus-trap": "^2.4.5",
 		"memoize-one": "^6.0.0",
-		"react-uid": "^2.2.0",
 		"tiny-invariant": "^1.2.0"
 	},
 	"peerDependencies": {
@@ -113,6 +108,9 @@
 		},
 		"platform_dst_popup-disable-focuslock": {
 			"type": "boolean"
+		},
+		"platform-design-system-dsp-20476-dropdown-menu": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/popup/"