@mailstep/design-system 0.8.9 → 0.8.11-beta.1

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -74,6 +74,6 @@ var CommonGridContainer = function (props) {
         allowSortingOnlyUnderTotalRows: allowSortingOnlyUnderTotalRows,
         totalRowsCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount
     }), isSortTerminatedAppeal = _l.isSortTerminatedAppeal, isSortTerminated = _l.isSortTerminated;
-    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extendedExtraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, isSortTerminated: isSortTerminated, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(GridInfo, { isSortTerminatedAppeal: isSortTerminatedAppeal, isSortTerminated: isSortTerminated }), withPagination && (_jsxs(x.div, { display: "flex", alignItems: "center", className: "paginatorWrapper", children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, autoRowsPerPage: autoRowsPerPage })] }))] })] })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(ContentContainer, { ref: gridRef, children: [_jsxs(CommonGridWrap, { withPagination: withPagination, children: [withButtonStrip && (_jsx(HidePrint, { children: _jsx(StyledButtonStrip, { className: "buttonsStrip", children: _jsx(ControlButtons, { hideControlButtons: hideControlButtons, extraControlButtons: extendedExtraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, quickFilter: quickFilter, columns: columns, filters: filters, setDisplayManageColumnButton: setDisplayManageColumnButton, displayManageColumnButton: displayManageColumnButton, openManageColumnForm: openManageColumnForm, onOpenPresetsModal: onOpenPresetsModal, selectedPresetName: selectedPresetName, withPresets: withPresets, gridName: gridName, withManageColumnButton: withManageColumnButton }) }) })), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { withButtonStrip: withButtonStrip, hasGroupsOrFilters: hasGroupsOrFilters, filters: filters, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasFilters: hasFilters, hasGroups: hasGroups, isSortTerminated: isSortTerminated, hasColouredRows: true }))] }), _jsxs(BottomWrapper, { withPagination: withPagination, children: [(processCheckedValues || !!((_a = actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions) === null || _a === void 0 ? void 0 : _a.length)) && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionOptions: actionColumnDefinition === null || actionColumnDefinition === void 0 ? void 0 : actionColumnDefinition.actionOptions, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "space-between", alignItems: "center", w: "100%", children: [_jsx(GridInfo, { isSortTerminatedAppeal: isSortTerminatedAppeal, isSortTerminated: isSortTerminated }), withPagination && (_jsxs(x.div, { display: "flex", alignItems: "center", className: "paginatorWrapper", children: [_jsx(Pagination, { page: gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.page, itemCount: passDownProps === null || passDownProps === void 0 ? void 0 : passDownProps.totalRowsCount, itemPerPage: (gridSelectors === null || gridSelectors === void 0 ? void 0 : gridSelectors.rowsPerPage) || 10, onPageChange: gridActions === null || gridActions === void 0 ? void 0 : gridActions.setPage, customPaginationHandler: customPaginationHandler, radius: window.innerWidth < 768 ? 3 : 5, rate: window.innerWidth < 768 ? 1 : 4 }), _jsx(TablePagination, { gridActions: gridActions, gridSelectors: gridSelectors, customPaginationHandler: customPaginationHandler, autoRowsPerPage: autoRowsPerPage })] }))] })] })] }), _jsx(GridModals, { manageColumnFormVisible: manageColumnFormVisible, onCloseForm: onCloseForm, resetColumnConfig: resetColumnConfig, onConfirmForm: onConfirmForm, manageColumnsFormDefinitions: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true), gridName: gridName, gridActions: gridActions, gridSelectors: gridSelectors, onClosePresetsModal: onClosePresetsModal, isPresetsModalOpen: isPresetsModalOpen, selectedPresetName: selectedPresetName, setSelectedPresetName: setSelectedPresetName })] }));
 };
 export default CommonGridContainer;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts

@@ -6,7 +6,7 @@ type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     quickFilter?: CommonGridProps['quickFilter'];
-    displayColumnsDefinitions?: Array<ColumnDefinition<string>>;
+    columns?: Array<ColumnDefinition<string>>;
     filters?: FiltersConfig;
     hideControlButtons?: boolean;
     displayManageColumnButton?: boolean;

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

