@atlaskit/color-picker 3.2.24 → 3.2.26

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/color-picker
 
+## 3.2.26
+
+### Patch Changes
+
+- [#132551](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132551)
+  [`793d8a11244a8`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/793d8a11244a8) -
+  Improve initial focus on the color picker when loaded
+
+## 3.2.25
+
+### Patch Changes
+
+- [#132178](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132178)
+  [`93caf7dc621cc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93caf7dc621cc) -
+  Add support for consumers to set initial focus in color picker
+- [#132178](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/132178)
+  [`93caf7dc621cc`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/93caf7dc621cc) -
+  Implemented roving tabIndex for color palatte menu
+
 ## 3.2.24
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -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 value = props.value,
+  var initialFocusRef = props.initialFocusRef,
+    value = props.value,
     label = props.label,
     selected = props.selected,
     focused = props.focused,
@@ -33,9 +34,9 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     checkMarkColor = _props$checkMarkColor === void 0 ? _colors.N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
-    onKeyDown = props.onKeyDown,
-    onTabPress = props.onTabPress;
+    onKeyDown = props.onKeyDown;
   var ref = (0, _react.useRef)(null);
+  var isInitialFocus = (0, _react.useRef)(true);
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -57,9 +58,6 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
   }, [isTabbing, onClick, value]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var key = event.key;
-    if (key === 'Tab') {
-      onTabPress === null || onTabPress === void 0 || onTabPress(event.shiftKey);
-    }
     if ((isTabbing === undefined || isTabbing) && (key === _constants.KEY_ENTER || key === _constants.KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
@@ -68,7 +66,7 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
       onClick === null || onClick === void 0 || onClick(value);
     }
     onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  }, [isTabbing, onTabPress, onClick, onKeyDown, value]);
+  }, [isTabbing, onClick, onKeyDown, value]);
 
   // TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
   (0, _react.useEffect)(function () {
@@ -89,25 +87,33 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
   (0, _react.useImperativeHandle)(componentRef, function () {
     return {
       focus: function focus() {
-        var _ref$current;
-        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+        if ((0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
+          if (isInitialFocus.current) {
+            var _ref$current;
+            !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
+            isInitialFocus.current = false;
+          } else {
+            var _ref$current2;
+            (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.focus();
+          }
+        }
       }
     };
-  }, []);
+  }, [initialFocusRef]);
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
   }, function (tooltipProps) {
     delete tooltipProps['aria-describedby'];
     return (0, _react2.jsx)("div", (0, _extends2.default)({}, tooltipProps, {
-      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      onKeyDown: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld,
+      ref: initialFocusRef ? (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref, initialFocusRef]) : (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref]),
       role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
+      tabIndex: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
       "aria-checked": selected,
       "aria-label": label,
-      tabIndex: 0,
-      ref: (0, _useCallbackRef.mergeRefs)([ref, tooltipProps.ref])
+      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      onKeyDown: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld
     }), (0, _react2.jsx)("div", {
       css: colorCardWrapperStyles
     }, (0, _react2.jsx)("div", {

package/dist/cjs/components/ColorPaletteMenu.js

@@ -33,7 +33,8 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? 6 : _ref$cols,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? _types.Mode.Standard : _ref$mode;
+    mode = _ref$mode === void 0 ? _types.Mode.Standard : _ref$mode,
+    initialFocusRef = _ref.initialFocusRef;
   var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
   var changeAnalyticsCaller = function changeAnalyticsCaller() {
     if (createAnalyticsEvent) {
@@ -43,7 +44,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.24"
+          packageVersion: "3.2.26"
         }
       })(createAnalyticsEvent);
     }
@@ -89,10 +90,6 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         break;
     }
   }, [setFocusedIndex, options]);
-  var onTabPress = function onTabPress() {
-    var backwards = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    setFocusedIndex(backwards ? 0 : options.length - 1);
-  };
   return (0, _react2.jsx)("div", {
     "aria-label": fullLabel,
     role: (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
@@ -124,7 +121,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
       ref: function ref(_ref4) {
         return colorCardRefs[index] = _ref4;
       },
-      onTabPress: onTabPress,
+      initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       onKeyDown: handleKeyDown
     })));
   })));
@@ -132,7 +129,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.24"
+  packageVersion: "3.2.26"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react2.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -42,7 +42,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.24";
+var packageVersion = "3.2.26";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/es2019/components/ColorCard.js

@@ -14,6 +14,7 @@ import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { mergeRefs } from 'use-callback-ref';
 const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   const {
+    initialFocusRef,
     value,
     label,
     selected,
@@ -21,10 +22,10 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     checkMarkColor = N0,
     isTabbing,
     onClick,
-    onKeyDown,
-    onTabPress
+    onKeyDown
   } = props;
   const ref = useRef(null);
+  const isInitialFocus = useRef(true);
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
   }, []);
@@ -50,9 +51,6 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     const {
       key
     } = event;
-    if (key === 'Tab') {
-      onTabPress === null || onTabPress === void 0 ? void 0 : onTabPress(event.shiftKey);
-    }
     if ((isTabbing === undefined || isTabbing) && (key === KEY_ENTER || key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
@@ -61,7 +59,7 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
       onClick === null || onClick === void 0 ? void 0 : onClick(value);
     }
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
-  }, [isTabbing, onTabPress, onClick, onKeyDown, value]);
+  }, [isTabbing, onClick, onKeyDown, value]);
 
   // TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
   useEffect(() => {
@@ -81,24 +79,32 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
   }, []);
   useImperativeHandle(componentRef, () => ({
     focus: () => {
-      var _ref$current;
-      (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
+      if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
+        if (isInitialFocus.current) {
+          var _ref$current;
+          !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
+          isInitialFocus.current = false;
+        } else {
+          var _ref$current2;
+          (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
+        }
+      }
     }
-  }), []);
+  }), [initialFocusRef]);
   return jsx(Tooltip, {
     content: label
   }, tooltipProps => {
     delete tooltipProps['aria-describedby'];
     return jsx("div", _extends({}, tooltipProps, {
-      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld,
+      ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
       role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
+      tabIndex: fg('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
       "aria-checked": selected,
       "aria-label": label,
-      tabIndex: 0,
-      ref: mergeRefs([ref, tooltipProps.ref])
+      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld
     }), jsx("div", {
       css: colorCardWrapperStyles
     }, jsx("div", {

package/dist/es2019/components/ColorPaletteMenu.js

@@ -20,7 +20,8 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   checkMarkColor,
   label = 'Color picker',
   cols = 6,
-  mode = Mode.Standard
+  mode = Mode.Standard,
+  initialFocusRef
 }) => {
   const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
   const changeAnalyticsCaller = () => {
@@ -31,7 +32,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.24"
+          packageVersion: "3.2.26"
         }
       })(createAnalyticsEvent);
     }
@@ -68,9 +69,6 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         break;
     }
   }, [setFocusedIndex, options]);
-  const onTabPress = (backwards = false) => {
-    setFocusedIndex(backwards ? 0 : options.length - 1);
-  };
   return jsx("div", {
     "aria-label": fullLabel,
     role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
@@ -100,14 +98,14 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     onClick: handleChange
   }, fg('platform_color_palette_menu_timeline_bar_a11y') && {
     ref: ref => colorCardRefs[index] = ref,
-    onTabPress,
+    initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
     onKeyDown: handleKeyDown
   }))))));
 };
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.24"
+  packageVersion: "3.2.26"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -26,7 +26,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.24";
+const packageVersion = "3.2.26";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/esm/components/ColorCard.js

@@ -13,7 +13,8 @@ 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 value = props.value,
+  var initialFocusRef = props.initialFocusRef,
+    value = props.value,
     label = props.label,
     selected = props.selected,
     focused = props.focused,
@@ -21,9 +22,9 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     checkMarkColor = _props$checkMarkColor === void 0 ? N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
-    onKeyDown = props.onKeyDown,
-    onTabPress = props.onTabPress;
+    onKeyDown = props.onKeyDown;
   var ref = useRef(null);
+  var isInitialFocus = useRef(true);
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -45,9 +46,6 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
   }, [isTabbing, onClick, value]);
   var handleKeyDown = useCallback(function (event) {
     var key = event.key;
-    if (key === 'Tab') {
-      onTabPress === null || onTabPress === void 0 || onTabPress(event.shiftKey);
-    }
     if ((isTabbing === undefined || isTabbing) && (key === KEY_ENTER || key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
@@ -56,7 +54,7 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
       onClick === null || onClick === void 0 || onClick(value);
     }
     onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
-  }, [isTabbing, onTabPress, onClick, onKeyDown, value]);
+  }, [isTabbing, onClick, onKeyDown, value]);
 
   // TODO: Remove this useEffect when the feature flag 'platform_color_palette_menu_timeline_bar_a11y' is cleaned up
   useEffect(function () {
@@ -77,25 +75,33 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
   useImperativeHandle(componentRef, function () {
     return {
       focus: function focus() {
-        var _ref$current;
-        (_ref$current = ref.current) === null || _ref$current === void 0 || _ref$current.focus();
+        if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
+          if (isInitialFocus.current) {
+            var _ref$current;
+            !initialFocusRef && ((_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus());
+            isInitialFocus.current = false;
+          } else {
+            var _ref$current2;
+            (_ref$current2 = ref.current) === null || _ref$current2 === void 0 || _ref$current2.focus();
+          }
+        }
       }
     };
-  }, []);
+  }, [initialFocusRef]);
   return jsx(Tooltip, {
     content: label
   }, function (tooltipProps) {
     delete tooltipProps['aria-describedby'];
     return jsx("div", _extends({}, tooltipProps, {
-      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
-      onClick: handleClick,
-      onMouseDown: handleMouseDown,
-      onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld,
+      ref: initialFocusRef ? mergeRefs([ref, tooltipProps.ref, initialFocusRef]) : mergeRefs([ref, tooltipProps.ref]),
       role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'menuitemradio' : 'radio',
+      tabIndex: fg('platform_color_palette_menu_timeline_bar_a11y') ? selected ? 0 : -1 : 0,
       "aria-checked": selected,
       "aria-label": label,
-      tabIndex: 0,
-      ref: mergeRefs([ref, tooltipProps.ref])
+      css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
+      onClick: handleClick,
+      onMouseDown: handleMouseDown,
+      onKeyDown: fg('platform_color_palette_menu_timeline_bar_a11y') ? handleKeyDown : handleKeyDownOld
     }), jsx("div", {
       css: colorCardWrapperStyles
     }, jsx("div", {

package/dist/esm/components/ColorPaletteMenu.js

@@ -24,7 +24,8 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     _ref$cols = _ref.cols,
     cols = _ref$cols === void 0 ? 6 : _ref$cols,
     _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? Mode.Standard : _ref$mode;
+    mode = _ref$mode === void 0 ? Mode.Standard : _ref$mode,
+    initialFocusRef = _ref.initialFocusRef;
   var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
   var changeAnalyticsCaller = function changeAnalyticsCaller() {
     if (createAnalyticsEvent) {
@@ -34,7 +35,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.24"
+          packageVersion: "3.2.26"
         }
       })(createAnalyticsEvent);
     }
@@ -80,10 +81,6 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         break;
     }
   }, [setFocusedIndex, options]);
-  var onTabPress = function onTabPress() {
-    var backwards = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    setFocusedIndex(backwards ? 0 : options.length - 1);
-  };
   return jsx("div", {
     "aria-label": fullLabel,
     role: fg('platform_color_palette_menu_timeline_bar_a11y') ? 'group' : 'radiogroup'
@@ -115,7 +112,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
       ref: function ref(_ref4) {
         return colorCardRefs[index] = _ref4;
       },
-      onTabPress: onTabPress,
+      initialFocusRef: value === selectedValue.value ? initialFocusRef : undefined,
       onKeyDown: handleKeyDown
     })));
   })));
@@ -123,7 +120,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.24"
+  packageVersion: "3.2.26"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -34,7 +34,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.24";
+var packageVersion = "3.2.26";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

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

@@ -2,8 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type KeyboardEventHandler } from 'react';
+import React, { type KeyboardEventHandler, type Ref } from 'react';
 export interface Props {
+    initialFocusRef?: Ref<HTMLDivElement>;
     value: string;
     label: string;
     onClick?: (value: string) => void;
@@ -13,7 +14,6 @@ export interface Props {
     focused?: boolean;
     isOption?: boolean;
     isTabbing?: boolean;
-    onTabPress?: (backwards: boolean) => void;
 }
 export type ColorCardRef = {
     focus: () => void;

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

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type Ref } from 'react';
 import { Mode, type Palette } from '../types';
 import { jsx } from '@emotion/react';
 export type Props = {
@@ -18,7 +22,9 @@ export type Props = {
     createAnalyticsEvent?: any;
     /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
     mode?: Mode;
+    /** 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, }: 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" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "mode"> & import("react").RefAttributes<any>>;
+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 default _default;

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

@@ -2,8 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type KeyboardEventHandler } from 'react';
+import React, { type KeyboardEventHandler, type Ref } from 'react';
 export interface Props {
+    initialFocusRef?: Ref<HTMLDivElement>;
     value: string;
     label: string;
     onClick?: (value: string) => void;
@@ -13,7 +14,6 @@ export interface Props {
     focused?: boolean;
     isOption?: boolean;
     isTabbing?: boolean;
-    onTabPress?: (backwards: boolean) => void;
 }
 export type ColorCardRef = {
     focus: () => void;

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

@@ -1,4 +1,8 @@
-/// <reference types="react" />
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type Ref } from 'react';
 import { Mode, type Palette } from '../types';
 import { jsx } from '@emotion/react';
 export type Props = {
@@ -18,7 +22,9 @@ export type Props = {
     createAnalyticsEvent?: any;
     /** style of the color-picker, either 'Compact' or 'Standard', default value is 'Standard' */
     mode?: Mode;
+    /** 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, }: 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" | "checkMarkColor" | "cols" | "palette" | "selectedColor" | "mode"> & import("react").RefAttributes<any>>;
+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 default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.2.24",
+	"version": "3.2.26",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,11 +34,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.12.0",
+		"@atlaskit/icon": "^22.14.0",
 		"@atlaskit/platform-feature-flags": "0.3.0",
-		"@atlaskit/select": "^17.13.0",
+		"@atlaskit/select": "^17.15.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.58.0",
+		"@atlaskit/tokens": "^1.59.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",