@carbon/react 1.21.0-rc.0 → 1.21.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.
|
@@ -62,6 +62,10 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, for
|
|
|
62
62
|
|
|
63
63
|
var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _defineProperty(_cx, customClassName, !!customClassName), _cx));
|
|
64
64
|
useIsomorphicEffect(function () {
|
|
65
|
+
if (!open) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
|
|
65
69
|
if (!autoAlign) {
|
|
66
70
|
setAutoAligned(false);
|
|
67
71
|
return;
|
|
@@ -149,7 +153,7 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, for
|
|
|
149
153
|
setAutoAligned(true);
|
|
150
154
|
setAutoAlignment(alignment);
|
|
151
155
|
}
|
|
152
|
-
}, [autoAligned, align, autoAlign, prefix]);
|
|
156
|
+
}, [autoAligned, align, autoAlign, prefix, open]);
|
|
153
157
|
return /*#__PURE__*/React__default.createElement(PopoverContext.Provider, {
|
|
154
158
|
value: value
|
|
155
159
|
}, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
|
|
@@ -61,11 +61,15 @@ var Stack = /*#__PURE__*/React__default.forwardRef(function Stack(props, ref) {
|
|
|
61
61
|
style["--".concat(prefix, "-stack-gap")] = gap;
|
|
62
62
|
}
|
|
63
63
|
|
|
64
|
-
return
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
return (
|
|
65
|
+
/*#__PURE__*/
|
|
66
|
+
// eslint-disable-next-line react/forbid-component-props
|
|
67
|
+
React__default.createElement(BaseComponent, _extends({}, rest, {
|
|
68
|
+
ref: ref,
|
|
69
|
+
className: className,
|
|
70
|
+
style: style
|
|
71
|
+
}), children)
|
|
72
|
+
);
|
|
69
73
|
});
|
|
70
74
|
Stack.propTypes = {
|
|
71
75
|
/**
|
|
@@ -14,11 +14,12 @@ import { usePrefix } from '../../internal/usePrefix.js';
|
|
|
14
14
|
|
|
15
15
|
var _path;
|
|
16
16
|
|
|
17
|
-
var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "readOnly", "size", "toggled"];
|
|
17
|
+
var _excluded = ["aria-labelledby", "className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "readOnly", "size", "toggled"];
|
|
18
18
|
function Toggle(_ref) {
|
|
19
19
|
var _classNames;
|
|
20
20
|
|
|
21
|
-
var
|
|
21
|
+
var ariaLabelledby = _ref['aria-labelledby'],
|
|
22
|
+
className = _ref.className,
|
|
22
23
|
_ref$defaultToggled = _ref.defaultToggled,
|
|
23
24
|
defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
|
|
24
25
|
_ref$disabled = _ref.disabled,
|
|
@@ -62,6 +63,8 @@ function Toggle(_ref) {
|
|
|
62
63
|
|
|
63
64
|
var isSm = size === 'sm';
|
|
64
65
|
var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
|
|
66
|
+
var renderSideLabel = !(hideLabel && ariaLabelledby);
|
|
67
|
+
var LabelComponent = ariaLabelledby ? 'div' : 'label';
|
|
65
68
|
var wrapperClasses = cx("".concat(prefix, "--toggle"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), className);
|
|
66
69
|
var labelTextClasses = cx("".concat(prefix, "--toggle__label-text"), _defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
|
|
67
70
|
var appearanceClasses = cx("".concat(prefix, "--toggle__appearance"), _defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
|
|
@@ -74,12 +77,13 @@ function Toggle(_ref) {
|
|
|
74
77
|
role: "switch",
|
|
75
78
|
type: "button",
|
|
76
79
|
"aria-checked": checked,
|
|
80
|
+
"aria-labelledby": ariaLabelledby,
|
|
77
81
|
disabled: disabled,
|
|
78
82
|
onClick: handleClick
|
|
79
|
-
})), /*#__PURE__*/React__default.createElement(
|
|
80
|
-
htmlFor: id,
|
|
83
|
+
})), /*#__PURE__*/React__default.createElement(LabelComponent, {
|
|
84
|
+
htmlFor: ariaLabelledby ? null : id,
|
|
81
85
|
className: "".concat(prefix, "--toggle__label")
|
|
82
|
-
}, /*#__PURE__*/React__default.createElement("span", {
|
|
86
|
+
}, labelText && /*#__PURE__*/React__default.createElement("span", {
|
|
83
87
|
className: labelTextClasses
|
|
84
88
|
}, labelText), /*#__PURE__*/React__default.createElement("div", {
|
|
85
89
|
className: appearanceClasses
|
|
@@ -92,12 +96,17 @@ function Toggle(_ref) {
|
|
|
92
96
|
viewBox: "0 0 6 5"
|
|
93
97
|
}, _path || (_path = /*#__PURE__*/React__default.createElement("path", {
|
|
94
98
|
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
95
|
-
})))), /*#__PURE__*/React__default.createElement("span", {
|
|
99
|
+
})))), renderSideLabel && /*#__PURE__*/React__default.createElement("span", {
|
|
96
100
|
className: "".concat(prefix, "--toggle__text"),
|
|
97
101
|
"aria-hidden": "true"
|
|
98
102
|
}, sideLabel))));
|
|
99
103
|
}
|
|
100
104
|
Toggle.propTypes = {
|
|
105
|
+
/**
|
|
106
|
+
* Specify another element's id to be used as the label for this toggle
|
|
107
|
+
*/
|
|
108
|
+
'aria-labelledby': PropTypes.string,
|
|
109
|
+
|
|
101
110
|
/**
|
|
102
111
|
* Specify a custom className to apply to the form-item node
|
|
103
112
|
*/
|
|
@@ -135,9 +144,19 @@ Toggle.propTypes = {
|
|
|
135
144
|
|
|
136
145
|
/**
|
|
137
146
|
* Provide the text that will be read by a screen reader when visiting this
|
|
138
|
-
* control
|
|
147
|
+
* control. This is required unless 'aria-labelledby' is provided instead
|
|
139
148
|
*/
|
|
140
|
-
labelText:
|
|
149
|
+
labelText: function labelText(props) {
|
|
150
|
+
if (!props['aria-labelledby'] && !props.labelText) {
|
|
151
|
+
return new Error('labelText property is required if no aria-labelledby is provided.');
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
155
|
+
rest[_key - 1] = arguments[_key];
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
return PropTypes.node.apply(PropTypes, [props].concat(rest));
|
|
159
|
+
},
|
|
141
160
|
|
|
142
161
|
/**
|
|
143
162
|
* Provide an event listener that is called when the control is clicked
|
|
@@ -72,6 +72,10 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
|
|
|
72
72
|
|
|
73
73
|
var className = cx__default["default"]((_cx = {}, _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _rollupPluginBabelHelpers.defineProperty(_cx, customClassName, !!customClassName), _cx));
|
|
74
74
|
useIsomorphicEffect["default"](function () {
|
|
75
|
+
if (!open) {
|
|
76
|
+
return;
|
|
77
|
+
}
|
|
78
|
+
|
|
75
79
|
if (!autoAlign) {
|
|
76
80
|
setAutoAligned(false);
|
|
77
81
|
return;
|
|
@@ -159,7 +163,7 @@ var Popover = /*#__PURE__*/React__default["default"].forwardRef(function Popover
|
|
|
159
163
|
setAutoAligned(true);
|
|
160
164
|
setAutoAlignment(alignment);
|
|
161
165
|
}
|
|
162
|
-
}, [autoAligned, align, autoAlign, prefix]);
|
|
166
|
+
}, [autoAligned, align, autoAlign, prefix, open]);
|
|
163
167
|
return /*#__PURE__*/React__default["default"].createElement(PopoverContext.Provider, {
|
|
164
168
|
value: value
|
|
165
169
|
}, /*#__PURE__*/React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
@@ -71,11 +71,15 @@ var Stack = /*#__PURE__*/React__default["default"].forwardRef(function Stack(pro
|
|
|
71
71
|
style["--".concat(prefix, "-stack-gap")] = gap;
|
|
72
72
|
}
|
|
73
73
|
|
|
74
|
-
return
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
74
|
+
return (
|
|
75
|
+
/*#__PURE__*/
|
|
76
|
+
// eslint-disable-next-line react/forbid-component-props
|
|
77
|
+
React__default["default"].createElement(BaseComponent, _rollupPluginBabelHelpers["extends"]({}, rest, {
|
|
78
|
+
ref: ref,
|
|
79
|
+
className: className,
|
|
80
|
+
style: style
|
|
81
|
+
}), children)
|
|
82
|
+
);
|
|
79
83
|
});
|
|
80
84
|
Stack.propTypes = {
|
|
81
85
|
/**
|
|
@@ -24,11 +24,12 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
|
|
|
24
24
|
|
|
25
25
|
var _path;
|
|
26
26
|
|
|
27
|
-
var _excluded = ["className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "readOnly", "size", "toggled"];
|
|
27
|
+
var _excluded = ["aria-labelledby", "className", "defaultToggled", "disabled", "hideLabel", "id", "labelA", "labelB", "labelText", "onClick", "onToggle", "readOnly", "size", "toggled"];
|
|
28
28
|
function Toggle(_ref) {
|
|
29
29
|
var _classNames;
|
|
30
30
|
|
|
31
|
-
var
|
|
31
|
+
var ariaLabelledby = _ref['aria-labelledby'],
|
|
32
|
+
className = _ref.className,
|
|
32
33
|
_ref$defaultToggled = _ref.defaultToggled,
|
|
33
34
|
defaultToggled = _ref$defaultToggled === void 0 ? false : _ref$defaultToggled,
|
|
34
35
|
_ref$disabled = _ref.disabled,
|
|
@@ -72,6 +73,8 @@ function Toggle(_ref) {
|
|
|
72
73
|
|
|
73
74
|
var isSm = size === 'sm';
|
|
74
75
|
var sideLabel = hideLabel ? labelText : checked ? labelB : labelA;
|
|
76
|
+
var renderSideLabel = !(hideLabel && ariaLabelledby);
|
|
77
|
+
var LabelComponent = ariaLabelledby ? 'div' : 'label';
|
|
75
78
|
var wrapperClasses = cx__default["default"]("".concat(prefix, "--toggle"), (_classNames = {}, _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--disabled"), disabled), _rollupPluginBabelHelpers.defineProperty(_classNames, "".concat(prefix, "--toggle--readonly"), readOnly), _classNames), className);
|
|
76
79
|
var labelTextClasses = cx__default["default"]("".concat(prefix, "--toggle__label-text"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--visually-hidden"), hideLabel));
|
|
77
80
|
var appearanceClasses = cx__default["default"]("".concat(prefix, "--toggle__appearance"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(prefix, "--toggle__appearance--sm"), isSm));
|
|
@@ -84,12 +87,13 @@ function Toggle(_ref) {
|
|
|
84
87
|
role: "switch",
|
|
85
88
|
type: "button",
|
|
86
89
|
"aria-checked": checked,
|
|
90
|
+
"aria-labelledby": ariaLabelledby,
|
|
87
91
|
disabled: disabled,
|
|
88
92
|
onClick: handleClick
|
|
89
|
-
})), /*#__PURE__*/React__default["default"].createElement(
|
|
90
|
-
htmlFor: id,
|
|
93
|
+
})), /*#__PURE__*/React__default["default"].createElement(LabelComponent, {
|
|
94
|
+
htmlFor: ariaLabelledby ? null : id,
|
|
91
95
|
className: "".concat(prefix, "--toggle__label")
|
|
92
|
-
}, /*#__PURE__*/React__default["default"].createElement("span", {
|
|
96
|
+
}, labelText && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
93
97
|
className: labelTextClasses
|
|
94
98
|
}, labelText), /*#__PURE__*/React__default["default"].createElement("div", {
|
|
95
99
|
className: appearanceClasses
|
|
@@ -102,12 +106,17 @@ function Toggle(_ref) {
|
|
|
102
106
|
viewBox: "0 0 6 5"
|
|
103
107
|
}, _path || (_path = /*#__PURE__*/React__default["default"].createElement("path", {
|
|
104
108
|
d: "M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z"
|
|
105
|
-
})))), /*#__PURE__*/React__default["default"].createElement("span", {
|
|
109
|
+
})))), renderSideLabel && /*#__PURE__*/React__default["default"].createElement("span", {
|
|
106
110
|
className: "".concat(prefix, "--toggle__text"),
|
|
107
111
|
"aria-hidden": "true"
|
|
108
112
|
}, sideLabel))));
|
|
109
113
|
}
|
|
110
114
|
Toggle.propTypes = {
|
|
115
|
+
/**
|
|
116
|
+
* Specify another element's id to be used as the label for this toggle
|
|
117
|
+
*/
|
|
118
|
+
'aria-labelledby': PropTypes__default["default"].string,
|
|
119
|
+
|
|
111
120
|
/**
|
|
112
121
|
* Specify a custom className to apply to the form-item node
|
|
113
122
|
*/
|
|
@@ -145,9 +154,19 @@ Toggle.propTypes = {
|
|
|
145
154
|
|
|
146
155
|
/**
|
|
147
156
|
* Provide the text that will be read by a screen reader when visiting this
|
|
148
|
-
* control
|
|
157
|
+
* control. This is required unless 'aria-labelledby' is provided instead
|
|
149
158
|
*/
|
|
150
|
-
labelText:
|
|
159
|
+
labelText: function labelText(props) {
|
|
160
|
+
if (!props['aria-labelledby'] && !props.labelText) {
|
|
161
|
+
return new Error('labelText property is required if no aria-labelledby is provided.');
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
165
|
+
rest[_key - 1] = arguments[_key];
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
return PropTypes__default["default"].node.apply(PropTypes__default["default"], [props].concat(rest));
|
|
169
|
+
},
|
|
151
170
|
|
|
152
171
|
/**
|
|
153
172
|
* Provide an event listener that is called when the control is clicked
|
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.21.0
|
|
4
|
+
"version": "1.21.0",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
7
7
|
"module": "es/index.js",
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@babel/runtime": "^7.18.3",
|
|
46
|
-
"@carbon/feature-flags": "^0.
|
|
47
|
-
"@carbon/icons-react": "^11.15.0
|
|
48
|
-
"@carbon/layout": "^11.
|
|
49
|
-
"@carbon/styles": "^1.21.0
|
|
46
|
+
"@carbon/feature-flags": "^0.12.0",
|
|
47
|
+
"@carbon/icons-react": "^11.15.0",
|
|
48
|
+
"@carbon/layout": "^11.11.0",
|
|
49
|
+
"@carbon/styles": "^1.21.0",
|
|
50
50
|
"@carbon/telemetry": "0.1.0",
|
|
51
51
|
"classnames": "2.3.2",
|
|
52
52
|
"copy-to-clipboard": "^3.3.1",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"@babel/preset-env": "^7.18.2",
|
|
74
74
|
"@babel/preset-react": "^7.17.12",
|
|
75
75
|
"@carbon/test-utils": "^10.26.0",
|
|
76
|
-
"@carbon/themes": "^11.16.0
|
|
76
|
+
"@carbon/themes": "^11.16.0",
|
|
77
77
|
"@rollup/plugin-babel": "^6.0.0",
|
|
78
78
|
"@rollup/plugin-commonjs": "^24.0.0",
|
|
79
79
|
"@rollup/plugin-node-resolve": "^15.0.0",
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"react": "^17.0.2",
|
|
112
112
|
"react-dom": "^17.0.2",
|
|
113
113
|
"requestanimationframe": "^0.0.23",
|
|
114
|
-
"rimraf": "^
|
|
114
|
+
"rimraf": "^4.0.0",
|
|
115
115
|
"rollup": "^2.79.1",
|
|
116
116
|
"rollup-plugin-strip-banner": "^2.0.0",
|
|
117
117
|
"rtlcss": "^4.0.0",
|
|
@@ -135,5 +135,5 @@
|
|
|
135
135
|
"**/*.scss",
|
|
136
136
|
"**/*.css"
|
|
137
137
|
],
|
|
138
|
-
"gitHead": "
|
|
138
|
+
"gitHead": "36b2a3b42be5bebb706861030d1ec4a21ae47c5f"
|
|
139
139
|
}
|