carbon-react 128.1.2 → 128.2.0

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Fieldset = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _fieldset = require("./fieldset.style");
@@ -12,16 +12,23 @@ var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _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); }
 const Fieldset = ({
   children,
   inline = false,
   legend,
+  required,
+  isOptional,
   ...rest
 }) => {
+  const [ref, setRef] = (0, _react.useState)(null);
   const getLegend = () => {
     if (!legend) return null;
     return /*#__PURE__*/_react.default.createElement(_fieldset.LegendContainerStyle, {
+      isRequired: required,
+      isOptional: isOptional,
       inline: inline,
       "data-component": "legend-style"
     }, /*#__PURE__*/_react.default.createElement("legend", {
@@ -29,11 +36,20 @@ const Fieldset = ({
     }, legend));
   };
   const marginProps = (0, _useFormSpacing.default)(rest);
+  (0, _react.useEffect)(() => {
+    if (ref && required) {
+      Array.from(ref.querySelectorAll("input") || /* istanbul ignore next */[]).forEach(el => {
+        el.setAttribute("required", "");
+      });
+    }
+  }, [ref, required]);
   return /*#__PURE__*/_react.default.createElement(_carbonProvider.NewValidationContext.Provider, {
     value: {
       validationRedesignOptIn: false
     }
-  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", rest), rest, marginProps), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
+  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({
+    ref: setRef
+  }, (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.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/lib/components/fieldset/fieldset.style.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LegendContainerStyle = exports.FieldsetStyle = exports.FieldsetContentStyle = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
@@ -12,6 +12,8 @@ var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _checkbox = _interopRequireDefault(require("../checkbox/checkbox.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const FieldsetStyle = exports.FieldsetStyle = _styledComponents.default.fieldset`
   margin: 0;
   ${_styledSystem.margin}
@@ -44,9 +46,36 @@ const LegendContainerStyle = exports.LegendContainerStyle = _styledComponents.de
 
   legend {
     font-size: 20px;
-    font-weight: 600;
+    font-weight: var(--fontWeights700);
+    color: var(--colorsUtilityYin090);
     line-height: 24px;
     margin-right: 4px;
+
+    ${({
+  isRequired
+}) => isRequired && (0, _styledComponents.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 && (0, _styledComponents.css)`
+        ::after {
+          content: "(optional)";
+          color: var(--colorsUtilityYin055);
+          font-weight: var(--fontWeights400);
+          margin-left: var(--spacing050);
+        }
+      `}
   }
 
   ${_validationIcon.default} ${_icon.default}:focus {

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

@@ -41,6 +41,7 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
   name,
   onChange,
   required,
+  isOptional,
   uploadStatus = [],
   ...rest
 }, ref) => {
@@ -158,6 +159,7 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
     labelId: labelId,
     id: uniqueId,
     isRequired: required,
+    isOptional: isOptional,
     "data-component": "file-input",
     "data-role": dataRole,
     "data-element": dataElement,
@@ -179,6 +181,7 @@ if (process.env.NODE_ENV !== "production") {
     "error": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.bool]),
     "id": _propTypes.default.string,
     "inputHint": _propTypes.default.node,
+    "isOptional": _propTypes.default.bool,
     "isVertical": _propTypes.default.bool,
     "label": _propTypes.default.string,
     "m": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.number, _propTypes.default.shape({

package/lib/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/lib/components/form/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "RequiredFieldsIndicator", {
+  enumerable: true,
+  get: function () {
+    return _requiredFieldsIndicator.default;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function () {
@@ -10,4 +16,5 @@ Object.defineProperty(exports, "default", {
   }
 });
 var _form = _interopRequireDefault(require("./form.component"));
+var _requiredFieldsIndicator = _interopRequireDefault(require("./required-fields-indicator"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _requiredFieldsIndicator.default;
+  }
+});
+var _requiredFieldsIndicator = _interopRequireDefault(require("./required-fields-indicator.component"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/components/form/required-fields-indicator/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/form/required-fields-indicator/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/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/lib/components/form/required-fields-indicator/required-fields-indicator.component.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _box = _interopRequireDefault(require("../../box"));
+var _typography = _interopRequireDefault(require("../../typography/typography.style"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledIndicatorContainer = (0, _styledComponents.default)(_box.default)`
+  ${_typography.default} {
+    color: var(--colorsUtilityYin090);
+  }
+  ::after {
+    content: "*";
+    color: var(--colorsSemanticNegative500);
+    font-weight: 700;
+    margin-left: var(--spacing050);
+  }
+`;
+var _default = ({
+  children,
+  ...rest
+}) => /*#__PURE__*/_react.default.createElement(StyledIndicatorContainer, rest, children);
+exports.default = _default;

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

@@ -4,16 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
 const columnWrapper = (children, gutter) => {
   return _react.default.Children.map(children, input => {
@@ -36,9 +36,11 @@ const InlineInputs = ({
   labelInline = true,
   labelWidth,
   required,
+  isOptional,
   ...rest
 }) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
+  const ref = (0, _react.useRef)(null);
   let inlineLabel = labelInline;
   if (adaptiveLabelBreakpoint) {
     inlineLabel = largeScreen;
@@ -50,16 +52,24 @@ const InlineInputs = ({
       labelId: labelId,
       inline: inlineLabel,
       htmlFor: htmlFor,
-      isRequired: required
+      isRequired: required,
+      optional: isOptional
     }, label);
   }
   const marginProps = (0, _useFormSpacing.default)(rest);
+  (0, _react.useEffect)(() => {
+    if (required) {
+      const elements = Array.from(ref.current?.querySelectorAll("input") || /* istanbul ignore next */[]);
+      elements.forEach(el => el.setAttribute("required", ""));
+    }
+  }, [required]);
   return /*#__PURE__*/_react.default.createElement(_inlineInputs.default, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
-    labelInline: inlineLabel
+    labelInline: inlineLabel,
+    ref: ref
   }, marginProps), renderLabel(), /*#__PURE__*/_react.default.createElement(_inlineInputs.StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",

package/lib/components/numeral-date/numeral-date.component.d.ts

@@ -87,7 +87,9 @@ export interface NumeralDateProps<DateType extends NumeralDateObject = FullDate>
      * A React ref to pass to the input corresponding to the year
      */
     yearRef?: React.ForwardedRef<HTMLInputElement>;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
 }
 export declare type ValidDateFormat = typeof ALLOWED_DATE_FORMATS[number];
-export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
+export declare const NumeralDate: <DateType extends NumeralDateObject = FullDate>({ dateFormat, defaultValue, disabled, error, warning, "data-component": dataComponent, "data-element": dataElement, "data-role": dataRole, info, id, name, onBlur, onChange, value, validationOnLabel, label, labelInline, labelWidth, labelAlign, labelHelp, labelSpacing, fieldHelp, adaptiveLabelBreakpoint, required, isOptional, readOnly, size, enableInternalError, enableInternalWarning, tooltipPosition, helpAriaLabel, dayRef, monthRef, yearRef, ...rest }: NumeralDateProps<DateType>) => React.JSX.Element;
 export default NumeralDate;

package/lib/components/numeral-date/numeral-date.component.js

@@ -112,6 +112,7 @@ const NumeralDate = ({
   fieldHelp,
   adaptiveLabelBreakpoint,
   required,
+  isOptional,
   readOnly,
   size,
   enableInternalError,
@@ -224,6 +225,7 @@ const NumeralDate = ({
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
+    isOptional: isOptional,
     validationRedesignOptIn: validationRedesignOptIn
   }, (0, _utils.filterStyledSystemMarginProps)(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox2.StyledHintText, null, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
     position: "relative"
@@ -294,8 +296,6 @@ const NumeralDate = ({
       error: !!internalError,
       warning: !!internalWarning,
       info: !!info
-    }, required && {
-      required
     }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
       error: internalError,
       warning: internalWarning,
@@ -303,7 +303,8 @@ const NumeralDate = ({
     }, {
       size: size,
       tooltipPosition: tooltipPosition,
-      "aria-labelledby": labelId
+      "aria-labelledby": labelId,
+      required: required
     })))));
   }))))));
 };

package/lib/components/radio-button/radio-button-group/radio-button-group.component.d.ts

@@ -32,6 +32,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Flag to configure component as optional. */
+    isOptional?: boolean;
     /** value of the selected RadioButton */
     value?: string;
     /** Overrides the default tooltip position */

package/lib/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -44,6 +44,7 @@ const RadioButtonGroup = props => {
     adaptiveLegendBreakpoint,
     adaptiveSpacingBreakpoint,
     required,
+    isOptional,
     tooltipPosition
   } = props;
   const {
@@ -73,7 +74,8 @@ const RadioButtonGroup = props => {
     legendWidth: legendWidth,
     legendAlign: legendAlign,
     legendSpacing: legendSpacing,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, (0, _tags.default)("radiogroup", props), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning)
@@ -119,7 +121,8 @@ const RadioButtonGroup = props => {
     legendWidth: legendWidth,
     legendAlign: legendAlign,
     legendSpacing: legendSpacing,
-    isRequired: required
+    isRequired: required,
+    isOptional: isOptional
   }, (0, _tags.default)("radiogroup", props), marginProps, {
     ml: marginLeft,
     blockGroupBehaviour: !(error || warning || info)
@@ -143,7 +146,6 @@ const RadioButtonGroup = props => {
       error: !!error,
       warning: !!warning,
       info: !!info,
-      required,
       ...child.props
     });
   }))))));

package/lib/components/radio-button/radio-button.component.d.ts

@@ -3,9 +3,8 @@ import { MarginProps } from "styled-system";
 import { CommonCheckableInputProps } from "../../__internal__/checkable-input";
 interface InternalRadioButtonProps {
     inline?: boolean;
-    required?: boolean;
 }
-export interface RadioButtonProps extends CommonCheckableInputProps, MarginProps {
+export interface RadioButtonProps extends Omit<CommonCheckableInputProps, "required" | "IsOptional">, MarginProps {
     /** Identifier used for testing purposes, applied to the root element of the component. */
     "data-component"?: string;
     /** Identifier used for testing purposes, applied to the root element of the component. */

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

@@ -38,7 +38,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
   onFocus,
   value,
   reverse = false,
-  required,
   size,
   error,
   warning,
@@ -106,7 +105,6 @@ const RadioButton = exports.RadioButton = /*#__PURE__*/_react.default.forwardRef
      * opposite way around by default)
      */
     reverse: !reverse,
-    required,
     ref: ref || inputRef,
     ...props
   };
@@ -234,6 +232,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,
@@ -574,7 +573,6 @@ if (process.env.NODE_ENV !== "production") {
     "radioGroup": _propTypes.default.string,
     "readOnly": _propTypes.default.bool,
     "rel": _propTypes.default.string,
-    "required": _propTypes.default.bool,
     "resource": _propTypes.default.string,
     "results": _propTypes.default.number,
     "rev": _propTypes.default.string,

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

@@ -63,6 +63,8 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   enableVirtualScroll,
   virtualScrollOverscan,
   disableDefaultFiltering = false,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -406,6 +408,8 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
       onMouseDown: handleTextboxMouseDown,
       tooltipPosition,
       inputRef,
+      required,
+      isOptional,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
   }
@@ -574,6 +578,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
     "isLoading": _propTypes.default.bool,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

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

@@ -64,6 +64,8 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  isOptional,
+  required,
   ...textboxProps
 }, ref) => {
   const [activeDescendantId, setActiveDescendantId] = (0, _react.useState)();
@@ -413,6 +415,8 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
       onChange: handleTextboxChange,
       tooltipPosition,
       size,
+      required,
+      isOptional,
       inputRef,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(textboxProps)
     };
@@ -583,6 +587,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
     "isLoading": _propTypes.default.bool,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

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

@@ -46,6 +46,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
   onChange,
   selectedValue,
   required,
+  isOptional,
   textboxRef,
   hasTextCursor,
   transparent,
@@ -89,6 +90,7 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     id,
     readOnly,
     required,
+    isOptional,
     onClick: handleTextboxClick,
     onFocus: handleTextboxFocus,
     onBlur: handleTextboxBlur,
@@ -243,6 +245,7 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
     "isOpen": _propTypes.default.bool,
+    "isOptional": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

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

@@ -57,6 +57,8 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   inputRef,
   enableVirtualScroll,
   virtualScrollOverscan,
+  isOptional,
+  required,
   ...props
 }, ref) => {
   const selectListId = (0, _react.useRef)((0, _guid.default)());
@@ -323,6 +325,8 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
       onKeyDown: handleTextboxKeydown,
       onBlur: handleTextboxBlur,
       tooltipPosition,
+      required,
+      isOptional,
       transparent,
       inputRef,
       ...(0, _utils.filterOutStyledSystemSpacingProps)(props)
@@ -485,6 +489,8 @@ if (process.env.NODE_ENV !== "production") {
     "inputWidth": _propTypes.default.number,
     "is": _propTypes.default.string,
     "isLoading": _propTypes.default.bool,
+    "isOptional": _propTypes.default.bool,
+    "isRequired": _propTypes.default.bool,
     "itemID": _propTypes.default.string,
     "itemProp": _propTypes.default.string,
     "itemRef": _propTypes.default.string,

package/lib/components/switch/switch.component.js

@@ -284,6 +284,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/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 */