@atlaskit/editor-toolbar 0.18.2 → 0.18.4

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 (16) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/ui/ColorPalette/Color.js +2 -2
  3. package/dist/cjs/ui/ResponsiveContainer.compiled.css +38 -13
  4. package/dist/cjs/ui/ResponsiveContainer.js +9 -8
  5. package/dist/cjs/ui/Show.js +11 -6
  6. package/dist/es2019/ui/ColorPalette/Color.js +1 -1
  7. package/dist/es2019/ui/ResponsiveContainer.compiled.css +38 -13
  8. package/dist/es2019/ui/ResponsiveContainer.js +9 -8
  9. package/dist/es2019/ui/Show.js +11 -6
  10. package/dist/esm/ui/ColorPalette/Color.js +1 -1
  11. package/dist/esm/ui/ResponsiveContainer.compiled.css +38 -13
  12. package/dist/esm/ui/ResponsiveContainer.js +9 -8
  13. package/dist/esm/ui/Show.js +11 -6
  14. package/dist/types/ui/Show.d.ts +9 -2
  15. package/dist/types-ts4.5/ui/Show.d.ts +9 -2
  16. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/editor-toolbar
2
2
 
3
+ ## 0.18.4
4
+
5
+ ### Patch Changes
6
+
7
+ - [`90abe9b926a6f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/90abe9b926a6f) -
8
+ Icon entrypoint migration
9
+
10
+ ## 0.18.3
11
+
12
+ ### Patch Changes
13
+
14
+ - [`63c5e344d169c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/63c5e344d169c) -
15
+ Reduce the VC impact of the editor toolbar
16
+ - Updated dependencies
17
+
3
18
  ## 0.18.2
4
19
 
5
20
  ### Patch Changes
package/dist/cjs/ui/ColorPalette/Color.js CHANGED
@@ -10,7 +10,7 @@ exports.Color = void 0;
10
10
  require("./Color.compiled.css");
11
11
  var _runtime = require("@compiled/react/runtime");
12
12
  var _react = _interopRequireWildcard(require("react"));
13
- var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
13
+ var _checkMark = _interopRequireDefault(require("@atlaskit/icon/core/check-mark"));
14
14
  var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
15
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); }
16
16
  var buttonWrapperStyles = null;
@@ -67,7 +67,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
67
67
  },
68
68
  autoFocus: autoFocus,
69
69
  className: (0, _runtime.ax)(["_ca0qidpf _u5f3idpf _n3tdidpf _19bvidpf _2rko12b0 _19it1ps9 _4t3icr4y _1bsbcr4y _bfhki8nm _80omtlke _1e0c1ule _kqswh2mm _y2mvdfik _1bg4v77o"])
