@salt-ds/lab 1.0.0-alpha.26 → 1.0.0-alpha.28

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 (341) hide show
  1. package/css/salt-lab.css +327 -561
  2. package/dist-cjs/combo-box-next/ComboBoxNext.js +303 -166
  3. package/dist-cjs/combo-box-next/ComboBoxNext.js.map +1 -1
  4. package/dist-cjs/combo-box-next/useComboBoxNext.js +55 -0
  5. package/dist-cjs/combo-box-next/useComboBoxNext.js.map +1 -0
  6. package/dist-cjs/dropdown/DropdownBase.js +1 -1
  7. package/dist-cjs/dropdown/DropdownBase.js.map +1 -1
  8. package/dist-cjs/dropdown-next/DropdownNext.css.js +1 -1
  9. package/dist-cjs/dropdown-next/DropdownNext.js +333 -169
  10. package/dist-cjs/dropdown-next/DropdownNext.js.map +1 -1
  11. package/dist-cjs/editable-label/EditableLabel.js +1 -1
  12. package/dist-cjs/editable-label/EditableLabel.js.map +1 -1
  13. package/dist-cjs/index.js +8 -24
  14. package/dist-cjs/index.js.map +1 -1
  15. package/dist-cjs/layer-layout/LayerLayout.js +1 -3
  16. package/dist-cjs/layer-layout/LayerLayout.js.map +1 -1
  17. package/dist-cjs/list-control/ListControlContext.js +36 -0
  18. package/dist-cjs/list-control/ListControlContext.js.map +1 -0
  19. package/dist-cjs/list-control/ListControlState.js +193 -0
  20. package/dist-cjs/list-control/ListControlState.js.map +1 -0
  21. package/dist-cjs/option/Option.css.js +6 -0
  22. package/dist-cjs/option/Option.css.js.map +1 -0
  23. package/dist-cjs/option/Option.js +113 -0
  24. package/dist-cjs/option/Option.js.map +1 -0
  25. package/dist-cjs/option/OptionGroup.css.js +6 -0
  26. package/dist-cjs/option/OptionGroup.css.js.map +1 -0
  27. package/dist-cjs/option/OptionGroup.js +44 -0
  28. package/dist-cjs/option/OptionGroup.js.map +1 -0
  29. package/dist-cjs/option/OptionList.css.js +6 -0
  30. package/dist-cjs/option/OptionList.css.js.map +1 -0
  31. package/dist-cjs/option/OptionList.js +40 -0
  32. package/dist-cjs/option/OptionList.js.map +1 -0
  33. package/dist-cjs/tokenized-input/internal/InputPill.js +13 -9
  34. package/dist-cjs/tokenized-input/internal/InputPill.js.map +1 -1
  35. package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js +6 -0
  36. package/dist-cjs/tokenized-input-next/TokenizedInputNext.css.js.map +1 -0
  37. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js +244 -0
  38. package/dist-cjs/tokenized-input-next/TokenizedInputNext.js.map +1 -0
  39. package/dist-cjs/tokenized-input-next/internal/InputPill.css.js +6 -0
  40. package/dist-cjs/tokenized-input-next/internal/InputPill.css.js.map +1 -0
  41. package/dist-cjs/tokenized-input-next/internal/InputPill.js +83 -0
  42. package/dist-cjs/tokenized-input-next/internal/InputPill.js.map +1 -0
  43. package/dist-cjs/tokenized-input-next/internal/calcFirstHiddenIndex.js +22 -0
  44. package/dist-cjs/tokenized-input-next/internal/calcFirstHiddenIndex.js.map +1 -0
  45. package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js +37 -0
  46. package/dist-cjs/tokenized-input-next/internal/useResizeObserver.js.map +1 -0
  47. package/dist-cjs/tokenized-input-next/internal/useWidth.js +48 -0
  48. package/dist-cjs/tokenized-input-next/internal/useWidth.js.map +1 -0
  49. package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js +479 -0
  50. package/dist-cjs/tokenized-input-next/useTokenizedInputNext.js.map +1 -0
  51. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js +1 -1
  52. package/dist-cjs/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  53. package/dist-cjs/tree/Tree.js +1 -2
  54. package/dist-cjs/tree/Tree.js.map +1 -1
  55. package/dist-es/combo-box-next/ComboBoxNext.js +306 -169
  56. package/dist-es/combo-box-next/ComboBoxNext.js.map +1 -1
  57. package/dist-es/combo-box-next/useComboBoxNext.js +51 -0
  58. package/dist-es/combo-box-next/useComboBoxNext.js.map +1 -0
  59. package/dist-es/dropdown/DropdownBase.js +1 -1
  60. package/dist-es/dropdown/DropdownBase.js.map +1 -1
  61. package/dist-es/dropdown-next/DropdownNext.css.js +1 -1
  62. package/dist-es/dropdown-next/DropdownNext.js +332 -168
  63. package/dist-es/dropdown-next/DropdownNext.js.map +1 -1
  64. package/dist-es/editable-label/EditableLabel.js +1 -1
  65. package/dist-es/editable-label/EditableLabel.js.map +1 -1
  66. package/dist-es/index.js +4 -12
  67. package/dist-es/index.js.map +1 -1
  68. package/dist-es/layer-layout/LayerLayout.js +1 -3
  69. package/dist-es/layer-layout/LayerLayout.js.map +1 -1
  70. package/dist-es/list-control/ListControlContext.js +31 -0
  71. package/dist-es/list-control/ListControlContext.js.map +1 -0
  72. package/dist-es/list-control/ListControlState.js +189 -0
  73. package/dist-es/list-control/ListControlState.js.map +1 -0
  74. package/dist-es/option/Option.css.js +4 -0
  75. package/dist-es/option/Option.css.js.map +1 -0
  76. package/dist-es/option/Option.js +109 -0
  77. package/dist-es/option/Option.js.map +1 -0
  78. package/dist-es/option/OptionGroup.css.js +4 -0
  79. package/dist-es/option/OptionGroup.css.js.map +1 -0
  80. package/dist-es/option/OptionGroup.js +40 -0
  81. package/dist-es/option/OptionGroup.js.map +1 -0
  82. package/dist-es/option/OptionList.css.js +4 -0
  83. package/dist-es/option/OptionList.css.js.map +1 -0
  84. package/dist-es/option/OptionList.js +36 -0
  85. package/dist-es/option/OptionList.js.map +1 -0
  86. package/dist-es/tokenized-input/internal/InputPill.js +15 -11
  87. package/dist-es/tokenized-input/internal/InputPill.js.map +1 -1
  88. package/dist-es/tokenized-input-next/TokenizedInputNext.css.js +4 -0
  89. package/dist-es/tokenized-input-next/TokenizedInputNext.css.js.map +1 -0
  90. package/dist-es/tokenized-input-next/TokenizedInputNext.js +240 -0
  91. package/dist-es/tokenized-input-next/TokenizedInputNext.js.map +1 -0
  92. package/dist-es/tokenized-input-next/internal/InputPill.css.js +4 -0
  93. package/dist-es/tokenized-input-next/internal/InputPill.css.js.map +1 -0
  94. package/dist-es/tokenized-input-next/internal/InputPill.js +79 -0
  95. package/dist-es/tokenized-input-next/internal/InputPill.js.map +1 -0
  96. package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js +18 -0
  97. package/dist-es/tokenized-input-next/internal/calcFirstHiddenIndex.js.map +1 -0
  98. package/dist-es/tokenized-input-next/internal/useResizeObserver.js +33 -0
  99. package/dist-es/tokenized-input-next/internal/useResizeObserver.js.map +1 -0
  100. package/dist-es/tokenized-input-next/internal/useWidth.js +42 -0
  101. package/dist-es/tokenized-input-next/internal/useWidth.js.map +1 -0
  102. package/dist-es/tokenized-input-next/useTokenizedInputNext.js +471 -0
  103. package/dist-es/tokenized-input-next/useTokenizedInputNext.js.map +1 -0
  104. package/dist-es/toolbar/overflow-panel/OverflowPanel.js +1 -1
  105. package/dist-es/toolbar/overflow-panel/OverflowPanel.js.map +1 -1
  106. package/dist-es/tree/Tree.js +1 -2
  107. package/dist-es/tree/Tree.js.map +1 -1
  108. package/dist-types/combo-box-next/ComboBoxNext.d.ts +7 -80
  109. package/dist-types/combo-box-next/useComboBoxNext.d.ts +31 -0
  110. package/dist-types/dropdown-next/DropdownNext.d.ts +25 -27
  111. package/dist-types/index.d.ts +2 -5
  112. package/dist-types/layer-layout/LayerLayout.d.ts +1 -1
  113. package/dist-types/list-control/ListControlContext.d.ts +20 -0
  114. package/dist-types/list-control/ListControlState.d.ts +68 -0
  115. package/dist-types/option/Option.d.ts +20 -0
  116. package/dist-types/option/OptionGroup.d.ts +12 -0
  117. package/dist-types/option/OptionList.d.ts +5 -0
  118. package/dist-types/option/index.d.ts +2 -0
  119. package/dist-types/tokenized-input/internal/InputPill.d.ts +7 -5
  120. package/dist-types/tokenized-input-next/TokenizedInputNext.d.ts +51 -0
  121. package/dist-types/tokenized-input-next/index.d.ts +2 -0
  122. package/dist-types/tokenized-input-next/internal/InputPill.d.ts +29 -0
  123. package/dist-types/tokenized-input-next/internal/calcFirstHiddenIndex.d.ts +4 -0
  124. package/dist-types/tokenized-input-next/internal/useResizeObserver.d.ts +6 -0
  125. package/dist-types/tokenized-input-next/internal/useWidth.d.ts +7 -0
  126. package/dist-types/tokenized-input-next/useTokenizedInputNext.d.ts +47 -0
  127. package/package.json +2 -2
  128. package/dist-cjs/combo-box-next/ComboBoxNext.css.js +0 -6
  129. package/dist-cjs/combo-box-next/ComboBoxNext.css.js.map +0 -1
  130. package/dist-cjs/combo-box-next/useComboBox.js +0 -147
  131. package/dist-cjs/combo-box-next/useComboBox.js.map +0 -1
  132. package/dist-cjs/combo-box-next/useComboboxPortal.js +0 -75
  133. package/dist-cjs/combo-box-next/useComboboxPortal.js.map +0 -1
  134. package/dist-cjs/combo-box-next/utils.js +0 -36
  135. package/dist-cjs/combo-box-next/utils.js.map +0 -1
  136. package/dist-cjs/dropdown-next/useDropdownNext.js +0 -188
  137. package/dist-cjs/dropdown-next/useDropdownNext.js.map +0 -1
  138. package/dist-cjs/focus-manager/FocusManager.js +0 -158
  139. package/dist-cjs/focus-manager/FocusManager.js.map +0 -1
  140. package/dist-cjs/focus-manager/internal/findAllTabbableElements.js +0 -45
  141. package/dist-cjs/focus-manager/internal/findAllTabbableElements.js.map +0 -1
  142. package/dist-cjs/focus-manager/internal/useReturnFocus.js +0 -59
  143. package/dist-cjs/focus-manager/internal/useReturnFocus.js.map +0 -1
  144. package/dist-cjs/navigation-item/ConditionalWrapper.js +0 -37
  145. package/dist-cjs/navigation-item/ConditionalWrapper.js.map +0 -1
  146. package/dist-cjs/navigation-item/ExpansionIcon.js +0 -31
  147. package/dist-cjs/navigation-item/ExpansionIcon.js.map +0 -1
  148. package/dist-cjs/navigation-item/NavigationItem.css.js +0 -6
  149. package/dist-cjs/navigation-item/NavigationItem.css.js.map +0 -1
  150. package/dist-cjs/navigation-item/NavigationItem.js +0 -81
  151. package/dist-cjs/navigation-item/NavigationItem.js.map +0 -1
  152. package/dist-cjs/pagination/CompactInput.css.js +0 -6
  153. package/dist-cjs/pagination/CompactInput.css.js.map +0 -1
  154. package/dist-cjs/pagination/CompactInput.js +0 -62
  155. package/dist-cjs/pagination/CompactInput.js.map +0 -1
  156. package/dist-cjs/pagination/CompactPaginator.css.js +0 -6
  157. package/dist-cjs/pagination/CompactPaginator.css.js.map +0 -1
  158. package/dist-cjs/pagination/CompactPaginator.js +0 -76
  159. package/dist-cjs/pagination/CompactPaginator.js.map +0 -1
  160. package/dist-cjs/pagination/GoToInput.css.js +0 -6
  161. package/dist-cjs/pagination/GoToInput.css.js.map +0 -1
  162. package/dist-cjs/pagination/GoToInput.js +0 -77
  163. package/dist-cjs/pagination/GoToInput.js.map +0 -1
  164. package/dist-cjs/pagination/PageButton.css.js +0 -6
  165. package/dist-cjs/pagination/PageButton.css.js.map +0 -1
  166. package/dist-cjs/pagination/PageButton.js +0 -44
  167. package/dist-cjs/pagination/PageButton.js.map +0 -1
  168. package/dist-cjs/pagination/PageRanges.css.js +0 -6
  169. package/dist-cjs/pagination/PageRanges.css.js.map +0 -1
  170. package/dist-cjs/pagination/PageRanges.js +0 -73
  171. package/dist-cjs/pagination/PageRanges.js.map +0 -1
  172. package/dist-cjs/pagination/Pagination.css.js +0 -6
  173. package/dist-cjs/pagination/Pagination.css.js.map +0 -1
  174. package/dist-cjs/pagination/Pagination.js +0 -78
  175. package/dist-cjs/pagination/Pagination.js.map +0 -1
  176. package/dist-cjs/pagination/PaginationContext.js +0 -17
  177. package/dist-cjs/pagination/PaginationContext.js.map +0 -1
  178. package/dist-cjs/pagination/Paginator.css.js +0 -6
  179. package/dist-cjs/pagination/Paginator.css.js.map +0 -1
  180. package/dist-cjs/pagination/Paginator.js +0 -69
  181. package/dist-cjs/pagination/Paginator.js.map +0 -1
  182. package/dist-cjs/pagination/usePagination.js +0 -27
  183. package/dist-cjs/pagination/usePagination.js.map +0 -1
  184. package/dist-cjs/pagination/usePaginationContext.js +0 -19
  185. package/dist-cjs/pagination/usePaginationContext.js.map +0 -1
  186. package/dist-cjs/pill/ClosablePill.js +0 -61
  187. package/dist-cjs/pill/ClosablePill.js.map +0 -1
  188. package/dist-cjs/pill/Pill.css.js +0 -6
  189. package/dist-cjs/pill/Pill.css.js.map +0 -1
  190. package/dist-cjs/pill/Pill.js +0 -49
  191. package/dist-cjs/pill/Pill.js.map +0 -1
  192. package/dist-cjs/pill/PillBase.js +0 -133
  193. package/dist-cjs/pill/PillBase.js.map +0 -1
  194. package/dist-cjs/pill/SelectablePill.js +0 -55
  195. package/dist-cjs/pill/SelectablePill.js.map +0 -1
  196. package/dist-cjs/pill/constants.js +0 -8
  197. package/dist-cjs/pill/constants.js.map +0 -1
  198. package/dist-cjs/pill/internal/DeleteButton.js +0 -37
  199. package/dist-cjs/pill/internal/DeleteButton.js.map +0 -1
  200. package/dist-cjs/pill/internal/DivButton.js +0 -68
  201. package/dist-cjs/pill/internal/DivButton.js.map +0 -1
  202. package/dist-cjs/pill/internal/PillCheckbox.css.js +0 -6
  203. package/dist-cjs/pill/internal/PillCheckbox.css.js.map +0 -1
  204. package/dist-cjs/pill/internal/PillCheckbox.js +0 -27
  205. package/dist-cjs/pill/internal/PillCheckbox.js.map +0 -1
  206. package/dist-cjs/pill-next/PillNext.css.js +0 -6
  207. package/dist-cjs/pill-next/PillNext.css.js.map +0 -1
  208. package/dist-cjs/pill-next/PillNext.js +0 -60
  209. package/dist-cjs/pill-next/PillNext.js.map +0 -1
  210. package/dist-cjs/scrim/Scrim.css.js +0 -6
  211. package/dist-cjs/scrim/Scrim.css.js.map +0 -1
  212. package/dist-cjs/scrim/Scrim.js +0 -170
  213. package/dist-cjs/scrim/Scrim.js.map +0 -1
  214. package/dist-cjs/scrim/ScrimContext.js +0 -13
  215. package/dist-cjs/scrim/ScrimContext.js.map +0 -1
  216. package/dist-cjs/scrim/internal/PreventFocus.js +0 -39
  217. package/dist-cjs/scrim/internal/PreventFocus.js.map +0 -1
  218. package/dist-es/combo-box-next/ComboBoxNext.css.js +0 -4
  219. package/dist-es/combo-box-next/ComboBoxNext.css.js.map +0 -1
  220. package/dist-es/combo-box-next/useComboBox.js +0 -143
  221. package/dist-es/combo-box-next/useComboBox.js.map +0 -1
  222. package/dist-es/combo-box-next/useComboboxPortal.js +0 -71
  223. package/dist-es/combo-box-next/useComboboxPortal.js.map +0 -1
  224. package/dist-es/combo-box-next/utils.js +0 -31
  225. package/dist-es/combo-box-next/utils.js.map +0 -1
  226. package/dist-es/dropdown-next/useDropdownNext.js +0 -184
  227. package/dist-es/dropdown-next/useDropdownNext.js.map +0 -1
  228. package/dist-es/focus-manager/FocusManager.js +0 -154
  229. package/dist-es/focus-manager/FocusManager.js.map +0 -1
  230. package/dist-es/focus-manager/internal/findAllTabbableElements.js +0 -41
  231. package/dist-es/focus-manager/internal/findAllTabbableElements.js.map +0 -1
  232. package/dist-es/focus-manager/internal/useReturnFocus.js +0 -55
  233. package/dist-es/focus-manager/internal/useReturnFocus.js.map +0 -1
  234. package/dist-es/navigation-item/ConditionalWrapper.js +0 -33
  235. package/dist-es/navigation-item/ConditionalWrapper.js.map +0 -1
  236. package/dist-es/navigation-item/ExpansionIcon.js +0 -27
  237. package/dist-es/navigation-item/ExpansionIcon.js.map +0 -1
  238. package/dist-es/navigation-item/NavigationItem.css.js +0 -4
  239. package/dist-es/navigation-item/NavigationItem.css.js.map +0 -1
  240. package/dist-es/navigation-item/NavigationItem.js +0 -77
  241. package/dist-es/navigation-item/NavigationItem.js.map +0 -1
  242. package/dist-es/pagination/CompactInput.css.js +0 -4
  243. package/dist-es/pagination/CompactInput.css.js.map +0 -1
  244. package/dist-es/pagination/CompactInput.js +0 -58
  245. package/dist-es/pagination/CompactInput.js.map +0 -1
  246. package/dist-es/pagination/CompactPaginator.css.js +0 -4
  247. package/dist-es/pagination/CompactPaginator.css.js.map +0 -1
  248. package/dist-es/pagination/CompactPaginator.js +0 -72
  249. package/dist-es/pagination/CompactPaginator.js.map +0 -1
  250. package/dist-es/pagination/GoToInput.css.js +0 -4
  251. package/dist-es/pagination/GoToInput.css.js.map +0 -1
  252. package/dist-es/pagination/GoToInput.js +0 -73
  253. package/dist-es/pagination/GoToInput.js.map +0 -1
  254. package/dist-es/pagination/PageButton.css.js +0 -4
  255. package/dist-es/pagination/PageButton.css.js.map +0 -1
  256. package/dist-es/pagination/PageButton.js +0 -40
  257. package/dist-es/pagination/PageButton.js.map +0 -1
  258. package/dist-es/pagination/PageRanges.css.js +0 -4
  259. package/dist-es/pagination/PageRanges.css.js.map +0 -1
  260. package/dist-es/pagination/PageRanges.js +0 -69
  261. package/dist-es/pagination/PageRanges.js.map +0 -1
  262. package/dist-es/pagination/Pagination.css.js +0 -4
  263. package/dist-es/pagination/Pagination.css.js.map +0 -1
  264. package/dist-es/pagination/Pagination.js +0 -74
  265. package/dist-es/pagination/Pagination.js.map +0 -1
  266. package/dist-es/pagination/PaginationContext.js +0 -13
  267. package/dist-es/pagination/PaginationContext.js.map +0 -1
  268. package/dist-es/pagination/Paginator.css.js +0 -4
  269. package/dist-es/pagination/Paginator.css.js.map +0 -1
  270. package/dist-es/pagination/Paginator.js +0 -65
  271. package/dist-es/pagination/Paginator.js.map +0 -1
  272. package/dist-es/pagination/usePagination.js +0 -23
  273. package/dist-es/pagination/usePagination.js.map +0 -1
  274. package/dist-es/pagination/usePaginationContext.js +0 -15
  275. package/dist-es/pagination/usePaginationContext.js.map +0 -1
  276. package/dist-es/pill/ClosablePill.js +0 -57
  277. package/dist-es/pill/ClosablePill.js.map +0 -1
  278. package/dist-es/pill/Pill.css.js +0 -4
  279. package/dist-es/pill/Pill.css.js.map +0 -1
  280. package/dist-es/pill/Pill.js +0 -45
  281. package/dist-es/pill/Pill.js.map +0 -1
  282. package/dist-es/pill/PillBase.js +0 -129
  283. package/dist-es/pill/PillBase.js.map +0 -1
  284. package/dist-es/pill/SelectablePill.js +0 -51
  285. package/dist-es/pill/SelectablePill.js.map +0 -1
  286. package/dist-es/pill/constants.js +0 -4
  287. package/dist-es/pill/constants.js.map +0 -1
  288. package/dist-es/pill/internal/DeleteButton.js +0 -33
  289. package/dist-es/pill/internal/DeleteButton.js.map +0 -1
  290. package/dist-es/pill/internal/DivButton.js +0 -64
  291. package/dist-es/pill/internal/DivButton.js.map +0 -1
  292. package/dist-es/pill/internal/PillCheckbox.css.js +0 -4
  293. package/dist-es/pill/internal/PillCheckbox.css.js.map +0 -1
  294. package/dist-es/pill/internal/PillCheckbox.js +0 -23
  295. package/dist-es/pill/internal/PillCheckbox.js.map +0 -1
  296. package/dist-es/pill-next/PillNext.css.js +0 -4
  297. package/dist-es/pill-next/PillNext.css.js.map +0 -1
  298. package/dist-es/pill-next/PillNext.js +0 -52
  299. package/dist-es/pill-next/PillNext.js.map +0 -1
  300. package/dist-es/scrim/Scrim.css.js +0 -4
  301. package/dist-es/scrim/Scrim.css.js.map +0 -1
  302. package/dist-es/scrim/Scrim.js +0 -162
  303. package/dist-es/scrim/Scrim.js.map +0 -1
  304. package/dist-es/scrim/ScrimContext.js +0 -9
  305. package/dist-es/scrim/ScrimContext.js.map +0 -1
  306. package/dist-es/scrim/internal/PreventFocus.js +0 -35
  307. package/dist-es/scrim/internal/PreventFocus.js.map +0 -1
  308. package/dist-types/combo-box-next/useComboBox.d.ts +0 -44
  309. package/dist-types/combo-box-next/useComboboxPortal.d.ts +0 -22
  310. package/dist-types/combo-box-next/utils.d.ts +0 -7
  311. package/dist-types/dropdown-next/useDropdownNext.d.ts +0 -50
  312. package/dist-types/navigation-item/ConditionalWrapper.d.ts +0 -8
  313. package/dist-types/navigation-item/ExpansionIcon.d.ts +0 -2
  314. package/dist-types/navigation-item/NavigationItem.d.ts +0 -36
  315. package/dist-types/navigation-item/index.d.ts +0 -1
  316. package/dist-types/pagination/CompactInput.d.ts +0 -2
  317. package/dist-types/pagination/CompactPaginator.d.ts +0 -1
  318. package/dist-types/pagination/GoToInput.d.ts +0 -16
  319. package/dist-types/pagination/PageButton.d.ts +0 -6
  320. package/dist-types/pagination/PageRanges.d.ts +0 -5
  321. package/dist-types/pagination/Pagination.d.ts +0 -20
  322. package/dist-types/pagination/PaginationContext.d.ts +0 -7
  323. package/dist-types/pagination/Paginator.d.ts +0 -12
  324. package/dist-types/pagination/index.d.ts +0 -5
  325. package/dist-types/pagination/usePagination.d.ts +0 -2
  326. package/dist-types/pagination/usePaginationContext.d.ts +0 -1
  327. package/dist-types/pill/ClosablePill.d.ts +0 -8
  328. package/dist-types/pill/Pill.d.ts +0 -15
  329. package/dist-types/pill/PillBase.d.ts +0 -52
  330. package/dist-types/pill/SelectablePill.d.ts +0 -17
  331. package/dist-types/pill/constants.d.ts +0 -1
  332. package/dist-types/pill/index.d.ts +0 -3
  333. package/dist-types/pill/internal/DeleteButton.d.ts +0 -8
  334. package/dist-types/pill/internal/DivButton.d.ts +0 -12
  335. package/dist-types/pill/internal/PillCheckbox.d.ts +0 -3
  336. package/dist-types/pill-next/PillNext.d.ts +0 -4
  337. package/dist-types/pill-next/index.d.ts +0 -1
  338. package/dist-types/scrim/Scrim.d.ts +0 -68
  339. package/dist-types/scrim/ScrimContext.d.ts +0 -1
  340. package/dist-types/scrim/index.d.ts +0 -2
  341. package/dist-types/scrim/internal/PreventFocus.d.ts +0 -1
