carbon-react 111.12.2 → 111.12.3

package/esm/__spec_helper__/test-utils.js

@@ -1,51 +1,40 @@
 /* eslint-disable jest/no-conditional-expect */
-
 /* eslint-disable jest/no-identical-title */
-
 /* eslint-disable jest/no-export */
 import { mount } from "enzyme";
 import { sprintf } from "sprintf-js";
 import { space } from "style/themes/base/base-theme.config";
 import { carbonThemeList } from "../style/themes";
 import { mockMatchMedia } from "./mock-match-media";
-
 const isUpper = char => char.toUpperCase() === char;
-
 const humpToDash = (acc, char) => `${acc}${isUpper(char) ? `-${char.toLowerCase()}` : char}`;
-
 const toCSSCase = str => {
   return str.split("").reduce(humpToDash, "");
 };
-
 const assertStyleMatch = (styleSpec, component, opts) => {
   Object.entries(styleSpec).forEach(([attr, value]) => {
     expect(component).toHaveStyleRule(toCSSCase(attr), value, opts);
   });
 };
-
 const makeArrayKeys = n => [...Array(n).keys()];
-
 const dispatchKeyPress = code => {
   const ev = new KeyboardEvent("keydown", {
     key: code
   });
   document.dispatchEvent(ev);
 };
-
 const keys = ["ArrowUp", "ArrowDown", "ArrowRight", "ArrowLeft", "Enter", "Tab", " ", "Escape", "End", "Home", "D", "E", "P", "Z", "1"];
 const keyboard = keys.reduce((acc, key) => {
   const methodName = `press${key === " " ? "Space" : key}`;
-
   acc[methodName] = () => dispatchKeyPress(key);
-
   return acc;
-}, {}); // Build an object of Enzyme simulate helpers
+}, {});
+
+// Build an object of Enzyme simulate helpers
 // e.g. simulate.keydown.pressTab(target, { shiftKey: true })
 // e.g. simulate.keydown.pressEscape(target)
