@carbon/react 1.17.0-rc.2 → 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 +10 -2
- package/es/components/FluidDatePicker/FluidDatePicker.Skeleton.js +67 -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/index.js +2 -1
- package/es/internal/FloatingMenu.js +3 -1
- package/lib/components/DatePicker/DatePicker.js +9 -1
- package/lib/components/FluidDatePicker/FluidDatePicker.Skeleton.js +77 -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/index.js +39 -37
- package/lib/internal/FloatingMenu.js +3 -1
- package/package.json +5 -5
- 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');
|
|
@@ -280,12 +281,6 @@ exports.SelectItem = SelectItem["default"];
|
|
|
280
281
|
exports.SelectItemGroup = SelectItemGroup["default"];
|
|
281
282
|
exports.Switch = Switch["default"];
|
|
282
283
|
exports.Slider = index$4["default"];
|
|
283
|
-
exports.StructuredListBody = index$b.StructuredListBody;
|
|
284
|
-
exports.StructuredListCell = index$b.StructuredListCell;
|
|
285
|
-
exports.StructuredListHead = index$b.StructuredListHead;
|
|
286
|
-
exports.StructuredListInput = index$b.StructuredListInput;
|
|
287
|
-
exports.StructuredListRow = index$b.StructuredListRow;
|
|
288
|
-
exports.StructuredListWrapper = index$b.StructuredListWrapper;
|
|
289
284
|
exports.Tab = index$5["default"];
|
|
290
285
|
exports.TabContent = TabContent["default"];
|
|
291
286
|
exports.IconTab = Tabs.IconTab;
|
|
@@ -304,11 +299,11 @@ exports.TimePicker = index$7["default"];
|
|
|
304
299
|
exports.TimePickerSelect = index$8["default"];
|
|
305
300
|
exports.ToggleSkeleton = Toggle_Skeleton["default"];
|
|
306
301
|
exports.Toggle = Toggle.Toggle;
|
|
307
|
-
exports.Toggletip = index$
|
|
308
|
-
exports.ToggletipActions = index$
|
|
309
|
-
exports.ToggletipButton = index$
|
|
310
|
-
exports.ToggletipContent = index$
|
|
311
|
-
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;
|
|
312
307
|
exports.UnorderedList = UnorderedList["default"];
|
|
313
308
|
exports.SkeletonText = SkeletonText["default"];
|
|
314
309
|
exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
|
|
@@ -321,23 +316,23 @@ exports.SliderSkeleton = Slider_Skeleton["default"];
|
|
|
321
316
|
exports.TextInputSkeleton = TextInput_Skeleton["default"];
|
|
322
317
|
exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
|
|
323
318
|
exports.IconSkeleton = Icon_Skeleton["default"];
|
|
324
|
-
exports.unstable_FeatureFlags = index$
|
|
325
|
-
exports.unstable_useFeatureFlag = index$
|
|
326
|
-
exports.unstable_useFeatureFlags = index$
|
|
327
|
-
exports.Heading = index$
|
|
328
|
-
exports.Section = index$
|
|
329
|
-
exports.IconButton = index$
|
|
330
|
-
exports.Layer = index$
|
|
331
|
-
exports.useLayer = index$
|
|
332
|
-
exports.unstable_OverflowMenuV2 = index$
|
|
333
|
-
exports.Popover = index$
|
|
334
|
-
exports.PopoverContent = index$
|
|
335
|
-
exports.HStack = index$
|
|
336
|
-
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;
|
|
337
332
|
exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
|
|
338
|
-
exports.GlobalTheme = index$
|
|
339
|
-
exports.Theme = index$
|
|
340
|
-
exports.useTheme = index$
|
|
333
|
+
exports.GlobalTheme = index$j.GlobalTheme;
|
|
334
|
+
exports.Theme = index$j.Theme;
|
|
335
|
+
exports.useTheme = index$j.useTheme;
|
|
341
336
|
exports.usePrefix = usePrefix.usePrefix;
|
|
342
337
|
exports.AspectRatio = AspectRatio["default"];
|
|
343
338
|
exports.ContainedListItem = ContainedListItem["default"];
|
|
@@ -354,6 +349,7 @@ exports.SideNavIcon = SideNavIcon["default"];
|
|
|
354
349
|
exports.SideNavItem = SideNavItem["default"];
|
|
355
350
|
exports.SideNavLinkText = SideNavLinkText["default"];
|
|
356
351
|
exports.unstable_useContextMenu = useContextMenu["default"];
|
|
352
|
+
exports.unstable__FluidDatePickerSkeleton = FluidDatePicker_Skeleton["default"];
|
|
357
353
|
exports.unstable__FluidTextArea = FluidTextArea["default"];
|
|
358
354
|
exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
|
|
359
355
|
exports.unstable__FluidTextInput = FluidTextInput["default"];
|
|
@@ -413,6 +409,12 @@ exports.ControlledPasswordInput = ControlledPasswordInput["default"];
|
|
|
413
409
|
exports.PasswordInput = PasswordInput["default"];
|
|
414
410
|
exports.ProgressIndicator = ProgressIndicator.ProgressIndicator;
|
|
415
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;
|
|
416
418
|
exports.StructuredListSkeleton = StructuredList_Skeleton["default"];
|
|
417
419
|
exports.ClickableTile = Tile.ClickableTile;
|
|
418
420
|
exports.ExpandableTile = Tile.ExpandableTile;
|
|
@@ -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
|
}
|
|
@@ -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 };
|
|
@@ -1,52 +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
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
|
-
var StructuredList = require('./next/StructuredList.js');
|
|
13
|
-
var StructuredList$1 = require('./StructuredList.js');
|
|
14
|
-
var ComponentToggle = require('../../internal/ComponentToggle.js');
|
|
15
|
-
|
|
16
|
-
var StructuredListWrapper = ComponentToggle.createComponentToggle({
|
|
17
|
-
name: 'StructuredListWrapper',
|
|
18
|
-
next: StructuredList.StructuredListWrapper,
|
|
19
|
-
classic: StructuredList$1.StructuredListWrapper
|
|
20
|
-
});
|
|
21
|
-
var StructuredListHead = ComponentToggle.createComponentToggle({
|
|
22
|
-
name: 'StructuredListHead',
|
|
23
|
-
next: StructuredList.StructuredListHead,
|
|
24
|
-
classic: StructuredList$1.StructuredListHead
|
|
25
|
-
});
|
|
26
|
-
var StructuredListInput = ComponentToggle.createComponentToggle({
|
|
27
|
-
name: 'StructuredListInput',
|
|
28
|
-
next: StructuredList.StructuredListInput,
|
|
29
|
-
classic: StructuredList$1.StructuredListInput
|
|
30
|
-
});
|
|
31
|
-
var StructuredListBody = ComponentToggle.createComponentToggle({
|
|
32
|
-
name: 'StructuredListBody',
|
|
33
|
-
next: StructuredList.StructuredListBody,
|
|
34
|
-
classic: StructuredList$1.StructuredListBody
|
|
35
|
-
});
|
|
36
|
-
var StructuredListRow = ComponentToggle.createComponentToggle({
|
|
37
|
-
name: 'StructuredListRow',
|
|
38
|
-
next: StructuredList.StructuredListRow,
|
|
39
|
-
classic: StructuredList$1.StructuredListRow
|
|
40
|
-
});
|
|
41
|
-
var StructuredListCell = ComponentToggle.createComponentToggle({
|
|
42
|
-
name: 'StructuredListCell',
|
|
43
|
-
next: StructuredList.StructuredListCell,
|
|
44
|
-
classic: StructuredList$1.StructuredListCell
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
exports.StructuredListBody = StructuredListBody;
|
|
48
|
-
exports.StructuredListCell = StructuredListCell;
|
|
49
|
-
exports.StructuredListHead = StructuredListHead;
|
|
50
|
-
exports.StructuredListInput = StructuredListInput;
|
|
51
|
-
exports.StructuredListRow = StructuredListRow;
|
|
52
|
-
exports.StructuredListWrapper = StructuredListWrapper;
|