carbon-react 111.12.3 → 111.12.4

package/esm/__spec_helper__/test-utils.js

@@ -1,40 +1,51 @@
 /* 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
+  return acc;
+}, {}); // 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
   } = {
@@ -45,26 +56,38 @@ 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 = []
@@ -75,6 +98,7 @@ 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]);
@@ -90,21 +114,25 @@ 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", () => {
@@ -113,6 +141,7 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       let marginRight;
       let marginTop;
       let marginBottom;
+
       if (defaults) {
         margin = getDefaultValue(defaults.m);
         marginLeft = getDefaultValue(defaults.ml || defaults.mx);
@@ -140,8 +169,7 @@ const testStyledSystemMargin = (component, defaults, styleContainer, assertOpts)
       const props = {
         [styledSystemProp]: 2
       };
-      const wrapper = mount(component({
-        ...props
+      const wrapper = mount(component({ ...props
       }));
       assertStyleMatch({
         [propName]: "var(--spacing200)"
@@ -149,10 +177,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", () => {
@@ -161,6 +189,7 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       let paddingRight;
       let paddingTop;
       let paddingBottom;
+
       if (defaults) {
         padding = getDefaultValue(defaults.p);
         paddingLeft = getDefaultValue(defaults.pl || defaults.px);
@@ -188,8 +217,7 @@ const testStyledSystemPadding = (component, defaults, styleContainer, assertOpts
       const props = {
         [styledSystemProp]: 2
       };
-      const wrapper = mount(component({
-        ...props
+      const wrapper = mount(component({ ...props
       }));
       assertStyleMatch({
         [propName]: "var(--spacing200)"
@@ -197,25 +225,27 @@ 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", () => {
@@ -223,29 +253,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`, () => {
@@ -259,14 +289,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
@@ -274,27 +304,28 @@ 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;
@@ -302,10 +333,12 @@ 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 () => {
@@ -313,7 +346,9 @@ 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,6 +4,7 @@ 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
@@ -24,14 +25,18 @@ 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]);
@@ -39,12 +44,15 @@ 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);
     }
@@ -58,6 +66,7 @@ const AccordionGroup = ({
     handleKeyboardAccessibility
   })));
 };
+
 AccordionGroup.propTypes = {
   "children": PropTypes.oneOfType([PropTypes.element, PropTypes.shape({
     "__@iterator": PropTypes.func.isRequired,

package/esm/components/accordion/accordion.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, { useState, useRef, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
@@ -39,22 +40,26 @@ 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);
     }
@@ -64,7 +69,9 @@ 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,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, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -9,9 +10,11 @@ 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;
@@ -23,6 +26,7 @@ function leftAlignSubmenu(ref, submenuRef) {
   } = submenuRef.current;
   return left >= offsetWidth;
 }
+
 function getContainerPosition(itemRef, submenuRef, placement) {
   /* istanbul ignore if */
   if (!itemRef.current || !submenuRef.current) return undefined;
@@ -40,6 +44,7 @@ function getContainerPosition(itemRef, submenuRef, placement) {
     right: "auto"
   };
 }
+
 const ActionPopoverItem = ({
   children,
   icon,
@@ -86,8 +91,10 @@ 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]);
@@ -106,14 +113,17 @@ 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();
     }
@@ -136,6 +146,7 @@ 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();
@@ -147,19 +158,24 @@ 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);
       }
@@ -167,8 +183,7 @@ 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);
@@ -186,6 +201,7 @@ 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();
@@ -197,12 +213,14 @@ 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,
@@ -234,6 +252,7 @@ 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,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, useMemo, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -30,6 +31,7 @@ const ActionPopoverMenu = /*#__PURE__*/React.forwardRef(({
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return true;
       }
+
       return child.type !== ActionPopoverItem && child.type !== ActionPopoverDivider;
     });
     return !incorrectChild;
@@ -42,8 +44,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)) {
@@ -79,11 +81,13 @@ 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) {
@@ -102,6 +106,7 @@ 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,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 { MenuButtonOverrideWrapper } from "../action-popover.style";
 import Button from "../../button";
+
 const ActionPopoverMenuButton = ({
   buttonType,
   iconType,
@@ -16,6 +18,7 @@ const ActionPopoverMenuButton = ({
   iconPosition: iconPosition,
   size: size
 }, props), children));
+
 ActionPopoverMenuButton.propTypes = {
   "ariaAttributes": PropTypes.shape({
     "aria-controls": PropTypes.string.isRequired,