carbon-react 111.12.3 → 111.12.4

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

@@ -10,16 +10,19 @@ 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 `
@@ -28,6 +31,7 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
           ${position}: ${["top", "bottom"].includes(position) ? "7px" : "6px"};
         }
       `;
+
     case "large":
       return `
         ${position}: ${["top", "bottom"].includes(position) ? "0px" : "-2px"};
@@ -35,6 +39,7 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
           ${position}: -1px;
         }
       `;
+
     default:
       return `
         ${position}: ${["top", "bottom"].includes(position) ? "4px" : "2px"};
@@ -44,6 +49,7 @@ const tooltipOffset = (position, inputSize, isPartOfInput) => {
       `;
   }
 };
+
 const StyledTooltip = styled.div`
   ${({
   position,

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

@@ -1,13 +1,17 @@
 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",
@@ -17,6 +21,7 @@ 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({
@@ -475,6 +480,7 @@ List.propTypes = {
   "whiteSpace": PropTypes.string,
   "wordWrap": PropTypes.string
 };
+
 const ListItem = ({
   children,
   ...props
@@ -483,6 +489,7 @@ 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,43 +3,55 @@ 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":
@@ -49,27 +61,35 @@ 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":
@@ -80,6 +100,7 @@ const getLineHeight = variant => {
       return "21px";
   }
 };
+
 const getWeight = variant => {
   switch (variant) {
     case "h1-large":
@@ -87,6 +108,7 @@ const getWeight = variant => {
     case "segment-header":
     case "segment-header-small":
       return "900";
+
     case "h2":
     case "h3":
     case "segment-subheader":
@@ -95,6 +117,7 @@ const getWeight = variant => {
     case "em":
     case "strong":
       return "700";
+
     case "h4":
     case "h5":
     case "p":
@@ -106,18 +129,23 @@ 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,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, { 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,
@@ -25,6 +27,7 @@ const VerticalDivider = ({
     tint: tint
   }));
 };
+
 VerticalDivider.propTypes = {
   "displayInline": PropTypes.bool,
   "h": PropTypes.oneOfType([PropTypes.number, PropTypes.string]),

package/esm/hooks/__internal__/useCharacterCount/useCharacterCount.js

@@ -1,7 +1,9 @@
 import React, { useMemo } from "react";
 import CharacterCount from "../../../__internal__/character-count";
 import useLocale from "../useLocale";
+
 const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
+
 const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, enforceCharacterLimit = true) => {
   const isCharacterLimitValid = typeof characterLimit === "number" && !Number.isNaN(characterLimit);
   const l = useLocale();
@@ -9,6 +11,7 @@ const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, en
     if (value && isCharacterLimitValid) {
       return value.length > characterLimit;
     }
+
     return false;
   }, [value, characterLimit, isCharacterLimitValid]);
   return [enforceCharacterLimit && isCharacterLimitValid ? characterLimit : undefined, isCharacterLimitValid ? /*#__PURE__*/React.createElement(CharacterCount, {
@@ -18,4 +21,5 @@ const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, en
     "data-element": "character-limit"
   }) : null];
 };
+
 export default useCharacterCount;

package/esm/hooks/__internal__/useClickAwayListener/useClickAwayListener.js

@@ -1,6 +1,4 @@
-import { useEffect, useRef, useCallback } from "react";
-
-// Needs to also take Portals into account (so can't just check DOM containment), but ideally without using
+import { useEffect, useRef, useCallback } from "react"; // Needs to also take Portals into account (so can't just check DOM containment), but ideally without using
 // event.stopPropagation() which could have unexpected and frustrating consequences for consumers.
 // Simple approach taken from https://github.com/facebook/react/issues/10962#issuecomment-444622208
 
@@ -11,6 +9,7 @@ export default ((handleClickAway, eventTypeId = "click") => {
       clickIsInside.current = false;
       return;
     }
+
     handleClickAway(ev);
   }, [handleClickAway]);
   const onInsideClick = useCallback(() => {

package/esm/hooks/__internal__/useFloating/useFloating.js

@@ -1,5 +1,6 @@
 import { useRef, useLayoutEffect } from "react";
 import { computePosition, autoUpdate } from "@floating-ui/dom";
+
 const useFloating = ({
   isOpen,
   reference,
@@ -14,6 +15,7 @@ const useFloating = ({
     let cleanup;
     const referenceElement = reference.current;
     const floatingElement = floating.current;
+
     if (referenceElement && floatingElement && isOpen) {
       const {
         left,
@@ -30,6 +32,7 @@ const useFloating = ({
         top: 0,
         left: 0
       });
+
       const update = () => {
         computePosition(referenceElement, floatingElement, {
           strategy,
@@ -48,10 +51,12 @@ const useFloating = ({
           floatingElement.setAttribute("data-floating-placement", currentPlacement);
         });
       };
+
       cleanup = autoUpdate(referenceElement, floatingElement, update, {
         animationFrame
       });
     }
+
     return () => {
       if (cleanup && floatingElement) {
         cleanup();
@@ -62,4 +67,5 @@ const useFloating = ({
     };
   }, [isOpen, reference, floating, strategy, middleware, placement, animationFrame]);
 };
+
 export default useFloating;

package/esm/hooks/__internal__/useIsStickyFooterForm/useIsStickyFooterForm.js

@@ -3,6 +3,7 @@ import Form from "../../../components/form/form.component";
 export default (children => {
   const isStickyFooterForm = useMemo(() => React.Children.toArray(children).some(child => {
     var _child$type;
+
     return /*#__PURE__*/React.isValidElement(child) && ((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Form.displayName && child.props.stickyFooter;
   }), [children]);
   return isStickyFooterForm;

package/esm/hooks/__internal__/useMenuKeyboardNavigation/useMenuKeyboardNavigation.js

@@ -7,28 +7,38 @@ export default ((mainControlRef, childrenRefs, hide) => {
     if (!(Events.isEnterKey(ev) || Events.isSpaceKey(ev))) {
       ev.preventDefault();
     }
+
     const currentIndex = childrenRefs === null || childrenRefs === void 0 ? void 0 : childrenRefs.findIndex(node => node.current === document.activeElement);
     let nextIndex = -1;
+
     const refocusMainControl = () => {
       var _mainControlRef$curre;
+
       hide();
       (_mainControlRef$curre = mainControlRef.current) === null || _mainControlRef$curre === void 0 ? void 0 : _mainControlRef$curre.focus();
     };
+
     const arrowModifierPressed = ev.ctrlKey || ev.metaKey;
+
     if (Events.isEndKey(ev) || arrowModifierPressed && Events.isDownKey(ev)) {
       nextIndex = childrenLength - 1;
     }
+
     if (Events.isHomeKey(ev) || arrowModifierPressed && Events.isUpKey(ev)) {
       nextIndex = 0;
     }
+
     if (!arrowModifierPressed && Events.isUpKey(ev) && currentIndex > 0) {
       nextIndex = currentIndex - 1;
     }
+
     if (!arrowModifierPressed && Events.isDownKey(ev) && currentIndex < childrenLength - 1) {
       nextIndex = currentIndex + 1;
     }
+
     const tabPressed = Events.isTabKey(ev);
     const tabShiftPressed = tabPressed && Events.isShiftKey(ev);
+
     if (tabShiftPressed) {
       if (currentIndex === 0) {
         refocusMainControl();
@@ -38,19 +48,23 @@ export default ((mainControlRef, childrenRefs, hide) => {
     } else if (tabPressed) {
       if (currentIndex === childrenLength - 1) {
         var _elements;
+
         const elements = Array.from(document.querySelectorAll(defaultFocusableSelectors)).filter(el => Number(el.tabIndex) !== -1);
         const indexOf = elements.indexOf(mainControlRef.current);
-        (_elements = elements[indexOf + 1]) === null || _elements === void 0 ? void 0 : _elements.focus();
-        // // timeout enforces that the "hide" method will be run after browser focuses on the next element
+        (_elements = elements[indexOf + 1]) === null || _elements === void 0 ? void 0 : _elements.focus(); // // timeout enforces that the "hide" method will be run after browser focuses on the next element
+
         setTimeout(hide, 0);
       } else {
         nextIndex = currentIndex + 1;
       }
     }
+
     if (nextIndex > -1) {
       var _childrenRefs$nextInd;
+
       (_childrenRefs$nextInd = childrenRefs[nextIndex].current) === null || _childrenRefs$nextInd === void 0 ? void 0 : _childrenRefs$nextInd.focus();
     }
+
     if (Events.isEscKey(ev)) {
       refocusMainControl();
     }

package/esm/hooks/__internal__/useModalManager/useModalManager.js

@@ -1,10 +1,12 @@
 import { useEffect, useRef, useCallback } from "react";
 import ModalManager from "../../../components/modal/__internal__/modal-manager";
+
 const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
   const listenerAdded = useRef(false);
   const modalRegistered = useRef(false);
   const handleClose = useCallback(ev => {
     const isTopmost = ModalManager.isTopmost(modalRef.current);
+
     if (isTopmost) {
       closeModal(ev);
     }
@@ -49,6 +51,7 @@ const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
   }, []);
   useEffect(() => {
     const ref = modalRef.current;
+
     if (open) {
       registerModal(ref);
     } else {
@@ -62,4 +65,5 @@ const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
     };
   }, [modalRef, unregisterModal]);
 };
+
 export default useModalManager;

package/esm/hooks/__internal__/useResizeObserver/useResizeObserver.js

@@ -1,19 +1,24 @@
 import { useRef, useLayoutEffect } from "react";
-export default function useResizeObserver( /** Reference to the resizable HTML element */
-ref, /** Callback meant to be executed on element resize */
-onResize, /** Flag to indicate whether hook should be disabled  */
+export default function useResizeObserver(
+/** Reference to the resizable HTML element */
+ref,
+/** Callback meant to be executed on element resize */
+onResize,
+/** Flag to indicate whether hook should be disabled  */
 disabled) {
   const observer = useRef();
   const onResizeRef = useRef(onResize);
   onResizeRef.current = onResize;
   useLayoutEffect(() => {
     const referenceRef = ref.current;
+
     if (!disabled && referenceRef) {
       observer.current = new ResizeObserver(() => {
         onResizeRef === null || onResizeRef === void 0 ? void 0 : onResizeRef.current();
       });
       observer.current.observe(referenceRef);
     }
+
     return () => {
       if (!disabled && referenceRef && observer.current) {
         observer.current.unobserve(referenceRef);

package/esm/hooks/__internal__/useScrollBlock/scroll-block-manager.js

@@ -1,14 +1,21 @@
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 // TODO: This component can be refactored to remove redundant code
 // once we can confirm that all Sage products use version 105.0.0^
 let ScrollBlockManager = /*#__PURE__*/function () {
   function ScrollBlockManager() {
     _classCallCheck(this, ScrollBlockManager);
+
     _defineProperty(this, "components", void 0);
+
     _defineProperty(this, "originalValues", void 0);
+
     // Due to possibility of multiple carbon versions using it
     // it is necessary to maintain same structure in this global variable
     if (!window.__CARBON_INTERNALS_SCROLL_BLOCKERS) {
@@ -19,10 +26,12 @@ let ScrollBlockManager = /*#__PURE__*/function () {
         restoreValues: null
       };
     }
-    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components;
-    // TODO: originalValues can be removed
+
+    this.components = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.components; // TODO: originalValues can be removed
+
     this.originalValues = window.__CARBON_INTERNALS_SCROLL_BLOCKERS.originalValues;
   }
+
   _createClass(ScrollBlockManager, [{
     key: "registerComponent",
     value: function registerComponent(id) {
@@ -45,18 +54,17 @@ let ScrollBlockManager = /*#__PURE__*/function () {
     key: "getRestoreValuesCallback",
     value: function getRestoreValuesCallback() {
       var _window$__CARBON_INTE;
+
       return (_window$__CARBON_INTE = window.__CARBON_INTERNALS_SCROLL_BLOCKERS) === null || _window$__CARBON_INTE === void 0 ? void 0 : _window$__CARBON_INTE.restoreValues;
-    }
+    } // TODO: saveOriginalValues can be removed
 
-    // TODO: saveOriginalValues can be removed
   }, {
     key: "saveOriginalValues",
     value: function saveOriginalValues(values) {
       this.originalValues.length = 0;
       this.originalValues.push(...values);
-    }
+    } // TODO: getOriginalValues can be removed
 
-    // TODO: getOriginalValues can be removed
   }, {
     key: "getOriginalValues",
     value: function getOriginalValues() {
@@ -68,6 +76,8 @@ let ScrollBlockManager = /*#__PURE__*/function () {
       return Object.entries(this.components).length !== 0;
     }
   }]);
+
   return ScrollBlockManager;
 }();
+
 export default ScrollBlockManager;

package/esm/hooks/__internal__/useScrollBlock/useScrollBlock.js

@@ -1,10 +1,10 @@
 import { useRef, useCallback } from "react";
 import guid from "../../../__internal__/utils/helpers/guid";
-import ScrollBlockManager from "./scroll-block-manager";
-
-// TODO: This component can be refactored to remove redundant code after
+import ScrollBlockManager from "./scroll-block-manager"; // TODO: This component can be refactored to remove redundant code after
 // we can confirm that all Sage products use version 105.0.0^
+
 const scrollBlockManager = new ScrollBlockManager();
+
 const getRules = () => {
   /* istanbul ignore next */
   const {
@@ -13,8 +13,7 @@ const getRules = () => {
   } = document || {};
   const scrollBarWidth = window.innerWidth - documentElement.clientWidth;
   const bodyPaddingRight = parseInt(window.getComputedStyle(body).getPropertyValue("padding-right")) || 0;
-  return [
-  // TODO: First two entries of this array with the documentElement can be removed
+  return [// TODO: First two entries of this array with the documentElement can be removed
   {
     element: documentElement,
     property: "position",
@@ -37,6 +36,7 @@ const getRules = () => {
     blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
   }];
 };
+
 const useScrollBlock = () => {
   const {
     current: containerGuid
@@ -54,18 +54,20 @@ const useScrollBlock = () => {
     const rules = getRules();
     const isBlocked = scrollBlockManager.isBlocked();
     scrollBlockManager.registerComponent(containerGuid);
+
     if (isBlocked) {
       return;
     }
+
     const originalValues = rules.map(({
       element,
       property
     }) => element.style[property]);
     originalValuesRef.current = originalValues;
-    scrollBlockManager.saveRestoreValuesCallback(restoreValues);
-    // TODO: saveOriginalValues can be removed
-    scrollBlockManager.saveOriginalValues(originalValues);
-    // TODO: slice san be removed
+    scrollBlockManager.saveRestoreValuesCallback(restoreValues); // TODO: saveOriginalValues can be removed
+
+    scrollBlockManager.saveOriginalValues(originalValues); // TODO: slice san be removed
+
     rules.slice(-3).forEach(({
       element,
       property,
@@ -79,13 +81,14 @@ const useScrollBlock = () => {
     const isBlocked = scrollBlockManager.isBlocked();
     if (isBlocked) return;
     const restoreValuesCallback = scrollBlockManager.getRestoreValuesCallback();
+
     if (restoreValuesCallback) {
       restoreValuesCallback();
       scrollBlockManager.saveRestoreValuesCallback(null);
       return;
-    }
+    } // TODO: all of the code below can be removed from this block
+
 
-    // TODO: all of the code below can be removed from this block
     const originalValues = scrollBlockManager.getOriginalValues();
     getRules().forEach(({
       element,
@@ -100,4 +103,5 @@ const useScrollBlock = () => {
     allowScroll
   };
 };
+
 export default useScrollBlock;

package/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -4,9 +4,11 @@ export default function useMediaQuery(queryInput) {
   const [match, setMatch] = React.useState(() => false);
   React.useEffect(() => {
     const queryList = window.matchMedia(query);
+
     const updateMatch = () => {
       setMatch(queryList.matches);
     };
+
     updateMatch();
     queryList.addListener(updateMatch);
     return () => {

package/esm/locales/en-gb.js

@@ -1,5 +1,7 @@
 import { enGB as enGBDateLocale } from "./date-fns-locales";
+
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
+
 const enGB = {
   locale: () => "en-GB",
   actions: {
@@ -31,21 +33,26 @@ const enGB = {
   },
   errors: {
     messages: {
-      formSummary: /* istanbul ignore next */
+      formSummary:
+      /* istanbul ignore next */
       (errors, warnings, type) => {
         const errorPlural = isSingular(errors) ? "error" : "errors";
         const warningPlural = isSingular(warnings) ? "warning" : "warnings";
         const isErrorPlural = isSingular(errors) && !warnings ? "is" : "are";
         const isWarningPlural = isSingular(warnings) ? "is" : "are";
+
         if (errors && warnings && type === "warning") {
           return ["and", `${warnings} ${warningPlural}`];
         }
+
         if (errors) {
           return [`There ${isErrorPlural}`, `${errors} ${errorPlural}`];
         }
+
         if (warnings) {
           return [`There ${isWarningPlural}`, `${warnings} ${warningPlural}`];
         }
+
         return null;
       }
     }

package/esm/locales/pl-pl.js

@@ -1,5 +1,7 @@
 import { pl as plDateLocale } from "./date-fns-locales";
+
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
+
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -31,19 +33,24 @@ const plPL = {
   },
   errors: {
     messages: {
-      formSummary: /* istanbul ignore next */
+      formSummary:
+      /* istanbul ignore next */
       (errors, warnings, type) => {
         const errorPlural = isSingular(errors) ? "błąd" : "błędy";
         const warningPlural = isSingular(warnings) ? "ostrzerzenie" : "ostrzerzenia";
+
         if (errors && warnings && type === "warnings") {
           return [`oraz`, `${warnings} ${warningPlural}`];
         }
+
         if (errors) {
           return ["Znaleziono", `${errors} ${errorPlural}`];
         }
+
         if (warnings) {
           return ["Znaleziono", `${warnings} ${warningPlural}`];
         }
+
         return null;
       }
     }