@atlaskit/status 0.11.3

package/dist/es2019/i18n/tr.js

@@ -0,0 +1,15 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by i18n-tools.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+// Turkish
+export default {
+  'fabric.status.color.blue': 'Mavi',
+  'fabric.status.color.green': 'Yeşil',
+  'fabric.status.color.grey': 'Gri',
+  'fabric.status.color.purple': 'Mor',
+  'fabric.status.color.red': 'Kırmızı',
+  'fabric.status.color.yellow': 'Sarı'
+};

package/dist/es2019/i18n/uk.js

@@ -0,0 +1,15 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by i18n-tools.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+// Ukrainian
+export default {
+  'fabric.status.color.blue': 'Синій',
+  'fabric.status.color.green': 'Зелений',
+  'fabric.status.color.grey': 'Сірий',
+  'fabric.status.color.purple': 'Фіолетовий',
+  'fabric.status.color.red': 'Червоний',
+  'fabric.status.color.yellow': 'Жовтий'
+};

package/dist/es2019/i18n/vi.js

@@ -0,0 +1,15 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by i18n-tools.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+// Vietnamese
+export default {
+  'fabric.status.color.blue': 'Xanh lam',
+  'fabric.status.color.green': 'Xanh lục',
+  'fabric.status.color.grey': 'Xám',
+  'fabric.status.color.purple': 'Tím',
+  'fabric.status.color.red': 'Đỏ',
+  'fabric.status.color.yellow': 'Vàng'
+};

package/dist/es2019/i18n/zh.js

@@ -0,0 +1,15 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by i18n-tools.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+// Chinese
+export default {
+  'fabric.status.color.blue': '蓝色',
+  'fabric.status.color.green': '绿色',
+  'fabric.status.color.grey': '灰色',
+  'fabric.status.color.purple': '紫色',
+  'fabric.status.color.red': '红色',
+  'fabric.status.color.yellow': '黄色'
+};

package/dist/es2019/i18n/zh_TW.js

@@ -0,0 +1,15 @@
+/**
+ * NOTE:
+ *
+ * This file is automatically generated by i18n-tools.
+ * DO NOT CHANGE IT BY HAND or your changes will be lost.
+ */
+// undefined
+export default {
+  'fabric.status.color.blue': '藍色',
+  'fabric.status.color.green': '綠色',
+  'fabric.status.color.grey': '灰色',
+  'fabric.status.color.purple': '紫色',
+  'fabric.status.color.red': '紅色',
+  'fabric.status.color.yellow': '黃色'
+};

package/dist/es2019/index.js

@@ -0,0 +1,2 @@
+export { Status } from './components/Status';
+export { StatusPicker } from './components/StatusPicker';

package/dist/es2019/picker.js

@@ -0,0 +1 @@
+export { StatusPicker } from './components/StatusPicker';

package/dist/es2019/version.json

@@ -0,0 +1,4 @@
+{
+	"name": "@atlaskit/status",
+	"version": "0.11.3"
+}

package/dist/esm/components/Status.js

@@ -0,0 +1,130 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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; } }
+
+import React from 'react';
+import { PureComponent } from 'react';
+import Lozenge from '@atlaskit/lozenge';
+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;
+
+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() {
+      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,
+          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
+
+      return /*#__PURE__*/React.createElement("span", {
+        className: "status-lozenge-span" // Using title here as `@atlaskit/tooltip` adds too much overhead
+        ,
+        title: text,
+        onClick: onClick,
+        onMouseEnter: this.handleMouseEnter,
+        onMouseLeave: this.handleMouseLeave,
+        "data-node-type": "status",
+        "data-color": color,
+        "data-style": style
+      }, /*#__PURE__*/React.createElement(Lozenge, {
+        appearance: appearance,
+        maxWidth: MAX_WIDTH
+      }, text));
+    }
+  }]);
+
+  return StatusInternal;
+}(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/StatusPicker.js

@@ -0,0 +1,100 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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";
+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; } }
+
+import TextField from '@atlaskit/textfield';
+import { gridSize } from '@atlaskit/theme/constants';
+import React from 'react';
+import { PureComponent } from 'react';
+import styled from 'styled-components';
+import ColorPalette from './internal/color-palette';
+var FieldTextWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin: 0 ", "px;\n"])), gridSize());
+export var StatusPicker = /*#__PURE__*/function (_PureComponent) {
+  _inherits(StatusPicker, _PureComponent);
+
+  var _super = _createSuper(StatusPicker);
+
+  function StatusPicker() {
+    var _this;
+
+    _classCallCheck(this, StatusPicker);
+
+    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)
+        setTimeout(function () {
+          ref.focus();
+        });
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(StatusPicker, [{
+    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; // 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(FieldTextWrapper, {
+        key: this.fieldTextWrapperKey
+      }, /*#__PURE__*/React.createElement(TextField, {
+        value: text,
+        isCompact: true,
+        ref: this.handleInputRef,
+        onChange: this.onChange,
+        onKeyPress: this.onKeyPress,
+        spellCheck: false,
+        autoComplete: "off"
+      })), /*#__PURE__*/React.createElement(ColorPalette, {
+        key: this.colorPaletteKey,
+        onClick: onColorClick,
+        onHover: onColorHover,
+        selectedColor: selectedColor
+      }));
+    }
+  }]);
+
+  return StatusPicker;
+}(PureComponent);
+
+_defineProperty(StatusPicker, "defaultProps", {
+  autoFocus: true
+});

