@atlaskit/color-picker 3.2.26 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/color-picker
 
+## 3.3.0
+
+### Minor Changes
+
+- [#134622](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/134622)
+  [`66b5d35764e86`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/66b5d35764e86) -
+  Added feature flag for hiding trigger focus styles on expand
+  (https://product-fabric.atlassian.net/browse/DSP-20821)
+
+### Patch Changes
+
+- Updated dependencies
+
+## 3.2.27
+
+### Patch Changes
+
+- [#137781](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137781)
+  [`2780cda402d6b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2780cda402d6b) -
+  [ux] Improve focus for color picker
+- Updated dependencies
+
 ## 3.2.26
 
 ### Patch Changes

package/afm-jira/tsconfig.json

@@ -23,6 +23,9 @@
     {
       "path": "../../../design-system/icon/afm-jira/tsconfig.json"
     },
+    {
+      "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+    },
     {
       "path": "../../../design-system/select/afm-jira/tsconfig.json"
     },

package/dist/cjs/components/ColorCard.js

@@ -16,7 +16,7 @@ var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _useCallbackRef = require("use-callback-ref");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -25,7 +25,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRef) {
-  var initialFocusRef = props.initialFocusRef,
+  var type = props.type,
+    initialFocusRef = props.initialFocusRef,
     value = props.value,
     label = props.label,
     selected = props.selected,
@@ -37,6 +38,8 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     onKeyDown = props.onKeyDown;
   var ref = (0, _react.useRef)(null);
   var isInitialFocus = (0, _react.useRef)(true);
+  var isColorPaletteMenu = type === _constants.COLOR_PALETTE_MENU;
+  var isTabbingIgnored = (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? isColorPaletteMenu : false;
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -46,36 +49,30 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
       onClick(value);
     }
   }, [onClick, value]);
-  var handleKeyDownOld = (0, _react.useCallback)(function (event) {
-    var key = event.key;
-    if ((isTabbing === undefined || isTabbing) && onClick && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
+  var handleKeyDown = (0, _react.useCallback)(function (event) {
+    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && onClick && (event.key === _constants.KEY_ENTER || event.key === _constants.KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
       onClick(value);
     }
-  }, [isTabbing, onClick, value]);
-  var handleKeyDown = (0, _react.useCallback)(function (event) {
-    var key = event.key;
-    if ((isTabbing === undefined || isTabbing) && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
-      event.preventDefault();
-      if (isTabbing) {
+    if ((0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
+      if (isColorPaletteMenu) {
+        onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+      } else if (event.key === _constants.KEY_TAB) {
         event.stopPropagation();
+        event.preventDefault();
       }
-      onClick === null || onClick === void 0 || onClick(value);
     }
-    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  }, [isTabbing, onClick, onKeyDown, value]);
-
-  // TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
+  }, [isTabbing, isTabbingIgnored, isColorPaletteMenu, onClick, onKeyDown, value]);
   (0, _react.useEffect)(function () {
     if (!(0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
       var refCurrent = ref.current;
-      var handleTabKey = function handleTabKey(e) {
-        if (e.key === 'Tab') {
-          e.stopPropagation();
-          e.preventDefault();
+      var handleTabKey = function handleTabKey(event) {
+        if (event.key === _constants.KEY_TAB) {
+          event.stopPropagation();
+          event.preventDefault();
         }
       };
       refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleTabKey);
@@ -87,7 +84,7 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
   (0, _react.useImperativeHandle)(componentRef, function () {
     return {
       focus: function focus() {
-        if ((0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
+        if (isTabbingIgnored) {
           if (isInitialFocus.current) {
             var _ref$current;
             !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
@@ -99,7 +96,7 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
         }
       }
     };
-  }, [initialFocusRef]);
+  }, [isTabbingIgnored, initialFocusRef]);
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, function (tooltipProps) {
@@ -110,10 +107,10 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
       tabIndex: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
       "aria-checked": selected,
       "aria-label": label,
-      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      css: [sharedColorContainerStyles, (isTabbingIgnored || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isTabbingIgnored || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,
-      onKeyDown: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld
+      onKeyDown: handleKeyDown
     }), (0, _react2.jsx)("div", {
       css: colorCardWrapperStyles
     }, (0, _react2.jsx)("div", {

package/dist/cjs/components/ColorPaletteMenu.js

@@ -14,6 +14,7 @@ var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../utils");
 var _react2 = require("@emotion/react");
+var _constants = require("../constants");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * @jsxRuntime classic
@@ -23,7 +24,9 @@ var _colors = require("@atlaskit/theme/colors");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
-  var createAnalyticsEvent = _ref.createAnalyticsEvent,
+  var _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
+    isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
     palette = _ref.palette,
     selectedColor = _ref.selectedColor,
@@ -35,6 +38,18 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? _types.Mode.Standard : _ref$mode,
     initialFocusRef = _ref.initialFocusRef;
+  var _getOptions = (0, _utils.getOptions)(palette, selectedColor),
+    options = _getOptions.options,
+    selectedValue = _getOptions.value;
+  var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
+  var selectedColorIndex = selectedValue.value ? options.findIndex(function (_ref2) {
+    var value = _ref2.value;
+    return value === selectedValue.value;
+  }) : 0;
+  var _useState = (0, _react.useState)(selectedColorIndex),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    focusedIndex = _useState2[0],
+    setFocusedIndex = _useState2[1];
   var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
   var changeAnalyticsCaller = function changeAnalyticsCaller() {
     if (createAnalyticsEvent) {
@@ -44,7 +59,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.26"
+          packageVersion: "3.3.0"
         }
       })(createAnalyticsEvent);
     }
@@ -56,17 +71,6 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
   var handleChange = function handleChange(value) {
     onChange(value, changeAnalyticsCaller());
   };
-  var _getOptions = (0, _utils.getOptions)(palette, selectedColor),
-    options = _getOptions.options,
-    selectedValue = _getOptions.value;
-  var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
-  var _useState = (0, _react.useState)(selectedValue.value ? options.findIndex(function (_ref2) {
-      var value = _ref2.value;
-      return value === selectedValue.value;
-    }) : 0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    focusedIndex = _useState2[0],
-    setFocusedIndex = _useState2[1];
   (0, _react.useEffect)(function () {
     var _colorCardRefs$focuse;
     (_colorCardRefs$focuse = colorCardRefs[focusedIndex]) === null || _colorCardRefs$focuse === void 0 || _colorCardRefs$focuse.focus();
@@ -74,22 +78,31 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var numItems = options.length;
     switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
+      case _constants.KEY_ARROW_DOWN:
+      case _constants.KEY_ARROW_RIGHT:
         setFocusedIndex(function (prevIndex) {
           return (prevIndex + 1) % numItems;
         });
         break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
+      case _constants.KEY_ARROW_UP:
+      case _constants.KEY_ARROW_LEFT:
         setFocusedIndex(function (prevIndex) {
           return (prevIndex - 1 + numItems) % numItems;
         });
         break;
+      case _constants.KEY_TAB:
+        {
+          if (isFocusLockEnabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            setFocusedIndex(selectedColorIndex);
+          }
+          break;
+        }
       default:
         break;
     }
-  }, [setFocusedIndex, options]);
+  }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
   return (0, _react2.jsx)("div", {
     "aria-label": fullLabel,
     role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
@@ -111,6 +124,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
       css: colorCardWrapperStyles,
       key: value
     }, (0, _react2.jsx)(_ColorCard.default, (0, _extends2.default)({
+      type: _constants.COLOR_PALETTE_MENU,
       label: label,
       value: value,
       checkMarkColor: checkMarkColor,
@@ -119,7 +133,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
       onClick: handleChange
     }, (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') && {
       ref: function ref(_ref4) {
-        return colorCardRefs[index] = _ref4;
+        colorCardRefs[index] = _ref4;
       },
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       onKeyDown: handleKeyDown
@@ -129,7 +143,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.26"
+  packageVersion: "3.3.0"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -25,8 +25,8 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _messages = _interopRequireDefault(require("../messages"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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 _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -42,7 +42,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.26";
+var packageVersion = "3.3.0";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -88,7 +88,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           isTabbing: false
         });
-      } else if (key === 'Escape') {
+      } else if (key === _constants.KEY_ESCAPE) {
         e.stopPropagation();
       }
     });

package/dist/cjs/components/Trigger.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -38,7 +39,7 @@ var ColorCard = function ColorCard(_ref) {
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, (0, _react2.jsx)("button", {
-    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && !(0, _platformFeatureFlags.fg)('platform-design-system-dsp-20821-color-pickr-focus') && colorCardButtonFocusedStyles],
     disabled: isDisabled,
     onClick: handleClick,
     onMouseDown: handleMouseDown,

package/dist/cjs/components/components.js

@@ -10,6 +10,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ColorCard = _interopRequireDefault(require("./ColorCard"));
 var _utils = require("../utils");
 var _react = require("@emotion/react");
+var _constants = require("../constants");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -45,6 +46,7 @@ var Option = exports.Option = function Option(props) {
   return (0, _react.jsx)("div", (0, _extends2.default)({
     css: colorCardWrapperStyles
   }, innerProps), (0, _react.jsx)(_ColorCard.default, {
+    type: _constants.COLOR_PICKER,
     label: label,
     value: value,
     checkMarkColor: checkMarkColor,

package/dist/cjs/constants.js

@@ -3,10 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KEY_TAB = exports.KEY_SPACE = exports.KEY_ENTER = exports.KEY_ARROW_UP = exports.KEY_ARROW_DOWN = exports.COLOR_CARD_SIZE = void 0;
+exports.KEY_TAB = exports.KEY_SPACE = exports.KEY_ESCAPE = exports.KEY_ENTER = exports.KEY_ARROW_UP = exports.KEY_ARROW_RIGHT = exports.KEY_ARROW_LEFT = exports.KEY_ARROW_DOWN = exports.COLOR_PICKER = exports.COLOR_PALETTE_MENU = exports.COLOR_CARD_SIZE = void 0;
+var COLOR_PICKER = exports.COLOR_PICKER = 'COLOR_PICKER';
+var COLOR_PALETTE_MENU = exports.COLOR_PALETTE_MENU = 'COLOR_PALETTE_MENU';
 var COLOR_CARD_SIZE = exports.COLOR_CARD_SIZE = 32;
 var KEY_SPACE = exports.KEY_SPACE = ' ';
 var KEY_ENTER = exports.KEY_ENTER = 'Enter';
-var KEY_ARROW_UP = exports.KEY_ARROW_UP = 'ArrowDown';
-var KEY_ARROW_DOWN = exports.KEY_ARROW_DOWN = 'ArrowUp';
-var KEY_TAB = exports.KEY_TAB = 'Tab';
+var KEY_ARROW_UP = exports.KEY_ARROW_UP = 'ArrowUp';
+var KEY_ARROW_DOWN = exports.KEY_ARROW_DOWN = 'ArrowDown';
+var KEY_ARROW_LEFT = exports.KEY_ARROW_LEFT = 'ArrowLeft';
+var KEY_ARROW_RIGHT = exports.KEY_ARROW_RIGHT = 'ArrowRight';
+var KEY_TAB = exports.KEY_TAB = 'Tab';
+var KEY_ESCAPE = exports.KEY_ESCAPE = 'Escape';

package/dist/cjs/index.js

@@ -27,7 +27,7 @@ var _ColorPicker = _interopRequireWildcard(require("./components/ColorPicker"));
 var _types = require("./types");
 var _ColorPaletteMenu = _interopRequireWildcard(require("./components/ColorPaletteMenu"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var Compact = exports.Compact = _types.Mode.Compact,
   Standard = exports.Standard = _types.Mode.Standard;
 var _default = exports.default = _ColorPicker.default;

package/dist/es2019/components/ColorCard.js

@@ -7,13 +7,14 @@ import React, { useCallback, useEffect, useRef, useImperativeHandle, forwardRef
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { KEY_ENTER, KEY_SPACE } from '../constants';
+import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { mergeRefs } from 'use-callback-ref';
 const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   const {
+    type,
     initialFocusRef,
     value,
     label,
@@ -26,6 +27,8 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   } = props;
   const ref = useRef(null);
   const isInitialFocus = useRef(true);
+  const isColorPaletteMenu = type === COLOR_PALETTE_MENU;
+  const isTabbingIgnored = fg('platform_color_palette_menu_timeline_bar_a11y') ? isColorPaletteMenu : false;
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
   }, []);
@@ -35,40 +38,30 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
       onClick(value);
     }
   }, [onClick, value]);
-  const handleKeyDownOld = useCallback(event => {
-    const {
-      key
-    } = event;
-    if ((isTabbing === undefined || isTabbing) && onClick && (key === KEY_ENTER || key === KEY_SPACE)) {
+  const handleKeyDown = useCallback(event => {
+    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && onClick && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
       onClick(value);
     }
-  }, [isTabbing, onClick, value]);
-  const handleKeyDown = useCallback(event => {
-    const {
-      key
-    } = event;
-    if ((isTabbing === undefined || isTabbing) && (key === KEY_ENTER || key === KEY_SPACE)) {
-      event.preventDefault();
-      if (isTabbing) {
+    if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
+      if (isColorPaletteMenu) {
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
+      } else if (event.key === KEY_TAB) {
         event.stopPropagation();
+        event.preventDefault();
       }
-      onClick === null || onClick === void 0 ? void 0 : onClick(value);
     }
-    onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [isTabbing, onClick, onKeyDown, value]);
-
-  // TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
+  }, [isTabbing, isTabbingIgnored, isColorPaletteMenu, onClick, onKeyDown, value]);
   useEffect(() => {
     if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
       const refCurrent = ref.current;
-      const handleTabKey = e => {
-        if (e.key === 'Tab') {
-          e.stopPropagation();
-          e.preventDefault();
+      const handleTabKey = event => {
+        if (event.key === KEY_TAB) {
+          event.stopPropagation();
+          event.preventDefault();
         }
       };
       refCurrent === null || refCurrent === void 0 ? void 0 : refCurrent.addEventListener('keydown', handleTabKey);
@@ -79,7 +72,7 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   }, []);
   useImperativeHandle(componentRef, () => ({
     focus: () => {
-      if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
+      if (isTabbingIgnored) {
         if (isInitialFocus.current) {
           var _ref$current;
           !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
@@ -90,7 +83,7 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
         }
       }
     }
-  }), [initialFocusRef]);
+  }), [isTabbingIgnored, initialFocusRef]);
   return jsx(Tooltip, {
     content: label
   }, tooltipProps => {
@@ -101,10 +94,10 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
       tabIndex: fg('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
       "aria-checked": selected,
       "aria-label": label,
-      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      css: [sharedColorContainerStyles, (isTabbingIgnored || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isTabbingIgnored || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,
-      onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld
+      onKeyDown: handleKeyDown
     }), jsx("div", {
       css: colorCardWrapperStyles
     }, jsx("div", {

package/dist/es2019/components/ColorPaletteMenu.js

@@ -11,8 +11,10 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { getOptions, getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { COLOR_PALETTE_MENU, KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT, KEY_TAB } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
 export const ColorPaletteMenuWithoutAnalytics = ({
+  isFocusLockEnabled = true,
   createAnalyticsEvent,
   onChange,
   palette,
@@ -23,6 +25,15 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   mode = Mode.Standard,
   initialFocusRef
 }) => {
+  const {
+    options,
+    value: selectedValue
+  } = getOptions(palette, selectedColor);
+  const fullLabel = `${label}, ${selectedValue.label} selected`;
+  const selectedColorIndex = selectedValue.value ? options.findIndex(({
+    value
+  }) => value === selectedValue.value) : 0;
+  const [focusedIndex, setFocusedIndex] = useState(selectedColorIndex);
   const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
   const changeAnalyticsCaller = () => {
     if (createAnalyticsEvent) {
@@ -32,7 +43,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.26"
+          packageVersion: "3.3.0"
         }
       })(createAnalyticsEvent);
     }
@@ -42,14 +53,6 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   const handleChange = value => {
     onChange(value, changeAnalyticsCaller());
   };
-  const {
-    options,
-    value: selectedValue
-  } = getOptions(palette, selectedColor);
-  const fullLabel = `${label}, ${selectedValue.label} selected`;
-  const [focusedIndex, setFocusedIndex] = useState(selectedValue.value ? options.findIndex(({
-    value
-  }) => value === selectedValue.value) : 0);
   useEffect(() => {
     var _colorCardRefs$focuse;
     (_colorCardRefs$focuse = colorCardRefs[focusedIndex]) === null || _colorCardRefs$focuse === void 0 ? void 0 : _colorCardRefs$focuse.focus();
@@ -57,18 +60,27 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   const handleKeyDown = useCallback(event => {
     const numItems = options.length;
     switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
+      case KEY_ARROW_DOWN:
+      case KEY_ARROW_RIGHT:
         setFocusedIndex(prevIndex => (prevIndex + 1) % numItems);
         break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
+      case KEY_ARROW_UP:
+      case KEY_ARROW_LEFT:
         setFocusedIndex(prevIndex => (prevIndex - 1 + numItems) % numItems);
         break;
+      case KEY_TAB:
+        {
+          if (isFocusLockEnabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            setFocusedIndex(selectedColorIndex);
+          }
+          break;
+        }
       default:
         break;
     }
-  }, [setFocusedIndex, options]);
+  }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
   return jsx("div", {
     "aria-label": fullLabel,
     role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
@@ -90,6 +102,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     css: colorCardWrapperStyles,
     key: value
   }, jsx(ColorCard, _extends({
+    type: COLOR_PALETTE_MENU,
     label: label,
     value: value,
     checkMarkColor: checkMarkColor,
@@ -97,7 +110,9 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     selected: value === selectedValue.value,
     onClick: handleChange
   }, fg('platform_color_palette_menu_timeline_bar_a11y') && {
-    ref: ref => colorCardRefs[index] = ref,
+    ref: ref => {
+      colorCardRefs[index] = ref;
+    },
     initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
     onKeyDown: handleKeyDown
   }))))));
@@ -105,7 +120,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.26"
+  packageVersion: "3.3.0"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { PopupSelect } from '@atlaskit/select';
 import Trigger from './Trigger';
 import * as components from './components';
-import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } from '../constants';
+import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB, KEY_ESCAPE } from '../constants';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getOptions } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -26,7 +26,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.26";
+const packageVersion = "3.3.0";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);
@@ -67,7 +67,7 @@ class ColorPickerWithoutAnalyticsBase extends React.Component {
         this.setState({
           isTabbing: false
         });
-      } else if (key === 'Escape') {
+      } else if (key === KEY_ESCAPE) {
         e.stopPropagation();
       }
     });

package/dist/es2019/components/Trigger.js

@@ -4,6 +4,7 @@
  */
 import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B100, DN600A, N0 } from '@atlaskit/theme/colors';
@@ -29,7 +30,7 @@ const ColorCard = ({
   return jsx(Tooltip, {
     content: label
   }, jsx("button", {
-    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && !fg('platform-design-system-dsp-20821-color-pickr-focus') && colorCardButtonFocusedStyles],
     disabled: isDisabled,
     onClick: handleClick,
     onMouseDown: handleMouseDown,

package/dist/es2019/components/components.js

@@ -9,6 +9,7 @@ import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { COLOR_PICKER } from '../constants';
 export const MenuList = props => {
   const {
     selectProps: {
@@ -45,6 +46,7 @@ export const Option = props => {
   return jsx("div", _extends({
     css: colorCardWrapperStyles
   }, innerProps), jsx(ColorCard, {
+    type: COLOR_PICKER,
     label: label,
     value: value,
     checkMarkColor: checkMarkColor,

package/dist/es2019/constants.js

@@ -1,6 +1,11 @@
+export const COLOR_PICKER = 'COLOR_PICKER';
+export const COLOR_PALETTE_MENU = 'COLOR_PALETTE_MENU';
 export const COLOR_CARD_SIZE = 32;
 export const KEY_SPACE = ' ';
 export const KEY_ENTER = 'Enter';
-export const KEY_ARROW_UP = 'ArrowDown';
-export const KEY_ARROW_DOWN = 'ArrowUp';
-export const KEY_TAB = 'Tab';
+export const KEY_ARROW_UP = 'ArrowUp';
+export const KEY_ARROW_DOWN = 'ArrowDown';
+export const KEY_ARROW_LEFT = 'ArrowLeft';
+export const KEY_ARROW_RIGHT = 'ArrowRight';
+export const KEY_TAB = 'Tab';
+export const KEY_ESCAPE = 'Escape';

package/dist/esm/components/ColorCard.js

@@ -7,13 +7,14 @@ import React, { useCallback, useEffect, useRef, useImperativeHandle, forwardRef
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { KEY_ENTER, KEY_SPACE } from '../constants';
+import { COLOR_PALETTE_MENU, KEY_ENTER, KEY_SPACE, KEY_TAB } from '../constants';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { mergeRefs } from 'use-callback-ref';
 var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
-  var initialFocusRef = props.initialFocusRef,
+  var type = props.type,
+    initialFocusRef = props.initialFocusRef,
     value = props.value,
     label = props.label,
     selected = props.selected,
@@ -25,6 +26,8 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     onKeyDown = props.onKeyDown;
   var ref = useRef(null);
   var isInitialFocus = useRef(true);
+  var isColorPaletteMenu = type === COLOR_PALETTE_MENU;
+  var isTabbingIgnored = fg('platform_color_palette_menu_timeline_bar_a11y') ? isColorPaletteMenu : false;
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -34,36 +37,30 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
       onClick(value);
     }
   }, [onClick, value]);
-  var handleKeyDownOld = useCallback(function (event) {
-    var key = event.key;
-    if ((isTabbing === undefined || isTabbing) && onClick && (key === KEY_ENTER || key === KEY_SPACE)) {
+  var handleKeyDown = useCallback(function (event) {
+    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && onClick && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
       onClick(value);
     }
-  }, [isTabbing, onClick, value]);
-  var handleKeyDown = useCallback(function (event) {
-    var key = event.key;
-    if ((isTabbing === undefined || isTabbing) && (key === KEY_ENTER || key === KEY_SPACE)) {
-      event.preventDefault();
-      if (isTabbing) {
+    if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
+      if (isColorPaletteMenu) {
+        onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
+      } else if (event.key === KEY_TAB) {
         event.stopPropagation();
+        event.preventDefault();
       }
-      onClick === null || onClick === void 0 || onClick(value);
     }
-    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  }, [isTabbing, onClick, onKeyDown, value]);
-
-  // TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
+  }, [isTabbing, isTabbingIgnored, isColorPaletteMenu, onClick, onKeyDown, value]);
   useEffect(function () {
     if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
       var refCurrent = ref.current;
-      var handleTabKey = function handleTabKey(e) {
-        if (e.key === 'Tab') {
-          e.stopPropagation();
-          e.preventDefault();
+      var handleTabKey = function handleTabKey(event) {
+        if (event.key === KEY_TAB) {
+          event.stopPropagation();
+          event.preventDefault();
         }
       };
       refCurrent === null || refCurrent === void 0 || refCurrent.addEventListener('keydown', handleTabKey);
@@ -75,7 +72,7 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
   useImperativeHandle(componentRef, function () {
     return {
       focus: function focus() {
-        if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
+        if (isTabbingIgnored) {
           if (isInitialFocus.current) {
             var _ref$current;
             !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
@@ -87,7 +84,7 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
         }
       }
     };
-  }, [initialFocusRef]);
+  }, [isTabbingIgnored, initialFocusRef]);
   return jsx(Tooltip, {
     content: label
   }, function (tooltipProps) {
@@ -98,10 +95,10 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
       tabIndex: fg('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
       "aria-checked": selected,
       "aria-label": label,
-      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      css: [sharedColorContainerStyles, (isTabbingIgnored || isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && (isTabbingIgnored || !isTabbing) && colorCardOptionFocusedStyles],
       onClick: handleClick,
       onMouseDown: handleMouseDown,
-      onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld
+      onKeyDown: handleKeyDown
     }), jsx("div", {
       css: colorCardWrapperStyles
     }, jsx("div", {

package/dist/esm/components/ColorPaletteMenu.js

@@ -12,9 +12,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { getOptions, getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { COLOR_PALETTE_MENU, KEY_ARROW_UP, KEY_ARROW_DOWN, KEY_ARROW_LEFT, KEY_ARROW_RIGHT, KEY_TAB } from '../constants';
 import { N0, N40 } from '@atlaskit/theme/colors';
 export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
-  var createAnalyticsEvent = _ref.createAnalyticsEvent,
+  var _ref$isFocusLockEnabl = _ref.isFocusLockEnabled,
+    isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
     palette = _ref.palette,
     selectedColor = _ref.selectedColor,
@@ -26,6 +29,18 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     _ref$mode = _ref.mode,
     mode = _ref$mode === void 0 ? Mode.Standard : _ref$mode,
     initialFocusRef = _ref.initialFocusRef;
+  var _getOptions = getOptions(palette, selectedColor),
+    options = _getOptions.options,
+    selectedValue = _getOptions.value;
+  var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
+  var selectedColorIndex = selectedValue.value ? options.findIndex(function (_ref2) {
+    var value = _ref2.value;
+    return value === selectedValue.value;
+  }) : 0;
+  var _useState = useState(selectedColorIndex),
+    _useState2 = _slicedToArray(_useState, 2),
+    focusedIndex = _useState2[0],
+    setFocusedIndex = _useState2[1];
   var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
   var changeAnalyticsCaller = function changeAnalyticsCaller() {
     if (createAnalyticsEvent) {
@@ -35,7 +50,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.26"
+          packageVersion: "3.3.0"
         }
       })(createAnalyticsEvent);
     }
@@ -47,17 +62,6 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
   var handleChange = function handleChange(value) {
     onChange(value, changeAnalyticsCaller());
   };
-  var _getOptions = getOptions(palette, selectedColor),
-    options = _getOptions.options,
-    selectedValue = _getOptions.value;
-  var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
-  var _useState = useState(selectedValue.value ? options.findIndex(function (_ref2) {
-      var value = _ref2.value;
-      return value === selectedValue.value;
-    }) : 0),
-    _useState2 = _slicedToArray(_useState, 2),
-    focusedIndex = _useState2[0],
-    setFocusedIndex = _useState2[1];
   useEffect(function () {
     var _colorCardRefs$focuse;
     (_colorCardRefs$focuse = colorCardRefs[focusedIndex]) === null || _colorCardRefs$focuse === void 0 || _colorCardRefs$focuse.focus();
@@ -65,22 +69,31 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
   var handleKeyDown = useCallback(function (event) {
     var numItems = options.length;
     switch (event.key) {
-      case 'ArrowRight':
-      case 'ArrowDown':
+      case KEY_ARROW_DOWN:
+      case KEY_ARROW_RIGHT:
         setFocusedIndex(function (prevIndex) {
           return (prevIndex + 1) % numItems;
         });
         break;
-      case 'ArrowLeft':
-      case 'ArrowUp':
+      case KEY_ARROW_UP:
+      case KEY_ARROW_LEFT:
         setFocusedIndex(function (prevIndex) {
           return (prevIndex - 1 + numItems) % numItems;
         });
         break;
+      case KEY_TAB:
+        {
+          if (isFocusLockEnabled) {
+            event.preventDefault();
+            event.stopPropagation();
+            setFocusedIndex(selectedColorIndex);
+          }
+          break;
+        }
       default:
         break;
     }
-  }, [setFocusedIndex, options]);
+  }, [isFocusLockEnabled, selectedColorIndex, setFocusedIndex, options]);
   return jsx("div", {
     "aria-label": fullLabel,
     role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
@@ -102,6 +115,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
       css: colorCardWrapperStyles,
       key: value
     }, jsx(ColorCard, _extends({
+      type: COLOR_PALETTE_MENU,
       label: label,
       value: value,
       checkMarkColor: checkMarkColor,
@@ -110,7 +124,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
       onClick: handleChange
     }, fg('platform_color_palette_menu_timeline_bar_a11y') && {
       ref: function ref(_ref4) {
-        return colorCardRefs[index] = _ref4;
+        colorCardRefs[index] = _ref4;
       },
       initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       onKeyDown: handleKeyDown
@@ -120,7 +134,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.26"
+  packageVersion: "3.3.0"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -6,7 +6,7 @@ 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 _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /**
  * @jsxRuntime classic
@@ -16,7 +16,7 @@ import React from 'react';
 import { PopupSelect } from '@atlaskit/select';
 import Trigger from './Trigger';
 import * as components from './components';
-import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } from '../constants';
+import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB, KEY_ESCAPE } from '../constants';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { getOptions } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
@@ -34,7 +34,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.26";
+var packageVersion = "3.3.0";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
@@ -80,7 +80,7 @@ var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
         _this.setState({
           isTabbing: false
         });
-      } else if (key === 'Escape') {
+      } else if (key === KEY_ESCAPE) {
         e.stopPropagation();
       }
     });

package/dist/esm/components/Trigger.js

@@ -4,6 +4,7 @@
  */
 import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
+import { fg } from '@atlaskit/platform-feature-flags';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { B100, DN600A, N0 } from '@atlaskit/theme/colors';
@@ -29,7 +30,7 @@ var ColorCard = function ColorCard(_ref) {
   return jsx(Tooltip, {
     content: label
   }, jsx("button", {
-    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && colorCardButtonFocusedStyles],
+    css: [sharedColorContainerStyles, swatchSize === 'small' ? smallColorContainerSize : defaultColorContainerSize, colorCardButtonStyles, expanded && !fg('platform-design-system-dsp-20821-color-pickr-focus') && colorCardButtonFocusedStyles],
     disabled: isDisabled,
     onClick: handleClick,
     onMouseDown: handleMouseDown,

package/dist/esm/components/components.js

@@ -9,6 +9,7 @@ import ColorCard from './ColorCard';
 import { getWidth } from '../utils';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { COLOR_PICKER } from '../constants';
 export var MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
     innerRef = props.innerRef,
@@ -37,6 +38,7 @@ export var Option = function Option(props) {
   return jsx("div", _extends({
     css: colorCardWrapperStyles
   }, innerProps), jsx(ColorCard, {
+    type: COLOR_PICKER,
     label: label,
     value: value,
     checkMarkColor: checkMarkColor,

package/dist/esm/constants.js

@@ -1,6 +1,11 @@
+export var COLOR_PICKER = 'COLOR_PICKER';
+export var COLOR_PALETTE_MENU = 'COLOR_PALETTE_MENU';
 export var COLOR_CARD_SIZE = 32;
 export var KEY_SPACE = ' ';
 export var KEY_ENTER = 'Enter';
-export var KEY_ARROW_UP = 'ArrowDown';
-export var KEY_ARROW_DOWN = 'ArrowUp';
-export var KEY_TAB = 'Tab';
+export var KEY_ARROW_UP = 'ArrowUp';
+export var KEY_ARROW_DOWN = 'ArrowDown';
+export var KEY_ARROW_LEFT = 'ArrowLeft';
+export var KEY_ARROW_RIGHT = 'ArrowRight';
+export var KEY_TAB = 'Tab';
+export var KEY_ESCAPE = 'Escape';

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

@@ -3,8 +3,10 @@
  * @jsx jsx
  */
 import React, { type KeyboardEventHandler, type Ref } from 'react';
+import type { ColorCardType } from '../types';
 export interface Props {
     initialFocusRef?: Ref<HTMLDivElement>;
+    type: ColorCardType;
     value: string;
     label: string;
     onClick?: (value: string) => void;

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

@@ -6,6 +6,8 @@ import { type Ref } from 'react';
 import { Mode, type Palette } from '../types';
 import { jsx } from '@emotion/react';
 export type Props = {
+    /** the toggle that decides if users can tab outside the color picker (arrow keys will always cycle the focus) */
+    isFocusLockEnabled?: boolean;
     /** color picker button label */
     label?: string;
     /** list of available colors */
@@ -25,6 +27,6 @@ export type Props = {
     /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
     initialFocusRef?: Ref<HTMLDivElement>;
 };
-export declare const ColorPaletteMenuWithoutAnalytics: ({ createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "initialFocusRef" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "mode"> & import("react").RefAttributes<any>>;
+export declare const ColorPaletteMenuWithoutAnalytics: ({ isFocusLockEnabled, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "initialFocusRef" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types/constants.d.ts

@@ -1,6 +1,11 @@
+export declare const COLOR_PICKER = "COLOR_PICKER";
+export declare const COLOR_PALETTE_MENU = "COLOR_PALETTE_MENU";
 export declare const COLOR_CARD_SIZE = 32;
 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_ARROW_UP = "ArrowUp";
+export declare const KEY_ARROW_DOWN = "ArrowDown";
+export declare const KEY_ARROW_LEFT = "ArrowLeft";
+export declare const KEY_ARROW_RIGHT = "ArrowRight";
 export declare const KEY_TAB = "Tab";
+export declare const KEY_ESCAPE = "Escape";

package/dist/types/types.d.ts

@@ -1,3 +1,5 @@
+import type { COLOR_PALETTE_MENU, COLOR_PICKER } from './constants';
+export type ColorCardType = typeof COLOR_PICKER | typeof COLOR_PALETTE_MENU;
 export interface Color {
     label: string;
     value: string;

package/dist/types-ts4.5/components/ColorCard.d.ts

@@ -3,8 +3,10 @@
  * @jsx jsx
  */
 import React, { type KeyboardEventHandler, type Ref } from 'react';
+import type { ColorCardType } from '../types';
 export interface Props {
     initialFocusRef?: Ref<HTMLDivElement>;
+    type: ColorCardType;
     value: string;
     label: string;
     onClick?: (value: string) => void;

package/dist/types-ts4.5/components/ColorPaletteMenu.d.ts

@@ -6,6 +6,8 @@ import { type Ref } from 'react';
 import { Mode, type Palette } from '../types';
 import { jsx } from '@emotion/react';
 export type Props = {
+    /** the toggle that decides if users can tab outside the color picker (arrow keys will always cycle the focus) */
+    isFocusLockEnabled?: boolean;
     /** color picker button label */
     label?: string;
     /** list of available colors */
@@ -25,6 +27,6 @@ export type Props = {
     /** the ref object (usually the currently selected color palette) that consumer can leverage to focus on load */
     initialFocusRef?: Ref<HTMLDivElement>;
 };
-export declare const ColorPaletteMenuWithoutAnalytics: ({ createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
-declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "initialFocusRef" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "mode"> & import("react").RefAttributes<any>>;
+export declare const ColorPaletteMenuWithoutAnalytics: ({ isFocusLockEnabled, createAnalyticsEvent, onChange, palette, selectedColor, checkMarkColor, label, cols, mode, initialFocusRef, }: Props) => jsx.JSX.Element;
+declare const _default: import("react").ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & import("react").RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "initialFocusRef" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "isFocusLockEnabled" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/constants.d.ts

@@ -1,6 +1,11 @@
+export declare const COLOR_PICKER = "COLOR_PICKER";
+export declare const COLOR_PALETTE_MENU = "COLOR_PALETTE_MENU";
 export declare const COLOR_CARD_SIZE = 32;
 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_ARROW_UP = "ArrowUp";
+export declare const KEY_ARROW_DOWN = "ArrowDown";
+export declare const KEY_ARROW_LEFT = "ArrowLeft";
+export declare const KEY_ARROW_RIGHT = "ArrowRight";
 export declare const KEY_TAB = "Tab";
+export declare const KEY_ESCAPE = "Escape";

package/dist/types-ts4.5/types.d.ts

@@ -1,3 +1,5 @@
+import type { COLOR_PALETTE_MENU, COLOR_PICKER } from './constants';
+export type ColorCardType = typeof COLOR_PICKER | typeof COLOR_PALETTE_MENU;
 export interface Color {
     label: string;
     value: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.2.26",
+	"version": "3.3.0",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,10 +23,6 @@
 	"atlaskit:src": "src/index.ts",
 	"atlassian": {
 		"team": "AAIS: Chronos",
-		"releaseModel": "continuous",
-		"productPushConsumption": [
-			"jira"
-		],
 		"website": {
 			"name": "Color Picker"
 		},
@@ -34,9 +30,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.14.0",
+		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
-		"@atlaskit/select": "^17.15.0",
+		"@atlaskit/select": "^17.18.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
@@ -47,11 +43,11 @@
 		"use-callback-ref": "^1.2.3"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0"
+		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
 	},
 	"devDependencies": {
 		"@af/visual-regression": "*",
-		"@atlaskit/primitives": "^12.0.0",
+		"@atlaskit/primitives": "^12.1.0",
 		"@atlaskit/visual-regression": "*",
 		"@testing-library/react": "^12.1.5",
 		"@testing-library/user-event": "^14.4.3",
@@ -81,6 +77,9 @@
 	"platform-feature-flags": {
 		"platform_color_palette_menu_timeline_bar_a11y": {
 			"type": "boolean"
+		},
+		"platform-design-system-dsp-20821-color-pickr-focus": {
+			"type": "boolean"
 		}
 	}
 }