@coorpacademy/components 11.14.22 → 11.14.24-alpha.10

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 (46) hide show
  1. package/es/atom/autocomplete/index.d.ts +3 -1
  2. package/es/atom/autocomplete/index.d.ts.map +1 -1
  3. package/es/atom/autocomplete/index.js +55 -19
  4. package/es/atom/autocomplete/index.js.map +1 -1
  5. package/es/atom/autocomplete/style.css +223 -0
  6. package/es/atom/input-switch/index.d.ts.map +1 -1
  7. package/es/atom/input-switch/index.js +3 -1
  8. package/es/atom/input-switch/index.js.map +1 -1
  9. package/es/molecule/brand-form-group/index.d.ts +3 -1
  10. package/es/molecule/select-multiple/index.d.ts +0 -1
  11. package/es/molecule/select-multiple/index.d.ts.map +1 -1
  12. package/es/molecule/select-multiple/index.js +14 -29
  13. package/es/molecule/select-multiple/index.js.map +1 -1
  14. package/es/molecule/select-multiple/style.css +1 -1
  15. package/es/organism/brand-form/index.d.ts +4 -1
  16. package/es/organism/brand-form/index.d.ts.map +1 -1
  17. package/es/organism/brand-form/index.js +17 -7
  18. package/es/organism/brand-form/index.js.map +1 -1
  19. package/es/organism/user-preferences/index.js +3 -1
  20. package/es/organism/user-preferences/index.js.map +1 -1
  21. package/es/organism/wizard-contents/index.d.ts +4 -1
  22. package/es/template/back-office/brand-update/index.d.ts +4 -1
  23. package/lib/atom/autocomplete/index.d.ts +3 -1
  24. package/lib/atom/autocomplete/index.d.ts.map +1 -1
  25. package/lib/atom/autocomplete/index.js +58 -18
  26. package/lib/atom/autocomplete/index.js.map +1 -1
  27. package/lib/atom/autocomplete/style.css +223 -0
  28. package/lib/atom/input-switch/index.d.ts.map +1 -1
  29. package/lib/atom/input-switch/index.js +3 -1
  30. package/lib/atom/input-switch/index.js.map +1 -1
  31. package/lib/molecule/brand-form-group/index.d.ts +3 -1
  32. package/lib/molecule/select-multiple/index.d.ts +0 -1
  33. package/lib/molecule/select-multiple/index.d.ts.map +1 -1
  34. package/lib/molecule/select-multiple/index.js +15 -33
  35. package/lib/molecule/select-multiple/index.js.map +1 -1
  36. package/lib/molecule/select-multiple/style.css +1 -1
  37. package/lib/organism/brand-form/index.d.ts +4 -1
  38. package/lib/organism/brand-form/index.d.ts.map +1 -1
  39. package/lib/organism/brand-form/index.js +18 -7
  40. package/lib/organism/brand-form/index.js.map +1 -1
  41. package/lib/organism/user-preferences/index.js +3 -1
  42. package/lib/organism/user-preferences/index.js.map +1 -1
  43. package/lib/organism/wizard-contents/index.d.ts +4 -1
  44. package/lib/template/back-office/brand-update/index.d.ts +4 -1
  45. package/locales/.mtslconfig.json +1 -0
  46. 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 onChange: PropTypes.Requireable<(...args: any[]) => any>;
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":";AAUA,uDAoEC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/autocomplete/index.js"],"names":[],"mappings":";AAmBA,uDA8GC"}
@@ -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, NovaCompositionCoorpacademyInformationIcon as InfoIcon } 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,61 @@ const Autocomplete = props => {
17
24
  required,
18
25
  modified = false,
19
26
  error = false,
27
+ errorMessage,
20
28
  suggestions = [],
21
- onChange = _noop,
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 title = `${propsTitle}${required ? ' *' : ''}`;
29
- const className = getClassState(style.default, style.modified, style.error, modified, error);
30
- const handleChange = useMemo(() => e => onChange(e), [onChange]);
31
- const handleBlur = useMemo(() => (e, selectedSuggestion) => onBlur(e, selectedSuggestion), [onBlur]);
32
- const handleSuggestionsFetchRequested = useMemo(() => e => onFetch(e), [onFetch]);
33
- const handleSuggestionsClearRequested = useMemo(() => e => onClear(e), [onClear]);
34
- const handleSuggestionsSelected = useMemo(() => (e, data) => onSuggestionSelected(data), [onSuggestionSelected]);
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: handleChange,
39
- onBlur: handleBlur
50
+ onChange: _noop,
51
+ onBlur: handleBlur,
52
+ onInput: handleInput,
53
+ 'data-testid': 'autocomplete-input'
40
54
  };
