carbon-react 104.38.0 → 104.38.1

package/esm/components/button/button.component.js

@@ -1,6 +1,6 @@
 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 } from "react";
+import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import Icon from "../icon";
@@ -102,6 +102,12 @@ const Button = ({
       paddingX = 3;
   }
 
+  const setRefs = useCallback(reference => {
+    setInternalRef(reference);
+    if (!forwardRef) return;
+    if (typeof forwardRef === "object") forwardRef.current = reference;
+    if (typeof forwardRef === "function") forwardRef(reference);
+  }, [forwardRef]);
   return /*#__PURE__*/React.createElement(StyledButton, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -123,14 +129,7 @@ const Button = ({
   }, tagComponent("button", rest), rest, href && {
     href
   }, {
-    ref: reference => {
-      if (reference) {
-        setInternalRef(reference);
-        if (!forwardRef) return;
-        if (typeof forwardRef === "object") forwardRef.current = reference;
-        if (typeof forwardRef === "function") forwardRef(reference);
-      }
-    }
+    ref: setRefs
   }), renderChildren({
     iconType,
     iconPosition,

package/esm/components/icon-button/icon-button.component.js

@@ -1,6 +1,6 @@
 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 } from "react";
+import React, { useState, useCallback } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import Events from "../../__internal__/utils/helpers/events";
@@ -32,18 +32,17 @@ const IconButton = /*#__PURE__*/React.forwardRef(({
     onAction(e);
   };
 
+  const setRefs = useCallback(reference => {
+    setInternalRef(reference);
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") ref(reference);
+  }, [ref]);
   return /*#__PURE__*/React.createElement(StyledIconButton, _extends({}, rest, {
     "aria-label": ariaLabel,
     onKeyDown: onKeyDown,
     onClick: handleOnAction,
-    ref: reference => {
-      if (reference) {
-        setInternalRef(reference);
-        if (!ref) return;
-        if (typeof ref === "object") ref.current = reference;
-        if (typeof ref === "function") ref(reference);
-      }
-    },
+    ref: setRefs,
     disabled: disabled
   }, marginProps), /*#__PURE__*/React.createElement(TooltipProvider, {
     disabled: disabled,

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

@@ -165,7 +165,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
 
     isClickTriggeredBySelect.current = false;
   }, [isOpen]);
-  const mapValuesToPills = useCallback(() => {
+  const mapValuesToPills = useMemo(() => {
     const canDelete = !disabled && !readOnly;
 
     if (!selectedValue.length) {
@@ -384,7 +384,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
       disabled,
       readOnly,
       placeholder: placeholderOverride,
-      leftChildren: mapValuesToPills(),
+      leftChildren: mapValuesToPills,
       inputRef: assignInput,
       formattedValue: textValue,
       selectedValue,

package/lib/components/button/button.component.js

@@ -121,6 +121,12 @@ const Button = ({
       paddingX = 3;
   }
 
+  const setRefs = (0, _react.useCallback)(reference => {
+    setInternalRef(reference);
+    if (!forwardRef) return;
+    if (typeof forwardRef === "object") forwardRef.current = reference;
+    if (typeof forwardRef === "function") forwardRef(reference);
+  }, [forwardRef]);
   return /*#__PURE__*/_react.default.createElement(_button.default, _extends({
     "aria-label": !children && iconType ? ariaLabel || iconType : undefined,
     as: !disabled && href ? "a" : "button",
@@ -142,14 +148,7 @@ const Button = ({
   }, (0, _tags.default)("button", rest), rest, href && {
     href
   }, {
-    ref: reference => {
-      if (reference) {
-        setInternalRef(reference);
-        if (!forwardRef) return;
-        if (typeof forwardRef === "object") forwardRef.current = reference;
-        if (typeof forwardRef === "function") forwardRef(reference);
-      }
-    }
+    ref: setRefs
   }), renderChildren({
     iconType,
     iconPosition,

package/lib/components/icon-button/icon-button.component.js

@@ -54,18 +54,17 @@ const IconButton = /*#__PURE__*/_react.default.forwardRef(({
     onAction(e);
   };
 
+  const setRefs = (0, _react.useCallback)(reference => {
+    setInternalRef(reference);
+    if (!ref) return;
+    if (typeof ref === "object") ref.current = reference;
+    if (typeof ref === "function") ref(reference);
+  }, [ref]);
   return /*#__PURE__*/_react.default.createElement(_iconButton.default, _extends({}, rest, {
     "aria-label": ariaLabel,
     onKeyDown: onKeyDown,
     onClick: handleOnAction,
-    ref: reference => {
-      if (reference) {
-        setInternalRef(reference);
-        if (!ref) return;
-        if (typeof ref === "object") ref.current = reference;
-        if (typeof ref === "function") ref(reference);
-      }
-    },
+    ref: setRefs,
     disabled: disabled
   }, marginProps), /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     disabled: disabled,

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

@@ -191,7 +191,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
 
     isClickTriggeredBySelect.current = false;
   }, [isOpen]);
-  const mapValuesToPills = (0, _react.useCallback)(() => {
+  const mapValuesToPills = (0, _react.useMemo)(() => {
     const canDelete = !disabled && !readOnly;
 
     if (!selectedValue.length) {
@@ -411,7 +411,7 @@ const MultiSelect = /*#__PURE__*/_react.default.forwardRef(({
       disabled,
       readOnly,
       placeholder: placeholderOverride,
-      leftChildren: mapValuesToPills(),
+      leftChildren: mapValuesToPills,
       inputRef: assignInput,
       formattedValue: textValue,
       selectedValue,

package/package.json

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