@czi-sds/components 20.0.1 → 20.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +122 -53
- package/dist/index.cjs.js +323 -218
- package/dist/index.esm.d.ts +122 -53
- package/dist/index.esm.js +323 -220
- 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() })));
|
|
3810
3923
|
});
|
|
3811
3924
|
|
|
3812
|
-
|
|
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
|
+
}
|
|
3975
|
+
});
|
|
3976
|
+
|
|
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,13 +4249,13 @@ 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
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;
|
|
@@ -4143,9 +4308,9 @@ var AutocompleteBase = function (props) {
|
|
|
4143
4308
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
4144
4309
|
* mobile keyboard
|
|
4145
4310
|
*/
|
|
4146
|
-
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(
|
|
4311
|
+
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
4312
|
sdsType: "iconButton",
|
|
4148
|
-
}, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(
|
|
4313
|
+
}, 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
4314
|
sdsType: "interactive",
|
|
4150
4315
|
}, icon: "Search" }) })) }) }, InputBaseProps)) }));
|
|
4151
4316
|
}
|
|
@@ -4211,27 +4376,27 @@ var AutocompleteBase = function (props) {
|
|
|
4211
4376
|
}
|
|
4212
4377
|
};
|
|
4213
4378
|
|
|
4214
|
-
var StyledColumn = styles.styled("div")(templateObject_1$
|
|
4379
|
+
var StyledColumn = styles.styled("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4215
4380
|
var _a;
|
|
4216
4381
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
4217
4382
|
var spaces = getSpaces(props);
|
|
4218
4383
|
var borders = getBorders(props);
|
|
4219
4384
|
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
4385
|
});
|
|
4221
|
-
var StyledColumnTitle = styles.styled("p")(templateObject_2$
|
|
4386
|
+
var StyledColumnTitle = styles.styled("p")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
4222
4387
|
var _a;
|
|
4223
4388
|
var spaces = getSpaces(props);
|
|
4224
4389
|
var semanticTextColors = getSemanticTextColors(props);
|
|
4225
4390
|
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
4391
|
});
|
|
4227
|
-
var StyledColumnIcon = styles.styled("span")(templateObject_3$
|
|
4392
|
+
var StyledColumnIcon = styles.styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4228
4393
|
var _a, _b;
|
|
4229
4394
|
var spaces = getSpaces(props);
|
|
4230
4395
|
var iconSizes = getIconSizes(props);
|
|
4231
4396
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4232
4397
|
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
4398
|
});
|
|
4234
|
-
var templateObject_1$
|
|
4399
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$j;
|
|
4235
4400
|
|
|
4236
4401
|
var AutocompleteGroup = function (props) {
|
|
4237
4402
|
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 +4451,7 @@ var StyledPopper$2 = styles.styled(material.Popper, {
|
|
|
4286
4451
|
shouldForwardProp: function (prop) {
|
|
4287
4452
|
return !doNotForwardProps$m.includes(prop) || prop === "anchorEl";
|
|
4288
4453
|
},
|
|
4289
|
-
})(templateObject_1$
|
|
4454
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4290
4455
|
var _a;
|
|
4291
4456
|
var corners = getCorners(props);
|
|
4292
4457
|
var shadows = getShadows(props);
|
|
@@ -4297,21 +4462,21 @@ var StyledPopper$2 = styles.styled(material.Popper, {
|
|
|
4297
4462
|
});
|
|
4298
4463
|
var StyledPaper$2 = styles.styled(material.Paper, {
|
|
4299
4464
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
4300
|
-
})(templateObject_2$
|
|
4465
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4301
4466
|
var shadows = getShadows(props);
|
|
4302
4467
|
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
4468
|
});
|
|
4304
|
-
var StyledAutocompleteGroupWrapper = styles.styled("div")(templateObject_3$
|
|
4469
|
+
var StyledAutocompleteGroupWrapper = styles.styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4305
4470
|
var StyledAutocompleteInput = styles.styled(InputSearch, {
|
|
4306
4471
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
4307
|
-
})(templateObject_4$
|
|
4472
|
+
})(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
4473
|
var search = _a.search;
|
|
4309
4474
|
return !search && "height: 0; display: none;";
|
|
4310
4475
|
}, function (_a) {
|
|
4311
4476
|
var search = _a.search;
|
|
4312
4477
|
return (search ? "auto" : "transparent");
|
|
4313
4478
|
});
|
|
4314
|
-
var templateObject_1$
|
|
4479
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$i, templateObject_4$g;
|
|
4315
4480
|
|
|
4316
4481
|
var AutocompleteMultiColumn = function (props) {
|
|
4317
4482
|
var _a;
|
|
@@ -4338,14 +4503,14 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4338
4503
|
});
|
|
4339
4504
|
onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
|
|
4340
4505
|
};
|
|
4341
|
-
return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, 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(
|
|
4506
|
+
return (jsxRuntime.jsx(material.ClickAwayListener, __assign({ onClickAway: onClickAway }, 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
4507
|
sdsType: "iconButton",
|
|
4343
4508
|
}, icon: "XMarkCircle", onClick: clearInput })) })),
|
|
4344
4509
|
/**
|
|
4345
4510
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
4346
4511
|
* mobile keyboard
|
|
4347
4512
|
*/
|
|
4348
|
-
inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(
|
|
4513
|
+
inputMode: "text", startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4349
4514
|
sdsType: "interactive",
|
|
4350
4515
|
}, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsxRuntime.jsx(PopperComponent, __assign({ modifiers: [
|
|
4351
4516
|
{
|
|
@@ -4418,25 +4583,25 @@ var Autocomplete = function (props) {
|
|
|
4418
4583
|
}
|
|
4419
4584
|
};
|
|
4420
4585
|
|
|
4421
|
-
var Centered = styles.styled("div")(templateObject_1$
|
|
4422
|
-
var IconWrapper$1 = styles.styled("div")(templateObject_2$
|
|
4586
|
+
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"])));
|
|
4587
|
+
var IconWrapper$1 = styles.styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4423
4588
|
var iconSizes = getIconSizes(props);
|
|
4424
4589
|
var spaces = getSpaces(props);
|
|
4425
4590
|
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
4591
|
});
|
|
4427
4592
|
var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
|
|
4428
|
-
var
|
|
4593
|
+
var StyledButton$2 = styles.styled(Button, {
|
|
4429
4594
|
shouldForwardProp: function (prop) {
|
|
4430
4595
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
4431
4596
|
},
|
|
4432
|
-
})(templateObject_3$
|
|
4597
|
+
})(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
4598
|
var bannerType = props.bannerType;
|
|
4434
4599
|
var colors = getColors(props);
|
|
4435
4600
|
if (bannerType !== "primary")
|
|
4436
4601
|
return "";
|
|
4437
4602
|
return "\n svg:hover {\n fill: ".concat(colors === null || colors === void 0 ? void 0 : colors.blue[300], ";\n }\n ");
|
|
4438
4603
|
});
|
|
4439
|
-
styles.styled("div")(templateObject_4$
|
|
4604
|
+
styles.styled("div")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
4440
4605
|
var primary$1 = function (props) {
|
|
4441
4606
|
var _a, _b, _c;
|
|
4442
4607
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
@@ -4452,12 +4617,12 @@ var secondary$1 = function (props) {
|
|
|
4452
4617
|
var doNotForwardProps$l = ["sdsType", "textChild"];
|
|
4453
4618
|
var StyledBanner = styles.styled("div", {
|
|
4454
4619
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
4455
|
-
})(templateObject_5$
|
|
4620
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
4456
4621
|
var sdsType = props.sdsType;
|
|
4457
4622
|
var spaces = getSpaces(props);
|
|
4458
4623
|
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
4624
|
});
|
|
4460
|
-
var templateObject_1$
|
|
4625
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$a;
|
|
4461
4626
|
|
|
4462
4627
|
var Banner = React.forwardRef(function Banner(props, ref) {
|
|
4463
4628
|
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 +4650,44 @@ var Banner = React.forwardRef(function Banner(props, ref) {
|
|
|
4485
4650
|
return (jsxRuntime.jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
|
|
4486
4651
|
}
|
|
4487
4652
|
};
|
|
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(
|
|
4653
|
+
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
4654
|
});
|
|
4490
4655
|
|
|
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 ");
|
|
4656
|
+
var BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE = {
|
|
4657
|
+
large: "xl",
|
|
4658
|
+
medium: "l",
|
|
4659
|
+
small: "s",
|
|
4544
4660
|
};
|
|
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
4661
|
/**
|
|
4563
4662
|
* @see https://mui.com/material-ui/react-button/
|
|
4564
4663
|
*/
|
|
4565
|
-
var
|
|
4566
|
-
var sdsStyle = props
|
|
4567
|
-
var
|
|
4568
|
-
|
|
4569
|
-
|
|
4570
|
-
|
|
4571
|
-
|
|
4572
|
-
|
|
4573
|
-
|
|
4664
|
+
var ButtonDropdown = React.forwardRef(function (props, ref) {
|
|
4665
|
+
var icon = props.icon, sdsStyle = props.sdsStyle, sdsType = props.sdsType, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, sdsIconProps = props.sdsIconProps;
|
|
4666
|
+
var iconSize = BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE[sdsSize];
|
|
4667
|
+
var iconItem = function () {
|
|
4668
|
+
if (icon) {
|
|
4669
|
+
if (typeof icon !== "string") {
|
|
4670
|
+
return icon;
|
|
4671
|
+
}
|
|
4672
|
+
else {
|
|
4673
|
+
return (jsxRuntime.jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
|
|
4674
|
+
}
|
|
4675
|
+
}
|
|
4676
|
+
};
|
|
4677
|
+
if (sdsStyle === "icon") {
|
|
4678
|
+
if (icon !== undefined) {
|
|
4679
|
+
return jsxRuntime.jsx(ButtonIcon, __assign({ icon: icon }, props, { ref: ref }));
|
|
4680
|
+
}
|
|
4681
|
+
else {
|
|
4682
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
4683
|
+
return null;
|
|
4684
|
+
}
|
|
4574
4685
|
}
|
|
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 }));
|
|
4686
|
+
else {
|
|
4687
|
+
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
4688
|
}
|
|
4594
4689
|
});
|
|
4595
4690
|
|
|
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
4691
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
4607
4692
|
|
|
4608
4693
|
var doNotForwardProps$k = ["calloutTitle", "collapsed", "severity"];
|
|
@@ -4679,11 +4764,11 @@ var Callout = function (_a) {
|
|
|
4679
4764
|
};
|
|
4680
4765
|
var getAction = function (collapsed) {
|
|
4681
4766
|
if (expandable) {
|
|
4682
|
-
return (jsxRuntime.jsx(
|
|
4767
|
+
return (jsxRuntime.jsx(Button, { "aria-label": collapsed ? "open" : "close", onClick: function () {
|
|
4683
4768
|
setStage(collapsed ? SDS_STAGE_OPEN : SDS_STAGE_CLOSED);
|
|
4684
|
-
}, sdsSize: "small", sdsType: "tertiary", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
|
|
4769
|
+
}, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
|
|
4685
4770
|
}
|
|
4686
|
-
return onClose ? (jsxRuntime.jsx(
|
|
4771
|
+
return onClose ? (jsxRuntime.jsx(Button, { "aria-label": "Dismiss", onClick: handleClose, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", size: "large", icon: "XMark" })) : null;
|
|
4687
4772
|
};
|
|
4688
4773
|
var collapsed = (expandable && stage === SDS_STAGE_CLOSED) || false;
|
|
4689
4774
|
// when there is no CalloutTitlecomponent, or there is a single child element
|
|
@@ -5071,6 +5156,10 @@ var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4
|
|
|
5071
5156
|
|
|
5072
5157
|
/**
|
|
5073
5158
|
* @see https://mui.com/material-ui/react-chip/
|
|
5159
|
+
*
|
|
5160
|
+
* @deprecated
|
|
5161
|
+
* This component is deprecated and will be removed in the next major version.
|
|
5162
|
+
* Please use `Tag` or `TagFilter` instead.
|
|
5074
5163
|
*/
|
|
5075
5164
|
var Chip = function (props) {
|
|
5076
5165
|
showWarningIfFirstOccurence(SDSWarningTypes.ChipDeprecated);
|
|
@@ -5160,6 +5249,17 @@ var DropdownMenu = function (props) {
|
|
|
5160
5249
|
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] }) })) }) })));
|
|
5161
5250
|
};
|
|
5162
5251
|
|
|
5252
|
+
var doNotForwardProps$e = [
|
|
5253
|
+
"intent",
|
|
5254
|
+
"state",
|
|
5255
|
+
"sdsStage",
|
|
5256
|
+
"sdsType",
|
|
5257
|
+
"isMinimal",
|
|
5258
|
+
"shouldTruncateMinimalDetails",
|
|
5259
|
+
"shouldPutAColonAfterLabel",
|
|
5260
|
+
"value",
|
|
5261
|
+
"sdsStyle",
|
|
5262
|
+
];
|
|
5163
5263
|
var labelFontBodyS = fontBody("s", "regular");
|
|
5164
5264
|
var labelFontBodyXs = fontBody("xs", "regular");
|
|
5165
5265
|
var inputDropdownStyles = function (props) {
|
|
@@ -5220,15 +5320,14 @@ var isDisabled = function (props) {
|
|
|
5220
5320
|
var semanticCommonColors = getSemanticComponentColors(props);
|
|
5221
5321
|
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
5322
|
};
|
|
5223
|
-
|
|
5224
|
-
|
|
5225
|
-
|
|
5226
|
-
|
|
5227
|
-
|
|
5228
|
-
|
|
5229
|
-
|
|
5230
|
-
|
|
5231
|
-
];
|
|
5323
|
+
/**
|
|
5324
|
+
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
5325
|
+
* temporary fix for the issue where the props are not correctly passed to
|
|
5326
|
+
* the underlying Button component. This is a workaround until a more permanent
|
|
5327
|
+
* solution is implemented. As a result of this fix, the style prop is not
|
|
5328
|
+
* passed to the underlying Button component. So we have added the style prop
|
|
5329
|
+
* to the InputDropdownProps interface.
|
|
5330
|
+
*/
|
|
5232
5331
|
var StyledInputDropdown = styles.styled(Button, {
|
|
5233
5332
|
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
5234
5333
|
})(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 +5592,7 @@ var templateObject_1$w, templateObject_2$h;
|
|
|
5493
5592
|
* @see https://mui.com/material-ui/react-chip/
|
|
5494
5593
|
*/
|
|
5495
5594
|
var TagFilter = function (props) {
|
|
5496
|
-
return (jsxRuntime.jsx(StyledTag, __assign({ role: "none presentation" }, props, { deleteIcon: jsxRuntime.jsx(
|
|
5595
|
+
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
5596
|
};
|
|
5498
5597
|
|
|
5499
5598
|
var Chips = function (_a) {
|
|
@@ -5665,7 +5764,7 @@ function DialogContent(props, ref) {
|
|
|
5665
5764
|
return jsxRuntime.jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
5666
5765
|
});
|
|
5667
5766
|
|
|
5668
|
-
var
|
|
5767
|
+
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
5768
|
var spaces = getSpaces(props);
|
|
5670
5769
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
5671
5770
|
});
|
|
@@ -5681,7 +5780,7 @@ var CloseButton = React.forwardRef(function CloseButton(props, ref) {
|
|
|
5681
5780
|
return (jsxRuntime.jsx(DialogContext.Consumer, { children: function (_a) {
|
|
5682
5781
|
var sdsSize = _a.sdsSize;
|
|
5683
5782
|
var size = SDS_SIZE_TO_COMPONENT_SIZE[sdsSize];
|
|
5684
|
-
return (jsxRuntime.jsx(
|
|
5783
|
+
return (jsxRuntime.jsx(StyledButton$1, __assign({ "aria-label": "Close", ref: ref, sdsSize: size }, props, { icon: "XMark", sdsStyle: "icon", sdsType: "tertiary" })));
|
|
5685
5784
|
} }));
|
|
5686
5785
|
});
|
|
5687
5786
|
|
|
@@ -5761,7 +5860,7 @@ var Dropdown = function (props) {
|
|
|
5761
5860
|
setValue(propValue);
|
|
5762
5861
|
}
|
|
5763
5862
|
}, [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:
|
|
5863
|
+
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
5864
|
function getInitialValue() {
|
|
5766
5865
|
return multiple
|
|
5767
5866
|
? []
|
|
@@ -5836,6 +5935,9 @@ var Dropdown = function (props) {
|
|
|
5836
5935
|
setOpen(false);
|
|
5837
5936
|
}
|
|
5838
5937
|
}
|
|
5938
|
+
function handleButtonClose(event) {
|
|
5939
|
+
handleClose(event, "selectOption");
|
|
5940
|
+
}
|
|
5839
5941
|
function handleCancel() {
|
|
5840
5942
|
if (multiple) {
|
|
5841
5943
|
// (masoudmanson): To undo the latest actions made on the selections,
|
|
@@ -6422,6 +6524,10 @@ var templateObject_1$d, templateObject_2$7, templateObject_3$3, templateObject_4
|
|
|
6422
6524
|
|
|
6423
6525
|
/**
|
|
6424
6526
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
6527
|
+
*
|
|
6528
|
+
* @deprecated
|
|
6529
|
+
* This component is deprecated and will be removed in the next major version.
|
|
6530
|
+
* Please use `Autocomplete` or `Dropdown` instead.
|
|
6425
6531
|
*/
|
|
6426
6532
|
var MenuSelect = function (props) {
|
|
6427
6533
|
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 +6546,7 @@ var MenuSelect = function (props) {
|
|
|
6440
6546
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
6441
6547
|
* mobile keyboard
|
|
6442
6548
|
*/
|
|
6443
|
-
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsxRuntime.jsx(material.InputAdornment, { position: "end", children: jsxRuntime.jsx(
|
|
6549
|
+
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
6550
|
sdsType: "interactive",
|
|
6445
6551
|
}, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
|
|
6446
6552
|
if (event && event.type === "blur") {
|
|
@@ -6754,7 +6860,7 @@ var Notification = function (_a) {
|
|
|
6754
6860
|
}
|
|
6755
6861
|
}
|
|
6756
6862
|
};
|
|
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(
|
|
6863
|
+
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
6864
|
};
|
|
6759
6865
|
|
|
6760
6866
|
var doNotForwardProps$2 = [
|
|
@@ -6770,13 +6876,10 @@ var doNotForwardProps$2 = [
|
|
|
6770
6876
|
"pageSize",
|
|
6771
6877
|
"truncateDropdown",
|
|
6772
6878
|
];
|
|
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) {
|
|
6879
|
+
var StyledPaginationButton = styles.styled(Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6776
6880
|
var _a, _b, _c;
|
|
6777
|
-
var disabled = props.disabled;
|
|
6778
6881
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6779
|
-
return "\n width: 32px;\n height: 32px;\n cursor: "
|
|
6882
|
+
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
6883
|
});
|
|
6781
6884
|
var StyledPaginationChevronList = styles.styled("li", {
|
|
6782
6885
|
shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
|
|
@@ -6821,7 +6924,7 @@ var PageListDropdown = function (props) {
|
|
|
6821
6924
|
var handleClose = function () {
|
|
6822
6925
|
setAnchorEl(null);
|
|
6823
6926
|
};
|
|
6824
|
-
return (jsxRuntime.jsxs(Page, { sdsStyle: sdsStyle, children: [jsxRuntime.jsx(
|
|
6927
|
+
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
6928
|
return (jsxRuntime.jsx(MenuItem, { onClick: function () {
|
|
6826
6929
|
onPageChange(page);
|
|
6827
6930
|
handleClose();
|
|
@@ -6904,7 +7007,7 @@ var Pagination = React.forwardRef(function (props, ref) {
|
|
|
6904
7007
|
if (truncateDropdown) {
|
|
6905
7008
|
return (jsxRuntime.jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
|
|
6906
7009
|
}
|
|
6907
|
-
return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(
|
|
7010
|
+
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
7011
|
}
|
|
6909
7012
|
return (jsxRuntime.jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, children: pageNumber }, pageNumber));
|
|
6910
7013
|
}), 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 +7370,7 @@ exports.TagFilter = TagFilter;
|
|
|
7267
7370
|
exports.Tooltip = Tooltip;
|
|
7268
7371
|
exports.TooltipCondensed = TooltipCondensed;
|
|
7269
7372
|
exports.TooltipTable = TooltipTableContent;
|
|
7373
|
+
exports.defaultAppTheme = defaultAppTheme;
|
|
7270
7374
|
exports.defaultTheme = defaultTheme;
|
|
7271
7375
|
exports.focusVisibleA11yStyle = focusVisibleA11yStyle;
|
|
7272
7376
|
exports.fontBody = fontBody;
|
|
@@ -7317,3 +7421,4 @@ exports.getShadows = getShadows;
|
|
|
7317
7421
|
exports.getSpaces = getSpaces;
|
|
7318
7422
|
exports.getSpacings = getSpacings;
|
|
7319
7423
|
exports.getTypography = getTypography;
|
|
7424
|
+
exports.makeThemeOptions = makeThemeOptions;
|