carbon-react 117.2.0 → 117.2.2

package/esm/__internal__/fieldset/fieldset.component.js

@@ -25,9 +25,8 @@ const Fieldset = ({
   return /*#__PURE__*/React.createElement(InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
   }, /*#__PURE__*/React.createElement(StyledFieldset, _extends({
-    "data-component": "fieldset",
-    m: 0
-  }, marginProps, rest), legend && /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
+    "data-component": "fieldset"
+  }, rest, marginProps), legend && /*#__PURE__*/React.createElement(InputGroupContext.Consumer, null, ({
     onMouseEnter,
     onMouseLeave
   }) => /*#__PURE__*/React.createElement(StyledLegend, {

package/esm/__internal__/fieldset/fieldset.style.js

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 const StyledFieldset = styled.fieldset`
+  margin: 0;
   ${margin}
   border: none;
   padding: 0;

package/esm/components/advanced-color-picker/advanced-color-picker.component.js

@@ -2,10 +2,13 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React, { useState, useEffect, useCallback, useRef } from "react";
 import PropTypes from "prop-types";
-import { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle } from "./advanced-color-picker.style";
+import { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle } from "./advanced-color-picker.style";
 import { SimpleColorPicker, SimpleColor } from "../simple-color-picker";
 import Events from "../../__internal__/utils/helpers/events";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import guid from "../../__internal__/utils/helpers/guid";
+import useLocale from "../../hooks/__internal__/useLocale";
+import { Dt, Dd } from "../definition-list";
 
 const AdvancedColorPicker = ({
   "aria-describedby": ariaDescribedBy,
@@ -26,6 +29,8 @@ const AdvancedColorPicker = ({
   const [dialogOpen, setDialogOpen] = useState();
   const currentColor = selectedColor || defaultColor;
   const [selectedColorRef, setSelectedColorRef] = useState(null);
+  const descriptionId = useRef(guid());
+  const l = useLocale();
   const simpleColorPickerData = useRef(null);
   const colors = availableColors.map(({
     value,
@@ -41,6 +46,14 @@ const AdvancedColorPicker = ({
       simpleColorPickerData.current ? simpleColorPickerData.current.gridItemRefs[index] : null
     };
   });
+
+  const currentSelectedColor = () => {
+    var _availableColors$find;
+
+    const returnedColor = (_availableColors$find = availableColors.find(color => color.value === currentColor)) === null || _availableColors$find === void 0 ? void 0 : _availableColors$find.label;
+    return returnedColor || currentColor;
+  };
+
   useEffect(() => {
     if (dialogOpen || open) {
       const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => currentColor === c.value);
@@ -114,11 +127,16 @@ const AdvancedColorPicker = ({
     m: "15px auto auto 15px"
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
+    "aria-label": l.advancedColorPicker.ariaLabel(),
+    "aria-describedby": descriptionId.current,
     onClick: handleOnOpen,
     onKeyDown: handleOnKeyDown,
     color: currentColor,
     tabIndex: 0
-  }), /*#__PURE__*/React.createElement(DialogStyle, {
+  }), /*#__PURE__*/React.createElement(HiddenCurrentColorList, {
+    id: descriptionId.current,
+    "data-element": "current-color-description"
+  }, /*#__PURE__*/React.createElement(Dt, null, l.advancedColorPicker.currentColorDescriptionTerm(currentSelectedColor())), /*#__PURE__*/React.createElement(Dd, null, l.advancedColorPicker.currentColorAssigned(currentSelectedColor()))), /*#__PURE__*/React.createElement(DialogStyle, {
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,

package/esm/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 declare const StyledAdvancedColorPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+declare const HiddenCurrentColorList: import("styled-components").StyledComponent<{
+    ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: import("../definition-list").DlProps): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => JSX.Element, any, {}, never>;
-export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };
+export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

package/esm/components/advanced-color-picker/advanced-color-picker.style.js

@@ -8,10 +8,17 @@ import Dialog from "../dialog/dialog.component";
 import StyledIconButton from "../icon-button/icon-button.style";
 import checkerBoardSvg from "../simple-color-picker/simple-color/checker-board.svg";
 import baseTheme from "../../style/themes/base";
+import visuallyHiddenStyles from "../../style/utils/visually-hidden";
+import { Dl } from "../definition-list";
 const StyledAdvancedColorPickerWrapper = styled.div`
   ${margin}
   display: inline-block;
 `;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+
+const HiddenCurrentColorList = styled(Dl)`
+  ${visuallyHiddenStyles}
+`;
 StyledAdvancedColorPickerWrapper.defaultProps = {
   theme: baseTheme
 };
@@ -75,4 +82,4 @@ const DialogStyle = styled(Dialog)`
     color: var(--colorsActionMinor500);
   }
 `;
-export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle };
+export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle };

package/esm/components/definition-list/dl.component.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
 export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+    /** HTML id attribute of the input */
+    id?: string;
     /** prop to render children. */
     children: React.ReactNode;
 }

package/esm/components/definition-list/dl.component.js

@@ -75,6 +75,7 @@ Dl.propTypes = {
   "children": PropTypes.node,
   "ddTextAlign": PropTypes.oneOf(["center", "left", "right"]),
   "dtTextAlign": PropTypes.oneOf(["center", "left", "right"]),
+  "id": PropTypes.string,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
     "__@toStringTag": PropTypes.string.isRequired,
     "description": PropTypes.string,

package/esm/components/fieldset/fieldset.component.js

@@ -29,9 +29,7 @@ const Fieldset = ({
     value: {
       validationRedesignOptIn: false
     }
-  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", rest), rest, {
-    m: 0
-  }, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
+  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", rest), rest, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: inline
   }, getLegend(), /*#__PURE__*/React.createElement(FormSpacingProvider, {

package/esm/components/fieldset/fieldset.style.js

@@ -6,6 +6,7 @@ import StyledIcon from "../icon/icon.style";
 import baseTheme from "../../style/themes/base";
 import CheckboxStyle from "../checkbox/checkbox.style";
 const FieldsetStyle = styled.fieldset`
+  margin: 0;
   ${margin}
   border: none;
   padding: 0;

package/esm/components/i18n-provider/i18n-provider.component.js

@@ -21,6 +21,11 @@ I18nProvider.propTypes = {
       "delete": PropTypes.func.isRequired,
       "edit": PropTypes.func.isRequired
     }),
+    "advancedColorPicker": PropTypes.shape({
+      "ariaLabel": PropTypes.func.isRequired,
+      "currentColorAssigned": PropTypes.func.isRequired,
+      "currentColorDescriptionTerm": PropTypes.func.isRequired
+    }),
     "batchSelection": PropTypes.shape({
       "selected": PropTypes.func.isRequired
     }),

package/esm/locales/en-gb.js

@@ -11,6 +11,11 @@ const enGB = {
   actionPopover: {
     ariaLabel: () => "actions"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Change colour",
+    currentColorDescriptionTerm: () => "Current color assigned: ",
+    currentColorAssigned: currentColor => currentColor
+  },
   batchSelection: {
     selected: count => `${count} selected`
   },

package/esm/locales/locale.d.ts

@@ -8,6 +8,11 @@ interface Locale {
     actionPopover: {
         ariaLabel: () => string;
     };
+    advancedColorPicker: {
+        ariaLabel: () => string;
+        currentColorDescriptionTerm: (currentColor: string) => string;
+        currentColorAssigned: (currentColor: string) => string;
+    };
     batchSelection: {
         selected: (count: number | string) => string;
     };

package/esm/locales/pl-pl.js

@@ -13,6 +13,47 @@ export const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive,
 
   return pluralGenitive;
 };
+
+const translateColor = color => {
+  switch (color.toLowerCase()) {
+    case "white":
+      return "biały";
+
+    case "transparent":
+      return "przezroczysty";
+
+    case "black":
+      return "czarny";
+
+    case "blue":
+      return "niebieski";
+
+    case "pink":
+      return "różowy";
+
+    case "purple":
+      return "fioletowy";
+
+    case "goldenrod":
+      return "złoty";
+
+    case "orchid":
+      return "ciemny róż";
+
+    case "desert":
+      return "pustynny";
+
+    case "turquoise":
+      return "turkusowy";
+
+    case "mint":
+      return "miętowy";
+
+    default:
+      return color;
+  }
+};
+
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -22,6 +63,11 @@ const plPL = {
   actionPopover: {
     ariaLabel: () => "akcje"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Zmień kolor",
+    currentColorDescriptionTerm: currentColor => translateColor(currentColor) === "biały" ? "Aktualny przypisany kolor: " : "Aktualnie przypisany kolor: ",
+    currentColorAssigned: currentColor => translateColor(currentColor)
+  },
   batchSelection: {
     selected: count => `${count} wybrano`
   },

package/esm/style/utils/visually-hidden.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").FlattenSimpleInterpolation;
+export default _default;

package/esm/style/utils/visually-hidden.js

@@ -0,0 +1,10 @@
+import { css } from "styled-components";
+export default css`
+  border: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;

package/lib/__internal__/fieldset/fieldset.component.js

@@ -39,9 +39,8 @@ const Fieldset = ({
   return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
   }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledFieldset, _extends({
-    "data-component": "fieldset",
-    m: 0
-  }, marginProps, rest), legend && /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupContext.Consumer, null, ({
+    "data-component": "fieldset"
+  }, rest, marginProps), legend && /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupContext.Consumer, null, ({
     onMouseEnter,
     onMouseLeave
   }) => /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {

package/lib/__internal__/fieldset/fieldset.style.js

@@ -18,6 +18,7 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const StyledFieldset = _styledComponents.default.fieldset`
+  margin: 0;
   ${_styledSystem.margin}
   border: none;
   padding: 0;

package/lib/components/advanced-color-picker/advanced-color-picker.component.js

@@ -17,6 +17,12 @@ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/e
 
 var _utils = require("../../style/utils");
 
+var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+
+var _definitionList = require("../definition-list");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -44,6 +50,8 @@ const AdvancedColorPicker = ({
   const [dialogOpen, setDialogOpen] = (0, _react.useState)();
   const currentColor = selectedColor || defaultColor;
   const [selectedColorRef, setSelectedColorRef] = (0, _react.useState)(null);
+  const descriptionId = (0, _react.useRef)((0, _guid.default)());
+  const l = (0, _useLocale.default)();
   const simpleColorPickerData = (0, _react.useRef)(null);
   const colors = availableColors.map(({
     value,
@@ -59,6 +67,14 @@ const AdvancedColorPicker = ({
       simpleColorPickerData.current ? simpleColorPickerData.current.gridItemRefs[index] : null
     };
   });
+
+  const currentSelectedColor = () => {
+    var _availableColors$find;
+
+    const returnedColor = (_availableColors$find = availableColors.find(color => color.value === currentColor)) === null || _availableColors$find === void 0 ? void 0 : _availableColors$find.label;
+    return returnedColor || currentColor;
+  };
+
   (0, _react.useEffect)(() => {
     if (dialogOpen || open) {
       const newColor = colors === null || colors === void 0 ? void 0 : colors.find(c => currentColor === c.value);
@@ -132,11 +148,16 @@ const AdvancedColorPicker = ({
     m: "15px auto auto 15px"
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.StyledAdvancedColorPickerCell, {
     "data-element": "color-picker-cell",
+    "aria-label": l.advancedColorPicker.ariaLabel(),
+    "aria-describedby": descriptionId.current,
     onClick: handleOnOpen,
     onKeyDown: handleOnKeyDown,
     color: currentColor,
     tabIndex: 0
-  }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.DialogStyle, {
+  }), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.HiddenCurrentColorList, {
+    id: descriptionId.current,
+    "data-element": "current-color-description"
+  }, /*#__PURE__*/_react.default.createElement(_definitionList.Dt, null, l.advancedColorPicker.currentColorDescriptionTerm(currentSelectedColor())), /*#__PURE__*/_react.default.createElement(_definitionList.Dd, null, l.advancedColorPicker.currentColorAssigned(currentSelectedColor()))), /*#__PURE__*/_react.default.createElement(_advancedColorPicker.DialogStyle, {
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,

package/lib/components/advanced-color-picker/advanced-color-picker.style.d.ts

@@ -1,6 +1,11 @@
 /// <reference types="react" />
 import StyledAdvancedColorPickerCell from "./advanced-color-picker-cell.style";
 declare const StyledAdvancedColorPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+declare const HiddenCurrentColorList: import("styled-components").StyledComponent<{
+    ({ children, w, dtTextAlign, ddTextAlign, asSingleColumn, ...rest }: import("../definition-list").DlProps): JSX.Element;
+    displayName: string;
+}, any, {}, never>;
 declare const StyledAdvancedColorPickerPreview: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const DialogStyle: import("styled-components").StyledComponent<({ className, children, open, height, size, title, disableEscKey, subtitle, disableAutoFocus, focusFirstElement, focusableSelectors, onCancel, showCloseIcon, bespokeFocusTrap, disableClose, help, role, contentPadding, focusableContainers, ...rest }: import("../dialog/dialog.component").DialogProps) => JSX.Element, any, {}, never>;
-export { StyledAdvancedColorPickerWrapper, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };
+export { StyledAdvancedColorPickerWrapper, HiddenCurrentColorList, StyledAdvancedColorPickerCell, StyledAdvancedColorPickerPreview, DialogStyle, };

package/lib/components/advanced-color-picker/advanced-color-picker.style.js

@@ -9,7 +9,7 @@ Object.defineProperty(exports, "StyledAdvancedColorPickerCell", {
     return _advancedColorPickerCell.default;
   }
 });
-exports.DialogStyle = exports.StyledAdvancedColorPickerPreview = exports.StyledAdvancedColorPickerWrapper = void 0;
+exports.DialogStyle = exports.StyledAdvancedColorPickerPreview = exports.HiddenCurrentColorList = exports.StyledAdvancedColorPickerWrapper = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -31,6 +31,10 @@ var _checkerBoard = _interopRequireDefault(require("../simple-color-picker/simpl
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
+var _visuallyHidden = _interopRequireDefault(require("../../style/utils/visually-hidden"));
+
+var _definitionList = require("../definition-list");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -41,7 +45,13 @@ const StyledAdvancedColorPickerWrapper = _styledComponents.default.div`
   ${_styledSystem.margin}
   display: inline-block;
 `;
+/** To be replaced by accessibly hidden class added in FE-5503 */
+
 exports.StyledAdvancedColorPickerWrapper = StyledAdvancedColorPickerWrapper;
+const HiddenCurrentColorList = (0, _styledComponents.default)(_definitionList.Dl)`
+  ${_visuallyHidden.default}
+`;
+exports.HiddenCurrentColorList = HiddenCurrentColorList;
 StyledAdvancedColorPickerWrapper.defaultProps = {
   theme: _base.default
 };

package/lib/components/definition-list/dl.component.d.ts

@@ -2,6 +2,8 @@ import React from "react";
 import { SpaceProps } from "styled-system";
 import { StyledDtDivProps, StyledDdDivProps, StyledDlProps } from "./definition-list.style";
 export interface DlProps extends SpaceProps, StyledDlProps, StyledDtDivProps, StyledDdDivProps {
+    /** HTML id attribute of the input */
+    id?: string;
     /** prop to render children. */
     children: React.ReactNode;
 }

package/lib/components/definition-list/dl.component.js

@@ -94,6 +94,7 @@ Dl.propTypes = {
   "children": _propTypes.default.node,
   "ddTextAlign": _propTypes.default.oneOf(["center", "left", "right"]),
   "dtTextAlign": _propTypes.default.oneOf(["center", "left", "right"]),
+  "id": _propTypes.default.string,
   "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({
     "__@toStringTag": _propTypes.default.string.isRequired,
     "description": _propTypes.default.string,

package/lib/components/fieldset/fieldset.component.js

@@ -44,9 +44,7 @@ const Fieldset = ({
     value: {
       validationRedesignOptIn: false
     }
-  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", rest), rest, {
-    m: 0
-  }, marginProps), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
+  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", rest), rest, marginProps), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: inline
   }, getLegend(), /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {

package/lib/components/fieldset/fieldset.style.js

@@ -22,6 +22,7 @@ var _checkbox = _interopRequireDefault(require("../checkbox/checkbox.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const FieldsetStyle = _styledComponents.default.fieldset`
+  margin: 0;
   ${_styledSystem.margin}
   border: none;
   padding: 0;

package/lib/components/i18n-provider/i18n-provider.component.js

@@ -35,6 +35,11 @@ I18nProvider.propTypes = {
       "delete": _propTypes.default.func.isRequired,
       "edit": _propTypes.default.func.isRequired
     }),
+    "advancedColorPicker": _propTypes.default.shape({
+      "ariaLabel": _propTypes.default.func.isRequired,
+      "currentColorAssigned": _propTypes.default.func.isRequired,
+      "currentColorDescriptionTerm": _propTypes.default.func.isRequired
+    }),
     "batchSelection": _propTypes.default.shape({
       "selected": _propTypes.default.func.isRequired
     }),

package/lib/locales/en-gb.js

@@ -18,6 +18,11 @@ const enGB = {
   actionPopover: {
     ariaLabel: () => "actions"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Change colour",
+    currentColorDescriptionTerm: () => "Current color assigned: ",
+    currentColorAssigned: currentColor => currentColor
+  },
   batchSelection: {
     selected: count => `${count} selected`
   },

package/lib/locales/locale.d.ts

@@ -8,6 +8,11 @@ interface Locale {
     actionPopover: {
         ariaLabel: () => string;
     };
+    advancedColorPicker: {
+        ariaLabel: () => string;
+        currentColorDescriptionTerm: (currentColor: string) => string;
+        currentColorAssigned: (currentColor: string) => string;
+    };
     batchSelection: {
         selected: (count: number | string) => string;
     };

package/lib/locales/pl-pl.js

@@ -22,6 +22,47 @@ const PolishPlural = (singularNominativ, pluralNominativ, pluralGenitive, value)
 };
 
 exports.PolishPlurals = exports.PolishPlural = PolishPlural;
+
+const translateColor = color => {
+  switch (color.toLowerCase()) {
+    case "white":
+      return "biały";
+
+    case "transparent":
+      return "przezroczysty";
+
+    case "black":
+      return "czarny";
+
+    case "blue":
+      return "niebieski";
+
+    case "pink":
+      return "różowy";
+
+    case "purple":
+      return "fioletowy";
+
+    case "goldenrod":
+      return "złoty";
+
+    case "orchid":
+      return "ciemny róż";
+
+    case "desert":
+      return "pustynny";
+
+    case "turquoise":
+      return "turkusowy";
+
+    case "mint":
+      return "miętowy";
+
+    default:
+      return color;
+  }
+};
+
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -31,6 +72,11 @@ const plPL = {
   actionPopover: {
     ariaLabel: () => "akcje"
   },
+  advancedColorPicker: {
+    ariaLabel: () => "Zmień kolor",
+    currentColorDescriptionTerm: currentColor => translateColor(currentColor) === "biały" ? "Aktualny przypisany kolor: " : "Aktualnie przypisany kolor: ",
+    currentColorAssigned: currentColor => translateColor(currentColor)
+  },
   batchSelection: {
     selected: count => `${count} wybrano`
   },

package/lib/style/utils/visually-hidden.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("styled-components").FlattenSimpleInterpolation;
+export default _default;

package/lib/style/utils/visually-hidden.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = require("styled-components");
+
+var _default = (0, _styledComponents.css)`
+  border: 0;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+`;
+
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "117.2.0",
+  "version": "117.2.2",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",