venice-ui 3.0.54 → 3.0.56

package/dist/cjs/components/PageSize/PageSize.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageSize = void 0;
+const react_1 = __importDefault(require("react"));
+const Dropdown_1 = require("../Dropdown");
+const styled_components_1 = require("styled-components");
+const config_1 = require("../../config");
+const PageSize = ({ theme, themeVariant = 'default', onPageSizeChange, label = config_1.wordbook.pagination.dropdownLabel, zIndex, availableValues = [10, 20, 50], pageSize, }) => {
+    const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const pageSizeStr = !isNaN(pageSize) ? String(pageSize) : '10';
+    let dropdownOptions = availableValues.map((size) => ({
+        value: size.toString(),
+        label: size.toString(),
+    }));
+    if (!dropdownOptions.some((opt) => opt.value === pageSizeStr)) {
+        dropdownOptions = [
+            { value: pageSizeStr, label: pageSizeStr },
+            ...dropdownOptions,
+        ];
+    }
+    return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
+        react_1.default.createElement(Dropdown_1.Dropdown, { size: "sm", label: label, labelPosition: "left", handleChange: (name, value) => {
+                const num = Number(value);
+                if (!isNaN(num) && num > 0) {
+                    onPageSizeChange(num);
+                }
+            }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: "auto", componentWidth: "80px", zIndex: zIndex })));
+};
+exports.PageSize = PageSize;

package/dist/cjs/components/PageSize/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PageSize"), exports);

package/dist/cjs/components/Pagination/Pagination.js

@@ -8,10 +8,8 @@ const config_1 = require("../../config");
 const Pagination_styles_1 = require("./Pagination.styles");
 const Icon_1 = require("../Icon");
 const react_1 = __importDefault(require("react"));
-const Dropdown_1 = require("../Dropdown");
-const config_2 = require("../../config");
 const styled_components_1 = require("styled-components");
-const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = config_2.wordbook.pagination.dropdownLabel, zIndex }) => {
+const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, onPageChange, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -39,28 +37,11 @@ const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages,
         return pages;
     };
     const pageNumbers = getPageNumbers(currentPage, totalPages);
