@atlaskit/editor-plugin-floating-toolbar 1.4.3 → 1.4.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-floating-toolbar
 
+## 1.4.4
+
+### Patch Changes
+
+-   [#98137](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/98137)
+    [`b1ddc8df2070`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b1ddc8df2070) -
+    [ED-23195] Refactor React components to use useRef inside functional components
+-   Updated dependencies
+
 ## 1.4.3
 
 ### Patch Changes

package/dist/cjs/ui/DropdownMenu.js

@@ -5,11 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.menuItemDimensions = exports.itemSpacing = exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
@@ -21,9 +16,12 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+/** @jsx jsx */
+
+// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
+
 var menuItemDimensions = exports.menuItemDimensions = {
   width: 175,
   height: 32
@@ -60,12 +58,21 @@ var itemSpacing = exports.itemSpacing = (0, _constants.gridSize)() / 2;
 // Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
 
 var DropdownButtonItem = _menu.ButtonItem;
-var DropdownMenuItem = function DropdownMenuItem(_ref) {
-  var item = _ref.item,
-    hide = _ref.hide,
-    dispatchCommand = _ref.dispatchCommand,
-    editorView = _ref.editorView,
-    iconBefore = _ref.iconBefore;
+var DropdownMenuItem = function DropdownMenuItem(props) {
+  var item = props.item,
+    hide = props.hide,
+    dispatchCommand = props.dispatchCommand,
+    editorView = props.editorView,
+    showSelected = props.showSelected,
+    intl = props.intl;
+  var itemSelected = item.selected;
+  var iconBefore = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(SelectedIconBefore, {
+      itemSelected: itemSelected,
+      showSelected: showSelected,
+      intl: intl
+    });
+  }, [itemSelected, showSelected, intl]);
   var _useState = (0, _react.useState)(item.tooltip || ''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     tooltipContent = _useState2[0],
@@ -127,7 +134,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
   }, [dispatchCommand, item.onClick, hide, editorView]);
 
   /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
-  var labelRef = /*#__PURE__*/(0, _react.createRef)();
+  var labelRef = (0, _react.useRef)(null);
   var handleTitleWrapperMouseEvent = (0, _react.useCallback)(function (e) {
     if (item.disabled) {
       e.stopPropagation();
@@ -185,68 +192,53 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
   }
   return itemContent;
 };
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var Dropdown = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Dropdown, _Component);
-  var _super = _createSuper(Dropdown);
-  function Dropdown() {
-    (0, _classCallCheck2.default)(this, Dropdown);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(Dropdown, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-      var _this$props = this.props,
-        hide = _this$props.hide,
-        dispatchCommand = _this$props.dispatchCommand,
-        items = _this$props.items,
-        intl = _this$props.intl,
-        editorView = _this$props.editorView;
-      return (0, _react2.jsx)("div", {
-        css: menuContainerStyles,
-        role: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'menu' : undefined
-      }, items.filter(function (item) {
-        return !item.hidden;
-      }).map(function (item, idx) {
-        return (0, _react2.jsx)(DropdownMenuItem, {
-          key: idx,
-          item: item,
-          hide: hide,
-          dispatchCommand: dispatchCommand,
-          editorView: editorView,
-          iconBefore: _this.renderSelected(item, intl)
-        });
-      }));
-    }
-  }, {
-    key: "renderSelected",
-    value: function renderSelected(item, intl) {
-      var _this$props$showSelec = this.props.showSelected,
-        showSelected = _this$props$showSelec === void 0 ? true : _this$props$showSelec;
-      var selected = item.selected;
-      if (showSelected && selected) {
-        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33')) {
-          return (0, _react2.jsx)("span", {
-            "aria-hidden": "true"
-          }, (0, _react2.jsx)(_done.default, {
-            primaryColor: "var(--ds-icon-selected, ".concat(_colors.B400, ")"),
-            size: "small",
-            label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK)
-          }));
-        }
-        return (0, _react2.jsx)(_done.default, {
-          primaryColor: "var(--ds-icon-selected, ".concat(_colors.B400, ")"),
-          size: "small",
-          label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK)
-        });
-      }
+var SelectedIconBefore = function SelectedIconBefore(_ref) {
+  var itemSelected = _ref.itemSelected,
+    intl = _ref.intl,
+    showSelected = _ref.showSelected;
+  if (showSelected && itemSelected) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33')) {
       return (0, _react2.jsx)("span", {
-        css: spacerStyles
-      });
+        "aria-hidden": "true"
+      }, (0, _react2.jsx)(_done.default, {
+        primaryColor: "var(--ds-icon-selected, ".concat(_colors.B400, ")"),
+        size: "small",
+        label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK)
+      }));
     }
