@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.
Files changed (142) hide show
  1. package/css/salt-lab.css +120 -231
  2. package/dist-cjs/calendar/Calendar.css.js +1 -1
  3. package/dist-cjs/calendar/internal/CalendarCarousel.css.js +1 -1
  4. package/dist-cjs/calendar/internal/CalendarCarousel.js +5 -29
  5. package/dist-cjs/calendar/internal/CalendarCarousel.js.map +1 -1
  6. package/dist-cjs/calendar/internal/CalendarContext.js.map +1 -1
  7. package/dist-cjs/calendar/internal/CalendarDay.css.js +1 -1
  8. package/dist-cjs/calendar/internal/CalendarDay.js +18 -19
  9. package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
  10. package/dist-cjs/calendar/internal/CalendarMonth.css.js +1 -1
  11. package/dist-cjs/calendar/internal/CalendarMonth.js +0 -2
  12. package/dist-cjs/calendar/internal/CalendarMonth.js.map +1 -1
  13. package/dist-cjs/calendar/internal/CalendarNavigation.css.js +1 -1
  14. package/dist-cjs/calendar/internal/CalendarNavigation.js +74 -81
  15. package/dist-cjs/calendar/internal/CalendarNavigation.js.map +1 -1
  16. package/dist-cjs/calendar/internal/CalendarWeekHeader.css.js +1 -1
  17. package/dist-cjs/calendar/useCalendar.js +14 -8
  18. package/dist-cjs/calendar/useCalendar.js.map +1 -1
  19. package/dist-cjs/calendar/useCalendarDay.js +15 -5
  20. package/dist-cjs/calendar/useCalendarDay.js.map +1 -1
  21. package/dist-cjs/calendar/useSelection.js.map +1 -1
  22. package/dist-cjs/combo-box-next/ComboBoxNext.js +36 -13
  23. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  24. package/dist-cjs/combo-box-next/useComboBoxNext.js +16 -15
  25. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -1
  26. package/dist-cjs/dialog/Dialog.css.js +1 -1
  27. package/dist-cjs/dialog/DialogHeader.css.js +6 -0
  28. package/dist-cjs/dialog/DialogHeader.css.js.map +1 -0
  29. package/dist-cjs/dialog/{DialogTitle.js → DialogHeader.js} +16 -16
  30. package/dist-cjs/dialog/DialogHeader.js.map +1 -0
  31. package/dist-cjs/dropdown-next/DropdownNext.js +7 -8
  32. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  33. package/dist-cjs/form-field-legacy/FormLabel.css.js +1 -1
  34. package/dist-cjs/index.js +2 -6
  35. package/dist-cjs/index.js.map +1 -1
  36. package/dist-cjs/input-legacy/InputLegacy.css.js +1 -1
  37. package/dist-cjs/layer-layout/LayerLayout.css.js +1 -1
  38. package/dist-cjs/list/List.css.js +1 -1
  39. package/dist-cjs/list-control/ListControlContext.js +3 -1
  40. package/dist-cjs/list-control/ListControlContext.js.map +1 -1
  41. package/dist-cjs/list-control/ListControlState.js +16 -18
  42. package/dist-cjs/list-control/ListControlState.js.map +1 -1
  43. package/dist-cjs/option/Option.css.js +1 -1
  44. package/dist-cjs/option/Option.js +10 -20
  45. package/dist-cjs/option/Option.js.map +1 -1
  46. package/dist-cjs/option/OptionList.css.js +1 -1
  47. package/dist-cjs/overlay/Overlay.css.js +1 -1
  48. package/dist-cjs/tabs-next/TabNext.css.js +1 -1
  49. package/dist-cjs/tabs-next/TabstripNext.css.js +1 -1
  50. package/dist-cjs/tokenized-input/TokenizedInput.css.js +1 -1
  51. package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +1 -1
  52. package/dist-es/calendar/Calendar.css.js +1 -1
  53. package/dist-es/calendar/internal/CalendarCarousel.css.js +1 -1
  54. package/dist-es/calendar/internal/CalendarCarousel.js +5 -29
  55. package/dist-es/calendar/internal/CalendarCarousel.js.map +1 -1
  56. package/dist-es/calendar/internal/CalendarContext.js.map +1 -1
  57. package/dist-es/calendar/internal/CalendarDay.css.js +1 -1
  58. package/dist-es/calendar/internal/CalendarDay.js +20 -21
  59. package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
  60. package/dist-es/calendar/internal/CalendarMonth.css.js +1 -1
  61. package/dist-es/calendar/internal/CalendarMonth.js +0 -2
  62. package/dist-es/calendar/internal/CalendarMonth.js.map +1 -1
  63. package/dist-es/calendar/internal/CalendarNavigation.css.js +1 -1
  64. package/dist-es/calendar/internal/CalendarNavigation.js +75 -82
  65. package/dist-es/calendar/internal/CalendarNavigation.js.map +1 -1
  66. package/dist-es/calendar/internal/CalendarWeekHeader.css.js +1 -1
  67. package/dist-es/calendar/useCalendar.js +14 -8
  68. package/dist-es/calendar/useCalendar.js.map +1 -1
  69. package/dist-es/calendar/useCalendarDay.js +15 -5
  70. package/dist-es/calendar/useCalendarDay.js.map +1 -1
  71. package/dist-es/calendar/useSelection.js.map +1 -1
  72. package/dist-es/combo-box-next/ComboBoxNext.js +36 -13
  73. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  74. package/dist-es/combo-box-next/useComboBoxNext.js +16 -15
  75. package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -1
  76. package/dist-es/dialog/Dialog.css.js +1 -1
  77. package/dist-es/dialog/DialogHeader.css.js +4 -0
  78. package/dist-es/dialog/DialogHeader.css.js.map +1 -0
  79. package/dist-es/dialog/{DialogTitle.js → DialogHeader.js} +16 -16
  80. package/dist-es/dialog/DialogHeader.js.map +1 -0
  81. package/dist-es/dropdown-next/DropdownNext.js +8 -9
  82. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  83. package/dist-es/form-field-legacy/FormLabel.css.js +1 -1
  84. package/dist-es/index.js +1 -3
  85. package/dist-es/index.js.map +1 -1
  86. package/dist-es/input-legacy/InputLegacy.css.js +1 -1
  87. package/dist-es/layer-layout/LayerLayout.css.js +1 -1
  88. package/dist-es/list/List.css.js +1 -1
  89. package/dist-es/list-control/ListControlContext.js +3 -1
  90. package/dist-es/list-control/ListControlContext.js.map +1 -1
  91. package/dist-es/list-control/ListControlState.js +16 -19
  92. package/dist-es/list-control/ListControlState.js.map +1 -1
  93. package/dist-es/option/Option.css.js +1 -1
  94. package/dist-es/option/Option.js +11 -21
  95. package/dist-es/option/Option.js.map +1 -1
  96. package/dist-es/option/OptionList.css.js +1 -1
  97. package/dist-es/overlay/Overlay.css.js +1 -1
  98. package/dist-es/tabs-next/TabNext.css.js +1 -1
  99. package/dist-es/tabs-next/TabstripNext.css.js +1 -1
  100. package/dist-es/tokenized-input/TokenizedInput.css.js +1 -1
  101. package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +1 -1
  102. package/dist-types/calendar/internal/CalendarContext.d.ts +2 -2
  103. package/dist-types/calendar/internal/CalendarNavigation.d.ts +3 -7
  104. package/dist-types/calendar/useCalendarDay.d.ts +7 -4
  105. package/dist-types/calendar/useSelection.d.ts +4 -4
  106. package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -10
  107. package/dist-types/combo-box-next/useComboBoxNext.d.ts +6 -4
  108. package/dist-types/dialog/DialogHeader.d.ts +22 -0
  109. package/dist-types/dialog/index.d.ts +1 -1
  110. package/dist-types/dropdown-next/DropdownNext.d.ts +49 -7
  111. package/dist-types/index.d.ts +0 -1
  112. package/dist-types/list-control/ListControlContext.d.ts +1 -1
  113. package/dist-types/list-control/ListControlState.d.ts +14 -12
  114. package/dist-types/option/Option.d.ts +0 -4
  115. package/package.json +2 -2
  116. package/dist-cjs/dialog/DialogTitle.css.js +0 -6
  117. package/dist-cjs/dialog/DialogTitle.css.js.map +0 -1
  118. package/dist-cjs/dialog/DialogTitle.js.map +0 -1
  119. package/dist-cjs/drawer/Drawer.css.js +0 -6
  120. package/dist-cjs/drawer/Drawer.css.js.map +0 -1
  121. package/dist-cjs/drawer/Drawer.js +0 -104
  122. package/dist-cjs/drawer/Drawer.js.map +0 -1
  123. package/dist-cjs/drawer/DrawerCloseButton.css.js +0 -6
  124. package/dist-cjs/drawer/DrawerCloseButton.css.js.map +0 -1
  125. package/dist-cjs/drawer/DrawerCloseButton.js +0 -44
  126. package/dist-cjs/drawer/DrawerCloseButton.js.map +0 -1
  127. package/dist-es/dialog/DialogTitle.css.js +0 -4
  128. package/dist-es/dialog/DialogTitle.css.js.map +0 -1
  129. package/dist-es/dialog/DialogTitle.js.map +0 -1
  130. package/dist-es/drawer/Drawer.css.js +0 -4
  131. package/dist-es/drawer/Drawer.css.js.map +0 -1
  132. package/dist-es/drawer/Drawer.js +0 -100
  133. package/dist-es/drawer/Drawer.js.map +0 -1
  134. package/dist-es/drawer/DrawerCloseButton.css.js +0 -4
  135. package/dist-es/drawer/DrawerCloseButton.css.js.map +0 -1
  136. package/dist-es/drawer/DrawerCloseButton.js +0 -36
  137. package/dist-es/drawer/DrawerCloseButton.js.map +0 -1
  138. package/dist-types/calendar/useCalendar.d.ts +0 -60
  139. package/dist-types/dialog/DialogTitle.d.ts +0 -22
  140. package/dist-types/drawer/Drawer.d.ts +0 -28
  141. package/dist-types/drawer/DrawerCloseButton.d.ts +0 -2
  142. 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
