@atlaskit/color-picker 3.2.15 → 3.2.17

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/color-picker
 
+## 3.2.17
+
+### Patch Changes
+
+- [#111482](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111482)
+  [`6ec58a4845b8d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ec58a4845b8d) -
+  added default implementation at FF false case
+- Updated dependencies
+
+## 3.2.16
+
+### Patch Changes
+
+- [#107395](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/107395)
+  [`9a4ffd1c2458e`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9a4ffd1c2458e) -
+  added different label for radio item
+
 ## 3.2.15
 
 ### Patch Changes

package/dist/cjs/components/ColorCard.js

@@ -6,18 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _done = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/done"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("../constants");
 var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
 var _colors = require("@atlaskit/theme/colors");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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; }
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var ColorCard = function ColorCard(props) {
   var value = props.value,
     label = props.label,
@@ -29,6 +32,8 @@ var ColorCard = function ColorCard(props) {
     onClick = props.onClick,
     onKeyDown = props.onKeyDown;
   var ref = (0, _react.useRef)(null);
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
   var handleMouseDown = (0, _react.useCallback)(function (event) {
     event.preventDefault();
   }, []);
@@ -63,19 +68,17 @@ var ColorCard = function ColorCard(props) {
   }, []);
   return (0, _react2.jsx)(_tooltip.default, {
     content: label
-  }, (0, _react2.jsx)("div", (0, _extends2.default)({
+  }, (0, _react2.jsx)("div", {
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected
-  }, !(0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
-  }, {
+    "aria-checked": selected,
+    "aria-label": (0, _platformFeatureFlags.getBooleanFF)('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? formatMessage(_messages.default.colorCardRadioItemLabel) : label,
     tabIndex: 0,
     ref: ref
-  }), (0, _react2.jsx)("div", {
+  }, (0, _react2.jsx)("div", {
     css: colorCardWrapperStyles
   }, (0, _react2.jsx)("div", {
     css: colorCardContentStyles,
@@ -91,6 +94,7 @@ var ColorCard = function ColorCard(props) {
 };
 var _default = exports.default = ColorCard;
 var colorCardOptionTabbingStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(_colors.B75, ")")
   }

package/dist/cjs/components/ColorPaletteMenu.js

@@ -13,6 +13,8 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
+// 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,
     onChange = _ref.onChange,
@@ -34,7 +36,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.15"
+          packageVersion: "3.2.17"
         }
       })(createAnalyticsEvent);
     }
@@ -49,13 +51,18 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
   var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
   return (0, _react.jsx)("div", {
     "aria-label": fullLabel,
-    role: "radiogroup",
+    role: "radiogroup"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [colorPaletteMenuStyles, mode === _types.Mode.Standard && colorPaletteMenuStandardStyles],
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: "".concat((0, _utils.getWidth)(cols, mode), "px")
     }
   }, (0, _react.jsx)("div", {
-    css: [colorPaletteContainerStyles, mode === _types.Mode.Compact && colorPaletteContainerCompactStyles]
+    css: [colorPaletteContainerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    mode === _types.Mode.Compact && colorPaletteContainerCompactStyles]
   }, options.map(function (_ref2) {
     var label = _ref2.label,
       value = _ref2.value;
@@ -76,7 +83,7 @@ var ColorPaletteMenuWithoutAnalytics = exports.ColorPaletteMenuWithoutAnalytics
 var _default = exports.default = (0, _analyticsNext.withAnalyticsContext)({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.15"
+  packageVersion: "3.2.17"
 })((0, _analyticsNext.withAnalyticsEvents)()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = (0, _react.css)({
   display: 'flex',

package/dist/cjs/components/ColorPicker.js

@@ -27,7 +27,7 @@ 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 _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var defaultPopperProps = {
   strategy: 'fixed',
   modifiers: [{
@@ -39,7 +39,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.15";
+var packageVersion = "3.2.17";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/cjs/components/Trigger.js

@@ -11,6 +11,8 @@ var _react2 = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var ColorCard = function ColorCard(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -73,9 +75,11 @@ var defaultColorContainerSize = (0, _react2.css)({
   height: "var(--ds-space-400, 32px)"
 });
 var colorCardButtonStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")")
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':not(:focus):hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
     outline: 'none'

package/dist/cjs/components/components.js

@@ -11,6 +11,8 @@ var _utils = require("../utils");
 var _react = require("@emotion/react");
 /** @jsx jsx */
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var MenuList = exports.MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
     innerRef = props.innerRef,
@@ -19,6 +21,7 @@ var MenuList = exports.MenuList = function MenuList(props) {
     css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? (0, _utils.getWidth)(cols) : undefined
     },
     ref: innerRef

package/dist/cjs/messages.js

@@ -10,5 +10,10 @@ var _default = exports.default = (0, _reactIntlNext.defineMessages)({
     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'
+  },
+  colorCardRadioItemLabel: {
+    id: 'jira.color-picker.src.color-card-radio-item-label',
+    defaultMessage: 'color option',
+    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

package/dist/es2019/components/ColorCard.js

@@ -1,12 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { KEY_ENTER, KEY_SPACE } from '../constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import messages from '../messages';
 const ColorCard = props => {
   const {
     value,
@@ -19,6 +21,9 @@ const ColorCard = props => {
     onKeyDown
   } = props;
   const ref = useRef(null);
+  const {
+    formatMessage
+  } = useIntl();
   const handleMouseDown = useCallback(event => {
     event.preventDefault();
   }, []);
@@ -55,19 +60,17 @@ const ColorCard = props => {
   }, []);
   return jsx(Tooltip, {
     content: label
-  }, jsx("div", _extends({
+  }, jsx("div", {
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected
-  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
-  }, {
+    "aria-checked": selected,
+    "aria-label": getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? formatMessage(messages.colorCardRadioItemLabel) : label,
     tabIndex: 0,
     ref: ref
-  }), jsx("div", {
+  }, jsx("div", {
     css: colorCardWrapperStyles
   }, jsx("div", {
     css: colorCardContentStyles,
@@ -83,6 +86,7 @@ const ColorCard = props => {
 };
 export default ColorCard;
 const colorCardOptionTabbingStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover, :focus': {
     borderColor: `var(--ds-border-focused, ${B75})`
   }

package/dist/es2019/components/ColorPaletteMenu.js

@@ -3,6 +3,7 @@ import { Mode } from '../types';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import ColorCard from './ColorCard';
 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 { N0, N40 } from '@atlaskit/theme/colors';
 export const ColorPaletteMenuWithoutAnalytics = ({
@@ -24,7 +25,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.15"
+          packageVersion: "3.2.17"
         }
       })(createAnalyticsEvent);
     }
@@ -40,13 +41,18 @@ export const ColorPaletteMenuWithoutAnalytics = ({
   const fullLabel = `${label}, ${selectedValue.label} selected`;
   return jsx("div", {
     "aria-label": fullLabel,
-    role: "radiogroup",
+    role: "radiogroup"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: `${getWidth(cols, mode)}px`
     }
   }, jsx("div", {
-    css: [colorPaletteContainerStyles, mode === Mode.Compact && colorPaletteContainerCompactStyles]
+    css: [colorPaletteContainerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    mode === Mode.Compact && colorPaletteContainerCompactStyles]
   }, options.map(({
     label,
     value
@@ -66,7 +72,7 @@ export const ColorPaletteMenuWithoutAnalytics = ({
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.15"
+  packageVersion: "3.2.17"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 const colorCardWrapperStyles = css({
   display: 'flex',

package/dist/es2019/components/ColorPicker.js

@@ -8,6 +8,7 @@ import * as components from './components';
 import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } 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
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import messages from '../messages';
@@ -22,7 +23,7 @@ const defaultPopperProps = {
   placement: 'bottom-start'
 };
 const packageName = "@atlaskit/color-picker";
-const packageVersion = "3.2.15";
+const packageVersion = "3.2.17";
 class ColorPickerWithoutAnalyticsBase extends React.Component {
   constructor(...args) {
     super(...args);

package/dist/es2019/components/Trigger.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
+// 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';
 const ColorCard = ({
@@ -65,9 +66,11 @@ const defaultColorContainerSize = css({
   height: "var(--ds-space-400, 32px)"
 });
 const colorCardButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     borderColor: `var(--ds-background-neutral-subtle, ${N0})`
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':not(:focus):hover, :focus': {
     borderColor: `var(--ds-border-focused, ${B100})`,
     outline: 'none'

package/dist/es2019/components/components.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 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';
 export const MenuList = props => {
   const {
@@ -16,6 +17,7 @@ export const MenuList = props => {
     css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
     },
     ref: innerRef

package/dist/es2019/messages.js

@@ -4,5 +4,10 @@ export default defineMessages({
     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'
+  },
+  colorCardRadioItemLabel: {
+    id: 'jira.color-picker.src.color-card-radio-item-label',
+    defaultMessage: 'color option',
+    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

package/dist/esm/components/ColorCard.js

@@ -1,12 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
 import EditorDoneIcon from '@atlaskit/icon/glyph/editor/done';
 import Tooltip from '@atlaskit/tooltip';
 import { KEY_ENTER, KEY_SPACE } from '../constants';
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { useIntl } from 'react-intl-next';
 import { N0, DN600A, B75 } from '@atlaskit/theme/colors';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import messages from '../messages';
 var ColorCard = function ColorCard(props) {
   var value = props.value,
     label = props.label,
@@ -18,6 +20,8 @@ var ColorCard = function ColorCard(props) {
     onClick = props.onClick,
     onKeyDown = props.onKeyDown;
   var ref = useRef(null);
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
   var handleMouseDown = useCallback(function (event) {
     event.preventDefault();
   }, []);
@@ -52,19 +56,17 @@ var ColorCard = function ColorCard(props) {
   }, []);
   return jsx(Tooltip, {
     content: label
-  }, jsx("div", _extends({
+  }, jsx("div", {
     css: [sharedColorContainerStyles, (isTabbing === undefined || isTabbing) && colorCardOptionTabbingStyles, focused && !isTabbing && colorCardOptionFocusedStyles],
     onClick: handleClick,
     onMouseDown: handleMouseDown,
     onKeyDown: handleKeyDown,
     role: "radio",
-    "aria-checked": selected
-  }, !getBooleanFF('platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i') && {
-    'aria-label': label
-  }, {
+    "aria-checked": selected,
+    "aria-label": getBooleanFF('platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s') ? formatMessage(messages.colorCardRadioItemLabel) : label,
     tabIndex: 0,
     ref: ref
-  }), jsx("div", {
+  }, jsx("div", {
     css: colorCardWrapperStyles
   }, jsx("div", {
     css: colorCardContentStyles,
@@ -80,6 +82,7 @@ var ColorCard = function ColorCard(props) {
 };
 export default ColorCard;
 var colorCardOptionTabbingStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(B75, ")")
   }

package/dist/esm/components/ColorPaletteMenu.js

@@ -3,6 +3,7 @@ import { Mode } from '../types';
 import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
 import ColorCard from './ColorCard';
 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 { N0, N40 } from '@atlaskit/theme/colors';
 export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAnalytics(_ref) {
@@ -26,7 +27,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
         attributes: {
           componentName: 'color-picker',
           packageName: "@atlaskit/color-picker",
-          packageVersion: "3.2.15"
+          packageVersion: "3.2.17"
         }
       })(createAnalyticsEvent);
     }
@@ -41,13 +42,18 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
   var fullLabel = "".concat(label, ", ").concat(selectedValue.label, " selected");
   return jsx("div", {
     "aria-label": fullLabel,
-    role: "radiogroup",
+    role: "radiogroup"
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    ,
     css: [colorPaletteMenuStyles, mode === Mode.Standard && colorPaletteMenuStandardStyles],
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       width: "".concat(getWidth(cols, mode), "px")
     }
   }, jsx("div", {
-    css: [colorPaletteContainerStyles, mode === Mode.Compact && colorPaletteContainerCompactStyles]
+    css: [colorPaletteContainerStyles,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+    mode === Mode.Compact && colorPaletteContainerCompactStyles]
   }, options.map(function (_ref2) {
     var label = _ref2.label,
       value = _ref2.value;
@@ -68,7 +74,7 @@ export var ColorPaletteMenuWithoutAnalytics = function ColorPaletteMenuWithoutAn
 export default withAnalyticsContext({
   componentName: 'color-picker',
   packageName: "@atlaskit/color-picker",
-  packageVersion: "3.2.15"
+  packageVersion: "3.2.17"
 })(withAnalyticsEvents()(ColorPaletteMenuWithoutAnalytics));
 var colorCardWrapperStyles = css({
   display: 'flex',

package/dist/esm/components/ColorPicker.js

@@ -16,6 +16,7 @@ import * as components from './components';
 import { KEY_ARROW_DOWN, KEY_ARROW_UP, KEY_TAB } 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
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import messages from '../messages';
@@ -30,7 +31,7 @@ var defaultPopperProps = {
   placement: 'bottom-start'
 };
 var packageName = "@atlaskit/color-picker";
-var packageVersion = "3.2.15";
+var packageVersion = "3.2.17";
 var ColorPickerWithoutAnalyticsBase = /*#__PURE__*/function (_React$Component) {
   _inherits(ColorPickerWithoutAnalyticsBase, _React$Component);
   var _super = _createSuper(ColorPickerWithoutAnalyticsBase);

package/dist/esm/components/Trigger.js

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { useCallback } from 'react';
 import Tooltip from '@atlaskit/tooltip';
+// 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';
 var ColorCard = function ColorCard(_ref) {
@@ -65,9 +66,11 @@ var defaultColorContainerSize = css({
   height: "var(--ds-space-400, 32px)"
 });
 var colorCardButtonStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':hover': {
     borderColor: "var(--ds-background-neutral-subtle, ".concat(N0, ")")
   },
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   ':not(:focus):hover, :focus': {
     borderColor: "var(--ds-border-focused, ".concat(B100, ")"),
     outline: 'none'

package/dist/esm/components/components.js

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 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';
 export var MenuList = function MenuList(props) {
   var cols = props.selectProps.cols,
@@ -12,6 +13,7 @@ export var MenuList = function MenuList(props) {
     css: colorPaletteContainerStyles,
     role: "radiogroup",
     style: {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       maxWidth: cols ? getWidth(cols) : undefined
     },
     ref: innerRef

package/dist/esm/messages.js

@@ -4,5 +4,10 @@ export default defineMessages({
     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'
+  },
+  colorCardRadioItemLabel: {
+    id: 'jira.color-picker.src.color-card-radio-item-label',
+    defaultMessage: 'color option',
+    description: 'This text is used as aria-label text in color card component for radio item'
   }
 });

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

@@ -28,7 +28,7 @@ export interface Props {
     isDisabledSelectedSwatch?: boolean;
 }
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>; /** selected color */
 };
 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

@@ -4,5 +4,10 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    colorCardRadioItemLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;

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

@@ -28,7 +28,7 @@ export interface Props {
     isDisabledSelectedSwatch?: boolean;
 }
 export declare const ColorPickerWithoutAnalytics: React.FC<import("react-intl-next").WithIntlProps<Props & WrappedComponentProps>> & {
-    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>;
+    WrappedComponent: React.ComponentType<Props & WrappedComponentProps>; /** selected color */
 };
 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

@@ -4,5 +4,10 @@ declare const _default: {
         defaultMessage: string;
         description: string;
     };
+    colorCardRadioItemLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
 };
 export default _default;

package/docs/0-intro.tsx

@@ -17,6 +17,7 @@ const marginTopStyles = xcss({
 	marginBottom: 'space.100',
 });
 
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export default md`
 ${(
 	<>

package/package.json

@@ -1,84 +1,84 @@
 {
-  "name": "@atlaskit/color-picker",
-  "version": "3.2.15",
-  "description": "Jira Color Picker Component",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
-  "author": "Atlassian Pty Ltd",
-  "license": "Apache-2.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "module:es2019": "dist/es2019/index.js",
-  "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
-  "atlaskit:src": "src/index.ts",
-  "atlassian": {
-    "team": "AAIS: Chronos",
-    "releaseModel": "continuous",
-    "productPushConsumption": [
-      "jira"
-    ],
-    "website": {
-      "name": "Color Picker"
-    }
-  },
-  "dependencies": {
-    "@atlaskit/analytics-next": "^9.3.0",
-    "@atlaskit/icon": "^22.3.0",
-    "@atlaskit/platform-feature-flags": "^0.2.5",
-    "@atlaskit/select": "^17.10.0",
-    "@atlaskit/theme": "^12.9.0",
-    "@atlaskit/tokens": "^1.50.0",
-    "@atlaskit/tooltip": "^18.4.0",
-    "@babel/runtime": "^7.0.0",
-    "@emotion/react": "^11.7.1",
-    "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": "^7.0.0",
-    "@atlaskit/visual-regression": "*",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/user-event": "^14.4.3",
-    "ast-types": "^0.13.3",
-    "jscodeshift": "^0.13.0",
-    "react": "^16.8.0",
-    "typescript": "~5.4.2"
-  },
-  "keywords": [
-    "ui",
-    "color",
-    "picker",
-    "palette"
-  ],
-  "af:exports": {
-    "./ColorPaletteMenu": "./src/components/ColorPaletteMenu.tsx",
-    ".": "./src/index.ts"
-  },
-  "techstack": {
-    "@repo/internal": {
-      "design-tokens": [
-        "color",
-        "spacing"
-      ]
-    }
-  },
-  "platform-feature-flags": {
-    "platform.jca11y-1559-dashboard-view-dashboard-remove-duplicate-aria-label_g5i3i": {
-      "type": "boolean"
-    }
-  }
-}
+	"name": "@atlaskit/color-picker",
+	"version": "3.2.17",
+	"description": "Jira Color Picker Component",
+	"publishConfig": {
+		"registry": "https://registry.npmjs.org/"
+	},
+	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
+	"author": "Atlassian Pty Ltd",
+	"license": "Apache-2.0",
+	"main": "dist/cjs/index.js",
+	"module": "dist/esm/index.js",
+	"module:es2019": "dist/es2019/index.js",
+	"types": "dist/types/index.d.ts",
+	"typesVersions": {
+		">=4.5 <4.9": {
+			"*": [
+				"dist/types-ts4.5/*",
+				"dist/types-ts4.5/index.d.ts"
+			]
+		}
+	},
+	"atlaskit:src": "src/index.ts",
+	"atlassian": {
+		"team": "AAIS: Chronos",
+		"releaseModel": "continuous",
+		"productPushConsumption": [
+			"jira"
+		],
+		"website": {
+			"name": "Color Picker"
+		}
+	},
+	"dependencies": {
+		"@atlaskit/analytics-next": "^9.3.0",
+		"@atlaskit/icon": "^22.4.0",
+		"@atlaskit/platform-feature-flags": "^0.2.5",
+		"@atlaskit/select": "^17.11.0",
+		"@atlaskit/theme": "^12.10.0",
+		"@atlaskit/tokens": "^1.51.0",
+		"@atlaskit/tooltip": "^18.5.0",
+		"@babel/runtime": "^7.0.0",
+		"@emotion/react": "^11.7.1",
+		"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": "^7.4.0",
+		"@atlaskit/visual-regression": "*",
+		"@testing-library/react": "^12.1.5",
+		"@testing-library/user-event": "^14.4.3",
+		"ast-types": "^0.13.3",
+		"jscodeshift": "^0.13.0",
+		"react": "^16.8.0",
+		"typescript": "~5.4.2"
+	},
+	"keywords": [
+		"ui",
+		"color",
+		"picker",
+		"palette"
+	],
+	"af:exports": {
+		"./ColorPaletteMenu": "./src/components/ColorPaletteMenu.tsx",
+		".": "./src/index.ts"
+	},
+	"techstack": {
+		"@repo/internal": {
+			"design-tokens": [
+				"color",
+				"spacing"
+			]
+		}
+	},
+	"platform-feature-flags": {
+		"platform.jca11y-2997-remove-duplicate-screen-reader-announcements_fz13s": {
+			"type": "boolean"
+		}
+	}
+}