@atlaskit/color-picker 3.2.8 → 3.2.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/color-picker
 
+## 3.2.10
+
+### Patch Changes
+
+- [#91736](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91736) [`29f4e565f90d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/29f4e565f90d) - Modified color picker aria-label format
+
+## 3.2.9
+
+### Patch Changes
+
+- [#91588](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91588) [`464adc72109c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/464adc72109c) - removed duplicate label annoucements for screen reader users at ColorPaletteMenu component
+
 ## 3.2.8
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -71,8 +71,10 @@ var ColorCard = function ColorCard(props) {
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected,
-    "aria-label": label,
+    "aria-checked": selected
+  }, !(0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
+    'aria-label': label
+  }, {
     tabIndex: 0
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref
@@ -96,8 +98,10 @@ var ColorCard = function ColorCard(props) {
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected,
-    "aria-label": label,
+    "aria-checked": selected
+  }, !(0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
+    'aria-label': label
+  }, {
     tabIndex: 0
   }, (0, _platformFeatureFlags.getBooleanFF)('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref

package/dist/cjs/components/ColorPaletteMenu.js

@@ -36,7 +36,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.8"
+          packageVersion: "3.2.10"
         }
       })(createAnalyticsEvent);
     }
@@ -78,7 +78,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.8"
+  packageVersion: "3.2.10"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStylesOld = (0, _react.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -23,6 +23,8 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _utils = require("../utils");
 var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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); }; }
@@ -38,13 +40,13 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.8";
-var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(ColorPickerWithoutAnalytics, _React$Component);
-  var _super = _createSuper(ColorPickerWithoutAnalytics);
-  function ColorPickerWithoutAnalytics() {
+var packageVersion = "3.2.10";
+var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
+  var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
+  function ColorPickerWithoutAnalyticsBase() {
     var _this;
-    (0, _classCallCheck2.default)(this, ColorPickerWithoutAnalytics);
+    (0, _classCallCheck2.default)(this, ColorPickerWithoutAnalyticsBase);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -88,9 +90,26 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
         e.stopPropagation();
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getFullLabel", function (intl, value, label) {
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-1480-inappropriate-label-for-color-picker_76tfe')) {
+        if (value && value.label) {
+          return intl.formatMessage(_messages.default.colorPickerAriaLabel, {
+            color: value.label,
+            message: label
+          });
+        } else {
+          return label;
+        }
+      } else {
+        return intl.formatMessage(_messages.default.colorPickerAriaLabelOldFormat, {
+          color: value.label,
+          message: label
+        });
+      }
+    });
     return _this;
   }
