@eifi1/ui-kit 0.32.2 → 0.33.0

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 (363) hide show
  1. package/README.md +16 -8
  2. package/dist/account/delete-account-setting.d.ts +10 -10
  3. package/dist/account/delete-account-setting.js +2 -1
  4. package/dist/account/delete-account-setting.js.map +1 -1
  5. package/dist/account/email-change-setting.d.ts +5 -0
  6. package/dist/account/email-change-setting.js +4 -3
  7. package/dist/account/email-change-setting.js.map +1 -1
  8. package/dist/account/sessions-setting.d.ts +4 -0
  9. package/dist/account/sessions-setting.js +3 -2
  10. package/dist/account/sessions-setting.js.map +1 -1
  11. package/dist/admin/admin-action-confirm.d.ts +10 -10
  12. package/dist/admin/admin-action-confirm.js.map +1 -1
  13. package/dist/admin/invitations-panel.d.ts +10 -10
  14. package/dist/admin/invitations-panel.js +4 -3
  15. package/dist/admin/invitations-panel.js.map +1 -1
  16. package/dist/admin/plan-change.d.ts +100 -0
  17. package/dist/admin/plan-change.js +208 -0
  18. package/dist/admin/plan-change.js.map +1 -0
  19. package/dist/admin/reviewer-scope-editor.d.ts +10 -10
  20. package/dist/admin/reviewer-scope-editor.js.map +1 -1
  21. package/dist/admin/role-select.d.ts +7 -7
  22. package/dist/admin/role-select.js.map +1 -1
  23. package/dist/admin/transfer-ownership-dialog.d.ts +10 -10
  24. package/dist/admin/user-roster.d.ts +7 -7
  25. package/dist/admin/user-roster.js +2 -2
  26. package/dist/admin/user-roster.js.map +1 -1
  27. package/dist/auth/auth-errors.d.ts +13 -2
  28. package/dist/auth/auth-errors.js +5 -1
  29. package/dist/auth/auth-errors.js.map +1 -1
  30. package/dist/auth/complete-name-dialog.d.ts +4 -1
  31. package/dist/auth/complete-name-dialog.js +2 -1
  32. package/dist/auth/complete-name-dialog.js.map +1 -1
  33. package/dist/auth/register-form.d.ts +10 -10
  34. package/dist/billing/billing-banner.d.ts +13 -11
  35. package/dist/billing/billing-banner.js.map +1 -1
  36. package/dist/billing/billing-labels.d.ts +10 -10
  37. package/dist/billing/billing-labels.js +10 -1
  38. package/dist/billing/billing-labels.js.map +1 -1
  39. package/dist/billing/billing-lock.d.ts +39 -12
  40. package/dist/billing/billing-lock.js +9 -3
  41. package/dist/billing/billing-lock.js.map +1 -1
  42. package/dist/billing/billing-overview.d.ts +154 -0
  43. package/dist/billing/billing-overview.js +2 -0
  44. package/dist/billing/billing-overview.js.map +1 -0
  45. package/dist/billing/billing-standing.d.ts +10 -10
  46. package/dist/billing/checkout-processing.d.ts +217 -0
  47. package/dist/billing/checkout-processing.js +198 -0
  48. package/dist/billing/checkout-processing.js.map +1 -0
  49. package/dist/billing/checkout-return.d.ts +51 -0
  50. package/dist/billing/checkout-return.js +43 -0
  51. package/dist/billing/checkout-return.js.map +1 -0
  52. package/dist/billing/pay-page.d.ts +210 -0
  53. package/dist/billing/pay-page.js +113 -0
  54. package/dist/billing/pay-page.js.map +1 -0
  55. package/dist/billing/plan-card.d.ts +10 -10
  56. package/dist/billing/plan-limit-notice.d.ts +10 -10
  57. package/dist/billing/plan-limit-toast.d.ts +143 -0
  58. package/dist/billing/plan-limit-toast.js +40 -0
  59. package/dist/billing/plan-limit-toast.js.map +1 -0
  60. package/dist/billing/subscription-actions.d.ts +38 -15
  61. package/dist/billing/subscription-actions.js +9 -2
  62. package/dist/billing/subscription-actions.js.map +1 -1
  63. package/dist/billing/subscription-status-chip.d.ts +9 -9
  64. package/dist/bin/eifi1-pay-page.mjs +166 -0
  65. package/dist/chart.d.ts +10 -10
  66. package/dist/components/account-chips.d.ts +6 -1
  67. package/dist/components/account-settings.d.ts +4 -1
  68. package/dist/components/account-settings.js +2 -1
  69. package/dist/components/account-settings.js.map +1 -1
  70. package/dist/components/amount-input.d.ts +10 -10
  71. package/dist/components/autocomplete.d.ts +2 -1
  72. package/dist/components/autocomplete.js +3 -1
  73. package/dist/components/autocomplete.js.map +1 -1
  74. package/dist/components/button-group.d.ts +10 -10
  75. package/dist/components/button-group.js +1 -1
  76. package/dist/components/button-group.js.map +1 -1
  77. package/dist/components/calculator.d.ts +10 -10
  78. package/dist/components/calculator.js +3 -3
  79. package/dist/components/calculator.js.map +1 -1
  80. package/dist/components/checkbox-group.d.ts +2 -1
  81. package/dist/components/checkbox-group.js.map +1 -1
  82. package/dist/components/checkbox.d.ts +2 -1
  83. package/dist/components/checkbox.js.map +1 -1
  84. package/dist/components/chip.d.ts +2 -1
  85. package/dist/components/chip.js +19 -17
  86. package/dist/components/chip.js.map +1 -1
  87. package/dist/components/choice-card.d.ts +3 -1
  88. package/dist/components/choice-card.js +1 -1
  89. package/dist/components/choice-card.js.map +1 -1
  90. package/dist/components/combobox.d.ts +4 -3
  91. package/dist/components/combobox.js.map +1 -1
  92. package/dist/components/confirm-dialog.d.ts +10 -10
  93. package/dist/components/confirm-dialog.js +6 -3
  94. package/dist/components/confirm-dialog.js.map +1 -1
  95. package/dist/components/copy-button.d.ts +11 -11
  96. package/dist/components/country-select.d.ts +2 -1
  97. package/dist/components/country-select.js.map +1 -1
  98. package/dist/components/danger-confirm.d.ts +10 -10
  99. package/dist/components/danger-confirm.js.map +1 -1
  100. package/dist/components/data-table-cells.d.ts +12 -1
  101. package/dist/components/data-table-filter-popover.d.ts +12 -1
  102. package/dist/components/data-table-filters.d.ts +12 -1
  103. package/dist/components/data-table-labels.d.ts +12 -1
  104. package/dist/components/data-table-pagination.d.ts +12 -1
  105. package/dist/components/data-table.d.ts +12 -1
  106. package/dist/components/data-table.js +3 -3
  107. package/dist/components/data-table.js.map +1 -1
  108. package/dist/components/date-picker.js +6 -4
  109. package/dist/components/date-picker.js.map +1 -1
  110. package/dist/components/entity-combobox.d.ts +3 -2
  111. package/dist/components/entity-combobox.js.map +1 -1
  112. package/dist/components/facing-pair.d.ts +10 -10
  113. package/dist/components/field-parts.d.ts +32 -4
  114. package/dist/components/field-parts.js +54 -19
  115. package/dist/components/field-parts.js.map +1 -1
  116. package/dist/components/file-button.d.ts +10 -10
  117. package/dist/components/file-button.js +3 -2
  118. package/dist/components/file-button.js.map +1 -1
  119. package/dist/components/file-dropzone.d.ts +11 -11
  120. package/dist/components/file-dropzone.js.map +1 -1
  121. package/dist/components/floating-panel.js +5 -5
  122. package/dist/components/floating-panel.js.map +1 -1
  123. package/dist/components/form-actions.d.ts +9 -9
  124. package/dist/components/form-actions.js +3 -3
  125. package/dist/components/form-actions.js.map +1 -1
  126. package/dist/components/iban-input.d.ts +10 -10
  127. package/dist/components/inline-edit-field.d.ts +2 -1
  128. package/dist/components/inline-edit-field.js +6 -6
  129. package/dist/components/inline-edit-field.js.map +1 -1
  130. package/dist/components/language-select.d.ts +10 -10
  131. package/dist/components/legal-page.d.ts +10 -10
  132. package/dist/components/legal.d.ts +10 -10
  133. package/dist/components/list.d.ts +2 -1
  134. package/dist/components/list.js +4 -5
  135. package/dist/components/list.js.map +1 -1
  136. package/dist/components/money-field.d.ts +10 -10
  137. package/dist/components/month-picker.js +54 -44
  138. package/dist/components/month-picker.js.map +1 -1
  139. package/dist/components/multi-entity-combobox.d.ts +3 -2
  140. package/dist/components/multi-entity-combobox.js.map +1 -1
  141. package/dist/components/number-field.d.ts +10 -10
  142. package/dist/components/number-input.d.ts +10 -10
  143. package/dist/components/numpad-sheet.d.ts +10 -10
  144. package/dist/components/numpad-sheet.js +2 -2
  145. package/dist/components/numpad-sheet.js.map +1 -1
  146. package/dist/components/phone-input.d.ts +10 -10
  147. package/dist/components/row-actions.d.ts +5 -5
  148. package/dist/components/row-actions.js +130 -32
  149. package/dist/components/row-actions.js.map +1 -1
  150. package/dist/components/series-chart.d.ts +10 -10
  151. package/dist/components/settings-fields.d.ts +10 -10
  152. package/dist/components/share-card.d.ts +7 -7
  153. package/dist/components/share-card.js +26 -10
  154. package/dist/components/share-card.js.map +1 -1
  155. package/dist/components/status-dot.d.ts +1 -0
  156. package/dist/components/status-dot.js +2 -2
  157. package/dist/components/status-dot.js.map +1 -1
  158. package/dist/components/swatch-picker.d.ts +2 -1
  159. package/dist/components/swatch-picker.js.map +1 -1
  160. package/dist/components/swipeable-row.d.ts +88 -17
  161. package/dist/components/swipeable-row.js +46 -9
  162. package/dist/components/swipeable-row.js.map +1 -1
  163. package/dist/components/switch.d.ts +2 -1
  164. package/dist/components/switch.js.map +1 -1
  165. package/dist/components/table.d.ts +2 -1
  166. package/dist/components/table.js +6 -0
  167. package/dist/components/table.js.map +1 -1
  168. package/dist/components/text-link.d.ts +9 -9
  169. package/dist/components/time-input.d.ts +10 -10
  170. package/dist/components/toggle-group.d.ts +2 -1
  171. package/dist/components/toggle-group.js +1 -1
  172. package/dist/components/toggle-group.js.map +1 -1
  173. package/dist/components/translation-review-editor.d.ts +4 -0
  174. package/dist/components/translation-review-editor.js +4 -3
  175. package/dist/components/translation-review-editor.js.map +1 -1
  176. package/dist/components/translation-review-parts.d.ts +1 -0
  177. package/dist/components/translation-review.d.ts +1 -0
  178. package/dist/components/translation-review.js +15 -18
  179. package/dist/components/translation-review.js.map +1 -1
  180. package/dist/components/ui.d.ts +9 -9
  181. package/dist/components/ui.js +47 -27
  182. package/dist/components/ui.js.map +1 -1
  183. package/dist/components/use-table-state.d.ts +12 -1
  184. package/dist/components/user-avatar.d.ts +1 -0
  185. package/dist/components/write-lock.d.ts +101 -13
  186. package/dist/components/write-lock.js +37 -13
  187. package/dist/components/write-lock.js.map +1 -1
  188. package/dist/{data-table-labels-kpAAVi6g.d.ts → data-table-labels-BJ5JE_X2.d.ts} +17 -0
  189. package/dist/data-table.d.ts +12 -1
  190. package/dist/{delete-account-setting-Dy4kJgUm.d.ts → delete-account-setting-DiPX4Vue.d.ts} +355 -41
  191. package/dist/feedback/feedback-attachment.d.ts +10 -10
  192. package/dist/feedback/feedback-attachment.js +7 -7
  193. package/dist/feedback/feedback-attachment.js.map +1 -1
  194. package/dist/feedback/feedback-context.d.ts +10 -10
  195. package/dist/feedback/feedback-crash.d.ts +10 -10
  196. package/dist/feedback/feedback-dialog.d.ts +10 -10
  197. package/dist/feedback/feedback-inbox.d.ts +9 -9
  198. package/dist/feedback/feedback-inbox.js +7 -3
  199. package/dist/feedback/feedback-inbox.js.map +1 -1
  200. package/dist/feedback/feedback-labels.d.ts +10 -10
  201. package/dist/feedback/feedback-menu.d.ts +3 -3
  202. package/dist/feedback/feedback-record.d.ts +10 -10
  203. package/dist/feedback/feedback-row-detail.d.ts +10 -10
  204. package/dist/feedback/feedback-row-detail.js.map +1 -1
  205. package/dist/feedback/feedback-status-undo.d.ts +10 -10
  206. package/dist/feedback/feedback-submit.d.ts +10 -10
  207. package/dist/feedback/feedback-swipe.d.ts +10 -10
  208. package/dist/feedback/feedback-swipe.js +3 -6
  209. package/dist/feedback/feedback-swipe.js.map +1 -1
  210. package/dist/feedback/feedback-table.d.ts +10 -10
  211. package/dist/feedback/feedback-table.js.map +1 -1
  212. package/dist/feedback/feedback-thread.d.ts +10 -10
  213. package/dist/feedback.d.ts +10 -10
  214. package/dist/hooks/use-file-drop.d.ts +10 -10
  215. package/dist/i18n/defaults.d.ts +10 -10
  216. package/dist/i18n/defaults.js +2 -0
  217. package/dist/i18n/defaults.js.map +1 -1
  218. package/dist/i18n/german.d.ts +10 -10
  219. package/dist/i18n/german.js +34 -1
  220. package/dist/i18n/german.js.map +1 -1
  221. package/dist/i18n/kit-labels.d.ts +4 -4
  222. package/dist/i18n/kit-labels.js.map +1 -1
  223. package/dist/i18n/languages.d.ts +10 -10
  224. package/dist/i18n/locales/de-CH.d.ts +10 -10
  225. package/dist/i18n/locales/en.d.ts +10 -10
  226. package/dist/i18n/locales/es.d.ts +10 -10
  227. package/dist/i18n/locales/es.js +34 -1
  228. package/dist/i18n/locales/es.js.map +1 -1
  229. package/dist/i18n/locales/fr.d.ts +10 -10
  230. package/dist/i18n/locales/fr.js +35 -1
  231. package/dist/i18n/locales/fr.js.map +1 -1
  232. package/dist/i18n/locales/hu.d.ts +10 -10
  233. package/dist/i18n/locales/hu.js +36 -1
  234. package/dist/i18n/locales/hu.js.map +1 -1
  235. package/dist/i18n/locales/it.d.ts +10 -10
  236. package/dist/i18n/locales/it.js +34 -1
  237. package/dist/i18n/locales/it.js.map +1 -1
  238. package/dist/i18n/locales/zh.d.ts +10 -10
  239. package/dist/i18n/locales/zh.js +34 -1
  240. package/dist/i18n/locales/zh.js.map +1 -1
  241. package/dist/i18n/review.d.ts +10 -10
  242. package/dist/i18n/review.js +8 -1
  243. package/dist/i18n/review.js.map +1 -1
  244. package/dist/index.d.ts +10 -5
  245. package/dist/index.js +40 -2
  246. package/dist/index.js.map +1 -1
  247. package/dist/landing/landing-actions.d.ts +10 -10
  248. package/dist/landing/landing-sections.d.ts +10 -10
  249. package/dist/landing/public-header.d.ts +10 -10
  250. package/dist/landing/routing.d.ts +10 -10
  251. package/dist/pay/.well-known/apple-developer-merchantid-domain-association +1 -0
  252. package/dist/pay/index.html +30 -0
  253. package/dist/pay/pay.css +126 -0
  254. package/dist/pay/pay.js +198 -0
  255. package/dist/rhf/fields.d.ts +10 -10
  256. package/dist/rhf/form.d.ts +10 -10
  257. package/dist/rhf.d.ts +10 -10
  258. package/dist/settings/settings-section.d.ts +10 -10
  259. package/dist/shell/app-shell.d.ts +9 -9
  260. package/dist/shell/top-bar-brand.d.ts +10 -10
  261. package/dist/shell/topbar-action-menu.d.ts +1 -0
  262. package/dist/shell.d.ts +10 -10
  263. package/dist/testing/css-variables.d.ts +74 -0
  264. package/dist/testing/css-variables.generated.d.ts +7 -0
  265. package/dist/testing/css-variables.generated.js +8 -0
  266. package/dist/testing/css-variables.generated.js.map +1 -0
  267. package/dist/testing/css-variables.js +93 -0
  268. package/dist/testing/css-variables.js.map +1 -0
  269. package/dist/testing/index.d.ts +1 -0
  270. package/dist/testing/index.js +12 -0
  271. package/dist/testing/index.js.map +1 -0
  272. package/dist/theme/contrast-tokens.d.ts +44 -1
  273. package/dist/theme/contrast-tokens.js +21 -0
  274. package/dist/theme/contrast-tokens.js.map +1 -1
  275. package/dist/theme/contrast.d.ts +2 -2
  276. package/dist/theme/palette-derive.js +60 -11
  277. package/dist/theme/palette-derive.js.map +1 -1
  278. package/dist/theme/palette-presets.js +45 -43
  279. package/dist/theme/palette-presets.js.map +1 -1
  280. package/dist/wizard/stepper-nav.d.ts +11 -11
  281. package/dist/wizard/stepper-nav.js.map +1 -1
  282. package/dist/wizard.d.ts +10 -10
  283. package/package.json +10 -2
  284. package/src/account/delete-account-setting.tsx +6 -1
  285. package/src/account/email-change-setting.tsx +9 -3
  286. package/src/account/sessions-setting.tsx +7 -2
  287. package/src/admin/admin-action-confirm.tsx +2 -1
  288. package/src/admin/invitations-panel.tsx +9 -3
  289. package/src/admin/plan-change.tsx +459 -0
  290. package/src/admin/reviewer-scope-editor.tsx +2 -1
  291. package/src/admin/role-select.tsx +2 -1
  292. package/src/admin/user-roster.tsx +5 -3
  293. package/src/auth/auth-errors.ts +25 -2
  294. package/src/auth/complete-name-dialog.tsx +6 -2
  295. package/src/billing/billing-banner.tsx +3 -1
  296. package/src/billing/billing-labels.ts +45 -0
  297. package/src/billing/billing-lock.ts +36 -3
  298. package/src/billing/billing-overview.ts +58 -0
  299. package/src/billing/checkout-processing.ts +391 -0
  300. package/src/billing/checkout-return.ts +90 -0
  301. package/src/billing/pay-page.ts +242 -0
  302. package/src/billing/plan-limit-toast.tsx +91 -0
  303. package/src/billing/subscription-actions.tsx +41 -8
  304. package/src/components/account-settings.tsx +6 -2
  305. package/src/components/autocomplete.tsx +5 -2
  306. package/src/components/button-group.tsx +4 -1
  307. package/src/components/calculator.tsx +10 -6
  308. package/src/components/checkbox-group.tsx +2 -2
  309. package/src/components/checkbox.tsx +2 -1
  310. package/src/components/chip.tsx +37 -32
  311. package/src/components/choice-card.tsx +4 -2
  312. package/src/components/combobox.tsx +4 -4
  313. package/src/components/confirm-dialog.tsx +13 -6
  314. package/src/components/country-select.tsx +2 -2
  315. package/src/components/danger-confirm.tsx +2 -2
  316. package/src/components/data-table.tsx +20 -9
  317. package/src/components/date-picker.tsx +10 -7
  318. package/src/components/entity-combobox.tsx +3 -3
  319. package/src/components/field-parts.tsx +61 -14
  320. package/src/components/file-button.tsx +5 -4
  321. package/src/components/file-dropzone.tsx +2 -2
  322. package/src/components/floating-panel.tsx +7 -5
  323. package/src/components/form-actions.tsx +12 -5
  324. package/src/components/inline-edit-field.tsx +13 -13
  325. package/src/components/list.tsx +10 -9
  326. package/src/components/month-picker.tsx +8 -2
  327. package/src/components/multi-entity-combobox.tsx +3 -3
  328. package/src/components/numpad-sheet.tsx +8 -4
  329. package/src/components/row-actions.tsx +208 -58
  330. package/src/components/share-card.tsx +67 -13
  331. package/src/components/status-dot.tsx +7 -7
  332. package/src/components/swatch-picker.tsx +2 -2
  333. package/src/components/swipeable-row.tsx +138 -27
  334. package/src/components/switch.tsx +2 -1
  335. package/src/components/table.tsx +8 -1
  336. package/src/components/toggle-group.tsx +5 -3
  337. package/src/components/translation-review-editor.tsx +8 -3
  338. package/src/components/translation-review.tsx +18 -22
  339. package/src/components/ui.tsx +92 -43
  340. package/src/components/write-lock.tsx +150 -24
  341. package/src/feedback/feedback-attachment.tsx +13 -9
  342. package/src/feedback/feedback-inbox.tsx +10 -6
  343. package/src/feedback/feedback-row-detail.tsx +3 -2
  344. package/src/feedback/feedback-swipe.tsx +6 -11
  345. package/src/feedback/feedback-table.tsx +2 -1
  346. package/src/i18n/defaults.ts +2 -0
  347. package/src/i18n/german.ts +38 -0
  348. package/src/i18n/kit-labels.tsx +4 -0
  349. package/src/i18n/locales/es.ts +34 -0
  350. package/src/i18n/locales/fr.ts +39 -0
  351. package/src/i18n/locales/hu.ts +37 -0
  352. package/src/i18n/locales/it.ts +35 -0
  353. package/src/i18n/locales/zh.ts +33 -0
  354. package/src/i18n/review.ts +7 -0
  355. package/src/index.ts +48 -4
  356. package/src/testing/css-variables.generated.ts +112 -0
  357. package/src/testing/css-variables.ts +191 -0
  358. package/src/testing/index.ts +13 -0
  359. package/src/theme/contrast-tokens.ts +53 -2
  360. package/src/theme/palette-derive.ts +87 -10
  361. package/src/theme/palette-presets.ts +45 -43
  362. package/src/wizard/stepper-nav.tsx +2 -1
  363. package/tokens.css +306 -46
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TypedConfirmField, typedMatches } from \"./danger-confirm\";\nimport type { TypedMatch } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Button } from \"./ui\";\nimport { useWriteLock } from \"./write-lock\";\n\n/**\n * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback\n * text. A call that knows what it is confirming says so per call (`confirmLabel:\n * \"Delete budget\"`), which is what the dialog is for — these are for the rest.\n */\nexport interface ConfirmDialogLabels {\n confirm: string;\n cancel: string;\n /**\n * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to\n * type by default — where the address sits in the sentence moves with the language —\n * or a finished STRING. A call's own `typedLabel` wins over it.\n *\n * Required, like every key of a namespace: the shipped catalogues\n * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should\n * hear about the new string from the compiler rather than show it in English.\n */\n typed: string | ((text: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a\n * caller composing its own label from it. */\nexport const DEFAULT_CONFIRM_DIALOG_LABELS = {\n confirm: \"Confirm\",\n cancel: \"Cancel\",\n typed: (text: string) => `Type “${text}” to confirm`,\n} satisfies ConfirmDialogLabels;\n\nexport type ConfirmTone = \"danger\" | \"warning\" | \"neutral\";\n\nexport interface ConfirmOptions {\n /** The question, and the dialog's accessible name. */\n title: ReactNode;\n /** The smaller line under it — the consequence. Wired to `aria-describedby`. */\n body?: ReactNode;\n /** Default: `confirmDialog.confirm` from the provider, else \"Confirm\". */\n confirmLabel?: ReactNode;\n /** Default: `confirmDialog.cancel` from the provider, else \"Cancel\". */\n cancelLabel?: ReactNode;\n /**\n * `\"danger\"` for what cannot be undone (a delete): the confirm is the destructive\n * button and focus starts on CANCEL. `\"warning\"` and `\"neutral\"` (default) start on\n * the confirm. See {@link ConfirmProvider} for why the two differ.\n */\n tone?: ConfirmTone;\n /**\n * 0.18: make the user TYPE this before confirm is enabled — the target account's\n * e-mail address, a budget's name. For the action whose risk is not \"did you mean\n * it\" but \"is this the right row\": an admin who deactivates somebody has already\n * proven who THEY are (they passed the admin gate); typing the address is what\n * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and\n * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no\n * field.\n *\n * The dialog then shows one text field under the body and focuses it (whatever the\n * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm\n * stays disabled until the text matches; Enter in the field confirms once it does.\n * The answer is still `true` / `false` — the text matched what you passed, so send\n * that to the server if it asks for the address too, not the user's spelling.\n */\n requireTyped?: string;\n /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */\n typedLabel?: string;\n /**\n * How the typed text is compared. Default `\"caseless\"`: surrounding spaces and case\n * ignored, the rule both apps applied to an address. `\"trim\"` keeps case, `\"exact\"`\n * keeps spaces too — for a phrase like \"DELETE\" whose contract is \"exactly this\".\n */\n typedMatch?: TypedMatch;\n /**\n * 0.31.1: the confirm button COMMITS, as `Button`'s `commit` does. Under a locked\n * `WriteLockProvider` — read where `useConfirm` was called, not where the one dialog\n * host sits — it is `aria-disabled` with the lock's reason, so a read-only page (a\n * demo, a viewer's budget) can't confirm a delete through a dialog. One prop for the\n * many confirm sites an app has (kastlan's 0.31 adoption counted ~23).\n */\n commit?: boolean;\n}\n\nexport type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\n/**\n * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.\n *\n * The returned function is STABLE for the life of the provider, so it can sit in an\n * effect's or a `useCallback`'s dependency list without re-running it.\n *\n * Throws outside a {@link ConfirmProvider}, rather than falling back to\n * `window.confirm`: a silent fallback is exactly the native dialog the three apps are\n * migrating away from, and it would look like the migration had worked.\n */\nexport function useConfirm(): ConfirmFn {\n const confirm = useContext(ConfirmContext);\n if (!confirm) {\n throw new Error(\"useConfirm() must be called below a <ConfirmProvider>.\");\n }\n // The lock of the CALLER's place: the dialog host usually sits above the app's\n // `WriteLockProvider`, so it could not read the lock itself.\n const lock = useWriteLock();\n return useCallback(\n (options: ConfirmOptions) =>\n confirm(options.commit && lock.locked ? ({ ...options, lockReason: lock.reason } as ConfirmOptions) : options),\n [confirm, lock.locked, lock.reason],\n );\n}\n\ninterface Request extends ConfirmOptions {\n id: number;\n resolve: (answer: boolean) => void;\n /** Set by {@link useConfirm} for a `commit` confirm under a locked provider. */\n lockReason?: ReactNode;\n}\n\nexport interface ConfirmProviderProps {\n children: ReactNode;\n}\n\n/**\n * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on\n * {@link DialogFrame}, answering a promise.\n *\n * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,\n * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel\n * (those are the BROWSER's language, not the app's), cannot say which button is the\n * destructive one, and on an installed PWA it prints the origin over the question.\n * A promise is what lets each of those call sites change by one `await`:\n *\n * if (!window.confirm(t(\"budget.delete_confirm\"))) return;\n * // becomes\n * if (!(await confirm({ title: t(\"budget.delete_confirm\"), tone: \"danger\" }))) return;\n *\n * ## Its own provider, not part of `UiKitProvider`\n *\n * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it\n * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host\n * per nested provider, and a component under the inner one would open a second dialog\n * layer of its own. So the host is its own component, mounted once — inside the\n * `UiKitProvider` whose strings it should speak, which is also the order the labels\n * need.\n *\n * ## Focus\n *\n * On CANCEL for `tone: \"danger\"`, on CONFIRM otherwise. A confirm is often answered by\n * a reflexive Enter — the key that pressed the Delete button in the first place may\n * still be down — and for an action that cannot be undone that reflex must land on the\n * harmless answer; `DangerConfirm` makes the same call (\"never to the destructive\n * button itself\"). For everything else the confirm is the expected answer and Enter\n * accepting it is what `window.confirm` taught users, which the migrating call sites'\n * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.\n *\n * ## Escape, the backdrop, Back and Cancel all answer `false`\n *\n * Only the confirm button answers `true`. Anything that merely dismisses is a no.\n *\n * ## A second `confirm` while one is open QUEUES\n *\n * It is shown when the first is answered, and each call gets its own answer. The\n * alternative — answering the open one `false` to make room — would answer a question\n * the user never answered: a background prompt (\"your session is about to expire\")\n * would cancel the delete they were reading. `false` has to mean \"the user said no\".\n * A double-click cannot queue two of the same: the first click opens the modal\n * synchronously (a discrete event's update is flushed before the next one), so the\n * second lands on the open dialog rather than on the button — at worst on its\n * backdrop, which answers `false`, the safe way to be wrong.\n *\n * Unmounting the provider answers everything still pending `false`, so no caller's\n * `await` hangs forever.\n *\n * ## keksdose's synchronous call (transaction-swipe-plan.ts)\n *\n * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the\n * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a\n * thunk may be async without its caller knowing. So the plan builder stays\n * synchronous; it takes the confirm as an argument and the thunk awaits it:\n *\n * // mobile-transaction-list.tsx\n * const confirm = useConfirm();\n * buildTxSwipeActions({ tx, …, confirm });\n *\n * // transaction-swipe-plan.ts\n * const confirmed = (messageKey: string, run: () => void) => () => {\n * void confirm({ title: t(messageKey), tone: \"danger\" }).then((ok) => ok && run());\n * };\n *\n * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the\n * global, and asserts after an `await` (the mutation now runs a microtask later). The\n * row snaps back when the swipe commits, before the answer — which is right: the\n * dialog, not the half-swiped row, is where the question now is.\n */\nexport function ConfirmProvider({ children }: ConfirmProviderProps) {\n const [queue, setQueue] = useState<Request[]>([]);\n const nextId = useRef(0);\n // Every unanswered request, including the ones not yet in state — the unmount\n // cleanup below must reach a request made in the same tick it unmounts.\n const pending = useRef(new Set<Request>());\n\n const confirm = useCallback<ConfirmFn>(\n (options) =>\n new Promise<boolean>((resolve) => {\n const request: Request = { ...options, id: ++nextId.current, resolve };\n pending.current.add(request);\n setQueue((q) => [...q, request]);\n }),\n [],\n );\n\n useEffect(() => {\n const open = pending.current;\n return () => {\n for (const r of open) r.resolve(false);\n open.clear();\n };\n }, []);\n\n const answer = useCallback((request: Request, value: boolean) => {\n if (!pending.current.delete(request)) return;\n request.resolve(value);\n setQueue((q) => q.filter((r) => r !== request));\n }, []);\n\n const current = queue[0];\n return (\n <ConfirmContext.Provider value={confirm}>\n {children}\n {current && (\n // Keyed per request, so a queued one gets a fresh Modal: the first one's trap\n // hands focus back to the page, and the next one's captures that as its own\n // restore target instead of a button that has just been unmounted.\n <ConfirmDialogView key={current.id} request={current} onAnswer={answer} />\n )}\n </ConfirmContext.Provider>\n );\n}\n\nfunction ConfirmDialogView({\n request,\n onAnswer,\n}: {\n request: Request;\n onAnswer: (request: Request, value: boolean) => void;\n}) {\n const labels = useKitLabels(\"confirmDialog\", DEFAULT_CONFIRM_DIALOG_LABELS);\n const tone = request.tone ?? \"neutral\";\n const confirmRef = useRef<HTMLButtonElement>(null);\n const cancelRef = useRef<HTMLButtonElement>(null);\n // Set by the confirm button, read once the panel has finished lowering. Everything\n // else that ends in `onClose` — Escape, the backdrop, Back, Cancel — leaves it false.\n const accepted = useRef(false);\n const typedRef = useRef<HTMLInputElement>(null);\n const [typed, setTyped] = useState(\"\");\n const target = request.requireTyped;\n const matches = target === undefined || typedMatches(typed, target, request.typedMatch ?? \"caseless\");\n\n // In THIS component's effect, which runs after `Modal`'s own (a parent's effects run\n // after its children's). `Modal` engages its focus trap on the panel first — and\n // records the page's focused element as the restore target — and only then does\n // focus move to the button. Focusing it from inside the panel would run first and\n // make the button the restore target. A typed confirm starts in its field: typing is\n // the one thing the dialog is waiting for.\n useEffect(() => {\n (target !== undefined ? typedRef : tone === \"danger\" ? cancelRef : confirmRef).current?.focus();\n }, [tone, target]);\n\n const typedLabel =\n target === undefined\n ? \"\"\n : (request.typedLabel ??\n (typeof labels.typed === \"string\" ? labels.typed : labels.typed(target)));\n\n return (\n <DialogFrame\n title={request.title}\n description={request.body}\n onClose={() => onAnswer(request, accepted.current)}\n // A confirmation interrupts to ask a question that must be answered.\n role=\"alertdialog\"\n data-confirm-tone={tone}\n actions={(close) => (\n <>\n <Button ref={cancelRef} type=\"button\" variant=\"ghost\" onClick={close}>\n {request.cancelLabel ?? labels.cancel}\n </Button>\n <Button\n ref={confirmRef}\n type=\"button\"\n variant={tone === \"danger\" ? \"danger\" : \"primary\"}\n disabled={!matches}\n disabledReason={request.lockReason}\n onClick={() => {\n accepted.current = true;\n close();\n }}\n >\n {request.confirmLabel ?? labels.confirm}\n </Button>\n </>\n )}\n >\n {/* The field, when there is one, is the body; a plain confirm keeps having none. */}\n {target !== undefined && (\n <form\n noValidate\n onSubmit={(e) => {\n e.preventDefault();\n // Through the button, so Enter and a click are one path — and a disabled\n // (not yet matching) confirm ignores the click.\n confirmRef.current?.click();\n }}\n >\n {/* The kit's one typed-confirmation field (0.23), DangerConfirm's too: the\n keyboard told to leave the text alone, `data-matched` on the input. The\n label is this namespace's (`confirmDialog.typed`), and `placeholder=\"\"`\n keeps out the `dangerConfirm.phrasePlaceholder` a provider may set for\n the tile — this field never had one. */}\n <TypedConfirmField\n ref={typedRef}\n target={target}\n match={request.typedMatch ?? \"caseless\"}\n label={typedLabel}\n placeholder=\"\"\n value={typed}\n onValueChange={setTyped}\n />\n </form>\n )}\n </DialogFrame>\n );\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../../src/components/confirm-dialog.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\nimport { useKitLabels } from \"../i18n/kit-labels\";\nimport { TypedConfirmField, typedMatches } from \"./danger-confirm\";\nimport type { TypedMatch } from \"./danger-confirm\";\nimport { DialogFrame } from \"./dialog-frame\";\nimport { Button } from \"./ui\";\nimport { useWriteLock, writeLockFor, type CommitScope } from \"./write-lock\";\n\n/**\n * The `confirmDialog` namespace of `<UiKitProvider labels>`: the two buttons' fallback\n * text. A call that knows what it is confirming says so per call (`confirmLabel:\n * \"Delete budget\"`), which is what the dialog is for — these are for the rest.\n */\nexport interface ConfirmDialogLabels {\n confirm: string;\n cancel: string;\n /**\n * 0.18: label of the field a `requireTyped` confirm shows. A FUNCTION of the text to\n * type by default — where the address sits in the sentence moves with the language —\n * or a finished STRING. A call's own `typedLabel` wins over it.\n *\n * Required, like every key of a namespace: the shipped catalogues\n * (`@eifi1/ui-kit/i18n/<code>`) translate it, and an app's own full catalogue should\n * hear about the new string from the compiler rather than show it in English.\n */\n typed: string | ((text: string) => string);\n}\n\n/** `satisfies` rather than a type annotation, so `.typed` stays known-callable for a\n * caller composing its own label from it. */\nexport const DEFAULT_CONFIRM_DIALOG_LABELS = {\n confirm: \"Confirm\",\n cancel: \"Cancel\",\n typed: (text: string) => `Type “${text}” to confirm`,\n} satisfies ConfirmDialogLabels;\n\nexport type ConfirmTone = \"danger\" | \"warning\" | \"neutral\";\n\nexport interface ConfirmOptions {\n /** The question, and the dialog's accessible name. */\n title: ReactNode;\n /** The smaller line under it — the consequence. Wired to `aria-describedby`. */\n body?: ReactNode;\n /** Default: `confirmDialog.confirm` from the provider, else \"Confirm\". */\n confirmLabel?: ReactNode;\n /** Default: `confirmDialog.cancel` from the provider, else \"Cancel\". */\n cancelLabel?: ReactNode;\n /**\n * `\"danger\"` for what cannot be undone (a delete): the confirm is the destructive\n * button and focus starts on CANCEL. `\"warning\"` and `\"neutral\"` (default) start on\n * the confirm. See {@link ConfirmProvider} for why the two differ.\n */\n tone?: ConfirmTone;\n /**\n * 0.18: make the user TYPE this before confirm is enabled — the target account's\n * e-mail address, a budget's name. For the action whose risk is not \"did you mean\n * it\" but \"is this the right row\": an admin who deactivates somebody has already\n * proven who THEY are (they passed the admin gate); typing the address is what\n * proves they read which account they are on. Both keksdose (`TYPE_EMAIL`) and\n * Kurvenschmiede (`TypedConfirm`) built this beside `useConfirm` because it had no\n * field.\n *\n * The dialog then shows one text field under the body and focuses it (whatever the\n * tone: a reflexive Enter cannot confirm a field that does not match yet). Confirm\n * stays disabled until the text matches; Enter in the field confirms once it does.\n * The answer is still `true` / `false` — the text matched what you passed, so send\n * that to the server if it asks for the address too, not the user's spelling.\n */\n requireTyped?: string;\n /** Label of that field. Default: `confirmDialog.typed` — `Type “a@b.c” to confirm`. */\n typedLabel?: string;\n /**\n * How the typed text is compared. Default `\"caseless\"`: surrounding spaces and case\n * ignored, the rule both apps applied to an address. `\"trim\"` keeps case, `\"exact\"`\n * keeps spaces too — for a phrase like \"DELETE\" whose contract is \"exactly this\".\n */\n typedMatch?: TypedMatch;\n /**\n * 0.31.1: the confirm button COMMITS, as `Button`'s `commit` does. Under a locked\n * `WriteLockProvider` — read where `useConfirm` was called, not where the one dialog\n * host sits — it is `aria-disabled` with the lock's reason, so a read-only page (a\n * demo, a viewer's budget) can't confirm a delete through a dialog. One prop for the\n * many confirm sites an app has (kastlan's 0.31 adoption counted ~23).\n *\n * 0.33: a {@link CommitScope} — `confirm({ commit: COMMIT_EXCEPT_BILLING })` for a\n * confirm a lapsed plan still allows (removing access, the account's own settings;\n * docs/billing-harmonization.md §12.36).\n */\n commit?: CommitScope;\n}\n\nexport type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;\n\nconst ConfirmContext = createContext<ConfirmFn | null>(null);\n\n/**\n * `const confirm = useConfirm()` → `if (!(await confirm({ title }))) return`.\n *\n * The returned function is STABLE for the life of the provider, so it can sit in an\n * effect's or a `useCallback`'s dependency list without re-running it.\n *\n * Throws outside a {@link ConfirmProvider}, rather than falling back to\n * `window.confirm`: a silent fallback is exactly the native dialog the three apps are\n * migrating away from, and it would look like the migration had worked.\n */\nexport function useConfirm(): ConfirmFn {\n const confirm = useContext(ConfirmContext);\n if (!confirm) {\n throw new Error(\"useConfirm() must be called below a <ConfirmProvider>.\");\n }\n // The lock of the CALLER's place: the dialog host usually sits above the app's\n // `WriteLockProvider`, so it could not read the lock itself. Each call's own `commit`\n // scope is applied to it when the call runs (`writeLockFor`, §12.36).\n const lock = useWriteLock();\n return useCallback(\n (options: ConfirmOptions) => {\n const scoped = writeLockFor(lock, options.commit);\n return confirm(scoped.locked ? ({ ...options, lockReason: scoped.reason } as ConfirmOptions) : options);\n },\n [confirm, lock],\n );\n}\n\ninterface Request extends ConfirmOptions {\n id: number;\n resolve: (answer: boolean) => void;\n /** Set by {@link useConfirm} for a `commit` confirm under a locked provider. */\n lockReason?: ReactNode;\n}\n\nexport interface ConfirmProviderProps {\n children: ReactNode;\n}\n\n/**\n * The host for {@link useConfirm}: ONE confirm dialog for the whole app, rendered on\n * {@link DialogFrame}, answering a promise.\n *\n * Asked for by all three apps at once — keksdose has 20+ `window.confirm` calls,\n * kastlan 7, lenkbank 1. The native dialog cannot be translated past its OK/Cancel\n * (those are the BROWSER's language, not the app's), cannot say which button is the\n * destructive one, and on an installed PWA it prints the origin over the question.\n * A promise is what lets each of those call sites change by one `await`:\n *\n * if (!window.confirm(t(\"budget.delete_confirm\"))) return;\n * // becomes\n * if (!(await confirm({ title: t(\"budget.delete_confirm\"), tone: \"danger\" }))) return;\n *\n * ## Its own provider, not part of `UiKitProvider`\n *\n * `UiKitProvider` renders nothing: it is strings and a locale, it is optional, and it\n * NESTS (an inner one re-labels one table). A dialog host inside it would mount a host\n * per nested provider, and a component under the inner one would open a second dialog\n * layer of its own. So the host is its own component, mounted once — inside the\n * `UiKitProvider` whose strings it should speak, which is also the order the labels\n * need.\n *\n * ## Focus\n *\n * On CANCEL for `tone: \"danger\"`, on CONFIRM otherwise. A confirm is often answered by\n * a reflexive Enter — the key that pressed the Delete button in the first place may\n * still be down — and for an action that cannot be undone that reflex must land on the\n * harmless answer; `DangerConfirm` makes the same call (\"never to the destructive\n * button itself\"). For everything else the confirm is the expected answer and Enter\n * accepting it is what `window.confirm` taught users, which the migrating call sites'\n * users already rely on. Focus returns to whatever opened it, through `Modal`'s trap.\n *\n * ## Escape, the backdrop, Back and Cancel all answer `false`\n *\n * Only the confirm button answers `true`. Anything that merely dismisses is a no.\n *\n * ## A second `confirm` while one is open QUEUES\n *\n * It is shown when the first is answered, and each call gets its own answer. The\n * alternative — answering the open one `false` to make room — would answer a question\n * the user never answered: a background prompt (\"your session is about to expire\")\n * would cancel the delete they were reading. `false` has to mean \"the user said no\".\n * A double-click cannot queue two of the same: the first click opens the modal\n * synchronously (a discrete event's update is flushed before the next one), so the\n * second lands on the open dialog rather than on the button — at worst on its\n * backdrop, which answers `false`, the safe way to be wrong.\n *\n * Unmounting the provider answers everything still pending `false`, so no caller's\n * `await` hangs forever.\n *\n * ## keksdose's synchronous call (transaction-swipe-plan.ts)\n *\n * `buildTxSwipeActions` is synchronous, but its `window.confirm` sits inside the\n * action THUNK (`confirmed(key, run)` returns `() => { if (confirm(…)) run() }`), and a\n * thunk may be async without its caller knowing. So the plan builder stays\n * synchronous; it takes the confirm as an argument and the thunk awaits it:\n *\n * // mobile-transaction-list.tsx\n * const confirm = useConfirm();\n * buildTxSwipeActions({ tx, …, confirm });\n *\n * // transaction-swipe-plan.ts\n * const confirmed = (messageKey: string, run: () => void) => () => {\n * void confirm({ title: t(messageKey), tone: \"danger\" }).then((ok) => ok && run());\n * };\n *\n * Its test then passes `confirm: vi.fn(async () => false)` instead of stubbing the\n * global, and asserts after an `await` (the mutation now runs a microtask later). The\n * row snaps back when the swipe commits, before the answer — which is right: the\n * dialog, not the half-swiped row, is where the question now is.\n */\nexport function ConfirmProvider({ children }: ConfirmProviderProps) {\n const [queue, setQueue] = useState<Request[]>([]);\n const nextId = useRef(0);\n // Every unanswered request, including the ones not yet in state — the unmount\n // cleanup below must reach a request made in the same tick it unmounts.\n const pending = useRef(new Set<Request>());\n\n const confirm = useCallback<ConfirmFn>(\n (options) =>\n new Promise<boolean>((resolve) => {\n const request: Request = { ...options, id: ++nextId.current, resolve };\n pending.current.add(request);\n setQueue((q) => [...q, request]);\n }),\n [],\n );\n\n useEffect(() => {\n const open = pending.current;\n return () => {\n for (const r of open) r.resolve(false);\n open.clear();\n };\n }, []);\n\n const answer = useCallback((request: Request, value: boolean) => {\n if (!pending.current.delete(request)) return;\n request.resolve(value);\n setQueue((q) => q.filter((r) => r !== request));\n }, []);\n\n const current = queue[0];\n return (\n <ConfirmContext.Provider value={confirm}>\n {children}\n {current && (\n // Keyed per request, so a queued one gets a fresh Modal: the first one's trap\n // hands focus back to the page, and the next one's captures that as its own\n // restore target instead of a button that has just been unmounted.\n <ConfirmDialogView key={current.id} request={current} onAnswer={answer} />\n )}\n </ConfirmContext.Provider>\n );\n}\n\nfunction ConfirmDialogView({\n request,\n onAnswer,\n}: {\n request: Request;\n onAnswer: (request: Request, value: boolean) => void;\n}) {\n const labels = useKitLabels(\"confirmDialog\", DEFAULT_CONFIRM_DIALOG_LABELS);\n const tone = request.tone ?? \"neutral\";\n const confirmRef = useRef<HTMLButtonElement>(null);\n const cancelRef = useRef<HTMLButtonElement>(null);\n // Set by the confirm button, read once the panel has finished lowering. Everything\n // else that ends in `onClose` — Escape, the backdrop, Back, Cancel — leaves it false.\n const accepted = useRef(false);\n const typedRef = useRef<HTMLInputElement>(null);\n const [typed, setTyped] = useState(\"\");\n const target = request.requireTyped;\n const matches = target === undefined || typedMatches(typed, target, request.typedMatch ?? \"caseless\");\n\n // In THIS component's effect, which runs after `Modal`'s own (a parent's effects run\n // after its children's). `Modal` engages its focus trap on the panel first — and\n // records the page's focused element as the restore target — and only then does\n // focus move to the button. Focusing it from inside the panel would run first and\n // make the button the restore target. A typed confirm starts in its field: typing is\n // the one thing the dialog is waiting for.\n useEffect(() => {\n (target !== undefined ? typedRef : tone === \"danger\" ? cancelRef : confirmRef).current?.focus();\n }, [tone, target]);\n\n const typedLabel =\n target === undefined\n ? \"\"\n : (request.typedLabel ??\n (typeof labels.typed === \"string\" ? labels.typed : labels.typed(target)));\n\n return (\n <DialogFrame\n title={request.title}\n description={request.body}\n onClose={() => onAnswer(request, accepted.current)}\n // A confirmation interrupts to ask a question that must be answered.\n role=\"alertdialog\"\n data-confirm-tone={tone}\n actions={(close) => (\n <>\n <Button ref={cancelRef} type=\"button\" variant=\"ghost\" onClick={close}>\n {request.cancelLabel ?? labels.cancel}\n </Button>\n <Button\n ref={confirmRef}\n type=\"button\"\n variant={tone === \"danger\" ? \"danger\" : \"primary\"}\n disabled={!matches}\n disabledReason={request.lockReason}\n onClick={() => {\n accepted.current = true;\n close();\n }}\n >\n {request.confirmLabel ?? labels.confirm}\n </Button>\n </>\n )}\n >\n {/* The field, when there is one, is the body; a plain confirm keeps having none. */}\n {target !== undefined && (\n <form\n noValidate\n onSubmit={(e) => {\n e.preventDefault();\n // Through the button, so Enter and a click are one path — and a disabled\n // (not yet matching) confirm ignores the click.\n confirmRef.current?.click();\n }}\n >\n {/* The kit's one typed-confirmation field (0.23), DangerConfirm's too: the\n keyboard told to leave the text alone, `data-matched` on the input. The\n label is this namespace's (`confirmDialog.typed`), and `placeholder=\"\"`\n keeps out the `dangerConfirm.phrasePlaceholder` a provider may set for\n the tile — this field never had one. */}\n <TypedConfirmField\n ref={typedRef}\n target={target}\n match={request.typedMatch ?? \"caseless\"}\n label={typedLabel}\n placeholder=\"\"\n value={typed}\n onValueChange={setTyped}\n />\n </form>\n )}\n </DialogFrame>\n );\n}\n"],"mappings":"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","names":[]}
@@ -1,18 +1,23 @@
1
1
  import 'react';
