@aws-amplify/ui-react 2.18.1 → 2.18.2
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/index.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/index.js +1 -1
- package/dist/styles.css +113 -136
- package/dist/types/components/Geo/{Geocoder → LocationSearch}/index.d.ts +14 -13
- package/dist/types/components/Geo/index.d.ts +1 -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 Tue, 24 May 2022 22:52:46 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);
|
|
@@ -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);
|
|
@@ -3417,9 +3428,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3417
3428
|
}
|
|
3418
3429
|
|
|
3419
3430
|
.amplify-togglebutton {
|
|
3420
|
-
background-color: var(--amplify-internal-togglebutton-background-color);
|
|
3421
|
-
border-color: var(--amplify-internal-togglebutton-border-color);
|
|
3422
|
-
color: var(--amplify-internal-togglebutton-color);
|
|
3423
3431
|
--amplify-internal-togglebutton-background-color: initial;
|
|
3424
3432
|
--amplify-internal-togglebutton-border-color: var(
|
|
3425
3433
|
--amplify-components-togglebutton-border-color
|
|
@@ -3427,9 +3435,9 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3427
3435
|
--amplify-internal-togglebutton-color: var(
|
|
3428
3436
|
--amplify-components-togglebutton-color
|
|
3429
3437
|
);
|
|
3430
|
-
--amplify-internal-togglebutton-
|
|
3431
|
-
|
|
3432
|
-
);
|
|
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);
|
|
3433
3441
|
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3434
3442
|
--amplify-internal-togglebutton-background-color
|
|
3435
3443
|
);
|
|
@@ -3439,6 +3447,15 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3439
3447
|
--amplify-internal-togglebutton-focus-color: var(
|
|
3440
3448
|
--amplify-components-togglebutton-focus-color
|
|
3441
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
|
+
);
|
|
3442
3459
|
--amplify-internal-togglebutton-active-background-color: var(
|
|
3443
3460
|
--amplify-components-togglebutton-active-background-color
|
|
3444
3461
|
);
|
|
@@ -3453,21 +3470,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3453
3470
|
);
|
|
3454
3471
|
}
|
|
3455
3472
|
|
|
3456
|
-
.amplify-togglebutton:hover {
|
|
3457
|
-
background-color: var(--amplify-internal-togglebutton-hover-background-color);
|
|
3458
|
-
border-color: var(--amplify-internal-togglebutton-border-color);
|
|
3459
|
-
color: var(--amplify-internal-togglebutton-color);
|
|
3460
|
-
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3461
|
-
--amplify-internal-togglebutton-hover-background-color
|
|
3462
|
-
);
|
|
3463
|
-
}
|
|
3464
|
-
|
|
3465
3473
|
.amplify-togglebutton:focus {
|
|
3466
3474
|
background-color: var(--amplify-internal-togglebutton-focus-background-color);
|
|
3467
3475
|
border-color: var(--amplify-internal-togglebutton-focus-border-color);
|
|
3468
3476
|
color: var(--amplify-internal-togglebutton-focus-color);
|
|
3469
3477
|
}
|
|
3470
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
|
+
|
|
3471
3485
|
.amplify-togglebutton:active {
|
|
3472
3486
|
background-color: var(--amplify-internal-togglebutton-active-background-color);
|
|
3473
3487
|
}
|
|
@@ -3479,24 +3493,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3479
3493
|
}
|
|
3480
3494
|
|
|
3481
3495
|
.amplify-togglebutton--pressed {
|
|
3496
|
+
--amplify-internal-togglebutton-border-color: var(
|
|
3497
|
+
--amplify-components-togglebutton-pressed-border-color
|
|
3498
|
+
);
|
|
3482
3499
|
--amplify-internal-togglebutton-background-color: var(
|
|
3483
3500
|
--amplify-components-togglebutton-pressed-background-color
|
|
3484
3501
|
);
|
|
3485
3502
|
--amplify-internal-togglebutton-color: var(
|
|
3486
3503
|
--amplify-components-togglebutton-pressed-color
|
|
3487
3504
|
);
|
|
3488
|
-
}
|
|
3489
|
-
|
|
3490
|
-
.amplify-togglebutton--pressed:hover:not(:disabled) {
|
|
3491
3505
|
--amplify-internal-togglebutton-hover-background-color: var(
|
|
3492
3506
|
--amplify-components-togglebutton-pressed-hover-background-color
|
|
3493
3507
|
);
|
|
3494
|
-
}
|
|
3495
|
-
|
|
3496
|
-
.amplify-togglebutton--pressed:disabled {
|
|
3497
3508
|
--amplify-internal-togglebutton-disabled-background-color: var(
|
|
3498
3509
|
--amplify-components-togglebutton-pressed-background-color
|
|
3499
3510
|
);
|
|
3511
|
+
--amplify-internal-togglebutton-disabled-border-color: var(
|
|
3512
|
+
--amplify-components-togglebutton-pressed-border-color
|
|
3513
|
+
);
|
|
3500
3514
|
--amplify-internal-togglebutton-disabled-color: var(
|
|
3501
3515
|
--amplify-components-togglebutton-pressed-color
|
|
3502
3516
|
);
|
|
@@ -3522,27 +3536,6 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3522
3536
|
--amplify-internal-togglebutton-primary-color
|
|
3523
3537
|
);
|
|
3524
3538
|
border-width: var(--amplify-components-togglebutton-primary-border-width);
|
|
3525
|
-
--amplify-internal-togglebutton-hover-background-color: var(
|
|
3526
|
-
--amplify-components-togglebutton-primary-background-color
|
|
3527
|
-
);
|
|
3528
|
-
--amplify-internal-togglebutton-focus-border-color: var(
|
|
3529
|
-
--amplify-components-togglebutton-border-color
|
|
3530
|
-
);
|
|
3531
|
-
--amplify-internal-togglebutton-focus-color: var(
|
|
3532
|
-
--amplify-components-togglebutton-color
|
|
3533
|
-
);
|
|
3534
|
-
--amplify-internal-togglebutton-active-background-color: var(
|
|
3535
|
-
--amplify-components-togglebutton-primary-background-color
|
|
3536
|
-
);
|
|
3537
|
-
--amplify-internal-togglebutton-disabled-background-color: var(
|
|
3538
|
-
--amplify-components-togglebutton-primary-background-color
|
|
3539
|
-
);
|
|
3540
|
-
--amplify-internal-togglebutton-disabled-border-color: var(
|
|
3541
|
-
--amplify-components-togglebutton-border-color
|
|
3542
|
-
);
|
|
3543
|
-
--amplify-internal-togglebutton-disabled-color: var(
|
|
3544
|
-
--amplify-components-togglebutton-color
|
|
3545
|
-
);
|
|
3546
3539
|
--amplify-internal-togglebutton-primary-focus-background-color: var(
|
|
3547
3540
|
--amplify-components-togglebutton-primary-focus-background-color
|
|
3548
3541
|
);
|
|
@@ -3552,6 +3545,18 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3552
3545
|
--amplify-internal-togglebutton-primary-focus-color: var(
|
|
3553
3546
|
--amplify-components-togglebutton-primary-focus-color
|
|
3554
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
|
+
);
|
|
3555
3560
|
--amplify-internal-togglebutton-primary-hover-background-color: var(
|
|
3556
3561
|
--amplify-components-togglebutton-primary-hover-background-color
|
|
3557
3562
|
);
|
|
@@ -3561,43 +3566,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3561
3566
|
--amplify-internal-togglebutton-primary-hover-color: var(
|
|
3562
3567
|
--amplify-components-togglebutton-primary-hover-color
|
|
3563
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
|
+
);
|
|
3564
3578
|
--amplify-internal-togglebutton-primary-disabled-background-color: var(
|
|
3565
3579
|
--amplify-components-togglebutton-primary-disabled-background-color
|
|
3566
3580
|
);
|
|
3567
3581
|
--amplify-internal-togglebutton-primary-disabled-border-color: var(
|
|
3568
|
-
--amplify-
|
|
3582
|
+
--amplify-components-togglebutton-primary-disabled-border-color
|
|
3569
3583
|
);
|
|
3570
3584
|
--amplify-internal-togglebutton-primary-disabled-color: var(
|
|
3571
3585
|
--amplify-components-togglebutton-primary-disabled-color
|
|
3572
3586
|
);
|
|
3573
|
-
}
|
|
3574
|
-
|
|
3575
|
-
.amplify-togglebutton--primary:focus {
|
|
3576
|
-
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3577
|
-
--amplify-internal-togglebutton-primary-focus-background-color
|
|
3578
|
-
);
|
|
3579
|
-
--amplify-internal-togglebutton-focus-border-color: var(
|
|
3580
|
-
--amplify-internal-togglebutton-primary-focus-border-color
|
|
3581
|
-
);
|
|
3582
|
-
--amplify-internal-togglebutton-focus-color: var(
|
|
3583
|
-
--amplify-internal-togglebutton-primary-focus-color
|
|
3584
|
-
);
|
|
3585
|
-
box-shadow: var(--amplify-components-togglebutton-primary-focus-box-shadow);
|
|
3586
|
-
--amplify-internal-togglebutton-primary-hover-border-color: var(
|
|
3587
|
-
--amplify-internal-togglebutton-primary-focus-border-color
|
|
3588
|
-
);
|
|
3589
|
-
}
|
|
3590
|
-
|
|
3591
|
-
.amplify-togglebutton--primary:hover {
|
|
3592
|
-
background-color: var(--amplify-internal-togglebutton-primary-hover-background-color);
|
|
3593
|
-
border-color: var(--amplify-internal-togglebutton-primary-hover-border-color);
|
|
3594
|
-
color: var(--amplify-internal-togglebutton-primary-hover-color);
|
|
3595
|
-
--amplify-internal-togglebutton-focus-background-color: var(
|
|
3596
|
-
--amplify-internal-togglebutton-primary-hover-background-color
|
|
3597
|
-
);
|
|
3598
|
-
}
|
|
3599
|
-
|
|
3600
|
-
.amplify-togglebutton--primary:disabled {
|
|
3601
3587
|
--amplify-internal-togglebutton-disabled-background-color: var(
|
|
3602
3588
|
--amplify-internal-togglebutton-primary-disabled-background-color
|
|
3603
3589
|
);
|
|
@@ -3609,6 +3595,10 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3609
3595
|
);
|
|
3610
3596
|
}
|
|
3611
3597
|
|
|
3598
|
+
.amplify-togglebutton--primary:focus {
|
|
3599
|
+
box-shadow: var(--amplify-internal-togglebutton-primary-focus-box-shadow);
|
|
3600
|
+
}
|
|
3601
|
+
|
|
3612
3602
|
.amplify-togglebutton--pressed {
|
|
3613
3603
|
--amplify-internal-togglebutton-primary-background-color: var(
|
|
3614
3604
|
--amplify-components-togglebutton-primary-pressed-background-color
|
|
@@ -3619,48 +3609,24 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3619
3609
|
--amplify-internal-togglebutton-primary-color: var(
|
|
3620
3610
|
--amplify-components-togglebutton-primary-pressed-color
|
|
3621
3611
|
);
|
|
3622
|
-
}
|
|
3623
|
-
|
|
3624
|
-
.amplify-togglebutton--pressed:focus {
|
|
3625
3612
|
--amplify-internal-togglebutton-primary-focus-background-color: var(
|
|
3626
3613
|
--amplify-components-togglebutton-primary-pressed-focus-background-color
|
|
3627
3614
|
);
|
|
3628
3615
|
--amplify-internal-togglebutton-primary-focus-border-color: var(
|
|
3629
3616
|
--amplify-components-togglebutton-primary-pressed-focus-border-color
|
|
3630
3617
|
);
|
|
3631
|
-
}
|
|
3632
|
-
|
|
3633
|
-
.amplify-togglebutton--pressed:hover:not(:disabled) {
|
|
3634
|
-
--amplify-internal-togglebutton-primary-hover-background-color: var(
|
|
3635
|
-
--amplify-components-togglebutton-primary-pressed-hover-background-color
|
|
3636
|
-
);
|
|
3637
|
-
--amplify-internal-togglebutton-primary-hover-border-color: var(
|
|
3638
|
-
--amplify-components-togglebutton-primary-pressed-hover-border-color
|
|
3639
|
-
);
|
|
3640
|
-
--amplify-internal-togglebutton-primary-focus-background-color: var(
|
|
3641
|
-
--amplify-components-togglebutton-primary-pressed-hover-background-color
|
|
3642
|
-
);
|
|
3643
|
-
}
|
|
3644
|
-
|
|
3645
|
-
.amplify-togglebutton--pressed:focus {
|
|
3646
3618
|
--amplify-internal-togglebutton-primary-focus-color: var(
|
|
3647
|
-
--amplify-components-togglebutton-primary-pressed-color
|
|
3619
|
+
--amplify-components-togglebutton-primary-pressed-focus-color
|
|
3648
3620
|
);
|
|
3649
|
-
}
|
|
3650
|
-
|
|
3651
|
-
.amplify-togglebutton--pressed:hover {
|
|
3652
3621
|
--amplify-internal-togglebutton-primary-hover-background-color: var(
|
|
3653
|
-
--amplify-components-togglebutton-primary-hover-background-color
|
|
3622
|
+
--amplify-components-togglebutton-primary-pressed-hover-background-color
|
|
3654
3623
|
);
|
|
3655
3624
|
--amplify-internal-togglebutton-primary-hover-border-color: var(
|
|
3656
|
-
--amplify-
|
|
3625
|
+
--amplify-components-togglebutton-primary-pressed-hover-border-color
|
|
3657
3626
|
);
|
|
3658
3627
|
--amplify-internal-togglebutton-primary-hover-color: var(
|
|
3659
|
-
--amplify-components-togglebutton-primary-pressed-color
|
|
3628
|
+
--amplify-components-togglebutton-primary-pressed-hover-color
|
|
3660
3629
|
);
|
|
3661
|
-
}
|
|
3662
|
-
|
|
3663
|
-
.amplify-togglebutton--pressed:disabled {
|
|
3664
3630
|
--amplify-internal-togglebutton-primary-disabled-background-color: var(
|
|
3665
3631
|
--amplify-components-togglebutton-primary-pressed-background-color
|
|
3666
3632
|
);
|
|
@@ -3672,29 +3638,25 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3672
3638
|
);
|
|
3673
3639
|
}
|
|
3674
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
|
+
|
|
3675
3647
|
.amplify-togglebutton--link {
|
|
3676
3648
|
--amplify-internal-togglebutton-link-background-color: var(
|
|
3677
|
-
--amplify-components-togglebutton-background-color
|
|
3649
|
+
--amplify-components-togglebutton-link-background-color
|
|
3678
3650
|
);
|
|
3679
3651
|
--amplify-internal-togglebutton-link-color: var(
|
|
3680
3652
|
--amplify-components-togglebutton-link-color
|
|
3681
3653
|
);
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
--amplify-internal-togglebutton-link-hover-background-color: var(
|
|
3685
|
-
--amplify-components-togglebutton-link-hover-background-color
|
|
3654
|
+
--amplify-internal-togglebutton-background-color: var(
|
|
3655
|
+
--amplify-internal-togglebutton-link-background-color
|
|
3686
3656
|
);
|
|
3687
|
-
--amplify-internal-togglebutton-
|
|
3688
|
-
--amplify-
|
|
3657
|
+
--amplify-internal-togglebutton-color: var(
|
|
3658
|
+
--amplify-internal-togglebutton-link-color
|
|
3689
3659
|
);
|
|
3690
|
-
}
|
|
3691
|
-
|
|
3692
|
-
.amplify-togglebutton--link:hover {
|
|
3693
|
-
background-color: var(--amplify-internal-togglebutton-link-hover-background-color);
|
|
3694
|
-
color: var(--amplify-internal-togglebutton-link-hover-color);
|
|
3695
|
-
}
|
|
3696
|
-
|
|
3697
|
-
.amplify-togglebutton--link:focus {
|
|
3698
3660
|
--amplify-internal-togglebutton-link-focus-background-color: var(
|
|
3699
3661
|
--amplify-components-togglebutton-link-focus-background-color
|
|
3700
3662
|
);
|
|
@@ -3707,12 +3669,30 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3707
3669
|
--amplify-internal-togglebutton-focus-color: var(
|
|
3708
3670
|
--amplify-internal-togglebutton-link-focus-color
|
|
3709
3671
|
);
|
|
3710
|
-
|
|
3711
|
-
|
|
3712
|
-
|
|
3713
|
-
--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(
|
|
3714
3685
|
--amplify-components-togglebutton-link-disabled-color
|
|
3715
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
|
+
);
|
|
3716
3696
|
}
|
|
3717
3697
|
|
|
3718
3698
|
.amplify-togglebutton--pressed {
|
|
@@ -3722,22 +3702,19 @@ html[dir=rtl] .amplify-field-group__inner-start {
|
|
|
3722
3702
|
--amplify-internal-togglebutton-link-background-color: var(
|
|
3723
3703
|
--amplify-components-togglebutton-link-pressed-background-color
|
|
3724
3704
|
);
|
|
3725
|
-
|
|
3726
|
-
|
|
3727
|
-
|
|
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
|
+
);
|
|
3728
3711
|
--amplify-internal-togglebutton-link-hover-background-color: var(
|
|
3729
3712
|
--amplify-components-togglebutton-link-pressed-hover-background-color
|
|
3730
3713
|
);
|
|
3731
3714
|
--amplify-internal-togglebutton-link-hover-color: var(
|
|
3732
|
-
--amplify-components-togglebutton-link-pressed-color
|
|
3733
|
-
);
|
|
3734
|
-
}
|
|
3735
|
-
|
|
3736
|
-
.amplify-togglebutton--pressed:focus {
|
|
3737
|
-
--amplify-internal-togglebutton-link-focus-background-color: var(
|
|
3738
|
-
--amplify-components-togglebutton-link-pressed-background-color
|
|
3715
|
+
--amplify-components-togglebutton-link-pressed-hover-color
|
|
3739
3716
|
);
|
|
3740
|
-
--amplify-internal-togglebutton-link-
|
|
3717
|
+
--amplify-internal-togglebutton-link-disabled-color: var(
|
|
3741
3718
|
--amplify-components-togglebutton-link-pressed-color
|
|
3742
3719
|
);
|
|
3743
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';
|
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.2",
|
|
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
|
]
|