@pareto-engineering/design-system 2.0.0-alpha.43 → 2.0.0-alpha.44

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.
Files changed (72) hide show
  1. package/.env.scripts.example +4 -0
  2. package/.eslintrc.js +25 -1
  3. package/babel.config.js +1 -0
  4. package/dist/cjs/f/FormInput/FormInput.js +5 -2
  5. package/dist/cjs/f/FormInput/styles.scss +11 -0
  6. package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +222 -0
  7. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +148 -0
  8. package/dist/cjs/f/fields/QueryCombobox/common/Combobox/index.js +15 -0
  9. package/dist/cjs/f/fields/QueryCombobox/common/Menu/Menu.js +103 -0
  10. package/dist/cjs/f/fields/QueryCombobox/common/Menu/index.js +15 -0
  11. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +229 -0
  12. package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/index.js +15 -0
  13. package/dist/cjs/f/fields/QueryCombobox/common/index.js +29 -0
  14. package/dist/cjs/f/fields/QueryCombobox/index.js +15 -0
  15. package/dist/cjs/f/fields/QueryCombobox/styles.scss +65 -0
  16. package/dist/cjs/f/fields/SelectInput/SelectInput.js +0 -1
  17. package/dist/cjs/f/fields/SelectInput/styles.scss +8 -6
  18. package/dist/cjs/index.js +13 -0
  19. package/dist/cjs/test/QueryLoader/QueryLoader.js +41 -0
  20. package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +71 -0
  21. package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js +49 -0
  22. package/dist/cjs/test/QueryLoader/common/PreloadedTestData/index.js +15 -0
  23. package/dist/cjs/test/QueryLoader/common/index.js +13 -0
  24. package/dist/cjs/test/QueryLoader/index.js +15 -0
  25. package/dist/cjs/test/QueryLoader/styles.scss +9 -0
  26. package/dist/cjs/test/index.js +13 -0
  27. package/dist/es/f/FormInput/FormInput.js +4 -1
  28. package/dist/es/f/FormInput/styles.scss +11 -0
  29. package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +197 -0
  30. package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +129 -0
  31. package/dist/es/f/fields/QueryCombobox/common/Combobox/index.js +2 -0
  32. package/dist/es/f/fields/QueryCombobox/common/Menu/Menu.js +77 -0
  33. package/dist/es/f/fields/QueryCombobox/common/Menu/index.js +2 -0
  34. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +202 -0
  35. package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/index.js +2 -0
  36. package/dist/es/f/fields/QueryCombobox/common/index.js +3 -0
  37. package/dist/es/f/fields/QueryCombobox/index.js +2 -0
  38. package/dist/es/f/fields/QueryCombobox/styles.scss +65 -0
  39. package/dist/es/f/fields/SelectInput/SelectInput.js +0 -1
  40. package/dist/es/f/fields/SelectInput/styles.scss +8 -6
  41. package/dist/es/index.js +2 -1
  42. package/dist/es/test/QueryLoader/QueryLoader.js +29 -0
  43. package/dist/es/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +71 -0
  44. package/dist/es/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js +31 -0
  45. package/dist/es/test/QueryLoader/common/PreloadedTestData/index.js +2 -0
  46. package/dist/es/test/QueryLoader/common/index.js +1 -0
  47. package/dist/es/test/QueryLoader/index.js +2 -0
  48. package/dist/es/test/QueryLoader/styles.scss +9 -0
  49. package/dist/es/test/index.js +1 -0
  50. package/package.json +14 -2
  51. package/relay.config.js +12 -0
  52. package/schema.graphql +4075 -0
  53. package/scripts/fetchSchema.js +74 -0
  54. package/src/__snapshots__/Storyshots.test.js.snap +10 -8
  55. package/src/stories/test/QueryLoader.stories.jsx +36 -0
  56. package/src/stories/utils/relay/EnvironmentProvider.jsx +14 -0
  57. package/src/stories/utils/relay/environment.js +5 -0
  58. package/src/stories/utils/relay/index.js +4 -0
  59. package/src/stories/utils/relay/mockRelayOperation.js +14 -0
  60. package/src/stories/utils/relay/mockResolvers.js +299 -0
  61. package/src/ui/f/FormInput/FormInput.jsx +5 -1
  62. package/src/ui/f/FormInput/styles.scss +11 -0
  63. package/src/ui/f/fields/SelectInput/SelectInput.jsx +1 -1
  64. package/src/ui/f/fields/SelectInput/styles.scss +8 -6
  65. package/src/ui/index.js +1 -0
  66. package/src/ui/test/QueryLoader/QueryLoader.jsx +41 -0
  67. package/src/ui/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +68 -0
  68. package/src/ui/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.jsx +51 -0
  69. package/src/ui/test/QueryLoader/common/PreloadedTestData/index.js +2 -0
  70. package/src/ui/test/QueryLoader/common/index.js +1 -0
  71. package/src/ui/test/QueryLoader/index.js +2 -0
  72. package/src/ui/test/index.js +1 -0
