carbon-react 128.1.2 → 128.2.0

package/esm/components/radio-button/radio-button.component.js

@@ -29,7 +29,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
   onFocus,
   value,
   reverse = false,
-  required,
   size,
   error,
   warning,
@@ -97,7 +96,6 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
      * opposite way around by default)
      */
     reverse: !reverse,
-    required,
     ref: ref || inputRef,
     ...props
   };
@@ -225,6 +223,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,
@@ -565,7 +564,6 @@ if (process.env.NODE_ENV !== "production") {
     "radioGroup": PropTypes.string,
     "readOnly": PropTypes.bool,
     "rel": PropTypes.string,
-    "required": PropTypes.bool,
     "resource": PropTypes.string,
     "results": PropTypes.number,
     "rev": PropTypes.string,

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -61,6 +61,10 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     /** Boolean to disable automatic filtering and highlighting of options.
      * This allows custom filtering and option styling to be performed outside of the component when the filter text changes. */
     disableDefaultFiltering?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    required?: boolean;
 }
 export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<unknown>>;
 export default FilterableSelect;

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -54,6 +54,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   enableVirtualScroll,
   virtualScrollOverscan,
   disableDefaultFiltering = false,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -397,6 +399,8 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       onMouseDown: handleTextboxMouseDown,
       tooltipPosition,
       inputRef,
+      required,
+      isOptional,
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }
@@ -565,6 +569,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isLoading": PropTypes.bool,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -55,6 +55,8 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
      * Higher values make for smoother scrolling but may impact performance.
      * Only used if the `enableVirtualScroll` prop is set. */
     virtualScrollOverscan?: number;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<unknown>>;
 export default MultiSelect;

package/esm/components/select/multi-select/multi-select.component.js

@@ -55,6 +55,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = useState();
@@ -404,6 +406,8 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onChange: handleTextboxChange,
       tooltipPosition,
       size,
+      required,
+      isOptional,
       inputRef,
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
@@ -574,6 +578,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isLoading": PropTypes.bool,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/select/select-textbox/select-textbox.component.d.ts

@@ -59,6 +59,8 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
      *
      */
     labelId?: string;
+    /** Flag to configure component as optional in Form */
+    isOptional?: boolean;
 }
 export interface SelectTextboxProps extends FormInputPropTypes {
     /** Id attribute of the select list */

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -37,6 +37,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   onChange,
   selectedValue,
   required,
+  isOptional,
   textboxRef,
   hasTextCursor,
   transparent,
@@ -80,6 +81,7 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     id,
     readOnly,
     required,
+    isOptional,
     onClick: handleTextboxClick,
     onFocus: handleTextboxFocus,
     onBlur: handleTextboxBlur,
@@ -234,6 +236,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isOpen": PropTypes.bool,
+    "isOptional": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -61,6 +61,10 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
      * Higher values make for smoother scrolling but may impact performance.
      * Only used if the `enableVirtualScroll` prop is set. */
     virtualScrollOverscan?: number;
+    /** Flag to configure component as optional in Form */
+    isOptional?: boolean;
+    /** Flag to configure component as mandatory */
+    isRequired?: boolean;
 }
 export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<unknown>>;
 export default SimpleSelect;

package/esm/components/select/simple-select/simple-select.component.js