70
- }, !decorator && isSelected && /*#__PURE__*/_react.default.createElement(_checkMarkEditorDone.default, {
70
+ }, !decorator && isSelected && /*#__PURE__*/_react.default.createElement(_checkMark.default, {
71
71
  color: checkMarkColor,
72
72
  LEGACY_primaryColor: checkMarkColor,
73
73
  label: ""
package/dist/cjs/ui/ResponsiveContainer.compiled.css CHANGED
@@ -1,37 +1,62 @@
1
1
  ._1a2cglyw .show-below-md{display:none}
2
+ ._1bsb1ns9{width:-moz-fit-content;width:fit-content}
2
3
  ._1bsb1osq{width:100%}
3
4
  ._1bx91ule .show-above-lg{display:block}
5
+ ._1eadglyw .show-only-sm{display:none}
4
6
  ._1ehg1ule .show-above-md{display:block}
5
7
  ._1f38ptqj{container-name:toolbar-container}
8
+ ._1ir3glyw .show-only-lg{display:none}
6
9
  ._1onx1ule .show-above-sm{display:block}
10
+ ._1vp2glyw .show-only-md{display:none}
7
11
  ._1vtcglyw .show-below-xl{display:none}
8
12
  ._1xt01ule .show-above-xl{display:block}
9
13
  ._7cca15wb{container-type:inline-size}
14
+ ._a6zzglyw .show-only-xl{display:none}
10
15
  ._sum2glyw .show-below-sm{display:none}
11
16
  ._zg9wglyw .show-below-lg{display:none}
12
17
  @container editor-area (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
13
18
  @container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
14
19
  @container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
20
+ @container toolbar-container (max-width: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
15
21
  @container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
22
+ @container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
16
23
  @container toolbar-container (max-width: 210px){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
17
- @container toolbar-container (max-width: 280px){._3tohglyw._3tohglyw .show-above-sm{display:none}._b5je1ule._b5je1ule .show-below-sm{display:block}}
18
- @container toolbar-container (max-width: 296px){._hs8tglyw._hs8tglyw .show-above-sm{display:none}._905a1ule._905a1ule .show-below-sm{display:block}}
19
- @container toolbar-container (max-width: 365px){._gp7jglyw._gp7jglyw .show-above-sm{display:none}._luyr1ule._luyr1ule .show-below-sm{display:block}}
24
+ @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
25
+ @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
26
+ @container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
27
+ @container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
20
28
  @container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
21
29
  @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
22
- @container toolbar-container (max-width: 420px){._1y2iglyw._1y2iglyw .show-above-md{display:none}._w3191ule._w3191ule .show-below-md{display:block}}
23
- @container toolbar-container (max-width: 422px){._13hjglyw .show-above-sm{display:none}._1k421ule .show-below-sm{display:block}}
24
- @container toolbar-container (max-width: 432px){._1jd6glyw._1jd6glyw .show-above-md{display:none}._qp9j1ule._qp9j1ule .show-below-md{display:block}}
30
+ @container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
31
+ @container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
32
+ @container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
25
33
  @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
26
- @container toolbar-container (max-width: 500px){._1gcoglyw._1gcoglyw .show-above-md{display:none}._bx071ule._bx071ule .show-below-md{display:block}}
34
+ @container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
27
35
  @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
28
- @container toolbar-container (max-width: 630px){._dtzlglyw._dtzlglyw .show-above-lg{display:none}._5ur11ule._5ur11ule .show-below-lg{display:block}}
29
- @container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
30
- @container toolbar-container (max-width: 650px){._tr9jglyw._tr9jglyw .show-above-lg{display:none}._1xve1ule._1xve1ule .show-below-lg{display:block}}
31
- @container toolbar-container (max-width: 662px){._13ybglyw._13ybglyw .show-above-lg{display:none}._1il51ule._1il51ule .show-below-lg{display:block}}
32
- @container toolbar-container (max-width: 722px){._1tj8glyw .show-above-md{display:none}._5wrm1ule .show-below-md{display:block}}
36
+ @container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
37
+ @container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
38
+ @container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
39
+ @container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
40
+ @container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
41
+ @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
33
42
  @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
34
- @container toolbar-container (max-width: 858px){._u8ktglyw .show-above-lg{display:none}._1pko1ule .show-below-lg{display:block}}
43
+ @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
44
+ @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
45
+ @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
46
+ @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
47
+ @container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
48
+ @container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
49
+ @container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
50
+ @container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
51
+ @container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
52
+ @container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
53
+ @container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
54
+ @container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
55
+ @container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
56
+ @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
57
+ @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
58
+ @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
59
+ @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
35
60
  @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
36
61
  @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
37
62
  @media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}
package/dist/cjs/ui/ResponsiveContainer.js CHANGED
@@ -17,12 +17,13 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
17
17
  var _compiled = require("@atlaskit/primitives/compiled");
18
18
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
19
19
  var styles = {
20
- responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
21
- fullpage: "_t3a8glyw _1x5z1ule _13hjglyw _1k421ule _1tj8glyw _5wrm1ule _u8ktglyw _1pko1ule",
22
- reduced: "_hs8tglyw _905a1ule _1jd6glyw _qp9j1ule _13ybglyw _1il51ule _19x4glyw _qck01ule",
23
- jiraIssue: "_3tohglyw _b5je1ule _1y2iglyw _w3191ule _tr9jglyw _1xve1ule _19x4glyw _qck01ule",
24
- jsmComment: "_gp7jglyw _luyr1ule _1gcoglyw _bx071ule _dtzlglyw _5ur11ule _19x4glyw _qck01ule",
25
- confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
20
+ responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
21
+ responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
22
+ fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
23
+ reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
24
+ jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
25
+ jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
26
+ confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
26
27
  responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
27
28
  responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
28
29
  responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
@@ -94,11 +95,11 @@ var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveConta
94
95
  // Use new preset-based logic when preset is provided and feature gate is enabled
95
96
  if (breakpointPreset && (0, _platformFeatureFlags.fg)('platform_editor_toolbar_aifc_responsive_improve')) {
96
97
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
97
- xcss: (0, _css.cx)(styles.responsiveContainer, presetStyleMap[breakpointPreset])
98
+ xcss: (0, _css.cx)((0, _expValEquals.expValEquals)('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
98
99
  }, children);
99
100
  }
100
101
  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
101
- xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
102
+ xcss: (0, _css.cx)((0, _expValEquals.expValEquals)('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
102
103
  }, children);
103
104
  };
104
105
 
package/dist/cjs/ui/Show.js CHANGED
@@ -16,14 +16,18 @@ var _react = _interopRequireDefault(require("react"));
16
16
  * @param below - The breakpoint to show the element below.
17
17
  * @returns The className to apply to the element.
18
18
  */
19
- var generateClassName = function generateClassName(above, below) {
19
+ var generateClassName = function generateClassName(above, below, only) {
20
+ if (only) {
21
+ return "show-only-".concat(only);
22
+ }
23
+ var classes = [];
20
24
  if (above) {
21
- return "show-above-".concat(above);
25
+ classes.push("show-above-".concat(above));
22
26
  }
23
27
  if (below) {
24
- return "show-below-".concat(below);
28
+ classes.push("show-below-".concat(below));
25
29
  }
26
- return;
30
+ return classes.length > 0 ? classes.join(' ') : undefined;
27
31
  };
28
32
 
29
33
  /**
@@ -36,8 +40,9 @@ var generateClassName = function generateClassName(above, below) {
36
40
  var Show = exports.Show = function Show(_ref) {
37
41
  var children = _ref.children,
38
42
  above = _ref.above,
39
- below = _ref.below;
43
+ below = _ref.below,
44
+ only = _ref.only;
40
45
  return /*#__PURE__*/_react.default.createElement("div", {
41
- className: generateClassName(above, below)
46
+ className: generateClassName(above, below, only)
42
47
  }, children);
43
48
  };
package/dist/es2019/ui/ColorPalette/Color.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import "./Color.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useCallback, memo } from 'react';
5
- import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
5
+ import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
6
6
  import Tooltip from '@atlaskit/tooltip';
7
7
  const buttonWrapperStyles = null;
8
8
  const buttonStyles = null;
package/dist/es2019/ui/ResponsiveContainer.compiled.css CHANGED
@@ -1,37 +1,62 @@
1
1
  ._1a2cglyw .show-below-md{display:none}
2
+ ._1bsb1ns9{width:-moz-fit-content;width:fit-content}
2
3
  ._1bsb1osq{width:100%}
3
4
  ._1bx91ule .show-above-lg{display:block}
5
+ ._1eadglyw .show-only-sm{display:none}
4
6
  ._1ehg1ule .show-above-md{display:block}
5
7
  ._1f38ptqj{container-name:toolbar-container}
8
+ ._1ir3glyw .show-only-lg{display:none}
6
9
  ._1onx1ule .show-above-sm{display:block}
10
+ ._1vp2glyw .show-only-md{display:none}
7
11
  ._1vtcglyw .show-below-xl{display:none}
8
12
  ._1xt01ule .show-above-xl{display:block}
9
13
  ._7cca15wb{container-type:inline-size}
14
+ ._a6zzglyw .show-only-xl{display:none}
10
15
  ._sum2glyw .show-below-sm{display:none}
11
16
  ._zg9wglyw .show-below-lg{display:none}
12
17
  @container editor-area (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
13
18
  @container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
14
19
  @container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
20
+ @container toolbar-container (max-width: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
15
21
  @container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
22
+ @container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
16
23
  @container toolbar-container (max-width: 210px){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
17
- @container toolbar-container (max-width: 280px){._3tohglyw._3tohglyw .show-above-sm{display:none}._b5je1ule._b5je1ule .show-below-sm{display:block}}
18
- @container toolbar-container (max-width: 296px){._hs8tglyw._hs8tglyw .show-above-sm{display:none}._905a1ule._905a1ule .show-below-sm{display:block}}
19
- @container toolbar-container (max-width: 365px){._gp7jglyw._gp7jglyw .show-above-sm{display:none}._luyr1ule._luyr1ule .show-below-sm{display:block}}
24
+ @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
25
+ @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
26
+ @container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
27
+ @container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
20
28
  @container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
21
29
  @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
22
- @container toolbar-container (max-width: 420px){._1y2iglyw._1y2iglyw .show-above-md{display:none}._w3191ule._w3191ule .show-below-md{display:block}}
23
- @container toolbar-container (max-width: 422px){._13hjglyw .show-above-sm{display:none}._1k421ule .show-below-sm{display:block}}
24
- @container toolbar-container (max-width: 432px){._1jd6glyw._1jd6glyw .show-above-md{display:none}._qp9j1ule._qp9j1ule .show-below-md{display:block}}
30
+ @container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
31
+ @container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
32
+ @container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
25
33
  @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
26
- @container toolbar-container (max-width: 500px){._1gcoglyw._1gcoglyw .show-above-md{display:none}._bx071ule._bx071ule .show-below-md{display:block}}
34
+ @container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
27
35
  @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
28
- @container toolbar-container (max-width: 630px){._dtzlglyw._dtzlglyw .show-above-lg{display:none}._5ur11ule._5ur11ule .show-below-lg{display:block}}
29
- @container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
30
- @container toolbar-container (max-width: 650px){._tr9jglyw._tr9jglyw .show-above-lg{display:none}._1xve1ule._1xve1ule .show-below-lg{display:block}}
31
- @container toolbar-container (max-width: 662px){._13ybglyw._13ybglyw .show-above-lg{display:none}._1il51ule._1il51ule .show-below-lg{display:block}}
32
- @container toolbar-container (max-width: 722px){._1tj8glyw .show-above-md{display:none}._5wrm1ule .show-below-md{display:block}}
36
+ @container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
37
+ @container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
38
+ @container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
39
+ @container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
40
+ @container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
41
+ @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
33
42
  @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
34
- @container toolbar-container (max-width: 858px){._u8ktglyw .show-above-lg{display:none}._1pko1ule .show-below-lg{display:block}}
43
+ @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
44
+ @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
45
+ @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
46
+ @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
47
+ @container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
48
+ @container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
49
+ @container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
50
+ @container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
51
+ @container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
52
+ @container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
53
+ @container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
54
+ @container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
55
+ @container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
56
+ @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
57
+ @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
58
+ @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
59
+ @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
35
60
  @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
36
61
  @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
37
62
  @media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}
package/dist/es2019/ui/ResponsiveContainer.js CHANGED
@@ -10,12 +10,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { Box } from '@atlaskit/primitives/compiled';
11
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
12
  const styles = {
13
- responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
14
- fullpage: "_t3a8glyw _1x5z1ule _13hjglyw _1k421ule _1tj8glyw _5wrm1ule _u8ktglyw _1pko1ule",
15
- reduced: "_hs8tglyw _905a1ule _1jd6glyw _qp9j1ule _13ybglyw _1il51ule _19x4glyw _qck01ule",
16
- jiraIssue: "_3tohglyw _b5je1ule _1y2iglyw _w3191ule _tr9jglyw _1xve1ule _19x4glyw _qck01ule",
17
- jsmComment: "_gp7jglyw _luyr1ule _1gcoglyw _bx071ule _dtzlglyw _5ur11ule _19x4glyw _qck01ule",
18
- confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
13
+ responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
14
+ responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
15
+ fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
16
+ reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
17
+ jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
18
+ jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
19
+ confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
19
20
  responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
20
21
  responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
21
22
  responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
@@ -88,11 +89,11 @@ export const ResponsiveContainer = ({
88
89
  // Use new preset-based logic when preset is provided and feature gate is enabled
89
90
  if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
90
91
  return /*#__PURE__*/React.createElement(Box, {
91
- xcss: cx(styles.responsiveContainer, presetStyleMap[breakpointPreset])
92
+ xcss: cx(expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
92
93
  }, children);
93
94
  }
94
95
  return /*#__PURE__*/React.createElement(Box, {
95
- xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
96
+ xcss: cx(expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
96
97
  }, children);
97
98
  };
98
99
 
package/dist/es2019/ui/Show.js CHANGED
@@ -8,14 +8,18 @@ import React from 'react';
8
8
  * @param below - The breakpoint to show the element below.
9
9
  * @returns The className to apply to the element.
10
10
  */
11
- const generateClassName = (above, below) => {
11
+ const generateClassName = (above, below, only) => {
12
+ if (only) {
13
+ return `show-only-${only}`;
14
+ }
15
+ const classes = [];
12
16
  if (above) {
13
- return `show-above-${above}`;
17
+ classes.push(`show-above-${above}`);
14
18
  }
15
19
  if (below) {
16
- return `show-below-${below}`;
20
+ classes.push(`show-below-${below}`);
17
21
  }
18
- return;
22
+ return classes.length > 0 ? classes.join(' ') : undefined;
19
23
  };
20
24
 
21
25
  /**
@@ -28,9 +32,10 @@ const generateClassName = (above, below) => {
28
32
  export const Show = ({
29
33
  children,
30
34
  above,
31
- below
35
+ below,
36
+ only
32
37
  }) => {
33
38
  return /*#__PURE__*/React.createElement("div", {
34
- className: generateClassName(above, below)
39
+ className: generateClassName(above, below, only)
35
40
  }, children);
36
41
  };
package/dist/esm/ui/ColorPalette/Color.js CHANGED
@@ -2,7 +2,7 @@
2
2
  import "./Color.compiled.css";
3
3
  import { ax, ix } from "@compiled/react/runtime";
4
4
  import React, { useCallback, memo } from 'react';
5
- import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
5
+ import EditorDoneIcon from '@atlaskit/icon/core/check-mark';
6
6
  import Tooltip from '@atlaskit/tooltip';
7
7
  var buttonWrapperStyles = null;
8
8
  var buttonStyles = null;
package/dist/esm/ui/ResponsiveContainer.compiled.css CHANGED
@@ -1,37 +1,62 @@
1
1
  ._1a2cglyw .show-below-md{display:none}
2
+ ._1bsb1ns9{width:-moz-fit-content;width:fit-content}
2
3
  ._1bsb1osq{width:100%}
3
4
  ._1bx91ule .show-above-lg{display:block}
5
+ ._1eadglyw .show-only-sm{display:none}
4
6
  ._1ehg1ule .show-above-md{display:block}
5
7
  ._1f38ptqj{container-name:toolbar-container}
8
+ ._1ir3glyw .show-only-lg{display:none}
6
9
  ._1onx1ule .show-above-sm{display:block}
10
+ ._1vp2glyw .show-only-md{display:none}
7
11
  ._1vtcglyw .show-below-xl{display:none}
8
12
  ._1xt01ule .show-above-xl{display:block}
9
13
  ._7cca15wb{container-type:inline-size}
14
+ ._a6zzglyw .show-only-xl{display:none}
10
15
  ._sum2glyw .show-below-sm{display:none}
11
16
  ._zg9wglyw .show-below-lg{display:none}
12
17
  @container editor-area (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
13
18
  @container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
14
19
  @container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
20
+ @container toolbar-container (max-width: 1023px){._luoiglyw .show-above-xl{display:none}._2ojp1ule .show-below-xl{display:block}._tzm6glyw._tzm6glyw .show-above-xl{display:none}._ktne1ule._ktne1ule .show-below-xl{display:block}}
15
21
  @container toolbar-container (max-width: 1024px){._19x4glyw._19x4glyw .show-above-xl{display:none}._qck01ule._qck01ule .show-below-xl{display:block}._t3a8glyw .show-above-xl{display:none}._1x5z1ule .show-below-xl{display:block}}
22
+ @container toolbar-container (max-width: 209px){._15nrglyw._15nrglyw .show-above-sm{display:none}._cm5a1ule._cm5a1ule .show-below-sm{display:block}}
16
23
  @container toolbar-container (max-width: 210px){._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
17
- @container toolbar-container (max-width: 280px){._3tohglyw._3tohglyw .show-above-sm{display:none}._b5je1ule._b5je1ule .show-below-sm{display:block}}
18
- @container toolbar-container (max-width: 296px){._hs8tglyw._hs8tglyw .show-above-sm{display:none}._905a1ule._905a1ule .show-below-sm{display:block}}
19
- @container toolbar-container (max-width: 365px){._gp7jglyw._gp7jglyw .show-above-sm{display:none}._luyr1ule._luyr1ule .show-below-sm{display:block}}
24
+ @container toolbar-container (max-width: 279px){._152xglyw._152xglyw .show-above-sm{display:none}._1cn41ule._1cn41ule .show-below-sm{display:block}}
25
+ @container toolbar-container (max-width: 295px){._kkyiglyw._kkyiglyw .show-above-sm{display:none}._1dj81ule._1dj81ule .show-below-sm{display:block}}
26
+ @container toolbar-container (max-width: 364px){._s2iiglyw._s2iiglyw .show-above-sm{display:none}._o4331ule._o4331ule .show-below-sm{display:block}}
27
+ @container toolbar-container (max-width: 407px){._13ioglyw._13ioglyw .show-above-md{display:none}._8urt1ule._8urt1ule .show-below-md{display:block}}
20
28
  @container toolbar-container (max-width: 408px){._gipeglyw._gipeglyw .show-above-md{display:none}._311r1ule._311r1ule .show-below-md{display:block}}
21
29
  @container toolbar-container (max-width: 410px){._6nrqglyw .show-above-sm{display:none}._1fq21ule .show-below-sm{display:block}}
22
- @container toolbar-container (max-width: 420px){._1y2iglyw._1y2iglyw .show-above-md{display:none}._w3191ule._w3191ule .show-below-md{display:block}}
23
- @container toolbar-container (max-width: 422px){._13hjglyw .show-above-sm{display:none}._1k421ule .show-below-sm{display:block}}
24
- @container toolbar-container (max-width: 432px){._1jd6glyw._1jd6glyw .show-above-md{display:none}._qp9j1ule._qp9j1ule .show-below-md{display:block}}
30
+ @container toolbar-container (max-width: 419px){._afriglyw._afriglyw .show-above-md{display:none}._ozjb1ule._ozjb1ule .show-below-md{display:block}}
31
+ @container toolbar-container (max-width: 421px){._11uvglyw .show-above-sm{display:none}._fj2k1ule .show-below-sm{display:block}}
32
+ @container toolbar-container (max-width: 431px){._j3qgglyw._j3qgglyw .show-above-md{display:none}._xh1i1ule._xh1i1ule .show-below-md{display:block}}
25
33
  @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
26
- @container toolbar-container (max-width: 500px){._1gcoglyw._1gcoglyw .show-above-md{display:none}._bx071ule._bx071ule .show-below-md{display:block}}
34
+ @container toolbar-container (max-width: 499px){._lankglyw._lankglyw .show-above-md{display:none}._1xpy1ule._1xpy1ule .show-below-md{display:block}}
27
35
  @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
28
- @container toolbar-container (max-width: 630px){._dtzlglyw._dtzlglyw .show-above-lg{display:none}._5ur11ule._5ur11ule .show-below-lg{display:block}}
29
- @container toolbar-container (max-width: 648px){._4kfbglyw._4kfbglyw .show-above-lg{display:none}._j1h31ule._j1h31ule .show-below-lg{display:block}._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
30
- @container toolbar-container (max-width: 650px){._tr9jglyw._tr9jglyw .show-above-lg{display:none}._1xve1ule._1xve1ule .show-below-lg{display:block}}
31
- @container toolbar-container (max-width: 662px){._13ybglyw._13ybglyw .show-above-lg{display:none}._1il51ule._1il51ule .show-below-lg{display:block}}
32
- @container toolbar-container (max-width: 722px){._1tj8glyw .show-above-md{display:none}._5wrm1ule .show-below-md{display:block}}
36
+ @container toolbar-container (max-width: 629px){._1b07glyw._1b07glyw .show-above-lg{display:none}._1meg1ule._1meg1ule .show-below-lg{display:block}}
37
+ @container toolbar-container (max-width: 647px){._18zmglyw._18zmglyw .show-above-lg{display:none}._1uj01ule._1uj01ule .show-below-lg{display:block}}
38
+ @container toolbar-container (max-width: 648px){._e2nbglyw._e2nbglyw._e2nbglyw .show-above-lg{display:none}._ol4q1ule._ol4q1ule._ol4q1ule .show-below-lg{display:block}}
39
+ @container toolbar-container (max-width: 649px){._1mckglyw._1mckglyw .show-above-lg{display:none}._r2nv1ule._r2nv1ule .show-below-lg{display:block}}
40
+ @container toolbar-container (max-width: 661px){._13s9glyw._13s9glyw .show-above-lg{display:none}._4nul1ule._4nul1ule .show-below-lg{display:block}}
41
+ @container toolbar-container (max-width: 721px){._1nqyglyw .show-above-md{display:none}._jd611ule .show-below-md{display:block}}
33
42
  @container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
34
- @container toolbar-container (max-width: 858px){._u8ktglyw .show-above-lg{display:none}._1pko1ule .show-below-lg{display:block}}
43
+ @container toolbar-container (max-width: 857px){._syrzglyw .show-above-lg{display:none}._fr6v1ule .show-below-lg{display:block}}
44
+ @container toolbar-container (min-width: 1024px){._1je21ule .show-only-xl{display:block}._87bn1ule._87bn1ule .show-only-xl{display:block}}
45
+ @container toolbar-container (min-width: 210px) and (max-width: 407px){._7qjy1ule._7qjy1ule .show-only-sm{display:block}}
46
+ @container toolbar-container (min-width: 280px) and (max-width: 419px){._4cj71ule._4cj71ule .show-only-sm{display:block}}
47
+ @container toolbar-container (min-width: 296px) and (max-width: 431px){._1cg81ule._1cg81ule .show-only-sm{display:block}}
48
+ @container toolbar-container (min-width: 365px) and (max-width: 499px){._1jvu1ule._1jvu1ule .show-only-sm{display:block}}
49
+ @container toolbar-container (min-width: 408px) and (max-width: 647px){._cpaf1ule._cpaf1ule .show-only-md{display:block}}
50
+ @container toolbar-container (min-width: 420px) and (max-width: 649px){._w81r1ule._w81r1ule .show-only-md{display:block}}
51
+ @container toolbar-container (min-width: 422px) and (max-width: 721px){._1btx1ule .show-only-sm{display:block}}
52
+ @container toolbar-container (min-width: 432px) and (max-width: 661px){._oj3l1ule._oj3l1ule .show-only-md{display:block}}
53
+ @container toolbar-container (min-width: 500px) and (max-width: 629px){._1vu31ule._1vu31ule .show-only-md{display:block}}
54
+ @container toolbar-container (min-width: 630px) and (max-width: 1023px){._1bqk1ule._1bqk1ule .show-only-lg{display:block}}
55
+ @container toolbar-container (min-width: 648px) and (max-width: 1023px){._1oqh1ule._1oqh1ule .show-only-lg{display:block}}
56
+ @container toolbar-container (min-width: 650px) and (max-width: 1023px){._1ym01ule._1ym01ule .show-only-lg{display:block}}
57
+ @container toolbar-container (min-width: 662px) and (max-width: 1023px){._wt211ule._wt211ule .show-only-lg{display:block}}
58
+ @container toolbar-container (min-width: 722px) and (max-width: 857px){._biad1ule .show-only-md{display:block}}
59
+ @container toolbar-container (min-width: 858px) and (max-width: 1023px){._1ana1ule .show-only-lg{display:block}}
35
60
  @media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
36
61
  @media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
37
62
  @media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}
package/dist/esm/ui/ResponsiveContainer.js CHANGED
@@ -10,12 +10,13 @@ import { fg } from '@atlaskit/platform-feature-flags';
10
10
  import { Box } from '@atlaskit/primitives/compiled';
11
11
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
12
12
  var styles = {
13
- responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
14
- fullpage: "_t3a8glyw _1x5z1ule _13hjglyw _1k421ule _1tj8glyw _5wrm1ule _u8ktglyw _1pko1ule",
15
- reduced: "_hs8tglyw _905a1ule _1jd6glyw _qp9j1ule _13ybglyw _1il51ule _19x4glyw _qck01ule",
16
- jiraIssue: "_3tohglyw _b5je1ule _1y2iglyw _w3191ule _tr9jglyw _1xve1ule _19x4glyw _qck01ule",
17
- jsmComment: "_gp7jglyw _luyr1ule _1gcoglyw _bx071ule _dtzlglyw _5ur11ule _19x4glyw _qck01ule",
18
- confluenceComment: "_j094glyw _1mc51ule _gipeglyw _311r1ule _4kfbglyw _j1h31ule _19x4glyw _qck01ule",
13
+ responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
14
+ responsiveContainerFullPage: "_1bsb1ns9 _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _1ir3glyw _1vp2glyw _1eadglyw _a6zzglyw",
15
+ fullpage: "_luoiglyw _2ojp1ule _11uvglyw _fj2k1ule _1nqyglyw _jd611ule _syrzglyw _fr6v1ule _1je21ule _1btx1ule _biad1ule _1ana1ule",
16
+ reduced: "_kkyiglyw _1dj81ule _1cg81ule _j3qgglyw _xh1i1ule _oj3l1ule _13s9glyw _4nul1ule _wt211ule _tzm6glyw _ktne1ule _87bn1ule",
17
+ jiraIssue: "_152xglyw _1cn41ule _4cj71ule _afriglyw _ozjb1ule _w81r1ule _1mckglyw _r2nv1ule _1ym01ule _tzm6glyw _ktne1ule _87bn1ule",
18
+ jsmComment: "_s2iiglyw _o4331ule _1jvu1ule _lankglyw _1xpy1ule _1vu31ule _1b07glyw _1meg1ule _1bqk1ule _tzm6glyw _ktne1ule _87bn1ule",
19
+ confluenceComment: "_15nrglyw _cm5a1ule _7qjy1ule _13ioglyw _8urt1ule _cpaf1ule _18zmglyw _1uj01ule _1oqh1ule _tzm6glyw _ktne1ule _87bn1ule",
19
20
  responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
20
21
  responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
21
22
  responsiveRulesReducedOverridden: "_e2nbglyw _ol4q1ule",
@@ -87,11 +88,11 @@ export var ResponsiveContainer = function ResponsiveContainer(_ref) {
87
88
  // Use new preset-based logic when preset is provided and feature gate is enabled
88
89
  if (breakpointPreset && fg('platform_editor_toolbar_aifc_responsive_improve')) {
89
90
  return /*#__PURE__*/React.createElement(Box, {
90
- xcss: cx(styles.responsiveContainer, presetStyleMap[breakpointPreset])
91
+ xcss: cx(expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, presetStyleMap[breakpointPreset])
91
92
  }, children);
92
93
  }
93
94
  return /*#__PURE__*/React.createElement(Box, {
94
- xcss: cx(styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
95
+ xcss: cx(expValEquals('platform_editor_reduce_toolbar_vc_impact', 'isEnabled', true) && breakpointPreset === 'fullpage' ? styles.responsiveContainerFullPage : styles.responsiveContainer, reducedBreakpoints ? styles.responsiveRulesReduced : styles.responsiveRules, reducedBreakpoints && expValEquals('platform_editor_toolbar_aifc_patch_6', 'isEnabled', true) && styles.responsiveRulesReducedOverridden)
95
96
  }, children);
96
97
  };
97
98
 
package/dist/esm/ui/Show.js CHANGED
@@ -8,14 +8,18 @@ import React from 'react';
8
8
  * @param below - The breakpoint to show the element below.
9
9
  * @returns The className to apply to the element.
10
10
  */
11
- var generateClassName = function generateClassName(above, below) {
11
+ var generateClassName = function generateClassName(above, below, only) {
12
+ if (only) {
13
+ return "show-only-".concat(only);
14
+ }
15
+ var classes = [];
12
16
  if (above) {
13
- return "show-above-".concat(above);
17
+ classes.push("show-above-".concat(above));
14
18
  }
15
19
  if (below) {
16
- return "show-below-".concat(below);
20
+ classes.push("show-below-".concat(below));
17
21
  }
18
- return;
22
+ return classes.length > 0 ? classes.join(' ') : undefined;
19
23
  };
20
24
 
21
25
  /**
@@ -28,8 +32,9 @@ var generateClassName = function generateClassName(above, below) {
28
32
  export var Show = function Show(_ref) {
29
33
  var children = _ref.children,
30
34
  above = _ref.above,
31
- below = _ref.below;
35
+ below = _ref.below,
36
+ only = _ref.only;
32
37
  return /*#__PURE__*/React.createElement("div", {
33
- className: generateClassName(above, below)
38
+ className: generateClassName(above, below, only)
34
39
  }, children);
35
40
  };
package/dist/types/ui/Show.d.ts CHANGED
@@ -3,14 +3,21 @@ export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
3
3
  type AboveProp = {
4
4
  above: Breakpoint;
5
5
  below?: never;
6
+ only?: never;
6
7
  };
7
8
  type BelowProp = {
8
9
  above?: never;
9
10
  below: Breakpoint;
11
+ only?: never;
12
+ };
13
+ type OnlyProp = {
14
+ above?: never;
15
+ below?: never;
16
+ only: Breakpoint;
10
17
  };
11
18
  type ShowProps = {
12
19
  children: ReactNode;
13
- } & (AboveProp | BelowProp);
20
+ } & (AboveProp | BelowProp | OnlyProp);
14
21
  /**
15
22
  * Conditionally renders children based on responsive breakpoints.
16
23
  * Use either `above` or `below` prop to control visibility.
@@ -18,5 +25,5 @@ type ShowProps = {
18
25
  * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
19
26
  * as it relies on CSS container queries.
20
27
  */
21
- export declare const Show: ({ children, above, below }: ShowProps) => React.JSX.Element;
28
+ export declare const Show: ({ children, above, below, only }: ShowProps) => React.JSX.Element;
22
29
  export {};
package/dist/types-ts4.5/ui/Show.d.ts CHANGED
@@ -3,14 +3,21 @@ export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';
3
3
  type AboveProp = {
4
4
  above: Breakpoint;
5
5
  below?: never;
6
+ only?: never;
6
7
  };
7
8
  type BelowProp = {
8
9
  above?: never;
9
10
  below: Breakpoint;
11
+ only?: never;
12
+ };
13
+ type OnlyProp = {
14
+ above?: never;
15
+ below?: never;
16
+ only: Breakpoint;
10
17
  };
11
18
  type ShowProps = {
12
19
  children: ReactNode;
13
- } & (AboveProp | BelowProp);
20
+ } & (AboveProp | BelowProp | OnlyProp);
14
21
  /**
15
22
  * Conditionally renders children based on responsive breakpoints.
16
23
  * Use either `above` or `below` prop to control visibility.
@@ -18,5 +25,5 @@ type ShowProps = {
18
25
  * *note:* This component must be an ancestor of a ResponsiveContainer component to work correctly
19
26
  * as it relies on CSS container queries.
20
27
  */
21
- export declare const Show: ({ children, above, below }: ShowProps) => React.JSX.Element;
28
+ export declare const Show: ({ children, above, below, only }: ShowProps) => React.JSX.Element;
22
29
  export {};
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://registry.npmjs.org/"
5
5
  },
6
- "version": "0.18.2",
6
+ "version": "0.18.4",
7
7
  "description": "Common UI for Toolbars across the platform",
8
8
  "atlassian": {
9
9
  "team": "Editor: Jenga",
@@ -21,17 +21,17 @@
21
21
  ],
22
22
  "atlaskit:src": "src/index.ts",
23
23
  "dependencies": {
24
- "@atlaskit/badge": "^18.2.0",
24
+ "@atlaskit/badge": "^18.3.0",
25
25
  "@atlaskit/browser-apis": "^0.0.1",
26
26
  "@atlaskit/css": "^0.17.0",
27
27
  "@atlaskit/dropdown-menu": "^16.3.0",
28
- "@atlaskit/icon": "^29.0.0",
28
+ "@atlaskit/icon": "^29.1.0",
29
29
  "@atlaskit/icon-lab": "^5.12.0",
30
30
  "@atlaskit/platform-feature-flags": "^1.1.0",
31
- "@atlaskit/popup": "^4.6.0",
31
+ "@atlaskit/popup": "^4.7.0",
32
32
  "@atlaskit/primitives": "^16.4.0",
33
- "@atlaskit/tmp-editor-statsig": "^15.0.0",
34
- "@atlaskit/tokens": "^8.4.0",
33
+ "@atlaskit/tmp-editor-statsig": "^15.12.0",
34
+ "@atlaskit/tokens": "^8.5.0",
35
35
  "@atlaskit/tooltip": "^20.11.0",
36
36
  "@babel/runtime": "^7.0.0",
37
37
  "@compiled/react": "^0.18.6",
@@ -42,7 +42,7 @@
42
42
  "react-intl-next": "npm:react-intl@^5.18.1"
43
43
  },
44
44
  "devDependencies": {
45
- "@testing-library/react": "^13.4.0",
45
+ "@testing-library/react": "^16.3.0",
46
46
  "react-dom": "^18.2.0"
47
47
  },
48
48
  "techstack": {