@mailstep/design-system 0.6.12 → 0.6.14

package/package.json

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

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -40,7 +40,7 @@ import ManageColumnForm from './components/ManageColumnForm';
 import { Trans } from '@lingui/react';
 import { Settings2 } from '../../Elements/Icon/icons/Settings2';
 var StyledCommonGrid = function (props) {
-    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
+    var _a = props.optimizeFilters, optimizeFilters = _a === void 0 ? false : _a, extraControlButtons = props.extraControlButtons, eshopSelect = props.eshopSelect, onBatchAction = props.onBatchAction, processCheckedValues = props.processCheckedValues, processCheckedValuesTitle = props.processCheckedValuesTitle, hideControlButtons = props.hideControlButtons, quickFilter = props.quickFilter, floatingButtonProps = props.floatingButtonProps, queryRowsParam = props.queryRowsParam, customPaginationHandler = props.customPaginationHandler, passDownProps = __rest(props, ["optimizeFilters", "extraControlButtons", "eshopSelect", "onBatchAction", "processCheckedValues", "processCheckedValuesTitle", "hideControlButtons", "quickFilter", "floatingButtonProps", "queryRowsParam", "customPaginationHandler"]);
     var gridActions = passDownProps.gridActions, gridSelectors = passDownProps.gridSelectors, rowsData = passDownProps.rowsData, actionColumnDefinition = passDownProps.actionColumnDefinition;
     var _b = useGetGridHeight(), gridHeight = _b.gridHeight, gridRef = _b.gridRef, paginationRef = _b.paginationRef;
     useEffect(function () {
@@ -61,6 +61,6 @@ var StyledCommonGrid = function (props) {
         gridSelectors: gridSelectors,
         onClose: onClose,
     }), columnsConfigValues = _d.columnsConfigValues, setColumnsConfigOptions = _d.setColumnsConfigOptions, onConfirmForm = _d.onConfirmForm, resetColumnConfig = _d.resetColumnConfig, handleDragEnd = _d.handleDragEnd, onCloseForm = _d.onCloseForm, displayColumnsDefinitions = _d.displayColumnsDefinitions, manageColumnsFormDefinitions = _d.manageColumnsFormDefinitions;
-    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect })), _jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', 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 })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
+    return (_jsxs(ContentContainer, { children: [_jsxs(CommonGridWrap, { children: [_jsx(HidePrint, { children: _jsxs(StyledButtonStrip, { className: "buttonsStrip", children: [!hideControlButtons && (_jsx(ControlButtons, { extraControlButtons: extraControlButtons, gridActions: gridActions, gridSelectors: gridSelectors, eshopSelect: eshopSelect, quickFilter: quickFilter, displayColumnsDefinitions: displayColumnsDefinitions, filters: filters })), _jsx(StyledColumnButton, { type: "button", variant: "ghost", appearance: "primary", iconLeft: _jsx(Settings2, {}), onClick: openManageColumnForm, children: _jsx(H6, { variant: "semiBold", mt: 0, mb: 0, children: _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }) }) })] }) }), _jsx(CommonGridWithStyles, __assign({}, passDownProps, modifiedPassDownProps, { filters: filters, gridRef: gridRef, height: gridHeight, floatingButtonProps: floatingButtonProps, handleDragEnd: handleDragEnd(false), displayColumnsDefinitions: displayColumnsDefinitions, hasColouredRows: true }))] }), _jsx(HidePrint, { children: _jsxs(BottomWrapper, { ref: paginationRef, isFixed: !!gridHeight, children: [processCheckedValues && (_jsx(ActionHead, { rowsData: rowsData, onBatchAction: onBatchAction, gridActions: gridActions, gridSelectors: gridSelectors, actionColumn: actionColumnDefinition, processCheckedValues: processCheckedValues, processCheckedValuesTitle: processCheckedValuesTitle })), _jsxs(x.div, { display: "flex", justifyContent: "center", alignItems: "center", className: "paginatorWrapper", w: "100%", h: window.innerWidth > 1204 ? '60px' : '32px', 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 })] })] }) }), manageColumnFormVisible && (_jsx(Modal, { title: _jsx(Trans, { id: "manageColumn.title", message: "Manage columns" }), onClose: onCloseForm, onCancel: onCloseForm, onExtraAction: resetColumnConfig, onConfirm: onConfirmForm, width: "auto", minWidth: "350px", hasFooter: true, extraActionLabel: _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), cancelLabel: _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), confirmLabel: _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), children: _jsx(ManageColumnForm, { columns: manageColumnsFormDefinitions, columnsConfigValues: columnsConfigValues, setColumnsConfigOptions: setColumnsConfigOptions, handleDragEnd: handleDragEnd(true) }) }))] }));
 };
 export default StyledCommonGrid;

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

