@czi-sds/components 22.2.1 → 22.3.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.
@@ -1,5 +1,5 @@
1
1
  /// <reference types="react" />
2
- import { AccordionDetailsProps, PaletteMode, PopperProps, AutocompleteInputChangeReason, AutocompleteRenderInputParams, PaperProps, SliderProps, SwitchProps, TabsProps, DrawerProps, ToggleButtonGroupProps } from "@mui/material";
2
+ import { AccordionDetailsProps, PaletteMode, PopperProps, AutocompleteInputChangeReason, AutocompleteRenderInputParams, PaperProps, CardMedia, CardMediaProps, CardProps, SliderProps, SwitchProps, TabsProps, DrawerProps, ToggleButtonGroupProps } from "@mui/material";
3
3
  import { AccordionProps as RawAccordionProps } from "@mui/material";
4
4
  import { AccordionSummaryProps as RawAccordionSummaryProps } from "@mui/material";
5
5
  import { AutocompleteChangeDetails as AutocompleteChangeDetails$0 } from "@mui/material";
@@ -32,7 +32,7 @@ import { ChipProps as ChipProps$0 } from "@mui/material";
32
32
  import { TabProps as RawTabProps } from "@mui/material";
33
33
  import { TabsProps as RawTabsProps } from "@mui/material";
34
34
  import React from "react";
35
- import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, ComponentType } from "react";
35
+ import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, ComponentType, ElementType } from "react";
36
36
  import { Theme, ThemeOptions, TypographyStyle, Breakpoints, PaletteOptions } from "@mui/material/styles";
37
37
  import { SerializedStyles } from "@emotion/react";
38
38
  import { AlertProps } from "@mui/lab";
@@ -90,16 +90,16 @@ interface BaseColor {
90
90
  fillDisabled: string;
91
91
  divider: string;
92
92
  dividerInverse: string;
93
- border: string;
94
- borderInverse: string;
95
- borderHover: string;
96
- borderHoverInverse: string;
93
+ borderPrimary: string;
94
+ borderPrimaryInverse: string;
95
+ borderSecondary: string;
96
+ borderPrimaryHover: string;
97
+ borderPrimaryHoverInverse: string;
97
98
  borderOnFill: string;
98
- borderPressed: string;
99
- borderPressedInverse: string;
100
- borderDisabled: string;
101
- borderDisabledInverse: string;
102
- borderTable: string;
99
+ borderPrimaryPressed: string;
100
+ borderPrimaryPressedInverse: string;
101
+ borderPrimaryDisabled: string;
102
+ borderPrimaryDisabledInverse: string;
103
103
  ornamentDisabled: string;
104
104
  ornamentDisabledInverse: string;
105
105
  ornamentOnFill: string;
@@ -1118,6 +1118,68 @@ interface ComplexFilterProps<T extends DefaultAutocompleteOption, Multiple exten
1118
1118
  }
1119
1119
  // eslint-disable-next-line sonarjs/cognitive-complexity
1120
1120
  declare const ComplexFilter: <T extends DefaultAutocompleteOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined>({ options, label, multiple, search, onChange, DropdownMenuProps, InputDropdownProps, value: propValue, PopperComponent, InputDropdownComponent, isTriggerChangeOnOptionClick, ...rest }: ComplexFilterProps<T, Multiple, DisableClearable, FreeSolo>) => JSX.Element;
