venice-ui 3.0.44 → 3.0.46

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

@@ -48,7 +48,6 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
     name: '',
     order: 'none',
 }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
-    console.log('=====================');
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -56,127 +55,84 @@ 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)(() => {
-        console.log('zmiana eleemnts detect', elements);
-        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;
-    };
-    const [tableProps, setTableProps] = (0, react_1.useState)({
-        elements: elements,
-        sort: sort,
-        headers: checkHeaders(),
-    });
-    (0, react_1.useEffect)(() => {
-        setTableProps({
-            ...tableProps,
-            elements: elements,
-        });
+        return nextHeaders;
+    }, [headers, moreActions]);
+    const fullElements = (0, react_1.useMemo)(() => {
+        return Array.isArray(elements) ? elements : [];
     }, [elements]);
+    const [tableElementsState, setTableElementsState] = (0, react_1.useState)(fullElements);
+    const [tableSort, setTableSort] = (0, react_1.useState)(sort);
     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);
+    (0, react_1.useEffect)(() => {
+        setTableElementsState(fullElements);
+        setCurrentPage(1);
+        setNoResultsMessage(null);
+    }, [fullElements]);
     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, tableSort);
+        setTableSort(newSort);
+        setTableElementsState((prev) => (0, tableHelper_1.applySort)(newSort, prev));
     };
-    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,
-            elements: filteredElements,
-        }));
+        setTableElementsState(filteredElements);
         setCurrentPage(1);
         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() : [],
-        }));
+        setTableElementsState(fullElements.slice());
         setCurrentPage(1);
         setNoResultsMessage(null);
-    }, [elements, setCurrentPage, setNoResultsMessage]);
-    console.log('table Elements', elements);
-    console.log('initialElementsRef', initialElementsRef.current);
-    const tableElements = (0, react_1.useMemo)(() => {
-        if (pagination) {
-            return paginatedElements;
-        }
-        return tableProps.elements;
-    }, [pagination, paginatedElements, tableProps.elements]);
+    }, [fullElements]);
+    (0, react_1.useEffect)(() => {
+        setCurrentPage(1);
+    }, [currentPageSize]);
+    const totalPages = Math.ceil(tableElementsState.length / currentPageSize);
+    const paginatedElements = (0, react_1.useMemo)(() => {
+        return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
+    }, [tableElementsState, currentPage, currentPageSize]);
+    const visibleElements = pagination ? paginatedElements : tableElementsState;
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
         react_1.default.createElement(Table_styles_1.TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
             react_1.default.createElement(react_1.default.Fragment, null,
                 (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.TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableHeaders.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableSort, size: header.size || 'md' }))))),
+                        react_1.default.createElement(Table_styles_1.TableBody, null, visibleElements.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 }, tableHeaders.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/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';
@@ -12,7 +12,6 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
     name: '',
     order: 'none',
 }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
-    console.log('=====================');
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -20,126 +19,83 @@ 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(() => {
-        console.log('zmiana eleemnts detect', elements);
-        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;
-    };
-    const [tableProps, setTableProps] = useState({
-        elements: elements,
-        sort: sort,
-        headers: checkHeaders(),
-    });
-    useEffect(() => {
-        setTableProps({
-            ...tableProps,
-            elements: elements,
-        });
+        return nextHeaders;
+    }, [headers, moreActions]);
+    const fullElements = useMemo(() => {
+        return Array.isArray(elements) ? elements : [];
     }, [elements]);
+    const [tableElementsState, setTableElementsState] = useState(fullElements);
+    const [tableSort, setTableSort] = useState(sort);
     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);
+    useEffect(() => {
+        setTableElementsState(fullElements);
+        setCurrentPage(1);
+        setNoResultsMessage(null);
+    }, [fullElements]);
     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, tableSort);
+        setTableSort(newSort);
+        setTableElementsState((prev) => applySort(newSort, prev));
     };
-    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,
-            elements: filteredElements,
-        }));
+        setTableElementsState(filteredElements);
         setCurrentPage(1);
         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() : [],
-        }));
+        setTableElementsState(fullElements.slice());
         setCurrentPage(1);
         setNoResultsMessage(null);
-    }, [elements, setCurrentPage, setNoResultsMessage]);
-    console.log('table Elements', elements);
-    console.log('initialElementsRef', initialElementsRef.current);
-    const tableElements = useMemo(() => {
-        if (pagination) {
-            return paginatedElements;
-        }
-        return tableProps.elements;
-    }, [pagination, paginatedElements, tableProps.elements]);
+    }, [fullElements]);
+    useEffect(() => {
+        setCurrentPage(1);
+    }, [currentPageSize]);
+    const totalPages = Math.ceil(tableElementsState.length / currentPageSize);
+    const paginatedElements = useMemo(() => {
+        return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
+    }, [tableElementsState, currentPage, currentPageSize]);
+    const visibleElements = pagination ? paginatedElements : tableElementsState;
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
         React.createElement(TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
             React.createElement(React.Fragment, null,
                 (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(TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableHeaders.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableSort, size: header.size || 'md' }))))),
+                        React.createElement(TableBody, null, visibleElements.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 }, tableHeaders.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.44",
+  "version": "3.0.46",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",