@@ -1,77 +0,0 @@
1
- import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { makePrefixer } from '@salt-ds/core';
4
- import { clsx } from 'clsx';
5
- import { ExpansionIcon } from './ExpansionIcon.js';
6
- import { ConditionalWrapper } from './ConditionalWrapper.js';
7
- import css_248z from './NavigationItem.css.js';
8
- import { useWindow } from '@salt-ds/window';
9
- import { useComponentCssInjection } from '@salt-ds/styles';
10
-
11
- const withBaseName = makePrefixer("saltNavigationItem");
12
- const NavigationItem = forwardRef(
13
- function NavigationItem2(props, ref) {
14
- const {
15
- active,
16
- blurActive,
17
- children,
18
- className,
19
- expanded = false,
20
- orientation = "horizontal",
21
- parent,
22
- level = 0,
23
- onExpand,
24
- href,
25
- style: styleProp,
26
- ...rest
27
- } = props;
28
- const targetWindow = useWindow();
29
- useComponentCssInjection({
30
- testId: "salt-navigation-item",
31
- css: css_248z,
32
- window: targetWindow
33
- });
34
- const style = {
35
- ...styleProp,
36
- "--saltNavigationItem-level": `${level}`
37
- };
38
- return /* @__PURE__ */ jsx("div", {
39
- ref,
40
- style,
41
- className: clsx(withBaseName(), className),
42
- ...rest,
43
- children: /* @__PURE__ */ jsxs(ConditionalWrapper, {
44
- className: clsx(
45
- withBaseName("wrapper"),
46
- {
47
- [withBaseName("active")]: active || blurActive,
48
- [withBaseName("blurActive")]: blurActive && level !== 0,
49
- [withBaseName("nested")]: level !== 0,
50
- [withBaseName("rootItem")]: level === 0,
51
- [withBaseName("expandButton")]: parent
52
- },
53
- withBaseName(orientation)
54
- ),
55
- parent,
56
- expanded,
57
- onExpand,
58
- active,
59
- href,
60
- children: [
61
- /* @__PURE__ */ jsx("span", {
62
- className: withBaseName("label"),
63
- children
64
- }),
65
- parent && /* @__PURE__ */ jsx(ExpansionIcon, {
66
- expanded,
67
- orientation,
68
- className: withBaseName("expandIcon")
69
- })
70
- ]
71
- })
72
- });
73
- }
74
- );
75
-
76
- export { NavigationItem };
77
- //# sourceMappingURL=NavigationItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationItem.js","sources":["../src/navigation-item/NavigationItem.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { ExpansionIcon } from \"./ExpansionIcon\";\nimport { ConditionalWrapper } from \"./ConditionalWrapper\";\n\nimport navigationItemCss from \"./NavigationItem.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nexport interface NavigationItemProps extends ComponentPropsWithoutRef<\"div\"> {\n /**\n * Whether the navigation item is active.\n */\n active?: boolean;\n /**\n * Whether the nested group is collapsed and there is an active nested item within it.\n */\n blurActive?: boolean;\n /**\n * Whether the navigation item is expanded.\n */\n expanded?: boolean;\n /**\n * Level of nesting.\n */\n level?: number;\n /**\n * The orientation of the navigation item.\n */\n orientation?: \"horizontal\" | \"vertical\";\n /**\n * Whether the navigation item is a parent with nested items.\n */\n parent?: boolean;\n /**\n * Action to be triggered when the navigation item is expanded.\n */\n onExpand?: MouseEventHandler<HTMLButtonElement>;\n /**\n * Href to be passed to the Link element.\n */\n href?: string;\n}\n\nconst withBaseName = makePrefixer(\"saltNavigationItem\");\n\nexport const NavigationItem = forwardRef<HTMLDivElement, NavigationItemProps>(\n function NavigationItem(props, ref) {\n const {\n active,\n blurActive,\n children,\n className,\n expanded = false,\n orientation = \"horizontal\",\n parent,\n level = 0,\n onExpand,\n href,\n style: styleProp,\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-navigation-item\",\n css: navigationItemCss,\n window: targetWindow,\n });\n\n const style = {\n ...styleProp,\n \"--saltNavigationItem-level\": `${level}`,\n };\n\n return (\n <div\n ref={ref}\n style={style}\n className={clsx(withBaseName(), className)}\n {...rest}\n >\n <ConditionalWrapper\n className={clsx(\n withBaseName(\"wrapper\"),\n {\n [withBaseName(\"active\")]: active || blurActive,\n [withBaseName(\"blurActive\")]: blurActive && level !== 0,\n [withBaseName(\"nested\")]: level !== 0,\n [withBaseName(\"rootItem\")]: level === 0,\n [withBaseName(\"expandButton\")]: parent,\n },\n withBaseName(orientation)\n )}\n parent={parent}\n expanded={expanded}\n onExpand={onExpand}\n active={active}\n href={href}\n >\n <span className={withBaseName(\"label\")}>{children}</span>\n {parent && (\n <ExpansionIcon\n expanded={expanded}\n orientation={orientation}\n className={withBaseName(\"expandIcon\")}\n />\n )}\n </ConditionalWrapper>\n </div>\n );\n }\n);\n"],"names":["NavigationItem","navigationItemCss"],"mappings":";;;;;;;;;;AA6CA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,QAAW,GAAA,KAAA;AAAA,MACX,WAAc,GAAA,YAAA;AAAA,MACd,MAAA;AAAA,MACA,KAAQ,GAAA,CAAA;AAAA,MACR,QAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAO,EAAA,SAAA;AAAA,MACJ,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,sBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,KAAQ,GAAA;AAAA,MACZ,GAAG,SAAA;AAAA,MACH,8BAA8B,CAAG,EAAA,KAAA,CAAA,CAAA;AAAA,KACnC,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MAEJ,QAAC,kBAAA,IAAA,CAAA,kBAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,aAAa,SAAS,CAAA;AAAA,UACtB;AAAA,YACE,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,MAAU,IAAA,UAAA;AAAA,YACpC,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAU,KAAA,CAAA;AAAA,YACtD,CAAC,YAAA,CAAa,QAAQ,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACpC,CAAC,YAAA,CAAa,UAAU,CAAA,GAAI,KAAU,KAAA,CAAA;AAAA,YACtC,CAAC,YAAa,CAAA,cAAc,CAAI,GAAA,MAAA;AAAA,WAClC;AAAA,UACA,aAAa,WAAW,CAAA;AAAA,SAC1B;AAAA,QACA,MAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,MAAA;AAAA,QACA,IAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,YAAK,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,YAAI,QAAA;AAAA,WAAS,CAAA;AAAA,UACjD,0BACE,GAAA,CAAA,aAAA,EAAA;AAAA,YACC,QAAA;AAAA,YACA,WAAA;AAAA,YACA,SAAA,EAAW,aAAa,YAAY,CAAA;AAAA,WACtC,CAAA;AAAA,SAAA;AAAA,OAEJ,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltCompactInput {\n --saltInput-paddingLeft: 0;\n --saltInput-paddingRight: 0;\n}\n\n.saltCompactInput-defaultSize.saltInput {\n --saltInput-minWidth: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=CompactInput.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CompactInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,58 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { clsx } from 'clsx';
3
- import { forwardRef, useState, useEffect } from 'react';
4
- import { makePrefixer, Input } from '@salt-ds/core';
5
- import { usePaginationContext } from './usePaginationContext.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './CompactInput.css.js';
9
-
10
- const withBaseName = makePrefixer("saltCompactInput");
11
- const CompactInput = forwardRef(function CompactInput2(props, ref) {
12
- const targetWindow = useWindow();
13
- useComponentCssInjection({
14
- testId: "salt-compact-input",
15
- css: css_248z,
16
- window: targetWindow
17
- });
18
- const { count, page, onPageChange } = usePaginationContext();
19
- const [inputValue, setInputValue] = useState(`${page}`);
20
- useEffect(() => {
21
- setInputValue(`${page}`);
22
- }, [page]);
23
- const handleChange = (event) => {
24
- setInputValue(event.target.value);
25
- };
26
- const handleKeyDown = (event) => {
27
- if (event.key === "Enter") {
28
- const pageValue = Number(inputValue);
29
- if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {
30
- onPageChange(event, pageValue);
31
- } else {
32
- setInputValue(`${page}`);
33
- }
34
- }
35
- };
36
- const handleBlur = () => {
37
- setInputValue(`${page}`);
38
- };
39
- return /* @__PURE__ */ jsx(Input, {
40
- className: clsx(withBaseName(), {
41
- [withBaseName("defaultSize")]: count < 100
42
- }),
43
- inputProps: {
44
- "aria-label": `Go to page, ${count} total`,
45
- style: { width: `${`${count}`.length}ch` }
46
- },
47
- onBlur: handleBlur,
48
- onChange: handleChange,
49
- onKeyDown: handleKeyDown,
50
- value: inputValue,
51
- textAlign: "center",
52
- ref,
53
- ...props
54
- });
55
- });
56
-
57
- export { CompactInput };
58
- //# sourceMappingURL=CompactInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CompactInput.js","sources":["../src/pagination/CompactInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n KeyboardEventHandler,\n forwardRef,\n useEffect,\n useState,\n} from \"react\";\nimport { Input, InputProps, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactInputCss from \"./CompactInput.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactInput\");\n\nexport const CompactInput = forwardRef<\n HTMLInputElement,\n Pick<InputProps, \"inputRef\" | \"variant\">\n>(function CompactInput(props, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-input\",\n css: compactInputCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const [inputValue, setInputValue] = useState(`${page}`);\n\n useEffect(() => {\n setInputValue(`${page}`);\n }, [page]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (!isNaN(pageValue) && pageValue <= count && pageValue > 0) {\n onPageChange(event, pageValue);\n } else {\n setInputValue(`${page}`);\n }\n }\n };\n\n const handleBlur = () => {\n setInputValue(`${page}`);\n };\n\n return (\n <Input\n className={clsx(withBaseName(), {\n [withBaseName(\"defaultSize\")]: count < 100,\n })}\n inputProps={{\n \"aria-label\": `Go to page, ${count} total`,\n style: { width: `${`${count}`.length}ch` },\n }}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n ref={ref}\n {...props}\n />\n );\n});\n"],"names":["CompactInput","compactInputCss"],"mappings":";;;;;;;;;AAgBA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA,CAG1B,SAASA,aAAAA,CAAa,OAAO,GAAK,EAAA;AAClC,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,oBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,EAAA,MAAM,CAAC,UAAY,EAAA,aAAa,CAAI,GAAA,QAAA,CAAS,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,EAAG,CAAC,IAAI,CAAC,CAAA,CAAA;AAET,EAAM,MAAA,YAAA,GAAqD,CAAC,KAAU,KAAA;AACpE,IAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,GAClC,CAAA;AAEA,EAAM,MAAA,aAAA,GAAwD,CAAC,KAAU,KAAA;AACvE,IAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,MAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,MAAA,IAAI,CAAC,KAAM,CAAA,SAAS,KAAK,SAAa,IAAA,KAAA,IAAS,YAAY,CAAG,EAAA;AAC5D,QAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,OACxB,MAAA;AACL,QAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,aAAa,MAAM;AACvB,IAAA,aAAA,CAAc,GAAG,IAAM,CAAA,CAAA,CAAA,CAAA;AAAA,GACzB,CAAA;AAEA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,MAC9B,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,KACxC,CAAA;AAAA,IACD,UAAY,EAAA;AAAA,MACV,cAAc,CAAe,YAAA,EAAA,KAAA,CAAA,MAAA,CAAA;AAAA,MAC7B,OAAO,EAAE,KAAA,EAAO,CAAG,EAAA,CAAA,EAAG,QAAQ,MAAW,CAAA,EAAA,CAAA,EAAA;AAAA,KAC3C;AAAA,IACA,MAAQ,EAAA,UAAA;AAAA,IACR,QAAU,EAAA,YAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,IACX,KAAO,EAAA,UAAA;AAAA,IACP,SAAW,EAAA,QAAA;AAAA,IACX,GAAA;AAAA,IACC,GAAG,KAAA;AAAA,GACN,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltCompactPaginator {\n flex-wrap: nowrap;\n display: flex;\n gap: var(--salt-spacing-100);\n align-items: center;\n}\n\n.saltCompactPaginator-arrowButton {\n --saltButton-width: var(--salt-size-base);\n --saltButton-height: var(--salt-size-base);\n --saltButton-padding: var(--salt-spacing-100);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=CompactPaginator.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CompactPaginator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,72 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer, Button, Text } from '@salt-ds/core';
5
- import { ChevronLeftIcon, ChevronRightIcon } from '@salt-ds/icons';
6
- import { PageButton } from './PageButton.js';
7
- import { usePaginationContext } from './usePaginationContext.js';
8
- import { useWindow } from '@salt-ds/window';
9
- import { useComponentCssInjection } from '@salt-ds/styles';
10
- import css_248z from './CompactPaginator.css.js';
11
-
12
- const withBaseName = makePrefixer("saltCompactPaginator");
13
- const CompactPaginator = forwardRef(function CompactPaginator2({ children, className, ...restProps }, ref) {
14
- const targetWindow = useWindow();
15
- useComponentCssInjection({
16
- testId: "salt-compact-paginator",
17
- css: css_248z,
18
- window: targetWindow
19
- });
20
- const { count, page, onPageChange } = usePaginationContext();
21
- const onPreviousPage = (event) => {
22
- onPageChange(event, Math.max(1, page - 1));
23
- };
24
- const onNextPage = (event) => {
25
- onPageChange(event, Math.min(page + 1, count));
26
- };
27
- const isOnFirstPage = page === 1;
28
- const isOnLastPage = page === count;
29
- return /* @__PURE__ */ jsxs("div", {
30
- className: clsx(withBaseName(), className),
31
- ...restProps,
32
- ref,
33
- children: [
34
- /* @__PURE__ */ jsx(Button, {
35
- variant: "secondary",
36
- "aria-label": "Previous Page",
37
- onClick: onPreviousPage,
38
- disabled: isOnFirstPage,
39
- className: withBaseName("arrowButton"),
40
- children: /* @__PURE__ */ jsx(ChevronLeftIcon, {
41
- "aria-hidden": true
42
- })
43
- }),
44
- children ? children : /* @__PURE__ */ jsx(PageButton, {
45
- page,
46
- disabled: true
47
- }),
48
- /* @__PURE__ */ jsx(Text, {
49
- as: "span",
50
- variant: "secondary",
51
- children: "of"
52
- }),
53
- /* @__PURE__ */ jsx(PageButton, {
54
- page: count,
55
- disabled: isOnLastPage
56
- }),
57
- /* @__PURE__ */ jsx(Button, {
58
- variant: "secondary",
59
- "aria-label": "Next Page",
60
- onClick: onNextPage,
61
- disabled: isOnLastPage,
62
- className: withBaseName("arrowButton"),
63
- children: /* @__PURE__ */ jsx(ChevronRightIcon, {
64
- "aria-hidden": true
65
- })
66
- })
67
- ]
68
- });
69
- });
70
-
71
- export { CompactPaginator };
72
- //# sourceMappingURL=CompactPaginator.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CompactPaginator.js","sources":["../src/pagination/CompactPaginator.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef, MouseEventHandler } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, Text, makePrefixer } from \"@salt-ds/core\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { PageButton } from \"./PageButton\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport compactPaginatorCss from \"./CompactPaginator.css\";\n\nconst withBaseName = makePrefixer(\"saltCompactPaginator\");\n\nexport const CompactPaginator = forwardRef<\n HTMLDivElement,\n ComponentPropsWithoutRef<\"div\">\n>(function CompactPaginator({ children, className, ...restProps }, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-compact-paginator\",\n css: compactPaginatorCss,\n window: targetWindow,\n });\n\n const { count, page, onPageChange } = usePaginationContext();\n\n const onPreviousPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.max(1, page - 1));\n };\n\n const onNextPage: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, Math.min(page + 1, count));\n };\n\n const isOnFirstPage = page === 1;\n const isOnLastPage = page === count;\n\n return (\n <div className={clsx(withBaseName(), className)} {...restProps} ref={ref}>\n <Button\n variant=\"secondary\"\n aria-label=\"Previous Page\"\n onClick={onPreviousPage}\n disabled={isOnFirstPage}\n className={withBaseName(\"arrowButton\")}\n >\n <ChevronLeftIcon aria-hidden />\n </Button>\n {children ? children : <PageButton page={page} disabled />}\n <Text as=\"span\" variant=\"secondary\">\n of\n </Text>\n <PageButton page={count} disabled={isOnLastPage} />\n <Button\n variant=\"secondary\"\n aria-label=\"Next Page\"\n onClick={onNextPage}\n disabled={isOnLastPage}\n className={withBaseName(\"arrowButton\")}\n >\n <ChevronRightIcon aria-hidden />\n </Button>\n </div>\n );\n});\n"],"names":["CompactPaginator","compactPaginatorCss"],"mappings":";;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA,CAAA;AAE3C,MAAA,gBAAA,GAAmB,WAG9B,SAASA,iBAAAA,CAAiB,EAAE,QAAU,EAAA,SAAA,EAAA,GAAc,SAAU,EAAA,EAAG,GAAK,EAAA;AACtE,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,wBAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAM,EAAA,YAAA,KAAiB,oBAAqB,EAAA,CAAA;AAE3D,EAAM,MAAA,cAAA,GAAuD,CAAC,KAAU,KAAA;AACtE,IAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,CAAG,EAAA,IAAA,GAAO,CAAC,CAAC,CAAA,CAAA;AAAA,GAC3C,CAAA;AAEA,EAAM,MAAA,UAAA,GAAmD,CAAC,KAAU,KAAA;AAClE,IAAA,YAAA,CAAa,OAAO,IAAK,CAAA,GAAA,CAAI,IAAO,GAAA,CAAA,EAAG,KAAK,CAAC,CAAA,CAAA;AAAA,GAC/C,CAAA;AAEA,EAAA,MAAM,gBAAgB,IAAS,KAAA,CAAA,CAAA;AAC/B,EAAA,MAAM,eAAe,IAAS,KAAA,KAAA,CAAA;AAE9B,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAC9D,QAAA,EAAA;AAAA,sBAAC,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,YAAW,EAAA,eAAA;AAAA,QACX,OAAS,EAAA,cAAA;AAAA,QACT,QAAU,EAAA,aAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAC,kBAAA,GAAA,CAAA,eAAA,EAAA;AAAA,UAAgB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAC/B,CAAA;AAAA,MACC,QAAA,GAAW,2BAAY,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,IAAA;AAAA,QAAY,QAAQ,EAAA,IAAA;AAAA,OAAC,CAAA;AAAA,sBACvD,GAAA,CAAA,IAAA,EAAA;AAAA,QAAK,EAAG,EAAA,MAAA;AAAA,QAAO,OAAQ,EAAA,WAAA;AAAA,QAAY,QAAA,EAAA,IAAA;AAAA,OAEpC,CAAA;AAAA,sBACC,GAAA,CAAA,UAAA,EAAA;AAAA,QAAW,IAAM,EAAA,KAAA;AAAA,QAAO,QAAU,EAAA,YAAA;AAAA,OAAc,CAAA;AAAA,sBAChD,GAAA,CAAA,MAAA,EAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACR,YAAW,EAAA,WAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QACT,QAAU,EAAA,YAAA;AAAA,QACV,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,QAErC,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,UAAiB,aAAW,EAAA,IAAA;AAAA,SAAC,CAAA;AAAA,OAChC,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltGoToInput.saltFormField {\n display: flex;\n flex-direction: row;\n gap: var(--salt-spacing-100);\n align-items: baseline;\n text-wrap: nowrap;\n}\n\n.saltGoToInput-input {\n height: var(--salt-size-base);\n --saltInput-minWidth: unset;\n}\n\n.saltGoToInput-inputDefaultSize {\n --saltInput-minWidth: var(--salt-size-base);\n max-width: var(--salt-size-base);\n width: var(--salt-size-base);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=GoToInput.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"GoToInput.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,73 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { clsx } from 'clsx';
3
- import { forwardRef, useState } from 'react';
4
- import { makePrefixer, FormField, FormFieldLabel, Input } from '@salt-ds/core';
5
- import { usePaginationContext } from './usePaginationContext.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './GoToInput.css.js';
9
-
10
- const withBaseName = makePrefixer("saltGoToInput");
11
- const GoToInput = forwardRef(
12
- function GoToInput2({
13
- className,
14
- inputRef,
15
- inputVariant = "primary",
16
- label = "Go to",
17
- ...restProps
18
- }, ref) {
19
- const targetWindow = useWindow();
20
- useComponentCssInjection({
21
- testId: "salt-go-to-input",
22
- css: css_248z,
23
- window: targetWindow
24
- });
25
- const { count, onPageChange } = usePaginationContext();
26
- const [inputValue, setInputValue] = useState("");
27
- const onChange = (event) => {
28
- setInputValue(event.target.value);
29
- };
30
- const onKeyDown = (event) => {
31
- if (event.key === "Enter") {
32
- const pageValue = Number(inputValue);
33
- if (!inputValue.startsWith("0") && !isNaN(pageValue) && pageValue > 0 && pageValue <= count) {
34
- onPageChange(event, pageValue);
35
- }
36
- setInputValue("");
37
- }
38
- };
39
- const onBlur = () => {
40
- setInputValue("");
41
- };
42
- const widthCh = `${`${count}`.length}ch`;
43
- return /* @__PURE__ */ jsxs(FormField, {
44
- labelPlacement: "left",
45
- className: clsx(withBaseName(), className),
46
- ref,
47
- ...restProps,
48
- children: [
49
- /* @__PURE__ */ jsx(FormFieldLabel, {
50
- children: label
51
- }),
52
- /* @__PURE__ */ jsx(Input, {
53
- className: clsx(withBaseName("input"), {
54
- [withBaseName("inputDefaultSize")]: count < 100
55
- }),
56
- ref: inputRef,
57
- inputProps: {
58
- style: { width: widthCh }
59
- },
60
- onBlur,
61
- onChange,
62
- onKeyDown,
63
- value: inputValue,
64
- textAlign: "center",
65
- variant: inputVariant
66
- })
67
- ]
68
- });
69
- }
70
- );
71
-
72
- export { GoToInput };
73
- //# sourceMappingURL=GoToInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"GoToInput.js","sources":["../src/pagination/GoToInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n forwardRef,\n HTMLAttributes,\n KeyboardEventHandler,\n Ref,\n useState,\n} from \"react\";\nimport { FormField, FormFieldLabel, Input, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport goToInputCss from \"./GoToInput.css\";\n\nconst withBaseName = makePrefixer(\"saltGoToInput\");\nexport interface GoToInputProps extends HTMLAttributes<HTMLSpanElement> {\n /**\n * Input label.\n */\n label?: string;\n /**\n * Optional ref for the input component\n */\n inputRef?: Ref<HTMLInputElement>;\n /**\n * Change input variant.\n */\n inputVariant?: \"primary\" | \"secondary\";\n}\n\nexport const GoToInput = forwardRef<HTMLDivElement, GoToInputProps>(\n function GoToInput(\n {\n className,\n inputRef,\n inputVariant = \"primary\",\n label = \"Go to\",\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-go-to-input\",\n css: goToInputCss,\n window: targetWindow,\n });\n\n const { count, onPageChange } = usePaginationContext();\n const [inputValue, setInputValue] = useState(\"\");\n\n const onChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n setInputValue(event.target.value);\n };\n\n const onKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {\n if (event.key === \"Enter\") {\n const pageValue = Number(inputValue);\n if (\n !inputValue.startsWith(\"0\") &&\n !isNaN(pageValue) &&\n pageValue > 0 &&\n pageValue <= count\n ) {\n onPageChange(event, pageValue);\n }\n setInputValue(\"\");\n }\n };\n\n const onBlur = () => {\n setInputValue(\"\");\n };\n\n const widthCh = `${`${count}`.length}ch`;\n\n return (\n <FormField\n labelPlacement=\"left\"\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n <FormFieldLabel>{label}</FormFieldLabel>\n <Input\n className={clsx(withBaseName(\"input\"), {\n [withBaseName(\"inputDefaultSize\")]: count < 100,\n })}\n ref={inputRef}\n inputProps={{\n style: { width: widthCh },\n }}\n onBlur={onBlur}\n onChange={onChange}\n onKeyDown={onKeyDown}\n value={inputValue}\n textAlign={\"center\"}\n variant={inputVariant}\n />\n </FormField>\n );\n }\n);\n"],"names":["GoToInput","goToInputCss"],"mappings":";;;;;;;;;AAiBA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAgB1C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,QAAA;AAAA,IACA,YAAe,GAAA,SAAA;AAAA,IACf,KAAQ,GAAA,OAAA;AAAA,IACL,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA,CAAA;AACrD,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,EAAE,CAAA,CAAA;AAE/C,IAAM,MAAA,QAAA,GAAiD,CAAC,KAAU,KAAA;AAChE,MAAc,aAAA,CAAA,KAAA,CAAM,OAAO,KAAK,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAM,MAAA,SAAA,GAAoD,CAAC,KAAU,KAAA;AACnE,MAAI,IAAA,KAAA,CAAM,QAAQ,OAAS,EAAA;AACzB,QAAM,MAAA,SAAA,GAAY,OAAO,UAAU,CAAA,CAAA;AACnC,QAAA,IACE,CAAC,UAAA,CAAW,UAAW,CAAA,GAAG,CAC1B,IAAA,CAAC,KAAM,CAAA,SAAS,CAChB,IAAA,SAAA,GAAY,CACZ,IAAA,SAAA,IAAa,KACb,EAAA;AACA,UAAA,YAAA,CAAa,OAAO,SAAS,CAAA,CAAA;AAAA,SAC/B;AACA,QAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OAClB;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,SAAS,MAAM;AACnB,MAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,KAClB,CAAA;AAEA,IAAM,MAAA,OAAA,GAAU,CAAG,EAAA,CAAA,EAAG,KAAQ,CAAA,CAAA,CAAA,MAAA,CAAA,EAAA,CAAA,CAAA;AAE9B,IAAA,uBACG,IAAA,CAAA,SAAA,EAAA;AAAA,MACC,cAAe,EAAA,MAAA;AAAA,MACf,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,GAAA;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,cAAA,EAAA;AAAA,UAAgB,QAAA,EAAA,KAAA;AAAA,SAAM,CAAA;AAAA,wBACtB,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,SAAW,EAAA,IAAA,CAAK,YAAa,CAAA,OAAO,CAAG,EAAA;AAAA,YACrC,CAAC,YAAA,CAAa,kBAAkB,CAAA,GAAI,KAAQ,GAAA,GAAA;AAAA,WAC7C,CAAA;AAAA,UACD,GAAK,EAAA,QAAA;AAAA,UACL,UAAY,EAAA;AAAA,YACV,KAAA,EAAO,EAAE,KAAA,EAAO,OAAQ,EAAA;AAAA,WAC1B;AAAA,UACA,MAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,SAAW,EAAA,QAAA;AAAA,UACX,OAAS,EAAA,YAAA;AAAA,SACX,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltPageButton {\n --saltButton-minWidth: var(--salt-size-base);\n --saltButton-fontWeight: var(--salt-text-fontWeight);\n --saltButton-height: var(--salt-size-base);\n --saltButton-text-color: var(--salt-content-primary-foreground);\n --saltButton-background-active: var(--salt-selectable-background-selected);\n --saltButton-text-color-active: var(--salt-content-primary-foreground);\n}\n\n.saltPageButton:hover,\n.saltPageButton:focus-visible {\n --saltButton-background-hover: var(--salt-selectable-background-hover);\n}\n\n.saltPageButton:disabled {\n --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);\n --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);\n}\n\n.saltPageButton-selected {\n --saltButton-background: var(--salt-selectable-background-selected);\n}\n.saltPageButton-selected:focus-visible {\n --saltButton-background-hover: var(--salt-selectable-background-selected);\n}\n\n.saltPageButton-fixed {\n --saltButton-padding: 0;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=PageButton.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageButton.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,40 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer, Button } from '@salt-ds/core';
5
- import { usePaginationContext } from './usePaginationContext.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './PageButton.css.js';
9
-
10
- const withBaseName = makePrefixer("saltPageButton");
11
- const PageButton = forwardRef(
12
- function PageButton2({ page, selected, disabled }, ref) {
13
- const targetWindow = useWindow();
14
- useComponentCssInjection({
15
- testId: "salt-page-button",
16
- css: css_248z,
17
- window: targetWindow
18
- });
19
- const { count, onPageChange } = usePaginationContext();
20
- const onClick = (event) => {
21
- onPageChange(event, page);
22
- };
23
- return /* @__PURE__ */ jsx(Button, {
24
- "aria-label": `Page ${page} of ${count}`,
25
- "aria-current": selected ? "page" : void 0,
26
- variant: "secondary",
27
- className: clsx(withBaseName(), {
28
- [withBaseName("selected")]: selected,
29
- [withBaseName("fixed")]: page < 100
30
- }),
31
- onClick,
32
- disabled,
33
- ref,
34
- children: page
35
- });
36
- }
37
- );
38
-
39
- export { PageButton };
40
- //# sourceMappingURL=PageButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageButton.js","sources":["../src/pagination/PageButton.tsx"],"sourcesContent":["import { MouseEventHandler, forwardRef } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Button, makePrefixer } from \"@salt-ds/core\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageButtonCss from \"./PageButton.css\";\n\nconst withBaseName = makePrefixer(\"saltPageButton\");\n\nexport interface PageButtonProps {\n page: number;\n selected?: boolean;\n disabled?: boolean;\n}\nexport const PageButton = forwardRef<HTMLButtonElement, PageButtonProps>(\n function PageButton({ page, selected, disabled }: PageButtonProps, ref) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-button\",\n css: pageButtonCss,\n window: targetWindow,\n });\n\n const { count, onPageChange } = usePaginationContext();\n\n const onClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n onPageChange(event, page);\n };\n\n return (\n <Button\n aria-label={`Page ${page} of ${count}`}\n aria-current={selected ? \"page\" : undefined}\n variant=\"secondary\"\n className={clsx(withBaseName(), {\n [withBaseName(\"selected\")]: selected,\n [withBaseName(\"fixed\")]: page < 100,\n })}\n onClick={onClick}\n disabled={disabled}\n ref={ref}\n >\n {page}\n </Button>\n );\n }\n);\n"],"names":["PageButton","pageButtonCss"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAO3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,EAAE,MAAM,QAAU,EAAA,QAAA,IAA6B,GAAK,EAAA;AACtE,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,KAAA,EAAO,YAAa,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAErD,IAAM,MAAA,OAAA,GAAgD,CAAC,KAAU,KAAA;AAC/D,MAAA,YAAA,CAAa,OAAO,IAAI,CAAA,CAAA;AAAA,KAC1B,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,MAAA,EAAA;AAAA,MACC,YAAA,EAAY,QAAQ,IAAW,CAAA,IAAA,EAAA,KAAA,CAAA,CAAA;AAAA,MAC/B,cAAA,EAAc,WAAW,MAAS,GAAA,KAAA,CAAA;AAAA,MAClC,OAAQ,EAAA,WAAA;AAAA,MACR,SAAA,EAAW,IAAK,CAAA,YAAA,EAAgB,EAAA;AAAA,QAC9B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,QAC5B,CAAC,YAAA,CAAa,OAAO,CAAA,GAAI,IAAO,GAAA,GAAA;AAAA,OACjC,CAAA;AAAA,MACD,OAAA;AAAA,MACA,QAAA;AAAA,MACA,GAAA;AAAA,MAEC,QAAA,EAAA,IAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltPageRanges-ellipsis {\n display: inline-flex;\n width: var(--salt-size-base);\n height: var(--salt-size-base);\n line-height: var(--salt-size-base);\n justify-content: center;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=PageRanges.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageRanges.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,69 +0,0 @@
1
- import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
2
- import { useCallback } from 'react';
3
- import { makePrefixer } from '@salt-ds/core';
4
- import { PageButton } from './PageButton.js';
5
- import { usePagination } from './usePagination.js';
6
- import { usePaginationContext } from './usePaginationContext.js';
7
- import { useWindow } from '@salt-ds/window';
8
- import { useComponentCssInjection } from '@salt-ds/styles';
9
- import css_248z from './PageRanges.css.js';
10
-
11
- const withBaseName = makePrefixer("saltPageRanges");
12
- const Ellipsis = () => {
13
- return /* @__PURE__ */ jsx("div", {
14
- className: withBaseName("ellipsis"),
15
- children: `\u2026`
16
- });
17
- };
18
- const mapRange = (range, fn) => {
19
- const result = [];
20
- for (let i = range[0]; i <= range[1]; ++i) {
21
- result.push(fn(i));
22
- }
23
- return result;
24
- };
25
- function PageRanges({
26
- siblingCount = 2,
27
- boundaryCount = 1
28
- }) {
29
- const targetWindow = useWindow();
30
- useComponentCssInjection({
31
- testId: "salt-page-ranges",
32
- css: css_248z,
33
- window: targetWindow
34
- });
35
- const { count, page } = usePaginationContext();
36
- const renderPages = useCallback(
37
- (range) => mapRange(range, (i) => /* @__PURE__ */ jsx(PageButton, {
38
- page: i,
39
- selected: page === i
40
- }, i)),
41
- [page]
42
- );
43
- const [leftPages, middlePages, rightPages] = usePagination(
44
- page,
45
- count,
46
- Math.max(1, boundaryCount),
47
- siblingCount
48
- );
49
- return /* @__PURE__ */ jsxs(Fragment, {
50
- children: [
51
- leftPages && /* @__PURE__ */ jsxs(Fragment, {
52
- children: [
53
- renderPages(leftPages),
54
- /* @__PURE__ */ jsx(Ellipsis, {})
55
- ]
56
- }),
57
- middlePages && renderPages(middlePages),
58
- rightPages && /* @__PURE__ */ jsxs(Fragment, {
59
- children: [
60
- /* @__PURE__ */ jsx(Ellipsis, {}),
61
- renderPages(rightPages)
62
- ]
63
- })
64
- ]
65
- });
66
- }
67
-
68
- export { PageRanges };
69
- //# sourceMappingURL=PageRanges.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PageRanges.js","sources":["../src/pagination/PageRanges.tsx"],"sourcesContent":["import { ReactElement, useCallback } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { PageButton } from \"./PageButton\";\nimport { PageRange, usePagination } from \"./usePagination\";\nimport { usePaginationContext } from \"./usePaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport pageRangesCss from \"./PageRanges.css\";\n\nconst withBaseName = makePrefixer(\"saltPageRanges\");\n\nexport interface PageRangesProps {\n boundaryCount?: number;\n siblingCount?: number;\n}\n\nconst Ellipsis = () => {\n return <div className={withBaseName(\"ellipsis\")}>{`\\u2026`}</div>;\n};\n\nconst mapRange = (range: PageRange, fn: (i: number) => ReactElement) => {\n const result: ReactElement[] = [];\n for (let i = range[0]; i <= range[1]; ++i) {\n result.push(fn(i));\n }\n return result;\n};\n\nexport function PageRanges({\n siblingCount = 2,\n boundaryCount = 1,\n}: PageRangesProps) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-page-ranges\",\n css: pageRangesCss,\n window: targetWindow,\n });\n\n const { count, page } = usePaginationContext();\n\n const renderPages = useCallback(\n (range: PageRange) =>\n mapRange(range, (i) => (\n <PageButton key={i} page={i} selected={page === i} />\n )),\n [page]\n );\n\n const [leftPages, middlePages, rightPages] = usePagination(\n page,\n count,\n Math.max(1, boundaryCount),\n siblingCount\n );\n\n return (\n <>\n {leftPages && (\n <>\n {renderPages(leftPages)}\n <Ellipsis />\n </>\n )}\n {middlePages && renderPages(middlePages)}\n {rightPages && (\n <>\n <Ellipsis />\n {renderPages(rightPages)}\n </>\n )}\n </>\n );\n}\n"],"names":["pageRangesCss"],"mappings":";;;;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAOlD,MAAM,WAAW,MAAM;AACrB,EAAA,uBAAQ,GAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,IAAI,QAAA,EAAA,CAAA,MAAA,CAAA;AAAA,GAAS,CAAA,CAAA;AAC7D,CAAA,CAAA;AAEA,MAAM,QAAA,GAAW,CAAC,KAAA,EAAkB,EAAoC,KAAA;AACtE,EAAA,MAAM,SAAyB,EAAC,CAAA;AAChC,EAAA,KAAA,IAAS,IAAI,KAAM,CAAA,CAAA,CAAA,EAAI,KAAK,KAAM,CAAA,CAAA,CAAA,EAAI,EAAE,CAAG,EAAA;AACzC,IAAO,MAAA,CAAA,IAAA,CAAK,EAAG,CAAA,CAAC,CAAC,CAAA,CAAA;AAAA,GACnB;AACA,EAAO,OAAA,MAAA,CAAA;AACT,CAAA,CAAA;AAEO,SAAS,UAAW,CAAA;AAAA,EACzB,YAAe,GAAA,CAAA;AAAA,EACf,aAAgB,GAAA,CAAA;AAClB,CAAoB,EAAA;AAClB,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,kBAAA;AAAA,IACR,GAAK,EAAAA,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,KAAA,EAAO,IAAK,EAAA,GAAI,oBAAqB,EAAA,CAAA;AAE7C,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,KACC,KAAA,QAAA,CAAS,KAAO,EAAA,CAAC,sBACd,GAAA,CAAA,UAAA,EAAA;AAAA,MAAmB,IAAM,EAAA,CAAA;AAAA,MAAG,UAAU,IAAS,KAAA,CAAA;AAAA,KAAA,EAA/B,CAAkC,CACpD,CAAA;AAAA,IACH,CAAC,IAAI,CAAA;AAAA,GACP,CAAA;AAEA,EAAA,MAAM,CAAC,SAAA,EAAW,WAAa,EAAA,UAAU,CAAI,GAAA,aAAA;AAAA,IAC3C,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,CAAK,GAAI,CAAA,CAAA,EAAG,aAAa,CAAA;AAAA,IACzB,YAAA;AAAA,GACF,CAAA;AAEA,EACE,uBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,IACG,QAAA,EAAA;AAAA,MACC,SAAA,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACG,QAAA,EAAA;AAAA,UAAA,WAAA,CAAY,SAAS,CAAA;AAAA,8BACrB,QAAS,EAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OACZ,CAAA;AAAA,MAED,WAAA,IAAe,YAAY,WAAW,CAAA;AAAA,MACtC,UACC,oBAAA,IAAA,CAAA,QAAA,EAAA;AAAA,QACE,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,QAAS,EAAA,EAAA,CAAA;AAAA,UACT,YAAY,UAAU,CAAA;AAAA,SAAA;AAAA,OACzB,CAAA;AAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltPagination {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=Pagination.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Pagination.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
@@ -1,74 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { forwardRef, useCallback, useMemo, useRef, useEffect } from 'react';
3
- import { clsx } from 'clsx';
4
- import { makePrefixer, useControlled, useAriaAnnouncer } from '@salt-ds/core';
5
- import { paginationContext } from './PaginationContext.js';
6
- import { useWindow } from '@salt-ds/window';
7
- import { useComponentCssInjection } from '@salt-ds/styles';
8
- import css_248z from './Pagination.css.js';
9
-
10
- const withBaseName = makePrefixer("saltPagination");
11
- const { Provider } = paginationContext;
12
- const Pagination = forwardRef(
13
- function Pagination2({
14
- className,
15
- count,
16
- children,
17
- defaultPage = 1,
18
- page: pageProp,
19
- onPageChange: onPageChangeProp,
20
- ...restProps
21
- }, ref) {
22
- const targetWindow = useWindow();
23
- useComponentCssInjection({
24
- testId: "salt-pagination",
25
- css: css_248z,
26
- window: targetWindow
27
- });
28
- const [pageState, setPageState] = useControlled({
29
- controlled: pageProp,
30
- default: defaultPage,
31
- name: "Pagination",
32
- state: "page"
33
- });
34
- const onPageChange = useCallback(
35
- (event, page) => {
36
- setPageState(page);
37
- onPageChangeProp && onPageChangeProp(event, page);
38
- },
39
- [onPageChangeProp, setPageState]
40
- );
41
- const contextValue = useMemo(
42
- () => ({
43
- page: pageState,
44
- count,
45
- onPageChange
46
- }),
47
- [pageState, count, onPageChange]
48
- );
49
- const { announce } = useAriaAnnouncer();
50
- const mounted = useRef(false);
51
- useEffect(() => {
52
- if (mounted.current) {
53
- announce(`Page ${pageState}`);
54
- } else {
55
- mounted.current = true;
56
- }
57
- }, [announce, pageState]);
58
- if (count < 2) {
59
- return null;
60
- }
61
- return /* @__PURE__ */ jsx(Provider, {
62
- value: contextValue,
63
- children: /* @__PURE__ */ jsx("nav", {
64
- className: clsx(withBaseName(), className),
65
- ref,
66
- ...restProps,
67
- children
68
- })
69
- });
70
- }
71
- );
72
-
73
- export { Pagination };
74
- //# sourceMappingURL=Pagination.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Pagination.js","sources":["../src/pagination/Pagination.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLAttributes,\n SyntheticEvent,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer, useAriaAnnouncer, useControlled } from \"@salt-ds/core\";\nimport { PaginationContext, paginationContext } from \"./PaginationContext\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport paginationCss from \"./Pagination.css\";\n\nconst withBaseName = makePrefixer(\"saltPagination\");\n\nconst { Provider } = paginationContext;\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n /**\n * Number of pages.\n */\n count: number;\n /**\n * Current/active page.\n */\n page?: number;\n /**\n * Default current/active page.\n */\n defaultPage?: number;\n /**\n * Callback function triggered when current page changed.\n */\n onPageChange?: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(\n function Pagination(\n {\n className,\n count,\n children,\n defaultPage = 1,\n page: pageProp,\n onPageChange: onPageChangeProp,\n ...restProps\n },\n ref\n ) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-pagination\",\n css: paginationCss,\n window: targetWindow,\n });\n\n const [pageState, setPageState] = useControlled({\n controlled: pageProp,\n default: defaultPage,\n name: \"Pagination\",\n state: \"page\",\n });\n\n const onPageChange = useCallback(\n (event: SyntheticEvent, page: number) => {\n setPageState(page);\n onPageChangeProp && onPageChangeProp(event, page);\n },\n [onPageChangeProp, setPageState]\n );\n\n const contextValue: PaginationContext = useMemo(\n () => ({\n page: pageState,\n count,\n onPageChange,\n }),\n [pageState, count, onPageChange]\n );\n\n const { announce } = useAriaAnnouncer();\n const mounted = useRef<boolean>(false);\n\n useEffect(() => {\n if (mounted.current) {\n announce(`Page ${pageState}`);\n } else {\n mounted.current = true;\n }\n }, [announce, pageState]);\n\n if (count < 2) {\n return null;\n }\n\n return (\n <Provider value={contextValue}>\n <nav\n className={clsx(withBaseName(), className)}\n ref={ref}\n {...restProps}\n >\n {children}\n </nav>\n </Provider>\n );\n }\n);\n"],"names":["Pagination","paginationCss"],"mappings":";;;;;;;;;AAkBA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA,CAAA;AAElD,MAAM,EAAE,UAAa,GAAA,iBAAA,CAAA;AAqBd,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WACP,CAAA;AAAA,IACE,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,CAAA;AAAA,IACd,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACX,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,iBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,aAAc,CAAA;AAAA,MAC9C,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,WAAA;AAAA,MACT,IAAM,EAAA,YAAA;AAAA,MACN,KAAO,EAAA,MAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAA,MAAM,YAAe,GAAA,WAAA;AAAA,MACnB,CAAC,OAAuB,IAAiB,KAAA;AACvC,QAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,QAAoB,gBAAA,IAAA,gBAAA,CAAiB,OAAO,IAAI,CAAA,CAAA;AAAA,OAClD;AAAA,MACA,CAAC,kBAAkB,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAA,MAAM,YAAkC,GAAA,OAAA;AAAA,MACtC,OAAO;AAAA,QACL,IAAM,EAAA,SAAA;AAAA,QACN,KAAA;AAAA,QACA,YAAA;AAAA,OACF,CAAA;AAAA,MACA,CAAC,SAAW,EAAA,KAAA,EAAO,YAAY,CAAA;AAAA,KACjC,CAAA;AAEA,IAAM,MAAA,EAAE,QAAS,EAAA,GAAI,gBAAiB,EAAA,CAAA;AACtC,IAAM,MAAA,OAAA,GAAU,OAAgB,KAAK,CAAA,CAAA;AAErC,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,QAAQ,OAAS,EAAA;AACnB,QAAA,QAAA,CAAS,QAAQ,SAAW,CAAA,CAAA,CAAA,CAAA;AAAA,OACvB,MAAA;AACL,QAAA,OAAA,CAAQ,OAAU,GAAA,IAAA,CAAA;AAAA,OACpB;AAAA,KACC,EAAA,CAAC,QAAU,EAAA,SAAS,CAAC,CAAA,CAAA;AAExB,IAAA,IAAI,QAAQ,CAAG,EAAA;AACb,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAEA,IAAA,uBACG,GAAA,CAAA,QAAA,EAAA;AAAA,MAAS,KAAO,EAAA,YAAA;AAAA,MACf,QAAC,kBAAA,GAAA,CAAA,KAAA,EAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,GAAA;AAAA,QACC,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
@@ -1,13 +0,0 @@
1
- import { createContext } from 'react';
2
-
3
- const paginationContext = createContext({
4
- page: 0,
5
- count: 0,
6
- onPageChange: () => void 0
7
- });
8
- if (process.env.NODE_ENV !== "production") {
9
- paginationContext.displayName = "PaginationContext";
10
- }
11
-
12
- export { paginationContext };
13
- //# sourceMappingURL=PaginationContext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"PaginationContext.js","sources":["../src/pagination/PaginationContext.ts"],"sourcesContent":["import { SyntheticEvent, createContext } from \"react\";\n\nexport interface PaginationContext {\n page: number;\n count: number;\n onPageChange: (event: SyntheticEvent, page: number) => void;\n}\n\nexport const paginationContext = createContext<PaginationContext>({\n page: 0,\n count: 0,\n onPageChange: () => undefined,\n});\n\nif (process.env.NODE_ENV !== \"production\") {\n paginationContext.displayName = \"PaginationContext\";\n}\n"],"names":[],"mappings":";;AAQO,MAAM,oBAAoB,aAAiC,CAAA;AAAA,EAChE,IAAM,EAAA,CAAA;AAAA,EACN,KAAO,EAAA,CAAA;AAAA,EACP,cAAc,MAAM,KAAA,CAAA;AACtB,CAAC,EAAA;AAED,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,iBAAA,CAAkB,WAAc,GAAA,mBAAA,CAAA;AAClC;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = ".saltPaginator {\n display: flex;\n flex-wrap: nowrap;\n}\n\n.saltPaginator-arrowButton-previous {\n --saltButton-margin: 0 var(--salt-spacing-100) 0 0;\n}\n\n.saltPaginator-arrowButton-next {\n --saltButton-margin: 0 0 0 var(--salt-spacing-100);\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=Paginator.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Paginator.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}