@atlaskit/status 1.2.8 → 1.2.10

package/dist/esm/components/Status.js

@@ -5,11 +5,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** @jsx jsx */
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,7 +14,6 @@ import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
 import { ANALYTICS_HOVER_DELAY } from './constants';
-
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 var colorToLozengeAppearanceMap = {
   neutral: 'default',
@@ -31,59 +27,46 @@ var colorToLozengeAppearanceMap = {
 
 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 = css({
   '& > *': {
     display: 'inline-block !important',
     lineHeight: '16px'
   }
-}); // eg. Version/4.0 Chrome/95.0.4638.50
+});
 
+// 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) {
   _inherits(StatusInternal, _PureComponent);
-
   var _super = _createSuper(StatusInternal);
-
   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 = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "hoverStartTime", 0);
-
     _defineProperty(_assertThisInitialized(_this), "handleMouseEnter", function (_e) {
       _this.hoverStartTime = Date.now();
     });
-
     _defineProperty(_assertThisInitialized(_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;
   }
-
   _createClass(StatusInternal, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
@@ -93,18 +76,16 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
     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;
-
+        text = _this$props.text,
+        color = _this$props.color,
+        style = _this$props.style,
+        role = _this$props.role,
+        onClick = _this$props.onClick;
       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
-
+      var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE;
+      // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
       return jsx("span", {
         css: isAndroidChromium ? inlineBlockStyles : undefined,
         className: "status-lozenge-span",
@@ -121,12 +102,9 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
       }, text));
     }
   }]);
-
   return StatusInternal;
 }(PureComponent);
-
 _defineProperty(StatusInternal, "displayName", 'StatusInternal');
-
 export var Status = withAnalyticsEvents({
   onClick: function onClick(createEvent, props) {
     var localId = props.localId;

package/dist/esm/components/StatusPicker.js

@@ -6,13 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** @jsx jsx */
 import TextField from '@atlaskit/textfield';
 import { gridSize } from '@atlaskit/theme/constants';
@@ -22,38 +18,27 @@ import { css, jsx } from '@emotion/react';
 import ColorPalette from './internal/color-palette';
 import { messages } from './i18n';
 var fieldTextWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"])), gridSize());
-
 var Picker = /*#__PURE__*/function (_PureComponent) {
   _inherits(Picker, _PureComponent);
-
   var _super = _createSuper(Picker);
-
   function Picker() {
     var _this;
-
     _classCallCheck(this, Picker);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "fieldTextWrapperKey", Math.random().toString());
-
     _defineProperty(_assertThisInitialized(_this), "colorPaletteKey", Math.random().toString());
-
     _defineProperty(_assertThisInitialized(_this), "onChange", function (evt) {
       // @ts-ignore
       _this.props.onTextChanged(evt.target.value);
     });
-
     _defineProperty(_assertThisInitialized(_this), "onKeyPress", function (event) {
       if (event.key === 'Enter') {
         _this.props.onEnter();
       }
     });
-
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (ref) {
       if (ref && _this.props.autoFocus) {
         // Defer to prevent editor scrolling to top (See FS-3227, also ED-2992)
@@ -62,21 +47,20 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
         }, 50);
       }
     });
-
     return _this;
   }
-
   _createClass(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)
+        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 jsx(React.Fragment, null, jsx("div", {
         css: fieldTextWrapperStyles,
         key: this.fieldTextWrapperKey
@@ -97,12 +81,9 @@ var Picker = /*#__PURE__*/function (_PureComponent) {
       }));
     }
   }]);
-
   return Picker;
 }(PureComponent);
-
 _defineProperty(Picker, "defaultProps", {
   autoFocus: true
 });
-
 export var StatusPicker = injectIntl(Picker);

package/dist/esm/components/analytics.js

@@ -1,22 +1,17 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.2.8";
+var packageVersion = "1.2.10";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {
       eventType: 'ui'
     });
-
     if (!statusPayload.attributes) {
       statusPayload.attributes = {};
     }
-
     statusPayload.attributes.packageName = packageName;
     statusPayload.attributes.packageVersion = packageVersion;
     statusPayload.attributes.componentName = 'status';

package/dist/esm/components/internal/color-palette.js

@@ -1,8 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject;
-
 /** @jsx jsx */
 import { gridSize } from '@atlaskit/theme/constants';
 import * as colors from '@atlaskit/theme/colors';
