carbon-react 111.12.3 → 111.12.4

package/esm/components/radio-button/radio-button-svg.component.js

@@ -1,5 +1,6 @@
 import React from "react";
 import StyledCheckableInputSvgWrapper from "../../__internal__/checkable-input/checkable-input-svg-wrapper.style";
+
 const RadioButtonSvg = () => {
   return /*#__PURE__*/React.createElement(StyledCheckableInputSvgWrapper, null, /*#__PURE__*/React.createElement("svg", {
     focusable: "false",
@@ -17,4 +18,5 @@ const RadioButtonSvg = () => {
     r: "5"
   }))));
 };
+
 export default /*#__PURE__*/React.memo(RadioButtonSvg, () => true);

package/esm/components/radio-button/radio-button.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 } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
@@ -50,8 +51,8 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const marginProps = filterStyledSystemMarginProps(props);
   const handleChange = useCallback(ev => {
-    onChange(ev);
-    // trigger focus, as Safari doesn't focus radioButtons on click by default
+    onChange(ev); // trigger focus, as Safari doesn't focus radioButtons on click by default
+
     ev.target.focus();
   }, [onChange]);
   const commonProps = {
@@ -63,8 +64,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     warning,
     info
   };
-  const inputProps = {
-    ...commonProps,
+  const inputProps = { ...commonProps,
     autoFocus,
     checked,
     fieldHelp,
@@ -80,6 +80,7 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
     id,
     value,
     type: "radio",
+
     /**
      * Invert the reverse prop, to ensure the FormField component renders the components
      * in the desired order (other elements which use FormField render their sub-components the
@@ -103,65 +104,90 @@ const RadioButton = /*#__PURE__*/React.forwardRef(({
   }, commonProps, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null))));
 });
 RadioButton.displayName = "RadioButton";
