@atlaskit/editor-toolbar 0.9.2 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-toolbar
 
+## 0.9.3
+
+### Patch Changes
+
+- [`19b70bcbda751`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/19b70bcbda751) -
+  [ux] ED-29181 Keyboard shortcuts should appear disabled in menu item
+- Updated dependencies
+
 ## 0.9.2
 
 ### Patch Changes

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -1,6 +1,7 @@
 /* ToolbarDropdownItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -8,6 +9,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToolbarDropdownItem = void 0;
 require("./ToolbarDropdownItem.compiled.css");
 var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _css = require("@atlaskit/css");
 var _dropdownMenu = require("@atlaskit/dropdown-menu");
@@ -15,6 +17,8 @@ var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var styles = {
   toolbarDropdownItem: "_11c82smr _18zrutpp _1rjc1b66 _1e0c1txw _kqswh2mm _bfhksm61 _1bsb1osq _1tkezwfg _1ul9eoa3 _syaz1gjq _1bas12b0 _1ah31i6y",
   enabled: "_irr3166n _1di61dty",
@@ -60,6 +64,18 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     target = _ref2.target,
     rel = _ref2.rel;
   var parentContext = (0, _ToolbarDropdownMenuContext.useToolbarDropdownMenuNew)();
+  var injectedElemAfter = function () {
+    if (! /*#__PURE__*/(0, _react.isValidElement)(elemAfter)) {
+      return elemAfter;
+    }
+    var elementProps = elemAfter.props;
+    if ('isDisabled' in elementProps) {
+      return elemAfter;
+    }
+    return /*#__PURE__*/(0, _react.cloneElement)(elemAfter, _objectSpread(_objectSpread({}, elementProps), {}, {
+      isDisabled: isDisabled
+    }));
+  }();
   return /*#__PURE__*/_react.default.createElement(_dropdownMenu.DropdownItem, {
     onClick: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? function (e) {
       if (!hasNestedDropdownMenu) {
@@ -68,7 +84,7 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
       onClick === null || onClick === void 0 || onClick(e);
     } : onClick,
     elemBefore: elemBefore,
-    elemAfter: elemAfter,
+    elemAfter: (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? injectedElemAfter : elemAfter,
     isSelected: isSelected,
     isDisabled: isDisabled,
     "aria-haspopup": hasNestedDropdownMenu,

package/dist/cjs/ui/ToolbarKeyboardShortcutHint.js

@@ -7,7 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.ToolbarKeyboardShortcutHint = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _badge = _interopRequireDefault(require("@atlaskit/badge"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var ToolbarKeyboardShortcutHint = exports.ToolbarKeyboardShortcutHint = function ToolbarKeyboardShortcutHint(_ref) {
-  var shortcut = _ref.shortcut;
+  var shortcut = _ref.shortcut,
+    isDisabled = _ref.isDisabled;
+  if (isDisabled && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
+    return /*#__PURE__*/_react.default.createElement(_badge.default, {
+      appearance: "primaryInverted"
+    }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+      color: "color.text.disabled"
+    }, shortcut));
+  }
   return /*#__PURE__*/_react.default.createElement(_badge.default, null, shortcut);
 };

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -1,7 +1,7 @@
 /* ToolbarDropdownItem.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./ToolbarDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef } from 'react';
+import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
@@ -51,6 +51,19 @@ export const ToolbarDropdownItem = ({
   rel
 }) => {
   const parentContext = useToolbarDropdownMenuNew();
+  const injectedElemAfter = (() => {
+    if (! /*#__PURE__*/isValidElement(elemAfter)) {
+      return elemAfter;
+    }
+    const elementProps = elemAfter.props;
+    if ('isDisabled' in elementProps) {
+      return elemAfter;
+    }
+    return /*#__PURE__*/cloneElement(elemAfter, {
+      ...elementProps,
+      isDisabled
+    });
+  })();
   return /*#__PURE__*/React.createElement(DropdownItem, {
     onClick: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? e => {
       if (!hasNestedDropdownMenu) {
@@ -59,7 +72,7 @@ export const ToolbarDropdownItem = ({
       onClick === null || onClick === void 0 ? void 0 : onClick(e);
     } : onClick,
     elemBefore: elemBefore,
-    elemAfter: elemAfter,
+    elemAfter: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? injectedElemAfter : elemAfter,
     isSelected: isSelected,
     isDisabled: isDisabled,
     "aria-haspopup": hasNestedDropdownMenu,

package/dist/es2019/ui/ToolbarKeyboardShortcutHint.js

@@ -1,7 +1,17 @@
 import React from 'react';
 import Badge from '@atlaskit/badge';
+import { Text } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export const ToolbarKeyboardShortcutHint = ({
-  shortcut
+  shortcut,
+  isDisabled
 }) => {
+  if (isDisabled && expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(Badge, {
+      appearance: "primaryInverted"
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "color.text.disabled"
+    }, shortcut));
+  }
   return /*#__PURE__*/React.createElement(Badge, null, shortcut);
 };

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -1,7 +1,10 @@
 /* ToolbarDropdownItem.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./ToolbarDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef } from 'react';
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
 import { Pressable } from '@atlaskit/primitives/compiled';
@@ -52,6 +55,18 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
     target = _ref2.target,
     rel = _ref2.rel;
   var parentContext = useToolbarDropdownMenuNew();
+  var injectedElemAfter = function () {
+    if (! /*#__PURE__*/isValidElement(elemAfter)) {
+      return elemAfter;
+    }
+    var elementProps = elemAfter.props;
+    if ('isDisabled' in elementProps) {
+      return elemAfter;
+    }
+    return /*#__PURE__*/cloneElement(elemAfter, _objectSpread(_objectSpread({}, elementProps), {}, {
+      isDisabled: isDisabled
+    }));
+  }();
   return /*#__PURE__*/React.createElement(DropdownItem, {
     onClick: expValEquals('platform_editor_toolbar_aifc_patch_1', 'isEnabled', true) ? function (e) {
       if (!hasNestedDropdownMenu) {
@@ -60,7 +75,7 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref2) {
       onClick === null || onClick === void 0 || onClick(e);
     } : onClick,
     elemBefore: elemBefore,
-    elemAfter: elemAfter,
+    elemAfter: expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true) ? injectedElemAfter : elemAfter,
     isSelected: isSelected,
     isDisabled: isDisabled,
     "aria-haspopup": hasNestedDropdownMenu,

package/dist/esm/ui/ToolbarKeyboardShortcutHint.js

@@ -1,6 +1,16 @@
 import React from 'react';
 import Badge from '@atlaskit/badge';
+import { Text } from '@atlaskit/primitives/compiled';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 export var ToolbarKeyboardShortcutHint = function ToolbarKeyboardShortcutHint(_ref) {
-  var shortcut = _ref.shortcut;
+  var shortcut = _ref.shortcut,
+    isDisabled = _ref.isDisabled;
+  if (isDisabled && expValEquals('platform_editor_toolbar_aifc_patch_5', 'isEnabled', true)) {
+    return /*#__PURE__*/React.createElement(Badge, {
+      appearance: "primaryInverted"
+    }, /*#__PURE__*/React.createElement(Text, {
+      color: "color.text.disabled"
+    }, shortcut));
+  }
   return /*#__PURE__*/React.createElement(Badge, null, shortcut);
 };

package/dist/types/ui/ToolbarKeyboardShortcutHint.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type ToolbarKeyboardShortcutHintProps = {
+    isDisabled?: boolean;
     shortcut: string;
 };
-export declare const ToolbarKeyboardShortcutHint: ({ shortcut }: ToolbarKeyboardShortcutHintProps) => React.JSX.Element;
+export declare const ToolbarKeyboardShortcutHint: ({ shortcut, isDisabled, }: ToolbarKeyboardShortcutHintProps) => React.JSX.Element;
 export {};

package/dist/types-ts4.5/ui/ToolbarKeyboardShortcutHint.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type ToolbarKeyboardShortcutHintProps = {
+    isDisabled?: boolean;
     shortcut: string;
 };
-export declare const ToolbarKeyboardShortcutHint: ({ shortcut }: ToolbarKeyboardShortcutHintProps) => React.JSX.Element;
+export declare const ToolbarKeyboardShortcutHint: ({ shortcut, isDisabled, }: ToolbarKeyboardShortcutHintProps) => React.JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "0.9.2",
+	"version": "0.9.3",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"team": "Editor: Jenga",
@@ -32,7 +32,7 @@
 		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.4.0",
 		"@atlaskit/primitives": "^14.14.0",
-		"@atlaskit/tmp-editor-statsig": "^12.24.0",
+		"@atlaskit/tmp-editor-statsig": "^12.25.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",