carbon-react 147.3.1 → 147.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts +0 -1
  2. package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js +3 -2
  3. package/esm/components/menu/menu-item/menu-item.component.js +0 -7
  4. package/esm/components/search/search.component.js +16 -0
  5. package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts +0 -1
  6. package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.js +3 -2
  7. package/lib/components/menu/menu-item/menu-item.component.js +0 -7
  8. package/lib/components/search/search.component.js +16 -0
  9. package/package.json +1 -1
package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts CHANGED
@@ -11,7 +11,6 @@ export interface InputIconToggleProps extends InputIconToggleStyleProps, Validat
11
11
  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
12
12
  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
13
13
  readOnly?: boolean;
14
- tooltipId?: string;
15
14
  useValidationIcon?: boolean;
16
15
  /** Id of the validation icon */
17
16
  validationIconId?: string;
package/esm/__internal__/input-icon-toggle/input-icon-toggle.component.js CHANGED
@@ -56,11 +56,12 @@ const InputIconToggle = ({
56
56
  onFocus: onFocus,
57
57
  onBlur: onBlur,
58
58
  onMouseDown: onMouseDown,
59
- tabIndex: iconTabIndex,
60
59
  "data-element": "input-icon-toggle",
61
60
  disabled: disabled,
62
61
  readOnly: readOnly,
63
- "data-role": "input-icon-toggle"
62
+ "data-role": "input-icon-toggle",
63
+ "aria-hidden": "true",
64
+ tabIndex: -1
64
65
  }, /*#__PURE__*/React.createElement(Icon, {
65
66
  disabled: disabled || readOnly,
66
67
  type: type
package/esm/components/menu/menu-item/menu-item.component.js CHANGED
@@ -106,13 +106,6 @@ export const MenuItem = ({
106
106
  if (ref.current && Events.isEscKey(event)) {
107
107
  ref.current?.focus();
108
108
  }
109
- const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
110
- const shouldFocusIcon = inputIcon?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
111
-
112
- // let natural tab order move focus if input icon is tabbable or input with button exists
113
- if (Events.isTabKey(event) && (!Events.isShiftKey(event) && shouldFocusIcon || Events.isShiftKey(event) && document.activeElement === inputIcon)) {
114
- return;
115
- }
116
109
  if (handleSubmenuKeyDown) {
117
110
  handleSubmenuKeyDown(event);
118
111
  }
package/esm/components/search/search.component.js CHANGED
@@ -10,6 +10,7 @@ import Textbox from "../textbox";
10
10
  import Button from "../button";
11
11
  import Logger from "../../__internal__/utils/logger";
12
12
  import useLocale from "../../hooks/__internal__/useLocale";
13
+ import Events from "../../__internal__/utils/helpers/events";
13
14
  let deprecateUncontrolledWarnTriggered = false;
14
15
  const Search = /*#__PURE__*/React.forwardRef(({
15
16
  defaultValue,
@@ -125,6 +126,21 @@ const Search = /*#__PURE__*/React.forwardRef(({
125
126
  if (event.key.length === 1) {
126
127
  event.stopPropagation();
127
128
  }
129
+ if (Events.isEscKey(event) && !isSearchValueEmpty) {
130
+ event.stopPropagation();
131
+ setSearchValue("");
132
+ onChange?.({
133
+ target: {
134
+ ...(name && {
135
+ name
136
+ }),
137
+ ...(id && {
138
+ id
139
+ }),
140
+ value: ""
141
+ }
142
+ });
143
+ }
128
144
  if (onKeyDown) {
129
145
  onKeyDown(event);
130
146
  }
package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.d.ts CHANGED
@@ -11,7 +11,6 @@ export interface InputIconToggleProps extends InputIconToggleStyleProps, Validat
11
11
  onFocus?: (ev: React.FocusEvent<HTMLElement>) => void;
12
12
  onMouseDown?: (ev: React.MouseEvent<HTMLElement>) => void;
13
13
  readOnly?: boolean;
14
- tooltipId?: string;
15
14
  useValidationIcon?: boolean;
16
15
  /** Id of the validation icon */
17
16
  validationIconId?: string;
package/lib/__internal__/input-icon-toggle/input-icon-toggle.component.js CHANGED
@@ -63,11 +63,12 @@ const InputIconToggle = ({
63
63
  onFocus: onFocus,
64
64
  onBlur: onBlur,
65
65
  onMouseDown: onMouseDown,
66
- tabIndex: iconTabIndex,
67
66
  "data-element": "input-icon-toggle",
68
67
  disabled: disabled,
69
68
  readOnly: readOnly,
70
- "data-role": "input-icon-toggle"
69
+ "data-role": "input-icon-toggle",
70
+ "aria-hidden": "true",
71
+ tabIndex: -1
71
72
  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
72
73
  disabled: disabled || readOnly,
73
74
  type: type
package/lib/components/menu/menu-item/menu-item.component.js CHANGED
@@ -115,13 +115,6 @@ const MenuItem = ({
115
115
  if (ref.current && _events.default.isEscKey(event)) {
116
116
  ref.current?.focus();
117
117
  }
118
- const inputIcon = ref.current?.querySelector("[data-element='input-icon-toggle']");
119
- const shouldFocusIcon = inputIcon?.getAttribute("tabindex") === "0" && document.activeElement === inputRef.current && inputRef.current?.value;
120
-
121
- // let natural tab order move focus if input icon is tabbable or input with button exists
122
- if (_events.default.isTabKey(event) && (!_events.default.isShiftKey(event) && shouldFocusIcon || _events.default.isShiftKey(event) && document.activeElement === inputIcon)) {
123
- return;
124
- }
125
118
  if (handleSubmenuKeyDown) {
126
119
  handleSubmenuKeyDown(event);
127
120
  }
package/lib/components/search/search.component.js CHANGED
@@ -15,6 +15,7 @@ var _textbox = _interopRequireDefault(require("../textbox"));
15
15
  var _button = _interopRequireDefault(require("../button"));
16
16
  var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
17
17
  var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
18
+ var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
18
19
  function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
19
20
  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); }
20
21
  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(({
134
135
  if (event.key.length === 1) {
135
136
  event.stopPropagation();
136
137
  }
138
+ if (_events.default.isEscKey(event) && !isSearchValueEmpty) {
139
+ event.stopPropagation();
140
+ setSearchValue("");
141
+ onChange?.({
142
+ target: {
143
+ ...(name && {
144
+ name
145
+ }),
146
+ ...(id && {
147
+ id
148
+ }),
149
+ value: ""
150
+ }
151
+ });
152
+ }
137
153
  if (onKeyDown) {
138
154
  onKeyDown(event);
139
155
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "147.3.1",
3
+ "version": "147.4.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",