@atlaskit/status 2.0.0 → 3.0.0

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "2.0.0";
+const packageVersion = "3.0.0";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = {
     ...payload,

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

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

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

@@ -0,0 +1,110 @@
+/* Status.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Status.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { PureComponent } from 'react';
+import Lozenge from '@atlaskit/lozenge/compiled';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createStatusAnalyticsAndFire } from '../analytics';
+import { ANALYTICS_HOVER_DELAY } from '../constants';
+const colorToLozengeAppearanceMap = {
+  neutral: 'default',
+  purple: 'new',
+  blue: 'inprogress',
+  red: 'removed',
+  yellow: 'moved',
+  green: 'success'
+};
+const DEFAULT_APPEARANCE = 'default';
+const 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.
+ */
+const inlineBlockStyles = null;
+
+// eg. Version/4.0 Chrome/95.0.4638.50
+const isAndroidChromium = typeof window !== 'undefined' && /Version\/.* Chrome\/.*/.test(window.navigator.userAgent);
+class StatusInternal extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "hoverStartTime", 0);
+    _defineProperty(this, "handleMouseEnter", _e => {
+      this.hoverStartTime = Date.now();
+    });
+    _defineProperty(this, "handleMouseLeave", _e => {
+      const {
+        onHover
+      } = this.props;
+      const delay = Date.now() - this.hoverStartTime;
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover();
+      }
+      this.hoverStartTime = 0;
+    });
+  }
+  componentWillUnmount() {
+    this.hoverStartTime = 0;
+  }
+  render() {
+    const {
+      text,
+      color,
+      style,
+      role,
+      onClick,
+      isBold
+    } = this.props;
+    if (text.trim().length === 0) {
+      return null;
+    }
+    const 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: 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(Lozenge, {
+      appearance: appearance,
+      maxWidth: MAX_WIDTH,
+      isBold: isBold
+    }, text));
+  }
+}
+_defineProperty(StatusInternal, "displayName", 'StatusInternal');
+export const Status = withAnalyticsEvents({
+  onClick: (createEvent, props) => {
+    const {
+      localId
+    } = props;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'clicked',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId
+      }
+    });
+  },
+  onHover: (createEvent, props) => {
+    const {
+      localId
+    } = props;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'hovered',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId
+      }
+    });
+  }
+})(StatusInternal);

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

@@ -0,0 +1,5 @@
+
+._n634qx0o [data-ds--text-field--container]{border-color:var(--ds-border-bold,rgba(9,30,66,.42))}._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/es2019/components/compiled/StatusPicker.js

@@ -0,0 +1,87 @@
+/* StatusPicker.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./StatusPicker.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import TextField from '@atlaskit/textfield';
+import React, { PureComponent } from 'react';
+import { injectIntl } from 'react-intl-next';
+import ColorPalette from './internal/color-palette';
+import { messages } from '../i18n';
+import { N80A } from '@atlaskit/theme/colors';
+const fieldTextWrapperStyles = null;
+class Picker extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "fieldTextWrapperKey", Math.random().toString());
+    _defineProperty(this, "colorPaletteKey", Math.random().toString());
+    _defineProperty(this, "onChange", evt => {
+      // @ts-ignore
+      this.props.onTextChanged(evt.target.value);
+    });
+    _defineProperty(this, "onKeyPress", event => {
+      if (event.key === 'Enter') {
+        this.props.onEnter();
+      }
+    });
+    _defineProperty(this, "handleInputRef", ref => {
+      this.inputRef = ref;
+      if (ref && this.props.autoFocus) {
+        this.focusInput();
+      }
+    });
+    _defineProperty(this, "focusInput", () => {
+      if (!this.inputRef) {
+        return;
+      }
+      // Defer to prevent editor scrolling to top
+      this.autofocusTimeout = setTimeout(() => {
+        var _this$inputRef;
+        (_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.focus();
+      });
+    });
+  }
+  render() {
+    const {
+      text,
+      selectedColor,
+      onColorClick,
+      onColorHover,
+      intl
+    } = this.props;
+
+    // Using <React.Fragment> instead of [] to workaround Enzyme
+    // (https://github.com/airbnb/enzyme/issues/1149)
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      key: this.fieldTextWrapperKey,
+      className: ax(["_19pkidpf _otyridpf _2hwxu2gc _18u0u2gc _n634qx0o"])
+    }, /*#__PURE__*/React.createElement(TextField, {
+      value: text,
+      isCompact: true,
+      ref: this.handleInputRef,
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      spellCheck: false,
+      autoComplete: "off",
+      "aria-label": intl.formatMessage(messages.statusInputLabel)
+    })), /*#__PURE__*/React.createElement(ColorPalette, {
+      key: this.colorPaletteKey,
+      onClick: onColorClick,
+      onHover: onColorHover,
+      selectedColor: selectedColor
+    }));
+  }
+  componentDidUpdate() {
+    if (this.inputRef && this.props.autoFocus) {
+      this.focusInput();
+    }
+  }
+  componentWillUnmount() {
+    if (this.autofocusTimeout !== undefined) {
+      clearTimeout(this.autofocusTimeout);
+    }
+  }
+}
+_defineProperty(Picker, "defaultProps", {
+  autoFocus: true
+});
+export const StatusPicker = injectIntl(Picker);