-  }]);
-  return Dropdown;
-}(_react.Component);
+    return (0, _react2.jsx)(_done.default, {
+      primaryColor: "var(--ds-icon-selected, ".concat(_colors.B400, ")"),
+      size: "small",
+      label: intl.formatMessage(_floatingToolbar.messages.confirmModalOK)
+    });
+  }
+  return (0, _react2.jsx)("span", {
+    css: spacerStyles
+  });
+};
+var Dropdown = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var hide = props.hide,
+    dispatchCommand = props.dispatchCommand,
+    items = props.items,
+    intl = props.intl,
+    editorView = props.editorView,
+    _props$showSelected = props.showSelected,
+    showSelected = _props$showSelected === void 0 ? true : _props$showSelected;
+  return (0, _react2.jsx)("div", {
+    css: menuContainerStyles,
+    role: (0, _platformFeatureFlags.getBooleanFF)('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'menu' : undefined
+  }, items.filter(function (item) {
+    return !item.hidden;
+  }).map(function (item, idx) {
+    return (0, _react2.jsx)(DropdownMenuItem, {
+      key: idx,
+      item: item,
+      hide: hide,
+      dispatchCommand: dispatchCommand,
+      editorView: editorView,
+      showSelected: showSelected,
+      intl: intl
+    });
+  }));
+});
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(Dropdown);

