@eifi1/ui-kit 0.51.7 → 0.52.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 +141 -23
- package/dist/account/account-parts.d.ts +10 -8
- package/dist/account/account-parts.js +1 -18
- package/dist/account/account-parts.js.map +1 -1
- package/dist/account/data-export-setting-labels.js +1 -1
- package/dist/account/data-export-setting-labels.js.map +1 -1
- package/dist/account/delete-account-setting-labels.js +1 -1
- package/dist/account/delete-account-setting-labels.js.map +1 -1
- package/dist/account/email-change-setting-labels.js +1 -1
- package/dist/account/email-change-setting-labels.js.map +1 -1
- package/dist/account/passkeys-setting.d.ts +9 -2
- package/dist/account/passkeys-setting.js +41 -29
- package/dist/account/passkeys-setting.js.map +1 -1
- package/dist/account/sessions-setting.d.ts +3 -2
- package/dist/account/sessions-setting.js +10 -8
- package/dist/account/sessions-setting.js.map +1 -1
- package/dist/admin/admin-action-confirm.js +1 -3
- package/dist/admin/admin-action-confirm.js.map +1 -1
- package/dist/admin/admin-parts.d.ts +6 -3
- package/dist/admin/admin-parts.js +6 -21
- package/dist/admin/admin-parts.js.map +1 -1
- package/dist/admin/mail-test-card-labels.js +1 -1
- package/dist/admin/mail-test-card-labels.js.map +1 -1
- package/dist/admin/plan-change-labels.d.ts +2 -2
- package/dist/admin/plan-change-labels.js +1 -17
- package/dist/admin/plan-change-labels.js.map +1 -1
- package/dist/admin/plan-change.d.ts +3 -42
- package/dist/admin/plan-change.js +1 -1
- package/dist/admin/plan-change.js.map +1 -1
- package/dist/admin/reviewer-scope-editor.js +3 -3
- package/dist/admin/reviewer-scope-editor.js.map +1 -1
- package/dist/auth/auth-errors-labels.d.ts +11 -0
- package/dist/auth/auth-errors-labels.js +13 -0
- package/dist/auth/auth-errors-labels.js.map +1 -0
- package/dist/auth/auth-errors.d.ts +7 -23
- package/dist/auth/auth-errors.js +2 -15
- package/dist/auth/auth-errors.js.map +1 -1
- package/dist/auth/complete-name-dialog.js +2 -1
- package/dist/auth/complete-name-dialog.js.map +1 -1
- package/dist/auth/forgot-password-form-labels.js +1 -1
- package/dist/auth/forgot-password-form-labels.js.map +1 -1
- package/dist/auth/forgot-password-form.js +7 -2
- package/dist/auth/forgot-password-form.js.map +1 -1
- package/dist/auth/register-form-labels.js +1 -1
- package/dist/auth/register-form-labels.js.map +1 -1
- package/dist/auth/reset-password-form-labels.js +1 -1
- package/dist/auth/reset-password-form-labels.js.map +1 -1
- package/dist/auth/reset-password-form.js +5 -1
- package/dist/auth/reset-password-form.js.map +1 -1
- package/dist/auth/sign-in-form-labels.js +1 -1
- package/dist/auth/sign-in-form-labels.js.map +1 -1
- package/dist/auth/status-parts.d.ts +0 -3
- package/dist/auth/status-parts.js +0 -4
- package/dist/auth/status-parts.js.map +1 -1
- package/dist/auth/verify-email-labels.js +1 -1
- package/dist/auth/verify-email-labels.js.map +1 -1
- package/dist/auth/verify-email.js +7 -2
- package/dist/auth/verify-email.js.map +1 -1
- package/dist/billing/cancel-subscription.d.ts +20 -8
- package/dist/billing/cancel-subscription.js +7 -5
- package/dist/billing/cancel-subscription.js.map +1 -1
- package/dist/billing/dialog-close.d.ts +29 -0
- package/dist/billing/dialog-close.js +8 -0
- package/dist/billing/dialog-close.js.map +1 -0
- package/dist/billing/plan-card.d.ts +14 -4
- package/dist/billing/plan-card.js +15 -8
- package/dist/billing/plan-card.js.map +1 -1
- package/dist/billing/plan-change-labels.d.ts +42 -0
- package/dist/billing/plan-change-labels.js +22 -0
- package/dist/billing/plan-change-labels.js.map +1 -0
- package/dist/billing/plan-switch.d.ts +19 -7
- package/dist/billing/plan-switch.js +8 -4
- package/dist/billing/plan-switch.js.map +1 -1
- package/dist/chart.d.ts +12 -0
- package/dist/chart.js +16 -1
- package/dist/chart.js.map +1 -1
- package/dist/components/account-chips.d.ts +5 -5
- package/dist/components/account-chips.js +11 -13
- package/dist/components/account-chips.js.map +1 -1
- package/dist/components/alert-banner.d.ts +16 -5
- package/dist/components/alert-banner.js +46 -1
- package/dist/components/alert-banner.js.map +1 -1
- package/dist/components/amount-input.d.ts +13 -0
- package/dist/components/amount-input.js +1 -0
- package/dist/components/amount-input.js.map +1 -1
- package/dist/components/autocomplete.js +57 -65
- package/dist/components/autocomplete.js.map +1 -1
- package/dist/components/bulk-action-bar.d.ts +12 -2
- package/dist/components/bulk-action-bar.js +65 -21
- package/dist/components/bulk-action-bar.js.map +1 -1
- package/dist/components/button-look.d.ts +5 -5
- package/dist/components/button-look.js.map +1 -1
- package/dist/components/button.d.ts +2 -2
- package/dist/components/button.js.map +1 -1
- package/dist/components/chart-edge.d.ts +16 -0
- package/dist/components/chart-edge.js +14 -1
- package/dist/components/chart-edge.js.map +1 -1
- package/dist/components/chart-figure.d.ts +13 -0
- package/dist/components/chart-figure.js +15 -0
- package/dist/components/chart-figure.js.map +1 -0
- package/dist/components/chart-zoom-core.js +1 -4
- package/dist/components/chart-zoom-core.js.map +1 -1
- package/dist/components/chart.d.ts +8 -1
- package/dist/components/chart.js +19 -10
- package/dist/components/chart.js.map +1 -1
- package/dist/components/combobox-core.d.ts +111 -2
- package/dist/components/combobox-core.js +148 -42
- package/dist/components/combobox-core.js.map +1 -1
- package/dist/components/combobox.d.ts +1 -1
- package/dist/components/combobox.js +141 -130
- package/dist/components/combobox.js.map +1 -1
- package/dist/components/copy-button.d.ts +6 -5
- package/dist/components/copy-button.js +5 -3
- package/dist/components/copy-button.js.map +1 -1
- package/dist/components/country-select.js +2 -2
- package/dist/components/country-select.js.map +1 -1
- package/dist/components/data-table-column-settings.d.ts +1 -1
- package/dist/components/data-table-column-settings.js +33 -7
- package/dist/components/data-table-column-settings.js.map +1 -1
- package/dist/components/data-table-filters.d.ts +4 -2
- package/dist/components/data-table-filters.js +2 -2
- package/dist/components/data-table-filters.js.map +1 -1
- package/dist/components/data-table-fit.d.ts +6 -4
- package/dist/components/data-table-fit.js +4 -1
- package/dist/components/data-table-fit.js.map +1 -1
- package/dist/components/data-table-groups.d.ts +1 -1
- package/dist/components/data-table-groups.js.map +1 -1
- package/dist/components/data-table-head.d.ts +1 -1
- package/dist/components/data-table-head.js +15 -12
- package/dist/components/data-table-head.js.map +1 -1
- package/dist/components/data-table-mobile.d.ts +12 -7
- package/dist/components/data-table-mobile.js +43 -30
- package/dist/components/data-table-mobile.js.map +1 -1
- package/dist/components/data-table-pagination.js +11 -6
- package/dist/components/data-table-pagination.js.map +1 -1
- package/dist/components/data-table-resize.d.ts +1 -1
- package/dist/components/data-table-resize.js.map +1 -1
- package/dist/components/data-table-row-actions.d.ts +2 -2
- package/dist/components/data-table-row-actions.js.map +1 -1
- package/dist/components/data-table-row.d.ts +6 -2
- package/dist/components/data-table-row.js +17 -10
- package/dist/components/data-table-row.js.map +1 -1
- package/dist/components/data-table-selection.d.ts +1 -1
- package/dist/components/data-table-selection.js.map +1 -1
- package/dist/components/data-table-shared.d.ts +10 -2
- package/dist/components/data-table-shared.js +18 -0
- package/dist/components/data-table-shared.js.map +1 -1
- package/dist/components/data-table-sort.d.ts +21 -2
- package/dist/components/data-table-sort.js +24 -0
- package/dist/components/data-table-sort.js.map +1 -1
- package/dist/components/data-table-virtual.d.ts +1 -1
- package/dist/components/data-table-virtual.js +18 -6
- package/dist/components/data-table-virtual.js.map +1 -1
- package/dist/components/data-table.d.ts +13 -4
- package/dist/components/data-table.js +139 -36
- package/dist/components/data-table.js.map +1 -1
- package/dist/components/date-field.d.ts +24 -2
- package/dist/components/date-field.js +33 -8
- package/dist/components/date-field.js.map +1 -1
- package/dist/components/date-picker.d.ts +15 -2
- package/dist/components/date-picker.js +55 -26
- package/dist/components/date-picker.js.map +1 -1
- package/dist/components/date-range-picker.d.ts +47 -20
- package/dist/components/date-range-picker.js +23 -7
- package/dist/components/date-range-picker.js.map +1 -1
- package/dist/components/error-boundary.js +37 -30
- package/dist/components/error-boundary.js.map +1 -1
- package/dist/components/{ui-labels.d.ts → field-base-labels.d.ts} +0 -2
- package/dist/components/{ui-labels.js → field-base-labels.js} +2 -9
- package/dist/components/field-base-labels.js.map +1 -0
- package/dist/components/field-base.d.ts +4 -3
- package/dist/components/field-base.js +3 -3
- package/dist/components/field-base.js.map +1 -1
- package/dist/components/field-sync-labels.d.ts +1 -0
- package/dist/components/field-sync-labels.js.map +1 -1
- package/dist/components/field-sync.d.ts +23 -1
- package/dist/components/field-sync.js.map +1 -1
- package/dist/components/form-actions.js +11 -5
- package/dist/components/form-actions.js.map +1 -1
- package/dist/components/hover-menu.d.ts +3 -0
- package/dist/components/hover-menu.js +5 -3
- package/dist/components/hover-menu.js.map +1 -1
- package/dist/components/icon-button.js +14 -9
- package/dist/components/icon-button.js.map +1 -1
- package/dist/components/inline-confirm.d.ts +43 -0
- package/dist/components/inline-confirm.js +67 -0
- package/dist/components/inline-confirm.js.map +1 -0
- package/dist/components/inline-entity-combobox.d.ts +4 -3
- package/dist/components/inline-entity-combobox.js +148 -140
- package/dist/components/inline-entity-combobox.js.map +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/input.js.map +1 -1
- package/dist/components/jump-calendar.js +28 -112
- package/dist/components/jump-calendar.js.map +1 -1
- package/dist/components/legal-page.d.ts +3 -1
- package/dist/components/legal-page.js +3 -2
- package/dist/components/legal-page.js.map +1 -1
- package/dist/components/legal.d.ts +4 -2
- package/dist/components/legal.js.map +1 -1
- package/dist/components/lightbox.d.ts +2 -2
- package/dist/components/lightbox.js +17 -6
- package/dist/components/lightbox.js.map +1 -1
- package/dist/components/list.d.ts +6 -2
- package/dist/components/list.js +3 -2
- package/dist/components/list.js.map +1 -1
- package/dist/components/measured-grid.d.ts +1 -1
- package/dist/components/measured-grid.js +2 -1
- package/dist/components/measured-grid.js.map +1 -1
- package/dist/components/mini-calendar.js +3 -5
- package/dist/components/mini-calendar.js.map +1 -1
- package/dist/components/modal.js +3 -1
- package/dist/components/modal.js.map +1 -1
- package/dist/components/month-grid.d.ts +55 -0
- package/dist/components/month-grid.js +148 -0
- package/dist/components/month-grid.js.map +1 -0
- package/dist/components/month-picker.d.ts +36 -4
- package/dist/components/month-picker.js +123 -146
- package/dist/components/month-picker.js.map +1 -1
- package/dist/components/multi-select.d.ts +2 -2
- package/dist/components/multi-select.js +11 -6
- package/dist/components/multi-select.js.map +1 -1
- package/dist/components/picker-sheet.js +2 -1
- package/dist/components/picker-sheet.js.map +1 -1
- package/dist/components/pie-chart-labels.d.ts +7 -0
- package/dist/components/pie-chart-labels.js +1 -0
- package/dist/components/pie-chart-labels.js.map +1 -1
- package/dist/components/pie-chart.d.ts +5 -3
- package/dist/components/pie-chart.js +7 -22
- package/dist/components/pie-chart.js.map +1 -1
- package/dist/components/popover.d.ts +3 -0
- package/dist/components/popover.js +7 -1
- package/dist/components/popover.js.map +1 -1
- package/dist/components/row-actions.js +2 -1
- package/dist/components/row-actions.js.map +1 -1
- package/dist/components/section-nav.d.ts +7 -0
- package/dist/components/section-nav.js.map +1 -1
- package/dist/components/series-chart-axes.d.ts +3 -3
- package/dist/components/series-chart-axes.js.map +1 -1
- package/dist/components/series-chart-labels.d.ts +7 -4
- package/dist/components/series-chart-labels.js.map +1 -1
- package/dist/components/series-chart.d.ts +31 -7
- package/dist/components/series-chart.js +72 -29
- package/dist/components/series-chart.js.map +1 -1
- package/dist/components/share-card.js +3 -3
- package/dist/components/share-card.js.map +1 -1
- package/dist/components/sign-chip-labels.d.ts +1 -0
- package/dist/components/sign-chip-labels.js.map +1 -1
- package/dist/components/sign-chip.d.ts +10 -1
- package/dist/components/sign-chip.js.map +1 -1
- package/dist/components/tabs-labels.d.ts +2 -0
- package/dist/components/tabs-labels.js +11 -0
- package/dist/components/tabs-labels.js.map +1 -0
- package/dist/components/tabs.d.ts +1 -1
- package/dist/components/tabs.js +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/toggle-legend.d.ts +2 -2
- package/dist/components/toggle-legend.js +6 -6
- package/dist/components/toggle-legend.js.map +1 -1
- package/dist/components/translation-review-editor.d.ts +4 -2
- package/dist/components/translation-review-editor.js +2 -3
- package/dist/components/translation-review-editor.js.map +1 -1
- package/dist/components/translation-review.d.ts +2 -1
- package/dist/components/translation-review.js +2 -2
- package/dist/components/translation-review.js.map +1 -1
- package/dist/components/treemap-labels.d.ts +26 -0
- package/dist/components/treemap-labels.js +10 -0
- package/dist/components/treemap-labels.js.map +1 -0
- package/dist/components/treemap-layout.d.ts +62 -0
- package/dist/components/treemap-layout.js +126 -0
- package/dist/components/treemap-layout.js.map +1 -0
- package/dist/components/treemap.d.ts +140 -17
- package/dist/components/treemap.js +324 -97
- package/dist/components/treemap.js.map +1 -1
- package/dist/components/use-table-state.d.ts +5 -5
- package/dist/components/use-table-state.js +4 -1
- package/dist/components/use-table-state.js.map +1 -1
- package/dist/data-table.d.ts +6 -2
- package/dist/data-table.js +7 -2
- package/dist/data-table.js.map +1 -1
- package/dist/eslint/index.js +1 -1
- package/dist/eslint/role-utilities.d.ts +36 -7
- package/dist/eslint/role-utilities.js +42 -9
- package/dist/eslint/role-utilities.js.map +1 -1
- package/dist/feedback/feedback-dialog.d.ts +25 -16
- package/dist/feedback/feedback-dialog.js +6 -2
- package/dist/feedback/feedback-dialog.js.map +1 -1
- package/dist/feedback/feedback-mutation.d.ts +30 -0
- package/dist/feedback/feedback-mutation.js +16 -0
- package/dist/feedback/feedback-mutation.js.map +1 -0
- package/dist/feedback/feedback-page-link.d.ts +53 -0
- package/dist/feedback/feedback-page-link.js +37 -0
- package/dist/feedback/feedback-page-link.js.map +1 -0
- package/dist/feedback/feedback-public-list.d.ts +12 -3
- package/dist/feedback/feedback-public-list.js +2 -1
- package/dist/feedback/feedback-public-list.js.map +1 -1
- package/dist/feedback/feedback-replies.d.ts +3 -1
- package/dist/feedback/feedback-replies.js +5 -4
- package/dist/feedback/feedback-replies.js.map +1 -1
- package/dist/feedback/feedback-row-detail-labels.js +5 -0
- package/dist/feedback/feedback-row-detail-labels.js.map +1 -1
- package/dist/feedback/feedback-row-detail.d.ts +64 -28
- package/dist/feedback/feedback-row-detail.js +30 -28
- package/dist/feedback/feedback-row-detail.js.map +1 -1
- package/dist/feedback/feedback-status-undo.d.ts +30 -11
- package/dist/feedback/feedback-status-undo.js +10 -15
- package/dist/feedback/feedback-status-undo.js.map +1 -1
- package/dist/feedback/feedback-submit-dialog.d.ts +1 -1
- package/dist/feedback/feedback-submit-dialog.js +1 -1
- package/dist/feedback/feedback-submit-dialog.js.map +1 -1
- package/dist/feedback/feedback-submit.js +9 -3
- package/dist/feedback/feedback-submit.js.map +1 -1
- package/dist/feedback/feedback-swipe.d.ts +1 -1
- package/dist/feedback/feedback-swipe.js.map +1 -1
- package/dist/feedback/feedback-table.d.ts +21 -9
- package/dist/feedback/feedback-table.js +45 -25
- package/dist/feedback/feedback-table.js.map +1 -1
- package/dist/feedback/feedback-thread-labels.d.ts +2 -2
- package/dist/feedback/feedback-thread-labels.js.map +1 -1
- package/dist/feedback/feedback-thread.d.ts +24 -23
- package/dist/feedback/feedback-thread.js +2 -1
- package/dist/feedback/feedback-thread.js.map +1 -1
- package/dist/feedback.d.ts +34 -0
- package/dist/feedback.js +42 -0
- package/dist/feedback.js.map +1 -1
- package/dist/hooks/use-focus-trap.d.ts +35 -0
- package/dist/hooks/use-focus-trap.js +6 -4
- package/dist/hooks/use-focus-trap.js.map +1 -1
- package/dist/hooks/use-hotkey.d.ts +5 -2
- package/dist/hooks/use-hotkey.js +5 -4
- package/dist/hooks/use-hotkey.js.map +1 -1
- package/dist/hooks/use-long-press.d.ts +7 -4
- package/dist/hooks/use-long-press.js +3 -0
- package/dist/hooks/use-long-press.js.map +1 -1
- package/dist/hooks/use-media-query.js +12 -4
- package/dist/hooks/use-media-query.js.map +1 -1
- package/dist/hooks/use-mounted.d.ts +22 -0
- package/dist/hooks/use-mounted.js +24 -0
- package/dist/hooks/use-mounted.js.map +1 -0
- package/dist/hooks/use-overlay-history.js +19 -3
- package/dist/hooks/use-overlay-history.js.map +1 -1
- package/dist/i18n/defaults.js +4 -5
- package/dist/i18n/defaults.js.map +1 -1
- package/dist/i18n/german.js +7 -1
- package/dist/i18n/german.js.map +1 -1
- package/dist/i18n/kit-labels.d.ts +9 -2
- package/dist/i18n/kit-labels.js.map +1 -1
- package/dist/i18n/locales/en.js +20 -41
- package/dist/i18n/locales/en.js.map +3 -3
- package/dist/i18n/locales/es.js +7 -1
- package/dist/i18n/locales/es.js.map +1 -1
- package/dist/i18n/locales/fr.js +20 -10
- package/dist/i18n/locales/fr.js.map +1 -1
- package/dist/i18n/locales/hu.js +9 -1
- package/dist/i18n/locales/hu.js.map +1 -1
- package/dist/i18n/locales/it.js +7 -1
- package/dist/i18n/locales/it.js.map +1 -1
- package/dist/i18n/locales/zh.js +8 -1
- package/dist/i18n/locales/zh.js.map +1 -1
- package/dist/i18n/review.js +5 -0
- package/dist/i18n/review.js.map +1 -1
- package/dist/index.d.ts +64 -17
- package/dist/index.js +77 -12
- package/dist/index.js.map +1 -1
- package/dist/landing/routing.d.ts +3 -1
- package/dist/landing/routing.js +4 -7
- package/dist/landing/routing.js.map +1 -1
- package/dist/lib/broadcast.d.ts +17 -0
- package/dist/lib/broadcast.js +30 -0
- package/dist/lib/broadcast.js.map +1 -0
- package/dist/lib/date-format.d.ts +37 -2
- package/dist/lib/date-format.js +34 -8
- package/dist/lib/date-format.js.map +1 -1
- package/dist/lib/day-format.d.ts +46 -0
- package/dist/lib/day-format.js +46 -0
- package/dist/lib/day-format.js.map +1 -0
- package/dist/lib/describe-failure.d.ts +14 -0
- package/dist/lib/describe-failure.js +9 -0
- package/dist/lib/describe-failure.js.map +1 -0
- package/dist/lib/direction.d.ts +16 -0
- package/dist/lib/direction.js +9 -1
- package/dist/lib/direction.js.map +1 -1
- package/dist/lib/focus-left.d.ts +63 -0
- package/dist/lib/focus-left.js +67 -0
- package/dist/lib/focus-left.js.map +1 -0
- package/dist/lib/format.js +5 -14
- package/dist/lib/format.js.map +1 -1
- package/dist/lib/http-status.d.ts +24 -0
- package/dist/lib/http-status.js +14 -0
- package/dist/lib/http-status.js.map +1 -0
- package/dist/lib/intl-cache.d.ts +14 -0
- package/dist/lib/intl-cache.js +15 -0
- package/dist/lib/intl-cache.js.map +1 -0
- package/dist/lib/isin.d.ts +10 -0
- package/dist/lib/isin.js.map +1 -1
- package/dist/lib/iso-day.d.ts +11 -0
- package/dist/lib/iso-day.js +8 -0
- package/dist/lib/iso-day.js.map +1 -0
- package/dist/lib/lazy-with-fallback.d.ts +31 -0
- package/dist/lib/lazy-with-fallback.js +40 -0
- package/dist/lib/lazy-with-fallback.js.map +1 -0
- package/dist/lib/path-pattern.d.ts +34 -0
- package/dist/lib/path-pattern.js +24 -0
- package/dist/lib/path-pattern.js.map +1 -0
- package/dist/lib/reduced-motion.d.ts +2 -1
- package/dist/lib/reduced-motion.js.map +1 -1
- package/dist/lib/round.d.ts +2 -1
- package/dist/lib/round.js +2 -1
- package/dist/lib/round.js.map +1 -1
- package/dist/lib/safe-storage.d.ts +24 -5
- package/dist/lib/safe-storage.js +27 -2
- package/dist/lib/safe-storage.js.map +1 -1
- package/dist/lib/session-refresh.js +1 -1
- package/dist/lib/session-refresh.js.map +1 -1
- package/dist/lib/share-format.d.ts +13 -0
- package/dist/lib/share-format.js +10 -0
- package/dist/lib/share-format.js.map +1 -0
- package/dist/lib/text-case.d.ts +17 -0
- package/dist/lib/text-case.js +8 -0
- package/dist/lib/text-case.js.map +1 -0
- package/dist/lib/text-match.d.ts +29 -0
- package/dist/lib/text-match.js +20 -2
- package/dist/lib/text-match.js.map +1 -1
- package/dist/lib/thenable.d.ts +13 -0
- package/dist/lib/thenable.js +8 -0
- package/dist/lib/thenable.js.map +1 -0
- package/dist/lib/translation-review.d.ts +7 -2
- package/dist/lib/translation-review.js +4 -4
- package/dist/lib/translation-review.js.map +1 -1
- package/dist/notifications/device-zone-report.js +1 -1
- package/dist/notifications/device-zone-report.js.map +1 -1
- package/dist/notifications/notification-bell.d.ts +2 -1
- package/dist/notifications/notification-bell.js +3 -3
- package/dist/notifications/notification-bell.js.map +1 -1
- package/dist/notifications/notification-inbox.d.ts +10 -6
- package/dist/notifications/notification-inbox.js +26 -48
- package/dist/notifications/notification-inbox.js.map +1 -1
- package/dist/notifications/notification-parts.d.ts +3 -2
- package/dist/notifications/notification-parts.js +1 -3
- package/dist/notifications/notification-parts.js.map +1 -1
- package/dist/notifications/notification-types-setting.js +1 -1
- package/dist/notifications/notification-types-setting.js.map +1 -1
- package/dist/notifications/notifications-labels.d.ts +6 -0
- package/dist/notifications/notifications-labels.js +1 -0
- package/dist/notifications/notifications-labels.js.map +1 -1
- package/dist/notifications/push-device-setting.js +1 -1
- package/dist/notifications/push-device-setting.js.map +1 -1
- package/dist/notifications/push-devices-setting.d.ts +2 -1
- package/dist/notifications/push-devices-setting.js +27 -49
- package/dist/notifications/push-devices-setting.js.map +1 -1
- package/dist/notifications/quiet-hours-setting.d.ts +10 -3
- package/dist/notifications/quiet-hours-setting.js +65 -26
- package/dist/notifications/quiet-hours-setting.js.map +1 -1
- package/dist/notifications/unsubscribe-panel.js +4 -7
- package/dist/notifications/unsubscribe-panel.js.map +1 -1
- package/dist/notifications/use-push-device.d.ts +39 -1
- package/dist/notifications/use-push-device.js +28 -7
- package/dist/notifications/use-push-device.js.map +1 -1
- package/dist/offline/query-persistence.d.ts +3 -1
- package/dist/offline/query-persistence.js +19 -2
- package/dist/offline/query-persistence.js.map +1 -1
- package/dist/rhf/fields.d.ts +11 -4
- package/dist/rhf/fields.js.map +1 -1
- package/dist/search/command-palette.js +1 -1
- package/dist/search/command-palette.js.map +1 -1
- package/dist/search/global-search.js +19 -9
- package/dist/search/global-search.js.map +1 -1
- package/dist/search/use-command-key.d.ts +12 -1
- package/dist/search/use-command-key.js +3 -12
- package/dist/search/use-command-key.js.map +1 -1
- package/dist/search.d.ts +7 -0
- package/dist/search.js +10 -0
- package/dist/search.js.map +1 -1
- package/dist/settings/use-settings-focus.js +1 -0
- package/dist/settings/use-settings-focus.js.map +1 -1
- package/dist/shell/account-menu-language.d.ts +21 -5
- package/dist/shell/account-menu-language.js +3 -1
- package/dist/shell/account-menu-language.js.map +1 -1
- package/dist/shell/account-menu-text-size.d.ts +26 -9
- package/dist/shell/account-menu-text-size.js +3 -2
- package/dist/shell/account-menu-text-size.js.map +1 -1
- package/dist/shell/dev-menu.js +5 -18
- package/dist/shell/dev-menu.js.map +1 -1
- package/dist/shell/role-switcher.d.ts +7 -0
- package/dist/shell/role-switcher.js.map +1 -1
- package/dist/shell/top-bar-actions.d.ts +1 -1
- package/dist/shell/top-bar-actions.js.map +1 -1
- package/dist/shell/top-bar-parts-labels.d.ts +0 -2
- package/dist/shell/top-bar-parts-labels.js +0 -1
- package/dist/shell/top-bar-parts-labels.js.map +1 -1
- package/dist/shell.d.ts +27 -8
- package/dist/shell.js +28 -7
- package/dist/shell.js.map +1 -1
- package/dist/sync/engine.d.ts +30 -4
- package/dist/sync/engine.js +172 -52
- package/dist/sync/engine.js.map +1 -1
- package/dist/sync.d.ts +6 -2
- package/dist/sync.js +6 -1
- package/dist/sync.js.map +1 -1
- package/dist/testing/css-variables.js +3 -8
- package/dist/testing/css-variables.js.map +1 -1
- package/dist/theme/contrast.d.ts +2 -1
- package/dist/theme/contrast.js +3 -8
- package/dist/theme/contrast.js.map +1 -1
- package/dist/theme/palette-store.js +6 -6
- package/dist/theme/palette-store.js.map +1 -1
- package/dist/theme/text-size.js +3 -8
- package/dist/theme/text-size.js.map +1 -1
- package/dist/theme/theme-store.js +3 -6
- package/dist/theme/theme-store.js.map +1 -1
- package/dist/tour/tour-catalogue.d.ts +7 -4
- package/dist/tour/tour-catalogue.js +12 -10
- package/dist/tour/tour-catalogue.js.map +1 -1
- package/dist/tour/tour-dock.d.ts +0 -2
- package/dist/tour/tour-dock.js +0 -2
- package/dist/tour/tour-dock.js.map +1 -1
- package/dist/tour/tour-gates.d.ts +4 -0
- package/dist/tour/tour-gates.js +14 -0
- package/dist/tour/tour-gates.js.map +1 -1
- package/dist/tour/tour-overlay.d.ts +27 -0
- package/dist/tour/tour-overlay.js +741 -0
- package/dist/tour/tour-overlay.js.map +1 -0
- package/dist/tour/tour.d.ts +13 -3
- package/dist/tour/tour.js +59 -781
- package/dist/tour/tour.js.map +1 -1
- package/dist/tour/use-tour-progress.js +1 -1
- package/dist/tour/use-tour-progress.js.map +1 -1
- package/dist/wizard/stepper-nav.d.ts +5 -1
- package/dist/wizard/stepper-nav.js.map +1 -1
- package/dist/wizard/types.d.ts +6 -2
- package/dist/wizard/types.js.map +1 -1
- package/dist/wizard/use-wizard.d.ts +3 -1
- package/dist/wizard/use-wizard.js.map +1 -1
- package/dist/wizard/validation.d.ts +3 -1
- package/dist/wizard/validation.js.map +1 -1
- package/package.json +10 -6
- package/src/account/account-parts.ts +5 -25
- package/src/account/data-export-setting-labels.ts +1 -1
- package/src/account/delete-account-setting-labels.ts +1 -1
- package/src/account/email-change-setting-labels.ts +1 -1
- package/src/account/passkeys-setting.tsx +60 -38
- package/src/account/sessions-setting.tsx +18 -12
- package/src/admin/admin-action-confirm.tsx +1 -5
- package/src/admin/admin-parts.ts +11 -25
- package/src/admin/mail-test-card-labels.ts +1 -1
- package/src/admin/plan-change-labels.ts +5 -23
- package/src/admin/plan-change.tsx +7 -44
- package/src/admin/reviewer-scope-editor.tsx +3 -3
- package/src/auth/auth-errors-labels.ts +23 -0
- package/src/auth/auth-errors.ts +11 -38
- package/src/auth/complete-name-dialog.tsx +4 -1
- package/src/auth/forgot-password-form-labels.ts +1 -1
- package/src/auth/forgot-password-form.tsx +11 -6
- package/src/auth/register-form-labels.ts +1 -1
- package/src/auth/reset-password-form-labels.ts +1 -1
- package/src/auth/reset-password-form.tsx +8 -4
- package/src/auth/sign-in-form-labels.ts +1 -1
- package/src/auth/status-parts.tsx +0 -6
- package/src/auth/verify-email-labels.ts +1 -1
- package/src/auth/verify-email.tsx +11 -6
- package/src/billing/cancel-subscription.tsx +26 -12
- package/src/billing/dialog-close.ts +34 -0
- package/src/billing/plan-card.tsx +36 -11
- package/src/billing/plan-change-labels.ts +66 -0
- package/src/billing/plan-switch.tsx +26 -12
- package/src/chart.ts +21 -3
- package/src/components/account-chips.tsx +20 -23
- package/src/components/alert-banner.tsx +82 -5
- package/src/components/amount-input.tsx +18 -7
- package/src/components/autocomplete.tsx +64 -70
- package/src/components/bulk-action-bar.tsx +70 -2
- package/src/components/button-look.ts +5 -5
- package/src/components/button.tsx +2 -2
- package/src/components/chart-edge.ts +34 -1
- package/src/components/chart-figure.tsx +35 -0
- package/src/components/chart-zoom-core.tsx +6 -5
- package/src/components/chart.tsx +26 -5
- package/src/components/combobox-core.tsx +293 -62
- package/src/components/combobox.tsx +183 -153
- package/src/components/copy-button.tsx +34 -23
- package/src/components/country-select.tsx +16 -11
- package/src/components/data-table-column-settings.tsx +52 -10
- package/src/components/data-table-filters.ts +6 -4
- package/src/components/data-table-fit.ts +19 -5
- package/src/components/data-table-groups.tsx +1 -1
- package/src/components/data-table-head.tsx +32 -22
- package/src/components/data-table-mobile.tsx +61 -26
- package/src/components/data-table-pagination.tsx +21 -6
- package/src/components/data-table-resize.ts +1 -1
- package/src/components/data-table-row-actions.tsx +3 -3
- package/src/components/data-table-row.tsx +25 -14
- package/src/components/data-table-selection.ts +1 -1
- package/src/components/data-table-shared.tsx +33 -1
- package/src/components/data-table-sort.ts +57 -2
- package/src/components/data-table-virtual.ts +32 -8
- package/src/components/data-table.tsx +239 -68
- package/src/components/date-field.tsx +65 -8
- package/src/components/date-picker.tsx +125 -48
- package/src/components/date-range-picker.tsx +82 -31
- package/src/components/error-boundary.tsx +53 -39
- package/src/components/field-base-labels.ts +20 -0
- package/src/components/field-base.tsx +13 -7
- package/src/components/field-sync-labels.ts +1 -0
- package/src/components/field-sync.tsx +23 -1
- package/src/components/form-actions.tsx +20 -5
- package/src/components/hover-menu.tsx +18 -8
- package/src/components/icon-button.tsx +14 -9
- package/src/components/inline-confirm.tsx +116 -0
- package/src/components/inline-entity-combobox.tsx +197 -153
- package/src/components/input.tsx +1 -1
- package/src/components/jump-calendar.tsx +30 -146
- package/src/components/legal-page.tsx +10 -7
- package/src/components/legal.tsx +4 -2
- package/src/components/lightbox.tsx +21 -8
- package/src/components/list.tsx +10 -4
- package/src/components/measured-grid.tsx +8 -4
- package/src/components/mini-calendar.tsx +6 -5
- package/src/components/modal.tsx +6 -1
- package/src/components/month-grid.tsx +229 -0
- package/src/components/month-picker.tsx +192 -200
- package/src/components/multi-select.tsx +21 -9
- package/src/components/picker-sheet.tsx +12 -9
- package/src/components/pie-chart-labels.ts +8 -0
- package/src/components/pie-chart.tsx +22 -28
- package/src/components/popover.tsx +18 -1
- package/src/components/row-actions.tsx +2 -1
- package/src/components/section-nav.tsx +7 -0
- package/src/components/series-chart-axes.ts +3 -3
- package/src/components/series-chart-labels.ts +7 -4
- package/src/components/series-chart.tsx +178 -69
- package/src/components/share-card.tsx +6 -6
- package/src/components/sign-chip-labels.ts +1 -0
- package/src/components/sign-chip.tsx +10 -1
- package/src/components/tabs-labels.ts +13 -0
- package/src/components/tabs.tsx +2 -2
- package/src/components/toggle-legend.tsx +16 -11
- package/src/components/translation-review-editor.tsx +6 -5
- package/src/components/translation-review.tsx +4 -3
- package/src/components/treemap-labels.ts +39 -0
- package/src/components/treemap-layout.ts +210 -0
- package/src/components/treemap.tsx +722 -133
- package/src/components/use-table-state.ts +12 -9
- package/src/data-table.ts +9 -2
- package/src/eslint/role-utilities.ts +97 -19
- package/src/feedback/feedback-dialog.tsx +30 -19
- package/src/feedback/feedback-mutation.ts +41 -0
- package/src/feedback/feedback-page-link.ts +90 -0
- package/src/feedback/feedback-public-list.tsx +17 -5
- package/src/feedback/feedback-replies.tsx +13 -6
- package/src/feedback/feedback-row-detail-labels.ts +5 -0
- package/src/feedback/feedback-row-detail.tsx +103 -67
- package/src/feedback/feedback-status-undo.ts +41 -27
- package/src/feedback/feedback-submit-dialog.tsx +2 -2
- package/src/feedback/feedback-submit.tsx +21 -7
- package/src/feedback/feedback-swipe.tsx +1 -1
- package/src/feedback/feedback-table.tsx +86 -38
- package/src/feedback/feedback-thread-labels.ts +2 -2
- package/src/feedback/feedback-thread.tsx +27 -25
- package/src/feedback.ts +42 -0
- package/src/hooks/use-focus-trap.ts +8 -24
- package/src/hooks/use-hotkey.ts +24 -7
- package/src/hooks/use-long-press.ts +16 -2
- package/src/hooks/use-media-query.ts +20 -4
- package/src/hooks/use-mounted.ts +39 -0
- package/src/hooks/use-overlay-history.ts +32 -3
- package/src/i18n/defaults.ts +4 -5
- package/src/i18n/german.ts +8 -2
- package/src/i18n/kit-labels.tsx +9 -2
- package/src/i18n/locales/es.ts +8 -2
- package/src/i18n/locales/fr.ts +21 -13
- package/src/i18n/locales/hu.ts +10 -2
- package/src/i18n/locales/it.ts +8 -2
- package/src/i18n/locales/zh.ts +9 -2
- package/src/i18n/review.ts +5 -0
- package/src/index.ts +103 -13
- package/src/landing/routing.tsx +14 -10
- package/src/lib/broadcast.ts +52 -0
- package/src/lib/date-format.ts +89 -13
- package/src/lib/day-format.ts +96 -0
- package/src/lib/describe-failure.ts +18 -0
- package/src/lib/direction.ts +39 -0
- package/src/lib/focus-left.ts +156 -0
- package/src/lib/format.ts +5 -17
- package/src/lib/http-status.ts +38 -0
- package/src/lib/intl-cache.ts +25 -0
- package/src/lib/isin.ts +10 -0
- package/src/lib/iso-day.ts +13 -0
- package/src/lib/lazy-with-fallback.ts +82 -0
- package/src/lib/path-pattern.ts +55 -0
- package/src/lib/reduced-motion.ts +2 -1
- package/src/lib/round.ts +7 -2
- package/src/lib/safe-storage.ts +48 -6
- package/src/lib/session-refresh.ts +1 -1
- package/src/lib/share-format.ts +18 -0
- package/src/lib/text-case.ts +19 -0
- package/src/lib/text-match.ts +57 -2
- package/src/lib/thenable.ts +19 -0
- package/src/lib/translation-review.ts +13 -5
- package/src/notifications/device-zone-report.ts +1 -1
- package/src/notifications/notification-bell.tsx +7 -4
- package/src/notifications/notification-inbox.tsx +40 -58
- package/src/notifications/notification-parts.tsx +3 -4
- package/src/notifications/notification-types-setting.tsx +1 -1
- package/src/notifications/notifications-labels.ts +7 -0
- package/src/notifications/push-device-setting.tsx +1 -1
- package/src/notifications/push-devices-setting.tsx +30 -55
- package/src/notifications/quiet-hours-setting.tsx +93 -31
- package/src/notifications/unsubscribe-panel.tsx +4 -7
- package/src/notifications/use-push-device.ts +76 -10
- package/src/offline/query-persistence.ts +35 -3
- package/src/rhf/fields.tsx +11 -4
- package/src/search/command-palette.tsx +2 -4
- package/src/search/global-search.tsx +36 -15
- package/src/search/use-command-key.ts +13 -12
- package/src/search.ts +9 -0
- package/src/settings/use-settings-focus.ts +3 -0
- package/src/shell/account-menu-language.tsx +27 -5
- package/src/shell/account-menu-text-size.tsx +32 -10
- package/src/shell/dev-menu.tsx +7 -21
- package/src/shell/role-switcher.tsx +7 -0
- package/src/shell/top-bar-actions.tsx +1 -1
- package/src/shell/top-bar-parts-labels.ts +0 -3
- package/src/shell.ts +40 -9
- package/src/sync/engine.ts +339 -61
- package/src/sync.ts +8 -1
- package/src/testing/css-variables.ts +8 -9
- package/src/theme/contrast.ts +8 -9
- package/src/theme/palette-store.ts +9 -9
- package/src/theme/text-size.ts +6 -8
- package/src/theme/theme-store.ts +7 -9
- package/src/tour/tour-catalogue.tsx +26 -15
- package/src/tour/tour-dock.ts +0 -2
- package/src/tour/tour-gates.ts +23 -0
- package/src/tour/tour-overlay.tsx +1170 -0
- package/src/tour/tour.tsx +108 -1202
- package/src/tour/use-tour-progress.ts +1 -1
- package/src/wizard/stepper-nav.tsx +3 -1
- package/src/wizard/types.ts +11 -2
- package/src/wizard/use-wizard.ts +2 -1
- package/src/wizard/validation.ts +8 -2
- package/tokens.css +2 -1
- package/dist/components/ui-labels.js.map +0 -1
- package/dist/shell/dev-switchers.d.ts +0 -6
- package/dist/shell/dev-switchers.js +0 -12
- package/dist/shell/dev-switchers.js.map +0 -1
- package/src/components/ui-labels.ts +0 -24
- package/src/shell/dev-switchers.tsx +0 -18
|
@@ -20,6 +20,10 @@ export interface DataTableRowCtx<T> {
|
|
|
20
20
|
/** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True
|
|
21
21
|
* when the key was one of them. Without it the roving walks the rendered rows. */
|
|
22
22
|
moveFocus?: (fromIndex: number, key: string) => boolean;
|
|
23
|
+
/** The focus came into this row — the row, a control in it, its open detail, or a
|
|
24
|
+
* portal one of them opened: where the table puts the focus if the row leaves
|
|
25
|
+
* (refactor audit 2026-10-30, DSP-4). */
|
|
26
|
+
noteFocus: (key: string | number) => void;
|
|
23
27
|
}
|
|
24
28
|
export interface DataTableRowProps<T> {
|
|
25
29
|
row: T;
|
|
@@ -51,7 +55,7 @@ export interface DataTableRowProps<T> {
|
|
|
51
55
|
rowDetailsLabel: string;
|
|
52
56
|
selectRowLabel: string;
|
|
53
57
|
/** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the
|
|
54
|
-
* next), and
|
|
58
|
+
* next), and its detail row is marked with the row's index for the window's measuring. */
|
|
55
59
|
ariaRowIndex?: number;
|
|
56
60
|
}
|
|
57
61
|
/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the
|
|
@@ -59,7 +63,7 @@ export interface DataTableRowProps<T> {
|
|
|
59
63
|
export declare const DataTableRow: <T>(props: DataTableRowProps<T> & {
|
|
60
64
|
key?: string | number;
|
|
61
65
|
}) => ReactNode;
|
|
62
|
-
export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCardStretched" | "mobileCard" | "mobilePrimaryCol" | "mobileStatusColumns" | "mobileSecondaryColumns" | "mobileActionColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
|
|
66
|
+
export interface DataTableMobileRowProps<T> extends Pick<MobileRowProps<T>, "row" | "rowIndex" | "opensRow" | "mobileDir" | "mobileCardLinkable" | "mobileCardStretched" | "mobileCard" | "mobilePrimaryCol" | "mobileStatusColumns" | "mobileSecondaryColumns" | "mobileActionColumns" | "mobileExpandAsDialog" | "compact" | "large"> {
|
|
63
67
|
ctx: RefObject<DataTableRowCtx<T>>;
|
|
64
68
|
rowKey: string | number;
|
|
65
69
|
expanded: boolean;
|
|
@@ -5,6 +5,7 @@ import { Fragment, memo } from "react";
|
|
|
5
5
|
import { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from "./data-table-shared.js";
|
|
6
6
|
import { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from "./data-table-fit.js";
|
|
7
7
|
import { MobileRow } from "./data-table-mobile.js";
|
|
8
|
+
import { Checkbox } from "./checkbox.js";
|
|
8
9
|
import { cn } from "../lib/cn.js";
|
|
9
10
|
function sameAttrs(a, b) {
|
|
10
11
|
if (a === b) return true;
|
|
@@ -83,12 +84,13 @@ function DataTableRowImpl({
|
|
|
83
84
|
{
|
|
84
85
|
...cleanAttrs(attrs),
|
|
85
86
|
"aria-rowindex": ariaRowIndex,
|
|
86
|
-
"data-row-index":
|
|
87
|
+
"data-row-index": rowIndex,
|
|
87
88
|
"data-row-nav": rowsFocusable ? "" : void 0,
|
|
88
89
|
tabIndex: rowsFocusable ? tabbable ? 0 : -1 : void 0,
|
|
89
|
-
onFocus:
|
|
90
|
-
if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);
|
|
91
|
-
|
|
90
|
+
onFocus: (e) => {
|
|
91
|
+
if (rowsFocusable && e.target === e.currentTarget) ctx.current.setFocusRowKey(key);
|
|
92
|
+
ctx.current.noteFocus(key);
|
|
93
|
+
},
|
|
92
94
|
onKeyDown: rowsFocusable ? (e) => {
|
|
93
95
|
if (e.target !== e.currentTarget) return;
|
|
94
96
|
if (e.altKey || e.ctrlKey || e.metaKey) return;
|
|
@@ -136,11 +138,12 @@ function DataTableRowImpl({
|
|
|
136
138
|
{
|
|
137
139
|
className: cn("align-top", compact ? "w-8 px-2 py-1" : "w-10 px-3 py-2"),
|
|
138
140
|
onClick: (e) => e.stopPropagation(),
|
|
139
|
-
children: selectable &&
|
|
140
|
-
|
|
141
|
+
children: selectable && // The kit's Checkbox, as the phone card's, not an indigo native box (DSP-14;
|
|
142
|
+
// see the header's).
|
|
143
|
+
/* @__PURE__ */ jsx(
|
|
144
|
+
Checkbox,
|
|
141
145
|
{
|
|
142
|
-
|
|
143
|
-
className: cn("accent-indigo-600", compact ? "size-3.5" : "size-4"),
|
|
146
|
+
inputClassName: compact ? "size-3.5" : void 0,
|
|
144
147
|
checked: selected,
|
|
145
148
|
onClick: (e) => {
|
|
146
149
|
if (e.shiftKey && ctx.current.selectRange(rowIndex)) {
|
|
@@ -183,8 +186,10 @@ function DataTableRowImpl({
|
|
|
183
186
|
col === linkColumn && href ? (
|
|
184
187
|
// No `onActivate`: the click is left to bubble to the
|
|
185
188
|
// <tr> handler above, which already owns expand-vs-select.
|
|
186
|
-
// Calling it here as well would toggle the row twice.
|
|
187
|
-
|
|
189
|
+
// Calling it here as well would toggle the row twice. Without
|
|
190
|
+
// `onRowClick` (the row is not focusable then) nothing opens it in
|
|
191
|
+
// place, and the link is followed (DSP-23 b).
|
|
192
|
+
/* @__PURE__ */ jsx(RowLink, { href, navigate: !rowsFocusable, className: "block", "data-row-link": "", children: col.cell(row) })
|
|
188
193
|
) : col.cell(row)
|
|
189
194
|
);
|
|
190
195
|
})
|
|
@@ -197,6 +202,7 @@ function DataTableRowImpl({
|
|
|
197
202
|
id: hasDisclosure ? detailId : void 0,
|
|
198
203
|
"aria-rowindex": windowed ? ariaRowIndex + 1 : void 0,
|
|
199
204
|
"data-row-detail": windowed ? rowIndex : void 0,
|
|
205
|
+
onFocus: () => ctx.current.noteFocus(key),
|
|
200
206
|
className: "bg-surface-2 border-t border-subtle",
|
|
201
207
|
children: /* @__PURE__ */ jsx("td", { colSpan: totalColSpan, className: "p-0", children: /* @__PURE__ */ jsx("div", { className: "w-0 min-w-full", children: /* @__PURE__ */ jsx(
|
|
202
208
|
"div",
|
|
@@ -240,6 +246,7 @@ function DataTableMobileRowImpl({
|
|
|
240
246
|
rowAttributes: () => attrs,
|
|
241
247
|
onRowClick: interactive ? (r) => ctx.current.onRowClick(r) : void 0,
|
|
242
248
|
rowHref: href !== void 0 ? () => href : void 0,
|
|
249
|
+
onFocusIn: () => ctx.current.noteFocus(key),
|
|
243
250
|
select: selectionOn ? {
|
|
244
251
|
active: selectActive,
|
|
245
252
|
selectable,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table-row.tsx"],"sourcesContent":["import { Fragment, memo } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from \"react\";\nimport { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from \"./data-table-fit\";\nimport { MobileRow, type MobileRowProps } from \"./data-table-mobile\";\nimport type { DataTableColumn, MobileSwipeActions } from \"./data-table\";\nimport { cn } from \"../lib/cn\";\n\n// DataTable's rows as memoised components (0.48.2, keksdose K-052-2, dev #632 — Marcel:\n// \"The table is extremely slow. Is it virtualised or is everytime the whole table\n// rendered?\"). The owner's selection, expansion and the roving focus all live ABOVE the\n// rows, so every tick re-rendered the whole table: on keksdose's register one checkbox\n// cost 430–1200 ms of INP at 271 rows. A row now bails out unless one of its own inputs\n// changed.\n//\n// What a row compares, and so the contract a call site keeps:\n// * the row object, its index and its key;\n// * what the table derived for it from the caller's functions, as PRIMITIVES — selected,\n// selectable, expanded, its tab stop, its `rowClassName` string, its `rowHref`, and\n// its `rowAttributes` compared key by key. The functions themselves may be inline;\n// * the column definitions BY IDENTITY: a cell is the caller's render function, and\n// what it reads is the caller's to say. A page that memoises its columns (keksdose's\n// `useTransactionColumns`) gets the bail-out; one that writes them inline gets a new\n// array every render and the full re-render it always had — never a stale cell;\n// * an OPEN row's detail (`expandedRow`) is called on every render, so it re-renders\n// with the table as before, and an editor inside it keeps its live inputs.\n// The handlers do not take part: they read the table's latest props through `ctx`, a\n// ref the table refreshes each commit, so a row that bailed out still acts on the\n// current selection and the current `onRowClick`.\n\n/** What a row's handlers read at event time — DataTable's latest props and helpers. */\nexport interface DataTableRowCtx<T> {\n onRowClick: ((row: T) => void) | undefined;\n onToggle: ((row: T, checked: boolean) => void) | undefined;\n isSelected: (row: T) => boolean;\n canSelect: (row: T) => boolean;\n selectRange: (toIndex: number) => boolean;\n /** Anchor the next Shift+click range on this row's key. */\n setAnchor: (key: string | number) => void;\n /** Remember the checkbox click that drew a range… */\n markRangeClick: (e: Event) => void;\n /** …and drop that click's own change event (true once for it). */\n takeRangeClick: (e: Event) => boolean;\n setFocusRowKey: (key: string | number) => void;\n /** The phone card's long press: enter selection mode with this row selected. */\n onLongPress: (row: T) => void;\n /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True\n * when the key was one of them. Without it the roving walks the rendered rows. */\n moveFocus?: (fromIndex: number, key: string) => boolean;\n}\n\n/** `rowAttributes`' result compared key by key: a call site returns a fresh object (or\n * `undefined`) per call, and its values are strings. */\nfunction sameAttrs(\n a: Record<string, string | undefined> | undefined,\n b: Record<string, string | undefined> | undefined,\n): boolean {\n if (a === b) return true;\n if (!a || !b) return false;\n const ak = Object.keys(a);\n if (ak.length !== Object.keys(b).length) return false;\n for (const k of ak) if (a[k] !== b[k]) return false;\n return true;\n}\n\nfunction sameProps<P extends { attrs?: Record<string, string | undefined> }>(prev: P, next: P): boolean {\n for (const k of Object.keys(next) as (keyof P)[]) {\n if (k === \"attrs\") continue;\n if (!Object.is(prev[k], next[k])) return false;\n }\n return sameAttrs(prev.attrs, next.attrs);\n}\n\n/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of\n * the keyboard-activatable rows (see the row's `onKeyDown`). */\nfunction moveRowFocus(from: HTMLElement, key: string): boolean {\n if (!(key in ROW_NAV_KEYS)) return false;\n // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.\n const table = from.closest(\"table\");\n if (!table) return false;\n const rows = Array.from(table.tBodies).flatMap((body) =>\n Array.from(body.children).filter(\n (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute(\"data-row-nav\"),\n ),\n );\n const i = rows.indexOf(from);\n const target =\n key === \"ArrowDown\"\n ? rows[i + 1]\n : key === \"ArrowUp\"\n ? rows[i - 1]\n : key === \"Home\"\n ? rows[0]\n : key === \"End\"\n ? rows[rows.length - 1]\n : undefined;\n // At either end the key is still consumed, or ArrowDown on the last row would\n // scroll the page out from under a focused row.\n target?.focus();\n return true;\n}\nconst ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;\n\n// ---------- Desktop row ----------\n\nexport interface DataTableRowProps<T> {\n row: T;\n rowIndex: number;\n rowKey: string | number;\n ctx: RefObject<DataTableRowCtx<T>>;\n columns: DataTableColumn<T>[];\n widths: Record<string, number>;\n growDrawn: boolean;\n linkColumn: DataTableColumn<T> | undefined;\n href: string | undefined;\n /** The selection column is drawn (DataTable's `selection`). */\n selectionColumn: boolean;\n selectable: boolean;\n selected: boolean;\n expanded: boolean;\n /** The open row's detail; `null` on a closed row. */\n expansion: ReactNode;\n /** The row carries the visually hidden disclosure button (focusable rows that expand). */\n disclosure: boolean;\n detailId: string;\n rowsFocusable: boolean;\n rowInteractive: boolean;\n tabbable: boolean;\n className: string | undefined;\n attrs: Record<string, string | undefined> | undefined;\n compact: boolean;\n totalColSpan: number;\n rowDetailsLabel: string;\n selectRowLabel: string;\n /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the\n * next), and the row is marked with its index for the window's measuring. */\n ariaRowIndex?: number;\n}\n\nfunction DataTableRowImpl<T>({\n row,\n rowIndex,\n rowKey: key,\n ctx,\n columns,\n widths,\n growDrawn,\n linkColumn,\n href,\n selectionColumn,\n selectable,\n selected,\n expanded,\n expansion,\n disclosure: hasDisclosure,\n detailId,\n rowsFocusable,\n rowInteractive,\n tabbable,\n className,\n attrs,\n compact,\n totalColSpan,\n rowDetailsLabel,\n selectRowLabel,\n ariaRowIndex,\n}: DataTableRowProps<T>) {\n const windowed = ariaRowIndex !== undefined;\n // Whether the row is open, said where ARIA allows it (round 0.34, the\n // showcase's axe check): `aria-expanded` belongs to a treegrid's row, not a\n // table's, and the <tr> wore it. A disclosure button in the first cell carries\n // it now, with `aria-controls` on the detail row while that is there.\n // Visually hidden and not a tab stop: the row stays the one roving stop, with\n // Enter/Space and the whole-row click — this is the screen reader cursor's\n // way in, and where it hears the state. Named by `aria-label`, so the cell's\n // text stays the cell's own.\n const disclosure = hasDisclosure ? (\n <button\n type=\"button\"\n tabIndex={-1}\n className=\"sr-only-fixed\"\n aria-label={rowDetailsLabel}\n aria-expanded={expanded}\n aria-controls={expansion ? detailId : undefined}\n // The row's own handler leaves a click on a control inside it alone.\n onClick={() => ctx.current.onRowClick!(row)}\n />\n ) : null;\n return (\n <Fragment>\n <tr\n {...cleanAttrs(attrs)}\n aria-rowindex={ariaRowIndex}\n data-row-index={windowed ? rowIndex : undefined}\n data-row-nav={rowsFocusable ? \"\" : undefined}\n tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}\n onFocus={\n rowsFocusable\n ? (e) => {\n if (e.target === e.currentTarget) ctx.current.setFocusRowKey(key);\n }\n : undefined\n }\n onKeyDown={\n rowsFocusable\n ? (e) => {\n // Only the row's own key presses: Enter on a nested button\n // or link is that control's, and Space in a nested input\n // is a space.\n if (e.target !== e.currentTarget) return;\n if (e.altKey || e.ctrlKey || e.metaKey) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n // Space would otherwise scroll the table.\n e.preventDefault();\n ctx.current.onRowClick!(row);\n return;\n }\n if (e.shiftKey) return;\n const move = ctx.current.moveFocus;\n if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();\n }\n : undefined\n }\n className={cn(\n \"border-t border-subtle\",\n rowInteractive && \"cursor-pointer hover:bg-hover\",\n // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an\n // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`\n // is not painted by every engine, an outline is.\n rowsFocusable &&\n \"focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n className,\n )}\n onClick={\n rowInteractive\n ? (e: ReactMouseEvent<HTMLTableRowElement>) => {\n const c = ctx.current;\n // A click on a control inside the row (a button, a link,\n // an input the cell renders) is that control's — it must\n // not also open the row. Cells no longer have to\n // `stopPropagation` to get that.\n if (fromOwnControl(e.target, e.currentTarget)) return;\n if (fromOutside(e.target, e.currentTarget)) return;\n // Modifier-clicks anywhere in the row drive\n // selection instead of expanding it (feedback #289):\n // Ctrl/Cmd toggles a single row, Shift selects the\n // range from the last-toggled row (inclusive of this\n // one) — the same as the checkbox, but for the whole\n // row, which is what the checkbox-only version was\n // missing.\n if (c.onToggle && c.canSelect(row)) {\n if (e.shiftKey) {\n // Drop the text selection a shift-click would\n // otherwise smear across the rows.\n window.getSelection?.()?.removeAllRanges();\n if (c.selectRange(rowIndex)) return;\n // No anchor yet: treat it as the first pick.\n c.setAnchor(key);\n c.onToggle(row, !c.isSelected(row));\n return;\n }\n if (e.metaKey || e.ctrlKey) {\n c.setAnchor(key);\n c.onToggle(row, !c.isSelected(row));\n return;\n }\n }\n c.onRowClick?.(row);\n }\n : undefined\n }\n >\n {selectionColumn && (\n <td\n className={cn(\"align-top\", compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\")}\n // Don't let selecting a row also trigger the row click\n // (which expands/edits it).\n onClick={(e) => e.stopPropagation()}\n >\n {selectable && (\n <input\n type=\"checkbox\"\n className={cn(\"accent-indigo-600\", compact ? \"size-3.5\" : \"size-4\")}\n checked={selected}\n // Shift+click selects the range from the last toggled\n // row. `preventDefault` puts the box back, but it does NOT\n // stop React's `onChange`: React derives a checkbox's\n // change from the `click` itself, after the browser has\n // already flipped `checked` and before the cancellation\n // reverts it — so the same click also reported itself as\n // a single toggle, and the owner got `onToggleMany` and\n // then `onToggle` for the clicked row. The click is\n // remembered by identity and its change is dropped; a\n // boolean flag would outlive a click whose change never\n // came and swallow the user's next real one.\n onClick={(e) => {\n if (e.shiftKey && ctx.current.selectRange(rowIndex)) {\n e.preventDefault();\n ctx.current.markRangeClick(e.nativeEvent);\n }\n }}\n onChange={(e) => {\n const c = ctx.current;\n if (c.takeRangeClick(e.nativeEvent)) return;\n c.setAnchor(key);\n c.onToggle?.(row, e.target.checked);\n }}\n aria-label={selectRowLabel}\n />\n )}\n </td>\n )}\n {columns.map((col, colIndex) => {\n const width = widths[col.key];\n // The caller's first, the table's over it — see `cellProps`.\n const own = splitCellProps(col.cellProps?.(row));\n const pinned = width ? { width, minWidth: width, maxWidth: width } : undefined;\n return (\n <td\n {...own.attrs}\n key={col.key}\n data-col={col.key}\n style={own.style || pinned ? { ...own.style, ...pinned } : undefined}\n className={cn(\n \"align-top\",\n compact ? \"px-2 py-1\" : \"px-3 py-2\",\n width && \"overflow-hidden text-ellipsis\",\n col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,\n logicalAlign(own.className),\n logicalAlign(col.className),\n )}\n >\n {colIndex === 0 && disclosure}\n {col === linkColumn && href ? (\n // No `onActivate`: the click is left to bubble to the\n // <tr> handler above, which already owns expand-vs-select.\n // Calling it here as well would toggle the row twice.\n <RowLink href={href} className=\"block\" data-row-link=\"\">\n {col.cell(row)}\n </RowLink>\n ) : (\n col.cell(row)\n )}\n </td>\n );\n })}\n </tr>\n {expansion && (\n <tr\n id={hasDisclosure ? detailId : undefined}\n aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}\n data-row-detail={windowed ? rowIndex : undefined}\n className=\"bg-surface-2 border-t border-subtle\"\n >\n {/* The detail panel spans every column. In an `auto` table\n layout (the default here — columns only get fixed style\n widths once the user resizes/auto-sizes them) the cell's\n content preferred-width is redistributed across the\n spanned columns, so a long expansion visibly re-sizes the\n columns above it — and one-line content does not, since\n its preferred width is small (feedback #104). Wrapping the\n content in `w-0 min-w-full` pins the cell's preferred\n width to ~0 (the explicit width:0 child), so it can never\n perturb the columns; the div then fills to the full row\n width only at paint time, and long text wraps within it.\n Inside it the content is pinned to what the scroller SHOWS\n (0.47, keksdose S4): on a table wider than its scroller a\n table-wide panel put an inline editor's Save/Cancel off-screen.\n `sticky start-0` holds it at the scroller's start edge (the\n right one in RTL) as the row scrolls sideways, and\n `--dt-visible-w` (the scroller's clientWidth, measured above)\n sizes it; before the first measure, and in a table no wider\n than its scroller, it is the full width as before. */}\n <td colSpan={totalColSpan} className=\"p-0\">\n <div className=\"w-0 min-w-full\">\n <div\n className={cn(\n \"sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full\",\n compact ? \"px-2 py-2\" : \"px-3 py-3\",\n )}\n >\n {expansion}\n </div>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n );\n}\n\n/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the\n * file's note for what it compares. */\nexport const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(\n props: DataTableRowProps<T> & { key?: string | number },\n) => ReactNode;\n\n// ---------- Phone card ----------\n\nexport interface DataTableMobileRowProps<T> extends Pick<\n MobileRowProps<T>,\n | \"row\"\n | \"opensRow\"\n | \"mobileDir\"\n | \"mobileCardLinkable\"\n | \"mobileCardStretched\"\n | \"mobileCard\"\n | \"mobilePrimaryCol\"\n | \"mobileStatusColumns\"\n | \"mobileSecondaryColumns\"\n | \"mobileActionColumns\"\n | \"mobileExpandAsDialog\"\n | \"compact\"\n | \"large\"\n> {\n ctx: RefObject<DataTableRowCtx<T>>;\n rowKey: string | number;\n expanded: boolean;\n /** The opened row's content (`openedRowContent`); `null` on a closed card. */\n expansion: ReactNode;\n className: string | undefined;\n attrs: Record<string, string | undefined> | undefined;\n /** The table has `onRowClick`. */\n interactive: boolean;\n href: string | undefined;\n /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */\n swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n /** The table has `selection`. */\n selectionOn: boolean;\n selectActive: boolean;\n selectable: boolean;\n selected: boolean;\n}\n\nconst yes = () => true;\n\nfunction DataTableMobileRowImpl<T>({\n ctx,\n rowKey: key,\n expanded,\n expansion,\n className,\n attrs,\n interactive,\n href,\n selectionOn,\n selectActive,\n selectable,\n selected,\n ...rest\n}: DataTableMobileRowProps<T>) {\n const { row } = rest;\n // `MobileRow` keeps its own shape (functions of the row); these hand it the values the\n // table derived, and the handlers read the latest props through `ctx`.\n return (\n <MobileRow\n {...rest}\n isExpanded={expanded ? yes : undefined}\n openedRowContent={() => expansion}\n rowClassName={() => className}\n rowAttributes={() => attrs}\n onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}\n rowHref={href !== undefined ? () => href : undefined}\n select={\n selectionOn\n ? {\n active: selectActive,\n selectable,\n selected,\n onToggle: (checked) => {\n ctx.current.setAnchor(key);\n ctx.current.onToggle?.(row, checked);\n },\n onLongPress: () => ctx.current.onLongPress(row),\n }\n : null\n }\n />\n );\n}\n\n/** One phone card, memoised like {@link DataTableRow}. */\nexport const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps) as <T>(\n props: DataTableMobileRowProps<T> & { key?: string | number },\n) => ReactNode;\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table-row.tsx"],"sourcesContent":["import { Fragment, memo } from \"react\";\nimport type { MouseEvent as ReactMouseEvent, ReactNode, RefObject } from \"react\";\nimport { RowLink, cleanAttrs, fromOutside, fromOwnControl, logicalAlign, splitCellProps } from \"./data-table-shared\";\nimport { GROW_CELL_CLASS, GROW_PEER_CELL_CLASS } from \"./data-table-fit\";\nimport { MobileRow, type MobileRowProps } from \"./data-table-mobile\";\nimport { Checkbox } from \"./checkbox\";\nimport type { DataTableColumn, MobileSwipeActions } from \"./data-table\";\nimport { cn } from \"../lib/cn\";\n\n// DataTable's rows as memoised components (0.48.2, keksdose K-052-2, dev #632 — Marcel:\n// \"The table is extremely slow. Is it virtualised or is everytime the whole table\n// rendered?\"). The owner's selection, expansion and the roving focus all live ABOVE the\n// rows, so every tick re-rendered the whole table: on keksdose's register one checkbox\n// cost 430–1200 ms of INP at 271 rows. A row now bails out unless one of its own inputs\n// changed.\n//\n// What a row compares, and so the contract a call site keeps:\n// * the row object, its index and its key;\n// * what the table derived for it from the caller's functions, as PRIMITIVES — selected,\n// selectable, expanded, its tab stop, its `rowClassName` string, its `rowHref`, and\n// its `rowAttributes` compared key by key. The functions themselves may be inline;\n// * the column definitions BY IDENTITY: a cell is the caller's render function, and\n// what it reads is the caller's to say. A page that memoises its columns (keksdose's\n// `useTransactionColumns`) gets the bail-out; one that writes them inline gets a new\n// array every render and the full re-render it always had — never a stale cell;\n// * an OPEN row's detail (`expandedRow`) is called on every render, so it re-renders\n// with the table as before, and an editor inside it keeps its live inputs.\n// The handlers do not take part: they read the table's latest props through `ctx`, a\n// ref the table refreshes each commit, so a row that bailed out still acts on the\n// current selection and the current `onRowClick`.\n\n/** What a row's handlers read at event time — DataTable's latest props and helpers. */\nexport interface DataTableRowCtx<T> {\n onRowClick: ((row: T) => void) | undefined;\n onToggle: ((row: T, checked: boolean) => void) | undefined;\n isSelected: (row: T) => boolean;\n canSelect: (row: T) => boolean;\n selectRange: (toIndex: number) => boolean;\n /** Anchor the next Shift+click range on this row's key. */\n setAnchor: (key: string | number) => void;\n /** Remember the checkbox click that drew a range… */\n markRangeClick: (e: Event) => void;\n /** …and drop that click's own change event (true once for it). */\n takeRangeClick: (e: Event) => boolean;\n setFocusRowKey: (key: string | number) => void;\n /** The phone card's long press: enter selection mode with this row selected. */\n onLongPress: (row: T) => void;\n /** Under `virtualize` (0.48.2): Arrow/Home/End over every row, rendered or not. True\n * when the key was one of them. Without it the roving walks the rendered rows. */\n moveFocus?: (fromIndex: number, key: string) => boolean;\n /** The focus came into this row — the row, a control in it, its open detail, or a\n * portal one of them opened: where the table puts the focus if the row leaves\n * (refactor audit 2026-10-30, DSP-4). */\n noteFocus: (key: string | number) => void;\n}\n\n/** `rowAttributes`' result compared key by key: a call site returns a fresh object (or\n * `undefined`) per call, and its values are strings. */\nfunction sameAttrs(\n a: Record<string, string | undefined> | undefined,\n b: Record<string, string | undefined> | undefined,\n): boolean {\n if (a === b) return true;\n if (!a || !b) return false;\n const ak = Object.keys(a);\n if (ak.length !== Object.keys(b).length) return false;\n for (const k of ak) if (a[k] !== b[k]) return false;\n return true;\n}\n\nfunction sameProps<P extends { attrs?: Record<string, string | undefined> }>(prev: P, next: P): boolean {\n for (const k of Object.keys(next) as (keyof P)[]) {\n if (k === \"attrs\") continue;\n if (!Object.is(prev[k], next[k])) return false;\n }\n return sameAttrs(prev.attrs, next.attrs);\n}\n\n/** Arrow/Home/End between the focusable rows of the table's bodies — the roving half of\n * the keyboard-activatable rows (see the row's `onKeyDown`). */\nfunction moveRowFocus(from: HTMLElement, key: string): boolean {\n if (!(key in ROW_NAV_KEYS)) return false;\n // Every body of the table: a grouped table (`groupBy`, 0.48) has one per group.\n const table = from.closest(\"table\");\n if (!table) return false;\n const rows = Array.from(table.tBodies).flatMap((body) =>\n Array.from(body.children).filter(\n (el): el is HTMLElement => el instanceof HTMLElement && el.hasAttribute(\"data-row-nav\"),\n ),\n );\n const i = rows.indexOf(from);\n const target =\n key === \"ArrowDown\"\n ? rows[i + 1]\n : key === \"ArrowUp\"\n ? rows[i - 1]\n : key === \"Home\"\n ? rows[0]\n : key === \"End\"\n ? rows[rows.length - 1]\n : undefined;\n // At either end the key is still consumed, or ArrowDown on the last row would\n // scroll the page out from under a focused row.\n target?.focus();\n return true;\n}\nconst ROW_NAV_KEYS = { ArrowDown: 1, ArrowUp: 1, Home: 1, End: 1 } as const;\n\n// ---------- Desktop row ----------\n\nexport interface DataTableRowProps<T> {\n row: T;\n rowIndex: number;\n rowKey: string | number;\n ctx: RefObject<DataTableRowCtx<T>>;\n columns: DataTableColumn<T>[];\n widths: Record<string, number>;\n growDrawn: boolean;\n linkColumn: DataTableColumn<T> | undefined;\n href: string | undefined;\n /** The selection column is drawn (DataTable's `selection`). */\n selectionColumn: boolean;\n selectable: boolean;\n selected: boolean;\n expanded: boolean;\n /** The open row's detail; `null` on a closed row. */\n expansion: ReactNode;\n /** The row carries the visually hidden disclosure button (focusable rows that expand). */\n disclosure: boolean;\n detailId: string;\n rowsFocusable: boolean;\n rowInteractive: boolean;\n tabbable: boolean;\n className: string | undefined;\n attrs: Record<string, string | undefined> | undefined;\n compact: boolean;\n totalColSpan: number;\n rowDetailsLabel: string;\n selectRowLabel: string;\n /** Under `virtualize` (0.48.2): the row's `aria-rowindex` (its open detail row is the\n * next), and its detail row is marked with the row's index for the window's measuring. */\n ariaRowIndex?: number;\n}\n\nfunction DataTableRowImpl<T>({\n row,\n rowIndex,\n rowKey: key,\n ctx,\n columns,\n widths,\n growDrawn,\n linkColumn,\n href,\n selectionColumn,\n selectable,\n selected,\n expanded,\n expansion,\n disclosure: hasDisclosure,\n detailId,\n rowsFocusable,\n rowInteractive,\n tabbable,\n className,\n attrs,\n compact,\n totalColSpan,\n rowDetailsLabel,\n selectRowLabel,\n ariaRowIndex,\n}: DataTableRowProps<T>) {\n const windowed = ariaRowIndex !== undefined;\n // Whether the row is open, said where ARIA allows it (round 0.34, the\n // showcase's axe check): `aria-expanded` belongs to a treegrid's row, not a\n // table's, and the <tr> wore it. A disclosure button in the first cell carries\n // it now, with `aria-controls` on the detail row while that is there.\n // Visually hidden and not a tab stop: the row stays the one roving stop, with\n // Enter/Space and the whole-row click — this is the screen reader cursor's\n // way in, and where it hears the state. Named by `aria-label`, so the cell's\n // text stays the cell's own.\n const disclosure = hasDisclosure ? (\n <button\n type=\"button\"\n tabIndex={-1}\n className=\"sr-only-fixed\"\n aria-label={rowDetailsLabel}\n aria-expanded={expanded}\n aria-controls={expansion ? detailId : undefined}\n // The row's own handler leaves a click on a control inside it alone.\n onClick={() => ctx.current.onRowClick!(row)}\n />\n ) : null;\n return (\n <Fragment>\n <tr\n {...cleanAttrs(attrs)}\n aria-rowindex={ariaRowIndex}\n // Every row, windowed or not: the window measures by it (0.48.2), and the table\n // finds by it the row that takes the focus when a focused one leaves (DSP-4).\n data-row-index={rowIndex}\n data-row-nav={rowsFocusable ? \"\" : undefined}\n tabIndex={rowsFocusable ? (tabbable ? 0 : -1) : undefined}\n onFocus={(e) => {\n if (rowsFocusable && e.target === e.currentTarget) ctx.current.setFocusRowKey(key);\n ctx.current.noteFocus(key);\n }}\n onKeyDown={\n rowsFocusable\n ? (e) => {\n // Only the row's own key presses: Enter on a nested button\n // or link is that control's, and Space in a nested input\n // is a space.\n if (e.target !== e.currentTarget) return;\n if (e.altKey || e.ctrlKey || e.metaKey) return;\n if (e.key === \"Enter\" || e.key === \" \") {\n // Space would otherwise scroll the table.\n e.preventDefault();\n ctx.current.onRowClick!(row);\n return;\n }\n if (e.shiftKey) return;\n const move = ctx.current.moveFocus;\n if (move ? move(rowIndex, e.key) : moveRowFocus(e.currentTarget, e.key)) e.preventDefault();\n }\n : undefined\n }\n className={cn(\n \"border-t border-subtle\",\n rowInteractive && \"cursor-pointer hover:bg-hover\",\n // The kit's focus frame width (§5, `--focus-ring-width`), drawn as an\n // OUTLINE rather than FOCUS_RING's box-shadow: a shadow on a `<tr>`\n // is not painted by every engine, an outline is.\n rowsFocusable &&\n \"focus-visible:bg-hover focus-visible:outline-focus focus-visible:-outline-offset-2 focus-visible:outline-brand\",\n className,\n )}\n onClick={\n rowInteractive\n ? (e: ReactMouseEvent<HTMLTableRowElement>) => {\n const c = ctx.current;\n // A click on a control inside the row (a button, a link,\n // an input the cell renders) is that control's — it must\n // not also open the row. Cells no longer have to\n // `stopPropagation` to get that.\n if (fromOwnControl(e.target, e.currentTarget)) return;\n if (fromOutside(e.target, e.currentTarget)) return;\n // Modifier-clicks anywhere in the row drive\n // selection instead of expanding it (feedback #289):\n // Ctrl/Cmd toggles a single row, Shift selects the\n // range from the last-toggled row (inclusive of this\n // one) — the same as the checkbox, but for the whole\n // row, which is what the checkbox-only version was\n // missing.\n if (c.onToggle && c.canSelect(row)) {\n if (e.shiftKey) {\n // Drop the text selection a shift-click would\n // otherwise smear across the rows.\n window.getSelection?.()?.removeAllRanges();\n if (c.selectRange(rowIndex)) return;\n // No anchor yet: treat it as the first pick.\n c.setAnchor(key);\n c.onToggle(row, !c.isSelected(row));\n return;\n }\n if (e.metaKey || e.ctrlKey) {\n c.setAnchor(key);\n c.onToggle(row, !c.isSelected(row));\n return;\n }\n }\n c.onRowClick?.(row);\n }\n : undefined\n }\n >\n {selectionColumn && (\n <td\n className={cn(\"align-top\", compact ? \"w-8 px-2 py-1\" : \"w-10 px-3 py-2\")}\n // Don't let selecting a row also trigger the row click\n // (which expands/edits it).\n onClick={(e) => e.stopPropagation()}\n >\n {selectable && (\n // The kit's Checkbox, as the phone card's, not an indigo native box (DSP-14;\n // see the header's).\n <Checkbox\n inputClassName={compact ? \"size-3.5\" : undefined}\n checked={selected}\n // Shift+click selects the range from the last toggled\n // row. `preventDefault` puts the box back, but it does NOT\n // stop React's `onChange`: React derives a checkbox's\n // change from the `click` itself, after the browser has\n // already flipped `checked` and before the cancellation\n // reverts it — so the same click also reported itself as\n // a single toggle, and the owner got `onToggleMany` and\n // then `onToggle` for the clicked row. The click is\n // remembered by identity and its change is dropped; a\n // boolean flag would outlive a click whose change never\n // came and swallow the user's next real one.\n onClick={(e) => {\n if (e.shiftKey && ctx.current.selectRange(rowIndex)) {\n e.preventDefault();\n ctx.current.markRangeClick(e.nativeEvent);\n }\n }}\n onChange={(e) => {\n const c = ctx.current;\n if (c.takeRangeClick(e.nativeEvent)) return;\n c.setAnchor(key);\n c.onToggle?.(row, e.target.checked);\n }}\n aria-label={selectRowLabel}\n />\n )}\n </td>\n )}\n {columns.map((col, colIndex) => {\n const width = widths[col.key];\n // The caller's first, the table's over it — see `cellProps`.\n const own = splitCellProps(col.cellProps?.(row));\n const pinned = width ? { width, minWidth: width, maxWidth: width } : undefined;\n return (\n <td\n {...own.attrs}\n key={col.key}\n data-col={col.key}\n style={own.style || pinned ? { ...own.style, ...pinned } : undefined}\n className={cn(\n \"align-top\",\n compact ? \"px-2 py-1\" : \"px-3 py-2\",\n width && \"overflow-hidden text-ellipsis\",\n col.grow ? GROW_CELL_CLASS : growDrawn && GROW_PEER_CELL_CLASS,\n logicalAlign(own.className),\n logicalAlign(col.className),\n )}\n >\n {colIndex === 0 && disclosure}\n {col === linkColumn && href ? (\n // No `onActivate`: the click is left to bubble to the\n // <tr> handler above, which already owns expand-vs-select.\n // Calling it here as well would toggle the row twice. Without\n // `onRowClick` (the row is not focusable then) nothing opens it in\n // place, and the link is followed (DSP-23 b).\n <RowLink href={href} navigate={!rowsFocusable} className=\"block\" data-row-link=\"\">\n {col.cell(row)}\n </RowLink>\n ) : (\n col.cell(row)\n )}\n </td>\n );\n })}\n </tr>\n {expansion && (\n <tr\n id={hasDisclosure ? detailId : undefined}\n aria-rowindex={windowed ? ariaRowIndex + 1 : undefined}\n data-row-detail={windowed ? rowIndex : undefined}\n // An inline editor's field is the row's focus too (DSP-4).\n onFocus={() => ctx.current.noteFocus(key)}\n className=\"bg-surface-2 border-t border-subtle\"\n >\n {/* The detail panel spans every column. In an `auto` table\n layout (the default here — columns only get fixed style\n widths once the user resizes/auto-sizes them) the cell's\n content preferred-width is redistributed across the\n spanned columns, so a long expansion visibly re-sizes the\n columns above it — and one-line content does not, since\n its preferred width is small (feedback #104). Wrapping the\n content in `w-0 min-w-full` pins the cell's preferred\n width to ~0 (the explicit width:0 child), so it can never\n perturb the columns; the div then fills to the full row\n width only at paint time, and long text wraps within it.\n Inside it the content is pinned to what the scroller SHOWS\n (0.47, keksdose S4): on a table wider than its scroller a\n table-wide panel put an inline editor's Save/Cancel off-screen.\n `sticky start-0` holds it at the scroller's start edge (the\n right one in RTL) as the row scrolls sideways, and\n `--dt-visible-w` (the scroller's clientWidth, measured above)\n sizes it; before the first measure, and in a table no wider\n than its scroller, it is the full width as before. */}\n <td colSpan={totalColSpan} className=\"p-0\">\n <div className=\"w-0 min-w-full\">\n <div\n className={cn(\n \"sticky start-0 w-[var(--dt-visible-w,100%)] max-w-full\",\n compact ? \"px-2 py-2\" : \"px-3 py-3\",\n )}\n >\n {expansion}\n </div>\n </div>\n </td>\n </tr>\n )}\n </Fragment>\n );\n}\n\n/** One desktop row (its `<tr>` and, while open, its detail row), memoised — see the\n * file's note for what it compares. */\nexport const DataTableRow = memo(DataTableRowImpl, sameProps) as <T>(\n props: DataTableRowProps<T> & { key?: string | number },\n) => ReactNode;\n\n// ---------- Phone card ----------\n\nexport interface DataTableMobileRowProps<T> extends Pick<\n MobileRowProps<T>,\n | \"row\"\n | \"rowIndex\"\n | \"opensRow\"\n | \"mobileDir\"\n | \"mobileCardLinkable\"\n | \"mobileCardStretched\"\n | \"mobileCard\"\n | \"mobilePrimaryCol\"\n | \"mobileStatusColumns\"\n | \"mobileSecondaryColumns\"\n | \"mobileActionColumns\"\n | \"mobileExpandAsDialog\"\n | \"compact\"\n | \"large\"\n> {\n ctx: RefObject<DataTableRowCtx<T>>;\n rowKey: string | number;\n expanded: boolean;\n /** The opened row's content (`openedRowContent`); `null` on a closed card. */\n expansion: ReactNode;\n className: string | undefined;\n attrs: Record<string, string | undefined> | undefined;\n /** The table has `onRowClick`. */\n interactive: boolean;\n href: string | undefined;\n /** `mobileSwipeActions`, or the swipes derived from `rowActions` — by identity. */\n swipeActionsFor: ((row: T) => MobileSwipeActions | null) | undefined;\n /** The table has `selection`. */\n selectionOn: boolean;\n selectActive: boolean;\n selectable: boolean;\n selected: boolean;\n}\n\nconst yes = () => true;\n\nfunction DataTableMobileRowImpl<T>({\n ctx,\n rowKey: key,\n expanded,\n expansion,\n className,\n attrs,\n interactive,\n href,\n selectionOn,\n selectActive,\n selectable,\n selected,\n ...rest\n}: DataTableMobileRowProps<T>) {\n const { row } = rest;\n // `MobileRow` keeps its own shape (functions of the row); these hand it the values the\n // table derived, and the handlers read the latest props through `ctx`.\n return (\n <MobileRow\n {...rest}\n isExpanded={expanded ? yes : undefined}\n openedRowContent={() => expansion}\n rowClassName={() => className}\n rowAttributes={() => attrs}\n onRowClick={interactive ? (r) => ctx.current.onRowClick!(r) : undefined}\n rowHref={href !== undefined ? () => href : undefined}\n onFocusIn={() => ctx.current.noteFocus(key)}\n select={\n selectionOn\n ? {\n active: selectActive,\n selectable,\n selected,\n onToggle: (checked) => {\n ctx.current.setAnchor(key);\n ctx.current.onToggle?.(row, checked);\n },\n onLongPress: () => ctx.current.onLongPress(row),\n }\n : null\n }\n />\n );\n}\n\n/** One phone card, memoised like {@link DataTableRow}. */\nexport const DataTableMobileRow = memo(DataTableMobileRowImpl, sameProps) as <T>(\n props: DataTableMobileRowProps<T> & { key?: string | number },\n) => ReactNode;\n"],"mappings":"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","names":[]}
|
|
@@ -11,7 +11,7 @@ import type { DataTableProps } from "./data-table.js";
|
|
|
11
11
|
export declare function useRangeSelection<T>({ selection, slice, rowKey, }: {
|
|
12
12
|
selection: DataTableProps<T>["selection"];
|
|
13
13
|
/** The rows on screen, in the order shown. */
|
|
14
|
-
slice: T[];
|
|
14
|
+
slice: readonly T[];
|
|
15
15
|
rowKey: (row: T) => string | number;
|
|
16
16
|
}): {
|
|
17
17
|
selectionAnchor: import("react").RefObject<string | number | null>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table-selection.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport type { DataTableProps } from \"./data-table\";\n\n// DataTable's Shift+click range selection (feedback #289). Moved out of data-table.tsx\n// whole (refactor audit 2026-10, MOD-3 step 3).\n\n/**\n * The anchor a Shift+click draws its range from, and the range itself.\n *\n * `selectionAnchor` is set by every single-row toggle (the checkbox, a Ctrl/⌘-click or\n * a first Shift-click on a row); `selectRange(i)` then selects from the anchor to the\n * `i`th row of `slice`, and answers false when there is no range on screen to draw.\n * `rangeClick` remembers the checkbox click that drew one, so that click's own\n * `onChange` can be told apart and dropped.\n */\nexport function useRangeSelection<T>({\n selection,\n slice,\n rowKey,\n}: {\n selection: DataTableProps<T>[\"selection\"];\n /** The rows on screen, in the order shown. */\n slice: T[];\n rowKey: (row: T) => string | number;\n}) {\n // The row whose selection was last toggled, so Shift+click can select the range up\n // to it (feedback #289). Held as its KEY, not as an index into `slice`: the slice is\n // re-derived from the current sort, filter and page, so an index taken before a\n // header was clicked addresses a different row afterwards — and the range then ran\n // from a row the user had never touched.\n const selectionAnchor = useRef<string | number | null>(null);\n /** The checkbox click that drew a range, so its `onChange` can be told apart. */\n const rangeClick = useRef<Event | null>(null);\n const canSelect = (row: T) => !!selection && (selection.isSelectable?.(row) ?? true);\n const selectRange = (toIndex: number) => {\n if (!selection || selectionAnchor.current === null) return false;\n const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);\n // The anchor has been filtered, sorted or paged off the screen: there is no range\n // on display to draw, so the click falls through to the plain single-row toggle.\n if (fromIndex < 0) return false;\n const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);\n const range: T[] = [];\n for (let i = lo; i <= hi; i++) {\n const r = slice[i];\n if (r && canSelect(r)) range.push(r);\n }\n // One call where the owner can take one. See `selection.onToggleMany`: the row-by-\n // row loop below is the fallback for an owner that has not adopted it, not the\n // shape this should be in.\n if (selection.onToggleMany) selection.onToggleMany(range, true);\n else for (const r of range) selection.onToggle(r, true);\n return true;\n };\n // The ref writes as functions (0.48.2): the memoised rows (data-table-row.tsx) reach\n // them through DataTable's row context rather than holding the refs themselves.\n /** Every single-row toggle anchors the next Shift+click's range on its row. */\n const setAnchor = (key: string | number) => {\n selectionAnchor.current = key;\n };\n /** Remember the checkbox click that drew a range. */\n const markRangeClick = (e: Event) => {\n rangeClick.current = e;\n };\n /** True — once — for the change event of the click that drew a range. */\n const takeRangeClick = (e: Event) => {\n if (!rangeClick.current || rangeClick.current !== e) return false;\n rangeClick.current = null;\n return true;\n };\n return { selectionAnchor, rangeClick, canSelect, selectRange, setAnchor, markRangeClick, takeRangeClick };\n}\n"],"mappings":";AAAA,SAAS,cAAc;AAehB,SAAS,kBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAMD,QAAM,kBAAkB,OAA+B,IAAI;AAE3D,QAAM,aAAa,OAAqB,IAAI;AAC5C,QAAM,YAAY,CAAC,QAAW,CAAC,CAAC,cAAc,UAAU,eAAe,GAAG,KAAK;AAC/E,QAAM,cAAc,CAAC,YAAoB;AACvC,QAAI,CAAC,aAAa,gBAAgB,YAAY,KAAM,QAAO;AAC3D,UAAM,YAAY,MAAM,UAAU,CAAC,MAAM,OAAO,CAAC,MAAM,gBAAgB,OAAO;AAG9E,QAAI,YAAY,EAAG,QAAO;AAC1B,UAAM,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAC1D,UAAM,QAAa,CAAC;AACpB,aAAS,IAAI,IAAI,KAAK,IAAI,KAAK;AAC7B,YAAM,IAAI,MAAM,CAAC;AACjB,UAAI,KAAK,UAAU,CAAC,EAAG,OAAM,KAAK,CAAC;AAAA,IACrC;AAIA,QAAI,UAAU,aAAc,WAAU,aAAa,OAAO,IAAI;AAAA,QACzD,YAAW,KAAK,MAAO,WAAU,SAAS,GAAG,IAAI;AACtD,WAAO;AAAA,EACT;AAIA,QAAM,YAAY,CAAC,QAAyB;AAC1C,oBAAgB,UAAU;AAAA,EAC5B;AAEA,QAAM,iBAAiB,CAAC,MAAa;AACnC,eAAW,UAAU;AAAA,EACvB;AAEA,QAAM,iBAAiB,CAAC,MAAa;AACnC,QAAI,CAAC,WAAW,WAAW,WAAW,YAAY,EAAG,QAAO;AAC5D,eAAW,UAAU;AACrB,WAAO;AAAA,EACT;AACA,SAAO,EAAE,iBAAiB,YAAY,WAAW,aAAa,WAAW,gBAAgB,eAAe;AAC1G;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table-selection.ts"],"sourcesContent":["import { useRef } from \"react\";\nimport type { DataTableProps } from \"./data-table\";\n\n// DataTable's Shift+click range selection (feedback #289). Moved out of data-table.tsx\n// whole (refactor audit 2026-10, MOD-3 step 3).\n\n/**\n * The anchor a Shift+click draws its range from, and the range itself.\n *\n * `selectionAnchor` is set by every single-row toggle (the checkbox, a Ctrl/⌘-click or\n * a first Shift-click on a row); `selectRange(i)` then selects from the anchor to the\n * `i`th row of `slice`, and answers false when there is no range on screen to draw.\n * `rangeClick` remembers the checkbox click that drew one, so that click's own\n * `onChange` can be told apart and dropped.\n */\nexport function useRangeSelection<T>({\n selection,\n slice,\n rowKey,\n}: {\n selection: DataTableProps<T>[\"selection\"];\n /** The rows on screen, in the order shown. */\n slice: readonly T[];\n rowKey: (row: T) => string | number;\n}) {\n // The row whose selection was last toggled, so Shift+click can select the range up\n // to it (feedback #289). Held as its KEY, not as an index into `slice`: the slice is\n // re-derived from the current sort, filter and page, so an index taken before a\n // header was clicked addresses a different row afterwards — and the range then ran\n // from a row the user had never touched.\n const selectionAnchor = useRef<string | number | null>(null);\n /** The checkbox click that drew a range, so its `onChange` can be told apart. */\n const rangeClick = useRef<Event | null>(null);\n const canSelect = (row: T) => !!selection && (selection.isSelectable?.(row) ?? true);\n const selectRange = (toIndex: number) => {\n if (!selection || selectionAnchor.current === null) return false;\n const fromIndex = slice.findIndex((r) => rowKey(r) === selectionAnchor.current);\n // The anchor has been filtered, sorted or paged off the screen: there is no range\n // on display to draw, so the click falls through to the plain single-row toggle.\n if (fromIndex < 0) return false;\n const [lo, hi] = [fromIndex, toIndex].sort((a, b) => a - b);\n const range: T[] = [];\n for (let i = lo; i <= hi; i++) {\n const r = slice[i];\n if (r && canSelect(r)) range.push(r);\n }\n // One call where the owner can take one. See `selection.onToggleMany`: the row-by-\n // row loop below is the fallback for an owner that has not adopted it, not the\n // shape this should be in.\n if (selection.onToggleMany) selection.onToggleMany(range, true);\n else for (const r of range) selection.onToggle(r, true);\n return true;\n };\n // The ref writes as functions (0.48.2): the memoised rows (data-table-row.tsx) reach\n // them through DataTable's row context rather than holding the refs themselves.\n /** Every single-row toggle anchors the next Shift+click's range on its row. */\n const setAnchor = (key: string | number) => {\n selectionAnchor.current = key;\n };\n /** Remember the checkbox click that drew a range. */\n const markRangeClick = (e: Event) => {\n rangeClick.current = e;\n };\n /** True — once — for the change event of the click that drew a range. */\n const takeRangeClick = (e: Event) => {\n if (!rangeClick.current || rangeClick.current !== e) return false;\n rangeClick.current = null;\n return true;\n };\n return { selectionAnchor, rangeClick, canSelect, selectRange, setAnchor, markRangeClick, takeRangeClick };\n}\n"],"mappings":";AAAA,SAAS,cAAc;AAehB,SAAS,kBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AACF,GAKG;AAMD,QAAM,kBAAkB,OAA+B,IAAI;AAE3D,QAAM,aAAa,OAAqB,IAAI;AAC5C,QAAM,YAAY,CAAC,QAAW,CAAC,CAAC,cAAc,UAAU,eAAe,GAAG,KAAK;AAC/E,QAAM,cAAc,CAAC,YAAoB;AACvC,QAAI,CAAC,aAAa,gBAAgB,YAAY,KAAM,QAAO;AAC3D,UAAM,YAAY,MAAM,UAAU,CAAC,MAAM,OAAO,CAAC,MAAM,gBAAgB,OAAO;AAG9E,QAAI,YAAY,EAAG,QAAO;AAC1B,UAAM,CAAC,IAAI,EAAE,IAAI,CAAC,WAAW,OAAO,EAAE,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AAC1D,UAAM,QAAa,CAAC;AACpB,aAAS,IAAI,IAAI,KAAK,IAAI,KAAK;AAC7B,YAAM,IAAI,MAAM,CAAC;AACjB,UAAI,KAAK,UAAU,CAAC,EAAG,OAAM,KAAK,CAAC;AAAA,IACrC;AAIA,QAAI,UAAU,aAAc,WAAU,aAAa,OAAO,IAAI;AAAA,QACzD,YAAW,KAAK,MAAO,WAAU,SAAS,GAAG,IAAI;AACtD,WAAO;AAAA,EACT;AAIA,QAAM,YAAY,CAAC,QAAyB;AAC1C,oBAAgB,UAAU;AAAA,EAC5B;AAEA,QAAM,iBAAiB,CAAC,MAAa;AACnC,eAAW,UAAU;AAAA,EACvB;AAEA,QAAM,iBAAiB,CAAC,MAAa;AACnC,QAAI,CAAC,WAAW,WAAW,WAAW,YAAY,EAAG,QAAO;AAC5D,eAAW,UAAU;AACrB,WAAO;AAAA,EACT;AACA,SAAO,EAAE,iBAAiB,YAAY,WAAW,aAAa,WAAW,gBAAgB,eAAe;AAC1G;","names":[]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { CSSProperties, ReactNode } from "react";
|
|
2
2
|
import { type DataTableLabels } from "./data-table-labels.js";
|
|
3
3
|
import type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from "./data-table.js";
|
|
4
|
-
import type
|
|
4
|
+
import { type LabelOverride } from "../i18n/kit-labels.js";
|
|
5
5
|
/**
|
|
6
6
|
* Split a caller's cell attributes into what may reach the element and what the kit
|
|
7
7
|
* owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and
|
|
@@ -84,12 +84,20 @@ export declare function fromOwnControl(target: EventTarget | null, row: HTMLElem
|
|
|
84
84
|
* `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as
|
|
85
85
|
* a link-drag: that is both drag-to-select-text on the desktop table and the mouse
|
|
86
86
|
* path through SwipeableRow's gesture on the mobile card.
|
|
87
|
+
*
|
|
88
|
+
* `navigate` (refactor audit 2026-10-30, DSP-23 b): a table with `rowHref` and no
|
|
89
|
+
* `onRowClick` has nothing to open the row in place, and the cancelled click opened
|
|
90
|
+
* nothing at all. There the plain click is the link's: followed through the provider's
|
|
91
|
+
* `linkComponent` for an in-app path, as every kit link is (`pickLinkRenderer`), else
|
|
92
|
+
* by the browser.
|
|
87
93
|
*/
|
|
88
|
-
export declare function RowLink({ href, onActivate, className, children, ...rest }: {
|
|
94
|
+
export declare function RowLink({ href, onActivate, navigate, className, children, ...rest }: {
|
|
89
95
|
href: string;
|
|
90
96
|
/** Runs on a plain left click. Omit it where an ANCESTOR already handles the
|
|
91
97
|
* click (the desktop `<tr>`), or the row would toggle twice. */
|
|
92
98
|
onActivate?: () => void;
|
|
99
|
+
/** The row has no `onRowClick`: a plain click follows the link instead. */
|
|
100
|
+
navigate?: boolean;
|
|
93
101
|
className?: string;
|
|
94
102
|
children: ReactNode;
|
|
95
103
|
} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "className" | "children" | "onClick" | "onClickCapture">): import("react").JSX.Element;
|
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
import { jsx } from "react/jsx-runtime";
|
|
3
3
|
import { isTableOwnColumn } from "./data-table-row-actions.js";
|
|
4
4
|
import { DEFAULT_DATA_TABLE_LABELS } from "./data-table-labels.js";
|
|
5
|
+
import { useKitLink } from "../i18n/kit-labels.js";
|
|
6
|
+
import { pickLinkRenderer, RenderedKitLink } from "./text-link.js";
|
|
5
7
|
function splitCellProps(props) {
|
|
6
8
|
if (!props) return { attrs: {} };
|
|
7
9
|
const {
|
|
@@ -72,10 +74,26 @@ const isPlainLeftClick = (e) => e.button === 0 && !e.metaKey && !e.ctrlKey && !e
|
|
|
72
74
|
function RowLink({
|
|
73
75
|
href,
|
|
74
76
|
onActivate,
|
|
77
|
+
navigate = false,
|
|
75
78
|
className,
|
|
76
79
|
children,
|
|
77
80
|
...rest
|
|
78
81
|
}) {
|
|
82
|
+
const kitLink = useKitLink();
|
|
83
|
+
if (navigate) {
|
|
84
|
+
const render = pickLinkRenderer(void 0, kitLink, href);
|
|
85
|
+
const linkProps = {
|
|
86
|
+
...rest,
|
|
87
|
+
href,
|
|
88
|
+
draggable: false,
|
|
89
|
+
className,
|
|
90
|
+
// A modified click opens a tab; it must not also select the row (see above).
|
|
91
|
+
onClick: (e) => {
|
|
92
|
+
if (!fromOutside(e.target, e.currentTarget) && !isPlainLeftClick(e)) e.stopPropagation();
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
return render ? /* @__PURE__ */ jsx(RenderedKitLink, { render, props: { ...linkProps, children } }) : /* @__PURE__ */ jsx("a", { ...linkProps, children });
|
|
96
|
+
}
|
|
79
97
|
return /* @__PURE__ */ jsx(
|
|
80
98
|
"a",
|
|
81
99
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table-shared.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from \"./data-table\";\nimport type { LabelOverride } from \"../i18n/kit-labels\";\n\n// What DataTable shares with its header (data-table-head.tsx), its column panel and its\n// phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a\n// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged\n// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to\n// import data-table.tsx at run time — which imports them. Since 0.35 also the table's\n// label resolver, which DataTable and its FilterPopover share and the barrel no longer\n// exports (round 0.35 R1).\n\n/**\n * Split a caller's cell attributes into what may reach the element and what the kit\n * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and\n * `style` come back separately so the kit can merge rather than replace them.\n */\nexport function splitCellProps(props: DataTableCellProps | DataTableHeadProps | undefined): {\n attrs: Record<string, unknown>;\n className?: string;\n style?: CSSProperties;\n} {\n if (!props) return { attrs: {} };\n const {\n className,\n style,\n role: _role,\n \"data-col\": _col,\n ...attrs\n } = props as DataTableCellProps & { \"data-col\"?: unknown };\n return { attrs, className, style };\n}\n\n// A bare `text-right` / `text-left` token, with or without variant prefixes\n// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.\nconst PHYSICAL_ALIGN = /(^|\\s)((?:[\\w-]+:)*)text-(left|right)(?=\\s|$)/g;\n\n/**\n * A column's `className`/`headClassName` with physical text alignment rewritten to\n * logical: `text-right` → `text-end`, `text-left` → `text-start`.\n *\n * Every numeric column written before 0.7.0 says `text-right`, and that is what it\n * MEANT: the end of the line, where digits line up. Rendered as written, a\n * right-to-left table puts those numbers on the far side from their own header's\n * sort button. Rewriting keeps each existing call site correct in both directions\n * with no change on its side; a caller who genuinely wants the physical side in RTL\n * too can say `ltr:text-right rtl:text-right`, which this leaves alone.\n */\nexport function logicalAlign(className: string | undefined): string | undefined {\n return className?.replace(PHYSICAL_ALIGN, (token: string, lead: string, variants: string, side: string) =>\n // Already scoped to one direction: that is a caller choosing the physical side.\n /(^|:)(ltr|rtl):/.test(variants) ? token : `${lead}${variants}text-${side === \"right\" ? \"end\" : \"start\"}`,\n );\n}\n\n/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a\n * caller can write `{ \"data-x\": cond ? \"y\" : undefined }` and get no attribute\n * at all rather than the string \"undefined\" in the DOM. */\nexport function cleanAttrs(attrs: Record<string, string | undefined> | undefined): Record<string, string> | undefined {\n if (!attrs) return undefined;\n const out: Record<string, string> = {};\n for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;\n return out;\n}\n\n/**\n * A column's name as a plain string.\n *\n * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and\n * neither a live region nor the column-settings checklist can speak a React element.\n * The `key` fallback is the one the settings panel has always used; a column whose\n * header is not a string and whose key is not human-readable is a call site that\n * should pass a string header, and that is visible in what gets announced.\n */\nexport function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {\n if (isTableOwnColumn(col.key) && labels) return labels.actions;\n return col.headerText ?? (typeof col.header === \"string\" ? col.header : col.key);\n}\n\n/**\n * The table's labels: caller overrides merged onto the English defaults (presets merged\n * too, key by key, as the provider merges them — so the parameter is a\n * {@link LabelOverride}).\n *\n * DataTable's own, and FilterPopover's: public until 0.35, when it left the barrel for\n * DataTable's `labels` and the provider's `dataTable`, which it serves (round 0.35 R1,\n * refactor audit 2026-10 API-6a). It stays a resolver rather than `useKitLabels` for the\n * two keys it derives (`columnsCount`, `filterColumn`), which a plain merge would not.\n *\n * Lenient on purpose — a table with no labels at all still renders — so a translated app\n * finds out what fell back to English from `missingKitLabels(labels,\n * DEFAULT_UI_KIT_LABELS)` in its own test, where the answer is actionable.\n */\nexport function resolveDataTableLabels(...layers: (LabelOverride<DataTableLabels> | undefined)[]): DataTableLabels {\n if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;\n // The layers in order, the provider's then the prop's, later winning key by key. An\n // `undefined` key is skipped, as `useKitLabels` skips it, rather than blanking the word\n // under it: DataTable spread `{ ...provider, ...prop }`, so `labels={{ autoSize:\n // undefined }}` blanked the provider's word and the English one (round 0.35). `presets`\n // is a record and is merged the same way, so renaming one keeps the other ten.\n const partial: Partial<Omit<DataTableLabels, \"presets\">> = {};\n const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };\n for (const layer of layers) {\n for (const [key, value] of Object.entries(layer ?? {})) {\n if (value === undefined) continue;\n if (key !== \"presets\") Object.assign(partial, { [key]: value });\n else for (const [preset, text] of Object.entries(value)) if (text !== undefined) presets[preset] = text;\n }\n }\n const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };\n // `columnsCount` was split out of `columns` + a template literal. Consumers have\n // been translating `columns` since 0.1, and backfilling the English default over\n // that would hand them \"Columns (4/9)\" back for having translated the key that\n // existed at the time. So the count is derived from the RESOLVED `columns` unless the\n // caller states the whole sentence, which is the escape hatch for a language where\n // the parenthetical does not fit.\n if (partial.columns !== undefined && partial.columnsCount === undefined) {\n merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;\n }\n // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word\n // with the column, rather than English for having translated the key that existed.\n if (partial.filter !== undefined && partial.filterColumn === undefined) {\n merged.filterColumn = (column) => `${merged.filter}: ${column}`;\n }\n return merged;\n}\n\n/**\n * Whether a click that reached `row`'s handler did not start in the row's own DOM.\n *\n * React bubbles an event through the COMPONENT tree, portals included: a popover, a\n * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but\n * still reports its clicks to every React ancestor — the row among them. So a click\n * in a cell's portalled date picker opened the row it came from, and a page wrapped\n * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's\n * feedback page did, round its comments). The row owns the clicks on the row.\n */\nexport function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {\n return !(target instanceof Node) || !row.contains(target);\n}\n\n/**\n * What counts as a control of its own inside a clickable row: a click or key press\n * that lands on one of these belongs to it, not to the row's `onRowClick`. The row's\n * own link (`rowHref`, marked `data-row-link`) is the exception — it IS the row.\n */\nconst OWN_CONTROL =\n 'a[href],button,input,select,textarea,label,summary,[role=\"button\"],[role=\"link\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"menuitem\"],[role=\"option\"],[contenteditable=\"\"],[contenteditable=\"true\"],[tabindex]:not([tabindex=\"-1\"])';\n\n/** Whether an event on `row` started on a control nested inside it. */\nexport function fromOwnControl(target: EventTarget | null, row: HTMLElement): boolean {\n if (!(target instanceof Element)) return false;\n const hit = target.closest(OWN_CONTROL);\n return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute(\"data-row-link\");\n}\n\n/**\n * The controls whose own default IS the click — a native checkbox's or radio's toggle, a\n * label's click through to its field, a summary's disclosure (0.46, the 0.45 note from\n * UM): cancelling the click undoes it. Each is the click's own activation target, so a\n * click on one does not follow the link around it, and {@link RowLink} leaves its\n * default alone.\n */\nconst OWN_DEFAULT = 'input[type=\"checkbox\"],input[type=\"radio\"],label,summary';\n\n/** Whether a click inside `link` landed on (or in) one of {@link OWN_DEFAULT}. */\nfunction onOwnDefault(target: EventTarget | null, link: HTMLElement): boolean {\n if (!(target instanceof Element)) return false;\n const hit = target.closest(OWN_DEFAULT);\n return !!hit && hit !== link && link.contains(hit);\n}\n\n/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to\n * the browser, and the whole feature is not touching it. */\nconst isPlainLeftClick = (e: React.MouseEvent) =>\n e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;\n\n/**\n * The anchor a linkable row is opened through (Keksdose feedback #451).\n *\n * The plain left click is OURS: cancelled, then handed to the row's own handler, so\n * clicking a row still expands it in place instead of reloading the page. Every\n * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is\n * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:\n * that imitation buys back the middle click and still loses ⌘/Ctrl-click, \"copy link\n * address\", the status-bar preview and the phone's long-press menu.\n *\n * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and\n * Shift-click on a row mean \"select\" (feedback #289), and a row must not change its\n * selection while the browser is opening a tab. The rest of the row still selects —\n * the link is one cell, not the row.\n *\n * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as\n * a link-drag: that is both drag-to-select-text on the desktop table and the mouse\n * path through SwipeableRow's gesture on the mobile card.\n */\nexport function RowLink({\n href,\n onActivate,\n className,\n children,\n ...rest\n}: {\n href: string;\n /** Runs on a plain left click. Omit it where an ANCESTOR already handles the\n * click (the desktop `<tr>`), or the row would toggle twice. */\n onActivate?: () => void;\n className?: string;\n children: ReactNode;\n} & Omit<\n React.AnchorHTMLAttributes<HTMLAnchorElement>,\n \"href\" | \"className\" | \"children\" | \"onClick\" | \"onClickCapture\"\n>) {\n return (\n <a\n {...rest}\n href={href}\n draggable={false}\n className={className}\n // CAPTURE phase, and it has to be: on the mobile card the whole card is the\n // anchor, so a nested control sits INSIDE it — and the ones that matter\n // (the feedback row's status toggles) stop the click propagating so the row\n // won't also expand. A bubble-phase handler would never run for those, and\n // the browser would follow the link out from under the button press. Cancelling\n // here happens before any descendant can silence the event; `stopPropagation`\n // does not undo a `preventDefault`.\n onClickCapture={(e) => {\n // A click in a portal a descendant opened is not a click on the link: leave\n // it (and a link inside it) alone. See `fromOutside`.\n if (fromOutside(e.target, e.currentTarget)) return;\n // A checkbox, a radio, a label or a summary keeps its own default: cancelling\n // it would undo the toggle, and the link is not followed from it anyway.\n if (onOwnDefault(e.target, e.currentTarget)) return;\n if (isPlainLeftClick(e)) e.preventDefault();\n }}\n onClick={(e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n if (!isPlainLeftClick(e)) {\n e.stopPropagation();\n return;\n }\n // Already cancelled above; this phase only decides what opens. A nested\n // control that stopped propagation deliberately never reaches it, which is\n // exactly how the row behaved before it became a link — and one that did not\n // (a select in a phone card's cell, keksdose live #428) is still its own.\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onActivate?.();\n }}\n >\n {children}\n </a>\n );\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table-shared.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from \"react\";\nimport { isTableOwnColumn } from \"./data-table-row-actions\";\nimport { DEFAULT_DATA_TABLE_LABELS, type DataTableLabels } from \"./data-table-labels\";\nimport type { DataTableCellProps, DataTableColumn, DataTableHeadProps } from \"./data-table\";\nimport { useKitLink, type LabelOverride } from \"../i18n/kit-labels\";\nimport { pickLinkRenderer, RenderedKitLink } from \"./text-link\";\n\n// What DataTable shares with its header (data-table-head.tsx), its column panel and its\n// phone layout (data-table-mobile.tsx): the cell-attribute and alignment rules, a\n// column's plain-text name, and the row link. Moved out of data-table.tsx unchanged\n// (refactor audit 2026-10, MOD-3), into a module of their own so none of those has to\n// import data-table.tsx at run time — which imports them. Since 0.35 also the table's\n// label resolver, which DataTable and its FilterPopover share and the barrel no longer\n// exports (round 0.35 R1).\n\n/**\n * Split a caller's cell attributes into what may reach the element and what the kit\n * owns. `role` and `data-col` are dropped outright (see `cellProps`); `className` and\n * `style` come back separately so the kit can merge rather than replace them.\n */\nexport function splitCellProps(props: DataTableCellProps | DataTableHeadProps | undefined): {\n attrs: Record<string, unknown>;\n className?: string;\n style?: CSSProperties;\n} {\n if (!props) return { attrs: {} };\n const {\n className,\n style,\n role: _role,\n \"data-col\": _col,\n ...attrs\n } = props as DataTableCellProps & { \"data-col\"?: unknown };\n return { attrs, className, style };\n}\n\n// A bare `text-right` / `text-left` token, with or without variant prefixes\n// (`md:text-right`). Deliberately NOT `text-right-…` or an arbitrary value.\nconst PHYSICAL_ALIGN = /(^|\\s)((?:[\\w-]+:)*)text-(left|right)(?=\\s|$)/g;\n\n/**\n * A column's `className`/`headClassName` with physical text alignment rewritten to\n * logical: `text-right` → `text-end`, `text-left` → `text-start`.\n *\n * Every numeric column written before 0.7.0 says `text-right`, and that is what it\n * MEANT: the end of the line, where digits line up. Rendered as written, a\n * right-to-left table puts those numbers on the far side from their own header's\n * sort button. Rewriting keeps each existing call site correct in both directions\n * with no change on its side; a caller who genuinely wants the physical side in RTL\n * too can say `ltr:text-right rtl:text-right`, which this leaves alone.\n */\nexport function logicalAlign(className: string | undefined): string | undefined {\n return className?.replace(PHYSICAL_ALIGN, (token: string, lead: string, variants: string, side: string) =>\n // Already scoped to one direction: that is a caller choosing the physical side.\n /(^|:)(ltr|rtl):/.test(variants) ? token : `${lead}${variants}text-${side === \"right\" ? \"end\" : \"start\"}`,\n );\n}\n\n/** Drop the undefined entries of a {@link DataTableProps.rowAttributes} map, so a\n * caller can write `{ \"data-x\": cond ? \"y\" : undefined }` and get no attribute\n * at all rather than the string \"undefined\" in the DOM. */\nexport function cleanAttrs(attrs: Record<string, string | undefined> | undefined): Record<string, string> | undefined {\n if (!attrs) return undefined;\n const out: Record<string, string> = {};\n for (const [k, v] of Object.entries(attrs)) if (v !== undefined) out[k] = v;\n return out;\n}\n\n/**\n * A column's name as a plain string.\n *\n * `header` is a ReactNode — an icon, a unit suffix, a tooltip-wrapped span — and\n * neither a live region nor the column-settings checklist can speak a React element.\n * The `key` fallback is the one the settings panel has always used; a column whose\n * header is not a string and whose key is not human-readable is a call site that\n * should pass a string header, and that is visible in what gets announced.\n */\nexport function columnLabel<T>(col: DataTableColumn<T>, labels?: DataTableLabels): string {\n if (isTableOwnColumn(col.key) && labels) return labels.actions;\n return col.headerText ?? (typeof col.header === \"string\" ? col.header : col.key);\n}\n\n/**\n * The table's labels: caller overrides merged onto the English defaults (presets merged\n * too, key by key, as the provider merges them — so the parameter is a\n * {@link LabelOverride}).\n *\n * DataTable's own, and FilterPopover's: public until 0.35, when it left the barrel for\n * DataTable's `labels` and the provider's `dataTable`, which it serves (round 0.35 R1,\n * refactor audit 2026-10 API-6a). It stays a resolver rather than `useKitLabels` for the\n * two keys it derives (`columnsCount`, `filterColumn`), which a plain merge would not.\n *\n * Lenient on purpose — a table with no labels at all still renders — so a translated app\n * finds out what fell back to English from `missingKitLabels(labels,\n * DEFAULT_UI_KIT_LABELS)` in its own test, where the answer is actionable.\n */\nexport function resolveDataTableLabels(...layers: (LabelOverride<DataTableLabels> | undefined)[]): DataTableLabels {\n if (!layers.some(Boolean)) return DEFAULT_DATA_TABLE_LABELS;\n // The layers in order, the provider's then the prop's, later winning key by key. An\n // `undefined` key is skipped, as `useKitLabels` skips it, rather than blanking the word\n // under it: DataTable spread `{ ...provider, ...prop }`, so `labels={{ autoSize:\n // undefined }}` blanked the provider's word and the English one (round 0.35). `presets`\n // is a record and is merged the same way, so renaming one keeps the other ten.\n const partial: Partial<Omit<DataTableLabels, \"presets\">> = {};\n const presets = { ...DEFAULT_DATA_TABLE_LABELS.presets };\n for (const layer of layers) {\n for (const [key, value] of Object.entries(layer ?? {})) {\n if (value === undefined) continue;\n if (key !== \"presets\") Object.assign(partial, { [key]: value });\n else for (const [preset, text] of Object.entries(value)) if (text !== undefined) presets[preset] = text;\n }\n }\n const merged: DataTableLabels = { ...DEFAULT_DATA_TABLE_LABELS, ...partial, presets };\n // `columnsCount` was split out of `columns` + a template literal. Consumers have\n // been translating `columns` since 0.1, and backfilling the English default over\n // that would hand them \"Columns (4/9)\" back for having translated the key that\n // existed at the time. So the count is derived from the RESOLVED `columns` unless the\n // caller states the whole sentence, which is the escape hatch for a language where\n // the parenthetical does not fit.\n if (partial.columns !== undefined && partial.columnsCount === undefined) {\n merged.columnsCount = (visible, total) => `${merged.columns} (${visible}/${total})`;\n }\n // The same for `filterColumn` (0.34), from a translated `filter`: the app's own word\n // with the column, rather than English for having translated the key that existed.\n if (partial.filter !== undefined && partial.filterColumn === undefined) {\n merged.filterColumn = (column) => `${merged.filter}: ${column}`;\n }\n return merged;\n}\n\n/**\n * Whether a click that reached `row`'s handler did not start in the row's own DOM.\n *\n * React bubbles an event through the COMPONENT tree, portals included: a popover, a\n * menu or a dialog a cell (or the expansion under it) opens renders at `<body>` but\n * still reports its clicks to every React ancestor — the row among them. So a click\n * in a cell's portalled date picker opened the row it came from, and a page wrapped\n * such content in `<div onClick={(e) => e.stopPropagation()}>` to stop it (kastlan's\n * feedback page did, round its comments). The row owns the clicks on the row.\n */\nexport function fromOutside(target: EventTarget | null, row: HTMLElement): boolean {\n return !(target instanceof Node) || !row.contains(target);\n}\n\n/**\n * What counts as a control of its own inside a clickable row: a click or key press\n * that lands on one of these belongs to it, not to the row's `onRowClick`. The row's\n * own link (`rowHref`, marked `data-row-link`) is the exception — it IS the row.\n */\nconst OWN_CONTROL =\n 'a[href],button,input,select,textarea,label,summary,[role=\"button\"],[role=\"link\"],[role=\"checkbox\"],[role=\"switch\"],[role=\"menuitem\"],[role=\"option\"],[contenteditable=\"\"],[contenteditable=\"true\"],[tabindex]:not([tabindex=\"-1\"])';\n\n/** Whether an event on `row` started on a control nested inside it. */\nexport function fromOwnControl(target: EventTarget | null, row: HTMLElement): boolean {\n if (!(target instanceof Element)) return false;\n const hit = target.closest(OWN_CONTROL);\n return !!hit && hit !== row && row.contains(hit) && !hit.hasAttribute(\"data-row-link\");\n}\n\n/**\n * The controls whose own default IS the click — a native checkbox's or radio's toggle, a\n * label's click through to its field, a summary's disclosure (0.46, the 0.45 note from\n * UM): cancelling the click undoes it. Each is the click's own activation target, so a\n * click on one does not follow the link around it, and {@link RowLink} leaves its\n * default alone.\n */\nconst OWN_DEFAULT = 'input[type=\"checkbox\"],input[type=\"radio\"],label,summary';\n\n/** Whether a click inside `link` landed on (or in) one of {@link OWN_DEFAULT}. */\nfunction onOwnDefault(target: EventTarget | null, link: HTMLElement): boolean {\n if (!(target instanceof Element)) return false;\n const hit = target.closest(OWN_DEFAULT);\n return !!hit && hit !== link && link.contains(hit);\n}\n\n/** A click the APP owns. Anything else — middle, ⌘/Ctrl, Shift, Alt — belongs to\n * the browser, and the whole feature is not touching it. */\nconst isPlainLeftClick = (e: React.MouseEvent) =>\n e.button === 0 && !e.metaKey && !e.ctrlKey && !e.shiftKey && !e.altKey;\n\n/**\n * The anchor a linkable row is opened through (Keksdose feedback #451).\n *\n * The plain left click is OURS: cancelled, then handed to the row's own handler, so\n * clicking a row still expands it in place instead of reloading the page. Every\n * other click — middle, ⌘/Ctrl, Shift, Alt — is left completely untouched, which is\n * the entire point of using an anchor rather than an `onAuxClick` + `window.open`:\n * that imitation buys back the middle click and still loses ⌘/Ctrl-click, \"copy link\n * address\", the status-bar preview and the phone's long-press menu.\n *\n * Modified clicks DO stop propagating: on a table with `selection`, ⌘/Ctrl-click and\n * Shift-click on a row mean \"select\" (feedback #289), and a row must not change its\n * selection while the browser is opening a tab. The rest of the row still selects —\n * the link is one cell, not the row.\n *\n * `draggable={false}` because an anchor otherwise hijacks a horizontal mouse drag as\n * a link-drag: that is both drag-to-select-text on the desktop table and the mouse\n * path through SwipeableRow's gesture on the mobile card.\n *\n * `navigate` (refactor audit 2026-10-30, DSP-23 b): a table with `rowHref` and no\n * `onRowClick` has nothing to open the row in place, and the cancelled click opened\n * nothing at all. There the plain click is the link's: followed through the provider's\n * `linkComponent` for an in-app path, as every kit link is (`pickLinkRenderer`), else\n * by the browser.\n */\nexport function RowLink({\n href,\n onActivate,\n navigate = false,\n className,\n children,\n ...rest\n}: {\n href: string;\n /** Runs on a plain left click. Omit it where an ANCESTOR already handles the\n * click (the desktop `<tr>`), or the row would toggle twice. */\n onActivate?: () => void;\n /** The row has no `onRowClick`: a plain click follows the link instead. */\n navigate?: boolean;\n className?: string;\n children: ReactNode;\n} & Omit<\n React.AnchorHTMLAttributes<HTMLAnchorElement>,\n \"href\" | \"className\" | \"children\" | \"onClick\" | \"onClickCapture\"\n>) {\n const kitLink = useKitLink();\n if (navigate) {\n const render = pickLinkRenderer(undefined, kitLink, href);\n const linkProps = {\n ...rest,\n href,\n draggable: false,\n className,\n // A modified click opens a tab; it must not also select the row (see above).\n onClick: (e: React.MouseEvent<HTMLAnchorElement>) => {\n if (!fromOutside(e.target, e.currentTarget) && !isPlainLeftClick(e)) e.stopPropagation();\n },\n };\n // Drawn as a component of its own, so a router link's hooks are its own: text-link's\n // RenderedKitLink, every kit link's (0.52 code review, data-table-shared.tsx — this\n // module had a copy).\n return render ? (\n <RenderedKitLink render={render} props={{ ...linkProps, children }} />\n ) : (\n <a {...linkProps}>{children}</a>\n );\n }\n return (\n <a\n {...rest}\n href={href}\n draggable={false}\n className={className}\n // CAPTURE phase, and it has to be: on the mobile card the whole card is the\n // anchor, so a nested control sits INSIDE it — and the ones that matter\n // (the feedback row's status toggles) stop the click propagating so the row\n // won't also expand. A bubble-phase handler would never run for those, and\n // the browser would follow the link out from under the button press. Cancelling\n // here happens before any descendant can silence the event; `stopPropagation`\n // does not undo a `preventDefault`.\n onClickCapture={(e) => {\n // A click in a portal a descendant opened is not a click on the link: leave\n // it (and a link inside it) alone. See `fromOutside`.\n if (fromOutside(e.target, e.currentTarget)) return;\n // A checkbox, a radio, a label or a summary keeps its own default: cancelling\n // it would undo the toggle, and the link is not followed from it anyway.\n if (onOwnDefault(e.target, e.currentTarget)) return;\n if (isPlainLeftClick(e)) e.preventDefault();\n }}\n onClick={(e) => {\n if (fromOutside(e.target, e.currentTarget)) return;\n if (!isPlainLeftClick(e)) {\n e.stopPropagation();\n return;\n }\n // Already cancelled above; this phase only decides what opens. A nested\n // control that stopped propagation deliberately never reaches it, which is\n // exactly how the row behaved before it became a link — and one that did not\n // (a select in a phone card's cell, keksdose live #428) is still its own.\n if (fromOwnControl(e.target, e.currentTarget)) return;\n onActivate?.();\n }}\n >\n {children}\n </a>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -11,7 +11,7 @@ export interface SortState {
|
|
|
11
11
|
* pre-multi-sort localStorage format stored one `{key, dir}` object (or
|
|
12
12
|
* null); arrays pass through with junk entries dropped. */
|
|
13
13
|
export declare function normalizeSorts(raw: unknown): SortState[];
|
|
14
|
-
export declare function encodeSorts(sorts: SortState[]): string | null;
|
|
14
|
+
export declare function encodeSorts(sorts: readonly SortState[]): string | null;
|
|
15
15
|
/** Decode a `sort` URL param, dropping unknown and duplicated keys. */
|
|
16
16
|
export declare function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[];
|
|
17
17
|
/**
|
|
@@ -35,10 +35,29 @@ export interface SortStepOptions {
|
|
|
35
35
|
/** Default `"tri"`. */
|
|
36
36
|
cycle?: SortCycle;
|
|
37
37
|
}
|
|
38
|
+
/**
|
|
39
|
+
* Two `sortBy` values in the order DataTable's client sort puts them, ascending — the
|
|
40
|
+
* table's own comparator, exported (0.52) for a list an app sorts beside or into a
|
|
41
|
+
* kit-sorted table: keksdose weaves its scheduled rows into the register and had to copy
|
|
42
|
+
* the rule, a copy that drifts the day the table's changes. Negative when `a` comes first.
|
|
43
|
+
*
|
|
44
|
+
* - Strings collate in `locale` (audit 2026-10-30 DSP-3, 0.51.7; `<` compared UTF-16 code
|
|
45
|
+
* units — every lower-case initial after every capital, Ä/Ö/Ü after Z): digits as
|
|
46
|
+
* numbers ("Item 2" before "Item 10"), case and accents left out, so two values that
|
|
47
|
+
* differ only by them compare equal and the next sort key decides. One collator per
|
|
48
|
+
* locale, cached; an unknown tag falls back to the runtime's collation, not a throw.
|
|
49
|
+
* - Numbers compare as numbers, and a number comes before a string.
|
|
50
|
+
* - `null` and `undefined` come last, and equal each other. The table puts them last in
|
|
51
|
+
* either direction; turn only the two present values round for a descending order.
|
|
52
|
+
* - Any other pair (a `Date` an untyped caller returns) keeps `<` / `>`.
|
|
53
|
+
*
|
|
54
|
+
* rows.sort((a, b) => compareSortValues(a.payee, b.payee, locale));
|
|
55
|
+
*/
|
|
56
|
+
export declare function compareSortValues(a: string | number | null | undefined, b: string | number | null | undefined, locale?: string): number;
|
|
38
57
|
/** Header-click semantics. Plain click: make `key` the only sort — cycling
|
|
39
58
|
* first → other → none (`"tri"`) or first ⇄ other (`"toggle"`) when it already is
|
|
40
59
|
* the sole criterion. Shift-click (`additive`): append `key` as the next-priority
|
|
41
60
|
* sort, or step an existing entry in place (first → other → removed under `"tri"`,
|
|
42
61
|
* a plain flip under `"toggle"`). `firstDir` defaults to `"asc"`, `cycle` to
|
|
43
62
|
* `"tri"` — the cycle every table had before the options existed. */
|
|
44
|
-
export declare function nextSorts(prev: SortState[], key: string, additive: boolean, options?: SortStepOptions): SortState[];
|
|
63
|
+
export declare function nextSorts(prev: readonly SortState[], key: string, additive: boolean, options?: SortStepOptions): SortState[];
|
|
@@ -34,6 +34,29 @@ function decodeSorts(raw, validKeys) {
|
|
|
34
34
|
return out;
|
|
35
35
|
}
|
|
36
36
|
const flip = (d) => d === "asc" ? "desc" : "asc";
|
|
37
|
+
const collators = /* @__PURE__ */ new Map();
|
|
38
|
+
function sortCollator(locale) {
|
|
39
|
+
const key = locale ?? "";
|
|
40
|
+
let collator = collators.get(key);
|
|
41
|
+
if (!collator) {
|
|
42
|
+
const options = { numeric: true, sensitivity: "base" };
|
|
43
|
+
try {
|
|
44
|
+
collator = new Intl.Collator(locale, options);
|
|
45
|
+
} catch {
|
|
46
|
+
collator = new Intl.Collator(void 0, options);
|
|
47
|
+
}
|
|
48
|
+
collators.set(key, collator);
|
|
49
|
+
}
|
|
50
|
+
return collator;
|
|
51
|
+
}
|
|
52
|
+
function compareSortValues(a, b, locale) {
|
|
53
|
+
if (a == null || b == null) return a == null ? b == null ? 0 : 1 : -1;
|
|
54
|
+
const aText = typeof a === "string";
|
|
55
|
+
const bText = typeof b === "string";
|
|
56
|
+
if (aText && bText) return sortCollator(locale).compare(a, b);
|
|
57
|
+
if (aText !== bText) return aText ? 1 : -1;
|
|
58
|
+
return a < b ? -1 : a > b ? 1 : 0;
|
|
59
|
+
}
|
|
37
60
|
function nextSorts(prev, key, additive, options = {}) {
|
|
38
61
|
const first = options.firstDir ?? "asc";
|
|
39
62
|
const toggle = options.cycle === "toggle";
|
|
@@ -52,6 +75,7 @@ function nextSorts(prev, key, additive, options = {}) {
|
|
|
52
75
|
return prev.filter((_, i) => i !== idx);
|
|
53
76
|
}
|
|
54
77
|
export {
|
|
78
|
+
compareSortValues,
|
|
55
79
|
decodeSorts,
|
|
56
80
|
encodeSorts,
|
|
57
81
|
nextSorts,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/data-table-sort.ts"],"sourcesContent":["/** Multi-column sort state for DataTable: ordered by priority (index 0 is the\n * primary sort). Encoded as `sort=date.desc,amount` in URLs and the server's\n * transactions `sort` param — the pre-multi-sort single-value format\n * (`sort=date.desc`) decodes as a one-element list. */\n\nexport type SortDir = \"asc\" | \"desc\";\nexport interface SortState {\n key: string;\n dir: SortDir;\n}\n\n/** Coerce any persisted/URL-derived shape into a `SortState[]`. The\n * pre-multi-sort localStorage format stored one `{key, dir}` object (or\n * null); arrays pass through with junk entries dropped. */\nexport function normalizeSorts(raw: unknown): SortState[] {\n const one = (v: unknown): SortState | null => {\n if (!v || typeof v !== \"object\") return null;\n const { key, dir } = v as { key?: unknown; dir?: unknown };\n if (typeof key !== \"string\" || !key) return null;\n return { key, dir: dir === \"desc\" ? \"desc\" : \"asc\" };\n };\n if (Array.isArray(raw)) {\n const out: SortState[] = [];\n for (const entry of raw) {\n const s = one(entry);\n if (s && !out.some((e) => e.key === s.key)) out.push(s);\n }\n return out;\n }\n const single = one(raw);\n return single ? [single] : [];\n}\n\nexport function encodeSorts(sorts: SortState[]): string | null {\n if (!sorts.length) return null;\n return sorts.map((s) => (s.dir === \"desc\" ? `${s.key}.desc` : s.key)).join(\",\");\n}\n\n/** Decode a `sort` URL param, dropping unknown and duplicated keys. */\nexport function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[] {\n if (!raw) return [];\n const out: SortState[] = [];\n for (const part of raw.split(\",\")) {\n const desc = part.endsWith(\".desc\");\n const asc = part.endsWith(\".asc\");\n const key = desc ? part.slice(0, -\".desc\".length) : asc ? part.slice(0, -\".asc\".length) : part;\n if (!validKeys.has(key) || out.some((s) => s.key === key)) continue;\n out.push({ key, dir: desc ? \"desc\" : \"asc\" });\n }\n return out;\n}\n\n/**\n * How a header click steps through the directions (see {@link nextSorts}).\n *\n * * `\"tri\"` — first direction → the other → unsorted. The default, and the only cycle\n * before 0.8.0.\n * * `\"toggle\"` — first direction ⇄ the other, never unsorted: a report table that is\n * ALWAYS ranked by something (keksdose's aggregated tables) must not have a third\n * click that silently drops the ranking. Clicking another column still replaces\n * the sort, so the table can always be re-ranked; a shift-click criterion flips in\n * place and stays for the same reason.\n */\nexport type SortCycle = \"tri\" | \"toggle\";\n\n/** Per-click options for {@link nextSorts}; every field is optional and the\n * defaults reproduce the pre-0.8.0 cycle exactly. */\nexport interface SortStepOptions {\n /** The direction a column starts in on its first click. `\"desc\"` for money and\n * count columns, where the interesting rows are the large ones. Default `\"asc\"`. */\n firstDir?: SortDir;\n /** Default `\"tri\"`. */\n cycle?: SortCycle;\n}\n\nconst flip = (d: SortDir): SortDir => (d === \"asc\" ? \"desc\" : \"asc\");\n\n/** Header-click semantics. Plain click: make `key` the only sort — cycling\n * first → other → none (`\"tri\"`) or first ⇄ other (`\"toggle\"`) when it already is\n * the sole criterion. Shift-click (`additive`): append `key` as the next-priority\n * sort, or step an existing entry in place (first → other → removed under `\"tri\"`,\n * a plain flip under `\"toggle\"`). `firstDir` defaults to `\"asc\"`, `cycle` to\n * `\"tri\"` — the cycle every table had before the options existed. */\nexport function nextSorts(\n prev: SortState[],\n key: string,\n additive: boolean,\n options: SortStepOptions = {},\n): SortState[] {\n const first = options.firstDir ?? \"asc\";\n const toggle = options.cycle === \"toggle\";\n const idx = prev.findIndex((s) => s.key === key);\n // One step from `dir`: the second direction after the first, then either back to\n // the first (toggle) or off (null). Judged against THIS column's first direction,\n // so a desc-first column goes desc → asc → none rather than skipping a step.\n const step = (dir: SortDir): SortDir | null => (dir === first ? flip(first) : toggle ? first : null);\n if (!additive) {\n if (prev.length === 1 && idx === 0) {\n const dir = step(prev[0].dir);\n return dir ? [{ key, dir }] : [];\n }\n return [{ key, dir: first }];\n }\n if (idx === -1) return [...prev, { key, dir: first }];\n const dir = step(prev[idx].dir);\n if (dir) return prev.map((s, i) => (i === idx ? { key, dir } : s));\n return prev.filter((_, i) => i !== idx);\n}\n"],"mappings":";AAcO,SAAS,eAAe,KAA2B;AACxD,QAAM,MAAM,CAAC,MAAiC;AAC5C,QAAI,CAAC,KAAK,OAAO,MAAM,SAAU,QAAO;AACxC,UAAM,EAAE,KAAK,IAAI,IAAI;AACrB,QAAI,OAAO,QAAQ,YAAY,CAAC,IAAK,QAAO;AAC5C,WAAO,EAAE,KAAK,KAAK,QAAQ,SAAS,SAAS,MAAM;AAAA,EACrD;AACA,MAAI,MAAM,QAAQ,GAAG,GAAG;AACtB,UAAM,MAAmB,CAAC;AAC1B,eAAW,SAAS,KAAK;AACvB,YAAM,IAAI,IAAI,KAAK;AACnB,UAAI,KAAK,CAAC,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,EAAE,GAAG,EAAG,KAAI,KAAK,CAAC;AAAA,IACxD;AACA,WAAO;AAAA,EACT;AACA,QAAM,SAAS,IAAI,GAAG;AACtB,SAAO,SAAS,CAAC,MAAM,IAAI,CAAC;AAC9B;AAEO,SAAS,YAAY,
|
|
1
|
+
{"version":3,"sources":["../../src/components/data-table-sort.ts"],"sourcesContent":["/** Multi-column sort state for DataTable: ordered by priority (index 0 is the\n * primary sort). Encoded as `sort=date.desc,amount` in URLs and the server's\n * transactions `sort` param — the pre-multi-sort single-value format\n * (`sort=date.desc`) decodes as a one-element list. */\n\nexport type SortDir = \"asc\" | \"desc\";\nexport interface SortState {\n key: string;\n dir: SortDir;\n}\n\n/** Coerce any persisted/URL-derived shape into a `SortState[]`. The\n * pre-multi-sort localStorage format stored one `{key, dir}` object (or\n * null); arrays pass through with junk entries dropped. */\nexport function normalizeSorts(raw: unknown): SortState[] {\n const one = (v: unknown): SortState | null => {\n if (!v || typeof v !== \"object\") return null;\n const { key, dir } = v as { key?: unknown; dir?: unknown };\n if (typeof key !== \"string\" || !key) return null;\n return { key, dir: dir === \"desc\" ? \"desc\" : \"asc\" };\n };\n if (Array.isArray(raw)) {\n const out: SortState[] = [];\n for (const entry of raw) {\n const s = one(entry);\n if (s && !out.some((e) => e.key === s.key)) out.push(s);\n }\n return out;\n }\n const single = one(raw);\n return single ? [single] : [];\n}\n\nexport function encodeSorts(sorts: readonly SortState[]): string | null {\n if (!sorts.length) return null;\n return sorts.map((s) => (s.dir === \"desc\" ? `${s.key}.desc` : s.key)).join(\",\");\n}\n\n/** Decode a `sort` URL param, dropping unknown and duplicated keys. */\nexport function decodeSorts(raw: string | null, validKeys: ReadonlySet<string>): SortState[] {\n if (!raw) return [];\n const out: SortState[] = [];\n for (const part of raw.split(\",\")) {\n const desc = part.endsWith(\".desc\");\n const asc = part.endsWith(\".asc\");\n const key = desc ? part.slice(0, -\".desc\".length) : asc ? part.slice(0, -\".asc\".length) : part;\n if (!validKeys.has(key) || out.some((s) => s.key === key)) continue;\n out.push({ key, dir: desc ? \"desc\" : \"asc\" });\n }\n return out;\n}\n\n/**\n * How a header click steps through the directions (see {@link nextSorts}).\n *\n * * `\"tri\"` — first direction → the other → unsorted. The default, and the only cycle\n * before 0.8.0.\n * * `\"toggle\"` — first direction ⇄ the other, never unsorted: a report table that is\n * ALWAYS ranked by something (keksdose's aggregated tables) must not have a third\n * click that silently drops the ranking. Clicking another column still replaces\n * the sort, so the table can always be re-ranked; a shift-click criterion flips in\n * place and stays for the same reason.\n */\nexport type SortCycle = \"tri\" | \"toggle\";\n\n/** Per-click options for {@link nextSorts}; every field is optional and the\n * defaults reproduce the pre-0.8.0 cycle exactly. */\nexport interface SortStepOptions {\n /** The direction a column starts in on its first click. `\"desc\"` for money and\n * count columns, where the interesting rows are the large ones. Default `\"asc\"`. */\n firstDir?: SortDir;\n /** Default `\"tri\"`. */\n cycle?: SortCycle;\n}\n\nconst flip = (d: SortDir): SortDir => (d === \"asc\" ? \"desc\" : \"asc\");\n\n// ---------- The client sort's order ----------\n\n/** One collator per locale, built once: `localeCompare` with a locale sets one up on\n * every call, n·log n times a sort. */\nconst collators = new Map<string, Intl.Collator>();\n\nfunction sortCollator(locale: string | undefined): Intl.Collator {\n const key = locale ?? \"\";\n let collator = collators.get(key);\n if (!collator) {\n const options: Intl.CollatorOptions = { numeric: true, sensitivity: \"base\" };\n try {\n collator = new Intl.Collator(locale, options);\n } catch {\n // An unknown tag (a typo in a provider's `locale`) throws a RangeError, and a sort\n // is no reason for a table to stop rendering: the runtime's own collation then, as\n // CountrySelect falls back.\n collator = new Intl.Collator(undefined, options);\n }\n collators.set(key, collator);\n }\n return collator;\n}\n\n/**\n * Two `sortBy` values in the order DataTable's client sort puts them, ascending — the\n * table's own comparator, exported (0.52) for a list an app sorts beside or into a\n * kit-sorted table: keksdose weaves its scheduled rows into the register and had to copy\n * the rule, a copy that drifts the day the table's changes. Negative when `a` comes first.\n *\n * - Strings collate in `locale` (audit 2026-10-30 DSP-3, 0.51.7; `<` compared UTF-16 code\n * units — every lower-case initial after every capital, Ä/Ö/Ü after Z): digits as\n * numbers (\"Item 2\" before \"Item 10\"), case and accents left out, so two values that\n * differ only by them compare equal and the next sort key decides. One collator per\n * locale, cached; an unknown tag falls back to the runtime's collation, not a throw.\n * - Numbers compare as numbers, and a number comes before a string.\n * - `null` and `undefined` come last, and equal each other. The table puts them last in\n * either direction; turn only the two present values round for a descending order.\n * - Any other pair (a `Date` an untyped caller returns) keeps `<` / `>`.\n *\n * rows.sort((a, b) => compareSortValues(a.payee, b.payee, locale));\n */\nexport function compareSortValues(\n a: string | number | null | undefined,\n b: string | number | null | undefined,\n locale?: string,\n): number {\n if (a == null || b == null) return a == null ? (b == null ? 0 : 1) : -1;\n const aText = typeof a === \"string\";\n const bText = typeof b === \"string\";\n if (aText && bText) return sortCollator(locale).compare(a, b);\n if (aText !== bText) return aText ? 1 : -1;\n return a < b ? -1 : a > b ? 1 : 0;\n}\n\n/** Header-click semantics. Plain click: make `key` the only sort — cycling\n * first → other → none (`\"tri\"`) or first ⇄ other (`\"toggle\"`) when it already is\n * the sole criterion. Shift-click (`additive`): append `key` as the next-priority\n * sort, or step an existing entry in place (first → other → removed under `\"tri\"`,\n * a plain flip under `\"toggle\"`). `firstDir` defaults to `\"asc\"`, `cycle` to\n * `\"tri\"` — the cycle every table had before the options existed. */\nexport function nextSorts(\n prev: readonly SortState[],\n key: string,\n additive: boolean,\n options: SortStepOptions = {},\n): SortState[] {\n const first = options.firstDir ?? \"asc\";\n const toggle = options.cycle === \"toggle\";\n const idx = prev.findIndex((s) => s.key === key);\n // One step from `dir`: the second direction after the first, then either back to\n // the first (toggle) or off (null). Judged against THIS column's first direction,\n // so a desc-first column goes desc → asc → none rather than skipping a step.\n const step = (dir: SortDir): SortDir | null => (dir === first ? flip(first) : toggle ? first : null);\n if (!additive) {\n if (prev.length === 1 && idx === 0) {\n const dir = step(prev[0].dir);\n return dir ? [{ key, dir }] : [];\n }\n return [{ key, dir: first }];\n }\n if (idx === -1) return [...prev, { key, dir: first }];\n const dir = step(prev[idx].dir);\n if (dir) return prev.map((s, i) => (i === idx ? { key, dir } : s));\n return prev.filter((_, i) => i !== idx);\n}\n"],"mappings":"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","names":["dir"]}
|
|
@@ -71,7 +71,7 @@ export declare function planBodies(m: Pick<Model, "n" | "tops" | "h" | "gTop">,
|
|
|
71
71
|
export declare function useRowWindow<T>({ enabled, rows, rowKey, groups, expanded, pinnedKeys, scrollerRef, tableRef, options, compact, rowsBefore, rowsAfter, colKeys, lockable, resetKey, }: {
|
|
72
72
|
enabled: boolean;
|
|
73
73
|
/** The rows on screen, in order. */
|
|
74
|
-
rows: T[];
|
|
74
|
+
rows: readonly T[];
|
|
75
75
|
rowKey: (row: T) => string | number;
|
|
76
76
|
groups: readonly VirtualGroup[];
|
|
77
77
|
/** Indices of the open rows: always rendered, their detail rows counted. */
|