carbon-react 111.18.0 → 111.19.0

package/esm/__internal__/form-field/form-field.component.js

@@ -1,6 +1,6 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-import React, { useContext, useEffect, useMemo } from "react";
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -62,10 +62,24 @@ const FormField = ({
     setWarning,
     setInfo
   } = useContext(TabContext);
+  const isMounted = useRef(false);
+  useLayoutEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   useEffect(() => {
-    if (setError) setError(id, !!error);
-    if (setWarning) setWarning(id, !!warning);
-    if (setInfo) setInfo(id, !!info);
+    if (setError) setError(id, error);
+    if (setWarning) setWarning(id, warning);
+    if (setInfo) setInfo(id, info);
+    return () => {
+      if (!isMounted.current) {
+        if (setError && error) setError(id, false);
+        if (setWarning && warning) setWarning(id, false);
+        if (setInfo && info) setInfo(id, false);
+      }
+    };
   }, [id, setError, setWarning, setInfo, error, warning, info]);
   const marginProps = filterStyledSystemMarginProps(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/React.createElement(FieldHelp, {

package/esm/components/tabs/tab/tab.component.js

@@ -27,24 +27,24 @@ const Tab = ({
   const [tabErrors, setTabErrors] = useState({});
   const [tabWarnings, setTabWarnings] = useState({});
   const [tabInfos, setTabInfos] = useState({});
-  const setError = useCallback((childId, hasError) => {
-    if (tabErrors[childId] !== hasError) {
+  const setError = useCallback((childId, error) => {
+    if (tabErrors[childId] !== error) {
       setTabErrors({ ...tabErrors,
-        [childId]: hasError
+        [childId]: error
       });
     }
   }, [tabErrors]);
-  const setWarning = useCallback((childId, hasWarning) => {
-    if (tabWarnings[childId] !== hasWarning) {
+  const setWarning = useCallback((childId, warning) => {
+    if (tabWarnings[childId] !== warning) {
       setTabWarnings({ ...tabWarnings,
-        [childId]: hasWarning
+        [childId]: warning
       });
     }
   }, [tabWarnings]);
-  const setInfo = useCallback((childId, hasInfo) => {
-    if (tabInfos[childId] !== hasInfo) {
+  const setInfo = useCallback((childId, info) => {
+    if (tabInfos[childId] !== info) {
       setTabInfos({ ...tabInfos,
-        [childId]: hasInfo
+        [childId]: info
       });
     }
   }, [tabInfos]);

package/esm/components/tabs/tab/tab.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { PaddingProps } from "styled-system";
 
 export interface TabContextProps {
-  setError?: (childId: string, hasError: boolean) => void;
-  setWarning?: (childId: string, hasWarning: boolean) => void;
-  setInfo?: (childId: string, hasInfo: boolean) => void;
+  setError?: (childId: string, error?: boolean | string) => void;
+  setWarning?: (childId: string, warning?: boolean | string) => void;
+  setInfo?: (childId: string, info?: boolean | string) => void;
 }
 
 export interface TabProps extends PaddingProps {

package/esm/components/tabs/tabs.component.js

@@ -27,6 +27,7 @@ const Tabs = ({
   variant = "default",
   validationStatusOverride,
   headerWidth,
+  showValidationsSummary,
   ...rest
 }) => {
   /** The children nodes converted into an Array */
@@ -48,24 +49,24 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = useState({});
   const [tabsWarnings, setTabsWarnings] = useState({});
   const [tabsInfos, setTabsInfos] = useState({});
-  const updateErrors = useCallback((id, hasError) => {
-    if (tabsErrors[id] !== hasError) {
+  const updateErrors = useCallback((id, error) => {
+    if (tabsErrors[id] !== error) {
       setTabsErrors({ ...tabsErrors,
-        [id]: hasError
+        [id]: error
       });
     }
   }, [tabsErrors]);
-  const updateWarnings = useCallback((id, hasWarning) => {
-    if (tabsWarnings[id] !== hasWarning) {
+  const updateWarnings = useCallback((id, warning) => {
+    if (tabsWarnings[id] !== warning) {
       setTabsWarnings({ ...tabsWarnings,
-        [id]: hasWarning
+        [id]: warning
       });
     }
   }, [tabsWarnings]);
-  const updateInfos = useCallback((id, hasInfo) => {
-    if (tabsInfos[id] !== hasInfo) {
+  const updateInfos = useCallback((id, info) => {
+    if (tabsInfos[id] !== info) {
       setTabsInfos({ ...tabsInfos,
-        [id]: hasInfo
+        [id]: info
       });
     }
   }, [tabsInfos]);
@@ -182,16 +183,34 @@ const Tabs = ({
         customLayout
       } = child.props;
       const refId = `${tabId}-tab`;
-      const errors = tabsErrors[tabId] ? Object.entries(tabsErrors[tabId]).filter(tab => tab[1] === true).length : 0;
-      const warnings = tabsWarnings[tabId] ? Object.entries(tabsWarnings[tabId]).filter(tab => tab[1] === true).length : 0;
-      const infos = tabsInfos[tabId] ? Object.entries(tabsInfos[tabId]).filter(tab => tab[1] === true).length : 0;
+      const errors = tabsErrors[tabId];
+      const warnings = tabsWarnings[tabId];
+      const infos = tabsInfos[tabId];
+      const errorsCount = errors && Object.entries(errors).filter(tab => tab[1]).length;
+      const warningsCount = warnings && Object.entries(warnings).filter(tab => tab[1]).length;
+      const infosCount = infos && Object.entries(infos).filter(tab => tab[1]).length;
       const hasOverride = validationStatusOverride && validationStatusOverride[tabId];
       const errorOverride = hasOverride && validationStatusOverride[tabId].error;
       const warningOverride = hasOverride && validationStatusOverride[tabId].warning;
       const infoOverride = hasOverride && validationStatusOverride[tabId].info;
-      const tabHasError = errorOverride !== undefined ? errorOverride : errors > 0;
-      const tabHasWarning = warningOverride !== undefined ? warningOverride : warnings > 0 && !tabHasError;
-      const tabHasInfo = infoOverride !== undefined ? infoOverride : infos > 0 && !tabHasError && !tabHasWarning;
+      const tabHasError = errorOverride !== undefined ? errorOverride : !!errorsCount;
+      const tabHasWarning = warningOverride !== undefined ? warningOverride : !!warningsCount && !tabHasError;
+      const tabHasInfo = infoOverride !== undefined ? infoOverride : !!infosCount && !tabHasError && !tabHasWarning;
+
+      const getValidationMessage = (message, validations = {}) => {
+        const summaryOfMessages = Object.values(validations).filter(value => value && typeof value === "string");
+
+        if (!showValidationsSummary || !summaryOfMessages.length) {
+          return message;
+        }
+
+        if (summaryOfMessages.length === 1) {
+          return summaryOfMessages[0];
+        }
+
+        return summaryOfMessages.map(value => `• ${value}`).join("\n");
+      };
+
       const tabTitle = /*#__PURE__*/React.createElement(TabTitle, {
         position: isInSidebar ? "left" : position,
         className: child.props.className || "",
@@ -212,9 +231,9 @@ const Tabs = ({
         borders: borders !== "off",
         siblings: siblings,
         titlePosition: titlePosition,
-        errorMessage: errorMessage,
-        warningMessage: warningMessage,
-        infoMessage: infoMessage,
+        errorMessage: getValidationMessage(errorMessage, errors),
+        warningMessage: getValidationMessage(warningMessage, warnings),
+        infoMessage: getValidationMessage(infoMessage, infos),
         alternateStyling: variant === "alternate",
         noLeftBorder: ["no left side", "no sides"].includes(borders),
         noRightBorder: ["no right side", "no sides"].includes(borders),
@@ -341,6 +360,11 @@ Tabs.propTypes = { ...marginPropTypes,
       warning: PropTypes.bool,
       info: PropTypes.bool
     })
-  })
+  }),
+
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary: PropTypes.bool
 };
 export { Tabs, Tab };

package/esm/components/tabs/tabs.d.ts

@@ -40,6 +40,10 @@ export interface TabsProps extends MarginProps {
       info?: boolean;
     };
   };
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary?: boolean;
 }
 
 declare function Tabs(props: TabsProps): JSX.Element;

package/lib/__internal__/form-field/form-field.component.js

@@ -84,10 +84,24 @@ const FormField = ({
     setWarning,
     setInfo
   } = (0, _react.useContext)(_tab.TabContext);
+  const isMounted = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
   (0, _react.useEffect)(() => {
-    if (setError) setError(id, !!error);
-    if (setWarning) setWarning(id, !!warning);
-    if (setInfo) setInfo(id, !!info);
+    if (setError) setError(id, error);
+    if (setWarning) setWarning(id, warning);
+    if (setInfo) setInfo(id, info);
+    return () => {
+      if (!isMounted.current) {
+        if (setError && error) setError(id, false);
+        if (setWarning && warning) setWarning(id, false);
+        if (setInfo && info) setInfo(id, false);
+      }
+    };
   }, [id, setError, setWarning, setInfo, error, warning, info]);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {

package/lib/components/tabs/tab/tab.component.js

@@ -48,24 +48,24 @@ const Tab = ({
   const [tabErrors, setTabErrors] = (0, _react.useState)({});
   const [tabWarnings, setTabWarnings] = (0, _react.useState)({});
   const [tabInfos, setTabInfos] = (0, _react.useState)({});
-  const setError = (0, _react.useCallback)((childId, hasError) => {
-    if (tabErrors[childId] !== hasError) {
+  const setError = (0, _react.useCallback)((childId, error) => {
+    if (tabErrors[childId] !== error) {
       setTabErrors({ ...tabErrors,
-        [childId]: hasError
+        [childId]: error
       });
     }
   }, [tabErrors]);
-  const setWarning = (0, _react.useCallback)((childId, hasWarning) => {
-    if (tabWarnings[childId] !== hasWarning) {
+  const setWarning = (0, _react.useCallback)((childId, warning) => {
+    if (tabWarnings[childId] !== warning) {
       setTabWarnings({ ...tabWarnings,
-        [childId]: hasWarning
+        [childId]: warning
       });
     }
   }, [tabWarnings]);
-  const setInfo = (0, _react.useCallback)((childId, hasInfo) => {
-    if (tabInfos[childId] !== hasInfo) {
+  const setInfo = (0, _react.useCallback)((childId, info) => {
+    if (tabInfos[childId] !== info) {
       setTabInfos({ ...tabInfos,
-        [childId]: hasInfo
+        [childId]: info
       });
     }
   }, [tabInfos]);

package/lib/components/tabs/tab/tab.d.ts

@@ -2,9 +2,9 @@ import * as React from "react";
 import { PaddingProps } from "styled-system";
 
 export interface TabContextProps {
-  setError?: (childId: string, hasError: boolean) => void;
-  setWarning?: (childId: string, hasWarning: boolean) => void;
-  setInfo?: (childId: string, hasInfo: boolean) => void;
+  setError?: (childId: string, error?: boolean | string) => void;
+  setWarning?: (childId: string, warning?: boolean | string) => void;
+  setInfo?: (childId: string, info?: boolean | string) => void;
 }
 
 export interface TabProps extends PaddingProps {

package/lib/components/tabs/tabs.component.js

@@ -57,6 +57,7 @@ const Tabs = ({
   variant = "default",
   validationStatusOverride,
   headerWidth,
+  showValidationsSummary,
   ...rest
 }) => {
   /** The children nodes converted into an Array */
@@ -78,24 +79,24 @@ const Tabs = ({
   const [tabsErrors, setTabsErrors] = (0, _react.useState)({});
   const [tabsWarnings, setTabsWarnings] = (0, _react.useState)({});
   const [tabsInfos, setTabsInfos] = (0, _react.useState)({});
-  const updateErrors = (0, _react.useCallback)((id, hasError) => {
-    if (tabsErrors[id] !== hasError) {
+  const updateErrors = (0, _react.useCallback)((id, error) => {
+    if (tabsErrors[id] !== error) {
       setTabsErrors({ ...tabsErrors,
-        [id]: hasError
+        [id]: error
       });
     }
   }, [tabsErrors]);
-  const updateWarnings = (0, _react.useCallback)((id, hasWarning) => {
-    if (tabsWarnings[id] !== hasWarning) {
+  const updateWarnings = (0, _react.useCallback)((id, warning) => {
+    if (tabsWarnings[id] !== warning) {
       setTabsWarnings({ ...tabsWarnings,
-        [id]: hasWarning
+        [id]: warning
       });
     }
   }, [tabsWarnings]);
-  const updateInfos = (0, _react.useCallback)((id, hasInfo) => {
-    if (tabsInfos[id] !== hasInfo) {
+  const updateInfos = (0, _react.useCallback)((id, info) => {
+    if (tabsInfos[id] !== info) {
       setTabsInfos({ ...tabsInfos,
-        [id]: hasInfo
+        [id]: info
       });
     }
   }, [tabsInfos]);
@@ -216,16 +217,33 @@ const Tabs = ({
         customLayout
       } = child.props;
       const refId = `${tabId}-tab`;
-      const errors = tabsErrors[tabId] ? Object.entries(tabsErrors[tabId]).filter(tab => tab[1] === true).length : 0;
-      const warnings = tabsWarnings[tabId] ? Object.entries(tabsWarnings[tabId]).filter(tab => tab[1] === true).length : 0;
-      const infos = tabsInfos[tabId] ? Object.entries(tabsInfos[tabId]).filter(tab => tab[1] === true).length : 0;
+      const errors = tabsErrors[tabId];
+      const warnings = tabsWarnings[tabId];
+      const infos = tabsInfos[tabId];
+      const errorsCount = errors && Object.entries(errors).filter(tab => tab[1]).length;
+      const warningsCount = warnings && Object.entries(warnings).filter(tab => tab[1]).length;
+      const infosCount = infos && Object.entries(infos).filter(tab => tab[1]).length;
       const hasOverride = validationStatusOverride && validationStatusOverride[tabId];
       const errorOverride = hasOverride && validationStatusOverride[tabId].error;
       const warningOverride = hasOverride && validationStatusOverride[tabId].warning;
       const infoOverride = hasOverride && validationStatusOverride[tabId].info;
-      const tabHasError = errorOverride !== undefined ? errorOverride : errors > 0;
-      const tabHasWarning = warningOverride !== undefined ? warningOverride : warnings > 0 && !tabHasError;
-      const tabHasInfo = infoOverride !== undefined ? infoOverride : infos > 0 && !tabHasError && !tabHasWarning;
+      const tabHasError = errorOverride !== undefined ? errorOverride : !!errorsCount;
+      const tabHasWarning = warningOverride !== undefined ? warningOverride : !!warningsCount && !tabHasError;
+      const tabHasInfo = infoOverride !== undefined ? infoOverride : !!infosCount && !tabHasError && !tabHasWarning;
+
+      const getValidationMessage = (message, validations = {}) => {
+        const summaryOfMessages = Object.values(validations).filter(value => value && typeof value === "string");
+
+        if (!showValidationsSummary || !summaryOfMessages.length) {
+          return message;
+        }
+
+        if (summaryOfMessages.length === 1) {
+          return summaryOfMessages[0];
+        }
+
+        return summaryOfMessages.map(value => `• ${value}`).join("\n");
+      };
 
       const tabTitle = /*#__PURE__*/_react.default.createElement(_tabTitle.default, {
         position: isInSidebar ? "left" : position,
@@ -247,9 +265,9 @@ const Tabs = ({
         borders: borders !== "off",
         siblings: siblings,
         titlePosition: titlePosition,
-        errorMessage: errorMessage,
-        warningMessage: warningMessage,
-        infoMessage: infoMessage,
+        errorMessage: getValidationMessage(errorMessage, errors),
+        warningMessage: getValidationMessage(warningMessage, warnings),
+        infoMessage: getValidationMessage(infoMessage, infos),
         alternateStyling: variant === "alternate",
         noLeftBorder: ["no left side", "no sides"].includes(borders),
         noRightBorder: ["no right side", "no sides"].includes(borders),
@@ -378,5 +396,10 @@ Tabs.propTypes = { ...marginPropTypes,
       warning: _propTypes.default.bool,
       info: _propTypes.default.bool
     })
-  })
+  }),
+
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary: _propTypes.default.bool
 };

package/lib/components/tabs/tabs.d.ts

@@ -40,6 +40,10 @@ export interface TabsProps extends MarginProps {
       info?: boolean;
     };
   };
+  /** When this prop is set any string validation failures in the children of each Tab
+   * will be summaraised in the Tooltip next to the Tab title
+   */
+  showValidationsSummary?: boolean;
 }
 
 declare function Tabs(props: TabsProps): JSX.Element;

package/package.json

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