@czi-sds/components 22.14.0 → 22.15.0

package/dist/index.cjs.d.ts

@@ -77,52 +77,72 @@ interface AccentColor {
 }
 interface BaseColor {
     backgroundPrimary: string;
+    backgroundPrimaryDark: string;
     backgroundPrimaryInverse: string;
     backgroundSecondary: string;
+    backgroundSecondaryOnDark: string;
     backgroundSecondaryInverse: string;
     backgroundTertiary: string;
     surface: string;
+    surfaceOnDark: string;
     surfaceInverse: string;
     textPrimary: string;
+    textPrimaryOnDark: string;
     textPrimaryInverse: string;
     textSecondary: string;
+    textSecondaryOnDark: string;
     textSecondaryInverse: string;
     textTertiary: string;
+    textTertiaryOnDark: string;
     textTertiaryInverse: string;
     textDisabled: string;
+    textDisabledOnDark: string;
     textDisabledInverse: string;
     textOnFill: string;
     fillHover: string;
+    fillHoverOnDark: string;
     fillHoverInverse: string;
     fillPressed: string;
+    fillPressedOnDark: string;
     fillPressedInverse: string;
     fillPrimary: string;
     fillOpen: string;
+    fillOpenOnDark: string;
     fillOpenInverse: string;
     fillSelected: string;
     fillDisabled: string;
     divider: string;
+    dividerOnDark: string;
     dividerInverse: string;
     borderPrimary: string;
+    borderPrimaryOnDark: string;
     borderPrimaryInverse: string;
     borderSecondary: string;
     borderPrimaryHover: string;
+    borderPrimaryHoverOnDark: string;
     borderPrimaryHoverInverse: string;
     borderOnFill: string;
     borderPrimaryPressed: string;
+    borderPrimaryPressedOnDark: string;
     borderPrimaryPressedInverse: string;
     borderPrimaryDisabled: string;
+    borderPrimaryDisabledOnDark: string;
     borderPrimaryDisabledInverse: string;
     ornamentDisabled: string;
+    ornamentDisabledOnDark: string;
     ornamentDisabledInverse: string;
     ornamentOnFill: string;
     ornamentPrimary: string;
+    ornamentPrimaryOnDark: string;
     ornamentPrimaryInverse: string;
     ornamentSecondary: string;
+    ornamentSecondaryOnDark: string;
     ornamentSecondaryInverse: string;
     ornamentSecondaryHover: string;
+    ornamentSecondaryHoverOnDark: string;
     ornamentSecondaryHoverInverse: string;
     ornamentSecondaryPressed: string;
+    ornamentSecondaryPressedOnDark: string;
     ornamentSecondaryPressedInverse: string;
 }
 interface IntentColor {
@@ -374,6 +394,7 @@ interface Color {
 interface Colors {
     blue: Color;
     gray: Color;
+    indigo: Color;
     green: Color;
     purple: Color;
     red: Color;
@@ -688,7 +709,7 @@ declare const Alert: (props: AlertProps) => JSX.Element;
 interface IconNameToSizes {
     Bacteria: "xs" | "s" | "l" | "xl";
     BarChartHorizontal3: "xs" | "s";
-    BarChartVertical3: "xs" | "s";
+    BarChartVertical3: "xs" | "s" | "l" | "xl";
     BarChartVertical4: "xs" | "s";
     Book: "xs" | "s" | "l" | "xl";
     Check: "xs" | "s";
@@ -702,6 +723,7 @@ interface IconNameToSizes {
     ChevronUp: "xs" | "s" | "l" | "xl";
     ChevronUp2: "xs" | "s";
     CirclesOverlap2: "xs" | "s" | "l" | "xl";
+    Cli: "l" | "xl";
     Code: "xs" | "s" | "l" | "xl";
     Compass: "l" | "xl";
     Copy: "xs" | "s" | "l" | "xl";
@@ -747,6 +769,7 @@ interface IconNameToSizes {
     LockCircle: "xs" | "s";
     Minus: "xs" | "s";
     Open: "xs" | "s";
+    Package: "l" | "xl";
     Pause: "l" | "xl";
     People: "xs" | "s" | "l" | "xl";
     Percentage: "xs" | "s";
@@ -809,7 +832,7 @@ interface IconExtraProps<IconName extends keyof IconNameToSizes> extends CommonT
     sdsIcon: IconName;
     sdsSize: IconNameToSizes[IconName];
 }
-type SdsIconColorType = "blue" | "gray" | "green" | "purple" | "red" | "yellow";
+type SdsIconColorType = "blue" | "gray" | "green" | "purple" | "indigo" | "red" | "yellow";
 interface SdsIconWithColor$0 {
     color?: SdsIconColorType;
     shade?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800;
@@ -1774,7 +1797,7 @@ interface FooterImage {
     linkProps?: Record<string, unknown>;
 }
 interface NavigationFooterProps {
-    hasInvertedStyle?: boolean;
+    backgroundAppearance?: "matchBackground" | "dark";
     images?: FooterImage[];
     logo?: ReactNode;
     logoUrl?: string;
@@ -1796,7 +1819,7 @@ interface FooterLinkProps {
     showDivider: boolean;
     hasInvertedStyle?: boolean;
 }
-declare function NavigationFooter({ hasInvertedStyle, images, logo, logoUrl, logoComponent, logoLinkProps, navItems, navLinks, tag, tagColor, title, ...rest }: NavigationFooterProps): import("react/jsx-runtime").JSX.Element;
+declare function NavigationFooter({ backgroundAppearance, images, logo, logoUrl, logoComponent, logoLinkProps, navItems, navLinks, tag, tagColor, title, ...rest }: NavigationFooterProps): import("react/jsx-runtime").JSX.Element;
 interface BaseNavigationHeaderPrimaryNavItem<T extends string> extends Record<string, unknown> {
     key: T;
     label: ReactNode;
@@ -1809,6 +1832,8 @@ interface TextNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavig
 }
 interface DropdownItem {
     label: ReactNode;
+    details?: string;
+    icon?: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
     section?: string;
     onClick?: (event: React.MouseEvent) => void;
     component?: React.ElementType;
@@ -1816,9 +1841,26 @@ interface DropdownItem {
     rel?: string;
     target?: string;
 }
+interface ActionItem {
+    label: ReactNode;
+    onClick?: (event: React.MouseEvent) => void;
+    href?: string;
+    component?: React.ElementType;
+    target?: string;
+    rel?: string;
+}
+interface SectionProps {
+    actions?: ActionItem[];
+    colSpan?: number;
+}
 interface DropdownNavigationHeaderPrimaryNavItem<T extends string> extends BaseNavigationHeaderPrimaryNavItem<T> {
     itemType: "dropdown";
     items: DropdownItem[];
+    sectionProps?: Record<string, SectionProps>;
+    defaultUrl?: string;
+    component?: React.ElementType;
+    target?: string;
+    rel?: string;
 }
 type NavigationHeaderPrimaryNavItem<T extends string> = TextNavigationHeaderPrimaryNavItem<T> | DropdownNavigationHeaderPrimaryNavItem<T>;
 interface NavigationHeaderPrimaryNavProps<T extends string> {
@@ -1828,15 +1870,32 @@ interface NavigationHeaderPrimaryNavProps<T extends string> {
     items: NavigationHeaderPrimaryNavItem<T>[];
     onChange(value: T): void;
     value: T;
+    sdsStyle?: "dropdown" | "drawer";
+    expandedAccordion: string | null;
+    setExpandedAccordion: (value: string | null) => void;
+    accordionRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
+    scrollToAccordion?: (accordionId: string) => void;
+    onDrawerStateChange?: (isOpen: boolean) => void;
+    topOffset?: number;
+    onClose?: () => void;
 }
 interface TextHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
     label: string;
     itemType: "text";
+    tag?: string;
+    tagColor?: SdsTagColorType;
 }
 interface DropdownHeaderSecondaryNavItem extends Partial<SdsMinimalButtonProps> {
     label: string;
     itemType: "dropdown";
     items: DropdownItem[];
+    sectionProps?: Record<string, SectionProps>;
+    tag?: string;
+    tagColor?: SdsTagColorType;
+    defaultUrl?: string;
+    component?: React.ElementType;
+    target?: string;
+    rel?: string;
 }
 type NavigationHeaderSecondaryNavItem = TextHeaderSecondaryNavItem | DropdownHeaderSecondaryNavItem;
 interface NavigationHeaderSecondaryNavProps {
@@ -1844,11 +1903,19 @@ interface NavigationHeaderSecondaryNavProps {
     items: NavigationHeaderSecondaryNavItem[];
     hasInvertedStyle?: boolean;
     isNarrow?: boolean;
+    sdsStyle?: "dropdown" | "drawer";
+    expandedAccordion: string | null;
+    setExpandedAccordion: (value: string | null) => void;
+    accordionRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
+    scrollToAccordion?: (accordionId: string) => void;
+    onDrawerStateChange?: (isOpen: boolean) => void;
+    topOffset?: number;
+    onClose?: () => void;
 }
-interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
+interface NavigationHeaderProps<T extends string = string> extends Omit<AppBarProps, "position"> {
     activePrimaryNavKey?: string;
     buttons?: Partial<SdsProps$0 & ButtonProps$0>[] | React.ReactNode[];
-    hasInvertedStyle?: boolean;
+    backgroundAppearance?: "matchBackground" | "dark";
     logo?: ReactNode;
     logoUrl?: string;
     logoLinkComponent?: ElementType;
@@ -1866,6 +1933,9 @@ interface NavigationHeaderProps<T extends string = string> extends AppBarProps {
     drawerOpen?: boolean;
     setDrawerOpen?: (open: boolean) => void;
     menuProps?: Partial<MenuProps$0>;
+    sdsStyle?: "dropdown" | "drawer";
+    isSticky?: boolean;
+    topComponentSlot?: ReactNode;
 }
 type IconButtonProps = SdsIconButtonProps & {
     children?: string;