@automattic/vip-design-system 0.23.0 → 0.23.1
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.
|
@@ -85,6 +85,17 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
|
|
|
85
85
|
console.info('For 16 or more items, consider using another component with a typeahead capability.');
|
|
86
86
|
}
|
|
87
87
|
|
|
88
|
+
var getAllOptions = (0, _react.useMemo)(function () {
|
|
89
|
+
return [].concat(options.filter(function (option) {
|
|
90
|
+
return !option.options;
|
|
91
|
+
}), options.filter(function (option) {
|
|
92
|
+
return option.options;
|
|
93
|
+
}).map(function (option) {
|
|
94
|
+
return option.options;
|
|
95
|
+
})).reduce(function (a, b) {
|
|
96
|
+
return a.concat(b);
|
|
97
|
+
}, []);
|
|
98
|
+
}, [options]);
|
|
88
99
|
var optionLabel = (0, _react.useCallback)(function (option) {
|
|
89
100
|
return getOptionLabel ? getOptionLabel(option) : option.label;
|
|
90
101
|
}, [getOptionLabel]);
|
|
@@ -92,10 +103,10 @@ var FormSelect = /*#__PURE__*/_react["default"].forwardRef(function (_ref2, forw
|
|
|
92
103
|
return getOptionValue ? getOptionValue(option) : option.value;
|
|
93
104
|
}, [getOptionValue]);
|
|
94
105
|
var getOptionByValue = (0, _react.useCallback)(function (value) {
|
|
95
|
-
return
|
|
96
|
-
return optionValue(option) === value;
|
|
106
|
+
return getAllOptions.find(function (option) {
|
|
107
|
+
return "" + optionValue(option) === "" + value;
|
|
97
108
|
});
|
|
98
|
-
}, [
|
|
109
|
+
}, [getAllOptions, optionValue]);
|
|
99
110
|
var onValueChange = (0, _react.useCallback)(function (event) {
|
|
100
111
|
return onChange ? onChange(getOptionByValue(event.target.value), event) : getOptionByValue(event.target.value);
|
|
101
112
|
}, [onChange, getOptionByValue]);
|
|
@@ -54,6 +54,13 @@ var options = [{
|
|
|
54
54
|
}, {
|
|
55
55
|
value: 'vanilla',
|
|
56
56
|
label: 'Vanilla'
|
|
57
|
+
}];
|
|
58
|
+
var groupedOptions = [{
|
|
59
|
+
label: 'Group name',
|
|
60
|
+
options: options
|
|
61
|
+
}, {
|
|
62
|
+
label: 'Another Group name',
|
|
63
|
+
options: options
|
|
57
64
|
}]; // eslint-disable-next-line react/prop-types
|
|
58
65
|
|
|
59
66
|
var DefaultComponent = function DefaultComponent(_ref) {
|
|
@@ -100,13 +107,7 @@ var WithGroup = DefaultComponent.bind({});
|
|
|
100
107
|
exports.WithGroup = WithGroup;
|
|
101
108
|
WithGroup.args = {
|
|
102
109
|
label: 'Group Label',
|
|
103
|
-
options: [
|
|
104
|
-
label: 'Group name',
|
|
105
|
-
options: options
|
|
106
|
-
}, {
|
|
107
|
-
label: 'Another Group name',
|
|
108
|
-
options: options
|
|
109
|
-
}]
|
|
110
|
+
options: [].concat(options, groupedOptions)
|
|
110
111
|
};
|
|
111
112
|
var IsInline = DefaultComponent.bind({});
|
|
112
113
|
exports.IsInline = IsInline;
|
|
@@ -114,13 +115,7 @@ IsInline.args = {
|
|
|
114
115
|
label: 'Inline Select',
|
|
115
116
|
isInline: true,
|
|
116
117
|
width: '100%',
|
|
117
|
-
options:
|
|
118
|
-
label: 'Group name',
|
|
119
|
-
options: options
|
|
120
|
-
}, {
|
|
121
|
-
label: 'Another Group name',
|
|
122
|
-
options: options
|
|
123
|
-
}]
|
|
118
|
+
options: groupedOptions
|
|
124
119
|
};
|
|
125
120
|
var WithOptionLabelAndValue = DefaultComponent.bind({});
|
|
126
121
|
exports.WithOptionLabelAndValue = WithOptionLabelAndValue;
|
|
@@ -159,7 +154,7 @@ var WithOnChange = function WithOnChange() {
|
|
|
159
154
|
placeholder: '- Select -',
|
|
160
155
|
width: '100%',
|
|
161
156
|
onChange: onChange,
|
|
162
|
-
options: options
|
|
157
|
+
options: [].concat(options, groupedOptions)
|
|
163
158
|
};
|
|
164
159
|
return (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
165
160
|
children: [(0, _jsxRuntime.jsx)(DefaultComponent, (0, _extends2["default"])({
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
/**
|
|
4
4
|
* External dependencies
|
|
5
5
|
*/
|
|
6
|
-
import React, { useCallback } from 'react';
|
|
6
|
+
import React, { useCallback, useMemo } from 'react';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import { Label } from '../Form/Label';
|
|
9
9
|
|
|
@@ -68,6 +68,15 @@ const FormSelect = React.forwardRef(
|
|
|
68
68
|
);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
|
+
const getAllOptions = useMemo(
|
|
72
|
+
() =>
|
|
73
|
+
[
|
|
74
|
+
...options.filter( option => ! option.options ),
|
|
75
|
+
...options.filter( option => option.options ).map( option => option.options ),
|
|
76
|
+
].reduce( ( a, b ) => a.concat( b ), [] ),
|
|
77
|
+
[ options ]
|
|
78
|
+
);
|
|
79
|
+
|
|
71
80
|
const optionLabel = useCallback(
|
|
72
81
|
option => ( getOptionLabel ? getOptionLabel( option ) : option.label ),
|
|
73
82
|
[ getOptionLabel ]
|
|
@@ -79,8 +88,8 @@ const FormSelect = React.forwardRef(
|
|
|
79
88
|
);
|
|
80
89
|
|
|
81
90
|
const getOptionByValue = useCallback(
|
|
82
|
-
value =>
|
|
83
|
-
[
|
|
91
|
+
value => getAllOptions.find( option => `${ optionValue( option ) }` === `${ value }` ),
|
|
92
|
+
[ getAllOptions, optionValue ]
|
|
84
93
|
);
|
|
85
94
|
|
|
86
95
|
const onValueChange = useCallback(
|
|
@@ -26,6 +26,17 @@ const options = [
|
|
|
26
26
|
{ value: 'vanilla', label: 'Vanilla' },
|
|
27
27
|
];
|
|
28
28
|
|
|
29
|
+
const groupedOptions = [
|
|
30
|
+
{
|
|
31
|
+
label: 'Group name',
|
|
32
|
+
options: options,
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
label: 'Another Group name',
|
|
36
|
+
options: options,
|
|
37
|
+
},
|
|
38
|
+
];
|
|
39
|
+
|
|
29
40
|
// eslint-disable-next-line react/prop-types
|
|
30
41
|
const DefaultComponent = ( { label = 'Label', width = 250, onChange, ...rest } ) => (
|
|
31
42
|
<>
|
|
@@ -66,16 +77,7 @@ export const WithGroup = DefaultComponent.bind( {} );
|
|
|
66
77
|
|
|
67
78
|
WithGroup.args = {
|
|
68
79
|
label: 'Group Label',
|
|
69
|
-
options: [
|
|
70
|
-
{
|
|
71
|
-
label: 'Group name',
|
|
72
|
-
options: options,
|
|
73
|
-
},
|
|
74
|
-
{
|
|
75
|
-
label: 'Another Group name',
|
|
76
|
-
options: options,
|
|
77
|
-
},
|
|
78
|
-
],
|
|
80
|
+
options: [ ...options, ...groupedOptions ],
|
|
79
81
|
};
|
|
80
82
|
|
|
81
83
|
export const IsInline = DefaultComponent.bind( {} );
|
|
@@ -84,16 +86,7 @@ IsInline.args = {
|
|
|
84
86
|
label: 'Inline Select',
|
|
85
87
|
isInline: true,
|
|
86
88
|
width: '100%',
|
|
87
|
-
options:
|
|
88
|
-
{
|
|
89
|
-
label: 'Group name',
|
|
90
|
-
options: options,
|
|
91
|
-
},
|
|
92
|
-
{
|
|
93
|
-
label: 'Another Group name',
|
|
94
|
-
options: options,
|
|
95
|
-
},
|
|
96
|
-
],
|
|
89
|
+
options: groupedOptions,
|
|
97
90
|
};
|
|
98
91
|
|
|
99
92
|
export const WithOptionLabelAndValue = DefaultComponent.bind( {} );
|
|
@@ -121,7 +114,7 @@ export const WithOnChange = () => {
|
|
|
121
114
|
placeholder: '- Select -',
|
|
122
115
|
width: '100%',
|
|
123
116
|
onChange,
|
|
124
|
-
options,
|
|
117
|
+
options: [ ...options, ...groupedOptions ],
|
|
125
118
|
};
|
|
126
119
|
|
|
127
120
|
return (
|