@salt-ds/lab 1.0.0-alpha.39 → 1.0.0-alpha.40

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 (151) hide show
  1. package/css/salt-lab.css +288 -57
  2. package/dist-cjs/calendar/internal/CalendarDay.js +1 -0
  3. package/dist-cjs/calendar/internal/CalendarDay.js.map +1 -1
  4. package/dist-cjs/carousel/CarouselSlide.js +1 -2
  5. package/dist-cjs/carousel/CarouselSlide.js.map +1 -1
  6. package/dist-cjs/color-chooser/ColorChooser.js +10 -12
  7. package/dist-cjs/color-chooser/ColorChooser.js.map +1 -1
  8. package/dist-cjs/date-input/DateInput.css.js +6 -0
  9. package/dist-cjs/date-input/DateInput.css.js.map +1 -0
  10. package/dist-cjs/date-input/DateInput.js +153 -0
  11. package/dist-cjs/date-input/DateInput.js.map +1 -0
  12. package/dist-cjs/index.js +12 -10
  13. package/dist-cjs/index.js.map +1 -1
  14. package/dist-cjs/menu/Menu.js +24 -0
  15. package/dist-cjs/menu/Menu.js.map +1 -0
  16. package/dist-cjs/menu/MenuBase.js +116 -0
  17. package/dist-cjs/menu/MenuBase.js.map +1 -0
  18. package/dist-cjs/menu/MenuContext.js +26 -0
  19. package/dist-cjs/menu/MenuContext.js.map +1 -0
  20. package/dist-cjs/menu/MenuGroup.css.js +6 -0
  21. package/dist-cjs/menu/MenuGroup.css.js.map +1 -0
  22. package/dist-cjs/menu/MenuGroup.js +44 -0
  23. package/dist-cjs/menu/MenuGroup.js.map +1 -0
  24. package/dist-cjs/menu/MenuItem.css.js +6 -0
  25. package/dist-cjs/menu/MenuItem.css.js.map +1 -0
  26. package/dist-cjs/menu/MenuItem.js +92 -0
  27. package/dist-cjs/menu/MenuItem.js.map +1 -0
  28. package/dist-cjs/menu/MenuPanel.css.js +6 -0
  29. package/dist-cjs/menu/MenuPanel.css.js.map +1 -0
  30. package/dist-cjs/menu/MenuPanel.js +61 -0
  31. package/dist-cjs/menu/MenuPanel.js.map +1 -0
  32. package/dist-cjs/menu/MenuPanelBase.js +29 -0
  33. package/dist-cjs/menu/MenuPanelBase.js.map +1 -0
  34. package/dist-cjs/menu/MenuPanelContext.js +22 -0
  35. package/dist-cjs/menu/MenuPanelContext.js.map +1 -0
  36. package/dist-cjs/menu/MenuTrigger.js +43 -0
  37. package/dist-cjs/menu/MenuTrigger.js.map +1 -0
  38. package/dist-cjs/menu/MenuTriggerContext.js +18 -0
  39. package/dist-cjs/menu/MenuTriggerContext.js.map +1 -0
  40. package/dist-cjs/parent-child-layout/ParentChildLayout.css.js +1 -1
  41. package/dist-cjs/parent-child-layout/ParentChildLayout.js +22 -33
  42. package/dist-cjs/parent-child-layout/ParentChildLayout.js.map +1 -1
  43. package/dist-cjs/tabs-next/TabNext.js +1 -0
  44. package/dist-cjs/tabs-next/TabNext.js.map +1 -1
  45. package/dist-cjs/utils/useIsViewportLargerThanBreakpoint.js +2 -2
  46. package/dist-cjs/utils/useIsViewportLargerThanBreakpoint.js.map +1 -1
  47. package/dist-es/calendar/internal/CalendarDay.js +1 -0
  48. package/dist-es/calendar/internal/CalendarDay.js.map +1 -1
  49. package/dist-es/carousel/CarouselSlide.js +1 -2
  50. package/dist-es/carousel/CarouselSlide.js.map +1 -1
  51. package/dist-es/color-chooser/ColorChooser.js +9 -11
  52. package/dist-es/color-chooser/ColorChooser.js.map +1 -1
  53. package/dist-es/date-input/DateInput.css.js +4 -0
  54. package/dist-es/date-input/DateInput.css.js.map +1 -0
  55. package/dist-es/date-input/DateInput.js +149 -0
  56. package/dist-es/date-input/DateInput.js.map +1 -0
  57. package/dist-es/index.js +6 -5
  58. package/dist-es/index.js.map +1 -1
  59. package/dist-es/menu/Menu.js +20 -0
  60. package/dist-es/menu/Menu.js.map +1 -0
  61. package/dist-es/menu/MenuBase.js +112 -0
  62. package/dist-es/menu/MenuBase.js.map +1 -0
  63. package/dist-es/menu/MenuContext.js +21 -0
  64. package/dist-es/menu/MenuContext.js.map +1 -0
  65. package/dist-es/menu/MenuGroup.css.js +4 -0
  66. package/dist-es/menu/MenuGroup.css.js.map +1 -0
  67. package/dist-es/menu/MenuGroup.js +40 -0
  68. package/dist-es/menu/MenuGroup.js.map +1 -0
  69. package/dist-es/menu/MenuItem.css.js +4 -0
  70. package/dist-es/menu/MenuItem.css.js.map +1 -0
  71. package/dist-es/menu/MenuItem.js +88 -0
  72. package/dist-es/menu/MenuItem.js.map +1 -0
  73. package/dist-es/menu/MenuPanel.css.js +4 -0
  74. package/dist-es/menu/MenuPanel.css.js.map +1 -0
  75. package/dist-es/menu/MenuPanel.js +57 -0
  76. package/dist-es/menu/MenuPanel.js.map +1 -0
  77. package/dist-es/menu/MenuPanelBase.js +25 -0
  78. package/dist-es/menu/MenuPanelBase.js.map +1 -0
  79. package/dist-es/menu/MenuPanelContext.js +17 -0
  80. package/dist-es/menu/MenuPanelContext.js.map +1 -0
  81. package/dist-es/menu/MenuTrigger.js +39 -0
  82. package/dist-es/menu/MenuTrigger.js.map +1 -0
  83. package/dist-es/menu/MenuTriggerContext.js +13 -0
  84. package/dist-es/menu/MenuTriggerContext.js.map +1 -0
  85. package/dist-es/parent-child-layout/ParentChildLayout.css.js +1 -1
  86. package/dist-es/parent-child-layout/ParentChildLayout.js +23 -34
  87. package/dist-es/parent-child-layout/ParentChildLayout.js.map +1 -1
  88. package/dist-es/tabs-next/TabNext.js +1 -0
  89. package/dist-es/tabs-next/TabNext.js.map +1 -1
  90. package/dist-es/utils/useIsViewportLargerThanBreakpoint.js +2 -2
  91. package/dist-es/utils/useIsViewportLargerThanBreakpoint.js.map +1 -1
  92. package/dist-types/carousel/CarouselSlide.d.ts +1 -2
  93. package/dist-types/date-input/DateInput.d.ts +33 -0
  94. package/dist-types/date-input/index.d.ts +1 -0
  95. package/dist-types/index.d.ts +2 -1
  96. package/dist-types/menu/Menu.d.ts +4 -0
  97. package/dist-types/menu/MenuBase.d.ts +22 -0
  98. package/dist-types/menu/MenuContext.d.ts +16 -0
  99. package/dist-types/menu/MenuGroup.d.ts +12 -0
  100. package/dist-types/menu/MenuItem.d.ts +8 -0
  101. package/dist-types/menu/MenuPanel.d.ts +8 -0
  102. package/dist-types/menu/MenuPanelBase.d.ts +4 -0
  103. package/dist-types/menu/MenuPanelContext.d.ts +5 -0
  104. package/dist-types/menu/MenuTrigger.d.ts +8 -0
  105. package/dist-types/menu/MenuTriggerContext.d.ts +6 -0
  106. package/dist-types/menu/index.d.ts +5 -0
  107. package/dist-types/parent-child-layout/ParentChildLayout.d.ts +11 -13
  108. package/package.json +3 -3
  109. package/dist-cjs/overlay/Overlay.js +0 -74
  110. package/dist-cjs/overlay/Overlay.js.map +0 -1
  111. package/dist-cjs/overlay/OverlayContext.js +0 -35
  112. package/dist-cjs/overlay/OverlayContext.js.map +0 -1
  113. package/dist-cjs/overlay/OverlayPanel.css.js +0 -6
  114. package/dist-cjs/overlay/OverlayPanel.css.js.map +0 -1
  115. package/dist-cjs/overlay/OverlayPanel.js +0 -79
  116. package/dist-cjs/overlay/OverlayPanel.js.map +0 -1
  117. package/dist-cjs/overlay/OverlayPanelCloseButton.css.js +0 -6
  118. package/dist-cjs/overlay/OverlayPanelCloseButton.css.js.map +0 -1
  119. package/dist-cjs/overlay/OverlayPanelCloseButton.js +0 -42
  120. package/dist-cjs/overlay/OverlayPanelCloseButton.js.map +0 -1
  121. package/dist-cjs/overlay/OverlayPanelContent.css.js +0 -6
  122. package/dist-cjs/overlay/OverlayPanelContent.css.js.map +0 -1
  123. package/dist-cjs/overlay/OverlayPanelContent.js +0 -35
  124. package/dist-cjs/overlay/OverlayPanelContent.js.map +0 -1
  125. package/dist-cjs/overlay/OverlayTrigger.js +0 -31
  126. package/dist-cjs/overlay/OverlayTrigger.js.map +0 -1
  127. package/dist-es/overlay/Overlay.js +0 -70
  128. package/dist-es/overlay/Overlay.js.map +0 -1
  129. package/dist-es/overlay/OverlayContext.js +0 -30
  130. package/dist-es/overlay/OverlayContext.js.map +0 -1
  131. package/dist-es/overlay/OverlayPanel.css.js +0 -4
  132. package/dist-es/overlay/OverlayPanel.css.js.map +0 -1
  133. package/dist-es/overlay/OverlayPanel.js +0 -75
  134. package/dist-es/overlay/OverlayPanel.js.map +0 -1
  135. package/dist-es/overlay/OverlayPanelCloseButton.css.js +0 -4
  136. package/dist-es/overlay/OverlayPanelCloseButton.css.js.map +0 -1
  137. package/dist-es/overlay/OverlayPanelCloseButton.js +0 -34
  138. package/dist-es/overlay/OverlayPanelCloseButton.js.map +0 -1
  139. package/dist-es/overlay/OverlayPanelContent.css.js +0 -4
  140. package/dist-es/overlay/OverlayPanelContent.css.js.map +0 -1
  141. package/dist-es/overlay/OverlayPanelContent.js +0 -27
  142. package/dist-es/overlay/OverlayPanelContent.js.map +0 -1
  143. package/dist-es/overlay/OverlayTrigger.js +0 -27
  144. package/dist-es/overlay/OverlayTrigger.js.map +0 -1
  145. package/dist-types/overlay/Overlay.d.ts +0 -13
  146. package/dist-types/overlay/OverlayContext.d.ts +0 -21
  147. package/dist-types/overlay/OverlayPanel.d.ts +0 -8
  148. package/dist-types/overlay/OverlayPanelCloseButton.d.ts +0 -2
  149. package/dist-types/overlay/OverlayPanelContent.d.ts +0 -8
  150. package/dist-types/overlay/OverlayTrigger.d.ts +0 -5
  151. package/dist-types/overlay/index.d.ts +0 -5
