carbon-react 128.1.2 → 128.3.0

package/esm/__internal__/checkable-input/checkable-input.component.d.ts

@@ -27,6 +27,8 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     labelWidth?: number;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** If true the label switches position with the input */
     reverse?: boolean;
     /** Size of the component */

package/esm/__internal__/checkable-input/checkable-input.component.js

@@ -32,6 +32,7 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
   onChange,
   onFocus,
   required,
+  isOptional,
   reverse = false,
   validationOnLabel,
   warning,
@@ -53,7 +54,6 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     label,
     fieldHelp
   });
-  const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
     loading,
@@ -74,7 +74,8 @@ const CheckableInput = /*#__PURE__*/React.forwardRef(({
     validationIconId: validationId,
     // We don't want an asterisk on each radio control, only the legend
     // However, we still want the input element to receive the required prop
-    isRequired: isRadio ? undefined : required,
+    isRequired: required,
+    isOptional,
     useValidationIcon: validationOnLabel
   };
   const inputProps = {
@@ -203,6 +204,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputMode": PropTypes.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

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

@@ -26,11 +26,10 @@ const StyledLegendContent = styled.span`
         content: "*";
         line-height: 24px;
         color: var(--colorsSemanticNegative500);
-        font-weight: 700;
-        margin-left: var(--spacing100);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing050);
         position: relative;
         top: 1px;
-        left: -4px;
       }
     `}
 
@@ -39,8 +38,9 @@ const StyledLegendContent = styled.span`
 }) => isOptional && css`
       ::after {
         content: "(optional)";
-        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400) - FE-6022
-        margin-left: 4px;
+        color: var(--colorsUtilityYin055);
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
       }
     `}
 
@@ -58,7 +58,8 @@ const StyledLegend = styled.legend`
   align-items: center;
   margin-bottom: var(--spacing100);
   padding: 0;
-  font-weight: 600;
+  font-weight: var(--fontWeights700);
+  color: var(--colorsUtilityYin090);
   ${({
   inline,
   width,

package/esm/__internal__/form-field/form-field.component.d.ts

@@ -53,7 +53,7 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     fieldHelpInline?: boolean;
     /** Id of the element a label should be bound to */
     id: string;
-    /** [Legacy] Flag to configure component as optional in Form */
+    /** Flag to configure component as optional in Form */
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;

package/esm/__internal__/form-field/form-field.component.js

@@ -50,6 +50,7 @@ const FormField = ({
     return Object.keys(validationProps).find(propName => validationProps[propName]);
   }, [error, warning, info, disabled]);
   !(invalidValidationProp === undefined) ? process.env.NODE_ENV !== "production" ? invariant(false, `Prop \`${invalidValidationProp}\` cannot be used in conjunction with \`disabled\`. ` + "Use `readOnly` if you require users to see validations with a non-interactive field") : invariant(false) : void 0;
+  !!(isRequired && isOptional) ? process.env.NODE_ENV !== "production" ? invariant(false, "an input cannot be set to both required and optional at the same time") : invariant(false) : void 0;
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let inlineLabel = labelInline;
   if (adaptiveLabelBreakpoint) {

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

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 const StyledLabel = styled.label`
   color: var(--colorsUtilityYin090);
   display: block;
-  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
+  font-weight: var(--fontWeights700);
 
   ${({
   isRequired
@@ -10,8 +10,8 @@ const StyledLabel = styled.label`
       ::after {
         content: "*";
         color: var(--colorsSemanticNegative500);
-        font-weight: 700;
-        margin-left: var(--spacing100);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing050);
       }
     `}
 
@@ -51,8 +51,9 @@ export const StyledLabelContainer = styled.div`
 }) => optional && css`
       ::after {
         content: "(optional)";
-        font-weight: 350; //TODO: (tokens) use token var(--fontWeights400)
-        margin-left: 4px;
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
+        color: var(--colorsUtilityYin055);
       }
     `}
 `;

package/esm/components/checkbox/checkbox-group/checkbox-group.component.d.ts

@@ -20,6 +20,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** When true, Checkboxes are in line */

package/esm/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -23,6 +23,7 @@ export const CheckboxGroup = props => {
     warning,
     info,
     required,
+    isOptional,
     legendInline,
     legendWidth,
     legendAlign,
@@ -40,7 +41,8 @@ export const CheckboxGroup = props => {
     error: error,
     warning: warning,
     info: info,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {
     blockGroupBehaviour: !(error || warning)
   }, filterStyledSystemMarginProps(props)), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
@@ -73,7 +75,8 @@ export const CheckboxGroup = props => {
     error: error,
     warning: warning,
     info: info,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, tagComponent("checkboxgroup", props), {
     blockGroupBehaviour: !(error || warning || info)
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(StyledCheckboxGroup, {

package/esm/components/checkbox/checkbox.component.js

@@ -30,6 +30,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
   labelWidth,
   adaptiveSpacingBreakpoint,
   required,
+  isOptional,
   error,
   warning,
   info,
@@ -84,6 +85,7 @@ const Checkbox = /*#__PURE__*/React.forwardRef(({
     labelHelp,
     labelSpacing,
     required,
+    isOptional,
     fieldHelpInline,
     checked,
     disabled,
@@ -225,6 +227,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/date-range/date-range.component.d.ts

@@ -80,9 +80,13 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     validationOnLabel?: boolean;
     /** Overrides the default tooltip position */
     tooltipPosition?: "top" | "bottom" | "left" | "right";
+    /** Flag to configure component as mandatory. */
+    required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare const DateRange: {
-    ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, ...rest }: DateRangeProps): React.JSX.Element;
+    ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;
     displayName: string;
 };
 export default DateRange;

package/esm/components/date-range/date-range.component.js

@@ -24,6 +24,8 @@ export const DateRange = ({
   value,
   startRef,
   endRef,
+  required,
+  isOptional,
   ...rest
 }) => {
   const l = useLocale();
@@ -186,7 +188,9 @@ export const DateRange = ({
       onBlur: handleOnBlur,
       onChange: onChangeCallback,
       onKeyDown: ev => handleOnKeyDown(ev, propsKey),
-      ...props
+      ...props,
+      required,
+      isOptional
     };
   };
   return /*#__PURE__*/React.createElement(StyledDateRange, _extends({}, tagComponent("date-range", rest), {

package/esm/components/decimal/decimal.component.d.ts

@@ -33,8 +33,6 @@ export interface DecimalProps extends Omit<CommonTextboxProps, "onChange" | "onB
     precision?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
     /** If true, the component will be read-only */
     readOnly?: boolean;
-    /** Flag to configure component as mandatory */
-    required?: boolean;
     /** The value of the input if it's used as a controlled component */
     value?: string;
     /** The locale string - default en */

package/esm/components/decimal/decimal.component.js

@@ -20,7 +20,6 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
   id,
   name,
   allowEmptyValue = false,
-  required,
   locale,
   value,
   inputRef,
@@ -177,7 +176,6 @@ const Decimal = /*#__PURE__*/React.forwardRef(({
     onKeyPress: onKeyPress,
     align: align,
     readOnly: readOnly,
-    required: required,
     inputWidth: inputWidth,
     onChange: handleOnChange,
     onBlur: handleOnBlur,
@@ -304,6 +302,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputRef": PropTypes.func,
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

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

@@ -1,14 +1,19 @@
 import React from "react";
 import { MarginProps } from "styled-system";
-import { StyledFieldsetProps } from "./fieldset.style";
-export interface FieldsetProps extends StyledFieldsetProps, MarginProps {
+export interface FieldsetProps extends MarginProps {
+    /** When true, legend is placed in line with the children */
+    inline?: boolean;
     /** Child elements */
     children?: React.ReactNode;
     /** The text for the fieldsets legend element. */
     legend?: string;
+    /** Flag to configure fields as mandatory. */
+    required?: boolean;
+    /** Flag to configure fields as optional. */
+    isOptional?: boolean;
 }
 export declare const Fieldset: {
-    ({ children, inline, legend, ...rest }: FieldsetProps): React.JSX.Element;
+    ({ children, inline, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
     displayName: string;
 };
 export default Fieldset;

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
+import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
@@ -10,11 +10,16 @@ export const Fieldset = ({
   children,
   inline = false,
   legend,
+  required,
+  isOptional,
   ...rest
 }) => {
+  const [ref, setRef] = useState(null);
   const getLegend = () => {
     if (!legend) return null;
     return /*#__PURE__*/React.createElement(LegendContainerStyle, {
+      isRequired: required,
+      isOptional: isOptional,
       inline: inline,
       "data-component": "legend-style"
     }, /*#__PURE__*/React.createElement("legend", {
@@ -22,11 +27,20 @@ export const Fieldset = ({
     }, legend));
   };
   const marginProps = useFormSpacing(rest);
+  useEffect(() => {
+    if (ref && required) {
+      Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
+        el.setAttribute("required", "");
+      });
+    }
+  }, [ref, required]);
   return /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
     value: {
       validationRedesignOptIn: false
     }
-  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", rest), rest, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
+  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({
+    ref: setRef
+  }, 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.d.ts

@@ -1,6 +1,10 @@
 export interface StyledFieldsetProps {
     /** When true, legend is placed in line with the children */
     inline?: boolean;
+    /** Flag to configure fields as mandatory. */
+    isRequired?: boolean;
+    /** Flag to configure fields as optional. */
+    isOptional?: boolean;
 }
 declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
 declare const LegendContainerStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;

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

@@ -1,4 +1,4 @@
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import FormFieldStyle from "../../__internal__/form-field/form-field.style";
 import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
@@ -37,9 +37,36 @@ const LegendContainerStyle = styled.div`
 
   legend {
     font-size: 20px;
-    font-weight: 600;
+    font-weight: var(--fontWeights700);
+    color: var(--colorsUtilityYin090);
     line-height: 24px;
     margin-right: 4px;
+
+    ${({
+  isRequired
+}) => isRequired && css`
+        ::after {
+          content: "*";
+          line-height: 24px;
+          color: var(--colorsSemanticNegative500);
+          font-weight: var(--fontWeights700);
+          margin-left: var(--spacing100);
+          position: relative;
+          top: 1px;
+          left: -4px;
+        }
+      `}
+
+    ${({
+  isOptional
+}) => isOptional && css`
+        ::after {
+          content: "(optional)";
+          color: var(--colorsUtilityYin055);
+          font-weight: var(--fontWeights400);
+          margin-left: var(--spacing050);
+        }
+      `}
   }
 
   ${ValidationIconStyle} ${StyledIcon}:focus {

package/esm/components/file-input/file-input.component.d.ts

@@ -31,6 +31,10 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     onChange: (files: FileList) => void;
     /** used to control how to display the progress of uploaded file(s) within the component */
     uploadStatus?: FileUploadStatusProps | FileUploadStatusProps[];
+    /** Flag to configure component as mandatory. */
+    required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
 export default FileInput;

package/esm/components/file-input/file-input.component.js

@@ -32,6 +32,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
   name,
   onChange,
   required,
+  isOptional,
   uploadStatus = [],
   ...rest
 }, ref) => {
@@ -149,6 +150,7 @@ const FileInput = /*#__PURE__*/React.forwardRef(({
     labelId: labelId,
     id: uniqueId,
     isRequired: required,
+    isOptional: isOptional,
     "data-component": "file-input",
     "data-role": dataRole,
     "data-element": dataElement,
@@ -170,6 +172,7 @@ if (process.env.NODE_ENV !== "production") {
     "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     "id": PropTypes.string,
     "inputHint": PropTypes.node,
+    "isOptional": PropTypes.bool,
     "isVertical": PropTypes.bool,
     "label": PropTypes.string,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/form/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from "./form.component";
 export type { FormProps } from "./form.component";
+export { default as RequiredFieldsIndicator } from "./required-fields-indicator";

package/esm/components/form/index.js

@@ -1 +1,2 @@
-export { default } from "./form.component";
+export { default } from "./form.component";
+export { default as RequiredFieldsIndicator } from "./required-fields-indicator";

package/esm/components/form/required-fields-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./required-fields-indicator.component";

package/esm/components/form/required-fields-indicator/index.js

@@ -0,0 +1 @@
+export { default } from "./required-fields-indicator.component";

package/esm/components/form/required-fields-indicator/required-fields-indicator.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface RequiredIndicatorProps extends MarginProps {
+    children: React.ReactNode;
+}
+declare const _default: ({ children, ...rest }: RequiredIndicatorProps) => React.JSX.Element;
+export default _default;

package/esm/components/form/required-fields-indicator/required-fields-indicator.component.js

@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import Box from "../../box";
+import StyledTypography from "../../typography/typography.style";
+const StyledIndicatorContainer = styled(Box)`
+  ${StyledTypography} {
+    color: var(--colorsUtilityYin090);
+  }
+  ::after {
+    content: "*";
+    color: var(--colorsSemanticNegative500);
+    font-weight: 700;
+    margin-left: var(--spacing050);
+  }
+`;
+export default (({
+  children,
+  ...rest
+}) => /*#__PURE__*/React.createElement(StyledIndicatorContainer, rest, children));

package/esm/components/inline-inputs/inline-inputs.component.d.ts

@@ -21,9 +21,11 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelId?: string;
     /** Flag to configure component as mandatory. */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 declare const InlineInputs: {
-    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, ...rest }: InlineInputsProps): React.JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, labelAlign, labelId, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, isOptional, ...rest }: InlineInputsProps): React.JSX.Element;
     displayName: string;
 };
 export default InlineInputs;

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React from "react";
+import React, { useRef, useEffect } from "react";
 import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
@@ -27,9 +27,11 @@ const InlineInputs = ({
   labelInline = true,
   labelWidth,
   required,
+  isOptional,
   ...rest
 }) => {
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
+  const ref = useRef(null);
   let inlineLabel = labelInline;
   if (adaptiveLabelBreakpoint) {
     inlineLabel = largeScreen;
@@ -41,16 +43,24 @@ const InlineInputs = ({
       labelId: labelId,
       inline: inlineLabel,
       htmlFor: htmlFor,
-      isRequired: required
+      isRequired: required,
+      optional: isOptional
     }, label);
   }
   const marginProps = useFormSpacing(rest);
+  useEffect(() => {
+    if (required) {
+      const elements = Array.from(ref.current?.querySelectorAll("input") || /* istanbul ignore next */[]);
+      elements.forEach(el => el.setAttribute("required", ""));
+    }
+  }, [required]);
   return /*#__PURE__*/React.createElement(StyledInlineInputs, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
-    labelInline: inlineLabel
+    labelInline: inlineLabel,
+    ref: ref
   }, marginProps), renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",

package/esm/components/menu/menu-full-screen/menu-full-screen.component.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
-import { TagProps } from "../../../__internal__/utils/helpers/tags";
-export interface MenuFullscreenProps extends TagProps {
+import type { TagProps } from "../../../__internal__/utils/helpers/tags";
+export interface MenuFullscreenProps extends Omit<TagProps, "data-component"> {
+    /** Accessible name that conveys the purpose of the menu   */
+    "aria-label"?: string;
     /** The child elements to render */
     children?: React.ReactNode;
     /** Sets whether the component is open or closed */
@@ -8,7 +10,9 @@ export interface MenuFullscreenProps extends TagProps {
     /** The start position for the component to open from */
     startPosition?: "left" | "right";
     /** A callback to be called when the close icon is clicked or enter is pressed when focused */
-    onClose: (ev: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLButtonElement>) => void;
+    onClose: (ev: React.KeyboardEvent<HTMLButtonElement> | React.MouseEvent<HTMLButtonElement> | KeyboardEvent) => void;
+    /** Manually override the internal modal stacking order to set this as top */
+    topModalOverride?: boolean;
 }
-export declare const MenuFullscreen: ({ children, isOpen, startPosition, onClose, ...rest }: MenuFullscreenProps) => React.JSX.Element;
+export declare const MenuFullscreen: ({ "aria-label": ariaLabel, "data-element": dataElement, "data-role": dataRole, children, isOpen, onClose, startPosition, topModalOverride, }: MenuFullscreenProps) => React.JSX.Element;
 export default MenuFullscreen;