55
+ const descriptionView = description && theme !== 'coorpmanager' ? /*#__PURE__*/React.createElement("div", {
56
+ className: style.description
57
+ }, description) : null;
58
+ const toolTipView = description && theme === 'coorpmanager' ? /*#__PURE__*/React.createElement("div", {
59
+ className: style.infoIconWrapper
60
+ }, /*#__PURE__*/React.createElement(InfoIcon, {
61
+ className: style.infoIcon
62
+ }), /*#__PURE__*/React.createElement("div", {
63
+ className: style.descriptionLabel
64
+ }, description)) : null;
65
+ const errorIconView = theme === 'coorpmanager' && error ? /*#__PURE__*/React.createElement(ErrorIcon, {
66
+ className: style.leftIcon
67
+ }) : null;
68
+ const errorText = theme === 'coorpmanager' && error ? /*#__PURE__*/React.createElement("div", {
69
+ className: style.errorText // eslint-disable-next-line react/no-danger
70
+ ,
71
+ dangerouslySetInnerHTML: {
72
+ __html: errorMessage
73
+ }
74
+ }) : null;
41
75
  return /*#__PURE__*/React.createElement("div", {
42
- className: classnames(className, _isNil(title) && style.isNoTitle)
76
+ className: classnames(mainClass, className, _isNil(propsTitle) && style.isNoTitle)
43
77
  }, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("span", {
44
- className: style.title
45
- }, title), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Autosuggest, {
78
+ className: classnames(style.title, _isEmpty(value) && style.noValue)
79
+ }, title, toolTipView), /*#__PURE__*/React.createElement("div", {
80
+ className: style.inputContainer
81
+ }, /*#__PURE__*/React.createElement(Autosuggest, {
46
82
  theme: {
47
83
  container: style.container,
48
84
  input: style.input,
@@ -60,9 +96,7 @@ const Autocomplete = props => {
60
96
  inputProps: inputProps,
61
97
  focusInputOnSuggestionClick: false,
62
98
  onSuggestionSelected: handleSuggestionsSelected
63
- }))), /*#__PURE__*/React.createElement("div", {
64
- className: style.description
65
- }, description));
99
+ }), errorIconView, errorText)), descriptionView);
66
100
  };
67
101
 
68
102
  Autocomplete.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -73,11 +107,13 @@ Autocomplete.propTypes = process.env.NODE_ENV !== "production" ? {
73
107
  required: PropTypes.bool,
74
108
  modified: PropTypes.bool,
75
109
  error: PropTypes.bool,
110
+ errorMessage: PropTypes.string,
76
111
  suggestions: PropTypes.arrayOf(PropTypes.shape({
77
112
  name: PropTypes.string,
78
113
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
79
114
  })),
80
- onChange: PropTypes.func,
115
+ theme: PropTypes.oneOf(_keys(THEME_STYLE)),
116
+ onInput: PropTypes.func,
81
117
  onFetch: PropTypes.func,
82
118
  onClear: PropTypes.func,
83
119
  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","onChange","onFetch","onClear","onBlur","onSuggestionSelected","title","propsTitle","className","default","handleChange","e","handleBlur","selectedSuggestion","handleSuggestionsFetchRequested","handleSuggestionsClearRequested","handleSuggestionsSelected","data","inputProps","isNoTitle","container","input","suggestionsContainer","suggestionsContainerOpen","suggestionsList","suggestionHighlighted","propTypes","string","bool","arrayOf","shape","oneOfType","number","func"],"sources":["../../../src/atom/autocomplete/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport Autosuggest from 'react-autosuggest';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {noop, isNil} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\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 suggestions = [],\n onChange = noop,\n onFetch = noop,\n onClear = noop,\n onBlur = noop,\n onSuggestionSelected = noop,\n title: propsTitle\n } = props;\n\n const title = `${propsTitle}${required ? ' *' : ''}`;\n const className = getClassState(style.default, style.modified, style.error, modified, error);\n\n const handleChange = useMemo(() => e => onChange(e), [onChange]);\n const handleBlur = useMemo(\n () => (e, selectedSuggestion) => onBlur(e, selectedSuggestion),\n [onBlur]\n );\n const handleSuggestionsFetchRequested = useMemo(() => e => onFetch(e), [onFetch]);\n const handleSuggestionsClearRequested = useMemo(() => e => onClear(e), [onClear]);\n const handleSuggestionsSelected = useMemo(\n () => (e, data) => onSuggestionSelected(data),\n [onSuggestionSelected]\n );\n\n const inputProps = {\n placeholder,\n value,\n onChange: handleChange,\n onBlur: handleBlur\n };\n\n return (\n <div className={classnames(className, isNil(title) && style.isNoTitle)}>\n <label>\n <span className={style.title}>{title}</span>\n <div>\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 </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 suggestions: PropTypes.arrayOf(\n PropTypes.shape({\n name: PropTypes.string,\n value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])\n })\n ),\n onChange: 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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"}