2
- export { cf as CopyButton, cg as CopyButtonLabels, ch as CopyButtonProps, cv as DEFAULT_COPY_BUTTON_LABELS } from '../delete-account-setting-Dy4kJgUm.js';
2
+ export { cf as CopyButton, cg as CopyButtonLabels, ch as CopyButtonProps, cv as DEFAULT_COPY_BUTTON_LABELS } from '../delete-account-setting-DiPX4Vue.js';
3
3
  import './tooltip.js';
4
- import '../data-table-labels-kpAAVi6g.js';
4
+ import '../data-table-labels-BJ5JE_X2.js';
5
5
  import './data-table-sort.js';
6
6
  import './swipeable-row.js';
7
- import './mini-calendar.js';
8
- import './calendar-heatmap.js';
9
- import './popover.js';
10
- import '../hooks/use-breakpoint.js';
7
+ import './status-dot.js';
8
+ import './progress-bar.js';
9
+ import './signed-amount.js';
10
+ import './stat-tile.js';
11
11
  import './chip.js';
12
12
  import 'lucide-react';
13
13
  import './field-parts.js';
14
+ import './write-lock.js';
14
15
  import '../hooks/use-anchored-rect.js';
15
16
  import '../lib/clipping.js';
17
+ import './mini-calendar.js';
18
+ import './calendar-heatmap.js';
19
+ import './popover.js';
20
+ import '../hooks/use-breakpoint.js';
16
21
  import './field-sync.js';
