carbon-react 153.7.0 → 153.8.0

package/lib/components/step-flow/__internal__/step-flow.context.d.ts

@@ -1,4 +1,4 @@
-import React from "react";
+/// <reference types="react" />
 export type StepFlowContextType = {
     validatedCurrentStep?: number;
     totalSteps?: number;
@@ -6,5 +6,5 @@ export type StepFlowContextType = {
     category?: string;
     titleRef?: React.RefObject<HTMLDivElement>;
 };
-declare const StepFlowContext: React.Context<StepFlowContextType>;
-export default StepFlowContext;
+declare const StepFlowProvider: import("react").Provider<StepFlowContextType | null>, useStepFlowContext: () => StepFlowContextType;
+export { StepFlowProvider, useStepFlowContext };

package/lib/components/step-flow/__internal__/step-flow.context.js

@@ -3,8 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+exports.useStepFlowContext = exports.StepFlowProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const StepFlowContext = /*#__PURE__*/_react.default.createContext({});
-var _default = exports.default = StepFlowContext;
+const [StepFlowProvider, useStepFlowContext] = (0, _createStrictContext.default)({
+  name: "StepFlowContext",
+  errorMessage: "Carbon StepFlow: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {}
+});
+exports.useStepFlowContext = useStepFlowContext;
+exports.StepFlowProvider = StepFlowProvider;

package/lib/components/step-flow/step-flow-title/step-flow-title.component.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StepFlowTitle = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _typography = _interopRequireDefault(require("../../typography"));
 var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
-var _stepFlow = _interopRequireDefault(require("../__internal__/step-flow.context"));
+var _stepFlow = require("../__internal__/step-flow.context");
 var _stepFlow2 = require("../step-flow.style");
 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; }
 const StepFlowTitle = ({
   titleString,
   titleVariant,
@@ -24,7 +22,7 @@ const StepFlowTitle = ({
     totalSteps,
     category,
     titleVariant: titleVariantContext
-  } = (0, _react.useContext)(_stepFlow.default);
+  } = (0, _stepFlow.useStepFlowContext)();
   return /*#__PURE__*/_react.default.createElement(_stepFlow2.StyledTitleFocusWrapper, {
     "data-role": "title-text-wrapper",
     "data-element": "title-text-wrapper",

package/lib/components/step-flow/step-flow.component.js

@@ -11,7 +11,7 @@ var _stepFlow = require("./step-flow.style");
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _typography = _interopRequireDefault(require("../typography"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
-var _stepFlow2 = _interopRequireDefault(require("./__internal__/step-flow.context"));
+var _stepFlow2 = require("./__internal__/step-flow.context");
 var _stepFlowTitle = _interopRequireDefault(require("./step-flow-title/step-flow-title.component"));
 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); }
@@ -81,7 +81,7 @@ const StepFlow = exports.StepFlow = /*#__PURE__*/(0, _react.forwardRef)(({
       titleRef.current?.focus();
     }
   }), []);
-  const stepFlowTitle = /*#__PURE__*/_react.default.createElement(_stepFlow2.default.Provider, {
+  const stepFlowTitle = /*#__PURE__*/_react.default.createElement(_stepFlow2.StepFlowProvider, {
     value: {
       validatedCurrentStep,
       totalSteps,

package/lib/components/step-sequence/__internal__/step-sequence.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface StepSequenceContextType {
+    orientation: "horizontal" | "vertical";
+}
+declare const StepSequenceProvider: import("react").Provider<StepSequenceContextType | null>, useStepSequenceContext: () => StepSequenceContextType;
+export { StepSequenceProvider, useStepSequenceContext };

package/lib/components/step-sequence/__internal__/step-sequence.context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStepSequenceContext = exports.StepSequenceProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [StepSequenceProvider, useStepSequenceContext] = (0, _createStrictContext.default)({
+  name: "StepSequenceContext",
+  errorMessage: "Carbon StepSequence: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    orientation: "horizontal"
+  }
+});
+exports.useStepSequenceContext = useStepSequenceContext;
+exports.StepSequenceProvider = StepSequenceProvider;

package/lib/components/step-sequence/step-sequence-item/step-sequence-item.component.js

@@ -4,14 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.StepSequenceItem = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _stepSequenceItem = require("./step-sequence-item.style");
 var _icon = _interopRequireDefault(require("../../icon"));
-var _stepSequence = require("../step-sequence.component");
+var _stepSequence = require("../__internal__/step-sequence.context");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 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); }
 const StepSequenceItem = ({
   hideIndicator = false,
@@ -25,7 +23,7 @@ const StepSequenceItem = ({
 }) => {
   const {
     orientation
-  } = (0, _react.useContext)(_stepSequence.StepSequenceContext);
+  } = (0, _stepSequence.useStepSequenceContext)();
   const indicatorText = () => {
     return !hideIndicator ? /*#__PURE__*/_react.default.createElement(_stepSequenceItem.StyledStepSequenceItemIndicator, null, indicator) : null;
   };

package/lib/components/step-sequence/step-sequence.component.d.ts

@@ -1,9 +1,6 @@
 import React from "react";
 import { SpaceProps } from "styled-system";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export declare const StepSequenceContext: React.Context<{
-    orientation: "horizontal" | "vertical";
-}>;
 export interface StepSequenceProps extends SpaceProps, TagProps {
     /** Step sequence items to be rendered */
     children: React.ReactNode;

package/lib/components/step-sequence/step-sequence.component.js

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.StepSequenceContext = exports.StepSequence = void 0;
+exports.default = exports.StepSequence = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _stepSequence = _interopRequireDefault(require("./step-sequence.style"));
+var _stepSequence2 = require("./__internal__/step-sequence.context");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: 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); }
-const StepSequenceContext = exports.StepSequenceContext = /*#__PURE__*/_react.default.createContext({
-  orientation: "horizontal"
-});
 const StepSequence = ({
   children,
   orientation = "horizontal",
@@ -20,7 +18,7 @@ const StepSequence = ({
   return /*#__PURE__*/_react.default.createElement(_stepSequence.default, _extends({
     orientation: orientation,
     p: 0
-  }, props, (0, _tags.default)("step-sequence", props)), /*#__PURE__*/_react.default.createElement(StepSequenceContext.Provider, {
+  }, props, (0, _tags.default)("step-sequence", props)), /*#__PURE__*/_react.default.createElement(_stepSequence2.StepSequenceProvider, {
     value: {
       orientation
     }

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/tile/__internal__/tile.context.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 import { PaddingProps } from "styled-system";
-interface TileContextProps {
-    isHorizontal?: boolean;
+interface TileContextType {
+    isHorizontal: boolean;
     paddingPropsFromTile: PaddingProps;
 }
-declare const _default: import("react").Context<TileContextProps>;
-export default _default;
+declare const TileProvider: import("react").Provider<TileContextType | null>, useTileContext: () => TileContextType;
+export { TileProvider, useTileContext };

package/lib/components/tile/__internal__/tile.context.js

@@ -3,8 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _react = require("react");
-var _default = exports.default = /*#__PURE__*/(0, _react.createContext)({
-  paddingPropsFromTile: {}
-});
+exports.useTileContext = exports.TileProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [TileProvider, useTileContext] = (0, _createStrictContext.default)({
+  name: "TileContext",
+  errorMessage: "Carbon Tile: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    paddingPropsFromTile: {},
+    isHorizontal: false
+  }
+});
+exports.useTileContext = useTileContext;
+exports.TileProvider = TileProvider;

package/lib/components/tile/tile-content/tile-content.component.js

@@ -4,15 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _tileContent = _interopRequireDefault(require("./tile-content.style"));
-var _tile = _interopRequireDefault(require("../__internal__/tile.context"));
+var _tile = require("../__internal__/tile.context");
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-padding-props"));
 var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../../style/utils/filter-styled-system-margin-props"));
 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); }
 const TileContent = ({
   children,
@@ -23,7 +21,7 @@ const TileContent = ({
   const {
     isHorizontal,
     paddingPropsFromTile
-  } = (0, _react.useContext)(_tile.default);
+  } = (0, _tile.useTileContext)();
   if (!children) {
     return null;
   }

package/lib/components/tile/tile.component.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Tile = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tile = _interopRequireDefault(require("./tile.style"));
-var _tile2 = _interopRequireDefault(require("./__internal__/tile.context"));
+var _tile2 = require("./__internal__/tile.context");
 var _filterStyledSystemPaddingProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-padding-props"));
 var _filterStyledSystemMarginProps = _interopRequireDefault(require("../../style/utils/filter-styled-system-margin-props"));
 var _computeContentPadding = _interopRequireDefault(require("./__internal__/compute-content-padding"));
@@ -43,7 +43,7 @@ const Tile = ({
     highlightVariant: highlightVariant,
     borderWidth: borderWidth,
     borderVariant: borderVariant
-  }, paddingProps, marginProps, (0, _tags.default)("tile", rest)), /*#__PURE__*/_react.default.createElement(_tile2.default.Provider, {
+  }, paddingProps, marginProps, (0, _tags.default)("tile", rest)), /*#__PURE__*/_react.default.createElement(_tile2.TileProvider, {
     value: {
       isHorizontal,
       paddingPropsFromTile: contentPaddingProps

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/lib/components/vertical-menu/__internal__/vertical-menu.context.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface VerticalMenuContextType {
+    isFullScreen: boolean;
+}
+declare const VerticalMenuProvider: import("react").Provider<VerticalMenuContextType | null>, useVerticalMenuContext: () => VerticalMenuContextType;
+export { VerticalMenuProvider, useVerticalMenuContext };

package/lib/components/vertical-menu/__internal__/vertical-menu.context.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useVerticalMenuContext = exports.VerticalMenuProvider = void 0;
+var _createStrictContext = _interopRequireDefault(require("../../../__internal__/utils/createStrictContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [VerticalMenuProvider, useVerticalMenuContext] = (0, _createStrictContext.default)({
+  name: "VerticalMenuContext",
+  errorMessage: "Carbon VerticalMenu: Context not found. Have you wrapped your Carbon subcomponents properly? See stack trace for more details.",
+  defaultValue: {
+    isFullScreen: false
+  }
+});
+exports.useVerticalMenuContext = useVerticalMenuContext;
+exports.VerticalMenuProvider = VerticalMenuProvider;

package/lib/components/vertical-menu/vertical-menu-full-screen/vertical-menu-full-screen.component.js

@@ -13,7 +13,7 @@ var _iconButton = _interopRequireDefault(require("../../icon-button"));
 var _icon = _interopRequireDefault(require("../../icon"));
 var _box = _interopRequireDefault(require("../../box"));
 var _verticalMenu = require("../vertical-menu.style");
-var _verticalMenuFullScreen = _interopRequireDefault(require("./__internal__/vertical-menu-full-screen.context"));
+var _verticalMenu2 = require("../__internal__/vertical-menu.context");
 var _globals = require("../../../__internal__/dom/globals");
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events/events"));
 var _useModalManager = _interopRequireDefault(require("../../../hooks/__internal__/useModalManager"));
@@ -73,7 +73,7 @@ const VerticalMenuFullScreen = ({
   }, /*#__PURE__*/_react.default.createElement(_icon.default, {
     type: "close",
     color: "var(--colorsComponentsLeftnavWinterStandardContent)"
-  }))), /*#__PURE__*/_react.default.createElement(_verticalMenuFullScreen.default.Provider, {
+  }))), /*#__PURE__*/_react.default.createElement(_verticalMenu2.VerticalMenuProvider, {
     value: {
       isFullScreen: true
     }

package/lib/components/vertical-menu/vertical-menu-item/vertical-menu-item.component.js

@@ -7,9 +7,9 @@ exports.default = exports.VerticalMenuItem = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _tags = _interopRequireDefault(require("../../../__internal__/utils/helpers/tags"));
 var _utils = require("../../../style/utils");
-var _verticalMenuFullScreen = _interopRequireDefault(require("../vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context"));
 var _verticalMenu = require("../vertical-menu.style");
 var _menuItem = _interopRequireDefault(require("./__internal__/menu-item.context"));
+var _verticalMenu2 = require("../__internal__/vertical-menu.context");
 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; }
@@ -35,7 +35,7 @@ const VerticalMenuItem = ({
   } = (0, _react.useContext)(_menuItem.default);
   const {
     isFullScreen
-  } = (0, _react.useContext)(_verticalMenuFullScreen.default);
+  } = (0, _verticalMenu2.useVerticalMenuContext)();
   const renderAdornment = () => typeof adornment === "function" ? adornment(isOpen) : adornment;
   const shouldDisplayActiveState = typeof active === "function" ? active(isOpen) : active;
   let itemProps = {};

package/lib/components/vertical-menu/vertical-menu.component.js

@@ -7,6 +7,7 @@ exports.default = exports.VerticalMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _verticalMenu = require("./vertical-menu.style");
+var _verticalMenu2 = require("./__internal__/vertical-menu.context");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: 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); }
 const VerticalMenu = ({
@@ -28,7 +29,11 @@ const VerticalMenu = ({
     overflow: "auto",
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy
-  }, (0, _tags.default)("vertical-menu", rest)), /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, children));
+  }, (0, _tags.default)("vertical-menu", rest)), /*#__PURE__*/_react.default.createElement(_verticalMenu.StyledList, null, /*#__PURE__*/_react.default.createElement(_verticalMenu2.VerticalMenuProvider, {
+    value: {
+      isFullScreen: false
+    }
+  }, children)));
 };
 exports.VerticalMenu = VerticalMenu;
 var _default = exports.default = VerticalMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "153.7.0",
+  "version": "153.8.0",
   "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",

package/esm/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-declare const VerticalMenuFullScreenContext: React.Context<{
-    isFullScreen: boolean;
-}>;
-export default VerticalMenuFullScreenContext;

package/esm/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.js

@@ -1,5 +0,0 @@
-import React from "react";
-const VerticalMenuFullScreenContext = /*#__PURE__*/React.createContext({
-  isFullScreen: false
-});
-export default VerticalMenuFullScreenContext;

package/lib/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.d.ts

@@ -1,5 +0,0 @@
-import React from "react";
-declare const VerticalMenuFullScreenContext: React.Context<{
-    isFullScreen: boolean;
-}>;
-export default VerticalMenuFullScreenContext;

package/lib/components/vertical-menu/vertical-menu-full-screen/__internal__/vertical-menu-full-screen.context.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const VerticalMenuFullScreenContext = /*#__PURE__*/_react.default.createContext({
-  isFullScreen: false
-});
-var _default = exports.default = VerticalMenuFullScreenContext;