@atlaskit/status 1.2.1 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/status
 
+## 1.2.2
+
+### Patch Changes
+
+- [`5d2eeac35f7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/5d2eeac35f7) - Fixes a browser specific bug that occurred in android chromium that led to the component losing focus unexpectedly when selected for editing.
+
 ## 1.2.1
 
 ### Patch Changes

package/dist/cjs/components/Status.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -23,7 +21,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
 
@@ -33,10 +33,6 @@ var _analytics = require("./analytics");
 
 var _constants = require("./constants");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
@@ -54,6 +50,20 @@ 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 = (0, _react2.css)({
+  '& > *': {
+    display: 'inline-block !important'
+  }
+}); // 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) {
   (0, _inherits2.default)(StatusInternal, _PureComponent);
@@ -109,7 +119,8 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
 
       var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
-      return /*#__PURE__*/_react.default.createElement("span", {
+      return (0, _react2.jsx)("span", {
+        css: isAndroidChromium ? inlineBlockStyles : undefined,
         className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,
@@ -118,7 +129,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         "data-color": color,
         "data-style": style,
         role: role
-      }, /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+      }, (0, _react2.jsx)(_lozenge.default, {
         appearance: appearance,
         maxWidth: MAX_WIDTH
       }, text));

package/dist/cjs/components/analytics.js

@@ -16,7 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var ELEMENTS_CHANNEL = 'fabric-elements';
 exports.ELEMENTS_CHANNEL = ELEMENTS_CHANNEL;
 var packageName = "@atlaskit/status";
-var packageVersion = "1.2.1";
+var packageVersion = "1.2.2";
 
 var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {

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

@@ -109,7 +109,6 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           value = _this$props2.value,
           setRef = _this$props2.setRef;
-      var borderStyle = "1px solid ".concat(borderColor);
       return (0, _react2.jsx)("span", {
         css: buttonWrapperStyles
       }, (0, _react2.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
@@ -129,7 +128,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
-            border: borderStyle
+            borderColor: borderColor
           },
           ref: setRef
         }, isSelected && (0, _react2.jsx)(_done.default, {

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.1"
+	"version": "1.2.2"
 }

package/dist/es2019/components/Status.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React from 'react';
+
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
@@ -19,6 +21,20 @@ const colorToLozengeAppearanceMap = {
 
 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 = css({
+  '& > *': {
+    display: 'inline-block !important'
+  }
+}); // 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) {
@@ -63,7 +79,8 @@ class StatusInternal extends PureComponent {
 
     const appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
-    return /*#__PURE__*/React.createElement("span", {
+    return jsx("span", {
+      css: isAndroidChromium ? inlineBlockStyles : undefined,
       className: "status-lozenge-span",
       onClick: onClick,
       onMouseEnter: this.handleMouseEnter,
@@ -72,7 +89,7 @@ class StatusInternal extends PureComponent {
       "data-color": color,
       "data-style": style,
       role: role
-    }, /*#__PURE__*/React.createElement(Lozenge, {
+    }, jsx(Lozenge, {
       appearance: appearance,
       maxWidth: MAX_WIDTH
     }, text));

package/dist/es2019/components/analytics.js

@@ -1,6 +1,6 @@
 export const ELEMENTS_CHANNEL = 'fabric-elements';
 const packageName = "@atlaskit/status";
-const packageVersion = "1.2.1";
+const packageVersion = "1.2.2";
 export const createStatusAnalyticsAndFire = createAnalyticsEvent => payload => {
   const statusPayload = { ...payload,
     eventType: 'ui'

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

@@ -79,7 +79,6 @@ export default class Color extends PureComponent {
       value,
       setRef
     } = this.props;
-    const borderStyle = `1px solid ${borderColor}`;
     return jsx("span", {
       css: buttonWrapperStyles
     }, jsx(FormattedMessage, messages[`${value}Color`], labels => jsx("button", {
@@ -98,7 +97,7 @@ export default class Color extends PureComponent {
       "aria-pressed": isSelected,
       style: {
         backgroundColor: backgroundColor || 'transparent',
-        border: borderStyle
+        borderColor
       },
       ref: setRef
     }, isSelected && jsx(EditorDoneIcon, {

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.1"
+	"version": "1.2.2"
 }

package/dist/esm/components/Status.js

@@ -10,8 +10,9 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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';
+/** @jsx jsx */
 import { PureComponent } from 'react';
+import { css, jsx } from '@emotion/react';
 import Lozenge from '@atlaskit/lozenge';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { createStatusAnalyticsAndFire } from './analytics';
@@ -30,6 +31,20 @@ 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'
+  }
+}); // 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);
@@ -89,7 +104,8 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
 
       var appearance = colorToLozengeAppearanceMap[color] || DEFAULT_APPEARANCE; // Note: ommitted data-local-id attribute to avoid copying/pasting the same localId
 
-      return /*#__PURE__*/React.createElement("span", {
+      return jsx("span", {
+        css: isAndroidChromium ? inlineBlockStyles : undefined,
         className: "status-lozenge-span",
         onClick: onClick,
         onMouseEnter: this.handleMouseEnter,
@@ -98,7 +114,7 @@ var StatusInternal = /*#__PURE__*/function (_PureComponent) {
         "data-color": color,
         "data-style": style,
         role: role
-      }, /*#__PURE__*/React.createElement(Lozenge, {
+      }, jsx(Lozenge, {
         appearance: appearance,
         maxWidth: MAX_WIDTH
       }, text));

package/dist/esm/components/analytics.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 export var ELEMENTS_CHANNEL = 'fabric-elements';
 var packageName = "@atlaskit/status";
-var packageVersion = "1.2.1";
+var packageVersion = "1.2.2";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

@@ -86,7 +86,6 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           borderColor = _this$props2.borderColor,
           value = _this$props2.value,
           setRef = _this$props2.setRef;
-      var borderStyle = "1px solid ".concat(borderColor);
       return jsx("span", {
         css: buttonWrapperStyles
       }, jsx(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
@@ -106,7 +105,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           "aria-pressed": isSelected,
           style: {
             backgroundColor: backgroundColor || 'transparent',
-            border: borderStyle
+            borderColor: borderColor
           },
           ref: setRef
         }, isSelected && jsx(EditorDoneIcon, {

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/status",
-	"version": "1.2.1"
+	"version": "1.2.2"
 }

package/dist/types/components/Status.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
 export declare type Color = 'neutral' | 'purple' | 'blue' | 'red' | 'yellow' | 'green';
 export declare type StatusStyle = 'bold' | 'subtle';
@@ -12,4 +12,4 @@ export interface OwnProps {
     role?: string;
 }
 export declare type Props = OwnProps & WithAnalyticsEventsProps;
-export declare const Status: React.ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & React.RefAttributes<any>>;
+export declare const Status: import("react").ForwardRefExoticComponent<Omit<Props, keyof WithAnalyticsEventsProps> & import("react").RefAttributes<any>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/status",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "Fabric Status React Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"