@ssa-ui-kit/core 3.23.1 → 3.24.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/dist/ai/source-map.md +155 -52
- package/dist/components/Calendar/Calendar.d.ts +130 -0
- package/dist/components/Calendar/CalendarContext.d.ts +25 -0
- package/dist/components/Calendar/CalendarEventDetails.d.ts +80 -0
- package/dist/components/Calendar/components/CalendarToolbar.d.ts +20 -0
- package/dist/components/Calendar/components/DayView.d.ts +14 -0
- package/dist/components/Calendar/components/EventDetailsLayer.d.ts +17 -0
- package/dist/components/Calendar/components/EventSlot.d.ts +17 -0
- package/dist/components/Calendar/components/HighlightBadge.d.ts +5 -0
- package/dist/components/Calendar/components/MonthView.d.ts +19 -0
- package/dist/components/Calendar/components/MoreEventsPopover.d.ts +16 -0
- package/dist/components/Calendar/components/TaskCheckbox.d.ts +8 -0
- package/dist/components/Calendar/components/useEventClick.d.ts +10 -0
- package/dist/components/Calendar/consts.d.ts +47 -0
- package/dist/components/Calendar/index.d.ts +2 -0
- package/dist/components/Calendar/styles.d.ts +137 -0
- package/dist/components/Calendar/types.d.ts +383 -0
- package/dist/components/Calendar/utils.d.ts +116 -0
- package/dist/components/NestedTable/NestedTableContext.d.ts +3 -3
- package/dist/components/NestedTable/components/NestedTable.d.ts +37 -4
- package/dist/components/NestedTable/components/NestedTableCell.d.ts +2 -3
- package/dist/components/NestedTable/components/NestedTableCellBase.d.ts +16 -0
- package/dist/components/NestedTable/components/NestedTableCellHeader.d.ts +36 -0
- package/dist/components/NestedTable/components/index.d.ts +1 -0
- package/dist/components/NestedTable/consts.d.ts +5 -0
- package/dist/components/NestedTable/hooks/useNestedTableContext.d.ts +1 -1
- package/dist/components/NestedTable/types.d.ts +31 -0
- package/dist/components/Table/ColumnFreezeContext.d.ts +27 -0
- package/dist/components/Table/ColumnFreezeMenu.d.ts +33 -0
- package/dist/components/Table/TableBase.d.ts +8 -1
- package/dist/components/Table/hooks/useColumnFreeze.d.ts +44 -0
- package/dist/components/Table/index.d.ts +2 -0
- package/dist/components/Table/types.d.ts +97 -2
- package/dist/components/Table/utils.d.ts +21 -0
- package/dist/components/TableCellHeader/TableCellHeader.d.ts +2 -1
- package/dist/components/TableCellHeader/types.d.ts +17 -0
- package/dist/components/TableContainer/TableContainer.d.ts +50 -0
- package/dist/components/TableContainer/index.d.ts +2 -0
- package/dist/components/TableContainer/types.d.ts +21 -0
- package/dist/components/index.d.ts +6 -2
- package/dist/index.js +3948 -352
- package/dist/index.mjs +3711 -121
- package/dist/tsbuildcache +1 -1
- package/dist/types/emotion.d.ts +2 -0
- package/package.json +3 -3
package/dist/ai/source-map.md
CHANGED
|
@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
|
|
|
4
4
|
|
|
5
5
|
**Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
190 components · 20 contexts · 23 hooks · 17 functions · 16 constants · 314 exported types
|
|
8
8
|
|
|
9
9
|
## Reading this file
|
|
10
10
|
|
|
@@ -20,7 +20,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
|
|
|
20
20
|
|
|
21
21
|
**Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
|
|
22
22
|
|
|
23
|
-
**Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, Carousel, ChartBackground, Chip, ColumnResizeHandle, Counter, FunnelChart, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
|
|
23
|
+
**Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, Calendar, CalendarEventDetails, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, Carousel, ChartBackground, Chip, ColumnFreezeMenu, ColumnResizeHandle, Counter, FunnelChart, GaugeChart, ImageItem, Indicator, Label, NestedTable, NestedTableCell, NestedTableCellHeader, NestedTableCellSubHeader, NestedTableRow, PieChart, PieChartComponent, PieChartLegend, Progress, ProgressBar, ProgressCircle, ProgressInfo, ProgressInfoTotals, ProgressLegend, ProgressLegendItem, ProgressVertical, ResponsiveImage, SegmentedPieChart, SegmentedPieChartComponent, Table, TableBody, TableCell, TableCellHeader, TableContainer, TableFilterCheckbox, TableFilters, TableFiltersAccordion, TableFiltersAccordionContent, TableFiltersButtons, TableFiltersCancelButton, TableFiltersClearButton, TableFilterTrigger, TableFilterTriggerWithNotification, TableHead, TableRow, Tag, TreeMapChart, TreeMapChartComponent, TreeMapTooltipBase, Typography, WithNestedTableRow
|
|
24
24
|
|
|
25
25
|
**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
|
|
26
26
|
|
|
@@ -916,6 +916,62 @@ Circular component for displaying user identity.
|
|
|
916
916
|
- `features?: BigNumberChartFeatures[]`
|
|
917
917
|
- `valueFormat?: (value: Datum) => React.ReactNode`
|
|
918
918
|
|
|
919
|
+
#### Calendar<TData>
|
|
920
|
+
Shows entries on a month grid or on a single day's hour timeline.
|
|
921
|
+
|
|
922
|
+
- `events?: CalendarEvent<TData>[]` — Entries to show. They don't have to be limited to the visible range.
|
|
923
|
+
- `view?: CalendarView` — Month grid or single-day timeline. Passing it makes the view controlled: change it from `onViewChange`.
|
|
924
|
+
- `defaultView?: CalendarView` `= the first of `views`` — View to start in when `view` isn't controlled.
|
|
925
|
+
- `onViewChange?: (view: CalendarView) => void` — Called when the calendar switches view: a day number opens the `day` view; the day view's back button (shown…
|
|
926
|
+
- `views?: CalendarView[]` `= ['month', 'day']` — Views the user can switch between. With a single view there is no switching: day numbers don't open the day…
|
|
927
|
+
- `date?: CalendarDateInput` — Date on show: any day of the month in the `month` view, the day itself in the `day` view. Passing it makes…
|
|
928
|
+
- `defaultDate?: CalendarDateInput` `= today` — Date to start on when `date` isn't controlled.
|
|
929
|
+
- `onDateChange?: (date: Date) => void` — Called when the calendar moves to another date: the toolbar's arrows and "Today" button, or a day number…
|
|
930
|
+
- `onRangeChange?: (range: CalendarRange) => void` — Called with the days on show whenever they change, and once on mount — the range to fetch events for.
|
|
931
|
+
- `toolbar?: boolean` `= false` — Shows a bar above the grid with previous/next and "Today" buttons, the date on show and, with more than one…
|
|
932
|
+
- `toolbarEnd?: ReactNode` — Content at the end of the toolbar, e.g. a "Create" button.
|
|
933
|
+
- `loading?: boolean` `= false` — Marks the calendar busy while events load: a progress bar runs along the top and the region gets `aria-busy`.…
|
|
934
|
+
- `variant?: CalendarVariant` `= 'events'` — Adds the weekly total column to the month grid. See {@link CalendarVariant}.
|
|
935
|
+
- `weekdays?: 5 | 7` `= 7` — Columns of the month grid: Monday–Friday or Monday–Sunday.
|
|
936
|
+
- `maxEventsPerDay?: number` `= 3` — Entries listed in a month cell before the rest collapse behind a "+N more" button.
|
|
937
|
+
- `renderWeekTotal?: (week: CalendarWeek<TData>) => ReactNode` — Content of the weekly total cell in the `timeTracker` variant.
|
|
938
|
+
- `totalLabel?: ReactNode` `= 'Total'` — Header text of the total column.
|
|
939
|
+
- `footer?: ReactNode` — Bar under the month grid, e.g. "Monthly norm" and "Reported" figures. Laid out as a row with space between…
|
|
940
|
+
- `getDayProps?: (date: Date) => CalendarDayProps | undefined` — Per-day options: whole-day highlights and disabling the add button.
|
|
941
|
+
- `onAddEvent?: (date: Date) => void` — Shows an add button on each day (on hover in the month grid) and in the day view header. Receives the day…
|
|
942
|
+
- `minAddDate?: CalendarDateInput` — First day the add button shows on, e.g. today to stop adding to the past. Inclusive; only the date part…
|
|
943
|
+
- `maxAddDate?: CalendarDateInput` — Last day the add button shows on, e.g. today to stop adding to the future. Inclusive; only the date part…
|
|
944
|
+
- `onEventClick?: (event: CalendarEvent<TData>, info: CalendarEventClickInfo) => void` — Makes entries clickable. `info.anchor` is the clicked element, to anchor your own popover to.
|
|
945
|
+
- `renderEventDetails?: (event: CalendarEvent<TData>, controls: CalendarEventDetailsControls) =…` — Content of the card a clicked entry opens — typically a `CalendarEventDetails`. The calendar positions, opens…
|
|
946
|
+
- `eventDetailsDisplay?: 'popover' | 'modal'` `= 'popover'` — How `renderEventDetails` opens: next to the clicked entry, or centred over the page.
|
|
947
|
+
- `onTaskToggle?: (event: CalendarEvent<TData>, completed: boolean) => void` — Called when a task's checkbox is toggled.
|
|
948
|
+
- `onDayClick?: (date: Date) => void` — Called when a day number of the month grid is clicked. Day numbers also open the `day` view unless switching…
|
|
949
|
+
- `renderEvent?: (event: CalendarEvent<TData>, context: CalendarEventRenderContext) => R…` — Replaces how an entry is drawn. Return `undefined` to fall back to the default for that entry, or…
|
|
950
|
+
- `renderEventActions?: (event: CalendarEvent<TData>, context: CalendarEventSlotContext) => Rea…` — Buttons at the end of an entry, outside its click target — e.g. a remove button. Shown after `trailing`.
|
|
951
|
+
- `getEventProps?: (event: CalendarEvent<TData>) => CalendarEventProps | undefined` — Class name and style for an entry's default rendering, to restyle it per event.
|
|
952
|
+
- `timeFormat?: '24h' | '12h'` `= '24h'` — Clock used for event times and the hour labels of the day view.
|
|
953
|
+
- `dayHeader?: 'weekday' | 'monthYear'` `= 'monthYear'` — Header of the day view: the weekday name, or the month and year.
|
|
954
|
+
- `locale?: string` — Locale for weekday and month names, e.g. `'uk'`. Defaults to the browser's.
|
|
955
|
+
- `scrollToHour?: number` — Hour the day view scrolls to when it opens. Defaults to an hour before the current time on today, and to 8:00…
|
|
956
|
+
- `aria-label?: string` — Accessible name of the calendar region.
|
|
957
|
+
- `style?: CSSProperties`
|
|
958
|
+
|
|
959
|
+
#### CalendarEventDetails
|
|
960
|
+
The card a calendar entry opens: a heading with edit, delete and close buttons, and the entry's details as label/value pairs.
|
|
961
|
+
|
|
962
|
+
- `title: ReactNode` — Heading, e.g. `'Time Log Detail'` or the event's title.
|
|
963
|
+
- `subtitle?: ReactNode` — Text next to the heading, e.g. `'Friday 2'`.
|
|
964
|
+
- `fields?: CalendarEventDetailsField[]` — Label/value pairs, laid out in two columns (one on narrow screens).
|
|
965
|
+
- `children?: ReactNode` — Anything under the fields.
|
|
966
|
+
- `onEdit?: () => void` — Shows an edit button in the header.
|
|
967
|
+
- `onDelete?: () => void` — Shows a delete button in the header.
|
|
968
|
+
- `onClose?: () => void` — Shows a close button in the header.
|
|
969
|
+
- `actions?: ReactNode` — More buttons in the header, before edit and delete.
|
|
970
|
+
- `editLabel?: string` `= 'Edit'`
|
|
971
|
+
- `deleteLabel?: string` `= 'Delete'`
|
|
972
|
+
- `closeLabel?: string` `= 'Close'`
|
|
973
|
+
- `style?: CSSProperties`
|
|
974
|
+
|
|
919
975
|
#### CandlestickChart
|
|
920
976
|
|
|
921
977
|
- `data: CandlestickChartData`
|
|
@@ -1013,6 +1069,11 @@ Compact component for tags, labels, and removable items.
|
|
|
1013
1069
|
- `onClick?: MouseEventHandler<HTMLDivElement>` — Click handler for the chip Makes the chip clickable/interactive
|
|
1014
1070
|
- `clickable?: boolean` — Explicitly mark chip as clickable Used to enable pointer cursor and keyboard interaction Automatically true…
|
|
1015
1071
|
|
|
1072
|
+
#### ColumnFreezeMenu
|
|
1073
|
+
The freeze/unfreeze menu in a table header cell
|
|
1074
|
+
|
|
1075
|
+
- `columnId?: ColumnId` — The column the menu freezes. Defaults to the `data-column-id` of the header cell it sits in, or that cell's…
|
|
1076
|
+
|
|
1016
1077
|
#### ColumnResizeHandle
|
|
1017
1078
|
The grab area on a column's right edge
|
|
1018
1079
|
|
|
@@ -1091,6 +1152,18 @@ Stage diagram drawn as a funnel or a triangle
|
|
|
1091
1152
|
#### NestedTable
|
|
1092
1153
|
Table whose rows collapse into expandable groups.
|
|
1093
1154
|
|
|
1155
|
+
- `resizableColumns?: boolean` `= false` — Lets columns be resized by dragging the right edge of each header cell.
|
|
1156
|
+
- `columnWidths?: number[]` — Column widths in pixels, one per column. Passing this prop puts the table into controlled mode for the life…
|
|
1157
|
+
- `defaultColumnWidths?: number[]` — Starting column widths in pixels, for the uncontrolled case. Omit it and the table measures its own columns…
|
|
1158
|
+
- `onColumnWidthsChange?: (columnWidths: number[]) => void` — Called on every width change, including each frame of a drag. Persisting widths is the caller's job — write…
|
|
1159
|
+
- `minColumnWidth?: number` `= 64` — Narrowest a column can be dragged, in pixels.
|
|
1160
|
+
- `maxColumnWidth?: number` — Widest a column can be dragged, in pixels. Unbounded when omitted.
|
|
1161
|
+
- `columnResizeMode?: ColumnResizeMode` `= 'fit'` — Whether a resize is paid for by the next column or by the table's own width. Defaults to `fit`, which keeps…
|
|
1162
|
+
- `frozenColumns?: FrozenColumns` — Columns frozen to each edge. Passing this prop puts freezing into controlled mode — hold the value in state…
|
|
1163
|
+
- `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with, for the uncontrolled case.
|
|
1164
|
+
- `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns from the header controls. Always receives both lists.
|
|
1165
|
+
- `freezeControls?: boolean` `= false` — Gives every `TableCellHeader` a menu to freeze its column to either edge, or unfreeze it. Independent of…
|
|
1166
|
+
- `stickyHeader?: boolean` `= false` — Keeps the header row in view while the table scrolls vertically. Needs a scroll container with a height…
|
|
1094
1167
|
- `collapsedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'carrot-up'` — Toggle icon shown while a group is collapsed.
|
|
1095
1168
|
- `expandedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(223 more — full list under "Icon.name")` `= 'carrot-down'` — Toggle icon shown while a group is expanded.
|
|
1096
1169
|
- `defaultCollapsed?: boolean` `= false` — Whether groups start collapsed. Applies to every group in the table; a single `WithNestedTableRow` can…
|
|
@@ -1099,7 +1172,16 @@ Table whose rows collapse into expandable groups.
|
|
|
1099
1172
|
#### NestedTableCell
|
|
1100
1173
|
Cell for a `NestedTableRow`.
|
|
1101
1174
|
|
|
1102
|
-
|
|
1175
|
+
- `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
|
|
1176
|
+
- _plus native element attributes_
|
|
1177
|
+
|
|
1178
|
+
#### NestedTableCellHeader
|
|
1179
|
+
Column header cell for a `NestedTable`.
|
|
1180
|
+
|
|
1181
|
+
- `resizable?: boolean` `= true` — Whether this column can be resized inside a `Table` with `resizableColumns`. Set it to `false` to pin a…
|
|
1182
|
+
- `freezable?: boolean` `= true` — Whether this header cell offers the freeze menu inside a `Table` with `freezeControls`. Set it to `false` for…
|
|
1183
|
+
- `columnId?: ColumnId` — Stable id for this column, used by `frozenColumns` on the `Table`. Give every header one when the app can…
|
|
1184
|
+
- `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
|
|
1103
1185
|
- _plus native element attributes_
|
|
1104
1186
|
|
|
1105
1187
|
#### NestedTableCellSubHeader
|
|
@@ -1267,6 +1349,11 @@ Base table component for displaying tabular data
|
|
|
1267
1349
|
- `minColumnWidth?: number` `= 64` — Narrowest a column can be dragged, in pixels.
|
|
1268
1350
|
- `maxColumnWidth?: number` — Widest a column can be dragged, in pixels. Unbounded when omitted.
|
|
1269
1351
|
- `columnResizeMode?: ColumnResizeMode` `= 'fit'` — Whether a resize is paid for by the next column or by the table's own width. Defaults to `fit`, which keeps…
|
|
1352
|
+
- `frozenColumns?: FrozenColumns` — Columns frozen to each edge. Passing this prop puts freezing into controlled mode — hold the value in state…
|
|
1353
|
+
- `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with, for the uncontrolled case.
|
|
1354
|
+
- `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns from the header controls. Always receives both lists.
|
|
1355
|
+
- `freezeControls?: boolean` `= false` — Gives every `TableCellHeader` a menu to freeze its column to either edge, or unfreeze it. Independent of…
|
|
1356
|
+
- `stickyHeader?: boolean` `= false` — Keeps the header row in view while the table scrolls vertically. Needs a scroll container with a height…
|
|
1270
1357
|
- _plus native element attributes_
|
|
1271
1358
|
|
|
1272
1359
|
#### TableBody
|
|
@@ -1285,9 +1372,17 @@ Table data cell component
|
|
|
1285
1372
|
Table header cell component
|
|
1286
1373
|
|
|
1287
1374
|
- `resizable?: boolean` `= true` — Whether this column can be resized inside a `Table` with `resizableColumns`. Set it to `false` to pin a…
|
|
1375
|
+
- `freezable?: boolean` `= true` — Whether this header cell offers the freeze menu inside a `Table` with `freezeControls`. Set it to `false` for…
|
|
1376
|
+
- `columnId?: ColumnId` — Stable id for this column, used by `frozenColumns` on the `Table`. Give every header one when the app can…
|
|
1288
1377
|
- `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
|
|
1289
1378
|
- _plus native element attributes_
|
|
1290
1379
|
|
|
1380
|
+
#### TableContainer
|
|
1381
|
+
The scroll area around a table
|
|
1382
|
+
|
|
1383
|
+
- `maxHeight?: Property.MaxHeight<string | number>` — Tallest the container gets before the table scrolls vertically. Any CSS value: a number of pixels, `'60vh'`,…
|
|
1384
|
+
- _plus native element attributes_
|
|
1385
|
+
|
|
1291
1386
|
#### TableFilterCheckbox
|
|
1292
1387
|
|
|
1293
1388
|
- `text?: ReactNode` — Label text or custom React node to display next to the checkbox Can be a string, number, or any React node
|
|
@@ -2174,6 +2269,7 @@ A sticky action bar across the bottom of the panel.
|
|
|
2174
2269
|
- `useButtonGroupContext` — Access the enclosing `ButtonGroup`'s selection state.
|
|
2175
2270
|
- `useCollapsibleNavBarContext`
|
|
2176
2271
|
- `useCollapsibleNavBarItemContext`
|
|
2272
|
+
- `useColumnFreezeContext` — The enclosing table's column-freezing state, or `null` when it has none.
|
|
2177
2273
|
- `useColumnResize` — Column resizing for a `Table`, without any of the rendering.
|
|
2178
2274
|
- `useColumnResizeContext` — The enclosing table's resize API, or `null` when there isn't one.
|
|
2179
2275
|
- `useDrawer`
|
|
@@ -2253,58 +2349,65 @@ _Names only — read the `.d.ts` for their shape._
|
|
|
2253
2349
|
`BigNumberChartProps` · `BreadcrumbItem` · `BreadcrumbMatchContext` · `BreadcrumbRouteHandle`
|
|
2254
2350
|
`BreadcrumbSibling` · `BreadcrumbsProps` · `ButtonGroupButtonProps` · `ButtonGroupContextValue`
|
|
2255
2351
|
`ButtonGroupItemInput` · `ButtonGroupItem` · `ButtonGroupProps` · `ButtonGroupValue` · `ButtonProps`
|
|
2256
|
-
`ButtonTextProps` · `ButtonVariants` · `
|
|
2257
|
-
`
|
|
2258
|
-
`
|
|
2259
|
-
`
|
|
2260
|
-
`
|
|
2261
|
-
`
|
|
2262
|
-
`
|
|
2263
|
-
`
|
|
2264
|
-
`
|
|
2265
|
-
`
|
|
2266
|
-
`
|
|
2267
|
-
`
|
|
2268
|
-
`
|
|
2269
|
-
`
|
|
2270
|
-
`
|
|
2271
|
-
`
|
|
2352
|
+
`ButtonTextProps` · `ButtonVariants` · `CalendarColor` · `CalendarDateInput`
|
|
2353
|
+
`CalendarDayHighlight` · `CalendarDayProps` · `CalendarEventClickInfo`
|
|
2354
|
+
`CalendarEventDetailsControls` · `CalendarEventDetailsField` · `CalendarEventDetailsProps`
|
|
2355
|
+
`CalendarEventProps` · `CalendarEventRenderContext` · `CalendarEventSlotContext` · `CalendarEvent`
|
|
2356
|
+
`CalendarHighlightColor` · `CalendarProps` · `CalendarRange` · `CalendarType` · `CalendarVariant`
|
|
2357
|
+
`CalendarView` · `CalendarWeek` · `CandlestickChartFeatures` · `CandlestickChartProps`
|
|
2358
|
+
`CardListProps` · `CardProps` · `CarouselControlsPosition` · `CarouselFit` · `CarouselItem`
|
|
2359
|
+
`CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps` · `ChildrenDataProps` · `ChipColor`
|
|
2360
|
+
`ChipProps` · `ChipSize` · `ChipVariant` · `CollapsibleNavBarExtendedProps`
|
|
2361
|
+
`CollapsibleNavBarGroup` · `CollapsibleNavBarHeader` · `CollapsibleNavBarItem`
|
|
2362
|
+
`ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi` · `ColumnFreezeMenuProps`
|
|
2363
|
+
`ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi` · `ColumnResizeHandleProps`
|
|
2364
|
+
`ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps` · `ContextType` · `ControlledButtonProps`
|
|
2365
|
+
`CounterProps` · `CounterSizes` · `CounterVariants` · `CustomIconProps` · `CustomTagStyles`
|
|
2366
|
+
`DatePickerContextProps` · `DatePickerFormat` · `DatePickerProps` · `DateRangePickerContextProps`
|
|
2367
|
+
`DateRangePickerFormBridgeProps` · `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates`
|
|
2368
|
+
`DateRangePickerProps` · `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple`
|
|
2369
|
+
`DeprecatedOpenStateProps` · `DropdownContextType` · `DropdownOptionProps` · `DropdownPositions`
|
|
2370
|
+
`DropdownProps` · `DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams`
|
|
2371
|
+
`DynamicToastParams` · `FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps`
|
|
2372
|
+
`FieldErrorProps` · `FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
|
|
2272
2373
|
`FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
|
|
2273
2374
|
`FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
|
|
2274
2375
|
`FiltersMultiSelectProps` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
|
|
2275
|
-
`
|
|
2276
|
-
`
|
|
2277
|
-
`
|
|
2278
|
-
`
|
|
2279
|
-
`
|
|
2280
|
-
`
|
|
2281
|
-
`
|
|
2282
|
-
`
|
|
2283
|
-
`
|
|
2284
|
-
`
|
|
2285
|
-
`
|
|
2286
|
-
`
|
|
2287
|
-
`
|
|
2288
|
-
`
|
|
2289
|
-
`
|
|
2290
|
-
`
|
|
2291
|
-
`
|
|
2292
|
-
`
|
|
2293
|
-
`
|
|
2294
|
-
`
|
|
2295
|
-
`
|
|
2296
|
-
`
|
|
2297
|
-
`
|
|
2298
|
-
`
|
|
2299
|
-
`
|
|
2300
|
-
`
|
|
2301
|
-
`
|
|
2302
|
-
`
|
|
2303
|
-
`
|
|
2304
|
-
`
|
|
2305
|
-
`
|
|
2306
|
-
`
|
|
2307
|
-
`
|
|
2376
|
+
`FrozenColumns` · `FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps`
|
|
2377
|
+
`FunnelChartRender` · `FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold`
|
|
2378
|
+
`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `HistoryItemType`
|
|
2379
|
+
`HistoryProps` · `IFormCheckboxProps` · `IconButtonProps` · `IconProps` · `ImageItemProps`
|
|
2380
|
+
`IndicatorProps` · `InputColors` · `InputProps` · `InputStatusColors` · `InteractionsEnabled`
|
|
2381
|
+
`Item` · `LabelProps` · `LargeTabProps` · `LastFocusedElement` · `LinkProps` · `LinksTabBarProps`
|
|
2382
|
+
`MainColors` · `MainSizes` · `MapIconsType` · `ModalContextProps` · `ModalDialogProps`
|
|
2383
|
+
`ModalProps` · `ModalRootProps` · `MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup`
|
|
2384
|
+
`NavBarExtendedItem` · `NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps`
|
|
2385
|
+
`NestedTableCellHeaderProps` · `NestedTableContextType` · `NestedTableContextValue`
|
|
2386
|
+
`NestedTableProps` · `NestedTableRowContextType` · `NotificationCardProps`
|
|
2387
|
+
`NotificationDynamicProps` · `NotificationGlobalSharedProps` · `NotificationMenuProps`
|
|
2388
|
+
`NotificationPositions` · `NotificationProps` · `NotificationSharedProps` · `NotificationSizes`
|
|
2389
|
+
`NotificationStyleOverrides` · `NotificationType` · `NotificationVariants` · `NumberFieldProps`
|
|
2390
|
+
`OpenStateProps` · `OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps`
|
|
2391
|
+
`PaginationContextProps` · `PaginationContextProviderProps` · `PaginationProps` · `PaletteColor`
|
|
2392
|
+
`Palette` · `PeriodOption` · `Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps`
|
|
2393
|
+
`PersonInfoCounterTooltipUser` · `PersonInfoCounterTooltip` · `PersonInfoLinkAttributes`
|
|
2394
|
+
`PersonInfoProps` · `PersonInfoStyles` · `PersonInfoValueProps` · `PickerType` · `PieChartFeatures`
|
|
2395
|
+
`PieChartLegendItem` · `PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps`
|
|
2396
|
+
`PieChartTooltipViewProps` · `PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions`
|
|
2397
|
+
`PopoverTriggerProps` · `ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps`
|
|
2398
|
+
`ProgressInfoItemProps` · `ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps`
|
|
2399
|
+
`ProgressProps` · `RGBString` · `RadioGroupProps` · `RadioProps` · `RangePickerType`
|
|
2400
|
+
`RenderContentProps` · `ResizeHandleProps` · `ResolveDeprecatedPropOptions` · `ResolvedOpenState`
|
|
2401
|
+
`ResponsiveImageProps` · `SVGProps` · `SearchBoxProps` · `SelectedFilter` · `SetIDs`
|
|
2402
|
+
`SimpleChartTooltipProps` · `SizeStyles` · `SliderMark` · `SliderProps` · `SliderSize`
|
|
2403
|
+
`SmallTabProps` · `StepperContextType` · `StepperProps` · `SwitchContext` · `SwitchProps`
|
|
2404
|
+
`TabBarContextProps` · `TabBarLink` · `TabBarProps` · `TabBaseProps` · `TabProps`
|
|
2405
|
+
`TableContainerProps` · `TableProps` · `TagsProps` · `TextFieldProps` · `TextareaProps` · `Theme`
|
|
2406
|
+
`ToastProps` · `ToastVariants` · `TooltipArrowProps` · `TooltipColor` · `TooltipContentProps`
|
|
2407
|
+
`TooltipContentSizes` · `TooltipContextType` · `TooltipProps` · `TooltipSize`
|
|
2408
|
+
`TooltipTriggerProps` · `TranslationContextContent` · `TreeItemBase` · `TreeItemLevel2`
|
|
2409
|
+
`TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem` · `TreeLevel` · `TreeMapChartFeature`
|
|
2410
|
+
`TreeMapChartProps` · `TreeNode` · `TreeViewProps` · `TypeaheadItemProps`
|
|
2308
2411
|
`TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps` · `TypeaheadValue`
|
|
2309
2412
|
`TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo` · `UseColumnResizeOptions`
|
|
2310
2413
|
`UseDrawerOptions` · `UseFiltersMultiSelectOptions` · `UseFiltersMultiSelectStore` · `UsePopover`
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
import { ReactElement, Ref } from 'react';
|
|
2
|
+
import { CalendarProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Calendar - Shows entries on a month grid or on a single day's hour
|
|
5
|
+
* timeline.
|
|
6
|
+
*
|
|
7
|
+
* ### Entries
|
|
8
|
+
* An entry (`CalendarEvent`) has a `start` and, when timed, an `end`.
|
|
9
|
+
* Entries with `allDay` have no time of day: holidays, reminders, or time
|
|
10
|
+
* logs that record how long but not when. Each entry has a colour stripe from
|
|
11
|
+
* the nine-colour palette, an optional `trailing` node (a duration, a badge,
|
|
12
|
+
* avatars) and can be a `task` with a completion checkbox.
|
|
13
|
+
*
|
|
14
|
+
* ### Month view
|
|
15
|
+
* Monday-first weeks, 5 or 7 columns. A cell lists `maxEventsPerDay` entries
|
|
16
|
+
* and collapses the rest behind "+N more", which opens them in a popover.
|
|
17
|
+
* `getDayProps` can turn a day into a whole-day highlight (tinted, outlined,
|
|
18
|
+
* with a badge — days off, holidays) or hide its add button.
|
|
19
|
+
*
|
|
20
|
+
* The `timeTracker` variant adds a total column per week with content from
|
|
21
|
+
* `renderWeekTotal`; `footer` adds a bar under the grid. The calendar never
|
|
22
|
+
* adds anything up itself — totals are whatever the consumer renders.
|
|
23
|
+
*
|
|
24
|
+
* ### Day view
|
|
25
|
+
* Untimed entries are listed above 00:00; timed ones are placed on the hour
|
|
26
|
+
* timeline, side by side where they overlap. A timed entry that runs past
|
|
27
|
+
* midnight continues on the next day's timeline. Today shows a line at the
|
|
28
|
+
* current time.
|
|
29
|
+
*
|
|
30
|
+
* ### Multi-day entries
|
|
31
|
+
* An untimed entry with an `end`, or a timed one lasting 24 hours or more,
|
|
32
|
+
* is repeated on every day it covers, with chevrons where it continues. On
|
|
33
|
+
* the days it fills, it's listed with the untimed entries.
|
|
34
|
+
*
|
|
35
|
+
* ### Navigation
|
|
36
|
+
* Left alone, the calendar navigates itself: a day number opens that day,
|
|
37
|
+
* the day view's back button returns to the month, and `toolbar` adds
|
|
38
|
+
* previous / today / next buttons and a Month/Day toggle. Pass `view` and
|
|
39
|
+
* `date` to control them instead — with `onViewChange` and `onDateChange`,
|
|
40
|
+
* or without them to pin them. `views` limits the views on offer.
|
|
41
|
+
* `onRangeChange` reports the days on show, to fetch events for.
|
|
42
|
+
*
|
|
43
|
+
* ### Entries: clicks, details and custom looks
|
|
44
|
+
* `onEventClick` and `renderEventDetails` make entries clickable. The
|
|
45
|
+
* latter's content (typically a `CalendarEventDetails`) opens next to the
|
|
46
|
+
* entry, or centred with `eventDetailsDisplay="modal"`.
|
|
47
|
+
* `renderEventActions` adds buttons (e.g. remove) outside the click target;
|
|
48
|
+
* `getEventProps` restyles an entry; `renderEvent` replaces or wraps it.
|
|
49
|
+
*
|
|
50
|
+
* ### Sizing
|
|
51
|
+
* The calendar fills its container's width. The month grid is as tall as its
|
|
52
|
+
* rows. The day view shows twelve hours and scrolls; give the calendar a
|
|
53
|
+
* height (e.g. `style={{ height: '100%' }}` or `flex: 1`) and it fills that
|
|
54
|
+
* instead.
|
|
55
|
+
*
|
|
56
|
+
* @category Components
|
|
57
|
+
* @subcategory Data Display
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* ```tsx
|
|
61
|
+
* <Calendar
|
|
62
|
+
* date={new Date()}
|
|
63
|
+
* events={[
|
|
64
|
+
* { id: 1, title: 'Planning', start: '2026-10-12T10:00', end: '2026-10-12T11:00', color: 'purple' },
|
|
65
|
+
* { id: 2, title: 'Release day', start: '2026-10-14', allDay: true, color: 'green' },
|
|
66
|
+
* ]}
|
|
67
|
+
* onAddEvent={(date) => openCreateModal(date)}
|
|
68
|
+
* onEventClick={(event) => openDetails(event)}
|
|
69
|
+
* />
|
|
70
|
+
* ```
|
|
71
|
+
*
|
|
72
|
+
* @example
|
|
73
|
+
* ```tsx
|
|
74
|
+
* // Time tracker: untimed logs with durations, weekly totals, a footer
|
|
75
|
+
* <Calendar
|
|
76
|
+
* variant="timeTracker"
|
|
77
|
+
* weekdays={5}
|
|
78
|
+
* events={logs.map((log) => ({
|
|
79
|
+
* id: log.id,
|
|
80
|
+
* title: log.activity,
|
|
81
|
+
* start: log.date,
|
|
82
|
+
* allDay: true,
|
|
83
|
+
* trailing: formatHours(log.hours),
|
|
84
|
+
* }))}
|
|
85
|
+
* renderWeekTotal={(week) => `${sumHours(week.events)} hr(s)`}
|
|
86
|
+
* footer={<><span>Monthly norm: 174:00</span><span>Reported 80:00</span></>}
|
|
87
|
+
* getDayProps={(date) =>
|
|
88
|
+
* isVacation(date)
|
|
89
|
+
* ? { highlight: { color: 'yellow', icon: 'vacation', label: 'Vacation' } }
|
|
90
|
+
* : undefined
|
|
91
|
+
* }
|
|
92
|
+
* />
|
|
93
|
+
* ```
|
|
94
|
+
*
|
|
95
|
+
* @example
|
|
96
|
+
* ```tsx
|
|
97
|
+
* // Self-navigating, with a toolbar, details on click and loading state
|
|
98
|
+
* <Calendar
|
|
99
|
+
* toolbar
|
|
100
|
+
* events={events}
|
|
101
|
+
* loading={isFetching}
|
|
102
|
+
* onRangeChange={({ start, end }) => fetchEvents(start, end)}
|
|
103
|
+
* renderEventDetails={(event, { close }) => (
|
|
104
|
+
* <CalendarEventDetails
|
|
105
|
+
* title={event.title}
|
|
106
|
+
* fields={[{ label: 'Location', value: event.data.location }]}
|
|
107
|
+
* onDelete={() => remove(event.id)}
|
|
108
|
+
* onClose={close}
|
|
109
|
+
* />
|
|
110
|
+
* )}
|
|
111
|
+
* />
|
|
112
|
+
* ```
|
|
113
|
+
*
|
|
114
|
+
* @example
|
|
115
|
+
* ```tsx
|
|
116
|
+
* // A single day, 12-hour clock
|
|
117
|
+
* <Calendar view="day" date={day} events={events} timeFormat="12h" />
|
|
118
|
+
* ```
|
|
119
|
+
*
|
|
120
|
+
* @accessibility
|
|
121
|
+
* - Root is a labelled `region`; each month cell is a `group` named by its full date
|
|
122
|
+
* - Today's date carries `aria-current="date"`
|
|
123
|
+
* - Add buttons show on hover but stay in the tab order, and are always visible on touch screens
|
|
124
|
+
* - Clickable entries, day numbers and "+N more" are real buttons
|
|
125
|
+
* - Entry details open as a labelled `dialog`; Escape closes it and focus returns to the entry
|
|
126
|
+
* - `aria-busy` is set while `loading`
|
|
127
|
+
*/
|
|
128
|
+
export declare const Calendar: <TData = unknown>(props: CalendarProps<TData> & {
|
|
129
|
+
ref?: Ref<HTMLDivElement>;
|
|
130
|
+
}) => ReactElement;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { DateTime } from 'luxon';
|
|
2
|
+
import { CalendarEvent, CalendarProps } from './types';
|
|
3
|
+
/**
|
|
4
|
+
* Props every part of the calendar reads, shared through context so the
|
|
5
|
+
* views don't have to pass them down level by level.
|
|
6
|
+
*/
|
|
7
|
+
export type CalendarContextValue = Pick<CalendarProps, 'getDayProps' | 'onAddEvent' | 'onTaskToggle' | 'onDayClick' | 'renderEvent' | 'renderEventActions' | 'getEventProps' | 'locale'> & {
|
|
8
|
+
timeFormat: '24h' | '12h';
|
|
9
|
+
/**
|
|
10
|
+
* Whether a day gets an add button, going by `onAddEvent` and
|
|
11
|
+
* `minAddDate` / `maxAddDate` (not `getDayProps`, which the views apply).
|
|
12
|
+
*/
|
|
13
|
+
canAddOn: (date: DateTime) => boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Fires `onEventClick` and opens the details card. `undefined` when
|
|
16
|
+
* entries aren't clickable.
|
|
17
|
+
*/
|
|
18
|
+
activateEvent?: (event: CalendarEvent, anchor: HTMLElement) => void;
|
|
19
|
+
/** Opens a day in the `day` view, when the calendar may switch to it. */
|
|
20
|
+
openDay?: (date: Date) => void;
|
|
21
|
+
/** Back from the `day` view to the month, when the calendar may. */
|
|
22
|
+
backToMonth?: () => void;
|
|
23
|
+
};
|
|
24
|
+
export declare const CalendarContext: import("react").Context<CalendarContextValue | null>;
|
|
25
|
+
export declare const useCalendarContext: () => CalendarContextValue;
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* A label/value pair of {@link CalendarEventDetails}.
|
|
4
|
+
*/
|
|
5
|
+
export type CalendarEventDetailsField = {
|
|
6
|
+
label: ReactNode;
|
|
7
|
+
value: ReactNode;
|
|
8
|
+
/**
|
|
9
|
+
* Spans both columns — for prose such as a description.
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
fullWidth?: boolean;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Props of {@link CalendarEventDetails}.
|
|
16
|
+
*/
|
|
17
|
+
export type CalendarEventDetailsProps = {
|
|
18
|
+
/** Heading, e.g. `'Time Log Detail'` or the event's title. */
|
|
19
|
+
title: ReactNode;
|
|
20
|
+
/** Text next to the heading, e.g. `'Friday 2'`. */
|
|
21
|
+
subtitle?: ReactNode;
|
|
22
|
+
/** Label/value pairs, laid out in two columns (one on narrow screens). */
|
|
23
|
+
fields?: CalendarEventDetailsField[];
|
|
24
|
+
/** Anything under the fields. */
|
|
25
|
+
children?: ReactNode;
|
|
26
|
+
/** Shows an edit button in the header. */
|
|
27
|
+
onEdit?: () => void;
|
|
28
|
+
/** Shows a delete button in the header. */
|
|
29
|
+
onDelete?: () => void;
|
|
30
|
+
/** Shows a close button in the header. */
|
|
31
|
+
onClose?: () => void;
|
|
32
|
+
/** More buttons in the header, before edit and delete. */
|
|
33
|
+
actions?: ReactNode;
|
|
34
|
+
/** @default 'Edit' */
|
|
35
|
+
editLabel?: string;
|
|
36
|
+
/** @default 'Delete' */
|
|
37
|
+
deleteLabel?: string;
|
|
38
|
+
/** @default 'Close' */
|
|
39
|
+
closeLabel?: string;
|
|
40
|
+
className?: string;
|
|
41
|
+
style?: CSSProperties;
|
|
42
|
+
};
|
|
43
|
+
/**
|
|
44
|
+
* CalendarEventDetails - The card a calendar entry opens: a heading with
|
|
45
|
+
* edit, delete and close buttons, and the entry's details as label/value
|
|
46
|
+
* pairs.
|
|
47
|
+
*
|
|
48
|
+
* Made for `Calendar`'s `renderEventDetails`, which positions and opens it;
|
|
49
|
+
* it holds no data of its own, so it works for any kind of entry.
|
|
50
|
+
*
|
|
51
|
+
* @category Components
|
|
52
|
+
* @subcategory Data Display
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <Calendar
|
|
57
|
+
* events={logs}
|
|
58
|
+
* renderEventDetails={(event, { close }) => (
|
|
59
|
+
* <CalendarEventDetails
|
|
60
|
+
* title="Time Log Detail"
|
|
61
|
+
* subtitle="Friday 2"
|
|
62
|
+
* fields={[
|
|
63
|
+
* { label: 'Date', value: '02.10.2026' },
|
|
64
|
+
* { label: 'Project', value: event.data.project },
|
|
65
|
+
* { label: 'Notes', value: event.data.notes, fullWidth: true },
|
|
66
|
+
* ]}
|
|
67
|
+
* onEdit={() => openEditModal(event)}
|
|
68
|
+
* onDelete={() => { remove(event.id); close(); }}
|
|
69
|
+
* onClose={close}
|
|
70
|
+
* />
|
|
71
|
+
* )}
|
|
72
|
+
* />
|
|
73
|
+
* ```
|
|
74
|
+
*
|
|
75
|
+
* @accessibility
|
|
76
|
+
* - The heading is an `h2`; inside the calendar the card is a labelled `dialog`
|
|
77
|
+
* - Edit, delete and close are icon buttons named by `editLabel`, `deleteLabel` and `closeLabel`
|
|
78
|
+
* - Fields are a description list (`dl`)
|
|
79
|
+
*/
|
|
80
|
+
export declare const CalendarEventDetails: ({ title, subtitle, fields, children, onEdit, onDelete, onClose, actions, editLabel, deleteLabel, closeLabel, className, style, }: CalendarEventDetailsProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { DateTime } from 'luxon';
|
|
3
|
+
import { CalendarView } from '../types';
|
|
4
|
+
type CalendarToolbarProps = {
|
|
5
|
+
view: CalendarView;
|
|
6
|
+
date: DateTime;
|
|
7
|
+
locale?: string;
|
|
8
|
+
/** Moves to a date; `undefined` when the date can't move. */
|
|
9
|
+
onNavigate?: (date: DateTime) => void;
|
|
10
|
+
/** Views to toggle between; the toggle shows with two or more. */
|
|
11
|
+
views: CalendarView[];
|
|
12
|
+
onViewChange?: (view: CalendarView) => void;
|
|
13
|
+
end?: ReactNode;
|
|
14
|
+
};
|
|
15
|
+
/**
|
|
16
|
+
* The bar above the grid: previous / today / next, the date on show, the
|
|
17
|
+
* consumer's content and the view toggle.
|
|
18
|
+
*/
|
|
19
|
+
export declare const CalendarToolbar: ({ view, date, locale, onNavigate, views, onViewChange, end, }: CalendarToolbarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
20
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { DateTime } from 'luxon';
|
|
2
|
+
import { NormalizedEvent } from '../utils';
|
|
3
|
+
type DayViewProps = {
|
|
4
|
+
date: DateTime;
|
|
5
|
+
items: NormalizedEvent[];
|
|
6
|
+
header: 'weekday' | 'monthYear';
|
|
7
|
+
scrollToHour?: number;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* A single day: header, untimed entries above 00:00, and an hour timeline
|
|
11
|
+
* with the timed entries placed by time. Overlapping entries share the width.
|
|
12
|
+
*/
|
|
13
|
+
export declare const DayView: ({ date, items, header, scrollToHour, }: DayViewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
type EventDetailsLayerProps = {
|
|
3
|
+
/** The clicked entry. Only used to place the `popover`. */
|
|
4
|
+
anchor: HTMLElement;
|
|
5
|
+
display: 'popover' | 'modal';
|
|
6
|
+
/** Accessible name of the dialog. */
|
|
7
|
+
label: string;
|
|
8
|
+
onClose: () => void;
|
|
9
|
+
children: ReactNode;
|
|
10
|
+
};
|
|
11
|
+
/**
|
|
12
|
+
* Holds `renderEventDetails` content: a dialog next to the clicked entry, or
|
|
13
|
+
* centred over a dimmed page. Escape and a click outside close it; focus
|
|
14
|
+
* moves in and returns to the entry.
|
|
15
|
+
*/
|
|
16
|
+
export declare const EventDetailsLayer: ({ anchor, display, label, onClose, children, }: EventDetailsLayerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { CalendarView } from '../types';
|
|
2
|
+
import { NormalizedEvent } from '../utils';
|
|
3
|
+
type EventSlotProps = {
|
|
4
|
+
item: NormalizedEvent;
|
|
5
|
+
view: CalendarView;
|
|
6
|
+
inPopover?: boolean;
|
|
7
|
+
/** Called after the entry is activated, e.g. to close the popover. */
|
|
8
|
+
onClicked?: () => void;
|
|
9
|
+
/** Element to anchor the details to instead of the entry itself. */
|
|
10
|
+
getAnchor?: () => HTMLElement | null;
|
|
11
|
+
};
|
|
12
|
+
/**
|
|
13
|
+
* A 34px entry row, as listed in month cells, the "+N more" popover and the
|
|
14
|
+
* day view's untimed entries.
|
|
15
|
+
*/
|
|
16
|
+
export declare const EventSlot: ({ item, view, inPopover, onClicked, getAnchor, }: EventSlotProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
17
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { DateTime } from 'luxon';
|
|
3
|
+
import { CalendarWeek } from '../types';
|
|
4
|
+
import { NormalizedEvent } from '../utils';
|
|
5
|
+
type MonthViewProps = {
|
|
6
|
+
month: DateTime;
|
|
7
|
+
eventsByDay: Map<string, NormalizedEvent[]>;
|
|
8
|
+
weekdays: 5 | 7;
|
|
9
|
+
maxEventsPerDay: number;
|
|
10
|
+
renderWeekTotal?: (week: CalendarWeek) => ReactNode;
|
|
11
|
+
totalLabel: ReactNode;
|
|
12
|
+
footer?: ReactNode;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* The month grid: weekday header, a row of day cells per week (plus the
|
|
16
|
+
* weekly total in the `timeTracker` variant) and the optional footer.
|
|
17
|
+
*/
|
|
18
|
+
export declare const MonthView: ({ month, eventsByDay, weekdays, maxEventsPerDay, renderWeekTotal, totalLabel, footer, }: MonthViewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
19
|
+
export {};
|