carbon-react 142.13.2 → 142.13.4

package/esm/components/badge/badge.component.js

@@ -1,5 +1,5 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from "react";
+import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { StyledBadgeWrapper, StyledCrossIcon, StyledCounter, StyledBadge } from "./badge.style";
 export const Badge = ({
@@ -11,6 +11,8 @@ export const Badge = ({
 }) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
+  const [isFocused, setIsFocused] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
   const renderCorrectBadge = () => {
     const props = onClick ? {
       buttonType: "secondary",
@@ -23,7 +25,22 @@ export const Badge = ({
         "data-role": "badge",
         "data-component": "badge",
         color: color
-      }, props), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {
+      }, props, {
+        onFocus: () => {
+          setIsFocused(true);
+        },
+        onBlur: () => {
+          setIsFocused(false);
+        },
+        onMouseEnter: () => {
+          setIsHovered(true);
+        },
+        onMouseLeave: () => {
+          setIsHovered(false);
+        },
+        isFocused: isFocused,
+        isHovered: isHovered
+      }), onClick && /*#__PURE__*/React.createElement(StyledCrossIcon, {
         "data-element": "badge-cross-icon",
         type: "cross"
       }), /*#__PURE__*/React.createElement(StyledCounter, {

package/esm/components/badge/badge.style.d.ts

@@ -3,6 +3,8 @@ declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"d
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledBadgeProps {
     color: string;
+    isFocused?: boolean;
+    isHovered?: boolean;
 }
 declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
     as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;

package/esm/components/badge/badge.style.js

@@ -52,7 +52,9 @@ const StyledBadge = styled.span.attrs(({
   ${({
   onClick,
   color,
-  theme
+  theme,
+  isFocused,
+  isHovered
 }) => css`
     ${onClick && `
       ${commonStyles}
@@ -65,27 +67,29 @@ const StyledBadge = styled.span.attrs(({
       }
 
       border-color: ${toColor(theme, color)};
-      color: ${toColor(theme, color)};      
+      color: ${toColor(theme, color)};
 
-      &:hover,
-      &:focus {
-        background: ${toColor(theme, color)};
-        border: none;
-        ${StyledCounter} {
-          display: none;
-        }
+      ${(isFocused || isHovered) && `
+        && {
+          background: ${toColor(theme, color)};
+          border: none;
+          ${StyledCounter} {
+            display: none;
+          }
 
-        ${StyledIcon} {
-          display: block;
-          width: auto;
-          height: auto;
-          margin-right: 0;
+          ${StyledIcon} {
+            display: block;
+            width: auto;
+            height: auto;
+            margin-right: 0;
 
-          :before {
-            font-size: 20px;
-            color: var(--colorsActionMajorYang100);
+            :before {
+              font-size: 20px;
+              color: var(--colorsActionMajorYang100);
+            }
           }
         }
+      `}
       }
     `}
   `}

package/esm/components/select/__internal__/select-textbox/select-textbox.component.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 import { CommonTextboxProps } from "../../../textbox";
 import { ValidationProps } from "../../../../__internal__/validations";
 export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
@@ -29,8 +28,6 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     name?: string;
     /** Specify a callback triggered on blur */
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Specify a callback triggered on change */
-    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */

package/esm/components/select/__internal__/select-textbox/select-textbox.component.js

@@ -20,7 +20,6 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
   onClick,
   onFocus,
   onBlur,
-  onChange,
   formattedValue = "",
   selectedValue,
   required,
@@ -75,8 +74,10 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     "data-role": "select-textbox",
     inputIcon: "dropdown",
     autoComplete: "off",
-    size: size,
-    onChange: onChange,
+    size: size
+    // prevent uncontrolled warning being fired
+    ,
+    onChange: () => {},
     formattedValue: formattedValue,
     value: hasStringValue ? selectedValue : undefined,
     placeholder: hasTextCursor ? placeholder : undefined
@@ -404,7 +405,6 @@ if (process.env.NODE_ENV !== "production") {
     "onCanPlayCapture": PropTypes.func,
     "onCanPlayThrough": PropTypes.func,
     "onCanPlayThroughCapture": PropTypes.func,
-    "onChange": PropTypes.func,
     "onChangeCapture": PropTypes.func,
     "onChangeDeferred": PropTypes.func,
     "onClick": PropTypes.func,

package/esm/components/select/filterable-select/filterable-select.component.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { Side } from "@floating-ui/dom";
 import { ButtonProps } from "../../button";
 import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { CustomSelectChangeEvent } from "../simple-select";
 export interface FilterableSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;
@@ -65,6 +66,8 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default FilterableSelect;

package/esm/components/select/multi-select/multi-select.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { CustomSelectChangeEvent } from "../simple-select";
 export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;
@@ -57,6 +58,8 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     virtualScrollOverscan?: number;
     /** Flag to configure component as optional. */
     isOptional?: boolean;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default MultiSelect;

package/esm/components/select/simple-select/simple-select.component.d.ts

@@ -65,6 +65,8 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default SimpleSelect;

package/lib/components/badge/badge.component.js

@@ -4,10 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Badge = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _badge = require("./badge.style");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const Badge = ({
   "aria-label": ariaLabel,
@@ -18,6 +20,8 @@ const Badge = ({
 }) => {
   const shouldDisplayCounter = +counter > 0;
   const counterToDisplay = +counter > 99 ? 99 : counter;
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const [isHovered, setIsHovered] = (0, _react.useState)(false);
   const renderCorrectBadge = () => {
     const props = onClick ? {
       buttonType: "secondary",
@@ -30,7 +34,22 @@ const Badge = ({
         "data-role": "badge",
         "data-component": "badge",
         color: color
-      }, props), onClick && /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
+      }, props, {
+        onFocus: () => {
+          setIsFocused(true);
+        },
+        onBlur: () => {
+          setIsFocused(false);
+        },
+        onMouseEnter: () => {
+          setIsHovered(true);
+        },
+        onMouseLeave: () => {
+          setIsHovered(false);
+        },
+        isFocused: isFocused,
+        isHovered: isHovered
+      }), onClick && /*#__PURE__*/_react.default.createElement(_badge.StyledCrossIcon, {
         "data-element": "badge-cross-icon",
         type: "cross"
       }), /*#__PURE__*/_react.default.createElement(_badge.StyledCounter, {

package/lib/components/badge/badge.style.d.ts

@@ -3,6 +3,8 @@ declare const StyledBadgeWrapper: import("styled-components").StyledComponent<"d
 declare const StyledCounter: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface StyledBadgeProps {
     color: string;
+    isFocused?: boolean;
+    isHovered?: boolean;
 }
 declare const StyledBadge: import("styled-components").StyledComponent<"span", any, {
     as: import("react").ForwardRefExoticComponent<import("../button").ButtonProps & import("react").RefAttributes<HTMLButtonElement>> | undefined;

package/lib/components/badge/badge.style.js

@@ -61,7 +61,9 @@ const StyledBadge = exports.StyledBadge = _styledComponents.default.span.attrs((
   ${({
   onClick,
   color,
-  theme
+  theme,
+  isFocused,
+  isHovered
 }) => (0, _styledComponents.css)`
     ${onClick && `
       ${commonStyles}
@@ -74,27 +76,29 @@ const StyledBadge = exports.StyledBadge = _styledComponents.default.span.attrs((
       }
 
       border-color: ${(0, _color.toColor)(theme, color)};
-      color: ${(0, _color.toColor)(theme, color)};      
+      color: ${(0, _color.toColor)(theme, color)};
 
-      &:hover,
-      &:focus {
-        background: ${(0, _color.toColor)(theme, color)};
-        border: none;
-        ${StyledCounter} {
-          display: none;
-        }
+      ${(isFocused || isHovered) && `
+        && {
+          background: ${(0, _color.toColor)(theme, color)};
+          border: none;
+          ${StyledCounter} {
+            display: none;
+          }
 
-        ${_icon.default} {
-          display: block;
-          width: auto;
-          height: auto;
-          margin-right: 0;
+          ${_icon.default} {
+            display: block;
+            width: auto;
+            height: auto;
+            margin-right: 0;
 
-          :before {
-            font-size: 20px;
-            color: var(--colorsActionMajorYang100);
+            :before {
+              font-size: 20px;
+              color: var(--colorsActionMajorYang100);
+            }
           }
         }
+      `}
       }
     `}
   `}

package/lib/components/select/__internal__/select-textbox/select-textbox.component.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { CustomSelectChangeEvent } from "../../simple-select/simple-select.component";
 import { CommonTextboxProps } from "../../../textbox";
 import { ValidationProps } from "../../../../__internal__/validations";
 export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxProps, "onClick" | "onChange"> {
@@ -29,8 +28,6 @@ export interface FormInputPropTypes extends ValidationProps, Omit<CommonTextboxP
     name?: string;
     /** Specify a callback triggered on blur */
     onBlur?: (ev: React.FocusEvent<HTMLInputElement>) => void;
-    /** Specify a callback triggered on change */
-    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on click */
     onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
     /** Specify a callback triggered on focus */

package/lib/components/select/__internal__/select-textbox/select-textbox.component.js

@@ -27,7 +27,6 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
   onClick,
   onFocus,
   onBlur,
-  onChange,
   formattedValue = "",
   selectedValue,
   required,
@@ -82,8 +81,10 @@ const SelectTextbox = /*#__PURE__*/_react.default.forwardRef(({
     "data-role": "select-textbox",
     inputIcon: "dropdown",
     autoComplete: "off",
-    size: size,
-    onChange: onChange,
+    size: size
+    // prevent uncontrolled warning being fired
+    ,
+    onChange: () => {},
     formattedValue: formattedValue,
     value: hasStringValue ? selectedValue : undefined,
     placeholder: hasTextCursor ? placeholder : undefined
@@ -411,7 +412,6 @@ if (process.env.NODE_ENV !== "production") {
     "onCanPlayCapture": _propTypes.default.func,
     "onCanPlayThrough": _propTypes.default.func,
     "onCanPlayThroughCapture": _propTypes.default.func,
-    "onChange": _propTypes.default.func,
     "onChangeCapture": _propTypes.default.func,
     "onChangeDeferred": _propTypes.default.func,
     "onClick": _propTypes.default.func,

package/lib/components/select/filterable-select/filterable-select.component.d.ts

@@ -2,6 +2,7 @@ import React from "react";
 import { Side } from "@floating-ui/dom";
 import { ButtonProps } from "../../button";
 import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { CustomSelectChangeEvent } from "../simple-select";
 export interface FilterableSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;
@@ -65,6 +66,8 @@ export interface FilterableSelectProps extends Omit<FormInputPropTypes, "default
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     required?: boolean;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const FilterableSelect: React.ForwardRefExoticComponent<FilterableSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default FilterableSelect;

package/lib/components/select/multi-select/multi-select.component.d.ts

@@ -1,6 +1,7 @@
 import React from "react";
 import { Side } from "@floating-ui/dom";
 import { FormInputPropTypes } from "../__internal__/select-textbox";
+import { CustomSelectChangeEvent } from "../simple-select";
 export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue" | "value"> {
     /** Prop to specify the aria-label attribute of the component input */
     "aria-label"?: string;
@@ -57,6 +58,8 @@ export interface MultiSelectProps extends Omit<FormInputPropTypes, "defaultValue
     virtualScrollOverscan?: number;
     /** Flag to configure component as optional. */
     isOptional?: boolean;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default MultiSelect;

package/lib/components/select/simple-select/simple-select.component.d.ts

@@ -65,6 +65,8 @@ export interface SimpleSelectProps extends Omit<FormInputPropTypes, "defaultValu
     isOptional?: boolean;
     /** Flag to configure component as mandatory */
     isRequired?: boolean;
+    /** Specify a callback triggered on change */
+    onChange?: (ev: CustomSelectChangeEvent | React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const SimpleSelect: React.ForwardRefExoticComponent<SimpleSelectProps & React.RefAttributes<HTMLInputElement>>;
 export default SimpleSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "142.13.2",
+  "version": "142.13.4",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",