carbon-react 111.12.3 → 111.12.5

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import Icon from "../../components/icon";
 import InputIconToggleStyle from "./input-icon-toggle.style";
 import ValidationIcon from "../validations/validation-icon.component";
+
 const shouldDisplayValidationIcon = ({
   error,
   warning,
@@ -11,6 +12,7 @@ const shouldDisplayValidationIcon = ({
   const validation = error || warning || info || null;
   return typeof validation === "string";
 };
+
 const InputIconToggle = ({
   disabled,
   readOnly,
@@ -49,6 +51,7 @@ const InputIconToggle = ({
       tooltipPosition: align === "right" ? "left" : "right"
     }));
   }
+
   if (type && !(disabled || readOnly)) {
     return /*#__PURE__*/React.createElement(InputIconToggleStyle, {
       size: size,
@@ -61,8 +64,10 @@ const InputIconToggle = ({
       type: type
     }));
   }
+
   return null;
 };
+
 InputIconToggle.propTypes = {
   "align": PropTypes.oneOf(["left", "right"]),
   "disabled": PropTypes.bool,

package/esm/__internal__/input-icon-toggle/input-icon-toggle.style.js

@@ -8,6 +8,7 @@ const InputIconToggleStyle = styled.span.attrs(({
       event.preventDefault();
       return onClick(event);
     }
+
     return event;
   }
 }))`

package/esm/__internal__/label/label.component.js

@@ -5,6 +5,7 @@ import StyledLabel, { StyledLabelContainer } from "./label.style";
 import ValidationIcon from "../validations/validation-icon.component";
 import StyledIconWrapper from "./icon-wrapper.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
+
 const shouldDisplayValidationIcon = ({
   error,
   warning,
@@ -14,6 +15,7 @@ const shouldDisplayValidationIcon = ({
   const validation = error || warning || info;
   return disabled ? false : typeof validation === "string";
 };
+
 const tooltipPosition = ({
   error,
   warning,
@@ -22,6 +24,7 @@ const tooltipPosition = ({
 }) => {
   return (error || warning || info) && inline ? "top" : "right";
 };
+
 const Label = ({
   align = "right",
   children,
@@ -52,19 +55,23 @@ const Label = ({
     onMouseEnter: onGroupMouseEnter,
     onMouseLeave: onGroupMouseLeave
   } = useContext(InputGroupContext);
+
   const handleMouseEnter = () => {
     if (onMouseEnter) onMouseEnter();
     if (onGroupMouseEnter) onGroupMouseEnter();
   };
+
   const handleMouseLeave = () => {
     if (onMouseLeave) onMouseLeave();
     if (onGroupMouseLeave) onGroupMouseLeave();
   };
+
   const icon = () => {
     const wrapperProps = {
       onFocus: () => setFocus(true),
       onBlur: () => setFocus(false)
     };
+
     if (useValidationIcon && shouldDisplayValidationIcon({
       error,
       warning,
@@ -87,12 +94,14 @@ const Label = ({
         tooltipFlipOverrides: ["top", "bottom"]
       }));
     }
+
     return help && /*#__PURE__*/React.createElement(StyledIconWrapper, wrapperProps, /*#__PURE__*/React.createElement(Help, {
       tooltipId: tooltipId,
       type: helpIcon,
       isFocused: isFocused
     }, help));
   };
+
   return /*#__PURE__*/React.createElement(StyledLabelContainer, {
     align: align,
     inline: inline,
@@ -110,6 +119,7 @@ const Label = ({
     isRequired: isRequired
   }, children), icon());
 };
+
 Label.propTypes = {
   "align": PropTypes.oneOf(["left", "right"]),
   "children": PropTypes.node,

package/esm/__internal__/popover/popover.component.js

@@ -9,6 +9,7 @@ import { ModalContext } from "../../components/modal/modal.component";
 const defaultMiddleware = [flip({
   fallbackStrategy: "initialPlacement"
 })];
+
 const Popover = ({
   children,
   placement,
@@ -20,20 +21,24 @@ const Popover = ({
   animationFrame
 }) => {
   var _reference$current;
+
   const elementDOM = useRef(null);
   const {
     isInModal
   } = useContext(ModalContext);
   const candidateNode = (_reference$current = reference.current) === null || _reference$current === void 0 ? void 0 : _reference$current.closest("[role='dialog']");
   const mountNode = isInModal && candidateNode ? candidateNode : document.body;
+
   if (!elementDOM.current && !disablePortal) {
     elementDOM.current = document.createElement("div");
     mountNode.appendChild(elementDOM.current);
   }
+
   const childRef = React.Children.only(children).ref;
   const innerRef = useRef(null);
   const floatingReference = childRef || innerRef;
   let content;
+
   if (childRef) {
     content = children;
   } else {
@@ -41,6 +46,7 @@ const Popover = ({
       ref: floatingReference
     });
   }
+
   useFloating({
     isOpen,
     reference,
@@ -57,21 +63,26 @@ const Popover = ({
       }
     };
   }, [disablePortal, mountNode]);
+
   if (!disableBackgroundUI) {
     content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
       isOpen: isOpen
     }, content);
   }
+
   if (disableBackgroundUI) {
     content = /*#__PURE__*/React.createElement(StyledPopoverContent, {
       isOpen: isOpen
     }, /*#__PURE__*/React.createElement(StyledBackdrop, null, content));
   }
+
   if (disablePortal) {
     return content;
   }
+
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, content), elementDOM.current);
 };
+
 Popover.propTypes = {
   "animationFrame": PropTypes.bool,
   "children": PropTypes.element.isRequired,

package/esm/__internal__/radio-button-mapper/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from "./radio-button-mapper";
-export * from "./radio-button-mapper";
+export { default } from "./radio-button-mapper.component";
+export type { RadioButtonMapperProps, MappedChildProps, } from "./radio-button-mapper.component";

package/esm/__internal__/radio-button-mapper/radio-button-mapper.component.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+interface InputEvents {
+    /** Callback fired when each RadioButton is blurred */
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    /** Callback fired when the user selects a RadioButton */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    /** Callback fired on mouse down */
+    onMouseDown?: (event: React.MouseEvent<HTMLInputElement>) => void;
+    /** Callback fired on key down */
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+}
+export interface RadioButtonMapperProps extends InputEvents {
+    /** The RadioButton objects to be rendered in the group */
+    children?: React.ReactNode;
+    /** Specifies the name prop to be applied to each button in the group */
+    name: string;
+    /** Value of the selected RadioButton */
+    value?: string;
+}
+export interface MappedChildProps {
+    defaultChecked?: boolean;
+    checked: boolean;
+    name: string;
+}
+declare const RadioButtonMapper: {
+    ({ children, name, onBlur, onChange, onMouseDown, onKeyDown, value, }: RadioButtonMapperProps): JSX.Element;
+    displayName: string;
+};
+export default RadioButtonMapper;

package/esm/__internal__/radio-button-mapper/radio-button-mapper.component.js

@@ -1,5 +1,6 @@
 import React, { useState, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
+
 const RadioButtonMapper = ({
   children,
   name,
@@ -13,7 +14,7 @@ const RadioButtonMapper = ({
   const anyChecked = useMemo(() => {
     let result = false;
     filteredChildren.forEach(child => {
-      if (Object.prototype.hasOwnProperty.call(child.props, "defaultChecked")) {
+      if ( /*#__PURE__*/React.isValidElement(child) && Object.prototype.hasOwnProperty.call(child.props, "defaultChecked")) {
         result = true;
       }
     });
@@ -21,16 +22,21 @@ const RadioButtonMapper = ({
   }, [filteredChildren]);
   const isControlled = value !== undefined;
   const [checkedValue, setCheckedValue] = useState(false);
-  const onChangeProp = useCallback(e => {
-    if (onChange) {
-      onChange(e);
-    }
+  const onChangeProp = useCallback(event => {
+    onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    /* istanbul ignore else */
+
     if (!isControlled) {
-      setCheckedValue(e.target.value);
+      setCheckedValue(event.target.value);
     }
   }, [onChange, setCheckedValue, isControlled]);
   const buttons = filteredChildren.map(child => {
     let checked;
+
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+
     if (isControlled) {
       // The user is controlling the input via the value prop
       checked = value === child.props.value;
@@ -41,7 +47,8 @@ const RadioButtonMapper = ({
       // Uncontrolled, existing selection or none marked as checked
       checked = checkedValue === child.props.value;
     }
-    return /*#__PURE__*/React.cloneElement(child, {
+
+    const childProps = {
       defaultChecked: undefined,
       checked,
       name,
@@ -49,23 +56,20 @@ const RadioButtonMapper = ({
       onMouseDown,
       onChange: onChangeProp,
       onKeyDown
-    });
+    };
+    return /*#__PURE__*/React.cloneElement(child, childProps);
   });
-  return buttons;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, buttons);
 };
+
 RadioButtonMapper.propTypes = {
-  /** The RadioButton objects to be rendered in the group */
-  children: PropTypes.node,
-  /** Specifies the name prop to be applied to each button in the group */
-  name: PropTypes.string.isRequired,
-  /** Callback fired when each RadioButton is blurred */
-  onBlur: PropTypes.func,
-  /** Callback fired when the user selects a RadioButton */
-  onChange: PropTypes.func,
-  /** Callback fired on key down */
-  onKeyDown: PropTypes.func,
-  /** Value of the selected RadioButton */
-  value: PropTypes.string
+  "children": PropTypes.node,
+  "name": PropTypes.string.isRequired,
+  "onBlur": PropTypes.func,
+  "onChange": PropTypes.func,
+  "onKeyDown": PropTypes.func,
+  "onMouseDown": PropTypes.func,
+  "value": PropTypes.string
 };
 RadioButtonMapper.displayName = "RadioButtonMapper";
 export default RadioButtonMapper;

package/esm/__internal__/sticky-footer/sticky-footer.component.js

@@ -1,9 +1,11 @@
 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 } from "react";
 import PropTypes from "prop-types";
 import throttle from "lodash/throttle";
 import StyledStickyFooter from "./sticky-footer.style";
 const SCROLL_THROTTLE = 50;
+
 const StickyFooter = ({
   children,
   containerRef,
@@ -31,11 +33,14 @@ const StickyFooter = ({
     ref: footerRef
   }, rest), children);
 };
+
 StickyFooter.propTypes = {
   /** child elements */
   children: PropTypes.node.isRequired,
+
   /** Ref of the container the footer should be sticky on */
   containerRef: PropTypes.any.isRequired,
+
   /** Disable the sticky behaviour manually */
   disableSticky: PropTypes.bool
 };

package/esm/__internal__/utils/helpers/browser-type-check/index.js

@@ -1,6 +1,7 @@
 function browserTypeCheck(_window) {
   return Boolean(_window.chrome || _window.sidebar);
 }
+
 export function isSafari(navigator) {
   return navigator.vendor.includes("Apple");
 }

package/esm/__internal__/utils/helpers/events/composedPath.js

@@ -1,7 +1,6 @@
 // A basic cross-browser implementation of Event.protoType.composedPath
 // JSDOM does not suppor event bubbling
 // IE does not support composedPath
-
 // https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath
 export default (ev => {
   // When testing with enzyme, we want to trigger a listener on an element but pretend
@@ -12,13 +11,17 @@ export default (ev => {
   // In this example composedPath would show that the event started at document.body
   // but it would trigger the eventListener on document
   let element = ev.detail && ev.detail.enzymeTestingTarget || ev.target || null;
+
   if (!element || !element.parentElement) {
     return [];
   }
+
   const path = [element];
+
   while (element.parentElement) {
     element = element.parentElement;
     path.unshift(element);
   }
+
   return path;
 });

package/esm/__internal__/utils/helpers/events/events.js

@@ -1,5 +1,4 @@
 import composedPath from "./composedPath";
-
 /**
  * JavaScript Events
  *
@@ -10,6 +9,7 @@ import composedPath from "./composedPath";
  * implementation between browsers
  *
  */
+
 const Events = {
   /**
    * A method to determine if an event is of a particular type
@@ -17,87 +17,102 @@ const Events = {
   isEventType: (ev, type) => {
     return ev.type === type;
   },
+
   /**
    * Determines if a number key along the top of the keyboard or a number key on the
    * keypad is pressed
    * */
   isNumberKey: ev => {
     var _ev$key;
+
     const charCode = (_ev$key = ev.key) === null || _ev$key === void 0 ? void 0 : _ev$key.charCodeAt(0);
     return charCode !== undefined && charCode >= 48 && charCode <= 57;
   },
+
   /**
    * Determines if the key pressed is a navigation left key
    * */
   isLeftKey: ev => {
     return ev.key === "ArrowLeft";
   },
+
   /**
    * Determines if the key pressed is a navigation up key
    * */
   isUpKey: ev => {
     return ev.key === "ArrowUp";
   },
+
   /**
    * Determines if the key pressed is a navigation right key
    * */
   isRightKey: ev => {
     return ev.key === "ArrowRight";
   },
+
   /**
    * Determines if the key pressed is a navigation down key
    * */
   isDownKey: ev => {
     return ev.key === "ArrowDown";
   },
+
   /**
    * Determines if the key pressed is the escape key
    * */
   isEscKey: ev => {
     return ev.key === "Escape";
   },
+
   /**
    * Determines if the key pressed is the enter key
    * */
   isEnterKey: ev => {
     return ev.key === "Enter";
   },
+
   /**
    * Determines if the key pressed is the tab key
    * */
   isTabKey: ev => {
     return ev.key === "Tab";
   },
+
   /**
    * Determines if the key pressed is the shift key
    * */
   isShiftKey: ev => {
     return ev.shiftKey;
   },
+
   /**
    * Determines if the key pressed is the space key
    * */
   isSpaceKey: ev => {
     return ev.key === " ";
   },
+
   /**
    * Determines if the key pressed is the space key or enter key
    * */
   isEnterOrSpaceKey: ev => {
     return ev.key === "Enter" || ev.key === " ";
   },
+
   /**
    * Determines if the key pressed is the home key
    * */
   isHomeKey: ev => {
     return ev.key === "Home";
   },
+
   /**
    * Determines if the key pressed is the end key
    * */
   isEndKey: ev => {
     return ev.key === "End";
   },
+
   /**
    * Gets the event's path which is an array of the objects on which listeners will be invoked.
    * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/composedPath

package/esm/__internal__/utils/helpers/guid/index.js

@@ -5,5 +5,6 @@ export default (() => {
   function s4() {
     return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
   }
+
   return `${s4()}${s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
 });

package/esm/__internal__/utils/helpers/tags/tags-specs/tags-specs.js

@@ -7,11 +7,12 @@ const elementsTagTest = (wrapper, elements) => {
     });
   });
 };