package/dist/es2019/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/es2019/components/compiled/internal/color-palette.js

@@ -0,0 +1,79 @@
+/* color-palette.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./color-palette.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import * as colors from '@atlaskit/theme/colors';
+import React, { useEffect, useRef, useCallback, useState } from 'react';
+import Color from './color';
+import { fg } from '@atlaskit/platform-feature-flags';
+const paletteLegacy = [['neutral', `var(--ds-background-neutral, ${colors.N40})`, `var(--ds-border-bold, ${colors.N400})`, `var(--ds-icon, ${colors.N400})`], ['purple', `var(--ds-background-discovery, ${colors.P50})`, `var(--ds-border-discovery, ${colors.P400})`, `var(--ds-icon-discovery, ${colors.P400})`], ['blue', `var(--ds-background-information, ${colors.B50})`, `var(--ds-border-information, ${colors.B400})`, `var(--ds-icon-information, ${colors.B400})`], ['red', `var(--ds-background-danger, ${colors.R50})`, `var(--ds-border-danger, ${colors.R400})`, `var(--ds-icon-danger, ${colors.R400})`], ['yellow', `var(--ds-background-warning, ${colors.Y50})`, `var(--ds-border-warning, ${colors.Y400})`, `var(--ds-icon-warning, ${colors.Y400})`], ['green', `var(--ds-background-success, ${colors.G50})`, `var(--ds-border-success, ${colors.G400})`, `var(--ds-icon-success, ${colors.G400})`]];
+const paletteRefreshed = [['neutral', `var(--ds-background-accent-gray-subtler, ${colors.N300})`, `var(--ds-border-bold, ${colors.N400})`, `var(--ds-icon, ${colors.N400})`], ['blue', `var(--ds-background-information-pressed, ${colors.B300})`, `var(--ds-border-information, ${colors.B400})`, `var(--ds-icon, ${colors.N400})`], ['green', `var(--ds-background-success-pressed, ${colors.G300})`, `var(--ds-border-success, ${colors.G400})`, `var(--ds-icon, ${colors.N400})`], ['yellow', `var(--ds-background-warning-pressed, ${colors.Y300})`, `var(--ds-border-warning, ${colors.Y400})`, `var(--ds-icon, ${colors.N400})`], ['red', `var(--ds-background-danger-pressed, ${colors.R300})`, `var(--ds-border-danger, ${colors.R400})`, `var(--ds-icon, ${colors.R400})`], ['purple', `var(--ds-background-discovery-pressed, ${colors.P300})`, `var(--ds-border-discovery, ${colors.P400})`, `var(--ds-icon, ${colors.N400})`]];
+const getPalette = () => fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
+const 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
+const colorPaletteWrapperStyles = null;
+const VK_LEFT = 37; //ArrowLeft
+const VK_RIGHT = 39; //ArrowRight
+const VK_UP = 38; //ArrowUp
+const VK_DOWN = 40; //ArrowDown
+const VK_TAB = 9;
+export default (({
+  cols = 7,
+  onClick,
+  selectedColor,
+  className,
+  onHover
+}) => {
+  const colorRefs = useRef([]);
+  const [currentFocusedColor, setCurrentFocusedColor] = useState(0);
+  useEffect(() => {
+    colorRefs.current = colorRefs.current.slice(0, palette.length);
+  }, []);
+  const memoizedHandleKeyDown = useCallback(e => {
+    let newColorIndex = null;
+    const nextColor = () => currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
+    const previousColor = () => 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);
+    const newRef = colorRefs.current[newColorIndex];
+    newRef === null || newRef === void 0 ? void 0 : newRef.focus();
+  }, [currentFocusedColor, setCurrentFocusedColor, colorRefs]);
+  return /*#__PURE__*/React.createElement("ul", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    className: ax(["_19bvidpf _19pku2gc _2hwxu2gc _otyridpf _18u0u2gc _1e0c1txw _1n261g80", className]),
+    style: {
+      maxWidth: cols * 32
+    },
+    onKeyDown: memoizedHandleKeyDown
+  }, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => {
+    return /*#__PURE__*/React.createElement(Color, {
+      key: colorValue,
+      value: colorValue,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      iconColor: iconColor,
+      onClick: onClick,
+      onHover: onHover,
+      isSelected: colorValue === selectedColor,
+      tabIndex: i === 0 ? 0 : -1,
+      setRef: el => colorRefs.current[i] = el
+    });
+  }));
+});

