@atlaskit/popup 1.11.4 → 1.11.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/popup
 
+## 1.11.5
+
+### Patch Changes
+
+- [#40944](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40944) [`c6b7d977655`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c6b7d977655) - Memoize the Popup Trigger's ref to avoid unnecessary renders.
+
 ## 1.11.4
 
 ### Patch Changes

package/dist/cjs/popup.js

@@ -8,6 +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 _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _layering = require("@atlaskit/layering");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popper = require("@atlaskit/popper");
@@ -47,6 +48,33 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+
+  /*
+   * Get a memoized functional ref for use within this Popup's Trigger.
+   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+   * This is memoized within our component as to not be shared across all Popup instances, just this one.
+   *
+   * This is complex because the inputs are split across three different scopes:
+   *  - `props.isOpen`
+   *  - `useState.setTriggerRef`
+   *  - `renderProps.ref`
+   */
+  var _useState3 = (0, _react.useState)(function () {
+      return (0, _memoizeOne.default)(function (ref, setTriggerRef, isOpen) {
+        return function (node) {
+          if (node && isOpen) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 1),
+    getMergedTriggerRef = _useState4[0];
   var renderPopperWrapper = (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
     isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_popup_1cnzt') ? false : true
   }, (0, _react2.jsx)(_popperWrapper.default, {
@@ -68,18 +96,9 @@ var Popup = exports.Popup = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     triggerRef: triggerRef
   }));
   return (0, _react2.jsx)(_popper.Manager, null, (0, _react2.jsx)(_popper.Reference, null, function (_ref2) {
-    var _ref3 = _ref2.ref;
+    var ref = _ref2.ref;
     return trigger({
-      ref: function ref(node) {
-        if (node && isOpen) {
-          if (typeof _ref3 === 'function') {
-            _ref3(node);
-          } else {
-            _ref3.current = node;
-          }
-          setTriggerRef(node);
-        }
-      },
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

package/dist/es2019/popup.js

@@ -2,6 +2,7 @@
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import memoizeOne from 'memoize-one';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
@@ -29,6 +30,29 @@ export const Popup = /*#__PURE__*/memo(({
   shouldRenderToParent = false
 }) => {
   const [triggerRef, setTriggerRef] = useState(null);
+
+  /*
+   * Get a memoized functional ref for use within this Popup's Trigger.
+   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+   * This is memoized within our component as to not be shared across all Popup instances, just this one.
+   *
+   * This is complex because the inputs are split across three different scopes:
+   *  - `props.isOpen`
+   *  - `useState.setTriggerRef`
+   *  - `renderProps.ref`
+   */
+  const [getMergedTriggerRef] = useState(() => memoizeOne((ref, setTriggerRef, isOpen) => {
+    return node => {
+      if (node && isOpen) {
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+        setTriggerRef(node);
+      }
+    };
+  }));
   const renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: getBooleanFF('platform.design-system-team.layering_popup_1cnzt') ? false : true
   }, jsx(PopperWrapper, {
@@ -53,16 +77,7 @@ export const Popup = /*#__PURE__*/memo(({
     ref
   }) => {
     return trigger({
-      ref: node => {
-        if (node && isOpen) {
-          if (typeof ref === 'function') {
-            ref(node);
-          } else {
-            ref.current = node;
-          }
-          setTriggerRef(node);
-        }
-      },
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

package/dist/esm/popup.js

@@ -3,6 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { memo, useState } from 'react';
 import { jsx } from '@emotion/react';
+import memoizeOne from 'memoize-one';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Manager, Reference } from '@atlaskit/popper';
@@ -39,6 +40,33 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     triggerRef = _useState2[0],
     setTriggerRef = _useState2[1];
+
+  /*
+   * Get a memoized functional ref for use within this Popup's Trigger.
+   * This is still very volatile to change as `prop.isOpen` will regularly change, but it's better than nothing.
+   * This is memoized within our component as to not be shared across all Popup instances, just this one.
+   *
+   * This is complex because the inputs are split across three different scopes:
+   *  - `props.isOpen`
+   *  - `useState.setTriggerRef`
+   *  - `renderProps.ref`
+   */
+  var _useState3 = useState(function () {
+      return memoizeOne(function (ref, setTriggerRef, isOpen) {
+        return function (node) {
+          if (node && isOpen) {
+            if (typeof ref === 'function') {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+            setTriggerRef(node);
+          }
+        };
+      });
+    }),
+    _useState4 = _slicedToArray(_useState3, 1),
+    getMergedTriggerRef = _useState4[0];
   var renderPopperWrapper = jsx(UNSAFE_LAYERING, {
     isDisabled: getBooleanFF('platform.design-system-team.layering_popup_1cnzt') ? false : true
   }, jsx(PopperWrapper, {
@@ -60,18 +88,9 @@ export var Popup = /*#__PURE__*/memo(function (_ref) {
     triggerRef: triggerRef
   }));
   return jsx(Manager, null, jsx(Reference, null, function (_ref2) {
-    var _ref3 = _ref2.ref;
+    var ref = _ref2.ref;
     return trigger({
-      ref: function ref(node) {
-        if (node && isOpen) {
-          if (typeof _ref3 === 'function') {
-            _ref3(node);
-          } else {
-            _ref3.current = node;
-          }
-          setTriggerRef(node);
-        }
-      },
+      ref: getMergedTriggerRef(ref, setTriggerRef, isOpen),
       'aria-controls': id,
       'aria-expanded': isOpen,
       'aria-haspopup': true

package/dist/types/popup.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { type FC } from 'react';
 import { PopupProps } from './types';
 export declare const Popup: FC<PopupProps>;
 export default Popup;

package/dist/types-ts4.5/popup.d.ts

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { FC } from 'react';
+import { type FC } from 'react';
 import { PopupProps } from './types';
 export declare const Popup: FC<PopupProps>;
 export default Popup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/popup",
-  "version": "1.11.4",
+  "version": "1.11.5",
   "description": "A popup displays brief content in an overlay.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -48,7 +48,8 @@
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
-    "focus-trap": "^2.4.5"
+    "focus-trap": "^2.4.5",
+    "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
     "react": "^16.8.0",
@@ -57,8 +58,8 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^16.13.0",
-    "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/button": "^16.17.0",
+    "@atlaskit/icon": "^22.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",