-    const pageSizeStr = !isNaN(pageSize) ? String(pageSize) : '10';
-    let dropdownOptions = availableValues.map((size) => ({
-        value: size.toString(),
-        label: size.toString(),
-    }));
-    if (!dropdownOptions.some((opt) => opt.value === pageSizeStr)) {
-        dropdownOptions = [
-            { value: pageSizeStr, label: pageSizeStr },
-            ...dropdownOptions,
-        ];
-    }
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
         react_1.default.createElement(Pagination_styles_1.PaginationRoot, { theme: resolvedTheme, config: paginationConfig },
             react_1.default.createElement(Pagination_styles_1.PaginationItemWrapper, { theme: resolvedTheme, config: paginationConfig },
                 react_1.default.createElement(Icon_1.Icon, { name: 'back', size: "md", onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
                 pageNumbers.map((num, idx) => num === '...' ? (react_1.default.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (react_1.default.createElement(Pagination_styles_1.PaginationItem, { key: num, onClick: () => onPageChange(Number(num)), isActive: num === currentPage, theme: resolvedTheme, config: paginationConfig }, num))),
-                react_1.default.createElement(Icon_1.Icon, { name: 'forward', size: "md", onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages })),
-            react_1.default.createElement(Dropdown_1.Dropdown, { size: "sm", label: label, labelPosition: "left", handleChange: (name, value) => {
-                    const num = Number(value);
-                    if (!isNaN(num) && num > 0) {
-                        onPageSizeChange(num);
-                    }
-                }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px', zIndex: zIndex }))));
+                react_1.default.createElement(Icon_1.Icon, { name: 'forward', size: "md", onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages })))));
 };
 exports.Pagination = Pagination;

package/dist/cjs/components/Pagination/Pagination.styles.js

@@ -7,7 +7,7 @@ exports.PaginationDropdownWrapper = exports.PaginationItem = exports.PaginationI
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.PaginationRoot = styled_components_1.default.div `
   display: flex;
-   justify-content: flex-end;
+   justify-content: center;
   align-items: center;
   width: auto;
   box-sizing: border-box;
@@ -27,6 +27,8 @@ exports.PaginationItem = styled_components_1.default.button `Ś
   justify-content: center;
   height: ${({ theme, config }) => config.size.height}px;
   width: ${({ theme, config }) => config.size.width}px;
+  font-size: ${({ theme, config }) => config.size.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.lineHeight}px;
   background-color: ${({ theme, config, disabled, isActive }) => disabled
     ? config.color.disabled.background
     : isActive

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

@@ -44,10 +44,12 @@ const Filters_1 = require("../Filters");
 const Pagination_1 = require("../Pagination");
 const HeaderCell_1 = require("./HeaderCell");
 const Cell_1 = require("./Cell");
+const SearchInput_1 = require("../SearchInput");
+const PageSize_1 = require("../PageSize");
 const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, filterLabels, pageSizeAvailableValues, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, searchable = true, searchInputPlaceholder = config_2.wordbook.searchInput.placeholder, noResultsText = config_2.wordbook.table.filterEmptyState, emptyStateText = config_2.wordbook.table.emptyState, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -77,41 +79,89 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
     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 searchRef = (0, react_1.useRef)('');
+    const filteredBaseRef = (0, react_1.useRef)(fullElements);
+    const setSearch = (0, react_1.useCallback)((value) => {
+        searchRef.current = value;
+    }, []);
+    const searchFiltering = (0, react_1.useCallback)((sourceElements, searchValue) => {
+        const normalizedSearchValue = searchValue.toLowerCase().trim();
+        if (!normalizedSearchValue) {
+            return sourceElements;
+        }
+        return sourceElements.filter((item) => {
+            return tableHeaders.some((header) => {
+                if (header.action) {
+                    return false;
+                }
+                const fieldValue = item[header.valueSource];
+                if (typeof fieldValue === 'string') {
+                    return fieldValue.toLowerCase().includes(normalizedSearchValue);
+                }
+                if (typeof fieldValue === 'number') {
+                    return fieldValue.toString().includes(normalizedSearchValue);
+                }
+                return false;
+            });
+        });
+    }, [tableHeaders]);
+    const updateTableElements = (0, react_1.useCallback)((nextElements) => {
+        setTableElementsState(nextElements);
+        setCurrentPage(1);
+        setNoResultsMessage(nextElements.length === 0
+            ? fullElements.length === 0
+                ? emptyStateText
+                : noResultsText
+            : null);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        filteredBaseRef.current = fullElements;
+        const nextElements = searchRef.current
+            ? searchFiltering(fullElements, searchRef.current)
+            : fullElements;
+        updateTableElements(nextElements);
+    }, [fullElements, searchFiltering, updateTableElements]);
     (0, react_1.useEffect)(() => {
-        setTableElementsState(fullElements);
         setCurrentPage(1);
-        setNoResultsMessage(null);
-    }, [fullElements]);
-    const handleRowClick = (id) => {
+    }, [currentPageSize]);
+    const handleRowClick = (0, react_1.useCallback)((id) => {
         if (selectable) {
             setSelectedRow(id);
         }
         onRowClick?.(id);
-    };
-    const handleHeaderCellClick = (targetValue, order) => {
+    }, [selectable, onRowClick]);
+    const handleHeaderCellClick = (0, react_1.useCallback)((targetValue, order) => {
         if (!sortable) {
             return;
         }
         const newSort = (0, tableHelper_1.setSortParams)(targetValue, order, tableSort);
         setTableSort(newSort);
         setTableElementsState((prev) => (0, tableHelper_1.applySort)(newSort, prev));
-    };
-    const handleApplyFilters = (0, react_1.useCallback)((filteredElements) => {
-        setTableElementsState(filteredElements);
-        setCurrentPage(1);
-        setNoResultsMessage(filteredElements && filteredElements.length === 0
-            ? config_2.wordbook.table.filterEmptyState
-            : null);
-    }, []);
+    }, [sortable, tableSort]);
+    const handleApplyFilters = (0, react_1.useCallback)((filtered) => {
+        filteredBaseRef.current = filtered;
+        const nextElements = searchRef.current
+            ? searchFiltering(filtered, searchRef.current)
+            : filtered;
+        updateTableElements(nextElements);
+    }, [searchFiltering, updateTableElements]);
     const handleClearFilters = (0, react_1.useCallback)(() => {
-        setFiltersClearSignal((s) => s + 1);
-        setTableElementsState(fullElements.slice());
-        setCurrentPage(1);
-        setNoResultsMessage(null);
-    }, [fullElements]);
-    (0, react_1.useEffect)(() => {
-        setCurrentPage(1);
-    }, [currentPageSize]);
+        setFiltersClearSignal((prev) => prev + 1);
+        filteredBaseRef.current = fullElements;
+        const nextElements = searchRef.current
+            ? searchFiltering(fullElements, searchRef.current)
+            : fullElements;
+        updateTableElements(nextElements);
+    }, [fullElements, searchFiltering, updateTableElements]);
+    const handleSearchChange = (0, react_1.useCallback)((value) => {
+        const searchValue = value.toLowerCase().trim();
+        setSearch(searchValue);
+        const baseElements = filteredBaseRef.current;
+        const nextElements = searchValue
+            ? searchFiltering(baseElements, searchValue)
+            : baseElements;
+        updateTableElements(nextElements);
+    }, [searchFiltering, setSearch, updateTableElements]);
     const totalPages = Math.ceil(tableElementsState.length / currentPageSize);
     const paginatedElements = (0, react_1.useMemo)(() => {
         return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
@@ -120,20 +170,25 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
     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 },
+                (filtrable || pagination || searchable || headerExtraContent) && (react_1.default.createElement(Table_styles_1.TableHeader, { theme: resolvedTheme, config: tableConfig, right: (pagination || searchable) && !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: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
-                        headerExtraContent && (react_1.default.createElement(Table_styles_1.HeaderSection, null, headerExtraContent)),
-                        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 })))))),
+                        (filtrable || headerExtraContent) && (react_1.default.createElement(react_1.default.Fragment, null,
+                            react_1.default.createElement(Table_styles_1.HeaderSection, null,
+                                filtrable && (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 })),
+                                headerExtraContent && (react_1.default.createElement(Table_styles_1.HeaderSection, null, headerExtraContent))))),
+                        (pagination || searchable) && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
+                            searchable && (react_1.default.createElement(Table_styles_1.TableSearch, { theme: resolvedTheme, config: tableConfig },
+                                react_1.default.createElement(SearchInput_1.SearchInput, { placeholder: searchInputPlaceholder, handleSearch: handleSearchChange }))),
+                            pagination && (react_1.default.createElement(PageSize_1.PageSize, { label: paginationLabel?.label, zIndex: paginationZIndex, onPageSizeChange: setCurrentPageSize, availableValues: pageSizeAvailableValues, pageSize: currentPageSize }))))))),
                 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.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0", isEmpty: visibleElements.length === 0 },
                         react_1.default.createElement(Table_styles_1.TableHead, null,
                             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))))));