@@ -48,6 +48,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  isOptional,
+  required,
   ...props
 }, ref) => {
   const selectListId = useRef(guid());
@@ -314,6 +316,8 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
       onKeyDown: handleTextboxKeydown,
       onBlur: handleTextboxBlur,
       tooltipPosition,
+      required,
+      isOptional,
       transparent,
       inputRef,
       ...filterOutStyledSystemSpacingProps(props)
@@ -476,6 +480,8 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": PropTypes.number,
     "is": PropTypes.string,
     "isLoading": PropTypes.bool,
+    "isOptional": PropTypes.bool,
+    "isRequired": PropTypes.bool,
     "itemID": PropTypes.string,
     "itemProp": PropTypes.string,
     "itemRef": PropTypes.string,

package/esm/components/switch/switch.component.js

@@ -275,6 +275,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/text-editor/text-editor.component.d.ts

@@ -16,8 +16,10 @@ export interface TextEditorProps extends MarginProps {
     toolbarElements?: React.ReactNode;
     /** The value of the input, this is an EditorState immutable object */
     value: EditorState;
-    /** Flag to configure component as mandatory */
+    /** Flag to configure component as mandatory. */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** Message to be displayed when there is an error */
     error?: string;
     /** Message to be displayed when there is a warning */

package/esm/components/text-editor/text-editor.component.js

@@ -1,3 +1,4 @@
+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, { useCallback, useEffect, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import { ContentState, EditorState, RichUtils, getDefaultKeyBinding, Modifier, Editor } from "draft-js";
@@ -33,6 +34,7 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   previews,
   onLinkAdded,
   inputHint,
+  isOptional,
   ...rest
 }, ref) => {
   const {
@@ -43,6 +45,7 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
   const [activeInlines, setActiveInlines] = useState({});
   const [focusToolbar, setFocusToolbar] = useState(false);
   const editorRef = useRef(null);
+  const wrapper = useRef(null);
   const editor = ref || editorRef;
   const contentLength = getContent(value).getPlainText("").length;
   const moveCursor = useRef(contentLength > 0);
@@ -242,16 +245,26 @@ const TextEditor = /*#__PURE__*/React.forwardRef(({
       editor.current?.focus();
     }
   };
+  useEffect(() => {
+    if (required) {
+      const editableElement = wrapper.current?.querySelector("div[contenteditable='true']");
+      editableElement?.setAttribute("required", "");
+      editableElement?.setAttribute("aria-required", "true");
+    }
+  }, [required]);
   return /*#__PURE__*/React.createElement(EditorContext.Provider, {
     value: {
       onLinkAdded,
       editMode: true
     }
-  }, /*#__PURE__*/React.createElement(StyledEditorWrapper, rest, /*#__PURE__*/React.createElement(LabelWrapper, {
+  }, /*#__PURE__*/React.createElement(StyledEditorWrapper, _extends({
+    ref: wrapper
+  }, rest), /*#__PURE__*/React.createElement(LabelWrapper, {
     onClick: () => handleEditorFocus(true)
   }, /*#__PURE__*/React.createElement(Label, {
     labelId: labelId,
-    isRequired: required
+    isRequired: required,
+    optional: isOptional
   }, labelText)), inputHint && /*#__PURE__*/React.createElement(StyledHintText, {
     id: inputHintId.current
   }, inputHint), /*#__PURE__*/React.createElement(Box, {
@@ -313,6 +326,7 @@ if (process.env.NODE_ENV !== "production") {
     "error": PropTypes.string,
     "info": PropTypes.string,
     "inputHint": PropTypes.string,
+    "isOptional": PropTypes.bool,
     "labelText": PropTypes.string.isRequired,
     "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
       "__@toStringTag": PropTypes.string.isRequired,

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

@@ -79,8 +79,8 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     placeholder?: string;
     /** Adds readOnly property */
     readOnly?: boolean;
-    /** Flag to configure component as mandatory */
-    required?: boolean;
+    /** Flag to configure component as optional */
+    isOptional?: boolean;
     /** The number of visible text lines for the control */
     rows?: number;
     /** One of type of size to apply to the textarea */

package/esm/components/textarea/textarea.component.js

@@ -60,6 +60,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   inputRef,
   borderRadius,
   hideBorders = false,
+  required,
+  isOptional,
   ...rest
 }, ref) => {
   const {
@@ -185,7 +187,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     as: "textarea",
     inputRef: inputRef,
     validationIconId: validationRedesignOptIn ? undefined : validationId,
-    inputBorderRadius: borderRadius
+    inputBorderRadius: borderRadius,
+    required: required
   }, rest)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
     disabled: disabled,
     readOnly: readOnly,
@@ -222,7 +225,8 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
-    isRequired: rest.required,
+    isRequired: required,
+    isOptional: isOptional,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn
@@ -349,6 +353,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/textbox/textbox.component.d.ts

@@ -91,12 +91,12 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Aria label for rendered help component */
     helpAriaLabel?: string;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export interface TextboxProps extends CommonTextboxProps {
     /** Content to be rendered next to the input */
     children?: React.ReactNode;
-    /** [Legacy] Flag to configure component as optional in Form */
-    isOptional?: boolean;
     /** Container for DatePicker or SelectList components */
     positionedChildren?: React.ReactNode;
     /** Character limit of the textarea */

package/esm/components/tile-select/tile-select.style.d.ts

@@ -28,7 +28,7 @@ declare const StyledDeselectWrapper: import("styled-components").StyledComponent
     hasActionAdornment: boolean;
 }, never>;
 declare const StyledTileSelectFieldset: import("styled-components").StyledComponent<{
-    ({ children, inline, legend, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
+    ({ children, inline, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     multiSelect: boolean;

package/lib/__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/lib/__internal__/checkable-input/checkable-input.component.js

@@ -41,6 +41,7 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   onChange,
   onFocus,
   required,
+  isOptional,
   reverse = false,
   validationOnLabel,
   warning,
@@ -62,7 +63,6 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     label,
     fieldHelp
   });
-  const isRadio = type === "radio";
   const formFieldProps = {
     disabled,
     loading,
@@ -83,7 +83,8 @@ const CheckableInput = /*#__PURE__*/_react.default.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 = {
@@ -212,6 +213,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputMode": _propTypes.default.oneOf(["decimal", "email", "none", "numeric", "search", "tel", "text", "url"]),
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

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

@@ -35,11 +35,10 @@ const StyledLegendContent = exports.StyledLegendContent = _styledComponents.defa
         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;
       }
     `}
 
@@ -48,8 +47,9 @@ const StyledLegendContent = exports.StyledLegendContent = _styledComponents.defa
 }) => isOptional && (0, _styledComponents.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);
       }
     `}
 
@@ -67,7 +67,8 @@ const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   align-items: center;
   margin-bottom: var(--spacing100);
   padding: 0;
-  font-weight: 600;
+  font-weight: var(--fontWeights700);
+  color: var(--colorsUtilityYin090);
   ${({
   inline,
   width,

package/lib/__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/lib/__internal__/form-field/form-field.component.js

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

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

@@ -10,7 +10,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const StyledLabel = _styledComponents.default.label`
   color: var(--colorsUtilityYin090);
   display: block;
-  font-weight: 600; //TODO: (tokens) use token var(--fontWeights500)
+  font-weight: var(--fontWeights700);
 
   ${({
   isRequired
@@ -18,8 +18,8 @@ const StyledLabel = _styledComponents.default.label`
       ::after {
         content: "*";
         color: var(--colorsSemanticNegative500);
-        font-weight: 700;
-        margin-left: var(--spacing100);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing050);
       }
     `}
 
@@ -59,8 +59,9 @@ const StyledLabelContainer = exports.StyledLabelContainer = _styledComponents.de
 }) => optional && (0, _styledComponents.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/lib/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/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -32,6 +32,7 @@ const CheckboxGroup = props => {
     warning,
     info,
     required,
+    isOptional,
     legendInline,
     legendWidth,
     legendAlign,
@@ -49,7 +50,8 @@ const CheckboxGroup = props => {
     error: error,
     warning: warning,
     info: info,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, (0, _tags.default)("checkboxgroup", props), {
     blockGroupBehaviour: !(error || warning)
   }, (0, _utils.filterStyledSystemMarginProps)(props)), legendHelp && /*#__PURE__*/_react.default.createElement(_checkboxGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
@@ -82,7 +84,8 @@ const CheckboxGroup = props => {
     error: error,
     warning: warning,
     info: info,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, (0, _tags.default)("checkboxgroup", props), {
     blockGroupBehaviour: !(error || warning || info)
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_checkboxGroup.default, {

package/lib/components/checkbox/checkbox.component.js

@@ -39,6 +39,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
   labelWidth,
   adaptiveSpacingBreakpoint,
   required,
+  isOptional,
   error,
   warning,
   info,
@@ -93,6 +94,7 @@ const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     labelHelp,
     labelSpacing,
     required,
+    isOptional,
     fieldHelpInline,
     checked,
     disabled,
@@ -234,6 +236,7 @@ if (process.env.NODE_ENV !== "production") {
     })]),
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

package/lib/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/lib/components/date-range/date-range.component.js

@@ -33,6 +33,8 @@ const DateRange = ({
   value,
   startRef,
   endRef,
+  required,
+  isOptional,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -195,7 +197,9 @@ const DateRange = ({
       onBlur: handleOnBlur,
       onChange: onChangeCallback,
       onKeyDown: ev => handleOnKeyDown(ev, propsKey),
-      ...props
+      ...props,
+      required,
+      isOptional
     };
   };
   return /*#__PURE__*/_react.default.createElement(_dateRange.default, _extends({}, (0, _tags.default)("date-range", rest), {

package/lib/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/lib/components/decimal/decimal.component.js

@@ -29,7 +29,6 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
   id,
   name,
   allowEmptyValue = false,
-  required,
   locale,
   value,
   inputRef,
@@ -186,7 +185,6 @@ const Decimal = exports.Decimal = /*#__PURE__*/_react.default.forwardRef(({
     onKeyPress: onKeyPress,
     align: align,
     readOnly: readOnly,
-    required: required,
     inputWidth: inputWidth,
     onChange: handleOnChange,
     onBlur: handleOnBlur,
@@ -313,6 +311,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputRef": _propTypes.default.func,
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

package/lib/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;