package/dist/esm/components/analytics.js

@@ -0,0 +1,26 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { name as packageName, version as packageVersion } from '../version.json';
+export var ELEMENTS_CHANNEL = 'fabric-elements';
+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';
+    var event = createAnalyticsEvent(statusPayload);
+    event.fire(ELEMENTS_CHANNEL);
+    return event;
+  };
+};

package/dist/esm/components/constants.js

@@ -0,0 +1 @@
+export var ANALYTICS_HOVER_DELAY = 1000;

package/dist/esm/components/i18n.js

@@ -0,0 +1,33 @@
+import { defineMessages } from 'react-intl';
+export var messages = defineMessages({
+  neutralColor: {
+    id: 'fabric.status.color.grey',
+    defaultMessage: 'Grey',
+    description: 'Tooltip for the grey color in color palette'
+  },
+  purpleColor: {
+    id: 'fabric.status.color.purple',
+    defaultMessage: 'Purple',
+    description: 'Tooltip for the purple color in color palette'
+  },
+  blueColor: {
+    id: 'fabric.status.color.blue',
+    defaultMessage: 'Blue',
+    description: 'Tooltip for the blue color in color palette'
+  },
+  redColor: {
+    id: 'fabric.status.color.red',
+    defaultMessage: 'Red',
+    description: 'Tooltip for the red color in color palette'
+  },
+  yellowColor: {
+    id: 'fabric.status.color.yellow',
+    defaultMessage: 'Yellow',
+    description: 'Tooltip for the yellow color in color palette'
+  },
+  greenColor: {
+    id: 'fabric.status.color.green',
+    defaultMessage: 'Green',
+    description: 'Tooltip for the green color in color palette'
+  }
+});

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

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+import { gridSize } from '@atlaskit/theme/constants';
+import * as colors from '@atlaskit/theme/colors';
+import React from 'react';
+import styled from 'styled-components';
+import Color from './color'; // color value, label, background, borderColor
+
+var palette = [['neutral', colors.N40, colors.N400], ['purple', colors.P50, colors.P400], ['blue', colors.B50, colors.B400], ['red', colors.R50, colors.R400], ['yellow', colors.Y75, colors.Y400], ['green', colors.G50, colors.G400]];
+var ColorPaletteWrapper = styled.div(_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());
+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;
+  return /*#__PURE__*/React.createElement(ColorPaletteWrapper, {
+    className: className,
+    style: {
+      maxWidth: cols * 32
+    }
+  }, palette.map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 3),
+        colorValue = _ref3[0],
+        backgroundColor = _ref3[1],
+        borderColor = _ref3[2];
+
+    return /*#__PURE__*/React.createElement(Color, {
+      key: colorValue,
+      value: colorValue,
+      backgroundColor: backgroundColor,
+      borderColor: borderColor,
+      onClick: onClick,
+      onHover: onHover,
+      isSelected: colorValue === selectedColor
+    });
+  }));
+});

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

@@ -0,0 +1,117 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+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";
+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; } }
+
+import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
+import { N900, N0, N50 } from '@atlaskit/theme/colors';
+import React from 'react';
+import { PureComponent } from 'react';
+import { FormattedMessage } from 'react-intl';
+import styled from 'styled-components';
+import { ANALYTICS_HOVER_DELAY } from '../constants';
+import { messages } from '../i18n';
+var Button = styled.button(_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"])), N900, N0);
+var ButtonWrapper = styled.span(_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"])), 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;
+      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,
+          value = _this$props2.value;
+      var borderStyle = "1px solid ".concat(borderColor);
+      return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (label) {
+        return /*#__PURE__*/React.createElement(Button, {
+          onClick: _this2.onClick,
+          onMouseEnter: _this2.onMouseEnter,
+          onMouseLeave: _this2.onMouseLeave,
+          onMouseDown: _this2.onMouseDown,
+          tabIndex: tabIndex,
+          className: "".concat(isSelected ? 'selected' : ''),
+          title: label,
+          style: {
+            backgroundColor: backgroundColor || 'transparent',
+            border: borderStyle
+          }
+        }, isSelected && /*#__PURE__*/React.createElement(EditorDoneIcon, {
+          primaryColor: borderColor,
+          label: label
+        }));
+      }));
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.hoverStartTime = 0;
+    }
+  }]);
+
+  return Color;
+}(PureComponent);
+
+export { Color as default };