venice-ui 3.0.43 → 3.0.45

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

@@ -61,7 +61,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
     const resolvedTheme = resolvedThemeData.resolvedTheme;
     const { componentsConfig } = resolvedThemeData;
     const filterConfig = componentsConfig.filters;
-    console.log('fullElements', fullElements);
+    console.log('--------');
+    console.log('filter fullElements', fullElements);
     // const normalizeDateValue = useCallback(
     //   (rawValue: any): number | undefined => {
     //     if (rawValue === undefined || rawValue === null || rawValue === '') {
@@ -77,7 +78,12 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
     //   },
     //   [],
     // )
-    const [source, setSource] = (0, react_1.useState)(fullElements || []);
+    const [source, _setSource] = (0, react_1.useState)(fullElements || []);
+    const sourceRef = (0, react_1.useRef)(source);
+    const setSource = (data) => {
+        sourceRef.current = data;
+        _setSource(data);
+    };
     (0, react_1.useEffect)(() => {
         setSource(fullElements || []);
     }, [fullElements]);
@@ -141,7 +147,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
                     collapsible: true,
                 };
             }
-            if (type === 'select') {
+            if (type === 'select' && h.name === 'joint_name') {
                 console.log('scope', values);
             }
             return {
@@ -360,13 +366,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
             handleSubmitFilters &&
                 handleSubmitFilters((source && source.length ? source : elements) || []);
         }
-    }, [
-        externalClearSignal,
-        clearAll,
-        handleSubmitFilters,
-        source,
-        elements,
-    ]);
+    }, [externalClearSignal, clearAll, handleSubmitFilters, source, elements]);
     const mapListItems = (0, react_1.useCallback)((filterName, allowValues) => {
         const sel = (activeFilters[filterName]?.value || []).map(String);
         return (allowValues || []).map((v) => ({

package/dist/cjs/components/Table/Table.js

@@ -55,67 +55,55 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
     const resolvedTheme = resolvedThemeData.resolvedTheme;
     const { componentsConfig } = resolvedThemeData;
     const tableConfig = componentsConfig.table;
-    const initialElementsRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        if (!initialElementsRef.current &&
-            Array.isArray(elements) &&
-            elements.length > 0) {
-            initialElementsRef.current = elements.slice();
-        }
-        setTableProps((prev) => ({
-            ...prev,
-            elements: Array.isArray(elements) ? elements : [],
-        }));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [elements]);
-    const checkHeaders = () => {
-        const tableHeaders = [...headers];
+    const tableHeaders = (0, react_1.useMemo)(() => {
+        const nextHeaders = [...headers];
         if (moreActions.length > 0) {
-            tableHeaders.push({
+            nextHeaders.push({
                 name: 'option',
                 valueSource: 'empty',
                 action: true,
                 size: 'sm',
             });
         }
-        return tableHeaders;
-    };
+        return nextHeaders;
+    }, [headers, moreActions]);
+    const fullElements = (0, react_1.useMemo)(() => {
+        return Array.isArray(elements) ? elements : [];
+    }, [elements]);
     const [tableProps, setTableProps] = (0, react_1.useState)({
-        elements: elements,
-        sort: sort,
-        headers: checkHeaders(),
+        elements: fullElements,
+        sort,
+        headers: tableHeaders,
     });
     (0, react_1.useEffect)(() => {
-        setTableProps({
-            ...tableProps,
-            elements: elements,
-        });
-    }, [elements]);
+        setTableProps((prev) => ({
+            ...prev,
+            elements: fullElements,
+            headers: tableHeaders,
+        }));
+    }, [fullElements, tableHeaders]);
     const [selectedRow, setSelectedRow] = (0, react_1.useState)('');
+    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
+    const [currentPageSize, setCurrentPageSize] = (0, react_1.useState)(pageSize || 10);
+    const [noResultsMessage, setNoResultsMessage] = (0, react_1.useState)(null);
+    const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
     const handleRowClick = (id) => {
         if (selectable) {
             setSelectedRow(id);
         }
-        onRowClick && onRowClick(id);
+        onRowClick?.(id);
     };
     const handleHeaderCellClick = (targetValue, order) => {
-        if (sortable) {
-            const newSort = (0, tableHelper_1.setSortParams)(targetValue, order, tableProps.sort);
-            setTableProps({
-                ...tableProps,
-                elements: (0, tableHelper_1.applySort)(newSort, tableProps.elements),
-                sort: newSort,
-            });
+        if (!sortable) {
+            return;
         }
+        const newSort = (0, tableHelper_1.setSortParams)(targetValue, order, tableProps.sort);
+        setTableProps((prev) => ({
+            ...prev,
+            elements: (0, tableHelper_1.applySort)(newSort, prev.elements),
+            sort: newSort,
+        }));
     };
-    const [currentPage, setCurrentPage] = (0, react_1.useState)(1);
-    const [currentPageSize, setCurrentPageSize] = (0, react_1.useState)(pageSize || 10);
-    const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
-    const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
-    (0, react_1.useEffect)(() => {
-        setCurrentPage(1);
-    }, [elements, currentPageSize]);
-    const [noResultsMessage, setNoResultsMessage] = (0, react_1.useState)(null);
     const handleApplyFilters = (0, react_1.useCallback)((filteredElements) => {
         setTableProps((prev) => ({
             ...prev,
@@ -125,22 +113,21 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
         setNoResultsMessage(filteredElements && filteredElements.length === 0
             ? config_2.wordbook.table.filterEmptyState
             : null);
-    }, [setCurrentPage, setTableProps]);
-    const [filtersClearSignal, setFiltersClearSignal] = (0, react_1.useState)(0);
+    }, []);
     const handleClearFilters = (0, react_1.useCallback)(() => {
         setFiltersClearSignal((s) => s + 1);
-        const full = initialElementsRef.current && initialElementsRef.current.length > 0
-            ? initialElementsRef.current
-            : Array.isArray(elements)
-                ? elements
-                : [];
         setTableProps((prev) => ({
             ...prev,
-            elements: Array.isArray(full) ? full.slice() : [],
+            elements: fullElements.slice(),
         }));
         setCurrentPage(1);
         setNoResultsMessage(null);
-    }, [elements, setCurrentPage, setNoResultsMessage]);
+    }, [fullElements]);
+    (0, react_1.useEffect)(() => {
+        setCurrentPage(1);
+    }, [fullElements, currentPageSize]);
+    const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
+    const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
     const tableElements = (0, react_1.useMemo)(() => {
         if (pagination) {
             return paginatedElements;
@@ -153,26 +140,16 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
                 (filtrable || pagination) && (react_1.default.createElement(Table_styles_1.TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     react_1.default.createElement(react_1.default.Fragment, null,
                         filtrable && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
-                            react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: initialElementsRef.current &&
-                                    initialElementsRef.current.length > 0
-                                    ? initialElementsRef.current
-                                    : elements, fullElements: initialElementsRef.current &&
-                                    initialElementsRef.current.length > 0
-                                    ? initialElementsRef.current
-                                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
+                            react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
                         pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
                             react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
                 react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableHeight },
                     react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         react_1.default.createElement(Table_styles_1.TableHead, null,
                             react_1.default.createElement(Table_styles_1.TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),
-                        react_1.default.createElement(Table_styles_1.TableBody, null, tableElements.map((item) => {
-                            return (react_1.default.createElement(Table_styles_1.TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
-                                    ? () => handleRowClick(item.id)
-                                    : undefined }, tableProps.headers.map((header, index) => {
-                                return (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }));
-                            })));
-                        })))),
+                        react_1.default.createElement(Table_styles_1.TableBody, null, tableElements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
+                                ? () => handleRowClick(item.id)
+                                : undefined }, tableProps.headers.map((header, index) => (react_1.default.createElement(Cell_1.Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }))))))))),
                 noResultsMessage && (react_1.default.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
 };
 exports.Table = Table;

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

