@czi-sds/components 22.6.0 → 22.7.0
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 +4 -2
- package/dist/index.cjs.js +36 -22
- package/dist/index.esm.d.ts +4 -2
- package/dist/index.esm.js +36 -22
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.cjs.d.ts
CHANGED
|
@@ -984,6 +984,8 @@ interface TooltipExtraProps extends CommonThemeProps {
|
|
|
984
984
|
hasInvertedStyle?: boolean;
|
|
985
985
|
subtitle?: React.ReactNode;
|
|
986
986
|
width?: "default" | "wide";
|
|
987
|
+
textAlign?: "left" | "center" | "right";
|
|
988
|
+
componentSlot?: React.ReactNode;
|
|
987
989
|
}
|
|
988
990
|
type TooltipProps = TooltipExtraProps & RawTooltipProps;
|
|
989
991
|
/**
|
|
@@ -1290,7 +1292,7 @@ declare const Title: import("@emotion/styled").StyledComponent<import("@mui/mate
|
|
|
1290
1292
|
}, "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"> & {
|
|
1291
1293
|
theme?: import("@emotion/react").Theme | undefined;
|
|
1292
1294
|
} & DialogTitleExtraProps, {}, {}>;
|
|
1293
|
-
declare const Subtitle
|
|
1295
|
+
declare const Subtitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
1294
1296
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
1295
1297
|
}, "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"> & {
|
|
1296
1298
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -1800,5 +1802,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
|
|
|
1800
1802
|
* @see https://mui.com/material-ui/react-table/
|
|
1801
1803
|
*/
|
|
1802
1804
|
declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
|
|
1803
|
-
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, ButtonType$0 as ButtonType, ButtonTypeMap, ButtonSize, 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, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle
|
|
1805
|
+
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, ButtonType$0 as ButtonType, ButtonTypeMap, ButtonSize, 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, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle 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, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, 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, createAppThemeBorders, 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 };
|
|
1804
1806
|
export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
|
package/dist/index.cjs.js
CHANGED
|
@@ -1646,7 +1646,7 @@ var StyledAccordionHeader = styled__default.default(material.AccordionSummary)(t
|
|
|
1646
1646
|
var semanticColors = getSemanticColors(props);
|
|
1647
1647
|
return react.css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, material.accordionSummaryClasses.content, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, material.accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
|
|
1648
1648
|
});
|
|
1649
|
-
var StyledSubtitle = styled__default.default("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1649
|
+
var StyledSubtitle$1 = styled__default.default("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1650
1650
|
var _a;
|
|
1651
1651
|
var semanticColors = getSemanticColors(props);
|
|
1652
1652
|
return react.css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
|
|
@@ -4455,7 +4455,7 @@ var Icon = React.forwardRef(function Icon(_a, ref) {
|
|
|
4455
4455
|
|
|
4456
4456
|
var AccordionHeader = function (props) {
|
|
4457
4457
|
var children = props.children, id = props.id, subtitle = props.subtitle;
|
|
4458
|
-
return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle, { children: subtitle })] }));
|
|
4458
|
+
return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle$1, { children: subtitle })] }));
|
|
4459
4459
|
};
|
|
4460
4460
|
|
|
4461
4461
|
var sdsPropNames$2 = ["useDivider", "togglePosition"];
|
|
@@ -4741,7 +4741,7 @@ var StyledMinimalButton = styled__default.default(material.Button, {
|
|
|
4741
4741
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4742
4742
|
})(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4743
4743
|
var sdsType = props.sdsType;
|
|
4744
|
-
return react.css(templateObject_9$
|
|
4744
|
+
return react.css(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4745
4745
|
});
|
|
4746
4746
|
var StyledButtonLegacy = styled__default.default(material.Button, {
|
|
4747
4747
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
@@ -4752,7 +4752,7 @@ var StyledButtonLegacy = styled__default.default(material.Button, {
|
|
|
4752
4752
|
var spaces = getSpaces(props);
|
|
4753
4753
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4754
4754
|
});
|
|
4755
|
-
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$
|
|
4755
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$9, templateObject_10$6, templateObject_11$5;
|
|
4756
4756
|
|
|
4757
4757
|
var isDisabled$1 = function (props) {
|
|
4758
4758
|
var _a, _b;
|
|
@@ -4809,11 +4809,11 @@ var doNotForwardProps$D = [
|
|
|
4809
4809
|
];
|
|
4810
4810
|
var StyledButtonIcon = styled__default.default(material.IconButton, {
|
|
4811
4811
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
4812
|
-
})(templateObject_9$
|
|
4812
|
+
})(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4813
4813
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4814
4814
|
return react.css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
4815
4815
|
});
|
|
4816
|
-
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$
|
|
4816
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$8;
|
|
4817
4817
|
|
|
4818
4818
|
var ButtonIconSizeToSdsIconSize = {
|
|
4819
4819
|
large: "xl",
|
|
@@ -5931,36 +5931,45 @@ var dark$1 = function (props) {
|
|
|
5931
5931
|
var _a, _b;
|
|
5932
5932
|
var spaces = getSpaces(props);
|
|
5933
5933
|
var semanticColors = getSemanticColors(props);
|
|
5934
|
-
return css.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n
|
|
5934
|
+
return css.css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5935
5935
|
};
|
|
5936
5936
|
var light$1 = function (props) {
|
|
5937
5937
|
var _a, _b;
|
|
5938
5938
|
var spaces = getSpaces(props);
|
|
5939
5939
|
var semanticColors = getSemanticColors(props);
|
|
5940
|
-
return css.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n
|
|
5941
|
-
};
|
|
5942
|
-
var wide = function () {
|
|
5943
|
-
return css.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
|
|
5940
|
+
return css.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5944
5941
|
};
|
|
5945
5942
|
var tableStyles = function (props) {
|
|
5946
5943
|
var spaces = getSpaces(props);
|
|
5947
|
-
return css.css(
|
|
5944
|
+
return css.css(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5948
5945
|
};
|
|
5949
|
-
var doNotForwardProps$w = ["hasInvertedStyle"];
|
|
5950
|
-
var
|
|
5946
|
+
var doNotForwardProps$w = ["hasInvertedStyle", "textAlign"];
|
|
5947
|
+
var StyledTitle = styled__default.default("p", {
|
|
5948
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
5949
|
+
})(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
5950
|
+
var _a, _b;
|
|
5951
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5952
|
+
var semanticColors = getSemanticColors(props);
|
|
5953
|
+
return "\n margin: 0;\n color: ".concat(hasInvertedStyle ? (_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.textPrimary, ";\n ");
|
|
5954
|
+
});
|
|
5955
|
+
var StyledSubtitle = styled__default.default("p", {
|
|
5951
5956
|
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
5952
5957
|
})(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5953
5958
|
var _a, _b;
|
|
5954
5959
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5955
5960
|
var semanticColors = getSemanticColors(props);
|
|
5956
|
-
return "\n color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
|
|
5961
|
+
return "\n margin: 0;\n color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
|
|
5957
5962
|
});
|
|
5958
5963
|
var tooltipCss = function (props) {
|
|
5959
|
-
var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5964
|
+
var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor, textAlign = props.textAlign;
|
|
5960
5965
|
var shadows = getShadows(props);
|
|
5961
|
-
return css.css(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n
|
|
5966
|
+
return css.css(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
|
|
5967
|
+
? textAlign
|
|
5968
|
+
: width === "wide"
|
|
5969
|
+
? "left"
|
|
5970
|
+
: "center", sdsStyle === "dark" || inverted || hasInvertedStyle
|
|
5962
5971
|
? dark$1(props)
|
|
5963
|
-
: light$1(props),
|
|
5972
|
+
: light$1(props), followCursor === true && tableStyles(props));
|
|
5964
5973
|
};
|
|
5965
5974
|
var arrowCss = function (props) {
|
|
5966
5975
|
var _a, _b;
|
|
@@ -5975,7 +5984,11 @@ var arrowCss = function (props) {
|
|
|
5975
5984
|
* default placement which is calculated by javascript
|
|
5976
5985
|
*/
|
|
5977
5986
|
var StyledPopper$1 = styled__default.default(material.Popper)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
|
|
5978
|
-
var
|
|
5987
|
+
var StyledComponentSlotWrapper = styled__default.default("div")(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5988
|
+
var spaces = getSpaces(props);
|
|
5989
|
+
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n ");
|
|
5990
|
+
});
|
|
5991
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a, templateObject_9$7;
|
|
5979
5992
|
|
|
5980
5993
|
/**
|
|
5981
5994
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5985,7 +5998,7 @@ var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4
|
|
|
5985
5998
|
* https://mui.com/components/tooltips/#disabled-elements
|
|
5986
5999
|
*/
|
|
5987
6000
|
var Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
5988
|
-
var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
|
|
6001
|
+
var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, textAlign = props.textAlign, componentSlot = props.componentSlot, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent", "textAlign", "componentSlot"]);
|
|
5989
6002
|
var children = rest.children;
|
|
5990
6003
|
if (inverted || sdsStyle) {
|
|
5991
6004
|
showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
|
|
@@ -5999,6 +6012,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
5999
6012
|
arrowOffset: arrowOffset,
|
|
6000
6013
|
classes: classes,
|
|
6001
6014
|
hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
|
|
6015
|
+
textAlign: textAlign,
|
|
6002
6016
|
theme: theme,
|
|
6003
6017
|
width: width,
|
|
6004
6018
|
/* stylelint-enable property-no-unknown -- false positive */
|
|
@@ -6017,7 +6031,7 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
6017
6031
|
// a tooltip. this matches with the native MUI behavior.
|
|
6018
6032
|
if (!title && !subtitle)
|
|
6019
6033
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
|
|
6020
|
-
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, subtitle && (jsxRuntime.jsx(
|
|
6034
|
+
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx(StyledTitle, { hasInvertedStyle: hasInvertedStyle, children: title })), subtitle && (jsxRuntime.jsx(StyledSubtitle, { hasInvertedStyle: hasInvertedStyle, children: subtitle })), componentSlot && (jsxRuntime.jsx(StyledComponentSlotWrapper, { children: componentSlot }))] }));
|
|
6021
6035
|
var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
|
|
6022
6036
|
return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
|
|
6023
6037
|
// (masoudmanson): Setting tabIndex to 0 makes the tooltip component
|
|
@@ -15495,7 +15509,7 @@ var StyledDrawer = styled__default.default(material.Drawer, {
|
|
|
15495
15509
|
});
|
|
15496
15510
|
var StyledHeaderComponent = styled__default.default("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15497
15511
|
var spaces = getSpaces(props);
|
|
15498
|
-
return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "], ["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15512
|
+
return react.css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "], ["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl);
|
|
15499
15513
|
});
|
|
15500
15514
|
var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
15501
15515
|
|
package/dist/index.esm.d.ts
CHANGED
|
@@ -984,6 +984,8 @@ interface TooltipExtraProps extends CommonThemeProps {
|
|
|
984
984
|
hasInvertedStyle?: boolean;
|
|
985
985
|
subtitle?: React.ReactNode;
|
|
986
986
|
width?: "default" | "wide";
|
|
987
|
+
textAlign?: "left" | "center" | "right";
|
|
988
|
+
componentSlot?: React.ReactNode;
|
|
987
989
|
}
|
|
988
990
|
type TooltipProps = TooltipExtraProps & RawTooltipProps;
|
|
989
991
|
/**
|
|
@@ -1290,7 +1292,7 @@ declare const Title: import("@emotion/styled").StyledComponent<import("@mui/mate
|
|
|
1290
1292
|
}, "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"> & {
|
|
1291
1293
|
theme?: import("@emotion/react").Theme | undefined;
|
|
1292
1294
|
} & DialogTitleExtraProps, {}, {}>;
|
|
1293
|
-
declare const Subtitle
|
|
1295
|
+
declare const Subtitle: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
|
|
1294
1296
|
ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
|
|
1295
1297
|
}, "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"> & {
|
|
1296
1298
|
theme?: import("@emotion/react").Theme | undefined;
|
|
@@ -1800,5 +1802,5 @@ type TooltipTableContentProps = TooltipTableExtraProps;
|
|
|
1800
1802
|
* @see https://mui.com/material-ui/react-table/
|
|
1801
1803
|
*/
|
|
1802
1804
|
declare const TooltipTableContent: (props: TooltipTableContentProps) => JSX.Element;
|
|
1803
|
-
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, ButtonType$0 as ButtonType, ButtonTypeMap, ButtonSize, 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, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle
|
|
1805
|
+
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, ButtonType$0 as ButtonType, ButtonTypeMap, ButtonSize, 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, ContentCardActions, StyledContentCardBody as ContentCardBody, CardMedia as ContentCardMedia, StyledTitleText as ContentCardTitle, StyledSubtitleText as ContentCardSubtitle, StyledMetadataText as ContentCardMetadata, StyledOverlineText as ContentCardOverline, ContentCard, DialogContext, DialogProps, Dialog, DialogActionsProps, DialogActions, DialogContentProps, _default, _default as DialogContent, DialogPaperProps, DialogPaper, Subtitle 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, NavigationFooterNavItem, FooterImage, NavigationFooterProps, NavItemProps, FooterLinkProps, NavigationFooter, 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, createAppThemeBorders, 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 };
|
|
1804
1806
|
export type { AutocompleteBaseProps, AutocompleteMultiColumnProps, AutocompleteOptionBasic, AutocompleteOptionComponent, DefaultAutocompleteOption, ChipProps, ContentCardProps, CardMediaProps as ContentCardMediaProps, ContentCardActionsProps, ContentCardTitleProps, IconNameToSizes, InputToggleExtraProps as InputToggleProps, NavigationHeaderProps, IconButtonProps, NavigationHeaderPrimaryNavItem, NavigationHeaderPrimaryNavProps, NavigationHeaderSecondaryNavItem, NavigationHeaderSecondaryNavProps, PanelProps, BasicPanelProps, OverlayPanelProps, TabsProps$0 as TabsProps, SdsTagColorType, TooltipProps, TooltipTableContentProps };
|
package/dist/index.esm.js
CHANGED
|
@@ -1623,7 +1623,7 @@ var StyledAccordionHeader = styled$2(AccordionSummary)(templateObject_2$L || (te
|
|
|
1623
1623
|
var semanticColors = getSemanticColors(props);
|
|
1624
1624
|
return css(templateObject_1$18 || (templateObject_1$18 = __makeTemplateObject(["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n padding: ", "px;\n align-items: flex-start;\n box-sizing: border-box;\n\n .", " {\n margin: 0;\n flex-direction: column;\n\n &.", " {\n margin: 0;\n }\n }\n\n & .", " {\n margin-left: ", "px;\n margin-top: ", "px !important;\n align-self: center;\n\n svg {\n color: ", ";\n }\n }\n\n &:hover {\n & .", " {\n svg {\n color: ", ";\n }\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, accordionSummaryClasses.content, accordionSummaryClasses.expanded, accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.ornamentSecondary, accordionSummaryClasses.expandIconWrapper, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.ornamentSecondaryHover);
|
|
1625
1625
|
});
|
|
1626
|
-
var StyledSubtitle = styled$2("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1626
|
+
var StyledSubtitle$1 = styled$2("p")(templateObject_4$w || (templateObject_4$w = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
1627
1627
|
var _a;
|
|
1628
1628
|
var semanticColors = getSemanticColors(props);
|
|
1629
1629
|
return css(templateObject_3$C || (templateObject_3$C = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondary);
|
|
@@ -4432,7 +4432,7 @@ var Icon = forwardRef(function Icon(_a, ref) {
|
|
|
4432
4432
|
|
|
4433
4433
|
var AccordionHeader = function (props) {
|
|
4434
4434
|
var children = props.children, id = props.id, subtitle = props.subtitle;
|
|
4435
|
-
return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
|
|
4435
|
+
return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs" }), children: [children, subtitle && jsx(StyledSubtitle$1, { children: subtitle })] }));
|
|
4436
4436
|
};
|
|
4437
4437
|
|
|
4438
4438
|
var sdsPropNames$2 = ["useDivider", "togglePosition"];
|
|
@@ -4718,7 +4718,7 @@ var StyledMinimalButton = styled$2(Button$1, {
|
|
|
4718
4718
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
4719
4719
|
})(templateObject_10$6 || (templateObject_10$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4720
4720
|
var sdsType = props.sdsType;
|
|
4721
|
-
return css(templateObject_9$
|
|
4721
|
+
return css(templateObject_9$9 || (templateObject_9$9 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
4722
4722
|
});
|
|
4723
4723
|
var StyledButtonLegacy = styled$2(Button$1, {
|
|
4724
4724
|
shouldForwardProp: function (prop) { return !doNotForwardProps$E.includes(prop); },
|
|
@@ -4729,7 +4729,7 @@ var StyledButtonLegacy = styled$2(Button$1, {
|
|
|
4729
4729
|
var spaces = getSpaces(props);
|
|
4730
4730
|
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4731
4731
|
});
|
|
4732
|
-
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$
|
|
4732
|
+
var templateObject_1$14, templateObject_2$I, templateObject_3$z, templateObject_4$v, templateObject_5$o, templateObject_6$k, templateObject_7$g, templateObject_8$d, templateObject_9$9, templateObject_10$6, templateObject_11$5;
|
|
4733
4733
|
|
|
4734
4734
|
var isDisabled$1 = function (props) {
|
|
4735
4735
|
var _a, _b;
|
|
@@ -4786,11 +4786,11 @@ var doNotForwardProps$D = [
|
|
|
4786
4786
|
];
|
|
4787
4787
|
var StyledButtonIcon = styled$2(IconButton, {
|
|
4788
4788
|
shouldForwardProp: function (prop) { return !doNotForwardProps$D.includes(prop); },
|
|
4789
|
-
})(templateObject_9$
|
|
4789
|
+
})(templateObject_9$8 || (templateObject_9$8 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4790
4790
|
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
4791
4791
|
return css(templateObject_8$c || (templateObject_8$c = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), sdsType === "primary" && primary$2(props), sdsType === "secondary" && secondary$2(props), sdsType === "tertiary" && tertiary(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
4792
4792
|
});
|
|
4793
|
-
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$
|
|
4793
|
+
var templateObject_1$13, templateObject_2$H, templateObject_3$y, templateObject_4$u, templateObject_5$n, templateObject_6$j, templateObject_7$f, templateObject_8$c, templateObject_9$8;
|
|
4794
4794
|
|
|
4795
4795
|
var ButtonIconSizeToSdsIconSize = {
|
|
4796
4796
|
large: "xl",
|
|
@@ -5908,36 +5908,45 @@ var dark$1 = function (props) {
|
|
|
5908
5908
|
var _a, _b;
|
|
5909
5909
|
var spaces = getSpaces(props);
|
|
5910
5910
|
var semanticColors = getSemanticColors(props);
|
|
5911
|
-
return css$1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n
|
|
5911
|
+
return css$1(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontHeaderXs(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surfaceInverse, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimaryInverse, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5912
5912
|
};
|
|
5913
5913
|
var light$1 = function (props) {
|
|
5914
5914
|
var _a, _b;
|
|
5915
5915
|
var spaces = getSpaces(props);
|
|
5916
5916
|
var semanticColors = getSemanticColors(props);
|
|
5917
|
-
return css$1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n
|
|
5918
|
-
};
|
|
5919
|
-
var wide = function () {
|
|
5920
|
-
return css$1(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n max-width: 550px;\n "], ["\n max-width: 550px;\n "])));
|
|
5917
|
+
return css$1(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "], ["\n ", "\n background-color: ", ";\n color: ", ";\n padding: ", "px ", "px;\n "])), fontBodyXs$2(props), (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textPrimary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l);
|
|
5921
5918
|
};
|
|
5922
5919
|
var tableStyles = function (props) {
|
|
5923
5920
|
var spaces = getSpaces(props);
|
|
5924
|
-
return css$1(
|
|
5921
|
+
return css$1(templateObject_3$r || (templateObject_3$r = __makeTemplateObject(["\n padding: ", "px;\n "], ["\n padding: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m);
|
|
5925
5922
|
};
|
|
5926
|
-
var doNotForwardProps$w = ["hasInvertedStyle"];
|
|
5927
|
-
var
|
|
5923
|
+
var doNotForwardProps$w = ["hasInvertedStyle", "textAlign"];
|
|
5924
|
+
var StyledTitle = styled$2("p", {
|
|
5925
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
5926
|
+
})(templateObject_4$o || (templateObject_4$o = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
5927
|
+
var _a, _b;
|
|
5928
|
+
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5929
|
+
var semanticColors = getSemanticColors(props);
|
|
5930
|
+
return "\n margin: 0;\n color: ".concat(hasInvertedStyle ? (_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.textPrimary, ";\n ");
|
|
5931
|
+
});
|
|
5932
|
+
var StyledSubtitle = styled$2("p", {
|
|
5928
5933
|
shouldForwardProp: function (prop) { return !doNotForwardProps$w.includes(prop); },
|
|
5929
5934
|
})(templateObject_5$i || (templateObject_5$i = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
5930
5935
|
var _a, _b;
|
|
5931
5936
|
var hasInvertedStyle = props.hasInvertedStyle;
|
|
5932
5937
|
var semanticColors = getSemanticColors(props);
|
|
5933
|
-
return "\n color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
|
|
5938
|
+
return "\n margin: 0;\n color: ".concat(hasInvertedStyle ? (_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.textSecondaryInverse : (_b = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _b === void 0 ? void 0 : _b.textSecondary, ";\n ");
|
|
5934
5939
|
});
|
|
5935
5940
|
var tooltipCss = function (props) {
|
|
5936
|
-
var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor;
|
|
5941
|
+
var _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, sdsStyle = props.sdsStyle, width = props.width, followCursor = props.followCursor, textAlign = props.textAlign;
|
|
5937
5942
|
var shadows = getShadows(props);
|
|
5938
|
-
return css$1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n
|
|
5943
|
+
return css$1(templateObject_6$f || (templateObject_6$f = __makeTemplateObject(["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "], ["\n &.MuiTooltip-tooltip {\n box-shadow: ", ";\n max-width: ", " !important;\n text-align: ", " !important;\n\n ", "\n\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.m, width === "wide" ? "550px" : "250px", textAlign
|
|
5944
|
+
? textAlign
|
|
5945
|
+
: width === "wide"
|
|
5946
|
+
? "left"
|
|
5947
|
+
: "center", sdsStyle === "dark" || inverted || hasInvertedStyle
|
|
5939
5948
|
? dark$1(props)
|
|
5940
|
-
: light$1(props),
|
|
5949
|
+
: light$1(props), followCursor === true && tableStyles(props));
|
|
5941
5950
|
};
|
|
5942
5951
|
var arrowCss = function (props) {
|
|
5943
5952
|
var _a, _b;
|
|
@@ -5952,7 +5961,11 @@ var arrowCss = function (props) {
|
|
|
5952
5961
|
* default placement which is calculated by javascript
|
|
5953
5962
|
*/
|
|
5954
5963
|
var StyledPopper$1 = styled$2(Popper)(templateObject_8$a || (templateObject_8$a = __makeTemplateObject(["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"], ["\n &[data-popper-placement*=\"top\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-bottom: -12px !important;\n &:before {\n transform: rotate(45deg) translate(0px, -2px);\n border-bottom-right-radius: 2px;\n box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"bottom\"] .MuiTooltip-arrow {\n width: 24px !important;\n height: 12px !important;\n margin-top: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 2px);\n border-top-left-radius: 2px;\n box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"left\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-right: -12px !important;\n &:before {\n transform: rotate(45deg) translate(-1px, 1px);\n border-top-right-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n\n &[data-popper-placement*=\"right\"] .MuiTooltip-arrow {\n width: 12px !important;\n height: 16px !important;\n margin-left: -12px !important;\n &:before {\n transform: rotate(45deg) translate(4px, 2px);\n border-bottom-left-radius: 2px;\n box-shadow: 0 0 4px 0px rgba(0, 0, 0, 0.1);\n }\n }\n"])));
|
|
5955
|
-
var
|
|
5964
|
+
var StyledComponentSlotWrapper = styled$2("div")(templateObject_9$7 || (templateObject_9$7 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5965
|
+
var spaces = getSpaces(props);
|
|
5966
|
+
return "\n margin-top: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n ");
|
|
5967
|
+
});
|
|
5968
|
+
var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4$o, templateObject_5$i, templateObject_6$f, templateObject_7$c, templateObject_8$a, templateObject_9$7;
|
|
5956
5969
|
|
|
5957
5970
|
/**
|
|
5958
5971
|
* @see https://mui.com/material-ui/react-tooltip/
|
|
@@ -5962,7 +5975,7 @@ var templateObject_1$T, templateObject_2$A, templateObject_3$r, templateObject_4
|
|
|
5962
5975
|
* https://mui.com/components/tooltips/#disabled-elements
|
|
5963
5976
|
*/
|
|
5964
5977
|
var Tooltip = forwardRef(function Tooltip(props, ref) {
|
|
5965
|
-
var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent"]);
|
|
5978
|
+
var arrowOffset = props.arrowOffset, classes = props.classes, _a = props.hasInvertedStyle, hasInvertedStyle = _a === void 0 ? true : _a, inverted = props.inverted, _b = props.sdsStyle, sdsStyle = _b === void 0 ? "dark" : _b, subtitle = props.subtitle, title = props.title, _c = props.width, width = _c === void 0 ? "default" : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper$1 : _d, textAlign = props.textAlign, componentSlot = props.componentSlot, rest = __rest(props, ["arrowOffset", "classes", "hasInvertedStyle", "inverted", "sdsStyle", "subtitle", "title", "width", "PopperComponent", "textAlign", "componentSlot"]);
|
|
5966
5979
|
var children = rest.children;
|
|
5967
5980
|
if (inverted || sdsStyle) {
|
|
5968
5981
|
showWarningIfFirstOccurence(SDSWarningTypes.TooltipInvertStyle);
|
|
@@ -5976,6 +5989,7 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
|
|
|
5976
5989
|
arrowOffset: arrowOffset,
|
|
5977
5990
|
classes: classes,
|
|
5978
5991
|
hasInvertedStyle: invertStyleValue(inverted, sdsStyle, hasInvertedStyle),
|
|
5992
|
+
textAlign: textAlign,
|
|
5979
5993
|
theme: theme,
|
|
5980
5994
|
width: width,
|
|
5981
5995
|
/* stylelint-enable property-no-unknown -- false positive */
|
|
@@ -5994,7 +6008,7 @@ var Tooltip = forwardRef(function Tooltip(props, ref) {
|
|
|
5994
6008
|
// a tooltip. this matches with the native MUI behavior.
|
|
5995
6009
|
if (!title && !subtitle)
|
|
5996
6010
|
return jsx(Fragment, { children: children });
|
|
5997
|
-
var content = (jsxs(Fragment, { children: [title, subtitle && (jsx(
|
|
6011
|
+
var content = (jsxs(Fragment, { children: [title && (jsx(StyledTitle, { hasInvertedStyle: hasInvertedStyle, children: title })), subtitle && (jsx(StyledSubtitle, { hasInvertedStyle: hasInvertedStyle, children: subtitle })), componentSlot && (jsx(StyledComponentSlotWrapper, { children: componentSlot }))] }));
|
|
5998
6012
|
var leaveDelay = hasInvertedStyle || inverted || sdsStyle === "dark" ? 0 : 500;
|
|
5999
6013
|
return (jsx(Tooltip$1, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
|
|
6000
6014
|
// (masoudmanson): Setting tabIndex to 0 makes the tooltip component
|
|
@@ -15472,7 +15486,7 @@ var StyledDrawer = styled$2(Drawer, {
|
|
|
15472
15486
|
});
|
|
15473
15487
|
var StyledHeaderComponent = styled$2("div")(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
15474
15488
|
var spaces = getSpaces(props);
|
|
15475
|
-
return css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "], ["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
15489
|
+
return css(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "], ["\n margin-bottom: ", "px;\n display: flex;\n justify-content: space-between;\n align-items: start;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xl);
|
|
15476
15490
|
});
|
|
15477
15491
|
var templateObject_1$b, templateObject_2$5, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6;
|
|
15478
15492
|
|