@eifi1/ui-kit 0.31.1 → 0.32.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.
- package/README.md +51 -28
- package/dist/account/delete-account-setting.d.ts +8 -3
- package/dist/admin/admin-action-confirm.d.ts +8 -3
- package/dist/admin/invitations-panel.d.ts +8 -3
- package/dist/admin/invitations-panel.js +29 -26
- package/dist/admin/invitations-panel.js.map +1 -1
- package/dist/admin/reviewer-scope-editor.d.ts +8 -3
- package/dist/admin/role-select.d.ts +10 -5
- package/dist/admin/transfer-ownership-dialog.d.ts +8 -3
- package/dist/admin/user-roster.d.ts +10 -5
- package/dist/admin/user-roster.js +8 -47
- package/dist/admin/user-roster.js.map +1 -1
- package/dist/auth/auth-errors.d.ts +43 -8
- package/dist/auth/auth-errors.js +24 -1
- package/dist/auth/auth-errors.js.map +1 -1
- package/dist/auth/register-form.d.ts +8 -3
- package/dist/billing/billing-banner.d.ts +184 -0
- package/dist/billing/billing-banner.js +98 -0
- package/dist/billing/billing-banner.js.map +1 -0
- package/dist/billing/billing-labels.d.ts +100 -0
- package/dist/billing/billing-labels.js +74 -0
- package/dist/billing/billing-labels.js.map +1 -0
- package/dist/billing/billing-lock.d.ts +158 -0
- package/dist/billing/billing-lock.js +17 -0
- package/dist/billing/billing-lock.js.map +1 -0
- package/dist/billing/billing-standing.d.ts +149 -0
- package/dist/billing/billing-standing.js +28 -0
- package/dist/billing/billing-standing.js.map +1 -0
- package/dist/billing/plan-card.d.ts +248 -0
- package/dist/billing/plan-card.js +248 -0
- package/dist/billing/plan-card.js.map +1 -0
- package/dist/billing/plan-limit-notice.d.ts +156 -0
- package/dist/billing/plan-limit-notice.js +76 -0
- package/dist/billing/plan-limit-notice.js.map +1 -0
- package/dist/billing/plan-limit.d.ts +34 -0
- package/dist/billing/plan-limit.js +20 -0
- package/dist/billing/plan-limit.js.map +1 -0
- package/dist/billing/plan-price.d.ts +61 -0
- package/dist/billing/plan-price.js +45 -0
- package/dist/billing/plan-price.js.map +1 -0
- package/dist/billing/subscription-actions.d.ts +133 -0
- package/dist/billing/subscription-actions.js +28 -0
- package/dist/billing/subscription-actions.js.map +1 -0
- package/dist/billing/subscription-status-chip.d.ts +149 -0
- package/dist/billing/subscription-status-chip.js +48 -0
- package/dist/billing/subscription-status-chip.js.map +1 -0
- package/dist/chart.d.ts +9 -3
- package/dist/components/account-chips.d.ts +16 -4
- package/dist/components/account-chips.js +21 -3
- package/dist/components/account-chips.js.map +1 -1
- package/dist/components/alert-banner.d.ts +6 -1
- package/dist/components/alert-banner.js +4 -3
- package/dist/components/alert-banner.js.map +1 -1
- package/dist/components/amount-input.d.ts +8 -3
- package/dist/components/amount-input.js +5 -5
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/appearance-labels.d.ts +32 -0
- package/dist/components/appearance-labels.js +18 -0
- package/dist/components/appearance-labels.js.map +1 -0
- package/dist/components/autocomplete.js +2 -2
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/breadcrumbs.js +3 -2
- package/dist/components/breadcrumbs.js.map +1 -1
- package/dist/components/bulk-action-bar.d.ts +2 -2
- package/dist/components/bulk-action-bar.js +7 -12
- package/dist/components/bulk-action-bar.js.map +1 -1
- package/dist/components/button-group.d.ts +8 -3
- package/dist/components/calculator.d.ts +8 -3
- package/dist/components/calculator.js +4 -3
- package/dist/components/calculator.js.map +1 -1
- package/dist/components/calendar-heatmap.js +5 -5
- package/dist/components/calendar-heatmap.js.map +1 -1
- package/dist/components/chart-height.d.ts +23 -0
- package/dist/components/chart-height.js +15 -0
- package/dist/components/chart-height.js.map +1 -0
- package/dist/components/chart-zoom.js +6 -1
- package/dist/components/chart-zoom.js.map +1 -1
- package/dist/components/checkbox-group.js +2 -2
- package/dist/components/checkbox-group.js.map +1 -1
- package/dist/components/checkbox.d.ts +10 -0
- package/dist/components/checkbox.js +25 -10
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/chip.d.ts +19 -3
- package/dist/components/chip.js +47 -21
- package/dist/components/chip.js.map +1 -1
- package/dist/components/choice-card.d.ts +1 -1
- package/dist/components/choice-card.js +8 -7
- package/dist/components/choice-card.js.map +1 -1
- package/dist/components/column-mapper.js +1 -1
- package/dist/components/column-mapper.js.map +1 -1
- package/dist/components/combobox-core.js +8 -7
- package/dist/components/combobox-core.js.map +1 -1
- package/dist/components/combobox.js +8 -8
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/confirm-dialog.d.ts +8 -3
- package/dist/components/copy-button.d.ts +10 -5
- package/dist/components/country-select.js +1 -1
- package/dist/components/country-select.js.map +1 -1
- package/dist/components/currency-select.js +3 -3
- package/dist/components/currency-select.js.map +1 -1
- package/dist/components/danger-confirm.d.ts +8 -3
- package/dist/components/data-table-cells.d.ts +1 -1
- package/dist/components/data-table-filter-popover.d.ts +1 -1
- package/dist/components/data-table-filter-popover.js +4 -1
- package/dist/components/data-table-filter-popover.js.map +1 -1
- package/dist/components/data-table-filters.d.ts +1 -1
- package/dist/components/data-table-labels.d.ts +1 -1
- package/dist/components/data-table-pagination.d.ts +1 -1
- package/dist/components/data-table.d.ts +1 -1
- package/dist/components/data-table.js +123 -52
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-picker.d.ts +1 -1
- package/dist/components/date-picker.js +7 -5
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/description-list.js +2 -2
- package/dist/components/description-list.js.map +1 -1
- package/dist/components/dialog-frame.js +2 -1
- package/dist/components/dialog-frame.js.map +1 -1
- package/dist/components/disclosure.js +3 -2
- package/dist/components/disclosure.js.map +1 -1
- package/dist/components/dropdown.d.ts +1 -1
- package/dist/components/dropdown.js +7 -1
- package/dist/components/dropdown.js.map +1 -1
- package/dist/components/facing-pair.d.ts +19 -6
- package/dist/components/facing-pair.js +3 -2
- package/dist/components/facing-pair.js.map +1 -1
- package/dist/components/field-parts.d.ts +102 -6
- package/dist/components/field-parts.js +81 -6
- package/dist/components/field-parts.js.map +1 -1
- package/dist/components/field-sync.d.ts +4 -1
- package/dist/components/field-sync.js +12 -2
- package/dist/components/field-sync.js.map +1 -1
- package/dist/components/field.js +2 -2
- package/dist/components/field.js.map +1 -1
- package/dist/components/file-button.d.ts +8 -3
- package/dist/components/file-dropzone.d.ts +8 -3
- package/dist/components/floating-panel.js +7 -4
- package/dist/components/floating-panel.js.map +1 -1
- package/dist/components/focus-ring.d.ts +12 -0
- package/dist/components/focus-ring.js +8 -0
- package/dist/components/focus-ring.js.map +1 -0
- package/dist/components/form-actions.d.ts +8 -3
- package/dist/components/form-actions.js +33 -19
- package/dist/components/form-actions.js.map +1 -1
- package/dist/components/full-bleed-dialog.d.ts +11 -1
- package/dist/components/full-bleed-dialog.js +3 -1
- package/dist/components/full-bleed-dialog.js.map +1 -1
- package/dist/components/iban-input.d.ts +8 -3
- package/dist/components/image-grid.js +1 -1
- package/dist/components/image-grid.js.map +1 -1
- package/dist/components/inline-edit-field.js +6 -3
- package/dist/components/inline-edit-field.js.map +1 -1
- package/dist/components/language-select.d.ts +8 -3
- package/dist/components/legal-page.d.ts +26 -5
- package/dist/components/legal-page.js +3 -1
- package/dist/components/legal-page.js.map +1 -1
- package/dist/components/legal.d.ts +8 -3
- package/dist/components/legal.js +2 -1
- package/dist/components/legal.js.map +1 -1
- package/dist/components/lightbox.js +24 -2
- package/dist/components/lightbox.js.map +1 -1
- package/dist/components/line-items.js +2 -1
- package/dist/components/line-items.js.map +1 -1
- package/dist/components/list.d.ts +5 -0
- package/dist/components/list.js +13 -9
- package/dist/components/list.js.map +1 -1
- package/dist/components/measured-grid.d.ts +3 -1
- package/dist/components/measured-grid.js +38 -20
- package/dist/components/measured-grid.js.map +1 -1
- package/dist/components/menu-item.js +2 -1
- package/dist/components/menu-item.js.map +1 -1
- package/dist/components/mini-calendar.js +8 -4
- package/dist/components/mini-calendar.js.map +1 -1
- package/dist/components/money-field.d.ts +8 -3
- package/dist/components/month-picker.js +9 -5
- package/dist/components/month-picker.js.map +1 -1
- package/dist/components/nav-pills.js +1 -1
- package/dist/components/nav-pills.js.map +1 -1
- package/dist/components/number-field.d.ts +8 -3
- package/dist/components/number-input.d.ts +11 -4
- package/dist/components/number-input.js +8 -6
- package/dist/components/number-input.js.map +1 -1
- package/dist/components/numpad-sheet.d.ts +8 -3
- package/dist/components/numpad-sheet.js +2 -1
- package/dist/components/numpad-sheet.js.map +1 -1
- package/dist/components/one-time-code-input.js +2 -2
- package/dist/components/one-time-code-input.js.map +1 -1
- package/dist/components/page-contents.js +2 -2
- package/dist/components/page-contents.js.map +1 -1
- package/dist/components/phone-input.d.ts +8 -3
- package/dist/components/phone-input.js +2 -2
- package/dist/components/phone-input.js.map +1 -1
- package/dist/components/pie-chart.d.ts +8 -2
- package/dist/components/pie-chart.js +11 -7
- package/dist/components/pie-chart.js.map +1 -1
- package/dist/components/popover.d.ts +9 -1
- package/dist/components/popover.js +8 -4
- package/dist/components/popover.js.map +1 -1
- package/dist/components/row-actions.d.ts +100 -0
- package/dist/components/row-actions.js +165 -0
- package/dist/components/row-actions.js.map +1 -0
- package/dist/components/scroll-area.js +1 -1
- package/dist/components/scroll-area.js.map +1 -1
- package/dist/components/search-field.js +3 -2
- package/dist/components/search-field.js.map +1 -1
- package/dist/components/series-chart-budget.d.ts +30 -7
- package/dist/components/series-chart-budget.js +12 -4
- package/dist/components/series-chart-budget.js.map +1 -1
- package/dist/components/series-chart-ticks.d.ts +7 -1
- package/dist/components/series-chart-ticks.js +6 -0
- package/dist/components/series-chart-ticks.js.map +1 -1
- package/dist/components/series-chart.d.ts +58 -28
- package/dist/components/series-chart.js +42 -32
- package/dist/components/series-chart.js.map +1 -1
- package/dist/components/settings-fields.d.ts +51 -6
- package/dist/components/settings-fields.js +37 -0
- package/dist/components/settings-fields.js.map +1 -1
- package/dist/components/share-card.d.ts +11 -6
- package/dist/components/share-card.js +2 -0
- package/dist/components/share-card.js.map +1 -1
- package/dist/components/sign-chip.d.ts +4 -0
- package/dist/components/sign-chip.js +17 -4
- package/dist/components/sign-chip.js.map +1 -1
- package/dist/components/signature-pad.d.ts +3 -1
- package/dist/components/signature-pad.js +8 -5
- package/dist/components/signature-pad.js.map +1 -1
- package/dist/components/slider.js +7 -6
- package/dist/components/slider.js.map +1 -1
- package/dist/components/sparkline.d.ts +5 -1
- package/dist/components/sparkline.js +4 -2
- package/dist/components/sparkline.js.map +1 -1
- package/dist/components/stat-tile.d.ts +17 -1
- package/dist/components/stat-tile.js +48 -20
- package/dist/components/stat-tile.js.map +1 -1
- package/dist/components/status-dot.d.ts +4 -0
- package/dist/components/swipeable-row.js +2 -1
- package/dist/components/swipeable-row.js.map +1 -1
- package/dist/components/switch.d.ts +21 -7
- package/dist/components/switch.js +24 -11
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table.js +2 -2
- package/dist/components/table.js.map +1 -1
- package/dist/components/text-link.d.ts +8 -3
- package/dist/components/text-link.js +1 -1
- package/dist/components/text-link.js.map +1 -1
- package/dist/components/text.d.ts +7 -2
- package/dist/components/text.js +5 -5
- package/dist/components/text.js.map +1 -1
- package/dist/components/tile-radio.js +2 -1
- package/dist/components/tile-radio.js.map +1 -1
- package/dist/components/time-input.d.ts +8 -3
- package/dist/components/toast.d.ts +18 -2
- package/dist/components/toast.js +8 -5
- package/dist/components/toast.js.map +1 -1
- package/dist/components/toggle-group.d.ts +16 -1
- package/dist/components/toggle-group.js +40 -11
- package/dist/components/toggle-group.js.map +1 -1
- package/dist/components/toggle-legend.d.ts +10 -1
- package/dist/components/toggle-legend.js +21 -7
- package/dist/components/toggle-legend.js.map +1 -1
- package/dist/components/translation-review-parts.d.ts +4 -0
- package/dist/components/translation-review.d.ts +4 -0
- package/dist/components/translation-review.js +3 -3
- package/dist/components/translation-review.js.map +1 -1
- package/dist/components/tree-view.js +3 -2
- package/dist/components/tree-view.js.map +1 -1
- package/dist/components/treemap.d.ts +5 -2
- package/dist/components/treemap.js +33 -16
- package/dist/components/treemap.js.map +1 -1
- package/dist/components/ui.d.ts +8 -3
- package/dist/components/ui.js +202 -114
- package/dist/components/ui.js.map +1 -1
- package/dist/components/use-table-state.d.ts +1 -1
- package/dist/components/user-avatar.d.ts +5 -1
- package/dist/components/user-avatar.js +1 -1
- package/dist/components/user-avatar.js.map +1 -1
- package/dist/{data-table-labels-DUELeXpa.d.ts → data-table-labels-kpAAVi6g.d.ts} +26 -2
- package/dist/data-table.d.ts +1 -1
- package/dist/{delete-account-setting-CpIhzxxZ.d.ts → delete-account-setting-BvdQdbv3.d.ts} +605 -58
- package/dist/demo/demo-banner.js +1 -0
- package/dist/demo/demo-banner.js.map +1 -1
- package/dist/feedback/feedback-attachment.d.ts +8 -3
- package/dist/feedback/feedback-context.d.ts +8 -3
- package/dist/feedback/feedback-crash.d.ts +8 -3
- package/dist/feedback/feedback-dialog.d.ts +8 -3
- package/dist/feedback/feedback-dialog.js +3 -3
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-inbox.d.ts +8 -3
- package/dist/feedback/feedback-inbox.js +2 -2
- package/dist/feedback/feedback-inbox.js.map +1 -1
- package/dist/feedback/feedback-labels.d.ts +8 -3
- package/dist/feedback/feedback-menu.d.ts +9 -4
- package/dist/feedback/feedback-record.d.ts +8 -3
- package/dist/feedback/feedback-row-detail.d.ts +8 -3
- package/dist/feedback/feedback-status-undo.d.ts +8 -3
- package/dist/feedback/feedback-submit.d.ts +8 -3
- package/dist/feedback/feedback-swipe.d.ts +8 -3
- package/dist/feedback/feedback-table.d.ts +8 -3
- package/dist/feedback/feedback-thread.d.ts +8 -3
- package/dist/feedback/feedback-thread.js +3 -3
- package/dist/feedback/feedback-thread.js.map +1 -1
- package/dist/feedback.d.ts +8 -3
- package/dist/hooks/use-anchored-panel.d.ts +32 -3
- package/dist/hooks/use-anchored-panel.js +21 -3
- package/dist/hooks/use-anchored-panel.js.map +1 -1
- package/dist/hooks/use-breakpoint.d.ts +77 -0
- package/dist/hooks/use-breakpoint.js +50 -0
- package/dist/hooks/use-breakpoint.js.map +1 -0
- package/dist/hooks/use-file-drop.d.ts +8 -3
- package/dist/hooks/use-large-text.d.ts +29 -0
- package/dist/hooks/use-large-text.js +20 -0
- package/dist/hooks/use-large-text.js.map +1 -0
- package/dist/hooks/use-windowed-rows.d.ts +52 -8
- package/dist/hooks/use-windowed-rows.js +94 -5
- package/dist/hooks/use-windowed-rows.js.map +1 -1
- package/dist/i18n/defaults.d.ts +8 -3
- package/dist/i18n/defaults.js +8 -0
- package/dist/i18n/defaults.js.map +1 -1
- package/dist/i18n/german.d.ts +8 -3
- package/dist/i18n/german.js +89 -2
- package/dist/i18n/german.js.map +1 -1
- package/dist/i18n/kit-labels.d.ts +8 -3
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/languages.d.ts +10 -5
- package/dist/i18n/locales/de-CH.d.ts +8 -3
- package/dist/i18n/locales/en.d.ts +8 -3
- package/dist/i18n/locales/es.d.ts +8 -3
- package/dist/i18n/locales/es.js +84 -2
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.d.ts +8 -3
- package/dist/i18n/locales/fr.js +86 -2
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.d.ts +8 -3
- package/dist/i18n/locales/hu.js +86 -2
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.d.ts +8 -3
- package/dist/i18n/locales/it.js +87 -2
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.d.ts +8 -3
- package/dist/i18n/locales/zh.js +84 -2
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/i18n/review.d.ts +8 -3
- package/dist/i18n/review.js +15 -1
- package/dist/i18n/review.js.map +1 -1
- package/dist/index.d.ts +27 -11
- package/dist/index.js +75 -4
- package/dist/index.js.map +1 -1
- package/dist/landing/landing-actions.d.ts +8 -3
- package/dist/landing/landing-sections.d.ts +8 -3
- package/dist/landing/public-header.d.ts +9 -4
- package/dist/landing/public-header.js +3 -3
- package/dist/landing/public-header.js.map +1 -1
- package/dist/landing/routing.d.ts +8 -3
- package/dist/lib/cn.js +3 -2
- package/dist/lib/cn.js.map +1 -1
- package/dist/rhf/fields.d.ts +8 -3
- package/dist/rhf/fields.js +1 -1
- package/dist/rhf/fields.js.map +1 -1
- package/dist/rhf/form.d.ts +8 -3
- package/dist/rhf/form.js +2 -2
- package/dist/rhf/form.js.map +1 -1
- package/dist/rhf.d.ts +8 -3
- package/dist/search/command-palette.d.ts +1 -1
- package/dist/search/command-palette.js +9 -8
- package/dist/search/command-palette.js.map +1 -1
- package/dist/settings/settings-layout.js +2 -1
- package/dist/settings/settings-layout.js.map +1 -1
- package/dist/settings/settings-section.d.ts +8 -3
- package/dist/settings/use-account-appearance.d.ts +92 -0
- package/dist/settings/use-account-appearance.js +63 -0
- package/dist/settings/use-account-appearance.js.map +1 -0
- package/dist/settings/use-settings-route.d.ts +1 -1
- package/dist/settings/use-settings-route.js +2 -3
- package/dist/settings/use-settings-route.js.map +1 -1
- package/dist/shell/app-shell.d.ts +12 -171
- package/dist/shell/app-shell.js +144 -28
- package/dist/shell/app-shell.js.map +1 -1
- package/dist/shell/auth-layout.js +1 -1
- package/dist/shell/auth-layout.js.map +1 -1
- package/dist/shell/option-switcher-menu.js +1 -1
- package/dist/shell/option-switcher-menu.js.map +1 -1
- package/dist/shell/top-bar-brand.d.ts +8 -3
- package/dist/shell/top-bar-brand.js +3 -1
- package/dist/shell/top-bar-brand.js.map +1 -1
- package/dist/shell/topbar-action-menu.d.ts +4 -0
- package/dist/shell/topbar-action-menu.js +3 -3
- package/dist/shell/topbar-action-menu.js.map +1 -1
- package/dist/shell/topbar-controls.js +4 -4
- package/dist/shell/topbar-controls.js.map +1 -1
- package/dist/shell.d.ts +9 -5
- package/dist/theme/contrast-tokens.d.ts +41 -0
- package/dist/theme/contrast-tokens.js +59 -0
- package/dist/theme/contrast-tokens.js.map +1 -0
- package/dist/theme/contrast.d.ts +109 -0
- package/dist/theme/contrast.js +128 -0
- package/dist/theme/contrast.js.map +1 -0
- package/dist/theme/palette-presets.d.ts +12 -1
- package/dist/theme/palette-presets.js +9 -4
- package/dist/theme/palette-presets.js.map +1 -1
- package/dist/theme/palette-store.js.map +1 -1
- package/dist/theme/text-size.d.ts +157 -0
- package/dist/theme/text-size.js +121 -0
- package/dist/theme/text-size.js.map +1 -0
- package/dist/wizard/stepper-nav.d.ts +8 -3
- package/dist/wizard.d.ts +8 -3
- package/package.json +1 -1
- package/src/admin/invitations-panel.tsx +36 -29
- package/src/admin/user-roster.tsx +17 -72
- package/src/auth/auth-errors.ts +68 -7
- package/src/billing/billing-banner.tsx +205 -0
- package/src/billing/billing-labels.ts +224 -0
- package/src/billing/billing-lock.ts +75 -0
- package/src/billing/billing-standing.ts +72 -0
- package/src/billing/plan-card.tsx +458 -0
- package/src/billing/plan-limit-notice.tsx +145 -0
- package/src/billing/plan-limit.ts +53 -0
- package/src/billing/plan-price.ts +101 -0
- package/src/billing/subscription-actions.tsx +76 -0
- package/src/billing/subscription-status-chip.tsx +95 -0
- package/src/components/account-chips.tsx +36 -10
- package/src/components/alert-banner.tsx +11 -6
- package/src/components/amount-input.tsx +5 -5
- package/src/components/appearance-labels.ts +40 -0
- package/src/components/autocomplete.tsx +2 -2
- package/src/components/breadcrumbs.tsx +3 -3
- package/src/components/bulk-action-bar.tsx +11 -14
- package/src/components/calculator.tsx +4 -3
- package/src/components/calendar-heatmap.tsx +5 -5
- package/src/components/chart-height.ts +30 -0
- package/src/components/chart-zoom.tsx +6 -1
- package/src/components/checkbox-group.tsx +2 -2
- package/src/components/checkbox.tsx +62 -20
- package/src/components/chip.tsx +105 -24
- package/src/components/choice-card.tsx +15 -10
- package/src/components/column-mapper.tsx +1 -1
- package/src/components/combobox-core.tsx +8 -7
- package/src/components/combobox.tsx +8 -8
- package/src/components/country-select.tsx +1 -1
- package/src/components/currency-select.tsx +3 -3
- package/src/components/data-table-filter-popover.tsx +7 -1
- package/src/components/data-table.tsx +160 -43
- package/src/components/date-picker.tsx +12 -9
- package/src/components/description-list.tsx +2 -2
- package/src/components/dialog-frame.tsx +2 -1
- package/src/components/disclosure.tsx +3 -2
- package/src/components/dropdown.tsx +10 -2
- package/src/components/facing-pair.ts +12 -5
- package/src/components/field-parts.tsx +190 -7
- package/src/components/field-sync.tsx +17 -3
- package/src/components/field.tsx +2 -2
- package/src/components/floating-panel.tsx +7 -4
- package/src/components/focus-ring.ts +12 -0
- package/src/components/form-actions.tsx +55 -18
- package/src/components/full-bleed-dialog.tsx +18 -4
- package/src/components/image-grid.tsx +1 -1
- package/src/components/inline-edit-field.tsx +6 -3
- package/src/components/legal-page.tsx +28 -2
- package/src/components/legal.tsx +19 -1
- package/src/components/lightbox.tsx +24 -2
- package/src/components/line-items.tsx +7 -1
- package/src/components/list.tsx +36 -10
- package/src/components/measured-grid.tsx +49 -24
- package/src/components/menu-item.tsx +2 -2
- package/src/components/mini-calendar.tsx +8 -4
- package/src/components/month-picker.tsx +9 -5
- package/src/components/nav-pills.tsx +1 -1
- package/src/components/number-input.tsx +14 -7
- package/src/components/numpad-sheet.tsx +2 -2
- package/src/components/one-time-code-input.tsx +2 -2
- package/src/components/page-contents.tsx +2 -2
- package/src/components/phone-input.tsx +2 -2
- package/src/components/pie-chart.tsx +19 -9
- package/src/components/popover.tsx +22 -5
- package/src/components/row-actions.tsx +344 -0
- package/src/components/scroll-area.tsx +1 -1
- package/src/components/search-field.tsx +4 -2
- package/src/components/series-chart-budget.ts +40 -8
- package/src/components/series-chart-ticks.ts +10 -0
- package/src/components/series-chart.tsx +123 -72
- package/src/components/settings-fields.tsx +81 -2
- package/src/components/share-card.tsx +10 -0
- package/src/components/sign-chip.tsx +28 -4
- package/src/components/signature-pad.tsx +13 -7
- package/src/components/slider.tsx +22 -9
- package/src/components/sparkline.tsx +11 -3
- package/src/components/stat-tile.tsx +70 -14
- package/src/components/swipeable-row.tsx +2 -1
- package/src/components/switch.tsx +57 -23
- package/src/components/table.tsx +2 -2
- package/src/components/text-link.tsx +1 -1
- package/src/components/text.tsx +11 -6
- package/src/components/tile-radio.tsx +4 -1
- package/src/components/toast.tsx +27 -7
- package/src/components/toggle-group.tsx +99 -12
- package/src/components/toggle-legend.tsx +53 -8
- package/src/components/translation-review.tsx +10 -5
- package/src/components/tree-view.tsx +3 -2
- package/src/components/treemap.tsx +27 -10
- package/src/components/ui.tsx +331 -145
- package/src/components/user-avatar.tsx +1 -1
- package/src/demo/demo-banner.tsx +5 -0
- package/src/feedback/feedback-dialog.tsx +3 -3
- package/src/feedback/feedback-inbox.tsx +2 -2
- package/src/feedback/feedback-thread.tsx +3 -3
- package/src/hooks/use-anchored-panel.ts +67 -5
- package/src/hooks/use-breakpoint.ts +121 -0
- package/src/hooks/use-large-text.ts +41 -0
- package/src/hooks/use-windowed-rows.ts +168 -12
- package/src/i18n/defaults.ts +8 -0
- package/src/i18n/german.ts +103 -0
- package/src/i18n/kit-labels.tsx +12 -0
- package/src/i18n/locales/es.ts +94 -0
- package/src/i18n/locales/fr.ts +98 -0
- package/src/i18n/locales/hu.ts +96 -0
- package/src/i18n/locales/it.ts +99 -0
- package/src/i18n/locales/zh.ts +90 -0
- package/src/i18n/review.ts +14 -0
- package/src/index.ts +74 -6
- package/src/landing/public-header.tsx +4 -4
- package/src/lib/cn.ts +13 -2
- package/src/rhf/fields.tsx +1 -1
- package/src/rhf/form.tsx +2 -2
- package/src/search/command-palette.tsx +10 -9
- package/src/settings/settings-layout.tsx +2 -1
- package/src/settings/use-account-appearance.ts +148 -0
- package/src/settings/use-settings-route.ts +3 -4
- package/src/shell/app-shell.tsx +278 -54
- package/src/shell/auth-layout.tsx +1 -1
- package/src/shell/option-switcher-menu.tsx +1 -1
- package/src/shell/top-bar-brand.tsx +3 -1
- package/src/shell/topbar-action-menu.tsx +3 -3
- package/src/shell/topbar-controls.tsx +4 -4
- package/src/theme/contrast-tokens.ts +112 -0
- package/src/theme/contrast.ts +224 -0
- package/src/theme/palette-presets.ts +24 -4
- package/src/theme/palette-store.ts +6 -1
- package/src/theme/text-size.ts +267 -0
- package/tokens.css +143 -1
|
@@ -121,7 +121,9 @@ interface MeasuredGridProps extends Omit<ComponentPropsWithoutRef<"div">, "child
|
|
|
121
121
|
/** Which views the toggle offers, the first being where it opens. Default both;
|
|
122
122
|
* one view hides the toggle. */
|
|
123
123
|
views?: ReadonlyArray<MeasuredGridView>;
|
|
124
|
-
/**
|
|
124
|
+
/** A row's height at Normal text size, in px. Default 28. Since 0.32 it is the
|
|
125
|
+
* windowing's estimate and each row's minimum, multiplied by the text size's scale;
|
|
126
|
+
* the rendered rows are measured (docs/text-size-harmonization.md §10.9). */
|
|
125
127
|
rowHeight?: number;
|
|
126
128
|
/** BCP 47 tag for the decimal mark of cells written by a paste or the text view,
|
|
127
129
|
* and for the row numbers; else the `<UiKitProvider locale>`. */
|
|
@@ -6,9 +6,9 @@ import { cn } from "../lib/cn.js";
|
|
|
6
6
|
import { horizontalStep } from "../lib/direction.js";
|
|
7
7
|
import { cellNumber, isCellNumber, parseRows, splitRow } from "../lib/table-text.js";
|
|
8
8
|
import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
|
|
9
|
-
import { useWindowedRows } from "../hooks/use-windowed-rows.js";
|
|
9
|
+
import { useWindowedRows, WINDOWED_ROW_INDEX } from "../hooks/use-windowed-rows.js";
|
|
10
10
|
import { ToggleGroup } from "./toggle-group.js";
|
|
11
|
-
import { Button, FIELD_INVALID, Textarea } from "./ui.js";
|
|
11
|
+
import { Button, FIELD_INVALID, FIELD_TOUCH_TEXT, FOCUS_RING, Textarea } from "./ui.js";
|
|
12
12
|
const DEFAULT_MEASURED_GRID_LABELS = {
|
|
13
13
|
view: "Table view",
|
|
14
14
|
cellsView: "Cells",
|
|
@@ -92,7 +92,7 @@ function MeasuredGrid({
|
|
|
92
92
|
// to the initial containing block (see sr-only-containment.test).
|
|
93
93
|
/* @__PURE__ */ jsxs("div", { ...rest, className: cn("relative", className), children: [
|
|
94
94
|
/* @__PURE__ */ jsxs("div", { className: "mb-1 flex flex-wrap items-center justify-between gap-2", children: [
|
|
95
|
-
/* @__PURE__ */ jsx("span", { id: labelId, className: "text-
|
|
95
|
+
/* @__PURE__ */ jsx("span", { id: labelId, className: "text-caption font-medium text-[var(--text-muted)]", children: label }),
|
|
96
96
|
offered.length > 1 && /* @__PURE__ */ jsx(
|
|
97
97
|
ToggleGroup,
|
|
98
98
|
{
|
|
@@ -134,7 +134,7 @@ function MeasuredGrid({
|
|
|
134
134
|
describedBy: hint ? hintId : void 0
|
|
135
135
|
}
|
|
136
136
|
),
|
|
137
|
-
hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 px-1 text-
|
|
137
|
+
hint && /* @__PURE__ */ jsx("p", { id: hintId, className: "mt-1 px-1 text-caption text-[var(--text-muted)]", children: hint }),
|
|
138
138
|
view === "cells" && /* @__PURE__ */ jsx("span", { id: keysId, className: "sr-only", children: labels.keyboardHint })
|
|
139
139
|
] })
|
|
140
140
|
);
|
|
@@ -156,7 +156,11 @@ function CellGrid({
|
|
|
156
156
|
const width = columns.length;
|
|
157
157
|
const blankRow = () => columns.map(() => BLANK);
|
|
158
158
|
const grid = cells.length ? cells : [blankRow()];
|
|
159
|
-
const { first, last, totalHeight } = useWindowedRows(
|
|
159
|
+
const { first, last, totalHeight, offsetOf, heightOf, estimate, measureRef } = useWindowedRows(
|
|
160
|
+
grid.length,
|
|
161
|
+
rowHeight,
|
|
162
|
+
scrollRef
|
|
163
|
+
);
|
|
160
164
|
const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);
|
|
161
165
|
const removable = !disabled && cells.length > 0;
|
|
162
166
|
const lastColumn = removable ? width : width - 1;
|
|
@@ -188,9 +192,10 @@ function CellGrid({
|
|
|
188
192
|
if (!element) return;
|
|
189
193
|
const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);
|
|
190
194
|
if (room <= 0) return;
|
|
191
|
-
const top = row
|
|
195
|
+
const top = offsetOf(row);
|
|
196
|
+
const height = heightOf(row);
|
|
192
197
|
if (top < element.scrollTop) element.scrollTop = top;
|
|
193
|
-
else if (top +
|
|
198
|
+
else if (top + height > element.scrollTop + room) element.scrollTop = top + height - room;
|
|
194
199
|
};
|
|
195
200
|
const focusCell = (row, column) => {
|
|
196
201
|
reveal(row);
|
|
@@ -215,7 +220,7 @@ function CellGrid({
|
|
|
215
220
|
const page = () => {
|
|
216
221
|
const element = scrollRef.current;
|
|
217
222
|
const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;
|
|
218
|
-
return room > 0 ? Math.max(1, Math.floor(room /
|
|
223
|
+
return room > 0 ? Math.max(1, Math.floor(room / estimate) - 1) : 10;
|
|
219
224
|
};
|
|
220
225
|
const onCellKeyDown = (event, row, column) => {
|
|
221
226
|
const input = event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;
|
|
@@ -321,7 +326,7 @@ function CellGrid({
|
|
|
321
326
|
{
|
|
322
327
|
role: "columnheader",
|
|
323
328
|
"aria-label": labels.rowNumber,
|
|
324
|
-
className: "flex items-end justify-end px-1 py-1 text-
|
|
329
|
+
className: "flex items-end justify-end px-1 py-1 text-micro text-[var(--text-placeholder)]",
|
|
325
330
|
children: "#"
|
|
326
331
|
}
|
|
327
332
|
),
|
|
@@ -332,7 +337,7 @@ function CellGrid({
|
|
|
332
337
|
className: "min-w-0 border-s border-[var(--border)] px-2 py-1 text-end",
|
|
333
338
|
children: [
|
|
334
339
|
/* @__PURE__ */ jsx("span", { className: "block truncate font-medium text-[var(--text-primary)]", children: column.label }),
|
|
335
|
-
column.unit && /* @__PURE__ */ jsx("span", { className: "block truncate text-
|
|
340
|
+
column.unit && /* @__PURE__ */ jsx("span", { className: "block truncate text-micro text-[var(--text-muted)]", children: column.unit })
|
|
336
341
|
]
|
|
337
342
|
},
|
|
338
343
|
index
|
|
@@ -353,16 +358,18 @@ function CellGrid({
|
|
|
353
358
|
return /* @__PURE__ */ jsxs(
|
|
354
359
|
"div",
|
|
355
360
|
{
|
|
361
|
+
ref: measureRef,
|
|
362
|
+
...{ [WINDOWED_ROW_INDEX]: index },
|
|
356
363
|
role: "row",
|
|
357
364
|
"aria-rowindex": index + 2,
|
|
358
365
|
className: "absolute inset-x-0 grid hover:bg-[var(--bg-hover)]",
|
|
359
|
-
style: { top: index
|
|
366
|
+
style: { top: offsetOf(index), minHeight: estimate, gridTemplateColumns: template },
|
|
360
367
|
children: [
|
|
361
368
|
/* @__PURE__ */ jsx(
|
|
362
369
|
"div",
|
|
363
370
|
{
|
|
364
371
|
role: "rowheader",
|
|
365
|
-
className: "flex items-center justify-end px-1 text-
|
|
372
|
+
className: "flex items-center justify-end px-1 text-micro tabular-nums text-[var(--text-placeholder)]",
|
|
366
373
|
children: rowNumber.format(index + 1)
|
|
367
374
|
}
|
|
368
375
|
),
|
|
@@ -384,9 +391,16 @@ function CellGrid({
|
|
|
384
391
|
"aria-invalid": bad || void 0,
|
|
385
392
|
className: cn(
|
|
386
393
|
"block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none",
|
|
394
|
+
// A cell is a field: 16 px on touch, or iOS zooms on focus (§10.1).
|
|
395
|
+
FIELD_TOUCH_TEXT,
|
|
387
396
|
// Arriving selects the text (typing replaces it); editing
|
|
388
397
|
// in place is the plain surface with a caret in it.
|
|
389
|
-
|
|
398
|
+
// The kit's focus frame (§5), inset so the next cell's
|
|
399
|
+
// border does not paint over it. A text input is
|
|
400
|
+
// `:focus-visible` however it was focused.
|
|
401
|
+
"focus:bg-[var(--brand-bg)]",
|
|
402
|
+
FOCUS_RING,
|
|
403
|
+
"focus-visible:ring-inset",
|
|
390
404
|
isCaret && editing && "focus:bg-[var(--bg-surface)]",
|
|
391
405
|
disabled && "text-[var(--text-muted)]",
|
|
392
406
|
bad && cn(FIELD_INVALID, "ring-inset")
|
|
@@ -432,7 +446,10 @@ function CellGrid({
|
|
|
432
446
|
disabled: !removable,
|
|
433
447
|
tabIndex: at.row === index && at.column === width ? 0 : -1,
|
|
434
448
|
"aria-label": labels.removeRow(index + 1),
|
|
435
|
-
className:
|
|
449
|
+
className: cn(
|
|
450
|
+
"rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]",
|
|
451
|
+
FOCUS_RING
|
|
452
|
+
),
|
|
436
453
|
onKeyDown: (event) => onCellKeyDown(event, index, width),
|
|
437
454
|
onFocus: () => {
|
|
438
455
|
if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });
|
|
@@ -461,7 +478,7 @@ function CellGrid({
|
|
|
461
478
|
Button,
|
|
462
479
|
{
|
|
463
480
|
variant: "ghost",
|
|
464
|
-
|
|
481
|
+
size: "sm",
|
|
465
482
|
disabled,
|
|
466
483
|
onClick: () => {
|
|
467
484
|
onCells([...grid.map(pad), blankRow()]);
|
|
@@ -478,7 +495,8 @@ function CellGrid({
|
|
|
478
495
|
Button,
|
|
479
496
|
{
|
|
480
497
|
variant: "ghost",
|
|
481
|
-
|
|
498
|
+
size: "sm",
|
|
499
|
+
className: "text-[var(--text-muted)]",
|
|
482
500
|
disabled: disabled || !cells.length,
|
|
483
501
|
onClick: () => {
|
|
484
502
|
onCells([]);
|
|
@@ -491,9 +509,9 @@ function CellGrid({
|
|
|
491
509
|
]
|
|
492
510
|
}
|
|
493
511
|
),
|
|
494
|
-
/* @__PURE__ */ jsx("span", { className: "text-
|
|
495
|
-
problems > 0 && /* @__PURE__ */ jsx("span", { className: "text-
|
|
496
|
-
/* @__PURE__ */ jsxs("span", { className: "ms-auto flex items-center gap-1 text-
|
|
512
|
+
/* @__PURE__ */ jsx("span", { className: "text-caption tabular-nums text-[var(--text-muted)]", children: /* @__PURE__ */ jsx("bdi", { children: labels.points(filled.length) }) }),
|
|
513
|
+
problems > 0 && /* @__PURE__ */ jsx("span", { className: "text-caption text-[var(--danger)]", children: labels.problems(problems) }),
|
|
514
|
+
/* @__PURE__ */ jsxs("span", { className: "ms-auto flex items-center gap-1 text-caption text-[var(--text-muted)]", children: [
|
|
497
515
|
/* @__PURE__ */ jsx(ClipboardPaste, { "aria-hidden": true, className: "size-3.5" }),
|
|
498
516
|
" ",
|
|
499
517
|
labels.pasteHint
|
|
@@ -544,7 +562,7 @@ function TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy,
|
|
|
544
562
|
onBlur: commit
|
|
545
563
|
}
|
|
546
564
|
),
|
|
547
|
-
/* @__PURE__ */ jsxs("p", { className: "mt-1 px-1 text-
|
|
565
|
+
/* @__PURE__ */ jsxs("p", { className: "mt-1 px-1 text-caption text-[var(--text-muted)]", children: [
|
|
548
566
|
columns.map((column) => column.label).join(" \xB7 "),
|
|
549
567
|
" \u2014 ",
|
|
550
568
|
/* @__PURE__ */ jsx("bdi", { children: labels.points(lines) })
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/measured-grid.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ClipboardPaste, Eraser, Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\n// The cell pair reads ONE cell, where a comma has no columns to separate and so is\n// always a decimal mark; `splitRow` and `parseRows` read a pasted table, where it may\n// be either and the line decides. See the three named rules at the top of table-text.\nimport { cellNumber, isCellNumber, parseRows, splitRow } from \"../lib/table-text\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { useWindowedRows } from \"../hooks/use-windowed-rows\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Button, FIELD_INVALID, Textarea } from \"./ui\";\n\n/**\n * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a\n * block out of a spreadsheet — and the hook that holds it as a draft.\n *\n * Moved from Lenkbank (`shared/ui/measured-grid.tsx`), where four gear editors and a\n * setpoint dialog type rig measurements into it. Nothing in it knows what a column\n * holds: the caller passes `{ label, unit }[]`, and the vocabulary of this file is\n * cells, rows, a caret and a paste. The lexing under it is `@eifi1/ui-kit/table-text`.\n *\n * What it is NOT: a `DataTable` mode (that one finds rows among many; this one types\n * numbers into columns), a spreadsheet (no formulas, no multi-cell selection, no undo\n * beyond the browser's per-input one), or typed columns — every cell is a string that\n * should read as a number.\n */\n\n/**\n * Every string the grid can speak — the `measuredGrid` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * ones that carry a number are functions of it, for the reason `DataTableLabels` gives:\n * the grammar around a count moves with it in most languages.\n */\nexport interface MeasuredGridLabels {\n /** Accessible name of the cells/text toggle. */\n view: string;\n cellsView: string;\n textView: string;\n addRow: string;\n /** The row's remove button, given its 1-based number. */\n removeRow: (row: number) => string;\n /** Empties the whole table. */\n clear: string;\n /** The footer's standing note that a block can be pasted into any cell. */\n pasteHint: string;\n /**\n * Accessible name of one cell's input, given its column's label and 1-based row.\n * A screen reader in a grid announces the headers on its own when the caret crosses\n * one; this is what it reads when the caret lands on an input with no crossing — and\n * what a voice-control user says to reach it.\n */\n cell: (column: string, row: number) => string;\n /** The row-number column's header, which shows only \"#\". */\n rowNumber: string;\n /** The remove-button column's header, which shows nothing. */\n rowActions: string;\n /** The grid's description: how its keyboard works. Read once, on entry. */\n keyboardHint: string;\n /** The text view could not read this 1-based line of what was typed or pasted. */\n lineError: (line: number) => string;\n /** How many filled rows (measured points) the table holds. */\n points: (count: number) => string;\n /** How many cells are typed but are not numbers. */\n problems: (count: number) => string;\n}\n\n/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`\n * (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels = {\n view: \"Table view\",\n cellsView: \"Cells\",\n textView: \"Text\",\n addRow: \"Add row\",\n removeRow: (row) => `Remove row ${row}`,\n clear: \"Clear table\",\n pasteHint: \"Paste a block from a spreadsheet into any cell\",\n cell: (column, row) => `${column}, row ${row}`,\n rowNumber: \"Row\",\n rowActions: \"Row actions\",\n keyboardHint:\n \"Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.\",\n lineError: (line) => `Line ${line} could not be read`,\n points: (count) => (count === 1 ? \"1 point\" : `${count} points`),\n problems: (count) => (count === 1 ? \"1 cell is not a number\" : `${count} cells are not numbers`),\n};\n\n/** One column of a measured table: what it holds and what it is measured in. The unit\n * is separate from the name because the header shows it small and underneath, and\n * because a column with no unit (a count, an index) should not render empty brackets. */\nexport interface MeasuredGridColumn {\n label: string;\n unit?: string;\n}\n\n/** The two ways to look at the same table. */\nexport type MeasuredGridView = \"cells\" | \"text\";\n\n/** A cell that has not been typed into yet. Distinguished from `\"0\"` on purpose: an\n * empty cell is a hole in the measurement, and a table with a hole is not one to save. */\nconst BLANK = \"\";\n\n/** Height of one grid row, in pixels. Fixed, which is what lets the windowing be\n * arithmetic rather than measurement. */\nconst DEFAULT_ROW_HEIGHT = 28;\n\nconst ALL_VIEWS: readonly MeasuredGridView[] = [\"cells\", \"text\"];\n\n/** The locale's decimal mark, as far as a cell can hold it: \",\" or \".\". A mark outside\n * those two (Arabic's \"٫\") is not one `cellNumber` reads, so those locales keep the\n * dot. The same answer `NumberField` gives, for the same reason. */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n try {\n const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n return part?.value === \",\" ? \",\" : \".\";\n } catch {\n // An invalid tag throws a RangeError; a typo in a locale must not take the grid down.\n return \".\";\n }\n}\n\n/** A number-shaped cell written with the locale's mark. The lexer hands back points;\n * a German user typed commas and should read commas back. Anything that is not a\n * number is left exactly as it was, so the mistake stays visible where it was made. */\nconst withMark = (cell: string, mark: \",\" | \".\") =>\n mark === \",\" && isCellNumber(cell) ? cell.replace(\".\", \",\") : cell;\n\n/** A computed number as a draft cell: rounded to `digits`, with no trailing zeros. */\nconst formatCell = (value: number, digits: number, mark: \",\" | \".\") =>\n withMark(String(Number(value.toFixed(digits))), mark);\n\nconst hasContent = (row: readonly string[]) => row.some((cell) => cell.trim() !== \"\");\n\nexport interface UseMeasuredRowsOptions {\n /** Decimals a computed number is rounded to on its way into a cell. Default 4. */\n digits?: number;\n /** BCP 47 tag whose decimal mark the cells are written with, else the\n * `<UiKitProvider locale>`, else the runtime's. */\n locale?: string;\n}\n\nexport interface MeasuredRows {\n /** The draft, as text — what the grid shows and edits. */\n cells: string[][];\n setCells: (next: string[][]) => void;\n /** The filled rows as numbers — EMPTY until the table is `ready`. */\n rows: number[][];\n /** Replace the whole table with computed numbers (a generated shape, say). */\n setRows: (next: number[][]) => void;\n /** At least two filled rows, and every cell in them is a number. */\n ready: boolean;\n /** How many cells are typed but are not numbers — what the grid marks invalid. */\n problems: number;\n /** Everything `MeasuredGrid` needs, so a caller spreads it in one line. */\n props: { cells: string[][]; onCells: (next: string[][]) => void };\n}\n\n/**\n * The draft a measured table is edited as.\n *\n * **Strings, not numbers.** A cell is text while it is being typed — `\"-\"`, `\"1.\"` and\n * `\"1e\"` are all states a number passes through on its way to being one, and a grid\n * that parses on every keystroke turns each of them into a `NaN` and then into a `0`.\n * So the draft is text, and the numbers are what falls out when every cell is one.\n *\n * **\"Whole\" is a question this answers**, because every editor asks it before it\n * offers to save: `ready` wants at least two filled rows with a number in every cell.\n * An empty cell is a hole in the measurement, not a zero; a wholly empty row is not a\n * row at all (it is what walking off the bottom of the grid leaves behind).\n *\n * `initial` is read once, like `useState`'s.\n */\nexport function useMeasuredRows(\n initial: number[][] | (() => number[][]),\n options: UseMeasuredRowsOptions = {},\n): MeasuredRows {\n const { digits = 4 } = options;\n const mark = decimalMark(useKitLocale(options.locale));\n const [cells, setCells] = useState<string[][]>(() =>\n (typeof initial === \"function\" ? initial() : initial).map((row) =>\n row.map((value) => formatCell(value, digits, mark)),\n ),\n );\n\n const { rows, ready, problems } = useMemo(() => {\n const filled = cells.filter(hasContent);\n const whole = filled.length >= 2 && filled.every((row) => row.every(isCellNumber));\n return {\n rows: whole ? filled.map((row) => row.map(cellNumber)) : [],\n ready: whole,\n problems: filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length,\n };\n }, [cells]);\n\n const setRows = useCallback(\n (next: number[][]) => setCells(next.map((row) => row.map((value) => formatCell(value, digits, mark)))),\n [digits, mark],\n );\n const props = useMemo(() => ({ cells, onCells: setCells }), [cells]);\n\n return { cells, setCells, rows, setRows, ready, problems, props };\n}\n\nexport interface MeasuredGridProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onChange\"> {\n /** What the table is — shown above it, and the grid's accessible name. */\n label: string;\n /** A note under the table (which columns a layout expects, say). Also the grid's\n * description. */\n hint?: ReactNode;\n columns: MeasuredGridColumn[];\n /** The draft — typically `useMeasuredRows().props`. */\n cells: string[][];\n onCells: (next: string[][]) => void;\n /** Read-only: the cells can still be walked and read, nothing can be changed. */\n disabled?: boolean;\n /** Which views the toggle offers, the first being where it opens. Default both;\n * one view hides the toggle. */\n views?: ReadonlyArray<MeasuredGridView>;\n /** Row height in pixels, for the windowing. Fixed on purpose. Default 28. */\n rowHeight?: number;\n /** BCP 47 tag for the decimal mark of cells written by a paste or the text view,\n * and for the row numbers; else the `<UiKitProvider locale>`. */\n locale?: string;\n labels?: Partial<MeasuredGridLabels>;\n}\n\n/**\n * A measured table as a grid of cells, one number each, with a text view beside it.\n *\n * The grid is the primary form because a linkage typed off a drawing arrives as\n * numbers somebody reads out loud, and a textarea made that an exercise in counting\n * tab characters. The paste still works: a block pasted into any cell fills from that\n * cell outwards, growing the table to fit. The text view is kept for what a grid is\n * worst at — reading a thousand-row export back in one piece.\n *\n * **It is a grid in the APG sense**, which the Lenkbank original was not (a `<table>`\n * of inputs, fifteen tab stops per row). One tab stop — the roving tabindex — and the\n * keyboard inside it, as a spreadsheet has it:\n *\n * - **Arrows** move between cells. Left/Right flip under `dir=\"rtl\"`.\n * - **Home/End** go to the first/last column; with Ctrl (or ⌘), to the first/last\n * cell of the table. **PageUp/PageDown** move a screenful.\n * - **Enter** (and ArrowDown) move down a column, and past the last row ADD one —\n * typing down a column is how measured data is entered, and stopping at the last\n * row to reach for a button is what makes people paste instead. Shift+Enter moves up.\n * - **Typing** replaces the cell: arriving by keyboard selects its text, so the first\n * key overwrites it. That is the edit mode data entry wants, entered without a key.\n * **F2** edits in place instead (caret at the end). Either way the cell is then\n * *editing*: Left/Right move the caret, and cross to the next cell only at the edge\n * of the text; Home/End stay in the text. **Escape** puts back what the cell held\n * when the caret arrived, and leaves editing.\n *\n * APG's grid pattern pairs Enter with F2 as the keys that start editing. Enter is\n * spent on \"next row\" here on purpose — it is the one key a person typing a column of\n * numbers presses between every one of them, and every spreadsheet spends it the same\n * way — and typing-to-replace makes an explicit \"start editing\" key unnecessary for\n * the common case. F2 remains for the uncommon one.\n */\nexport function MeasuredGrid({\n label,\n hint,\n columns,\n cells,\n onCells,\n disabled,\n views = ALL_VIEWS,\n rowHeight = DEFAULT_ROW_HEIGHT,\n locale: localeProp,\n labels: labelsProp,\n className,\n ...rest\n}: MeasuredGridProps) {\n const labels = useKitLabels(\"measuredGrid\", DEFAULT_MEASURED_GRID_LABELS, labelsProp);\n const locale = useKitLocale(localeProp);\n const mark = decimalMark(locale);\n const id = useId();\n const labelId = `${id}-label`;\n const hintId = `${id}-hint`;\n const keysId = `${id}-keys`;\n const offered = views.length ? views : ALL_VIEWS;\n const [chosen, setChosen] = useState<MeasuredGridView>(offered[0]);\n const view = offered.includes(chosen) ? chosen : offered[0];\n\n return (\n // `relative` so the keyboard description below can be `sr-only` without escaping\n // to the initial containing block (see sr-only-containment.test).\n <div {...rest} className={cn(\"relative\", className)}>\n <div className=\"mb-1 flex flex-wrap items-center justify-between gap-2\">\n <span id={labelId} className=\"text-[11px] font-medium text-[var(--text-muted)]\">\n {label}\n </span>\n {offered.length > 1 && (\n <ToggleGroup\n className=\"w-auto\"\n aria-label={labels.view}\n value={view}\n onChange={setChosen}\n options={offered.map((value) => ({\n value,\n label: value === \"cells\" ? labels.cellsView : labels.textView,\n }))}\n />\n )}\n </div>\n {view === \"cells\" ? (\n <CellGrid\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n rowHeight={rowHeight}\n locale={locale}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? `${keysId} ${hintId}` : keysId}\n />\n ) : (\n <TextView\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? hintId : undefined}\n />\n )}\n {hint && (\n <p id={hintId} className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {view === \"cells\" && (\n <span id={keysId} className=\"sr-only\">\n {labels.keyboardHint}\n </span>\n )}\n </div>\n );\n}\n\n/** Where the caret is. Held in state rather than read off `document`, because a\n * windowed grid unmounts the cell being walked towards: the move is decided first and\n * focused after the row it lands on has been rendered. */\ninterface Caret {\n row: number;\n column: number;\n}\n\ninterface ViewProps {\n columns: MeasuredGridColumn[];\n cells: string[][];\n onCells: (next: string[][]) => void;\n disabled?: boolean;\n mark: \",\" | \".\";\n labels: MeasuredGridLabels;\n labelledBy: string;\n describedBy?: string;\n}\n\nfunction CellGrid({\n columns,\n cells,\n onCells,\n disabled,\n rowHeight,\n locale,\n mark,\n labels,\n labelledBy,\n describedBy,\n}: ViewProps & { rowHeight: number; locale: string | undefined }) {\n const scrollRef = useRef<HTMLDivElement>(null);\n const headRef = useRef<HTMLDivElement>(null);\n const width = columns.length;\n const blankRow = () => columns.map(() => BLANK);\n // At least one row to type into: a grid with nothing in it has nowhere to put the\n // first number, and \"add a row\" is not the first thing to ask of someone who has\n // just opened an empty table. It is not written back until something is typed.\n const grid = cells.length ? cells : [blankRow()];\n const { first, last, totalHeight } = useWindowedRows(grid.length, rowHeight, scrollRef);\n const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n\n // The remove buttons are the last column of the grid, reachable by the arrows like\n // any cell — except where they are disabled (a read-only grid, or the placeholder\n // row of an empty one), because a disabled button cannot hold the tab stop.\n const removable = !disabled && cells.length > 0;\n const lastColumn = removable ? width : width - 1;\n\n const [caret, setCaret] = useState<Caret>({ row: 0, column: 0 });\n // Clamped on read, not corrected in an effect: rows removed or columns changed from\n // outside must never leave the tab stop on a cell that is not there.\n const at = { row: Math.min(caret.row, grid.length - 1), column: Math.min(caret.column, lastColumn) };\n /** Whether the caret cell is being edited in place (see the component note). */\n const [editing, setEditing] = useState(false);\n /** A cell that has to take focus once it exists — one commit away when the move\n * crossed the edge of the window. `select` is arrival by keyboard. */\n const pending = useRef<(Caret & { select: boolean }) | null>(null);\n /** What the caret cell held when the caret arrived: what Escape puts back. */\n const origin = useRef(BLANK);\n /** The next focus was a pointer's: place the caret where it was clicked, edit. */\n const pointer = useRef(false);\n\n useEffect(() => {\n const target = pending.current;\n if (!target) return;\n const element = scrollRef.current?.querySelector<HTMLElement>(\n `[data-cell=\"${target.row}:${target.column}\"]`,\n );\n if (!element) return;\n pending.current = null;\n // `preventScroll`: `reveal` already scrolled the row clear of the sticky header,\n // which the browser's own scroll-into-view does not know is there.\n element.focus({ preventScroll: true });\n if (target.select && element instanceof HTMLInputElement) element.select();\n });\n\n const pad = (row: readonly string[] | undefined) =>\n Array.from({ length: width }, (_, index) => row?.[index] ?? BLANK);\n\n const setCell = (row: number, column: number, value: string) => {\n const next = grid.map(pad);\n next[row][column] = value;\n onCells(next);\n };\n\n /** Scroll `row` into the band below the sticky header. */\n const reveal = (row: number) => {\n const element = scrollRef.current;\n if (!element) return;\n const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);\n if (room <= 0) return;\n const top = row * rowHeight;\n if (top < element.scrollTop) element.scrollTop = top;\n else if (top + rowHeight > element.scrollTop + room) element.scrollTop = top + rowHeight - room;\n };\n\n const focusCell = (row: number, column: number) => {\n reveal(row);\n pending.current = { row, column, select: true };\n setCaret({ row, column });\n setEditing(false);\n };\n\n const go = (row: number, column: number) => {\n const target = {\n row: Math.max(0, Math.min(row, grid.length - 1)),\n column: Math.max(0, Math.min(column, lastColumn)),\n };\n if (target.row === at.row && target.column === at.column) return;\n focusCell(target.row, target.column);\n };\n\n /** Down a column — and off the bottom, a new row, unless the last one is still\n * empty: holding ArrowDown should not leave a trail of blank rows behind it. */\n const down = (row: number, column: number) => {\n if (row + 1 < grid.length) return go(row + 1, column);\n if (disabled || !hasContent(grid[row])) return;\n onCells([...grid.map(pad), blankRow()]);\n focusCell(row + 1, Math.min(column, width - 1));\n };\n\n const page = () => {\n const element = scrollRef.current;\n const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;\n // No layout (a hidden pane, jsdom): a fixed ten rather than one row at a time.\n return room > 0 ? Math.max(1, Math.floor(room / rowHeight) - 1) : 10;\n };\n\n /**\n * On each cell rather than once on the grid, for the reason `MiniCalendar` gives:\n * the cell is where focus is, and a container listening for keys it cannot receive\n * is the shape `jsx-a11y/interactive-supports-focus` objects to.\n */\n const onCellKeyDown = (event: KeyboardEvent<HTMLElement>, row: number, column: number) => {\n const input = event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;\n const inText = Boolean(input) && editing;\n const modified = event.ctrlKey || event.metaKey;\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n return go(row - 1, column);\n case \"ArrowDown\":\n event.preventDefault();\n return down(row, column);\n case \"Enter\":\n // On the remove button Enter is the button's own.\n if (!input) return;\n event.preventDefault();\n return event.shiftKey ? go(row - 1, column) : down(row, column);\n case \"ArrowLeft\":\n case \"ArrowRight\": {\n // Along the reading direction: ArrowLeft is \"next column\" in RTL.\n const forward = horizontalStep(event.key, event.currentTarget) === 1;\n if (inText && input) {\n const edge = forward ? input.value.length : 0;\n // Inside the text the caret moves; only at its edge does it leave the cell.\n if (input.selectionStart !== edge || input.selectionEnd !== edge) return;\n }\n event.preventDefault();\n return go(row, column + (forward ? 1 : -1));\n }\n case \"Home\":\n case \"End\": {\n if (inText && !modified) return;\n event.preventDefault();\n const home = event.key === \"Home\";\n if (modified) return go(home ? 0 : grid.length - 1, home ? 0 : width - 1);\n return go(row, home ? 0 : width - 1);\n }\n case \"PageUp\":\n event.preventDefault();\n return go(row - page(), column);\n case \"PageDown\":\n event.preventDefault();\n return go(row + page(), column);\n case \"F2\":\n if (!input || disabled) return;\n event.preventDefault();\n setEditing(true);\n input.setSelectionRange(input.value.length, input.value.length);\n return;\n case \"Escape\":\n // Not editing: nothing of ours to undo, so the key belongs to whatever the\n // grid sits in — the dialog it is in closes, as it should.\n if (!input || !editing) return;\n event.preventDefault();\n event.stopPropagation();\n if (input.value !== origin.current) setCell(row, column, origin.current);\n pending.current = { row, column, select: true };\n setEditing(false);\n return;\n }\n };\n\n /**\n * A pasted block, written in from the cell it was pasted into.\n *\n * Rows past the end grow the table; columns past the last are dropped, because a\n * paste wider than the measurement is a paste with a trailing timestamp column and\n * not an error worth refusing. One header line is skipped — pasted data almost\n * always has one. Each line is read on its own evidence (`splitRow`, the per-line\n * comma rule), so one line cannot change what another means.\n */\n const paste = (row: number, column: number, text: string) => {\n const lines = text.split(/\\r?\\n/).filter((line) => line.trim() !== \"\");\n if (!lines.length) return;\n const block = lines.map(splitRow);\n if (block.length > 1 && block[0].some((cell) => !isCellNumber(cell))) block.shift();\n\n const height = Math.max(grid.length, row + block.length);\n const next = Array.from({ length: height }, (_, index) => pad(grid[index]));\n block.forEach((line, downwards) => {\n line.forEach((cell, across) => {\n const target = column + across;\n if (target < width) next[row + downwards][target] = withMark(cell.trim(), mark);\n });\n });\n onCells(next);\n pending.current = { row, column, select: true };\n setEditing(false);\n };\n\n const template = `2.5rem repeat(${width}, minmax(5.5rem, 1fr)) 2rem`;\n // The caret's row is mounted even when it has been scrolled out of the window: it\n // holds the grid's only tab stop, and a tab stop that is not in the DOM is a grid\n // Tab walks straight past.\n const mounted: number[] = [];\n for (let index = first; index < last; index += 1) mounted.push(index);\n if (at.row < first || at.row >= last) mounted.push(at.row);\n\n const filled = cells.filter(hasContent);\n const problems = filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length;\n\n return (\n <div className=\"rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\">\n <div ref={scrollRef} className=\"max-h-72 overflow-auto\">\n <div\n role=\"grid\"\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n // The true size, not the mounted one: a screen reader otherwise reports the\n // thirty rows in the window as the whole table.\n aria-rowcount={grid.length + 1}\n aria-colcount={width + 2}\n aria-readonly={disabled || undefined}\n className=\"text-xs\"\n style={{ minWidth: `calc(4.5rem + ${width} * 5.5rem)` }}\n >\n {/* The header stays put vertically and scrolls sideways with the body, so a\n fifteen-column linkage can be read without losing which column is which. */}\n <div ref={headRef} role=\"rowgroup\" className=\"sticky top-0 z-10 bg-[var(--bg-surface-2)]\">\n <div\n role=\"row\"\n aria-rowindex={1}\n className=\"grid border-b border-[var(--border)]\"\n style={{ gridTemplateColumns: template }}\n >\n <div\n role=\"columnheader\"\n aria-label={labels.rowNumber}\n className=\"flex items-end justify-end px-1 py-1 text-[10px] text-[var(--text-placeholder)]\"\n >\n #\n </div>\n {columns.map((column, index) => (\n <div\n key={index}\n role=\"columnheader\"\n className=\"min-w-0 border-s border-[var(--border)] px-2 py-1 text-end\"\n >\n <span className=\"block truncate font-medium text-[var(--text-primary)]\">\n {column.label}\n </span>\n {column.unit && (\n <span className=\"block truncate text-[10px] text-[var(--text-muted)]\">\n {column.unit}\n </span>\n )}\n </div>\n ))}\n <div\n role=\"columnheader\"\n aria-label={labels.rowActions}\n className=\"border-s border-[var(--border)]\"\n />\n </div>\n </div>\n {/* Only the rows in the window are mounted — a swept linkage is thousands of\n them across fifteen inputs — each placed at its own offset, so mounting\n one more (the caret's) costs nothing in the arithmetic. */}\n <div role=\"rowgroup\" className=\"relative\" style={{ height: totalHeight }}>\n {mounted.map((index) => {\n const row = grid[index];\n return (\n <div\n key={index}\n role=\"row\"\n aria-rowindex={index + 2}\n className=\"absolute inset-x-0 grid hover:bg-[var(--bg-hover)]\"\n style={{ top: index * rowHeight, height: rowHeight, gridTemplateColumns: template }}\n >\n <div\n role=\"rowheader\"\n className=\"flex items-center justify-end px-1 text-[10px] tabular-nums text-[var(--text-placeholder)]\"\n >\n {rowNumber.format(index + 1)}\n </div>\n {columns.map((column, columnIndex) => {\n const value = row[columnIndex] ?? BLANK;\n const bad = value.trim() !== \"\" && !isCellNumber(value);\n const isCaret = at.row === index && at.column === columnIndex;\n return (\n <div key={columnIndex} role=\"gridcell\" className=\"min-w-0 border-s border-[var(--border)]\">\n <input\n data-cell={`${index}:${columnIndex}`}\n value={value}\n // `readOnly`, not `disabled`: a disabled input cannot take\n // focus, and a read-only table should still be walkable.\n readOnly={disabled}\n tabIndex={isCaret ? 0 : -1}\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n aria-label={labels.cell(column.label, index + 1)}\n // Said, not only painted: the ring is what a sighted user\n // sees, `aria-invalid` is what a screen reader reads.\n aria-invalid={bad || undefined}\n className={cn(\n \"block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none\",\n // Arriving selects the text (typing replaces it); editing\n // in place is the plain surface with a caret in it.\n \"focus:bg-[var(--brand-bg)] focus:ring-2 focus:ring-inset focus:ring-[var(--brand)]\",\n isCaret && editing && \"focus:bg-[var(--bg-surface)]\",\n disabled && \"text-[var(--text-muted)]\",\n bad && cn(FIELD_INVALID, \"ring-inset\"),\n )}\n onMouseDown={(event) => {\n // A click places a caret, which is editing. On the cell\n // already focused there is no focus event to say so.\n if (document.activeElement === event.currentTarget) setEditing(!disabled);\n else pointer.current = true;\n }}\n onFocus={(event) => {\n origin.current = event.currentTarget.value;\n if (!isCaret) setCaret({ row: index, column: columnIndex });\n const byPointer = pointer.current;\n pointer.current = false;\n setEditing(byPointer && !disabled);\n if (!byPointer) event.currentTarget.select();\n }}\n onBlur={() => setEditing(false)}\n onChange={(event) => {\n setCell(index, columnIndex, event.target.value);\n setEditing(true);\n }}\n onPaste={(event) => {\n if (disabled) return;\n const text = event.clipboardData.getData(\"text/plain\");\n // One cell's worth of text is an ordinary paste, and the\n // browser does it better than this would; only a block is\n // the grid's business.\n if (!/[\\t\\n;]/.test(text)) return;\n event.preventDefault();\n paste(index, columnIndex, text);\n }}\n onKeyDown={(event) => onCellKeyDown(event, index, columnIndex)}\n />\n </div>\n );\n })}\n <div\n role=\"gridcell\"\n className=\"flex items-center justify-center border-s border-[var(--border)]\"\n >\n <button\n type=\"button\"\n data-cell={`${index}:${width}`}\n disabled={!removable}\n tabIndex={at.row === index && at.column === width ? 0 : -1}\n aria-label={labels.removeRow(index + 1)}\n className=\"rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] focus-visible:ring-2 focus-visible:ring-[var(--brand)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]\"\n onKeyDown={(event) => onCellKeyDown(event, index, width)}\n onFocus={() => {\n if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });\n }}\n onClick={() => {\n const next = grid.filter((_, other) => other !== index);\n onCells(next);\n // Focus stays in the column, on the row that moved up into\n // this one; an emptied table sends it to the first cell.\n if (next.length) focusCell(Math.min(index, next.length - 1), width);\n else focusCell(0, 0);\n }}\n >\n <Trash2 aria-hidden className=\"size-3.5\" />\n </button>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5\">\n <Button\n variant=\"ghost\"\n className=\"px-2 py-1 text-xs\"\n disabled={disabled}\n onClick={() => {\n onCells([...grid.map(pad), blankRow()]);\n focusCell(grid.length, 0);\n }}\n >\n <Plus aria-hidden className=\"size-3.5\" /> {labels.addRow}\n </Button>\n <Button\n variant=\"ghost\"\n className=\"px-2 py-1 text-xs text-[var(--text-muted)]\"\n disabled={disabled || !cells.length}\n onClick={() => {\n onCells([]);\n // The button is about to disable itself; focus must not go down with it.\n focusCell(0, 0);\n }}\n >\n <Eraser aria-hidden className=\"size-3.5\" /> {labels.clear}\n </Button>\n <span className=\"text-[11px] tabular-nums text-[var(--text-muted)]\">\n {/* bdi: an LTR label (\"3 points\") in an RTL grid would reorder to \"points 3\". */}\n <bdi>{labels.points(filled.length)}</bdi>\n </span>\n {problems > 0 && (\n <span className=\"text-[11px] text-[var(--danger)]\">{labels.problems(problems)}</span>\n )}\n <span className=\"ms-auto flex items-center gap-1 text-[11px] text-[var(--text-muted)]\">\n <ClipboardPaste aria-hidden className=\"size-3.5\" /> {labels.pasteHint}\n </span>\n </div>\n </div>\n );\n}\n\nconst textOf = (cells: string[][]) => cells.map((row) => row.join(\"\\t\")).join(\"\\n\");\n\n/**\n * The same table as text.\n *\n * Kept because the grid is worst at exactly what a textarea is best at: reading a long\n * export back in one piece. It commits on blur — through `parseRows`, the paste door —\n * and a line it cannot read is NAMED rather than dropped: half a sweep saved as a\n * measurement is worse than a refusal.\n */\nfunction TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy, describedBy }: ViewProps) {\n const text = textOf(cells);\n const [draft, setDraft] = useState(text);\n const [errorLine, setErrorLine] = useState<number | null>(null);\n // Follow the table when it changes from outside (a generated shape, a cleared form).\n // Compared as text, so a caller that rebuilds the same cells every render does not\n // wipe what is being typed.\n const [seen, setSeen] = useState(text);\n if (seen !== text) {\n setSeen(text);\n setDraft(text);\n setErrorLine(null);\n }\n\n const commit = () => {\n // Untouched: nothing to read back, and re-reading would rewrite every cell in the\n // lexer's spelling of it.\n if (draft === text) return;\n if (!draft.trim()) {\n setErrorLine(null);\n onCells([]);\n return;\n }\n const parsed = parseRows(draft, columns.length);\n if (\"error\" in parsed) {\n setErrorLine(parsed.error);\n return;\n }\n setErrorLine(null);\n onCells(parsed.rows.map((row) => row.map((value) => withMark(String(value), mark))));\n };\n\n const lines = draft.split(\"\\n\").filter((line) => line.trim()).length;\n\n return (\n <div>\n <Textarea\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n rows={10}\n value={draft}\n readOnly={disabled}\n spellCheck={false}\n className=\"font-mono text-xs\"\n error={errorLine !== null ? labels.lineError(errorLine) : undefined}\n onChange={(event) => setDraft(event.target.value)}\n onBlur={commit}\n />\n <p className=\"mt-1 px-1 text-[11px] text-[var(--text-muted)]\">\n {columns.map((column) => column.label).join(\" · \")}\n {\" — \"}\n <bdi>{labels.points(lines)}</bdi>\n </p>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/measured-grid.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, KeyboardEvent, ReactNode } from \"react\";\nimport { ClipboardPaste, Eraser, Plus, Trash2 } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { horizontalStep } from \"../lib/direction\";\n// The cell pair reads ONE cell, where a comma has no columns to separate and so is\n// always a decimal mark; `splitRow` and `parseRows` read a pasted table, where it may\n// be either and the line decides. See the three named rules at the top of table-text.\nimport { cellNumber, isCellNumber, parseRows, splitRow } from \"../lib/table-text\";\nimport { useKitLabels, useKitLocale } from \"../i18n/kit-labels\";\nimport { useWindowedRows, WINDOWED_ROW_INDEX } from \"../hooks/use-windowed-rows\";\nimport { ToggleGroup } from \"./toggle-group\";\nimport { Button, FIELD_INVALID, FIELD_TOUCH_TEXT, FOCUS_RING, Textarea } from \"./ui\";\n\n/**\n * A measured table: a fixed set of numeric columns, typed cell by cell or pasted as a\n * block out of a spreadsheet — and the hook that holds it as a draft.\n *\n * Moved from Lenkbank (`shared/ui/measured-grid.tsx`), where four gear editors and a\n * setpoint dialog type rig measurements into it. Nothing in it knows what a column\n * holds: the caller passes `{ label, unit }[]`, and the vocabulary of this file is\n * cells, rows, a caret and a paste. The lexing under it is `@eifi1/ui-kit/table-text`.\n *\n * What it is NOT: a `DataTable` mode (that one finds rows among many; this one types\n * numbers into columns), a spreadsheet (no formulas, no multi-cell selection, no undo\n * beyond the browser's per-input one), or typed columns — every cell is a string that\n * should read as a number.\n */\n\n/**\n * Every string the grid can speak — the `measuredGrid` namespace of\n * `<UiKitProvider labels>`, overridable per instance through the `labels` prop. The\n * ones that carry a number are functions of it, for the reason `DataTableLabels` gives:\n * the grammar around a count moves with it in most languages.\n */\nexport interface MeasuredGridLabels {\n /** Accessible name of the cells/text toggle. */\n view: string;\n cellsView: string;\n textView: string;\n addRow: string;\n /** The row's remove button, given its 1-based number. */\n removeRow: (row: number) => string;\n /** Empties the whole table. */\n clear: string;\n /** The footer's standing note that a block can be pasted into any cell. */\n pasteHint: string;\n /**\n * Accessible name of one cell's input, given its column's label and 1-based row.\n * A screen reader in a grid announces the headers on its own when the caret crosses\n * one; this is what it reads when the caret lands on an input with no crossing — and\n * what a voice-control user says to reach it.\n */\n cell: (column: string, row: number) => string;\n /** The row-number column's header, which shows only \"#\". */\n rowNumber: string;\n /** The remove-button column's header, which shows nothing. */\n rowActions: string;\n /** The grid's description: how its keyboard works. Read once, on entry. */\n keyboardHint: string;\n /** The text view could not read this 1-based line of what was typed or pasted. */\n lineError: (line: number) => string;\n /** How many filled rows (measured points) the table holds. */\n points: (count: number) => string;\n /** How many cells are typed but are not numbers. */\n problems: (count: number) => string;\n}\n\n/** English defaults. Exported as the `measuredGrid` namespace of `UiKitLabels`\n * (src/i18n), the complete reference a translation is written against. */\nexport const DEFAULT_MEASURED_GRID_LABELS: MeasuredGridLabels = {\n view: \"Table view\",\n cellsView: \"Cells\",\n textView: \"Text\",\n addRow: \"Add row\",\n removeRow: (row) => `Remove row ${row}`,\n clear: \"Clear table\",\n pasteHint: \"Paste a block from a spreadsheet into any cell\",\n cell: (column, row) => `${column}, row ${row}`,\n rowNumber: \"Row\",\n rowActions: \"Row actions\",\n keyboardHint:\n \"Arrow keys move between cells. Type to replace a cell, F2 to edit it, Escape to undo the edit. Enter moves down and adds a row at the end.\",\n lineError: (line) => `Line ${line} could not be read`,\n points: (count) => (count === 1 ? \"1 point\" : `${count} points`),\n problems: (count) => (count === 1 ? \"1 cell is not a number\" : `${count} cells are not numbers`),\n};\n\n/** One column of a measured table: what it holds and what it is measured in. The unit\n * is separate from the name because the header shows it small and underneath, and\n * because a column with no unit (a count, an index) should not render empty brackets. */\nexport interface MeasuredGridColumn {\n label: string;\n unit?: string;\n}\n\n/** The two ways to look at the same table. */\nexport type MeasuredGridView = \"cells\" | \"text\";\n\n/** A cell that has not been typed into yet. Distinguished from `\"0\"` on purpose: an\n * empty cell is a hole in the measurement, and a table with a hole is not one to save. */\nconst BLANK = \"\";\n\n/** Height of one grid row at Normal text size, in px — the windowing's ESTIMATE since\n * 0.32 (docs/text-size-harmonization.md §10.9): `useWindowedRows` multiplies it by the\n * text size's scale (35 px at Large, 42 at Extra large) and then measures the rows it\n * renders, so a row is never cut to a height the type has outgrown. */\nconst DEFAULT_ROW_HEIGHT = 28;\n\nconst ALL_VIEWS: readonly MeasuredGridView[] = [\"cells\", \"text\"];\n\n/** The locale's decimal mark, as far as a cell can hold it: \",\" or \".\". A mark outside\n * those two (Arabic's \"٫\") is not one `cellNumber` reads, so those locales keep the\n * dot. The same answer `NumberField` gives, for the same reason. */\nfunction decimalMark(locale: string | undefined): \",\" | \".\" {\n try {\n const part = new Intl.NumberFormat(locale).formatToParts(1.5).find((p) => p.type === \"decimal\");\n return part?.value === \",\" ? \",\" : \".\";\n } catch {\n // An invalid tag throws a RangeError; a typo in a locale must not take the grid down.\n return \".\";\n }\n}\n\n/** A number-shaped cell written with the locale's mark. The lexer hands back points;\n * a German user typed commas and should read commas back. Anything that is not a\n * number is left exactly as it was, so the mistake stays visible where it was made. */\nconst withMark = (cell: string, mark: \",\" | \".\") =>\n mark === \",\" && isCellNumber(cell) ? cell.replace(\".\", \",\") : cell;\n\n/** A computed number as a draft cell: rounded to `digits`, with no trailing zeros. */\nconst formatCell = (value: number, digits: number, mark: \",\" | \".\") =>\n withMark(String(Number(value.toFixed(digits))), mark);\n\nconst hasContent = (row: readonly string[]) => row.some((cell) => cell.trim() !== \"\");\n\nexport interface UseMeasuredRowsOptions {\n /** Decimals a computed number is rounded to on its way into a cell. Default 4. */\n digits?: number;\n /** BCP 47 tag whose decimal mark the cells are written with, else the\n * `<UiKitProvider locale>`, else the runtime's. */\n locale?: string;\n}\n\nexport interface MeasuredRows {\n /** The draft, as text — what the grid shows and edits. */\n cells: string[][];\n setCells: (next: string[][]) => void;\n /** The filled rows as numbers — EMPTY until the table is `ready`. */\n rows: number[][];\n /** Replace the whole table with computed numbers (a generated shape, say). */\n setRows: (next: number[][]) => void;\n /** At least two filled rows, and every cell in them is a number. */\n ready: boolean;\n /** How many cells are typed but are not numbers — what the grid marks invalid. */\n problems: number;\n /** Everything `MeasuredGrid` needs, so a caller spreads it in one line. */\n props: { cells: string[][]; onCells: (next: string[][]) => void };\n}\n\n/**\n * The draft a measured table is edited as.\n *\n * **Strings, not numbers.** A cell is text while it is being typed — `\"-\"`, `\"1.\"` and\n * `\"1e\"` are all states a number passes through on its way to being one, and a grid\n * that parses on every keystroke turns each of them into a `NaN` and then into a `0`.\n * So the draft is text, and the numbers are what falls out when every cell is one.\n *\n * **\"Whole\" is a question this answers**, because every editor asks it before it\n * offers to save: `ready` wants at least two filled rows with a number in every cell.\n * An empty cell is a hole in the measurement, not a zero; a wholly empty row is not a\n * row at all (it is what walking off the bottom of the grid leaves behind).\n *\n * `initial` is read once, like `useState`'s.\n */\nexport function useMeasuredRows(\n initial: number[][] | (() => number[][]),\n options: UseMeasuredRowsOptions = {},\n): MeasuredRows {\n const { digits = 4 } = options;\n const mark = decimalMark(useKitLocale(options.locale));\n const [cells, setCells] = useState<string[][]>(() =>\n (typeof initial === \"function\" ? initial() : initial).map((row) =>\n row.map((value) => formatCell(value, digits, mark)),\n ),\n );\n\n const { rows, ready, problems } = useMemo(() => {\n const filled = cells.filter(hasContent);\n const whole = filled.length >= 2 && filled.every((row) => row.every(isCellNumber));\n return {\n rows: whole ? filled.map((row) => row.map(cellNumber)) : [],\n ready: whole,\n problems: filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length,\n };\n }, [cells]);\n\n const setRows = useCallback(\n (next: number[][]) => setCells(next.map((row) => row.map((value) => formatCell(value, digits, mark)))),\n [digits, mark],\n );\n const props = useMemo(() => ({ cells, onCells: setCells }), [cells]);\n\n return { cells, setCells, rows, setRows, ready, problems, props };\n}\n\nexport interface MeasuredGridProps\n extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"onChange\"> {\n /** What the table is — shown above it, and the grid's accessible name. */\n label: string;\n /** A note under the table (which columns a layout expects, say). Also the grid's\n * description. */\n hint?: ReactNode;\n columns: MeasuredGridColumn[];\n /** The draft — typically `useMeasuredRows().props`. */\n cells: string[][];\n onCells: (next: string[][]) => void;\n /** Read-only: the cells can still be walked and read, nothing can be changed. */\n disabled?: boolean;\n /** Which views the toggle offers, the first being where it opens. Default both;\n * one view hides the toggle. */\n views?: ReadonlyArray<MeasuredGridView>;\n /** A row's height at Normal text size, in px. Default 28. Since 0.32 it is the\n * windowing's estimate and each row's minimum, multiplied by the text size's scale;\n * the rendered rows are measured (docs/text-size-harmonization.md §10.9). */\n rowHeight?: number;\n /** BCP 47 tag for the decimal mark of cells written by a paste or the text view,\n * and for the row numbers; else the `<UiKitProvider locale>`. */\n locale?: string;\n labels?: Partial<MeasuredGridLabels>;\n}\n\n/**\n * A measured table as a grid of cells, one number each, with a text view beside it.\n *\n * The grid is the primary form because a linkage typed off a drawing arrives as\n * numbers somebody reads out loud, and a textarea made that an exercise in counting\n * tab characters. The paste still works: a block pasted into any cell fills from that\n * cell outwards, growing the table to fit. The text view is kept for what a grid is\n * worst at — reading a thousand-row export back in one piece.\n *\n * **It is a grid in the APG sense**, which the Lenkbank original was not (a `<table>`\n * of inputs, fifteen tab stops per row). One tab stop — the roving tabindex — and the\n * keyboard inside it, as a spreadsheet has it:\n *\n * - **Arrows** move between cells. Left/Right flip under `dir=\"rtl\"`.\n * - **Home/End** go to the first/last column; with Ctrl (or ⌘), to the first/last\n * cell of the table. **PageUp/PageDown** move a screenful.\n * - **Enter** (and ArrowDown) move down a column, and past the last row ADD one —\n * typing down a column is how measured data is entered, and stopping at the last\n * row to reach for a button is what makes people paste instead. Shift+Enter moves up.\n * - **Typing** replaces the cell: arriving by keyboard selects its text, so the first\n * key overwrites it. That is the edit mode data entry wants, entered without a key.\n * **F2** edits in place instead (caret at the end). Either way the cell is then\n * *editing*: Left/Right move the caret, and cross to the next cell only at the edge\n * of the text; Home/End stay in the text. **Escape** puts back what the cell held\n * when the caret arrived, and leaves editing.\n *\n * APG's grid pattern pairs Enter with F2 as the keys that start editing. Enter is\n * spent on \"next row\" here on purpose — it is the one key a person typing a column of\n * numbers presses between every one of them, and every spreadsheet spends it the same\n * way — and typing-to-replace makes an explicit \"start editing\" key unnecessary for\n * the common case. F2 remains for the uncommon one.\n */\nexport function MeasuredGrid({\n label,\n hint,\n columns,\n cells,\n onCells,\n disabled,\n views = ALL_VIEWS,\n rowHeight = DEFAULT_ROW_HEIGHT,\n locale: localeProp,\n labels: labelsProp,\n className,\n ...rest\n}: MeasuredGridProps) {\n const labels = useKitLabels(\"measuredGrid\", DEFAULT_MEASURED_GRID_LABELS, labelsProp);\n const locale = useKitLocale(localeProp);\n const mark = decimalMark(locale);\n const id = useId();\n const labelId = `${id}-label`;\n const hintId = `${id}-hint`;\n const keysId = `${id}-keys`;\n const offered = views.length ? views : ALL_VIEWS;\n const [chosen, setChosen] = useState<MeasuredGridView>(offered[0]);\n const view = offered.includes(chosen) ? chosen : offered[0];\n\n return (\n // `relative` so the keyboard description below can be `sr-only` without escaping\n // to the initial containing block (see sr-only-containment.test).\n <div {...rest} className={cn(\"relative\", className)}>\n <div className=\"mb-1 flex flex-wrap items-center justify-between gap-2\">\n <span id={labelId} className=\"text-caption font-medium text-[var(--text-muted)]\">\n {label}\n </span>\n {offered.length > 1 && (\n <ToggleGroup\n className=\"w-auto\"\n aria-label={labels.view}\n value={view}\n onChange={setChosen}\n options={offered.map((value) => ({\n value,\n label: value === \"cells\" ? labels.cellsView : labels.textView,\n }))}\n />\n )}\n </div>\n {view === \"cells\" ? (\n <CellGrid\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n rowHeight={rowHeight}\n locale={locale}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? `${keysId} ${hintId}` : keysId}\n />\n ) : (\n <TextView\n columns={columns}\n cells={cells}\n onCells={onCells}\n disabled={disabled}\n mark={mark}\n labels={labels}\n labelledBy={labelId}\n describedBy={hint ? hintId : undefined}\n />\n )}\n {hint && (\n <p id={hintId} className=\"mt-1 px-1 text-caption text-[var(--text-muted)]\">\n {hint}\n </p>\n )}\n {view === \"cells\" && (\n <span id={keysId} className=\"sr-only\">\n {labels.keyboardHint}\n </span>\n )}\n </div>\n );\n}\n\n/** Where the caret is. Held in state rather than read off `document`, because a\n * windowed grid unmounts the cell being walked towards: the move is decided first and\n * focused after the row it lands on has been rendered. */\ninterface Caret {\n row: number;\n column: number;\n}\n\ninterface ViewProps {\n columns: MeasuredGridColumn[];\n cells: string[][];\n onCells: (next: string[][]) => void;\n disabled?: boolean;\n mark: \",\" | \".\";\n labels: MeasuredGridLabels;\n labelledBy: string;\n describedBy?: string;\n}\n\nfunction CellGrid({\n columns,\n cells,\n onCells,\n disabled,\n rowHeight,\n locale,\n mark,\n labels,\n labelledBy,\n describedBy,\n}: ViewProps & { rowHeight: number; locale: string | undefined }) {\n const scrollRef = useRef<HTMLDivElement>(null);\n const headRef = useRef<HTMLDivElement>(null);\n const width = columns.length;\n const blankRow = () => columns.map(() => BLANK);\n // At least one row to type into: a grid with nothing in it has nowhere to put the\n // first number, and \"add a row\" is not the first thing to ask of someone who has\n // just opened an empty table. It is not written back until something is typed.\n const grid = cells.length ? cells : [blankRow()];\n const { first, last, totalHeight, offsetOf, heightOf, estimate, measureRef } = useWindowedRows(\n grid.length,\n rowHeight,\n scrollRef,\n );\n const rowNumber = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n\n // The remove buttons are the last column of the grid, reachable by the arrows like\n // any cell — except where they are disabled (a read-only grid, or the placeholder\n // row of an empty one), because a disabled button cannot hold the tab stop.\n const removable = !disabled && cells.length > 0;\n const lastColumn = removable ? width : width - 1;\n\n const [caret, setCaret] = useState<Caret>({ row: 0, column: 0 });\n // Clamped on read, not corrected in an effect: rows removed or columns changed from\n // outside must never leave the tab stop on a cell that is not there.\n const at = { row: Math.min(caret.row, grid.length - 1), column: Math.min(caret.column, lastColumn) };\n /** Whether the caret cell is being edited in place (see the component note). */\n const [editing, setEditing] = useState(false);\n /** A cell that has to take focus once it exists — one commit away when the move\n * crossed the edge of the window. `select` is arrival by keyboard. */\n const pending = useRef<(Caret & { select: boolean }) | null>(null);\n /** What the caret cell held when the caret arrived: what Escape puts back. */\n const origin = useRef(BLANK);\n /** The next focus was a pointer's: place the caret where it was clicked, edit. */\n const pointer = useRef(false);\n\n useEffect(() => {\n const target = pending.current;\n if (!target) return;\n const element = scrollRef.current?.querySelector<HTMLElement>(\n `[data-cell=\"${target.row}:${target.column}\"]`,\n );\n if (!element) return;\n pending.current = null;\n // `preventScroll`: `reveal` already scrolled the row clear of the sticky header,\n // which the browser's own scroll-into-view does not know is there.\n element.focus({ preventScroll: true });\n if (target.select && element instanceof HTMLInputElement) element.select();\n });\n\n const pad = (row: readonly string[] | undefined) =>\n Array.from({ length: width }, (_, index) => row?.[index] ?? BLANK);\n\n const setCell = (row: number, column: number, value: string) => {\n const next = grid.map(pad);\n next[row][column] = value;\n onCells(next);\n };\n\n /** Scroll `row` into the band below the sticky header. */\n const reveal = (row: number) => {\n const element = scrollRef.current;\n if (!element) return;\n const room = element.clientHeight - (headRef.current?.offsetHeight ?? 0);\n if (room <= 0) return;\n // Measured where the row has been rendered, the scaled estimate where not (§10.9).\n const top = offsetOf(row);\n const height = heightOf(row);\n if (top < element.scrollTop) element.scrollTop = top;\n else if (top + height > element.scrollTop + room) element.scrollTop = top + height - room;\n };\n\n const focusCell = (row: number, column: number) => {\n reveal(row);\n pending.current = { row, column, select: true };\n setCaret({ row, column });\n setEditing(false);\n };\n\n const go = (row: number, column: number) => {\n const target = {\n row: Math.max(0, Math.min(row, grid.length - 1)),\n column: Math.max(0, Math.min(column, lastColumn)),\n };\n if (target.row === at.row && target.column === at.column) return;\n focusCell(target.row, target.column);\n };\n\n /** Down a column — and off the bottom, a new row, unless the last one is still\n * empty: holding ArrowDown should not leave a trail of blank rows behind it. */\n const down = (row: number, column: number) => {\n if (row + 1 < grid.length) return go(row + 1, column);\n if (disabled || !hasContent(grid[row])) return;\n onCells([...grid.map(pad), blankRow()]);\n focusCell(row + 1, Math.min(column, width - 1));\n };\n\n const page = () => {\n const element = scrollRef.current;\n const room = element ? element.clientHeight - (headRef.current?.offsetHeight ?? 0) : 0;\n // No layout (a hidden pane, jsdom): a fixed ten rather than one row at a time.\n return room > 0 ? Math.max(1, Math.floor(room / estimate) - 1) : 10;\n };\n\n /**\n * On each cell rather than once on the grid, for the reason `MiniCalendar` gives:\n * the cell is where focus is, and a container listening for keys it cannot receive\n * is the shape `jsx-a11y/interactive-supports-focus` objects to.\n */\n const onCellKeyDown = (event: KeyboardEvent<HTMLElement>, row: number, column: number) => {\n const input = event.currentTarget instanceof HTMLInputElement ? event.currentTarget : null;\n const inText = Boolean(input) && editing;\n const modified = event.ctrlKey || event.metaKey;\n switch (event.key) {\n case \"ArrowUp\":\n event.preventDefault();\n return go(row - 1, column);\n case \"ArrowDown\":\n event.preventDefault();\n return down(row, column);\n case \"Enter\":\n // On the remove button Enter is the button's own.\n if (!input) return;\n event.preventDefault();\n return event.shiftKey ? go(row - 1, column) : down(row, column);\n case \"ArrowLeft\":\n case \"ArrowRight\": {\n // Along the reading direction: ArrowLeft is \"next column\" in RTL.\n const forward = horizontalStep(event.key, event.currentTarget) === 1;\n if (inText && input) {\n const edge = forward ? input.value.length : 0;\n // Inside the text the caret moves; only at its edge does it leave the cell.\n if (input.selectionStart !== edge || input.selectionEnd !== edge) return;\n }\n event.preventDefault();\n return go(row, column + (forward ? 1 : -1));\n }\n case \"Home\":\n case \"End\": {\n if (inText && !modified) return;\n event.preventDefault();\n const home = event.key === \"Home\";\n if (modified) return go(home ? 0 : grid.length - 1, home ? 0 : width - 1);\n return go(row, home ? 0 : width - 1);\n }\n case \"PageUp\":\n event.preventDefault();\n return go(row - page(), column);\n case \"PageDown\":\n event.preventDefault();\n return go(row + page(), column);\n case \"F2\":\n if (!input || disabled) return;\n event.preventDefault();\n setEditing(true);\n input.setSelectionRange(input.value.length, input.value.length);\n return;\n case \"Escape\":\n // Not editing: nothing of ours to undo, so the key belongs to whatever the\n // grid sits in — the dialog it is in closes, as it should.\n if (!input || !editing) return;\n event.preventDefault();\n event.stopPropagation();\n if (input.value !== origin.current) setCell(row, column, origin.current);\n pending.current = { row, column, select: true };\n setEditing(false);\n return;\n }\n };\n\n /**\n * A pasted block, written in from the cell it was pasted into.\n *\n * Rows past the end grow the table; columns past the last are dropped, because a\n * paste wider than the measurement is a paste with a trailing timestamp column and\n * not an error worth refusing. One header line is skipped — pasted data almost\n * always has one. Each line is read on its own evidence (`splitRow`, the per-line\n * comma rule), so one line cannot change what another means.\n */\n const paste = (row: number, column: number, text: string) => {\n const lines = text.split(/\\r?\\n/).filter((line) => line.trim() !== \"\");\n if (!lines.length) return;\n const block = lines.map(splitRow);\n if (block.length > 1 && block[0].some((cell) => !isCellNumber(cell))) block.shift();\n\n const height = Math.max(grid.length, row + block.length);\n const next = Array.from({ length: height }, (_, index) => pad(grid[index]));\n block.forEach((line, downwards) => {\n line.forEach((cell, across) => {\n const target = column + across;\n if (target < width) next[row + downwards][target] = withMark(cell.trim(), mark);\n });\n });\n onCells(next);\n pending.current = { row, column, select: true };\n setEditing(false);\n };\n\n const template = `2.5rem repeat(${width}, minmax(5.5rem, 1fr)) 2rem`;\n // The caret's row is mounted even when it has been scrolled out of the window: it\n // holds the grid's only tab stop, and a tab stop that is not in the DOM is a grid\n // Tab walks straight past.\n const mounted: number[] = [];\n for (let index = first; index < last; index += 1) mounted.push(index);\n if (at.row < first || at.row >= last) mounted.push(at.row);\n\n const filled = cells.filter(hasContent);\n const problems = filled.flat().filter((cell) => cell.trim() !== \"\" && !isCellNumber(cell)).length;\n\n return (\n <div className=\"rounded-md border border-[var(--border)] bg-[var(--bg-surface)]\">\n <div ref={scrollRef} className=\"max-h-72 overflow-auto\">\n <div\n role=\"grid\"\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n // The true size, not the mounted one: a screen reader otherwise reports the\n // thirty rows in the window as the whole table.\n aria-rowcount={grid.length + 1}\n aria-colcount={width + 2}\n aria-readonly={disabled || undefined}\n className=\"text-xs\"\n style={{ minWidth: `calc(4.5rem + ${width} * 5.5rem)` }}\n >\n {/* The header stays put vertically and scrolls sideways with the body, so a\n fifteen-column linkage can be read without losing which column is which. */}\n <div ref={headRef} role=\"rowgroup\" className=\"sticky top-0 z-10 bg-[var(--bg-surface-2)]\">\n <div\n role=\"row\"\n aria-rowindex={1}\n className=\"grid border-b border-[var(--border)]\"\n style={{ gridTemplateColumns: template }}\n >\n <div\n role=\"columnheader\"\n aria-label={labels.rowNumber}\n className=\"flex items-end justify-end px-1 py-1 text-micro text-[var(--text-placeholder)]\"\n >\n #\n </div>\n {columns.map((column, index) => (\n <div\n key={index}\n role=\"columnheader\"\n className=\"min-w-0 border-s border-[var(--border)] px-2 py-1 text-end\"\n >\n <span className=\"block truncate font-medium text-[var(--text-primary)]\">\n {column.label}\n </span>\n {column.unit && (\n <span className=\"block truncate text-micro text-[var(--text-muted)]\">\n {column.unit}\n </span>\n )}\n </div>\n ))}\n <div\n role=\"columnheader\"\n aria-label={labels.rowActions}\n className=\"border-s border-[var(--border)]\"\n />\n </div>\n </div>\n {/* Only the rows in the window are mounted — a swept linkage is thousands of\n them across fifteen inputs — each placed at its own offset, so mounting\n one more (the caret's) costs nothing in the arithmetic. Since 0.32 a row\n is at least the scaled estimate tall and measured as it renders (§10.9):\n `minHeight`, not `height`, so the type at Extra large is never cut. */}\n <div role=\"rowgroup\" className=\"relative\" style={{ height: totalHeight }}>\n {mounted.map((index) => {\n const row = grid[index];\n return (\n <div\n key={index}\n ref={measureRef}\n {...{ [WINDOWED_ROW_INDEX]: index }}\n role=\"row\"\n aria-rowindex={index + 2}\n className=\"absolute inset-x-0 grid hover:bg-[var(--bg-hover)]\"\n style={{ top: offsetOf(index), minHeight: estimate, gridTemplateColumns: template }}\n >\n <div\n role=\"rowheader\"\n className=\"flex items-center justify-end px-1 text-micro tabular-nums text-[var(--text-placeholder)]\"\n >\n {rowNumber.format(index + 1)}\n </div>\n {columns.map((column, columnIndex) => {\n const value = row[columnIndex] ?? BLANK;\n const bad = value.trim() !== \"\" && !isCellNumber(value);\n const isCaret = at.row === index && at.column === columnIndex;\n return (\n <div key={columnIndex} role=\"gridcell\" className=\"min-w-0 border-s border-[var(--border)]\">\n <input\n data-cell={`${index}:${columnIndex}`}\n value={value}\n // `readOnly`, not `disabled`: a disabled input cannot take\n // focus, and a read-only table should still be walkable.\n readOnly={disabled}\n tabIndex={isCaret ? 0 : -1}\n inputMode=\"decimal\"\n spellCheck={false}\n autoComplete=\"off\"\n aria-label={labels.cell(column.label, index + 1)}\n // Said, not only painted: the ring is what a sighted user\n // sees, `aria-invalid` is what a screen reader reads.\n aria-invalid={bad || undefined}\n className={cn(\n \"block size-full bg-transparent px-2 text-end tabular-nums text-[var(--text-primary)] outline-none\",\n // A cell is a field: 16 px on touch, or iOS zooms on focus (§10.1).\n FIELD_TOUCH_TEXT,\n // Arriving selects the text (typing replaces it); editing\n // in place is the plain surface with a caret in it.\n // The kit's focus frame (§5), inset so the next cell's\n // border does not paint over it. A text input is\n // `:focus-visible` however it was focused.\n \"focus:bg-[var(--brand-bg)]\",\n FOCUS_RING,\n \"focus-visible:ring-inset\",\n isCaret && editing && \"focus:bg-[var(--bg-surface)]\",\n disabled && \"text-[var(--text-muted)]\",\n bad && cn(FIELD_INVALID, \"ring-inset\"),\n )}\n onMouseDown={(event) => {\n // A click places a caret, which is editing. On the cell\n // already focused there is no focus event to say so.\n if (document.activeElement === event.currentTarget) setEditing(!disabled);\n else pointer.current = true;\n }}\n onFocus={(event) => {\n origin.current = event.currentTarget.value;\n if (!isCaret) setCaret({ row: index, column: columnIndex });\n const byPointer = pointer.current;\n pointer.current = false;\n setEditing(byPointer && !disabled);\n if (!byPointer) event.currentTarget.select();\n }}\n onBlur={() => setEditing(false)}\n onChange={(event) => {\n setCell(index, columnIndex, event.target.value);\n setEditing(true);\n }}\n onPaste={(event) => {\n if (disabled) return;\n const text = event.clipboardData.getData(\"text/plain\");\n // One cell's worth of text is an ordinary paste, and the\n // browser does it better than this would; only a block is\n // the grid's business.\n if (!/[\\t\\n;]/.test(text)) return;\n event.preventDefault();\n paste(index, columnIndex, text);\n }}\n onKeyDown={(event) => onCellKeyDown(event, index, columnIndex)}\n />\n </div>\n );\n })}\n <div\n role=\"gridcell\"\n className=\"flex items-center justify-center border-s border-[var(--border)]\"\n >\n <button\n type=\"button\"\n data-cell={`${index}:${width}`}\n disabled={!removable}\n tabIndex={at.row === index && at.column === width ? 0 : -1}\n aria-label={labels.removeRow(index + 1)}\n className={cn(\n \"rounded p-1 text-[var(--text-placeholder)] outline-none hover:text-[var(--danger)] disabled:cursor-default disabled:hover:text-[var(--text-placeholder)]\",\n FOCUS_RING,\n )}\n onKeyDown={(event) => onCellKeyDown(event, index, width)}\n onFocus={() => {\n if (at.row !== index || at.column !== width) setCaret({ row: index, column: width });\n }}\n onClick={() => {\n const next = grid.filter((_, other) => other !== index);\n onCells(next);\n // Focus stays in the column, on the row that moved up into\n // this one; an emptied table sends it to the first cell.\n if (next.length) focusCell(Math.min(index, next.length - 1), width);\n else focusCell(0, 0);\n }}\n >\n <Trash2 aria-hidden className=\"size-3.5\" />\n </button>\n </div>\n </div>\n );\n })}\n </div>\n </div>\n </div>\n <div className=\"flex flex-wrap items-center gap-x-2 gap-y-1 border-t border-[var(--border)] px-2 py-1.5\">\n <Button\n variant=\"ghost\"\n size=\"sm\"\n disabled={disabled}\n onClick={() => {\n onCells([...grid.map(pad), blankRow()]);\n focusCell(grid.length, 0);\n }}\n >\n <Plus aria-hidden className=\"size-3.5\" /> {labels.addRow}\n </Button>\n <Button\n variant=\"ghost\"\n size=\"sm\"\n className=\"text-[var(--text-muted)]\"\n disabled={disabled || !cells.length}\n onClick={() => {\n onCells([]);\n // The button is about to disable itself; focus must not go down with it.\n focusCell(0, 0);\n }}\n >\n <Eraser aria-hidden className=\"size-3.5\" /> {labels.clear}\n </Button>\n <span className=\"text-caption tabular-nums text-[var(--text-muted)]\">\n {/* bdi: an LTR label (\"3 points\") in an RTL grid would reorder to \"points 3\". */}\n <bdi>{labels.points(filled.length)}</bdi>\n </span>\n {problems > 0 && (\n <span className=\"text-caption text-[var(--danger)]\">{labels.problems(problems)}</span>\n )}\n <span className=\"ms-auto flex items-center gap-1 text-caption text-[var(--text-muted)]\">\n <ClipboardPaste aria-hidden className=\"size-3.5\" /> {labels.pasteHint}\n </span>\n </div>\n </div>\n );\n}\n\nconst textOf = (cells: string[][]) => cells.map((row) => row.join(\"\\t\")).join(\"\\n\");\n\n/**\n * The same table as text.\n *\n * Kept because the grid is worst at exactly what a textarea is best at: reading a long\n * export back in one piece. It commits on blur — through `parseRows`, the paste door —\n * and a line it cannot read is NAMED rather than dropped: half a sweep saved as a\n * measurement is worse than a refusal.\n */\nfunction TextView({ columns, cells, onCells, disabled, mark, labels, labelledBy, describedBy }: ViewProps) {\n const text = textOf(cells);\n const [draft, setDraft] = useState(text);\n const [errorLine, setErrorLine] = useState<number | null>(null);\n // Follow the table when it changes from outside (a generated shape, a cleared form).\n // Compared as text, so a caller that rebuilds the same cells every render does not\n // wipe what is being typed.\n const [seen, setSeen] = useState(text);\n if (seen !== text) {\n setSeen(text);\n setDraft(text);\n setErrorLine(null);\n }\n\n const commit = () => {\n // Untouched: nothing to read back, and re-reading would rewrite every cell in the\n // lexer's spelling of it.\n if (draft === text) return;\n if (!draft.trim()) {\n setErrorLine(null);\n onCells([]);\n return;\n }\n const parsed = parseRows(draft, columns.length);\n if (\"error\" in parsed) {\n setErrorLine(parsed.error);\n return;\n }\n setErrorLine(null);\n onCells(parsed.rows.map((row) => row.map((value) => withMark(String(value), mark))));\n };\n\n const lines = draft.split(\"\\n\").filter((line) => line.trim()).length;\n\n return (\n <div>\n <Textarea\n aria-labelledby={labelledBy}\n aria-describedby={describedBy}\n rows={10}\n value={draft}\n readOnly={disabled}\n spellCheck={false}\n className=\"font-mono text-xs\"\n error={errorLine !== null ? labels.lineError(errorLine) : undefined}\n onChange={(event) => setDraft(event.target.value)}\n onBlur={commit}\n />\n <p className=\"mt-1 px-1 text-caption text-[var(--text-muted)]\">\n {columns.map((column) => column.label).join(\" · \")}\n {\" — \"}\n <bdi>{labels.points(lines)}</bdi>\n </p>\n </div>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -3,10 +3,11 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { forwardRef } from "react";
|
|
4
4
|
import { Check } from "lucide-react";
|
|
5
5
|
import { cn } from "../lib/cn.js";
|
|
6
|
+
import { FOCUS_RING } from "./focus-ring.js";
|
|
6
7
|
import { useKitLink } from "../i18n/kit-labels.js";
|
|
7
8
|
import { pickLinkRenderer } from "./text-link.js";
|
|
8
9
|
const MENU_ITEM_ROW = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
|
|
9
|
-
const MENU_ITEM_FOCUS =
|
|
10
|
+
const MENU_ITEM_FOCUS = `${FOCUS_RING} focus-visible:bg-[var(--bg-hover)] focus-visible:ring-inset`;
|
|
10
11
|
const MenuItem = forwardRef(function MenuItem2({
|
|
11
12
|
children,
|
|
12
13
|
icon: Icon,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/menu-item.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * `TOPBAR_MENU_ITEM_CLASS`'s row, spelled out rather than imported: a component does\n * not reach up into the shell (the same call `Disclosure`'s menu variant made). A test\n * holds the two to the same classes, so a menu mixing `MenuItem`s with the shell's own\n * rows (`TopBarActionMenu`, `OptionSwitcherMenu`) cannot drift into two looks.\n */\nconst MENU_ITEM_ROW =\n \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n/** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the\n * ring, a keyboard user always does. Inset, because the panel clips its children. */\nconst MENU_ITEM_FOCUS =\n \"focus-visible:outline-none focus-visible:bg-[var(--bg-hover)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--brand)]\";\n\nexport type MenuItemTone = \"default\" | \"danger\";\n\n/** What {@link MenuItemProps.renderLink} is handed. Spread it onto your router's link,\n * mapping `href` to what the link calls it —\n * `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface MenuItemLinkProps {\n href: string;\n className: string;\n children: ReactNode;\n role: \"menuitem\";\n ref?: Ref<HTMLAnchorElement>;\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n \"aria-current\"?: \"page\";\n id?: string;\n [key: `aria-${string}`]: string | boolean | number | undefined;\n [key: `data-${string}`]: unknown;\n}\n\ninterface MenuItemBaseProps {\n /** The row's text. */\n children: ReactNode;\n /** An icon before the label, drawn at the menu's 16px. */\n icon?: LucideIcon;\n /** Anything else before the label — an avatar, a flag — when a Lucide icon will not do. */\n leading?: ReactNode;\n /**\n * Right after the label text, before the gap that pushes {@link trailing} to the\n * row's end: keksdose's budget switcher tags a budget \"Guest\" or \"Shared\" with a\n * `Chip` that belongs to the NAME (budget-switcher.tsx:55/59), not to the row's end\n * where a count or a check mark sits. Hand-placed inside `children` it was truncated\n * with the name — a long budget name ate the chip first. Here the label truncates\n * and the badge never shrinks, so it stays visible beside what is left of the name.\n * It is part of the row's accessible name (\"Household Shared\"), so keep it text.\n */\n badge?: ReactNode;\n /** After the label, at the row's end: a shortcut, a count. (A tag that belongs to the name is {@link badge}.) */\n trailing?: ReactNode;\n /** `danger` for the row that destroys or signs out. Colour is not the whole message:\n * the label must still say what the row does. */\n tone?: MenuItemTone;\n disabled?: boolean;\n className?: string;\n id?: string;\n [key: `aria-${string}`]: string | boolean | number | undefined;\n [key: `data-${string}`]: unknown;\n}\n\n/**\n * A menu row is a button OR a link, and only the button can be CHECKED: a checked link\n * is a link to where you already are, which is `current`, not a selection.\n */\nexport type MenuItemProps = MenuItemBaseProps &\n (\n | {\n href?: never;\n renderLink?: never;\n current?: never;\n /** Runs the row. Close the menu from here — `HoverMenu` hands its `close` to\n * the render prop that draws the rows. */\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * Makes the row a CHOICE and says whether it is chosen. Leave it undefined for a\n * plain command; `false` is a choice that is not chosen, which is different.\n * A check mark is drawn at the end when it is on.\n */\n checked?: boolean;\n /**\n * What kind of choice, when `checked` is given:\n *\n * - `radio` (default): one of a set — keksdose's budget switcher\n * (budget-switcher.tsx:51), the theme and language pickers. `menuitemradio`.\n * - `checkbox`: an independent on/off — \"Show archived\". `menuitemcheckbox`.\n *\n * Not `aria-pressed`: that belongs to a toggle BUTTON, and inside a\n * `role=\"menu\"` a screen reader expects the menu roles and reads \"checked\"\n * only from them. A button with `aria-pressed` in a menu is announced as a\n * button in a menu, which is two widgets in one.\n */\n checkable?: \"radio\" | \"checkbox\";\n }\n | {\n /** Makes the row a link — keksdose's \"Manage budgets\" and account-menu rows. */\n href: string;\n /** Renders the link — pass your router's `<Link>`, since a plain `<a>` reloads\n * a single-page app. Default: the `<UiKitProvider linkComponent>`, then `<a>`.\n * The same API as `Chip` and `StatTile`. */\n renderLink?: (props: MenuItemLinkProps) => ReactElement;\n /** Runs on the way (close the menu). */\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n current?: boolean;\n checked?: never;\n checkable?: never;\n }\n );\n\n/**\n * One row of a `HoverMenu` / `TopBarActionMenu` panel.\n *\n * keksdose's account menu and budget switcher each rebuild this row by hand — the\n * shell's class, an icon, a label, a badge, a check mark on the active budget — and the\n * check mark was the only thing saying which budget was active, so a screen reader\n * heard four identical buttons. This row says it (`menuitemradio` + `aria-checked`).\n *\n * The role is set HERE rather than left to `HoverMenu`, which promotes only role-less\n * buttons and links to `menuitem`: a checked row must be `menuitemradio` or\n * `menuitemcheckbox` from its first render, and `HoverMenu` leaves an element that\n * already has a role alone — so its roving focus (↑/↓, Home/End) picks these rows up\n * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`\n * turns the list markup into `role=\"none\"`.\n */\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n {\n children,\n icon: Icon,\n leading,\n badge,\n trailing,\n tone = \"default\",\n disabled = false,\n className,\n href,\n renderLink,\n onClick,\n checked,\n checkable,\n current,\n ...rest\n },\n ref,\n) {\n const kitLink = useKitLink();\n const on = href !== undefined ? !!current : !!checked;\n const look = cn(\n MENU_ITEM_ROW,\n MENU_ITEM_FOCUS,\n tone === \"danger\" && \"text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:bg-[var(--danger-bg)]\",\n disabled && \"cursor-default opacity-50 hover:bg-transparent\",\n className,\n );\n const body = (\n <>\n <span className=\"flex min-w-0 items-center gap-2\">\n {Icon && <Icon className=\"size-4 shrink-0\" aria-hidden />}\n {leading}\n <span className=\"min-w-0 truncate\">{children}</span>\n {badge != null && badge !== false && (\n <>\n {/* A space between the name and the badge in the accessible name (\"Household\n Shared\", not \"HouseholdShared\"); whitespace between flex items is not\n laid out, so it costs nothing on screen. */}{\" \"}\n <span data-menu-item-badge=\"\" className=\"flex shrink-0 items-center\">\n {badge}\n </span>\n </>\n )}\n </span>\n {(trailing != null || on) && (\n <span className=\"flex shrink-0 items-center gap-2\">\n {trailing}\n {on && <Check className=\"size-4 text-[var(--text-secondary)]\" aria-hidden />}\n </span>\n )}\n </>\n );\n\n if (href !== undefined && !disabled) {\n const linkProps: MenuItemLinkProps = {\n ...rest,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n role: \"menuitem\",\n className: look,\n onClick: onClick as MenuItemLinkProps[\"onClick\"],\n \"aria-current\": current ? \"page\" : undefined,\n children: body,\n };\n const render = pickLinkRenderer(renderLink, kitLink, href);\n if (render) return <RenderedLink render={render} {...linkProps} />;\n const { children: linkBody, ...anchorProps } = linkProps;\n return <a {...anchorProps}>{linkBody}</a>;\n }\n\n const role =\n href === undefined && checked !== undefined\n ? checkable === \"checkbox\"\n ? \"menuitemcheckbox\"\n : \"menuitemradio\"\n : \"menuitem\";\n return (\n <button\n {...rest}\n ref={ref as Ref<HTMLButtonElement>}\n type=\"button\"\n role={role}\n aria-checked={role === \"menuitem\" ? undefined : !!checked}\n // `aria-disabled` rather than `disabled`: HoverMenu's roving focus skips either,\n // and the ARIA menu pattern keeps an unavailable item perceivable (\"Delete,\n // dimmed\") rather than greyed to the point some browsers stop exposing it.\n aria-disabled={disabled || undefined}\n onClick={\n disabled\n ? (e) => e.preventDefault()\n : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)\n }\n className={look}\n >\n {body}\n </button>\n );\n});\n\nfunction RenderedLink({\n render,\n ...props\n}: MenuItemLinkProps & { render: (props: MenuItemLinkProps) => ReactElement }) {\n return render(props);\n}\n"],"mappings":";AAqKiB,SAIP,UAJO,KAIP,YAJO;AArKjB,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAQjC,MAAM,gBACJ;AAIF,MAAM,kBACJ;AAiHK,MAAM,WAAW,WAAuC,SAASA,UACtE;AAAA,EACE;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAU,WAAW;AAC3B,QAAM,KAAK,SAAS,SAAY,CAAC,CAAC,UAAU,CAAC,CAAC;AAC9C,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,IACA,SAAS,YAAY;AAAA,IACrB,YAAY;AAAA,IACZ;AAAA,EACF;AACA,QAAM,OACJ,iCACE;AAAA,yBAAC,UAAK,WAAU,mCACb;AAAA,cAAQ,oBAAC,QAAK,WAAU,mBAAkB,eAAW,MAAC;AAAA,MACtD;AAAA,MACD,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,MAC5C,SAAS,QAAQ,UAAU,SAC1B,iCAGmD;AAAA;AAAA,QACjD,oBAAC,UAAK,wBAAqB,IAAG,WAAU,8BACrC,iBACH;AAAA,SACF;AAAA,OAEJ;AAAA,KACE,YAAY,QAAQ,OACpB,qBAAC,UAAK,WAAU,oCACb;AAAA;AAAA,MACA,MAAM,oBAAC,SAAM,WAAU,uCAAsC,eAAW,MAAC;AAAA,OAC5E;AAAA,KAEJ;AAGF,MAAI,SAAS,UAAa,CAAC,UAAU;AACnC,UAAM,YAA+B;AAAA,MACnC,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,UAAU,SAAS;AAAA,MACnC,UAAU;AAAA,IACZ;AACA,UAAM,SAAS,iBAAiB,YAAY,SAAS,IAAI;AACzD,QAAI,OAAQ,QAAO,oBAAC,gBAAa,QAAiB,GAAG,WAAW;AAChE,UAAM,EAAE,UAAU,UAAU,GAAG,YAAY,IAAI;AAC/C,WAAO,oBAAC,OAAG,GAAG,aAAc,oBAAS;AAAA,EACvC;AAEA,QAAM,OACJ,SAAS,UAAa,YAAY,SAC9B,cAAc,aACZ,qBACA,kBACF;AACN,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,gBAAc,SAAS,aAAa,SAAY,CAAC,CAAC;AAAA,MAIlD,iBAAe,YAAY;AAAA,MAC3B,SACE,WACI,CAAC,MAAM,EAAE,eAAe,IACvB;AAAA,MAEP,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAA+E;AAC7E,SAAO,OAAO,KAAK;AACrB;","names":["MenuItem"]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/menu-item.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { MouseEvent, ReactElement, ReactNode, Ref } from \"react\";\nimport { Check } from \"lucide-react\";\nimport type { LucideIcon } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { FOCUS_RING } from \"./focus-ring\";\nimport { useKitLink } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer } from \"./text-link\";\n\n/**\n * `TOPBAR_MENU_ITEM_CLASS`'s row, spelled out rather than imported: a component does\n * not reach up into the shell (the same call `Disclosure`'s menu variant made). A test\n * holds the two to the same classes, so a menu mixing `MenuItem`s with the shell's own\n * rows (`TopBarActionMenu`, `OptionSwitcherMenu`) cannot drift into two looks.\n */\nconst MENU_ITEM_ROW =\n \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n/** HoverMenu moves focus onto items with the arrow keys; a pointer user never sees the\n * ring, a keyboard user always does. Inset, because the panel clips its children. */\nconst MENU_ITEM_FOCUS = `${FOCUS_RING} focus-visible:bg-[var(--bg-hover)] focus-visible:ring-inset`;\n\nexport type MenuItemTone = \"default\" | \"danger\";\n\n/** What {@link MenuItemProps.renderLink} is handed. Spread it onto your router's link,\n * mapping `href` to what the link calls it —\n * `renderLink={({ href, ...p }) => <Link to={href} {...p} />}`. */\nexport interface MenuItemLinkProps {\n href: string;\n className: string;\n children: ReactNode;\n role: \"menuitem\";\n ref?: Ref<HTMLAnchorElement>;\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n \"aria-current\"?: \"page\";\n id?: string;\n [key: `aria-${string}`]: string | boolean | number | undefined;\n [key: `data-${string}`]: unknown;\n}\n\ninterface MenuItemBaseProps {\n /** The row's text. */\n children: ReactNode;\n /** An icon before the label, drawn at the menu's 16px. */\n icon?: LucideIcon;\n /** Anything else before the label — an avatar, a flag — when a Lucide icon will not do. */\n leading?: ReactNode;\n /**\n * Right after the label text, before the gap that pushes {@link trailing} to the\n * row's end: keksdose's budget switcher tags a budget \"Guest\" or \"Shared\" with a\n * `Chip` that belongs to the NAME (budget-switcher.tsx:55/59), not to the row's end\n * where a count or a check mark sits. Hand-placed inside `children` it was truncated\n * with the name — a long budget name ate the chip first. Here the label truncates\n * and the badge never shrinks, so it stays visible beside what is left of the name.\n * It is part of the row's accessible name (\"Household Shared\"), so keep it text.\n */\n badge?: ReactNode;\n /** After the label, at the row's end: a shortcut, a count. (A tag that belongs to the name is {@link badge}.) */\n trailing?: ReactNode;\n /** `danger` for the row that destroys or signs out. Colour is not the whole message:\n * the label must still say what the row does. */\n tone?: MenuItemTone;\n disabled?: boolean;\n className?: string;\n id?: string;\n [key: `aria-${string}`]: string | boolean | number | undefined;\n [key: `data-${string}`]: unknown;\n}\n\n/**\n * A menu row is a button OR a link, and only the button can be CHECKED: a checked link\n * is a link to where you already are, which is `current`, not a selection.\n */\nexport type MenuItemProps = MenuItemBaseProps &\n (\n | {\n href?: never;\n renderLink?: never;\n current?: never;\n /** Runs the row. Close the menu from here — `HoverMenu` hands its `close` to\n * the render prop that draws the rows. */\n onClick?: (event: MouseEvent<HTMLButtonElement>) => void;\n /**\n * Makes the row a CHOICE and says whether it is chosen. Leave it undefined for a\n * plain command; `false` is a choice that is not chosen, which is different.\n * A check mark is drawn at the end when it is on.\n */\n checked?: boolean;\n /**\n * What kind of choice, when `checked` is given:\n *\n * - `radio` (default): one of a set — keksdose's budget switcher\n * (budget-switcher.tsx:51), the theme and language pickers. `menuitemradio`.\n * - `checkbox`: an independent on/off — \"Show archived\". `menuitemcheckbox`.\n *\n * Not `aria-pressed`: that belongs to a toggle BUTTON, and inside a\n * `role=\"menu\"` a screen reader expects the menu roles and reads \"checked\"\n * only from them. A button with `aria-pressed` in a menu is announced as a\n * button in a menu, which is two widgets in one.\n */\n checkable?: \"radio\" | \"checkbox\";\n }\n | {\n /** Makes the row a link — keksdose's \"Manage budgets\" and account-menu rows. */\n href: string;\n /** Renders the link — pass your router's `<Link>`, since a plain `<a>` reloads\n * a single-page app. Default: the `<UiKitProvider linkComponent>`, then `<a>`.\n * The same API as `Chip` and `StatTile`. */\n renderLink?: (props: MenuItemLinkProps) => ReactElement;\n /** Runs on the way (close the menu). */\n onClick?: (event: MouseEvent<HTMLAnchorElement>) => void;\n /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n current?: boolean;\n checked?: never;\n checkable?: never;\n }\n );\n\n/**\n * One row of a `HoverMenu` / `TopBarActionMenu` panel.\n *\n * keksdose's account menu and budget switcher each rebuild this row by hand — the\n * shell's class, an icon, a label, a badge, a check mark on the active budget — and the\n * check mark was the only thing saying which budget was active, so a screen reader\n * heard four identical buttons. This row says it (`menuitemradio` + `aria-checked`).\n *\n * The role is set HERE rather than left to `HoverMenu`, which promotes only role-less\n * buttons and links to `menuitem`: a checked row must be `menuitemradio` or\n * `menuitemcheckbox` from its first render, and `HoverMenu` leaves an element that\n * already has a role alone — so its roving focus (↑/↓, Home/End) picks these rows up\n * with the rest. Render it inside an `<li>` like the shell's own rows; `HoverMenu`\n * turns the list markup into `role=\"none\"`.\n */\nexport const MenuItem = forwardRef<HTMLElement, MenuItemProps>(function MenuItem(\n {\n children,\n icon: Icon,\n leading,\n badge,\n trailing,\n tone = \"default\",\n disabled = false,\n className,\n href,\n renderLink,\n onClick,\n checked,\n checkable,\n current,\n ...rest\n },\n ref,\n) {\n const kitLink = useKitLink();\n const on = href !== undefined ? !!current : !!checked;\n const look = cn(\n MENU_ITEM_ROW,\n MENU_ITEM_FOCUS,\n tone === \"danger\" && \"text-[var(--danger)] hover:bg-[var(--danger-bg)] focus-visible:bg-[var(--danger-bg)]\",\n disabled && \"cursor-default opacity-50 hover:bg-transparent\",\n className,\n );\n const body = (\n <>\n <span className=\"flex min-w-0 items-center gap-2\">\n {Icon && <Icon className=\"size-4 shrink-0\" aria-hidden />}\n {leading}\n <span className=\"min-w-0 truncate\">{children}</span>\n {badge != null && badge !== false && (\n <>\n {/* A space between the name and the badge in the accessible name (\"Household\n Shared\", not \"HouseholdShared\"); whitespace between flex items is not\n laid out, so it costs nothing on screen. */}{\" \"}\n <span data-menu-item-badge=\"\" className=\"flex shrink-0 items-center\">\n {badge}\n </span>\n </>\n )}\n </span>\n {(trailing != null || on) && (\n <span className=\"flex shrink-0 items-center gap-2\">\n {trailing}\n {on && <Check className=\"size-4 text-[var(--text-secondary)]\" aria-hidden />}\n </span>\n )}\n </>\n );\n\n if (href !== undefined && !disabled) {\n const linkProps: MenuItemLinkProps = {\n ...rest,\n ref: ref as Ref<HTMLAnchorElement>,\n href,\n role: \"menuitem\",\n className: look,\n onClick: onClick as MenuItemLinkProps[\"onClick\"],\n \"aria-current\": current ? \"page\" : undefined,\n children: body,\n };\n const render = pickLinkRenderer(renderLink, kitLink, href);\n if (render) return <RenderedLink render={render} {...linkProps} />;\n const { children: linkBody, ...anchorProps } = linkProps;\n return <a {...anchorProps}>{linkBody}</a>;\n }\n\n const role =\n href === undefined && checked !== undefined\n ? checkable === \"checkbox\"\n ? \"menuitemcheckbox\"\n : \"menuitemradio\"\n : \"menuitem\";\n return (\n <button\n {...rest}\n ref={ref as Ref<HTMLButtonElement>}\n type=\"button\"\n role={role}\n aria-checked={role === \"menuitem\" ? undefined : !!checked}\n // `aria-disabled` rather than `disabled`: HoverMenu's roving focus skips either,\n // and the ARIA menu pattern keeps an unavailable item perceivable (\"Delete,\n // dimmed\") rather than greyed to the point some browsers stop exposing it.\n aria-disabled={disabled || undefined}\n onClick={\n disabled\n ? (e) => e.preventDefault()\n : (onClick as ((event: MouseEvent<HTMLButtonElement>) => void) | undefined)\n }\n className={look}\n >\n {body}\n </button>\n );\n});\n\nfunction RenderedLink({\n render,\n ...props\n}: MenuItemLinkProps & { render: (props: MenuItemLinkProps) => ReactElement }) {\n return render(props);\n}\n"],"mappings":";AAqKiB,SAIP,UAJO,KAIP,YAJO;AArKjB,SAAS,kBAAkB;AAE3B,SAAS,aAAa;AAEtB,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAC3B,SAAS,wBAAwB;AAQjC,MAAM,gBACJ;AAIF,MAAM,kBAAkB,GAAG,UAAU;AAiH9B,MAAM,WAAW,WAAuC,SAASA,UACtE;AAAA,EACE;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GACA,KACA;AACA,QAAM,UAAU,WAAW;AAC3B,QAAM,KAAK,SAAS,SAAY,CAAC,CAAC,UAAU,CAAC,CAAC;AAC9C,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,IACA,SAAS,YAAY;AAAA,IACrB,YAAY;AAAA,IACZ;AAAA,EACF;AACA,QAAM,OACJ,iCACE;AAAA,yBAAC,UAAK,WAAU,mCACb;AAAA,cAAQ,oBAAC,QAAK,WAAU,mBAAkB,eAAW,MAAC;AAAA,MACtD;AAAA,MACD,oBAAC,UAAK,WAAU,oBAAoB,UAAS;AAAA,MAC5C,SAAS,QAAQ,UAAU,SAC1B,iCAGmD;AAAA;AAAA,QACjD,oBAAC,UAAK,wBAAqB,IAAG,WAAU,8BACrC,iBACH;AAAA,SACF;AAAA,OAEJ;AAAA,KACE,YAAY,QAAQ,OACpB,qBAAC,UAAK,WAAU,oCACb;AAAA;AAAA,MACA,MAAM,oBAAC,SAAM,WAAU,uCAAsC,eAAW,MAAC;AAAA,OAC5E;AAAA,KAEJ;AAGF,MAAI,SAAS,UAAa,CAAC,UAAU;AACnC,UAAM,YAA+B;AAAA,MACnC,GAAG;AAAA,MACH;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN,WAAW;AAAA,MACX;AAAA,MACA,gBAAgB,UAAU,SAAS;AAAA,MACnC,UAAU;AAAA,IACZ;AACA,UAAM,SAAS,iBAAiB,YAAY,SAAS,IAAI;AACzD,QAAI,OAAQ,QAAO,oBAAC,gBAAa,QAAiB,GAAG,WAAW;AAChE,UAAM,EAAE,UAAU,UAAU,GAAG,YAAY,IAAI;AAC/C,WAAO,oBAAC,OAAG,GAAG,aAAc,oBAAS;AAAA,EACvC;AAEA,QAAM,OACJ,SAAS,UAAa,YAAY,SAC9B,cAAc,aACZ,qBACA,kBACF;AACN,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,MAAK;AAAA,MACL;AAAA,MACA,gBAAc,SAAS,aAAa,SAAY,CAAC,CAAC;AAAA,MAIlD,iBAAe,YAAY;AAAA,MAC3B,SACE,WACI,CAAC,MAAM,EAAE,eAAe,IACvB;AAAA,MAEP,WAAW;AAAA,MAEV;AAAA;AAAA,EACH;AAEJ,CAAC;AAED,SAAS,aAAa;AAAA,EACpB;AAAA,EACA,GAAG;AACL,GAA+E;AAC7E,SAAO,OAAO,KAAK;AACrB;","names":["MenuItem"]}
|
|
@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { useEffect, useId, useMemo, useRef, useState } from "react";
|
|
4
4
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
|
5
5
|
import { cn } from "../lib/cn.js";
|
|
6
|
+
import { FOCUS_RING, FOCUS_RING_WIDTH } from "./focus-ring.js";
|
|
6
7
|
import { horizontalStep } from "../lib/direction.js";
|
|
7
8
|
import { useAnnounce } from "../hooks/use-announce.js";
|
|
8
9
|
import {
|
|
@@ -278,7 +279,7 @@ function MiniCalendar({
|
|
|
278
279
|
role: "row",
|
|
279
280
|
className: cn(
|
|
280
281
|
"grid grid-cols-7 text-center font-medium",
|
|
281
|
-
lg ? "gap-px text-xs text-[var(--text-muted)]" : "text-
|
|
282
|
+
lg ? "gap-px text-xs text-[var(--text-muted)]" : "text-micro uppercase text-[var(--text-placeholder)]"
|
|
282
283
|
),
|
|
283
284
|
children: weekdayLabels.map((w, i) => /* @__PURE__ */ jsx(
|
|
284
285
|
"div",
|
|
@@ -336,7 +337,8 @@ function MiniCalendar({
|
|
|
336
337
|
onKeyDown: onDayKeyDown,
|
|
337
338
|
className: cn(
|
|
338
339
|
"text-xs tabular-nums text-[var(--text-placeholder)] transition-colors",
|
|
339
|
-
|
|
340
|
+
FOCUS_RING,
|
|
341
|
+
"focus-visible:ring-inset",
|
|
340
342
|
disabled ? "cursor-not-allowed opacity-60" : "hover:bg-[var(--bg-hover)]",
|
|
341
343
|
lg ? cn("flex w-full min-w-0 items-start bg-[var(--bg-surface-2)] p-1.5", LG_CELL_HEIGHT) : "size-8 rounded-full"
|
|
342
344
|
),
|
|
@@ -405,7 +407,8 @@ function MiniCalendar({
|
|
|
405
407
|
className: lg ? cn(
|
|
406
408
|
"flex w-full min-w-0 flex-col items-stretch gap-1 overflow-hidden p-1.5 text-start text-xs transition-colors",
|
|
407
409
|
LG_CELL_HEIGHT,
|
|
408
|
-
|
|
410
|
+
FOCUS_RING,
|
|
411
|
+
"focus-visible:ring-inset",
|
|
409
412
|
disabled ? "cursor-not-allowed bg-[var(--bg-surface)] text-[var(--text-placeholder)]" : isSelected ? "bg-[var(--brand-bg)] text-[var(--text-primary)] hover:bg-[var(--brand-bg-hover)]" : "bg-[var(--bg-surface)] text-[var(--text-primary)] hover:bg-[var(--bg-hover)]"
|
|
410
413
|
) : cn(
|
|
411
414
|
"relative size-8 rounded-full text-xs tabular-nums transition-colors",
|
|
@@ -415,7 +418,8 @@ function MiniCalendar({
|
|
|
415
418
|
// colour flips on the selected days for the reason the numpad's
|
|
416
419
|
// "Done" key does — a --brand ring on a --brand fill is a ring
|
|
417
420
|
// that exists only in the DOM.
|
|
418
|
-
|
|
421
|
+
FOCUS_RING_WIDTH,
|
|
422
|
+
"focus-visible:outline-none focus-visible:ring-inset",
|
|
419
423
|
isStart || isEnd ? "focus-visible:ring-[var(--brand-contrast)]" : "focus-visible:ring-[var(--brand)]",
|
|
420
424
|
disabled ? "cursor-not-allowed text-[var(--text-placeholder)]" : isStart || isEnd ? "bg-[var(--brand)] text-[var(--brand-contrast)] hover:bg-[var(--brand-hover)]" : isInRange ? "font-medium text-[var(--brand-muted)] hover:bg-[var(--brand-bg-hover)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]",
|
|
421
425
|
isToday && !isStart && !isEnd && !isInRange && !disabled && "ring-1 ring-inset ring-[var(--border-strong)]"
|