carbon-react 119.5.1 → 119.6.1

package/esm/__internal__/focus-trap/focus-trap.component.js

@@ -97,8 +97,8 @@ const FocusTrap = _ref => {
   }, [trapWrappers]);
   useEffect(() => {
     const trapFn = ev => {
-      // block focus trap from working if it's not the topmost trap
-      if (!isTopModal) {
+      // block focus trap from working if it's not the topmost trap, or is currently closed
+      if (!isTopModal || !isOpen) {
         return;
       }
       const focusableElements = getFocusableElements(defaultFocusableSelectors);
@@ -108,7 +108,7 @@ const FocusTrap = _ref => {
     return function cleanup() {
       document.removeEventListener("keydown", trapFn, true);
     };
-  }, [bespokeTrap, wrapperRef, focusableSelectors, getFocusableElements, isTopModal]);
+  }, [bespokeTrap, wrapperRef, focusableSelectors, getFocusableElements, isTopModal, isOpen]);
   const updateCurrentFocusedElement = useCallback(() => {
     const focusableElements = getFocusableElements(focusableSelectors || defaultFocusableSelectors);
     const element = focusableElements?.find(el => el === document.activeElement);
@@ -163,13 +163,13 @@ const FocusTrap = _ref => {
   });
   return /*#__PURE__*/React.createElement("div", {
     ref: trapRef
-  }, /*#__PURE__*/React.createElement("div", {
+  }, isOpen && /*#__PURE__*/React.createElement("div", {
     "data-element": TAB_GUARD_TOP
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     onFocus: onTabGuardTopFocus(wrapperRef)
-  }), clonedChildren, /*#__PURE__*/React.createElement("div", {
+  }), clonedChildren, isOpen && /*#__PURE__*/React.createElement("div", {
     "data-element": TAB_GUARD_BOTTOM
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,

package/esm/__internal__/validation-message/validation-message.style.js

@@ -6,7 +6,7 @@ const StyledValidationMessage = styled.p`
   } = _ref;
   return css`
     color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
-    font-weight: ${isWarning ? "regular" : "bold"};
+    font-weight: ${isWarning ? "normal" : "bold"};
     margin-top: 0px;
     margin-bottom: 8px;
   `;

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

@@ -1,12 +1,16 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, useContext } from "react";
 import PropTypes from "prop-types";
-import StyledSwitch from "./switch.style";
+import StyledSwitch, { ErrorBorder, StyledHintText } from "./switch.style";
 import CheckableInput from "../../__internal__/checkable-input";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
+import Box from "../box";
+import Label from "../../__internal__/label";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -43,6 +47,9 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const isControlled = checked !== undefined;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const [checkedInternal, setCheckedInternal] = useState(defaultChecked || false);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -84,7 +91,7 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     error,
     warning,
     info,
-    useValidationIcon: !shouldValidationBeOnLabel && !disabled
+    useValidationIcon: !validationRedesignOptIn && !shouldValidationBeOnLabel && !disabled
   };
   const inputProps = {
     autoFocus,
@@ -93,6 +100,8 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     info,
     disabled: disabled || loading,
     checked: isControlled ? checked : checkedInternal,
+    label,
+    labelHelp,
     fieldHelpInline,
     labelInline: shouldLabelBeInline,
     labelSpacing,
@@ -101,8 +110,6 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onChange: isControlled ? onChange : onChangeInternal,
     id,
     name,
-    label,
-    labelHelp,
     value,
     type: "checkbox",
     role: "switch",
@@ -112,10 +119,53 @@ const Switch = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ref: ref || inputRef,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
+
+  // Created separate const declarations to help when removing the old validation.
+  // Not all props utilised by the old validation work or will be needed with the new validation.
+  const switchStylePropsForNewValidation = {
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    checked: isControlled ? checked : checkedInternal,
+    size,
+    ...marginProps
+  };
+  const switchSliderPropsForNewValidation = {
+    checked: isControlled ? checked : checkedInternal,
+    disabled: disabled || loading,
+    loading,
+    size,
+    error,
+    warning
+  };
+  const inputPropsForNewValidation = {
+    autoFocus,
+    error,
+    warning,
+    disabled: disabled || loading,
+    checked: isControlled ? checked : checkedInternal,
+    onBlur,
+    onFocus,
+    onChange: isControlled ? onChange : onChangeInternal,
+    id,
+    name,
+    value,
+    type: "checkbox",
+    role: "switch",
+    ref: ref || inputRef,
+    ...rest
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(StyledSwitch, switchStylePropsForNewValidation, /*#__PURE__*/React.createElement(Label, null, label, labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(CheckableInput, inputPropsForNewValidation, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderPropsForNewValidation))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps))));
+  }, /*#__PURE__*/React.createElement(StyledSwitch, switchStyleProps, /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(SwitchSlider, switchSliderProps)))));
 });
 Switch.propTypes = {
   "about": PropTypes.string,

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

@@ -1,4 +1,8 @@
 import { SwitchProps } from "./switch.component";
 declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
+export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
+    warning: boolean;
+}, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
 export default StyledSwitch;

package/esm/components/switch/switch.style.js

@@ -8,14 +8,37 @@ import { StyledCheckableInput } from "../../__internal__/checkable-input/checkab
 import StyledSwitchSlider from "./__internal__/switch-slider.style";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import { FieldLineStyle } from "../../__internal__/form-field/form-field.style";
-const StyledSwitch = styled.div`
+export const ErrorBorder = styled.span`
   ${_ref => {
+  let {
+    warning
+  } = _ref;
+  return css`
+      position: absolute;
+      z-index: 6;
+      width: 2px;
+      background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
+      left: -12px;
+      bottom: -4px;
+      top: 2px;
+    `;
+}}
+`;
+export const StyledHintText = styled.div`
+  margin-top: 8px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+  font-weight: 400;
+`;
+const StyledSwitch = styled.div`
+  ${_ref2 => {
   let {
     fieldHelpInline,
     labelInline,
     reverse,
     size
-  } = _ref;
+  } = _ref2;
   return css`
     ${margin}
     ${FieldLineStyle} {

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -107,8 +107,8 @@ const FocusTrap = _ref => {
   }, [trapWrappers]);
   (0, _react.useEffect)(() => {
     const trapFn = ev => {
-      // block focus trap from working if it's not the topmost trap
-      if (!isTopModal) {
+      // block focus trap from working if it's not the topmost trap, or is currently closed
+      if (!isTopModal || !isOpen) {
         return;
       }
       const focusableElements = getFocusableElements(_focusTrapUtils.defaultFocusableSelectors);
@@ -118,7 +118,7 @@ const FocusTrap = _ref => {
     return function cleanup() {
       document.removeEventListener("keydown", trapFn, true);
     };
-  }, [bespokeTrap, wrapperRef, focusableSelectors, getFocusableElements, isTopModal]);
+  }, [bespokeTrap, wrapperRef, focusableSelectors, getFocusableElements, isTopModal, isOpen]);
   const updateCurrentFocusedElement = (0, _react.useCallback)(() => {
     const focusableElements = getFocusableElements(focusableSelectors || _focusTrapUtils.defaultFocusableSelectors);
     const element = focusableElements?.find(el => el === document.activeElement);
@@ -173,13 +173,13 @@ const FocusTrap = _ref => {
   });
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: trapRef
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, isOpen && /*#__PURE__*/_react.default.createElement("div", {
     "data-element": TAB_GUARD_TOP
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,
     tabIndex: 0,
     onFocus: onTabGuardTopFocus(wrapperRef)
-  }), clonedChildren, /*#__PURE__*/_react.default.createElement("div", {
+  }), clonedChildren, isOpen && /*#__PURE__*/_react.default.createElement("div", {
     "data-element": TAB_GUARD_BOTTOM
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
     ,

package/lib/__internal__/validation-message/validation-message.style.js

@@ -14,7 +14,7 @@ const StyledValidationMessage = _styledComponents.default.p`
   } = _ref;
   return (0, _styledComponents.css)`
     color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
-    font-weight: ${isWarning ? "regular" : "bold"};
+    font-weight: ${isWarning ? "normal" : "bold"};
     margin-top: 0px;
     margin-bottom: 8px;
   `;

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

@@ -6,13 +6,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.Switch = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _switch = _interopRequireDefault(require("./switch.style"));
+var _switch = _interopRequireWildcard(require("./switch.style"));
 var _checkableInput = _interopRequireDefault(require("../../__internal__/checkable-input"));
 var _switchSlider = _interopRequireDefault(require("./__internal__/switch-slider.component"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
+var _box = _interopRequireDefault(require("../box"));
+var _label = _interopRequireDefault(require("../../__internal__/label"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -52,6 +56,9 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...rest
   } = _ref;
   const isControlled = checked !== undefined;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const [checkedInternal, setCheckedInternal] = (0, _react.useState)(defaultChecked || false);
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -93,7 +100,7 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     error,
     warning,
     info,
-    useValidationIcon: !shouldValidationBeOnLabel && !disabled
+    useValidationIcon: !validationRedesignOptIn && !shouldValidationBeOnLabel && !disabled
   };
   const inputProps = {
     autoFocus,
@@ -102,6 +109,8 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     info,
     disabled: disabled || loading,
     checked: isControlled ? checked : checkedInternal,
+    label,
+    labelHelp,
     fieldHelpInline,
     labelInline: shouldLabelBeInline,
     labelSpacing,
@@ -110,8 +119,6 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     onChange: isControlled ? onChange : onChangeInternal,
     id,
     name,
-    label,
-    labelHelp,
     value,
     type: "checkbox",
     role: "switch",
@@ -121,10 +128,53 @@ const Switch = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ref: ref || inputRef,
     ...rest
   };
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+
+  // Created separate const declarations to help when removing the old validation.
+  // Not all props utilised by the old validation work or will be needed with the new validation.
+  const switchStylePropsForNewValidation = {
+    "data-component": dataComponent,
+    "data-role": dataRole,
+    "data-element": dataElement,
+    checked: isControlled ? checked : checkedInternal,
+    size,
+    ...marginProps
+  };
+  const switchSliderPropsForNewValidation = {
+    checked: isControlled ? checked : checkedInternal,
+    disabled: disabled || loading,
+    loading,
+    size,
+    error,
+    warning
+  };
+  const inputPropsForNewValidation = {
+    autoFocus,
+    error,
+    warning,
+    disabled: disabled || loading,
+    checked: isControlled ? checked : checkedInternal,
+    onBlur,
+    onFocus,
+    onChange: isControlled ? onChange : onChangeInternal,
+    id,
+    name,
+    value,
+    type: "checkbox",
+    role: "switch",
+    ref: ref || inputRef,
+    ...rest
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_switch.default, switchStylePropsForNewValidation, /*#__PURE__*/_react.default.createElement(_label.default, null, label, labelHelp && /*#__PURE__*/_react.default.createElement(_switch.StyledHintText, null, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_switch.ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputPropsForNewValidation, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderPropsForNewValidation))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps))));
+  }, /*#__PURE__*/_react.default.createElement(_switch.default, switchStyleProps, /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_switchSlider.default, switchSliderProps)))));
 });
 exports.Switch = Switch;
 Switch.propTypes = {

package/lib/components/switch/switch.style.d.ts

@@ -1,4 +1,8 @@
 import { SwitchProps } from "./switch.component";
 declare type StyledSwitchProps = Pick<SwitchProps, "fieldHelpInline" | "labelInline" | "reverse" | "size">;
+export declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
+    warning: boolean;
+}, never>;
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const StyledSwitch: import("styled-components").StyledComponent<"div", any, StyledSwitchProps, never>;
 export default StyledSwitch;

package/lib/components/switch/switch.style.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledHintText = exports.ErrorBorder = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _base = _interopRequireDefault(require("../../style/themes/base"));
@@ -17,14 +17,39 @@ var _formField = require("../../__internal__/form-field/form-field.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StyledSwitch = _styledComponents.default.div`
+const ErrorBorder = _styledComponents.default.span`
   ${_ref => {
+  let {
+    warning
+  } = _ref;
+  return (0, _styledComponents.css)`
+      position: absolute;
+      z-index: 6;
+      width: 2px;
+      background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
+      left: -12px;
+      bottom: -4px;
+      top: 2px;
+    `;
+}}
+`;
+exports.ErrorBorder = ErrorBorder;
+const StyledHintText = _styledComponents.default.div`
+  margin-top: 8px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+  font-weight: 400;
+`;
+exports.StyledHintText = StyledHintText;
+const StyledSwitch = _styledComponents.default.div`
+  ${_ref2 => {
   let {
     fieldHelpInline,
     labelInline,
     reverse,
     size
-  } = _ref;
+  } = _ref2;
   return (0, _styledComponents.css)`
     ${_styledSystem.margin}
     ${_formField.FieldLineStyle} {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.5.1",
+  "version": "119.6.1",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",