@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.esm.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.esm.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
3
3
|
import * as React from 'react';
|
|
4
4
|
import React__default, { forwardRef, useEffect, useRef, useState, useCallback, createElement, useMemo, createContext, Fragment as Fragment$1, useContext } from 'react';
|
|
5
5
|
import { css, ThemeContext as ThemeContext$1 } from '@emotion/react';
|
|
6
|
-
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton,
|
|
6
|
+
import { createTheme as createTheme$2, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, buttonBaseClasses, inputAdornmentClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, useTheme as useTheme$4, Popper, ClickAwayListener, alertClasses, alertTitleClasses, AlertTitle, Grow, Tooltip as Tooltip$1, Chip as Chip$1, darken as darken$1, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, AppBar, Toolbar, css as css$2, Drawer, useMediaQuery, Tabs as Tabs$1, tabsClasses, Tab as Tab$1, Slide, Box as Box$1, drawerClasses, ToggleButtonGroup, toggleButtonClasses, ToggleButton, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
|
|
7
7
|
import styled$2 from '@emotion/styled';
|
|
8
8
|
import { Check, Remove, Clear } from '@mui/icons-material';
|
|
9
9
|
import { css as css$1 } from '@emotion/css';
|
|
@@ -226,7 +226,7 @@ var sharedAppTheme = {
|
|
|
226
226
|
fontWeights: {
|
|
227
227
|
bold: 700,
|
|
228
228
|
light: 300,
|
|
229
|
-
medium:
|
|
229
|
+
medium: 500,
|
|
230
230
|
regular: 400,
|
|
231
231
|
semibold: 600,
|
|
232
232
|
},
|
|
@@ -1223,23 +1223,37 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1223
1223
|
},
|
|
1224
1224
|
},
|
|
1225
1225
|
components: {
|
|
1226
|
+
MuiButton: {
|
|
1227
|
+
defaultProps: {
|
|
1228
|
+
disableFocusRipple: true,
|
|
1229
|
+
disableRipple: true,
|
|
1230
|
+
disableTouchRipple: true,
|
|
1231
|
+
},
|
|
1232
|
+
},
|
|
1226
1233
|
MuiButtonBase: {
|
|
1227
1234
|
defaultProps: {
|
|
1228
1235
|
disableRipple: true,
|
|
1236
|
+
disableTouchRipple: true,
|
|
1237
|
+
},
|
|
1238
|
+
},
|
|
1239
|
+
MuiButtonGroup: {
|
|
1240
|
+
defaultProps: {
|
|
1241
|
+
disableFocusRipple: true,
|
|
1242
|
+
disableRipple: true,
|
|
1229
1243
|
},
|
|
1230
|
-
// styleOverrides: {
|
|
1231
|
-
// root: {
|
|
1232
|
-
// "&:hover": {
|
|
1233
|
-
// boxShadow: "none",
|
|
1234
|
-
// },
|
|
1235
|
-
// },
|
|
1236
|
-
// },
|
|
1237
1244
|
},
|
|
1238
1245
|
MuiDrawer: {
|
|
1239
1246
|
defaultProps: {
|
|
1240
1247
|
hideBackdrop: true,
|
|
1241
1248
|
},
|
|
1242
1249
|
},
|
|
1250
|
+
MuiIconButton: {
|
|
1251
|
+
defaultProps: {
|
|
1252
|
+
disableFocusRipple: true,
|
|
1253
|
+
disableRipple: true,
|
|
1254
|
+
disableTouchRipple: true,
|
|
1255
|
+
},
|
|
1256
|
+
},
|
|
1243
1257
|
MuiLink: {
|
|
1244
1258
|
defaultProps: {
|
|
1245
1259
|
underline: "hover",
|
|
@@ -1247,7 +1261,16 @@ function makeThemeOptions(appTheme, mode) {
|
|
|
1247
1261
|
},
|
|
1248
1262
|
MuiTab: {
|
|
1249
1263
|
defaultProps: {
|
|
1264
|
+
disableFocusRipple: true,
|
|
1265
|
+
disableRipple: true,
|
|
1266
|
+
disableTouchRipple: true,
|
|
1267
|
+
},
|
|
1268
|
+
},
|
|
1269
|
+
MuiToggleButton: {
|
|
1270
|
+
defaultProps: {
|
|
1271
|
+
disableFocusRipple: true,
|
|
1250
1272
|
disableRipple: true,
|
|
1273
|
+
disableTouchRipple: true,
|
|
1251
1274
|
},
|
|
1252
1275
|
},
|
|
1253
1276
|
},
|
|
@@ -4778,11 +4801,7 @@ var MUI_VARIANT_MAP = {
|
|
|
4778
4801
|
* @see https://mui.com/material-ui/react-button/
|
|
4779
4802
|
*/
|
|
4780
4803
|
var Button = React__default.forwardRef(function (props, ref) {
|
|
4781
|
-
var _a;
|
|
4782
|
-
var _b = props.sdsStyle, sdsStyle = _b === void 0 ? "square" : _b, sdsType = props.sdsType, _c = props.customTheme, customTheme = _c === void 0 ? "auto" : _c;
|
|
4783
|
-
var muiTheme = useTheme$4();
|
|
4784
|
-
var mode = ((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
4785
|
-
var componentTheme = customTheme !== "auto" ? customTheme : mode;
|
|
4804
|
+
var _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, sdsType = props.sdsType;
|
|
4786
4805
|
if (!sdsStyle || !sdsType) {
|
|
4787
4806
|
showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
|
|
4788
4807
|
}
|
|
@@ -4810,7 +4829,7 @@ var Button = React__default.forwardRef(function (props, ref) {
|
|
|
4810
4829
|
"sdsType",
|
|
4811
4830
|
];
|
|
4812
4831
|
var finalProps = filterProps(propsWithDefault, excludedProps);
|
|
4813
|
-
return (jsx(
|
|
4832
|
+
return (jsx(ButtonIcon, __assign({ icon: iconProps === null || iconProps === void 0 ? void 0 : iconProps.icon }, finalProps, { sdsType: sdsType, ref: ref })));
|
|
4814
4833
|
}
|
|
4815
4834
|
else {
|
|
4816
4835
|
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
@@ -4818,12 +4837,12 @@ var Button = React__default.forwardRef(function (props, ref) {
|
|
|
4818
4837
|
}
|
|
4819
4838
|
}
|
|
4820
4839
|
case sdsStyle === "minimal":
|
|
4821
|
-
return (jsx(
|
|
4840
|
+
return (jsx(StyledMinimalButton, __assign({ color: "primary", variant: "text" }, propsWithDefault, { ref: ref, "data-style": sdsStyle })));
|
|
4822
4841
|
case sdsStyle === "rounded":
|
|
4823
4842
|
case sdsStyle === "square":
|
|
4824
|
-
return (jsx(
|
|
4843
|
+
return (jsx(StyledButton$3, __assign({ color: "primary", variant: sdsType ? MUI_VARIANT_MAP[sdsType] : "text" }, propsWithDefault, { ref: ref })));
|
|
4825
4844
|
default:
|
|
4826
|
-
return
|
|
4845
|
+
return jsx(StyledButtonLegacy, __assign({}, propsWithDefault, { ref: ref }));
|
|
4827
4846
|
}
|
|
4828
4847
|
});
|
|
4829
4848
|
|
|
@@ -5034,11 +5053,7 @@ var useDetectUserTabbing = function (ref) {
|
|
|
5034
5053
|
* @see https://mui.com/material-ui/react-text-field/
|
|
5035
5054
|
*/
|
|
5036
5055
|
var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
5037
|
-
var _a;
|
|
5038
|
-
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"]);
|
|
5039
|
-
var muiTheme = useTheme$4();
|
|
5040
|
-
var mode = ((_a = muiTheme === null || muiTheme === void 0 ? void 0 : muiTheme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
5041
|
-
var componentTheme = customTheme !== "auto" ? customTheme : mode;
|
|
5056
|
+
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"]);
|
|
5042
5057
|
/**
|
|
5043
5058
|
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
5044
5059
|
*/
|
|
@@ -5052,7 +5067,7 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
|
5052
5067
|
* user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
5053
5068
|
*/
|
|
5054
5069
|
useDetectUserTabbing((ref ? ref : inputRef));
|
|
5055
|
-
var
|
|
5070
|
+
var _c = useState(""), value = _c[0], setValue = _c[1];
|
|
5056
5071
|
var handleChange = function (event) {
|
|
5057
5072
|
setValue(event.target.value);
|
|
5058
5073
|
if (onChange)
|
|
@@ -5088,7 +5103,7 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
|
5088
5103
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
5089
5104
|
return jsx(Fragment, {});
|
|
5090
5105
|
}
|
|
5091
|
-
return (jsxs(
|
|
5106
|
+
return (jsxs(Fragment, { children: [jsx(StyledLabel$3, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
|
|
5092
5107
|
// passed to mui Input
|
|
5093
5108
|
InputProps: {
|
|
5094
5109
|
endAdornment: value ? (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, icon: "XMarkCircle" }) })) : null,
|
|
@@ -13746,47 +13761,67 @@ var StyledHeaderButton = styled$2(Button)(templateObject_7$1 || (templateObject_
|
|
|
13746
13761
|
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 ");
|
|
13747
13762
|
return "\n ".concat(sdsType === "secondary" && hasInvertedStyle ? secondaryButtonStyles : "", "\n ");
|
|
13748
13763
|
});
|
|
13764
|
+
var invertedNarrowButtonStyles = function (props) {
|
|
13765
|
+
var _a, _b, _c, _d;
|
|
13766
|
+
var semanticColors = getSemanticColors(props);
|
|
13767
|
+
return css$2(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);
|
|
13768
|
+
};
|
|
13769
|
+
var StyledNarrowIconButton = styled$2(Button)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13770
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13771
|
+
return css$2(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedNarrowButtonStyles(props));
|
|
13772
|
+
});
|
|
13773
|
+
var invertedWideButtonStyles = function (props) {
|
|
13774
|
+
var _a, _b;
|
|
13775
|
+
var semanticColors = getSemanticColors(props);
|
|
13776
|
+
return css$2(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);
|
|
13777
|
+
};
|
|
13778
|
+
var StyledWideIconButton = styled$2(Button)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13779
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
13780
|
+
return css$2(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), hasInvertedStyle && invertedWideButtonStyles(props));
|
|
13781
|
+
});
|
|
13749
13782
|
var StyledLogoLinkWrapper = styled$2(Link, {
|
|
13750
13783
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13751
|
-
})(
|
|
13784
|
+
})(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) {
|
|
13752
13785
|
var isNarrow = props.isNarrow;
|
|
13753
|
-
return css$2(
|
|
13786
|
+
return css$2(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n width: ", ";\n "], ["\n width: ", ";\n "])), isNarrow ? "100%" : "auto");
|
|
13754
13787
|
});
|
|
13755
|
-
var StyledLogoWrapper = styled$2.div(
|
|
13788
|
+
var StyledLogoWrapper = styled$2.div(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n"], ["\n display: flex;\n align-items: center;\n"])));
|
|
13756
13789
|
var NarrowTitleContainer = function (props) {
|
|
13757
13790
|
var spaces = getSpaces(props);
|
|
13758
|
-
return css$2(
|
|
13791
|
+
return css$2(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);
|
|
13759
13792
|
};
|
|
13760
13793
|
var StyledTitleContainer = styled$2("div", {
|
|
13761
13794
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13762
|
-
})(
|
|
13795
|
+
})(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) {
|
|
13763
13796
|
var isNarrow = props.isNarrow;
|
|
13764
13797
|
var colors = getSemanticColors(props);
|
|
13765
13798
|
var spaces = getSpaces(props);
|
|
13766
|
-
return css$2(
|
|
13799
|
+
return css$2(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
|
|
13767
13800
|
? colors === null || colors === void 0 ? void 0 : colors.base.textPrimaryInverse
|
|
13768
13801
|
: 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));
|
|
13769
13802
|
});
|
|
13770
|
-
var StyledTag = styled$2(Tag)(
|
|
13803
|
+
var StyledTag = styled$2(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));
|
|
13771
13804
|
var StyledPrimaryNavContainer = styled$2("div", {
|
|
13772
13805
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13773
|
-
})(
|
|
13806
|
+
})(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) {
|
|
13774
13807
|
var showSearch = props.showSearch, primaryNavPosition = props.primaryNavPosition, isNarrow = props.isNarrow;
|
|
13775
13808
|
var spaces = getSpaces(props);
|
|
13776
13809
|
var primaryNavPositionWithSearch = primaryNavPosition === "left" ? "flex-start" : "space-between";
|
|
13777
13810
|
var primaryNavPositionWithoutSearch = primaryNavPosition === "left" ? "flex-start" : "flex-end";
|
|
13778
|
-
return css$2(
|
|
13811
|
+
return css$2(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
|
|
13779
13812
|
? primaryNavPositionWithSearch
|
|
13780
13813
|
: primaryNavPositionWithoutSearch);
|
|
13781
13814
|
});
|
|
13782
13815
|
var StyledSearch = styled$2(InputSearch, {
|
|
13783
13816
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13784
|
-
})(
|
|
13817
|
+
})(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) {
|
|
13785
13818
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
13786
13819
|
var hasInvertedStyle = props.hasInvertedStyle, isNarrow = props.isNarrow;
|
|
13787
13820
|
var spaces = getSpaces(props);
|
|
13788
13821
|
var semanticColors = getSemanticColors(props);
|
|
13789
|
-
return css$2(
|
|
13822
|
+
return css$2(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
|
|
13823
|
+
? semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimaryInverse
|
|
13824
|
+
: semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base.textPrimary, hasInvertedStyle
|
|
13790
13825
|
? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.borderInverse
|
|
13791
13826
|
: "", hasInvertedStyle
|
|
13792
13827
|
? (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryInverse
|
|
@@ -13811,23 +13846,23 @@ var NarrowButtonStyles = function (props) {
|
|
|
13811
13846
|
var backgroundColor = props.hasInvertedStyle
|
|
13812
13847
|
? colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimaryInverse
|
|
13813
13848
|
: colors === null || colors === void 0 ? void 0 : colors.base.backgroundPrimary;
|
|
13814
|
-
return css$2(
|
|
13849
|
+
return css$2(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);
|
|
13815
13850
|
};
|
|
13816
13851
|
var StyledButtonSection = styled$2("section", {
|
|
13817
13852
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13818
|
-
})(
|
|
13853
|
+
})(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) {
|
|
13819
13854
|
var isNarrow = props.isNarrow;
|
|
13820
13855
|
var spaces = getSpaces(props);
|
|
13821
|
-
return css$2(
|
|
13856
|
+
return css$2(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));
|
|
13822
13857
|
});
|
|
13823
13858
|
var StyledDrawer$1 = styled$2(Drawer, {
|
|
13824
13859
|
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
13825
|
-
})(
|
|
13860
|
+
})(templateObject_28 || (templateObject_28 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
13826
13861
|
var colors = getSemanticColors(props);
|
|
13827
13862
|
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 ");
|
|
13828
13863
|
});
|
|
13829
|
-
var StyledNarrowButton = styled$2(Button)(
|
|
13830
|
-
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;
|
|
13864
|
+
var StyledNarrowButton = styled$2(Button)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["\n & {\n margin: 0;\n }\n"], ["\n & {\n margin: 0;\n }\n"])));
|
|
13865
|
+
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;
|
|
13831
13866
|
|
|
13832
13867
|
var doNotForwardProps$8 = ["active", "hasInvertedStyle", "isNarrow"];
|
|
13833
13868
|
var NarrowPrimaryNavItem = function (props) {
|
|
@@ -14015,18 +14050,16 @@ function NavigationHeaderSecondaryNav(_a) {
|
|
|
14015
14050
|
}
|
|
14016
14051
|
|
|
14017
14052
|
var NavigationHeader = forwardRef(function (props, ref) {
|
|
14018
|
-
var _a;
|
|
14019
|
-
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"]);
|
|
14053
|
+
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"]);
|
|
14020
14054
|
var navRef = useRef(null);
|
|
14021
14055
|
var theme = useTheme();
|
|
14022
|
-
var mode = ((_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.mode) || "light";
|
|
14023
14056
|
var isMdScreen = useMediaQuery(theme.breakpoints.down("md"));
|
|
14024
14057
|
useEffect(function () {
|
|
14025
14058
|
setIsNarrow(isMdScreen);
|
|
14026
14059
|
}, [isMdScreen]);
|
|
14027
|
-
var
|
|
14028
|
-
var
|
|
14029
|
-
var
|
|
14060
|
+
var _c = useState(true), drawerOpen = _c[0], setDrawerOpen = _c[1];
|
|
14061
|
+
var _d = useState(isMdScreen), isNarrow = _d[0], setIsNarrow = _d[1];
|
|
14062
|
+
var _e = useState(0), breakpoint = _e[0], setBreakpoint = _e[1];
|
|
14030
14063
|
var checkScrollable = useCallback(function () {
|
|
14031
14064
|
if (!navRef.current)
|
|
14032
14065
|
return;
|
|
@@ -14047,7 +14080,7 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
14047
14080
|
return function () { return resizeObserver.disconnect(); };
|
|
14048
14081
|
}, [breakpoint, checkScrollable, isMdScreen, isNarrow]);
|
|
14049
14082
|
var renderSearch = function () {
|
|
14050
|
-
return (showSearch && (jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded",
|
|
14083
|
+
return (showSearch && (jsx(StyledSearch, __assign({ id: "nav-bar-search", label: "Search", placeholder: "Search", sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow }, searchProps))));
|
|
14051
14084
|
};
|
|
14052
14085
|
var renderLogoNode = function () {
|
|
14053
14086
|
var logoNode = (jsxs(StyledTitleContainer, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [jsx(StyledLogoWrapper, { children: logo }), jsx("p", { children: title }), tag && jsx(StyledTag, { color: tagColor, label: tag, hover: false })] }));
|
|
@@ -14083,8 +14116,8 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
14083
14116
|
}
|
|
14084
14117
|
return renderDefaultButton(buttonProps, key, fullWidth);
|
|
14085
14118
|
};
|
|
14086
|
-
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsx(
|
|
14087
|
-
var renderWideIconButton = function (buttonProps, key) { return (jsx(
|
|
14119
|
+
var renderNarrowIconButton = function (buttonProps, key, fullWidth) { return (jsx(StyledNarrowIconButton, { sx: fullWidth, sdsStyle: "minimal", sdsType: "secondary", isAllCaps: false, startIcon: jsx(Icon, { sdsSize: "s", sdsIcon: "Person" }), hasInvertedStyle: hasInvertedStyle, children: buttonProps.children }, key)); };
|
|
14120
|
+
var renderWideIconButton = function (buttonProps, key) { return (jsx(StyledWideIconButton, { sdsIconProps: { sdsSize: "l" }, sdsStyle: "icon", sdsType: "secondary", icon: buttonProps.icon, "aria-label": String(buttonProps.children), hasInvertedStyle: hasInvertedStyle }, key)); };
|
|
14088
14121
|
var renderDefaultButton = function (buttonProps, key, fullWidth) { return (jsx(StyledHeaderButton, __assign({ sx: fullWidth }, buttonProps, { sdsStyle: "rounded", hasInvertedStyle: hasInvertedStyle }), key)); };
|
|
14089
14122
|
var renderHeaderContent = function () {
|
|
14090
14123
|
var logoNode = renderLogoNode();
|
|
@@ -14092,11 +14125,7 @@ var NavigationHeader = forwardRef(function (props, ref) {
|
|
|
14092
14125
|
var primaryNav = renderPrimaryNav();
|
|
14093
14126
|
var secondaryNav = renderSecondaryNav();
|
|
14094
14127
|
var buttonsNode = renderButtonsNode();
|
|
14095
|
-
return (jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxs(Fragment, { children: [jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxs(Fragment, { children: [primaryNav, search] })) : (jsxs(Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); }
|
|
14096
|
-
? mode === "light"
|
|
14097
|
-
? "dark"
|
|
14098
|
-
: "light"
|
|
14099
|
-
: "auto" }))] }));
|
|
14128
|
+
return (jsxs(StyledToolbar, { hasInvertedStyle: hasInvertedStyle, isNarrow: isNarrow, children: [logoNode, !isNarrow && (jsxs(Fragment, { children: [jsx(StyledPrimaryNavContainer, { primaryNavPosition: primaryNavPosition, showSearch: showSearch, isNarrow: isNarrow, children: primaryNavPosition === "left" ? (jsxs(Fragment, { children: [primaryNav, search] })) : (jsxs(Fragment, { children: [search, primaryNav] })) }), secondaryNav, buttonsNode] })), isNarrow && (jsx(StyledNarrowButton, { sdsType: "secondary", sdsStyle: "icon", icon: drawerOpen ? "XMark" : "LinesHorizontal3", onClick: function () { return setDrawerOpen(function (prev) { return !prev; }); } }))] }));
|
|
14100
14129
|
};
|
|
14101
14130
|
var headerContent = renderHeaderContent();
|
|
14102
14131
|
var search = renderSearch();
|