@salt-ds/lab 1.0.0-alpha.32 → 1.0.0-alpha.34
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/css/salt-lab.css +120 -231
- package/dist-cjs/calendar/Calendar.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarCarousel.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarCarousel.js +5 -29
- package/dist-cjs/calendar/internal/CalendarCarousel.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarDay.js +18 -19
- package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarMonth.js +0 -2
- package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.css.js +1 -1
- package/dist-cjs/calendar/internal/CalendarNavigation.js +74 -81
- package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-cjs/calendar/internal/CalendarWeekHeader.css.js +1 -1
- package/dist-cjs/calendar/useCalendar.js +14 -8
- package/dist-cjs/calendar/useCalendar.js.map +1 -1
- package/dist-cjs/calendar/useCalendarDay.js +15 -5
- package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
- package/dist-cjs/calendar/useSelection.js.map +1 -1
- package/dist-cjs/combo-box-next/ComboBoxNext.js +36 -13
- package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-cjs/combo-box-next/useComboBoxNext.js +16 -15
- package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -1
- package/dist-cjs/dialog/Dialog.css.js +1 -1
- package/dist-cjs/dialog/DialogHeader.css.js +6 -0
- package/dist-cjs/dialog/DialogHeader.css.js.map +1 -0
- package/dist-cjs/dialog/{DialogTitle.js → DialogHeader.js} +16 -16
- package/dist-cjs/dialog/DialogHeader.js.map +1 -0
- package/dist-cjs/dropdown-next/DropdownNext.js +7 -8
- package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-cjs/form-field-legacy/FormLabel.css.js +1 -1
- package/dist-cjs/index.js +2 -6
- package/dist-cjs/index.js.map +1 -1
- package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
- package/dist-cjs/layer-layout/LayerLayout.css.js +1 -1
- package/dist-cjs/list/List.css.js +1 -1
- package/dist-cjs/list-control/ListControlContext.js +3 -1
- package/dist-cjs/list-control/ListControlContext.js.map +1 -1
- package/dist-cjs/list-control/ListControlState.js +16 -18
- package/dist-cjs/list-control/ListControlState.js.map +1 -1
- package/dist-cjs/option/Option.css.js +1 -1
- package/dist-cjs/option/Option.js +10 -20
- package/dist-cjs/option/Option.js.map +1 -1
- package/dist-cjs/option/OptionList.css.js +1 -1
- package/dist-cjs/overlay/Overlay.css.js +1 -1
- package/dist-cjs/tabs-next/TabNext.css.js +1 -1
- package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
- package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-es/calendar/Calendar.css.js +1 -1
- package/dist-es/calendar/internal/CalendarCarousel.css.js +1 -1
- package/dist-es/calendar/internal/CalendarCarousel.js +5 -29
- package/dist-es/calendar/internal/CalendarCarousel.js.map +1 -1
- package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
- package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
- package/dist-es/calendar/internal/CalendarDay.js +20 -21
- package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
- package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
- package/dist-es/calendar/internal/CalendarMonth.js +0 -2
- package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
- package/dist-es/calendar/internal/CalendarNavigation.css.js +1 -1
- package/dist-es/calendar/internal/CalendarNavigation.js +75 -82
- package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
- package/dist-es/calendar/internal/CalendarWeekHeader.css.js +1 -1
- package/dist-es/calendar/useCalendar.js +14 -8
- package/dist-es/calendar/useCalendar.js.map +1 -1
- package/dist-es/calendar/useCalendarDay.js +15 -5
- package/dist-es/calendar/useCalendarDay.js.map +1 -1
- package/dist-es/calendar/useSelection.js.map +1 -1
- package/dist-es/combo-box-next/ComboBoxNext.js +36 -13
- package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
- package/dist-es/combo-box-next/useComboBoxNext.js +16 -15
- package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -1
- package/dist-es/dialog/Dialog.css.js +1 -1
- package/dist-es/dialog/DialogHeader.css.js +4 -0
- package/dist-es/dialog/DialogHeader.css.js.map +1 -0
- package/dist-es/dialog/{DialogTitle.js → DialogHeader.js} +16 -16
- package/dist-es/dialog/DialogHeader.js.map +1 -0
- package/dist-es/dropdown-next/DropdownNext.js +8 -9
- package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
- package/dist-es/form-field-legacy/FormLabel.css.js +1 -1
- package/dist-es/index.js +1 -3
- package/dist-es/index.js.map +1 -1
- package/dist-es/input-legacy/InputLegacy.css.js +1 -1
- package/dist-es/layer-layout/LayerLayout.css.js +1 -1
- package/dist-es/list/List.css.js +1 -1
- package/dist-es/list-control/ListControlContext.js +3 -1
- package/dist-es/list-control/ListControlContext.js.map +1 -1
- package/dist-es/list-control/ListControlState.js +16 -19
- package/dist-es/list-control/ListControlState.js.map +1 -1
- package/dist-es/option/Option.css.js +1 -1
- package/dist-es/option/Option.js +11 -21
- package/dist-es/option/Option.js.map +1 -1
- package/dist-es/option/OptionList.css.js +1 -1
- package/dist-es/overlay/Overlay.css.js +1 -1
- package/dist-es/tabs-next/TabNext.css.js +1 -1
- package/dist-es/tabs-next/TabstripNext.css.js +1 -1
- package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
- package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +1 -1
- package/dist-types/calendar/internal/CalendarContext.d.ts +2 -2
- package/dist-types/calendar/internal/CalendarNavigation.d.ts +3 -7
- package/dist-types/calendar/useCalendarDay.d.ts +7 -4
- package/dist-types/calendar/useSelection.d.ts +4 -4
- package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -10
- package/dist-types/combo-box-next/useComboBoxNext.d.ts +6 -4
- package/dist-types/dialog/DialogHeader.d.ts +22 -0
- package/dist-types/dialog/index.d.ts +1 -1
- package/dist-types/dropdown-next/DropdownNext.d.ts +49 -7
- package/dist-types/index.d.ts +0 -1
- package/dist-types/list-control/ListControlContext.d.ts +1 -1
- package/dist-types/list-control/ListControlState.d.ts +14 -12
- package/dist-types/option/Option.d.ts +0 -4
- package/package.json +2 -2
- package/dist-cjs/dialog/DialogTitle.css.js +0 -6
- package/dist-cjs/dialog/DialogTitle.css.js.map +0 -1
- package/dist-cjs/dialog/DialogTitle.js.map +0 -1
- package/dist-cjs/drawer/Drawer.css.js +0 -6
- package/dist-cjs/drawer/Drawer.css.js.map +0 -1
- package/dist-cjs/drawer/Drawer.js +0 -104
- package/dist-cjs/drawer/Drawer.js.map +0 -1
- package/dist-cjs/drawer/DrawerCloseButton.css.js +0 -6
- package/dist-cjs/drawer/DrawerCloseButton.css.js.map +0 -1
- package/dist-cjs/drawer/DrawerCloseButton.js +0 -44
- package/dist-cjs/drawer/DrawerCloseButton.js.map +0 -1
- package/dist-es/dialog/DialogTitle.css.js +0 -4
- package/dist-es/dialog/DialogTitle.css.js.map +0 -1
- package/dist-es/dialog/DialogTitle.js.map +0 -1
- package/dist-es/drawer/Drawer.css.js +0 -4
- package/dist-es/drawer/Drawer.css.js.map +0 -1
- package/dist-es/drawer/Drawer.js +0 -100
- package/dist-es/drawer/Drawer.js.map +0 -1
- package/dist-es/drawer/DrawerCloseButton.css.js +0 -4
- package/dist-es/drawer/DrawerCloseButton.css.js.map +0 -1
- package/dist-es/drawer/DrawerCloseButton.js +0 -36
- package/dist-es/drawer/DrawerCloseButton.js.map +0 -1
- package/dist-types/calendar/useCalendar.d.ts +0 -60
- package/dist-types/dialog/DialogTitle.d.ts +0 -22
- package/dist-types/drawer/Drawer.d.ts +0 -28
- package/dist-types/drawer/DrawerCloseButton.d.ts +0 -2
- package/dist-types/drawer/index.d.ts +0 -2
package/css/salt-lab.css
CHANGED
|
@@ -196,6 +196,8 @@
|
|
|
196
196
|
/* src/calendar/Calendar.css */
|
|
197
197
|
.saltCalendar {
|
|
198
198
|
width: min-content;
|
|
199
|
+
background: var(--salt-container-primary-background);
|
|
200
|
+
padding: var(--salt-spacing-100);
|
|
199
201
|
}
|
|
200
202
|
|
|
201
203
|
/* src/carousel/Carousel.css */
|
|
@@ -867,14 +869,8 @@
|
|
|
867
869
|
z-index: var(--salt-zIndex-drawer);
|
|
868
870
|
height: min-content;
|
|
869
871
|
border: var(--salt-container-borderStyle) var(--salt-separable-tertiary-borderColor) var(--salt-size-border);
|
|
870
|
-
|
|
871
|
-
|
|
872
|
-
background: var(--salt-overlayable-background);
|
|
873
|
-
display: flex;
|
|
874
|
-
align-items: center;
|
|
875
|
-
justify-content: center;
|
|
876
|
-
padding: var(--salt-spacing-100);
|
|
877
|
-
z-index: var(--salt-zIndex-modal);
|
|
872
|
+
box-sizing: border-box;
|
|
873
|
+
border-radius: var(--salt-palette-corner, 0);
|
|
878
874
|
}
|
|
879
875
|
.saltDialog-info {
|
|
880
876
|
border-color: var(--salt-status-info-borderColor);
|
|
@@ -990,8 +986,8 @@
|
|
|
990
986
|
box-shadow: var(--salt-overlayable-shadow-scroll);
|
|
991
987
|
}
|
|
992
988
|
|
|
993
|
-
/* src/dialog/
|
|
994
|
-
.
|
|
989
|
+
/* src/dialog/DialogHeader.css */
|
|
990
|
+
.saltDialogHeader {
|
|
995
991
|
padding-bottom: var(--salt-spacing-100);
|
|
996
992
|
padding-left: var(--salt-spacing-300);
|
|
997
993
|
padding-right: var(--salt-spacing-300);
|
|
@@ -999,17 +995,18 @@
|
|
|
999
995
|
display: flex;
|
|
1000
996
|
flex-direction: row;
|
|
1001
997
|
gap: var(--salt-spacing-100);
|
|
998
|
+
box-sizing: border-box;
|
|
1002
999
|
}
|
|
1003
|
-
.
|
|
1000
|
+
.saltDialogHeader-header {
|
|
1004
1001
|
margin: 0;
|
|
1005
1002
|
}
|
|
1006
|
-
.
|
|
1003
|
+
.saltDialogHeader .saltStatusIndicator.saltIcon {
|
|
1007
1004
|
--icon-size: var(--salt-text-h2-lineHeight);
|
|
1008
1005
|
}
|
|
1009
|
-
.
|
|
1006
|
+
.saltDialogHeader-withAccent {
|
|
1010
1007
|
position: relative;
|
|
1011
1008
|
}
|
|
1012
|
-
.
|
|
1009
|
+
.saltDialogHeader-withAccent::before {
|
|
1013
1010
|
content: "";
|
|
1014
1011
|
position: absolute;
|
|
1015
1012
|
top: 0;
|
|
@@ -1018,97 +1015,19 @@
|
|
|
1018
1015
|
width: var(--salt-size-accent);
|
|
1019
1016
|
background: var(--salt-accent-background);
|
|
1020
1017
|
}
|
|
1021
|
-
.
|
|
1018
|
+
.saltDialogHeader-error::before {
|
|
1022
1019
|
background: var(--salt-status-error-borderColor);
|
|
1023
1020
|
}
|
|
1024
|
-
.
|
|
1021
|
+
.saltDialogHeader-info::before {
|
|
1025
1022
|
background: var(--salt-status-info-borderColor);
|
|
1026
1023
|
}
|
|
1027
|
-
.
|
|
1024
|
+
.saltDialogHeader-success::before {
|
|
1028
1025
|
background: var(--salt-status-success-borderColor);
|
|
1029
1026
|
}
|
|
1030
|
-
.
|
|
1027
|
+
.saltDialogHeader-warning::before {
|
|
1031
1028
|
background: var(--salt-status-warning-borderColor);
|
|
1032
1029
|
}
|
|
1033
1030
|
|
|
1034
|
-
/* src/drawer/Drawer.css */
|
|
1035
|
-
.saltDrawer {
|
|
1036
|
-
background: var(--drawer-background);
|
|
1037
|
-
display: flex;
|
|
1038
|
-
flex-direction: column;
|
|
1039
|
-
max-height: 100%;
|
|
1040
|
-
max-width: 100%;
|
|
1041
|
-
overflow: auto;
|
|
1042
|
-
padding: var(--salt-spacing-300);
|
|
1043
|
-
box-shadow: var(--salt-overlayable-shadow-modal);
|
|
1044
|
-
z-index: var(--salt-zIndex-drawer);
|
|
1045
|
-
position: fixed;
|
|
1046
|
-
top: 0;
|
|
1047
|
-
}
|
|
1048
|
-
.saltDrawer-primary {
|
|
1049
|
-
--drawer-background: var(--salt-container-primary-background);
|
|
1050
|
-
}
|
|
1051
|
-
.saltDrawer-secondary {
|
|
1052
|
-
--drawer-background: var(--salt-container-secondary-background);
|
|
1053
|
-
}
|
|
1054
|
-
.saltDrawer-top {
|
|
1055
|
-
left: 0;
|
|
1056
|
-
right: 0;
|
|
1057
|
-
bottom: auto;
|
|
1058
|
-
}
|
|
1059
|
-
.saltDrawer-top.saltDrawer-enterAnimation {
|
|
1060
|
-
animation: var(--salt-animation-slide-in-bottom);
|
|
1061
|
-
}
|
|
1062
|
-
.saltDrawer-top.saltDrawer-exitAnimation {
|
|
1063
|
-
animation: var(--salt-animation-slide-out-bottom);
|
|
1064
|
-
}
|
|
1065
|
-
.saltDrawer-right {
|
|
1066
|
-
left: auto;
|
|
1067
|
-
right: 0;
|
|
1068
|
-
height: 100%;
|
|
1069
|
-
}
|
|
1070
|
-
.saltDrawer-right.saltDrawer-enterAnimation {
|
|
1071
|
-
animation: var(--salt-animation-slide-in-right);
|
|
1072
|
-
}
|
|
1073
|
-
.saltDrawer-right.saltDrawer-exitAnimation {
|
|
1074
|
-
animation: var(--salt-animation-slide-out-right);
|
|
1075
|
-
}
|
|
1076
|
-
.saltDrawer-left {
|
|
1077
|
-
left: 0;
|
|
1078
|
-
right: auto;
|
|
1079
|
-
height: 100%;
|
|
1080
|
-
}
|
|
1081
|
-
.saltDrawer-left.saltDrawer-enterAnimation {
|
|
1082
|
-
animation: var(--salt-animation-slide-in-left);
|
|
1083
|
-
}
|
|
1084
|
-
.saltDrawer-left.saltDrawer-exitAnimation {
|
|
1085
|
-
animation: var(--salt-animation-slide-out-left);
|
|
1086
|
-
}
|
|
1087
|
-
.saltDrawer-bottom {
|
|
1088
|
-
left: 0;
|
|
1089
|
-
right: 0;
|
|
1090
|
-
bottom: 0;
|
|
1091
|
-
top: auto;
|
|
1092
|
-
}
|
|
1093
|
-
.saltDrawer-bottom.saltDrawer-enterAnimation {
|
|
1094
|
-
animation: var(--salt-animation-slide-in-top);
|
|
1095
|
-
}
|
|
1096
|
-
.saltDrawer-bottom.saltDrawer-exitAnimation {
|
|
1097
|
-
animation: var(--salt-animation-slide-out-top);
|
|
1098
|
-
}
|
|
1099
|
-
|
|
1100
|
-
/* src/drawer/DrawerCloseButton.css */
|
|
1101
|
-
.saltDrawerCloseButton-container {
|
|
1102
|
-
position: relative;
|
|
1103
|
-
display: flex;
|
|
1104
|
-
justify-content: flex-end;
|
|
1105
|
-
}
|
|
1106
|
-
.saltButton-secondary.saltDrawerCloseButton {
|
|
1107
|
-
position: fixed;
|
|
1108
|
-
margin-top: calc(var(--salt-spacing-300) * -1);
|
|
1109
|
-
margin-right: calc(var(--salt-spacing-300) * -1);
|
|
1110
|
-
}
|
|
1111
|
-
|
|
1112
1031
|
/* src/dropdown/Dropdown.css */
|
|
1113
1032
|
.saltDropdown {
|
|
1114
1033
|
--saltIcon-margin: 2px 0 0 8px;
|
|
@@ -1622,6 +1541,7 @@
|
|
|
1622
1541
|
transform: translate(var(--saltFormFieldLegacy-label-transform-x, 0), var(--saltFormFieldLegacy-label-transform-y, var(--formFieldLegacy-label-top)));
|
|
1623
1542
|
white-space: nowrap;
|
|
1624
1543
|
width: var(--saltFormFieldLegacy-label-width, var(--formFieldLegacy-label-width, 100%));
|
|
1544
|
+
box-sizing: border-box;
|
|
1625
1545
|
}
|
|
1626
1546
|
.saltFormLabel ~ * {
|
|
1627
1547
|
z-index: 1;
|
|
@@ -1634,7 +1554,7 @@
|
|
|
1634
1554
|
font-style: var(--saltFormFieldLegacy-label-necessityIndicator-fontStyle, var(--salt-editable-help-fontStyle));
|
|
1635
1555
|
margin-left: 1ch;
|
|
1636
1556
|
}
|
|
1637
|
-
.saltFormLabel-statusIndicator {
|
|
1557
|
+
.saltFormLabel-statusIndicator.saltIcon {
|
|
1638
1558
|
margin-left: 6px;
|
|
1639
1559
|
vertical-align: top;
|
|
1640
1560
|
}
|
|
@@ -1710,6 +1630,7 @@
|
|
|
1710
1630
|
padding: var(--saltInputLegacy-padding, 0 var(--salt-size-unit));
|
|
1711
1631
|
position: var(--saltInputLegacy-position, relative);
|
|
1712
1632
|
width: 100%;
|
|
1633
|
+
box-sizing: border-box;
|
|
1713
1634
|
}
|
|
1714
1635
|
.saltInputLegacy-input:focus {
|
|
1715
1636
|
outline: none;
|
|
@@ -1813,6 +1734,7 @@
|
|
|
1813
1734
|
padding: var(--layerLayout-padding);
|
|
1814
1735
|
box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));
|
|
1815
1736
|
z-index: calc(var(--salt-zIndex-appHeader) - 1);
|
|
1737
|
+
box-sizing: border-box;
|
|
1816
1738
|
}
|
|
1817
1739
|
.saltLayerLayout-fullScreen {
|
|
1818
1740
|
width: 100vw;
|
|
@@ -1915,6 +1837,7 @@
|
|
|
1915
1837
|
font-size: var(--salt-text-fontSize);
|
|
1916
1838
|
font-weight: var(--salt-text-fontWeight);
|
|
1917
1839
|
line-height: var(--salt-text-lineHeight);
|
|
1840
|
+
box-sizing: border-box;
|
|
1918
1841
|
}
|
|
1919
1842
|
.saltList-borderless {
|
|
1920
1843
|
--list-borderStyle: none;
|
|
@@ -2390,6 +2313,7 @@
|
|
|
2390
2313
|
border-top: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
|
|
2391
2314
|
border-bottom: var(--salt-size-border) var(--salt-container-borderStyle) transparent;
|
|
2392
2315
|
cursor: var(--salt-selectable-cursor-hover);
|
|
2316
|
+
box-sizing: border-box;
|
|
2393
2317
|
}
|
|
2394
2318
|
.saltOption-active {
|
|
2395
2319
|
background: var(--salt-selectable-background-hover);
|
|
@@ -2407,6 +2331,7 @@
|
|
|
2407
2331
|
}
|
|
2408
2332
|
.saltOption[aria-disabled=true] {
|
|
2409
2333
|
color: var(--salt-content-primary-foreground-disabled);
|
|
2334
|
+
cursor: var(--salt-selectable-cursor-disabled);
|
|
2410
2335
|
}
|
|
2411
2336
|
|
|
2412
2337
|
/* src/option/OptionGroup.css */
|
|
@@ -2436,6 +2361,7 @@
|
|
|
2436
2361
|
box-shadow: var(--salt-overlayable-shadow-popout);
|
|
2437
2362
|
max-height: inherit;
|
|
2438
2363
|
min-height: inherit;
|
|
2364
|
+
box-sizing: border-box;
|
|
2439
2365
|
}
|
|
2440
2366
|
.saltOptionList-collapsed {
|
|
2441
2367
|
display: none;
|
|
@@ -2454,6 +2380,7 @@
|
|
|
2454
2380
|
border-color: var(--overlay-borderColor);
|
|
2455
2381
|
border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));
|
|
2456
2382
|
border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));
|
|
2383
|
+
border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));
|
|
2457
2384
|
background: var(--overlay-background);
|
|
2458
2385
|
box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
|
|
2459
2386
|
color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));
|
|
@@ -3252,6 +3179,7 @@
|
|
|
3252
3179
|
padding: var(--salt-spacing-50) var(--salt-spacing-100);
|
|
3253
3180
|
position: relative;
|
|
3254
3181
|
flex-shrink: 0;
|
|
3182
|
+
box-sizing: border-box;
|
|
3255
3183
|
cursor: var(--salt-navigable-cursor-hover);
|
|
3256
3184
|
color: var(--salt-content-primary-foreground);
|
|
3257
3185
|
font-weight: var(--salt-navigable-fontWeight);
|
|
@@ -3321,6 +3249,7 @@
|
|
|
3321
3249
|
.saltTabstripNext-main {
|
|
3322
3250
|
padding-left: var(--salt-spacing-300);
|
|
3323
3251
|
padding-right: var(--salt-spacing-300);
|
|
3252
|
+
box-sizing: border-box;
|
|
3324
3253
|
}
|
|
3325
3254
|
.saltTabstripNext-main::before {
|
|
3326
3255
|
content: "";
|
|
@@ -3331,6 +3260,7 @@
|
|
|
3331
3260
|
}
|
|
3332
3261
|
.saltTabstripNext .saltTabNext-wrapper:not(:last-child) {
|
|
3333
3262
|
padding-right: var(--salt-spacing-100);
|
|
3263
|
+
box-sizing: border-box;
|
|
3334
3264
|
}
|
|
3335
3265
|
|
|
3336
3266
|
/* src/toast-group/ToastGroup.css */
|
|
@@ -3411,6 +3341,7 @@
|
|
|
3411
3341
|
flex-wrap: wrap;
|
|
3412
3342
|
min-height: var(--tokenizedInput-height);
|
|
3413
3343
|
padding: var(--tokenizedInput-pill-group-y-padding) var(--tokenizedInput-spacing);
|
|
3344
|
+
box-sizing: border-box;
|
|
3414
3345
|
}
|
|
3415
3346
|
.saltTokenizedInput-disabled {
|
|
3416
3347
|
cursor: var(--salt-editable-cursor-disabled);
|
|
@@ -3508,6 +3439,7 @@
|
|
|
3508
3439
|
position: relative;
|
|
3509
3440
|
width: 100%;
|
|
3510
3441
|
overflow: hidden;
|
|
3442
|
+
box-sizing: border-box;
|
|
3511
3443
|
}
|
|
3512
3444
|
.saltTokenizedInputNext:hover {
|
|
3513
3445
|
--tokenizedInput-borderStyle: var(--salt-editable-borderStyle-hover);
|
|
@@ -4050,137 +3982,95 @@
|
|
|
4050
3982
|
.saltCalendarCarousel-track > :nth-child(2) {
|
|
4051
3983
|
position: relative;
|
|
4052
3984
|
}
|
|
4053
|
-
.saltCalendarCarousel-shouldAnimate {
|
|
4054
|
-
transition: transform 200ms ease-in-out;
|
|
4055
|
-
}
|
|
4056
3985
|
|
|
4057
3986
|
/* src/calendar/internal/CalendarDay.css */
|
|
4058
3987
|
.saltCalendarDay {
|
|
4059
|
-
|
|
4060
|
-
|
|
4061
|
-
|
|
4062
|
-
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
--calendar-day-blocked-background: var(--calendar-day-background);
|
|
4068
|
-
--calendar-day-unselectable-text-color: var(--salt-content-secondary-foreground-disabled);
|
|
4069
|
-
--calendar-day-unselectable-background: var(--calendar-day-background);
|
|
4070
|
-
--calendar-day-unselectable-cursor: var(--salt-selectable-cursor-disabled);
|
|
4071
|
-
--calendar-day-selected-background: var(--salt-selectable-background-selected);
|
|
4072
|
-
--calendar-day-selected-text-color: var(--salt-content-primary-foreground);
|
|
4073
|
-
--calendar-day-selectedStart-background: var(--salt-selectable-background-selected);
|
|
4074
|
-
--calendar-day-selectedStart-text-color: var(--salt-content-primary-foreground);
|
|
4075
|
-
--calendar-day-selectedEnd-background: var(--salt-selectable-background-selected);
|
|
4076
|
-
--calendar-day-selectedEnd-text-color: var(--salt-content-primary-foreground);
|
|
4077
|
-
--calendar-day-selectedSpan-background: var(--salt-selectable-background-blurSelected);
|
|
4078
|
-
--calendar-day-selectedSpan-text-color: var(--salt-content-primary-foreground);
|
|
4079
|
-
--calendar-day-hoveredSpan-background: var(--salt-selectable-background-hover);
|
|
4080
|
-
--calendar-day-hoveredSpan-text-color: var(--salt-content-primary-foreground);
|
|
4081
|
-
--calendar-day-hoveredOffset-background: var(--salt-selectable-background-hover);
|
|
4082
|
-
--calendar-day-hoveredOffset-text-color: var(--salt-content-primary-foreground);
|
|
4083
|
-
--calendar-day-currentDay-borderColor: var(--salt-content-primary-foreground);
|
|
4084
|
-
--calendar-day-focused-outline: var(--salt-focused-outline);
|
|
4085
|
-
--calendar-day-size: var(--salt-size-base);
|
|
4086
|
-
--calendar-day-fontSize: var(--salt-text-fontSize);
|
|
4087
|
-
}
|
|
4088
|
-
.saltCalendarDay {
|
|
4089
|
-
width: var(--calendar-day-size);
|
|
4090
|
-
height: var(--calendar-day-size);
|
|
4091
|
-
color: var(--calendar-day-text-color);
|
|
4092
|
-
background-color: var(--calendar-day-background);
|
|
4093
|
-
font-size: var(--calendar-day-fontSize);
|
|
4094
|
-
border: 0;
|
|
3988
|
+
font-family: var(--salt-text-fontFamily);
|
|
3989
|
+
font-weight: var(--salt-text-fontWeight);
|
|
3990
|
+
line-height: var(--salt-text-lineHeight);
|
|
3991
|
+
font-size: var(--salt-text-fontSize);
|
|
3992
|
+
width: var(--salt-size-base);
|
|
3993
|
+
height: var(--salt-size-base);
|
|
3994
|
+
color: var(--salt-content-primary-foreground);
|
|
3995
|
+
background: var(--salt-selectable-background);
|
|
4095
3996
|
cursor: pointer;
|
|
4096
|
-
|
|
3997
|
+
border: none;
|
|
3998
|
+
padding: 0;
|
|
4097
3999
|
display: flex;
|
|
4098
4000
|
justify-content: center;
|
|
4099
4001
|
align-items: center;
|
|
4002
|
+
position: relative;
|
|
4003
|
+
overflow: hidden;
|
|
4004
|
+
}
|
|
4005
|
+
.saltCalendarDay-content {
|
|
4006
|
+
margin: 0 var(--salt-spacing-50);
|
|
4007
|
+
width: 100%;
|
|
4100
4008
|
}
|
|
4101
4009
|
.saltCalendarDay:focus-visible {
|
|
4102
|
-
outline: var(--
|
|
4010
|
+
outline: var(--salt-focused-outline);
|
|
4103
4011
|
outline-offset: calc(0px - var(--salt-focused-outlineWidth));
|
|
4104
4012
|
}
|
|
4105
4013
|
.saltCalendarDay-outOfRange {
|
|
4106
|
-
color: var(--
|
|
4107
|
-
}
|
|
4108
|
-
.saltCalendarDay:hover {
|
|
4109
|
-
background: var(--calendar-day-background-hover);
|
|
4110
|
-
color: var(--calendar-day-text-color-hover);
|
|
4111
|
-
}
|
|
4112
|
-
.saltCalendarDay-unselectableMedium,
|
|
4113
|
-
.saltCalendarDay-unselectableMedium:hover {
|
|
4114
|
-
color: var(--calendar-day-blocked-text-color);
|
|
4115
|
-
cursor: var(--calendar-day-blocked-cursor);
|
|
4116
|
-
background: var(--calendar-day-blocked-background);
|
|
4117
|
-
}
|
|
4118
|
-
.saltCalendarDay-today {
|
|
4119
|
-
border: 1px solid var(--calendar-day-currentDay-borderColor);
|
|
4120
|
-
}
|
|
4121
|
-
.saltCalendarDay-selectedSpan {
|
|
4122
|
-
background: var(--calendar-day-selectedSpan-background);
|
|
4123
|
-
color: var(--calendar-day-selectedSpan-text-color);
|
|
4124
|
-
}
|
|
4125
|
-
.saltCalendarDay-hoveredSpan,
|
|
4126
|
-
.saltCalendarDay-hoveredSpan:hover {
|
|
4127
|
-
background: var(--calendar-day-hoveredSpan-background);
|
|
4128
|
-
color: var(--calendar-day-hoveredSpan-text-color);
|
|
4014
|
+
color: var(--salt-content-secondary-foreground);
|
|
4129
4015
|
}
|
|
4016
|
+
.saltCalendarDay:hover,
|
|
4130
4017
|
.saltCalendarDay-hoveredOffset,
|
|
4131
4018
|
.saltCalendarDay-hoveredOffset:hover {
|
|
4132
|
-
background: var(--
|
|
4133
|
-
color: var(--calendar-day-hoveredOffset-text-color);
|
|
4019
|
+
background: var(--salt-selectable-background-hover);
|
|
4134
4020
|
}
|
|
4135
|
-
.saltCalendarDay-
|
|
4136
|
-
|
|
4137
|
-
background: var(--calendar-day-selected-background);
|
|
4138
|
-
color: var(--calendar-day-selected-text-color);
|
|
4021
|
+
.saltCalendarDay-selectedStart {
|
|
4022
|
+
z-index: var(--salt-zIndex-default);
|
|
4139
4023
|
}
|
|
4024
|
+
.saltCalendarDay-selected,
|
|
4025
|
+
.saltCalendarDay-selected:hover,
|
|
4140
4026
|
.saltCalendarDay-selectedStart,
|
|
4141
|
-
.saltCalendarDay-selectedStart:hover
|
|
4142
|
-
background: var(--calendar-day-selectedStart-background);
|
|
4143
|
-
color: var(--calendar-day-selectedStart-text-color);
|
|
4144
|
-
}
|
|
4027
|
+
.saltCalendarDay-selectedStart:hover,
|
|
4145
4028
|
.saltCalendarDay-selectedEnd,
|
|
4146
4029
|
.saltCalendarDay-selectedEnd:hover {
|
|
4147
|
-
background: var(--
|
|
4148
|
-
|
|
4149
|
-
}
|
|
4150
|
-
.saltCalendarDay-selected:focus-visible {
|
|
4151
|
-
outline-color: var(--calendar-day-selected-focused-outlineColor);
|
|
4152
|
-
}
|
|
4153
|
-
.saltCalendarDay-selectedStart:focus-visible {
|
|
4154
|
-
outline-color: var(--calendar-day-selectedStart-focused-outlineColor);
|
|
4155
|
-
}
|
|
4156
|
-
.saltCalendarDay-selectedEnd:focus-visible {
|
|
4157
|
-
outline-color: var(--calendar-day-selectedEnd-focused-outlineColor);
|
|
4158
|
-
}
|
|
4159
|
-
.saltCalendarDay-unselectableLow,
|
|
4160
|
-
.saltCalendarDay-unselectableLow:hover {
|
|
4161
|
-
color: var(--calendar-day-unselectable-text-color);
|
|
4162
|
-
background: var(--calendar-day-unselectable-background);
|
|
4163
|
-
cursor: var(--calendar-day-unselectable-cursor);
|
|
4164
|
-
text-decoration: line-through;
|
|
4165
|
-
}
|
|
4166
|
-
.salt-density-high {
|
|
4167
|
-
--calendar-day-blocked-icon-size: 14px;
|
|
4030
|
+
background: var(--salt-selectable-background-selected);
|
|
4031
|
+
box-shadow: 0 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected);
|
|
4168
4032
|
}
|
|
4169
|
-
.
|
|
4170
|
-
|
|
4033
|
+
.saltCalendarDay-hoveredSpan,
|
|
4034
|
+
.saltCalendarDay-hoveredSpan:hover,
|
|
4035
|
+
.saltCalendarDay-selectedSpan,
|
|
4036
|
+
.saltCalendarDay-selectedSpan:hover {
|
|
4037
|
+
background: var(--salt-selectable-background-hover);
|
|
4038
|
+
box-shadow:
|
|
4039
|
+
calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
|
|
4040
|
+
calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
|
|
4041
|
+
0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
|
|
4042
|
+
}
|
|
4043
|
+
.saltCalendarDay-disabled,
|
|
4044
|
+
.saltCalendarDay-disabled:hover,
|
|
4045
|
+
.saltCalendarDay-unselectable,
|
|
4046
|
+
.saltCalendarDay-unselectable:hover {
|
|
4047
|
+
background: var(--salt-selectable-background-disabled);
|
|
4048
|
+
cursor: var(--salt-selectable-cursor-disabled);
|
|
4171
4049
|
}
|
|
4172
|
-
.
|
|
4173
|
-
|
|
4050
|
+
.saltCalendarDay-highlighted:before {
|
|
4051
|
+
content: "";
|
|
4052
|
+
height: var(--salt-spacing-200);
|
|
4053
|
+
width: var(--salt-spacing-200);
|
|
4054
|
+
top: calc(var(--salt-spacing-100) * -1);
|
|
4055
|
+
right: calc(var(--salt-spacing-100) * -1);
|
|
4056
|
+
transform: rotate(45deg);
|
|
4057
|
+
background: var(--salt-selectable-borderColor-selected);
|
|
4058
|
+
position: absolute;
|
|
4174
4059
|
}
|
|
4175
|
-
.
|
|
4176
|
-
--
|
|
4060
|
+
.saltCalendarDay-disabled {
|
|
4061
|
+
color: var(--salt-content-secondary-foreground-disabled);
|
|
4177
4062
|
}
|
|
4178
|
-
.saltCalendarDay-
|
|
4179
|
-
|
|
4063
|
+
.saltCalendarDay-unselectable:after {
|
|
4064
|
+
content: "";
|
|
4065
|
+
height: var(--salt-size-border);
|
|
4066
|
+
width: calc(100% - var(--salt-spacing-100));
|
|
4067
|
+
background: var(--salt-content-secondary-foreground);
|
|
4180
4068
|
position: absolute;
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4069
|
+
}
|
|
4070
|
+
.saltCalendarDay-today,
|
|
4071
|
+
.saltCalendarDay-today:hover {
|
|
4072
|
+
border-bottom: var(--salt-size-indicator) var(--salt-selectable-borderStyle) var(--salt-content-foreground-active);
|
|
4073
|
+
margin-bottom: calc(var(--salt-size-indicator) * -1);
|
|
4184
4074
|
}
|
|
4185
4075
|
.saltCalendarDay-hidden {
|
|
4186
4076
|
visibility: hidden;
|
|
@@ -4189,50 +4079,49 @@
|
|
|
4189
4079
|
/* src/calendar/internal/CalendarMonth.css */
|
|
4190
4080
|
.saltCalendarMonth-dateGrid {
|
|
4191
4081
|
display: grid;
|
|
4192
|
-
|
|
4082
|
+
gap: var(--salt-size-border);
|
|
4083
|
+
grid-template-columns: repeat(7, var(--salt-size-base));
|
|
4084
|
+
grid-template-rows: repeat(6, var(--salt-size-base));
|
|
4193
4085
|
text-align: center;
|
|
4086
|
+
margin: var(--salt-size-border);
|
|
4194
4087
|
}
|
|
4195
4088
|
|
|
4196
4089
|
/* src/calendar/internal/CalendarNavigation.css */
|
|
4197
|
-
.salt-density-medium,
|
|
4198
|
-
.salt-density-touch,
|
|
4199
|
-
.salt-density-low {
|
|
4200
|
-
--calendar-navigation-gap: calc(var(--salt-size-unit) * 0.5);
|
|
4201
|
-
}
|
|
4202
|
-
.salt-density-high {
|
|
4203
|
-
--calendar-navigation-gap: 0px;
|
|
4204
|
-
}
|
|
4205
|
-
.saltCalendarNavigation-hideYearDropdown {
|
|
4206
|
-
--calendar-navigation-gap: calc(var(--salt-size-unit) * 2);
|
|
4207
|
-
}
|
|
4208
4090
|
.saltCalendarNavigation {
|
|
4209
4091
|
display: grid;
|
|
4210
|
-
grid-template-columns: min-content auto
|
|
4211
|
-
|
|
4092
|
+
grid-template-columns: min-content auto min-content;
|
|
4093
|
+
padding-bottom: var(--salt-spacing-100);
|
|
4094
|
+
grid-gap: 0;
|
|
4095
|
+
align-items: center;
|
|
4096
|
+
height: var(--salt-size-base);
|
|
4212
4097
|
}
|
|
4213
4098
|
.saltCalendarNavigation-hideYearDropdown {
|
|
4214
4099
|
grid-template-columns: min-content auto min-content;
|
|
4100
|
+
grid-gap: var(--salt-spacing-300);
|
|
4101
|
+
}
|
|
4102
|
+
.saltCalendarNavigation-dropdowns {
|
|
4103
|
+
display: grid;
|
|
4104
|
+
grid-template-columns: 1fr 1fr;
|
|
4105
|
+
grid-gap: var(--salt-spacing-100);
|
|
4215
4106
|
}
|
|
4216
4107
|
|
|
4217
4108
|
/* src/calendar/internal/CalendarWeekHeader.css */
|
|
4218
|
-
.saltCalendarWeekHeader {
|
|
4219
|
-
--calendar-week-header-underline-color: var(--salt-separable-secondary-borderColor);
|
|
4220
|
-
--calendar-week-header-text-color: var(--salt-content-secondary-foreground);
|
|
4221
|
-
--calendar-week-header-size: var(--salt-size-base);
|
|
4222
|
-
--calendar-week-header-fontSize: var(--saltCalendar-week-header-fontSize, var(--salt-text-label-fontSize));
|
|
4223
|
-
}
|
|
4224
4109
|
.saltCalendarWeekHeader {
|
|
4225
4110
|
display: grid;
|
|
4226
|
-
|
|
4111
|
+
gap: var(--salt-size-border);
|
|
4112
|
+
grid-template-columns: repeat(7, var(--salt-size-base));
|
|
4227
4113
|
text-align: center;
|
|
4228
|
-
|
|
4114
|
+
align-items: center;
|
|
4115
|
+
height: var(--salt-size-base);
|
|
4116
|
+
margin: var(--salt-size-border);
|
|
4229
4117
|
}
|
|
4230
4118
|
.saltCalendarWeekHeader-dayOfWeek {
|
|
4231
|
-
width: var(--
|
|
4232
|
-
|
|
4233
|
-
|
|
4234
|
-
|
|
4235
|
-
font-size: var(--
|
|
4119
|
+
width: var(--salt-size-base);
|
|
4120
|
+
color: var(--salt-content-secondary-foreground);
|
|
4121
|
+
font-family: var(--salt-text-fontFamily);
|
|
4122
|
+
font-weight: var(--salt-text-fontWeight);
|
|
4123
|
+
font-size: var(--salt-text-fontSize);
|
|
4124
|
+
line-height: var(--salt-text-lineHeight);
|
|
4236
4125
|
}
|
|
4237
4126
|
|
|
4238
4127
|
/* src/list-deprecated/internal/Highlighter.css */
|
|
@@ -4430,4 +4319,4 @@
|
|
|
4430
4319
|
margin: calc(var(--salt-size-unit) / 2) 0;
|
|
4431
4320
|
}
|
|
4432
4321
|
|
|
4433
|
-
/* src/
|
|
4322
|
+
/* src/c6e1d4ac-675b-4241-bf4e-3d3c78a6ade3.css */
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltCalendar {\n width: min-content;\n}\n";
|
|
3
|
+
var css_248z = ".saltCalendar {\n width: min-content;\n background: var(--salt-container-primary-background);\n padding: var(--salt-spacing-100);\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=Calendar.css.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var css_248z = ".saltCalendarCarousel-track {\n display: grid;\n grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n position: absolute;\n left: 0;\n width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n position: relative;\n}\n
|
|
3
|
+
var css_248z = ".saltCalendarCarousel-track {\n display: grid;\n grid-auto-flow: column;\n}\n\n.saltCalendarCarousel-track > * {\n position: absolute;\n left: 0;\n width: 100%;\n}\n\n.saltCalendarCarousel-track > :nth-child(2) {\n position: relative;\n}\n";
|
|
4
4
|
|
|
5
5
|
module.exports = css_248z;
|
|
6
6
|
//# sourceMappingURL=CalendarCarousel.css.js.map
|
|
@@ -10,20 +10,16 @@ var core = require('@salt-ds/core');
|
|
|
10
10
|
var CalendarContext = require('./CalendarContext.js');
|
|
11
11
|
var CalendarCarousel$1 = require('./CalendarCarousel.css.js');
|
|
12
12
|
var utils = require('./utils.js');
|
|
13
|
-
var window
|
|
13
|
+
var window = require('@salt-ds/window');
|
|
14
14
|
var styles = require('@salt-ds/styles');
|
|
15
15
|
|
|
16
16
|
function getMonths(month) {
|
|
17
17
|
return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];
|
|
18
18
|
}
|
|
19
|
-
function usePreviousMonth(visibleMonth) {
|
|
20
|
-
const previous = core.usePrevious(visibleMonth, [utils.formatDate(visibleMonth)]);
|
|
21
|
-
return previous != null ? previous : date.today(date.getLocalTimeZone());
|
|
22
|
-
}
|
|
23
19
|
const withBaseName = core.makePrefixer("saltCalendarCarousel");
|
|
24
20
|
const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref) {
|
|
25
21
|
const { ...rest } = props;
|
|
26
|
-
const targetWindow = window
|
|
22
|
+
const targetWindow = window.useWindow();
|
|
27
23
|
styles.useComponentCssInjection({
|
|
28
24
|
testId: "salt-calendar-carousel",
|
|
29
25
|
css: CalendarCarousel$1,
|
|
@@ -35,18 +31,9 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
|
|
|
35
31
|
const containerRef = React.useRef(null);
|
|
36
32
|
const diffIndex = (a, b) => utils.monthDiff(a, b);
|
|
37
33
|
const { current: baseIndex } = React.useRef(visibleMonth);
|
|
38
|
-
const previousVisibleMonth = usePreviousMonth(visibleMonth);
|
|
39
|
-
core.useIsomorphicLayoutEffect(() => {
|
|
40
|
-
var _a, _b;
|
|
41
|
-
if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {
|
|
42
|
-
(_a = containerRef.current) == null ? void 0 : _a.classList.remove(withBaseName("shouldAnimate"));
|
|
43
|
-
} else {
|
|
44
|
-
(_b = containerRef.current) == null ? void 0 : _b.classList.add(withBaseName("shouldAnimate"));
|
|
45
|
-
}
|
|
46
|
-
}, [utils.formatDate(visibleMonth), utils.formatDate(previousVisibleMonth)]);
|
|
47
34
|
core.useIsomorphicLayoutEffect(() => {
|
|
48
35
|
if (containerRef.current) {
|
|
49
|
-
containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) *
|
|
36
|
+
containerRef.current.style.transform = `translate3d(${diffIndex(baseIndex, visibleMonth) * -101}%, 0, 0)`;
|
|
50
37
|
}
|
|
51
38
|
});
|
|
52
39
|
const [months, setMonths] = React.useState(() => getMonths(visibleMonth));
|
|
@@ -57,18 +44,7 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
|
|
|
57
44
|
});
|
|
58
45
|
return oldMonths.concat(newMonths);
|
|
59
46
|
});
|
|
60
|
-
|
|
61
|
-
setMonths(getMonths(visibleMonth));
|
|
62
|
-
};
|
|
63
|
-
const container = containerRef.current;
|
|
64
|
-
if (container && parseFloat(window.getComputedStyle(container).transitionDuration) > 0) {
|
|
65
|
-
container == null ? void 0 : container.addEventListener("transitionend", finishTransition);
|
|
66
|
-
return () => {
|
|
67
|
-
container == null ? void 0 : container.removeEventListener("transitionend", finishTransition);
|
|
68
|
-
};
|
|
69
|
-
} else {
|
|
70
|
-
finishTransition();
|
|
71
|
-
}
|
|
47
|
+
setMonths(getMonths(visibleMonth));
|
|
72
48
|
return void 0;
|
|
73
49
|
}, [utils.formatDate(visibleMonth)]);
|
|
74
50
|
return /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
@@ -84,7 +60,7 @@ const CalendarCarousel = React.forwardRef(function CalendarCarousel2(props, ref)
|
|
|
84
60
|
children: months.map((date, index) => /* @__PURE__ */ jsxRuntime.jsx("div", {
|
|
85
61
|
className: withBaseName("slide"),
|
|
86
62
|
style: {
|
|
87
|
-
transform: `translateX(${diffIndex(date, baseIndex) *
|
|
63
|
+
transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`
|
|
88
64
|
},
|
|
89
65
|
"aria-hidden": index !== 1 ? "true" : void 0,
|
|
90
66
|
children: /* @__PURE__ */ jsxRuntime.jsx(CalendarMonth.CalendarMonth, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CalendarCarousel.js","sources":["../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport {
|
|
1
|
+
{"version":3,"file":"CalendarCarousel.js","sources":["../src/calendar/internal/CalendarCarousel.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef, useState } from \"react\";\nimport { DateValue, isSameMonth } from \"@internationalized/date\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useCalendarContext } from \"./CalendarContext\";\n\nimport calendarCarouselCss from \"./CalendarCarousel.css\";\nimport { formatDate, monthDiff } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type CalendarCarouselProps = Omit<CalendarMonthProps, \"date\">;\n\nfunction getMonths(month: DateValue) {\n return [month.subtract({ months: 1 }), month, month.add({ months: 1 })];\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarCarousel\");\n\nexport const CalendarCarousel = forwardRef<\n HTMLDivElement,\n CalendarCarouselProps\n>(function CalendarCarousel(props, ref) {\n const { ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-carousel\",\n css: calendarCarouselCss,\n window: targetWindow,\n });\n\n const {\n state: { visibleMonth },\n } = useCalendarContext();\n const containerRef = useRef<HTMLDivElement>(null);\n const diffIndex = (a: DateValue, b: DateValue) => monthDiff(a, b);\n\n const { current: baseIndex } = useRef(visibleMonth);\n\n useIsomorphicLayoutEffect(() => {\n if (containerRef.current) {\n containerRef.current.style.transform = `translate3d(${\n diffIndex(baseIndex, visibleMonth) * -101 // needs to be higher than 100% so the next month doesn't show on the edges\n }%, 0, 0)`;\n }\n });\n\n const [months, setMonths] = useState(() => getMonths(visibleMonth));\n\n useEffect(() => {\n setMonths((oldMonths) => {\n const newMonths = getMonths(visibleMonth).filter((month) => {\n return !oldMonths.find((oldMonth) => isSameMonth(oldMonth, month));\n });\n\n return oldMonths.concat(newMonths);\n });\n setMonths(getMonths(visibleMonth));\n return undefined;\n }, [formatDate(visibleMonth)]); // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <div\n className={withBaseName()}\n style={{\n overflowX: \"hidden\",\n position: \"relative\",\n }}\n ref={ref}\n >\n <div className={withBaseName(\"track\")} ref={containerRef}>\n {months.map((date, index) => (\n <div\n key={formatDate(date)}\n className={withBaseName(\"slide\")}\n style={{\n transform: `translateX(${diffIndex(date, baseIndex) * -101}%)`,\n }}\n aria-hidden={index !== 1 ? \"true\" : undefined}\n >\n <CalendarMonth isVisible={index === 1} {...rest} date={date} />\n </div>\n ))}\n </div>\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","CalendarCarousel","useWindow","useComponentCssInjection","calendarCarouselCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useState","useEffect","isSameMonth","formatDate","jsx","CalendarMonth"],"mappings":"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"}
|