venice-ui 3.0.15 → 3.0.17

package/dist/cjs/components/DatePicker/Calendar.js

@@ -169,6 +169,6 @@ const Calendar = ({ theme, themeVariant = 'default', value, top, left, triggerTo
                         secondary: labels?.secondary,
                         additional: labels?.additional,
                     } })))),
-        react_1.default.createElement(DatePicker_styles_1.CalendarOverlayer, { onClick: handleClose, config: config.calendarCard, theme: theme })));
+        react_1.default.createElement(DatePicker_styles_1.CalendarOverlayer, { onClick: handleClose, config: config.calendarCard, theme: theme, zIndex: zIndex - 1 })));
 };
 exports.Calendar = Calendar;

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

@@ -93,7 +93,7 @@ exports.CalendarOverlayer = styled_components_1.default.div `
   height: 100%;
   position: fixed;
   background-color: ${({ config, theme }) => config.color.overlayer};
-  z-index: ${({ config, theme }) => config.size.overlayerZIndex};
+  z-index: ${({ config, theme, zIndex }) => zIndex || config.size.overlayerZIndex};
   animation: ${overlayerFadeIn} 200ms ease-out;
 `;
 exports.CalendarHeaderRoot = styled_components_1.default.div `

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -125,7 +125,7 @@ const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md', widt
                 react_1.default.createElement(Dropdown_styles_1.DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
                 !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
         open &&
-            (0, react_dom_1.createPortal)(react_1.default.createElement(Dropdown_styles_1.DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig },
+            (0, react_dom_1.createPortal)(react_1.default.createElement(Dropdown_styles_1.DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig, zIndex: zIndex },
                 react_1.default.createElement(OptionsPanel_1.OptionsPanel, { options: options, size: size, handleSelect: handleSelectOption, value: value, searchable: searchable, placeholder: placeholder, theme: theme, themeVariant: themeVariant, maxRows: maxRows, zIndex: zIndex, handleAdd: handleAdd })), document.body)));
 };
 exports.Dropdown = Dropdown;

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

@@ -53,7 +53,7 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
     trigger: config_1.wordbook.filters.filterText,
     clearAll: config_1.wordbook.filters.labelClearAll,
     clear: config_1.wordbook.filters.clear,
-}, filters = [], headers = [], elements = [], fullElements, handleSubmitFilters, externalClearSignal, onClear, iconMode = true, }) => {
+}, filters = [], headers = [], elements = [], fullElements, handleSubmitFilters, externalClearSignal, onClear, iconMode = true, calendarLabels, calendarLocaleLabels, }) => {
     const resolvedThemeData = (0, config_2.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -429,8 +429,8 @@ const Filters = ({ theme, themeVariant = 'default', size = 'md', labels = {
             case 'date':
                 return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     react_1.default.createElement(Filters_styles_1.FilterGrid, null,
-                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }),
-                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }))));
+                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex }),
+                        react_1.default.createElement(DatePicker_1.DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex }))));
             case 'text':
                 return (react_1.default.createElement(Aligment_1.Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     react_1.default.createElement(Input_1.Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));

package/dist/cjs/components/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, labels, paginationCounters, tableHeight, tableWrapperHeight, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -159,9 +159,9 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
                                     : elements, fullElements: initialElementsRef.current &&
                                     initialElementsRef.current.length > 0
                                     ? initialElementsRef.current
-                                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
+                                    : elements, 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: labels?.pagination, availableValues: paginationCounters })))))),
+                            react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters })))))),
                 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,

package/dist/cjs/config/config.js

@@ -235,6 +235,7 @@ exports.measurements = {
         modal: 1001,
         sidepanel: 900,
         sidepanelOverlayer: 850,
+        uperModal: 1100,
     },
 };
 const createTypography = () => ({
@@ -1301,6 +1302,7 @@ const createComponentsConfig = (theme = 'default') => {
         },
         filters: {
             size: {
+                zIndex: exports.measurements.zIndex.uperModal,
                 triger: {
                     sm: {
                         height: exports.measurements.space.xl4,

package/dist/esm/components/DatePicker/Calendar.js

@@ -133,5 +133,5 @@ export const Calendar = ({ theme, themeVariant = 'default', value, top, left, tr
                         secondary: labels?.secondary,
                         additional: labels?.additional,
                     } })))),
-        React.createElement(CalendarOverlayer, { onClick: handleClose, config: config.calendarCard, theme: theme })));
+        React.createElement(CalendarOverlayer, { onClick: handleClose, config: config.calendarCard, theme: theme, zIndex: zIndex - 1 })));
 };

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

@@ -57,7 +57,7 @@ export const CalendarOverlayer = styled.div `
   height: 100%;
   position: fixed;
   background-color: ${({ config, theme }) => config.color.overlayer};
-  z-index: ${({ config, theme }) => config.size.overlayerZIndex};
+  z-index: ${({ config, theme, zIndex }) => zIndex || config.size.overlayerZIndex};
   animation: ${overlayerFadeIn} 200ms ease-out;
 `;
 export const CalendarHeaderRoot = styled.div `

package/dist/esm/components/Dropdown/Dropdown.js

@@ -89,6 +89,6 @@ export const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md
                 React.createElement(DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
                 !readOnly && (React.createElement(Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
         open &&
-            createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig },
+            createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig, zIndex: zIndex },
                 React.createElement(OptionsPanel, { options: options, size: size, handleSelect: handleSelectOption, value: value, searchable: searchable, placeholder: placeholder, theme: theme, themeVariant: themeVariant, maxRows: maxRows, zIndex: zIndex, handleAdd: handleAdd })), document.body)));
 };

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