@@ -25,12 +25,12 @@ import { Trans } from '@lingui/react';
 import { x } from '@xstyled/styled-components';
 import { ControlButtonsContainer, Left, Right, StyledColumnButton } from './styles';
 var ControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets, withManageColumnButton = _a.withManageColumnButton;
+    var extraControlButtons = _a.extraControlButtons, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _b = _a.quickFilter, quickFilter = _b === void 0 ? '' : _b, columns = _a.columns, filters = _a.filters, hideControlButtons = _a.hideControlButtons, displayManageColumnButton = _a.displayManageColumnButton, openManageColumnForm = _a.openManageColumnForm, setDisplayManageColumnButton = _a.setDisplayManageColumnButton, onOpenPresetsModal = _a.onOpenPresetsModal, gridName = _a.gridName, selectedPresetName = _a.selectedPresetName, withPresets = _a.withPresets, withManageColumnButton = _a.withManageColumnButton;
     var _c = useQuickFilter({
         gridActions: gridActions,
         gridSelectors: gridSelectors,
         quickFilter: quickFilter,
-        displayColumnsDefinitions: displayColumnsDefinitions,
+        columns: columns,
         filters: filters
     }), searchedValue = _c.searchedValue, translatedValue = _c.translatedValue, onChangeInputValue = _c.onChangeInputValue, onClear = _c.onClear, onClearSettings = _c.onClearSettings, onDisplayInput = _c.onDisplayInput, displayInput = _c.displayInput, isMobileInputView = _c.isMobileInputView, isMobile = _c.isMobile, filter = _c.filter;
     useEffect(function () {

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

@@ -11,7 +11,7 @@ type Props = {
     checkAllButton?: boolean;
     asyncLoadKey?: string;
     isClearable?: boolean;
-    onlyInComparator?: boolean;
+    withNotEqComparator?: boolean;
     disabled?: boolean;
     placeholder?: string;
     showValue?: boolean;

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

@@ -64,7 +64,7 @@ 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, 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 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;
     var _e = useState([]), loadedOptions = _e[0], setLoadedOptions = _e[1];
     var _f = useState(false), isNotEqNoValue = _f[0], setIsNotEqNoValue = _f[1];
     var isAsync = !!asyncLoadKey;
@@ -104,9 +104,9 @@ var SelectFilter = function (_a) {
     var isSelectClearable = isWide ? isClearable : false;
     var placeholderValue = placeholder || (isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined);
     if (isMulti) {
-        var placeholderIcon = isWide ? (isNotEq ? 'notEqual' : 'equals') : null;
+        var placeholderIcon = isWide && isAsync ? (isNotEq ? 'notEqual' : 'equals') : null;
         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: placeholderValue, 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(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 }));
     }
     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 }));
 };

package/ui/Blocks/CommonGrid/hooks/useManageColumn.js

