@atlaskit/status 3.1.11 → 3.1.12

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/status
 
+## 3.1.12
+
+### Patch Changes
+
+- [`c28209fcfdfd2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c28209fcfdfd2) -
+  [ENGHEALTH-46817] Resolving eslint suppressions for accessibility violations
+- Updated dependencies
+
 ## 3.1.11
 
 ### Patch Changes

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 = "0.0.0-development";
+var packageVersion = "3.1.11";
 var createStatusAnalyticsAndFire = exports.createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

@@ -13,6 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _color = _interopRequireDefault(require("./color"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
 var paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
@@ -38,6 +39,34 @@ var _default = exports.default = function _default(_ref) {
   (0, _react.useEffect)(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
   }, [palette.length]);
+  var createKeyDownHandler = (0, _react.useCallback)(function (index) {
+    return function (e) {
+      var _colorRefs$current$ne;
+      var newColorIndex = null;
+      var nextColor = function nextColor() {
+        return index + 1 > palette.length - 1 ? 0 : index + 1;
+      };
+      var previousColor = function previousColor() {
+        return index - 1 < 0 ? palette.length - 1 : index - 1;
+      };
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          e.preventDefault();
+          newColorIndex = nextColor();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          e.preventDefault();
+          newColorIndex = previousColor();
+          break;
+      }
+      if (newColorIndex === null) {
+        return;
+      }
+      (_colorRefs$current$ne = colorRefs.current[newColorIndex]) === null || _colorRefs$current$ne === void 0 || _colorRefs$current$ne.focus();
+    };
+  }, [colorRefs, palette.length]);
   var memoizedHandleKeyDown = (0, _react.useCallback)(function (e) {
     var newColorIndex = null;
     var nextColor = function nextColor() {
@@ -74,7 +103,7 @@ var _default = exports.default = function _default(_ref) {
     style: {
       maxWidth: cols * 32
     },
-    onKeyDown: memoizedHandleKeyDown
+    onKeyDown: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : memoizedHandleKeyDown
   }, palette.map(function (_ref2, i) {
     var _ref3 = (0, _slicedToArray2.default)(_ref2, 4),
       colorValue = _ref3[0],
@@ -93,7 +122,8 @@ var _default = exports.default = function _default(_ref) {
       tabIndex: i === 0 ? 0 : -1,
       setRef: function setRef(el) {
         return colorRefs.current[i] = el;
-      }
+      },
+      onKeyDown: (0, _expValEquals.expValEquals)('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? createKeyDownHandler(i) : undefined
     });
   }));
 };

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

@@ -73,7 +73,8 @@ var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
         borderColor = _this$props2.borderColor,
         iconColor = _this$props2.iconColor,
         value = _this$props2.value,
-        setRef = _this$props2.setRef;
+        setRef = _this$props2.setRef,
+        onKeyDown = _this$props2.onKeyDown;
       return /*#__PURE__*/React.createElement("li", {
         className: (0, _runtime.ax)(["_2rko12x7 _189ee4h9 _1dqonqa1 _1h6d1j28 _19pkze3t _2hwxv77o _otyrze3t _18u0v77o _1e0c1txw _4cvr1h6o _ca0qe4h9 _u5f3e4h9 _n3tde4h9 _19bve4h9 _bfw7ia51"])
       }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, _i18n.messages["".concat(value, "Color")], function (labels) {
@@ -83,6 +84,7 @@ var Color = exports.default = /*#__PURE__*/function (_PureComponent) {
           onMouseEnter: _this2.onMouseEnter,
           onMouseLeave: _this2.onMouseLeave,
           onMouseDown: _this2.onMouseDown,
+          onKeyDown: onKeyDown,
           tabIndex: tabIndex,
           title: labels[0]
           // button element does not support aria-selected.

package/dist/es2019/components/analytics.js

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

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

@@ -4,6 +4,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useCallback, useState } from 'react';
 import Color from './color';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 const paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
 const paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
 const getPalette = () => fg('platform-component-visual-refresh') ? paletteRefreshed : paletteLegacy;
@@ -23,6 +24,28 @@ export default (({
   useEffect(() => {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
   }, [palette.length]);
+  const createKeyDownHandler = useCallback(index => e => {
+    var _colorRefs$current$ne;
+    let newColorIndex = null;
+    const nextColor = () => index + 1 > palette.length - 1 ? 0 : index + 1;
+    const previousColor = () => index - 1 < 0 ? palette.length - 1 : index - 1;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowDown':
+        e.preventDefault();
+        newColorIndex = nextColor();
+        break;
+      case 'ArrowLeft':
+      case 'ArrowUp':
+        e.preventDefault();
+        newColorIndex = previousColor();
+        break;
+    }
+    if (newColorIndex === null) {
+      return;
+    }
+    (_colorRefs$current$ne = colorRefs.current[newColorIndex]) === null || _colorRefs$current$ne === void 0 ? void 0 : _colorRefs$current$ne.focus();
+  }, [colorRefs, palette.length]);
   const memoizedHandleKeyDown = useCallback(e => {
     let newColorIndex = null;
     const nextColor = () => currentFocusedColor + 1 > palette.length - 1 ? 0 : currentFocusedColor + 1;
@@ -55,19 +78,18 @@ export default (({
     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
-    });
-  }));
+    onKeyDown: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : memoizedHandleKeyDown
+  }, palette.map(([colorValue, backgroundColor, borderColor, iconColor], i) => /*#__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,
+    onKeyDown: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? createKeyDownHandler(i) : undefined
+  })));
 });

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

@@ -50,7 +50,8 @@ export default class Color extends PureComponent {
       borderColor,
       iconColor,
       value,
-      setRef
+      setRef,
+      onKeyDown
     } = this.props;
     return /*#__PURE__*/React.createElement("li", {
       className: ax(["_2rko12x7 _189ee4h9 _1dqonqa1 _1h6d1j28 _19pkze3t _2hwxv77o _otyrze3t _18u0v77o _1e0c1txw _4cvr1h6o _ca0qe4h9 _u5f3e4h9 _n3tde4h9 _19bve4h9 _bfw7ia51"])
@@ -60,6 +61,7 @@ export default class Color extends PureComponent {
       onMouseEnter: this.onMouseEnter,
       onMouseLeave: this.onMouseLeave,
       onMouseDown: this.onMouseDown,
+      onKeyDown: onKeyDown,
       tabIndex: tabIndex,
       title: labels[0]
       // button element does not support aria-selected.

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 = "0.0.0-development";
+var packageVersion = "3.1.11";
 export var createStatusAnalyticsAndFire = function createStatusAnalyticsAndFire(createAnalyticsEvent) {
   return function (payload) {
     var statusPayload = _objectSpread(_objectSpread({}, payload), {}, {

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

@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useEffect, useRef, useCallback, useState } from 'react';
 import Color from './color';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 var paletteLegacy = [['neutral', "var(--ds-background-neutral, #0515240F)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery, #F8EEFE)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon-discovery, #AF59E1)"], ['blue', "var(--ds-background-information, #E9F2FE)", "var(--ds-border-information, #357DE8)", "var(--ds-icon-information, #357DE8)"], ['red', "var(--ds-background-danger, #FFECEB)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon-danger, #C9372C)"], ['yellow', "var(--ds-background-warning, #FFF5DB)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon-warning, #E06C00)"], ['green', "var(--ds-background-success, #EFFFD6)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon-success, #6A9A23)"]];
 var paletteRefreshed = [['neutral', "var(--ds-background-accent-gray-subtler, #DDDEE1)", "var(--ds-border-bold, #7D818A)", "var(--ds-icon, #292A2E)"], ['blue', "var(--ds-background-information-pressed, #ADCBFB)", "var(--ds-border-information, #357DE8)", "var(--ds-icon, #292A2E)"], ['green', "var(--ds-background-success-pressed, #BDE97C)", "var(--ds-border-success, #6A9A23)", "var(--ds-icon, #292A2E)"], ['yellow', "var(--ds-background-warning-pressed, #FBD779)", "var(--ds-border-warning, #E06C00)", "var(--ds-icon, #292A2E)"], ['red', "var(--ds-background-danger-pressed, #FFB8B2)", "var(--ds-border-danger, #E2483D)", "var(--ds-icon, #292A2E)"], ['purple', "var(--ds-background-discovery-pressed, #E3BDFA)", "var(--ds-border-discovery, #AF59E1)", "var(--ds-icon, #292A2E)"]];
 var getPalette = function getPalette() {
@@ -29,6 +30,34 @@ export default (function (_ref) {
   useEffect(function () {
     colorRefs.current = colorRefs.current.slice(0, palette.length);
   }, [palette.length]);
+  var createKeyDownHandler = useCallback(function (index) {
+    return function (e) {
+      var _colorRefs$current$ne;
+      var newColorIndex = null;
+      var nextColor = function nextColor() {
+        return index + 1 > palette.length - 1 ? 0 : index + 1;
+      };
+      var previousColor = function previousColor() {
+        return index - 1 < 0 ? palette.length - 1 : index - 1;
+      };
+      switch (e.key) {
+        case 'ArrowRight':
+        case 'ArrowDown':
+          e.preventDefault();
+          newColorIndex = nextColor();
+          break;
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          e.preventDefault();
+          newColorIndex = previousColor();
+          break;
+      }
+      if (newColorIndex === null) {
+        return;
+      }
+      (_colorRefs$current$ne = colorRefs.current[newColorIndex]) === null || _colorRefs$current$ne === void 0 || _colorRefs$current$ne.focus();
+    };
+  }, [colorRefs, palette.length]);
   var memoizedHandleKeyDown = useCallback(function (e) {
     var newColorIndex = null;
     var nextColor = function nextColor() {
@@ -65,7 +94,7 @@ export default (function (_ref) {
     style: {
       maxWidth: cols * 32
     },
-    onKeyDown: memoizedHandleKeyDown
+    onKeyDown: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? undefined : memoizedHandleKeyDown
   }, palette.map(function (_ref2, i) {
     var _ref3 = _slicedToArray(_ref2, 4),
       colorValue = _ref3[0],
@@ -84,7 +113,8 @@ export default (function (_ref) {
       tabIndex: i === 0 ? 0 : -1,
       setRef: function setRef(el) {
         return colorRefs.current[i] = el;
-      }
+      },
+      onKeyDown: expValEquals('platform_editor_eslint_suppression_fix', 'isEnabled', true) ? createKeyDownHandler(i) : undefined
     });
   }));
 });

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

@@ -64,7 +64,8 @@ var Color = /*#__PURE__*/function (_PureComponent) {
         borderColor = _this$props2.borderColor,
         iconColor = _this$props2.iconColor,
         value = _this$props2.value,
-        setRef = _this$props2.setRef;
+        setRef = _this$props2.setRef,
+        onKeyDown = _this$props2.onKeyDown;
       return /*#__PURE__*/React.createElement("li", {
         className: ax(["_2rko12x7 _189ee4h9 _1dqonqa1 _1h6d1j28 _19pkze3t _2hwxv77o _otyrze3t _18u0v77o _1e0c1txw _4cvr1h6o _ca0qe4h9 _u5f3e4h9 _n3tde4h9 _19bve4h9 _bfw7ia51"])
       }, /*#__PURE__*/React.createElement(FormattedMessage, messages["".concat(value, "Color")], function (labels) {
@@ -74,6 +75,7 @@ var Color = /*#__PURE__*/function (_PureComponent) {
           onMouseEnter: _this2.onMouseEnter,
           onMouseLeave: _this2.onMouseLeave,
           onMouseDown: _this2.onMouseDown,
+          onKeyDown: onKeyDown,
           tabIndex: tabIndex,
           title: labels[0]
           // button element does not support aria-selected.

package/dist/types/components/internal/color.d.ts

@@ -7,6 +7,7 @@ export interface ColorProps {
     isSelected?: boolean;
     onClick: (value: ColorType) => void;
     onHover?: (value: ColorType) => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
     setRef?: (value: HTMLButtonElement) => HTMLButtonElement;
     tabIndex?: number;
     value: ColorType;

package/dist/types-ts4.5/components/internal/color.d.ts

@@ -7,6 +7,7 @@ export interface ColorProps {
     isSelected?: boolean;
     onClick: (value: ColorType) => void;
     onHover?: (value: ColorType) => void;
+    onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
     setRef?: (value: HTMLButtonElement) => HTMLButtonElement;
     tabIndex?: number;
     value: ColorType;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/status",
-	"version": "3.1.11",
+	"version": "3.1.12",
 	"description": "Fabric Status React Components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
 		"@atlaskit/textfield": "^8.2.0",
-		"@atlaskit/tmp-editor-statsig": "^33.0.0",
+		"@atlaskit/tmp-editor-statsig": "^33.1.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0"