@coorpacademy/components 11.14.23 → 11.15.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/atom/autocomplete/index.d.ts +3 -1
- package/es/atom/autocomplete/index.d.ts.map +1 -1
- package/es/atom/autocomplete/index.js +45 -17
- package/es/atom/autocomplete/index.js.map +1 -1
- package/es/atom/autocomplete/style.css +150 -1
- package/es/molecule/brand-form-group/index.d.ts +3 -1
- package/es/organism/brand-form/index.d.ts +3 -1
- package/es/organism/wizard-contents/index.d.ts +3 -1
- package/es/template/back-office/brand-update/index.d.ts +3 -1
- package/lib/atom/autocomplete/index.d.ts +3 -1
- package/lib/atom/autocomplete/index.d.ts.map +1 -1
- package/lib/atom/autocomplete/index.js +48 -16
- package/lib/atom/autocomplete/index.js.map +1 -1
- package/lib/atom/autocomplete/style.css +150 -1
- package/lib/molecule/brand-form-group/index.d.ts +3 -1
- package/lib/organism/brand-form/index.d.ts +3 -1
- package/lib/organism/wizard-contents/index.d.ts +3 -1
- package/lib/template/back-office/brand-update/index.d.ts +3 -1
- package/locales/.mtslconfig.json +1 -0
- package/package.json +2 -2
|
@@ -9,11 +9,13 @@ declare namespace Autocomplete {
|
|
|
9
9
|
const required: PropTypes.Requireable<boolean>;
|
|
10
10
|
const modified: PropTypes.Requireable<boolean>;
|
|
11
11
|
const error: PropTypes.Requireable<boolean>;
|
|
12
|
+
const errorMessage: PropTypes.Requireable<string>;
|
|
12
13
|
const suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
13
14
|
name: PropTypes.Requireable<string>;
|
|
14
15
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
15
16
|
}> | null | undefined)[]>;
|
|
16
|
-
const
|
|
17
|
+
const theme: PropTypes.Requireable<string>;
|
|
18
|
+
const onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
17
19
|
const onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
18
20
|
const onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
19
21
|
const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";AAgBA,uDA8FC"}
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
+
import _keys from "lodash/fp/keys";
|
|
2
|
+
import _isEmpty from "lodash/fp/isEmpty";
|
|
1
3
|
import _isNil from "lodash/fp/isNil";
|
|
2
4
|
import _noop from "lodash/fp/noop";
|
|
3
|
-
import React, { useMemo } from 'react';
|
|
5
|
+
import React, { useCallback, useMemo } from 'react';
|
|
4
6
|
import Autosuggest from 'react-autosuggest';
|
|
5
7
|
import PropTypes from 'prop-types';
|
|
6
8
|
import classnames from 'classnames';
|
|
9
|
+
import { NovaSolidStatusClose as ErrorIcon } from '@coorpacademy/nova-icons';
|
|
7
10
|
import getClassState from '../../util/get-class-state';
|
|
8
11
|
import style from './style.css';
|
|
12
|
+
const THEME_STYLE = {
|
|
13
|
+
coorpmanager: style.coorpmanager,
|
|
14
|
+
default: style.default
|
|
15
|
+
};
|
|
9
16
|
|
|
10
17
|
const renderSuggestion = suggestion => /*#__PURE__*/React.createElement("span", null, suggestion.name);
|
|
11
18
|
|
|
@@ -17,32 +24,51 @@ const Autocomplete = props => {
|
|
|
17
24
|
required,
|
|
18
25
|
modified = false,
|
|
19
26
|
error = false,
|
|
27
|
+
errorMessage,
|
|
20
28
|
suggestions = [],
|
|
21
|
-
|
|
29
|
+
onInput = _noop,
|
|
22
30
|
onFetch = _noop,
|
|
23
31
|
onClear = _noop,
|
|
24
32
|
onBlur = _noop,
|
|
25
33
|
onSuggestionSelected = _noop,
|
|
26
|
-
title: propsTitle
|
|
34
|
+
title: propsTitle,
|
|
35
|
+
theme = 'default'
|
|
27
36
|
} = props;
|
|
28
|
-
const
|
|
29
|
-
const
|
|
30
|
-
const
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
const
|
|
37
|
+
const mainClass = THEME_STYLE[theme];
|
|
38
|
+
const title = useMemo(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);
|
|
39
|
+
const className = useMemo(() => getClassState(style.default, style.modified, style.error, modified, error), [modified, error]);
|
|
40
|
+
const handleInput = useCallback(e => {
|
|
41
|
+
onInput(e);
|
|
42
|
+
}, [onInput]);
|
|
43
|
+
const handleBlur = useCallback((e, selectedSuggestion) => onBlur(e, selectedSuggestion), [onBlur]);
|
|
44
|
+
const handleSuggestionsFetchRequested = useCallback(e => onFetch(e), [onFetch]);
|
|
45
|
+
const handleSuggestionsClearRequested = useCallback(e => onClear(e), [onClear]);
|
|
46
|
+
const handleSuggestionsSelected = useCallback((e, data) => onSuggestionSelected(data), [onSuggestionSelected]);
|
|
35
47
|
const inputProps = {
|
|
36
48
|
placeholder,
|
|
37
49
|
value,
|
|
38
|
-
onChange:
|
|
39
|
-
onBlur: handleBlur
|
|
50
|
+
onChange: _noop,
|
|
51
|
+
onBlur: handleBlur,
|
|
52
|
+
onInput: handleInput,
|
|
53
|
+
'data-testid': 'autocomplete-input'
|
|
40
54
|
};
|
|
55
|
+
const errorIconView = theme === 'coorpmanager' && error ? /*#__PURE__*/React.createElement(ErrorIcon, {
|
|
56
|
+
className: style.leftIcon
|
|
57
|
+
}) : null;
|
|
58
|
+
const errorText = theme === 'coorpmanager' && error ? /*#__PURE__*/React.createElement("div", {
|
|
59
|
+
className: style.errorText // eslint-disable-next-line react/no-danger
|
|
60
|
+
,
|
|
61
|
+
dangerouslySetInnerHTML: {
|
|
62
|
+
__html: errorMessage
|
|
63
|
+
}
|
|
64
|
+
}) : null;
|
|
41
65
|
return /*#__PURE__*/React.createElement("div", {
|
|
42
|
-
className: classnames(className, _isNil(
|
|
66
|
+
className: classnames(mainClass, className, _isNil(propsTitle) && style.isNoTitle)
|
|
43
67
|
}, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
|
|
44
|
-
className: style.title
|
|
45
|
-
}, title), /*#__PURE__*/React.createElement("div",
|
|
68
|
+
className: classnames(style.title, _isEmpty(value) && style.noValue)
|
|
69
|
+
}, title), /*#__PURE__*/React.createElement("div", {
|
|
70
|
+
className: style.inputContainer
|
|
71
|
+
}, /*#__PURE__*/React.createElement(Autosuggest, {
|
|
46
72
|
theme: {
|
|
47
73
|
container: style.container,
|
|
48
74
|
input: style.input,
|
|
@@ -60,7 +86,7 @@ const Autocomplete = props => {
|
|
|
60
86
|
inputProps: inputProps,
|
|
61
87
|
focusInputOnSuggestionClick: false,
|
|
62
88
|
onSuggestionSelected: handleSuggestionsSelected
|
|
63
|
-
}))), /*#__PURE__*/React.createElement("div", {
|
|
89
|
+
}), errorIconView, errorText)), /*#__PURE__*/React.createElement("div", {
|
|
64
90
|
className: style.description
|
|
65
91
|
}, description));
|
|
66
92
|
};
|
|
@@ -73,11 +99,13 @@ Autocomplete.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
73
99
|
required: PropTypes.bool,
|
|
74
100
|
modified: PropTypes.bool,
|
|
75
101
|
error: PropTypes.bool,
|
|
102
|
+
errorMessage: PropTypes.string,
|
|
76
103
|
suggestions: PropTypes.arrayOf(PropTypes.shape({
|
|
77
104
|
name: PropTypes.string,
|
|
78
105
|
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
|
|
79
106
|
})),
|
|
80
|
-
|
|
107
|
+
theme: PropTypes.oneOf(_keys(THEME_STYLE)),
|
|
108
|
+
onInput: PropTypes.func,
|
|
81
109
|
onFetch: PropTypes.func,
|
|
82
110
|
onClear: PropTypes.func,
|
|
83
111
|
onBlur: PropTypes.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","useMemo","Autosuggest","PropTypes","classnames","getClassState","style","renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","suggestions","
|
|
1
|
+
{"version":3,"file":"index.js","names":["React","useCallback","useMemo","Autosuggest","PropTypes","classnames","NovaSolidStatusClose","ErrorIcon","getClassState","style","THEME_STYLE","coorpmanager","default","renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","errorMessage","suggestions","onInput","onFetch","onClear","onBlur","onSuggestionSelected","title","propsTitle","theme","mainClass","className","handleInput","e","handleBlur","selectedSuggestion","handleSuggestionsFetchRequested","handleSuggestionsClearRequested","handleSuggestionsSelected","data","inputProps","onChange","errorIconView","leftIcon","errorText","__html","isNoTitle","noValue","inputContainer","container","input","suggestionsContainer","suggestionsContainerOpen","suggestionsList","suggestionHighlighted","propTypes","string","bool","arrayOf","shape","oneOfType","number","oneOf","func"],"sources":["../../../src/atom/autocomplete/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport Autosuggest from 'react-autosuggest';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {noop, isNil, isEmpty, keys} from 'lodash/fp';\nimport {NovaSolidStatusClose as ErrorIcon} from '@coorpacademy/nova-icons';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst THEME_STYLE = {\n coorpmanager: style.coorpmanager,\n default: style.default\n};\n\nconst renderSuggestion = suggestion => <span>{suggestion.name}</span>;\n\nconst Autocomplete = props => {\n const {\n placeholder = '',\n value,\n description,\n required,\n modified = false,\n error = false,\n errorMessage,\n suggestions = [],\n onInput = noop,\n onFetch = noop,\n onClear = noop,\n onBlur = noop,\n onSuggestionSelected = noop,\n title: propsTitle,\n theme = 'default'\n } = props;\n\n const mainClass = THEME_STYLE[theme];\n const title = useMemo(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);\n const className = useMemo(\n () => getClassState(style.default, style.modified, style.error, modified, error),\n [modified, error]\n );\n\n const handleInput = useCallback(\n e => {\n onInput(e);\n },\n [onInput]\n );\n const handleBlur = useCallback(\n (e, selectedSuggestion) => onBlur(e, selectedSuggestion),\n [onBlur]\n );\n const handleSuggestionsFetchRequested = useCallback(e => onFetch(e), [onFetch]);\n const handleSuggestionsClearRequested = useCallback(e => onClear(e), [onClear]);\n const handleSuggestionsSelected = useCallback(\n (e, data) => onSuggestionSelected(data),\n [onSuggestionSelected]\n );\n\n const inputProps = {\n placeholder,\n value,\n onChange: noop,\n onBlur: handleBlur,\n onInput: handleInput,\n 'data-testid': 'autocomplete-input'\n };\n\n const errorIconView =\n theme === 'coorpmanager' && error ? <ErrorIcon className={style.leftIcon} /> : null;\n\n const errorText =\n theme === 'coorpmanager' && error ? (\n <div\n className={style.errorText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: errorMessage}}\n />\n ) : null;\n return (\n <div className={classnames(mainClass, className, isNil(propsTitle) && style.isNoTitle)}>\n <label>\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>{title}</span>\n <div className={style.inputContainer}>\n <Autosuggest\n theme={{\n container: style.container,\n input: style.input,\n suggestionsContainer: style.suggestionsContainer,\n suggestionsContainerOpen: style.suggestionsContainerOpen,\n suggestionsList: style.suggestionsList,\n suggestion: style.suggestion,\n suggestionHighlighted: style.suggestionHighlighted\n }}\n suggestions={suggestions}\n onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n onSuggestionsClearRequested={handleSuggestionsClearRequested}\n getSuggestionValue={noop}\n renderSuggestion={renderSuggestion}\n inputProps={inputProps}\n focusInputOnSuggestionClick={false}\n onSuggestionSelected={handleSuggestionsSelected}\n />\n {errorIconView}\n {errorText}\n </div>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nAutocomplete.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n value: PropTypes.string,\n description: PropTypes.string,\n required: PropTypes.bool,\n modified: PropTypes.bool,\n error: PropTypes.bool,\n errorMessage: PropTypes.string,\n suggestions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n })\n ),\n theme: PropTypes.oneOf(keys(THEME_STYLE)),\n onInput: PropTypes.func,\n onFetch: PropTypes.func,\n onClear: PropTypes.func,\n onBlur: PropTypes.func,\n onSuggestionSelected: PropTypes.func\n};\n\nexport default Autocomplete;\n"],"mappings":"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"}
|
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
@value dark from colors;
|
|
6
6
|
@value medium from colors;
|
|
7
7
|
@value white from colors;
|
|
8
|
+
@value cm_positive_100 from colors;
|
|
9
|
+
@value cm_negative_100 from colors;
|
|
10
|
+
@value cm_grey_100 from colors;
|
|
11
|
+
@value cm_grey_150 from colors;
|
|
12
|
+
@value cm_grey_400 from colors;
|
|
13
|
+
@value cm_grey_700 from colors;
|
|
8
14
|
|
|
9
15
|
.default {
|
|
10
16
|
display: flex;
|
|
@@ -127,4 +133,147 @@
|
|
|
127
133
|
|
|
128
134
|
.suggestionHighlighted {
|
|
129
135
|
background-color: #ddd;
|
|
130
|
-
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/******************************* coorpmanager theme ***************************************/
|
|
139
|
+
|
|
140
|
+
.coorpmanager {
|
|
141
|
+
width: 100%;
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: flex-start;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
flex-wrap: nowrap;
|
|
146
|
+
position: relative;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.coorpmanager label {
|
|
150
|
+
width: 100%;
|
|
151
|
+
height: 100%;
|
|
152
|
+
margin-right: 0;
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: flex-start;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
position: relative;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.coorpmanager .title {
|
|
160
|
+
flex-grow: 0;
|
|
161
|
+
font-family: Gilroy;
|
|
162
|
+
font-size: 10px;
|
|
163
|
+
font-weight: bold;
|
|
164
|
+
font-stretch: normal;
|
|
165
|
+
font-style: normal;
|
|
166
|
+
line-height: 1.2;
|
|
167
|
+
letter-spacing: normal;
|
|
168
|
+
text-align: left;
|
|
169
|
+
z-index: 1;
|
|
170
|
+
color: cm_grey_400;
|
|
171
|
+
width: auto;
|
|
172
|
+
transition: all 0.25s linear;
|
|
173
|
+
pointer-events: none;
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: row;
|
|
176
|
+
flex-wrap: nowrap;
|
|
177
|
+
position: absolute;
|
|
178
|
+
top: 7px;
|
|
179
|
+
left: 16px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.coorpmanager .title.noValue{
|
|
183
|
+
font-size: 14px;
|
|
184
|
+
font-weight: 500;
|
|
185
|
+
color: cm_grey_700;
|
|
186
|
+
top: 14px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.coorpmanager:focus-within .title.noValue {
|
|
190
|
+
font-size: 10px;
|
|
191
|
+
font-weight: bold;
|
|
192
|
+
color: cm_grey_400;
|
|
193
|
+
top: 7px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.coorpmanager .inputContainer {
|
|
197
|
+
width: 100%
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.coorpmanager input {
|
|
201
|
+
width: 100%;
|
|
202
|
+
height: 44px;
|
|
203
|
+
margin: 0px;
|
|
204
|
+
display: flex;
|
|
205
|
+
align-items: flex-start;
|
|
206
|
+
flex-direction: column;
|
|
207
|
+
flex-grow: 0;
|
|
208
|
+
justify-content: center;
|
|
209
|
+
background-color: cm_grey_100;
|
|
210
|
+
box-sizing: border-box;
|
|
211
|
+
border: none;
|
|
212
|
+
border-radius: 7px;
|
|
213
|
+
color: cm_grey_700;
|
|
214
|
+
font-family: Gilroy;
|
|
215
|
+
font-size: 14px;
|
|
216
|
+
font-weight: 500;
|
|
217
|
+
font-stretch: normal;
|
|
218
|
+
font-style: normal;
|
|
219
|
+
line-height: 44px;
|
|
220
|
+
letter-spacing: normal;
|
|
221
|
+
outline: none;
|
|
222
|
+
padding: 19px 30px 5px 16px;
|
|
223
|
+
text-align: left;
|
|
224
|
+
transition: all 0.25s linear;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.coorpmanager .suggestionsContainerOpen {
|
|
228
|
+
width: 100%;
|
|
229
|
+
margin-left: 0;
|
|
230
|
+
border-radius: 7px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.coorpmanager:focus-within input::placeholder {
|
|
234
|
+
color: cm_grey_400;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.coorpmanager .suggestionsList {
|
|
238
|
+
border-radius: 7px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.coorpmanager .suggestionHighlighted {
|
|
242
|
+
border-radius: 5px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.coorpmanager input::placeholder {
|
|
246
|
+
color: transparent;
|
|
247
|
+
transition: color 0.25s linear;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.coorpmanager input:hover {
|
|
251
|
+
background-color: cm_grey_150;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.coorpmanager.error .leftIcon {
|
|
255
|
+
background-color: cm_negative_100;
|
|
256
|
+
color: white;
|
|
257
|
+
border-radius: 50%;
|
|
258
|
+
padding: 2px;
|
|
259
|
+
width: 10px;
|
|
260
|
+
height: 10px;
|
|
261
|
+
position: absolute;
|
|
262
|
+
right: 17px;
|
|
263
|
+
top: 14px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.coorpmanager .errorText {
|
|
267
|
+
flex-grow: 0;
|
|
268
|
+
opacity: 0.5;
|
|
269
|
+
font-family: Gilroy;
|
|
270
|
+
font-size: 10px;
|
|
271
|
+
font-weight: 500;
|
|
272
|
+
font-stretch: normal;
|
|
273
|
+
font-style: normal;
|
|
274
|
+
line-height: 1.2;
|
|
275
|
+
letter-spacing: normal;
|
|
276
|
+
text-align: left;
|
|
277
|
+
padding-top: 8px;
|
|
278
|
+
color: cm_negative_100;
|
|
279
|
+
}
|
|
@@ -33,11 +33,13 @@ declare namespace BrandFormGroup {
|
|
|
33
33
|
required: PropTypes.Requireable<boolean>;
|
|
34
34
|
modified: PropTypes.Requireable<boolean>;
|
|
35
35
|
error: PropTypes.Requireable<boolean>;
|
|
36
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
36
37
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
37
38
|
name: PropTypes.Requireable<string>;
|
|
38
39
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
39
40
|
}> | null | undefined)[]>;
|
|
40
|
-
|
|
41
|
+
theme: PropTypes.Requireable<string>;
|
|
42
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
41
43
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
42
44
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
43
45
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -63,11 +63,13 @@ declare namespace BrandForm {
|
|
|
63
63
|
required: PropTypes.Requireable<boolean>;
|
|
64
64
|
modified: PropTypes.Requireable<boolean>;
|
|
65
65
|
error: PropTypes.Requireable<boolean>;
|
|
66
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
66
67
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
67
68
|
name: PropTypes.Requireable<string>;
|
|
68
69
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
69
70
|
}> | null | undefined)[]>;
|
|
70
|
-
|
|
71
|
+
theme: PropTypes.Requireable<string>;
|
|
72
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
71
73
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
72
74
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
73
75
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -80,11 +80,13 @@ declare namespace WizardContents {
|
|
|
80
80
|
required: PropTypes.Requireable<boolean>;
|
|
81
81
|
modified: PropTypes.Requireable<boolean>;
|
|
82
82
|
error: PropTypes.Requireable<boolean>;
|
|
83
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
83
84
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
84
85
|
name: PropTypes.Requireable<string>;
|
|
85
86
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
86
87
|
}> | null | undefined)[]>;
|
|
87
|
-
|
|
88
|
+
theme: PropTypes.Requireable<string>;
|
|
89
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
88
90
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
89
91
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
90
92
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -165,11 +165,13 @@ declare namespace BrandUpdate {
|
|
|
165
165
|
required: PropTypes.Requireable<boolean>;
|
|
166
166
|
modified: PropTypes.Requireable<boolean>;
|
|
167
167
|
error: PropTypes.Requireable<boolean>;
|
|
168
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
168
169
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
169
170
|
name: PropTypes.Requireable<string>;
|
|
170
171
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
171
172
|
}> | null | undefined)[]>;
|
|
172
|
-
|
|
173
|
+
theme: PropTypes.Requireable<string>;
|
|
174
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
173
175
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
174
176
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
175
177
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -9,11 +9,13 @@ declare namespace Autocomplete {
|
|
|
9
9
|
const required: PropTypes.Requireable<boolean>;
|
|
10
10
|
const modified: PropTypes.Requireable<boolean>;
|
|
11
11
|
const error: PropTypes.Requireable<boolean>;
|
|
12
|
+
const errorMessage: PropTypes.Requireable<string>;
|
|
12
13
|
const suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
13
14
|
name: PropTypes.Requireable<string>;
|
|
14
15
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
15
16
|
}> | null | undefined)[]>;
|
|
16
|
-
const
|
|
17
|
+
const theme: PropTypes.Requireable<string>;
|
|
18
|
+
const onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
17
19
|
const onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
18
20
|
const onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
19
21
|
const onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";AAgBA,uDA8FC"}
|
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
4
|
exports.default = void 0;
|
|
5
5
|
|
|
6
|
+
var _keys2 = _interopRequireDefault(require("lodash/fp/keys"));
|
|
7
|
+
|
|
8
|
+
var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
|
|
9
|
+
|
|
6
10
|
var _isNil2 = _interopRequireDefault(require("lodash/fp/isNil"));
|
|
7
11
|
|
|
8
12
|
var _noop2 = _interopRequireDefault(require("lodash/fp/noop"));
|
|
@@ -15,6 +19,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
15
19
|
|
|
16
20
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
21
|
|
|
22
|
+
var _novaIcons = require("@coorpacademy/nova-icons");
|
|
23
|
+
|
|
18
24
|
var _getClassState = _interopRequireDefault(require("../../util/get-class-state"));
|
|
19
25
|
|
|
20
26
|
var _style = _interopRequireDefault(require("./style.css"));
|
|
@@ -25,6 +31,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
25
31
|
|
|
26
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
33
|
|
|
34
|
+
const THEME_STYLE = {
|
|
35
|
+
coorpmanager: _style.default.coorpmanager,
|
|
36
|
+
default: _style.default.default
|
|
37
|
+
};
|
|
38
|
+
|
|
28
39
|
const renderSuggestion = suggestion => /*#__PURE__*/_react.default.createElement("span", null, suggestion.name);
|
|
29
40
|
|
|
30
41
|
const Autocomplete = props => {
|
|
@@ -35,32 +46,51 @@ const Autocomplete = props => {
|
|
|
35
46
|
required,
|
|
36
47
|
modified = false,
|
|
37
48
|
error = false,
|
|
49
|
+
errorMessage,
|
|
38
50
|
suggestions = [],
|
|
39
|
-
|
|
51
|
+
onInput = _noop2.default,
|
|
40
52
|
onFetch = _noop2.default,
|
|
41
53
|
onClear = _noop2.default,
|
|
42
54
|
onBlur = _noop2.default,
|
|
43
55
|
onSuggestionSelected = _noop2.default,
|
|
44
|
-
title: propsTitle
|
|
56
|
+
title: propsTitle,
|
|
57
|
+
theme = 'default'
|
|
45
58
|
} = props;
|
|
46
|
-
const
|
|
47
|
-
const
|
|
48
|
-
const
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
const
|
|
59
|
+
const mainClass = THEME_STYLE[theme];
|
|
60
|
+
const title = (0, _react.useMemo)(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);
|
|
61
|
+
const className = (0, _react.useMemo)(() => (0, _getClassState.default)(_style.default.default, _style.default.modified, _style.default.error, modified, error), [modified, error]);
|
|
62
|
+
const handleInput = (0, _react.useCallback)(e => {
|
|
63
|
+
onInput(e);
|
|
64
|
+
}, [onInput]);
|
|
65
|
+
const handleBlur = (0, _react.useCallback)((e, selectedSuggestion) => onBlur(e, selectedSuggestion), [onBlur]);
|
|
66
|
+
const handleSuggestionsFetchRequested = (0, _react.useCallback)(e => onFetch(e), [onFetch]);
|
|
67
|
+
const handleSuggestionsClearRequested = (0, _react.useCallback)(e => onClear(e), [onClear]);
|
|
68
|
+
const handleSuggestionsSelected = (0, _react.useCallback)((e, data) => onSuggestionSelected(data), [onSuggestionSelected]);
|
|
53
69
|
const inputProps = {
|
|
54
70
|
placeholder,
|
|
55
71
|
value,
|
|
56
|
-
onChange:
|
|
57
|
-
onBlur: handleBlur
|
|
72
|
+
onChange: _noop2.default,
|
|
73
|
+
onBlur: handleBlur,
|
|
74
|
+
onInput: handleInput,
|
|
75
|
+
'data-testid': 'autocomplete-input'
|
|
58
76
|
};
|
|
77
|
+
const errorIconView = theme === 'coorpmanager' && error ? /*#__PURE__*/_react.default.createElement(_novaIcons.NovaSolidStatusClose, {
|
|
78
|
+
className: _style.default.leftIcon
|
|
79
|
+
}) : null;
|
|
80
|
+
const errorText = theme === 'coorpmanager' && error ? /*#__PURE__*/_react.default.createElement("div", {
|
|
81
|
+
className: _style.default.errorText // eslint-disable-next-line react/no-danger
|
|
82
|
+
,
|
|
83
|
+
dangerouslySetInnerHTML: {
|
|
84
|
+
__html: errorMessage
|
|
85
|
+
}
|
|
86
|
+
}) : null;
|
|
59
87
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
60
|
-
className: (0, _classnames.default)(className, (0, _isNil2.default)(
|
|
88
|
+
className: (0, _classnames.default)(mainClass, className, (0, _isNil2.default)(propsTitle) && _style.default.isNoTitle)
|
|
61
89
|
}, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement("span", {
|
|
62
|
-
className: _style.default.title
|
|
63
|
-
}, title), /*#__PURE__*/_react.default.createElement("div",
|
|
90
|
+
className: (0, _classnames.default)(_style.default.title, (0, _isEmpty2.default)(value) && _style.default.noValue)
|
|
91
|
+
}, title), /*#__PURE__*/_react.default.createElement("div", {
|
|
92
|
+
className: _style.default.inputContainer
|
|
93
|
+
}, /*#__PURE__*/_react.default.createElement(_reactAutosuggest.default, {
|
|
64
94
|
theme: {
|
|
65
95
|
container: _style.default.container,
|
|
66
96
|
input: _style.default.input,
|
|
@@ -78,7 +108,7 @@ const Autocomplete = props => {
|
|
|
78
108
|
inputProps: inputProps,
|
|
79
109
|
focusInputOnSuggestionClick: false,
|
|
80
110
|
onSuggestionSelected: handleSuggestionsSelected
|
|
81
|
-
}))), /*#__PURE__*/_react.default.createElement("div", {
|
|
111
|
+
}), errorIconView, errorText)), /*#__PURE__*/_react.default.createElement("div", {
|
|
82
112
|
className: _style.default.description
|
|
83
113
|
}, description));
|
|
84
114
|
};
|
|
@@ -91,11 +121,13 @@ Autocomplete.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
|
91
121
|
required: _propTypes.default.bool,
|
|
92
122
|
modified: _propTypes.default.bool,
|
|
93
123
|
error: _propTypes.default.bool,
|
|
124
|
+
errorMessage: _propTypes.default.string,
|
|
94
125
|
suggestions: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
95
126
|
name: _propTypes.default.string,
|
|
96
127
|
value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])
|
|
97
128
|
})),
|
|
98
|
-
|
|
129
|
+
theme: _propTypes.default.oneOf((0, _keys2.default)(THEME_STYLE)),
|
|
130
|
+
onInput: _propTypes.default.func,
|
|
99
131
|
onFetch: _propTypes.default.func,
|
|
100
132
|
onClear: _propTypes.default.func,
|
|
101
133
|
onBlur: _propTypes.default.func,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","suggestions","
|
|
1
|
+
{"version":3,"file":"index.js","names":["THEME_STYLE","coorpmanager","style","default","renderSuggestion","suggestion","name","Autocomplete","props","placeholder","value","description","required","modified","error","errorMessage","suggestions","onInput","onFetch","onClear","onBlur","onSuggestionSelected","title","propsTitle","theme","mainClass","useMemo","className","getClassState","handleInput","useCallback","e","handleBlur","selectedSuggestion","handleSuggestionsFetchRequested","handleSuggestionsClearRequested","handleSuggestionsSelected","data","inputProps","onChange","errorIconView","leftIcon","errorText","__html","classnames","isNoTitle","noValue","inputContainer","container","input","suggestionsContainer","suggestionsContainerOpen","suggestionsList","suggestionHighlighted","propTypes","PropTypes","string","bool","arrayOf","shape","oneOfType","number","oneOf","func"],"sources":["../../../src/atom/autocomplete/index.js"],"sourcesContent":["import React, {useCallback, useMemo} from 'react';\nimport Autosuggest from 'react-autosuggest';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {noop, isNil, isEmpty, keys} from 'lodash/fp';\nimport {NovaSolidStatusClose as ErrorIcon} from '@coorpacademy/nova-icons';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst THEME_STYLE = {\n coorpmanager: style.coorpmanager,\n default: style.default\n};\n\nconst renderSuggestion = suggestion => <span>{suggestion.name}</span>;\n\nconst Autocomplete = props => {\n const {\n placeholder = '',\n value,\n description,\n required,\n modified = false,\n error = false,\n errorMessage,\n suggestions = [],\n onInput = noop,\n onFetch = noop,\n onClear = noop,\n onBlur = noop,\n onSuggestionSelected = noop,\n title: propsTitle,\n theme = 'default'\n } = props;\n\n const mainClass = THEME_STYLE[theme];\n const title = useMemo(() => `${propsTitle}${required ? '*' : ''}`, [propsTitle, required]);\n const className = useMemo(\n () => getClassState(style.default, style.modified, style.error, modified, error),\n [modified, error]\n );\n\n const handleInput = useCallback(\n e => {\n onInput(e);\n },\n [onInput]\n );\n const handleBlur = useCallback(\n (e, selectedSuggestion) => onBlur(e, selectedSuggestion),\n [onBlur]\n );\n const handleSuggestionsFetchRequested = useCallback(e => onFetch(e), [onFetch]);\n const handleSuggestionsClearRequested = useCallback(e => onClear(e), [onClear]);\n const handleSuggestionsSelected = useCallback(\n (e, data) => onSuggestionSelected(data),\n [onSuggestionSelected]\n );\n\n const inputProps = {\n placeholder,\n value,\n onChange: noop,\n onBlur: handleBlur,\n onInput: handleInput,\n 'data-testid': 'autocomplete-input'\n };\n\n const errorIconView =\n theme === 'coorpmanager' && error ? <ErrorIcon className={style.leftIcon} /> : null;\n\n const errorText =\n theme === 'coorpmanager' && error ? (\n <div\n className={style.errorText}\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{__html: errorMessage}}\n />\n ) : null;\n return (\n <div className={classnames(mainClass, className, isNil(propsTitle) && style.isNoTitle)}>\n <label>\n <span className={classnames(style.title, isEmpty(value) && style.noValue)}>{title}</span>\n <div className={style.inputContainer}>\n <Autosuggest\n theme={{\n container: style.container,\n input: style.input,\n suggestionsContainer: style.suggestionsContainer,\n suggestionsContainerOpen: style.suggestionsContainerOpen,\n suggestionsList: style.suggestionsList,\n suggestion: style.suggestion,\n suggestionHighlighted: style.suggestionHighlighted\n }}\n suggestions={suggestions}\n onSuggestionsFetchRequested={handleSuggestionsFetchRequested}\n onSuggestionsClearRequested={handleSuggestionsClearRequested}\n getSuggestionValue={noop}\n renderSuggestion={renderSuggestion}\n inputProps={inputProps}\n focusInputOnSuggestionClick={false}\n onSuggestionSelected={handleSuggestionsSelected}\n />\n {errorIconView}\n {errorText}\n </div>\n </label>\n <div className={style.description}>{description}</div>\n </div>\n );\n};\n\nAutocomplete.propTypes = {\n title: PropTypes.string,\n placeholder: PropTypes.string,\n value: PropTypes.string,\n description: PropTypes.string,\n required: PropTypes.bool,\n modified: PropTypes.bool,\n error: PropTypes.bool,\n errorMessage: PropTypes.string,\n suggestions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n })\n ),\n theme: PropTypes.oneOf(keys(THEME_STYLE)),\n onInput: PropTypes.func,\n onFetch: PropTypes.func,\n onClear: PropTypes.func,\n onBlur: PropTypes.func,\n onSuggestionSelected: PropTypes.func\n};\n\nexport default Autocomplete;\n"],"mappings":"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"}
|
|
@@ -5,6 +5,12 @@
|
|
|
5
5
|
@value dark from colors;
|
|
6
6
|
@value medium from colors;
|
|
7
7
|
@value white from colors;
|
|
8
|
+
@value cm_positive_100 from colors;
|
|
9
|
+
@value cm_negative_100 from colors;
|
|
10
|
+
@value cm_grey_100 from colors;
|
|
11
|
+
@value cm_grey_150 from colors;
|
|
12
|
+
@value cm_grey_400 from colors;
|
|
13
|
+
@value cm_grey_700 from colors;
|
|
8
14
|
|
|
9
15
|
.default {
|
|
10
16
|
display: flex;
|
|
@@ -127,4 +133,147 @@
|
|
|
127
133
|
|
|
128
134
|
.suggestionHighlighted {
|
|
129
135
|
background-color: #ddd;
|
|
130
|
-
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
/******************************* coorpmanager theme ***************************************/
|
|
139
|
+
|
|
140
|
+
.coorpmanager {
|
|
141
|
+
width: 100%;
|
|
142
|
+
display: flex;
|
|
143
|
+
align-items: flex-start;
|
|
144
|
+
flex-direction: column;
|
|
145
|
+
flex-wrap: nowrap;
|
|
146
|
+
position: relative;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.coorpmanager label {
|
|
150
|
+
width: 100%;
|
|
151
|
+
height: 100%;
|
|
152
|
+
margin-right: 0;
|
|
153
|
+
display: flex;
|
|
154
|
+
align-items: flex-start;
|
|
155
|
+
flex-direction: column;
|
|
156
|
+
position: relative;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.coorpmanager .title {
|
|
160
|
+
flex-grow: 0;
|
|
161
|
+
font-family: Gilroy;
|
|
162
|
+
font-size: 10px;
|
|
163
|
+
font-weight: bold;
|
|
164
|
+
font-stretch: normal;
|
|
165
|
+
font-style: normal;
|
|
166
|
+
line-height: 1.2;
|
|
167
|
+
letter-spacing: normal;
|
|
168
|
+
text-align: left;
|
|
169
|
+
z-index: 1;
|
|
170
|
+
color: cm_grey_400;
|
|
171
|
+
width: auto;
|
|
172
|
+
transition: all 0.25s linear;
|
|
173
|
+
pointer-events: none;
|
|
174
|
+
display: flex;
|
|
175
|
+
flex-direction: row;
|
|
176
|
+
flex-wrap: nowrap;
|
|
177
|
+
position: absolute;
|
|
178
|
+
top: 7px;
|
|
179
|
+
left: 16px;
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
.coorpmanager .title.noValue{
|
|
183
|
+
font-size: 14px;
|
|
184
|
+
font-weight: 500;
|
|
185
|
+
color: cm_grey_700;
|
|
186
|
+
top: 14px;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.coorpmanager:focus-within .title.noValue {
|
|
190
|
+
font-size: 10px;
|
|
191
|
+
font-weight: bold;
|
|
192
|
+
color: cm_grey_400;
|
|
193
|
+
top: 7px;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
.coorpmanager .inputContainer {
|
|
197
|
+
width: 100%
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
.coorpmanager input {
|
|
201
|
+
width: 100%;
|
|
202
|
+
height: 44px;
|
|
203
|
+
margin: 0px;
|
|
204
|
+
display: flex;
|
|
205
|
+
align-items: flex-start;
|
|
206
|
+
flex-direction: column;
|
|
207
|
+
flex-grow: 0;
|
|
208
|
+
justify-content: center;
|
|
209
|
+
background-color: cm_grey_100;
|
|
210
|
+
box-sizing: border-box;
|
|
211
|
+
border: none;
|
|
212
|
+
border-radius: 7px;
|
|
213
|
+
color: cm_grey_700;
|
|
214
|
+
font-family: Gilroy;
|
|
215
|
+
font-size: 14px;
|
|
216
|
+
font-weight: 500;
|
|
217
|
+
font-stretch: normal;
|
|
218
|
+
font-style: normal;
|
|
219
|
+
line-height: 44px;
|
|
220
|
+
letter-spacing: normal;
|
|
221
|
+
outline: none;
|
|
222
|
+
padding: 19px 30px 5px 16px;
|
|
223
|
+
text-align: left;
|
|
224
|
+
transition: all 0.25s linear;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.coorpmanager .suggestionsContainerOpen {
|
|
228
|
+
width: 100%;
|
|
229
|
+
margin-left: 0;
|
|
230
|
+
border-radius: 7px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.coorpmanager:focus-within input::placeholder {
|
|
234
|
+
color: cm_grey_400;
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
.coorpmanager .suggestionsList {
|
|
238
|
+
border-radius: 7px;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.coorpmanager .suggestionHighlighted {
|
|
242
|
+
border-radius: 5px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.coorpmanager input::placeholder {
|
|
246
|
+
color: transparent;
|
|
247
|
+
transition: color 0.25s linear;
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.coorpmanager input:hover {
|
|
251
|
+
background-color: cm_grey_150;
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
.coorpmanager.error .leftIcon {
|
|
255
|
+
background-color: cm_negative_100;
|
|
256
|
+
color: white;
|
|
257
|
+
border-radius: 50%;
|
|
258
|
+
padding: 2px;
|
|
259
|
+
width: 10px;
|
|
260
|
+
height: 10px;
|
|
261
|
+
position: absolute;
|
|
262
|
+
right: 17px;
|
|
263
|
+
top: 14px;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
.coorpmanager .errorText {
|
|
267
|
+
flex-grow: 0;
|
|
268
|
+
opacity: 0.5;
|
|
269
|
+
font-family: Gilroy;
|
|
270
|
+
font-size: 10px;
|
|
271
|
+
font-weight: 500;
|
|
272
|
+
font-stretch: normal;
|
|
273
|
+
font-style: normal;
|
|
274
|
+
line-height: 1.2;
|
|
275
|
+
letter-spacing: normal;
|
|
276
|
+
text-align: left;
|
|
277
|
+
padding-top: 8px;
|
|
278
|
+
color: cm_negative_100;
|
|
279
|
+
}
|
|
@@ -33,11 +33,13 @@ declare namespace BrandFormGroup {
|
|
|
33
33
|
required: PropTypes.Requireable<boolean>;
|
|
34
34
|
modified: PropTypes.Requireable<boolean>;
|
|
35
35
|
error: PropTypes.Requireable<boolean>;
|
|
36
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
36
37
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
37
38
|
name: PropTypes.Requireable<string>;
|
|
38
39
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
39
40
|
}> | null | undefined)[]>;
|
|
40
|
-
|
|
41
|
+
theme: PropTypes.Requireable<string>;
|
|
42
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
41
43
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
42
44
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
43
45
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -63,11 +63,13 @@ declare namespace BrandForm {
|
|
|
63
63
|
required: PropTypes.Requireable<boolean>;
|
|
64
64
|
modified: PropTypes.Requireable<boolean>;
|
|
65
65
|
error: PropTypes.Requireable<boolean>;
|
|
66
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
66
67
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
67
68
|
name: PropTypes.Requireable<string>;
|
|
68
69
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
69
70
|
}> | null | undefined)[]>;
|
|
70
|
-
|
|
71
|
+
theme: PropTypes.Requireable<string>;
|
|
72
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
71
73
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
72
74
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
73
75
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -80,11 +80,13 @@ declare namespace WizardContents {
|
|
|
80
80
|
required: PropTypes.Requireable<boolean>;
|
|
81
81
|
modified: PropTypes.Requireable<boolean>;
|
|
82
82
|
error: PropTypes.Requireable<boolean>;
|
|
83
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
83
84
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
84
85
|
name: PropTypes.Requireable<string>;
|
|
85
86
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
86
87
|
}> | null | undefined)[]>;
|
|
87
|
-
|
|
88
|
+
theme: PropTypes.Requireable<string>;
|
|
89
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
88
90
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
89
91
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
90
92
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -165,11 +165,13 @@ declare namespace BrandUpdate {
|
|
|
165
165
|
required: PropTypes.Requireable<boolean>;
|
|
166
166
|
modified: PropTypes.Requireable<boolean>;
|
|
167
167
|
error: PropTypes.Requireable<boolean>;
|
|
168
|
+
errorMessage: PropTypes.Requireable<string>;
|
|
168
169
|
suggestions: PropTypes.Requireable<(PropTypes.InferProps<{
|
|
169
170
|
name: PropTypes.Requireable<string>;
|
|
170
171
|
value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
171
172
|
}> | null | undefined)[]>;
|
|
172
|
-
|
|
173
|
+
theme: PropTypes.Requireable<string>;
|
|
174
|
+
onInput: PropTypes.Requireable<(...args: any[]) => any>;
|
|
173
175
|
onFetch: PropTypes.Requireable<(...args: any[]) => any>;
|
|
174
176
|
onClear: PropTypes.Requireable<(...args: any[]) => any>;
|
|
175
177
|
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"ignore_dirs":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coorpacademy/components",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.15.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "es/index.js",
|
|
@@ -168,5 +168,5 @@
|
|
|
168
168
|
"last 2 versions",
|
|
169
169
|
"IE 11"
|
|
170
170
|
],
|
|
171
|
-
"gitHead": "
|
|
171
|
+
"gitHead": "dc5b9ac11fcacf0432d48e55be42092c076cc754"
|
|
172
172
|
}
|