react-core-ts 1.3.7 → 1.3.8

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.
@@ -139,7 +139,7 @@ var ModernTextArea = function (_a) {
139
139
  minHeight: boxMinHeight !== null && boxMinHeight !== void 0 ? boxMinHeight : undefined,
140
140
  }, autoComplete: autoComplete ? 'on' : 'off',
141
141
  // autoFocus={autoFocus}
142
- className: generateClassName('input') })), !hideLabel && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: "id", onClick: function () { return onLabelClick(); }, className: generateClassName('label') }, { children: [label, required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: generateClassName('adorement'), ref: adorementRef }, { children: errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", __assign({ className: " text-error-label text-error-icon cursor-pointer relative ".concat(generateClassName('message')), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) }))) }))] }))] })) })));
142
+ className: generateClassName('input') })), !hideLabel && ((0, jsx_runtime_1.jsxs)("label", __assign({ htmlFor: id, onClick: function () { return onLabelClick(); }, className: generateClassName('label') }, { children: [label, required ? (0, jsx_runtime_1.jsx)("span", __assign({ className: "text-error" }, { children: " *" })) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})] })))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: generateClassName('adorement'), ref: adorementRef }, { children: errors && errors[name] && ((0, jsx_runtime_1.jsx)("div", __assign({ className: " text-error-label text-error-icon cursor-pointer relative ".concat(generateClassName('message')), onMouseEnter: function () { return setIsHovered(true); }, onMouseLeave: function () { return setIsHovered(false); } }, { children: (0, jsx_runtime_1.jsx)(customIcons_1.default, { name: "alert", type: "medium" }) }))) }))] }))] })) })));
143
143
  };
144
144
  exports.default = ModernTextArea;
145
145
  //# sourceMappingURL=ReactTextArea.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ReactTextArea.js","sourceRoot":"","sources":["../src/ReactTextArea.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"ReactTextArea.js","sourceRoot":"","sources":["../src/ReactTextArea.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,621 @@
