venice-ui 3.0.35 → 3.0.38

package/dist/cjs/components/Checkbox/Checkbox.js

@@ -9,7 +9,7 @@ const config_1 = require("../../config");
 const ComponentRoot_1 = require("../ComponentRoot");
 const Checkbox_styles_1 = require("./Checkbox.styles");
 const IconsPath_1 = require("../Icon/IconsPath");
-const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth }) => {
+const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth, noBreakLabel = false }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -26,7 +26,7 @@ const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'to
             handleClick(!value);
         }
     };
-    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
+    return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, noBreakLabel: noBreakLabel, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
         react_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
             react_1.default.createElement(Checkbox_styles_1.CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (react_1.default.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 react_1.default.createElement("path", { d: iconName, fill: isDisabled

package/dist/cjs/components/ComponentRoot/ComponentRoot.js

@@ -10,7 +10,7 @@ const Label_1 = require("../Label");
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = require("styled-components");
 const ComponentRoot_styles_1 = require("./ComponentRoot.styles");
-const ComponentRoot = ({ theme, themeVariant = 'default', label, labelPosition = 'top', size = 'md', width, disabled = false, error = false, readOnly = false, required = false, optional = false, optionalLabel, helperText, componentConfig, children, isActive = false, labelInversed = false, smallSize = false, noBorder = false, noBreakLabel, componentWidth = 'auto' }) => {
+const ComponentRoot = ({ theme, themeVariant = 'default', label, labelPosition = 'top', size = 'md', width, disabled = false, error = false, readOnly = false, required = false, optional = false, optionalLabel, helperText, componentConfig, children, isActive = false, labelInversed = false, smallSize = false, noBorder = false, noBreakLabel = false, componentWidth = 'auto' }) => {
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Aligment_1.Aligment, { align: 'flex-start', direction: labelPosition === 'top'
                 ? 'column'

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) => {
@@ -427,10 +399,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 }),
+                        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 }))));
             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/cjs/components/List/List.js

@@ -82,9 +82,7 @@ const List = ({ theme, themeVariant = 'default', items, handleChange, handleSele
         handleChange(newListOption);
     };
     const selectRow = (id) => {
-        console.log('selectRow', id, handleSelect && isSelectable);
         if (handleSelect && isSelectable) {
-            console.log('action');
             handleSelect(id);
         }
     };

package/dist/cjs/components/Tooltip/Tooltip.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/components/Checkbox/Checkbox.js

@@ -3,7 +3,7 @@ import { resolveThemeWithComponentsConfig } from '../../config';
 import { ComponentRoot } from '../ComponentRoot';
 import { CheckboxBox, CheckboxRoot } from './Checkbox.styles';
 import { iconsPath } from '../Icon/IconsPath';
-export const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth }) => {
+export const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'top', theme, width = 'auto', themeVariant = 'default', handleClick, isIntermedian = false, isDisabled = false, labelInversed = false, error = false, helperText, required = false, optional = false, optionalLabel, componentWidth, noBreakLabel = false }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -20,7 +20,7 @@ export const Checkbox = ({ name, value = false, size = 'md', label, labelPositio
             handleClick(!value);
         }
     };
-    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, noBreakLabel: noBreakLabel, componentWidth: componentWidth ? componentWidth : `${checkboxConfig.size[size].width}px` },
         React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
             React.createElement(CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (React.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 React.createElement("path", { d: iconName, fill: isDisabled

package/dist/esm/components/ComponentRoot/ComponentRoot.js

@@ -4,7 +4,7 @@ import { Label } from '../Label';
 import React from 'react';
 import { ThemeProvider } from 'styled-components';
 import { ComponentWrapper } from './ComponentRoot.styles';
-export const ComponentRoot = ({ theme, themeVariant = 'default', label, labelPosition = 'top', size = 'md', width, disabled = false, error = false, readOnly = false, required = false, optional = false, optionalLabel, helperText, componentConfig, children, isActive = false, labelInversed = false, smallSize = false, noBorder = false, noBreakLabel, componentWidth = 'auto' }) => {
+export const ComponentRoot = ({ theme, themeVariant = 'default', label, labelPosition = 'top', size = 'md', width, disabled = false, error = false, readOnly = false, required = false, optional = false, optionalLabel, helperText, componentConfig, children, isActive = false, labelInversed = false, smallSize = false, noBorder = false, noBreakLabel = false, componentWidth = 'auto' }) => {
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(Aligment, { align: 'flex-start', direction: labelPosition === 'top'
                 ? 'column'

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) => {
@@ -391,10 +363,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 }),
+                        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 }))));
             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/esm/components/List/List.js

@@ -76,9 +76,7 @@ export const List = ({ theme, themeVariant = 'default', items, handleChange, han
         handleChange(newListOption);
     };
     const selectRow = (id) => {
-        console.log('selectRow', id, handleSelect && isSelectable);
         if (handleSelect && isSelectable) {
-            console.log('action');
             handleSelect(id);
         }
     };

package/dist/esm/components/Tooltip/Tooltip.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -20,6 +20,7 @@ interface ICheckboxProps {
     optional?: boolean;
     optionalLabel?: string;
     componentWidth?: string;
+    noBreakLabel?: boolean;
 }
 export declare const Checkbox: FC<ICheckboxProps>;
 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.35",
+  "version": "3.0.38",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",