venice-ui 3.0.36 → 3.0.39

package/dist/cjs/components/DatePicker/DatePicker.js

@@ -48,7 +48,7 @@ const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVar
     months: config_2.wordbook.calendar.months,
     weekdaysShort: config_2.wordbook.calendar.weekdaysShort,
     firstDayOfWeek: 1,
-}, placeholder = config_2.wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth }) => {
+}, placeholder = config_2.wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth, withoutClearIcon = false }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -89,7 +89,7 @@ const DatePicker = ({ name, value, label, labelPosition = 'top', theme, themeVar
             react_1.default.createElement(DatePicker_styles_1.DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
                 value ? (0, date_fns_1.format)(new Date(value), 'dd-MM-yyyy') : placeholder,
                 react_1.default.createElement(Aligment_1.Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
-                    value && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
+                    (value && !withoutClearIcon) && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
                             if (e?.stopPropagation) {
                                 e.stopPropagation();
                             }

package/dist/cjs/components/Filters/Filters.js

@@ -90,27 +90,12 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
         return headers
             .filter((h) => !h.action)
             .map((h) => {
+            const type = h.filterType || 'select';
             const key = h.valueSource || h.name;
             const values = (elements || [])
                 .map((it) => it?.[key])
                 .filter((v) => v !== undefined && v !== null);
-            const nameLower = (h.name || '').toString().toLowerCase();
-            if (nameLower === 'age' || nameLower.includes('age')) {
-                const nums = values
-                    .map((v) => Number(v))
-                    .filter((n) => !Number.isNaN(n));
-                const min = nums.length ? Math.min(...nums) : 0;
-                const max = nums.length ? Math.max(...nums) : 0;
-                return {
-                    label: h.name,
-                    name: key,
-                    type: 'range',
-                    min,
-                    max,
-                    collapsible: true,
-                };
-            }
-            if (h.scope && h.scope.length) {
+            if (type === 'select' && h.scope && h.scope.length) {
                 return {
                     label: h.name,
                     name: key,
@@ -119,26 +104,26 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
                     collapsible: true,
                 };
             }
-            if (h.date) {
+            if (type === 'date') {
                 const dates = values
                     .map((v) => (v ? new Date(v).getTime() : NaN))
                     .filter((d) => !Number.isNaN(d));
                 const min = dates.length
-                    ? new Date(Math.min(...dates)).toISOString()
+                    ? Math.min(...dates)
                     : undefined;
                 const max = dates.length
-                    ? new Date(Math.max(...dates)).toISOString()
+                    ? Math.max(...dates)
                     : undefined;
                 return {
                     label: h.name,
                     name: key,
                     type: 'date',
-                    min,
-                    max,
+                    min: min,
+                    max: max,
                     collapsible: true,
                 };
             }
-            if (h.isCount) {
+            if (type === 'range') {
                 const nums = values
                     .map((v) => Number(v))
                     .filter((n) => !Number.isNaN(n));
@@ -151,19 +136,6 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
                     collapsible: true,
                 };
             }
-            const numericValues = values
-                .map((v) => Number(v))
-                .filter((n) => !Number.isNaN(n));
-            if (numericValues.length === values.length && values.length > 0) {
-                return {
-                    label: h.name,
-                    name: key,
-                    type: 'range',
-                    min: Math.min(...numericValues),
-                    max: Math.max(...numericValues),
-                    collapsible: true,
-                };
-            }
             return {
                 label: h.name,
                 name: key,
@@ -172,7 +144,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
                 collapsible: true,
             };
         });
-    }, [filters, headers, elements]);
+    }, [filters, headers, elements, fullElements]);
     const generateStateObj = (0, react_1.useCallback)(() => {
         const obj = {};
         filtersConfig.forEach((filter) => {
@@ -192,6 +164,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
         });
         return obj;
     }, [filtersConfig]);
+    console.log(filtersConfig);
     const [openFilters, setOpenFilters] = (0, react_1.useState)(false);
     const [activeFilters, setActiveFilters] = (0, react_1.useState)(generateStateObj());
     const [collapsedFilters, setCollapsedFilters] = (0, react_1.useState)({});
@@ -275,6 +248,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
     }, []);
     const setRangeFilter = (0, react_1.useCallback)((name, value) => {
         const [filterName, filterParam] = String(name).split('_');
+        console.log(filterName, filterParam, value);
         setActiveFilters((prev) => ({
             ...prev,
             [filterName]: { ...prev[filterName], [filterParam]: value },
@@ -321,8 +295,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
             else if (f.type === 'date') {
                 if (!isFilterActive(f))
                     return;
-                const fromTsRaw = normalizeDateValue(f.min);
-                const toTsRaw = normalizeDateValue(f.max);
+                const fromTsRaw = f.min;
+                const toTsRaw = f.max;
                 const fromDate = fromTsRaw !== undefined ? new Date(fromTsRaw) : null;
                 const toDate = toTsRaw !== undefined ? new Date(toTsRaw) : null;
                 const fromTs = fromDate
@@ -427,10 +401,12 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
                         react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
                         react_1.default.createElement(Numerical_1.Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
             case 'date':
+                const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
+                const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
                 return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     react_1.default.createElement(Filters_styles_1.FilterGrid, null,
-                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
-                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }))));
+                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }),
+                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }))));
             case 'text':
                 return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));

