@carbon/react 1.113.0-rc.0 → 1.113.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 +933 -933
- package/es/components/FeatureFlags/index.d.ts +58 -0
- package/es/components/FeatureFlags/index.js +4 -2
- package/es/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
- package/es/components/MultiSelect/FilterableMultiSelect.js +2 -3
- package/lib/components/FeatureFlags/index.d.ts +58 -0
- package/lib/components/FeatureFlags/index.js +3 -1
- package/lib/components/MultiSelect/FilterableMultiSelect.d.ts +1 -2
- package/lib/components/MultiSelect/FilterableMultiSelect.js +2 -3
- package/package.json +10 -10
|
@@ -8,17 +8,75 @@ import PropTypes from 'prop-types';
|
|
|
8
8
|
import { type ReactNode } from 'react';
|
|
9
9
|
export interface FeatureFlagsProps {
|
|
10
10
|
children?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Provide the feature flags to enable or disable in the current React tree.
|
|
13
|
+
*
|
|
14
|
+
* @deprecated Use the individual boolean props instead. Run the
|
|
15
|
+
* `featureflag-deprecate-flags-prop` codemod to migrate:
|
|
16
|
+
* `npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write`
|
|
17
|
+
*/
|
|
11
18
|
flags?: Record<string, boolean>;
|
|
19
|
+
/**
|
|
20
|
+
* Enable the features and functionality for the v12 Release.
|
|
21
|
+
*
|
|
22
|
+
* Enabling this turns on every `enableV12*` flag at once, as well as
|
|
23
|
+
* `enableFocusWrapWithoutSentinels`.
|
|
24
|
+
*/
|
|
12
25
|
enableV12Release?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Enable rendering of default icons in the tile components.
|
|
28
|
+
*
|
|
29
|
+
* Becomes the default behavior in v12.
|
|
30
|
+
*/
|
|
13
31
|
enableV12TileDefaultIcons?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Enable rendering of radio icons in the `RadioTile` component.
|
|
34
|
+
*
|
|
35
|
+
* Becomes the default behavior in v12.
|
|
36
|
+
*/
|
|
14
37
|
enableV12TileRadioIcons?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Enable the use of the v12 `OverflowMenu` leveraging the `Menu`
|
|
40
|
+
* subcomponents.
|
|
41
|
+
*
|
|
42
|
+
* Becomes the default behavior in v12.
|
|
43
|
+
*/
|
|
15
44
|
enableV12Overflowmenu?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Enable the new `TreeView` controllable API.
|
|
47
|
+
*/
|
|
16
48
|
enableTreeviewControllable?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Enable the new focus wrap behavior that doesn't use sentinel nodes.
|
|
51
|
+
*
|
|
52
|
+
* @deprecated Use `enableFocusWrapWithoutSentinels` instead.
|
|
53
|
+
*/
|
|
17
54
|
enableExperimentalFocusWrapWithoutSentinels?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Enable the new focus wrap behavior that doesn't use sentinel nodes.
|
|
57
|
+
*/
|
|
18
58
|
enableFocusWrapWithoutSentinels?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Enable components to utilize the native `dialog` element.
|
|
61
|
+
*/
|
|
19
62
|
enableDialogElement?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Enable dynamic setting of floating styles for components like `Popover`,
|
|
65
|
+
* `Tooltip`, etc.
|
|
66
|
+
*
|
|
67
|
+
* Becomes the default behavior in v12.
|
|
68
|
+
*/
|
|
20
69
|
enableV12DynamicFloatingStyles?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Enable enhanced functionality for the `FileUploader` component, including
|
|
72
|
+
* richer callback data and expanded trigger events for `onChange` and
|
|
73
|
+
* `onDelete`.
|
|
74
|
+
*/
|
|
21
75
|
enableEnhancedFileUploader?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Enable components to remain unmounted in closed state and mount in open
|
|
78
|
+
* state.
|
|
79
|
+
*/
|
|
22
80
|
enablePresence?: boolean;
|
|
23
81
|
}
|
|
24
82
|
/**
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { deprecate } from "../../prop-types/deprecate.js";
|
|
9
|
-
import { FeatureFlags, createScope } from "@carbon/feature-flags";
|
|
9
|
+
import { FeatureFlags, createScope, notifyAvailableFlag } from "@carbon/feature-flags";
|
|
10
10
|
import { createContext, useContext, useMemo } from "react";
|
|
11
11
|
import PropTypes from "prop-types";
|
|
12
12
|
import { jsx } from "react/jsx-runtime";
|
|
@@ -108,7 +108,9 @@ FeatureFlags$1.propTypes = {
|
|
|
108
108
|
* FeatureFlagContext
|
|
109
109
|
*/
|
|
110
110
|
const useFeatureFlag = (flag) => {
|
|
111
|
-
|
|
111
|
+
const enabled = useContext(FeatureFlagContext).enabled(flag);
|
|
112
|
+
notifyAvailableFlag(flag, enabled);
|
|
113
|
+
return enabled;
|
|
112
114
|
};
|
|
113
115
|
/**
|
|
114
116
|
* Access all feature flag information for the given FeatureFlagContext
|
|
@@ -125,8 +125,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
|
|
|
125
125
|
selectedItems: ItemType[];
|
|
126
126
|
}): void;
|
|
127
127
|
/**
|
|
128
|
-
*
|
|
129
|
-
* to communicate to the currently typed input.
|
|
128
|
+
* Called whenever the input value changes.
|
|
130
129
|
*/
|
|
131
130
|
onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
|
|
132
131
|
/**
|
|
@@ -257,6 +257,7 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
|
|
|
257
257
|
menuId,
|
|
258
258
|
inputId,
|
|
259
259
|
inputValue,
|
|
260
|
+
onInputValueChange,
|
|
260
261
|
stateReducer,
|
|
261
262
|
isItemDisabled
|
|
262
263
|
});
|
|
@@ -292,7 +293,6 @@ const FilterableMultiSelect = forwardRef(function FilterableMultiSelect({ autoAl
|
|
|
292
293
|
highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
|
|
293
294
|
};
|
|
294
295
|
case InputChange:
|
|
295
|
-
if (onInputValueChange) onInputValueChange(changes);
|
|
296
296
|
setInputValue(changes.inputValue ?? "");
|
|
297
297
|
setIsOpen(true);
|
|
298
298
|
return {
|
|
@@ -686,8 +686,7 @@ FilterableMultiSelect.propTypes = {
|
|
|
686
686
|
*/
|
|
687
687
|
onChange: PropTypes.func,
|
|
688
688
|
/**
|
|
689
|
-
*
|
|
690
|
-
* the currently typed input.
|
|
689
|
+
* Called whenever the input value changes.
|
|
691
690
|
*/
|
|
692
691
|
onInputValueChange: PropTypes.func,
|
|
693
692
|
/**
|
|
@@ -8,17 +8,75 @@ import PropTypes from 'prop-types';
|
|
|
8
8
|
import { type ReactNode } from 'react';
|
|
9
9
|
export interface FeatureFlagsProps {
|
|
10
10
|
children?: ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Provide the feature flags to enable or disable in the current React tree.
|
|
13
|
+
*
|
|
14
|
+
* @deprecated Use the individual boolean props instead. Run the
|
|
15
|
+
* `featureflag-deprecate-flags-prop` codemod to migrate:
|
|
16
|
+
* `npx @carbon/upgrade migrate featureflag-deprecate-flags-prop --write`
|
|
17
|
+
*/
|
|
11
18
|
flags?: Record<string, boolean>;
|
|
19
|
+
/**
|
|
20
|
+
* Enable the features and functionality for the v12 Release.
|
|
21
|
+
*
|
|
22
|
+
* Enabling this turns on every `enableV12*` flag at once, as well as
|
|
23
|
+
* `enableFocusWrapWithoutSentinels`.
|
|
24
|
+
*/
|
|
12
25
|
enableV12Release?: boolean;
|
|
26
|
+
/**
|
|
27
|
+
* Enable rendering of default icons in the tile components.
|
|
28
|
+
*
|
|
29
|
+
* Becomes the default behavior in v12.
|
|
30
|
+
*/
|
|
13
31
|
enableV12TileDefaultIcons?: boolean;
|
|
32
|
+
/**
|
|
33
|
+
* Enable rendering of radio icons in the `RadioTile` component.
|
|
34
|
+
*
|
|
35
|
+
* Becomes the default behavior in v12.
|
|
36
|
+
*/
|
|
14
37
|
enableV12TileRadioIcons?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Enable the use of the v12 `OverflowMenu` leveraging the `Menu`
|
|
40
|
+
* subcomponents.
|
|
41
|
+
*
|
|
42
|
+
* Becomes the default behavior in v12.
|
|
43
|
+
*/
|
|
15
44
|
enableV12Overflowmenu?: boolean;
|
|
45
|
+
/**
|
|
46
|
+
* Enable the new `TreeView` controllable API.
|
|
47
|
+
*/
|
|
16
48
|
enableTreeviewControllable?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Enable the new focus wrap behavior that doesn't use sentinel nodes.
|
|
51
|
+
*
|
|
52
|
+
* @deprecated Use `enableFocusWrapWithoutSentinels` instead.
|
|
53
|
+
*/
|
|
17
54
|
enableExperimentalFocusWrapWithoutSentinels?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* Enable the new focus wrap behavior that doesn't use sentinel nodes.
|
|
57
|
+
*/
|
|
18
58
|
enableFocusWrapWithoutSentinels?: boolean;
|
|
59
|
+
/**
|
|
60
|
+
* Enable components to utilize the native `dialog` element.
|
|
61
|
+
*/
|
|
19
62
|
enableDialogElement?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* Enable dynamic setting of floating styles for components like `Popover`,
|
|
65
|
+
* `Tooltip`, etc.
|
|
66
|
+
*
|
|
67
|
+
* Becomes the default behavior in v12.
|
|
68
|
+
*/
|
|
20
69
|
enableV12DynamicFloatingStyles?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Enable enhanced functionality for the `FileUploader` component, including
|
|
72
|
+
* richer callback data and expanded trigger events for `onChange` and
|
|
73
|
+
* `onDelete`.
|
|
74
|
+
*/
|
|
21
75
|
enableEnhancedFileUploader?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Enable components to remain unmounted in closed state and mount in open
|
|
78
|
+
* state.
|
|
79
|
+
*/
|
|
22
80
|
enablePresence?: boolean;
|
|
23
81
|
}
|
|
24
82
|
/**
|
|
@@ -111,7 +111,9 @@ FeatureFlags.propTypes = {
|
|
|
111
111
|
* FeatureFlagContext
|
|
112
112
|
*/
|
|
113
113
|
const useFeatureFlag = (flag) => {
|
|
114
|
-
|
|
114
|
+
const enabled = (0, react.useContext)(FeatureFlagContext).enabled(flag);
|
|
115
|
+
if (process.env.NODE_ENV !== "production") (0, _carbon_feature_flags.notifyAvailableFlag)(flag, enabled);
|
|
116
|
+
return enabled;
|
|
115
117
|
};
|
|
116
118
|
/**
|
|
117
119
|
* Access all feature flag information for the given FeatureFlagContext
|
|
@@ -125,8 +125,7 @@ export interface FilterableMultiSelectProps<ItemType> extends MultiSelectSorting
|
|
|
125
125
|
selectedItems: ItemType[];
|
|
126
126
|
}): void;
|
|
127
127
|
/**
|
|
128
|
-
*
|
|
129
|
-
* to communicate to the currently typed input.
|
|
128
|
+
* Called whenever the input value changes.
|
|
130
129
|
*/
|
|
131
130
|
onInputValueChange?: UseComboboxProps<ItemType>['onInputValueChange'];
|
|
132
131
|
/**
|
|
@@ -263,6 +263,7 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
|
|
|
263
263
|
menuId,
|
|
264
264
|
inputId,
|
|
265
265
|
inputValue,
|
|
266
|
+
onInputValueChange,
|
|
266
267
|
stateReducer,
|
|
267
268
|
isItemDisabled: require_isItemDisabled.isItemDisabled
|
|
268
269
|
});
|
|
@@ -298,7 +299,6 @@ const FilterableMultiSelect = (0, react.forwardRef)(function FilterableMultiSele
|
|
|
298
299
|
highlightedIndex: controlledSelectedItems.length > 0 ? 0 : -1
|
|
299
300
|
};
|
|
300
301
|
case InputChange:
|
|
301
|
-
if (onInputValueChange) onInputValueChange(changes);
|
|
302
302
|
setInputValue(changes.inputValue ?? "");
|
|
303
303
|
setIsOpen(true);
|
|
304
304
|
return {
|
|
@@ -692,8 +692,7 @@ FilterableMultiSelect.propTypes = {
|
|
|
692
692
|
*/
|
|
693
693
|
onChange: prop_types.default.func,
|
|
694
694
|
/**
|
|
695
|
-
*
|
|
696
|
-
* the currently typed input.
|
|
695
|
+
* Called whenever the input value changes.
|
|
697
696
|
*/
|
|
698
697
|
onInputValueChange: prop_types.default.func,
|
|
699
698
|
/**
|
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.113.0
|
|
4
|
+
"version": "1.113.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"types": "lib/index.d.ts",
|
|
@@ -55,12 +55,12 @@
|
|
|
55
55
|
},
|
|
56
56
|
"dependencies": {
|
|
57
57
|
"@babel/runtime": "^7.27.3",
|
|
58
|
-
"@carbon/feature-flags": "^1.
|
|
59
|
-
"@carbon/icons-react": "^11.85.0
|
|
60
|
-
"@carbon/layout": "^11.56.0
|
|
61
|
-
"@carbon/motion": "^11.49.0
|
|
62
|
-
"@carbon/styles": "^1.112.0
|
|
63
|
-
"@carbon/utilities": "^0.23.0
|
|
58
|
+
"@carbon/feature-flags": "^1.6.0",
|
|
59
|
+
"@carbon/icons-react": "^11.85.0",
|
|
60
|
+
"@carbon/layout": "^11.56.0",
|
|
61
|
+
"@carbon/motion": "^11.49.0",
|
|
62
|
+
"@carbon/styles": "^1.112.0",
|
|
63
|
+
"@carbon/utilities": "^0.23.0",
|
|
64
64
|
"@floating-ui/react": "^0.27.4",
|
|
65
65
|
"@ibm/telemetry-js": "^1.5.0",
|
|
66
66
|
"classnames": "2.5.1",
|
|
@@ -84,8 +84,8 @@
|
|
|
84
84
|
"@babel/preset-react": "^7.27.1",
|
|
85
85
|
"@babel/preset-typescript": "^7.27.1",
|
|
86
86
|
"@carbon/test-utils": "^10.41.0",
|
|
87
|
-
"@carbon/themes": "^11.78.0
|
|
88
|
-
"@figma/code-connect": "^1.4.
|
|
87
|
+
"@carbon/themes": "^11.78.0",
|
|
88
|
+
"@figma/code-connect": "^1.4.9",
|
|
89
89
|
"@rolldown/plugin-babel": "^0.2.0",
|
|
90
90
|
"@stackblitz/sdk": "^1.11.0",
|
|
91
91
|
"@storybook/addon-a11y": "^10.3.5",
|
|
@@ -132,5 +132,5 @@
|
|
|
132
132
|
"**/*.scss",
|
|
133
133
|
"**/*.css"
|
|
134
134
|
],
|
|
135
|
-
"gitHead": "
|
|
135
|
+
"gitHead": "a57cf8a896fe3fe09c5ab27648cd58947f37360a"
|
|
136
136
|
}
|