venice-ui 3.0.4 → 3.0.6

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

@@ -27,7 +27,7 @@ const Checkbox = ({ name, value = false, size = 'md', label, labelPosition = 'to
         }
     };
     return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true },
-        react_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
+        react_1.default.createElement(Checkbox_styles_1.CheckboxRoot, { onClick: onClick, isDisabled: isDisabled, id: 'dupa' },
             react_1.default.createElement(Checkbox_styles_1.CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (react_1.default.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 react_1.default.createElement("path", { d: iconName, fill: isDisabled
                         ? checkboxConfig.color.disabled.icon

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

@@ -15,6 +15,7 @@ exports.CheckboxRoot = styled_components_1.default.div `
   cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
 `;
 exports.CheckboxBox = styled_components_1.default.div `
+  box-sizing: border-box;
   display: flex;
   align-content: center;
   align-items: center;

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

@@ -17,6 +17,12 @@ exports.FilterTrigerRoot = styled_components_1.default.div `
   cursor: pointer;
   color: ${({ theme, config, isActive }) => isActive ? config.color.activeText : config.color.text};
   border: none;
+  font-size: ${({ theme, config, size }) => config.size.triger[size].fontSize}px;
+  line-height: ${({ theme, config, size }) => config.size.triger[size].lineHeight}px;
+
+  ${({ isActive, config }) => isActive
+    ? `box-shadow: 0 0 0 ${config.size.triger.common.activeShadowWidth}px ${config.color.activeShadow};`
+    : ''}
 
   &:hover {
     background: ${({ theme, config }) => config.color.hover.background};
@@ -32,7 +38,8 @@ exports.FilterCounter = styled_components_1.default.div `
   border-radius: ${({ theme, config, size }) => config.size.counter[size].radius}px;
   font-size: ${({ theme, config, size }) => config.size.counter[size].fontSize}px;
   line-height: ${({ theme, config, size }) => config.size.counter[size].lineHeight}px;
-  padding: 0 ${({ theme, config, size }) => config.size.counter[size].paddingX}px;
+  padding: 0
+    ${({ theme, config, size }) => config.size.counter[size].paddingX}px;
 `;
 exports.FiltersArea = styled_components_1.default.div `
   width: 100%;

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

@@ -66,7 +66,7 @@ exports.ModalOverlayer = styled_components_1.default.div `
   padding: ${({ config, theme }) => config.size.common.overlayerPadding}px;
   width: 100%;
   position: fixed;
-  z-index: ${({ config, theme }) => config.size.common.zIndex.modalOverlayer};
+  z-index: ${({ config, theme }) => config.size.common.zIndex};
 `;
 exports.ModalRoot = styled_components_1.default.div `
     box-sizing: border-box;

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

@@ -11,7 +11,7 @@ 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], dropdownLabel = config_2.wordbook.pagination.dropdownLabel, }) => {
+const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = config_2.wordbook.pagination.dropdownLabel, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -56,7 +56,7 @@ const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages,
                 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: dropdownLabel, labelPosition: "left", handleChange: (name, value) => {
+            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);

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

@@ -9,7 +9,7 @@ exports.PaginationRoot = styled_components_1.default.div `
   display: flex;
    justify-content: flex-end;
   align-items: center;
-  width: 100%;
+  width: auto;
   box-sizing: border-box;
   height: ${({ theme, config }) => config.size.paginationHeight}px;
   gap: ${({ theme, config }) => config.size.elementGap}px;
@@ -18,7 +18,7 @@ exports.PaginationItemWrapper = styled_components_1.default.div `
   display: flex;
   align-items: center;
   justify-content:  flex-start;
-  width:100%;
+  width:auto;
   gap: ${({ theme, config }) => config.size.itemGap}px;
 `;
 exports.PaginationItem = styled_components_1.default.button `Ś

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

@@ -47,7 +47,7 @@ const Cell_1 = require("./Cell");
 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, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -153,15 +153,15 @@ 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 &&
+                            react_1.default.createElement(Filters_1.Filters, { labels: labels, 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 }))),
-                        pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
-                            react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize })))))),
+                        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: labels?.pagination, availableValues: paginationCounters })))))),
                 react_1.default.createElement(Table_styles_1.TableContentWrapper, null,
                     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,

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

@@ -29,7 +29,7 @@ exports.TableContentWrapper = styled_components_1.default.div `
 exports.HeaderSection = styled_components_1.default.div `
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
   width: 50%;
 `;
 exports.TableContent = styled_components_1.default.table `

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

@@ -21,7 +21,7 @@ export const Checkbox = ({ name, value = false, size = 'md', label, labelPositio
         }
     };
     return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: checkboxConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true },
