@ssa-ui-kit/core 3.23.1 → 3.24.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/dist/ai/source-map.md +149 -43
- 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 +49 -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/Carousel/Carousel.d.ts +8 -2
- package/dist/components/Carousel/FullImageModal.d.ts +12 -0
- package/dist/components/Carousel/styles.d.ts +5 -0
- package/dist/components/Carousel/types.d.ts +17 -4
- package/dist/components/Charts/FunnelChart/FunnelChart.d.ts +4 -3
- package/dist/components/Charts/FunnelChart/types.d.ts +11 -1
- package/dist/components/Charts/FunnelChart/utils.d.ts +12 -1
- 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 +4158 -386
- package/dist/index.mjs +4154 -388
- 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 · 315 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`
|
|
@@ -978,10 +1034,11 @@ Shows a set of images one at a time, with optional thumbnails, dot indicators, p
|
|
|
978
1034
|
- `showDots?: boolean` `= true` — Show the dot indicators (see `controlsPosition`).
|
|
979
1035
|
- `showArrows?: boolean` `= true` — Show the previous/next buttons (see `controlsPosition`).
|
|
980
1036
|
- `controlsPosition?: CarouselControlsPosition` `= 'overlay'` — Where the dots and arrows sit. `overlay` draws them over the bottom of the slide; `below` puts them in a 32px…
|
|
981
|
-
- `allowOpenFull?: boolean` `= false` — Show a button that opens the current image (`fullSrc ?? src`) in a new tab
|
|
1037
|
+
- `allowOpenFull?: boolean` `= false` — Show a button that opens the current image (`fullSrc ?? src`), in a new tab or a modal (see `openFullMode`).…
|
|
1038
|
+
- `openFullMode?: CarouselOpenFullMode` `= 'newTab'` — Where the `allowOpenFull` button opens the image. `modal` shows it over a dimmed page at its natural size,…
|
|
982
1039
|
- `aspectRatio?: number` `= 1` — Width-to-height ratio of the slide. The slide always fills the container's width; this sets its height.…
|
|
983
1040
|
- `height?: Property.Height<string | number>` — Fixed slide height (number = px). Overrides `aspectRatio`.
|
|
984
|
-
- `fit?: CarouselFit` `= '
|
|
1041
|
+
- `fit?: CarouselFit` `= 'cover'` — How images fill the slide frame.
|
|
985
1042
|
- `index?: number` — Index of the current slide (controlled).
|
|
986
1043
|
- `defaultIndex?: number` `= 0` — Index of the slide shown first (uncontrolled).
|
|
987
1044
|
- `onIndexChange?: (index: number) => void` — Called whenever the current slide changes.
|
|
@@ -1013,6 +1070,11 @@ Compact component for tags, labels, and removable items.
|
|
|
1013
1070
|
- `onClick?: MouseEventHandler<HTMLDivElement>` — Click handler for the chip Makes the chip clickable/interactive
|
|
1014
1071
|
- `clickable?: boolean` — Explicitly mark chip as clickable Used to enable pointer cursor and keyboard interaction Automatically true…
|
|
1015
1072
|
|
|
1073
|
+
#### ColumnFreezeMenu
|
|
1074
|
+
The freeze/unfreeze menu in a table header cell
|
|
1075
|
+
|
|
1076
|
+
- `columnId?: ColumnId` — The column the menu freezes. Defaults to the `data-column-id` of the header cell it sits in, or that cell's…
|
|
1077
|
+
|
|
1016
1078
|
#### ColumnResizeHandle
|
|
1017
1079
|
The grab area on a column's right edge
|
|
1018
1080
|
|
|
@@ -1031,8 +1093,9 @@ Compact numeric indicator for displaying counts or notification badges.
|
|
|
1031
1093
|
#### FunnelChart
|
|
1032
1094
|
Stage diagram drawn as a funnel or a triangle
|
|
1033
1095
|
|
|
1034
|
-
- `data: FunnelChartItem[]` — Levels from top to bottom. Every level has the same height.
|
|
1096
|
+
- `data: FunnelChartItem[]` — Levels from top to bottom. Every level has the same height unless `proportional` is set.
|
|
1035
1097
|
- `type?: FunnelChartType` `= 'funnel'` — Shape of the chart
|
|
1098
|
+
- `proportional?: boolean` `= false` — Size each level's height in proportion to its value, so bigger values get bigger levels. Zero and tiny values…
|
|
1036
1099
|
- `withPointer?: boolean` `= false` — Render a leader line and a label beside each level
|
|
1037
1100
|
- `withTooltip?: boolean` `= true` — Show a tooltip when a level is hovered
|
|
1038
1101
|
- `withLabels?: boolean` `= true` — Show the labels inside the levels. Pointer labels are controlled by `withPointer`.
|
|
@@ -1091,6 +1154,18 @@ Stage diagram drawn as a funnel or a triangle
|
|
|
1091
1154
|
#### NestedTable
|
|
1092
1155
|
Table whose rows collapse into expandable groups.
|
|
1093
1156
|
|
|
1157
|
+
- `resizableColumns?: boolean` `= false` — Lets columns be resized by dragging the right edge of each header cell.
|
|
1158
|
+
- `columnWidths?: number[]` — Column widths in pixels, one per column. Passing this prop puts the table into controlled mode for the life…
|
|
1159
|
+
- `defaultColumnWidths?: number[]` — Starting column widths in pixels, for the uncontrolled case. Omit it and the table measures its own columns…
|
|
1160
|
+
- `onColumnWidthsChange?: (columnWidths: number[]) => void` — Called on every width change, including each frame of a drag. Persisting widths is the caller's job — write…
|
|
1161
|
+
- `minColumnWidth?: number` `= 64` — Narrowest a column can be dragged, in pixels.
|
|
1162
|
+
- `maxColumnWidth?: number` — Widest a column can be dragged, in pixels. Unbounded when omitted.
|
|
1163
|
+
- `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…
|
|
1164
|
+
- `frozenColumns?: FrozenColumns` — Columns frozen to each edge. Passing this prop puts freezing into controlled mode — hold the value in state…
|
|
1165
|
+
- `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with, for the uncontrolled case.
|
|
1166
|
+
- `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns from the header controls. Always receives both lists.
|
|
1167
|
+
- `freezeControls?: boolean` `= false` — Gives every `TableCellHeader` a menu to freeze its column to either edge, or unfreeze it. Independent of…
|
|
1168
|
+
- `stickyHeader?: boolean` `= false` — Keeps the header row in view while the table scrolls vertically. Needs a scroll container with a height…
|
|
1094
1169
|
- `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
1170
|
- `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
1171
|
- `defaultCollapsed?: boolean` `= false` — Whether groups start collapsed. Applies to every group in the table; a single `WithNestedTableRow` can…
|
|
@@ -1099,7 +1174,16 @@ Table whose rows collapse into expandable groups.
|
|
|
1099
1174
|
#### NestedTableCell
|
|
1100
1175
|
Cell for a `NestedTableRow`.
|
|
1101
1176
|
|
|
1102
|
-
|
|
1177
|
+
- `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
|
|
1178
|
+
- _plus native element attributes_
|
|
1179
|
+
|
|
1180
|
+
#### NestedTableCellHeader
|
|
1181
|
+
Column header cell for a `NestedTable`.
|
|
1182
|
+
|
|
1183
|
+
- `resizable?: boolean` `= true` — Whether this column can be resized inside a `Table` with `resizableColumns`. Set it to `false` to pin a…
|
|
1184
|
+
- `freezable?: boolean` `= true` — Whether this header cell offers the freeze menu inside a `Table` with `freezeControls`. Set it to `false` for…
|
|
1185
|
+
- `columnId?: ColumnId` — Stable id for this column, used by `frozenColumns` on the `Table`. Give every header one when the app can…
|
|
1186
|
+
- `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
|
|
1103
1187
|
- _plus native element attributes_
|
|
1104
1188
|
|
|
1105
1189
|
#### NestedTableCellSubHeader
|
|
@@ -1267,6 +1351,11 @@ Base table component for displaying tabular data
|
|
|
1267
1351
|
- `minColumnWidth?: number` `= 64` — Narrowest a column can be dragged, in pixels.
|
|
1268
1352
|
- `maxColumnWidth?: number` — Widest a column can be dragged, in pixels. Unbounded when omitted.
|
|
1269
1353
|
- `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…
|
|
1354
|
+
- `frozenColumns?: FrozenColumns` — Columns frozen to each edge. Passing this prop puts freezing into controlled mode — hold the value in state…
|
|
1355
|
+
- `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with, for the uncontrolled case.
|
|
1356
|
+
- `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns from the header controls. Always receives both lists.
|
|
1357
|
+
- `freezeControls?: boolean` `= false` — Gives every `TableCellHeader` a menu to freeze its column to either edge, or unfreeze it. Independent of…
|
|
1358
|
+
- `stickyHeader?: boolean` `= false` — Keeps the header row in view while the table scrolls vertically. Needs a scroll container with a height…
|
|
1270
1359
|
- _plus native element attributes_
|
|
1271
1360
|
|
|
1272
1361
|
#### TableBody
|
|
@@ -1285,9 +1374,17 @@ Table data cell component
|
|
|
1285
1374
|
Table header cell component
|
|
1286
1375
|
|
|
1287
1376
|
- `resizable?: boolean` `= true` — Whether this column can be resized inside a `Table` with `resizableColumns`. Set it to `false` to pin a…
|
|
1377
|
+
- `freezable?: boolean` `= true` — Whether this header cell offers the freeze menu inside a `Table` with `freezeControls`. Set it to `false` for…
|
|
1378
|
+
- `columnId?: ColumnId` — Stable id for this column, used by `frozenColumns` on the `Table`. Give every header one when the app can…
|
|
1288
1379
|
- `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
|
|
1289
1380
|
- _plus native element attributes_
|
|
1290
1381
|
|
|
1382
|
+
#### TableContainer
|
|
1383
|
+
The scroll area around a table
|
|
1384
|
+
|
|
1385
|
+
- `maxHeight?: Property.MaxHeight<string | number>` — Tallest the container gets before the table scrolls vertically. Any CSS value: a number of pixels, `'60vh'`,…
|
|
1386
|
+
- _plus native element attributes_
|
|
1387
|
+
|
|
1291
1388
|
#### TableFilterCheckbox
|
|
1292
1389
|
|
|
1293
1390
|
- `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 +2271,7 @@ A sticky action bar across the bottom of the panel.
|
|
|
2174
2271
|
- `useButtonGroupContext` — Access the enclosing `ButtonGroup`'s selection state.
|
|
2175
2272
|
- `useCollapsibleNavBarContext`
|
|
2176
2273
|
- `useCollapsibleNavBarItemContext`
|
|
2274
|
+
- `useColumnFreezeContext` — The enclosing table's column-freezing state, or `null` when it has none.
|
|
2177
2275
|
- `useColumnResize` — Column resizing for a `Table`, without any of the rendering.
|
|
2178
2276
|
- `useColumnResizeContext` — The enclosing table's resize API, or `null` when there isn't one.
|
|
2179
2277
|
- `useDrawer`
|
|
@@ -2253,12 +2351,18 @@ _Names only — read the `.d.ts` for their shape._
|
|
|
2253
2351
|
`BigNumberChartProps` · `BreadcrumbItem` · `BreadcrumbMatchContext` · `BreadcrumbRouteHandle`
|
|
2254
2352
|
`BreadcrumbSibling` · `BreadcrumbsProps` · `ButtonGroupButtonProps` · `ButtonGroupContextValue`
|
|
2255
2353
|
`ButtonGroupItemInput` · `ButtonGroupItem` · `ButtonGroupProps` · `ButtonGroupValue` · `ButtonProps`
|
|
2256
|
-
`ButtonTextProps` · `ButtonVariants` · `
|
|
2257
|
-
`
|
|
2258
|
-
`
|
|
2354
|
+
`ButtonTextProps` · `ButtonVariants` · `CalendarColor` · `CalendarDateInput`
|
|
2355
|
+
`CalendarDayHighlight` · `CalendarDayProps` · `CalendarEventClickInfo`
|
|
2356
|
+
`CalendarEventDetailsControls` · `CalendarEventDetailsField` · `CalendarEventDetailsProps`
|
|
2357
|
+
`CalendarEventProps` · `CalendarEventRenderContext` · `CalendarEventSlotContext` · `CalendarEvent`
|
|
2358
|
+
`CalendarHighlightColor` · `CalendarProps` · `CalendarRange` · `CalendarType` · `CalendarVariant`
|
|
2359
|
+
`CalendarView` · `CalendarWeek` · `CandlestickChartFeatures` · `CandlestickChartProps`
|
|
2360
|
+
`CardListProps` · `CardProps` · `CarouselControlsPosition` · `CarouselFit` · `CarouselItem`
|
|
2361
|
+
`CarouselOpenFullMode` · `CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps`
|
|
2259
2362
|
`ChildrenDataProps` · `ChipColor` · `ChipProps` · `ChipSize` · `ChipVariant`
|
|
2260
2363
|
`CollapsibleNavBarExtendedProps` · `CollapsibleNavBarGroup` · `CollapsibleNavBarHeader`
|
|
2261
|
-
`CollapsibleNavBarItem` · `ColoredButtonTextProps` · `ColorsKeys` · `
|
|
2364
|
+
`CollapsibleNavBarItem` · `ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi`
|
|
2365
|
+
`ColumnFreezeMenuProps` · `ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi`
|
|
2262
2366
|
`ColumnResizeHandleProps` · `ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps`
|
|
2263
2367
|
`ContextType` · `ControlledButtonProps` · `CounterProps` · `CounterSizes` · `CounterVariants`
|
|
2264
2368
|
`CustomIconProps` · `CustomTagStyles` · `DatePickerContextProps` · `DatePickerFormat`
|
|
@@ -2272,39 +2376,41 @@ _Names only — read the `.d.ts` for their shape._
|
|
|
2272
2376
|
`FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
|
|
2273
2377
|
`FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
|
|
2274
2378
|
`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
|
-
`
|
|
2379
|
+
`FrozenColumns` · `FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps`
|
|
2380
|
+
`FunnelChartRender` · `FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold`
|
|
2381
|
+
`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `HistoryItemType`
|
|
2382
|
+
`HistoryProps` · `IFormCheckboxProps` · `IconButtonProps` · `IconProps` · `ImageItemProps`
|
|
2383
|
+
`IndicatorProps` · `InputColors` · `InputProps` · `InputStatusColors` · `InteractionsEnabled`
|
|
2384
|
+
`Item` · `LabelProps` · `LargeTabProps` · `LastFocusedElement` · `LinkProps` · `LinksTabBarProps`
|
|
2385
|
+
`MainColors` · `MainSizes` · `MapIconsType` · `ModalContextProps` · `ModalDialogProps`
|
|
2386
|
+
`ModalProps` · `ModalRootProps` · `MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup`
|
|
2387
|
+
`NavBarExtendedItem` · `NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps`
|
|
2388
|
+
`NestedTableCellHeaderProps` · `NestedTableContextType` · `NestedTableContextValue`
|
|
2389
|
+
`NestedTableProps` · `NestedTableRowContextType` · `NotificationCardProps`
|
|
2390
|
+
`NotificationDynamicProps` · `NotificationGlobalSharedProps` · `NotificationMenuProps`
|
|
2391
|
+
`NotificationPositions` · `NotificationProps` · `NotificationSharedProps` · `NotificationSizes`
|
|
2392
|
+
`NotificationStyleOverrides` · `NotificationType` · `NotificationVariants` · `NumberFieldProps`
|
|
2393
|
+
`OpenStateProps` · `OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps`
|
|
2394
|
+
`PaginationContextProps` · `PaginationContextProviderProps` · `PaginationProps` · `PaletteColor`
|
|
2395
|
+
`Palette` · `PeriodOption` · `Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps`
|
|
2396
|
+
`PersonInfoCounterTooltipUser` · `PersonInfoCounterTooltip` · `PersonInfoLinkAttributes`
|
|
2397
|
+
`PersonInfoProps` · `PersonInfoStyles` · `PersonInfoValueProps` · `PickerType` · `PieChartFeatures`
|
|
2398
|
+
`PieChartLegendItem` · `PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps`
|
|
2399
|
+
`PieChartTooltipViewProps` · `PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions`
|
|
2400
|
+
`PopoverTriggerProps` · `ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps`
|
|
2401
|
+
`ProgressInfoItemProps` · `ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps`
|
|
2402
|
+
`ProgressProps` · `RGBString` · `RadioGroupProps` · `RadioProps` · `RangePickerType`
|
|
2403
|
+
`RenderContentProps` · `ResizeHandleProps` · `ResolveDeprecatedPropOptions` · `ResolvedOpenState`
|
|
2404
|
+
`ResponsiveImageProps` · `SVGProps` · `SearchBoxProps` · `SelectedFilter` · `SetIDs`
|
|
2405
|
+
`SimpleChartTooltipProps` · `SizeStyles` · `SliderMark` · `SliderProps` · `SliderSize`
|
|
2406
|
+
`SmallTabProps` · `StepperContextType` · `StepperProps` · `SwitchContext` · `SwitchProps`
|
|
2407
|
+
`TabBarContextProps` · `TabBarLink` · `TabBarProps` · `TabBaseProps` · `TabProps`
|
|
2408
|
+
`TableContainerProps` · `TableProps` · `TagsProps` · `TextFieldProps` · `TextareaProps` · `Theme`
|
|
2409
|
+
`ToastProps` · `ToastVariants` · `TooltipArrowProps` · `TooltipColor` · `TooltipContentProps`
|
|
2410
|
+
`TooltipContentSizes` · `TooltipContextType` · `TooltipProps` · `TooltipSize`
|
|
2411
|
+
`TooltipTriggerProps` · `TranslationContextContent` · `TreeItemBase` · `TreeItemLevel2`
|
|
2412
|
+
`TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem` · `TreeLevel` · `TreeMapChartFeature`
|
|
2413
|
+
`TreeMapChartProps` · `TreeNode` · `TreeViewProps` · `TypeaheadItemProps`
|
|
2308
2414
|
`TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps` · `TypeaheadValue`
|
|
2309
2415
|
`TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo` · `UseColumnResizeOptions`
|
|
2310
2416
|
`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 {};
|