1
+ {"version":3,"file":"index.js","names":["React","useCallback","useMemo","Autosuggest","PropTypes","classnames","NovaSolidStatusClose","ErrorIcon","NovaCompositionCoorpacademyInformationIcon","InfoIcon","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","descriptionView","toolTipView","infoIconWrapper","infoIcon","descriptionLabel","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 {\n NovaSolidStatusClose as ErrorIcon,\n NovaCompositionCoorpacademyInformationIcon as InfoIcon\n} 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 descriptionView =\n description && theme !== 'coorpmanager' ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const toolTipView =\n description && theme === 'coorpmanager' ? (\n <div className={style.infoIconWrapper}>\n <InfoIcon className={style.infoIcon} />\n <div className={style.descriptionLabel}>{description}</div>\n </div>\n ) : null;\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)}>\n {title}\n {toolTipView}\n </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 {descriptionView}\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,13 @@
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_500 from colors;
14
+ @value cm_grey_700 from colors;
8
15
 
9
16
  .default {
10
17
  display: flex;
@@ -127,4 +134,220 @@
127
134
 
128
135
  .suggestionHighlighted {
129
136
  background-color: #ddd;
137
+ }
138
+
139
+ /******************************* coorpmanager theme ***************************************/
140
+
141
+ .coorpmanager {
142
+ width: 100%;
143
+ display: flex;
144
+ align-items: flex-start;
145
+ flex-direction: column;
146
+ flex-wrap: nowrap;
147
+ position: relative;
148
+ }
149
+
150
+ .coorpmanager label {
151
+ width: 100%;
152
+ height: 100%;
153
+ margin-right: 0;
154
+ display: flex;
155
+ align-items: flex-start;
156
+ flex-direction: column;
157
+ position: relative;
158
+ }
159
+
160
+ .coorpmanager .title {
161
+ flex-grow: 0;
162
+ font-family: Gilroy;
163
+ font-size: 10px;
164
+ font-weight: bold;
165
+ font-stretch: normal;
166
+ font-style: normal;
167
+ line-height: 1.2;
168
+ letter-spacing: normal;
169
+ text-align: left;
170
+ z-index: 1;
171
+ color: cm_grey_400;
172
+ width: auto;
173
+ transition: all 0.25s linear;
174
+ pointer-events: none;
175
+ display: flex;
176
+ flex-direction: row;
177
+ flex-wrap: nowrap;
178
+ position: absolute;
179
+ top: 7px;
180
+ left: 16px;
181
+ }
182
+
183
+ .coorpmanager .title.noValue{
184
+ font-size: 14px;
185
+ font-weight: 500;
186
+ color: cm_grey_700;
187
+ top: 14px;
188
+ }
189
+
190
+ .coorpmanager:focus-within .title.noValue {
191
+ font-size: 10px;
192
+ font-weight: bold;
193
+ color: cm_grey_400;
194
+ top: 7px;
195
+ }
196
+
197
+ .coorpmanager .title.noValue .infoIcon {
198
+ height: 10px;
199
+ width: 10px;
200
+ line-height: 12px;
201
+ color: cm_grey_500;
202
+ }
203
+
204
+ .coorpmanager .inputContainer {
205
+ width: 100%
206
+ }
207
+
208
+ .coorpmanager input {
209
+ width: 100%;
210
+ height: 44px;
211
+ margin: 0px;
212
+ display: flex;
213
+ align-items: flex-start;
214
+ flex-direction: column;
215
+ flex-grow: 0;
216
+ justify-content: center;
217
+ background-color: cm_grey_100;
218
+ box-sizing: border-box;
219
+ border: none;
220
+ border-radius: 7px;
221
+ color: cm_grey_700;
222
+ font-family: Gilroy;
223
+ font-size: 14px;
224
+ font-weight: 500;
225
+ font-stretch: normal;
226
+ font-style: normal;
227
+ line-height: 44px;
228
+ letter-spacing: normal;
229
+ outline: none;
230
+ padding: 19px 30px 5px 16px;
231
+ text-align: left;
232
+ transition: all 0.25s linear;
233
+ }
234
+
235
+ .coorpmanager .suggestionsContainerOpen {
236
+ width: 100%;
237
+ margin-left: 0;
238
+ border-radius: 7px;
239
+ }
240
+
241
+ .coorpmanager:focus-within input::placeholder {
242
+ color: cm_grey_400;
243
+ }
244
+
245
+ .coorpmanager .suggestionsList {
246
+ border-radius: 7px;
247
+ }
248
+
249
+ .coorpmanager .suggestionHighlighted {
250
+ border-radius: 5px;
251
+ }
252
+
253
+ .coorpmanager input::placeholder {
254
+ color: transparent;
255
+ transition: color 0.25s linear;
256
+ }
257
+
258
+ .coorpmanager input:hover {
259
+ background-color: cm_grey_150;
260
+ }
261
+
262
+ .coorpmanager.error .leftIcon {
263
+ background-color: cm_negative_100;
264
+ color: white;
265
+ border-radius: 50%;
266
+ padding: 2px;
267
+ width: 10px;
268
+ height: 10px;
269
+ position: absolute;
270
+ right: 17px;
271
+ top: 14px;
272
+ }
273
+
274
+ .coorpmanager .errorText {
275
+ flex-grow: 0;
276
+ opacity: 0.5;
277
+ font-family: Gilroy;
278
+ font-size: 10px;
279
+ font-weight: 500;
280
+ font-stretch: normal;
281
+ font-style: normal;
282
+ line-height: 1.2;
283
+ letter-spacing: normal;
284
+ text-align: left;
285
+ padding-top: 8px;
286
+ color: cm_negative_100;
287
+ }
288
+
289
+ .coorpmanager .infoIconWrapper {
290
+ overflow: visible;
291
+ height: 12px;
292
+ margin: 0px 4px;
293
+ cursor: pointer;
294
+ pointer-events: fill;
295
+ position: relative;
296
+ }
297
+
298
+ .coorpmanager .infoIcon {
299
+ cursor: pointer;
300
+ width: 8px;
301
+ height: 8px;
302
+ line-height: 16px;
303
+ color: cm_grey_400;
304
+ transition: all 0.25s linear;
305
+ }
306
+
307
+ .coorpmanager .infoIconWrapper:hover .descriptionLabel {
308
+ visibility: visible;
309
+ opacity: 1;
310
+ }
311
+
312
+ .coorpmanager .descriptionLabel {
313
+ margin: 0 1px 18px 0;
314
+ padding: 8px 16px;
315
+ border-radius: 7px;
316
+ background-color: cm_grey_700;
317
+ flex-grow: 0;
318
+ font-family: Gilroy;
319
+ font-size: 14px;
320
+ font-weight: 500;
321
+ font-stretch: normal;
322
+ font-style: normal;
323
+ line-height: 1.43;
324
+ letter-spacing: normal;
325
+ text-align: center;
326
+ color: white;
327
+ padding: 8px 16px;
328
+ max-width: 200px;
329
+ position: absolute;
330
+ left: -24px;
331
+ z-index: 3;
332
+ bottom: 5px;
333
+ width: max-content;
334
+ visibility: hidden;
335
+ opacity: 0s
336
+ }
337
+
338
+ .coorpmanager .descriptionLabel::after{
339
+ content:'';
340
+ border-left: 6px solid transparent;
341
+ border-right: 6px solid transparent;
342
+ border-top: 6px solid cm_grey_700;
343
+ position: absolute;
344
+ bottom: -6px;
345
+ left: 21px;
346
+ }
347
+
348
+ .coorpmanager .title.noValue .descriptionLabel::after{
349
+ left: 22px;
350
+ }
351
+ .coorpmanager:focus-within .title.noValue .descriptionLabel::after{
352
+ left: 21px;
130
353
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAgFC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atom/input-switch/index.js"],"names":[],"mappings":";AAMA,sDAsFC"}
@@ -91,7 +91,9 @@ const InputSwitch = props => {
91
91
  })), /*#__PURE__*/React.createElement("label", {
92
92
  htmlFor: idSwitch,
93
93
  "data-name": "input-switch-label",
94
- tabIndex: 0
94
+ tabIndex: 0,
95
+ "aria-label": ariaLabel,
96
+ title: ariaLabel
95
97
  }))), /*#__PURE__*/React.createElement("div", {
96
98
  className: !details ? style.alignedTextContainer : null
97
99
  }, titlePosition === 'right' ? titleView : null, details ? /*#__PURE__*/React.createElement("div", {
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? (\n <span id={`title-view-${dataName}`} className={style.title}>\n {`${title} `}{' '}\n </span>\n ) : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={ariaLabelledBy}\n />\n <label htmlFor={idSwitch} data-name=\"input-switch-label\" tabIndex={0} />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n 'aria-label': PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["React","useMemo","PropTypes","getClassState","style","InputSwitch","props","title","name","id","value","disabled","onChange","description","modified","theme","titlePosition","details","requiredSelection","dataName","ariaLabelledBy","ariaLabel","idSwitch","isDisabled","handleChange","e","target","checked","titleView","descriptionView","getClass","defaultClass","coorpmanager","modifiedClass","coorpmanagerModified","partielUncheck","default","className","btnSwitchContainer","checkbox","alignedTextContainer","detailsTxt","propTypes","string","bool","func","oneOf"],"sources":["../../../src/atom/input-switch/index.js"],"sourcesContent":["import React, {useMemo} from 'react';\nimport PropTypes from 'prop-types';\nimport {noop, uniqueId} from 'lodash/fp';\nimport getClassState from '../../util/get-class-state';\nimport style from './style.css';\n\nconst InputSwitch = props => {\n const {\n title,\n name,\n id,\n value,\n disabled,\n onChange = noop,\n description,\n modified = false,\n theme = 'default',\n titlePosition = 'left',\n details = '',\n requiredSelection = false,\n 'data-name': dataName,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-label': ariaLabel\n } = props;\n\n const idSwitch = id || uniqueId('input-switch-');\n const isDisabled = disabled ? 'disabled' : '';\n const handleChange = useMemo(() => e => onChange(e.target.checked), [onChange]);\n\n const titleView = title ? (\n <span id={`title-view-${dataName}`} className={style.title}>\n {`${title} `}{' '}\n </span>\n ) : null;\n\n const descriptionView = description ? (\n <div className={style.description}>{description}</div>\n ) : null;\n\n const getClass = () => {\n switch (theme) {\n case 'coorpmanager':\n return {\n defaultClass: style.coorpmanager,\n modifiedClass: style.coorpmanagerModified\n };\n case 'mooc':\n return {\n defaultClass: style.partielUncheck,\n modifiedClass: style.coorpmanagerModified\n };\n default:\n return {defaultClass: style.default, modifiedClass: style.modified};\n }\n };\n const {defaultClass, modifiedClass} = getClass();\n const className = getClassState(defaultClass, modifiedClass, null, modified);\n\n return (\n <div className={className} data-name={`switch-input-${theme}${dataName}`}>\n {titlePosition === 'left' ? titleView : null}\n <div className={requiredSelection ? style.requiredSelection : null}>\n <div className={style.btnSwitchContainer}>\n <input\n {...(ariaLabelledBy ? {'aria-labelledby': ariaLabelledBy} : {})}\n {...(title ? {'aria-labelledby': `title-view-${dataName}`} : {})}\n {...(ariaLabel && !ariaLabelledBy && !title ? {'aria-label': ariaLabel} : {})}\n type=\"checkbox\"\n id={idSwitch}\n name={name}\n onChange={handleChange}\n checked={value}\n disabled={isDisabled}\n className={style.checkbox}\n aria-labelledby={ariaLabelledBy}\n />\n <label\n htmlFor={idSwitch}\n data-name=\"input-switch-label\"\n tabIndex={0}\n aria-label={ariaLabel}\n title={ariaLabel}\n />\n </div>\n </div>\n <div className={!details ? style.alignedTextContainer : null}>\n {titlePosition === 'right' ? titleView : null}\n {details ? <div className={style.detailsTxt}>{details}</div> : null}\n </div>\n {descriptionView}\n </div>\n );\n};\n\nInputSwitch.propTypes = {\n title: PropTypes.string,\n name: PropTypes.string,\n id: PropTypes.string,\n value: PropTypes.bool,\n disabled: PropTypes.bool,\n onChange: PropTypes.func,\n description: PropTypes.string,\n 'aria-labelledby': PropTypes.string,\n 'aria-label': PropTypes.string,\n modified: PropTypes.bool,\n titlePosition: PropTypes.oneOf(['right', 'left']),\n theme: PropTypes.oneOf(['default', 'coorpmanager', 'mooc']),\n details: PropTypes.string,\n 'data-name': PropTypes.string,\n requiredSelection: PropTypes.bool\n};\nexport default InputSwitch;\n"],"mappings":"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"}
@@ -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
- onChange: PropTypes.Requireable<(...args: any[]) => any>;
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>;
@@ -1,4 +1,3 @@
1
- export function useChoices(options: any): ((choice: any) => void)[];
2
1
  export default SelectMultiple;
3
2
  declare function SelectMultiple({ title, options, theme, placeholder, description, hint, multiple, onChange, onError, modified, error, disabled }: {
4
3
  title: any;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/select-multiple/index.js"],"names":[],"mappings":"AAsBO,oEAcN;;AA2BD;;;;;;;;;;;;;;;gBAoLC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/select-multiple/index.js"],"names":[],"mappings":";AA+DA;;;;;;;;;;;;;;;gBA8KC"}
@@ -1,6 +1,5 @@
1
1
  import _isEmpty from "lodash/fp/isEmpty";
2
2
  import _keys from "lodash/fp/keys";
3
- import _set from "lodash/fp/set";
4
3
  import _get from "lodash/fp/get";
5
4
  import _filter from "lodash/fp/filter";
6
5
  import _join from "lodash/fp/join";
@@ -23,24 +22,17 @@ const themeStyle = {
23
22
  cockpit: style.cockpit,
24
23
  sidebar: style.sidebar,
25
24
  coorpmanager: style.coorpmanager
26
- };
27
- export const useChoices = options => {
28
- const choicesRef = {
29
- current: options
30
- };
31
-
32
- const getChoices = () => {
33
- return choicesRef.current;
34
- };
35
-
36
- const setChoices = choice => {
37
- const choices = _set(`[${choice.i}].selected`, !choice.selected, getChoices());
38
-
39
- choicesRef.current = choices.filter(c => c.selected);
40
- };
41
-
42
- return [getChoices, setChoices];
43
- };
25
+ }; // export const useChoices = options => {
26
+ // const choicesRef = {current: options};
27
+ // const getChoices = () => {
28
+ // return choicesRef.current;
29
+ // };
30
+ // const setChoices = choice => {
31
+ // const choices = set(`[${choice.i}].selected`, !choice.selected, getChoices());
32
+ // choicesRef.current = choices.filter(c => c.selected);
33
+ // };
34
+ // return [getChoices, setChoices];
35
+ // };
44
36
 
45
37
  const CMMultipleView = ({
46
38
  multiple,
@@ -83,8 +75,8 @@ const SelectMultiple = ({
83
75
  }, {
84
76
  skin
85
77
  }) => {
86
- const [isOpened, updateIsOpened] = useState(false);
87
- const [getChoices, setChoices] = useChoices(options);
78
+ const [isOpened, updateIsOpened] = useState(false); // const [getChoices, setChoices] = useChoices(options);
79
+
88
80
  const nodeRef = useRef(null);
89
81
 
90
82
  const defaultColor = _get('common.primary', skin);
@@ -103,16 +95,9 @@ const SelectMultiple = ({
103
95
  }
104
96
  }, []);
105
97
  const handleChange = useCallback(choice => {
106
- // if multiple prop is turned on
107
- // we return all selected choices
108
- if (multiple) {
109
- setChoices(choice);
110
- return onChange(getChoices());
111
- }
112
-
113
98
  updateIsOpened(false);
114
99
  return onChange(choice);
115
- }, [multiple, onChange, setChoices, getChoices]);
100
+ }, [onChange]);
116
101
  useEffect(() => {
117
102
  document.addEventListener('click', closeHandle);
118
103
  document.addEventListener('touchstart', closeHandle);