carbon-react 111.12.1 → 111.12.3

package/esm/components/tile/tile-footer/tile-footer.component.js

@@ -1,12 +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 styledSystemPropTypes from "@styled-system/prop-types";
 import StyledTileFooter from "./tile-footer.style";
 import { filterStyledSystemPaddingProps } from "../../../style/utils";
 const paddingPropTypes = filterStyledSystemPaddingProps(styledSystemPropTypes.space);
-
 const TileFooter = ({
   variant,
   children,
@@ -17,9 +15,8 @@ const TileFooter = ({
     variant: variant
   }, props), children);
 };
-
-TileFooter.propTypes = { ...paddingPropTypes,
-
+TileFooter.propTypes = {
+  ...paddingPropTypes,
   /** set which background color variant should be used */
   variant: PropTypes.oneOf(["default", "transparent"]),
   children: PropTypes.node

package/esm/components/tile/tile.component.js

@@ -1,10 +1,8 @@
 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 propTypes from "@styled-system/prop-types";
 import { StyledTile, TileContent } from "./tile.style.js";
-
 const Tile = ({
   variant = "tile",
   p = 3,
@@ -14,14 +12,11 @@ const Tile = ({
   ...props
 }) => {
   const isHorizontal = () => orientation === "horizontal";
-
   const isVertical = () => orientation === "vertical";
-
   const wrappedChildren = React.Children.map(children, (child, index) => {
     if (!child) {
       return null;
     }
-
     const {
       width: contentWidth,
       ...childProps
@@ -48,14 +43,11 @@ const Tile = ({
     p: p
   }, props), wrappedChildren);
 };
-
 Tile.propTypes = {
   /** Styled system spacing props */
   ...propTypes.space,
-
   /** Sets the theme of the tile - either 'tile', 'transparent' or 'active' */
   variant: PropTypes.oneOf(["tile", "transparent", "active"]),
-
   /**
    * The content to render within the tile. Each child will be wrapped with
    * a TileContent wrapper, which allows any individual child component to take a
@@ -64,10 +56,8 @@ Tile.propTypes = {
    * Width will have no effect on a child component if the tile orientation is set to 'vertical'.
    */
   children: PropTypes.node,
-
   /** The orientation of the tile - set to either horizontal or vertical */
   orientation: PropTypes.oneOf(["horizontal", "vertical"]),
-
   /**
    * Set a percentage-based width for the whole Tile component, relative to its parent.
    * If unset or zero, this will default to 100%.

package/esm/components/tile-select/__internal__/accordion/accordion.component.js

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { StyledContentContainer, StyledContent } from "./accordion.style";
 import useResizeObserver from "../../../../hooks/__internal__/useResizeObserver";
-
 const Accordion = ({
   children,
   expanded,
@@ -29,7 +28,6 @@ const Accordion = ({
     "aria-labelledby": controlId
   }, children));
 };
-
 Accordion.propTypes = {
   children: PropTypes.node.isRequired,
   expanded: PropTypes.bool,

package/esm/components/tile-select/tile-select-group.component.js

@@ -1,5 +1,4 @@
 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";
@@ -9,7 +8,6 @@ import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-butt
 import { StyledTileSelectFieldset, StyledGroupDescription } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
 const TileSelectGroup = props => {
   const {
     children,
@@ -23,7 +21,6 @@ const TileSelectGroup = props => {
     ...rest
   } = props;
   let tiles;
-
   if (multiSelect) {
     tiles = children;
   } else {
@@ -36,16 +33,14 @@ const TileSelectGroup = props => {
       type: "radio"
     })));
   }
-
   return /*#__PURE__*/React.createElement(StyledTileSelectFieldset, _extends({
     legend: legend
   }, tagComponent("tile-select-group", rest), {
     multiSelect: multiSelect
   }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledGroupDescription, null, description), /*#__PURE__*/React.createElement("div", null, tiles));
 };
-
-TileSelectGroup.propTypes = { ...marginPropTypes,
-
+TileSelectGroup.propTypes = {
+  ...marginPropTypes,
   /** The TileSelect components to be rendered in the group */
   children: (props, propName, componentName) => {
     let error;
@@ -57,29 +52,20 @@ TileSelectGroup.propTypes = { ...marginPropTypes,
     });
     return error;
   },
-
   /** The content for the TileSelectGroup Legend */
   legend: PropTypes.string,
-
   /** Description to be rendered below the legend */
   description: PropTypes.string,
-
   /** The currently selected value - only for single select mode. */
   value: PropTypes.string,
-
   /** The name to apply to the input - only for single select mode. */
   name: PropTypes.string,
-
   /** A callback triggered when one of tiles is selected - only for single select mode. */
   onChange: PropTypes.func,
-
   /** A callback triggered when one of tiles is blurred - only for single select mode. */
   onBlur: PropTypes.func,
-
   /** When passed as true TileSelectGroup serves only visual purpose */
-
   /** It wraps TileSelects in fieldset element and renders the legend and description props content */
-
   /** onChange, onBlur, value, checked and name props are meant to be passed individually on each of the TileSelects */
   multiSelect: PropTypes.bool
 };

package/esm/components/tile-select/tile-select.component.js

@@ -1,5 +1,4 @@
 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, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -12,11 +11,9 @@ import Accordion from "./__internal__/accordion";
 import { StyledTileSelectContainer, StyledTileSelect, StyledTileSelectInput, StyledTitleContainer, StyledTitle, StyledSubtitle, StyledAdornment, StyledDescription, StyledDeselectWrapper, StyledFooterWrapper, StyledFocusWrapper, StyledAccordionFooterWrapper } from "./tile-select.style";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
-
 const checkPropTypeIsNode = prop => typeof prop !== "string" && {
   as: "div"
 };
-
 const TileSelect = ({
   onChange,
   onBlur,
@@ -44,9 +41,9 @@ const TileSelect = ({
 }) => {
   const l = useLocale();
   const [hasFocus, setHasFocus] = useState(false);
-
   const handleDeselect = () => onChange({
-    target: { ...(name && {
+    target: {
+      ...(name && {
         name
       }),
       ...(id && {
@@ -56,7 +53,6 @@ const TileSelect = ({
       checked: false
     }
   });
-
   const renderActionButton = () => /*#__PURE__*/React.createElement(StyledDeselectWrapper, {
     hasActionAdornment: !!actionButtonAdornment
   }, customActionButton && customActionButton(handleDeselect), !customActionButton && checked && /*#__PURE__*/React.createElement(Button, {
@@ -65,7 +61,6 @@ const TileSelect = ({
     disabled: disabled,
     onClick: handleDeselect
   }, l.tileSelect.deselect()), actionButtonAdornment);
-
   useEffect(() => {
     if (disabled && hasFocus) {
       setHasFocus(false);
@@ -86,13 +81,11 @@ const TileSelect = ({
     onBlur: ev => {
       setHasFocus(false);
       /* istanbul ignore else */
-
       if (onBlur) onBlur(ev);
     },
     onFocus: ev => {
       setHasFocus(true);
       /* istanbul ignore else */
-
       if (onFocus) onFocus(ev);
     },
     checked: checked,
@@ -125,79 +118,57 @@ const TileSelect = ({
     expanded: accordionExpanded
   }, accordionContent)));
 };
-
 TileSelect.defaultProps = {
   checked: false,
   type: "checkbox"
 };
-TileSelect.propTypes = { ...marginPropTypes,
-
+TileSelect.propTypes = {
+  ...marginPropTypes,
   /** title of the TileSelect */
   title: PropTypes.node,
-
   /** adornment to be rendered next to the title */
   titleAdornment: PropTypes.node,
-
   /** subtitle of the TileSelect */
   subtitle: PropTypes.node,
-
   /** description of the TileSelect */
   description: PropTypes.node,
-
   /** disables the TileSelect input */
   disabled: PropTypes.bool,
-
   /** the value that is represented by this TileSelect */
   value: PropTypes.string,
-
   /** input id */
   id: PropTypes.string,
-
   /** input name */
   name: PropTypes.string,
-
   /** Callback triggered when user selects or deselects this tile */
   onChange: PropTypes.func,
-
   /** Callback triggered when the user blurs this tile */
   onBlur: PropTypes.func,
-
   /** Callback triggered when the user focuses this tile */
   onFocus: PropTypes.func,
-
   /** determines if this tile is selected or unselected */
   checked: PropTypes.bool,
-
   /** Custom class name passed to the root element of TileSelect */
   className: PropTypes.string,
-
   /** Type of the TileSelect input */
   type: PropTypes.oneOf(["radio", "checkbox"]),
-
   /** Render prop that allows overriding the default action button. `(onClick) => <Button onClick={onClick}>...</Button>` */
   customActionButton: PropTypes.func,
-
   /** An additional help info icon rendered next to the action button */
   actionButtonAdornment: PropTypes.node,
-
   /** footer of the TileSelect */
   footer: PropTypes.node,
-
   /** Component to render in the top left corner of TileSelect */
   prefixAdornment: PropTypes.node,
-
   /** Component to render additional information row between title and description */
   additionalInformation: PropTypes.node,
-
   /** Components to render in the TileSelect Accordion */
   accordionContent: PropTypes.node,
-
   /**
    * Render prop to support rendering the control to handle the expanded state of the TileSelect Accordion.
    * `(controlId, contentId) => <Button id={controlId} aria-controls={contentId}>...</Button>`
    */
   accordionControl: PropTypes.func,
-
   /** Flag to control the open state of TileSelect Accordion */
   accordionExpanded: PropTypes.bool
 };

package/esm/components/toast/toast.component.js

@@ -1,5 +1,4 @@
 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, useEffect, useMemo, useRef, useState } from "react";
 import classNames from "classnames";
 import { TransitionGroup, CSSTransition } from "react-transition-group";
@@ -46,18 +45,15 @@ const Toast = /*#__PURE__*/React.forwardRef(({
   useModalManager(open, dismissToast, refToPass);
   useEffect(() => {
     clearTimeout(timer.current);
-
     if (!timeout || !open || !onDismiss) {
       return;
     }
-
     timer.current = setTimeout(() => onDismiss(), timeout);
   }, [onDismiss, open, timeout]);
   useEffect(() => {
     if (!disableAutoFocus) {
       if (open) {
         var _toastContentNodeRef$;
-
         focusedElementBeforeOpening.current = document.activeElement;
         (_toastContentNodeRef$ = toastContentNodeRef.current) === null || _toastContentNodeRef$ === void 0 ? void 0 : _toastContentNodeRef$.focus();
       } else if (focusedElementBeforeOpening.current) {
@@ -74,7 +70,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       }
     };
   }, []);
-
   function renderCloseIcon() {
     if (!onDismiss) return null;
     return /*#__PURE__*/React.createElement(IconButton, {
@@ -86,7 +81,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       type: "close"
     }));
   }
-
   function renderToastContent() {
     if (!open) return null;
     const toastProps = {
@@ -122,7 +116,6 @@ const Toast = /*#__PURE__*/React.forwardRef(({
       isDismiss: onDismiss
     }, children), renderCloseIcon()));
   }
-
   return /*#__PURE__*/React.createElement(StyledPortal, {
     id: targetPortalId,
     isCenter: isCenter,
@@ -136,37 +129,26 @@ const Toast = /*#__PURE__*/React.forwardRef(({
 Toast.propTypes = {
   /** Customizes the appearance in the DLS theme */
   variant: PropTypes.oneOf(["error", "info", "success", "warning", "notice"]),
-
   /** Custom className */
   className: PropTypes.string,
-
   /** Custom id  */
   id: PropTypes.string,
-
   /** Component name */
   "data-component": PropTypes.string,
-
   /** The rendered children of the component. */
   children: PropTypes.node,
-
   /** Determines if the Toast is open. */
   open: PropTypes.bool,
-
   /** Callback for when dismissed. */
   onDismiss: PropTypes.func,
-
   /** Time for Toast to remain on screen */
   timeout: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-
   /** Centers the Toast on the screen */
   isCenter: PropTypes.bool,
-
   /** Target Portal ID where the Toast will render */
   targetPortalId: PropTypes.string,
-
   /** Maximum toast width */
   maxWidth: PropTypes.string,
-
   /** Disables auto focus functionality when the Toast has a close icon */
   disableAutoFocus: PropTypes.bool
 };

package/esm/components/tooltip/tooltip-pointer.style.js

@@ -1,12 +1,10 @@
 import styled, { css } from "styled-components";
 import baseTheme from "../../style/themes/base";
 import { toColor } from "../../style/utils/color";
-
 const pointerColor = (theme, bgColor, type) => {
   if (bgColor) return toColor(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
-
 const StyledTooltipPointer = styled.div`
   ${({
   position,

package/esm/components/tooltip/tooltip.component.js

@@ -1,5 +1,4 @@
 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 Tippy from "@tippyjs/react/headless";
@@ -30,7 +29,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const isFlipOverridesValid = !flipOverrides || Array.isArray(flipOverrides) && flipOverrides.every(placement => TOOLTIP_POSITIONS.includes(placement));
   !isFlipOverridesValid ? process.env.NODE_ENV !== "production" ? invariant(false, `The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
-
   const tooltip = (attrs, content) => {
     const currentPosition = attrs["data-placement"] || position;
     return /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
@@ -58,7 +56,6 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
       bgColor: bgColor
     })), content));
   };
-
   return /*#__PURE__*/React.createElement(Tippy, _extends({
     placement: position,
     delay: TOOLTIP_DELAY

package/esm/components/tooltip/tooltip.style.js

@@ -10,19 +10,16 @@ const fadeIn = keyframes`
     opacity: 1;
   }
 `;
-
 const tooltipColor = (theme, bgColor, type) => {
   if (bgColor) return toColor(theme, bgColor);
   return type === "error" ? "var(--colorsSemanticNegative500)" : "var(--colorsSemanticNeutral500)";
 };
-
 const tooltipOffset = (position, inputSize, isPartOfInput) => {
   if (!isPartOfInput) {
     return {
       [position]: "1px"
     };
   }
-
   switch (inputSize) {
     case "small":
       return `
@@ -31,7 +28,6 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
           ${position}: ${["top", "bottom"].includes(position) ? "7px" : "6px"};
         }
       `;
-
     case "large":
       return `
         ${position}: ${["top", "bottom"].includes(position) ? "0px" : "-2px"};
@@ -39,7 +35,6 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
           ${position}: -1px;
         }
       `;
-
     default:
       return `
         ${position}: ${["top", "bottom"].includes(position) ? "4px" : "2px"};
@@ -49,7 +44,6 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
       `;
   }
 };
-
 const StyledTooltip = styled.div`
   ${({
   position,

package/esm/components/typography/list.component.js

@@ -1,17 +1,13 @@
 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 Typography from "./typography.component";
-
 const getListStyleType = as => {
   if (as === "ul") {
     return "square";
   }
-
   return "decimal";
 };
-
 const List = ({
   children,
   as = "ul",
@@ -21,7 +17,6 @@ const List = ({
   as: as,
   listStyleType: getListStyleType(as)
 }, props), children);
-
 List.propTypes = {
   "as": PropTypes.elementType,
   "backgroundColor": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
@@ -480,7 +475,6 @@ List.propTypes = {
   "whiteSpace": PropTypes.string,
   "wordWrap": PropTypes.string
 };
-
 const ListItem = ({
   children,
   ...props
@@ -489,7 +483,6 @@ const ListItem = ({
   variant: "p",
   m: "0 0 8px 16px"
 }, props), children);
-
 ListItem.propTypes = {
   "as": PropTypes.elementType,
   "backgroundColor": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/typography/typography.component.js

@@ -3,55 +3,43 @@ import { space } from "styled-system";
 import styledColor from "../../style/utils/color";
 import baseTheme from "../../style/themes/base";
 const VARIANT_TYPES = ["h1-large", "h1", "h2", "h3", "h4", "h5", "segment-header", "segment-header-small", "segment-subheader", "segment-subheader-alt", "p", "small", "big", "sup", "sub", "strong", "b", "em", "ul", "ol"];
-
 const getAs = variant => {
   switch (variant) {
     case "h1-large":
       return "h1";
-
     case "segment-header":
     case "segment-header-small":
     case "segment-subheader":
     case "segment-subheader-alt":
       return "h5";
-
     case "big":
       return "p";
-
     default:
       return variant;
   }
 };
-
 const getSize = variant => {
   switch (variant) {
     case "h1-large":
       return "32px";
-
     case "h1":
       return "24px";
-
     case "h2":
       return "22px";
-
     case "h3":
     case "segment-header":
       return "20px";
-
     case "h4":
     case "segment-header-small":
       return "18px";
-
     case "h5":
     case "segment-subheader":
     case "big":
       return "16px";
-
     case "small":
     case "sub":
     case "sup":
       return "13px";
-
     case "segment-subheader-alt":
     case "p":
     case "b":
@@ -61,35 +49,27 @@ const getSize = variant => {
       return "14px";
   }
 };
-
 const getLineHeight = variant => {
   switch (variant) {
     case "h1-large":
       return "40px";
-
     case "h1":
     case "segment-subheader":
       return "31px";
-
     case "h2":
       return "29px";
-
     case "h3":
     case "segment-header":
       return "26px";
-
     case "big":
       return "24px";
-
     case "h4":
     case "segment-header-small":
       return "23px";
-
     case "small":
     case "sub":
     case "sup":
       return "20px";
-
     case "h5":
     case "segment-subheader-alt":
     case "p":
@@ -100,7 +80,6 @@ const getLineHeight = variant => {
       return "21px";
   }
 };
-
 const getWeight = variant => {
   switch (variant) {
     case "h1-large":
@@ -108,7 +87,6 @@ const getWeight = variant => {
     case "segment-header":
     case "segment-header-small":
       return "900";
-
     case "h2":
     case "h3":
     case "segment-subheader":
@@ -117,7 +95,6 @@ const getWeight = variant => {
     case "em":
     case "strong":
       return "700";
-
     case "h4":
     case "h5":
     case "p":
@@ -129,23 +106,18 @@ const getWeight = variant => {
       return "400";
   }
 };
-
 const getTransform = variant => {
   if (variant === "segment-subheader-alt") {
     return "uppercase";
   }
-
   return "none";
 };
-
 const getDecoration = variant => {
   if (variant === "em") {
     return "underline";
   }
-
   return "none";
 };
-
 const Typography = styled.span.attrs(({
   variant,
   as,

package/esm/components/vertical-divider/vertical-divider.component.js

@@ -1,10 +1,8 @@
 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 } from "react";
 import PropTypes from "prop-types";
 import { MenuContext } from "../menu/menu.component";
 import { StyledVerticalWrapper, StyledDivider } from "./vertical-divider.style";
-
 const VerticalDivider = ({
   h,
   height,
@@ -27,7 +25,6 @@ const VerticalDivider = ({
     tint: tint
   }));
 };
-
 VerticalDivider.propTypes = {
   "displayInline": PropTypes.bool,
   "h": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),