@czi-sds/components 18.1.1 → 19.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.d.ts +174 -113
- package/dist/index.cjs.js +461 -241
- package/dist/index.esm.d.ts +174 -113
- package/dist/index.esm.js +461 -244
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +2 -2
package/dist/index.esm.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import React__default, { forwardRef, useState, useCallback, useEffect,
|
|
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, SvgIcon, AccordionSummary, Accordion as Accordion$1, Alert as Alert$2, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, Paper, Popper, Button as Button$1, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1,
|
|
5
|
+
import { colors, AccordionDetails as AccordionDetails$1, SvgIcon, AccordionSummary, Accordion as Accordion$1, Alert as Alert$2, IconButton, TextField, outlinedInputClasses, inputBaseClasses, inputAdornmentClasses, buttonBaseClasses, InputAdornment, MenuItem as MenuItem$1, menuItemClasses, Autocomplete as Autocomplete$1, autocompleteClasses, Paper, Popper, ClickAwayListener, Button as Button$1, Grow, AlertTitle, Tooltip as Tooltip$1, Chip as Chip$1, darken, Dialog as Dialog$1, DialogActions as DialogActions$1, DialogContent, DialogTitle as DialogTitle$1, Typography, FormControlLabel, Checkbox, Radio, Slider, Switch, Link as Link$1, List as List$1, ListItem as ListItem$1, ListSubheader as ListSubheader$1, Menu as Menu$1, Tabs as Tabs$1, Tab as Tab$1, Slide, Box, ToggleButtonGroup, 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';
|
|
@@ -68,7 +68,7 @@ var FontWeight;
|
|
|
68
68
|
(function (FontWeight) {
|
|
69
69
|
FontWeight[FontWeight["bold"] = 700] = "bold";
|
|
70
70
|
FontWeight[FontWeight["light"] = 300] = "light";
|
|
71
|
-
FontWeight[FontWeight["medium"] =
|
|
71
|
+
FontWeight[FontWeight["medium"] = 500] = "medium";
|
|
72
72
|
FontWeight[FontWeight["regular"] = 400] = "regular";
|
|
73
73
|
FontWeight[FontWeight["semibold"] = 600] = "semibold";
|
|
74
74
|
})(FontWeight || (FontWeight = {}));
|
|
@@ -543,7 +543,7 @@ var fontCaps = function (fontSize) {
|
|
|
543
543
|
if (!typography)
|
|
544
544
|
return null;
|
|
545
545
|
var caps = typography.styles.caps;
|
|
546
|
-
return css(templateObject_1$
|
|
546
|
+
return css(templateObject_1$U || (templateObject_1$U = __makeTemplateObject(["\n ", "\n text-transform: uppercase;\n "], ["\n ", "\n text-transform: uppercase;\n "])), themeToCss(caps[fontSize]));
|
|
547
547
|
};
|
|
548
548
|
};
|
|
549
549
|
var fontCapsXxs = fontCaps("xxs");
|
|
@@ -567,15 +567,15 @@ var fontHeaderXs = fontHeader("xs");
|
|
|
567
567
|
var fontHeaderXxs = fontHeader("xxs");
|
|
568
568
|
var fontHeaderXxxs = fontHeader("xxxs");
|
|
569
569
|
function themeToCss(fontTheme) {
|
|
570
|
-
return css(templateObject_2$
|
|
570
|
+
return css(templateObject_2$B || (templateObject_2$B = __makeTemplateObject(["\n font-size: ", "px;\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "], ["\n font-size: ", "px;\n line-height: ", ";\n letter-spacing: ", ";\n font-weight: ", ";\n text-transform: ", ";\n "])), fontTheme.fontSize, fontTheme.lineHeight, fontTheme.letterSpacing, fontTheme.fontWeight, fontTheme.textTransform);
|
|
571
571
|
}
|
|
572
|
-
var templateObject_1$
|
|
572
|
+
var templateObject_1$U, templateObject_2$B;
|
|
573
573
|
|
|
574
|
-
var StyledAccordionDetails = styled(AccordionDetails$1)(templateObject_2$
|
|
574
|
+
var StyledAccordionDetails = styled(AccordionDetails$1)(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$2, function (props) {
|
|
575
575
|
var spaces = getSpaces(props);
|
|
576
|
-
return css(templateObject_1$
|
|
576
|
+
return css(templateObject_1$T || (templateObject_1$T = __makeTemplateObject(["\n padding: ", "px;\n padding-top: ", "px;\n "], ["\n padding: ", "px;\n padding-top: ", "px;\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
577
577
|
});
|
|
578
|
-
var templateObject_1$
|
|
578
|
+
var templateObject_1$T, templateObject_2$A;
|
|
579
579
|
|
|
580
580
|
var AccordionDetails = function (props) {
|
|
581
581
|
var children = props.children;
|
|
@@ -3068,30 +3068,30 @@ function iconSize(props) {
|
|
|
3068
3068
|
var _a, _b;
|
|
3069
3069
|
var sdsSize = props.sdsSize;
|
|
3070
3070
|
var iconSizes = getIconSizes(props);
|
|
3071
|
-
return css(templateObject_1$
|
|
3071
|
+
return css(templateObject_1$S || (templateObject_1$S = __makeTemplateObject(["\n height: ", "px;\n width: ", "px;\n "], ["\n height: ", "px;\n width: ", "px;\n "])), (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes[sdsSize]) === null || _b === void 0 ? void 0 : _b.width);
|
|
3072
3072
|
}
|
|
3073
3073
|
function buttonStyle() {
|
|
3074
|
-
return css(templateObject_2$
|
|
3074
|
+
return css(templateObject_2$z || (templateObject_2$z = __makeTemplateObject(["\n color: inherit;\n "], ["\n color: inherit;\n "])));
|
|
3075
3075
|
}
|
|
3076
3076
|
function staticStyle(props) {
|
|
3077
3077
|
var _a = props.iconColor, iconColor = _a === void 0 ? "primary" : _a, _b = props.shade, shade = _b === void 0 ? 400 : _b;
|
|
3078
3078
|
var colors = getColors(props);
|
|
3079
|
-
return css(templateObject_3$
|
|
3079
|
+
return css(templateObject_3$q || (templateObject_3$q = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), colors === null || colors === void 0 ? void 0 : colors[iconColor][shade]);
|
|
3080
3080
|
}
|
|
3081
3081
|
function interactive(props) {
|
|
3082
3082
|
var colors = getColors(props);
|
|
3083
3083
|
var _a = props.iconColor, iconColor = _a === void 0 ? "primary" : _a, _b = props.shade, shade = _b === void 0 ? 400 : _b;
|
|
3084
|
-
return css(templateObject_4$
|
|
3084
|
+
return css(templateObject_4$k || (templateObject_4$k = __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 "])), colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.gray[600], colors === null || colors === void 0 ? void 0 : colors[iconColor][shade], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
3085
3085
|
}
|
|
3086
|
-
var doNotForwardProps$
|
|
3086
|
+
var doNotForwardProps$n = ["sdsIcon", "sdsSize", "sdsType", "iconColor"];
|
|
3087
3087
|
var StyledSvgIcon = styled(SvgIcon, {
|
|
3088
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3088
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
3089
3089
|
})(templateObject_6$c || (templateObject_6$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3090
3090
|
var sdsType = props.sdsType;
|
|
3091
3091
|
return css(templateObject_5$f || (templateObject_5$f = __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());
|
|
3092
3092
|
});
|
|
3093
3093
|
var StyledIcon = styled("div")(templateObject_7$9 || (templateObject_7$9 = __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"])));
|
|
3094
|
-
var templateObject_1$
|
|
3094
|
+
var templateObject_1$S, templateObject_2$z, templateObject_3$q, templateObject_4$k, templateObject_5$f, templateObject_6$c, templateObject_7$9;
|
|
3095
3095
|
|
|
3096
3096
|
/**
|
|
3097
3097
|
* @see https://mui.com/material-ui/icons/#icons
|
|
@@ -3112,16 +3112,16 @@ var Icon = forwardRef(function Icon(_a, ref) {
|
|
|
3112
3112
|
return null;
|
|
3113
3113
|
});
|
|
3114
3114
|
|
|
3115
|
-
var StyledAccordionHeader = styled(AccordionSummary)(templateObject_2$
|
|
3115
|
+
var StyledAccordionHeader = styled(AccordionSummary)(templateObject_2$y || (templateObject_2$y = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
3116
3116
|
var spaces = getSpaces(props);
|
|
3117
3117
|
var colors = getColors(props);
|
|
3118
|
-
return css(templateObject_1$
|
|
3118
|
+
return css(templateObject_1$R || (templateObject_1$R = __makeTemplateObject(["\n padding: ", "px;\n min-height: 40px;\n align-items: flex-start;\n box-sizing: border-box;\n\n &.Mui-expanded {\n min-height: 40px;\n }\n\n .MuiAccordionSummary-content {\n margin: 0;\n flex-direction: column;\n\n &.Mui-expanded {\n margin: 0;\n }\n }\n\n .MuiAccordionSummary-expandIconWrapper {\n padding: 0px;\n margin-right: 0;\n margin-left: ", "px;\n svg {\n color: ", ";\n }\n }\n "], ["\n padding: ", "px;\n min-height: 40px;\n align-items: flex-start;\n box-sizing: border-box;\n\n &.Mui-expanded {\n min-height: 40px;\n }\n\n .MuiAccordionSummary-content {\n margin: 0;\n flex-direction: column;\n\n &.Mui-expanded {\n margin: 0;\n }\n }\n\n .MuiAccordionSummary-expandIconWrapper {\n padding: 0px;\n margin-right: 0;\n margin-left: ", "px;\n svg {\n color: ", ";\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3119
3119
|
});
|
|
3120
|
-
var StyledSubtitle = styled("p")(templateObject_4$
|
|
3120
|
+
var StyledSubtitle = styled("p")(templateObject_4$j || (templateObject_4$j = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
3121
3121
|
var colors = getColors(props);
|
|
3122
|
-
return css(templateObject_3$
|
|
3122
|
+
return css(templateObject_3$p || (templateObject_3$p = __makeTemplateObject(["\n color: ", ";\n margin: 0;\n "], ["\n color: ", ";\n margin: 0;\n "])), colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3123
3123
|
});
|
|
3124
|
-
var templateObject_1$
|
|
3124
|
+
var templateObject_1$R, templateObject_2$y, templateObject_3$p, templateObject_4$j;
|
|
3125
3125
|
|
|
3126
3126
|
var AccordionHeader = function (props) {
|
|
3127
3127
|
var children = props.children, id = props.id, subtitle = props.subtitle;
|
|
@@ -3133,18 +3133,18 @@ var StyledAccordion = styled(Accordion$1, {
|
|
|
3133
3133
|
shouldForwardProp: function (prop) {
|
|
3134
3134
|
return !sdsPropNames$5.includes(prop.toString());
|
|
3135
3135
|
},
|
|
3136
|
-
})(templateObject_2$
|
|
3136
|
+
})(templateObject_2$x || (templateObject_2$x = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3137
3137
|
var useDivider = props.useDivider, togglePosition = props.togglePosition;
|
|
3138
3138
|
var shadows = getShadows(props);
|
|
3139
3139
|
var typography = getTypography(props);
|
|
3140
3140
|
var border = getBorders(props);
|
|
3141
|
-
return css(templateObject_1$
|
|
3141
|
+
return css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &.MuiAccordion-root {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .MuiAccordionSummary-root {\n padding: 10px;\n min-height: 40px;\n\n &.Mui-expanded {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .MuiAccordionSummary-expandIconWrapper {\n padding: 0;\n align-self: flex-start;\n }\n }\n\n .MuiAccordionDetails-root {\n padding: 10px;\n padding-top: 4px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.Mui-expanded {\n margin: 0;\n }\n ", "\n }\n "], ["\n &.MuiAccordion-root {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .MuiAccordionSummary-root {\n padding: 10px;\n min-height: 40px;\n\n &.Mui-expanded {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .MuiAccordionSummary-expandIconWrapper {\n padding: 0;\n align-self: flex-start;\n }\n }\n\n .MuiAccordionDetails-root {\n padding: 10px;\n padding-top: 4px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.Mui-expanded {\n margin: 0;\n }\n ", "\n }\n "])), shadows === null || shadows === void 0 ? void 0 : shadows.none, typography === null || typography === void 0 ? void 0 : typography.fontFamily, useDivider ? border === null || border === void 0 ? void 0 : border.gray[300] : "none", togglePosition === "left" && leftPosition(props));
|
|
3142
3142
|
});
|
|
3143
3143
|
var leftPosition = function (props) {
|
|
3144
3144
|
var spaces = getSpaces(props);
|
|
3145
|
-
return css(templateObject_3$
|
|
3145
|
+
return css(templateObject_3$o || (templateObject_3$o = __makeTemplateObject(["\n &.MuiAccordion-root {\n & .MuiAccordionSummary-root {\n flex-direction: row-reverse;\n\n .MuiAccordionSummary-content {\n padding-left: ", "px;\n }\n\n .MuiAccordionSummary-expandIconWrapper {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.Mui-expanded {\n transform: rotate(0deg);\n }\n }\n }\n\n & .MuiAccordionDetails-root {\n padding-left: 30px;\n }\n }\n "], ["\n &.MuiAccordion-root {\n & .MuiAccordionSummary-root {\n flex-direction: row-reverse;\n\n .MuiAccordionSummary-content {\n padding-left: ", "px;\n }\n\n .MuiAccordionSummary-expandIconWrapper {\n margin: 0;\n transform: rotate(-90deg);\n align-self: flex-start;\n margin-top: ", "px;\n\n &.Mui-expanded {\n transform: rotate(0deg);\n }\n }\n }\n\n & .MuiAccordionDetails-root {\n padding-left: 30px;\n }\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.xxs);
|
|
3146
3146
|
};
|
|
3147
|
-
var templateObject_1$
|
|
3147
|
+
var templateObject_1$Q, templateObject_2$x, templateObject_3$o;
|
|
3148
3148
|
|
|
3149
3149
|
/**
|
|
3150
3150
|
* @see https://mui.com/material-ui/react-accordion/
|
|
@@ -3160,7 +3160,7 @@ var Accordion = React__default.forwardRef(function (props, ref) {
|
|
|
3160
3160
|
return (jsx(StyledAccordion, __assign({ square: true, useDivider: useDivider, togglePosition: togglePosition, expanded: expanded === id, onChange: handleChange(id), ref: ref }, props, { children: children })));
|
|
3161
3161
|
});
|
|
3162
3162
|
|
|
3163
|
-
var StyledAlert = styled(Alert$2)(templateObject_1$
|
|
3163
|
+
var StyledAlert = styled(Alert$2)(templateObject_1$P || (templateObject_1$P = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3164
3164
|
var colors = getColors(props);
|
|
3165
3165
|
var spacings = getSpaces(props);
|
|
3166
3166
|
var shadows = getShadows(props);
|
|
@@ -3171,7 +3171,7 @@ var StyledAlert = styled(Alert$2)(templateObject_1$N || (templateObject_1$N = __
|
|
|
3171
3171
|
var backgroundColor = colors && colors[severity][100];
|
|
3172
3172
|
return "\n background-color: ".concat(backgroundColor, ";\n margin: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0;\n color: ").concat(defaultTheme.palette.text.primary, ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px\n ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 9px;\n background-color: ").concat(alertColor, ";\n &.elevated {\n border-left: 5px solid;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.s, ";\n border-color: ").concat(borderColor, ";\n }\n .MuiAlert-icon {\n path {\n fill: ").concat(iconColor, ";\n }\n }\n ");
|
|
3173
3173
|
});
|
|
3174
|
-
var templateObject_1$
|
|
3174
|
+
var templateObject_1$P;
|
|
3175
3175
|
|
|
3176
3176
|
/**
|
|
3177
3177
|
* @see https://mui.com/material-ui/react-alert/
|
|
@@ -3184,6 +3184,7 @@ var noop = function () { };
|
|
|
3184
3184
|
var toKebabCase = function (str) {
|
|
3185
3185
|
return str.replace(/[\s_]+/g, "-").toLowerCase();
|
|
3186
3186
|
};
|
|
3187
|
+
var EMPTY_OBJECT = {};
|
|
3187
3188
|
|
|
3188
3189
|
var _a;
|
|
3189
3190
|
var SDSWarningTypes;
|
|
@@ -3245,23 +3246,23 @@ var showWarningIfFirstOccurence = function (warningType) {
|
|
|
3245
3246
|
var isOn = function (props) {
|
|
3246
3247
|
var sdsType = props.sdsType;
|
|
3247
3248
|
var colors = getColors(props);
|
|
3248
|
-
return css(templateObject_1$
|
|
3249
|
+
return css(templateObject_1$O || (templateObject_1$O = __makeTemplateObject(["\n ", "\n "], ["\n ", "\n "])), sdsType !== "tertiary" &&
|
|
3249
3250
|
"\n color: ".concat(sdsType === "primary" ? colors === null || colors === void 0 ? void 0 : colors.primary[600] : colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n\n &:hover {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[600], ";\n }\n "));
|
|
3250
3251
|
};
|
|
3251
3252
|
var isDisabled$1 = function (props) {
|
|
3252
3253
|
var colors = getColors(props);
|
|
3253
|
-
return css(templateObject_2$
|
|
3254
|
+
return css(templateObject_2$w || (templateObject_2$w = __makeTemplateObject(["\n color: ", ";\n "], ["\n color: ", ";\n "])), colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
3254
3255
|
};
|
|
3255
3256
|
var primary$2 = function (props) {
|
|
3256
3257
|
var colors = getColors(props);
|
|
3257
3258
|
var sdsSize = props.sdsSize;
|
|
3258
|
-
return css(templateObject_3$
|
|
3259
|
+
return css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n color: ", ";\n\n &:hover {\n background: ", ";\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "], ["\n color: ", ";\n\n &:hover {\n background: ", ";\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n "])), colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.gray[200], sdsSize === "small"
|
|
3259
3260
|
? colors === null || colors === void 0 ? void 0 : colors.primary[600]
|
|
3260
3261
|
: colors === null || colors === void 0 ? void 0 : colors.primary[400], colors === null || colors === void 0 ? void 0 : colors.primary[600]);
|
|
3261
3262
|
};
|
|
3262
3263
|
var secondary$2 = function (props) {
|
|
3263
3264
|
var colors = getColors(props);
|
|
3264
|
-
return css(templateObject_4$
|
|
3265
|
+
return css(templateObject_4$i || (templateObject_4$i = __makeTemplateObject(["\n color: ", ";\n\n &:hover,\n &:active {\n background: none;\n color: ", ";\n }\n "], ["\n color: ", ";\n\n &:hover,\n &:active {\n background: none;\n color: ", ";\n }\n "])), colors === null || colors === void 0 ? void 0 : colors.gray[500], colors === null || colors === void 0 ? void 0 : colors.primary[400]);
|
|
3265
3266
|
};
|
|
3266
3267
|
var tertiary = function (props) {
|
|
3267
3268
|
var colors = getColors(props);
|
|
@@ -3284,7 +3285,7 @@ var large = function (props) {
|
|
|
3284
3285
|
var iconSizes = getIconSizes(props);
|
|
3285
3286
|
return css(templateObject_8$6 || (templateObject_8$6 = __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 === "primary" ? "margin: 5px;" : "");
|
|
3286
3287
|
};
|
|
3287
|
-
var doNotForwardProps$
|
|
3288
|
+
var doNotForwardProps$m = [
|
|
3288
3289
|
"on",
|
|
3289
3290
|
"sdsSize",
|
|
3290
3291
|
"sdsType",
|
|
@@ -3292,12 +3293,12 @@ var doNotForwardProps$k = [
|
|
|
3292
3293
|
"sdsIconProps",
|
|
3293
3294
|
];
|
|
3294
3295
|
var StyledButtonIcon$2 = styled(IconButton, {
|
|
3295
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3296
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$m.includes(prop); },
|
|
3296
3297
|
})(templateObject_10$1 || (templateObject_10$1 = __makeTemplateObject(["\n padding: 0;\n\n :focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n ", "\n"], ["\n padding: 0;\n\n :focus-visible {\n outline: 5px auto Highlight;\n outline: 5px auto -webkit-focus-ring-color;\n }\n\n ", "\n"])), function (props) {
|
|
3297
3298
|
var on = props.on, disabled = props.disabled, sdsSize = props.sdsSize, sdsType = props.sdsType;
|
|
3298
3299
|
return css(templateObject_9$3 || (templateObject_9$3 = __makeTemplateObject(["\n ", "\n ", "\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), on && isOn(props), disabled && isDisabled$1(props), sdsSize === "small" && small$1(props), sdsSize === "medium" && medium$1(props), sdsSize === "large" && large(props));
|
|
3299
3300
|
});
|
|
3300
|
-
var templateObject_1$
|
|
3301
|
+
var templateObject_1$O, templateObject_2$w, templateObject_3$n, templateObject_4$i, templateObject_5$e, templateObject_6$b, templateObject_7$8, templateObject_8$6, templateObject_9$3, templateObject_10$1;
|
|
3301
3302
|
|
|
3302
3303
|
var ButtonIconSizeToSdsIconSize = {
|
|
3303
3304
|
large: "xl",
|
|
@@ -3317,17 +3318,17 @@ var sdsPropNames$4 = ["sdsStyle", "sdsStage", "intent", "handleSubmit"];
|
|
|
3317
3318
|
var rounded$3 = function (props) {
|
|
3318
3319
|
var corners = getCorners(props);
|
|
3319
3320
|
var borders = getBorders(props);
|
|
3320
|
-
return css(templateObject_1$
|
|
3321
|
+
return css(templateObject_1$N || (templateObject_1$N = __makeTemplateObject(["\n .", " .", " {\n border-radius: ", "px;\n border: ", ";\n }\n "], ["\n .", " .", " {\n border-radius: ", "px;\n border: ", ";\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.l, borders === null || borders === void 0 ? void 0 : borders.gray[400]);
|
|
3321
3322
|
};
|
|
3322
3323
|
var error$3 = function (props) {
|
|
3323
3324
|
var borders = getBorders(props);
|
|
3324
3325
|
var colors = getColors(props);
|
|
3325
|
-
return css(templateObject_2$
|
|
3326
|
+
return css(templateObject_2$v || (templateObject_2$v = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.error[400], inputAdornmentClasses.root, buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3326
3327
|
};
|
|
3327
3328
|
var warning$3 = function (props) {
|
|
3328
3329
|
var borders = getBorders(props);
|
|
3329
3330
|
var colors = getColors(props);
|
|
3330
|
-
return css(templateObject_3$
|
|
3331
|
+
return css(templateObject_3$m || (templateObject_3$m = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.warning[400], inputAdornmentClasses.root, buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.gray[500]);
|
|
3331
3332
|
};
|
|
3332
3333
|
var userInput$2 = function (props) {
|
|
3333
3334
|
var intent = props.intent;
|
|
@@ -3339,7 +3340,7 @@ var userInput$2 = function (props) {
|
|
|
3339
3340
|
? borders === null || borders === void 0 ? void 0 : borders.warning[400]
|
|
3340
3341
|
: borders === null || borders === void 0 ? void 0 : borders.primary[400];
|
|
3341
3342
|
var color = intent === "default" ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[500];
|
|
3342
|
-
return css(templateObject_4$
|
|
3343
|
+
return css(templateObject_4$h || (templateObject_4$h = __makeTemplateObject(["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "], ["\n .", " .", " {\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n "])), outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, border, inputAdornmentClasses.root, color);
|
|
3343
3344
|
};
|
|
3344
3345
|
var disabledStyled$2 = function (props) {
|
|
3345
3346
|
var borders = getBorders(props);
|
|
@@ -3363,10 +3364,10 @@ var StyledSearchBase = styled(TextField, {
|
|
|
3363
3364
|
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 margin-right: ", "px;\n }\n\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n }\n }\n\n .", " {\n padding: ", "px ", "px;\n height: 34px;\n box-sizing: border-box;\n background-color: #fff;\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\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 margin-right: ", "px;\n }\n\n .", " {\n .", " {\n border: ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: ", ";\n }\n }\n\n .", " {\n padding: ", "px ", "px;\n height: 34px;\n box-sizing: border-box;\n background-color: #fff;\n }\n\n .", ":hover\n .", " {\n border: ", ";\n }\n\n .", ".", " {\n .", " {\n border: ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.xl, spacings === null || spacings === void 0 ? void 0 : spacings.s, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[400], value ? 1 : 0, inputBaseClasses.inputSizeSmall, spacings === null || spacings === void 0 ? void 0 : spacings.xs, spacings === null || spacings === void 0 ? void 0 : spacings.l, outlinedInputClasses.root, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.gray[500], outlinedInputClasses.root, outlinedInputClasses.focused, outlinedInputClasses.notchedOutline, borders === null || borders === void 0 ? void 0 : borders.primary[400], inputAdornmentClasses.root, buttonBaseClasses.root, colors === null || colors === void 0 ? void 0 : colors.primary[400], sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
|
|
3364
3365
|
});
|
|
3365
3366
|
var StyledInputAdornment = styled(InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
3366
|
-
var templateObject_1$
|
|
3367
|
+
var templateObject_1$N, templateObject_2$v, templateObject_3$m, templateObject_4$h, templateObject_5$d, templateObject_6$a, templateObject_7$7, templateObject_8$5, templateObject_9$2;
|
|
3367
3368
|
|
|
3368
3369
|
var fontBodyXs$4 = fontBody("xs");
|
|
3369
|
-
var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$
|
|
3370
|
+
var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$M || (templateObject_1$M = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3370
3371
|
var selected = props.selected;
|
|
3371
3372
|
var colors = getColors(props);
|
|
3372
3373
|
var fontWeights = getFontWeights(props);
|
|
@@ -3374,7 +3375,7 @@ var StyledMenuItem$1 = styled(MenuItem$1)(templateObject_1$K || (templateObject_
|
|
|
3374
3375
|
var primary = colors === null || colors === void 0 ? void 0 : colors.primary[400];
|
|
3375
3376
|
return "\n padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.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(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n\n &[aria-selected=\"true\"] {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n }\n\n &.MuiMenuItem-root .MuiSvgIcon-root {\n align-self: flex-start;\n }\n\n &.MuiMenuItem-root .Mui-disabled {\n opacity: 1 !important;\n }\n\n &.MuiAutocomplete-option[aria-selected=\"true\"] {\n &:hover {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], " !important;\n }\n\n svg.check-icon {\n color: ").concat(selected ? primary : colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n }\n }\n\n &.MuiAutocomplete-option[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &:hover {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n svg.check-icon {\n color: ").concat(selected ? primary : colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n }\n }\n\n &.Mui-selected.MuiListItem-root.MuiListItem-button {\n background-color: white;\n &:hover {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\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 ");
|
|
3376
3377
|
});
|
|
3377
|
-
var ContentWrapper = styled("span")(templateObject_2$
|
|
3378
|
+
var ContentWrapper = styled("span")(templateObject_2$u || (templateObject_2$u = __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"])));
|
|
3378
3379
|
var disabledStyles = function (props) {
|
|
3379
3380
|
var disabled = props.disabled;
|
|
3380
3381
|
if (!disabled)
|
|
@@ -3382,12 +3383,12 @@ var disabledStyles = function (props) {
|
|
|
3382
3383
|
var colors = getColors(props);
|
|
3383
3384
|
return "\n color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[300], ";\n cursor: default;\n ");
|
|
3384
3385
|
};
|
|
3385
|
-
var TextWrapper = styled("span")(templateObject_3$
|
|
3386
|
+
var TextWrapper = styled("span")(templateObject_3$l || (templateObject_3$l = __makeTemplateObject(["\n ", "\n\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n\n ", "\n"])), fontBodyXs$4, function (props) {
|
|
3386
3387
|
var _a;
|
|
3387
3388
|
var palette = getPalette(props);
|
|
3388
3389
|
return "\n color: ".concat((_a = palette === null || palette === void 0 ? void 0 : palette.text) === null || _a === void 0 ? void 0 : _a.primary, ";\n display: flex;\n white-space: pre-wrap;\n ");
|
|
3389
3390
|
}, disabledStyles);
|
|
3390
|
-
var StyledMenuItemIcon = styled("span")(templateObject_4$
|
|
3391
|
+
var StyledMenuItemIcon = styled("span")(templateObject_4$g || (templateObject_4$g = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3391
3392
|
var disabled = props.disabled;
|
|
3392
3393
|
var spacings = getSpaces(props);
|
|
3393
3394
|
var iconSizes = getIconSizes(props);
|
|
@@ -3419,7 +3420,7 @@ var StyledMinus = styled(Remove, {
|
|
|
3419
3420
|
var selectedColor = disabled ? colors === null || colors === void 0 ? void 0 : colors.gray[300] : colors === null || colors === void 0 ? void 0 : colors.primary[400];
|
|
3420
3421
|
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 ");
|
|
3421
3422
|
});
|
|
3422
|
-
var templateObject_1$
|
|
3423
|
+
var templateObject_1$M, templateObject_2$u, templateObject_3$l, templateObject_4$g, templateObject_5$c, templateObject_6$9, templateObject_7$6, templateObject_8$4, templateObject_9$1;
|
|
3423
3424
|
|
|
3424
3425
|
/**
|
|
3425
3426
|
* @see https://mui.com/material-ui/react-menu/
|
|
@@ -3498,74 +3499,98 @@ var InputSearch = forwardRef(function InputSearch(props, ref) {
|
|
|
3498
3499
|
* (masoudmanson): This prevents the browser's default auto completion
|
|
3499
3500
|
* menu from being displayed for the InputSearch.
|
|
3500
3501
|
*/
|
|
3501
|
-
autoComplete: "
|
|
3502
|
+
autoComplete: "one-time-code" }, rest))] }));
|
|
3502
3503
|
});
|
|
3503
3504
|
|
|
3504
|
-
var doNotForwardProps$
|
|
3505
|
+
var doNotForwardProps$l = [
|
|
3505
3506
|
"count",
|
|
3506
3507
|
"keepSearchOnSelect",
|
|
3507
3508
|
"search",
|
|
3508
3509
|
"InputBaseProps",
|
|
3510
|
+
"PopperBaseProps",
|
|
3511
|
+
"onClickAway",
|
|
3509
3512
|
];
|
|
3510
|
-
var
|
|
3511
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3512
|
-
})(templateObject_1$
|
|
3513
|
+
var StyledAutocompleteBase = styled(Autocomplete$1, {
|
|
3514
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
3515
|
+
})(templateObject_1$L || (templateObject_1$L = __makeTemplateObject(["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"], ["\n + .", "\n > .", "\n .", " {\n ", "\n }\n\n ", "\n"])), autocompleteClasses.popper, autocompleteClasses.paper, autocompleteClasses.groupLabel, fontCapsXxxs, function (props) {
|
|
3513
3516
|
var search = props.search;
|
|
3514
3517
|
var spacings = getSpaces(props);
|
|
3515
3518
|
var colors = getColors(props);
|
|
3516
3519
|
var borders = getBorders(props);
|
|
3517
|
-
return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n .MuiAutocomplete-input {\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n }\n }\n\n & + .
|
|
3520
|
+
return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px 0 0;\n\n .MuiAutocomplete-input {\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n }\n }\n\n & + .").concat(autocompleteClasses.popper, " > .").concat(autocompleteClasses.paper, " {\n .").concat(autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0 0;\n\n .").concat(autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(autocompleteClasses.focused, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: white;\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(autocompleteClasses.focused, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[100], ";\n }\n }\n\n & > li:last-child .").concat(autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n }\n\n .").concat(autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n border-bottom: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[200], ";\n padding-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(autocompleteClasses.noOptions, " {\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n }\n\n .").concat(autocompleteClasses.loading, " {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0 0;\n }\n }\n ");
|
|
3518
3521
|
});
|
|
3519
3522
|
var InputBaseWrapper$1 = styled("div", {
|
|
3520
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3521
|
-
})(templateObject_2$
|
|
3523
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
3524
|
+
})(templateObject_2$t || (templateObject_2$t = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3522
3525
|
var search = props.search;
|
|
3523
3526
|
if (!search) {
|
|
3524
3527
|
// (thuang): We cannot use `display: none;` here, since
|
|
3525
3528
|
// the component needs to be in the DOM to handle backdrop
|
|
3526
3529
|
// click to close the menu
|
|
3527
|
-
return "\n border: 0;\n padding: 0;\n
|
|
3530
|
+
return "\n border: 0;\n padding: 0;\n white-space: nowrap;\n clip-path: inset(100%);\n clip: rect(0 0 0 0);\n overflow: hidden;\n margin: 0;\n ";
|
|
3528
3531
|
}
|
|
3529
3532
|
});
|
|
3530
3533
|
var StyledMenuInputSearch$1 = styled(InputSearch, {
|
|
3531
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3532
|
-
})(templateObject_3$
|
|
3534
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$l.includes(prop); },
|
|
3535
|
+
})(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) {
|
|
3533
3536
|
var search = _a.search;
|
|
3534
3537
|
return (search ? "auto" : "transparent");
|
|
3535
3538
|
});
|
|
3536
|
-
var StyledPaper$
|
|
3539
|
+
var StyledPaper$3 = styled(Paper)(templateObject_4$f || (templateObject_4$f = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3537
3540
|
var spacings = getSpaces(props);
|
|
3538
3541
|
var borders = getBorders(props);
|
|
3539
3542
|
var corners = getCorners(props);
|
|
3540
3543
|
var shadows = getShadows(props);
|
|
3541
|
-
return "\n padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.
|
|
3544
|
+
return "\n padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ;\n background-color: white;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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 ");
|
|
3542
3545
|
});
|
|
3543
3546
|
var StyledMenuItemDetails = styled("div")(templateObject_5$b || (templateObject_5$b = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
3544
3547
|
var colors = getColors(props);
|
|
3545
3548
|
return "\n color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n white-space: pre-wrap;\n ");
|
|
3546
3549
|
});
|
|
3547
3550
|
var StyledMenuItemText = styled("div")(templateObject_6$8 || (templateObject_6$8 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n"], ["\n display: flex;\n flex-direction: column;\n"])));
|
|
3548
|
-
var templateObject_1$
|
|
3551
|
+
var templateObject_1$L, templateObject_2$t, templateObject_3$k, templateObject_4$f, templateObject_5$b, templateObject_6$8;
|
|
3549
3552
|
|
|
3550
|
-
var
|
|
3551
|
-
var
|
|
3552
|
-
var
|
|
3553
|
+
var AutocompleteBase = function (props) {
|
|
3554
|
+
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;
|
|
3555
|
+
var theme = useTheme();
|
|
3556
|
+
var _r = useState(""), inputValue = _r[0], setInputValue = _r[1];
|
|
3557
|
+
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 }, props, {
|
|
3558
|
+
// (masoudmanson): For multiple options (multiple = true), setting blurOnSelect to false
|
|
3559
|
+
// keeps the dropdown open after selecting an option. This feature enhances user experience
|
|
3560
|
+
// by preventing the dropdown from closing, enabling users to select multiple options
|
|
3561
|
+
// without having to reopen the menu repeatedly.
|
|
3562
|
+
blurOnSelect: multiple ? false : blurOnSelect,
|
|
3563
|
+
// (masoudmanson): Given the necessity of maintaining consistent onBlur functionality,
|
|
3564
|
+
// and clearing the input value on blur, it's crucial to include the onBlur handler
|
|
3565
|
+
// after spreading other props. Furthermore, within the defaultOnBlur function, the
|
|
3566
|
+
// actual onBlur function is invoked for completeness.
|
|
3567
|
+
onBlur: defaultOnBlur,
|
|
3568
|
+
// (masoudmanson): To ensure component-level actions (changing the input field value)
|
|
3569
|
+
// trigger upon input changes, it's crucial to position the onInputChange handler after
|
|
3570
|
+
// spreading the other props. Furthermore, within the defaultOnInputChange function,
|
|
3571
|
+
// the provided onInputChange from props is called at the end to emit the input changes
|
|
3572
|
+
// to the user.
|
|
3573
|
+
onInputChange: defaultOnInputChange })));
|
|
3553
3574
|
/**
|
|
3554
3575
|
* (masoudmanson): Using a custom Popper or Paper with the Autocomplete
|
|
3555
|
-
* without a
|
|
3576
|
+
* without a useCallback results in scroll jumps while selecting an option!
|
|
3556
3577
|
*/
|
|
3557
|
-
|
|
3558
|
-
return (
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3578
|
+
function useDefaultPopperComponent() {
|
|
3579
|
+
return useCallback(function (popperProps) {
|
|
3580
|
+
var _a;
|
|
3581
|
+
return (jsx(Popper, __assign({ modifiers: [
|
|
3582
|
+
{
|
|
3583
|
+
enabled: true,
|
|
3584
|
+
name: "offset",
|
|
3585
|
+
options: {
|
|
3586
|
+
offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
|
|
3587
|
+
},
|
|
3564
3588
|
},
|
|
3565
|
-
},
|
|
3566
|
-
|
|
3567
|
-
}
|
|
3568
|
-
|
|
3589
|
+
] }, popperProps)));
|
|
3590
|
+
}, []);
|
|
3591
|
+
}
|
|
3592
|
+
function defaultRenderInput(params) {
|
|
3593
|
+
return (jsx(InputBaseWrapper$1, { search: search, children: jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", label: label, placeholder: label, ref: params.InputProps.ref, search: search,
|
|
3569
3594
|
// (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
|
|
3570
3595
|
onKeyDown: function (event) {
|
|
3571
3596
|
if (event.key === "Backspace") {
|
|
@@ -3580,31 +3605,35 @@ var Autocomplete = function (props) {
|
|
|
3580
3605
|
sdsType: "iconButton",
|
|
3581
3606
|
}, sdsIcon: "xMark" })), jsx(ButtonIcon, { "aria-label": "search-button", sdsType: "secondary", sdsSize: "small", sdsIconProps: {
|
|
3582
3607
|
sdsType: "interactive",
|
|
3583
|
-
}, sdsIcon: "search" })] })), inputProps: params.inputProps }) }, InputBaseProps)) }));
|
|
3584
|
-
|
|
3608
|
+
}, sdsIcon: "search" })] })), inputProps: params.inputProps }) }, InputBaseProps)) }));
|
|
3609
|
+
}
|
|
3610
|
+
function defaultOnBlur(event) {
|
|
3611
|
+
var _a;
|
|
3612
|
+
if (clearOnBlur)
|
|
3585
3613
|
setInputValue("");
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
|
|
3589
|
-
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
else {
|
|
3593
|
-
setInputValue("");
|
|
3594
|
-
}
|
|
3614
|
+
(_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, event);
|
|
3615
|
+
}
|
|
3616
|
+
function defaultOnInputChange(event, value, reason) {
|
|
3617
|
+
if (!multiple) {
|
|
3618
|
+
if (reason === "input") {
|
|
3619
|
+
setInputValue(value);
|
|
3595
3620
|
}
|
|
3596
3621
|
else {
|
|
3597
|
-
|
|
3598
|
-
setInputValue("");
|
|
3599
|
-
}
|
|
3600
|
-
else if (reason === "input" ||
|
|
3601
|
-
(reason === "reset" && !keepSearchOnSelect)) {
|
|
3602
|
-
setInputValue(value);
|
|
3603
|
-
}
|
|
3622
|
+
setInputValue("");
|
|
3604
3623
|
}
|
|
3605
|
-
|
|
3606
|
-
|
|
3607
|
-
|
|
3624
|
+
}
|
|
3625
|
+
else {
|
|
3626
|
+
if (reason === "clear") {
|
|
3627
|
+
setInputValue("");
|
|
3628
|
+
}
|
|
3629
|
+
else if (reason === "input" ||
|
|
3630
|
+
(reason === "reset" && !keepSearchOnSelect)) {
|
|
3631
|
+
setInputValue(value);
|
|
3632
|
+
}
|
|
3633
|
+
}
|
|
3634
|
+
if (onInputChange)
|
|
3635
|
+
onInputChange(event, value, reason);
|
|
3636
|
+
}
|
|
3608
3637
|
function clearInput() {
|
|
3609
3638
|
setInputValue("");
|
|
3610
3639
|
/**
|
|
@@ -3640,6 +3669,206 @@ var Autocomplete = function (props) {
|
|
|
3640
3669
|
}
|
|
3641
3670
|
};
|
|
3642
3671
|
|
|
3672
|
+
var StyledColumn = styled("div")(templateObject_1$K || (templateObject_1$K = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3673
|
+
var _a = props.width, width = _a === void 0 ? 280 : _a;
|
|
3674
|
+
var colors = getColors(props);
|
|
3675
|
+
var spacings = getSpaces(props);
|
|
3676
|
+
return "\n position: relative;\n width: ".concat(width, "px;\n\n &:not(:last-child) {\n border-right: solid 1px ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.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 ");
|
|
3677
|
+
});
|
|
3678
|
+
var StyledColumnTitle = styled("p")(templateObject_2$s || (templateObject_2$s = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontCapsXxxs, function (props) {
|
|
3679
|
+
var spacings = getSpaces(props);
|
|
3680
|
+
var colors = getColors(props);
|
|
3681
|
+
var typography = getTypography(props);
|
|
3682
|
+
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px;\n margin: 0;\n ");
|
|
3683
|
+
});
|
|
3684
|
+
var StyledColumnIcon = styled("span")(templateObject_3$j || (templateObject_3$j = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3685
|
+
var spacings = getSpaces(props);
|
|
3686
|
+
var colors = getColors(props);
|
|
3687
|
+
var iconSizes = getIconSizes(props);
|
|
3688
|
+
return "\n background-color: white;\n position: absolute;\n right: -".concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n top: -2px;\n padding-bottom: 2px;\n\n svg {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\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 ");
|
|
3689
|
+
});
|
|
3690
|
+
var templateObject_1$K, templateObject_2$s, templateObject_3$j;
|
|
3691
|
+
|
|
3692
|
+
var AutocompleteGroup = function (props) {
|
|
3693
|
+
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"]);
|
|
3694
|
+
var name = autocompleteProps.name, width = autocompleteProps.width, icon = autocompleteProps.icon, propProps = autocompleteProps.props;
|
|
3695
|
+
var _a = useState(getInitialValue(multiple, propValue)), value = _a[0], setValue = _a[1];
|
|
3696
|
+
var _b = useState(getInitialValue(multiple, propValue)), pendingValue = _b[0], setPendingValue = _b[1];
|
|
3697
|
+
useEffect(function () {
|
|
3698
|
+
if (propValue !== undefined) {
|
|
3699
|
+
setValue(propValue);
|
|
3700
|
+
}
|
|
3701
|
+
}, [propValue]);
|
|
3702
|
+
var handleChange = useCallback(function (event, newValue, reason, details) {
|
|
3703
|
+
var _a;
|
|
3704
|
+
(_a = propProps === null || propProps === void 0 ? void 0 : propProps.onChange) === null || _a === void 0 ? void 0 : _a.call(propProps, event, newValue, reason, details);
|
|
3705
|
+
onValueChange(name, event, newValue, reason, details);
|
|
3706
|
+
if (multiple) {
|
|
3707
|
+
setPendingValue(newValue);
|
|
3708
|
+
}
|
|
3709
|
+
else {
|
|
3710
|
+
if (newValue &&
|
|
3711
|
+
!Array.isArray(newValue) &&
|
|
3712
|
+
Object.prototype.hasOwnProperty.call(newValue, "name")) {
|
|
3713
|
+
setValue(newValue);
|
|
3714
|
+
}
|
|
3715
|
+
}
|
|
3716
|
+
}, [name, multiple, onValueChange, propProps]);
|
|
3717
|
+
return (jsxs(StyledColumn, { width: width, className: "SdsAutocompleteMultiColumn-column-root", children: [icon && (jsx(StyledColumnIcon, { className: "SdsAutocompleteMultiColumn-column-relation-icon", children: icon })), jsx(StyledColumnTitle, { className: "SdsAutocompleteMultiColumn-column-title", children: name }), jsx(AutocompleteBase, __assign({ label: label, InputBaseProps: InputBaseProps, open: popperOpen, multiple: multiple, inputValue: inputValue, options: autocompleteProps.options, onChange: handleChange, value: multiple ? pendingValue : value, search: false, PaperComponent: PaperComponent }, rest, autocompleteProps.props, {
|
|
3718
|
+
// (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
|
|
3719
|
+
groupBy: undefined }))] }));
|
|
3720
|
+
function getInitialValue(isMultiple, customValue) {
|
|
3721
|
+
if (customValue !== undefined) {
|
|
3722
|
+
return customValue;
|
|
3723
|
+
}
|
|
3724
|
+
return isMultiple
|
|
3725
|
+
? []
|
|
3726
|
+
: null;
|
|
3727
|
+
}
|
|
3728
|
+
};
|
|
3729
|
+
|
|
3730
|
+
var doNotForwardProps$k = [
|
|
3731
|
+
"anchorEl",
|
|
3732
|
+
"count",
|
|
3733
|
+
"keepSearchOnSelect",
|
|
3734
|
+
"search",
|
|
3735
|
+
"InputBaseProps",
|
|
3736
|
+
"title",
|
|
3737
|
+
"PopperBaseProps",
|
|
3738
|
+
"onClickAway",
|
|
3739
|
+
"ClickAwayListenerProps",
|
|
3740
|
+
];
|
|
3741
|
+
var StyledPopper$2 = styled(Popper, {
|
|
3742
|
+
shouldForwardProp: function (prop) {
|
|
3743
|
+
return !doNotForwardProps$k.includes(prop) || prop === "anchorEl";
|
|
3744
|
+
},
|
|
3745
|
+
})(templateObject_1$J || (templateObject_1$J = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3746
|
+
var borders = getBorders(props);
|
|
3747
|
+
var corners = getCorners(props);
|
|
3748
|
+
var shadows = getShadows(props);
|
|
3749
|
+
var spacings = getSpaces(props);
|
|
3750
|
+
return "\n background-color: white;\n border: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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 padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n box-sizing: border-box;\n z-index: 1400;\n\n .").concat(autocompleteClasses.popper, ".").concat(autocompleteClasses.popperDisablePortal, " {\n position: relative !important;\n transform: none !important;\n \n .MuiPaper-root .").concat(autocompleteClasses.listbox, " {\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px 0 0;\n }\n }\n ");
|
|
3751
|
+
});
|
|
3752
|
+
var StyledPaper$2 = styled(Paper, {
|
|
3753
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
3754
|
+
})(templateObject_2$r || (templateObject_2$r = __makeTemplateObject(["\n box-shadow: none;\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n"], ["\n box-shadow: none;\n margin: 0;\n border-radius: 0;\n padding-top: 0;\n padding-bottom: 0;\n"])));
|
|
3755
|
+
var StyledAutocompleteGroupWrapper = styled("div")(templateObject_3$i || (templateObject_3$i = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
3756
|
+
var StyledAutocompleteInput = styled(InputSearch, {
|
|
3757
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$k.includes(prop); },
|
|
3758
|
+
})(templateObject_4$e || (templateObject_4$e = __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) {
|
|
3759
|
+
var search = _a.search;
|
|
3760
|
+
return !search && "height: 0; display: none;";
|
|
3761
|
+
}, function (_a) {
|
|
3762
|
+
var search = _a.search;
|
|
3763
|
+
return (search ? "auto" : "transparent");
|
|
3764
|
+
});
|
|
3765
|
+
var templateObject_1$J, templateObject_2$r, templateObject_3$i, templateObject_4$e;
|
|
3766
|
+
|
|
3767
|
+
var AutocompleteMultiColumn = function (props) {
|
|
3768
|
+
var _a;
|
|
3769
|
+
var InputBaseProps = props.InputBaseProps, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PopperPlacement, PopperPlacement = _c === void 0 ? "bottom-start" : _c, PopperBaseProps = props.PopperBaseProps, _d = props.search, search = _d === void 0 ? false : _d, _e = props.label, label = _e === void 0 ? "Search" : _e, _f = props.onClickAway, onClickAway = _f === void 0 ? defaultOnClickAway : _f, ClickAwayListenerProps = props.ClickAwayListenerProps, options = props.options, onInputChange = props.onInputChange, onBlur = props.onBlur, multiple = props.multiple, parentInitialValue = props.value, onChange = props.onChange, _g = props.PopperComponent, PopperComponent = _g === void 0 ? StyledPopper$2 : _g, rest = __rest(props, ["InputBaseProps", "open", "PopperPlacement", "PopperBaseProps", "search", "label", "onClickAway", "ClickAwayListenerProps", "options", "onInputChange", "onBlur", "multiple", "value", "onChange", "PopperComponent"]);
|
|
3770
|
+
var theme = useTheme();
|
|
3771
|
+
var _h = useState(""), inputValue = _h[0], setInputValue = _h[1];
|
|
3772
|
+
var _j = useState(open), popperOpen = _j[0], setPopperOpen = _j[1];
|
|
3773
|
+
var anchorRef = useRef(null);
|
|
3774
|
+
var _k = React__default.useState(null), anchorEl = _k[0], setAnchorEl = _k[1];
|
|
3775
|
+
useEffect(function () {
|
|
3776
|
+
setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
|
|
3777
|
+
}, [anchorRef]);
|
|
3778
|
+
var _l = useState({}), autocompleteMultiColumnValue = _l[0], setAutocompleteMultiColumnValue = _l[1];
|
|
3779
|
+
useEffect(function () {
|
|
3780
|
+
if (parentInitialValue !== undefined) {
|
|
3781
|
+
setAutocompleteMultiColumnValue(parentInitialValue);
|
|
3782
|
+
}
|
|
3783
|
+
}, [options, parentInitialValue]);
|
|
3784
|
+
var defaultOnValueChange = function (column, event, val, reason, details) {
|
|
3785
|
+
var _a;
|
|
3786
|
+
setAutocompleteMultiColumnValue(function (prev) {
|
|
3787
|
+
var _a;
|
|
3788
|
+
return __assign(__assign({}, prev), (_a = {}, _a[column] = val, _a));
|
|
3789
|
+
});
|
|
3790
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event, __assign(__assign({}, autocompleteMultiColumnValue), (_a = {}, _a[column] = val, _a)), reason, details);
|
|
3791
|
+
};
|
|
3792
|
+
return (jsx(ClickAwayListener, __assign({ onClickAway: onClickAway }, 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: (jsxs(StyledInputAdornment, { position: "end", children: [inputValue && (jsx(ButtonIcon, { "aria-label": "clear-button", className: "input-search-clear-icon", sdsType: "primary", sdsSize: "small", sdsIconProps: {
|
|
3793
|
+
sdsType: "iconButton",
|
|
3794
|
+
}, sdsIcon: "xMark", onClick: clearInput })), jsx(ButtonIcon, { "aria-label": "search-button", sdsType: "secondary", sdsSize: "small", sdsIconProps: {
|
|
3795
|
+
sdsType: "interactive",
|
|
3796
|
+
}, sdsIcon: "search" })] })),
|
|
3797
|
+
/**
|
|
3798
|
+
* (thuang): Works with css caret-color: "transparent" to hide
|
|
3799
|
+
* mobile keyboard
|
|
3800
|
+
*/
|
|
3801
|
+
inputMode: "text" }) }, InputBaseProps)), anchorEl && (jsx(PopperComponent, __assign({ modifiers: [
|
|
3802
|
+
{
|
|
3803
|
+
name: "offset",
|
|
3804
|
+
options: {
|
|
3805
|
+
offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
|
|
3806
|
+
},
|
|
3807
|
+
},
|
|
3808
|
+
], open: popperOpen, anchorEl: anchorEl, placement: PopperPlacement, disablePortal: true }, PopperBaseProps, { children: jsx(StyledAutocompleteGroupWrapper, { className: "SdsAutocompleteMultiColumn-wrapper", children: options.map(function (autocompleteOptions) { return (jsx(AutocompleteGroup, __assign({ autocompleteProps: autocompleteOptions, onValueChange: defaultOnValueChange, value: autocompleteMultiColumnValue
|
|
3809
|
+
? autocompleteMultiColumnValue[autocompleteOptions.name]
|
|
3810
|
+
: undefined, multiple: multiple, label: label, InputBaseProps: InputBaseProps, popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
|
|
3811
|
+
function clearInput() {
|
|
3812
|
+
setInputValue("");
|
|
3813
|
+
/**
|
|
3814
|
+
* (masoudmanson): Because we are manually firing this event,
|
|
3815
|
+
* we must build a onChange event to transmit the updated value to onChange listeners.
|
|
3816
|
+
*/
|
|
3817
|
+
onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange({ target: { value: "" } }, "", "clear");
|
|
3818
|
+
}
|
|
3819
|
+
function handleInputClick(_) {
|
|
3820
|
+
if (popperOpen) {
|
|
3821
|
+
setPopperOpen(false);
|
|
3822
|
+
}
|
|
3823
|
+
else {
|
|
3824
|
+
setPopperOpen(true);
|
|
3825
|
+
}
|
|
3826
|
+
}
|
|
3827
|
+
function handleInputChange(event) {
|
|
3828
|
+
setInputValue(event.target.value);
|
|
3829
|
+
if (onInputChange) {
|
|
3830
|
+
if (event.target.value === "") {
|
|
3831
|
+
onInputChange(event, "", "clear");
|
|
3832
|
+
}
|
|
3833
|
+
else {
|
|
3834
|
+
onInputChange(event, event.target.value, "input");
|
|
3835
|
+
}
|
|
3836
|
+
}
|
|
3837
|
+
}
|
|
3838
|
+
function handleInputBlur(event) {
|
|
3839
|
+
if (props.clearOnBlur)
|
|
3840
|
+
setInputValue("");
|
|
3841
|
+
onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
|
|
3842
|
+
}
|
|
3843
|
+
function defaultOnClickAway() {
|
|
3844
|
+
setPopperOpen(false);
|
|
3845
|
+
}
|
|
3846
|
+
function handleInputKeyDown(event) {
|
|
3847
|
+
// (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
|
|
3848
|
+
if (event.key === "Backspace") {
|
|
3849
|
+
event.stopPropagation();
|
|
3850
|
+
}
|
|
3851
|
+
}
|
|
3852
|
+
};
|
|
3853
|
+
|
|
3854
|
+
var Autocomplete = function (props) {
|
|
3855
|
+
var options = props.options, value = props.value, onChange = props.onChange, rest = __rest(props, ["options", "value", "onChange"]);
|
|
3856
|
+
// Multi-column options
|
|
3857
|
+
if (options && !!options[0] && "options" in options[0]) {
|
|
3858
|
+
if (options.length > 1) {
|
|
3859
|
+
return (jsx(AutocompleteMultiColumn, __assign({ options: options, value: value, onChange: onChange }, rest, {
|
|
3860
|
+
// (masoudmanson): groupBy option is disabled on MultiColumn dropdowns
|
|
3861
|
+
groupBy: undefined, open: true })));
|
|
3862
|
+
}
|
|
3863
|
+
else {
|
|
3864
|
+
return (jsx(AutocompleteBase, __assign({ options: options[0].options, value: value, onChange: onChange }, rest)));
|
|
3865
|
+
}
|
|
3866
|
+
}
|
|
3867
|
+
else {
|
|
3868
|
+
return (jsx(AutocompleteBase, __assign({ options: options, onChange: onChange, value: value }, rest)));
|
|
3869
|
+
}
|
|
3870
|
+
};
|
|
3871
|
+
|
|
3643
3872
|
var Centered = styled("div")(templateObject_1$I || (templateObject_1$I = __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"])));
|
|
3644
3873
|
var IconWrapper$1 = styled("div")(templateObject_2$q || (templateObject_2$q = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
3645
3874
|
var iconSizes = getIconSizes(props);
|
|
@@ -3673,9 +3902,9 @@ var secondary$1 = function (props) {
|
|
|
3673
3902
|
var colors = getColors(props);
|
|
3674
3903
|
return "\n background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.info[100], ";\n color: black;\n ");
|
|
3675
3904
|
};
|
|
3676
|
-
var doNotForwardProps$
|
|
3905
|
+
var doNotForwardProps$j = ["sdsType", "textChild"];
|
|
3677
3906
|
var StyledBanner = styled("div", {
|
|
3678
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
3907
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
3679
3908
|
})(templateObject_5$a || (templateObject_5$a = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 40px;\n width: 100%;\n\n ", "\n\n ", "\n"], ["\n display: flex;\n align-items: center;\n height: 40px;\n width: 100%;\n\n ", "\n\n ", "\n"])), fontBodyS$2, function (props) {
|
|
3680
3909
|
var sdsType = props.sdsType;
|
|
3681
3910
|
var typography = getTypography(props);
|
|
@@ -3794,9 +4023,9 @@ var ButtonDropdown = React__default.forwardRef(function (props, ref) {
|
|
|
3794
4023
|
});
|
|
3795
4024
|
|
|
3796
4025
|
var fontBodyXs$3 = fontBody("xs");
|
|
3797
|
-
var doNotForwardProps$
|
|
4026
|
+
var doNotForwardProps$i = ["calloutTitle", "collapsed"];
|
|
3798
4027
|
var StyledCallout = styled(Alert$2, {
|
|
3799
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4028
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
3800
4029
|
})(templateObject_1$G || (templateObject_1$G = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$3, function (props) {
|
|
3801
4030
|
var colors = getColors(props);
|
|
3802
4031
|
var spacings = getSpaces(props);
|
|
@@ -3974,7 +4203,7 @@ function mergeClass$1(_a) {
|
|
|
3974
4203
|
return propClassName ? "".concat(propClassName, " ").concat(className) : className;
|
|
3975
4204
|
}
|
|
3976
4205
|
|
|
3977
|
-
var doNotForwardProps$
|
|
4206
|
+
var doNotForwardProps$h = [
|
|
3978
4207
|
"icon",
|
|
3979
4208
|
"iconVerticalAlign",
|
|
3980
4209
|
"horizontalAlign",
|
|
@@ -4000,7 +4229,7 @@ var verticalAlignToFlexMap = {
|
|
|
4000
4229
|
top: "flex-start",
|
|
4001
4230
|
};
|
|
4002
4231
|
var StyledTableData = styled("td", {
|
|
4003
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4232
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
4004
4233
|
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4005
4234
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
4006
4235
|
var spacings = getSpaces(props);
|
|
@@ -4016,14 +4245,14 @@ var ShouldTruncate = function () {
|
|
|
4016
4245
|
var StyledCellContent = styled("div")(templateObject_2$n || (templateObject_2$n = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4017
4246
|
var StyledCellContentWrapper = styled("div")(templateObject_3$e || (templateObject_3$e = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
|
|
4018
4247
|
var StyledCellIconWrapper = styled("div", {
|
|
4019
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4248
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
4020
4249
|
})(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4021
4250
|
var _a = props.iconVerticalAlign, iconVerticalAlign = _a === void 0 ? "top" : _a;
|
|
4022
4251
|
var spacings = getSpaces(props);
|
|
4023
4252
|
return "\n padding-right: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n display: flex;\n flex-direction: column;\n justify-content: ").concat(verticalAlignToFlexMap[iconVerticalAlign], ";\n ");
|
|
4024
4253
|
});
|
|
4025
4254
|
var PrimaryText = styled("span", {
|
|
4026
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4255
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
4027
4256
|
})(templateObject_5$7 || (templateObject_5$7 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$2, function (props) {
|
|
4028
4257
|
var _a = props.primaryTextWrapLineCount, primaryTextWrapLineCount = _a === void 0 ? 3 : _a;
|
|
4029
4258
|
return "\n display: block;\n line-height: 20px;\n ".concat(props.shouldTextWrap
|
|
@@ -4031,7 +4260,7 @@ var PrimaryText = styled("span", {
|
|
|
4031
4260
|
: ShouldTruncate(), "\n ");
|
|
4032
4261
|
});
|
|
4033
4262
|
var SecondaryText = styled("span", {
|
|
4034
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4263
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
4035
4264
|
})(templateObject_6$5 || (templateObject_6$5 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4036
4265
|
var _a = props.secondaryTextWrapLineCount, secondaryTextWrapLineCount = _a === void 0 ? 1 : _a;
|
|
4037
4266
|
var colors = getColors(props);
|
|
@@ -4041,7 +4270,7 @@ var SecondaryText = styled("span", {
|
|
|
4041
4270
|
: ShouldTruncate(), "\n ");
|
|
4042
4271
|
});
|
|
4043
4272
|
var TertiaryText = styled("span", {
|
|
4044
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4273
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
4045
4274
|
})(templateObject_7$4 || (templateObject_7$4 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4046
4275
|
var _a = props.tertiaryTextWrapLineCount, tertiaryTextWrapLineCount = _a === void 0 ? 1 : _a;
|
|
4047
4276
|
var colors = getColors(props);
|
|
@@ -4064,9 +4293,9 @@ var CellBasic = forwardRef(function (props, ref) {
|
|
|
4064
4293
|
return (jsx(StyledTableData, __assign({ ref: ref }, props, { children: jsx(CellBasicContent, __assign({}, props)) })));
|
|
4065
4294
|
});
|
|
4066
4295
|
|
|
4067
|
-
var doNotForwardProps$
|
|
4296
|
+
var doNotForwardProps$g = ["horizontalAlign", "verticalAlign"];
|
|
4068
4297
|
var StyledCellComponentData = styled("td", {
|
|
4069
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4298
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
4070
4299
|
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$2, function (props) {
|
|
4071
4300
|
var spacings = getSpaces(props);
|
|
4072
4301
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
@@ -4074,13 +4303,13 @@ var StyledCellComponentData = styled("td", {
|
|
|
4074
4303
|
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n align-items: center;\n text-align: ").concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlign, ";\n overflow: hidden;\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n ");
|
|
4075
4304
|
});
|
|
4076
4305
|
styled("span", {
|
|
4077
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4306
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
4078
4307
|
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontHeaderS, function (props) {
|
|
4079
4308
|
var typography = getTypography(props);
|
|
4080
4309
|
return "\n line-height: 24px;\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n display: block;\n \n ");
|
|
4081
4310
|
});
|
|
4082
4311
|
styled("span", {
|
|
4083
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4312
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$g.includes(prop); },
|
|
4084
4313
|
})(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXxs$1, function (props) {
|
|
4085
4314
|
var typography = getTypography(props);
|
|
4086
4315
|
var colors = getColors(props);
|
|
@@ -4098,7 +4327,7 @@ var contentPositionMapping = {
|
|
|
4098
4327
|
left: "flex-start",
|
|
4099
4328
|
right: "flex-end",
|
|
4100
4329
|
};
|
|
4101
|
-
var doNotForwardProps$
|
|
4330
|
+
var doNotForwardProps$f = [
|
|
4102
4331
|
"active",
|
|
4103
4332
|
"horizontalAlign",
|
|
4104
4333
|
"shouldShowTooltipOnHover",
|
|
@@ -4107,7 +4336,7 @@ var doNotForwardProps$e = [
|
|
|
4107
4336
|
"hideSortIcon",
|
|
4108
4337
|
];
|
|
4109
4338
|
var StyledSortingIcon = styled(ButtonIcon, {
|
|
4110
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4339
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
4111
4340
|
})(templateObject_1$B || (templateObject_1$B = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4112
4341
|
var _a = props.active, active = _a === void 0 ? false : _a;
|
|
4113
4342
|
var spacings = getSpaces(props);
|
|
@@ -4115,7 +4344,7 @@ var StyledSortingIcon = styled(ButtonIcon, {
|
|
|
4115
4344
|
return "\n margin-left: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n margin-bottom: 2px;\n color: ").concat(active ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n opacity: ").concat(active ? 1 : 0, ";\n outline: none !important;\n ");
|
|
4116
4345
|
});
|
|
4117
4346
|
var StyledTableHeader$1 = styled("th", {
|
|
4118
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4347
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
4119
4348
|
})(templateObject_2$l || (templateObject_2$l = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderS, function (props) {
|
|
4120
4349
|
var _a = props.active, active = _a === void 0 ? false : _a, _b = props.horizontalAlign, horizontalAlign = _b === void 0 ? "left" : _b;
|
|
4121
4350
|
var spacings = getSpaces(props);
|
|
@@ -4124,7 +4353,7 @@ var StyledTableHeader$1 = styled("th", {
|
|
|
4124
4353
|
return "\n color: ".concat(active ? colors === null || colors === void 0 ? void 0 : colors.primary[400] : colors === null || colors === void 0 ? void 0 : colors.gray[600], ";\n font-family: ").concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.s, "px;\n text-align: ").concat(horizontalAlign, ";\n min-width: 96px;\n width: 96px;\n cursor: pointer;\n vertical-align: bottom;\n\n & .MuiButtonBase-root {\n outline: none;\n }\n\n &:hover {\n color: ").concat(active ? colors === null || colors === void 0 ? void 0 : colors.primary[500] : "black", ";\n\n & .MuiButtonBase-root {\n color: ").concat(active ? colors === null || colors === void 0 ? void 0 : colors.primary[500] : colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n opacity: 1;\n }\n }\n ");
|
|
4125
4354
|
});
|
|
4126
4355
|
var StyledCellHeaderContainer = styled("div", {
|
|
4127
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4356
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$f.includes(prop); },
|
|
4128
4357
|
})(templateObject_3$c || (templateObject_3$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4129
4358
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a;
|
|
4130
4359
|
return "\n align-items: flex-end;\n width: 100%;\n display: flex;\n justify-content: ".concat(horizontalAlign ? contentPositionMapping[horizontalAlign] : "flex-start", ";\n ");
|
|
@@ -4223,9 +4452,9 @@ var statusToCss = {
|
|
|
4223
4452
|
success: success,
|
|
4224
4453
|
warning: warning$2,
|
|
4225
4454
|
};
|
|
4226
|
-
var doNotForwardProps$
|
|
4455
|
+
var doNotForwardProps$e = ["isRounded"];
|
|
4227
4456
|
var StyledChip = styled(Chip$1, {
|
|
4228
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4457
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
4229
4458
|
})(templateObject_7$3 || (templateObject_7$3 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
4230
4459
|
var size = props.size, status = props.status, isRounded = props.isRounded;
|
|
4231
4460
|
return css(templateObject_6$4 || (templateObject_6$4 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), isRounded && rounded$2(props), !isRounded && square$2(props), size === "small" && small(props), size === "medium" && medium(props), status && statusToCss[status](props));
|
|
@@ -4244,7 +4473,7 @@ var Chip = function (props) {
|
|
|
4244
4473
|
return jsx(StyledChip, __assign({}, props));
|
|
4245
4474
|
};
|
|
4246
4475
|
|
|
4247
|
-
var doNotForwardProps$
|
|
4476
|
+
var doNotForwardProps$d = [
|
|
4248
4477
|
"anchorEl",
|
|
4249
4478
|
"count",
|
|
4250
4479
|
"keepSearchOnSelect",
|
|
@@ -4254,63 +4483,70 @@ var doNotForwardProps$c = [
|
|
|
4254
4483
|
"PopperBaseProps",
|
|
4255
4484
|
"onClickAway",
|
|
4256
4485
|
"ClickAwayListenerProps",
|
|
4486
|
+
"forceOpen",
|
|
4487
|
+
"isMultiColumn",
|
|
4257
4488
|
];
|
|
4258
|
-
// export const StyledAutocomplete = styled(Autocomplete, {
|
|
4259
|
-
// shouldForwardProp: (prop: string) => !doNotForwardProps.includes(prop),
|
|
4260
|
-
// })`
|
|
4261
|
-
// ${(props: StyleProps) => {
|
|
4262
|
-
// const spacings = getSpaces(props);
|
|
4263
|
-
// return `
|
|
4264
|
-
// `;
|
|
4265
|
-
// }}
|
|
4266
|
-
// ` as typeof Autocomplete;
|
|
4267
4489
|
var StyledHeaderTitle = styled("div", {
|
|
4268
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4490
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
4269
4491
|
})(templateObject_1$z || (templateObject_1$z = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderXs, function (props) {
|
|
4270
4492
|
var search = props.search;
|
|
4271
4493
|
var typography = getTypography(props);
|
|
4272
4494
|
var spacings = getSpaces(props);
|
|
4273
|
-
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n
|
|
4495
|
+
return "\n font-family: ".concat(typography === null || typography === void 0 ? void 0 : typography.fontFamily, ";\n padding-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n margin-bottom: ").concat(search ? spacings === null || spacings === void 0 ? void 0 : spacings.s : spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n ");
|
|
4274
4496
|
});
|
|
4497
|
+
var StyledDropdownMenuAutocompleteWrapper = styled("div")(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n & .", ", & .MuiPopper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"], ["\n & .", ", & .MuiPopper-root {\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n\n .", ", .MuiPaper-root {\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: 0;\n }\n }\n"])), autocompleteClasses.popper, autocompleteClasses.paper);
|
|
4275
4498
|
var StyledPopper = styled(Popper, {
|
|
4276
4499
|
shouldForwardProp: function (prop) {
|
|
4277
|
-
return !doNotForwardProps$
|
|
4500
|
+
return !doNotForwardProps$d.includes(prop) || prop === "anchorEl";
|
|
4278
4501
|
},
|
|
4279
|
-
})(
|
|
4502
|
+
})(templateObject_3$a || (templateObject_3$a = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4280
4503
|
var borders = getBorders(props);
|
|
4281
4504
|
var corners = getCorners(props);
|
|
4282
4505
|
var shadows = getShadows(props);
|
|
4283
|
-
|
|
4284
|
-
return "\n background-color: white;\n border: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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 padding: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n box-sizing: border-box;\n z-index: 1400;\n ");
|
|
4506
|
+
return "\n background-color: white;\n border: ".concat(borders === null || borders === void 0 ? void 0 : borders.gray[100], ";\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 z-index: 1400;\n ");
|
|
4285
4507
|
});
|
|
4286
4508
|
var StyledPaper$1 = styled(Paper, {
|
|
4287
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4288
|
-
})(
|
|
4289
|
-
var title = props.title;
|
|
4509
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$d.includes(prop); },
|
|
4510
|
+
})(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4290
4511
|
var spacings = getSpaces(props);
|
|
4291
|
-
return "\n box-shadow: none;\n
|
|
4512
|
+
return "\n box-shadow: none !important;\n border: none !important;\n border-radius: 0;\n margin: 0;\n padding: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xxs, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n }\n ");
|
|
4292
4513
|
});
|
|
4293
|
-
var StyledAutocompletePopper = styled(Popper)(templateObject_4$8 || (templateObject_4$8 = __makeTemplateObject(["\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n"], ["\n position: relative !important;\n transform: none !important;\n width: 100% !important;\n box-shadow: none;\n padding: 0;\n border: none;\n"])));
|
|
4294
4514
|
var templateObject_1$z, templateObject_2$j, templateObject_3$a, templateObject_4$8;
|
|
4295
4515
|
|
|
4516
|
+
// (masoudmanson): Represents the minimum width defined by design specifications
|
|
4517
|
+
// for the dropdownMenu's popper component
|
|
4518
|
+
var MINIMUM_DROPDOWN_MENU_POPPER_WIDTH = 160;
|
|
4519
|
+
var DEFAULT_POPPER_BASE_PROPS = {
|
|
4520
|
+
disablePortal: true,
|
|
4521
|
+
};
|
|
4296
4522
|
var DropdownMenu = function (props) {
|
|
4297
|
-
var
|
|
4298
|
-
|
|
4299
|
-
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
|
|
4304
|
-
|
|
4305
|
-
|
|
4523
|
+
var _a;
|
|
4524
|
+
var theme = useTheme();
|
|
4525
|
+
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _b = props.open, open = _b === void 0 ? false : _b, _c = props.PopperComponent, PopperComponent = _c === void 0 ? StyledPopper : _c, _d = props.PaperComponent, PaperComponent = _d === void 0 ? StyledPaper$1 : _d, _e = props.PopperPlacement, PopperPlacement = _e === void 0 ? "bottom-start" : _e, _f = props.PopperBaseProps, PopperBaseProps = _f === void 0 ? {} : _f, _g = props.search, search = _g === void 0 ? false : _g, title = props.title, _h = props.label, label = _h === void 0 ? "Search" : _h, children = props.children, options = props.options, _j = props.onClickAway, onClickAway = _j === void 0 ? noop : _j, ClickAwayListenerProps = props.ClickAwayListenerProps, _k = props.width, width = _k === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _k, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
4526
|
+
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
4527
|
+
// (masoudmanson): The DropdownMenu's Popper component should have a minimum
|
|
4528
|
+
// width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
|
|
4529
|
+
// a single column dropdown.However, for larger multi-column autocompletes,
|
|
4530
|
+
// the width should be set to 'auto' to accommodate the expanded layout.
|
|
4531
|
+
var dropdownMenuPopperSx = useMemo(function () {
|
|
4532
|
+
return __assign(__assign({}, PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx), { width: isMultiColumn || width < MINIMUM_DROPDOWN_MENU_POPPER_WIDTH
|
|
4533
|
+
? "auto"
|
|
4534
|
+
: width });
|
|
4535
|
+
}, [PopperBaseProps === null || PopperBaseProps === void 0 ? void 0 : PopperBaseProps.sx, isMultiColumn, width]);
|
|
4536
|
+
var DefaultInputBaseProps = useMemo(function () {
|
|
4537
|
+
return __assign(__assign({}, InputBaseProps), { onClick: noop });
|
|
4538
|
+
}, [InputBaseProps]);
|
|
4306
4539
|
return (jsx(PopperComponent, __assign({ id: id, modifiers: [
|
|
4307
4540
|
{
|
|
4308
4541
|
name: "offset",
|
|
4309
4542
|
options: {
|
|
4310
|
-
offset: [0,
|
|
4543
|
+
offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
|
|
4311
4544
|
},
|
|
4312
4545
|
},
|
|
4313
|
-
], open: open, anchorEl: anchorEl
|
|
4546
|
+
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
4547
|
+
// (masoudmanson): To override the width of the Popper,
|
|
4548
|
+
// the sx prop's value must be set after spreading the PopperBaseProps.
|
|
4549
|
+
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] }) })) }) })));
|
|
4314
4550
|
};
|
|
4315
4551
|
|
|
4316
4552
|
var labelFontBodyS = fontBody("s");
|
|
@@ -4366,7 +4602,7 @@ var isDisabled = function (props) {
|
|
|
4366
4602
|
var gray = colors === null || colors === void 0 ? void 0 : colors.gray[300];
|
|
4367
4603
|
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 "])), gray, colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300], colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
4368
4604
|
};
|
|
4369
|
-
var doNotForwardProps$
|
|
4605
|
+
var doNotForwardProps$c = [
|
|
4370
4606
|
"intent",
|
|
4371
4607
|
"state",
|
|
4372
4608
|
"sdsStage",
|
|
@@ -4376,20 +4612,20 @@ var doNotForwardProps$b = [
|
|
|
4376
4612
|
"shouldPutAColonAfterLabel",
|
|
4377
4613
|
];
|
|
4378
4614
|
var StyledInputDropdown = styled(Button, {
|
|
4379
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4615
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
4380
4616
|
})(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) {
|
|
4381
4617
|
var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
|
|
4382
4618
|
return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), inputDropdownStyles(props), sdsStyle === "minimal" && minimal$1(props), sdsStyle === "square" && square$1(props), sdsStyle === "rounded" && rounded$1(props), state === "open" && isOpen(props), sdsStage === "userInput" && userInput$1(props), intent === "warning" && warning$1(props), intent === "error" && error$1(props), disabled && isDisabled(props));
|
|
4383
4619
|
});
|
|
4384
4620
|
var StyledDetail = styled("span", {
|
|
4385
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4621
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
4386
4622
|
})(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4387
4623
|
var colors = getColors(props);
|
|
4388
4624
|
var spaces = getSpaces(props);
|
|
4389
4625
|
return "\n color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n ");
|
|
4390
4626
|
});
|
|
4391
4627
|
var StyledLabel$1 = styled("span", {
|
|
4392
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4628
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
4393
4629
|
})(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4394
4630
|
var _a;
|
|
4395
4631
|
var details = props.details, counter = props.counter, sdsType = props.sdsType;
|
|
@@ -4402,7 +4638,7 @@ var StyledLabel$1 = styled("span", {
|
|
|
4402
4638
|
return "\n color: ".concat(labelColor, ";\n\n font-weight: ").concat(sdsType === "label" ? fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.semibold : fontWeights === null || fontWeights === void 0 ? void 0 : fontWeights.regular, ";\n ");
|
|
4403
4639
|
});
|
|
4404
4640
|
var StyledCounter = styled("span", {
|
|
4405
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4641
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
4406
4642
|
})(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4407
4643
|
var colors = getColors(props);
|
|
4408
4644
|
var corners = getCorners(props);
|
|
@@ -4410,7 +4646,7 @@ var StyledCounter = styled("span", {
|
|
|
4410
4646
|
return "\n background-color: ".concat(colors === null || colors === void 0 ? void 0 : colors.gray[200], ";\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.primary[400], ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n margin-left: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.xs, "px;\n ");
|
|
4411
4647
|
});
|
|
4412
4648
|
var MinimalDetails = styled("div", {
|
|
4413
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4649
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
4414
4650
|
})(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"], ["\n ", "\n text-align: left;\n width: 100%;\n\n ", "\n"])), labelFontBodyS, function (_a) {
|
|
4415
4651
|
var shouldTruncateMinimalDetails = _a.shouldTruncateMinimalDetails;
|
|
4416
4652
|
if (shouldTruncateMinimalDetails) {
|
|
@@ -4418,13 +4654,13 @@ var MinimalDetails = styled("div", {
|
|
|
4418
4654
|
}
|
|
4419
4655
|
});
|
|
4420
4656
|
var LabelWrapper = styled("span", {
|
|
4421
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4657
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
4422
4658
|
})(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (_a) {
|
|
4423
4659
|
var isMinimal = _a.isMinimal;
|
|
4424
4660
|
return "\n align-items: ".concat(isMinimal ? "center" : undefined, ";\n display: ").concat(isMinimal ? "inline-flex" : "contents", ";\n justify-content: ").concat(isMinimal ? "space-between" : undefined, ";\n width: 100%;\n ");
|
|
4425
4661
|
});
|
|
4426
4662
|
var IconWrapper = styled("span", {
|
|
4427
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4663
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$c.includes(prop); },
|
|
4428
4664
|
})(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\n margin-left: auto;\n display: flex;\n align-items: center;\n"], ["\n margin-left: auto;\n display: flex;\n align-items: center;\n"])));
|
|
4429
4665
|
function labelStyle(props) {
|
|
4430
4666
|
var _a;
|
|
@@ -4565,9 +4801,9 @@ var typeToCss = {
|
|
|
4565
4801
|
primary: primary,
|
|
4566
4802
|
secondary: secondary,
|
|
4567
4803
|
};
|
|
4568
|
-
var doNotForwardProps$
|
|
4804
|
+
var doNotForwardProps$b = ["sdsType", "sdsStyle", "tagColor", "hover"];
|
|
4569
4805
|
var StyledTag$1 = styled(Chip$1, {
|
|
4570
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4806
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$b.includes(prop); },
|
|
4571
4807
|
})(templateObject_8$1 || (templateObject_8$1 = __makeTemplateObject(["\n border: none;\n\n ", "\n"], ["\n border: none;\n\n ", "\n"])), function (props) {
|
|
4572
4808
|
var _a = props.hover, hover = _a === void 0 ? true : _a, sdsType = props.sdsType, sdsStyle = props.sdsStyle, icon = props.icon;
|
|
4573
4809
|
var isRounded = sdsStyle === "rounded";
|
|
@@ -4624,30 +4860,22 @@ var templateObject_1$v, templateObject_2$f;
|
|
|
4624
4860
|
|
|
4625
4861
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
4626
4862
|
var ComplexFilter = function (_a) {
|
|
4627
|
-
var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g,
|
|
4863
|
+
var options = _a.options, _b = _a.label, label = _b === void 0 ? "" : _b, _c = _a.multiple, multiple = _c === void 0 ? false : _c, _d = _a.search, search = _d === void 0 ? false : _d, onChange = _a.onChange, _e = _a.DropdownMenuProps, DropdownMenuProps = _e === void 0 ? {} : _e, _f = _a.InputDropdownProps, InputDropdownProps = _f === void 0 ? { sdsStyle: "minimal" } : _f, propValue = _a.value, PopperComponent = _a.PopperComponent, _g = _a.InputDropdownComponent, InputDropdownComponent = _g === void 0 ? InputDropdown : _g, rest = __rest(_a, ["options", "label", "multiple", "search", "onChange", "DropdownMenuProps", "InputDropdownProps", "value", "PopperComponent", "InputDropdownComponent"]);
|
|
4628
4864
|
var isControlled = propValue !== undefined;
|
|
4629
|
-
var
|
|
4630
|
-
var
|
|
4631
|
-
var
|
|
4632
|
-
var _m = useState(getInitialValue()), pendingValue = _m[0], setPendingValue = _m[1];
|
|
4633
|
-
useEffect(function () {
|
|
4634
|
-
onChange(value);
|
|
4635
|
-
setPendingValue(value);
|
|
4636
|
-
}, [value]);
|
|
4865
|
+
var _h = useState(false), open = _h[0], setOpen = _h[1];
|
|
4866
|
+
var _j = useState(null), anchorEl = _j[0], setAnchorEl = _j[1];
|
|
4867
|
+
var _k = useState((multiple ? [] : null)), value = _k[0], setValue = _k[1];
|
|
4637
4868
|
useEffect(function () {
|
|
4638
4869
|
if (isControlled) {
|
|
4639
4870
|
setValue(propValue);
|
|
4640
4871
|
}
|
|
4641
|
-
}, [propValue]);
|
|
4872
|
+
}, [isControlled, propValue]);
|
|
4642
4873
|
// * (mlila): likely, this portion on ComplexFilter will need to be replaced with Dropdown (or a
|
|
4643
4874
|
// * new DropdownFilter) component. As ComplexFilter evolves, there will be more types added,
|
|
4644
4875
|
// * such as sliders for ranges, inline multi selects, etc.
|
|
4645
|
-
return (jsxs(Fragment, { children: [jsxs(Wrapper$1, __assign({}, rest, { children: [jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value:
|
|
4876
|
+
return (jsxs(Fragment, { children: [jsxs(Wrapper$1, __assign({}, rest, { children: [jsx(InputDropdownComponent, __assign({ label: label, onClick: handleClick, sdsStage: open ? "userInput" : "default" }, InputDropdownProps)), jsx(StyledChipsWrapper, { children: jsx(Chips, { value: value, multiple: multiple, onDelete: handleDelete }) })] })), jsx(DropdownMenu, __assign({ anchorEl: anchorEl, open: open, onClose: handleMenuSelectClose, search: search, multiple: multiple, value: value, onChange: handleChange, disableCloseOnSelect: multiple, options: options, PopperComponent: PopperComponent, PopperBaseProps: { sx: { minWidth: 250 } }, onClickAway: handleClose }, DropdownMenuProps, rest))] }));
|
|
4646
4877
|
function handleClick(event) {
|
|
4647
4878
|
if (open) {
|
|
4648
|
-
if (multiple) {
|
|
4649
|
-
setValue(pendingValue);
|
|
4650
|
-
}
|
|
4651
4879
|
setOpen(false);
|
|
4652
4880
|
if (anchorEl) {
|
|
4653
4881
|
anchorEl.focus();
|
|
@@ -4655,9 +4883,6 @@ var ComplexFilter = function (_a) {
|
|
|
4655
4883
|
setAnchorEl(null);
|
|
4656
4884
|
}
|
|
4657
4885
|
else {
|
|
4658
|
-
if (multiple) {
|
|
4659
|
-
setPendingValue(value);
|
|
4660
|
-
}
|
|
4661
4886
|
setAnchorEl(event.currentTarget);
|
|
4662
4887
|
setOpen(true);
|
|
4663
4888
|
}
|
|
@@ -4665,9 +4890,6 @@ var ComplexFilter = function (_a) {
|
|
|
4665
4890
|
function handleClose() {
|
|
4666
4891
|
if (open) {
|
|
4667
4892
|
setOpen(false);
|
|
4668
|
-
if (multiple) {
|
|
4669
|
-
setValue(pendingValue);
|
|
4670
|
-
}
|
|
4671
4893
|
}
|
|
4672
4894
|
}
|
|
4673
4895
|
function handleMenuSelectClose(event, reason) {
|
|
@@ -4676,16 +4898,12 @@ var ComplexFilter = function (_a) {
|
|
|
4676
4898
|
handleClose();
|
|
4677
4899
|
}
|
|
4678
4900
|
}
|
|
4679
|
-
function handleChange(
|
|
4680
|
-
if (multiple) {
|
|
4681
|
-
if (isTriggerChangeOnOptionClick) {
|
|
4682
|
-
setPendingValue(newValue);
|
|
4683
|
-
return setValue(newValue);
|
|
4684
|
-
}
|
|
4685
|
-
return setPendingValue(newValue);
|
|
4686
|
-
}
|
|
4901
|
+
function handleChange(event, newValue) {
|
|
4687
4902
|
setValue(newValue);
|
|
4688
|
-
|
|
4903
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
|
|
4904
|
+
if (!multiple) {
|
|
4905
|
+
setOpen(false);
|
|
4906
|
+
}
|
|
4689
4907
|
}
|
|
4690
4908
|
function handleDelete(option) {
|
|
4691
4909
|
if (!multiple) {
|
|
@@ -4694,14 +4912,6 @@ var ComplexFilter = function (_a) {
|
|
|
4694
4912
|
var newValue = (value === null || value === void 0 ? void 0 : value.filter(function (item) { return item !== option; })) || null;
|
|
4695
4913
|
setValue(newValue);
|
|
4696
4914
|
}
|
|
4697
|
-
function getInitialValue() {
|
|
4698
|
-
if (isControlled) {
|
|
4699
|
-
return propValue;
|
|
4700
|
-
}
|
|
4701
|
-
return multiple
|
|
4702
|
-
? []
|
|
4703
|
-
: null;
|
|
4704
|
-
}
|
|
4705
4915
|
};
|
|
4706
4916
|
|
|
4707
4917
|
var DialogContext = createContext({ sdsSize: "m" });
|
|
@@ -4714,9 +4924,9 @@ var BoxShadows;
|
|
|
4714
4924
|
})(BoxShadows || (BoxShadows = {}));
|
|
4715
4925
|
|
|
4716
4926
|
// (thuang): Please keep this in sync with the props used in `ExtraProps`
|
|
4717
|
-
var doNotForwardProps$
|
|
4927
|
+
var doNotForwardProps$a = ["sdsSize"];
|
|
4718
4928
|
var StyledPaper = styled(Paper, {
|
|
4719
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4929
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$a.includes(prop); },
|
|
4720
4930
|
})(templateObject_1$u || (templateObject_1$u = __makeTemplateObject(["\n & {\n box-shadow: ", ";\n\n ", "\n\n ", "\n }\n"], ["\n & {\n box-shadow: ", ";\n\n ", "\n\n ", "\n }\n"])), BoxShadows.L, paperDimensions, function (props) {
|
|
4721
4931
|
var spaces = getSpaces(props);
|
|
4722
4932
|
var corners = getCorners(props);
|
|
@@ -4774,9 +4984,9 @@ var Dialog = forwardRef(function Dialog(props, ref) {
|
|
|
4774
4984
|
});
|
|
4775
4985
|
|
|
4776
4986
|
// (thuang): Please keep this in sync with the props used in `DialogActionsExtraProps`
|
|
4777
|
-
var doNotForwardProps$
|
|
4987
|
+
var doNotForwardProps$9 = ["buttonPosition"];
|
|
4778
4988
|
var StyledDialogActions = styled(DialogActions$1, {
|
|
4779
|
-
shouldForwardProp: function (prop) { return !doNotForwardProps$
|
|
4989
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$9.includes(prop); },
|
|
4780
4990
|
})(templateObject_1$t || (templateObject_1$t = __makeTemplateObject(["\n padding: 0;\n\n ", "\n"], ["\n padding: 0;\n\n ", "\n"])), function (props) {
|
|
4781
4991
|
var spaces = getSpaces(props);
|
|
4782
4992
|
var _a = props.buttonPosition, buttonPosition = _a === void 0 ? "right" : _a;
|
|
@@ -4841,47 +5051,70 @@ var DialogTitle = forwardRef(function DialogTitle(props, ref) {
|
|
|
4841
5051
|
return (jsx(StyledDialogTitle, __assign({ ref: ref }, rest, { children: children || (jsxs(Fragment, { children: [onClose && jsx(CloseButton, { sdsIcon: "xMark", onClick: onClose }), jsx(Title, { children: title }), jsx(Subtitle, { children: subtitle })] })) })));
|
|
4842
5052
|
});
|
|
4843
5053
|
|
|
4844
|
-
|
|
4845
|
-
var
|
|
5054
|
+
var doNotForwardProps$8 = ["buttonPosition"];
|
|
5055
|
+
var StyledButtonsWrapper = styled("div", {
|
|
5056
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
5057
|
+
})(templateObject_1$p || (templateObject_1$p = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5058
|
+
var buttonPosition = props.buttonPosition;
|
|
5059
|
+
return "\n display: flex;\n justify-content: ".concat(buttonPosition === "left" ? "start" : "end", ";\n ");
|
|
5060
|
+
});
|
|
5061
|
+
var StyledButton = styled(Button, {
|
|
5062
|
+
shouldForwardProp: function (prop) { return !doNotForwardProps$8.includes(prop); },
|
|
5063
|
+
})(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4846
5064
|
var spacings = getSpaces(props);
|
|
4847
|
-
return "\n margin-top: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n margin-
|
|
5065
|
+
return "\n margin-top: ".concat(spacings === null || spacings === void 0 ? void 0 : spacings.l, "px;\n margin-right: ").concat(spacings === null || spacings === void 0 ? void 0 : spacings.m, "px;\n ");
|
|
4848
5066
|
});
|
|
4849
5067
|
var templateObject_1$p, templateObject_2$d;
|
|
4850
5068
|
|
|
4851
5069
|
// eslint-disable-next-line sonarjs/cognitive-complexity
|
|
4852
|
-
var Dropdown = function (
|
|
4853
|
-
var options =
|
|
5070
|
+
var Dropdown = function (props) {
|
|
5071
|
+
var options = props.options, _a = props.label, label = _a === void 0 ? "" : _a, _b = props.multiple, multiple = _b === void 0 ? false : _b, _c = props.search, search = _c === void 0 ? false : _c, _d = props.buttonPosition, buttonPosition = _d === void 0 ? "right" : _d, _e = props.buttons, buttons = _e === void 0 ? false : _e,
|
|
4854
5072
|
// By default, most dropdowns will close when the user clicks outside the dropdown.
|
|
4855
5073
|
// The exception is the multiple select variant with Apply/Cancel buttons,
|
|
4856
5074
|
// which by default will not close on blur. If closeOnBlur is enabled, clicking out
|
|
4857
5075
|
// is equivalent to clicking the Cancel button, closing the dropdown and losing
|
|
4858
5076
|
// unapplied changes.
|
|
4859
|
-
|
|
5077
|
+
_f = props.closeOnBlur,
|
|
4860
5078
|
// By default, most dropdowns will close when the user clicks outside the dropdown.
|
|
4861
5079
|
// The exception is the multiple select variant with Apply/Cancel buttons,
|
|
4862
5080
|
// which by default will not close on blur. If closeOnBlur is enabled, clicking out
|
|
4863
5081
|
// is equivalent to clicking the Cancel button, closing the dropdown and losing
|
|
4864
5082
|
// unapplied changes.
|
|
4865
|
-
closeOnBlur =
|
|
5083
|
+
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"]);
|
|
4866
5084
|
if (buttons && !multiple) {
|
|
4867
5085
|
// eslint-disable-next-line no-console
|
|
4868
5086
|
console.warn("Warning: buttons are only supported for multiple select dropdowns.");
|
|
4869
5087
|
}
|
|
5088
|
+
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
4870
5089
|
var isControlled = propValue !== undefined;
|
|
4871
|
-
var
|
|
4872
|
-
var
|
|
4873
|
-
var
|
|
4874
|
-
|
|
4875
|
-
|
|
4876
|
-
}, [onChange, value]);
|
|
5090
|
+
var _m = useState(null), anchorEl = _m[0], setAnchorEl = _m[1];
|
|
5091
|
+
var _o = useState(false), open = _o[0], setOpen = _o[1];
|
|
5092
|
+
var _p = useState(getInitialValue()), value = _p[0], setValue = _p[1];
|
|
5093
|
+
var _q = useState(getInitialValue()), pendingValue = _q[0], setPendingValue = _q[1];
|
|
5094
|
+
var shouldShowButtons = buttons && !isTriggerChangeOnOptionClick && multiple;
|
|
4877
5095
|
useEffect(function () {
|
|
4878
5096
|
if (isControlled) {
|
|
4879
5097
|
setValue(propValue);
|
|
4880
5098
|
}
|
|
4881
5099
|
}, [isControlled, propValue]);
|
|
4882
|
-
|
|
4883
|
-
|
|
4884
|
-
|
|
5100
|
+
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: handleClose, 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: handleClose, sdsStyle: "square", sdsType: "primary", children: "Apply" })] })) })) : null }))] }));
|
|
5101
|
+
function getInitialValue() {
|
|
5102
|
+
return multiple
|
|
5103
|
+
? []
|
|
5104
|
+
: null;
|
|
5105
|
+
}
|
|
5106
|
+
function handleChange(event, newValue, reason, details) {
|
|
5107
|
+
if (multiple) {
|
|
5108
|
+
if (isTriggerChangeOnOptionClick) {
|
|
5109
|
+
setPendingValue(newValue);
|
|
5110
|
+
return setValueAndCallOnChange(event, newValue, reason, details);
|
|
5111
|
+
}
|
|
5112
|
+
return setPendingValue(newValue);
|
|
5113
|
+
}
|
|
5114
|
+
setValueAndCallOnChange(event, newValue, reason, details);
|
|
5115
|
+
if (!isMultiColumn)
|
|
5116
|
+
setOpen(false);
|
|
5117
|
+
}
|
|
4885
5118
|
function handleClickAway() {
|
|
4886
5119
|
if (open) {
|
|
4887
5120
|
// (masoudmanson): We want to keep the dropdown menu open in two scenarios:
|
|
@@ -4898,12 +5131,14 @@ var Dropdown = function (_a) {
|
|
|
4898
5131
|
}
|
|
4899
5132
|
function handleClick(event) {
|
|
4900
5133
|
if (open) {
|
|
4901
|
-
if (
|
|
4902
|
-
|
|
4903
|
-
|
|
4904
|
-
|
|
4905
|
-
|
|
4906
|
-
anchorEl
|
|
5134
|
+
if (!shouldShowButtons) {
|
|
5135
|
+
if (multiple) {
|
|
5136
|
+
setValue(pendingValue);
|
|
5137
|
+
}
|
|
5138
|
+
setOpen(false);
|
|
5139
|
+
if (anchorEl) {
|
|
5140
|
+
anchorEl.focus();
|
|
5141
|
+
}
|
|
4907
5142
|
}
|
|
4908
5143
|
}
|
|
4909
5144
|
else {
|
|
@@ -4914,7 +5149,7 @@ var Dropdown = function (_a) {
|
|
|
4914
5149
|
setOpen(true);
|
|
4915
5150
|
}
|
|
4916
5151
|
}
|
|
4917
|
-
function handleClose(
|
|
5152
|
+
function handleClose(event, reason) {
|
|
4918
5153
|
// (thuang): We don't want to close the menu when the input is clicked
|
|
4919
5154
|
if (reason === "toggleInput") {
|
|
4920
5155
|
return;
|
|
@@ -4931,23 +5166,12 @@ var Dropdown = function (_a) {
|
|
|
4931
5166
|
anchorEl.focus();
|
|
4932
5167
|
}
|
|
4933
5168
|
if (closeOnBlur)
|
|
4934
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
5169
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
|
|
4935
5170
|
if (shouldShowButtons) {
|
|
4936
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
5171
|
+
onClose === null || onClose === void 0 ? void 0 : onClose(event, reason);
|
|
4937
5172
|
setOpen(false);
|
|
4938
5173
|
}
|
|
4939
5174
|
}
|
|
4940
|
-
function handleChange(_, newValue) {
|
|
4941
|
-
if (multiple) {
|
|
4942
|
-
if (isTriggerChangeOnOptionClick) {
|
|
4943
|
-
setPendingValue(newValue);
|
|
4944
|
-
return setValue(newValue);
|
|
4945
|
-
}
|
|
4946
|
-
return setPendingValue(newValue);
|
|
4947
|
-
}
|
|
4948
|
-
setValue(newValue);
|
|
4949
|
-
setOpen(false);
|
|
4950
|
-
}
|
|
4951
5175
|
function handleCancel() {
|
|
4952
5176
|
if (multiple) {
|
|
4953
5177
|
// (masoudmanson): To undo the latest actions made on the selections,
|
|
@@ -4958,16 +5182,11 @@ var Dropdown = function (_a) {
|
|
|
4958
5182
|
if (anchorEl) {
|
|
4959
5183
|
anchorEl.focus();
|
|
4960
5184
|
}
|
|
4961
|
-
onClose === null || onClose === void 0 ? void 0 : onClose();
|
|
4962
5185
|
setOpen(false);
|
|
4963
5186
|
}
|
|
4964
|
-
function
|
|
4965
|
-
|
|
4966
|
-
|
|
4967
|
-
}
|
|
4968
|
-
return multiple
|
|
4969
|
-
? []
|
|
4970
|
-
: null;
|
|
5187
|
+
function setValueAndCallOnChange(event, newValue, reason, details) {
|
|
5188
|
+
setValue(newValue);
|
|
5189
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(event, newValue, reason, details);
|
|
4971
5190
|
}
|
|
4972
5191
|
};
|
|
4973
5192
|
|
|
@@ -5187,8 +5406,6 @@ var disabledStyled$1 = function (props) {
|
|
|
5187
5406
|
};
|
|
5188
5407
|
var textArea = function (props) {
|
|
5189
5408
|
var spacings = getSpaces(props);
|
|
5190
|
-
console.log(outlinedInputClasses.multiline);
|
|
5191
|
-
console.log(outlinedInputClasses.inputMultiline);
|
|
5192
5409
|
return css(templateObject_4$5 || (templateObject_4$5 = __makeTemplateObject(["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "], ["\n .", " {\n padding: ", "px;\n\n > .", " {\n padding: ", "px ", "px ", "px;\n resize: both;\n }\n }\n "])), outlinedInputClasses.multiline, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, outlinedInputClasses.inputMultiline, spacings === null || spacings === void 0 ? void 0 : spacings.xxs, spacings === null || spacings === void 0 ? void 0 : spacings.m, spacings === null || spacings === void 0 ? void 0 : spacings.m);
|
|
5193
5410
|
};
|
|
5194
5411
|
var userInput = function (props) {
|
|
@@ -6235,4 +6452,4 @@ var TooltipTableContent = function (props) {
|
|
|
6235
6452
|
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)))); })] })));
|
|
6236
6453
|
};
|
|
6237
6454
|
|
|
6238
|
-
export { Accordion, AccordionDetails, AccordionHeader, Alert$1 as Alert, Autocomplete, 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, 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, Menu, MenuItem, MenuSelect, NavigationJumpTo, Notification, Pagination, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$2 as fontBodyS, fontBodyXs$5 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, getBorders, getColors, getCorners, getFontWeights, getIconSizes, getPalette, getShadows, getSpaces, getSpacings, getTypography, makeThemeOptions };
|
|
6455
|
+
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, 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, SegmentedControl, Tab, Table, TableHeader, TableRow, Tabs, Tag, TagFilter, Tooltip, TooltipCondensed, TooltipTableContent as TooltipTable, defaultAppTheme, defaultTheme, fontBody, fontBodyL$1 as fontBodyL, fontBodyM$1 as fontBodyM, fontBodyS$2 as fontBodyS, fontBodyXs$5 as fontBodyXs, fontBodyXxs$1 as fontBodyXxs, fontBodyXxxs$1 as fontBodyXxxs, fontCaps, fontCapsXxs, fontCapsXxxs, fontCapsXxxxs, fontHeader, fontHeaderL, fontHeaderM$1 as fontHeaderM, fontHeaderS, fontHeaderXl, fontHeaderXs, fontHeaderXxl, fontHeaderXxs, fontHeaderXxxs, getBorders, getColors, getCorners, getFontWeights, getIconSizes, getPalette, getShadows, getSpaces, getSpacings, getTypography, makeThemeOptions };
|