@@ -1,4 +1,4 @@
-import { CommonGridProps, GridActionsType, GridSelectorsType } from '../../types';
+import { CommonGridProps, GridActionsType, GridSelectorsType, ColumnDefinition, FiltersConfig } from '../../types';
 export declare const Row: import("styled-components").StyledComponent<"div", import("@xstyled/system").Theme, {}, never>;
 type Props = {
     columns?: CommonGridProps['columnsDefinitions'];
@@ -6,6 +6,9 @@ type Props = {
     eshopSelect: CommonGridProps['extraControlButtons'];
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
+    quickFilter?: CommonGridProps['quickFilter'];
+    displayColumnsDefinitions?: ColumnDefinition<string>[];
+    filters?: FiltersConfig;
 };
-declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors }: Props) => JSX.Element;
+declare const ControlButtons: ({ extraControlButtons, eshopSelect, gridActions, gridSelectors, quickFilter, displayColumnsDefinitions, filters, }: Props) => JSX.Element;
 export default ControlButtons;

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

@@ -3,18 +3,63 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from 'react';
 import styled, { x } from '@xstyled/styled-components';
 import { Trans } from '@lingui/react';
 import ExtraControlButtons from '../ExtraControlButtons';
-import { ExtraControlButtonPosition } from '../../types';
+import { ExtraControlButtonPosition, } from '../../types';
 import Button from '../../../../Elements/Button/Button';
+import { i18n } from '@lingui/core';
+import { useAddFilter } from '../../hooks/useAddFilter';
+import { createFilterType } from '../../utils';
+import { isObject } from 'lodash';
+import QuickFilter from '../QuickFilter';
 export var Row = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"], ["\n  display: flex;\n  position: sticky;\n  left: 20px;\n"])));
