carbon-react 109.3.4 → 109.3.5

package/esm/components/select/multi-select/multi-select.component.js

@@ -64,6 +64,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const [highlightedValue, setHighlightedValue] = useState("");
   const [filterText, setFilterText] = useState("");
   const [placeholderOverride, setPlaceholderOverride] = useState();
+  const actualValue = isControlled.current ? value : selectedValue;
   const setOpen = useCallback(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
@@ -86,6 +87,23 @@ 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
+
+    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
+
+
+    if (!isControlled.current) {
+      setSelectedValue(updateFunction);
+    }
+  }, [createCustomEvent, onChange, actualValue]);
   const handleTextboxChange = useCallback(event => {
     const newValue = event.target.value;
     const match = findElementWithMatchingText(newValue, children);
@@ -99,24 +117,17 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     setOpen();
   }, [children, setOpen]);
   const removeSelectedValue = useCallback(index => {
-    setSelectedValue(previousValue => {
-      isClickTriggeredBySelect.current = true;
-
+    isClickTriggeredBySelect.current = true;
+    updateValue(previousValue => {
       if (!previousValue.length) {
         return previousValue;
       }
 
       const newValue = [...previousValue];
       newValue.splice(index, 1);
-
-      if (onChange) {
-        onChange(createCustomEvent(newValue));
-        return newValue;
-      }
-
       return newValue;
     });
-  }, [createCustomEvent, onChange]);
+  }, [updateValue]);
   const handleTextboxKeydown = useCallback(event => {
     const {
       key
@@ -142,12 +153,12 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = useMemo(() => {
-    return selectedValue && selectedValue.length ? React.Children.map(children, child => {
-      return selectedValue.includes(child.props.value) ? child.props.text : false;
+    return actualValue && actualValue.length ? React.Children.map(children, child => {
+      return actualValue.includes(child.props.value) ? child.props.text : false;
     }).filter(child => child).reduce((acc, item) => {
       return acc ? `${acc}, ${item}` : item;
     }, "") : null;
-  }, [children, selectedValue]);
+  }, [children, actualValue]);
   const handleGlobalClick = useCallback(event => {
     isMouseDownReported.current = false;
 
@@ -170,11 +181,11 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
   const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
 
-    if (!selectedValue.length) {
+    if (!actualValue.length) {
       return "";
     }
 
-    return selectedValue.map((singleValue, index) => {
+    return actualValue.map((singleValue, index) => {
       const matchingOption = React.Children.toArray(children).find(child => isExpectedOption(child, singleValue));
       let pillProps = {};
 
@@ -203,22 +214,18 @@ const MultiSelect = /*#__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(value);
-    }
   }, [value, onChange]); // removes placeholder when a value is present
 
   useEffect(() => {
     const hasValue = value === null || value === void 0 ? void 0 : value.length;
-    const hasSelectedValue = selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length;
+    const hasSelectedValue = actualValue === null || actualValue === void 0 ? void 0 : actualValue.length;
 
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");
     } else {
       setPlaceholderOverride(placeholder);
     }
-  }, [value, selectedValue, placeholder]);
+  }, [value, actualValue, placeholder]);
   useEffect(() => {
     const clickEvent = "click";
     window.addEventListener(clickEvent, handleGlobalClick);
@@ -335,27 +342,22 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     }
 
     setTextValue("");
-    const isAlreadySelected = selectedValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
+    const isAlreadySelected = actualValue.findIndex(val => isExpectedValue(val, newValue)) !== -1;
 
     if (!isAlreadySelected && isControlled.current && onChange) {
-      onChange(createCustomEvent([...selectedValue, newValue]));
+      onChange(createCustomEvent([...actualValue, newValue]));
     }
 
-    setSelectedValue(previousValue => {
-      textboxRef.focus();
-      isMouseDownReported.current = false;
-
+    textboxRef.focus();
+    isMouseDownReported.current = false;
+    updateValue(previousValue => {
       if (isAlreadySelected) {
         return previousValue;
       }
 
-      if (onChange) {
-        onChange(createCustomEvent([...previousValue, newValue]));
-      }
-
       return [...previousValue, newValue];
     });
-  }, [createCustomEvent, onChange, textboxRef, selectedValue]);
+  }, [createCustomEvent, onChange, textboxRef, actualValue, updateValue]);
 
   function onSelectListClose() {
     setOpenState(false);
@@ -389,7 +391,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       leftChildren: mapValuesToPills,
       inputRef: assignInput,
       formattedValue: textValue,
-      selectedValue,
+      selectedValue: actualValue,
       onClick: handleTextboxClick,
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
@@ -423,7 +425,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
-    multiselectValues: selectedValue
+    multiselectValues: actualValue
   }, children);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,

package/lib/components/select/multi-select/multi-select.component.js

@@ -91,6 +91,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const [highlightedValue, setHighlightedValue] = (0, _react.useState)("");
   const [filterText, setFilterText] = (0, _react.useState)("");
   const [placeholderOverride, setPlaceholderOverride] = (0, _react.useState)();
+  const actualValue = isControlled.current ? value : selectedValue;
   const setOpen = (0, _react.useCallback)(() => {
     setOpenState(isAlreadyOpen => {
       if (!isAlreadyOpen && onOpen) {
@@ -113,6 +114,23 @@ const MultiSelect = /*#__PURE__*/_react.default.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 = (0, _react.useCallback)(updateFunction => {
+    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
+
+
+    if (!isControlled.current) {
+      setSelectedValue(updateFunction);
+    }
+  }, [createCustomEvent, onChange, actualValue]);
   const handleTextboxChange = (0, _react.useCallback)(event => {
     const newValue = event.target.value;
     const match = findElementWithMatchingText(newValue, children);
@@ -126,24 +144,17 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     setOpen();
   }, [children, setOpen]);
   const removeSelectedValue = (0, _react.useCallback)(index => {
-    setSelectedValue(previousValue => {
-      isClickTriggeredBySelect.current = true;
-
+    isClickTriggeredBySelect.current = true;
+    updateValue(previousValue => {
       if (!previousValue.length) {
         return previousValue;
       }
 
       const newValue = [...previousValue];
       newValue.splice(index, 1);
-
-      if (onChange) {
-        onChange(createCustomEvent(newValue));
-        return newValue;
-      }
-
       return newValue;
     });
-  }, [createCustomEvent, onChange]);
+  }, [updateValue]);
   const handleTextboxKeydown = (0, _react.useCallback)(event => {
     const {
       key
@@ -169,12 +180,12 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
 
   }, [onKeyDown, readOnly, filterText, textValue, setOpen, removeSelectedValue]);
   const accessibilityLabel = (0, _react.useMemo)(() => {
-    return selectedValue && selectedValue.length ? _react.default.Children.map(children, child => {
-      return selectedValue.includes(child.props.value) ? child.props.text : false;
+    return actualValue && actualValue.length ? _react.default.Children.map(children, child => {
+      return actualValue.includes(child.props.value) ? child.props.text : false;
     }).filter(child => child).reduce((acc, item) => {
       return acc ? `${acc}, ${item}` : item;
     }, "") : null;
-  }, [children, selectedValue]);
+  }, [children, actualValue]);
   const handleGlobalClick = (0, _react.useCallback)(event => {
     isMouseDownReported.current = false;
 
@@ -197,11 +208,11 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
   const mapValuesToPills = (0, _react.useMemo)(() => {
     const canDelete = !disabled && !readOnly;
 
-    if (!selectedValue.length) {
+    if (!actualValue.length) {
       return "";
     }
 
-    return selectedValue.map((singleValue, index) => {
+    return actualValue.map((singleValue, index) => {
       const matchingOption = _react.default.Children.toArray(children).find(child => (0, _isExpectedOption.default)(child, singleValue));
 
       let pillProps = {};
@@ -231,22 +242,18 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     const onChangeMissingMessage = "onChange prop required when using a controlled input element";
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
     !(!isControlled.current || isControlled.current && onChange) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, onChangeMissingMessage) : (0, _invariant.default)(false) : void 0;
-
-    if (isControlled.current) {
-      setSelectedValue(value);
-    }
   }, [value, onChange]); // removes placeholder when a value is present
 
   (0, _react.useEffect)(() => {
     const hasValue = value === null || value === void 0 ? void 0 : value.length;
-    const hasSelectedValue = selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length;
+    const hasSelectedValue = actualValue === null || actualValue === void 0 ? void 0 : actualValue.length;
 
     if (hasValue || hasSelectedValue) {
       setPlaceholderOverride(" ");
     } else {
       setPlaceholderOverride(placeholder);
     }
-  }, [value, selectedValue, placeholder]);
+  }, [value, actualValue, placeholder]);
   (0, _react.useEffect)(() => {
     const clickEvent = "click";
     window.addEventListener(clickEvent, handleGlobalClick);
@@ -363,27 +370,22 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     }
 
     setTextValue("");
-    const isAlreadySelected = selectedValue.findIndex(val => (0, _isExpectedValue.default)(val, newValue)) !== -1;
+    const isAlreadySelected = actualValue.findIndex(val => (0, _isExpectedValue.default)(val, newValue)) !== -1;
 
     if (!isAlreadySelected && isControlled.current && onChange) {
-      onChange(createCustomEvent([...selectedValue, newValue]));
+      onChange(createCustomEvent([...actualValue, newValue]));
     }
 
-    setSelectedValue(previousValue => {
-      textboxRef.focus();
-      isMouseDownReported.current = false;
-
+    textboxRef.focus();
+    isMouseDownReported.current = false;
+    updateValue(previousValue => {
       if (isAlreadySelected) {
         return previousValue;
       }
 
-      if (onChange) {
-        onChange(createCustomEvent([...previousValue, newValue]));
-      }
-
       return [...previousValue, newValue];
     });
-  }, [createCustomEvent, onChange, textboxRef, selectedValue]);
+  }, [createCustomEvent, onChange, textboxRef, actualValue, updateValue]);
 
   function onSelectListClose() {
     setOpenState(false);
@@ -417,7 +419,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       leftChildren: mapValuesToPills,
       inputRef: assignInput,
       formattedValue: textValue,
-      selectedValue,
+      selectedValue: actualValue,
       onClick: handleTextboxClick,
       onMouseDown: handleTextboxMouseDown,
       onFocus: handleTextboxFocus,
@@ -451,7 +453,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
     listPlacement: listPlacement,
     flipEnabled: flipEnabled,
     loaderDataRole: "multi-select-list-loader",
-    multiselectValues: selectedValue
+    multiselectValues: actualValue
   }, children);
 
   return /*#__PURE__*/_react.default.createElement(_multiSelect.StyledSelectMultiSelect, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "109.3.4",
+  "version": "109.3.5",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {