carbon-react 153.7.0 → 153.7.1

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

@@ -121,6 +121,14 @@ const Button = /*#__PURE__*/_react.default.forwardRef(({
       internalRef?.click();
     }
   };
+  const handleClick = event => {
+    internalRef?.focus();
+    if (inSplitButton) {
+      onChildButtonClick?.(onClick)?.(event);
+    } else if (onClick) {
+      onClick(event);
+    }
+  };
   switch (size) {
     case "small":
       paddingX = 2;
@@ -144,7 +152,7 @@ const Button = /*#__PURE__*/_react.default.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/lib/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/lib/components/checkbox/checkbox-group/checkbox-group.component.js

@@ -18,10 +18,12 @@ var _checkboxGroup2 = _interopRequireDefault(require("./__internal__/checkbox-gr
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
 var _useInputAccessibility = _interopRequireDefault(require("../../../hooks/__internal__/useInputAccessibility"));
 var _hintText = _interopRequireDefault(require("../../../__internal__/hint-text"));
+var _logger = _interopRequireDefault(require("../../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecateOptionalWarnTriggered = false;
 const CheckboxGroup = ({
   children,
   legend,
@@ -40,6 +42,10 @@ const CheckboxGroup = ({
   id,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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
   } = (0, _react.useContext)(_newValidation.default);

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

@@ -16,10 +16,12 @@ var _usePrevious = _interopRequireDefault(require("../../hooks/__internal__/useP
 var _dateFormats = _interopRequireDefault(require("../date/__internal__/date-formats"));
 var _dateRange2 = _interopRequireDefault(require("./__internal__/date-range.context"));
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecateOptionalWarnTriggered = false;
 const DateRange = ({
   endDateProps = {},
   id,
@@ -41,6 +43,10 @@ const DateRange = ({
   datePickerEndAriaLabelledBy,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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
   } = (0, _react.useContext)(_newValidation.default);

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

@@ -10,10 +10,12 @@ var _fieldset = require("./fieldset.style");
 var _newValidation = _interopRequireDefault(require("../carbon-provider/__internal__/new-validation.context"));
 var _utils = require("../../style/utils");
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecateOptionalWarnTriggered = false;
 const Fieldset = ({
   children,
   legend,
@@ -21,6 +23,10 @@ const Fieldset = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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] = (0, _react.useState)(null);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const {

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

@@ -19,10 +19,12 @@ var _fileUploadStatus = _interopRequireDefault(require("./__internal__/file-uplo
 var _box = _interopRequireDefault(require("../box"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _hintText = _interopRequireDefault(require("../../__internal__/hint-text"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecateOptionalWarnTriggered = false;
 const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
   accept,
   buttonText,
@@ -45,6 +47,10 @@ const FileInput = exports.FileInput = /*#__PURE__*/_react.default.forwardRef(({
   uploadStatus = [],
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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 = (0, _useLocale.default)();
   const textOnButton = buttonText || locale.fileInput.selectFile();
   const mainText = dragAndDropText || locale.fileInput.dragAndDrop();

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

@@ -10,6 +10,7 @@ var _inlineInputs = _interopRequireWildcard(require("./inline-inputs.style"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _utils = require("../../style/utils");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -22,6 +23,7 @@ const columnWrapper = (children, gutter) => {
     }, input);
   });
 };
+let deprecateOptionalWarnTriggered = false;
 const InlineInputs = ({
   adaptiveLabelBreakpoint,
   label,
@@ -37,6 +39,10 @@ const InlineInputs = ({
   isOptional,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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 = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
   const ref = (0, _react.useRef)(null);
   let inlineLabel = labelInline;

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

@@ -87,6 +87,7 @@ const getDateLabel = (datePart, locale) => {
       return locale.numeralDate.labels.day();
   }
 };
+let deprecateOptionalWarnTriggered = false;
 const NumeralDate = exports.NumeralDate = /*#__PURE__*/(0, _react.forwardRef)(({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
@@ -122,6 +123,10 @@ const NumeralDate = exports.NumeralDate = /*#__PURE__*/(0, _react.forwardRef)(({
   yearRef,
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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 = (0, _useLocale.default)();
   const {
     validationRedesignOptIn

package/lib/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/lib/components/radio-button/radio-button-group/radio-button-group.component.js

@@ -25,6 +25,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
 const RadioButtonGroup = ({
   children,
   id,
@@ -50,6 +51,10 @@ const RadioButtonGroup = ({
   tooltipPosition,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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
   } = (0, _react.useContext)(_newValidation.default);

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

@@ -24,6 +24,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
+let deprecateOptionalWarnTriggered = false;
 const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
@@ -64,6 +65,10 @@ const FilterableSelect = exports.FilterableSelect = /*#__PURE__*/_react.default.
   listWidth,
   ...textboxProps
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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] = (0, _react.useState)("");
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)(null);

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

@@ -25,6 +25,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
 const FilterableSelectList = (0, _withFilter.default)(_selectList.default);
+let deprecateOptionalWarnTriggered = false;
 const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledby,
@@ -65,6 +66,10 @@ const MultiSelect = exports.MultiSelect = /*#__PURE__*/_react.default.forwardRef
   listWidth,
   ...textboxProps
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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] = (0, _react.useState)("");
   const selectListId = (0, _react.useRef)((0, _guid.default)());
   const accessibilityLabelId = (0, _react.useRef)((0, _guid.default)());

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

@@ -21,6 +21,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 let deprecateUncontrolledWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
 const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardRef(({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -58,6 +59,10 @@ const SimpleSelect = exports.SimpleSelect = /*#__PURE__*/_react.default.forwardR
   listWidth,
   ...props
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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 = (0, _react.useRef)((0, _guid.default)());
   const containerRef = (0, _react.useRef)(null);
   const listboxRef = (0, _react.useRef)(null);

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

@@ -19,6 +19,7 @@ var _helpers = require("./__internal__/helpers");
 var _label = _interopRequireDefault(require("../../__internal__/label"));
 var _useDebounce = _interopRequireDefault(require("../../hooks/__internal__/useDebounce"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _constants = require("./__internal__/constants");
 var _plugins = require("./__internal__/plugins");
 var _textEditor = _interopRequireDefault(require("./text-editor.context"));
@@ -31,6 +32,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } /* eslint-disable no-console */
+let deprecateOptionalWarnTriggered = false;
 const TextEditor = ({
   characterLimit = 3000,
   error,
@@ -53,6 +55,10 @@ const TextEditor = ({
   value,
   ...rest
 }) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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 = (0, _react.useRef)(undefined);
   const locale = (0, _useLocale.default)();
   const [characterLimitWarning, setCharacterLimitWarning] = (0, _react.useState)(undefined);

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

@@ -27,8 +27,9 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-let deprecateUncontrolledWarnTriggered = false;
 let deprecatedAriaDescribedByWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 let warnBorderRadiusArrayTooLarge = false;
 const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
@@ -75,6 +76,10 @@ const Textarea = exports.OriginalTextarea = exports.Textarea = /*#__PURE__*/_rea
   minHeight = _textarea.DEFAULT_MIN_HEIGHT,
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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
   } = (0, _react.useContext)(_newValidation.default);

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

@@ -31,8 +31,9 @@ const ALIGN_DEFAULT = exports.ALIGN_DEFAULT = "left";
 const SIZE_DEFAULT = exports.SIZE_DEFAULT = "medium";
 const LABEL_WIDTH_DEFAULT = exports.LABEL_WIDTH_DEFAULT = 30;
 const LABEL_VALIDATION_DEFAULT = exports.LABEL_VALIDATION_DEFAULT = false;
-let deprecateUncontrolledWarnTriggered = false;
 let deprecatedAriaDescribedByWarnTriggered = false;
+let deprecateOptionalWarnTriggered = false;
+let deprecateUncontrolledWarnTriggered = false;
 const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedByProp,
@@ -89,6 +90,10 @@ const Textbox = exports.Textbox = /*#__PURE__*/_react.default.forwardRef(({
   tooltipId,
   ...props
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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] = (0, _useUniqueId.default)(id, name);
   const [characterCountAriaLive, setCharacterCountAriaLive] = (0, _react.useState)("off");

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

@@ -10,6 +10,7 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
 var _utils = require("../../style/utils");
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
 var _box = _interopRequireDefault(require("../box"));
 var _textbox = _interopRequireDefault(require("../textbox/textbox.style"));
@@ -23,6 +24,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+let deprecateOptionalWarnTriggered = false;
 const Time = /*#__PURE__*/_react.default.forwardRef(({
   label,
   labelAlign,
@@ -42,6 +44,10 @@ const Time = /*#__PURE__*/_react.default.forwardRef(({
   toggleProps = {},
   ...rest
 }, ref) => {
+  if (!deprecateOptionalWarnTriggered && isOptional) {
+    deprecateOptionalWarnTriggered = true;
+    _logger.default.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "153.7.0",
+  "version": "153.7.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -69,8 +69,8 @@
     "@commitlint/cli": "^17.6.3",
     "@commitlint/config-conventional": "^17.6.3",
     "@dotenvx/dotenvx": "^1.25.1",
-    "@playwright/experimental-ct-react": "~1.47.0",
-    "@playwright/test": "~1.47.0",
+    "@playwright/experimental-ct-react": "^1.52.0",
+    "@playwright/test": "^1.52.0",
     "@sage/design-tokens": "~4.29.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/exec": "^6.0.3",
@@ -167,6 +167,7 @@
     "typescript": "~5.3.0",
     "url-loader": "^4.1.1",
     "uuid": "^8.3.2",
+    "vite": "^6.3.4",
     "webpack-dev-server": "^4.15.1"
   },
   "dependencies": {
@@ -189,7 +190,7 @@
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
-    "react-day-picker": "^9.3.2",
+    "react-day-picker": "~9.3.2",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-is": "^17.0.2",