@mailstep/design-system 0.8.8-beta.2 → 0.8.8-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.8.8-beta.2",
+  "version": "0.8.8-beta.3",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/components/ColumnFilterCell.js

@@ -35,6 +35,6 @@ var ColumnFilterCell = function (_a) {
         console.error("ERROR, using unknown filter type ".concat(filterType));
         return (_jsx(x.div, { children: _jsx("span", { children: "".concat(filterType, " filter") }) }));
     }
-    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ asyncLoadKey: columnDefinition.asyncLoadKey, "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }))) }) })));
+    return (_jsx(Cell, __assign({ className: cellClassName }, cellSizeProps, { children: _jsx(x.div, { children: _jsx(RenderComponent, __assign({ asyncLoadKey: columnDefinition.asyncLoadKey, "data-test": columnDefinition.name, name: columnDefinition.name, onChange: handleChange, value: value, others: others, OverlayComponent: OverlayComponent, comparators: defaultComparators, actionColumn: actionColumn, rowsData: rowsData, uxState: uxState, handleUxChange: handleUxChange, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions }, filterConfig === null || filterConfig === void 0 ? void 0 : filterConfig.defaultExtraProps, columnDefinition.filterExtraProps, (filterType == 'options' && { options: columnDefinition.filterOptions }), { columnWidth: cellSizeProps === null || cellSizeProps === void 0 ? void 0 : cellSizeProps.flexBasis })) }) })));
 };
 export default ColumnFilterCell;

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.d.ts

@@ -15,6 +15,7 @@ type Props = {
     disabled?: boolean;
     placeholder?: string;
     showValue?: boolean;
+    columnWidth?: number;
 };
 declare const SelectFilter: FC<Props>;
 export default SelectFilter;

package/ui/Blocks/CommonGrid/components/Filters/GridSelect/GridSelect.js

@@ -62,8 +62,9 @@ import { i18n } from '@lingui/core';
 import isArray from 'lodash/isArray';
 import uniqBy from 'lodash/uniqBy';
 import { isOptionArray } from './guards';
+var minColumnWidth = 120;
 var SelectFilter = function (_a) {
-    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, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions, _d = _a.onlyInComparator, onlyInComparator = _d === void 0 ? false : _d;
+    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.onlyInComparator, onlyInComparator = _d === void 0 ? false : _d;
     var _e = useState([]), loadedOptions = _e[0], setLoadedOptions = _e[1];
     var _f = useState(false), isNotEqNoValue = _f[0], setIsNotEqNoValue = _f[1];
     var isAsync = !!asyncLoadKey;
@@ -99,11 +100,13 @@ var SelectFilter = function (_a) {
         onChange(newOptions);
     }, [value, isNotEq, onChange]);
     var defaultOptions = useMemo(function () { return (isMulti && isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined); }, [isAsync, value, loadedOptions]);
+    var isSelectClearable = columnWidth && columnWidth > minColumnWidth ? isClearable : false;
     if (isMulti) {
+        var placeholderIcon = columnWidth && columnWidth > minColumnWidth ? (isNotEq ? 'notEqual' : 'equals') : null;
         var placerholderValue = placeholder || (isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined);
         var selectValue = showValue ? (isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value) : undefined;
-        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: selectValue, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: placerholderValue, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: isNotEq ? 'notEqual' : 'equals', onIconClick: !onlyInComparator ? handleIconClick : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, disabled: disabled }));
+        return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: selectValue, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: placerholderValue, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, placeholderIcon: placeholderIcon, onIconClick: !onlyInComparator ? handleIconClick : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true, disabled: disabled, isClearable: isSelectClearable }));
     }
-    return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, isClearable: isClearable }));
+    return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, placeholderIcon: columnWidth && columnWidth < minColumnWidth ? null : undefined, isClearable: isSelectClearable }));
 };
 export default SelectFilter;

package/ui/Blocks/CommonGrid/storybook/utils/columnDefinition.js

@@ -15,7 +15,8 @@ export var enumColumn = {
     filterExtraProps: { isMulti: true, checkAllButton: true },
     filtering: true,
     sorting: false,
-    cellComponent: EnumCellExample
+    cellComponent: EnumCellExample,
+    asyncLoadKey: 'enumColumnAsync'
 };
 export var columnDefinitions = [
     {
@@ -41,9 +42,6 @@ export var columnDefinitions = [
         filterExtraProps: {
             isMulti: true,
             checkAllButton: true,
-            disabled: true,
-            placeholder: 'test',
-            showValue: false,
         },
         filtering: true,
         sorting: true,

package/ui/Blocks/CommonGrid/utils/index.d.ts

@@ -1,6 +1,12 @@
 import { ColumnDefinition, ColumnConfig, FilterProps, Group, StickTo, FiltersConfig } from '../types';
 
-export declare const getCellSizeProps: (column: ColumnDefinition, columnWidth: number) => object;
+type CellSizePropsResult = {
+    flexBasis?: number;
+    flexGrow?: number;
+    flexShrink?: number;
+    maxWidth?: string | number;
+};
+export declare const getCellSizeProps: (column: ColumnDefinition, columnWidth: number) => CellSizePropsResult;
 export declare const getSortName: (column: ColumnDefinition) => string;
 export declare const getFilterName: (column: ColumnDefinition) => string;
 export declare const isColumnOn: (column: ColumnDefinition, columnConfig?: ColumnConfig) => boolean;
@@ -14,3 +20,4 @@ export declare const getGroupClassNames: (group?: Group) => string;
 export declare const getStickyCollClassNames: (sticky: boolean, stickTo?: StickTo) => string;
 export declare const getFilters: (optimizeFilters: boolean) => FiltersConfig;
 export declare const checksColumnsOrder: (colsOrder: string[], columnsDefinitions: ColumnDefinition[]) => void;
+export {};

package/ui/Elements/Select/Select.js

@@ -83,7 +83,7 @@ var Select = function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange(emptyOptions);
         }
     }, [onChange]);
-    var icon = containerVariant === 'search' && !placeholderIcon ? 'search' : placeholderIcon || undefined;
+    var icon = containerVariant === 'search' && !placeholderIcon && placeholderIcon !== null ? 'search' : placeholderIcon || undefined;
     var modifiedMaxMenuHeight = showResetGridButton && showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
     var _j = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton, showResetGridButton), customComponents = _j[0], customTheme = _j[1], customStyles = _j[2];
     var RenderComponent = isAsync ? StyledAsyncSelect : StyledReactSelect;

package/ui/Elements/Select/types.d.ts

@@ -47,7 +47,7 @@ export type SelectProps = {
     optionVariant?: 'default' | 'checkbox' | 'toggle';
     multiLabelVariant?: 'default' | 'count';
     containerVariant?: 'default' | 'search';
-    placeholderIcon?: string;
+    placeholderIcon?: string | null;
     innerRef?: RefObject<HTMLElement>;
     className?: string;
     maxMenuHeight?: number;