+                                : 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 })))))))),
+                    pagination && totalPages > 1 && visibleElements.length > 0 && (react_1.default.createElement(Table_styles_1.TableFooter, null,
+                        react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage })))),
+                noResultsMessage && (react_1.default.createElement(Table_styles_1.TableEmptyState, { theme: resolvedTheme, config: tableConfig }, noResultsMessage))))));
 };
 exports.Table = Table;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TableCellContent = exports.TableCell = exports.TableRow = exports.OptionTableCellWrapper = exports.OptionTableCell = exports.IconTableHeaderCell = exports.OptionTableHeaderCell = exports.HeaderCellContent = exports.TableHeaderCell = exports.TableHeaderRow = exports.TableBody = exports.TableHead = exports.TableContent = exports.HeaderSection = exports.TableContentWrapper = exports.TableHeader = exports.TableRoot = void 0;
+exports.TableFooter = exports.TableEmptyState = exports.TableSearch = exports.TableCellContent = exports.TableCell = exports.TableRow = exports.OptionTableCellWrapper = exports.OptionTableCell = exports.IconTableHeaderCell = exports.OptionTableHeaderCell = exports.HeaderCellContent = exports.TableHeaderCell = exports.TableHeaderRow = exports.TableBody = exports.TableHead = exports.TableContent = exports.HeaderSection = exports.TableContentWrapper = exports.TableHeader = exports.TableRoot = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.TableRoot = styled_components_1.default.div `
   display: flex;
@@ -15,8 +15,7 @@ exports.TableHeader = styled_components_1.default.div `
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  // justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
-  justify-content: space-between;
+  justify-content: ${({ right }) => (right ? 'flex-end' : 'space-between')};
   height: ${({ theme, config }) => config.size.header.height}px;
 `;
 exports.TableContentWrapper = styled_components_1.default.div `
@@ -29,19 +28,21 @@ exports.TableContentWrapper = styled_components_1.default.div `
   overflow-x: auto;
   height: ${({ componentHeight }) => componentHeight || '100%'};
   flex-shrink: 0;
+  flex-direction: column;
 `;
 exports.HeaderSection = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
   flex-shrink: 0;
+  gap: 8px;
 `;
 exports.TableContent = styled_components_1.default.table `
   box-sizing: border-box;
   display: block;
   width: 100%;
-  overflow-x: auto;
-  overflow-y: auto;
+  overflow-x: ${({ isEmpty }) => (isEmpty ? 'hidden' : 'auto')};
+  overflow-y: ${({ isEmpty }) => (isEmpty ? 'hidden' : 'auto')};
   height: 100%;
   border-radius: ${({ theme, config }) => config.size.common.borderRadius}px;
   border-collapse: separate;
@@ -59,7 +60,7 @@ exports.TableHead = styled_components_1.default.thead `
     position: sticky;
     top: 0;
     z-index: 2;
-  };
+  }
   flex-shrink: 0;
 `;
 exports.TableBody = styled_components_1.default.tbody `
@@ -182,3 +183,49 @@ exports.TableCellContent = styled_components_1.default.div `
   color: ${({ theme, config, disabled }) => disabled ? config.color.disabled.text : config.color.default.header.text};
   width: 100%;
 `;
+exports.TableSearch = styled_components_1.default.div `
+  width: 100%;
+  appearance: textfield;
+  padding: 0px ${({ config }) => config.size.searchInput.paddingX}px;
+  height: ${({ config }) => config.size.searchInput.height}px;
+  border-radius: ${({ config }) => config.size.searchInput.radius}px;
+  font-size: ${({ config }) => config.size.searchInput.fontSize}px;
+  line-height: ${({ config }) => config.size.searchInput.lineHeight}px;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  color: ${({ theme, config }) => config.color.default.searchInput.text};
+  border: 1px solid ${({ theme, config }) => config.color.default.searchInput.border};
+  background: ${({ theme, config }) => config.color.default.searchInput.background};
+   box-sizing: border-box;
+   :hover {
+    border-color: ${({ theme, config }) => config.color.hover.searchInput.border};
+    }
+  &:focus-within {
+    border-color: ${({ theme, config }) => config.color.active.searchInput.border};
+  }
+`;
+exports.TableEmptyState = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
+  color: ${({ theme, config }) => config.color.default.header.text};
+  padding: 0 ${({ theme, config }) => config.size.cell.common.paddingX}px;
+  background-color: ${({ theme, config }) => config.color.default.common.background};
+  height: ${({ theme, config }) => config.size.header.height}px;
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.common.border};
+  box-sizing: border-box;
+`;
+exports.TableFooter = styled_components_1.default.div `
+  display: flex;
+  padding: 8px 0;
+  width:100%;
+  justify-content: center;
+
+`;

package/dist/cjs/config/config.js

