@mailstep/design-system 0.8.22 → 0.8.23-beta.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/package.json +1 -1
- package/ui/Blocks/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js +1 -2
- package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js +3 -2
- package/ui/Blocks/CommonGrid/components/MobileFilterModal.js +1 -1
- package/ui/Blocks/CommonGrid/components/MobileSortModal.js +1 -1
- package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js +1 -1
- package/ui/Blocks/CommonGrid/styles.js +7 -10
- package/ui/Elements/Select/Select.js +4 -4
- package/ui/Elements/Select/components/ConnectedMenu.js +2 -3
- package/ui/Elements/Select/components/CountMultiValue.d.ts +10 -1
- package/ui/Elements/Select/components/CountMultiValue.js +15 -6
- package/ui/Elements/Select/components/DropdownIndicator.d.ts +6 -1
- package/ui/Elements/Select/components/DropdownIndicator.js +3 -2
- package/ui/Elements/Select/components/IconValueContainer.js +1 -1
- package/ui/Elements/Select/themes/index.d.ts +1 -1
- package/ui/Elements/Select/themes/index.js +4 -14
- package/ui/Elements/Select/themes/selectStyles.js +18 -22
- package/ui/Elements/Select/types.d.ts +6 -6
- package/ui/Elements/SingleSelect/SingleSelect.d.ts +2 -2
- package/ui/Elements/SingleSelect/SingleSelect.js +11 -20
- package/ui/index.es.js +8634 -8653
- package/ui/index.umd.js +394 -379
- package/ui/Elements/Select/components/ResetAll.d.ts +0 -5
- package/ui/Elements/Select/components/ResetAll.js +0 -15
package/package.json
CHANGED
|
@@ -57,7 +57,6 @@ var DatePickerRange = function (props) {
|
|
|
57
57
|
var _e = useState((_a = value === null || value === void 0 ? void 0 : value[0]) !== null && _a !== void 0 ? _a : undefined), startRangeValue = _e[0], setStartRangeValue = _e[1];
|
|
58
58
|
var _f = useState((_b = value === null || value === void 0 ? void 0 : value[1]) !== null && _b !== void 0 ? _b : undefined), endRangeValue = _f[0], setEndRangeValue = _f[1];
|
|
59
59
|
var timeFormat = filterTime ? 'HH:mm' : false;
|
|
60
|
-
var placeholder = i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' });
|
|
61
60
|
var cleanValue = React.useMemo(function () { return getCleanValues(value); }, [value]);
|
|
62
61
|
var initialViewDate = useMemo(function () {
|
|
63
62
|
if (cleanValue[0] && cleanValue[1]) {
|
|
@@ -106,7 +105,7 @@ var DatePickerRange = function (props) {
|
|
|
106
105
|
// Check if the second value is not selected and the first value is the same as the initial value
|
|
107
106
|
var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
|
|
108
107
|
var ref = useClickOutside({ onClose: onClose });
|
|
109
|
-
return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name,
|
|
108
|
+
return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, type: "text", icon: "calendar", value: pickerRangeToString(cleanValue, others), label: props.label, onFocus: openPicker, iconOnClick: openPicker, onClear: clear, error: error, readOnly: true }), _jsx(OverlayComponent, { children: _jsx(_Fragment, { children: isOpen && (_jsxs(RangeWrapper, { "$compact": compact, className: "ignore-element-for-closing-hook", children: [_jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: (_c = cleanValue[0]) !== null && _c !== void 0 ? _c : '', initialViewDate: initialViewDate[0], secondValue: endRangeValue, onChange: setDateFrom, others: others === null || others === void 0 ? void 0 : others[0], onChangeOthers: handleOthersChangeFrom, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.from', message: 'From' }), isValidDate: isValidDateFrom, input: false, spaceAround: !compact, open: true })), _jsx(DatePicker, __assign({}, rest, { timeFormat: timeFormat, value: secondDatePickerValue, initialViewDate: initialViewDate[1], secondValue: startRangeValue, onChange: setDateTo, others: others === null || others === void 0 ? void 0 : others[1], onChangeOthers: handleOthersChangeTo, icon: false, label: isOpen && i18n._({ id: 'dataGrid.filterCell.to', message: 'To' }), isValidDate: isValidDateTo, input: false, spaceAround: !compact, open: true, isSecondDatePicker: true }))] })) }) })] }));
|
|
110
109
|
};
|
|
111
110
|
export default DatePickerRange;
|
|
112
111
|
var templateObject_1, templateObject_2;
|
|
@@ -63,6 +63,7 @@ import isArray from 'lodash/isArray';
|
|
|
63
63
|
import uniqBy from 'lodash/uniqBy';
|
|
64
64
|
import { isOptionArray } from './guards';
|
|
65
65
|
var minColumnWidth = 120;
|
|
66
|
+
var noOptionsMessage = function () { return null; };
|
|
66
67
|
var SelectFilter = function (_a) {
|
|
67
68
|
var onChange = _a.onChange, _b = _a.isClearable, isClearable = _b === void 0 ? true : _b, disabled = _a.disabled, placeholder = _a.placeholder, _c = _a.showValue, showValue = _c === void 0 ? true : _c, columnWidth = _a.columnWidth, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, _d = _a.withNotEqComparator, withNotEqComparator = _d === void 0 ? true : _d;
|
|
68
69
|
var _e = useState([]), loadedOptions = _e[0], setLoadedOptions = _e[1];
|
|
@@ -104,9 +105,9 @@ var SelectFilter = function (_a) {
|
|
|
104
105
|
var isSelectClearable = isWide ? isClearable : false;
|
|
105
106
|
var placeholderValue = placeholder || (isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined);
|
|
106
107
|
if (isMulti) {
|
|
107
|
-
var placeholderIcon = isWide &&
|
|
108
|
+
var placeholderIcon = isWide && withNotEqComparator ? (isNotEq ? 'notEqual' : 'equals') : null;
|
|
108
109
|
var selectValue = showValue ? (isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value) : undefined;
|
|
109
|
-
return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: selectValue, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: placeholderValue, noOptionsMessage:
|
|
110
|
+
return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: selectValue, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: placeholderValue, noOptionsMessage: noOptionsMessage, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: placeholderIcon, onIconClick: withNotEqComparator ? handleIconClick : undefined, optionVariant: "checkbox", multiLabelVariant: "count", shortVariant: "join", isMulti: true, disabled: disabled, isClearable: isSelectClearable }));
|
|
110
111
|
}
|
|
111
112
|
return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: showValue ? value : undefined, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: placeholderValue, placeholderIcon: isWide ? undefined : null, isClearable: isSelectClearable, disabled: disabled }));
|
|
112
113
|
};
|
|
@@ -54,7 +54,7 @@ var MobileFilterModal = function (_a) {
|
|
|
54
54
|
setLocalFilterValues({});
|
|
55
55
|
onClearSettings === null || onClearSettings === void 0 ? void 0 : onClearSettings();
|
|
56
56
|
}, [onClearSettings]);
|
|
57
|
-
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
|
|
57
|
+
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), onCancel: handleReset, cancelLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), onConfirm: handleApplyFilters, confirmLabel: _jsx(Trans, { id: "dataGrid.filter", message: "Filter" }), hasFooter: hasActiveFilters, width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "16px", p: "8px 4px", children: filterableColumns.map(function (column) {
|
|
58
58
|
var filterType = createFilterType(column);
|
|
59
59
|
var filterConfig = filters === null || filters === void 0 ? void 0 : filters[filterType];
|
|
60
60
|
var defaultComparators = comparators === null || comparators === void 0 ? void 0 : comparators[filterType];
|
|
@@ -29,6 +29,6 @@ var MobileSortModal = function (_a) {
|
|
|
29
29
|
var handleClearSort = useCallback(function () {
|
|
30
30
|
onResetSorting === null || onResetSorting === void 0 ? void 0 : onResetSorting();
|
|
31
31
|
}, [onResetSorting]);
|
|
32
|
-
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
|
|
32
|
+
return (_jsx(Modal, { isShown: isShown, onClose: onClose, title: _jsx(Trans, { id: "dataGrid.sort", message: "Sort" }), onConfirm: activeSortedColumn ? handleClearSort : undefined, confirmLabel: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset" }), width: "narrow", ignoreClickOutside: true, children: _jsx(x.div, { display: "flex", flexDirection: "column", gap: "8px", p: "8px 4px", children: sortableColumns.map(function (column) { return (_jsx(SortRow, { column: column, currentDirection: getCurrentDirection(column), onCycle: handleCycle }, column.name)); }) }) }));
|
|
33
33
|
};
|
|
34
34
|
export default MobileSortModal;
|
|
@@ -63,7 +63,7 @@ export default {
|
|
|
63
63
|
title: 'Blocks/CommonGrid',
|
|
64
64
|
decorators: [withRedux]
|
|
65
65
|
};
|
|
66
|
-
export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(
|
|
66
|
+
export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, rowsData: createRandomData(100), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
|
|
67
67
|
ComplexWithPaginationAndRedux.story = {
|
|
68
68
|
name: 'Complex, with pagination and redux'
|
|
69
69
|
};
|
|
@@ -6,32 +6,29 @@ import { gridRowHeight, gridFooterHeight, gridButtonStripHeight, gridHeadHeight,
|
|
|
6
6
|
import styled, { x } from '@xstyled/styled-components';
|
|
7
7
|
import { th } from '@xstyled/system';
|
|
8
8
|
import CommonGrid from './CommonGrid';
|
|
9
|
-
export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position:
|
|
9
|
+
export var BottomWrapper = styled(x.div)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n padding: ", ";\n width: 100%;\n height: ", "px;\n background-color: bgLightGray;\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n }\n"], ["\n position: relative;\n z-index: 2;\n flex-shrink: 0;\n padding: ", ";\n width: 100%;\n height: ", "px;\n background-color: bgLightGray;\n\n @media print {\n display: none;\n }\n\n @media (min-width: 1024px) {\n position: relative;\n bottom: 0;\n margin-bottom: 0;\n }\n"])), function (_a) {
|
|
10
10
|
var withPagination = _a.withPagination;
|
|
11
11
|
return (withPagination ? '10px 0' : '0px');
|
|
12
12
|
}, function (_a) {
|
|
13
13
|
var withPagination = _a.withPagination;
|
|
14
14
|
return (withPagination ? gridFooterHeight : 0);
|
|
15
15
|
});
|
|
16
|
-
export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100%;\n"])));
|
|
17
|
-
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height:
|
|
18
|
-
var withPagination = _a.withPagination;
|
|
19
|
-
return (withPagination ? gridFooterHeight : 0);
|
|
20
|
-
}, function (_a) {
|
|
16
|
+
export var ContentContainer = styled(x.div)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100svh;\n overflow: hidden;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow: visible;\n }\n"], ["\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n background-color: white;\n box-shadow: gridShadow;\n border-radius: 8px;\n flex-grow: 1;\n height: 100svh;\n overflow: hidden;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow: visible;\n }\n"])));
|
|
17
|
+
export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n flex: 1;\n min-height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n display: block;\n height: calc(100% - ", "px);\n flex: unset;\n min-height: unset;\n overflow: visible;\n }\n"], ["\n flex: 1;\n min-height: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n\n @media (min-width: 1024px) {\n display: block;\n height: calc(100% - ", "px);\n flex: unset;\n min-height: unset;\n overflow: visible;\n }\n"])), function (_a) {
|
|
21
18
|
var withPagination = _a.withPagination;
|
|
22
19
|
return (withPagination ? gridFooterHeight : 0);
|
|
23
20
|
});
|
|
24
21
|
export var StyledButtonStrip = styled(x.div)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: relative;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: auto;\n padding: 10px;\n flex-wrap: wrap;\n z-index: 3;\n\n @media (min-width: 768px) {\n min-height: ", "px;\n padding: 18px 20px;\n }\n"], ["\n position: relative;\n display: flex;\n justify-content: space-between;\n width: 100%;\n min-height: auto;\n padding: 10px;\n flex-wrap: wrap;\n z-index: 3;\n\n @media (min-width: 768px) {\n min-height: ", "px;\n padding: 18px 20px;\n }\n"])), gridButtonStripHeight);
|
|
25
|
-
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n
|
|
26
|
-
var withButtonStrip = _a.withButtonStrip;
|
|
27
|
-
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
28
|
-
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
22
|
+
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n\n & .filterRow {\n display: none;\n }\n\n @media (min-width: 1023px) {\n & .gridHead {\n height: ", "px;\n }\n & .filterRow {\n display: flex;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n flex: 1;\n min-height: 0;\n\n @media (min-width: 1024px) {\n flex: unset;\n min-height: unset;\n height: calc(100% - ", "px);\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n height: 100%;\n overflow-y: auto;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"], ["\n & .cell {\n padding: 0 4px;\n }\n & .dataRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: normal;\n border-bottom: 1px solid;\n border-color: lightGray3;\n height: ", "px;\n }\n & .gridHead {\n height: ", "px;\n background-color: neutral20;\n padding-bottom: 8px;\n position: sticky;\n top: -1px;\n z-index: 2;\n border-top: 1px solid ", ";\n }\n\n & .filterRow {\n display: none;\n }\n\n @media (min-width: 1023px) {\n & .gridHead {\n height: ", "px;\n }\n & .filterRow {\n display: flex;\n }\n }\n & .headRow {\n font-size: 12px;\n font-family: ", ";\n color: typoPrimary;\n font-weight: bold;\n border-bottom: none; // TODO fix in common-grid\n\n & .cell {\n overflow: hidden;\n max-height: 32px;\n position: relative;\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n }\n\n & .filterRow {\n & .cell {\n overflow: visible;\n }\n\n & .cell > div {\n width: 100%; // TODO fix in common-grid\n }\n\n & .sticky {\n background-color: bgLightGray1;\n }\n border-bottom: none; // TODO fix in common-grid\n }\n\n & .body {\n flex-grow: 1;\n }\n\n flex: 1;\n min-height: 0;\n\n @media (min-width: 1024px) {\n flex: unset;\n min-height: unset;\n height: calc(100% - ", "px);\n }\n\n & .gridWrapper {\n background-color: ", ";\n width: auto;\n height: 100%;\n overflow-y: auto;\n\n @media (min-width: 1024px) {\n height: 100%;\n overflow-y: auto;\n }\n @media print {\n margin: 0;\n width: 100%;\n height: auto;\n overflow-x: hidden;\n }\n }\n\n & .fullWidthGrid > .gridWrapper > div {\n width: 100% !important;\n }\n\n & .paginatorWrapper,\n & .buttonsStrip {\n @media print {\n display: none;\n }\n }\n & .cell {\n padding-left: 4px;\n padding-right: 4px;\n @media print {\n white-space: unset;\n }\n }\n\n .dataRow {\n &.grayedOut {\n background: lightGray1;\n }\n\n .sticky-right,\n .sticky-left {\n background: white;\n }\n\n .sticky-right {\n border-left: 1px solid #dfe1e6;\n }\n\n .sticky-left {\n border-right: 1px solid #dfe1e6;\n }\n\n &:hover,\n &.checked,\n &.selected {\n background-color: red30;\n }\n }\n\n .dataRow:nth-child(even) {\n .sticky-left,\n .sticky-right {\n background-color: bgLightGray;\n }\n }\n\n @media print {\n .filterRow .sticky {\n display: none;\n }\n\n .headRow .sticky {\n display: none;\n }\n\n .dataRow .sticky {\n display: none;\n }\n }\n\n .resizer {\n z-index: unset;\n }\n\n // hotfix table head\n .cell .sortable {\n display: flex;\n align-items: center;\n padding-right: 2px;\n }\n\n .sticky {\n position: sticky !important;\n z-index: 1;\n }\n\n .sticky-left {\n left: 0;\n }\n\n .sticky-right {\n right: 0;\n }\n"])), th('fonts.primary'), gridRowHeight, function (_a) {
|
|
29
23
|
var hasGroups = _a.hasGroups;
|
|
30
24
|
return gridHeadHeight + (hasGroups ? gridFilterHeight : 0);
|
|
31
25
|
}, th('colors.lightGray6'), function (_a) {
|
|
32
26
|
var hasGroupsOrFilters = _a.hasGroupsOrFilters;
|
|
33
27
|
return gridHeadHeight + (hasGroupsOrFilters ? gridFilterHeight : 0);
|
|
34
28
|
}, th('fonts.primary'), function (_a) {
|
|
29
|
+
var withButtonStrip = _a.withButtonStrip;
|
|
30
|
+
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
31
|
+
}, function (_a) {
|
|
35
32
|
var theme = _a.theme;
|
|
36
33
|
return theme.colors.white;
|
|
37
34
|
});
|
|
@@ -69,7 +69,7 @@ var emptyOptions = [];
|
|
|
69
69
|
var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
|
|
70
70
|
var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
|
|
71
71
|
var Select = function (_a) {
|
|
72
|
-
var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.
|
|
72
|
+
var label = _a.label, name = _a.name, _b = _a.value, value = _b === void 0 ? '' : _b, _c = _a.options, options = _c === void 0 ? emptyOptions : _c, defaultOptions = _a.defaultOptions, loadOptions = _a.loadOptions, onChange = _a.onChange, onBlur = _a.onBlur, error = _a.error, isInvalid = _a.isInvalid, isLoading = _a.isLoading, isDarkPlaceholderText = _a.isDarkPlaceholderText, _d = _a.spaceAround, spaceAround = _d === void 0 ? false : _d, disabled = _a.disabled, onInputChange = _a.onInputChange, isSearchable = _a.isSearchable, isMulti = _a.isMulti, className = _a.className, _e = _a.useSimplifiedOptions, useSimplifiedOptions = _e === void 0 ? false : _e, _f = _a.showSelectAllButton, showSelectAllButton = _f === void 0 ? false : _f, _g = _a.shortValues, shortValues = _g === void 0 ? true : _g, _h = _a.shortVariant, shortVariant = _h === void 0 ? 'block' : _h, style = _a.style, optionVariant = _a.optionVariant, multiLabelVariant = _a.multiLabelVariant, containerVariant = _a.containerVariant, placeholder = _a.placeholder, placeholderIcon = _a.placeholderIcon, innerRef = _a.innerRef, maxMenuHeight = _a.maxMenuHeight, getOptionValue = _a.getOptionValue, onIconClick = _a.onIconClick, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "shortValues", "shortVariant", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "onIconClick"]);
|
|
73
73
|
var isAsync = !!loadOptions;
|
|
74
74
|
if (showSelectAllButton && !isMulti) {
|
|
75
75
|
console.error('CheckboxSelect incompatible props');
|
|
@@ -84,8 +84,8 @@ var Select = function (_a) {
|
|
|
84
84
|
}
|
|
85
85
|
}, [onChange]);
|
|
86
86
|
var icon = containerVariant === 'search' && !placeholderIcon && placeholderIcon !== null ? 'search' : placeholderIcon || undefined;
|
|
87
|
-
var modifiedMaxMenuHeight =
|
|
88
|
-
var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton
|
|
87
|
+
var modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
|
|
88
|
+
var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
|
|
89
89
|
var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
|
|
90
90
|
var selectedOption;
|
|
91
91
|
var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
|
|
@@ -106,6 +106,6 @@ var Select = function (_a) {
|
|
|
106
106
|
}
|
|
107
107
|
}); }); } : undefined;
|
|
108
108
|
}, [loadOptions]);
|
|
109
|
-
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant
|
|
109
|
+
return (_jsxs(SpaceAroundWrap, { spaceAround: spaceAround, className: className, children: [_jsxs(Wrapper, { children: [label && _jsx(FieldLabel, { htmlFor: name, children: label }), _jsx(RenderComponent, __assign({ id: name, name: name, options: options, loadOptions: handleLoadOptions, defaultOptions: defaultOptions, value: selectedOption, onChange: onChange, onBlur: onBlur, isDisabled: disabled || isLoading, isLoading: isLoading, isInvalid: isInvalid !== undefined ? isInvalid : !!error, isDarkPlaceholderText: isDarkPlaceholderText, placeholder: placeholder || i18n._({ id: 'components.dropdown.placeholder', message: 'Select...' }), styles: customStyles, theme: customTheme, icon: icon, onIconClick: onIconClick, hideSelectedOptions: !!(isMulti && multiLabelVariant !== 'count'), onInputChange: onInputChange, isSearchable: isAsync || isSearchable, isMulti: isMulti, classNamePrefix: "react-select", components: customComponents, closeMenuOnSelect: isMulti ? false : undefined, noOptionsMessage: noOptionsMessage }, passTroughProps, { ref: innerRef, tabIndex: null, systemTheme: theme, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues, shortVariant: shortVariant, containerVariant: containerVariant }))] }), error && _jsx(ErrorMessage, { children: error })] }));
|
|
110
110
|
};
|
|
111
111
|
export default Select;
|
|
@@ -12,17 +12,16 @@ var __assign = (this && this.__assign) || function () {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { useMemo } from 'react';
|
|
14
14
|
import { components as selectComponents } from 'react-select';
|
|
15
|
-
import ResetAll from '../components/ResetAll';
|
|
16
15
|
import SelectAll from '../components/SelectAll';
|
|
17
16
|
var ConnectedMenu = function (props) {
|
|
18
17
|
var theme = props.theme;
|
|
19
|
-
var _a = props.selectProps,
|
|
18
|
+
var _a = props.selectProps, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
|
|
20
19
|
// because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
|
|
21
20
|
// we need to specify them here by children
|
|
22
21
|
var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
|
|
23
22
|
var _b = _a.props, value = _b.value, label = _b.label;
|
|
24
23
|
return ({ label: label, value: value });
|
|
25
24
|
}); }, [props.children]);
|
|
26
|
-
return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children
|
|
25
|
+
return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children] })));
|
|
27
26
|
};
|
|
28
27
|
export default ConnectedMenu;
|
|
@@ -1,2 +1,11 @@
|
|
|
1
|
-
|
|
1
|
+
import { MultiValueProps } from 'react-select';
|
|
2
|
+
|
|
3
|
+
type CountMultiValueProps = MultiValueProps & {
|
|
4
|
+
data: unknown;
|
|
5
|
+
selectProps: MultiValueProps<unknown, boolean, any>['selectProps'] & {
|
|
6
|
+
shortValues?: boolean;
|
|
7
|
+
shortVariant?: 'block' | 'join';
|
|
8
|
+
};
|
|
9
|
+
};
|
|
10
|
+
declare const CountMultiValue: (props: CountMultiValueProps) => React.ReactNode;
|
|
2
11
|
export default CountMultiValue;
|
|
@@ -18,20 +18,29 @@ import { components as selectComponents } from 'react-select';
|
|
|
18
18
|
import styled, { th } from '@xstyled/styled-components';
|
|
19
19
|
// MultiValue container with count of selected options
|
|
20
20
|
var StyledNumber = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"], ["\n background: ", ";\n height: 25px;\n justify-content: center;\n align-items: center;\n display: flex;\n border-radius: md;\n padding: 2px 6px;\n"])), th.color('lightGray7'));
|
|
21
|
+
var JoinedMultiValue = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n white-space: nowrap;\n position: absolute;\n color: gray3;\n padding-left: ", ";\n"], ["\n white-space: nowrap;\n position: absolute;\n color: gray3;\n padding-left: ", ";\n"])), function (_a) {
|
|
22
|
+
var isFocused = _a.isFocused;
|
|
23
|
+
return (isFocused ? '8px' : '0');
|
|
24
|
+
});
|
|
21
25
|
var CountMultiValue = function (props) {
|
|
22
|
-
var _a
|
|
26
|
+
var _a;
|
|
23
27
|
var shortValues = props.selectProps.shortValues;
|
|
24
28
|
var selectVal = props.selectProps.value;
|
|
25
29
|
var inputVal = props.selectProps.inputValue;
|
|
30
|
+
var shortVariant = props.selectProps.shortVariant;
|
|
31
|
+
var data = props.data;
|
|
32
|
+
var isFirst = (data === null || data === void 0 ? void 0 : data.value) === ((_a = selectVal[0]) === null || _a === void 0 ? void 0 : _a.value);
|
|
33
|
+
var menuIsOpen = props.selectProps.menuIsOpen;
|
|
26
34
|
if (!shortValues) {
|
|
27
35
|
return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
|
|
28
36
|
}
|
|
29
|
-
if (!
|
|
30
|
-
return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
|
|
31
|
-
}
|
|
32
|
-
else {
|
|
37
|
+
if (!isFirst || inputVal) {
|
|
33
38
|
return null;
|
|
34
39
|
}
|
|
40
|
+
if (shortVariant === 'join') {
|
|
41
|
+
return (_jsxs(JoinedMultiValue, { isFocused: menuIsOpen, children: [selectVal.length > 1 ? "(".concat(Number(selectVal.length), ") ") : '', selectVal.map(function (option) { return option.label; }).join(', ')] }));
|
|
42
|
+
}
|
|
43
|
+
return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
|
|
35
44
|
};
|
|
36
45
|
export default CountMultiValue;
|
|
37
|
-
var templateObject_1;
|
|
46
|
+
var templateObject_1, templateObject_2;
|
|
@@ -1,2 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
import { DropdownIndicatorProps } from 'react-select';
|
|
2
|
+
|
|
3
|
+
type DropdownIndicatorCustomProps = DropdownIndicatorProps & {
|
|
4
|
+
theme: any;
|
|
5
|
+
};
|
|
6
|
+
export declare const DropdownIndicator: (props: DropdownIndicatorCustomProps) => any;
|
|
2
7
|
export default DropdownIndicator;
|
|
@@ -15,14 +15,15 @@ var __assign = (this && this.__assign) || function () {
|
|
|
15
15
|
};
|
|
16
16
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
17
|
import { components as selectComponents } from 'react-select';
|
|
18
|
-
import styled from '@xstyled/styled-components';
|
|
19
18
|
import { ArrowDown } from '../../Icon/icons/ArrowDown';
|
|
20
19
|
import { ArrowUp } from '../../Icon/icons/ArrowUp';
|
|
20
|
+
import styled from '@xstyled/styled-components';
|
|
21
21
|
// Option with chevron form new design
|
|
22
22
|
var ChevronDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n align-self: center;\n display: flex;\n"], ["\n align-self: center;\n display: flex;\n"])));
|
|
23
23
|
export var DropdownIndicator = function (props) {
|
|
24
24
|
var _a = props.selectProps, menuIsOpen = _a.menuIsOpen, name = _a.name;
|
|
25
|
-
|
|
25
|
+
var iconColor = props.theme.colors.placeholderTextColor;
|
|
26
|
+
return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name || '', "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px", stroke: iconColor }) : _jsx(ArrowDown, { width: "16px", stroke: iconColor }) }) })));
|
|
26
27
|
};
|
|
27
28
|
export default DropdownIndicator;
|
|
28
29
|
var templateObject_1;
|
|
@@ -29,7 +29,7 @@ import { components } from 'react-select';
|
|
|
29
29
|
import Icon from '../../Icon/Icon';
|
|
30
30
|
import styled from '@xstyled/styled-components';
|
|
31
31
|
// Value container with icon
|
|
32
|
-
var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-left:
|
|
32
|
+
var IconDiv = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding-left: 7px;\n margin-right: -3px;\n align-self: center;\n & > * {\n color: ", ";\n }\n"], ["\n padding-left: 7px;\n margin-right: -3px;\n align-self: center;\n & > * {\n color: ", ";\n }\n"])), function (_a) {
|
|
33
33
|
var hasValue = _a.hasValue;
|
|
34
34
|
return (hasValue ? 'black' : '#a3b3c1');
|
|
35
35
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { StylesConfig, SelectComponentsConfig } from 'react-select';
|
|
2
2
|
import { SelectProps } from '../types';
|
|
3
3
|
|
|
4
|
-
export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton']
|
|
4
|
+
export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
|
|
@@ -8,14 +8,13 @@ import IconValueContainer from '../components/IconValueContainer';
|
|
|
8
8
|
import SimplifiedOption from '../components/SimplifiedOption';
|
|
9
9
|
import { useTheme } from '@xstyled/styled-components';
|
|
10
10
|
import { getCustomTheme as getFormCustomTheme, CustomStyles as SelectCustomStyles } from './selectStyles';
|
|
11
|
-
export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton
|
|
11
|
+
export var useStylesAndComponents = function (style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton) {
|
|
12
12
|
if (style === void 0) { style = 'form'; }
|
|
13
13
|
if (optionVariant === void 0) { optionVariant = 'default'; }
|
|
14
14
|
if (multiLabelVariant === void 0) { multiLabelVariant = 'default'; }
|
|
15
15
|
if (containerVariant === void 0) { containerVariant = 'default'; }
|
|
16
16
|
if (useSimplifiedOptions === void 0) { useSimplifiedOptions = false; }
|
|
17
17
|
if (showSelectAllButton === void 0) { showSelectAllButton = false; }
|
|
18
|
-
if (showResetGridButton === void 0) { showResetGridButton = false; }
|
|
19
18
|
var systemTheme = useTheme();
|
|
20
19
|
return useMemo(function () {
|
|
21
20
|
var components = {
|
|
@@ -28,25 +27,16 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
|
|
|
28
27
|
if (containerVariant === 'search') {
|
|
29
28
|
components.DropdownIndicator = null;
|
|
30
29
|
}
|
|
31
|
-
if (
|
|
30
|
+
if (showSelectAllButton) {
|
|
32
31
|
components.MenuList = ConnectedMenu;
|
|
33
32
|
}
|
|
34
33
|
components.Input = CustomInput;
|
|
35
|
-
var themes = getFormCustomTheme(systemTheme, optionVariant, style
|
|
34
|
+
var themes = getFormCustomTheme(systemTheme, optionVariant, style === 'gridFilter');
|
|
36
35
|
var styles = SelectCustomStyles;
|
|
37
36
|
components.Option = ChevronOption;
|
|
38
37
|
// performance reasons
|
|
39
38
|
if (useSimplifiedOptions)
|
|
40
39
|
components.Option = SimplifiedOption;
|
|
41
40
|
return [components, themes, styles];
|
|
42
|
-
}, [
|
|
43
|
-
multiLabelVariant,
|
|
44
|
-
containerVariant,
|
|
45
|
-
showResetGridButton,
|
|
46
|
-
showSelectAllButton,
|
|
47
|
-
style,
|
|
48
|
-
useSimplifiedOptions,
|
|
49
|
-
systemTheme,
|
|
50
|
-
optionVariant
|
|
51
|
-
]);
|
|
41
|
+
}, [multiLabelVariant, containerVariant, showSelectAllButton, style, useSimplifiedOptions, systemTheme, optionVariant]);
|
|
52
42
|
};
|
|
@@ -18,14 +18,14 @@ export var CustomStyles = {
|
|
|
18
18
|
var colors = theme.colors;
|
|
19
19
|
return __assign(__assign({}, styles), { borderColor: selectProps.isInvalid ? colors.primary : isFocused ? colors.inputTextColor : colors.inputBorderColor, backgroundColor: isDisabled ? colors.menuHoverBackgroundColor : colors.whiteBackgroundColor, boxShadow: theme.focusBoxShadow, borderRadius: theme.borderRadius, '& input': {
|
|
20
20
|
fontWeight: theme.textWeightNormal,
|
|
21
|
-
fontFamily: theme.font
|
|
21
|
+
fontFamily: theme.font
|
|
22
22
|
}, '&:hover': __assign(__assign({}, ((_b = styles['&:hover']) !== null && _b !== void 0 ? _b : {})), { borderColor: colors.inputBorderHoverColor }), fontSize: '14px', minWidth: 'min-content', '.inputIcon': {
|
|
23
|
-
color: isDisabled ? colors.defaultControlColor :
|
|
23
|
+
color: isDisabled ? colors.defaultControlColor : selectProps.value ? colors.inputTextColor : colors.defaultControlColor
|
|
24
24
|
} });
|
|
25
25
|
},
|
|
26
26
|
valueContainer: function (styles, _a) {
|
|
27
27
|
var theme = _a.theme;
|
|
28
|
-
return __assign(__assign({}, styles), { width: '50px', flexWrap: theme.flexWrap });
|
|
28
|
+
return __assign(__assign({}, styles), { width: '50px', paddingLeft: '7px', flexWrap: theme.flexWrap });
|
|
29
29
|
},
|
|
30
30
|
singleValue: function (styles, _a) {
|
|
31
31
|
var selectProps = _a.selectProps, theme = _a.theme, isDisabled = _a.isDisabled;
|
|
@@ -38,9 +38,9 @@ export var CustomStyles = {
|
|
|
38
38
|
multiValue: function (styles, state) {
|
|
39
39
|
var theme = state.theme;
|
|
40
40
|
return __assign(__assign({}, styles), { color: theme.colors.inputTextColor, fontWeight: theme.textWeightNormal, backgroundColor: '#E7EBEF', borderRadius: '4px', '& svg': {
|
|
41
|
-
color: theme.colors.inputTextColor
|
|
41
|
+
color: theme.colors.inputTextColor
|
|
42
42
|
}, ' > div': {
|
|
43
|
-
fontSize: '12px'
|
|
43
|
+
fontSize: '12px'
|
|
44
44
|
} });
|
|
45
45
|
},
|
|
46
46
|
multiValueLabel: function (styles) { return (__assign(__assign({}, styles), { fontSize: 'unset', padding: '5px' })); },
|
|
@@ -87,8 +87,8 @@ export var CustomStyles = {
|
|
|
87
87
|
? theme.colors.hoverToActiveOptionBackground
|
|
88
88
|
: !isDisabled
|
|
89
89
|
? theme.colors.menuHoverBackgroundColor
|
|
90
|
-
: undefined
|
|
91
|
-
}
|
|
90
|
+
: undefined
|
|
91
|
+
}
|
|
92
92
|
};
|
|
93
93
|
},
|
|
94
94
|
menu: function (styles, state) {
|
|
@@ -103,29 +103,24 @@ export var CustomStyles = {
|
|
|
103
103
|
height: '47px',
|
|
104
104
|
backgroundColor: theme.colors.defaultControlColor,
|
|
105
105
|
'&:hover': {
|
|
106
|
-
backgroundColor: theme.colors.dropdownIndicatorColor
|
|
107
|
-
}
|
|
106
|
+
backgroundColor: theme.colors.dropdownIndicatorColor
|
|
107
|
+
}
|
|
108
108
|
}, '::-webkit-scrollbar': {
|
|
109
|
-
width: '10px'
|
|
109
|
+
width: '10px'
|
|
110
110
|
}, '::-webkit-scrollbar-track': {
|
|
111
111
|
backgroundColor: theme.colors.menuHoverBackgroundColor,
|
|
112
|
-
borderRadius: '6px'
|
|
112
|
+
borderRadius: '6px'
|
|
113
113
|
} });
|
|
114
114
|
},
|
|
115
|
-
dropdownIndicator: function (styles
|
|
116
|
-
|
|
117
|
-
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', '& svg': {
|
|
118
|
-
stroke: isDisabled ? theme.colors.dropdownIndicatorColor : theme.colors.inputTextColor,
|
|
119
|
-
}, padding: '0px 5px 0px 0px', '@media (min-width: 1024px)': {
|
|
120
|
-
padding: '0px 10px 0px 1px',
|
|
121
|
-
} });
|
|
115
|
+
dropdownIndicator: function (styles) {
|
|
116
|
+
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: '0px 7px 0px 0px' });
|
|
122
117
|
},
|
|
123
118
|
clearIndicator: function (styles, state) {
|
|
124
|
-
var theme = state.theme;
|
|
125
|
-
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators
|
|
119
|
+
var theme = state.theme, selectProps = state.selectProps;
|
|
120
|
+
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators && selectProps.containerVariant !== 'search' ? '0px' : '0px 4px', color: theme.colors.clearIndicatorColor, cursor: 'pointer' });
|
|
126
121
|
},
|
|
127
122
|
indicatorSeparator: function () { return ({
|
|
128
|
-
display: 'none'
|
|
123
|
+
display: 'none'
|
|
129
124
|
}); }
|
|
130
125
|
};
|
|
131
126
|
export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
|
|
@@ -139,12 +134,13 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
|
|
|
139
134
|
inputDisabledColor: th.color('lightGray1')({ theme: theme }),
|
|
140
135
|
inputBorderColor: th.color('lightGray3')({ theme: theme }),
|
|
141
136
|
placeholderTextColor: th.color('lightGray3')({ theme: theme }),
|
|
137
|
+
clearIndicatorColor: th.color('lightGray4')({ theme: theme }),
|
|
142
138
|
defaultControlColor: th.color('lightGray5')({ theme: theme }),
|
|
143
139
|
disabledTextColor: th.color('lightGray6')({ theme: theme }),
|
|
144
140
|
dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
|
|
145
141
|
inputBorderHoverColor: th.color('gray5')({ theme: theme }),
|
|
146
142
|
activeOptionBackground: th.color('red20')({ theme: theme }),
|
|
147
|
-
hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
|
|
143
|
+
hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
|
|
148
144
|
};
|
|
149
145
|
return function (reactSelectTheme) {
|
|
150
146
|
return __assign(__assign({}, reactSelectTheme), { colors: customColors, focusBoxShadow: null, height: '38px', flexWrap: useFilterSubvariant ? 'nowrap' : 'wrap', textWeightNormal: th.fontWeight('normal')({ theme: theme }), optionVariant: optionVariant, borderRadius: th.radius('lg')({ theme: theme }), font: th.font('primary')({ theme: theme }), narrowIndicators: !!useFilterSubvariant });
|
|
@@ -25,21 +25,21 @@ export type SelectProps = {
|
|
|
25
25
|
loadOptions?: (text: string) => Promise<Option[]>;
|
|
26
26
|
defaultOptions?: Option[];
|
|
27
27
|
onChange: (value: ValueType) => void;
|
|
28
|
-
onBlur?:
|
|
28
|
+
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
29
29
|
error?: string;
|
|
30
30
|
index?: [];
|
|
31
31
|
isInvalid?: boolean;
|
|
32
32
|
isLoading?: boolean;
|
|
33
33
|
spaceAround?: SpaceAround;
|
|
34
34
|
disabled?: boolean;
|
|
35
|
-
onInputChange?:
|
|
35
|
+
onInputChange?: (value: string) => void;
|
|
36
36
|
useSimplifiedOptions?: boolean;
|
|
37
37
|
showSelectAllButton?: boolean;
|
|
38
|
-
showResetGridButton?: boolean;
|
|
39
38
|
isClearable?: boolean;
|
|
40
39
|
isSearchable?: boolean;
|
|
41
40
|
isMulti?: boolean;
|
|
42
41
|
shortValues?: boolean;
|
|
42
|
+
shortVariant?: 'block' | 'join';
|
|
43
43
|
menuIsOpen?: boolean;
|
|
44
44
|
defaultMenuIsOpen?: boolean;
|
|
45
45
|
isDarkPlaceholderText?: boolean;
|
|
@@ -51,11 +51,10 @@ export type SelectProps = {
|
|
|
51
51
|
innerRef?: RefObject<HTMLElement>;
|
|
52
52
|
className?: string;
|
|
53
53
|
maxMenuHeight?: number;
|
|
54
|
-
|
|
55
|
-
getOptionValue?: Function;
|
|
54
|
+
getOptionValue?: (selectedOption: ValueType) => any;
|
|
56
55
|
systemTheme?: Theme;
|
|
57
56
|
menuPlacement?: string;
|
|
58
|
-
onIconClick?:
|
|
57
|
+
onIconClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
|
|
59
58
|
};
|
|
60
59
|
export type BaseColors = {
|
|
61
60
|
primary: string;
|
|
@@ -72,6 +71,7 @@ export type BaseColors = {
|
|
|
72
71
|
dropdownIndicatorColor: string;
|
|
73
72
|
hoverToActiveOptionBackground: string;
|
|
74
73
|
defaultControlColor: string;
|
|
74
|
+
clearIndicatorColor: string;
|
|
75
75
|
};
|
|
76
76
|
type BaseState<ThemeType = BaseColors> = {
|
|
77
77
|
theme: ThemeType;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { SelectProps, Option } from '../Select/types';
|
|
3
3
|
|
|
4
|
-
type FieldValueType = string | number | Array<string | number> | null;
|
|
4
|
+
export type FieldValueType = string | number | Array<string | number> | null;
|
|
5
5
|
export type Props = Omit<SelectProps, 'onChange' | 'loadOptions'> & {
|
|
6
6
|
onChange?: (event: {
|
|
7
7
|
target: Record<string, FieldValueType>;
|
|
8
8
|
}) => void;
|
|
9
|
-
onValueChange?:
|
|
9
|
+
onValueChange?: (value: FieldValueType) => void;
|
|
10
10
|
asyncLoadMinChars?: number;
|
|
11
11
|
preload?: boolean;
|
|
12
12
|
isLocked?: boolean;
|