@atlaskit/editor-toolbar 2.0.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/ui/ToolbarButtonGroup.compiled.css +2 -7
  3. package/dist/cjs/ui/ToolbarButtonGroup.js +6 -10
  4. package/dist/cjs/ui/ToolbarMenuContainer.compiled.css +4 -1
  5. package/dist/cjs/ui/ToolbarMenuContainer.js +14 -3
  6. package/dist/es2019/ui/ToolbarButtonGroup.compiled.css +2 -7
  7. package/dist/es2019/ui/ToolbarButtonGroup.js +6 -10
  8. package/dist/es2019/ui/ToolbarMenuContainer.compiled.css +4 -1
  9. package/dist/es2019/ui/ToolbarMenuContainer.js +14 -3
  10. package/dist/esm/ui/ToolbarButtonGroup.compiled.css +2 -7
  11. package/dist/esm/ui/ToolbarButtonGroup.js +6 -10
  12. package/dist/esm/ui/ToolbarMenuContainer.compiled.css +4 -1
  13. package/dist/esm/ui/ToolbarMenuContainer.js +14 -3
  14. package/dist/types/ui/ToolbarMenuContainer.d.ts +9 -1
  15. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 2.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [`bf2fd74fd1221`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/bf2fd74fd1221) -
8
+ Cleanup platform_editor_toolbar_split_button_ui
9
+ - [`12f4372b86b8d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/12f4372b86b8d) -
10
+ Add `platform_editor_menu_radius_update` experiment that bumps the editor menu surface border
11
+ radius from `radius.small` (4px) to `radius.large` (8px). The block menu and paste actions menu
12
+ now consume the shared `ToolbarMenuContainer` surface rather than rolling their own, so they
13
+ inherit the gated radius along with `ToolbarMenuContainer`'s existing consumers (table and layout
14
+ menus).
15
+ - Updated dependencies
16
+
3
17
  ## 2.0.0
4
18
 
5
19
  ### Major Changes
package/dist/cjs/ui/ToolbarButtonGroup.compiled.css CHANGED
@@ -1,13 +1,8 @@
1
1
 
2
2
  ._zulpv77o{gap:var(--ds-space-025,2px)}
3
- ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
4
- ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
3
+ ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
5
4
  ._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
6
5
  ._1e0c1txw{display:flex}
7
- ._1jiyidpf button{border-bottom-left-radius:0}
8
6
  ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
9
7
  ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
10
- ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
11
- ._t1diidpf button{border-top-right-radius:0}
12
- ._u6eridpf button{border-bottom-right-radius:0}
13
- ._xk07idpf button{border-top-left-radius:0}
8
+ ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
package/dist/cjs/ui/ToolbarButtonGroup.js CHANGED
@@ -12,15 +12,11 @@ var React = _react;
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
14
  var _compiled = require("@atlaskit/primitives/compiled");
15
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
16
15
  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); }
17
16
  var styles = {
18
- container: "_1e0c1txw",
19
- containerNew: "_zulpv77o _1e0c1txw _14jy1dpa",
20
- firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
21
- lastChild: "_fb2512x7 _xk07idpf _1jiyidpf",
22
- firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
23
- lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
17
+ container: "_zulpv77o _1e0c1txw _14jy1dpa",
18
+ firstChild: "_19pe12x7 _1qq0idpf _3nesidpf",
19
+ lastChild: "_19pe12x7 _15rdidpf _i84vidpf"
24
20
  };
25
21
  var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
26
22
  var children = _ref.children;
@@ -31,11 +27,11 @@ var ToolbarButtonGroup = exports.ToolbarButtonGroup = function ToolbarButtonGrou
31
27
  var LastChild = (0, _platformFeatureFlags.fg)('platform_editor_fix_t_at_is_not_a_function') ? items[items.length - 1] : items.at(-1);
32
28
  var middleChildren = items.slice(1, -1);
33
29
  return /*#__PURE__*/React.createElement(_compiled.Box, {
34
- xcss: (0, _expValEquals.expValEquals)('platform_editor_toolbar_split_button_ui', 'isEnabled', true) ? styles.containerNew : styles.container,
30
+ xcss: styles.container,
35
31
  "data-toolbar-component": "button-group"
36
32
  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
37
- className: (0, _runtime.ax)([styles.firstChildNew])
33
+ className: (0, _runtime.ax)([styles.firstChild])
38
34
  }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
39
- className: (0, _runtime.ax)([styles.lastChildNew])
35
+ className: (0, _runtime.ax)([styles.lastChild])
40
36
  }, LastChild)));
41
37
  };
package/dist/cjs/ui/ToolbarMenuContainer.compiled.css CHANGED
@@ -1,3 +1,6 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
4
+ ._1cc0glyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])~*){border-block-start:none}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
5
+ ._1k2yglyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])){display:none}
3
6
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
package/dist/cjs/ui/ToolbarMenuContainer.js CHANGED
@@ -9,10 +9,14 @@ exports.ToolbarMenuContainer = void 0;
9
9
  require("./ToolbarMenuContainer.compiled.css");
10
10
  var _runtime = require("@compiled/react/runtime");
11
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var _css = require("@atlaskit/css");
12
13
  var _compiled = require("@atlaskit/primitives/compiled");
14
+ var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
13
15
  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); }
14
16
  var styles = {
15
- container: "_2rko12b0 _bfhk1bhr _16qs130s"
17
+ container: "_2rko12b0 _bfhk1bhr _16qs130s",
18
+ radiusUpdate: "_2rko1mok",
19
+ emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
16
20
  };
17
21
  /**
18
22
  * Shared visual shell for popup-hosted editor toolbar menus.
@@ -20,9 +24,16 @@ var styles = {
20
24
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
21
25
  */
22
26
  var ToolbarMenuContainer = exports.ToolbarMenuContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
23
- var children = _ref.children;
27
+ var children = _ref.children,
28
+ onMouseDown = _ref.onMouseDown,
29
+ onMouseEnter = _ref.onMouseEnter,
30
+ testId = _ref.testId,
31
+ xcss = _ref.xcss;
24
32
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
25
- xcss: styles.container,
33
+ xcss: (0, _css.cx)(styles.container, (0, _expValEquals.expValEquals)('platform_editor_menu_radius_update', 'isEnabled', true) && styles.radiusUpdate, (0, _expValEquals.expValEquals)('platform_editor_menu_radius_update', 'isEnabled', true) && styles.emptyMenuSectionStyles, (0, _expValEquals.expValEquals)('platform_editor_menu_radius_update', 'isEnabled', true) && xcss),
34
+ testId: testId,
35
+ onMouseDown: onMouseDown,
36
+ onMouseEnter: onMouseEnter,
26
37
  "data-toolbar-component": "menu",
27
38
  role: "menu",
28
39
  ref: ref
package/dist/es2019/ui/ToolbarButtonGroup.compiled.css CHANGED
@@ -1,13 +1,8 @@
1
1
 
2
2
  ._zulpv77o{gap:var(--ds-space-025,2px)}
3
- ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
4
- ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
3
+ ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
5
4
  ._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
6
5
  ._1e0c1txw{display:flex}
7
- ._1jiyidpf button{border-bottom-left-radius:0}
8
6
  ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
9
7
  ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
10
- ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
11
- ._t1diidpf button{border-top-right-radius:0}
12
- ._u6eridpf button{border-bottom-right-radius:0}
13
- ._xk07idpf button{border-top-left-radius:0}
8
+ ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
package/dist/es2019/ui/ToolbarButtonGroup.js CHANGED
@@ -5,14 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children, Fragment } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { Box } from '@atlaskit/primitives/compiled';
8
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
8
  const styles = {
10
- container: "_1e0c1txw",
11
- containerNew: "_zulpv77o _1e0c1txw _14jy1dpa",
12
- firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
13
- lastChild: "_fb2512x7 _xk07idpf _1jiyidpf",
14
- firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
15
- lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
9
+ container: "_zulpv77o _1e0c1txw _14jy1dpa",
10
+ firstChild: "_19pe12x7 _1qq0idpf _3nesidpf",
11
+ lastChild: "_19pe12x7 _15rdidpf _i84vidpf"
16
12
  };
17
13
  export const ToolbarButtonGroup = ({
18
14
  children
@@ -24,11 +20,11 @@ export const ToolbarButtonGroup = ({
24
20
  const LastChild = fg('platform_editor_fix_t_at_is_not_a_function') ? items[items.length - 1] : items.at(-1);
25
21
  const middleChildren = items.slice(1, -1);
26
22
  return /*#__PURE__*/React.createElement(Box, {
27
- xcss: expValEquals('platform_editor_toolbar_split_button_ui', 'isEnabled', true) ? styles.containerNew : styles.container,
23
+ xcss: styles.container,
28
24
  "data-toolbar-component": "button-group"
29
25
  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
30
- className: ax([styles.firstChildNew])
26
+ className: ax([styles.firstChild])
31
27
  }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
32
- className: ax([styles.lastChildNew])
28
+ className: ax([styles.lastChild])
33
29
  }, LastChild)));
34
30
  };
package/dist/es2019/ui/ToolbarMenuContainer.compiled.css CHANGED
@@ -1,3 +1,6 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
4
+ ._1cc0glyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])~*){border-block-start:none}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
5
+ ._1k2yglyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])){display:none}
3
6
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
package/dist/es2019/ui/ToolbarMenuContainer.js CHANGED
@@ -2,9 +2,13 @@
2
2
  import "./ToolbarMenuContainer.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { forwardRef } from 'react';
5
+ import { cx } from '@atlaskit/css';
5
6
  import { Box } from '@atlaskit/primitives/compiled';
7
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
8
  const styles = {
7
- container: "_2rko12b0 _bfhk1bhr _16qs130s"
9
+ container: "_2rko12b0 _bfhk1bhr _16qs130s",
10
+ radiusUpdate: "_2rko1mok",
11
+ emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
8
12
  };
9
13
  /**
10
14
  * Shared visual shell for popup-hosted editor toolbar menus.
@@ -12,10 +16,17 @@ const styles = {
12
16
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
13
17
  */
14
18
  export const ToolbarMenuContainer = /*#__PURE__*/forwardRef(({
15
- children
19
+ children,
20
+ onMouseDown,
21
+ onMouseEnter,
22
+ testId,
23
+ xcss
16
24
  }, ref) => {
17
25
  return /*#__PURE__*/React.createElement(Box, {
18
- xcss: styles.container,
26
+ xcss: cx(styles.container, expValEquals('platform_editor_menu_radius_update', 'isEnabled', true) && styles.radiusUpdate, expValEquals('platform_editor_menu_radius_update', 'isEnabled', true) && styles.emptyMenuSectionStyles, expValEquals('platform_editor_menu_radius_update', 'isEnabled', true) && xcss),
27
+ testId: testId,
28
+ onMouseDown: onMouseDown,
29
+ onMouseEnter: onMouseEnter,
19
30
  "data-toolbar-component": "menu",
20
31
  role: "menu",
21
32
  ref: ref
package/dist/esm/ui/ToolbarButtonGroup.compiled.css CHANGED
@@ -1,13 +1,8 @@
1
1
 
2
2
  ._zulpv77o{gap:var(--ds-space-025,2px)}
3
- ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}
4
- ._fb2512x7 button{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
3
+ ._19pe12x7 [data-toolbar-component=button]{padding-inline:var(--ds-space-075,6px)}._14jy1dpa:has([data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):hover) [data-toolbar-component=button]:not([aria-pressed=true]):not([disabled]):not(:hover){background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
5
4
  ._15rdidpf [data-toolbar-component=button]{border-top-left-radius:0}
6
5
  ._1e0c1txw{display:flex}
7
- ._1jiyidpf button{border-bottom-left-radius:0}
8
6
  ._1qq0idpf [data-toolbar-component=button]{border-top-right-radius:0}
9
7
  ._3nesidpf [data-toolbar-component=button]{border-bottom-right-radius:0}
10
- ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
11
- ._t1diidpf button{border-top-right-radius:0}
12
- ._u6eridpf button{border-bottom-right-radius:0}
13
- ._xk07idpf button{border-top-left-radius:0}
8
+ ._i84vidpf [data-toolbar-component=button]{border-bottom-left-radius:0}
package/dist/esm/ui/ToolbarButtonGroup.js CHANGED
@@ -5,14 +5,10 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { Children, Fragment } from 'react';
6
6
  import { fg } from '@atlaskit/platform-feature-flags';
7
7
  import { Box } from '@atlaskit/primitives/compiled';
8
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
9
8
  var styles = {
10
- container: "_1e0c1txw",
11
- containerNew: "_zulpv77o _1e0c1txw _14jy1dpa",
12
- firstChild: "_fb2512x7 _t1diidpf _u6eridpf",
13
- lastChild: "_fb2512x7 _xk07idpf _1jiyidpf",
14
- firstChildNew: "_19pe12x7 _1qq0idpf _3nesidpf",
15
- lastChildNew: "_19pe12x7 _15rdidpf _i84vidpf"
9
+ container: "_zulpv77o _1e0c1txw _14jy1dpa",
10
+ firstChild: "_19pe12x7 _1qq0idpf _3nesidpf",
11
+ lastChild: "_19pe12x7 _15rdidpf _i84vidpf"
16
12
  };
17
13
  export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
18
14
  var children = _ref.children;
@@ -23,11 +19,11 @@ export var ToolbarButtonGroup = function ToolbarButtonGroup(_ref) {
23
19
  var LastChild = fg('platform_editor_fix_t_at_is_not_a_function') ? items[items.length - 1] : items.at(-1);
24
20
  var middleChildren = items.slice(1, -1);
25
21
  return /*#__PURE__*/React.createElement(Box, {
26
- xcss: expValEquals('platform_editor_toolbar_split_button_ui', 'isEnabled', true) ? styles.containerNew : styles.container,
22
+ xcss: styles.container,
27
23
  "data-toolbar-component": "button-group"
28
24
  }, items.length <= 1 ? children : /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
29
- className: ax([styles.firstChildNew])
25
+ className: ax([styles.firstChild])
30
26
  }, FirstChild), middleChildren, /*#__PURE__*/React.createElement("div", {
31
- className: ax([styles.lastChildNew])
27
+ className: ax([styles.lastChild])
32
28
  }, LastChild)));
33
29
  };
package/dist/esm/ui/ToolbarMenuContainer.compiled.css CHANGED
@@ -1,3 +1,6 @@
1
1
 
2
- ._2rko12b0{border-radius:var(--ds-radius-small,4px)}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
2
+ ._2rko12b0{border-radius:var(--ds-radius-small,4px)}
3
+ ._2rko1mok{border-radius:var(--ds-radius-large,8px)}
4
+ ._1cc0glyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])~*){border-block-start:none}._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}
5
+ ._1k2yglyw [data-toolbar-component=menu-section]:not(:has([data-toolbar-component=menu-item])){display:none}
3
6
  ._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
package/dist/esm/ui/ToolbarMenuContainer.js CHANGED
@@ -2,9 +2,13 @@
2
2
  import "./ToolbarMenuContainer.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { forwardRef } from 'react';
5
+ import { cx } from '@atlaskit/css';
5
6
  import { Box } from '@atlaskit/primitives/compiled';
7
+ import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
6
8
  var styles = {
7
- container: "_2rko12b0 _bfhk1bhr _16qs130s"
9
+ container: "_2rko12b0 _bfhk1bhr _16qs130s",
10
+ radiusUpdate: "_2rko1mok",
11
+ emptyMenuSectionStyles: "_1cc0glyw _1k2yglyw"
8
12
  };
9
13
  /**
10
14
  * Shared visual shell for popup-hosted editor toolbar menus.
@@ -12,9 +16,16 @@ var styles = {
12
16
  * This intentionally does not provide a trigger or popup positioning; callers own those concerns.
13
17
  */
14
18
  export var ToolbarMenuContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
15
- var children = _ref.children;
19
+ var children = _ref.children,
20
+ onMouseDown = _ref.onMouseDown,
21
+ onMouseEnter = _ref.onMouseEnter,
22
+ testId = _ref.testId,
23
+ xcss = _ref.xcss;
16
24
  return /*#__PURE__*/React.createElement(Box, {
17
- xcss: styles.container,
25
+ xcss: cx(styles.container, expValEquals('platform_editor_menu_radius_update', 'isEnabled', true) && styles.radiusUpdate, expValEquals('platform_editor_menu_radius_update', 'isEnabled', true) && styles.emptyMenuSectionStyles, expValEquals('platform_editor_menu_radius_update', 'isEnabled', true) && xcss),
26
+ testId: testId,
27
+ onMouseDown: onMouseDown,
28
+ onMouseEnter: onMouseEnter,
18
29
  "data-toolbar-component": "menu",
19
30
  role: "menu",
20
31
  ref: ref
package/dist/types/ui/ToolbarMenuContainer.d.ts CHANGED
@@ -3,9 +3,17 @@
3
3
  * @jsx jsx
4
4
  */
5
5
  import React from 'react';
6
- import type { ReactNode } from 'react';
6
+ import type { MouseEventHandler, ReactNode } from 'react';
7
+ import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
7
8
  type ToolbarMenuContainerProps = {
8
9
  children?: ReactNode;
10
+ onMouseDown?: MouseEventHandler<HTMLDivElement>;
11
+ onMouseEnter?: MouseEventHandler<HTMLDivElement>;
12
+ testId?: string;
13
+ /**
14
+ * Additional styles to merge onto the menu surface (e.g. a max-width constraint).
15
+ */
16
+ xcss?: StrictXCSSProp<Exclude<XCSSAllProperties, 'background'>, XCSSAllPseudos>;
9
17
  };
10
18
  /**
11
19
  * Shared visual shell for popup-hosted editor toolbar menus.
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "2.0.0",
6
+ "version": "2.0.1",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "react-compiler": {
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/platform-feature-flags": "^2.0.0",
38
38
  "@atlaskit/popup": "^5.0.0",
39
39
  "@atlaskit/primitives": "^20.0.0",
40
- "@atlaskit/tmp-editor-statsig": "^104.0.0",
40
+ "@atlaskit/tmp-editor-statsig": "^105.0.0",
41
41
  "@atlaskit/tokens": "^14.0.0",
42
42
  "@atlaskit/tooltip": "^23.0.0",
43
43
  "@babel/runtime": "^7.0.0",