- .saltDialog-overlay {
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/DialogTitle.css */
994
- .saltDialogTitle {
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
- .saltDialogTitle-title {
1000
+ .saltDialogHeader-header {
1004
1001
  margin: 0;
1005
1002
  }
1006
- .saltDialogTitle .saltStatusIndicator.saltIcon {
1003
+ .saltDialogHeader .saltStatusIndicator.saltIcon {
1007
1004
  --icon-size: var(--salt-text-h2-lineHeight);
1008
1005
  }
1009
- .saltDialogTitle-withAccent {
1006
+ .saltDialogHeader-withAccent {
1010
1007
  position: relative;
1011
1008
  }
1012
- .saltDialogTitle-withAccent::before {
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
- .saltDialogTitle-error::before {
1018
+ .saltDialogHeader-error::before {
1022
1019
  background: var(--salt-status-error-borderColor);
1023
1020
  }
1024
- .saltDialogTitle-info::before {
1021
+ .saltDialogHeader-info::before {
1025
1022
  background: var(--salt-status-info-borderColor);
1026
1023
  }
1027
- .saltDialogTitle-success::before {
1024
+ .saltDialogHeader-success::before {
1028
1025
  background: var(--salt-status-success-borderColor);
1029
1026
  }
1030
- .saltDialogTitle-warning::before {
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
- --calendar-day-text-color: var(--salt-content-primary-foreground);
4060
- --calendar-day-background: var(--salt-selectable-background);
4061
- --calendar-day-background-hover: var(--salt-selectable-background-hover);
4062
- --calendar-day-text-color-hover: var(--salt-content-primary-foreground);
4063
- --calendar-day-outOfRange-text-color: var(--salt-content-secondary-foreground-disabled);
4064
- --calendar-day-blocked-text-color: var(--salt-content-primary-foreground);
4065
- --calendar-day-blocked-cursor: var(--salt-selectable-cursor-disabled);
4066
- --calendar-day-blocked-icon-color: var(--salt-status-error-foreground);
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
- position: relative;
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(--calendar-day-focused-outline);
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(--calendar-day-outOfRange-text-color);
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(--calendar-day-hoveredOffset-background);
4133
- color: var(--calendar-day-hoveredOffset-text-color);
4019
+ background: var(--salt-selectable-background-hover);
4134
4020
  }
4135
- .saltCalendarDay-selected,
4136
- .saltCalendarDay-selected:hover {
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(--calendar-day-selectedEnd-background);
4148
- color: var(--calendar-day-selectedEnd-text-color);
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
- .salt-density-medium {
4170
- --calendar-day-blocked-icon-size: 18px;
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
- .salt-density-low {
4173
- --calendar-day-blocked-icon-size: 24px;
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
- .salt-density-touch {
4176
- --calendar-day-blocked-icon-size: 28px;
4060
+ .saltCalendarDay-disabled {
4061
+ color: var(--salt-content-secondary-foreground-disabled);
4177
4062
  }
4178
- .saltCalendarDay-blockedIcon {
4179
- fill: var(--calendar-day-blocked-icon-color);
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
- --icon-size: var(--calendar-day-blocked-icon-size);
4182
- pointer-events: none;
4183
- line-height: 1.29;
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
- grid-template-columns: repeat(7, 1fr);
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 auto min-content;
4211
- grid-gap: var(--calendar-navigation-gap);
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
- grid-template-columns: repeat(7, 1fr);
4111
+ gap: var(--salt-size-border);
4112
+ grid-template-columns: repeat(7, var(--salt-size-base));
4227
4113
  text-align: center;
4228
- box-shadow: inset 0 -1px 0 var(--calendar-week-header-underline-color);
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(--calendar-week-header-size);
4232
- height: var(--calendar-week-header-size);
4233
- color: var(--calendar-week-header-text-color);
4234
- line-height: var(--calendar-week-header-size);
4235
- font-size: var(--calendar-week-header-fontSize);
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/6968719c-0a90-4ad1-a18c-2d338be48eda.css */
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\n.saltCalendarCarousel-shouldAnimate {\n transition: transform 200ms ease-in-out;\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$1 = require('@salt-ds/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$1.useWindow();
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) * 100}%, 0, 0)`;
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
- const finishTransition = () => {
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) * 100}%)`
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 {\n DateValue,\n getLocalTimeZone,\n isSameMonth,\n today,\n} from \"@internationalized/date\";\nimport { CalendarMonth, CalendarMonthProps } from \"./CalendarMonth\";\nimport {\n makePrefixer,\n useIsomorphicLayoutEffect,\n usePrevious,\n} 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\nfunction usePreviousMonth(visibleMonth: DateValue) {\n const previous = usePrevious(visibleMonth, [formatDate(visibleMonth)]);\n\n return previous ?? today(getLocalTimeZone());\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 const previousVisibleMonth = usePreviousMonth(visibleMonth);\n\n useIsomorphicLayoutEffect(() => {\n if (Math.abs(diffIndex(visibleMonth, previousVisibleMonth)) > 1) {\n containerRef.current?.classList.remove(withBaseName(\"shouldAnimate\"));\n } else {\n containerRef.current?.classList.add(withBaseName(\"shouldAnimate\"));\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [formatDate(visibleMonth), formatDate(previousVisibleMonth)]);\n\n useIsomorphicLayoutEffect(() => {\n if (containerRef.current) {\n containerRef.current.style.transform = `translate3d(${\n diffIndex(baseIndex, visibleMonth) * 100\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 const finishTransition = () => {\n setMonths(getMonths(visibleMonth));\n };\n const container = containerRef.current;\n\n if (\n container &&\n parseFloat(window.getComputedStyle(container).transitionDuration) > 0\n ) {\n container?.addEventListener(\"transitionend\", finishTransition);\n\n return () => {\n container?.removeEventListener(\"transitionend\", finishTransition);\n };\n } else {\n finishTransition();\n }\n\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) * 100}%)`,\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":["usePrevious","formatDate","today","getLocalTimeZone","makePrefixer","forwardRef","CalendarCarousel","useWindow","useComponentCssInjection","calendarCarouselCss","useCalendarContext","useRef","monthDiff","useIsomorphicLayoutEffect","useState","useEffect","isSameMonth","jsx","CalendarMonth"],"mappings":"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"}
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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"}