@atlaskit/color-picker 3.2.27 → 3.3.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/color-picker
 
+## 3.3.1
+
+### Patch Changes
+
+- [#141027](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141027)
+  [`0d28a5b25436c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0d28a5b25436c) -
+  [ux] Technical change - Expose event in onChange callback of ColorPaletteMenu
+- Updated dependencies
+
+## 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

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
@@ -35,6 +35,7 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     checkMarkColor = _props$checkMarkColor === void 0 ? _colors.N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
+    onClickOld = props.onClickOld,
     onKeyDown = props.onKeyDown;
   var ref = (0, _react.useRef)(null);
   var isInitialFocus = (0, _react.useRef)(true);
@@ -44,18 +45,27 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
     event.preventDefault();
   }, []);
   var handleClick = (0, _react.useCallback)(function (event) {
-    if (onClick) {
-      event.preventDefault();
-      onClick(value);
+    if ((0, _platformFeatureFlags.fg)('platform_color_palette-expose-event')) {
+      if (onClick) {
+        event.preventDefault();
+        onClick(event, value);
+      }
+    } else {
+      if (onClickOld) {
+        event.preventDefault();
+        onClickOld(value);
+      }
     }
-  }, [onClick, value]);
+  }, [onClick, onClickOld, value]);
   var handleKeyDown = (0, _react.useCallback)(function (event) {
-    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && onClick && (event.key === _constants.KEY_ENTER || event.key === _constants.KEY_SPACE)) {
+    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && (onClickOld && !(0, _platformFeatureFlags.fg)('platform_color_palette-expose-event') || onClick && (0, _platformFeatureFlags.fg)('platform_color_palette-expose-event')) && (event.key === _constants.KEY_ENTER || event.key === _constants.KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
-      onClick(value);
+
+      // Remove optional call on FG cleanup platform_color_palette-expose-event
+      (0, _platformFeatureFlags.fg)('platform_color_palette-expose-event') ? onClick === null || onClick === void 0 ? void 0 : onClick(event, value) : onClickOld === null || onClickOld === void 0 ? void 0 : onClickOld(value);
     }
     if ((0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
       if (isColorPaletteMenu) {
@@ -65,7 +75,7 @@ var ColorCard = /*#__PURE__*/(0, _react.forwardRef)(function (props, componentRe
         event.preventDefault();
       }
     }
-  }, [isTabbing, isTabbingIgnored, isColorPaletteMenu, onClick, onKeyDown, value]);
+  }, [isTabbingIgnored, isTabbing, onClick, onClickOld, value, isColorPaletteMenu, onKeyDown]);
   (0, _react.useEffect)(function () {
     if (!(0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y')) {
       var refCurrent = ref.current;

package/dist/cjs/components/ColorPaletteMenu.js

@@ -28,6 +28,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
     isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
+    onChangeOld = _ref.onChangeOld,
     palette = _ref.palette,
     selectedColor = _ref.selectedColor,
     checkMarkColor = _ref.checkMarkColor,
@@ -59,7 +60,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.27"
+          packageVersion: "3.3.1"
         }
       })(createAnalyticsEvent);
     }
@@ -68,8 +69,12 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
   var colorCardRefs = (0, _react.useMemo)(function () {
     return [];
   }, []);
-  var handleChange = function handleChange(value) {
-    onChange(value, changeAnalyticsCaller());
+  var handleChangeOld = function handleChangeOld(value) {
+    onChangeOld === null || onChangeOld === void 0 || onChangeOld(value, changeAnalyticsCaller());
+  };
+  var handleChange = function handleChange(event, value) {
+    // Set to required on FG cleanup platform_color_palette-expose-event
+    onChange === null || onChange === void 0 || onChange(event, value, changeAnalyticsCaller());
   };
   (0, _react.useEffect)(function () {
     var _colorCardRefs$focuse;
@@ -129,8 +134,11 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
       value: value,
       checkMarkColor: checkMarkColor,
       isOption: true,
-      selected: value === selectedValue.value,
+      selected: value === selectedValue.value
+    }, (0, _platformFeatureFlags.fg)('platform_color_palette-expose-event') ? {
       onClick: handleChange
+    } : {
+      onClickOld: handleChangeOld
     }, (0, _platformFeatureFlags.fg)('platform_color_palette_menu_timeline_bar_a11y') && {
       ref: function ref(_ref4) {
         colorCardRefs[index] = _ref4;
@@ -143,7 +151,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.27"
+  packageVersion: "3.3.1"
 })((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.27";
+var packageVersion = "3.3.1";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

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/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

@@ -23,6 +23,7 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     checkMarkColor = N0,
     isTabbing,
     onClick,
+    onClickOld,
     onKeyDown
   } = props;
   const ref = useRef(null);
@@ -33,18 +34,27 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
     event.preventDefault();
   }, []);
   const handleClick = useCallback(event => {
-    if (onClick) {
-      event.preventDefault();
-      onClick(value);
+    if (fg('platform_color_palette-expose-event')) {
+      if (onClick) {
+        event.preventDefault();
+        onClick(event, value);
+      }
+    } else {
+      if (onClickOld) {
+        event.preventDefault();
+        onClickOld(value);
+      }
     }
-  }, [onClick, value]);
+  }, [onClick, onClickOld, value]);
   const handleKeyDown = useCallback(event => {
-    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && onClick && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
+    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && (onClickOld && !fg('platform_color_palette-expose-event') || onClick && fg('platform_color_palette-expose-event')) && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
-      onClick(value);
+
+      // Remove optional call on FG cleanup platform_color_palette-expose-event
+      fg('platform_color_palette-expose-event') ? onClick === null || onClick === void 0 ? void 0 : onClick(event, value) : onClickOld === null || onClickOld === void 0 ? void 0 : onClickOld(value);
     }
     if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
       if (isColorPaletteMenu) {
@@ -54,7 +64,7 @@ const ColorCard = /*#__PURE__*/forwardRef((props, componentRef) => {
         event.preventDefault();
       }
     }
-  }, [isTabbing, isTabbingIgnored, isColorPaletteMenu, onClick, onKeyDown, value]);
+  }, [isTabbingIgnored, isTabbing, onClick, onClickOld, value, isColorPaletteMenu, onKeyDown]);
   useEffect(() => {
     if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
       const refCurrent = ref.current;

package/dist/es2019/components/ColorPaletteMenu.js

@@ -17,6 +17,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   isFocusLockEnabled = true,
   createAnalyticsEvent,
   onChange,
+  onChangeOld,
   palette,
   selectedColor,
   checkMarkColor,
@@ -43,15 +44,19 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.27"
+          packageVersion: "3.3.1"
         }
       })(createAnalyticsEvent);
     }
     return undefined;
   };
   const colorCardRefs = useMemo(() => [], []);
-  const handleChange = value => {
-    onChange(value, changeAnalyticsCaller());
+  const handleChangeOld = value => {
+    onChangeOld === null || onChangeOld === void 0 ? void 0 : onChangeOld(value, changeAnalyticsCaller());
+  };
+  const handleChange = (event, value) => {
+    // Set to required on FG cleanup platform_color_palette-expose-event
+    onChange === null || onChange === void 0 ? void 0 : onChange(event, value, changeAnalyticsCaller());
   };
   useEffect(() => {
     var _colorCardRefs$focuse;
@@ -107,8 +112,11 @@ export const ColorPaletteMenuWithoutAnalytics = ({
     value: value,
     checkMarkColor: checkMarkColor,
     isOption: true,
-    selected: value === selectedValue.value,
+    selected: value === selectedValue.value
+  }, fg('platform_color_palette-expose-event') ? {
     onClick: handleChange
+  } : {
+    onClickOld: handleChangeOld
   }, fg('platform_color_palette_menu_timeline_bar_a11y') && {
     ref: ref => {
       colorCardRefs[index] = ref;
@@ -120,7 +128,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.27"
+  packageVersion: "3.3.1"
 })(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.27";
+const packageVersion = "3.3.1";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);

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/esm/components/ColorCard.js

@@ -23,6 +23,7 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     checkMarkColor = _props$checkMarkColor === void 0 ? N0 : _props$checkMarkColor,
     isTabbing = props.isTabbing,
     onClick = props.onClick,
+    onClickOld = props.onClickOld,
     onKeyDown = props.onKeyDown;
   var ref = useRef(null);
   var isInitialFocus = useRef(true);
@@ -32,18 +33,27 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
     event.preventDefault();
   }, []);
   var handleClick = useCallback(function (event) {
-    if (onClick) {
-      event.preventDefault();
-      onClick(value);
+    if (fg('platform_color_palette-expose-event')) {
+      if (onClick) {
+        event.preventDefault();
+        onClick(event, value);
+      }
+    } else {
+      if (onClickOld) {
+        event.preventDefault();
+        onClickOld(value);
+      }
     }
-  }, [onClick, value]);
+  }, [onClick, onClickOld, value]);
   var handleKeyDown = useCallback(function (event) {
-    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && onClick && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
+    if ((isTabbingIgnored || isTabbing === undefined || isTabbing) && (onClickOld && !fg('platform_color_palette-expose-event') || onClick && fg('platform_color_palette-expose-event')) && (event.key === KEY_ENTER || event.key === KEY_SPACE)) {
       event.preventDefault();
       if (isTabbing) {
         event.stopPropagation();
       }
-      onClick(value);
+
+      // Remove optional call on FG cleanup platform_color_palette-expose-event
+      fg('platform_color_palette-expose-event') ? onClick === null || onClick === void 0 ? void 0 : onClick(event, value) : onClickOld === null || onClickOld === void 0 ? void 0 : onClickOld(value);
     }
     if (fg('platform_color_palette_menu_timeline_bar_a11y')) {
       if (isColorPaletteMenu) {
@@ -53,7 +63,7 @@ var ColorCard = /*#__PURE__*/forwardRef(function (props, componentRef) {
         event.preventDefault();
       }
     }
-  }, [isTabbing, isTabbingIgnored, isColorPaletteMenu, onClick, onKeyDown, value]);
+  }, [isTabbingIgnored, isTabbing, onClick, onClickOld, value, isColorPaletteMenu, onKeyDown]);
   useEffect(function () {
     if (!fg('platform_color_palette_menu_timeline_bar_a11y')) {
       var refCurrent = ref.current;

package/dist/esm/components/ColorPaletteMenu.js

@@ -19,6 +19,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
     isFocusLockEnabled = _ref$isFocusLockEnabl === void 0 ? true : _ref$isFocusLockEnabl,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     onChange = _ref.onChange,
+    onChangeOld = _ref.onChangeOld,
     palette = _ref.palette,
     selectedColor = _ref.selectedColor,
     checkMarkColor = _ref.checkMarkColor,
@@ -50,7 +51,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.27"
+          packageVersion: "3.3.1"
         }
       })(createAnalyticsEvent);
     }
@@ -59,8 +60,12 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
   var colorCardRefs = useMemo(function () {
     return [];
   }, []);
-  var handleChange = function handleChange(value) {
-    onChange(value, changeAnalyticsCaller());
+  var handleChangeOld = function handleChangeOld(value) {
+    onChangeOld === null || onChangeOld === void 0 || onChangeOld(value, changeAnalyticsCaller());
+  };
+  var handleChange = function handleChange(event, value) {
+    // Set to required on FG cleanup platform_color_palette-expose-event
+    onChange === null || onChange === void 0 || onChange(event, value, changeAnalyticsCaller());
   };
   useEffect(function () {
     var _colorCardRefs$focuse;
@@ -120,8 +125,11 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
       value: value,
       checkMarkColor: checkMarkColor,
       isOption: true,
-      selected: value === selectedValue.value,
+      selected: value === selectedValue.value
+    }, fg('platform_color_palette-expose-event') ? {
       onClick: handleChange
+    } : {
+      onClickOld: handleChangeOld
     }, fg('platform_color_palette_menu_timeline_bar_a11y') && {
       ref: function ref(_ref4) {
         colorCardRefs[index] = _ref4;
@@ -134,7 +142,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.27"
+  packageVersion: "3.3.1"
 })(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
@@ -34,7 +34,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.27";
+var packageVersion = "3.3.1";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

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/types/components/ColorCard.d.ts

@@ -9,7 +9,8 @@ export interface Props {
     type: ColorCardType;
     value: string;
     label: string;
-    onClick?: (value: string) => void;
+    onClickOld?: (value: string) => void;
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     checkMarkColor?: string;
     selected?: boolean;

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

@@ -2,8 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type Ref } from 'react';
+import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
 import { Mode, type Palette } from '../types';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 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) */
@@ -18,8 +19,10 @@ export type Props = {
     cols: number;
     /** color of checkmark on selected color */
     checkMarkColor?: string;
+    /** onChange handler deprecated */
+    onChangeOld?: (value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** onChange handler */
-    onChange: (value: string, analyticsEvent?: object) => void;
+    onChange?: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => 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' */
@@ -27,6 +30,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: ({ 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 declare const ColorPaletteMenuWithoutAnalytics: ({ isFocusLockEnabled, createAnalyticsEvent, onChange, onChangeOld, 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" | "onChangeOld" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

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

@@ -9,7 +9,8 @@ export interface Props {
     type: ColorCardType;
     value: string;
     label: string;
-    onClick?: (value: string) => void;
+    onClickOld?: (value: string) => void;
+    onClick?: (event: React.MouseEvent | React.KeyboardEvent, value: string) => void;
     onKeyDown?: KeyboardEventHandler<HTMLElement>;
     checkMarkColor?: string;
     selected?: boolean;

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

@@ -2,8 +2,9 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type Ref } from 'react';
+import { type KeyboardEvent, type MouseEvent, type Ref } from 'react';
 import { Mode, type Palette } from '../types';
+import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 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) */
@@ -18,8 +19,10 @@ export type Props = {
     cols: number;
     /** color of checkmark on selected color */
     checkMarkColor?: string;
+    /** onChange handler deprecated */
+    onChangeOld?: (value: string, analyticsEvent?: UIAnalyticsEvent) => void;
     /** onChange handler */
-    onChange: (value: string, analyticsEvent?: object) => void;
+    onChange?: (event: MouseEvent | KeyboardEvent, value: string, analyticsEvent?: UIAnalyticsEvent) => 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' */
@@ -27,6 +30,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: ({ 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 declare const ColorPaletteMenuWithoutAnalytics: ({ isFocusLockEnabled, createAnalyticsEvent, onChange, onChangeOld, 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" | "onChangeOld" | "mode"> & import("react").RefAttributes<any>>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/color-picker",
-	"version": "3.2.27",
+	"version": "3.3.1",
 	"description": "Jira Color Picker Component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,11 +30,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/icon": "^22.16.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/tokens": "^1.60.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -77,6 +77,12 @@
 	"platform-feature-flags": {
 		"platform_color_palette_menu_timeline_bar_a11y": {
 			"type": "boolean"
+		},
+		"platform_color_palette-expose-event": {
+			"type": "boolean"
+		},
+		"platform-design-system-dsp-20821-color-pickr-focus": {
+			"type": "boolean"
 		}
 	}
 }