@@ -17,7 +17,7 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
     trigger: wordbook.filters.filterText,
     clearAll: wordbook.filters.labelClearAll,
     clear: wordbook.filters.clear,
-}, filters = [], headers = [], elements = [], fullElements, handleSubmitFilters, externalClearSignal, onClear, iconMode = true, }) => {
+}, filters = [], headers = [], elements = [], fullElements, handleSubmitFilters, externalClearSignal, onClear, iconMode = true, calendarLabels, calendarLocaleLabels, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -393,8 +393,8 @@ export const Filters = ({ theme, themeVariant = 'default', size = 'md', labels =
             case 'date':
                 return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     React.createElement(FilterGrid, null,
-                        React.createElement(DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }),
-                        React.createElement(DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%' }))));
+                        React.createElement(DatePicker, { name: `${filter.name}_min`, value: normalizeDateValue(activeFilters[filter.name]?.min), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex }),
+                        React.createElement(DatePicker, { name: `${filter.name}_max`, value: normalizeDateValue(activeFilters[filter.name]?.max), isAdvance: false, autoConfirm: true, handleChange: setRangeFilter, componentWidth: '100%', labels: calendarLabels, localeLabels: calendarLocaleLabels, zIndex: filterConfig.size.zIndex }))));
             case 'text':
                 return (React.createElement(Aligment, { wrap: "nowrap", direction: "row", align: "flex-start", justify: "flex-start", gap: 8 },
                     React.createElement(Input, { type: "text", name: `${filter.name}_query`, value: activeFilters[filter.name]?.value?.[0] ?? '', handleChange: setTextFilter, componentWidth: '100%', width: '100%' })));

package/dist/esm/components/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, labels, paginationCounters, tableHeight, tableWrapperHeight, }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -123,9 +123,9 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
                                     : elements, fullElements: initialElementsRef.current &&
                                     initialElementsRef.current.length > 0
                                     ? initialElementsRef.current
-                                    : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
+                                    : elements, 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: labels?.pagination, availableValues: paginationCounters })))))),
+                            React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters })))))),
                 React.createElement(TableContentWrapper, { componentHeight: tableHeight },
                     React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         React.createElement(TableHead, null,

package/dist/esm/config/config.js

@@ -231,6 +231,7 @@ export const measurements = {
         modal: 1001,
         sidepanel: 900,
         sidepanelOverlayer: 850,
+        uperModal: 1100,
     },
 };
 export const createTypography = () => ({
@@ -1296,6 +1297,7 @@ export const createComponentsConfig = (theme = 'default') => {
         },
         filters: {
             size: {
+                zIndex: measurements.zIndex.uperModal,
                 triger: {
                     sm: {
                         height: measurements.space.xl4,

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

@@ -22,6 +22,7 @@ export declare const CalendarRoot: import("styled-components").StyledComponent<"
 interface ISidepanelOverlayerProps {
     config: any;
     theme: AppTheme;
+    zIndex?: number;
 }
 export declare const CalendarOverlayer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ISidepanelOverlayerProps, never>;
 interface ICalendarHeaderRootProps {

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
 import { AppTheme, ThemeName } from '../../config';
-import { IFilterLabels, InputSize } from 'types';
+import { ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
 interface IHeader {
     name: string;
     valueSource?: string;
@@ -49,6 +49,8 @@ interface IFiltersProps {
     iconMode?: boolean;
     size?: InputSize;
     labels?: IFilterLabels;
+    calendarLabels?: IFilterLabels;
+    calendarLocaleLabels: ICalendarLocaleLabels;
 }
 export declare const Filters: FC<IFiltersProps>;
 export {};

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

@@ -1,6 +1,6 @@
 import { AppTheme, ThemeName } from '../../config';
 import { FC } from 'react';
-import { IAction, IFilterLabels, InputSize } from 'types';
+import { IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
 interface ITableProps {
     theme?: AppTheme;
     themeVariant?: ThemeName;
@@ -19,6 +19,9 @@ interface ITableProps {
     paginationCounters?: number[];
     tableHeight?: string;
     tableWrapperHeight?: string;
+    paginationLabel?: IFilterLabels;
+    calendarLabels?: IFilterLabels;
+    calendarLocaleLabels: ICalendarLocaleLabels;
 }
 export interface ITableHeaderProps {
     name: string;

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

@@ -228,6 +228,7 @@ export declare const measurements: {
         readonly modal: 1001;
         readonly sidepanel: 900;
         readonly sidepanelOverlayer: 850;
+        readonly uperModal: 1100;
     };
 };
 export declare const createTypography: () => {
@@ -1339,6 +1340,7 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
     };
     filters: {
         size: {
+            zIndex: 1100;
             triger: {
                 sm: {
                     height: 32;
@@ -2660,6 +2662,7 @@ export declare const componentsConfig: {
     };
     filters: {
         size: {
+            zIndex: 1100;
             triger: {
                 sm: {
                     height: 32;
@@ -3027,6 +3030,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
             readonly modal: 1001;
             readonly sidepanel: 900;
             readonly sidepanelOverlayer: 850;
+            readonly uperModal: 1100;
         };
     };
     typography: {
@@ -4124,6 +4128,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
         };
         filters: {
             size: {
+                zIndex: 1100;
                 triger: {
                     sm: {
                         height: 32;

package/package.json

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