@@ -1275,13 +1275,13 @@ const createComponentsConfig = (theme = 'default') => {
         pagination: {
             size: {
                 paginationHeight: exports.measurements.space.xl4,
-                height: exports.measurements.space.xl3,
-                width: exports.measurements.space.xl3,
+                height: exports.measurements.space.xl2,
+                width: exports.measurements.space.xl2,
                 itemGap: exports.measurements.space.sm,
                 elementGap: exports.measurements.space.lg,
                 borderRadius: exports.measurements.size.radius.sm,
-                fontSize: exports.measurements.font.size.md,
-                lineHeight: exports.measurements.font.lineHeight.md,
+                fontSize: exports.measurements.font.size.xs,
+                lineHeight: exports.measurements.font.lineHeight.xs,
             },
             color: {
                 default: {
@@ -1420,6 +1420,13 @@ const createComponentsConfig = (theme = 'default') => {
                         },
                     },
                 },
+                searchInput: {
+                    height: exports.measurements.space.xl4,
+                    paddingX: exports.measurements.space.sm,
+                    radius: exports.measurements.size.radius.sm,
+                    fontSize: exports.measurements.font.size.sm,
+                    lineHeight: exports.measurements.font.lineHeight.sm,
+                }
             },
             color: {
                 default: {
@@ -1432,10 +1439,19 @@ const createComponentsConfig = (theme = 'default') => {
                         text: Theme.text.primary,
                         sortIcon: Theme.text.primary,
                     },
+                    searchInput: {
+                        background: Theme.surface.default,
+                        border: Theme.border.default,
+                        text: Theme.text.primary,
+                        placeholder: Theme.text.placeholder,
+                    }
                 },
                 hover: {
                     background: Theme.surface.hover,
                     activeBackground: Theme.action.primary.selectedHover,
+                    searchInput: {
+                        border: Theme.border.strong,
+                    }
                 },
                 active: {
                     background: Theme.action.primary.selected,
@@ -1443,6 +1459,9 @@ const createComponentsConfig = (theme = 'default') => {
                         textHeader: Theme.action.primary.default,
                         sortIcon: Theme.action.primary.default,
                     },
+                    searchInput: {
+                        border: Theme.border.focus,
+                    }
                 },
                 disabled: {
                     text: Theme.text.disabled,

package/dist/cjs/config/wordbook.js

@@ -68,6 +68,7 @@ exports.wordbook = {
     },
     table: {
         filterEmptyState: 'No results found.',
+        emptyState: 'No data available.',
     }
 };
 //ToDo zaaktualizować stories dla Lable

package/dist/esm/components/PageSize/PageSize.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Dropdown } from '../Dropdown';
+import { ThemeProvider } from 'styled-components';
+import { resolveThemeWithComponentsConfig, wordbook } from '../../config';
+export const PageSize = ({ theme, themeVariant = 'default', onPageSizeChange, label = wordbook.pagination.dropdownLabel, zIndex, availableValues = [10, 20, 50], pageSize, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const pageSizeStr = !isNaN(pageSize) ? String(pageSize) : '10';
+    let dropdownOptions = availableValues.map((size) => ({
+        value: size.toString(),
+        label: size.toString(),
+    }));
+    if (!dropdownOptions.some((opt) => opt.value === pageSizeStr)) {
+        dropdownOptions = [
+            { value: pageSizeStr, label: pageSizeStr },
+            ...dropdownOptions,
+        ];
+    }
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(Dropdown, { size: "sm", label: label, labelPosition: "left", handleChange: (name, value) => {
+                const num = Number(value);
+                if (!isNaN(num) && num > 0) {
+                    onPageSizeChange(num);
+                }
+            }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: "auto", componentWidth: "80px", zIndex: zIndex })));
+};

package/dist/esm/components/PageSize/index.js

@@ -0,0 +1 @@
+export * from './PageSize';

package/dist/esm/components/Pagination/Pagination.js

@@ -2,10 +2,8 @@ import { resolveThemeWithComponentsConfig } from '../../config';
 import { PaginationItem, PaginationItemWrapper, PaginationRoot, } from './Pagination.styles';
 import { Icon } from '../Icon';
 import React from 'react';
-import { Dropdown } from '../Dropdown';
-import { wordbook } from '../../config';
 import { ThemeProvider } from 'styled-components';
-export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = wordbook.pagination.dropdownLabel, zIndex }) => {
+export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, onPageChange, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -33,27 +31,10 @@ export const Pagination = ({ theme, themeVariant = 'default', currentPage, total
         return pages;
     };
     const pageNumbers = getPageNumbers(currentPage, totalPages);
-    const pageSizeStr = !isNaN(pageSize) ? String(pageSize) : '10';
-    let dropdownOptions = availableValues.map((size) => ({
-        value: size.toString(),
-        label: size.toString(),
-    }));
-    if (!dropdownOptions.some((opt) => opt.value === pageSizeStr)) {
-        dropdownOptions = [
-            { value: pageSizeStr, label: pageSizeStr },
-            ...dropdownOptions,
-        ];
-    }
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
         React.createElement(PaginationRoot, { theme: resolvedTheme, config: paginationConfig },
             React.createElement(PaginationItemWrapper, { theme: resolvedTheme, config: paginationConfig },
                 React.createElement(Icon, { name: 'back', size: "md", onClick: () => onPageChange(Math.max(1, currentPage - 1)), isDisabled: currentPage === 1 }),
                 pageNumbers.map((num, idx) => num === '...' ? (React.createElement("span", { key: `ellipsis-${idx}` }, "...")) : (React.createElement(PaginationItem, { key: num, onClick: () => onPageChange(Number(num)), isActive: num === currentPage, theme: resolvedTheme, config: paginationConfig }, num))),
-                React.createElement(Icon, { name: 'forward', size: "md", onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages })),
-            React.createElement(Dropdown, { size: "sm", label: label, labelPosition: "left", handleChange: (name, value) => {
-                    const num = Number(value);
-                    if (!isNaN(num) && num > 0) {
-                        onPageSizeChange(num);
-                    }
-                }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px', zIndex: zIndex }))));
+                React.createElement(Icon, { name: 'forward', size: "md", onClick: () => onPageChange(Math.min(totalPages, currentPage + 1)), isDisabled: currentPage === totalPages })))));
 };

