@carbon/react 1.100.0 → 1.101.0-rc.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 (118) hide show
  1. package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +966 -966
  2. package/es/components/AILabel/index.d.ts +1 -1
  3. package/es/components/AILabel/index.js +1 -12
  4. package/es/components/Checkbox/Checkbox.js +5 -3
  5. package/es/components/CheckboxGroup/CheckboxGroup.js +4 -3
  6. package/es/components/CodeSnippet/CodeSnippet.d.ts +1 -1
  7. package/es/components/ComboBox/ComboBox.js +18 -10
  8. package/es/components/ComboButton/index.d.ts +1 -1
  9. package/es/components/ComboButton/index.js +3 -2
  10. package/es/components/ComposedModal/ComposedModal.js +17 -22
  11. package/es/components/ComposedModal/ModalHeader.d.ts +2 -2
  12. package/es/components/ComposedModal/ModalHeader.js +1 -1
  13. package/es/components/Copy/Copy.d.ts +1 -1
  14. package/es/components/CopyButton/CopyButton.d.ts +1 -1
  15. package/es/components/DataTable/DataTable.d.ts +2 -0
  16. package/es/components/DataTable/DataTable.js +6 -5
  17. package/es/components/DataTable/Table.d.ts +1 -1
  18. package/es/components/DataTable/Table.js +10 -4
  19. package/es/components/DataTable/state/sorting.d.ts +4 -2
  20. package/es/components/FileUploader/FileUploaderItem.d.ts +1 -1
  21. package/es/components/FileUploader/FileUploaderItem.js +3 -2
  22. package/es/components/Menu/Menu.js +8 -4
  23. package/es/components/Menu/MenuItem.d.ts +5 -1
  24. package/es/components/Menu/MenuItem.js +11 -1
  25. package/es/components/MenuButton/index.d.ts +1 -1
  26. package/es/components/MenuButton/index.js +3 -2
  27. package/es/components/MultiSelect/FilterableMultiSelect.d.ts +1 -1
  28. package/es/components/MultiSelect/FilterableMultiSelect.js +7 -5
  29. package/es/components/MultiSelect/MultiSelect.js +8 -4
  30. package/es/components/Notification/Notification.js +2 -1
  31. package/es/components/NumberInput/NumberInput.d.ts +1 -1
  32. package/es/components/NumberInput/NumberInput.js +5 -4
  33. package/es/components/OverflowMenu/OverflowMenu.d.ts +1 -0
  34. package/es/components/OverflowMenu/OverflowMenu.js +8 -4
  35. package/es/components/PageHeader/PageHeader.d.ts +1 -1
  36. package/es/components/PageHeader/PageHeader.js +5 -5
  37. package/es/components/RadioButtonGroup/RadioButtonGroup.js +4 -3
  38. package/es/components/Select/Select.js +2 -1
  39. package/es/components/StructuredList/StructuredList.d.ts +1 -1
  40. package/es/components/StructuredList/StructuredList.js +2 -4
  41. package/es/components/Tabs/Tabs.d.ts +2 -2
  42. package/es/components/Tabs/Tabs.js +20 -26
  43. package/es/components/Tag/DismissibleTag.js +3 -2
  44. package/es/components/Tag/OperationalTag.js +3 -2
  45. package/es/components/Tag/SelectableTag.js +3 -2
  46. package/es/components/Tag/Tag.js +3 -2
  47. package/es/components/TextArea/TextArea.d.ts +1 -1
  48. package/es/components/TextArea/TextArea.js +6 -5
  49. package/es/components/TextInput/ControlledPasswordInput.js +7 -6
  50. package/es/components/TextInput/PasswordInput.js +5 -6
  51. package/es/components/TextInput/TextInput.js +4 -4
  52. package/es/components/TimePicker/TimePicker.js +2 -2
  53. package/es/components/Tooltip/DefinitionTooltip.d.ts +1 -1
  54. package/es/components/Tooltip/DefinitionTooltip.js +3 -2
  55. package/es/internal/useId.js +3 -4
  56. package/es/internal/usePresence.js +3 -2
  57. package/es/internal/useResizeObserver.d.ts +1 -1
  58. package/es/internal/useResizeObserver.js +5 -7
  59. package/es/tools/events.d.ts +1 -1
  60. package/lib/components/AILabel/index.d.ts +1 -1
  61. package/lib/components/AILabel/index.js +1 -12
  62. package/lib/components/Checkbox/Checkbox.js +5 -3
  63. package/lib/components/CheckboxGroup/CheckboxGroup.js +4 -3
  64. package/lib/components/CodeSnippet/CodeSnippet.d.ts +1 -1
  65. package/lib/components/ComboBox/ComboBox.js +18 -10
  66. package/lib/components/ComboButton/index.d.ts +1 -1
  67. package/lib/components/ComboButton/index.js +2 -1
  68. package/lib/components/ComposedModal/ComposedModal.js +16 -21
  69. package/lib/components/ComposedModal/ModalHeader.d.ts +2 -2
  70. package/lib/components/ComposedModal/ModalHeader.js +1 -1
  71. package/lib/components/Copy/Copy.d.ts +1 -1
  72. package/lib/components/CopyButton/CopyButton.d.ts +1 -1
  73. package/lib/components/DataTable/DataTable.d.ts +2 -0
  74. package/lib/components/DataTable/DataTable.js +6 -5
  75. package/lib/components/DataTable/Table.d.ts +1 -1
  76. package/lib/components/DataTable/Table.js +10 -4
  77. package/lib/components/DataTable/state/sorting.d.ts +4 -2
  78. package/lib/components/FileUploader/FileUploaderItem.d.ts +1 -1
  79. package/lib/components/FileUploader/FileUploaderItem.js +2 -1
  80. package/lib/components/Menu/Menu.js +7 -3
  81. package/lib/components/Menu/MenuItem.d.ts +5 -1
  82. package/lib/components/Menu/MenuItem.js +11 -1
  83. package/lib/components/MenuButton/index.d.ts +1 -1
  84. package/lib/components/MenuButton/index.js +2 -1
  85. package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +1 -1
  86. package/lib/components/MultiSelect/FilterableMultiSelect.js +6 -4
  87. package/lib/components/MultiSelect/MultiSelect.js +7 -3
  88. package/lib/components/Notification/Notification.js +2 -1
  89. package/lib/components/NumberInput/NumberInput.d.ts +1 -1
  90. package/lib/components/NumberInput/NumberInput.js +5 -4
  91. package/lib/components/OverflowMenu/OverflowMenu.d.ts +1 -0
  92. package/lib/components/OverflowMenu/OverflowMenu.js +7 -3
  93. package/lib/components/PageHeader/PageHeader.d.ts +1 -1
  94. package/lib/components/PageHeader/PageHeader.js +4 -4
  95. package/lib/components/RadioButtonGroup/RadioButtonGroup.js +4 -3
  96. package/lib/components/Select/Select.js +2 -1
  97. package/lib/components/StructuredList/StructuredList.d.ts +1 -1
  98. package/lib/components/StructuredList/StructuredList.js +2 -4
  99. package/lib/components/Tabs/Tabs.d.ts +2 -2
  100. package/lib/components/Tabs/Tabs.js +15 -21
  101. package/lib/components/Tag/DismissibleTag.js +2 -1
  102. package/lib/components/Tag/OperationalTag.js +2 -1
  103. package/lib/components/Tag/SelectableTag.js +2 -1
  104. package/lib/components/Tag/Tag.js +2 -1
  105. package/lib/components/TextArea/TextArea.d.ts +1 -1
  106. package/lib/components/TextArea/TextArea.js +6 -5
  107. package/lib/components/TextInput/ControlledPasswordInput.js +7 -6
  108. package/lib/components/TextInput/PasswordInput.js +5 -6
  109. package/lib/components/TextInput/TextInput.js +4 -4
  110. package/lib/components/TimePicker/TimePicker.js +2 -2
  111. package/lib/components/Tooltip/DefinitionTooltip.d.ts +1 -1
  112. package/lib/components/Tooltip/DefinitionTooltip.js +3 -2
  113. package/lib/internal/useId.js +2 -3
  114. package/lib/internal/usePresence.js +2 -1
  115. package/lib/internal/useResizeObserver.d.ts +1 -1
  116. package/lib/internal/useResizeObserver.js +4 -6
  117. package/lib/tools/events.d.ts +1 -1
  118. package/package.json +8 -8