-  (0, _createClass2.default)(ColorPickerWithoutAnalytics, [{
+  (0, _createClass2.default)(ColorPickerWithoutAnalyticsBase, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -105,11 +124,12 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
         selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
         _this$props$showDefau = _this$props.showDefaultSwatchColor,
         showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
-        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch;
+        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch,
+        intl = _this$props.intl;
       var _getOptions = (0, _utils.getOptions)(palette, selectedColor, showDefaultSwatchColor),
         options = _getOptions.options,
         value = _getOptions.value;
-      var fullLabel = value.label && "".concat(label, ", ").concat(value.label, " selected");
+      var fullLabel = this.getFullLabel(intl, value, label);
       return (0, _react2.jsx)(_select.PopupSelect, {
         target: function target(_ref) {
           var ref = _ref.ref,
@@ -146,8 +166,9 @@ var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = /*#__PUR
       });
     }
   }]);
-  return ColorPickerWithoutAnalytics;
+  return ColorPickerWithoutAnalyticsBase;
 }(_react.default.Component);
+var ColorPickerWithoutAnalytics = exports.ColorPickerWithoutAnalytics = (0, _reactIntlNext.injectIntl)(ColorPickerWithoutAnalyticsBase);
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: packageName,

package/dist/cjs/messages.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _reactIntlNext = require("react-intl-next");
+var _default = exports.default = (0, _reactIntlNext.defineMessages)({
+  colorPickerAriaLabel: {
+    id: 'jira.color-picker.src.color-picker-aria-label',
+    defaultMessage: '{color} selected, {message}',
+    description: 'This text is used as aria-label text in color picker component'
+  },
+  colorPickerAriaLabelOldFormat: {
+    id: 'jira.color-picker.src.color-picker-aria-label-old-format',
+    defaultMessage: "{message}, {color} selected",
+    description: 'This text is used as aria-label text in color picker component'
+  }
+});

package/dist/es2019/components/ColorCard.js

@@ -64,8 +64,10 @@ const ColorCard = props => {
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected,
-    "aria-label": label,
+    "aria-checked": selected
+  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
+    'aria-label': label
+  }, {
     tabIndex: 0
   }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref
@@ -89,8 +91,10 @@ const ColorCard = props => {
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected,
-    "aria-label": label,
+    "aria-checked": selected
+  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
+    'aria-label': label
+  }, {
     tabIndex: 0
   }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref

package/dist/es2019/components/ColorPaletteMenu.js

@@ -26,7 +26,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.8"
+          packageVersion: "3.2.10"
         }
       })(createAnalyticsEvent);
     }
@@ -68,7 +68,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.8"
+  packageVersion: "3.2.10"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStylesOld = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -10,6 +10,8 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { getOptions } from '../utils';
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { injectIntl } from 'react-intl-next';
+import messages from '../messages';
 const defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -21,8 +23,8 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.8";
-export class ColorPickerWithoutAnalytics extends React.Component {
+const packageVersion = "3.2.10";
+class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "createAndFireEventOnAtlaskit", createAndFireEvent('atlaskit'));
@@ -66,6 +68,23 @@ export class ColorPickerWithoutAnalytics extends React.Component {
         e.stopPropagation();
       }
     });
+    _defineProperty(this, "getFullLabel", (intl, value, label) => {
+      if (getBooleanFF('platform.jca11y-1480-inappropriate-label-for-color-picker_76tfe')) {
+        if (value && value.label) {
+          return intl.formatMessage(messages.colorPickerAriaLabel, {
+            color: value.label,
+            message: label
+          });
+        } else {
+          return label;
+        }
+      } else {
+        return intl.formatMessage(messages.colorPickerAriaLabelOldFormat, {
+          color: value.label,
+          message: label
+        });
+      }
+    });
   }
   render() {
     const {
@@ -77,13 +96,14 @@ export class ColorPickerWithoutAnalytics extends React.Component {
       label = 'Color picker',
       selectedColourSwatchSize,
       showDefaultSwatchColor = true,
-      isDisabledSelectedSwatch
+      isDisabledSelectedSwatch,
+      intl
     } = this.props;
     const {
       options,
       value
     } = getOptions(palette, selectedColor, showDefaultSwatchColor);
-    const fullLabel = value.label && `${label}, ${value.label} selected`;
+    const fullLabel = this.getFullLabel(intl, value, label);
     return jsx(PopupSelect, {
       target: ({
         ref,
@@ -119,6 +139,7 @@ export class ColorPickerWithoutAnalytics extends React.Component {
     });
   }
 }
+export const ColorPickerWithoutAnalytics = injectIntl(ColorPickerWithoutAnalyticsBase);
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName,

package/dist/es2019/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  colorPickerAriaLabel: {
+    id: 'jira.color-picker.src.color-picker-aria-label',
+    defaultMessage: '{color} selected, {message}',
+    description: 'This text is used as aria-label text in color picker component'
+  },
+  colorPickerAriaLabelOldFormat: {
+    id: 'jira.color-picker.src.color-picker-aria-label-old-format',
+    defaultMessage: `{message}, {color} selected`,
+    description: 'This text is used as aria-label text in color picker component'
+  }
+});

package/dist/esm/components/ColorCard.js

@@ -60,8 +60,10 @@ var ColorCard = function ColorCard(props) {
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected,
-    "aria-label": label,
+    "aria-checked": selected
+  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
+    'aria-label': label
+  }, {
     tabIndex: 0
   }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref
@@ -85,8 +87,10 @@ var ColorCard = function ColorCard(props) {
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected,
-    "aria-label": label,
+    "aria-checked": selected
+  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
+    'aria-label': label
+  }, {
     tabIndex: 0
   }, getBooleanFF('platform.color-picker-radio-button-functionality_6hkcy') && {
     ref: ref

package/dist/esm/components/ColorPaletteMenu.js

@@ -28,7 +28,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.8"
+          packageVersion: "3.2.10"
         }
       })(createAnalyticsEvent);
     }
@@ -70,7 +70,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.8"
+  packageVersion: "3.2.10"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStylesOld = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -18,6 +18,8 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import { getOptions } from '../utils';
 import { css, jsx } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { injectIntl } from 'react-intl-next';
+import messages from '../messages';
 var defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -29,13 +31,13 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.8";
-export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component) {
-  _inherits(ColorPickerWithoutAnalytics, _React$Component);
-  var _super = _createSuper(ColorPickerWithoutAnalytics);
-  function ColorPickerWithoutAnalytics() {
+var packageVersion = "3.2.10";
+var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
+  _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
+  var _super = _createSuper(ColorPickerWithoutAnalyticsBase);
+  function ColorPickerWithoutAnalyticsBase() {
     var _this;
-    _classCallCheck(this, ColorPickerWithoutAnalytics);
+    _classCallCheck(this, ColorPickerWithoutAnalyticsBase);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -79,9 +81,26 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
         e.stopPropagation();
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "getFullLabel", function (intl, value, label) {
+      if (getBooleanFF('platform.jca11y-1480-inappropriate-label-for-color-picker_76tfe')) {
+        if (value && value.label) {
+          return intl.formatMessage(messages.colorPickerAriaLabel, {
+            color: value.label,
+            message: label
+          });
+        } else {
+          return label;
+        }
+      } else {
+        return intl.formatMessage(messages.colorPickerAriaLabelOldFormat, {
+          color: value.label,
+          message: label
+        });
+      }
+    });
     return _this;
   }
-  _createClass(ColorPickerWithoutAnalytics, [{
+  _createClass(ColorPickerWithoutAnalyticsBase, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
@@ -96,11 +115,12 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
         selectedColourSwatchSize = _this$props.selectedColourSwatchSize,
         _this$props$showDefau = _this$props.showDefaultSwatchColor,
         showDefaultSwatchColor = _this$props$showDefau === void 0 ? true : _this$props$showDefau,
-        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch;
+        isDisabledSelectedSwatch = _this$props.isDisabledSelectedSwatch,
+        intl = _this$props.intl;
       var _getOptions = getOptions(palette, selectedColor, showDefaultSwatchColor),
         options = _getOptions.options,
         value = _getOptions.value;
-      var fullLabel = value.label && "".concat(label, ", ").concat(value.label, " selected");
+      var fullLabel = this.getFullLabel(intl, value, label);
       return jsx(PopupSelect, {
         target: function target(_ref) {
           var ref = _ref.ref,
@@ -137,8 +157,9 @@ export var ColorPickerWithoutAnalytics = /*#__PURE__*/function (_React$Component
       });
     }
   }]);
-  return ColorPickerWithoutAnalytics;
+  return ColorPickerWithoutAnalyticsBase;
 }(React.Component);
+export var ColorPickerWithoutAnalytics = injectIntl(ColorPickerWithoutAnalyticsBase);
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: packageName,

package/dist/esm/messages.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  colorPickerAriaLabel: {
+    id: 'jira.color-picker.src.color-picker-aria-label',
+    defaultMessage: '{color} selected, {message}',
+    description: 'This text is used as aria-label text in color picker component'
+  },
+  colorPickerAriaLabelOldFormat: {
+    id: 'jira.color-picker.src.color-picker-aria-label-old-format',
+    defaultMessage: "{message}, {color} selected",
+    description: 'This text is used as aria-label text in color picker component'
+  }
+});

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { PopupSelectProps, ValueType } from '@atlaskit/select';
-import { Color, Palette, SwatchSize } from '../types';
-import { jsx } from '@emotion/react';
+import { PopupSelectProps } from '@atlaskit/select';
+import { Palette, SwatchSize } from '../types';
+import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     /** color picker button label */
     label?: string;
