carbon-react 111.12.3 → 111.12.4

package/esm/components/select/multi-select/multi-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, useMemo } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
@@ -70,13 +71,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 && {
@@ -87,19 +88,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);
     }
@@ -107,9 +108,11 @@ 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();
@@ -120,6 +123,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       if (!previousValue.length) {
         return previousValue;
       }
+
       const newValue = [...previousValue];
       newValue.splice(index, 1);
       return newValue;
@@ -130,20 +134,24 @@ 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 => {
@@ -154,27 +162,34 @@ 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,
@@ -182,6 +197,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
           borderColor: matchingOption.props.borderColor
         };
       }
+
       const {
         title
       } = pillProps;
@@ -192,20 +208,19 @@ 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]);
+  }, [value, onChange]); // removes placeholder when a value is present
 
-  // 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 {
@@ -224,64 +239,84 @@ 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) {
@@ -289,38 +324,47 @@ 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 {
@@ -329,12 +373,15 @@ 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,
@@ -359,6 +406,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       ...filterOutStyledSystemSpacingProps(textboxProps)
     };
   }
+
   const selectList = /*#__PURE__*/React.createElement(FilterableSelectList, {
     ref: listboxRef,
     id: selectListId.current,
@@ -405,46 +453,64 @@ 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,9 +14,11 @@ 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({
@@ -35,6 +37,7 @@ const Option = /*#__PURE__*/React.forwardRef(({
       });
     }
   }
+
   return /*#__PURE__*/React.createElement(StyledOption, {
     id: id,
     ref: ref,
@@ -49,39 +52,48 @@ 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,6 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import StyledOptionGroupHeader from "./option-group-header.style";
 import Icon from "../../icon";
+
 const OptionGroupHeader = ({
   label,
   icon
@@ -10,9 +11,11 @@ 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,11 +18,14 @@ 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,
@@ -37,26 +40,32 @@ 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