@aws-amplify/ui-react 2.18.0 → 2.18.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/dist/esm/components/Authenticator/Router/Router.js +1 -1
- package/dist/esm/components/Geo/{Geocoder → LocationSearch}/index.js +1 -1
- package/dist/esm/components/{AmplifyProvider → ThemeProvider}/AmplifyContext.js +0 -0
- package/dist/esm/components/{AmplifyProvider → ThemeProvider}/index.js +1 -1
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/hooks/useAmplify.js +1 -1
- package/dist/esm/hooks/useTheme.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/primitives/SliderField/SliderField.js +1 -1
- package/dist/esm/primitives/shared/styleUtils.js +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +117 -138
- package/dist/types/components/Geo/{Geocoder → LocationSearch}/index.d.ts +14 -13
- package/dist/types/components/Geo/index.d.ts +1 -1
- package/dist/types/components/{AmplifyProvider → ThemeProvider}/AmplifyContext.d.ts +0 -0
- package/dist/types/components/{AmplifyProvider → ThemeProvider}/index.d.ts +3 -2
- package/dist/types/components/index.d.ts +1 -1
- package/dist/types/hooks/useTheme.d.ts +1 -1
- package/dist/types/primitives/types/expander.d.ts +2 -1
- package/package.json +4 -4
package/dist/styles.css
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Do not edit directly
|
|
7
|
-
* Generated on
|
|
7
|
+
* Generated on Thu, 26 May 2022 23:17:06 GMT
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
10
|
:root, [data-amplify-theme] {
|
|
@@ -382,17 +382,22 @@
|
|
|
382
382
|
--amplify-colors-brand-primary-20: var(--amplify-colors-teal-20);
|
|
383
383
|
--amplify-colors-brand-primary-10: var(--amplify-colors-teal-10);
|
|
384
384
|
--amplify-components-togglebutton-link-pressed-hover-background-color: var(--amplify-colors-transparent);
|
|
385
|
+
--amplify-components-togglebutton-link-pressed-hover-color: var(--amplify-colors-overlay-90);
|
|
386
|
+
--amplify-components-togglebutton-link-pressed-focus-color: var(--amplify-colors-overlay-90);
|
|
387
|
+
--amplify-components-togglebutton-link-pressed-focus-background-color: var(--amplify-colors-transparent);
|
|
385
388
|
--amplify-components-togglebutton-link-pressed-color: var(--amplify-colors-overlay-90);
|
|
386
389
|
--amplify-components-togglebutton-link-pressed-background-color: var(--amplify-colors-transparent);
|
|
390
|
+
--amplify-components-togglebutton-link-disabled-background-color: var(--amplify-colors-transparent);
|
|
387
391
|
--amplify-components-togglebutton-link-focus-color: var(--amplify-colors-overlay-50);
|
|
388
392
|
--amplify-components-togglebutton-link-focus-background-color: var(--amplify-colors-transparent);
|
|
389
393
|
--amplify-components-togglebutton-link-hover-color: var(--amplify-colors-overlay-50);
|
|
390
394
|
--amplify-components-togglebutton-link-hover-background-color: var(--amplify-colors-transparent);
|
|
391
395
|
--amplify-components-togglebutton-link-color: var(--amplify-colors-overlay-50);
|
|
396
|
+
--amplify-components-togglebutton-link-background-color: var(--amplify-colors-transparent);
|
|
397
|
+
--amplify-components-togglebutton-primary-pressed-hover-color: var(--amplify-colors-white);
|
|
398
|
+
--amplify-components-togglebutton-primary-pressed-focus-color: var(--amplify-colors-white);
|
|
392
399
|
--amplify-components-togglebutton-primary-pressed-color: var(--amplify-colors-white);
|
|
393
|
-
--amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-overlay-50);
|
|
394
400
|
--amplify-components-togglebutton-primary-hover-background-color: var(--amplify-colors-overlay-10);
|
|
395
|
-
--amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-overlay-50);
|
|
396
401
|
--amplify-components-togglebutton-primary-focus-background-color: var(--amplify-colors-transparent);
|
|
397
402
|
--amplify-components-togglebutton-primary-border-width: var(--amplify-border-widths-small);
|
|
398
403
|
--amplify-components-togglebutton-primary-background-color: var(--amplify-colors-transparent);
|
|
@@ -400,9 +405,7 @@
|
|
|
400
405
|
--amplify-components-togglebutton-pressed-background-color: var(--amplify-colors-overlay-20);
|
|
401
406
|
--amplify-components-togglebutton-disabled-background-color: var(--amplify-colors-transparent);
|
|
402
407
|
--amplify-components-togglebutton-active-background-color: var(--amplify-colors-transparent);
|
|
403
|
-
--amplify-components-togglebutton-focus-color: var(--amplify-colors-overlay-50);
|
|
404
408
|
--amplify-components-togglebutton-hover-background-color: var(--amplify-colors-overlay-10);
|
|
405
|
-
--amplify-components-togglebutton-color: var(--amplify-colors-overlay-50);
|
|
406
409
|
--amplify-components-tabs-item-transition-duration: var(--amplify-time-medium);
|
|
407
410
|
--amplify-components-tabs-item-padding-horizontal: var(--amplify-space-medium);
|
|
408
411
|
--amplify-components-tabs-item-padding-vertical: var(--amplify-space-small);
|
|
@@ -442,7 +445,7 @@
|
|
|
442
445
|
--amplify-components-switchfield-small-font-size: var(--amplify-font-sizes-small);
|
|
443
446
|
--amplify-components-switchfield-large-font-size: var(--amplify-font-sizes-large);
|
|
444
447
|
--amplify-components-switchfield-disabled-opacity: var(--amplify-opacities-60);
|
|
445
|
-
--amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-
|
|
448
|
+
--amplify-components-sliderfield-thumb-border-width: var(--amplify-border-widths-medium);
|
|
446
449
|
--amplify-components-sliderfield-padding-block: var(--amplify-space-xs);
|
|
447
450
|
--amplify-components-select-icon-wrapper-right: var(--amplify-space-medium);
|
|
448
451
|
--amplify-components-select-padding-inline-end: var(--amplify-space-xxl);
|
|
@@ -634,6 +637,7 @@
|
|
|
634
637
|
--amplify-components-alert-padding-inline: var(--amplify-space-medium);
|
|
635
638
|
--amplify-components-alert-padding-block: var(--amplify-space-small);
|
|
636
639
|
--amplify-colors-border-focus: var(--amplify-colors-brand-primary-100);
|
|
640
|
+
--amplify-colors-border-pressed: var(--amplify-colors-brand-primary-100);
|
|
637
641
|
--amplify-colors-border-disabled: var(--amplify-colors-border-tertiary);
|
|
638
642
|
--amplify-colors-background-disabled: var(--amplify-colors-background-tertiary);
|
|
639
643
|
--amplify-colors-font-active: var(--amplify-colors-brand-primary-100);
|
|
@@ -641,13 +645,16 @@
|
|
|
641
645
|
--amplify-colors-font-hover: var(--amplify-colors-brand-primary-90);
|
|
642
646
|
--amplify-colors-font-interactive: var(--amplify-colors-brand-primary-80);
|
|
643
647
|
--amplify-colors-font-disabled: var(--amplify-colors-font-tertiary);
|
|
648
|
+
--amplify-components-togglebutton-primary-pressed-hover-box-shadow: var(--amplify-colors-brand-primary-60);
|
|
644
649
|
--amplify-components-togglebutton-primary-pressed-hover-background-color: var(--amplify-colors-brand-primary-60);
|
|
645
650
|
--amplify-components-togglebutton-primary-pressed-hover-border-color: var(--amplify-colors-brand-primary-60);
|
|
646
651
|
--amplify-components-togglebutton-primary-pressed-border-color: var(--amplify-colors-brand-primary-80);
|
|
647
652
|
--amplify-components-togglebutton-primary-pressed-background-color: var(--amplify-colors-brand-primary-80);
|
|
648
|
-
--amplify-components-togglebutton-primary-
|
|
653
|
+
--amplify-components-togglebutton-primary-hover-color: var(--amplify-colors-font-primary);
|
|
654
|
+
--amplify-components-togglebutton-primary-focus-color: var(--amplify-colors-font-primary);
|
|
649
655
|
--amplify-components-togglebutton-pressed-color: var(--amplify-colors-font-primary);
|
|
650
|
-
--amplify-components-togglebutton-
|
|
656
|
+
--amplify-components-togglebutton-focus-color: var(--amplify-colors-font-primary);
|
|
657
|
+
--amplify-components-togglebutton-color: var(--amplify-colors-font-primary);
|
|
651
658
|
--amplify-components-togglebutton-border-color: var(--amplify-colors-border-primary);
|
|
652
659
|
--amplify-components-text-info-color: var(--amplify-colors-font-info);
|
|
653
660
|
--amplify-components-text-success-color: var(--amplify-colors-font-success);
|
|
@@ -791,8 +798,12 @@
|
|
|
791
798
|
--amplify-components-togglebutton-primary-pressed-focus-border-color: var(--amplify-colors-border-focus);
|
|
792
799
|
--amplify-components-togglebutton-primary-pressed-focus-background-color: var(--amplify-colors-border-focus);
|
|
793
800
|
--amplify-components-togglebutton-primary-disabled-color: var(--amplify-colors-font-disabled);
|
|
801
|
+
--amplify-components-togglebutton-primary-disabled-background-color: var(--amplify-colors-background-disabled);
|
|
802
|
+
--amplify-components-togglebutton-primary-disabled-border-color: var(--amplify-colors-border-disabled);
|
|
794
803
|
--amplify-components-togglebutton-primary-focus-border-color: var(--amplify-colors-border-focus);
|
|
804
|
+
--amplify-components-togglebutton-pressed-border-color: var(--amplify-colors-border-pressed);
|
|
795
805
|
--amplify-components-togglebutton-disabled-color: var(--amplify-colors-font-disabled);
|
|
806
|
+
--amplify-components-togglebutton-disabled-border-color: var(--amplify-colors-border-disabled);
|
|
796
807
|
--amplify-components-togglebutton-focus-border-color: var(--amplify-colors-border-focus);
|
|
797
808
|
--amplify-components-tabs-item-disabled-color: var(--amplify-colors-font-disabled);
|
|
798
809
|
--amplify-components-tabs-item-active-border-color: var(--amplify-colors-font-interactive);
|
|
@@ -800,7 +811,8 @@
|
|
|
800
811
|
--amplify-components-tabs-item-focus-color: var(--amplify-colors-font-focus);
|
|
801
812
|
--amplify-components-tabs-item-hover-color: var(--amplify-colors-font-hover);
|
|
802
813
|
--amplify-components-switchfield-focused-shadow: 0px 0px 0px 2px var(--amplify-colors-border-focus);
|
|
803
|
-
--amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0
|
|
814
|
+
--amplify-components-sliderfield-thumb-focus-box-shadow: 0 0 0 2px var(--amplify-colors-border-focus);
|
|
815
|
+
--amplify-components-sliderfield-thumb-focus-border-color: var(--amplify-colors-border-focus);
|
|
804
816
|
--amplify-components-sliderfield-thumb-hover-border-color: var(--amplify-colors-border-focus);
|
|
805
817
|
--amplify-components-sliderfield-thumb-disabled-background-color: var(--amplify-colors-background-disabled);
|
|
806
818
|
--amplify-components-sliderfield-range-disabled-background-color: var(--amplify-colors-background-disabled);
|
|
@@ -3030,6 +3042,7 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3030
3042
|
}
|
|
3031
3043
|
|
|
3032
3044
|
.amplify-sliderfield__thumb:focus {
|
|
3045
|
+
border-color: var(--amplify-components-sliderfield-thumb-focus-border-color);
|
|
3033
3046
|
box-shadow: var(--amplify-components-sliderfield-thumb-focus-box-shadow);
|
|
3034
3047
|
}
|
|
3035
3048
|
|
|
@@ -3415,9 +3428,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3415
3428
|
}
|
|
3416
3429
|
|
|
3417
3430
|
.amplify-togglebutton {
|
|
3418
|
-
background-color: var(--amplify-internal-togglebutton-background-color);
|
|
3419
|
-
border-color: var(--amplify-internal-togglebutton-border-color);
|
|
3420
|
-
color: var(--amplify-internal-togglebutton-color);
|
|
3421
3431
|
--amplify-internal-togglebutton-background-color: initial;
|
|
3422
3432
|
--amplify-internal-togglebutton-border-color: var(
|
|
3423
3433
|
--amplify-components-togglebutton-border-color
|
|
@@ -3425,9 +3435,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3425
3435
|
--amplify-internal-togglebutton-color: var(
|
|
3426
3436
|
--amplify-components-togglebutton-color
|
|
3427
3437
|
);
|
|
3428
|
-
--amplify-internal-togglebutton-
|
|
3429
|
-
|
|
3430
|
-
);
|
|
3438
|
+
background-color: var(--amplify-internal-togglebutton-background-color);
|
|
3439
|
+
border-color: var(--amplify-internal-togglebutton-border-color);
|
|
3440
|
+
color: var(--amplify-internal-togglebutton-color);
|
|
3431
3441
|
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3432
3442
|
--amplify-internal-togglebutton-background-color
|
|
3433
3443
|
);
|
|
@@ -3437,6 +3447,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3437
3447
|
--amplify-internal-togglebutton-focus-color: var(
|
|
3438
3448
|
--amplify-components-togglebutton-focus-color
|
|
3439
3449
|
);
|
|
3450
|
+
--amplify-internal-togglebutton-hover-background-color: var(
|
|
3451
|
+
--amplify-components-togglebutton-hover-background-color
|
|
3452
|
+
);
|
|
3453
|
+
--amplify-internal-togglebutton-hover-border-color: var(
|
|
3454
|
+
--amplify-internal-togglebutton-border-color
|
|
3455
|
+
);
|
|
3456
|
+
--amplify-internal-togglebutton-hover-color: var(
|
|
3457
|
+
--amplify-internal-togglebutton-color
|
|
3458
|
+
);
|
|
3440
3459
|
--amplify-internal-togglebutton-active-background-color: var(
|
|
3441
3460
|
--amplify-components-togglebutton-active-background-color
|
|
3442
3461
|
);
|
|
@@ -3451,21 +3470,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3451
3470
|
);
|
|
3452
3471
|
}
|
|
3453
3472
|
|
|
3454
|
-
.amplify-togglebutton:hover {
|
|
3455
|
-
background-color: var(--amplify-internal-togglebutton-hover-background-color);
|
|
3456
|
-
border-color: var(--amplify-internal-togglebutton-border-color);
|
|
3457
|
-
color: var(--amplify-internal-togglebutton-color);
|
|
3458
|
-
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3459
|
-
--amplify-internal-togglebutton-hover-background-color
|
|
3460
|
-
);
|
|
3461
|
-
}
|
|
3462
|
-
|
|
3463
3473
|
.amplify-togglebutton:focus {
|
|
3464
3474
|
background-color: var(--amplify-internal-togglebutton-focus-background-color);
|
|
3465
3475
|
border-color: var(--amplify-internal-togglebutton-focus-border-color);
|
|
3466
3476
|
color: var(--amplify-internal-togglebutton-focus-color);
|
|
3467
3477
|
}
|
|
3468
3478
|
|
|
3479
|
+
.amplify-togglebutton:hover {
|
|
3480
|
+
background-color: var(--amplify-internal-togglebutton-hover-background-color);
|
|
3481
|
+
border-color: var(--amplify-internal-togglebutton-hover-border-color);
|
|
3482
|
+
color: var(--amplify-internal-togglebutton-hover-color);
|
|
3483
|
+
}
|
|
3484
|
+
|
|
3469
3485
|
.amplify-togglebutton:active {
|
|
3470
3486
|
background-color: var(--amplify-internal-togglebutton-active-background-color);
|
|
3471
3487
|
}
|
|
@@ -3477,24 +3493,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3477
3493
|
}
|
|
3478
3494
|
|
|
3479
3495
|
.amplify-togglebutton--pressed {
|
|
3496
|
+
--amplify-internal-togglebutton-border-color: var(
|
|
3497
|
+
--amplify-components-togglebutton-pressed-border-color
|
|
3498
|
+
);
|
|
3480
3499
|
--amplify-internal-togglebutton-background-color: var(
|
|
3481
3500
|
--amplify-components-togglebutton-pressed-background-color
|
|
3482
3501
|
);
|
|
3483
3502
|
--amplify-internal-togglebutton-color: var(
|
|
3484
3503
|
--amplify-components-togglebutton-pressed-color
|
|
3485
3504
|
);
|
|
3486
|
-
}
|
|
3487
|
-
|
|
3488
|
-
.amplify-togglebutton--pressed:hover:not(:disabled) {
|
|
3489
3505
|
--amplify-internal-togglebutton-hover-background-color: var(
|
|
3490
3506
|
--amplify-components-togglebutton-pressed-hover-background-color
|
|
3491
3507
|
);
|
|
3492
|
-
}
|
|
3493
|
-
|
|
3494
|
-
.amplify-togglebutton--pressed:disabled {
|
|
3495
3508
|
--amplify-internal-togglebutton-disabled-background-color: var(
|
|
3496
3509
|
--amplify-components-togglebutton-pressed-background-color
|
|
3497
3510
|
);
|
|
3511
|
+
--amplify-internal-togglebutton-disabled-border-color: var(
|
|
3512
|
+
--amplify-components-togglebutton-pressed-border-color
|
|
3513
|
+
);
|
|
3498
3514
|
--amplify-internal-togglebutton-disabled-color: var(
|
|
3499
3515
|
--amplify-components-togglebutton-pressed-color
|
|
3500
3516
|
);
|
|
@@ -3520,27 +3536,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3520
3536
|
--amplify-internal-togglebutton-primary-color
|
|
3521
3537
|
);
|
|
3522
3538
|
border-width: var(--amplify-components-togglebutton-primary-border-width);
|
|
3523
|
-
--amplify-internal-togglebutton-hover-background-color: var(
|
|
3524
|
-
--amplify-components-togglebutton-primary-background-color
|
|
3525
|
-
);
|
|
3526
|
-
--amplify-internal-togglebutton-focus-border-color: var(
|
|
3527
|
-
--amplify-components-togglebutton-border-color
|
|
3528
|
-
);
|
|
3529
|
-
--amplify-internal-togglebutton-focus-color: var(
|
|
3530
|
-
--amplify-components-togglebutton-color
|
|
3531
|
-
);
|
|
3532
|
-
--amplify-internal-togglebutton-active-background-color: var(
|
|
3533
|
-
--amplify-components-togglebutton-primary-background-color
|
|
3534
|
-
);
|
|
3535
|
-
--amplify-internal-togglebutton-disabled-background-color: var(
|
|
3536
|
-
--amplify-components-togglebutton-primary-background-color
|
|
3537
|
-
);
|
|
3538
|
-
--amplify-internal-togglebutton-disabled-border-color: var(
|
|
3539
|
-
--amplify-components-togglebutton-border-color
|
|
3540
|
-
);
|
|
3541
|
-
--amplify-internal-togglebutton-disabled-color: var(
|
|
3542
|
-
--amplify-components-togglebutton-color
|
|
3543
|
-
);
|
|
3544
3539
|
--amplify-internal-togglebutton-primary-focus-background-color: var(
|
|
3545
3540
|
--amplify-components-togglebutton-primary-focus-background-color
|
|
3546
3541
|
);
|
|
@@ -3550,6 +3545,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3550
3545
|
--amplify-internal-togglebutton-primary-focus-color: var(
|
|
3551
3546
|
--amplify-components-togglebutton-primary-focus-color
|
|
3552
3547
|
);
|
|
3548
|
+
--amplify-internal-togglebutton-primary-focus-box-shadow: var(
|
|
3549
|
+
--amplify-components-togglebutton-primary-focus-box-shadow
|
|
3550
|
+
);
|
|
3551
|
+
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3552
|
+
--amplify-internal-togglebutton-primary-focus-background-color
|
|
3553
|
+
);
|
|
3554
|
+
--amplify-internal-togglebutton-focus-border-color: var(
|
|
3555
|
+
--amplify-internal-togglebutton-primary-focus-border-color
|
|
3556
|
+
);
|
|
3557
|
+
--amplify-internal-togglebutton-focus-color: var(
|
|
3558
|
+
--amplify-internal-togglebutton-primary-focus-color
|
|
3559
|
+
);
|
|
3553
3560
|
--amplify-internal-togglebutton-primary-hover-background-color: var(
|
|
3554
3561
|
--amplify-components-togglebutton-primary-hover-background-color
|
|
3555
3562
|
);
|
|
@@ -3559,43 +3566,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3559
3566
|
--amplify-internal-togglebutton-primary-hover-color: var(
|
|
3560
3567
|
--amplify-components-togglebutton-primary-hover-color
|
|
3561
3568
|
);
|
|
3569
|
+
--amplify-internal-togglebutton-hover-background-color: var(
|
|
3570
|
+
--amplify-internal-togglebutton-primary-hover-background-color
|
|
3571
|
+
);
|
|
3572
|
+
--amplify-internal-togglebutton-hover-border-color: var(
|
|
3573
|
+
--amplify-internal-togglebutton-primary-hover-border-color
|
|
3574
|
+
);
|
|
3575
|
+
--amplify-internal-togglebutton-hover-color: var(
|
|
3576
|
+
--amplify-internal-togglebutton-primary-hover-color
|
|
3577
|
+
);
|
|
3562
3578
|
--amplify-internal-togglebutton-primary-disabled-background-color: var(
|
|
3563
3579
|
--amplify-components-togglebutton-primary-disabled-background-color
|
|
3564
3580
|
);
|
|
3565
3581
|
--amplify-internal-togglebutton-primary-disabled-border-color: var(
|
|
3566
|
-
--amplify-
|
|
3582
|
+
--amplify-components-togglebutton-primary-disabled-border-color
|
|
3567
3583
|
);
|
|
3568
3584
|
--amplify-internal-togglebutton-primary-disabled-color: var(
|
|
3569
3585
|
--amplify-components-togglebutton-primary-disabled-color
|
|
3570
3586
|
);
|
|
3571
|
-
}
|
|
3572
|
-
|
|
3573
|
-
.amplify-togglebutton--primary:focus {
|
|
3574
|
-
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3575
|
-
--amplify-internal-togglebutton-primary-focus-background-color
|
|
3576
|
-
);
|
|
3577
|
-
--amplify-internal-togglebutton-focus-border-color: var(
|
|
3578
|
-
--amplify-internal-togglebutton-primary-focus-border-color
|
|
3579
|
-
);
|
|
3580
|
-
--amplify-internal-togglebutton-focus-color: var(
|
|
3581
|
-
--amplify-internal-togglebutton-primary-focus-color
|
|
3582
|
-
);
|
|
3583
|
-
box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
|
|
3584
|
-
--amplify-internal-togglebutton-primary-hover-border-color: var(
|
|
3585
|
-
--amplify-internal-togglebutton-primary-focus-border-color
|
|
3586
|
-
);
|
|
3587
|
-
}
|
|
3588
|
-
|
|
3589
|
-
.amplify-togglebutton--primary:hover {
|
|
3590
|
-
background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
|
|
3591
|
-
border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
|
|
3592
|
-
color: var(--amplify-internal-togglebutton-primary-hover-color);
|
|
3593
|
-
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3594
|
-
--amplify-internal-togglebutton-primary-hover-background-color
|
|
3595
|
-
);
|
|
3596
|
-
}
|
|
3597
|
-
|
|
3598
|
-
.amplify-togglebutton--primary:disabled {
|
|
3599
3587
|
--amplify-internal-togglebutton-disabled-background-color: var(
|
|
3600
3588
|
--amplify-internal-togglebutton-primary-disabled-background-color
|
|
3601
3589
|
);
|
|
@@ -3607,6 +3595,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3607
3595
|
);
|
|
3608
3596
|
}
|
|
3609
3597
|
|
|
3598
|
+
.amplify-togglebutton--primary:focus {
|
|
3599
|
+
box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
|
|
3600
|
+
}
|
|
3601
|
+
|
|
3610
3602
|
.amplify-togglebutton--pressed {
|
|
3611
3603
|
--amplify-internal-togglebutton-primary-background-color: var(
|
|
3612
3604
|
--amplify-components-togglebutton-primary-pressed-background-color
|
|
@@ -3617,48 +3609,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3617
3609
|
--amplify-internal-togglebutton-primary-color: var(
|
|
3618
3610
|
--amplify-components-togglebutton-primary-pressed-color
|
|
3619
3611
|
);
|
|
3620
|
-
}
|
|
3621
|
-
|
|
3622
|
-
.amplify-togglebutton--pressed:focus {
|
|
3623
3612
|
--amplify-internal-togglebutton-primary-focus-background-color: var(
|
|
3624
3613
|
--amplify-components-togglebutton-primary-pressed-focus-background-color
|
|
3625
3614
|
);
|
|
3626
3615
|
--amplify-internal-togglebutton-primary-focus-border-color: var(
|
|
3627
3616
|
--amplify-components-togglebutton-primary-pressed-focus-border-color
|
|
3628
3617
|
);
|
|
3629
|
-
}
|
|
3630
|
-
|
|
3631
|
-
.amplify-togglebutton--pressed:hover:not(:disabled) {
|
|
3632
|
-
--amplify-internal-togglebutton-primary-hover-background-color: var(
|
|
3633
|
-
--amplify-components-togglebutton-primary-pressed-hover-background-color
|
|
3634
|
-
);
|
|
3635
|
-
--amplify-internal-togglebutton-primary-hover-border-color: var(
|
|
3636
|
-
--amplify-components-togglebutton-primary-pressed-hover-border-color
|
|
3637
|
-
);
|
|
3638
|
-
--amplify-internal-togglebutton-primary-focus-background-color: var(
|
|
3639
|
-
--amplify-components-togglebutton-primary-pressed-hover-background-color
|
|
3640
|
-
);
|
|
3641
|
-
}
|
|
3642
|
-
|
|
3643
|
-
.amplify-togglebutton--pressed:focus {
|
|
3644
3618
|
--amplify-internal-togglebutton-primary-focus-color: var(
|
|
3645
|
-
--amplify-components-togglebutton-primary-pressed-color
|
|
3619
|
+
--amplify-components-togglebutton-primary-pressed-focus-color
|
|
3646
3620
|
);
|
|
3647
|
-
}
|
|
3648
|
-
|
|
3649
|
-
.amplify-togglebutton--pressed:hover {
|
|
3650
3621
|
--amplify-internal-togglebutton-primary-hover-background-color: var(
|
|
3651
|
-
--amplify-components-togglebutton-primary-hover-background-color
|
|
3622
|
+
--amplify-components-togglebutton-primary-pressed-hover-background-color
|
|
3652
3623
|
);
|
|
3653
3624
|
--amplify-internal-togglebutton-primary-hover-border-color: var(
|
|
3654
|
-
--amplify-
|
|
3625
|
+
--amplify-components-togglebutton-primary-pressed-hover-border-color
|
|
3655
3626
|
);
|
|
3656
3627
|
--amplify-internal-togglebutton-primary-hover-color: var(
|
|
3657
|
-
--amplify-components-togglebutton-primary-pressed-color
|
|
3628
|
+
--amplify-components-togglebutton-primary-pressed-hover-color
|
|
3658
3629
|
);
|
|
3659
|
-
}
|
|
3660
|
-
|
|
3661
|
-
.amplify-togglebutton--pressed:disabled {
|
|
3662
3630
|
--amplify-internal-togglebutton-primary-disabled-background-color: var(
|
|
3663
3631
|
--amplify-components-togglebutton-primary-pressed-background-color
|
|
3664
3632
|
);
|
|
@@ -3670,29 +3638,25 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3670
3638
|
);
|
|
3671
3639
|
}
|
|
3672
3640
|
|
|
3641
|
+
.amplify-togglebutton--pressed:hover {
|
|
3642
|
+
--amplify-internal-togglebutton-primary-focus-box-shadow: var(
|
|
3643
|
+
--amplify-components-togglebutton-primary-pressed-hover-box-shadow
|
|
3644
|
+
);
|
|
3645
|
+
}
|
|
3646
|
+
|
|
3673
3647
|
.amplify-togglebutton--link {
|
|
3674
3648
|
--amplify-internal-togglebutton-link-background-color: var(
|
|
3675
|
-
--amplify-components-togglebutton-background-color
|
|
3649
|
+
--amplify-components-togglebutton-link-background-color
|
|
3676
3650
|
);
|
|
3677
3651
|
--amplify-internal-togglebutton-link-color: var(
|
|
3678
3652
|
--amplify-components-togglebutton-link-color
|
|
3679
3653
|
);
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
--amplify-internal-togglebutton-link-hover-background-color: var(
|
|
3683
|
-
--amplify-components-togglebutton-link-hover-background-color
|
|
3654
|
+
--amplify-internal-togglebutton-background-color: var(
|
|
3655
|
+
--amplify-internal-togglebutton-link-background-color
|
|
3684
3656
|
);
|
|
3685
|
-
--amplify-internal-togglebutton-
|
|
3686
|
-
--amplify-
|
|
3657
|
+
--amplify-internal-togglebutton-color: var(
|
|
3658
|
+
--amplify-internal-togglebutton-link-color
|
|
3687
3659
|
);
|
|
3688
|
-
}
|
|
3689
|
-
|
|
3690
|
-
.amplify-togglebutton--link:hover {
|
|
3691
|
-
background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
|
|
3692
|
-
color: var(--amplify-internal-togglebutton-link-hover-color);
|
|
3693
|
-
}
|
|
3694
|
-
|
|
3695
|
-
.amplify-togglebutton--link:focus {
|
|
3696
3660
|
--amplify-internal-togglebutton-link-focus-background-color: var(
|
|
3697
3661
|
--amplify-components-togglebutton-link-focus-background-color
|
|
3698
3662
|
);
|
|
@@ -3705,12 +3669,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3705
3669
|
--amplify-internal-togglebutton-focus-color: var(
|
|
3706
3670
|
--amplify-internal-togglebutton-link-focus-color
|
|
3707
3671
|
);
|
|
3708
|
-
|
|
3709
|
-
|
|
3710
|
-
|
|
3711
|
-
--amplify-internal-togglebutton-
|
|
3672
|
+
--amplify-internal-togglebutton-link-hover-background-color: var(
|
|
3673
|
+
--amplify-components-togglebutton-link-hover-background-color
|
|
3674
|
+
);
|
|
3675
|
+
--amplify-internal-togglebutton-link-hover-color: var(
|
|
3676
|
+
--amplify-components-togglebutton-link-hover-color
|
|
3677
|
+
);
|
|
3678
|
+
--amplify-internal-togglebutton-hover-background-color: var(
|
|
3679
|
+
--amplify-internal-togglebutton-link-hover-background-color
|
|
3680
|
+
);
|
|
3681
|
+
--amplify-internal-togglebutton-hover-color: var(
|
|
3682
|
+
--amplify-internal-togglebutton-link-hover-color
|
|
3683
|
+
);
|
|
3684
|
+
--amplify-internal-togglebutton-link-disabled-color: var(
|
|
3712
3685
|
--amplify-components-togglebutton-link-disabled-color
|
|
3713
3686
|
);
|
|
3687
|
+
--amplify-internal-togglebutton-link-disabled-background-color: var(
|
|
3688
|
+
--amplify-components-togglebutton-link-disabled-background-color
|
|
3689
|
+
);
|
|
3690
|
+
--amplify-internal-togglebutton-disabled-color: var(
|
|
3691
|
+
--amplify-internal-togglebutton-link-disabled-color
|
|
3692
|
+
);
|
|
3693
|
+
--amplify-internal-togglebutton-disabled-background-color: var(
|
|
3694
|
+
--amplify-internal-togglebutton-link-disabled-background-color
|
|
3695
|
+
);
|
|
3714
3696
|
}
|
|
3715
3697
|
|
|
3716
3698
|
.amplify-togglebutton--pressed {
|
|
@@ -3720,22 +3702,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3720
3702
|
--amplify-internal-togglebutton-link-background-color: var(
|
|
3721
3703
|
--amplify-components-togglebutton-link-pressed-background-color
|
|
3722
3704
|
);
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3705
|
+
--amplify-internal-togglebutton-link-focus-background-color: var(
|
|
3706
|
+
--amplify-components-togglebutton-link-pressed-focus-background-color
|
|
3707
|
+
);
|
|
3708
|
+
--amplify-internal-togglebutton-link-focus-color: var(
|
|
3709
|
+
--amplify-components-togglebutton-link-pressed-focus-color
|
|
3710
|
+
);
|
|
3726
3711
|
--amplify-internal-togglebutton-link-hover-background-color: var(
|
|
3727
3712
|
--amplify-components-togglebutton-link-pressed-hover-background-color
|
|
3728
3713
|
);
|
|
3729
3714
|
--amplify-internal-togglebutton-link-hover-color: var(
|
|
3730
|
-
--amplify-components-togglebutton-link-pressed-color
|
|
3731
|
-
);
|
|
3732
|
-
}
|
|
3733
|
-
|
|
3734
|
-
.amplify-togglebutton--pressed:focus {
|
|
3735
|
-
--amplify-internal-togglebutton-link-focus-background-color: var(
|
|
3736
|
-
--amplify-components-togglebutton-link-pressed-background-color
|
|
3715
|
+
--amplify-components-togglebutton-link-pressed-hover-color
|
|
3737
3716
|
);
|
|
3738
|
-
--amplify-internal-togglebutton-link-
|
|
3717
|
+
--amplify-internal-togglebutton-link-disabled-color: var(
|
|
3739
3718
|
--amplify-components-togglebutton-link-pressed-color
|
|
3740
3719
|
);
|
|
3741
3720
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
/**
|
|
3
|
-
* The `<
|
|
3
|
+
* The `<LocationSearch>` component provides location search. See https://ui.docs.amplify.aws/components/geo#geocoder.
|
|
4
4
|
*
|
|
5
5
|
* @example
|
|
6
6
|
* // Used as a map control:
|
|
7
7
|
* function App() {
|
|
8
8
|
* return (
|
|
9
9
|
* <MapView>
|
|
10
|
-
* <
|
|
10
|
+
* <LocationSearch />
|
|
11
11
|
* </MapView>
|
|
12
12
|
* );
|
|
13
13
|
* }
|
|
@@ -15,11 +15,12 @@
|
|
|
15
15
|
* @example
|
|
16
16
|
* // Used as a standalone component:
|
|
17
17
|
* function App() {
|
|
18
|
-
* return <
|
|
18
|
+
* return <LocationSearch />;
|
|
19
19
|
* }
|
|
20
20
|
*/
|
|
21
|
-
export declare const
|
|
22
|
-
export declare
|
|
21
|
+
export declare const LocationSearch: (props: LocationSearchProps) => JSX.Element;
|
|
22
|
+
export declare const Geocoder: (props: LocationSearchProps) => JSX.Element;
|
|
23
|
+
export declare type LocationSearchProps = {
|
|
23
24
|
/**
|
|
24
25
|
* A bounding box given as an array in the format `[minX, minY, maxX, maxY]`.
|
|
25
26
|
* Search results will be limited to the bounding box.
|
|
@@ -27,17 +28,17 @@ export declare type GeocoderProps = {
|
|
|
27
28
|
bbox?: number[];
|
|
28
29
|
/**
|
|
29
30
|
* Default: false
|
|
30
|
-
* If `true`, the
|
|
31
|
+
* If `true`, the LocationSearch control will clear it's contents and blur when user presses the escape key.
|
|
31
32
|
*/
|
|
32
33
|
clearAndBlurOnEsc?: boolean;
|
|
33
34
|
/**
|
|
34
35
|
* Default: false
|
|
35
|
-
* If `true`, the
|
|
36
|
+
* If `true`, the LocationSearch control will clear its value when the input blurs.
|
|
36
37
|
*/
|
|
37
38
|
clearOnBlur?: boolean;
|
|
38
39
|
/**
|
|
39
40
|
* Default: false
|
|
40
|
-
* If `true`, the
|
|
41
|
+
* If `true`, the LocationSearch control will collapse until hovered or in focus.
|
|
41
42
|
*/
|
|
42
43
|
collapsed?: boolean;
|
|
43
44
|
/**
|
|
@@ -46,7 +47,7 @@ export declare type GeocoderProps = {
|
|
|
46
47
|
countries?: string;
|
|
47
48
|
/**
|
|
48
49
|
* Default: 200
|
|
49
|
-
* Sets the amount of time, in milliseconds, to wait before querying the server when a user types into the
|
|
50
|
+
* Sets the amount of time, in milliseconds, to wait before querying the server when a user types into the LocationSearch
|
|
50
51
|
* input box. This parameter may be useful for reducing the total number of API calls made for a single query.
|
|
51
52
|
*/
|
|
52
53
|
debounceSearch?: number;
|
|
@@ -56,7 +57,7 @@ export declare type GeocoderProps = {
|
|
|
56
57
|
*/
|
|
57
58
|
enableEventLogging?: boolean;
|
|
58
59
|
/**
|
|
59
|
-
* A function accepting the query string, current features list, and
|
|
60
|
+
* A function accepting the query string, current features list, and LocationSearch options which performs geocoding to
|
|
60
61
|
* supplement results from the Maplibre Geocoding API. Expected to return a Promise which resolves to an Array of
|
|
61
62
|
* GeoJSON Features in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format.
|
|
62
63
|
*/
|
|
@@ -131,7 +132,7 @@ export declare type GeocoderProps = {
|
|
|
131
132
|
popupRender?: Function;
|
|
132
133
|
/**
|
|
133
134
|
* Default: 'top-right'
|
|
134
|
-
* Position the
|
|
135
|
+
* Position the LocationSearch will be rendered on the map. Only relevant when `<LocationSearch>` is used with a map.
|
|
135
136
|
*/
|
|
136
137
|
position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
|
|
137
138
|
/**
|
|
@@ -168,13 +169,13 @@ export declare type GeocoderProps = {
|
|
|
168
169
|
showResultMarkers?: boolean | object;
|
|
169
170
|
/**
|
|
170
171
|
* Default: true
|
|
171
|
-
* If `false`, indicates that search will only occur on enter key press. If `true`, indicates that the
|
|
172
|
+
* If `false`, indicates that search will only occur on enter key press. If `true`, indicates that the LocationSearch will
|
|
172
173
|
* search on the input box being updated above the minLength option.
|
|
173
174
|
*/
|
|
174
175
|
showResultsWhileTyping?: boolean;
|
|
175
176
|
/**
|
|
176
177
|
* Default: true
|
|
177
|
-
* If `true`, the
|
|
178
|
+
* If `true`, the LocationSearch proximity will automatically update based on the map view.
|
|
178
179
|
*/
|
|
179
180
|
trackProximity?: boolean;
|
|
180
181
|
/**
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { MapView } from './MapView';
|
|
2
|
-
export { Geocoder } from './
|
|
2
|
+
export { Geocoder, LocationSearch } from './LocationSearch';
|
|
File without changes
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { Theme } from '@aws-amplify/ui';
|
|
3
3
|
export declare type ColorMode = 'system' | 'light' | 'dark';
|
|
4
|
-
interface
|
|
4
|
+
interface ThemeProviderProps {
|
|
5
5
|
children: React.ReactNode;
|
|
6
6
|
colorMode?: ColorMode;
|
|
7
7
|
theme?: Theme;
|
|
8
8
|
nonce?: string;
|
|
9
9
|
}
|
|
10
|
-
export declare function AmplifyProvider({ children, colorMode, theme, nonce, }:
|
|
10
|
+
export declare function AmplifyProvider({ children, colorMode, theme, nonce, }: ThemeProviderProps): JSX.Element;
|
|
11
|
+
export declare const ThemeProvider: typeof AmplifyProvider;
|
|
11
12
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { WebTheme } from '@aws-amplify/ui';
|
|
2
|
-
import { AmplifyContextType } from '../components/
|
|
2
|
+
import { AmplifyContextType } from '../components/ThemeProvider/AmplifyContext';
|
|
3
3
|
export declare const useTheme: () => WebTheme;
|
|
4
4
|
/**
|
|
5
5
|
* Get current Theme object value from Amplify context.
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
import { ViewProps } from '../types/view';
|
|
2
3
|
declare type ExpanderType = 'single' | 'multiple';
|
|
3
4
|
export interface ExpanderProps extends ViewProps {
|
|
@@ -26,7 +27,7 @@ export interface ExpanderItemProps extends ViewProps {
|
|
|
26
27
|
/**
|
|
27
28
|
* The content of the heading.
|
|
28
29
|
*/
|
|
29
|
-
title?:
|
|
30
|
+
title?: React.ReactNode;
|
|
30
31
|
/**
|
|
31
32
|
* A unique value for the item.
|
|
32
33
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aws-amplify/ui-react",
|
|
3
|
-
"version": "2.18.
|
|
3
|
+
"version": "2.18.3",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/esm/index.js",
|
|
6
6
|
"exports": {
|
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
"size": "yarn run size-limit"
|
|
59
59
|
},
|
|
60
60
|
"dependencies": {
|
|
61
|
-
"@aws-amplify/ui": "3.9.
|
|
61
|
+
"@aws-amplify/ui": "3.9.2",
|
|
62
62
|
"@aws-amplify/ui-react-v1": "npm:@aws-amplify/ui-react@1.2.9",
|
|
63
63
|
"@radix-ui/react-accordion": "0.1.6",
|
|
64
64
|
"@radix-ui/react-dropdown-menu": "0.1.6",
|
|
@@ -73,7 +73,7 @@
|
|
|
73
73
|
"maplibre-gl-js-amplify": "1.5.0",
|
|
74
74
|
"qrcode": "1.5.0",
|
|
75
75
|
"react-generate-context": "1.0.1",
|
|
76
|
-
"react-map-gl": "7.0.
|
|
76
|
+
"react-map-gl": "7.0.15"
|
|
77
77
|
},
|
|
78
78
|
"peerDependencies": {
|
|
79
79
|
"aws-amplify": "3.x.x || 4.x.x",
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
{
|
|
133
133
|
"name": "Geo",
|
|
134
134
|
"path": "dist/esm/index.js",
|
|
135
|
-
"import": "{ MapView,
|
|
135
|
+
"import": "{ MapView, LocationSearch }",
|
|
136
136
|
"limit": "300 kB"
|
|
137
137
|
}
|
|
138
138
|
]
|