-
 const keydown = keys.reduce((acc, key) => {
   const methodName = `press${key === " " ? "Space" : key}`;
-
   acc[methodName] = (target, {
     shiftKey
   } = {
@@ -56,38 +45,26 @@ const keydown = keys.reduce((acc, key) => {
       key
     });
   };
-
   return acc;
 }, {});
 const simulate = {
   keydown
 };
-
 const listFrom = wrapper => wrapper.find("ul");
-
 const childrenFrom = node => node.children();
-
 const hoverList = wrapper => item => {
   childrenFrom(listFrom(wrapper)).at(item).simulate("mouseover");
 };
-
 const simulateEvent = eventName => wrapper => wrapper.simulate(eventName);
-
 const click = simulateEvent("click");
-
 const selectedItemOf = wrapper => wrapper.state().selectedItem;
-
 const isUnique = (val, index, self) => self.indexOf(val) === index;
-
 const isSelectableGiven = nonSelectables => i => !nonSelectables.includes(i);
-
 const selectedItemReducer = method => wrapper => (acc, i) => {
   method(wrapper)(i);
   return [...acc, selectedItemOf(wrapper)];
 };
-
 const arraysEqual = (arr1, arr2) => arr1.sort().join(",") === arr2.sort().join(",");
-
 const assertCorrectTraversal = method => expect => ({
   num,
   nonSelectables = []
@@ -98,7 +75,6 @@ const assertCorrectTraversal = method => expect => ({
   const indexesThatWereSelected = array.reduce(selectedItemReducer(method)(wrapper), [selectedItem]).filter(isUnique);
   expect(arraysEqual(validIndexes, indexesThatWereSelected)).toBeTruthy();
 };
-
 const assertKeyboardTraversal = assertCorrectTraversal(() => keyboard.pressArrowDown)(expect);
 const assertHoverTraversal = assertCorrectTraversal(wrapper => hoverList(wrapper))(expect);
 const carbonThemesJestTable = carbonThemeList.map(theme => [theme.name, theme]);
@@ -114,25 +90,21 @@ export const getDefaultValue = value => {
   const spaceArrayLength = space.length - 1;
   if (value === undefined) return value;
   const parsedValue = +value;
-
   if (typeof value === "string" && parsedValue > spaceArrayLength) {
     return `${value}px`;
   }
-
   if (parsedValue <= spaceArrayLength) {
     return space[parsedValue];
   }
-
   if (parsedValue > spaceArrayLength) {
     return `${parsedValue * 8}px`;
   }
-
   return value;
 };
-
 const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component({ ...defaults
+    const wrapper = mount(component({
+      ...defaults
     }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct margins", () => {
@@ -141,7 +113,6 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       let marginRight;
       let marginTop;
       let marginBottom;
-
       if (defaults) {
         margin = getDefaultValue(defaults.m);
         marginLeft = getDefaultValue(defaults.ml || defaults.mx);
@@ -169,7 +140,8 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       const props = {
         [styledSystemProp]: 2
       };
-      const wrapper = mount(component({ ...props
+      const wrapper = mount(component({
+        ...props
       }));
       assertStyleMatch({
         [propName]: "var(--spacing200)"
@@ -177,10 +149,10 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
     });
   });
 };
-
 const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts) => {
   describe("default props", () => {
-    const wrapper = mount(component({ ...defaults
+    const wrapper = mount(component({
+      ...defaults
     }));
     const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
     it("should set the correct paddings", () => {
@@ -189,7 +161,6 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       let paddingRight;
       let paddingTop;
       let paddingBottom;
-
       if (defaults) {
         padding = getDefaultValue(defaults.p);
         paddingLeft = getDefaultValue(defaults.pl || defaults.px);
@@ -217,7 +188,8 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       const props = {
         [styledSystemProp]: 2
       };
-      const wrapper = mount(component({ ...props
+      const wrapper = mount(component({
+        ...props
       }));
       assertStyleMatch({
         [propName]: "var(--spacing200)"
@@ -225,27 +197,25 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
     });
   });
 };
-
 const testStyledSystemSpacing = (component, defaults, styleContainer, assertOpts) => {
   testStyledSystemMargin(component, defaults, styleContainer, assertOpts);
   testStyledSystemPadding(component, defaults, styleContainer, assertOpts);
 };
-
 const testStyledSystemColor = (component, styleContainer) => {
   describe.each(colorProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
       const props = {
         [styledSystemProp]: value
       };
-      const wrapper = mount(component({ ...props
+      const wrapper = mount(component({
+        ...props
       }));
-      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper; // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
-
+      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+      // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
       expect(StyleElement).toHaveStyleRule(propName, value);
     });
   });
 };
-
 const testStyledSystemWidth = (component, styleContainer) => {
   describe("when a width prop is specified using styled system props", () => {
     it("then width should have been set correctly", () => {
@@ -253,29 +223,29 @@ const testStyledSystemWidth = (component, styleContainer) => {
       const props = {
         [styledSystemProp]: value
       };
-      const wrapper = mount(component({ ...props
+      const wrapper = mount(component({
+        ...props
       }));
       const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
       expect(StyleElement).toHaveStyleRule(propName, value);
     });
   });
 };
-
 const testStyledSystemLayout = (component, styleContainer) => {
   describe.each(layoutProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
       const props = {
         [styledSystemProp]: value
       };
-      const wrapper = mount(component({ ...props
+      const wrapper = mount(component({
+        ...props
       }));
-      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper; // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
-
+      const StyleElement = styleContainer ? styleContainer(wrapper) : wrapper;
+      // Some props need to have camelcase so used toHaveStyleRule rather than assertStyleMatch
       expect(StyleElement).toHaveStyleRule(propName, value);
     });
   });
 };
-
 const testStyledSystemFlexBox = (component, styleContainer) => {
   describe.each(flexBoxProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
@@ -289,14 +259,14 @@ const testStyledSystemFlexBox = (component, styleContainer) => {
     });
   });
 };
-
 const testStyledSystemBackground = (component, styleContainer) => {
   describe.each(backgroundProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, propName, value) => {
     it(`then ${propName} should have been set correctly`, () => {
       const props = {
         [styledSystemProp]: value
       };
-      const wrapper = mount(component({ ...props
+      const wrapper = mount(component({
+        ...props
       }));
       assertStyleMatch({
         [styledSystemProp]: value
@@ -304,28 +274,27 @@ const testStyledSystemBackground = (component, styleContainer) => {
     });
   });
 };
-
 const testStyledSystemPosition = (component, styleContainer) => {
   describe.each(positionProps)('when a prop is specified using the "%s" styled system props', (styledSystemProp, value) => {
     it(`then ${styledSystemProp} should have been set correctly`, () => {
       const props = {
         [styledSystemProp]: value
       };
-      const wrapper = mount(component({ ...props
+      const wrapper = mount(component({
+        ...props
       }));
       assertStyleMatch({
         [styledSystemProp]: value
       }, styleContainer ? styleContainer(wrapper) : wrapper);
     });
   });
-}; // this util will catch that a console output occurred without polluting the output when running the unit tests
-
+};
 
+// this util will catch that a console output occurred without polluting the output when running the unit tests
 const expectConsoleOutput = (message, type = "error") => {
   if (!message) {
     throw new Error(`no ${type} message provided`);
   }
-
   expect.assertions(1);
   const consoleType = global.console[type];
   let consoleArgs;
@@ -333,12 +302,10 @@ const expectConsoleOutput = (message, type = "error") => {
     if (!args.length) return;
     const msg = args.join(" ");
     const params = args.slice(1, args.length);
-
     if (sprintf(msg, ...params).includes(message)) {
       consoleArgs = args;
       return;
     }
-
     consoleType(...args);
   });
   return () => {
@@ -346,9 +313,7 @@ const expectConsoleOutput = (message, type = "error") => {
       // eslint-disable-next-line no-console
       expect(console[type]).toHaveBeenCalledWith(...consoleArgs);
     }
-
     global.console[type] = consoleType;
   };
 };
-
 export { assertStyleMatch, toCSSCase, hoverList, selectedItemOf, childrenFrom, makeArrayKeys, keyboard, assertKeyboardTraversal, assertHoverTraversal, listFrom, click, simulate, carbonThemesJestTable, mockMatchMedia, testStyledSystemSpacing, testStyledSystemMargin, testStyledSystemPadding, testStyledSystemColor, testStyledSystemWidth, testStyledSystemLayout, testStyledSystemFlexBox, testStyledSystemBackground, testStyledSystemPosition, expectConsoleOutput };

package/esm/components/accordion/accordion-group/accordion-group.component.js

@@ -4,7 +4,6 @@ import invariant from "invariant";
 import Events from "../../../__internal__/utils/helpers/events";
 import Accordion from "../accordion.component";
 import { StyledAccordionGroup } from "../accordion.style";
-
 const AccordionGroup = ({
   children,
   ...rest
@@ -25,18 +24,14 @@ const AccordionGroup = ({
   const refs = useMemo(() => filteredChildren.map(child => child.ref || /*#__PURE__*/React.createRef()), [filteredChildren]);
   const focusAccordion = useCallback((ev, index) => {
     ev.preventDefault();
-
     if (index === -1) {
       var _refs$current;
-
       (_refs$current = refs[refs.length - 1].current) === null || _refs$current === void 0 ? void 0 : _refs$current.focus();
     } else if (index === refs.length) {
       var _refs$0$current;
-
       (_refs$0$current = refs[0].current) === null || _refs$0$current === void 0 ? void 0 : _refs$0$current.focus();
     } else {
       var _refs$index$current;
-
       (_refs$index$current = refs[index].current) === null || _refs$index$current === void 0 ? void 0 : _refs$index$current.focus();
     }
   }, [refs]);
@@ -44,15 +39,12 @@ const AccordionGroup = ({
     if (Events.isUpKey(ev)) {
       focusAccordion(ev, index - 1);
     }
-
     if (Events.isDownKey(ev)) {
       focusAccordion(ev, index + 1);
     }
-
     if (Events.isHomeKey(ev)) {
       focusAccordion(ev, 0);
     }
-
     if (Events.isEndKey(ev)) {
       focusAccordion(ev, refs.length - 1);
     }
@@ -66,7 +58,6 @@ const AccordionGroup = ({
     handleKeyboardAccessibility
   })));
 };
-
 AccordionGroup.propTypes = {
   "children": PropTypes.oneOfType([PropTypes.element, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/accordion/accordion.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, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
@@ -40,26 +39,22 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   const isExpanded = isControlled ? expanded : isExpandedInternal;
   useResizeObserver(accordionContent, () => {
     var _accordionContent$cur;
-
     setContentHeight((_accordionContent$cur = accordionContent.current) === null || _accordionContent$cur === void 0 ? void 0 : _accordionContent$cur.scrollHeight);
   });
   useEffect(() => {
     var _accordionContent$cur2;
-
     setContentHeight((_accordionContent$cur2 = accordionContent.current) === null || _accordionContent$cur2 === void 0 ? void 0 : _accordionContent$cur2.scrollHeight);
   }, [isExpanded]);
   const toggleAccordion = useCallback(ev => {
     if (!isControlled) {
       setIsExpandedInternal(!isExpanded);
     }
-
     if (onChange) onChange(ev, !isExpanded);
   }, [isControlled, isExpanded, onChange]);
   const handleKeyDown = useCallback(ev => {
     if (handleKeyboardAccessibility) {
       handleKeyboardAccessibility(ev, index);
     }
-
     if (Events.isEnterKey(ev) || Events.isSpaceKey(ev)) {
       toggleAccordion(ev);
     }
@@ -69,9 +64,7 @@ const Accordion = /*#__PURE__*/React.forwardRef(({
   const headerId = `AccordionHeader_${guid.current}`;
   const contentId = `AccordionContent_${guid.current}`;
   const showValidationIcon = !!(error || warning || info);
-
   const getTitle = () => isExpanded ? openTitle || title : title;
-
   return /*#__PURE__*/React.createElement(StyledAccordionContainer, _extends({
     id: accordionId,
     "data-component": "accordion",

package/esm/components/action-popover/action-popover-item/action-popover-item.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, useRef, useState, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -10,11 +9,9 @@ import ActionPopoverContext from "../action-popover-context";
 import useLocale from "../../../hooks/__internal__/useLocale";
 import ActionPopoverMenu from "../action-popover-menu/action-popover-menu.component";
 const INTERVAL = 150;
-
 function checkRef(ref) {
   return Boolean(ref && ref.current);
 }
-
 function leftAlignSubmenu(ref, submenuRef) {
   /* istanbul ignore if */
   if (!ref.current || !submenuRef.current) return true;
@@ -26,7 +23,6 @@ function leftAlignSubmenu(ref, submenuRef) {
   } = submenuRef.current;
   return left >= offsetWidth;
 }
-
 function getContainerPosition(itemRef, submenuRef, placement) {
   /* istanbul ignore if */
   if (!itemRef.current || !submenuRef.current) return undefined;
@@ -44,7 +40,6 @@ function getContainerPosition(itemRef, submenuRef, placement) {
     right: "auto"
   };
 }
-
 const ActionPopoverItem = ({
   children,
   icon,
@@ -91,10 +86,8 @@ const ActionPopoverItem = ({
   }, [submenu, placement]);
   useEffect(() => {
     alignSubmenu();
-
     if (focusItem) {
       var _ref$current;
-
       (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.focus();
     }
   }, [alignSubmenu, focusItem]);
@@ -113,17 +106,14 @@ const ActionPopoverItem = ({
   }, [alignSubmenu]);
   const onClick = useCallback(e => {
     e.stopPropagation();
-
     if (!disabled) {
       setOpenPopover(false);
       focusButton();
-
       if (onClickProp) {
         onClickProp(e);
       }
     } else {
       var _ref$current2;
-
       (_ref$current2 = ref.current) === null || _ref$current2 === void 0 ? void 0 : _ref$current2.focus();
       e.preventDefault();
     }
@@ -146,7 +136,6 @@ const ActionPopoverItem = ({
             e.stopPropagation();
           } else if (Events.isRightKey(e)) {
             var _ref$current3;
-
             setOpen(false);
             (_ref$current3 = ref.current) === null || _ref$current3 === void 0 ? void 0 : _ref$current3.focus();
             e.stopPropagation();
@@ -158,24 +147,19 @@ const ActionPopoverItem = ({
             setFocusIndex(0);
             e.stopPropagation();
           }
-
           if (Events.isLeftKey(e)) {
             var _ref$current4;
-
             setOpen(false);
             (_ref$current4 = ref.current) === null || _ref$current4 === void 0 ? void 0 : _ref$current4.focus();
             e.stopPropagation();
           }
         }
-
         e.preventDefault();
       } else if (Events.isEnterKey(e)) {
         if (isHref && download) {
           var _ref$current5;
-
           (_ref$current5 = ref.current) === null || _ref$current5 === void 0 ? void 0 : _ref$current5.click();
         }
-
         e.preventDefault();
         onClick(e);
       }
@@ -183,7 +167,8 @@ const ActionPopoverItem = ({
       e.stopPropagation();
     }
   }, [disabled, download, focusButton, isHref, isLeftAligned, onClick, setOpenPopover, submenu]);
-  const itemSubmenuProps = { ...(!disabled && {
+  const itemSubmenuProps = {
+    ...(!disabled && {
       onMouseEnter: e => {
         if (mouseEnterTimer.current) clearTimeout(mouseEnterTimer.current);
         setFocusIndex(-1);
@@ -201,7 +186,6 @@ const ActionPopoverItem = ({
       },
       onClick: e => {
         var _ref$current6;
-
         setOpen(true);
         (_ref$current6 = ref.current) === null || _ref$current6 === void 0 ? void 0 : _ref$current6.focus();
         e.preventDefault();
@@ -213,14 +197,12 @@ const ActionPopoverItem = ({
     "aria-controls": `ActionPopoverMenu_${guid}`,
     "aria-expanded": isOpen
   };
-
   const renderMenuItemIcon = () => {
     return icon && /*#__PURE__*/React.createElement(MenuItemIcon, {
       as: undefined,
       type: icon
     });
   };
-
   return /*#__PURE__*/React.createElement(StyledMenuItem, _extends({}, rest, {
     ref: ref,
     onClick: onClick,
@@ -252,7 +234,6 @@ const ActionPopoverItem = ({
     type: "chevron_right"
   }) : null);
 };
-
 ActionPopoverItem.propTypes = {
   "children": PropTypes.string.isRequired,
   "disabled": PropTypes.bool,

package/esm/components/action-popover/action-popover-menu/action-popover-menu.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, useMemo, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -31,7 +30,6 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return true;
       }
-
       return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
     });
     return !incorrectChild;
@@ -44,8 +42,8 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
   }, [children]);
   const onKeyDown = useCallback(e => {
     if (Events.isTabKey(e)) {
-      e.preventDefault(); // TAB: close menu and allow focus to change to next focusable element
-
+      e.preventDefault();
+      // TAB: close menu and allow focus to change to next focusable element
       focusButton();
       setOpen(false);
     } else if (Events.isDownKey(e)) {
@@ -81,13 +79,11 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
           if (firstMatch === undefined) {
             firstMatch = index;
           }
-
           if (index > focusIndex && nextMatch === undefined) {
             nextMatch = index;
           }
         }
       });
-
       if (nextMatch !== undefined) {
         setFocusIndex(nextMatch);
       } else if (firstMatch !== undefined) {
@@ -106,7 +102,6 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
           horizontalAlignment
         });
       }
-
       return child;
     });
   }, [children, focusIndex, isOpen, placement, horizontalAlignment]);

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.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 { MenuButtonOverrideWrapper } from "../action-popover.style";
 import Button from "../../button";
-
 const ActionPopoverMenuButton = ({
   buttonType,
   iconType,
@@ -18,7 +16,6 @@ const ActionPopoverMenuButton = ({
   iconPosition: iconPosition,
   size: size
 }, props), children));
-
 ActionPopoverMenuButton.propTypes = {
   "ariaAttributes": PropTypes.shape({
     "aria-controls": PropTypes.string.isRequired,