17
22
  import '../wizard/types.js';
18
23
  import '../tour/tour.js';
@@ -24,7 +29,6 @@ import './page-contents.js';
24
29
  import './series-chart-labels.js';
25
30
  import './pie-chart-labels.js';
26
31
  import './sparkline.js';
27
- import './stat-tile.js';
28
32
  import './signature-pad.js';
29
33
  import './password-strength.js';
30
34
  import './swatch-picker.js';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
36
40
  import './measured-grid.js';
37
41
  import './user-avatar.js';
38
42
  import '../lib/person-name.js';
39
- import './status-dot.js';
40
- import './progress-bar.js';
41
- import './signed-amount.js';
42
43
  import '../shell/topbar-action-menu.js';
43
44
  import './menu-item.js';
44
45
  import './floating-panel.js';
@@ -54,7 +55,6 @@ import './error-boundary.js';
54
55
  import './authed-image.js';
55
56
  import './image-grid.js';
56
57
  import './lightbox.js';
57
- import './write-lock.js';
58
58
  import '../auth/sign-in-form.js';
59
59
  import '../landing/access.js';
60
60
  import '../landing/landing-labels.js';
@@ -1,5 +1,6 @@
1
1
  import * as react from 'react';
2
2
  import { ComponentPropsWithoutRef, Ref, ReactNode } from 'react';
