carbon-react 147.3.0 → 147.4.0

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/action-popover/__internal__/action-popover-utils.d.ts

@@ -4,4 +4,5 @@ export declare const getItems: (children: React.ReactNode | React.ReactNode[]) =
 export declare const isItemDisabled: (item: ReactItem) => boolean;
 export declare const findFirstFocusableItem: (items: ReactItem[]) => number;
 export declare const findLastFocusableItem: (items: ReactItem[]) => number;
+export declare const checkChildrenForString: (children: React.ReactNode) => boolean;
 export {};

package/esm/components/action-popover/__internal__/action-popover-utils.js

@@ -17,4 +17,12 @@ export const findLastFocusableItem = items => {
     }
   }
   return -1;
+};
+export const checkChildrenForString = children => {
+  return React.Children.toArray(children).some(child => {
+    if (typeof child === "string") {
+      return true;
+    }
+    return /*#__PURE__*/React.isValidElement(child) ? checkChildrenForString(child.props.children) : false;
+  });
 };

package/esm/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -3,7 +3,7 @@ import { ButtonIconPosition, ButtonTypes, SizeOptions } from "../../button/butto
 import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
-    "aria-label": string;
+    "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
     "aria-controls": string;

package/esm/components/action-popover/action-popover.component.d.ts

@@ -6,7 +6,7 @@ export interface RenderButtonProps {
     "data-element": string;
     ariaAttributes: {
         "aria-haspopup": string;
-        "aria-label": string;
+        "aria-label"?: string;
         "aria-labelledby"?: string;
         "aria-describedby"?: string;
         "aria-controls": string;

package/esm/components/action-popover/action-popover.component.js

@@ -12,7 +12,7 @@ import ActionPopoverItem from "./action-popover-item/action-popover-item.compone
 import ActionPopoverDivider from "./action-popover-divider/action-popover-divider.component";
 import ActionPopoverContext from "./__internal__/action-popover.context";
 import useModalManager from "../../hooks/__internal__/useModalManager";
-import { findFirstFocusableItem, findLastFocusableItem, getItems } from "./__internal__/action-popover-utils";
+import { findFirstFocusableItem, findLastFocusableItem, getItems, checkChildrenForString } from "./__internal__/action-popover-utils";
 const onOpenDefault = () => {};
 const onCloseDefault = () => {};
 const ActionPopover = /*#__PURE__*/forwardRef(({
@@ -139,7 +139,7 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
   }, [setOpen]);
   const menuButton = menuID => {
     if (renderButton) {
-      return renderButton({
+      const renderButtonComponent = renderButton({
         tabIndex: isOpen ? -1 : 0,
         "data-element": "action-popover-button",
         ariaAttributes: {
@@ -151,6 +151,19 @@ const ActionPopover = /*#__PURE__*/forwardRef(({
           "aria-expanded": `${isOpen}`
         }
       });
+      const buttonHasString = checkChildrenForString(renderButtonComponent);
+      return renderButton({
+        tabIndex: isOpen ? -1 : 0,
+        "data-element": "action-popover-button",
+        ariaAttributes: {
+          "aria-haspopup": "true",
+          "aria-label": buttonHasString ? undefined : ariaLabel || l.actionPopover.ariaLabel(),
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-controls": menuID,
+          "aria-expanded": `${isOpen}`
+        }
+      });
     }
     return /*#__PURE__*/React.createElement(StyledButtonIcon, {
       role: "button",

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/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/action-popover/__internal__/action-popover-utils.d.ts

@@ -4,4 +4,5 @@ export declare const getItems: (children: React.ReactNode | React.ReactNode[]) =
 export declare const isItemDisabled: (item: ReactItem) => boolean;
 export declare const findFirstFocusableItem: (items: ReactItem[]) => number;
 export declare const findLastFocusableItem: (items: ReactItem[]) => number;
+export declare const checkChildrenForString: (children: React.ReactNode) => boolean;
 export {};

package/lib/components/action-popover/__internal__/action-popover-utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isItemDisabled = exports.getItems = exports.findLastFocusableItem = exports.findFirstFocusableItem = void 0;
+exports.isItemDisabled = exports.getItems = exports.findLastFocusableItem = exports.findFirstFocusableItem = exports.checkChildrenForString = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _actionPopoverItem = require("../action-popover-item/action-popover-item.component");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -27,4 +27,13 @@ const findLastFocusableItem = items => {
   }
   return -1;
 };
-exports.findLastFocusableItem = findLastFocusableItem;
+exports.findLastFocusableItem = findLastFocusableItem;
+const checkChildrenForString = children => {
+  return _react.default.Children.toArray(children).some(child => {
+    if (typeof child === "string") {
+      return true;
+    }
+    return /*#__PURE__*/_react.default.isValidElement(child) ? checkChildrenForString(child.props.children) : false;
+  });
+};
+exports.checkChildrenForString = checkChildrenForString;

package/lib/components/action-popover/action-popover-menu-button/action-popover-menu-button.component.d.ts

@@ -3,7 +3,7 @@ import { ButtonIconPosition, ButtonTypes, SizeOptions } from "../../button/butto
 import { IconType } from "../../icon";
 export declare type ActionPopoverMenuButtonAria = {
     "aria-haspopup": string;
-    "aria-label": string;
+    "aria-label"?: string;
     "aria-labelledby"?: string;
     "aria-describedby"?: string;
     "aria-controls": string;

package/lib/components/action-popover/action-popover.component.d.ts

@@ -6,7 +6,7 @@ export interface RenderButtonProps {
     "data-element": string;
     ariaAttributes: {
         "aria-haspopup": string;
-        "aria-label": string;
+        "aria-label"?: string;
         "aria-labelledby"?: string;
         "aria-describedby"?: string;
         "aria-controls": string;

package/lib/components/action-popover/action-popover.component.js

@@ -148,7 +148,7 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
   }, [setOpen]);
   const menuButton = menuID => {
     if (renderButton) {
-      return renderButton({
+      const renderButtonComponent = renderButton({
         tabIndex: isOpen ? -1 : 0,
         "data-element": "action-popover-button",
         ariaAttributes: {
@@ -160,6 +160,19 @@ const ActionPopover = exports.ActionPopover = /*#__PURE__*/(0, _react.forwardRef
           "aria-expanded": `${isOpen}`
         }
       });
+      const buttonHasString = (0, _actionPopoverUtils.checkChildrenForString)(renderButtonComponent);
+      return renderButton({
+        tabIndex: isOpen ? -1 : 0,
+        "data-element": "action-popover-button",
+        ariaAttributes: {
+          "aria-haspopup": "true",
+          "aria-label": buttonHasString ? undefined : ariaLabel || l.actionPopover.ariaLabel(),
+          "aria-labelledby": ariaLabelledBy,
+          "aria-describedby": ariaDescribedBy,
+          "aria-controls": menuID,
+          "aria-expanded": `${isOpen}`
+        }
+      });
     }
     return /*#__PURE__*/_react.default.createElement(_actionPopover.StyledButtonIcon, {
       role: "button",

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/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.0",
+  "version": "147.4.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",