@czi-sds/components 20.5.0 → 20.6.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 +12 -1
- package/dist/index.cjs.js +237 -92
- package/dist/index.esm.d.ts +12 -1
- package/dist/index.esm.js +239 -94
- package/dist/tailwind.json +3 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/dist/variables.css +3 -0
- package/dist/variables.scss +3 -0
- package/package.json +2 -2
package/dist/index.cjs.js
CHANGED
|
@@ -602,6 +602,7 @@ function makeThemeOptions(appTheme) {
|
|
|
602
602
|
borderFocus: appTheme.colors.blue[400],
|
|
603
603
|
borderHover: appTheme.colors.blue[500],
|
|
604
604
|
borderOpen: appTheme.colors.blue[400],
|
|
605
|
+
borderPressed: appTheme.colors.blue[600],
|
|
605
606
|
borderSelected: appTheme.colors.blue[400],
|
|
606
607
|
fill: appTheme.colors.blue[400],
|
|
607
608
|
fillDisabled: appTheme.colors.blue[300],
|
|
@@ -615,6 +616,8 @@ function makeThemeOptions(appTheme) {
|
|
|
615
616
|
border: appTheme.colors.gray[400],
|
|
616
617
|
borderDisabled: appTheme.colors.gray[300],
|
|
617
618
|
borderHover: appTheme.colors.common.black,
|
|
619
|
+
borderPressed: appTheme.colors.common.black,
|
|
620
|
+
borderTable: appTheme.colors.gray[300],
|
|
618
621
|
divider: appTheme.colors.gray[200],
|
|
619
622
|
fill: appTheme.colors.common.white,
|
|
620
623
|
fillDisabled: appTheme.colors.gray[300],
|
|
@@ -832,7 +835,7 @@ var defaultThemeOptions = makeThemeOptions(SDSAppTheme);
|
|
|
832
835
|
var defaultTheme = styles.createTheme(defaultThemeOptions);
|
|
833
836
|
|
|
834
837
|
function focusVisibleA11yStyle() {
|
|
835
|
-
return "\n &.Mui-focusVisible, &:focus-visible {\n outline:
|
|
838
|
+
return "\n &.Mui-focusVisible, &:focus-visible {\n outline: 2px solid black;\n outline-offset: 1px;\n }\n ";
|
|
836
839
|
}
|
|
837
840
|
|
|
838
841
|
var getSpaces = function (_a) {
|
|
@@ -840,6 +843,9 @@ var getSpaces = function (_a) {
|
|
|
840
843
|
var theme = _a.theme;
|
|
841
844
|
return ((_b = theme === null || theme === void 0 ? void 0 : theme.app) === null || _b === void 0 ? void 0 : _b.spacing) || null;
|
|
842
845
|
};
|
|
846
|
+
/**
|
|
847
|
+
* @deprecated getSpacings() is deprecated and may be removed in a future release. Please use getSpaces()
|
|
848
|
+
*/
|
|
843
849
|
var getSpacings = function (_a) {
|
|
844
850
|
var _b;
|
|
845
851
|
var theme = _a.theme;
|
|
@@ -3645,7 +3651,7 @@ var StyledAccordion = styles.styled(material.Accordion, {
|
|
|
3645
3651
|
var typography = getTypography(props);
|
|
3646
3652
|
var borders = getBorders(props);
|
|
3647
3653
|
var spaces = getSpaces(props);
|
|
3648
|
-
return react.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n min-height: 44px;\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n min-height: 44px;\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
3654
|
+
return react.css(templateObject_1$Q || (templateObject_1$Q = __makeTemplateObject(["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "], ["\n &.", " {\n box-shadow: ", ";\n font-family: ", ";\n border-bottom: ", ";\n height: fit-content;\n\n & .", " {\n ", "\n min-height: 44px;\n\n &.", " {\n background-color: unset;\n }\n\n &.", " {\n min-height: unset;\n }\n\n & .MuiAccordionSummary-expandIcon,\n & .", " {\n padding: 0;\n align-self: flex-start;\n margin-top: ", "px;\n }\n }\n\n .", " {\n ", "\n padding: ", "px;\n padding-top: ", "px;\n }\n\n &:before {\n opacity: 0;\n }\n\n &.", " {\n margin: 0;\n }\n\n ", "\n }\n "])), material.accordionClasses.root, shadows === null || shadows === void 0 ? void 0 : shadows.none, (_a = typography === null || typography === void 0 ? void 0 : typography.fontFamily) === null || _a === void 0 ? void 0 : _a.body, useDivider ? (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.divider : "none", material.accordionSummaryClasses.root, focusVisibleA11yStyle(), material.accordionSummaryClasses.focusVisible, material.accordionSummaryClasses.expanded, material.accordionSummaryClasses.expandIconWrapper, spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, material.accordionDetailsClasses.root, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xxs, material.accordionClasses.expanded, togglePosition === "left" && leftPosition(props));
|
|
3649
3655
|
});
|
|
3650
3656
|
var leftPosition = function (props) {
|
|
3651
3657
|
var _a, _b, _c;
|
|
@@ -3898,17 +3904,20 @@ var tertiary = function (props) {
|
|
|
3898
3904
|
var small$1 = function (props) {
|
|
3899
3905
|
var sdsType = props.sdsType;
|
|
3900
3906
|
var iconSizes = getIconSizes(props);
|
|
3901
|
-
|
|
3907
|
+
var spaces = getSpaces(props);
|
|
3908
|
+
return react.css(templateObject_5$e || (templateObject_5$e = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
3902
3909
|
};
|
|
3903
3910
|
var medium$1 = function (props) {
|
|
3904
3911
|
var sdsType = props.sdsType;
|
|
3905
3912
|
var iconSizes = getIconSizes(props);
|
|
3906
|
-
|
|
3913
|
+
var spaces = getSpaces(props);
|
|
3914
|
+
return react.css(templateObject_6$a || (templateObject_6$a = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.l.width, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;") : "");
|
|
3907
3915
|
};
|
|
3908
3916
|
var large = function (props) {
|
|
3909
3917
|
var sdsType = props.sdsType;
|
|
3910
3918
|
var iconSizes = getIconSizes(props);
|
|
3911
|
-
|
|
3919
|
+
var spaces = getSpaces(props);
|
|
3920
|
+
return react.css(templateObject_7$8 || (templateObject_7$8 = __makeTemplateObject(["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "], ["\n .MuiSvgIcon-root {\n height: ", "px;\n width: ", "px;\n ", "\n }\n "])), iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xl.height, sdsType !== "tertiary" ? "margin: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;") : "");
|
|
3912
3921
|
};
|
|
3913
3922
|
var doNotForwardProps$o = [
|
|
3914
3923
|
"on",
|
|
@@ -4050,7 +4059,7 @@ var disabledStyled$2 = function (props) {
|
|
|
4050
4059
|
var _a, _b, _c;
|
|
4051
4060
|
var colors = getColors(props);
|
|
4052
4061
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4053
|
-
return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", ";\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
4062
|
+
return react.css(templateObject_5$d || (templateObject_5$d = __makeTemplateObject(["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "], ["\n .", " {\n .", " {\n border: 1px solid ", " !important;\n }\n\n .", " svg {\n color: ", ";\n }\n\n &:hover .", " {\n border: 1px solid ", ";\n }\n\n &::placeholder {\n color: ", ";\n opacity: 1;\n }\n }\n "])), material.outlinedInputClasses.disabled, material.outlinedInputClasses.notchedOutline, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, material.inputAdornmentClasses.root, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.iconDisabled, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, colors === null || colors === void 0 ? void 0 : colors.gray[300]);
|
|
4054
4063
|
};
|
|
4055
4064
|
var StyledLabel$2 = styles.styled("label")(templateObject_6$9 || (templateObject_6$9 = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyM$1, function (props) {
|
|
4056
4065
|
var spaces = getSpaces(props);
|
|
@@ -4062,11 +4071,11 @@ var StyledSearchBase = styles.styled(material.TextField, {
|
|
|
4062
4071
|
},
|
|
4063
4072
|
})(templateObject_8$6 || (templateObject_8$6 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
4064
4073
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
|
|
4065
|
-
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage
|
|
4074
|
+
var intent = props.intent, disabled = props.disabled, sdsStyle = props.sdsStyle, sdsStage = props.sdsStage;
|
|
4066
4075
|
var spaces = getSpaces(props);
|
|
4067
4076
|
var iconSizes = getIconSizes(props);
|
|
4068
4077
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4069
|
-
return react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity:
|
|
4078
|
+
return react.css(templateObject_7$7 || (templateObject_7$7 = __makeTemplateObject(["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid black;\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-top: ", "px;\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 120px;\n display: block;\n\n [type=\"search\"]::-webkit-search-cancel-button {\n -webkit-appearance: none;\n appearance: none;\n }\n\n & .input-search-clear-icon {\n opacity: 0;\n cursor: pointer;\n\n svg {\n height: ", "px;\n width: ", "px;\n }\n }\n\n .", " {\n padding: 0 ", "px;\n background-color: ", ";\n\n .", " {\n border: 1px solid ", ";\n }\n\n &:hover .input-search-clear-icon,\n &:focus-within .input-search-clear-icon {\n opacity: 1;\n\n svg {\n color: ", " !important;\n }\n\n &:hover {\n svg {\n color: ", " !important;\n }\n }\n\n &:active {\n svg {\n color: ", " !important;\n }\n }\n }\n }\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", ":hover\n .", " {\n border: 1px solid ", ";\n }\n\n .", ".", " {\n outline: none;\n\n .", " {\n border: 1px solid ", ";\n }\n\n .", " .", ":last-of-type {\n cursor: default;\n svg {\n color: ", ";\n }\n }\n }\n\n &.user-is-tabbing .", ":focus-within {\n outline: 2px solid black;\n outline-offset: 1px;\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.m, spaces === null || spaces === void 0 ? void 0 : spaces.xl, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.height, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.width, material.outlinedInputClasses.root, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surface, material.outlinedInputClasses.notchedOutline, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.fillHover, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.fillPressed, material.inputBaseClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.surface, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_k = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _k === void 0 ? void 0 : _k.border, material.inputAdornmentClasses.root, material.buttonBaseClasses.root, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon, material.outlinedInputClasses.root, sdsStyle === "rounded" && rounded$3(props), intent === "error" && error$3(props), intent === "warning" && warning$3(props), disabled && disabledStyled$2(props), sdsStage === "userInput" && userInput$2(props));
|
|
4070
4079
|
});
|
|
4071
4080
|
var StyledInputAdornment = styles.styled(material.InputAdornment)(templateObject_9$2 || (templateObject_9$2 = __makeTemplateObject(["\n position: relative;\n height: unset;\n margin: 0;\n"], ["\n position: relative;\n height: unset;\n margin: 0;\n"])));
|
|
4072
4081
|
var templateObject_1$M, templateObject_2$u, templateObject_3$m, templateObject_4$j, templateObject_5$d, templateObject_6$9, templateObject_7$7, templateObject_8$6, templateObject_9$2;
|
|
@@ -4179,11 +4188,78 @@ var MenuItem = React.forwardRef(function MenuItem(props, ref) {
|
|
|
4179
4188
|
return (jsxRuntime.jsxs(StyledMenuItem$1, __assign({}, originalMenuItemProps, { disabled: disabled, ref: ref, children: [isMultiSelect && selectionIcon(), jsxRuntime.jsxs(ContentWrapper, { children: [jsxRuntime.jsxs(TextWrapper, { selected: selected, className: "primary-text", disabled: disabled, children: [iconItem(), children] }), column && jsxRuntime.jsx(ColumnWrapper, { disabled: disabled, children: column })] })] })));
|
|
4180
4189
|
});
|
|
4181
4190
|
|
|
4191
|
+
/**
|
|
4192
|
+
* Adds a 'user-is-tabbing' class and a 'data-user-is-tabbing' attribute to the provided element when the user starts navigating
|
|
4193
|
+
* with the keyboard. This is useful for styling focus outlines differently when the user is using the keyboard to tab through elements.
|
|
4194
|
+
* It is particularly beneficial for input elements where the styles for :focus and :focus-visible are identical,
|
|
4195
|
+
* unlike button elements which have both :focus and :focus-visible states available to style separately.
|
|
4196
|
+
* By detecting when the user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
4197
|
+
*
|
|
4198
|
+
* @param {HTMLElement} element - The element to which the 'user-is-tabbing' class will be added.
|
|
4199
|
+
* @returns {Function} A function to remove the 'user-is-tabbing' class and 'data-user-is-tabbing' attribute and clean up the event listeners.
|
|
4200
|
+
*/
|
|
4201
|
+
var detectUserTabbing = function (element) {
|
|
4202
|
+
if (!element)
|
|
4203
|
+
return;
|
|
4204
|
+
var removed = false;
|
|
4205
|
+
function handleFirstTab(e) {
|
|
4206
|
+
if (e.code === "Tab") {
|
|
4207
|
+
element.classList.add("user-is-tabbing");
|
|
4208
|
+
element.setAttribute("data-user-is-tabbing", "true");
|
|
4209
|
+
window.removeEventListener("keydown", handleFirstTab);
|
|
4210
|
+
window.addEventListener("mousedown", handleMouseDownOnce);
|
|
4211
|
+
}
|
|
4212
|
+
}
|
|
4213
|
+
function handleMouseDownOnce() {
|
|
4214
|
+
element.classList.remove("user-is-tabbing");
|
|
4215
|
+
element.removeAttribute("data-user-is-tabbing");
|
|
4216
|
+
window.removeEventListener("mousedown", handleMouseDownOnce);
|
|
4217
|
+
window.addEventListener("keydown", handleFirstTab);
|
|
4218
|
+
}
|
|
4219
|
+
window.addEventListener("keydown", handleFirstTab);
|
|
4220
|
+
return function () {
|
|
4221
|
+
if (removed) {
|
|
4222
|
+
return;
|
|
4223
|
+
}
|
|
4224
|
+
removed = true;
|
|
4225
|
+
window.removeEventListener("keydown", handleFirstTab);
|
|
4226
|
+
window.removeEventListener("mousedown", handleMouseDownOnce);
|
|
4227
|
+
};
|
|
4228
|
+
};
|
|
4229
|
+
/**
|
|
4230
|
+
* Custom hook that listens for keyboard and mouse events to detect when
|
|
4231
|
+
* the user is tabbing through elements.
|
|
4232
|
+
*
|
|
4233
|
+
* @param {React.RefObject} ref - The ref to the element to which the 'user-is-tabbing' class
|
|
4234
|
+
* and 'data-user-is-tabbing' attribute will be added.
|
|
4235
|
+
*/
|
|
4236
|
+
var useDetectUserTabbing = function (ref) {
|
|
4237
|
+
React.useEffect(function () {
|
|
4238
|
+
if (ref.current) {
|
|
4239
|
+
var destroyListener_1 = detectUserTabbing(ref.current);
|
|
4240
|
+
return function () { return destroyListener_1 === null || destroyListener_1 === void 0 ? void 0 : destroyListener_1(); };
|
|
4241
|
+
}
|
|
4242
|
+
}, [ref]);
|
|
4243
|
+
};
|
|
4244
|
+
|
|
4182
4245
|
/**
|
|
4183
4246
|
* @see https://mui.com/material-ui/react-text-field/
|
|
4184
4247
|
*/
|
|
4185
4248
|
var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
4186
|
-
var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange"]);
|
|
4249
|
+
var label = props.label, id = props.id, placeholder = props.placeholder, _a = props.sdsStyle, sdsStyle = _a === void 0 ? "square" : _a, _b = props.intent, intent = _b === void 0 ? "default" : _b, handleSubmit = props.handleSubmit, onChange = props.onChange, disabled = props.disabled, rest = __rest(props, ["label", "id", "placeholder", "sdsStyle", "intent", "handleSubmit", "onChange", "disabled"]);
|
|
4250
|
+
/**
|
|
4251
|
+
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
4252
|
+
*/
|
|
4253
|
+
var inputRef = React.useRef(null);
|
|
4254
|
+
/**
|
|
4255
|
+
* (masoudmanson): This is a custom hook that listens for keyboard and mouse events
|
|
4256
|
+
* and adds a 'user-is-tabbing' class to the body element when the user starts
|
|
4257
|
+
* navigating with the keyboard. Unlike button elements which have both :focus
|
|
4258
|
+
* and :focus-visible states available to style separately, input elements have
|
|
4259
|
+
* identical styles for :focus and :focus-visible states. By detecting when the
|
|
4260
|
+
* user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
4261
|
+
*/
|
|
4262
|
+
useDetectUserTabbing((ref ? ref : inputRef));
|
|
4187
4263
|
var _c = React.useState(false), hasValue = _c[0], setHasValue = _c[1];
|
|
4188
4264
|
var _d = React.useState(""), value = _d[0], setValue = _d[1];
|
|
4189
4265
|
var handleChange = function (event) {
|
|
@@ -4228,16 +4304,16 @@ var InputSearch = React.forwardRef(function InputSearch(props, ref) {
|
|
|
4228
4304
|
console.error("Error: @czi-sds/components component InputText requires id and label props for accessibility.");
|
|
4229
4305
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
4230
4306
|
}
|
|
4231
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ ref: ref,
|
|
4307
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledLabel$2, { htmlFor: id, children: label }), jsxRuntime.jsx(StyledSearchBase, __assign({ id: id, ref: ref ? ref : inputRef,
|
|
4232
4308
|
// passed to mui Input
|
|
4233
4309
|
InputProps: {
|
|
4234
|
-
endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4310
|
+
endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: jsxRuntime.jsx(Button, { "aria-label": "clear-button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
|
|
4235
4311
|
sdsType: "iconButton",
|
|
4236
4312
|
}, icon: "XMarkCircle" }) })),
|
|
4237
|
-
startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4313
|
+
startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "search-button", onClick: localHandleSubmit, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", disabled: disabled, sdsIconProps: {
|
|
4238
4314
|
sdsType: "interactive",
|
|
4239
4315
|
}, icon: "Search" }) })),
|
|
4240
|
-
}, type: "search",
|
|
4316
|
+
}, type: "search", variant: "outlined", size: "small", placeholder: placeholder, value: value, sdsStyle: sdsStyle, sdsStage: hasValue ? "userInput" : "default", onChange: handleChange, onKeyDown: handleKeyPress, intent: intent, disabled: disabled,
|
|
4241
4317
|
/**
|
|
4242
4318
|
* (masoudmanson): This prevents the browser's default auto completion
|
|
4243
4319
|
* menu from being displayed for the InputSearch.
|
|
@@ -4262,7 +4338,7 @@ var StyledAutocompleteBase = styles.styled(material.Autocomplete, {
|
|
|
4262
4338
|
var borders = getBorders(props);
|
|
4263
4339
|
var semanticTextColors = getSemanticTextColors(props);
|
|
4264
4340
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
4265
|
-
return "\n ".concat(!search && "height: 0", ";\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.secondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
4341
|
+
return "\n ".concat(!search && "height: 0", ";\n \n // (masoudmanson): We need to apply the focus styles to the input element\n // when the user is tabbing through the options. To find out more, take a\n // look at the useDetectUserTabbing hook.\n &[data-user-is-tabbing=\"true\"]:focus-within {\n border-radius: 4px;\n outline: 2px solid black;\n outline-offset: 1px;\n }\n\n .MuiFormControl-root {\n outline: none;\n }\n\n .MuiOutlinedInput-root.MuiInputBase-formControl.MuiInputBase-adornedEnd {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n\n .MuiAutocomplete-input {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n }\n\n & + .").concat(material.autocompleteClasses.popper, " > .").concat(material.autocompleteClasses.paper, " {\n .").concat(material.autocompleteClasses.listbox, " {\n max-height: 40vh;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n\n .").concat(material.autocompleteClasses.option, " {\n min-height: unset;\n\n &.").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceSecondary, ";\n }\n\n &[aria-selected=\"true\"] {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfacePrimary, ";\n }\n\n &[aria-disabled=\"true\"] {\n opacity: 1;\n }\n\n &[aria-selected=\"true\"].").concat(material.autocompleteClasses.focused, " {\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.surfaceSecondary, ";\n }\n }\n\n & > li:last-child .").concat(material.autocompleteClasses.groupUl, " {\n border-bottom: none;\n margin-bottom: 0;\n padding-bottom: 0;\n }\n }\n\n .").concat(material.autocompleteClasses.groupLabel, " {\n top: 0;\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.secondary, ";\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n .").concat(material.autocompleteClasses.groupUl, " {\n position: relative;\n margin: 0 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n border-bottom: ").concat((_e = borders === null || borders === void 0 ? void 0 : borders.base) === null || _e === void 0 ? void 0 : _e.divider, ";\n padding-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n & li:last-of-type {\n position: relative;\n }\n }\n\n .").concat(material.autocompleteClasses.noOptions, " {\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n .").concat(material.autocompleteClasses.loading, " {\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px 0 0;\n }\n }\n ");
|
|
4266
4342
|
});
|
|
4267
4343
|
var InputBaseWrapper$1 = styles.styled("div", {
|
|
4268
4344
|
shouldForwardProp: function (prop) { return !doNotForwardProps$n.includes(prop); },
|
|
@@ -4272,7 +4348,7 @@ var InputBaseWrapper$1 = styles.styled("div", {
|
|
|
4272
4348
|
// (thuang): We cannot use `display: none;` here, since
|
|
4273
4349
|
// the component needs to be in the DOM to handle backdrop
|
|
4274
4350
|
// click to close the menu
|
|
4275
|
-
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 ";
|
|
4351
|
+
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 speak: none;\n ";
|
|
4276
4352
|
}
|
|
4277
4353
|
});
|
|
4278
4354
|
var StyledMenuInputSearch$1 = styles.styled(InputSearch, {
|
|
@@ -4299,10 +4375,12 @@ var StyledMenuItemText = styles.styled("div")(templateObject_6$7 || (templateObj
|
|
|
4299
4375
|
var templateObject_1$K, templateObject_2$s, templateObject_3$k, templateObject_4$h, templateObject_5$b, templateObject_6$7;
|
|
4300
4376
|
|
|
4301
4377
|
var AutocompleteBase = function (props) {
|
|
4302
|
-
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose;
|
|
4378
|
+
var multiple = props.multiple, _a = props.disableCloseOnSelect, disableCloseOnSelect = _a === void 0 ? multiple : _a, _b = props.getOptionLabel, getOptionLabel = _b === void 0 ? defaultGetOptionLabel : _b, _c = props.InputBaseProps, InputBaseProps = _c === void 0 ? EMPTY_OBJECT : _c, _d = props.isOptionEqualToValue, isOptionEqualToValue = _d === void 0 ? defaultIsOptionEqualToValue : _d, _e = props.keepSearchOnSelect, keepSearchOnSelect = _e === void 0 ? false : _e, _f = props.label, label = _f === void 0 ? "Label" : _f, _g = props.loading, loading = _g === void 0 ? false : _g, _h = props.loadingText, loadingText = _h === void 0 ? "" : _h, _j = props.noOptionsText, noOptionsText = _j === void 0 ? "No options" : _j, _k = props.onInputChange, onInputChange = _k === void 0 ? noop : _k, _l = props.renderOption, renderOption = _l === void 0 ? defaultRenderOption : _l, _m = props.renderTags, renderTags = _m === void 0 ? defaultRenderTags : _m, _o = props.search, search = _o === void 0 ? false : _o, _p = props.clearOnBlur, clearOnBlur = _p === void 0 ? false : _p, _q = props.blurOnSelect, blurOnSelect = _q === void 0 ? !multiple : _q, onClickAway = props.onClickAway, onClick = props.onClick, onOpen = props.onOpen, onClose = props.onClose, disabled = props.disabled;
|
|
4303
4379
|
var theme = styles.useTheme();
|
|
4380
|
+
var ref = React.useRef(null);
|
|
4304
4381
|
var _r = React.useState(""), inputValue = _r[0], setInputValue = _r[1];
|
|
4305
|
-
|
|
4382
|
+
useDetectUserTabbing(ref);
|
|
4383
|
+
return (jsxRuntime.jsx(StyledAutocompleteBase, __assign({ ref: ref, 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,
|
|
4306
4384
|
/**
|
|
4307
4385
|
* (masoudmanson): Overrides the onOpen and onClose handlers to ensure that
|
|
4308
4386
|
* the onClick and onClickAway handlers are triggered when a controlled dropdown
|
|
@@ -4330,7 +4408,7 @@ var AutocompleteBase = function (props) {
|
|
|
4330
4408
|
* the provided onInputChange from props is called at the end to emit the input changes
|
|
4331
4409
|
* to the user.
|
|
4332
4410
|
*/
|
|
4333
|
-
onInputChange: defaultOnInputChange })));
|
|
4411
|
+
onInputChange: defaultOnInputChange, disabled: disabled || !search })));
|
|
4334
4412
|
/**
|
|
4335
4413
|
* (masoudmanson): Using a custom Popper or Paper with the Autocomplete
|
|
4336
4414
|
* without a useCallback results in scroll jumps while selecting an option!
|
|
@@ -4350,20 +4428,32 @@ var AutocompleteBase = function (props) {
|
|
|
4350
4428
|
}, []);
|
|
4351
4429
|
}
|
|
4352
4430
|
function defaultRenderInput(params) {
|
|
4353
|
-
return (jsxRuntime.jsx(InputBaseWrapper$1, { search: search, children: jsxRuntime.jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", label:
|
|
4431
|
+
return (jsxRuntime.jsx(InputBaseWrapper$1, { search: search, children: jsxRuntime.jsx(StyledMenuInputSearch$1, __assign({ id: "location-search", "aria-label": "Search Input",
|
|
4432
|
+
// (masoudmanson): This is to ensure that the input field won't be focusable
|
|
4433
|
+
// when the search prop is set to false.
|
|
4434
|
+
tabIndex: search ? 0 : -1, "aria-hidden": !search, label: label, placeholder: label, ref: params.InputProps.ref, search: search,
|
|
4354
4435
|
// (masoudmanson): This prevents Backspace from deselecting selected dropdown options.
|
|
4355
4436
|
onKeyDown: function (event) {
|
|
4356
4437
|
if (event.key === "Backspace") {
|
|
4357
4438
|
event.stopPropagation();
|
|
4358
4439
|
}
|
|
4359
|
-
}, InputProps: __assign(__assign({
|
|
4440
|
+
}, InputProps: __assign(__assign({}, params.InputProps.ref), { "aria-hidden": !search, endAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "end", children: inputValue && (jsxRuntime.jsx(Button
|
|
4441
|
+
// (masoudmanson): This is to ensure that the clear button won't be focusable
|
|
4442
|
+
// when the search prop is set to false.
|
|
4443
|
+
, {
|
|
4444
|
+
// (masoudmanson): This is to ensure that the clear button won't be focusable
|
|
4445
|
+
// when the search prop is set to false.
|
|
4446
|
+
tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, "aria-label": "Clear Button", className: "input-search-clear-icon", onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4447
|
+
sdsType: "iconButton",
|
|
4448
|
+
}, icon: "XMarkCircle" })) })),
|
|
4360
4449
|
/**
|
|
4361
4450
|
* (thuang): Works with css caret-color: "transparent" to hide
|
|
4362
4451
|
* mobile keyboard
|
|
4363
4452
|
*/
|
|
4364
|
-
inputMode: search ? "text" : "none"
|
|
4365
|
-
|
|
4366
|
-
|
|
4453
|
+
inputMode: search ? "text" : "none", inputProps: params.inputProps, startAdornment: (jsxRuntime.jsx(StyledInputAdornment, { position: "start", children: jsxRuntime.jsx(Button, { "aria-label": "Search Button",
|
|
4454
|
+
// (masoudmanson): This is to ensure that the search button won't be focusable
|
|
4455
|
+
// when the search prop is set to false.
|
|
4456
|
+
tabIndex: search ? 0 : -1, "aria-hidden": !search, disabled: !search, onClick: clearInput, sdsType: "tertiary", sdsSize: "small", sdsStyle: "icon", sdsIconProps: {
|
|
4367
4457
|
sdsType: "interactive",
|
|
4368
4458
|
}, icon: "Search" }) })) }) }, InputBaseProps)) }));
|
|
4369
4459
|
}
|
|
@@ -4567,6 +4657,7 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4567
4657
|
}, [isOpenControlled, open]);
|
|
4568
4658
|
var anchorRef = React.useRef(null);
|
|
4569
4659
|
var _h = React.useState(null), anchorEl = _h[0], setAnchorEl = _h[1];
|
|
4660
|
+
useDetectUserTabbing(anchorRef);
|
|
4570
4661
|
React.useEffect(function () {
|
|
4571
4662
|
setAnchorEl(anchorRef === null || anchorRef === void 0 ? void 0 : anchorRef.current);
|
|
4572
4663
|
}, [anchorRef]);
|
|
@@ -4608,7 +4699,7 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4608
4699
|
* inner autocompletes should remain hidden and unfocused when the parent
|
|
4609
4700
|
* input is focused. This prevents blurring of the main search input.
|
|
4610
4701
|
*/
|
|
4611
|
-
InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
|
|
4702
|
+
InputBaseProps: __assign(__assign({}, InputBaseProps), { autoFocus: false, tabIndex: -1 }), popperOpen: popperOpen, inputValue: inputValue, PaperComponent: StyledPaper$2 }, rest), autocompleteOptions.name)); }) }) })))] }) })));
|
|
4612
4703
|
function clearInput() {
|
|
4613
4704
|
setInputValue("");
|
|
4614
4705
|
/**
|
|
@@ -4705,6 +4796,11 @@ var AutocompleteMultiColumn = function (props) {
|
|
|
4705
4796
|
}
|
|
4706
4797
|
setPopperOpen(false);
|
|
4707
4798
|
}
|
|
4799
|
+
else {
|
|
4800
|
+
// (masoudmanson): This is to open the dropdown when the user types in the search input.
|
|
4801
|
+
// especially when the user is tabbing through the input.
|
|
4802
|
+
setPopperOpen(true);
|
|
4803
|
+
}
|
|
4708
4804
|
}
|
|
4709
4805
|
}
|
|
4710
4806
|
};
|
|
@@ -5022,11 +5118,14 @@ var Tooltip = React.forwardRef(function Tooltip(props, ref) {
|
|
|
5022
5118
|
return jsxRuntime.jsx(jsxRuntime.Fragment, { children: children });
|
|
5023
5119
|
var content = (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title, sdsStyle === "dark" && subtitle && jsxRuntime.jsx(Subtitle$1, { children: subtitle })] }));
|
|
5024
5120
|
var leaveDelay = inverted || sdsStyle === "dark" ? 0 : 500;
|
|
5025
|
-
return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
|
|
5121
|
+
return (jsxRuntime.jsx(material.Tooltip, __assign({ classes: { arrow: arrow, tooltip: tooltip }, leaveDelay: leaveDelay, title: content, PopperComponent: PopperComponent,
|
|
5122
|
+
// (masoudmanson): Setting tabIndex to 0 makes the tooltip component
|
|
5123
|
+
// focusable and allows keyboard navigation.
|
|
5124
|
+
tabIndex: 0, ref: ref,
|
|
5026
5125
|
// (masoudmanson): SDS Tooltips should always have an arrow
|
|
5027
5126
|
// and by setting the arrow prop to true, we ensure that
|
|
5028
5127
|
// the arrow is always rendered.
|
|
5029
|
-
arrow: true })));
|
|
5128
|
+
arrow: true }, rest)));
|
|
5030
5129
|
});
|
|
5031
5130
|
function mergeClass$1(_a) {
|
|
5032
5131
|
var props = _a.props, className = _a.className, key = _a.key;
|
|
@@ -5066,10 +5165,10 @@ var verticalAlignToFlexMap = {
|
|
|
5066
5165
|
};
|
|
5067
5166
|
var StyledTableData = styles.styled("td", {
|
|
5068
5167
|
shouldForwardProp: function (prop) { return !doNotForwardProps$j.includes(prop); },
|
|
5069
|
-
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5168
|
+
})(templateObject_1$D || (templateObject_1$D = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
5070
5169
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
5071
5170
|
var spaces = getSpaces(props);
|
|
5072
|
-
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlignCSSMap[verticalAlign], ";\n
|
|
5171
|
+
return "\n padding: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n text-align: ").concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlignCSSMap[verticalAlign], ";\n overflow: hidden;\n ");
|
|
5073
5172
|
});
|
|
5074
5173
|
var ShouldWrap = function (lineCount) {
|
|
5075
5174
|
return "\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: ".concat(lineCount, ";\n -webkit-box-orient: vertical; \n ");
|
|
@@ -5145,7 +5244,7 @@ var CellBasic = React.forwardRef(function (props, ref) {
|
|
|
5145
5244
|
var doNotForwardProps$i = ["horizontalAlign", "verticalAlign"];
|
|
5146
5245
|
var StyledCellComponentData = styles.styled("td", {
|
|
5147
5246
|
shouldForwardProp: function (prop) { return !doNotForwardProps$i.includes(prop); },
|
|
5148
|
-
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontBodyS$1, function (props) {
|
|
5247
|
+
})(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontBodyS$1, focusVisibleA11yStyle, function (props) {
|
|
5149
5248
|
var spaces = getSpaces(props);
|
|
5150
5249
|
var _a = props.horizontalAlign, horizontalAlign = _a === void 0 ? "left" : _a, _b = props.verticalAlign, verticalAlign = _b === void 0 ? "top" : _b;
|
|
5151
5250
|
return "\n align-items: center;\n text-align: ".concat(horizontalAlign, ";\n vertical-align: ").concat(verticalAlign, ";\n overflow: hidden;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n ");
|
|
@@ -5181,7 +5280,7 @@ var StyledSortingIcon = styles.styled(Icon, {
|
|
|
5181
5280
|
});
|
|
5182
5281
|
var StyledTableHeader$1 = styles.styled("th", {
|
|
5183
5282
|
shouldForwardProp: function (prop) { return !doNotForwardProps$h.includes(prop); },
|
|
5184
|
-
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderS, function (props) {
|
|
5283
|
+
})(templateObject_2$m || (templateObject_2$m = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
5185
5284
|
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
5186
5285
|
var _j = props.active, active = _j === void 0 ? false : _j, _k = props.horizontalAlign, horizontalAlign = _k === void 0 ? "left" : _k;
|
|
5187
5286
|
var spaces = getSpaces(props);
|
|
@@ -5353,7 +5452,7 @@ var StyledPaper$1 = styles.styled(material.Paper, {
|
|
|
5353
5452
|
var spaces = getSpaces(props);
|
|
5354
5453
|
var borders = getBorders(props);
|
|
5355
5454
|
var shadows = getShadows(props);
|
|
5356
|
-
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n ");
|
|
5455
|
+
return "\n box-shadow: ".concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, " !important;\n border: ").concat(borders === null || borders === void 0 ? void 0 : borders.none, ";\n margin: 0;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n .MuiAutocomplete-root,\n .MuiFormControl-root.MuiTextField-root {\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n // (masoudmanson): Remove margin-right and margin-bottom for the single column autocomplete\n // as it has been added to the parent container\n .MuiAutocomplete-root .MuiFormControl-root.MuiTextField-root {\n margin-right: 0;\n margin-bottom: 0; \n }\n ");
|
|
5357
5456
|
});
|
|
5358
5457
|
var templateObject_1$z, templateObject_2$k, templateObject_3$c, templateObject_4$b;
|
|
5359
5458
|
|
|
@@ -5364,9 +5463,9 @@ var DEFAULT_POPPER_BASE_PROPS = {
|
|
|
5364
5463
|
disablePortal: true,
|
|
5365
5464
|
};
|
|
5366
5465
|
var DropdownMenu = function (props) {
|
|
5367
|
-
var _a;
|
|
5466
|
+
var _a, _b;
|
|
5368
5467
|
var theme = styles.useTheme();
|
|
5369
|
-
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps,
|
|
5468
|
+
var anchorEl = props.anchorEl, id = props.id, InputBaseProps = props.InputBaseProps, _c = props.open, open = _c === void 0 ? false : _c, _d = props.PopperComponent, PopperComponent = _d === void 0 ? StyledPopper : _d, _e = props.PaperComponent, PaperComponent = _e === void 0 ? StyledPaper$1 : _e, _f = props.PopperPlacement, PopperPlacement = _f === void 0 ? "bottom-start" : _f, _g = props.PopperBaseProps, PopperBaseProps = _g === void 0 ? {} : _g, _h = props.search, search = _h === void 0 ? false : _h, title = props.title, _j = props.label, label = _j === void 0 ? "Search" : _j, children = props.children, options = props.options, _k = props.onClickAway, onClickAway = _k === void 0 ? noop : _k, ClickAwayListenerProps = props.ClickAwayListenerProps, _l = props.width, width = _l === void 0 ? MINIMUM_DROPDOWN_MENU_POPPER_WIDTH : _l, rest = __rest(props, ["anchorEl", "id", "InputBaseProps", "open", "PopperComponent", "PaperComponent", "PopperPlacement", "PopperBaseProps", "search", "title", "label", "children", "options", "onClickAway", "ClickAwayListenerProps", "width"]);
|
|
5370
5469
|
var isMultiColumn = "options" in ((options === null || options === void 0 ? void 0 : options[0]) || EMPTY_OBJECT);
|
|
5371
5470
|
// (masoudmanson): The DropdownMenu's Popper component should have a minimum
|
|
5372
5471
|
// width of MINIMUM_DROPDOWN_MENU_POPPER_WIDTH pixels if the DropdownMenu is
|
|
@@ -5384,7 +5483,7 @@ var DropdownMenu = function (props) {
|
|
|
5384
5483
|
{
|
|
5385
5484
|
name: "offset",
|
|
5386
5485
|
options: {
|
|
5387
|
-
offset: [0, (_a = theme.app) === null || _a === void 0 ? void 0 : _a.spacing.s],
|
|
5486
|
+
offset: [0, (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.app) === null || _a === void 0 ? void 0 : _a.spacing) === null || _b === void 0 ? void 0 : _b.s],
|
|
5388
5487
|
},
|
|
5389
5488
|
},
|
|
5390
5489
|
], open: open, anchorEl: anchorEl, placement: PopperPlacement }, PopperBaseProps, {
|
|
@@ -5411,20 +5510,20 @@ var inputDropdownStyles = function (props) {
|
|
|
5411
5510
|
var spaces = getSpaces(props);
|
|
5412
5511
|
var borders = getBorders(props);
|
|
5413
5512
|
var semanticTextColors = getSemanticTextColors(props);
|
|
5414
|
-
var
|
|
5513
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
5415
5514
|
/**
|
|
5416
5515
|
* (masoudmanson)
|
|
5417
5516
|
* The top/bottom padding is set to 1px less than the actual value to account for the border.
|
|
5418
5517
|
*/
|
|
5419
5518
|
var padding = "".concat(((_a = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _a !== void 0 ? _a : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px");
|
|
5420
|
-
return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, padding, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_e =
|
|
5519
|
+
return react.css(templateObject_1$y || (templateObject_1$y = __makeTemplateObject(["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "], ["\n ", "\n\n border: ", ";\n color: ", ";\n cursor: pointer;\n padding: ", ";\n justify-content: start;\n\n &.MuiButton-text {\n &:hover {\n color: ", ";\n }\n\n .styled-label {\n margin-left: ", "px;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n\n svg {\n margin-right: ", "px;\n margin-left: ", "px;\n }\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: unset;\n border-color: black;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n border: ", ";\n color: ", ";\n\n path {\n fill: ", ";\n }\n }\n\n &:focus {\n outline-offset: -1px;\n }\n "])), labelStyle(props), (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, padding, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.s, spaces === null || spaces === void 0 ? void 0 : spaces.l, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.icon, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.iconHover, (_h = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _h === void 0 ? void 0 : _h.primary, (_j = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _j === void 0 ? void 0 : _j.default, (_k = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _k === void 0 ? void 0 : _k.primary, (_l = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _l === void 0 ? void 0 : _l.icon);
|
|
5421
5520
|
};
|
|
5422
5521
|
var minimal$1 = function (props) {
|
|
5423
5522
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
5424
5523
|
var spaces = getSpaces(props);
|
|
5425
5524
|
var semanticTextColors = getSemanticTextColors(props);
|
|
5426
|
-
var
|
|
5427
|
-
return react.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n
|
|
5525
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
5526
|
+
return react.css(templateObject_2$j || (templateObject_2$j = __makeTemplateObject(["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "], ["\n ", "\n ", "\n\n /* this is needed to left align the label text */\n align-items: flex-start;\n border: none;\n flex-direction: column;\n padding: ", "px ", "px;\n\n /* Nesting to increase CSS specificity for style override */\n &.MuiButton-text {\n .styled-label {\n margin: 0;\n }\n }\n\n span {\n color: ", ";\n }\n\n path {\n fill: ", ";\n }\n\n &:hover {\n background-color: ", ";\n border: none;\n color: ", ";\n\n path {\n fill: ", ";\n }\n\n .styled-label {\n color: ", ";\n }\n }\n\n &:active {\n background-color: ", ";\n border: none;\n }\n\n &.MuiButton-root.MuiButton-text > span {\n ", "\n margin-left: 0;\n }\n\n &.MuiButton-root.MuiButton-text svg {\n margin-left: ", "px;\n margin-right: 0;\n }\n "])), labelStyle(props), focusVisibleA11yStyle(), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.fillHover, labelFontBodyS(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs);
|
|
5428
5527
|
};
|
|
5429
5528
|
var square$1 = function (props) {
|
|
5430
5529
|
var corners = getCorners(props);
|
|
@@ -5435,18 +5534,22 @@ var rounded$1 = function (props) {
|
|
|
5435
5534
|
return react.css(templateObject_4$a || (templateObject_4$a = __makeTemplateObject(["\n border-radius: ", "px;\n min-width: 90px;\n "], ["\n border-radius: ", "px;\n min-width: 90px;\n "])), corners === null || corners === void 0 ? void 0 : corners.l);
|
|
5436
5535
|
};
|
|
5437
5536
|
var userInput$1 = function (props) {
|
|
5438
|
-
var _a, _b;
|
|
5537
|
+
var _a, _b, _c, _d, _e, _f;
|
|
5538
|
+
var sdsStyle = props.sdsStyle;
|
|
5439
5539
|
var semanticTextColors = getSemanticTextColors(props);
|
|
5440
|
-
|
|
5540
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
5541
|
+
return react.css(templateObject_5$6 || (templateObject_5$6 = __makeTemplateObject(["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "], ["\n & .styled-label {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n ", "\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.primary, sdsStyle === "minimal"
|
|
5542
|
+
? "\n background-color: ".concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n border: none;\n color: ").concat((_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _d === void 0 ? void 0 : _d.primary, ";\n\n path {\n fill: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, ";\n }\n\n .styled-label {\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n }\n ")
|
|
5543
|
+
: "");
|
|
5441
5544
|
};
|
|
5442
5545
|
var isOpen = function (props) {
|
|
5443
5546
|
var _a, _b;
|
|
5444
5547
|
var colors = getColors(props);
|
|
5445
5548
|
var semanticTextColors = getSemanticTextColors(props);
|
|
5446
|
-
var
|
|
5549
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
5447
5550
|
return react.css(templateObject_6$3 || (templateObject_6$3 = __makeTemplateObject(["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "], ["\n ", "\n\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n\n &:hover {\n path {\n fill: ", ";\n }\n\n border-color: ", ";\n }\n "])), props.sdsStyle === "minimal"
|
|
5448
5551
|
? "& > span, &:hover > span { color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.primary, "; }")
|
|
5449
|
-
: "", (_b =
|
|
5552
|
+
: "", (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon, colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400], colors === null || colors === void 0 ? void 0 : colors.blue[400]);
|
|
5450
5553
|
};
|
|
5451
5554
|
var warning$1 = function (props) {
|
|
5452
5555
|
var colors = getColors(props);
|
|
@@ -5461,8 +5564,8 @@ var error$1 = function (props) {
|
|
|
5461
5564
|
var isDisabled = function (props) {
|
|
5462
5565
|
var _a, _b, _c, _d;
|
|
5463
5566
|
var semanticTextColors = getSemanticTextColors(props);
|
|
5464
|
-
var
|
|
5465
|
-
return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a =
|
|
5567
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
5568
|
+
return react.css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "], ["\n cursor: default;\n border-color: ", ";\n\n span {\n color: ", ";\n }\n\n &.MuiButton-text {\n .styled-label {\n color: ", ";\n }\n }\n\n path {\n fill: ", ";\n }\n "])), (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.borderDisabled, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.disabled, (_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.disabled, (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.fillDisabled);
|
|
5466
5569
|
};
|
|
5467
5570
|
/**
|
|
5468
5571
|
* (masoudmanson): `Button as React.ComponentType<InputDropdownProps>` is a
|
|
@@ -5474,7 +5577,7 @@ var isDisabled = function (props) {
|
|
|
5474
5577
|
*/
|
|
5475
5578
|
var StyledInputDropdown = styles.styled(Button, {
|
|
5476
5579
|
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
5477
|
-
})(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) {
|
|
5580
|
+
})(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n ", "\n ", "\n outline-offset: 1px !important;\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 outline-offset: 1px !important;\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, focusVisibleA11yStyle, function (props) {
|
|
5478
5581
|
var disabled = props.disabled, intent = props.intent, state = props.state, sdsStage = props.sdsStage, sdsStyle = props.sdsStyle;
|
|
5479
5582
|
return react.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));
|
|
5480
5583
|
});
|
|
@@ -5504,9 +5607,9 @@ var StyledCounter = styles.styled("span", {
|
|
|
5504
5607
|
var _a, _b;
|
|
5505
5608
|
var corners = getCorners(props);
|
|
5506
5609
|
var spaces = getSpaces(props);
|
|
5507
|
-
var
|
|
5610
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
5508
5611
|
var semanticTextColors = getSemanticTextColors(props);
|
|
5509
|
-
return "\n background-color: ".concat((_a =
|
|
5612
|
+
return "\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n color: ").concat((_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.accent, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n ");
|
|
5510
5613
|
});
|
|
5511
5614
|
var MinimalDetails = styles.styled("div", {
|
|
5512
5615
|
shouldForwardProp: function (prop) { return !doNotForwardProps$e.includes(prop); },
|
|
@@ -5545,7 +5648,7 @@ var InputDropdown = function (props) {
|
|
|
5545
5648
|
var shouldRenderInlineMinimalDetails = isMinimal && sdsType === "value" && !multiple;
|
|
5546
5649
|
var shouldRenderMinimalDetails = isMinimal && sdsType === "label";
|
|
5547
5650
|
var shouldRenderCounter = multiple && counter !== undefined && counter !== "0" && !isMinimal;
|
|
5548
|
-
return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { children: [jsxRuntime.jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsxRuntime.jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
|
|
5651
|
+
return (jsxRuntime.jsxs(StyledInputDropdown, __assign({}, props, { "aria-label": "Dropdown input", children: [jsxRuntime.jsxs(LabelWrapper, { isMinimal: isMinimal, children: [jsxRuntime.jsx(StyledLabel$1, { className: "styled-label", details: details, counter: counter, sdsType: sdsType, children: renderLabelText({
|
|
5549
5652
|
counter: counter,
|
|
5550
5653
|
details: details,
|
|
5551
5654
|
isMinimal: isMinimal,
|
|
@@ -5689,7 +5792,7 @@ function createTypeCss(props, type) {
|
|
|
5689
5792
|
secondary: generateSecondaryTagColors(intent, colors, semanticColors),
|
|
5690
5793
|
};
|
|
5691
5794
|
var typeColors = typeToColors[type];
|
|
5692
|
-
return react.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active
|
|
5795
|
+
return react.css(templateObject_6$2 || (templateObject_6$2 = __makeTemplateObject(["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "], ["\n ", "\n\n background-color: ", ";\n position: relative;\n\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n\n &:hover,\n &:active {\n .MuiChip-label {\n color: ", ";\n }\n\n svg {\n fill: ", ";\n }\n }\n\n &:hover {\n background-color: ", ";\n }\n\n &:active {\n background-color: ", ";\n }\n\n &.Mui-focusVisible {\n background-color: ", ";\n }x\n "])), focusVisibleA11yStyle(), typeColors.background, typeColors.label, typeColors.iconColor, (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.onFill, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _b === void 0 ? void 0 : _b.onFill, typeColors.backgroundHover, typeColors.backgroundClicked, typeColors.backgroundHover);
|
|
5693
5796
|
}
|
|
5694
5797
|
var typeToCss = {
|
|
5695
5798
|
primary: primary,
|
|
@@ -5725,10 +5828,10 @@ var Tag = function (props) {
|
|
|
5725
5828
|
};
|
|
5726
5829
|
|
|
5727
5830
|
var StyledTag = styles.styled(Tag)(templateObject_2$h || (templateObject_2$h = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
5728
|
-
var _a, _b;
|
|
5831
|
+
var _a, _b, _c, _d;
|
|
5729
5832
|
var spaces = getSpaces(props);
|
|
5730
5833
|
var iconSizes = getIconSizes(props);
|
|
5731
|
-
return react.css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: ", "px ", "px;\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon
|
|
5834
|
+
return react.css(templateObject_1$w || (templateObject_1$w = __makeTemplateObject(["\n padding: ", "px ", "px;\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "], ["\n padding: ", "px ", "px;\n\n &:after {\n display: none;\n }\n\n .MuiChip-label {\n ", "\n }\n\n .MuiChip-deleteIcon {\n margin: 0 0 0 ", "px;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiSvgIcon-root {\n margin: 0;\n width: ", "px !important;\n height: ", "px !important;\n }\n\n .MuiChip-label,\n svg {\n z-index: auto;\n }\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.xxs, spaces === null || spaces === void 0 ? void 0 : spaces.s, fontHeaderXs(props), spaces === null || spaces === void 0 ? void 0 : spaces.s, (_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _a === void 0 ? void 0 : _a.width, (_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _b === void 0 ? void 0 : _b.height, (_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _c === void 0 ? void 0 : _c.width, (_d = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.xs) === null || _d === void 0 ? void 0 : _d.height);
|
|
5732
5835
|
});
|
|
5733
5836
|
var templateObject_1$w, templateObject_2$h;
|
|
5734
5837
|
|
|
@@ -6184,7 +6287,7 @@ var StyledCheckbox = styles.styled(material.Checkbox)(templateObject_1$o || (tem
|
|
|
6184
6287
|
warning: "notice",
|
|
6185
6288
|
};
|
|
6186
6289
|
var checkboxColor = intentToColor[intent];
|
|
6187
|
-
return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.checkboxClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n padding: 0;\n
|
|
6290
|
+
return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[checkboxColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.checkboxClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.checkboxClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.checkboxClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n padding: 0;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n border-radius: 0;\n }\n\n .MuiSvgIcon-root {\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 ");
|
|
6188
6291
|
});
|
|
6189
6292
|
var StyledFormControlLabel$1 = styles.styled(material.FormControlLabel)(templateObject_2$d || (templateObject_2$d = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6190
6293
|
var spaces = getSpaces(props);
|
|
@@ -6264,7 +6367,7 @@ var StyledRadioButton = styles.styled(material.Radio)(templateObject_1$n || (tem
|
|
|
6264
6367
|
warning: "notice",
|
|
6265
6368
|
};
|
|
6266
6369
|
var radioColor = intentToColor[intent];
|
|
6267
|
-
return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.radioClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n
|
|
6370
|
+
return "\n color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[radioColor]) === null || _a === void 0 ? void 0 : _a.border, ";\n\n &:hover {\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled, ";\n }\n\n &.").concat(material.radioClasses.checked, " {\n color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n\n &:hover {\n color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, ";\n background-color: transparent;\n }\n\n &.").concat(material.radioClasses.disabled, " {\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _f === void 0 ? void 0 : _f.borderDisabled, ";\n }\n }\n\n &.").concat(material.radioClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px 0 0;\n padding: 0;\n }\n\n .MuiSvgIcon-root {\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 ");
|
|
6268
6371
|
});
|
|
6269
6372
|
var StyledFormControlLabel = styles.styled(material.FormControlLabel)(templateObject_2$c || (templateObject_2$c = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), function (props) {
|
|
6270
6373
|
var spaces = getSpaces(props);
|
|
@@ -6287,19 +6390,26 @@ var templateObject_1$n, templateObject_2$c, templateObject_3$7, templateObject_4
|
|
|
6287
6390
|
* @see https://mui.com/material-ui/react-radio-button/
|
|
6288
6391
|
*/
|
|
6289
6392
|
var InputRadio = function (props) {
|
|
6290
|
-
var
|
|
6393
|
+
var caption = props.caption, disabled = props.disabled, _a = props.intent, intent = _a === void 0 ? "default" : _a, radioProps = props.radioProps, stage = props.stage, value = props.value;
|
|
6394
|
+
// (masoudmanson): We don't need to pass the label prop to the radio component
|
|
6395
|
+
// so we are destructuring it here.
|
|
6396
|
+
var label = props.label, restProps = __rest(props, ["label"]);
|
|
6291
6397
|
var newProps;
|
|
6292
6398
|
switch (stage) {
|
|
6293
6399
|
case "checked":
|
|
6294
|
-
newProps = __assign(__assign({},
|
|
6400
|
+
newProps = __assign(__assign({}, restProps), { checked: true, color: "primary" });
|
|
6295
6401
|
break;
|
|
6296
6402
|
case "unchecked":
|
|
6297
|
-
newProps = __assign(__assign({},
|
|
6403
|
+
newProps = __assign(__assign({}, restProps), { checked: false, color: "default" });
|
|
6298
6404
|
break;
|
|
6299
6405
|
default:
|
|
6300
|
-
newProps =
|
|
6406
|
+
newProps = restProps;
|
|
6301
6407
|
}
|
|
6302
|
-
|
|
6408
|
+
// (masoudmanson): The id for the label and caption is required for accessibility.
|
|
6409
|
+
// Otherwise, the screen reader will read the label twice!
|
|
6410
|
+
var labelId = "".concat(value, "-label");
|
|
6411
|
+
var captionId = caption ? "".concat(value, "-caption") : undefined;
|
|
6412
|
+
var finalLabel = caption ? (jsxRuntime.jsxs(StyledLabelContainer, { children: [jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }), jsxRuntime.jsx(StyledRadioCaption, { disabled: disabled, id: captionId, children: caption })] })) : (jsxRuntime.jsx(StyledLabelContainer, { children: jsxRuntime.jsx(StyledRadioLabel, { id: labelId, children: label }) }));
|
|
6303
6413
|
return (jsxRuntime.jsx(StyledFormControlLabel, { control: jsxRuntime.jsx(StyledRadioButton, __assign({ disabled: disabled, checkedIcon: jsxRuntime.jsx(material.SvgIcon, { fillcontrast: "white", component: SvgIconRadioChecked, viewBox: "0 0 16 16" }), icon: jsxRuntime.jsx(material.SvgIcon, { fillcontrast: "white", component: SvgIconRadioUnchecked, viewBox: "0 0 16 16" }), intent: intent }, radioProps, newProps)), disabled: disabled, label: finalLabel, value: value }));
|
|
6304
6414
|
};
|
|
6305
6415
|
|
|
@@ -6310,7 +6420,7 @@ var inputSlider = function (props) {
|
|
|
6310
6420
|
var shadows = getShadows(props);
|
|
6311
6421
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6312
6422
|
var semanticTextColors = getSemanticTextColors(props);
|
|
6313
|
-
return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n }\n \n .").concat(material.sliderClasses.track, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, ";\n }\n\n .").concat(material.sliderClasses.thumb, " {\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fill, ";\n\n &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surface, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: black;\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.surface, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.surface, ";\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n ").concat((_h = fontBodyXxxs$1(props)) === null || _h === void 0 ? void 0 : _h.styles, "\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n }\n\n .").concat(material.sliderClasses.markLabelActive, " {\n color: ").concat((_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.primary, ";\n }\n ");
|
|
6423
|
+
return "\n position: relative;\n\n .".concat(material.sliderClasses.rail, ",\n .").concat(material.sliderClasses.track, " {\n border-radius: 2px;\n }\n\n .").concat(material.sliderClasses.rail, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n }\n \n .").concat(material.sliderClasses.track, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.fill, ";\n }\n\n .").concat(material.sliderClasses.thumb, " {\n ").concat(focusVisibleA11yStyle(), "\n height: 14px;\n width: 14px;\n background-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.fill, ";\n\n &.").concat(material.sliderClasses.focusVisible, ", &:hover, &:focus, &:active {\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n }\n\n .").concat(material.sliderClasses.thumb, "::before {\n display: none;\n }\n\n .").concat(material.sliderClasses.thumb, "::after {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surface, " !important;\n height: 6px !important;\n width: 6px !important;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n\n .").concat(material.sliderClasses.valueLabel, " {\n padding: 2px 4px;\n color: black;\n background-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.surface, ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.m, "px;\n left: unset; \n top: -3px;\n\n &::before {\n display: none;\n }\n\n & * {\n background: transparent;\n color: ").concat((_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n transform: none;\n width: unset;\n height: unset;\n }\n }\n\n .").concat(material.sliderClasses.mark, " {\n background-color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[400], ";\n opacity: 1;\n }\n\n .").concat(material.sliderClasses.mark, ".").concat(material.sliderClasses.markActive, " {\n background-color: ").concat((_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _g === void 0 ? void 0 : _g.surface, ";\n }\n\n .").concat(material.sliderClasses.markLabel, " {\n ").concat((_h = fontBodyXxxs$1(props)) === null || _h === void 0 ? void 0 : _h.styles, "\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.gray[500], ";\n }\n\n .").concat(material.sliderClasses.markLabelActive, " {\n color: ").concat((_j = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _j === void 0 ? void 0 : _j.primary, ";\n }\n ");
|
|
6314
6424
|
};
|
|
6315
6425
|
var horizontal = function (props) {
|
|
6316
6426
|
var marks = props.marks;
|
|
@@ -6334,7 +6444,8 @@ var templateObject_1$m;
|
|
|
6334
6444
|
* @see https://mui.com/material-ui/react-slider/
|
|
6335
6445
|
*/
|
|
6336
6446
|
var InputSlider = React.forwardRef(function (props, ref) {
|
|
6337
|
-
|
|
6447
|
+
var min = props.min, max = props.max, rest = __rest(props, ["min", "max"]);
|
|
6448
|
+
return (jsxRuntime.jsx(StyledSlider, __assign({ ref: ref, min: min, max: max }, rest, { orientation: "horizontal", "aria-label": "Slider - min ".concat(min, " to max ").concat(max) })));
|
|
6338
6449
|
});
|
|
6339
6450
|
|
|
6340
6451
|
var sdsPropNames$1 = ["sdsStyle", "sdsStage", "sdsType", "intent", "hideLabel"];
|
|
@@ -6386,7 +6497,7 @@ var StyledInputBase = styles.styled(material.TextField, {
|
|
|
6386
6497
|
var borders = getBorders(props);
|
|
6387
6498
|
var corners = getCorners(props);
|
|
6388
6499
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6389
|
-
return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
|
|
6500
|
+
return react.css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "], ["\n margin-bottom: ", "px;\n margin-right: ", "px;\n min-width: 160px;\n display: block;\n\n .", " {\n ", "\n padding: ", "px ", "px;\n height: unset;\n box-sizing: border-box;\n background-color: ", ";\n }\n\n .", " {\n border-radius: ", "px;\n border: ", ";\n }\n\n .", " {\n outline: none;\n border-radius: 4px;\n }\n\n &.user-is-tabbing .", " {\n ", "\n }\n\n .", ":hover\n .", " {\n border-color: ", ";\n }\n\n .", ".", "\n .", " {\n border: ", ";\n }\n\n ", "\n ", "\n ", "\n ", "\n ", "\n "])), spaces === null || spaces === void 0 ? void 0 : spaces.l, spaces === null || spaces === void 0 ? void 0 : spaces.m, material.outlinedInputClasses.inputSizeSmall, fontBodyXs$2(props), spaces === null || spaces === void 0 ? void 0 : spaces.xs, spaces === null || spaces === void 0 ? void 0 : spaces.m, (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, material.outlinedInputClasses.notchedOutline, corners === null || corners === void 0 ? void 0 : corners.m, (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, material.outlinedInputClasses.input, material.outlinedInputClasses.input, focusVisibleA11yStyle(), material.outlinedInputClasses.root, material.outlinedInputClasses.notchedOutline, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderHover, material.outlinedInputClasses.root, material.outlinedInputClasses.focused, material.outlinedInputClasses.notchedOutline, (_d = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _d === void 0 ? void 0 : _d.default, sdsType === "textArea" && textArea(props), intent === "error" && error(props), intent === "warning" && warning(props), disabled && disabledStyled$1(props), sdsStage === "userInput" && userInput(props));
|
|
6390
6501
|
});
|
|
6391
6502
|
var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4$5, templateObject_5$2, templateObject_6$1, templateObject_7, templateObject_8;
|
|
6392
6503
|
|
|
@@ -6395,6 +6506,19 @@ var templateObject_1$l, templateObject_2$b, templateObject_3$6, templateObject_4
|
|
|
6395
6506
|
*/
|
|
6396
6507
|
var InputText = React.forwardRef(function InputText(props, ref) {
|
|
6397
6508
|
var id = props.id, _a = props.intent, intent = _a === void 0 ? "default" : _a, label = props.label, placeholder = props.placeholder, sdsType = props.sdsType, hideLabel = props.hideLabel, rest = __rest(props, ["id", "intent", "label", "placeholder", "sdsType", "hideLabel"]);
|
|
6509
|
+
/**
|
|
6510
|
+
* (masoudmanson): In case that the ref is not provided, we will create a new one.
|
|
6511
|
+
*/
|
|
6512
|
+
var inputRef = React.useRef(null);
|
|
6513
|
+
/**
|
|
6514
|
+
* (masoudmanson): This is a custom hook that listens for keyboard and mouse events
|
|
6515
|
+
* and adds a 'user-is-tabbing' class to the body element when the user starts
|
|
6516
|
+
* navigating with the keyboard. Unlike button elements which have both :focus
|
|
6517
|
+
* and :focus-visible states available to style separately, input elements have
|
|
6518
|
+
* identical styles for :focus and :focus-visible states. By detecting when the
|
|
6519
|
+
* user is tabbing, we can apply different styles for :focus and :focus-visible states.
|
|
6520
|
+
*/
|
|
6521
|
+
useDetectUserTabbing((ref ? ref : inputRef));
|
|
6398
6522
|
var _b = React.useState(false), hasValue = _b[0], setHasValue = _b[1];
|
|
6399
6523
|
var handleChange = function (event) {
|
|
6400
6524
|
if (event.target.value) {
|
|
@@ -6413,18 +6537,17 @@ var InputText = React.forwardRef(function InputText(props, ref) {
|
|
|
6413
6537
|
return jsxRuntime.jsx(jsxRuntime.Fragment, {});
|
|
6414
6538
|
}
|
|
6415
6539
|
var finalLabel = typeof label === "string" ? (jsxRuntime.jsx(StyledLabel, { htmlFor: id, children: label })) : (label);
|
|
6416
|
-
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hideLabel && finalLabel, jsxRuntime.jsx(StyledInputBase, __assign({ ref: ref, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsStage: hasValue ? "userInput" : "default", sdsType: sdsType, onChange: handleChange }, rest))] }));
|
|
6540
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!hideLabel && finalLabel, jsxRuntime.jsx(StyledInputBase, __assign({ ref: ref ? ref : inputRef, inputProps: inputProps, type: "text", multiline: sdsType === "textArea", minRows: sdsType === "textArea" ? 4 : 2, id: id, intent: intent, variant: "outlined", size: "small", placeholder: placeholder, sdsStage: hasValue ? "userInput" : "default", sdsType: sdsType, onChange: handleChange }, rest))] }));
|
|
6417
6541
|
});
|
|
6418
6542
|
|
|
6419
6543
|
var toggle = function (props) {
|
|
6420
|
-
var _a;
|
|
6421
|
-
var disabled = props.disabled;
|
|
6544
|
+
var _a, _b, _c, _d;
|
|
6545
|
+
var disabled = props.disabled, _e = props.width, width = _e === void 0 ? 62 : _e;
|
|
6422
6546
|
var corners = getCorners(props);
|
|
6423
|
-
var spaces = getSpaces(props);
|
|
6424
6547
|
var shadows = getShadows(props);
|
|
6548
|
+
var iconSizes = getIconSizes(props);
|
|
6425
6549
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6426
|
-
|
|
6427
|
-
return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 26px;\n width: 62px;\n line-height: 18px;\n padding: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .").concat(material.switchClasses.switchBase, " {\n font: inherit;\n margin: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n padding: 0;\n transform: unset;\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat(TOGGLE_HEIGHT, "px;\n width: ").concat(TOGGLE_HEIGHT, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfacePrimary, ";\n width: unset;\n }\n ");
|
|
6550
|
+
return "\n cursor: ".concat(disabled ? "default" : "pointer", ";\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n height: 24px;\n width: ").concat(width, "px;\n line-height: 18px;\n padding: 0;\n overflow: visible;\n\n .").concat(material.switchClasses.switchBase, " {\n ").concat(focusVisibleA11yStyle(), "\n outline-offset: 2px !important;\n width: 100%;\n height: 100%;\n border-radius: ").concat(corners === null || corners === void 0 ? void 0 : corners.l, "px;\n font: inherit;\n transform: unset;\n justify-content: space-between;\n\n .").concat(material.switchClasses.input, " {\n width: 100%;\n height: 100%;\n left: 0;\n }\n\n &.").concat(material.switchClasses.checked, " {\n transform: unset;\n }\n\n &:hover {\n background-color: transparent;\n }\n }\n\n .").concat(material.switchClasses.thumb, " {\n height: ").concat((_a = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _a === void 0 ? void 0 : _a.height, "px;\n width: ").concat((_b = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _b === void 0 ? void 0 : _b.width, "px;\n min-width: ").concat((_c = iconSizes === null || iconSizes === void 0 ? void 0 : iconSizes.s) === null || _c === void 0 ? void 0 : _c.width, "px;\n box-shadow: ").concat(shadows === null || shadows === void 0 ? void 0 : shadows.none, ";\n }\n\n .").concat(material.switchClasses.track, " {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.surfacePrimary, ";\n width: unset;\n }\n ");
|
|
6428
6551
|
};
|
|
6429
6552
|
var toggleOn = function (props) {
|
|
6430
6553
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
@@ -6434,7 +6557,7 @@ var toggleOn = function (props) {
|
|
|
6434
6557
|
var spaces = getSpaces(props);
|
|
6435
6558
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6436
6559
|
var semanticTextColors = getSemanticTextColors(props);
|
|
6437
|
-
return "\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderDisabled : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
6560
|
+
return "\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _b === void 0 ? void 0 : _b.default, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled ? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderDisabled : (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n left: unset;\n right: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px;\n\n .MuiIconButton-label {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:before {\n color: ").concat(disabled ? (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
|
|
6438
6561
|
"&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.accent) === null || _g === void 0 ? void 0 : _g.hover, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(colors === null || colors === void 0 ? void 0 : colors.blue[500], ";\n }\n }"), "\n ");
|
|
6439
6562
|
};
|
|
6440
6563
|
var toggleOff = function (props) {
|
|
@@ -6446,7 +6569,7 @@ var toggleOff = function (props) {
|
|
|
6446
6569
|
var semanticTextColors = getSemanticTextColors(props);
|
|
6447
6570
|
return "\n & {\n outline: ".concat(disabled ? (_a = borders === null || borders === void 0 ? void 0 : borders.base) === null || _a === void 0 ? void 0 : _a.disabled : (_b = borders === null || borders === void 0 ? void 0 : borders.base) === null || _b === void 0 ? void 0 : _b.default, ";\n }\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat(disabled
|
|
6448
6571
|
? (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.borderDisabled
|
|
6449
|
-
: (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.
|
|
6572
|
+
: (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.border, ";\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n }\n\n .").concat(material.switchClasses.switchBase, " {\n right: unset;\n left: 0;\n transform: unset;\n padding: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xs, "px 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxs, "px;\n\n .MuiIconButton-label {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.s, "px;\n }\n\n &:after {\n color: ").concat(disabled ? (_e = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _e === void 0 ? void 0 : _e.disabled : (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _f === void 0 ? void 0 : _f.primary, ";\n content: \"").concat(value, "\";\n }\n }\n\n ").concat(!disabled &&
|
|
6450
6573
|
"&:hover {\n outline: ".concat((_g = borders === null || borders === void 0 ? void 0 : borders.base) === null || _g === void 0 ? void 0 : _g.black, ";\n\n .").concat(material.switchClasses.thumb, " {\n color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.iconHover, ";\n }\n }"), "\n ");
|
|
6451
6574
|
};
|
|
6452
6575
|
var Toggle = styles.styled(material.Switch)(templateObject_1$k || (templateObject_1$k = __makeTemplateObject(["\n ", "\n ", "\n"], ["\n ", "\n ", "\n"])), fontBodyXs$2, function (props) {
|
|
@@ -6473,9 +6596,11 @@ var InputToggle = function (props) {
|
|
|
6473
6596
|
|
|
6474
6597
|
var doNotForwardProps$9 = ["sdsStyle", "sdsSize", "fontWeight"];
|
|
6475
6598
|
var defaultStyle = function (props) {
|
|
6476
|
-
var _a, _b, _c;
|
|
6599
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
6600
|
+
var _h = props.sdsSize, sdsSize = _h === void 0 ? "s" : _h;
|
|
6477
6601
|
var semanticTextColors = getSemanticTextColors(props);
|
|
6478
|
-
|
|
6602
|
+
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6603
|
+
return react.css(templateObject_1$j || (templateObject_1$j = __makeTemplateObject(["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "], ["\n color: ", ";\n position: relative;\n\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n height: 1px;\n margin-top: ", "px;\n width: 100%;\n }\n\n &:hover {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:focus {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n\n &:active {\n color: ", ";\n\n &::after {\n background-color: ", ";\n }\n }\n "])), (_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _a === void 0 ? void 0 : _a.default, sdsSize === "s" ? -4 : -3, (_b = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _b === void 0 ? void 0 : _b.hover, (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _c === void 0 ? void 0 : _c.borderHover, (_d = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _d === void 0 ? void 0 : _d.hover, (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _e === void 0 ? void 0 : _e.borderHover, (_f = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.action) === null || _f === void 0 ? void 0 : _f.pressed, (_g = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _g === void 0 ? void 0 : _g.borderPressed);
|
|
6479
6604
|
};
|
|
6480
6605
|
var dashedStyle = function (props) {
|
|
6481
6606
|
var _a = props.sdsSize, sdsSize = _a === void 0 ? "s" : _a;
|
|
@@ -6491,7 +6616,7 @@ var StyledLink = styles.styled(material.Link, {
|
|
|
6491
6616
|
shouldForwardProp: function (prop) {
|
|
6492
6617
|
return !doNotForwardProps$9.includes(prop.toString());
|
|
6493
6618
|
},
|
|
6494
|
-
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n all: unset;\n\n ", "\n"], ["\n all: unset;\n\n ", "\n"])), function (props) {
|
|
6619
|
+
})(templateObject_4$4 || (templateObject_4$4 = __makeTemplateObject(["\n all: unset;\n\n ", "\n\n ", "\n"], ["\n all: unset;\n\n ", "\n\n ", "\n"])), focusVisibleA11yStyle, function (props) {
|
|
6495
6620
|
var _a = props.fontWeight, fontWeight = _a === void 0 ? "normal" : _a, sdsStyle = props.sdsStyle, _b = props.sdsSize, sdsSize = _b === void 0 ? "s" : _b;
|
|
6496
6621
|
return react.css(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "], ["\n ", "\n ", "\n ", "\n ", "\n\n font-weight: ", ";\n display: inline-block;\n cursor: pointer;\n "])), sdsStyle === "default" && defaultStyle(props), sdsStyle === "dashed" && dashedStyle(props), sdsSize === "s" && smallStyle(props), sdsSize === "xs" && extraSmallStyle(props), fontWeight === "normal" ? "400" : "600");
|
|
6497
6622
|
});
|
|
@@ -6640,7 +6765,7 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4, templateObject_4
|
|
|
6640
6765
|
|
|
6641
6766
|
var LoadingIndicator = function (_a) {
|
|
6642
6767
|
var ariaLabel = _a["aria-label"], sdsStyle = _a.sdsStyle;
|
|
6643
|
-
return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
|
|
6768
|
+
return (jsxRuntime.jsxs(StyledLoadingIndicator, { sdsStyle: sdsStyle, "aria-label": "Loading", children: [jsxRuntime.jsx(Icon, { sdsIcon: "Loading", sdsSize: "l", sdsType: "static" }), jsxRuntime.jsx(StyledText, { "aria-label": ariaLabel, "aria-live": "polite", role: "status", children: "Loading" })] }));
|
|
6644
6769
|
};
|
|
6645
6770
|
|
|
6646
6771
|
var StyledMenu = styles.styled(material.Menu)(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"], ["\n & {\n .", " {\n ", "\n }\n\n .MuiList-padding {\n padding: 0;\n }\n }\n"])), material.menuClasses.paper, function (props) {
|
|
@@ -6805,7 +6930,7 @@ var StyledTabs$1 = styles.styled(material.Tabs, {
|
|
|
6805
6930
|
var _c = props.sdsIndicatorColor, sdsIndicatorColor = _c === void 0 ? "info" : _c;
|
|
6806
6931
|
var spaces = getSpaces(props);
|
|
6807
6932
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6808
|
-
return "\n &:before {\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n max-width: 180px;\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n position: sticky;\n .
|
|
6933
|
+
return "\n &:before {\n background-color: ".concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.surfaceTertiary, ";\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n content: \"\";\n height: 100%;\n left: 0;\n position: absolute;\n top: 0;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n\n max-width: 180px;\n top: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xl, "px;\n margin-bottom: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px;\n position: sticky;\n overflow: visible;\n\n .").concat(material.tabsClasses.indicator, " {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors[sdsIndicatorColor]) === null || _b === void 0 ? void 0 : _b.fill, " !important;\n border-radius: 2px;\n left: 0;\n width: 2px;\n }\n\n .").concat(material.tabsClasses.scroller, " {\n overflow: visible !important;\n }\n ");
|
|
6809
6934
|
});
|
|
6810
6935
|
var StyledTab$1 = styles.styled(material.Tab, {
|
|
6811
6936
|
shouldForwardProp: function (prop) { return !doNotForwardProps$4.includes(prop); },
|
|
@@ -6813,7 +6938,7 @@ var StyledTab$1 = styles.styled(material.Tab, {
|
|
|
6813
6938
|
var _a, _b;
|
|
6814
6939
|
var spaces = getSpaces(props);
|
|
6815
6940
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
6816
|
-
return "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ".concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: black;\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: black;\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfaceTertiary, ";\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
|
|
6941
|
+
return "\n ".concat(focusVisibleA11yStyle(), "\n box-sizing: border-box;\n max-width: 180px;\n padding-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n margin: 0 ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.m, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n align-items: start;\n min-height: unset;\n max-height: unset;\n text-transform: none;\n &:last-child {\n margin-bottom: 0;\n }\n &:before {\n content: \"\";\n position: absolute;\n left: -").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n height: 100%;\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.border, ";\n display: none;\n border-radius: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &:hover {\n color: black;\n &:before {\n display: block;\n }\n }\n &.Mui-selected {\n color: black;\n font-weight: 600;\n }\n &.MuiTabs-indicator {\n backgroundColor: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.surfaceTertiary, ";\n width: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.xxxs, "px;\n }\n &.MuiButtonBase-root {\n white-space: nowrap;\n padding: 0;\n overflow: visible;\n }\n ");
|
|
6817
6942
|
});
|
|
6818
6943
|
var templateObject_1$c, templateObject_2$6;
|
|
6819
6944
|
|
|
@@ -6954,7 +7079,7 @@ var NavigationJumpTo = React.forwardRef(function (props, ref) {
|
|
|
6954
7079
|
return (jsxRuntime.jsx(StyledTabs$1, __assign({ ref: ref, orientation: "vertical", variant: "fullWidth", value: firstTabIndexInview, onChange: handleChange, "aria-label": "navigation-jump-to", sdsIndicatorColor: indicatorColor }, rest, { children: items.map(function (_a, index) {
|
|
6955
7080
|
var _b;
|
|
6956
7081
|
var title = _a.title, elementRef = _a.elementRef;
|
|
6957
|
-
return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
|
|
7082
|
+
return (jsxRuntime.jsx(StyledTab$1, __assign({ label: title, tabIndex: 0 }, a11yProps(toKebabCase(title), ((_b = elementRef.current) === null || _b === void 0 ? void 0 : _b.getAttribute("id")) ||
|
|
6958
7083
|
"navigation-panel-".concat(index + 1))), toKebabCase(title)));
|
|
6959
7084
|
}) })));
|
|
6960
7085
|
});
|
|
@@ -7061,7 +7186,7 @@ var StyledPaginationChevronList = styles.styled("li", {
|
|
|
7061
7186
|
var disabled = props.disabled;
|
|
7062
7187
|
var spaces = getSpaces(props);
|
|
7063
7188
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
7064
|
-
return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, "\n }\n }\n ");
|
|
7189
|
+
return "\n width: 32px;\n height: 32px;\n cursor: ".concat(disabled ? "auto" : "pointer", ";\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 32px;\n\n &[data-order=\"first\"] {\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n &[data-order=\"last\"] {\n margin-left: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n }\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.iconDisabled : (_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.icon, ";\n }\n\n &:hover {\n background-color: ").concat(disabled ? "transparent" : (_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.fillHover, ";\n\n & .MuiSvgIcon-root {\n color: ").concat(disabled ? (_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.iconDisabled : (_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.iconHover, "\n }\n }\n\n ").concat(focusVisibleA11yStyle(), "\n ");
|
|
7065
7190
|
});
|
|
7066
7191
|
var StyledPagination = styles.styled("ul", {
|
|
7067
7192
|
shouldForwardProp: function (prop) { return !doNotForwardProps$2.includes(prop); },
|
|
@@ -7081,7 +7206,7 @@ var Page = styles.styled("li", {
|
|
|
7081
7206
|
var corners = getCorners(props);
|
|
7082
7207
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
7083
7208
|
var semanticTextColors = getSemanticTextColors(props);
|
|
7084
|
-
return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n cursor: pointer;\n list-style: none;\n width: 32px;\n height: 32px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n user-select: none;\n &:hover {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ");
|
|
7209
|
+
return "\n color: ".concat((_a = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _a === void 0 ? void 0 : _a.secondary, ";\n cursor: pointer;\n list-style: none;\n width: 32px;\n height: 32px;\n margin-right: ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: ").concat(sdsStyle === "round" ? corners === null || corners === void 0 ? void 0 : corners.l : corners === null || corners === void 0 ? void 0 : corners.m, "px;\n user-select: none;\n &:hover {\n background-color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _b === void 0 ? void 0 : _b.fillHover, ";\n color: ").concat((_c = semanticTextColors === null || semanticTextColors === void 0 ? void 0 : semanticTextColors.base) === null || _c === void 0 ? void 0 : _c.primary, ";\n }\n\n &:nth-last-of-type(-n+2) {\n margin-right: 0;\n }\n\n ").concat(selected && selectedPageStyle(props), ";\n ").concat(focusVisibleA11yStyle(), "\n ");
|
|
7085
7210
|
});
|
|
7086
7211
|
var templateObject_1$a, templateObject_2$4, templateObject_3$2, templateObject_4$1;
|
|
7087
7212
|
|
|
@@ -7160,6 +7285,22 @@ var usePagination = function (_a) {
|
|
|
7160
7285
|
}, [totalCount, pageSize, siblingCount, currentPage]);
|
|
7161
7286
|
};
|
|
7162
7287
|
|
|
7288
|
+
var PaginationPageList = function (paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage) {
|
|
7289
|
+
function handlePageKeyDown(event, pageNumber) {
|
|
7290
|
+
if (event.key === "Enter" || event.code === "Space") {
|
|
7291
|
+
onPageChange(pageNumber);
|
|
7292
|
+
}
|
|
7293
|
+
}
|
|
7294
|
+
return paginationRange.map(function (pageNumber) {
|
|
7295
|
+
if (Array.isArray(pageNumber)) {
|
|
7296
|
+
if (truncateDropdown) {
|
|
7297
|
+
return (jsxRuntime.jsx(PageListDropdown, { pageList: pageNumber, onPageChange: onPageChange, sdsStyle: sdsStyle }, pageNumber.join("-")));
|
|
7298
|
+
}
|
|
7299
|
+
return (jsxRuntime.jsx(Page, { sdsStyle: sdsStyle, children: jsxRuntime.jsx(StyledPaginationButton, { "aria-label": "Go to a page", disabled: true, icon: "DotsHorizontal", sdsSize: "small", sdsStyle: "icon", sdsType: "tertiary" }) }, pageNumber.join("-")));
|
|
7300
|
+
}
|
|
7301
|
+
return (jsxRuntime.jsx(Page, { onClick: function () { return onPageChange(pageNumber); }, onKeyDown: function (event) { return handlePageKeyDown(event, pageNumber); }, selected: pageNumber === currentPage, sdsStyle: sdsStyle, tabIndex: 0, children: pageNumber }, pageNumber));
|
|
7302
|
+
});
|
|
7303
|
+
};
|
|
7163
7304
|
var Pagination = React.forwardRef(function (props, ref) {
|
|
7164
7305
|
var _a = props.sdsStyle, sdsStyle = _a === void 0 ? "round" : _a, onPageChange = props.onPageChange, onNextPage = props.onNextPage, onPreviousPage = props.onPreviousPage, totalCount = props.totalCount, _b = props.siblingCount, siblingCount = _b === void 0 ? 1 : _b, currentPage = props.currentPage, pageSize = props.pageSize, _c = props.truncateDropdown, truncateDropdown = _c === void 0 ? true : _c;
|
|
7165
7306
|
if (pageSize < 1) {
|
|
@@ -7175,15 +7316,19 @@ var Pagination = React.forwardRef(function (props, ref) {
|
|
|
7175
7316
|
return null;
|
|
7176
7317
|
}
|
|
7177
7318
|
var lastPage = paginationRange[paginationRange.length - 1];
|
|
7178
|
-
return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), paginationRange.
|
|
7179
|
-
|
|
7180
|
-
|
|
7181
|
-
|
|
7182
|
-
|
|
7183
|
-
|
|
7184
|
-
|
|
7185
|
-
|
|
7186
|
-
|
|
7319
|
+
return (jsxRuntime.jsxs(StyledPagination, __assign({ ref: ref }, props, { children: [jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "first", disabled: currentPage === 1, onClick: function () { return currentPage > 1 && onPreviousPage(); }, onKeyDown: handleGoBackButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Previous page", sdsIcon: "ChevronLeft", sdsSize: "xs", sdsType: "button" }) }, "prevPage"), PaginationPageList(paginationRange, truncateDropdown, sdsStyle, onPageChange, currentPage), jsxRuntime.jsx(StyledPaginationChevronList, { "data-order": "last", disabled: currentPage === lastPage, onClick: function () { return currentPage !== lastPage && onNextPage(); }, onKeyDown: handleGoNextButtonKeyDown, tabIndex: 0, children: jsxRuntime.jsx(Icon, { "aria-label": "Next page", sdsIcon: "ChevronRight", sdsSize: "xs", sdsType: "button" }) }, "onNextPage")] })));
|
|
7320
|
+
function handleGoBackButtonKeyDown(event) {
|
|
7321
|
+
if ((event.key === "Enter" || event.code === "Space") &&
|
|
7322
|
+
currentPage > 1) {
|
|
7323
|
+
onPreviousPage();
|
|
7324
|
+
}
|
|
7325
|
+
}
|
|
7326
|
+
function handleGoNextButtonKeyDown(event) {
|
|
7327
|
+
if ((event.key === "Enter" || event.code === "Space") &&
|
|
7328
|
+
currentPage !== lastPage) {
|
|
7329
|
+
onNextPage();
|
|
7330
|
+
}
|
|
7331
|
+
}
|
|
7187
7332
|
});
|
|
7188
7333
|
|
|
7189
7334
|
var doNotForwardProps$1 = ["buttonDefinition"];
|
|
@@ -7193,7 +7338,7 @@ var StyledSegmentedControl = styles.styled(material.ToggleButtonGroup, {
|
|
|
7193
7338
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j;
|
|
7194
7339
|
var spaces = getSpaces(props);
|
|
7195
7340
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
7196
|
-
return "\n
|
|
7341
|
+
return "\n .".concat(material.toggleButtonClasses.root, ".").concat(material.toggleButtonClasses.selected, " {\n background-color: ").concat((_a = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _a === void 0 ? void 0 : _a.fillOpen, ";\n color: ").concat((_b = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.accent) === null || _b === void 0 ? void 0 : _b.icon, ";\n border-color: ").concat((_c = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _c === void 0 ? void 0 : _c.border, ";\n\n &:hover {\n background-color: ").concat((_d = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _d === void 0 ? void 0 : _d.fillHover, ";\n }\n }\n\n .").concat(material.toggleButtonClasses.root, " {\n ").concat(focusVisibleA11yStyle(), "\n border-color: ").concat((_e = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _e === void 0 ? void 0 : _e.border, ";\n line-height: 0px;\n color: ").concat((_f = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _f === void 0 ? void 0 : _f.iconHover, ";\n padding: ").concat(((_g = spaces === null || spaces === void 0 ? void 0 : spaces.xs) !== null && _g !== void 0 ? _g : 6) - 1, "px ").concat(spaces === null || spaces === void 0 ? void 0 : spaces.l, "px;\n\n &:hover {\n border-color: ").concat((_h = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _h === void 0 ? void 0 : _h.border, ";\n background-color: ").concat((_j = semanticComponentColors === null || semanticComponentColors === void 0 ? void 0 : semanticComponentColors.base) === null || _j === void 0 ? void 0 : _j.fillHover, ";\n }\n }\n ");
|
|
7197
7342
|
});
|
|
7198
7343
|
var templateObject_1$8;
|
|
7199
7344
|
|
|
@@ -7207,7 +7352,7 @@ var SegmentedControl = function (props) {
|
|
|
7207
7352
|
setActive(newActive);
|
|
7208
7353
|
}
|
|
7209
7354
|
};
|
|
7210
|
-
return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
|
|
7355
|
+
return (jsxRuntime.jsxs(StyledSegmentedControl, __assign({ "aria-label": "Segmented Control", size: "small", value: active, exclusive: true, onChange: handleActive }, props, { children: [buttonDefinition.map(function (button) {
|
|
7211
7356
|
var icon = button.icon, tooltipText = button.tooltipText, value = button.value;
|
|
7212
7357
|
var iconItem = function () {
|
|
7213
7358
|
if (icon) {
|
|
@@ -7219,7 +7364,7 @@ var SegmentedControl = function (props) {
|
|
|
7219
7364
|
}
|
|
7220
7365
|
}
|
|
7221
7366
|
};
|
|
7222
|
-
return (jsxRuntime.jsx(
|
|
7367
|
+
return (jsxRuntime.jsx(Tooltip, { title: tooltipText !== null && tooltipText !== void 0 ? tooltipText : value, sdsStyle: "dark", arrow: true, children: jsxRuntime.jsx(material.ToggleButton, { "aria-label": tooltipText, value: value, children: jsxRuntime.jsx("span", { tabIndex: -1, children: iconItem() }) }) }, value));
|
|
7223
7368
|
}), ";"] })));
|
|
7224
7369
|
};
|
|
7225
7370
|
|
|
@@ -7253,7 +7398,7 @@ var hoverStyled = function (props) {
|
|
|
7253
7398
|
};
|
|
7254
7399
|
var StyledTableRow = styles.styled("tr", {
|
|
7255
7400
|
shouldForwardProp: function (prop) { return !doNotForwardProps.includes(prop); },
|
|
7256
|
-
})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n\n ", "\n"], ["\n ", "\n\n ", "\n"])), fontHeaderS, function (props) {
|
|
7401
|
+
})(templateObject_1$6 || (templateObject_1$6 = __makeTemplateObject(["\n ", "\n ", "\n\n ", "\n"], ["\n ", "\n ", "\n\n ", "\n"])), fontHeaderS, focusVisibleA11yStyle, function (props) {
|
|
7257
7402
|
var _a, _b;
|
|
7258
7403
|
var rowHeight = props.rowHeight, _c = props.useDivider, useDivider = _c === void 0 ? true : _c, _d = props.selected, selected = _d === void 0 ? false : _d, _e = props.disabled, disabled = _e === void 0 ? false : _e, _f = props.hover, hover = _f === void 0 ? true : _f;
|
|
7259
7404
|
var semanticComponentColors = getSemanticComponentColors(props);
|
|
@@ -7418,7 +7563,7 @@ var TooltipCondensed = React.forwardRef(function TooltipCondensed(props, ref) {
|
|
|
7418
7563
|
key: "tooltip",
|
|
7419
7564
|
props: props,
|
|
7420
7565
|
});
|
|
7421
|
-
return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, children: children }));
|
|
7566
|
+
return (jsxRuntime.jsx(Tooltip, { followCursor: true, placement: "right-end", enterDelay: 50, leaveDelay: 50, title: title, ref: ref, classes: { tooltip: tooltip }, arrow: false, children: children }));
|
|
7422
7567
|
});
|
|
7423
7568
|
function mergeClass(_a) {
|
|
7424
7569
|
var props = _a.props, className = _a.className, key = _a.key;
|