package/dist/esm/components/Pagination/Pagination.styles.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 export const PaginationRoot = styled.div `
   display: flex;
-   justify-content: flex-end;
+   justify-content: center;
   align-items: center;
   width: auto;
   box-sizing: border-box;
@@ -21,6 +21,8 @@ export const PaginationItem = styled.button `Ś
   justify-content: center;
   height: ${({ theme, config }) => config.size.height}px;
   width: ${({ theme, config }) => config.size.width}px;
+  font-size: ${({ theme, config }) => config.size.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.lineHeight}px;
   background-color: ${({ theme, config, disabled, isActive }) => disabled
     ? config.color.disabled.background
     : isActive

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

@@ -1,17 +1,19 @@
 import { resolveThemeWithComponentsConfig } from '../../config';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { applySort, setSortParams } from './tableHelper';
 import { wordbook } from '../../config';
 import { ThemeProvider } from 'styled-components';
-import { HeaderSection, TableBody, TableContent, TableContentWrapper, TableHead, TableHeader, TableHeaderRow, TableRoot, TableRow, } from './Table.styles';
+import { HeaderSection, TableBody, TableContent, TableContentWrapper, TableEmptyState, TableFooter, TableHead, TableHeader, TableHeaderRow, TableRoot, TableRow, TableSearch, } from './Table.styles';
 import { Filters } from '../Filters';
 import { Pagination } from '../Pagination';
 import { HeaderCell } from './HeaderCell';
 import { Cell } from './Cell';
+import { SearchInput } from '../SearchInput';
+import { PageSize } from '../PageSize';
 export const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, filterLabels, pageSizeAvailableValues, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, searchable = true, searchInputPlaceholder = wordbook.searchInput.placeholder, noResultsText = wordbook.table.filterEmptyState, emptyStateText = wordbook.table.emptyState, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -41,41 +43,89 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
     const [currentPageSize, setCurrentPageSize] = useState(pageSize || 10);
     const [noResultsMessage, setNoResultsMessage] = useState(null);
     const [filtersClearSignal, setFiltersClearSignal] = useState(0);
+    const searchRef = useRef('');
+    const filteredBaseRef = useRef(fullElements);
+    const setSearch = useCallback((value) => {
+        searchRef.current = value;
+    }, []);
+    const searchFiltering = useCallback((sourceElements, searchValue) => {
+        const normalizedSearchValue = searchValue.toLowerCase().trim();
+        if (!normalizedSearchValue) {
+            return sourceElements;
+        }
+        return sourceElements.filter((item) => {
+            return tableHeaders.some((header) => {
+                if (header.action) {
+                    return false;
+                }
+                const fieldValue = item[header.valueSource];
+                if (typeof fieldValue === 'string') {
+                    return fieldValue.toLowerCase().includes(normalizedSearchValue);
+                }
+                if (typeof fieldValue === 'number') {
+                    return fieldValue.toString().includes(normalizedSearchValue);
+                }
+                return false;
+            });
+        });
+    }, [tableHeaders]);
+    const updateTableElements = useCallback((nextElements) => {
+        setTableElementsState(nextElements);
+        setCurrentPage(1);
+        setNoResultsMessage(nextElements.length === 0
+            ? fullElements.length === 0
+                ? emptyStateText
+                : noResultsText
+            : null);
+    }, []);
+    useEffect(() => {
+        filteredBaseRef.current = fullElements;
+        const nextElements = searchRef.current
+            ? searchFiltering(fullElements, searchRef.current)
+            : fullElements;
+        updateTableElements(nextElements);
+    }, [fullElements, searchFiltering, updateTableElements]);
     useEffect(() => {
-        setTableElementsState(fullElements);
         setCurrentPage(1);
-        setNoResultsMessage(null);
-    }, [fullElements]);
-    const handleRowClick = (id) => {
+    }, [currentPageSize]);
+    const handleRowClick = useCallback((id) => {
         if (selectable) {
             setSelectedRow(id);
         }
         onRowClick?.(id);
-    };
-    const handleHeaderCellClick = (targetValue, order) => {
+    }, [selectable, onRowClick]);
+    const handleHeaderCellClick = useCallback((targetValue, order) => {
         if (!sortable) {
             return;
         }
         const newSort = setSortParams(targetValue, order, tableSort);
         setTableSort(newSort);
         setTableElementsState((prev) => applySort(newSort, prev));
-    };
-    const handleApplyFilters = useCallback((filteredElements) => {
-        setTableElementsState(filteredElements);
-        setCurrentPage(1);
-        setNoResultsMessage(filteredElements && filteredElements.length === 0
-            ? wordbook.table.filterEmptyState
-            : null);
-    }, []);
+    }, [sortable, tableSort]);
+    const handleApplyFilters = useCallback((filtered) => {
+        filteredBaseRef.current = filtered;
+        const nextElements = searchRef.current
+            ? searchFiltering(filtered, searchRef.current)
+            : filtered;
+        updateTableElements(nextElements);
+    }, [searchFiltering, updateTableElements]);
     const handleClearFilters = useCallback(() => {
-        setFiltersClearSignal((s) => s + 1);
-        setTableElementsState(fullElements.slice());
-        setCurrentPage(1);
-        setNoResultsMessage(null);
-    }, [fullElements]);
-    useEffect(() => {
-        setCurrentPage(1);
-    }, [currentPageSize]);
+        setFiltersClearSignal((prev) => prev + 1);
+        filteredBaseRef.current = fullElements;
+        const nextElements = searchRef.current
+            ? searchFiltering(fullElements, searchRef.current)
+            : fullElements;
+        updateTableElements(nextElements);
+    }, [fullElements, searchFiltering, updateTableElements]);
+    const handleSearchChange = useCallback((value) => {
+        const searchValue = value.toLowerCase().trim();
+        setSearch(searchValue);
+        const baseElements = filteredBaseRef.current;
+        const nextElements = searchValue
+            ? searchFiltering(baseElements, searchValue)
+            : baseElements;
+        updateTableElements(nextElements);
+    }, [searchFiltering, setSearch, updateTableElements]);
     const totalPages = Math.ceil(tableElementsState.length / currentPageSize);
     const paginatedElements = useMemo(() => {
         return tableElementsState.slice((currentPage - 1) * currentPageSize, currentPage * currentPageSize);
@@ -84,19 +134,24 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
     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 },
+                (filtrable || pagination || searchable || headerExtraContent) && (React.createElement(TableHeader, { theme: resolvedTheme, config: tableConfig, right: (pagination || searchable) && !filtrable },
                     React.createElement(React.Fragment, null,
-                        filtrable && (React.createElement(HeaderSection, null,
-                            React.createElement(Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
-                        headerExtraContent && (React.createElement(HeaderSection, null, headerExtraContent)),
-                        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 })))))),
+                        (filtrable || headerExtraContent) && (React.createElement(React.Fragment, null,
+                            React.createElement(HeaderSection, null,
+                                filtrable && (React.createElement(Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels })),
+                                headerExtraContent && (React.createElement(HeaderSection, null, headerExtraContent))))),
+                        (pagination || searchable) && (React.createElement(HeaderSection, { right: true },
+                            searchable && (React.createElement(TableSearch, { theme: resolvedTheme, config: tableConfig },
+                                React.createElement(SearchInput, { placeholder: searchInputPlaceholder, handleSearch: handleSearchChange }))),
+                            pagination && (React.createElement(PageSize, { label: paginationLabel?.label, zIndex: paginationZIndex, onPageSizeChange: setCurrentPageSize, availableValues: pageSizeAvailableValues, pageSize: currentPageSize }))))))),
                 React.createElement(TableContentWrapper, { componentHeight: tableHeight },
-                    React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
+                    React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0", isEmpty: visibleElements.length === 0 },
                         React.createElement(TableHead, null,
                             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))))));
