carbon-react 111.12.1 → 111.12.3

package/esm/components/select/multi-select/multi-select.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, useEffect, useRef, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -71,13 +70,13 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       if (!isAlreadyOpen && onOpen) {
         onOpen();
       }
-
       return true;
     });
   }, [onOpen]);
   const createCustomEvent = useCallback(newValue => {
     const customEvent = {
-      target: { ...(name && {
+      target: {
+        ...(name && {
           name
         }),
         ...(id && {
@@ -88,19 +87,19 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     };
     return customEvent;
   }, [name, id]);
+
   /* generic value update function which can be used for both controlled and uncontrolled
    * components, both with and without onChange.
    * It accepts a function to update the value, which is assumed to be have no side effects and therefore
    * be safe to run more than once if needed. */
-
   const updateValue = useCallback(updateFunction => {
-    const newValue = updateFunction(actualValue); // only call onChange if an option has been selected or deselected
-
+    const newValue = updateFunction(actualValue);
+    // only call onChange if an option has been selected or deselected
     if (onChange && newValue.length !== actualValue.length) {
       onChange(createCustomEvent(newValue));
-    } // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
-
+    }
 
+    // no need to update selectedValue if the component is controlled: onChange should take care of updating the value
     if (!isControlled.current) {
       setSelectedValue(updateFunction);
     }
@@ -108,11 +107,9 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const handleTextboxChange = useCallback(event => {
     const newValue = event.target.value;
     const match = findElementWithMatchingText(newValue, children);
-
     if (match) {
       setHighlightedValue(match.props.value);
     }
-
     setFilterText(newValue);
     setTextValue(newValue);
     setOpen();
@@ -123,7 +120,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       if (!previousValue.length) {
         return previousValue;
       }
-
       const newValue = [...previousValue];
       newValue.splice(index, 1);
       return newValue;
@@ -134,24 +130,20 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       key
     } = event;
     const isDeleteKey = key === "Backspace" || key === "Delete";
-
     if (onKeyDown) {
       onKeyDown(event);
     }
-
     if (readOnly) {
       return;
     }
-
     if (!event.defaultPrevented && isNavigationKey(key)) {
       event.preventDefault();
       setOpen();
     }
-
     if (isDeleteKey && (filterText === "" || textValue === "")) {
       removeSelectedValue(-1);
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = useMemo(() => {
     return actualValue && actualValue.length ? React.Children.map(children, child => {
@@ -162,34 +154,27 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   }, [children, actualValue]);
   const handleGlobalClick = useCallback(event => {
     isMouseDownReported.current = false;
-
     if (!isOpen) {
       return;
     }
-
     const notInContainer = containerRef.current && !containerRef.current.contains(event.target);
     const notInList = listboxRef.current && !listboxRef.current.contains(event.target);
-
     if (notInContainer && notInList && !isClickTriggeredBySelect.current) {
       setTextValue("");
       setFilterText("");
       setHighlightedValue("");
       setOpenState(false);
     }
-
     isClickTriggeredBySelect.current = false;
   }, [isOpen]);
   const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
-
     if (!actualValue.length) {
       return "";
     }
-
     return actualValue.map((singleValue, index) => {
       const matchingOption = React.Children.toArray(children).find(child => isExpectedOption(child, singleValue));
       let pillProps = {};
-
       if (matchingOption) {
         pillProps = {
           title: matchingOption.props.text,
@@ -197,7 +182,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
-
       const {
         title
       } = pillProps;
@@ -208,19 +192,20 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
         onDelete: canDelete ? () => removeSelectedValue(index) : undefined,
         wrapText: wrapPillText
       }, pillProps), title));
-    }); // eslint-disable-next-line react-hooks/exhaustive-deps
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [children, disabled, readOnly, actualValue]);
   useEffect(() => {
     const modeSwitchedMessage = "Input elements should not switch from uncontrolled to controlled (or vice versa). " + "Decide between using a controlled or uncontrolled input element for the lifetime of the component";
     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;
-  }, [value, onChange]); // removes placeholder when a value is present
+  }, [value, onChange]);
 
+  // removes placeholder when a value is present
   useEffect(() => {
     const hasValue = value === null || value === void 0 ? void 0 : value.length;
     const hasSelectedValue = actualValue === null || actualValue === void 0 ? void 0 : actualValue.length;
-
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");
     } else {
@@ -239,84 +224,64 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       onFilterChange(filterText);
     }
   }, [filterText, onFilterChange]);
-
   function handleTextboxClick(event) {
     isMouseDownReported.current = false;
-
     if (onClick) {
       onClick(event);
     }
   }
-
   function handleDropdownIconClick(event) {
     isMouseDownReported.current = false;
-
     if (onClick) {
       onClick(event);
     }
-
     setOpenState(isAlreadyOpen => {
       if (isAlreadyOpen) {
         setFilterText("");
         return false;
       }
-
       if (onOpen) {
         onOpen();
       }
-
       return 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 handleTextboxFocus(event) {
     const triggerFocus = () => onFocus(event);
-
     if (openOnFocus) {
       setOpenState(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) {
@@ -324,47 +289,38 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       isInputFocused.current = true;
     }
   }
-
   const onSelectOption = useCallback(optionData => {
     const {
       value: newValue,
       selectionType,
       id: selectedOptionId
     } = optionData;
-
     if (selectionType === "navigationKey") {
       setHighlightedValue(newValue);
       setActiveDescendantId(selectedOptionId);
       return;
     }
-
     if (selectionType === "click") {
       isClickTriggeredBySelect.current = true;
     }
-
     setTextValue("");
     const isAlreadySelected = actualValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
-
     if (!isAlreadySelected && isControlled.current && onChange) {
       onChange(createCustomEvent([...actualValue, newValue]));
     }
-
     textboxRef.focus();
     isMouseDownReported.current = false;
     updateValue(previousValue => {
       if (isAlreadySelected) {
         return previousValue;
       }
-
       return [...previousValue, newValue];
     });
   }, [createCustomEvent, onChange, textboxRef, actualValue, updateValue]);
-
   function onSelectListClose() {
     setOpenState(false);
     setFilterText("");
   }
-
   function findElementWithMatchingText(textToMatch, list) {
     return list.find(child => {
       const {
@@ -373,15 +329,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       return text && text.toLowerCase().indexOf(textToMatch.toLowerCase()) !== -1;
     });
   }
-
   function assignInput(input) {
     setTextboxRef(input.current);
-
     if (inputRef) {
       inputRef.current = input.current;
     }
   }
-
   function getTextboxProps() {
     return {
       id,
@@ -406,7 +359,6 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }
-
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -453,64 +405,46 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     textboxRef: textboxRef
   }, getTextboxProps()))), selectList);
 });
-MultiSelect.propTypes = { ...formInputPropTypes,
-
+MultiSelect.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.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.object)]),
-
   /** The default selected value(s), when the component is operating in uncontrolled mode */
   defaultValue: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(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,
-
   /** If true the loader animation is displayed in the option list */
   isLoading: PropTypes.bool,
-
   /** 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,
-
   /** Wraps the pill text when it would overflow the input width */
   wrapPillText: PropTypes.bool
 };

package/esm/components/select/option/option.component.js

@@ -14,11 +14,9 @@ const Option = /*#__PURE__*/React.forwardRef(({
 }, ref) => {
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
-
   if (selectListContext.multiselectValues) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
-
   function handleClick() {
     if (!onClick) {
       onSelect({
@@ -37,7 +35,6 @@ const Option = /*#__PURE__*/React.forwardRef(({
       });
     }
   }
-
   return /*#__PURE__*/React.createElement(StyledOption, {
     id: id,
     ref: ref,
@@ -52,48 +49,39 @@ const Option = /*#__PURE__*/React.forwardRef(({
 Option.propTypes = {
   /** The option's visible text, displayed within Textbox of Select, and used for filtering */
   text: PropTypes.string.isRequired,
-
   /** Optional: alternative rendered content, displayed within SelectList of Select (eg: an icon, an image, etc) */
   children: PropTypes.node,
-
   /** The option's invisible internal value */
   value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-
   /**
    * @private
    * @ignore
    * Component id (prop added by the SelectList component)
    */
   id: PropTypes.string,
-
   /**
    * @private
    * @ignore
    * Callback to return value when the element is clicked (prop added by the SelectList component) */
   onClick: PropTypes.func,
-
   /**
    * @private
    * @ignore
    * Callback to return value when the element is selected (prop added by the SelectList component) */
   onSelect: PropTypes.func,
-
   /**
    * @private
    * @ignore
    * Position of the element in the list */
   index: PropTypes.number,
-
   /**
    * @private
    * @ignore
    * True when option should be hidden from the view (prop added by the SelectList component) */
   hidden: PropTypes.bool,
-
   /** MultiSelect only - custom Pill border color - provide any color from palette or any valid css color value. */
   // eslint-disable-next-line react/no-unused-prop-types
   borderColor: PropTypes.string,
-
   /** MultiSelect only - fill Pill background with color */
   // eslint-disable-next-line react/no-unused-prop-types
   fill: PropTypes.bool

package/esm/components/select/option-group-header/option-group-header.component.js

@@ -2,7 +2,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledOptionGroupHeader from "./option-group-header.style";
 import Icon from "../../icon";
-
 const OptionGroupHeader = ({
   label,
   icon
@@ -11,11 +10,9 @@ const OptionGroupHeader = ({
     type: icon
   }), /*#__PURE__*/React.createElement("h4", null, label));
 };
-
 OptionGroupHeader.propTypes = {
   /** Heading text */
   label: PropTypes.string.isRequired,
-
   /**
    * <a href="https://brand.sage.com/d/NdbrveWvNheA/foundations#/icons/icons" target="_blank">List of supported icons</a>
    *

package/esm/components/select/option-row/option-row.component.js

@@ -18,14 +18,11 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
       value
     });
   };
-
   const selectListContext = useContext(SelectListContext);
   let isSelected = selectListContext.currentOptionsListIndex === index;
-
   if (selectListContext.multiselectValues) {
     isSelected = selectListContext.multiselectValues.includes(value);
   }
-
   return /*#__PURE__*/React.createElement(StyledOptionRow, {
     id: id,
     ref: ref,
@@ -40,32 +37,26 @@ const OptionRow = /*#__PURE__*/React.forwardRef(({
 OptionRow.propTypes = {
   /** The option's visible text, displayed within Textbox of Select */
   text: PropTypes.string.isRequired,
-
   /** Row content, should consist of multiple `td` elements */
   children: PropTypes.node.isRequired,
-
   /** The option's invisible internal value */
   value: PropTypes.oneOfType([PropTypes.object, PropTypes.string]).isRequired,
-
   /**
    * @private
    * @ignore
    * Component id (prop added by the SelectList component)
    */
   id: PropTypes.string.isRequired,
-
   /**
    * @private
    * @ignore
    * Callback to return value when the element is selected (prop added by the SelectList component) */
   onSelect: PropTypes.func,
-
   /**
    * @private
    * @ignore
    * Position of the element in the list */
   index: PropTypes.number,
-
   /**
    * @private
    * @ignore