package/css/salt-lab.css CHANGED
@@ -813,6 +813,180 @@
813
813
  margin-top: var(--saltContentStatus-actions-marginTop, var(--salt-size-unit));
814
814
  }
815
815
 
816
+ /* src/date-input/DateInput.css */
817
+ .saltDateInput {
818
+ --input-borderColor: var(--salt-editable-borderColor);
819
+ --input-borderStyle: var(--salt-editable-borderStyle);
820
+ --input-outlineColor: var(--salt-focused-outlineColor);
821
+ --input-borderWidth: var(--salt-size-border);
822
+ align-items: center;
823
+ background: var(--saltDateInput-background, var(--input-background));
824
+ color: var(--saltDateInput-color, var(--salt-content-primary-foreground));
825
+ display: inline-flex;
826
+ gap: var(--salt-spacing-50);
827
+ font-family: var(--salt-text-fontFamily);
828
+ font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));
829
+ height: var(--saltDateInput-height, var(--salt-size-base));
830
+ line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));
831
+ min-height: var(--saltDateInput-minHeight, var(--salt-size-base));
832
+ min-width: var(--saltDateInput-minWidth, 4em);
833
+ padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));
834
+ padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));
835
+ position: relative;
836
+ width: 100%;
837
+ box-sizing: border-box;
838
+ }
839
+ .saltDateInput:hover {
840
+ --input-borderStyle: var(--salt-editable-borderStyle-hover);
841
+ --input-borderColor: var(--salt-editable-borderColor-hover);
842
+ background: var(--saltDateInput-background-hover, var(--input-background-hover));
843
+ cursor: var(--salt-editable-cursor-hover);
844
+ }
845
+ .saltDateInput:active {
846
+ --input-borderColor: var(--salt-editable-borderColor-active);
847
+ --input-borderStyle: var(--salt-editable-borderStyle-active);
848
+ --input-borderWidth: var(--salt-editable-borderWidth-active);
849
+ background: var(--saltDateInput-background-active, var(--input-background-active));
850
+ cursor: var(--salt-editable-cursor-active);
851
+ }
852
+ .saltDateInput-primary {
853
+ --input-background: var(--salt-editable-primary-background);
854
+ --input-background-active: var(--salt-editable-primary-background-active);
855
+ --input-background-hover: var(--salt-editable-primary-background-hover);
856
+ --input-background-disabled: var(--salt-editable-primary-background-disabled);
857
+ --input-background-readonly: var(--salt-editable-primary-background-readonly);
858
+ }
859
+ .saltDateInput-secondary {
860
+ --input-background: var(--salt-editable-secondary-background);
861
+ --input-background-active: var(--salt-editable-secondary-background-active);
862
+ --input-background-hover: var(--salt-editable-secondary-background-active);
863
+ --input-background-disabled: var(--salt-editable-secondary-background-disabled);
864
+ --input-background-readonly: var(--salt-editable-secondary-background-readonly);
865
+ }
866
+ .saltDateInput-error,
867
+ .saltDateInput-error:hover {
868
+ --input-background: var(--salt-status-error-background);
869
+ --input-background-active: var(--salt-status-error-background);
870
+ --input-background-hover: var(--salt-status-error-background);
871
+ --input-borderColor: var(--salt-status-error-borderColor);
872
+ --input-outlineColor: var(--salt-status-error-borderColor);
873
+ }
874
+ .saltDateInput-warning,
875
+ .saltDateInput-warning:hover {
876
+ --input-background: var(--salt-status-warning-background);
877
+ --input-background-active: var(--salt-status-warning-background);
878
+ --input-background-hover: var(--salt-status-warning-background);
879
+ --input-borderColor: var(--salt-status-warning-borderColor);
880
+ --input-outlineColor: var(--salt-status-warning-borderColor);
881
+ }
882
+ .saltDateInput-success,
883
+ .saltDateInput-success:hover {
884
+ --input-background: var(--salt-status-success-background);
885
+ --input-background-active: var(--salt-status-success-background);
886
+ --input-background-hover: var(--salt-status-success-background);
887
+ --input-borderColor: var(--salt-status-success-borderColor);
888
+ --input-outlineColor: var(--salt-status-success-borderColor);
889
+ }
890
+ .saltDateInput-input {
891
+ background: none;
892
+ border: none;
893
+ box-sizing: content-box;
894
+ color: inherit;
895
+ cursor: inherit;
896
+ display: block;
897
+ flex: 1;
898
+ font: inherit;
899
+ height: 100%;
900
+ letter-spacing: var(--saltDateInput-letterSpacing, 0);
901
+ margin: 0;
902
+ min-width: 0;
903
+ overflow: hidden;
904
+ padding: 0;
905
+ text-align: left;
906
+ width: min-content;
907
+ }
908
+ .saltDateInput-input:focus {
909
+ outline: none;
910
+ }
911
+ .saltDateInput-input::selection {
912
+ background: var(--salt-content-foreground-highlight);
913
+ }
914
+ .saltDateInput-input::placeholder {
915
+ color: var(--salt-content-secondary-foreground);
916
+ font-weight: var(--salt-text-fontWeight-small);
917
+ }
918
+ .saltDateInput-focused {
919
+ --input-borderColor: var(--input-outlineColor);
920
+ --input-borderWidth: var(--salt-editable-borderWidth-active);
921
+ outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));
922
+ }
923
+ .saltDateInput.saltDateInput-readOnly {
924
+ --input-borderColor: var(--salt-editable-borderColor-readonly);
925
+ --input-borderStyle: var(--salt-editable-borderStyle-readonly);
926
+ --input-borderWidth: var(--salt-size-border);
927
+ background: var(--input-background-readonly);
928
+ cursor: var(--salt-editable-cursor-readonly);
929
+ }
930
+ .saltDateInput-focused.saltDateInput-disabled {
931
+ --input-borderWidth: var(--salt-size-border);
932
+ outline: none;
933
+ }
934
+ .saltDateInput-focused.saltDateInput-readOnly {
935
+ --input-borderWidth: var(--salt-size-border);
936
+ }
937
+ .saltDateInput-disabled .saltDateInput-input::selection {
938
+ background: none;
939
+ }
940
+ .saltDateInput.saltDateInput-disabled,
941
+ .saltDateInput.saltDateInput-disabled:hover,
942
+ .saltDateInput.saltDateInput-disabled:active {
943
+ --input-borderColor: var(--salt-editable-borderColor-disabled);
944
+ --input-borderStyle: var(--salt-editable-borderStyle-disabled);
945
+ --input-borderWidth: var(--salt-size-border);
946
+ background: var(--input-background-disabled);
947
+ cursor: var(--salt-editable-cursor-disabled);
948
+ color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));
949
+ }
950
+ .saltDateInput-activationIndicator {
951
+ left: 0;
952
+ bottom: 0;
953
+ width: 100%;
954
+ position: absolute;
955
+ border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);
956
+ }
957
+ .saltDateInput-startAdornmentContainer {
958
+ align-items: center;
959
+ display: inline-flex;
960
+ padding-right: var(--salt-spacing-100);
961
+ column-gap: var(--salt-spacing-100);
962
+ }
963
+ .saltDateInput-endAdornmentContainer {
964
+ align-items: center;
965
+ display: inline-flex;
966
+ padding-left: var(--salt-spacing-100);
967
+ column-gap: var(--salt-spacing-100);
968
+ }
969
+ .saltDateInput-readOnly .saltDateInput-startAdornmentContainer {
970
+ margin-left: var(--salt-spacing-50);
971
+ }
972
+ .saltDateInput-startAdornmentContainer .saltButton ~ .saltButton {
973
+ margin-left: calc(-1 * var(--salt-spacing-50));
974
+ }
975
+ .saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {
976
+ margin-left: calc(-1 * var(--salt-spacing-50));
977
+ }
978
+ .saltDateInput-startAdornmentContainer .saltButton:first-child {
979
+ margin-left: calc(var(--salt-spacing-50) * -1);
980
+ }
981
+ .saltDateInput-endAdornmentContainer .saltButton:last-child {
982
+ margin-right: calc(var(--salt-spacing-50) * -1);
983
+ }
984
+ .saltDateInput-startAdornmentContainer > .saltButton,
985
+ .saltDateInput-endAdornmentContainer > .saltButton {
986
+ --saltButton-padding: var(--salt-spacing-50);
987
+ --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));
988
+ }
989
+
816
990
  /* src/deck-item/DeckItem.css */
