carbon-react 104.36.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/confirm/confirm.style.js

@@ -1,7 +1,6 @@
 import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import StyledIcon from "../icon/icon.style";
-import baseTheme from "../../style/themes/base";
 import { StyledHeadingTitle } from "../heading/heading.style";
 export const StyledConfirmButtons = styled.div`
   margin-top: 48px;
@@ -22,12 +21,12 @@ export const StyledConfirmHeading = styled.div`
     ${({
   type
 }) => type === "warning" && css`
-        color: ${baseTheme.colors.warning};
+        color: var(--colorsSemanticCaution500);
       `}
     ${({
   type
 }) => type === "error" && css`
-        color: ${baseTheme.colors.error};
+        color: var(--colorsSemanticNegative500);
       `}
   }
 `;

package/esm/components/hr/hr.style.js

@@ -6,9 +6,7 @@ const StyledHr = styled.hr`
   width: inherit;
   border: 0;
   height: 1px;
-  background: ${({
-  theme
-}) => theme.hr.background};
+  background: var(--colorsUtilityMajor100);
 `;
 StyledHr.defaultProps = {
   theme: baseTheme

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/esm/components/tile-select/__internal__/accordion/accordion.style.js

@@ -1,17 +1,11 @@
 import styled from "styled-components";
 import { StyledAccordionContentContainer, StyledAccordionContent } from "../../../accordion/accordion.style";
-import baseTheme from "../../../../style/themes/base";
 const StyledContentContainer = styled(StyledAccordionContentContainer)`
-  background-color: ${({
-  theme
-}) => theme.tileSelect.hoverBackground};
+  background-color: var(--colorsActionMinor050);
 `;
 const StyledContent = styled(StyledAccordionContent)`
   padding: 24px;
   position: relative;
   z-index: 200;
 `;
-StyledContentContainer.defaultProps = {
-  theme: baseTheme
-};
 export { StyledContentContainer, StyledContent };

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/confirm/confirm.style.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _heading = require("../heading/heading.style");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -41,12 +39,12 @@ const StyledConfirmHeading = _styledComponents.default.div`
     ${({
   type
 }) => type === "warning" && (0, _styledComponents.css)`
-        color: ${_base.default.colors.warning};
+        color: var(--colorsSemanticCaution500);
       `}
     ${({
   type
 }) => type === "error" && (0, _styledComponents.css)`
-        color: ${_base.default.colors.error};
+        color: var(--colorsSemanticNegative500);
       `}
   }
 `;

package/lib/components/hr/hr.style.js

@@ -18,9 +18,7 @@ const StyledHr = _styledComponents.default.hr`
   width: inherit;
   border: 0;
   height: 1px;
-  background: ${({
-  theme
-}) => theme.hr.background};
+  background: var(--colorsUtilityMajor100);
 `;
 StyledHr.defaultProps = {
   theme: _base.default

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/lib/components/tile-select/__internal__/accordion/accordion.style.js

@@ -9,14 +9,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _accordion = require("../../../accordion/accordion.style");
 
-var _base = _interopRequireDefault(require("../../../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const StyledContentContainer = (0, _styledComponents.default)(_accordion.StyledAccordionContentContainer)`
-  background-color: ${({
-  theme
-}) => theme.tileSelect.hoverBackground};
+  background-color: var(--colorsActionMinor050);
 `;
 exports.StyledContentContainer = StyledContentContainer;
 const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionContent)`
@@ -24,7 +20,4 @@ const StyledContent = (0, _styledComponents.default)(_accordion.StyledAccordionC
   position: relative;
   z-index: 200;
 `;
-exports.StyledContent = StyledContent;
-StyledContentContainer.defaultProps = {
-  theme: _base.default
-};
+exports.StyledContent = StyledContent;

package/package.json

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