@atlaskit/editor-toolbar 0.9.1 → 0.9.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [`6fb79942fc3a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fb79942fc3a5) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 0.9.1
 
 ### Patch Changes

package/dist/cjs/ui/ColorPalette/Color.compiled.css

@@ -1,5 +1,5 @@
 
-._19itcf40{border:var(--_1wr0y6w)}
+._19it1oet{border:var(--_y3tor4)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
@@ -19,6 +19,6 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._u5f3idpf{padding-right:0}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._y2mv12j9:focus{outline:var(--_toyvsf)}
+._y2mvuigy:focus{outline:var(--_1fve1bt)}
 ._858umuej:focus, ._jyzfmuej:focus-within, ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
 ._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}

package/dist/cjs/ui/ColorPalette/Color.js

@@ -62,12 +62,12 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     onMouseDown: handleMouseDown,
     tabIndex: tabIndex,
     autoFocus: autoFocus,
-    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1oet _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvuigy _1bg4v77o"]),
     style: {
       backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
-      border: "1px solid ".concat(borderColor),
-      "--_1wr0y6w": (0, _runtime.ix)("1px solid ".concat("var(--ds-border-inverse, #FFFFFF)")),
-      "--_toyvsf": (0, _runtime.ix)("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+      border: "var(--ds-border-width, 1px)".concat(" solid ", borderColor),
+      "--_y3tor4": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-inverse, #FFFFFF)")),
+      "--_1fve1bt": (0, _runtime.ix)("var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)"))
     }
   }, !decorator && isSelected && /*#__PURE__*/_react.default.createElement(_checkMarkEditorDone.default, {
     color: checkMarkColor,

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/ColorPalette/Color.compiled.css

@@ -1,5 +1,5 @@
 
-._19itv4vr{border:1px solid var(--ds-border-inverse,#fff)}
+._19it1ps9{border:var(--ds-border-width,1px) solid var(--ds-border-inverse,#fff)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
@@ -19,6 +19,6 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._u5f3idpf{padding-right:0}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._y2mvugt7:focus{outline:2px solid var(--ds-border-focused,#388bff)}
+._y2mv1q03:focus{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#388bff)}
 ._858umuej:focus, ._jyzfmuej:focus-within, ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
 ._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}

package/dist/es2019/ui/ColorPalette/Color.js

@@ -54,10 +54,10 @@ export const Color = /*#__PURE__*/memo(({
     tabIndex: tabIndex,
     style: {
       backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
-      border: `1px solid ${borderColor}`
+      border: `${"var(--ds-border-width, 1px)"} solid ${borderColor}`
     },
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19itv4vr _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvugt7 _1bg4v77o"])
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv1q03 _1bg4v77o"])
   }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
     color: checkMarkColor,
     LEGACY_primaryColor: checkMarkColor,

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/ColorPalette/Color.compiled.css

@@ -1,5 +1,5 @@
 
-._19itcf40{border:var(--_1wr0y6w)}
+._19it1oet{border:var(--_y3tor4)}
 ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
@@ -19,6 +19,6 @@
 ._n3tdv77o{padding-bottom:var(--ds-space-025,2px)}
 ._u5f3idpf{padding-right:0}
 ._u5f3v77o{padding-right:var(--ds-space-025,2px)}
-._y2mv12j9:focus{outline:var(--_toyvsf)}
+._y2mvuigy:focus{outline:var(--_1fve1bt)}
 ._858umuej:focus, ._jyzfmuej:focus-within, ._4cvxmuej:hover{border-color:var(--ds-border,#091e4224)}
 ._1bg4v77o:focus{outline-offset:var(--ds-space-025,2px)}

package/dist/esm/ui/ColorPalette/Color.js

@@ -53,12 +53,12 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
     onMouseDown: handleMouseDown,
     tabIndex: tabIndex,
     autoFocus: autoFocus,
-    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19itcf40 _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mv12j9 _1bg4v77o"]),
+    className: ax(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1oet _4t3icr4y _1bsbcr4y _bfhkm7j4 _80omtlke _1e0c1ule _kqswh2mm _y2mvuigy _1bg4v77o"]),
     style: {
       backgroundColor: colorStyle || "var(--ds-background-input, #FFFFFF)",
-      border: "1px solid ".concat(borderColor),
-      "--_1wr0y6w": ix("1px solid ".concat("var(--ds-border-inverse, #FFFFFF)")),
-      "--_toyvsf": ix("2px solid ".concat("var(--ds-border-focused, #388BFF)"))
+      border: "var(--ds-border-width, 1px)".concat(" solid ", borderColor),
+      "--_y3tor4": ix("var(--ds-border-width, 1px)".concat(" solid ", "var(--ds-border-inverse, #FFFFFF)")),
+      "--_1fve1bt": ix("var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)"))
     }
   }, !decorator && isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
     color: checkMarkColor,

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.1",
+	"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.22.0",
+		"@atlaskit/tmp-editor-statsig": "^12.25.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",