+
 const rootTagTest = (rootNode, comp, elem, role) => {
   expect(rootNode.prop("data-component")).toEqual(comp);
   expect(rootNode.prop("data-element")).toEqual(elem);
   expect(rootNode.prop("data-role")).toEqual(role);
-};
+}; // eslint-disable-next-line jest/no-export
+
 
-// eslint-disable-next-line jest/no-export
 export { elementsTagTest, rootTagTest };

package/esm/__internal__/utils/helpers/tags/tags.js

@@ -5,12 +5,16 @@ function tagComponent(componentName, props) {
   const tagProps = {
     "data-component": componentName
   };
+
   if (props["data-element"]) {
     tagProps["data-element"] = props["data-element"];
   }
+
   if (props["data-role"]) {
     tagProps["data-role"] = props["data-role"];
   }
+
   return tagProps;
 }
+
 export default tagComponent;

package/esm/__internal__/utils/logger/index.js

@@ -1,7 +1,6 @@
 /* eslint-disable no-console */
 // Globally enable the logger
 let enabled = process.env.NODE_ENV !== "production";
-
 /*
  * Logger
  *
@@ -12,6 +11,7 @@ let enabled = process.env.NODE_ENV !== "production";
  * deprecate - console.warn which prepends the message with [Deprecation]
  *
  */