@@ -60,7 +60,7 @@ var useManageColumn = function (_a) {
         setColumnsConfigOptions(columnConfig || {});
     }, [columnsOrderValue, onClose]);
     var getSortedColumns = useCallback(function (orderValues, isManageModal) {
-        var list = !isManageModal ? columns.filter(function (column) { return isColumnOn(column, columnsConfigOptions); }) : columns;
+        var list = columns.filter(function (column) { return isManageModal ? !column.alwaysOff : isColumnOn(column, columnsConfigOptions); });
         var sortFunction = function (col1, col2) {
             var i = (orderValues || []).indexOf(col1.name);
             var j = (orderValues || []).indexOf(col2.name);

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts

@@ -6,10 +6,10 @@ type Props = {
     gridSelectors: GridSelectorsType;
     quickFilter?: CommonGridProps['quickFilter'];
     filter?: CommonGridProps['gridSelectors']['filter'];
-    displayColumnsDefinitions?: ColumnDefinition<string>[];
+    columns?: ColumnDefinition<string>[];
     filters?: FiltersConfig;
 };
-declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters }: Props) => {
+declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, columns, filters }: Props) => {
     searchedValue: string;
     translatedValue: import('react').ReactNode;
     onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js

@@ -12,7 +12,7 @@ var defaultVoidFunction = function () {
 };
 var useQuickFilter = function (_a) {
     var _b, _c;
-    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters;
+    var gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, quickFilter = _a.quickFilter, columns = _a.columns, filters = _a.filters;
     var _d = gridActions.addFilter, addFilter = _d === void 0 ? defaultVoidFunction : _d, _e = gridActions.clearSettings, clearSettings = _e === void 0 ? defaultVoidFunction : _e;
     var filter = gridSelectors.filter;
     var isMobile = useCheckDeviceWidth().isMobile;
@@ -20,7 +20,7 @@ var useQuickFilter = function (_a) {
     var _g = useState(false), displayInput = _g[0], setDisplayInput = _g[1];
     var handleAddFilter = useAddFilter(addFilter);
     var quickFilterValues = quickFilter ? (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value : undefined;
-    var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.find(function (item) { return item.name === quickFilter; })) || null;
+    var searchedColumnsDefinitions = (columns === null || columns === void 0 ? void 0 : columns.find(function (item) { return item.name === quickFilter; })) || null;
     var filterType = createFilterType(searchedColumnsDefinitions || {});
     var filtersDefaultComparator = ((_c = filters === null || filters === void 0 ? void 0 : filters[filterType].defaultExtraProps) === null || _c === void 0 ? void 0 : _c.defaultComparator) || 'eq';
     var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;

package/ui/Blocks/CommonGrid/storybook/stories/complexWithPaginationAndRedux.stories.js

@@ -47,7 +47,7 @@ export default {
     title: 'Blocks/CommonGrid',
     decorators: [withRedux]
 };
-export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "textColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
+export var ComplexWithPaginationAndRedux = function () { return (_jsxs(LinguiContainer, { children: [_jsx(ConnectedFilterSetter, { gridActions: gridDummyActions }), _jsx(ReduxGrid, { columnsDefinitions: columnDefinitions, actionColumnDefinition: ActionColumnButtons, rowsData: createRandomData(10), onRowAction: onRowAction, onRowClick: onRowClick, onRowReadClick: onRowReadClick, onRowEditClick: onRowEditClick, totalRowsCount: 200, onBatchAction: onBatchAction, getRowsPerPage: getRowsPerPage, onAsyncLoadFilterOptions: onAsyncLoadFilterOptions, quickFilter: "alwaysOffColumn", extraControlButtons: extraControlButtons, comparators: comparators, gridName: "gridName" })] })); };
 ComplexWithPaginationAndRedux.story = {
     name: 'Complex, with pagination and redux'
 };

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

@@ -108,5 +108,11 @@ export var columnDefinitions = [
         alwaysOn: true,
         sticky: true,
         stickTo: 'right'
+    },
+    {
+        name: 'alwaysOffColumn',
+        title: 'Always Off Column',
+        flexBasis: 0,
+        alwaysOff: true,
     }
 ];

package/ui/Blocks/CommonGrid/types.d.ts

@@ -117,7 +117,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
         isUuid?: boolean;
         defaultComparator?: string;
         checkAllButton?: boolean;
-        onlyInComparator?: boolean;
+        withNotEqComparator?: boolean;
     };
     getFilterCriteria?: (value: string) => Record<string, any> | null;
     filterOptions?: Option[];
@@ -128,6 +128,7 @@ export type ColumnDefinition<ColumnName extends string = string> = ColumnBasePro
     flexShrink?: number;
     fixedSize?: boolean;
     alwaysOn?: boolean;
+    alwaysOff?: boolean;
     defaultHidden?: boolean;
     sticky?: boolean;
     stickTo?: StickTo;

package/ui/Blocks/CommonGrid/utils/index.js

@@ -26,6 +26,8 @@ export var isColumnOn = function (column, columnConfig) {
     var _a;
     if (column.alwaysOn)
         return true;
+    if (column.alwaysOff)
+        return false;
     var isHidden = (_a = columnConfig === null || columnConfig === void 0 ? void 0 : columnConfig[column.name]) === null || _a === void 0 ? void 0 : _a.isHidden;
     if (typeof isHidden === 'boolean')
         return !isHidden; // isHidden is defined/stored => use user value