3
+ import { CommitScope } from './write-lock.js';
3
4
 
4
5
  /** The words {@link CountrySelect} renders on its own behalf. The list's "no results",
5
6
  * "loading" and result-count announcements are the shared `combobox` namespace's,
@@ -116,7 +117,7 @@ interface CountrySelectProps<Clearable extends boolean = false> extends Omit<Com
116
117
  * reason. A country field inside a form that has its own Save stays editable under
117
118
  * the lock — leave this off there, and put `commit` on the Save.
118
119
  */
119
- commit?: boolean;
120
+ commit?: CommitScope;
120
121
  /** The language the names are in. Default: the `<UiKitProvider locale>`, else
121
122
  * English (see {@link countryName}). */
122
123
  locale?: string;
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/components/country-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { COUNTRY_CODES, countryName, normalizeCountryCode } from \"../lib/countries\";\nimport { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { CurrencyFlag } from \"./currency-select\";\nimport {\n ComboboxPanel,\n useComboboxCore,\n useComboboxFieldError,\n type ComboOption,\n} from \"./combobox-core\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason } from \"./write-lock\";\nimport {\n DEFAULT_COMBOBOX_LABELS,\n DEFAULT_COMMON_LABELS,\n useKitLabels,\n useKitLocale,\n} from \"../i18n/kit-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link CountrySelect} renders on its own behalf. The list's \"no results\",\n * \"loading\" and result-count announcements are the shared `combobox` namespace's,\n * as on every other searchable picker. */\nexport interface CountrySelectLabels {\n /** What the field is, when the caller gives no `label`: the first half of the\n * trigger's accessible name, the phone sheet's title, and the empty trigger's\n * text. */\n country: string;\n /** The search box in the open list. */\n search: string;\n /** The heading between the `preferred` countries and all the others. Shown only\n * when `preferred` puts something above it. */\n others: string;\n}\n\nexport const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels = {\n country: \"Country\",\n search: \"Search country\",\n others: \"Other countries\",\n};\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * `onChange` is the kit's — \"a country was picked\", carrying its code — rather than\n * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is\n * the control a reader meets; everything else in `rest` dresses the wrapper.\n *\n * `Clearable` follows `clearable`, the way {@link EntityCombobox}'s `C` follows its\n * `clearValue`: it is inferred from the prop, so `onChange` is `(code: string) => void`\n * for the field as it always was (`onChange={setCountry}` over a `string` state still\n * type-checks), and `(code: string | null) => void` once `clearable` is set — the\n * `null` of a clear cannot reach a handler that was never told about it.\n */\nexport interface CountrySelectProps<Clearable extends boolean = false>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\"> {\n /** The chosen country as an ISO 3166-1 alpha-2 code (\"CH\"), in either case;\n * `null`, `undefined` or `\"\"` when none is. A code outside the list still shows\n * its name — the list restricts what can be PICKED, not what can be shown. */\n value: string | null | undefined;\n /** A country was picked: its alpha-2 code, always upper-case. With `clearable`,\n * also `null`: the \"×\" (or Delete on the trigger) emptied the field. */\n onChange: (code: Clearable extends true ? string | null : string) => void;\n /**\n * Offer a clear \"×\" in place of the chevron while a country is chosen; it hands\n * `onChange` `null` (the kit's later list: an optional country — a contact's\n * nationality, a bank filter's \"any country\" — could be set but never unset again).\n *\n * The combobox family's clear, as {@link EntityCombobox} draws it: a pointer\n * shortcut inside the trigger, out of the tab order so it is not a second stop\n * between this field and the next, named by `clearLabel` (default: the\n * `combobox.clear` label every picker in the family shares). The keyboard way is\n * Delete or Backspace on the closed trigger. Not offered while `disabled` or locked\n * (`commit` / `disabledReason`): a clear is a change like any other.\n */\n clearable?: Clearable;\n /** The clear \"×\"'s accessible name. Wins over `combobox.clear` from the\n * {@link UiKitProvider}, as {@link EntityCombobox}'s `clearLabel` does. */\n clearLabel?: string;\n /**\n * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop,\n * the way {@link MoneyField} takes its input's (kastlan: react-hook-form's\n * focus-on-error calls `focus()` on whatever `field.ref` was handed, and without a\n * ref the first field in error on an address form was never focused). See\n * `RhfCountrySelect`, which passes it.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Offer only these codes (any case; duplicates and malformed entries dropped).\n * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either\n * way — the order given is not kept, because the reader looks a country up by its\n * name in their own language, and any other order is one they cannot predict.\n *\n * keksdose's bank picker offers the fifteen countries its banks are in\n * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list\n * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.\n */\n countries?: readonly string[];\n /**\n * A short group shown FIRST, in the order given, above the alphabetical rest —\n * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live\n * in, out of a list of 249. Each code appears once: a preferred country is not\n * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary\n * is visible. Search keeps the split: matching preferred countries stay on top.\n * Codes not in `countries` are ignored — `countries` decides what can be picked.\n */\n preferred?: readonly string[];\n /**\n * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on\n * the trigger. Default `false`, because the kit ships no flag stylesheet — the same\n * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports\n * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.\n */\n flags?: boolean;\n /** The floating label, as on every field. A string also names the trigger\n * (\"Country: Switzerland\"). */\n label?: ReactNode;\n /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached\n * through `aria-describedby`; a {@link FieldHint} rides the label line (or the\n * field's end, when there is no label). */\n hint?: ReactNode;\n /** As {@link Input}'s `error`: rendered under the field, on the trigger's\n * `aria-describedby`, and implies `invalid`. */\n error?: ReactNode;\n /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */\n invalid?: boolean;\n /** The empty trigger's text. Default: nothing when the field has a `label` or an\n * `aria-labelledby` (the label already says what goes here), else `labels.country`. */\n placeholder?: string;\n /** As on the other pickers: no focus, no list, the settled look. */\n disabled?: boolean;\n /**\n * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field\n * that saves itself. The trigger stays focusable and `aria-disabled`, the list does\n * not open and `onChange` never fires; the reason is in the kit {@link Tooltip} and\n * on the trigger's `aria-describedby`. Wins over `disabled`.\n */\n disabledReason?: ReactNode;\n /**\n * This select SAVES on change (a settings row with no Save button). Under a locked\n * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's\n * reason. A country field inside a form that has its own Save stays editable under\n * the lock — leave this off there, and put `commit` on the Save.\n */\n commit?: boolean;\n /** The language the names are in. Default: the `<UiKitProvider locale>`, else\n * English (see {@link countryName}). */\n locale?: string;\n /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's\n * `countrySelect` namespace, over English. */\n labels?: Partial<CountrySelectLabels>;\n /**\n * Name the trigger by an element of the caller's — a form's own label above the\n * field, which is how `RhfCountrySelect` names it. The trigger is then named by\n * that element AND the chosen country (two references, as {@link DatePicker}'s\n * trigger is named, so \"Country Switzerland\" needs no punctuation to translate),\n * instead of the composed \"label: country\". An `aria-label` still wins. Before\n * 0.23 this landed on the wrapper `<div>`, which has no role to be named.\n */\n \"aria-labelledby\"?: string;\n}\n\n/** Fold a name for search: no case, no accents — \"osterreich\" finds Österreich, \"cote\"\n * finds Côte d'Ivoire. A keyboard without the letter must still reach the country. */\nfunction fold(s: string): string {\n return s.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").toLowerCase();\n}\n\ninterface Entry {\n code: string;\n name: string;\n folded: string;\n}\n\n/** How well `e` answers `q` (already folded): the code itself (a two-letter query\n * \"ch\" means Switzerland before it means Chad), then the start of the name, then\n * anywhere in it. `-1` for no match. */\nfunction rank(e: Entry, q: string): number {\n if (e.code.toLowerCase() === q) return 0;\n if (e.folded.startsWith(q)) return 1;\n return e.folded.includes(q) ? 2 : -1;\n}\n\n/** Best rank first; a stable sort, so equal ranks keep the collated (or preferred)\n * order they came in. */\nfunction search(entries: Entry[], q: string): Entry[] {\n return entries\n .map((e) => ({ e, r: rank(e, q) }))\n .filter((x) => x.r >= 0)\n .sort((a, b) => a.r - b.r)\n .map((x) => x.e);\n}\n\nfunction toOption(e: Entry, flags: boolean, group?: string): ComboOption<string> {\n return {\n value: e.code,\n label: e.name,\n icon: flags ? <CurrencyFlag country={e.code.toLowerCase()} /> : undefined,\n group,\n };\n}\n\nfunction collator(locale: string): Intl.Collator {\n try {\n return new Intl.Collator(locale);\n } catch {\n return new Intl.Collator();\n }\n}\n\n/**\n * A country picker: the value is the ISO 3166-1 alpha-2 code (\"CH\"), the names are the\n * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that\n * locale's collation. Requested by kastlan (customer and handover addresses, with its\n * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both\n * apps carried a hand-written list of names in two languages.\n *\n * ## Built on the kit's searchable combobox\n *\n * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So\n * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which\n * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel\n * with a search box on a pointer device, the full-screen sheet with its own search box\n * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the\n * same group headings. Only the trigger is this component's own, because the trigger\n * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,\n * and a locked field has to stay focusable to say why.\n *\n * The search is this component's own too: it folds accents and case (\"osterreich\"\n * finds Österreich), matches the code (\"ch\" ranks Switzerland first), and ranks\n * name-starts above name-contains. The panel is handed those rows in place of the\n * core's plain substring filter.\n *\n * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the\n * trigger is named \"label: value\" as the other trigger pickers are.\n *\n * Since 0.23 it takes a `ref` to the trigger (react-hook-form's focus-on-error, kastlan)\n * and `clearable`, which hands `onChange` `null`.\n */\nexport function CountrySelect<Clearable extends boolean = false>({\n value,\n onChange,\n countries,\n preferred,\n flags = false,\n label,\n hint,\n error,\n invalid,\n placeholder,\n disabled,\n disabledReason: ownReason,\n commit,\n clearable,\n clearLabel,\n locale: localeProp,\n labels: labelsProp,\n className,\n id,\n ref,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-required\": ariaRequired,\n ...rest\n}: CountrySelectProps<Clearable>) {\n const text = useKitLabels(\"countrySelect\", DEFAULT_COUNTRY_SELECT_LABELS, labelsProp);\n const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n // The clear's name is the family's (`combobox.clear`), as on EntityCombobox; a prop\n // left `undefined` falls through to the provider rather than masking it.\n const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, { clear: clearLabel });\n // English without a locale — see `countryName`.\n const locale = useKitLocale(localeProp) ?? \"en\";\n\n // ── The list ──────────────────────────────────────────────────────────────\n // Keyed on the arrays' CONTENTS: `countries={[\"DE\", \"AT\"]}` written inline is a new\n // array every render, and resorting 249 names on every keystroke elsewhere in the\n // form is work for nothing.\n const countriesKey = countries?.join(\",\");\n const preferredKey = preferred?.join(\",\");\n const { top, rest: others } = useMemo(() => {\n const seen = new Set<string>();\n const pool: string[] = [];\n for (const raw of countriesKey !== undefined ? countriesKey.split(\",\") : COUNTRY_CODES) {\n const code = normalizeCountryCode(raw);\n if (code && !seen.has(code)) {\n seen.add(code);\n pool.push(code);\n }\n }\n const entry = (code: string): Entry => {\n const name = countryName(code, locale);\n return { code, name, folded: fold(name) };\n };\n const firsts: Entry[] = [];\n const picked = new Set<string>();\n for (const raw of preferredKey ? preferredKey.split(\",\") : []) {\n const code = normalizeCountryCode(raw);\n if (code && seen.has(code) && !picked.has(code)) {\n picked.add(code);\n firsts.push(entry(code));\n }\n }\n const compare = collator(locale).compare;\n const sorted = pool\n .filter((c) => !picked.has(c))\n .map(entry)\n .sort((a, b) => compare(a.name, b.name));\n return { top: firsts, rest: sorted };\n }, [countriesKey, preferredKey, locale]);\n\n // `filter: false` — the panel is handed the rows `search` ranks below instead of\n // the core's substring filter; the core still owns open, query, the highlighted row,\n // anchoring and dismissal.\n const allOptions = useMemo(\n () => [...top, ...others].map((e) => toOption(e, flags)),\n [top, others, flags],\n );\n const core = useComboboxCore<string>({ options: allOptions, filter: false });\n const { open, setOpen, query, triggerRef, closeToTrigger } = core;\n // The core anchors the panel to the trigger and hands focus back to it; the caller's\n // `ref` wants the same element. One callback feeds both.\n const setTrigger = useCallback(\n (el: HTMLButtonElement | null) => {\n triggerRef.current = el;\n assignRef(ref, el);\n },\n [ref, triggerRef],\n );\n\n const q = fold(query.trim());\n const results = useMemo(() => {\n const firsts = q ? search(top, q) : top;\n const below = q ? search(others, q) : others;\n // The heading only where it separates something: with no preferred country in\n // view it would head the whole list and divide nothing.\n const heading = firsts.length > 0 ? text.others : undefined;\n return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];\n }, [top, others, q, text.others, flags]);\n\n // ── The lock ──────────────────────────────────────────────────────────────\n const reason = useCommitReason(commit, ownReason);\n const locked = hasMessage(reason);\n const inert = locked || Boolean(disabled);\n // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n // rendering, as the core adjusts its own query, so no frame shows a list that can\n // no longer be used.\n if (inert && open) setOpen(false);\n\n // ── The field ─────────────────────────────────────────────────────────────\n const generated = useId();\n const triggerId = id ?? generated;\n const listboxId = `${generated}-listbox`;\n const hintId = useId();\n const reasonId = useId();\n // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n const field = useComboboxFieldError(\n error,\n invalid || ariaInvalid === true || ariaInvalid === \"true\",\n // The caller's, then the standing advice, then (inside) the error — the order every\n // field keeps — and the lock's reason last, while there is one.\n mergeDescribedBy(ariaDescribedBy, textHint && hintId),\n );\n\n const code = normalizeCountryCode(value);\n const selectedName = code ? countryName(code, locale) : undefined;\n // A field named by a label of the caller's (`aria-labelledby`) is a labelled field too:\n // the label already says what goes here.\n const emptyText = placeholder ?? (label === undefined && !ariaLabelledBy ? text.country : \"\");\n const fieldName = typeof label === \"string\" ? label : text.country;\n const valueId = `${generated}-value`;\n // Named by the caller's element (a form's label) — then the shown text is the second\n // reference, as the composed name below has the value second; but only when it IS a\n // value or the caller's placeholder, never the `country` fallback word.\n const labelledBy =\n ariaLabel === undefined && ariaLabelledBy\n ? mergeDescribedBy(ariaLabelledBy, (selectedName !== undefined || Boolean(placeholder)) && valueId)\n : undefined;\n const name =\n labelledBy !== undefined\n ? undefined\n : (ariaLabel ??\n (selectedName !== undefined\n ? common.fieldValue(fieldName, selectedName)\n : placeholder\n ? common.fieldValue(fieldName, placeholder)\n : fieldName));\n\n const showClear = Boolean(clearable && code && !inert);\n // `onChange` widened to take the clear's `null` — its type says so once `clearable`\n // is set, and the clear is only ever offered then.\n const emit = onChange as (code: string | null) => void;\n const clear = () => {\n if (!showClear) return;\n emit(null);\n };\n\n const choose = (o: ComboOption<string>) => {\n if (inert) return;\n emit(o.value);\n // Back to the trigger: the panel holding focus is about to unmount, and a keyboard\n // user who has answered this field should stand on it, ready to Tab on.\n closeToTrigger();\n };\n\n const trigger = (\n <button\n ref={setTrigger}\n id={triggerId}\n type=\"button\"\n // A closed choice that expands into the list below — the role every trigger\n // picker in the kit wears (see EntityCombobox), and the one that supports\n // `aria-invalid`.\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-controls={listboxId}\n aria-expanded={open}\n aria-label={name}\n aria-labelledby={labelledBy}\n aria-invalid={field.isInvalid || undefined}\n aria-required={ariaRequired}\n aria-describedby={mergeDescribedBy(field.describedBy, locked && reasonId)}\n // The focusable kind of disabled while locked (Button's rule): native `disabled`\n // would take the field out of the tab order, and the reason with it.\n disabled={locked ? undefined : disabled}\n aria-disabled={locked || undefined}\n onClick={(e) => {\n if (inert) {\n e.preventDefault();\n return;\n }\n setOpen((o) => !o);\n }}\n // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n // already do through the button's own click.\n onKeyDown={(e) => {\n if (inert) return;\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n setOpen(true);\n } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n // The keyboard's clear: the \"×\" is out of the tab order (see `clearable`).\n e.preventDefault();\n clear();\n }\n }}\n className={cn(\n FIELD_TRIGGER,\n // `peer` dims the floating label with a natively disabled trigger, as Select's.\n \"peer pe-9\",\n label !== undefined && FIELD_FLOATING_PAD,\n inert && \"cursor-not-allowed opacity-50\",\n field.isInvalid && FIELD_INVALID,\n )}\n >\n <span className=\"flex min-w-0 items-center gap-2\">\n {flags && code && <CurrencyFlag country={code.toLowerCase()} />}\n {/* A long name (\"Saint Vincent and the Grenadines\") truncates rather than\n widening the field: the kit is checked at 390px. */}\n <span\n id={valueId}\n className={cn(\"truncate\", selectedName === undefined && \"text-[var(--text-placeholder)]\")}\n >\n {selectedName ?? emptyText}\n </span>\n </span>\n {showClear ? (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n the trigger <button>, so it never holds focus and a key handler here could never\n fire; the keys go to the trigger, where Delete and Backspace clear. A pointer\n shortcut, as on EntityCombobox. */\n <span\n role=\"button\"\n tabIndex={-1}\n aria-label={comboText.clear}\n onClick={(e) => {\n e.stopPropagation();\n clear();\n }}\n className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n >\n <X aria-hidden className=\"size-4\" />\n </span>\n ) : (\n <FieldChevron />\n )}\n </button>\n );\n\n const control = locked ? (\n // In a FRAGMENT, as Button does, so the Tooltip does not clone its bubble into the\n // description as well — the hidden copy is what `aria-describedby` points at.\n <Tooltip label={reason} className=\"flex w-full\">\n <>\n {trigger}\n <span id={reasonId} hidden>\n {reason}\n </span>\n </>\n </Tooltip>\n ) : (\n trigger\n );\n\n const labelHint = textHint ? undefined : hasMessage(hint) ? hint : undefined;\n const box =\n label !== undefined ? (\n <FloatingField htmlFor={triggerId} label={label} staticLabel hint={labelHint}>\n {control}\n </FloatingField>\n ) : labelHint !== undefined ? (\n // No label line to ride: the \"?\" goes at the field's end, outside the box, as on\n // an unlabelled Select.\n <div className=\"flex items-center gap-1.5\">\n <div className=\"relative min-w-0 flex-1\">{control}</div>\n <span className=\"flex shrink-0 items-center\">{labelHint}</span>\n </div>\n ) : (\n <div className=\"relative\">{control}</div>\n );\n\n return (\n // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the\n // description and the invalid state are on the trigger above.\n <div {...rest} className={className}>\n {box}\n {textHint && (\n <p id={hintId} className=\"mt-1 text-caption leading-tight text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {field.errorEl}\n <ComboboxPanel\n // The core with the rows ranked above in place of its own filter's.\n core={{ ...core, results }}\n listboxId={listboxId}\n // On a phone the list is a full-screen sheet, which needs the field's own\n // name to say what it is asking for (live #200).\n sheetTitle={label ?? text.country}\n searchPlaceholder={text.search}\n isSelected={(v) => v === code}\n onChoose={choose}\n showCreate={false}\n onCreate={() => {}}\n createContent={null}\n />\n </div>\n );\n}\n"],"mappings":"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","names":["code","name"]}
1
+ {"version":3,"sources":["../../src/components/country-select.tsx"],"sourcesContent":["import { useCallback, useId, useMemo } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { COUNTRY_CODES, countryName, normalizeCountryCode } from \"../lib/countries\";\nimport { FieldChevron, FIELD_FLOATING_PAD, FIELD_INVALID, FIELD_TRIGGER, FloatingField } from \"./ui\";\nimport { Tooltip } from \"./tooltip\";\nimport { CurrencyFlag } from \"./currency-select\";\nimport {\n ComboboxPanel,\n useComboboxCore,\n useComboboxFieldError,\n type ComboOption,\n} from \"./combobox-core\";\nimport { assignRef, hasMessage, mergeDescribedBy } from \"./choice-parts\";\nimport { useCommitReason, type CommitScope } from \"./write-lock\";\nimport {\n DEFAULT_COMBOBOX_LABELS,\n DEFAULT_COMMON_LABELS,\n useKitLabels,\n useKitLocale,\n} from \"../i18n/kit-labels\";\n\n// ── Labels ────────────────────────────────────────────────────────────────────\n\n/** The words {@link CountrySelect} renders on its own behalf. The list's \"no results\",\n * \"loading\" and result-count announcements are the shared `combobox` namespace's,\n * as on every other searchable picker. */\nexport interface CountrySelectLabels {\n /** What the field is, when the caller gives no `label`: the first half of the\n * trigger's accessible name, the phone sheet's title, and the empty trigger's\n * text. */\n country: string;\n /** The search box in the open list. */\n search: string;\n /** The heading between the `preferred` countries and all the others. Shown only\n * when `preferred` puts something above it. */\n others: string;\n}\n\nexport const DEFAULT_COUNTRY_SELECT_LABELS: CountrySelectLabels = {\n country: \"Country\",\n search: \"Search country\",\n others: \"Other countries\",\n};\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * `onChange` is the kit's — \"a country was picked\", carrying its code — rather than\n * the div's form event. `id` and the `aria-*` wiring below go to the TRIGGER, which is\n * the control a reader meets; everything else in `rest` dresses the wrapper.\n *\n * `Clearable` follows `clearable`, the way {@link EntityCombobox}'s `C` follows its\n * `clearValue`: it is inferred from the prop, so `onChange` is `(code: string) => void`\n * for the field as it always was (`onChange={setCountry}` over a `string` state still\n * type-checks), and `(code: string | null) => void` once `clearable` is set — the\n * `null` of a clear cannot reach a handler that was never told about it.\n */\nexport interface CountrySelectProps<Clearable extends boolean = false>\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\" | \"defaultValue\"> {\n /** The chosen country as an ISO 3166-1 alpha-2 code (\"CH\"), in either case;\n * `null`, `undefined` or `\"\"` when none is. A code outside the list still shows\n * its name — the list restricts what can be PICKED, not what can be shown. */\n value: string | null | undefined;\n /** A country was picked: its alpha-2 code, always upper-case. With `clearable`,\n * also `null`: the \"×\" (or Delete on the trigger) emptied the field. */\n onChange: (code: Clearable extends true ? string | null : string) => void;\n /**\n * Offer a clear \"×\" in place of the chevron while a country is chosen; it hands\n * `onChange` `null` (the kit's later list: an optional country — a contact's\n * nationality, a bank filter's \"any country\" — could be set but never unset again).\n *\n * The combobox family's clear, as {@link EntityCombobox} draws it: a pointer\n * shortcut inside the trigger, out of the tab order so it is not a second stop\n * between this field and the next, named by `clearLabel` (default: the\n * `combobox.clear` label every picker in the family shares). The keyboard way is\n * Delete or Backspace on the closed trigger. Not offered while `disabled` or locked\n * (`commit` / `disabledReason`): a clear is a change like any other.\n */\n clearable?: Clearable;\n /** The clear \"×\"'s accessible name. Wins over `combobox.clear` from the\n * {@link UiKitProvider}, as {@link EntityCombobox}'s `clearLabel` does. */\n clearLabel?: string;\n /**\n * The TRIGGER — the focusable `<button>` a reader meets — as a React 19 ref prop,\n * the way {@link MoneyField} takes its input's (kastlan: react-hook-form's\n * focus-on-error calls `focus()` on whatever `field.ref` was handed, and without a\n * ref the first field in error on an address form was never focused). See\n * `RhfCountrySelect`, which passes it.\n */\n ref?: Ref<HTMLButtonElement>;\n /**\n * Offer only these codes (any case; duplicates and malformed entries dropped).\n * Default: every ISO 3166-1 country, {@link COUNTRY_CODES}. Sorted by name either\n * way — the order given is not kept, because the reader looks a country up by its\n * name in their own language, and any other order is one they cannot predict.\n *\n * keksdose's bank picker offers the fifteen countries its banks are in\n * (DE AT CH FR IT ES NL BE PT PL SE DK FI GB IE). A code that is not in ISO's list\n * is allowed here on purpose: `XK` (Kosovo) is the app's decision, not the kit's.\n */\n countries?: readonly string[];\n /**\n * A short group shown FIRST, in the order given, above the alphabetical rest —\n * kastlan's CH, LI, DE, AT, FR, IT, the six countries most of its customers live\n * in, out of a list of 249. Each code appears once: a preferred country is not\n * repeated in the rest. The rest gets a heading (`labels.others`) so the boundary\n * is visible. Search keeps the split: matching preferred countries stay on top.\n * Codes not in `countries` are ignored — `countries` decides what can be picked.\n */\n preferred?: readonly string[];\n /**\n * Draw each country's flag as a flag-icons span (`fi fi-ch`), in the rows and on\n * the trigger. Default `false`, because the kit ships no flag stylesheet — the same\n * convention as `LanguageMenu`'s `country` and `CurrencySelect`: the host imports\n * `flag-icons/css/flag-icons.min.css`, and without it a flag is an empty box.\n */\n flags?: boolean;\n /** The floating label, as on every field. A string also names the trigger\n * (\"Country: Switzerland\"). */\n label?: ReactNode;\n /** As {@link Select}'s `hint`: plain TEXT is a caption under the field, attached\n * through `aria-describedby`; a {@link FieldHint} rides the label line (or the\n * field's end, when there is no label). */\n hint?: ReactNode;\n /** As {@link Input}'s `error`: rendered under the field, on the trigger's\n * `aria-describedby`, and implies `invalid`. */\n error?: ReactNode;\n /** Required and unanswered — {@link FIELD_INVALID}, as on every field. */\n invalid?: boolean;\n /** The empty trigger's text. Default: nothing when the field has a `label` or an\n * `aria-labelledby` (the label already says what goes here), else `labels.country`. */\n placeholder?: string;\n /** As on the other pickers: no focus, no list, the settled look. */\n disabled?: boolean;\n /**\n * Why the country cannot be changed — {@link Button}'s `disabledReason`, for a field\n * that saves itself. The trigger stays focusable and `aria-disabled`, the list does\n * not open and `onChange` never fires; the reason is in the kit {@link Tooltip} and\n * on the trigger's `aria-describedby`. Wins over `disabled`.\n */\n disabledReason?: ReactNode;\n /**\n * This select SAVES on change (a settings row with no Save button). Under a locked\n * {@link WriteLockProvider} it is locked the `disabledReason` way, with the lock's\n * reason. A country field inside a form that has its own Save stays editable under\n * the lock — leave this off there, and put `commit` on the Save.\n */\n commit?: CommitScope;\n /** The language the names are in. Default: the `<UiKitProvider locale>`, else\n * English (see {@link countryName}). */\n locale?: string;\n /** Per-instance overrides of {@link CountrySelectLabels}, over the provider's\n * `countrySelect` namespace, over English. */\n labels?: Partial<CountrySelectLabels>;\n /**\n * Name the trigger by an element of the caller's — a form's own label above the\n * field, which is how `RhfCountrySelect` names it. The trigger is then named by\n * that element AND the chosen country (two references, as {@link DatePicker}'s\n * trigger is named, so \"Country Switzerland\" needs no punctuation to translate),\n * instead of the composed \"label: country\". An `aria-label` still wins. Before\n * 0.23 this landed on the wrapper `<div>`, which has no role to be named.\n */\n \"aria-labelledby\"?: string;\n}\n\n/** Fold a name for search: no case, no accents — \"osterreich\" finds Österreich, \"cote\"\n * finds Côte d'Ivoire. A keyboard without the letter must still reach the country. */\nfunction fold(s: string): string {\n return s.normalize(\"NFD\").replace(/\\p{M}/gu, \"\").toLowerCase();\n}\n\ninterface Entry {\n code: string;\n name: string;\n folded: string;\n}\n\n/** How well `e` answers `q` (already folded): the code itself (a two-letter query\n * \"ch\" means Switzerland before it means Chad), then the start of the name, then\n * anywhere in it. `-1` for no match. */\nfunction rank(e: Entry, q: string): number {\n if (e.code.toLowerCase() === q) return 0;\n if (e.folded.startsWith(q)) return 1;\n return e.folded.includes(q) ? 2 : -1;\n}\n\n/** Best rank first; a stable sort, so equal ranks keep the collated (or preferred)\n * order they came in. */\nfunction search(entries: Entry[], q: string): Entry[] {\n return entries\n .map((e) => ({ e, r: rank(e, q) }))\n .filter((x) => x.r >= 0)\n .sort((a, b) => a.r - b.r)\n .map((x) => x.e);\n}\n\nfunction toOption(e: Entry, flags: boolean, group?: string): ComboOption<string> {\n return {\n value: e.code,\n label: e.name,\n icon: flags ? <CurrencyFlag country={e.code.toLowerCase()} /> : undefined,\n group,\n };\n}\n\nfunction collator(locale: string): Intl.Collator {\n try {\n return new Intl.Collator(locale);\n } catch {\n return new Intl.Collator();\n }\n}\n\n/**\n * A country picker: the value is the ISO 3166-1 alpha-2 code (\"CH\"), the names are the\n * runtime's own (`Intl.DisplayNames`) in the provider's locale, sorted by that\n * locale's collation. Requested by kastlan (customer and handover addresses, with its\n * six neighbours on top) and keksdose (the bank picker's fifteen countries) — both\n * apps carried a hand-written list of names in two languages.\n *\n * ## Built on the kit's searchable combobox\n *\n * 249 countries is not a menu, it is a lookup, and the list has to work on a phone. So\n * this is the entity pickers' machinery — `useComboboxCore` and `ComboboxPanel`, which\n * {@link EntityCombobox} is also made of — not a native `<select>`: the anchored panel\n * with a search box on a pointer device, the full-screen sheet with its own search box\n * on a phone (live #200), the same keyboard (APG listbox), the same announcements, the\n * same group headings. Only the trigger is this component's own, because the trigger\n * is where the write lock lives: `EntityCombobox`'s is a native `disabled` button,\n * and a locked field has to stay focusable to say why.\n *\n * The search is this component's own too: it folds accents and case (\"osterreich\"\n * finds Österreich), matches the code (\"ch\" ranks Switzerland first), and ranks\n * name-starts above name-contains. The panel is handed those rows in place of the\n * core's plain substring filter.\n *\n * Field anatomy as on every field: floating `label`, `hint`, `error`, `invalid`; the\n * trigger is named \"label: value\" as the other trigger pickers are.\n *\n * Since 0.23 it takes a `ref` to the trigger (react-hook-form's focus-on-error, kastlan)\n * and `clearable`, which hands `onChange` `null`.\n */\nexport function CountrySelect<Clearable extends boolean = false>({\n value,\n onChange,\n countries,\n preferred,\n flags = false,\n label,\n hint,\n error,\n invalid,\n placeholder,\n disabled,\n disabledReason: ownReason,\n commit,\n clearable,\n clearLabel,\n locale: localeProp,\n labels: labelsProp,\n className,\n id,\n ref,\n \"aria-label\": ariaLabel,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n \"aria-required\": ariaRequired,\n ...rest\n}: CountrySelectProps<Clearable>) {\n const text = useKitLabels(\"countrySelect\", DEFAULT_COUNTRY_SELECT_LABELS, labelsProp);\n const common = useKitLabels(\"common\", DEFAULT_COMMON_LABELS);\n // The clear's name is the family's (`combobox.clear`), as on EntityCombobox; a prop\n // left `undefined` falls through to the provider rather than masking it.\n const comboText = useKitLabels(\"combobox\", DEFAULT_COMBOBOX_LABELS, { clear: clearLabel });\n // English without a locale — see `countryName`.\n const locale = useKitLocale(localeProp) ?? \"en\";\n\n // ── The list ──────────────────────────────────────────────────────────────\n // Keyed on the arrays' CONTENTS: `countries={[\"DE\", \"AT\"]}` written inline is a new\n // array every render, and resorting 249 names on every keystroke elsewhere in the\n // form is work for nothing.\n const countriesKey = countries?.join(\",\");\n const preferredKey = preferred?.join(\",\");\n const { top, rest: others } = useMemo(() => {\n const seen = new Set<string>();\n const pool: string[] = [];\n for (const raw of countriesKey !== undefined ? countriesKey.split(\",\") : COUNTRY_CODES) {\n const code = normalizeCountryCode(raw);\n if (code && !seen.has(code)) {\n seen.add(code);\n pool.push(code);\n }\n }\n const entry = (code: string): Entry => {\n const name = countryName(code, locale);\n return { code, name, folded: fold(name) };\n };\n const firsts: Entry[] = [];\n const picked = new Set<string>();\n for (const raw of preferredKey ? preferredKey.split(\",\") : []) {\n const code = normalizeCountryCode(raw);\n if (code && seen.has(code) && !picked.has(code)) {\n picked.add(code);\n firsts.push(entry(code));\n }\n }\n const compare = collator(locale).compare;\n const sorted = pool\n .filter((c) => !picked.has(c))\n .map(entry)\n .sort((a, b) => compare(a.name, b.name));\n return { top: firsts, rest: sorted };\n }, [countriesKey, preferredKey, locale]);\n\n // `filter: false` — the panel is handed the rows `search` ranks below instead of\n // the core's substring filter; the core still owns open, query, the highlighted row,\n // anchoring and dismissal.\n const allOptions = useMemo(\n () => [...top, ...others].map((e) => toOption(e, flags)),\n [top, others, flags],\n );\n const core = useComboboxCore<string>({ options: allOptions, filter: false });\n const { open, setOpen, query, triggerRef, closeToTrigger } = core;\n // The core anchors the panel to the trigger and hands focus back to it; the caller's\n // `ref` wants the same element. One callback feeds both.\n const setTrigger = useCallback(\n (el: HTMLButtonElement | null) => {\n triggerRef.current = el;\n assignRef(ref, el);\n },\n [ref, triggerRef],\n );\n\n const q = fold(query.trim());\n const results = useMemo(() => {\n const firsts = q ? search(top, q) : top;\n const below = q ? search(others, q) : others;\n // The heading only where it separates something: with no preferred country in\n // view it would head the whole list and divide nothing.\n const heading = firsts.length > 0 ? text.others : undefined;\n return [...firsts.map((e) => toOption(e, flags)), ...below.map((e) => toOption(e, flags, heading))];\n }, [top, others, q, text.others, flags]);\n\n // ── The lock ──────────────────────────────────────────────────────────────\n const reason = useCommitReason(commit, ownReason);\n const locked = hasMessage(reason);\n const inert = locked || Boolean(disabled);\n // A lock (or `disabled`) arriving while the list is up closes it — adjusted while\n // rendering, as the core adjusts its own query, so no frame shows a list that can\n // no longer be used.\n if (inert && open) setOpen(false);\n\n // ── The field ─────────────────────────────────────────────────────────────\n const generated = useId();\n const triggerId = id ?? generated;\n const listboxId = `${generated}-listbox`;\n const hintId = useId();\n const reasonId = useId();\n // Text is a caption under the field; a FieldHint rides the label line. See `hint`.\n const textHint = (typeof hint === \"string\" && hint !== \"\") || typeof hint === \"number\";\n const field = useComboboxFieldError(\n error,\n invalid || ariaInvalid === true || ariaInvalid === \"true\",\n // The caller's, then the standing advice, then (inside) the error — the order every\n // field keeps — and the lock's reason last, while there is one.\n mergeDescribedBy(ariaDescribedBy, textHint && hintId),\n );\n\n const code = normalizeCountryCode(value);\n const selectedName = code ? countryName(code, locale) : undefined;\n // A field named by a label of the caller's (`aria-labelledby`) is a labelled field too:\n // the label already says what goes here.\n const emptyText = placeholder ?? (label === undefined && !ariaLabelledBy ? text.country : \"\");\n const fieldName = typeof label === \"string\" ? label : text.country;\n const valueId = `${generated}-value`;\n // Named by the caller's element (a form's label) — then the shown text is the second\n // reference, as the composed name below has the value second; but only when it IS a\n // value or the caller's placeholder, never the `country` fallback word.\n const labelledBy =\n ariaLabel === undefined && ariaLabelledBy\n ? mergeDescribedBy(ariaLabelledBy, (selectedName !== undefined || Boolean(placeholder)) && valueId)\n : undefined;\n const name =\n labelledBy !== undefined\n ? undefined\n : (ariaLabel ??\n (selectedName !== undefined\n ? common.fieldValue(fieldName, selectedName)\n : placeholder\n ? common.fieldValue(fieldName, placeholder)\n : fieldName));\n\n const showClear = Boolean(clearable && code && !inert);\n // `onChange` widened to take the clear's `null` — its type says so once `clearable`\n // is set, and the clear is only ever offered then.\n const emit = onChange as (code: string | null) => void;\n const clear = () => {\n if (!showClear) return;\n emit(null);\n };\n\n const choose = (o: ComboOption<string>) => {\n if (inert) return;\n emit(o.value);\n // Back to the trigger: the panel holding focus is about to unmount, and a keyboard\n // user who has answered this field should stand on it, ready to Tab on.\n closeToTrigger();\n };\n\n const trigger = (\n <button\n ref={setTrigger}\n id={triggerId}\n type=\"button\"\n // A closed choice that expands into the list below — the role every trigger\n // picker in the kit wears (see EntityCombobox), and the one that supports\n // `aria-invalid`.\n role=\"combobox\"\n aria-haspopup=\"listbox\"\n aria-controls={listboxId}\n aria-expanded={open}\n aria-label={name}\n aria-labelledby={labelledBy}\n aria-invalid={field.isInvalid || undefined}\n aria-required={ariaRequired}\n aria-describedby={mergeDescribedBy(field.describedBy, locked && reasonId)}\n // The focusable kind of disabled while locked (Button's rule): native `disabled`\n // would take the field out of the tab order, and the reason with it.\n disabled={locked ? undefined : disabled}\n aria-disabled={locked || undefined}\n onClick={(e) => {\n if (inert) {\n e.preventDefault();\n return;\n }\n setOpen((o) => !o);\n }}\n // Down/Up opens the list from the closed trigger, per the APG; Enter and Space\n // already do through the button's own click.\n onKeyDown={(e) => {\n if (inert) return;\n if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\") {\n e.preventDefault();\n setOpen(true);\n } else if (showClear && !open && (e.key === \"Delete\" || e.key === \"Backspace\")) {\n // The keyboard's clear: the \"×\" is out of the tab order (see `clearable`).\n e.preventDefault();\n clear();\n }\n }}\n className={cn(\n FIELD_TRIGGER,\n // `peer` dims the floating label with a natively disabled trigger, as Select's.\n \"peer pe-9\",\n label !== undefined && FIELD_FLOATING_PAD,\n inert && \"cursor-not-allowed opacity-50\",\n field.isInvalid && FIELD_INVALID,\n )}\n >\n <span className=\"flex min-w-0 items-center gap-2\">\n {flags && code && <CurrencyFlag country={code.toLowerCase()} />}\n {/* A long name (\"Saint Vincent and the Grenadines\") truncates rather than\n widening the field: the kit is checked at 390px. */}\n <span\n id={valueId}\n className={cn(\"truncate\", selectedName === undefined && \"text-[var(--text-placeholder)]\")}\n >\n {selectedName ?? emptyText}\n </span>\n </span>\n {showClear ? (\n /* eslint-disable-next-line jsx-a11y/click-events-have-key-events -- tabIndex -1 inside\n the trigger <button>, so it never holds focus and a key handler here could never\n fire; the keys go to the trigger, where Delete and Backspace clear. A pointer\n shortcut, as on EntityCombobox. */\n <span\n role=\"button\"\n tabIndex={-1}\n aria-label={comboText.clear}\n onClick={(e) => {\n e.stopPropagation();\n clear();\n }}\n className=\"absolute end-2 top-1/2 -translate-y-1/2 rounded p-0.5 text-[var(--text-placeholder)] hover:text-[var(--text-secondary)]\"\n >\n <X aria-hidden className=\"size-4\" />\n </span>\n ) : (\n <FieldChevron />\n )}\n </button>\n );\n\n const control = locked ? (\n // In a FRAGMENT, as Button does, so the Tooltip does not clone its bubble into the\n // description as well — the hidden copy is what `aria-describedby` points at.\n <Tooltip label={reason} className=\"flex w-full\">\n <>\n {trigger}\n <span id={reasonId} hidden>\n {reason}\n </span>\n </>\n </Tooltip>\n ) : (\n trigger\n );\n\n const labelHint = textHint ? undefined : hasMessage(hint) ? hint : undefined;\n const box =\n label !== undefined ? (\n <FloatingField htmlFor={triggerId} label={label} staticLabel hint={labelHint}>\n {control}\n </FloatingField>\n ) : labelHint !== undefined ? (\n // No label line to ride: the \"?\" goes at the field's end, outside the box, as on\n // an unlabelled Select.\n <div className=\"flex items-center gap-1.5\">\n <div className=\"relative min-w-0 flex-1\">{control}</div>\n <span className=\"flex shrink-0 items-center\">{labelHint}</span>\n </div>\n ) : (\n <div className=\"relative\">{control}</div>\n );\n\n return (\n // `rest` dresses the wrapper — a `data-tour` anchor, a test id. The name, the\n // description and the invalid state are on the trigger above.\n <div {...rest} className={className}>\n {box}\n {textHint && (\n <p id={hintId} className=\"mt-1 text-caption leading-tight text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {field.errorEl}\n <ComboboxPanel\n // The core with the rows ranked above in place of its own filter's.\n core={{ ...core, results }}\n listboxId={listboxId}\n // On a phone the list is a full-screen sheet, which needs the field's own\n // name to say what it is asking for (live #200).\n sheetTitle={label ?? text.country}\n searchPlaceholder={text.search}\n isSelected={(v) => v === code}\n onChoose={choose}\n showCreate={false}\n onCreate={() => {}}\n createContent={null}\n />\n </div>\n );\n}\n"],"mappings":"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","names":["code","name"]}
@@ -1,18 +1,23 @@
1
1
  import 'react';
