carbon-react 153.7.0 → 153.7.1

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

@@ -27,7 +27,10 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     labelWidth?: number;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** If true the label switches position with the input */
     reverse?: boolean;

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

@@ -26,7 +26,10 @@ export interface FieldsetProps extends MarginProps {
     legendMargin?: Pick<MarginProps, "mb">;
     /** Any valid CSS string to set the component's width */
     width?: string;
-    /** Flag to configure component as optional in Form */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Apply disabled styling to the legend content */
     isDisabled?: boolean;

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

@@ -4,6 +4,10 @@ type StyledFieldsetProps = {
 declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
 type StyledLegendContentProps = {
     isRequired?: boolean;
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     isDisabled?: boolean;
     optionalLabel?: string;

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

@@ -53,7 +53,10 @@ export interface FormFieldProps extends CommonFormFieldProps, TagProps {
     fieldHelpInline?: boolean;
     /** Id of the element a label should be bound to */
     id: string;
-    /** Flag to configure component as optional in Form */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;

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

@@ -112,6 +112,14 @@ const Button = /*#__PURE__*/React.forwardRef(({
       internalRef?.click();
     }
   };
+  const handleClick = event => {
+    internalRef?.focus();
+    if (inSplitButton) {
+      onChildButtonClick?.(onClick)?.(event);
+    } else if (onClick) {
+      onClick(event);
+    }
+  };
   switch (size) {
     case "small":
       paddingX = 2;
@@ -135,7 +143,7 @@ const Button = /*#__PURE__*/React.forwardRef(({
     "aria-describedby": ariaDescribedBy,
     as: !isDisabled && href ? "a" : "button",
     onKeyDown: href ? handleLinkKeyDown : undefined,
-    onClick: inSplitButton ? onChildButtonClick?.(onClick) : onClick,
+    onClick: handleClick,
     draggable: false,
     buttonType: buttonType,
     disabled: isDisabled,

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

@@ -29,7 +29,10 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps, TagPro
     labelSpacing?: 1 | 2;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** [Legacy] Overrides the default tooltip */
     tooltipPosition?: "top" | "bottom" | "left" | "right";

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

@@ -13,6 +13,8 @@ import CheckboxGroupContext from "./__internal__/checkbox-group.context";
 import guid from "../../../__internal__/utils/helpers/guid";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility";
 import HintText from "../../../__internal__/hint-text";
+import Logger from "../../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const CheckboxGroup = ({
   children,
   legend,
@@ -31,6 +33,10 @@ export const CheckboxGroup = ({
   id,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in CheckboxGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

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

@@ -83,7 +83,10 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** Flag to configure component as mandatory. */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Date format string to be applied to the date inputs */
     dateFormatOverride?: string;

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

@@ -11,6 +11,8 @@ import usePrevious from "../../hooks/__internal__/usePrevious";
 import getFormatData from "../date/__internal__/date-formats";
 import DateRangeContext from "./__internal__/date-range.context";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
+import Logger from "../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const DateRange = ({
   endDateProps = {},
   id,
@@ -32,6 +34,10 @@ export const DateRange = ({
   datePickerEndAriaLabelledBy,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in DateRange and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

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

@@ -8,7 +8,10 @@ export interface FieldsetProps extends MarginProps, TagProps {
     legend?: string;
     /** Flag to configure fields as mandatory. */
     required?: boolean;
-    /** Flag to configure fields as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 export declare const Fieldset: {

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

@@ -5,6 +5,8 @@ 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";
+import Logger from "../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const Fieldset = ({
   children,
   legend,
@@ -12,6 +14,10 @@ export const Fieldset = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in Fieldset and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const [ref, setRef] = useState(null);
   const marginProps = filterStyledSystemMarginProps(rest);
   const {

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

@@ -5,7 +5,10 @@ declare const FieldsetStyle: import("styled-components").StyledComponent<"fields
 export interface StyledLegendProps {
     /** Flag to configure fields as mandatory. */
     isRequired?: boolean;
-    /** Flag to configure fields as optional. */
+    /**
+     * [Legacy] Flag to configure fields as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Text used for the optional label */
     optionalLabel?: string;

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

@@ -33,7 +33,10 @@ export interface FileInputProps extends Pick<ValidationProps, "error">, Pick<Inp
     uploadStatus?: FileUploadStatusProps | FileUploadStatusProps[];
     /** Flag to configure component as mandatory. */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -14,6 +14,8 @@ import FileUploadStatus from "./__internal__/file-upload-status";
 import Box from "../box";
 import useLocale from "../../hooks/__internal__/useLocale";
 import HintText from "../../__internal__/hint-text";
+import Logger from "../../__internal__/utils/logger";
+let deprecateOptionalWarnTriggered = false;
 export const FileInput = /*#__PURE__*/React.forwardRef(({
   accept,
   buttonText,
@@ -36,6 +38,10 @@ export const FileInput = /*#__PURE__*/React.forwardRef(({
   uploadStatus = [],
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in FileInput and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const locale = useLocale();
   const textOnButton = buttonText || locale.fileInput.selectFile();
   const mainText = dragAndDropText || locale.fileInput.dragAndDrop();

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

@@ -26,7 +26,10 @@ export interface InlineInputsProps extends MarginProps, StyledContentContainerPr
     labelId?: string;
     /** Flag to configure component as mandatory. */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 declare const InlineInputs: {

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

@@ -5,6 +5,7 @@ import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from ".
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
 const columnWrapper = (children, gutter) => {
   return React.Children.map(children, input => {
     return /*#__PURE__*/React.createElement(StyledInlineInput, {
@@ -13,6 +14,7 @@ const columnWrapper = (children, gutter) => {
     }, input);
   });
 };
+let deprecateOptionalWarnTriggered = false;
 const InlineInputs = ({
   adaptiveLabelBreakpoint,
   label,
@@ -28,6 +30,10 @@ const InlineInputs = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in InlineInputs and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   const ref = useRef(null);
   let inlineLabel = labelInline;

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

@@ -80,7 +80,10 @@ export interface NumeralDateProps extends ValidationProps, MarginProps, TagProps
      * A React ref to pass to the input corresponding to the year
      */
     yearRef?: React.ForwardedRef<HTMLInputElement>;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 export type ValidDateFormat = (typeof ALLOWED_DATE_FORMATS)[number];

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

@@ -78,6 +78,7 @@ const getDateLabel = (datePart, locale) => {
       return locale.numeralDate.labels.day();
   }
 };
+let deprecateOptionalWarnTriggered = false;
 export const NumeralDate = /*#__PURE__*/forwardRef(({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
@@ -113,6 +114,10 @@ export const NumeralDate = /*#__PURE__*/forwardRef(({
   yearRef,
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in NumeralDate and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const locale = useLocale();
   const {
     validationRedesignOptIn

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

@@ -41,7 +41,10 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps, Tag
     onChange?: (ev: React.ChangeEvent<HTMLInputElement>) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** value of the selected RadioButton */
     value?: string;

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

@@ -16,6 +16,7 @@ import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibi
 import ErrorBorder from "../../textbox/textbox.style";
 import HintText from "../../../__internal__/hint-text";
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
 export const RadioButtonGroup = ({
   children,
   id,
@@ -41,6 +42,10 @@ export const RadioButtonGroup = ({
   tooltipPosition,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in RadioButtonGroup and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

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

@@ -56,7 +56,10 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
      *
      */
     labelId?: string;
-    /** Flag to configure component as optional in Form */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
 }
 export interface SelectTextboxProps extends FormInputPropTypes {

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

@@ -56,7 +56,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. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     required?: boolean;

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

@@ -15,6 +15,7 @@ import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
+let deprecateOptionalWarnTriggered = false;
 export const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
@@ -55,6 +56,10 @@ export const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   listWidth,
   ...textboxProps
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in FilterableSelect and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const [activeDescendantId, setActiveDescendantId] = useState("");
   const selectListId = useRef(guid());
   const containerRef = useRef(null);

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

@@ -52,7 +52,10 @@ 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. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Specify a callback triggered on change */
     onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;

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

@@ -16,6 +16,7 @@ import useStableCallback from "../../../hooks/__internal__/useStableCallback";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
+let deprecateOptionalWarnTriggered = false;
 export const MultiSelect = /*#__PURE__*/React.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
@@ -56,6 +57,10 @@ export const MultiSelect = /*#__PURE__*/React.forwardRef(({
   listWidth,
   ...textboxProps
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in MultiSelect and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const [activeDescendantId, setActiveDescendantId] = useState("");
   const selectListId = useRef(guid());
   const accessibilityLabelId = useRef(guid());

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

@@ -50,7 +50,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 */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;

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

@@ -12,6 +12,7 @@ import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
 export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -49,6 +50,10 @@ export const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   listWidth,
   ...props
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in SimpleSelect and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const selectListId = useRef(guid());
   const containerRef = useRef(null);
   const listboxRef = useRef(null);

package/esm/components/text-editor/text-editor.component.d.ts

@@ -14,7 +14,10 @@ export interface TextEditorProps extends MarginProps, TagProps {
     header?: React.ReactNode;
     /** A hint string rendered before the editor but after the label. Intended to describe the purpose or content of the input. */
     inputHint?: string;
-    /** Whether the content of the editor can be empty */
+    /**
+     * [Legacy] Whether the content of the editor can be empty
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** The label to display above the editor */
     labelText: string;

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

@@ -15,6 +15,7 @@ import { SerializeLexical, validateUrl } from "./__internal__/helpers";
 import Label from "../../__internal__/label";
 import useDebounce from "../../hooks/__internal__/useDebounce";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Logger from "../../__internal__/utils/logger";
 import { COMPONENT_PREFIX, markdownNodes, theme } from "./__internal__/constants";
 import { AutoLinkerPlugin, CharacterCounterPlugin, ContentEditor, LinkMonitorPlugin, OnChangePlugin, Placeholder, ToolbarPlugin } from "./__internal__/plugins";
 import TextEditorContext from "./text-editor.context";
@@ -23,6 +24,7 @@ import { createEmpty } from "./utils";
 import HintText from "../../__internal__/hint-text";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import tagComponent from "../../__internal__/utils/helpers/tags";
+let deprecateOptionalWarnTriggered = false;
 export const TextEditor = ({
   characterLimit = 3000,
   error,
@@ -45,6 +47,10 @@ export const TextEditor = ({
   value,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in TextEditor and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const editorRef = useRef(undefined);
   const locale = useLocale();
   const [characterLimitWarning, setCharacterLimitWarning] = useState(undefined);

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

@@ -77,7 +77,10 @@ export interface TextareaProps extends ValidationProps, MarginProps, Omit<Common
     placeholder?: string;
     /** Adds readOnly property */
     readOnly?: boolean;
-    /** Flag to configure component as optional */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** The number of visible text lines for the control. When set, this determines the height of the textarea, and the minHeight property is ignored. */
     rows?: number;

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

@@ -18,8 +18,9 @@ import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
 import HintText from "../../__internal__/hint-text";
 import { filterStyledSystemMarginProps } from "../../style/utils";
-let deprecateUncontrolledWarnTriggered = false;
 let deprecatedAriaDescribedByWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 export const Textarea = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -66,6 +67,10 @@ export const Textarea = /*#__PURE__*/React.forwardRef(({
   minHeight = DEFAULT_MIN_HEIGHT,
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in TextArea and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);

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

@@ -87,7 +87,10 @@ export interface CommonTextboxProps extends ValidationProps, MarginProps, Omit<C
     tooltipPosition?: "top" | "bottom" | "left" | "right";
     /** [Legacy] Aria label for rendered help component. */
     helpAriaLabel?: string;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** The id attribute for the validation tooltip */
     tooltipId?: string;

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

@@ -22,8 +22,9 @@ export const ALIGN_DEFAULT = "left";
 export const SIZE_DEFAULT = "medium";
 export const LABEL_WIDTH_DEFAULT = 30;
 export const LABEL_VALIDATION_DEFAULT = false;
-let deprecateUncontrolledWarnTriggered = false;
 let deprecatedAriaDescribedByWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 export const Textbox = /*#__PURE__*/React.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedByProp,
@@ -80,6 +81,10 @@ export const Textbox = /*#__PURE__*/React.forwardRef(({
   tooltipId,
   ...props
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in Textbox and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const characterCountValue = typeof value === "string" ? value : "";
   const [uniqueId, uniqueName] = useUniqueId(id, name);
   const [characterCountAriaLive, setCharacterCountAriaLive] = useState("off");

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

@@ -60,7 +60,10 @@ export interface TimeProps extends TagProps, MarginProps {
     onBlur?: (ev?: React.FocusEvent<HTMLInputElement>, value?: TimeValue) => void;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Flag to configure component as optional */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** If true, the component will be disabled */
     disabled?: boolean;

package/esm/components/time/time.component.js

@@ -5,6 +5,7 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+import Logger from "../../__internal__/utils/logger";
 import Fieldset from "../../__internal__/fieldset";
 import Box from "../box";
 import ErrorBorder from "../textbox/textbox.style";
@@ -14,6 +15,7 @@ import Typography from "../typography";
 import StyledLabel from "./time.style";
 import { TimeToggle } from "./__internal__/time-toggle";
 import HintText from "../../__internal__/hint-text";
+let deprecateOptionalWarnTriggered = false;
 const Time = /*#__PURE__*/React.forwardRef(({
   label,
   labelAlign,
@@ -33,6 +35,10 @@ const Time = /*#__PURE__*/React.forwardRef(({
   toggleProps = {},
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    Logger.deprecate("`isOptional` is deprecated in Time and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead.");
+  }
   const {
     id: hoursInputId,
     label: hoursLabel,

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

@@ -27,7 +27,10 @@ export interface CommonCheckableInputProps extends ValidationProps, CommonHidden
     labelWidth?: number;
     /** Flag to configure component as mandatory */
     required?: boolean;
-    /** Flag to configure component as optional. */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `required` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** If true the label switches position with the input */
     reverse?: boolean;

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

@@ -26,7 +26,10 @@ export interface FieldsetProps extends MarginProps {
     legendMargin?: Pick<MarginProps, "mb">;
     /** Any valid CSS string to set the component's width */
     width?: string;
-    /** Flag to configure component as optional in Form */
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     /** Apply disabled styling to the legend content */
     isDisabled?: boolean;

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

@@ -4,6 +4,10 @@ type StyledFieldsetProps = {
 declare const StyledFieldset: import("styled-components").StyledComponent<"fieldset", any, StyledFieldsetProps, never>;
 type StyledLegendContentProps = {
     isRequired?: boolean;
+    /**
+     * [Legacy] Flag to configure component as optional.
+     * @deprecated If the value of this component is not required, use the `isRequired` prop and set it to false instead.
+     */
     isOptional?: boolean;
     isDisabled?: boolean;
     optionalLabel?: string;