@@ -75,10 +75,10 @@ const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(({
75
75
  const helperTextClasses = cx(`${prefix}--form__helper-text`, {
76
76
  [`${prefix}--form__helper-text--disabled`]: disabled
77
77
  });
78
- const label = labelText ? /*#__PURE__*/React.createElement("label", {
78
+ const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
79
79
  htmlFor: id,
80
80
  className: labelClasses
81
- }, labelText) : null;
81
+ }, labelText);
82
82
  const error = invalid ? /*#__PURE__*/React.createElement("div", {
83
83
  className: `${prefix}--form-requirement`,
84
84
  id: errorId
@@ -93,12 +93,13 @@ const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(({
93
93
  [`${prefix}--tooltip--${tooltipPosition}`]: tooltipPosition,
94
94
  [`${prefix}--tooltip--align-${tooltipAlignment}`]: tooltipAlignment
95
95
  });
96
- const helperId = !helperText ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
96
+ const hasHelper = typeof helperText !== 'undefined' && helperText !== null;
97
+ const helperId = !hasHelper ? undefined : `controlled-password-helper-text-${controlledPasswordInstanceId}`;
97
98
  const input = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _rollupPluginBabelHelpers.extends({}, util.getTextInputProps({
98
99
  invalid,
99
100
  sharedTextInputProps,
100
101
  invalidId: errorId,
101
- hasHelper: !error && helperText ? true : false,
102
+ hasHelper: !error && hasHelper,
102
103
  helperId
103
104
  }), {
104
105
  "data-toggle-password-visibility": type === 'password'
@@ -109,10 +110,10 @@ const ControlledPasswordInput = /*#__PURE__*/React.forwardRef(({
109
110
  }, /*#__PURE__*/React.createElement("span", {
110
111
  className: `${prefix}--assistive-text`
111
112
  }, passwordIsVisible ? hidePasswordLabel : showPasswordLabel), passwordVisibilityIcon));
112
- const helper = helperText ? /*#__PURE__*/React.createElement("div", {
113
+ const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
113
114
  id: helperId,
114
115
  className: helperTextClasses
115
- }, helperText) : null;
116
+ }, helperText);
116
117
  return /*#__PURE__*/React.createElement("div", {
117
118
  className: `${prefix}--form-item ${prefix}--text-input-wrapper ${prefix}--password-input-wrapper`
118
119
  }, label, /*#__PURE__*/React.createElement("div", {
@@ -65,8 +65,7 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
65
65
  } = React.useContext(FormContext.FormContext);
66
66
  const handleTogglePasswordVisibility = event => {
67
67
  setInputType(inputType === 'password' ? 'text' : 'password');
68
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
69
- onTogglePasswordVisibility && onTogglePasswordVisibility(event);
68
+ onTogglePasswordVisibility?.(event);
70
69
  };
71
70
  const textInputClasses = cx(`${prefix}--text-input`, `${prefix}--password-input`, className, {
72
71
  [`${prefix}--text-input--light`]: light,
@@ -121,14 +120,14 @@ const PasswordInput = /*#__PURE__*/React.forwardRef(({
121
120
  [`${prefix}--text-input__invalid-icon`]: normalizedProps.invalid || normalizedProps.warn,
122
121
  [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn
123
122
  });
124
- const label = labelText ? /*#__PURE__*/React.createElement("label", {
123
+ const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
125
124
  htmlFor: id,
126
125
  className: labelClasses
127
- }, labelText) : null;
128
- const helper = helperText ? /*#__PURE__*/React.createElement("div", {
126
+ }, labelText);
127
+ const helper = typeof helperText !== 'undefined' && helperText !== null && /*#__PURE__*/React.createElement("div", {
129
128
  id: normalizedProps.helperId,
130
129
  className: helperTextClasses
131
- }, helperText) : null;
130
+ }, helperText);
132
131
  const passwordIsVisible = inputType === 'text';
133
132
  const passwordVisibilityIcon = passwordIsVisible ? /*#__PURE__*/React.createElement(iconsReact.ViewOff, {
134
133
  className: `${prefix}--icon-visibility-off`
@@ -145,19 +145,19 @@ const TextInput = /*#__PURE__*/React.forwardRef(({
145
145
  as: "div",
146
146
  className: counterClasses
147
147
  }, `${textCount}/${maxCount}`) : null;
148
- const label = labelText ? /*#__PURE__*/React.createElement(Text.Text, {
148
+ const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement(Text.Text, {
149
149
  as: "label",
150
150
  htmlFor: id,
151
151
  className: labelClasses
152
- }, labelText) : null;
152
+ }, labelText);
153
153
  const labelWrapper = /*#__PURE__*/React.createElement("div", {
154
154
  className: `${prefix}--text-input__label-wrapper`
155
155
  }, label, counter);
156
- const helper = helperText ? /*#__PURE__*/React.createElement(Text.Text, {
156
+ const helper = typeof helperText !== 'undefined' && helperText !== null && /*#__PURE__*/React.createElement(Text.Text, {
157
157
  as: "div",
158
158
  id: normalizedProps.helperId,
159
159
  className: helperTextClasses
160
- }, helperText) : null;
160
+ }, helperText);
161
161
  const input = /*#__PURE__*/React.createElement("input", util.getTextInputProps({
162
162
  sharedTextInputProps,
163
163
  invalid: normalizedProps.invalid,
@@ -102,10 +102,10 @@ const TimePicker = frFn((props, ref) => {
102
102
  [`${prefix}--visually-hidden`]: hideLabel,
103
103
  [`${prefix}--label--disabled`]: disabled
104
104
  });
105
- const label = labelText ? /*#__PURE__*/React.createElement("label", {
105
+ const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
106
106
  htmlFor: id,
107
107
  className: labelClasses
108
- }, labelText) : null;
108
+ }, labelText);
109
109
  function getInternalPickerSelects() {
110
110
  const readOnlyEventHandlers = {
111
111
  onMouseDown: evt => {
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2016, 2025
2
+ * Copyright IBM Corp. 2016, 2026
3
3
  *
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.
@@ -50,8 +50,9 @@ const DefinitionTooltip = ({
50
50
  setOpen(false);
51
51
  },
52
52
  onMouseEnter: () => {
53
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
54
- openOnHover ? setOpen(true) : null;
53
+ if (openOnHover) {
54
+ setOpen(true);
55
+ }
55
56
  },
56
57
  onFocus: () => {
57
58
  setOpen(true);
@@ -9,7 +9,7 @@
9
9
 
10
10
  var React = require('react');
11
11
  var setupGetInstanceId = require('../tools/setupGetInstanceId.js');
12
- var environment = require('./environment.js');
12
+ var useIsomorphicEffect = require('./useIsomorphicEffect.js');
13
13
  var useIdPrefix = require('./useIdPrefix.js');
14
14
 
15
15
  // This file was heavily inspired by:
@@ -48,7 +48,6 @@ const _React = {
48
48
  ...React
49
49
  };
50
50
  const instanceId = setupGetInstanceId.setupGetInstanceId();
51
- const useIsomorphicLayoutEffect = environment.canUseDOM ? React.useLayoutEffect : React.useEffect;
52
51
  let serverHandoffCompleted = false;
53
52
  const defaultId = 'id';
54
53
 
@@ -66,7 +65,7 @@ function useCompatibleId(prefix = defaultId) {
66
65
  }
67
66
  return null;
68
67
  });
69
- useIsomorphicLayoutEffect(() => {
68
+ useIsomorphicEffect.default(() => {
70
69
  if (id === null) {
71
70
  setId(`${contextPrefix ? `${contextPrefix}-` : ``}${prefix}-${instanceId()}`);
72
71
  }
@@ -9,6 +9,7 @@
9
9
 
10
10
  var React = require('react');
11
11
  var usePrefix = require('./usePrefix.js');
12
+ var useIsomorphicEffect = require('./useIsomorphicEffect.js');
12
13
 
13
14
  const usePresence = (ref, isOpen) => {
14
15
  const prefix = usePrefix.usePrefix();
@@ -27,7 +28,7 @@ const usePresence = (ref, isOpen) => {
27
28
  const handleAnimationEnd = React.useCallback(() => {
28
29
  setExitState('finished');
29
30
  }, []);
30
- React.useLayoutEffect(() => {
31
+ useIsomorphicEffect.default(() => {
31
32
  if (!ref.current || !isExiting) return;
32
33
 
33
34
  // resolve for JSDOM
@@ -1,5 +1,5 @@
1
1
  /**
2
- * Copyright IBM Corp. 2025, 2025
2
+ * Copyright IBM Corp. 2025, 2026
3
3
  *
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.
@@ -8,6 +8,7 @@
8
8
  'use strict';
9
9
 
10
10
  var React = require('react');
11
+ var useIsomorphicEffect = require('./useIsomorphicEffect.js');
11
12
 
12
13
  const useResizeObserver = ({
13
14
  ref,
@@ -18,7 +19,7 @@ const useResizeObserver = ({
18
19
  const entriesToHandle = React.useRef(null);
19
20
  const cb = React.useRef(onResize);
20
21
  React.useEffect(() => {
21
- // ref for onResize removes it as dependency from useLayoutEffect
22
+ // ref for onResize removes it as dependency from useIsomorphicEffect
22
23
  // This significantly reduces repeated calls if a function is redefined on every
23
24
  // render
24
25
  cb.current = onResize;
@@ -39,7 +40,7 @@ const useResizeObserver = ({
39
40
  getInitialSize();
40
41
  // eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
41
42
  }, [width, height]);
42
- React.useLayoutEffect(() => {
43
+ useIsomorphicEffect.default(() => {
43
44
  if (!ref?.current) {
44
45
  return;
45
46
  }
@@ -50,9 +51,7 @@ const useResizeObserver = ({
50
51
  const entry = entriesToHandle.current[0];
51
52
  setWidth(entry.contentRect.width);
52
53
  setHeight(entry.contentRect.height);
53
-
54
- // eslint-disable-next-line @typescript-eslint/no-unused-expressions -- https://github.com/carbon-design-system/carbon/issues/20452
55
- cb.current && cb.current(entry.contentRect);
54
+ cb.current?.(entry.contentRect);
56
55
  };
57
56
  const observer = new ResizeObserver(entries => {
58
57
  // always update entriesToHandle
@@ -68,7 +67,6 @@ const useResizeObserver = ({
68
67
  return () => {
69
68
  observer.disconnect();
70
69
  };
71
- // eslint-disable-next-line react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
72
70
  }, []);
73
71
  return {
74
72
  width,
@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
14
14
  * @param handlers - An array of event handler functions.
15
15
  * @returns A composite event handler.
16
16
  */
17
- export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
17
+ export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
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.100.0",
4
+ "version": "1.101.0-rc.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": ">=0.32.0",
56
- "@carbon/icons-react": "^11.74.0",
57
- "@carbon/layout": "^11.47.0",
58
- "@carbon/styles": "^1.99.0",
59
- "@carbon/utilities": "^0.15.0",
55
+ "@carbon/feature-flags": "0.33.0-rc.0",
56
+ "@carbon/icons-react": "^11.75.0-rc.0",
57
+ "@carbon/layout": "^11.48.0-rc.0",
58
+ "@carbon/styles": "^1.100.0-rc.0",
59
+ "@carbon/utilities": "^0.16.0-rc.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.39.0",
82
- "@carbon/themes": "^11.67.0",
82
+ "@carbon/themes": "^11.68.0-rc.0",
83
83
  "@figma/code-connect": "^1.3.5",
84
84
  "@rollup/plugin-babel": "^6.0.0",
85
85
  "@rollup/plugin-commonjs": "^28.0.3",
@@ -131,5 +131,5 @@
131
131
  "**/*.scss",
132
132
  "**/*.css"
133
133
  ],
134
- "gitHead": "f366448449df3d81c9bb63a8a842772d734c163a"
134
+ "gitHead": "2878146d9047a6482e745e7279807c93855e9c09"
135
135
  }