@atlaskit/status 1.9.4 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @atlaskit/status
 
+## 3.0.0
+
+### Major Changes
+
+- [#119926](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119926)
+  [`78902a8e16a37`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/78902a8e16a37) -
+  [ux] Migrates styles from emotion to compiled
+
+## 2.0.0
+
+### Major Changes
+
+- [#117363](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117363)
+  [`10a0f7f6c2027`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/10a0f7f6c2027) -
+  This package's `peerDependencies` have been adjusted for `react` and/or `react-dom` to reflect the
+  status of only supporting React 18 going forward. No explicit breaking change to React support has
+  been made in this release, but this is to signify going forward, breaking changes for React 16 or
+  React 17 may come via non-major semver releases.
+
+  Please refer this community post for more details:
+  https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.9.4
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -29,6 +29,9 @@
         {
             "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/primitives/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -29,6 +29,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -29,6 +29,9 @@
 		{
 			"path": "../../../platform/feature-flags/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../../platform/feature-flags-react/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/primitives/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/components/analytics.js

@@ -10,7 +10,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var ELEMENTS_CHANNEL = exports.ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.9.4";
+var packageVersion = "3.0.0";
 var createStatusAnalyticsAndFire = exports.createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

package/dist/cjs/components/compiled/Status.compiled.css

@@ -0,0 +1,3 @@
+._1frxnkob>*{vertical-align:middle}
+._1k0l7vkz>*{line-height:1pc}
+._d0dzdf4r>*{display:inline-block!important}

package/dist/cjs/components/compiled/Status.js

@@ -0,0 +1,132 @@
+/* Status.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Status = void 0;
+require("./Status.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _compiled = _interopRequireDefault(require("@atlaskit/lozenge/compiled"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _analytics = require("../analytics");
+var _constants = require("../constants");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var colorToLozengeAppearanceMap = {
+  neutral: 'default',
+  purple: 'new',
+  blue: 'inprogress',
+  red: 'removed',
+  yellow: 'moved',
+  green: 'success'
+};
+var DEFAULT_APPEARANCE = 'default';
+var MAX_WIDTH = 200;
+
+/**
+ * This is to account for a bug in android chromium and should be removed
+ * when the editor fixes its focus handling with respect to Status.
+ *
+ * See DSP-7701 for additional context.
+ */
+var inlineBlockStyles = null;
+
+// eg. Version/4.0 Chrome/95.0.4638.50
+var isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
+var StatusInternal = /*#__PURE__*/function (_PureComponent) {
+  function StatusInternal() {
+    var _this;
+    (0, _classCallCheck2.default)(this, StatusInternal);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, StatusInternal, [].concat(args));
+    (0, _defineProperty2.default)(_this, "hoverStartTime", 0);
+    (0, _defineProperty2.default)(_this, "handleMouseEnter", function (_e) {
+      _this.hoverStartTime = Date.now();
+    });
+    (0, _defineProperty2.default)(_this, "handleMouseLeave", function (_e) {
+      var onHover = _this.props.onHover;
+      var delay = Date.now() - _this.hoverStartTime;
+      if (delay >= _constants.ANALYTICS_HOVER_DELAY && onHover) {
+        onHover();
+      }
+      _this.hoverStartTime = 0;
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(StatusInternal, _PureComponent);
+  return (0, _createClass2.default)(StatusInternal, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.hoverStartTime = 0;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        text = _this$props.text,
+        color = _this$props.color,
+        style = _this$props.style,
+        role = _this$props.role,
+        onClick = _this$props.onClick,
+        isBold = _this$props.isBold;
+      if (text.trim().length === 0) {
+        return null;
+      }
+      var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
+      // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
+      return /*#__PURE__*/React.createElement("span", {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+        className: (0, _runtime.ax)([isAndroidChromium && "_d0dzdf4r _1k0l7vkz _1frxnkob", "status-lozenge-span"]),
+        onClick: onClick,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        "data-node-type": "status",
+        "data-color": color,
+        "data-style": style,
+        role: role
+      }, /*#__PURE__*/React.createElement(_compiled.default, {
+        appearance: appearance,
+        maxWidth: MAX_WIDTH,
+        isBold: isBold
+      }, text));
+    }
+  }]);
+}(_react.PureComponent);
+(0, _defineProperty2.default)(StatusInternal, "displayName", 'StatusInternal');
+var Status = exports.Status = (0, _analyticsNext.withAnalyticsEvents)({
+  onClick: function onClick(createEvent, props) {
+    var localId = props.localId;
+    return (0, _analytics.createStatusAnalyticsAndFire)(createEvent)({
+      action: 'clicked',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId: localId
+      }
+    });
+  },
+  onHover: function onHover(createEvent, props) {
+    var localId = props.localId;
+    return (0, _analytics.createStatusAnalyticsAndFire)(createEvent)({
+      action: 'hovered',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId: localId
+      }
+    });
+  }
+})(StatusInternal);

package/dist/cjs/components/compiled/StatusPicker.compiled.css

@@ -0,0 +1,5 @@
+
+._n6346qow [data-ds--text-field--container]{border-color:var(--_wxcsqj)}._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19pkidpf{margin-top:0}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}