1121
+ type CardExtraProps = Partial<ContentCardProps> & CommonThemeProps;
1122
+ declare const StyledContentCardBody: import("@emotion/styled").StyledComponent<import("@mui/material").CardContentOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
1123
+ ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
1124
+ }, "className" | "style" | "classes" | "children" | "sx"> & {
1125
+ theme?: import("@emotion/react").Theme | undefined;
1126
+ } & CardExtraProps, {}, {}>;
1127
+ interface ContentCardTitleProps {
1128
+ overlineText?: string;
1129
+ titleText?: string;
1130
+ subtitleText?: string;
1131
+ metadataText?: string;
1132
+ }
1133
+ interface ContentCardActionsProps {
1134
+ buttonsPosition?: "left" | "right";
1135
+ clickableCard?: ContentCardProps["clickableCard"];
1136
+ children: React.ReactElement<ButtonProps> | Array<React.ReactElement<ButtonProps>>;
1137
+ }
1138
+ /**
1139
+ * @see https://mui.com/material-ui/api/card-actions/
1140
+ */
1141
+ declare const ContentCardActions: React.ForwardRefExoticComponent<ContentCardActionsProps & React.RefAttributes<HTMLDivElement>>;
1142
+ interface BaseContentCardProps extends CardProps {
1143
+ sdsType?: "wide" | "narrow";
1144
+ overlineText?: string;
1145
+ titleText?: string;
1146
+ subtitleText?: string;
1147
+ metadataText?: string;
1148
+ boundingBox?: boolean;
1149
+ decorativeBorder?: boolean;
1150
+ children?: React.ReactNode;
1151
+ clickableCard?: boolean;
1152
+ buttonsPosition?: "left" | "right";
1153
+ }
1154
+ interface ImageContentCardProps extends BaseContentCardProps {
1155
+ visualElementType: "image";
1156
+ image?: React.ReactNode;
1157
+ imagePosition?: "left" | "right";
1158
+ imagePadding?: boolean;
1159
+ imageSize?: number;
1160
+ icon?: never;
1161
+ }
1162
+ interface IconContentCardProps extends BaseContentCardProps {
1163
+ visualElementType: "icon";
1164
+ icon?: React.ReactNode;
1165
+ image?: never;
1166
+ imageSize?: never;
1167
+ imagePosition?: never;
1168
+ imagePadding?: never;
1169
+ }
1170
+ interface NoneContentCardProps extends BaseContentCardProps {
1171
+ visualElementType: "none";
1172
+ icon?: never;
1173
+ image?: never;
1174
+ imagePosition?: never;
1175
+ imagePadding?: never;
1176
+ imageSize?: never;
1177
+ }
1178
+ type ContentCardProps = ImageContentCardProps | IconContentCardProps | NoneContentCardProps;
1179
+ /**
1180
+ * @see https://mui.com/material-ui/react-card/
1181
+ */
1182
+ declare const ContentCard: React.ForwardRefExoticComponent<(Omit<ImageContentCardProps, "ref"> | Omit<IconContentCardProps, "ref"> | Omit<NoneContentCardProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
1121
1183
  type DialogPaperProps = PaperProps;
1122
1184
  /**
1123
1185
  * @see https://mui.com/material-ui/react-paper/
@@ -1385,6 +1447,38 @@ type TagProps = SdsTagProps & ExtraTagProps;
1385
1447
  * [string, string, string] - applies custom colors for [font, background, icon]
1386
1448
  */
1387
1449
  declare const Tag: (props: TagProps) => JSX.Element;
1450
+ interface NavigationFooterNavItem {
1451
+ label: string;
1452
+ url: string;
1453
+ component?: ElementType;
1454
+ linkProps?: Record<string, unknown>;
1455
+ }
1456
+ interface FooterImage {
1457
+ image: ReactNode;
1458
+ url: string;
1459
+ }
1460
+ interface NavigationFooterProps {
1461
+ hasInvertedStyle?: boolean;
1462
+ images?: FooterImage[];
1463
+ logo?: ReactNode;
1464
+ logoUrl?: string;
1465
+ navItems?: NavigationFooterNavItem[];
1466
+ navLinks?: NavigationFooterNavItem[];
1467
+ tag?: string;
1468
+ tagColor?: TagProps["tagColor"];
1469
+ title: string;
1470
+ }
1471
+ interface NavItemProps {
1472
+ item: NavigationFooterNavItem;
1473
+ hasInvertedStyle?: boolean;
1474
+ isNarrow?: boolean;
1475
+ }
1476
+ interface FooterLinkProps {
1477
+ link: NavigationFooterNavItem;
1478
+ showDivider: boolean;
1479
+ hasInvertedStyle?: boolean;
1480
+ }
1481
+ declare function NavigationFooter({ hasInvertedStyle, images, logo, logoUrl, navItems, navLinks, tag, tagColor, title, ...rest }: NavigationFooterProps): import("react/jsx-runtime").JSX.Element;
1388
1482
  interface NavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
1389
1483
  key: T;
1390
1484
  label: ReactNode;
@@ -1587,5 +1681,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
1587
1681
  * @see https://mui.com/material-ui/react-table/
1588
1682
  */
1589
1683
  declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
1590
- export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, SdsIconButtonProps, SdsMinimalButtonProps, SdsButtonProps, SdsProps, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationHeaderProps, IconButtonProps, NavigationHeader, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
1591
- export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
1684
+ export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerProps, Banner, SdsIconButtonProps, SdsMinimalButtonProps, SdsButtonProps, SdsProps, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, InputDropdown as ComplexFilterInputDropdown, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPopper$1 as ComplexFilterPopper, StyledPopper$1 as DropdownPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle$0 as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, StyledPaper$1 as DropdownPaper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, LinkProps$0 as LinkProps, Link, ListProps, List, ListItemLabel, ListItemProps, ListItem, ListSubheaderProps, ListSubheader, LoadingIndicatorProps$0 as LoadingIndicatorProps, LoadingIndicator, MenuProps, Menu, IconNameToSmallSizes, MenuItemExtraProps, MenuItemProps, MenuItem, DefaultMenuSelectOption, MenuSelectProps, MenuSelect, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, NavigationHeaderProps, IconButtonProps, NavigationHeader, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, Panel, SingleButtonDefinition, SegmentedControlProps, SegmentedControl, SdsTableProps, TableProps, Table, TableHeaderProps, TableHeader, TableRowProps, TableRow, Tabs, TabProps$0 as TabProps, Tab, SdsTagProps, TagProps, Tag, SdsTagFilterProps, TagFilterProps, TagFilter, Tooltip, TooltipCondensedProps, TooltipCondensed, TooltipTableContent, TooltipTableContent as TooltipTable, AccentColor, BaseColor, IntentColor, SDSPalette, SDSTheme, SDSThemeOptions, AppTheme, Shadows, TypographyStyles, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXs, fontTabularS, fontTabularSemiboldXs, fontTabularSemiboldS, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints };
1685
+ export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };