@carbon/react 1.0.0-rc.0 → 1.0.2
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/README.md +2 -2
- package/es/components/Accordion/Accordion.Skeleton.js +1 -7
- package/es/components/Accordion/AccordionItem.js +0 -5
- package/es/components/Button/Button.Skeleton.js +1 -3
- package/es/components/Button/Button.js +51 -113
- package/es/components/Checkbox/Checkbox.js +8 -21
- package/es/components/CodeSnippet/CodeSnippet.js +3 -11
- package/es/components/ComboBox/ComboBox.js +2 -4
- package/es/components/ContentSwitcher/index.js +13 -0
- package/es/components/DataTable/DataTable.js +5 -14
- package/es/components/DataTable/Table.js +3 -11
- package/es/components/DataTable/TableBatchAction.js +2 -1
- package/es/components/DataTable/TableExpandHeader.js +1 -1
- package/es/components/DataTable/TableToolbar.js +1 -2
- package/es/components/DataTable/TableToolbarSearch.js +4 -13
- package/es/components/DatePickerInput/next/DatePickerInput.js +6 -31
- package/es/components/Dropdown/Dropdown.Skeleton.js +4 -13
- package/es/components/Dropdown/Dropdown.js +4 -9
- package/es/components/ExpandableSearch/ExpandableSearch.js +16 -22
- package/es/components/FormGroup/FormGroup.js +4 -14
- package/es/components/IconButton/index.js +0 -1
- package/es/components/InlineLoading/InlineLoading.js +2 -9
- package/es/components/ListBox/ListBox.js +10 -0
- package/es/components/Modal/next/Modal.js +5 -8
- package/es/components/MultiSelect/FilterableMultiSelect.js +1 -2
- package/es/components/MultiSelect/MultiSelect.js +2 -3
- package/es/components/MultiSelect/next/FilterableMultiSelect.js +1 -2
- package/es/components/Notification/next/Notification.js +18 -39
- package/es/components/OverflowMenuItem/OverflowMenuItem.js +1 -9
- package/es/components/RadioTile/RadioTile.js +6 -13
- package/es/components/Search/index.js +3 -3
- package/es/components/Search/next/Search.js +25 -20
- package/es/components/Select/Select.js +6 -14
- package/es/components/Slider/Slider.js +4 -14
- package/es/components/StructuredList/next/StructuredList.js +7 -11
- package/es/components/TextInput/ControlledPasswordInput.js +2 -2
- package/es/components/Tile/next/Tile.js +12 -51
- package/es/components/TileGroup/index.js +13 -0
- package/es/components/TimePickerSelect/next/TimePickerSelect.js +0 -6
- package/es/components/Toggletip/index.js +252 -0
- package/es/components/Tooltip/next/DefinitionTooltip.js +1 -1
- package/es/index.js +6 -10
- package/es/internal/useEvent.js +29 -0
- package/icons/package.json +2 -1
- package/lib/components/Accordion/Accordion.Skeleton.js +1 -7
- package/lib/components/Accordion/AccordionItem.js +0 -5
- package/lib/components/Button/Button.Skeleton.js +1 -3
- package/lib/components/Button/Button.js +49 -130
- package/lib/components/Checkbox/Checkbox.js +8 -21
- package/lib/components/CodeSnippet/CodeSnippet.js +3 -11
- package/lib/components/ComboBox/ComboBox.js +2 -4
- package/lib/components/ContentSwitcher/index.js +17 -0
- package/lib/components/DataTable/DataTable.js +5 -33
- package/lib/components/DataTable/Table.js +3 -30
- package/lib/components/DataTable/TableBatchAction.js +2 -1
- package/lib/components/DataTable/TableExpandHeader.js +1 -1
- package/lib/components/DataTable/TableToolbar.js +1 -21
- package/lib/components/DataTable/TableToolbarSearch.js +4 -13
- package/lib/components/DatePickerInput/next/DatePickerInput.js +5 -30
- package/lib/components/Dropdown/Dropdown.Skeleton.js +4 -13
- package/lib/components/Dropdown/Dropdown.js +4 -9
- package/lib/components/ExpandableSearch/ExpandableSearch.js +15 -21
- package/lib/components/FormGroup/FormGroup.js +3 -13
- package/lib/components/IconButton/index.js +0 -1
- package/lib/components/InlineLoading/InlineLoading.js +2 -9
- package/lib/components/ListBox/ListBox.js +10 -0
- package/lib/components/Modal/next/Modal.js +5 -8
- package/lib/components/MultiSelect/FilterableMultiSelect.js +1 -2
- package/lib/components/MultiSelect/MultiSelect.js +2 -3
- package/lib/components/MultiSelect/next/FilterableMultiSelect.js +1 -2
- package/lib/components/Notification/next/Notification.js +18 -39
- package/lib/components/OverflowMenuItem/OverflowMenuItem.js +1 -9
- package/lib/components/RadioTile/RadioTile.js +6 -13
- package/lib/components/Search/next/Search.js +25 -20
- package/lib/components/Select/Select.js +6 -33
- package/lib/components/Slider/Slider.js +4 -14
- package/lib/components/StructuredList/next/StructuredList.js +7 -11
- package/lib/components/TextInput/ControlledPasswordInput.js +2 -2
- package/lib/components/Tile/next/Tile.js +12 -51
- package/lib/components/TileGroup/index.js +17 -0
- package/lib/components/TimePickerSelect/next/TimePickerSelect.js +0 -6
- package/lib/components/Toggletip/index.js +266 -0
- package/lib/components/Tooltip/next/DefinitionTooltip.js +1 -1
- package/lib/index.js +102 -110
- package/lib/internal/useEvent.js +33 -0
- package/package.json +9 -9
- package/es/components/ToggleSmall/ToggleSmall.js +0 -104
- package/es/components/Toolbar/Toolbar.js +0 -121
- package/es/components/ToolbarSearch/ToolbarSearch.js +0 -168
- package/es/components/TooltipDefinition/TooltipDefinition.js +0 -167
- package/es/components/TooltipIcon/TooltipIcon.js +0 -235
- package/es/tools/createPropAdapter.js +0 -63
- package/lib/components/ToggleSmall/ToggleSmall.js +0 -114
- package/lib/components/Toolbar/Toolbar.js +0 -135
- package/lib/components/ToolbarSearch/ToolbarSearch.js +0 -178
- package/lib/components/TooltipDefinition/TooltipDefinition.js +0 -178
- package/lib/components/TooltipIcon/TooltipIcon.js +0 -245
- package/lib/tools/createPropAdapter.js +0 -67
|
@@ -11,10 +11,9 @@ import PropTypes from 'prop-types';
|
|
|
11
11
|
import React__default, { useRef, useState, useMemo, useEffect } from 'react';
|
|
12
12
|
import Search from '../Search/index.js';
|
|
13
13
|
import setupGetInstanceId from './tools/instanceId.js';
|
|
14
|
-
import deprecate from '../../prop-types/deprecate.js';
|
|
15
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
16
15
|
|
|
17
|
-
var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "
|
|
16
|
+
var _excluded = ["className", "searchContainerClass", "onChange", "onClear", "translateWithId", "placeholder", "labelText", "expanded", "defaultExpanded", "defaultValue", "disabled", "onExpand", "persistent", "id", "onBlur", "onFocus"];
|
|
18
17
|
var getInstanceId = setupGetInstanceId();
|
|
19
18
|
var translationKeys = {
|
|
20
19
|
'carbon.table.toolbar.search.label': 'Filter table',
|
|
@@ -33,7 +32,6 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
|
|
|
33
32
|
onChangeProp = _ref.onChange,
|
|
34
33
|
onClear = _ref.onClear,
|
|
35
34
|
t = _ref.translateWithId,
|
|
36
|
-
placeHolderText = _ref.placeHolderText,
|
|
37
35
|
placeholder = _ref.placeholder,
|
|
38
36
|
labelText = _ref.labelText,
|
|
39
37
|
expandedProp = _ref.expanded,
|
|
@@ -42,7 +40,6 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
|
|
|
42
40
|
disabled = _ref.disabled,
|
|
43
41
|
onExpand = _ref.onExpand,
|
|
44
42
|
persistent = _ref.persistent,
|
|
45
|
-
persistant = _ref.persistant,
|
|
46
43
|
id = _ref.id,
|
|
47
44
|
onBlur = _ref.onBlur,
|
|
48
45
|
onFocus = _ref.onFocus,
|
|
@@ -83,13 +80,13 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
|
|
|
83
80
|
}
|
|
84
81
|
}, //eslint-disable-next-line react-hooks/exhaustive-deps
|
|
85
82
|
[]);
|
|
86
|
-
var searchClasses = cx(className, (_cx = {}, _defineProperty(_cx, searchContainerClass, searchContainerClass), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-active"), expanded), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-expandable"), !persistent
|
|
83
|
+
var searchClasses = cx(className, (_cx = {}, _defineProperty(_cx, searchContainerClass, searchContainerClass), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-active"), expanded), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-disabled"), disabled), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-expandable"), !persistent), _defineProperty(_cx, "".concat(prefix, "--toolbar-search-container-persistent"), persistent), _cx));
|
|
87
84
|
|
|
88
85
|
var handleExpand = function handleExpand(event) {
|
|
89
86
|
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : !expanded;
|
|
90
87
|
|
|
91
88
|
if (!disabled) {
|
|
92
|
-
if (!controlled &&
|
|
89
|
+
if (!controlled && !persistent) {
|
|
93
90
|
setExpandedState(value);
|
|
94
91
|
}
|
|
95
92
|
|
|
@@ -121,7 +118,7 @@ var TableToolbarSearch = function TableToolbarSearch(_ref) {
|
|
|
121
118
|
value: value,
|
|
122
119
|
id: typeof id !== 'undefined' ? id : uniqueId.toString(),
|
|
123
120
|
labelText: labelText || t('carbon.table.toolbar.search.label'),
|
|
124
|
-
placeholder:
|
|
121
|
+
placeholder: placeholder || t('carbon.table.toolbar.search.placeholder'),
|
|
125
122
|
onChange: onChange,
|
|
126
123
|
onClear: onClear,
|
|
127
124
|
onFocus: onFocus ? function (event) {
|
|
@@ -199,18 +196,12 @@ TableToolbarSearch.propTypes = {
|
|
|
199
196
|
* input as the second.
|
|
200
197
|
*/
|
|
201
198
|
onFocus: PropTypes.func,
|
|
202
|
-
persistant: deprecate(PropTypes.bool, "\nThe prop `persistant` for TableToolbarSearch has been deprecated in favor of `persistent`. Please use `persistent` instead."),
|
|
203
199
|
|
|
204
200
|
/**
|
|
205
201
|
* Whether the search should be allowed to expand
|
|
206
202
|
*/
|
|
207
203
|
persistent: PropTypes.bool,
|
|
208
204
|
|
|
209
|
-
/**
|
|
210
|
-
* Deprecated in favor of `placeholder`
|
|
211
|
-
*/
|
|
212
|
-
placeHolderText: deprecate(PropTypes.string, "\nThe prop `placeHolderText` for TableToolbarSearch has been deprecated in favor of `placeholder`. Please use `placeholder` instead."),
|
|
213
|
-
|
|
214
205
|
/**
|
|
215
206
|
* Provide an optional placeholder text for the Search component
|
|
216
207
|
*/
|
|
@@ -5,17 +5,14 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty,
|
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import { WarningFilled, WarningAltFilled, Calendar } from '@carbon/icons-react';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import React__default from 'react';
|
|
13
13
|
import { usePrefix } from '../../../internal/usePrefix.js';
|
|
14
|
-
import deprecate from '../../../prop-types/deprecate.js';
|
|
15
14
|
|
|
16
|
-
var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"]
|
|
17
|
-
_excluded2 = ["openCalendar", "iconDescription"],
|
|
18
|
-
_excluded3 = ["datePickerType", "invalid", "warn"];
|
|
15
|
+
var _excluded = ["datePickerType", "disabled", "helperText", "hideLabel", "id", "invalid", "invalidText", "labelText", "onClick", "onChange", "pattern", "placeholder", "size", "type", "warn", "warnText"];
|
|
19
16
|
var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePickerInput(props, ref) {
|
|
20
17
|
var _cx, _cx2, _cx4;
|
|
21
18
|
|
|
@@ -66,18 +63,12 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
|
|
|
66
63
|
var helperTextClasses = cx("".concat(prefix, "--form__helper-text"), _defineProperty({}, "".concat(prefix, "--form__helper-text--disabled"), disabled));
|
|
67
64
|
var inputClasses = cx("".concat(prefix, "--date-picker__input"), (_cx4 = {}, _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--").concat(size), size), _defineProperty(_cx4, "".concat(prefix, "--date-picker__input--invalid"), invalid), _cx4));
|
|
68
65
|
var containerClasses = cx("".concat(prefix, "--date-picker-container"), _defineProperty({}, "".concat(prefix, "--date-picker--nolabel"), !labelText));
|
|
69
|
-
|
|
70
|
-
var _rest = _objectSpread2({}, rest),
|
|
71
|
-
openCalendar = _rest.openCalendar,
|
|
72
|
-
iconDescription = _rest.iconDescription,
|
|
73
|
-
other = _objectWithoutProperties(_rest, _excluded2);
|
|
74
|
-
|
|
75
|
-
var input = invalid ? /*#__PURE__*/React__default.createElement("input", _extends({}, other, datePickerInputProps, {
|
|
66
|
+
var input = invalid ? /*#__PURE__*/React__default.createElement("input", _extends({}, rest, datePickerInputProps, {
|
|
76
67
|
disabled: disabled,
|
|
77
68
|
ref: ref,
|
|
78
69
|
"data-invalid": true,
|
|
79
70
|
className: inputClasses
|
|
80
|
-
})) : /*#__PURE__*/React__default.createElement("input", _extends({},
|
|
71
|
+
})) : /*#__PURE__*/React__default.createElement("input", _extends({}, rest, datePickerInputProps, {
|
|
81
72
|
disabled: disabled,
|
|
82
73
|
className: inputClasses,
|
|
83
74
|
ref: ref
|
|
@@ -91,9 +82,7 @@ var DatePickerInput = /*#__PURE__*/React__default.forwardRef(function DatePicker
|
|
|
91
82
|
className: wrapperClasses
|
|
92
83
|
}, input, /*#__PURE__*/React__default.createElement(DatePickerIcon, {
|
|
93
84
|
datePickerType: datePickerType,
|
|
94
|
-
iconDescription: iconDescription,
|
|
95
85
|
invalid: invalid,
|
|
96
|
-
openCalendar: openCalendar,
|
|
97
86
|
warn: warn
|
|
98
87
|
})), invalid && /*#__PURE__*/React__default.createElement("div", {
|
|
99
88
|
className: "".concat(prefix, "--form-requirement")
|
|
@@ -128,11 +117,6 @@ DatePickerInput.propTypes = {
|
|
|
128
117
|
*/
|
|
129
118
|
hideLabel: PropTypes.bool,
|
|
130
119
|
|
|
131
|
-
/**
|
|
132
|
-
* The description of the calendar icon.
|
|
133
|
-
*/
|
|
134
|
-
iconDescription: deprecate(PropTypes.string, "\nThe prop `iconDescriptionInput` for DatePickerInput has been deprecated and is no longer used"),
|
|
135
|
-
|
|
136
120
|
/**
|
|
137
121
|
* Specify an id that uniquely identifies the `<input>`
|
|
138
122
|
*/
|
|
@@ -165,11 +149,6 @@ DatePickerInput.propTypes = {
|
|
|
165
149
|
*/
|
|
166
150
|
onClick: PropTypes.func,
|
|
167
151
|
|
|
168
|
-
/**
|
|
169
|
-
* Provide a function to be called when the input field is clicked
|
|
170
|
-
*/
|
|
171
|
-
openCalendar: deprecate(PropTypes.func, "\nThe prop `openCalendar` for DatePickerInput has been deprecated and is no longer used"),
|
|
172
|
-
|
|
173
152
|
/**
|
|
174
153
|
* Provide a regular expression that the input value must match
|
|
175
154
|
*/
|
|
@@ -214,9 +193,7 @@ DatePickerInput.propTypes = {
|
|
|
214
193
|
function DatePickerIcon(_ref) {
|
|
215
194
|
var datePickerType = _ref.datePickerType,
|
|
216
195
|
invalid = _ref.invalid,
|
|
217
|
-
warn = _ref.warn
|
|
218
|
-
rest = _objectWithoutProperties(_ref, _excluded3);
|
|
219
|
-
|
|
196
|
+
warn = _ref.warn;
|
|
220
197
|
var prefix = usePrefix();
|
|
221
198
|
|
|
222
199
|
if (datePickerType === 'simple' && !invalid && !warn) {
|
|
@@ -237,11 +214,9 @@ function DatePickerIcon(_ref) {
|
|
|
237
214
|
|
|
238
215
|
return /*#__PURE__*/React__default.createElement(Calendar, {
|
|
239
216
|
className: "".concat(prefix, "--date-picker__icon"),
|
|
240
|
-
"aria-label": rest.iconDescription,
|
|
241
|
-
onClick: rest.openCalendar,
|
|
242
217
|
role: "img",
|
|
243
218
|
"aria-hidden": "true"
|
|
244
|
-
}
|
|
219
|
+
});
|
|
245
220
|
}
|
|
246
221
|
|
|
247
222
|
DatePickerIcon.propTypes = {
|
|
@@ -9,22 +9,18 @@ import { objectWithoutProperties as _objectWithoutProperties, defineProperty as
|
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
10
|
import React__default from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
|
-
import deprecate from '../../prop-types/deprecate.js';
|
|
13
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
13
|
import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
|
|
15
14
|
|
|
16
|
-
var _excluded = ["className", "size"
|
|
15
|
+
var _excluded = ["className", "size"];
|
|
17
16
|
|
|
18
17
|
var DropdownSkeleton = function DropdownSkeleton(_ref) {
|
|
19
|
-
var _cx;
|
|
20
|
-
|
|
21
18
|
var className = _ref.className,
|
|
22
|
-
size = _ref.size
|
|
23
|
-
_ref
|
|
24
|
-
var rest = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
+
size = _ref.size,
|
|
20
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
25
21
|
|
|
26
22
|
var prefix = usePrefix();
|
|
27
|
-
var wrapperClasses = cx(className,
|
|
23
|
+
var wrapperClasses = cx(className, "".concat(prefix, "--skeleton"), "".concat(prefix, "--dropdown-v2"), "".concat(prefix, "--list-box"), "".concat(prefix, "--form-item"), _defineProperty({}, "".concat(prefix, "--list-box--").concat(size), size));
|
|
28
24
|
return /*#__PURE__*/React__default.createElement("div", _extends({
|
|
29
25
|
className: wrapperClasses
|
|
30
26
|
}, rest), /*#__PURE__*/React__default.createElement("div", {
|
|
@@ -40,11 +36,6 @@ DropdownSkeleton.propTypes = {
|
|
|
40
36
|
*/
|
|
41
37
|
className: PropTypes.string,
|
|
42
38
|
|
|
43
|
-
/**
|
|
44
|
-
* Specify whether you want the inline version of this control
|
|
45
|
-
*/
|
|
46
|
-
inline: deprecate(PropTypes.bool, "The `inline` prop has been deprecated and will\n be removed in the next major release. To specify the inline variant of Dropdown, please use the `type` prop."),
|
|
47
|
-
|
|
48
39
|
/**
|
|
49
40
|
* Specify the size of the ListBox.
|
|
50
41
|
*/
|
|
@@ -12,9 +12,7 @@ import cx from 'classnames';
|
|
|
12
12
|
import PropTypes from 'prop-types';
|
|
13
13
|
import { WarningFilled, WarningAltFilled, Checkmark } from '@carbon/icons-react';
|
|
14
14
|
import '../ListBox/index.js';
|
|
15
|
-
import { mapDownshiftProps } from '../../tools/createPropAdapter.js';
|
|
16
15
|
import mergeRefs from '../../tools/mergeRefs.js';
|
|
17
|
-
import deprecate from '../../prop-types/deprecate.js';
|
|
18
16
|
import { useFeatureFlag } from '../FeatureFlags/index.js';
|
|
19
17
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
20
18
|
import ListBox from '../ListBox/ListBox.js';
|
|
@@ -61,14 +59,16 @@ var Dropdown = /*#__PURE__*/React__default.forwardRef(function Dropdown(_ref, re
|
|
|
61
59
|
other = _objectWithoutProperties(_ref, _excluded);
|
|
62
60
|
|
|
63
61
|
var prefix = usePrefix();
|
|
64
|
-
|
|
62
|
+
|
|
63
|
+
var selectProps = _objectSpread2(_objectSpread2({}, downshiftProps), {}, {
|
|
65
64
|
items: items,
|
|
66
65
|
itemToString: itemToString,
|
|
67
66
|
initialSelectedItem: initialSelectedItem,
|
|
68
67
|
onSelectedItemChange: onSelectedItemChange
|
|
69
|
-
})
|
|
68
|
+
}); // only set selectedItem if the prop is defined. Setting if it is undefined
|
|
70
69
|
// will overwrite default selected items from useSelect
|
|
71
70
|
|
|
71
|
+
|
|
72
72
|
if (controlledSelectedItem !== undefined) {
|
|
73
73
|
selectProps.selectedItem = controlledSelectedItem;
|
|
74
74
|
}
|
|
@@ -219,11 +219,6 @@ Dropdown.propTypes = {
|
|
|
219
219
|
*/
|
|
220
220
|
initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
|
|
221
221
|
|
|
222
|
-
/**
|
|
223
|
-
* Specify whether you want the inline version of this control
|
|
224
|
-
*/
|
|
225
|
-
inline: deprecate(PropTypes.bool, "The `inline` prop has been deprecated and will\n be removed in the next major release. To specify the inline variant of Dropdown, please use the `type` prop."),
|
|
226
|
-
|
|
227
222
|
/**
|
|
228
223
|
* Specify if the currently selected value is invalid.
|
|
229
224
|
*/
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
-
import React__default, { useState, useRef
|
|
9
|
+
import React__default, { useState, useRef } from 'react';
|
|
10
10
|
import cx from 'classnames';
|
|
11
11
|
import Search from '../Search/index.js';
|
|
12
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
@@ -17,6 +17,11 @@ function ExpandableSearch(props) {
|
|
|
17
17
|
expanded = _useState2[0],
|
|
18
18
|
setExpanded = _useState2[1];
|
|
19
19
|
|
|
20
|
+
var _useState3 = useState(false),
|
|
21
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
22
|
+
hasContent = _useState4[0],
|
|
23
|
+
setHasContent = _useState4[1];
|
|
24
|
+
|
|
20
25
|
var searchRef = useRef(null);
|
|
21
26
|
var prefix = usePrefix();
|
|
22
27
|
|
|
@@ -29,36 +34,25 @@ function ExpandableSearch(props) {
|
|
|
29
34
|
function handleBlur(evt) {
|
|
30
35
|
var relatedTargetIsAllowed = evt.relatedTarget && evt.relatedTarget.classList.contains("".concat(prefix, "--search-close"));
|
|
31
36
|
|
|
32
|
-
if (expanded && !relatedTargetIsAllowed && !
|
|
37
|
+
if (expanded && !relatedTargetIsAllowed && !hasContent) {
|
|
33
38
|
setExpanded(false);
|
|
34
39
|
}
|
|
35
40
|
}
|
|
36
41
|
|
|
37
|
-
useEffect(function () {
|
|
38
|
-
var _searchRef$current2;
|
|
39
|
-
|
|
40
|
-
function focusInput() {
|
|
41
|
-
var _searchRef$current;
|
|
42
|
-
|
|
43
|
-
if (!expanded && (_searchRef$current = searchRef.current) !== null && _searchRef$current !== void 0 && _searchRef$current.input) {
|
|
44
|
-
searchRef.current.input.focus();
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
if ((_searchRef$current2 = searchRef.current) !== null && _searchRef$current2 !== void 0 && _searchRef$current2.magnifier) {
|
|
49
|
-
var magnifier = searchRef.current.magnifier;
|
|
50
|
-
magnifier.addEventListener('click', focusInput);
|
|
51
|
-
return function () {
|
|
52
|
-
magnifier.removeEventListener('click', focusInput);
|
|
53
|
-
};
|
|
54
|
-
}
|
|
55
|
-
}, [expanded, searchRef]);
|
|
56
42
|
var classes = cx("".concat(prefix, "--search--expandable"), _defineProperty({}, "".concat(prefix, "--search--expanded"), expanded), props.className);
|
|
57
43
|
return /*#__PURE__*/React__default.createElement(Search, _extends({}, props, {
|
|
58
44
|
ref: searchRef,
|
|
59
45
|
className: classes,
|
|
60
46
|
onFocus: handleFocus,
|
|
61
|
-
onBlur: handleBlur
|
|
47
|
+
onBlur: handleBlur,
|
|
48
|
+
onChange: function onChange(event) {
|
|
49
|
+
setHasContent(event.target.value !== '');
|
|
50
|
+
},
|
|
51
|
+
onExpand: function onExpand() {
|
|
52
|
+
var _searchRef$current$fo, _searchRef$current;
|
|
53
|
+
|
|
54
|
+
(_searchRef$current$fo = (_searchRef$current = searchRef.current).focus) === null || _searchRef$current$fo === void 0 ? void 0 : _searchRef$current$fo.call(_searchRef$current);
|
|
55
|
+
}
|
|
62
56
|
}));
|
|
63
57
|
}
|
|
64
58
|
|
|
@@ -5,14 +5,13 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties,
|
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
10
|
import React__default from 'react';
|
|
11
11
|
import cx from 'classnames';
|
|
12
|
-
import { useFeatureFlag } from '../FeatureFlags/index.js';
|
|
13
12
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
13
|
|
|
15
|
-
var _excluded = ["legendId", "legendText", "invalid", "children", "className", "message", "messageText"
|
|
14
|
+
var _excluded = ["legendId", "legendText", "invalid", "children", "className", "message", "messageText"];
|
|
16
15
|
|
|
17
16
|
var FormGroup = function FormGroup(_ref) {
|
|
18
17
|
var legendId = _ref.legendId,
|
|
@@ -22,14 +21,10 @@ var FormGroup = function FormGroup(_ref) {
|
|
|
22
21
|
className = _ref.className,
|
|
23
22
|
message = _ref.message,
|
|
24
23
|
messageText = _ref.messageText,
|
|
25
|
-
hasMargin = _ref.hasMargin,
|
|
26
24
|
other = _objectWithoutProperties(_ref, _excluded);
|
|
27
25
|
|
|
28
26
|
var prefix = usePrefix();
|
|
29
|
-
var
|
|
30
|
-
var classNamesLegend = cx("".concat(prefix, "--label"), [enabled ? null : className]); // TODO - remove `fieldset--no-margin` in v11
|
|
31
|
-
|
|
32
|
-
var classNamesFieldset = cx("".concat(prefix, "--fieldset"), className, _defineProperty({}, "".concat(prefix, "--fieldset--no-margin"), !hasMargin));
|
|
27
|
+
var classNamesFieldset = cx("".concat(prefix, "--fieldset"), className);
|
|
33
28
|
return /*#__PURE__*/React__default.createElement("fieldset", _extends({}, invalid && {
|
|
34
29
|
'data-invalid': ''
|
|
35
30
|
}, {
|
|
@@ -37,7 +32,7 @@ var FormGroup = function FormGroup(_ref) {
|
|
|
37
32
|
}, other, {
|
|
38
33
|
"aria-labelledby": other['aria-labelledby'] || legendId
|
|
39
34
|
}), /*#__PURE__*/React__default.createElement("legend", {
|
|
40
|
-
className:
|
|
35
|
+
className: "".concat(prefix, "--label"),
|
|
41
36
|
id: legendId || other['aria-labelledby']
|
|
42
37
|
}, legendText), children, message ? /*#__PURE__*/React__default.createElement("div", {
|
|
43
38
|
className: "".concat(prefix, "--form__requirements")
|
|
@@ -55,11 +50,6 @@ FormGroup.propTypes = {
|
|
|
55
50
|
*/
|
|
56
51
|
className: PropTypes.string,
|
|
57
52
|
|
|
58
|
-
/**
|
|
59
|
-
* Specify whether or not the FormGroup should provide bottom margin
|
|
60
|
-
*/
|
|
61
|
-
hasMargin: PropTypes.bool,
|
|
62
|
-
|
|
63
53
|
/**
|
|
64
54
|
* Specify whether the <FormGroup> is invalid
|
|
65
55
|
*/
|
|
@@ -35,7 +35,6 @@ var IconButton = /*#__PURE__*/React__default.forwardRef(function IconButton(prop
|
|
|
35
35
|
label: label,
|
|
36
36
|
leaveDelayMs: leaveDelayMs
|
|
37
37
|
}, /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
|
|
38
|
-
hasIconOnly: true,
|
|
39
38
|
kind: kind,
|
|
40
39
|
ref: ref,
|
|
41
40
|
size: size
|
|
@@ -10,18 +10,16 @@ import React__default from 'react';
|
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
11
|
import cx from 'classnames';
|
|
12
12
|
import { ErrorFilled, CheckmarkFilled } from '@carbon/icons-react';
|
|
13
|
-
import deprecate from '../../prop-types/deprecate.js';
|
|
14
13
|
import Loading from '../Loading/Loading.js';
|
|
15
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
16
15
|
|
|
17
|
-
var _excluded = ["className", "
|
|
16
|
+
var _excluded = ["className", "status", "iconDescription", "description", "onSuccess", "successDelay"];
|
|
18
17
|
function InlineLoading(_ref) {
|
|
19
18
|
var _title, _title2;
|
|
20
19
|
|
|
21
20
|
var className = _ref.className,
|
|
22
|
-
success = _ref.success,
|
|
23
21
|
_ref$status = _ref.status,
|
|
24
|
-
status = _ref$status === void 0 ?
|
|
22
|
+
status = _ref$status === void 0 ? 'active' : _ref$status,
|
|
25
23
|
iconDescription = _ref.iconDescription,
|
|
26
24
|
description = _ref.description,
|
|
27
25
|
onSuccess = _ref.onSuccess,
|
|
@@ -101,11 +99,6 @@ InlineLoading.propTypes = {
|
|
|
101
99
|
*/
|
|
102
100
|
status: PropTypes.oneOf(['inactive', 'active', 'finished', 'error']),
|
|
103
101
|
|
|
104
|
-
/**
|
|
105
|
-
* Specify whether the load was successful
|
|
106
|
-
*/
|
|
107
|
-
success: deprecate(PropTypes.bool, "\nThe prop `success` for InlineLoading has been deprecated in favor of `status`. Please use `status=\"finished\"` instead."),
|
|
108
|
-
|
|
109
102
|
/**
|
|
110
103
|
* Provide a delay for the `setTimeout` for success
|
|
111
104
|
*/
|
|
@@ -11,6 +11,11 @@ import React__default from 'react';
|
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import { ListBoxSize, ListBoxType } from './ListBoxPropTypes.js';
|
|
13
13
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
|
+
import ListBoxField from './ListBoxField.js';
|
|
15
|
+
import ListBoxMenu from './ListBoxMenu.js';
|
|
16
|
+
import ListBoxMenuIcon from './ListBoxMenuIcon.js';
|
|
17
|
+
import ListBoxMenuItem from './ListBoxMenuItem.js';
|
|
18
|
+
import ListBoxSelection from './ListBoxSelection.js';
|
|
14
19
|
|
|
15
20
|
var _excluded = ["children", "className", "disabled", "type", "size", "invalid", "invalidText", "warn", "warnText", "light", "isOpen"];
|
|
16
21
|
|
|
@@ -124,6 +129,11 @@ ListBox.defaultProps = {
|
|
|
124
129
|
disabled: false,
|
|
125
130
|
type: 'default'
|
|
126
131
|
};
|
|
132
|
+
ListBox.Field = ListBoxField;
|
|
133
|
+
ListBox.Menu = ListBoxMenu;
|
|
134
|
+
ListBox.MenuIcon = ListBoxMenuIcon;
|
|
135
|
+
ListBox.MenuItem = ListBoxMenuItem;
|
|
136
|
+
ListBox.Selection = ListBoxSelection;
|
|
127
137
|
var ListBox$1 = ListBox;
|
|
128
138
|
|
|
129
139
|
export { ListBox$1 as default };
|
|
@@ -13,7 +13,6 @@ import { Close } from '@carbon/icons-react';
|
|
|
13
13
|
import toggleClass from '../../../tools/toggleClass.js';
|
|
14
14
|
import Button from '../../Button/Button.js';
|
|
15
15
|
import ButtonSet from '../../ButtonSet/ButtonSet.js';
|
|
16
|
-
import deprecate from '../../../prop-types/deprecate.js';
|
|
17
16
|
import requiredIfGivenPropIsTruthy from '../../../prop-types/requiredIfGivenPropIsTruthy.js';
|
|
18
17
|
import wrapFocus, { elementOrParentIsFloatingMenu } from '../../../internal/wrapFocus.js';
|
|
19
18
|
import setupGetInstanceId from '../../../tools/setupGetInstanceId.js';
|
|
@@ -21,10 +20,10 @@ import { usePrefix } from '../../../internal/usePrefix.js';
|
|
|
21
20
|
|
|
22
21
|
var _Modal$propTypes;
|
|
23
22
|
|
|
24
|
-
var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "
|
|
23
|
+
var _excluded = ["children", "className", "modalHeading", "modalLabel", "modalAriaLabel", "passiveModal", "secondaryButtonText", "primaryButtonText", "open", "onRequestClose", "onRequestSubmit", "onSecondarySubmit", "primaryButtonDisabled", "danger", "alert", "secondaryButtons", "selectorPrimaryFocus", "selectorsFloatingMenus", "shouldSubmitOnEnter", "size", "hasScrollingContent", "closeButtonLabel", "preventCloseOnClickOutside"];
|
|
25
24
|
var getInstanceId = setupGetInstanceId();
|
|
26
25
|
var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
|
|
27
|
-
var _classNames
|
|
26
|
+
var _classNames;
|
|
28
27
|
|
|
29
28
|
var children = _ref.children,
|
|
30
29
|
className = _ref.className,
|
|
@@ -32,14 +31,12 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
|
|
|
32
31
|
modalLabel = _ref.modalLabel,
|
|
33
32
|
modalAriaLabel = _ref.modalAriaLabel,
|
|
34
33
|
passiveModal = _ref.passiveModal,
|
|
35
|
-
hasForm = _ref.hasForm,
|
|
36
34
|
secondaryButtonText = _ref.secondaryButtonText,
|
|
37
35
|
primaryButtonText = _ref.primaryButtonText,
|
|
38
36
|
open = _ref.open,
|
|
39
37
|
onRequestClose = _ref.onRequestClose,
|
|
40
38
|
onRequestSubmit = _ref.onRequestSubmit,
|
|
41
39
|
onSecondarySubmit = _ref.onSecondarySubmit,
|
|
42
|
-
iconDescription = _ref.iconDescription,
|
|
43
40
|
primaryButtonDisabled = _ref.primaryButtonDisabled,
|
|
44
41
|
danger = _ref.danger,
|
|
45
42
|
alert = _ref.alert,
|
|
@@ -109,13 +106,13 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function Modal(_ref, ref) {
|
|
|
109
106
|
var onSecondaryButtonClick = onSecondarySubmit ? onSecondarySubmit : onRequestClose;
|
|
110
107
|
var modalClasses = cx("".concat(prefix, "--modal"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--modal-tall"), !passiveModal), _defineProperty(_classNames, 'is-visible', open), _defineProperty(_classNames, "".concat(prefix, "--modal--danger"), danger), _defineProperty(_classNames, className, className), _classNames));
|
|
111
108
|
var containerClasses = cx("".concat(prefix, "--modal-container"), _defineProperty({}, "".concat(prefix, "--modal-container--").concat(size), size));
|
|
112
|
-
var contentClasses = cx("".concat(prefix, "--modal-content"), (
|
|
109
|
+
var contentClasses = cx("".concat(prefix, "--modal-content"), _defineProperty({}, "".concat(prefix, "--modal-scroll-content"), hasScrollingContent));
|
|
113
110
|
var footerClasses = cx("".concat(prefix, "--modal-footer"), _defineProperty({}, "".concat(prefix, "--modal-footer--three-button"), Array.isArray(secondaryButtons) && secondaryButtons.length === 2));
|
|
114
111
|
var modalButton = /*#__PURE__*/React__default.createElement("button", {
|
|
115
112
|
className: modalCloseButtonClass,
|
|
116
113
|
type: "button",
|
|
117
114
|
onClick: onRequestClose,
|
|
118
|
-
title: ariaLabel
|
|
115
|
+
title: ariaLabel,
|
|
119
116
|
"aria-label": closeButtonLabel ? closeButtonLabel : 'close',
|
|
120
117
|
ref: button
|
|
121
118
|
}, /*#__PURE__*/React__default.createElement(Close, {
|
|
@@ -243,7 +240,7 @@ Modal.propTypes = (_Modal$propTypes = {
|
|
|
243
240
|
* Should go hand in hand with the danger prop.
|
|
244
241
|
*/
|
|
245
242
|
alert: PropTypes.bool
|
|
246
|
-
}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "
|
|
243
|
+
}, _defineProperty(_Modal$propTypes, 'aria-label', requiredIfGivenPropIsTruthy('hasScrollingContent', PropTypes.string)), _defineProperty(_Modal$propTypes, "children", PropTypes.node), _defineProperty(_Modal$propTypes, "className", PropTypes.string), _defineProperty(_Modal$propTypes, "closeButtonLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "danger", PropTypes.bool), _defineProperty(_Modal$propTypes, "hasScrollingContent", PropTypes.bool), _defineProperty(_Modal$propTypes, "id", PropTypes.string), _defineProperty(_Modal$propTypes, "modalAriaLabel", PropTypes.string), _defineProperty(_Modal$propTypes, "modalHeading", PropTypes.node), _defineProperty(_Modal$propTypes, "modalLabel", PropTypes.node), _defineProperty(_Modal$propTypes, "onKeyDown", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestClose", PropTypes.func), _defineProperty(_Modal$propTypes, "onRequestSubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "onSecondarySubmit", PropTypes.func), _defineProperty(_Modal$propTypes, "open", PropTypes.bool), _defineProperty(_Modal$propTypes, "passiveModal", PropTypes.bool), _defineProperty(_Modal$propTypes, "preventCloseOnClickOutside", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonDisabled", PropTypes.bool), _defineProperty(_Modal$propTypes, "primaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtonText", PropTypes.node), _defineProperty(_Modal$propTypes, "secondaryButtons", function secondaryButtons(props, propName, componentName) {
|
|
247
244
|
if (props.secondaryButtons) {
|
|
248
245
|
if (!Array.isArray(props.secondaryButtons) || props.secondaryButtons.length !== 2) {
|
|
249
246
|
return new Error("".concat(propName, " needs to be an array of two button config objects"));
|
|
@@ -16,7 +16,6 @@ import { defaultFilterItems } from '../ComboBox/tools/filter.js';
|
|
|
16
16
|
import { sortingPropTypes } from './MultiSelectPropTypes.js';
|
|
17
17
|
import '../ListBox/index.js';
|
|
18
18
|
import Selection from '../../internal/Selection.js';
|
|
19
|
-
import { mapDownshiftProps } from '../../tools/createPropAdapter.js';
|
|
20
19
|
import { defaultItemToString } from './tools/itemToString.js';
|
|
21
20
|
import mergeRefs from '../../tools/mergeRefs.js';
|
|
22
21
|
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
|
|
@@ -221,7 +220,7 @@ var FilterableMultiSelect = /*#__PURE__*/function (_React$Component) {
|
|
|
221
220
|
var selectedItems = _ref2.selectedItems,
|
|
222
221
|
onItemChange = _ref2.onItemChange,
|
|
223
222
|
_clearSelection = _ref2.clearSelection;
|
|
224
|
-
return /*#__PURE__*/React__default.createElement(Downshift, _extends({},
|
|
223
|
+
return /*#__PURE__*/React__default.createElement(Downshift, _extends({}, downshiftProps, {
|
|
225
224
|
highlightedIndex: highlightedIndex,
|
|
226
225
|
id: id,
|
|
227
226
|
isOpen: isOpen,
|
|
@@ -18,7 +18,6 @@ import { defaultItemToString } from './tools/itemToString.js';
|
|
|
18
18
|
import { defaultCompareItems, defaultSortItems } from './tools/sorting.js';
|
|
19
19
|
import { useSelection } from '../../internal/Selection.js';
|
|
20
20
|
import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
|
|
21
|
-
import { mapDownshiftProps } from '../../tools/createPropAdapter.js';
|
|
22
21
|
import mergeRefs from '../../tools/mergeRefs.js';
|
|
23
22
|
import { useFeatureFlag } from '../FeatureFlags/index.js';
|
|
24
23
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
@@ -108,7 +107,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
|
|
|
108
107
|
onItemChange = _useSelection.onItemChange,
|
|
109
108
|
clearSelection = _useSelection.clearSelection;
|
|
110
109
|
|
|
111
|
-
var _useSelect = useSelect(
|
|
110
|
+
var _useSelect = useSelect(_objectSpread2(_objectSpread2({}, downshiftProps), {}, {
|
|
112
111
|
highlightedIndex: highlightedIndex,
|
|
113
112
|
isOpen: isOpen,
|
|
114
113
|
itemToString: function itemToString(items) {
|
|
@@ -119,7 +118,7 @@ var MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_r
|
|
|
119
118
|
onStateChange: onStateChange,
|
|
120
119
|
selectedItem: controlledSelectedItems,
|
|
121
120
|
items: items
|
|
122
|
-
}))
|
|
121
|
+
})),
|
|
123
122
|
getToggleButtonProps = _useSelect.getToggleButtonProps,
|
|
124
123
|
getLabelProps = _useSelect.getLabelProps,
|
|
125
124
|
getMenuProps = _useSelect.getMenuProps,
|
|
@@ -16,7 +16,6 @@ import { defaultFilterItems } from '../../ComboBox/tools/filter.js';
|
|
|
16
16
|
import { sortingPropTypes } from '../MultiSelectPropTypes.js';
|
|
17
17
|
import '../../ListBox/index.js';
|
|
18
18
|
import Selection from '../../../internal/Selection.js';
|
|
19
|
-
import { mapDownshiftProps } from '../../../tools/createPropAdapter.js';
|
|
20
19
|
import { defaultItemToString } from '../tools/itemToString.js';
|
|
21
20
|
import mergeRefs from '../../../tools/mergeRefs.js';
|
|
22
21
|
import { useId } from '../../../internal/useId.js';
|
|
@@ -202,7 +201,7 @@ var FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Filt
|
|
|
202
201
|
var selectedItems = _ref3.selectedItems,
|
|
203
202
|
onItemChange = _ref3.onItemChange,
|
|
204
203
|
_clearSelection = _ref3.clearSelection;
|
|
205
|
-
return /*#__PURE__*/React__default.createElement(Downshift, _extends({},
|
|
204
|
+
return /*#__PURE__*/React__default.createElement(Downshift, _extends({}, downshiftProps, {
|
|
206
205
|
highlightedIndex: highlightedIndex,
|
|
207
206
|
id: id,
|
|
208
207
|
isOpen: isOpen,
|