817
991
  .saltDeckItem {
818
992
  display: inline-block;
@@ -1910,6 +2084,105 @@
1910
2084
  border-right: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-primary-borderColor);
1911
2085
  }
1912
2086
 
2087
+ /* src/menu/MenuGroup.css */
2088
+ .saltMenuGroup-label {
2089
+ background: var(--salt-container-primary-background);
2090
+ color: var(--salt-text-secondary-foreground);
2091
+ font-size: var(--salt-text-label-fontSize);
2092
+ font-weight: var(--salt-text-label-fontWeight-strong);
2093
+ height: calc(var(--salt-size-base) + var(--salt-spacing-100));
2094
+ padding-left: var(--salt-spacing-100);
2095
+ padding-right: var(--salt-spacing-100);
2096
+ display: flex;
2097
+ align-items: center;
2098
+ position: sticky;
2099
+ top: 0;
2100
+ z-index: var(--salt-zIndex-default);
2101
+ }
2102
+ .saltMenuGroup {
2103
+ border-top: var(--salt-size-border) var(--salt-separable-borderStyle) var(--salt-separable-tertiary-borderColor);
2104
+ }
2105
+ .saltMenuGroup:first-of-type {
2106
+ border-top: 0;
2107
+ }
2108
+
2109
+ /* src/menu/MenuItem.css */
2110
+ .saltMenuItem {
2111
+ color: var(--salt-content-primary-foreground);
2112
+ background: var(--salt-selectable-background);
2113
+ font-size: var(--salt-text-fontSize);
2114
+ font-weight: var(--salt-text-fontWeight);
2115
+ min-height: calc(var(--salt-size-base) + var(--salt-spacing-100));
2116
+ padding-left: var(--salt-spacing-100);
2117
+ padding-right: var(--salt-spacing-100);
2118
+ display: flex;
2119
+ gap: var(--salt-spacing-100);
2120
+ position: relative;
2121
+ align-items: center;
2122
+ cursor: var(--salt-selectable-cursor-hover);
2123
+ box-sizing: border-box;
2124
+ }
2125
+ .saltMenuItem:focus-visible {
2126
+ outline: var(--salt-focused-outline);
2127
+ outline-offset: calc(var(--salt-size-border) * -2);
2128
+ }
2129
+ .saltMenuItem:hover {
2130
+ outline: none;
2131
+ }
2132
+ .saltMenuItem:hover,
2133
+ .saltMenuItem:focus-visible {
2134
+ background: var(--salt-selectable-background-hover);
2135
+ }
2136
+ .saltMenuItem:active {
2137
+ z-index: var(--salt-zIndex-default);
2138
+ background: var(--salt-selectable-background-selected);
2139
+ box-shadow:
2140
+ calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
2141
+ calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
2142
+ 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
2143
+ }
2144
+ .saltMenuItem[aria-disabled=true],
2145
+ .saltMenuItem[aria-disabled=true]:active {
2146
+ background: var(--salt-selectable-background-disabled);
2147
+ color: var(--salt-text-primary-foreground-disabled);
2148
+ cursor: var(--salt-selectable-cursor-disabled);
2149
+ box-shadow: none;
2150
+ }
2151
+ .saltMenuItem-blurActive {
2152
+ z-index: var(--salt-zIndex-default);
2153
+ background: var(--salt-selectable-background-selected);
2154
+ box-shadow:
2155
+ calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover),
2156
+ calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border) var(--salt-selectable-borderColor-selected),
2157
+ 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
2158
+ }
2159
+ .saltMenuItem-expandIcon.saltIcon {
2160
+ margin-left: auto;
2161
+ }
2162
+
2163
+ /* src/menu/MenuPanel.css */
2164
+ .saltMenuPanel {
2165
+ background: var(--salt-container-primary-background);
2166
+ border: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
2167
+ overflow: hidden;
2168
+ overflow-y: auto;
2169
+ min-width: 10em;
2170
+ position: relative;
2171
+ z-index: var(--salt-zIndex-popout);
2172
+ box-shadow: var(--salt-overlayable-shadow-popout);
2173
+ box-sizing: border-box;
2174
+ }
2175
+ .saltMenuPanel-container {
2176
+ display: flex;
2177
+ flex-direction: column;
2178
+ gap: var(--salt-size-border);
2179
+ max-height: inherit;
2180
+ min-height: inherit;
2181
+ }
2182
+ .saltMenuPanel:focus-visible {
2183
+ outline: none;
2184
+ }
2185
+
1913
2186
  /* src/menu-button/MenuButton.css */
1914
2187
 
1915
2188
  /* src/menu-button/MenuButtonTrigger.css */
@@ -2033,71 +2306,29 @@
2033
2306
  align-items: flex-end;
2034
2307
  }
2035
2308
 
