@czi-sds/components 22.2.0 → 22.2.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.
- package/dist/index.cjs.d.ts +14 -12
- package/dist/index.cjs.js +84 -55
- package/dist/index.esm.d.ts +14 -12
- package/dist/index.esm.js +85 -56
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.d.ts
CHANGED
|
@@ -719,7 +719,7 @@ declare const StyledPopper: import("@emotion/styled").StyledComponent<import("@m
|
|
|
719
719
|
} & StyleProps$0, {}, {}>;
|
|
720
720
|
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"> & {
|
|
721
721
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
722
|
-
}, "className" | "style" | "classes" | "children" | "sx" | "
|
|
722
|
+
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
|
|
723
723
|
theme?: import("@emotion/react").Theme | undefined;
|
|
724
724
|
} & StyleProps$0, {}, {}>;
|
|
725
725
|
interface ExtraAutocompleteMultiColumnProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> extends StyleProps$0 {
|
|
@@ -777,7 +777,6 @@ type ButtonTypeMap = {
|
|
|
777
777
|
};
|
|
778
778
|
type ButtonSize = "small" | "medium" | "large";
|
|
779
779
|
interface BaseButtonProps {
|
|
780
|
-
customTheme?: "light" | "dark" | "auto";
|
|
781
780
|
children?: React.ReactNode;
|
|
782
781
|
isAllCaps?: boolean;
|
|
783
782
|
}
|
|
@@ -806,15 +805,15 @@ type ButtonProps = RawButtonProps & SdsProps;
|
|
|
806
805
|
*/
|
|
807
806
|
declare const Button: React.ForwardRefExoticComponent<(Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
808
807
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
809
|
-
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "
|
|
808
|
+
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
|
|
810
809
|
component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
811
810
|
} & SdsIconButtonProps, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
812
811
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
813
|
-
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "
|
|
812
|
+
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
|
|
814
813
|
component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
815
814
|
} & SdsMinimalButtonProps, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
816
815
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
817
|
-
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "
|
|
816
|
+
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
|
|
818
817
|
component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
819
818
|
} & SdsButtonProps, "ref">) & React.RefAttributes<HTMLButtonElement>>;
|
|
820
819
|
interface BannerExtraProps extends CommonThemeProps {
|
|
@@ -849,7 +848,7 @@ type ButtonDropdownProps = ButtonProps & SdsProps$0;
|
|
|
849
848
|
*/
|
|
850
849
|
declare const ButtonDropdown: React.ForwardRefExoticComponent<(Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
851
850
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
852
|
-
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "
|
|
851
|
+
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
|
|
853
852
|
component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
854
853
|
} & SdsIconButtonProps & {
|
|
855
854
|
sdsStyle: "icon";
|
|
@@ -859,7 +858,7 @@ declare const ButtonDropdown: React.ForwardRefExoticComponent<(Omit<import("@mui
|
|
|
859
858
|
sdsSize?: SDSButtonDropdownSizes | undefined;
|
|
860
859
|
}, "ref"> | Omit<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
|
|
861
860
|
ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
|
|
862
|
-
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "
|
|
861
|
+
}, "className" | "style" | "classes" | "action" | "centerRipple" | "children" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & {
|
|
863
862
|
component?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
|
|
864
863
|
} & SdsButtonProps & {
|
|
865
864
|
sdsStyle: "rounded" | "square";
|
|
@@ -1038,7 +1037,7 @@ declare const StyledPopper$1: import("@emotion/styled").StyledComponent<import("
|
|
|
1038
1037
|
} & CommonThemeProps, {}, {}>;
|
|
1039
1038
|
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"> & {
|
|
1040
1039
|
ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
|
|
1041
|
-
}, "className" | "style" | "classes" | "children" | "sx" | "
|
|
1040
|
+
}, "className" | "style" | "classes" | "children" | "sx" | "variant" | "elevation" | "square"> & {
|
|
1042
1041
|
theme?: import("@emotion/react").Theme | undefined;
|
|
1043
1042
|
} & StyleProps$1, {}, {}>;
|
|
1044
1043
|
/**
|
|
@@ -1153,17 +1152,17 @@ declare const _default: import("react").ForwardRefExoticComponent<Omit<RawDialog
|
|
|
1153
1152
|
type DialogTitleExtraProps = CommonThemeProps;
|
|
1154
1153
|
declare const Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
1155
1154
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
1156
|
-
}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "
|
|
1155
|
+
}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
1157
1156
|
theme?: import("@emotion/react").Theme | undefined;
|
|
1158
1157
|
} & DialogTitleExtraProps, {}, {}>;
|
|
1159
1158
|
declare const Subtitle$0: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
1160
1159
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
1161
|
-
}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "
|
|
1160
|
+
}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
1162
1161
|
theme?: import("@emotion/react").Theme | undefined;
|
|
1163
1162
|
} & DialogTitleExtraProps, {}, {}>;
|
|
1164
1163
|
declare const Overline: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
1165
1164
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
1166
|
-
}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "
|
|
1165
|
+
}, "zIndex" | "typography" | "fontFamily" | "fontSize" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "className" | "style" | "classes" | "children" | "sx" | "border" | "boxShadow" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "displayPrint" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
|
|
1167
1166
|
theme?: import("@emotion/react").Theme | undefined;
|
|
1168
1167
|
} & DialogTitleExtraProps, {}, {}>;
|
|
1169
1168
|
interface DialogTitleProps extends DialogTitleExtraProps, RawDialogTitleProps {
|
|
@@ -1421,6 +1420,9 @@ interface NavigationHeaderProps<T extends string = string> {
|
|
|
1421
1420
|
tagColor?: SdsTagColorType;
|
|
1422
1421
|
title: string;
|
|
1423
1422
|
}
|
|
1423
|
+
type IconButtonProps = SdsIconButtonProps & {
|
|
1424
|
+
children?: string;
|
|
1425
|
+
};
|
|
1424
1426
|
declare const NavigationHeader: import("react").ForwardRefExoticComponent<NavigationHeaderProps<string> & import("react").RefAttributes<HTMLDivElement>>;
|
|
1425
1427
|
interface NavigationJumpToExtraProps extends Omit<TabsProps, "onChange">, CommonThemeProps {
|
|
1426
1428
|
}
|
|
@@ -1585,5 +1587,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
|
|
|
1585
1587
|
* @see https://mui.com/material-ui/react-table/
|
|
1586
1588
|
*/
|
|
1587
1589
|
declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
|
|
1588
|
-
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, 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, NavigationHeaderProps, 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 };
|
|
1590
|
+
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, 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, 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 };
|
|
1589
1591
|
export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
|
package/dist/index.cjs.js
CHANGED
|
@@ -250,7 +250,7 @@ var sharedAppTheme = {
|
|
|
250
250
|
fontWeights: {
|
|
251
251
|
bold: 700,
|
|
252
252
|
light: 300,
|
|
253
|
-
medium:
|
|
253
|
+
medium: 500,
|
|
254
254
|
regular: 400,
|
|
255
255
|
semibold: 600,
|
|
256
256
|
},
|
|
@@ -1247,23 +1247,37 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1247
1247
|
},
|
|
1248
1248
|
},
|
|
1249
1249
|
components: {
|
|
1250
|
+
MuiButton: {
|
|
1251
|
+
defaultProps: {
|
|
1252
|
+
disableFocusRipple: true,
|
|
1253
|
+
disableRipple: true,
|
|
1254
|
+
disableTouchRipple: true,
|
|
1255
|
+
},
|
|
1256
|
+
},
|
|
1250
1257
|
MuiButtonBase: {
|
|
1251
1258
|
defaultProps: {
|
|
1252
1259
|
disableRipple: true,
|
|
1260
|
+
disableTouchRipple: true,
|
|
1261
|
+
},
|
|
1262
|
+
},
|
|
1263
|
+
MuiButtonGroup: {
|
|
1264
|
+
defaultProps: {
|
|
1265
|
+
disableFocusRipple: true,
|
|
1266
|
+
disableRipple: true,
|
|
1253
1267
|
},
|
|
1254
|
-
// styleOverrides: {
|
|
1255
|
-
// root: {
|
|
1256
|
-
// "&:hover": {
|
|
1257
|
-
// boxShadow: "none",
|
|
1258
|
-
// },
|
|
1259
|
-
// },
|
|
1260
|
-
// },
|
|
1261
1268
|
},
|
|
1262
1269
|
MuiDrawer: {
|
|
1263
1270
|
defaultProps: {
|
|
1264
1271
|
hideBackdrop: true,
|
|
1265
1272
|
},
|
|
1266
1273
|
},
|
|
1274
|
+
MuiIconButton: {
|
|
1275
|
+
defaultProps: {
|
|
1276
|
+
disableFocusRipple: true,
|
|
1277
|
+
disableRipple: true,
|
|
1278
|
+
disableTouchRipple: true,
|
|
1279
|
+
},
|
|
1280
|
+
},
|
|
1267
1281
|
MuiLink: {
|
|
1268
1282
|
defaultProps: {
|
|
1269
1283
|
underline: "hover",
|
|
@@ -1271,7 +1285,16 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1271
1285
|
},
|
|
1272
1286
|
MuiTab: {
|
|
1273
1287
|
defaultProps: {
|
|
1288
|
+
disableFocusRipple: true,
|
|
1289
|
+
disableRipple: true,
|
|
1290
|
+
disableTouchRipple: true,
|
|
1291
|
+
},
|
|
1292
|
+
},
|
|
1293
|
+
MuiToggleButton: {
|
|
1294
|
+
defaultProps: {
|
|
1295
|
+
disableFocusRipple: true,
|
|
1274
1296
|
disableRipple: true,
|
|
1297
|
+
disableTouchRipple: true,
|
|
1275
1298
|
},
|
|
1276
1299
|
},
|
|
1277
1300
|
},
|
|
@@ -4802,11 +4825,7 @@ var MUI_VARIANT_MAP = {
|
|
|
4802
4825
|
* @see https://mui.com/material-ui/react-button/
|
|
4803
4826
|
*/
|
|
4804
4827
|
var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
4805
|
-
var _a;
|
|
4806
|
-
var _b = props.sdsStyle, sdsStyle = _b === void 0 ? "square" : _b, sdsType = props.sdsType, _c = props.customTheme, customTheme = _c === void 0 ? "auto" : _c;
|
|
4807
|
-
var muiTheme = material.useTheme();
|
|
4808
|
-
var mode = ((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
4809
|
-
var componentTheme = customTheme !== "auto" ? customTheme : mode;
|
|
4828
|
+
var _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, sdsType = props.sdsType;
|
|
4810
4829
|
if (!sdsStyle || !sdsType) {
|
|
4811
4830
|
showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
|
|
4812
4831
|
}
|
|
@@ -4834,7 +4853,7 @@ var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4834
4853
|
"sdsType",
|
|
4835
4854
|
];
|
|
4836
4855
|
var finalProps = filterProps(propsWithDefault, excludedProps);
|
|
4837
|
-
return (jsxRuntime.jsx(
|
|
4856
|
+
return (jsxRuntime.jsx(ButtonIcon, __assign({ icon: iconProps === null || iconProps === void 0 ? void 0 : iconProps.icon }, finalProps, { sdsType: sdsType, ref: ref })));
|
|
4838
4857
|
}
|
|
4839
4858
|
else {
|
|
4840
4859
|
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
@@ -4842,12 +4861,12 @@ var Button = React__namespace.default.forwardRef(function (props, ref) {
|
|
|
4842
4861
|
}
|
|
4843
4862
|
}
|
|
4844
4863
|
case sdsStyle === "minimal":
|
|
4845
|
-
return (jsxRuntime.jsx(
|
|
4864
|
+
return (jsxRuntime.jsx(StyledMinimalButton, __assign({ color: "primary", variant: "text" }, propsWithDefault, { ref: ref, "data-style": sdsStyle })));
|
|
4846
4865
|
case sdsStyle === "rounded":
|
|
4847
4866
|
case sdsStyle === "square":
|
|
4848
|
-
return (jsxRuntime.jsx(
|
|
4867
|
+
return (jsxRuntime.jsx(StyledButton$3, __assign({ color: "primary", variant: sdsType ? MUI_VARIANT_MAP[sdsType] : "text" }, propsWithDefault, { ref: ref })));
|
|
4849
4868
|
default:
|
|
4850
|
-
return
|
|
4869
|
+
return jsxRuntime.jsx(StyledButtonLegacy, __assign({}, propsWithDefault, { ref: ref }));
|
|
4851
4870
|
}
|
|
4852
4871
|
});
|
|
4853
4872
|
|
|
@@ -5058,11 +5077,7 @@ var useDetectUserTabbing = function (ref) {
|
|
|
5058
5077
|
* @see https://mui.com/material-ui/react-text-field/
|
|
5059
5078
|
*/
|
|
5060
5079
|
var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
5061
|
-
var _a;
|
|
5062
|
-
var label = props.label, id = props.id, placeholder = props.placeholder, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "square" : _b, _c = props.intent, intent = _c === void 0 ? "default" : _c, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, _d = props.customTheme, customTheme = _d === void 0 ? "auto" : _d, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled", "customTheme"]);
|
|
5063
|
-
var muiTheme = material.useTheme();
|
|
5064
|
-
var mode = ((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
5065
|
-
var componentTheme = customTheme !== "auto" ? customTheme : mode;
|
|
5080
|
+
var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled"]);
|
|
5066
5081
|
/**
|
|
5067
5082
|
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
5068
5083
|
*/
|
|
@@ -5076,7 +5091,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5076
5091
|
* user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
5077
5092
|
*/
|
|
5078
5093
|
useDetectUserTabbing((ref ? ref : inputRef));
|
|
5079
|
-
var
|
|
5094
|
+
var _c = React.useState(""), value = _c[0], setValue = _c[1];
|
|
5080
5095
|
var handleChange = function (event) {
|
|
5081
5096
|
setValue(event.target.value);
|
|
5082
5097
|
if (onChange)
|
|
@@ -5112,7 +5127,7 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
5112
5127
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
5113
5128
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
5114
5129
|
}
|
|
5115
|
-
return (jsxRuntime.jsxs(
|
|
5130
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$3, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
|
|
5116
5131
|
// passed to mui Input
|
|
5117
5132
|
InputProps: {
|
|
5118
5133
|
endAdornment: value ? (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
|
|
@@ -13770,47 +13785,67 @@ var StyledHeaderButton = styled__default.default(Button)(templateObject_7$1 || (
|
|
|
13770
13785
|
var secondaryButtonStyles = "\n box-shadow: inset 0 0 0 1px ".concat(mode === "light" ? "white" : (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _c === void 0 ? void 0 : _c.fillPrimary, ";\n color: ").concat(mode === "light" ? "white" : (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.accent) === null || _d === void 0 ? void 0 : _d.fillPrimary, ";\n ");
|
|
13771
13786
|
return "\n ".concat(sdsType === "secondary" && hasInvertedStyle ? secondaryButtonStyles : "", "\n ");
|
|
13772
13787
|
});
|
|
13788
|
+
var invertedNarrowButtonStyles = function (props) {
|
|
13789
|
+
var _a, _b, _c, _d;
|
|
13790
|
+
var semanticColors = getSemanticColors(props);
|
|
13791
|
+
return material.css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "], ["\n color: ", ";\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n color: ", ";\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textPrimaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse, (_c = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _c === void 0 ? void 0 : _c.textPrimaryInverse, (_d = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _d === void 0 ? void 0 : _d.ornamentPrimaryInverse);
|
|
13792
|
+
};
|
|
13793
|
+
var StyledNarrowIconButton = styled__default.default(Button)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13794
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13795
|
+
return material.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
13796
|
+
});
|
|
13797
|
+
var invertedWideButtonStyles = function (props) {
|
|
13798
|
+
var _a, _b;
|
|
13799
|
+
var semanticColors = getSemanticColors(props);
|
|
13800
|
+
return material.css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "], ["\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:focus,\n &:active,\n &:focus-within {\n svg {\n fill: ", ";\n }\n }\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondaryInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentPrimaryInverse);
|
|
13801
|
+
};
|
|
13802
|
+
var StyledWideIconButton = styled__default.default(Button)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13803
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13804
|
+
return material.css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
13805
|
+
});
|
|
13773
13806
|
var StyledLogoLinkWrapper = styled__default.default(Link, {
|
|
13774
13807
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13775
|
-
})(
|
|
13808
|
+
})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n text-decoration: none !important;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n text-decoration: none !important;\n\n ", "\n"])), function (props) {
|
|
13776
13809
|
var isNarrow = props.isNarrow;
|
|
13777
|
-
return material.css(
|
|
13810
|
+
return material.css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), isNarrow ? "100%" : "auto");
|
|
13778
13811
|
});
|
|
13779
|
-
var StyledLogoWrapper = styled__default.default.div(
|
|
13812
|
+
var StyledLogoWrapper = styled__default.default.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
13780
13813
|
var NarrowTitleContainer = function (props) {
|
|
13781
13814
|
var spaces = getSpaces(props);
|
|
13782
|
-
return material.css(
|
|
13815
|
+
return material.css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n p {\n margin-left: ", "px;\n }\n "], ["\n p {\n margin-left: ", "px;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
13783
13816
|
};
|
|
13784
13817
|
var StyledTitleContainer = styled__default.default("div", {
|
|
13785
13818
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13786
|
-
})(
|
|
13819
|
+
})(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n ", "\n ", "\n\n display: flex;\n align-items: center;\n\n ", "\n"], ["\n ", "\n ", "\n\n display: flex;\n align-items: center;\n\n ", "\n"])), fontHeader("l"), fontHeader("l", true), function (props) {
|
|
13787
13820
|
var isNarrow = props.isNarrow;
|
|
13788
13821
|
var colors = getSemanticColors(props);
|
|
13789
13822
|
var spaces = getSpaces(props);
|
|
13790
|
-
return material.css(
|
|
13823
|
+
return material.css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n p {\n margin: 0 ", "px 0 ", "px;\n }\n\n ", "\n "], ["\n color: ", ";\n margin-right: ", "px;\n width: 100%;\n\n p {\n margin: 0 ", "px 0 ", "px;\n }\n\n ", "\n "])), props.hasInvertedStyle
|
|
13791
13824
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
13792
13825
|
: colors === null || colors === void 0 ? void 0 : colors.base.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.l, isNarrow && NarrowTitleContainer(props));
|
|
13793
13826
|
});
|
|
13794
|
-
var StyledTag = styled__default.default(Tag)(
|
|
13827
|
+
var StyledTag = styled__default.default(Tag)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n margin: 1px 0 0 0;\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"], ["\n margin: 1px 0 0 0;\n .MuiChip-label {\n ", "\n ", "\n }\n\n &:hover {\n text-decoration: none;\n }\n"])), fontBody("xxxs", "regular"), fontBody("xxxs", "regular", /* isNarrow */ true));
|
|
13795
13828
|
var StyledPrimaryNavContainer = styled__default.default("div", {
|
|
13796
13829
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13797
|
-
})(
|
|
13830
|
+
})(templateObject_22 || (templateObject_22 = __makeTemplateObject(["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"], ["\n align-items: center;\n display: flex;\n flex-grow: 1;\n\n ", "\n"])), function (props) {
|
|
13798
13831
|
var showSearch = props.showSearch, primaryNavPosition = props.primaryNavPosition, isNarrow = props.isNarrow;
|
|
13799
13832
|
var spaces = getSpaces(props);
|
|
13800
13833
|
var primaryNavPositionWithSearch = primaryNavPosition === "left" ? "flex-start" : "space-between";
|
|
13801
13834
|
var primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
|
|
13802
|
-
return material.css(
|
|
13835
|
+
return material.css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "], ["\n flex-direction: ", ";\n gap: ", "px;\n margin-right: ", "px;\n flex: 1;\n justify-content: ", ";\n "])), isNarrow ? "column" : "row", spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, showSearch
|
|
13803
13836
|
? primaryNavPositionWithSearch
|
|
13804
13837
|
: primaryNavPositionWithoutSearch);
|
|
13805
13838
|
});
|
|
13806
13839
|
var StyledSearch = styled__default.default(InputSearch, {
|
|
13807
13840
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13808
|
-
})(
|
|
13841
|
+
})(templateObject_24 || (templateObject_24 = __makeTemplateObject(["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"], ["\n margin: 0;\n width: 100%;\n\n .MuiInputBase-input {\n ", "\n ", "\n }\n\n ", "\n"])), fontBody("xs", "regular"), fontBody("m", "regular", /* isNarrow */ true), function (props) {
|
|
13809
13842
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
13810
13843
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
13811
13844
|
var spaces = getSpaces(props);
|
|
13812
13845
|
var semanticColors = getSemanticColors(props);
|
|
13813
|
-
return material.css(
|
|
13846
|
+
return material.css(templateObject_23 || (templateObject_23 = __makeTemplateObject(["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "], ["\n max-width: ", ";\n padding: ", ";\n .MuiInputBase-root {\n color: ", ";\n fieldset {\n border-color: ", ";\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n\n &:hover {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-focused {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n\n &.Mui-disabled {\n fieldset {\n border-color: ", " !important;\n }\n\n .MuiInputAdornment-root {\n .MuiButtonBase-root:last-of-type {\n svg {\n color: ", ";\n }\n }\n }\n }\n }\n "])), isNarrow ? "100%" : "320px", isNarrow ? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px") : "", hasInvertedStyle
|
|
13847
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
13848
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
13814
13849
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderInverse
|
|
13815
13850
|
: "", hasInvertedStyle
|
|
13816
13851
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryInverse
|
|
@@ -13835,23 +13870,23 @@ var NarrowButtonStyles = function (props) {
|
|
|
13835
13870
|
var backgroundColor = props.hasInvertedStyle
|
|
13836
13871
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse
|
|
13837
13872
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary;
|
|
13838
|
-
return material.css(
|
|
13873
|
+
return material.css(templateObject_25 || (templateObject_25 = __makeTemplateObject(["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "], ["\n background: ", ";\n gap: ", "px;\n flex-direction: column;\n margin-left: 0;\n margin-top: ", "px;\n padding: ", "px;\n position: sticky;\n bottom: 0;\n\n &::before {\n content: \"\";\n position: absolute;\n height: ", "px;\n width: 100%;\n background: linear-gradient(\n to top,\n ", " 0%,\n ", "00 100%\n );\n top: -", "px;\n }\n\n .MuiButton-icon .MuiSvgIcon-root {\n width: ", "px;\n height: ", "px;\n }\n "])), backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, spaces === null || spaces === void 0 ? void 0 : spaces.xl, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, backgroundColor, backgroundColor, spaces === null || spaces === void 0 ? void 0 : spaces.xxl, sizes === null || sizes === void 0 ? void 0 : sizes.l.width, sizes === null || sizes === void 0 ? void 0 : sizes.l.height);
|
|
13839
13874
|
};
|
|
13840
13875
|
var StyledButtonSection = styled__default.default("section", {
|
|
13841
13876
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13842
|
-
})(
|
|
13877
|
+
})(templateObject_27 || (templateObject_27 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n\n .MuiButtonBase-root {\n ", "\n }\n\n [data-style=\"minimal\"] {\n ", "\n }\n\n ", "\n"])), fontBody("l", "semibold", /* isNarrow */ true), fontBody("m", "semibold", /* isNarrow */ true), function (props) {
|
|
13843
13878
|
var isNarrow = props.isNarrow;
|
|
13844
13879
|
var spaces = getSpaces(props);
|
|
13845
|
-
return material.css(
|
|
13880
|
+
return material.css(templateObject_26 || (templateObject_26 = __makeTemplateObject(["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "], ["\n gap: ", "px;\n margin-left: ", "px;\n\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, isNarrow && NarrowButtonStyles(props));
|
|
13846
13881
|
});
|
|
13847
13882
|
var StyledDrawer$1 = styled__default.default(material.Drawer, {
|
|
13848
13883
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13849
|
-
})(
|
|
13884
|
+
})(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13850
13885
|
var colors = getSemanticColors(props);
|
|
13851
13886
|
return "\n .MuiDrawer-paper {\n background: ".concat(props.hasInvertedStyle ? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse : colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary, ";\n width: 100%;\n display: flex;\n flex-direction: column;\n min-height: 100vh;\n justify-content: space-between;\n }\n ");
|
|
13852
13887
|
});
|
|
13853
|
-
var StyledNarrowButton = styled__default.default(Button)(
|
|
13854
|
-
var templateObject_1$j, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
|
|
13888
|
+
var StyledNarrowButton = styled__default.default(Button)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n & {\n margin: 0;\n }\n"], ["\n & {\n margin: 0;\n }\n"])));
|
|
13889
|
+
var templateObject_1$j, templateObject_2$c, templateObject_3$7, templateObject_4$5, templateObject_5$4, templateObject_6$3, templateObject_7$1, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29;
|
|
13855
13890
|
|
|
13856
13891
|
var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
|
|
13857
13892
|
var NarrowPrimaryNavItem = function (props) {
|
|
@@ -14039,18 +14074,16 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
14039
14074
|
}
|
|
14040
14075
|
|
|
14041
14076
|
var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
14042
|
-
var _a;
|
|
14043
|
-
var activePrimaryNavKey = props.activePrimaryNavKey, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, primaryNavItems = props.primaryNavItems, _b = props.primaryNavPosition, primaryNavPosition = _b === void 0 ? "left" : _b, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _c = props.showSearch, showSearch = _c === void 0 ? true : _c, tag = props.tag, tagColor = props.tagColor, title = props.title, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title"]);
|
|
14077
|
+
var activePrimaryNavKey = props.activePrimaryNavKey, buttons = props.buttons, hasInvertedStyle = props.hasInvertedStyle, logo = props.logo, logoUrl = props.logoUrl, primaryNavItems = props.primaryNavItems, _a = props.primaryNavPosition, primaryNavPosition = _a === void 0 ? "left" : _a, searchProps = props.searchProps, secondaryNavItems = props.secondaryNavItems, setActivePrimaryNavKey = props.setActivePrimaryNavKey, _b = props.showSearch, showSearch = _b === void 0 ? true : _b, tag = props.tag, tagColor = props.tagColor, title = props.title, rest = __rest(props, ["activePrimaryNavKey", "buttons", "hasInvertedStyle", "logo", "logoUrl", "primaryNavItems", "primaryNavPosition", "searchProps", "secondaryNavItems", "setActivePrimaryNavKey", "showSearch", "tag", "tagColor", "title"]);
|
|
14044
14078
|
var navRef = React.useRef(null);
|
|
14045
14079
|
var theme = useTheme();
|
|
14046
|
-
var mode = ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
14047
14080
|
var isMdScreen = material.useMediaQuery(theme.breakpoints.down("md"));
|
|
14048
14081
|
React.useEffect(function () {
|
|
14049
14082
|
setIsNarrow(isMdScreen);
|
|
14050
14083
|
}, [isMdScreen]);
|
|
14051
|
-
var
|
|
14052
|
-
var
|
|
14053
|
-
var
|
|
14084
|
+
var _c = React.useState(true), drawerOpen = _c[0], setDrawerOpen = _c[1];
|
|
14085
|
+
var _d = React.useState(isMdScreen), isNarrow = _d[0], setIsNarrow = _d[1];
|
|
14086
|
+
var _e = React.useState(0), breakpoint = _e[0], setBreakpoint = _e[1];
|
|
14054
14087
|
var checkScrollable = React.useCallback(function () {
|
|
14055
14088
|
if (!navRef.current)
|
|
14056
14089
|
return;
|
|
@@ -14071,7 +14104,7 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14071
14104
|
return function () { return resizeObserver.disconnect(); };
|
|
14072
14105
|
}, [breakpoint, checkScrollable, isMdScreen, isNarrow]);
|
|
14073
14106
|
var renderSearch = function () {
|
|
14074
|
-
return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded",
|
|
14107
|
+
return (showSearch && (jsxRuntime.jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, searchProps))));
|
|
14075
14108
|
};
|
|
14076
14109
|
var renderLogoNode = function () {
|
|
14077
14110
|
var logoNode = (jsxRuntime.jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsxRuntime.jsx(StyledLogoWrapper, { children: logo }), jsxRuntime.jsx("p", { children: title }), tag && jsxRuntime.jsx(StyledTag, { color: tagColor, label: tag, hover: false })] }));
|
|
@@ -14107,8 +14140,8 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14107
14140
|
}
|
|
14108
14141
|
return renderDefaultButton(buttonProps, key, fullWidth);
|
|
14109
14142
|
};
|
|
14110
|
-
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(
|
|
14111
|
-
var renderWideIconButton = function (buttonProps, key) { return (jsxRuntime.jsx(
|
|
14143
|
+
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledNarrowIconButton, { sx: fullWidth, sdsStyle: "minimal", sdsType: "secondary", isAllCaps: false, startIcon: jsxRuntime.jsx(Icon, { sdsSize: "s", sdsIcon: "Person" }), hasInvertedStyle: hasInvertedStyle, children: buttonProps.children }, key)); };
|
|
14144
|
+
var renderWideIconButton = function (buttonProps, key) { return (jsxRuntime.jsx(StyledWideIconButton, { sdsIconProps: { sdsSize: "l" }, sdsStyle: "icon", sdsType: "secondary", icon: buttonProps.icon, "aria-label": String(buttonProps.children), hasInvertedStyle: hasInvertedStyle }, key)); };
|
|
14112
14145
|
var renderDefaultButton = function (buttonProps, key, fullWidth) { return (jsxRuntime.jsx(StyledHeaderButton, __assign({ sx: fullWidth }, buttonProps, { sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle }), key)); };
|
|
14113
14146
|
var renderHeaderContent = function () {
|
|
14114
14147
|
var logoNode = renderLogoNode();
|
|
@@ -14116,11 +14149,7 @@ var NavigationHeader = React.forwardRef(function (props, ref) {
|
|
|
14116
14149
|
var primaryNav = renderPrimaryNav();
|
|
14117
14150
|
var secondaryNav = renderSecondaryNav();
|
|
14118
14151
|
var buttonsNode = renderButtonsNode();
|
|
14119
|
-
return (jsxRuntime.jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryNav, search] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsxRuntime.jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); }
|
|
14120
|
-
? mode === "light"
|
|
14121
|
-
? "dark"
|
|
14122
|
-
: "light"
|
|
14123
|
-
: "auto" }))] }));
|
|
14152
|
+
return (jsxRuntime.jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [primaryNav, search] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsxRuntime.jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); } }))] }));
|
|
14124
14153
|
};
|
|
14125
14154
|
var headerContent = renderHeaderContent();
|
|
14126
14155
|
var search = renderSearch();
|