package/dist/esm/components/DatePicker/DatePicker.js

@@ -12,7 +12,7 @@ export const DatePicker = ({ name, value, label, labelPosition = 'top', theme, t
     months: wordbook.calendar.months,
     weekdaysShort: wordbook.calendar.weekdaysShort,
     firstDayOfWeek: 1,
-}, placeholder = wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth }) => {
+}, placeholder = wordbook.calendar.placeholder, size = 'md', width = '100%', disabled = false, error = false, helperText, readOnly = false, required = false, optional = false, optionalLabel, isAdvance = false, autoConfirm: autoConfirmProp, componentWidth, withoutClearIcon = false }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -53,7 +53,7 @@ export const DatePicker = ({ name, value, label, labelPosition = 'top', theme, t
             React.createElement(DatePickerValue, { theme: resolvedTheme, config: datePickerConfig, size: size },
                 value ? format(new Date(value), 'dd-MM-yyyy') : placeholder,
                 React.createElement(Aligment, { width: "auto", align: "flex-end", gap: datePickerConfig.size.common.iconGap },
-                    value && !readOnly && (React.createElement(Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
+                    (value && !withoutClearIcon) && !readOnly && (React.createElement(Icon, { name: "close", size: datePickerConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: (e) => {
                             if (e?.stopPropagation) {
                                 e.stopPropagation();
                             }

package/dist/esm/components/Filters/Filters.js

@@ -54,27 +54,12 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
         return headers
             .filter((h) => !h.action)
             .map((h) => {
+            const type = h.filterType || 'select';
             const key = h.valueSource || h.name;
             const values = (elements || [])
                 .map((it) => it?.[key])
                 .filter((v) => v !== undefined && v !== null);
-            const nameLower = (h.name || '').toString().toLowerCase();
-            if (nameLower === 'age' || nameLower.includes('age')) {
-                const nums = values
-                    .map((v) => Number(v))
-                    .filter((n) => !Number.isNaN(n));
-                const min = nums.length ? Math.min(...nums) : 0;
-                const max = nums.length ? Math.max(...nums) : 0;
-                return {
-                    label: h.name,
-                    name: key,
-                    type: 'range',
-                    min,
-                    max,
-                    collapsible: true,
-                };
-            }
-            if (h.scope && h.scope.length) {
+            if (type === 'select' && h.scope && h.scope.length) {
                 return {
                     label: h.name,
                     name: key,
@@ -83,26 +68,26 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
                     collapsible: true,
                 };
             }
-            if (h.date) {
+            if (type === 'date') {
                 const dates = values
                     .map((v) => (v ? new Date(v).getTime() : NaN))
                     .filter((d) => !Number.isNaN(d));
                 const min = dates.length
-                    ? new Date(Math.min(...dates)).toISOString()
+                    ? Math.min(...dates)
                     : undefined;
                 const max = dates.length
-                    ? new Date(Math.max(...dates)).toISOString()
+                    ? Math.max(...dates)
                     : undefined;
                 return {
                     label: h.name,
                     name: key,
                     type: 'date',
-                    min,
-                    max,
+                    min: min,
+                    max: max,
                     collapsible: true,
                 };
             }
-            if (h.isCount) {
+            if (type === 'range') {
                 const nums = values
                     .map((v) => Number(v))
                     .filter((n) => !Number.isNaN(n));
@@ -115,19 +100,6 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
                     collapsible: true,
                 };
             }
-            const numericValues = values
-                .map((v) => Number(v))
-                .filter((n) => !Number.isNaN(n));
-            if (numericValues.length === values.length && values.length > 0) {
-                return {
-                    label: h.name,
-                    name: key,
-                    type: 'range',
-                    min: Math.min(...numericValues),
-                    max: Math.max(...numericValues),
-                    collapsible: true,
-                };
-            }
             return {
                 label: h.name,
                 name: key,
@@ -136,7 +108,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
                 collapsible: true,
             };
         });
-    }, [filters, headers, elements]);
+    }, [filters, headers, elements, fullElements]);
     const generateStateObj = useCallback(() => {
         const obj = {};
         filtersConfig.forEach((filter) => {
@@ -156,6 +128,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
         });
         return obj;
     }, [filtersConfig]);
+    console.log(filtersConfig);
     const [openFilters, setOpenFilters] = useState(false);
     const [activeFilters, setActiveFilters] = useState(generateStateObj());
     const [collapsedFilters, setCollapsedFilters] = useState({});
@@ -239,6 +212,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
     }, []);
     const setRangeFilter = useCallback((name, value) => {
         const [filterName, filterParam] = String(name).split('_');
+        console.log(filterName, filterParam, value);
         setActiveFilters((prev) => ({
             ...prev,
             [filterName]: { ...prev[filterName], [filterParam]: value },
@@ -285,8 +259,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
             else if (f.type === 'date') {
                 if (!isFilterActive(f))
                     return;
-                const fromTsRaw = normalizeDateValue(f.min);
-                const toTsRaw = normalizeDateValue(f.max);
+                const fromTsRaw = f.min;
+                const toTsRaw = f.max;
                 const fromDate = fromTsRaw !== undefined ? new Date(fromTsRaw) : null;
                 const toDate = toTsRaw !== undefined ? new Date(toTsRaw) : null;
                 const fromTs = fromDate
@@ -391,10 +365,12 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
                         React.createElement(Numerical, { type: "number", name: `${filter.name}_min`, value: activeFilters[filter.name]?.min ?? '', handleChange: setRangeFilter, componentWidth: '100%' }),
                         React.createElement(Numerical, { type: "number", name: `${filter.name}_max`, value: activeFilters[filter.name]?.max ?? '', handleChange: setRangeFilter, componentWidth: '100%' }))));
             case 'date':
+                const minValue = activeFilters[filter.name]?.min !== '' ? activeFilters[filter.name]?.min : activeFilters[filter.name]?.rangeMin;
+                const maxValue = activeFilters[filter.name]?.max !== '' ? activeFilters[filter.name]?.max : activeFilters[filter.name]?.rangeMax;
                 return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     React.createElement(FilterGrid, null,
-                        React.createElement(DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }),
-                        React.createElement(DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder }))));
+                        React.createElement(DatePicker, { name: `${filter.name}_min`, value: minValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }),
+                        React.createElement(DatePicker, { name: `${filter.name}_max`, value: maxValue, isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex, placeholder: calendarLabels?.placeholder, withoutClearIcon: true }))));
             case 'text':
                 return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     React.createElement(Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -25,6 +25,7 @@ interface IDatePickerProps {
     autoConfirm?: boolean;
     placeholder?: string;
     componentWidth?: string;
+    withoutClearIcon?: boolean;
 }
 export declare const DatePicker: FC<IDatePickerProps>;
 export {};

package/dist/types/components/Filters/Filters.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { AppTheme, ThemeName } from '../../config';
-import { ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
+import { FilterType, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
 interface IHeader {
     name: string;
     valueSource?: string;
@@ -11,6 +11,7 @@ interface IHeader {
         value?: string;
         label?: string;
     }>;
+    filterType?: FilterType;
 }
 export interface IApplyFilterResults {
     name: string;
@@ -31,7 +32,7 @@ export interface IFilterProps {
     }>;
     label: string;
     name: string;
-    type: 'select' | 'range' | string;
+    type: 'select' | 'range' | 'date' | 'text';
     allowValues?: string[] | number[];
     min?: number;
     max?: number;

package/dist/types/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { AppTheme, ThemeName } from '../../config';
 import { FC } from 'react';
-import { IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
+import { FilterType, IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
 interface ITableProps {
     theme?: AppTheme;
     themeVariant?: ThemeName;
@@ -33,6 +33,7 @@ export interface ITableHeaderProps {
     isCount?: boolean;
     scope?: ITableScopeProps[];
     size?: InputSize;
+    filterType?: FilterType;
 }
 export interface ITableSortProps {
     name: string;

package/dist/types/types/types.d.ts

@@ -8,3 +8,4 @@ export type TIconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xl2' | 'xl3' | 'xl4'
 export type THelperMode = 'default' | 'error' | 'success';
 export type AdditionalType = 'button' | 'toggle';
 export type TagType = 'default' | 'success' | 'warning' | 'error';
+export type FilterType = 'text' | 'number' | 'date' | 'select' | 'range';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.36",
+  "version": "3.0.39",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",