2036
- /* src/overlay/OverlayPanel.css */
2037
- .saltOverlayPanel {
2038
- --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));
2039
- --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));
2040
- font-family: var(--salt-text-fontFamily);
2041
- font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));
2042
- font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));
2043
- line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));
2044
- border-color: var(--overlay-borderColor);
2045
- border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));
2046
- border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));
2047
- border-radius: var(--saltOverlay-borderRadius, var(--salt-palette-corner, 0));
2048
- background: var(--overlay-background);
2049
- box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
2050
- color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));
2051
- z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));
2052
- width: max-content;
2053
- }
2054
-
2055
- /* src/overlay/OverlayPanelCloseButton.css */
2056
- .saltOverlayPanelCloseButton {
2057
- position: absolute;
2058
- right: 0;
2059
- z-index: 1;
2060
- }
2061
- .saltOverlayPanelCloseButton-button.saltButton-secondary {
2062
- position: sticky;
2063
- right: 0;
2064
- top: 0;
2065
- }
2066
- .saltOverlayPanelCloseButton ~ .saltOverlayPanelContent {
2067
- padding-right: var(--salt-spacing-400);
2068
- }
2069
-
2070
- /* src/overlay/OverlayPanelContent.css */
2071
- .saltOverlayPanelContent {
2072
- animation: var(--salt-animation-fade-in-center);
2073
- position: relative;
2074
- overflow: auto;
2075
- padding: var(--saltOverlay-content-padding, var(--salt-spacing-100));
2076
- }
2077
-
2078
2309
  /* src/parent-child-layout/ParentChildLayout.css */
2079
2310
  .saltParentChildLayout {
2080
- overflow: hidden;
2081
- }
2082
- .saltParentChildLayout-parent {
2083
- animation: var(--salt-animation-slide-in-left);
2311
+ display: flex;
2312
+ gap: var(--parentChildLayout-gap);
2084
2313
  }
2085
2314
  .saltParentChildLayout-child {
2086
- animation: var(--salt-animation-slide-in-right);
2315
+ flex-grow: 1;
2087
2316
  }
2088
- .saltParentChildLayout-reversed.saltFlexLayout {
2089
- --flexLayout-direction: row-reverse;
2317
+ .saltParentChildLayout-collapsed {
2318
+ width: 100%;
2090
2319
  }
2091
- .saltParentChildLayout-no-animations .saltParentChildLayout-parent,
2092
- .saltParentChildLayout-no-animations .saltParentChildLayout-child {
2093
- animation: none;
2320
+ .saltParentChildLayout-childAnimation {
2321
+ animation: var(--salt-animation-slide-in-right);
2322
+ }
2323
+ .saltParentChildLayout-parentAnimation {
2324
+ animation: var(--salt-animation-slide-in-left);
2094
2325
  }
2095
2326
  @media (prefers-reduced-motion) {
2096
- .reduced-motion .saltParentChildLayout-parent {
2097
- animation: none;
2327
+ .saltParentChildLayout-parentAnimation {
2328
+ animation: var(--salt-animation-fade-in-center);
2098
2329
  }
2099
- .reduced-motion .saltParentChildLayout-child {
2100
- animation: none;
2330
+ .saltParentChildLayout-childAnimation {
2331
+ animation: var(--salt-animation-fade-in-center);
2101
2332
  }
2102
2333
  }
2103
2334
 
@@ -3991,4 +4222,4 @@
3991
4222
  margin: calc(var(--salt-size-unit) / 2) 0;
3992
4223
  }
3993
4224
 
3994
- /* src/280b49b5-163c-4f3d-bc9b-0670c827f74f.css */
4225
+ /* src/2064bd0f-716f-46ee-a3ee-2bd0dc17d888.css */
@@ -44,6 +44,7 @@ const CalendarDay = React.forwardRef(
44
44
  children: /* @__PURE__ */ jsxRuntime.jsx("button", {
45
45
  "aria-label": utils.formatDate(day),
46
46
  disabled,
47
+ type: "button",
47
48
  ...dayProps,
48
49
  ref: buttonRef,
49
50
  ...rest,
@@ -1 +1 @@
1
- {"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n day: DateValue;\n formatDate?: DateFormatter;\n renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n status?: DayStatus;\n month: DateValue;\n TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n function CalendarDay(props, ref) {\n const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-day\",\n css: calendarDayCss,\n window: targetWindow,\n });\n\n const dayRef = useRef<HTMLButtonElement>(null);\n const buttonRef = useForkRef(ref, dayRef);\n const { status, dayProps, unselectableReason, highlightedReason } =\n useCalendarDay(\n {\n date: day,\n month,\n },\n dayRef\n );\n const { outOfRange, today, unselectable, highlighted, hidden, disabled } =\n status;\n\n return (\n <Tooltip\n hideIcon\n status={unselectableReason ? \"error\" : \"info\"}\n content={\n unselectableReason || highlightedReason || \"Date is out of range\"\n }\n disabled={!unselectableReason && !highlightedReason}\n placement=\"top\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n {...TooltipProps}\n >\n <button\n aria-label={formatDate(day)}\n disabled={disabled}\n {...dayProps}\n ref={buttonRef}\n {...rest}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"hidden\")]: hidden,\n [withBaseName(\"outOfRange\")]: outOfRange,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"unselectable\")]: !!unselectable,\n [withBaseName(\"highlighted\")]: !!highlighted,\n },\n dayProps.className,\n className\n )}\n >\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"today\")]: today,\n })}\n >\n {renderDayContents\n ? renderDayContents(day, status)\n : formatDate(day, { day: \"numeric\" })}\n </span>\n </button>\n </Tooltip>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","CalendarDay","TooltipProps","useWindow","useComponentCssInjection","calendarDayCss","useRef","useForkRef","useCalendarDay","jsx","Tooltip","formatDate","clsx"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAAA,GAAiB,MACjE,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,MAAM,CAAA,CAAA;AACxC,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAoB,mBAC5C,GAAAC,6BAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,GAAA;AAAA,QACN,KAAA;AAAA,OACF;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AACF,IAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,cAAc,WAAa,EAAA,MAAA,EAAQ,UAC5D,GAAA,MAAA,CAAA;AAEF,IAAA,uBACGC,cAAA,CAAAC,YAAA,EAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAA,EAAQ,qBAAqB,OAAU,GAAA,MAAA;AAAA,MACvC,OAAA,EACE,sBAAsB,iBAAqB,IAAA,sBAAA;AAAA,MAE7C,QAAA,EAAU,CAAC,kBAAA,IAAsB,CAAC,iBAAA;AAAA,MAClC,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,CAAA;AAAA,MACZ,UAAY,EAAA,CAAA;AAAA,MACX,GAAGR,aAAAA;AAAA,MAEJ,QAAC,kBAAAO,cAAA,CAAA,QAAA,EAAA;AAAA,QACC,YAAA,EAAYE,iBAAW,GAAG,CAAA;AAAA,QAC1B,QAAA;AAAA,QACC,GAAG,QAAA;AAAA,QACJ,GAAK,EAAA,SAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAA,GAAI,CAAC,CAAC,YAAA;AAAA,YAClC,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,CAAC,CAAC,WAAA;AAAA,WACnC;AAAA,UACA,QAAS,CAAA,SAAA;AAAA,UACT,SAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAAH,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAW,EAAAG,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,WAC1B,CAAA;AAAA,UAEA,QAAA,EAAA,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7BD,iBAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,SACxC,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"CalendarDay.js","sources":["../src/calendar/internal/CalendarDay.tsx"],"sourcesContent":["import { makePrefixer, Tooltip, TooltipProps, useForkRef } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ComponentPropsWithRef, forwardRef, ReactElement, useRef } from \"react\";\nimport { DateValue } from \"@internationalized/date\";\nimport { DayStatus, useCalendarDay } from \"../useCalendarDay\";\nimport calendarDayCss from \"./CalendarDay.css\";\nimport { formatDate } from \"./utils\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport type DateFormatter = (day: Date) => string | undefined;\n\nexport interface CalendarDayProps\n extends Omit<ComponentPropsWithRef<\"button\">, \"children\"> {\n day: DateValue;\n formatDate?: DateFormatter;\n renderDayContents?: (date: DateValue, status: DayStatus) => ReactElement;\n status?: DayStatus;\n month: DateValue;\n TooltipProps?: Partial<TooltipProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltCalendarDay\");\n\nexport const CalendarDay = forwardRef<HTMLButtonElement, CalendarDayProps>(\n function CalendarDay(props, ref) {\n const { className, day, renderDayContents, month, TooltipProps, ...rest } =\n props;\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-calendar-day\",\n css: calendarDayCss,\n window: targetWindow,\n });\n\n const dayRef = useRef<HTMLButtonElement>(null);\n const buttonRef = useForkRef(ref, dayRef);\n const { status, dayProps, unselectableReason, highlightedReason } =\n useCalendarDay(\n {\n date: day,\n month,\n },\n dayRef\n );\n const { outOfRange, today, unselectable, highlighted, hidden, disabled } =\n status;\n\n return (\n <Tooltip\n hideIcon\n status={unselectableReason ? \"error\" : \"info\"}\n content={\n unselectableReason || highlightedReason || \"Date is out of range\"\n }\n disabled={!unselectableReason && !highlightedReason}\n placement=\"top\"\n enterDelay={0} // --salt-duration-instant\n leaveDelay={0} // --salt-duration-instant\n {...TooltipProps}\n >\n <button\n aria-label={formatDate(day)}\n disabled={disabled}\n type=\"button\"\n {...dayProps}\n ref={buttonRef}\n {...rest}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"hidden\")]: hidden,\n [withBaseName(\"outOfRange\")]: outOfRange,\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"unselectable\")]: !!unselectable,\n [withBaseName(\"highlighted\")]: !!highlighted,\n },\n dayProps.className,\n className\n )}\n >\n <span\n className={clsx(withBaseName(\"content\"), {\n [withBaseName(\"today\")]: today,\n })}\n >\n {renderDayContents\n ? renderDayContents(day, status)\n : formatDate(day, { day: \"numeric\" })}\n </span>\n </button>\n </Tooltip>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","CalendarDay","TooltipProps","useWindow","useComponentCssInjection","calendarDayCss","useRef","useForkRef","useCalendarDay","jsx","Tooltip","formatDate","clsx"],"mappings":";;;;;;;;;;;;;;AAsBA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA,CAAA;AAE5C,MAAM,WAAc,GAAAC,gBAAA;AAAA,EACzB,SAASC,YAAY,CAAA,KAAA,EAAO,GAAK,EAAA;AAC/B,IAAM,MAAA,EAAE,WAAW,GAAK,EAAA,iBAAA,EAAmB,OAAO,YAAAC,EAAAA,aAAAA,EAAAA,GAAiB,MACjE,GAAA,KAAA,CAAA;AACF,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,mBAAA;AAAA,MACR,GAAK,EAAAC,aAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,MAAA,GAASC,aAA0B,IAAI,CAAA,CAAA;AAC7C,IAAM,MAAA,SAAA,GAAYC,eAAW,CAAA,GAAA,EAAK,MAAM,CAAA,CAAA;AACxC,IAAA,MAAM,EAAE,MAAA,EAAQ,QAAU,EAAA,kBAAA,EAAoB,mBAC5C,GAAAC,6BAAA;AAAA,MACE;AAAA,QACE,IAAM,EAAA,GAAA;AAAA,QACN,KAAA;AAAA,OACF;AAAA,MACA,MAAA;AAAA,KACF,CAAA;AACF,IAAA,MAAM,EAAE,UAAY,EAAA,KAAA,EAAO,cAAc,WAAa,EAAA,MAAA,EAAQ,UAC5D,GAAA,MAAA,CAAA;AAEF,IAAA,uBACGC,cAAA,CAAAC,YAAA,EAAA;AAAA,MACC,QAAQ,EAAA,IAAA;AAAA,MACR,MAAA,EAAQ,qBAAqB,OAAU,GAAA,MAAA;AAAA,MACvC,OAAA,EACE,sBAAsB,iBAAqB,IAAA,sBAAA;AAAA,MAE7C,QAAA,EAAU,CAAC,kBAAA,IAAsB,CAAC,iBAAA;AAAA,MAClC,SAAU,EAAA,KAAA;AAAA,MACV,UAAY,EAAA,CAAA;AAAA,MACZ,UAAY,EAAA,CAAA;AAAA,MACX,GAAGR,aAAAA;AAAA,MAEJ,QAAC,kBAAAO,cAAA,CAAA,QAAA,EAAA;AAAA,QACC,YAAA,EAAYE,iBAAW,GAAG,CAAA;AAAA,QAC1B,QAAA;AAAA,QACA,IAAK,EAAA,QAAA;AAAA,QACJ,GAAG,QAAA;AAAA,QACJ,GAAK,EAAA,SAAA;AAAA,QACJ,GAAG,IAAA;AAAA,QACJ,SAAW,EAAAC,SAAA;AAAA,UACT,YAAa,EAAA;AAAA,UACb;AAAA,YACE,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,YAC1B,CAAC,YAAa,CAAA,YAAY,CAAI,GAAA,UAAA;AAAA,YAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,YAC5B,CAAC,YAAA,CAAa,cAAc,CAAA,GAAI,CAAC,CAAC,YAAA;AAAA,YAClC,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,CAAC,CAAC,WAAA;AAAA,WACnC;AAAA,UACA,QAAS,CAAA,SAAA;AAAA,UACT,SAAA;AAAA,SACF;AAAA,QAEA,QAAC,kBAAAH,cAAA,CAAA,MAAA,EAAA;AAAA,UACC,SAAW,EAAAG,SAAA,CAAK,YAAa,CAAA,SAAS,CAAG,EAAA;AAAA,YACvC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,KAAA;AAAA,WAC1B,CAAA;AAAA,UAEA,QAAA,EAAA,iBAAA,GACG,iBAAkB,CAAA,GAAA,EAAK,MAAM,CAAA,GAC7BD,iBAAW,GAAK,EAAA,EAAE,GAAK,EAAA,SAAA,EAAW,CAAA;AAAA,SACxC,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -49,8 +49,7 @@ const CarouselSlide = React.forwardRef(
49
49
  className: clsx.clsx({
50
50
  [withBaseName("buttonBarContainer")]: contentAlignment === "center",
51
51
  [withBaseName("buttonBarContainerLeft")]: contentAlignment === "left"
52
- }),
53
- stackAtBreakpoint: 0
52
+ })
54
53
  })
55
54
  })
56
55
  ]