1
+ body * {
2
+ box-sizing: border-box;
3
+ }
4
+ :root {
5
+ --grey-dark: #4a4a4a;
6
+ --grey-light: #d3d3d3;
7
+ --blue-navy: #001f3f;
8
+ --input-disabled: #a9a9a9;
9
+ --error-light: #f08080;
10
+ --error-extra-light: #fddede;
11
+ --success: #28a745;
12
+ --success-light: #d4edda;
13
+ --blue-light: #add8e6;
14
+ }
15
+ :root {
16
+ --blue-navy: #001f3f;
17
+ --table-hover: #your-hover-color; /* Replace with your actual color code */
18
+ }
19
+
20
+ .custom-spinner {
21
+ width: 24px !important; /* w-6 */
22
+ height: 24px; /* h-6 */
23
+ color: transparent; /* text-table-hover */
24
+ fill: var(--blue-navy); /* fill-blue-navy */
25
+ animation: spin 1s linear infinite; /* animate-spin */
26
+ width: 15px;
27
+ position: relative;
28
+ top: 1px;
29
+ }
30
+
31
+ @keyframes spin {
32
+ 0% {
33
+ transform: rotate(0deg);
34
+ }
35
+ 100% {
36
+ transform: rotate(360deg);
37
+ }
38
+ }
39
+
40
+ .textfield,
41
+ .textfield-big {
42
+ outline: none;
43
+ color: var(--grey-dark);
44
+ border-color: var(--grey-light);
45
+ background-color: white;
46
+ }
47
+
48
+ .textfield:focus,
49
+ .textfield-big:focus {
50
+ border-color: var(--blue-navy);
51
+ }
52
+
53
+ .textfield:disabled,
54
+ .textfield-big:disabled {
55
+ color: var(--input-disabled);
56
+ }
57
+
58
+ .textfield-error,
59
+ .textfield-big-error {
60
+ outline: none;
61
+ color: var(--error-light) !important;
62
+ border-color: var(--error-light) !important;
63
+ background-color: var(--error-extra-light) !important ;
64
+ }
65
+
66
+ .textfield-error::placeholder,
67
+ .textfield-big-error::placeholder {
68
+ color: var(--error-light);
69
+ }
70
+
71
+ .textfield-success {
72
+ outline: none;
73
+ color: var(--success);
74
+ border-color: var(--success);
75
+ background-color: var(--success-light);
76
+ }
77
+
78
+ .textfield-success:focus {
79
+ ring-width: 0;
80
+ }
81
+
82
+ .textfield-success::placeholder {
83
+ color: var(--success);
84
+ }
85
+
86
+ .textfield-editable {
87
+ outline: none;
88
+ color: var(--grey-dark);
89
+ border-color: var(--blue-navy);
90
+ background-color: var(--blue-light);
91
+ }
92
+
93
+ .textfield-editable::placeholder {
94
+ color: var(--grey-dark);
95
+ }
96
+
97
+ .qbs-autocomplete-suggestions {
98
+ position: absolute;
99
+ height: auto;
100
+ width: 100%;
101
+ padding: 8px; /* Corresponding to p-1.5 in Tailwind */
102
+ z-index: 99;
103
+ margin-top: 4px;
104
+ margin-bottom: 0;
105
+ border-radius: 8px;
106
+ background: #fff;
107
+ box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);
108
+ transform: translateY(0); /* Default position */
109
+ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
110
+ opacity: 1;
111
+
112
+ /* Ensure content doesn't overflow during transition */
113
+ }
114
+ .qbs-autocomplete-suggestions.bottom {
115
+ top: 100%; /* Position below the input */
116
+ /* Other styling */
117
+ }
118
+
119
+ .qbs-autocomplete-suggestions.top {
120
+ bottom: 100%; /* Position above the input */
121
+ /* Other styling */
122
+ }
123
+ .qbs-autocomplete-suggestions-item {
124
+ cursor: pointer;
125
+ padding: 6px 8px;
126
+ border-radius: 6px;
127
+ color: #222;
128
+ font-size: 14px;
129
+ font-weight: 500;
130
+ line-height: 20px; /* 142.857% */
131
+ width: 100%;
132
+ display: flex;
133
+ align-items: flex-start;
134
+ gap: 8px;
135
+ }
136
+ .qbs-autocomplete-suggestions-item:hover {
137
+ background: #f8f8f8;
138
+ border-radius: 6px;
139
+ }
140
+
141
+ /* When value.id is equal to suggestion.id */
142
+ .is-selected {
143
+ border-radius: 6px;
144
+ background: var(--neutrals-grey-20, #f4f4f4);
145
+ }
146
+
147
+ /* When value.id is NOT equal to suggestion.id */
148
+ .qbs-autocomplete-suggestions-item .is-not-selected:hover {
149
+ background-color: #f1f5f9; /* Replace with actual color code for 'hover:bg-table-hover' */
150
+ }
151
+
152
+ .qbs-autocomplete-notfound {
153
+ cursor: pointer;
154
+ padding: 6px 8px;
155
+ border-radius: 6px;
156
+ font-size: 12px;
157
+ font-weight: 500;
158
+ }
159
+ .qbs-autocomplete-witherror-close-icon {
160
+ position: absolute;
161
+ top: calc(50% - 8px);
162
+ right: 22px; /* right-1 */
163
+ padding-left: 0.25rem; /* px-1 */
164
+ padding-right: 0.25rem; /* px-1 */
165
+ display: flex;
166
+ justify-content: center;
167
+ align-items: center;
168
+ }
169
+ .qbs-autocomplete-close-icon {
170
+ position: absolute;
171
+ top: calc(50% - 8px);
172
+ right: 2px; /* right-1 */
173
+ padding-left: 0.25rem; /* px-1 */
174
+ padding-right: 0.25rem; /* px-1 */
175
+ display: flex;
176
+ justify-content: center;
177
+ align-items: center;
178
+ }
179
+ .qbs-textfield-default {
180
+ width: 100%;
181
+ position: relative;
182
+ padding-right: 8px;
183
+ min-height: 36px;
184
+ height: 36px;
185
+ border-radius: 6px;
186
+ padding-left: 8px;
187
+ border: 1px solid #d6d8dc;
188
+ background: #fff;
189
+ box-sizing: border-box;
190
+ font-size: 14px;
191
+ font-style: normal;
192
+ font-weight: 500;
193
+ line-height: 20px;
194
+ color: #313131;
195
+ }
196
+
197
+ .qbs-expandable-container {
198
+ border: 1px solid #d6d8dc;
199
+ background: #fff;
200
+ box-sizing: border-box;
201
+ padding: 5px;
202
+ display: flex;
203
+ flex-wrap: wrap;
204
+ flex: 1 1 0%;
205
+ gap: 5px;
206
+ }
207
+
208
+ .qbs-dropdown-selected-container {
209
+ border: 0px;
210
+ border-top: 1px solid #d6d8dc;
211
+ min-height: 35px;
212
+ margin-top: 2px;
213
+ padding-top: 10px;
214
+ }
215
+ .qbs-dropdown-selected-preview {
216
+ .qbs-dropdown-selected-container {
217
+ border-top: 0px;
218
+ }
219
+ }
220
+
221
+ .qbs-dropdown-selected-container .qbs-clear-link,
222
+ .qbs-expandable-container .qbs-clear-link {
223
+ color: #e76458;
224
+ }
225
+
226
+ .qbs-textfield-default.expandable {
227
+ height: auto;
228
+ border: none;
229
+ }
230
+
231
+ .qbs-expandable-container .qbs-textfield-expandable {
232
+ flex: 1 1 auto;
233
+ display: inline-grid;
234
+ grid-template-columns: 0px min-content;
235
+ grid-area: 1 / 1 / 2 / 3;
236
+ overflow: hidden;
237
+ }
238
+ .qbs-expandable-container .qbs-textfield-expandable::after {
239
+ content: attr(data-value) " ";
240
+ visibility: hidden;
241
+ white-space: pre;
242
+ grid-area: 1 / 2;
243
+ font: inherit;
244
+ min-width: 2px;
245
+ border: 0px;
246
+ margin: 0px;
247
+ outline: 0px;
248
+ padding: 0px;
249
+ }
250
+ .qbs-expandable-container .qbs-textfield-expandable input {
251
+ opacity: 1;
252
+ width: auto;
253
+ grid-area: 1 / 2;
254
+ min-width: 10px;
255
+ border: 0px;
256
+ margin: 0px;
257
+ outline: 0px;
258
+ padding: 0px;
259
+ height: auto;
260
+ min-height: auto;
261
+ border-radius: 0;
262
+ }
263
+
264
+ .qbs-textfield-default::placeholder {
265
+ font-size: 14px;
266
+ font-style: normal;
267
+ font-weight: 500;
268
+ line-height: 20px;
269
+ }
270
+
271
+ .qbs-autocomplete-close-icon button:focus-within {
272
+ outline: none;
273
+ }
274
+
275
+ .fullWidth {
276
+ width: 100%;
277
+ }
278
+
279
+ .autoWidth {
280
+ width: auto;
281
+ }
282
+ .icon-button {
283
+ background: transparent;
284
+ border: none;
285
+ display: inline-flex;
286
+ cursor: pointer;
287
+ padding: 0px 1px;
288
+ }
289
+ .icon-button-rotate {
290
+ rotate: 180deg;
291
+ }
292
+ .labels {
293
+ font-size: 12px;
294
+ }
295
+ .dropdown-search-input {
296
+ min-width: -webkit-fill-available;
297
+ border-radius: 6px;
298
+ border: 1px solid var(--border-card-color-default, #d6d8dc);
299
+ background: var(--surface-input-bg-color-default, #fff);
300
+ color: #313131;
301
+ font-size: 14px;
302
+ height: 36px;
303
+ padding: 0px 8px;
304
+ font-style: normal;
305
+ font-weight: 500;
306
+ line-height: 20px;
307
+ padding-left: 32px;
308
+ }
309
+ .qbs-autocomplete-suggestions-sub {
310
+ position: relative;
311
+ overflow: auto;
312
+ max-height: 184px;
313
+ top: 0;
314
+ display: flex;
315
+ flex-direction: column;
316
+ gap: 4px;
317
+ }
318
+ .qbs-autocomplete-listitem-container {
319
+ display: flex;
320
+ align-items: center;
321
+ gap: 0px;
322
+ }
323
+ ul {
324
+ list-style-type: none;
325
+ }
326
+
327
+ .react-core-ts-search-container {
328
+ display: flex;
329
+ align-items: center;
330
+ gap: var(--spacing-4, 4px);
331
+ align-self: stretch;
332
+ margin-bottom: 4px;
333
+ }
334
+ .selected-item {
335
+ display: flex;
336
+ align-items: center;
337
+ justify-content: space-between;
338
+ padding: 3px 6px;
339
+ margin: 0;
340
+ background-color: #e0e0e0;
341
+ color: #333;
342
+ border-radius: 6px;
343
+ border: 1px solid rgba(231, 100, 88, 0.1);
344
+ background: rgba(231, 100, 88, 0.1);
345
+ font-size: 12px;
346
+ font-style: normal;
347
+ font-weight: 500;
348
+ line-height: 16px;
349
+ color: #e76458;
350
+ gap: 6px;
351
+ height: 22px;
352
+ }
353
+
354
+ .remove-item-btn {
355
+ background-color: transparent;
356
+ border: none;
357
+ color: #e76458;
358
+ cursor: pointer;
359
+ }
360
+
361
+ .remove-item-btn:hover {
362
+ color: #e76458;
363
+ }
364
+
365
+ .selected-items-container {
366
+ display: flex;
367
+ gap: 12px;
368
+ align-items: center;
369
+ position: absolute;
370
+ left: 8px;
371
+ z-index: 99;
372
+ top: 6.5px;
373
+ flex-wrap: wrap;
374
+ }
375
+
376
+ .qbs-expandable-container .selected-items-container {
377
+ position: relative;
378
+ top: 0;
379
+ left: 0;
380
+ }
381
+
382
+ .selected-items-container .badge {
383
+ background-color: #c63a3a;
384
+ color: #fff;
385
+ }
386
+
387
+ .selected-item-more {
388
+ display: flex;
389
+ align-items: center;
390
+ justify-content: center;
391
+ padding: 3px 8px;
392
+ margin: 0;
393
+ border-radius: 6px;
394
+ background: #c63a3a;
395
+ font-size: 12px;
396
+ font-style: normal;
397
+ font-weight: 500;
398
+ line-height: 16px;
399
+ color: #fff;
400
+ height: 22px;
401
+ }
402
+
403
+ .loadMoreSection {
404
+ margin: 0;
405
+ cursor: pointer;
406
+ display: flex;
407
+ justify-content: flex-start;
408
+ padding: 8px;
409
+ }
410
+ .loadMoreSection p {
411
+ color: #336cfc;
412
+ font-size: 14px;
413
+ font-style: normal;
414
+ font-weight: 500;
415
+ line-height: 20px;
416
+ margin: 0;
417
+ }
418
+ ::-webkit-scrollbar-track {
419
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
420
+ border-radius: 0px;
421
+ background-color: transparent;
422
+ }
423
+
424
+ ::-webkit-scrollbar {
425
+ width: 6px;
426
+ height: 4px;
427
+ background-color: transparent;
428
+ }
429
+
430
+ ::-webkit-scrollbar-thumb {
431
+ border-radius: 100px;
432
+ -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
433
+ background-color: #ddd;
434
+ }
435
+
436
+ .qbs-autocomplete-suggestions-item.is-selected {
437
+ color: #e76458;
438
+ background: #f8f8f8;
439
+ }
440
+
441
+ span.dropdown-search-icon {
442
+ position: absolute;
443
+ left: 8px;
444
+ top: 10px;
445
+ }
446
+
447
+ .dropdown-search-input:focus {
448
+ outline: none;
449
+ border: 1px solid #222;
450
+ }
451
+
452
+ .qbs-autocomplete-checkbox-container {
453
+ gap: 8px;
454
+ padding: 6px 8px;
455
+ display: flex;
456
+ align-items: flex-start;
457
+ }
458
+
459
+ .qbs-autocomplete-checkbox-container .qbs-autocomplete-suggestions-item {
460
+ padding: 0;
461
+ /* pointer-events: none; */
462
+ }
463
+
464
+ .qbs-autocomplete-checkbox-container:hover {
465
+ background: #f8f8f8;
466
+ border-radius: 6px;
467
+ }
468
+
469
+ .qbs-autocomplete-checkbox-container.is-selected {
470
+ background: #f8f8f8;
471
+ border-radius: 6px;
472
+ }
473
+
474
+ .qbs-autocomplete-checkbox {
475
+ position: relative;
476
+ display: flex;
477
+ align-items: center;
478
+ justify-content: center;
479
+ }
480
+
481
+ .qbs-autocomplete-checkbox input {
482
+ opacity: 0;
483
+ }
484
+
485
+ .qbs-autocomplete-checkbox input ~ label {
486
+ position: absolute;
487
+ border-radius: 3px;
488
+ border: 1px solid #999696;
489
+ width: 16px;
490
+ height: 16px;
491
+ top: 3px;
492
+ transition: all 0.2s ease;
493
+ cursor: pointer;
494
+ }
495
+
496
+ .qbs-autocomplete-checkbox input ~ label svg {
497
+ opacity: 0;
498
+ transition: all 0.2s ease;
499
+ position: absolute;
500
+ left: 3px;
501
+ top: 3px;
502
+ width: 9px;
503
+ height: 9px;
504
+ }
505
+
506
+ .qbs-autocomplete-checkbox input:checked ~ label {
507
+ transition: all 0.2s ease;
508
+ border-radius: 3px;
509
+ background: #e76458;
510
+ border-color: #e76458;
511
+ }
512
+ .qbs-autocomplete-checkbox input:checked ~ label svg {
513
+ opacity: 1;
514
+ transition: all 0.2s ease;
515
+ }
516
+
517
+ .action_label {
518
+ font-size: 14px;
519
+ color: #4c7ad6;
520
+ }
521
+ /* Tooltip.css */
522
+ /* .tooltip-wrapper {
523
+ position: relative;
524
+ display: inline-block;
525
+ }
526
+
527
+ .tooltip-content {
528
+ visibility: hidden;
529
+ width: max-content;
530
+ background-color: black;
531
+ color: white;
532
+ text-align: center;
533
+ max-width: 150px;
534
+ padding: 5px 10px;
535
+ border-radius: 6px;
536
+ position: absolute;
537
+ z-index: 1;
538
+ bottom: 125%;
539
+ left: 50%;
540
+ transform: translateX(-50%);
541
+ transition: visibility 0.2s ease-in-out;
542
+ }
543
+
544
+ .tooltip-content::after {
545
+ content: '';
546
+ position: absolute;
547
+ top: 100%;
548
+ left: 50%;
549
+ margin-left: -5px;
550
+ border-width: 5px;
551
+ border-style: solid;
552
+ border-color: black transparent transparent transparent;
553
+ }
554
+
555
+ .tooltip-wrapper:hover .tooltip-content {
556
+ visibility: visible;
557
+ } */
558
+ .qbs-table-tooltip {
559
+ position: relative;
560
+ display: contents;
561
+ cursor: pointer;
562
+ }
563
+
564
+ .qbs-table-tooltip .tooltiptext,
565
+ .tooltiptext {
566
+ visibility: hidden;
567
+ background-color: #000;
568
+ color: #fff;
569
+ text-align: center;
570
+ padding: 6px;
571
+ border-radius: 4px;
572
+ position: absolute;
573
+ z-index: 9999;
574
+ opacity: 0;
575
+ transition: opacity 0.3s;
576
+ font-size: 14px;
577
+ font-style: normal;
578
+ font-weight: 400;
579
+ line-height: 16px;
580
+ max-width: 300px;
581
+ }
582
+
583
+ .qbs-table-tooltip.up .tooltiptext {
584
+ bottom: 125%;
585
+ left: 0%;
586
+ }
587
+
588
+ .qbs-table-tooltip.down .tooltiptext {
589
+ top: 125%;
590
+ right: 0px;
591
+ left: auto;
592
+ }
593
+
594
+ .qbs-table-tooltip:hover .tooltiptext {
595
+ visibility: visible;
596
+ opacity: 1;
597
+ }
598
+
599
+ .qbs-table-tooltip .tooltiptext::after,
600
+ .tooltiptext::after {
601
+ content: "";
602
+ position: absolute;
603
+ border-width: 5px;
604
+ border-style: solid;
605
+ }
606
+
607
+ .qbs-table-tooltip.up .tooltiptext::after,
608
+ .up.tooltiptext::after {
609
+ top: 100%;
610
+ left: 50%;
611
+ margin-left: -5px;
612
+ border-color: #000 transparent transparent transparent;
613
+ }
614
+
615
+ .qbs-table-tooltip.down .tooltiptext::after,
616
+ .down.tooltiptext::after {
617
+ bottom: 100%;
618
+ left: 50%;
619
+ margin-left: -5px;
620
+ border-color: transparent transparent #000 transparent;
621
+ }
@@ -0,0 +1,130 @@
1
+ .qbs-flex {
2
+ display: flex;
3
+ }
4
+ .qbs-flex-wrap {
5
+ flex-wrap: wrap;
6
+ }
7
+ .qbs-w-full {
8
+ width: 100%;
9
+ }
10
+ .qbs-mb-2 {
11
+ margin-bottom: 0.5rem;
12
+ }
13
+ .-qbs-mt-2 {
14
+ margin-top: -0.5rem;
15
+ }
16
+ .qbs-flex-1 {
17
+ flex: 1 1 0%;
18
+ }
19
+ .qbs-inline-block {
20
+ display: inline-block;
21
+ }
22
+ .qbs-text-sm {
23
+ font-size: 0.875rem;
24
+ }
25
+ .qbs-cursor-pointer {
26
+ cursor: pointer;
27
+ }
28
+ .qbs-text-center {
29
+ text-align: center;
30
+ }
31
+ .qbs-p-1 {
32
+ padding: 0.25rem;
33
+ }
34
+ .qbs-border-b-2 {
35
+ border-bottom-width: 2px;
36
+ }
37
+ .qbs-tab-item {
38
+ color: #4b5563;
39
+ border-color: #d1d5db;
40
+ }
41
+ .qbs-tab-item:hover {
42
+ color: #2563eb;
43
+ }
44
+ .qbs-tab-active-item {
45
+ color: #2563eb;
46
+ border-color: #2563eb;
47
+ }
48
+ .qbs-relative {
49
+ position: relative;
50
+ }
51
+ .qbs-gap-1 {
52
+ gap: 0.25rem;
53
+ }
54
+ .qbs-rounded-full {
55
+ border-radius: 9999px;
56
+ }
57
+ .qbs-text-xs {
58
+ font-size: 0.75rem;
59
+ }
60
+ .qbs-inline-flex {
61
+ display: inline-flex;
62
+ }
63
+ .qbs-items-center {
64
+ align-items: center;
65
+ }
66
+ .qbs-justify-center {
67
+ justify-content: center;
68
+ }
69
+ .qbs-px-2 {
70
+ padding-left: 0.5rem;
71
+ padding-right: 0.5rem;
72
+ }
73
+ .qbs-py-1 {
74
+ padding-top: 0.25rem;
75
+ padding-bottom: 0.25rem;
76
+ }
77
+ .qbs-leading-none {
78
+ line-height: 1;
79
+ }
80
+ .qbs-min-w-6 {
81
+ min-width: 1.5rem;
82
+ }
83
+ .qbs-min-h-6 {
84
+ min-height: 1.5rem;
85
+ }
86
+ .qbs-align-middle {
87
+ vertical-align: middle;
88
+ }
89
+ .qbs-min-emp-h {
90
+ min-height: 183px;
91
+ padding-top: 80px;
92
+ padding-bottom: 80px;
93
+ }
94
+ .qbs-flex-grow {
95
+ flex-grow: 1;
96
+ }
97
+ .qbs-text-right {
98
+ text-align: right;
99
+ }
100
+ .qbs-readmore-collapse {
101
+ cursor: pointer;
102
+ width: 100%;
103
+ text-align: center;
104
+ display: flex;
105
+ justify-content: center;
106
+ margin-top: 5px;
107
+ }
108
+ .qbs-readmore-collapse div {
109
+ border-radius: 9999px;
110
+ min-width: 1.5rem;
111
+ min-height: 1.5rem;
112
+ padding: 5px;
113
+ }
114
+ .qbs-more-collapse:hover {
115
+ background-color: #d1d5db;
116
+ }
117
+ .qbs-hidden {
118
+ display: none;
119
+ }
120
+ .qbs-autocomplete-selected-suggestions .qbs-autocomplete-suggestions-sub {
121
+ min-height: 184px;
122
+ }
123
+ .selected-items-outer-container {
124
+ display: flex;
125
+ gap: 5px;
126
+ flex-wrap: wrap;
127
+ overflow-x: auto;
128
+ transition: height 3s ease-in-out, opacity 3s ease-in-out,
129
+ padding 1s ease-in-out;
130
+ }
@@ -0,0 +1,496 @@
1
+ .tooltip-container {
2
+ position: relative;
3
+ transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
4
+ }
5
+
6
+ .bottom {
7
+ .tooltip {
8
+ position: absolute;
9
+ bottom: -40;
10
+ right: 3px;
11
+ transform: translateX(0%);
12
+ padding: 0.3em 0.6em;
13
+ opacity: 0;
14
+ width: max-content;
15
+ max-width: 100%;
16
+ z-index: 999;
17
+ font-size: 12px;
18
+ color: #fff !important;
19
+ pointer-events: none;
20
+ transition: all 0.3s;
21
+ border: 1px solid #e55353;
22
+ background-color: #e55353;
23
+ border-radius: 6px;
24
+ color: rgb(34, 34, 34);
25
+
26
+ &.info {
27
+ color: #ffffff !important;
28
+ border: 1px solid #ffffff;
29
+ background-color: #000000;
30
+ right: 1px;
31
+ top: 5px;
32
+ }
33
+
34
+ &.card {
35
+ color: #ffffff !important;
36
+ border: 1px solid #ffffff;
37
+ background-color: #000000;
38
+ right: -8px;
39
+ top: 5px;
40
+ }
41
+ }
42
+
43
+ .tooltip::before {
44
+ position: absolute;
45
+ content: '';
46
+ height: 0.6em;
47
+ width: 0.6em;
48
+ right: 20px;
49
+ z-index: 999;
50
+ top: -4px;
51
+ border: 1px solid #e55353;
52
+ border-right: none;
53
+ border-bottom: none;
54
+ transform: translate(50%) rotate(45deg);
55
+ background-color: #e55353;
56
+ }
57
+
58
+ .info.tooltip::before {
59
+ border: 1px solid #000000;
60
+ background-color: #000000;
61
+ right: 14px;
62
+ position: absolute;
63
+ content: '';
64
+ height: 0.6em;
65
+ width: 0.6em;
66
+ z-index: 999;
67
+ top: -4px;
68
+ border-right: none;
69
+ border-bottom: none;
70
+ transform: translate(50%) rotate(45deg);
71
+ }
72
+
73
+ .card.tooltip::before {
74
+ border: 1px solid #000000;
75
+ background-color: #000000;
76
+ right: 14px;
77
+ position: absolute;
78
+ content: '';
79
+ height: 0.6em;
80
+ width: 0.6em;
81
+ z-index: 999;
82
+ top: -3px;
83
+ border-right: none;
84
+ border-bottom: none;
85
+ transform: translate(50%) rotate(45deg);
86
+ }
87
+
88
+ .tooltip-container:hover .tooltip {
89
+ top: 46px;
90
+ opacity: 1;
91
+ visibility: visible;
92
+ z-index: 999;
93
+ pointer-events: auto;
94
+
95
+ &.info {
96
+ top: 30px;
97
+ max-width: 500px;
98
+ position: absolute;
99
+ }
100
+
101
+ &.card {
102
+ top: 20px;
103
+ max-width: 300px;
104
+ position: absolute;
105
+ }
106
+ }
107
+ .tooltip-info {
108
+ position: absolute;
109
+ bottom: -40;
110
+ right: 3px;
111
+ transform: translateX(0%);
112
+ padding: 0.3em 0.6em;
113
+ opacity: 0;
114
+ width: max-content;
115
+ max-width: 100%;
116
+ z-index: 999;
117
+ font-size: 12px;
118
+ color: #fff !important;
119
+ pointer-events: none;
120
+ transition: all 0.3s;
121
+ border: 1px solid #475467;
122
+ background-color: #475467;
123
+ border-radius: 6px;
124
+ }
125
+ .tooltip-info::before {
126
+ position: absolute;
127
+ content: '';
128
+ height: 0.6em;
129
+ width: 0.6em;
130
+ right: 20px;
131
+ z-index: 999;
132
+ top: -4px;
133
+ border: 1px solid #475467;
134
+ border-right: none;
135
+ border-bottom: none;
136
+ transform: translate(50%) rotate(45deg);
137
+ background-color: #475467;
138
+ }
139
+
140
+ .tooltip-container:hover .tooltip-info {
141
+ top: 46px;
142
+ opacity: 1;
143
+ visibility: visible;
144
+ z-index: 999;
145
+ pointer-events: auto;
146
+ }
147
+ }
148
+ .top-tool {
149
+ .tooltip {
150
+ position: absolute;
151
+ bottom: 45px !important;
152
+ left: 0;
153
+ top: auto !important;
154
+ transform: translateX(0%);
155
+ padding: 0.3em 0.6em;
156
+ opacity: 0;
157
+ width: max-content;
158
+ white-space: normal;
159
+ z-index: 999;
160
+ font-size: 12px;
161
+ max-width: 100%;
162
+ color: #ff681d !important;
163
+ pointer-events: none;
164
+ transition: all 0.3s;
165
+ border: 1px solid #ff681d;
166
+ background-color: #fff;
167
+ border-radius: 6px;
168
+ color: rgb(34, 34, 34);
169
+ }
170
+
171
+ .tooltip::before {
172
+ position: absolute;
173
+ content: '';
174
+ height: 0.6em;
175
+ width: 0.6em;
176
+ z-index: 999;
177
+ bottom: -4px;
178
+ border: 1px solid #ff681d;
179
+ border-left: none;
180
+ border-top: none;
181
+ transform: translate(50%) rotate(45deg);
182
+ background-color: #fff;
183
+ }
184
+
185
+ .tooltip-container:hover .tooltip {
186
+ bottom: 45px !important;
187
+ opacity: 1;
188
+ top: auto !important;
189
+ visibility: visible;
190
+ z-index: 999;
191
+ pointer-events: auto;
192
+ }
193
+ }
194
+ .bottom-tool {
195
+ .tooltip {
196
+ position: absolute;
197
+ bottom: -40;
198
+ transform: translateX(0%);
199
+ padding: 0.3em 0.6em;
200
+ opacity: 0;
201
+ width: max-content;
202
+ max-width: 100%;
203
+ z-index: 999;
204
+ font-size: 12px;
205
+ color: #ff681d !important;
206
+ white-space: wrap;
207
+ pointer-events: none;
208
+ transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
209
+ border: 1px solid #ff681d;
210
+ background-color: #fff;
211
+ border-radius: 6px;
212
+ color: rgb(34, 34, 34);
213
+ }
214
+
215
+ .tooltip::before {
216
+ position: absolute;
217
+ content: '';
218
+ height: 0.6em;
219
+ width: 0.6em;
220
+ z-index: 999;
221
+ top: -4px;
222
+ border: 1px solid #ff681d;
223
+ border-right: none;
224
+ border-bottom: none;
225
+ transform: translate(50%) rotate(45deg);
226
+ background-color: #fff;
227
+ }
228
+
229
+ .tooltip-container:hover .tooltip {
230
+ top: 46px;
231
+ opacity: 1;
232
+ visibility: visible;
233
+ z-index: 999;
234
+ pointer-events: auto;
235
+ }
236
+ }
237
+
238
+ .right {
239
+ .tooltip {
240
+ position: absolute;
241
+ top: 2.5px;
242
+ left: calc(100% + 9px);
243
+ transform: translateX(0%);
244
+ padding: 8px;
245
+ opacity: 0;
246
+ min-width: 200px;
247
+ max-width: 200px;
248
+ min-height: calc(100% - 16px);
249
+ height: auto;
250
+ z-index: 999;
251
+ font-size: 12px;
252
+ color: #fff !important;
253
+ pointer-events: none;
254
+ transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
255
+ border: 1px solid #e55353;
256
+ background-color: #e55353;
257
+ border-radius: 6px;
258
+ color: rgb(34, 34, 34);
259
+ }
260
+
261
+ .tooltip-card {
262
+ padding: 3px 10px 4px;
263
+ top: -4px;
264
+ min-width: 175px;
265
+ background-color: #3d414a;
266
+ border: 1px solid #3d414a;
267
+ }
268
+
269
+ .tooltip::before {
270
+ position: absolute;
271
+ content: '';
272
+ height: 0.6em;
273
+ width: 0.6em;
274
+ left: -8px;
275
+ top: 14px;
276
+ z-index: 999;
277
+ transform: translateY(10px);
278
+ border: 1px solid #e55353;
279
+ border-top: none;
280
+ border-right: none;
281
+ transform: translate(50%) rotate(45deg);
282
+ background-color: #e55353;
283
+ }
284
+
285
+ .tooltip-card::before {
286
+ top: 8px;
287
+ background-color: #3d414a;
288
+ border: 1px solid #3d414a;
289
+ }
290
+
291
+ .tooltip-container:hover {
292
+ .tooltip {
293
+ top: 2.5px;
294
+ opacity: 1;
295
+ visibility: visible;
296
+ z-index: 999;
297
+ pointer-events: auto;
298
+ }
299
+
300
+ .tooltip-card {
301
+ top: -4px;
302
+ }
303
+ }
304
+ }
305
+
306
+ .left {
307
+ .tooltip {
308
+ position: absolute;
309
+ top: 2.5px;
310
+ right: calc(100% + 9px);
311
+ transform: translateX(0%);
312
+ padding: 8px;
313
+ opacity: 0;
314
+ min-width: 200px;
315
+ max-width: 200px;
316
+ min-height: calc(100% - 16px);
317
+ z-index: 999;
318
+ font-size: 12px;
319
+ color: #fff !important;
320
+ pointer-events: none;
321
+ transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
322
+ border: 1px solid #e55353;
323
+ background-color: #e55353;
324
+ border-radius: 6px;
325
+ color: rgb(34, 34, 34);
326
+ }
327
+
328
+ .tooltip::before {
329
+ position: absolute;
330
+ content: '';
331
+ height: 0.6em;
332
+ width: 0.6em;
333
+ right: 0px;
334
+ top: 14px;
335
+ z-index: 999;
336
+ transform: translateY(10px);
337
+ border: 1px solid #e55353;
338
+ border-bottom: none;
339
+ border-left: none;
340
+ transform: translate(50%) rotate(45deg);
341
+ background-color: #e55353;
342
+ }
343
+
344
+ .tooltip-container:hover .tooltip {
345
+ top: 2.5px;
346
+ opacity: 1;
347
+ visibility: visible;
348
+ z-index: 999;
349
+ pointer-events: auto;
350
+ }
351
+ }
352
+
353
+ .top {
354
+ .tooltip-info {
355
+ position: absolute;
356
+ top: -40;
357
+ left: 0;
358
+ transform: translateX(0%);
359
+ padding: 0.3em 0.6em;
360
+ opacity: 0;
361
+ width: 100%;
362
+ z-index: 999;
363
+ font-size: 12px;
364
+ color: #fff !important;
365
+ pointer-events: none;
366
+ transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
367
+ border: 1px solid #475467;
368
+ background-color: #475467;
369
+ border-radius: 6px;
370
+ }
371
+
372
+ .tooltip-info::before {
373
+ position: absolute;
374
+ content: '';
375
+ height: 0.6em;
376
+ width: 0.6em;
377
+ right: 20px;
378
+ z-index: 999;
379
+ bottom: -4px;
380
+ border: 1px solid #475467;
381
+ border-left: none;
382
+ border-top: none;
383
+ transform: translate(50%) rotate(45deg);
384
+ background-color: #475467;
385
+ }
386
+
387
+ .tooltip-container:hover .tooltip-info {
388
+ top: -40px;
389
+ opacity: 1;
390
+ visibility: visible;
391
+ z-index: 999;
392
+ pointer-events: auto;
393
+ }
394
+ .tooltip {
395
+ position: absolute;
396
+ top: -40;
397
+ left: 0;
398
+ transform: translateX(0%);
399
+ padding: 0.3em 0.6em;
400
+ opacity: 0;
401
+ width: 100%;
402
+ z-index: 999;
403
+ font-size: 12px;
404
+ color: #fff !important;
405
+ pointer-events: none;
406
+ transition: background-color 0.3s, width 0.3s, height 0.3s, color 0.3s;
407
+ border: 1px solid #e55353;
408
+ background-color: #e55353;
409
+ border-radius: 6px;
410
+ color: rgb(34, 34, 34);
411
+ }
412
+
413
+ .tooltip::before {
414
+ position: absolute;
415
+ content: '';
416
+ height: 0.6em;
417
+ width: 0.6em;
418
+ right: 20px;
419
+ z-index: 999;
420
+ bottom: -4px;
421
+ border: 1px solid #e55353;
422
+ border-left: none;
423
+ border-top: none;
424
+ transform: translate(50%) rotate(45deg);
425
+ background-color: #e55353;
426
+ }
427
+
428
+ .tooltip-container:hover .tooltip {
429
+ top: -40px;
430
+ opacity: 1;
431
+ visibility: visible;
432
+ z-index: 999;
433
+ pointer-events: auto;
434
+ }
435
+ }
436
+
437
+ .custom-tooltip-container {
438
+ position: relative;
439
+ display: inline-block;
440
+ }
441
+
442
+ .custom-text {
443
+ font-size: 18px;
444
+ cursor: pointer;
445
+ }
446
+
447
+ .custom-tooltip {
448
+ position: absolute;
449
+ top: 100%;
450
+ left: 20%;
451
+ opacity: 0;
452
+ visibility: hidden;
453
+ font-size: 12px;
454
+ background: #deefff;
455
+ border-color: #bee0ff;
456
+ padding: 5px;
457
+ align-items: center;
458
+ transition: opacity 0.3s, visibility 0.3s, top 0.3s, background 0.3s;
459
+ z-index: 1;
460
+ }
461
+
462
+ .custom-tooltip::before {
463
+ content: '';
464
+ position: absolute;
465
+ bottom: 100%;
466
+ left: 20%;
467
+ /* Center the arrow */
468
+ border-width: 9px;
469
+ /* Slightly larger to act as border */
470
+ border-style: solid;
471
+ border-color: transparent transparent #bee0ff transparent;
472
+ /* Border color */
473
+ transform: translateX(-20%);
474
+ z-index: -1;
475
+ /* Ensure it's behind the ::after pseudo-element */
476
+ }
477
+
478
+ .custom-tooltip::after {
479
+ content: '';
480
+ position: absolute;
481
+ bottom: 100%;
482
+ left: 20%;
483
+ border-width: 8px;
484
+ border-style: solid;
485
+ border-color: transparent transparent #deefff transparent;
486
+ transform: translateX(-20%);
487
+ z-index: 1;
488
+ }
489
+
490
+ .custom-tooltip-container:hover .custom-tooltip {
491
+ top: 100%;
492
+ opacity: 1;
493
+ visibility: visible;
494
+ background: #deefff;
495
+ transform: translate(-20%, 10px);
496
+ }
@@ -0,0 +1,63 @@
1
+ .qbs-tree-list-container {
2
+ display: flex;
3
+ flex-direction: column;
4
+ }
5
+ .qbs-tree-list-container-sub {
6
+ display: flex;
7
+ flex-direction: row;
8
+ align-items: flex-start;
9
+ gap: 1rem; /* Corresponds to gap-4 in Tailwind */
10
+ }
11
+
12
+ .qbs-tree-list-container-sub .no-children {
13
+ margin-left: 1.75rem; /* Corresponds to ml-7 in Tailwind */
14
+ }
15
+ .qbs-tree-list-container-sub-icon {
16
+ margin-top: 0.25rem; /* Corresponds to mt-1 in Tailwind */
17
+ cursor: pointer;
18
+ padding-top: 0.5rem; /* Corresponds to py-2 in Tailwind */
19
+ padding-bottom: 0.5rem;
20
+ transition: transform 0.3s ease; /* Smooth rotation transition */
21
+ }
22
+
23
+ .qbs-tree-list-container-sub-icon.expanded {
24
+ transform: rotate(90deg); /* Corresponds to rotate-90 in Tailwind */
25
+ }
26
+ .qbs-tree-list-container-sub-container {
27
+ display: flex;
28
+ gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
29
+ padding: 0.5rem; /* Corresponds to p-2 in Tailwind */
30
+ flex-direction: row; /* Corresponds to flex-row in Tailwind */
31
+ width: 100%; /* Corresponds to w-full in Tailwind */
32
+ }
33
+
34
+ .qbs-tree-list-container-sub-container.checked {
35
+ background-color: rgba(
36
+ 141,
37
+ 194,
38
+ 240,
39
+ 0.15
40
+ ) !important; /* Corresponds to bg-green-200 in Tailwind */
41
+ }
42
+ .qbs-tree-list-container-sub-container.marginLeft {
43
+ margin-left: 28px; /* Corresponds to ml-2 in Tailwind */
44
+ }
45
+ .qbs-tree-list-container-sub- {
46
+ line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
47
+ font-size: 0.875rem; /* Corresponds to text-sm in Tailwind (14px) */
48
+ }
49
+ .qbs-tree-list-container-child {
50
+ margin-left: 1rem; /* Corresponds to ml-4 in Tailwind */
51
+ margin-top: 0.5rem; /* Corresponds to mt-2 in Tailwind */
52
+ display: flex; /* Corresponds to flex in Tailwind */
53
+ flex-direction: column; /* Corresponds to flex-col in Tailwind */
54
+ gap: 0.5rem; /* Corresponds to gap-2 in Tailwind */
55
+ }
56
+ .qbs-tree-list-container-sub-text {
57
+ line-height: 18px; /* Corresponds to leading-[18px] in Tailwind */
58
+ font-size: 14px; /* Corresponds to text-sm in Tailwind (14px) */
59
+ font-weight: 500;
60
+ letter-spacing: 0.28px;
61
+ font-family: 'Noto Sans';
62
+ color: #3d414a;
63
+ }
@@ -0,0 +1,8 @@
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ @import './components/autocomplete.css';
6
+ @import './components/treedropdown.css';
7
+ @import './components/selectedautocomplete.css';
8
+ @import './components/tooltip.css';
package/docs/App.tsx CHANGED
@@ -1,11 +1,7 @@
1
1
  import React, { useState } from 'react';
2
2
 
3
- import {
4
- AutoComplete,
5
- AutoCompleteWithSelectedList,
6
- AutoCompleteWithTreeStructure,
7
- ExpandableAutoComplete,
8
- } from '../src/index';
3
+ import { AutoComplete, AutoCompleteWithSelectedList, AutoCompleteWithTreeStructure, ExpandableAutoComplete } from '../src/index';
4
+ import ModernTextArea from '../src/ReactTextArea';
9
5
  import TextField from '../src/ReactTextField';
10
6
  import { treeDropData } from './store';
11
7
 
@@ -466,6 +462,8 @@ export default function App() {
466
462
  countOnly={true}
467
463
  />
468
464
  </div>
465
+ <div className="col-md-6">
466
+ <ModernTextArea id='ids' name='name' label='sdfsdfsd' value='' onChange={(e) => console.log(e, 'onchange')} />
469
467
  </div>
470
468
  </div>
471
469
  </React.Fragment>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-core-ts",
3
- "version": "1.3.7",
3
+ "version": "1.3.8",
4
4
  "description": "React Components",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -176,7 +176,7 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
176
176
  />
177
177
  {!hideLabel && (
178
178
  <label
179
- htmlFor="id"
179
+ htmlFor={id}
180
180
  onClick={() => onLabelClick()}
181
181
  className={generateClassName('label')}
182
182
  >