@mailstep/design-system 0.8.22-beta.1 → 0.8.22-beta.4
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 +2 -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 +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 +8447 -8519
- package/ui/index.umd.js +241 -276
- 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];
|
|
@@ -106,7 +107,7 @@ var SelectFilter = function (_a) {
|
|
|
106
107
|
if (isMulti) {
|
|
107
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
|
};
|
|
@@ -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.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;
|