@mailstep/design-system 0.8.22-beta.3 → 0.8.22
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 +2 -1
- package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js +2 -3
- package/ui/Blocks/CommonGrid/components/MobileFilterModal.js +1 -1
- package/ui/Blocks/CommonGrid/components/QuickFilter/QuickFilter.js +1 -4
- package/ui/Blocks/CommonGrid/styles.js +1 -1
- package/ui/Blocks/Header/components/MenuItems/styles.js +1 -1
- package/ui/Blocks/Header/styles.js +2 -2
- package/ui/Blocks/LanguageSwitch/LanguageSwitch.js +10 -5
- package/ui/Blocks/LanguageSwitch/styles.d.ts +0 -5
- package/ui/Blocks/LanguageSwitch/styles.js +3 -11
- package/ui/Blocks/SideMenu/components/HamburgerMenu.js +2 -3
- package/ui/Elements/DropdownMenu/components/DefaultItem.js +1 -1
- package/ui/Elements/Select/Select.js +4 -4
- package/ui/Elements/Select/components/ConnectedMenu.js +3 -2
- package/ui/Elements/Select/components/CountMultiValue.d.ts +1 -7
- package/ui/Elements/Select/components/CountMultiValue.js +5 -13
- package/ui/Elements/Select/components/DropdownIndicator.d.ts +1 -6
- package/ui/Elements/Select/components/DropdownIndicator.js +2 -3
- package/ui/Elements/Select/components/IconValueContainer.js +1 -1
- package/ui/Elements/Select/components/ResetAll.d.ts +5 -0
- package/ui/Elements/Select/components/ResetAll.js +15 -0
- package/ui/Elements/Select/themes/index.d.ts +1 -1
- package/ui/Elements/Select/themes/index.js +14 -4
- package/ui/Elements/Select/themes/selectStyles.js +22 -20
- package/ui/Elements/Select/types.d.ts +6 -6
- package/ui/Elements/SingleSelect/SingleSelect.d.ts +1 -1
- package/ui/Elements/SingleSelect/SingleSelect.js +20 -11
- package/ui/index.es.js +16048 -15429
- package/ui/index.umd.js +475 -496
package/package.json
CHANGED
|
@@ -57,6 +57,7 @@ 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' });
|
|
60
61
|
var cleanValue = React.useMemo(function () { return getCleanValues(value); }, [value]);
|
|
61
62
|
var initialViewDate = useMemo(function () {
|
|
62
63
|
if (cleanValue[0] && cleanValue[1]) {
|
|
@@ -105,7 +106,7 @@ var DatePickerRange = function (props) {
|
|
|
105
106
|
// Check if the second value is not selected and the first value is the same as the initial value
|
|
106
107
|
var secondDatePickerValue = cleanValue[1] === null ? cleanValue[0] : cleanValue[1];
|
|
107
108
|
var ref = useClickOutside({ onClose: onClose });
|
|
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 }))] })) }) })] }));
|
|
109
|
+
return (_jsxs("div", { ref: ref, children: [_jsx(Input, { name: props.name, placeholder: placeholder, 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 }))] })) }) })] }));
|
|
109
110
|
};
|
|
110
111
|
export default DatePickerRange;
|
|
111
112
|
var templateObject_1, templateObject_2;
|
|
@@ -63,7 +63,6 @@ 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; };
|
|
67
66
|
var SelectFilter = function (_a) {
|
|
68
67
|
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;
|
|
69
68
|
var _e = useState([]), loadedOptions = _e[0], setLoadedOptions = _e[1];
|
|
@@ -105,9 +104,9 @@ var SelectFilter = function (_a) {
|
|
|
105
104
|
var isSelectClearable = isWide ? isClearable : false;
|
|
106
105
|
var placeholderValue = placeholder || (isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined);
|
|
107
106
|
if (isMulti) {
|
|
108
|
-
var placeholderIcon = isWide &&
|
|
107
|
+
var placeholderIcon = isWide && isAsync ? (isNotEq ? 'notEqual' : 'equals') : null;
|
|
109
108
|
var selectValue = showValue ? (isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value) : undefined;
|
|
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:
|
|
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: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: placeholderIcon, onIconClick: withNotEqComparator ? handleIconClick : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, disabled: disabled, isClearable: isSelectClearable }));
|
|
111
110
|
}
|
|
112
111
|
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 }));
|
|
113
112
|
};
|
|
@@ -63,7 +63,7 @@ var MobileFilterModal = function (_a) {
|
|
|
63
63
|
if (!(filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.CellComponent))
|
|
64
64
|
return null;
|
|
65
65
|
var RenderComponent = filterConfig.CellComponent;
|
|
66
|
-
return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
|
|
66
|
+
return (_jsxs(x.div, { display: "flex", flexDirection: "column", gap: "6px", position: "relative", children: [column.title && (_jsx(H6, { mt: 0, mb: 0, variant: "semiBold", children: column.title })), _jsx(RenderComponent, __assign({ asyncLoadKey: column.asyncLoadKey, "data-test": column.name, name: column.name, onChange: handleChange(column), value: value, others: others, OverlayComponent: MobileOverlayWrapper, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, (filterType === 'date' && { compact: true }), (filterType === 'options' && { options: column.filterOptions, columnWidth: column === null || column === void 0 ? void 0 : column.flexBasis }), filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, column.filterExtraProps))] }, column.name));
|
|
67
67
|
}) }) }));
|
|
68
68
|
};
|
|
69
69
|
export default MobileFilterModal;
|
|
@@ -6,15 +6,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
6
6
|
import Button from '../../../../Elements/Button';
|
|
7
7
|
import Input from '../../../../Forms/Input';
|
|
8
8
|
import styled, { x } from '@xstyled/styled-components';
|
|
9
|
-
var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: ", ";\n z-index: ", ";\n width:
|
|
9
|
+
var StyledInput = styled(Input)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: ", ";\n z-index: ", ";\n width: auto;\n"], ["\n position: ", ";\n z-index: ", ";\n width: auto;\n"])), function (_a) {
|
|
10
10
|
var isMobileInputView = _a.isMobileInputView;
|
|
11
11
|
return (isMobileInputView ? 'absolute' : 'relative');
|
|
12
12
|
}, function (_a) {
|
|
13
13
|
var isMobileInputView = _a.isMobileInputView;
|
|
14
14
|
return (isMobileInputView ? '3' : '1');
|
|
15
|
-
}, function (_a) {
|
|
16
|
-
var isMobileInputView = _a.isMobileInputView;
|
|
17
|
-
return (isMobileInputView ? 'auto' : 'auto');
|
|
18
15
|
});
|
|
19
16
|
var QuickFilter = function (_a) {
|
|
20
17
|
var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange, onClick = _a.onClick, displayInput = _a.displayInput, onClear = _a.onClear, isMobileInputView = _a.isMobileInputView, alwaysShowClear = _a.alwaysShowClear;
|
|
@@ -22,7 +22,7 @@ export var CommonGridWrap = styled(x.div)(templateObject_3 || (templateObject_3
|
|
|
22
22
|
return (withPagination ? gridFooterHeight : 0);
|
|
23
23
|
});
|
|
24
24
|
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 height: calc(100% - ", "px);\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 & .gridWrapper {\n background-color: ", ";\n width: auto;\n
|
|
25
|
+
export var CommonGridWithStyles = styled(CommonGrid)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: calc(100% - ", "px);\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 & .gridWrapper {\n background-color: ", ";\n width: 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 height: calc(100% - ", "px);\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 & .gridWrapper {\n background-color: ", ";\n width: 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"])), function (_a) {
|
|
26
26
|
var withButtonStrip = _a.withButtonStrip;
|
|
27
27
|
return (withButtonStrip ? gridButtonStripHeight : 0);
|
|
28
28
|
}, th('fonts.primary'), gridRowHeight, function (_a) {
|
|
@@ -3,7 +3,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import styled from '@xstyled/styled-components';
|
|
6
|
-
export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display:
|
|
6
|
+
export var MenuItemsList = styled.ul(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n gap: 10px;\n"], ["\n display: flex;\n gap: 10px;\n"])));
|
|
7
7
|
export var MenuItemsListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", ";\n\n a {\n text-decoration: none;\n border-color: red1;\n color: typoPrimary;\n }\n\n a:hover {\n border-bottom: 1px solid;\n color: red1;\n }\n"], ["\n ", ";\n\n a {\n text-decoration: none;\n border-color: red1;\n color: typoPrimary;\n }\n\n a:hover {\n border-bottom: 1px solid;\n color: red1;\n }\n"])), function (_a) {
|
|
8
8
|
var pointer = _a.pointer;
|
|
9
9
|
return pointer && 'cursor: pointer;';
|
|
@@ -4,8 +4,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { headerHeight } from './utils/constants';
|
|
6
6
|
import styled, { th } from '@xstyled/styled-components';
|
|
7
|
-
export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0
|
|
7
|
+
export var Container = styled.header(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 8px;\n height: ", ";\n border-bottom: 1px solid ", ";\n\n @media (min-width: 768px) {\n padding: 0 20px;\n }\n"], ["\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 0 8px;\n height: ", ";\n border-bottom: 1px solid ", ";\n\n @media (min-width: 768px) {\n padding: 0 20px;\n }\n"])), headerHeight, th.color('lightGray7'));
|
|
8
8
|
export var LeftSide = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
9
9
|
export var LanguageWrapper = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n justify-content: flex-end;\n"], ["\n display: flex;\n justify-content: flex-end;\n"])));
|
|
10
|
-
export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap:
|
|
10
|
+
export var RightSide = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n display: flex;\n gap: 4px;\n align-items: center;\n\n @media (min-width: 768px) {\n gap: 20px;\n }\n"], ["\n display: flex;\n gap: 4px;\n align-items: center;\n\n @media (min-width: 768px) {\n gap: 20px;\n }\n"])));
|
|
11
11
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
|
|
@@ -1,15 +1,20 @@
|
|
|
1
1
|
import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useCallback, useMemo, useState } from 'react';
|
|
2
|
+
import { useCallback, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import DropdownMenu from '../../Elements/DropdownMenu';
|
|
3
4
|
import Icon from '../../Elements/Icon/Icon';
|
|
4
|
-
import
|
|
5
|
-
import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap
|
|
5
|
+
import Popover from '../Popover';
|
|
6
|
+
import { StyledFlag, LanguageFlagWrap, LanguageSwitchWrap } from './styles';
|
|
7
|
+
var placementMap = {
|
|
8
|
+
left: 'bottom-start',
|
|
9
|
+
right: 'bottom-end'
|
|
10
|
+
};
|
|
6
11
|
var LanguageSwitch = function (_a) {
|
|
7
12
|
var activeLanguage = _a.activeLanguage, onLanguageChange = _a.onLanguageChange, languageItems = _a.languageItems, _b = _a.placement, placement = _b === void 0 ? 'right' : _b, withTitle = _a.withTitle, languageFlagWrapBackgroundColor = _a.languageFlagWrapBackgroundColor;
|
|
8
13
|
var _c = useState(false), flagDropdownVisible = _c[0], setFlagDropdownVisible = _c[1];
|
|
14
|
+
var flagWrapRef = useRef(null);
|
|
9
15
|
var onClose = useCallback(function () {
|
|
10
16
|
setFlagDropdownVisible(false);
|
|
11
17
|
}, []);
|
|
12
|
-
var flagMenuRef = useClickOutside({ onClose: onClose });
|
|
13
18
|
var handleFlagClick = useCallback(function () {
|
|
14
19
|
setFlagDropdownVisible(!flagDropdownVisible);
|
|
15
20
|
}, [flagDropdownVisible]);
|
|
@@ -30,6 +35,6 @@ var LanguageSwitch = function (_a) {
|
|
|
30
35
|
}, [filteredLanguages, languageToggle]);
|
|
31
36
|
if (!activeLanguageObj || !languageItems)
|
|
32
37
|
return null;
|
|
33
|
-
return (_jsxs(LanguageSwitchWrap, {
|
|
38
|
+
return (_jsxs(LanguageSwitchWrap, { children: [_jsxs(LanguageFlagWrap, { ref: flagWrapRef, onClick: handleFlagClick, backgroundColor: languageFlagWrapBackgroundColor, withTitle: withTitle, children: [_jsxs(StyledFlag, { children: [activeLanguageObj.icon, withTitle && activeLanguageObj.title] }), _jsx(Icon, { icon: "chevronDown", size: "10px" })] }), flagDropdownVisible && (_jsx(Popover, { parentRef: flagWrapRef, onClose: onClose, placement: placementMap[placement], children: _jsx(DropdownMenu, { showMenu: true, items: formattedLanguages }) }))] }));
|
|
34
39
|
};
|
|
35
40
|
export default LanguageSwitch;
|
|
@@ -1,9 +1,4 @@
|
|
|
1
|
-
import { Placement } from './types';
|
|
2
|
-
|
|
3
1
|
export declare const StyledFlag: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
|
|
4
|
-
export declare const StyledDropdownMenu: import('styled-components').StyledComponent<(<T extends import('../../Elements/DropdownMenu/types').Item>({ items, showMenu, className, ItemComponent, header, footer, ...rest }: import('../../Elements/DropdownMenu/types').DropdownMenuProps<T>) => import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>>), import('@xstyled/system').Theme, {
|
|
5
|
-
placement: Placement;
|
|
6
|
-
}, never>;
|
|
7
2
|
export declare const LanguageSwitchWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {}, never>;
|
|
8
3
|
export declare const LanguageFlagWrap: import('styled-components').StyledComponent<"div", import('@xstyled/system').Theme, {
|
|
9
4
|
backgroundColor?: string | undefined;
|
|
@@ -2,22 +2,14 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
2
2
|
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
|
-
import DropdownMenu from '../../Elements/DropdownMenu';
|
|
6
5
|
import styled from '@xstyled/styled-components';
|
|
7
6
|
export var StyledFlag = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n cursor: pointer;\n font-size: 16px;\n display: flex;\n gap: 6px;\n align-items: center;\n"], ["\n cursor: pointer;\n font-size: 16px;\n display: flex;\n gap: 6px;\n align-items: center;\n"])));
|
|
8
|
-
export var
|
|
9
|
-
|
|
10
|
-
return "".concat(placement, ": -5px");
|
|
11
|
-
}, function (_a) {
|
|
12
|
-
var placement = _a.placement;
|
|
13
|
-
return "".concat(placement, ": 15px");
|
|
14
|
-
});
|
|
15
|
-
export var LanguageSwitchWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n width: fit-content;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n width: fit-content;\n"])));
|
|
16
|
-
export var LanguageFlagWrap = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n padding: 7px 12px;\n border-radius: 10px;\n background: ", ";\n"], ["\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n padding: 7px 12px;\n border-radius: 10px;\n background: ", ";\n"])), function (_a) {
|
|
7
|
+
export var LanguageSwitchWrap = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n display: flex;\n align-items: center;\n width: fit-content;\n"], ["\n position: relative;\n display: flex;\n align-items: center;\n width: fit-content;\n"])));
|
|
8
|
+
export var LanguageFlagWrap = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n padding: 6px;\n border-radius: 10px;\n background: ", ";\n\n @media (min-width: 768px) {\n padding: 7px 12px;\n }\n"], ["\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: ", ";\n padding: 6px;\n border-radius: 10px;\n background: ", ";\n\n @media (min-width: 768px) {\n padding: 7px 12px;\n }\n"])), function (_a) {
|
|
17
9
|
var withTitle = _a.withTitle;
|
|
18
10
|
return (withTitle ? '16px' : '8px');
|
|
19
11
|
}, function (_a) {
|
|
20
12
|
var backgroundColor = _a.backgroundColor;
|
|
21
13
|
return backgroundColor || 'white';
|
|
22
14
|
});
|
|
23
|
-
var templateObject_1, templateObject_2, templateObject_3
|
|
15
|
+
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -6,8 +6,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { HamburgerMenu as HamburgerMenuIcon } from '../../../Elements/Icon/icons/HamburgerMenu';
|
|
8
8
|
import { MobileCancel } from '../../../Elements/Icon/icons/MobileCancel';
|
|
9
|
-
import { css, x } from '@xstyled/styled-components';
|
|
10
|
-
import { useTheme } from '@xstyled/styled-components';
|
|
9
|
+
import { css, x, useTheme } from '@xstyled/styled-components';
|
|
11
10
|
import { th } from '@xstyled/system';
|
|
12
11
|
var HamburgerMenuWrapper = styled(x.div)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 36px;\n height: 36px;\n border-radius: 70px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: ", ";\n &:hover {\n cursor: pointer;\n }\n\n ", ";\n\n @media (min-width: 1024px) {\n display: none;\n }\n"], ["\n width: 36px;\n height: 36px;\n border-radius: 70px;\n background-color: ", ";\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n box-shadow: ", ";\n &:hover {\n cursor: pointer;\n }\n\n ", ";\n\n @media (min-width: 1024px) {\n display: none;\n }\n"])), th.color('neutral20'), th.shadow('dropShadow'), function (_a) {
|
|
13
12
|
var isLeftMenuOpen = _a.isLeftMenuOpen;
|
|
@@ -19,6 +18,6 @@ export var HamburgerMenuButton = function (_a) {
|
|
|
19
18
|
var theme = useTheme();
|
|
20
19
|
var neutralColor = th.color('neutral20')({ theme: theme });
|
|
21
20
|
var dispalyedIcon = isLeftMenuOpen ? (_jsx(MobileCancel, { fill: neutralColor })) : (_jsx(HamburgerMenuIcon, { fill: neutralColor, stroke: 'none' }));
|
|
22
|
-
return (_jsx(HamburgerMenuWrapper, { mr:
|
|
21
|
+
return (_jsx(HamburgerMenuWrapper, { mr: "8px", onClick: onClick, isLeftMenuOpen: !!isLeftMenuOpen, children: dispalyedIcon }));
|
|
23
22
|
};
|
|
24
23
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -4,7 +4,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
4
4
|
};
|
|
5
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
6
|
import styled, { css } from '@xstyled/styled-components';
|
|
7
|
-
var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 8px 10px;\n font-size: 14px;\n color: typoPrimary;\n font-weight: normal;\n\n :hover {\n background-color: bgLightGray1;\n cursor: pointer;\n }\n\n ", ";\n"], ["\n padding: 8px 10px;\n font-size: 14px;\n color: typoPrimary;\n font-weight: normal;\n\n :hover {\n background-color: bgLightGray1;\n cursor: pointer;\n }\n\n ", ";\n"])), function (props) {
|
|
7
|
+
var StyledListItem = styled.li(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n padding: 8px 10px;\n font-size: 14px;\n color: typoPrimary;\n font-weight: normal;\n display: flex;\n\n :hover {\n background-color: bgLightGray1;\n cursor: pointer;\n }\n\n ", ";\n"], ["\n padding: 8px 10px;\n font-size: 14px;\n color: typoPrimary;\n font-weight: normal;\n display: flex;\n\n :hover {\n background-color: bgLightGray1;\n cursor: pointer;\n }\n\n ", ";\n"])), function (props) {
|
|
8
8
|
return props.hasSeparator && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border-top: slim;\n border-color: lightGray2;\n "], ["\n border-top: slim;\n border-color: lightGray2;\n "])));
|
|
9
9
|
});
|
|
10
10
|
var IconWrap = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-right: 10px;\n"], ["\n margin-right: 10px;\n"])));
|
|
@@ -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.showResetGridButton, showResetGridButton = _g === void 0 ? false : _g, _h = _a.shortValues, shortValues = _h === void 0 ? true : _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, resetGrid = _a.resetGrid, 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", "showResetGridButton", "shortValues", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid", "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 = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
|
|
88
|
-
var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
|
|
87
|
+
var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
|
|
88
|
+
var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), 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, resetGrid: resetGrid, onCustomSelectAll: setAllOptions, onCustomDeselectAll: unsetAllOptions, selectAllButton: showSelectAllButton, resetGridButton: showResetGridButton, maxMenuHeight: modifiedMaxMenuHeight, getOptionValue: getOptionValue, loadingMessage: loadingMessage, shortValues: shortValues }))] }), error && _jsx(ErrorMessage, { children: error })] }));
|
|
110
110
|
};
|
|
111
111
|
export default Select;
|
|
@@ -12,16 +12,17 @@ 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';
|
|
15
16
|
import SelectAll from '../components/SelectAll';
|
|
16
17
|
var ConnectedMenu = function (props) {
|
|
17
18
|
var theme = props.theme;
|
|
18
|
-
var _a = props.selectProps, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
|
|
19
|
+
var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
|
|
19
20
|
// because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
|
|
20
21
|
// we need to specify them here by children
|
|
21
22
|
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) {
|
|
22
23
|
var _b = _a.props, value = _b.value, label = _b.label;
|
|
23
24
|
return ({ label: label, value: value });
|
|
24
25
|
}); }, [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] })));
|
|
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, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
|
|
26
27
|
};
|
|
27
28
|
export default ConnectedMenu;
|
|
@@ -1,8 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
type CountMultiValueProps = MultiValueProps & {
|
|
4
|
-
data: any;
|
|
5
|
-
selectProps: any;
|
|
6
|
-
};
|
|
7
|
-
declare const CountMultiValue: (props: CountMultiValueProps) => React.ReactNode;
|
|
1
|
+
declare const CountMultiValue: (props: any) => any;
|
|
8
2
|
export default CountMultiValue;
|
|
@@ -18,28 +18,20 @@ 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 StyledMultiValue = 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
|
-
});
|
|
25
21
|
var CountMultiValue = function (props) {
|
|
26
22
|
var _a, _b;
|
|
27
23
|
var shortValues = props.selectProps.shortValues;
|
|
28
24
|
var selectVal = props.selectProps.value;
|
|
29
25
|
var inputVal = props.selectProps.inputValue;
|
|
30
|
-
var shortVariant = props.selectProps.shortVariant;
|
|
31
|
-
var isFirst = ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) === ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value);
|
|
32
|
-
var menuIsOpen = props.selectProps.menuIsOpen;
|
|
33
26
|
if (!shortValues) {
|
|
34
27
|
return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
|
|
35
28
|
}
|
|
36
|
-
if (!
|
|
37
|
-
return null;
|
|
29
|
+
if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
|
|
30
|
+
return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
|
|
38
31
|
}
|
|
39
|
-
|
|
40
|
-
return
|
|
32
|
+
else {
|
|
33
|
+
return null;
|
|
41
34
|
}
|
|
42
|
-
return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
|
|
43
35
|
};
|
|
44
36
|
export default CountMultiValue;
|
|
45
|
-
var templateObject_1
|
|
37
|
+
var templateObject_1;
|
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
type DropdownIndicatorCustomProps = DropdownIndicatorProps & {
|
|
4
|
-
theme: any;
|
|
5
|
-
};
|
|
6
|
-
export declare const DropdownIndicator: (props: DropdownIndicatorCustomProps) => any;
|
|
1
|
+
export declare const DropdownIndicator: (props: any) => any;
|
|
7
2
|
export default DropdownIndicator;
|
|
@@ -15,15 +15,14 @@ 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';
|
|
18
19
|
import { ArrowDown } from '../../Icon/icons/ArrowDown';
|
|
19
20
|
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
|
-
|
|
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 }) }) })));
|
|
25
|
+
return (_jsx(selectComponents.DropdownIndicator, __assign({}, props, { children: _jsx(ChevronDiv, { className: "chevron", "data-cy": "".concat(name, "ChevronBtn"), children: menuIsOpen ? _jsx(ArrowUp, { width: "16px" }) : _jsx(ArrowDown, { width: "16px" }) }) })));
|
|
27
26
|
};
|
|
28
27
|
export default DropdownIndicator;
|
|
29
28
|
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: 12px;\n align-self: center;\n & > * {\n color: ", ";\n }\n"], ["\n padding-left: 12px;\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
|
});
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
+
import { Paragraph3 } from '../../Typography/Typography';
|
|
7
|
+
import styled from '@xstyled/styled-components';
|
|
8
|
+
import { Trans } from '@lingui/react';
|
|
9
|
+
var ResetWrap = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n text-align: center;\n cursor: pointer;\n color: red1;\n text-decoration: underline;\n margin: 0 30px 0 20px;\n padding-bottom: 7px;\n :first-letter {\n text-transform: capitalize;\n }\n :hover {\n color: red3;\n }\n"], ["\n text-align: center;\n cursor: pointer;\n color: red1;\n text-decoration: underline;\n margin: 0 30px 0 20px;\n padding-bottom: 7px;\n :first-letter {\n text-transform: capitalize;\n }\n :hover {\n color: red3;\n }\n"])));
|
|
10
|
+
var ResetAll = function (_a) {
|
|
11
|
+
var onReset = _a.onReset;
|
|
12
|
+
return (_jsx(ResetWrap, { onClick: onReset, children: _jsx(Paragraph3, { variant: "semiBold", children: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }) }) }));
|
|
13
|
+
};
|
|
14
|
+
export default ResetAll;
|
|
15
|
+
var templateObject_1;
|
|
@@ -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']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
|
|
4
|
+
export declare const useStylesAndComponents: (style?: SelectProps['style'], optionVariant?: SelectProps['optionVariant'], multiLabelVariant?: SelectProps['multiLabelVariant'], containerVariant?: SelectProps['containerVariant'], useSimplifiedOptions?: SelectProps['useSimplifiedOptions'], showSelectAllButton?: SelectProps['showSelectAllButton'], showResetGridButton?: SelectProps['showResetGridButton']) => [SelectComponentsConfig<unknown, boolean, any>, any, StylesConfig];
|
|
@@ -8,13 +8,14 @@ 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, showResetGridButton) {
|
|
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; }
|
|
18
19
|
var systemTheme = useTheme();
|
|
19
20
|
return useMemo(function () {
|
|
20
21
|
var components = {
|
|
@@ -27,16 +28,25 @@ export var useStylesAndComponents = function (style, optionVariant, multiLabelVa
|
|
|
27
28
|
if (containerVariant === 'search') {
|
|
28
29
|
components.DropdownIndicator = null;
|
|
29
30
|
}
|
|
30
|
-
if (showSelectAllButton) {
|
|
31
|
+
if (showResetGridButton || showSelectAllButton) {
|
|
31
32
|
components.MenuList = ConnectedMenu;
|
|
32
33
|
}
|
|
33
34
|
components.Input = CustomInput;
|
|
34
|
-
var themes = getFormCustomTheme(systemTheme, optionVariant, style
|
|
35
|
+
var themes = getFormCustomTheme(systemTheme, optionVariant, style == 'gridFilter');
|
|
35
36
|
var styles = SelectCustomStyles;
|
|
36
37
|
components.Option = ChevronOption;
|
|
37
38
|
// performance reasons
|
|
38
39
|
if (useSimplifiedOptions)
|
|
39
40
|
components.Option = SimplifiedOption;
|
|
40
41
|
return [components, themes, styles];
|
|
41
|
-
}, [
|
|
42
|
+
}, [
|
|
43
|
+
multiLabelVariant,
|
|
44
|
+
containerVariant,
|
|
45
|
+
showResetGridButton,
|
|
46
|
+
showSelectAllButton,
|
|
47
|
+
style,
|
|
48
|
+
useSimplifiedOptions,
|
|
49
|
+
systemTheme,
|
|
50
|
+
optionVariant
|
|
51
|
+
]);
|
|
42
52
|
};
|
|
@@ -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 : selectProps.value ? colors.inputTextColor : 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',
|
|
28
|
+
return __assign(__assign({}, styles), { width: '50px', 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,26 +103,29 @@ 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
|
-
|
|
115
|
+
dropdownIndicator: function (styles, state) {
|
|
116
|
+
var theme = state.theme, isDisabled = state.isDisabled;
|
|
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
|
+
} });
|
|
117
122
|
},
|
|
118
123
|
clearIndicator: function (styles, state) {
|
|
119
|
-
var theme = state.theme
|
|
120
|
-
|
|
121
|
-
// containerVariant
|
|
122
|
-
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators && selectProps.containerVariant !== 'search' ? '0px' : '0px 4px', color: theme.colors.clearIndicatorColor, cursor: 'pointer' });
|
|
124
|
+
var theme = state.theme;
|
|
125
|
+
return __assign(__assign({}, styles), { justifyContent: 'center', alignItems: 'center', padding: theme.narrowIndicators ? '0px 4px 0px 0px' : '0px 4px', color: theme.colors.dropdownIndicatorColor });
|
|
123
126
|
},
|
|
124
127
|
indicatorSeparator: function () { return ({
|
|
125
|
-
display: 'none'
|
|
128
|
+
display: 'none',
|
|
126
129
|
}); }
|
|
127
130
|
};
|
|
128
131
|
export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant) {
|
|
@@ -136,13 +139,12 @@ export var getCustomTheme = function (theme, optionVariant, useFilterSubvariant)
|
|
|
136
139
|
inputDisabledColor: th.color('lightGray1')({ theme: theme }),
|
|
137
140
|
inputBorderColor: th.color('lightGray3')({ theme: theme }),
|
|
138
141
|
placeholderTextColor: th.color('lightGray3')({ theme: theme }),
|
|
139
|
-
clearIndicatorColor: th.color('lightGray4')({ theme: theme }),
|
|
140
142
|
defaultControlColor: th.color('lightGray5')({ theme: theme }),
|
|
141
143
|
disabledTextColor: th.color('lightGray6')({ theme: theme }),
|
|
142
144
|
dropdownIndicatorColor: th.color('gray1')({ theme: theme }),
|
|
143
145
|
inputBorderHoverColor: th.color('gray5')({ theme: theme }),
|
|
144
146
|
activeOptionBackground: th.color('red20')({ theme: theme }),
|
|
145
|
-
hoverToActiveOptionBackground: th.color('red30')({ theme: theme })
|
|
147
|
+
hoverToActiveOptionBackground: th.color('red30')({ theme: theme }),
|
|
146
148
|
};
|
|
147
149
|
return function (reactSelectTheme) {
|
|
148
150
|
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 });
|