+                                : 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 })))))))),
+                    pagination && totalPages > 1 && visibleElements.length > 0 && (React.createElement(TableFooter, null,
+                        React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage })))),
+                noResultsMessage && (React.createElement(TableEmptyState, { theme: resolvedTheme, config: tableConfig }, noResultsMessage))))));
 };

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

@@ -9,8 +9,7 @@ export const TableHeader = styled.div `
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  // justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
-  justify-content: space-between;
+  justify-content: ${({ right }) => (right ? 'flex-end' : 'space-between')};
   height: ${({ theme, config }) => config.size.header.height}px;
 `;
 export const TableContentWrapper = styled.div `
@@ -23,19 +22,21 @@ export const TableContentWrapper = styled.div `
   overflow-x: auto;
   height: ${({ componentHeight }) => componentHeight || '100%'};
   flex-shrink: 0;
+  flex-direction: column;
 `;
 export const HeaderSection = styled.div `
   display: flex;
   align-items: center;
   justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
   flex-shrink: 0;
+  gap: 8px;
 `;
 export const TableContent = styled.table `
   box-sizing: border-box;
   display: block;
   width: 100%;
-  overflow-x: auto;
-  overflow-y: auto;
+  overflow-x: ${({ isEmpty }) => (isEmpty ? 'hidden' : 'auto')};
+  overflow-y: ${({ isEmpty }) => (isEmpty ? 'hidden' : 'auto')};
   height: 100%;
   border-radius: ${({ theme, config }) => config.size.common.borderRadius}px;
   border-collapse: separate;
