@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.
- package/.playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json +966 -966
- package/es/components/AILabel/index.d.ts +1 -1
- package/es/components/AILabel/index.js +1 -12
- package/es/components/Checkbox/Checkbox.js +5 -3
- package/es/components/CheckboxGroup/CheckboxGroup.js +4 -3
- package/es/components/CodeSnippet/CodeSnippet.d.ts +1 -1
- package/es/components/ComboBox/ComboBox.js +18 -10
- package/es/components/ComboButton/index.d.ts +1 -1
- package/es/components/ComboButton/index.js +3 -2
- package/es/components/ComposedModal/ComposedModal.js +17 -22
- package/es/components/ComposedModal/ModalHeader.d.ts +2 -2
- package/es/components/ComposedModal/ModalHeader.js +1 -1
- package/es/components/Copy/Copy.d.ts +1 -1
- package/es/components/CopyButton/CopyButton.d.ts +1 -1
- package/es/components/DataTable/DataTable.d.ts +2 -0
- package/es/components/DataTable/DataTable.js +6 -5
- package/es/components/DataTable/Table.d.ts +1 -1
- package/es/components/DataTable/Table.js +10 -4
- package/es/components/DataTable/state/sorting.d.ts +4 -2
- package/es/components/FileUploader/FileUploaderItem.d.ts +1 -1
- package/es/components/FileUploader/FileUploaderItem.js +3 -2
- package/es/components/Menu/Menu.js +8 -4
- package/es/components/Menu/MenuItem.d.ts +5 -1
- package/es/components/Menu/MenuItem.js +11 -1
- package/es/components/MenuButton/index.d.ts +1 -1
- package/es/components/MenuButton/index.js +3 -2
- package/es/components/MultiSelect/FilterableMultiSelect.d.ts +1 -1
- package/es/components/MultiSelect/FilterableMultiSelect.js +7 -5
- package/es/components/MultiSelect/MultiSelect.js +8 -4
- package/es/components/Notification/Notification.js +2 -1
- package/es/components/NumberInput/NumberInput.d.ts +1 -1
- package/es/components/NumberInput/NumberInput.js +5 -4
- package/es/components/OverflowMenu/OverflowMenu.d.ts +1 -0
- package/es/components/OverflowMenu/OverflowMenu.js +8 -4
- package/es/components/PageHeader/PageHeader.d.ts +1 -1
- package/es/components/PageHeader/PageHeader.js +5 -5
- package/es/components/RadioButtonGroup/RadioButtonGroup.js +4 -3
- package/es/components/Select/Select.js +2 -1
- package/es/components/StructuredList/StructuredList.d.ts +1 -1
- package/es/components/StructuredList/StructuredList.js +2 -4
- package/es/components/Tabs/Tabs.d.ts +2 -2
- package/es/components/Tabs/Tabs.js +20 -26
- package/es/components/Tag/DismissibleTag.js +3 -2
- package/es/components/Tag/OperationalTag.js +3 -2
- package/es/components/Tag/SelectableTag.js +3 -2
- package/es/components/Tag/Tag.js +3 -2
- package/es/components/TextArea/TextArea.d.ts +1 -1
- package/es/components/TextArea/TextArea.js +6 -5
- package/es/components/TextInput/ControlledPasswordInput.js +7 -6
- package/es/components/TextInput/PasswordInput.js +5 -6
- package/es/components/TextInput/TextInput.js +4 -4
- package/es/components/TimePicker/TimePicker.js +2 -2
- package/es/components/Tooltip/DefinitionTooltip.d.ts +1 -1
- package/es/components/Tooltip/DefinitionTooltip.js +3 -2
- package/es/internal/useId.js +3 -4
- package/es/internal/usePresence.js +3 -2
- package/es/internal/useResizeObserver.d.ts +1 -1
- package/es/internal/useResizeObserver.js +5 -7
- package/es/tools/events.d.ts +1 -1
- package/lib/components/AILabel/index.d.ts +1 -1
- package/lib/components/AILabel/index.js +1 -12
- package/lib/components/Checkbox/Checkbox.js +5 -3
- package/lib/components/CheckboxGroup/CheckboxGroup.js +4 -3
- package/lib/components/CodeSnippet/CodeSnippet.d.ts +1 -1
- package/lib/components/ComboBox/ComboBox.js +18 -10
- package/lib/components/ComboButton/index.d.ts +1 -1
- package/lib/components/ComboButton/index.js +2 -1
- package/lib/components/ComposedModal/ComposedModal.js +16 -21
- package/lib/components/ComposedModal/ModalHeader.d.ts +2 -2
- package/lib/components/ComposedModal/ModalHeader.js +1 -1
- package/lib/components/Copy/Copy.d.ts +1 -1
- package/lib/components/CopyButton/CopyButton.d.ts +1 -1
- package/lib/components/DataTable/DataTable.d.ts +2 -0
- package/lib/components/DataTable/DataTable.js +6 -5
- package/lib/components/DataTable/Table.d.ts +1 -1
- package/lib/components/DataTable/Table.js +10 -4
- package/lib/components/DataTable/state/sorting.d.ts +4 -2
- package/lib/components/FileUploader/FileUploaderItem.d.ts +1 -1
- package/lib/components/FileUploader/FileUploaderItem.js +2 -1
- package/lib/components/Menu/Menu.js +7 -3
- package/lib/components/Menu/MenuItem.d.ts +5 -1
- package/lib/components/Menu/MenuItem.js +11 -1
- package/lib/components/MenuButton/index.d.ts +1 -1
- package/lib/components/MenuButton/index.js +2 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +1 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.js +6 -4
- package/lib/components/MultiSelect/MultiSelect.js +7 -3
- package/lib/components/Notification/Notification.js +2 -1
- package/lib/components/NumberInput/NumberInput.d.ts +1 -1
- package/lib/components/NumberInput/NumberInput.js +5 -4
- package/lib/components/OverflowMenu/OverflowMenu.d.ts +1 -0
- package/lib/components/OverflowMenu/OverflowMenu.js +7 -3
- package/lib/components/PageHeader/PageHeader.d.ts +1 -1
- package/lib/components/PageHeader/PageHeader.js +4 -4
- package/lib/components/RadioButtonGroup/RadioButtonGroup.js +4 -3
- package/lib/components/Select/Select.js +2 -1
- package/lib/components/StructuredList/StructuredList.d.ts +1 -1
- package/lib/components/StructuredList/StructuredList.js +2 -4
- package/lib/components/Tabs/Tabs.d.ts +2 -2
- package/lib/components/Tabs/Tabs.js +15 -21
- package/lib/components/Tag/DismissibleTag.js +2 -1
- package/lib/components/Tag/OperationalTag.js +2 -1
- package/lib/components/Tag/SelectableTag.js +2 -1
- package/lib/components/Tag/Tag.js +2 -1
- package/lib/components/TextArea/TextArea.d.ts +1 -1
- package/lib/components/TextArea/TextArea.js +6 -5
- package/lib/components/TextInput/ControlledPasswordInput.js +7 -6
- package/lib/components/TextInput/PasswordInput.js +5 -6
- package/lib/components/TextInput/TextInput.js +4 -4
- package/lib/components/TimePicker/TimePicker.js +2 -2
- package/lib/components/Tooltip/DefinitionTooltip.d.ts +1 -1
- package/lib/components/Tooltip/DefinitionTooltip.js +3 -2
- package/lib/internal/useId.js +2 -3
- package/lib/internal/usePresence.js +2 -1
- package/lib/internal/useResizeObserver.d.ts +1 -1
- package/lib/internal/useResizeObserver.js +4 -6
- package/lib/tools/events.d.ts +1 -1
- 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
|
|
78
|
+
const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
|
|
79
79
|
htmlFor: id,
|
|
80
80
|
className: labelClasses
|
|
81
|
-
}, labelText)
|
|
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
|
|
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 &&
|
|
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 =
|
|
113
|
+
const helper = hasHelper && /*#__PURE__*/React.createElement("div", {
|
|
113
114
|
id: helperId,
|
|
114
115
|
className: helperTextClasses
|
|
115
|
-
}, helperText)
|
|
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
|
-
|
|
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
|
|
123
|
+
const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
|
|
125
124
|
htmlFor: id,
|
|
126
125
|
className: labelClasses
|
|
127
|
-
}, labelText)
|
|
128
|
-
const helper = helperText
|
|
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)
|
|
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
|
|
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)
|
|
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
|
|
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)
|
|
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
|
|
105
|
+
const label = typeof labelText !== 'undefined' && labelText !== null && /*#__PURE__*/React.createElement("label", {
|
|
106
106
|
htmlFor: id,
|
|
107
107
|
className: labelClasses
|
|
108
|
-
}, labelText)
|
|
108
|
+
}, labelText);
|
|
109
109
|
function getInternalPickerSelects() {
|
|
110
110
|
const readOnlyEventHandlers = {
|
|
111
111
|
onMouseDown: evt => {
|
|
@@ -50,8 +50,9 @@ const DefinitionTooltip = ({
|
|
|
50
50
|
setOpen(false);
|
|
51
51
|
},
|
|
52
52
|
onMouseEnter: () => {
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
if (openOnHover) {
|
|
54
|
+
setOpen(true);
|
|
55
|
+
}
|
|
55
56
|
},
|
|
56
57
|
onFocus: () => {
|
|
57
58
|
setOpen(true);
|
package/lib/internal/useId.js
CHANGED
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
|
|
10
10
|
var React = require('react');
|
|
11
11
|
var setupGetInstanceId = require('../tools/setupGetInstanceId.js');
|
|
12
|
-
var
|
|
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
|
-
|
|
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
|
-
|
|
31
|
+
useIsomorphicEffect.default(() => {
|
|
31
32
|
if (!ref.current || !isExiting) return;
|
|
32
33
|
|
|
33
34
|
// resolve for JSDOM
|
|
@@ -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
|
|
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
|
-
|
|
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,
|
package/lib/tools/events.d.ts
CHANGED
|
@@ -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
|
|
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.
|
|
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": "
|
|
56
|
-
"@carbon/icons-react": "^11.
|
|
57
|
-
"@carbon/layout": "^11.
|
|
58
|
-
"@carbon/styles": "^1.
|
|
59
|
-
"@carbon/utilities": "^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.
|
|
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": "
|
|
134
|
+
"gitHead": "2878146d9047a6482e745e7279807c93855e9c09"
|
|
135
135
|
}
|