@carbon/react 1.17.0-rc.1 → 1.17.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/es/components/DatePicker/DatePicker.js +68 -6
- package/es/components/DatePickerInput/DatePickerInput.js +25 -9
- package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js +67 -0
- package/es/components/FluidDatePicker/FluidDatePicker.js +76 -0
- package/es/components/FluidDatePickerInput/FluidDatePickerInput.js +26 -0
- package/es/components/ListBox/ListBoxSelection.js +11 -4
- package/es/components/MultiSelect/MultiSelect.js +28 -5
- package/es/components/OverflowMenu/index.js +1 -2
- package/es/components/SkeletonPlaceholder/SkeletonPlaceholder.js +2 -1
- package/es/components/SkeletonText/SkeletonText.js +1 -1
- package/es/components/StructuredList/StructuredList.js +89 -54
- package/es/components/TextArea/TextArea.js +4 -2
- package/es/index.js +4 -1
- package/es/internal/FloatingMenu.js +3 -1
- package/lib/components/DatePicker/DatePicker.js +66 -4
- package/lib/components/DatePickerInput/DatePickerInput.js +24 -8
- package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js +77 -0
- package/lib/components/FluidDatePicker/FluidDatePicker.js +86 -0
- package/lib/components/FluidDatePickerInput/FluidDatePickerInput.js +34 -0
- package/lib/components/ListBox/ListBoxSelection.js +11 -4
- package/lib/components/MultiSelect/MultiSelect.js +28 -5
- package/lib/components/OverflowMenu/index.js +1 -22
- package/lib/components/SkeletonPlaceholder/SkeletonPlaceholder.js +2 -1
- package/lib/components/SkeletonText/SkeletonText.js +1 -1
- package/lib/components/StructuredList/StructuredList.js +87 -52
- package/lib/components/TextArea/TextArea.js +4 -2
- package/lib/index.js +43 -37
- package/lib/internal/FloatingMenu.js +3 -1
- package/package.json +5 -5
- package/scss/components/fluid-date-picker/_fluid-date-picker.scss +9 -0
- package/scss/components/fluid-date-picker/_index.scss +9 -0
- package/es/components/StructuredList/index.js +0 -43
- package/es/components/StructuredList/next/StructuredList.js +0 -342
- package/es/internal/ComponentToggle.js +0 -42
- package/lib/components/StructuredList/index.js +0 -52
- package/lib/components/StructuredList/next/StructuredList.js +0 -357
- package/lib/internal/ComponentToggle.js +0 -50
package/lib/index.js
CHANGED
|
@@ -70,7 +70,6 @@ var SelectItem = require('./components/SelectItem/SelectItem.js');
|
|
|
70
70
|
var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
|
|
71
71
|
var Switch = require('./components/Switch/Switch.js');
|
|
72
72
|
var index$4 = require('./components/Slider/index.js');
|
|
73
|
-
var index$b = require('./components/StructuredList/index.js');
|
|
74
73
|
var index$5 = require('./components/Tab/index.js');
|
|
75
74
|
var TabContent = require('./components/TabContent/TabContent.js');
|
|
76
75
|
var Tabs = require('./components/Tabs/Tabs.js');
|
|
@@ -86,7 +85,7 @@ var index$7 = require('./components/TimePicker/index.js');
|
|
|
86
85
|
var index$8 = require('./components/TimePickerSelect/index.js');
|
|
87
86
|
var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
|
|
88
87
|
var Toggle = require('./components/Toggle/Toggle.js');
|
|
89
|
-
var index$
|
|
88
|
+
var index$b = require('./components/Toggletip/index.js');
|
|
90
89
|
require('./components/TreeView/index.js');
|
|
91
90
|
var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
|
|
92
91
|
var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
|
|
@@ -100,17 +99,17 @@ var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
|
|
|
100
99
|
var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
|
|
101
100
|
var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
|
|
102
101
|
var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
|
|
103
|
-
var index$
|
|
104
|
-
var index$
|
|
105
|
-
var index$
|
|
106
|
-
var index$
|
|
102
|
+
var index$c = require('./components/FeatureFlags/index.js');
|
|
103
|
+
var index$d = require('./components/Heading/index.js');
|
|
104
|
+
var index$e = require('./components/IconButton/index.js');
|
|
105
|
+
var index$f = require('./components/Layer/index.js');
|
|
107
106
|
require('./components/Menu/index.js');
|
|
108
|
-
var index$
|
|
109
|
-
var index$
|
|
110
|
-
var index$
|
|
107
|
+
var index$g = require('./components/OverflowMenuV2/index.js');
|
|
108
|
+
var index$h = require('./components/Popover/index.js');
|
|
109
|
+
var index$i = require('./components/Stack/index.js');
|
|
111
110
|
require('./components/Text/index.js');
|
|
112
111
|
var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
|
|
113
|
-
var index$
|
|
112
|
+
var index$j = require('./components/Theme/index.js');
|
|
114
113
|
var usePrefix = require('./internal/usePrefix.js');
|
|
115
114
|
var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
|
|
116
115
|
var ContainedListItem = require('./components/ContainedList/ContainedListItem/ContainedListItem.js');
|
|
@@ -127,6 +126,7 @@ var SideNavIcon = require('./components/UIShell/SideNavIcon.js');
|
|
|
127
126
|
var SideNavItem = require('./components/UIShell/SideNavItem.js');
|
|
128
127
|
var SideNavLinkText = require('./components/UIShell/SideNavLinkText.js');
|
|
129
128
|
var useContextMenu = require('./components/ContextMenu/useContextMenu.js');
|
|
129
|
+
var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
|
|
130
130
|
var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
|
|
131
131
|
var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
|
|
132
132
|
var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
|
|
@@ -180,6 +180,7 @@ var NumberInput = require('./components/NumberInput/NumberInput.js');
|
|
|
180
180
|
var ControlledPasswordInput = require('./components/TextInput/ControlledPasswordInput.js');
|
|
181
181
|
var PasswordInput = require('./components/TextInput/PasswordInput.js');
|
|
182
182
|
var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicator.js');
|
|
183
|
+
var StructuredList = require('./components/StructuredList/StructuredList.js');
|
|
183
184
|
var StructuredList_Skeleton = require('./components/StructuredList/StructuredList.Skeleton.js');
|
|
184
185
|
var Tile = require('./components/Tile/Tile.js');
|
|
185
186
|
var Content = require('./components/UIShell/Content.js');
|
|
@@ -205,6 +206,8 @@ var SideNavMenuItem = require('./components/UIShell/SideNavMenuItem.js');
|
|
|
205
206
|
var SideNavSwitcher = require('./components/UIShell/SideNavSwitcher.js');
|
|
206
207
|
var FluidComboBox = require('./components/FluidComboBox/FluidComboBox.js');
|
|
207
208
|
var FluidComboBox_Skeleton = require('./components/FluidComboBox/FluidComboBox.Skeleton.js');
|
|
209
|
+
var FluidDatePicker = require('./components/FluidDatePicker/FluidDatePicker.js');
|
|
210
|
+
var FluidDatePickerInput = require('./components/FluidDatePickerInput/FluidDatePickerInput.js');
|
|
208
211
|
var FluidDropdown = require('./components/FluidDropdown/FluidDropdown.js');
|
|
209
212
|
var FluidDropdown_Skeleton = require('./components/FluidDropdown/FluidDropdown.Skeleton.js');
|
|
210
213
|
var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.js');
|
|
@@ -278,12 +281,6 @@ exports.SelectItem = SelectItem["default"];
|
|
|
278
281
|
exports.SelectItemGroup = SelectItemGroup["default"];
|
|
279
282
|
exports.Switch = Switch["default"];
|
|
280
283
|
exports.Slider = index$4["default"];
|
|
281
|
-
exports.StructuredListBody = index$b.StructuredListBody;
|
|
282
|
-
exports.StructuredListCell = index$b.StructuredListCell;
|
|
283
|
-
exports.StructuredListHead = index$b.StructuredListHead;
|
|
284
|
-
exports.StructuredListInput = index$b.StructuredListInput;
|
|
285
|
-
exports.StructuredListRow = index$b.StructuredListRow;
|
|
286
|
-
exports.StructuredListWrapper = index$b.StructuredListWrapper;
|
|
287
284
|
exports.Tab = index$5["default"];
|
|
288
285
|
exports.TabContent = TabContent["default"];
|
|
289
286
|
exports.IconTab = Tabs.IconTab;
|
|
@@ -302,11 +299,11 @@ exports.TimePicker = index$7["default"];
|
|
|
302
299
|
exports.TimePickerSelect = index$8["default"];
|
|
303
300
|
exports.ToggleSkeleton = Toggle_Skeleton["default"];
|
|
304
301
|
exports.Toggle = Toggle.Toggle;
|
|
305
|
-
exports.Toggletip = index$
|
|
306
|
-
exports.ToggletipActions = index$
|
|
307
|
-
exports.ToggletipButton = index$
|
|
308
|
-
exports.ToggletipContent = index$
|
|
309
|
-
exports.ToggletipLabel = index$
|
|
302
|
+
exports.Toggletip = index$b.Toggletip;
|
|
303
|
+
exports.ToggletipActions = index$b.ToggletipActions;
|
|
304
|
+
exports.ToggletipButton = index$b.ToggletipButton;
|
|
305
|
+
exports.ToggletipContent = index$b.ToggletipContent;
|
|
306
|
+
exports.ToggletipLabel = index$b.ToggletipLabel;
|
|
310
307
|
exports.UnorderedList = UnorderedList["default"];
|
|
311
308
|
exports.SkeletonText = SkeletonText["default"];
|
|
312
309
|
exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
|
|
@@ -319,23 +316,23 @@ exports.SliderSkeleton = Slider_Skeleton["default"];
|
|
|
319
316
|
exports.TextInputSkeleton = TextInput_Skeleton["default"];
|
|
320
317
|
exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
|
|
321
318
|
exports.IconSkeleton = Icon_Skeleton["default"];
|
|
322
|
-
exports.unstable_FeatureFlags = index$
|
|
323
|
-
exports.unstable_useFeatureFlag = index$
|
|
324
|
-
exports.unstable_useFeatureFlags = index$
|
|
325
|
-
exports.Heading = index$
|
|
326
|
-
exports.Section = index$
|
|
327
|
-
exports.IconButton = index$
|
|
328
|
-
exports.Layer = index$
|
|
329
|
-
exports.useLayer = index$
|
|
330
|
-
exports.unstable_OverflowMenuV2 = index$
|
|
331
|
-
exports.Popover = index$
|
|
332
|
-
exports.PopoverContent = index$
|
|
333
|
-
exports.HStack = index$
|
|
334
|
-
exports.VStack = index$
|
|
319
|
+
exports.unstable_FeatureFlags = index$c.FeatureFlags;
|
|
320
|
+
exports.unstable_useFeatureFlag = index$c.useFeatureFlag;
|
|
321
|
+
exports.unstable_useFeatureFlags = index$c.useFeatureFlags;
|
|
322
|
+
exports.Heading = index$d.Heading;
|
|
323
|
+
exports.Section = index$d.Section;
|
|
324
|
+
exports.IconButton = index$e.IconButton;
|
|
325
|
+
exports.Layer = index$f.Layer;
|
|
326
|
+
exports.useLayer = index$f.useLayer;
|
|
327
|
+
exports.unstable_OverflowMenuV2 = index$g.OverflowMenuV2;
|
|
328
|
+
exports.Popover = index$h.Popover;
|
|
329
|
+
exports.PopoverContent = index$h.PopoverContent;
|
|
330
|
+
exports.HStack = index$i.HStack;
|
|
331
|
+
exports.VStack = index$i.VStack;
|
|
335
332
|
exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
|
|
336
|
-
exports.GlobalTheme = index$
|
|
337
|
-
exports.Theme = index$
|
|
338
|
-
exports.useTheme = index$
|
|
333
|
+
exports.GlobalTheme = index$j.GlobalTheme;
|
|
334
|
+
exports.Theme = index$j.Theme;
|
|
335
|
+
exports.useTheme = index$j.useTheme;
|
|
339
336
|
exports.usePrefix = usePrefix.usePrefix;
|
|
340
337
|
exports.AspectRatio = AspectRatio["default"];
|
|
341
338
|
exports.ContainedListItem = ContainedListItem["default"];
|
|
@@ -352,6 +349,7 @@ exports.SideNavIcon = SideNavIcon["default"];
|
|
|
352
349
|
exports.SideNavItem = SideNavItem["default"];
|
|
353
350
|
exports.SideNavLinkText = SideNavLinkText["default"];
|
|
354
351
|
exports.unstable_useContextMenu = useContextMenu["default"];
|
|
352
|
+
exports.unstable__FluidDatePickerSkeleton = FluidDatePicker_Skeleton["default"];
|
|
355
353
|
exports.unstable__FluidTextArea = FluidTextArea["default"];
|
|
356
354
|
exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
|
|
357
355
|
exports.unstable__FluidTextInput = FluidTextInput["default"];
|
|
@@ -411,6 +409,12 @@ exports.ControlledPasswordInput = ControlledPasswordInput["default"];
|
|
|
411
409
|
exports.PasswordInput = PasswordInput["default"];
|
|
412
410
|
exports.ProgressIndicator = ProgressIndicator.ProgressIndicator;
|
|
413
411
|
exports.ProgressStep = ProgressIndicator.ProgressStep;
|
|
412
|
+
exports.StructuredListBody = StructuredList.StructuredListBody;
|
|
413
|
+
exports.StructuredListCell = StructuredList.StructuredListCell;
|
|
414
|
+
exports.StructuredListHead = StructuredList.StructuredListHead;
|
|
415
|
+
exports.StructuredListInput = StructuredList.StructuredListInput;
|
|
416
|
+
exports.StructuredListRow = StructuredList.StructuredListRow;
|
|
417
|
+
exports.StructuredListWrapper = StructuredList.StructuredListWrapper;
|
|
414
418
|
exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
|
|
415
419
|
exports.ClickableTile = Tile.ClickableTile;
|
|
416
420
|
exports.ExpandableTile = Tile.ExpandableTile;
|
|
@@ -441,6 +445,8 @@ exports.SideNavMenuItem = SideNavMenuItem["default"];
|
|
|
441
445
|
exports.SideNavSwitcher = SideNavSwitcher["default"];
|
|
442
446
|
exports.unstable__FluidComboBox = FluidComboBox["default"];
|
|
443
447
|
exports.unstable__FluidComboBoxSkeleton = FluidComboBox_Skeleton["default"];
|
|
448
|
+
exports.unstable__FluidDatePicker = FluidDatePicker["default"];
|
|
449
|
+
exports.unstable__FluidDatePickerInput = FluidDatePickerInput["default"];
|
|
444
450
|
exports.unstable__FluidDropdown = FluidDropdown["default"];
|
|
445
451
|
exports.unstable__FluidDropdownSkeleton = FluidDropdown_Skeleton["default"];
|
|
446
452
|
exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
|
|
@@ -491,8 +491,10 @@ _rollupPluginBabelHelpers.defineProperty(FloatingMenu, "defaultProps", {
|
|
|
491
491
|
updateOrientation: null
|
|
492
492
|
});
|
|
493
493
|
|
|
494
|
+
var FloatingMenu$1 = FloatingMenu;
|
|
495
|
+
|
|
494
496
|
exports.DIRECTION_BOTTOM = DIRECTION_BOTTOM;
|
|
495
497
|
exports.DIRECTION_LEFT = DIRECTION_LEFT;
|
|
496
498
|
exports.DIRECTION_RIGHT = DIRECTION_RIGHT;
|
|
497
499
|
exports.DIRECTION_TOP = DIRECTION_TOP;
|
|
498
|
-
exports["default"] = FloatingMenu;
|
|
500
|
+
exports["default"] = FloatingMenu$1;
|
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.17.0
|
|
4
|
+
"version": "1.17.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -44,9 +44,9 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@babel/runtime": "^7.18.3",
|
|
46
46
|
"@carbon/feature-flags": "^0.9.0",
|
|
47
|
-
"@carbon/icons-react": "^11.
|
|
47
|
+
"@carbon/icons-react": "^11.11.0",
|
|
48
48
|
"@carbon/layout": "^11.7.0",
|
|
49
|
-
"@carbon/styles": "^1.17.0
|
|
49
|
+
"@carbon/styles": "^1.17.0",
|
|
50
50
|
"@carbon/telemetry": "0.1.0",
|
|
51
51
|
"classnames": "2.3.2",
|
|
52
52
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"@babel/preset-env": "^7.18.2",
|
|
74
74
|
"@babel/preset-react": "^7.17.12",
|
|
75
75
|
"@carbon/test-utils": "^10.26.0",
|
|
76
|
-
"@carbon/themes": "^11.
|
|
76
|
+
"@carbon/themes": "^11.12.0",
|
|
77
77
|
"@rollup/plugin-babel": "^5.3.0",
|
|
78
78
|
"@rollup/plugin-commonjs": "^21.0.0",
|
|
79
79
|
"@rollup/plugin-node-resolve": "^13.0.0",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"**/*.scss",
|
|
136
136
|
"**/*.css"
|
|
137
137
|
],
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "06fdbdbc9cade1f6c352024175d348f9bd107b14"
|
|
139
139
|
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-date-picker/fluid-date-picker';
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
// Code generated by @carbon/react. DO NOT EDIT.
|
|
2
|
+
//
|
|
3
|
+
// Copyright IBM Corp. 2018, 2018
|
|
4
|
+
//
|
|
5
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
|
6
|
+
// LICENSE file in the root directory of this source tree.
|
|
7
|
+
//
|
|
8
|
+
|
|
9
|
+
@forward '@carbon/styles/scss/components/fluid-date-picker';
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { StructuredListWrapper as StructuredListWrapper$1, StructuredListHead as StructuredListHead$1, StructuredListInput as StructuredListInput$1, StructuredListBody as StructuredListBody$1, StructuredListRow as StructuredListRow$1, StructuredListCell as StructuredListCell$1 } from './next/StructuredList.js';
|
|
9
|
-
import { StructuredListWrapper as StructuredListWrapper$2, StructuredListHead as StructuredListHead$2, StructuredListInput as StructuredListInput$2, StructuredListBody as StructuredListBody$2, StructuredListRow as StructuredListRow$2, StructuredListCell as StructuredListCell$2 } from './StructuredList.js';
|
|
10
|
-
import { createComponentToggle } from '../../internal/ComponentToggle.js';
|
|
11
|
-
|
|
12
|
-
var StructuredListWrapper = createComponentToggle({
|
|
13
|
-
name: 'StructuredListWrapper',
|
|
14
|
-
next: StructuredListWrapper$1,
|
|
15
|
-
classic: StructuredListWrapper$2
|
|
16
|
-
});
|
|
17
|
-
var StructuredListHead = createComponentToggle({
|
|
18
|
-
name: 'StructuredListHead',
|
|
19
|
-
next: StructuredListHead$1,
|
|
20
|
-
classic: StructuredListHead$2
|
|
21
|
-
});
|
|
22
|
-
var StructuredListInput = createComponentToggle({
|
|
23
|
-
name: 'StructuredListInput',
|
|
24
|
-
next: StructuredListInput$1,
|
|
25
|
-
classic: StructuredListInput$2
|
|
26
|
-
});
|
|
27
|
-
var StructuredListBody = createComponentToggle({
|
|
28
|
-
name: 'StructuredListBody',
|
|
29
|
-
next: StructuredListBody$1,
|
|
30
|
-
classic: StructuredListBody$2
|
|
31
|
-
});
|
|
32
|
-
var StructuredListRow = createComponentToggle({
|
|
33
|
-
name: 'StructuredListRow',
|
|
34
|
-
next: StructuredListRow$1,
|
|
35
|
-
classic: StructuredListRow$2
|
|
36
|
-
});
|
|
37
|
-
var StructuredListCell = createComponentToggle({
|
|
38
|
-
name: 'StructuredListCell',
|
|
39
|
-
next: StructuredListCell$1,
|
|
40
|
-
classic: StructuredListCell$2
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };
|
|
@@ -1,342 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, slicedToArray as _slicedToArray, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React__default, { useState } from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import cx from 'classnames';
|
|
12
|
-
import { useId } from '../../../internal/useId.js';
|
|
13
|
-
import deprecate from '../../../prop-types/deprecate.js';
|
|
14
|
-
import { usePrefix } from '../../../internal/usePrefix.js';
|
|
15
|
-
|
|
16
|
-
var _excluded = ["children", "selection", "className", "ariaLabel", "isCondensed", "isFlush"],
|
|
17
|
-
_excluded2 = ["children", "className"],
|
|
18
|
-
_excluded3 = ["children", "className"],
|
|
19
|
-
_excluded4 = ["onKeyDown", "children", "className", "head"],
|
|
20
|
-
_excluded5 = ["className", "name", "title", "id"],
|
|
21
|
-
_excluded6 = ["children", "className", "head", "noWrap"];
|
|
22
|
-
var GridSelectedRowStateContext = /*#__PURE__*/React__default.createContext(null);
|
|
23
|
-
var GridSelectedRowDispatchContext = /*#__PURE__*/React__default.createContext(null);
|
|
24
|
-
function StructuredListWrapper(props) {
|
|
25
|
-
var _classNames;
|
|
26
|
-
|
|
27
|
-
var children = props.children,
|
|
28
|
-
selection = props.selection,
|
|
29
|
-
className = props.className,
|
|
30
|
-
ariaLabel = props.ariaLabel,
|
|
31
|
-
isCondensed = props.isCondensed,
|
|
32
|
-
isFlush = props.isFlush,
|
|
33
|
-
other = _objectWithoutProperties(props, _excluded);
|
|
34
|
-
|
|
35
|
-
var prefix = usePrefix();
|
|
36
|
-
var classes = cx("".concat(prefix, "--structured-list"), className, (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--structured-list--selection"), selection), _defineProperty(_classNames, "".concat(prefix, "--structured-list--condensed"), isCondensed), _defineProperty(_classNames, "".concat(prefix, "--structured-list--flush"), isFlush), _classNames));
|
|
37
|
-
|
|
38
|
-
var _React$useState = React__default.useState(null),
|
|
39
|
-
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
40
|
-
selectedRow = _React$useState2[0],
|
|
41
|
-
setSelectedRow = _React$useState2[1];
|
|
42
|
-
|
|
43
|
-
return /*#__PURE__*/React__default.createElement(GridSelectedRowStateContext.Provider, {
|
|
44
|
-
value: selectedRow
|
|
45
|
-
}, /*#__PURE__*/React__default.createElement(GridSelectedRowDispatchContext.Provider, {
|
|
46
|
-
value: setSelectedRow
|
|
47
|
-
}, /*#__PURE__*/React__default.createElement("div", _extends({
|
|
48
|
-
role: "table",
|
|
49
|
-
className: classes
|
|
50
|
-
}, other, {
|
|
51
|
-
"aria-label": ariaLabel
|
|
52
|
-
}), children)));
|
|
53
|
-
}
|
|
54
|
-
StructuredListWrapper.propTypes = {
|
|
55
|
-
/**
|
|
56
|
-
* Specify a label to be read by screen readers on the container node
|
|
57
|
-
*/
|
|
58
|
-
ariaLabel: PropTypes.string,
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Provide the contents of your StructuredListWrapper
|
|
62
|
-
*/
|
|
63
|
-
children: PropTypes.node,
|
|
64
|
-
|
|
65
|
-
/**
|
|
66
|
-
* Specify an optional className to be applied to the container node
|
|
67
|
-
*/
|
|
68
|
-
className: PropTypes.string,
|
|
69
|
-
|
|
70
|
-
/**
|
|
71
|
-
* Specify if structured list is condensed, default is false
|
|
72
|
-
*/
|
|
73
|
-
isCondensed: PropTypes.bool,
|
|
74
|
-
|
|
75
|
-
/**
|
|
76
|
-
* Specify if structured list is flush, default is false
|
|
77
|
-
*/
|
|
78
|
-
isFlush: PropTypes.bool,
|
|
79
|
-
|
|
80
|
-
/**
|
|
81
|
-
* Specify whether your StructuredListWrapper should have selections
|
|
82
|
-
*/
|
|
83
|
-
selection: PropTypes.bool
|
|
84
|
-
};
|
|
85
|
-
StructuredListWrapper.defaultProps = {
|
|
86
|
-
selection: false,
|
|
87
|
-
isCondensed: false,
|
|
88
|
-
isFlush: false,
|
|
89
|
-
ariaLabel: 'Structured list section'
|
|
90
|
-
};
|
|
91
|
-
function StructuredListHead(props) {
|
|
92
|
-
var children = props.children,
|
|
93
|
-
className = props.className,
|
|
94
|
-
other = _objectWithoutProperties(props, _excluded2);
|
|
95
|
-
|
|
96
|
-
var prefix = usePrefix();
|
|
97
|
-
var classes = cx("".concat(prefix, "--structured-list-thead"), className);
|
|
98
|
-
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
99
|
-
role: "rowgroup",
|
|
100
|
-
className: classes
|
|
101
|
-
}, other), children);
|
|
102
|
-
}
|
|
103
|
-
StructuredListHead.propTypes = {
|
|
104
|
-
/**
|
|
105
|
-
* Provide the contents of your StructuredListHead
|
|
106
|
-
*/
|
|
107
|
-
children: PropTypes.node,
|
|
108
|
-
|
|
109
|
-
/**
|
|
110
|
-
* Specify an optional className to be applied to the node
|
|
111
|
-
*/
|
|
112
|
-
className: PropTypes.string
|
|
113
|
-
};
|
|
114
|
-
function StructuredListBody(props) {
|
|
115
|
-
var children = props.children,
|
|
116
|
-
className = props.className,
|
|
117
|
-
other = _objectWithoutProperties(props, _excluded3);
|
|
118
|
-
|
|
119
|
-
var prefix = usePrefix();
|
|
120
|
-
var classes = cx("".concat(prefix, "--structured-list-tbody"), className);
|
|
121
|
-
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
122
|
-
className: classes,
|
|
123
|
-
role: "rowgroup"
|
|
124
|
-
}, other), children);
|
|
125
|
-
}
|
|
126
|
-
StructuredListBody.propTypes = {
|
|
127
|
-
/**
|
|
128
|
-
* Provide the contents of your StructuredListBody
|
|
129
|
-
*/
|
|
130
|
-
children: PropTypes.node,
|
|
131
|
-
|
|
132
|
-
/**
|
|
133
|
-
* Specify an optional className to be applied to the container node
|
|
134
|
-
*/
|
|
135
|
-
className: PropTypes.string,
|
|
136
|
-
head: PropTypes.bool,
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* Provide a handler that is invoked on the key down event for the control
|
|
140
|
-
*/
|
|
141
|
-
onKeyDown: PropTypes.func
|
|
142
|
-
};
|
|
143
|
-
StructuredListBody.defaultProps = {
|
|
144
|
-
onKeyDown: function onKeyDown() {}
|
|
145
|
-
};
|
|
146
|
-
var GridRowContext = /*#__PURE__*/React__default.createContext(null);
|
|
147
|
-
function StructuredListRow(props) {
|
|
148
|
-
var _classNames2;
|
|
149
|
-
|
|
150
|
-
var onKeyDown = props.onKeyDown,
|
|
151
|
-
children = props.children,
|
|
152
|
-
className = props.className,
|
|
153
|
-
head = props.head,
|
|
154
|
-
other = _objectWithoutProperties(props, _excluded4);
|
|
155
|
-
|
|
156
|
-
var _useState = useState(false),
|
|
157
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
158
|
-
hasFocusWithin = _useState2[0],
|
|
159
|
-
setHasFocusWithin = _useState2[1];
|
|
160
|
-
|
|
161
|
-
var id = useId('grid-input');
|
|
162
|
-
var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
|
|
163
|
-
var prefix = usePrefix();
|
|
164
|
-
var value = {
|
|
165
|
-
id: id
|
|
166
|
-
};
|
|
167
|
-
var classes = cx("".concat(prefix, "--structured-list-row"), className, (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--header-row"), head), _defineProperty(_classNames2, "".concat(prefix, "--structured-list-row--focused-within"), hasFocusWithin), _classNames2));
|
|
168
|
-
return head ? /*#__PURE__*/React__default.createElement("div", _extends({
|
|
169
|
-
role: "row"
|
|
170
|
-
}, other, {
|
|
171
|
-
className: classes
|
|
172
|
-
}), children) :
|
|
173
|
-
/*#__PURE__*/
|
|
174
|
-
// eslint-disable-next-line jsx-a11y/interactive-supports-focus
|
|
175
|
-
React__default.createElement("div", _extends({}, other, {
|
|
176
|
-
role: "row",
|
|
177
|
-
className: classes,
|
|
178
|
-
onClick: function onClick() {
|
|
179
|
-
return setSelectedRow(id);
|
|
180
|
-
},
|
|
181
|
-
onFocus: function onFocus() {
|
|
182
|
-
setHasFocusWithin(true);
|
|
183
|
-
},
|
|
184
|
-
onBlur: function onBlur() {
|
|
185
|
-
setHasFocusWithin(false);
|
|
186
|
-
},
|
|
187
|
-
onKeyDown: onKeyDown
|
|
188
|
-
}), /*#__PURE__*/React__default.createElement(GridRowContext.Provider, {
|
|
189
|
-
value: value
|
|
190
|
-
}, children));
|
|
191
|
-
}
|
|
192
|
-
StructuredListRow.propTypes = {
|
|
193
|
-
/**
|
|
194
|
-
* Provide the contents of your StructuredListRow
|
|
195
|
-
*/
|
|
196
|
-
children: PropTypes.node,
|
|
197
|
-
|
|
198
|
-
/**
|
|
199
|
-
* Specify an optional className to be applied to the container node
|
|
200
|
-
*/
|
|
201
|
-
className: PropTypes.string,
|
|
202
|
-
|
|
203
|
-
/**
|
|
204
|
-
* Specify whether your StructuredListRow should be used as a header row
|
|
205
|
-
*/
|
|
206
|
-
head: PropTypes.bool,
|
|
207
|
-
|
|
208
|
-
/**
|
|
209
|
-
* Specify whether a `<label>` should be used
|
|
210
|
-
*/
|
|
211
|
-
label: deprecate(PropTypes.bool, "\nThe `label` prop is no longer needed and will be removed in the next major version of Carbon."),
|
|
212
|
-
|
|
213
|
-
/**
|
|
214
|
-
* Provide a handler that is invoked on the key down event for the control,
|
|
215
|
-
*/
|
|
216
|
-
onKeyDown: PropTypes.func
|
|
217
|
-
};
|
|
218
|
-
StructuredListRow.defaultProps = {
|
|
219
|
-
head: false,
|
|
220
|
-
onKeyDown: function onKeyDown() {}
|
|
221
|
-
};
|
|
222
|
-
function StructuredListInput(props) {
|
|
223
|
-
var _row$id;
|
|
224
|
-
|
|
225
|
-
var defaultId = useId('structureListInput');
|
|
226
|
-
|
|
227
|
-
var className = props.className,
|
|
228
|
-
_props$name = props.name,
|
|
229
|
-
name = _props$name === void 0 ? "structured-list-input-".concat(defaultId) : _props$name,
|
|
230
|
-
title = props.title,
|
|
231
|
-
id = props.id,
|
|
232
|
-
other = _objectWithoutProperties(props, _excluded5);
|
|
233
|
-
|
|
234
|
-
var prefix = usePrefix();
|
|
235
|
-
var classes = cx("".concat(prefix, "--structured-list-input"), "".concat(prefix, "--visually-hidden"), className);
|
|
236
|
-
var row = React__default.useContext(GridRowContext);
|
|
237
|
-
var selectedRow = React__default.useContext(GridSelectedRowStateContext);
|
|
238
|
-
var setSelectedRow = React__default.useContext(GridSelectedRowDispatchContext);
|
|
239
|
-
return /*#__PURE__*/React__default.createElement("input", _extends({}, other, {
|
|
240
|
-
type: "radio",
|
|
241
|
-
tabIndex: 0,
|
|
242
|
-
checked: row && row.id === selectedRow,
|
|
243
|
-
value: (_row$id = row === null || row === void 0 ? void 0 : row.id) !== null && _row$id !== void 0 ? _row$id : '',
|
|
244
|
-
onChange: function onChange(event) {
|
|
245
|
-
setSelectedRow(event.target.value);
|
|
246
|
-
},
|
|
247
|
-
id: id !== null && id !== void 0 ? id : defaultId,
|
|
248
|
-
className: classes,
|
|
249
|
-
name: name,
|
|
250
|
-
title: title
|
|
251
|
-
}));
|
|
252
|
-
}
|
|
253
|
-
StructuredListInput.propTypes = {
|
|
254
|
-
/**
|
|
255
|
-
* Specify an optional className to be applied to the input
|
|
256
|
-
*/
|
|
257
|
-
className: PropTypes.string,
|
|
258
|
-
|
|
259
|
-
/**
|
|
260
|
-
* Specify whether the underlying input should be checked by default
|
|
261
|
-
*/
|
|
262
|
-
defaultChecked: deprecate(PropTypes.bool, "\nThe prop `defaultChecked` is no longer needed and will be removed in the next major version of Carbon."),
|
|
263
|
-
|
|
264
|
-
/**
|
|
265
|
-
* Specify a custom `id` for the input
|
|
266
|
-
*/
|
|
267
|
-
id: PropTypes.string,
|
|
268
|
-
|
|
269
|
-
/**
|
|
270
|
-
* Provide a `name` for the input
|
|
271
|
-
*/
|
|
272
|
-
name: PropTypes.string,
|
|
273
|
-
|
|
274
|
-
/**
|
|
275
|
-
* Provide an optional hook that is called each time the input is updated
|
|
276
|
-
*/
|
|
277
|
-
onChange: deprecate(PropTypes.func, "\nThe prop `onChange` will be removed in the next major version of Carbon."),
|
|
278
|
-
|
|
279
|
-
/**
|
|
280
|
-
* Provide a `title` for the input
|
|
281
|
-
*/
|
|
282
|
-
title: PropTypes.string,
|
|
283
|
-
|
|
284
|
-
/**
|
|
285
|
-
* Specify the value of the input
|
|
286
|
-
*/
|
|
287
|
-
value: deprecate(PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, "\nThe prop `value` will be removed in the next major version of Carbon.")
|
|
288
|
-
};
|
|
289
|
-
StructuredListInput.defaultProps = {
|
|
290
|
-
title: 'title'
|
|
291
|
-
};
|
|
292
|
-
function StructuredListCell(props) {
|
|
293
|
-
var _classNames3;
|
|
294
|
-
|
|
295
|
-
var children = props.children,
|
|
296
|
-
className = props.className,
|
|
297
|
-
head = props.head,
|
|
298
|
-
noWrap = props.noWrap,
|
|
299
|
-
other = _objectWithoutProperties(props, _excluded6);
|
|
300
|
-
|
|
301
|
-
var prefix = usePrefix();
|
|
302
|
-
var classes = cx(className, (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefix, "--structured-list-th"), head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-td"), !head), _defineProperty(_classNames3, "".concat(prefix, "--structured-list-content--nowrap"), noWrap), _classNames3));
|
|
303
|
-
|
|
304
|
-
if (head) {
|
|
305
|
-
return /*#__PURE__*/React__default.createElement("span", _extends({
|
|
306
|
-
className: classes,
|
|
307
|
-
role: "columnheader"
|
|
308
|
-
}, other), children);
|
|
309
|
-
}
|
|
310
|
-
|
|
311
|
-
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
312
|
-
className: classes,
|
|
313
|
-
role: "cell"
|
|
314
|
-
}, other), children);
|
|
315
|
-
}
|
|
316
|
-
StructuredListCell.propTypes = {
|
|
317
|
-
/**
|
|
318
|
-
* Provide the contents of your StructuredListCell
|
|
319
|
-
*/
|
|
320
|
-
children: PropTypes.node,
|
|
321
|
-
|
|
322
|
-
/**
|
|
323
|
-
* Specify an optional className to be applied to the container node
|
|
324
|
-
*/
|
|
325
|
-
className: PropTypes.string,
|
|
326
|
-
|
|
327
|
-
/**
|
|
328
|
-
* Specify whether your StructuredListCell should be used as a header cell
|
|
329
|
-
*/
|
|
330
|
-
head: PropTypes.bool,
|
|
331
|
-
|
|
332
|
-
/**
|
|
333
|
-
* Specify whether your StructuredListCell should have text wrapping
|
|
334
|
-
*/
|
|
335
|
-
noWrap: PropTypes.bool
|
|
336
|
-
};
|
|
337
|
-
StructuredListCell.defaultProps = {
|
|
338
|
-
head: false,
|
|
339
|
-
noWrap: false
|
|
340
|
-
};
|
|
341
|
-
|
|
342
|
-
export { StructuredListBody, StructuredListCell, StructuredListHead, StructuredListInput, StructuredListRow, StructuredListWrapper };
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright IBM Corp. 2016, 2022
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the Apache-2.0 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*/
|
|
7
|
-
|
|
8
|
-
import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React__default from 'react';
|
|
10
|
-
import { useFeatureFlag } from '../components/FeatureFlags/index.js';
|
|
11
|
-
|
|
12
|
-
function createComponentToggle(spec) {
|
|
13
|
-
var name = spec.name,
|
|
14
|
-
_spec$flag = spec.flag,
|
|
15
|
-
flag = _spec$flag === void 0 ? 'enable-v11-release' : _spec$flag,
|
|
16
|
-
next = spec.next,
|
|
17
|
-
classic = spec.classic;
|
|
18
|
-
|
|
19
|
-
function ComponentToggle(props, ref) {
|
|
20
|
-
var enabled = useFeatureFlag(flag);
|
|
21
|
-
|
|
22
|
-
if (enabled) {
|
|
23
|
-
if (next) {
|
|
24
|
-
return /*#__PURE__*/React__default.createElement(next, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
25
|
-
ref: ref
|
|
26
|
-
}));
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
return /*#__PURE__*/React__default.createElement(classic, _objectSpread2(_objectSpread2({}, props), {}, {
|
|
33
|
-
ref: ref
|
|
34
|
-
}));
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
var wrappedComponent = /*#__PURE__*/React__default.forwardRef(ComponentToggle);
|
|
38
|
-
wrappedComponent.displayName = "FeatureToggle(".concat(name, ")");
|
|
39
|
-
return wrappedComponent;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export { createComponentToggle };
|