@mailstep/design-system 0.6.11 → 0.6.13
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/package.json +1 -1
- package/ui/Blocks/CommonGrid/components/gridCells/ButtonInCell.js +1 -1
- package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.js +1 -1
- package/ui/Elements/Button/styles.js +1 -1
- package/ui/Elements/Button/types.d.ts +2 -2
- package/ui/Elements/HighlightBox/HighlightBox.d.ts +2 -1
- package/ui/Elements/HighlightBox/HighlightBox.js +3 -3
- package/ui/Elements/Select/themes/selectStyles.js +1 -1
- package/ui/index.es.js +17 -15
- package/ui/index.umd.js +10 -8
package/package.json
CHANGED
|
@@ -12,5 +12,5 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import Button from '../../../../Elements/Button/Button';
|
|
14
14
|
export var ButtonInCell = function (props) {
|
|
15
|
-
return _jsx(Button, __assign({}, props, { appearance: "
|
|
15
|
+
return _jsx(Button, __assign({}, props, { appearance: "primary", variant: "link" }));
|
|
16
16
|
};
|
|
@@ -28,6 +28,6 @@ export var EnumInCell = function (_a) {
|
|
|
28
28
|
}, [appearanceMap, value]);
|
|
29
29
|
if (!finalLabel)
|
|
30
30
|
return null;
|
|
31
|
-
return (_jsx(Center, { children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
|
|
31
|
+
return (_jsx(Center, { children: _jsx(HighlightBox, __assign({ className: "cell" }, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
|
|
32
32
|
};
|
|
33
33
|
var templateObject_1;
|
|
@@ -16,7 +16,7 @@ export var StyledIcon = styled(Icon)(templateObject_3 || (templateObject_3 = __m
|
|
|
16
16
|
var $addMarginLeft = _a.$addMarginLeft;
|
|
17
17
|
return ($addMarginLeft ? '8px' : '0');
|
|
18
18
|
});
|
|
19
|
-
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n & svg {\n stroke: white;\n }\n\n @media (hover: hover) {\n
|
|
19
|
+
export var StyledButton = styled.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n & svg {\n stroke: white;\n }\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n & svg {\n stroke: white;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n & svg {\n stroke: neutral500;\n }\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n color: red70;\n & svg {\n stroke: red70;\n }\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n & svg {\n stroke: white;\n }\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n & svg {\n stroke: red1;\n }\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n @media (hover: hover) {\n :hover {\n color: neutral500;\n & svg {\n stroke: neutral500;\n }\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n & svg {\n stroke: white;\n }\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"], ["\n width: ", ";\n font-weight: semiBold;\n font-size: 14px;\n font-family: ", ";\n display: flex;\n text-align: center;\n align-items: center;\n justify-content: center;\n border-radius: 8px;\n height: 38px;\n border: none;\n cursor: pointer;\n transition-duration: 0.1s;\n transition: all 300ms ease-out;\n gap: 8px;\n padding: ", ";\n opacity: ", ";\n cursor: ", ";\n\n :focus {\n outline: none;\n }\n\n &[data-variant='default'] {\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n & svg {\n stroke: white;\n }\n\n :not(:disabled) {\n @media (hover: hover) {\n :hover {\n background-color: red80;\n }\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n }\n\n &[data-variant='success'] {\n background-color: successColor;\n color: white;\n & svg {\n stroke: white;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: green70;\n }\n }\n }\n &[data-variant='outline'] {\n background-color: white;\n border: slim;\n &[data-appearance='primary'] {\n color: typoPrimary;\n border-color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n border-color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n &[data-variant='ghost'] {\n background-color: white;\n &[data-appearance='primary'] {\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: neutral20;\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n background-color: red20;\n }\n }\n }\n }\n\n &[data-variant='link'] {\n background-color: transparent;\n height: 20px;\n &[data-appearance='primary'] {\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n\n @media (hover: hover) {\n :hover {\n color: neutral500;\n & svg {\n stroke: neutral500;\n }\n }\n }\n }\n &[data-appearance='secondary'] {\n color: red1;\n & svg {\n stroke: red1;\n }\n\n @media (hover: hover) {\n :hover {\n color: red70;\n & svg {\n stroke: red70;\n }\n }\n }\n }\n }\n\n &[data-variant='icon'] {\n width: 38px;\n height: 38px;\n gap: 10px;\n\n &[data-appearance='primary'] {\n background-color: red1;\n color: white;\n & svg {\n stroke: white;\n }\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n\n &[data-appearance='secondary'] {\n background-color: neutral20;\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n @media (hover: hover) {\n :hover {\n background-color: lightGray7;\n }\n }\n }\n\n &[data-appearance='tertiary'] {\n background-color: red20;\n color: red1;\n & svg {\n stroke: red1;\n }\n @media (hover: hover) {\n :hover {\n background-color: red30;\n }\n }\n }\n\n &[data-appearance='ghost'] {\n background-color: transparent;\n color: typoPrimary;\n & svg {\n stroke: typoPrimary;\n }\n @media (hover: hover) {\n :hover {\n color: neutral500;\n & svg {\n stroke: neutral500;\n }\n }\n }\n }\n }\n\n &[data-variant='floating'] {\n &[data-appearance='primary'] {\n width: 56px;\n height: 56px;\n background-color: red1;\n color: white;\n border-radius: 50%;\n & svg {\n stroke: white;\n }\n @media (hover: hover) {\n :hover {\n background-color: red70;\n }\n }\n }\n }\n"])), function (_a) {
|
|
20
20
|
var fullWidth = _a.fullWidth;
|
|
21
21
|
return (fullWidth ? '100%' : 'initial');
|
|
22
22
|
}, th('fonts.primary'), function (_a) {
|
|
@@ -5,8 +5,8 @@ export type Props = React.HTMLProps<HTMLButtonElement> & {
|
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
fullWidth?: boolean;
|
|
8
|
-
variant
|
|
9
|
-
appearance
|
|
8
|
+
variant?: VariantValue;
|
|
9
|
+
appearance?: AppearanceValue;
|
|
10
10
|
isLoading?: boolean;
|
|
11
11
|
name?: string;
|
|
12
12
|
as?: string | React.ComponentType;
|
|
@@ -44,7 +44,8 @@ type HighlightBoxType = {
|
|
|
44
44
|
children: React.ReactNode;
|
|
45
45
|
appearance: FlagAppearanceType;
|
|
46
46
|
size?: 'default' | 'small' | 'wide' | 'fitContent';
|
|
47
|
+
className?: string;
|
|
47
48
|
prefix?: string;
|
|
48
49
|
};
|
|
49
|
-
declare const HighlightBox: ({ children, appearance, size, prefix }: HighlightBoxType) => JSX.Element;
|
|
50
|
+
declare const HighlightBox: ({ children, appearance, size, className, prefix }: HighlightBoxType) => JSX.Element;
|
|
50
51
|
export default HighlightBox;
|
|
@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
6
|
import styled, { useTheme } from '@xstyled/styled-components';
|
|
7
7
|
import { th } from '@xstyled/system';
|
|
8
|
-
var StyledHighlightBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ml;\n font-size: 12px;\n text-align: center;\n line-height: 19.2px;\n min-width: 0;\n font-weight: semiBold;\n .default {\n height: 24px;\n padding: 2px 8px;\n }\n .small {\n height: 18px;\n padding: 1px 6px;\n }\n .wide {\n height: 2.75em;\n display: flex;\n flex-flow: row wrap;\n width: 11rem;\n align-content: center;\n line-height: 14px;\n padding: 0.5px 12px;\n }\n .fitContent {\n width: fit-content;\n height: auto;\n padding: 4px 5px;\n font-size: 13px;\n line-height: 15px;\n font-weight: 400;\n }\n background-color: ", ";\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ml;\n font-size: 12px;\n text-align: center;\n line-height: 19.2px;\n min-width: 0;\n font-weight: semiBold;\n .default {\n height: 24px;\n padding: 2px 8px;\n }\n .small {\n height: 18px;\n padding: 1px 6px;\n }\n .wide {\n height: 2.75em;\n display: flex;\n flex-flow: row wrap;\n width: 11rem;\n align-content: center;\n line-height: 14px;\n padding: 0.5px 12px;\n }\n .fitContent {\n width: fit-content;\n height: auto;\n padding: 4px 5px;\n font-size: 13px;\n line-height: 15px;\n font-weight: 400;\n }\n background-color: ", ";\n color: ", ";\n"])), function (_a) {
|
|
8
|
+
var StyledHighlightBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ml;\n font-size: 12px;\n text-align: center;\n line-height: 19.2px;\n min-width: 0;\n font-weight: semiBold;\n .default {\n height: 24px;\n padding: 2px 8px !important;\n }\n .small {\n height: 18px;\n padding: 1px 6px;\n }\n .wide {\n height: 2.75em;\n display: flex;\n flex-flow: row wrap;\n width: 11rem;\n align-content: center;\n line-height: 14px;\n padding: 0.5px 12px;\n }\n .fitContent {\n width: fit-content;\n height: auto;\n padding: 4px 5px;\n font-size: 13px;\n line-height: 15px;\n font-weight: 400;\n }\n background-color: ", ";\n color: ", ";\n"], ["\n display: inline-flex;\n align-items: center;\n justify-content: flex-start;\n border-radius: ml;\n font-size: 12px;\n text-align: center;\n line-height: 19.2px;\n min-width: 0;\n font-weight: semiBold;\n .default {\n height: 24px;\n padding: 2px 8px !important;\n }\n .small {\n height: 18px;\n padding: 1px 6px;\n }\n .wide {\n height: 2.75em;\n display: flex;\n flex-flow: row wrap;\n width: 11rem;\n align-content: center;\n line-height: 14px;\n padding: 0.5px 12px;\n }\n .fitContent {\n width: fit-content;\n height: auto;\n padding: 4px 5px;\n font-size: 13px;\n line-height: 15px;\n font-weight: 400;\n }\n background-color: ", ";\n color: ", ";\n"])), function (_a) {
|
|
9
9
|
var $bgcolor = _a.$bgcolor;
|
|
10
10
|
return $bgcolor;
|
|
11
11
|
}, function (_a) {
|
|
@@ -54,12 +54,12 @@ export var flagAppearanceToFontColorMap = {
|
|
|
54
54
|
redSubtle: 'red80',
|
|
55
55
|
};
|
|
56
56
|
var HighlightBox = function (_a) {
|
|
57
|
-
var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, prefix = _a.prefix;
|
|
57
|
+
var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, className = _a.className, prefix = _a.prefix;
|
|
58
58
|
var theme = useTheme();
|
|
59
59
|
var bgColor = th.color(appearance ? flagAppearanceToColorMap[appearance] : 'transparent')({ theme: theme });
|
|
60
60
|
var fontColor = th.color(appearance ? flagAppearanceToFontColorMap[appearance] : 'typoPrimary')({ theme: theme });
|
|
61
61
|
var name = !!prefix ? "".concat(prefix, "Label") : 'label';
|
|
62
|
-
return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size, children: children }) }));
|
|
62
|
+
return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size + ' ' + className, children: children }) }));
|
|
63
63
|
};
|
|
64
64
|
export default HighlightBox;
|
|
65
65
|
var templateObject_1, templateObject_2;
|
|
@@ -19,7 +19,7 @@ export var CustomStyles = {
|
|
|
19
19
|
return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
|
|
20
20
|
fontWeight: theme.textWeightNormal,
|
|
21
21
|
fontFamily: theme.font,
|
|
22
|
-
}, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth:
|
|
22
|
+
}, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minHeight: theme.height, minWidth: 'min-content', '.inputIcon': {
|
|
23
23
|
color: isDisabled ? colors.defaultControlColor : !!selectProps.value ? colors.inputTextColor : colors.defaultControlColor,
|
|
24
24
|
} });
|
|
25
25
|
},
|
package/ui/index.es.js
CHANGED
|
@@ -8406,9 +8406,11 @@ const mU = ae.span`
|
|
|
8406
8406
|
stroke: white;
|
|
8407
8407
|
}
|
|
8408
8408
|
|
|
8409
|
-
|
|
8410
|
-
:hover {
|
|
8411
|
-
|
|
8409
|
+
:not(:disabled) {
|
|
8410
|
+
@media (hover: hover) {
|
|
8411
|
+
:hover {
|
|
8412
|
+
background-color: red80;
|
|
8413
|
+
}
|
|
8412
8414
|
}
|
|
8413
8415
|
}
|
|
8414
8416
|
}
|
|
@@ -33374,8 +33376,7 @@ const J3e = ae.div`
|
|
|
33374
33376
|
},
|
|
33375
33377
|
fontSize: "14px",
|
|
33376
33378
|
minHeight: r.height,
|
|
33377
|
-
minWidth:
|
|
33378
|
-
// prevents ValueContainer and IndicatorsContainer from wrapping while at least first letter is still visible
|
|
33379
|
+
minWidth: "min-content",
|
|
33379
33380
|
".inputIcon": {
|
|
33380
33381
|
color: i ? o.defaultControlColor : t.value ? o.inputTextColor : o.defaultControlColor
|
|
33381
33382
|
}
|
|
@@ -37378,7 +37379,7 @@ const Cs = /* @__PURE__ */ ho(j4e), TSe = ({
|
|
|
37378
37379
|
] }) });
|
|
37379
37380
|
}, NSe = ae(Jue)`
|
|
37380
37381
|
text-decoration: underline;
|
|
37381
|
-
`, _Se = (e) => /* @__PURE__ */ b.jsx(Ti, { ...e, appearance: "
|
|
37382
|
+
`, _Se = (e) => /* @__PURE__ */ b.jsx(Ti, { ...e, appearance: "primary", variant: "link" }), Z4e = ae.div`
|
|
37382
37383
|
display: flex;
|
|
37383
37384
|
justify-content: center;
|
|
37384
37385
|
width: 100%;
|
|
@@ -37429,7 +37430,7 @@ const Cs = /* @__PURE__ */ ho(j4e), TSe = ({
|
|
|
37429
37430
|
font-weight: semiBold;
|
|
37430
37431
|
.default {
|
|
37431
37432
|
height: 24px;
|
|
37432
|
-
padding: 2px 8px;
|
|
37433
|
+
padding: 2px 8px !important;
|
|
37433
37434
|
}
|
|
37434
37435
|
.small {
|
|
37435
37436
|
height: 18px;
|
|
@@ -37503,14 +37504,15 @@ const Cs = /* @__PURE__ */ ho(j4e), TSe = ({
|
|
|
37503
37504
|
children: e,
|
|
37504
37505
|
appearance: t,
|
|
37505
37506
|
size: r = "default",
|
|
37506
|
-
|
|
37507
|
+
className: n,
|
|
37508
|
+
prefix: i
|
|
37507
37509
|
}) => {
|
|
37508
|
-
const
|
|
37509
|
-
theme:
|
|
37510
|
-
}),
|
|
37511
|
-
theme:
|
|
37512
|
-
}),
|
|
37513
|
-
return /* @__PURE__ */ b.jsx($4e, { $bgcolor:
|
|
37510
|
+
const o = wt(), l = ne.color(t ? Q4e[t] : "transparent")({
|
|
37511
|
+
theme: o
|
|
37512
|
+
}), u = ne.color(t ? K4e[t] : "typoPrimary")({
|
|
37513
|
+
theme: o
|
|
37514
|
+
}), c = i ? `${i}Label` : "label";
|
|
37515
|
+
return /* @__PURE__ */ b.jsx($4e, { $bgcolor: l, $fontColor: u, "data-cy": c, children: /* @__PURE__ */ b.jsx(q4e, { className: r + " " + n, children: e }) });
|
|
37514
37516
|
}, t6e = ae.div`
|
|
37515
37517
|
display: flex;
|
|
37516
37518
|
justify-content: flex-start;
|
|
@@ -37524,7 +37526,7 @@ const Cs = /* @__PURE__ */ ho(j4e), TSe = ({
|
|
|
37524
37526
|
const i = it(() => t[e] ? t[e]() : e, [t, e]), o = it(() => ({
|
|
37525
37527
|
appearance: r[e]
|
|
37526
37528
|
}), [r, e]);
|
|
37527
|
-
return i ? /* @__PURE__ */ b.jsx(t6e, { children: /* @__PURE__ */ b.jsx(e6e, { ...o, size: n, prefix: "grid", children: i }) }) : null;
|
|
37529
|
+
return i ? /* @__PURE__ */ b.jsx(t6e, { children: /* @__PURE__ */ b.jsx(e6e, { className: "cell", ...o, size: n, prefix: "grid", children: i }) }) : null;
|
|
37528
37530
|
}, r6e = ae.div`
|
|
37529
37531
|
text-align: center;
|
|
37530
37532
|
overflow: hidden;
|
package/ui/index.umd.js
CHANGED
|
@@ -1013,9 +1013,11 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
1013
1013
|
stroke: white;
|
|
1014
1014
|
}
|
|
1015
1015
|
|
|
1016
|
-
|
|
1017
|
-
:hover {
|
|
1018
|
-
|
|
1016
|
+
:not(:disabled) {
|
|
1017
|
+
@media (hover: hover) {
|
|
1018
|
+
:hover {
|
|
1019
|
+
background-color: red80;
|
|
1020
|
+
}
|
|
1019
1021
|
}
|
|
1020
1022
|
}
|
|
1021
1023
|
}
|
|
@@ -2878,7 +2880,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
2878
2880
|
:hover {
|
|
2879
2881
|
color: red3;
|
|
2880
2882
|
}
|
|
2881
|
-
`,Q4e=e=>{const{theme:t}=e,{resetGrid:r,onCustomSelectAll:n,onCustomDeselectAll:i,value:o,options:l,resetGridButton:u,selectAllButton:c,maxMenuHeight:f}=e.selectProps,h=t.optionVariant==="checkbox",p=t.optionVariant==="toggle",[v,m]=k.useState(!1),[w,E]=k.useState(!1),S=k.useRef(null);k.useEffect(()=>{var I;if((I=S==null?void 0:S.current)!=null&&I.offsetHeight&&E(S.current.offsetHeight*l.length>f),o)l.length===o.length&&m(!0),l.length!==o.length&&m(!1);else return},[w,f,l.length,o]);const x=k.useCallback(()=>{v?v&&(m(!1),i()):(m(!0),n())},[v,i,n]);return b.jsxs(ws.components.Menu,{...e,children:[c&&b.jsxs(X4e,{isSelected:v,onClick:x,ref:S,additionalPadding:w,children:[(h||p)&&b.jsxs(AB,{children:[h&&b.jsx(Uf,{checked:v,size:2,readOnly:!0}),p&&b.jsx(Zf,{name:"",checked:v,spaceAround:!1,variant:"grid"})]}),b.jsx(rn,{id:"datagrid.filterCell.selectAllLabel",message:"select all"})]}),e.children,u&&b.jsx(q4e,{onClick:r,children:b.jsx(M4,{variant:"semiBold",children:b.jsx(rn,{id:"dataGrid.buttonClearConfig",message:"Reset config"})})})]})},K4e=e=>{const{name:t}=e.selectProps,r=t?`${t}Inp`:e.id;return b.jsx(ws.components.Input,{...e,"data-cy":r})},$4e=e=>{const{menuIsOpen:t,name:r}=e.selectProps;return b.jsx(ws.components.DropdownIndicator,{...e,children:b.jsx(U4e,{className:"chevron","data-cy":`${r}ChevronBtn`,children:t?b.jsx(iO,{width:"16px"}):b.jsx(nO,{width:"16px"})})})},e6e={control:(e,{selectProps:t,theme:r,isFocused:n,isDisabled:i})=>{const o=r.colors;return{...e,borderColor:t.isInvalid?o.primary:n?o.inputTextColor:o.inputBorderColor,backgroundColor:o.whiteBackgroundColor,boxShadow:r.focusBoxShadow,borderRadius:r.borderRadius,"& input":{fontWeight:r.textWeightNormal,fontFamily:r.font},"&:hover":{...e["&:hover"]??{},borderColor:o.inputBorderHoverColor},fontSize:"14px",minHeight:r.height,minWidth:t.isMulti?"min-content":"max-content",".inputIcon":{color:i?o.defaultControlColor:t.value?o.inputTextColor:o.defaultControlColor}}},singleValue:(e,{selectProps:t,theme:r,isDisabled:n})=>({...e,position:"absolute",top:"50%",transform:"translateY(-50%)",color:t.isInvalid?r.colors.primary:n?r.colors.disabledTextColor:r.colors.inputTextColor,fontSize:"14px",fontWeight:r.textWeightNormal}),multiValue:(e,t)=>{const{theme:r}=t;return{...e,color:r.colors.inputTextColor,fontWeight:r.textWeightNormal,backgroundColor:"#E7EBEF",borderRadius:"4px","& svg":{color:r.colors.inputTextColor}," > div":{fontSize:"12px"}}},multiValueLabel:e=>({...e,fontSize:"unset",padding:"5px"}),multiValueRemove:(e,{theme:t})=>({...e,color:t.colors.inputBorderColor}),placeholder:(e,t)=>{const{theme:r,selectProps:n}=t;return{...e,fontSize:"14px",fontWeight:r.textWeightNormal,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden",maxWidth:"calc(100% - 8px)",color:n.isDarkPlaceholderText?r.colors.inputTextColor:r.colors.placeholderTextColor}},loadingMessage:(e,{theme:t})=>({...e,color:t.colors.optionTextColor}),noOptionsMessage:(e,{theme:t})=>({...e,color:t.colors.optionTextColor}),input:(e,{theme:t})=>({...e,color:t.colors.inputTextColor}),option:(e,{isSelected:t,theme:r,isDisabled:n,selectProps:i})=>{const o=r.colors.optionTextColor;return{color:t?r.colors.primary:o,backgroundColor:t?r.colors.activeOptionBackground:void 0,fontWeight:r.textWeightNormal,fontSize:"14px",cursor:n?"default":"pointer",display:"flex",flexDirection:"row",alignItems:"center",padding:"7px 10px",height:"36px",marginRight:"4px",marginBottom:"2px",lineHeight:"22px",borderRadius:ne.radius("ml")({theme:i==null?void 0:i.systemTheme}),"&:hover":{backgroundColor:t?r.colors.hoverToActiveOptionBackground:n?void 0:r.colors.menuHoverBackgroundColor}}},menu:(e,t)=>{const{theme:r}=t;return{...e,boxShadow:"0 2px 20px 0 rgba(0, 0, 0, 0.10);",marginTop:"4px",paddingTop:"0",borderRadius:"10px",zIndex:3,minWidth:"max-content",backgroundColor:r.colors.whiteBackgroundColor}},menuList:(e,{theme:t})=>({...e,margin:"8px 4px 8px 8px","::-webkit-scrollbar-thumb":{border:"none",borderRadius:"4px",height:"47px",backgroundColor:t.colors.defaultControlColor,"&:hover":{backgroundColor:t.colors.dropdownIndicatorColor}},"::-webkit-scrollbar":{width:"10px"},"::-webkit-scrollbar-track":{backgroundColor:t.colors.menuHoverBackgroundColor,borderRadius:"6px"}}),dropdownIndicator:(e,t)=>{const{theme:r,isDisabled:n}=t;return{...e,justifyContent:"center",alignItems:"center","& svg":{stroke:n?r.colors.dropdownIndicatorColor:r.colors.inputTextColor},padding:"0px 5px 0px 0px","@media (min-width: 1024px)":{padding:"0px 10px 0px 1px"}}},clearIndicator:(e,t)=>{const{theme:r}=t;return{...e,justifyContent:"center",alignItems:"center",padding:r.narrowIndicators?"0px 0px 0px 2px":"0px 4px",color:r.colors.dropdownIndicatorColor}}},t6e=(e,t,r)=>{const n=ne.color("blue2")({theme:e}),i={primary:ne.color("red1")({theme:e}),inputTextColor:n,whiteBackgroundColor:ne.color("white")({theme:e}),optionTextColor:ne.color("blue2")({theme:e}),menuHoverBackgroundColor:ne.color("bgLightGray1")({theme:e}),inputDisabledColor:ne.color("lightGray1")({theme:e}),inputBorderColor:ne.color("lightGray3")({theme:e}),placeholderTextColor:ne.color("lightGray3")({theme:e}),defaultControlColor:ne.color("lightGray5")({theme:e}),disabledTextColor:ne.color("lightGray6")({theme:e}),dropdownIndicatorColor:ne.color("gray1")({theme:e}),inputBorderHoverColor:ne.color("gray5")({theme:e}),activeOptionBackground:ne.color("red20")({theme:e}),hoverToActiveOptionBackground:ne.color("red30")({theme:e})};return o=>({...o,colors:i,focusBoxShadow:null,height:r?"32px":"38px",textWeightNormal:ne.fontWeight("normal")({theme:e}),optionVariant:t,borderRadius:ne.radius("lg")({theme:e}),font:ne.font("primary")({theme:e}),narrowIndicators:!!r})},r6e=(e="form",t="default",r="default",n="default",i,o,l)=>{const u=vt();return k.useMemo(()=>{const c={ValueContainer:Y4e};r==="count"&&(c.MultiValue=Z4e),n==="search"&&(c.DropdownIndicator=null),(l||o)&&(c.Menu=Q4e),c.Input=K4e;const f=t6e(u,t,e=="gridFilter"),h=e6e;return c.Option=J4e,c.DropdownIndicator=$4e,i&&(c.Option=G4e),[c,f,h]},[r,n,l,o,e,i,u,t])},CB=[],n6e=()=>pt._({id:"select.noOptions",message:"no options"}),i6e=()=>pt._({id:"components.dropdown.loading",message:"Loading..."}),xg=({label:e,name:t,value:r="",options:n=CB,defaultOptions:i,loadOptions:o,onChange:l,onBlur:u,error:c,isInvalid:f,isLoading:h,isDarkPlaceholderText:p,spaceAround:v=!1,disabled:m,onInputChange:w,isSearchable:E,isMulti:S,className:x,useSimplifiedOptions:I=!1,showSelectAllButton:P=!1,showResetGridButton:T=!1,style:D,optionVariant:B,multiLabelVariant:F,containerVariant:W,placeholder:G,placeholderIcon:J,innerRef:R,maxMenuHeight:j,getOptionValue:V,resetGrid:te,...Y})=>{const ie=!!o;P&&(o||!S)&&console.error("CheckboxSelect incompatible props");const pe=k.useCallback(()=>{l==null||l(n||[])},[l,n]),be=k.useCallback(()=>{typeof l=="function"&&(l==null||l(CB))},[l]),fe=W==="search"?"search":J||void 0,Z=T&&P&&j?j-30:j,[q,le,se]=r6e(D,B,F,W,I,P,T),ve=ie?W4e:j4e;let ae;const K=k.useMemo(()=>V||(ge=>ge==null?void 0:ge.value),[V]);Array.isArray(r)?(ae=(i||n).filter(ge=>r.includes(K(ge))),ae=ae!=null&&ae.length?ae:null):r!==void 0&&(ae=(i||n).find(ge=>K(ge)===r)||null);const re=vt(),de=k.useMemo(()=>o?ge=>o(ge):void 0,[o]);return b.jsxs(_l,{spaceAround:v,className:x,children:[b.jsxs(V4e,{children:[e&&b.jsx(Yf,{htmlFor:t,children:e}),b.jsx(ve,{id:t,name:t,options:n,loadOptions:de,defaultOptions:i,value:ae,onChange:l,onBlur:u,isDisabled:m||h,isLoading:h,isInvalid:f!==void 0?f:!!c,isDarkPlaceholderText:p,placeholder:G||pt._({id:"components.dropdown.placeholder",message:"Select..."}),styles:se,theme:le,icon:fe,hideSelectedOptions:!!(S&&F!="count"),onInputChange:w,isSearchable:ie||E,isMulti:S,classNamePrefix:"react-select",components:q,closeMenuOnSelect:S?!1:void 0,...Y,ref:R,tabIndex:null,systemTheme:re,resetGrid:te,onCustomSelectAll:pe,onCustomDeselectAll:be,selectAllButton:P,resetGridButton:T,maxMenuHeight:Z,getOptionValue:V,noOptionsMessage:n6e,loadingMessage:i6e})]}),c&&b.jsx(l2,{children:c})]})},xB=({checkAllButton:e,...t})=>b.jsx(xg,{...t,optionVariant:"checkbox",multiLabelVariant:"count",isMulti:!0,showSelectAllButton:e});var F8,EB;function a6e(){if(EB)return F8;EB=1;function e(t){var r=t==null?0:t.length;return r?t[r-1]:void 0}return F8=e,F8}var V8,SB;function o6e(){if(SB)return V8;SB=1;function e(t,r,n){var i=-1,o=t.length;r<0&&(r=-r>o?0:o+r),n=n>o?o:n,n<0&&(n+=o),o=r>n?0:n-r>>>0,r>>>=0;for(var l=Array(o);++i<o;)l[i]=t[i+r];return l}return V8=e,V8}var j8,IB;function s6e(){if(IB)return j8;IB=1;var e=X5(),t=o6e();function r(n,i){return i.length<2?n:e(n,t(i,0,-1))}return j8=r,j8}var W8,kB;function l6e(){if(kB)return W8;kB=1;var e=Up(),t=a6e(),r=s6e(),n=Xu;function i(o,l){return l=e(l,o),o=r(o,l),o==null||delete o[n(t(l))]}return W8=i,W8}var H8,OB;function u6e(){if(OB)return H8;OB=1;var e=$P;function t(r){return e(r)?void 0:r}return H8=t,H8}var G8,TB;function c6e(){if(TB)return G8;TB=1;var e=Z5(),t=F5(),r=l6e(),n=Up(),i=_f(),o=u6e(),l=NM(),u=PP(),c=1,f=2,h=4,p=l(function(v,m){var w={};if(v==null)return w;var E=!1;m=e(m,function(x){return x=n(x,v),E||(E=x.length>1),x}),i(v,u(v),w),E&&(w=t(w,c|f|h,o));for(var S=m.length;S--;)r(w,m[S]);return w});return G8=p,G8}var d6e=ib,PB=d6e("omit",c6e());PB.placeholder=Np();var f6e=PB;const h6e=Na(f6e),z8=`_create_${((e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((t,r)=>(r&=63,r<36?t+=r.toString(36):r<62?t+=(r-26).toString(36).toUpperCase():r>62?t+="-":t+="_",t),""))()}_`,p6e=ws.createFilter(),g6e=(e,t)=>(e==null?void 0:e.value)==z8?!0:p6e(e,t),Y8=e=>e===null?null:Array.isArray(e)?e.map(t=>t.value):e.value,v6e=()=>pt._({id:"components.dropdown.loading",message:"Loading..."}),MB=e=>{const{name:t,onChange:r,onBlur:n,onValueChange:i,loadOptions:o,asyncLoadMinChars:l=0,isLocked:u,lockedText:c=pt._({id:"components.dropdown.notReact",message:"Select related values first..."}),disabled:f,placeholder:h=pt._({id:"components.dropdown.placeholder",message:"Select..."}),preload:p,initialOptions:v,onCreateOption:m,options:w,filterOption:E}=e,[S,x]=k.useState(!1),I=!!o||!!m,P=k.useCallback(Y=>o&&Y.length<l?pt._({id:"components.dropdown.writeMoreChars",message:"Write at least ${asyncLoadMinChars} characters."}):pt._({id:"components.dropdown.noOptions",message:"No options"}),[o,l]),T=k.useCallback(Y=>m?Y.trim()?Promise.resolve([...w||[],{value:z8,label:`${Y} (${pt._({id:"components.dropdown.newOption",message:"new value"})})`,inputValue:Y}]):Promise.resolve(w||[]):!o||Y.length<l?Promise.resolve([]):o(Y,!1),[m,o,l,w]),[D,B]=k.useState(w||[]);k.useEffect(()=>{o&&p&&!e.value&&o("",!1).then(B)},[o]);const[F,W]=k.useState(null);k.useEffect(()=>{if(v&&v.length){const Y=v.find(ie=>ie.value==e.value)||null;W(Y)}o&&!v&&e.value&&o(String(e.value),!0).then(Y=>W((Y==null?void 0:Y[0])||null))},[v,W]);const G=k.useCallback(async Y=>{var pe,be,fe;let ie;if(m&&(Y==null?void 0:Y.value)==z8)if(Y!=null&&Y.inputValue&&((be=(pe=Y==null?void 0:Y.inputValue)==null?void 0:pe.trim())==null?void 0:be.length)<2){e==null||e.form.setFieldTouched(t,!0,!0),e==null||e.form.setFieldError(t,pt._({id:"form.general.min2Chars",message:"Minimal length is 2 characters."}));return}else{x(!0);const Z=await m(((fe=Y==null?void 0:Y.inputValue)==null?void 0:fe.trim())??"");ie=Y8(Z),x(!1)}else ie=Y8(Y),o&&W(Y);r&&r({target:{name:t??"",type:"change",value:ie}}),i&&i(ie)},[m,o,r,i,e==null?void 0:e.form,t]),J=k.useCallback(Y=>{n&&n({target:{name:t,type:"blur",value:Y8(Y)}})},[t,n]),R=["onValueChange","placeholder","options","loadOptions","asyncLoadMinChars"],V=u&&!f?c:h,te=k.useMemo(()=>{if(!I)return;const Y=m?w:D;return F?Y?[...Y,F]:[F]:Y||void 0},[I,D,m,w,F]);return b.jsx(xg,{...h6e(R,e),filterOption:E||g6e,disabled:f||u,onChange:G,onBlur:J,placeholder:V,loadingMessage:v6e,noOptionsMessage:P,loadOptions:I?T:void 0,containerVariant:I?"search":void 0,defaultOptions:te,options:I?void 0:w,isLoading:S||e.isLoading})},m6e=[],DB=({onChange:e,isMulti:t,value:r,options:n,checkAllButton:i})=>{const o=k.useCallback(l=>{e==null||e(!rQ(l)||!(l!=null&&l.length)?null:l.map(u=>u.value))},[e]);return t?b.jsx(xB,{maxMenuHeight:250,onChange:o,value:r||m6e,options:n,checkAllButton:i,style:"gridFilter"}):b.jsx(MB,{maxMenuHeight:250,onChange:e,value:r,options:n,style:"gridFilter"})},b6e=()=>[{value:"",label:pt._({id:"dataGrid.columnActive.filterOptions.all",message:"All"})},{value:"1",label:pt._({id:"dataGrid.columnActive.filterOptions.yes",message:"Yes"})},{value:"0",label:pt._({id:"dataGrid.columnActive.filterOptions.no",message:"No"})}],y6e=({...e})=>{const t=k.useMemo(()=>b6e(),[]);return b.jsx(DB,{options:t,...e})},NB=e=>typeof e<"u",x1=e=>({flexBasis:e.flexBasis,flexGrow:0,flexShrink:0}),Oc=(e,t)=>{if(!e)return{};const{fixedSize:r,flexGrow:n,flexShrink:i,sticky:o}=e;return{flexBasis:t,flexGrow:r?0:NB(n)?n:1,flexShrink:NB(i)?i:1,maxWidth:o?t:"auto"}},w6e=e=>e.systemName||e.name,_B=e=>e.systemFilter||e.systemName||e.name,A6e=(e,t)=>{var n;if(e.alwaysOn)return!0;const r=(n=t==null?void 0:t[e.name])==null?void 0:n.isHidden;return typeof r=="boolean"?!r:e.defaultHidden&&(t!=null&&t[e.name])?!0:!e.defaultHidden},LB=e=>e.filterOptions?"options":e.filteringType||"text",C6e=e=>e.map((t,r)=>{let n=r>0&&e[r-1].group;return{name:t.group,start:!!(t.group&&(!n||n&&n!==t.group)),end:!!(t.group&&(!e[r+1]||e[r+1].group!==t.group))}}),Eg=e=>`${e!=null&&e.start?"group-start":""} ${e!=null&&e.end?"group-end":""}`,Sg=(e,t)=>e?`${t?` sticky sticky-${t}`:" sticky sticky-left"}`:"",x6e=6,E6e=40,S6e=e=>{const t={number:{CellComponent:gpe},text:{CellComponent:Ope},date:{CellComponent:Mge},flag:{CellComponent:y6e},options:{CellComponent:DB}};return e&&(t.text.defaultExtraProps={defaultComparator:"eq"}),t},I6e=(e,t)=>{const r=t.filter(i=>i.sticky===!0&&i.stickTo==="right"),n=t.filter(i=>i.sticky===!0&&i.stickTo!=="right");(n.length>1||r.length>1)&&console.error("Grid can have only sticky column on each side."),n.length&&e.indexOf(n[0].name)!==0&&console.error("The left sticky column should be the first one in a row"),r.length&&e.indexOf(r[0].name)!==e.length-1&&console.error("The Right sticky column should be the last one in a row")};var Ig={exports:{}};/**
|
|
2883
|
+
`,Q4e=e=>{const{theme:t}=e,{resetGrid:r,onCustomSelectAll:n,onCustomDeselectAll:i,value:o,options:l,resetGridButton:u,selectAllButton:c,maxMenuHeight:f}=e.selectProps,h=t.optionVariant==="checkbox",p=t.optionVariant==="toggle",[v,m]=k.useState(!1),[w,E]=k.useState(!1),S=k.useRef(null);k.useEffect(()=>{var I;if((I=S==null?void 0:S.current)!=null&&I.offsetHeight&&E(S.current.offsetHeight*l.length>f),o)l.length===o.length&&m(!0),l.length!==o.length&&m(!1);else return},[w,f,l.length,o]);const x=k.useCallback(()=>{v?v&&(m(!1),i()):(m(!0),n())},[v,i,n]);return b.jsxs(ws.components.Menu,{...e,children:[c&&b.jsxs(X4e,{isSelected:v,onClick:x,ref:S,additionalPadding:w,children:[(h||p)&&b.jsxs(AB,{children:[h&&b.jsx(Uf,{checked:v,size:2,readOnly:!0}),p&&b.jsx(Zf,{name:"",checked:v,spaceAround:!1,variant:"grid"})]}),b.jsx(rn,{id:"datagrid.filterCell.selectAllLabel",message:"select all"})]}),e.children,u&&b.jsx(q4e,{onClick:r,children:b.jsx(M4,{variant:"semiBold",children:b.jsx(rn,{id:"dataGrid.buttonClearConfig",message:"Reset config"})})})]})},K4e=e=>{const{name:t}=e.selectProps,r=t?`${t}Inp`:e.id;return b.jsx(ws.components.Input,{...e,"data-cy":r})},$4e=e=>{const{menuIsOpen:t,name:r}=e.selectProps;return b.jsx(ws.components.DropdownIndicator,{...e,children:b.jsx(U4e,{className:"chevron","data-cy":`${r}ChevronBtn`,children:t?b.jsx(iO,{width:"16px"}):b.jsx(nO,{width:"16px"})})})},e6e={control:(e,{selectProps:t,theme:r,isFocused:n,isDisabled:i})=>{const o=r.colors;return{...e,borderColor:t.isInvalid?o.primary:n?o.inputTextColor:o.inputBorderColor,backgroundColor:o.whiteBackgroundColor,boxShadow:r.focusBoxShadow,borderRadius:r.borderRadius,"& input":{fontWeight:r.textWeightNormal,fontFamily:r.font},"&:hover":{...e["&:hover"]??{},borderColor:o.inputBorderHoverColor},fontSize:"14px",minHeight:r.height,minWidth:"min-content",".inputIcon":{color:i?o.defaultControlColor:t.value?o.inputTextColor:o.defaultControlColor}}},singleValue:(e,{selectProps:t,theme:r,isDisabled:n})=>({...e,position:"absolute",top:"50%",transform:"translateY(-50%)",color:t.isInvalid?r.colors.primary:n?r.colors.disabledTextColor:r.colors.inputTextColor,fontSize:"14px",fontWeight:r.textWeightNormal}),multiValue:(e,t)=>{const{theme:r}=t;return{...e,color:r.colors.inputTextColor,fontWeight:r.textWeightNormal,backgroundColor:"#E7EBEF",borderRadius:"4px","& svg":{color:r.colors.inputTextColor}," > div":{fontSize:"12px"}}},multiValueLabel:e=>({...e,fontSize:"unset",padding:"5px"}),multiValueRemove:(e,{theme:t})=>({...e,color:t.colors.inputBorderColor}),placeholder:(e,t)=>{const{theme:r,selectProps:n}=t;return{...e,fontSize:"14px",fontWeight:r.textWeightNormal,textOverflow:"ellipsis",whiteSpace:"nowrap",overflow:"hidden",maxWidth:"calc(100% - 8px)",color:n.isDarkPlaceholderText?r.colors.inputTextColor:r.colors.placeholderTextColor}},loadingMessage:(e,{theme:t})=>({...e,color:t.colors.optionTextColor}),noOptionsMessage:(e,{theme:t})=>({...e,color:t.colors.optionTextColor}),input:(e,{theme:t})=>({...e,color:t.colors.inputTextColor}),option:(e,{isSelected:t,theme:r,isDisabled:n,selectProps:i})=>{const o=r.colors.optionTextColor;return{color:t?r.colors.primary:o,backgroundColor:t?r.colors.activeOptionBackground:void 0,fontWeight:r.textWeightNormal,fontSize:"14px",cursor:n?"default":"pointer",display:"flex",flexDirection:"row",alignItems:"center",padding:"7px 10px",height:"36px",marginRight:"4px",marginBottom:"2px",lineHeight:"22px",borderRadius:ne.radius("ml")({theme:i==null?void 0:i.systemTheme}),"&:hover":{backgroundColor:t?r.colors.hoverToActiveOptionBackground:n?void 0:r.colors.menuHoverBackgroundColor}}},menu:(e,t)=>{const{theme:r}=t;return{...e,boxShadow:"0 2px 20px 0 rgba(0, 0, 0, 0.10);",marginTop:"4px",paddingTop:"0",borderRadius:"10px",zIndex:3,minWidth:"max-content",backgroundColor:r.colors.whiteBackgroundColor}},menuList:(e,{theme:t})=>({...e,margin:"8px 4px 8px 8px","::-webkit-scrollbar-thumb":{border:"none",borderRadius:"4px",height:"47px",backgroundColor:t.colors.defaultControlColor,"&:hover":{backgroundColor:t.colors.dropdownIndicatorColor}},"::-webkit-scrollbar":{width:"10px"},"::-webkit-scrollbar-track":{backgroundColor:t.colors.menuHoverBackgroundColor,borderRadius:"6px"}}),dropdownIndicator:(e,t)=>{const{theme:r,isDisabled:n}=t;return{...e,justifyContent:"center",alignItems:"center","& svg":{stroke:n?r.colors.dropdownIndicatorColor:r.colors.inputTextColor},padding:"0px 5px 0px 0px","@media (min-width: 1024px)":{padding:"0px 10px 0px 1px"}}},clearIndicator:(e,t)=>{const{theme:r}=t;return{...e,justifyContent:"center",alignItems:"center",padding:r.narrowIndicators?"0px 0px 0px 2px":"0px 4px",color:r.colors.dropdownIndicatorColor}}},t6e=(e,t,r)=>{const n=ne.color("blue2")({theme:e}),i={primary:ne.color("red1")({theme:e}),inputTextColor:n,whiteBackgroundColor:ne.color("white")({theme:e}),optionTextColor:ne.color("blue2")({theme:e}),menuHoverBackgroundColor:ne.color("bgLightGray1")({theme:e}),inputDisabledColor:ne.color("lightGray1")({theme:e}),inputBorderColor:ne.color("lightGray3")({theme:e}),placeholderTextColor:ne.color("lightGray3")({theme:e}),defaultControlColor:ne.color("lightGray5")({theme:e}),disabledTextColor:ne.color("lightGray6")({theme:e}),dropdownIndicatorColor:ne.color("gray1")({theme:e}),inputBorderHoverColor:ne.color("gray5")({theme:e}),activeOptionBackground:ne.color("red20")({theme:e}),hoverToActiveOptionBackground:ne.color("red30")({theme:e})};return o=>({...o,colors:i,focusBoxShadow:null,height:r?"32px":"38px",textWeightNormal:ne.fontWeight("normal")({theme:e}),optionVariant:t,borderRadius:ne.radius("lg")({theme:e}),font:ne.font("primary")({theme:e}),narrowIndicators:!!r})},r6e=(e="form",t="default",r="default",n="default",i,o,l)=>{const u=vt();return k.useMemo(()=>{const c={ValueContainer:Y4e};r==="count"&&(c.MultiValue=Z4e),n==="search"&&(c.DropdownIndicator=null),(l||o)&&(c.Menu=Q4e),c.Input=K4e;const f=t6e(u,t,e=="gridFilter"),h=e6e;return c.Option=J4e,c.DropdownIndicator=$4e,i&&(c.Option=G4e),[c,f,h]},[r,n,l,o,e,i,u,t])},CB=[],n6e=()=>pt._({id:"select.noOptions",message:"no options"}),i6e=()=>pt._({id:"components.dropdown.loading",message:"Loading..."}),xg=({label:e,name:t,value:r="",options:n=CB,defaultOptions:i,loadOptions:o,onChange:l,onBlur:u,error:c,isInvalid:f,isLoading:h,isDarkPlaceholderText:p,spaceAround:v=!1,disabled:m,onInputChange:w,isSearchable:E,isMulti:S,className:x,useSimplifiedOptions:I=!1,showSelectAllButton:P=!1,showResetGridButton:T=!1,style:D,optionVariant:B,multiLabelVariant:F,containerVariant:W,placeholder:G,placeholderIcon:J,innerRef:R,maxMenuHeight:j,getOptionValue:V,resetGrid:te,...Y})=>{const ie=!!o;P&&(o||!S)&&console.error("CheckboxSelect incompatible props");const pe=k.useCallback(()=>{l==null||l(n||[])},[l,n]),be=k.useCallback(()=>{typeof l=="function"&&(l==null||l(CB))},[l]),fe=W==="search"?"search":J||void 0,Z=T&&P&&j?j-30:j,[q,le,se]=r6e(D,B,F,W,I,P,T),ve=ie?W4e:j4e;let ae;const K=k.useMemo(()=>V||(ge=>ge==null?void 0:ge.value),[V]);Array.isArray(r)?(ae=(i||n).filter(ge=>r.includes(K(ge))),ae=ae!=null&&ae.length?ae:null):r!==void 0&&(ae=(i||n).find(ge=>K(ge)===r)||null);const re=vt(),de=k.useMemo(()=>o?ge=>o(ge):void 0,[o]);return b.jsxs(_l,{spaceAround:v,className:x,children:[b.jsxs(V4e,{children:[e&&b.jsx(Yf,{htmlFor:t,children:e}),b.jsx(ve,{id:t,name:t,options:n,loadOptions:de,defaultOptions:i,value:ae,onChange:l,onBlur:u,isDisabled:m||h,isLoading:h,isInvalid:f!==void 0?f:!!c,isDarkPlaceholderText:p,placeholder:G||pt._({id:"components.dropdown.placeholder",message:"Select..."}),styles:se,theme:le,icon:fe,hideSelectedOptions:!!(S&&F!="count"),onInputChange:w,isSearchable:ie||E,isMulti:S,classNamePrefix:"react-select",components:q,closeMenuOnSelect:S?!1:void 0,...Y,ref:R,tabIndex:null,systemTheme:re,resetGrid:te,onCustomSelectAll:pe,onCustomDeselectAll:be,selectAllButton:P,resetGridButton:T,maxMenuHeight:Z,getOptionValue:V,noOptionsMessage:n6e,loadingMessage:i6e})]}),c&&b.jsx(l2,{children:c})]})},xB=({checkAllButton:e,...t})=>b.jsx(xg,{...t,optionVariant:"checkbox",multiLabelVariant:"count",isMulti:!0,showSelectAllButton:e});var F8,EB;function a6e(){if(EB)return F8;EB=1;function e(t){var r=t==null?0:t.length;return r?t[r-1]:void 0}return F8=e,F8}var V8,SB;function o6e(){if(SB)return V8;SB=1;function e(t,r,n){var i=-1,o=t.length;r<0&&(r=-r>o?0:o+r),n=n>o?o:n,n<0&&(n+=o),o=r>n?0:n-r>>>0,r>>>=0;for(var l=Array(o);++i<o;)l[i]=t[i+r];return l}return V8=e,V8}var j8,IB;function s6e(){if(IB)return j8;IB=1;var e=X5(),t=o6e();function r(n,i){return i.length<2?n:e(n,t(i,0,-1))}return j8=r,j8}var W8,kB;function l6e(){if(kB)return W8;kB=1;var e=Up(),t=a6e(),r=s6e(),n=Xu;function i(o,l){return l=e(l,o),o=r(o,l),o==null||delete o[n(t(l))]}return W8=i,W8}var H8,OB;function u6e(){if(OB)return H8;OB=1;var e=$P;function t(r){return e(r)?void 0:r}return H8=t,H8}var G8,TB;function c6e(){if(TB)return G8;TB=1;var e=Z5(),t=F5(),r=l6e(),n=Up(),i=_f(),o=u6e(),l=NM(),u=PP(),c=1,f=2,h=4,p=l(function(v,m){var w={};if(v==null)return w;var E=!1;m=e(m,function(x){return x=n(x,v),E||(E=x.length>1),x}),i(v,u(v),w),E&&(w=t(w,c|f|h,o));for(var S=m.length;S--;)r(w,m[S]);return w});return G8=p,G8}var d6e=ib,PB=d6e("omit",c6e());PB.placeholder=Np();var f6e=PB;const h6e=Na(f6e),z8=`_create_${((e=21)=>crypto.getRandomValues(new Uint8Array(e)).reduce((t,r)=>(r&=63,r<36?t+=r.toString(36):r<62?t+=(r-26).toString(36).toUpperCase():r>62?t+="-":t+="_",t),""))()}_`,p6e=ws.createFilter(),g6e=(e,t)=>(e==null?void 0:e.value)==z8?!0:p6e(e,t),Y8=e=>e===null?null:Array.isArray(e)?e.map(t=>t.value):e.value,v6e=()=>pt._({id:"components.dropdown.loading",message:"Loading..."}),MB=e=>{const{name:t,onChange:r,onBlur:n,onValueChange:i,loadOptions:o,asyncLoadMinChars:l=0,isLocked:u,lockedText:c=pt._({id:"components.dropdown.notReact",message:"Select related values first..."}),disabled:f,placeholder:h=pt._({id:"components.dropdown.placeholder",message:"Select..."}),preload:p,initialOptions:v,onCreateOption:m,options:w,filterOption:E}=e,[S,x]=k.useState(!1),I=!!o||!!m,P=k.useCallback(Y=>o&&Y.length<l?pt._({id:"components.dropdown.writeMoreChars",message:"Write at least ${asyncLoadMinChars} characters."}):pt._({id:"components.dropdown.noOptions",message:"No options"}),[o,l]),T=k.useCallback(Y=>m?Y.trim()?Promise.resolve([...w||[],{value:z8,label:`${Y} (${pt._({id:"components.dropdown.newOption",message:"new value"})})`,inputValue:Y}]):Promise.resolve(w||[]):!o||Y.length<l?Promise.resolve([]):o(Y,!1),[m,o,l,w]),[D,B]=k.useState(w||[]);k.useEffect(()=>{o&&p&&!e.value&&o("",!1).then(B)},[o]);const[F,W]=k.useState(null);k.useEffect(()=>{if(v&&v.length){const Y=v.find(ie=>ie.value==e.value)||null;W(Y)}o&&!v&&e.value&&o(String(e.value),!0).then(Y=>W((Y==null?void 0:Y[0])||null))},[v,W]);const G=k.useCallback(async Y=>{var pe,be,fe;let ie;if(m&&(Y==null?void 0:Y.value)==z8)if(Y!=null&&Y.inputValue&&((be=(pe=Y==null?void 0:Y.inputValue)==null?void 0:pe.trim())==null?void 0:be.length)<2){e==null||e.form.setFieldTouched(t,!0,!0),e==null||e.form.setFieldError(t,pt._({id:"form.general.min2Chars",message:"Minimal length is 2 characters."}));return}else{x(!0);const Z=await m(((fe=Y==null?void 0:Y.inputValue)==null?void 0:fe.trim())??"");ie=Y8(Z),x(!1)}else ie=Y8(Y),o&&W(Y);r&&r({target:{name:t??"",type:"change",value:ie}}),i&&i(ie)},[m,o,r,i,e==null?void 0:e.form,t]),J=k.useCallback(Y=>{n&&n({target:{name:t,type:"blur",value:Y8(Y)}})},[t,n]),R=["onValueChange","placeholder","options","loadOptions","asyncLoadMinChars"],V=u&&!f?c:h,te=k.useMemo(()=>{if(!I)return;const Y=m?w:D;return F?Y?[...Y,F]:[F]:Y||void 0},[I,D,m,w,F]);return b.jsx(xg,{...h6e(R,e),filterOption:E||g6e,disabled:f||u,onChange:G,onBlur:J,placeholder:V,loadingMessage:v6e,noOptionsMessage:P,loadOptions:I?T:void 0,containerVariant:I?"search":void 0,defaultOptions:te,options:I?void 0:w,isLoading:S||e.isLoading})},m6e=[],DB=({onChange:e,isMulti:t,value:r,options:n,checkAllButton:i})=>{const o=k.useCallback(l=>{e==null||e(!rQ(l)||!(l!=null&&l.length)?null:l.map(u=>u.value))},[e]);return t?b.jsx(xB,{maxMenuHeight:250,onChange:o,value:r||m6e,options:n,checkAllButton:i,style:"gridFilter"}):b.jsx(MB,{maxMenuHeight:250,onChange:e,value:r,options:n,style:"gridFilter"})},b6e=()=>[{value:"",label:pt._({id:"dataGrid.columnActive.filterOptions.all",message:"All"})},{value:"1",label:pt._({id:"dataGrid.columnActive.filterOptions.yes",message:"Yes"})},{value:"0",label:pt._({id:"dataGrid.columnActive.filterOptions.no",message:"No"})}],y6e=({...e})=>{const t=k.useMemo(()=>b6e(),[]);return b.jsx(DB,{options:t,...e})},NB=e=>typeof e<"u",x1=e=>({flexBasis:e.flexBasis,flexGrow:0,flexShrink:0}),Oc=(e,t)=>{if(!e)return{};const{fixedSize:r,flexGrow:n,flexShrink:i,sticky:o}=e;return{flexBasis:t,flexGrow:r?0:NB(n)?n:1,flexShrink:NB(i)?i:1,maxWidth:o?t:"auto"}},w6e=e=>e.systemName||e.name,_B=e=>e.systemFilter||e.systemName||e.name,A6e=(e,t)=>{var n;if(e.alwaysOn)return!0;const r=(n=t==null?void 0:t[e.name])==null?void 0:n.isHidden;return typeof r=="boolean"?!r:e.defaultHidden&&(t!=null&&t[e.name])?!0:!e.defaultHidden},LB=e=>e.filterOptions?"options":e.filteringType||"text",C6e=e=>e.map((t,r)=>{let n=r>0&&e[r-1].group;return{name:t.group,start:!!(t.group&&(!n||n&&n!==t.group)),end:!!(t.group&&(!e[r+1]||e[r+1].group!==t.group))}}),Eg=e=>`${e!=null&&e.start?"group-start":""} ${e!=null&&e.end?"group-end":""}`,Sg=(e,t)=>e?`${t?` sticky sticky-${t}`:" sticky sticky-left"}`:"",x6e=6,E6e=40,S6e=e=>{const t={number:{CellComponent:gpe},text:{CellComponent:Ope},date:{CellComponent:Mge},flag:{CellComponent:y6e},options:{CellComponent:DB}};return e&&(t.text.defaultExtraProps={defaultComparator:"eq"}),t},I6e=(e,t)=>{const r=t.filter(i=>i.sticky===!0&&i.stickTo==="right"),n=t.filter(i=>i.sticky===!0&&i.stickTo!=="right");(n.length>1||r.length>1)&&console.error("Grid can have only sticky column on each side."),n.length&&e.indexOf(n[0].name)!==0&&console.error("The left sticky column should be the first one in a row"),r.length&&e.indexOf(r[0].name)!==e.length-1&&console.error("The Right sticky column should be the last one in a row")};var Ig={exports:{}};/**
|
|
2882
2884
|
* @license
|
|
2883
2885
|
* Lodash <https://lodash.com/>
|
|
2884
2886
|
* Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
|
|
@@ -2922,7 +2924,7 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
2922
2924
|
}
|
|
2923
2925
|
`,V6e=({rowData:e,onRowAction:t})=>{var n;const r=k.useCallback(()=>{t&&t(e.id,"remove",e)},[e,t]);return((n=e==null?void 0:e.product)==null?void 0:n.type)==="virtual"?b.jsx(rn,{id:"dataGrid.columnLot.NA",message:"N/A"}):b.jsx(B6e,{children:b.jsxs(F6e,{onClick:r,children:[b.jsx(pr,{icon:"deleteX",size:"12px"}),b.jsx(rn,{id:"dataGrid.deleteItem",message:"Delete"})]})})},j6e=oe(aN)`
|
|
2924
2926
|
text-decoration: underline;
|
|
2925
|
-
`,W6e=e=>b.jsx(zn,{...e,appearance:"
|
|
2927
|
+
`,W6e=e=>b.jsx(zn,{...e,appearance:"primary",variant:"link"}),H6e=oe.div`
|
|
2926
2928
|
display: flex;
|
|
2927
2929
|
justify-content: center;
|
|
2928
2930
|
width: 100%;
|
|
@@ -2958,7 +2960,7 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
2958
2960
|
font-weight: semiBold;
|
|
2959
2961
|
.default {
|
|
2960
2962
|
height: 24px;
|
|
2961
|
-
padding: 2px 8px;
|
|
2963
|
+
padding: 2px 8px !important;
|
|
2962
2964
|
}
|
|
2963
2965
|
.small {
|
|
2964
2966
|
height: 18px;
|
|
@@ -2986,11 +2988,11 @@ function print() { __p += __j.call(arguments, '') }
|
|
|
2986
2988
|
`,U6e=oe.span`
|
|
2987
2989
|
text-overflow: ellipsis;
|
|
2988
2990
|
overflow: hidden;
|
|
2989
|
-
`,J6e={neutralBold:"neutral300",neutralSubtle:"neutral20",blueBold:"blue70",blueSubtle:"blue20",tealBold:"teal60",tealSubtle:"teal20",greenBold:"green60",greenSubtle:"green20",orangeBold:"orange60",orangeSubtle:"orange20",yellowBold:"yellow60",yellowSubtle:"yellow20",pinkBold:"magenta60",pinkSubtle:"magenta20",purpleBold:"purple60",purpleSubtle:"purple20",redBold:"red60",redSubtle:"red20"},X6e={neutralBold:"white",neutralSubtle:"typoPrimary",blueBold:"white",blueSubtle:"blue80",tealBold:"white",tealSubtle:"teal90",greenBold:"white",greenSubtle:"green80",orangeBold:"white",orangeSubtle:"orange80",yellowBold:"typoPrimary",yellowSubtle:"typoPrimary",pinkBold:"white",pinkSubtle:"magenta80",purpleBold:"white",purpleSubtle:"purple80",redBold:"white",redSubtle:"red80"},q6e=({children:e,appearance:t,size:r="default",prefix:
|
|
2991
|
+
`,J6e={neutralBold:"neutral300",neutralSubtle:"neutral20",blueBold:"blue70",blueSubtle:"blue20",tealBold:"teal60",tealSubtle:"teal20",greenBold:"green60",greenSubtle:"green20",orangeBold:"orange60",orangeSubtle:"orange20",yellowBold:"yellow60",yellowSubtle:"yellow20",pinkBold:"magenta60",pinkSubtle:"magenta20",purpleBold:"purple60",purpleSubtle:"purple20",redBold:"red60",redSubtle:"red20"},X6e={neutralBold:"white",neutralSubtle:"typoPrimary",blueBold:"white",blueSubtle:"blue80",tealBold:"white",tealSubtle:"teal90",greenBold:"white",greenSubtle:"green80",orangeBold:"white",orangeSubtle:"orange80",yellowBold:"typoPrimary",yellowSubtle:"typoPrimary",pinkBold:"white",pinkSubtle:"magenta80",purpleBold:"white",purpleSubtle:"purple80",redBold:"white",redSubtle:"red80"},q6e=({children:e,appearance:t,size:r="default",className:n,prefix:i})=>{const o=vt(),l=ne.color(t?J6e[t]:"transparent")({theme:o}),u=ne.color(t?X6e[t]:"typoPrimary")({theme:o}),c=i?`${i}Label`:"label";return b.jsx(Z6e,{$bgcolor:l,$fontColor:u,"data-cy":c,children:b.jsx(U6e,{className:r+" "+n,children:e})})},Q6e=oe.div`
|
|
2990
2992
|
display: flex;
|
|
2991
2993
|
justify-content: flex-start;
|
|
2992
2994
|
width: 100%;
|
|
2993
|
-
`,K6e=({value:e,enumObj:t,appearanceMap:r,size:n})=>{const i=k.useMemo(()=>t[e]?t[e]():e,[t,e]),o=k.useMemo(()=>({appearance:r[e]}),[r,e]);return i?b.jsx(Q6e,{children:b.jsx(q6e,{
|
|
2995
|
+
`,K6e=({value:e,enumObj:t,appearanceMap:r,size:n})=>{const i=k.useMemo(()=>t[e]?t[e]():e,[t,e]),o=k.useMemo(()=>({appearance:r[e]}),[r,e]);return i?b.jsx(Q6e,{children:b.jsx(q6e,{className:"cell",...o,size:n,prefix:"grid",children:i})}):null},$6e=oe.div`
|
|
2994
2996
|
text-align: center;
|
|
2995
2997
|
overflow: hidden;
|
|
2996
2998
|
text-overflow: ellipsis;
|