@@ -1 +1 @@
1
- {"version":3,"file":"CarouselSlide.js","sources":["../src/carousel/CarouselSlide.tsx"],"sourcesContent":["import {\n ElementType,\n forwardRef,\n HTMLAttributes,\n ReactElement,\n useRef,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\nimport { ButtonBarProps } from \"../button-bar\";\n\nexport interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {\n ButtonBar?: ElementType<Partial<ButtonBarProps>>;\n Media: ReactElement;\n description?: string;\n title?: string;\n contentAlignment?: \"center\" | \"left\" | \"right\";\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlide\");\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n function CarouselSlide(\n { ButtonBar, Media, description, title, contentAlignment },\n ref\n ) {\n const buttonBarRef = useRef(null);\n\n return (\n <div ref={ref}>\n {Media && <div className={withBaseName(\"mediaContainer\")}>{Media}</div>}\n <div className={withBaseName(\"fixedContainer\")} ref={buttonBarRef}>\n <div\n className={clsx({\n [withBaseName(\"textContainer\")]: contentAlignment === \"center\",\n [withBaseName(\"textContainerLeft\")]: contentAlignment === \"left\",\n })}\n >\n {title && (\n <div\n aria-level={1}\n className={withBaseName(\"titleContainer\")}\n role=\"heading\"\n >\n {title}\n </div>\n )}\n {description && (\n <div className={withBaseName(\"descriptionContainer\")}>\n {description}\n </div>\n )}\n </div>\n {ButtonBar && (\n <div\n className={clsx({\n [withBaseName(\"buttonBarOverride\")]:\n contentAlignment === \"center\",\n [withBaseName(\"buttonBarOverrideLeft\")]:\n contentAlignment === \"left\",\n })}\n >\n <ButtonBar\n className={clsx({\n [withBaseName(\"buttonBarContainer\")]:\n contentAlignment === \"center\",\n [withBaseName(\"buttonBarContainerLeft\")]:\n contentAlignment === \"left\",\n })}\n stackAtBreakpoint={0}\n />\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlide","useRef","jsxs","jsx","clsx"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,eACP,EAAE,SAAA,EAAW,OAAO,WAAa,EAAA,KAAA,EAAO,gBAAiB,EAAA,EACzD,GACA,EAAA;AACA,IAAM,MAAA,YAAA,GAAeC,aAAO,IAAI,CAAA,CAAA;AAEhC,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAA;AAAA,MACF,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAUC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBAChED,eAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,UAAG,GAAK,EAAA,YAAA;AAAA,UACnD,QAAA,EAAA;AAAA,4BAACA,eAAA,CAAA,KAAA,EAAA;AAAA,cACC,WAAWE,SAAK,CAAA;AAAA,gBACd,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,gBAAqB,KAAA,QAAA;AAAA,gBACtD,CAAC,YAAA,CAAa,mBAAmB,CAAA,GAAI,gBAAqB,KAAA,MAAA;AAAA,eAC3D,CAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gBAAA,KAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AAAA,kBACC,YAAY,EAAA,CAAA;AAAA,kBACZ,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,kBACxC,IAAK,EAAA,SAAA;AAAA,kBAEJ,QAAA,EAAA,KAAA;AAAA,iBACH,CAAA;AAAA,gBAED,+BACEA,cAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,kBAChD,QAAA,EAAA,WAAA;AAAA,iBACH,CAAA;AAAA,eAAA;AAAA,aAEJ,CAAA;AAAA,YACC,6BACEA,cAAA,CAAA,KAAA,EAAA;AAAA,cACC,WAAWC,SAAK,CAAA;AAAA,gBACd,CAAC,YAAA,CAAa,mBAAmB,CAAA,GAC/B,gBAAqB,KAAA,QAAA;AAAA,gBACvB,CAAC,YAAA,CAAa,uBAAuB,CAAA,GACnC,gBAAqB,KAAA,MAAA;AAAA,eACxB,CAAA;AAAA,cAED,QAAC,kBAAAD,cAAA,CAAA,SAAA,EAAA;AAAA,gBACC,WAAWC,SAAK,CAAA;AAAA,kBACd,CAAC,YAAA,CAAa,oBAAoB,CAAA,GAChC,gBAAqB,KAAA,QAAA;AAAA,kBACvB,CAAC,YAAA,CAAa,wBAAwB,CAAA,GACpC,gBAAqB,KAAA,MAAA;AAAA,iBACxB,CAAA;AAAA,gBACD,iBAAmB,EAAA,CAAA;AAAA,eACrB,CAAA;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SAEJ,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1
+ {"version":3,"file":"CarouselSlide.js","sources":["../src/carousel/CarouselSlide.tsx"],"sourcesContent":["import {\n ElementType,\n forwardRef,\n HTMLAttributes,\n ReactElement,\n useRef,\n} from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport { clsx } from \"clsx\";\n\nexport interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {\n ButtonBar?: ElementType;\n Media: ReactElement;\n description?: string;\n title?: string;\n contentAlignment?: \"center\" | \"left\" | \"right\";\n}\n\nconst withBaseName = makePrefixer(\"saltCarouselSlide\");\n\nexport const CarouselSlide = forwardRef<HTMLDivElement, CarouselSlideProps>(\n function CarouselSlide(\n { ButtonBar, Media, description, title, contentAlignment },\n ref\n ) {\n const buttonBarRef = useRef(null);\n\n return (\n <div ref={ref}>\n {Media && <div className={withBaseName(\"mediaContainer\")}>{Media}</div>}\n <div className={withBaseName(\"fixedContainer\")} ref={buttonBarRef}>\n <div\n className={clsx({\n [withBaseName(\"textContainer\")]: contentAlignment === \"center\",\n [withBaseName(\"textContainerLeft\")]: contentAlignment === \"left\",\n })}\n >\n {title && (\n <div\n aria-level={1}\n className={withBaseName(\"titleContainer\")}\n role=\"heading\"\n >\n {title}\n </div>\n )}\n {description && (\n <div className={withBaseName(\"descriptionContainer\")}>\n {description}\n </div>\n )}\n </div>\n {ButtonBar && (\n <div\n className={clsx({\n [withBaseName(\"buttonBarOverride\")]:\n contentAlignment === \"center\",\n [withBaseName(\"buttonBarOverrideLeft\")]:\n contentAlignment === \"left\",\n })}\n >\n <ButtonBar\n className={clsx({\n [withBaseName(\"buttonBarContainer\")]:\n contentAlignment === \"center\",\n [withBaseName(\"buttonBarContainerLeft\")]:\n contentAlignment === \"left\",\n })}\n />\n </div>\n )}\n </div>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","CarouselSlide","useRef","jsxs","jsx","clsx"],"mappings":";;;;;;;;;AAmBA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,eACP,EAAE,SAAA,EAAW,OAAO,WAAa,EAAA,KAAA,EAAO,gBAAiB,EAAA,EACzD,GACA,EAAA;AACA,IAAM,MAAA,YAAA,GAAeC,aAAO,IAAI,CAAA,CAAA;AAEhC,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAA;AAAA,MACF,QAAA,EAAA;AAAA,QAAA,KAAA,oBAAUC,cAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,UAAI,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBAChED,eAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,UAAG,GAAK,EAAA,YAAA;AAAA,UACnD,QAAA,EAAA;AAAA,4BAACA,eAAA,CAAA,KAAA,EAAA;AAAA,cACC,WAAWE,SAAK,CAAA;AAAA,gBACd,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,gBAAqB,KAAA,QAAA;AAAA,gBACtD,CAAC,YAAA,CAAa,mBAAmB,CAAA,GAAI,gBAAqB,KAAA,MAAA;AAAA,eAC3D,CAAA;AAAA,cAEA,QAAA,EAAA;AAAA,gBAAA,KAAA,oBACED,cAAA,CAAA,KAAA,EAAA;AAAA,kBACC,YAAY,EAAA,CAAA;AAAA,kBACZ,SAAA,EAAW,aAAa,gBAAgB,CAAA;AAAA,kBACxC,IAAK,EAAA,SAAA;AAAA,kBAEJ,QAAA,EAAA,KAAA;AAAA,iBACH,CAAA;AAAA,gBAED,+BACEA,cAAA,CAAA,KAAA,EAAA;AAAA,kBAAI,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,kBAChD,QAAA,EAAA,WAAA;AAAA,iBACH,CAAA;AAAA,eAAA;AAAA,aAEJ,CAAA;AAAA,YACC,6BACEA,cAAA,CAAA,KAAA,EAAA;AAAA,cACC,WAAWC,SAAK,CAAA;AAAA,gBACd,CAAC,YAAA,CAAa,mBAAmB,CAAA,GAC/B,gBAAqB,KAAA,QAAA;AAAA,gBACvB,CAAC,YAAA,CAAa,uBAAuB,CAAA,GACnC,gBAAqB,KAAA,MAAA;AAAA,eACxB,CAAA;AAAA,cAED,QAAC,kBAAAD,cAAA,CAAA,SAAA,EAAA;AAAA,gBACC,WAAWC,SAAK,CAAA;AAAA,kBACd,CAAC,YAAA,CAAa,oBAAoB,CAAA,GAChC,gBAAqB,KAAA,QAAA;AAAA,kBACvB,CAAC,YAAA,CAAa,wBAAwB,CAAA,GACpC,gBAAqB,KAAA,MAAA;AAAA,iBACxB,CAAA;AAAA,eACH,CAAA;AAAA,aACF,CAAA;AAAA,WAAA;AAAA,SAEJ,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -5,11 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var jsxRuntime = require('react/jsx-runtime');
6
6
  var React = require('react');
7
7
  var clsx = require('clsx');
8
- var Overlay = require('../overlay/Overlay.js');
9
- var OverlayTrigger = require('../overlay/OverlayTrigger.js');
10
- var OverlayPanel = require('../overlay/OverlayPanel.js');
11
- require('../overlay/OverlayPanelCloseButton.js');
12
- var OverlayPanelContent = require('../overlay/OverlayPanelContent.js');
13
8
  var core = require('@salt-ds/core');
14
9
  var icons = require('@salt-ds/icons');
15
10
  var colorUtils = require('./color-utils.js');
@@ -97,7 +92,7 @@ const ColorChooser = ({
97
92
  const onTabClick = (index) => {
98
93
  setActiveTab(index);
99
94
  };
100
- const OverlayData = () => {
95
+ const OverlayContent = () => {
101
96
  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
102
97
  className: clsx.clsx(withBaseName("overlayContent")),
103
98
  "data-testid": "overlay-content",
@@ -123,11 +118,11 @@ const ColorChooser = ({
123
118
  ]
124
119
  });
125
120
  };
126
- return /* @__PURE__ */ jsxRuntime.jsxs(Overlay.Overlay, {
121
+ return /* @__PURE__ */ jsxRuntime.jsxs(core.Overlay, {
127
122
  placement: "bottom",
128
123
  "data-testid": "color-chooser-overlay",
129
124
  children: [
130
- /* @__PURE__ */ jsxRuntime.jsx(OverlayTrigger.OverlayTrigger, {
125
+ /* @__PURE__ */ jsxRuntime.jsx(core.OverlayTrigger, {
131
126
  children: /* @__PURE__ */ jsxRuntime.jsxs(core.Button, {
132
127
  className: clsx.clsx(withBaseName("overlayButton"), {
133
128
  [withBaseName("overlayButtonHiddenLabel")]: hideLabel
@@ -154,10 +149,13 @@ const ColorChooser = ({
154
149
  ]
155
150
  })
156
151
  }),
157
- /* @__PURE__ */ jsxRuntime.jsx(OverlayPanel.OverlayPanel, {
158
- children: /* @__PURE__ */ jsxRuntime.jsx(OverlayPanelContent.OverlayPanelContent, {
159
- children: /* @__PURE__ */ jsxRuntime.jsx(OverlayData, {})
160
- })
152
+ /* @__PURE__ */ jsxRuntime.jsxs(core.OverlayPanel, {
153
+ children: [
154
+ /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelCloseButton, {}),
155
+ /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelContent, {
156
+ children: /* @__PURE__ */ jsxRuntime.jsx(OverlayContent, {})
157
+ })
158
+ ]
161
159
  })
162
160
  ]
163
161
  });
@@ -1 +1 @@
1
- {"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n Overlay,\n OverlayPanel,\n OverlayTrigger,\n OverlayPanelContent,\n} from \"../overlay\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n convertColorMapValueToHex,\n getColorNameByHexValue,\n getHexValue,\n hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { saltColorMap } from \"./colorMap\";\nimport { ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n hexValue: string | undefined,\n tabs: ColorChooserTabs,\n saltColorOverrides: Record<string, string> | undefined\n): number {\n if (tabs.Swatches && tabs[\"Color Picker\"]) {\n const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n const colors = saltColorOverrides ?? saltColorMap;\n // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n if (\n hexNoAlpha &&\n !Object.keys(colors).find(\n (key: string) =>\n convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n hexNoAlpha?.toLowerCase()\n )\n ) {\n return 1;\n }\n }\n return 0;\n}\n\nexport interface ColorChooserProps {\n color: Color | undefined;\n defaultAlpha?: number;\n disableAlphaChooser?: boolean;\n displayHexOnly?: boolean;\n hideLabel?: boolean;\n onClear: () => void; // called when user clicks \"default\" button\n onSelect: (\n color: Color | undefined,\n finalSelection: boolean,\n event?: ChangeEvent\n ) => void;\n placeholder?: string;\n buttonProps?: Partial<ButtonProps>;\n saltColorOverrides?: Record<string, string>;\n showSwatches?: boolean;\n showColorPicker?: boolean;\n readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n onClear,\n onSelect,\n color,\n showSwatches = true,\n showColorPicker = true,\n defaultAlpha = 1,\n disableAlphaChooser = false,\n hideLabel = false,\n placeholder,\n buttonProps,\n saltColorOverrides,\n readOnly = false,\n displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-chooser\",\n css: colorChooserCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n\n const allColors: string[][] = saltColorOverrides\n ? getColorPalettes(saltColorOverrides)\n : getColorPalettes();\n const displayColorName = displayHexOnly\n ? getHexValue(color?.hex, disableAlphaChooser)\n : getColorNameByHexValue(\n color?.hex,\n disableAlphaChooser,\n saltColorOverrides\n );\n\n const handleOpenChange = (open: boolean) => setOpen(open);\n\n const alphaForTabs = isTransparent(color?.hex)\n ? defaultAlpha\n : color?.rgba?.a ?? defaultAlpha;\n\n const tabsMapping = createTabsMapping({\n swatches: showSwatches,\n colorPicker: showColorPicker,\n disableAlphaChooser,\n allColors,\n color,\n alpha: alphaForTabs,\n handleColorChange: onSelect,\n displayColorName,\n placeholder,\n onDialogClosed: () => {\n setOpen(false);\n },\n });\n\n const [activeTab, setActiveTab] = useState<number>(\n getActiveTab(color?.hex, tabsMapping, saltColorOverrides)\n );\n const onDefaultSelected = (): void => {\n if (activeTab === 0 && showSwatches) {\n onClear();\n handleOpenChange(false);\n } else {\n onClear();\n }\n };\n\n const onTabClick = (index: number): void => {\n setActiveTab(index);\n };\n\n const OverlayData = () => {\n return (\n <div\n className={clsx(withBaseName(\"overlayContent\"))}\n data-testid=\"overlay-content\"\n >\n <Button\n data-testid=\"default-button\"\n variant=\"secondary\"\n className={clsx(withBaseName(\"defaultButton\"))}\n onClick={onDefaultSelected}\n >\n <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n Default\n </Button>\n <DictTabs\n tabs={tabsMapping}\n hexValue={color?.hex}\n onTabClick={onTabClick}\n activeTab={activeTab}\n />\n </div>\n );\n };\n\n return (\n <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n <OverlayTrigger>\n <Button\n className={clsx(withBaseName(\"overlayButton\"), {\n [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n })}\n // @ts-ignore\n data-testid=\"color-chooser-overlay-button\"\n disabled={readOnly}\n {...buttonProps}\n >\n {color && (\n <div\n className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n color?.hex.startsWith(\"#ffffff\"),\n [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n color?.hex\n ),\n })}\n style={{\n backgroundColor: color?.hex,\n }}\n />\n )}\n {!hideLabel && (\n <div className={withBaseName(\"overlayButtonText\")}>\n {displayColorName ?? placeholder ?? \"No color selected\"}\n </div>\n )}\n </Button>\n </OverlayTrigger>\n <OverlayPanel>\n <OverlayPanelContent>\n <OverlayData />\n </OverlayPanelContent>\n </OverlayPanel>\n </Overlay>\n );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelContent"],"mappings":"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"}
1
+ {"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n Button,\n ButtonProps,\n makePrefixer,\n Overlay,\n OverlayPanel,\n OverlayTrigger,\n OverlayPanelContent,\n OverlayPanelCloseButton,\n} from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n convertColorMapValueToHex,\n getColorNameByHexValue,\n getHexValue,\n hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { saltColorMap } from \"./colorMap\";\nimport { ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n hexValue: string | undefined,\n tabs: ColorChooserTabs,\n saltColorOverrides: Record<string, string> | undefined\n): number {\n if (tabs.Swatches && tabs[\"Color Picker\"]) {\n const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n const colors = saltColorOverrides ?? saltColorMap;\n // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n if (\n hexNoAlpha &&\n !Object.keys(colors).find(\n (key: string) =>\n convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n hexNoAlpha?.toLowerCase()\n )\n ) {\n return 1;\n }\n }\n return 0;\n}\n\nexport interface ColorChooserProps {\n color: Color | undefined;\n defaultAlpha?: number;\n disableAlphaChooser?: boolean;\n displayHexOnly?: boolean;\n hideLabel?: boolean;\n onClear: () => void; // called when user clicks \"default\" button\n onSelect: (\n color: Color | undefined,\n finalSelection: boolean,\n event?: ChangeEvent\n ) => void;\n placeholder?: string;\n buttonProps?: Partial<ButtonProps>;\n saltColorOverrides?: Record<string, string>;\n showSwatches?: boolean;\n showColorPicker?: boolean;\n readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n onClear,\n onSelect,\n color,\n showSwatches = true,\n showColorPicker = true,\n defaultAlpha = 1,\n disableAlphaChooser = false,\n hideLabel = false,\n placeholder,\n buttonProps,\n saltColorOverrides,\n readOnly = false,\n displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-color-chooser\",\n css: colorChooserCss,\n window: targetWindow,\n });\n\n const [open, setOpen] = useState(false);\n\n const allColors: string[][] = saltColorOverrides\n ? getColorPalettes(saltColorOverrides)\n : getColorPalettes();\n const displayColorName = displayHexOnly\n ? getHexValue(color?.hex, disableAlphaChooser)\n : getColorNameByHexValue(\n color?.hex,\n disableAlphaChooser,\n saltColorOverrides\n );\n\n const handleOpenChange = (open: boolean) => setOpen(open);\n\n const alphaForTabs = isTransparent(color?.hex)\n ? defaultAlpha\n : color?.rgba?.a ?? defaultAlpha;\n\n const tabsMapping = createTabsMapping({\n swatches: showSwatches,\n colorPicker: showColorPicker,\n disableAlphaChooser,\n allColors,\n color,\n alpha: alphaForTabs,\n handleColorChange: onSelect,\n displayColorName,\n placeholder,\n onDialogClosed: () => {\n setOpen(false);\n },\n });\n\n const [activeTab, setActiveTab] = useState<number>(\n getActiveTab(color?.hex, tabsMapping, saltColorOverrides)\n );\n const onDefaultSelected = (): void => {\n if (activeTab === 0 && showSwatches) {\n onClear();\n handleOpenChange(false);\n } else {\n onClear();\n }\n };\n\n const onTabClick = (index: number): void => {\n setActiveTab(index);\n };\n\n const OverlayContent = () => {\n return (\n <div\n className={clsx(withBaseName(\"overlayContent\"))}\n data-testid=\"overlay-content\"\n >\n <Button\n data-testid=\"default-button\"\n variant=\"secondary\"\n className={clsx(withBaseName(\"defaultButton\"))}\n onClick={onDefaultSelected}\n >\n <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n Default\n </Button>\n <DictTabs\n tabs={tabsMapping}\n hexValue={color?.hex}\n onTabClick={onTabClick}\n activeTab={activeTab}\n />\n </div>\n );\n };\n\n return (\n <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n <OverlayTrigger>\n <Button\n className={clsx(withBaseName(\"overlayButton\"), {\n [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n })}\n // @ts-ignore\n data-testid=\"color-chooser-overlay-button\"\n disabled={readOnly}\n {...buttonProps}\n >\n {color && (\n <div\n className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n color?.hex.startsWith(\"#ffffff\"),\n [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n color?.hex\n ),\n })}\n style={{\n backgroundColor: color?.hex,\n }}\n />\n )}\n {!hideLabel && (\n <div className={withBaseName(\"overlayButtonText\")}>\n {displayColorName ?? placeholder ?? \"No color selected\"}\n </div>\n )}\n </Button>\n </OverlayTrigger>\n <OverlayPanel>\n <OverlayPanelCloseButton />\n <OverlayPanelContent>\n <OverlayContent />\n </OverlayPanelContent>\n </OverlayPanel>\n </Overlay>\n );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelCloseButton","OverlayPanelContent"],"mappings":"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"}
@@ -0,0 +1,6 @@
1
+ 'use strict';
2
+
3
+ var css_248z = "/* Style applied to the root element */\n.saltDateInput {\n --input-borderColor: var(--salt-editable-borderColor);\n --input-borderStyle: var(--salt-editable-borderStyle);\n --input-outlineColor: var(--salt-focused-outlineColor);\n --input-borderWidth: var(--salt-size-border);\n\n align-items: center;\n background: var(--saltDateInput-background, var(--input-background));\n color: var(--saltDateInput-color, var(--salt-content-primary-foreground));\n display: inline-flex;\n gap: var(--salt-spacing-50);\n font-family: var(--salt-text-fontFamily);\n font-size: var(--saltDateInput-fontSize, var(--salt-text-fontSize));\n height: var(--saltDateInput-height, var(--salt-size-base));\n line-height: var(--saltDateInput-lineHeight, var(--salt-text-lineHeight));\n min-height: var(--saltDateInput-minHeight, var(--salt-size-base));\n min-width: var(--saltDateInput-minWidth, 4em);\n padding-left: var(--saltDateInput-paddingLeft, var(--salt-spacing-100));\n padding-right: var(--saltDateInput-paddingRight, var(--salt-spacing-100));\n position: relative;\n width: 100%;\n box-sizing: border-box;\n}\n\n.saltDateInput:hover {\n --input-borderStyle: var(--salt-editable-borderStyle-hover);\n --input-borderColor: var(--salt-editable-borderColor-hover);\n\n background: var(--saltDateInput-background-hover, var(--input-background-hover));\n cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltDateInput:active {\n --input-borderColor: var(--salt-editable-borderColor-active);\n --input-borderStyle: var(--salt-editable-borderStyle-active);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n background: var(--saltDateInput-background-active, var(--input-background-active));\n cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDateInput-primary {\n --input-background: var(--salt-editable-primary-background);\n --input-background-active: var(--salt-editable-primary-background-active);\n --input-background-hover: var(--salt-editable-primary-background-hover);\n --input-background-disabled: var(--salt-editable-primary-background-disabled);\n --input-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDateInput-secondary {\n --input-background: var(--salt-editable-secondary-background);\n --input-background-active: var(--salt-editable-secondary-background-active);\n --input-background-hover: var(--salt-editable-secondary-background-active);\n --input-background-disabled: var(--salt-editable-secondary-background-disabled);\n --input-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltDateInput-error,\n.saltDateInput-error:hover {\n --input-background: var(--salt-status-error-background);\n --input-background-active: var(--salt-status-error-background);\n --input-background-hover: var(--salt-status-error-background);\n --input-borderColor: var(--salt-status-error-borderColor);\n --input-outlineColor: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltDateInput-warning,\n.saltDateInput-warning:hover {\n --input-background: var(--salt-status-warning-background);\n --input-background-active: var(--salt-status-warning-background);\n --input-background-hover: var(--salt-status-warning-background);\n --input-borderColor: var(--salt-status-warning-borderColor);\n --input-outlineColor: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltDateInput-success,\n.saltDateInput-success:hover {\n --input-background: var(--salt-status-success-background);\n --input-background-active: var(--salt-status-success-background);\n --input-background-hover: var(--salt-status-success-background);\n --input-borderColor: var(--salt-status-success-borderColor);\n --input-outlineColor: var(--salt-status-success-borderColor);\n}\n\n/* Style applied to inner input component */\n.saltDateInput-input {\n background: none;\n border: none;\n box-sizing: content-box;\n color: inherit;\n cursor: inherit;\n display: block;\n flex: 1;\n font: inherit;\n height: 100%;\n letter-spacing: var(--saltDateInput-letterSpacing, 0);\n margin: 0;\n min-width: 0;\n overflow: hidden;\n padding: 0;\n text-align: left;\n width: min-content;\n}\n\n/* Reset in the class */\n.saltDateInput-input:focus {\n outline: none;\n}\n\n/* Style applied to selected input */\n.saltDateInput-input::selection {\n background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltDateInput-input::placeholder {\n color: var(--salt-content-secondary-foreground);\n font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltDateInput-focused {\n --input-borderColor: var(--input-outlineColor);\n --input-borderWidth: var(--salt-editable-borderWidth-active);\n\n outline: var(--saltDateInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--input-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltDateInput.saltDateInput-readOnly {\n --input-borderColor: var(--salt-editable-borderColor-readonly);\n --input-borderStyle: var(--salt-editable-borderStyle-readonly);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-readonly);\n cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltDateInput-focused.saltDateInput-disabled {\n --input-borderWidth: var(--salt-size-border);\n outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltDateInput-focused.saltDateInput-readOnly {\n --input-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltDateInput-disabled .saltDateInput-input::selection {\n background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltDateInput.saltDateInput-disabled,\n.saltDateInput.saltDateInput-disabled:hover,\n.saltDateInput.saltDateInput-disabled:active {\n --input-borderColor: var(--salt-editable-borderColor-disabled);\n --input-borderStyle: var(--salt-editable-borderStyle-disabled);\n --input-borderWidth: var(--salt-size-border);\n\n background: var(--input-background-disabled);\n cursor: var(--salt-editable-cursor-disabled);\n color: var(--saltDateInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltDateInput-activationIndicator {\n left: 0;\n bottom: 0;\n width: 100%;\n position: absolute;\n border-bottom: var(--input-borderWidth) var(--input-borderStyle) var(--input-borderColor);\n}\n\n/* Style applied to start adornments */\n.saltDateInput-startAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-right: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltDateInput-endAdornmentContainer {\n align-items: center;\n display: inline-flex;\n padding-left: var(--salt-spacing-100);\n column-gap: var(--salt-spacing-100);\n}\n\n.saltDateInput-readOnly .saltDateInput-startAdornmentContainer {\n margin-left: var(--salt-spacing-50);\n}\n\n.saltDateInput-startAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n.saltDateInput-endAdornmentContainer .saltButton ~ .saltButton {\n margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltDateInput-startAdornmentContainer .saltButton:first-child {\n margin-left: calc(var(--salt-spacing-50) * -1);\n}\n.saltDateInput-endAdornmentContainer .saltButton:last-child {\n margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltDateInput-startAdornmentContainer > .saltButton,\n.saltDateInput-endAdornmentContainer > .saltButton {\n --saltButton-padding: var(--salt-spacing-50);\n --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n}\n";
4
+
5
+ module.exports = css_248z;
6
+ //# sourceMappingURL=DateInput.css.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DateInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}