+var defaultVoidFunction = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return null;
+};
 var ControlButtons = function (_a) {
-    var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors;
-    var resetFilters = gridActions.resetFilters;
+    var _b, _c, _d, _e, _f, _g;
+    var extraControlButtons = _a.extraControlButtons, eshopSelect = _a.eshopSelect, gridActions = _a.gridActions, gridSelectors = _a.gridSelectors, _h = _a.quickFilter, quickFilter = _h === void 0 ? '' : _h, displayColumnsDefinitions = _a.displayColumnsDefinitions, filters = _a.filters;
+    var resetFilters = gridActions.resetFilters, _j = gridActions.addFilter, addFilter = _j === void 0 ? defaultVoidFunction : _j;
     var filter = gridSelectors.filter;
+    var _k = useState(''), searchedValue = _k[0], setSearchedValue = _k[1];
+    var handleAddFilter = useAddFilter(addFilter);
+    var quickFilterValues = (_b = filter === null || filter === void 0 ? void 0 : filter[quickFilter]) === null || _b === void 0 ? void 0 : _b.value;
+    var searchedColumnsDefinitions = (displayColumnsDefinitions === null || displayColumnsDefinitions === void 0 ? void 0 : displayColumnsDefinitions.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;
+    var searchComparator = (quickFilterValues && quickFilterValues.comparator) || filtersDefaultComparator;
     var filtersOn = !!filter && Object.values(filter).some(function (item) { var _a; return ((_a = item.value) === null || _a === void 0 ? void 0 : _a.value) !== '' && item.value !== ''; });
-    return (_jsxs(Row, { children: [eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: resetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
+    useEffect(function () {
+        quickFilterValues && setSearchedValue(quickFilterValues.value);
+    }, [quickFilterValues, quickFilter]);
+    var onChangeInputValue = useCallback(function (e) {
+        setSearchedValue(e.target.value);
+        var value = {
+            comparator: searchComparator,
+            value: e.target.value,
+        };
+        searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
+    }, [setSearchedValue, searchComparator, handleAddFilter, searchedColumnsDefinitions]);
+    var onResetFilters = useCallback(function () {
+        resetFilters === null || resetFilters === void 0 ? void 0 : resetFilters();
+        setSearchedValue === null || setSearchedValue === void 0 ? void 0 : setSearchedValue('');
+    }, []);
+    var translatedValue = searchedColumnsDefinitions &&
+        isObject(searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
+        'props' in (searchedColumnsDefinitions === null || searchedColumnsDefinitions === void 0 ? void 0 : searchedColumnsDefinitions.title) &&
+        ((_d = searchedColumnsDefinitions.title) === null || _d === void 0 ? void 0 : _d.props) &&
+        i18n._({ id: (_f = (_e = searchedColumnsDefinitions.title) === null || _e === void 0 ? void 0 : _e.props) === null || _f === void 0 ? void 0 : _f.id, message: (_g = searchedColumnsDefinitions.title) === null || _g === void 0 ? void 0 : _g.props.message });
+    return (_jsxs(Row, { children: [quickFilter && (_jsx(QuickFilter, { searchedValue: searchedValue, placeholderText: i18n._({
+                    id: 'controlButtons.searchPlaceholder',
+                    message: "Search ".concat(translatedValue, " ..."),
+                    values: { translatedValue: translatedValue },
+                }), onChange: onChangeInputValue })), eshopSelect && (_jsx(x.div, { children: _jsx(ExtraControlButtons, { extraControlButtons: eshopSelect, targetPosition: ExtraControlButtonPosition.TopRight }) })), _jsx(ExtraControlButtons, { extraControlButtons: extraControlButtons, targetPosition: ExtraControlButtonPosition.TopLeft }), _jsx(x.div, { children: filtersOn && (_jsx(Button, { type: "button", onClick: onResetFilters, variant: "default", appearance: "secondary", "data-cy": "resetFiltersBtn", children: _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }) })) })] }));
 };
 export default ControlButtons;
 var templateObject_1;

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

@@ -0,0 +1,8 @@
+import { ChangeEvent } from 'react';
+type QuickFilterProps = {
+    searchedValue: string;
+    placeholderText?: string;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+};
+declare const QuickFilter: ({ searchedValue, placeholderText, onChange }: QuickFilterProps) => import("react/jsx-runtime").JSX.Element;
+export default QuickFilter;

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

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Input from '../../../../Forms/Input';
+import { x } from '@xstyled/styled-components';
+var QuickFilter = function (_a) {
+    var searchedValue = _a.searchedValue, placeholderText = _a.placeholderText, onChange = _a.onChange;
+    return (_jsx(x.div, { mr: "12px", children: _jsx(Input, { icon: "search", type: "text", value: searchedValue, placeholder: placeholderText, onChange: onChange, variant: "gray" }) }));
+};
+export default QuickFilter;

package/ui/Blocks/CommonGrid/components/QuickFilter/index.d.ts

@@ -0,0 +1,2 @@
+import QuickFilter from './QuickFilter';
+export default QuickFilter;

package/ui/Blocks/CommonGrid/components/QuickFilter/index.js

@@ -0,0 +1,2 @@
+import QuickFilter from './QuickFilter';
+export default QuickFilter;

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.d.ts

@@ -4,7 +4,6 @@ type Props = {
     appearanceMap: Record<string, FlagAppearanceType>;
     enumObj: Record<string, () => string>;
     size?: 'default' | 'small' | 'wide' | 'fitContent';
-    onClick?: () => void;
 };
-export declare const EnumInCell: ({ value, enumObj, appearanceMap, size, onClick }: Props) => JSX.Element | null;
+export declare const EnumInCell: ({ value, enumObj, appearanceMap, size }: Props) => JSX.Element | null;
 export {};

package/ui/Blocks/CommonGrid/components/gridCells/EnumInCell.js

@@ -19,7 +19,7 @@ import styled from '@xstyled/styled-components';
 import HighlightBox from '../../../../Elements/HighlightBox';
 var Center = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"], ["\n  display: flex;\n  justify-content: flex-start;\n  width: 100%;\n"])));
 export var EnumInCell = function (_a) {
-    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size, onClick = _a.onClick;
+    var value = _a.value, enumObj = _a.enumObj, appearanceMap = _a.appearanceMap, size = _a.size;
     var finalLabel = useMemo(function () {
         return enumObj[value] ? enumObj[value]() : value;
     }, [enumObj, value]);
@@ -28,6 +28,6 @@ export var EnumInCell = function (_a) {
     }, [appearanceMap, value]);
     if (!finalLabel)
         return null;
-    return (_jsx(Center, { onClick: onClick, children: _jsx(HighlightBox, __assign({}, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
+    return (_jsx(Center, { children: _jsx(HighlightBox, __assign({ className: "cell" }, coloringProp, { size: size, prefix: "grid", children: finalLabel })) }));
 };
 var templateObject_1;

package/ui/Blocks/CommonGrid/translations.js

@@ -2,5 +2,5 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { Trans } from '@lingui/react';
 /** catalog for lungui to track commonGrid translations - DO NOT REMOVE */
 var Translations = function () {
-    return (_jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), _jsx(Trans, { id: "dataGrid.buttonGridConfig", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.title", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.buttonReset", message: "Reset all" }), _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }), _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "form.buttonImport", message: "Import" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }), ",", _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }), ",", _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: "select all" }), _jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options' }), ",", _jsx(Trans, { id: "dataGrid.deleteItem", message: "Delete" }), ",", _jsx(Trans, { id: "dataGrid.columnLot.NA", message: "N/A" }), ",", _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }), ",", _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.all", message: "All" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.yes", message: "Yes" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.no", message: "No" }), _jsx(Trans, { id: "products.eshopFilterPlaceholder", message: "Select eshop..." }), ",", _jsx(Trans, { id: "dataGrid.checkedRowsCount", message: "Selected {checkedRowsCount} items" }), ",", _jsx(Trans, { id: "dataGrid.filterCell", message: "Type to filter" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.from", message: "From" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.to", message: "To" }), ",", _jsx(Trans, { id: "manageColumn.searchPlaceholder", message: "Find column..." }), ",", _jsx(Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThan", message: "Less than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.contains", message: "Contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notContains", message: "Not contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.startsWith", message: "Starts with'" }), ",", _jsx(Trans, { id: "dataGrid.comparator.endsWith", message: "Ends with" }), ",", _jsx(Trans, { id: "select.noOptions", message: "no options" }), ",", _jsx(Trans, { id: "components.dropdown.loading", message: "Loading..." }), ",", _jsx(Trans, { id: "components.dropdown.placeholder", message: "Select..." }), ",", _jsx(Trans, { id: "components.dropdown.notReact", message: "Select related values first..." }), ",", _jsx(Trans, { id: "components.dropdown.writeMoreChars", message: "Write at least ${asyncLoadMinChars} characters." }), ",", _jsx(Trans, { id: "components.dropdown.noOptions", message: "No options" }), ",", _jsx(Trans, { id: "components.dropdown.newOption", message: "new value" }), ",", _jsx(Trans, { id: "form.general.min2Chars", message: "Minimal length is 2 characters." }), ","] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Trans, { id: "dataGrid.status.loadingData", message: "... loading data ..." }), _jsx(Trans, { id: "dataGrid.status.noDataFound", message: "No data found." }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "dataGrid.buttonClearConfig", message: "Reset config" }), _jsx(Trans, { id: "dataGrid.buttonGridConfig", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.title", message: "Configure columns" }), _jsx(Trans, { id: "dataGrid.config.buttonReset", message: "Reset all" }), _jsx(Trans, { id: "dataGrid.resultsPerPage", message: "Results per page" }), _jsx(Trans, { id: "manageColumn.title", message: "Manage column" }), _jsx(Trans, { id: "dataGrid.buttonClearSettings", message: "Reset filters" }), _jsx(Trans, { id: "form.buttonCancel", message: "Cancel" }), _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "form.buttonImport", message: "Import" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.export", message: "Export" }), ",", _jsx(Trans, { id: "form.buttonConfirm", message: "Confirm" }), ",", _jsx(Trans, { id: "dataGrid.actionOptions.createNew", message: "Create new" }), ",", _jsx(Trans, { id: "dataGrid.checkAll", message: "Check all" }), ",", _jsx(Trans, { id: "datagrid.filterCell.selectAllLabel", message: "select all" }), _jsx(Trans, { id: "datagrid.filterCell.optionsSelectedLabel", message: '{count} options' }), ",", _jsx(Trans, { id: "dataGrid.deleteItem", message: "Delete" }), ",", _jsx(Trans, { id: "dataGrid.columnLot.NA", message: "N/A" }), ",", _jsx(Trans, { id: "dataGrid.buttonActions", message: "Actions" }), ",", _jsx(Trans, { id: "dataGrid.errors.ipValidationError", message: "Value is not valid ip" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.all", message: "All" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.yes", message: "Yes" }), ",", _jsx(Trans, { id: "dataGrid.columnActive.filterOptions.no", message: "No" }), _jsx(Trans, { id: "products.eshopFilterPlaceholder", message: "Select eshop..." }), ",", _jsx(Trans, { id: "dataGrid.checkedRowsCount", message: "Selected {checkedRowsCount} items" }), ",", _jsx(Trans, { id: "dataGrid.filterCell", message: "Type to filter" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.from", message: "From" }), ",", _jsx(Trans, { id: "dataGrid.filterCell.to", message: "To" }), ",", _jsx(Trans, { id: "manageColumn.searchPlaceholder", message: "Find column..." }), ",", _jsx(Trans, { id: "dataGrid.comparator.equals", message: "Equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notEquals", message: "Not equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThan", message: "Less than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.lessThanOrEquals", message: "Less than or equals" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThan", message: "Greater than" }), ",", _jsx(Trans, { id: "dataGrid.comparator.greaterThanOrEquals", message: "Greater than or equal" }), ",", _jsx(Trans, { id: "dataGrid.comparator.contains", message: "Contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.notContains", message: "Not contains" }), ",", _jsx(Trans, { id: "dataGrid.comparator.startsWith", message: "Starts with'" }), ",", _jsx(Trans, { id: "dataGrid.comparator.endsWith", message: "Ends with" }), ",", _jsx(Trans, { id: "select.noOptions", message: "no options" }), ",", _jsx(Trans, { id: "components.dropdown.loading", message: "Loading..." }), ",", _jsx(Trans, { id: "components.dropdown.placeholder", message: "Select..." }), ",", _jsx(Trans, { id: "components.dropdown.notReact", message: "Select related values first..." }), ",", _jsx(Trans, { id: "components.dropdown.writeMoreChars", message: "Write at least ${asyncLoadMinChars} characters." }), ",", _jsx(Trans, { id: "components.dropdown.noOptions", message: "No options" }), ",", _jsx(Trans, { id: "components.dropdown.newOption", message: "new value" }), ",", _jsx(Trans, { id: "form.general.min2Chars", message: "Minimal length is 2 characters." }), ",", _jsx(Trans, { id: "controlButtons.searchPlaceholder", message: "Search ${translatedValue} ..." }), ","] }));
 };

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

@@ -255,6 +255,7 @@ export type CommonGridProps<TData extends RowProps = RowProps> = {
     onRowClick?: (id: string, props: TData) => void;
     onBatchAction?: OnBatchActionFn;
     columnLayout?: ColumnLayout;
+    quickFilter?: string;
     confirmOnReset?: () => boolean;
     className?: string;
     gridRef?: React.MutableRefObject<HTMLElement>;

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -44,7 +44,8 @@ type HighlightBoxType = {
     children: React.ReactNode;
     appearance: FlagAppearanceType;
     size?: 'default' | 'small' | 'wide' | 'fitContent';
+    className?: string;
     prefix?: string;
 };
-declare const HighlightBox: ({ children, appearance, size, prefix }: HighlightBoxType) => JSX.Element;
+declare const HighlightBox: ({ children, appearance, size, className, prefix }: HighlightBoxType) => JSX.Element;
 export default HighlightBox;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -5,7 +5,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
 import { jsx as _jsx } from "react/jsx-runtime";
 import styled, { useTheme } from '@xstyled/styled-components';
 import { th } from '@xstyled/system';
-var StyledHighlightBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"])), function (_a) {
+var StyledHighlightBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px !important;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"], ["\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px !important;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ", ";\n  color: ", ";\n"])), function (_a) {
     var $bgcolor = _a.$bgcolor;
     return $bgcolor;
 }, function (_a) {
@@ -54,12 +54,12 @@ export var flagAppearanceToFontColorMap = {
     redSubtle: 'red80',
 };
 var HighlightBox = function (_a) {
-    var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, prefix = _a.prefix;
+    var children = _a.children, appearance = _a.appearance, _b = _a.size, size = _b === void 0 ? 'default' : _b, className = _a.className, prefix = _a.prefix;
     var theme = useTheme();
     var bgColor = th.color(appearance ? flagAppearanceToColorMap[appearance] : 'transparent')({ theme: theme });
     var fontColor = th.color(appearance ? flagAppearanceToFontColorMap[appearance] : 'typoPrimary')({ theme: theme });
     var name = !!prefix ? "".concat(prefix, "Label") : 'label';
-    return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size, children: children }) }));
+    return (_jsx(StyledHighlightBox, { "$bgcolor": bgColor, "$fontColor": fontColor, "data-cy": name, children: _jsx(OverflowWrap, { className: size + ' ' + className, children: children }) }));
 };
 export default HighlightBox;
 var templateObject_1, templateObject_2;