package/dist/cjs/components/compiled/StatusPicker.js

@@ -0,0 +1,120 @@
+/* StatusPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusPicker = void 0;
+require("./StatusPicker.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _colorPalette = _interopRequireDefault(require("./internal/color-palette"));
+var _i18n = require("../i18n");
+var _colors = require("@atlaskit/theme/colors");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var fieldTextWrapperStyles = null;
+var Picker = /*#__PURE__*/function (_PureComponent) {
+  function Picker() {
+    var _this;
+    (0, _classCallCheck2.default)(this, Picker);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Picker, [].concat(args));
+    (0, _defineProperty2.default)(_this, "fieldTextWrapperKey", Math.random().toString());
+    (0, _defineProperty2.default)(_this, "colorPaletteKey", Math.random().toString());
+    (0, _defineProperty2.default)(_this, "onChange", function (evt) {
+      // @ts-ignore
+      _this.props.onTextChanged(evt.target.value);
+    });
+    (0, _defineProperty2.default)(_this, "onKeyPress", function (event) {
+      if (event.key === 'Enter') {
+        _this.props.onEnter();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "handleInputRef", function (ref) {
+      _this.inputRef = ref;
+      if (ref && _this.props.autoFocus) {
+        _this.focusInput();
+      }
+    });
+    (0, _defineProperty2.default)(_this, "focusInput", function () {
+      if (!_this.inputRef) {
+        return;
+      }
+      // Defer to prevent editor scrolling to top
+      _this.autofocusTimeout = setTimeout(function () {
+        var _this$inputRef;
+        (_this$inputRef = _this.inputRef) === null || _this$inputRef === void 0 || _this$inputRef.focus();
+      });
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(Picker, _PureComponent);
+  return (0, _createClass2.default)(Picker, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        text = _this$props.text,
+        selectedColor = _this$props.selectedColor,
+        onColorClick = _this$props.onColorClick,
+        onColorHover = _this$props.onColorHover,
+        intl = _this$props.intl;
+
+      // Using <React.Fragment> instead of [] to workaround Enzyme
+      // (https://github.com/airbnb/enzyme/issues/1149)
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        key: this.fieldTextWrapperKey,
+        className: (0, _runtime.ax)(["_19pkidpf _otyridpf _2hwxu2gc _18u0u2gc _n6346qow"]),
+        style: {
+          "--_wxcsqj": (0, _runtime.ix)("var(--ds-border-bold, ".concat(_colors.N80A, ")"))
+        }
+      }, /*#__PURE__*/_react.default.createElement(_textfield.default, {
+        value: text,
+        isCompact: true,
+        ref: this.handleInputRef,
+        onChange: this.onChange,
+        onKeyPress: this.onKeyPress,
+        spellCheck: false,
+        autoComplete: "off",
+        "aria-label": intl.formatMessage(_i18n.messages.statusInputLabel)
+      })), /*#__PURE__*/_react.default.createElement(_colorPalette.default, {
+        key: this.colorPaletteKey,
+        onClick: onColorClick,
+        onHover: onColorHover,
+        selectedColor: selectedColor
+      }));
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.inputRef && this.props.autoFocus) {
+        this.focusInput();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.autofocusTimeout !== undefined) {
+        clearTimeout(this.autofocusTimeout);
+      }
+    }
+  }]);
+}(_react.PureComponent);
+(0, _defineProperty2.default)(Picker, "defaultProps", {
+  autoFocus: true
+});
+var StatusPicker = exports.StatusPicker = (0, _reactIntlNext.injectIntl)(Picker);

