@atlaskit/color-picker 2.0.0 → 3.0.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/color-picker
 
+## 3.0.1
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 3.0.0
+
+### Major Changes
+
+- [`b1f4bf97543`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b1f4bf97543) - [ux] Fixes bug with tabbing
+
+## 2.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 2.0.0
 
 ### Major Changes

package/dist/cjs/components/ColorCard.js

@@ -73,10 +73,16 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
       var key = event.key;
       var _this$props2 = _this.props,
           onKeyDown = _this$props2.onKeyDown,
-          value = _this$props2.value;
+          value = _this$props2.value,
+          isTabbing = _this$props2.isTabbing;
 
-      if (onKeyDown && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
+      if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
         event.preventDefault();
+
+        if (isTabbing) {
+          event.stopPropagation();
+        }
+
         onKeyDown(value);
       }
     });
@@ -93,14 +99,16 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
           selected = _this$props3.selected,
           focused = _this$props3.focused,
           _this$props3$checkMar = _this$props3.checkMarkColor,
-          checkMarkColor = _this$props3$checkMar === void 0 ? _theme.colors.N0 : _this$props3$checkMar;
+          checkMarkColor = _this$props3$checkMar === void 0 ? _theme.colors.N0 : _this$props3$checkMar,
+          isTabbing = _this$props3.isTabbing;
       return /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardOption, {
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         focused: focused,
         "aria-label": "".concat(label).concat(selected ? ' selected' : ''),
         tabIndex: 0,
-        onKeyDown: this.onKeyDown
+        onKeyDown: this.onKeyDown,
+        isTabbing: isTabbing
       }, /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContent, {
         color: value || 'transparent'
       }, selected && /*#__PURE__*/_react.default.createElement(_ColorCard.ColorCardContentCheckMark, null, /*#__PURE__*/_react.default.createElement(_done.default, {

package/dist/cjs/components/ColorPicker.js

@@ -33,6 +33,8 @@ var _Trigger = _interopRequireDefault(require("./Trigger"));
 
 var components = _interopRequireWildcard(require("./components"));
 
+var _constants = require("../constants");
+
 var _analyticsNext = require("@atlaskit/analytics-next");
 
 var _ColorPicker = require("../styled/ColorPicker");
@@ -58,7 +60,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "2.0.0";
+var packageVersion = "3.0.1";
 
 var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
@@ -76,6 +78,9 @@ var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createAndFireEventOnAtlaskit", (0, _analyticsNext.createAndFireEvent)('atlaskit'));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      isTabbing: false
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "changeAnalyticsCaller", function () {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
@@ -93,9 +98,25 @@ var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
 
       return undefined;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChange", function (option) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onChangeSelect", function (option) {
       _this.props.onChange(option.value, _this.changeAnalyticsCaller());
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionKeyDown", function (value) {
+      _this.props.onChange(value, _this.changeAnalyticsCaller());
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (e) {
+      var key = e.key;
+
+      if (key === _constants.KEY_TAB) {
+        _this.setState({
+          isTabbing: true
+        });
+      } else if (key === _constants.KEY_ARROW_UP || key === _constants.KEY_ARROW_DOWN) {
+        _this.setState({
+          isTabbing: false
+        });
+      }
+    });
     return _this;
   }
 
@@ -135,12 +156,15 @@ var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
         "aria-label": fullLabel,
         value: value,
         components: components,
-        onChange: this.onChange // never show search input
+        onChange: this.onChangeSelect // never show search input
         ,
         searchThreshold: Number.MAX_VALUE // palette props
         ,
         cols: cols,
-        checkMarkColor: checkMarkColor
+        checkMarkColor: checkMarkColor,
+        onKeyDown: this.onKeyDown,
+        isTabbing: this.state.isTabbing,
+        onOptionKeyDown: this.onOptionKeyDown
       });
     }
   }]);

package/dist/cjs/components/components.js