-        React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled },
+        React.createElement(CheckboxRoot, { onClick: onClick, isDisabled: isDisabled, id: 'dupa' },
             React.createElement(CheckboxBox, { theme: resolvedTheme, config: checkboxConfig, size: size, isDisabled: isDisabled, isIntermedian: isIntermedian, isActive: value }, (value || isIntermedian) && (React.createElement("svg", { width: resolvedSize.iconSize, height: resolvedSize.iconSize, viewBox: '0 0 24 24', preserveAspectRatio: "xMidYMid meet", x: "0", y: "0", name: name },
                 React.createElement("path", { d: iconName, fill: isDisabled
                         ? checkboxConfig.color.disabled.icon

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

@@ -9,6 +9,7 @@ export const CheckboxRoot = styled.div `
   cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
 `;
 export const CheckboxBox = styled.div `
+  box-sizing: border-box;
   display: flex;
   align-content: center;
   align-items: center;

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

@@ -11,6 +11,12 @@ export const FilterTrigerRoot = styled.div `
   cursor: pointer;
   color: ${({ theme, config, isActive }) => isActive ? config.color.activeText : config.color.text};
   border: none;
+  font-size: ${({ theme, config, size }) => config.size.triger[size].fontSize}px;
+  line-height: ${({ theme, config, size }) => config.size.triger[size].lineHeight}px;
+
+  ${({ isActive, config }) => isActive
+    ? `box-shadow: 0 0 0 ${config.size.triger.common.activeShadowWidth}px ${config.color.activeShadow};`
+    : ''}
 
   &:hover {
     background: ${({ theme, config }) => config.color.hover.background};
@@ -26,7 +32,8 @@ export const FilterCounter = styled.div `
   border-radius: ${({ theme, config, size }) => config.size.counter[size].radius}px;
   font-size: ${({ theme, config, size }) => config.size.counter[size].fontSize}px;
   line-height: ${({ theme, config, size }) => config.size.counter[size].lineHeight}px;
-  padding: 0 ${({ theme, config, size }) => config.size.counter[size].paddingX}px;
+  padding: 0
+    ${({ theme, config, size }) => config.size.counter[size].paddingX}px;
 `;
 export const FiltersArea = styled.div `
   width: 100%;

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

@@ -30,7 +30,7 @@ export const ModalOverlayer = styled.div `
   padding: ${({ config, theme }) => config.size.common.overlayerPadding}px;
   width: 100%;
   position: fixed;
-  z-index: ${({ config, theme }) => config.size.common.zIndex.modalOverlayer};
+  z-index: ${({ config, theme }) => config.size.common.zIndex};
 `;
 export const ModalRoot = styled.div `
     box-sizing: border-box;

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

@@ -5,7 +5,7 @@ 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], dropdownLabel = wordbook.pagination.dropdownLabel, }) => {
+export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = wordbook.pagination.dropdownLabel, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -50,7 +50,7 @@ export const Pagination = ({ theme, themeVariant = 'default', currentPage, total
                 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: dropdownLabel, labelPosition: "left", handleChange: (name, value) => {
+            React.createElement(Dropdown, { size: "sm", label: label, labelPosition: "left", handleChange: (name, value) => {
                     const num = Number(value);
                     if (!isNaN(num) && num > 0) {
                         onPageSizeChange(num);

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

@@ -3,7 +3,7 @@ export const PaginationRoot = styled.div `
   display: flex;
    justify-content: flex-end;
   align-items: center;
-  width: 100%;
+  width: auto;
   box-sizing: border-box;
   height: ${({ theme, config }) => config.size.paginationHeight}px;
   gap: ${({ theme, config }) => config.size.elementGap}px;
@@ -12,7 +12,7 @@ export const PaginationItemWrapper = styled.div `
   display: flex;
   align-items: center;
   justify-content:  flex-start;
-  width:100%;
+  width:auto;
   gap: ${({ theme, config }) => config.size.itemGap}px;
 `;
 export const PaginationItem = styled.button `Ś

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

@@ -11,7 +11,7 @@ import { Cell } from './Cell';
 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, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -117,15 +117,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 &&
+                            React.createElement(Filters, { labels: labels, 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 }))),
-                        pagination && (React.createElement(HeaderSection, null,
-                            React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize })))))),
+                        pagination && (React.createElement(HeaderSection, { right: true },
+                            React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: labels?.pagination, availableValues: paginationCounters })))))),
                 React.createElement(TableContentWrapper, null,
                     React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         React.createElement(TableHead, null,

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

@@ -23,7 +23,7 @@ export const TableContentWrapper = styled.div `
 export const HeaderSection = styled.div `
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
   width: 50%;
 `;
 export const TableContent = styled.table `

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

@@ -9,7 +9,7 @@ interface IPaginationProps {
     onPageChange: (page: number) => void;
     onPageSizeChange: (size: number) => void;
     availableValues?: number[];
-    dropdownLabel?: string;
+    label?: string;
 }
 export declare const Pagination: FC<IPaginationProps>;
 export {};

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

@@ -15,7 +15,8 @@ interface ITableProps {
     pageSize?: number;
     onRowClick?: (id: string) => void;
     pagination?: boolean;
-    filterLabels?: IFilterLabels;
+    labels?: IFilterLabels;
+    paginationCounters?: number[];
 }
 export interface ITableHeaderProps {
     name: string;

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

@@ -8,7 +8,10 @@ interface ITableHeaderProps {
 }
 export declare const TableHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableHeaderProps, never>;
 export declare const TableContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const HeaderSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface IHeaderSectionProps {
+    right?: boolean;
+}
+export declare const HeaderSection: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IHeaderSectionProps, never>;
 interface ITableContentProps {
     theme: AppTheme;
     config: any;

package/package.json

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