@pingux/astro 1.28.2-alpha.2 → 1.29.0-alpha.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/lib/cjs/components/ArrayField/ArrayField.js +21 -22
- package/lib/cjs/components/ArrayField/ArrayField.stories.js +48 -26
- package/lib/cjs/components/CheckboxField/CheckboxField.js +11 -39
- package/lib/cjs/components/CheckboxField/CheckboxField.stories.js +24 -32
- package/lib/cjs/components/ColorField/ColorField.js +27 -20
- package/lib/cjs/components/ColorField/ColorField.stories.js +28 -8
- package/lib/cjs/components/ComboBox/ComboBoxInput.js +31 -39
- package/lib/cjs/components/ComboBoxField/ComboBoxField.js +30 -55
- package/lib/cjs/components/ComboBoxField/ComboBoxField.stories.js +65 -45
- package/lib/cjs/components/FileInputField/FileInputField.js +33 -27
- package/lib/cjs/components/FileInputField/FileInputField.stories.js +27 -7
- package/lib/cjs/components/FileInputField/FileSelect.js +41 -10
- package/lib/cjs/components/ImageUploadField/ImageUploadField.js +35 -15
- package/lib/cjs/components/ImageUploadField/ImageUploadField.stories.js +34 -14
- package/lib/cjs/components/LinkSelectField/LinkSelectField.js +18 -20
- package/lib/cjs/components/LinkSelectField/LinkSelectField.stories.js +71 -53
- package/lib/cjs/components/MultivaluesField/MultivaluesField.js +21 -12
- package/lib/cjs/components/MultivaluesField/MultivaluesField.stories.js +26 -6
- package/lib/cjs/components/NumberField/NumberField.js +15 -13
- package/lib/cjs/components/NumberField/NumberField.stories.js +25 -5
- package/lib/cjs/components/PasswordField/PasswordField.js +15 -27
- package/lib/cjs/components/PasswordField/PasswordField.stories.js +6 -4
- package/lib/cjs/components/RadioGroupField/RadioGroupField.js +17 -34
- package/lib/cjs/components/RadioGroupField/RadioGroupField.stories.js +25 -30
- package/lib/cjs/components/SearchField/SearchField.js +36 -55
- package/lib/cjs/components/SearchField/SearchField.stories.js +35 -24
- package/lib/cjs/components/SelectField/SelectField.js +27 -7
- package/lib/cjs/components/SelectField/SelectField.stories.js +73 -53
- package/lib/cjs/components/SelectFieldBase/SelectFieldBase.js +37 -25
- package/lib/cjs/components/SwitchField/SwitchField.js +43 -62
- package/lib/cjs/components/SwitchField/SwitchField.stories.js +26 -26
- package/lib/cjs/components/TextAreaField/TextAreaField.js +16 -20
- package/lib/cjs/components/TextAreaField/TextAreaField.stories.js +29 -11
- package/lib/cjs/components/TextField/TextField.js +11 -15
- package/lib/cjs/components/TextField/TextField.stories.js +30 -10
- package/lib/cjs/hooks/useField/useField.js +9 -21
- package/lib/cjs/recipes/LogoTabs.stories.js +50 -47
- package/lib/cjs/utils/devUtils/props/ariaAttributes.js +116 -0
- package/lib/cjs/utils/devUtils/props/ariaAttributes.test.js +65 -0
- package/lib/components/ArrayField/ArrayField.js +16 -14
- package/lib/components/ArrayField/ArrayField.stories.js +17 -3
- package/lib/components/CheckboxField/CheckboxField.js +6 -32
- package/lib/components/CheckboxField/CheckboxField.stories.js +17 -32
- package/lib/components/ColorField/ColorField.js +22 -16
- package/lib/components/ColorField/ColorField.stories.js +18 -3
- package/lib/components/ComboBox/ComboBoxInput.js +24 -32
- package/lib/components/ComboBoxField/ComboBoxField.js +25 -51
- package/lib/components/ComboBoxField/ComboBoxField.stories.js +17 -3
- package/lib/components/FileInputField/FileInputField.js +29 -24
- package/lib/components/FileInputField/FileInputField.stories.js +18 -3
- package/lib/components/FileInputField/FileSelect.js +32 -10
- package/lib/components/ImageUploadField/ImageUploadField.js +23 -8
- package/lib/components/ImageUploadField/ImageUploadField.stories.js +18 -3
- package/lib/components/LinkSelectField/LinkSelectField.js +12 -11
- package/lib/components/LinkSelectField/LinkSelectField.stories.js +17 -4
- package/lib/components/MultivaluesField/MultivaluesField.js +16 -9
- package/lib/components/MultivaluesField/MultivaluesField.stories.js +18 -3
- package/lib/components/NumberField/NumberField.js +5 -4
- package/lib/components/NumberField/NumberField.stories.js +17 -2
- package/lib/components/PasswordField/PasswordField.js +5 -11
- package/lib/components/PasswordField/PasswordField.stories.js +4 -3
- package/lib/components/RadioGroupField/RadioGroupField.js +12 -28
- package/lib/components/RadioGroupField/RadioGroupField.stories.js +17 -27
- package/lib/components/SearchField/SearchField.js +28 -48
- package/lib/components/SearchField/SearchField.stories.js +20 -14
- package/lib/components/SelectField/SelectField.js +18 -3
- package/lib/components/SelectField/SelectField.stories.js +18 -4
- package/lib/components/SelectFieldBase/SelectFieldBase.js +33 -25
- package/lib/components/SwitchField/SwitchField.js +40 -57
- package/lib/components/SwitchField/SwitchField.stories.js +18 -23
- package/lib/components/TextAreaField/TextAreaField.js +7 -9
- package/lib/components/TextAreaField/TextAreaField.stories.js +19 -5
- package/lib/components/TextField/TextField.js +4 -6
- package/lib/components/TextField/TextField.stories.js +19 -4
- package/lib/hooks/useField/useField.js +6 -16
- package/lib/recipes/LogoTabs.stories.js +50 -48
- package/lib/utils/devUtils/props/ariaAttributes.js +85 -0
- package/lib/utils/devUtils/props/ariaAttributes.test.js +50 -0
- package/package.json +1 -1
@@ -2,13 +2,25 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
4
|
|
5
|
-
var
|
5
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
6
|
+
|
7
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
6
8
|
|
7
9
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
8
10
|
|
9
|
-
var
|
11
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
10
12
|
|
11
|
-
var
|
13
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
14
|
+
|
15
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
16
|
+
|
17
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
18
|
+
|
19
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
20
|
+
|
21
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
22
|
+
|
23
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
12
24
|
|
13
25
|
_Object$defineProperty(exports, "__esModule", {
|
14
26
|
value: true
|
@@ -18,24 +30,32 @@ exports["default"] = void 0;
|
|
18
30
|
|
19
31
|
var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
|
20
32
|
|
33
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
34
|
+
|
21
35
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
22
36
|
|
23
37
|
var _react = _interopRequireWildcard(require("react"));
|
24
38
|
|
25
39
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
26
40
|
|
27
|
-
var
|
41
|
+
var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
|
28
42
|
|
29
|
-
var
|
43
|
+
var _hooks = require("../../hooks");
|
30
44
|
|
31
45
|
var _SelectFieldBase = _interopRequireDefault(require("../SelectFieldBase"));
|
32
46
|
|
47
|
+
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
48
|
+
|
33
49
|
var _react2 = require("@emotion/react");
|
34
50
|
|
35
51
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
36
52
|
|
37
53
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
38
54
|
|
55
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
56
|
+
|
57
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
58
|
+
|
39
59
|
/**
|
40
60
|
* Select field (dropdown) that does not rely on native browser or mobile implementations.
|
41
61
|
*
|
@@ -51,7 +71,7 @@ var SelectField = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
51
71
|
|
52
72
|
return (0, _react2.jsx)(_SelectFieldBase["default"], (0, _extends2["default"])({}, props, selectFieldProps));
|
53
73
|
});
|
54
|
-
SelectField.propTypes = {
|
74
|
+
SelectField.propTypes = _objectSpread({
|
55
75
|
/** Alignment of the popover menu relative to the trigger. */
|
56
76
|
align: _propTypes["default"].oneOf(['start', 'end', 'middle']),
|
57
77
|
|
@@ -164,7 +184,7 @@ SelectField.propTypes = {
|
|
164
184
|
scrollBoxProps: _propTypes["default"].shape({
|
165
185
|
maxHeight: _propTypes["default"].string
|
166
186
|
})
|
167
|
-
};
|
187
|
+
}, _ariaAttributes.ariaAttributesBasePropTypes);
|
168
188
|
SelectField.defaultProps = {
|
169
189
|
placeholder: 'Select',
|
170
190
|
status: _statuses["default"].DEFAULT,
|
@@ -2,13 +2,25 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
|
4
4
|
|
5
|
-
var
|
5
|
+
var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
|
6
|
+
|
7
|
+
var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
|
6
8
|
|
7
9
|
var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
|
8
10
|
|
9
|
-
var
|
11
|
+
var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
|
10
12
|
|
11
|
-
var
|
13
|
+
var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
|
14
|
+
|
15
|
+
var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
|
16
|
+
|
17
|
+
var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
|
18
|
+
|
19
|
+
var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
|
20
|
+
|
21
|
+
var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
|
22
|
+
|
23
|
+
var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
|
12
24
|
|
13
25
|
_Object$defineProperty(exports, "__esModule", {
|
14
26
|
value: true
|
@@ -34,18 +46,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/e
|
|
34
46
|
|
35
47
|
var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
|
36
48
|
|
49
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
|
50
|
+
|
37
51
|
var _react = _interopRequireWildcard(require("react"));
|
38
52
|
|
39
53
|
var _overlays = require("@react-aria/overlays");
|
40
54
|
|
41
55
|
var _data = require("@react-stately/data");
|
42
56
|
|
43
|
-
var
|
57
|
+
var _2 = require("../../");
|
44
58
|
|
45
|
-
var
|
59
|
+
var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
|
46
60
|
|
47
61
|
var _constants = require("../Label/constants");
|
48
62
|
|
63
|
+
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
64
|
+
|
49
65
|
var _react2 = require("@emotion/react");
|
50
66
|
|
51
67
|
var _context, _context2;
|
@@ -54,6 +70,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
|
|
54
70
|
|
55
71
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
56
72
|
|
73
|
+
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
74
|
+
|
75
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var _context4, _context5; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context4 = ownKeys(Object(source), !0)).call(_context4, function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context5 = ownKeys(Object(source))).call(_context5, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
76
|
+
|
57
77
|
var animals = [{
|
58
78
|
name: 'Aardvark',
|
59
79
|
id: '1'
|
@@ -121,7 +141,7 @@ var withSection = [{
|
|
121
141
|
}];
|
122
142
|
var _default = {
|
123
143
|
title: 'Form/SelectField',
|
124
|
-
component:
|
144
|
+
component: _2.SelectField,
|
125
145
|
parameters: {
|
126
146
|
docs: {
|
127
147
|
source: {
|
@@ -129,7 +149,7 @@ var _default = {
|
|
129
149
|
}
|
130
150
|
}
|
131
151
|
},
|
132
|
-
argTypes: {
|
152
|
+
argTypes: _objectSpread({
|
133
153
|
label: {
|
134
154
|
control: {
|
135
155
|
type: 'text'
|
@@ -178,18 +198,18 @@ var _default = {
|
|
178
198
|
type: 'none'
|
179
199
|
}
|
180
200
|
}
|
181
|
-
}
|
201
|
+
}, _ariaAttributes.ariaAttributeBaseArgTypes)
|
182
202
|
};
|
183
203
|
exports["default"] = _default;
|
184
204
|
|
185
205
|
var Default = function Default(args) {
|
186
|
-
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(
|
206
|
+
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, (0, _extends2["default"])({}, args, {
|
187
207
|
width: "100%"
|
188
|
-
}), (0, _react2.jsx)(
|
208
|
+
}), (0, _react2.jsx)(_2.Item, {
|
189
209
|
key: "red"
|
190
|
-
}, "Red"), (0, _react2.jsx)(
|
210
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
191
211
|
key: "blue"
|
192
|
-
}, "Blue"), (0, _react2.jsx)(
|
212
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
193
213
|
key: "yellow"
|
194
214
|
}, "Yellow")));
|
195
215
|
};
|
@@ -197,15 +217,15 @@ var Default = function Default(args) {
|
|
197
217
|
exports.Default = Default;
|
198
218
|
|
199
219
|
var WithSections = function WithSections(args) {
|
200
|
-
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(
|
220
|
+
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, (0, _extends2["default"])({
|
201
221
|
items: withSection
|
202
222
|
}, args), function (section) {
|
203
|
-
return (0, _react2.jsx)(
|
223
|
+
return (0, _react2.jsx)(_2.Section, {
|
204
224
|
key: section.name,
|
205
225
|
items: section.children,
|
206
226
|
title: section.name
|
207
227
|
}, function (item) {
|
208
|
-
return (0, _react2.jsx)(
|
228
|
+
return (0, _react2.jsx)(_2.Item, {
|
209
229
|
key: item.name
|
210
230
|
}, item.name);
|
211
231
|
});
|
@@ -215,14 +235,14 @@ var WithSections = function WithSections(args) {
|
|
215
235
|
exports.WithSections = WithSections;
|
216
236
|
|
217
237
|
var WithCustomHeight = function WithCustomHeight(args) {
|
218
|
-
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(
|
238
|
+
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, (0, _extends2["default"])({
|
219
239
|
label: "Example label",
|
220
240
|
items: animals,
|
221
241
|
scrollBoxProps: {
|
222
242
|
maxHeight: '75px'
|
223
243
|
}
|
224
244
|
}, args), function (item) {
|
225
|
-
return (0, _react2.jsx)(
|
245
|
+
return (0, _react2.jsx)(_2.Item, {
|
226
246
|
key: item.name
|
227
247
|
}, item.name);
|
228
248
|
}));
|
@@ -231,14 +251,14 @@ var WithCustomHeight = function WithCustomHeight(args) {
|
|
231
251
|
exports.WithCustomHeight = WithCustomHeight;
|
232
252
|
|
233
253
|
var FloatLabel = function FloatLabel() {
|
234
|
-
return (0, _react2.jsx)(
|
254
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
235
255
|
label: "What's your favorite color?",
|
236
256
|
labelMode: "float"
|
237
|
-
}, (0, _react2.jsx)(
|
257
|
+
}, (0, _react2.jsx)(_2.Item, {
|
238
258
|
key: "red"
|
239
|
-
}, "Red"), (0, _react2.jsx)(
|
259
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
240
260
|
key: "blue"
|
241
|
-
}, "Blue"), (0, _react2.jsx)(
|
261
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
242
262
|
key: "yellow"
|
243
263
|
}, "Yellow"));
|
244
264
|
};
|
@@ -255,15 +275,15 @@ var Controlled = function Controlled() {
|
|
255
275
|
return setSelectedKey(key);
|
256
276
|
};
|
257
277
|
|
258
|
-
return (0, _react2.jsx)(
|
278
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
259
279
|
selectedKey: selectedKey,
|
260
280
|
onSelectionChange: handleSelectionChange,
|
261
281
|
label: "What's your favorite color?"
|
262
|
-
}, (0, _react2.jsx)(
|
282
|
+
}, (0, _react2.jsx)(_2.Item, {
|
263
283
|
key: "red"
|
264
|
-
}, "Red"), (0, _react2.jsx)(
|
284
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
265
285
|
key: "blue"
|
266
|
-
}, "Blue"), (0, _react2.jsx)(
|
286
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
267
287
|
key: "yellow"
|
268
288
|
}, "Yellow"));
|
269
289
|
};
|
@@ -271,18 +291,18 @@ var Controlled = function Controlled() {
|
|
271
291
|
exports.Controlled = Controlled;
|
272
292
|
|
273
293
|
var WithNoneOption = function WithNoneOption() {
|
274
|
-
return (0, _react2.jsx)(
|
294
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
275
295
|
label: "What's your favorite color?"
|
276
|
-
}, (0, _react2.jsx)(
|
296
|
+
}, (0, _react2.jsx)(_2.Item, {
|
277
297
|
key: "none"
|
278
|
-
}, "None"), (0, _react2.jsx)(
|
298
|
+
}, "None"), (0, _react2.jsx)(_2.Item, {
|
279
299
|
isSeparator: true,
|
280
300
|
textValue: "-"
|
281
|
-
}, (0, _react2.jsx)(
|
301
|
+
}, (0, _react2.jsx)(_2.Separator, null)), (0, _react2.jsx)(_2.Item, {
|
282
302
|
key: "red"
|
283
|
-
}, "Red"), (0, _react2.jsx)(
|
303
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
284
304
|
key: "blue"
|
285
|
-
}, "Blue"), (0, _react2.jsx)(
|
305
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
286
306
|
key: "yellow"
|
287
307
|
}, "Yellow"));
|
288
308
|
};
|
@@ -290,14 +310,14 @@ var WithNoneOption = function WithNoneOption() {
|
|
290
310
|
exports.WithNoneOption = WithNoneOption;
|
291
311
|
|
292
312
|
var DisabledField = function DisabledField() {
|
293
|
-
return (0, _react2.jsx)(
|
313
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
294
314
|
label: "What's your favorite color?",
|
295
315
|
isDisabled: true
|
296
|
-
}, (0, _react2.jsx)(
|
316
|
+
}, (0, _react2.jsx)(_2.Item, {
|
297
317
|
key: "red"
|
298
|
-
}, "Red"), (0, _react2.jsx)(
|
318
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
299
319
|
key: "blue"
|
300
|
-
}, "Blue"), (0, _react2.jsx)(
|
320
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
301
321
|
key: "yellow"
|
302
322
|
}, "Yellow"));
|
303
323
|
};
|
@@ -305,14 +325,14 @@ var DisabledField = function DisabledField() {
|
|
305
325
|
exports.DisabledField = DisabledField;
|
306
326
|
|
307
327
|
var DisabledOptions = function DisabledOptions() {
|
308
|
-
return (0, _react2.jsx)(
|
328
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
309
329
|
label: "What's your favorite color?",
|
310
330
|
disabledKeys: ['blue']
|
311
|
-
}, (0, _react2.jsx)(
|
331
|
+
}, (0, _react2.jsx)(_2.Item, {
|
312
332
|
key: "red"
|
313
|
-
}, "Red"), (0, _react2.jsx)(
|
333
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
314
334
|
key: "blue"
|
315
|
-
}, "Blue"), (0, _react2.jsx)(
|
335
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
316
336
|
key: "yellow"
|
317
337
|
}, "Yellow"));
|
318
338
|
};
|
@@ -320,7 +340,7 @@ var DisabledOptions = function DisabledOptions() {
|
|
320
340
|
exports.DisabledOptions = DisabledOptions;
|
321
341
|
|
322
342
|
var NoOptionsAvailable = function NoOptionsAvailable() {
|
323
|
-
return (0, _react2.jsx)(
|
343
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
324
344
|
label: "Select an option...",
|
325
345
|
placeholder: "No options available"
|
326
346
|
});
|
@@ -329,15 +349,15 @@ var NoOptionsAvailable = function NoOptionsAvailable() {
|
|
329
349
|
exports.NoOptionsAvailable = NoOptionsAvailable;
|
330
350
|
|
331
351
|
var HelperText = function HelperText() {
|
332
|
-
return (0, _react2.jsx)(
|
352
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
333
353
|
status: "error",
|
334
354
|
helperText: "Here is some helpful text...",
|
335
355
|
label: "What's your favorite color?"
|
336
|
-
}, (0, _react2.jsx)(
|
356
|
+
}, (0, _react2.jsx)(_2.Item, {
|
337
357
|
key: "red"
|
338
|
-
}, "Red"), (0, _react2.jsx)(
|
358
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
339
359
|
key: "blue"
|
340
|
-
}, "Blue"), (0, _react2.jsx)(
|
360
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
341
361
|
key: "yellow"
|
342
362
|
}, "Yellow"));
|
343
363
|
};
|
@@ -356,11 +376,11 @@ var DynamicItems = function DynamicItems() {
|
|
356
376
|
_useState4 = (0, _slicedToArray2["default"])(_useState3, 1),
|
357
377
|
items = _useState4[0];
|
358
378
|
|
359
|
-
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(
|
379
|
+
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, {
|
360
380
|
label: "Select an option...",
|
361
381
|
items: items
|
362
382
|
}, function (item) {
|
363
|
-
return (0, _react2.jsx)(
|
383
|
+
return (0, _react2.jsx)(_2.Item, {
|
364
384
|
key: item.key
|
365
385
|
}, item.name);
|
366
386
|
}));
|
@@ -416,13 +436,13 @@ var AsyncLoading = function AsyncLoading() {
|
|
416
436
|
}))();
|
417
437
|
}
|
418
438
|
});
|
419
|
-
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(
|
439
|
+
return (0, _react2.jsx)(_overlays.OverlayProvider, null, (0, _react2.jsx)(_2.SelectField, {
|
420
440
|
label: "Pick a Pokemon",
|
421
441
|
items: list.items,
|
422
442
|
isLoading: list.isLoading,
|
423
443
|
onLoadMore: list.loadMore
|
424
444
|
}, function (item) {
|
425
|
-
return (0, _react2.jsx)(
|
445
|
+
return (0, _react2.jsx)(_2.Item, {
|
426
446
|
key: item.name
|
427
447
|
}, item.name);
|
428
448
|
}));
|
@@ -431,16 +451,16 @@ var AsyncLoading = function AsyncLoading() {
|
|
431
451
|
exports.AsyncLoading = AsyncLoading;
|
432
452
|
|
433
453
|
var WithoutStatusIndicator = function WithoutStatusIndicator() {
|
434
|
-
return (0, _react2.jsx)(
|
454
|
+
return (0, _react2.jsx)(_2.SelectField, {
|
435
455
|
label: "What's your favorite color?",
|
436
456
|
hasNoStatusIndicator: true
|
437
|
-
}, (0, _react2.jsx)(
|
457
|
+
}, (0, _react2.jsx)(_2.Item, {
|
438
458
|
key: "none"
|
439
|
-
}, "None"), (0, _react2.jsx)(
|
459
|
+
}, "None"), (0, _react2.jsx)(_2.Item, {
|
440
460
|
key: "red"
|
441
|
-
}, "Red"), (0, _react2.jsx)(
|
461
|
+
}, "Red"), (0, _react2.jsx)(_2.Item, {
|
442
462
|
key: "blue"
|
443
|
-
}, "Blue"), (0, _react2.jsx)(
|
463
|
+
}, "Blue"), (0, _react2.jsx)(_2.Item, {
|
444
464
|
key: "yellow"
|
445
465
|
}, "Yellow"));
|
446
466
|
};
|
@@ -34,6 +34,8 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/he
|
|
34
34
|
|
35
35
|
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
|
36
36
|
|
37
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/objectWithoutProperties"));
|
38
|
+
|
37
39
|
var _react = _interopRequireWildcard(require("react"));
|
38
40
|
|
39
41
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
@@ -42,6 +44,8 @@ var _select = require("@react-aria/select");
|
|
42
44
|
|
43
45
|
var _MenuDownIcon = _interopRequireDefault(require("mdi-react/MenuDownIcon"));
|
44
46
|
|
47
|
+
var _ariaAttributes = require("../../utils/devUtils/props/ariaAttributes");
|
48
|
+
|
45
49
|
var _statuses = _interopRequireDefault(require("../../utils/devUtils/constants/statuses"));
|
46
50
|
|
47
51
|
var _Box = _interopRequireDefault(require("../Box"));
|
@@ -62,6 +66,8 @@ var _Text = _interopRequireDefault(require("../Text"));
|
|
62
66
|
|
63
67
|
var _react2 = require("@emotion/react");
|
64
68
|
|
69
|
+
var _excluded = ["columnStyleProps", "defaultText", "fieldContainerProps", "fieldControlProps", "fieldLabelProps", "helperText", "isLoadingInitial", "label", "labelMode", "name", "overlay", "placeholder", "slots", "state", "status", "trigger", "triggerProps", "triggerRef", "valueProps"];
|
70
|
+
|
65
71
|
function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
66
72
|
|
67
73
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
@@ -77,38 +83,44 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
77
83
|
* and [useSelectState](https://react-spectrum.adobe.com/react-stately/useSelectState.html) from
|
78
84
|
* React Stately.
|
79
85
|
*/
|
80
|
-
var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (
|
81
|
-
var
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
state =
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
86
|
+
var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
87
|
+
var columnStyleProps = _ref.columnStyleProps,
|
88
|
+
defaultText = _ref.defaultText,
|
89
|
+
fieldContainerProps = _ref.fieldContainerProps,
|
90
|
+
fieldControlProps = _ref.fieldControlProps,
|
91
|
+
fieldLabelProps = _ref.fieldLabelProps,
|
92
|
+
helperText = _ref.helperText,
|
93
|
+
isLoadingInitial = _ref.isLoadingInitial,
|
94
|
+
label = _ref.label,
|
95
|
+
labelMode = _ref.labelMode,
|
96
|
+
name = _ref.name,
|
97
|
+
overlay = _ref.overlay,
|
98
|
+
placeholder = _ref.placeholder,
|
99
|
+
slots = _ref.slots,
|
100
|
+
state = _ref.state,
|
101
|
+
status = _ref.status,
|
102
|
+
trigger = _ref.trigger,
|
103
|
+
triggerProps = _ref.triggerProps,
|
104
|
+
triggerRef = _ref.triggerRef,
|
105
|
+
valueProps = _ref.valueProps,
|
106
|
+
others = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
107
|
+
|
108
|
+
var _getAriaAttributeProp = (0, _ariaAttributes.getAriaAttributeProps)(others),
|
109
|
+
ariaProps = _getAriaAttributeProp.ariaProps;
|
110
|
+
|
99
111
|
var defaultTrigger = (0, _react2.jsx)(_Box["default"], {
|
100
112
|
className: fieldControlProps.className,
|
101
113
|
variant: "forms.input.container"
|
102
114
|
}, (0, _react2.jsx)(_Button["default"], (0, _extends2["default"])({
|
115
|
+
className: fieldControlProps.className,
|
103
116
|
ref: triggerRef,
|
104
|
-
variant: "forms.select"
|
105
|
-
|
106
|
-
}, triggerProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
117
|
+
variant: "forms.select"
|
118
|
+
}, triggerProps, ariaProps), (0, _react2.jsx)(_Box["default"], (0, _extends2["default"])({
|
107
119
|
as: "span",
|
108
120
|
variant: "forms.select.currentValue"
|
109
121
|
}, valueProps), state.selectedItem ? state.selectedItem.rendered : (0, _react2.jsx)(_Text["default"], {
|
110
122
|
variant: "placeholder"
|
111
|
-
},
|
123
|
+
}, labelMode === _constants.modes.FLOAT ? '' : placeholder || defaultText)), isLoadingInitial && (0, _react2.jsx)(_Loader["default"], {
|
112
124
|
variant: "loader.withinInput"
|
113
125
|
}), (0, _react2.jsx)(_Box["default"], {
|
114
126
|
as: "span",
|
@@ -135,7 +147,7 @@ var SelectFieldBase = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
|
|
135
147
|
status: status
|
136
148
|
}, helperText));
|
137
149
|
});
|
138
|
-
SelectFieldBase.propTypes = {
|
150
|
+
SelectFieldBase.propTypes = _objectSpread({
|
139
151
|
/** Default text rendered if no option is selected. Deprecated. */
|
140
152
|
defaultText: _propTypes["default"].string,
|
141
153
|
|
@@ -204,6 +216,6 @@ SelectFieldBase.propTypes = {
|
|
204
216
|
|
205
217
|
/** Props for the element representing the selected value. */
|
206
218
|
valueProps: _propTypes["default"].shape({})
|
207
|
-
};
|
219
|
+
}, _ariaAttributes.ariaAttributesBasePropTypes);
|
208
220
|
var _default = SelectFieldBase;
|
209
221
|
exports["default"] = _default;
|