@12-apps/ui 6.93.0 → 6.93.1
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/components-catalog.md +9 -2
- package/components-guidelines.md +30 -0
- package/dist/_internal/components/data-display/AlertDialog/AlertDialog.js +2 -2
- package/dist/_internal/components/data-display/AlertDialog/AlertDialog.parts.js +9 -3
- package/dist/_internal/components/data-display/Avatar/Avatar.js +2 -2
- package/dist/_internal/components/data-display/Badge/Badge.js +2 -2
- package/dist/_internal/components/data-display/CardKit/use-remove-confirm.js +7 -7
- package/dist/_internal/components/data-display/CardKit/use-row-confirm.js +7 -7
- package/dist/_internal/components/data-display/Carousel/Carousel.js +3 -3
- package/dist/_internal/components/data-display/Chart/Chart.js +4 -4
- package/dist/_internal/components/data-display/Chart/SpecChart.js +7 -7
- package/dist/_internal/components/data-display/Chart/chart-context.js +2 -2
- package/dist/_internal/components/data-display/Chart/chart-renderers.js +3 -3
- package/dist/_internal/components/data-display/DataViews/DataViewsGrid.js +31 -31
- package/dist/_internal/components/data-display/DataViews/DataViewsTableBase.js +42 -42
- package/dist/_internal/components/data-display/DataViews/ManageViewsDialog.js +7 -7
- package/dist/_internal/components/data-display/DataViews/base-list-card-geometry.js +2 -2
- package/dist/_internal/components/data-display/DataViews/base-list-card-layout.js +2 -2
- package/dist/_internal/components/data-display/DataViews/base-list-card-slots.js +2 -2
- package/dist/_internal/components/data-display/DataViews/base-list-card.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-display-panel.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-filter-panel.js +6 -6
- package/dist/_internal/components/data-display/DataViews/data-views-grid-bodies.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-grid-parts.js +26 -26
- package/dist/_internal/components/data-display/DataViews/data-views-inline-bar.js +8 -8
- package/dist/_internal/components/data-display/DataViews/data-views-more-fields.js +6 -6
- package/dist/_internal/components/data-display/DataViews/data-views-more-filters.js +7 -7
- package/dist/_internal/components/data-display/DataViews/data-views-range-bounds.js +3 -3
- package/dist/_internal/components/data-display/DataViews/data-views-range-pill.js +5 -5
- package/dist/_internal/components/data-display/DataViews/data-views-scope-tabs.js +2 -2
- package/dist/_internal/components/data-display/DataViews/data-views-shell-toolbar.js +7 -7
- package/dist/_internal/components/data-display/DataViews/data-views-table-parts.js +8 -8
- package/dist/_internal/components/data-display/DataViews/data-views-toolbar.js +6 -6
- package/dist/_internal/components/data-display/DataViews/list-card-rails.js +2 -2
- package/dist/_internal/components/data-display/DataViews/use-data-views-state.js +3 -3
- package/dist/_internal/components/data-display/DayRuler/DayRuler.footer.js +25 -0
- package/dist/_internal/components/data-display/DayRuler/DayRuler.footer.js.map +1 -0
- package/dist/_internal/components/data-display/DayRuler/DayRuler.footer.styles.js +23 -0
- package/dist/_internal/components/data-display/DayRuler/DayRuler.footer.styles.js.map +1 -0
- package/dist/_internal/components/data-display/DayRuler/DayRuler.js +14 -12
- package/dist/_internal/components/data-display/DayRuler/DayRuler.keyboard.js +3 -3
- package/dist/_internal/components/data-display/DayRuler/DayRuler.metrics.js +1 -1
- package/dist/_internal/components/data-display/DayRuler/DayRuler.parts.js +12 -15
- package/dist/_internal/components/data-display/DayRuler/DayRuler.styles.js +3 -11
- package/dist/_internal/components/data-display/DayRuler/day-ruler-model.js +5 -1
- package/dist/_internal/components/data-display/DayRuler/useRulerDrag.js +3 -3
- package/dist/_internal/components/data-display/DayRuler/useTextFits.js +4 -3
- package/dist/_internal/components/data-display/ScheduleGrid/ScheduleGrid.js +6 -6
- package/dist/_internal/components/data-display/ScheduleGrid/ScheduleGrid.parts.js +5 -5
- package/dist/_internal/components/data-display/ScheduleGrid/ScheduleGrid.styles.js +2 -2
- package/dist/_internal/components/data-display/ScheduleGrid/ScheduleNameCell.js +3 -3
- package/dist/_internal/components/data-display/ScheduleGrid/schedule-name.styles.js +2 -2
- package/dist/_internal/components/data-display/ScheduleGrid/schedule-tones.js +3 -1
- package/dist/_internal/components/data-display/index.js +38 -36
- package/dist/_internal/components/feedback/ConfirmAction/ConfirmAction.js +4 -4
- package/dist/_internal/components/feedback/ConfirmAction/ConfirmAction.parts.js +3 -3
- package/dist/_internal/components/feedback/ConfirmAction/ConfirmButton.js +5 -5
- package/dist/_internal/components/feedback/ConfirmAction/with-confirmation.js +4 -4
- package/dist/_internal/components/feedback/index.js +6 -6
- package/dist/_internal/components/index.js +49 -47
- package/dist/_internal/components/navigation/SectionNav/SectionNav.bar.js +6 -6
- package/dist/_internal/components/navigation/SectionNav/SectionNav.js +9 -9
- package/dist/_internal/components/navigation/SectionNav/SectionNav.parts.js +3 -3
- package/dist/_internal/components/navigation/SectionNav/SectionNav.primary.js +4 -4
- package/dist/_internal/components/navigation/SectionNav/SectionNav.rail.js +5 -5
- package/dist/_internal/components/navigation/SectionNav/SectionNav.railCreate.js +4 -4
- package/dist/_internal/components/navigation/SectionNav/SectionNav.sheet.js +4 -4
- package/dist/_internal/components/navigation/index.js +9 -9
- package/dist/_internal/user-avatar/user-avatar.js +3 -3
- package/dist/charts.js +13 -13
- package/dist/{chunk-LDCZPZPD.js → chunk-24HHUCWB.js} +2 -2
- package/dist/{chunk-7ZQ3KQ7J.js → chunk-273OLFJD.js} +16 -6
- package/dist/chunk-273OLFJD.js.map +1 -0
- package/dist/{chunk-FAUNQ3FS.js → chunk-2M3W6ACW.js} +3 -3
- package/dist/{chunk-ALOEOGQV.js → chunk-3TZUZXY5.js} +2 -2
- package/dist/{chunk-4HK4FVMV.js → chunk-3UAHDLKH.js} +7 -1
- package/dist/{chunk-4HK4FVMV.js.map → chunk-3UAHDLKH.js.map} +1 -1
- package/dist/{chunk-F5H3WDG7.js → chunk-4E2RQOSQ.js} +2 -2
- package/dist/{chunk-JIEVKHOH.js → chunk-4J62V5OE.js} +6 -6
- package/dist/{chunk-OJZLFFG4.js → chunk-5AZEDQXX.js} +59 -70
- package/dist/chunk-5AZEDQXX.js.map +1 -0
- package/dist/{chunk-CZVAVX5L.js → chunk-6ATXOJVQ.js} +2 -2
- package/dist/{chunk-E2UOEI7N.js → chunk-6LGKJVOA.js} +2 -2
- package/dist/{chunk-XBWW3QSI.js → chunk-7WE432RQ.js} +9 -9
- package/dist/{chunk-5357QUVE.js → chunk-AMLHEKSV.js} +5 -5
- package/dist/{chunk-HSVSU7I2.js → chunk-ASEHJIIV.js} +3 -3
- package/dist/{chunk-FYUNROLW.js → chunk-BZYLTGOE.js} +2 -2
- package/dist/{chunk-TZ44F6W7.js → chunk-CGS2LQE5.js} +2 -2
- package/dist/{chunk-KPUUHAK6.js → chunk-CWXX5JR3.js} +11 -9
- package/dist/chunk-CWXX5JR3.js.map +1 -0
- package/dist/{chunk-6HXNFNOB.js → chunk-EE6DJPB7.js} +4 -4
- package/dist/{chunk-OM6ZT64U.js → chunk-F2UP5ZF4.js} +3 -3
- package/dist/{chunk-P53ANKZV.js → chunk-F7LBTMCA.js} +4 -4
- package/dist/{chunk-6HPVCDVU.js → chunk-FGZIEZEP.js} +69 -112
- package/dist/chunk-FGZIEZEP.js.map +1 -0
- package/dist/{chunk-IWSTMVCA.js → chunk-FKS2PNJF.js} +8 -8
- package/dist/{chunk-3WYEENUH.js → chunk-FPNVOB52.js} +7 -7
- package/dist/{chunk-E73C73UD.js → chunk-FYSS2PYA.js} +3 -3
- package/dist/{chunk-N557OEZR.js → chunk-G6NMSBSQ.js} +2 -2
- package/dist/{chunk-A5OERY43.js → chunk-GARM5SX6.js} +2 -2
- package/dist/{chunk-WJMSND5Q.js → chunk-GXGHEOWC.js} +2 -2
- package/dist/{chunk-U2SAW6DH.js → chunk-GY53SDVL.js} +4 -4
- package/dist/{chunk-MFX4ASX5.js → chunk-HWZETMO4.js} +3 -3
- package/dist/{chunk-MM3QESLI.js → chunk-ILJ3FXIC.js} +2 -2
- package/dist/{chunk-K6VEN5VN.js → chunk-K3PMMW23.js} +4 -4
- package/dist/{chunk-T5RFH2T5.js → chunk-KOGJBAFI.js} +2 -2
- package/dist/{chunk-COK65GX2.js → chunk-KURE5R7Z.js} +12 -2
- package/dist/chunk-KURE5R7Z.js.map +1 -0
- package/dist/{chunk-MAYAJXO6.js → chunk-KXDLLS62.js} +5 -5
- package/dist/{chunk-LE5JYNR7.js → chunk-L5CAHQIN.js} +23 -2
- package/dist/chunk-L5CAHQIN.js.map +1 -0
- package/dist/{chunk-DBI6AMNY.js → chunk-LKWXU6NH.js} +4 -4
- package/dist/chunk-MPVH2GM5.js +83 -0
- package/dist/chunk-MPVH2GM5.js.map +1 -0
- package/dist/{chunk-6DO672AG.js → chunk-N5PVD4J5.js} +7 -7
- package/dist/{chunk-ZYZPSBNQ.js → chunk-OGSTMHT6.js} +22 -7
- package/dist/chunk-OGSTMHT6.js.map +1 -0
- package/dist/{chunk-R52N5UCS.js → chunk-SB2SEGR6.js} +2 -2
- package/dist/{chunk-Z2WZDVGG.js → chunk-SI5SKX52.js} +2 -2
- package/dist/{chunk-RYJ6XGFA.js → chunk-SJAOQGQI.js} +2 -2
- package/dist/{chunk-D7R6SRJB.js → chunk-SKQPUAMK.js} +3 -3
- package/dist/{chunk-AMIUZRDQ.js → chunk-SNWCT6JN.js} +3 -3
- package/dist/{chunk-7W5X3KQ2.js → chunk-SW7JCF4Z.js} +2 -2
- package/dist/{chunk-BNBWUXT3.js → chunk-TE6HAWDM.js} +2 -2
- package/dist/{chunk-JG733RMP.js → chunk-TZC6KIK2.js} +5 -5
- package/dist/{chunk-4QGKR65P.js → chunk-U4Z6GZDW.js} +5 -5
- package/dist/{chunk-XFZDO2KB.js → chunk-UIIHUWOV.js} +13 -13
- package/dist/{chunk-L4V7FZJI.js → chunk-UKUGSU3Y.js} +2 -2
- package/dist/{chunk-VJIJCLUX.js → chunk-UOKXYV3U.js} +2 -2
- package/dist/{chunk-K7IDOTSU.js → chunk-VNMD6BA4.js} +2 -2
- package/dist/chunk-WG7CAT5D.js +65 -0
- package/dist/chunk-WG7CAT5D.js.map +1 -0
- package/dist/chunk-WSSD7H5E.js +52 -0
- package/dist/chunk-WSSD7H5E.js.map +1 -0
- package/dist/{chunk-DTZOP4ZR.js → chunk-XCUHGPPZ.js} +2 -2
- package/dist/{chunk-3YFDGFEK.js → chunk-Y7BOP7VZ.js} +2 -2
- package/dist/{chunk-XNAI7QGU.js → chunk-ZM6FJCWS.js} +4 -4
- package/dist/{chunk-FC7UCFFA.js → chunk-ZPWPA6FR.js} +8 -8
- package/dist/data-display/AlertDialog.js +2 -2
- package/dist/data-display/Avatar.js +2 -2
- package/dist/data-display/Badge.js +2 -2
- package/dist/data-display/CardKit.js +10 -10
- package/dist/data-display/Carousel.js +3 -3
- package/dist/data-display/Chart.js +13 -13
- package/dist/data-display/DataViews.js +56 -56
- package/dist/data-display/DayRuler.js +14 -12
- package/dist/data-display/ScheduleGrid.js +6 -6
- package/dist/feedback/ConfirmAction.js +6 -6
- package/dist/navigation/SectionNav.js +9 -9
- package/dist/types/components/data-display/AlertDialog/AlertDialog.d.ts.map +1 -1
- package/dist/types/components/data-display/AlertDialog/AlertDialog.parts.d.ts +11 -0
- package/dist/types/components/data-display/AlertDialog/AlertDialog.parts.d.ts.map +1 -1
- package/dist/types/components/data-display/DayRuler/DayRuler.d.ts.map +1 -1
- package/dist/types/components/data-display/DayRuler/DayRuler.footer.d.ts +16 -0
- package/dist/types/components/data-display/DayRuler/DayRuler.footer.d.ts.map +1 -0
- package/dist/types/components/data-display/DayRuler/DayRuler.footer.styles.d.ts +18 -0
- package/dist/types/components/data-display/DayRuler/DayRuler.footer.styles.d.ts.map +1 -0
- package/dist/types/components/data-display/DayRuler/DayRuler.metrics.d.ts +15 -5
- package/dist/types/components/data-display/DayRuler/DayRuler.metrics.d.ts.map +1 -1
- package/dist/types/components/data-display/DayRuler/DayRuler.parts.d.ts +13 -14
- package/dist/types/components/data-display/DayRuler/DayRuler.parts.d.ts.map +1 -1
- package/dist/types/components/data-display/DayRuler/DayRuler.styles.d.ts +20 -23
- package/dist/types/components/data-display/DayRuler/DayRuler.styles.d.ts.map +1 -1
- package/dist/types/components/data-display/DayRuler/DayRuler.types.d.ts +13 -3
- package/dist/types/components/data-display/DayRuler/DayRuler.types.d.ts.map +1 -1
- package/dist/types/components/data-display/DayRuler/day-ruler-model.d.ts +27 -0
- package/dist/types/components/data-display/DayRuler/day-ruler-model.d.ts.map +1 -1
- package/dist/types/components/data-display/DayRuler/useTextFits.d.ts +11 -9
- package/dist/types/components/data-display/DayRuler/useTextFits.d.ts.map +1 -1
- package/dist/types/components/data-display/ScheduleGrid/schedule-tones.d.ts +8 -0
- package/dist/types/components/data-display/ScheduleGrid/schedule-tones.d.ts.map +1 -1
- package/dist/user-avatar.js +3 -3
- package/package.json +1 -1
- package/src/components/data-display/AlertDialog/AlertDialog.md +25 -1
- package/src/components/data-display/AlertDialog/AlertDialog.parts.tsx +28 -0
- package/src/components/data-display/AlertDialog/AlertDialog.tsx +34 -5
- package/src/components/data-display/DayRuler/DayRuler.footer.styles.ts +54 -0
- package/src/components/data-display/DayRuler/DayRuler.footer.tsx +123 -0
- package/src/components/data-display/DayRuler/DayRuler.md +37 -13
- package/src/components/data-display/DayRuler/DayRuler.metrics.ts +15 -5
- package/src/components/data-display/DayRuler/DayRuler.parts.tsx +86 -155
- package/src/components/data-display/DayRuler/DayRuler.styles.ts +89 -83
- package/src/components/data-display/DayRuler/DayRuler.tsx +3 -2
- package/src/components/data-display/DayRuler/DayRuler.types.ts +13 -3
- package/src/components/data-display/DayRuler/day-ruler-model.ts +45 -0
- package/src/components/data-display/DayRuler/useTextFits.ts +68 -25
- package/src/components/data-display/ScheduleGrid/schedule-tones.ts +13 -0
- package/src/components/feedback/ConfirmAction/ConfirmAction.md +10 -0
- package/dist/chunk-6HPVCDVU.js.map +0 -1
- package/dist/chunk-7ZQ3KQ7J.js.map +0 -1
- package/dist/chunk-COK65GX2.js.map +0 -1
- package/dist/chunk-KPUUHAK6.js.map +0 -1
- package/dist/chunk-LE5JYNR7.js.map +0 -1
- package/dist/chunk-OJZLFFG4.js.map +0 -1
- package/dist/chunk-YMYJO2CZ.js +0 -32
- package/dist/chunk-YMYJO2CZ.js.map +0 -1
- package/dist/chunk-ZYZPSBNQ.js.map +0 -1
- /package/dist/{chunk-LDCZPZPD.js.map → chunk-24HHUCWB.js.map} +0 -0
- /package/dist/{chunk-FAUNQ3FS.js.map → chunk-2M3W6ACW.js.map} +0 -0
- /package/dist/{chunk-ALOEOGQV.js.map → chunk-3TZUZXY5.js.map} +0 -0
- /package/dist/{chunk-F5H3WDG7.js.map → chunk-4E2RQOSQ.js.map} +0 -0
- /package/dist/{chunk-JIEVKHOH.js.map → chunk-4J62V5OE.js.map} +0 -0
- /package/dist/{chunk-CZVAVX5L.js.map → chunk-6ATXOJVQ.js.map} +0 -0
- /package/dist/{chunk-E2UOEI7N.js.map → chunk-6LGKJVOA.js.map} +0 -0
- /package/dist/{chunk-XBWW3QSI.js.map → chunk-7WE432RQ.js.map} +0 -0
- /package/dist/{chunk-5357QUVE.js.map → chunk-AMLHEKSV.js.map} +0 -0
- /package/dist/{chunk-HSVSU7I2.js.map → chunk-ASEHJIIV.js.map} +0 -0
- /package/dist/{chunk-FYUNROLW.js.map → chunk-BZYLTGOE.js.map} +0 -0
- /package/dist/{chunk-TZ44F6W7.js.map → chunk-CGS2LQE5.js.map} +0 -0
- /package/dist/{chunk-6HXNFNOB.js.map → chunk-EE6DJPB7.js.map} +0 -0
- /package/dist/{chunk-OM6ZT64U.js.map → chunk-F2UP5ZF4.js.map} +0 -0
- /package/dist/{chunk-P53ANKZV.js.map → chunk-F7LBTMCA.js.map} +0 -0
- /package/dist/{chunk-IWSTMVCA.js.map → chunk-FKS2PNJF.js.map} +0 -0
- /package/dist/{chunk-3WYEENUH.js.map → chunk-FPNVOB52.js.map} +0 -0
- /package/dist/{chunk-E73C73UD.js.map → chunk-FYSS2PYA.js.map} +0 -0
- /package/dist/{chunk-N557OEZR.js.map → chunk-G6NMSBSQ.js.map} +0 -0
- /package/dist/{chunk-A5OERY43.js.map → chunk-GARM5SX6.js.map} +0 -0
- /package/dist/{chunk-WJMSND5Q.js.map → chunk-GXGHEOWC.js.map} +0 -0
- /package/dist/{chunk-U2SAW6DH.js.map → chunk-GY53SDVL.js.map} +0 -0
- /package/dist/{chunk-MFX4ASX5.js.map → chunk-HWZETMO4.js.map} +0 -0
- /package/dist/{chunk-MM3QESLI.js.map → chunk-ILJ3FXIC.js.map} +0 -0
- /package/dist/{chunk-K6VEN5VN.js.map → chunk-K3PMMW23.js.map} +0 -0
- /package/dist/{chunk-T5RFH2T5.js.map → chunk-KOGJBAFI.js.map} +0 -0
- /package/dist/{chunk-MAYAJXO6.js.map → chunk-KXDLLS62.js.map} +0 -0
- /package/dist/{chunk-DBI6AMNY.js.map → chunk-LKWXU6NH.js.map} +0 -0
- /package/dist/{chunk-6DO672AG.js.map → chunk-N5PVD4J5.js.map} +0 -0
- /package/dist/{chunk-R52N5UCS.js.map → chunk-SB2SEGR6.js.map} +0 -0
- /package/dist/{chunk-Z2WZDVGG.js.map → chunk-SI5SKX52.js.map} +0 -0
- /package/dist/{chunk-RYJ6XGFA.js.map → chunk-SJAOQGQI.js.map} +0 -0
- /package/dist/{chunk-D7R6SRJB.js.map → chunk-SKQPUAMK.js.map} +0 -0
- /package/dist/{chunk-AMIUZRDQ.js.map → chunk-SNWCT6JN.js.map} +0 -0
- /package/dist/{chunk-7W5X3KQ2.js.map → chunk-SW7JCF4Z.js.map} +0 -0
- /package/dist/{chunk-BNBWUXT3.js.map → chunk-TE6HAWDM.js.map} +0 -0
- /package/dist/{chunk-JG733RMP.js.map → chunk-TZC6KIK2.js.map} +0 -0
- /package/dist/{chunk-4QGKR65P.js.map → chunk-U4Z6GZDW.js.map} +0 -0
- /package/dist/{chunk-XFZDO2KB.js.map → chunk-UIIHUWOV.js.map} +0 -0
- /package/dist/{chunk-L4V7FZJI.js.map → chunk-UKUGSU3Y.js.map} +0 -0
- /package/dist/{chunk-VJIJCLUX.js.map → chunk-UOKXYV3U.js.map} +0 -0
- /package/dist/{chunk-K7IDOTSU.js.map → chunk-VNMD6BA4.js.map} +0 -0
- /package/dist/{chunk-DTZOP4ZR.js.map → chunk-XCUHGPPZ.js.map} +0 -0
- /package/dist/{chunk-3YFDGFEK.js.map → chunk-Y7BOP7VZ.js.map} +0 -0
- /package/dist/{chunk-XNAI7QGU.js.map → chunk-ZM6FJCWS.js.map} +0 -0
- /package/dist/{chunk-FC7UCFFA.js.map → chunk-ZPWPA6FR.js.map} +0 -0
|
@@ -14,9 +14,14 @@ export interface DayRulerBlock {
|
|
|
14
14
|
id: string;
|
|
15
15
|
start: RulerHour;
|
|
16
16
|
end: RulerHour;
|
|
17
|
-
/**
|
|
17
|
+
/**
|
|
18
|
+
* What the block says ("↻ 20:39–00:00", "Ausente"). One line, drawn whole or
|
|
19
|
+
* not at all: a bar too short for it says `shortLabel`, and one too short
|
|
20
|
+
* even for that says nothing — never a cut text (FUT-3831). Either way it
|
|
21
|
+
* stays the block's tooltip (unless `title`) and its accessible name.
|
|
22
|
+
*/
|
|
18
23
|
label: string;
|
|
19
|
-
/** What a
|
|
24
|
+
/** What a block too short for its `label` says instead, at any width — its start ("20:39"). */
|
|
20
25
|
shortLabel?: string;
|
|
21
26
|
tone: ScheduleBlockTone;
|
|
22
27
|
/** Its middle can be dragged along the row (and Alt+←/→ moves it). */
|
|
@@ -53,7 +58,12 @@ export interface DayRulerRow {
|
|
|
53
58
|
nameAdornment?: React.ReactNode;
|
|
54
59
|
/** Under the meta: the host's chips (praça, "Em pausa desde …"). One line; a chip that does not fit shrinks, its label cut. */
|
|
55
60
|
chips?: React.ReactNode;
|
|
56
|
-
/**
|
|
61
|
+
/**
|
|
62
|
+
* The row's own buttons ("Encerrar turno", "Iniciar agora"): under the name
|
|
63
|
+
* on a computer, beside it when the row stacks. They take no column of their
|
|
64
|
+
* own, so every track keeps the same width and the hours stay aligned
|
|
65
|
+
* (FUT-3831).
|
|
66
|
+
*/
|
|
57
67
|
actions?: React.ReactNode;
|
|
58
68
|
blocks: readonly DayRulerBlock[];
|
|
59
69
|
actual?: DayRulerActual;
|
|
@@ -81,3 +81,48 @@ export function ticksOf(from: RulerHour, to: RulerHour, step: number): RulerHour
|
|
|
81
81
|
for (let h = from; h <= to + 1e-9; h += step) out.push(h);
|
|
82
82
|
return out;
|
|
83
83
|
}
|
|
84
|
+
|
|
85
|
+
/** A bar along the track: where it starts and how long it is, both in % of the track. */
|
|
86
|
+
export interface TrackSpan {
|
|
87
|
+
at: number;
|
|
88
|
+
share: number;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* How far each bar's hit band may reach, in % of the track (FUT-3831): from
|
|
93
|
+
* `lo` to `hi`, never past the track's ends and never past the MIDPOINT of
|
|
94
|
+
* the gap to the bar beside it, so a band widened round a short bar cannot
|
|
95
|
+
* take a tap meant for its neighbour. Two bars that touch or overlap give each
|
|
96
|
+
* other nothing: the band stays on the bar's own edge on that side.
|
|
97
|
+
*
|
|
98
|
+
* The band itself is drawn in CSS — at least the hit area wide, centred on the
|
|
99
|
+
* bar, then cut to `lo…hi` — because the bar's width in px is the layout's.
|
|
100
|
+
*/
|
|
101
|
+
export function hitBoundsOf(spans: readonly TrackSpan[]): { lo: number; hi: number }[] {
|
|
102
|
+
const order = spans.map((_, index) => index).sort((a, b) => spans[a]!.at - spans[b]!.at);
|
|
103
|
+
const out = spans.map(() => ({ lo: 0, hi: 100 }));
|
|
104
|
+
for (let k = 1; k < order.length; k += 1) {
|
|
105
|
+
const left = spans[order[k - 1]!]!;
|
|
106
|
+
const right = spans[order[k]!]!;
|
|
107
|
+
const leftEnd = left.at + left.share;
|
|
108
|
+
const mid = leftEnd <= right.at ? (leftEnd + right.at) / 2 : null;
|
|
109
|
+
out[order[k - 1]!]!.hi = Math.min(out[order[k - 1]!]!.hi, mid ?? leftEnd);
|
|
110
|
+
out[order[k]!]!.lo = Math.max(out[order[k]!]!.lo, mid ?? right.at);
|
|
111
|
+
}
|
|
112
|
+
return out;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/** What a block can say in its bar: its full text, its start, or nothing. */
|
|
116
|
+
export type BlockTextFit = 'full' | 'short' | 'none';
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* Which of a block's texts fits the room it leaves inside the bar, by pixels
|
|
120
|
+
* (FUT-3831): the full one, else the short one, else NOTHING — a cut "12:"
|
|
121
|
+
* says less than an empty bar whose title and accessible name carry the text.
|
|
122
|
+
*/
|
|
123
|
+
export function textFitOf(fullWidth: number, shortWidth: number, room: number): BlockTextFit {
|
|
124
|
+
const slack = 0.5;
|
|
125
|
+
if (fullWidth <= room + slack) return 'full';
|
|
126
|
+
if (shortWidth <= room + slack) return 'short';
|
|
127
|
+
return 'none';
|
|
128
|
+
}
|
|
@@ -1,41 +1,84 @@
|
|
|
1
1
|
import type * as React from 'react';
|
|
2
2
|
import { useLayoutEffect, useState } from 'react';
|
|
3
3
|
|
|
4
|
+
import { textFitOf, type BlockTextFit } from './day-ruler-model';
|
|
5
|
+
|
|
6
|
+
/** A text span's own width (its laid-out text, whatever the span's own box). */
|
|
7
|
+
function textWidth(span: HTMLElement | null): number {
|
|
8
|
+
if (!span) return Number.POSITIVE_INFINITY;
|
|
9
|
+
const range = span.ownerDocument.createRange();
|
|
10
|
+
range.selectNodeContents(span);
|
|
11
|
+
return range.getBoundingClientRect().width;
|
|
12
|
+
}
|
|
13
|
+
|
|
4
14
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
15
|
+
* The block's fit, measured in ONE layout: every write first (both texts
|
|
16
|
+
* shown for the measurement alone), then every read, then the writes undone —
|
|
17
|
+
* so a ruler of many blocks forces one layout per block, not one per text.
|
|
18
|
+
* `null` when there is nothing to measure yet.
|
|
19
|
+
*/
|
|
20
|
+
function measureFit(el: HTMLElement): BlockTextFit | null {
|
|
21
|
+
const full = el.querySelector<HTMLElement>('[data-dr-text="full"]');
|
|
22
|
+
if (!full) return null;
|
|
23
|
+
const short = el.querySelector<HTMLElement>('[data-dr-text="short"]');
|
|
24
|
+
const spans = [full, short].filter((span): span is HTMLElement => span !== null);
|
|
25
|
+
const shown = spans.map((span) => span.style.display);
|
|
26
|
+
for (const span of spans) span.style.display = 'inline';
|
|
27
|
+
const fullWidth = textWidth(full);
|
|
28
|
+
const shortWidth = textWidth(short);
|
|
29
|
+
const style = getComputedStyle(el);
|
|
30
|
+
const outer = el.clientWidth;
|
|
31
|
+
const room = outer - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
|
|
32
|
+
spans.forEach((span, index) => {
|
|
33
|
+
span.style.display = shown[index] ?? '';
|
|
34
|
+
});
|
|
35
|
+
if (room > 0) return textFitOf(fullWidth, shortWidth, room);
|
|
36
|
+
// A bar with no room at all (narrower than its own padding) says nothing.
|
|
37
|
+
return outer > 0 ? 'none' : null;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/**
|
|
41
|
+
* Which of a block's texts fits it, by pixels (FUT-3825, FUT-3831): the full
|
|
42
|
+
* text's and the short text's own widths against the room the block leaves
|
|
43
|
+
* them. A wide block keeps "18:00–23:00"; one too short for it says its start
|
|
44
|
+
* ("18:00"); one too short even for that says nothing — never a cut "18:".
|
|
9
45
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
46
|
+
* Measured at once (synchronously, so nothing is painted), then again on the
|
|
47
|
+
* next frame whenever the block is resized, and once more when the page's
|
|
48
|
+
* fonts have loaded: a webfont arriving late changes every text's width, and
|
|
49
|
+
* a fit read in the fallback font would leave a label cut. Where nothing can
|
|
50
|
+
* be measured (no `ResizeObserver`) it answers `fallback`.
|
|
14
51
|
*/
|
|
15
|
-
export function
|
|
16
|
-
const [
|
|
52
|
+
export function useTextFit(block: React.RefObject<HTMLElement | null>, text: string, short: string, fallback: BlockTextFit): BlockTextFit {
|
|
53
|
+
const [fit, setFit] = useState<BlockTextFit>(fallback);
|
|
17
54
|
|
|
18
55
|
useLayoutEffect(() => {
|
|
19
56
|
const el = block.current;
|
|
20
57
|
if (!el || typeof ResizeObserver === 'undefined') return undefined;
|
|
58
|
+
let live = true;
|
|
59
|
+
let frame = 0;
|
|
21
60
|
const measure = (): void => {
|
|
22
|
-
|
|
23
|
-
if (!
|
|
24
|
-
const
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
if (room > 0) setFits(width <= room + 0.5);
|
|
61
|
+
frame = 0;
|
|
62
|
+
if (!live) return;
|
|
63
|
+
const next = measureFit(el);
|
|
64
|
+
if (next) setFit(next);
|
|
65
|
+
};
|
|
66
|
+
// Resizes and the fonts come in bursts: one measurement per frame.
|
|
67
|
+
const schedule = (): void => {
|
|
68
|
+
if (frame || !live) return;
|
|
69
|
+
frame = typeof requestAnimationFrame === 'function' ? requestAnimationFrame(measure) : 0;
|
|
70
|
+
if (!frame) measure();
|
|
33
71
|
};
|
|
34
72
|
measure();
|
|
35
|
-
const observer = new ResizeObserver(
|
|
73
|
+
const observer = new ResizeObserver(schedule);
|
|
36
74
|
observer.observe(el);
|
|
37
|
-
|
|
38
|
-
|
|
75
|
+
el.ownerDocument.fonts?.ready.then(schedule, () => undefined);
|
|
76
|
+
return () => {
|
|
77
|
+
live = false;
|
|
78
|
+
observer.disconnect();
|
|
79
|
+
if (frame && typeof cancelAnimationFrame === 'function') cancelAnimationFrame(frame);
|
|
80
|
+
};
|
|
81
|
+
}, [block, text, short]);
|
|
39
82
|
|
|
40
|
-
return
|
|
83
|
+
return fit;
|
|
41
84
|
}
|
|
@@ -108,6 +108,19 @@ export function blockToneStyles(theme: Theme, tone: ScheduleBlockTone, dashedPla
|
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
110
|
|
|
111
|
+
/**
|
|
112
|
+
* An OPAQUE ground for a ruler block's label where the block's own fill is
|
|
113
|
+
* not opaque (the dashed plan's faint wash, the away / uncovered outline): the
|
|
114
|
+
* fill flattened over the cell's ground, so the label reads the same and
|
|
115
|
+
* whatever the track draws under the block — the "agora" line — never shows
|
|
116
|
+
* through the text (FUT-3831). An opaque fill needs none: `undefined`.
|
|
117
|
+
*/
|
|
118
|
+
export function dashedLabelGround(theme: Theme, tone: ScheduleBlockTone): string | undefined {
|
|
119
|
+
if (tone === 'away' || tone === 'uncovered') return cellGround(theme);
|
|
120
|
+
if (tone === 'plan') return flatten(cellGround(theme), theme.palette.action.hover);
|
|
121
|
+
return undefined;
|
|
122
|
+
}
|
|
123
|
+
|
|
111
124
|
/**
|
|
112
125
|
* A break inside a block (a meal break): the page's own ground with diagonal
|
|
113
126
|
* stripes of the disabled action colour, opaque, so the block reads as CUT there in any
|
|
@@ -29,6 +29,16 @@ Whichever of the three entry points you use, you get the same contract:
|
|
|
29
29
|
- **The popup names the thing.** `entityName` is echoed into the body, so it
|
|
30
30
|
reads "Bebidas", not "este item".
|
|
31
31
|
|
|
32
|
+
## On a phone
|
|
33
|
+
|
|
34
|
+
The popup is an `AlertDialog`, so it takes that dialog's narrow layout
|
|
35
|
+
(FUT-3831): given less than 480px — a container query, never a media query —
|
|
36
|
+
the icon moves above the title so the question has the paper's whole width, and
|
|
37
|
+
the buttons stack each across the row, **the verb on top and Cancel at the
|
|
38
|
+
bottom**, the library's stacked order (`components-guidelines.md`, "Stacked
|
|
39
|
+
buttons"). The keyboard contract is unchanged: a destructive popup still opens
|
|
40
|
+
with focus on Cancel, and Cancel is still the first button to tab to.
|
|
41
|
+
|
|
32
42
|
## Three entry points
|
|
33
43
|
|
|
34
44
|
### `withConfirmation(Component, defaults?)` — the HOC
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.parts.tsx"],"sourcesContent":["import Box from '@mui/material/Box/index.js';\nimport type * as React from 'react';\nimport { useRef } from 'react';\n\nimport { ScheduleNameCell } from '../ScheduleGrid/ScheduleNameCell';\nimport type { RulerAbilities, RulerScale } from './DayRuler.keyboard';\nimport { DAY_RULER_METRICS as M } from './DayRuler.metrics';\nimport { useTextFits } from './useTextFits';\nimport { formatHour, formatRange, percentOf, ticksOf } from './day-ruler-model';\nimport { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';\nimport {\n actionsSx,\n actualLabelSx,\n actualSx,\n axisSx,\n blockSx,\n breakSx,\n coverageCellSx,\n coverageLabelSx,\n coverageSx,\n footerCellSx,\n footerNoteSx,\n handleSx,\n lineSx,\n nowSx,\n rowSx,\n trackSx,\n trendSx,\n whoSx,\n type Span,\n} from './DayRuler.styles';\nimport type { DayRulerBlock, DayRulerFooterCell, DayRulerFooterRow, DayRulerRow, RulerHour } from './DayRuler.types';\nimport type { RulerDrag, RulerDragApi } from './useRulerDrag';\n\nexport const spanOf = (start: RulerHour, end: RulerHour, scale: RulerScale): Span => {\n const at = percentOf(start, scale.from, scale.to);\n return { at, share: Math.max(0, percentOf(end, scale.from, scale.to) - at) };\n};\n\n/** What every row of one ruler shares. */\nexport interface RowContext {\n scale: RulerScale;\n now?: RulerHour;\n can: RulerAbilities;\n drag: RulerDrag | null;\n dragApi: RulerDragApi;\n onBlockClick?: (blockId: string) => void;\n onKeyCreate: (row: DayRulerRow) => void;\n onBlockKey: (event: React.KeyboardEvent, block: DayRulerBlock) => void;\n createLabel: (row: string) => string;\n testId: string;\n}\n\n/** The keys a block answers to, for `aria-keyshortcuts`. */\nfunction shortcutsOf(movable: boolean, resizable: boolean): string | undefined {\n const keys = [\n movable ? 'Alt+ArrowLeft Alt+ArrowRight' : '',\n resizable ? 'Shift+ArrowLeft Shift+ArrowRight Shift+Alt+ArrowLeft Shift+Alt+ArrowRight' : '',\n ];\n return keys.filter(Boolean).join(' ') || undefined;\n}\n\nfunction Handle({ side, onPointerDown, testId }: { side: 'l' | 'r'; onPointerDown: (event: React.PointerEvent<HTMLElement>) => void; testId: string }) {\n return <Box component=\"span\" aria-hidden sx={handleSx(side)} data-testid={testId} onPointerDown={onPointerDown} />;\n}\n\ninterface BlockProps {\n row: DayRulerRow;\n block: DayRulerBlock;\n /** Where it is drawn: its own hours, or where a drag has it now. */\n span: Span;\n /** The hours it is drawn at (its own, or a drag's). */\n at: { start: RulerHour; end: RulerHour };\n text: string;\n ctx: RowContext;\n testId: string;\n}\n\n/**\n * The block's break, where it falls inside the block as drawn: it moves with a\n * dragged block (same offset from its start) and is cut to the block's ends.\n */\nfunction breakShare(block: DayRulerBlock, start: RulerHour, end: RulerHour): Span | null {\n const span = block.breakSpan;\n const length = end - start;\n if (!span || !(length > 0)) return null;\n const shift = Math.abs(length - (block.end - block.start)) < 1e-6 ? start - block.start : 0;\n const a = Math.max(start, span.start + shift);\n const b = Math.min(end, span.end + shift);\n if (!(b > a)) return null;\n return { at: ((a - start) / length) * 100, share: ((b - a) / length) * 100 };\n}\n\n/** The block's break as a hatched band, when it falls inside the block as drawn. */\nfunction BreakBand({ block, at, testId }: { block: DayRulerBlock; at: BlockProps['at']; testId: string }): React.JSX.Element | null {\n const gap = breakShare(block, at.start, at.end);\n if (!gap) return null;\n return <Box component=\"span\" aria-hidden sx={breakSx(gap)} data-dr-break=\"\" data-testid={testId} />;\n}\n\nfunction RulerBlock({ row, block, span, at, text, ctx, testId }: BlockProps): React.JSX.Element {\n const { can, dragApi, scale } = ctx;\n const movable = can.move && Boolean(block.movable);\n const resizable = can.resize && Boolean(block.resizable);\n const ref = useRef<HTMLButtonElement | null>(null);\n // Short by pixels; where nothing can be measured, by the prototype's 30% rule.\n const fits = useTextFits(ref, text, (block.end - block.start) / (scale.to - scale.from) >= M.narrowShare);\n const press = (mode: 'move' | 'start' | 'end') => (event: React.PointerEvent<HTMLElement>) =>\n dragApi.startBlock(event, row.id, block, mode);\n return (\n <Box\n component=\"button\"\n type=\"button\"\n sx={blockSx(block.tone, span, { selected: Boolean(block.selected), movable })}\n title={block.title ?? block.label}\n aria-keyshortcuts={shortcutsOf(movable, resizable)}\n aria-current={block.selected ? 'true' : undefined}\n ref={ref}\n data-narrow={fits ? undefined : ''}\n data-tone={block.tone}\n data-testid={testId}\n onPointerDown={movable ? press('move') : undefined}\n onClick={() => {\n if (!dragApi.takeClick()) ctx.onBlockClick?.(block.id);\n }}\n onKeyDown={(event: React.KeyboardEvent) => ctx.onBlockKey(event, block)}\n >\n <BreakBand block={block} at={at} testId={`${ctx.testId}-break-${block.id}`} />\n {resizable ? <Handle side=\"l\" onPointerDown={press('start')} testId={`${ctx.testId}-handle-l-${block.id}`} /> : null}\n <span data-dr-text=\"full\" title={text}>\n {text}\n </span>\n <span data-dr-text=\"short\" title={text}>\n {block.shortLabel ?? text}\n </span>\n {resizable ? <Handle side=\"r\" onPointerDown={press('end')} testId={`${ctx.testId}-handle-r-${block.id}`} /> : null}\n </Box>\n );\n}\n\n/** A row's blocks, each where a drag has it now (with its live hours) or where it is. */\nfunction Blocks({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {\n const mine = ctx.drag && ctx.drag.rowId === row.id ? ctx.drag : null;\n return (\n <>\n {row.blocks.map((block) => {\n const live = mine?.blockId === block.id ? mine : null;\n const start = live ? live.start : block.start;\n const end = live ? live.end : block.end;\n return (\n <RulerBlock\n key={block.id}\n row={row}\n block={block}\n span={spanOf(start, end, ctx.scale)}\n at={{ start, end }}\n text={live?.moved ? formatRange(start, end) : block.label}\n ctx={ctx}\n testId={`${ctx.testId}-block-${block.id}`}\n />\n );\n })}\n {mine && mine.mode === 'create' ? <CreatePreview row={row} drag={mine} ctx={ctx} /> : null}\n </>\n );\n}\n\n/** The block a create drag is drawing, with its live hours. */\nfunction CreatePreview({ row, drag, ctx }: { row: DayRulerRow; drag: RulerDrag; ctx: RowContext }): React.JSX.Element {\n const range = formatRange(drag.start, drag.end);\n return (\n <RulerBlock\n row={row}\n block={{ id: '\\u0000new', start: drag.start, end: drag.end, label: range, tone: 'plan' }}\n span={spanOf(drag.start, Math.max(drag.end, drag.start + ctx.scale.snap), ctx.scale)}\n at={{ start: drag.start, end: drag.end }}\n text={range}\n ctx={ctx}\n testId={`${ctx.testId}-preview`}\n />\n );\n}\n\n/** The real shift under the blocks, and its label at its start. */\nfunction Actual({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element | null {\n const { actual } = row;\n if (!actual) return null;\n return (\n <>\n <Box sx={actualSx(spanOf(actual.start, actual.end, ctx.scale))} data-testid={`${ctx.testId}-actual-${row.id}`} />\n {row.actualLabel ? (\n <Box component=\"span\" sx={actualLabelSx(percentOf(actual.start, ctx.scale.from, ctx.scale.to))}>\n {row.actualLabel}\n </Box>\n ) : null}\n </>\n );\n}\n\n/** A row's track: the actual bar, its blocks (or the one being dragged, live) and the now line. */\nfunction Track({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {\n const { scale, now, can, dragApi } = ctx;\n const showNow = now !== undefined && now >= scale.from && now <= scale.to;\n return (\n <Box\n sx={trackSx({ hours: scale.to - scale.from, tickHours: scale.tickHours, interactive: can.create })}\n data-dr-track=\"\"\n data-testid={`${ctx.testId}-track-${row.id}`}\n role={can.create ? 'group' : undefined}\n tabIndex={can.create ? 0 : undefined}\n aria-label={can.create ? ctx.createLabel(row.label) : undefined}\n onPointerDown={can.create ? (event: React.PointerEvent<HTMLElement>) => dragApi.startCreate(event, row.id) : undefined}\n onKeyDown={(event: React.KeyboardEvent) => {\n if (!can.create || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return;\n event.preventDefault();\n ctx.onKeyCreate(row);\n }}\n >\n <Actual row={row} ctx={ctx} />\n <Blocks row={row} ctx={ctx} />\n {showNow ? <Box sx={nowSx(percentOf(now, scale.from, scale.to))} data-testid={`${ctx.testId}-now`} /> : null}\n </Box>\n );\n}\n\n/** One person: name, meta and chips · the track · the row's actions. */\nexport function RulerRow({ row, ctx }: { row: DayRulerRow; ctx: RowContext }): React.JSX.Element {\n return (\n <Box sx={rowSx} data-testid={`${ctx.testId}-row-${row.id}`} role=\"listitem\">\n <ScheduleNameCell row={row} sx={whoSx} sizes={{ name: M.name, meta: M.meta, chipsTop: 0.75 }} />\n <Track row={row} ctx={ctx} />\n <Box sx={actionsSx}>{row.actions}</Box>\n </Box>\n );\n}\n\n/** \"Na escala, por hora\": a count per hour above the axis. */\nexport function Coverage(props: { coverage: readonly number[]; label?: string; scale: RulerScale; testId: string }): React.JSX.Element {\n const { coverage, label, scale, testId } = props;\n const hours = scale.to - scale.from;\n return (\n <Box sx={lineSx} data-testid={`${testId}-coverage`}>\n <Box component=\"span\" sx={coverageLabelSx}>\n {label}\n </Box>\n <Box sx={coverageSx(hours)}>\n {Array.from({ length: hours }, (_, index) => {\n const count = coverage[index] ?? 0;\n return (\n <Box key={index} component=\"span\" sx={coverageCellSx(count)} title={`${formatHour(scale.from + index)} · ${count}`}>\n {count > 0 ? count : ''}\n </Box>\n );\n })}\n </Box>\n <span />\n </Box>\n );\n}\n\n/** The points of a trend over the hours' centres, in a 100 × 40 box: the highest value near the top, `null` breaks nothing (it is skipped). */\nexport function trendPoints(values: readonly (number | null)[], hours: number): string {\n const present = values.slice(0, hours).filter((value): value is number => value !== null);\n const max = Math.max(0, ...present);\n return values\n .slice(0, hours)\n .flatMap((value, index) => {\n if (value === null) return [];\n const x = ((index + 0.5) * 100) / hours;\n const y = max > 0 ? 38 - (value / max) * 34 : 38;\n return [`${x.toFixed(2)},${y.toFixed(2)}`];\n })\n .join(' ');\n}\n\n/** One hour's default words: \"20:00 · 4\"; just the hour when it says nothing. */\nconst hourWords = (hour: RulerHour, text: string): string => (text ? `${formatHour(hour)} · ${text}` : formatHour(hour));\n\n/** What a reader hears for a marked hour: the host's `title`, else the hour, its count and that it is short. */\nfunction markedWords(cell: DayRulerFooterCell, hour: RulerHour, marked: string): string {\n return cell.title ?? `${hourWords(hour, cell.text)} · ${marked}`;\n}\n\ninterface FooterContext {\n hours: number;\n from: RulerHour;\n /** `labels.footerMarked`. */\n marked: string;\n}\n\nfunction FooterCells({ cells, ctx }: { cells: readonly DayRulerFooterCell[]; ctx: FooterContext }): React.JSX.Element {\n return (\n <Box sx={coverageSx(ctx.hours)}>\n {Array.from({ length: ctx.hours }, (_, index) => {\n const cell = cells[index] ?? { text: '' };\n const hour = ctx.from + index;\n return (\n <Box\n key={index}\n component=\"span\"\n sx={footerCellSx(Boolean(cell.marked))}\n title={cell.marked ? markedWords(cell, hour, ctx.marked) : (cell.title ?? hourWords(hour, cell.text))}\n data-marked={cell.marked ? '' : undefined}\n >\n {/* A marked hour is said in words too, not only by its outline and a tooltip touch never shows. */}\n {cell.marked ? (\n <>\n <span aria-hidden>{cell.text}</span>\n <Box component=\"span\" sx={SR_ONLY_SX}>\n {markedWords(cell, hour, ctx.marked)}\n </Box>\n </>\n ) : (\n cell.text\n )}\n </Box>\n );\n })}\n </Box>\n );\n}\n\n/** A trend's figures in words, for the reader the drawn line does not reach: \"11:00 4 · 12:00 6\". */\nfunction trendWords(values: readonly (number | null)[], ctx: FooterContext): string {\n return values\n .slice(0, ctx.hours)\n .flatMap((value, index) => (value === null ? [] : [`${formatHour(ctx.from + index)} ${Math.round(value * 10) / 10}`]))\n .join(' · ');\n}\n\nfunction FooterFigures({ row, ctx }: { row: DayRulerFooterRow; ctx: FooterContext }): React.JSX.Element {\n if (row.trend) {\n return (\n <Box component=\"span\" sx={{ display: 'block', minWidth: 0 }}>\n <Box component=\"svg\" viewBox=\"0 0 100 40\" preserveAspectRatio=\"none\" sx={trendSx} aria-hidden>\n <polyline fill=\"none\" stroke=\"currentColor\" strokeWidth={1.5} vectorEffect=\"non-scaling-stroke\" points={trendPoints(row.trend, ctx.hours)} />\n </Box>\n <Box component=\"span\" sx={SR_ONLY_SX}>\n {trendWords(row.trend, ctx)}\n </Box>\n </Box>\n );\n }\n if (row.note !== undefined) {\n return (\n <Box component=\"span\" sx={footerNoteSx(Boolean(row.marked))} data-marked={row.marked ? '' : undefined}>\n {row.note}\n </Box>\n );\n }\n return <FooterCells cells={row.cells ?? []} ctx={ctx} />;\n}\n\n/**\n * A group's lines under its rows (FUT-3882): counts per hour, a trend, or a\n * sentence, on the tracks' columns. `marked` is `labels.footerMarked`.\n */\nexport function GroupFooter(props: { rows: readonly DayRulerFooterRow[]; scale: RulerScale; testId: string; marked: string }): React.JSX.Element {\n const { rows, scale, testId } = props;\n const ctx: FooterContext = { hours: scale.to - scale.from, from: scale.from, marked: props.marked };\n return (\n <>\n {rows.map((row) => (\n <Box key={row.id} sx={lineSx} data-testid={`${testId}-footer-${row.id}`}>\n <Box component=\"span\" sx={coverageLabelSx}>\n {row.label}\n </Box>\n <FooterFigures row={row} ctx={ctx} />\n <span />\n </Box>\n ))}\n </>\n );\n}\n\n/** The hour labels under the coverage row. */\nexport function Axis({ scale, testId }: { scale: RulerScale; testId: string }): React.JSX.Element {\n return (\n <Box sx={lineSx} data-testid={`${testId}-axis`} aria-hidden>\n <span />\n <Box sx={axisSx}>\n {ticksOf(scale.from, scale.to, scale.tickHours).map((h) => (\n <span key={h} style={{ left: `${percentOf(h, scale.from, scale.to)}%` }}>\n {formatHour(h)}\n </span>\n ))}\n </Box>\n <span />\n </Box>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.metrics.ts"],"sourcesContent":["/**\n * THE DAY RULER'S NUMBERS — the approved prototype's (FUT-3823, frames d02 at\n * 1280 and the phone rows), in px. The web reads them through `rem`/`sxRem`.\n */\nexport const DAY_RULER_METRICS = {\n /** The name and the actions columns on a computer. */\n sideColumn: 220,\n gap: 16,\n /**\n * Below this container width a row stacks: name and actions on top, the\n * track under them. Two 220px side columns, their gaps and a track of at\n * least 320px (where the hour labels every 4 hours do not collide): 792,\n * rounded up.\n */\n compactBelow: 800,\n /**\n * Below this container width the pane is phone-sized: no coverage row and\n * no hour axis. Between it and `compactBelow` the rows stack and the two\n * lines are drawn across the full width, like the tracks.\n */\n phoneBelow: 600,\n rowPaddingY: 8,\n track: { height: 40, compactHeight: 30, radius: 8, compactRadius: 6 },\n block: { top: 4, height: 24, compactTop: 3, compactHeight: 20, radius: 6, paddingX: 6, font: 12, hitArea: 40 },\n /** The end handles' hit area. */\n handle: 10,\n actual: { top: 31, height: 6, compactTop: 24, compactHeight: 4, radius: 3 },\n actualLabel: { top: 8, offset: 6, font: 12 },\n now: { width: 2, overhang: 2 },\n coverage: { height: 26, gap: 2, radius: 4, font: 12 },\n axis: { height: 18, font: 12 },\n name: 15,\n meta: 13,\n groupTitle: 12,\n ring: 2,\n /** How far a block's focus ring stands off it. */\n ringOffset: 1,\n /** The loading row's name bar. */\n skeletonNameRadius: 4,\n /** Where a block's text cannot be measured, one shorter than this share of the ruler says only its start on a narrow ruler. */\n narrowShare: 0.3,\n /** The shortest block a resize leaves, in hours. */\n minHours: 0.5,\n skeletonRows: 4,\n /** The hatch of a break inside a block: stripe width. */\n breakStripe: { ink: 2, gap: 3 },\n} as const;\n"],"mappings":";AAIO,IAAM,oBAAoB;AAAA;AAAA,EAE/B,YAAY;AAAA,EACZ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOL,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMd,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,OAAO,EAAE,QAAQ,IAAI,eAAe,IAAI,QAAQ,GAAG,eAAe,EAAE;AAAA,EACpE,OAAO,EAAE,KAAK,GAAG,QAAQ,IAAI,YAAY,GAAG,eAAe,IAAI,QAAQ,GAAG,UAAU,GAAG,MAAM,IAAI,SAAS,GAAG;AAAA;AAAA,EAE7G,QAAQ;AAAA,EACR,QAAQ,EAAE,KAAK,IAAI,QAAQ,GAAG,YAAY,IAAI,eAAe,GAAG,QAAQ,EAAE;AAAA,EAC1E,aAAa,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG;AAAA,EAC3C,KAAK,EAAE,OAAO,GAAG,UAAU,EAAE;AAAA,EAC7B,UAAU,EAAE,QAAQ,IAAI,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG;AAAA,EACpD,MAAM,EAAE,QAAQ,IAAI,MAAM,GAAG;AAAA,EAC7B,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,MAAM;AAAA;AAAA,EAEN,YAAY;AAAA;AAAA,EAEZ,oBAAoB;AAAA;AAAA,EAEpB,aAAa;AAAA;AAAA,EAEb,UAAU;AAAA,EACV,cAAc;AAAA;AAAA,EAEd,aAAa,EAAE,KAAK,GAAG,KAAK,EAAE;AAChC;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/AlertDialog/AlertDialog.parts.tsx"],"sourcesContent":["/**\n * The AlertDialog's action row, kept apart from the dialog shell so each stays\n * inside the complexity budget: which button is filled, where each one sits,\n * and how the row wraps.\n */\nimport type { ButtonProps } from '@mui/material/Button/index.js';\nimport Button from '@mui/material/Button/index.js';\nimport CircularProgress from '@mui/material/CircularProgress/index.js';\nimport DialogActions from '@mui/material/DialogActions/index.js';\nimport { styled, useTheme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { rem } from '../../../tokens/relative';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\nimport type { AlertDialogProps } from './AlertDialog.types';\n\n/**\n * The action row WRAPS WHOLE BUTTONS; it never breaks a label inside one. A pair\n * that did not fit side by side used to squeeze the longer label onto two\n * lines, so one button stood twice as tall as its neighbour. Now the row breaks\n * instead. `wrap-reverse` puts the LAST button — the primary, whichever\n * `emphasis` picks — on top when it stacks, the same slot it holds on the right\n * when the row fits. A pair that fits is laid out exactly as before: natural\n * widths, pushed to the right.\n *\n * `fill` — set only by `emphasis=\"cancel\"` — lets the buttons grow to share the\n * row, and so to take the full width of their line once it stacks. It is not\n * the default because growing also stretches a pair that fits, which would\n * redraw every existing dialog's footer.\n *\n * Rendered with `disableSpacing`: MUI's own spacing is a left margin on every\n * button after the first, which would indent a button that wrapped onto a line\n * of its own. The gaps below replace it, at the same 16px across.\n */\nconst StyledDialogActions = styled(DialogActions, {\n shouldForwardProp: (prop) => prop !== 'fill',\n})<{ fill: boolean }>(({ theme, fill }) => ({\n padding: theme.spacing(2, 3, 3, 3),\n flexWrap: 'wrap-reverse',\n columnGap: theme.spacing(2),\n rowGap: theme.spacing(1),\n // A 40px tap target, the floor the kit's own Button keeps (FUT-3269): MUI's\n // medium button is 37px, short of it on a phone.\n '& > .MuiButton-root': { minHeight: rem(theme, 40) },\n ...(fill && { '& > .MuiButton-root': { flexGrow: 1, minHeight: rem(theme, 40) } }),\n}));\n\nconst confirmButtonColor = (variant: AlertDialogProps['variant']): 'error' | 'primary' =>\n variant === 'destructive' ? 'error' : 'primary';\n\ninterface ButtonLook {\n variant: ButtonProps['variant'];\n color: ButtonProps['color'];\n}\n\n/**\n * How each button is drawn, by `emphasis`: the emphasised one is filled, the\n * other a NEUTRAL outline. Primary / neutral both ways round — a confirm that\n * steps down drops the variant's colour too, so the one filled button is the\n * only coloured thing in the row and the eye has a single place to land.\n */\nconst buttonLooks = (\n emphasis: AlertDialogProps['emphasis'],\n variant: AlertDialogProps['variant'],\n): { cancel: ButtonLook; confirm: ButtonLook } =>\n emphasis === 'cancel'\n ? {\n cancel: { variant: 'contained', color: 'primary' },\n confirm: { variant: 'outlined', color: 'inherit' },\n }\n : {\n cancel: { variant: 'outlined', color: 'inherit' },\n confirm: { variant: 'contained', color: confirmButtonColor(variant) },\n };\n\n/**\n * The emphasis that applies: `cancel` only while the cancel is shown. A hidden\n * cancel with the confirm stepped down would leave a dialog with no primary.\n */\nconst effectiveEmphasis = (\n emphasis: AlertDialogProps['emphasis'],\n showCancel: boolean,\n): NonNullable<AlertDialogProps['emphasis']> =>\n emphasis === 'cancel' && showCancel ? 'cancel' : 'confirm';\n\n/**\n * Whether the cancel owns focus on open: what `initialFocus` says, and when it\n * says nothing, the emphasised button — so Enter on a steered question keeps\n * the work instead of completing the loss.\n */\nconst focusesCancel = (\n initialFocus: AlertDialogProps['initialFocus'],\n emphasis: NonNullable<AlertDialogProps['emphasis']>,\n): boolean => (initialFocus ?? emphasis) === 'cancel';\n\n/** The two buttons in slot order: the emphasised one LAST, the primary slot. */\nconst inSlotOrder = (\n emphasis: AlertDialogProps['emphasis'],\n cancel: React.ReactNode,\n confirm: React.ReactNode,\n): React.ReactNode[] => (emphasis === 'cancel' ? [confirm, cancel] : [cancel, confirm]);\n\n/**\n * Action row: the optional cancel button and the (variant-coloured) confirm,\n * with the emphasised one LAST — the primary slot, on the right or, once the\n * row stacks, on top. DOM order is the tab order, so it follows the same rule.\n */\nexport function AlertDialogFooter({\n variant,\n cancelText = EN_US_UI_LABELS.alertDialog.cancel,\n confirmText = EN_US_UI_LABELS.alertDialog.confirm,\n showCancel = true,\n loading = false,\n confirmDisabled = false,\n initialFocus,\n emphasis: asked,\n onCancel,\n onConfirm,\n dataTestId,\n}: Pick<\n AlertDialogProps,\n | 'variant'\n | 'cancelText'\n | 'confirmText'\n | 'showCancel'\n | 'loading'\n | 'confirmDisabled'\n | 'initialFocus'\n | 'emphasis'\n> & {\n onCancel: () => void;\n onConfirm: () => void;\n dataTestId: string;\n}): React.ReactElement {\n const theme = useTheme();\n const emphasis = effectiveEmphasis(asked, showCancel);\n const look = buttonLooks(emphasis, variant);\n const cancelFocused = focusesCancel(initialFocus, emphasis);\n const cancel = showCancel && (\n <Button\n key=\"cancel\"\n onClick={onCancel}\n variant={look.cancel.variant}\n color={look.cancel.color}\n disabled={loading}\n autoFocus={cancelFocused}\n data-testid={`${dataTestId}-cancel-button`}\n >\n {cancelText}\n </Button>\n );\n const confirm = (\n <Button\n key=\"confirm\"\n onClick={onConfirm}\n variant={look.confirm.variant}\n color={look.confirm.color}\n disabled={confirmDisabled || loading}\n startIcon={\n loading ? (\n <CircularProgress\n size={rem(theme, 16)}\n color=\"inherit\"\n data-testid={`${dataTestId}-loading-spinner`}\n />\n ) : undefined\n }\n autoFocus={!cancelFocused}\n data-testid={`${dataTestId}-confirm-button`}\n >\n {confirmText}\n </Button>\n );\n return (\n <StyledDialogActions\n disableSpacing\n fill={emphasis === 'cancel'}\n data-testid={`${dataTestId}-actions`}\n >\n {inSlotOrder(emphasis, cancel, confirm)}\n </StyledDialogActions>\n );\n}\n"],"mappings":";;;;;;;;AAMA,OAAO,YAAY;AACnB,OAAO,sBAAsB;AAC7B,OAAO,mBAAmB;AAC1B,SAAS,QAAQ,gBAAgB;AAmI7B;AAzGJ,IAAM,sBAAsB,OAAO,eAAe;AAAA,EAChD,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC,EAAqB,CAAC,EAAE,OAAO,KAAK,OAAO;AAAA,EAC1C,SAAS,MAAM,QAAQ,GAAG,GAAG,GAAG,CAAC;AAAA,EACjC,UAAU;AAAA,EACV,WAAW,MAAM,QAAQ,CAAC;AAAA,EAC1B,QAAQ,MAAM,QAAQ,CAAC;AAAA;AAAA;AAAA,EAGvB,uBAAuB,EAAE,WAAW,IAAI,OAAO,EAAE,EAAE;AAAA,EACnD,GAAI,QAAQ,EAAE,uBAAuB,EAAE,UAAU,GAAG,WAAW,IAAI,OAAO,EAAE,EAAE,EAAE;AAClF,EAAE;AAEF,IAAM,qBAAqB,CAAC,YAC1B,YAAY,gBAAgB,UAAU;AAaxC,IAAM,cAAc,CAClB,UACA,YAEA,aAAa,WACT;AAAA,EACE,QAAQ,EAAE,SAAS,aAAa,OAAO,UAAU;AAAA,EACjD,SAAS,EAAE,SAAS,YAAY,OAAO,UAAU;AACnD,IACA;AAAA,EACE,QAAQ,EAAE,SAAS,YAAY,OAAO,UAAU;AAAA,EAChD,SAAS,EAAE,SAAS,aAAa,OAAO,mBAAmB,OAAO,EAAE;AACtE;AAMN,IAAM,oBAAoB,CACxB,UACA,eAEA,aAAa,YAAY,aAAa,WAAW;AAOnD,IAAM,gBAAgB,CACpB,cACA,cACa,gBAAgB,cAAc;AAG7C,IAAM,cAAc,CAClB,UACA,QACA,YACuB,aAAa,WAAW,CAAC,SAAS,MAAM,IAAI,CAAC,QAAQ,OAAO;AAO9E,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA,aAAa,gBAAgB,YAAY;AAAA,EACzC,cAAc,gBAAgB,YAAY;AAAA,EAC1C,aAAa;AAAA,EACb,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA;AACF,GAcuB;AACrB,QAAM,QAAQ,SAAS;AACvB,QAAM,WAAW,kBAAkB,OAAO,UAAU;AACpD,QAAM,OAAO,YAAY,UAAU,OAAO;AAC1C,QAAM,gBAAgB,cAAc,cAAc,QAAQ;AAC1D,QAAM,SAAS,cACb;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,OAAO;AAAA,MACrB,OAAO,KAAK,OAAO;AAAA,MACnB,UAAU;AAAA,MACV,WAAW;AAAA,MACX,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IARG;AAAA,EASN;AAEF,QAAM,UACJ;AAAA,IAAC;AAAA;AAAA,MAEC,SAAS;AAAA,MACT,SAAS,KAAK,QAAQ;AAAA,MACtB,OAAO,KAAK,QAAQ;AAAA,MACpB,UAAU,mBAAmB;AAAA,MAC7B,WACE,UACE;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,IAAI,OAAO,EAAE;AAAA,UACnB,OAAM;AAAA,UACN,eAAa,GAAG,UAAU;AAAA;AAAA,MAC5B,IACE;AAAA,MAEN,WAAW,CAAC;AAAA,MACZ,eAAa,GAAG,UAAU;AAAA,MAEzB;AAAA;AAAA,IAjBG;AAAA,EAkBN;AAEF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,gBAAc;AAAA,MACd,MAAM,aAAa;AAAA,MACnB,eAAa,GAAG,UAAU;AAAA,MAEzB,sBAAY,UAAU,QAAQ,OAAO;AAAA;AAAA,EACxC;AAEJ;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.tsx"],"sourcesContent":["'use client';\n\nimport Box from '@mui/material/Box/index.js';\nimport type React from 'react';\n\nimport { resolveLabels } from '../../../utils/resolve-labels';\nimport { SR_ONLY_SX } from '../ScheduleGrid/ScheduleGrid.styles';\nimport { useAnnouncer } from '../ScheduleGrid/useAnnouncer';\nimport { handleBlockKey, keyCreateSpan, type RulerAbilities, type RulerScale } from './DayRuler.keyboard';\nimport { EN_US_DAY_RULER_LABELS } from './DayRuler.en-US';\nimport { DAY_RULER_METRICS as M } from './DayRuler.metrics';\nimport { Axis, Coverage, GroupFooter, RulerRow, type RowContext } from './DayRuler.parts';\nimport { groupTitleSx, rootSx, rowSx, skeletonNameSx, skeletonTrackSx } from './DayRuler.styles';\nimport type { DayRulerProps, DayRulerRow } from './DayRuler.types';\nimport { useRulerDrag } from './useRulerDrag';\n\n/** The rows, grouped under a heading each time `row.group` changes. */\nfunction grouped(rows: readonly DayRulerRow[]): { title?: string; rows: DayRulerRow[] }[] {\n const out: { title?: string; rows: DayRulerRow[] }[] = [];\n for (const row of rows) {\n const last = out[out.length - 1];\n if (last && last.title === row.group) last.rows.push(row);\n else out.push({ title: row.group, rows: [row] });\n }\n return out;\n}\n\nfunction scaleOf(props: DayRulerProps): RulerScale {\n return {\n from: props.from ?? 6,\n to: props.to ?? 26,\n snap: (props.snapMinutes ?? 15) / 60,\n createHours: props.createHours ?? 4,\n tickHours: props.tickHours ?? 4,\n };\n}\n\nfunction abilitiesOf(props: DayRulerProps): RulerAbilities {\n const open = !props.readOnly && !props.loading;\n return { create: open && Boolean(props.onCreate), move: open && Boolean(props.onMove), resize: open && Boolean(props.onResize) };\n}\n\n/** A group's lines under its rows, when the host gives any (`groupFooter`). */\nfunction FooterOf({ props, group, ctx }: { props: DayRulerProps; group: string | undefined; ctx: RowContext }): React.JSX.Element | null {\n const rows = props.groupFooter?.(group);\n if (!rows || rows.length === 0) return null;\n const marked = props.labels?.footerMarked ?? EN_US_DAY_RULER_LABELS.footerMarked;\n return <GroupFooter rows={rows} scale={ctx.scale} testId={ctx.testId} marked={marked} />;\n}\n\n/** The groups and their rows — or the skeleton, the host's error, or the host's empty state. */\nfunction RulerBody({ props, ctx }: { props: DayRulerProps; ctx: RowContext }): React.JSX.Element {\n if (props.error) return <>{props.error}</>;\n if (props.loading) {\n return (\n <>\n {Array.from({ length: M.skeletonRows }, (_, index) => (\n <Box key={index} sx={rowSx} aria-hidden data-testid={`${ctx.testId}-loading`}>\n <Box sx={skeletonNameSx} />\n <Box sx={skeletonTrackSx} />\n </Box>\n ))}\n </>\n );\n }\n if (props.rows.length === 0) return <>{props.empty ?? null}</>;\n return (\n <>\n {grouped(props.rows).map((group, index) => (\n <Box key={`${index}-${group.title ?? ''}`} role=\"list\" aria-label={group.title}>\n {group.title ? (\n <Box component=\"p\" sx={groupTitleSx} aria-hidden>\n {group.title}\n </Box>\n ) : null}\n {group.rows.map((row) => (\n <RulerRow key={row.id} row={row} ctx={ctx} />\n ))}\n <FooterOf props={props} group={group.title} ctx={ctx} />\n </Box>\n ))}\n </>\n );\n}\n\n/**\n * One day as an hour ruler per row — who is on the escala when, and who is\n * really on shift (FUT-3825). Drag on an empty stretch to create (a click\n * alone is `createHours`), drag a block to move it, drag its ends to change\n * them; every hour snaps to `snapMinutes`. On a narrow ruler (a phone) each row\n * stacks and the blocks are tap-only: touch scrolls and never drags.\n *\n * The ruler reports gestures; hours, limits and refusals are the host's.\n */\nexport function DayRuler(props: DayRulerProps): React.JSX.Element {\n const { now, onCreate, onMove, onResize } = props;\n const testId = props.dataTestId ?? 'day-ruler';\n const labels = resolveLabels(EN_US_DAY_RULER_LABELS, props.labels);\n const scale = scaleOf(props);\n const can = abilitiesOf(props);\n const dragApi = useRulerDrag(scale, { onCreate, onMove, onResize });\n const { text: announcement, say } = useAnnouncer();\n\n const ctx: RowContext = {\n scale,\n now,\n can,\n drag: dragApi.drag,\n dragApi,\n onBlockClick: props.onBlockClick,\n onKeyCreate: (row) => {\n const [start, end] = keyCreateSpan(scale, now, props.createStart?.(row.id));\n onCreate?.(row.id, start, end);\n },\n onBlockKey: (event, block) => handleBlockKey(event, block, { scale, can, onMove, onResize, labels, say }),\n createLabel: labels.createTrack,\n testId,\n };\n\n return (\n <Box\n sx={rootSx(props.rows.some((row) => row.actions !== undefined && row.actions !== null))}\n data-testid={testId}\n role=\"region\"\n aria-label={props['aria-label']}\n aria-busy={props.loading || undefined}\n aria-description={props.loading ? labels.loading : undefined}\n >\n {props.coverage && props.coverage.length > 0 ? (\n <Coverage coverage={props.coverage} label={props.coverageLabel} scale={scale} testId={testId} />\n ) : null}\n <Axis scale={scale} testId={testId} />\n <RulerBody props={props} ctx={ctx} />\n <Box sx={SR_ONLY_SX} aria-live=\"polite\" role=\"status\" data-testid={`${testId}-live`}>\n {announcement}\n </Box>\n </Box>\n );\n}\n"],"mappings":"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","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/DayRuler/day-ruler-model.ts"],"sourcesContent":["import type { RulerHour } from './DayRuler.types';\n\n/**\n * THE RULER'S ARITHMETIC, as pure functions (FUT-3825): snapping, clamping,\n * positions and the HH:MM the ruler writes. Hours are from the day's\n * midnight; past 24 is the next morning.\n */\n\n/** `h` on the `snap`-hour grid (0.25 for 15 minutes). */\nexport function snapTo(h: RulerHour, snap: number): RulerHour {\n return snap > 0 ? Math.round(h / snap) * snap : h;\n}\n\nexport function clamp(h: RulerHour, from: RulerHour, to: RulerHour): RulerHour {\n return Math.min(to, Math.max(from, h));\n}\n\n/** The hour under `x` on a track whose box starts at `left` and is `width` wide, snapped and clamped. */\nexport function hourAt(x: number, left: number, width: number, from: RulerHour, to: RulerHour, snap: number): RulerHour {\n const share = width > 0 ? (x - left) / width : 0;\n return clamp(snapTo(from + share * (to - from), snap), from, to);\n}\n\n/** Where `h` sits along the ruler, 0..100 (%), clamped to it. */\nexport function percentOf(h: RulerHour, from: RulerHour, to: RulerHour): number {\n return ((clamp(h, from, to) - from) / (to - from)) * 100;\n}\n\n/** \"20:45\"; 26 → \"02:00\", 24 → \"00:00\". */\nexport function formatHour(h: RulerHour): string {\n const minutes = Math.round(h * 60);\n const hh = Math.floor(minutes / 60) % 24;\n const mm = minutes % 60;\n return `${String(hh).padStart(2, '0')}:${String(mm).padStart(2, '0')}`;\n}\n\n/** \"20:45–00:45\". */\nexport function formatRange(start: RulerHour, end: RulerHour): string {\n return `${formatHour(start)}–${formatHour(end)}`;\n}\n\n/** A block slid by `delta`, keeping its length and staying on the ruler. */\nexport function moved(start: RulerHour, end: RulerHour, delta: number, from: RulerHour, to: RulerHour): [RulerHour, RulerHour] {\n const length = end - start;\n const next = clamp(start + delta, from, to - length);\n return [next, next + length];\n}\n\n/** A block whose `side` was dragged to `h`, never shorter than `minHours`, never off the ruler. */\nexport function resized(\n start: RulerHour,\n end: RulerHour,\n side: 'start' | 'end',\n h: RulerHour,\n minHours: number,\n from: RulerHour,\n to: RulerHour,\n): [RulerHour, RulerHour] {\n if (side === 'start') return [clamp(Math.min(h, end - minHours), from, to), end];\n return [start, clamp(Math.max(h, start + minHours), from, to)];\n}\n\n/** A click alone (shorter than `minHours`) becomes `createHours` from where it was pressed. */\nexport function createdSpan(\n a: RulerHour,\n b: RulerHour,\n minHours: number,\n createHours: number,\n to: RulerHour,\n): [RulerHour, RulerHour] {\n const start = Math.min(a, b);\n const end = Math.max(a, b);\n if (end - start >= minHours) return [start, end];\n return [start, Math.min(to, start + createHours)];\n}\n\n/** The axis labels: every `step` hours from `from` to `to`, both ends included. */\nexport function ticksOf(from: RulerHour, to: RulerHour, step: number): RulerHour[] {\n const out: RulerHour[] = [];\n if (step <= 0) return [from, to];\n for (let h = from; h <= to + 1e-9; h += step) out.push(h);\n return out;\n}\n"],"mappings":";AASO,SAAS,OAAO,GAAc,MAAyB;AAC5D,SAAO,OAAO,IAAI,KAAK,MAAM,IAAI,IAAI,IAAI,OAAO;AAClD;AAEO,SAAS,MAAM,GAAc,MAAiB,IAA0B;AAC7E,SAAO,KAAK,IAAI,IAAI,KAAK,IAAI,MAAM,CAAC,CAAC;AACvC;AAGO,SAAS,OAAO,GAAW,MAAc,OAAe,MAAiB,IAAe,MAAyB;AACtH,QAAM,QAAQ,QAAQ,KAAK,IAAI,QAAQ,QAAQ;AAC/C,SAAO,MAAM,OAAO,OAAO,SAAS,KAAK,OAAO,IAAI,GAAG,MAAM,EAAE;AACjE;AAGO,SAAS,UAAU,GAAc,MAAiB,IAAuB;AAC9E,UAAS,MAAM,GAAG,MAAM,EAAE,IAAI,SAAS,KAAK,QAAS;AACvD;AAGO,SAAS,WAAW,GAAsB;AAC/C,QAAM,UAAU,KAAK,MAAM,IAAI,EAAE;AACjC,QAAM,KAAK,KAAK,MAAM,UAAU,EAAE,IAAI;AACtC,QAAM,KAAK,UAAU;AACrB,SAAO,GAAG,OAAO,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,OAAO,EAAE,EAAE,SAAS,GAAG,GAAG,CAAC;AACtE;AAGO,SAAS,YAAY,OAAkB,KAAwB;AACpE,SAAO,GAAG,WAAW,KAAK,CAAC,SAAI,WAAW,GAAG,CAAC;AAChD;AAGO,SAAS,MAAM,OAAkB,KAAgB,OAAe,MAAiB,IAAuC;AAC7H,QAAM,SAAS,MAAM;AACrB,QAAM,OAAO,MAAM,QAAQ,OAAO,MAAM,KAAK,MAAM;AACnD,SAAO,CAAC,MAAM,OAAO,MAAM;AAC7B;AAGO,SAAS,QACd,OACA,KACA,MACA,GACA,UACA,MACA,IACwB;AACxB,MAAI,SAAS,QAAS,QAAO,CAAC,MAAM,KAAK,IAAI,GAAG,MAAM,QAAQ,GAAG,MAAM,EAAE,GAAG,GAAG;AAC/E,SAAO,CAAC,OAAO,MAAM,KAAK,IAAI,GAAG,QAAQ,QAAQ,GAAG,MAAM,EAAE,CAAC;AAC/D;AAGO,SAAS,YACd,GACA,GACA,UACA,aACA,IACwB;AACxB,QAAM,QAAQ,KAAK,IAAI,GAAG,CAAC;AAC3B,QAAM,MAAM,KAAK,IAAI,GAAG,CAAC;AACzB,MAAI,MAAM,SAAS,SAAU,QAAO,CAAC,OAAO,GAAG;AAC/C,SAAO,CAAC,OAAO,KAAK,IAAI,IAAI,QAAQ,WAAW,CAAC;AAClD;AAGO,SAAS,QAAQ,MAAiB,IAAe,MAA2B;AACjF,QAAM,MAAmB,CAAC;AAC1B,MAAI,QAAQ,EAAG,QAAO,CAAC,MAAM,EAAE;AAC/B,WAAS,IAAI,MAAM,KAAK,KAAK,MAAM,KAAK,KAAM,KAAI,KAAK,CAAC;AACxD,SAAO;AACT;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/DayRuler/DayRuler.styles.ts"],"sourcesContent":["import { alpha, type CSSObject, type SxProps, type Theme } from '@mui/material/styles/index.js';\n\nimport { FIELD_BORDER_WIDTH } from '../../../tokens/field-height.core';\nimport { rem, sxRem } from '../../../tokens/relative';\nimport { actualBarColor, blockToneStyles, breakHatch, signalInk } from '../ScheduleGrid/schedule-tones';\nimport type { ScheduleBlockTone } from '../ScheduleGrid/ScheduleGrid.types';\nimport { DAY_RULER_METRICS as M } from './DayRuler.metrics';\n\n/** The container narrow rows answer to (container queries, never media queries). */\n/**\n * `--dr-actions`: the actions column, 220px when any row has actions and\n * nothing when none does (no empty column at the end of every row).\n */\nexport function rootSx(hasActions: boolean): SxProps<Theme> {\n return (theme: Theme) => ({\n containerType: 'inline-size',\n minWidth: 0,\n width: '100%',\n userSelect: 'none',\n '--dr-actions': hasActions ? rem(theme, M.sideColumn) : '0%',\n });\n}\n\n/** `@container` below which a row stacks (the coverage and axis rows go full width). Bounds are \"from px up\". */\nfunction compact(theme: Theme): string {\n return `@container (width < ${rem(theme, M.compactBelow)})`;\n}\n\n/** `@container` below which the pane is phone-sized: no coverage row, no axis. Bounds are \"from px up\". */\nfunction phone(theme: Theme): string {\n return `@container (width < ${rem(theme, M.phoneBelow)})`;\n}\n\n/** Name · track · actions, the coverage row and the axis row share these columns on a computer. */\nexport const lineSx: SxProps<Theme> = (theme: Theme) => ({\n display: 'grid',\n gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,\n columnGap: rem(theme, M.gap),\n alignItems: 'center',\n // Stacked: across the full width, like the tracks; the label above the counts.\n [compact(theme)]: {\n gridTemplateColumns: 'minmax(0, 1fr)',\n rowGap: rem(theme, M.coverage.gap),\n '& > span:empty': { display: 'none' },\n },\n [phone(theme)]: { display: 'none' },\n});\n\nexport const coverageLabelSx: SxProps<Theme> = { fontSize: sxRem(M.meta), color: 'text.secondary' };\n\nexport function coverageSx(hours: number): SxProps<Theme> {\n return (theme: Theme) => ({\n display: 'grid',\n gridTemplateColumns: `repeat(${hours}, minmax(0, 1fr))`,\n gap: rem(theme, M.coverage.gap),\n height: rem(theme, M.coverage.height),\n });\n}\n\n/**\n * How strongly a staffed hour is filled: the prototype's tonal success step, deeper with each\n * person on the escala (0.18 + 0.09 per person, at most 0.85). An empty hour has none.\n */\nexport function coverageStrength(count: number): number {\n if (count <= 0) return 0;\n return Math.min(0.85, 0.18 + count * 0.09);\n}\n\nexport function coverageCellSx(count: number): SxProps<Theme> {\n return (theme: Theme) => {\n const strength = coverageStrength(count);\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: rem(theme, M.coverage.font),\n borderRadius: rem(theme, M.coverage.radius),\n color: theme.palette.text.primary,\n // A tonal fill, as the prototype's coverage line draws it — never an outline (FUT-3831). It is\n // the success colour over the page, so a staffed hour is LIGHTER than an empty one in dark mode\n // and plainly green in light, where the soft-signal blend read as the empty grey. The hairline\n // stays transparent so a count never shifts its cell.\n backgroundColor: strength > 0 ? alpha(theme.palette.success.main, strength) : theme.palette.action.hover,\n border: '1px solid transparent',\n minWidth: 0,\n overflow: 'hidden',\n };\n };\n}\n\nexport const axisSx: SxProps<Theme> = (theme: Theme) => ({\n position: 'relative',\n height: rem(theme, M.axis.height),\n fontSize: rem(theme, M.axis.font),\n color: theme.palette.text.secondary,\n mt: 0.5,\n '& > span': { position: 'absolute', transform: 'translateX(-50%)', whiteSpace: 'nowrap' },\n});\n\nexport const groupTitleSx: SxProps<Theme> = {\n fontSize: sxRem(M.groupTitle),\n letterSpacing: '0.05em',\n textTransform: 'uppercase',\n color: 'text.secondary',\n fontWeight: 500,\n pt: 1.5,\n pb: 0.5,\n m: 0,\n};\n\n/**\n * One person's row. A computer: name · track · actions on one line. A narrow\n * ruler (a phone): name and actions on top, the track under them, full width.\n */\nexport const rowSx: SxProps<Theme> = (theme: Theme) => ({\n display: 'grid',\n gridTemplateColumns: `${rem(theme, M.sideColumn)} minmax(0, 1fr) var(--dr-actions)`,\n gridTemplateAreas: '\"who track actions\"',\n columnGap: rem(theme, M.gap),\n alignItems: 'center',\n py: rem(theme, M.rowPaddingY),\n borderBottom: `1px solid ${theme.palette.divider}`,\n [compact(theme)]: {\n gridTemplateColumns: 'minmax(0, 1fr) auto',\n gridTemplateAreas: '\"who actions\" \"track track\"',\n rowGap: theme.spacing(1),\n py: theme.spacing(1.5),\n },\n});\n\nexport const whoSx: SxProps<Theme> = { gridArea: 'who', minWidth: 0 };\n\nexport const actionsSx: SxProps<Theme> = {\n gridArea: 'actions',\n display: 'flex',\n gap: 1,\n alignItems: 'center',\n justifyContent: 'flex-end',\n flexWrap: 'wrap',\n minWidth: 0,\n};\n\n/** A break inside a block: a hatched band across its height, under its text. `span` is in % of the block. */\nexport function breakSx(span: Span): SxProps<Theme> {\n return (theme: Theme) => ({\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: `${span.at}%`,\n width: `${span.share}%`,\n background: breakHatch(theme, rem(theme, M.breakStripe.ink), rem(theme, M.breakStripe.ink + M.breakStripe.gap)),\n pointerEvents: 'none',\n // Where the band meets an end of the block it takes the block's rounding:\n // on a phone the block does not clip (its hit area reaches past it).\n ...(span.at <= 0.01 ? { borderTopLeftRadius: 'inherit', borderBottomLeftRadius: 'inherit' } : {}),\n ...(span.at + span.share >= 99.99 ? { borderTopRightRadius: 'inherit', borderBottomRightRadius: 'inherit' } : {}),\n });\n}\n\n/** The hour lines: one every `every` hours of a `hours`-long ruler. */\nfunction hourLines(theme: Theme, hours: number, every: number): string {\n const line = theme.palette.divider;\n const step = `${(100 * every) / hours}%`;\n const hairline = `${FIELD_BORDER_WIDTH}px`;\n return `repeating-linear-gradient(to right, ${line} 0, ${line} ${hairline}, transparent ${hairline}, transparent ${step})`;\n}\n\nexport function trackSx(opts: { hours: number; tickHours: number; interactive: boolean }): SxProps<Theme> {\n return (theme: Theme) => ({\n gridArea: 'track',\n position: 'relative',\n height: rem(theme, M.track.height),\n borderRadius: rem(theme, M.track.radius),\n backgroundColor: theme.palette.action.hover,\n backgroundImage: hourLines(theme, opts.hours, 1),\n cursor: opts.interactive ? 'crosshair' : 'default',\n touchAction: 'auto',\n outline: 'none',\n '&:focus-visible': { boxShadow: `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` },\n [compact(theme)]: {\n height: rem(theme, M.track.compactHeight),\n borderRadius: rem(theme, M.track.compactRadius),\n backgroundImage: hourLines(theme, opts.hours, opts.tickHours),\n },\n });\n}\n\n/** Where a bar starts and how long it is, both in % of the track. */\nexport interface Span {\n at: number;\n share: number;\n}\n\nexport function blockSx(tone: ScheduleBlockTone, span: Span, opts: { selected: boolean; movable: boolean }): SxProps<Theme> {\n return (theme: Theme): CSSObject => ({\n ...blockToneStyles(theme, tone, true),\n position: 'absolute',\n left: `${span.at}%`,\n width: `${span.share}%`,\n top: rem(theme, M.block.top),\n height: rem(theme, M.block.height),\n boxSizing: 'border-box',\n borderRadius: rem(theme, M.block.radius),\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: `0 ${rem(theme, M.block.paddingX)}`,\n margin: 0,\n font: 'inherit',\n fontSize: rem(theme, M.block.font),\n fontWeight: 500,\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n cursor: opts.movable ? 'grab' : 'pointer',\n boxShadow: opts.selected ? `0 0 0 ${rem(theme, M.ring)} ${theme.palette.primary.main}` : 'none',\n '&:focus-visible': { outline: `${rem(theme, M.ring)} solid ${theme.palette.primary.main}`, outlineOffset: rem(theme, M.ringOffset) },\n '& [data-dr-text]': { position: 'relative', overflow: 'hidden', textOverflow: 'ellipsis', minWidth: 0 },\n '& [data-dr-text=\"short\"]': { display: 'none' },\n [compact(theme)]: {\n top: rem(theme, M.block.compactTop),\n height: rem(theme, M.block.compactHeight),\n // A 40px hit area around the 20px bar, the look unchanged: the text cuts\n // itself (its spans ellipsize), so the block need not clip.\n overflow: 'visible',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n left: 0,\n right: 0,\n top: '50%',\n height: rem(theme, M.block.hitArea),\n transform: 'translateY(-50%)',\n },\n '&[data-narrow] [data-dr-text=\"full\"]': { display: 'none' },\n '&[data-narrow] [data-dr-text=\"short\"]': { display: 'inline' },\n },\n });\n}\n\nexport function handleSx(side: 'l' | 'r'): SxProps<Theme> {\n return (theme: Theme) => ({\n position: 'absolute',\n top: 0,\n bottom: 0,\n [side === 'l' ? 'left' : 'right']: 0,\n width: rem(theme, M.handle),\n cursor: 'ew-resize',\n });\n}\n\nexport function actualSx(span: Span): SxProps<Theme> {\n return (theme: Theme) => ({\n position: 'absolute',\n left: `${span.at}%`,\n width: `${span.share}%`,\n top: rem(theme, M.actual.top),\n height: rem(theme, M.actual.height),\n borderRadius: rem(theme, M.actual.radius),\n backgroundColor: actualBarColor(theme),\n pointerEvents: 'none',\n [compact(theme)]: { top: rem(theme, M.actual.compactTop), height: rem(theme, M.actual.compactHeight) },\n });\n}\n\nexport function actualLabelSx(left: number): SxProps<Theme> {\n return (theme: Theme) => ({\n position: 'absolute',\n left: `calc(${left}% + ${rem(theme, M.actualLabel.offset)})`,\n top: rem(theme, M.actualLabel.top),\n fontSize: rem(theme, M.actualLabel.font),\n color: theme.palette.text.secondary,\n whiteSpace: 'nowrap',\n pointerEvents: 'none',\n [compact(theme)]: { display: 'none' },\n });\n}\n\nexport function nowSx(left: number): SxProps<Theme> {\n return (theme: Theme) => ({\n position: 'absolute',\n left: `${left}%`,\n top: rem(theme, -M.now.overhang),\n bottom: rem(theme, -M.now.overhang),\n width: rem(theme, M.now.width),\n backgroundColor: theme.palette.primary.main,\n pointerEvents: 'none',\n });\n}\n\nexport const skeletonTrackSx: SxProps<Theme> = (theme: Theme) => ({\n gridArea: 'track',\n height: rem(theme, M.track.height),\n borderRadius: rem(theme, M.track.radius),\n backgroundColor: theme.palette.action.hover,\n});\n\nexport const skeletonNameSx: SxProps<Theme> = (theme: Theme) => ({\n gridArea: 'who',\n height: rem(theme, M.name),\n width: '60%',\n borderRadius: rem(theme, M.skeletonNameRadius),\n backgroundColor: theme.palette.action.hover,\n});\n\n/**\n * A marked footer's words (FUT-3882): the warning ink deepened until it reads\n * at 4.5:1 on the page — `warning.main` is 3.1:1 on white. The outline keeps\n * `warning.main`: a non-text mark needs 3:1.\n */\nexport function footerInk(theme: Theme, marked: boolean, plain: string): string {\n return marked ? signalInk(theme, 'warning', theme.palette.background.default) : plain;\n}\n\n/** A group's count line (FUT-3882): plain counts on the hours' columns, a marked hour outlined in the warning ink. */\nexport function footerCellSx(marked: boolean): SxProps<Theme> {\n return (theme: Theme) => ({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: rem(theme, M.coverage.font),\n borderRadius: rem(theme, M.coverage.radius),\n color: footerInk(theme, marked, theme.palette.text.primary),\n fontWeight: marked ? 500 : 400,\n // The hairline is always there, transparent when unmarked, so a mark never shifts a count.\n border: `1px solid ${marked ? theme.palette.warning.main : 'transparent'}`,\n minWidth: 0,\n overflow: 'hidden',\n });\n}\n\n/**\n * A footer line's sentence; when the host marks it (\"Faltam 2, 20h–22h\"), in\n * the readable warning ink with a warning bar before it — a shape, so colour\n * is never the only signal.\n */\nexport function footerNoteSx(marked: boolean): SxProps<Theme> {\n return (theme: Theme) => ({\n fontSize: rem(theme, M.meta),\n color: footerInk(theme, marked, theme.palette.text.secondary),\n fontWeight: marked ? 500 : 400,\n ...(marked ? { borderLeft: `${rem(theme, 3)} solid ${theme.palette.warning.main}`, paddingLeft: rem(theme, 6) } : {}),\n });\n}\n\n/** A group's trend line: as tall as the coverage row, drawn in the primary colour. */\nexport const trendSx: SxProps<Theme> = (theme: Theme) => ({\n display: 'block',\n width: '100%',\n height: rem(theme, M.coverage.height + M.coverage.height / 2),\n color: theme.palette.primary.main,\n overflow: 'visible',\n});\n"],"mappings":"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","names":[]}
|
package/dist/chunk-YMYJO2CZ.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
// src/components/data-display/DayRuler/useTextFits.ts
|
|
2
|
-
import { useLayoutEffect, useState } from "react";
|
|
3
|
-
function useTextFits(block, text, fallback) {
|
|
4
|
-
const [fits, setFits] = useState(fallback);
|
|
5
|
-
useLayoutEffect(() => {
|
|
6
|
-
const el = block.current;
|
|
7
|
-
if (!el || typeof ResizeObserver === "undefined") return void 0;
|
|
8
|
-
const measure = () => {
|
|
9
|
-
const full = el.querySelector('[data-dr-text="full"]');
|
|
10
|
-
if (!full) return;
|
|
11
|
-
const shown = full.style.display;
|
|
12
|
-
full.style.display = "inline";
|
|
13
|
-
const range = el.ownerDocument.createRange();
|
|
14
|
-
range.selectNodeContents(full);
|
|
15
|
-
const width = range.getBoundingClientRect().width;
|
|
16
|
-
full.style.display = shown;
|
|
17
|
-
const style = getComputedStyle(el);
|
|
18
|
-
const room = el.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);
|
|
19
|
-
if (room > 0) setFits(width <= room + 0.5);
|
|
20
|
-
};
|
|
21
|
-
measure();
|
|
22
|
-
const observer = new ResizeObserver(measure);
|
|
23
|
-
observer.observe(el);
|
|
24
|
-
return () => observer.disconnect();
|
|
25
|
-
}, [block, text]);
|
|
26
|
-
return fits;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export {
|
|
30
|
-
useTextFits
|
|
31
|
-
};
|
|
32
|
-
//# sourceMappingURL=chunk-YMYJO2CZ.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/DayRuler/useTextFits.ts"],"sourcesContent":["import type * as React from 'react';\nimport { useLayoutEffect, useState } from 'react';\n\n/**\n * Whether a block's full text fits it, by pixels (FUT-3825): the full text's\n * own width against the room the block leaves it, re-read whenever the block\n * is resized. A wide block on a narrow ruler keeps \"18:00–23:00\"; only one too\n * short for it says its start.\n *\n * The full text is measured with its span shown for the measurement alone\n * (synchronously, so nothing is painted), even while the short text stands in\n * for it. Where nothing can be measured (no `ResizeObserver`) it answers\n * `fallback`.\n */\nexport function useTextFits(block: React.RefObject<HTMLElement | null>, text: string, fallback: boolean): boolean {\n const [fits, setFits] = useState(fallback);\n\n useLayoutEffect(() => {\n const el = block.current;\n if (!el || typeof ResizeObserver === 'undefined') return undefined;\n const measure = (): void => {\n const full = el.querySelector<HTMLElement>('[data-dr-text=\"full\"]');\n if (!full) return;\n const shown = full.style.display;\n full.style.display = 'inline';\n const range = el.ownerDocument.createRange();\n range.selectNodeContents(full);\n const width = range.getBoundingClientRect().width;\n full.style.display = shown;\n const style = getComputedStyle(el);\n const room = el.clientWidth - Number.parseFloat(style.paddingLeft) - Number.parseFloat(style.paddingRight);\n if (room > 0) setFits(width <= room + 0.5);\n };\n measure();\n const observer = new ResizeObserver(measure);\n observer.observe(el);\n return () => observer.disconnect();\n }, [block, text]);\n\n return fits;\n}\n"],"mappings":";AACA,SAAS,iBAAiB,gBAAgB;AAanC,SAAS,YAAY,OAA4C,MAAc,UAA4B;AAChH,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,QAAQ;AAEzC,kBAAgB,MAAM;AACpB,UAAM,KAAK,MAAM;AACjB,QAAI,CAAC,MAAM,OAAO,mBAAmB,YAAa,QAAO;AACzD,UAAM,UAAU,MAAY;AAC1B,YAAM,OAAO,GAAG,cAA2B,uBAAuB;AAClE,UAAI,CAAC,KAAM;AACX,YAAM,QAAQ,KAAK,MAAM;AACzB,WAAK,MAAM,UAAU;AACrB,YAAM,QAAQ,GAAG,cAAc,YAAY;AAC3C,YAAM,mBAAmB,IAAI;AAC7B,YAAM,QAAQ,MAAM,sBAAsB,EAAE;AAC5C,WAAK,MAAM,UAAU;AACrB,YAAM,QAAQ,iBAAiB,EAAE;AACjC,YAAM,OAAO,GAAG,cAAc,OAAO,WAAW,MAAM,WAAW,IAAI,OAAO,WAAW,MAAM,YAAY;AACzG,UAAI,OAAO,EAAG,SAAQ,SAAS,OAAO,GAAG;AAAA,IAC3C;AACA,YAAQ;AACR,UAAM,WAAW,IAAI,eAAe,OAAO;AAC3C,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,OAAO,IAAI,CAAC;AAEhB,SAAO;AACT;","names":[]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/data-display/AlertDialog/AlertDialog.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close';\nimport Error from '@mui/icons-material/Error';\nimport Info from '@mui/icons-material/Info';\nimport Dialog from '@mui/material/Dialog/index.js';\nimport DialogContent from '@mui/material/DialogContent/index.js';\nimport DialogContentText from '@mui/material/DialogContentText/index.js';\nimport DialogTitle from '@mui/material/DialogTitle/index.js';\nimport IconButton from '@mui/material/IconButton/index.js';\nimport Typography from '@mui/material/Typography/index.js';\nimport { alpha, keyframes, styled } from '@mui/material/styles/index.js';\nimport type { Theme } from '@mui/material/styles/index.js';\nimport React from 'react';\n\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\nimport { neutralTones } from '../../../tokens/ink';\n\nimport { AlertDialogFooter } from './AlertDialog.parts';\nimport type { AlertDialogProps } from './AlertDialog.types';\nimport { rem, rems } from '../../../tokens/relative';\n\n// Define pulse animation\nconst pulseAnimation = (theme: Theme) => keyframes`\n 0% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 1;\n }\n 70% {\n box-shadow: 0 0 0 ${rem(theme, 15)} currentColor;\n opacity: 0;\n }\n 100% {\n box-shadow: 0 0 0 0 currentColor;\n opacity: 0;\n }\n`;\n\nconst StyledDialog = styled(Dialog, {\n shouldForwardProp: (prop) => \n !['customVariant', 'glow', 'pulse'].includes(prop as string),\n})<{ \n customVariant?: string; \n glow?: boolean; \n pulse?: boolean; \n}>(({ theme, customVariant, glow, pulse }) => ({\n '& .MuiDialog-paper': {\n borderRadius: theme.spacing(2),\n transition: 'all 0.3s ease',\n position: 'relative',\n overflow: 'hidden',\n\n // Variant styles\n ...(customVariant === 'default' && {\n backgroundColor: theme.palette.background.paper,\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n }),\n\n // The error tint is LAYERED over the paper, not used as the background\n // itself: `alpha(error, 0.05)` alone leaves the panel 95% transparent, so\n // the page behind it showed straight through the question and its buttons.\n // A confirm nobody can read is the one dialog that must never be hard to\n // read. Same tint, opaque base.\n ...(customVariant === 'destructive' && {\n backgroundColor: theme.palette.background.paper,\n backgroundImage: `linear-gradient(${alpha(theme.palette.error.main, 0.05)}, ${alpha(\n theme.palette.error.main,\n 0.05,\n )})`,\n border: `1px solid ${alpha(theme.palette.error.main, 0.2)}`,\n }),\n\n ...(customVariant === 'glass' && {\n backgroundColor: alpha(theme.palette.background.paper, 0.1),\n backdropFilter: `blur(${rem(theme, 20)})`,\n border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,\n }),\n\n // Glow effect\n ...(glow && !pulse && {\n boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n filter: 'brightness(1.05)',\n }),\n\n // Pulse animation\n ...(pulse && !glow && {\n position: 'relative',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundColor: theme.palette.primary.main,\n opacity: 0.1,\n animation: `${pulseAnimation(theme)} 2s infinite`,\n pointerEvents: 'none',\n zIndex: -1,\n },\n }),\n\n // Both glow and pulse\n ...(glow && pulse && {\n position: 'relative',\n boxShadow: `0 0 ${rems(theme, 30, 10)} ${alpha(theme.palette.primary.main, 0.3)} !important`,\n filter: 'brightness(1.05)',\n '&::after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n borderRadius: 'inherit',\n backgroundColor: theme.palette.primary.main,\n opacity: 0.1,\n animation: `${pulseAnimation(theme)} 2s infinite`,\n pointerEvents: 'none',\n zIndex: -1,\n },\n }),\n },\n}));\n\nconst StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1.5),\n paddingRight: theme.spacing(6), // Space for close button\n '& .MuiTypography-root': {\n fontWeight: 600,\n fontSize: rem(theme, 20),\n },\n}));\n\nconst StyledDialogContent = styled(DialogContent)(({ theme }) => ({\n paddingTop: theme.spacing(1),\n paddingBottom: theme.spacing(2),\n}));\n\nconst CloseButton = styled(IconButton)(({ theme }) => ({\n position: 'absolute',\n right: theme.spacing(1),\n top: theme.spacing(1),\n // 40px, not the small IconButton's 34: the floor a phone's tap needs (FUT-3269).\n width: rem(theme, 40),\n height: rem(theme, 40),\n color: neutralTones(theme).muted,\n}));\n\n/**\n * Per-variant lookups, hoisted out of the render function. They depend on\n * nothing but their arguments, so keeping them at module scope means they are\n * not rebuilt on every render — and it keeps the component's own branch count\n * inside the repo's complexity budget.\n */\nconst variantIcon = (\n variant: AlertDialogProps['variant'],\n icon: AlertDialogProps['icon'],\n): React.ReactNode => {\n if (icon) return icon;\n return variant === 'destructive' ? <Error color=\"error\" /> : <Info color=\"primary\" />;\n};\n\n/**\n * Ids for the two elements that give the dialog its accessible name and\n * description. Derived from the test id so they are stable and unique per\n * dialog without a generated id that would change on every render.\n */\nconst titleId = (dataTestId: string): string => `${dataTestId}-title`;\nconst descriptionId = (dataTestId: string): string => `${dataTestId}-description`;\n\n/**\n * `alertdialog`, not `dialog`.\n *\n * This component interrupts what the operator was doing and will not go away\n * until they answer — which is exactly the distinction the two roles draw, and\n * it is what makes a screen reader announce the message itself on open rather\n * than just the dialog's name. MUI hardcodes `role=\"dialog\"` on the paper, so\n * it has to be overridden through the paper slot.\n */\nconst ALERT_ROLE = 'alertdialog';\n\n/**\n * The paper slot's a11y props: the role, plus the name and description wired to\n * the elements that actually carry them, so the announcement is the QUESTION\n * rather than the word \"dialog\".\n *\n * Both references are conditional — pointing `aria-labelledby` at an element\n * that was never rendered leaves a dangling id, which screen readers treat as\n * no name at all, i.e. worse than omitting it.\n */\nfunction ariaSlotProps(\n dataTestId: string,\n title: AlertDialogProps['title'],\n description: AlertDialogProps['description'],\n): { paper: Record<string, string> } {\n return {\n paper: {\n role: ALERT_ROLE,\n ...(title ? { 'aria-labelledby': titleId(dataTestId) } : {}),\n ...(description ? { 'aria-describedby': descriptionId(dataTestId) } : {}),\n },\n };\n}\n\n/** Title row: the variant icon (unless explicitly suppressed with `null`) + the title. */\nfunction AlertDialogHeader({\n title,\n icon,\n variant,\n dataTestId,\n}: {\n title: AlertDialogProps['title'];\n icon: AlertDialogProps['icon'];\n variant: AlertDialogProps['variant'];\n dataTestId: string;\n}): React.ReactElement | null {\n if (!title) return null;\n return (\n <StyledDialogTitle id={titleId(dataTestId)} data-testid={`${dataTestId}-title`}>\n {icon !== null && (\n <span data-testid={`${dataTestId}-icon`}>{variantIcon(variant, icon)}</span>\n )}\n <Typography variant=\"h6\" component=\"span\">\n {title}\n </Typography>\n </StyledDialogTitle>\n );\n}\n\nexport const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(\n ({\n variant = 'default',\n glow = false,\n pulse = false,\n title,\n description,\n icon,\n cancelText,\n confirmText,\n closeLabel = EN_US_UI_LABELS.common.close,\n onCancel,\n onConfirm,\n showCancel,\n loading,\n confirmDisabled,\n initialFocus,\n emphasis,\n children,\n onClose,\n 'data-testid': dataTestId = 'alert-dialog',\n ...props\n }, ref) => {\n const handleCancel = () => {\n onCancel?.();\n onClose?.({}, 'backdropClick');\n };\n\n return (\n <StyledDialog\n ref={ref}\n customVariant={variant}\n glow={glow}\n pulse={pulse}\n onClose={onClose}\n data-testid={dataTestId}\n slotProps={ariaSlotProps(dataTestId, title, description)}\n {...props}\n >\n <CloseButton\n aria-label={closeLabel}\n onClick={handleCancel}\n size=\"small\"\n data-testid={`${dataTestId}-close-button`}\n >\n <Close />\n </CloseButton>\n\n <AlertDialogHeader title={title} icon={icon} variant={variant} dataTestId={dataTestId} />\n\n <StyledDialogContent data-testid={`${dataTestId}-content`}>\n {description && (\n <DialogContentText\n id={descriptionId(dataTestId)}\n data-testid={`${dataTestId}-description`}\n >\n {description}\n </DialogContentText>\n )}\n {children}\n </StyledDialogContent>\n\n <AlertDialogFooter\n variant={variant}\n cancelText={cancelText}\n confirmText={confirmText}\n showCancel={showCancel}\n loading={loading}\n confirmDisabled={confirmDisabled}\n initialFocus={initialFocus}\n emphasis={emphasis}\n onCancel={handleCancel}\n onConfirm={() => onConfirm?.()}\n dataTestId={dataTestId}\n />\n </StyledDialog>\n );\n }\n);\n\nAlertDialog.displayName = 'AlertDialog';"],"mappings":"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","names":[]}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|