package/dist/cjs/components/compiled/internal/color-palette.compiled.css

@@ -0,0 +1,7 @@
+._18u0u2gc{margin-left:var(--ds-space-100,8px)}
+._19bvidpf{padding-left:0}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._otyridpf{margin-bottom:0}

package/dist/cjs/components/compiled/internal/color-palette.js

@@ -0,0 +1,106 @@
+/* color-palette.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./color-palette.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _react = _interopRequireWildcard(require("react"));
+var _color = _interopRequireDefault(require("./color"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var paletteLegacy = [['neutral', "var(--ds-background-neutral, ".concat(colors.N40, ")"), "var(--ds-border-bold, ".concat(colors.N400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['purple', "var(--ds-background-discovery, ".concat(colors.P50, ")"), "var(--ds-border-discovery, ".concat(colors.P400, ")"), "var(--ds-icon-discovery, ".concat(colors.P400, ")")], ['blue', "var(--ds-background-information, ".concat(colors.B50, ")"), "var(--ds-border-information, ".concat(colors.B400, ")"), "var(--ds-icon-information, ".concat(colors.B400, ")")], ['red', "var(--ds-background-danger, ".concat(colors.R50, ")"), "var(--ds-border-danger, ".concat(colors.R400, ")"), "var(--ds-icon-danger, ".concat(colors.R400, ")")], ['yellow', "var(--ds-background-warning, ".concat(colors.Y50, ")"), "var(--ds-border-warning, ".concat(colors.Y400, ")"), "var(--ds-icon-warning, ".concat(colors.Y400, ")")], ['green', "var(--ds-background-success, ".concat(colors.G50, ")"), "var(--ds-border-success, ".concat(colors.G400, ")"), "var(--ds-icon-success, ".concat(colors.G400, ")")]];
+var paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, ".concat(colors.N300, ")"), "var(--ds-border-bold, ".concat(colors.N400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['blue', "var(--ds-background-information-pressed, ".concat(colors.B300, ")"), "var(--ds-border-information, ".concat(colors.B400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['green', "var(--ds-background-success-pressed, ".concat(colors.G300, ")"), "var(--ds-border-success, ".concat(colors.G400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['yellow', "var(--ds-background-warning-pressed, ".concat(colors.Y300, ")"), "var(--ds-border-warning, ".concat(colors.Y400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")], ['red', "var(--ds-background-danger-pressed, ".concat(colors.R300, ")"), "var(--ds-border-danger, ".concat(colors.R400, ")"), "var(--ds-icon, ".concat(colors.R400, ")")], ['purple', "var(--ds-background-discovery-pressed, ".concat(colors.P300, ")"), "var(--ds-border-discovery, ".concat(colors.P400, ")"), "var(--ds-icon, ".concat(colors.N400, ")")]];
+var getPalette = function getPalette() {
+  return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
+};
+var palette = getPalette();
+
+// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
+var colorPaletteWrapperStyles = null;
+var VK_LEFT = 37; //ArrowLeft
+var VK_RIGHT = 39; //ArrowRight
+var VK_UP = 38; //ArrowUp
+var VK_DOWN = 40; //ArrowDown
+var VK_TAB = 9;
+var _default = exports.default = function _default(_ref) {
+  var _ref$cols = _ref.cols,
+    cols = _ref$cols === void 0 ? 7 : _ref$cols,
+    onClick = _ref.onClick,
+    selectedColor = _ref.selectedColor,
+    className = _ref.className,
+    onHover = _ref.onHover;
+  var colorRefs = (0, _react.useRef)([]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    currentFocusedColor = _useState2[0],
+    setCurrentFocusedColor = _useState2[1];
+  (0, _react.useEffect)(function () {
+    colorRefs.current = colorRefs.current.slice(0, palette.length);
+  }, []);
+  var memoizedHandleKeyDown = (0, _react.useCallback)(function (e) {
+    var newColorIndex = null;
+    var nextColor = function nextColor() {
+      return currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
+    };
+    var previousColor = function previousColor() {
+      return currentFocusedColor - 1 < 0 ? palette.length - 1 : currentFocusedColor - 1;
+    };
+    switch (e.keyCode) {
+      case VK_RIGHT:
+      case VK_DOWN:
+        e.preventDefault();
+        newColorIndex = nextColor();
+        break;
+      case VK_LEFT:
+      case VK_UP:
+        e.preventDefault();
+        newColorIndex = previousColor();
+        break;
+      case VK_TAB:
+        setCurrentFocusedColor(0);
+        break;
+    }
+    if (newColorIndex === null) {
+      return;
+    }
+    setCurrentFocusedColor(newColorIndex);
+    var newRef = colorRefs.current[newColorIndex];
+    newRef === null || newRef === void 0 || newRef.focus();
+  }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
+  return /*#__PURE__*/_react.default.createElement("ul", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: (0, _runtime.ax)(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
+    style: {
+      maxWidth: cols * 32
+    },
+    onKeyDown: memoizedHandleKeyDown
+  }, palette.map(function (_ref2, i) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 4),
+      colorValue = _ref3[0],
+      backgroundColor = _ref3[1],
+      borderColor = _ref3[2],
+      iconColor = _ref3[3];
+    return /*#__PURE__*/_react.default.createElement(_color.default, {
+      key: colorValue,
+      value: colorValue,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      iconColor: iconColor,
+      onClick: onClick,
+      onHover: onHover,
+      isSelected: colorValue === selectedColor,
+      tabIndex: i === 0 ? 0 : -1,
+      setRef: function setRef(el) {
+        return colorRefs.current[i] = el;
+      }
+    });
+  }));
+};