@@ -41,7 +41,10 @@ var Option = function Option(props) {
   var _props$data = props.data,
       value = _props$data.value,
       label = _props$data.label,
-      checkMarkColor = props.selectProps.checkMarkColor,
+      _props$selectProps = props.selectProps,
+      checkMarkColor = _props$selectProps.checkMarkColor,
+      onOptionKeyDown = _props$selectProps.onOptionKeyDown,
+      isTabbing = _props$selectProps.isTabbing,
       isFocused = props.isFocused,
       isSelected = props.isSelected;
   return /*#__PURE__*/_react.default.createElement(_ColorPalette.ColorCardWrapper, props.innerProps, /*#__PURE__*/_react.default.createElement(_ColorCard.default, {
@@ -50,7 +53,11 @@ var Option = function Option(props) {
     checkMarkColor: checkMarkColor,
     isOption: true,
     focused: isFocused,
-    selected: isSelected
+    selected: isSelected,
+    onKeyDown: function onKeyDown(value) {
+      return onOptionKeyDown(value);
+    },
+    isTabbing: isTabbing
   }));
 };
 

package/dist/cjs/constants.js

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_SPACE = exports.KEY_ENTER = exports.COLOR_CARD_SIZE = void 0;
+exports.KEY_TAB = exports.KEY_SPACE = exports.KEY_ENTER = exports.KEY_ARROW_UP = exports.KEY_ARROW_DOWN = exports.COLOR_CARD_SIZE = void 0;
 var COLOR_CARD_SIZE = 30;
 exports.COLOR_CARD_SIZE = COLOR_CARD_SIZE;
 var KEY_SPACE = ' ';
 exports.KEY_SPACE = KEY_SPACE;
 var KEY_ENTER = 'Enter';
-exports.KEY_ENTER = KEY_ENTER;
+exports.KEY_ENTER = KEY_ENTER;
+var KEY_ARROW_UP = 'ArrowDown';
+exports.KEY_ARROW_UP = KEY_ARROW_UP;
+var KEY_ARROW_DOWN = 'ArrowUp';
+exports.KEY_ARROW_DOWN = KEY_ARROW_DOWN;
+var KEY_TAB = 'Tab';
+exports.KEY_TAB = KEY_TAB;

package/dist/cjs/styled/ColorCard.js

@@ -26,10 +26,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 var buttonFocusedBorder = "border-color: ".concat((0, _tokens.token)('color.border.focused', _theme.colors.B100), ";");
-var sharedColorContainerStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n  &:hover,\n  &:focus {\n    border-color: ", ";\n  }\n"])), _constants.COLOR_CARD_SIZE, _constants.COLOR_CARD_SIZE, (0, _theme.borderRadius)() * 2, (0, _tokens.token)('color.border.focused', _theme.colors.B75));
+var sharedColorContainerStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n"])), _constants.COLOR_CARD_SIZE, _constants.COLOR_CARD_SIZE, (0, _theme.borderRadius)() * 2);
 
-var ColorCardOption = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
-  if (props.focused) {
+var ColorCardOption = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
+  if (props.isTabbing === undefined || props.isTabbing) {
+    return "&:hover,\n      &:focus {\n        border-color: ".concat((0, _tokens.token)('color.border.focused', _theme.colors.B75), ";\n      }");
+  }
+}, function (props) {
+  if (props.focused && !props.isTabbing) {
     return "border-color: ".concat((0, _tokens.token)('color.border.focused', _theme.colors.B75));
   }
 });

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "2.0.0"
+	"version": "3.0.1"
 }

package/dist/es2019/components/ColorCard.js

@@ -33,11 +33,17 @@ export default class ColorCard extends PureComponent {
       } = event;
       const {
         onKeyDown,
-        value
+        value,
+        isTabbing
       } = this.props;
 