-RadioButton.propTypes = {
-  ...marginPropTypes,
+RadioButton.propTypes = { ...marginPropTypes,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
+
   /** If true the Component will be focused when page load */
   autoFocus: PropTypes.bool,
+
   /** Set the value of the radio button */
   checked: PropTypes.bool,
+
   /** Toggles disabling of input */
   disabled: PropTypes.bool,
+
   /** The fieldHelp content to display for the input */
   fieldHelp: PropTypes.node,
+
   /** Displays fieldHelp inline with the radio button */
   fieldHelpInline: PropTypes.bool,
+
   /** Unique Identifier for the input. Will use a randomly generated GUID if none is provided */
   id: PropTypes.string,
+
   /** Sets percentage-based input width */
   inputWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** The content of the label for the input */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+
   /** The content for the help tooltip, to appear next to the Label */
   labelHelp: PropTypes.node,
+
   /** Sets label alignment - accepted values: 'left' (default), 'right' */
   labelAlign: PropTypes.oneOf(["left", "right"]),
+
   /** Spacing between label and a field for inline label, given number will be multiplied by base spacing unit (8) */
   labelSpacing: PropTypes.oneOf([1, 2]),
+
   /** Sets percentage-based label width */
   labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** The name of the the RadioButton (can also be set via the 'name' prop of the RadioButtonGroup component) */
   name: PropTypes.string,
+
   /** Accepts a callback function which can be used to update parent state on change */
   onChange: PropTypes.func,
+
   /** Accepts a callback function which is triggered on blur event */
   onBlur: PropTypes.func,
+
   /** Accepts a callback function which is triggered on focus event */
   onFocus: PropTypes.func,
+
   /** Accepts a callback function which is triggered on click event */
   onClick: PropTypes.func,
+
   /** Reverses label and radio button display */
   reverse: PropTypes.bool,
+
   /**
    * Set the size of the radio button to 'small' (16x16 - default) or 'large' (24x24).
    * No effect when using Classic theme.
    */
   size: PropTypes.oneOf(["small", "large"]),
+
   /** the value of the Radio Button, passed on form submit */
   value: PropTypes.string.isRequired,
   children: (props, propName, componentName) => {
     if (props[propName]) {
       return new Error(`Forbidden prop \`${propName}\` supplied to \`${componentName}\`. ` + "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.");
     }
+
     return null;
   },
+
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+
   /** Aria label for rendered help component */
   helpAriaLabel: PropTypes.string,
   ...radioButtonGroupPassedProps

package/esm/components/search/search.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, useMemo, useEffect } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -9,6 +10,7 @@ import StyledSearchButton, { StyledButtonIcon } from "./search-button.style";
 import Icon from "../icon";
 import Textbox from "../textbox";
 import Button from "../button";
+
 const Search = ({
   defaultValue,
   onChange,
@@ -46,29 +48,37 @@ const Search = ({
   const [iconType, iconTabIndex] = useMemo(() => {
     const isSearchValueEmpty = !isControlled ? searchValue.length === 0 : value.length === 0;
     const isFocusedOrActive = isFocused || searchIsActive || (inputRef === null || inputRef === void 0 ? void 0 : inputRef.current) === document.activeElement;
+
     if (!isSearchValueEmpty) {
       return ["cross", 0];
     }
+
     if (!isFocusedOrActive || threshold === 0 || !searchButton && isSearchValueEmpty) {
       return ["search", -1];
     }
+
     return [undefined, -1];
   }, [isControlled, searchValue, value, isFocused, searchIsActive, threshold, searchButton, inputRef]);
   let buttonProps = {};
+
   const handleChange = event => {
     if (onChange) {
       onChange(event);
     }
+
     if (!isControlled) {
       setSearchValue(event.target.value);
     }
   };
+
   const handleFocus = event => {
     setIsFocused(true);
+
     if (onFocus) {
       onFocus(event);
     }
   };
+
   if (searchButton && onClick) {
     buttonProps = {
       onClick: () => {
@@ -82,12 +92,13 @@ const Search = ({
       }
     };
   }
+
   const handleIconClick = () => {
     setSearchValue("");
+
     if (onChange) {
       onChange({
-        target: {
-          ...(name && {
+        target: { ...(name && {
             name
           }),
           ...(id && {
@@ -98,28 +109,35 @@ const Search = ({
       });
     }
   };
+
   const handleMouseDown = event => {
     event.preventDefault();
   };
+
   const handleBlur = event => {
     setIsFocused(false);
+
     if (onBlur) {
       onBlur(event);
     }
   };
+
   const handleKeyDown = event => {
     if (event.key.length === 1) {
       event.stopPropagation();
     }
+
     if (onKeyDown) {
       onKeyDown(event);
     }
   };
+
   const assignInput = input => {
     if (inputRef) {
       inputRef.current = input === null || input === void 0 ? void 0 : input.current;
     }
   };
+
   const isSearchTyped = isFocused || (!isControlled ? !!searchValue.length : !!value.length);
   return /*#__PURE__*/React.createElement(StyledSearch, _extends({
     isFocused: isFocused,
@@ -157,6 +175,7 @@ const Search = ({
     type: "search"
   })))));
 };
+
 Search.propTypes = {
   "aria-label": PropTypes.string,
   "defaultValue": PropTypes.string,

package/esm/components/select/__internal__/select-text/select-text.component.js

@@ -1,6 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
 import StyledSelectText from "./select-text.style";
+
 const SelectText = ({
   disabled,
   formattedValue = "",
@@ -14,9 +15,11 @@ const SelectText = ({
   size = "medium"
 }) => {
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
+
   function handleClick(event) {
     onClick(event);
   }
+
   return /*#__PURE__*/React.createElement(StyledSelectText, {
     "aria-hidden": true,
     "data-element": "select-text",
@@ -33,25 +36,35 @@ const SelectText = ({
     size: size
   }, hasPlaceholder ? placeholder : formattedValue);
 };
+
 SelectText.propTypes = {
   /** If true the Component will be disabled */
   disabled: PropTypes.bool,
+
   /** Value to be displayed */
   formattedValue: PropTypes.string,
+
   /** Callback function for when the component is clicked. */
   onClick: PropTypes.func,
+
   /** Callback function for when the key is pressed when focused on Select Text. */
   onKeyDown: PropTypes.func,
+
   /** Callback function for when the left mouse key is pressed when focused on Select Text. */
   onMouseDown: PropTypes.func,
+
   /** Placeholder string to be displayed when formattedValue is empty */
   placeholder: PropTypes.string,
+
   /** If true the Component will be read-only */
   readOnly: PropTypes.bool,
+
   /** If true the component has no border and a transparent background */
   transparent: PropTypes.bool,
+
   /** Id of the Select Text element */
   textId: PropTypes.string,
+
   /** Component size */
   size: PropTypes.string
 };

package/esm/components/select/filterable-select/filterable-select.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, useEffect, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -62,8 +63,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   const [filterText, setFilterText] = useState("");
   const createCustomEvent = useCallback(newValue => {
     const customEvent = {
-      target: {
-        ...(name && {
+      target: { ...(name && {
           name
         }),
         ...(id && {
@@ -83,30 +83,37 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     setSelectedValue(previousValue => {
       const match = findElementWithMatchingText(newFilterText, children);
       const isFilterCleared = isDeleteEvent && newFilterText === "";
+
       if (!match || isFilterCleared) {
         setTextValue(newFilterText);
         triggerChange("");
         return "";
       }
+
       if (isDeleteEvent) {
         setTextValue(newFilterText);
         return match.props.value;
       }
+
       triggerChange(match.props.value);
+
       if (match.props.text.toLowerCase().startsWith(newFilterText.toLowerCase())) {
         setTextValue(match.props.text);
       } else {
         setTextValue(newFilterText);
       }
+
       if (isControlled.current) {
         return previousValue;
       }
+
       setHighlightedValue(match.props.value);
       return match.props.value;
     });
   }, [children, triggerChange]);
   const setMatchingText = useCallback((newValue, isClosing) => {
     const matchingOption = React.Children.toArray(children).find(child => isExpectedOption(child, newValue));
+
     if (!matchingOption || matchingOption.props.text === undefined) {
       setTextValue(filterText || "");
     } else if (isClosing || matchingOption.props.text.toLowerCase().startsWith(filterText.toLowerCase())) {
@@ -125,6 +132,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       if (previousFilterText.length === textValue.length - 1 && key === textValue.slice(-1)) {
         return textValue;
       }
+
       return previousFilterText;
     });
   }, [textValue]);
@@ -132,16 +140,20 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const {
       key
     } = event;
+
     if (onKeyDown) {
       onKeyDown(event);
     }
+
     if (readOnly) {
       return;
     }
+
     if (!event.defaultPrevented && isNavigationKey(key)) {
       event.preventDefault();
       setOpen(true);
     }
+
     fillLastFilterCharacter(key);
   }, [fillLastFilterCharacter, onKeyDown, readOnly]);
   const valueToUse = isControlled.current ? value : selectedValue;
@@ -149,6 +161,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
     isMouseDownReported.current = false;
+
     if (notInContainer && notInList) {
       setMatchingText(valueToUse, true);
       setOpen(false);
@@ -159,11 +172,13 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? invariant(false, onChangeMissingMessage) : invariant(false) : void 0;
+
     if (isControlled.current) {
       setSelectedValue(prevValue => {
         if (value && prevValue !== value) {
           setMatchingText(value);
         }
+
         return value;
       });
       setHighlightedValue(value);
@@ -171,13 +186,14 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       if (textValue !== selectedValue) {
         setMatchingText(selectedValue);
       }
+
       if (highlightedValue !== selectedValue) {
         setHighlightedValue(selectedValue);
       }
-    }
-    // prevent value update on filter change
+    } // prevent value update on filter change
     // selectedValue and highlightedValue omitted from deps, only want uncontrolled change if onChange/children update
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [value, onChange, children]);
   useEffect(() => {
     if (!isOpen) {
@@ -194,9 +210,9 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     if (isControlled.current) {
       setMatchingText(value);
-    }
-    // update text value only when children are changing
+    } // update text value only when children are changing
     // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [value, children]);
   useEffect(() => {
     if (onFilterChange) {
@@ -213,6 +229,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
   useEffect(() => {
     const textStartsWithFilter = textValue.toLowerCase().startsWith(filterText.toLowerCase());
     const isTextboxActive = !disabled && !readOnly;
+
     if (isTextboxActive && textboxRef && filterText.length && textValue.length > filterText.length && textStartsWithFilter) {
       textboxRef.selectionStart = filterText.length;
     }
@@ -224,18 +241,22 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       value: newValue,
       selectionType
     } = optionData;
+
     if (selectionType === "tab") {
       setOpen(false);
       textboxRef.focus();
       return;
     }
+
     if (!isControlled.current) {
       setSelectedValue(newValue);
       setHighlightedValue(newValue);
     }
+
     setTextValue(text);
     triggerChange(newValue);
     setActiveDescendantId(selectedOptionId);
+
     if (selectionType !== "navigationKey") {
       setOpen(false);
       textboxRef.focus();
@@ -246,38 +267,49 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     setOpen(false);
     setMatchingText(selectedValue, true);
   }, [selectedValue, setMatchingText]);
+
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
+
     if (onClick) {
       onClick(event);
     }
   }
+
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;
+
     if (onClick) {
       onClick(event);
     }
+
     setOpen(isAlreadyOpen => {
       return !isAlreadyOpen;
     });
   }
+
   function handleTextboxFocus(event) {
     const triggerFocus = () => onFocus(event);
+
     if (openOnFocus) {
       setOpen(isAlreadyOpen => {
         if (isAlreadyOpen) {
           return true;
         }
+
         if (onOpen) {
           onOpen();
         }
+
         if (onFocus && !isInputFocused.current) {
           triggerFocus();
           isInputFocused.current = true;
         }
+
         if (isMouseDownReported.current && !isMouseDownOnInput.current) {
           return false;
         }
+
         return true;
       });
     } else if (onFocus && !isInputFocused.current) {
@@ -285,25 +317,33 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       isInputFocused.current = true;
     }
   }
+
   function handleTextboxBlur(event) {
     isMouseDownOnInput.current = false;
+
     if (isMouseDownReported.current) {
       return;
     }
+
     isInputFocused.current = false;
+
     if (onBlur) {
       onBlur(event);
     }
   }
+
   function handleTextboxMouseDown(event) {
     isMouseDownReported.current = true;
+
     if (event.target.attributes["data-element"] && event.target.attributes["data-element"].value === "input") {
       isMouseDownOnInput.current = true;
     }
   }
+
   function handleListMouseDown() {
     isMouseDownReported.current = true;
   }
+
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {
       const {
@@ -312,16 +352,20 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       return text && text.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
     });
   }
+
   function handleOnListAction() {
     setOpen(false);
     onListAction();
   }
+
   function assignInput(input) {
     setTextboxRef(input.current);
+
     if (inputRef) {
       inputRef.current = input.current;
     }
   }
+
   function getTextboxProps() {
     return {
       id,
@@ -344,6 +388,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }
+
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -388,50 +433,70 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     textboxRef: textboxRef
   }, getTextboxProps()))), selectList);
 });
-FilterableSelect.propTypes = {
-  ...formInputPropTypes,
+FilterableSelect.propTypes = { ...formInputPropTypes,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-component": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-element": PropTypes.string,
+
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role": PropTypes.string,
+
   /** Boolean to toggle where SelectList is rendered in relation to the Select Input */
   disablePortal: PropTypes.bool,
+
   /** The selected value(s), when the component is operating in controlled mode */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+
   /** Child components (such as Option or OptionRow) for the SelectList */
   children: PropTypes.node.isRequired,
+
   /** A custom callback for when the input text changes */
   onFilterChange: PropTypes.func,
+
   /** A custom callback for when the dropdown menu opens */
   onOpen: PropTypes.func,
+
   /** If true the Component opens on focus */
   openOnFocus: PropTypes.bool,
+
   /** SelectList table header, should consist of multiple th elements.
   Works only in multiColumn mode */
   tableHeader: PropTypes.node,
+
   /** When true component will work in multi column mode.
   Children should consist of OptionRow components in this mode */
   multiColumn: PropTypes.bool,
+
   /** A custom message to be displayed when any option does not match the filter text */
   noResultsMessage: PropTypes.string,
+
   /** True for default text button or a Button Component to be rendered */
   listActionButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+
   /** A callback for when the Action Button is triggered */
   onListAction: PropTypes.func,
+
   /** If true the loader animation is displayed in the option list */
   isLoading: PropTypes.bool,
+
   /** A callback that is triggered when a user scrolls to the bottom of the list */
   onListScrollBottom: PropTypes.func,
+
   /** Overrides the default tooltip position */
   tooltipPosition: PropTypes.oneOf(["top", "bottom", "left", "right"]),
+
   /** Maximum list height - defaults to 180 */
   listMaxHeight: PropTypes.number,
+
   /** Placement of the select list in relation to the input element */
   listPlacement: PropTypes.oneOf(["top", "bottom", "right", "left"]),
+
   /** Use the opposite list placement if the set placement does not fit */
   flipEnabled: PropTypes.bool
 };

package/esm/components/select/list-action-button/list-action-button.component.js

@@ -8,6 +8,7 @@ const ListActionButton = /*#__PURE__*/React.forwardRef(({
   onListAction
 }, ref) => {
   const l = useLocale();
+
   function renderListActionButton() {
     if (!listActionButton || listActionButton === true) {
       return /*#__PURE__*/React.createElement(Button, {
@@ -17,16 +18,19 @@ const ListActionButton = /*#__PURE__*/React.forwardRef(({
         iconPosition: "after"
       }, l.select.actionButtonText());
     }
+
     return /*#__PURE__*/React.cloneElement(listActionButton, {
       forwardRef: ref,
       onClick: onListAction
     });
   }
+
   return /*#__PURE__*/React.createElement(StyledListActionButtonWrapper, null, renderListActionButton());
 });
 ListActionButton.propTypes = {
   /** True for default text button or a Button Component to be rendered */
   listActionButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+
   /** A callback for when the Action Button is triggered */
   onListAction: PropTypes.func.isRequired
 };