@atlaskit/editor-toolbar 1.4.0 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-toolbar
 
+## 1.4.1
+
+### Patch Changes
+
+- [`434b508cc2368`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/434b508cc2368) -
+  EDITOR-7104: Add `featured-section` placement to block menu selection extension API
+  - Add `featured-section` to `BlockMenuPlacement` type which registers a top-level section with a
+    separator
+  - Add `BLOCK_ACTIONS_TEMPLATE_SECTION` and `BLOCK_ACTIONS_FEATURED_EXTENSION_SECTION_KEYS`
+    constants to `editor-common`
+  - Render lozenge inline next to label text (not pushed to far right) for dropdown and nested
+    dropdown items
+  - Move "New" lozenge next to label for synced block dropdown items
+  - Block template/menu behaviour gated behind `platform_editor_block_menu_v2_patch_2`; synced-block
+    lozenge placement behaviour gated behind `platform_synced_block_patch_12`
+
+- Updated dependencies
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/ui/ToolbarDropdownItem.compiled.css

@@ -2,6 +2,7 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1hmsglyw{text-decoration-line:none}

package/dist/cjs/ui/ToolbarDropdownItem.js

@@ -20,7 +20,7 @@ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _ToolbarDropdownMenuContext = require("./ToolbarDropdownMenuContext");
 var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "tabIndex", "href", "target", "rel", "title"],
-  _excluded2 = ["onClick", "elemBefore", "elemAfter", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
+  _excluded2 = ["onClick", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
 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; }
@@ -29,7 +29,8 @@ var styles = {
   anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
   enabled: "_irr31dpa _1di6fcek",
   disabled: "_syaz1gmx _80om13gf",
-  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
+  elemAfterText: "_18u012x7"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
@@ -99,6 +100,7 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
   var _onClick = _ref3.onClick,
     elemBefore = _ref3.elemBefore,
     elemAfter = _ref3.elemAfter,
+    elemAfterText = _ref3.elemAfterText,
     isSelected = _ref3.isSelected,
     children = _ref3.children,
     isDisabled = _ref3.isDisabled,
@@ -154,5 +156,8 @@ var ToolbarDropdownItem = exports.ToolbarDropdownItem = function ToolbarDropdown
     title: title,
     shouldTitleWrap: shouldTitleWrap
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
+  }, (0, _expValEquals.expValEquals)('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children, elemAfterText ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: styles.elemAfterText
+  }, elemAfterText) : null);
 };

package/dist/cjs/ui/ToolbarNestedDropdownMenu.js

