@czi-sds/components 20.0.1 → 20.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +130 -56
- package/dist/index.cjs.js +450 -247
- package/dist/index.esm.d.ts +130 -56
- package/dist/index.esm.js +450 -249
- package/dist/tailwind.json +1 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +5 -3
- package/dist/variables.scss +5 -3
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -2,7 +2,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
import React__default, { forwardRef, useState, useCallback, useEffect, useRef, useMemo, createContext, useContext } from 'react';
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
|
-
import { colors, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, Popper, ClickAwayListener,
|
|
5
|
+
import { colors, AccordionDetails as AccordionDetails$1, AccordionSummary, accordionSummaryClasses, SvgIcon, Accordion as Accordion$1, accordionClasses, accordionDetailsClasses, Alert as Alert$2, Button as Button$1, buttonClasses, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, Popper, ClickAwayListener, alertClasses, alertTitleClasses, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, dialogActionsClasses, DialogContent, DialogTitle as DialogTitle$1, Typography, Checkbox, checkboxClasses, FormControlLabel, Radio, radioClasses, Slider, sliderClasses, Switch, switchClasses, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, menuClasses, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, ToggleButtonGroup, toggleButtonClasses, ToggleButton, useTheme as useTheme$1, TableCell, TableContainer, Table as Table$1, TableBody, TableRow as TableRow$1 } from '@mui/material';
|
|
6
6
|
import { createTheme, styled, useTheme } from '@mui/material/styles';
|
|
7
7
|
import { Check, Remove, Clear } from '@mui/icons-material';
|
|
8
8
|
import { css as css$1 } from '@emotion/css';
|
|
@@ -449,14 +449,14 @@ var SDSAppTheme = {
|
|
|
449
449
|
// override every theme property that makes use of colors.
|
|
450
450
|
SDSAppTheme.borders = {
|
|
451
451
|
accent: {
|
|
452
|
-
dashed: "
|
|
452
|
+
dashed: "1px dashed ".concat(SDSAppTheme.colors.blue[400]),
|
|
453
453
|
default: "1px solid ".concat(SDSAppTheme.colors.blue[400]),
|
|
454
454
|
disabled: "1px solid ".concat(SDSAppTheme.colors.blue[300]),
|
|
455
455
|
hover: "1px solid ".concat(SDSAppTheme.colors.blue[500]),
|
|
456
456
|
},
|
|
457
457
|
base: {
|
|
458
458
|
black: "1px solid ".concat(SDSAppTheme.colors.common.black),
|
|
459
|
-
dashed: "
|
|
459
|
+
dashed: "1px dashed ".concat(SDSAppTheme.colors.gray[400]),
|
|
460
460
|
default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
|
|
461
461
|
disabled: "1px solid ".concat(SDSAppTheme.colors.gray[300]),
|
|
462
462
|
divider: "1px solid ".concat(SDSAppTheme.colors.gray[200]),
|
|
@@ -476,6 +476,9 @@ SDSAppTheme.borders = {
|
|
|
476
476
|
negative: {
|
|
477
477
|
default: "1px solid ".concat(SDSAppTheme.colors.red[400]),
|
|
478
478
|
},
|
|
479
|
+
neutral: {
|
|
480
|
+
default: "1px solid ".concat(SDSAppTheme.colors.gray[400]),
|
|
481
|
+
},
|
|
479
482
|
none: "none",
|
|
480
483
|
notice: {
|
|
481
484
|
default: "1px solid ".concat(SDSAppTheme.colors.yellow[400]),
|
|
@@ -670,6 +673,7 @@ function makeThemeOptions(appTheme) {
|
|
|
670
673
|
beta: appTheme.colors.purple[600],
|
|
671
674
|
info: appTheme.colors.blue[600],
|
|
672
675
|
negative: appTheme.colors.red[600],
|
|
676
|
+
neutral: appTheme.colors.gray[600],
|
|
673
677
|
notice: appTheme.colors.yellow[600],
|
|
674
678
|
positive: appTheme.colors.green[600],
|
|
675
679
|
},
|
|
@@ -795,6 +799,10 @@ function makeThemeOptions(appTheme) {
|
|
|
795
799
|
|
|
796
800
|
var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
|
|
797
801
|
var defaultTheme = createTheme(defaultThemeOptions);
|
|
802
|
+
/**
|
|
803
|
+
* (masoudmanson): This is to keep the old defaultAppTheme export for backward compatibility.
|
|
804
|
+
*/
|
|
805
|
+
var defaultAppTheme = defaultTheme;
|
|
798
806
|
|
|
799
807
|
function focusVisibleA11yStyle() {
|
|
800
808
|
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n ";
|
|
@@ -3530,15 +3538,15 @@ function interactive(props) {
|
|
|
3530
3538
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3531
3539
|
return 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);
|
|
3532
3540
|
}
|
|
3533
|
-
var doNotForwardProps$
|
|
3541
|
+
var doNotForwardProps$q = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
|
|
3534
3542
|
var StyledSvgIcon = styled(SvgIcon, {
|
|
3535
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3543
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$q.includes(prop); },
|
|
3536
3544
|
})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3537
3545
|
var sdsType = props.sdsType;
|
|
3538
3546
|
return 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());
|
|
3539
3547
|
});
|
|
3540
|
-
var StyledIcon = styled("div")(templateObject_7$
|
|
3541
|
-
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$g, templateObject_6$c, templateObject_7$
|
|
3548
|
+
var StyledIcon = 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"])));
|
|
3549
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$q, templateObject_4$m, templateObject_5$g, templateObject_6$c, templateObject_7$a;
|
|
3542
3550
|
|
|
3543
3551
|
/**
|
|
3544
3552
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -3564,10 +3572,10 @@ var AccordionHeader = function (props) {
|
|
|
3564
3572
|
return (jsxs(StyledAccordionHeader, { "aria-controls": "".concat(id, "-panel-content"), id: id, expandIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "static" }), children: [children, subtitle && jsx(StyledSubtitle, { children: subtitle })] }));
|
|
3565
3573
|
};
|
|
3566
3574
|
|
|
3567
|
-
var sdsPropNames$
|
|
3575
|
+
var sdsPropNames$3 = ["useDivider", "togglePosition"];
|
|
3568
3576
|
var StyledAccordion = styled(Accordion$1, {
|
|
3569
3577
|
shouldForwardProp: function (prop) {
|
|
3570
|
-
return !sdsPropNames$
|
|
3578
|
+
return !sdsPropNames$3.includes(prop.toString());
|
|
3571
3579
|
},
|
|
3572
3580
|
})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3573
3581
|
var _a, _b;
|
|
@@ -3631,6 +3639,10 @@ var templateObject_1$P;
|
|
|
3631
3639
|
|
|
3632
3640
|
/**
|
|
3633
3641
|
* @see https://mui.com/material-ui/react-alert/
|
|
3642
|
+
*
|
|
3643
|
+
* @deprecated
|
|
3644
|
+
* This component is deprecated and will be removed in the next major version.
|
|
3645
|
+
* Please use `Callout` or `Notification` instead.
|
|
3634
3646
|
*/
|
|
3635
3647
|
var Alert$1 = function (props) {
|
|
3636
3648
|
return jsx(StyledAlert, __assign({}, props));
|
|
@@ -3641,23 +3653,42 @@ var toKebabCase = function (str) {
|
|
|
3641
3653
|
return str.replace(/[\s_]+/g, "-").toLowerCase();
|
|
3642
3654
|
};
|
|
3643
3655
|
var EMPTY_OBJECT = {};
|
|
3656
|
+
function filterProps(props, excludeProps) {
|
|
3657
|
+
var result = {};
|
|
3658
|
+
for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {
|
|
3659
|
+
var key = _a[_i];
|
|
3660
|
+
if (!excludeProps.includes(key)) {
|
|
3661
|
+
result[key] = props[key];
|
|
3662
|
+
}
|
|
3663
|
+
}
|
|
3664
|
+
return result;
|
|
3665
|
+
}
|
|
3644
3666
|
|
|
3645
3667
|
var _a;
|
|
3646
3668
|
var SDSWarningTypes;
|
|
3647
3669
|
(function (SDSWarningTypes) {
|
|
3670
|
+
SDSWarningTypes["ButtonMinimalIsAllCaps"] = "buttonMinimalIsAllCaps";
|
|
3648
3671
|
SDSWarningTypes["ButtonMissingSDSProps"] = "buttonMissingProps";
|
|
3672
|
+
SDSWarningTypes["ButtonIconMissingIconProp"] = "buttonIconMissingIconProp";
|
|
3649
3673
|
SDSWarningTypes["ChipDeprecated"] = "chipDeprecated";
|
|
3650
3674
|
SDSWarningTypes["MenuSelectDeprecated"] = "menuSelectDeprecated";
|
|
3651
|
-
SDSWarningTypes["ButtonIconMediumSize"] = "buttonIconMediumSize";
|
|
3652
3675
|
SDSWarningTypes["TooltipSubtitle"] = "tooltipSubtitle";
|
|
3653
3676
|
SDSWarningTypes["TooltipWidth"] = "tooltipWidth";
|
|
3654
3677
|
SDSWarningTypes["TooltipInverted"] = "tooltipInverted";
|
|
3655
3678
|
})(SDSWarningTypes || (SDSWarningTypes = {}));
|
|
3656
3679
|
var SDS_WARNINGS = (_a = {},
|
|
3680
|
+
_a[SDSWarningTypes.ButtonMinimalIsAllCaps] = {
|
|
3681
|
+
hasWarned: false,
|
|
3682
|
+
message: "Warning: isAllCaps is only applied to buttons with sdsStyle='minimal'.",
|
|
3683
|
+
},
|
|
3657
3684
|
_a[SDSWarningTypes.ButtonMissingSDSProps] = {
|
|
3658
3685
|
hasWarned: false,
|
|
3659
3686
|
message: "Warning: Buttons without sdsStyle or sdsType props will be deprecated.",
|
|
3660
3687
|
},
|
|
3688
|
+
_a[SDSWarningTypes.ButtonIconMissingIconProp] = {
|
|
3689
|
+
hasWarned: false,
|
|
3690
|
+
message: "Warning: Buttons with an SDS type of icon require an icon prop to be provided.",
|
|
3691
|
+
},
|
|
3661
3692
|
_a[SDSWarningTypes.ChipDeprecated] = {
|
|
3662
3693
|
hasWarned: false,
|
|
3663
3694
|
message: "Warning: <Chip /> will be deprecated and replaced with <Tag />",
|
|
@@ -3666,10 +3697,6 @@ var SDS_WARNINGS = (_a = {},
|
|
|
3666
3697
|
hasWarned: false,
|
|
3667
3698
|
message: "Warning: MenuSelect will be deprecated and replaced with <DropdownMenu />",
|
|
3668
3699
|
},
|
|
3669
|
-
_a[SDSWarningTypes.ButtonIconMediumSize] = {
|
|
3670
|
-
hasWarned: false,
|
|
3671
|
-
message: "Warning: A medium size ButtonIcon can only be of type tertiary!",
|
|
3672
|
-
},
|
|
3673
3700
|
_a[SDSWarningTypes.TooltipSubtitle] = {
|
|
3674
3701
|
hasWarned: false,
|
|
3675
3702
|
message: "Warning: The 'subtitle' text is only available for dark tooltips!",
|
|
@@ -3699,46 +3726,128 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
3699
3726
|
SDS_WARNINGS[warningType].hasWarned = true;
|
|
3700
3727
|
};
|
|
3701
3728
|
|
|
3702
|
-
var
|
|
3703
|
-
|
|
3704
|
-
|
|
3705
|
-
|
|
3706
|
-
|
|
3729
|
+
var doNotForwardProps$p = [
|
|
3730
|
+
"isAllCaps",
|
|
3731
|
+
"isRounded",
|
|
3732
|
+
"sdsStyle",
|
|
3733
|
+
"sdsType",
|
|
3734
|
+
"sdsSize",
|
|
3735
|
+
];
|
|
3736
|
+
// Rounded + Square Button Styles
|
|
3737
|
+
var ButtonStyles = function (props) {
|
|
3738
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
|
|
3739
|
+
var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
|
|
3740
|
+
var spaces = getSpaces(props);
|
|
3741
|
+
var shadows = getShadows(props);
|
|
3742
|
+
var iconSizes = getIconSizes(props);
|
|
3743
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3744
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3745
|
+
var hasIcon = !!startIcon || !!endIcon;
|
|
3746
|
+
// (masoudmanson): The padding depends on the presence of an icon.
|
|
3747
|
+
// If the component has either a startIcon or endIcon, the padding will be spaces?.m pixels.
|
|
3748
|
+
// If the component doesn't have any icon at all, the padding will be spaces?.l pixels.
|
|
3749
|
+
var padding = hasIcon
|
|
3750
|
+
? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
|
|
3751
|
+
: "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px");
|
|
3752
|
+
var contentColor = variant === "outlined"
|
|
3753
|
+
? (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default
|
|
3754
|
+
: (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
|
|
3755
|
+
return 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, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.s);
|
|
3707
3756
|
};
|
|
3708
|
-
var
|
|
3757
|
+
var Rounded = function (props) {
|
|
3758
|
+
var corners = getCorners(props);
|
|
3759
|
+
return 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);
|
|
3760
|
+
};
|
|
3761
|
+
var DestructiveButton = function (props) {
|
|
3762
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
|
|
3763
|
+
var variant = props.variant;
|
|
3764
|
+
var shadows = getShadows(props);
|
|
3765
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3766
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3767
|
+
var contentColor = variant === "outlined"
|
|
3768
|
+
? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.icon
|
|
3769
|
+
: (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill;
|
|
3770
|
+
var backgroundColor = variant === "outlined"
|
|
3771
|
+
? "transparent"
|
|
3772
|
+
: (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.fill;
|
|
3773
|
+
return 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);
|
|
3774
|
+
};
|
|
3775
|
+
var StyledButton$3 = styled(Button$1, {
|
|
3776
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
3777
|
+
})(templateObject_5$f || (templateObject_5$f = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodySemiboldXs, focusVisibleA11yStyle, function (props) {
|
|
3778
|
+
var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
|
|
3779
|
+
return 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));
|
|
3780
|
+
});
|
|
3781
|
+
// Minimal Button Styles
|
|
3782
|
+
var Minimal = function (props) {
|
|
3783
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
3784
|
+
var spaces = getSpaces(props);
|
|
3785
|
+
var iconSizes = getIconSizes(props);
|
|
3786
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3787
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3788
|
+
return 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, buttonClasses.startIcon, 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, buttonClasses.startIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, buttonClasses.endIcon, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
3789
|
+
};
|
|
3790
|
+
var PrimaryMinimalButton = function (props) {
|
|
3709
3791
|
var _a;
|
|
3710
|
-
var
|
|
3711
|
-
return css(
|
|
3792
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3793
|
+
return 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);
|
|
3794
|
+
};
|
|
3795
|
+
var SecondaryMinimalButton = function (props) {
|
|
3796
|
+
var _a;
|
|
3797
|
+
var semanticTextColors = getSemanticTextColors(props);
|
|
3798
|
+
return 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);
|
|
3799
|
+
};
|
|
3800
|
+
var StyledMinimalButton = styled(Button$1, {
|
|
3801
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
3802
|
+
})(templateObject_10$2 || (templateObject_10$2 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3803
|
+
var sdsType = props.sdsType;
|
|
3804
|
+
return css(templateObject_9$4 || (templateObject_9$4 = __makeTemplateObject(["\n ", "\n ", "\n "], ["\n ", "\n ", "\n "])), sdsType === "primary" && PrimaryMinimalButton(props), sdsType === "secondary" && SecondaryMinimalButton(props));
|
|
3805
|
+
});
|
|
3806
|
+
var StyledButtonLegacy = styled(Button$1, {
|
|
3807
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$p.includes(prop); },
|
|
3808
|
+
})(templateObject_11$1 || (templateObject_11$1 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
3809
|
+
if (!props.isRounded)
|
|
3810
|
+
return "";
|
|
3811
|
+
var corners = getCorners(props);
|
|
3812
|
+
var spaces = getSpaces(props);
|
|
3813
|
+
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 ");
|
|
3814
|
+
});
|
|
3815
|
+
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;
|
|
3816
|
+
|
|
3817
|
+
var isDisabled$1 = function (props) {
|
|
3818
|
+
var _a, _b;
|
|
3819
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3820
|
+
return 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);
|
|
3712
3821
|
};
|
|
3713
3822
|
var primary$2 = function (props) {
|
|
3714
|
-
var
|
|
3715
|
-
var
|
|
3716
|
-
return css(
|
|
3823
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
3824
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3825
|
+
return 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);
|
|
3717
3826
|
};
|
|
3718
3827
|
var secondary$2 = function (props) {
|
|
3719
|
-
var
|
|
3720
|
-
|
|
3828
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
3829
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3830
|
+
return 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);
|
|
3721
3831
|
};
|
|
3722
3832
|
var tertiary = function (props) {
|
|
3723
|
-
var
|
|
3724
|
-
|
|
3833
|
+
var _a, _b, _c, _d, _e, _f;
|
|
3834
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3835
|
+
return 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);
|
|
3725
3836
|
};
|
|
3726
3837
|
var small$1 = function (props) {
|
|
3838
|
+
var sdsType = props.sdsType;
|
|
3727
3839
|
var iconSizes = getIconSizes(props);
|
|
3728
|
-
return css(
|
|
3840
|
+
return 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;" : "");
|
|
3729
3841
|
};
|
|
3730
3842
|
var medium$1 = function (props) {
|
|
3731
3843
|
var sdsType = props.sdsType;
|
|
3732
3844
|
var iconSizes = getIconSizes(props);
|
|
3733
|
-
|
|
3734
|
-
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMediumSize);
|
|
3735
|
-
}
|
|
3736
|
-
return 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);
|
|
3845
|
+
return 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;" : "");
|
|
3737
3846
|
};
|
|
3738
3847
|
var large = function (props) {
|
|
3739
3848
|
var sdsType = props.sdsType;
|
|
3740
3849
|
var iconSizes = getIconSizes(props);
|
|
3741
|
-
return css(
|
|
3850
|
+
return 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;" : "");
|
|
3742
3851
|
};
|
|
3743
3852
|
var doNotForwardProps$o = [
|
|
3744
3853
|
"on",
|
|
@@ -3747,13 +3856,13 @@ var doNotForwardProps$o = [
|
|
|
3747
3856
|
"sdsIcon",
|
|
3748
3857
|
"sdsIconProps",
|
|
3749
3858
|
];
|
|
3750
|
-
var StyledButtonIcon
|
|
3859
|
+
var StyledButtonIcon = styled(IconButton, {
|
|
3751
3860
|
shouldForwardProp: function (prop) { return !doNotForwardProps$o.includes(prop); },
|
|
3752
|
-
})(
|
|
3753
|
-
var
|
|
3754
|
-
return css(
|
|
3861
|
+
})(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n padding: 0;\n ", "\n\n ", "\n"], ["\n padding: 0;\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
3862
|
+
var disabled = props.disabled, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, _b = props.sdsType, sdsType = _b === void 0 ? "primary" : _b;
|
|
3863
|
+
return 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));
|
|
3755
3864
|
});
|
|
3756
|
-
var templateObject_1$
|
|
3865
|
+
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;
|
|
3757
3866
|
|
|
3758
3867
|
var ButtonIconSizeToSdsIconSize = {
|
|
3759
3868
|
large: "xl",
|
|
@@ -3762,6 +3871,10 @@ var ButtonIconSizeToSdsIconSize = {
|
|
|
3762
3871
|
};
|
|
3763
3872
|
/**
|
|
3764
3873
|
* @see https://mui.com/material-ui/react-button/#icon-buttons
|
|
3874
|
+
*
|
|
3875
|
+
* @deprecated
|
|
3876
|
+
* This component is deprecated and will be removed in the next major version.
|
|
3877
|
+
* Please use `Button` or `ButtonDropdown` with `sdsStyle: icon` instead.
|
|
3765
3878
|
*/
|
|
3766
3879
|
var ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
|
|
3767
3880
|
/**
|
|
@@ -3786,25 +3899,77 @@ var ButtonIcon = forwardRef(function ButtonIcon(props, ref) {
|
|
|
3786
3899
|
}
|
|
3787
3900
|
}
|
|
3788
3901
|
};
|
|
3789
|
-
return (jsx(StyledButtonIcon
|
|
3902
|
+
return (jsx(StyledButtonIcon, __assign({}, props, { ref: ref, children: iconItem() })));
|
|
3903
|
+
});
|
|
3904
|
+
|
|
3905
|
+
/**
|
|
3906
|
+
* (masoudmanson): The MUI variant prop is determined by the sdsType prop.
|
|
3907
|
+
*/
|
|
3908
|
+
var MUI_VARIANT_MAP = {
|
|
3909
|
+
destructive: "contained",
|
|
3910
|
+
primary: "contained",
|
|
3911
|
+
secondary: "outlined",
|
|
3912
|
+
tertiary: "text",
|
|
3913
|
+
};
|
|
3914
|
+
/**
|
|
3915
|
+
* @see https://mui.com/material-ui/react-button/
|
|
3916
|
+
*/
|
|
3917
|
+
var Button = React__default.forwardRef(function (props, ref) {
|
|
3918
|
+
var sdsStyle = props.sdsStyle, sdsType = props.sdsType;
|
|
3919
|
+
if (!sdsStyle || !sdsType) {
|
|
3920
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonMissingSDSProps);
|
|
3921
|
+
}
|
|
3922
|
+
if (typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" && sdsStyle !== "minimal") {
|
|
3923
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonMinimalIsAllCaps);
|
|
3924
|
+
}
|
|
3925
|
+
// isAllCaps is only used for the Minimal Button. It defaults to true.
|
|
3926
|
+
var isAllCaps = typeof (props === null || props === void 0 ? void 0 : props.isAllCaps) === "boolean" ? props === null || props === void 0 ? void 0 : props.isAllCaps : true;
|
|
3927
|
+
var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
|
|
3928
|
+
switch (true) {
|
|
3929
|
+
case sdsStyle === "icon":
|
|
3930
|
+
if ((props === null || props === void 0 ? void 0 : props.icon) !== undefined) {
|
|
3931
|
+
// (masoudmanson): We need to remove the props that are not supported by
|
|
3932
|
+
// the ButtonIcon component.
|
|
3933
|
+
var excludedProps = [
|
|
3934
|
+
"startIcon",
|
|
3935
|
+
"endIcon",
|
|
3936
|
+
"sdsStyle",
|
|
3937
|
+
"isAllCaps",
|
|
3938
|
+
"sdsType",
|
|
3939
|
+
];
|
|
3940
|
+
var finalProps = filterProps(propsWithDefault, excludedProps);
|
|
3941
|
+
return (jsx(ButtonIcon, __assign({ icon: props === null || props === void 0 ? void 0 : props.icon }, finalProps, { sdsType: sdsType, ref: ref })));
|
|
3942
|
+
}
|
|
3943
|
+
else {
|
|
3944
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
3945
|
+
return null;
|
|
3946
|
+
}
|
|
3947
|
+
case sdsStyle === "minimal":
|
|
3948
|
+
return (jsx(StyledMinimalButton, __assign({ color: "primary", variant: "text" }, propsWithDefault, { ref: ref })));
|
|
3949
|
+
case sdsStyle === "rounded":
|
|
3950
|
+
case sdsStyle === "square":
|
|
3951
|
+
return (jsx(StyledButton$3, __assign({ color: "primary", variant: sdsType ? MUI_VARIANT_MAP[sdsType] : "text" }, propsWithDefault, { ref: ref })));
|
|
3952
|
+
default:
|
|
3953
|
+
return jsx(StyledButtonLegacy, __assign({}, propsWithDefault, { ref: ref }));
|
|
3954
|
+
}
|
|
3790
3955
|
});
|
|
3791
3956
|
|
|
3792
|
-
var sdsPropNames$
|
|
3957
|
+
var sdsPropNames$2 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
|
|
3793
3958
|
var rounded$3 = function (props) {
|
|
3794
3959
|
var _a;
|
|
3795
3960
|
var corners = getCorners(props);
|
|
3796
3961
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3797
|
-
return css(templateObject_1$
|
|
3962
|
+
return 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 "])), outlinedInputClasses.root, corners === null || corners === void 0 ? void 0 : corners.l, 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);
|
|
3798
3963
|
};
|
|
3799
3964
|
var error$3 = function (props) {
|
|
3800
3965
|
var _a, _b, _c, _d;
|
|
3801
3966
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3802
|
-
return css(templateObject_2$
|
|
3967
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.negative) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
|
|
3803
3968
|
};
|
|
3804
3969
|
var warning$3 = function (props) {
|
|
3805
3970
|
var _a, _b, _c, _d;
|
|
3806
3971
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3807
|
-
return css(templateObject_3$
|
|
3972
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _a === void 0 ? void 0 : _a.border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _b === void 0 ? void 0 : _b.border, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.notice) === null || _c === void 0 ? void 0 : _c.border, inputAdornmentClasses.root, buttonBaseClasses.root, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.icon);
|
|
3808
3973
|
};
|
|
3809
3974
|
var userInput$2 = function (props) {
|
|
3810
3975
|
var _a, _b, _c, _d, _e;
|
|
@@ -3818,21 +3983,21 @@ var userInput$2 = function (props) {
|
|
|
3818
3983
|
var color = intent === "default"
|
|
3819
3984
|
? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.icon
|
|
3820
3985
|
: (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon;
|
|
3821
|
-
return css(templateObject_4$
|
|
3986
|
+
return 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 "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, inputAdornmentClasses.root, color);
|
|
3822
3987
|
};
|
|
3823
3988
|
var disabledStyled$2 = function (props) {
|
|
3824
3989
|
var _a, _b, _c;
|
|
3825
3990
|
var colors = getColors(props);
|
|
3826
3991
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3827
|
-
return css(templateObject_5$
|
|
3992
|
+
return 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 "])), outlinedInputClasses.disabled, outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, 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]);
|
|
3828
3993
|
};
|
|
3829
|
-
var StyledLabel$2 = styled("label")(templateObject_6$
|
|
3994
|
+
var StyledLabel$2 = styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
3830
3995
|
var spaces = getSpaces(props);
|
|
3831
3996
|
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 ");
|
|
3832
3997
|
});
|
|
3833
3998
|
var StyledSearchBase = styled(TextField, {
|
|
3834
3999
|
shouldForwardProp: function (prop) {
|
|
3835
|
-
return !sdsPropNames$
|
|
4000
|
+
return !sdsPropNames$2.includes(prop.toString());
|
|
3836
4001
|
},
|
|
3837
4002
|
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3838
4003
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
@@ -3843,9 +4008,9 @@ var StyledSearchBase = styled(TextField, {
|
|
|
3843
4008
|
return 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, 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, 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, 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, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, inputAdornmentClasses.root, 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));
|
|
3844
4009
|
});
|
|
3845
4010
|
var StyledInputAdornment = styled(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"])));
|
|
3846
|
-
var templateObject_1$
|
|
4011
|
+
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;
|
|
3847
4012
|
|
|
3848
|
-
var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$
|
|
4013
|
+
var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3849
4014
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
3850
4015
|
var selected = props.selected;
|
|
3851
4016
|
var colors = getColors(props);
|
|
@@ -3855,7 +4020,7 @@ var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$M || (templateObject_
|
|
|
3855
4020
|
var primary = colors === null || colors === void 0 ? void 0 : colors.blue[400];
|
|
3856
4021
|
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(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(menuItemClasses.root, " .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.").concat(menuItemClasses.root, " .").concat(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 ");
|
|
3857
4022
|
});
|
|
3858
|
-
var ContentWrapper = styled("span")(templateObject_2$
|
|
4023
|
+
var ContentWrapper = 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"])));
|
|
3859
4024
|
var disabledStyles = function (props) {
|
|
3860
4025
|
var _a;
|
|
3861
4026
|
var disabled = props.disabled;
|
|
@@ -3864,12 +4029,12 @@ var disabledStyles = function (props) {
|
|
|
3864
4029
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3865
4030
|
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 ");
|
|
3866
4031
|
};
|
|
3867
|
-
var TextWrapper = styled("span")(templateObject_3$
|
|
4032
|
+
var TextWrapper = 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) {
|
|
3868
4033
|
var _a;
|
|
3869
4034
|
var semanticTextColors = getSemanticTextColors(props);
|
|
3870
4035
|
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 ");
|
|
3871
4036
|
}, disabledStyles);
|
|
3872
|
-
var StyledMenuItemIcon = styled("span")(templateObject_4$
|
|
4037
|
+
var StyledMenuItemIcon = styled("span")(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3873
4038
|
var _a;
|
|
3874
4039
|
var disabled = props.disabled;
|
|
3875
4040
|
var spaces = getSpaces(props);
|
|
@@ -3877,13 +4042,13 @@ var StyledMenuItemIcon = styled("span")(templateObject_4$j || (templateObject_4$
|
|
|
3877
4042
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
3878
4043
|
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 ");
|
|
3879
4044
|
});
|
|
3880
|
-
var ColumnWrapper = styled("span")(templateObject_5$
|
|
4045
|
+
var ColumnWrapper = 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) {
|
|
3881
4046
|
var _a;
|
|
3882
4047
|
var semanticTextColors = getSemanticTextColors(props);
|
|
3883
4048
|
var spaces = getSpaces(props);
|
|
3884
4049
|
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 ");
|
|
3885
4050
|
}, disabledStyles);
|
|
3886
|
-
var StyledIconWrapper = styled("span")(templateObject_6$
|
|
4051
|
+
var StyledIconWrapper = styled("span")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3887
4052
|
var spaces = getSpaces(props);
|
|
3888
4053
|
var iconSizes = getIconSizes(props);
|
|
3889
4054
|
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 ");
|
|
@@ -3912,7 +4077,7 @@ var StyledMinus = styled(Remove, {
|
|
|
3912
4077
|
: (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon;
|
|
3913
4078
|
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 ");
|
|
3914
4079
|
});
|
|
3915
|
-
var templateObject_1$
|
|
4080
|
+
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;
|
|
3916
4081
|
|
|
3917
4082
|
/**
|
|
3918
4083
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -4005,10 +4170,10 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
|
4005
4170
|
return (jsxs(Fragment, { children: [jsx(StyledLabel$2, { htmlFor: id, children: label }), jsx(StyledSearchBase, __assign({ ref: ref,
|
|
4006
4171
|
// passed to mui Input
|
|
4007
4172
|
InputProps: {
|
|
4008
|
-
endAdornment: (jsx(StyledInputAdornment, { position: "end", children: jsx(
|
|
4173
|
+
endAdornment: (jsx(StyledInputAdornment, { position: "end", children: jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4009
4174
|
sdsType: "iconButton",
|
|
4010
4175
|
}, icon: "XMarkCircle" }) })),
|
|
4011
|
-
startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(
|
|
4176
|
+
startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4012
4177
|
sdsType: "interactive",
|
|
4013
4178
|
}, icon: "Search" }) })),
|
|
4014
4179
|
}, type: "search", id: id, variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent,
|
|
@@ -4029,7 +4194,7 @@ var doNotForwardProps$n = [
|
|
|
4029
4194
|
];
|
|
4030
4195
|
var StyledAutocompleteBase = styled(Autocomplete$1, {
|
|
4031
4196
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
4032
|
-
})(templateObject_1$
|
|
4197
|
+
})(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), autocompleteClasses.popper, autocompleteClasses.paper, autocompleteClasses.groupLabel, fontCapsXxxxs, function (props) {
|
|
4033
4198
|
var _a, _b, _c, _d, _e;
|
|
4034
4199
|
var search = props.search;
|
|
4035
4200
|
var spaces = getSpaces(props);
|
|
@@ -4040,7 +4205,7 @@ var StyledAutocompleteBase = styled(Autocomplete$1, {
|
|
|
4040
4205
|
});
|
|
4041
4206
|
var InputBaseWrapper$1 = styled("div", {
|
|
4042
4207
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
4043
|
-
})(templateObject_2$
|
|
4208
|
+
})(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4044
4209
|
var search = props.search;
|
|
4045
4210
|
if (!search) {
|
|
4046
4211
|
// (thuang): We cannot use `display: none;` here, since
|
|
@@ -4051,11 +4216,11 @@ var InputBaseWrapper$1 = styled("div", {
|
|
|
4051
4216
|
});
|
|
4052
4217
|
var StyledMenuInputSearch$1 = styled(InputSearch, {
|
|
4053
4218
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
4054
|
-
})(templateObject_3$
|
|
4219
|
+
})(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) {
|
|
4055
4220
|
var search = _a.search;
|
|
4056
4221
|
return (search ? "auto" : "transparent");
|
|
4057
4222
|
});
|
|
4058
|
-
var StyledPaper$3 = styled(Paper)(templateObject_4$
|
|
4223
|
+
var StyledPaper$3 = styled(Paper)(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4059
4224
|
var _a;
|
|
4060
4225
|
var spaces = getSpaces(props);
|
|
4061
4226
|
var corners = getCorners(props);
|
|
@@ -4064,34 +4229,46 @@ var StyledPaper$3 = styled(Paper)(templateObject_4$i || (templateObject_4$i = __
|
|
|
4064
4229
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4065
4230
|
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 ");
|
|
4066
4231
|
});
|
|
4067
|
-
var StyledMenuItemDetails = styled("div")(templateObject_5$
|
|
4232
|
+
var StyledMenuItemDetails = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4068
4233
|
var _a;
|
|
4069
4234
|
var semanticTextColors = getSemanticTextColors(props);
|
|
4070
4235
|
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 ");
|
|
4071
4236
|
});
|
|
4072
|
-
var StyledMenuItemText = styled("div")(templateObject_6$
|
|
4073
|
-
var templateObject_1$
|
|
4237
|
+
var StyledMenuItemText = 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"])));
|
|
4238
|
+
var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
|
|
4074
4239
|
|
|
4075
4240
|
var AutocompleteBase = function (props) {
|
|
4076
|
-
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;
|
|
4241
|
+
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose;
|
|
4077
4242
|
var theme = useTheme();
|
|
4078
4243
|
var _r = useState(""), inputValue = _r[0], setInputValue = _r[1];
|
|
4079
|
-
return (jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple
|
|
4080
|
-
|
|
4081
|
-
|
|
4082
|
-
|
|
4083
|
-
|
|
4244
|
+
return (jsx(StyledAutocompleteBase, __assign({ clearOnBlur: clearOnBlur, disableCloseOnSelect: disableCloseOnSelect, disablePortal: true, renderTags: renderTags, loading: loading, loadingText: loadingText, noOptionsText: noOptionsText, PaperComponent: StyledPaper$3, PopperComponent: useDefaultPopperComponent(), renderOption: renderOption, getOptionLabel: getOptionLabel, isOptionEqualToValue: isOptionEqualToValue, inputValue: inputValue, renderInput: defaultRenderInput, multiple: multiple,
|
|
4245
|
+
/**
|
|
4246
|
+
* (masoudmanson): Overrides the onOpen and onClose handlers to ensure that
|
|
4247
|
+
* the onClick and onClickAway handlers are triggered when a controlled dropdown
|
|
4248
|
+
* is opened or closed, respectively.
|
|
4249
|
+
*/
|
|
4250
|
+
onOpen: defaultOnOpen, onClose: defaultOnClose }, props, {
|
|
4251
|
+
/**
|
|
4252
|
+
* (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
|
|
4253
|
+
* keeps the dropdown open after selecting an option. This feature enhances user experience
|
|
4254
|
+
* by preventing the dropdown from closing, enabling users to select multiple options
|
|
4255
|
+
* without having to reopen the menu repeatedly.
|
|
4256
|
+
*/
|
|
4084
4257
|
blurOnSelect: multiple ? false : blurOnSelect,
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
|
|
4088
|
-
|
|
4258
|
+
/**
|
|
4259
|
+
* (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
|
|
4260
|
+
* and clearing the input value on blur, it's crucial to include the onBlur handler
|
|
4261
|
+
* after spreading other props. Furthermore, within the defaultOnBlur function, the
|
|
4262
|
+
* actual onBlur function is invoked for completeness.
|
|
4263
|
+
*/
|
|
4089
4264
|
onBlur: defaultOnBlur,
|
|
4090
|
-
|
|
4091
|
-
|
|
4092
|
-
|
|
4093
|
-
|
|
4094
|
-
|
|
4265
|
+
/**
|
|
4266
|
+
* (masoudmanson): To ensure component-level actions (changing the input field value)
|
|
4267
|
+
* trigger upon input changes, it's crucial to position the onInputChange handler after
|
|
4268
|
+
* spreading the other props. Furthermore, within the defaultOnInputChange function,
|
|
4269
|
+
* the provided onInputChange from props is called at the end to emit the input changes
|
|
4270
|
+
* to the user.
|
|
4271
|
+
*/
|
|
4095
4272
|
onInputChange: defaultOnInputChange })));
|
|
4096
4273
|
/**
|
|
4097
4274
|
* (masoudmanson): Using a custom Popper or Paper with the Autocomplete
|
|
@@ -4123,9 +4300,9 @@ var AutocompleteBase = function (props) {
|
|
|
4123
4300
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
4124
4301
|
* mobile keyboard
|
|
4125
4302
|
*/
|
|
4126
|
-
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(
|
|
4303
|
+
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4127
4304
|
sdsType: "iconButton",
|
|
4128
|
-
}, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(
|
|
4305
|
+
}, icon: "XMarkCircle" })) })), inputProps: params.inputProps, startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4129
4306
|
sdsType: "interactive",
|
|
4130
4307
|
}, icon: "Search" }) })) }) }, InputBaseProps)) }));
|
|
4131
4308
|
}
|
|
@@ -4135,6 +4312,24 @@ var AutocompleteBase = function (props) {
|
|
|
4135
4312
|
setInputValue("");
|
|
4136
4313
|
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
4137
4314
|
}
|
|
4315
|
+
/**
|
|
4316
|
+
* (masoudmanson): The default onOpen handler is the Callback fired when the popup
|
|
4317
|
+
* requests to be opened. This function is responsible for invoking the onOpen and onClick
|
|
4318
|
+
* handlers when a controlled dropdown is opening.
|
|
4319
|
+
*/
|
|
4320
|
+
function defaultOnOpen(event) {
|
|
4321
|
+
onOpen === null || onOpen === void 0 ? void 0 : onOpen(event);
|
|
4322
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
4323
|
+
}
|
|
4324
|
+
/**
|
|
4325
|
+
* (masoudmanson): The default onClose handler is the callback fired when the popup
|
|
4326
|
+
* requests to be closed. This function is responsible for invoking the onClose and onClickAway
|
|
4327
|
+
* handlers when a controlled dropdown is closing.
|
|
4328
|
+
*/
|
|
4329
|
+
function defaultOnClose(event, reason) {
|
|
4330
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
|
|
4331
|
+
onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, reason);
|
|
4332
|
+
}
|
|
4138
4333
|
function defaultOnInputChange(event, value, reason) {
|
|
4139
4334
|
if (!multiple) {
|
|
4140
4335
|
if (reason === "input") {
|
|
@@ -4191,27 +4386,27 @@ var AutocompleteBase = function (props) {
|
|
|
4191
4386
|
}
|
|
4192
4387
|
};
|
|
4193
4388
|
|
|
4194
|
-
var StyledColumn = styled("div")(templateObject_1$
|
|
4389
|
+
var StyledColumn = styled("div")(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4195
4390
|
var _a;
|
|
4196
4391
|
var _b = props.width, width = _b === void 0 ? 280 : _b;
|
|
4197
4392
|
var spaces = getSpaces(props);
|
|
4198
4393
|
var borders = getBorders(props);
|
|
4199
4394
|
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 ");
|
|
4200
4395
|
});
|
|
4201
|
-
var StyledColumnTitle = styled("p")(templateObject_2$
|
|
4396
|
+
var StyledColumnTitle = styled("p")(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxxs, function (props) {
|
|
4202
4397
|
var _a;
|
|
4203
4398
|
var spaces = getSpaces(props);
|
|
4204
4399
|
var semanticTextColors = getSemanticTextColors(props);
|
|
4205
4400
|
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 ");
|
|
4206
4401
|
});
|
|
4207
|
-
var StyledColumnIcon = styled("span")(templateObject_3$
|
|
4402
|
+
var StyledColumnIcon = styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4208
4403
|
var _a, _b;
|
|
4209
4404
|
var spaces = getSpaces(props);
|
|
4210
4405
|
var iconSizes = getIconSizes(props);
|
|
4211
4406
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4212
4407
|
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 ");
|
|
4213
4408
|
});
|
|
4214
|
-
var templateObject_1$
|
|
4409
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$j;
|
|
4215
4410
|
|
|
4216
4411
|
var AutocompleteGroup = function (props) {
|
|
4217
4412
|
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"]);
|
|
@@ -4266,7 +4461,7 @@ var StyledPopper$2 = styled(Popper, {
|
|
|
4266
4461
|
shouldForwardProp: function (prop) {
|
|
4267
4462
|
return !doNotForwardProps$m.includes(prop) || prop === "anchorEl";
|
|
4268
4463
|
},
|
|
4269
|
-
})(templateObject_1$
|
|
4464
|
+
})(templateObject_1$I || (templateObject_1$I = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4270
4465
|
var _a;
|
|
4271
4466
|
var corners = getCorners(props);
|
|
4272
4467
|
var shadows = getShadows(props);
|
|
@@ -4277,34 +4472,44 @@ var StyledPopper$2 = styled(Popper, {
|
|
|
4277
4472
|
});
|
|
4278
4473
|
var StyledPaper$2 = styled(Paper, {
|
|
4279
4474
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
4280
|
-
})(templateObject_2$
|
|
4475
|
+
})(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4281
4476
|
var shadows = getShadows(props);
|
|
4282
4477
|
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 ");
|
|
4283
4478
|
});
|
|
4284
|
-
var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$
|
|
4479
|
+
var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4285
4480
|
var StyledAutocompleteInput = styled(InputSearch, {
|
|
4286
4481
|
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
4287
|
-
})(templateObject_4$
|
|
4482
|
+
})(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) {
|
|
4288
4483
|
var search = _a.search;
|
|
4289
4484
|
return !search && "height: 0; display: none;";
|
|
4290
4485
|
}, function (_a) {
|
|
4291
4486
|
var search = _a.search;
|
|
4292
4487
|
return (search ? "auto" : "transparent");
|
|
4293
4488
|
});
|
|
4294
|
-
var templateObject_1$
|
|
4489
|
+
var templateObject_1$I, templateObject_2$q, templateObject_3$i, templateObject_4$g;
|
|
4295
4490
|
|
|
4296
4491
|
var AutocompleteMultiColumn = function (props) {
|
|
4297
4492
|
var _a;
|
|
4298
|
-
var InputBaseProps = props.InputBaseProps,
|
|
4493
|
+
var InputBaseProps = props.InputBaseProps, open = props.open, _b = props.PopperPlacement, PopperPlacement = _b === void 0 ? "bottom-start" : _b, PopperBaseProps = props.PopperBaseProps, _c = props.search, search = _c === void 0 ? false : _c, _d = props.label, label = _d === void 0 ? "Search" : _d, onClickAway = props.onClickAway, onClick = props.onClick, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _e = props.PopperComponent, PopperComponent = _e === void 0 ? StyledPopper$2 : _e, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "onClick", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
|
|
4299
4494
|
var theme = useTheme();
|
|
4300
|
-
var
|
|
4301
|
-
var
|
|
4495
|
+
var isOpenControlled = open !== undefined;
|
|
4496
|
+
var _f = useState(""), inputValue = _f[0], setInputValue = _f[1];
|
|
4497
|
+
var _g = useState(isOpenControlled ? open : false), popperOpen = _g[0], setPopperOpen = _g[1];
|
|
4498
|
+
/**
|
|
4499
|
+
* (masoudmanson): This useEffect is used to update the popperOpen state
|
|
4500
|
+
* when the open prop is controlled.
|
|
4501
|
+
*/
|
|
4502
|
+
useEffect(function () {
|
|
4503
|
+
if (isOpenControlled) {
|
|
4504
|
+
setPopperOpen(open);
|
|
4505
|
+
}
|
|
4506
|
+
}, [isOpenControlled, open]);
|
|
4302
4507
|
var anchorRef = useRef(null);
|
|
4303
|
-
var
|
|
4508
|
+
var _h = React__default.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
|
|
4304
4509
|
useEffect(function () {
|
|
4305
4510
|
setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
|
|
4306
4511
|
}, [anchorRef]);
|
|
4307
|
-
var
|
|
4512
|
+
var _j = useState({}), autocompleteMultiColumnValue = _j[0], setAutocompleteMultiColumnValue = _j[1];
|
|
4308
4513
|
useEffect(function () {
|
|
4309
4514
|
if (parentInitialValue !== undefined) {
|
|
4310
4515
|
setAutocompleteMultiColumnValue(parentInitialValue);
|
|
@@ -4318,14 +4523,14 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4318
4523
|
});
|
|
4319
4524
|
onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
|
|
4320
4525
|
};
|
|
4321
|
-
return (jsx(ClickAwayListener, __assign({ onClickAway:
|
|
4526
|
+
return (jsx(ClickAwayListener, __assign({ onClickAway: defaultOnClickAway }, ClickAwayListenerProps, { children: jsxs("div", { children: [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: (jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4322
4527
|
sdsType: "iconButton",
|
|
4323
4528
|
}, icon: "XMarkCircle", onClick: clearInput })) })),
|
|
4324
4529
|
/**
|
|
4325
4530
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
4326
4531
|
* mobile keyboard
|
|
4327
4532
|
*/
|
|
4328
|
-
inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(
|
|
4533
|
+
inputMode: "text", startAdornment: (jsx(StyledInputAdornment, { position: "start", children: jsx(Button, { "aria-label": "search-button", sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4329
4534
|
sdsType: "interactive",
|
|
4330
4535
|
}, icon: "Search" }) })) }) }, InputBaseProps)), anchorEl && (jsx(PopperComponent, __assign({ modifiers: [
|
|
4331
4536
|
{
|
|
@@ -4345,7 +4550,22 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4345
4550
|
*/
|
|
4346
4551
|
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({ target: { value: "" } }, "", "clear");
|
|
4347
4552
|
}
|
|
4348
|
-
function handleInputClick(
|
|
4553
|
+
function handleInputClick(event) {
|
|
4554
|
+
/**
|
|
4555
|
+
* (masoudmanson): Because the Autocomplete component overrides the
|
|
4556
|
+
* InputSearch's onClick, we must also include the parent onClick here.
|
|
4557
|
+
*/
|
|
4558
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
4559
|
+
/**
|
|
4560
|
+
* (masoudmanson): If the dropdown is controlled, we call the onClick prop to allow the parent
|
|
4561
|
+
* to handle the opening and closing of the dropdown.
|
|
4562
|
+
*/
|
|
4563
|
+
if (isOpenControlled) {
|
|
4564
|
+
return;
|
|
4565
|
+
}
|
|
4566
|
+
/**
|
|
4567
|
+
* (masoudmanson): If the dropdown is not controlled, we toggle the dropdown open and closed.
|
|
4568
|
+
*/
|
|
4349
4569
|
if (popperOpen) {
|
|
4350
4570
|
setPopperOpen(false);
|
|
4351
4571
|
}
|
|
@@ -4369,13 +4589,55 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4369
4589
|
setInputValue("");
|
|
4370
4590
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
4371
4591
|
}
|
|
4372
|
-
|
|
4373
|
-
|
|
4592
|
+
/**
|
|
4593
|
+
* (masoudmanson): This is the default onClickAway handler for the Autocomplete component.
|
|
4594
|
+
* It is used to close the dropdown when the user clicks away from the dropdown. It also
|
|
4595
|
+
* calls the parent onClickAway prop if it is provided.
|
|
4596
|
+
*/
|
|
4597
|
+
function defaultOnClickAway(event) {
|
|
4598
|
+
/**
|
|
4599
|
+
* (masoudmanson): We only want to close the dropdown if it is open.
|
|
4600
|
+
* This may sound unnecessary, but it is to prevent the dropdown from
|
|
4601
|
+
* calling the parent onClickAway prop when the dropdown is closed.
|
|
4602
|
+
*/
|
|
4603
|
+
if (popperOpen) {
|
|
4604
|
+
onClickAway === null || onClickAway === void 0 ? void 0 : onClickAway(event, "blur");
|
|
4605
|
+
/**
|
|
4606
|
+
* (masoudmanson): If the dropdown is controlled, we call the onClickAway prop to allow the parent
|
|
4607
|
+
* to handle the closing of the dropdown.
|
|
4608
|
+
*/
|
|
4609
|
+
if (isOpenControlled)
|
|
4610
|
+
return;
|
|
4611
|
+
// (masoudmanson): If the dropdown is not controlled, we close the dropdown.
|
|
4612
|
+
setPopperOpen(false);
|
|
4613
|
+
}
|
|
4374
4614
|
}
|
|
4375
4615
|
function handleInputKeyDown(event) {
|
|
4376
|
-
|
|
4377
|
-
|
|
4378
|
-
|
|
4616
|
+
var _a;
|
|
4617
|
+
/**
|
|
4618
|
+
* (masoudmanson): Because the Autocomplete component overrides the
|
|
4619
|
+
* InputSearch's onKeyDown, we must also include the user defined onKeyDown here.
|
|
4620
|
+
*/
|
|
4621
|
+
if (props === null || props === void 0 ? void 0 : props.onKeyDown) {
|
|
4622
|
+
(_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
4623
|
+
}
|
|
4624
|
+
else {
|
|
4625
|
+
// (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
|
|
4626
|
+
if (event.key === "Backspace") {
|
|
4627
|
+
event.stopPropagation();
|
|
4628
|
+
}
|
|
4629
|
+
/**
|
|
4630
|
+
* (masoudmanson): This is to handle the Escape key to close the dropdown.
|
|
4631
|
+
* If the dropdown is controlled, we call the onClick prop to allow the parent
|
|
4632
|
+
* to handle the closing of the dropdown.
|
|
4633
|
+
*/
|
|
4634
|
+
if (event.key === "Escape") {
|
|
4635
|
+
if (isOpenControlled) {
|
|
4636
|
+
onClick === null || onClick === void 0 ? void 0 : onClick();
|
|
4637
|
+
return;
|
|
4638
|
+
}
|
|
4639
|
+
setPopperOpen(false);
|
|
4640
|
+
}
|
|
4379
4641
|
}
|
|
4380
4642
|
}
|
|
4381
4643
|
};
|
|
@@ -4387,7 +4649,7 @@ var Autocomplete = function (props) {
|
|
|
4387
4649
|
if (options.length > 1) {
|
|
4388
4650
|
return (jsx(AutocompleteMultiColumn, __assign({ options: options, value: value, onChange: onChange }, rest, {
|
|
4389
4651
|
// (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
|
|
4390
|
-
groupBy: undefined
|
|
4652
|
+
groupBy: undefined })));
|
|
4391
4653
|
}
|
|
4392
4654
|
else {
|
|
4393
4655
|
return (jsx(AutocompleteBase, __assign({ options: options[0].options, value: value, onChange: onChange }, rest)));
|
|
@@ -4398,25 +4660,25 @@ var Autocomplete = function (props) {
|
|
|
4398
4660
|
}
|
|
4399
4661
|
};
|
|
4400
4662
|
|
|
4401
|
-
var Centered = styled("div")(templateObject_1$
|
|
4402
|
-
var IconWrapper$1 = styled("div")(templateObject_2$
|
|
4663
|
+
var Centered = 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"])));
|
|
4664
|
+
var IconWrapper$1 = styled("div")(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4403
4665
|
var iconSizes = getIconSizes(props);
|
|
4404
4666
|
var spaces = getSpaces(props);
|
|
4405
4667
|
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 ");
|
|
4406
4668
|
});
|
|
4407
4669
|
var doNotForwardPropsButtonIcon = ["bannerType", "textChild"];
|
|
4408
|
-
var
|
|
4670
|
+
var StyledButton$2 = styled(Button, {
|
|
4409
4671
|
shouldForwardProp: function (prop) {
|
|
4410
4672
|
return !doNotForwardPropsButtonIcon.includes(prop);
|
|
4411
4673
|
},
|
|
4412
|
-
})(templateObject_3$
|
|
4674
|
+
})(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) {
|
|
4413
4675
|
var bannerType = props.bannerType;
|
|
4414
4676
|
var colors = getColors(props);
|
|
4415
4677
|
if (bannerType !== "primary")
|
|
4416
4678
|
return "";
|
|
4417
4679
|
return "\n svg:hover {\n fill: ".concat(colors === null || colors === void 0 ? void 0 : colors.blue[300], ";\n }\n ");
|
|
4418
4680
|
});
|
|
4419
|
-
styled("div")(templateObject_4$
|
|
4681
|
+
styled("div")(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), fontBodyS$1);
|
|
4420
4682
|
var primary$1 = function (props) {
|
|
4421
4683
|
var _a, _b, _c;
|
|
4422
4684
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
@@ -4432,12 +4694,12 @@ var secondary$1 = function (props) {
|
|
|
4432
4694
|
var doNotForwardProps$l = ["sdsType", "textChild"];
|
|
4433
4695
|
var StyledBanner = styled("div", {
|
|
4434
4696
|
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
4435
|
-
})(templateObject_5$
|
|
4697
|
+
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
4436
4698
|
var sdsType = props.sdsType;
|
|
4437
4699
|
var spaces = getSpaces(props);
|
|
4438
4700
|
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 ");
|
|
4439
4701
|
});
|
|
4440
|
-
var templateObject_1$
|
|
4702
|
+
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$a;
|
|
4441
4703
|
|
|
4442
4704
|
var Banner = forwardRef(function Banner(props, ref) {
|
|
4443
4705
|
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"]);
|
|
@@ -4465,124 +4727,44 @@ var Banner = forwardRef(function Banner(props, ref) {
|
|
|
4465
4727
|
return (jsx(Icon, __assign({ sdsIcon: "InfoCircle", sdsSize: "l", sdsType: "static" }, sdsIconProps)));
|
|
4466
4728
|
}
|
|
4467
4729
|
};
|
|
4468
|
-
return (jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxs(Centered, { children: [jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsx(
|
|
4730
|
+
return (jsxs(StyledBanner, __assign({ role: "banner", sdsType: sdsType, ref: ref }, rest, { children: [jsxs(Centered, { children: [jsx(IconWrapper$1, { children: iconItem() }), children] }), dismissible && (jsx(StyledButton$2, { "aria-label": "Close", bannerType: sdsType, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", onClick: handleClose, icon: "XMark" }))] })));
|
|
4469
4731
|
});
|
|
4470
4732
|
|
|
4471
|
-
var
|
|
4472
|
-
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
|
|
4476
|
-
var variant = props.variant, startIcon = props.startIcon, endIcon = props.endIcon;
|
|
4477
|
-
var spaces = getSpaces(props);
|
|
4478
|
-
var shadows = getShadows(props);
|
|
4479
|
-
var iconSizes = getIconSizes(props);
|
|
4480
|
-
var semanticTextColors = getSemanticTextColors(props);
|
|
4481
|
-
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4482
|
-
var hasIcon = !!startIcon || !!endIcon;
|
|
4483
|
-
// (masoudmanson): The padding for the contained variant depends on the presence of an icon.
|
|
4484
|
-
// If the component has either a startIcon or endIcon, the padding will be different.
|
|
4485
|
-
// If the component doesn't have any icon at all, the padding will be different.
|
|
4486
|
-
var containedPadding = hasIcon
|
|
4487
|
-
? "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px")
|
|
4488
|
-
: "".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px");
|
|
4489
|
-
// (thuang): outline variant has border 1px, so padding needs to be smaller
|
|
4490
|
-
var outlinedPadding = hasIcon
|
|
4491
|
-
? "".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")
|
|
4492
|
-
: "".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");
|
|
4493
|
-
var padding = variant === "outlined" ? outlinedPadding : containedPadding;
|
|
4494
|
-
var outlineBorder = variant === "outlined"
|
|
4495
|
-
? "border-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _a === void 0 ? void 0 : _a.border, ";")
|
|
4496
|
-
: "";
|
|
4497
|
-
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(buttonClasses.startIcon, ", .").concat(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(buttonClasses.startIcon, " {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-left: 0;\n }\n\n .").concat(buttonClasses.endIcon, " {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: 0;\n }\n ");
|
|
4498
|
-
});
|
|
4499
|
-
var RoundedButton = styled(ButtonBase, {
|
|
4500
|
-
shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
|
|
4501
|
-
})(templateObject_2$p || (templateObject_2$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4502
|
-
var corners = getCorners(props);
|
|
4503
|
-
return "\n border-radius: ".concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n ");
|
|
4504
|
-
});
|
|
4505
|
-
var SquareButton = ButtonBase;
|
|
4506
|
-
var MinimalButton = styled(Button$1, {
|
|
4507
|
-
shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
|
|
4508
|
-
})(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) {
|
|
4509
|
-
var spaces = getSpaces(props);
|
|
4510
|
-
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0;\n ");
|
|
4511
|
-
}, function (props) {
|
|
4512
|
-
if (props === null || props === void 0 ? void 0 : props.isAllCaps) {
|
|
4513
|
-
return fontCapsXxxs;
|
|
4514
|
-
}
|
|
4515
|
-
return "";
|
|
4516
|
-
});
|
|
4517
|
-
var minimal$2 = function (props) {
|
|
4518
|
-
var _a, _b, _c, _d, _e, _f, _g;
|
|
4519
|
-
var spaces = getSpaces(props);
|
|
4520
|
-
var iconSizes = getIconSizes(props);
|
|
4521
|
-
var semanticTextColors = getSemanticTextColors(props);
|
|
4522
|
-
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4523
|
-
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(buttonClasses.startIcon, ", .").concat(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(buttonClasses.startIcon, " {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n }\n\n .").concat(buttonClasses.endIcon, " {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n }\n ");
|
|
4733
|
+
var BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE = {
|
|
4734
|
+
large: "xl",
|
|
4735
|
+
medium: "l",
|
|
4736
|
+
small: "s",
|
|
4524
4737
|
};
|
|
4525
|
-
var PrimaryMinimalButton = styled(MinimalButton)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), minimal$2);
|
|
4526
|
-
var SecondaryMinimalButton = styled(MinimalButton)(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), minimal$2, function (props) {
|
|
4527
|
-
var _a;
|
|
4528
|
-
var semanticTextColors = getSemanticTextColors(props);
|
|
4529
|
-
return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, ";\n ");
|
|
4530
|
-
});
|
|
4531
|
-
var StyledButton$1 = styled(Button$1, {
|
|
4532
|
-
shouldForwardProp: function (prop) { return !sdsPropNames$2.includes(prop); },
|
|
4533
|
-
})(templateObject_6$7 || (templateObject_6$7 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
4534
|
-
if (!props.isRounded)
|
|
4535
|
-
return "";
|
|
4536
|
-
var corners = getCorners(props);
|
|
4537
|
-
var spaces = getSpaces(props);
|
|
4538
|
-
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 ");
|
|
4539
|
-
});
|
|
4540
|
-
var templateObject_1$H, templateObject_2$p, templateObject_3$h, templateObject_4$f, templateObject_5$a, templateObject_6$7;
|
|
4541
|
-
|
|
4542
4738
|
/**
|
|
4543
4739
|
* @see https://mui.com/material-ui/react-button/
|
|
4544
4740
|
*/
|
|
4545
|
-
var
|
|
4546
|
-
var sdsStyle = props
|
|
4547
|
-
var
|
|
4548
|
-
|
|
4549
|
-
|
|
4550
|
-
|
|
4551
|
-
|
|
4552
|
-
|
|
4553
|
-
|
|
4741
|
+
var ButtonDropdown = React__default.forwardRef(function (props, ref) {
|
|
4742
|
+
var icon = props.icon, sdsStyle = props.sdsStyle, sdsType = props.sdsType, _a = props.sdsSize, sdsSize = _a === void 0 ? "medium" : _a, sdsIconProps = props.sdsIconProps;
|
|
4743
|
+
var iconSize = BUTTON_ICON_SIZE_TO_SDS_ICON_SIZE[sdsSize];
|
|
4744
|
+
var iconItem = function () {
|
|
4745
|
+
if (icon) {
|
|
4746
|
+
if (typeof icon !== "string") {
|
|
4747
|
+
return icon;
|
|
4748
|
+
}
|
|
4749
|
+
else {
|
|
4750
|
+
return (jsx(Icon, __assign({ sdsType: "iconButton" }, sdsIconProps, { sdsIcon: icon, sdsSize: iconSize })));
|
|
4751
|
+
}
|
|
4752
|
+
}
|
|
4753
|
+
};
|
|
4754
|
+
if (sdsStyle === "icon") {
|
|
4755
|
+
if (icon !== undefined) {
|
|
4756
|
+
return jsx(ButtonIcon, __assign({ icon: icon }, props, { ref: ref }));
|
|
4757
|
+
}
|
|
4758
|
+
else {
|
|
4759
|
+
showWarningIfFirstOccurence(SDSWarningTypes.ButtonIconMissingIconProp);
|
|
4760
|
+
return null;
|
|
4761
|
+
}
|
|
4554
4762
|
}
|
|
4555
|
-
|
|
4556
|
-
|
|
4557
|
-
var propsWithDefault = __assign(__assign({}, props), { isAllCaps: isAllCaps });
|
|
4558
|
-
switch (true) {
|
|
4559
|
-
case sdsStyle === "rounded" && sdsType === "primary":
|
|
4560
|
-
return (jsx(RoundedButton, __assign({ color: "primary", ref: ref, variant: "contained" }, propsWithDefault)));
|
|
4561
|
-
case sdsStyle === "rounded" && sdsType === "secondary":
|
|
4562
|
-
return (jsx(RoundedButton, __assign({ color: "primary", ref: ref, variant: "outlined" }, propsWithDefault)));
|
|
4563
|
-
case sdsStyle === "square" && sdsType === "primary":
|
|
4564
|
-
return (jsx(SquareButton, __assign({ color: "primary", ref: ref, variant: "contained" }, propsWithDefault)));
|
|
4565
|
-
case sdsStyle === "square" && sdsType === "secondary":
|
|
4566
|
-
return (jsx(SquareButton, __assign({ color: "primary", ref: ref, variant: "outlined" }, propsWithDefault)));
|
|
4567
|
-
case sdsStyle === "minimal" && sdsType === "primary":
|
|
4568
|
-
return (jsx(PrimaryMinimalButton, __assign({ color: "primary", ref: ref, variant: "text" }, propsWithDefault)));
|
|
4569
|
-
case sdsStyle === "minimal" && sdsType === "secondary":
|
|
4570
|
-
return (jsx(SecondaryMinimalButton, __assign({ color: "primary", ref: ref, variant: "text" }, propsWithDefault)));
|
|
4571
|
-
default:
|
|
4572
|
-
return jsx(StyledButton$1, __assign({}, propsWithDefault, { ref: ref }));
|
|
4763
|
+
else {
|
|
4764
|
+
return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: iconItem() })));
|
|
4573
4765
|
}
|
|
4574
4766
|
});
|
|
4575
4767
|
|
|
4576
|
-
/**
|
|
4577
|
-
* @see https://mui.com/material-ui/react-button/
|
|
4578
|
-
*/
|
|
4579
|
-
var ButtonDropdown = React__default.forwardRef(function (props, ref) {
|
|
4580
|
-
var icon = props === null || props === void 0 ? void 0 : props.icon;
|
|
4581
|
-
var sdsStyle = props === null || props === void 0 ? void 0 : props.sdsStyle;
|
|
4582
|
-
var sdsType = props === null || props === void 0 ? void 0 : props.sdsType;
|
|
4583
|
-
return (jsx(Button, __assign({}, props, { endIcon: jsx(Icon, { sdsIcon: "ChevronDown", sdsSize: "xs", sdsType: "button" }), sdsStyle: sdsStyle, ref: ref, sdsType: sdsType, startIcon: icon })));
|
|
4584
|
-
});
|
|
4585
|
-
|
|
4586
4768
|
var CALLOUT_TITLE_DISPLAY_NAME = "CalloutTitle";
|
|
4587
4769
|
|
|
4588
4770
|
var doNotForwardProps$k = ["calloutTitle", "collapsed", "severity"];
|
|
@@ -4659,11 +4841,11 @@ var Callout = function (_a) {
|
|
|
4659
4841
|
};
|
|
4660
4842
|
var getAction = function (collapsed) {
|
|
4661
4843
|
if (expandable) {
|
|
4662
|
-
return (jsx(
|
|
4844
|
+
return (jsx(Button, { "aria-label": collapsed ? "open" : "close", onClick: function () {
|
|
4663
4845
|
setStage(collapsed ? SDS_STAGE_OPEN : SDS_STAGE_CLOSED);
|
|
4664
|
-
}, sdsSize: "small", sdsType: "tertiary", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
|
|
4846
|
+
}, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", icon: collapsed ? "ChevronDown" : "ChevronUp" }));
|
|
4665
4847
|
}
|
|
4666
|
-
return onClose ? (jsx(
|
|
4848
|
+
return onClose ? (jsx(Button, { "aria-label": "Dismiss", onClick: handleClose, sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon", size: "large", icon: "XMark" })) : null;
|
|
4667
4849
|
};
|
|
4668
4850
|
var collapsed = (expandable && stage === SDS_STAGE_CLOSED) || false;
|
|
4669
4851
|
// when there is no CalloutTitlecomponent, or there is a single child element
|
|
@@ -5051,6 +5233,10 @@ var templateObject_1$A, templateObject_2$l, templateObject_3$d, templateObject_4
|
|
|
5051
5233
|
|
|
5052
5234
|
/**
|
|
5053
5235
|
* @see https://mui.com/material-ui/react-chip/
|
|
5236
|
+
*
|
|
5237
|
+
* @deprecated
|
|
5238
|
+
* This component is deprecated and will be removed in the next major version.
|
|
5239
|
+
* Please use `Tag` or `TagFilter` instead.
|
|
5054
5240
|
*/
|
|
5055
5241
|
var Chip = function (props) {
|
|
5056
5242
|
showWarningIfFirstOccurence(SDSWarningTypes.ChipDeprecated);
|
|
@@ -5137,9 +5323,20 @@ var DropdownMenu = function (props) {
|
|
|
5137
5323
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
5138
5324
|
// (masoudmanson): To override the width of the Popper,
|
|
5139
5325
|
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
5140
|
-
sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (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] }) })) }) })));
|
|
5326
|
+
sx: dropdownMenuPopperSx, children: jsx(PaperComponent, { children: jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, ClickAwayListenerProps, { children: jsxs(StyledDropdownMenuAutocompleteWrapper, { children: [title && (jsx(StyledHeaderTitle, { search: search, children: title })), anchorEl && (jsx(Autocomplete, __assign({ label: label, search: search, title: title, open: open, options: options, PopperBaseProps: DEFAULT_POPPER_BASE_PROPS, disablePortal: true, onClickAway: noop, onClick: noop }, rest, { InputBaseProps: DefaultInputBaseProps }))), children] }) })) }) })));
|
|
5141
5327
|
};
|
|
5142
5328
|
|
|
5329
|
+
var doNotForwardProps$e = [
|
|
5330
|
+
"intent",
|
|
5331
|
+
"state",
|
|
5332
|
+
"sdsStage",
|
|
5333
|
+
"sdsType",
|
|
5334
|
+
"isMinimal",
|
|
5335
|
+
"shouldTruncateMinimalDetails",
|
|
5336
|
+
"shouldPutAColonAfterLabel",
|
|
5337
|
+
"value",
|
|
5338
|
+
"sdsStyle",
|
|
5339
|
+
];
|
|
5143
5340
|
var labelFontBodyS = fontBody("s", "regular");
|
|
5144
5341
|
var labelFontBodyXs = fontBody("xs", "regular");
|
|
5145
5342
|
var inputDropdownStyles = function (props) {
|
|
@@ -5200,15 +5397,14 @@ var isDisabled = function (props) {
|
|
|
5200
5397
|
var semanticCommonColors = getSemanticComponentColors(props);
|
|
5201
5398
|
return 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);
|
|
5202
5399
|
};
|
|
5203
|
-
|
|
5204
|
-
|
|
5205
|
-
|
|
5206
|
-
|
|
5207
|
-
|
|
5208
|
-
|
|
5209
|
-
|
|
5210
|
-
|
|
5211
|
-
];
|
|
5400
|
+
/**
|
|
5401
|
+
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
5402
|
+
* temporary fix for the issue where the props are not correctly passed to
|
|
5403
|
+
* the underlying Button component. This is a workaround until a more permanent
|
|
5404
|
+
* solution is implemented. As a result of this fix, the style prop is not
|
|
5405
|
+
* passed to the underlying Button component. So we have added the style prop
|
|
5406
|
+
* to the InputDropdownProps interface.
|
|
5407
|
+
*/
|
|
5212
5408
|
var StyledInputDropdown = styled(Button, {
|
|
5213
5409
|
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
5214
5410
|
})(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) {
|
|
@@ -5473,7 +5669,7 @@ var templateObject_1$w, templateObject_2$h;
|
|
|
5473
5669
|
* @see https://mui.com/material-ui/react-chip/
|
|
5474
5670
|
*/
|
|
5475
5671
|
var TagFilter = function (props) {
|
|
5476
|
-
return (jsx(StyledTag, __assign({ role: "none presentation" }, props, { deleteIcon: jsx(
|
|
5672
|
+
return (jsx(StyledTag, __assign({ role: "none presentation" }, props, { deleteIcon: jsx(Button, { "aria-label": "Delete Tag", icon: "XMark", sdsSize: "small", sdsType: "tertiary", sdsStyle: "icon" }), color: "info" })));
|
|
5477
5673
|
};
|
|
5478
5674
|
|
|
5479
5675
|
var Chips = function (_a) {
|
|
@@ -5645,7 +5841,7 @@ function DialogContent(props, ref) {
|
|
|
5645
5841
|
return jsx(StyledDialogContent, __assign({ ref: ref }, props));
|
|
5646
5842
|
});
|
|
5647
5843
|
|
|
5648
|
-
var
|
|
5844
|
+
var StyledButton$1 = styled(Button)(templateObject_1$r || (templateObject_1$r = __makeTemplateObject(["\n position: absolute;\n\n ", "\n"], ["\n position: absolute;\n\n ", "\n"])), function (props) {
|
|
5649
5845
|
var spaces = getSpaces(props);
|
|
5650
5846
|
return "\n right: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxl, "px;\n ");
|
|
5651
5847
|
});
|
|
@@ -5661,7 +5857,7 @@ var CloseButton = forwardRef(function CloseButton(props, ref) {
|
|
|
5661
5857
|
return (jsx(DialogContext.Consumer, { children: function (_a) {
|
|
5662
5858
|
var sdsSize = _a.sdsSize;
|
|
5663
5859
|
var size = SDS_SIZE_TO_COMPONENT_SIZE[sdsSize];
|
|
5664
|
-
return (jsx(
|
|
5860
|
+
return (jsx(StyledButton$1, __assign({ "aria-label": "Close", ref: ref, sdsSize: size }, props, { icon: "XMark", sdsStyle: "icon", sdsType: "tertiary" })));
|
|
5665
5861
|
} }));
|
|
5666
5862
|
});
|
|
5667
5863
|
|
|
@@ -5724,7 +5920,7 @@ var Dropdown = function (props) {
|
|
|
5724
5920
|
// which by default will not close on blur. If closeOnBlur is enabled, clicking out
|
|
5725
5921
|
// is equivalent to clicking the Cancel button, closing the dropdown and losing
|
|
5726
5922
|
// unapplied changes.
|
|
5727
|
-
closeOnBlur = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value"]);
|
|
5923
|
+
closeOnBlur = _f === void 0 ? !buttons : _f, onClose = props.onClose, onChange = props.onChange, _g = props.DropdownMenuProps, DropdownMenuProps = _g === void 0 ? {} : _g, _h = props.InputDropdownProps, InputDropdownProps = _h === void 0 ? { sdsStyle: "minimal" } : _h, _j = props.InputDropdownComponent, InputDropdownComponent = _j === void 0 ? InputDropdown : _j, _k = props.isTriggerChangeOnOptionClick, isTriggerChangeOnOptionClick = _k === void 0 ? false : _k, _l = props.disabled, disabled = _l === void 0 ? false : _l, propValue = props.value, onClick = props.onClick, rest = __rest(props, ["options", "label", "multiple", "search", "buttonPosition", "buttons", "closeOnBlur", "onClose", "onChange", "DropdownMenuProps", "InputDropdownProps", "InputDropdownComponent", "isTriggerChangeOnOptionClick", "disabled", "value", "onClick"]);
|
|
5728
5924
|
if (buttons && !multiple) {
|
|
5729
5925
|
// eslint-disable-next-line no-console
|
|
5730
5926
|
console.warn("Warning: buttons are only supported for multiple select dropdowns.");
|
|
@@ -5741,7 +5937,7 @@ var Dropdown = function (props) {
|
|
|
5741
5937
|
setValue(propValue);
|
|
5742
5938
|
}
|
|
5743
5939
|
}, [isControlled, propValue]);
|
|
5744
|
-
return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, { "data-testid": "dropdown" })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick:
|
|
5940
|
+
return (jsxs(Fragment, { children: [jsx(InputDropdownComponent, __assign({ disabled: disabled, label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps, { "data-testid": "dropdown" })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, search: search, onClose: handleClose, multiple: multiple, disableCloseOnSelect: multiple, options: options, onClickAway: handleClickAway, width: 250, onChange: handleChange, value: isMultiColumn ? value : multiple ? pendingValue : value }, DropdownMenuProps, rest, { children: shouldShowButtons ? (jsx(StyledButtonsWrapper, { buttonPosition: buttonPosition, children: buttonPosition === "left" ? (jsxs("div", { children: [jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" }), jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" })] })) : (jsxs("div", { children: [jsx(StyledButton, { onClick: handleCancel, sdsStyle: "square", sdsType: "secondary", children: "Cancel" }), jsx(StyledButton, { onClick: handleButtonClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
|
|
5745
5941
|
function getInitialValue() {
|
|
5746
5942
|
return multiple
|
|
5747
5943
|
? []
|
|
@@ -5774,6 +5970,7 @@ var Dropdown = function (props) {
|
|
|
5774
5970
|
}
|
|
5775
5971
|
}
|
|
5776
5972
|
function handleClick(event) {
|
|
5973
|
+
onClick === null || onClick === void 0 ? void 0 : onClick(event);
|
|
5777
5974
|
if (open) {
|
|
5778
5975
|
if (!shouldShowButtons) {
|
|
5779
5976
|
if (multiple) {
|
|
@@ -5816,6 +6013,9 @@ var Dropdown = function (props) {
|
|
|
5816
6013
|
setOpen(false);
|
|
5817
6014
|
}
|
|
5818
6015
|
}
|
|
6016
|
+
function handleButtonClose(event) {
|
|
6017
|
+
handleClose(event, "selectOption");
|
|
6018
|
+
}
|
|
5819
6019
|
function handleCancel() {
|
|
5820
6020
|
if (multiple) {
|
|
5821
6021
|
// (masoudmanson): To undo the latest actions made on the selections,
|
|
@@ -6402,6 +6602,10 @@ var templateObject_1$d, templateObject_2$7, templateObject_3$3, templateObject_4
|
|
|
6402
6602
|
|
|
6403
6603
|
/**
|
|
6404
6604
|
* @see https://mui.com/material-ui/react-autocomplete/
|
|
6605
|
+
*
|
|
6606
|
+
* @deprecated
|
|
6607
|
+
* This component is deprecated and will be removed in the next major version.
|
|
6608
|
+
* Please use `Autocomplete` or `Dropdown` instead.
|
|
6405
6609
|
*/
|
|
6406
6610
|
var MenuSelect = function (props) {
|
|
6407
6611
|
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;
|
|
@@ -6420,7 +6624,7 @@ var MenuSelect = function (props) {
|
|
|
6420
6624
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
6421
6625
|
* mobile keyboard
|
|
6422
6626
|
*/
|
|
6423
|
-
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(
|
|
6627
|
+
inputMode: search ? "text" : "none" }, params.InputProps.ref), { endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Button, { sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
6424
6628
|
sdsType: "interactive",
|
|
6425
6629
|
}, icon: "Search" }) })), inputProps: params.inputProps }) }, InputBaseProps)) })); } }, props, { onInputChange: function (event, value, reason) {
|
|
6426
6630
|
if (event && event.type === "blur") {
|
|
@@ -6734,7 +6938,7 @@ var Notification = function (_a) {
|
|
|
6734
6938
|
}
|
|
6735
6939
|
}
|
|
6736
6940
|
};
|
|
6737
|
-
return (jsx(Fragment, { children: jsx(Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsx(Box, { children: jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (jsx(
|
|
6941
|
+
return (jsx(Fragment, { children: jsx(Slide, { in: !hide, direction: slideDirection, mountOnEnter: true, unmountOnExit: true, timeout: 250, children: jsx(Box, { children: jsxs(StyledNotification, __assign({ onClose: onClose ? handleClose : undefined, action: onClose ? (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 && (jsx(StyledButtonWrapper, { buttonPosition: buttonPosition, children: jsx(Button, { sdsStyle: "minimal", sdsType: "secondary", onClick: buttonOnClick, children: buttonText }) }))] })) }) }) }));
|
|
6738
6942
|
};
|
|
6739
6943
|
|
|
6740
6944
|
var doNotForwardProps$2 = [
|
|
@@ -6750,13 +6954,10 @@ var doNotForwardProps$2 = [
|
|
|
6750
6954
|
"pageSize",
|
|
6751
6955
|
"truncateDropdown",
|
|
6752
6956
|
];
|
|
6753
|
-
var
|
|
6754
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
|
|
6755
|
-
})(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6957
|
+
var StyledPaginationButton = styled(Button)(templateObject_1$a || (templateObject_1$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6756
6958
|
var _a, _b, _c;
|
|
6757
|
-
var disabled = props.disabled;
|
|
6758
6959
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6759
|
-
return "\n width: 32px;\n height: 32px;\n cursor: "
|
|
6960
|
+
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 ");
|
|
6760
6961
|
});
|
|
6761
6962
|
var StyledPaginationChevronList = styled("li", {
|
|
6762
6963
|
shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
|
|
@@ -6801,7 +7002,7 @@ var PageListDropdown = function (props) {
|
|
|
6801
7002
|
var handleClose = function () {
|
|
6802
7003
|
setAnchorEl(null);
|
|
6803
7004
|
};
|
|
6804
|
-
return (jsxs(Page, { sdsStyle: sdsStyle, children: [jsx(
|
|
7005
|
+
return (jsxs(Page, { sdsStyle: sdsStyle, children: [jsx(StyledPaginationButton, { "aria-label": "Go to a page", onClick: handleClick, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }), jsx(StyledPaginationDropdownMenu, { anchorEl: anchorEl, keepMounted: true, open: Boolean(anchorEl), onClose: handleClose, children: pageList.map(function (page) {
|
|
6805
7006
|
return (jsx(MenuItem, { onClick: function () {
|
|
6806
7007
|
onPageChange(page);
|
|
6807
7008
|
handleClose();
|
|
@@ -6884,7 +7085,7 @@ var Pagination = forwardRef(function (props, ref) {
|
|
|
6884
7085
|
if (truncateDropdown) {
|
|
6885
7086
|
return (jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
|
|
6886
7087
|
}
|
|
6887
|
-
return (jsx(Page, { sdsStyle: sdsStyle, children: jsx(
|
|
7088
|
+
return (jsx(Page, { sdsStyle: sdsStyle, children: jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
|
|
6888
7089
|
}
|
|
6889
7090
|
return (jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, children: pageNumber }, pageNumber));
|
|
6890
7091
|
}), jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, children: jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
|
|
@@ -7180,4 +7381,4 @@ var TooltipTableContent = function (props) {
|
|
|
7180
7381
|
return (jsxs(TableContainer, __assign({}, rest, { children: [contentAlert && jsx(Alert, { children: contentAlert }), data === null || data === void 0 ? void 0 : data.map(function (section, index) { return (jsxs(Section, { disabled: section.disabled, children: [jsx(SectionLabel, { disabled: section.disabled, label: section.label, children: section.label }), jsx(Table$1, { size: "small", children: jsx(TableBody, { children: section.dataRows.map(function (row, rowIndex) { return (jsxs(TableRow$1, { children: [jsx(RowLabel, { disabled: section.disabled, align: "left", children: row.label }), jsx(RowValue, { disabled: section.disabled, align: itemAlign, children: row.value })] }, row.label + String(rowIndex))); }) }) })] }, "".concat(section.label + String(index)))); })] })));
|
|
7181
7382
|
};
|
|
7182
7383
|
|
|
7183
|
-
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, Pagination, SDSAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getColors, getCorners, getFontWeights, getIconSizes, getPalette, getSemanticComponentColors, getSemanticTextColors, getShadows, getSpaces, getSpacings, getTypography };
|
|
7384
|
+
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, StyledPopper$2 as AutocompleteMultiColumnStyledPopper, StyledPaper$3 as AutocompleteSingleColumnStyledPaper, Banner, Button, ButtonDropdown, ButtonIcon, Callout, CalloutTitle, CellBasic, CellComponent, CellHeader, Chip, ComplexFilter, InputDropdown as ComplexFilterInputDropdown, StyledPopper as ComplexFilterPopper, Dialog, DialogActions, index as DialogContent, DialogContext, DialogPaper, DialogTitle, Overline as DialogTitleOverline, Subtitle as DialogTitleSubtitle, Title as DialogTitleTitle, Dropdown, InputDropdown as DropdownInputDropdown, DropdownMenu, StyledPaper$1 as DropdownPaper, StyledPopper as DropdownPopper, Icon, InputCheckbox, InputDropdown, InputRadio, InputSearch, InputSlider, InputText, InputToggle, Link, List, ListItem, ListItemLabel, ListSubheader, LoadingIndicator, MINIMUM_DROPDOWN_MENU_POPPER_WIDTH, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, Pagination, SDSAppTheme, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, focusVisibleA11yStyle, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$1 as fontBodyS, fontBodySemiboldL, fontBodySemiboldM, fontBodySemiboldS, fontBodySemiboldXs, fontBodySemiboldXxs, fontBodySemiboldXxxs, fontBodyXs$2 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontCode, fontCodeS, fontCodeSemiboldS, fontCodeSemiboldXs, fontCodeXs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, fontTabular, fontTabularS, fontTabularSemiboldS, fontTabularSemiboldXs, fontTabularXs, getBorders, getColors, getCorners, getFontWeights, getIconSizes, getPalette, getSemanticComponentColors, getSemanticTextColors, getShadows, getSpaces, getSpacings, getTypography, makeThemeOptions };
|