carbon-react 111.12.3 → 111.12.5

package/esm/components/carbon-provider/top-modal-context.js

@@ -5,21 +5,25 @@ const TopModalContext = /*#__PURE__*/createContext({
 export const TopModalContextProvider = ({
   children
 }) => {
-  const [topModal, setTopModal] = useState(null);
-
-  // can't add the setter to the global list inside useEffect because that doesn't run until
+  const [topModal, setTopModal] = useState(null); // can't add the setter to the global list inside useEffect because that doesn't run until
   // after the render. We use a ref to ensure it only runs once.
+
   const isFirstRender = useRef(true);
+
   if (isFirstRender.current) {
     if (!window.__CARBON_INTERNALS_MODAL_SETTER_LIST) {
       window.__CARBON_INTERNALS_MODAL_SETTER_LIST = [];
     }
+
     window.__CARBON_INTERNALS_MODAL_SETTER_LIST.push(setTopModal);
+
     isFirstRender.current = false;
   }
+
   useEffect(() => {
     return () => {
       var _window$__CARBON_INTE;
+
       window.__CARBON_INTERNALS_MODAL_SETTER_LIST = (_window$__CARBON_INTE = window.__CARBON_INTERNALS_MODAL_SETTER_LIST) === null || _window$__CARBON_INTE === void 0 ? void 0 : _window$__CARBON_INTE.filter(setter => setter !== setTopModal);
     };
   }, []);

package/esm/components/card/card-column/card-column.component.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledCardColumn from "./card-column.style";
+
 const CardColumn = ({
   align = "center",
   children
@@ -8,6 +9,7 @@ const CardColumn = ({
   align: align,
   "data-element": "card-column"
 }, children);
+
 CardColumn.propTypes = {
   "align": PropTypes.oneOf(["center", "left", "right"]),
   "children": PropTypes.node

package/esm/components/card/card-footer/card-footer.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 { filterStyledSystemMarginProps, filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardFooter from "./card-footer.style";
+
 const CardFooter = ({
   spacing = "medium",
   children,
@@ -16,6 +18,7 @@ const CardFooter = ({
     variant: variant
   }, filterStyledSystemMarginProps(rest), filterStyledSystemPaddingProps(rest)), children);
 };
+
 CardFooter.propTypes = {
   "children": PropTypes.node,
   "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/card/card-row/card-row.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 { filterStyledSystemPaddingProps } from "../../../style/utils";
 import StyledCardRow from "./card-row.style";
+
 const CardRow = ({
   children,
   spacing = "medium",
@@ -13,6 +15,7 @@ const CardRow = ({
     spacing: spacing
   }, filterStyledSystemPaddingProps(rest)), children);
 };
+
 CardRow.propTypes = {
   "children": PropTypes.node,
   "p": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({

package/esm/components/card/card.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 } from "react";
 import PropTypes from "prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -6,10 +7,13 @@ import StyledCard from "./card.style";
 import Icon from "../icon";
 import { CardRow, CardFooter } from ".";
 import Logger from "../../__internal__/utils/logger";
+
 function hasDisplayName(child, displayName) {
   return child.type.displayName === displayName;
 }
+
 let isDeprecationWarningTriggered = false;
+
 const Card = ({
   "data-element": dataElement,
   "data-role": dataRole,
@@ -26,6 +30,7 @@ const Card = ({
     isDeprecationWarningTriggered = true;
     Logger.deprecate("The `dataRole` prop of `Card` is now deprecated. Please use the kebab-case version `data-role` instead.");
   }
+
   const renderChildren = useCallback(() => React.Children.map(children, (child, index) => {
     if (! /*#__PURE__*/React.isValidElement(child) || /*#__PURE__*/React.isValidElement(child) && !hasDisplayName(child, CardRow.displayName) && !hasDisplayName(child, CardFooter.displayName)) return child;
     if (index !== 0) return /*#__PURE__*/React.cloneElement(child, {
@@ -35,10 +40,12 @@ const Card = ({
       spacing,
       ...child.props
     };
+
     if (hasDisplayName(child, CardRow.displayName)) {
       const pad = React.Children.toArray(children).filter(row => /*#__PURE__*/React.isValidElement(row) && hasDisplayName(row, CardRow.displayName)).length === 1 ? "pt" : "py";
       childProps[pad] = 0;
     }
+
     return /*#__PURE__*/React.cloneElement(child, childProps);
   }), [children, spacing]);
   return /*#__PURE__*/React.createElement(StyledCard, _extends({
@@ -57,6 +64,7 @@ const Card = ({
     type: "drag"
   }), renderChildren());
 };
+
 Card.propTypes = {
   "action": PropTypes.func,
   "cardWidth": PropTypes.string,

package/esm/components/carousel/carousel.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, useEffect, useRef, useState, useMemo } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -6,6 +7,7 @@ import { CarouselPreviousButtonWrapperStyle, CarouselNextButtonWrapperStyle, Car
 import guid from "../../__internal__/utils/helpers/guid";
 const NEXT = "next";
 const PREVIOUS = "previous";
+
 const Carousel = ({
   children,
   className,
@@ -26,6 +28,7 @@ const Carousel = ({
   }, [children]);
   const handleSlideChange = useCallback(newIndex => {
     setSelectedSlideIndex(newIndex);
+
     if (onSlideChange) {
       onSlideChange(newIndex, transitionDirection.current);
     }
@@ -35,32 +38,39 @@ const Carousel = ({
     const isNewIndexUndefined = typeof newIndex === "undefined";
     const isTheSameIndex = newIndex === lastSlideIndexProp.current || newIndex === selectedSlideIndex;
     if (isNewIndexUndefined || isTheSameIndex) return;
+
     if (newIndex > selectedSlideIndex) {
       transitionDirection.current = NEXT;
     } else {
       transitionDirection.current = PREVIOUS;
     }
+
     lastSlideIndexProp.current = newIndex;
     handleSlideChange(newIndex);
   }, [handleSlideChange, slideIndex, selectedSlideIndex]);
+
   function onPreviousClick() {
     const newIndex = selectedSlideIndex - 1;
     transitionDirection.current = PREVIOUS;
     handleSlideChange(newIndex);
   }
+
   function onNextClick() {
     const newIndex = selectedSlideIndex + 1;
     transitionDirection.current = NEXT;
     handleSlideChange(newIndex);
   }
+
   function onSlideSelection(ev) {
     const newSlideSelection = Number(ev.target.value);
     transitionDirection.current = newSlideSelection > selectedSlideIndex ? NEXT : PREVIOUS;
     handleSlideChange(newSlideSelection);
   }
+
   function slideSelector() {
     if (!enableSlideSelector) return null;
     const buttons = [];
+
     for (let i = 0; i < numOfSlides; i++) {
       buttons.push( /*#__PURE__*/React.createElement(CarouselSelectorInputWrapperStyle, {
         key: i,
@@ -78,10 +88,12 @@ const Carousel = ({
         htmlFor: `carousel-slide-${i}-${id}`
       })));
     }
+
     return /*#__PURE__*/React.createElement(CarouselSelectorWrapperStyle, {
       "data-element": "slide-selector"
     }, buttons);
   }
+
   function previousButton() {
     if (!enablePreviousButton) return null;
     const isDisabled = selectedSlideIndex === 0;
@@ -94,6 +106,7 @@ const Carousel = ({
       type: "chevron_down"
     })));
   }
+
   function nextButton() {
     if (!enableNextButton) return null;
     const isDisabled = numOfSlides === selectedSlideIndex + 1;
@@ -107,6 +120,7 @@ const Carousel = ({
       type: "chevron_down"
     })));
   }
+
   return /*#__PURE__*/React.createElement(CarouselWrapperStyle, _extends({
     className: className
   }, tagComponent("carousel", props)), /*#__PURE__*/React.createElement("div", {
@@ -115,6 +129,7 @@ const Carousel = ({
     elementIndex: selectedSlideIndex
   }, children), nextButton()), slideSelector());
 };
+
 Carousel.propTypes = {
   "children": PropTypes.node,
   "className": PropTypes.string,

package/esm/components/carousel/slide/slide.component.js

@@ -1,10 +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); }
+
 /* eslint-disable react/prop-types */
 import React from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../../__internal__/utils/helpers/tags/tags";
 import { SlideStyle } from "./slide.style";
+
 const Slide = props => /*#__PURE__*/React.createElement(SlideStyle, _extends({}, props, tagComponent("slide", props)));
+
 Slide.propTypes = {
   "children": PropTypes.node,
   "onClick": PropTypes.func

package/esm/components/carousel/slide/slide.style.js

@@ -24,7 +24,6 @@ const SlideStyle = styled.div`
       }
     `}
   `}
-`;
+`; // eslint-disable-next-line import/prefer-default-export
 
-// eslint-disable-next-line import/prefer-default-export
 export { SlideStyle };

package/esm/components/checkbox/checkbox-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 tagComponent from "../../__internal__/utils/helpers/tags/tags";
@@ -7,6 +8,7 @@ import Fieldset from "../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 export const CheckboxGroupContext = /*#__PURE__*/React.createContext({});
+
 const CheckboxGroup = props => {
   const {
     children,
@@ -46,6 +48,7 @@ const CheckboxGroup = props => {
     }
   }, children))));
 };
+
 CheckboxGroup.propTypes = {
   "children": PropTypes.node,
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),

package/esm/components/checkbox/checkbox-svg.component.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
+
 const CheckboxSvg = () => /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
   focusable: "false",
   width: "12",
@@ -11,4 +12,5 @@ const CheckboxSvg = () => /*#__PURE__*/React.createElement(StyledCheckableInputS
   fill: "#FFFFFF",
   fillRule: "evenodd"
 })));
+
 export default CheckboxSvg;

package/esm/components/checkbox/checkbox.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, { useContext } from "react";
 import PropTypes from "prop-types";
 import CheckboxStyle from "./checkbox.style";
@@ -8,11 +9,13 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { CheckboxGroupContext } from "./checkbox-group.component";
+
 const Checkbox = ({
   id,
   label,
   onChange,
   name,
+
   /* FIXME: FE-4102 */
   onClick,
   onBlur,
@@ -95,6 +98,7 @@ const Checkbox = ({
     size: size
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null))));
 };
+
 Checkbox.propTypes = {
   "about": PropTypes.string,
   "accept": PropTypes.string,
@@ -163,6 +167,9 @@ Checkbox.propTypes = {
   "contentEditable": PropTypes.oneOfType([PropTypes.oneOf(["false", "inherit", "true"]), PropTypes.bool]),
   "contextMenu": PropTypes.string,
   "crossOrigin": PropTypes.string,
+  "css": PropTypes.oneOfType([PropTypes.func, PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__emotion_styles": PropTypes.any.isRequired
+  }), PropTypes.string, PropTypes.bool]),
   "dangerouslySetInnerHTML": PropTypes.shape({
     "__html": PropTypes.string.isRequired
   }),

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

@@ -1,6 +1,6 @@
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
-interface StyledCheckboxProps extends ValidationProps, MarginProps {
+export interface StyledCheckboxProps extends ValidationProps, MarginProps {
     disabled?: boolean;
     fieldHelpInline?: boolean;
     inputWidth?: number | string;

package/esm/components/confirm/confirm.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, { useRef } from "react";
 import PropTypes from "prop-types";
 import createGuid from "../../__internal__/utils/helpers/guid";
@@ -9,6 +10,7 @@ import Button from "../button/button.component";
 import Icon from "../icon";
 import Loader from "../loader";
 import useLocale from "../../hooks/__internal__/useLocale";
+
 const Confirm = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-describedby": ariaDescribedBy,
@@ -47,12 +49,15 @@ const Confirm = ({
     "aria-describedby": ariaDescribedBy,
     "aria-label": ariaLabel
   };
+
   if (title && iconType) {
     ariaProps["aria-labelledby"] = titleId;
   }
+
   if (subtitle && iconType) {
     ariaProps["aria-describedby"] = subtitleId;
   }
+
   const renderCancelButton = () => {
     if (!onCancel) return null;
     return /*#__PURE__*/React.createElement(Button, {
@@ -65,6 +70,7 @@ const Confirm = ({
       iconPosition: cancelButtonIconPosition
     }, cancelLabel || l.confirm.no());
   };
+
   const renderConfirmButton = () => /*#__PURE__*/React.createElement(Button, {
     onClick: onConfirm,
     "data-element": "confirm",
@@ -78,6 +84,7 @@ const Confirm = ({
     isInsideButton: true,
     isActive: true
   }) : confirmLabel || l.confirm.yes());
+
   const getTitle = () => {
     if (iconType) {
       return /*#__PURE__*/React.createElement(StyledConfirmHeading, {
@@ -94,8 +101,10 @@ const Confirm = ({
         divider: false
       }));
     }
+
     return title;
   };
+
   return /*#__PURE__*/React.createElement(Dialog, _extends({
     open: open,
     onCancel: onCancel,
@@ -106,6 +115,7 @@ const Confirm = ({
     role: "alertdialog"
   }, ariaProps, rest), children, /*#__PURE__*/React.createElement(StyledConfirmButtons, null, renderCancelButton(), renderConfirmButton()));
 };
+
 Confirm.defaultProps = {
   size: "extra-small",
   showCloseIcon: false,
@@ -118,77 +128,105 @@ Confirm.defaultProps = {
 Confirm.propTypes = {
   /** Prop to specify the aria-describedby property of the component */
   "aria-describedby": PropTypes.string,
+
   /**
    * Prop to specify the aria-label of the component.
    * To be used only when the title prop is not defined, and the component is not labelled by any internal element.
    */
   "aria-label": PropTypes.string,
+
   /**
    * Prop to specify the aria-labeledby property of the component
    * To be used when the title prop is a custom React Node,
    * or the component is labelled by an internal element other than the title.
    */
   "aria-labelledby": PropTypes.string,
+
   /** Confirm content */
   children: PropTypes.node,
+
   /** Controls the open state of the component */
   open: PropTypes.bool.isRequired,
+
   /** A custom close event handler */
   onCancel: PropTypes.func,
+
   /** Determines if the Esc Key closes the Confirm */
   disableEscKey: PropTypes.bool,
+
   /** Allows developers to specify a specific height for the Confirm. */
   height: PropTypes.string,
+
   /** Title displayed at top of component */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
   /** Subtitle displayed at top of component */
   subtitle: PropTypes.string,
+
   /** Size of component */
   size: PropTypes.oneOf(["auto", "extra-small", "small", "medium-small", "medium", "medium-large", "large", "extra-large"]),
+
   /** Determines if the close icon is shown */
   showCloseIcon: PropTypes.bool,
+
   /** Optional reference to an element meant to be focused on open */
   focusFirstElement: PropTypes.shape({
     current: PropTypes.any
   }),
+
   /** Disables auto focus functionality on child elements */
   disableAutoFocus: PropTypes.bool,
+
   /** A custom event handler when a confirmation takes place */
   onConfirm: PropTypes.func.isRequired,
+
   /** Customise the confirm button label */
   confirmLabel: PropTypes.string,
+
   /** Customise the cancel button label */
   cancelLabel: PropTypes.string,
+
   /** Apply destructive style to the cancel button */
   cancelButtonDestructive: PropTypes.bool,
+
   /** Apply destructive style to the confirm button */
   confirmButtonDestructive: PropTypes.bool,
+
   /** Defines a cancel button Icon position related to the children: "before" | "after" */
   cancelButtonIconPosition: PropTypes.oneOf(["before", "after"]),
+
   /**
    * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
    *
    *  Defines an Icon type within the cancel button (see Icon for options)
    * */
   cancelButtonIconType: PropTypes.string,
+
   /** Defines a confirm button Icon position related to the children: "before" | "after" */
   confirmButtonIconPosition: PropTypes.oneOf(["before", "after"]),
+
   /**
    *  <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
    *
    * Defines an Icon type within the confirm button (see Icon for options)
    * */
   confirmButtonIconType: PropTypes.string,
+
   /** Defines an Icon type within the button (see Icon for options) */
   iconType: PropTypes.oneOf(["error", "warning"]),
+
   /** Makes cancel button disabled */
   disableCancel: PropTypes.bool,
+
   /** Makes confirm button disabled */
   disableConfirm: PropTypes.bool,
+
   /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
   cancelButtonType: PropTypes.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
+
   /** Color variants for new business themes: "primary" | "secondary" | "tertiary" | "dashed" | "darkBackground" */
   confirmButtonType: PropTypes.oneOf(["primary", "secondary", "tertiary", "dashed", "darkBackground"]),
+
   /** Adds isLoading state into confirm button */
   isLoadingConfirm: PropTypes.bool
 };

package/esm/components/content/content.component.js

@@ -1,7 +1,9 @@
 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 { StyledContent, StyledContentTitle, StyledContentBody } from "./content.style";
+
 const Content = ({
   variant = "primary",
   children,
@@ -32,6 +34,7 @@ const Content = ({
     align: align
   }, children));
 };
+
 Content.propTypes = {
   "align": PropTypes.oneOf(["center", "left", "right"]),
   "bodyFullWidth": PropTypes.bool,

package/esm/components/date/__internal__/date-formats/index.js

@@ -1,28 +1,31 @@
 // The order of this array is important, when an input value matches more than one format the last one is used
-const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"];
+const EU_FORMATS = ["d M yyyy", "dd M yyyy", "d MM yyyy", "dd MM yyyy", "d M yy", "dd M yy", "d MM yy", "dd MM yy", "d", "d M", "dd", "d MM", "dd M", "dd MM"]; // The order of this array is important, when an input value matches more than one format the last one is used
 
-// The order of this array is important, when an input value matches more than one format the last one is used
-const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"];
+const NA_FORMATS = ["M", "M d", "MM", "M dd", "MM d", "MM dd", "M d yy", "MM d yy", "M dd yy", "MM dd yy", "M d yyyy", "MM d yyyy", "M dd yyyy", "MM dd yyyy"]; // The order of this array is important, when an input value matches more than one format the last one is used
 
-// The order of this array is important, when an input value matches more than one format the last one is used
 const CN_FORMATS = ["yyyy M", "yyyy M d", "yyyy MM d", "yyyy M dd", "yyyy MM dd", "yy M", "yy MM", "yy M d", "yy MM d", "yy M dd", "yy MM dd", "M", "M d", "MM", "M dd", "MM d", "MM dd"];
 const SEPARATORS = ["", ".", ",", "-", "/", ":"];
 const STANDARD_FORMAT_LENGTH = 10;
+
 const generateFormats = (formatArray, separator, trailingChar) => {
   const separators = SEPARATORS.includes(separator) ? SEPARATORS : [...SEPARATORS, separator];
   return formatArray.reduce((arr, formatString) => {
     const array = [...arr, formatString];
+
     if (formatString.includes(" ")) {
       separators.forEach(char => {
         if (separator === char && trailingChar) {
           array.push(`${formatString.replace(/ /g, char)}${trailingChar}`);
         }
+
         array.push(formatString.replace(/ /g, char));
       });
     }
+
     return array;
   }, []);
 };
+
 const getOutputFormatForLocale = localeCode => {
   const formatMap = {
     day: "dd",
@@ -38,11 +41,14 @@ const getOutputFormatForLocale = localeCode => {
     if (type !== "literal") {
       return formatMap[type];
     }
+
     if (!separator) {
       separator = value;
     }
+
     return value;
   }).join("");
+
   if (localeCode.startsWith("bg")) {
     // this locale adds an additional char that has no effect on the output formatting
     return {
@@ -50,26 +56,31 @@ const getOutputFormatForLocale = localeCode => {
       separator
     };
   }
+
   return {
     format,
     separator
   };
 };
+
 const getInputFormatsArrayForLocale = format => {
   if (format.startsWith("y")) {
     return CN_FORMATS;
   }
+
   if (format.startsWith("M")) {
     return NA_FORMATS;
   }
+
   return EU_FORMATS;
-};
+}; // we need this to handle for formats that add extra chars at the end of the format
+
 
-// we need this to handle for formats that add extra chars at the end of the format
 const getTrailingChar = format => {
   const lastChar = format.split("").pop();
   return ["y", "M", "d"].includes(lastChar) ? "" : lastChar;
 };
+
 const getFormatData = ({
   code
 }) => {
@@ -81,6 +92,7 @@ const getFormatData = ({
       formats: generateFormats(formats, "/")
     };
   }
+
   const {
     format,
     separator
@@ -92,4 +104,5 @@ const getFormatData = ({
     formats: generateFormats(formatsForLocale, separator, getTrailingChar(format))
   };
 };
+
 export default getFormatData;