carbon-react 153.0.1 → 153.0.3

package/esm/components/dialog/dialog.component.js

@@ -10,7 +10,9 @@ import IconButton from "../icon-button";
 import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
+import Logger from "../../__internal__/utils/logger";
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+let deprecatedTimeoutTrigger = false;
 export const Dialog = /*#__PURE__*/forwardRef(({
   className,
   "data-component": dataComponent = "dialog",
@@ -54,6 +56,10 @@ export const Dialog = /*#__PURE__*/forwardRef(({
     current: subtitleId
   } = useRef(createGuid());
   const isTopModal = useModalAria(containerRef);
+  if (!deprecatedTimeoutTrigger && rest?.timeout) {
+    deprecatedTimeoutTrigger = true;
+    Logger.deprecate("The timeout prop in Dialog is deprecated and will soon be removed.");
+  }
   useImperativeHandle(ref, () => ({
     focus() {
       containerRef.current?.focus();

package/esm/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ModalProps } from "../modal";
 import { CustomRefObject } from "../../__internal__/focus-trap";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface DialogFullScreenProps extends ModalProps {
+export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose"> {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
     "aria-describedby"?: string;
     /**
@@ -54,6 +54,8 @@ export interface DialogFullScreenProps extends ModalProps {
     focusableSelectors?: string;
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
+    /** @deprecated Determines if the Dialog can be closed */
+    disableClose?: boolean;
 }
 export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, closeButtonDataProps, restoreFocusOnClose, ...rest }: DialogFullScreenProps) => React.JSX.Element;
 export default DialogFullScreen;

package/esm/components/dialog-full-screen/dialog-full-screen.component.js

@@ -12,6 +12,9 @@ import Icon from "../icon";
 import useLocale from "../../hooks/__internal__/useLocale";
 import useModalAria from "../../hooks/__internal__/useModalAria/useModalAria";
 import tagComponent from "../../__internal__/utils/helpers/tags";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedDisableCloseTrigger = false;
+let deprecatedTimeoutTrigger = false;
 export const DialogFullScreen = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -49,6 +52,14 @@ export const DialogFullScreen = ({
     current: subtitleId
   } = useRef(createGuid());
   const isTopModal = useModalAria(dialogRef);
+  if (!deprecatedDisableCloseTrigger && rest?.disableClose) {
+    deprecatedDisableCloseTrigger = true;
+    Logger.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.");
+  }
+  if (!deprecatedTimeoutTrigger && rest?.timeout) {
+    deprecatedTimeoutTrigger = true;
+    Logger.deprecate("The timeout prop in DialogFullScreen is deprecated and will soon be removed.");
+  }
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/React.createElement(IconButton, _extends({

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

@@ -21,7 +21,7 @@ export interface ModalProps extends TagProps {
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
     /** Sets the open state of the modal */
     open: boolean;
-    /** Transition time */
+    /** @deprecated Transition time */
     timeout?: number;
     /** Manually override the internal modal stacking order to set this as top */
     topModalOverride?: boolean;

package/esm/components/switch/__internal__/switch-slider.component.js

@@ -48,7 +48,9 @@ const SwitchSlider = ({
   };
   const sliderContent = /*#__PURE__*/React.createElement(SwitchSliderPanel, _extends({
     "data-role": "slider-panel"
-  }, sliderPanelStyleProps), loading ? /*#__PURE__*/React.createElement(Loader, _extends({
+  }, sliderPanelStyleProps, {
+    "aria-live": "polite"
+  }), loading ? /*#__PURE__*/React.createElement(Loader, _extends({
     "data-role": "switch-slider-loader"
   }, loaderProps)) : panelContent);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HiddenContent, {

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

@@ -60,9 +60,13 @@ export const Switch = /*#__PURE__*/React.forwardRef(({
     Logger.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
   const onChangeInternal = useCallback(e => {
-    setCheckedInternal(e.target.checked);
-    onChange?.(e);
-  }, [setCheckedInternal, onChange]);
+    if (loading) {
+      e.preventDefault();
+    } else {
+      setCheckedInternal(e.target.checked);
+      onChange?.(e);
+    }
+  }, [setCheckedInternal, onChange, loading]);
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
   let shouldLabelBeInline = labelInline;
   // Coverage has been ignored here as this functionality is covered in a Playwright test.
@@ -88,7 +92,7 @@ export const Switch = /*#__PURE__*/React.forwardRef(({
   };
   const switchSliderProps = {
     checked: isControlled ? checked : checkedInternal,
-    disabled: disabled || loading,
+    disabled,
     loading,
     isDarkBackground,
     size,
@@ -102,7 +106,7 @@ export const Switch = /*#__PURE__*/React.forwardRef(({
     error,
     warning,
     info,
-    disabled: disabled || loading,
+    disabled,
     loading,
     checked: isControlled ? checked : checkedInternal,
     label,
@@ -143,7 +147,7 @@ export const Switch = /*#__PURE__*/React.forwardRef(({
   };
   const switchSliderPropsForNewValidation = {
     checked: isControlled ? checked : checkedInternal,
-    disabled: disabled || loading,
+    disabled,
     loading,
     isDarkBackground,
     size,
@@ -155,7 +159,7 @@ export const Switch = /*#__PURE__*/React.forwardRef(({
     // set aria-invalid but prevent validationIconId from being added to aria-describedby
     error: !!error,
     warning,
-    disabled: disabled || loading,
+    disabled,
     loading,
     checked: isControlled ? checked : checkedInternal,
     onBlur,

package/lib/components/dialog/dialog.component.js

@@ -15,11 +15,13 @@ var _iconButton = _interopRequireDefault(require("../icon-button"));
 var _icon = _interopRequireDefault(require("../icon"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
+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); }
 const PADDING_VALUES = [0, 1, 2, 3, 4, 5, 6, 7, 8];
+let deprecatedTimeoutTrigger = false;
 const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
   className,
   "data-component": dataComponent = "dialog",
@@ -63,6 +65,10 @@ const Dialog = exports.Dialog = /*#__PURE__*/(0, _react.forwardRef)(({
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const isTopModal = (0, _useModalAria.default)(containerRef);
+  if (!deprecatedTimeoutTrigger && rest?.timeout) {
+    deprecatedTimeoutTrigger = true;
+    _logger.default.deprecate("The timeout prop in Dialog is deprecated and will soon be removed.");
+  }
   (0, _react.useImperativeHandle)(ref, () => ({
     focus() {
       containerRef.current?.focus();

package/lib/components/dialog-full-screen/dialog-full-screen.component.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { ModalProps } from "../modal";
 import { CustomRefObject } from "../../__internal__/focus-trap";
 import { TagProps } from "../../__internal__/utils/helpers/tags";
-export interface DialogFullScreenProps extends ModalProps {
+export interface DialogFullScreenProps extends Omit<ModalProps, "disableClose"> {
     /** Prop to specify the aria-describedby property of the DialogFullscreen component */
     "aria-describedby"?: string;
     /**
@@ -54,6 +54,8 @@ export interface DialogFullScreenProps extends ModalProps {
     focusableSelectors?: string;
     /** A custom close event handler */
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent | React.MouseEvent<HTMLButtonElement>) => void;
+    /** @deprecated Determines if the Dialog can be closed */
+    disableClose?: boolean;
 }
 export declare const DialogFullScreen: ({ "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disableAutoFocus, focusFirstElement, bespokeFocusTrap, open, children, title, subtitle, pagesStyling, headerChildren, showCloseIcon, disableContentPadding, disableEscKey, onCancel, contentRef, help, role, focusableContainers, focusableSelectors, topModalOverride, closeButtonDataProps, restoreFocusOnClose, ...rest }: DialogFullScreenProps) => React.JSX.Element;
 export default DialogFullScreen;

package/lib/components/dialog-full-screen/dialog-full-screen.component.js

@@ -17,10 +17,13 @@ var _icon = _interopRequireDefault(require("../icon"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
 var _useModalAria = _interopRequireDefault(require("../../hooks/__internal__/useModalAria/useModalAria"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
+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 deprecatedDisableCloseTrigger = false;
+let deprecatedTimeoutTrigger = false;
 const DialogFullScreen = ({
   "aria-describedby": ariaDescribedBy,
   "aria-label": ariaLabel,
@@ -58,6 +61,14 @@ const DialogFullScreen = ({
     current: subtitleId
   } = (0, _react.useRef)((0, _guid.default)());
   const isTopModal = (0, _useModalAria.default)(dialogRef);
+  if (!deprecatedDisableCloseTrigger && rest?.disableClose) {
+    deprecatedDisableCloseTrigger = true;
+    _logger.default.deprecate("The disableClose prop in DialogFullScreen is deprecated and will soon be removed.");
+  }
+  if (!deprecatedTimeoutTrigger && rest?.timeout) {
+    deprecatedTimeoutTrigger = true;
+    _logger.default.deprecate("The timeout prop in DialogFullScreen is deprecated and will soon be removed.");
+  }
   const closeIcon = () => {
     if (!showCloseIcon || !onCancel) return null;
     return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({

package/lib/components/modal/modal.component.d.ts

@@ -21,7 +21,7 @@ export interface ModalProps extends TagProps {
     onCancel?: (ev: React.KeyboardEvent<HTMLElement> | KeyboardEvent) => void;
     /** Sets the open state of the modal */
     open: boolean;
-    /** Transition time */
+    /** @deprecated Transition time */
     timeout?: number;
     /** Manually override the internal modal stacking order to set this as top */
     topModalOverride?: boolean;

package/lib/components/switch/__internal__/switch-slider.component.js

@@ -55,7 +55,9 @@ const SwitchSlider = ({
   };
   const sliderContent = /*#__PURE__*/_react.default.createElement(_switchSliderPanel.default, _extends({
     "data-role": "slider-panel"
-  }, sliderPanelStyleProps), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
+  }, sliderPanelStyleProps, {
+    "aria-live": "polite"
+  }), loading ? /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
     "data-role": "switch-slider-loader"
   }, loaderProps)) : panelContent);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_switchSlider.HiddenContent, {

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

@@ -69,9 +69,13 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     _logger.default.deprecate("Uncontrolled behaviour in `Switch` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
   }
   const onChangeInternal = (0, _react.useCallback)(e => {
-    setCheckedInternal(e.target.checked);
-    onChange?.(e);
-  }, [setCheckedInternal, onChange]);
+    if (loading) {
+      e.preventDefault();
+    } else {
+      setCheckedInternal(e.target.checked);
+      onChange?.(e);
+    }
+  }, [setCheckedInternal, onChange, loading]);
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveLabelBreakpoint);
   let shouldLabelBeInline = labelInline;
   // Coverage has been ignored here as this functionality is covered in a Playwright test.
@@ -97,7 +101,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   };
   const switchSliderProps = {
     checked: isControlled ? checked : checkedInternal,
-    disabled: disabled || loading,
+    disabled,
     loading,
     isDarkBackground,
     size,
@@ -111,7 +115,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     error,
     warning,
     info,
-    disabled: disabled || loading,
+    disabled,
     loading,
     checked: isControlled ? checked : checkedInternal,
     label,
@@ -152,7 +156,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
   };
   const switchSliderPropsForNewValidation = {
     checked: isControlled ? checked : checkedInternal,
-    disabled: disabled || loading,
+    disabled,
     loading,
     isDarkBackground,
     size,
@@ -164,7 +168,7 @@ const Switch = exports.Switch = /*#__PURE__*/_react.default.forwardRef(({
     // set aria-invalid but prevent validationIconId from being added to aria-describedby
     error: !!error,
     warning,
-    disabled: disabled || loading,
+    disabled,
     loading,
     checked: isControlled ? checked : checkedInternal,
     onBlur,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "153.0.1",
+  "version": "153.0.3",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",
@@ -8,6 +8,7 @@
   ],
   "scripts": {
     "start": "node ./scripts/check_node_version.mjs && dotenvx run -- storybook dev -p 9001 -c .storybook",
+    "start:strict-mode": "node ./scripts/check_node_version.mjs && dotenvx run --env ENABLE_REACT_STRICT_MODE=true -- storybook dev -p 9001 -c .storybook",
     "test": "jest --config=./jest.config.ts",
     "test-update": "jest --config=./jest.config.ts --updateSnapshot",
     "format": "prettier --write './{src,playwright}/**/*.{js,jsx,ts,tsx}'",