carbon-react 147.3.1 → 147.4.1

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts

@@ -11,7 +11,6 @@ export interface InputIconToggleProps extends InputIconToggleStyleProps, Validat
     onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
     readOnly?: boolean;
-    tooltipId?: string;
     useValidationIcon?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;

package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -56,11 +56,12 @@ const InputIconToggle = ({
       onFocus: onFocus,
       onBlur: onBlur,
       onMouseDown: onMouseDown,
-      tabIndex: iconTabIndex,
       "data-element": "input-icon-toggle",
       disabled: disabled,
       readOnly: readOnly,
-      "data-role": "input-icon-toggle"
+      "data-role": "input-icon-toggle",
+      "aria-hidden": "true",
+      tabIndex: -1
     }, /*#__PURE__*/React.createElement(Icon, {
       disabled: disabled || readOnly,
       type: type

package/esm/components/menu/menu-item/menu-item.component.js

@@ -106,13 +106,6 @@ export const MenuItem = ({
     if (ref.current && Events.isEscKey(event)) {
       ref.current?.focus();
     }
-    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
-    const shouldFocusIcon = inputIcon?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
-
-    // let natural tab order move focus if input icon is tabbable or input with button exists
-    if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon)) {
-      return;
-    }
     if (handleSubmenuKeyDown) {
       handleSubmenuKeyDown(event);
     }

package/esm/components/menu/menu-item/menu-item.style.js

@@ -169,6 +169,11 @@ const StyledMenuItemWrapper = styled.a.attrs({
 
         a:hover,
         button:hover {
+          ${StyledButton} {
+            border-radius: 0;
+            background-color: transparent;
+          }
+
           ${!asDiv && css`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);

package/esm/components/search/search.component.js

@@ -10,6 +10,7 @@ import Textbox from "../textbox";
 import Button from "../button";
 import Logger from "../../__internal__/utils/logger";
 import useLocale from "../../hooks/__internal__/useLocale";
+import Events from "../../__internal__/utils/helpers/events";
 let deprecateUncontrolledWarnTriggered = false;
 const Search = /*#__PURE__*/React.forwardRef(({
   defaultValue,
@@ -125,6 +126,21 @@ const Search = /*#__PURE__*/React.forwardRef(({
     if (event.key.length === 1) {
       event.stopPropagation();
     }
+    if (Events.isEscKey(event) && !isSearchValueEmpty) {
+      event.stopPropagation();
+      setSearchValue("");
+      onChange?.({
+        target: {
+          ...(name && {
+            name
+          }),
+          ...(id && {
+            id
+          }),
+          value: ""
+        }
+      });
+    }
     if (onKeyDown) {
       onKeyDown(event);
     }

package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts

@@ -11,7 +11,6 @@ export interface InputIconToggleProps extends InputIconToggleStyleProps, Validat
     onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
     onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
     readOnly?: boolean;
-    tooltipId?: string;
     useValidationIcon?: boolean;
     /** Id of the validation icon */
     validationIconId?: string;

package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.js

@@ -63,11 +63,12 @@ const InputIconToggle = ({
       onFocus: onFocus,
       onBlur: onBlur,
       onMouseDown: onMouseDown,
-      tabIndex: iconTabIndex,
       "data-element": "input-icon-toggle",
       disabled: disabled,
       readOnly: readOnly,
-      "data-role": "input-icon-toggle"
+      "data-role": "input-icon-toggle",
+      "aria-hidden": "true",
+      tabIndex: -1
     }, /*#__PURE__*/_react.default.createElement(_icon.default, {
       disabled: disabled || readOnly,
       type: type

package/lib/components/menu/menu-item/menu-item.component.js

@@ -115,13 +115,6 @@ const MenuItem = ({
     if (ref.current && _events.default.isEscKey(event)) {
       ref.current?.focus();
     }
-    const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
-    const shouldFocusIcon = inputIcon?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
-
-    // let natural tab order move focus if input icon is tabbable or input with button exists
-    if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon)) {
-      return;
-    }
     if (handleSubmenuKeyDown) {
       handleSubmenuKeyDown(event);
     }

package/lib/components/menu/menu-item/menu-item.style.js

@@ -178,6 +178,11 @@ const StyledMenuItemWrapper = _styledComponents.default.a.attrs({
 
         a:hover,
         button:hover {
+          ${_button.default} {
+            border-radius: 0;
+            background-color: transparent;
+          }
+
           ${!asDiv && (0, _styledComponents.css)`
             background-color: var(--colorsComponentsMenuAutumnStandard600);
             color: var(--colorsComponentsMenuYang100);

package/lib/components/search/search.component.js

@@ -15,6 +15,7 @@ var _textbox = _interopRequireDefault(require("../textbox"));
 var _button = _interopRequireDefault(require("../button"));
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 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; }
@@ -134,6 +135,21 @@ const Search = exports.Search = /*#__PURE__*/_react.default.forwardRef(({
     if (event.key.length === 1) {
       event.stopPropagation();
     }
+    if (_events.default.isEscKey(event) && !isSearchValueEmpty) {
+      event.stopPropagation();
+      setSearchValue("");
+      onChange?.({
+        target: {
+          ...(name && {
+            name
+          }),
+          ...(id && {
+            id
+          }),
+          value: ""
+        }
+      });
+    }
     if (onKeyDown) {
       onKeyDown(event);
     }

package/package.json

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