@@ -53,7 +54,7 @@ export const TableHead = styled.thead `
     position: sticky;
     top: 0;
     z-index: 2;
-  };
+  }
   flex-shrink: 0;
 `;
 export const TableBody = styled.tbody `
@@ -176,3 +177,49 @@ export const TableCellContent = styled.div `
   color: ${({ theme, config, disabled }) => disabled ? config.color.disabled.text : config.color.default.header.text};
   width: 100%;
 `;
+export const TableSearch = styled.div `
+  width: 100%;
+  appearance: textfield;
+  padding: 0px ${({ config }) => config.size.searchInput.paddingX}px;
+  height: ${({ config }) => config.size.searchInput.height}px;
+  border-radius: ${({ config }) => config.size.searchInput.radius}px;
+  font-size: ${({ config }) => config.size.searchInput.fontSize}px;
+  line-height: ${({ config }) => config.size.searchInput.lineHeight}px;
+  flex-direction: row;
+  -webkit-box-align: center;
+  align-items: center;
+  overflow: hidden;
+  width: 100%;
+  color: ${({ theme, config }) => config.color.default.searchInput.text};
+  border: 1px solid ${({ theme, config }) => config.color.default.searchInput.border};
+  background: ${({ theme, config }) => config.color.default.searchInput.background};
+   box-sizing: border-box;
+   :hover {
+    border-color: ${({ theme, config }) => config.color.hover.searchInput.border};
+    }
+  &:focus-within {
+    border-color: ${({ theme, config }) => config.color.active.searchInput.border};
+  }
+`;
+export const TableEmptyState = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  font-size: ${({ theme, config }) => config.size.header.fontSize}px;
+  line-height: ${({ theme, config }) => config.size.header.lineHeight}px;
+  color: ${({ theme, config }) => config.color.default.header.text};
+  padding: 0 ${({ theme, config }) => config.size.cell.common.paddingX}px;
+  background-color: ${({ theme, config }) => config.color.default.common.background};
+  height: ${({ theme, config }) => config.size.header.height}px;
+  border-bottom: 1px solid
+    ${({ theme, config }) => config.color.default.common.border};
+  box-sizing: border-box;
+`;
+export const TableFooter = styled.div `
+  display: flex;
+  padding: 8px 0;
+  width:100%;
+  justify-content: center;
+
+`;

package/dist/esm/config/config.js

