@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,184 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { offset, size, flip, shift, limitShift, useInteractions, useDismiss, useRole } from '@floating-ui/react';
3
- import { useControlled, useFloatingUI } from '@salt-ds/core';
4
- import '../list-next/ListNext.js';
5
- import { ListItemNext } from '../list-next/ListItemNext.js';
6
- import { useList } from '../list-next/useList.js';
7
-
8
- const useDropdownNext = ({
9
- listProps,
10
- openControlProp,
11
- onOpenChange: onOpenChangeProp,
12
- placement: placementProp
13
- }) => {
14
- const [open, setOpen] = useControlled({
15
- controlled: openControlProp,
16
- default: false,
17
- name: "DropdownNext",
18
- state: "open"
19
- });
20
- const {
21
- focusHandler: listFocusHandler,
22
- keyDownHandler: listKeyDownHandler,
23
- mouseOverHandler: listMouseOverHandler,
24
- activeDescendant,
25
- selectedItem,
26
- setSelectedItem,
27
- highlightedItem,
28
- setHighlightedItem,
29
- contextValue: listContextValue
30
- } = useList({
31
- ...listProps
32
- });
33
- const { select, highlight } = listContextValue;
34
- const getListItems = (source) => {
35
- if (!source)
36
- return;
37
- return source.map((item, index) => {
38
- return /* @__PURE__ */ jsx(ListItemNext, {
39
- value: item,
40
- onMouseDown: (event) => {
41
- select(event);
42
- },
43
- onMouseMove: (event) => {
44
- highlight(event);
45
- },
46
- children: item
47
- }, index);
48
- });
49
- };
50
- const onOpenChange = (open2) => {
51
- setOpen(open2);
52
- onOpenChangeProp == null ? void 0 : onOpenChangeProp(open2);
53
- };
54
- const {
55
- floating,
56
- reference,
57
- x,
58
- y,
59
- strategy,
60
- placement,
61
- context,
62
- elements,
63
- refs
64
- } = useFloatingUI({
65
- open,
66
- onOpenChange,
67
- placement: placementProp,
68
- middleware: [
69
- offset(0),
70
- size({
71
- apply({ rects, elements: elements2 }) {
72
- Object.assign(elements2.floating.style, {
73
- width: `${rects.reference.width}px`
74
- });
75
- }
76
- }),
77
- flip(),
78
- shift({ limiter: limitShift() })
79
- ]
80
- });
81
- const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
82
- [useDismiss(context), useRole(context, { role: "listbox" })]
83
- );
84
- const getDropdownNextProps = () => {
85
- return getFloatingProps({
86
- "data-placement": placement,
87
- ref: floating
88
- });
89
- };
90
- const getPosition = () => {
91
- var _a, _b;
92
- return {
93
- top: y != null ? y : 0,
94
- left: x != null ? x : 0,
95
- position: strategy,
96
- width: (_a = elements.floating) == null ? void 0 : _a.clientWidth,
97
- height: (_b = elements.floating) == null ? void 0 : _b.clientHeight
98
- };
99
- };
100
- const focusHandler = (event) => {
101
- if (selectedItem) {
102
- listFocusHandler(event);
103
- }
104
- };
105
- const mouseDownHandler = () => {
106
- setOpen(!open);
107
- };
108
- const mouseOverHandler = () => {
109
- listMouseOverHandler();
110
- };
111
- const listSelectHandler = () => {
112
- setOpen(false);
113
- };
114
- const keyDownHandler = (event) => {
115
- const { key } = event;
116
- switch (key) {
117
- case "ArrowUp":
118
- listKeyDownHandler(event);
119
- break;
120
- case "ArrowDown":
121
- setOpen(true);
122
- listKeyDownHandler(event);
123
- break;
124
- case " ":
125
- case "Enter":
126
- if (!open) {
127
- setOpen(true);
128
- break;
129
- }
130
- if (open) {
131
- listKeyDownHandler(event);
132
- setOpen(false);
133
- break;
134
- }
135
- break;
136
- case "Escape":
137
- setOpen(false);
138
- break;
139
- case "Tab":
140
- setOpen(false);
141
- break;
142
- case "PageUp":
143
- case "PageDown":
144
- case "Home":
145
- case "End":
146
- if (open) {
147
- listKeyDownHandler(event);
148
- break;
149
- }
150
- break;
151
- }
152
- };
153
- return {
154
- handlers: {
155
- keyDownHandler,
156
- focusHandler,
157
- mouseOverHandler,
158
- mouseDownHandler,
159
- listSelectHandler
160
- },
161
- refs,
162
- open,
163
- getReferenceProps,
164
- getItemProps,
165
- activeDescendant,
166
- selectedItem,
167
- setSelectedItem,
168
- highlightedItem,
169
- setHighlightedItem,
170
- getListItems,
171
- portalProps: {
172
- open,
173
- setOpen,
174
- floating,
175
- reference,
176
- getFloatingProps,
177
- getDropdownNextProps,
178
- getPosition
179
- }
180
- };
181
- };
182
-
183
- export { useDropdownNext };
184
- //# sourceMappingURL=useDropdownNext.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useDropdownNext.js","sources":["../src/dropdown-next/useDropdownNext.tsx"],"sourcesContent":["import {\n useInteractions,\n useDismiss,\n useRole,\n flip,\n shift,\n limitShift,\n offset,\n size,\n} from \"@floating-ui/react\";\nimport {\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport { ListItemNext } from \"../list-next\";\nimport { HTMLProps, KeyboardEvent, FocusEvent } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\n\ninterface UseDropdownNextProps\n extends Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" | \"open\" | \"placement\">\n > {\n listProps: UseListProps;\n // props for controlled dropdown\n openControlProp?: boolean;\n}\n\nexport const useDropdownNext = ({\n listProps,\n openControlProp,\n onOpenChange: onOpenChangeProp,\n placement: placementProp,\n}: UseDropdownNextProps) => {\n const [open, setOpen] = useControlled({\n controlled: openControlProp,\n default: false,\n name: \"DropdownNext\",\n state: \"open\",\n });\n\n // USELIST HOOK\n const {\n focusHandler: listFocusHandler,\n keyDownHandler: listKeyDownHandler,\n mouseOverHandler: listMouseOverHandler,\n activeDescendant,\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n contextValue: listContextValue,\n } = useList({\n ...listProps,\n });\n\n const { select, highlight } = listContextValue;\n\n // LIST SOURCE\n const getListItems = (source: string[]) => {\n if (!source) return;\n\n return source.map((item, index) => {\n return (\n <ListItemNext\n key={index}\n value={item}\n onMouseDown={(event) => {\n select(event);\n }}\n onMouseMove={(event) => {\n highlight(event);\n }}\n >\n {item}\n </ListItemNext>\n );\n });\n };\n\n // FLOATING PORTAL\n const onOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChangeProp?.(open);\n };\n\n const {\n floating,\n reference,\n x,\n y,\n strategy,\n placement,\n context,\n elements,\n refs,\n } = useFloatingUI({\n open,\n onOpenChange,\n placement: placementProp,\n middleware: [\n offset(0),\n size({\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n });\n },\n }),\n flip(),\n shift({ limiter: limitShift() }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(\n [useDismiss(context), useRole(context, { role: \"listbox\" })]\n );\n\n const getDropdownNextProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ref: floating,\n });\n };\n\n const getPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.clientWidth,\n height: elements.floating?.clientHeight,\n });\n\n // handles focus on mouse and keyboard\n const focusHandler = (event: FocusEvent<HTMLElement>) => {\n if (selectedItem) {\n listFocusHandler(event as FocusEvent<HTMLUListElement>);\n }\n };\n\n // handles mouse click on dropdown button\n const mouseDownHandler = () => {\n setOpen(!open);\n };\n\n // handles mouse hover on dropdown button\n const mouseOverHandler = () => {\n listMouseOverHandler();\n };\n\n const listSelectHandler = () => {\n setOpen(false);\n };\n\n const keyDownHandler = (event: KeyboardEvent<HTMLElement>) => {\n const { key } = event;\n switch (key) {\n case \"ArrowUp\":\n listKeyDownHandler(event);\n break;\n case \"ArrowDown\":\n setOpen(true);\n listKeyDownHandler(event);\n break;\n case \" \":\n case \"Enter\":\n if (!open) {\n setOpen(true);\n break;\n }\n if (open) {\n listKeyDownHandler(event);\n setOpen(false);\n break;\n }\n break;\n case \"Escape\":\n setOpen(false);\n break;\n case \"Tab\":\n setOpen(false);\n break;\n case \"PageUp\":\n case \"PageDown\":\n case \"Home\":\n case \"End\":\n if (open) {\n listKeyDownHandler(event);\n break;\n }\n break;\n default:\n break;\n }\n };\n\n return {\n handlers: {\n keyDownHandler,\n focusHandler,\n mouseOverHandler,\n mouseDownHandler,\n listSelectHandler,\n },\n refs,\n open,\n getReferenceProps,\n getItemProps,\n activeDescendant,\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n getListItems,\n portalProps: {\n open,\n setOpen,\n floating,\n reference,\n getFloatingProps,\n getDropdownNextProps,\n getPosition,\n },\n };\n};\n"],"names":["open","elements"],"mappings":"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"}
@@ -1,154 +0,0 @@
1
- import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { useRef, useState, useCallback } from 'react';
3
- import { ownerDocument, useIsomorphicLayoutEffect } from '@salt-ds/core';
4
- import { findAllTabbableElements } from './internal/findAllTabbableElements.js';
5
- import { useReturnFocus } from './internal/useReturnFocus.js';
6
-
7
- const defaultSelector = `
8
- [tabindex="0"],
9
- a:not([tabindex="-1"]),
10
- area:not([tabindex="-1"]),
11
- details:not([tabindex="-1"]),
12
- iframe:not([tabindex="-1"]),
13
- select:not([tabindex="-1"]),
14
- textarea:not([tabindex="-1"]),
15
- button:not([tabindex="-1"]),
16
- input:not([tabindex="-1"])
17
- `;
18
- function tryFocus(node) {
19
- if (!node)
20
- return;
21
- const initialTabIndex = node.getAttribute("tabindex");
22
- node.setAttribute("tabindex", "-1");
23
- const removeTabIndex = () => {
24
- if (initialTabIndex === null) {
25
- node.removeAttribute("tabindex");
26
- } else {
27
- node.setAttribute("tabindex", initialTabIndex);
28
- }
29
- node.removeEventListener("blur", removeTabIndex);
30
- };
31
- node.addEventListener("blur", removeTabIndex);
32
- node.focus();
33
- }
34
- function FocusManager(props) {
35
- const {
36
- active,
37
- autoFocusRef,
38
- children,
39
- className,
40
- disableAutoFocus,
41
- disableFocusTrap,
42
- disableReturnFocus,
43
- fallbackFocusRef,
44
- tabEnabledSelectors = defaultSelector,
45
- returnFocusOptions
46
- } = props;
47
- const containerRef = useRef(null);
48
- const trapStartRef = useRef(null);
49
- const trapEndRef = useRef(null);
50
- const staticElementRef = useRef(null);
51
- const [hasFocus, setHasFocus] = useState(false);
52
- useReturnFocus({
53
- focusOptions: returnFocusOptions,
54
- disabled: disableReturnFocus || disableAutoFocus,
55
- active,
56
- document: ownerDocument(containerRef.current)
57
- });
58
- const resolveElementAtIndex = useCallback(
59
- (tabbableElements, index) => {
60
- if (tabbableElements.length >= 1) {
61
- const element = tabbableElements[index];
62
- if (element == null ? void 0 : element.shadowRoot) {
63
- return element.shadowRoot.querySelector(
64
- tabEnabledSelectors
65
- );
66
- }
67
- return element;
68
- }
69
- },
70
- [tabEnabledSelectors]
71
- );
72
- const getFirstElement = useCallback(() => {
73
- const tabbableElements = findAllTabbableElements(
74
- containerRef.current,
75
- tabEnabledSelectors,
76
- [trapEndRef.current, trapStartRef.current]
77
- );
78
- return resolveElementAtIndex(tabbableElements, 0);
79
- }, [resolveElementAtIndex, tabEnabledSelectors]);
80
- const getLastElement = () => {
81
- const tabbableElements = findAllTabbableElements(
82
- containerRef.current,
83
- tabEnabledSelectors,
84
- [trapEndRef.current, trapStartRef.current]
85
- );
86
- return resolveElementAtIndex(tabbableElements, tabbableElements.length - 1);
87
- };
88
- const handleTrapStartFocus = (event) => {
89
- const isEnteringFocusTrap = !hasFocus && ownerDocument(containerRef.current).activeElement === trapStartRef.current;
90
- const nextElement = isEnteringFocusTrap ? getFirstElement() : getLastElement();
91
- if (nextElement) {
92
- nextElement.focus();
93
- }
94
- event.preventDefault();
95
- };
96
- const handleTrapEndFocus = (event) => {
97
- const nextElement = getFirstElement();
98
- if (nextElement) {
99
- nextElement.focus();
100
- }
101
- event.preventDefault();
102
- };
103
- useIsomorphicLayoutEffect(() => {
104
- if (active && !disableAutoFocus) {
105
- let nodeToFocus;
106
- if (autoFocusRef == null ? void 0 : autoFocusRef.current) {
107
- nodeToFocus = autoFocusRef.current;
108
- } else {
109
- nodeToFocus = getFirstElement() || (fallbackFocusRef == null ? void 0 : fallbackFocusRef.current);
110
- }
111
- if (!nodeToFocus) {
112
- console.error(
113
- "Your focus trap needs to contain at least once focused node."
114
- );
115
- } else if (nodeToFocus !== ownerDocument(nodeToFocus).activeElement) {
116
- tryFocus(nodeToFocus);
117
- }
118
- }
119
- }, [
120
- active,
121
- disableAutoFocus,
122
- getFirstElement,
123
- autoFocusRef,
124
- fallbackFocusRef
125
- ]);
126
- const enforceFocus = active && !disableFocusTrap;
127
- return /* @__PURE__ */ jsxs("div", {
128
- className,
129
- onFocus: () => setHasFocus(true),
130
- ref: containerRef,
131
- children: [
132
- /* @__PURE__ */ jsx("div", {
133
- "aria-hidden": "true",
134
- onFocus: handleTrapStartFocus,
135
- ref: trapStartRef,
136
- tabIndex: enforceFocus ? 0 : -1
137
- }),
138
- /* @__PURE__ */ jsx("div", {
139
- ref: staticElementRef,
140
- tabIndex: -1
141
- }),
142
- children,
143
- /* @__PURE__ */ jsx("div", {
144
- "aria-hidden": "true",
145
- onFocus: handleTrapEndFocus,
146
- ref: trapEndRef,
147
- tabIndex: enforceFocus ? 0 : -1
148
- })
149
- ]
150
- });
151
- }
152
-
153
- export { FocusManager };
154
- //# sourceMappingURL=FocusManager.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"FocusManager.js","sources":["../src/focus-manager/FocusManager.tsx"],"sourcesContent":["import {\n FocusEvent,\n ReactNode,\n RefObject,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { ownerDocument, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { findAllTabbableElements } from \"./internal/findAllTabbableElements\";\nimport { useReturnFocus, UseReturnFocusProps } from \"./internal/useReturnFocus\";\n\nconst defaultSelector = `\n[tabindex=\"0\"],\na:not([tabindex=\"-1\"]),\narea:not([tabindex=\"-1\"]),\ndetails:not([tabindex=\"-1\"]),\niframe:not([tabindex=\"-1\"]),\nselect:not([tabindex=\"-1\"]),\ntextarea:not([tabindex=\"-1\"]),\nbutton:not([tabindex=\"-1\"]),\ninput:not([tabindex=\"-1\"])\n`;\n\nexport interface FocusManagerProps {\n active?: boolean;\n autoFocusRef?: RefObject<HTMLElement>;\n children?: ReactNode;\n className?: string;\n disableAutoFocus?: boolean;\n disableFocusTrap?: boolean;\n disableReturnFocus?: boolean;\n fallbackFocusRef?: RefObject<HTMLElement>;\n tabEnabledSelectors?: string;\n returnFocusOptions?: UseReturnFocusProps[\"focusOptions\"];\n}\n\nfunction tryFocus(node?: HTMLElement) {\n if (!node) return;\n\n const initialTabIndex = node.getAttribute(\"tabindex\");\n node.setAttribute(\"tabindex\", \"-1\");\n\n const removeTabIndex = () => {\n if (initialTabIndex === null) {\n node.removeAttribute(\"tabindex\");\n } else {\n node.setAttribute(\"tabindex\", initialTabIndex);\n }\n\n node.removeEventListener(\"blur\", removeTabIndex);\n };\n\n node.addEventListener(\"blur\", removeTabIndex);\n\n node.focus();\n}\n\nexport function FocusManager(props: FocusManagerProps): JSX.Element {\n const {\n active,\n autoFocusRef,\n children,\n className,\n disableAutoFocus,\n disableFocusTrap,\n disableReturnFocus,\n fallbackFocusRef,\n tabEnabledSelectors = defaultSelector,\n returnFocusOptions,\n } = props;\n\n const containerRef = useRef<HTMLDivElement>(null);\n const trapStartRef = useRef<HTMLDivElement>(null);\n const trapEndRef = useRef<HTMLDivElement>(null);\n const staticElementRef = useRef<HTMLDivElement>(null);\n const [hasFocus, setHasFocus] = useState(false);\n\n useReturnFocus({\n focusOptions: returnFocusOptions,\n disabled: disableReturnFocus || disableAutoFocus,\n active,\n document: ownerDocument(containerRef.current),\n });\n\n /**\n * Given a list of elements and an index, the corresponding element is returned, if exists.\n * Alternatively, for a shadow root, the first tabbable element is returned.\n * @param {Node[]} tabbableElements A list of elements from which to select.\n * @param {number} index The list index.\n */\n const resolveElementAtIndex = useCallback(\n (tabbableElements: HTMLElement[], index: number) => {\n if (tabbableElements.length >= 1) {\n const element = tabbableElements[index];\n\n if (element?.shadowRoot) {\n return element.shadowRoot.querySelector<HTMLElement>(\n tabEnabledSelectors\n );\n }\n\n return element;\n }\n },\n [tabEnabledSelectors]\n );\n\n /**\n * Return the first tabbable element within the content area.\n */\n const getFirstElement = useCallback(() => {\n const tabbableElements = findAllTabbableElements(\n containerRef.current,\n tabEnabledSelectors,\n [trapEndRef.current, trapStartRef.current]\n );\n return resolveElementAtIndex(tabbableElements, 0);\n }, [resolveElementAtIndex, tabEnabledSelectors]);\n\n /**\n * Return the last tabbable element within the content area.\n */\n const getLastElement = () => {\n const tabbableElements = findAllTabbableElements(\n containerRef.current,\n tabEnabledSelectors,\n [trapEndRef.current, trapStartRef.current]\n );\n return resolveElementAtIndex(tabbableElements, tabbableElements.length - 1);\n };\n\n /**\n * When the trap-start sentinel node gains focus, pass focus to either\n * the first or last tabbable element, depending on the direction of travel\n * (i.e. Tab or Shift+Tab)\n * @param {React.FocusEvent} event The synthetic focus event.\n */\n const handleTrapStartFocus = (event: FocusEvent<HTMLDivElement>) => {\n const isEnteringFocusTrap =\n !hasFocus &&\n ownerDocument(containerRef.current).activeElement ===\n trapStartRef.current;\n\n const nextElement = isEnteringFocusTrap\n ? getFirstElement()\n : getLastElement();\n\n if (nextElement) {\n nextElement.focus();\n }\n\n event.preventDefault();\n };\n\n /**\n * When the trap-end sentinel node gains focus, pass focus to either\n * the first tabbable element.\n * @param {React.FocusEvent} event The synthetic focus event.\n */\n const handleTrapEndFocus = (event: FocusEvent<HTMLDivElement>) => {\n const nextElement = getFirstElement();\n\n if (nextElement) {\n nextElement.focus();\n }\n\n event.preventDefault();\n };\n\n useIsomorphicLayoutEffect(() => {\n if (active && !disableAutoFocus) {\n let nodeToFocus;\n\n if (autoFocusRef?.current) {\n nodeToFocus = autoFocusRef.current;\n } else {\n nodeToFocus = getFirstElement() || fallbackFocusRef?.current;\n }\n\n if (!nodeToFocus) {\n // This will always be the case when we're applying the shim in a desktop window. Need to consider how to fix.\n console.error(\n \"Your focus trap needs to contain at least once focused node.\"\n );\n } else if (nodeToFocus !== ownerDocument(nodeToFocus).activeElement) {\n tryFocus(nodeToFocus);\n }\n }\n }, [\n active,\n disableAutoFocus,\n getFirstElement,\n autoFocusRef,\n fallbackFocusRef,\n ]);\n\n const enforceFocus = active && !disableFocusTrap;\n\n return (\n <div\n className={className}\n onFocus={() => setHasFocus(true)}\n ref={containerRef}\n >\n <div\n aria-hidden=\"true\"\n onFocus={handleTrapStartFocus}\n ref={trapStartRef}\n tabIndex={enforceFocus ? 0 : -1}\n />\n <div ref={staticElementRef} tabIndex={-1} />\n {children}\n <div\n aria-hidden=\"true\"\n onFocus={handleTrapEndFocus}\n ref={trapEndRef}\n tabIndex={enforceFocus ? 0 : -1}\n />\n </div>\n );\n}\n"],"names":[],"mappings":"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"}
@@ -1,41 +0,0 @@
1
- import { ownerWindow } from '@salt-ds/core';
2
-
3
- const anyKeyboardFocusedElementSelector = '*:not(style):not(script):not(noscript):not(link):not([tabindex="-1"])';
4
- function findAllTabbableElements(rootNode, selector, elementsToIgnore = []) {
5
- if (!rootNode) {
6
- return [];
7
- }
8
- const nodes = Array.from(
9
- rootNode.querySelectorAll(anyKeyboardFocusedElementSelector)
10
- ).slice();
11
- return nodes.reduce((foundNodes, node) => {
12
- var _a;
13
- if (elementsToIgnore.indexOf(node) !== -1) {
14
- return foundNodes;
15
- }
16
- const win = ownerWindow(node);
17
- if ((node.getBoundingClientRect().width === 0 || win.getComputedStyle(node).visibility !== "visible") && node instanceof HTMLSlotElement && typeof node.assignedElements !== "function") {
18
- return foundNodes;
19
- }
20
- if (node instanceof HTMLSlotElement && typeof node.assignedElements === "function") {
21
- return foundNodes.concat(
22
- node.assignedElements().filter((n) => !n.shadowRoot)
23
- );
24
- }
25
- if (!node.shadowRoot && node.matches(selector)) {
26
- const rootNode2 = (_a = node.parentNode) == null ? void 0 : _a.getRootNode();
27
- return foundNodes.concat(
28
- rootNode2 instanceof ShadowRoot ? rootNode2.host : node
29
- );
30
- }
31
- if (node.shadowRoot) {
32
- return foundNodes.concat(
33
- findAllTabbableElements(node.shadowRoot, selector, elementsToIgnore)
34
- );
35
- }
36
- return foundNodes;
37
- }, []);
38
- }
39
-
40
- export { findAllTabbableElements };
41
- //# sourceMappingURL=findAllTabbableElements.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"findAllTabbableElements.js","sources":["../src/focus-manager/internal/findAllTabbableElements.ts"],"sourcesContent":["import { ownerWindow } from \"@salt-ds/core\";\n\n/**\n * Used to reduce the number of initial nodes that are checked to see if tabbable.\n *\n * Not possible to immediately check if a node is tabbable because the node may be a custom element\n * and therefore could potentially have a tabbable node within its shadow root.\n */\nconst anyKeyboardFocusedElementSelector =\n '*:not(style):not(script):not(noscript):not(link):not([tabindex=\"-1\"])';\n\ntype HTMLElementOrNull = HTMLElement | null;\n\n/**\n * Finds all the elements in the given root node that can be focused by a 'tab' keypress.\n * In addition, the trap-start and trap-end sentinel nodes are excluded, and all contained shadow roots are walked recursively\n * @param {Node} rootNode The containing node from which traversal begins.\n * @param {string} selector The CSS selector used to query for matching, tabbable elements.\n * @param {Node[]} elementsToIgnore Elements to ignore\n */\nexport function findAllTabbableElements(\n rootNode: HTMLElementOrNull | ShadowRoot,\n selector: string,\n elementsToIgnore: HTMLElementOrNull[] = []\n): HTMLElement[] {\n if (!rootNode) {\n return [];\n }\n\n const nodes = Array.from<HTMLElement | HTMLSlotElement>(\n rootNode.querySelectorAll(anyKeyboardFocusedElementSelector)\n ).slice();\n\n return nodes.reduce((foundNodes, node) => {\n if (elementsToIgnore.indexOf(node) !== -1) {\n return foundNodes;\n }\n\n const win = ownerWindow(node);\n // Skip hidden nodes. assignedElements needs to be checked here to make sure we don't ignore slots\n if (\n (node.getBoundingClientRect().width === 0 ||\n win.getComputedStyle(node).visibility !== \"visible\") &&\n node instanceof HTMLSlotElement &&\n typeof node.assignedElements !== \"function\"\n ) {\n return foundNodes;\n }\n\n // If node is a slot return assigned elements.\n if (\n node instanceof HTMLSlotElement &&\n typeof node.assignedElements === \"function\"\n ) {\n return foundNodes.concat(\n node.assignedElements().filter((n) => !n.shadowRoot) as HTMLElement[]\n );\n }\n\n if (!node.shadowRoot && node.matches(selector)) {\n // If this element is inside a shadowRoot then the host not the element itself is needed.\n const rootNode = node.parentNode?.getRootNode();\n return foundNodes.concat(\n rootNode instanceof ShadowRoot ? (rootNode.host as HTMLElement) : node\n );\n }\n if (node.shadowRoot) {\n return foundNodes.concat(\n findAllTabbableElements(node.shadowRoot, selector, elementsToIgnore)\n );\n }\n\n return foundNodes;\n }, [] as HTMLElement[]);\n}\n"],"names":["rootNode"],"mappings":";;AAQA,MAAM,iCACJ,GAAA,uEAAA,CAAA;AAWK,SAAS,uBACd,CAAA,QAAA,EACA,QACA,EAAA,gBAAA,GAAwC,EACzB,EAAA;AACf,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAA,OAAO,EAAC,CAAA;AAAA,GACV;AAEA,EAAA,MAAM,QAAQ,KAAM,CAAA,IAAA;AAAA,IAClB,QAAA,CAAS,iBAAiB,iCAAiC,CAAA;AAAA,IAC3D,KAAM,EAAA,CAAA;AAER,EAAA,OAAO,KAAM,CAAA,MAAA,CAAO,CAAC,UAAA,EAAY,IAAS,KAAA;AAjC5C,IAAA,IAAA,EAAA,CAAA;AAkCI,IAAA,IAAI,gBAAiB,CAAA,OAAA,CAAQ,IAAI,CAAA,KAAM,CAAI,CAAA,EAAA;AACzC,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAEA,IAAM,MAAA,GAAA,GAAM,YAAY,IAAI,CAAA,CAAA;AAE5B,IAAA,IAAA,CACG,KAAK,qBAAsB,EAAA,CAAE,KAAU,KAAA,CAAA,IACtC,IAAI,gBAAiB,CAAA,IAAI,CAAE,CAAA,UAAA,KAAe,cAC5C,IAAgB,YAAA,eAAA,IAChB,OAAO,IAAA,CAAK,qBAAqB,UACjC,EAAA;AACA,MAAO,OAAA,UAAA,CAAA;AAAA,KACT;AAGA,IAAA,IACE,IAAgB,YAAA,eAAA,IAChB,OAAO,IAAA,CAAK,qBAAqB,UACjC,EAAA;AACA,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChB,IAAA,CAAK,kBAAmB,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAC,EAAE,UAAU,CAAA;AAAA,OACrD,CAAA;AAAA,KACF;AAEA,IAAA,IAAI,CAAC,IAAK,CAAA,UAAA,IAAc,IAAK,CAAA,OAAA,CAAQ,QAAQ,CAAG,EAAA;AAE9C,MAAMA,MAAAA,SAAAA,GAAAA,CAAW,EAAK,GAAA,IAAA,CAAA,UAAA,KAAL,IAAiB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,WAAA,EAAA,CAAA;AAClC,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChBA,SAAAA,YAAoB,UAAcA,GAAAA,SAAAA,CAAS,IAAuB,GAAA,IAAA;AAAA,OACpE,CAAA;AAAA,KACF;AACA,IAAA,IAAI,KAAK,UAAY,EAAA;AACnB,MAAA,OAAO,UAAW,CAAA,MAAA;AAAA,QAChB,uBAAwB,CAAA,IAAA,CAAK,UAAY,EAAA,QAAA,EAAU,gBAAgB,CAAA;AAAA,OACrE,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,UAAA,CAAA;AAAA,GACT,EAAG,EAAmB,CAAA,CAAA;AACxB;;;;"}
@@ -1,55 +0,0 @@
1
- import { useRef, useEffect } from 'react';
2
- import { useIsomorphicLayoutEffect } from '@salt-ds/core';
3
-
4
- function getActiveElement(doc) {
5
- if (!doc) {
6
- return null;
7
- }
8
- const activeElement = doc.activeElement;
9
- if (activeElement == null ? void 0 : activeElement.shadowRoot) {
10
- return getActiveElement(activeElement.shadowRoot);
11
- }
12
- return activeElement;
13
- }
14
- function useReturnFocus({
15
- focusOptions: focusOptionsProp,
16
- disabled,
17
- active,
18
- document
19
- }) {
20
- const previousFocusedElement = useRef();
21
- useIsomorphicLayoutEffect(() => {
22
- if (active) {
23
- previousFocusedElement.current = getActiveElement(document);
24
- }
25
- }, [document, active]);
26
- const focusOptionsRef = useRef(focusOptionsProp);
27
- useEffect(() => {
28
- focusOptionsRef.current = focusOptionsProp;
29
- }, [focusOptionsProp]);
30
- useIsomorphicLayoutEffect(() => {
31
- const returnFocus = () => {
32
- const focusOptions = typeof focusOptionsRef.current === "object" ? focusOptionsRef.current : void 0;
33
- setTimeout(() => {
34
- var _a;
35
- if (previousFocusedElement.current) {
36
- (_a = previousFocusedElement.current) == null ? void 0 : _a.focus(focusOptions);
37
- }
38
- }, 0);
39
- };
40
- if (!disabled) {
41
- if (!active) {
42
- returnFocus();
43
- }
44
- return () => {
45
- if (active) {
46
- returnFocus();
47
- }
48
- };
49
- }
50
- return void 0;
51
- }, [disabled, active]);
52
- }
53
-
54
- export { useReturnFocus };
55
- //# sourceMappingURL=useReturnFocus.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useReturnFocus.js","sources":["../src/focus-manager/internal/useReturnFocus.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useIsomorphicLayoutEffect } from \"@salt-ds/core\";\n\nfunction getActiveElement(doc: DocumentOrShadowRoot): HTMLElement | null {\n if (!doc) {\n return null;\n }\n\n const activeElement = doc.activeElement;\n\n if (activeElement?.shadowRoot) {\n return getActiveElement(activeElement.shadowRoot);\n }\n\n return activeElement as HTMLElement;\n}\n\nexport interface UseReturnFocusProps {\n active?: boolean;\n disabled?: boolean;\n document: DocumentOrShadowRoot;\n focusOptions?: FocusOptions;\n}\n\nexport function useReturnFocus({\n focusOptions: focusOptionsProp,\n disabled,\n active,\n document,\n}: UseReturnFocusProps): void {\n const previousFocusedElement = useRef<HTMLElement | null>();\n\n useIsomorphicLayoutEffect(() => {\n if (active) {\n previousFocusedElement.current = getActiveElement(document);\n }\n }, [document, active]);\n\n const focusOptionsRef = useRef(focusOptionsProp);\n\n useEffect(() => {\n focusOptionsRef.current = focusOptionsProp;\n }, [focusOptionsProp]);\n\n useIsomorphicLayoutEffect(() => {\n const returnFocus = () => {\n const focusOptions =\n typeof focusOptionsRef.current === \"object\"\n ? focusOptionsRef.current\n : undefined;\n\n setTimeout(() => {\n if (previousFocusedElement.current) {\n previousFocusedElement.current?.focus(focusOptions);\n }\n }, 0);\n };\n\n if (!disabled) {\n if (!active) {\n returnFocus();\n }\n\n return () => {\n if (active) {\n returnFocus();\n }\n };\n }\n\n return undefined;\n }, [disabled, active]);\n}\n"],"names":[],"mappings":";;;AAGA,SAAS,iBAAiB,GAA+C,EAAA;AACvE,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAA,MAAM,gBAAgB,GAAI,CAAA,aAAA,CAAA;AAE1B,EAAA,IAAI,+CAAe,UAAY,EAAA;AAC7B,IAAO,OAAA,gBAAA,CAAiB,cAAc,UAAU,CAAA,CAAA;AAAA,GAClD;AAEA,EAAO,OAAA,aAAA,CAAA;AACT,CAAA;AASO,SAAS,cAAe,CAAA;AAAA,EAC7B,YAAc,EAAA,gBAAA;AAAA,EACd,QAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AACF,CAA8B,EAAA;AAC5B,EAAA,MAAM,yBAAyB,MAA2B,EAAA,CAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,IAAI,MAAQ,EAAA;AACV,MAAuB,sBAAA,CAAA,OAAA,GAAU,iBAAiB,QAAQ,CAAA,CAAA;AAAA,KAC5D;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,MAAM,CAAC,CAAA,CAAA;AAErB,EAAM,MAAA,eAAA,GAAkB,OAAO,gBAAgB,CAAA,CAAA;AAE/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,eAAA,CAAgB,OAAU,GAAA,gBAAA,CAAA;AAAA,GAC5B,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,cAAc,MAAM;AACxB,MAAA,MAAM,eACJ,OAAO,eAAA,CAAgB,OAAY,KAAA,QAAA,GAC/B,gBAAgB,OAChB,GAAA,KAAA,CAAA,CAAA;AAEN,MAAA,UAAA,CAAW,MAAM;AAnDvB,QAAA,IAAA,EAAA,CAAA;AAoDQ,QAAA,IAAI,uBAAuB,OAAS,EAAA;AAClC,UAAuB,CAAA,EAAA,GAAA,sBAAA,CAAA,OAAA,KAAvB,mBAAgC,KAAM,CAAA,YAAA,CAAA,CAAA;AAAA,SACxC;AAAA,SACC,CAAC,CAAA,CAAA;AAAA,KACN,CAAA;AAEA,IAAA,IAAI,CAAC,QAAU,EAAA;AACb,MAAA,IAAI,CAAC,MAAQ,EAAA;AACX,QAAY,WAAA,EAAA,CAAA;AAAA,OACd;AAEA,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,MAAQ,EAAA;AACV,UAAY,WAAA,EAAA,CAAA;AAAA,SACd;AAAA,OACF,CAAA;AAAA,KACF;AAEA,IAAO,OAAA,KAAA,CAAA,CAAA;AAAA,GACN,EAAA,CAAC,QAAU,EAAA,MAAM,CAAC,CAAA,CAAA;AACvB;;;;"}
@@ -1,33 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { Button, Link } from '@salt-ds/core';
3
-
4
- const ConditionalWrapper = ({
5
- children,
6
- className,
7
- parent,
8
- expanded,
9
- onExpand,
10
- active,
11
- href
12
- }) => {
13
- const handleExpand = (event) => {
14
- event.stopPropagation();
15
- onExpand == null ? void 0 : onExpand(event);
16
- };
17
- return parent ? /* @__PURE__ */ jsx(Button, {
18
- "aria-label": "expand",
19
- variant: "secondary",
20
- "aria-expanded": expanded,
21
- className,
22
- onClick: handleExpand,
23
- children
24
- }) : /* @__PURE__ */ jsx(Link, {
25
- "aria-current": active ? "page" : void 0,
26
- href,
27
- className,
28
- children
29
- });
30
- };
31
-
32
- export { ConditionalWrapper };
33
- //# sourceMappingURL=ConditionalWrapper.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ConditionalWrapper.js","sources":["../src/navigation-item/ConditionalWrapper.tsx"],"sourcesContent":["import { MouseEvent, ReactNode } from \"react\";\nimport { Link, Button } from \"@salt-ds/core\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\ninterface ConditionalWrapperProps\n extends Pick<\n NavigationItemProps,\n \"parent\" | \"expanded\" | \"onExpand\" | \"active\" | \"href\"\n > {\n children: ReactNode;\n className: string;\n}\n\nexport const ConditionalWrapper = ({\n children,\n className,\n parent,\n expanded,\n onExpand,\n active,\n href,\n}: ConditionalWrapperProps) => {\n const handleExpand = (event: MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n onExpand?.(event);\n };\n\n return parent ? (\n <Button\n aria-label=\"expand\"\n variant=\"secondary\"\n aria-expanded={expanded}\n className={className}\n onClick={handleExpand}\n >\n {children}\n </Button>\n ) : (\n <Link\n aria-current={active ? \"page\" : undefined}\n href={href}\n className={className}\n >\n {children}\n </Link>\n );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,qBAAqB,CAAC;AAAA,EACjC,QAAA;AAAA,EACA,SAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAA;AACF,CAA+B,KAAA;AAC7B,EAAM,MAAA,YAAA,GAAe,CAAC,KAAyC,KAAA;AAC7D,IAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,IAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,GACb,CAAA;AAEA,EAAA,OAAO,yBACJ,GAAA,CAAA,MAAA,EAAA;AAAA,IACC,YAAW,EAAA,QAAA;AAAA,IACX,OAAQ,EAAA,WAAA;AAAA,IACR,eAAe,EAAA,QAAA;AAAA,IACf,SAAA;AAAA,IACA,OAAS,EAAA,YAAA;AAAA,IAER,QAAA;AAAA,GACH,oBAEC,GAAA,CAAA,IAAA,EAAA;AAAA,IACC,cAAA,EAAc,SAAS,MAAS,GAAA,KAAA,CAAA;AAAA,IAChC,IAAA;AAAA,IACA,SAAA;AAAA,IAEC,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}
@@ -1,27 +0,0 @@
1
- import { jsx } from 'react/jsx-runtime';
2
- import { ChevronDownIcon, ChevronRightIcon } from '@salt-ds/icons';
3
-
4
- const iconExpansionMap = {
5
- vertical: {
6
- expanded: ChevronDownIcon,
7
- collapsed: ChevronRightIcon
8
- },
9
- horizontal: {
10
- expanded: ChevronDownIcon,
11
- collapsed: ChevronDownIcon
12
- }
13
- };
14
- function ExpansionIcon({
15
- expanded = false,
16
- orientation = "horizontal",
17
- className
18
- }) {
19
- const Icon = iconExpansionMap[orientation][expanded ? "expanded" : "collapsed"];
20
- return /* @__PURE__ */ jsx(Icon, {
21
- "aria-hidden": "true",
22
- className
23
- });
24
- }
25
-
26
- export { ExpansionIcon };
27
- //# sourceMappingURL=ExpansionIcon.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ExpansionIcon.js","sources":["../src/navigation-item/ExpansionIcon.tsx"],"sourcesContent":["import { ChevronDownIcon, ChevronRightIcon } from \"@salt-ds/icons\";\nimport { NavigationItemProps } from \"./NavigationItem\";\n\nconst iconExpansionMap = {\n vertical: {\n expanded: ChevronDownIcon,\n collapsed: ChevronRightIcon,\n },\n horizontal: {\n expanded: ChevronDownIcon,\n collapsed: ChevronDownIcon,\n },\n};\n\nexport function ExpansionIcon({\n expanded = false,\n orientation = \"horizontal\",\n className,\n}: Pick<NavigationItemProps, \"expanded\" | \"orientation\" | \"className\">) {\n const Icon =\n iconExpansionMap[orientation][expanded ? \"expanded\" : \"collapsed\"];\n return <Icon aria-hidden=\"true\" className={className} />;\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,gBAAmB,GAAA;AAAA,EACvB,QAAU,EAAA;AAAA,IACR,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,gBAAA;AAAA,GACb;AAAA,EACA,UAAY,EAAA;AAAA,IACV,QAAU,EAAA,eAAA;AAAA,IACV,SAAW,EAAA,eAAA;AAAA,GACb;AACF,CAAA,CAAA;AAEO,SAAS,aAAc,CAAA;AAAA,EAC5B,QAAW,GAAA,KAAA;AAAA,EACX,WAAc,GAAA,YAAA;AAAA,EACd,SAAA;AACF,CAAwE,EAAA;AACtE,EAAA,MAAM,IACJ,GAAA,gBAAA,CAAiB,WAAa,CAAA,CAAA,QAAA,GAAW,UAAa,GAAA,WAAA,CAAA,CAAA;AACxD,EAAA,uBAAQ,GAAA,CAAA,IAAA,EAAA;AAAA,IAAK,aAAY,EAAA,MAAA;AAAA,IAAO,SAAA;AAAA,GAAsB,CAAA,CAAA;AACxD;;;;"}
@@ -1,4 +0,0 @@
1
- var css_248z = "/* Vars applied to root NavigationItem component */\n.saltNavigationItem {\n --navigationItem-color: var(--salt-content-primary-foreground);\n --navigationItem-fill: var(--salt-content-primary-foreground);\n --navigationItem-bar-inset: var(--salt-spacing-25);\n --navigationItem-bar-size: var(--salt-size-indicator);\n --navigationItem-indicator-background: var(--salt-navigable-indicator-active);\n --navigationItem-gap: var(--salt-spacing-100);\n}\n\n/* Vars applied to NavigationItem component when active */\n.saltNavigationItem-active,\n.saltNavigationItem-rootItem {\n --navigationItem-fontWeight: var(--salt-text-fontWeight-strong);\n}\n\n/* Vars applied to NavigationItem component when blur active */\n.saltNavigationItem-blurActive,\n.saltNavigationItem-active.saltNavigationItem-nested {\n --navigationItem-fontWeight: var(--salt-text-fontWeight);\n}\n\n/* Styles applied to NavigationItem wrapper */\n.saltNavigationItem-wrapper {\n display: flex;\n align-items: center;\n position: relative;\n gap: var(--navigationItem-gap);\n font-weight: var(--navigationItem-fontWeight);\n text-decoration: none;\n /* Hover off animation */\n transition: all var(--salt-duration-instant) ease-in-out;\n}\n\n/* Styles applied to NavigationItem link */\n.saltNavigationItem-wrapper.saltLink {\n --link-textDecoration: none;\n}\n\n/* Styles applied to NavigationItem icon */\n.saltNavigationItem-wrapper .saltIcon {\n fill: var(--navigationItem-fill);\n top: var(--salt-size-border);\n}\n\n/* Styles applied to NavigationItem Badge */\n.saltNavigationItem-label .saltBadge {\n margin-left: auto;\n}\n\n/* Styles applied to root NavigationItem component */\n.saltNavigationItem {\n margin: 0 var(--navigationItem-gap);\n}\n\n/* Styles applied when orientation = \"horizontal\" */\n.saltNavigationItem-wrapper.saltNavigationItem-horizontal {\n min-height: calc(var(--salt-size-base) + var(--navigationItem-gap) + var(--navigationItem-gap));\n padding: calc(var(--navigationItem-gap) + var(--navigationItem-bar-inset)) 0 var(--navigationItem-gap) 0;\n width: fit-content;\n}\n\n/* Styles applied when orientation = \"vertical\" */\n.saltNavigationItem-wrapper.saltNavigationItem-vertical {\n min-height: calc(var(--salt-size-base));\n padding-left: calc(var(--salt-spacing-300) + var(--navigationItem-bar-inset));\n padding-right: var(--navigationItem-gap);\n margin: var(--salt-spacing-50) 0;\n}\n\n/* Styles applied to NavigationItem label */\n.saltNavigationItem-wrapper .saltNavigationItem-label {\n --link-color-visited: var(--navigationItem-color);\n --link-color-hover: var(--navigationItem-color);\n\n color: var(--navigationItem-color);\n line-height: var(--salt-text-lineHeight);\n font-family: var(--salt-text-fontFamily);\n padding-left: calc(var(--saltNavigationItem-level, 0) * var(--navigationItem-gap));\n flex: 1;\n text-align: left;\n display: flex;\n align-items: baseline;\n gap: var(--navigationItem-gap);\n}\n\n/* Styles applied when level is not 0 */\n.saltNavigationItem-wrapper.saltNavigationItem-nested {\n padding-left: calc(var(--salt-size-icon) + var(--salt-spacing-400));\n}\n\n/* Styles applied to expand button */\n.saltNavigationItem-wrapper.saltNavigationItem-expandButton {\n --saltButton-background-hover: none;\n --saltButton-background-active: none;\n --saltButton-textTransform: none;\n --saltButton-width: 100%;\n --saltButton-letterSpacing: none;\n\n gap: var(--navigationItem-gap);\n /* Required to match link's outline offset */\n outline-offset: var(--salt-size-border);\n}\n\n/* Styles applied to expand icon */\n.saltNavigationItem-wrapper .saltNavigationItem-expandIcon {\n --saltIcon-color: var(--navigationItem-fill);\n\n top: 0;\n}\n\n/* Styles applied to NavigationItem when focus is visible */\n.saltNavigationItem-wrapper:focus-visible {\n outline: var(--salt-focused-outline);\n}\n\n/* Styles applied to NavigationItem when when orientation = \"horizontal\" and focus is visible */\n.saltNavigationItem-horizontal:focus-visible {\n border-right: var(--navigationItem-gap) solid transparent;\n border-left: var(--navigationItem-gap) solid transparent;\n margin: 0 calc(var(--navigationItem-gap) * -1);\n}\n\n/* Styles applied to NavigationItem for non-keyboard focus */\n.saltNavigationItem-wrapper:focus:not(:focus-visible) {\n outline: 0;\n}\n\n/* Styles applied to activation line */\n.saltNavigationItem-wrapper::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n}\n\n/* Styles applied to activation line when orientation = \"horizontal\" */\n.saltNavigationItem-horizontal::after {\n width: 100%;\n height: var(--navigationItem-bar-size);\n top: var(--navigationItem-bar-inset);\n}\n\n/* Styles applied to activation line when orientation = \"vertical\" */\n.saltNavigationItem-vertical::after {\n width: var(--navigationItem-bar-size);\n left: var(--navigationItem-bar-inset);\n top: var(--navigationItem-bar-inset);\n height: calc(100% - var(--salt-spacing-50));\n}\n\n/* Styles applied to activation line on hover */\n.saltNavigationItem-wrapper:hover::after,\n.saltNavigationItem-wrapper:focus-visible::after {\n background: var(--salt-navigable-indicator-hover);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n\n/* Styles applied to activation line when item is active */\n.saltNavigationItem-wrapper.saltNavigationItem-active::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:hover::after,\n.saltNavigationItem-wrapper.saltNavigationItem-active:focus::after {\n background: var(--navigationItem-indicator-background);\n /* Hover on animation */\n transition: all var(--salt-duration-perceptible) ease-in-out;\n}\n";
2
-
3
- export { css_248z as default };
4
- //# sourceMappingURL=NavigationItem.css.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"NavigationItem.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}