package/dist/cjs/components/compiled/internal/color.compiled.css

@@ -0,0 +1,27 @@
+
+._19it7r9e{border:var(--ds-border-width,1px) solid var(--ds-border,#091e4224)}
+._2rko12x7{border-radius:var(--ds-space-075,6px)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._189et94y{border-width:1px}
+._1dqonqa1{border-style:solid}
+._1h6d1j28{border-color:transparent}
+._18m915vq{overflow-y:hidden}
+._18u0v77o{margin-left:var(--ds-space-025,2px)}
+._19bvt94y{padding-left:1px}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._19pkidpf{margin-top:0}
+._1bsb1tcg{width:24px}
+._1e0c1txw{display:flex}
+._1e0c1ule{display:block}
+._1reo15vq{overflow-x:hidden}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._4t3i1tcg{height:24px}
+._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
+._ca0qt94y{padding-top:1px}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._n3tdt94y{padding-bottom:1px}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._otyridpf{margin-bottom:0}
+._u5f3t94y{padding-right:1px}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._bfw7fovk:hover{border:var(--_9mxir2)}

package/dist/cjs/components/compiled/internal/color.js

@@ -0,0 +1,122 @@
+/* color.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./color.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _checkMarkEditorDone = _interopRequireDefault(require("@atlaskit/icon/core/migration/check-mark--editor-done"));
+var _colors = require("@atlaskit/theme/colors");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _reactIntlNext = require("react-intl-next");
+var _constants = require("../../constants");
+var _i18n = require("../../i18n");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var styles = {
+  button: "_2rkoglpi _19it7r9e _1reo15vq _18m915vq _4t3i1tcg _1bsb1tcg _bfhkm7j4 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _1e0c1ule"
+};
+
+// We have tried with changing border and padding from 1px to token near version 2px,
+// the pop - up is being expanded to two lines.
+var buttonWrapperStyles = null;
+var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
+  function Color() {
+    var _this;
+    (0, _classCallCheck2.default)(this, Color);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, Color, [].concat(args));
+    (0, _defineProperty2.default)(_this, "hoverStartTime", 0);
+    (0, _defineProperty2.default)(_this, "onMouseEnter", function () {
+      _this.hoverStartTime = Date.now();
+    });
+    (0, _defineProperty2.default)(_this, "onMouseLeave", function () {
+      var onHover = _this.props.onHover;
+      var delay = Date.now() - _this.hoverStartTime;
+      if (delay >= _constants.ANALYTICS_HOVER_DELAY && onHover) {
+        onHover(_this.props.value);
+      }
+      _this.hoverStartTime = 0;
+    });
+    (0, _defineProperty2.default)(_this, "onMouseDown", function (e) {
+      e.preventDefault();
+    });
+    (0, _defineProperty2.default)(_this, "onClick", function (e) {
+      var _this$props = _this.props,
+        onClick = _this$props.onClick,
+        value = _this$props.value;
+      e.preventDefault();
+      onClick(value);
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(Color, _PureComponent);
+  return (0, _createClass2.default)(Color, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props2 = this.props,
+        tabIndex = _this$props2.tabIndex,
+        backgroundColor = _this$props2.backgroundColor,
+        isSelected = _this$props2.isSelected,
+        borderColor = _this$props2.borderColor,
+        iconColor = _this$props2.iconColor,
+        value = _this$props2.value,
+        setRef = _this$props2.setRef;
+      return /*#__PURE__*/React.createElement("li", {
+        className: (0, _runtime.ax)(["_ca0qt94y _u5f3t94y _n3tdt94y _19bvt94y _2rko12x7 _189et94y _1dqonqa1 _1h6d1j28 _19pkidpf _2hwxv77o _otyridpf _18u0v77o _1e0c1txw _4cvr1h6o _bfw7fovk"]),
+        style: {
+          "--_9mxir2": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, ".concat(_colors.N50, ")")))
+        }
+      }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
+        return /*#__PURE__*/React.createElement(_compiled.Pressable, {
+          xcss: styles.button,
+          onClick: _this2.onClick,
+          onMouseEnter: _this2.onMouseEnter,
+          onMouseLeave: _this2.onMouseLeave,
+          onMouseDown: _this2.onMouseDown,
+          tabIndex: tabIndex,
+          title: labels[0]
+          // button element does not support aria-selected.
+          // For button selected (to be precise pressed) or not
+          //  use aria-pressed as per
+          // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/button_role#associated_aria_roles_states_and_properties
+          ,
+          "aria-pressed": isSelected,
+          style: {
+            backgroundColor: backgroundColor || 'transparent',
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+            color: iconColor,
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+            borderColor: borderColor
+          },
+          ref: setRef
+        }, isSelected && /*#__PURE__*/React.createElement(_checkMarkEditorDone.default, {
+          color: "currentColor",
+          label: labels[0]
+        }));
+      }));
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.hoverStartTime = 0;
+    }
+  }]);
+}(_react.PureComponent);