2
- export { cj as CurrentPasswordInput, ck as CurrentPasswordInputLabels, cl as CurrentPasswordInputProps, cx as DEFAULT_DANGER_CONFIRM_LABELS, cV as DangerConfirm, cW as DangerConfirmLabels, cX as DangerConfirmProps, cY as DangerConfirmValues, cZ as DangerConsequence, fr as TypedConfirmField, fs as TypedConfirmFieldLabels, ft as TypedConfirmFieldProps, fu as TypedMatch, f_ as typedMatches, gt as usePromisePending } from '../delete-account-setting-Dy4kJgUm.js';
2
+ export { cj as CurrentPasswordInput, ck as CurrentPasswordInputLabels, cl as CurrentPasswordInputProps, cx as DEFAULT_DANGER_CONFIRM_LABELS, cW as DangerConfirm, cX as DangerConfirmLabels, cY as DangerConfirmProps, cZ as DangerConfirmValues, c_ as DangerConsequence, fD as TypedConfirmField, fE as TypedConfirmFieldLabels, fF as TypedConfirmFieldProps, fG as TypedMatch, gb as typedMatches, gI as usePromisePending } from '../delete-account-setting-DiPX4Vue.js';
3
+ import './write-lock.js';
3
4
  import './tooltip.js';
4
5
  import '../hooks/use-anchored-rect.js';
