@ntbjs/react-components 2.0.2-rc.1 → 2.0.2-rc.3
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/build/inputs/ActionButton/ActionButton.js +9 -5
- package/build/inputs/ActionButton/ActionButton.js.map +1 -1
- package/build/inputs/ActionButton/ActionButton.styled.js +16 -13
- package/build/inputs/ActionButton/ActionButton.styled.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.js +59 -72
- package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
- package/build/inputs/CompactTextInput/CompactTextInput.styled.js +141 -226
- package/build/inputs/CompactTextInput/CompactTextInput.styled.js.map +1 -1
- package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.js +227 -115
- package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
- package/build/inputs/MultiSelect/MultiSelect.styled.js +72 -175
- package/build/inputs/MultiSelect/MultiSelect.styled.js.map +1 -1
- package/build/inputs/TextArea/TextArea.js +67 -77
- package/build/inputs/TextArea/TextArea.js.map +1 -1
- package/build/inputs/TextArea/TextArea.styled.js +179 -220
- package/build/inputs/TextArea/TextArea.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +20 -26
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +19 -15
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js +18 -16
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.js.map +1 -1
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js +75 -34
- package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryGridCard/AssetGalleryGridCard.styled.js.map +1 -1
- package/build/widgets/Instructions/Instructions.js +0 -9
- package/build/widgets/Instructions/Instructions.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,59 +1,7 @@
|
|
|
1
|
-
import styled, {
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
2
|
import { applyDefaultTheme } from '../../utils/defaultTheme.js';
|
|
3
3
|
|
|
4
|
-
const
|
|
5
|
-
from {
|
|
6
|
-
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
|
|
7
|
-
}
|
|
8
|
-
to {
|
|
9
|
-
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
|
|
10
|
-
}
|
|
11
|
-
`;
|
|
12
|
-
const fadeOut = keyframes`
|
|
13
|
-
from {
|
|
14
|
-
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
|
|
15
|
-
}
|
|
16
|
-
to {
|
|
17
|
-
background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
|
|
18
|
-
}
|
|
19
|
-
`;
|
|
20
|
-
const fadeInCheck = keyframes`
|
|
21
|
-
from {
|
|
22
|
-
opacity: 0
|
|
23
|
-
}
|
|
24
|
-
to {
|
|
25
|
-
opacity: 1
|
|
26
|
-
}
|
|
27
|
-
`;
|
|
28
|
-
const fadeOutCheck = keyframes`
|
|
29
|
-
from {
|
|
30
|
-
opacity: 1
|
|
31
|
-
}
|
|
32
|
-
to {
|
|
33
|
-
opacity: 0
|
|
34
|
-
}
|
|
35
|
-
`;
|
|
36
|
-
const linkColor = css`
|
|
37
|
-
${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}
|
|
38
|
-
${props => !props.disabled && css`
|
|
39
|
-
&:hover {
|
|
40
|
-
text-decoration: underline;
|
|
41
|
-
}
|
|
42
|
-
`}
|
|
43
|
-
`;
|
|
44
|
-
const commonAnchorTagStyle = css`
|
|
45
|
-
a,
|
|
46
|
-
&& {
|
|
47
|
-
font-size: 0.875rem;
|
|
48
|
-
text-decoration: none;
|
|
49
|
-
}
|
|
50
|
-
`;
|
|
51
|
-
const readOnlyBackground = css`
|
|
52
|
-
${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
|
|
53
|
-
`;
|
|
54
|
-
const shouldForwardProp = prop => {
|
|
55
|
-
return prop !== 'theme' && !prop.startsWith('$');
|
|
56
|
-
};
|
|
4
|
+
const shouldForwardProp = prop => !prop.startsWith('$');
|
|
57
5
|
const CompactTextInput = styled.div.withConfig({
|
|
58
6
|
shouldForwardProp
|
|
59
7
|
}).attrs(applyDefaultTheme)`
|
|
@@ -73,7 +21,7 @@ const Label = styled.label.withConfig({
|
|
|
73
21
|
height: 19px;
|
|
74
22
|
display: flex;
|
|
75
23
|
align-items: center;
|
|
76
|
-
${props => props
|
|
24
|
+
${props => props.$disabled && css`
|
|
77
25
|
opacity: 0.5;
|
|
78
26
|
cursor: not-allowed;
|
|
79
27
|
`}
|
|
@@ -85,79 +33,69 @@ const InputContainer = styled.div.withConfig({
|
|
|
85
33
|
height: 19px;
|
|
86
34
|
flex-basis: ${props => props.$hasLabel ? '66.66%' : '100%'};
|
|
87
35
|
`;
|
|
88
|
-
const
|
|
36
|
+
const SuccessContainerBase = styled.div.withConfig({
|
|
89
37
|
shouldForwardProp
|
|
90
38
|
}).attrs(applyDefaultTheme)`
|
|
91
|
-
opacity: 1;
|
|
92
|
-
pointer-events: none;
|
|
93
39
|
display: flex;
|
|
94
|
-
|
|
95
|
-
animation: ${props => props.fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
|
|
40
|
+
align-items: center;
|
|
96
41
|
transition: opacity 0.5s ease-in-out;
|
|
97
|
-
|
|
98
|
-
${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
|
|
99
|
-
> svg {
|
|
100
|
-
width: 13px;
|
|
101
|
-
}
|
|
102
|
-
`;
|
|
103
|
-
const InputSuccessContainer = styled.div.withConfig({
|
|
104
|
-
shouldForwardProp
|
|
105
|
-
}).attrs(applyDefaultTheme)`
|
|
106
|
-
opacity: 1;
|
|
42
|
+
opacity: ${props => props.$type === 'loading' || props.$type === 'success' ? 1 : 0};
|
|
107
43
|
pointer-events: none;
|
|
108
|
-
|
|
109
|
-
justify-content: flex-end;
|
|
110
|
-
opacity: ${props => props.fadeIn ? 0 : 1};
|
|
111
|
-
animation: ${props => props.fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
|
|
112
|
-
transition: opacity 0.5s ease-in-out;
|
|
113
|
-
position: relative;
|
|
114
|
-
margin-top: -20px;
|
|
115
|
-
margin-right: 8px;
|
|
116
|
-
${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
|
|
44
|
+
${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};
|
|
117
45
|
> svg {
|
|
118
46
|
width: 13px;
|
|
119
47
|
}
|
|
120
48
|
`;
|
|
49
|
+
const SuccessContainer = styled(SuccessContainerBase)`
|
|
50
|
+
margin-right: 5px;
|
|
51
|
+
`;
|
|
52
|
+
const InputSuccessContainer = styled(SuccessContainerBase)`
|
|
53
|
+
position: absolute;
|
|
54
|
+
top: 0;
|
|
55
|
+
right: 8px;
|
|
56
|
+
height: 100%;
|
|
57
|
+
`;
|
|
121
58
|
const InputIconContainer = styled.div.withConfig({
|
|
122
59
|
shouldForwardProp
|
|
123
60
|
}).attrs(applyDefaultTheme)`
|
|
124
61
|
opacity: 0;
|
|
125
62
|
pointer-events: none;
|
|
126
|
-
border-top-right-radius: 3px;
|
|
127
|
-
border-bottom-right-radius: 3px;
|
|
128
|
-
padding: 5px 10px 0 0;
|
|
129
|
-
${props => props.theme.themeProp('background', css`
|
|
130
|
-
linear-gradient(-90deg,
|
|
131
|
-
${props => props.type === 'error' ? '#901d1d' : props.type === 'warning' ? '#816600' : props.theme.getColor('gray-700')} 55%,
|
|
132
|
-
transparent)
|
|
133
|
-
`, css`
|
|
134
|
-
linear-gradient(-90deg,
|
|
135
|
-
${props => props.type === 'error' ? '#f7d5d0' : props.type === 'warning' ? '#fffebf' : props.theme.getColor('gray-100')} 55%,
|
|
136
|
-
transparent)
|
|
137
|
-
`)};
|
|
138
|
-
|
|
139
63
|
display: flex;
|
|
140
64
|
align-items: center;
|
|
141
65
|
position: absolute;
|
|
142
66
|
right: 0;
|
|
143
67
|
top: 0;
|
|
144
68
|
bottom: 0;
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
${props =>
|
|
150
|
-
|
|
69
|
+
padding: 5px 10px 0 0;
|
|
70
|
+
border-top-right-radius: 3px;
|
|
71
|
+
border-bottom-right-radius: 3px;
|
|
72
|
+
|
|
73
|
+
${props => {
|
|
74
|
+
if (props.$type === 'warning') {
|
|
75
|
+
return css`
|
|
76
|
+
color: #c3af43;
|
|
77
|
+
${props.theme.themeProp('background', 'linear-gradient(-90deg, #816600 55%, transparent)', 'linear-gradient(-90deg, #fffebf 55%, transparent)')};
|
|
78
|
+
`;
|
|
79
|
+
}
|
|
80
|
+
if (props.$type === 'error') {
|
|
81
|
+
return css`
|
|
82
|
+
color: #cb968f;
|
|
83
|
+
${props.theme.themeProp('background', 'linear-gradient(-90deg, #901d1d 55%, transparent)', 'linear-gradient(-90deg, #f7d5d0 55%, transparent)')};
|
|
84
|
+
`;
|
|
85
|
+
}
|
|
86
|
+
return css`
|
|
87
|
+
color: ${props.theme.getColor('gray-400')};
|
|
88
|
+
${props.theme.themeProp('background', 'linear-gradient(-90deg, ' + props.theme.getColor('gray-700') + ' 55%, transparent)', 'linear-gradient(-90deg, ' + props.theme.getColor('gray-100') + ' 55%, transparent)')};
|
|
89
|
+
`;
|
|
90
|
+
}}
|
|
91
|
+
|
|
151
92
|
> svg {
|
|
152
93
|
width: 12px;
|
|
153
94
|
}
|
|
154
95
|
`;
|
|
155
96
|
const Input = styled.input.withConfig({
|
|
156
97
|
shouldForwardProp
|
|
157
|
-
}).attrs(
|
|
158
|
-
...applyDefaultTheme(props),
|
|
159
|
-
type: props.inputtype || 'text'
|
|
160
|
-
}))`
|
|
98
|
+
}).attrs(applyDefaultTheme)`
|
|
161
99
|
box-sizing: border-box;
|
|
162
100
|
height: 22px;
|
|
163
101
|
width: 100%;
|
|
@@ -168,147 +106,111 @@ const Input = styled.input.withConfig({
|
|
|
168
106
|
padding: 1px 10px;
|
|
169
107
|
border-radius: 3px;
|
|
170
108
|
border: 1px solid transparent;
|
|
109
|
+
${props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))};
|
|
110
|
+
${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))};
|
|
171
111
|
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
return css`
|
|
112
|
+
/* Type-specific backgrounds - these override the default */
|
|
113
|
+
${props => props.$type === 'error' && css`
|
|
175
114
|
${props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')} !important;
|
|
176
|
-
`;
|
|
177
|
-
} else if (props.type === 'warning') {
|
|
178
|
-
return css`
|
|
179
|
-
${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;
|
|
180
|
-
`;
|
|
181
|
-
} else {
|
|
182
|
-
return props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'));
|
|
183
|
-
}
|
|
184
|
-
}}
|
|
185
|
-
|
|
186
|
-
${props => props.readOnly && css`
|
|
187
|
-
cursor: default;
|
|
188
115
|
`}
|
|
189
|
-
|
|
190
|
-
${props => props
|
|
191
|
-
|
|
116
|
+
|
|
117
|
+
${props => props.$type === 'warning' && css`
|
|
118
|
+
${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;
|
|
192
119
|
`}
|
|
193
120
|
|
|
194
|
-
|
|
195
|
-
|
|
121
|
+
/* Edit mode styling */
|
|
122
|
+
${props => props.$edit && css`
|
|
123
|
+
&:not(:hover):not(:focus) {
|
|
124
|
+
${props.$type === 'error' ? props.theme.themeProp('background', '#7f1b1b', '#FEE2E2') : props.$type === 'warning' ? props.theme.themeProp('background', '#634E01', '#FFFDE8') : props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)')};
|
|
125
|
+
${props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};
|
|
126
|
+
}
|
|
196
127
|
`}
|
|
197
128
|
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
${props => props.haslink && css`
|
|
206
|
-
&&:not(:focus),
|
|
207
|
-
&&:read-only {
|
|
208
|
-
${linkColor}
|
|
209
|
-
}
|
|
210
|
-
&&:read-only {
|
|
211
|
-
cursor: default;
|
|
212
|
-
}
|
|
213
|
-
`};
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
&&:not(:hover):not(:focus) {
|
|
219
|
-
|
|
129
|
+
/* Hover state */
|
|
130
|
+
&:hover:not(:focus):not([readonly]):not([disabled]) {
|
|
220
131
|
${props => {
|
|
221
|
-
if (props.$
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
} else {
|
|
227
|
-
return props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)');
|
|
228
|
-
}
|
|
132
|
+
if (props.$type === 'error') {
|
|
133
|
+
return props.theme.themeProp('background', '#901d1d', '#F7D5D0');
|
|
134
|
+
}
|
|
135
|
+
if (props.$type === 'warning') {
|
|
136
|
+
return props.theme.themeProp('background', '#806403', '#FFFEBF');
|
|
229
137
|
}
|
|
138
|
+
return props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'));
|
|
230
139
|
}}
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
${props => props.$edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};
|
|
235
140
|
|
|
236
|
-
${props => props
|
|
237
|
-
|
|
238
|
-
&&:read-only {
|
|
239
|
-
cursor: default;
|
|
240
|
-
${linkColor}
|
|
241
|
-
}
|
|
141
|
+
${props => props.$edit && css`
|
|
142
|
+
${props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))};
|
|
242
143
|
`}
|
|
144
|
+
|
|
145
|
+
& + ${InputIconContainer} {
|
|
146
|
+
opacity: 1;
|
|
147
|
+
}
|
|
243
148
|
}
|
|
244
149
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
${props =>
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
${props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0')};
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
${props => props.$haslink && css`
|
|
261
|
-
cursor: pointer;
|
|
262
|
-
&&:read-only {
|
|
263
|
-
background: none !important;
|
|
264
|
-
cursor: default;
|
|
265
|
-
}
|
|
266
|
-
`}
|
|
267
|
-
& + ${InputIconContainer} {
|
|
268
|
-
opacity: 1;
|
|
269
|
-
|
|
270
|
-
}
|
|
150
|
+
/* Focus state */
|
|
151
|
+
&:focus:not([readonly]):not([disabled]) {
|
|
152
|
+
outline: none;
|
|
153
|
+
|
|
154
|
+
${props => {
|
|
155
|
+
if (props.$type === 'error') {
|
|
156
|
+
return css`
|
|
157
|
+
border-color: #d83018;
|
|
158
|
+
background: white;
|
|
159
|
+
color: black;
|
|
160
|
+
`;
|
|
271
161
|
}
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
162
|
+
if (props.$type === 'warning') {
|
|
163
|
+
return css`
|
|
164
|
+
border-color: #f4e21e;
|
|
165
|
+
background: white;
|
|
166
|
+
color: black;
|
|
167
|
+
`;
|
|
168
|
+
}
|
|
169
|
+
return css`
|
|
170
|
+
border-color: ${props.theme.getColor('gray-600')};
|
|
171
|
+
${props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))};
|
|
172
|
+
`;
|
|
173
|
+
}}
|
|
282
174
|
}
|
|
283
175
|
|
|
284
|
-
|
|
285
|
-
|
|
176
|
+
/* Read-only state */
|
|
177
|
+
${props => props.readOnly && css`
|
|
178
|
+
cursor: default;
|
|
179
|
+
${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))} !important;
|
|
286
180
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
${props => props.type === 'error' && !props.readOnly && props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))};
|
|
181
|
+
&:hover {
|
|
182
|
+
${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))} !important;
|
|
183
|
+
}
|
|
292
184
|
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
185
|
+
&:focus {
|
|
186
|
+
outline: none;
|
|
187
|
+
${props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))} !important;
|
|
188
|
+
}
|
|
189
|
+
`}
|
|
297
190
|
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
191
|
+
/* Disabled state */
|
|
192
|
+
${props => props.disabled && css`
|
|
193
|
+
opacity: 0.5;
|
|
194
|
+
cursor: not-allowed;
|
|
195
|
+
pointer-events: none;
|
|
196
|
+
background: none !important;
|
|
197
|
+
`}
|
|
303
198
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
199
|
+
/* Link styling */
|
|
200
|
+
${props => props.$haslink && css`
|
|
201
|
+
cursor: pointer;
|
|
202
|
+
${props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))};
|
|
203
|
+
&:hover:not([readonly]):not([disabled]) {
|
|
204
|
+
text-decoration: underline;
|
|
205
|
+
}
|
|
206
|
+
&[readonly],
|
|
207
|
+
&[disabled] {
|
|
208
|
+
cursor: default;
|
|
209
|
+
text-decoration: none;
|
|
210
|
+
}
|
|
211
|
+
`}
|
|
310
212
|
|
|
311
|
-
|
|
213
|
+
&::placeholder {
|
|
312
214
|
color: inherit;
|
|
313
215
|
opacity: 0.6;
|
|
314
216
|
}
|
|
@@ -316,18 +218,31 @@ ${props => {
|
|
|
316
218
|
${props => props.$bold && css`
|
|
317
219
|
font-size: 1rem;
|
|
318
220
|
font-weight: 500;
|
|
319
|
-
line-height: 1.0625;
|
|
320
|
-
padding-top: 3px;
|
|
321
|
-
padding-bottom: 2px;
|
|
322
221
|
`}
|
|
323
222
|
`;
|
|
223
|
+
const linkColor = css`
|
|
224
|
+
${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}
|
|
225
|
+
${props => !props.$disabled && css`
|
|
226
|
+
&:hover {
|
|
227
|
+
text-decoration: underline;
|
|
228
|
+
}
|
|
229
|
+
`}
|
|
230
|
+
`;
|
|
231
|
+
const commonAnchorTagStyle = css`
|
|
232
|
+
a,
|
|
233
|
+
&& {
|
|
234
|
+
font-size: 0.875rem;
|
|
235
|
+
text-decoration: none;
|
|
236
|
+
}
|
|
237
|
+
`;
|
|
238
|
+
const readOnlyBackground = css`
|
|
239
|
+
${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
|
|
240
|
+
`;
|
|
324
241
|
const LinkPopoverContainer = styled.div.withConfig({
|
|
325
242
|
shouldForwardProp
|
|
326
243
|
}).attrs(applyDefaultTheme)`
|
|
327
244
|
${commonAnchorTagStyle}
|
|
328
|
-
|
|
329
245
|
padding: 5px 8px;
|
|
330
|
-
|
|
331
246
|
svg {
|
|
332
247
|
width: 18px;
|
|
333
248
|
margin-right: 8px;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CompactTextInput.styled.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.styled.js"],"sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst fadeIn = keyframes`\n from {\n background-color: ${props =>\n props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};\n }\n to {\n background-color: ${props =>\n props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};\n }\n`;\n\nconst fadeOut = keyframes`\n from {\n background-color: ${props =>\n props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};\n }\n to {\n background-color: ${props =>\n props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};\n }\n`;\n\nconst fadeInCheck = keyframes`\n from {\n opacity: 0\n }\n to {\n opacity: 1\n }\n`;\n\nconst fadeOutCheck = keyframes`\n from {\n opacity: 1\n }\n to {\n opacity: 0\n }\n`;\n\nconst linkColor = css`\n ${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}\n ${props =>\n !props.disabled &&\n css`\n &:hover {\n text-decoration: underline;\n }\n `}\n`;\n\nconst commonAnchorTagStyle = css`\n a,\n && {\n font-size: 0.875rem;\n text-decoration: none;\n }\n`;\n\nconst readOnlyBackground = css`\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n`;\n\nconst shouldForwardProp = prop => {\n return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const CompactTextInput = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ${props => props.theme.primaryFontFamily};\n`;\n\nexport const Label = styled.label\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('white'),\n props.theme.getColor('gray-700')\n )};\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n justify-content: space-between;\n height: 19px;\n display: flex;\n align-items: center;\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n `}\n`;\n\nexport const InputContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n position: relative;\n height: 19px;\n flex-basis: ${props => (props.$hasLabel ? '66.66%' : '100%')};\n`;\n\nexport const SuccessContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n opacity: 1;\n pointer-events: none;\n display: flex;\n opacity: ${props => (props.fadeIn ? 0 : 1)};\n animation: ${props => (props.fadeIn ? fadeOutCheck : fadeInCheck)} 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n margin-right: 5px;\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-500')\n )}\n > svg {\n width: 13px;\n }\n`;\n\nexport const InputSuccessContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n opacity: 1;\n pointer-events: none;\n display: flex;\n justify-content: flex-end;\n opacity: ${props => (props.fadeIn ? 0 : 1)};\n animation: ${props => (props.fadeIn ? fadeOutCheck : fadeInCheck)} 0.5s ease-in-out;\n transition: opacity 0.5s ease-in-out;\n position: relative;\n margin-top: -20px;\n margin-right: 8px;\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-300'),\n props.theme.getColor('gray-500')\n )}\n > svg {\n width: 13px;\n }\n`;\n\nexport const InputIconContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n opacity: 0;\n pointer-events: none;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n padding: 5px 10px 0 0;\n ${props =>\n props.theme.themeProp(\n 'background',\n css`\n linear-gradient(-90deg,\n ${props =>\n props.type === 'error'\n ? '#901d1d'\n : props.type === 'warning'\n ? '#816600'\n : props.theme.getColor('gray-700')} 55%,\n transparent)\n `,\n css`\n linear-gradient(-90deg,\n ${props =>\n props.type === 'error'\n ? '#f7d5d0'\n : props.type === 'warning'\n ? '#fffebf'\n : props.theme.getColor('gray-100')} 55%,\n transparent)\n `\n )};\n\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n color: ${props => props.theme.getColor('gray-400')};\n\n ${props => props.type === 'warning' && props.theme.themeProp('color', '#C3AF43', '#C3AF43')}\n\n ${props => props.type === 'error' && props.theme.themeProp('color', '#CB968F', '#CB968F')}\n\n > svg {\n width: 12px;\n }\n`;\n\nexport const Input = styled.input\n .withConfig({\n shouldForwardProp\n })\n .attrs(props => ({\n ...applyDefaultTheme(props),\n type: props.inputtype || 'text'\n }))`\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n padding: 1px 10px;\n border-radius: 3px;\n border: 1px solid transparent;\n\n${props => {\n if (props.type === 'error') {\n return css`\n ${props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')} !important;\n `;\n } else if (props.type === 'warning') {\n return css`\n ${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;\n `;\n } else {\n return props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n );\n }\n}}\n\n ${props =>\n props.readOnly &&\n css`\n cursor: default;\n `}\n\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n `}\n\n ${props =>\n props.type === 'success' &&\n css`\n animation: ${props => (props.type === 'success' ? fadeIn : fadeOut)} 0.5s ease-in-out;\n `}\n\n\n ${props =>\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-200'),\n props.theme.getColor('gray-700')\n )}\n\n\n \n \n\n ${props =>\n props.haslink &&\n css`\n &&:not(:focus),\n &&:read-only {\n ${linkColor}\n }\n &&:read-only {\n cursor: default;\n }\n `};\n\n \n\n\n &&:not(:hover):not(:focus) {\n\n ${props => {\n if (props.$edit) {\n if (props.type === 'error') {\n return props.theme.themeProp('background', '#7f1b1b', '#FEE2E2');\n } else if (props.type === 'warning') {\n return props.theme.themeProp('background', '#634E01', '#FFFDE8');\n } else {\n return props.theme.themeProp(\n 'background',\n 'rgba(39,39,42, 0.7)',\n 'rgba(244,244,245, 0.3)'\n );\n }\n }\n }}\n \n \n\n ${props =>\n props.$edit &&\n props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};\n \n ${props =>\n props.haslink &&\n css`\n &&:not(:focus),\n &&:read-only {\n cursor: default;\n ${linkColor}\n }\n `}\n }\n\n &&:hover:not(:focus) {\n\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )}\n\n ${props =>\n props.readOnly &&\n css`\n ${readOnlyBackground}\n `};\n\n ${props =>\n props.$edit &&\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )};\n\n ${props =>\n props.type === 'warning' && props.theme.themeProp('background', '#806403', '#FFFEBF')};\n\n ${props => props.type === 'error' && props.theme.themeProp('background', '#901d1d', '#F7D5D0')};\n\n\n ${props =>\n props.$haslink &&\n css`\n cursor: pointer;\n &&:read-only {\n background: none !important;\n cursor: default;\n }\n `}\n & + ${InputIconContainer} {\n opacity: 1;\n \n }\n }\n\n ${props =>\n props.disabled &&\n css`\n background: none !important;\n cursor: not-allowed;\n `}\n ${props =>\n props.disabled &&\n props.$haslink &&\n css`\n background: none !important;\n cursor: not-allowed !important;\n `}\n\n }\n\n &&:focus {\n ${props =>\n !props.readOnly &&\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )};\n\n ${props =>\n props.readOnly &&\n css`\n ${readOnlyBackground}\n `};\n \n ${props =>\n props.type === 'error' &&\n !props.readOnly &&\n props.theme.themeProp(\n 'color',\n props.theme.getColor('gray-200'),\n props.theme.getColor('gray-700')\n )};\n\n ${props =>\n !props.readOnly &&\n css`\n border-color: ${props => props.theme.getColor('gray-600')};\n `};\n outline: none;\n\n ${props =>\n props.type === 'warning' &&\n css`\n ${props => props.theme.themeProp('border-color', '#F4E21E', '#F4E21E')}\n ${props.theme.themeProp('background', 'white', 'white')}\n ${props.theme.themeProp('color', 'black', 'black')}\n `};\n\n ${props =>\n props.type === 'error' &&\n css`\n ${props => props.theme.themeProp('border-color', '#D83018', '#D83018')}\n ${props.theme.themeProp('background', 'white', 'white')}\n ${props.theme.themeProp('color', 'black', 'black')}\n `};\n }\n\n &&::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ${props =>\n props.$bold &&\n css`\n font-size: 1rem;\n font-weight: 500;\n line-height: 1.0625;\n padding-top: 3px;\n padding-bottom: 2px;\n `}\n`;\n\nexport const LinkPopoverContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${commonAnchorTagStyle}\n\n padding: 5px 8px;\n\n svg {\n width: 18px;\n margin-right: 8px;\n }\n`;\n\nexport const StyledLink = styled.a\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${commonAnchorTagStyle}\n ${linkColor}\n`;\n\nexport const ReadOnlyLinkContainer = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n ${readOnlyBackground};\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0 10px 1px;\n`;\n"],"names":["fadeIn","keyframes","props","theme","themeProp","fadeOut","fadeInCheck","fadeOutCheck","linkColor","css","getColor","disabled","commonAnchorTagStyle","readOnlyBackground","shouldForwardProp","prop","startsWith","CompactTextInput","styled","div","withConfig","attrs","applyDefaultTheme","primaryFontFamily","Label","label","InputContainer","$hasLabel","SuccessContainer","InputSuccessContainer","InputIconContainer","type","Input","input","inputtype","readOnly","haslink","$edit","$haslink","$bold","LinkPopoverContainer","StyledLink","a","ReadOnlyLinkContainer"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CompactTextInput.styled.js","sources":["../../../src/components/inputs/CompactTextInput/CompactTextInput.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => !prop.startsWith('$');\n\nexport const CompactTextInput = styled.div\n .withConfig({ shouldForwardProp })\n .attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n height: 24px;\n font-family: ${props => props.theme.primaryFontFamily};\n`;\n\nexport const Label = styled.label.withConfig({ shouldForwardProp }).attrs(applyDefaultTheme)`\n ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};\n flex-basis: 33.33%;\n font-size: 0.875rem;\n line-height: 1rem;\n justify-content: space-between;\n height: 19px;\n display: flex;\n align-items: center;\n ${props =>\n props.$disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n `}\n`;\n\nexport const InputContainer = styled.div.withConfig({ shouldForwardProp }).attrs(applyDefaultTheme)`\n position: relative;\n height: 19px;\n flex-basis: ${props => (props.$hasLabel ? '66.66%' : '100%')};\n`;\n\nconst SuccessContainerBase = styled.div.withConfig({ shouldForwardProp }).attrs(applyDefaultTheme)`\n display: flex;\n align-items: center;\n transition: opacity 0.5s ease-in-out;\n opacity: ${props => (props.$type === 'loading' || props.$type === 'success' ? 1 : 0)};\n pointer-events: none;\n ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))};\n > svg {\n width: 13px;\n }\n`;\n\nexport const SuccessContainer = styled(SuccessContainerBase)`\n margin-right: 5px;\n`;\n\nexport const InputSuccessContainer = styled(SuccessContainerBase)`\n position: absolute;\n top: 0;\n right: 8px;\n height: 100%;\n`;\n\nexport const InputIconContainer = styled.div\n .withConfig({ shouldForwardProp })\n .attrs(applyDefaultTheme)`\n opacity: 0;\n pointer-events: none;\n display: flex;\n align-items: center;\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n padding: 5px 10px 0 0;\n border-top-right-radius: 3px;\n border-bottom-right-radius: 3px;\n \n ${props => {\n if (props.$type === 'warning') {\n return css`\n color: #c3af43;\n ${props.theme.themeProp(\n 'background',\n 'linear-gradient(-90deg, #816600 55%, transparent)',\n 'linear-gradient(-90deg, #fffebf 55%, transparent)'\n )};\n `;\n }\n if (props.$type === 'error') {\n return css`\n color: #cb968f;\n ${props.theme.themeProp(\n 'background',\n 'linear-gradient(-90deg, #901d1d 55%, transparent)',\n 'linear-gradient(-90deg, #f7d5d0 55%, transparent)'\n )};\n `;\n }\n return css`\n color: ${props.theme.getColor('gray-400')};\n ${props.theme.themeProp(\n 'background',\n 'linear-gradient(-90deg, ' + props.theme.getColor('gray-700') + ' 55%, transparent)',\n 'linear-gradient(-90deg, ' + props.theme.getColor('gray-100') + ' 55%, transparent)'\n )};\n `;\n }}\n \n > svg {\n width: 12px;\n }\n`;\n\nexport const Input = styled.input.withConfig({ shouldForwardProp }).attrs(applyDefaultTheme)`\n box-sizing: border-box;\n height: 22px;\n width: 100%;\n display: block;\n font-size: 0.875rem;\n line-height: 1rem;\n font-family: inherit;\n padding: 1px 10px;\n border-radius: 3px;\n border: 1px solid transparent;\n ${props => props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700'))};\n ${props => props.theme.themeProp('background', props.theme.getColor('gray-900'), props.theme.getColor('white'))};\n\n /* Type-specific backgrounds - these override the default */\n ${props =>\n props.$type === 'error' &&\n css`\n ${props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')} !important;\n `}\n \n ${props =>\n props.$type === 'warning' &&\n css`\n ${props.theme.themeProp('background', '#634E01', '#FFFDE8')} !important;\n `}\n\n /* Edit mode styling */\n ${props =>\n props.$edit &&\n css`\n &:not(:hover):not(:focus) {\n ${props.$type === 'error'\n ? props.theme.themeProp('background', '#7f1b1b', '#FEE2E2')\n : props.$type === 'warning'\n ? props.theme.themeProp('background', '#634E01', '#FFFDE8')\n : props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)')};\n ${props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};\n }\n `}\n\n /* Hover state */\n &:hover:not(:focus):not([readonly]):not([disabled]) {\n ${props => {\n if (props.$type === 'error') {\n return props.theme.themeProp('background', '#901d1d', '#F7D5D0');\n }\n if (props.$type === 'warning') {\n return props.theme.themeProp('background', '#806403', '#FFFEBF');\n }\n return props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n );\n }}\n \n ${props =>\n props.$edit &&\n css`\n ${props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )};\n `}\n \n & + ${InputIconContainer} {\n opacity: 1;\n }\n }\n\n /* Focus state */\n &:focus:not([readonly]):not([disabled]) {\n outline: none;\n \n ${props => {\n if (props.$type === 'error') {\n return css`\n border-color: #d83018;\n background: white;\n color: black;\n `;\n }\n if (props.$type === 'warning') {\n return css`\n border-color: #f4e21e;\n background: white;\n color: black;\n `;\n }\n return css`\n border-color: ${props.theme.getColor('gray-600')};\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-700'),\n props.theme.getColor('gray-100')\n )};\n `;\n }}\n }\n\n /* Read-only state */\n ${props =>\n props.readOnly &&\n css`\n cursor: default;\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )} !important;\n\n &:hover {\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )} !important;\n }\n\n &:focus {\n outline: none;\n ${props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )} !important;\n }\n `}\n\n /* Disabled state */\n ${props =>\n props.disabled &&\n css`\n opacity: 0.5;\n cursor: not-allowed;\n pointer-events: none;\n background: none !important;\n `}\n\n /* Link styling */\n ${props =>\n props.$haslink &&\n css`\n cursor: pointer;\n ${props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))};\n &:hover:not([readonly]):not([disabled]) {\n text-decoration: underline;\n }\n &[readonly],\n &[disabled] {\n cursor: default;\n text-decoration: none;\n }\n `}\n\n &::placeholder {\n color: inherit;\n opacity: 0.6;\n }\n\n ${props =>\n props.$bold &&\n css`\n font-size: 1rem;\n font-weight: 500;\n `}\n`;\n\nconst linkColor = css`\n ${props => props.theme.themeProp('color', '#ACCDC3', props.theme.getColor('emerald-500'))}\n ${props =>\n !props.$disabled &&\n css`\n &:hover {\n text-decoration: underline;\n }\n `}\n`;\n\nconst commonAnchorTagStyle = css`\n a,\n && {\n font-size: 0.875rem;\n text-decoration: none;\n }\n`;\n\nconst readOnlyBackground = css`\n ${props =>\n props.theme.themeProp(\n 'background',\n props.theme.getColor('gray-900'),\n props.theme.getColor('white')\n )}\n`;\n\nexport const LinkPopoverContainer = styled.div\n .withConfig({ shouldForwardProp })\n .attrs(applyDefaultTheme)`\n ${commonAnchorTagStyle}\n padding: 5px 8px;\n svg {\n width: 18px;\n margin-right: 8px;\n }\n`;\n\nexport const StyledLink = styled.a.withConfig({ shouldForwardProp }).attrs(applyDefaultTheme)`\n ${commonAnchorTagStyle}\n ${linkColor}\n`;\n\nexport const ReadOnlyLinkContainer = styled.div\n .withConfig({ shouldForwardProp })\n .attrs(applyDefaultTheme)`\n ${readOnlyBackground};\n border: 1px solid transparent;\n border-radius: 3px;\n padding: 0 10px 1px;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","CompactTextInput","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","Label","label","themeProp","getColor","$disabled","css","InputContainer","$hasLabel","SuccessContainerBase","$type","SuccessContainer","InputSuccessContainer","InputIconContainer","Input","input","$edit","readOnly","disabled","$haslink","$bold","linkColor","commonAnchorTagStyle","readOnlyBackground","LinkPopoverContainer","StyledLink","a","ReadOnlyLinkContainer"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiLevelCheckboxSelect.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './MultiLevelCheckboxSelect.styled';\nimport { Popover } from '../../data';\nimport MultiLevelCheckbox from '../MultiLevelCheckbox';\nimport TextInput from '../TextInput';\nimport { SectionSeparator } from '../../layout';\nimport { ReactComponent as SearchIcon } from '../../../icons/search.svg';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport { findChildValues, NodeType } from '../MultiLevelCheckbox';\nimport { useEventListener } from '../../../hooks/useEventListner';\nimport { useOnClickOutside } from '../../../hooks/useOnClickOutside';\nimport useUpdateEffect from '@restart/hooks/useUpdateEffect';\nimport { isFunction } from 'lodash';\n\n/**\n * MultiLevelCheckboxSelect allow the user to select one or more items from a nested set into a MultiSelect-styled input.\n *\n * This component is controlled which means that the consumer will have to keep track of what options are selected. The selected options should be provided to the `checked`-prop. On any selection or deselection onChange will be called with an updated `checked`-list.\n *\n * ### Import\n *\n * ```js\n * import { MultiLevelCheckboxSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiLevelCheckboxSelect from '@ntbjs/react-components/inputs/MultiLevelCheckboxSelect'\n * ```\n */\nconst MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSelect(\n {\n label,\n options,\n checked: checkedProp,\n placeholder,\n noResultsText,\n onChange,\n onParentChange,\n ...props\n },\n forwardedRef\n) {\n const inputRef = useRef(null);\n const popoverContentRef = useRef(null);\n const searchInputRef = useRef(null);\n // const [internalChecked, setInternalChecked] = useState([]);\n const [searchString, setSearchString] = useState('');\n const [open, setOpen] = useState(false);\n\n const handleClickInside = useCallback(() => {\n setOpen(true);\n searchInputRef.current?.focus();\n }, []);\n\n const handleKeyDown = useCallback(\n event => {\n if (!open) return;\n if (event.key === 'Escape') {\n setOpen(false);\n }\n },\n [open]\n );\n\n useEventListener('focus', handleClickInside, inputRef);\n useEventListener('mousedown', handleClickInside, inputRef);\n useEventListener('keydown', handleKeyDown);\n\n const handleClickOutside = event => {\n if (\n popoverContentRef?.current === event.target ||\n popoverContentRef?.current?.contains(event.target)\n ) {\n return;\n }\n setOpen(false);\n };\n\n useOnClickOutside(inputRef, handleClickOutside);\n\n const checked = useMemo(() => {\n const checkedParents = [];\n\n function iterate(nodes) {\n nodes.forEach(node => {\n if (checkedProp.includes(node.value)) {\n return checkedParents.push(node.value);\n }\n\n if (node.children) {\n iterate(node.children);\n }\n });\n }\n\n iterate(options);\n return checkedParents.sort();\n }, [JSON.stringify(options), JSON.stringify(checkedProp)]);\n\n const getLabelByValue = useCallback(\n (targetValue, nodes = options) => {\n for (const node of nodes) {\n if (node.value === targetValue) {\n return node.label;\n }\n\n if (node.children) {\n const result = getLabelByValue(targetValue, node.children);\n if (result) {\n return result;\n }\n }\n }\n\n return null; // Return null if the value is not found in the array\n },\n [options]\n );\n\n const removeItem = useCallback(\n value => {\n let node = null;\n\n function findNodeByValue(options, value) {\n for (let i = 0; i < options.length; i++) {\n if (options[i].value === value) {\n node = options[i];\n break; // This will exit the loop when the condition is met\n }\n\n if (options[i].children) {\n findNodeByValue(options[i].children, value);\n }\n }\n }\n\n findNodeByValue(options, value);\n\n if (node) {\n const childValues = findChildValues(node);\n const valuesToRemove = [value, ...childValues];\n onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));\n }\n },\n [options, checkedProp]\n );\n\n useUpdateEffect(() => {\n if (isFunction(onParentChange)) {\n onParentChange(checked);\n }\n }, [checked]);\n\n return (\n <S.MultiLevelCheckboxSelect ref={forwardedRef} {...props}>\n <Popover\n visible={open}\n arrow={false}\n placement={'bottom'}\n offset={[0, 6]}\n modifiers={[\n {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => {\n state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;\n }\n }\n ]}\n content={\n <S.PopoverContainer ref={popoverContentRef}>\n <S.PopoverHeader>\n <S.SearchContainer>\n <TextInput\n ref={searchInputRef}\n onBlur={e => {\n if (open) {\n e.target.focus();\n }\n }}\n icon={<SearchIcon />}\n value={searchString}\n onChange={e => setSearchString(e.target.value)}\n />\n </S.SearchContainer>\n <SectionSeparator />\n </S.PopoverHeader>\n <S.OptionsContainer>\n <MultiLevelCheckbox\n options={options}\n checked={checkedProp}\n search={searchString}\n noResultsText={noResultsText}\n onChange={onChange}\n />\n </S.OptionsContainer>\n </S.PopoverContainer>\n }\n >\n <S.MultiLevelCheckboxSelectInput tabIndex=\"0\" ref={inputRef}>\n {label && <S.Label>{label}</S.Label>}\n {checked.length === 0 && <S.Placeholder>{placeholder}</S.Placeholder>}\n {checked.map(option => (\n <S.Item key={option}>\n <S.ItemLabel>{getLabelByValue(option)}</S.ItemLabel>\n <S.ItemRemoveButton\n onClick={() => {\n removeItem(option);\n }}\n >\n <CloseIcon />\n </S.ItemRemoveButton>\n </S.Item>\n ))}\n </S.MultiLevelCheckboxSelectInput>\n </Popover>\n </S.MultiLevelCheckboxSelect>\n );\n});\n\nMultiLevelCheckboxSelect.propTypes = {\n /**\n * Label text for the MultiLevelCheckbox\n */\n label: PropTypes.string,\n /**\n * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Select categories...\"\n */\n placeholder: PropTypes.string,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.any.isRequired,\n children: PropTypes.arrayOf(NodeType)\n })\n ).isRequired,\n\n /**\n * Array of checked option values\n */\n checked: PropTypes.array.isRequired,\n\n /**\n * Optional text to display when no results are found while searching.`\n */\n noResultsText: PropTypes.string,\n\n /**\n * Callback function for the `onChange` event\n */\n onChange: PropTypes.func.isRequired,\n\n /**\n * Callback function for the `onChange` event – returns only the checked parents\n */\n onParentChange: PropTypes.func\n};\n\nMultiLevelCheckboxSelect.defaultProps = {\n checked: []\n};\n\nexport default MultiLevelCheckboxSelect;\n"],"names":["MultiLevelCheckboxSelect","React","forwardRef","label","options","checked","checkedProp","placeholder","noResultsText","onChange","onParentChange","props","forwardedRef","inputRef","useRef","popoverContentRef","searchInputRef","searchString","setSearchString","useState","open","setOpen","handleClickInside","useCallback","current","focus","handleKeyDown","event","key","useEventListener","handleClickOutside","target","contains","useOnClickOutside","useMemo","checkedParents","iterate","nodes","forEach","node","includes","value","push","children","sort","JSON","stringify","getLabelByValue","targetValue","result","removeItem","findNodeByValue","i","length","childValues","findChildValues","valuesToRemove","filter","useUpdateEffect","isFunction","createElement","S","_extends","ref","Popover","visible","arrow","placement","offset","modifiers","name","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","content","TextInput","onBlur","e","icon","SearchIcon","SectionSeparator","MultiLevelCheckbox","search","tabIndex","map","option","onClick","CloseIcon","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","shape","isRequired","any","NodeType","array","func","defaultProps"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"MultiLevelCheckboxSelect.js","sources":["../../../src/components/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js"],"sourcesContent":["import React, { useCallback, useMemo, useRef, useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './MultiLevelCheckboxSelect.styled';\nimport { Popover } from '../../data';\nimport MultiLevelCheckbox from '../MultiLevelCheckbox';\nimport TextInput from '../TextInput';\nimport { SectionSeparator } from '../../layout';\nimport { ReactComponent as SearchIcon } from '../../../icons/search.svg';\nimport { ReactComponent as CloseIcon } from '../../../icons/close.svg';\nimport { findChildValues, NodeType } from '../MultiLevelCheckbox';\nimport { useEventListener } from '../../../hooks/useEventListner';\nimport { useOnClickOutside } from '../../../hooks/useOnClickOutside';\nimport useUpdateEffect from '@restart/hooks/useUpdateEffect';\nimport { isFunction } from 'lodash';\n\n/**\n * MultiLevelCheckboxSelect allow the user to select one or more items from a nested set into a MultiSelect-styled input.\n *\n * This component is controlled which means that the consumer will have to keep track of what options are selected. The selected options should be provided to the `checked`-prop. On any selection or deselection onChange will be called with an updated `checked`-list.\n *\n * ### Import\n *\n * ```js\n * import { MultiLevelCheckboxSelect } from '@ntbjs/react-components/inputs'\n * // or\n * import MultiLevelCheckboxSelect from '@ntbjs/react-components/inputs/MultiLevelCheckboxSelect'\n * ```\n */\nconst MultiLevelCheckboxSelect = React.forwardRef(function MultiLevelCheckboxSelect(\n {\n label,\n options,\n checked: checkedProp,\n placeholder,\n noResultsText,\n onChange,\n onParentChange,\n ...props\n },\n forwardedRef\n) {\n const inputRef = useRef(null);\n const popoverContentRef = useRef(null);\n const searchInputRef = useRef(null);\n const [searchString, setSearchString] = useState('');\n const [open, setOpen] = useState(false);\n\n const handleClickInside = useCallback(() => {\n setOpen(true);\n searchInputRef.current?.focus();\n }, []);\n\n const handleKeyDown = useCallback(\n event => {\n if (!open) return;\n if (event.key === 'Escape') {\n setOpen(false);\n }\n },\n [open]\n );\n\n useEventListener('focus', handleClickInside, inputRef);\n useEventListener('mousedown', handleClickInside, inputRef);\n useEventListener('keydown', handleKeyDown);\n\n const handleClickOutside = event => {\n if (\n popoverContentRef?.current === event.target ||\n popoverContentRef?.current?.contains(event.target)\n ) {\n return;\n }\n setOpen(false);\n };\n\n useOnClickOutside(inputRef, handleClickOutside);\n\n const checked = useMemo(() => {\n const checkedParents = [];\n\n function iterate(nodes) {\n nodes.forEach(node => {\n if (checkedProp.includes(node.value)) {\n return checkedParents.push(node.value);\n }\n\n if (node.children) {\n iterate(node.children);\n }\n });\n }\n\n iterate(options);\n return checkedParents.sort();\n }, [JSON.stringify(options), JSON.stringify(checkedProp)]);\n\n const getLabelByValue = useCallback(\n (targetValue, nodes = options) => {\n for (const node of nodes) {\n if (node.value === targetValue) {\n return node.label;\n }\n\n if (node.children) {\n const result = getLabelByValue(targetValue, node.children);\n if (result) {\n return result;\n }\n }\n }\n\n return null; // Return null if the value is not found in the array\n },\n [options]\n );\n\n const removeItem = useCallback(\n value => {\n let node = null;\n\n function findNodeByValue(options, value) {\n for (let i = 0; i < options.length; i++) {\n if (options[i].value === value) {\n node = options[i];\n break; // This will exit the loop when the condition is met\n }\n\n if (options[i].children) {\n findNodeByValue(options[i].children, value);\n }\n }\n }\n\n findNodeByValue(options, value);\n\n if (node) {\n const childValues = findChildValues(node);\n const valuesToRemove = [value, ...childValues];\n onChange(checkedProp.filter(value => !valuesToRemove.includes(value)));\n }\n },\n [options, checkedProp]\n );\n\n useUpdateEffect(() => {\n if (isFunction(onParentChange)) {\n onParentChange(checked);\n }\n }, [checked]);\n\n return (\n <S.MultiLevelCheckboxSelect ref={forwardedRef} {...props}>\n <Popover\n visible={open}\n arrow={false}\n placement={'bottom'}\n offset={[0, 6]}\n modifiers={[\n {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: ({ state }) => {\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: ({ state }) => {\n state.elements.popper.style.width = `${state.elements.reference.offsetWidth}px`;\n }\n }\n ]}\n content={\n <S.PopoverContainer ref={popoverContentRef}>\n <S.PopoverHeader>\n <S.SearchContainer>\n <TextInput\n ref={searchInputRef}\n onBlur={e => {\n if (open) {\n e.target.focus();\n }\n }}\n icon={<SearchIcon />}\n value={searchString}\n onChange={e => setSearchString(e.target.value)}\n />\n </S.SearchContainer>\n <SectionSeparator />\n </S.PopoverHeader>\n <S.OptionsContainer>\n <MultiLevelCheckbox\n options={options}\n checked={checkedProp}\n search={searchString}\n noResultsText={noResultsText}\n onChange={onChange}\n />\n </S.OptionsContainer>\n </S.PopoverContainer>\n }\n >\n <S.MultiLevelCheckboxSelectInput tabIndex=\"0\" ref={inputRef}>\n {label && <S.Label>{label}</S.Label>}\n {checked.length === 0 && <S.Placeholder>{placeholder}</S.Placeholder>}\n {checked.map(option => (\n <S.Item key={option}>\n <S.ItemLabel>{getLabelByValue(option)}</S.ItemLabel>\n <S.ItemRemoveButton\n onClick={() => {\n removeItem(option);\n }}\n >\n <CloseIcon />\n </S.ItemRemoveButton>\n </S.Item>\n ))}\n </S.MultiLevelCheckboxSelectInput>\n </Popover>\n </S.MultiLevelCheckboxSelect>\n );\n});\n\nMultiLevelCheckboxSelect.propTypes = {\n /**\n * Label text for the MultiLevelCheckbox\n */\n label: PropTypes.string,\n /**\n * The placeholder of the input. Text to be displayed on the input element when the component is enabled and not focused – e.g. \"Select categories...\"\n */\n placeholder: PropTypes.string,\n options: PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string.isRequired,\n value: PropTypes.any.isRequired,\n children: PropTypes.arrayOf(NodeType)\n })\n ).isRequired,\n\n /**\n * Array of checked option values\n */\n checked: PropTypes.array.isRequired,\n\n /**\n * Optional text to display when no results are found while searching.`\n */\n noResultsText: PropTypes.string,\n\n /**\n * Callback function for the `onChange` event\n */\n onChange: PropTypes.func.isRequired,\n\n /**\n * Callback function for the `onChange` event – returns only the checked parents\n */\n onParentChange: PropTypes.func\n};\n\nMultiLevelCheckboxSelect.defaultProps = {\n checked: []\n};\n\nexport default MultiLevelCheckboxSelect;\n"],"names":["MultiLevelCheckboxSelect","React","forwardRef","label","options","checked","checkedProp","placeholder","noResultsText","onChange","onParentChange","props","forwardedRef","inputRef","useRef","popoverContentRef","searchInputRef","searchString","setSearchString","useState","open","setOpen","handleClickInside","useCallback","current","focus","handleKeyDown","event","key","useEventListener","handleClickOutside","target","contains","useOnClickOutside","useMemo","checkedParents","iterate","nodes","forEach","node","includes","value","push","children","sort","JSON","stringify","getLabelByValue","targetValue","result","removeItem","findNodeByValue","i","length","childValues","findChildValues","valuesToRemove","filter","useUpdateEffect","isFunction","createElement","S","_extends","ref","Popover","visible","arrow","placement","offset","modifiers","name","enabled","phase","requires","fn","state","styles","popper","width","rects","reference","effect","elements","style","offsetWidth","content","TextInput","onBlur","e","icon","SearchIcon","SectionSeparator","MultiLevelCheckbox","search","tabIndex","map","option","onClick","CloseIcon","propTypes","process","env","NODE_ENV","PropTypes","string","arrayOf","shape","isRequired","any","NodeType","array","func","defaultProps"],"mappings":"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"}
|