package/dist/cjs/element.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Status", {
-  enumerable: true,
-  get: function get() {
-    return _Status.Status;
-  }
-});
-var _Status = require("./components/Status");
+exports.Status = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
+var _Status = require("./components/Status");
+var _Status2 = require("./components/compiled/Status");
+var Status = exports.Status = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _Status2.Status, _Status.Status);

package/dist/cjs/index.js

@@ -3,17 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Status", {
-  enumerable: true,
-  get: function get() {
-    return _Status.Status;
-  }
-});
-Object.defineProperty(exports, "StatusPicker", {
-  enumerable: true,
-  get: function get() {
-    return _StatusPicker.StatusPicker;
-  }
-});
+exports.StatusPicker = exports.Status = void 0;
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _Status = require("./components/Status");
-var _StatusPicker = require("./components/StatusPicker");
+var _Status2 = require("./components/compiled/Status");
+var _StatusPicker = require("./components/StatusPicker");
+var _StatusPicker2 = require("./components/compiled/StatusPicker");
+var Status = exports.Status = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _Status2.Status, _Status.Status);
+var StatusPicker = exports.StatusPicker = (0, _platformFeatureFlagsReact.componentWithFG)('platform_editor_css_migrate_stage_1', _StatusPicker2.StatusPicker, _StatusPicker.StatusPicker);