@majoo-ui/react 1.61.12-rc.20 → 1.61.12-rc.22

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 (8) hide show
  1. package/components/accordion/Accordion.d.ts +2 -2
  2. package/components/pageDialog/PageDialog.d.ts +6 -1
  3. package/components/table/Table.d.ts +97 -0
  4. package/config/stitches.config.d.ts +10 -0
  5. package/index.esm.js +220 -128
  6. package/index.umd.js +228 -135
  7. package/package.json +32 -27
  8. package/components/form/components/InputSelect/InputSelect.backup.d.ts +0 -713
package/components/form/components/InputSelect/InputSelect.backup.d.ts DELETED
@@ -1,713 +0,0 @@
1
- import * as React from 'react';
2
- import { ControllerStateAndHelpers, DownshiftProps } from 'downshift';
3
- import { CSS } from '../../../../config/stitches.config';
4
- export declare const SelectContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
5
- sm: "(min-width: 359px)";
6
- md: "(min-width: 767px)";
7
- lg: "(min-width: 1023px)";
8
- xl: "(min-width: 1199px)";
9
- '2xl': "(min-width: 1399px)";
10
- '3xl': "(min-width: 1600px)";
11
- }, import("@stitches/react/types/css-util").CSS<{
12
- sm: "(min-width: 359px)";
13
- md: "(min-width: 767px)";
14
- lg: "(min-width: 1023px)";
15
- xl: "(min-width: 1199px)";
16
- '2xl': "(min-width: 1399px)";
17
- '3xl': "(min-width: 1600px)";
18
- }, {
19
- colors: unknown;
20
- space: unknown;
21
- shadows: unknown;
22
- fontSizes: unknown;
23
- fonts: unknown;
24
- lineHeights: unknown;
25
- letterSpacings: unknown;
26
- radii: unknown;
27
- sizes: unknown;
28
- zIndices: unknown;
29
- }, import("@stitches/react/types/config").DefaultThemeMap, {
30
- m: (value: {
31
- readonly [$$ScaleValue]: "space";
32
- }) => {
33
- margin: {
34
- readonly [$$ScaleValue]: "space";
35
- };
36
- };
37
- mt: (value: {
38
- readonly [$$ScaleValue]: "space";
39
- }) => {
40
- marginTop: {
41
- readonly [$$ScaleValue]: "space";
42
- };
43
- };
44
- mr: (value: {
45
- readonly [$$ScaleValue]: "space";
46
- }) => {
47
- marginRight: {
48
- readonly [$$ScaleValue]: "space";
49
- };
50
- };
51
- mb: (value: {
52
- readonly [$$ScaleValue]: "space";
53
- }) => {
54
- marginBottom: {
55
- readonly [$$ScaleValue]: "space";
56
- };
57
- };
58
- ml: (value: {
59
- readonly [$$ScaleValue]: "space";
60
- }) => {
61
- marginLeft: {
62
- readonly [$$ScaleValue]: "space";
63
- };
64
- };
65
- mx: (value: {
66
- readonly [$$ScaleValue]: "space";
67
- }) => {
68
- marginLeft: {
69
- readonly [$$ScaleValue]: "space";
70
- };
71
- marginRight: {
72
- readonly [$$ScaleValue]: "space";
73
- };
74
- };
75
- my: (value: {
76
- readonly [$$ScaleValue]: "space";
77
- }) => {
78
- marginTop: {
79
- readonly [$$ScaleValue]: "space";
80
- };
81
- marginBottom: {
82
- readonly [$$ScaleValue]: "space";
83
- };
84
- };
85
- size: (value: {
86
- readonly [$$PropertyValue]: "width";
87
- }) => {
88
- width: {
89
- readonly [$$PropertyValue]: "width";
90
- };
91
- height: {
92
- readonly [$$PropertyValue]: "width";
93
- };
94
- };
95
- subtleColor: (value: string) => {
96
- color: string;
97
- backgroundColor: string;
98
- };
99
- }>>;
100
- export declare const SelectBox: import("@stitches/react/types/styled-component").StyledComponent<any, {
101
- size?: "sm" | "lg" | undefined;
102
- disabled?: boolean | "true" | undefined;
103
- readOnly?: boolean | "true" | undefined;
104
- isInvalid?: boolean | "true" | undefined;
105
- }, {
106
- sm: "(min-width: 359px)";
107
- md: "(min-width: 767px)";
108
- lg: "(min-width: 1023px)";
109
- xl: "(min-width: 1199px)";
110
- '2xl': "(min-width: 1399px)";
111
- '3xl': "(min-width: 1600px)";
112
- }, import("@stitches/react/types/css-util").CSS<{
113
- sm: "(min-width: 359px)";
114
- md: "(min-width: 767px)";
115
- lg: "(min-width: 1023px)";
116
- xl: "(min-width: 1199px)";
117
- '2xl': "(min-width: 1399px)";
118
- '3xl': "(min-width: 1600px)";
119
- }, {
120
- colors: unknown;
121
- space: unknown;
122
- shadows: unknown;
123
- fontSizes: unknown;
124
- fonts: unknown;
125
- lineHeights: unknown;
126
- letterSpacings: unknown;
127
- radii: unknown;
128
- sizes: unknown;
129
- zIndices: unknown;
130
- }, import("@stitches/react/types/config").DefaultThemeMap, {
131
- m: (value: {
132
- readonly [$$ScaleValue]: "space";
133
- }) => {
134
- margin: {
135
- readonly [$$ScaleValue]: "space";
136
- };
137
- };
138
- mt: (value: {
139
- readonly [$$ScaleValue]: "space";
140
- }) => {
141
- marginTop: {
142
- readonly [$$ScaleValue]: "space";
143
- };
144
- };
145
- mr: (value: {
146
- readonly [$$ScaleValue]: "space";
147
- }) => {
148
- marginRight: {
149
- readonly [$$ScaleValue]: "space";
150
- };
151
- };
152
- mb: (value: {
153
- readonly [$$ScaleValue]: "space";
154
- }) => {
155
- marginBottom: {
156
- readonly [$$ScaleValue]: "space";
157
- };
158
- };
159
- ml: (value: {
160
- readonly [$$ScaleValue]: "space";
161
- }) => {
162
- marginLeft: {
163
- readonly [$$ScaleValue]: "space";
164
- };
165
- };
166
- mx: (value: {
167
- readonly [$$ScaleValue]: "space";
168
- }) => {
169
- marginLeft: {
170
- readonly [$$ScaleValue]: "space";
171
- };
172
- marginRight: {
173
- readonly [$$ScaleValue]: "space";
174
- };
175
- };
176
- my: (value: {
177
- readonly [$$ScaleValue]: "space";
178
- }) => {
179
- marginTop: {
180
- readonly [$$ScaleValue]: "space";
181
- };
182
- marginBottom: {
183
- readonly [$$ScaleValue]: "space";
184
- };
185
- };
186
- size: (value: {
187
- readonly [$$PropertyValue]: "width";
188
- }) => {
189
- width: {
190
- readonly [$$PropertyValue]: "width";
191
- };
192
- height: {
193
- readonly [$$PropertyValue]: "width";
194
- };
195
- };
196
- subtleColor: (value: string) => {
197
- color: string;
198
- backgroundColor: string;
199
- };
200
- }>>;
201
- export declare const IconContainer: import("@stitches/react/types/styled-component").StyledComponent<"div", {
202
- disabled?: boolean | "true" | undefined;
203
- }, {
204
- sm: "(min-width: 359px)";
205
- md: "(min-width: 767px)";
206
- lg: "(min-width: 1023px)";
207
- xl: "(min-width: 1199px)";
208
- '2xl': "(min-width: 1399px)";
209
- '3xl': "(min-width: 1600px)";
210
- }, import("@stitches/react/types/css-util").CSS<{
211
- sm: "(min-width: 359px)";
212
- md: "(min-width: 767px)";
213
- lg: "(min-width: 1023px)";
214
- xl: "(min-width: 1199px)";
215
- '2xl': "(min-width: 1399px)";
216
- '3xl': "(min-width: 1600px)";
217
- }, {
218
- colors: unknown;
219
- space: unknown;
220
- shadows: unknown;
221
- fontSizes: unknown;
222
- fonts: unknown;
223
- lineHeights: unknown;
224
- letterSpacings: unknown;
225
- radii: unknown;
226
- sizes: unknown;
227
- zIndices: unknown;
228
- }, import("@stitches/react/types/config").DefaultThemeMap, {
229
- m: (value: {
230
- readonly [$$ScaleValue]: "space";
231
- }) => {
232
- margin: {
233
- readonly [$$ScaleValue]: "space";
234
- };
235
- };
236
- mt: (value: {
237
- readonly [$$ScaleValue]: "space";
238
- }) => {
239
- marginTop: {
240
- readonly [$$ScaleValue]: "space";
241
- };
242
- };
243
- mr: (value: {
244
- readonly [$$ScaleValue]: "space";
245
- }) => {
246
- marginRight: {
247
- readonly [$$ScaleValue]: "space";
248
- };
249
- };
250
- mb: (value: {
251
- readonly [$$ScaleValue]: "space";
252
- }) => {
253
- marginBottom: {
254
- readonly [$$ScaleValue]: "space";
255
- };
256
- };
257
- ml: (value: {
258
- readonly [$$ScaleValue]: "space";
259
- }) => {
260
- marginLeft: {
261
- readonly [$$ScaleValue]: "space";
262
- };
263
- };
264
- mx: (value: {
265
- readonly [$$ScaleValue]: "space";
266
- }) => {
267
- marginLeft: {
268
- readonly [$$ScaleValue]: "space";
269
- };
270
- marginRight: {
271
- readonly [$$ScaleValue]: "space";
272
- };
273
- };
274
- my: (value: {
275
- readonly [$$ScaleValue]: "space";
276
- }) => {
277
- marginTop: {
278
- readonly [$$ScaleValue]: "space";
279
- };
280
- marginBottom: {
281
- readonly [$$ScaleValue]: "space";
282
- };
283
- };
284
- size: (value: {
285
- readonly [$$PropertyValue]: "width";
286
- }) => {
287
- width: {
288
- readonly [$$PropertyValue]: "width";
289
- };
290
- height: {
291
- readonly [$$PropertyValue]: "width";
292
- };
293
- };
294
- subtleColor: (value: string) => {
295
- color: string;
296
- backgroundColor: string;
297
- };
298
- }>>;
299
- export declare const OptionWrapper: import("@stitches/react/types/styled-component").StyledComponent<"div", {
300
- placement?: "bottom" | "top" | undefined;
301
- withFooter?: boolean | "true" | undefined;
302
- }, {
303
- sm: "(min-width: 359px)";
304
- md: "(min-width: 767px)";
305
- lg: "(min-width: 1023px)";
306
- xl: "(min-width: 1199px)";
307
- '2xl': "(min-width: 1399px)";
308
- '3xl': "(min-width: 1600px)";
309
- }, import("@stitches/react/types/css-util").CSS<{
310
- sm: "(min-width: 359px)";
311
- md: "(min-width: 767px)";
312
- lg: "(min-width: 1023px)";
313
- xl: "(min-width: 1199px)";
314
- '2xl': "(min-width: 1399px)";
315
- '3xl': "(min-width: 1600px)";
316
- }, {
317
- colors: unknown;
318
- space: unknown;
319
- shadows: unknown;
320
- fontSizes: unknown;
321
- fonts: unknown;
322
- lineHeights: unknown;
323
- letterSpacings: unknown;
324
- radii: unknown;
325
- sizes: unknown;
326
- zIndices: unknown;
327
- }, import("@stitches/react/types/config").DefaultThemeMap, {
328
- m: (value: {
329
- readonly [$$ScaleValue]: "space";
330
- }) => {
331
- margin: {
332
- readonly [$$ScaleValue]: "space";
333
- };
334
- };
335
- mt: (value: {
336
- readonly [$$ScaleValue]: "space";
337
- }) => {
338
- marginTop: {
339
- readonly [$$ScaleValue]: "space";
340
- };
341
- };
342
- mr: (value: {
343
- readonly [$$ScaleValue]: "space";
344
- }) => {
345
- marginRight: {
346
- readonly [$$ScaleValue]: "space";
347
- };
348
- };
349
- mb: (value: {
350
- readonly [$$ScaleValue]: "space";
351
- }) => {
352
- marginBottom: {
353
- readonly [$$ScaleValue]: "space";
354
- };
355
- };
356
- ml: (value: {
357
- readonly [$$ScaleValue]: "space";
358
- }) => {
359
- marginLeft: {
360
- readonly [$$ScaleValue]: "space";
361
- };
362
- };
363
- mx: (value: {
364
- readonly [$$ScaleValue]: "space";
365
- }) => {
366
- marginLeft: {
367
- readonly [$$ScaleValue]: "space";
368
- };
369
- marginRight: {
370
- readonly [$$ScaleValue]: "space";
371
- };
372
- };
373
- my: (value: {
374
- readonly [$$ScaleValue]: "space";
375
- }) => {
376
- marginTop: {
377
- readonly [$$ScaleValue]: "space";
378
- };
379
- marginBottom: {
380
- readonly [$$ScaleValue]: "space";
381
- };
382
- };
383
- size: (value: {
384
- readonly [$$PropertyValue]: "width";
385
- }) => {
386
- width: {
387
- readonly [$$PropertyValue]: "width";
388
- };
389
- height: {
390
- readonly [$$PropertyValue]: "width";
391
- };
392
- };
393
- subtleColor: (value: string) => {
394
- color: string;
395
- backgroundColor: string;
396
- };
397
- }>>;
398
- export declare const SelectOption: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
399
- sm: "(min-width: 359px)";
400
- md: "(min-width: 767px)";
401
- lg: "(min-width: 1023px)";
402
- xl: "(min-width: 1199px)";
403
- '2xl': "(min-width: 1399px)";
404
- '3xl': "(min-width: 1600px)";
405
- }, import("@stitches/react/types/css-util").CSS<{
406
- sm: "(min-width: 359px)";
407
- md: "(min-width: 767px)";
408
- lg: "(min-width: 1023px)";
409
- xl: "(min-width: 1199px)";
410
- '2xl': "(min-width: 1399px)";
411
- '3xl': "(min-width: 1600px)";
412
- }, {
413
- colors: unknown;
414
- space: unknown;
415
- shadows: unknown;
416
- fontSizes: unknown;
417
- fonts: unknown;
418
- lineHeights: unknown;
419
- letterSpacings: unknown;
420
- radii: unknown;
421
- sizes: unknown;
422
- zIndices: unknown;
423
- }, import("@stitches/react/types/config").DefaultThemeMap, {
424
- m: (value: {
425
- readonly [$$ScaleValue]: "space";
426
- }) => {
427
- margin: {
428
- readonly [$$ScaleValue]: "space";
429
- };
430
- };
431
- mt: (value: {
432
- readonly [$$ScaleValue]: "space";
433
- }) => {
434
- marginTop: {
435
- readonly [$$ScaleValue]: "space";
436
- };
437
- };
438
- mr: (value: {
439
- readonly [$$ScaleValue]: "space";
440
- }) => {
441
- marginRight: {
442
- readonly [$$ScaleValue]: "space";
443
- };
444
- };
445
- mb: (value: {
446
- readonly [$$ScaleValue]: "space";
447
- }) => {
448
- marginBottom: {
449
- readonly [$$ScaleValue]: "space";
450
- };
451
- };
452
- ml: (value: {
453
- readonly [$$ScaleValue]: "space";
454
- }) => {
455
- marginLeft: {
456
- readonly [$$ScaleValue]: "space";
457
- };
458
- };
459
- mx: (value: {
460
- readonly [$$ScaleValue]: "space";
461
- }) => {
462
- marginLeft: {
463
- readonly [$$ScaleValue]: "space";
464
- };
465
- marginRight: {
466
- readonly [$$ScaleValue]: "space";
467
- };
468
- };
469
- my: (value: {
470
- readonly [$$ScaleValue]: "space";
471
- }) => {
472
- marginTop: {
473
- readonly [$$ScaleValue]: "space";
474
- };
475
- marginBottom: {
476
- readonly [$$ScaleValue]: "space";
477
- };
478
- };
479
- size: (value: {
480
- readonly [$$PropertyValue]: "width";
481
- }) => {
482
- width: {
483
- readonly [$$PropertyValue]: "width";
484
- };
485
- height: {
486
- readonly [$$PropertyValue]: "width";
487
- };
488
- };
489
- subtleColor: (value: string) => {
490
- color: string;
491
- backgroundColor: string;
492
- };
493
- }>>;
494
- export declare const SelectItem: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
495
- sm: "(min-width: 359px)";
496
- md: "(min-width: 767px)";
497
- lg: "(min-width: 1023px)";
498
- xl: "(min-width: 1199px)";
499
- '2xl': "(min-width: 1399px)";
500
- '3xl': "(min-width: 1600px)";
501
- }, import("@stitches/react/types/css-util").CSS<{
502
- sm: "(min-width: 359px)";
503
- md: "(min-width: 767px)";
504
- lg: "(min-width: 1023px)";
505
- xl: "(min-width: 1199px)";
506
- '2xl': "(min-width: 1399px)";
507
- '3xl': "(min-width: 1600px)";
508
- }, {
509
- colors: unknown;
510
- space: unknown;
511
- shadows: unknown;
512
- fontSizes: unknown;
513
- fonts: unknown;
514
- lineHeights: unknown;
515
- letterSpacings: unknown;
516
- radii: unknown;
517
- sizes: unknown;
518
- zIndices: unknown;
519
- }, import("@stitches/react/types/config").DefaultThemeMap, {
520
- m: (value: {
521
- readonly [$$ScaleValue]: "space";
522
- }) => {
523
- margin: {
524
- readonly [$$ScaleValue]: "space";
525
- };
526
- };
527
- mt: (value: {
528
- readonly [$$ScaleValue]: "space";
529
- }) => {
530
- marginTop: {
531
- readonly [$$ScaleValue]: "space";
532
- };
533
- };
534
- mr: (value: {
535
- readonly [$$ScaleValue]: "space";
536
- }) => {
537
- marginRight: {
538
- readonly [$$ScaleValue]: "space";
539
- };
540
- };
541
- mb: (value: {
542
- readonly [$$ScaleValue]: "space";
543
- }) => {
544
- marginBottom: {
545
- readonly [$$ScaleValue]: "space";
546
- };
547
- };
548
- ml: (value: {
549
- readonly [$$ScaleValue]: "space";
550
- }) => {
551
- marginLeft: {
552
- readonly [$$ScaleValue]: "space";
553
- };
554
- };
555
- mx: (value: {
556
- readonly [$$ScaleValue]: "space";
557
- }) => {
558
- marginLeft: {
559
- readonly [$$ScaleValue]: "space";
560
- };
561
- marginRight: {
562
- readonly [$$ScaleValue]: "space";
563
- };
564
- };
565
- my: (value: {
566
- readonly [$$ScaleValue]: "space";
567
- }) => {
568
- marginTop: {
569
- readonly [$$ScaleValue]: "space";
570
- };
571
- marginBottom: {
572
- readonly [$$ScaleValue]: "space";
573
- };
574
- };
575
- size: (value: {
576
- readonly [$$PropertyValue]: "width";
577
- }) => {
578
- width: {
579
- readonly [$$PropertyValue]: "width";
580
- };
581
- height: {
582
- readonly [$$PropertyValue]: "width";
583
- };
584
- };
585
- subtleColor: (value: string) => {
586
- color: string;
587
- backgroundColor: string;
588
- };
589
- }>>;
590
- export declare const SelectInputSearch: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLInputElement>>;
591
- export declare type Option = {
592
- value: string;
593
- name: string;
594
- isDisabled?: boolean;
595
- render?: (selectedItem?: Option | null) => React.ReactNode;
596
- };
597
- interface InputSelectProps extends Omit<DownshiftProps<Option>, 'initialSelectedItem' | 'defaultValue'> {
598
- /**
599
- * Array of options.<br/>
600
- * type Option = {<br/>
601
- * &nbsp;&nbsp;&nbsp;&nbsp;value: string;<br/>
602
- * &nbsp;&nbsp;&nbsp;&nbsp;name: string;<br/>
603
- * &nbsp;&nbsp;&nbsp;&nbsp;isDisabled?: boolean;<br/>
604
- * &nbsp;&nbsp;&nbsp;&nbsp;render?: (selectedItem?: Option | null) => React.ReactNode;<br/>
605
- * }<br/>
606
- */
607
- option: Option[] | any[];
608
- /**
609
- * Specify the InputSelect placeholder.
610
- */
611
- placeholder?: string;
612
- /**
613
- * Specify the search input placeholder.
614
- */
615
- searchPlaceholder?: string;
616
- /**
617
- * If true, search field will be visible on dropdown layout.
618
- */
619
- embedSearch?: boolean;
620
- /**
621
- * Callback fired when the selected option is updated.
622
- */
623
- onChange?: (selectedItem: Option | null, stateAndHelpers: ControllerStateAndHelpers<Option>) => void;
624
- /**
625
- * Specify the input size.
626
- */
627
- size?: 'sm' | 'lg';
628
- /**
629
- * If true, the component is disabled.
630
- */
631
- disabled?: boolean;
632
- /**
633
- * If true, the trigger component will become InputText.
634
- */
635
- search?: boolean;
636
- /**
637
- * Specify the InputSelect value.
638
- */
639
- value?: Option;
640
- /**
641
- * If true, then it will hide the arrow icon.
642
- */
643
- hideArrowicon?: boolean;
644
- /**
645
- * Specify the arrow icon color.
646
- */
647
- iconColor?: string;
648
- /**
649
- * If true, the search icon is shown.
650
- */
651
- showLeadingIcon?: boolean;
652
- /**
653
- * Specify the options view placement.
654
- */
655
- placement?: 'bottom' | 'top';
656
- /**
657
- * This string is used to build the options array as 'value'.
658
- */
659
- valueSelector?: string;
660
- /**
661
- * This string is used to build the options array as 'name'.
662
- */
663
- textSelector?: string;
664
- /**
665
- * Array of disabled options.
666
- */
667
- disabledOptions?: string[];
668
- /**
669
- * Function executed when infinite scroll triggered.<br/>
670
- * interface FetchData { <br/>
671
- * &nbsp;&nbsp;&nbsp;&nbsp;query?: string;<br/>
672
- * &nbsp;&nbsp;&nbsp;&nbsp;pageIndex?: number;<br/>
673
- * }
674
- */
675
- fetchData?(props: {
676
- query?: string;
677
- pageIndex?: number;
678
- }): void;
679
- /**
680
- * Called whenever the search value changes.
681
- */
682
- onSearch?: (value?: string) => void;
683
- /**
684
- * Loading status of InputSelect.
685
- */
686
- isLoading?: boolean;
687
- /**
688
- * If true, the input will become read-only state.
689
- */
690
- readOnly?: boolean;
691
- /**
692
- * If true, the input will become invalid state.
693
- */
694
- isInvalid?: boolean;
695
- /**
696
- * If true, the tooltip will shown when the component hovered
697
- */
698
- showTooltip?: boolean;
699
- /**
700
- * Deprecated in v1.46.7. Use 'hideArrowIcon' instead.
701
- */
702
- noOptionIcon?: boolean;
703
- /**
704
- * Additional CSS styles
705
- */
706
- css?: CSS;
707
- /**
708
- * Render custom footer inside option. If onClick not working on mobile, you can using both onClick and onTouchStart.
709
- */
710
- renderFooter?: () => React.ReactNode;
711
- }
712
- export declare function InputSelect({ option, onChange, value, placeholder, searchPlaceholder, embedSearch, size, disabled, search, iconColor, hideArrowicon, showLeadingIcon, placement, disabledOptions, textSelector, valueSelector, readOnly, isInvalid, noOptionIcon, fetchData, onSearch, isLoading, showTooltip, css, renderFooter, ...props }: InputSelectProps): JSX.Element;
713
- export default InputSelect;