@czi-sds/components 21.6.3 → 21.7.0

package/dist/index.cjs.d.ts

@@ -33,7 +33,7 @@ import { TabsProps as RawTabsProps } from "@mui/material";
 import { ChipProps as ChipProps$0 } from "@mui/material";
 import React from "react";
 import { CSSProperties, ReactElement, ReactNode, SyntheticEvent, ComponentType } from "react";
-import { Theme, ThemeOptions, TypographyStyle, PaletteOptions } from "@mui/material/styles";
+import { Theme, ThemeOptions, TypographyStyle, Breakpoints, PaletteOptions } from "@mui/material/styles";
 import { SerializedStyles } from "@emotion/react";
 import { AlertProps } from "@mui/lab";
 import { AutocompleteChangeDetails, AutocompleteChangeReason, AutocompleteCloseReason, AutocompleteValue } from "@mui/base";
@@ -136,6 +136,19 @@ declare module "@mui/material/styles" {
     interface PaletteOptions {
         sds?: SDSPalette;
     }
+    /**
+     * @see https://mui.com/material-ui/customization/breakpoints/#custom-breakpoints
+     * (masoudmanson): ModuleAugmentation is required for TypeScript to recognize the
+     * custom breakpoints added to the theme.
+     */
+    interface BreakpointOverrides {
+        // remove the xs and xl breakpoints since SDS does not support them
+        xs: false;
+        sm: true;
+        md: true;
+        lg: true;
+        xl: false;
+    }
 }
 interface SDSTheme extends Theme {
     app?: AppTheme;
@@ -159,6 +172,67 @@ interface Shadows {
     m: string;
     l: string;
 }
+interface TypographyStyles {
+    body: {
+        regular: {
+            button: TypographyStyle;
+            l: TypographyStyle;
+            m: TypographyStyle;
+            s: TypographyStyle;
+            xs: TypographyStyle;
+            xxs: TypographyStyle;
+            xxxs: TypographyStyle;
+        };
+        semibold: {
+            button: TypographyStyle;
+            l: TypographyStyle;
+            m: TypographyStyle;
+            s: TypographyStyle;
+            xs: TypographyStyle;
+            xxs: TypographyStyle;
+            xxxs: TypographyStyle;
+        };
+    };
+    caps: {
+        semibold: {
+            xxs: TypographyStyle;
+            xxxs: TypographyStyle;
+            xxxxs: TypographyStyle;
+        };
+    };
+    code: {
+        regular: {
+            s: TypographyStyle;
+            xs: TypographyStyle;
+        };
+        semibold: {
+            s: TypographyStyle;
+            xs: TypographyStyle;
+        };
+    };
+    header: {
+        semibold: {
+            xxl: TypographyStyle;
+            xl: TypographyStyle;
+            l: TypographyStyle;
+            m: TypographyStyle;
+            s: TypographyStyle;
+            xs: TypographyStyle;
+            xxs: TypographyStyle;
+            xxxs: TypographyStyle;
+        };
+    };
+    tabular: {
+        regular: {
+            s: TypographyStyle;
+            xs: TypographyStyle;
+        };
+        semibold: {
+            s: TypographyStyle;
+            xs: TypographyStyle;
+        };
+    };
+}
 interface Typography {
     fontFamily: {
         body: CSSProperties["fontFamily"];
@@ -167,67 +241,8 @@ interface Typography {
         header?: CSSProperties["fontFamily"];
         tabular?: CSSProperties["fontFamily"];
     };
-    styles: {
-        body: {
-            regular: {
-                button: TypographyStyle;
-                l: TypographyStyle;
-                m: TypographyStyle;
-                s: TypographyStyle;
-                xs: TypographyStyle;
-                xxs: TypographyStyle;
-                xxxs: TypographyStyle;
-            };
-            semibold: {
-                button: TypographyStyle;
-                l: TypographyStyle;
-                m: TypographyStyle;
-                s: TypographyStyle;
-                xs: TypographyStyle;
-                xxs: TypographyStyle;
-                xxxs: TypographyStyle;
-            };
-        };
-        caps: {
-            semibold: {
-                xxs: TypographyStyle;
-                xxxs: TypographyStyle;
-                xxxxs: TypographyStyle;
-            };
-        };
-        code: {
-            regular: {
-                s: TypographyStyle;
-                xs: TypographyStyle;
-            };
-            semibold: {
-                s: TypographyStyle;
-                xs: TypographyStyle;
-            };
-        };
-        header: {
-            semibold: {
-                xxl: TypographyStyle;
-                xl: TypographyStyle;
-                l: TypographyStyle;
-                m: TypographyStyle;
-                s: TypographyStyle;
-                xs: TypographyStyle;
-                xxs: TypographyStyle;
-                xxxs: TypographyStyle;
-            };
-        };
-        tabular: {
-            regular: {
-                s: TypographyStyle;
-                xs: TypographyStyle;
-            };
-            semibold: {
-                s: TypographyStyle;
-                xs: TypographyStyle;
-            };
-        };
-    };
+    wideStyles: TypographyStyles;
+    narrowStyles: TypographyStyles;
 }
 interface FontWeights {
     bold: number;
@@ -379,10 +394,11 @@ declare const getCorners: ({ theme }: CommonThemeProps) => Corners | null;
 declare const getFontWeights: ({ theme }: CommonThemeProps) => FontWeights | null;
 declare const getIconSizes: ({ theme }: CommonThemeProps) => IconSizes | null;
 declare const getBorders: ({ theme }: CommonThemeProps) => Borders | null;
+declare const getBreakpoints: ({ theme }: CommonThemeProps) => Breakpoints | null;
 declare function focusVisibleA11yStyle(props: CommonThemeProps): string;
-type FontBodyWeight = keyof Typography["styles"]["body"];
-type FontBodySize<T extends FontBodyWeight> = keyof Typography["styles"]["body"][T];
-declare const fontBody: (fontSize: FontBodySize<FontBodyWeight>, fontWeight?: FontBodyWeight) => (props: CommonThemeProps) => SerializedStyles | null;
+type FontBodyWeight = keyof Typography["wideStyles"]["body"];
+type FontBodySize<T extends FontBodyWeight> = keyof Typography["wideStyles"]["body"][T];
+declare const fontBody: (fontSize: FontBodySize<FontBodyWeight>, fontWeight?: FontBodyWeight, isNarrow?: boolean) => (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontBodyL: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontBodyM: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontBodyS: (props: CommonThemeProps) => SerializedStyles | null;
@@ -396,14 +412,14 @@ declare const fontBodySemiboldXs: (props: CommonThemeProps) => SerializedStyles
 declare const fontBodySemiboldXxs: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontBodySemiboldXxxs: (props: CommonThemeProps) => SerializedStyles | null;
 // Font Caps
-type FontCapsSize = keyof Typography["styles"]["caps"]["semibold"];
-declare const fontCaps: (fontSize: FontCapsSize) => (props: CommonThemeProps) => SerializedStyles | null;
+type FontCapsSize = keyof Typography["wideStyles"]["caps"]["semibold"];
+declare const fontCaps: (fontSize: FontCapsSize, isNarrow?: boolean) => (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontCapsXxs: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontCapsXxxs: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontCapsXxxxs: (props: CommonThemeProps) => SerializedStyles | null;
 // Font Header
-type FontHeaderSize = keyof Typography["styles"]["header"]["semibold"];
-declare const fontHeader: (fontSize: FontHeaderSize) => (props: CommonThemeProps) => SerializedStyles | null;
+type FontHeaderSize = keyof Typography["wideStyles"]["header"]["semibold"];
+declare const fontHeader: (fontSize: FontHeaderSize, isNarrow?: boolean) => (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontHeaderXxl: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontHeaderXl: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontHeaderL: (props: CommonThemeProps) => SerializedStyles | null;
@@ -413,17 +429,17 @@ declare const fontHeaderXs: (props: CommonThemeProps) => SerializedStyles | null
 declare const fontHeaderXxs: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontHeaderXxxs: (props: CommonThemeProps) => SerializedStyles | null;
 // Font Code
-type FontCodeWeight = keyof Typography["styles"]["code"];
-type FontCodeSize<T extends FontCodeWeight> = keyof Typography["styles"]["code"][T];
-declare const fontCode: (fontSize: FontCodeSize<FontCodeWeight>, fontWeight?: FontCodeWeight) => (props: CommonThemeProps) => SerializedStyles | null;
+type FontCodeWeight = keyof Typography["wideStyles"]["code"];
+type FontCodeSize<T extends FontCodeWeight> = keyof Typography["wideStyles"]["code"][T];
+declare const fontCode: (fontSize: FontCodeSize<FontCodeWeight>, fontWeight?: FontCodeWeight, isNarrow?: boolean) => (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontCodeXs: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontCodeS: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontCodeSemiboldXs: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontCodeSemiboldS: (props: CommonThemeProps) => SerializedStyles | null;
 // Font Tabular
-type FontTabularWeight = keyof Typography["styles"]["tabular"];
-type FontTabularSize<T extends FontTabularWeight> = keyof Typography["styles"]["tabular"][T];
-declare const fontTabular: (fontSize: FontTabularSize<FontTabularWeight>, fontWeight?: FontTabularWeight) => (props: CommonThemeProps) => SerializedStyles | null;
+type FontTabularWeight = keyof Typography["wideStyles"]["tabular"];
+type FontTabularSize<T extends FontTabularWeight> = keyof Typography["wideStyles"]["tabular"][T];
+declare const fontTabular: (fontSize: FontTabularSize<FontTabularWeight>, fontWeight?: FontTabularWeight, isNarrow?: boolean) => (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontTabularXs: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontTabularS: (props: CommonThemeProps) => SerializedStyles | null;
 declare const fontTabularSemiboldXs: (props: CommonThemeProps) => SerializedStyles | null;
@@ -670,6 +686,7 @@ interface ExtraAutocompleteProps<T, Multiple, DisableClearable, FreeSolo> extend
     onChange?: (event: React.SyntheticEvent, value: AutocompleteValue$0<T, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason$0, details?: AutocompleteChangeDetails$0<T>) => void;
     InputBaseProps?: Partial<InputSearchProps>;
     label?: string;
+    intent?: InputSearchProps["intent"];
     onClickAway?: (event?: MouseEvent | TouchEvent, reason?: AutocompleteCloseReason$0) => void;
     onClick?: (event?: TouchEvent | MouseEvent) => void;
 }
@@ -1489,5 +1506,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
  * @see https://mui.com/material-ui/react-table/
  */
 declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
-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, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, 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, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, BasicPanelProps, OverlayPanelProps, PanelProps, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, 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, Typography, FontWeights, Corners, Spaces, Spacings, Color, Colors, IconSize, IconSizes, Border, Borders, Theme$0 as Theme, defaultTheme, makeSdsSemanticAppTheme, SDSLightAppTheme, SDSDarkAppTheme, SDSChooseTheme, defaultAppTheme, 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 };
+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, ButtonProps, Button, ButtonDropdownProps, ButtonDropdown, ButtonIconInternalProps, ButtonIconProps, ButtonIcon, ButtonToggleProps, ButtonToggle, CalloutIntentType, 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, NavigationJumpToProps, NavigationJumpTo, NotificationIntentType, NotificationProps, ExposedNotificationProps, Notification, PaginationInternalProps, PaginationProps, Pagination, BasicPanelProps, OverlayPanelProps, PanelProps, PANEL_BASIC_MIN_WIDTH_PX, PANEL_OVERLAY_MIN_WIDTH_PX, 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, 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 };
 export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };