@ssa-ui-kit/core 3.24.0 → 3.25.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 +97 -60
- package/dist/components/Calendar/consts.d.ts +2 -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/FloatingActionButton/FloatingActionButton.d.ts +79 -0
- package/dist/components/FloatingActionButton/index.d.ts +1 -0
- package/dist/components/FloatingActionButton/styles.d.ts +42 -0
- package/dist/components/FloatingActionButton/types.d.ts +129 -0
- package/dist/components/Header/Header.d.ts +43 -0
- package/dist/components/Header/HeaderMobileMenu.d.ts +18 -0
- package/dist/components/Header/HeaderNavMenu.d.ts +17 -0
- package/dist/components/Header/helpers.d.ts +13 -0
- package/dist/components/Header/index.d.ts +1 -0
- package/dist/components/Header/styles.d.ts +63 -0
- package/dist/components/Header/types.d.ts +104 -0
- package/dist/components/index.d.ts +4 -0
- package/dist/index.js +3459 -2264
- package/dist/index.mjs +3435 -2242
- package/dist/tsbuildcache +1 -1
- package/dist/utils/colorUtils.d.ts +15 -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
|
+
192 components · 20 contexts · 23 hooks · 17 functions · 16 constants · 325 exported types
|
|
8
8
|
|
|
9
9
|
## Reading this file
|
|
10
10
|
|
|
@@ -16,13 +16,13 @@ Generated from the TypeScript program at build time — do not edit by hand.
|
|
|
16
16
|
|
|
17
17
|
## Component roster
|
|
18
18
|
|
|
19
|
-
**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
|
|
19
|
+
**Action & Form Controls** — BreadcrumbMenu, Breadcrumbs, Button, ButtonGroup, ButtonGroupButton, Checkbox, ColorPicker, DatePicker, DateRangePicker, DateRangePickerFormBridge, Dropdown, DropdownArrow, DropdownBase, DropdownOption, DropdownOptions, DropdownToggle, FileAttachment, FileUpload, FloatingActionButton, IconButton, Input, MultipleDropdown, MultipleDropdownNotification, MultipleDropdownOptions, NumberField, Radio, RadioGroup, SearchBox, SearchBoxCrossIcon, SearchBoxInput, SearchBoxWrapper, Slider, SliderInputsRow, SliderLabel, SliderMarkItem, SliderMarkLabel, SliderMarksRow, SliderMarkTick, SliderNumberInput, SliderRangeInput, SliderRoot, SliderTrackBg, SliderTrackFill, SliderTrackRow, SliderTrackWrapper, SliderValueLabel, SliderValueLabelsContainer, Switch, Textarea, TextField, Typeahead, TypeaheadItemIcon, TypeaheadItemImage, TypeaheadOption, TypeaheadOptions
|
|
20
20
|
|
|
21
21
|
**Form Structure** — Filters, FiltersMultiSelect, FiltersMultiSelectEmpty, FiltersMultiSelectOption, FiltersMultiSelectOptions, Form, FormAction, FormCheckbox, FormGroup, FormHelperText, FormRadioGroup
|
|
22
22
|
|
|
23
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
|
-
**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
|
|
25
|
+
**Navigation & Layout** — CollapsibleNavBar, CollapsibleNavBarCustomIconSVG, Header, History, LargeTab, Link, LinksTabBar, NavBar, Pagination, Step, StepConnector, StepLabel, Stepper, Tab, TabBar, TreeView, WithLink, WithPagination, WithVisibleLG, WithVisibleMD, WithVisibleSM, WithVisibleUpToLG, Wrapper
|
|
26
26
|
|
|
27
27
|
**Overlay & Feedback** — Modal, ModalContent, ModalDialog, ModalDismissButton, ModalOpenButton, NotificationCard, NotificationMenu, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverHeading, PopoverTrigger, ProgressChartTooltip, SimpleChartTooltip, Tooltip, TooltipContent, TooltipContentBase, TooltipTrigger
|
|
28
28
|
|
|
@@ -326,6 +326,26 @@ File input component with optional drag-and-drop support
|
|
|
326
326
|
- `onChange?: (files: File[]) => void`
|
|
327
327
|
- `onFileRejected?: (file: File, reason: FileRejectionReason) => void`
|
|
328
328
|
|
|
329
|
+
#### FloatingActionButton
|
|
330
|
+
A button fixed to a corner of the viewport for the page's primary action, optionally opening a speed-dial menu of related actions.
|
|
331
|
+
|
|
332
|
+
- `icon?: FloatingActionButtonIcon` `= 'plus'` — Icon of the button (of the menu trigger while the menu is closed).
|
|
333
|
+
- `label?: string` — Text shown next to the icon (the "extended" FAB). Without it the FAB is icon-only and needs an `aria-label`.
|
|
334
|
+
- `color?: FloatingActionButtonColor` `= 'primary'` — Background color. Pre-defined `primary` / `secondary`, a theme color key or any CSS color; custom colors get…
|
|
335
|
+
- `shadow?: boolean` `= true` — Draws the elevation shadow under the button.
|
|
336
|
+
- `shape?: 'square' | 'round'` `= 'square'` — Corner shape: `square` keeps the 8px radius, `round` is fully rounded (a circle when icon-only, a pill when…
|
|
337
|
+
- `size?: FloatingActionButtonSize` `= 'medium'` — Size of the button and of its menu items.
|
|
338
|
+
- `disabled?: boolean` `= false` — Disables the button (and, in menu mode, opening the menu).
|
|
339
|
+
- `onClick?: MouseEventHandler<HTMLButtonElement>` — Click handler. In menu mode it also runs, before the menu toggles.
|
|
340
|
+
- `actions?: FloatingActionButtonAction[]` — Items of the speed-dial menu. When given, the button toggles a stack of secondary FABs above it (below it for…
|
|
341
|
+
- `showActionLabels?: boolean` `= true` — Shows each action's `label` next to its icon. When `false` the items are icon-only and the label stays as…
|
|
342
|
+
- `open?: boolean` — Controlled open state of the menu.
|
|
343
|
+
- `defaultOpen?: boolean` `= false` — Initial open state of the menu when uncontrolled.
|
|
344
|
+
- `onOpenChange?: (open: boolean) => void` — Called when the menu opens or closes.
|
|
345
|
+
- `openIcon?: FloatingActionButtonIcon` `= 'cross'` — Icon of the trigger while the menu is open.
|
|
346
|
+
- `position?: FloatingActionButtonPosition` `= 'bottom-right'` — Viewport corner the FAB is fixed to.
|
|
347
|
+
- `offset?: number | { x: number; y: number; }` `= 24` — Distance from the corner in px — one value for both axes, or `{ x, y }`.
|
|
348
|
+
|
|
329
349
|
#### IconButton
|
|
330
350
|
Square icon-only button for icon actions
|
|
331
351
|
|
|
@@ -1034,10 +1054,11 @@ Shows a set of images one at a time, with optional thumbnails, dot indicators, p
|
|
|
1034
1054
|
- `showDots?: boolean` `= true` — Show the dot indicators (see `controlsPosition`).
|
|
1035
1055
|
- `showArrows?: boolean` `= true` — Show the previous/next buttons (see `controlsPosition`).
|
|
1036
1056
|
- `controlsPosition?: CarouselControlsPosition` `= 'overlay'` — Where the dots and arrows sit. `overlay` draws them over the bottom of the slide; `below` puts them in a 32px…
|
|
1037
|
-
- `allowOpenFull?: boolean` `= false` — Show a button that opens the current image (`fullSrc ?? src`) in a new tab
|
|
1057
|
+
- `allowOpenFull?: boolean` `= false` — Show a button that opens the current image (`fullSrc ?? src`), in a new tab or a modal (see `openFullMode`).…
|
|
1058
|
+
- `openFullMode?: CarouselOpenFullMode` `= 'newTab'` — Where the `allowOpenFull` button opens the image. `modal` shows it over a dimmed page at its natural size,…
|
|
1038
1059
|
- `aspectRatio?: number` `= 1` — Width-to-height ratio of the slide. The slide always fills the container's width; this sets its height.…
|
|
1039
1060
|
- `height?: Property.Height<string | number>` — Fixed slide height (number = px). Overrides `aspectRatio`.
|
|
1040
|
-
- `fit?: CarouselFit` `= '
|
|
1061
|
+
- `fit?: CarouselFit` `= 'cover'` — How images fill the slide frame.
|
|
1041
1062
|
- `index?: number` — Index of the current slide (controlled).
|
|
1042
1063
|
- `defaultIndex?: number` `= 0` — Index of the slide shown first (uncontrolled).
|
|
1043
1064
|
- `onIndexChange?: (index: number) => void` — Called whenever the current slide changes.
|
|
@@ -1092,8 +1113,9 @@ Compact numeric indicator for displaying counts or notification badges.
|
|
|
1092
1113
|
#### FunnelChart
|
|
1093
1114
|
Stage diagram drawn as a funnel or a triangle
|
|
1094
1115
|
|
|
1095
|
-
- `data: FunnelChartItem[]` — Levels from top to bottom. Every level has the same height.
|
|
1116
|
+
- `data: FunnelChartItem[]` — Levels from top to bottom. Every level has the same height unless `proportional` is set.
|
|
1096
1117
|
- `type?: FunnelChartType` `= 'funnel'` — Shape of the chart
|
|
1118
|
+
- `proportional?: boolean` `= false` — Size each level's height in proportion to its value, so bigger values get bigger levels. Zero and tiny values…
|
|
1097
1119
|
- `withPointer?: boolean` `= false` — Render a leader line and a label beside each level
|
|
1098
1120
|
- `withTooltip?: boolean` `= true` — Show a tooltip when a level is hovered
|
|
1099
1121
|
- `withLabels?: boolean` `= true` — Show the labels inside the levels. Pointer labels are controlled by `withPointer`.
|
|
@@ -1541,6 +1563,17 @@ The app sidebar: a logo, a menu, and three layouts.
|
|
|
1541
1563
|
_No library-specific props._
|
|
1542
1564
|
- _plus native element attributes_
|
|
1543
1565
|
|
|
1566
|
+
#### Header
|
|
1567
|
+
The application's top bar: logo, main navigation and a free slot on the right for the user profile, notifications or log out.
|
|
1568
|
+
|
|
1569
|
+
- `logo?: ReactNode` — Project logo, placed in a box of fixed height. Leave it out and the box stays empty, so the layout does not…
|
|
1570
|
+
- `items?: HeaderNavItem[]` — Navigation items. Rendered centred; scrolls sideways when it overflows.
|
|
1571
|
+
- `rightSide?: ReactNode` — Right-hand content — user profile, notifications, log out, whatever the app needs. Rendered as-is on every…
|
|
1572
|
+
- `size?: HeaderSize` `= 'small'` — Bar height and logo size
|
|
1573
|
+
- `navLabel?: string` `= 'Main'` — Accessible name of the navigation landmark
|
|
1574
|
+
- `menuButtonLabel?: string` `= 'Open menu'` — Accessible name of the burger button shown below 900px
|
|
1575
|
+
- _plus native element attributes_
|
|
1576
|
+
|
|
1544
1577
|
#### History
|
|
1545
1578
|
Vertical timeline component for chronological events.
|
|
1546
1579
|
|
|
@@ -2356,61 +2389,65 @@ _Names only — read the `.d.ts` for their shape._
|
|
|
2356
2389
|
`CalendarHighlightColor` · `CalendarProps` · `CalendarRange` · `CalendarType` · `CalendarVariant`
|
|
2357
2390
|
`CalendarView` · `CalendarWeek` · `CandlestickChartFeatures` · `CandlestickChartProps`
|
|
2358
2391
|
`CardListProps` · `CardProps` · `CarouselControlsPosition` · `CarouselFit` · `CarouselItem`
|
|
2359
|
-
`
|
|
2360
|
-
`
|
|
2361
|
-
`
|
|
2362
|
-
`
|
|
2363
|
-
`
|
|
2364
|
-
`
|
|
2365
|
-
`
|
|
2366
|
-
`
|
|
2367
|
-
`
|
|
2368
|
-
`
|
|
2369
|
-
`
|
|
2370
|
-
`
|
|
2371
|
-
`
|
|
2372
|
-
`
|
|
2392
|
+
`CarouselOpenFullMode` · `CarouselProps` · `CarouselThumbnailsPosition` · `CheckboxProps`
|
|
2393
|
+
`ChildrenDataProps` · `ChipColor` · `ChipProps` · `ChipSize` · `ChipVariant`
|
|
2394
|
+
`CollapsibleNavBarExtendedProps` · `CollapsibleNavBarGroup` · `CollapsibleNavBarHeader`
|
|
2395
|
+
`CollapsibleNavBarItem` · `ColoredButtonTextProps` · `ColorsKeys` · `ColumnFreezeApi`
|
|
2396
|
+
`ColumnFreezeMenuProps` · `ColumnFreezeOptions` · `ColumnId` · `ColumnResizeApi`
|
|
2397
|
+
`ColumnResizeHandleProps` · `ColumnResizeMode` · `ColumnResizeOptions` · `CommonProps`
|
|
2398
|
+
`ContextType` · `ControlledButtonProps` · `CounterProps` · `CounterSizes` · `CounterVariants`
|
|
2399
|
+
`CustomIconProps` · `CustomTagStyles` · `DatePickerContextProps` · `DatePickerFormat`
|
|
2400
|
+
`DatePickerProps` · `DateRangePickerContextProps` · `DateRangePickerFormBridgeProps`
|
|
2401
|
+
`DateRangePickerFormBridgeValue` · `DateRangePickerOnChangeDates` · `DateRangePickerProps`
|
|
2402
|
+
`DateRangePresetValue` · `DateRangePreset` · `DateTimeTuple` · `DeprecatedOpenStateProps`
|
|
2403
|
+
`DropdownContextType` · `DropdownOptionProps` · `DropdownPositions` · `DropdownProps`
|
|
2404
|
+
`DropdownToggleProps` · `DynamicAlertParams` · `DynamicNotificationParams` · `DynamicToastParams`
|
|
2405
|
+
`FieldContextValue` · `FieldControlProps` · `FieldDescriptionProps` · `FieldErrorProps`
|
|
2406
|
+
`FieldLabelProps` · `FieldProps` · `FieldSuccessProps` · `FileAttachmentFile`
|
|
2373
2407
|
`FileAttachmentProps` · `FileRejectionReason` · `FileUploadProgressEntry` · `FileUploadProgress`
|
|
2374
2408
|
`FileUploadProps` · `Filter` · `FiltersMultiSelectEmptyProps` · `FiltersMultiSelectOptionProps`
|
|
2375
|
-
`FiltersMultiSelectProps` · `
|
|
2409
|
+
`FiltersMultiSelectProps` · `FloatingActionButtonAction` · `FloatingActionButtonColor`
|
|
2410
|
+
`FloatingActionButtonIcon` · `FloatingActionButtonPosition` · `FloatingActionButtonProps`
|
|
2411
|
+
`FloatingActionButtonSize` · `FloatingSurfaceColor` · `FloatingSurfaceSize` · `Format`
|
|
2376
2412
|
`FrozenColumns` · `FullscreenModeContextType` · `FunnelChartItem` · `FunnelChartProps`
|
|
2377
2413
|
`FunnelChartRender` · `FunnelChartType` · `GaugeBarProps` · `GaugeBarThreshold`
|
|
2378
|
-
`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `
|
|
2379
|
-
`
|
|
2380
|
-
`
|
|
2381
|
-
`
|
|
2382
|
-
`
|
|
2383
|
-
`
|
|
2384
|
-
`
|
|
2385
|
-
`
|
|
2386
|
-
`
|
|
2387
|
-
`
|
|
2388
|
-
`
|
|
2389
|
-
`
|
|
2390
|
-
`
|
|
2391
|
-
`
|
|
2392
|
-
`
|
|
2393
|
-
`
|
|
2394
|
-
`
|
|
2395
|
-
`
|
|
2396
|
-
`
|
|
2397
|
-
`
|
|
2398
|
-
`
|
|
2399
|
-
`
|
|
2400
|
-
`
|
|
2401
|
-
`
|
|
2402
|
-
`
|
|
2403
|
-
`
|
|
2404
|
-
`
|
|
2405
|
-
`
|
|
2406
|
-
`
|
|
2407
|
-
`
|
|
2408
|
-
`
|
|
2409
|
-
`
|
|
2410
|
-
`
|
|
2411
|
-
`
|
|
2412
|
-
`
|
|
2413
|
-
`
|
|
2414
|
-
`
|
|
2415
|
-
`
|
|
2416
|
-
`
|
|
2414
|
+
`GaugeBarValueFormatter` · `GaugeChartFeature` · `GaugeChartProps` · `HeaderNavItem` · `HeaderProps`
|
|
2415
|
+
`HeaderSize` · `HeaderTheme` · `HistoryItemType` · `HistoryProps` · `IFormCheckboxProps`
|
|
2416
|
+
`IconButtonProps` · `IconProps` · `ImageItemProps` · `IndicatorProps` · `InputColors` · `InputProps`
|
|
2417
|
+
`InputStatusColors` · `InteractionsEnabled` · `Item` · `LabelProps` · `LargeTabProps`
|
|
2418
|
+
`LastFocusedElement` · `LinkProps` · `LinksTabBarProps` · `MainColors` · `MainSizes`
|
|
2419
|
+
`MapIconsType` · `ModalContextProps` · `ModalDialogProps` · `ModalProps` · `ModalRootProps`
|
|
2420
|
+
`MountMode` · `MultipleStylesProps` · `NavBarExtendedGroup` · `NavBarExtendedItem`
|
|
2421
|
+
`NavBarExtendedProps` · `NavBarExtendedSubItem` · `NavBarProps` · `NestedTableCellHeaderProps`
|
|
2422
|
+
`NestedTableContextType` · `NestedTableContextValue` · `NestedTableProps`
|
|
2423
|
+
`NestedTableRowContextType` · `NotificationCardProps` · `NotificationDynamicProps`
|
|
2424
|
+
`NotificationGlobalSharedProps` · `NotificationMenuProps` · `NotificationPositions`
|
|
2425
|
+
`NotificationProps` · `NotificationSharedProps` · `NotificationSizes` · `NotificationStyleOverrides`
|
|
2426
|
+
`NotificationType` · `NotificationVariants` · `NumberFieldProps` · `OpenStateProps`
|
|
2427
|
+
`OpenedAccordion` · `PageButtonProps` · `PaginationButtonsProps` · `PaginationContextProps`
|
|
2428
|
+
`PaginationContextProviderProps` · `PaginationProps` · `PaletteColor` · `Palette` · `PeriodOption`
|
|
2429
|
+
`Period` · `PersonInfoAvatarProps` · `PersonInfoCounterProps` · `PersonInfoCounterTooltipUser`
|
|
2430
|
+
`PersonInfoCounterTooltip` · `PersonInfoLinkAttributes` · `PersonInfoProps` · `PersonInfoStyles`
|
|
2431
|
+
`PersonInfoValueProps` · `PickerType` · `PieChartFeatures` · `PieChartLegendItem`
|
|
2432
|
+
`PieChartLegendProps` · `PieChartProps` · `PieChartTooltipProps` · `PieChartTooltipViewProps`
|
|
2433
|
+
`PopoverArrowProps` · `PopoverContentProps` · `PopoverOptions` · `PopoverTriggerProps`
|
|
2434
|
+
`ProgressBarProps` · `ProgressChartTooltipProps` · `ProgressCircleProps` · `ProgressInfoItemProps`
|
|
2435
|
+
`ProgressInfoProps` · `ProgressInfoResp` · `ProgressInfoTotalsProps` · `ProgressProps` · `RGBString`
|
|
2436
|
+
`RadioGroupProps` · `RadioProps` · `RangePickerType` · `RenderContentProps` · `ResizeHandleProps`
|
|
2437
|
+
`ResolveDeprecatedPropOptions` · `ResolvedOpenState` · `ResponsiveImageProps` · `SVGProps`
|
|
2438
|
+
`SearchBoxProps` · `SelectedFilter` · `SetIDs` · `SimpleChartTooltipProps` · `SizeStyles`
|
|
2439
|
+
`SliderMark` · `SliderProps` · `SliderSize` · `SmallTabProps` · `StepperContextType`
|
|
2440
|
+
`StepperProps` · `SwitchContext` · `SwitchProps` · `TabBarContextProps` · `TabBarLink`
|
|
2441
|
+
`TabBarProps` · `TabBaseProps` · `TabProps` · `TableContainerProps` · `TableProps` · `TagsProps`
|
|
2442
|
+
`TextFieldProps` · `TextareaProps` · `Theme` · `ToastProps` · `ToastVariants` · `TooltipArrowProps`
|
|
2443
|
+
`TooltipColor` · `TooltipContentProps` · `TooltipContentSizes` · `TooltipContextType`
|
|
2444
|
+
`TooltipProps` · `TooltipSize` · `TooltipTriggerProps` · `TranslationContextContent`
|
|
2445
|
+
`TreeItemBase` · `TreeItemLevel2` · `TreeItemLevel3` · `TreeItemRenderProps` · `TreeItem`
|
|
2446
|
+
`TreeLevel` · `TreeMapChartFeature` · `TreeMapChartProps` · `TreeNode` · `TreeViewProps`
|
|
2447
|
+
`TypeaheadItemProps` · `TypeaheadItemsListProps` · `TypeaheadOptionProps` · `TypeaheadProps`
|
|
2448
|
+
`TypeaheadValue` · `TypographyProps` · `UseBreadcrumbsOptions` · `UseChartInfo`
|
|
2449
|
+
`UseColumnResizeOptions` · `UseDrawerOptions` · `UseFiltersMultiSelectOptions`
|
|
2450
|
+
`UseFiltersMultiSelectStore` · `UsePopover` · `UseTooltipArgs` · `UseTooltipContext` · `UseTooltip`
|
|
2451
|
+
`UseTypeaheadProps` · `UserProfileProps` · `ValueLabelDisplay` · `VariantStyle` · `WidgetCardProps`
|
|
2452
|
+
`WithNestedTableRowProps` · `WithWidgetCardProps` · `WrapperAlignItems` · `WrapperDirection`
|
|
2453
|
+
`WrapperJustifyContent`
|
|
@@ -25,6 +25,8 @@ export declare const HOUR_GUTTER_WIDTH = 64;
|
|
|
25
25
|
export declare const DAY_EVENT_GAP = 5;
|
|
26
26
|
/** Shortest an event is drawn, however brief. */
|
|
27
27
|
export declare const DAY_EVENT_MIN_HEIGHT = 15;
|
|
28
|
+
/** Set on the details layer to its `eventDetailsDisplay`, for styling. */
|
|
29
|
+
export declare const DETAILS_DISPLAY_ATTRIBUTE = "data-calendar-details";
|
|
28
30
|
/** Stripe colour per palette entry. */
|
|
29
31
|
export declare const getEventColor: (theme: Theme, color: CalendarColor) => `rgb${string}` | undefined;
|
|
30
32
|
/** Outline, 8% tint and badge gradient of a whole-day highlight. */
|
|
@@ -7,8 +7,8 @@ import { CarouselProps } from './types';
|
|
|
7
7
|
* The carousel always fills its container's width. The slide's height comes
|
|
8
8
|
* from `aspectRatio` (square by default, as in the design) or from a fixed
|
|
9
9
|
* `height`, never from the images — so the layout does not jump between
|
|
10
|
-
* slides or while images load. Images are
|
|
11
|
-
* (`fit="
|
|
10
|
+
* slides or while images load. Images are cropped to fill the frame
|
|
11
|
+
* (`fit="cover"`, the default) or letterboxed inside it (`fit="contain"`).
|
|
12
12
|
*
|
|
13
13
|
* Thumbnails are a fixed 52px. A `left`/`right` strip is exactly as tall as
|
|
14
14
|
* the slide and a `bottom` strip exactly as wide; extra thumbnails scroll and
|
|
@@ -49,6 +49,12 @@ import { CarouselProps } from './types';
|
|
|
49
49
|
*
|
|
50
50
|
* @example
|
|
51
51
|
* ```tsx
|
|
52
|
+
* // Open full size in a modal on the same page
|
|
53
|
+
* <Carousel items={items} allowOpenFull openFullMode="modal" />
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* @example
|
|
57
|
+
* ```tsx
|
|
52
58
|
* // Autoplay: 3s per slide, 600ms slide animation
|
|
53
59
|
* <Carousel items={items} autoPlay autoPlayInterval={3000} transitionDuration={600} />
|
|
54
60
|
* ```
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type FullImageModalProps = {
|
|
2
|
+
src: string;
|
|
3
|
+
alt?: string;
|
|
4
|
+
onClose: () => void;
|
|
5
|
+
};
|
|
6
|
+
/**
|
|
7
|
+
* The full-size image over a dimmed page, at its natural size but never more
|
|
8
|
+
* than 80% of the viewport. Escape, a click outside and the close button
|
|
9
|
+
* close it; focus moves in and returns to the open button.
|
|
10
|
+
*/
|
|
11
|
+
export declare const FullImageModal: ({ src, alt, onClose }: FullImageModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
12
|
+
export {};
|
|
@@ -17,6 +17,11 @@ export declare const dots: import("@emotion/react").SerializedStyles;
|
|
|
17
17
|
export declare const dot: (theme: Theme, active: boolean) => import("@emotion/react").SerializedStyles;
|
|
18
18
|
export declare const arrows: import("@emotion/react").SerializedStyles;
|
|
19
19
|
export declare const squareButton: (theme: Theme) => import("@emotion/react").SerializedStyles;
|
|
20
|
+
export declare const fullOverlay: (theme: Theme) => import("@emotion/react").SerializedStyles;
|
|
21
|
+
/** Shrinks to the image, which stops at 80% of the viewport either way. */
|
|
22
|
+
export declare const fullDialog: import("@emotion/react").SerializedStyles;
|
|
23
|
+
export declare const fullImage: import("@emotion/react").SerializedStyles;
|
|
24
|
+
export declare const fullClose: import("@emotion/react").SerializedStyles;
|
|
20
25
|
export declare const openFull: import("@emotion/react").SerializedStyles;
|
|
21
26
|
/**
|
|
22
27
|
* The vertical strip is taken out of flow so that it never stretches the
|
|
@@ -18,7 +18,7 @@ export type CarouselItem = {
|
|
|
18
18
|
*/
|
|
19
19
|
thumbnailSrc?: string;
|
|
20
20
|
/**
|
|
21
|
-
* Full-size image opened
|
|
21
|
+
* Full-size image opened by the `allowOpenFull` button.
|
|
22
22
|
* Falls back to `src`.
|
|
23
23
|
*/
|
|
24
24
|
fullSrc?: string;
|
|
@@ -32,6 +32,11 @@ export type CarouselThumbnailsPosition = 'left' | 'right' | 'bottom' | false;
|
|
|
32
32
|
* own row under it.
|
|
33
33
|
*/
|
|
34
34
|
export type CarouselControlsPosition = 'overlay' | 'below';
|
|
35
|
+
/**
|
|
36
|
+
* Where the `allowOpenFull` button opens the image: a new browser tab, or a
|
|
37
|
+
* modal over the current page.
|
|
38
|
+
*/
|
|
39
|
+
export type CarouselOpenFullMode = 'newTab' | 'modal';
|
|
35
40
|
/**
|
|
36
41
|
* How an image fills the slide frame. Mirrors CSS `object-fit`.
|
|
37
42
|
*/
|
|
@@ -71,11 +76,19 @@ export type CarouselProps = {
|
|
|
71
76
|
*/
|
|
72
77
|
controlsPosition?: CarouselControlsPosition;
|
|
73
78
|
/**
|
|
74
|
-
* Show a button that opens the current image (`fullSrc ?? src`) in a new
|
|
75
|
-
* tab. It appears when the slide is hovered
|
|
79
|
+
* Show a button that opens the current image (`fullSrc ?? src`), in a new
|
|
80
|
+
* tab or a modal (see `openFullMode`). It appears when the slide is hovered
|
|
81
|
+
* or focused.
|
|
76
82
|
* @default false
|
|
77
83
|
*/
|
|
78
84
|
allowOpenFull?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Where the `allowOpenFull` button opens the image. `modal` shows it over a
|
|
87
|
+
* dimmed page at its natural size, capped at 80% of the viewport's width
|
|
88
|
+
* and height; autoplay pauses while it is open.
|
|
89
|
+
* @default 'newTab'
|
|
90
|
+
*/
|
|
91
|
+
openFullMode?: CarouselOpenFullMode;
|
|
79
92
|
/**
|
|
80
93
|
* Width-to-height ratio of the slide. The slide always fills the
|
|
81
94
|
* container's width; this sets its height. Ignored when `height` is set.
|
|
@@ -88,7 +101,7 @@ export type CarouselProps = {
|
|
|
88
101
|
height?: CSSProperties['height'];
|
|
89
102
|
/**
|
|
90
103
|
* How images fill the slide frame.
|
|
91
|
-
* @default '
|
|
104
|
+
* @default 'cover'
|
|
92
105
|
*/
|
|
93
106
|
fit?: CarouselFit;
|
|
94
107
|
/**
|
|
@@ -2,8 +2,9 @@ import { FunnelChartProps } from './types';
|
|
|
2
2
|
/**
|
|
3
3
|
* FunnelChart - Stage diagram drawn as a funnel or a triangle
|
|
4
4
|
*
|
|
5
|
-
*
|
|
6
|
-
* non-decreasing values never collapse or distort the shape.
|
|
5
|
+
* By default every level has the same height regardless of its value, so zero
|
|
6
|
+
* or non-decreasing values never collapse or distort the shape. Set
|
|
7
|
+
* `proportional` to size levels by value instead. The chart scales
|
|
7
8
|
* to fit its container — give the container a height, or it falls back to the
|
|
8
9
|
* shape's own aspect ratio.
|
|
9
10
|
*
|
|
@@ -21,4 +22,4 @@ import { FunnelChartProps } from './types';
|
|
|
21
22
|
* />
|
|
22
23
|
* ```
|
|
23
24
|
*/
|
|
24
|
-
export declare const FunnelChart: ({ data, type, withPointer, withTooltip, withLabels, renderLabel, renderPointerLabel, renderTooltip, tooltipProps, className, "aria-label": ariaLabel, }: FunnelChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const FunnelChart: ({ data, type, proportional, withPointer, withTooltip, withLabels, renderLabel, renderPointerLabel, renderTooltip, tooltipProps, className, "aria-label": ariaLabel, }: FunnelChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
|
|
@@ -16,13 +16,23 @@ export interface FunnelChartItem {
|
|
|
16
16
|
export type FunnelChartRender = (item: FunnelChartItem, index: number) => ReactNode;
|
|
17
17
|
/** Props for the FunnelChart component */
|
|
18
18
|
export interface FunnelChartProps {
|
|
19
|
-
/**
|
|
19
|
+
/**
|
|
20
|
+
* Levels from top to bottom. Every level has the same height unless
|
|
21
|
+
* `proportional` is set.
|
|
22
|
+
*/
|
|
20
23
|
data: FunnelChartItem[];
|
|
21
24
|
/**
|
|
22
25
|
* Shape of the chart
|
|
23
26
|
* @default 'funnel'
|
|
24
27
|
*/
|
|
25
28
|
type?: FunnelChartType;
|
|
29
|
+
/**
|
|
30
|
+
* Size each level's height in proportion to its value, so bigger values
|
|
31
|
+
* get bigger levels. Zero and tiny values keep a minimum height (40% of
|
|
32
|
+
* an equal level) so their labels still fit; non-numeric values count as 0.
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
proportional?: boolean;
|
|
26
36
|
/**
|
|
27
37
|
* Render a leader line and a label beside each level
|
|
28
38
|
* @default false
|
|
@@ -8,6 +8,13 @@ type Point = {
|
|
|
8
8
|
radius: number;
|
|
9
9
|
};
|
|
10
10
|
export declare const roundedPolygonPath: (points: Point[]) => string;
|
|
11
|
+
/**
|
|
12
|
+
* Splits `total` between levels in proportion to `values`. Levels that would
|
|
13
|
+
* fall below the minimum get the minimum, and the rest share what is left in
|
|
14
|
+
* proportion to their values. Non-numeric and negative values count as 0;
|
|
15
|
+
* when nothing is positive every level gets the same height.
|
|
16
|
+
*/
|
|
17
|
+
export declare const getProportionalHeights: (values: (number | string)[], total: number) => number[];
|
|
11
18
|
export interface FunnelBand {
|
|
12
19
|
top: number;
|
|
13
20
|
bottom: number;
|
|
@@ -21,5 +28,9 @@ export interface FunnelGeometry {
|
|
|
21
28
|
/** Half-width of the shape at a given distance from the top */
|
|
22
29
|
halfWidthAt: (y: number) => number;
|
|
23
30
|
}
|
|
24
|
-
|
|
31
|
+
/**
|
|
32
|
+
* Shape and level bands. Pass `heights` (summing to `DESIGN_HEIGHT`) to size
|
|
33
|
+
* the levels; otherwise they are equal.
|
|
34
|
+
*/
|
|
35
|
+
export declare const getGeometry: (type: FunnelChartType, levels: number, heights?: number[]) => FunnelGeometry;
|
|
25
36
|
export {};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import { FloatingActionButtonIcon, FloatingActionButtonSize } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* FloatingActionButton - A button fixed to a corner of the viewport for the
|
|
4
|
+
* page's primary action, optionally opening a speed-dial menu of related
|
|
5
|
+
* actions.
|
|
6
|
+
*
|
|
7
|
+
* ### Look
|
|
8
|
+
* Icon-only by default; pass `label` for the extended (icon + text) FAB.
|
|
9
|
+
* `color` takes the design's `primary` / `secondary`, a theme color key or
|
|
10
|
+
* any CSS color — for custom colors the icon and label color is chosen for
|
|
11
|
+
* contrast. `shadow` and `shape` are independent of the color.
|
|
12
|
+
*
|
|
13
|
+
* ### Menu
|
|
14
|
+
* Pass `actions` to turn the button into a menu trigger. The items stack
|
|
15
|
+
* away from the corner as secondary FABs of the same size; the trigger
|
|
16
|
+
* switches to `openIcon` while open. Choosing an item, Escape, a click
|
|
17
|
+
* outside or tabbing away closes the menu. Control it with `open` +
|
|
18
|
+
* `onOpenChange`, or leave it uncontrolled (`defaultOpen`).
|
|
19
|
+
*
|
|
20
|
+
* ### Icons
|
|
21
|
+
* A kit icon name is sized for the FAB and painted with its foreground color.
|
|
22
|
+
* Any other node is rendered as-is.
|
|
23
|
+
*
|
|
24
|
+
* @category Components
|
|
25
|
+
* @subcategory Buttons
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* ```tsx
|
|
29
|
+
* <FloatingActionButton aria-label="Add member" onClick={addMember} />
|
|
30
|
+
* ```
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```tsx
|
|
34
|
+
* // Extended, secondary, bottom-left
|
|
35
|
+
* <FloatingActionButton label="New report" color="secondary" position="bottom-left" />
|
|
36
|
+
* ```
|
|
37
|
+
*
|
|
38
|
+
* @example
|
|
39
|
+
* ```tsx
|
|
40
|
+
* // Speed-dial menu
|
|
41
|
+
* <FloatingActionButton
|
|
42
|
+
* aria-label="Create"
|
|
43
|
+
* actions={[
|
|
44
|
+
* { id: 'task', icon: 'plus', label: 'Task', onClick: createTask },
|
|
45
|
+
* { id: 'note', icon: 'edit', label: 'Note', onClick: createNote },
|
|
46
|
+
* ]}
|
|
47
|
+
* />
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* @accessibility
|
|
51
|
+
* - Icon-only FABs need an `aria-label` (a dev warning fires without one)
|
|
52
|
+
* - In menu mode the trigger has `aria-haspopup="menu"` and `aria-expanded`;
|
|
53
|
+
* the items are `menuitem`s
|
|
54
|
+
* - Opening the menu from the keyboard focuses its first item; ↑/↓, Home and
|
|
55
|
+
* End move between items (and from the trigger into the menu while it is
|
|
56
|
+
* open); Escape closes it and returns focus to the trigger
|
|
57
|
+
*/
|
|
58
|
+
export declare const FloatingActionButton: import("react").ForwardRefExoticComponent<Pick<import("react").AriaAttributes, "aria-label" | "aria-describedby"> & {
|
|
59
|
+
icon?: FloatingActionButtonIcon;
|
|
60
|
+
label?: string;
|
|
61
|
+
color?: import("./types").FloatingActionButtonColor;
|
|
62
|
+
shadow?: boolean;
|
|
63
|
+
shape?: "square" | "round";
|
|
64
|
+
size?: FloatingActionButtonSize;
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
onClick?: import("react").MouseEventHandler<HTMLButtonElement>;
|
|
67
|
+
actions?: import("./types").FloatingActionButtonAction[];
|
|
68
|
+
showActionLabels?: boolean;
|
|
69
|
+
open?: boolean;
|
|
70
|
+
defaultOpen?: boolean;
|
|
71
|
+
onOpenChange?: (open: boolean) => void;
|
|
72
|
+
openIcon?: FloatingActionButtonIcon;
|
|
73
|
+
position?: import("./types").FloatingActionButtonPosition;
|
|
74
|
+
offset?: number | {
|
|
75
|
+
x: number;
|
|
76
|
+
y: number;
|
|
77
|
+
};
|
|
78
|
+
className?: string;
|
|
79
|
+
} & import("react").RefAttributes<HTMLButtonElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './FloatingActionButton';
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { Theme } from '@emotion/react';
|
|
2
|
+
import { FloatingActionButtonColor, FloatingActionButtonPosition, FloatingActionButtonSize } from './types';
|
|
3
|
+
type SizeTokens = {
|
|
4
|
+
/** Height, and width when icon-only. */
|
|
5
|
+
box: number;
|
|
6
|
+
/** Glyph size when icon-only. */
|
|
7
|
+
iconOnly: number;
|
|
8
|
+
/** Glyph size next to a label. */
|
|
9
|
+
iconLabelled: number;
|
|
10
|
+
paddingLeft: number;
|
|
11
|
+
paddingRight: number;
|
|
12
|
+
gap: number;
|
|
13
|
+
fontSize: number;
|
|
14
|
+
lineHeight: number;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Figma draws labelled FABs 4px taller than icon-only ones of the same size;
|
|
18
|
+
* that is a design bug, so both use the icon-only height here.
|
|
19
|
+
*/
|
|
20
|
+
export declare const SIZES: Record<FloatingActionButtonSize, SizeTokens>;
|
|
21
|
+
export type ColorTokens = {
|
|
22
|
+
background: string;
|
|
23
|
+
hover: string;
|
|
24
|
+
active: string;
|
|
25
|
+
foreground: string;
|
|
26
|
+
};
|
|
27
|
+
/**
|
|
28
|
+
* Resolves `color` to the four colors a FAB paints with. The two named
|
|
29
|
+
* colors follow the design tokens; anything else is a theme key or CSS
|
|
30
|
+
* color whose foreground is picked for contrast.
|
|
31
|
+
*/
|
|
32
|
+
export declare const resolveColors: (theme: Theme, color: FloatingActionButtonColor) => ColorTokens;
|
|
33
|
+
export declare const container: (position: FloatingActionButtonPosition, x: number, y: number) => import("@emotion/react").SerializedStyles;
|
|
34
|
+
export declare const menu: (position: FloatingActionButtonPosition) => import("@emotion/react").SerializedStyles;
|
|
35
|
+
export declare const button: (theme: Theme, { size, colors, shadow, round, labelled, }: {
|
|
36
|
+
size: FloatingActionButtonSize;
|
|
37
|
+
colors: ColorTokens;
|
|
38
|
+
shadow: boolean;
|
|
39
|
+
round: boolean;
|
|
40
|
+
labelled: boolean;
|
|
41
|
+
}) => import("@emotion/react").SerializedStyles;
|
|
42
|
+
export {};
|