@czi-sds/components 20.0.1 → 20.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +130 -56
- package/dist/index.cjs.js +450 -247
- package/dist/index.esm.d.ts +130 -56
- package/dist/index.esm.js +450 -249
- package/dist/tailwind.json +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +5 -3
- package/dist/variables.scss +5 -3
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -469,14 +469,14 @@ var SDSAppTheme = {
|
|
|
469
469
|
// override every theme property that makes use of colors.
|
|
470
470
|
SDSAppTheme.borders = {
|
|
471
471
|
accent: {
|
|
472
|
-
dashed: "
|
|
472
|
+
dashed: "1px dashed ".concat(SDSAppTheme.colors.blue[400]),
|
|
473
473
|
default: "1px solid ".concat(SDSAppTheme.colors.blue[400]),
|
|
474
474
|
disabled: "1px solid ".concat(SDSAppTheme.colors.blue[300]),
|
|
475
475
|
hover: "1px solid ".concat(SDSAppTheme.colors.blue[500]),
|
|
476
476
|
},
|
|
477
477
|
base: {
|
|
478
478
|
black: "1px solid ".concat(SDSAppTheme.colors.common.black),
|
|
479
|
-
dashed: "
|
|
479
|
+
dashed: "1px dashed ".concat(SDSAppTheme.colors.gray[400]),
|
|
480
480
|
default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
|
|
481
481
|
disabled: "1px solid ".concat(SDSAppTheme.colors.gray[300]),
|
|
482
482
|
divider: "1px solid ".concat(SDSAppTheme.colors.gray[200]),
|
|
@@ -496,6 +496,9 @@ SDSAppTheme.borders = {
|
|
|
496
496
|
negative: {
|
|
497
497
|
default: "1px solid ".concat(SDSAppTheme.colors.red[400]),
|
|
498
498
|
},
|
|
499
|
+
neutral: {
|
|
500
|
+
default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
|
|
501
|
+
},
|
|
499
502
|
none: "none",
|
|
500
503
|
notice: {
|
|
501
504
|
default: "1px solid ".concat(SDSAppTheme.colors.yellow[400]),
|
|
@@ -690,6 +693,7 @@ function makeThemeOptions(appTheme) {
|
|
|
690
693
|
beta: appTheme.colors.purple[600],
|
|
691
694
|
info: appTheme.colors.blue[600],
|
|
692
695
|
negative: appTheme.colors.red[600],
|
|
696
|
+
neutral: appTheme.colors.gray[600],
|
|
693
697
|
notice: appTheme.colors.yellow[600],
|
|
694
698
|
positive: appTheme.colors.green[600],
|
|
695
699
|
},
|
|
@@ -815,6 +819,10 @@ function makeThemeOptions(appTheme) {
|
|
|
815
819
|
|
|
816
820
|
var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
|
|
817
821
|
var defaultTheme = styles.createTheme(defaultThemeOptions);
|
|
822
|
+
/**
|
|
823
|
+
* (masoudmanson): This is to keep the old defaultAppTheme export for backward compatibility.
|
|
824
|
+
*/
|
|
825
|
+
var defaultAppTheme = defaultTheme;
|
|
818
826
|
|
|
819
827
|
function focusVisibleA11yStyle() {
|
|
820
828
|
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n ";
|
|
@@ -3550,15 +3558,15 @@ function interactive(props) {
|
|
|
3550
3558
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3551
3559
|
return react.css(templateObject_4$m || (templateObject_4$m = __makeTemplateObject(["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n\n &:disabled {\n color: ", ";\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconHover, (_c = colors === null || colors === void 0 ? void 0 : colors[iconColor]) === null || _c === void 0 ? void 0 : _c[shade], (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled);
|
|
3552
3560
|
}
|
|
3553
|
-
var doNotForwardProps$
|
|
3561
|
+
var doNotForwardProps$q = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
|
|
3554
3562
|
var StyledSvgIcon = styles.styled(material.SvgIcon, {
|
|
3555
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3563
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
3556
3564
|
})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3557
3565
|
var sdsType = props.sdsType;
|
|
3558
3566
|
return react.css(templateObject_5$g || (templateObject_5$g = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n "])), sdsType !== "iconButton" && iconSize(props), sdsType === "static" && staticStyle(props), sdsType === "interactive" && interactive(props), sdsType === "button" && buttonStyle());
|
|
3559
3567
|
});
|
|
3560
|
-
var StyledIcon = styles.styled("div")(templateObject_7$
|
|
3561
|
-
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$g, templateObject_6$c, templateObject_7$
|
|
3568
|
+
var StyledIcon = styles.styled("div")(templateObject_7$a || (templateObject_7$a = __makeTemplateObject(["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"], ["\n /* display: contents causes an element's children to appear as if they were direct children of the element's parent, ignoring the element itself. This can be useful when a wrapper element should be ignored when using CSS grid or similar layout techniques. */\n display: contents;\n"])));
|
|
3569
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$g, templateObject_6$c, templateObject_7$a;
|
|
3562
3570
|
|
|
3563
3571
|
/**
|
|
3564
3572
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -3584,10 +3592,10 @@ var AccordionHeader = function (props) {
|
|
|
3584
3592
|
return (jsxRuntime.jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "static" }), children: [children, subtitle && jsxRuntime.jsx(StyledSubtitle, { children: subtitle })] }));
|
|
3585
3593
|
};
|
|
3586
3594
|
|
|
3587
|
-
var sdsPropNames$
|
|
3595
|
+
var sdsPropNames$3 = ["useDivider", "togglePosition"];
|
|
3588
3596
|
var StyledAccordion = styles.styled(material.Accordion, {
|
|
3589
3597
|
shouldForwardProp: function (prop) {
|
|
3590
|
-
return !sdsPropNames$
|
|
3598
|
+
return !sdsPropNames$3.includes(prop.toString());
|
|
3591
3599
|
},
|
|
3592
3600
|
})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3593
3601
|
var _a, _b;
|
|
@@ -3651,6 +3659,10 @@ var templateObject_1$P;
|
|
|
3651
3659
|
|
|
3652
3660
|
/**
|
|
3653
3661
|
* @see https://mui.com/material-ui/react-alert/
|
|
3662
|
+
*
|
|
3663
|
+
* @deprecated
|
|
3664
|
+
* This component is deprecated and will be removed in the next major version.
|
|
3665
|
+
* Please use `Callout` or `Notification` instead.
|
|
3654
3666
|
*/
|
|
3655
3667
|
var Alert$1 = function (props) {
|
|
3656
3668
|
return jsxRuntime.jsx(StyledAlert, __assign({}, props));
|
|
@@ -3661,23 +3673,42 @@ var toKebabCase = function (str) {
|
|
|
3661
3673
|
return str.replace(/[\s_]+/g, "-").toLowerCase();
|
|
3662
3674
|
};
|
|
3663
3675
|
var EMPTY_OBJECT = {};
|
|
3676
|
+
function filterProps(props, excludeProps) {
|
|
3677
|
+
var result = {};
|
|
3678
|
+
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
|
|
3679
|
+
var key = _a[_i];
|
|
3680
|
+
if (!excludeProps.includes(key)) {
|
|
3681
|
+
result[key] = props[key];
|
|
3682
|
+
}
|
|
3683
|
+
}
|
|
3684
|
+
return result;
|
|
3685
|
+
}
|
|
3664
3686
|
|
|
3665
3687
|
var _a;
|
|
3666
3688
|
var SDSWarningTypes;
|
|
3667
3689
|
(function (SDSWarningTypes) {
|
|
3690
|
+
SDSWarningTypes["ButtonMinimalIsAllCaps"] = "buttonMinimalIsAllCaps";
|
|
3668
3691
|
SDSWarningTypes["ButtonMissingSDSProps"] = "buttonMissingProps";
|
|
3692
|
+
SDSWarningTypes["ButtonIconMissingIconProp"] = "buttonIconMissingIconProp";
|
|
3669
3693
|
SDSWarningTypes["ChipDeprecated"] = "chipDeprecated";
|
|
3670
3694
|
SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
|
|
3671
|
-
SDSWarningTypes["ButtonIconMediumSize"] = "buttonIconMediumSize";
|
|
3672
3695
|
SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
|
|
3673
3696
|
SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
|
|
3674
3697
|
SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
|
|
3675
3698
|
})(SDSWarningTypes || (SDSWarningTypes = {}));
|
|
3676
3699
|
var SDS_WARNINGS = (_a = {},
|
|
3700
|
+
_a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
|
|
3701
|
+
hasWarned: false,
|
|
3702
|
+
message: "Warning: isAllCaps is only applied to buttons with sdsStyle='minimal'.",
|
|
3703
|
+
},
|
|
3677
3704
|
_a[SDSWarningTypes.ButtonMissingSDSProps] = {
|
|
3678
3705
|
hasWarned: false,
|
|
3679
3706
|
message: "Warning: Buttons without sdsStyle or sdsType props will be deprecated.",
|
|
3680
3707
|
},
|
|
3708
|
+
_a[SDSWarningTypes.ButtonIconMissingIconProp] = {
|
|
3709
|
+
hasWarned: false,
|
|
3710
|
+
message: "Warning: Buttons with an SDS type of icon require an icon prop to be provided.",
|
|
3711
|
+
},
|
|
3681
3712
|
_a[SDSWarningTypes.ChipDeprecated] = {
|
|
3682
3713
|
hasWarned: false,
|
|
3683
3714
|
message: "Warning: <Chip /> will be deprecated and replaced with <Tag />",
|
|
@@ -3686,10 +3717,6 @@ var SDS_WARNINGS = (_a = {},
|
|
|
3686
3717
|
hasWarned: false,
|
|
3687
3718
|
message: "Warning: MenuSelect will be deprecated and replaced with <DropdownMenu />",
|
|
3688
3719
|
},
|
|
3689
|
-
_a[SDSWarningTypes.ButtonIconMediumSize] = {
|
|
3690
|
-
hasWarned: false,
|
|
3691
|
-
message: "Warning: A medium size ButtonIcon can only be of type tertiary!",
|
|
3692
|
-
},
|
|
3693
3720
|
_a[SDSWarningTypes.TooltipSubtitle] = {
|
|
3694
3721
|
hasWarned: false,
|
|
3695
3722
|
message: "Warning: The 'subtitle' text is only available for dark tooltips!",
|
|
@@ -3719,46 +3746,128 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
3719
3746
|
SDS_WARNINGS[warningType].hasWarned = true;
|
|
3720
3747
|
};
|
|
3721
3748
|
|
|
3722
|
-
var
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
|
|
3726
|
-
|
|
3749
|
+
var doNotForwardProps$p = [
|
|
3750
|
+
"isAllCaps",
|
|
3751
|
+
"isRounded",
|
|
3752
|
+
"sdsStyle",
|
|
3753
|
+
"sdsType",
|
|
3754
|
+
"sdsSize",
|
|
3755
|
+
];
|
|
3756
|
+
// Rounded + Square Button Styles
|
|
3757
|
+
var ButtonStyles = function (props) {
|
|
3758
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
3759
|
+
var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
|
|
3760
|
+
var spaces = getSpaces(props);
|
|
3761
|
+
var shadows = getShadows(props);
|
|
3762
|
+
var iconSizes = getIconSizes(props);
|
|
3763
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3764
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3765
|
+
var hasIcon = !!startIcon || !!endIcon;
|
|
3766
|
+
// (masoudmanson): The padding depends on the presence of an icon.
|
|
3767
|
+
// If the component has either a startIcon or endIcon, the padding will be spaces?.m pixels.
|
|
3768
|
+
// If the component doesn't have any icon at all, the padding will be spaces?.l pixels.
|
|
3769
|
+
var padding = hasIcon
|
|
3770
|
+
? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
|
|
3771
|
+
: "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
|
|
3772
|
+
var contentColor = variant === "outlined"
|
|
3773
|
+
? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default
|
|
3774
|
+
: (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
|
|
3775
|
+
return react.css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n padding: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.border, padding, contentColor, contentColor, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.onFill, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fill, (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.onFill, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _j === void 0 ? void 0 : _j.fillPressed, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.fillPressed, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _l === void 0 ? void 0 : _l.fill, (_m = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _m === void 0 ? void 0 : _m.onFillDisabled, (_o = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _o === void 0 ? void 0 : _o.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_p = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _p === void 0 ? void 0 : _p.onFillDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_q = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _q === void 0 ? void 0 : _q.width, (_r = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _r === void 0 ? void 0 : _r.width, (_s = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _s === void 0 ? void 0 : _s.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
3727
3776
|
};
|
|
3728
|
-
var
|
|
3777
|
+
var Rounded = function (props) {
|
|
3778
|
+
var corners = getCorners(props);
|
|
3779
|
+
return react.css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n border-radius: ", "px;\n "], ["\n border-radius: ", "px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
3780
|
+
};
|
|
3781
|
+
var DestructiveButton = function (props) {
|
|
3782
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
3783
|
+
var variant = props.variant;
|
|
3784
|
+
var shadows = getShadows(props);
|
|
3785
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3786
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3787
|
+
var contentColor = variant === "outlined"
|
|
3788
|
+
? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.icon
|
|
3789
|
+
: (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
|
|
3790
|
+
var backgroundColor = variant === "outlined"
|
|
3791
|
+
? "transparent"
|
|
3792
|
+
: (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.fill;
|
|
3793
|
+
return react.css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n border: none;\n box-shadow: inset 0 0 0 1px ", ";\n color: ", ";\n background-color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: inset 0 0 0 1px\n ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:disabled {\n color: ", ";\n background-color: ", ";\n border: none;\n box-shadow: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _d === void 0 ? void 0 : _d.border, contentColor, backgroundColor, contentColor, (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.onFill, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _g === void 0 ? void 0 : _g.fillHover, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.fill, (_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.onFill, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _k === void 0 ? void 0 : _k.fillPressed, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _l === void 0 ? void 0 : _l.fillPressed, (_m = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _m === void 0 ? void 0 : _m.fill, (_o = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _o === void 0 ? void 0 : _o.onFillDisabled, (_p = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _p === void 0 ? void 0 : _p.fillDisabled, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_q = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _q === void 0 ? void 0 : _q.onFillDisabled);
|
|
3794
|
+
};
|
|
3795
|
+
var StyledButton$3 = styles.styled(material.Button, {
|
|
3796
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
3797
|
+
})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodySemiboldXs, focusVisibleA11yStyle, function (props) {
|
|
3798
|
+
var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
|
|
3799
|
+
return react.css(templateObject_4$l || (templateObject_4$l = __makeTemplateObject(["\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n "])), ButtonStyles(props), sdsStyle === "rounded" && Rounded(props), sdsType === "destructive" && DestructiveButton(props));
|
|
3800
|
+
});
|
|
3801
|
+
// Minimal Button Styles
|
|
3802
|
+
var Minimal = function (props) {
|
|
3803
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
3804
|
+
var spaces = getSpaces(props);
|
|
3805
|
+
var iconSizes = getIconSizes(props);
|
|
3806
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3807
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3808
|
+
return react.css(templateObject_6$b || (templateObject_6$b = __makeTemplateObject(["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px 0;\n\n &:hover,\n &:focus-visible {\n background-color: transparent;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n min-width: unset;\n padding: ", "px 0;\n\n &:hover,\n &:focus-visible {\n background-color: transparent;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:active {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n &:disabled {\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n .", ", .", " {\n height: ", "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ", "px;\n max-height: ", "px;\n }\n }\n\n .", " {\n margin-right: ", "px;\n margin-left: 0;\n }\n\n .", " {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), focusVisibleA11yStyle(), fontCapsXxxs(props), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fillHover, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fillHover, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fillPressed, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillPressed, (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.onFillDisabled, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.onFillDisabled, material.buttonClasses.startIcon, material.buttonClasses.endIcon, (_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _g === void 0 ? void 0 : _g.width, (_h = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _h === void 0 ? void 0 : _h.width, (_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _j === void 0 ? void 0 : _j.width, material.buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
3809
|
+
};
|
|
3810
|
+
var PrimaryMinimalButton = function (props) {
|
|
3729
3811
|
var _a;
|
|
3730
|
-
var
|
|
3731
|
-
return react.css(
|
|
3812
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3813
|
+
return react.css(templateObject_7$9 || (templateObject_7$9 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default);
|
|
3814
|
+
};
|
|
3815
|
+
var SecondaryMinimalButton = function (props) {
|
|
3816
|
+
var _a;
|
|
3817
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3818
|
+
return react.css(templateObject_8$8 || (templateObject_8$8 = __makeTemplateObject(["\n ", "\n color: ", ";\n "], ["\n ", "\n color: ", ";\n "])), Minimal(props), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary);
|
|
3819
|
+
};
|
|
3820
|
+
var StyledMinimalButton = styles.styled(material.Button, {
|
|
3821
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
3822
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3823
|
+
var sdsType = props.sdsType;
|
|
3824
|
+
return react.css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
3825
|
+
});
|
|
3826
|
+
var StyledButtonLegacy = styles.styled(material.Button, {
|
|
3827
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
3828
|
+
})(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
3829
|
+
if (!props.isRounded)
|
|
3830
|
+
return "";
|
|
3831
|
+
var corners = getCorners(props);
|
|
3832
|
+
var spaces = getSpaces(props);
|
|
3833
|
+
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 ");
|
|
3834
|
+
});
|
|
3835
|
+
var templateObject_1$O, templateObject_2$w, templateObject_3$o, templateObject_4$l, templateObject_5$f, templateObject_6$b, templateObject_7$9, templateObject_8$8, templateObject_9$4, templateObject_10$2, templateObject_11$1;
|
|
3836
|
+
|
|
3837
|
+
var isDisabled$1 = function (props) {
|
|
3838
|
+
var _a, _b;
|
|
3839
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3840
|
+
return react.css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillDisabled, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillDisabled);
|
|
3732
3841
|
};
|
|
3733
3842
|
var primary$2 = function (props) {
|
|
3734
|
-
var
|
|
3735
|
-
var
|
|
3736
|
-
return react.css(
|
|
3843
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
3844
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3845
|
+
return react.css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fill, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _h === void 0 ? void 0 : _h.fillPressed);
|
|
3737
3846
|
};
|
|
3738
3847
|
var secondary$2 = function (props) {
|
|
3739
|
-
var
|
|
3740
|
-
|
|
3848
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
3849
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3850
|
+
return react.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: ", ";\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.fillHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillHover, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.fillPressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _h === void 0 ? void 0 : _h.fillPressed);
|
|
3741
3851
|
};
|
|
3742
3852
|
var tertiary = function (props) {
|
|
3743
|
-
var
|
|
3744
|
-
|
|
3853
|
+
var _a, _b, _c, _d, _e, _f;
|
|
3854
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3855
|
+
return react.css(templateObject_4$k || (templateObject_4$k = __makeTemplateObject(["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "], ["\n color: ", ";\n\n svg {\n color: ", ";\n }\n\n &:hover {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n\n &:active {\n background: none;\n color: ", ";\n\n svg {\n color: ", ";\n }\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.iconHover, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconHover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconPressed, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconPressed);
|
|
3745
3856
|
};
|
|
3746
3857
|
var small$1 = function (props) {
|
|
3858
|
+
var sdsType = props.sdsType;
|
|
3747
3859
|
var iconSizes = getIconSizes(props);
|
|
3748
|
-
return react.css(
|
|
3860
|
+
return react.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: 7px;" : "");
|
|
3749
3861
|
};
|
|
3750
3862
|
var medium$1 = function (props) {
|
|
3751
3863
|
var sdsType = props.sdsType;
|
|
3752
3864
|
var iconSizes = getIconSizes(props);
|
|
3753
|
-
|
|
3754
|
-
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMediumSize);
|
|
3755
|
-
}
|
|
3756
|
-
return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n &:hover {\n background: none;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n }\n "], ["\n &:hover {\n background: none;\n }\n\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width);
|
|
3865
|
+
return react.css(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: 7px;" : "");
|
|
3757
3866
|
};
|
|
3758
3867
|
var large = function (props) {
|
|
3759
3868
|
var sdsType = props.sdsType;
|
|
3760
3869
|
var iconSizes = getIconSizes(props);
|
|
3761
|
-
return react.css(
|
|
3870
|
+
return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: 5px;" : "");
|
|
3762
3871
|
};
|
|
3763
3872
|
var doNotForwardProps$o = [
|
|
3764
3873
|
"on",
|
|
@@ -3767,13 +3876,13 @@ var doNotForwardProps$o = [
|
|
|
3767
3876
|
"sdsIcon",
|
|
3768
3877
|
"sdsIconProps",
|
|
3769
3878
|
];
|
|
3770
|
-
var StyledButtonIcon
|
|
3879
|
+
var StyledButtonIcon = styles.styled(material.IconButton, {
|
|
3771
3880
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
3772
|
-
})(
|
|
3773
|
-
var
|
|
3774
|
-
return react.css(
|
|
3881
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
3882
|
+
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
3883
|
+
return react.css(templateObject_8$7 || (templateObject_8$7 = __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));
|
|
3775
3884
|
});
|
|
3776
|
-
var templateObject_1$
|
|
3885
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$n, templateObject_4$k, templateObject_5$e, templateObject_6$a, templateObject_7$8, templateObject_8$7, templateObject_9$3;
|
|
3777
3886
|
|
|
3778
3887
|
var ButtonIconSizeToSdsIconSize = {
|
|
3779
3888
|
large: "xl",
|
|
@@ -3782,6 +3891,10 @@ var ButtonIconSizeToSdsIconSize = {
|
|
|
3782
3891
|
};
|
|
3783
3892
|
/**
|
|
3784
3893
|
* @see https://mui.com/material-ui/react-button/#icon-buttons
|
|
3894
|
+
*
|
|
3895
|
+
* @deprecated
|
|
3896
|
+
* This component is deprecated and will be removed in the next major version.
|
|
3897
|
+
* Please use `Button` or `ButtonDropdown` with `sdsStyle: icon` instead.
|
|
3785
3898
|
*/
|
|
3786
3899
|
var ButtonIcon = React.forwardRef(function ButtonIcon(props, ref) {
|
|
3787
3900
|
/**
|
|
@@ -3806,25 +3919,77 @@ var ButtonIcon = React.forwardRef(function ButtonIcon(props, ref) {
|
|
|
3806
3919
|
}
|
|
3807
3920
|
}
|
|
3808
3921
|
};
|
|
3809
|
-
return (jsxRuntime.jsx(StyledButtonIcon
|
|
3922
|
+
return (jsxRuntime.jsx(StyledButtonIcon, __assign({}, props, { ref: ref, children: iconItem() })));
|
|
3923
|
+
});
|
|
3924
|
+
|
|
3925
|
+
/**
|
|
3926
|
+
* (masoudmanson): The MUI variant prop is determined by the sdsType prop.
|
|
3927
|
+
*/
|
|
3928
|
+
var MUI_VARIANT_MAP = {
|
|
3929
|
+
destructive: "contained",
|
|
3930
|
+
primary: "contained",
|
|
3931
|
+
secondary: "outlined",
|
|
3932
|
+
tertiary: "text",
|
|
3933
|
+
};
|
|
3934
|
+
/**
|
|
3935
|
+
* @see https://mui.com/material-ui/react-button/
|
|
3936
|
+
*/
|
|
3937
|
+
var Button = React.forwardRef(function (props, ref) {
|
|
3938
|
+
var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
|
|
3939
|
+
if (!sdsStyle || !sdsType) {
|
|
3940
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
|
|
3941
|
+
}
|
|
3942
|
+
if (typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" && sdsStyle !== "minimal") {
|
|
3943
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonMinimalIsAllCaps);
|
|
3944
|
+
}
|
|
3945
|
+
// isAllCaps is only used for the Minimal Button. It defaults to true.
|
|
3946
|
+
var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" ? props === null || props === void 0 ? void 0 : props.isAllCaps : true;
|
|
3947
|
+
var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
|
|
3948
|
+
switch (true) {
|
|
3949
|
+
case sdsStyle === "icon":
|
|
3950
|
+
if ((props === null || props === void 0 ? void 0 : props.icon) !== undefined) {
|
|
3951
|
+
// (masoudmanson): We need to remove the props that are not supported by
|
|
3952
|
+
// the ButtonIcon component.
|
|
3953
|
+
var excludedProps = [
|
|
3954
|
+
"startIcon",
|
|
3955
|
+
"endIcon",
|
|
3956
|
+
"sdsStyle",
|
|
3957
|
+
"isAllCaps",
|
|
3958
|
+
"sdsType",
|
|
3959
|
+
];
|
|
3960
|
+
var finalProps = filterProps(propsWithDefault, excludedProps);
|
|
3961
|
+
return (jsxRuntime.jsx(ButtonIcon, __assign({ icon: props === null || props === void 0 ? void 0 : props.icon }, finalProps, { sdsType: sdsType, ref: ref })));
|
|
3962
|
+
}
|
|
3963
|
+
else {
|
|
3964
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
3965
|
+
return null;
|
|
3966
|
+
}
|
|
3967
|
+
case sdsStyle === "minimal":
|
|
3968
|
+
return (jsxRuntime.jsx(StyledMinimalButton, __assign({ color: "primary", variant: "text" }, propsWithDefault, { ref: ref })));
|
|
3969
|
+
case sdsStyle === "rounded":
|
|
3970
|
+
case sdsStyle === "square":
|
|
3971
|
+
return (jsxRuntime.jsx(StyledButton$3, __assign({ color: "primary", variant: sdsType ? MUI_VARIANT_MAP[sdsType] : "text" }, propsWithDefault, { ref: ref })));
|
|
3972
|
+
default:
|
|
3973
|
+
return jsxRuntime.jsx(StyledButtonLegacy, __assign({}, propsWithDefault, { ref: ref }));
|
|
3974
|
+
}
|
|
3810
3975
|
});
|
|
3811
3976
|
|
|
3812
|
-
var sdsPropNames$
|
|
3977
|
+
var sdsPropNames$2 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
|
|
3813
3978
|
var rounded$3 = function (props) {
|
|
3814
3979
|
var _a;
|
|
3815
3980
|
var corners = getCorners(props);
|
|
3816
3981
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3817
|
-
return react.css(templateObject_1$
|
|
3982
|
+
return react.css(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "], ["\n .", " {\n border-radius: ", "px;\n\n .", " {\n border-radius: ", "px;\n border: 1px solid ", ";\n }\n }\n "])), material.outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border);
|
|
3818
3983
|
};
|
|
3819
3984
|
var error$3 = function (props) {
|
|
3820
3985
|
var _a, _b, _c, _d;
|
|
3821
3986
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3822
|
-
return react.css(templateObject_2$
|
|
3987
|
+
return react.css(templateObject_2$u || (templateObject_2$u = __makeTemplateObject(["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _b === void 0 ? void 0 : _b.border, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
|
|
3823
3988
|
};
|
|
3824
3989
|
var warning$3 = function (props) {
|
|
3825
3990
|
var _a, _b, _c, _d;
|
|
3826
3991
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3827
|
-
return react.css(templateObject_3$
|
|
3992
|
+
return react.css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _a === void 0 ? void 0 : _a.border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _c === void 0 ? void 0 : _c.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
|
|
3828
3993
|
};
|
|
3829
3994
|
var userInput$2 = function (props) {
|
|
3830
3995
|
var _a, _b, _c, _d, _e;
|
|
@@ -3838,21 +4003,21 @@ var userInput$2 = function (props) {
|
|
|
3838
4003
|
var color = intent === "default"
|
|
3839
4004
|
? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.icon
|
|
3840
4005
|
: (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon;
|
|
3841
|
-
return react.css(templateObject_4$
|
|
4006
|
+
return react.css(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "], ["\n .", " .", " {\n border: 1px solid ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "])), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, border, material.inputAdornmentClasses.root, color);
|
|
3842
4007
|
};
|
|
3843
4008
|
var disabledStyled$2 = function (props) {
|
|
3844
4009
|
var _a, _b, _c;
|
|
3845
4010
|
var colors = getColors(props);
|
|
3846
4011
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3847
|
-
return react.css(templateObject_5$
|
|
4012
|
+
return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
3848
4013
|
};
|
|
3849
|
-
var StyledLabel$2 = styles.styled("label")(templateObject_6$
|
|
4014
|
+
var StyledLabel$2 = styles.styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
3850
4015
|
var spaces = getSpaces(props);
|
|
3851
4016
|
return "\n margin-bottom: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n position: absolute;\n overflow: hidden;\n clip: rect(0 0 0 0);\n height: 1px;\n width: 1px;\n margin: -1px; \n padding: 0; \n border: 0;\n ");
|
|
3852
4017
|
});
|
|
3853
4018
|
var StyledSearchBase = styles.styled(material.TextField, {
|
|
3854
4019
|
shouldForwardProp: function (prop) {
|
|
3855
|
-
return !sdsPropNames$
|
|
4020
|
+
return !sdsPropNames$2.includes(prop.toString());
|
|
3856
4021
|
},
|
|
3857
4022
|
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3858
4023
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
@@ -3863,9 +4028,9 @@ var StyledSearchBase = styles.styled(material.TextField, {
|
|
|
3863
4028
|
return react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surface, material.outlinedInputClasses.notchedOutline, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, value ? 1 : 0, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.surface, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
|
|
3864
4029
|
});
|
|
3865
4030
|
var StyledInputAdornment = styles.styled(material.InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
3866
|
-
var templateObject_1$
|
|
4031
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$2;
|
|
3867
4032
|
|
|
3868
|
-
var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$
|
|
4033
|
+
var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3869
4034
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
3870
4035
|
var selected = props.selected;
|
|
3871
4036
|
var colors = getColors(props);
|
|
@@ -3875,7 +4040,7 @@ var StyledMenuItem$1 = styles.styled(material.MenuItem)(templateObject_1$M || (t
|
|
|
3875
4040
|
var primary = colors === null || colors === void 0 ? void 0 : colors.blue[400];
|
|
3876
4041
|
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px !important;\n min-height: unset;\n opacity: 1;\n\n &.MuiAutocomplete-option {\n min-height: unset;\n }\n \n .primary-text {\n font-weight: ").concat(selected ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n }\n\n &.MuiButtonBase-root {\n background-color: transparent;\n opacity: 1;\n\n &:hover, &.").concat(material.menuItemClasses.focusVisible, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n }\n }\n }\n\n &.").concat(material.menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(material.menuItemClasses.root, " .").concat(material.menuItemClasses.disabled, " {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? primary : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon, ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.fillHover, ";\n svg.check-icon {\n color: ").concat(selected ? primary : (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.icon, ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: white;\n &:hover {\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, ";\n }\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n\n &:active {\n svg.check-icon {\n color: ").concat(primary, ";\n }\n\n &:active {\n svg.check-icon {\n color: ").concat(primary, ";\n }\n\n .primary-text {\n font-weight: ").concat(fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold, ";\n }\n }\n }\n ");
|
|
3877
4042
|
});
|
|
3878
|
-
var ContentWrapper = styles.styled("span")(templateObject_2$
|
|
4043
|
+
var ContentWrapper = styles.styled("span")(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n width: 100%;\n"])));
|
|
3879
4044
|
var disabledStyles = function (props) {
|
|
3880
4045
|
var _a;
|
|
3881
4046
|
var disabled = props.disabled;
|
|
@@ -3884,12 +4049,12 @@ var disabledStyles = function (props) {
|
|
|
3884
4049
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3885
4050
|
return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";\n cursor: default;\n ");
|
|
3886
4051
|
};
|
|
3887
|
-
var TextWrapper = styles.styled("span")(templateObject_3$
|
|
4052
|
+
var TextWrapper = styles.styled("span")(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
3888
4053
|
var _a;
|
|
3889
4054
|
var semanticTextColors = getSemanticTextColors(props);
|
|
3890
4055
|
return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n display: flex;\n white-space: pre-wrap;\n ");
|
|
3891
4056
|
}, disabledStyles);
|
|
3892
|
-
var StyledMenuItemIcon = styles.styled("span")(templateObject_4$
|
|
4057
|
+
var StyledMenuItemIcon = styles.styled("span")(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3893
4058
|
var _a;
|
|
3894
4059
|
var disabled = props.disabled;
|
|
3895
4060
|
var spaces = getSpaces(props);
|
|
@@ -3897,13 +4062,13 @@ var StyledMenuItemIcon = styles.styled("span")(templateObject_4$j || (templateOb
|
|
|
3897
4062
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3898
4063
|
return "\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n\n .MuiSvgIcon-root {\n ").concat(disabled ? "color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled, ";") : null, "\n }\n ");
|
|
3899
4064
|
});
|
|
3900
|
-
var ColumnWrapper = styles.styled("span")(templateObject_5$
|
|
4065
|
+
var ColumnWrapper = styles.styled("span")(templateObject_5$c || (templateObject_5$c = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
3901
4066
|
var _a;
|
|
3902
4067
|
var semanticTextColors = getSemanticTextColors(props);
|
|
3903
4068
|
var spaces = getSpaces(props);
|
|
3904
4069
|
return "\n text-align: right;\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
3905
4070
|
}, disabledStyles);
|
|
3906
|
-
var StyledIconWrapper = styles.styled("span")(templateObject_6$
|
|
4071
|
+
var StyledIconWrapper = styles.styled("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3907
4072
|
var spaces = getSpaces(props);
|
|
3908
4073
|
var iconSizes = getIconSizes(props);
|
|
3909
4074
|
return "\n align-self: start;\n margin-right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n ");
|
|
@@ -3932,7 +4097,7 @@ var StyledMinus = styles.styled(iconsMaterial.Remove, {
|
|
|
3932
4097
|
: (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
|
|
3933
4098
|
return "\n color: ".concat(selected ? selectedColor : "transparent", ";\n padding: 0;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, "px;\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, "px;\n\n &.MuiCheckbox-colorPrimary.Mui-checked:hover {\n background-color: transparent;\n }\n ");
|
|
3934
4099
|
});
|
|
3935
|
-
var templateObject_1$
|
|
4100
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$l, templateObject_4$i, templateObject_5$c, templateObject_6$8, templateObject_7$6, templateObject_8$5;
|
|
3936
4101
|
|
|
3937
4102
|
/**
|
|
3938
4103
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -4025,10 +4190,10 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
4025
4190
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ ref: ref,
|
|
4026
4191
|
// passed to mui Input
|
|
4027
4192
|
InputProps: {
|
|
4028
|
-
endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(
|
|
4193
|
+
endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4029
4194
|
sdsType: "iconButton",
|
|
4030
4195
|
}, icon: "XMarkCircle" }) })),
|
|
4031
|
-
startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(
|
|
4196
|
+
startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4032
4197
|
sdsType: "interactive",
|
|
4033
4198
|
}, icon: "Search" }) })),
|
|
4034
4199
|
}, type: "search", id: id, variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent,
|
|
@@ -4049,7 +4214,7 @@ var doNotForwardProps$n = [
|
|
|
4049
4214
|
];
|
|
4050
4215
|
var StyledAutocompleteBase = styles.styled(material.Autocomplete, {
|
|
4051
4216
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
4052
|
-
})(templateObject_1$
|
|
4217
|
+
})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), material.autocompleteClasses.popper, material.autocompleteClasses.paper, material.autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
|
|
4053
4218
|
var _a, _b, _c, _d, _e;
|
|
4054
4219
|
var search = props.search;
|
|
4055
4220
|
var spaces = getSpaces(props);
|
|
@@ -4060,7 +4225,7 @@ var StyledAutocompleteBase = styles.styled(material.Autocomplete, {
|
|
|
4060
4225
|
});
|
|
4061
4226
|
var InputBaseWrapper$1 = styles.styled("div", {
|
|
4062
4227
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
4063
|
-
})(templateObject_2$
|
|
4228
|
+
})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4064
4229
|
var search = props.search;
|
|
4065
4230
|
if (!search) {
|
|
4066
4231
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -4071,11 +4236,11 @@ var InputBaseWrapper$1 = styles.styled("div", {
|
|
|
4071
4236
|
});
|
|
4072
4237
|
var StyledMenuInputSearch$1 = styles.styled(InputSearch, {
|
|
4073
4238
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
4074
|
-
})(templateObject_3$
|
|
4239
|
+
})(templateObject_3$k || (templateObject_3$k = __makeTemplateObject(["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
4075
4240
|
var search = _a.search;
|
|
4076
4241
|
return (search ? "auto" : "transparent");
|
|
4077
4242
|
});
|
|
4078
|
-
var StyledPaper$3 = styles.styled(material.Paper)(templateObject_4$
|
|
4243
|
+
var StyledPaper$3 = styles.styled(material.Paper)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4079
4244
|
var _a;
|
|
4080
4245
|
var spaces = getSpaces(props);
|
|
4081
4246
|
var corners = getCorners(props);
|
|
@@ -4084,34 +4249,46 @@ var StyledPaper$3 = styles.styled(material.Paper)(templateObject_4$i || (templat
|
|
|
4084
4249
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4085
4250
|
return "\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 background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.m, ";\n box-sizing: border-box;\n ");
|
|
4086
4251
|
});
|
|
4087
|
-
var StyledMenuItemDetails = styles.styled("div")(templateObject_5$
|
|
4252
|
+
var StyledMenuItemDetails = styles.styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4088
4253
|
var _a;
|
|
4089
4254
|
var semanticTextColors = getSemanticTextColors(props);
|
|
4090
4255
|
return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n white-space: pre-wrap;\n ");
|
|
4091
4256
|
});
|
|
4092
|
-
var StyledMenuItemText = styles.styled("div")(templateObject_6$
|
|
4093
|
-
var templateObject_1$
|
|
4257
|
+
var StyledMenuItemText = styles.styled("div")(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
4258
|
+
var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
|
|
4094
4259
|
|
|
4095
4260
|
var AutocompleteBase = function (props) {
|
|
4096
|
-
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q;
|
|
4261
|
+
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose;
|
|
4097
4262
|
var theme = styles.useTheme();
|
|
4098
4263
|
var _r = React.useState(""), inputValue = _r[0], setInputValue = _r[1];
|
|
4099
|
-
return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple
|
|
4100
|
-
|
|
4101
|
-
|
|
4102
|
-
|
|
4103
|
-
|
|
4264
|
+
return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple,
|
|
4265
|
+
/**
|
|
4266
|
+
* (masoudmanson): Overrides the onOpen and onClose handlers to ensure that
|
|
4267
|
+
* the onClick and onClickAway handlers are triggered when a controlled dropdown
|
|
4268
|
+
* is opened or closed, respectively.
|
|
4269
|
+
*/
|
|
4270
|
+
onOpen: defaultOnOpen, onClose: defaultOnClose }, props, {
|
|
4271
|
+
/**
|
|
4272
|
+
* (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
|
|
4273
|
+
* keeps the dropdown open after selecting an option. This feature enhances user experience
|
|
4274
|
+
* by preventing the dropdown from closing, enabling users to select multiple options
|
|
4275
|
+
* without having to reopen the menu repeatedly.
|
|
4276
|
+
*/
|
|
4104
4277
|
blurOnSelect: multiple ? false : blurOnSelect,
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4278
|
+
/**
|
|
4279
|
+
* (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
|
|
4280
|
+
* and clearing the input value on blur, it's crucial to include the onBlur handler
|
|
4281
|
+
* after spreading other props. Furthermore, within the defaultOnBlur function, the
|
|
4282
|
+
* actual onBlur function is invoked for completeness.
|
|
4283
|
+
*/
|
|
4109
4284
|
onBlur: defaultOnBlur,
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
|
|
4285
|
+
/**
|
|
4286
|
+
* (masoudmanson): To ensure component-level actions (changing the input field value)
|
|
4287
|
+
* trigger upon input changes, it's crucial to position the onInputChange handler after
|
|
4288
|
+
* spreading the other props. Furthermore, within the defaultOnInputChange function,
|
|
4289
|
+
* the provided onInputChange from props is called at the end to emit the input changes
|
|
4290
|
+
* to the user.
|
|
4291
|
+
*/
|
|
4115
4292
|
onInputChange: defaultOnInputChange })));
|
|
4116
4293
|
/**
|
|
4117
4294
|
* (masoudmanson): Using a custom Popper or Paper with the Autocomplete
|
|
@@ -4143,9 +4320,9 @@ var AutocompleteBase = function (props) {
|
|
|
4143
4320
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
4144
4321
|
* mobile keyboard
|
|
4145
4322
|
*/
|
|
4146
|
-
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(
|
|
4323
|
+
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4147
4324
|
sdsType: "iconButton",
|
|
4148
|
-
}, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(
|
|
4325
|
+
}, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4149
4326
|
sdsType: "interactive",
|
|
4150
4327
|
}, icon: "Search" }) })) }) }, InputBaseProps)) }));
|
|
4151
4328
|
}
|
|
@@ -4155,6 +4332,24 @@ var AutocompleteBase = function (props) {
|
|
|
4155
4332
|
setInputValue("");
|
|
4156
4333
|
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
4157
4334
|
}
|
|
4335
|
+
/**
|
|
4336
|
+
* (masoudmanson): The default onOpen handler is the Callback fired when the popup
|
|
4337
|
+
* requests to be opened. This function is responsible for invoking the onOpen and onClick
|
|
4338
|
+
* handlers when a controlled dropdown is opening.
|
|
4339
|
+
*/
|
|
4340
|
+
function defaultOnOpen(event) {
|
|
4341
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
|
|
4342
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
4343
|
+
}
|
|
4344
|
+
/**
|
|
4345
|
+
* (masoudmanson): The default onClose handler is the callback fired when the popup
|
|
4346
|
+
* requests to be closed. This function is responsible for invoking the onClose and onClickAway
|
|
4347
|
+
* handlers when a controlled dropdown is closing.
|
|
4348
|
+
*/
|
|
4349
|
+
function defaultOnClose(event, reason) {
|
|
4350
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
|
|
4351
|
+
onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, reason);
|
|
4352
|
+
}
|
|
4158
4353
|
function defaultOnInputChange(event, value, reason) {
|
|
4159
4354
|
if (!multiple) {
|
|
4160
4355
|
if (reason === "input") {
|
|
@@ -4211,27 +4406,27 @@ var AutocompleteBase = function (props) {
|
|
|
4211
4406
|
}
|
|
4212
4407
|
};
|
|
4213
4408
|
|
|
4214
|
-
var StyledColumn = styles.styled("div")(templateObject_1$
|
|
4409
|
+
var StyledColumn = styles.styled("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4215
4410
|
var _a;
|
|
4216
4411
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
4217
4412
|
var spaces = getSpaces(props);
|
|
4218
4413
|
var borders = getBorders(props);
|
|
4219
4414
|
return "\n position: relative;\n width: ".concat(width, "px;\n\n &:not(:last-child) {\n border-right: ").concat((_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.divider, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): This code hides the relation icon of the last column\n &:last-of-type {\n .SdsAutocompleteMultiColumn-column-relation-icon {\n display: none;\n }\n }\n ");
|
|
4220
4415
|
});
|
|
4221
|
-
var StyledColumnTitle = styles.styled("p")(templateObject_2$
|
|
4416
|
+
var StyledColumnTitle = styles.styled("p")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
4222
4417
|
var _a;
|
|
4223
4418
|
var spaces = getSpaces(props);
|
|
4224
4419
|
var semanticTextColors = getSemanticTextColors(props);
|
|
4225
4420
|
return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n margin: 0;\n ");
|
|
4226
4421
|
});
|
|
4227
|
-
var StyledColumnIcon = styles.styled("span")(templateObject_3$
|
|
4422
|
+
var StyledColumnIcon = styles.styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4228
4423
|
var _a, _b;
|
|
4229
4424
|
var spaces = getSpaces(props);
|
|
4230
4425
|
var iconSizes = getIconSizes(props);
|
|
4231
4426
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4232
4427
|
return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n position: absolute;\n right: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n top: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\n width: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.width, "px;\n height: ").concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs.height, "px;\n }\n ");
|
|
4233
4428
|
});
|
|
4234
|
-
var templateObject_1$
|
|
4429
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$j;
|
|
4235
4430
|
|
|
4236
4431
|
var AutocompleteGroup = function (props) {
|
|
4237
4432
|
var autocompleteProps = props.autocompleteProps, onValueChange = props.onValueChange, propValue = props.value, multiple = props.multiple, label = props.label, InputBaseProps = props.InputBaseProps, popperOpen = props.popperOpen, inputValue = props.inputValue, PaperComponent = props.PaperComponent, rest = __rest(props, ["autocompleteProps", "onValueChange", "value", "multiple", "label", "InputBaseProps", "popperOpen", "inputValue", "PaperComponent"]);
|
|
@@ -4286,7 +4481,7 @@ var StyledPopper$2 = styles.styled(material.Popper, {
|
|
|
4286
4481
|
shouldForwardProp: function (prop) {
|
|
4287
4482
|
return !doNotForwardProps$m.includes(prop) || prop === "anchorEl";
|
|
4288
4483
|
},
|
|
4289
|
-
})(templateObject_1$
|
|
4484
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4290
4485
|
var _a;
|
|
4291
4486
|
var corners = getCorners(props);
|
|
4292
4487
|
var shadows = getShadows(props);
|
|
@@ -4297,34 +4492,44 @@ var StyledPopper$2 = styles.styled(material.Popper, {
|
|
|
4297
4492
|
});
|
|
4298
4493
|
var StyledPaper$2 = styles.styled(material.Paper, {
|
|
4299
4494
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
4300
|
-
})(templateObject_2$
|
|
4495
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4301
4496
|
var shadows = getShadows(props);
|
|
4302
4497
|
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n ");
|
|
4303
4498
|
});
|
|
4304
|
-
var StyledAutocompleteGroupWrapper = styles.styled("div")(templateObject_3$
|
|
4499
|
+
var StyledAutocompleteGroupWrapper = styles.styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4305
4500
|
var StyledAutocompleteInput = styles.styled(InputSearch, {
|
|
4306
4501
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
4307
|
-
})(templateObject_4$
|
|
4502
|
+
})(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"], ["\n ", "\n\n margin: 0;\n .MuiInputBase-root {\n width: 100%;\n }\n /* (thuang): Works with attribute inputMode: \"none\" to hide mobile keyboard */\n caret-color: ", ";\n"])), function (_a) {
|
|
4308
4503
|
var search = _a.search;
|
|
4309
4504
|
return !search && "height: 0; display: none;";
|
|
4310
4505
|
}, function (_a) {
|
|
4311
4506
|
var search = _a.search;
|
|
4312
4507
|
return (search ? "auto" : "transparent");
|
|
4313
4508
|
});
|
|
4314
|
-
var templateObject_1$
|
|
4509
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$i, templateObject_4$g;
|
|
4315
4510
|
|
|
4316
4511
|
var AutocompleteMultiColumn = function (props) {
|
|
4317
4512
|
var _a;
|
|
4318
|
-
var InputBaseProps = props.InputBaseProps,
|
|
4513
|
+
var InputBaseProps = props.InputBaseProps, open = props.open, _b = props.PopperPlacement, PopperPlacement = _b === void 0 ? "bottom-start" : _b, PopperBaseProps = props.PopperBaseProps, _c = props.search, search = _c === void 0 ? false : _c, _d = props.label, label = _d === void 0 ? "Search" : _d, onClickAway = props.onClickAway, onClick = props.onClick, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _e = props.PopperComponent, PopperComponent = _e === void 0 ? StyledPopper$2 : _e, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "onClick", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
|
|
4319
4514
|
var theme = styles.useTheme();
|
|
4320
|
-
var
|
|
4321
|
-
var
|
|
4515
|
+
var isOpenControlled = open !== undefined;
|
|
4516
|
+
var _f = React.useState(""), inputValue = _f[0], setInputValue = _f[1];
|
|
4517
|
+
var _g = React.useState(isOpenControlled ? open : false), popperOpen = _g[0], setPopperOpen = _g[1];
|
|
4518
|
+
/**
|
|
4519
|
+
* (masoudmanson): This useEffect is used to update the popperOpen state
|
|
4520
|
+
* when the open prop is controlled.
|
|
4521
|
+
*/
|
|
4522
|
+
React.useEffect(function () {
|
|
4523
|
+
if (isOpenControlled) {
|
|
4524
|
+
setPopperOpen(open);
|
|
4525
|
+
}
|
|
4526
|
+
}, [isOpenControlled, open]);
|
|
4322
4527
|
var anchorRef = React.useRef(null);
|
|
4323
|
-
var
|
|
4528
|
+
var _h = React.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
|
|
4324
4529
|
React.useEffect(function () {
|
|
4325
4530
|
setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
|
|
4326
4531
|
}, [anchorRef]);
|
|
4327
|
-
var
|
|
4532
|
+
var _j = React.useState({}), autocompleteMultiColumnValue = _j[0], setAutocompleteMultiColumnValue = _j[1];
|
|
4328
4533
|
React.useEffect(function () {
|
|
4329
4534
|
if (parentInitialValue !== undefined) {
|
|
4330
4535
|
setAutocompleteMultiColumnValue(parentInitialValue);
|
|
@@ -4338,14 +4543,14 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4338
4543
|
});
|
|
4339
4544
|
onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
|
|
4340
4545
|
};
|
|
4341
|
-
return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway:
|
|
4546
|
+
return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledAutocompleteInput, __assign({ id: "location-search", label: label, placeholder: label, value: inputValue, onChange: handleInputChange, onClick: handleInputClick, onBlur: handleInputBlur, ref: anchorRef, search: search, onKeyDown: handleInputKeyDown, InputProps: __assign(__assign({}, InputBaseProps === null || InputBaseProps === void 0 ? void 0 : InputBaseProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4342
4547
|
sdsType: "iconButton",
|
|
4343
4548
|
}, icon: "XMarkCircle", onClick: clearInput })) })),
|
|
4344
4549
|
/**
|
|
4345
4550
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
4346
4551
|
* mobile keyboard
|
|
4347
4552
|
*/
|
|
4348
|
-
inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(
|
|
4553
|
+
inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4349
4554
|
sdsType: "interactive",
|
|
4350
4555
|
}, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsxRuntime.jsx(PopperComponent, __assign({ modifiers: [
|
|
4351
4556
|
{
|
|
@@ -4365,7 +4570,22 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4365
4570
|
*/
|
|
4366
4571
|
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({ target: { value: "" } }, "", "clear");
|
|
4367
4572
|
}
|
|
4368
|
-
function handleInputClick(
|
|
4573
|
+
function handleInputClick(event) {
|
|
4574
|
+
/**
|
|
4575
|
+
* (masoudmanson): Because the Autocomplete component overrides the
|
|
4576
|
+
* InputSearch's onClick, we must also include the parent onClick here.
|
|
4577
|
+
*/
|
|
4578
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
4579
|
+
/**
|
|
4580
|
+
* (masoudmanson): If the dropdown is controlled, we call the onClick prop to allow the parent
|
|
4581
|
+
* to handle the opening and closing of the dropdown.
|
|
4582
|
+
*/
|
|
4583
|
+
if (isOpenControlled) {
|
|
4584
|
+
return;
|
|
4585
|
+
}
|
|
4586
|
+
/**
|
|
4587
|
+
* (masoudmanson): If the dropdown is not controlled, we toggle the dropdown open and closed.
|
|
4588
|
+
*/
|
|
4369
4589
|
if (popperOpen) {
|
|
4370
4590
|
setPopperOpen(false);
|
|
4371
4591
|
}
|
|
@@ -4389,13 +4609,55 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4389
4609
|
setInputValue("");
|
|
4390
4610
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
4391
4611
|
}
|
|
4392
|
-
|
|
4393
|
-
|
|
4612
|
+
/**
|
|
4613
|
+
* (masoudmanson): This is the default onClickAway handler for the Autocomplete component.
|
|
4614
|
+
* It is used to close the dropdown when the user clicks away from the dropdown. It also
|
|
4615
|
+
* calls the parent onClickAway prop if it is provided.
|
|
4616
|
+
*/
|
|
4617
|
+
function defaultOnClickAway(event) {
|
|
4618
|
+
/**
|
|
4619
|
+
* (masoudmanson): We only want to close the dropdown if it is open.
|
|
4620
|
+
* This may sound unnecessary, but it is to prevent the dropdown from
|
|
4621
|
+
* calling the parent onClickAway prop when the dropdown is closed.
|
|
4622
|
+
*/
|
|
4623
|
+
if (popperOpen) {
|
|
4624
|
+
onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, "blur");
|
|
4625
|
+
/**
|
|
4626
|
+
* (masoudmanson): If the dropdown is controlled, we call the onClickAway prop to allow the parent
|
|
4627
|
+
* to handle the closing of the dropdown.
|
|
4628
|
+
*/
|
|
4629
|
+
if (isOpenControlled)
|
|
4630
|
+
return;
|
|
4631
|
+
// (masoudmanson): If the dropdown is not controlled, we close the dropdown.
|
|
4632
|
+
setPopperOpen(false);
|
|
4633
|
+
}
|
|
4394
4634
|
}
|
|
4395
4635
|
function handleInputKeyDown(event) {
|
|
4396
|
-
|
|
4397
|
-
|
|
4398
|
-
|
|
4636
|
+
var _a;
|
|
4637
|
+
/**
|
|
4638
|
+
* (masoudmanson): Because the Autocomplete component overrides the
|
|
4639
|
+
* InputSearch's onKeyDown, we must also include the user defined onKeyDown here.
|
|
4640
|
+
*/
|
|
4641
|
+
if (props === null || props === void 0 ? void 0 : props.onKeyDown) {
|
|
4642
|
+
(_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
4643
|
+
}
|
|
4644
|
+
else {
|
|
4645
|
+
// (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
|
|
4646
|
+
if (event.key === "Backspace") {
|
|
4647
|
+
event.stopPropagation();
|
|
4648
|
+
}
|
|
4649
|
+
/**
|
|
4650
|
+
* (masoudmanson): This is to handle the Escape key to close the dropdown.
|
|
4651
|
+
* If the dropdown is controlled, we call the onClick prop to allow the parent
|
|
4652
|
+
* to handle the closing of the dropdown.
|
|
4653
|
+
*/
|
|
4654
|
+
if (event.key === "Escape") {
|
|
4655
|
+
if (isOpenControlled) {
|
|
4656
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
4657
|
+
return;
|
|
4658
|
+
}
|
|
4659
|
+
setPopperOpen(false);
|
|
4660
|
+
}
|
|
4399
4661
|
}
|
|
4400
4662
|
}
|
|
4401
4663
|
};
|
|
@@ -4407,7 +4669,7 @@ var Autocomplete = function (props) {
|
|
|
4407
4669
|
if (options.length > 1) {
|
|
4408
4670
|
return (jsxRuntime.jsx(AutocompleteMultiColumn, __assign({ options: options, value: value, onChange: onChange }, rest, {
|
|
4409
4671
|
// (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
|
|
4410
|
-
groupBy: undefined
|
|
4672
|
+
groupBy: undefined })));
|
|
4411
4673
|
}
|
|
4412
4674
|
else {
|
|
4413
4675
|
return (jsxRuntime.jsx(AutocompleteBase, __assign({ options: options[0].options, value: value, onChange: onChange }, rest)));
|
|
@@ -4418,25 +4680,25 @@ var Autocomplete = function (props) {
|
|
|
4418
4680
|
}
|
|
4419
4681
|
};
|
|
4420
4682
|
|
|
4421
|
-
var Centered = styles.styled("div")(templateObject_1$
|
|
4422
|
-
var IconWrapper$1 = styles.styled("div")(templateObject_2$
|
|
4683
|
+
var Centered = styles.styled("div")(templateObject_1$H || (templateObject_1$H = __makeTemplateObject(["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"], ["\n flex: 1 1 auto;\n display: flex;\n justify-content: center;\n align-items: center;\n"])));
|
|
4684
|
+
var IconWrapper$1 = styles.styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4423
4685
|
var iconSizes = getIconSizes(props);
|
|
4424
4686
|
var spaces = getSpaces(props);
|
|
4425
4687
|
return "\n height: ".concat(iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
4426
4688
|
});
|
|
4427
4689
|
var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
|
|
4428
|
-
var
|
|
4690
|
+
var StyledButton$2 = styles.styled(Button, {
|
|
4429
4691
|
shouldForwardProp: function (prop) {
|
|
4430
4692
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
4431
4693
|
},
|
|
4432
|
-
})(templateObject_3$
|
|
4694
|
+
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n flex: 0 0 auto;\n\n ", "\n"], ["\n flex: 0 0 auto;\n\n ", "\n"])), function (props) {
|
|
4433
4695
|
var bannerType = props.bannerType;
|
|
4434
4696
|
var colors = getColors(props);
|
|
4435
4697
|
if (bannerType !== "primary")
|
|
4436
4698
|
return "";
|
|
4437
4699
|
return "\n svg:hover {\n fill: ".concat(colors === null || colors === void 0 ? void 0 : colors.blue[300], ";\n }\n ");
|
|
4438
4700
|
});
|
|
4439
|
-
styles.styled("div")(templateObject_4$
|
|
4701
|
+
styles.styled("div")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
4440
4702
|
var primary$1 = function (props) {
|
|
4441
4703
|
var _a, _b, _c;
|
|
4442
4704
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
@@ -4452,12 +4714,12 @@ var secondary$1 = function (props) {
|
|
|
4452
4714
|
var doNotForwardProps$l = ["sdsType", "textChild"];
|
|
4453
4715
|
var StyledBanner = styles.styled("div", {
|
|
4454
4716
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
4455
|
-
})(templateObject_5$
|
|
4717
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
4456
4718
|
var sdsType = props.sdsType;
|
|
4457
4719
|
var spaces = getSpaces(props);
|
|
4458
4720
|
return "\n display: flex;\n align-items: center;\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n \n ").concat(sdsType === "primary" ? primary$1(props) : "", "\n ").concat(sdsType === "secondary" ? secondary$1(props) : "", "\n ");
|
|
4459
4721
|
});
|
|
4460
|
-
var templateObject_1$
|
|
4722
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$a;
|
|
4461
4723
|
|
|
4462
4724
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
4463
4725
|
var children = props.children, dismissed = props.dismissed, _a = props.dismissible, dismissible = _a === void 0 ? true : _a, onClose = props.onClose, sdsType = props.sdsType, icon = props.icon, sdsIconProps = props.sdsIconProps, rest = __rest(props, ["children", "dismissed", "dismissible", "onClose", "sdsType", "icon", "sdsIconProps"]);
|
|
@@ -4485,124 +4747,44 @@ var Banner = React.forwardRef(function Banner(props, ref) {
|
|
|
4485
4747
|
return (jsxRuntime.jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
|
|
4486
4748
|
}
|
|
4487
4749
|
};
|
|
4488
|
-
return (jsxRuntime.jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxRuntime.jsxs(Centered, { children: [jsxRuntime.jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsxRuntime.jsx(
|
|
4750
|
+
return (jsxRuntime.jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxRuntime.jsxs(Centered, { children: [jsxRuntime.jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsxRuntime.jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
|
|
4489
4751
|
});
|
|
4490
4752
|
|
|
4491
|
-
var
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4496
|
-
var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
|
|
4497
|
-
var spaces = getSpaces(props);
|
|
4498
|
-
var shadows = getShadows(props);
|
|
4499
|
-
var iconSizes = getIconSizes(props);
|
|
4500
|
-
var semanticTextColors = getSemanticTextColors(props);
|
|
4501
|
-
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4502
|
-
var hasIcon = !!startIcon || !!endIcon;
|
|
4503
|
-
// (masoudmanson): The padding for the contained variant depends on the presence of an icon.
|
|
4504
|
-
// If the component has either a startIcon or endIcon, the padding will be different.
|
|
4505
|
-
// If the component doesn't have any icon at all, the padding will be different.
|
|
4506
|
-
var containedPadding = hasIcon
|
|
4507
|
-
? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
|
|
4508
|
-
: "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px");
|
|
4509
|
-
// (thuang): outline variant has border 1px, so padding needs to be smaller
|
|
4510
|
-
var outlinedPadding = hasIcon
|
|
4511
|
-
? "".concat(((spaces === null || spaces === void 0 ? void 0 : spaces.xxs) || 0) - 1, "px ").concat(((spaces === null || spaces === void 0 ? void 0 : spaces.m) || 0) - 1, "px")
|
|
4512
|
-
: "".concat(((spaces === null || spaces === void 0 ? void 0 : spaces.xs) || 0) - 1, "px ").concat(((spaces === null || spaces === void 0 ? void 0 : spaces.m) || 0) - 1, "px");
|
|
4513
|
-
var padding = variant === "outlined" ? outlinedPadding : containedPadding;
|
|
4514
|
-
var outlineBorder = variant === "outlined"
|
|
4515
|
-
? "border-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.border, ";")
|
|
4516
|
-
: "";
|
|
4517
|
-
return "\n ".concat(outlineBorder, "\n padding: ").concat(padding, ";\n min-width: 120px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n\n &:hover {\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, ";\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n &:active {\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.onFill, ";\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.fillPressed, ";\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n &:disabled {\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.onFillDisabled, ";\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fillDisabled, ";\n border-color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.borderDisabled, ";\n }\n\n .").concat(material.buttonClasses.startIcon, ", .").concat(material.buttonClasses.endIcon, " {\n width: ").concat((_j = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _j === void 0 ? void 0 : _j.width, "px;\n height: ").concat((_k = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _k === void 0 ? void 0 : _k.width, "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ").concat((_l = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _l === void 0 ? void 0 : _l.width, "px;\n max-height: ").concat((_m = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l) === null || _m === void 0 ? void 0 : _m.width, "px;\n }\n }\n\n .").concat(material.buttonClasses.startIcon, " {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-left: 0;\n }\n\n .").concat(material.buttonClasses.endIcon, " {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: 0;\n }\n ");
|
|
4518
|
-
});
|
|
4519
|
-
var RoundedButton = styles.styled(ButtonBase, {
|
|
4520
|
-
shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
|
|
4521
|
-
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4522
|
-
var corners = getCorners(props);
|
|
4523
|
-
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n ");
|
|
4524
|
-
});
|
|
4525
|
-
var SquareButton = ButtonBase;
|
|
4526
|
-
var MinimalButton = styles.styled(material.Button, {
|
|
4527
|
-
shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
|
|
4528
|
-
})(templateObject_3$h || (templateObject_3$h = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n &:hover, &:focus-visible {\n background-color: transparent;\n }\n"], ["\n ", "\n\n ", "\n\n ", "\n &:hover, &:focus-visible {\n background-color: transparent;\n }\n"])), focusVisibleA11yStyle, function (props) {
|
|
4529
|
-
var spaces = getSpaces(props);
|
|
4530
|
-
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;\n ");
|
|
4531
|
-
}, function (props) {
|
|
4532
|
-
if (props === null || props === void 0 ? void 0 : props.isAllCaps) {
|
|
4533
|
-
return fontCapsXxxs;
|
|
4534
|
-
}
|
|
4535
|
-
return "";
|
|
4536
|
-
});
|
|
4537
|
-
var minimal$2 = function (props) {
|
|
4538
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
4539
|
-
var spaces = getSpaces(props);
|
|
4540
|
-
var iconSizes = getIconSizes(props);
|
|
4541
|
-
var semanticTextColors = getSemanticTextColors(props);
|
|
4542
|
-
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4543
|
-
return "\n &:hover, &:focus-visible {\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.fillHover, ";\n }\n &:active {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fillPressed, ";\n }\n &:disabled { \n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.onFillDisabled, ";\n }\n\n .").concat(material.buttonClasses.startIcon, ", .").concat(material.buttonClasses.endIcon, " {\n width: ").concat((_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _d === void 0 ? void 0 : _d.width, "px;\n height: ").concat((_e = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _e === void 0 ? void 0 : _e.width, "px;\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n max-width: ").concat((_f = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _f === void 0 ? void 0 : _f.width, "px;\n max-height: ").concat((_g = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _g === void 0 ? void 0 : _g.width, "px;\n }\n }\n\n .").concat(material.buttonClasses.startIcon, " {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n }\n\n .").concat(material.buttonClasses.endIcon, " {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n }\n ");
|
|
4753
|
+
var BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE = {
|
|
4754
|
+
large: "xl",
|
|
4755
|
+
medium: "l",
|
|
4756
|
+
small: "s",
|
|
4544
4757
|
};
|
|
4545
|
-
var PrimaryMinimalButton = styles.styled(MinimalButton)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), minimal$2);
|
|
4546
|
-
var SecondaryMinimalButton = styles.styled(MinimalButton)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), minimal$2, function (props) {
|
|
4547
|
-
var _a;
|
|
4548
|
-
var semanticTextColors = getSemanticTextColors(props);
|
|
4549
|
-
return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n ");
|
|
4550
|
-
});
|
|
4551
|
-
var StyledButton$1 = styles.styled(material.Button, {
|
|
4552
|
-
shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
|
|
4553
|
-
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4554
|
-
if (!props.isRounded)
|
|
4555
|
-
return "";
|
|
4556
|
-
var corners = getCorners(props);
|
|
4557
|
-
var spaces = getSpaces(props);
|
|
4558
|
-
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.l, "px;\n min-width: 120px;\n ");
|
|
4559
|
-
});
|
|
4560
|
-
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$a, templateObject_6$7;
|
|
4561
|
-
|
|
4562
4758
|
/**
|
|
4563
4759
|
* @see https://mui.com/material-ui/react-button/
|
|
4564
4760
|
*/
|
|
4565
|
-
var
|
|
4566
|
-
var sdsStyle = props
|
|
4567
|
-
var
|
|
4568
|
-
|
|
4569
|
-
|
|
4570
|
-
|
|
4571
|
-
|
|
4572
|
-
|
|
4573
|
-
|
|
4761
|
+
var ButtonDropdown = React.forwardRef(function (props, ref) {
|
|
4762
|
+
var icon = props.icon, sdsStyle = props.sdsStyle, sdsType = props.sdsType, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, sdsIconProps = props.sdsIconProps;
|
|
4763
|
+
var iconSize = BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE[sdsSize];
|
|
4764
|
+
var iconItem = function () {
|
|
4765
|
+
if (icon) {
|
|
4766
|
+
if (typeof icon !== "string") {
|
|
4767
|
+
return icon;
|
|
4768
|
+
}
|
|
4769
|
+
else {
|
|
4770
|
+
return (jsxRuntime.jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
|
|
4771
|
+
}
|
|
4772
|
+
}
|
|
4773
|
+
};
|
|
4774
|
+
if (sdsStyle === "icon") {
|
|
4775
|
+
if (icon !== undefined) {
|
|
4776
|
+
return jsxRuntime.jsx(ButtonIcon, __assign({ icon: icon }, props, { ref: ref }));
|
|
4777
|
+
}
|
|
4778
|
+
else {
|
|
4779
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
4780
|
+
return null;
|
|
4781
|
+
}
|
|
4574
4782
|
}
|
|
4575
|
-
|
|
4576
|
-
|
|
4577
|
-
var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
|
|
4578
|
-
switch (true) {
|
|
4579
|
-
case sdsStyle === "rounded" && sdsType === "primary":
|
|
4580
|
-
return (jsxRuntime.jsx(RoundedButton, __assign({ color: "primary", ref: ref, variant: "contained" }, propsWithDefault)));
|
|
4581
|
-
case sdsStyle === "rounded" && sdsType === "secondary":
|
|
4582
|
-
return (jsxRuntime.jsx(RoundedButton, __assign({ color: "primary", ref: ref, variant: "outlined" }, propsWithDefault)));
|
|
4583
|
-
case sdsStyle === "square" && sdsType === "primary":
|
|
4584
|
-
return (jsxRuntime.jsx(SquareButton, __assign({ color: "primary", ref: ref, variant: "contained" }, propsWithDefault)));
|
|
4585
|
-
case sdsStyle === "square" && sdsType === "secondary":
|
|
4586
|
-
return (jsxRuntime.jsx(SquareButton, __assign({ color: "primary", ref: ref, variant: "outlined" }, propsWithDefault)));
|
|
4587
|
-
case sdsStyle === "minimal" && sdsType === "primary":
|
|
4588
|
-
return (jsxRuntime.jsx(PrimaryMinimalButton, __assign({ color: "primary", ref: ref, variant: "text" }, propsWithDefault)));
|
|
4589
|
-
case sdsStyle === "minimal" && sdsType === "secondary":
|
|
4590
|
-
return (jsxRuntime.jsx(SecondaryMinimalButton, __assign({ color: "primary", ref: ref, variant: "text" }, propsWithDefault)));
|
|
4591
|
-
default:
|
|
4592
|
-
return jsxRuntime.jsx(StyledButton$1, __assign({}, propsWithDefault, { ref: ref }));
|
|
4783
|
+
else {
|
|
4784
|
+
return (jsxRuntime.jsx(Button, __assign({}, props, { endIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
|
|
4593
4785
|
}
|
|
4594
4786
|
});
|
|
4595
4787
|
|
|
4596
|
-
/**
|
|
4597
|
-
* @see https://mui.com/material-ui/react-button/
|
|
4598
|
-
*/
|
|
4599
|
-
var ButtonDropdown = React.forwardRef(function (props, ref) {
|
|
4600
|
-
var icon = props === null || props === void 0 ? void 0 : props.icon;
|
|
4601
|
-
var sdsStyle = props === null || props === void 0 ? void 0 : props.sdsStyle;
|
|
4602
|
-
var sdsType = props === null || props === void 0 ? void 0 : props.sdsType;
|
|
4603
|
-
return (jsxRuntime.jsx(Button, __assign({}, props, { endIcon: jsxRuntime.jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: icon })));
|
|
4604
|
-
});
|
|
4605
|
-
|
|
4606
4788
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
4607
4789
|
|
|
4608
4790
|
var doNotForwardProps$k = ["calloutTitle", "collapsed", "severity"];
|
|
@@ -4679,11 +4861,11 @@ var Callout = function (_a) {
|
|
|
4679
4861
|
};
|
|
4680
4862
|
var getAction = function (collapsed) {
|
|
4681
4863
|
if (expandable) {
|
|
4682
|
-
return (jsxRuntime.jsx(
|
|
4864
|
+
return (jsxRuntime.jsx(Button, { "aria-label": collapsed ? "open" : "close", onClick: function () {
|
|
4683
4865
|
setStage(collapsed ? SDS_STAGE_OPEN : SDS_STAGE_CLOSED);
|
|
4684
|
-
}, sdsSize: "small", sdsType: "tertiary", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
|
|
4866
|
+
}, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
|
|
4685
4867
|
}
|
|
4686
|
-
return onClose ? (jsxRuntime.jsx(
|
|
4868
|
+
return onClose ? (jsxRuntime.jsx(Button, { "aria-label": "Dismiss", onClick: handleClose, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", size: "large", icon: "XMark" })) : null;
|
|
4687
4869
|
};
|
|
4688
4870
|
var collapsed = (expandable && stage === SDS_STAGE_CLOSED) || false;
|
|
4689
4871
|
// when there is no CalloutTitlecomponent, or there is a single child element
|
|
@@ -5071,6 +5253,10 @@ var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4
|
|
|
5071
5253
|
|
|
5072
5254
|
/**
|
|
5073
5255
|
* @see https://mui.com/material-ui/react-chip/
|
|
5256
|
+
*
|
|
5257
|
+
* @deprecated
|
|
5258
|
+
* This component is deprecated and will be removed in the next major version.
|
|
5259
|
+
* Please use `Tag` or `TagFilter` instead.
|
|
5074
5260
|
*/
|
|
5075
5261
|
var Chip = function (props) {
|
|
5076
5262
|
showWarningIfFirstOccurence(SDSWarningTypes.ChipDeprecated);
|
|
@@ -5157,9 +5343,20 @@ var DropdownMenu = function (props) {
|
|
|
5157
5343
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
5158
5344
|
// (masoudmanson): To override the width of the Popper,
|
|
5159
5345
|
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
5160
|
-
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsxRuntime.jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
5346
|
+
sx: dropdownMenuPopperSx, children: jsxRuntime.jsx(PaperComponent, { children: jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxRuntime.jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsxRuntime.jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (jsxRuntime.jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
5161
5347
|
};
|
|
5162
5348
|
|
|
5349
|
+
var doNotForwardProps$e = [
|
|
5350
|
+
"intent",
|
|
5351
|
+
"state",
|
|
5352
|
+
"sdsStage",
|
|
5353
|
+
"sdsType",
|
|
5354
|
+
"isMinimal",
|
|
5355
|
+
"shouldTruncateMinimalDetails",
|
|
5356
|
+
"shouldPutAColonAfterLabel",
|
|
5357
|
+
"value",
|
|
5358
|
+
"sdsStyle",
|
|
5359
|
+
];
|
|
5163
5360
|
var labelFontBodyS = fontBody("s", "regular");
|
|
5164
5361
|
var labelFontBodyXs = fontBody("xs", "regular");
|
|
5165
5362
|
var inputDropdownStyles = function (props) {
|
|
@@ -5220,15 +5417,14 @@ var isDisabled = function (props) {
|
|
|
5220
5417
|
var semanticCommonColors = getSemanticComponentColors(props);
|
|
5221
5418
|
return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.disabled, (_d = semanticCommonColors === null || semanticCommonColors === void 0 ? void 0 : semanticCommonColors.base) === null || _d === void 0 ? void 0 : _d.fillDisabled);
|
|
5222
5419
|
};
|
|
5223
|
-
|
|
5224
|
-
|
|
5225
|
-
|
|
5226
|
-
|
|
5227
|
-
|
|
5228
|
-
|
|
5229
|
-
|
|
5230
|
-
|
|
5231
|
-
];
|
|
5420
|
+
/**
|
|
5421
|
+
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
5422
|
+
* temporary fix for the issue where the props are not correctly passed to
|
|
5423
|
+
* the underlying Button component. This is a workaround until a more permanent
|
|
5424
|
+
* solution is implemented. As a result of this fix, the style prop is not
|
|
5425
|
+
* passed to the underlying Button component. So we have added the style prop
|
|
5426
|
+
* to the InputDropdownProps interface.
|
|
5427
|
+
*/
|
|
5232
5428
|
var StyledInputDropdown = styles.styled(Button, {
|
|
5233
5429
|
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
5234
5430
|
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"], ["\n ", "\n\n /* (thuang): in Minimal it's a different value */\n align-items: center;\n /* (thuang): in Minimal it's a different value */\n flex-direction: row;\n\n justify-content: space-between;\n\n ", "\n"])), labelFontBodyXs, function (props) {
|
|
@@ -5493,7 +5689,7 @@ var templateObject_1$w, templateObject_2$h;
|
|
|
5493
5689
|
* @see https://mui.com/material-ui/react-chip/
|
|
5494
5690
|
*/
|
|
5495
5691
|
var TagFilter = function (props) {
|
|
5496
|
-
return (jsxRuntime.jsx(StyledTag, __assign({ role: "none presentation" }, props, { deleteIcon: jsxRuntime.jsx(
|
|
5692
|
+
return (jsxRuntime.jsx(StyledTag, __assign({ role: "none presentation" }, props, { deleteIcon: jsxRuntime.jsx(Button, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon" }), color: "info" })));
|
|
5497
5693
|
};
|
|
5498
5694
|
|
|
5499
5695
|
var Chips = function (_a) {
|
|
@@ -5665,7 +5861,7 @@ function DialogContent(props, ref) {
|
|
|
5665
5861
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
5666
5862
|
});
|
|
5667
5863
|
|
|
5668
|
-
var
|
|
5864
|
+
var StyledButton$1 = styles.styled(Button)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
5669
5865
|
var spaces = getSpaces(props);
|
|
5670
5866
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
5671
5867
|
});
|
|
@@ -5681,7 +5877,7 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
5681
5877
|
return (jsxRuntime.jsx(DialogContext.Consumer, { children: function (_a) {
|
|
5682
5878
|
var sdsSize = _a.sdsSize;
|
|
5683
5879
|
var size = SDS_SIZE_TO_COMPONENT_SIZE[sdsSize];
|
|
5684
|
-
return (jsxRuntime.jsx(
|
|
5880
|
+
return (jsxRuntime.jsx(StyledButton$1, __assign({ "aria-label": "Close", ref: ref, sdsSize: size }, props, { icon: "XMark", sdsStyle: "icon", sdsType: "tertiary" })));
|
|
5685
5881
|
} }));
|
|
5686
5882
|
});
|
|
5687
5883
|
|
|
@@ -5744,7 +5940,7 @@ var Dropdown = function (props) {
|
|
|
5744
5940
|
// which by default will not close on blur. If closeOnBlur is enabled, clicking out
|
|
5745
5941
|
// is equivalent to clicking the Cancel button, closing the dropdown and losing
|
|
5746
5942
|
// unapplied changes.
|
|
5747
|
-
closeOnBlur = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value"]);
|
|
5943
|
+
closeOnBlur = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
|
|
5748
5944
|
if (buttons && !multiple) {
|
|
5749
5945
|
// eslint-disable-next-line no-console
|
|
5750
5946
|
console.warn("Warning: buttons are only supported for multiple select dropdowns.");
|
|
@@ -5761,7 +5957,7 @@ var Dropdown = function (props) {
|
|
|
5761
5957
|
setValue(propValue);
|
|
5762
5958
|
}
|
|
5763
5959
|
}, [isControlled, propValue]);
|
|
5764
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, { "data-testid": "dropdown" })), jsxRuntime.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 ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick:
|
|
5960
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, { "data-testid": "dropdown" })), jsxRuntime.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 ? (jsxRuntime.jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsxRuntime.jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
|
|
5765
5961
|
function getInitialValue() {
|
|
5766
5962
|
return multiple
|
|
5767
5963
|
? []
|
|
@@ -5794,6 +5990,7 @@ var Dropdown = function (props) {
|
|
|
5794
5990
|
}
|
|
5795
5991
|
}
|
|
5796
5992
|
function handleClick(event) {
|
|
5993
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
5797
5994
|
if (open) {
|
|
5798
5995
|
if (!shouldShowButtons) {
|
|
5799
5996
|
if (multiple) {
|
|
@@ -5836,6 +6033,9 @@ var Dropdown = function (props) {
|
|
|
5836
6033
|
setOpen(false);
|
|
5837
6034
|
}
|
|
5838
6035
|
}
|
|
6036
|
+
function handleButtonClose(event) {
|
|
6037
|
+
handleClose(event, "selectOption");
|
|
6038
|
+
}
|
|
5839
6039
|
function handleCancel() {
|
|
5840
6040
|
if (multiple) {
|
|
5841
6041
|
// (masoudmanson): To undo the latest actions made on the selections,
|
|
@@ -6422,6 +6622,10 @@ var templateObject_1$d, templateObject_2$7, templateObject_3$3, templateObject_4
|
|
|
6422
6622
|
|
|
6423
6623
|
/**
|
|
6424
6624
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
6625
|
+
*
|
|
6626
|
+
* @deprecated
|
|
6627
|
+
* This component is deprecated and will be removed in the next major version.
|
|
6628
|
+
* Please use `Autocomplete` or `Dropdown` instead.
|
|
6425
6629
|
*/
|
|
6426
6630
|
var MenuSelect = function (props) {
|
|
6427
6631
|
var _a = props.keepSearchOnSelect, keepSearchOnSelect = _a === void 0 ? true : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.getOptionLabel, getOptionLabel = _c === void 0 ? defaultGetOptionLabel : _c, _d = props.renderTags, renderTags = _d === void 0 ? defaultRenderTags : _d, _e = props.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, _f = props.disableCloseOnSelect, disableCloseOnSelect = _f === void 0 ? multiple : _f, _g = props.noOptionsText, noOptionsText = _g === void 0 ? "No options" : _g, _h = props.search, search = _h === void 0 ? false : _h, _j = props.InputBaseProps, InputBaseProps = _j === void 0 ? {} : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k;
|
|
@@ -6440,7 +6644,7 @@ var MenuSelect = function (props) {
|
|
|
6440
6644
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
6441
6645
|
* mobile keyboard
|
|
6442
6646
|
*/
|
|
6443
|
-
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(
|
|
6647
|
+
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
6444
6648
|
sdsType: "interactive",
|
|
6445
6649
|
}, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
|
|
6446
6650
|
if (event && event.type === "blur") {
|
|
@@ -6754,7 +6958,7 @@ var Notification = function (_a) {
|
|
|
6754
6958
|
}
|
|
6755
6959
|
}
|
|
6756
6960
|
};
|
|
6757
|
-
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsxRuntime.jsx(
|
|
6961
|
+
return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(material.Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsxRuntime.jsx(material.Box, { children: jsxRuntime.jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsxRuntime.jsx(Button, { onClick: handleClose, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", "data-testid": "notificationCloseButton", icon: "XMark" })) : null, icon: getIcon(), className: "elevated", intent: intent, slideDirection: slideDirection }, passedProps, { children: [children, buttonOnClick !== undefined && (jsxRuntime.jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsxRuntime.jsx(Button, { sdsStyle: "minimal", sdsType: "secondary", onClick: buttonOnClick, children: buttonText }) }))] })) }) }) }));
|
|
6758
6962
|
};
|
|
6759
6963
|
|
|
6760
6964
|
var doNotForwardProps$2 = [
|
|
@@ -6770,13 +6974,10 @@ var doNotForwardProps$2 = [
|
|
|
6770
6974
|
"pageSize",
|
|
6771
6975
|
"truncateDropdown",
|
|
6772
6976
|
];
|
|
6773
|
-
var
|
|
6774
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
|
|
6775
|
-
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6977
|
+
var StyledPaginationButton = styles.styled(Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6776
6978
|
var _a, _b, _c;
|
|
6777
|
-
var disabled = props.disabled;
|
|
6778
6979
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6779
|
-
return "\n width: 32px;\n height: 32px;\n cursor: "
|
|
6980
|
+
return "\n width: 32px;\n height: 32px;\n cursor: \"pointer\";\n\n & .MuiSvgIcon-root {\n width: 10px;\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.icon, "\n }\n\n &:hover {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.iconHover, "\n }\n }\n ");
|
|
6780
6981
|
});
|
|
6781
6982
|
var StyledPaginationChevronList = styles.styled("li", {
|
|
6782
6983
|
shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
|
|
@@ -6821,7 +7022,7 @@ var PageListDropdown = function (props) {
|
|
|
6821
7022
|
var handleClose = function () {
|
|
6822
7023
|
setAnchorEl(null);
|
|
6823
7024
|
};
|
|
6824
|
-
return (jsxRuntime.jsxs(Page, { sdsStyle: sdsStyle, children: [jsxRuntime.jsx(
|
|
7025
|
+
return (jsxRuntime.jsxs(Page, { sdsStyle: sdsStyle, children: [jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", onClick: handleClick, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }), jsxRuntime.jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map(function (page) {
|
|
6825
7026
|
return (jsxRuntime.jsx(MenuItem, { onClick: function () {
|
|
6826
7027
|
onPageChange(page);
|
|
6827
7028
|
handleClose();
|
|
@@ -6904,7 +7105,7 @@ var Pagination = React.forwardRef(function (props, ref) {
|
|
|
6904
7105
|
if (truncateDropdown) {
|
|
6905
7106
|
return (jsxRuntime.jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
|
|
6906
7107
|
}
|
|
6907
|
-
return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(
|
|
7108
|
+
return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
|
|
6908
7109
|
}
|
|
6909
7110
|
return (jsxRuntime.jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, children: pageNumber }, pageNumber));
|
|
6910
7111
|
}), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
|
|
@@ -7267,6 +7468,7 @@ exports.TagFilter = TagFilter;
|
|
|
7267
7468
|
exports.Tooltip = Tooltip;
|
|
7268
7469
|
exports.TooltipCondensed = TooltipCondensed;
|
|
7269
7470
|
exports.TooltipTable = TooltipTableContent;
|
|
7471
|
+
exports.defaultAppTheme = defaultAppTheme;
|
|
7270
7472
|
exports.defaultTheme = defaultTheme;
|
|
7271
7473
|
exports.focusVisibleA11yStyle = focusVisibleA11yStyle;
|
|
7272
7474
|
exports.fontBody = fontBody;
|
|
@@ -7317,3 +7519,4 @@ exports.getShadows = getShadows;
|
|
|
7317
7519
|
exports.getSpaces = getSpaces;
|
|
7318
7520
|
exports.getSpacings = getSpacings;
|
|
7319
7521
|
exports.getTypography = getTypography;
|
|
7522
|
+
exports.makeThemeOptions = makeThemeOptions;
|