@@ -25,7 +25,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
     const resolvedTheme = resolvedThemeData.resolvedTheme;
     const { componentsConfig } = resolvedThemeData;
     const filterConfig = componentsConfig.filters;
-    console.log('fullElements', fullElements);
+    console.log('--------');
+    console.log('filter fullElements', fullElements);
     // const normalizeDateValue = useCallback(
     //   (rawValue: any): number | undefined => {
     //     if (rawValue === undefined || rawValue === null || rawValue === '') {
@@ -41,7 +42,12 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
     //   },
     //   [],
     // )
-    const [source, setSource] = useState(fullElements || []);
+    const [source, _setSource] = useState(fullElements || []);
+    const sourceRef = useRef(source);
+    const setSource = (data) => {
+        sourceRef.current = data;
+        _setSource(data);
+    };
     useEffect(() => {
         setSource(fullElements || []);
     }, [fullElements]);
@@ -105,7 +111,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
                     collapsible: true,
                 };
             }
-            if (type === 'select') {
+            if (type === 'select' && h.name === 'joint_name') {
                 console.log('scope', values);
             }
             return {
@@ -324,13 +330,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
             handleSubmitFilters &&
                 handleSubmitFilters((source && source.length ? source : elements) || []);
         }
-    }, [
-        externalClearSignal,
-        clearAll,
-        handleSubmitFilters,
-        source,
-        elements,
-    ]);
+    }, [externalClearSignal, clearAll, handleSubmitFilters, source, elements]);
     const mapListItems = useCallback((filterName, allowValues) => {
         const sel = (activeFilters[filterName]?.value || []).map(String);
         return (allowValues || []).map((v) => ({

package/dist/esm/components/Table/Table.js

@@ -1,5 +1,5 @@
 import { resolveThemeWithComponentsConfig } from '../../config';
-import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { applySort, setSortParams } from './tableHelper';
 import { wordbook } from '../../config';
 import { ThemeProvider } from 'styled-components';
@@ -19,67 +19,55 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
     const resolvedTheme = resolvedThemeData.resolvedTheme;
     const { componentsConfig } = resolvedThemeData;
     const tableConfig = componentsConfig.table;
-    const initialElementsRef = useRef(null);
-    useEffect(() => {
-        if (!initialElementsRef.current &&
-            Array.isArray(elements) &&
-            elements.length > 0) {
-            initialElementsRef.current = elements.slice();
-        }
-        setTableProps((prev) => ({
-            ...prev,
-            elements: Array.isArray(elements) ? elements : [],
-        }));
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [elements]);
-    const checkHeaders = () => {
-        const tableHeaders = [...headers];
+    const tableHeaders = useMemo(() => {
+        const nextHeaders = [...headers];
         if (moreActions.length > 0) {
-            tableHeaders.push({
+            nextHeaders.push({
                 name: 'option',
                 valueSource: 'empty',
                 action: true,
                 size: 'sm',
             });
         }
-        return tableHeaders;
-    };
+        return nextHeaders;
+    }, [headers, moreActions]);
+    const fullElements = useMemo(() => {
+        return Array.isArray(elements) ? elements : [];
+    }, [elements]);
     const [tableProps, setTableProps] = useState({
-        elements: elements,
-        sort: sort,
-        headers: checkHeaders(),
+        elements: fullElements,
+        sort,
+        headers: tableHeaders,
     });
     useEffect(() => {
-        setTableProps({
-            ...tableProps,
-            elements: elements,
-        });
-    }, [elements]);
+        setTableProps((prev) => ({
+            ...prev,
+            elements: fullElements,
+            headers: tableHeaders,
+        }));
+    }, [fullElements, tableHeaders]);
     const [selectedRow, setSelectedRow] = useState('');
+    const [currentPage, setCurrentPage] = useState(1);
+    const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
+    const [noResultsMessage, setNoResultsMessage] = useState(null);
+    const [filtersClearSignal, setFiltersClearSignal] = useState(0);
     const handleRowClick = (id) => {
         if (selectable) {
             setSelectedRow(id);
         }
-        onRowClick && onRowClick(id);
+        onRowClick?.(id);
     };
     const handleHeaderCellClick = (targetValue, order) => {
-        if (sortable) {
-            const newSort = setSortParams(targetValue, order, tableProps.sort);
-            setTableProps({
-                ...tableProps,
-                elements: applySort(newSort, tableProps.elements),
-                sort: newSort,
-            });
+        if (!sortable) {
+            return;
         }
+        const newSort = setSortParams(targetValue, order, tableProps.sort);
+        setTableProps((prev) => ({
+            ...prev,
+            elements: applySort(newSort, prev.elements),
+            sort: newSort,
+        }));
     };
-    const [currentPage, setCurrentPage] = useState(1);
-    const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
-    const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
-    const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
-    useEffect(() => {
-        setCurrentPage(1);
-    }, [elements, currentPageSize]);
-    const [noResultsMessage, setNoResultsMessage] = useState(null);
     const handleApplyFilters = useCallback((filteredElements) => {
         setTableProps((prev) => ({
             ...prev,
@@ -89,22 +77,21 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
         setNoResultsMessage(filteredElements && filteredElements.length === 0
             ? wordbook.table.filterEmptyState
             : null);
-    }, [setCurrentPage, setTableProps]);
-    const [filtersClearSignal, setFiltersClearSignal] = useState(0);
+    }, []);
     const handleClearFilters = useCallback(() => {
         setFiltersClearSignal((s) => s + 1);
-        const full = initialElementsRef.current && initialElementsRef.current.length > 0
-            ? initialElementsRef.current
-            : Array.isArray(elements)
-                ? elements
-                : [];
         setTableProps((prev) => ({
             ...prev,
-            elements: Array.isArray(full) ? full.slice() : [],
+            elements: fullElements.slice(),
         }));
         setCurrentPage(1);
         setNoResultsMessage(null);
-    }, [elements, setCurrentPage, setNoResultsMessage]);
+    }, [fullElements]);
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [fullElements, currentPageSize]);
+    const totalPages = Math.ceil(tableProps.elements.length / currentPageSize);
+    const paginatedElements = tableProps.elements.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
     const tableElements = useMemo(() => {
         if (pagination) {
             return paginatedElements;
@@ -117,25 +104,15 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
                 (filtrable || pagination) && (React.createElement(TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     React.createElement(React.Fragment, null,
                         filtrable && (React.createElement(HeaderSection, null,
-                            React.createElement(Filters, { labels: filterLabels, headers: headers, elements: initialElementsRef.current &&
-                                    initialElementsRef.current.length > 0
-                                    ? initialElementsRef.current
-                                    : elements, fullElements: initialElementsRef.current &&
-                                    initialElementsRef.current.length > 0
-                                    ? initialElementsRef.current
-                                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
+                            React.createElement(Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
                         pagination && (React.createElement(HeaderSection, { right: true },
                             React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
                 React.createElement(TableContentWrapper, { componentHeight: tableHeight },
                     React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         React.createElement(TableHead, null,
                             React.createElement(TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),
-                        React.createElement(TableBody, null, tableElements.map((item) => {
-                            return (React.createElement(TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
-                                    ? () => handleRowClick(item.id)
-                                    : undefined }, tableProps.headers.map((header, index) => {
-                                return (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }));
-                            })));
-                        })))),
+                        React.createElement(TableBody, null, tableElements.map((item) => (React.createElement(TableRow, { theme: resolvedTheme, config: tableConfig, key: `table_row_${item.id}`, hover: hover, isDisabled: item.disabled, active: selectedRow === item.id, selectable: selectable, onClick: !item.disabled
+                                ? () => handleRowClick(item.id)
+                                : undefined }, tableProps.headers.map((header, index) => (React.createElement(Cell, { key: `cell_${header.name}_${item.id}`, header: header, moreActions: moreActions, item: item, theme: theme, selected: item.marked && index === 0, isDisabled: item.disabled }))))))))),
                 noResultsMessage && (React.createElement("div", { style: { padding: '8px 12px', textAlign: 'center' } }, noResultsMessage))))));
 };

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

@@ -5,7 +5,7 @@ interface ITableProps {
     theme?: AppTheme;
     themeVariant?: ThemeName;
     headers: ITableHeaderProps[];
-    elements: any;
+    elements: any[];
     moreActions?: IAction[];
     hover?: boolean;
     selectable?: boolean;

package/package.json

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