-      if (onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
+      if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
         event.preventDefault();
+
+        if (isTabbing) {
+          event.stopPropagation();
+        }
+
         onKeyDown(value);
       }
     });
@@ -52,7 +58,8 @@ export default class ColorCard extends PureComponent {
       selected,
       focused,
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-      checkMarkColor = colors.N0
+      checkMarkColor = colors.N0,
+      isTabbing
     } = this.props;
     return /*#__PURE__*/React.createElement(ColorCardOption, {
       onClick: this.onClick,
@@ -60,7 +67,8 @@ export default class ColorCard extends PureComponent {
       focused: focused,
       "aria-label": `${label}${selected ? ' selected' : ''}`,
       tabIndex: 0,
-      onKeyDown: this.onKeyDown
+      onKeyDown: this.onKeyDown,
+      isTabbing: isTabbing
     }, /*#__PURE__*/React.createElement(ColorCardContent, {
       color: value || 'transparent'
     }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {

package/dist/es2019/components/ColorPicker.js

@@ -4,6 +4,7 @@ import React from 'react';
 import { PopupSelect } from '@atlaskit/select';
 import Trigger from './Trigger';
 import * as components from './components';
+import { KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_TAB } from '../constants';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import { ColorCardWrapper } from '../styled/ColorPicker';
 import { getOptions } from '../utils';
@@ -18,13 +19,17 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "2.0.0";
+const packageVersion = "3.0.1";
 export class ColorPickerWithoutAnalytics extends React.Component {
   constructor(...args) {
     super(...args);
 
     _defineProperty(this, "createAndFireEventOnAtlaskit", createAndFireEvent('atlaskit'));
 
+    _defineProperty(this, "state", {
+      isTabbing: false
+    });
+
     _defineProperty(this, "changeAnalyticsCaller", () => {
       const {
         createAnalyticsEvent
@@ -45,9 +50,27 @@ export class ColorPickerWithoutAnalytics extends React.Component {
       return undefined;
     });
 
-    _defineProperty(this, "onChange", option => {
+    _defineProperty(this, "onChangeSelect", option => {
       this.props.onChange(option.value, this.changeAnalyticsCaller());
     });
+
+    _defineProperty(this, "onOptionKeyDown", value => {
+      this.props.onChange(value, this.changeAnalyticsCaller());
+    });
+
+    _defineProperty(this, "onKeyDown", e => {
+      const key = e.key;
+
+      if (key === KEY_TAB) {
+        this.setState({
+          isTabbing: true
+        });
+      } else if (key === KEY_ARROW_UP || key === KEY_ARROW_DOWN) {
+        this.setState({
+          isTabbing: false
+        });
+      }
+    });
   }
 
   render() {
@@ -81,12 +104,15 @@ export class ColorPickerWithoutAnalytics extends React.Component {
       "aria-label": fullLabel,
       value: value,
       components: components,
-      onChange: this.onChange // never show search input
+      onChange: this.onChangeSelect // never show search input
       ,
       searchThreshold: Number.MAX_VALUE // palette props
       ,
       cols: cols,
-      checkMarkColor: checkMarkColor
+      checkMarkColor: checkMarkColor,
+      onKeyDown: this.onKeyDown,
+      isTabbing: this.state.isTabbing,
+      onOptionKeyDown: this.onOptionKeyDown
     });
   }
 

package/dist/es2019/components/components.js

@@ -27,7 +27,9 @@ export const Option = props => {
       label
     },
     selectProps: {
-      checkMarkColor
+      checkMarkColor,
+      onOptionKeyDown,
+      isTabbing
     },
     isFocused,
     isSelected
@@ -38,7 +40,9 @@ export const Option = props => {
     checkMarkColor: checkMarkColor,
     isOption: true,
     focused: isFocused,
-    selected: isSelected
+    selected: isSelected,
+    onKeyDown: value => onOptionKeyDown(value),
+    isTabbing: isTabbing
   }));
 };
 export const DropdownIndicator = () => null;

package/dist/es2019/constants.js

@@ -1,3 +1,6 @@
 export const COLOR_CARD_SIZE = 30;
 export const KEY_SPACE = ' ';
-export const KEY_ENTER = 'Enter';
+export const KEY_ENTER = 'Enter';
+export const KEY_ARROW_UP = 'ArrowDown';
+export const KEY_ARROW_DOWN = 'ArrowUp';
+export const KEY_TAB = 'Tab';

package/dist/es2019/styled/ColorCard.js

@@ -19,16 +19,21 @@ const sharedColorContainerStyles = css`
   padding: 0;
   cursor: pointer;
   outline: none;
-  &:hover,
-  &:focus {
-    border-color: ${token('color.border.focused', colors.B75)};
-  }
 `;
 export const ColorCardOption = styled.div`
   ${sharedColorContainerStyles};
 
   ${props => {
-  if (props.focused) {
+  if (props.isTabbing === undefined || props.isTabbing) {
+    return `&:hover,
+      &:focus {
+        border-color: ${token('color.border.focused', colors.B75)};
+      }`;
+  }
+}}
+
+  ${props => {
+  if (props.focused && !props.isTabbing) {
     return `border-color: ${token('color.border.focused', colors.B75)}`;
   }
 }};

package/dist/es2019/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "2.0.0"
+	"version": "3.0.1"
 }

package/dist/esm/components/ColorCard.js

@@ -54,10 +54,16 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
       var key = event.key;
       var _this$props2 = _this.props,
           onKeyDown = _this$props2.onKeyDown,
-          value = _this$props2.value;
+          value = _this$props2.value,
+          isTabbing = _this$props2.isTabbing;
 
-      if (onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
+      if ((isTabbing === undefined || isTabbing) && onKeyDown && (key === KEY_ENTER || key === KEY_SPACE)) {
         event.preventDefault();
+
+        if (isTabbing) {
+          event.stopPropagation();
+        }
+
         onKeyDown(value);
       }
     });
@@ -76,14 +82,16 @@ var ColorCard = /*#__PURE__*/function (_PureComponent) {
           selected = _this$props3.selected,
           focused = _this$props3.focused,
           _this$props3$checkMar = _this$props3.checkMarkColor,
-          checkMarkColor = _this$props3$checkMar === void 0 ? colors.N0 : _this$props3$checkMar;
+          checkMarkColor = _this$props3$checkMar === void 0 ? colors.N0 : _this$props3$checkMar,
+          isTabbing = _this$props3.isTabbing;
       return /*#__PURE__*/React.createElement(ColorCardOption, {
         onClick: this.onClick,
         onMouseDown: this.onMouseDown,
         focused: focused,
         "aria-label": "".concat(label).concat(selected ? ' selected' : ''),
         tabIndex: 0,
-        onKeyDown: this.onKeyDown
+        onKeyDown: this.onKeyDown,
+        isTabbing: isTabbing
       }, /*#__PURE__*/React.createElement(ColorCardContent, {
         color: value || 'transparent'
       }, selected && /*#__PURE__*/React.createElement(ColorCardContentCheckMark, null, /*#__PURE__*/React.createElement(EditorDoneIcon, {

package/dist/esm/components/ColorPicker.js

@@ -15,6 +15,7 @@ import React from 'react';
 import { PopupSelect } from '@atlaskit/select';
 import Trigger from './Trigger';
 import * as components from './components';
+import { KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_TAB } from '../constants';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import { ColorCardWrapper } from '../styled/ColorPicker';
 import { getOptions } from '../utils';
@@ -29,7 +30,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "2.0.0";
+var packageVersion = "3.0.1";
 export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalytics, _React$Component);
 
@@ -48,6 +49,10 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
 
     _defineProperty(_assertThisInitialized(_this), "createAndFireEventOnAtlaskit", createAndFireEvent('atlaskit'));
 
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isTabbing: false
+    });
+
     _defineProperty(_assertThisInitialized(_this), "changeAnalyticsCaller", function () {
       var createAnalyticsEvent = _this.props.createAnalyticsEvent;
 
@@ -66,10 +71,28 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
       return undefined;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "onChange", function (option) {
+    _defineProperty(_assertThisInitialized(_this), "onChangeSelect", function (option) {
       _this.props.onChange(option.value, _this.changeAnalyticsCaller());
     });
 
+    _defineProperty(_assertThisInitialized(_this), "onOptionKeyDown", function (value) {
+      _this.props.onChange(value, _this.changeAnalyticsCaller());
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) {
+      var key = e.key;
+
+      if (key === KEY_TAB) {
+        _this.setState({
+          isTabbing: true
+        });
+      } else if (key === KEY_ARROW_UP || key === KEY_ARROW_DOWN) {
+        _this.setState({
+          isTabbing: false
+        });
+      }
+    });
+
     return _this;
   }
 
@@ -109,12 +132,15 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
         "aria-label": fullLabel,
         value: value,
         components: components,
-        onChange: this.onChange // never show search input
+        onChange: this.onChangeSelect // never show search input
         ,
         searchThreshold: Number.MAX_VALUE // palette props
         ,
         cols: cols,
-        checkMarkColor: checkMarkColor
+        checkMarkColor: checkMarkColor,
+        onKeyDown: this.onKeyDown,
+        isTabbing: this.state.isTabbing,
+        onOptionKeyDown: this.onOptionKeyDown
       });
     }
   }]);

package/dist/esm/components/components.js

@@ -23,7 +23,10 @@ export var Option = function Option(props) {
   var _props$data = props.data,
       value = _props$data.value,
       label = _props$data.label,
-      checkMarkColor = props.selectProps.checkMarkColor,
+      _props$selectProps = props.selectProps,
+      checkMarkColor = _props$selectProps.checkMarkColor,
+      onOptionKeyDown = _props$selectProps.onOptionKeyDown,
+      isTabbing = _props$selectProps.isTabbing,
       isFocused = props.isFocused,
       isSelected = props.isSelected;
   return /*#__PURE__*/React.createElement(ColorCardWrapper, props.innerProps, /*#__PURE__*/React.createElement(ColorCard, {
@@ -32,7 +35,11 @@ export var Option = function Option(props) {
     checkMarkColor: checkMarkColor,
     isOption: true,
     focused: isFocused,
-    selected: isSelected
+    selected: isSelected,
+    onKeyDown: function onKeyDown(value) {
+      return onOptionKeyDown(value);
+    },
+    isTabbing: isTabbing
   }));
 };
 export var DropdownIndicator = function DropdownIndicator() {

package/dist/esm/constants.js

@@ -1,3 +1,6 @@
 export var COLOR_CARD_SIZE = 30;
 export var KEY_SPACE = ' ';
-export var KEY_ENTER = 'Enter';
+export var KEY_ENTER = 'Enter';
+export var KEY_ARROW_UP = 'ArrowDown';
+export var KEY_ARROW_DOWN = 'ArrowUp';
+export var KEY_TAB = 'Tab';

package/dist/esm/styled/ColorCard.js

@@ -9,9 +9,13 @@ import { borderRadius, colors } from '@atlaskit/theme';
 import { COLOR_CARD_SIZE } from '../constants';
 import { token } from '@atlaskit/tokens';
 var buttonFocusedBorder = "border-color: ".concat(token('color.border.focused', colors.B100), ";");
-var sharedColorContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n  &:hover,\n  &:focus {\n    border-color: ", ";\n  }\n"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2, token('color.border.focused', colors.B75));
-export var ColorCardOption = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
-  if (props.focused) {
+var sharedColorContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-block;\n  position: relative;\n  width: ", "px;\n  height: ", "px;\n  border: 2px solid transparent;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  transition: border-color 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38);\n  background-color: transparent;\n  border-color: transparent;\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n"])), COLOR_CARD_SIZE, COLOR_CARD_SIZE, borderRadius() * 2);
+export var ColorCardOption = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n\n  ", "\n\n  ", ";\n"])), sharedColorContainerStyles, function (props) {
+  if (props.isTabbing === undefined || props.isTabbing) {
+    return "&:hover,\n      &:focus {\n        border-color: ".concat(token('color.border.focused', colors.B75), ";\n      }");
+  }
+}, function (props) {
+  if (props.focused && !props.isTabbing) {
     return "border-color: ".concat(token('color.border.focused', colors.B75));
   }
 });

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "2.0.0"
+	"version": "3.0.1"
 }

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

@@ -9,6 +9,7 @@ export interface Props {
     selected?: boolean;
     focused?: boolean;
     isOption?: boolean;
+    isTabbing?: boolean;
 }
 export default class ColorCard extends PureComponent<Props> {
     onMouseDown: (event: React.MouseEvent<HTMLDivElement>) => void;

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

@@ -21,8 +21,13 @@ export interface Props {
 }
 export declare class ColorPickerWithoutAnalytics extends React.Component<Props> {
     createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
+    state: {
+        isTabbing: boolean;
+    };
     changeAnalyticsCaller: () => import("@atlaskit/analytics-next").UIAnalyticsEvent | undefined;
-    onChange: (option: ValueType<Color>) => void;
+    onChangeSelect: (option: ValueType<Color>) => void;
+    onOptionKeyDown: (value: string) => void;
+    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
     render(): JSX.Element;
 }
 declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "analyticsContext"> & React.RefAttributes<any>>;

package/dist/types/constants.d.ts

@@ -1,3 +1,6 @@
 export declare const COLOR_CARD_SIZE = 30;
 export declare const KEY_SPACE = " ";
 export declare const KEY_ENTER = "Enter";
+export declare const KEY_ARROW_UP = "ArrowDown";
+export declare const KEY_ARROW_DOWN = "ArrowUp";
+export declare const KEY_TAB = "Tab";

package/dist/types/styled/ColorCard.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 declare type ColorCardProps = {
     focused?: boolean;
+    isTabbing?: boolean;
 };
 export declare const ColorCardOption: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardProps, any, import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & ColorCardProps>;
 export declare const ColorCardButton: import("styled-components").StyledComponentClass<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & ColorCardProps, any, import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & ColorCardProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "2.0.0",
+  "version": "3.0.1",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,9 +23,9 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/select": "^15.6.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "memoize-one": "^6.0.0",
     "styled-components": "^3.2.6"
@@ -42,7 +42,7 @@
     "enzyme-adapter-react-16": "^1.15.1",
     "jscodeshift": "^0.13.0",
     "react": "^16.8.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "keywords": [
     "ui",

package/report.api.md

@@ -0,0 +1,158 @@
+## API Report File for "@atlaskit/color-picker".
+
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+```ts
+import { AnalyticsEventPayload } from '@atlaskit/analytics-next';
+import { CreateUIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { PopupSelectProps } from '@atlaskit/select';
+import { default as React_2 } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { ValueType } from '@atlaskit/select';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+
+declare interface Color {
+  label: string;
+  value: string;
+}
+
+export declare const ColorPaletteMenu: React_2.ForwardRefExoticComponent<
+  Pick<
+    Pick<
+      Omit<ColorPaletteMenuProps, keyof WithAnalyticsEventsProps>,
+      'label' | 'onChange' | 'checkMarkColor' | 'palette' | 'selectedColor'
+    > &
+      Partial<
+        Pick<
+          Omit<ColorPaletteMenuProps, keyof WithAnalyticsEventsProps>,
+          'cols' | 'mode'
+        >
+      > &
+      Partial<
+        Pick<
+          {
+            cols: number;
+            mode: Mode;
+          },
+          never
+        >
+      > &
+      React_2.RefAttributes<any> &
+      WithContextProps,
+    | 'label'
+    | 'key'
+    | 'onChange'
+    | 'checkMarkColor'
+    | 'cols'
+    | 'mode'
+    | 'palette'
+    | 'selectedColor'
+    | 'analyticsContext'
+  > &
+    React_2.RefAttributes<any>
+>;
+
+export declare interface ColorPaletteMenuProps {
+  /** color picker button label */
+  label?: string;
+  /** list of available colors */
+  palette: Palette;
+  /** selected color */
+  selectedColor?: string;
+  /** maximum column length */
+  cols: number;
+  /** color of checkmark on selected color */
+  checkMarkColor?: string;
+  /** onChange handler */
+  onChange: (value: string, analyticsEvent?: object) => void;
+  /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
+  createAnalyticsEvent?: any;
+  /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
+  mode?: Mode;
+}
+
+export declare class ColorPaletteMenuWithoutAnalytics extends React_2.Component<
+  ColorPaletteMenuProps
+> {
+  static defaultProps: {
+    cols: number;
+    mode: Mode;
+  };
+  createAndFireEventOnAtlaskit: (
+    payload: AnalyticsEventPayload,
+  ) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => UIAnalyticsEvent;
+  changeAnalyticsCaller: () => UIAnalyticsEvent | undefined;
+  onChange: (value: string) => void;
+  render(): JSX.Element;
+}
+
+export declare interface ColorPickerProps {
+  /** color picker button label */
+  label?: string;
+  /** list of available colors */
+  palette: Palette;
+  /** selected color */
+  selectedColor?: string;
+  /** maximum column length */
+  cols?: number;
+  /** color of checkmark on selected color */
+  checkMarkColor?: string;
+  /** props for react-popper */
+  popperProps?: PopupSelectProps['popperProps'];
+  /** onChange handler */
+  onChange: (value: string, analyticsEvent?: object) => void;
+  /** You should not be accessing this prop under any circumstances. It is provided by @atlaskit/analytics-next. */
+  createAnalyticsEvent?: any;
+}
+
+export declare class ColorPickerWithoutAnalytics extends React_2.Component<
+  ColorPickerProps
+> {
+  createAndFireEventOnAtlaskit: (
+    payload: AnalyticsEventPayload,
+  ) => (createAnalyticsEvent: CreateUIAnalyticsEvent) => UIAnalyticsEvent;
+  state: {
+    isTabbing: boolean;
+  };
+  changeAnalyticsCaller: () => UIAnalyticsEvent | undefined;
+  onChangeSelect: (option: ValueType<Color>) => void;
+  onOptionKeyDown: (value: string) => void;
+  onKeyDown: (e: React_2.KeyboardEvent<HTMLElement>) => void;
+  render(): JSX.Element;
+}
+
+export declare const Compact: Mode;
+
+declare const _default: React_2.ForwardRefExoticComponent<
+  Pick<
+    Omit<ColorPickerProps, keyof WithAnalyticsEventsProps> &
+      React_2.RefAttributes<any> &
+      WithContextProps,
+    | 'label'
+    | 'key'
+    | 'onChange'
+    | 'checkMarkColor'
+    | 'cols'
+    | 'popperProps'
+    | 'palette'
+    | 'selectedColor'
+    | 'analyticsContext'
+  > &
+    React_2.RefAttributes<any>
+>;
+export default _default;
+
+declare enum Mode {
+  Compact = 0,
+  Standard = 1,
+}
+
+declare type Palette = Color[];
+
+export declare const Standard: Mode;
+
+export {};
+```

package/tsconfig.json

@@ -1,7 +1,6 @@
 {
     "extends": "../../../tsconfig.json",
     "compilerOptions": {
-      "noImplicitAny": true,
       "baseUrl": "./"
     },
     "include": [