+
 const Logger = {
   setEnabledState: newState => {
     enabled = newState;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledValidationMessage from "./validation-message.style";
+
 const ValidationMessage = ({
   error,
   warning
@@ -11,6 +12,7 @@ const ValidationMessage = ({
     isWarning: !!(!error && warning)
   }, validation) : null;
 };
+
 ValidationMessage.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "warning": PropTypes.oneOfType([PropTypes.string, PropTypes.bool])

package/esm/__internal__/validations/validation-icon.component.js

@@ -1,4 +1,5 @@
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useContext, useState } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -6,6 +7,7 @@ import Icon from "../../components/icon";
 import ValidationIconStyle from "./validation-icon.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
 import { filterStyledSystemMarginProps } from "../../style/utils";
+
 const getValidationType = ({
   error,
   warning,
@@ -16,6 +18,7 @@ const getValidationType = ({
   if (info) return "info";
   return null;
 };
+
 const ValidationIcon = ({
   error,
   warning,
@@ -33,9 +36,11 @@ const ValidationIcon = ({
   ...rest
 }) => {
   const flipBehaviourCheck = Array.isArray(tooltipFlipOverrides) && tooltipFlipOverrides.every(override => ["bottom", "left", "right", "top"].includes(override));
+
   if (tooltipFlipOverrides) {
     !flipBehaviourCheck ? process.env.NODE_ENV !== "production" ? invariant(false, `The tooltipFlipOverrides prop supplied to ValidationIcon must be an array containing some or all of ["top", "bottom", "left", "right"].`) : invariant(false) : void 0;
   }
+
   const {
     hasFocus,
     hasMouseOver
@@ -51,9 +56,11 @@ const ValidationIcon = ({
     info
   });
   const validationMessage = error || warning || info;
+
   if (typeof validationMessage !== "string" || !validationType) {
     return null;
   }
+
   return /*#__PURE__*/React.createElement(ValidationIconStyle, _extends({
     validationType: validationType,
     onClick: onClick,
@@ -84,6 +91,7 @@ const ValidationIcon = ({
     focusable: tabIndex !== -1
   }));
 };
+
 ValidationIcon.propTypes = {
   "error": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
   "iconId": PropTypes.string,

package/esm/__spec_helper__/enzyme-snapshot-helper.js

@@ -1,9 +1,12 @@
 import toJson from "enzyme-to-json";
+
 function snapshotWithoutProps(enzymeWrapper, propNames) {
   let propNameList = propNames;
+
   if (!Array.isArray(propNames)) {
     propNameList = [propNames];
   }
+
   const snapshotOptions = {
     map: json => {
       propNameList.forEach(prop => {
@@ -16,7 +19,9 @@ function snapshotWithoutProps(enzymeWrapper, propNames) {
   };
   return toJson(enzymeWrapper, snapshotOptions);
 }
+
 function noThemeSnapshot(enzymeWrapper) {
   return snapshotWithoutProps(enzymeWrapper, "theme");
 }
+
 export { snapshotWithoutProps, noThemeSnapshot };

package/esm/__spec_helper__/expect.js

@@ -10,19 +10,22 @@ expect.extend({
       isNot: this.isNot
     };
     const hint = this.utils.matcherHint("toBeFocused", "DOMNode", "", options);
+
     const positive = () => {
       const diffString = diff(expected, DOMNode, {
         expand: this.expand
       });
-      return `${hint}\n\n${
-      // eslint-disable-next-line multiline-ternary
+      return `${hint}\n\n${// eslint-disable-next-line multiline-ternary
       diffString && diffString.includes("- Expect") ? `Difference:\n\n${diffString}` : `Expected: ${this.utils.printExpected(expected)}\nReceived: ${this.utils.printReceived(DOMNode)}`}`;
     };
+
     const negative = () => `${hint}\n\nDOMNode should not have focus`;
+
     const message = pass ? negative : positive;
     return {
       pass,
       message
     };
   }
+
 });

package/esm/__spec_helper__/mock-match-media.js

@@ -5,7 +5,9 @@ export const setupMatchMediaMock = () => {
   if (!global.window) {
     return;
   }
+
   const noop = () => {};
+
   Object.defineProperty(global.window, "matchMedia", {
     writable: true,
     value: query => ({
@@ -23,6 +25,7 @@ export const mockMatchMedia = matches => {
   if (!mocked) {
     throw new Error("window.matchMedia has not been mocked. Did you call setupMatchMediaMock()?");
   }
+
   _matches = matches;
   return {
     removeListener