@czi-sds/components 21.5.0 → 21.6.1

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,9 +12,9 @@ import { MenuItemProps as RawMenuItemProps } from "@mui/material";
12
12
  import { ClickAwayListenerProps as MUIClickAwayListenerProps } from "@mui/material";
13
13
  import { ButtonProps as RawButtonProps } from "@mui/material";
14
14
  import { IconButtonProps as RawButtonIconProps } from "@mui/material";
15
+ import { ButtonProps as ButtonProps$0 } from "@mui/material";
15
16
  import { TooltipProps as RawTooltipProps } from "@mui/material";
16
17
  import { ChipProps as RawChipProps } from "@mui/material";
17
- import { ButtonProps as ButtonProps$0 } from "@mui/material";
18
18
  import { DialogProps as RawDialogProps } from "@mui/material";
19
19
  import { DialogActionsProps as RawDialogActionsProps } from "@mui/material";
20
20
  import { DialogContentProps as RawDialogContentProps } from "@mui/material";
@@ -333,6 +333,10 @@ declare const Theme$0: (t: PaletteMode) => import("@mui/material").Theme;
333
333
  * Use the `theme` export to get a flexible light/dark mode theme function
334
334
  */
335
335
  declare const defaultTheme: import("@mui/material").Theme;
336
+ /**
337
+ * Create a SDS App Theme with custom colors that follows the SDS color model.
338
+ */
339
+ declare const makeSdsSemanticAppTheme: (colors: Colors) => AppTheme;
336
340
  declare const SDSLightAppTheme: AppTheme;
337
341
  declare const SDSDarkAppTheme: AppTheme;
338
342
  /**
@@ -589,7 +593,7 @@ type InputSearchProps = RawTextFieldSearchProps & AccessibleInputSearchProps & I
589
593
  /**
590
594
  * @see https://mui.com/material-ui/react-text-field/
591
595
  */
592
- declare const InputSearch: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
596
+ declare const InputSearch: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & AccessibleInputSearchProps & InputSearchExtraProps, "ref">) & React.RefAttributes<HTMLDivElement>>;
593
597
  /*
594
598
  The final goal is to create a typescript interface which only accepts the
595
599
  icons with "xs" or "s" size. At first we create a new TypeScript interface
@@ -678,16 +682,7 @@ interface StyleProps$0 extends CommonThemeProps {
678
682
  title?: string;
679
683
  width?: number;
680
684
  }
681
- declare const StyledPopper: import("@emotion/styled").StyledComponent<Omit<import("@mui/base").PopperProps, "direction"> & {
682
- component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
683
- components?: {
684
- Root?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
685
- } | undefined;
686
- componentsProps?: {
687
- root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
688
- } | undefined;
689
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
690
- } & import("react").RefAttributes<HTMLDivElement> & {
685
+ declare const StyledPopper: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
691
686
  theme?: import("@emotion/react").Theme | undefined;
692
687
  } & StyleProps$0, {}, {}>;
693
688
  declare const StyledPaper$0: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -847,6 +842,17 @@ type ButtonIconProps = ButtonIconExtraProps & RawButtonIconProps & ButtonIconInt
847
842
  * Please use `Button` or `ButtonDropdown` with `sdsStyle: icon` instead.
848
843
  */
849
844
  declare const ButtonIcon: import("react").ForwardRefExoticComponent<Omit<ButtonIconProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | null>>;
845
+ interface ButtonToggleProps extends ButtonProps$0 {
846
+ disabled?: boolean;
847
+ icon: keyof IconNameToSizes | React.ReactElement<CustomSVGProps>;
848
+ sdsSize?: "small" | "medium" | "large";
849
+ sdsStage?: "on" | "off";
850
+ sdsType?: "primary" | "secondary";
851
+ }
852
+ /**
853
+ * @see https://mui.com/material-ui/react-button/
854
+ */
855
+ declare const ButtonToggle: React.ForwardRefExoticComponent<Omit<ButtonToggleProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
850
856
  declare const SDS_STAGE_OPEN = "open";
851
857
  declare const SDS_STAGE_CLOSED = "closed";
852
858
  type CalloutIntentType = "info" | "negative" | "notice" | "positive";
@@ -966,16 +972,7 @@ interface StyleProps$1 extends CommonThemeProps {
966
972
  title?: string;
967
973
  isMultiColumn?: boolean;
968
974
  }
969
- declare const StyledPopper$1: import("@emotion/styled").StyledComponent<Omit<import("@mui/base").PopperProps, "direction"> & {
970
- component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
971
- components?: {
972
- Root?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
973
- } | undefined;
974
- componentsProps?: {
975
- root?: import("@mui/base").SlotComponentProps<"div", import("@mui/base").PopperRootSlotPropsOverrides, import("@mui/base").PopperOwnProps> | undefined;
976
- } | undefined;
977
- sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
978
- } & import("react").RefAttributes<HTMLDivElement> & {
975
+ declare const StyledPopper$1: import("@emotion/styled").StyledComponent<import("@mui/material").PopperProps & import("react").RefAttributes<HTMLDivElement> & {
979
976
  theme?: import("@emotion/react").Theme | undefined;
980
977
  } & CommonThemeProps, {}, {}>;
981
978
  declare const StyledPaper$1: import("@emotion/styled").StyledComponent<import("@mui/material").PaperOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -1196,7 +1193,7 @@ type InputTextProps = RawTextFieldProps & InputTextExtraProps & AccessibleInputT
1196
1193
  /**
1197
1194
  * @see https://mui.com/material-ui/react-text-field/
1198
1195
  */
1199
- declare const InputText: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & InputTextExtraProps & AccessibleInputTextProps, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & InputTextExtraProps & AccessibleInputTextProps, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & InputTextExtraProps & AccessibleInputTextProps, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
1196
+ declare const InputText: import("react").ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & InputTextExtraProps & AccessibleInputTextProps, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & InputTextExtraProps & AccessibleInputTextProps, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & InputTextExtraProps & AccessibleInputTextProps, "ref">) & import("react").RefAttributes<HTMLInputElement>>;
1200
1197
  interface InputToggleExtraProps extends SwitchProps, CommonThemeProps {
1201
1198
  offLabel?: string;
1202
1199
  onChange?(e: React.ChangeEvent): void;
@@ -1342,12 +1339,12 @@ interface PanelHeaderCloseProps {
1342
1339
  CloseButtonComponent?: React.ReactNode;
1343
1340
  }
1344
1341
  interface BasicPanelProps extends Omit<DrawerProps, "variant"> {
1345
- sdsType?: "basic"; // Discriminator
1342
+ sdsType: "basic"; // Discriminator
1346
1343
  position?: "left" | "right";
1347
1344
  width?: number | string;
1348
1345
  }
1349
1346
  interface OverlayPanelProps extends Omit<DrawerProps, "variant"> {
1350
- sdsType?: "overlay"; // Discriminator
1347
+ sdsType: "overlay"; // Discriminator
1351
1348
  position?: "left" | "right" | "bottom";
1352
1349
  width?: number | string;
1353
1350
  HeaderComponent?: React.ReactNode;
@@ -1492,5 +1489,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
1492
1489
  * @see https://mui.com/material-ui/react-table/
1493
1490
  */
1494
1491
  declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
1495
- 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, 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, 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 };
1492
+ 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 };
1496
1493
  export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };