venice-ui 3.0.25 → 3.0.29

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/dist/cjs/components/Dropdown/Dropdown.js +2 -2
  2. package/dist/cjs/components/Dropdown/Dropdown.styles.js +2 -0
  3. package/dist/cjs/components/DropdownMenu/DropdownMenu.js +1 -1
  4. package/dist/cjs/components/List/List.js +6 -6
  5. package/dist/cjs/components/List/List.styles.js +11 -8
  6. package/dist/cjs/components/Pagination/Pagination.js +2 -2
  7. package/dist/cjs/components/SearchInput/SearchInput.js +2 -2
  8. package/dist/cjs/components/SearchInput/SearchInput.styles.js +1 -1
  9. package/dist/cjs/components/Table/Table.js +2 -2
  10. package/dist/cjs/config/config.js +2 -2
  11. package/dist/esm/components/Dropdown/Dropdown.js +3 -3
  12. package/dist/esm/components/Dropdown/Dropdown.styles.js +2 -0
  13. package/dist/esm/components/DropdownMenu/DropdownMenu.js +1 -1
  14. package/dist/esm/components/List/List.js +6 -6
  15. package/dist/esm/components/List/List.styles.js +11 -8
  16. package/dist/esm/components/Pagination/Pagination.js +2 -2
  17. package/dist/esm/components/SearchInput/SearchInput.js +2 -2
  18. package/dist/esm/components/SearchInput/SearchInput.styles.js +1 -1
  19. package/dist/esm/components/Table/Table.js +2 -2
  20. package/dist/esm/config/config.js +2 -2
  21. package/dist/types/components/Dropdown/Dropdown.styles.d.ts +5 -1
  22. package/dist/types/components/List/List.d.ts +1 -1
  23. package/dist/types/components/List/List.styles.d.ts +1 -0
  24. package/dist/types/components/Pagination/Pagination.d.ts +1 -0
  25. package/dist/types/components/SearchInput/SearchInput.d.ts +1 -0
  26. package/dist/types/components/SearchInput/SearchInput.styles.d.ts +1 -0
  27. package/dist/types/components/Table/Table.d.ts +1 -0
  28. package/dist/types/config/config.d.ts +6 -6
  29. package/package.json +1 -1
package/dist/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -119,11 +119,11 @@ const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md', widt
119
119
  }, [open, handleFieldBlur]);
120
120
  return (react_1.default.createElement(react_1.default.Fragment, null,
121
121
  react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: dropdonwConfig, label: label, isActive: open, noBreakLabel: noBreakLabel, componentWidth: componentWidth },
122
- react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef },
122
+ react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef, isDisabled: disabled, config: dropdonwConfig, onClick: handleToggleOpen },
123
123
  prefixIcon && !readOnly && (react_1.default.createElement(Icon_1.Icon, { name: prefixIcon, size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
124
124
  prefix && !readOnly && (react_1.default.createElement(Input_styles_1.PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
125
125
  react_1.default.createElement(Dropdown_styles_1.DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
126
- !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 })))),
126
+ !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 })))),
127
127
  open &&
128
128
  (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 },
129
129
  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)));
package/dist/cjs/components/Dropdown/Dropdown.styles.js CHANGED
@@ -36,6 +36,8 @@ exports.TrigerWrapper = styled_components_1.default.div `
36
36
  align-items: center;
37
37
  width: 100%;
38
38
  min-width: 0;
39
+ cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
40
+ background: ${({ config, isDisabled }) => isDisabled ? config.color.disabled.bg : 'transparent'};
39
41
  `;