package/dist/es2019/ui/DropdownMenu.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { Component, createRef, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -48,13 +48,23 @@ export const itemSpacing = gridSize() / 2;
 // Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
 
 const DropdownButtonItem = ButtonItem;
-const DropdownMenuItem = ({
-  item,
-  hide,
-  dispatchCommand,
-  editorView,
-  iconBefore
-}) => {
+const DropdownMenuItem = props => {
+  const {
+    item,
+    hide,
+    dispatchCommand,
+    editorView,
+    showSelected,
+    intl
+  } = props;
+  const itemSelected = item.selected;
+  const iconBefore = useMemo(() => {
+    return jsx(SelectedIconBefore, {
+      itemSelected: itemSelected,
+      showSelected: showSelected,
+      intl: intl
+    });
+  }, [itemSelected, showSelected, intl]);
   const [tooltipContent, setTooltipContent] = useState(item.tooltip || '');
   const handleItemMouseOut = useCallback(() => {
     setTooltipContent('');
@@ -113,7 +123,7 @@ const DropdownMenuItem = ({
   }, [dispatchCommand, item.onClick, hide, editorView]);
 
   /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
-  const labelRef = /*#__PURE__*/createRef();
+  const labelRef = useRef(null);
   const handleTitleWrapperMouseEvent = useCallback(e => {
     if (item.disabled) {
       e.stopPropagation();
@@ -175,55 +185,51 @@ const DropdownMenuItem = ({
   }
   return itemContent;
 };
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-class Dropdown extends Component {
-  render() {
-    const {
-      hide,
-      dispatchCommand,
-      items,
-      intl,
-      editorView
-    } = this.props;
-    return jsx("div", {
-      css: menuContainerStyles,
-      role: getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'menu' : undefined
-    }, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem, {
-      key: idx,
-      item: item,
-      hide: hide,
-      dispatchCommand: dispatchCommand,
-      editorView: editorView,
-      iconBefore: this.renderSelected(item, intl)
-    })));
-  }
-  renderSelected(item, intl) {
-    const {
-      showSelected = true
-    } = this.props;
-    const {
-      selected
-    } = item;
-    if (showSelected && selected) {
-      if (getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33')) {
-        return jsx("span", {
-          "aria-hidden": "true"
-        }, jsx(EditorDoneIcon, {
-          primaryColor: `var(--ds-icon-selected, ${B400})`,
-          size: "small",
-          label: intl.formatMessage(messages.confirmModalOK)
-        }));
-      }
-      return jsx(EditorDoneIcon, {
+const SelectedIconBefore = ({
+  itemSelected,
+  intl,
+  showSelected
+}) => {
+  if (showSelected && itemSelected) {
+    if (getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33')) {
+      return jsx("span", {
+        "aria-hidden": "true"
+      }, jsx(EditorDoneIcon, {
         primaryColor: `var(--ds-icon-selected, ${B400})`,
         size: "small",
         label: intl.formatMessage(messages.confirmModalOK)
-      });
+      }));
     }
-    return jsx("span", {
-      css: spacerStyles
+    return jsx(EditorDoneIcon, {
+      primaryColor: `var(--ds-icon-selected, ${B400})`,
+      size: "small",
+      label: intl.formatMessage(messages.confirmModalOK)
     });
   }
-}
+  return jsx("span", {
+    css: spacerStyles
+  });
+};
+const Dropdown = /*#__PURE__*/memo(props => {
+  const {
+    hide,
+    dispatchCommand,
+    items,
+    intl,
+    editorView,
+    showSelected = true
+  } = props;
+  return jsx("div", {
+    css: menuContainerStyles,
+    role: getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'menu' : undefined
+  }, items.filter(item => !item.hidden).map((item, idx) => jsx(DropdownMenuItem, {
+    key: idx,
+    item: item,
+    hide: hide,
+    dispatchCommand: dispatchCommand,
+    editorView: editorView,
+    showSelected: showSelected,
+    intl: intl
+  })));
+});
 export default injectIntl(Dropdown);

package/dist/esm/ui/DropdownMenu.js

@@ -1,13 +1,6 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /** @jsx jsx */
-import { Component, createRef, useCallback, useEffect, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 
@@ -56,12 +49,21 @@ export var itemSpacing = gridSize() / 2;
 // Extend the ButtonItem component type to allow mouse events to be accepted from the Typescript check
 
 var DropdownButtonItem = ButtonItem;
-var DropdownMenuItem = function DropdownMenuItem(_ref) {
-  var item = _ref.item,
-    hide = _ref.hide,
-    dispatchCommand = _ref.dispatchCommand,
-    editorView = _ref.editorView,
-    iconBefore = _ref.iconBefore;
+var DropdownMenuItem = function DropdownMenuItem(props) {
+  var item = props.item,
+    hide = props.hide,
+    dispatchCommand = props.dispatchCommand,
+    editorView = props.editorView,
+    showSelected = props.showSelected,
+    intl = props.intl;
+  var itemSelected = item.selected;
+  var iconBefore = useMemo(function () {
+    return jsx(SelectedIconBefore, {
+      itemSelected: itemSelected,
+      showSelected: showSelected,
+      intl: intl
+    });
+  }, [itemSelected, showSelected, intl]);
   var _useState = useState(item.tooltip || ''),
     _useState2 = _slicedToArray(_useState, 2),
     tooltipContent = _useState2[0],
@@ -123,7 +125,7 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
   }, [dispatchCommand, item.onClick, hide, editorView]);
 
   /* ED-16704 - Native mouse event handler to overcome firefox issue on disabled <button> - https://github.com/whatwg/html/issues/5886 */
-  var labelRef = /*#__PURE__*/createRef();
+  var labelRef = useRef(null);
   var handleTitleWrapperMouseEvent = useCallback(function (e) {
     if (item.disabled) {
       e.stopPropagation();
@@ -181,68 +183,53 @@ var DropdownMenuItem = function DropdownMenuItem(_ref) {
   }
   return itemContent;
 };
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-var Dropdown = /*#__PURE__*/function (_Component) {
-  _inherits(Dropdown, _Component);
-  var _super = _createSuper(Dropdown);
-  function Dropdown() {
-    _classCallCheck(this, Dropdown);
-    return _super.apply(this, arguments);
-  }
-  _createClass(Dropdown, [{
-    key: "render",
-    value: function render() {
-      var _this = this;
-      var _this$props = this.props,
-        hide = _this$props.hide,
-        dispatchCommand = _this$props.dispatchCommand,
-        items = _this$props.items,
-        intl = _this$props.intl,
-        editorView = _this$props.editorView;
-      return jsx("div", {
-        css: menuContainerStyles,
-        role: getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'menu' : undefined
-      }, items.filter(function (item) {
-        return !item.hidden;
-      }).map(function (item, idx) {
-        return jsx(DropdownMenuItem, {
-          key: idx,
-          item: item,
-          hide: hide,
-          dispatchCommand: dispatchCommand,
-          editorView: editorView,
-          iconBefore: _this.renderSelected(item, intl)
-        });
-      }));
-    }
-  }, {
-    key: "renderSelected",
-    value: function renderSelected(item, intl) {
-      var _this$props$showSelec = this.props.showSelected,
-        showSelected = _this$props$showSelec === void 0 ? true : _this$props$showSelec;
-      var selected = item.selected;
-      if (showSelected && selected) {
-        if (getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33')) {
-          return jsx("span", {
-            "aria-hidden": "true"
-          }, jsx(EditorDoneIcon, {
-            primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
-            size: "small",
-            label: intl.formatMessage(messages.confirmModalOK)
-          }));
-        }
-        return jsx(EditorDoneIcon, {
-          primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
-          size: "small",
-          label: intl.formatMessage(messages.confirmModalOK)
-        });
-      }
+var SelectedIconBefore = function SelectedIconBefore(_ref) {
+  var itemSelected = _ref.itemSelected,
+    intl = _ref.intl,
+    showSelected = _ref.showSelected;
+  if (showSelected && itemSelected) {
+    if (getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33')) {
       return jsx("span", {
-        css: spacerStyles
-      });
+        "aria-hidden": "true"
+      }, jsx(EditorDoneIcon, {
+        primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
+        size: "small",
+        label: intl.formatMessage(messages.confirmModalOK)
+      }));
     }
-  }]);
-  return Dropdown;
-}(Component);
+    return jsx(EditorDoneIcon, {
+      primaryColor: "var(--ds-icon-selected, ".concat(B400, ")"),
+      size: "small",
+      label: intl.formatMessage(messages.confirmModalOK)
+    });
+  }
+  return jsx("span", {
+    css: spacerStyles
+  });
+};
+var Dropdown = /*#__PURE__*/memo(function (props) {
+  var hide = props.hide,
+    dispatchCommand = props.dispatchCommand,
+    items = props.items,
+    intl = props.intl,
+    editorView = props.editorView,
+    _props$showSelected = props.showSelected,
+    showSelected = _props$showSelected === void 0 ? true : _props$showSelected;
+  return jsx("div", {
+    css: menuContainerStyles,
+    role: getBooleanFF('platform.editor.a11y-table-floating-toolbar-dropdown-menu_zkb33') ? 'menu' : undefined
+  }, items.filter(function (item) {
+    return !item.hidden;
+  }).map(function (item, idx) {
+    return jsx(DropdownMenuItem, {
+      key: idx,
+      item: item,
+      hide: hide,
+      dispatchCommand: dispatchCommand,
+      editorView: editorView,
+      showSelected: showSelected,
+      intl: intl
+    });
+  }));
+});
 export default injectIntl(Dropdown);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-floating-toolbar",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "description": "Floating toolbar plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -24,10 +24,10 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-utils": "^19.0.0",
+    "@atlaskit/adf-utils": "^19.1.0",
     "@atlaskit/button": "^17.14.0",
     "@atlaskit/checkbox": "^13.3.0",
-    "@atlaskit/editor-common": "^79.1.0",
+    "@atlaskit/editor-common": "^79.2.0",
     "@atlaskit/editor-palette": "1.6.0",
     "@atlaskit/editor-plugin-context-panel": "^1.1.0",
     "@atlaskit/editor-plugin-copy-button": "^1.1.0",