@@ -12,21 +10,17 @@ import Color from './color';
 var palette = [['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 colorPaletteWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: ", "px ", "px 0 ", "px;\n  /* Firefox bug fix: https://product-fabric.atlassian.net/browse/ED-1789 */\n  display: flex;\n  flex-wrap: wrap;\n"])), gridSize(), gridSize(), gridSize());
 var VK_LEFT = 37; //ArrowLeft
-
 var VK_RIGHT = 39; //ArrowRight
-
 var VK_UP = 38; //ArrowUp
-
 var VK_DOWN = 40; //ArrowDown
-
 var VK_TAB = 9;
 export default (function (_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;
+    cols = _ref$cols === void 0 ? 7 : _ref$cols,
+    onClick = _ref.onClick,
+    selectedColor = _ref.selectedColor,
+    className = _ref.className,
+    onHover = _ref.onHover;
   var colorRefs = useRef([]);
   useEffect(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
@@ -34,49 +28,39 @@ export default (function (_ref) {
   var memoizedHandleKeyDown = useCallback(function (e) {
     var colorIndex = palette.findIndex(function (_ref2) {
       var _ref3 = _slicedToArray(_ref2, 1),
-          colorValue = _ref3[0];
-
+        colorValue = _ref3[0];
       return colorValue === selectedColor;
     });
     var newColorIndex = null;
-
     var nextColor = function nextColor() {
       return colorIndex + 1 > palette.length - 1 ? 0 : colorIndex + 1;
     };
-
     var previousColor = function previousColor() {
       return colorIndex - 1 < 0 ? palette.length - 1 : colorIndex - 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:
         e.preventDefault();
-
         if (e.shiftKey) {
           newColorIndex = previousColor();
         } else {
           newColorIndex = nextColor();
         }
-
         break;
     }
-
     if (newColorIndex === null) {
       return;
     }
-
     var newColorValue = palette[newColorIndex][0];
     var newRef = colorRefs.current[newColorIndex];
     newRef === null || newRef === void 0 ? void 0 : newRef.focus();
@@ -100,11 +84,10 @@ export default (function (_ref) {
       onKeyDown: memoizedHandleKeyDown
     }, palette.map(function (_ref4, i) {
       var _ref5 = _slicedToArray(_ref4, 4),
-          colorValue = _ref5[0],
-          backgroundColor = _ref5[1],
-          borderColor = _ref5[2],
-          iconColor = _ref5[3];
-
+        colorValue = _ref5[0],
+        backgroundColor = _ref5[1],
+        borderColor = _ref5[2],
+        iconColor = _ref5[3];
       return jsx(Color, {
         key: colorValue,
         value: colorValue,

package/dist/esm/components/internal/color.js

@@ -6,13 +6,9 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-
 var _templateObject, _templateObject2;
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** @jsx jsx */
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import { N900, N0, N50 } from '@atlaskit/theme/colors';
@@ -23,69 +19,52 @@ import { ANALYTICS_HOVER_DELAY } from '../constants';
 import { messages } from '../i18n';
 var buttonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  height: 24px;\n  width: 24px;\n  background: ", ";\n  padding: 0;\n  border-radius: 4px;\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n  box-sizing: border-box;\n  overflow: hidden;\n"])), "var(--ds-background-neutral, ".concat(N900, ")"), "var(--ds-border, ".concat(N0, ")"));
 var buttonWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  border: 1px solid transparent;\n  margin: 0 2px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:hover {\n    border: 1px solid ", ";\n  }\n"])), "var(--ds-border, ".concat(N50, ")"));
-
 var Color = /*#__PURE__*/function (_PureComponent) {
   _inherits(Color, _PureComponent);
-
   var _super = _createSuper(Color);
-
   function Color() {
     var _this;
-
     _classCallCheck(this, Color);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
-
     _defineProperty(_assertThisInitialized(_this), "hoverStartTime", 0);
-
     _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function () {
       _this.hoverStartTime = Date.now();
     });
-
     _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function () {
       var onHover = _this.props.onHover;
-
       var delay = Date.now() - _this.hoverStartTime;
-
       if (delay >= ANALYTICS_HOVER_DELAY && onHover) {
         onHover(_this.props.value);
       }
-
       _this.hoverStartTime = 0;
     });
-
     _defineProperty(_assertThisInitialized(_this), "onMouseDown", function (e) {
       e.preventDefault();
     });
-
     _defineProperty(_assertThisInitialized(_this), "onClick", function (e) {
       var _this$props = _this.props,
-          onClick = _this$props.onClick,
-          value = _this$props.value;
+        onClick = _this$props.onClick,
+        value = _this$props.value;
       e.preventDefault();
       onClick(value);
     });
-
     return _this;
   }
-
   _createClass(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;
+        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 jsx("span", {
         css: buttonWrapperStyles
       }, jsx(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
@@ -97,7 +76,8 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           onMouseDown: _this2.onMouseDown,
           tabIndex: tabIndex,
           className: "".concat(isSelected ? 'selected' : ''),
-          title: labels[0] // button element does not support aria-selected.
+          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
@@ -120,8 +100,6 @@ var Color = /*#__PURE__*/function (_PureComponent) {
       this.hoverStartTime = 0;
     }
   }]);
-
   return Color;
 }(PureComponent);
-
 export { Color as default };

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.8"
+	"version": "1.2.10"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,12 +25,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.0.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/lozenge": "^11.3.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -59,7 +59,9 @@
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "techstack": {
     "@repo/internal": {
-      "theming": "tokens"
+      "design-tokens": [
+        "color"
+      ]
     }
   }
 }