@mailstep/design-system 0.7.41 → 0.7.42-beta.2
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/Elements/Select/Select.d.ts +1 -1
- package/ui/Elements/Select/Select.js +2 -2
- package/ui/Elements/Select/components/CountMultiValue.js +5 -0
- package/ui/Elements/Select/types.d.ts +1 -0
- package/ui/index.es.js +10562 -10567
- package/ui/index.umd.js +426 -426
package/package.json
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { SelectProps } from './types';
|
|
2
|
-
declare const Select: ({ label, name, value, options, defaultOptions, loadOptions, onChange, onBlur, error, isInvalid, isLoading, isDarkPlaceholderText, spaceAround, disabled, onInputChange, isSearchable, isMulti, className, useSimplifiedOptions, showSelectAllButton, showResetGridButton, style, optionVariant, multiLabelVariant, containerVariant, placeholder, placeholderIcon, innerRef, maxMenuHeight, getOptionValue, resetGrid, ...passTroughProps }: SelectProps) => JSX.Element;
|
|
2
|
+
declare const Select: ({ 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, ...passTroughProps }: SelectProps) => JSX.Element;
|
|
3
3
|
export default Select;
|
|
@@ -33,7 +33,7 @@ var emptyOptions = [];
|
|
|
33
33
|
var noOptionsMessage = function () { return i18n._({ id: 'select.noOptions', message: 'no options' }); };
|
|
34
34
|
var loadingMessage = function () { return i18n._({ id: 'components.dropdown.loading', message: 'Loading...' }); };
|
|
35
35
|
var Select = function (_a) {
|
|
36
|
-
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, 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, passTroughProps = __rest(_a, ["label", "name", "value", "options", "defaultOptions", "loadOptions", "onChange", "onBlur", "error", "isInvalid", "isLoading", "isDarkPlaceholderText", "spaceAround", "disabled", "onInputChange", "isSearchable", "isMulti", "className", "useSimplifiedOptions", "showSelectAllButton", "showResetGridButton", "style", "optionVariant", "multiLabelVariant", "containerVariant", "placeholder", "placeholderIcon", "innerRef", "maxMenuHeight", "getOptionValue", "resetGrid"]);
|
|
36
|
+
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, 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"]);
|
|
37
37
|
var isAsync = !!loadOptions;
|
|
38
38
|
if (showSelectAllButton && (loadOptions || !isMulti)) {
|
|
39
39
|
console.error('CheckboxSelect incompatible props');
|
|
@@ -48,7 +48,7 @@ var Select = function (_a) {
|
|
|
48
48
|
}, [onChange]);
|
|
49
49
|
var icon = containerVariant === 'search' ? 'search' : placeholderIcon ? placeholderIcon : undefined;
|
|
50
50
|
var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
|
|
51
|
-
var
|
|
51
|
+
var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
|
|
52
52
|
var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;
|
|
53
53
|
var selectedOption;
|
|
54
54
|
var localGetOptionValue = useMemo(function () { return getOptionValue || (function (option) { return option === null || option === void 0 ? void 0 : option.value; }); }, [getOptionValue]);
|
|
@@ -20,8 +20,13 @@ import styled, { th } from '@xstyled/styled-components';
|
|
|
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
21
|
var CountMultiValue = function (props) {
|
|
22
22
|
var _a, _b;
|
|
23
|
+
console.log('props', props);
|
|
24
|
+
var shortValues = props.selectProps.shortValues;
|
|
23
25
|
var selectVal = props.selectProps.value;
|
|
24
26
|
var inputVal = props.selectProps.inputValue;
|
|
27
|
+
if (!shortValues) {
|
|
28
|
+
return _jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children }));
|
|
29
|
+
}
|
|
25
30
|
if (!inputVal && ((_a = props.data) === null || _a === void 0 ? void 0 : _a.value) == ((_b = selectVal[0]) === null || _b === void 0 ? void 0 : _b.value)) {
|
|
26
31
|
return (_jsxs(_Fragment, { children: [_jsx(selectComponents.MultiValue, __assign({}, props, { children: props.children })), selectVal.length > 1 ? _jsxs(StyledNumber, { children: ["+", selectVal.length - 1] }) : null] }));
|
|
27
32
|
}
|