package/dist/es2019/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)}
+._bfw717nx:hover{border:1px solid var(--ds-border,#c1c7d0)}

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

@@ -0,0 +1,91 @@
+/* color.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./color.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import EditorDoneIcon from '@atlaskit/icon/core/migration/check-mark--editor-done';
+import { N50 } from '@atlaskit/theme/colors';
+import { Pressable } from '@atlaskit/primitives/compiled';
+import { PureComponent } from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { ANALYTICS_HOVER_DELAY } from '../../constants';
+import { messages } from '../../i18n';
+const 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.
+const buttonWrapperStyles = null;
+export default class Color extends PureComponent {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "hoverStartTime", 0);
+    _defineProperty(this, "onMouseEnter", () => {
+      this.hoverStartTime = Date.now();
+    });
+    _defineProperty(this, "onMouseLeave", () => {
+      const {
+        onHover
+      } = this.props;
+      const delay = Date.now() - this.hoverStartTime;
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover(this.props.value);
+      }
+      this.hoverStartTime = 0;
+    });
+    _defineProperty(this, "onMouseDown", e => {
+      e.preventDefault();
+    });
+    _defineProperty(this, "onClick", e => {
+      const {
+        onClick,
+        value
+      } = this.props;
+      e.preventDefault();
+      onClick(value);
+    });
+  }
+  render() {
+    const {
+      tabIndex,
+      backgroundColor,
+      isSelected,
+      borderColor,
+      iconColor,
+      value,
+      setRef
+    } = this.props;
+    return /*#__PURE__*/React.createElement("li", {
+      className: ax(["_ca0qt94y _u5f3t94y _n3tdt94y _19bvt94y _2rko12x7 _189et94y _1dqonqa1 _1h6d1j28 _19pkidpf _2hwxv77o _otyridpf _18u0v77o _1e0c1txw _4cvr1h6o _bfw717nx"])
+    }, /*#__PURE__*/React.createElement(FormattedMessage, messages[`${value}Color`], labels => /*#__PURE__*/React.createElement(Pressable, {
+      xcss: styles.button,
+      onClick: this.onClick,
+      onMouseEnter: this.onMouseEnter,
+      onMouseLeave: this.onMouseLeave,
+      onMouseDown: this.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
+      },
+      ref: setRef
+    }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+      color: "currentColor",
+      label: labels[0]
+    }))));
+  }
+  componentWillUnmount() {
+    this.hoverStartTime = 0;
+  }
+}

package/dist/es2019/element.js

@@ -1 +1,5 @@
-export { Status } from './components/Status';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { Status as EmotionStatus } from './components/Status';
+import { Status as CompiledStatus } from './components/compiled/Status';
+const Status = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatus, EmotionStatus);
+export { Status };

package/dist/es2019/index.js

@@ -1,2 +1,8 @@
-export { Status } from './components/Status';
-export { StatusPicker } from './components/StatusPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { Status as EmotionStatus } from './components/Status';
+import { Status as CompiledStatus } from './components/compiled/Status';
+import { StatusPicker as EmotionStatusPicker } from './components/StatusPicker';
+import { StatusPicker as CompiledStatusPicker } from './components/compiled/StatusPicker';
+const Status = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatus, EmotionStatus);
+const StatusPicker = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatusPicker, EmotionStatusPicker);
+export { Status, StatusPicker };

package/dist/es2019/picker.js

@@ -1 +1,5 @@
-export { StatusPicker } from './components/StatusPicker';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
+import { StatusPicker as EmotionStatusPicker } from './components/StatusPicker';
+import { StatusPicker as CompiledStatusPicker } from './components/compiled/StatusPicker';
+const StatusPicker = componentWithFG('platform_editor_css_migrate_stage_1', CompiledStatusPicker, EmotionStatusPicker);
+export { StatusPicker };

package/dist/esm/components/analytics.js

@@ -3,7 +3,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) { _defineProperty(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; }
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "2.0.0";
+var packageVersion = "3.0.0";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

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

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

@@ -0,0 +1,122 @@
+/* Status.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./Status.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import { PureComponent } from 'react';
+import Lozenge from '@atlaskit/lozenge/compiled';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { createStatusAnalyticsAndFire } from '../analytics';
+import { ANALYTICS_HOVER_DELAY } from '../constants';
+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;
+    _classCallCheck(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));
+    _defineProperty(_this, "hoverStartTime", 0);
+    _defineProperty(_this, "handleMouseEnter", function (_e) {
+      _this.hoverStartTime = Date.now();
+    });
+    _defineProperty(_this, "handleMouseLeave", function (_e) {
+      var onHover = _this.props.onHover;
+      var delay = Date.now() - _this.hoverStartTime;
+      if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
+        onHover();
+      }
+      _this.hoverStartTime = 0;
+    });
+    return _this;
+  }
+  _inherits(StatusInternal, _PureComponent);
+  return _createClass(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: 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(Lozenge, {
+        appearance: appearance,
+        maxWidth: MAX_WIDTH,
+        isBold: isBold
+      }, text));
+    }
+  }]);
+}(PureComponent);
+_defineProperty(StatusInternal, "displayName", 'StatusInternal');
+export var Status = withAnalyticsEvents({
+  onClick: function onClick(createEvent, props) {
+    var localId = props.localId;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'clicked',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId: localId
+      }
+    });
+  },
+  onHover: function onHover(createEvent, props) {
+    var localId = props.localId;
+    return createStatusAnalyticsAndFire(createEvent)({
+      action: 'hovered',
+      actionSubject: 'statusLozenge',
+      attributes: {
+        localId: localId
+      }
+    });
+  }
+})(StatusInternal);

package/dist/esm/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}