40
42
  exports.DropdownMenuPanel = styled_components_1.default.div `
41
43
  box-sizing: border-box;
package/dist/cjs/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -152,7 +152,7 @@ const DropdownMenu = ({ size = 'md', iconName = 'more_vert', theme, themeVariant
152
152
  const dropdownMenuConfig = componentsConfig.dropdownMenu;
153
153
  return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
154
154
  react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuRoot, null,
155
- react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (react_1.default.createElement(Icon_1.Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
155
+ react_1.default.createElement(Dropdown_styles_1.TrigerWrapper, { ref: triggerRef, config: dropdownMenuConfig }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (react_1.default.createElement(Icon_1.Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
156
156
  open &&
157
157
  (0, react_dom_1.createPortal)(react_1.default.createElement(Dropdown_styles_1.DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdownMenuConfig },
158
158
  react_1.default.createElement(ActionPanel_1.ActionPanel, { options: options, size: size, theme: theme, themeVariant: themeVariant, maxRows: 5, zIndex: zIndex, handleClick: handleClick, header: header, footer: footer })), document.body)));
package/dist/cjs/components/List/List.js CHANGED
@@ -46,7 +46,7 @@ const updateParentSelection = (items, itemID) => {
46
46
  }
47
47
  return found;
48
48
  };
49
- const List = ({ theme, themeVariant = 'default', items, handleChange, handleSelect, isCheckbox, selected, isCollapsable, isStatusable, isSelectable, haveMoreOptions, levelActions = [], }) => {
49
+ const List = ({ theme, themeVariant = 'default', items, handleChange, handleSelect, isCheckbox, selected, isCollapsable, isStatusable, isSelectable = false, haveMoreOptions, levelActions = [], }) => {
50
50
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
51
51
  theme,
52
52
  themeVariant,
@@ -82,12 +82,12 @@ const List = ({ theme, themeVariant = 'default', items, handleChange, handleSele
82
82
  handleChange(newListOption);
83
83
  };
84
84
  const renderRow = (row, level) => {
85
- const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
85
+ const rowHaveStatus = row.statusDone || row.statusError || row.statusWarning;
86
86
  return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
87
87
  react_1.default.createElement(List_styles_1.ListRowRoot, { theme: resolvedTheme, config: checkboxConfig,
88
88
  // action={}
89
89
  level: level },
90
- react_1.default.createElement(List_styles_1.ListRow, { theme: resolvedTheme, config: checkboxConfig, isSelected: isSelectable && selected ? selected === row.id : false },
90
+ react_1.default.createElement(List_styles_1.ListRow, { theme: resolvedTheme, config: checkboxConfig, isSelected: isSelectable && selected ? selected === row.id : false, isSelectable: isSelectable },
91
91
  react_1.default.createElement(react_1.default.Fragment, null,
92
92
  react_1.default.createElement(Aligment_1.Aligment, { justify: "start-flex", gap: checkboxConfig.size.gap, align: "center" },
93
93
  isCollapsable && (react_1.default.createElement(List_styles_1.ListIconWrapper, { theme: resolvedTheme, config: checkboxConfig, isExtended: row.extend || false, onClick: (e) => {
@@ -98,15 +98,15 @@ const List = ({ theme, themeVariant = 'default', items, handleChange, handleSele
98
98
  isStatusable &&
99
99
  rowHaveStatus && (react_1.default.createElement(Icon_1.Icon, { name: row.statusError
100
100
  ? 'error'
101
- : row.statusWarnning
101
+ : row.statusWarning
102
102
  ? 'warning'
103
103
  : 'check_circle', hoverBackground: "transparent", hoverColor: row.statusError
104
104
  ? checkboxConfig.color.status.error
105
- : row.statusWarnning
105
+ : row.statusWarning
106
106
  ? checkboxConfig.color.status.warning
107
107
  : checkboxConfig.color.status.success, color: row.statusError
108
108
  ? checkboxConfig.color.status.error
109
- : row.statusWarnning
109
+ : row.statusWarning
110
110
  ? checkboxConfig.color.status.warning
111
111
  : checkboxConfig.color.status.success })))),
112
112
  isCheckbox && (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
package/dist/cjs/components/List/List.styles.js CHANGED
@@ -11,7 +11,6 @@ exports.ListRoot = styled_components_1.default.div `
11
11
  align-items: center;
12
12
  justify-content: start-flex;
13
13
  flex-direction: column;
14
- background-color: ${({ theme, config }) => config.color.default.background};
15
14
  `;
16
15
  exports.ListRowRoot = styled_components_1.default.div `
17
16
  display: flex;
@@ -29,15 +28,19 @@ exports.ListRow = styled_components_1.default.div `
29
28
  align-items: center;
30
29
  justify-content: space-between;
31
30
  padding: 0 ${({ config }) => config.size.paddingX}px;
32
- background: ${({ theme, config, isSelected }) => isSelected
33
- ? config.color.selected.background
34
- : config.color.default.background};
31
+ background: ${({ theme, config, isSelected, isSelectable }) => isSelectable
32
+ ? isSelected
33
+ ? config.color.selected.background
34
+ : 'transparent'
35
+ : 'transparent'};
35
36
  border-radius: ${({ config }) => config.size.borderRadius}px;
36
- cursor: pointer;
37
+ cursor: ${({ isSelectable }) => (isSelectable ? 'pointer' : 'default')};
37
38
  &:hover {
38
- background: ${({ theme, config, isSelected }) => isSelected
39
- ? config.color.selected.hoverBackground
40
- : config.color.hover.background};
39
+ background: ${({ theme, config, isSelected, isSelectable }) => isSelectable
40
+ ? isSelected
41
+ ? config.color.selected.hoverBackground
42
+ : config.color.hover.background
43
+ : 'transparent'};
41
44
  }
42
45
  width: 100%;
43
46
  height: 100%;
package/dist/cjs/components/Pagination/Pagination.js CHANGED
@@ -11,7 +11,7 @@ const react_1 = __importDefault(require("react"));
11
11
  const Dropdown_1 = require("../Dropdown");
12
12
  const config_2 = require("../../config");
13
13
  const styled_components_1 = require("styled-components");
14
- const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = config_2.wordbook.pagination.dropdownLabel, }) => {
14
+ const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = config_2.wordbook.pagination.dropdownLabel, zIndex }) => {
15
15
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
16
16
  theme,
17
17
  themeVariant,
@@ -61,6 +61,6 @@ const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages,
61
61
  if (!isNaN(num) && num > 0) {
62
62
  onPageSizeChange(num);
63
63
  }
64
- }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px' }))));
64
+ }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px', zIndex: zIndex }))));
65
65
  };
66
66
  exports.Pagination = Pagination;
package/dist/cjs/components/SearchInput/SearchInput.js CHANGED
@@ -40,7 +40,7 @@ const config_1 = require("../../config");
40
40
  const config_2 = require("../../config");
41
41
  const Icon_1 = require("../Icon");
42
42
  const SEARCH_DEBOUNCE_MS = 300;
43
- const SearchInput = ({ theme, themeVariant = 'default', placeholder = config_2.wordbook.searchInput.placeholder, handleSearch, handleAdd, }) => {
43
+ const SearchInput = ({ theme, themeVariant = 'default', placeholder = config_2.wordbook.searchInput.placeholder, handleSearch, handleAdd, withoutBorder = false, }) => {
44
44
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
45
45
  theme,
46
46
  themeVariant,
@@ -74,7 +74,7 @@ const SearchInput = ({ theme, themeVariant = 'default', placeholder = config_2.w
74
74
  handleSearch('');
75
75
  }
76
76
  };
77
- return (react_1.default.createElement(SearchInput_styles_1.SearchWrapperRoot, { theme: resolvedTheme, config: config },
77
+ return (react_1.default.createElement(SearchInput_styles_1.SearchWrapperRoot, { theme: resolvedTheme, config: config, withoutBorder: withoutBorder },
78
78
  react_1.default.createElement(Icon_1.Icon, { name: "search", size: "md", background: "transparent", hoverBackground: "transparent" }),
79
79
  react_1.default.createElement(SearchInput_styles_1.SearchInputElement, { config: config, theme: resolvedTheme, placeholder: placeholder, value: inputValue, onChange: handleInputChange }),
80
80
  inputValue.length > 0 && (react_1.default.createElement(Icon_1.Icon, { name: "close", size: "md", background: "transparent", hoverBackground: "transparent", onClick: clear })),
package/dist/cjs/components/SearchInput/SearchInput.styles.js CHANGED
@@ -13,7 +13,7 @@ exports.SearchWrapperRoot = styled_components_1.default.div `
13
13
  overflow: hidden;
14
14
  width: 100%;
15
15
  height: ${({ config }) => config.size.height}px;
16
- border-bottom: 1px solid ${({ theme, config }) => config.color.default.border};
16
+ border-bottom: ${({ withoutBorder, theme, config }) => withoutBorder ? 'none' : `1px solid ${config.color.default.border}`};
17
17
  background: ${({ theme, config }) => config.color.default.background};
