@atlaskit/editor-toolbar 0.8.4 → 0.8.6

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-toolbar
 
+## 0.8.6
+
+### Patch Changes
+
+- [`345a4e1939d12`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/345a4e1939d12) -
+  [ux] [ED-28733] Add responsiveness support for selection toolbar
+- Updated dependencies
+
+## 0.8.5
+
+### Patch Changes
+
+- [`f0662cd7a143e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f0662cd7a143e) -
+  Internal changes to how borders are applied.
+- Updated dependencies
+
 ## 0.8.4
 
 ### Patch Changes

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

@@ -1,6 +1,6 @@
 
 ._19itcf40{border:var(--_1wr0y6w)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189et94y{border-width:1px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._19bvidpf{padding-left:0}

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

@@ -51,7 +51,7 @@ var Color = exports.Color = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
     content: label
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: (0, _runtime.ax)(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     "aria-label": label,

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

@@ -3,6 +3,9 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
+@container editor-area  (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
+@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
+@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
 @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}}
 @container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
@@ -11,4 +14,7 @@
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
-@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
+@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
+@media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}

package/dist/cjs/ui/ResponsiveContainer.js

@@ -8,7 +8,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ResponsiveContainer = void 0;
+exports.ResponsiveWrapper = exports.ResponsiveContainer = void 0;
 require("./ResponsiveContainer.compiled.css");
 var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
@@ -19,7 +19,8 @@ var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
-  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule",
+  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -70,4 +71,14 @@ var ResponsiveContainer = exports.ResponsiveContainer = function ResponsiveConta
   return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     xcss: (0, _css.cx)(styles.responsiveContainer, reducedBreakpoints ? (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
+};
+
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+var ResponsiveWrapper = exports.ResponsiveWrapper = function ResponsiveWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.responsiveRulesWrapper
+  }, children);
 };

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

@@ -1,6 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])), ._ze7rglyw [class*=show-below-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/cjs/ui/Toolbar.js

@@ -18,20 +18,29 @@ var _ResponsiveContainer = require("./ResponsiveContainer");
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 var Toolbar = exports.Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
     label = _ref.label;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+  var isResponsiveEnabled = (0, _expValEquals.expValEquals)('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
+  var toolbar = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
+  if (isResponsiveEnabled) {
+    return /*#__PURE__*/_react.default.createElement(_ResponsiveContainer.ResponsiveWrapper, null, toolbar);
+  } else {
+    return toolbar;
+  }
 };
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

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

@@ -1,6 +1,6 @@
 
 ._19itv4vr{border:1px solid var(--ds-border-inverse,#fff)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189et94y{border-width:1px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._19bvidpf{padding-left:0}

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

@@ -42,7 +42,7 @@ export const Color = /*#__PURE__*/memo(({
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: label
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,

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

@@ -3,6 +3,9 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
+@container editor-area  (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
+@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
+@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
 @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}}
 @container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
@@ -11,4 +14,7 @@
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
-@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
+@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
+@media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}

package/dist/es2019/ui/ResponsiveContainer.js

@@ -12,7 +12,8 @@ const styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
-  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule",
+  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -64,4 +65,15 @@ export const ResponsiveContainer = ({
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? editorExperiment('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
+};
+
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export const ResponsiveWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.responsiveRulesWrapper
+  }, children);
 };

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

@@ -1,6 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])), ._ze7rglyw [class*=show-below-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/es2019/ui/Toolbar.js

@@ -7,25 +7,34 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { ResponsiveContainer, ResponsiveWrapper } from './ResponsiveContainer';
 const styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export const Toolbar = ({
   children,
   label
 }) => {
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+  const isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
+  const toolbar = /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
+  if (isResponsiveEnabled) {
+    return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, toolbar);
+  } else {
+    return toolbar;
+  }
 };
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

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

@@ -1,6 +1,6 @@
 
 ._19itcf40{border:var(--_1wr0y6w)}
-._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189et94y{border-width:1px}
+._2rko12b0{border-radius:var(--ds-radius-small,4px)}._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
 ._1h6d1j28{border-color:transparent}
 ._19bvidpf{padding-left:0}

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

@@ -42,7 +42,7 @@ export var Color = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/React.createElement(Tooltip, {
     content: label
   }, /*#__PURE__*/React.createElement("span", {
-    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189et94y _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
+    className: ax(["_2rko12b0 _1h6d1j28 _1dqonqa1 _189ee4h9 _1e0c1txw _4cvr1h6o _ca0qv77o _u5f3v77o _n3tdv77o _19bvv77o _858umuej _jyzfmuej _4cvxmuej"])
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     "aria-label": label,

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

@@ -3,6 +3,9 @@
 ._1f38ptqj{container-name:toolbar-container}
 ._7cca15wb{container-type:inline-size}
 ._zg9wglyw .show-below-lg, ._1a2cglyw .show-below-md, ._sum2glyw .show-below-sm, ._1vtcglyw .show-below-xl{display:none}
+@container editor-area  (max-width: 365px){._33p2glyw .show-above-sm{display:none}._1dre1ule .show-below-sm{display:block}}
+@container editor-area (max-width: 533px){._u47mglyw .show-above-md{display:none}._rut51ule .show-below-md{display:block}}
+@container editor-area (max-width: 700px){._fj5dglyw .show-above-lg{display:none}._5wt61ule .show-below-lg{display:block}}
 @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}}
 @container toolbar-container (max-width: 210px){._48suglyw .show-above-sm{display:none}._j2p61ule .show-below-sm{display:block}._j094glyw._j094glyw .show-above-sm{display:none}._1mc51ule._1mc51ule .show-below-sm{display:block}}
 @container toolbar-container (max-width: 350px){._1vg1glyw .show-above-md{display:none}._1ei51ule .show-below-md{display:block}}
@@ -11,4 +14,7 @@
 @container toolbar-container (max-width: 476px){._1ireglyw .show-above-md{display:none}._zy2m1ule .show-below-md{display:block}}
 @container toolbar-container (max-width: 500px){._pjeuglyw .show-above-lg{display:none}._3bio1ule .show-below-lg{display:block}}
 @container toolbar-container (max-width: 575px){._11u4glyw._11u4glyw .show-above-lg{display:none}._v1i61ule._v1i61ule .show-below-lg{display:block}}
-@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@container toolbar-container (max-width: 768px){._hfbeglyw .show-above-lg{display:none}._gw6d1ule .show-below-lg{display:block}}
+@media (max-width:700px){._hmx4glyw .show-above-lg{display:none}._1rrm1ule .show-below-lg{display:block}}
+@media (max-width:533px){._ut18glyw .show-above-md{display:none}._1nwo1ule .show-below-md{display:block}}
+@media (max-width:365px){._19fzglyw .show-above-sm{display:none}._1r831ule .show-below-sm{display:block}}

package/dist/esm/ui/ResponsiveContainer.js

@@ -12,7 +12,8 @@ var styles = {
   responsiveContainer: "_1bsb1osq _7cca15wb _1f38ptqj _1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw",
   responsiveRules: "_t3a8glyw _1x5z1ule _6nrqglyw _1fq21ule _1ireglyw _zy2m1ule _hfbeglyw _gw6d1ule",
   responsiveRulesReduced: "_j094glyw _1mc51ule _gipeglyw _311r1ule _11u4glyw _v1i61ule _19x4glyw _qck01ule",
-  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule"
+  responsiveRulesReducedOld: "_t3a8glyw _1x5z1ule _48suglyw _j2p61ule _1vg1glyw _1ei51ule _pjeuglyw _3bio1ule",
+  responsiveRulesWrapper: "_1bx91ule _1ehg1ule _1onx1ule _1xt01ule _zg9wglyw _1a2cglyw _sum2glyw _1vtcglyw _33p2glyw _1dre1ule _u47mglyw _rut51ule _fj5dglyw _5wt61ule _hmx4glyw _1rrm1ule _ut18glyw _1nwo1ule _19fzglyw _1r831ule"
 };
 /**
  * A responsive container that enables container query-based responsive design using CSS container queries.
@@ -63,4 +64,14 @@ export var ResponsiveContainer = function ResponsiveContainer(_ref) {
   return /*#__PURE__*/React.createElement(Box, {
     xcss: cx(styles.responsiveContainer, reducedBreakpoints ? editorExperiment('platform_editor_toolbar_aifc_patch_2', true) ? styles.responsiveRulesReduced : styles.responsiveRulesReducedOld : styles.responsiveRules)
   }, children);
+};
+
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export var ResponsiveWrapper = function ResponsiveWrapper(_ref2) {
+  var children = _ref2.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.responsiveRulesWrapper
+  }, children);
 };

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

@@ -1,6 +1,7 @@
 
 ._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
-._zulp1b66{gap:var(--ds-space-050,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._zulp1b66{gap:var(--ds-space-050,4px)}
+._195gpxbi{margin-inline:var(--ds-space-200,1pc)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
 ._18shglyw [class*=show-above-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])), ._ze7rglyw [class*=show-below-]:not(:has([data-toolbar-component=section] [data-toolbar-component=button],[data-toolbar-component=button-group] [data-toolbar-component=button])){display:none}
 ._19bv1b66{padding-left:var(--ds-space-050,4px)}
 ._1e0c1txw{display:flex}

package/dist/esm/ui/Toolbar.js

@@ -7,24 +7,33 @@ import React from 'react';
 import { cx } from '@atlaskit/css';
 import { Box } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
-import { ResponsiveContainer } from './ResponsiveContainer';
+import { ResponsiveContainer, ResponsiveWrapper } from './ResponsiveContainer';
 var styles = {
   toolbarBase: "_2rko1qi0 _zulp1b66 _1e0c1txw _4cvr1h6o",
   toolbar: "_bfhk1bhr _4t3i14no _u5f31b66 _19bv1b66 _16qs1cd0",
+  toolbarResponsive: "_195gpxbi",
   primaryToolbar: "_bfhkvuon _1tkezwfg",
   hiddenSelectors: "_fy9oglyw _18shglyw _ze7rglyw"
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export var Toolbar = function Toolbar(_ref) {
   var children = _ref.children,
     label = _ref.label;
-  return /*#__PURE__*/React.createElement(Box, {
-    xcss: cx(styles.toolbarBase, styles.toolbar, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
+  var isResponsiveEnabled = expValEquals('platform_editor_aifc_selection_toolbar_responsive', 'isEnabled', true);
+  var toolbar = /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.toolbarBase, styles.toolbar, isResponsiveEnabled && styles.toolbarResponsive, expValEquals('platform_editor_toolbar_aifc_responsive', 'isEnabled', true) && styles.hiddenSelectors),
     role: "toolbar",
     "aria-label": label
   }, children);
+  if (isResponsiveEnabled) {
+    return /*#__PURE__*/React.createElement(ResponsiveWrapper, null, toolbar);
+  } else {
+    return toolbar;
+  }
 };
 /**
  *  A simple component representing a toolbar without box shadows - used to represent a primary toolbar

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

@@ -52,3 +52,9 @@ export type ResponsiveContainerProps = {
  * @returns A Box component with container query styles applied
  */
 export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export declare const ResponsiveWrapper: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

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

@@ -11,6 +11,8 @@ type ToolbarProps = {
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
 type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;

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

@@ -52,3 +52,9 @@ export type ResponsiveContainerProps = {
  * @returns A Box component with container query styles applied
  */
 export declare const ResponsiveContainer: ({ children, reducedBreakpoints }: ResponsiveContainerProps) => React.JSX.Element;
+/**
+ * A wrapper that supports responsiveness with media queries. It needs to used together with Show component
+ */
+export declare const ResponsiveWrapper: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

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

@@ -11,6 +11,8 @@ type ToolbarProps = {
 };
 /**
  * A simple component representing a toolbar with box shadows - used to represent a secondary/floating toolbar
+ *
+ * @note: Responsiveness support replies on container query with container editor-area and media query
  */
 export declare const Toolbar: ({ children, label }: ToolbarProps) => React.JSX.Element;
 type PrimaryToolbarProps = ToolbarProps & ResponsiveContainerProps;

package/package.json

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