@@ -23,6 +23,7 @@ var styles = {
 var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
   var elemBefore = _ref.elemBefore,
     text = _ref.text,
+    elemAfterText = _ref.elemAfterText,
     elemAfter = _ref.elemAfter,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
@@ -57,7 +58,7 @@ var ToolbarNestedDropdownMenu = exports.ToolbarNestedDropdownMenu = function Too
         hasNestedDropdownMenu: true,
         isDisabled: isDisabled,
         shouldTitleWrap: shouldTitleWrap
-      }, text);
+      }, text, elemAfterText);
       if (tooltipContent) {
         return /*#__PURE__*/React.createElement(_ToolbarTooltip.ToolbarTooltip, {
           content: tooltipContent,

package/dist/es2019/ui/ToolbarDropdownItem.compiled.css

@@ -2,6 +2,7 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1hmsglyw{text-decoration-line:none}

package/dist/es2019/ui/ToolbarDropdownItem.js

@@ -5,7 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
+import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
@@ -14,7 +14,8 @@ const styles = {
   anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
   enabled: "_irr31dpa _1di6fcek",
   disabled: "_syaz1gmx _80om13gf",
-  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
+  elemAfterText: "_18u012x7"
 };
 const CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(({
   children,
@@ -82,6 +83,7 @@ export const ToolbarDropdownItem = ({
   onClick,
   elemBefore,
   elemAfter,
+  elemAfterText,
   isSelected,
   children,
   isDisabled,
@@ -138,5 +140,8 @@ export const ToolbarDropdownItem = ({
     title: title,
     shouldTitleWrap: shouldTitleWrap
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
+  }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children, elemAfterText ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.elemAfterText
+  }, elemAfterText) : null);
 };

package/dist/es2019/ui/ToolbarNestedDropdownMenu.js

@@ -14,6 +14,7 @@ const styles = {
 export const ToolbarNestedDropdownMenu = ({
   elemBefore,
   text,
+  elemAfterText,
   elemAfter,
   children,
   isDisabled,
@@ -47,7 +48,7 @@ export const ToolbarNestedDropdownMenu = ({
         hasNestedDropdownMenu: true,
         isDisabled: isDisabled,
         shouldTitleWrap: shouldTitleWrap
-      }, text);
+      }, text, elemAfterText);
       if (tooltipContent) {
         return /*#__PURE__*/React.createElement(ToolbarTooltip, {
           content: tooltipContent,

package/dist/esm/ui/ToolbarDropdownItem.compiled.css

@@ -2,6 +2,7 @@
 ._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
 ._1rjc1b66{padding-block:var(--ds-space-050,4px)}
+._18u012x7{margin-left:var(--ds-space-075,6px)}
 ._1bsb1osq{width:100%}
 ._1e0c1txw{display:flex}
 ._1hmsglyw{text-decoration-line:none}

package/dist/esm/ui/ToolbarDropdownItem.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "data-testid", "aria-haspopup", "aria-disabled", "aria-pressed", "aria-keyshortcuts", "onClick", "tabIndex", "href", "target", "rel", "title"],
-  _excluded2 = ["onClick", "elemBefore", "elemAfter", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
+  _excluded2 = ["onClick", "elemBefore", "elemAfter", "elemAfterText", "isSelected", "children", "isDisabled", "hasNestedDropdownMenu", "triggerRef", "title", "shouldTitleWrap", "testId", "ariaKeyshortcuts", "href", "target", "rel"];
 import "./ToolbarDropdownItem.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 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; }
@@ -11,7 +11,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { forwardRef, isValidElement, cloneElement } from 'react';
 import { cx } from '@atlaskit/css';
 import { DropdownItem } from '@atlaskit/dropdown-menu';
-import { Anchor, Pressable } from '@atlaskit/primitives/compiled';
+import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useToolbarDropdownMenu } from './ToolbarDropdownMenuContext';
@@ -20,7 +20,8 @@ var styles = {
   anchor: "_4bfu1r31 _1hmsglyw _ajmmnqa1 _1053azsu _9oik1r31 _1bnxglyw _jf4cnqa1 _30l3azsu",
   enabled: "_irr31dpa _1di6fcek",
   disabled: "_syaz1gmx _80om13gf",
-  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp"
+  selected: "_bfhk15s3 _syaz6x5g _irr3ufnl _1di6nozp",
+  elemAfterText: "_18u012x7"
 };
 var CustomDropdownMenuItemButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -90,6 +91,7 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
   var _onClick = _ref3.onClick,
     elemBefore = _ref3.elemBefore,
     elemAfter = _ref3.elemAfter,
+    elemAfterText = _ref3.elemAfterText,
     isSelected = _ref3.isSelected,
     children = _ref3.children,
     isDisabled = _ref3.isDisabled,
@@ -145,5 +147,8 @@ export var ToolbarDropdownItem = function ToolbarDropdownItem(_ref3) {
     title: title,
     shouldTitleWrap: shouldTitleWrap
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children);
+  }, expValEquals('platform_editor_renderer_toolbar_updates', 'isEnabled', true) ? dataAttributes : {}), children, elemAfterText ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: styles.elemAfterText
+  }, elemAfterText) : null);
 };

package/dist/esm/ui/ToolbarNestedDropdownMenu.js

@@ -14,6 +14,7 @@ var styles = {
 export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref) {
   var elemBefore = _ref.elemBefore,
     text = _ref.text,
+    elemAfterText = _ref.elemAfterText,
     elemAfter = _ref.elemAfter,
     children = _ref.children,
     isDisabled = _ref.isDisabled,
@@ -48,7 +49,7 @@ export var ToolbarNestedDropdownMenu = function ToolbarNestedDropdownMenu(_ref)
         hasNestedDropdownMenu: true,
         isDisabled: isDisabled,
         shouldTitleWrap: shouldTitleWrap
-      }, text);
+      }, text, elemAfterText);
       if (tooltipContent) {
         return /*#__PURE__*/React.createElement(ToolbarTooltip, {
           content: tooltipContent,

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

@@ -14,6 +14,7 @@ type ToolbarDropdownItemProps = {
     ariaKeyshortcuts?: string;
     children?: React.ReactNode;
     elemAfter?: ReactNode;
+    elemAfterText?: ReactNode;
     elemBefore?: ReactNode;
     hasNestedDropdownMenu?: boolean;
     href?: string;
@@ -28,5 +29,5 @@ type ToolbarDropdownItemProps = {
     title?: string;
     triggerRef?: Ref<HTMLButtonElement>;
 } & DataAttributes;
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ type ToolbarNestedDropdownMenuProps = {
     children?: ReactNode;
     dropdownTestId?: string;
     elemAfter: ReactNode;
+    elemAfterText?: ReactNode;
     elemBefore: ReactNode;
     /**
      * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
@@ -20,5 +21,5 @@ type ToolbarNestedDropdownMenuProps = {
     text?: string;
     tooltipContent?: ReactNode;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

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

@@ -14,6 +14,7 @@ type ToolbarDropdownItemProps = {
     ariaKeyshortcuts?: string;
     children?: React.ReactNode;
     elemAfter?: ReactNode;
+    elemAfterText?: ReactNode;
     elemBefore?: ReactNode;
     hasNestedDropdownMenu?: boolean;
     href?: string;
@@ -28,5 +29,5 @@ type ToolbarDropdownItemProps = {
     title?: string;
     triggerRef?: Ref<HTMLButtonElement>;
 } & DataAttributes;
-export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
+export declare const ToolbarDropdownItem: ({ onClick, elemBefore, elemAfter, elemAfterText, isSelected, children, isDisabled, hasNestedDropdownMenu, triggerRef, title, shouldTitleWrap, testId, ariaKeyshortcuts, href, target, rel, ...dataAttributes }: ToolbarDropdownItemProps) => React.JSX.Element;
 export {};

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

@@ -7,6 +7,7 @@ type ToolbarNestedDropdownMenuProps = {
     children?: ReactNode;
     dropdownTestId?: string;
     elemAfter: ReactNode;
+    elemAfterText?: ReactNode;
     elemBefore: ReactNode;
     /**
      * Enforeces a max height of 320px for menus - when menu is larger a scroll is introduced
@@ -20,5 +21,5 @@ type ToolbarNestedDropdownMenuProps = {
     text?: string;
     tooltipContent?: ReactNode;
 };
-export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
+export declare const ToolbarNestedDropdownMenu: ({ elemBefore, text, elemAfterText, elemAfter, children, isDisabled, testId, dropdownTestId, enableMaxHeight, onClick, shouldFitContainer, shouldTitleWrap, tooltipContent, }: ToolbarNestedDropdownMenuProps) => JSX.Element;
 export {};

package/package.json

@@ -3,7 +3,7 @@
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
 	},
-	"version": "1.4.0",
+	"version": "1.4.1",
 	"description": "Common UI for Toolbars across the platform",
 	"atlassian": {
 		"react-compiler": {
@@ -37,7 +37,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.19.0",
 		"@atlaskit/primitives": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^80.2.0",
+		"@atlaskit/tmp-editor-statsig": "^80.3.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@atlaskit/tooltip": "^22.2.0",
 		"@babel/runtime": "^7.0.0",