carbon-react 111.12.2 → 111.12.3

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]),

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

@@ -1,9 +1,7 @@
 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();
@@ -11,7 +9,6 @@ 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, {
@@ -21,5 +18,4 @@ const useCharacterCount = (value = "", characterLimit, warnOverLimit = false, en
     "data-element": "character-limit"
   }) : null];
 };
-
 export default useCharacterCount;

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

@@ -1,4 +1,6 @@
-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
 
@@ -9,7 +11,6 @@ export default ((handleClickAway, eventTypeId = "click") => {
       clickIsInside.current = false;
       return;
     }
-
     handleClickAway(ev);
   }, [handleClickAway]);
   const onInsideClick = useCallback(() => {

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

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

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

@@ -3,7 +3,6 @@ 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,38 +7,28 @@ 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();
@@ -48,23 +38,19 @@ 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,12 +1,10 @@
 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);
     }
@@ -51,7 +49,6 @@ const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
   }, []);
   useEffect(() => {
     const ref = modalRef.current;
-
     if (open) {
       registerModal(ref);
     } else {
@@ -65,5 +62,4 @@ const useModalManager = (open, closeModal, modalRef, setTriggerRefocusFlag) => {
     };
   }, [modalRef, unregisterModal]);
 };
-
 export default useModalManager;

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

@@ -1,24 +1,19 @@
 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,21 +1,14 @@
 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) {
@@ -26,12 +19,10 @@ 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) {
@@ -54,17 +45,18 @@ 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() {
@@ -76,8 +68,6 @@ 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
-// we can confirm that all Sage products use version 105.0.0^
+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,7 +13,8 @@ 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",
@@ -36,7 +37,6 @@ const getRules = () => {
     blockingValue: `${bodyPaddingRight + scrollBarWidth}px`
   }];
 };
-
 const useScrollBlock = () => {
   const {
     current: containerGuid
@@ -54,20 +54,18 @@ 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,
@@ -81,14 +79,13 @@ 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,
@@ -103,5 +100,4 @@ const useScrollBlock = () => {
     allowScroll
   };
 };
-
 export default useScrollBlock;

package/esm/hooks/useMediaQuery/useMediaQuery.js

@@ -4,11 +4,9 @@ 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,7 +1,5 @@
 import { enGB as enGBDateLocale } from "./date-fns-locales";
-
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
-
 const enGB = {
   locale: () => "en-GB",
   actions: {
@@ -33,26 +31,21 @@ 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,7 +1,5 @@
 import { pl as plDateLocale } from "./date-fns-locales";
-
 const isSingular = count => (typeof count === "string" ? parseInt(count) : count) === 1;
-
 const plPL = {
   locale: () => "pl-PL",
   actions: {
@@ -33,24 +31,19 @@ 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;
       }
     }