@@ -27,16 +27,8 @@ export interface Props {
     /** diasble swatch button */
     isDisabledSelectedSwatch?: boolean;
 }
-export declare class ColorPickerWithoutAnalytics extends React.Component<Props> {
-    createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
-    state: {
-        isTabbing: boolean;
-    };
-    changeAnalyticsCaller: () => import("@atlaskit/analytics-next").UIAnalyticsEvent | undefined;
-    onChangeSelect: (option: ValueType<Color>) => void;
-    onOptionKeyDown: (value: string) => void;
-    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
-    render(): jsx.JSX.Element;
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch"> & React.RefAttributes<any>>;
+export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>; /** maximum column length */
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/messages.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    colorPickerAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    colorPickerAriaLabelOldFormat: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

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

@@ -1,8 +1,8 @@
 /** @jsx jsx */
 import React from 'react';
-import { PopupSelectProps, ValueType } from '@atlaskit/select';
-import { Color, Palette, SwatchSize } from '../types';
-import { jsx } from '@emotion/react';
+import { PopupSelectProps } from '@atlaskit/select';
+import { Palette, SwatchSize } from '../types';
+import type { WrappedComponentProps } from 'react-intl-next';
 export interface Props {
     /** color picker button label */
     label?: string;
@@ -27,16 +27,8 @@ export interface Props {
     /** diasble swatch button */
     isDisabledSelectedSwatch?: boolean;
 }
-export declare class ColorPickerWithoutAnalytics extends React.Component<Props> {
-    createAndFireEventOnAtlaskit: (payload: import("@atlaskit/analytics-next").AnalyticsEventPayload) => (createAnalyticsEvent: import("@atlaskit/analytics-next").CreateUIAnalyticsEvent) => import("@atlaskit/analytics-next").UIAnalyticsEvent;
-    state: {
-        isTabbing: boolean;
-    };
-    changeAnalyticsCaller: () => import("@atlaskit/analytics-next").UIAnalyticsEvent | undefined;
-    onChangeSelect: (option: ValueType<Color>) => void;
-    onOptionKeyDown: (value: string) => void;
-    onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
-    render(): jsx.JSX.Element;
-}
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<Props, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch"> & React.RefAttributes<any>>;
+export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>; /** maximum column length */
+};
+declare const _default: React.ForwardRefExoticComponent<Pick<Omit<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, "label" | "analyticsContext" | "key" | "onChange" | "checkMarkColor" | "cols" | "popperProps" | "palette" | "selectedColor" | "selectedColourSwatchSize" | "showDefaultSwatchColor" | "isDisabledSelectedSwatch" | "forwardedRef"> & React.RefAttributes<any>>;
 export default _default;

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

@@ -0,0 +1,13 @@
+declare const _default: {
+    colorPickerAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    colorPickerAriaLabelOldFormat: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};
+export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/color-picker",
-  "version": "3.2.8",
+  "version": "3.2.10",
   "description": "Jira Color Picker Component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,23 +32,24 @@
     }
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^9.2.0",
+    "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/platform-feature-flags": "^0.2.5",
     "@atlaskit/select": "^17.6.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@atlaskit/tooltip": "^18.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "memoize-one": "^6.0.0"
+    "memoize-one": "^6.0.0",
+    "react-intl-next": "npm:react-intl@^5.18.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@af/visual-regression": "*",
-    "@atlaskit/primitives": "^5.5.0",
+    "@atlaskit/primitives": "^5.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
@@ -83,6 +84,12 @@
     },
     "platform.design-tokens-color-picker-portfolio-plan-wizard_w8rcl": {
       "type": "boolean"
+    },
+    "platform.jca11y-1480-inappropriate-label-for-color-picker_76tfe": {
+      "type": "boolean"
+    },
+    "platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i": {
+      "type": "boolean"
     }
   }
 }