@tensor_1/react 2.32.0 → 2.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +17 -0
- package/dist/SchedulingCalendar-C4XVbqZr.d.ts +339 -0
- package/dist/components/SchedulingCalendar.d.ts +4 -241
- package/dist/components/SchedulingCalendar.js +73 -14
- package/dist/components/SchedulingTimeGrid.d.ts +4 -0
- package/dist/components/SchedulingTimeGrid.js +521 -0
- package/dist/components/SchedulingTimeline.d.ts +1 -1
- package/dist/index.cjs +1144 -471
- package/dist/index.d.cts +174 -7
- package/dist/index.d.ts +2 -2
- package/dist/index.js +15 -1
- package/dist/labels-context.d.ts +1 -1
- package/dist/scheduling-calendar-model.d.ts +104 -1
- package/dist/scheduling-calendar-model.js +95 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -395,6 +395,23 @@ const spanLayout = layoutMonthSpans(spansInSalienceOrder, grid, { timeZone, week
|
|
|
395
395
|
- **Fixed geometry.** With `days` / `dayEntries` (or `maxEntriesPerDay` plus `onShowMore`) every cell keeps one
|
|
396
396
|
height: the head, the lane caps, the chip rows and the "+N" line. A chip reads `HH:MM title` (24 h, in the zone)
|
|
397
397
|
unless `renderEntry` replaces it.
|
|
398
|
+
- **Week and Day as a time grid** (`timeGrid`, HAR-1509): day columns on an hour axis.
|
|
399
|
+
|
|
400
|
+
```tsx
|
|
401
|
+
<SchedulingCalendar view="week" timeGrid timeZone="Europe/Berlin" anchorDate="2026-10-07" showHeader={false}
|
|
402
|
+
entries={entries} overlays={windows} days={dayCounts} now={serverNow}
|
|
403
|
+
canMove={userMayMove} step={15}
|
|
404
|
+
onProposeMove={(id, { start, end, adjusted }) => reschedule(id, start, end)} // the server decides; the calendar never moves an item
|
|
405
|
+
onSelectEntry={openItem} onShowMore={openDay} />
|
|
406
|
+
```
|
|
407
|
+
|
|
408
|
+
- A column is as tall as its day (23, 24 or 25 hours); an item sits at its real time. `view="day"` is one column.
|
|
409
|
+
- An entry that crosses midnight by up to `topLaneCrossMidnightMinutes` (default 360) is one item in two joined
|
|
410
|
+
parts; all-day (`allDay`), longer and later-running entries go to the lane above the hours (`placesInTopLane`).
|
|
411
|
+
- Moves are proposals: drag, or Shift and an arrow key, then Enter (Escape drops it). An entry whose props do not
|
|
412
|
+
change stays where it was, so a refused move snaps back by construction. `movable: false` pins an entry.
|
|
413
|
+
- Overlapping items share at most `maxLanes` lanes, fewer in a narrow column; the column "+N" is the consumer's
|
|
414
|
+
`days[date].overflowCount`. `renderEntry(entry, { availableLines })` says how many text lines fit.
|
|
398
415
|
- **Colour.** Every calendar colour is named once at the top of `scheduling-calendar.css` (`--calendar-*`).
|
|
399
416
|
- **Deprecated, still working in 2.x:** `entry.state` / `SchedulingEntryState`, `overlay.kind` /
|
|
400
417
|
`SchedulingOverlayKind` and the `previous` / `next` labels. An entry with `state` is no longer tinted: the two
|
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { CalendarWeekday } from './calendar-model.js';
|
|
4
|
+
import { MoveProposal, MonthSpanLayout } from './scheduling-calendar-model.js';
|
|
5
|
+
|
|
6
|
+
interface TimeGridEntryContext {
|
|
7
|
+
/** Whole text lines that fit in the item: 0 shows the markers only. */
|
|
8
|
+
availableLines: number;
|
|
9
|
+
}
|
|
10
|
+
interface SchedulingTimeGridProps {
|
|
11
|
+
view: 'week' | 'day';
|
|
12
|
+
days: string[];
|
|
13
|
+
timeZone: string;
|
|
14
|
+
entries: SchedulingCalendarEntry[];
|
|
15
|
+
overlays: SchedulingCalendarOverlay[];
|
|
16
|
+
dayInfo?: Record<string, SchedulingCalendarDay>;
|
|
17
|
+
labels: Required<SchedulingCalendarLabels>;
|
|
18
|
+
gridLabel: string;
|
|
19
|
+
dateText: (date: string, part: SchedulingDatePart) => string;
|
|
20
|
+
formatInstant: (instant: string) => string;
|
|
21
|
+
entryName: (entry: SchedulingCalendarEntry) => string;
|
|
22
|
+
entryStatus: (entry: SchedulingCalendarEntry) => string;
|
|
23
|
+
entryMarkers: (entry: SchedulingCalendarEntry) => SchedulingMarker[];
|
|
24
|
+
overlayName: (overlay: SchedulingCalendarOverlay) => string;
|
|
25
|
+
renderEntry?: (entry: SchedulingCalendarEntry, context?: TimeGridEntryContext) => ReactNode;
|
|
26
|
+
renderMarker: (marker: SchedulingMarker, showLabel?: boolean) => ReactNode;
|
|
27
|
+
onSelectEntry?: (entry: SchedulingCalendarEntry) => void;
|
|
28
|
+
onSelectOverlay?: (overlay: SchedulingCalendarOverlay) => void;
|
|
29
|
+
onSelectDate?: (date: string) => void;
|
|
30
|
+
onShowMore?: (date: string, entries: SchedulingCalendarEntry[]) => void;
|
|
31
|
+
now?: string;
|
|
32
|
+
canMove: boolean;
|
|
33
|
+
step: number;
|
|
34
|
+
onProposeMove?: (id: string, proposal: MoveProposal) => void | Promise<unknown>;
|
|
35
|
+
topLaneCrossMidnightMinutes: number;
|
|
36
|
+
topLaneCap: number;
|
|
37
|
+
windowLaneCap: number;
|
|
38
|
+
maxLanes: number;
|
|
39
|
+
emptyNote?: ReactNode;
|
|
40
|
+
nothingToShow: boolean;
|
|
41
|
+
}
|
|
42
|
+
/** Week (seven columns) or Day (one column) with an hour axis. */
|
|
43
|
+
declare function SchedulingTimeGrid({ view, days, timeZone, entries: givenEntries, overlays: givenOverlays, dayInfo, labels, gridLabel, dateText, formatInstant, entryName, entryStatus, entryMarkers, overlayName, renderEntry, renderMarker, onSelectEntry, onSelectOverlay, onSelectDate, onShowMore, now, canMove, step: givenStep, onProposeMove, topLaneCrossMidnightMinutes, topLaneCap, windowLaneCap, maxLanes, emptyNote, nothingToShow, }: SchedulingTimeGridProps): react.JSX.Element;
|
|
44
|
+
|
|
45
|
+
/** `day` is one column of the time grid. `week` is the time grid when `timeGrid` is set, else seven day cells. */
|
|
46
|
+
type SchedulingCalendarView = 'month' | 'week' | 'day' | 'agenda';
|
|
47
|
+
/**
|
|
48
|
+
* @deprecated Use `band`, `status` and `markers` on the entry: they carry no product
|
|
49
|
+
* vocabulary and the consumer supplies every word. The values keep working in 2.x.
|
|
50
|
+
*/
|
|
51
|
+
type SchedulingEntryState = 'scheduled' | 'conflicted' | 'in-progress' | 'blackout-violation';
|
|
52
|
+
/** @deprecated Use `pattern` and `kindLabel` on the overlay. The values keep working in 2.x. */
|
|
53
|
+
type SchedulingOverlayKind = 'maintenance' | 'blackout';
|
|
54
|
+
/**
|
|
55
|
+
* The one dimension that takes a hue. `none` and `low` are untinted, `medium` gets a
|
|
56
|
+
* heavier edge, and only `high` is filled. The consumer decides what a band means.
|
|
57
|
+
*/
|
|
58
|
+
type SchedulingBand = 'none' | 'low' | 'medium' | 'high';
|
|
59
|
+
/**
|
|
60
|
+
* The state channel, drawn without hue: `tentative` is dashed, `committed` is the plain
|
|
61
|
+
* item, `live` carries a leading dot, `done` is dimmed and `dead` is struck through.
|
|
62
|
+
*/
|
|
63
|
+
type SchedulingStatus = 'tentative' | 'committed' | 'live' | 'done' | 'dead';
|
|
64
|
+
type SchedulingMarkerEmphasis = 'refused' | 'warning' | 'neutral';
|
|
65
|
+
/** How a window is hatched. Windows are neutral: the pattern and the visible label tell them apart. */
|
|
66
|
+
type SchedulingOverlayPattern = 'diagonal' | 'cross' | 'dotted' | 'solid';
|
|
67
|
+
/**
|
|
68
|
+
* Which date text a `formatDate` call is for (TENSOR B1/C9, HAR-1347):
|
|
69
|
+
* `day` names one day (each day cell's accessible name, the week-range title);
|
|
70
|
+
* `weekday` is the short column header (the date is any day of that weekday);
|
|
71
|
+
* `month` is the month-view title (the date is the first of the month);
|
|
72
|
+
* `column` heads one day column of the time grid (weekday and date, e.g. "Wed 07.10").
|
|
73
|
+
*/
|
|
74
|
+
type SchedulingDatePart = 'day' | 'weekday' | 'month' | 'column';
|
|
75
|
+
/** A shape or icon with text. The text is always in the accessible name; a marker never relies on colour. */
|
|
76
|
+
interface SchedulingMarker {
|
|
77
|
+
id: string;
|
|
78
|
+
/** An icon from `@tensor_1/react/icons`. Without one the marker draws a shape for its `emphasis`. */
|
|
79
|
+
icon?: ReactNode;
|
|
80
|
+
label: string;
|
|
81
|
+
emphasis?: SchedulingMarkerEmphasis;
|
|
82
|
+
}
|
|
83
|
+
interface SchedulingCalendarEntry {
|
|
84
|
+
id: string;
|
|
85
|
+
title: string;
|
|
86
|
+
start: string;
|
|
87
|
+
end: string;
|
|
88
|
+
/** @deprecated Use `band`, `status` and `markers`. */
|
|
89
|
+
state?: SchedulingEntryState;
|
|
90
|
+
meta?: string;
|
|
91
|
+
band?: SchedulingBand;
|
|
92
|
+
status?: SchedulingStatus;
|
|
93
|
+
markers?: SchedulingMarker[];
|
|
94
|
+
/** The complete accessible name, built by the consumer from its own words. Replaces `labels.entry`. */
|
|
95
|
+
accessibleName?: string;
|
|
96
|
+
/** No time of day. In the time grid the entry is drawn in the top lane. */
|
|
97
|
+
allDay?: boolean;
|
|
98
|
+
/** `false` keeps this entry where it is when the grid allows moves (`canMove`). */
|
|
99
|
+
movable?: boolean;
|
|
100
|
+
}
|
|
101
|
+
interface SchedulingCalendarOverlay {
|
|
102
|
+
id: string;
|
|
103
|
+
/** The window's name, shown as text. */
|
|
104
|
+
label: string;
|
|
105
|
+
start: string;
|
|
106
|
+
end: string;
|
|
107
|
+
/** @deprecated Use `pattern` and `kindLabel`. */
|
|
108
|
+
kind?: SchedulingOverlayKind;
|
|
109
|
+
/** Defaults to `'solid'`. */
|
|
110
|
+
pattern?: SchedulingOverlayPattern;
|
|
111
|
+
/** What kind of window this is, in the consumer's words. Shown before the name. */
|
|
112
|
+
kindLabel?: string;
|
|
113
|
+
/** What the window applies to. Shown after the name. */
|
|
114
|
+
scopeLabel?: string;
|
|
115
|
+
/** The window applies to everything. A window that is not global never gets the global treatment. */
|
|
116
|
+
global?: boolean;
|
|
117
|
+
/** The complete accessible name. Replaces `labels.overlay`. */
|
|
118
|
+
accessibleName?: string;
|
|
119
|
+
}
|
|
120
|
+
/** What the consumer knows about one day (`YYYY-MM-DD`). The calendar shows these numbers and never derives them. */
|
|
121
|
+
interface SchedulingCalendarDay {
|
|
122
|
+
/** Every item on the day, shown in the cell even when no chip fits. */
|
|
123
|
+
count: number;
|
|
124
|
+
/** The "+N" of the cell. 0 shows none. */
|
|
125
|
+
overflowCount: number;
|
|
126
|
+
/** The accessible text of the count, e.g. "7 items, 2 need review". */
|
|
127
|
+
label?: string;
|
|
128
|
+
markers?: SchedulingMarker[];
|
|
129
|
+
}
|
|
130
|
+
interface SchedulingLegendItem {
|
|
131
|
+
id: string;
|
|
132
|
+
label: string;
|
|
133
|
+
swatch: {
|
|
134
|
+
band?: SchedulingBand;
|
|
135
|
+
status?: SchedulingStatus;
|
|
136
|
+
pattern?: SchedulingOverlayPattern;
|
|
137
|
+
icon?: ReactNode;
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
/**
|
|
141
|
+
* Every word the calendar renders (TENSOR RX-125, UIX-12). `{timeZone}`, `{view}`,
|
|
142
|
+
* `{title}`, `{state}`, `{start}`, `{end}` are placeholders.
|
|
143
|
+
*/
|
|
144
|
+
interface SchedulingCalendarLabels {
|
|
145
|
+
region: string;
|
|
146
|
+
/** @deprecated Use `previousMonth` and `previousWeek`. Still used when those are not set. */
|
|
147
|
+
previous: string;
|
|
148
|
+
/** @deprecated Use `nextMonth` and `nextWeek`. Still used when those are not set. */
|
|
149
|
+
next: string;
|
|
150
|
+
previousMonth?: string;
|
|
151
|
+
nextMonth?: string;
|
|
152
|
+
/** Also names the agenda's step, which moves by a week. */
|
|
153
|
+
previousWeek?: string;
|
|
154
|
+
nextWeek?: string;
|
|
155
|
+
previousDay?: string;
|
|
156
|
+
nextDay?: string;
|
|
157
|
+
viewGroup: string;
|
|
158
|
+
viewMonth: string;
|
|
159
|
+
viewWeek: string;
|
|
160
|
+
viewDay?: string;
|
|
161
|
+
viewAgenda: string;
|
|
162
|
+
loading: string;
|
|
163
|
+
retry: string;
|
|
164
|
+
agenda: string;
|
|
165
|
+
agendaEmpty: string;
|
|
166
|
+
grid: string;
|
|
167
|
+
/** An entry's accessible name unless it sets `accessibleName`. Its marker labels are appended. */
|
|
168
|
+
entry: string;
|
|
169
|
+
/** A window's accessible name unless it sets `accessibleName`. `{title}` is its kind, name and scope. */
|
|
170
|
+
overlay?: string;
|
|
171
|
+
legend: string;
|
|
172
|
+
/** The "+N more" toggle on a day with more entries than `maxEntriesPerDay`. `{count}` placeholder. */
|
|
173
|
+
moreEntries: string;
|
|
174
|
+
/** Accessible name of that toggle. `{count}` and `{date}` placeholders. */
|
|
175
|
+
moreEntriesLabel: string;
|
|
176
|
+
/** The toggle once the day is expanded in place. */
|
|
177
|
+
fewerEntries: string;
|
|
178
|
+
/** The "+N" at the end of a week row whose spans did not all get a lane. `{count}` placeholder. */
|
|
179
|
+
moreSpans?: string;
|
|
180
|
+
/** Accessible name of that control. `{count}` and `{date}` (the first day with a hidden span). */
|
|
181
|
+
moreSpansLabel?: string;
|
|
182
|
+
/** The accessible text of a day's count when `days[date].label` is not given. `{count}` placeholder. */
|
|
183
|
+
dayCount?: string;
|
|
184
|
+
states: Record<SchedulingEntryState, string>;
|
|
185
|
+
/** The words for `status`, used in the default accessible name and the agenda. */
|
|
186
|
+
statuses?: Partial<Record<SchedulingStatus, string>>;
|
|
187
|
+
/** The header of the hour axis: it names the display zone. `{timeZone}` placeholder. */
|
|
188
|
+
timeZone?: string;
|
|
189
|
+
/** Names the strip of windows above the time grid. */
|
|
190
|
+
windows?: string;
|
|
191
|
+
/** "+N windows" when the strip has more windows than lanes. `{count}` placeholder. */
|
|
192
|
+
moreWindows?: string;
|
|
193
|
+
/** Accessible name of that control. `{count}` and `{date}` (the first day with a hidden window). */
|
|
194
|
+
moreWindowsLabel?: string;
|
|
195
|
+
/** Names the lane above the hours that holds all-day and long entries. */
|
|
196
|
+
topLane?: string;
|
|
197
|
+
/** The cue on the second-day part of an entry that crosses midnight. `{time}` is its start. */
|
|
198
|
+
continuesFrom?: string;
|
|
199
|
+
/** Read after an item's name when it can be moved. */
|
|
200
|
+
moveHint?: string;
|
|
201
|
+
/** Announced for a pending move. `{start}` and `{end}` placeholders. */
|
|
202
|
+
moveProposed?: string;
|
|
203
|
+
/** Announced when a pending move is dropped. */
|
|
204
|
+
moveCancelled?: string;
|
|
205
|
+
/** Announced when the time asked for does not exist that day. `{time}` is the time used instead. */
|
|
206
|
+
gapForward?: string;
|
|
207
|
+
}
|
|
208
|
+
declare const DEFAULT_SCHEDULING_CALENDAR_LABELS: SchedulingCalendarLabels;
|
|
209
|
+
interface SchedulingCalendarProps {
|
|
210
|
+
/**
|
|
211
|
+
* The entries. Without `dayEntries` the calendar places each on its day in the order
|
|
212
|
+
* given; with `dayEntries` only the entries that cover more than one day are read from
|
|
213
|
+
* here (they are drawn as spans).
|
|
214
|
+
*/
|
|
215
|
+
entries: SchedulingCalendarEntry[];
|
|
216
|
+
anchorDate: string;
|
|
217
|
+
timeZone: string;
|
|
218
|
+
view?: SchedulingCalendarView;
|
|
219
|
+
onViewChange?: (view: SchedulingCalendarView) => void;
|
|
220
|
+
onAnchorDateChange?: (date: string) => void;
|
|
221
|
+
/** Called by a click or Enter on a chip, a span or an agenda row. */
|
|
222
|
+
onSelectEntry?: (entry: SchedulingCalendarEntry) => void;
|
|
223
|
+
overlays?: SchedulingCalendarOverlay[];
|
|
224
|
+
/** Called by a click or Enter on a window span. */
|
|
225
|
+
onSelectOverlay?: (overlay: SchedulingCalendarOverlay) => void;
|
|
226
|
+
filter?: (entry: SchedulingCalendarEntry) => boolean;
|
|
227
|
+
/**
|
|
228
|
+
* Replaces a chip's content. The default is the start time in `timeZone` (24 h) and the title.
|
|
229
|
+
* In the time grid the second argument says how many text lines fit in the item (0: show the
|
|
230
|
+
* markers only); elsewhere it is not passed.
|
|
231
|
+
*/
|
|
232
|
+
renderEntry?: (entry: SchedulingCalendarEntry, context?: TimeGridEntryContext) => ReactNode;
|
|
233
|
+
locale?: string;
|
|
234
|
+
/** First column of the month and week grids: 0 = Sunday … 6 = Saturday. Defaults to 1 (Monday). */
|
|
235
|
+
weekStartsOn?: CalendarWeekday;
|
|
236
|
+
/**
|
|
237
|
+
* Formats every calendar date the component writes (`date` is `YYYY-MM-DD`). Use it to
|
|
238
|
+
* apply a product date format such as DD.MM.YYYY; defaults to `Intl` in `locale`.
|
|
239
|
+
*/
|
|
240
|
+
formatDate?: (date: string, part: SchedulingDatePart) => string;
|
|
241
|
+
/**
|
|
242
|
+
* Formats a start or end instant (ISO 8601) for the agenda and the accessible names.
|
|
243
|
+
* The component does not shift it: render it in `timeZone` yourself. Defaults to the
|
|
244
|
+
* `day` date text followed by the 24-hour time in `timeZone`.
|
|
245
|
+
*/
|
|
246
|
+
formatInstant?: (instant: string) => string;
|
|
247
|
+
/**
|
|
248
|
+
* How many chips a day shows. Without `dayEntries` the rest collapse behind "+N more";
|
|
249
|
+
* with `dayEntries` it only sizes the cell (the consumer already cut the list, and a longer
|
|
250
|
+
* list makes the cells taller, never clipped). Unset shows every entry where the cells
|
|
251
|
+
* grow, and sizes a fixed cell for three chips.
|
|
252
|
+
*/
|
|
253
|
+
maxEntriesPerDay?: number;
|
|
254
|
+
/**
|
|
255
|
+
* Called by a day's "+N more" and by a week row's "+N" with the day (and, without
|
|
256
|
+
* `dayEntries`, every entry on it). When set, the consumer shows them (a popover, a
|
|
257
|
+
* drawer, the day view) and the day stays collapsed. Required with `days` or `dayEntries`:
|
|
258
|
+
* a controlled day never expands in place.
|
|
259
|
+
*/
|
|
260
|
+
onShowMore?: (date: string, entries: SchedulingCalendarEntry[]) => void;
|
|
261
|
+
/**
|
|
262
|
+
* A small badge beside a day's date, e.g. a collision count. Keep it short (a number or a
|
|
263
|
+
* glyph): it shares a narrow column with the date and is clipped, not wrapped. It sits
|
|
264
|
+
* outside the date button, so give it its own accessible text (a visually hidden word next
|
|
265
|
+
* to the number). Return null for no badge.
|
|
266
|
+
*/
|
|
267
|
+
renderDayBadge?: (date: string, entries: SchedulingCalendarEntry[]) => ReactNode;
|
|
268
|
+
/**
|
|
269
|
+
* Consumer-owned numbers per day (`YYYY-MM-DD`). When set, each listed day shows its
|
|
270
|
+
* `count` and markers even with no chip, and its "+N" is `overflowCount`, never a number
|
|
271
|
+
* derived from the entries given. Without `dayEntries` the chips are still this day's
|
|
272
|
+
* `entries`, cut to `maxEntriesPerDay`; the day never expands in place.
|
|
273
|
+
*/
|
|
274
|
+
days?: Record<string, SchedulingCalendarDay>;
|
|
275
|
+
/**
|
|
276
|
+
* The single-day chips of each day, already ranked and cut by the consumer. When set, the
|
|
277
|
+
* calendar renders exactly these in the order given: it does not place, rank, cut or count.
|
|
278
|
+
*/
|
|
279
|
+
dayEntries?: Record<string, SchedulingCalendarEntry[]>;
|
|
280
|
+
/**
|
|
281
|
+
* The result of `layoutMonthSpans` for this grid. When set, the calendar draws exactly
|
|
282
|
+
* these spans and never packs lanes itself. Compute it with `schedulingGridDays`.
|
|
283
|
+
*/
|
|
284
|
+
spanLayout?: MonthSpanLayout;
|
|
285
|
+
/**
|
|
286
|
+
* Lanes kept for windows above the chips. Windows never take a chip slot. Default 2 where
|
|
287
|
+
* the cells have a fixed height; where they grow with their content every window gets a lane.
|
|
288
|
+
*/
|
|
289
|
+
windowLaneCap?: number;
|
|
290
|
+
/** Lanes kept for entries that cover more than one day. Default as for `windowLaneCap`. */
|
|
291
|
+
spanLaneCap?: number;
|
|
292
|
+
/** When set, the legend is exactly these items (an empty list draws no legend). Unset keeps the built-in state legend. */
|
|
293
|
+
legend?: SchedulingLegendItem[];
|
|
294
|
+
/** A line under the legend, e.g. the display zone. */
|
|
295
|
+
legendCaption?: ReactNode;
|
|
296
|
+
/** `false` hides the previous/next buttons, the title and the view switch (the page has its own toolbar). */
|
|
297
|
+
showHeader?: boolean;
|
|
298
|
+
/** Shown above the grid, e.g. "Showing the first 2,000 items". */
|
|
299
|
+
notice?: ReactNode;
|
|
300
|
+
/** Shown inside the grid, below the day cells, when there is nothing to show. */
|
|
301
|
+
emptyNote?: ReactNode;
|
|
302
|
+
/** Called by a click or Enter on a day number. */
|
|
303
|
+
onSelectDate?: (date: string) => void;
|
|
304
|
+
/**
|
|
305
|
+
* Draws `view="week"` as a time grid: seven day columns on an hour axis. `view="day"` is
|
|
306
|
+
* always a time grid. Default `false`: the week stays seven day cells.
|
|
307
|
+
*/
|
|
308
|
+
timeGrid?: boolean;
|
|
309
|
+
/** An instant (ISO 8601). The time grid draws one line at it, in the column of its day. The component keeps no clock. */
|
|
310
|
+
now?: string;
|
|
311
|
+
/**
|
|
312
|
+
* Lets the user ask for a move in the time grid (drag, or Shift and an arrow key, then
|
|
313
|
+
* Enter). Without it, or without `onProposeMove`, items have no move affordance at all.
|
|
314
|
+
*/
|
|
315
|
+
canMove?: boolean;
|
|
316
|
+
/** Minutes a move snaps to. Default 15. */
|
|
317
|
+
step?: number;
|
|
318
|
+
/**
|
|
319
|
+
* Called once per finished gesture with the window the user asks for. The calendar never
|
|
320
|
+
* moves the item: it draws entries where the props say, so an entry whose props do not
|
|
321
|
+
* change is back where it was. Return a promise to keep the outline until it settles.
|
|
322
|
+
*/
|
|
323
|
+
onProposeMove?: (id: string, proposal: MoveProposal) => void | Promise<unknown>;
|
|
324
|
+
/** An entry running more than this many minutes past its first local midnight goes to the top lane. Default 360. */
|
|
325
|
+
topLaneCrossMidnightMinutes?: number;
|
|
326
|
+
/** Rows of the top lane of the time grid. Default 3. */
|
|
327
|
+
topLaneCap?: number;
|
|
328
|
+
/** Lanes side by side in one day column of the time grid, at most. Fewer are used when the column is narrow. Default 4. */
|
|
329
|
+
maxLanes?: number;
|
|
330
|
+
loading?: boolean;
|
|
331
|
+
error?: string;
|
|
332
|
+
onRetry?: () => void;
|
|
333
|
+
className?: string;
|
|
334
|
+
labels?: Partial<SchedulingCalendarLabels>;
|
|
335
|
+
}
|
|
336
|
+
/** Month/week/agenda calendar for UTC ranges rendered in an explicit IANA time zone. */
|
|
337
|
+
declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, onSelectOverlay, filter, renderEntry, locale, weekStartsOn, formatDate, formatInstant: formatInstantProp, maxEntriesPerDay, onShowMore, renderDayBadge, days: dayInfo, dayEntries, spanLayout, windowLaneCap, spanLaneCap, legend, legendCaption, showHeader, notice, emptyNote, onSelectDate, timeGrid, now, canMove, step, onProposeMove, topLaneCrossMidnightMinutes, topLaneCap, maxLanes, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
|
|
338
|
+
|
|
339
|
+
export { DEFAULT_SCHEDULING_CALENDAR_LABELS as D, type SchedulingBand as S, type TimeGridEntryContext as T, SchedulingCalendar as a, type SchedulingCalendarDay as b, type SchedulingCalendarEntry as c, type SchedulingCalendarLabels as d, type SchedulingCalendarOverlay as e, type SchedulingCalendarProps as f, type SchedulingCalendarView as g, type SchedulingDatePart as h, type SchedulingEntryState as i, type SchedulingLegendItem as j, type SchedulingMarker as k, type SchedulingMarkerEmphasis as l, type SchedulingOverlayKind as m, type SchedulingOverlayPattern as n, type SchedulingStatus as o, SchedulingTimeGrid as p, type SchedulingTimeGridProps as q };
|
|
@@ -1,241 +1,4 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
type SchedulingCalendarView = 'month' | 'week' | 'agenda';
|
|
7
|
-
/**
|
|
8
|
-
* @deprecated Use `band`, `status` and `markers` on the entry: they carry no product
|
|
9
|
-
* vocabulary and the consumer supplies every word. The values keep working in 2.x.
|
|
10
|
-
*/
|
|
11
|
-
type SchedulingEntryState = 'scheduled' | 'conflicted' | 'in-progress' | 'blackout-violation';
|
|
12
|
-
/** @deprecated Use `pattern` and `kindLabel` on the overlay. The values keep working in 2.x. */
|
|
13
|
-
type SchedulingOverlayKind = 'maintenance' | 'blackout';
|
|
14
|
-
/**
|
|
15
|
-
* The one dimension that takes a hue. `none` and `low` are untinted, `medium` gets a
|
|
16
|
-
* heavier edge, and only `high` is filled. The consumer decides what a band means.
|
|
17
|
-
*/
|
|
18
|
-
type SchedulingBand = 'none' | 'low' | 'medium' | 'high';
|
|
19
|
-
/**
|
|
20
|
-
* The state channel, drawn without hue: `tentative` is dashed, `committed` is the plain
|
|
21
|
-
* item, `live` carries a leading dot, `done` is dimmed and `dead` is struck through.
|
|
22
|
-
*/
|
|
23
|
-
type SchedulingStatus = 'tentative' | 'committed' | 'live' | 'done' | 'dead';
|
|
24
|
-
type SchedulingMarkerEmphasis = 'refused' | 'warning' | 'neutral';
|
|
25
|
-
/** How a window is hatched. Windows are neutral: the pattern and the visible label tell them apart. */
|
|
26
|
-
type SchedulingOverlayPattern = 'diagonal' | 'cross' | 'dotted' | 'solid';
|
|
27
|
-
/**
|
|
28
|
-
* Which date text a `formatDate` call is for (TENSOR B1/C9, HAR-1347):
|
|
29
|
-
* `day` names one day (each day cell's accessible name, the week-range title);
|
|
30
|
-
* `weekday` is the short column header (the date is any day of that weekday);
|
|
31
|
-
* `month` is the month-view title (the date is the first of the month).
|
|
32
|
-
*/
|
|
33
|
-
type SchedulingDatePart = 'day' | 'weekday' | 'month';
|
|
34
|
-
/** A shape or icon with text. The text is always in the accessible name; a marker never relies on colour. */
|
|
35
|
-
interface SchedulingMarker {
|
|
36
|
-
id: string;
|
|
37
|
-
/** An icon from `@tensor_1/react/icons`. Without one the marker draws a shape for its `emphasis`. */
|
|
38
|
-
icon?: ReactNode;
|
|
39
|
-
label: string;
|
|
40
|
-
emphasis?: SchedulingMarkerEmphasis;
|
|
41
|
-
}
|
|
42
|
-
interface SchedulingCalendarEntry {
|
|
43
|
-
id: string;
|
|
44
|
-
title: string;
|
|
45
|
-
start: string;
|
|
46
|
-
end: string;
|
|
47
|
-
/** @deprecated Use `band`, `status` and `markers`. */
|
|
48
|
-
state?: SchedulingEntryState;
|
|
49
|
-
meta?: string;
|
|
50
|
-
band?: SchedulingBand;
|
|
51
|
-
status?: SchedulingStatus;
|
|
52
|
-
markers?: SchedulingMarker[];
|
|
53
|
-
/** The complete accessible name, built by the consumer from its own words. Replaces `labels.entry`. */
|
|
54
|
-
accessibleName?: string;
|
|
55
|
-
}
|
|
56
|
-
interface SchedulingCalendarOverlay {
|
|
57
|
-
id: string;
|
|
58
|
-
/** The window's name, shown as text. */
|
|
59
|
-
label: string;
|
|
60
|
-
start: string;
|
|
61
|
-
end: string;
|
|
62
|
-
/** @deprecated Use `pattern` and `kindLabel`. */
|
|
63
|
-
kind?: SchedulingOverlayKind;
|
|
64
|
-
/** Defaults to `'solid'`. */
|
|
65
|
-
pattern?: SchedulingOverlayPattern;
|
|
66
|
-
/** What kind of window this is, in the consumer's words. Shown before the name. */
|
|
67
|
-
kindLabel?: string;
|
|
68
|
-
/** What the window applies to. Shown after the name. */
|
|
69
|
-
scopeLabel?: string;
|
|
70
|
-
/** The window applies to everything. A window that is not global never gets the global treatment. */
|
|
71
|
-
global?: boolean;
|
|
72
|
-
/** The complete accessible name. Replaces `labels.overlay`. */
|
|
73
|
-
accessibleName?: string;
|
|
74
|
-
}
|
|
75
|
-
/** What the consumer knows about one day (`YYYY-MM-DD`). The calendar shows these numbers and never derives them. */
|
|
76
|
-
interface SchedulingCalendarDay {
|
|
77
|
-
/** Every item on the day, shown in the cell even when no chip fits. */
|
|
78
|
-
count: number;
|
|
79
|
-
/** The "+N" of the cell. 0 shows none. */
|
|
80
|
-
overflowCount: number;
|
|
81
|
-
/** The accessible text of the count, e.g. "7 items, 2 need review". */
|
|
82
|
-
label?: string;
|
|
83
|
-
markers?: SchedulingMarker[];
|
|
84
|
-
}
|
|
85
|
-
interface SchedulingLegendItem {
|
|
86
|
-
id: string;
|
|
87
|
-
label: string;
|
|
88
|
-
swatch: {
|
|
89
|
-
band?: SchedulingBand;
|
|
90
|
-
status?: SchedulingStatus;
|
|
91
|
-
pattern?: SchedulingOverlayPattern;
|
|
92
|
-
icon?: ReactNode;
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
/**
|
|
96
|
-
* Every word the calendar renders (TENSOR RX-125, UIX-12). `{timeZone}`, `{view}`,
|
|
97
|
-
* `{title}`, `{state}`, `{start}`, `{end}` are placeholders.
|
|
98
|
-
*/
|
|
99
|
-
interface SchedulingCalendarLabels {
|
|
100
|
-
region: string;
|
|
101
|
-
/** @deprecated Use `previousMonth` and `previousWeek`. Still used when those are not set. */
|
|
102
|
-
previous: string;
|
|
103
|
-
/** @deprecated Use `nextMonth` and `nextWeek`. Still used when those are not set. */
|
|
104
|
-
next: string;
|
|
105
|
-
previousMonth?: string;
|
|
106
|
-
nextMonth?: string;
|
|
107
|
-
/** Also names the agenda's step, which moves by a week. */
|
|
108
|
-
previousWeek?: string;
|
|
109
|
-
nextWeek?: string;
|
|
110
|
-
viewGroup: string;
|
|
111
|
-
viewMonth: string;
|
|
112
|
-
viewWeek: string;
|
|
113
|
-
viewAgenda: string;
|
|
114
|
-
loading: string;
|
|
115
|
-
retry: string;
|
|
116
|
-
agenda: string;
|
|
117
|
-
agendaEmpty: string;
|
|
118
|
-
grid: string;
|
|
119
|
-
/** An entry's accessible name unless it sets `accessibleName`. Its marker labels are appended. */
|
|
120
|
-
entry: string;
|
|
121
|
-
/** A window's accessible name unless it sets `accessibleName`. `{title}` is its kind, name and scope. */
|
|
122
|
-
overlay?: string;
|
|
123
|
-
legend: string;
|
|
124
|
-
/** The "+N more" toggle on a day with more entries than `maxEntriesPerDay`. `{count}` placeholder. */
|
|
125
|
-
moreEntries: string;
|
|
126
|
-
/** Accessible name of that toggle. `{count}` and `{date}` placeholders. */
|
|
127
|
-
moreEntriesLabel: string;
|
|
128
|
-
/** The toggle once the day is expanded in place. */
|
|
129
|
-
fewerEntries: string;
|
|
130
|
-
/** The "+N" at the end of a week row whose spans did not all get a lane. `{count}` placeholder. */
|
|
131
|
-
moreSpans?: string;
|
|
132
|
-
/** Accessible name of that control. `{count}` and `{date}` (the first day with a hidden span). */
|
|
133
|
-
moreSpansLabel?: string;
|
|
134
|
-
/** The accessible text of a day's count when `days[date].label` is not given. `{count}` placeholder. */
|
|
135
|
-
dayCount?: string;
|
|
136
|
-
states: Record<SchedulingEntryState, string>;
|
|
137
|
-
/** The words for `status`, used in the default accessible name and the agenda. */
|
|
138
|
-
statuses?: Partial<Record<SchedulingStatus, string>>;
|
|
139
|
-
}
|
|
140
|
-
declare const DEFAULT_SCHEDULING_CALENDAR_LABELS: SchedulingCalendarLabels;
|
|
141
|
-
interface SchedulingCalendarProps {
|
|
142
|
-
/**
|
|
143
|
-
* The entries. Without `dayEntries` the calendar places each on its day in the order
|
|
144
|
-
* given; with `dayEntries` only the entries that cover more than one day are read from
|
|
145
|
-
* here (they are drawn as spans).
|
|
146
|
-
*/
|
|
147
|
-
entries: SchedulingCalendarEntry[];
|
|
148
|
-
anchorDate: string;
|
|
149
|
-
timeZone: string;
|
|
150
|
-
view?: SchedulingCalendarView;
|
|
151
|
-
onViewChange?: (view: SchedulingCalendarView) => void;
|
|
152
|
-
onAnchorDateChange?: (date: string) => void;
|
|
153
|
-
/** Called by a click or Enter on a chip, a span or an agenda row. */
|
|
154
|
-
onSelectEntry?: (entry: SchedulingCalendarEntry) => void;
|
|
155
|
-
overlays?: SchedulingCalendarOverlay[];
|
|
156
|
-
/** Called by a click or Enter on a window span. */
|
|
157
|
-
onSelectOverlay?: (overlay: SchedulingCalendarOverlay) => void;
|
|
158
|
-
filter?: (entry: SchedulingCalendarEntry) => boolean;
|
|
159
|
-
/** Replaces a chip's content. The default is the start time in `timeZone` (24 h) and the title. */
|
|
160
|
-
renderEntry?: (entry: SchedulingCalendarEntry) => ReactNode;
|
|
161
|
-
locale?: string;
|
|
162
|
-
/** First column of the month and week grids: 0 = Sunday … 6 = Saturday. Defaults to 1 (Monday). */
|
|
163
|
-
weekStartsOn?: CalendarWeekday;
|
|
164
|
-
/**
|
|
165
|
-
* Formats every calendar date the component writes (`date` is `YYYY-MM-DD`). Use it to
|
|
166
|
-
* apply a product date format such as DD.MM.YYYY; defaults to `Intl` in `locale`.
|
|
167
|
-
*/
|
|
168
|
-
formatDate?: (date: string, part: SchedulingDatePart) => string;
|
|
169
|
-
/**
|
|
170
|
-
* Formats a start or end instant (ISO 8601) for the agenda and the accessible names.
|
|
171
|
-
* The component does not shift it: render it in `timeZone` yourself. Defaults to the
|
|
172
|
-
* `day` date text followed by the 24-hour time in `timeZone`.
|
|
173
|
-
*/
|
|
174
|
-
formatInstant?: (instant: string) => string;
|
|
175
|
-
/**
|
|
176
|
-
* How many chips a day shows. Without `dayEntries` the rest collapse behind "+N more";
|
|
177
|
-
* with `dayEntries` it only sizes the cell (the consumer already cut the list, and a longer
|
|
178
|
-
* list makes the cells taller, never clipped). Unset shows every entry where the cells
|
|
179
|
-
* grow, and sizes a fixed cell for three chips.
|
|
180
|
-
*/
|
|
181
|
-
maxEntriesPerDay?: number;
|
|
182
|
-
/**
|
|
183
|
-
* Called by a day's "+N more" and by a week row's "+N" with the day (and, without
|
|
184
|
-
* `dayEntries`, every entry on it). When set, the consumer shows them (a popover, a
|
|
185
|
-
* drawer, the day view) and the day stays collapsed. Required with `days` or `dayEntries`:
|
|
186
|
-
* a controlled day never expands in place.
|
|
187
|
-
*/
|
|
188
|
-
onShowMore?: (date: string, entries: SchedulingCalendarEntry[]) => void;
|
|
189
|
-
/**
|
|
190
|
-
* A small badge beside a day's date, e.g. a collision count. Keep it short (a number or a
|
|
191
|
-
* glyph): it shares a narrow column with the date and is clipped, not wrapped. It sits
|
|
192
|
-
* outside the date button, so give it its own accessible text (a visually hidden word next
|
|
193
|
-
* to the number). Return null for no badge.
|
|
194
|
-
*/
|
|
195
|
-
renderDayBadge?: (date: string, entries: SchedulingCalendarEntry[]) => ReactNode;
|
|
196
|
-
/**
|
|
197
|
-
* Consumer-owned numbers per day (`YYYY-MM-DD`). When set, each listed day shows its
|
|
198
|
-
* `count` and markers even with no chip, and its "+N" is `overflowCount`, never a number
|
|
199
|
-
* derived from the entries given. Without `dayEntries` the chips are still this day's
|
|
200
|
-
* `entries`, cut to `maxEntriesPerDay`; the day never expands in place.
|
|
201
|
-
*/
|
|
202
|
-
days?: Record<string, SchedulingCalendarDay>;
|
|
203
|
-
/**
|
|
204
|
-
* The single-day chips of each day, already ranked and cut by the consumer. When set, the
|
|
205
|
-
* calendar renders exactly these in the order given: it does not place, rank, cut or count.
|
|
206
|
-
*/
|
|
207
|
-
dayEntries?: Record<string, SchedulingCalendarEntry[]>;
|
|
208
|
-
/**
|
|
209
|
-
* The result of `layoutMonthSpans` for this grid. When set, the calendar draws exactly
|
|
210
|
-
* these spans and never packs lanes itself. Compute it with `schedulingGridDays`.
|
|
211
|
-
*/
|
|
212
|
-
spanLayout?: MonthSpanLayout;
|
|
213
|
-
/**
|
|
214
|
-
* Lanes kept for windows above the chips. Windows never take a chip slot. Default 2 where
|
|
215
|
-
* the cells have a fixed height; where they grow with their content every window gets a lane.
|
|
216
|
-
*/
|
|
217
|
-
windowLaneCap?: number;
|
|
218
|
-
/** Lanes kept for entries that cover more than one day. Default as for `windowLaneCap`. */
|
|
219
|
-
spanLaneCap?: number;
|
|
220
|
-
/** When set, the legend is exactly these items (an empty list draws no legend). Unset keeps the built-in state legend. */
|
|
221
|
-
legend?: SchedulingLegendItem[];
|
|
222
|
-
/** A line under the legend, e.g. the display zone. */
|
|
223
|
-
legendCaption?: ReactNode;
|
|
224
|
-
/** `false` hides the previous/next buttons, the title and the view switch (the page has its own toolbar). */
|
|
225
|
-
showHeader?: boolean;
|
|
226
|
-
/** Shown above the grid, e.g. "Showing the first 2,000 items". */
|
|
227
|
-
notice?: ReactNode;
|
|
228
|
-
/** Shown inside the grid, below the day cells, when there is nothing to show. */
|
|
229
|
-
emptyNote?: ReactNode;
|
|
230
|
-
/** Called by a click or Enter on a day number. */
|
|
231
|
-
onSelectDate?: (date: string) => void;
|
|
232
|
-
loading?: boolean;
|
|
233
|
-
error?: string;
|
|
234
|
-
onRetry?: () => void;
|
|
235
|
-
className?: string;
|
|
236
|
-
labels?: Partial<SchedulingCalendarLabels>;
|
|
237
|
-
}
|
|
238
|
-
/** Month/week/agenda calendar for UTC ranges rendered in an explicit IANA time zone. */
|
|
239
|
-
declare function SchedulingCalendar({ entries, anchorDate, timeZone, view: controlledView, onViewChange, onAnchorDateChange, onSelectEntry, overlays, onSelectOverlay, filter, renderEntry, locale, weekStartsOn, formatDate, formatInstant: formatInstantProp, maxEntriesPerDay, onShowMore, renderDayBadge, days: dayInfo, dayEntries, spanLayout, windowLaneCap, spanLaneCap, legend, legendCaption, showHeader, notice, emptyNote, onSelectDate, loading, error, onRetry, className, labels: labelOverrides, }: SchedulingCalendarProps): react.JSX.Element;
|
|
240
|
-
|
|
241
|
-
export { DEFAULT_SCHEDULING_CALENDAR_LABELS, type SchedulingBand, SchedulingCalendar, type SchedulingCalendarDay, type SchedulingCalendarEntry, type SchedulingCalendarLabels, type SchedulingCalendarOverlay, type SchedulingCalendarProps, type SchedulingCalendarView, type SchedulingDatePart, type SchedulingEntryState, type SchedulingLegendItem, type SchedulingMarker, type SchedulingMarkerEmphasis, type SchedulingOverlayKind, type SchedulingOverlayPattern, type SchedulingStatus };
|
|
1
|
+
import 'react';
|
|
2
|
+
import '../calendar-model.js';
|
|
3
|
+
import '../scheduling-calendar-model.js';
|
|
4
|
+
export { D as DEFAULT_SCHEDULING_CALENDAR_LABELS, S as SchedulingBand, a as SchedulingCalendar, b as SchedulingCalendarDay, c as SchedulingCalendarEntry, d as SchedulingCalendarLabels, e as SchedulingCalendarOverlay, f as SchedulingCalendarProps, g as SchedulingCalendarView, h as SchedulingDatePart, i as SchedulingEntryState, j as SchedulingLegendItem, k as SchedulingMarker, l as SchedulingMarkerEmphasis, m as SchedulingOverlayKind, n as SchedulingOverlayPattern, o as SchedulingStatus } from '../SchedulingCalendar-C4XVbqZr.js';
|