@ssa-ui-kit/core 3.26.4 → 3.27.1

package/dist/ai/source-map.md

@@ -4,7 +4,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Everything below is imported from the package root:** `import { X } from '@ssa-ui-kit/core'`
 
-196 components · 20 contexts · 23 hooks · 21 functions · 16 constants · 348 exported types
+198 components · 20 contexts · 23 hooks · 21 functions · 16 constants · 359 exported types
 
 ## Reading this file
 
@@ -20,7 +20,7 @@ Generated from the TypeScript program at build time — do not edit by hand.
 
 **Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
 
-**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
+**Data Display** — Avatar, Badge, BarGaugeChart, BarGaugeChartComponent, BarLineComplexChart, BigNumberChart, BigNumberChartComponent, Calendar, CalendarEventDetails, CandlestickChart, CandlestickChartComponent, Card, CardBase, CardContent, CardHeader, CardList, Carousel, ChartBackground, Chip, ColumnFreezeMenu, ColumnResizeHandle, Counter, DataTable, DataTableColumnPicker, 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
 
 **Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, Footer, Header, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
 
@@ -135,7 +135,7 @@ The list of options shown inside a dropdown, typeahead, filter or action menu.
   - `renderGroupLabel?: (group: ContextMenuGroup<V>) => ReactNode` — Replaces the content of group titles.
   - `emptyState?: ReactNode` `= 'No items'` — Shown when `items` has no options.
   - `maxHeight?: string | number` — Scrolls the list beyond this height (px or any CSS length).
-  - `selectionMode?: 'none' | 'multiple' | 'single' | 'includeExclude'`
+  - `selectionMode?: 'none' | 'single' | 'multiple' | 'includeExclude'`
   - `value?: V | V[] | ContextMenuIncludeExcludeEntry<V>[] | null` — Controlled selected value. `null` for none. Controlled selected values. Controlled chosen rows.
   - `defaultValue?: V | V[] | ContextMenuIncludeExcludeEntry<V>[] | null` — Initially selected value when uncontrolled. Initially selected values when uncontrolled. Initially chosen…
   - `onChange?: ((value: V) => void) | ((value: V[], toggled: V) => void) | …(1 more)` — Fires with the newly selected value. Choosing the selected option again keeps it selected. Fires with the new…
@@ -259,6 +259,9 @@ Select-like dropdown component for single selection
   - `success?: boolean` `= false` — Whether to display success state styling When true, status is set to 'success'
   - `icon?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` — Leading icon shown in the toggle button when no selected item avatar is present. Ignored once an item with an…
   - `width?: string | number` — Width of the dropdown. Can be a number (pixels) or a string (any CSS value, e.g. `'100%'`).
