@carbon/react 1.13.0 → 1.14.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/Accordion/Accordion.Skeleton.js +12 -4
- package/es/components/Accordion/Accordion.js +9 -2
- package/es/components/FileUploader/Filename.js +3 -1
- package/es/components/FluidTextArea/FluidTextArea.js +130 -0
- package/es/components/FluidTextInput/FluidTextInput.js +13 -4
- package/es/components/Notification/Notification.js +6 -2
- package/es/components/ProgressIndicator/ProgressIndicator.js +128 -154
- package/es/components/RadioTile/RadioTile.js +2 -11
- package/es/components/TextArea/TextArea.js +14 -5
- package/es/components/TextInput/PasswordInput.js +7 -6
- package/es/index.js +2 -2
- package/lib/components/Accordion/Accordion.Skeleton.js +12 -4
- package/lib/components/Accordion/Accordion.js +9 -2
- package/lib/components/FileUploader/Filename.js +3 -1
- package/lib/components/FluidTextArea/FluidTextArea.js +140 -0
- package/lib/components/FluidTextInput/FluidTextInput.js +12 -3
- package/lib/components/Notification/Notification.js +6 -2
- package/lib/components/ProgressIndicator/ProgressIndicator.js +126 -152
- package/lib/components/RadioTile/RadioTile.js +2 -11
- package/lib/components/TextArea/TextArea.js +13 -4
- package/lib/components/TextInput/PasswordInput.js +7 -6
- package/lib/index.js +47 -46
- package/package.json +7 -6
- package/es/components/ProgressIndicator/index.js +0 -15
- package/es/components/ProgressIndicator/next/ProgressIndicator.js +0 -117
- package/lib/components/ProgressIndicator/index.js +0 -39
- package/lib/components/ProgressIndicator/next/ProgressIndicator.js +0 -127
|
@@ -15,17 +15,20 @@ import { usePrefix } from '../../internal/usePrefix.js';
|
|
|
15
15
|
|
|
16
16
|
var _SkeletonText, _SkeletonText2, _SkeletonText3;
|
|
17
17
|
|
|
18
|
-
var _excluded = ["align", "
|
|
18
|
+
var _excluded = ["align", "className", "count", "isFlush", "open"];
|
|
19
19
|
|
|
20
20
|
function AccordionSkeleton(_ref) {
|
|
21
|
+
var _cx;
|
|
22
|
+
|
|
21
23
|
var align = _ref.align,
|
|
22
|
-
open = _ref.open,
|
|
23
|
-
count = _ref.count,
|
|
24
24
|
className = _ref.className,
|
|
25
|
+
count = _ref.count,
|
|
26
|
+
isFlush = _ref.isFlush,
|
|
27
|
+
open = _ref.open,
|
|
25
28
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
26
29
|
|
|
27
30
|
var prefix = usePrefix();
|
|
28
|
-
var classes = cx("".concat(prefix, "--accordion"), "".concat(prefix, "--skeleton"), className,
|
|
31
|
+
var classes = cx("".concat(prefix, "--accordion"), "".concat(prefix, "--skeleton"), className, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _defineProperty(_cx, "".concat(prefix, "--accordion--flush"), isFlush && align !== 'start'), _cx));
|
|
29
32
|
var numSkeletonItems = open ? count - 1 : count;
|
|
30
33
|
return /*#__PURE__*/React__default.createElement("ul", _extends({
|
|
31
34
|
className: classes
|
|
@@ -70,6 +73,11 @@ AccordionSkeleton.propTypes = {
|
|
|
70
73
|
*/
|
|
71
74
|
count: PropTypes.number,
|
|
72
75
|
|
|
76
|
+
/**
|
|
77
|
+
* Specify whether an individual AccordionItem should be flush, default is false
|
|
78
|
+
*/
|
|
79
|
+
isFlush: PropTypes.bool,
|
|
80
|
+
|
|
73
81
|
/**
|
|
74
82
|
* `false` to not display the first item opened
|
|
75
83
|
*/
|
|
@@ -12,7 +12,7 @@ import PropTypes from 'prop-types';
|
|
|
12
12
|
import React__default from 'react';
|
|
13
13
|
import * as FeatureFlags from '@carbon/feature-flags';
|
|
14
14
|
|
|
15
|
-
var _excluded = ["align", "children", "className", "disabled", "size"];
|
|
15
|
+
var _excluded = ["align", "children", "className", "disabled", "isFlush", "size"];
|
|
16
16
|
|
|
17
17
|
function Accordion(_ref) {
|
|
18
18
|
var _cx;
|
|
@@ -23,12 +23,14 @@ function Accordion(_ref) {
|
|
|
23
23
|
customClassName = _ref.className,
|
|
24
24
|
_ref$disabled = _ref.disabled,
|
|
25
25
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
26
|
+
_ref$isFlush = _ref.isFlush,
|
|
27
|
+
isFlush = _ref$isFlush === void 0 ? false : _ref$isFlush,
|
|
26
28
|
_ref$size = _ref.size,
|
|
27
29
|
size = _ref$size === void 0 ? 'md' : _ref$size,
|
|
28
30
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
29
31
|
|
|
30
32
|
var prefix = usePrefix();
|
|
31
|
-
var className = cx("".concat(prefix, "--accordion"), customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _defineProperty(_cx, "".concat(prefix, "--accordion--").concat(size), size), _cx));
|
|
33
|
+
var className = cx("".concat(prefix, "--accordion"), customClassName, (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--accordion--").concat(align), align), _defineProperty(_cx, "".concat(prefix, "--accordion--").concat(size), size), _defineProperty(_cx, "".concat(prefix, "--accordion--flush"), isFlush && align !== 'start'), _cx));
|
|
32
34
|
return /*#__PURE__*/React__default.createElement("ul", _extends({
|
|
33
35
|
className: className
|
|
34
36
|
}, rest), disabled ? React__default.Children.toArray(children).map(function (child) {
|
|
@@ -59,6 +61,11 @@ Accordion.propTypes = {
|
|
|
59
61
|
*/
|
|
60
62
|
disabled: PropTypes.bool,
|
|
61
63
|
|
|
64
|
+
/**
|
|
65
|
+
* Specify whether Accordion text should be flush, default is false, does not work with align="start"
|
|
66
|
+
*/
|
|
67
|
+
isFlush: PropTypes.bool,
|
|
68
|
+
|
|
62
69
|
/**
|
|
63
70
|
* Specify the size of the Accordion. Currently supports the following:
|
|
64
71
|
*/
|
|
@@ -45,7 +45,9 @@ function Filename(_ref) {
|
|
|
45
45
|
return /*#__PURE__*/React__default.createElement(CheckmarkFilled, _extends({
|
|
46
46
|
"aria-label": iconDescription,
|
|
47
47
|
className: "".concat(prefix, "--file-complete")
|
|
48
|
-
}, rest
|
|
48
|
+
}, rest, {
|
|
49
|
+
tabIndex: null
|
|
50
|
+
}), iconDescription && /*#__PURE__*/React__default.createElement("title", null, iconDescription));
|
|
49
51
|
|
|
50
52
|
default:
|
|
51
53
|
return null;
|
|
@@ -0,0 +1,130 @@
|
|
|
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, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
9
|
+
import PropTypes from 'prop-types';
|
|
10
|
+
import React__default from 'react';
|
|
11
|
+
import cx from 'classnames';
|
|
12
|
+
import TextArea from '../TextArea/TextArea.js';
|
|
13
|
+
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
|
+
import { FormContext } from '../FluidForm/FormContext.js';
|
|
15
|
+
|
|
16
|
+
var _excluded = ["className"];
|
|
17
|
+
|
|
18
|
+
function FluidTextArea(_ref) {
|
|
19
|
+
var className = _ref.className,
|
|
20
|
+
other = _objectWithoutProperties(_ref, _excluded);
|
|
21
|
+
|
|
22
|
+
var prefix = usePrefix();
|
|
23
|
+
var classNames = cx("".concat(prefix, "--text-area--fluid"), className);
|
|
24
|
+
return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
|
|
25
|
+
value: {
|
|
26
|
+
isFluid: true
|
|
27
|
+
}
|
|
28
|
+
}, /*#__PURE__*/React__default.createElement(TextArea, _extends({
|
|
29
|
+
className: classNames
|
|
30
|
+
}, other)));
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
FluidTextArea.propTypes = {
|
|
34
|
+
/**
|
|
35
|
+
* Provide a custom className that is applied directly to the underlying
|
|
36
|
+
* `<textarea>` node
|
|
37
|
+
*/
|
|
38
|
+
className: PropTypes.string,
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Specify the `cols` attribute for the underlying `<textarea>` node
|
|
42
|
+
*/
|
|
43
|
+
cols: PropTypes.number,
|
|
44
|
+
|
|
45
|
+
/**
|
|
46
|
+
* Optionally provide the default value of the `<textarea>`
|
|
47
|
+
*/
|
|
48
|
+
defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
49
|
+
|
|
50
|
+
/**
|
|
51
|
+
* Specify whether the control is disabled
|
|
52
|
+
*/
|
|
53
|
+
disabled: PropTypes.bool,
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* Specify whether to display the character counter
|
|
57
|
+
*/
|
|
58
|
+
enableCounter: PropTypes.bool,
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* Provide text that is used alongside the control label for additional help
|
|
62
|
+
*/
|
|
63
|
+
helperText: PropTypes.node,
|
|
64
|
+
|
|
65
|
+
/**
|
|
66
|
+
* Specify whether you want the underlying label to be visually hidden
|
|
67
|
+
*/
|
|
68
|
+
hideLabel: PropTypes.bool,
|
|
69
|
+
|
|
70
|
+
/**
|
|
71
|
+
* Provide a unique identifier for the control
|
|
72
|
+
*/
|
|
73
|
+
id: PropTypes.string,
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* Specify whether the control is currently invalid
|
|
77
|
+
*/
|
|
78
|
+
invalid: PropTypes.bool,
|
|
79
|
+
|
|
80
|
+
/**
|
|
81
|
+
* Provide the text that is displayed when the control is in an invalid state
|
|
82
|
+
*/
|
|
83
|
+
invalidText: PropTypes.node,
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Provide the text that will be read by a screen reader when visiting this
|
|
87
|
+
* control
|
|
88
|
+
*/
|
|
89
|
+
labelText: PropTypes.node.isRequired,
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* `true` to use the light version. For use on $ui-01 backgrounds only.
|
|
93
|
+
* Don't use this to make tile background color same as container background color.
|
|
94
|
+
*/
|
|
95
|
+
light: PropTypes.bool,
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* Max character count allowed for the textarea. This is needed in order for enableCounter to display
|
|
99
|
+
*/
|
|
100
|
+
maxCount: PropTypes.number,
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* Optionally provide an `onChange` handler that is called whenever `<textarea>`
|
|
104
|
+
* is updated
|
|
105
|
+
*/
|
|
106
|
+
onChange: PropTypes.func,
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Optionally provide an `onClick` handler that is called whenever the
|
|
110
|
+
* `<textarea>` is clicked
|
|
111
|
+
*/
|
|
112
|
+
onClick: PropTypes.func,
|
|
113
|
+
|
|
114
|
+
/**
|
|
115
|
+
* Specify the placeholder attribute for the `<textarea>`
|
|
116
|
+
*/
|
|
117
|
+
placeholder: PropTypes.string,
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* Specify the rows attribute for the `<textarea>`
|
|
121
|
+
*/
|
|
122
|
+
rows: PropTypes.number,
|
|
123
|
+
|
|
124
|
+
/**
|
|
125
|
+
* Provide the current value of the `<textarea>`
|
|
126
|
+
*/
|
|
127
|
+
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
128
|
+
};
|
|
129
|
+
|
|
130
|
+
export { FluidTextArea as default };
|
|
@@ -5,28 +5,32 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, 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
12
|
import '../TextInput/index.js';
|
|
13
|
+
import PasswordInput from '../TextInput/PasswordInput.js';
|
|
13
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
15
|
import { FormContext } from '../FluidForm/FormContext.js';
|
|
15
16
|
import TextInput from '../TextInput/TextInput.js';
|
|
16
17
|
|
|
17
|
-
var _excluded = ["className"];
|
|
18
|
+
var _excluded = ["className", "isPassword"];
|
|
18
19
|
|
|
19
20
|
function FluidTextInput(_ref) {
|
|
20
21
|
var className = _ref.className,
|
|
22
|
+
isPassword = _ref.isPassword,
|
|
21
23
|
other = _objectWithoutProperties(_ref, _excluded);
|
|
22
24
|
|
|
23
25
|
var prefix = usePrefix();
|
|
24
|
-
var classNames = cx("".concat(prefix, "--text-input--fluid"),
|
|
26
|
+
var classNames = cx(className, _defineProperty({}, "".concat(prefix, "--text-input--fluid"), !isPassword));
|
|
25
27
|
return /*#__PURE__*/React__default.createElement(FormContext.Provider, {
|
|
26
28
|
value: {
|
|
27
29
|
isFluid: true
|
|
28
30
|
}
|
|
29
|
-
}, /*#__PURE__*/React__default.createElement(
|
|
31
|
+
}, isPassword ? /*#__PURE__*/React__default.createElement(PasswordInput, _extends({
|
|
32
|
+
className: classNames
|
|
33
|
+
}, other)) : /*#__PURE__*/React__default.createElement(TextInput, _extends({
|
|
30
34
|
className: classNames
|
|
31
35
|
}, other)));
|
|
32
36
|
}
|
|
@@ -62,6 +66,11 @@ FluidTextInput.propTypes = {
|
|
|
62
66
|
*/
|
|
63
67
|
invalidText: PropTypes.node,
|
|
64
68
|
|
|
69
|
+
/**
|
|
70
|
+
* Specify whether the control is a password input
|
|
71
|
+
*/
|
|
72
|
+
isPassword: PropTypes.bool,
|
|
73
|
+
|
|
65
74
|
/**
|
|
66
75
|
* Provide the text that will be read by a screen reader when visiting this
|
|
67
76
|
* control
|
|
@@ -14,6 +14,7 @@ import Button from '../Button/Button.js';
|
|
|
14
14
|
import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
|
|
15
15
|
import { useNoInteractiveChildren } from '../../internal/useNoInteractiveChildren.js';
|
|
16
16
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
17
|
+
import { useId } from '../../internal/useId.js';
|
|
17
18
|
import { matches } from '../../internal/keyboard/match.js';
|
|
18
19
|
import { Escape } from '../../internal/keyboard/keys.js';
|
|
19
20
|
|
|
@@ -506,6 +507,7 @@ function ActionableNotification(_ref6) {
|
|
|
506
507
|
setIsOpen = _useState6[1];
|
|
507
508
|
|
|
508
509
|
var prefix = usePrefix();
|
|
510
|
+
var id = useId('actionable-notification');
|
|
509
511
|
var containerClassName = cx(className, (_cx6 = {}, _defineProperty(_cx6, "".concat(prefix, "--actionable-notification"), true), _defineProperty(_cx6, "".concat(prefix, "--actionable-notification--toast"), !inline), _defineProperty(_cx6, "".concat(prefix, "--actionable-notification--low-contrast"), lowContrast), _defineProperty(_cx6, "".concat(prefix, "--actionable-notification--").concat(kind), kind), _defineProperty(_cx6, "".concat(prefix, "--actionable-notification--hide-close-button"), hideCloseButton), _cx6));
|
|
510
512
|
var ref = useRef(null);
|
|
511
513
|
useIsomorphicEffect(function () {
|
|
@@ -534,7 +536,8 @@ function ActionableNotification(_ref6) {
|
|
|
534
536
|
return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
|
|
535
537
|
ref: ref,
|
|
536
538
|
role: role,
|
|
537
|
-
className: containerClassName
|
|
539
|
+
className: containerClassName,
|
|
540
|
+
"aria-labelledby": title ? id : undefined
|
|
538
541
|
}), /*#__PURE__*/React__default.createElement("div", {
|
|
539
542
|
className: "".concat(prefix, "--actionable-notification__details")
|
|
540
543
|
}, /*#__PURE__*/React__default.createElement(NotificationIcon, {
|
|
@@ -546,7 +549,8 @@ function ActionableNotification(_ref6) {
|
|
|
546
549
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
547
550
|
className: "".concat(prefix, "--actionable-notification__content")
|
|
548
551
|
}, title && /*#__PURE__*/React__default.createElement("div", {
|
|
549
|
-
className: "".concat(prefix, "--actionable-notification__title")
|
|
552
|
+
className: "".concat(prefix, "--actionable-notification__title"),
|
|
553
|
+
id: id
|
|
550
554
|
}, title), subtitle && /*#__PURE__*/React__default.createElement("div", {
|
|
551
555
|
className: "".concat(prefix, "--actionable-notification__subtitle")
|
|
552
556
|
}, subtitle), children))), /*#__PURE__*/React__default.createElement(NotificationActionButton, {
|
|
@@ -5,17 +5,17 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { objectWithoutProperties as _objectWithoutProperties,
|
|
9
|
-
import PropTypes from 'prop-types';
|
|
10
|
-
import React__default, { Component } from 'react';
|
|
8
|
+
import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, defineProperty as _defineProperty, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
|
|
11
9
|
import cx from 'classnames';
|
|
10
|
+
import PropTypes from 'prop-types';
|
|
11
|
+
import React__default, { useState } from 'react';
|
|
12
12
|
import { Warning, Incomplete, CheckmarkOutline, CircleDash } from '@carbon/icons-react';
|
|
13
|
-
import { usePrefix
|
|
13
|
+
import { usePrefix } from '../../internal/usePrefix.js';
|
|
14
14
|
import { matches } from '../../internal/keyboard/match.js';
|
|
15
15
|
import { Enter, Space } from '../../internal/keyboard/keys.js';
|
|
16
16
|
|
|
17
|
-
var _excluded = ["
|
|
18
|
-
_excluded2 = ["className", "
|
|
17
|
+
var _excluded = ["children", "className", "currentIndex", "onChange", "spaceEqually", "vertical"],
|
|
18
|
+
_excluded2 = ["label", "description", "className", "current", "complete", "invalid", "secondaryLabel", "disabled", "onClick", "translateWithId"];
|
|
19
19
|
var defaultTranslations = {
|
|
20
20
|
'carbon.progress-step.complete': 'Complete',
|
|
21
21
|
'carbon.progress-step.incomplete': 'Incomplete',
|
|
@@ -27,23 +27,124 @@ function translateWithId(messageId) {
|
|
|
27
27
|
return defaultTranslations[messageId];
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
function
|
|
31
|
-
var
|
|
32
|
-
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
disabled = _ref.disabled,
|
|
41
|
-
onClick = _ref.onClick,
|
|
42
|
-
t = _ref.translateWithId,
|
|
30
|
+
function ProgressIndicator(_ref) {
|
|
31
|
+
var _cx;
|
|
32
|
+
|
|
33
|
+
var children = _ref.children,
|
|
34
|
+
customClassName = _ref.className,
|
|
35
|
+
_ref$currentIndex = _ref.currentIndex,
|
|
36
|
+
controlledIndex = _ref$currentIndex === void 0 ? 0 : _ref$currentIndex,
|
|
37
|
+
onChange = _ref.onChange,
|
|
38
|
+
spaceEqually = _ref.spaceEqually,
|
|
39
|
+
vertical = _ref.vertical,
|
|
43
40
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
44
41
|
|
|
45
42
|
var prefix = usePrefix();
|
|
46
|
-
|
|
43
|
+
|
|
44
|
+
var _useState = useState(controlledIndex),
|
|
45
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
46
|
+
currentIndex = _useState2[0],
|
|
47
|
+
setCurrentIndex = _useState2[1];
|
|
48
|
+
|
|
49
|
+
var _useState3 = useState(controlledIndex),
|
|
50
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
+
prevControlledIndex = _useState4[0],
|
|
52
|
+
setPrevControlledIndex = _useState4[1];
|
|
53
|
+
|
|
54
|
+
var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--progress"), true), _defineProperty(_cx, "".concat(prefix, "--progress--vertical"), vertical), _defineProperty(_cx, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _defineProperty(_cx, customClassName, customClassName), _cx));
|
|
55
|
+
|
|
56
|
+
if (controlledIndex !== prevControlledIndex) {
|
|
57
|
+
setCurrentIndex(controlledIndex);
|
|
58
|
+
setPrevControlledIndex(controlledIndex);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
return /*#__PURE__*/React__default.createElement("ul", _extends({
|
|
62
|
+
className: className
|
|
63
|
+
}, rest), React__default.Children.map(children, function (child, index) {
|
|
64
|
+
// only setup click handlers if onChange event is passed
|
|
65
|
+
var onClick = onChange ? function () {
|
|
66
|
+
return onChange(index);
|
|
67
|
+
} : undefined;
|
|
68
|
+
|
|
69
|
+
if (index === currentIndex) {
|
|
70
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
71
|
+
complete: child.props.complete,
|
|
72
|
+
current: child.props.complete ? false : true,
|
|
73
|
+
index: index,
|
|
74
|
+
onClick: onClick
|
|
75
|
+
});
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
if (index < currentIndex) {
|
|
79
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
80
|
+
complete: true,
|
|
81
|
+
index: index,
|
|
82
|
+
onClick: onClick
|
|
83
|
+
});
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
if (index > currentIndex) {
|
|
87
|
+
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
88
|
+
complete: child.props.complete || false,
|
|
89
|
+
index: index,
|
|
90
|
+
onClick: onClick
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
return null;
|
|
95
|
+
}));
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
ProgressIndicator.propTypes = {
|
|
99
|
+
/**
|
|
100
|
+
* Provide `<ProgressStep>` components to be rendered in the
|
|
101
|
+
* `<ProgressIndicator>`
|
|
102
|
+
*/
|
|
103
|
+
children: PropTypes.node,
|
|
104
|
+
|
|
105
|
+
/**
|
|
106
|
+
* Provide an optional className to be applied to the containing node
|
|
107
|
+
*/
|
|
108
|
+
className: PropTypes.string,
|
|
109
|
+
|
|
110
|
+
/**
|
|
111
|
+
* Optionally specify the current step array index
|
|
112
|
+
*/
|
|
113
|
+
currentIndex: PropTypes.number,
|
|
114
|
+
|
|
115
|
+
/**
|
|
116
|
+
* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
|
|
117
|
+
*/
|
|
118
|
+
onChange: PropTypes.func,
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Specify whether the progress steps should be split equally in size in the div
|
|
122
|
+
*/
|
|
123
|
+
spaceEqually: PropTypes.bool,
|
|
124
|
+
|
|
125
|
+
/**
|
|
126
|
+
* Determines whether or not the ProgressIndicator should be rendered vertically.
|
|
127
|
+
*/
|
|
128
|
+
vertical: PropTypes.bool
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
function ProgressStep(_ref2) {
|
|
132
|
+
var _cx2;
|
|
133
|
+
|
|
134
|
+
var label = _ref2.label,
|
|
135
|
+
description = _ref2.description,
|
|
136
|
+
className = _ref2.className,
|
|
137
|
+
current = _ref2.current,
|
|
138
|
+
complete = _ref2.complete,
|
|
139
|
+
invalid = _ref2.invalid,
|
|
140
|
+
secondaryLabel = _ref2.secondaryLabel,
|
|
141
|
+
disabled = _ref2.disabled,
|
|
142
|
+
onClick = _ref2.onClick,
|
|
143
|
+
t = _ref2.translateWithId,
|
|
144
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
145
|
+
|
|
146
|
+
var prefix = usePrefix();
|
|
147
|
+
var classes = cx((_cx2 = {}, _defineProperty(_cx2, "".concat(prefix, "--progress-step"), true), _defineProperty(_cx2, "".concat(prefix, "--progress-step--current"), current), _defineProperty(_cx2, "".concat(prefix, "--progress-step--complete"), complete), _defineProperty(_cx2, "".concat(prefix, "--progress-step--incomplete"), !complete && !current), _defineProperty(_cx2, "".concat(prefix, "--progress-step--disabled"), disabled), _defineProperty(_cx2, className, className), _cx2));
|
|
47
148
|
|
|
48
149
|
var handleKeyDown = function handleKeyDown(e) {
|
|
49
150
|
if (matches(e, [Enter, Space])) {
|
|
@@ -52,12 +153,12 @@ function ProgressStep(_ref) {
|
|
|
52
153
|
}; // eslint-disable-next-line react/prop-types
|
|
53
154
|
|
|
54
155
|
|
|
55
|
-
var SVGIcon = function SVGIcon(
|
|
56
|
-
var complete =
|
|
57
|
-
current =
|
|
58
|
-
description =
|
|
59
|
-
invalid =
|
|
60
|
-
prefix =
|
|
156
|
+
var SVGIcon = function SVGIcon(_ref3) {
|
|
157
|
+
var complete = _ref3.complete,
|
|
158
|
+
current = _ref3.current,
|
|
159
|
+
description = _ref3.description,
|
|
160
|
+
invalid = _ref3.invalid,
|
|
161
|
+
prefix = _ref3.prefix;
|
|
61
162
|
|
|
62
163
|
if (invalid) {
|
|
63
164
|
return /*#__PURE__*/React__default.createElement(Warning, {
|
|
@@ -119,6 +220,7 @@ function ProgressStep(_ref) {
|
|
|
119
220
|
className: "".concat(prefix, "--progress-line")
|
|
120
221
|
})));
|
|
121
222
|
}
|
|
223
|
+
|
|
122
224
|
ProgressStep.propTypes = {
|
|
123
225
|
/**
|
|
124
226
|
* Provide an optional className to be applied to the containing `<li>` node
|
|
@@ -189,133 +291,5 @@ ProgressStep.propTypes = {
|
|
|
189
291
|
ProgressStep.defaultProps = {
|
|
190
292
|
translateWithId: translateWithId
|
|
191
293
|
};
|
|
192
|
-
var ProgressIndicator = /*#__PURE__*/function (_Component) {
|
|
193
|
-
_inherits(ProgressIndicator, _Component);
|
|
194
|
-
|
|
195
|
-
var _super = _createSuper(ProgressIndicator);
|
|
196
|
-
|
|
197
|
-
function ProgressIndicator() {
|
|
198
|
-
var _this;
|
|
199
|
-
|
|
200
|
-
_classCallCheck(this, ProgressIndicator);
|
|
201
|
-
|
|
202
|
-
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
203
|
-
args[_key] = arguments[_key];
|
|
204
|
-
}
|
|
205
|
-
|
|
206
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
207
|
-
|
|
208
|
-
_defineProperty(_assertThisInitialized(_this), "state", {});
|
|
209
|
-
|
|
210
|
-
_defineProperty(_assertThisInitialized(_this), "renderSteps", function () {
|
|
211
|
-
var onChange = _this.props.onChange;
|
|
212
|
-
return React__default.Children.map(_this.props.children, function (child, index) {
|
|
213
|
-
// only setup click handlers if onChange event is passed
|
|
214
|
-
var onClick = onChange ? function () {
|
|
215
|
-
return onChange(index);
|
|
216
|
-
} : undefined;
|
|
217
|
-
|
|
218
|
-
if (index === _this.state.currentIndex) {
|
|
219
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
220
|
-
current: true,
|
|
221
|
-
index: index,
|
|
222
|
-
onClick: onClick
|
|
223
|
-
});
|
|
224
|
-
}
|
|
225
|
-
|
|
226
|
-
if (index < _this.state.currentIndex) {
|
|
227
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
228
|
-
complete: true,
|
|
229
|
-
index: index,
|
|
230
|
-
onClick: onClick
|
|
231
|
-
});
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
if (index > _this.state.currentIndex) {
|
|
235
|
-
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
236
|
-
complete: child.props.complete || false,
|
|
237
|
-
index: index,
|
|
238
|
-
onClick: onClick
|
|
239
|
-
});
|
|
240
|
-
}
|
|
241
|
-
|
|
242
|
-
return null;
|
|
243
|
-
});
|
|
244
|
-
});
|
|
245
|
-
|
|
246
|
-
return _this;
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
_createClass(ProgressIndicator, [{
|
|
250
|
-
key: "render",
|
|
251
|
-
value: function render() {
|
|
252
|
-
var _classnames3;
|
|
253
|
-
|
|
254
|
-
var _this$props = this.props,
|
|
255
|
-
className = _this$props.className;
|
|
256
|
-
_this$props.currentIndex;
|
|
257
|
-
var vertical = _this$props.vertical,
|
|
258
|
-
spaceEqually = _this$props.spaceEqually,
|
|
259
|
-
other = _objectWithoutProperties(_this$props, _excluded2);
|
|
260
|
-
|
|
261
|
-
var prefix = this.context;
|
|
262
|
-
var classes = cx((_classnames3 = {}, _defineProperty(_classnames3, "".concat(prefix, "--progress"), true), _defineProperty(_classnames3, "".concat(prefix, "--progress--vertical"), vertical), _defineProperty(_classnames3, "".concat(prefix, "--progress--space-equal"), spaceEqually && !vertical), _defineProperty(_classnames3, className, className), _classnames3));
|
|
263
|
-
return /*#__PURE__*/React__default.createElement("ul", _extends({
|
|
264
|
-
className: classes
|
|
265
|
-
}, other), this.renderSteps());
|
|
266
|
-
}
|
|
267
|
-
}], [{
|
|
268
|
-
key: "getDerivedStateFromProps",
|
|
269
|
-
value: function getDerivedStateFromProps(_ref3, state) {
|
|
270
|
-
var currentIndex = _ref3.currentIndex;
|
|
271
|
-
var prevCurrentIndex = state.prevCurrentIndex;
|
|
272
|
-
return prevCurrentIndex === currentIndex ? null : {
|
|
273
|
-
currentIndex: currentIndex,
|
|
274
|
-
prevCurrentIndex: currentIndex
|
|
275
|
-
};
|
|
276
|
-
}
|
|
277
|
-
}]);
|
|
278
|
-
|
|
279
|
-
return ProgressIndicator;
|
|
280
|
-
}(Component);
|
|
281
|
-
|
|
282
|
-
_defineProperty(ProgressIndicator, "propTypes", {
|
|
283
|
-
/**
|
|
284
|
-
* Provide `<ProgressStep>` components to be rendered in the
|
|
285
|
-
* `<ProgressIndicator>`
|
|
286
|
-
*/
|
|
287
|
-
children: PropTypes.node,
|
|
288
|
-
|
|
289
|
-
/**
|
|
290
|
-
* Provide an optional className to be applied to the containing node
|
|
291
|
-
*/
|
|
292
|
-
className: PropTypes.string,
|
|
293
|
-
|
|
294
|
-
/**
|
|
295
|
-
* Optionally specify the current step array index
|
|
296
|
-
*/
|
|
297
|
-
currentIndex: PropTypes.number,
|
|
298
|
-
|
|
299
|
-
/**
|
|
300
|
-
* Optional callback called if a ProgressStep is clicked on. Returns the index of the step.
|
|
301
|
-
*/
|
|
302
|
-
onChange: PropTypes.func,
|
|
303
|
-
|
|
304
|
-
/**
|
|
305
|
-
* Specify whether the progress steps should be split equally in size in the div
|
|
306
|
-
*/
|
|
307
|
-
spaceEqually: PropTypes.bool,
|
|
308
|
-
|
|
309
|
-
/**
|
|
310
|
-
* Determines whether or not the ProgressIndicator should be rendered vertically.
|
|
311
|
-
*/
|
|
312
|
-
vertical: PropTypes.bool
|
|
313
|
-
});
|
|
314
|
-
|
|
315
|
-
_defineProperty(ProgressIndicator, "contextType", PrefixContext);
|
|
316
|
-
|
|
317
|
-
_defineProperty(ProgressIndicator, "defaultProps", {
|
|
318
|
-
currentIndex: 0
|
|
319
|
-
});
|
|
320
294
|
|
|
321
295
|
export { ProgressIndicator, ProgressStep };
|
|
@@ -11,7 +11,6 @@ import cx from 'classnames';
|
|
|
11
11
|
import PropTypes from 'prop-types';
|
|
12
12
|
import React__default from 'react';
|
|
13
13
|
import { useFallbackId } from '../../internal/useId.js';
|
|
14
|
-
import { useFeatureFlag } from '../FeatureFlags/index.js';
|
|
15
14
|
import { usePrefix } from '../../internal/usePrefix.js';
|
|
16
15
|
import deprecate from '../../prop-types/deprecate.js';
|
|
17
16
|
import { matches } from '../../internal/keyboard/match.js';
|
|
@@ -38,10 +37,7 @@ function RadioTile(_ref) {
|
|
|
38
37
|
|
|
39
38
|
var prefix = usePrefix();
|
|
40
39
|
var inputId = useFallbackId(id);
|
|
41
|
-
var enabled = useFeatureFlag('enable-v11-release');
|
|
42
40
|
var className = cx(customClassName, "".concat(prefix, "--tile"), "".concat(prefix, "--tile--selectable"), (_cx = {}, _defineProperty(_cx, "".concat(prefix, "--tile--is-selected"), checked), _defineProperty(_cx, "".concat(prefix, "--tile--light"), light), _defineProperty(_cx, "".concat(prefix, "--tile--disabled"), disabled), _cx));
|
|
43
|
-
var inputProps = enabled ? {} : rest;
|
|
44
|
-
var labelProps = enabled ? rest : {};
|
|
45
41
|
|
|
46
42
|
function handleOnChange(evt) {
|
|
47
43
|
onChange(value, name, evt);
|
|
@@ -54,7 +50,7 @@ function RadioTile(_ref) {
|
|
|
54
50
|
}
|
|
55
51
|
}
|
|
56
52
|
|
|
57
|
-
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input",
|
|
53
|
+
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("input", {
|
|
58
54
|
checked: checked,
|
|
59
55
|
className: "".concat(prefix, "--tile-input"),
|
|
60
56
|
disabled: disabled,
|
|
@@ -65,7 +61,7 @@ function RadioTile(_ref) {
|
|
|
65
61
|
tabIndex: !disabled ? tabIndex : null,
|
|
66
62
|
type: "radio",
|
|
67
63
|
value: value
|
|
68
|
-
})
|
|
64
|
+
}), /*#__PURE__*/React__default.createElement("label", _extends({}, rest, {
|
|
69
65
|
htmlFor: inputId,
|
|
70
66
|
className: className
|
|
71
67
|
}), /*#__PURE__*/React__default.createElement("span", {
|
|
@@ -91,11 +87,6 @@ RadioTile.propTypes = {
|
|
|
91
87
|
*/
|
|
92
88
|
className: PropTypes.string,
|
|
93
89
|
|
|
94
|
-
/**
|
|
95
|
-
* `true` if the `<input>` should be checked at initialization.
|
|
96
|
-
*/
|
|
97
|
-
defaultChecked: PropTypes.bool,
|
|
98
|
-
|
|
99
90
|
/**
|
|
100
91
|
* Specify whether the RadioTile should be disabled
|
|
101
92
|
*/
|