@czi-sds/components 22.6.0 → 22.8.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 +6 -2
- package/dist/index.cjs.js +48 -34
- package/dist/index.esm.d.ts +6 -2
- package/dist/index.esm.js +48 -34
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
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
|
|
@@ -6368,7 +6382,7 @@ var StyledPaper$1 = styled$2(Paper, {
|
|
|
6368
6382
|
var borders = getBorders(props);
|
|
6369
6383
|
var shadows = getShadows(props);
|
|
6370
6384
|
var semanticColors = getSemanticColors(props);
|
|
6371
|
-
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0
|
|
6385
|
+
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n background-color: ").concat((_a = semanticColors === null || semanticColors === void 0 ? void 0 : semanticColors.base) === null || _a === void 0 ? void 0 : _a.surface, ";\n background-image: none;\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0;\n }\n ");
|
|
6372
6386
|
});
|
|
6373
6387
|
var StyledDropdownMenuHeader = styled$2("div")(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6374
6388
|
var search = props.search;
|
|
@@ -6386,7 +6400,7 @@ var DEFAULT_POPPER_BASE_PROPS = {
|
|
|
6386
6400
|
var DropdownMenu = function (props) {
|
|
6387
6401
|
var _a, _b;
|
|
6388
6402
|
var theme = useTheme$4();
|
|
6389
|
-
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search =
|
|
6403
|
+
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.isSearchAutoFocus, isSearchAutoFocus = _h === void 0 ? true : _h, _j = props.search, search = _j === void 0 ? false : _j, title = props.title, headerComponentSlot = props.headerComponentSlot, _k = props.label, label = _k === void 0 ? "Search" : _k, children = props.children, options = props.options, _l = props.onClickAway, onClickAway = _l === void 0 ? noop : _l, ClickAwayListenerProps = props.ClickAwayListenerProps, _m = props.width, width = _m === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _m, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "isSearchAutoFocus", "search", "title", "headerComponentSlot", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
6390
6404
|
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
6391
6405
|
// (masoudmanson): The DropdownMenu's Popper component should have a minimum
|
|
6392
6406
|
// width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
|
|
@@ -6396,8 +6410,8 @@ var DropdownMenu = function (props) {
|
|
|
6396
6410
|
return __assign({ minWidth: MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, width: isMultiColumn ? "auto" : width }, PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx);
|
|
6397
6411
|
}, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
|
|
6398
6412
|
var DefaultInputBaseProps = useMemo(function () {
|
|
6399
|
-
return __assign(__assign({}, InputBaseProps), { autoFocus:
|
|
6400
|
-
}, [InputBaseProps]);
|
|
6413
|
+
return __assign(__assign({}, InputBaseProps), { autoFocus: isSearchAutoFocus, onClick: noop });
|
|
6414
|
+
}, [InputBaseProps, isSearchAutoFocus]);
|
|
6401
6415
|
return (jsx(PopperComponent, __assign({ id: id, modifiers: [
|
|
6402
6416
|
{
|
|
6403
6417
|
name: "offset",
|
|
@@ -7392,29 +7406,29 @@ var templateObject_1$A, templateObject_2$n;
|
|
|
7392
7406
|
|
|
7393
7407
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
7394
7408
|
var Dropdown = function (props) {
|
|
7395
|
-
var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.buttonPosition, buttonPosition =
|
|
7409
|
+
var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.isSearchAutoFocus, isSearchAutoFocus = _d === void 0 ? true : _d, _e = props.buttonPosition, buttonPosition = _e === void 0 ? "right" : _e, _f = props.buttons, buttons = _f === void 0 ? false : _f,
|
|
7396
7410
|
// By default, most dropdowns will close when the user clicks outside the dropdown.
|
|
7397
7411
|
// The exception is the multiple select variant with Apply/Cancel buttons,
|
|
7398
7412
|
// which by default will not close on blur. If closeOnBlur is enabled, clicking out
|
|
7399
7413
|
// is equivalent to clicking the Cancel button, closing the dropdown and losing
|
|
7400
7414
|
// unapplied changes.
|
|
7401
|
-
|
|
7415
|
+
_g = props.closeOnBlur,
|
|
7402
7416
|
// By default, most dropdowns will close when the user clicks outside the dropdown.
|
|
7403
7417
|
// The exception is the multiple select variant with Apply/Cancel buttons,
|
|
7404
7418
|
// which by default will not close on blur. If closeOnBlur is enabled, clicking out
|
|
7405
7419
|
// is equivalent to clicking the Cancel button, closing the dropdown and losing
|
|
7406
7420
|
// unapplied changes.
|
|
7407
|
-
closeOnBlur =
|
|
7421
|
+
closeOnBlur = _g === void 0 ? !buttons : _g, onClose = props.onClose, onChange = props.onChange, _h = props.DropdownMenuProps, DropdownMenuProps = _h === void 0 ? {} : _h, _j = props.InputDropdownProps, InputDropdownProps = _j === void 0 ? { sdsStyle: "minimal" } : _j, _k = props.InputDropdownComponent, InputDropdownComponent = _k === void 0 ? InputDropdown : _k, _l = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _l === void 0 ? false : _l, _m = props.disabled, disabled = _m === void 0 ? false : _m, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "isSearchAutoFocus", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
|
|
7408
7422
|
if (buttons && !multiple) {
|
|
7409
7423
|
// eslint-disable-next-line no-console
|
|
7410
7424
|
console.warn("Warning: buttons are only supported for multiple select dropdowns.");
|
|
7411
7425
|
}
|
|
7412
7426
|
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
7413
7427
|
var isControlled = propValue !== undefined;
|
|
7414
|
-
var
|
|
7415
|
-
var
|
|
7416
|
-
var
|
|
7417
|
-
var
|
|
7428
|
+
var _o = useState(null), anchorEl = _o[0], setAnchorEl = _o[1];
|
|
7429
|
+
var _p = useState(false), open = _p[0], setOpen = _p[1];
|
|
7430
|
+
var _q = useState(getInitialValue()), value = _q[0], setValue = _q[1];
|
|
7431
|
+
var _r = useState(getInitialValue()), pendingValue = _r[0], setPendingValue = _r[1];
|
|
7418
7432
|
var shouldShowButtons = buttons && !isTriggerChangeOnOptionClick && multiple;
|
|
7419
7433
|
useEffect(function () {
|
|
7420
7434
|
if (isControlled) {
|
|
@@ -7424,7 +7438,7 @@ var Dropdown = function (props) {
|
|
|
7424
7438
|
}
|
|
7425
7439
|
}
|
|
7426
7440
|
}, [isControlled, propValue, multiple]);
|
|
7427
|
-
return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
|
|
7441
|
+
return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick }, InputDropdownProps, rest)), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value, isSearchAutoFocus: isSearchAutoFocus }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
|
|
7428
7442
|
function getInitialValue() {
|
|
7429
7443
|
return multiple
|
|
7430
7444
|
? []
|
|
@@ -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
|
|