+  - `searchable?: boolean` `= false` — Adds a search box above the open list. Typing filters the options by their text (case-insensitive, anywhere…
+  - `searchPlaceholder?: string` `= 'Search'` — Placeholder and accessible name of the search box.
+  - `searchEmptyState?: React.ReactNode` `= 'No results found'` — Shown in the list when nothing matches the search.
   - `dropdownProps?: { base, toggleButton, toggleButtonArrow, dropdownPosition }` — Props object for sub-components Allows fine-grained control over component parts
 
 #### DropdownArrow
@@ -283,6 +286,7 @@ A single selectable row inside `Dropdown` or `MultipleDropdown`.
   - `label?: string | number`
   - `children?: React.ReactNode`
   - `avatar?: React.ReactNode` — Avatar or icon to display before the option content (e.g. <Avatar size={20} image={url} />)
+  - `textValue?: string` — Plain text of the option, for search and type-to-find. Needed when `children` is markup rather than text;…
   - _plus native element attributes_
 
 #### DropdownOptionGroup
@@ -427,6 +431,9 @@ Dropdown component for multi-select and single-select
   - `onChange?: (selectedItem: string | number, isSelected: boolean) => void` — Callback fired when an option is toggled
   - `maxHeight?: number` `= 200` — Max height (px) of the options list; overflow scrolls.
   - `width?: string | number` — Width of the dropdown. Can be a number (pixels) or a string (any CSS value, e.g. `'100%'`).
+  - `searchable?: boolean` `= false` — Adds a search box above the open list. Typing filters the options by their text (case-insensitive, anywhere…
+  - `searchPlaceholder?: string` `= 'Search'` — Placeholder and accessible name of the search box.
+  - `searchEmptyState?: ReactNode` `= 'No results found'` — Shown in the list when nothing matches the search.
 
 #### MultipleDropdownNotification
 
@@ -1015,7 +1022,17 @@ Shows entries on a month grid or on a single day's hour timeline.
   - `timeFormat?: '24h' | '12h'` `= '24h'` — Clock used for event times and the hour labels of the day view.
   - `dayHeader?: 'weekday' | 'monthYear'` `= 'monthYear'` — Header of the day view: the weekday name, or the month and year.
   - `locale?: string` — Locale for weekday and month names, e.g. `'uk'`. Defaults to the browser's.
-  - `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…
+  - `scrollToHour?: number` — Hour the day view scrolls to when it opens. Defaults to an hour before the current time on today, and to the…
+  - `workingHours?: CalendarWorkingHours | …(1 more)` — Working time of the day view: the hours outside it get a grey background. They stay open for adding entries —…
+  - `hourHeight?: number` — Height of one hour on the day view's timeline, in px. Passing it makes it controlled: change it from…
+  - `defaultHourHeight?: number` `= 68` — Hour height to start with when `hourHeight` isn't controlled, and the one a double click on the hour labels…
+  - `onHourHeightChange?: (hourHeight: number) => void` — Called as the user resizes the hours — see `resizableHours`.
+  - `resizableHours?: boolean` `= false` — Lets the user make the day view's hours taller or shorter by dragging the hour labels column up or down, or…
+  - `timeZone?: string` `= the browser's time zone` — IANA time zone the calendar shows times in, e.g. `'Europe/Kyiv'` or `'UTC'`. Passing it makes it controlled:…
+  - `defaultTimeZone?: string` — Time zone to start in when `timeZone` isn't controlled.
+  - `onTimeZoneChange?: (timeZone: string) => void` — Called when the user picks a time zone — see `timeZoneSelector`.
+  - `timeZoneSelector?: boolean` `= false` — Shows a time zone button that opens a searchable list of zones. It sits in the toolbar next to the Month/Day…
+  - `timeZones?: string[]` `= every zone the browser knows` — Zones the selector offers.
   - `aria-label?: string` — Accessible name of the calendar region.
   - `style?: CSSProperties`
 
@@ -1154,6 +1171,52 @@ Compact numeric indicator for displaying counts or notification badges.
   - `size?: keyof MainSizes` `= 'medium'` — Size of the counter. Ignored when `count` is undefined — the component uses `dot` automatically.
   - `color?: string` — Optional color override. Accepts a `theme.colors` key or any valid CSS color string. When provided, overrides…
 
+#### DataTable<Row>
+A table driven by data: give it rows and column definitions and it renders, sorts and lays out the columns itself.
+
+  - `data: Row[]` — Rows to show, in the order to show them unless a column sorts them.
+  - `columns: DataTableColumn<Row>[]` — Column definitions. Every `id` must be unique. Need not be memoised: the table only rebuilds its model when…
+  - `getRowId?: (row: Row, index: number) => string` `= (row) => String(row.id)` — Stable id of a row, for rows whose id is not in an `id` field, such as `employeeId` or a key built from…
+  - `columnState?: Partial<DataTableColumnState>` — Column layout, for the controlled case. Partial values are filled in with defaults. Hold it in state and…
+  - `defaultColumnState?: Partial<DataTableColumnState>` — Starting column layout, for the uncontrolled case.
+  - `onColumnStateChange?: (columnState: DataTableColumnState) => void` — Called whenever the user changes the layout: on every frame of a resize drag, when moving or hiding a column,…
+  - `resizableColumns?: boolean` `= false` — Lets the user resize columns by dragging the right edge of the header.
+  - `columnResizeMode?: ColumnResizeMode` `= 'fit'` — How a resize spends width. `fit` keeps the table's width: the resizable columns to the right share the…
+  - `minColumnWidth?: number` `= 64` — Narrowest a column can be resized to, in pixels. A column's own `minWidth` wins.
+  - `maxColumnWidth?: number` — Widest a column can be resized to, in pixels. A column's own `maxWidth` wins. Unbounded when omitted.
+  - `freezeControls?: boolean` `= false` — Gives every header a menu to freeze its column to either edge.
+  - `reorderableColumns?: boolean` `= false` — Lets the user move columns: by dragging the grip at the left of the header, or with "Move left" and "Move…
+  - `hideableColumns?: boolean` `= false` — Adds "Hide column" to the header menu. The last visible column cannot be hidden. Hidden columns are kept in…
+  - `stickyHeader?: boolean` `= false` — Keeps the header in view while the rows scroll. Give the table a height limit through `maxHeight`.
+  - `maxHeight?: string | number` — Tallest the table gets before it scrolls vertically. Any CSS value. Unbounded when omitted, so only…
+  - `sort?: DataTableSort | null` — Sorted column, for the controlled case. `null` for none.
+  - `defaultSort?: DataTableSort | null` — Starting sort, for the uncontrolled case.
+  - `onSortChange?: (sort: DataTableSort | null, sortKey: string | null) => void` — Called when a sortable header is clicked. A column starts ascending and toggles between ascending and…
+  - `isLoading?: boolean` `= false` — Marks the table busy. Rows already shown stay, dimmed, so a re-fetch after sorting does not make the table…
+  - `loadingState?: ReactNode` `= 'Loading…'` — Shown in place of the rows while loading with none to show.
+  - `emptyState?: ReactNode` `= 'No results'` — Shown in place of the rows when there are none.
+  - `onRowClick?: (row: Row, event: MouseEvent<HTMLTableRowElement> | KeyboardEvent<HTMLT…` — Called when a row is clicked, or when Enter is pressed on a focused row; rows become focusable when this is…
+  - `getRowProps?: (row: Row, rowIndex: number) => DataTableElementProps` — Class name, style, background or data attributes for a body row, such as tinting rows that need attention.…
+  - `getSubRows?: (row: Row) => Row[] | undefined` — Children of a row, shown nested under it, to any depth. Rows with children get an expand button in a column…
+  - `expandedRowIds?: string[]` — Ids of the expanded rows, for the controlled case.
+  - `defaultExpanded?: boolean | string[]` `= false` — Which rows start expanded, for the uncontrolled case: `true` for all, including rows that arrive later, or a…
+  - `onExpandedChange?: (expandedRowIds: string[]) => void` — Called with the ids of the expanded rows whenever the user changes them.
+  - `selectionMode?: DataTableSelectionMode` `= 'none'` — Lets the user select rows: `multiple` adds a checkbox column whose header checkbox selects or clears the rows…
+  - `selectedRowIds?: string[]` — Ids of the selected rows, for the controlled case.
+  - `defaultSelectedRowIds?: string[]` — Ids of the rows selected at first, for the uncontrolled case.
+  - `onSelectionChange?: (selectedRowIds: string[]) => void` — Called with the ids of the selected rows whenever the user changes them.
+  - `isRowSelectable?: (row: Row) => boolean` — Whether a row can be selected. Rows that cannot get a disabled checkbox and are skipped by the header…
+  - `getRowLabel?: (row: Row, rowIndex: number) => string` `= (row, rowIndex) => `Select row ${rowIndex + 1}`` — Accessible name of a row's selection checkbox, such as the person's name. Without it the row is named by its…
+  - `footer?: ReactNode` — Rendered below the table, such as `Pagination`.
+
+#### DataTableColumnPicker<Row>
+A button that opens a checklist of a {@link DataTable }'s columns, to show or hide each one.
+
+  - `columns: DataTableColumn<Row>[]` — The same columns the table gets.
+  - `columnState?: Partial<DataTableColumnState>` — The table's column state, as passed to its `columnState`.
+  - `onColumnStateChange: (columnState: DataTableColumnState) => void` — Called with the whole new column state when a column is shown or hidden.
+  - `label?: ReactNode` `= 'Columns'` — Text of the button that opens the list.
+
 #### FunnelChart
 Stage diagram drawn as a funnel or a triangle
 
@@ -1221,17 +1284,17 @@ Stage diagram drawn as a funnel or a triangle
 Table whose rows collapse into expandable groups.
 
   - `resizableColumns?: boolean` `= false` — Lets columns be resized by dragging the right edge of each header cell.
-  - `columnWidths?: number[]` — Column widths in pixels, one per column. Passing this prop puts the table into controlled mode for the life…
-  - `defaultColumnWidths?: number[]` — Starting column widths in pixels, for the uncontrolled case. Omit it and the table measures its own columns…
-  - `onColumnWidthsChange?: (columnWidths: number[]) => void` — Called on every width change, including each frame of a drag. Persisting widths is the caller's job — write…
-  - `minColumnWidth?: number` `= 64` — Narrowest a column can be dragged, in pixels.
-  - `maxColumnWidth?: number` — Widest a column can be dragged, in pixels. Unbounded when omitted.
-  - `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…
-  - `frozenColumns?: FrozenColumns` — Columns frozen to each edge. Passing this prop puts freezing into controlled mode — hold the value in state…
-  - `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with, for the uncontrolled case.
-  - `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns from the header controls. Always receives both lists.
-  - `freezeControls?: boolean` `= false` — Gives every `TableCellHeader` a menu to freeze its column to either edge, or unfreeze it. Independent of…
-  - `stickyHeader?: boolean` `= false` — Keeps the header row in view while the table scrolls vertically. Needs a scroll container with a height…
+  - `columnWidths?: number[]` — Column widths in pixels, one per column, for the controlled case.
+  - `defaultColumnWidths?: number[]` — Starting column widths in pixels, for the uncontrolled case.
+  - `onColumnWidthsChange?: (columnWidths: number[]) => void` — Called on every width change, including each frame of a drag.
+  - `minColumnWidth?: number` — Narrowest a column can be dragged, in pixels.
+  - `maxColumnWidth?: number` — Widest a column can be dragged, in pixels.
+  - `columnResizeMode?: ColumnResizeMode` — Whether a resize is paid for by the columns to the right or by the table's own width.
+  - `frozenColumns?: FrozenColumns` — Columns frozen to each edge, for the controlled case.
+  - `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with.
+  - `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns.
+  - `freezeControls?: boolean` — Gives every `TableCellHeader` a menu to freeze its column.
+  - `stickyHeader?: boolean` — Keeps the header row in view while the table scrolls vertically.
   - `collapsedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` `= 'carrot-up'` — Toggle icon shown while a group is collapsed.
   - `expandedIconName?: 'reset' | 'archive' | 'arrow-down' | 'arrow-up' | …(237 more — full list under "Icon.name")` `= 'carrot-down'` — Toggle icon shown while a group is expanded.
   - `defaultCollapsed?: boolean` `= false` — Whether groups start collapsed. Applies to every group in the table; a single `WithNestedTableRow` can…
@@ -1248,6 +1311,8 @@ Column header cell for a `NestedTable`.
 
   - `resizable?: boolean` `= true` — Whether this column can be resized inside a `Table` with `resizableColumns`. Set it to `false` to pin a…
   - `freezable?: boolean` `= true` — Whether this header cell offers the freeze menu inside a `Table` with `freezeControls`. Set it to `false` for…
+  - `minWidth?: number` — Narrowest this column can be resized to, in pixels, inside a `Table` with `resizableColumns`. Overrides the…
+  - `maxWidth?: number` — Widest this column can be resized to, in pixels, inside a `Table` with `resizableColumns`. Overrides the…
   - `columnId?: ColumnId` — Stable id for this column, used by `frozenColumns` on the `Table`. Give every header one when the app can…
   - `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
   - _plus native element attributes_
@@ -1411,17 +1476,17 @@ A simple wrapper over the `<img />` tag.
 Base table component for displaying tabular data
 
   - `resizableColumns?: boolean` `= false` — Lets columns be resized by dragging the right edge of each header cell.
-  - `columnWidths?: number[]` — Column widths in pixels, one per column. Passing this prop puts the table into controlled mode for the life…
-  - `defaultColumnWidths?: number[]` — Starting column widths in pixels, for the uncontrolled case. Omit it and the table measures its own columns…
-  - `onColumnWidthsChange?: (columnWidths: number[]) => void` — Called on every width change, including each frame of a drag. Persisting widths is the caller's job — write…
-  - `minColumnWidth?: number` `= 64` — Narrowest a column can be dragged, in pixels.
-  - `maxColumnWidth?: number` — Widest a column can be dragged, in pixels. Unbounded when omitted.
-  - `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…
-  - `frozenColumns?: FrozenColumns` — Columns frozen to each edge. Passing this prop puts freezing into controlled mode — hold the value in state…
-  - `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with, for the uncontrolled case.
-  - `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns from the header controls. Always receives both lists.
-  - `freezeControls?: boolean` `= false` — Gives every `TableCellHeader` a menu to freeze its column to either edge, or unfreeze it. Independent of…
-  - `stickyHeader?: boolean` `= false` — Keeps the header row in view while the table scrolls vertically. Needs a scroll container with a height…
+  - `columnWidths?: number[]` — Column widths in pixels, one per column, for the controlled case.
+  - `defaultColumnWidths?: number[]` — Starting column widths in pixels, for the uncontrolled case.
+  - `onColumnWidthsChange?: (columnWidths: number[]) => void` — Called on every width change, including each frame of a drag.
+  - `minColumnWidth?: number` — Narrowest a column can be dragged, in pixels.
+  - `maxColumnWidth?: number` — Widest a column can be dragged, in pixels.
+  - `columnResizeMode?: ColumnResizeMode` — Whether a resize is paid for by the columns to the right or by the table's own width.
+  - `frozenColumns?: FrozenColumns` — Columns frozen to each edge, for the controlled case.
+  - `defaultFrozenColumns?: FrozenColumns` — Columns frozen to each edge to begin with.
+  - `onFrozenColumnsChange?: (frozenColumns: Required<FrozenColumns>) => void` — Called whenever the user freezes or unfreezes columns.
+  - `freezeControls?: boolean` — Gives every `TableCellHeader` a menu to freeze its column.
+  - `stickyHeader?: boolean` — Keeps the header row in view while the table scrolls vertically.
   - _plus native element attributes_
 
 #### TableBody
@@ -1441,6 +1506,8 @@ Table header cell component
 
   - `resizable?: boolean` `= true` — Whether this column can be resized inside a `Table` with `resizableColumns`. Set it to `false` to pin a…
   - `freezable?: boolean` `= true` — Whether this header cell offers the freeze menu inside a `Table` with `freezeControls`. Set it to `false` for…
+  - `minWidth?: number` — Narrowest this column can be resized to, in pixels, inside a `Table` with `resizableColumns`. Overrides the…
+  - `maxWidth?: number` — Widest this column can be resized to, in pixels, inside a `Table` with `resizableColumns`. Overrides the…
   - `columnId?: ColumnId` — Stable id for this column, used by `frozenColumns` on the `Table`. Give every header one when the app can…
   - `align?: 'center' | 'left' | 'right' | 'justify'` `= 'left'` — Text alignment for the cell content
   - _plus native element attributes_
@@ -1738,11 +1805,11 @@ A nestable list of rows, up to three levels deep.
   - `expandedIds?: string[]` — Ids of expanded nodes. Pass to control expansion yourself.
   - `defaultExpandedIds?: string[]` — Ids expanded on mount, when expansion is uncontrolled.
   - `onExpandedIdsChange?: (ids: string[]) => void`
-  - `expandMode?: 'multiple' | 'single'` `= 'multiple'` — `single` collapses siblings when a node expands, accordion-style.
+  - `expandMode?: 'single' | 'multiple'` `= 'multiple'` — `single` collapses siblings when a node expands, accordion-style.
   - `selectedIds?: string[]` — Ids of selected nodes. Always an array, even in `single` mode — which is what lets a consumer move to…
   - `defaultSelectedIds?: string[]`
   - `onSelectedIdsChange?: (ids: string[], item: AnyTreeItem<TMeta>) => void` — Receives the full next selection, plus the node that was acted on.
-  - `selectionMode?: 'multiple' | 'single'` `= 'single'` — `single` replaces the selection on click, `multiple` toggles membership.
+  - `selectionMode?: 'single' | 'multiple'` `= 'single'` — `single` replaces the selection on click, `multiple` toggles membership.
   - `renderItem?: (props: TreeItemRenderProps<TMeta>) => React.ReactNode` — Replaces the row's interior. The `li`, ARIA and keyboard stay with `TreeView`.
   - `activeColor?: string` — Overrides the selected row's colour (and the chevron and icon on it), for a consumer whose accent isn't the…
   - `semantics?: 'list' | 'tree'` `= 'tree'` — `tree` gives a real `role="tree"` with roving focus and arrow-key navigation — right for a file tree. `list`…
@@ -2453,20 +2520,23 @@ _Names only — read the `.d.ts` for their shape._
 `CalendarEventDetailsControls` · `CalendarEventDetailsField` · `CalendarEventDetailsProps`
 `CalendarEventProps` · `CalendarEventRenderContext` · `CalendarEventSlotContext` · `CalendarEvent`
 `CalendarHighlightColor` · `CalendarProps` · `CalendarRange` · `CalendarType` · `CalendarVariant`
-`CalendarView` · `CalendarWeek` · `CandlestickChartFeatures` · `CandlestickChartProps`
-`CardListProps` · `CardProps` · `CarouselControlsPosition` · `CarouselFit` · `CarouselItem`
-`CarouselOpenFullMode` · `CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps`
-`ChildrenDataProps` · `ChipColor` · `ChipProps` · `ChipSize` · `ChipVariant`
-`CollapsibleNavBarExtendedProps` · `CollapsibleNavBarGroup` · `CollapsibleNavBarHeader`
-`CollapsibleNavBarItem` · `ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi`
-`ColumnFreezeMenuProps` · `ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi`
-`ColumnResizeHandleProps` · `ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps`
-`ContextMenuBaseProps` · `ContextMenuEntry` · `ContextMenuGroup` · `ContextMenuIncludeExcludeEntry`
+`CalendarView` · `CalendarWeek` · `CalendarWeekday` · `CalendarWorkingHoursByWeekday`
+`CalendarWorkingHours` · `CandlestickChartFeatures` · `CandlestickChartProps` · `CardListProps`
+`CardProps` · `CarouselControlsPosition` · `CarouselFit` · `CarouselItem` · `CarouselOpenFullMode`
+`CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps` · `ChildrenDataProps` · `ChipColor`
+`ChipProps` · `ChipSize` · `ChipVariant` · `CollapsibleNavBarExtendedProps`
+`CollapsibleNavBarGroup` · `CollapsibleNavBarHeader` · `CollapsibleNavBarItem`
+`ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi` · `ColumnFreezeMenuProps`
+`ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi` · `ColumnResizeHandleProps`
+`ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps` · `ContextMenuBaseProps`
+`ContextMenuEntry` · `ContextMenuGroup` · `ContextMenuIncludeExcludeEntry`
 `ContextMenuIncludeExcludeSelectionProps` · `ContextMenuIncludeExcludeType` · `ContextMenuIndicator`
 `ContextMenuItemState` · `ContextMenuItem` · `ContextMenuMultipleSelectionProps`
 `ContextMenuNoSelectionProps` · `ContextMenuProps` · `ContextMenuSelectionProps`
 `ContextMenuSingleSelectionProps` · `ContextMenuValue` · `ContextType` · `ControlledButtonProps`
 `CounterProps` · `CounterSizes` · `CounterVariants` · `CustomIconProps` · `CustomTagStyles`
+`DataTableColumnPickerProps` · `DataTableColumnState` · `DataTableColumn` · `DataTableElementProps`
+`DataTableProps` · `DataTableSelectionMode` · `DataTableSortDirection` · `DataTableSort`
 `DatePickerContextProps` · `DatePickerFormat` · `DatePickerProps` · `DateRangePickerContextProps`
 `DateRangePickerFormBridgeProps` · `DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates`
 `DateRangePickerProps` · `DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple`

package/dist/components/Calendar/Calendar.d.ts

@@ -22,10 +22,18 @@ import { CalendarProps } from './types';
  * adds anything up itself — totals are whatever the consumer renders.
  *
  * ### Day view
- * Untimed entries are listed above 00:00; timed ones are placed on the hour
- * timeline, side by side where they overlap. A timed entry that runs past
+ * Untimed entries are listed in a row above 00:00, shown only when there are
+ * some; timed ones are placed on the hour timeline, side by side where they
+ * overlap, with text that grows with their box. A timed entry that runs past
  * midnight continues on the next day's timeline. Today shows a line at the
- * current time.
+ * current time. `workingHours` shades the hours outside the working time
+ * (per weekday if needed); `resizableHours` lets the user drag the hour
+ * labels to make the hours taller or shorter.
+ *
+ * ### Time zones
+ * `timeZone` (or `defaultTimeZone`) shows timed entries in another IANA
+ * zone; untimed entries and day values stay on their date.
+ * `timeZoneSelector` adds a button that lets the user pick the zone.
  *
  * ### Multi-day entries
  * An untimed entry with an `end`, or a timed one lasting 24 hours or more,

package/dist/components/Calendar/CalendarContext.d.ts

@@ -1,11 +1,22 @@
+import { ReactNode } from 'react';
 import { DateTime } from 'luxon';
 import { CalendarEvent, CalendarProps } from './types';
 /**
  * Props every part of the calendar reads, shared through context so the
  * views don't have to pass them down level by level.
  */
-export type CalendarContextValue = Pick<CalendarProps, 'getDayProps' | 'onAddEvent' | 'onTaskToggle' | 'onDayClick' | 'renderEvent' | 'renderEventActions' | 'getEventProps' | 'locale'> & {
+export type CalendarContextValue = Pick<CalendarProps, 'getDayProps' | 'onAddEvent' | 'onTaskToggle' | 'onDayClick' | 'renderEvent' | 'renderEventActions' | 'getEventProps' | 'locale' | 'workingHours'> & {
     timeFormat: '24h' | '12h';
+    /** Zone times are shown in; `undefined` — local time. */
+    timeZone?: string;
+    /** Height of one hour on the day view's timeline, in px. */
+    hourHeight: number;
+    /** Resizes the hours; `undefined` when they can't be resized. */
+    setHourHeight?: (height: number) => void;
+    /** Hour height a double click on the hour labels goes back to. */
+    defaultHourHeight: number;
+    /** Extra controls for the day view's header, e.g. the time zone picker. */
+    dayHeaderEnd?: ReactNode;
     /**
      * Whether a day gets an add button, going by `onAddEvent` and
      * `minAddDate` / `maxAddDate` (not `getDayProps`, which the views apply).

package/dist/components/Calendar/components/CalendarToolbar.d.ts

@@ -5,6 +5,10 @@ type CalendarToolbarProps = {
     view: CalendarView;
     date: DateTime;
     locale?: string;
+    /** Zone "Today" is taken in; `undefined` — local time. */
+    timeZone?: string;
+    /** The time zone button, when the calendar offers one. */
+    timeZonePicker?: ReactNode;
     /** Moves to a date; `undefined` when the date can't move. */
     onNavigate?: (date: DateTime) => void;
     /** Views to toggle between; the toggle shows with two or more. */
@@ -16,5 +20,5 @@ type CalendarToolbarProps = {
  * The bar above the grid: previous / today / next, the date on show, the
  * consumer's content and the view toggle.
  */
-export declare const CalendarToolbar: ({ view, date, locale, onNavigate, views, onViewChange, end, }: CalendarToolbarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CalendarToolbar: ({ view, date, locale, timeZone, timeZonePicker, onNavigate, views, onViewChange, end, }: CalendarToolbarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Calendar/components/DayView.d.ts

@@ -7,8 +7,10 @@ type DayViewProps = {
     scrollToHour?: number;
 };
 /**
- * A single day: header, untimed entries above 00:00, and an hour timeline
- * with the timed entries placed by time. Overlapping entries share the width.
+ * A single day: header, untimed entries above 00:00 (a row shown only when
+ * there are some), and an hour timeline with the timed entries placed by
+ * time. Overlapping entries share the width; hours outside the working time
+ * are shaded.
  */
 export declare const DayView: ({ date, items, header, scrollToHour, }: DayViewProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Calendar/components/TimeZoneSelect.d.ts

@@ -0,0 +1,14 @@
+type TimeZoneSelectProps = {
+    value: string;
+    /** Zones to offer; every zone the browser knows when missing. */
+    options?: string[];
+    onChange: (zone: string) => void;
+};
+/** `GMT+2`, `GMT-3:30`, or `GMT` for UTC — the zone's offset right now. */
+export declare const formatTimeZoneOffset: (zone: string) => string;
+/**
+ * The calendar's time zone button: shows the zone's offset and opens a
+ * searchable list of zones, sorted by offset.
+ */
+export declare const TimeZoneSelect: ({ value, options, onChange, }: TimeZoneSelectProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/Calendar/consts.d.ts

@@ -7,8 +7,21 @@ export declare const TOTAL_COLUMN_WIDTH: {
     readonly 7: 91;
     readonly 5: 160;
 };
-/** Height of one hour on the day view's timeline. */
+/** Height of one hour on the day view's timeline, unless resized. */
 export declare const HOUR_HEIGHT = 68;
+/**
+ * Resize limits for when the view can't be measured (before layout, or with
+ * no height). Otherwise an hour goes from the whole day fitting the view to
+ * a single hour filling it.
+ */
+export declare const HOUR_HEIGHT_FALLBACK_LIMITS: {
+    readonly min: 16;
+    readonly max: 480;
+};
+/** Shortest an hour is ever drawn, whatever `hourHeight` says. */
+export declare const HOUR_HEIGHT_FLOOR = 8;
+/** Hour height change per arrow key press on the resize handle. */
+export declare const HOUR_HEIGHT_STEP = 8;
 /**
  * Space above the 00:00 line. It holds untimed entries, and leaves room for
  * the 00:00 label, which is centred on its line.

package/dist/components/Calendar/styles.d.ts

@@ -12,6 +12,9 @@ export declare const toolbar: (theme: Theme) => import("@emotion/react").Seriali
 export declare const toolbarNav: import("@emotion/react").SerializedStyles;
 export declare const toolbarTitle: import("@emotion/react").SerializedStyles;
 export declare const toolbarViews: import("@emotion/react").SerializedStyles;
+export declare const timeZoneButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const timeZonePopover: (theme: Theme) => import("@emotion/react").SerializedStyles;
+export declare const timeZoneSearch: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const toolbarEnd: import("@emotion/react").SerializedStyles;
 /**
  * The header and the week rows scroll together, so the header can't drift
@@ -103,6 +106,8 @@ export declare const dayLeadRow: (theme: Theme) => import("@emotion/react").Seri
 export declare const hourLabelFirst: import("@emotion/react").SerializedStyles;
 /** Above 00:00. Grows to fit untimed entries. */
 export declare const dayLead: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** Set on the timeline to the hour height in px; the hour cells follow it. */
+export declare const HOUR_HEIGHT_VARIABLE = "--calendar-hour-height";
 export declare const hourCell: (theme: Theme) => import("@emotion/react").SerializedStyles;
 export declare const hourCellLast: import("@emotion/react").SerializedStyles;
 export declare const hourCellAddable: (theme: Theme) => import("@emotion/react").SerializedStyles;
@@ -110,14 +115,45 @@ export declare const dayHighlight: (outline: string | undefined, tint: string) =
 export declare const dayHighlightLabel: import("@emotion/react").SerializedStyles;
 /** Where the timeline's hours start, below the lead area. */
 export declare const timeline: import("@emotion/react").SerializedStyles;
+/** Holds the shading of the hours outside the working time. */
+export declare const offHoursLayer: import("@emotion/react").SerializedStyles;
+/**
+ * Multiplied over the cells rather than painted on them, so the hour lines
+ * and the cells' hover still show through.
+ */
+export declare const offHours: (theme: Theme) => import("@emotion/react").SerializedStyles;
+/** Lies over the hour labels; dragging it resizes the hours. */
+export declare const hourResizer: (theme: Theme) => import("@emotion/react").SerializedStyles;
 /** Holds the timed events over the hour cells, right of the labels. */
 export declare const dayEventsLayer: import("@emotion/react").SerializedStyles;
 /** Places a timed entry; its content fills it. */
 export declare const dayEventBox: import("@emotion/react").SerializedStyles;
-export type DayEventSize = 'large' | 'medium' | 'small';
+export type DayEventSize = 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge';
+/**
+ * Text of a timed entry by its size, and the box height each size starts
+ * at. `small` lays the title and time out in a row; the rest stack them.
+ */
+export declare const DAY_EVENT_TEXT: Record<DayEventSize, {
+    minHeight: number;
+    padding: number;
+    title: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    titleLineHeight: number;
+    time: {
+        fontSize: number;
+        fontWeight: number;
+        lineHeight: string;
+    };
+    timeLineHeight: number;
+}>;
 export declare const dayEvent: (theme: Theme, stripe: string | undefined, size: DayEventSize) => import("@emotion/react").SerializedStyles;
 export declare const dayEventContent: (size: DayEventSize) => import("@emotion/react").SerializedStyles;
 export declare const dayEventTitle: (size: DayEventSize) => import("@emotion/react").SerializedStyles;
+/** A title with room for more lines; the line count is set inline. */
+export declare const dayEventTitleWrap: import("@emotion/react").SerializedStyles;
 export declare const dayEventTime: (size: DayEventSize) => import("@emotion/react").SerializedStyles;
 export declare const dayTask: import("@emotion/react").SerializedStyles;
 export declare const nowPointer: (theme: Theme) => import("@emotion/react").SerializedStyles;

package/dist/components/Calendar/types.d.ts

@@ -99,10 +99,33 @@ export type CalendarDayHighlight = {
     /** Makes the badge row clickable. */
     onClick?: () => void;
 };
+/**
+ * A day's working time on the day view's timeline, in hours from midnight —
+ * `{ start: 8, end: 20 }` is 08:00–20:00, `17.5` is 17:30. The hours
+ * outside it are shaded grey, but stay open for adding entries.
+ */
+export type CalendarWorkingHours = {
+    /** Hour the working time starts, 0–24. */
+    start: number;
+    /** Hour the working time ends, 0–24; after `start`. */
+    end: number;
+};
+/** A weekday, as keyed in {@link CalendarWorkingHoursByWeekday}. */
+export type CalendarWeekday = 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 'sun';
+/**
+ * Working time per weekday. A weekday left out, or set to `null`, has no
+ * working time — the whole day is shaded.
+ */
+export type CalendarWorkingHoursByWeekday = Partial<Record<CalendarWeekday, CalendarWorkingHours | null>>;
 /**
  * Per-day options returned by `getDayProps`.
  */
 export type CalendarDayProps = {
+    /**
+     * The day's working time, over `workingHours` — e.g. a short day before a
+     * holiday. `null` shades the whole day.
+     */
+    workingHours?: CalendarWorkingHours | null;
     /** Turns the day into a highlighted, whole-day cell. */
     highlight?: CalendarDayHighlight;
     /**
@@ -189,13 +212,16 @@ export type CalendarEventDetailsControls = {
     close: () => void;
 };
 /**
- * The days a view shows, handed to `onRangeChange`.
+ * The days a view shows, handed to `onRangeChange`. Unlike the calendar's
+ * other day values, `start` and `end` are moments — the span to fetch timed
+ * entries for — so with a `timeZone` they're that zone's midnights, not
+ * local ones.
  */
 export type CalendarRange = {
     view: CalendarView;
-    /** Start of the first day shown. */
+    /** Start of the first day shown, in the calendar's time zone. */
     start: Date;
-    /** End of the last day shown (23:59:59.999). */
+    /** End of the last day shown (23:59:59.999), in the calendar's time zone. */
     end: Date;
 };
 /**
@@ -302,7 +328,9 @@ export type CalendarProps<TData = unknown> = {
     getDayProps?: (date: Date) => CalendarDayProps | undefined;
     /**
      * Shows an add button on each day (on hover in the month grid) and in the
-     * day view header. Receives the day clicked.
+     * day view header. Receives the day clicked (its start, in local time
+     * like every day value), or the hour clicked on the day view's timeline
+     * — a moment, which in another `timeZone` reads differently locally.
      */
     onAddEvent?: (date: Date) => void;
     /**
@@ -373,9 +401,69 @@ export type CalendarProps<TData = unknown> = {
     locale?: string;
     /**
      * Hour the day view scrolls to when it opens. Defaults to an hour before
-     * the current time on today, and to 8:00 on other days.
+     * the current time on today, and to the start of the working time (see
+     * `workingHours`) or 8:00 on other days.
      */
     scrollToHour?: number;
+    /**
+     * Working time of the day view: the hours outside it get a grey
+     * background. They stay open for adding entries — the shading is only a
+     * hint. One range for every day, or a range per weekday; for one-off days
+     * use `getDayProps(date).workingHours`.
+     *
+     * Unset, no hours are shaded.
+     */
+    workingHours?: CalendarWorkingHours | CalendarWorkingHoursByWeekday;
+    /**
+     * Height of one hour on the day view's timeline, in px. Passing it makes
+     * it controlled: change it from `onHourHeightChange`.
+     */
+    hourHeight?: number;
+    /**
+     * Hour height to start with when `hourHeight` isn't controlled, and the
+     * one a double click on the hour labels goes back to.
+     * @default 68
+     */
+    defaultHourHeight?: number;
+    /** Called as the user resizes the hours — see `resizableHours`. */
+    onHourHeightChange?: (hourHeight: number) => void;
+    /**
+     * Lets the user make the day view's hours taller or shorter by dragging
+     * the hour labels column up or down, or with the arrow keys when it's
+     * focused — from the whole day fitting the view to a single hour filling
+     * it. A double click on the column goes back to `defaultHourHeight`.
+     * @default false
+     */
+    resizableHours?: boolean;
+    /**
+     * IANA time zone the calendar shows times in, e.g. `'Europe/Kyiv'` or
+     * `'UTC'`. Passing it makes it controlled: change it from
+     * `onTimeZoneChange`.
+     *
+     * Timed entries are moved into the zone — an entry at 09:00 in Kyiv shows
+     * at 07:00 in `'UTC'`. Untimed entries, `date` and the other day values
+     * are calendar days and stay on their day. "Today" and the now line follow
+     * the zone.
+     *
+     * @default the browser's time zone
+     */
+    timeZone?: string;
+    /** Time zone to start in when `timeZone` isn't controlled. */
+    defaultTimeZone?: string;
+    /** Called when the user picks a time zone — see `timeZoneSelector`. */
+    onTimeZoneChange?: (timeZone: string) => void;
+    /**
+     * Shows a time zone button that opens a searchable list of zones. It sits
+     * in the toolbar next to the Month/Day toggle; without `toolbar`, in the
+     * day view's header.
+     * @default false
+     */
+    timeZoneSelector?: boolean;
+    /**
+     * Zones the selector offers.
+     * @default every zone the browser knows
+     */
+    timeZones?: string[];
     /** Accessible name of the calendar region. */
     'aria-label'?: string;
     className?: string;