5
6
  import '../lib/clipping.js';
6
- import '../data-table-labels-kpAAVi6g.js';
7
+ import '../data-table-labels-BJ5JE_X2.js';
7
8
  import './data-table-sort.js';
8
9
  import './swipeable-row.js';
10
+ import './status-dot.js';
11
+ import './progress-bar.js';
12
+ import './signed-amount.js';
13
+ import './stat-tile.js';
14
+ import './chip.js';
15
+ import 'lucide-react';
16
+ import './field-parts.js';
9
17
  import './mini-calendar.js';
10
18
  import './calendar-heatmap.js';
11
19
  import './popover.js';
12
20
  import '../hooks/use-breakpoint.js';
13
- import './chip.js';
14
- import 'lucide-react';
15
- import './field-parts.js';
16
21
  import './field-sync.js';
17
22
  import '../wizard/types.js';
18
23
  import '../tour/tour.js';
@@ -24,7 +29,6 @@ import './page-contents.js';
24
29
  import './series-chart-labels.js';
25
30
  import './pie-chart-labels.js';
26
31
  import './sparkline.js';
27
- import './stat-tile.js';
28
32
  import './signature-pad.js';
29
33
  import './password-strength.js';
30
34
  import './swatch-picker.js';
@@ -36,9 +40,6 @@ import '../hooks/use-search-param-state.js';
36
40
  import './measured-grid.js';
37
41
  import './user-avatar.js';
38
42
  import '../lib/person-name.js';
39
- import './status-dot.js';
40
- import './progress-bar.js';
41
- import './signed-amount.js';
42
43
  import '../shell/topbar-action-menu.js';
43
44
  import './menu-item.js';
44
45
  import './floating-panel.js';
@@ -54,7 +55,6 @@ import './error-boundary.js';
54
55
  import './authed-image.js';
55
56
  import './image-grid.js';
56
57
  import './lightbox.js';
57
- import './write-lock.js';
58
58
  import '../auth/sign-in-form.js';
59
59
  import '../landing/access.js';
60
60
  import '../landing/landing-labels.js';