carbon-react 111.12.3 → 111.12.4

package/esm/components/popover-container/popover-container.style.js

@@ -33,18 +33,21 @@ const PopoverContainerContentStyle = styled.div`
         opacity: 0;
         transform: translateY(-8px);
       `;
+
     case "entered":
       return `
         opacity: 1; 
         transform: translateY(0);
         transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
           `;
+
     case "exiting":
       return `
         opacity: 0; 
         transform: translateY(-8px);
         transition: all 0.3s cubic-bezier(0.25, 0.25, 0, 1.5);
           `;
+
     default:
       return "opacity: 0";
   }

package/esm/components/portal/portal.js

@@ -3,6 +3,7 @@ import ReactDOM from "react-dom";
 import guid from "../../__internal__/utils/helpers/guid";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component";
 export const PortalContext = /*#__PURE__*/React.createContext({});
+
 const Portal = ({
   children,
   className,
@@ -19,6 +20,7 @@ const Portal = ({
       onReposition();
       window.addEventListener("resize", onReposition);
     }
+
     return () => {
       if (onReposition) {
         window.removeEventListener("resize", onReposition);
@@ -28,18 +30,20 @@ const Portal = ({
   useEffect(() => {
     return () => {
       portalNode === null || portalNode === void 0 ? void 0 : portalNode.remove();
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   const addClassNames = node => {
     className === null || className === void 0 ? void 0 : className.split(" ").forEach(el => {
       node === null || node === void 0 ? void 0 : node.classList.add(el);
     });
     return node;
   };
+
   const getPortalContainer = () => {
     const portalClassName = "carbon-portal";
     let node = portalNode;
+
     if (!node && id !== undefined && document.getElementById(id)) {
       node = document.getElementById(id);
       setPortalNode(node);
@@ -47,24 +51,32 @@ const Portal = ({
       node = document.createElement("div");
       node.classList.add(portalClassName);
       node.setAttribute("data-portal-exit", uniqueId);
+
       if (id !== undefined) {
         node.setAttribute("id", id);
       }
+
       setPortalNode(node);
       let mainNode = document.body;
       const rootDiv = document.getElementById("root");
+
       if (rootDiv && renderInRoot) {
         mainNode = rootDiv;
       }
+
       mainNode.appendChild(node);
     }
+
     if (className) {
       node = addClassNames(node);
     }
+
     return node;
   };
+
   return /*#__PURE__*/React.createElement("span", {
     "data-portal-entrance": uniqueId
   }, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, children), getPortalContainer()));
 };
+
 export default Portal;

package/esm/components/portrait/portrait-gravatar.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import MD5 from "crypto-js/md5";
 import { StyledPortraitGravatar } from "./portrait.style";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
+
 const PortraitGravatar = ({
   gravatarEmail,
   size,
@@ -19,8 +20,10 @@ const PortraitGravatar = ({
     const fallbackOption = "404"; // "Return an HTTP 404 File Not Found response"
 
     /** @see https://en.gravatar.com/site/implement/images/#default-image */
+
     return `${base}${hash}?s=${dimensions}&d=${fallbackOption}`;
   };
+
   return /*#__PURE__*/React.createElement(StyledPortraitGravatar, {
     src: gravatarSrc(),
     alt: alt,
@@ -30,6 +33,7 @@ const PortraitGravatar = ({
     "data-element": "user-image"
   });
 };
+
 PortraitGravatar.propTypes = {
   "alt": PropTypes.string,
   "errorCallback": PropTypes.func,

package/esm/components/portrait/portrait-initials.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import tokens from "@sage/design-tokens/js/base/common";
 import { StyledPortraitInitials, StyledPortraitInitialsImg, getColorsForInitials } from "./portrait.style";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
+
 const PortraitInitials = ({
   initials,
   size,
@@ -14,10 +15,12 @@ const PortraitInitials = ({
   useEffect(() => {
     setCachedImageDataUrl("");
   }, [initials, size, darkBackground]);
+
   const generateDataUrl = () => {
     if (cachedImageDataUrl) {
       return cachedImageDataUrl;
     }
+
     const {
       textColor,
       bgColor
@@ -27,33 +30,31 @@ const PortraitInitials = ({
     let {
       dimensions
     } = PORTRAIT_SIZE_PARAMS[size];
-    dimensions -= 2;
+    dimensions -= 2; // Set canvas with & height
 
-    // Set canvas with & height
     canvas.width = dimensions;
-    canvas.height = dimensions;
+    canvas.height = dimensions; // Select a font family to support different language characters like Arial
 
-    // Select a font family to support different language characters like Arial
     /* istanbul ignore else */
+
     if (context) {
       context.font = `${Math.round(canvas.width / 2.4)}px "Sage UI", Arial`;
-      context.textAlign = "center";
+      context.textAlign = "center"; // Setup background and front color
 
-      // Setup background and front color
       context.fillStyle = tokens[bgColor];
       context.fillRect(0, 0, dimensions, dimensions);
       context.fillStyle = tokens[textColor];
       context.fillText(initials.slice(0, 3).toUpperCase(), dimensions / 2, dimensions / 1.5);
-    }
+    } // Set image representation in default format (png)
+
 
-    // Set image representation in default format (png)
-    const dataURI = canvas.toDataURL();
+    const dataURI = canvas.toDataURL(); // Dispose canvas element
 
-    // Dispose canvas element
     canvas = null;
     setCachedImageDataUrl(dataURI);
     return dataURI;
   };
+
   return /*#__PURE__*/React.createElement(StyledPortraitInitials, {
     "data-element": "initials",
     size: size,
@@ -64,6 +65,7 @@ const PortraitInitials = ({
     alt: alt
   }));
 };
+
 PortraitInitials.propTypes = {
   "alt": PropTypes.string,
   "darkBackground": PropTypes.bool,

package/esm/components/portrait/portrait.component.js

@@ -1,4 +1,5 @@
 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, { useEffect, useState } from "react";
 import PropTypes from "prop-types";
 import Tooltip from "../tooltip";
@@ -7,6 +8,7 @@ import PortraitGravatar from "./portrait-gravatar.component";
 import PortraitInitials from "./portrait-initials.component";
 import { StyledCustomImg, StyledIcon, StyledPortraitContainer } from "./portrait.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+
 const Portrait = ({
   alt = "",
   darkBackground = false,
@@ -32,6 +34,7 @@ const Portrait = ({
     setExternalError(false);
   }, [gravatar, src]);
   const tagProps = tagComponent("portrait", rest);
+
   const renderComponent = () => {
     let portrait = /*#__PURE__*/React.createElement(StyledIcon, {
       type: iconType,
@@ -39,6 +42,7 @@ const Portrait = ({
       shape: shape,
       darkBackground: darkBackground
     });
+
     if (initials) {
       portrait = /*#__PURE__*/React.createElement(PortraitInitials, {
         size: size,
@@ -48,6 +52,7 @@ const Portrait = ({
         alt: alt
       });
     }
+
     if (src && !externalError) {
       portrait = /*#__PURE__*/React.createElement(StyledCustomImg, {
         src: src,
@@ -58,6 +63,7 @@ const Portrait = ({
         onError: () => setExternalError(true)
       });
     }
+
     if (gravatar && !externalError) {
       portrait = /*#__PURE__*/React.createElement(PortraitGravatar, {
         gravatarEmail: gravatar,
@@ -67,6 +73,7 @@ const Portrait = ({
         errorCallback: () => setExternalError(true)
       });
     }
+
     if (tooltipMessage) {
       return /*#__PURE__*/React.createElement(Tooltip, {
         message: tooltipMessage,
@@ -81,12 +88,15 @@ const Portrait = ({
         onClick: onClick
       }, tagProps), portrait));
     }
+
     return /*#__PURE__*/React.createElement(StyledPortraitContainer, _extends({}, filterStyledSystemMarginProps(rest), {
       onClick: onClick
     }, tagProps), portrait);
   };
+
   return renderComponent();
 };
+
 Portrait.propTypes = {
   "alt": PropTypes.string,
   "darkBackground": PropTypes.bool,

package/esm/components/portrait/portrait.style.js

@@ -3,11 +3,13 @@ import { margin } from "styled-system";
 import BaseTheme from "../../style/themes/base";
 import Icon from "../icon";
 import { PORTRAIT_SIZE_PARAMS } from "./portrait.config";
+
 function stylingForSize({
   size,
   initials
 }) {
   const params = PORTRAIT_SIZE_PARAMS[size];
+
   if (initials) {
     return css`
       width: inherit;
@@ -15,11 +17,13 @@ function stylingForSize({
       margin: 1px;
     `;
   }
+
   return css`
     width: ${params === null || params === void 0 ? void 0 : params.dimensions}px;
     height: ${params === null || params === void 0 ? void 0 : params.dimensions}px;
   `;
 }
+
 function stylingForShape({
   shape
 }) {
@@ -30,6 +34,7 @@ function stylingForShape({
     ${cssString}
   `;
 }
+
 function stylingForIcon({
   size,
   darkBackground
@@ -37,10 +42,12 @@ function stylingForIcon({
   const params = PORTRAIT_SIZE_PARAMS[size];
   let color = "var(--colorsUtilityMajor200)";
   let backgroundColor = "var(--colorsUtilityMajor025)";
+
   if (darkBackground) {
     color = "var(--colorsUtilityMajor025)";
     backgroundColor = "var(--colorsUtilityMajor200)";
   }
+
   return css`
     background-color: ${backgroundColor};
     color: ${color};
@@ -50,6 +57,7 @@ function stylingForIcon({
     }
   `;
 }
+
 export function getColorsForInitials(darkBackground) {
   return {
     textColor: darkBackground ? "colorsUtilityYang100" : "colorsUtilityYin055",
@@ -86,10 +94,9 @@ export const StyledCustomImg = styled.img`
   display: block;
   ${stylingForSize}
   ${stylingForShape}
-`;
-
-// && is used here to increase the specificity
+`; // && is used here to increase the specificity
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 export const StyledIcon = styled(Icon)`
   && {
     box-sizing: border-box;

package/esm/components/preview/__internal__/preview-placeholder.component.js

@@ -1,8 +1,10 @@
 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 from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { StyledPreviewPlaceholder } from "./preview-placeholder.style";
+
 const PreviewPlaceholder = ({
   height,
   index,
@@ -16,6 +18,7 @@ const PreviewPlaceholder = ({
     width: !width && isLastLine ? "80%" : width
   }, tagComponent("preview", props)));
 };
+
 PreviewPlaceholder.propTypes = {
   "height": PropTypes.string,
   "index": PropTypes.number.isRequired,

package/esm/components/preview/preview.component.js

@@ -1,9 +1,11 @@
 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 from "react";
 import PropTypes from "prop-types";
 import PreviewPlaceholder from "./__internal__/preview-placeholder.component";
 import { StyledPreview } from "./preview.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+
 const Preview = ({
   children,
   loading,
@@ -12,8 +14,10 @@ const Preview = ({
 }) => {
   const marginProps = filterStyledSystemMarginProps(props);
   const hasPlaceholder = loading === undefined ? !children : loading;
+
   if (hasPlaceholder) {
     const placeholders = [];
+
     for (let i = 1; i <= lines; i++) {
       placeholders.push( /*#__PURE__*/React.createElement(PreviewPlaceholder, _extends({
         key: i,
@@ -21,10 +25,13 @@ const Preview = ({
         lines: lines
       }, props)));
     }
+
     return /*#__PURE__*/React.createElement(StyledPreview, marginProps, placeholders);
   }
+
   return /*#__PURE__*/React.createElement(StyledPreview, marginProps, children);
 };
+
 Preview.propTypes = {
   "children": PropTypes.node,
   "height": PropTypes.string,

package/esm/components/preview/preview.style.js

@@ -6,7 +6,6 @@ const StyledPreview = styled.div`
 `;
 StyledPreview.defaultProps = {
   theme: baseTheme
-};
+}; // eslint-disable-next-line import/prefer-default-export
 
-// eslint-disable-next-line import/prefer-default-export
 export { StyledPreview };

package/esm/components/profile/profile.component.js

@@ -1,15 +1,18 @@
 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 from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { ProfileStyle, ProfileNameStyle, ProfileDetailsStyle, ProfileAvatarStyle, ProfileEmailStyle } from "./profile.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+
 function acronymize(str) {
   if (!str) return "";
   const matches = str.match(/\b\w/g);
   if (!matches) return "";
   return matches.join("");
 }
+
 const Profile = ({
   src,
   className,
@@ -23,6 +26,7 @@ const Profile = ({
     if (initials) return initials;
     return acronymize(name);
   };
+
   const avatar = () => {
     if (src) {
       return /*#__PURE__*/React.createElement(ProfileAvatarStyle, {
@@ -34,12 +38,14 @@ const Profile = ({
         "data-element": "user-image"
       });
     }
+
     return /*#__PURE__*/React.createElement(ProfileAvatarStyle, {
       initials: getInitials(),
       gravatar: email,
       size: size
     });
   };
+
   const text = () => {
     return /*#__PURE__*/React.createElement(ProfileDetailsStyle, {
       size: size,
@@ -52,11 +58,13 @@ const Profile = ({
       "data-element": "email"
     }, email));
   };
+
   return /*#__PURE__*/React.createElement(ProfileStyle, _extends({
     className: className,
     hasSrc: !!src
   }, tagComponent("profile", props), filterStyledSystemMarginProps(props)), avatar(), text());
 };
+
 Profile.propTypes = {
   "className": PropTypes.string,
   "email": PropTypes.string.isRequired,

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -1,4 +1,5 @@
 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, { useCallback, useLayoutEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -7,6 +8,7 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue } from "./progress-tracker.style";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const ProgressTracker = ({
   "aria-label": ariaLabel = "progress tracker",
   "aria-describedby": ariaDescribedBy,
@@ -42,16 +44,20 @@ const ProgressTracker = ({
   useResizeObserver(barRef, () => {
     updateBarLength();
   });
+
   const renderValueLabels = () => {
     if (!showDefaultLabels && !currentProgressLabel && !maxProgressLabel) {
       return null;
     }
+
     const label = (value, defaultValue) => {
       if (value) {
         return value;
       }
+
       return showDefaultLabels ? defaultValue : undefined;
     };
+
     return /*#__PURE__*/React.createElement(StyledValuesLabel, {
       position: labelsPosition,
       isVertical: isVertical
@@ -61,6 +67,7 @@ const ProgressTracker = ({
       isMaxValue: true
     }, label(maxProgressLabel, "100%"))));
   };
+
   const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     size: size,
@@ -86,38 +93,53 @@ const ProgressTracker = ({
     progress: progress
   })), !prefixLabels && renderValueLabels());
 };
-ProgressTracker.propTypes = {
-  ...marginPropTypes,
+
+ProgressTracker.propTypes = { ...marginPropTypes,
+
   /** Specifies an aria label to the component */
   "aria-label": PropTypes.string,
+
   /** Specifies the aria describedby for the component */
   "aria-describedby": PropTypes.string,
+
   /** The value of progress to be read out to the user. */
   "aria-valuenow": PropTypes.number,
+
   /** The minimum value of the progress tracker */
   "aria-valuemin": PropTypes.number,
+
   /** The maximum value of the progress tracker */
   "aria-valuemax": PropTypes.number,
+
   /** Prop to define the human readable text alternative of aria-valuenow
    * if aria-valuenow is not a number
    */
   "aria-valuetext": PropTypes.string,
+
   /** Size of the progress bar. */
   size: PropTypes.oneOf(["small", "medium", "large"]),
+
   /** Length of the progress bar, any valid css string. */
   length: PropTypes.string,
+
   /** Current progress (percentage). */
   progress: PropTypes.number,
+
   /** Flag to control whether the default value labels (as percentages) should be rendered. */
   showDefaultLabels: PropTypes.bool,
+
   /** Value to display as current progress. */
   currentProgressLabel: PropTypes.string,
+
   /** Value to display as the maximum progress limit. */
   maxProgressLabel: PropTypes.string,
+
   /** The orientation of the component. */
   orientation: PropTypes.oneOf(["horizontal", "vertical"]),
+
   /** The direction the bar should move as progress increases, only applies in vertical orientation. */
   direction: PropTypes.oneOf(["up", "down"]),
+
   /**
    * The position the value label are rendered in.
    * Top/bottom apply to horizontal and left/right to vertical orientation.

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -114,20 +114,25 @@ const InnerBar = styled.span`
     `}
   `}
 `;
+
 function getHeight(size) {
   switch (size) {
     case "small":
       return "var(--sizing050)";
+
     case "large":
       return "var(--sizing200)";
+
     default:
       return "var(--sizing100)";
   }
 }
+
 function getInnerBarColour(progress) {
   if (progress >= 100) return "var(--colorsSemanticPositive500)";
   return "var(--colorsSemanticNeutral500)";
 }
+
 StyledProgressTracker.defaultProps = {
   theme: baseTheme
 };

package/esm/components/radio-button/radio-button-group.component.js

@@ -1,4 +1,5 @@
 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 from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -10,6 +11,7 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
+
 const RadioButtonGroup = props => {
   const {
     children,
@@ -36,13 +38,17 @@ const RadioButtonGroup = props => {
   const isAboveLegendBreakpoint = useIsAboveBreakpoint(adaptiveLegendBreakpoint);
   const isAboveSpacingBreakpoint = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
   let inlineLegend = legendInline;
+
   if (adaptiveLegendBreakpoint) {
     inlineLegend = isAboveLegendBreakpoint;
   }
+
   let marginLeft = marginProps.ml;
+
   if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
     marginLeft = undefined;
   }
+
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(Fieldset, _extends({
@@ -80,50 +86,69 @@ const RadioButtonGroup = props => {
     });
   })))));
 };
-RadioButtonGroup.propTypes = {
-  ...marginPropTypes,
+
+RadioButtonGroup.propTypes = { ...marginPropTypes,
+
   /** The RadioButton objects to be rendered in the group */
   children: PropTypes.node.isRequired,
+
   /** Specifies the name prop to be applied to each button in the group */
   name: PropTypes.string.isRequired,
+
   /** The content for the RadioGroup Legend */
   legend: PropTypes.string,
+
   /** Indicate that error has occurred
   Pass string to display icon, tooltip and red border
   Pass true boolean to only display red border */
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** Indicate that warning has occurred
   Pass string to display icon, tooltip and orange border
   Pass true boolean to only display orange border */
   warning: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** Indicate additional information
   Pass string to display icon, tooltip and blue border
   Pass true boolean to only display blue border */
   info: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+
   /** Callback fired when each RadioButton is blurred */
   onBlur: PropTypes.func,
+
   /** Callback fired when the user selects a RadioButton */
   onChange: PropTypes.func,
+
   /** value of the selected RadioButton */
   value: PropTypes.string,
+
   /** When true, RadioButtons are in line */
   inline: PropTypes.bool,
+
   /** When true, legend is placed in line with the radiobuttons */
   legendInline: PropTypes.bool,
+
   /** Percentage width of legend (only when legend is inline)  */
   legendWidth: PropTypes.number,
+
   /** Text alignment of legend when inline */
   legendAlign: PropTypes.oneOf(["left", "right"]),
+
   /** Spacing between legend and field for inline legend, number multiplied by base spacing unit (8) */
   legendSpacing: PropTypes.oneOf([1, 2]),
+
   /** Spacing between labels and radio buttons, given number will be multiplied by base spacing unit (8) */
   labelSpacing: PropTypes.oneOf([1, 2]),
+
   /** Breakpoint for adaptive legend (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLegendBreakpoint: PropTypes.number,
+
   /** Breakpoint for adaptive spacing (left margin changes to 0). Enables the adaptive behaviour when set */
   adaptiveSpacingBreakpoint: PropTypes.number,
+
   /** Flag to configure component as mandatory */
   required: PropTypes.bool,
+
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"])
 };