@@ -0,0 +1,4 @@
1
+ DEBUG=False
2
+ GITHUB_BACKEND_ORG=
3
+ GITHUB_BACKEND_REPO=
4
+ GITHUB_READONLY_PAT=
package/.eslintrc.js CHANGED
@@ -1,3 +1,5 @@
1
+ const fs = require('fs')
2
+
1
3
  module.exports = {
2
4
  settings:{
3
5
  'import/resolver':{
@@ -8,9 +10,15 @@ module.exports = {
8
10
  browser:true,
9
11
  node :true,
10
12
  },
13
+ globals:{
14
+ graphql:'readonly',
15
+ },
11
16
  parser :'@babel/eslint-parser',
12
17
  extends:['airbnb'],
13
- rules :{
18
+ plugins:[
19
+ 'graphql',
20
+ ],
21
+ rules:{
14
22
  semi:[
15
23
  2,
16
24
  'never',
@@ -37,5 +45,21 @@ module.exports = {
37
45
  'import/prefer-default-export':[
38
46
  0,
39
47
  ],
48
+ 'graphql/template-strings':[2, {
49
+ // Import default settings for your GraphQL client. Supported values:
50
+ // 'apollo', 'relay', 'lokka', 'fraql', 'literal'
51
+ env:'relay',
52
+ // Import your schema JSON here
53
+ // schemaJson: require('./schema.graphql'),
54
+
55
+ // OR provide absolute path to your schema JSON (but not if using `eslint --cache`!)
56
+ // schemaJsonFilepath: path.resolve(__dirname, './schema.json'),
57
+
58
+ // OR provide the schema in the Schema Language format
59
+ schemaString:fs.readFileSync('./schema.graphql', { encoding: 'utf8', flag: 'r' }),
60
+
61
+ tagName:'graphql',
62
+ // tagName is set for you to Relay.QL
63
+ }],
40
64
  },
41
65
  }
package/babel.config.js CHANGED
@@ -29,6 +29,7 @@ module.exports = function (api) {
29
29
  '@babel/preset-react',
30
30
  ]
31
31
  const plugins = [
32
+ 'relay',
32
33
  ['module-resolver', {
33
34
  root:['./src'],
34
35
  }],
@@ -15,12 +15,12 @@ var _excluded = ["className", "type", "extraTypes", "disabled"];
15
15
 
16
16
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
17
 
18
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
19
+
18
20
  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); }
19
21
 
20
22
  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; }
21
23
 
22
- function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
23
-
24
24
  function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
25
25
 
26
26
  function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -41,6 +41,9 @@ var FormInput = _ref => {
41
41
  } = _ref,
42
42
  otherProps = _objectWithoutProperties(_ref, _excluded);
43
43
 
44
+ (0, React.useLayoutEffect)(() => {
45
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
46
+ }, []);
44
47
  var newClassName = [className, componentClassName].filter(Boolean).join(' ');
45
48
 
46
49
  if (type === 'textarea') {
@@ -0,0 +1,11 @@
1
+ /* @pareto-engineering/generator-front 1.0.12 */
2
+
3
+ @use "@pareto-engineering/bem";
4
+
5
+ $default-margin: 1em;
6
+
7
+ .#{bem.$base}.form-input {
8
+ &+& {
9
+ margin-top: $default-margin;
10
+ }
11
+ }
@@ -0,0 +1,222 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _reactRelay = require("react-relay");
11
+
12
+ var _propTypes = _interopRequireDefault(require("prop-types"));
13
+
14
+ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
15
+
16
+ var _common = require("./common");
17
+
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
19
+
20
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
21
+
22
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
23
+
24
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
25
+
26
+ 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); }
27
+
28
+ 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; }
29
+
30
+ var baseClassName = _bem.default.base;
31
+ var componentClassName = 'query-combobox';
32
+ /**
33
+ * This is the component description.
34
+ */
35
+
36
+ var QueryCombobox = _ref => {
37
+ var {
38
+ id,
39
+ className: userClassName,
40
+ style,
41
+ query,
42
+ multiple,
43
+ name,
44
+ label,
45
+ color,
46
+ description,
47
+ disabled,
48
+ debounceMs,
49
+ graphQlNode,
50
+ searchVariable,
51
+ extraVariables,
52
+ optionsKeyMap,
53
+ setValue,
54
+ setError,
55
+ error // ...otherProps
56
+
57
+ } = _ref;
58
+ (0, React.useLayoutEffect)(() => {
59
+ Promise.resolve().then(() => _interopRequireWildcard(require("./styles.scss")));
60
+ }, []);
61
+ var environment = (0, _reactRelay.useRelayEnvironment)();
62
+ var [isFetching, setIsFetching] = (0, React.useState)(false);
63
+ var [options, setOptions] = (0, React.useState)([]);
64
+
65
+ var fetchOptions = inputValue => {
66
+ if (isFetching) return;
67
+ (0, _reactRelay.fetchQuery)(environment, query, _objectSpread({
68
+ [searchVariable]: inputValue
69
+ }, extraVariables)).subscribe({
70
+ start: () => {
71
+ setIsFetching(true);
72
+ },
73
+ complete: () => {
74
+ setIsFetching(false);
75
+ },
76
+ error: theError => {
77
+ console.log(theError);
78
+ setIsFetching(false);
79
+ if (setError) setError(theError);
80
+ },
81
+ next: data => {
82
+ setOptions(data[graphQlNode].edges.map(_ref2 => {
83
+ var {
84
+ node
85
+ } = _ref2;
86
+ return {
87
+ value: node[optionsKeyMap.value],
88
+ label: node[optionsKeyMap.label]
89
+ };
90
+ }));
91
+ }
92
+ });
93
+ };
94
+
95
+ var comboboxProps = {
96
+ options,
97
+ fetchOptions,
98
+ debounceMs,
99
+ disabled,
100
+ name,
101
+ label,
102
+ description,
103
+ setValue,
104
+ error
105
+ };
106
+ var Component = multiple ? _common.MultipleCombobox : _common.Combobox;
107
+ return /*#__PURE__*/React.createElement("div", {
108
+ id: id,
109
+ className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
110
+ style: style // {...otherProps}
111
+
112
+ }, /*#__PURE__*/React.createElement(Component, comboboxProps));
113
+ };
114
+
115
+ QueryCombobox.propTypes = {
116
+ /**
117
+ * The HTML id for this element
118
+ */
119
+ id: _propTypes.default.string,
120
+
121
+ /**
122
+ * The HTML class names for this element
123
+ */
124
+ className: _propTypes.default.string,
125
+
126
+ /**
127
+ * The React-written, css properties for this element.
128
+ */
129
+ style: _propTypes.default.objectOf(_propTypes.default.string),
130
+
131
+ /**
132
+ * The name of the custom select input
133
+ */
134
+ name: _propTypes.default.string,
135
+
136
+ /**
137
+ * The label of the custom select input
138
+ */
139
+ label: _propTypes.default.string,
140
+
141
+ /**
142
+ * The input field validator function
143
+ */
144
+ validate: _propTypes.default.func,
145
+
146
+ /**
147
+ * The custom select input description
148
+ */
149
+ description: _propTypes.default.string,
150
+
151
+ /**
152
+ * Whether the input should be disabled
153
+ */
154
+ disabled: _propTypes.default.bool,
155
+
156
+ /**
157
+ * The base color of the custom select input
158
+ */
159
+ color: _propTypes.default.string,
160
+
161
+ /**
162
+ * The debounce time in milliseconds
163
+ */
164
+ debounceMs: _propTypes.default.number,
165
+
166
+ /**
167
+ * The query to fetch the options
168
+ */
169
+ query: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]).isRequired,
170
+
171
+ /**
172
+ * The extra variables required to be used in the query.
173
+ */
174
+ extraVariables: _propTypes.default.objectOf(_propTypes.default.string),
175
+
176
+ /**
177
+ * The select option keys to be used to map the data to the select options.
178
+ * i.e `{ value: 'id', label: 'name' }`
179
+ */
180
+ optionsKeyMap: _propTypes.default.shape({
181
+ value: _propTypes.default.string.isRequired,
182
+ label: _propTypes.default.string.isRequired
183
+ }).isRequired,
184
+
185
+ /**
186
+ * Whether to allow multiple items selection
187
+ */
188
+ multiple: _propTypes.default.bool,
189
+
190
+ /**
191
+ * The graphql node to be used to destructure the fetched data
192
+ */
193
+ graphQlNode: _propTypes.default.string.isRequired,
194
+
195
+ /**
196
+ * The variable to be used to search the data
197
+ */
198
+ searchVariable: _propTypes.default.string,
199
+
200
+ /**
201
+ * The function to be called when the value changes
202
+ */
203
+ setValue: _propTypes.default.func.isRequired,
204
+
205
+ /**
206
+ * The function to be called with an error when the it occurs
207
+ */
208
+ setError: _propTypes.default.func,
209
+
210
+ /**
211
+ * The error object
212
+ */
213
+ error: _propTypes.default.objectOf(_propTypes.default.string)
214
+ };
215
+ QueryCombobox.defaultProps = {
216
+ extraVariables: {},
217
+ multiple: false,
218
+ color: 'background2',
219
+ searchVariable: 'search'
220
+ };
221
+ var _default = QueryCombobox;
222
+ exports.default = _default;
@@ -0,0 +1,148 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _downshift = require("downshift");
13
+
14
+ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
15
+
16
+ var _ = require("../../../..");
17
+
18
+ var _Menu = require("../Menu");
19
+
20
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
+
22
+ 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); }
23
+
24
+ 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; }
25
+
26
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
27
+
28
+ var baseClassName = _bem.default.base;
29
+ var componentClassName = 'combobox';
30
+ /**
31
+ * This is the component description.
32
+ */
33
+
34
+ var Combobox = _ref => {
35
+ var {
36
+ id,
37
+ className: userClassName,
38
+ style,
39
+ label,
40
+ name,
41
+ options: items,
42
+ fetchOptions,
43
+ setValue,
44
+ error,
45
+ description // ...otherProps
46
+
47
+ } = _ref;
48
+ var {
49
+ isOpen,
50
+ selectedItem,
51
+ getLabelProps,
52
+ getMenuProps,
53
+ getInputProps,
54
+ highlightedIndex,
55
+ getComboboxProps,
56
+ getItemProps
57
+ } = (0, _downshift.useCombobox)({
58
+ items,
59
+ itemToString: item => item ? item.label : '',
60
+ onInputValueChange: _ref2 => {
61
+ var {
62
+ inputValue
63
+ } = _ref2;
64
+ fetchOptions(inputValue);
65
+ }
66
+ });
67
+ (0, React.useEffect)(() => {
68
+ if (selectedItem) {
69
+ setValue(selectedItem.value);
70
+ }
71
+ }, [selectedItem]);
72
+ return /*#__PURE__*/React.createElement("div", {
73
+ id: id,
74
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
75
+ style: style
76
+ }, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
77
+ className: "input-label",
78
+ name: name
79
+ }), label), /*#__PURE__*/React.createElement("div", getComboboxProps(), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
80
+ className: "input"
81
+ }))), /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
82
+ isOpen: isOpen,
83
+ getItemProps: getItemProps,
84
+ highlightedIndex: highlightedIndex,
85
+ items: items
86
+ }, getMenuProps())), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
87
+ isError: !!error
88
+ }, error || description));
89
+ };
90
+
91
+ Combobox.propTypes = {
92
+ /**
93
+ * The HTML id for this element
94
+ */
95
+ id: _propTypes.default.string,
96
+
97
+ /**
98
+ * The HTML class names for this element
99
+ */
100
+ className: _propTypes.default.string,
101
+
102
+ /**
103
+ * The React-written, css properties for this element.
104
+ */
105
+ style: _propTypes.default.objectOf(_propTypes.default.string),
106
+
107
+ /**
108
+ * The label of the custom select input
109
+ */
110
+ label: _propTypes.default.string,
111
+
112
+ /**
113
+ * The custom select input options from the backend
114
+ */
115
+ options: _propTypes.default.arrayOf(_propTypes.default.shape({
116
+ value: _propTypes.default.string,
117
+ label: _propTypes.default.string
118
+ })),
119
+
120
+ /**
121
+ * The name of the custom select input
122
+ */
123
+ name: _propTypes.default.string,
124
+
125
+ /**
126
+ * The function to fetch the options from the backend
127
+ */
128
+ fetchOptions: _propTypes.default.func,
129
+
130
+ /**
131
+ * The function to set the value of the custom select input
132
+ */
133
+ setValue: _propTypes.default.func.isRequired,
134
+
135
+ /**
136
+ * The custom select input description
137
+ */
138
+ description: _propTypes.default.string,
139
+
140
+ /**
141
+ * The error object
142
+ */
143
+ error: _propTypes.default.objectOf(_propTypes.default.string)
144
+ };
145
+ Combobox.defaultProps = {// someProp:false
146
+ };
147
+ var _default = Combobox;
148
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Combobox", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Combobox.default;
10
+ }
11
+ });
12
+
13
+ var _Combobox = _interopRequireDefault(require("./Combobox"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -0,0 +1,103 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+
8
+ var React = _interopRequireWildcard(require("react"));
9
+
10
+ var _propTypes = _interopRequireDefault(require("prop-types"));
11
+
12
+ var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
13
+
14
+ var _excluded = ["id", "className", "style", "items", "isOpen", "highlightedIndex", "getItemProps"];
15
+
16
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
+
18
+ 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); }
19
+
20
+ 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; }
21
+
22
+ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
23
+
24
+ function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
25
+
26
+ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
27
+
28
+ // Local Definitions
29
+ var baseClassName = _bem.default.base;
30
+ var componentClassName = 'menu';
31
+ /**
32
+ * This is the component description.
33
+ */
34
+
35
+ var Menu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
36
+ var {
37
+ id,
38
+ className: userClassName,
39
+ style,
40
+ items,
41
+ isOpen,
42
+ highlightedIndex,
43
+ getItemProps
44
+ } = _ref,
45
+ otherProps = _objectWithoutProperties(_ref, _excluded);
46
+
47
+ return /*#__PURE__*/React.createElement("ul", _extends({
48
+ id: id,
49
+ className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
50
+ style: style,
51
+ ref: ref
52
+ }, otherProps), isOpen && items.map((item, index) => /*#__PURE__*/React.createElement("li", _extends({
53
+ key: item.label
54
+ }, getItemProps({
55
+ item,
56
+ index
57
+ }), {
58
+ className: "item ".concat(highlightedIndex === index ? _bem.default.modifierActive : '')
59
+ }), /*#__PURE__*/React.createElement("p", null, item.label))));
60
+ });
61
+ Menu.propTypes = {
62
+ /**
63
+ * The HTML id for this element
64
+ */
65
+ id: _propTypes.default.string,
66
+
67
+ /**
68
+ * The HTML class names for this element
69
+ */
70
+ className: _propTypes.default.string,
71
+
72
+ /**
73
+ * The React-written, css properties for this element.
74
+ */
75
+ style: _propTypes.default.objectOf(_propTypes.default.string),
76
+
77
+ /**
78
+ * The items to be displayed in the menu
79
+ */
80
+ items: _propTypes.default.arrayOf(_propTypes.default.shape({
81
+ value: _propTypes.default.string,
82
+ label: _propTypes.default.string
83
+ })),
84
+
85
+ /**
86
+ * Whether or not the menu is open
87
+ */
88
+ isOpen: _propTypes.default.bool,
89
+
90
+ /**
91
+ * The index of the highlighted item
92
+ */
93
+ highlightedIndex: _propTypes.default.number,
94
+
95
+ /**
96
+ * The function to get the item props
97
+ */
98
+ getItemProps: _propTypes.default.func
99
+ };
100
+ Menu.defaultProps = {// someProp:false
101
+ };
102
+ var _default = Menu;
103
+ exports.default = _default;
@@ -0,0 +1,15 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ Object.defineProperty(exports, "Menu", {
7
+ enumerable: true,
8
+ get: function get() {
9
+ return _Menu.default;
10
+ }
11
+ });
12
+
13
+ var _Menu = _interopRequireDefault(require("./Menu"));
14
+
15
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }