@czi-sds/components 23.3.2 → 23.3.3

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.
@@ -12,6 +12,7 @@ import { TextFieldProps as RawTextFieldSearchProps } from "@mui/material";
12
12
  import { MenuItemProps as RawMenuItemProps } from "@mui/material";
13
13
  import { ClickAwayListenerProps as MUIClickAwayListenerProps } from "@mui/material";
14
14
  import { ButtonProps as RawButtonProps } from "@mui/material";
15
+ import { ButtonGroupProps as RawButtonGroupProps } from "@mui/material";
15
16
  import { IconButtonProps as RawButtonIconProps } from "@mui/material";
16
17
  import { ButtonProps as ButtonProps$0 } from "@mui/material";
17
18
  import { TooltipProps as RawTooltipProps } from "@mui/material";
@@ -1115,6 +1116,44 @@ interface ButtonDropdownProps extends Omit<ButtonProps, "sdsType"> {
1115
1116
  * @see https://mui.com/material-ui/react-button/
1116
1117
  */
1117
1118
  declare const ButtonDropdown: React.ForwardRefExoticComponent<Omit<ButtonDropdownProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
1119
+ interface ButtonGroupProps extends Omit<RawButtonGroupProps, "variant" | "size"> {
1120
+ /**
1121
+ * The background appearance of the button group.
1122
+ * @default "matchBackground"
1123
+ */
1124
+ backgroundAppearance?: "dark" | "matchBackground";
1125
+ /**
1126
+ * The style of the button group.
1127
+ * @default "outline"
1128
+ */
1129
+ sdsStyle?: "outline";
1130
+ /**
1131
+ * The type of the button group that determines the color scheme.
1132
+ * @default "primary"
1133
+ */
1134
+ sdsType?: "primary" | "secondary";
1135
+ /**
1136
+ * The size of the button group.
1137
+ * @default "medium"
1138
+ */
1139
+ size?: "small" | "medium" | "large";
1140
+ }
1141
+ /**
1142
+ * Check if a button element is icon-only (has no text content, only an icon).
1143
+ * A button is icon-only if:
1144
+ * - It has no children, OR
1145
+ * - Its only child is an Icon component
1146
+ */
1147
+ declare const isIconOnlyButton: (buttonElement: ReactNode) => boolean;
1148
+ /**
1149
+ * ButtonGroup - A group of buttons that can be used to toggle between options.
1150
+ *
1151
+ * Built on top of MUI ButtonGroup component.
1152
+ * @see https://mui.com/material-ui/react-button-group/
1153
+ *
1154
+ * Note: Vertical orientation is only available when all buttons are icon-only.
1155
+ */
1156
+ declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
1118
1157
  interface ButtonIconExtraProps extends CommonThemeProps {
1119
1158
  disabled?: boolean;
1120
1159
  sdsSize?: "small" | "medium" | "large";
@@ -1433,6 +1472,8 @@ interface InputDropdownProps extends CommonThemeProps, Omit<ButtonProps$0, (type
1433
1472
  // a React.ComponentType<InputDropdownProps>. This is a workaround until a more
1434
1473
  // permanent solution is implemented.
1435
1474
  style?: React.CSSProperties;
1475
+ startIcon?: ReactNode;
1476
+ size?: ButtonProps$0["size"];
1436
1477
  }
1437
1478
  type SdsInputDropdownProps = InputDropdownProps;
1438
1479
  type InputDropdownProps$0 = SdsInputDropdownProps & {
@@ -1499,7 +1540,9 @@ interface BaseContentCardProps extends CardProps {
1499
1540
  decorativeBorder?: boolean;
1500
1541
  children?: ReactNode;
1501
1542
  clickableCard?: boolean;
1502
- clickableCardProps?: Partial<ButtonProps$0>;
1543
+ clickableCardProps?: Partial<ButtonProps$0 & {
1544
+ target?: HTMLAttributeAnchorTarget;
1545
+ }>;
1503
1546
  buttonsPosition?: "left" | "right";
1504
1547
  classes?: {
1505
1548
  cardPaper?: string;
@@ -1560,10 +1603,10 @@ interface ContentCardActionsProps {
1560
1603
  * @see https://mui.com/material-ui/api/card-actions/
1561
1604
  */
1562
1605
  declare const ContentCardActions: React.ForwardRefExoticComponent<ContentCardActionsProps & React.RefAttributes<HTMLDivElement>>;
1563
- declare const StyledOverlineText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1564
- declare const StyledTitleText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1565
- declare const StyledSubtitleText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1566
- declare const StyledMetadataText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & CommonThemeProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1606
+ declare const StyledOverlineText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1607
+ declare const StyledTitleText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1608
+ declare const StyledSubtitleText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1609
+ declare const StyledMetadataText: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
1567
1610
  /**
1568
1611
  * @see https://mui.com/material-ui/react-card/
1569
1612
  */
@@ -2332,5 +2375,5 @@ interface DiscreteColorGeneratorOptions {
2332
2375
  * @returns Array of color strings in hex format
2333
2376
  */
2334
2377
  declare const generateDiscreteColors: (count: number, options?: DiscreteColorGeneratorOptions) => string[];
2335
- export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps$0 as AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerIntentType, BannerProps, Banner, Button, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggle, ButtonLegacyType, ButtonLegacyTypeMap, ButtonLegacySize, SdsIconButtonLegacyProps, SdsMinimalButtonLegacyProps, SdsButtonLegacyProps, SdsLegacyProps, ButtonLegacyProps, ButtonLegacy, ButtonDropdownLegacyProps, ButtonDropdownLegacy, ButtonToggleLegacyProps, ButtonToggleLegacy, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, DropdownInputDropdown as ComplexFilterInputDropdown, DropdownPopper as ComplexFilterPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogExtraProps, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPaper$1 as DropdownPaper, StyledPopper$1 as DropdownPopper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, Hero, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, IntentMessage, Legend, 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, 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, SDSDarkThemeColors, SDSLightThemeColors, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyXxxxs, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeMediumXs, fontCodeMediumS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXxxxs, fontTabularXxxs, fontTabularXxs, fontTabularXs, fontTabularS, fontTabularMediumXxxxs, fontTabularMediumXxxs, fontTabularMediumXxs, fontTabularMediumXs, fontTabularMediumS, fontTabularSemiboldXxxxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxs, fontTabularSemiboldXs, fontTabularSemiboldS, fontTitle, fontTitleBoldS, fontTitleBoldM, fontTitleBoldL, fontLink, fontLinkL, fontLinkM, fontLinkS, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints, DiscreteColorGeneratorOptions, generateDiscreteColors };
2336
- export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ButtonProps, ButtonDropdownProps, ButtonToggleProps, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, HeroProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, IntentMessageItem, IntentMessageProps, LegendProps, LegendItemData, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
2378
+ export { AccordionDetails, AccordionHeader, AccordionProps, Accordion, Alert, AutocompleteSingleColumnOption, AutocompleteMultiColumnOption, SDSAutocompleteOptions, AutocompleteMultiColumnValue, AutocompleteSingleColumnValue, SDSAutocompleteValue, AutocompleteSingleColumnOnChange, AutocompleteMultiColumnOnChange, SDSAutocompleteOnChange, AutocompleteProps$0 as AutocompleteProps, StyledPopper as AutocompleteMultiColumnStyledPopper, StyledPaper$0 as AutocompleteSingleColumnStyledPaper, Autocomplete$0 as Autocomplete, BannerIntentType, BannerProps, Banner, Button, ButtonDropdown, isIconOnlyButton, ButtonGroup, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggle, ButtonLegacyType, ButtonLegacyTypeMap, ButtonLegacySize, SdsIconButtonLegacyProps, SdsMinimalButtonLegacyProps, SdsButtonLegacyProps, SdsLegacyProps, ButtonLegacyProps, ButtonLegacy, ButtonDropdownLegacyProps, ButtonDropdownLegacy, ButtonToggleLegacyProps, ButtonToggleLegacy, CalloutIntentType, CalloutSdsStyleType, CalloutProps, ExposedCalloutProps, Callout, CalloutTitle, CellBasicRawProps, CellBasicProps, CellBasic, CellComponentProps, CellComponent, CellHeaderDirection, CellHeaderProps, CellHeader, Chip, DropdownInputDropdown as ComplexFilterInputDropdown, DropdownPopper as ComplexFilterPopper, ComplexFilterProps, ComplexFilter, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogExtraProps, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Overline as DialogTitleOverline, DialogTitleProps, DialogTitle, InputDropdown as DropdownInputDropdown, InputDropdown, StyledPaper$1 as DropdownPaper, StyledPopper$1 as DropdownPopper, ExtraDropdownProps, DropdownProps, Dropdown, DefaultDropdownMenuOption, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, DropdownMenuProps, DropdownMenu, Hero, SdsIconWithColor$0 as SdsIconWithColor, IconProps, Icon, CheckboxProps, InputCheckbox, InputDropdownProps$0 as InputDropdownProps, RadioContentProps, RadioProps, InputRadio, AccessibleInputSearchProps, InputSearchProps, InputSearch, InputSliderProps, InputSlider, InputTextProps, InputText, InputToggle, IntentMessage, Legend, 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, 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, SDSDarkThemeColors, SDSLightThemeColors, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, SDSPaletteLight, SDSPaletteDark, makeThemeOptions, focusVisibleA11yStyle, fontBody, fontBodyL, fontBodyM, fontBodyS, fontBodyXs, fontBodyXxs, fontBodyXxxs, fontBodyXxxxs, fontBodyMediumL, fontBodyMediumM, fontBodyMediumS, fontBodyMediumXs, fontBodyMediumXxs, fontBodyMediumXxxs, fontBodyMediumXxxxs, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodySemiboldXxxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderXxl, fontHeaderXl, fontHeaderL, fontHeaderM, fontHeaderS, fontHeaderXs, fontHeaderXxs, fontHeaderXxxs, fontCode, fontCodeXs, fontCodeS, fontCodeMediumXs, fontCodeMediumS, fontCodeSemiboldXs, fontCodeSemiboldS, fontTabular, fontTabularXxxxs, fontTabularXxxs, fontTabularXxs, fontTabularXs, fontTabularS, fontTabularMediumXxxxs, fontTabularMediumXxxs, fontTabularMediumXxs, fontTabularMediumXs, fontTabularMediumS, fontTabularSemiboldXxxxs, fontTabularSemiboldXxxs, fontTabularSemiboldXxs, fontTabularSemiboldXs, fontTabularSemiboldS, fontTitle, fontTitleBoldS, fontTitleBoldM, fontTitleBoldL, fontLink, fontLinkL, fontLinkM, fontLinkS, fontLinkXs, fontLinkXxs, fontLinkXxxs, fontLinkXxxxs, fontLinkMediumL, fontLinkMediumM, fontLinkMediumS, fontLinkMediumXs, fontLinkMediumXxs, fontLinkMediumXxxs, fontLinkMediumXxxxs, fontLinkSemiboldL, fontLinkSemiboldM, fontLinkSemiboldS, fontLinkSemiboldXs, fontLinkSemiboldXxs, fontLinkSemiboldXxxs, fontLinkSemiboldXxxxs, CommonThemeProps, getSpaces, getSpacings, getTypography, getMode, getPalette, getColors, getSemanticColors, getShadows, getCorners, getFontWeights, getIconSizes, getBorders, getBreakpoints, DiscreteColorGeneratorOptions, generateDiscreteColors };
2379
+ export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ButtonProps, ButtonDropdownProps, ButtonGroupProps, ButtonToggleProps, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, HeroProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, IntentMessageItem, IntentMessageProps, LegendProps, LegendItemData, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };