carbon-react 153.4.0 → 153.5.0

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

@@ -7,6 +7,7 @@ import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import Help from "../../components/help";
 import Typography from "../../components/typography";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import useLocale from "../../hooks/__internal__/useLocale";
 const Fieldset = ({
   legend,
   children,
@@ -32,6 +33,8 @@ const Fieldset = ({
   const marginProps = filterStyledSystemMarginProps(rest);
   const [ref, setRef] = useState(null);
   const [isFocused, setFocus] = useState(false);
+  const locale = useLocale();
+  const optionalLabel = locale.label.optional();
   useEffect(() => {
     if (ref && isRequired) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -90,6 +93,7 @@ const Fieldset = ({
   }), /*#__PURE__*/React.createElement(StyledLegendContent, {
     isRequired: isRequired,
     isOptional: isOptional,
+    optionalLabel: optionalLabel,
     isDisabled: isDisabled
   }, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/React.createElement(Typography, {
     screenReaderOnly: true,

package/esm/__internal__/fieldset/fieldset.style.d.ts

@@ -6,6 +6,7 @@ type StyledLegendContentProps = {
     isRequired?: boolean;
     isOptional?: boolean;
     isDisabled?: boolean;
+    optionalLabel?: string;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
 export type StyledLegendProps = {

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

@@ -35,10 +35,11 @@ const StyledLegendContent = styled.span`
     `}
 
   ${({
-  isOptional
+  isOptional,
+  optionalLabel
 }) => isOptional && css`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         color: var(--colorsUtilityYin055);
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);

package/esm/__internal__/label/label.component.js

@@ -6,6 +6,7 @@ import ValidationIcon from "../validations/validation-icon.component";
 import StyledIconWrapper from "./icon-wrapper.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 import createGuid from "../../__internal__/utils/helpers/guid";
+import useLocale from "../../hooks/__internal__/useLocale";
 const shouldDisplayValidationIcon = ({
   error,
   warning,
@@ -58,6 +59,8 @@ export const Label = ({
     onMouseLeave: onGroupMouseLeave
   } = useContext(InputGroupContext);
   const guid = useRef(createGuid());
+  const locale = useLocale();
+  const optionalLabel = locale.label.optional();
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
     if (onGroupMouseEnter) onGroupMouseEnter();
@@ -115,7 +118,8 @@ export const Label = ({
     optional: optional,
     pr: pr,
     pl: pl,
-    className: className
+    className: className,
+    optionalLabel: optionalLabel
   }, /*#__PURE__*/React.createElement(StyledLabel, _extends({
     "data-element": "label",
     disabled: disabled,

package/esm/__internal__/label/label.style.d.ts

@@ -20,6 +20,8 @@ export interface StyledLabelContainerProps {
     pl?: 1 | 2;
     /** Label width */
     width?: number;
+    /** Text used for the optional label */
+    optionalLabel?: string;
 }
 export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
 export default StyledLabel;

package/esm/__internal__/label/label.style.js

@@ -54,10 +54,11 @@ export const StyledLabelContainer = styled.div`
     `}
 
   ${({
-  optional
+  optional,
+  optionalLabel
 }) => optional && css`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);
         color: var(--colorsUtilityYin055);

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

@@ -4,6 +4,7 @@ import tagComponent from "../../__internal__/utils/helpers/tags";
 import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import useLocale from "../../hooks/__internal__/useLocale";
 export const Fieldset = ({
   children,
   legend,
@@ -16,6 +17,8 @@ export const Fieldset = ({
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
+  const locale = useLocale();
+  const optionalLabel = locale.label.optional();
   useEffect(() => {
     if (ref && required) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -29,7 +32,8 @@ export const Fieldset = ({
   }, rest, marginProps, tagComponent("fieldset", rest)), legend && /*#__PURE__*/React.createElement(StyledLegend, {
     "data-element": "legend",
     isRequired: required,
-    isOptional: isOptional
+    isOptional: isOptional,
+    optionalLabel: optionalLabel
   }, legend), children);
 };
 Fieldset.displayName = "Fieldset";

package/esm/components/fieldset/fieldset.style.d.ts

@@ -7,6 +7,8 @@ export interface StyledLegendProps {
     isRequired?: boolean;
     /** Flag to configure fields as optional. */
     isOptional?: boolean;
+    /** Text used for the optional label */
+    optionalLabel?: string;
 }
 declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
 export { FieldsetStyle, StyledLegend };

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

@@ -56,10 +56,11 @@ const StyledLegend = styled.legend`
     `}
 
   ${({
-  isOptional
+  isOptional,
+  optionalLabel
 }) => isOptional && css`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         color: var(--colorsUtilityYin055);
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);

package/esm/locales/de-de.js

@@ -82,6 +82,9 @@ const deDE = {
   heading: {
     backLinkAriaLabel: () => "Zurück"
   },
+  label: {
+    optional: () => "optional"
+  },
   link: {
     skipLinkLabel: () => "Zum Hauptinhalt springen"
   },

package/esm/locales/en-gb.js

@@ -86,6 +86,9 @@ const enGB = {
   heading: {
     backLinkAriaLabel: () => "Back"
   },
+  label: {
+    optional: () => "optional"
+  },
   link: {
     skipLinkLabel: () => "Skip to main content"
   },

package/esm/locales/es-es.js

@@ -83,6 +83,9 @@ const esES = {
   heading: {
     backLinkAriaLabel: () => "Volver"
   },
+  label: {
+    optional: () => "opcional"
+  },
   link: {
     skipLinkLabel: () => "Ir al contenido principal"
   },

package/esm/locales/fr-ca.js

@@ -83,6 +83,9 @@ const frCA = {
   heading: {
     backLinkAriaLabel: () => "Retour"
   },
+  label: {
+    optional: () => "facultatif"
+  },
   link: {
     skipLinkLabel: () => "Passer au contenu principal"
   },

package/esm/locales/fr-fr.js

@@ -83,6 +83,9 @@ const frFR = {
   heading: {
     backLinkAriaLabel: () => "Retour"
   },
+  label: {
+    optional: () => "facultatif"
+  },
   link: {
     skipLinkLabel: () => "Passer au contenu principal"
   },

package/esm/locales/locale.d.ts

@@ -69,6 +69,9 @@ interface Locale {
     heading: {
         backLinkAriaLabel: () => string;
     };
+    label: {
+        optional: () => string;
+    };
     link: {
         skipLinkLabel: () => string;
     };

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

@@ -12,6 +12,7 @@ var _inputBehaviour = require("../input-behaviour");
 var _help = _interopRequireDefault(require("../../components/help"));
 var _typography = _interopRequireDefault(require("../../components/typography"));
 var _utils = require("../../style/utils");
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
@@ -41,6 +42,8 @@ const Fieldset = ({
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const [ref, setRef] = (0, _react.useState)(null);
   const [isFocused, setFocus] = (0, _react.useState)(false);
+  const locale = (0, _useLocale.default)();
+  const optionalLabel = locale.label.optional();
   (0, _react.useEffect)(() => {
     if (ref && isRequired) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -99,6 +102,7 @@ const Fieldset = ({
   }), /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
     isRequired: isRequired,
     isOptional: isOptional,
+    optionalLabel: optionalLabel,
     isDisabled: isDisabled
   }, legend, !validationRedesignOptIn && tooltipIcon()))), !validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_typography.default, {
     screenReaderOnly: true,

package/lib/__internal__/fieldset/fieldset.style.d.ts

@@ -6,6 +6,7 @@ type StyledLegendContentProps = {
     isRequired?: boolean;
     isOptional?: boolean;
     isDisabled?: boolean;
+    optionalLabel?: string;
 };
 declare const StyledLegendContent: import("styled-components").StyledComponent<"span", any, StyledLegendContentProps, never>;
 export type StyledLegendProps = {

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

@@ -44,10 +44,11 @@ const StyledLegendContent = exports.StyledLegendContent = _styledComponents.defa
     `}
 
   ${({
-  isOptional
+  isOptional,
+  optionalLabel
 }) => isOptional && (0, _styledComponents.css)`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         color: var(--colorsUtilityYin055);
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);

package/lib/__internal__/label/label.component.js

@@ -11,6 +11,7 @@ var _validationIcon = _interopRequireDefault(require("../validations/validation-
 var _iconWrapper = _interopRequireDefault(require("./icon-wrapper.style"));
 var _inputBehaviour = require("../input-behaviour");
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
@@ -67,6 +68,8 @@ const Label = ({
     onMouseLeave: onGroupMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputGroupContext);
   const guid = (0, _react.useRef)((0, _guid.default)());
+  const locale = (0, _useLocale.default)();
+  const optionalLabel = locale.label.optional();
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
     if (onGroupMouseEnter) onGroupMouseEnter();
@@ -124,7 +127,8 @@ const Label = ({
     optional: optional,
     pr: pr,
     pl: pl,
-    className: className
+    className: className,
+    optionalLabel: optionalLabel
   }, /*#__PURE__*/_react.default.createElement(_label.default, _extends({
     "data-element": "label",
     disabled: disabled,

package/lib/__internal__/label/label.style.d.ts

@@ -20,6 +20,8 @@ export interface StyledLabelContainerProps {
     pl?: 1 | 2;
     /** Label width */
     width?: number;
+    /** Text used for the optional label */
+    optionalLabel?: string;
 }
 export declare const StyledLabelContainer: import("styled-components").StyledComponent<"div", any, StyledLabelContainerProps, never>;
 export default StyledLabel;

package/lib/__internal__/label/label.style.js

@@ -62,10 +62,11 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
     `}
 
   ${({
-  optional
+  optional,
+  optionalLabel
 }) => optional && (0, _styledComponents.css)`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);
         color: var(--colorsUtilityYin055);

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

@@ -9,6 +9,7 @@ var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tag
 var _fieldset = require("./fieldset.style");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 var _utils = require("../../style/utils");
+var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (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 && {}.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; }
@@ -25,6 +26,8 @@ const Fieldset = ({
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_newValidation.default);
+  const locale = (0, _useLocale.default)();
+  const optionalLabel = locale.label.optional();
   (0, _react.useEffect)(() => {
     if (ref && required) {
       Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
@@ -38,7 +41,8 @@ const Fieldset = ({
   }, rest, marginProps, (0, _tags.default)("fieldset", rest)), legend && /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {
     "data-element": "legend",
     isRequired: required,
-    isOptional: isOptional
+    isOptional: isOptional,
+    optionalLabel: optionalLabel
   }, legend), children);
 };
 exports.Fieldset = Fieldset;

package/lib/components/fieldset/fieldset.style.d.ts

@@ -7,6 +7,8 @@ export interface StyledLegendProps {
     isRequired?: boolean;
     /** Flag to configure fields as optional. */
     isOptional?: boolean;
+    /** Text used for the optional label */
+    optionalLabel?: string;
 }
 declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledLegendProps, never>;
 export { FieldsetStyle, StyledLegend };

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

@@ -65,10 +65,11 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
     `}
 
   ${({
-  isOptional
+  isOptional,
+  optionalLabel
 }) => isOptional && (0, _styledComponents.css)`
       ::after {
-        content: "(optional)";
+        content: "(${optionalLabel})";
         color: var(--colorsUtilityYin055);
         font-weight: var(--fontWeights400);
         margin-left: var(--spacing050);

package/lib/locales/de-de.js

@@ -88,6 +88,9 @@ const deDE = {
   heading: {
     backLinkAriaLabel: () => "Zurück"
   },
+  label: {
+    optional: () => "optional"
+  },
   link: {
     skipLinkLabel: () => "Zum Hauptinhalt springen"
   },

package/lib/locales/en-gb.js

@@ -92,6 +92,9 @@ const enGB = {
   heading: {
     backLinkAriaLabel: () => "Back"
   },
+  label: {
+    optional: () => "optional"
+  },
   link: {
     skipLinkLabel: () => "Skip to main content"
   },

package/lib/locales/es-es.js

@@ -89,6 +89,9 @@ const esES = {
   heading: {
     backLinkAriaLabel: () => "Volver"
   },
+  label: {
+    optional: () => "opcional"
+  },
   link: {
     skipLinkLabel: () => "Ir al contenido principal"
   },

package/lib/locales/fr-ca.js

@@ -89,6 +89,9 @@ const frCA = {
   heading: {
     backLinkAriaLabel: () => "Retour"
   },
+  label: {
+    optional: () => "facultatif"
+  },
   link: {
     skipLinkLabel: () => "Passer au contenu principal"
   },

package/lib/locales/fr-fr.js

@@ -89,6 +89,9 @@ const frFR = {
   heading: {
     backLinkAriaLabel: () => "Retour"
   },
+  label: {
+    optional: () => "facultatif"
+  },
   link: {
     skipLinkLabel: () => "Passer au contenu principal"
   },

package/lib/locales/locale.d.ts

@@ -69,6 +69,9 @@ interface Locale {
     heading: {
         backLinkAriaLabel: () => string;
     };
+    label: {
+        optional: () => string;
+    };
     link: {
         skipLinkLabel: () => string;
     };

package/package.json

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