18
18
  ${({ config, isActive }) => `
19
19
  &:hover {
package/dist/cjs/components/Table/Table.js CHANGED
@@ -47,7 +47,7 @@ const Cell_1 = require("./Cell");
47
47
  const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
48
48
  name: '',
49
49
  order: 'none',
50
- }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, }) => {
50
+ }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
51
51
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
52
52
  theme,
53
53
  themeVariant,
@@ -161,7 +161,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
161
161
  ? initialElementsRef.current
162
162
  : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
163
163
  pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
164
- react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters })))))),
164
+ react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
165
165
  react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableHeight },
166
166
  react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
167
167
  react_1.default.createElement(Table_styles_1.TableHead, null,
package/dist/cjs/config/config.js CHANGED
@@ -369,6 +369,7 @@ const createComponentsConfig = (theme = 'default') => {
369
369
  helper: Theme.text.error,
370
370
  },
371
371
  disabled: {
372
+ border: Theme.border.disabled,
372
373
  background: Theme.surface.disabled,
373
374
  text: Theme.text.disabled,
374
375
  cursor: 'not-allowed',
@@ -799,7 +800,6 @@ const createComponentsConfig = (theme = 'default') => {
799
800
  },
800
801
  color: {
801
802
  default: {
802
- background: Theme.surface.default,
803
803
  text: Theme.text.primary,
804
804
  },
805
805
  hover: {
@@ -810,7 +810,7 @@ const createComponentsConfig = (theme = 'default') => {
810
810
  hoverBackground: Theme.action.primary.selectedHover,
811
811
  },
812
812
  status: {
813
- success: Theme.feedback.error.text,
813
+ success: Theme.feedback.success.text,
814
814
  error: Theme.feedback.error.text,
815
815
  warning: Theme.feedback.warning.text,
816
816
  },
package/dist/esm/components/Dropdown/Dropdown.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { resolveThemeWithComponentsConfig } from '../../config';
2
2
  import React, { useEffect, useRef, useState } from 'react';
3
3
  import { ComponentRoot } from '../ComponentRoot';
4
- import { DropdownMenuPanel, DropdownValue, TrigerWrapper } from './Dropdown.styles';
4
+ import { DropdownMenuPanel, DropdownValue, TrigerWrapper, } from './Dropdown.styles';
5
5
  import { wordbook } from '../../config';
6
6
  import { Icon } from '../Icon';
7
7
  import { PrefixWrapper } from '../Input/Input.styles';
@@ -83,11 +83,11 @@ export const Dropdown = ({ label, labelPosition = 'top', value, name, size = 'md
83
83
  }, [open, handleFieldBlur]);
84
84
  return (React.createElement(React.Fragment, null,
85
85
  React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: dropdonwConfig, label: label, isActive: open, noBreakLabel: noBreakLabel, componentWidth: componentWidth },
86
- React.createElement(TrigerWrapper, { ref: triggerRef },
86
+ React.createElement(TrigerWrapper, { ref: triggerRef, isDisabled: disabled, config: dropdonwConfig, onClick: handleToggleOpen },
87
87
  prefixIcon && !readOnly && (React.createElement(Icon, { name: prefixIcon, size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
88
88
  prefix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: dropdonwConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
89
89
  React.createElement(DropdownValue, { config: dropdonwConfig, inputSize: size, onClick: handleToggleOpen, disabled: disabled, theme: resolvedTheme }, value ? getLabelForValue(value) : !readOnly && placeholder),
90
- !readOnly && (React.createElement(Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
90
+ !readOnly && (React.createElement(Icon, { name: open ? 'chevron_up' : 'chevron_down', size: dropdonwConfig.size[size].iconSize, background: 'transparent', hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: handleToggleOpen })))),
91
91
  open &&
92
92
  createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdonwConfig, zIndex: zIndex },
93
93
  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/Dropdown/Dropdown.styles.js CHANGED
@@ -30,6 +30,8 @@ export const TrigerWrapper = styled.div `
30
30
  align-items: center;
31
31
  width: 100%;
32
32
  min-width: 0;
33
+ cursor: ${({ isDisabled }) => (isDisabled ? 'not-allowed' : 'pointer')};
34
+ background: ${({ config, isDisabled }) => isDisabled ? config.color.disabled.bg : 'transparent'};
33
35
  `;
34
36
  export const DropdownMenuPanel = styled.div `
35
37
  box-sizing: border-box;
package/dist/esm/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -116,7 +116,7 @@ export const DropdownMenu = ({ size = 'md', iconName = 'more_vert', theme, theme
116
116
  const dropdownMenuConfig = componentsConfig.dropdownMenu;
117
117
  return (React.createElement(ThemeProvider, { theme: resolvedTheme },
118
118
  React.createElement(DropdownMenuRoot, null,
119
- React.createElement(TrigerWrapper, { ref: triggerRef }, textMode ? (React.createElement(DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (React.createElement(Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
119
+ React.createElement(TrigerWrapper, { ref: triggerRef, config: dropdownMenuConfig }, textMode ? (React.createElement(DropdownMenuText, { isActive: open, onClick: () => toogle(!open), theme: resolvedTheme, config: dropdownMenuConfig }, label)) : (React.createElement(Icon, { name: iconName, size: size, isActive: open, color: iconColor, hoverColor: iconHoverColor, background: iconBgColor, hoverBackground: iconBgHoverColor, onClick: () => toogle(!open) })))),
120
120
  open &&
121
121
  createPortal(React.createElement(DropdownMenuPanel, { isOpen: open, style: dropdownStyles, ref: panelRef, theme: resolvedTheme, config: dropdownMenuConfig },
122
122
  React.createElement(ActionPanel, { options: options, size: size, theme: theme, themeVariant: themeVariant, maxRows: 5, zIndex: zIndex, handleClick: handleClick, header: header, footer: footer })), document.body)));
package/dist/esm/components/List/List.js CHANGED
@@ -40,7 +40,7 @@ const updateParentSelection = (items, itemID) => {
40
40
  }
41
41
  return found;
42
42
  };
43
- export const List = ({ theme, themeVariant = 'default', items, handleChange, handleSelect, isCheckbox, selected, isCollapsable, isStatusable, isSelectable, haveMoreOptions, levelActions = [], }) => {
43
+ export const List = ({ theme, themeVariant = 'default', items, handleChange, handleSelect, isCheckbox, selected, isCollapsable, isStatusable, isSelectable = false, haveMoreOptions, levelActions = [], }) => {
44
44
  const resolvedThemeData = resolveThemeWithComponentsConfig({
45
45
  theme,
46
46
  themeVariant,
@@ -76,12 +76,12 @@ export const List = ({ theme, themeVariant = 'default', items, handleChange, han
76
76
  handleChange(newListOption);
77
77
  };
78
78
  const renderRow = (row, level) => {
79
- const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
79
+ const rowHaveStatus = row.statusDone || row.statusError || row.statusWarning;
80
80
  return (React.createElement(ThemeProvider, { theme: resolvedTheme },
81
81
  React.createElement(ListRowRoot, { theme: resolvedTheme, config: checkboxConfig,
82
82
  // action={}
83
83
  level: level },
84
- React.createElement(ListRow, { theme: resolvedTheme, config: checkboxConfig, isSelected: isSelectable && selected ? selected === row.id : false },
84
+ React.createElement(ListRow, { theme: resolvedTheme, config: checkboxConfig, isSelected: isSelectable && selected ? selected === row.id : false, isSelectable: isSelectable },
85
85
  React.createElement(React.Fragment, null,
86
86
  React.createElement(Aligment, { justify: "start-flex", gap: checkboxConfig.size.gap, align: "center" },
87
87
  isCollapsable && (React.createElement(ListIconWrapper, { theme: resolvedTheme, config: checkboxConfig, isExtended: row.extend || false, onClick: (e) => {
@@ -92,15 +92,15 @@ export const List = ({ theme, themeVariant = 'default', items, handleChange, han
92
92
  isStatusable &&
93
93
  rowHaveStatus && (React.createElement(Icon, { name: row.statusError
94
94
  ? 'error'
95
- : row.statusWarnning
95
+ : row.statusWarning
96
96
  ? 'warning'
97
97
  : 'check_circle', hoverBackground: "transparent", hoverColor: row.statusError
98
98
  ? checkboxConfig.color.status.error
99
- : row.statusWarnning
99
+ : row.statusWarning
100
100
  ? checkboxConfig.color.status.warning
101
101
  : checkboxConfig.color.status.success, color: row.statusError
102
102
  ? checkboxConfig.color.status.error
103
- : row.statusWarnning
103
+ : row.statusWarning
104
104
  ? checkboxConfig.color.status.warning
105
105
  : checkboxConfig.color.status.success })))),
106
106
  isCheckbox && (React.createElement("div", { onClick: (e) => e.stopPropagation() },
package/dist/esm/components/List/List.styles.js CHANGED
@@ -5,7 +5,6 @@ export const ListRoot = styled.div `
5
5
  align-items: center;
6
6
  justify-content: start-flex;
7
7
  flex-direction: column;
8
- background-color: ${({ theme, config }) => config.color.default.background};
9
8
  `;
10
9
  export const ListRowRoot = styled.div `
11
10
  display: flex;
@@ -23,15 +22,19 @@ export const ListRow = styled.div `
23
22
  align-items: center;
24
23
  justify-content: space-between;
25
24
  padding: 0 ${({ config }) => config.size.paddingX}px;
26
- background: ${({ theme, config, isSelected }) => isSelected
27
- ? config.color.selected.background
28
- : config.color.default.background};
25
+ background: ${({ theme, config, isSelected, isSelectable }) => isSelectable
26
+ ? isSelected
27
+ ? config.color.selected.background
28
+ : 'transparent'
29
+ : 'transparent'};
29
30
  border-radius: ${({ config }) => config.size.borderRadius}px;
30
- cursor: pointer;
31
+ cursor: ${({ isSelectable }) => (isSelectable ? 'pointer' : 'default')};
31
32
  &:hover {
32
- background: ${({ theme, config, isSelected }) => isSelected
33
- ? config.color.selected.hoverBackground
34
- : config.color.hover.background};
33
+ background: ${({ theme, config, isSelected, isSelectable }) => isSelectable
34
+ ? isSelected
35
+ ? config.color.selected.hoverBackground
36
+ : config.color.hover.background
37
+ : 'transparent'};
35
38
  }
36
39
  width: 100%;
37
40
  height: 100%;
package/dist/esm/components/Pagination/Pagination.js CHANGED
@@ -5,7 +5,7 @@ import React from 'react';
5
5
  import { Dropdown } from '../Dropdown';
6
6
  import { wordbook } from '../../config';
7
7
  import { ThemeProvider } from 'styled-components';
8
- export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = wordbook.pagination.dropdownLabel, }) => {
8
+ export const Pagination = ({ theme, themeVariant = 'default', currentPage, totalPages, pageSize, onPageChange, onPageSizeChange, availableValues = [10, 20, 50], label = wordbook.pagination.dropdownLabel, zIndex }) => {
9
9
  const resolvedThemeData = resolveThemeWithComponentsConfig({
10
10
  theme,
11
11
  themeVariant,
@@ -55,5 +55,5 @@ export const Pagination = ({ theme, themeVariant = 'default', currentPage, total
55
55
  if (!isNaN(num) && num > 0) {
56
56
  onPageSizeChange(num);
57
57
  }
58
- }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px' }))));
58
+ }, name: "pageSize", value: String(pageSize), options: dropdownOptions, width: 'auto', componentWidth: '80px', zIndex: zIndex }))));
59
59
  };
package/dist/esm/components/SearchInput/SearchInput.js CHANGED
@@ -4,7 +4,7 @@ import { resolveThemeWithComponentsConfig } from '../../config';
4
4
  import { wordbook } from '../../config';
5
5
  import { Icon } from '../Icon';
6
6
  const SEARCH_DEBOUNCE_MS = 300;
7
- export const SearchInput = ({ theme, themeVariant = 'default', placeholder = wordbook.searchInput.placeholder, handleSearch, handleAdd, }) => {
7
+ export const SearchInput = ({ theme, themeVariant = 'default', placeholder = wordbook.searchInput.placeholder, handleSearch, handleAdd, withoutBorder = false, }) => {
8
8
  const resolvedThemeData = resolveThemeWithComponentsConfig({
9
9
  theme,
10
10
  themeVariant,
@@ -38,7 +38,7 @@ export const SearchInput = ({ theme, themeVariant = 'default', placeholder = wor
38
38
  handleSearch('');
39
39
  }
40
40
  };
41
- return (React.createElement(SearchWrapperRoot, { theme: resolvedTheme, config: config },
41
+ return (React.createElement(SearchWrapperRoot, { theme: resolvedTheme, config: config, withoutBorder: withoutBorder },
42
42
  React.createElement(Icon, { name: "search", size: "md", background: "transparent", hoverBackground: "transparent" }),
43
43
  React.createElement(SearchInputElement, { config: config, theme: resolvedTheme, placeholder: placeholder, value: inputValue, onChange: handleInputChange }),
44
44
  inputValue.length > 0 && (React.createElement(Icon, { name: "close", size: "md", background: "transparent", hoverBackground: "transparent", onClick: clear })),
package/dist/esm/components/SearchInput/SearchInput.styles.js CHANGED
@@ -7,7 +7,7 @@ export const SearchWrapperRoot = styled.div `
7
7
  overflow: hidden;
8
8
  width: 100%;
9
9
  height: ${({ config }) => config.size.height}px;
10
- border-bottom: 1px solid ${({ theme, config }) => config.color.default.border};
10
+ border-bottom: ${({ withoutBorder, theme, config }) => withoutBorder ? 'none' : `1px solid ${config.color.default.border}`};
11
11
  background: ${({ theme, config }) => config.color.default.background};
12
12
  ${({ config, isActive }) => `
13
13
  &:hover {
package/dist/esm/components/Table/Table.js CHANGED
@@ -11,7 +11,7 @@ import { Cell } from './Cell';
11
11
  export const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
12
12
  name: '',
13
13
  order: 'none',
14
- }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, }) => {
14
+ }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
15
15
  const resolvedThemeData = resolveThemeWithComponentsConfig({
16
16
  theme,
17
17
  themeVariant,
@@ -125,7 +125,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
125
125
  ? initialElementsRef.current
126
126
  : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
127
127
  pagination && (React.createElement(HeaderSection, { right: true },
128
- React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters })))))),
128
+ React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
129
129
  React.createElement(TableContentWrapper, { componentHeight: tableHeight },
130
130
  React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
131
131
  React.createElement(TableHead, null,
package/dist/esm/config/config.js CHANGED
@@ -364,6 +364,7 @@ export const createComponentsConfig = (theme = 'default') => {
364
364
  helper: Theme.text.error,
365
365
  },
366
366
  disabled: {
367
+ border: Theme.border.disabled,
367
368
  background: Theme.surface.disabled,
368
369
  text: Theme.text.disabled,
369
370
  cursor: 'not-allowed',
@@ -794,7 +795,6 @@ export const createComponentsConfig = (theme = 'default') => {
794
795
  },
795
796
  color: {
796
797
  default: {
797
- background: Theme.surface.default,
798
798
  text: Theme.text.primary,
799
799
  },
800
800
  hover: {
@@ -805,7 +805,7 @@ export const createComponentsConfig = (theme = 'default') => {
805
805
  hoverBackground: Theme.action.primary.selectedHover,
806
806
  },
807
807
  status: {
808
- success: Theme.feedback.error.text,
808
+ success: Theme.feedback.success.text,
809
809
  error: Theme.feedback.error.text,
810
810
  warning: Theme.feedback.warning.text,
811
811
  },
package/dist/types/components/Dropdown/Dropdown.styles.d.ts CHANGED
@@ -10,7 +10,11 @@ interface IDropdownValueProps {
10
10
  readOnly?: boolean;
11
11
  }
12
12
  export declare const DropdownValue: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IDropdownValueProps, never>;
13
- export declare const TrigerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
13
+ interface ITrigerWrapperProps {
14
+ isDisabled?: boolean;
15
+ config: any;
16
+ }
17
+ export declare const TrigerWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITrigerWrapperProps, never>;
14
18
  interface IDropdownMenuPanelProps {
15
19
  theme: AppTheme;
16
20
  config: any;
package/dist/types/components/List/List.d.ts CHANGED
@@ -9,7 +9,7 @@ export interface IListItem {
9
9
  extend?: boolean;
10
10
  statusDone?: boolean;
11
11
  statusError?: boolean;
12
- statusWarnning?: boolean;
12
+ statusWarning?: boolean;
13
13
  }
14
14
  export interface ILevelAction {
15
15
  level: number;
package/dist/types/components/List/List.styles.d.ts CHANGED
@@ -14,6 +14,7 @@ interface IListRow {
14
14
  theme: AppTheme;
15
15
  config: any;
16
16
  isSelected: boolean;
17
+ isSelectable: boolean;
17
18
  }
18
19
  export declare const ListRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, IListRow, never>;
19
20
  interface IListIconWrapper {
package/dist/types/components/Pagination/Pagination.d.ts CHANGED
@@ -10,6 +10,7 @@ interface IPaginationProps {
10
10
  onPageSizeChange: (size: number) => void;
11
11
  availableValues?: number[];
12
12
  label?: string;
13
+ zIndex?: number;
13
14
  }
14
15
  export declare const Pagination: FC<IPaginationProps>;
15
16
  export {};
package/dist/types/components/SearchInput/SearchInput.d.ts CHANGED
@@ -6,6 +6,7 @@ interface ISearchInputProps {
6
6
  placeholder?: string;
7
7
  handleSearch?: (value: string) => void;
8
8
  handleAdd?: (value: string | number) => void;
9
+ withoutBorder?: boolean;
9
10
  }
10
11
  export declare const SearchInput: FC<ISearchInputProps>;
11
12
  export {};
package/dist/types/components/SearchInput/SearchInput.styles.d.ts CHANGED
@@ -3,6 +3,7 @@ interface ISearchWrapperRootProps {
3
3
  theme: AppTheme;
4
4
  config: any;
5
5
  isActive?: boolean;
6
+ withoutBorder?: boolean;
6
7
  }
7
8
  export declare const SearchWrapperRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ISearchWrapperRootProps, never>;
8
9
  interface ISearchInputElementProps {
package/dist/types/components/Table/Table.d.ts CHANGED
@@ -22,6 +22,7 @@ interface ITableProps {
22
22
  paginationLabel?: IFilterLabels;
23
23
  calendarLabels?: IFilterLabels;
24
24
  calendarLocaleLabels?: ICalendarLocaleLabels;
25
+ paginationZIndex?: number;
25
26
  }
26
27
  export interface ITableHeaderProps {
27
28
  name: string;
package/dist/types/config/config.d.ts CHANGED
@@ -372,6 +372,7 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
372
372
  helper: "#DC2626";
373
373
  };
374
374
  disabled: {
375
+ border: "#E5E7EB";
375
376
  background: "#F3F4F6";
376
377
  text: "#9CA3AF";
377
378
  cursor: string;
@@ -801,7 +802,6 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
801
802
  };
802
803
  color: {
803
804
  default: {
804
- background: "#FFFFFF";
805
805
  text: "#111827";
806
806
  };
807
807
  hover: {
@@ -812,7 +812,7 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
812
812
  hoverBackground: "#9FD0EC";
813
813
  };
814
814
  status: {
815
- success: "#DC2626";
815
+ success: "#059669";
816
816
  error: "#DC2626";
817
817
  warning: "#D97706";
818
818
  };
@@ -1694,6 +1694,7 @@ export declare const componentsConfig: {
1694
1694
  helper: "#DC2626";
1695
1695
  };
1696
1696
  disabled: {
1697
+ border: "#E5E7EB";
1697
1698
  background: "#F3F4F6";
1698
1699
  text: "#9CA3AF";
1699
1700
  cursor: string;
@@ -2123,7 +2124,6 @@ export declare const componentsConfig: {
2123
2124
  };
2124
2125
  color: {
2125
2126
  default: {
2126
- background: "#FFFFFF";
2127
2127
  text: "#111827";
2128
2128
  };
2129
2129
  hover: {
@@ -2134,7 +2134,7 @@ export declare const componentsConfig: {
2134
2134
  hoverBackground: "#9FD0EC";
2135
2135
  };
2136
2136
  status: {
2137
- success: "#DC2626";
2137
+ success: "#059669";
2138
2138
  error: "#DC2626";
2139
2139
  warning: "#D97706";
2140
2140
  };
@@ -3160,6 +3160,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
3160
3160
  helper: "#DC2626";
3161
3161
  };
3162
3162
  disabled: {
3163
+ border: "#E5E7EB";
3163
3164
  background: "#F3F4F6";
3164
3165
  text: "#9CA3AF";
3165
3166
  cursor: string;
@@ -3589,7 +3590,6 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
3589
3590
  };
3590
3591
  color: {
3591
3592
  default: {
3592
- background: "#FFFFFF";
3593
3593
  text: "#111827";
3594
3594
  };
3595
3595
  hover: {
@@ -3600,7 +3600,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
3600
3600
  hoverBackground: "#9FD0EC";
3601
3601
  };
3602
3602
  status: {
3603
- success: "#DC2626";
3603
+ success: "#059669";
3604
3604
  error: "#DC2626";
3605
3605
  warning: "#D97706";
3606
3606
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.25",
3
+ "version": "3.0.29",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",