@czi-sds/components 22.3.2 → 22.4.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, CardMedia, CardMediaProps, CardProps, SliderProps, SwitchProps, TabsProps, DrawerProps, ToggleButtonGroupProps } from "@mui/material";
2
+ import { AccordionDetailsProps, PaletteMode, PopperProps, AutocompleteInputChangeReason, AutocompleteRenderInputParams, PaperProps, CardMedia, CardMediaProps, CardProps, SliderProps, SwitchProps, AppBarProps, 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";
@@ -80,6 +80,8 @@ interface BaseColor {
80
80
  textPrimaryInverse: string;
81
81
  textSecondary: string;
82
82
  textSecondaryInverse: string;
83
+ textTertiary: string;
84
+ textTertiaryInverse: string;
83
85
  textDisabled: string;
84
86
  textDisabledInverse: string;
85
87
  textOnFill: string;
@@ -1454,19 +1456,23 @@ type TagProps = SdsTagProps & ExtraTagProps;
1454
1456
  declare const Tag: (props: TagProps) => JSX.Element;
1455
1457
  interface NavigationFooterNavItem {
1456
1458
  label: string;
1457
- url: string;
1459
+ url?: string;
1458
1460
  component?: ElementType;
1459
1461
  linkProps?: Record<string, unknown>;
1460
1462
  }
1461
1463
  interface FooterImage {
1462
1464
  image: ReactNode;
1463
- url: string;
1465
+ url?: string;
1466
+ component?: ElementType;
1467
+ linkProps?: Record<string, unknown>;
1464
1468
  }
1465
1469
  interface NavigationFooterProps {
1466
1470
  hasInvertedStyle?: boolean;
1467
1471
  images?: FooterImage[];
1468
1472
  logo?: ReactNode;
1469
1473
  logoUrl?: string;
1474
+ logoComponent?: ElementType;
1475
+ logoLinkProps?: Record<string, unknown>;
1470
1476
  navItems?: NavigationFooterNavItem[];
1471
1477
  navLinks?: NavigationFooterNavItem[];
1472
1478
  tag?: string;
@@ -1483,34 +1489,69 @@ interface FooterLinkProps {
1483
1489
  showDivider: boolean;
1484
1490
  hasInvertedStyle?: boolean;
1485
1491
  }
1486
- declare function NavigationFooter({ hasInvertedStyle, images, logo, logoUrl, navItems, navLinks, tag, tagColor, title, ...rest }: NavigationFooterProps): import("react/jsx-runtime").JSX.Element;
1487
- interface NavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
1492
+ declare function NavigationFooter({ hasInvertedStyle, images, logo, logoUrl, logoComponent, logoLinkProps, navItems, navLinks, tag, tagColor, title, ...rest }: NavigationFooterProps): import("react/jsx-runtime").JSX.Element;
1493
+ interface BaseNavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
1488
1494
  key: T;
1489
1495
  label: ReactNode;
1496
+ }
1497
+ interface TextNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavigationHeaderPrimaryNavItem<T> {
1498
+ itemType: "text";
1490
1499
  tag?: string;
1491
1500
  tagColor?: SdsTagColorType;
1492
1501
  onClick?: (e: React.SyntheticEvent) => void;
1493
1502
  }
1494
- interface BaseHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
1495
- label: string;
1503
+ interface DropdownItem {
1504
+ label: ReactNode;
1505
+ onClick?: () => void;
1506
+ component?: React.ElementType;
1507
+ href?: string;
1508
+ rel?: string;
1509
+ target?: string;
1510
+ }
1511
+ interface DropdownNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavigationHeaderPrimaryNavItem<T> {
1512
+ itemType: "dropdown";
1513
+ items: DropdownItem[];
1514
+ }
1515
+ type NavigationHeaderPrimaryNavItem<T extends string> = TextNavigationHeaderPrimaryNavItem<T> | DropdownNavigationHeaderPrimaryNavItem<T>;
1516
+ interface NavigationHeaderPrimaryNavProps<T extends string> {
1517
+ hasInvertedStyle?: boolean;
1518
+ isNarrow?: boolean;
1519
+ items: NavigationHeaderPrimaryNavItem<T>[];
1520
+ onChange(value: T): void;
1521
+ value: T;
1496
1522
  }
1497
- interface TextHeaderSecondaryNavItem extends BaseHeaderSecondaryNavItem {
1498
- onClick?(): void;
1523
+ interface TextHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
1524
+ label: string;
1499
1525
  itemType: "text";
1500
1526
  }
1501
- interface DropdownHeaderSecondaryNavItem extends BaseHeaderSecondaryNavItem {
1527
+ interface DropdownItem$0 {
1528
+ label: ReactNode;
1529
+ onClick?: (event: React.MouseEvent) => void;
1530
+ component?: React.ElementType;
1531
+ href?: string;
1532
+ rel?: string;
1533
+ target?: string;
1534
+ }
1535
+ interface DropdownHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
1536
+ label: string;
1502
1537
  itemType: "dropdown";
1503
- items: Pick<TextHeaderSecondaryNavItem, "label" | "onClick" | "component" | "href">[];
1538
+ items: DropdownItem$0[];
1504
1539
  }
1505
1540
  type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
1506
- interface NavigationHeaderProps<T extends string = string> {
1541
+ interface NavigationHeaderSecondaryNavProps {
1542
+ items: NavigationHeaderSecondaryNavItem[];
1543
+ hasInvertedStyle?: boolean;
1544
+ isNarrow?: boolean;
1545
+ }
1546
+ interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
1507
1547
  activePrimaryNavKey?: string;
1508
- buttons?: (SdsProps$0 & ButtonProps$0)[];
1548
+ buttons?: Partial<SdsProps$0 & ButtonProps$0>[] | React.ReactNode[];
1509
1549
  hasInvertedStyle?: boolean;
1510
1550
  logo?: ReactNode;
1511
1551
  logoUrl?: string;
1512
1552
  logoLinkComponent?: ElementType;
1513
1553
  logoLinkProps?: LinkProps$1;
1554
+ scrollElevation?: boolean;
1514
1555
  primaryNavItems?: NavigationHeaderPrimaryNavItem<T>[];
1515
1556
  primaryNavPosition?: "left" | "right";
1516
1557
  searchProps?: Partial<InputSearchProps>;
@@ -1520,11 +1561,13 @@ interface NavigationHeaderProps<T extends string = string> {
1520
1561
  tag?: string;
1521
1562
  tagColor?: SdsTagColorType;
1522
1563
  title: string;
1564
+ drawerOpen?: boolean;
1565
+ setDrawerOpen?: (open: boolean) => void;
1523
1566
  }
1524
1567
  type IconButtonProps = SdsIconButtonProps & {
1525
1568
  children?: string;
1526
1569
  };
1527
- declare const NavigationHeader: import("react").ForwardRefExoticComponent<NavigationHeaderProps<string> & import("react").RefAttributes<HTMLDivElement>>;
1570
+ declare const NavigationHeader: React.ForwardRefExoticComponent<Omit<NavigationHeaderProps<string>, "ref"> & React.RefAttributes<HTMLDivElement>>;
1528
1571
  interface NavigationJumpToExtraProps extends Omit<TabsProps, "onChange">, CommonThemeProps {
1529
1572
  }
1530
1573
  type Item = {
@@ -1688,5 +1731,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
1688
1731
  * @see https://mui.com/material-ui/react-table/
1689
1732
  */
1690
1733
  declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
1691
- 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 };
1692
- export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderSecondaryNavItem, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
1734
+ 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, 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 };
1735
+ export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };