@carbon/react 1.111.0-rc.0 → 1.111.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 (10) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +984 -943
  2. package/es/components/ExpandableSearch/ExpandableSearch.js +8 -1
  3. package/es/components/Search/Search.js +6 -4
  4. package/es/components/UIShell/SideNavMenu.d.ts +2 -2
  5. package/es/components/UIShell/SideNavMenu.js +7 -4
  6. package/lib/components/ExpandableSearch/ExpandableSearch.js +8 -1
  7. package/lib/components/Search/Search.js +6 -4
  8. package/lib/components/UIShell/SideNavMenu.d.ts +2 -2
  9. package/lib/components/UIShell/SideNavMenu.js +7 -4
  10. package/package.json +8 -8
package/es/components/ExpandableSearch/ExpandableSearch.js CHANGED
@@ -27,6 +27,7 @@ const ExpandableSearch = forwardRef((props, forwardedRef) => {
27
27
  const [expanded, setExpanded] = useState(isExpanded || false);
28
28
  const [hasContent, setHasContent] = useState(isSearchValuePresent(defaultValue));
29
29
  const searchRef = useRef(null);
30
+ const shouldFocusSearchRef = useRef(false);
30
31
  const prefix = usePrefix();
31
32
  function handleBlur(evt) {
32
33
  const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
@@ -35,12 +36,18 @@ const ExpandableSearch = forwardRef((props, forwardedRef) => {
35
36
  useEffect(() => {
36
37
  setExpanded(!!isExpanded);
37
38
  }, [isExpanded]);
39
+ useEffect(() => {
40
+ if (expanded && shouldFocusSearchRef.current) {
41
+ shouldFocusSearchRef.current = false;
42
+ searchRef.current?.focus?.();
43
+ }
44
+ }, [expanded]);
38
45
  function handleChange(evt) {
39
46
  setHasContent(evt.target.value !== "");
40
47
  }
41
48
  function handleExpand() {
49
+ shouldFocusSearchRef.current = true;
42
50
  setExpanded(true);
43
- searchRef.current?.focus?.();
44
51
  }
45
52
  function handleKeyDown(evt) {
46
53
  if (expanded && match(evt, Escape)) {
package/es/components/Search/Search.js CHANGED
@@ -28,7 +28,7 @@ import { Close, Search } from "@carbon/icons-react";
28
28
  * This source code is licensed under the Apache-2.0 license found in the
29
29
  * LICENSE file in the root directory of this source tree.
30
30
  */
31
- const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size, type = "search", value, ...rest }, forwardRef) => {
31
+ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, inert, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size, tabIndex, type = "search", value, ...rest }, forwardRef) => {
32
32
  const hasPropValue = isSearchValuePresent(value) || isSearchValuePresent(defaultValue);
33
33
  const prefix = usePrefix();
34
34
  const { isFluid } = useContext(FormContext);
@@ -39,6 +39,7 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
39
39
  const uniqueId = id || inputId;
40
40
  const searchId = `${uniqueId}-search`;
41
41
  const [hasContent, setHasContent] = useState(hasPropValue || false);
42
+ const isExpandableCollapsed = !!onExpand && !isExpanded;
42
43
  const searchClasses = classNames({
43
44
  [`${prefix}--search`]: true,
44
45
  [`${prefix}--search--${size}`]: size,
@@ -102,7 +103,7 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
102
103
  className: `${prefix}--search-magnifier`,
103
104
  onClick: onExpand,
104
105
  onKeyDown: handleExpandButtonKeyDown,
105
- tabIndex: onExpand && !isExpanded ? 0 : -1,
106
+ tabIndex: isExpandableCollapsed ? 0 : -1,
106
107
  ref: expandButtonRef,
107
108
  "aria-expanded": onExpand && isExpanded ? true : onExpand && !isExpanded ? false : void 0,
108
109
  "aria-controls": onExpand ? uniqueId : void 0,
@@ -138,8 +139,9 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
138
139
  placeholder,
139
140
  type,
140
141
  value,
141
- tabIndex: onExpand && !isExpanded ? -1 : void 0,
142
- ...rest
142
+ ...rest,
143
+ inert: isExpandableCollapsed ? true : inert,
144
+ tabIndex: isExpandableCollapsed ? -1 : tabIndex
143
145
  }),
144
146
  /* @__PURE__ */ jsx("button", {
145
147
  "aria-label": closeButtonLabelText,
package/es/components/UIShell/SideNavMenu.d.ts CHANGED
@@ -4,8 +4,8 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import React from 'react';
8
- export interface SideNavMenuProps {
7
+ import React, { type LiHTMLAttributes } from 'react';
8
+ export interface SideNavMenuProps extends LiHTMLAttributes<HTMLLIElement> {
9
9
  /**
10
10
  * An optional CSS class to apply to the component.
11
11
  */
package/es/components/UIShell/SideNavMenu.js CHANGED
@@ -8,6 +8,7 @@
8
8
  import { usePrefix } from "../../internal/usePrefix.js";
9
9
  import { Escape } from "../../internal/keyboard/keys.js";
10
10
  import { match } from "../../internal/keyboard/match.js";
11
+ import { composeEventHandlers } from "../../tools/events.js";
11
12
  import { SideNavContext } from "./SideNavContext.js";
12
13
  import SideNavIcon from "./SideNavIcon.js";
13
14
  import classNames from "classnames";
@@ -22,7 +23,7 @@ import { ChevronDown } from "@carbon/icons-react";
22
23
  * This source code is licensed under the Apache-2.0 license found in the
23
24
  * LICENSE file in the root directory of this source tree.
24
25
  */
25
- const SideNavMenu = forwardRef(({ className: customClassName, children, defaultExpanded = false, isActive = false, large = false, renderIcon: IconElement, isSideNavExpanded, tabIndex, title }, ref) => {
26
+ const SideNavMenu = forwardRef(({ className: customClassName, children, defaultExpanded = false, isActive = false, large = false, renderIcon: IconElement, isSideNavExpanded, tabIndex, title, onKeyDown, ...rest }, ref) => {
26
27
  const { isRail, isSideNavExpanded: contextIsSideNavExpanded } = useContext(SideNavContext);
27
28
  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
28
29
  const prefix = usePrefix();
@@ -49,11 +50,13 @@ const SideNavMenu = forwardRef(({ className: customClassName, children, defaultE
49
50
  isExpanded,
50
51
  isRail
51
52
  ]);
53
+ const handleOnKeyDown = (event) => {
54
+ if (match(event, Escape)) setIsExpanded(false);
55
+ };
52
56
  return /* @__PURE__ */ jsxs("li", {
57
+ ...rest,
53
58
  className,
54
- onKeyDown: (event) => {
55
- if (match(event, Escape)) setIsExpanded(false);
56
- },
59
+ onKeyDown: composeEventHandlers([onKeyDown, handleOnKeyDown]),
57
60
  children: [/* @__PURE__ */ jsxs("button", {
58
61
  "aria-expanded": isExpanded,
59
62
  className: `${prefix}--side-nav__submenu`,
package/lib/components/ExpandableSearch/ExpandableSearch.js CHANGED
@@ -30,6 +30,7 @@ const ExpandableSearch = (0, react.forwardRef)((props, forwardedRef) => {
30
30
  const [expanded, setExpanded] = (0, react.useState)(isExpanded || false);
31
31
  const [hasContent, setHasContent] = (0, react.useState)(require_utils.isSearchValuePresent(defaultValue));
32
32
  const searchRef = (0, react.useRef)(null);
33
+ const shouldFocusSearchRef = (0, react.useRef)(false);
33
34
  const prefix = require_usePrefix.usePrefix();
34
35
  function handleBlur(evt) {
35
36
  const relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains(`${prefix}--search-close`);
@@ -38,12 +39,18 @@ const ExpandableSearch = (0, react.forwardRef)((props, forwardedRef) => {
38
39
  (0, react.useEffect)(() => {
39
40
  setExpanded(!!isExpanded);
40
41
  }, [isExpanded]);
42
+ (0, react.useEffect)(() => {
43
+ if (expanded && shouldFocusSearchRef.current) {
44
+ shouldFocusSearchRef.current = false;
45
+ searchRef.current?.focus?.();
46
+ }
47
+ }, [expanded]);
41
48
  function handleChange(evt) {
42
49
  setHasContent(evt.target.value !== "");
43
50
  }
44
51
  function handleExpand() {
52
+ shouldFocusSearchRef.current = true;
45
53
  setExpanded(true);
46
- searchRef.current?.focus?.();
47
54
  }
48
55
  function handleKeyDown(evt) {
49
56
  if (expanded && require_match.match(evt, require_keys.Escape)) {
package/lib/components/Search/Search.js CHANGED
@@ -32,7 +32,7 @@ let _carbon_icons_react = require("@carbon/icons-react");
32
32
  * This source code is licensed under the Apache-2.0 license found in the
33
33
  * LICENSE file in the root directory of this source tree.
34
34
  */
35
- const Search = react.default.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size, type = "search", value, ...rest }, forwardRef) => {
35
+ const Search = react.default.forwardRef(({ autoComplete = "off", className, closeButtonLabelText = "Clear search input", defaultValue, disabled, isExpanded = true, inert, id, labelText, light, onChange = () => {}, onClear = () => {}, onKeyDown, onExpand, placeholder = "Search", renderIcon, role, size, tabIndex, type = "search", value, ...rest }, forwardRef) => {
36
36
  const hasPropValue = require_utils.isSearchValuePresent(value) || require_utils.isSearchValuePresent(defaultValue);
37
37
  const prefix = require_usePrefix.usePrefix();
38
38
  const { isFluid } = (0, react.useContext)(require_FormContext.FormContext);
@@ -43,6 +43,7 @@ const Search = react.default.forwardRef(({ autoComplete = "off", className, clos
43
43
  const uniqueId = id || inputId;
44
44
  const searchId = `${uniqueId}-search`;
45
45
  const [hasContent, setHasContent] = (0, react.useState)(hasPropValue || false);
46
+ const isExpandableCollapsed = !!onExpand && !isExpanded;
46
47
  const searchClasses = (0, classnames.default)({
47
48
  [`${prefix}--search`]: true,
48
49
  [`${prefix}--search--${size}`]: size,
@@ -106,7 +107,7 @@ const Search = react.default.forwardRef(({ autoComplete = "off", className, clos
106
107
  className: `${prefix}--search-magnifier`,
107
108
  onClick: onExpand,
108
109
  onKeyDown: handleExpandButtonKeyDown,
109
- tabIndex: onExpand && !isExpanded ? 0 : -1,
110
+ tabIndex: isExpandableCollapsed ? 0 : -1,
110
111
  ref: expandButtonRef,
111
112
  "aria-expanded": onExpand && isExpanded ? true : onExpand && !isExpanded ? false : void 0,
112
113
  "aria-controls": onExpand ? uniqueId : void 0,
@@ -142,8 +143,9 @@ const Search = react.default.forwardRef(({ autoComplete = "off", className, clos
142
143
  placeholder,
143
144
  type,
144
145
  value,
145
- tabIndex: onExpand && !isExpanded ? -1 : void 0,
146
- ...rest
146
+ ...rest,
147
+ inert: isExpandableCollapsed ? true : inert,
148
+ tabIndex: isExpandableCollapsed ? -1 : tabIndex
147
149
  }),
148
150
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
149
151
  "aria-label": closeButtonLabelText,
package/lib/components/UIShell/SideNavMenu.d.ts CHANGED
@@ -4,8 +4,8 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import React from 'react';
8
- export interface SideNavMenuProps {
7
+ import React, { type LiHTMLAttributes } from 'react';
8
+ export interface SideNavMenuProps extends LiHTMLAttributes<HTMLLIElement> {
9
9
  /**
10
10
  * An optional CSS class to apply to the component.
11
11
  */
package/lib/components/UIShell/SideNavMenu.js CHANGED
@@ -9,6 +9,7 @@ const require_runtime = require("../../_virtual/_rolldown/runtime.js");
9
9
  const require_usePrefix = require("../../internal/usePrefix.js");
10
10
  const require_keys = require("../../internal/keyboard/keys.js");
11
11
  const require_match = require("../../internal/keyboard/match.js");
12
+ const require_events = require("../../tools/events.js");
12
13
  const require_SideNavContext = require("./SideNavContext.js");
13
14
  const require_SideNavIcon = require("./SideNavIcon.js");
14
15
  let classnames = require("classnames");
@@ -26,7 +27,7 @@ let _carbon_icons_react = require("@carbon/icons-react");
26
27
  * This source code is licensed under the Apache-2.0 license found in the
27
28
  * LICENSE file in the root directory of this source tree.
28
29
  */
29
- const SideNavMenu = (0, react.forwardRef)(({ className: customClassName, children, defaultExpanded = false, isActive = false, large = false, renderIcon: IconElement, isSideNavExpanded, tabIndex, title }, ref) => {
30
+ const SideNavMenu = (0, react.forwardRef)(({ className: customClassName, children, defaultExpanded = false, isActive = false, large = false, renderIcon: IconElement, isSideNavExpanded, tabIndex, title, onKeyDown, ...rest }, ref) => {
30
31
  const { isRail, isSideNavExpanded: contextIsSideNavExpanded } = (0, react.useContext)(require_SideNavContext.SideNavContext);
31
32
  const currentIsSideNavExpanded = isSideNavExpanded ?? contextIsSideNavExpanded;
32
33
  const prefix = require_usePrefix.usePrefix();
@@ -53,11 +54,13 @@ const SideNavMenu = (0, react.forwardRef)(({ className: customClassName, childre
53
54
  isExpanded,
54
55
  isRail
55
56
  ]);
57
+ const handleOnKeyDown = (event) => {
58
+ if (require_match.match(event, require_keys.Escape)) setIsExpanded(false);
59
+ };
56
60
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
61
+ ...rest,
57
62
  className,
58
- onKeyDown: (event) => {
59
- if (require_match.match(event, require_keys.Escape)) setIsExpanded(false);
60
- },
63
+ onKeyDown: require_events.composeEventHandlers([onKeyDown, handleOnKeyDown]),
61
64
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
62
65
  "aria-expanded": isExpanded,
63
66
  className: `${prefix}--side-nav__submenu`,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/react",
3
3
  "description": "React components for the Carbon Design System",
4
- "version": "1.111.0-rc.0",
4
+ "version": "1.111.0",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "types": "lib/index.d.ts",
@@ -52,11 +52,11 @@
52
52
  },
53
53
  "dependencies": {
54
54
  "@babel/runtime": "^7.27.3",
55
- "@carbon/feature-flags": "^1.4.0-rc.0",
56
- "@carbon/icons-react": "^11.83.0-rc.0",
57
- "@carbon/layout": "^11.54.0-rc.0",
58
- "@carbon/styles": "^1.110.0-rc.0",
59
- "@carbon/utilities": "^0.21.0-rc.0",
55
+ "@carbon/feature-flags": "^1.4.0",
56
+ "@carbon/icons-react": "^11.83.0",
57
+ "@carbon/layout": "^11.54.0",
58
+ "@carbon/styles": "^1.110.0",
59
+ "@carbon/utilities": "^0.21.0",
60
60
  "@floating-ui/react": "^0.27.4",
61
61
  "@ibm/telemetry-js": "^1.5.0",
62
62
  "classnames": "2.5.1",
@@ -79,7 +79,7 @@
79
79
  "@babel/preset-react": "^7.27.1",
80
80
  "@babel/preset-typescript": "^7.27.1",
81
81
  "@carbon/test-utils": "^10.41.0",
82
- "@carbon/themes": "^11.76.0-rc.0",
82
+ "@carbon/themes": "^11.76.0",
83
83
  "@figma/code-connect": "^1.4.7",
84
84
  "@stackblitz/sdk": "^1.11.0",
85
85
  "@storybook/addon-a11y": "^10.3.5",
@@ -125,5 +125,5 @@
125
125
  "**/*.scss",
126
126
  "**/*.css"
127
127
  ],
128
- "gitHead": "415bf87b56763dc172a38f310ee5536e70dd792b"
128
+ "gitHead": "30ca2b932469a5c89da10cb8d1fa82586ed14018"
129
129
  }