@carbon/react 1.5.0 → 1.6.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/es/components/ComposedModal/ComposedModal.js +2 -1
- package/es/components/ComposedModal/next/ComposedModal.js +2 -1
- package/es/components/DatePicker/DatePicker.js +14 -5
- package/es/components/FileUploader/FileUploader.js +1 -1
- package/es/components/FileUploader/FileUploaderButton.js +1 -1
- package/es/components/FileUploader/Filename.js +1 -1
- package/es/components/Link/Link.js +6 -3
- package/es/components/ListBox/ListBoxPropTypes.js +1 -2
- package/es/components/ListBox/ListBoxSelection.js +3 -4
- package/es/components/RadioButton/next/RadioButton.js +2 -1
- package/es/components/Tabs/next/Tabs.js +42 -4
- package/es/components/Toggle/Toggle.js +147 -109
- package/es/components/UIShell/SideNav.js +3 -3
- package/es/index.js +3 -2
- package/lib/components/ComposedModal/ComposedModal.js +2 -1
- package/lib/components/ComposedModal/next/ComposedModal.js +2 -1
- package/lib/components/DatePicker/DatePicker.js +14 -5
- package/lib/components/FileUploader/FileUploader.js +1 -1
- package/lib/components/FileUploader/FileUploaderButton.js +1 -1
- package/lib/components/FileUploader/Filename.js +1 -1
- package/lib/components/Link/Link.js +6 -3
- package/lib/components/ListBox/ListBoxPropTypes.js +1 -21
- package/lib/components/ListBox/ListBoxSelection.js +3 -4
- package/lib/components/RadioButton/next/RadioButton.js +2 -1
- package/lib/components/Tabs/next/Tabs.js +42 -4
- package/lib/components/Toggle/Toggle.js +146 -107
- package/lib/components/UIShell/SideNav.js +3 -3
- package/lib/index.js +70 -68
- package/package.json +3 -3
- package/es/components/Toggle/index.js +0 -19
- package/es/components/Toggle/next/Toggle.js +0 -158
- package/lib/components/Toggle/index.js +0 -23
- package/lib/components/Toggle/next/Toggle.js +0 -169
package/lib/index.js
CHANGED
|
@@ -18,16 +18,16 @@ var Button = require('./components/Button/Button.js');
|
|
|
18
18
|
var ButtonSet = require('./components/ButtonSet/ButtonSet.js');
|
|
19
19
|
var Checkbox_Skeleton = require('./components/Checkbox/Checkbox.Skeleton.js');
|
|
20
20
|
var Checkbox = require('./components/Checkbox/Checkbox.js');
|
|
21
|
-
var index$
|
|
21
|
+
var index$f = require('./components/ClassPrefix/index.js');
|
|
22
22
|
var CodeSnippet_Skeleton = require('./components/CodeSnippet/CodeSnippet.Skeleton.js');
|
|
23
23
|
var CodeSnippet = require('./components/CodeSnippet/CodeSnippet.js');
|
|
24
24
|
var ComboBox = require('./components/ComboBox/ComboBox.js');
|
|
25
|
-
var index$
|
|
25
|
+
var index$g = require('./components/ComposedModal/index.js');
|
|
26
26
|
var index = require('./components/ContentSwitcher/index.js');
|
|
27
27
|
var Copy = require('./components/Copy/Copy.js');
|
|
28
28
|
var CopyButton = require('./components/CopyButton/CopyButton.js');
|
|
29
29
|
var DangerButton = require('./components/DangerButton/DangerButton.js');
|
|
30
|
-
var index$
|
|
30
|
+
var index$h = require('./components/DataTable/index.js');
|
|
31
31
|
var DatePicker_Skeleton = require('./components/DatePicker/DatePicker.Skeleton.js');
|
|
32
32
|
var DatePicker = require('./components/DatePicker/DatePicker.js');
|
|
33
33
|
var DatePickerInput = require('./components/DatePickerInput/DatePickerInput.js');
|
|
@@ -45,8 +45,8 @@ var ListItem = require('./components/ListItem/ListItem.js');
|
|
|
45
45
|
var Loading = require('./components/Loading/Loading.js');
|
|
46
46
|
var index$2 = require('./components/Modal/index.js');
|
|
47
47
|
var ModalWrapper = require('./components/ModalWrapper/ModalWrapper.js');
|
|
48
|
-
var index$
|
|
49
|
-
var index$
|
|
48
|
+
var index$i = require('./components/MultiSelect/index.js');
|
|
49
|
+
var index$j = require('./components/Notification/index.js');
|
|
50
50
|
var NumberInput_Skeleton = require('./components/NumberInput/NumberInput.Skeleton.js');
|
|
51
51
|
var NumberInput = require('./components/NumberInput/NumberInput.js');
|
|
52
52
|
var OrderedList = require('./components/OrderedList/OrderedList.js');
|
|
@@ -55,7 +55,7 @@ var index$4 = require('./components/OverflowMenuItem/index.js');
|
|
|
55
55
|
var index$5 = require('./components/Pagination/index.js');
|
|
56
56
|
var PaginationNav = require('./components/PaginationNav/PaginationNav.js');
|
|
57
57
|
var PrimaryButton = require('./components/PrimaryButton/PrimaryButton.js');
|
|
58
|
-
var index$
|
|
58
|
+
var index$k = require('./components/ProgressIndicator/index.js');
|
|
59
59
|
var index$6 = require('./components/RadioButton/index.js');
|
|
60
60
|
var index$7 = require('./components/RadioButtonGroup/index.js');
|
|
61
61
|
var index$8 = require('./components/Search/index.js');
|
|
@@ -69,7 +69,7 @@ var SelectItem = require('./components/SelectItem/SelectItem.js');
|
|
|
69
69
|
var SelectItemGroup = require('./components/SelectItemGroup/SelectItemGroup.js');
|
|
70
70
|
var Switch = require('./components/Switch/Switch.js');
|
|
71
71
|
var index$9 = require('./components/Slider/index.js');
|
|
72
|
-
var index$
|
|
72
|
+
var index$l = require('./components/StructuredList/index.js');
|
|
73
73
|
var index$a = require('./components/Tab/index.js');
|
|
74
74
|
var TabContent = require('./components/TabContent/TabContent.js');
|
|
75
75
|
var index$b = require('./components/Tabs/index.js');
|
|
@@ -78,13 +78,14 @@ var Tag = require('./components/Tag/Tag.js');
|
|
|
78
78
|
var TextArea_Skeleton = require('./components/TextArea/TextArea.Skeleton.js');
|
|
79
79
|
var TextArea = require('./components/TextArea/TextArea.js');
|
|
80
80
|
require('./components/TextInput/index.js');
|
|
81
|
-
var index$
|
|
81
|
+
var index$m = require('./components/Tile/index.js');
|
|
82
82
|
var RadioTile = require('./components/RadioTile/RadioTile.js');
|
|
83
83
|
var index$c = require('./components/TileGroup/index.js');
|
|
84
84
|
var index$d = require('./components/TimePicker/index.js');
|
|
85
85
|
var index$e = require('./components/TimePickerSelect/index.js');
|
|
86
|
-
var
|
|
87
|
-
var
|
|
86
|
+
var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
|
|
87
|
+
var Toggle = require('./components/Toggle/Toggle.js');
|
|
88
|
+
var index$n = require('./components/Toggletip/index.js');
|
|
88
89
|
var UnorderedList = require('./components/UnorderedList/UnorderedList.js');
|
|
89
90
|
var SkeletonText = require('./components/SkeletonText/SkeletonText.js');
|
|
90
91
|
var SkeletonPlaceholder = require('./components/SkeletonPlaceholder/SkeletonPlaceholder.js');
|
|
@@ -99,21 +100,21 @@ var Search_Skeleton = require('./components/Search/Search.Skeleton.js');
|
|
|
99
100
|
var Slider_Skeleton = require('./components/Slider/Slider.Skeleton.js');
|
|
100
101
|
var Tabs_Skeleton = require('./components/Tabs/Tabs.Skeleton.js');
|
|
101
102
|
var TextInput_Skeleton = require('./components/TextInput/TextInput.Skeleton.js');
|
|
102
|
-
var Toggle_Skeleton = require('./components/Toggle/Toggle.Skeleton.js');
|
|
103
103
|
var ToggleSmall_Skeleton = require('./components/ToggleSmall/ToggleSmall.Skeleton.js');
|
|
104
104
|
var Icon_Skeleton = require('./components/Icon/Icon.Skeleton.js');
|
|
105
|
-
var index$
|
|
106
|
-
var index$
|
|
107
|
-
var index$
|
|
108
|
-
var index$
|
|
109
|
-
var index$
|
|
105
|
+
var index$o = require('./components/UIShell/index.js');
|
|
106
|
+
var index$p = require('./components/FeatureFlags/index.js');
|
|
107
|
+
var index$q = require('./components/Heading/index.js');
|
|
108
|
+
var index$r = require('./components/IconButton/index.js');
|
|
109
|
+
var index$s = require('./components/Layer/index.js');
|
|
110
110
|
require('./components/Menu/index.js');
|
|
111
|
-
var index$
|
|
112
|
-
var index$
|
|
113
|
-
var index$
|
|
111
|
+
var index$t = require('./components/OverflowMenuV2/index.js');
|
|
112
|
+
var index$u = require('./components/Popover/index.js');
|
|
113
|
+
var index$v = require('./components/Stack/index.js');
|
|
114
114
|
var DefinitionTooltip = require('./components/Tooltip/next/DefinitionTooltip.js');
|
|
115
115
|
require('./components/TreeView/index.js');
|
|
116
|
-
var index$
|
|
116
|
+
var index$w = require('./components/Theme/index.js');
|
|
117
|
+
var usePrefix = require('./internal/usePrefix.js');
|
|
117
118
|
var AspectRatio = require('./components/AspectRatio/AspectRatio.js');
|
|
118
119
|
var Filename = require('./components/FileUploader/Filename.js');
|
|
119
120
|
var FileUploaderButton = require('./components/FileUploader/FileUploaderButton.js');
|
|
@@ -208,17 +209,17 @@ exports.Button = Button["default"];
|
|
|
208
209
|
exports.ButtonSet = ButtonSet["default"];
|
|
209
210
|
exports.CheckboxSkeleton = Checkbox_Skeleton["default"];
|
|
210
211
|
exports.Checkbox = Checkbox["default"];
|
|
211
|
-
exports.ClassPrefix = index$
|
|
212
|
+
exports.ClassPrefix = index$f.ClassPrefix;
|
|
212
213
|
exports.CodeSnippetSkeleton = CodeSnippet_Skeleton["default"];
|
|
213
214
|
exports.CodeSnippet = CodeSnippet["default"];
|
|
214
215
|
exports.ComboBox = ComboBox["default"];
|
|
215
|
-
exports.ModalFooter = index$
|
|
216
|
-
exports.ModalHeader = index$
|
|
216
|
+
exports.ModalFooter = index$g.ModalFooter;
|
|
217
|
+
exports.ModalHeader = index$g.ModalHeader;
|
|
217
218
|
exports.ContentSwitcher = index["default"];
|
|
218
219
|
exports.Copy = Copy["default"];
|
|
219
220
|
exports.CopyButton = CopyButton["default"];
|
|
220
221
|
exports.DangerButton = DangerButton["default"];
|
|
221
|
-
exports.DataTable = index$
|
|
222
|
+
exports.DataTable = index$h["default"];
|
|
222
223
|
exports.DatePickerSkeleton = DatePicker_Skeleton["default"];
|
|
223
224
|
exports.DatePicker = DatePicker["default"];
|
|
224
225
|
exports.DatePickerInput = DatePickerInput["default"];
|
|
@@ -236,13 +237,13 @@ exports.ListItem = ListItem["default"];
|
|
|
236
237
|
exports.Loading = Loading["default"];
|
|
237
238
|
exports.Modal = index$2["default"];
|
|
238
239
|
exports.ModalWrapper = ModalWrapper["default"];
|
|
239
|
-
exports.FilterableMultiSelect = index$
|
|
240
|
-
exports.ActionableNotification = index$
|
|
241
|
-
exports.InlineNotification = index$
|
|
242
|
-
exports.NotificationActionButton = index$
|
|
243
|
-
exports.NotificationButton = index$
|
|
244
|
-
exports.NotificationTextDetails = index$
|
|
245
|
-
exports.ToastNotification = index$
|
|
240
|
+
exports.FilterableMultiSelect = index$i.FilterableMultiSelect;
|
|
241
|
+
exports.ActionableNotification = index$j.ActionableNotification;
|
|
242
|
+
exports.InlineNotification = index$j.InlineNotification;
|
|
243
|
+
exports.NotificationActionButton = index$j.NotificationActionButton;
|
|
244
|
+
exports.NotificationButton = index$j.NotificationButton;
|
|
245
|
+
exports.NotificationTextDetails = index$j.NotificationTextDetails;
|
|
246
|
+
exports.ToastNotification = index$j.ToastNotification;
|
|
246
247
|
exports.NumberInputSkeleton = NumberInput_Skeleton["default"];
|
|
247
248
|
exports.NumberInput = NumberInput["default"];
|
|
248
249
|
exports.OrderedList = OrderedList["default"];
|
|
@@ -251,7 +252,7 @@ exports.OverflowMenuItem = index$4["default"];
|
|
|
251
252
|
exports.Pagination = index$5["default"];
|
|
252
253
|
exports.PaginationNav = PaginationNav["default"];
|
|
253
254
|
exports.PrimaryButton = PrimaryButton["default"];
|
|
254
|
-
exports.ProgressIndicator = index$
|
|
255
|
+
exports.ProgressIndicator = index$k.ProgressIndicator;
|
|
255
256
|
exports.RadioButton = index$6["default"];
|
|
256
257
|
exports.RadioButtonGroup = index$7["default"];
|
|
257
258
|
exports.Search = index$8["default"];
|
|
@@ -265,12 +266,12 @@ exports.SelectItem = SelectItem["default"];
|
|
|
265
266
|
exports.SelectItemGroup = SelectItemGroup["default"];
|
|
266
267
|
exports.Switch = Switch["default"];
|
|
267
268
|
exports.Slider = index$9["default"];
|
|
268
|
-
exports.StructuredListBody = index$
|
|
269
|
-
exports.StructuredListCell = index$
|
|
270
|
-
exports.StructuredListHead = index$
|
|
271
|
-
exports.StructuredListInput = index$
|
|
272
|
-
exports.StructuredListRow = index$
|
|
273
|
-
exports.StructuredListWrapper = index$
|
|
269
|
+
exports.StructuredListBody = index$l.StructuredListBody;
|
|
270
|
+
exports.StructuredListCell = index$l.StructuredListCell;
|
|
271
|
+
exports.StructuredListHead = index$l.StructuredListHead;
|
|
272
|
+
exports.StructuredListInput = index$l.StructuredListInput;
|
|
273
|
+
exports.StructuredListRow = index$l.StructuredListRow;
|
|
274
|
+
exports.StructuredListWrapper = index$l.StructuredListWrapper;
|
|
274
275
|
exports.Tab = index$a["default"];
|
|
275
276
|
exports.TabContent = TabContent["default"];
|
|
276
277
|
exports.Tabs = index$b["default"];
|
|
@@ -278,22 +279,23 @@ exports.TagSkeleton = Tag_Skeleton["default"];
|
|
|
278
279
|
exports.Tag = Tag["default"];
|
|
279
280
|
exports.TextAreaSkeleton = TextArea_Skeleton["default"];
|
|
280
281
|
exports.TextArea = TextArea["default"];
|
|
281
|
-
exports.ClickableTile = index$
|
|
282
|
-
exports.ExpandableTile = index$
|
|
283
|
-
exports.SelectableTile = index$
|
|
284
|
-
exports.Tile = index$
|
|
285
|
-
exports.TileAboveTheFoldContent = index$
|
|
286
|
-
exports.TileBelowTheFoldContent = index$
|
|
282
|
+
exports.ClickableTile = index$m.ClickableTile;
|
|
283
|
+
exports.ExpandableTile = index$m.ExpandableTile;
|
|
284
|
+
exports.SelectableTile = index$m.SelectableTile;
|
|
285
|
+
exports.Tile = index$m.Tile;
|
|
286
|
+
exports.TileAboveTheFoldContent = index$m.TileAboveTheFoldContent;
|
|
287
|
+
exports.TileBelowTheFoldContent = index$m.TileBelowTheFoldContent;
|
|
287
288
|
exports.RadioTile = RadioTile["default"];
|
|
288
289
|
exports.TileGroup = index$c["default"];
|
|
289
290
|
exports.TimePicker = index$d["default"];
|
|
290
291
|
exports.TimePickerSelect = index$e["default"];
|
|
291
|
-
exports.
|
|
292
|
-
exports.
|
|
293
|
-
exports.
|
|
294
|
-
exports.
|
|
295
|
-
exports.
|
|
296
|
-
exports.
|
|
292
|
+
exports.ToggleSkeleton = Toggle_Skeleton["default"];
|
|
293
|
+
exports.Toggle = Toggle.Toggle;
|
|
294
|
+
exports.Toggletip = index$n.Toggletip;
|
|
295
|
+
exports.ToggletipActions = index$n.ToggletipActions;
|
|
296
|
+
exports.ToggletipButton = index$n.ToggletipButton;
|
|
297
|
+
exports.ToggletipContent = index$n.ToggletipContent;
|
|
298
|
+
exports.ToggletipLabel = index$n.ToggletipLabel;
|
|
297
299
|
exports.UnorderedList = UnorderedList["default"];
|
|
298
300
|
exports.SkeletonText = SkeletonText["default"];
|
|
299
301
|
exports.SkeletonPlaceholder = SkeletonPlaceholder["default"];
|
|
@@ -308,27 +310,27 @@ exports.SearchSkeleton = Search_Skeleton["default"];
|
|
|
308
310
|
exports.SliderSkeleton = Slider_Skeleton["default"];
|
|
309
311
|
exports.TabsSkeleton = Tabs_Skeleton["default"];
|
|
310
312
|
exports.TextInputSkeleton = TextInput_Skeleton["default"];
|
|
311
|
-
exports.ToggleSkeleton = Toggle_Skeleton["default"];
|
|
312
313
|
exports.ToggleSmallSkeleton = ToggleSmall_Skeleton["default"];
|
|
313
314
|
exports.IconSkeleton = Icon_Skeleton["default"];
|
|
314
|
-
exports.HeaderNavigation = index$
|
|
315
|
-
exports.SideNavMenu = index$
|
|
316
|
-
exports.unstable_FeatureFlags = index$
|
|
317
|
-
exports.unstable_useFeatureFlag = index$
|
|
318
|
-
exports.unstable_useFeatureFlags = index$
|
|
319
|
-
exports.Heading = index$
|
|
320
|
-
exports.Section = index$
|
|
321
|
-
exports.IconButton = index$
|
|
322
|
-
exports.Layer = index$
|
|
323
|
-
exports.unstable_OverflowMenuV2 = index$
|
|
324
|
-
exports.Popover = index$
|
|
325
|
-
exports.PopoverContent = index$
|
|
326
|
-
exports.HStack = index$
|
|
327
|
-
exports.VStack = index$
|
|
315
|
+
exports.HeaderNavigation = index$o.HeaderNavigation;
|
|
316
|
+
exports.SideNavMenu = index$o.SideNavMenu;
|
|
317
|
+
exports.unstable_FeatureFlags = index$p.FeatureFlags;
|
|
318
|
+
exports.unstable_useFeatureFlag = index$p.useFeatureFlag;
|
|
319
|
+
exports.unstable_useFeatureFlags = index$p.useFeatureFlags;
|
|
320
|
+
exports.Heading = index$q.Heading;
|
|
321
|
+
exports.Section = index$q.Section;
|
|
322
|
+
exports.IconButton = index$r.IconButton;
|
|
323
|
+
exports.Layer = index$s.Layer;
|
|
324
|
+
exports.unstable_OverflowMenuV2 = index$t.OverflowMenuV2;
|
|
325
|
+
exports.Popover = index$u.Popover;
|
|
326
|
+
exports.PopoverContent = index$u.PopoverContent;
|
|
327
|
+
exports.HStack = index$v.HStack;
|
|
328
|
+
exports.VStack = index$v.VStack;
|
|
328
329
|
exports.DefinitionTooltip = DefinitionTooltip.DefinitionTooltip;
|
|
329
|
-
exports.GlobalTheme = index$
|
|
330
|
-
exports.Theme = index$
|
|
331
|
-
exports.useTheme = index$
|
|
330
|
+
exports.GlobalTheme = index$w.GlobalTheme;
|
|
331
|
+
exports.Theme = index$w.Theme;
|
|
332
|
+
exports.useTheme = index$w.useTheme;
|
|
333
|
+
exports.usePrefix = usePrefix.usePrefix;
|
|
332
334
|
exports.AspectRatio = AspectRatio["default"];
|
|
333
335
|
exports.Filename = Filename["default"];
|
|
334
336
|
exports.FileUploaderButton = FileUploaderButton["default"];
|
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.6.0-rc.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@carbon/feature-flags": "^0.8.0",
|
|
47
47
|
"@carbon/icons-react": "^11.5.0",
|
|
48
48
|
"@carbon/layout": "^11.3.0",
|
|
49
|
-
"@carbon/styles": "^1.
|
|
49
|
+
"@carbon/styles": "^1.6.0-rc.0",
|
|
50
50
|
"@carbon/telemetry": "0.1.0",
|
|
51
51
|
"classnames": "2.3.1",
|
|
52
52
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -129,5 +129,5 @@
|
|
|
129
129
|
"**/*.scss",
|
|
130
130
|
"**/*.css"
|
|
131
131
|
],
|
|
132
|
-
"gitHead": "
|
|
132
|
+
"gitHead": "82f5f0dcc24dc63a8feebbfb653333ae08425984"
|
|
133
133
|
}
|
|
@@ -1,19 +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 { Toggle as Toggle$2 } from './next/Toggle.js';
|
|
9
|
-
import ToggleClassic from './Toggle.js';
|
|
10
|
-
import { createComponentToggle } from '../../internal/ComponentToggle.js';
|
|
11
|
-
|
|
12
|
-
var Toggle = createComponentToggle({
|
|
13
|
-
name: 'Toggle',
|
|
14
|
-
next: Toggle$2,
|
|
15
|
-
classic: ToggleClassic
|
|
16
|
-
});
|
|
17
|
-
var Toggle$1 = Toggle;
|
|
18
|
-
|
|
19
|
-
export { Toggle$1 as default };
|
|
@@ -1,158 +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, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React__default from 'react';
|
|
10
|
-
import PropTypes from 'prop-types';
|
|
11
|
-
import cx from 'classnames';
|
|
12
|
-
import { useControllableState } from '../../../internal/useControllableState.js';
|
|
13
|
-
import { usePrefix } from '../../../internal/usePrefix.js';
|
|
14
|
-
|
|
15
|
-
var _path;
|
|
16
|
-
|
|
17
|
-
var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
|
|
18
|
-
function Toggle(_ref) {
|
|
19
|
-
var className = _ref.className,
|
|
20
|
-
_ref$defaultToggled = _ref.defaultToggled,
|
|
21
|
-
defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
|
|
22
|
-
_ref$disabled = _ref.disabled,
|
|
23
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
24
|
-
_ref$hideLabel = _ref.hideLabel,
|
|
25
|
-
hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
|
|
26
|
-
id = _ref.id,
|
|
27
|
-
_ref$labelA = _ref.labelA,
|
|
28
|
-
labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
|
|
29
|
-
_ref$labelB = _ref.labelB,
|
|
30
|
-
labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
|
|
31
|
-
labelText = _ref.labelText,
|
|
32
|
-
onClick = _ref.onClick,
|
|
33
|
-
onToggle = _ref.onToggle,
|
|
34
|
-
_ref$size = _ref.size,
|
|
35
|
-
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
36
|
-
toggled = _ref.toggled,
|
|
37
|
-
other = _objectWithoutProperties(_ref, _excluded);
|
|
38
|
-
|
|
39
|
-
var prefix = usePrefix();
|
|
40
|
-
|
|
41
|
-
var _useControllableState = useControllableState({
|
|
42
|
-
value: toggled,
|
|
43
|
-
onChange: onToggle,
|
|
44
|
-
defaultValue: defaultToggled
|
|
45
|
-
}),
|
|
46
|
-
_useControllableState2 = _slicedToArray(_useControllableState, 2),
|
|
47
|
-
checked = _useControllableState2[0],
|
|
48
|
-
setChecked = _useControllableState2[1];
|
|
49
|
-
|
|
50
|
-
function handleClick(e) {
|
|
51
|
-
setChecked(!checked);
|
|
52
|
-
|
|
53
|
-
if (onClick) {
|
|
54
|
-
onClick(e);
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
var isSm = size === 'sm';
|
|
59
|
-
var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
|
|
60
|
-
var wrapperClasses = cx("".concat(prefix, "--toggle"), _defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
|
|
61
|
-
var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
|
|
62
|
-
var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
|
|
63
|
-
var switchClasses = cx("".concat(prefix, "--toggle__switch"), _defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
|
|
64
|
-
return /*#__PURE__*/React__default.createElement("div", {
|
|
65
|
-
className: wrapperClasses
|
|
66
|
-
}, /*#__PURE__*/React__default.createElement("button", _extends({}, other, {
|
|
67
|
-
id: id,
|
|
68
|
-
className: "".concat(prefix, "--toggle__button"),
|
|
69
|
-
role: "switch",
|
|
70
|
-
type: "button",
|
|
71
|
-
"aria-checked": checked,
|
|
72
|
-
disabled: disabled,
|
|
73
|
-
onClick: handleClick
|
|
74
|
-
})), /*#__PURE__*/React__default.createElement("label", {
|
|
75
|
-
htmlFor: id,
|
|
76
|
-
className: "".concat(prefix, "--toggle__label")
|
|
77
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
78
|
-
className: labelTextClasses
|
|
79
|
-
}, labelText), /*#__PURE__*/React__default.createElement("div", {
|
|
80
|
-
className: appearanceClasses
|
|
81
|
-
}, /*#__PURE__*/React__default.createElement("div", {
|
|
82
|
-
className: switchClasses
|
|
83
|
-
}, isSm && /*#__PURE__*/React__default.createElement("svg", {
|
|
84
|
-
className: "".concat(prefix, "--toggle__check"),
|
|
85
|
-
width: "6px",
|
|
86
|
-
height: "5px",
|
|
87
|
-
viewBox: "0 0 6 5"
|
|
88
|
-
}, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
|
|
89
|
-
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
90
|
-
})))), /*#__PURE__*/React__default.createElement("span", {
|
|
91
|
-
className: "".concat(prefix, "--toggle__text"),
|
|
92
|
-
"aria-hidden": "true"
|
|
93
|
-
}, sideLabel))));
|
|
94
|
-
}
|
|
95
|
-
Toggle.propTypes = {
|
|
96
|
-
/**
|
|
97
|
-
* Specify a custom className to apply to the form-item node
|
|
98
|
-
*/
|
|
99
|
-
className: PropTypes.string,
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* Specify whether the toggle should be on by default
|
|
103
|
-
*/
|
|
104
|
-
defaultToggled: PropTypes.bool,
|
|
105
|
-
|
|
106
|
-
/**
|
|
107
|
-
* Whether this control should be disabled
|
|
108
|
-
*/
|
|
109
|
-
disabled: PropTypes.bool,
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Specify whether the label should be hidden, or not
|
|
113
|
-
*/
|
|
114
|
-
hideLabel: PropTypes.bool,
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Provide an id that unique represents the underlying `<button>`
|
|
118
|
-
*/
|
|
119
|
-
id: PropTypes.string.isRequired,
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* Specify the label for the "off" position
|
|
123
|
-
*/
|
|
124
|
-
labelA: PropTypes.node,
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Specify the label for the "on" position
|
|
128
|
-
*/
|
|
129
|
-
labelB: PropTypes.node,
|
|
130
|
-
|
|
131
|
-
/**
|
|
132
|
-
* Provide the text that will be read by a screen reader when visiting this
|
|
133
|
-
* control
|
|
134
|
-
*/
|
|
135
|
-
labelText: PropTypes.node.isRequired,
|
|
136
|
-
|
|
137
|
-
/**
|
|
138
|
-
* Provide an event listener that is called when the control is clicked
|
|
139
|
-
*/
|
|
140
|
-
onClick: PropTypes.func,
|
|
141
|
-
|
|
142
|
-
/**
|
|
143
|
-
* Provide an event listener that is called when the control is toggled
|
|
144
|
-
*/
|
|
145
|
-
onToggle: PropTypes.func,
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
|
|
149
|
-
*/
|
|
150
|
-
size: PropTypes.oneOf(['sm', 'md']),
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Specify whether the control is toggled
|
|
154
|
-
*/
|
|
155
|
-
toggled: PropTypes.bool
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
export { Toggle, Toggle as default };
|
|
@@ -1,23 +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 Toggle$2 = require('./next/Toggle.js');
|
|
13
|
-
var Toggle$3 = require('./Toggle.js');
|
|
14
|
-
var ComponentToggle = require('../../internal/ComponentToggle.js');
|
|
15
|
-
|
|
16
|
-
var Toggle = ComponentToggle.createComponentToggle({
|
|
17
|
-
name: 'Toggle',
|
|
18
|
-
next: Toggle$2.Toggle,
|
|
19
|
-
classic: Toggle$3["default"]
|
|
20
|
-
});
|
|
21
|
-
var Toggle$1 = Toggle;
|
|
22
|
-
|
|
23
|
-
exports["default"] = Toggle$1;
|
|
@@ -1,169 +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 _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
|
|
13
|
-
var React = require('react');
|
|
14
|
-
var PropTypes = require('prop-types');
|
|
15
|
-
var cx = require('classnames');
|
|
16
|
-
var useControllableState = require('../../../internal/useControllableState.js');
|
|
17
|
-
var usePrefix = require('../../../internal/usePrefix.js');
|
|
18
|
-
|
|
19
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
20
|
-
|
|
21
|
-
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
22
|
-
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
|
|
23
|
-
var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
24
|
-
|
|
25
|
-
var _path;
|
|
26
|
-
|
|
27
|
-
var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "size", "toggled"];
|
|
28
|
-
function Toggle(_ref) {
|
|
29
|
-
var className = _ref.className,
|
|
30
|
-
_ref$defaultToggled = _ref.defaultToggled,
|
|
31
|
-
defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
|
|
32
|
-
_ref$disabled = _ref.disabled,
|
|
33
|
-
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
34
|
-
_ref$hideLabel = _ref.hideLabel,
|
|
35
|
-
hideLabel = _ref$hideLabel === void 0 ? false : _ref$hideLabel,
|
|
36
|
-
id = _ref.id,
|
|
37
|
-
_ref$labelA = _ref.labelA,
|
|
38
|
-
labelA = _ref$labelA === void 0 ? 'Off' : _ref$labelA,
|
|
39
|
-
_ref$labelB = _ref.labelB,
|
|
40
|
-
labelB = _ref$labelB === void 0 ? 'On' : _ref$labelB,
|
|
41
|
-
labelText = _ref.labelText,
|
|
42
|
-
onClick = _ref.onClick,
|
|
43
|
-
onToggle = _ref.onToggle,
|
|
44
|
-
_ref$size = _ref.size,
|
|
45
|
-
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
46
|
-
toggled = _ref.toggled,
|
|
47
|
-
other = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
|
|
48
|
-
|
|
49
|
-
var prefix = usePrefix.usePrefix();
|
|
50
|
-
|
|
51
|
-
var _useControllableState = useControllableState.useControllableState({
|
|
52
|
-
value: toggled,
|
|
53
|
-
onChange: onToggle,
|
|
54
|
-
defaultValue: defaultToggled
|
|
55
|
-
}),
|
|
56
|
-
_useControllableState2 = _rollupPluginBabelHelpers.slicedToArray(_useControllableState, 2),
|
|
57
|
-
checked = _useControllableState2[0],
|
|
58
|
-
setChecked = _useControllableState2[1];
|
|
59
|
-
|
|
60
|
-
function handleClick(e) {
|
|
61
|
-
setChecked(!checked);
|
|
62
|
-
|
|
63
|
-
if (onClick) {
|
|
64
|
-
onClick(e);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
var isSm = size === 'sm';
|
|
69
|
-
var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
|
|
70
|
-
var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle--disabled"), disabled), className);
|
|
71
|
-
var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
|
|
72
|
-
var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
|
|
73
|
-
var switchClasses = cx__default["default"]("".concat(prefix, "--toggle__switch"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__switch--checked"), checked));
|
|
74
|
-
return /*#__PURE__*/React__default["default"].createElement("div", {
|
|
75
|
-
className: wrapperClasses
|
|
76
|
-
}, /*#__PURE__*/React__default["default"].createElement("button", _rollupPluginBabelHelpers["extends"]({}, other, {
|
|
77
|
-
id: id,
|
|
78
|
-
className: "".concat(prefix, "--toggle__button"),
|
|
79
|
-
role: "switch",
|
|
80
|
-
type: "button",
|
|
81
|
-
"aria-checked": checked,
|
|
82
|
-
disabled: disabled,
|
|
83
|
-
onClick: handleClick
|
|
84
|
-
})), /*#__PURE__*/React__default["default"].createElement("label", {
|
|
85
|
-
htmlFor: id,
|
|
86
|
-
className: "".concat(prefix, "--toggle__label")
|
|
87
|
-
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
88
|
-
className: labelTextClasses
|
|
89
|
-
}, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
90
|
-
className: appearanceClasses
|
|
91
|
-
}, /*#__PURE__*/React__default["default"].createElement("div", {
|
|
92
|
-
className: switchClasses
|
|
93
|
-
}, isSm && /*#__PURE__*/React__default["default"].createElement("svg", {
|
|
94
|
-
className: "".concat(prefix, "--toggle__check"),
|
|
95
|
-
width: "6px",
|
|
96
|
-
height: "5px",
|
|
97
|
-
viewBox: "0 0 6 5"
|
|
98
|
-
}, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
|
|
99
|
-
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
100
|
-
})))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
101
|
-
className: "".concat(prefix, "--toggle__text"),
|
|
102
|
-
"aria-hidden": "true"
|
|
103
|
-
}, sideLabel))));
|
|
104
|
-
}
|
|
105
|
-
Toggle.propTypes = {
|
|
106
|
-
/**
|
|
107
|
-
* Specify a custom className to apply to the form-item node
|
|
108
|
-
*/
|
|
109
|
-
className: PropTypes__default["default"].string,
|
|
110
|
-
|
|
111
|
-
/**
|
|
112
|
-
* Specify whether the toggle should be on by default
|
|
113
|
-
*/
|
|
114
|
-
defaultToggled: PropTypes__default["default"].bool,
|
|
115
|
-
|
|
116
|
-
/**
|
|
117
|
-
* Whether this control should be disabled
|
|
118
|
-
*/
|
|
119
|
-
disabled: PropTypes__default["default"].bool,
|
|
120
|
-
|
|
121
|
-
/**
|
|
122
|
-
* Specify whether the label should be hidden, or not
|
|
123
|
-
*/
|
|
124
|
-
hideLabel: PropTypes__default["default"].bool,
|
|
125
|
-
|
|
126
|
-
/**
|
|
127
|
-
* Provide an id that unique represents the underlying `<button>`
|
|
128
|
-
*/
|
|
129
|
-
id: PropTypes__default["default"].string.isRequired,
|
|
130
|
-
|
|
131
|
-
/**
|
|
132
|
-
* Specify the label for the "off" position
|
|
133
|
-
*/
|
|
134
|
-
labelA: PropTypes__default["default"].node,
|
|
135
|
-
|
|
136
|
-
/**
|
|
137
|
-
* Specify the label for the "on" position
|
|
138
|
-
*/
|
|
139
|
-
labelB: PropTypes__default["default"].node,
|
|
140
|
-
|
|
141
|
-
/**
|
|
142
|
-
* Provide the text that will be read by a screen reader when visiting this
|
|
143
|
-
* control
|
|
144
|
-
*/
|
|
145
|
-
labelText: PropTypes__default["default"].node.isRequired,
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* Provide an event listener that is called when the control is clicked
|
|
149
|
-
*/
|
|
150
|
-
onClick: PropTypes__default["default"].func,
|
|
151
|
-
|
|
152
|
-
/**
|
|
153
|
-
* Provide an event listener that is called when the control is toggled
|
|
154
|
-
*/
|
|
155
|
-
onToggle: PropTypes__default["default"].func,
|
|
156
|
-
|
|
157
|
-
/**
|
|
158
|
-
* Specify the size of the Toggle. Currently only supports 'sm' or 'md' (default)
|
|
159
|
-
*/
|
|
160
|
-
size: PropTypes__default["default"].oneOf(['sm', 'md']),
|
|
161
|
-
|
|
162
|
-
/**
|
|
163
|
-
* Specify whether the control is toggled
|
|
164
|
-
*/
|
|
165
|
-
toggled: PropTypes__default["default"].bool
|
|
166
|
-
};
|
|
167
|
-
|
|
168
|
-
exports.Toggle = Toggle;
|
|
169
|
-
exports["default"] = Toggle;
|