@@ -1270,13 +1270,13 @@ export const createComponentsConfig = (theme = 'default') => {
         pagination: {
             size: {
                 paginationHeight: measurements.space.xl4,
-                height: measurements.space.xl3,
-                width: measurements.space.xl3,
+                height: measurements.space.xl2,
+                width: measurements.space.xl2,
                 itemGap: measurements.space.sm,
                 elementGap: measurements.space.lg,
                 borderRadius: measurements.size.radius.sm,
-                fontSize: measurements.font.size.md,
-                lineHeight: measurements.font.lineHeight.md,
+                fontSize: measurements.font.size.xs,
+                lineHeight: measurements.font.lineHeight.xs,
             },
             color: {
                 default: {
@@ -1415,6 +1415,13 @@ export const createComponentsConfig = (theme = 'default') => {
                         },
                     },
                 },
+                searchInput: {
+                    height: measurements.space.xl4,
+                    paddingX: measurements.space.sm,
+                    radius: measurements.size.radius.sm,
+                    fontSize: measurements.font.size.sm,
+                    lineHeight: measurements.font.lineHeight.sm,
+                }
             },
             color: {
                 default: {
@@ -1427,10 +1434,19 @@ export const createComponentsConfig = (theme = 'default') => {
                         text: Theme.text.primary,
                         sortIcon: Theme.text.primary,
                     },
+                    searchInput: {
+                        background: Theme.surface.default,
+                        border: Theme.border.default,
+                        text: Theme.text.primary,
+                        placeholder: Theme.text.placeholder,
+                    }
                 },
                 hover: {
                     background: Theme.surface.hover,
                     activeBackground: Theme.action.primary.selectedHover,
+                    searchInput: {
+                        border: Theme.border.strong,
+                    }
                 },
                 active: {
                     background: Theme.action.primary.selected,
@@ -1438,6 +1454,9 @@ export const createComponentsConfig = (theme = 'default') => {
                         textHeader: Theme.action.primary.default,
                         sortIcon: Theme.action.primary.default,
                     },
+                    searchInput: {
+                        border: Theme.border.focus,
+                    }
                 },
                 disabled: {
                     text: Theme.text.disabled,

package/dist/esm/config/wordbook.js

@@ -65,6 +65,7 @@ export const wordbook = {
     },
     table: {
         filterEmptyState: 'No results found.',
+        emptyState: 'No data available.',
     }
 };
 //ToDo zaaktualizować stories dla Lable

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { AppTheme, ThemeName } from '../../config';
+interface IPageSizeProps {
+    theme?: AppTheme;
+    themeVariant?: ThemeName;
+    label?: string;
+    zIndex?: number;
+    onPageSizeChange: (size: number) => void;
+    availableValues?: number[];
+    pageSize: number;
+}
+export declare const PageSize: FC<IPageSizeProps>;
+export {};

package/dist/types/components/PageSize/index.d.ts

@@ -0,0 +1 @@
+export * from './PageSize';

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

@@ -5,12 +5,7 @@ interface IPaginationProps {
     themeVariant?: ThemeName;
     currentPage: number;
     totalPages: number;
-    pageSize: number;
     onPageChange: (page: number) => void;
-    onPageSizeChange: (size: number) => void;
-    availableValues?: number[];
-    label?: string;
-    zIndex?: number;
 }
 export declare const Pagination: FC<IPaginationProps>;
 export {};

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

@@ -15,7 +15,7 @@ interface ITableProps {
     pageSize?: number;
     onRowClick?: (id: string) => void;
     pagination?: boolean;
-    paginationCounters?: number[];
+    pageSizeAvailableValues?: number[];
     tableHeight?: string;
     tableWrapperHeight?: string;
     filterLabels?: IFilterLabels;
@@ -24,6 +24,10 @@ interface ITableProps {
     calendarLocaleLabels?: ICalendarLocaleLabels;
     paginationZIndex?: number;
     headerExtraContent?: React.ReactNode;
+    searchable?: boolean;
+    searchInputPlaceholder?: string;
+    noResultsText?: string;
+    emptyStateText?: string;
 }
 export interface ITableHeaderProps {
     name: string;

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

@@ -23,6 +23,7 @@ export declare const HeaderSection: import("styled-components").StyledComponent<
 interface ITableContentProps {
     theme: AppTheme;
     config: any;
+    isEmpty: boolean;
 }
 export declare const TableContent: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, ITableContentProps, never>;
 export declare const TableHead: import("styled-components").StyledComponent<"thead", import("styled-components").DefaultTheme, {}, never>;
@@ -80,4 +81,15 @@ interface ITableCellContentProps {
     disabled: boolean;
 }
 export declare const TableCellContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableCellContentProps, never>;
+interface ITableSearchProps {
+    theme: AppTheme;
+    config: any;
+}
+export declare const TableSearch: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableSearchProps, never>;
+interface ITableEmptyStateProps {
+    theme: AppTheme;
+    config: any;
+}
+export declare const TableEmptyState: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableEmptyStateProps, never>;
+export declare const TableFooter: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -1313,13 +1313,13 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
     pagination: {
         size: {
             paginationHeight: 32;
-            height: 28;
-            width: 28;
+            height: 24;
+            width: 24;
             itemGap: 8;
             elementGap: 16;
             borderRadius: 8;
-            fontSize: 14;
-            lineHeight: 20;
+            fontSize: 12;
+            lineHeight: 16;
         };
         color: {
             default: {
@@ -1458,6 +1458,13 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
                     };
                 };
             };
+            searchInput: {
+                height: 32;
+                paddingX: 8;
+                radius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+            };
         };
         color: {
             default: {
@@ -1470,10 +1477,19 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
                     text: "#111827";
                     sortIcon: "#111827";
                 };
+                searchInput: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    placeholder: "#9CA3AF";
+                };
             };
             hover: {
                 background: "#F2F8FD";
                 activeBackground: "#9FD0EC";
+                searchInput: {
+                    border: "#D1D5DB";
+                };
             };
             active: {
                 background: "#C7E3F5";
@@ -1481,6 +1497,9 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
                     textHeader: "#3B90CB";
                     sortIcon: "#3B90CB";
                 };
+                searchInput: {
+                    border: "#3B90CB";
+                };
             };
             disabled: {
                 text: "#9CA3AF";
@@ -2658,13 +2677,13 @@ export declare const componentsConfig: {
     pagination: {
         size: {
             paginationHeight: 32;
-            height: 28;
-            width: 28;
+            height: 24;
+            width: 24;
             itemGap: 8;
             elementGap: 16;
             borderRadius: 8;
-            fontSize: 14;
-            lineHeight: 20;
+            fontSize: 12;
+            lineHeight: 16;
         };
         color: {
             default: {
@@ -2803,6 +2822,13 @@ export declare const componentsConfig: {
                     };
                 };
             };
+            searchInput: {
+                height: 32;
+                paddingX: 8;
+                radius: 8;
+                fontSize: 13;
+                lineHeight: 18;
+            };
         };
         color: {
             default: {
@@ -2815,10 +2841,19 @@ export declare const componentsConfig: {
                     text: "#111827";
                     sortIcon: "#111827";
                 };
+                searchInput: {
+                    background: "#FFFFFF";
+                    border: "#E5E7EB";
+                    text: "#111827";
+                    placeholder: "#9CA3AF";
+                };
             };
             hover: {
                 background: "#F2F8FD";
                 activeBackground: "#9FD0EC";
+                searchInput: {
+                    border: "#D1D5DB";
+                };
             };
             active: {
                 background: "#C7E3F5";
@@ -2826,6 +2861,9 @@ export declare const componentsConfig: {
                     textHeader: "#3B90CB";
                     sortIcon: "#3B90CB";
                 };
+                searchInput: {
+                    border: "#3B90CB";
+                };
             };
             disabled: {
                 text: "#9CA3AF";
@@ -4148,13 +4186,13 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
         pagination: {
             size: {
                 paginationHeight: 32;
-                height: 28;
-                width: 28;
+                height: 24;
+                width: 24;
                 itemGap: 8;
                 elementGap: 16;
                 borderRadius: 8;
-                fontSize: 14;
-                lineHeight: 20;
+                fontSize: 12;
+                lineHeight: 16;
             };
             color: {
                 default: {
@@ -4293,6 +4331,13 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                         };
                     };
                 };
+                searchInput: {
+                    height: 32;
+                    paddingX: 8;
+                    radius: 8;
+                    fontSize: 13;
+                    lineHeight: 18;
+                };
             };
             color: {
                 default: {
@@ -4305,10 +4350,19 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                         text: "#111827";
                         sortIcon: "#111827";
                     };
+                    searchInput: {
+                        background: "#FFFFFF";
+                        border: "#E5E7EB";
+                        text: "#111827";
+                        placeholder: "#9CA3AF";
+                    };
                 };
                 hover: {
                     background: "#F2F8FD";
                     activeBackground: "#9FD0EC";
+                    searchInput: {
+                        border: "#D1D5DB";
+                    };
                 };
                 active: {
                     background: "#C7E3F5";
@@ -4316,6 +4370,9 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
                         textHeader: "#3B90CB";
                         sortIcon: "#3B90CB";
                     };
+                    searchInput: {
+                        border: "#3B90CB";
+                    };
                 };
                 disabled: {
                     text: "#9CA3AF";

package/dist/types/config/wordbook.d.ts

@@ -52,5 +52,6 @@ export declare const wordbook: {
     };
     table: {
         filterEmptyState: string;
+        emptyState: string;
     };
 };

package/package.json

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