venice-ui 3.0.27 → 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 (16) hide show
  1. package/dist/cjs/components/List/List.js +6 -6
  2. package/dist/cjs/components/List/List.styles.js +11 -8
  3. package/dist/cjs/components/SearchInput/SearchInput.js +2 -2
  4. package/dist/cjs/components/SearchInput/SearchInput.styles.js +1 -1
  5. package/dist/cjs/config/config.js +1 -2
  6. package/dist/esm/components/List/List.js +6 -6
  7. package/dist/esm/components/List/List.styles.js +11 -8
  8. package/dist/esm/components/SearchInput/SearchInput.js +2 -2
  9. package/dist/esm/components/SearchInput/SearchInput.styles.js +1 -1
  10. package/dist/esm/config/config.js +1 -2
  11. package/dist/types/components/List/List.d.ts +1 -1
  12. package/dist/types/components/List/List.styles.d.ts +1 -0
  13. package/dist/types/components/SearchInput/SearchInput.d.ts +1 -0
  14. package/dist/types/components/SearchInput/SearchInput.styles.d.ts +1 -0
  15. package/dist/types/config/config.d.ts +3 -6
  16. package/package.json +1 -1
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/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/config/config.js CHANGED
@@ -800,7 +800,6 @@ const createComponentsConfig = (theme = 'default') => {
800
800
  },
801
801
  color: {
802
802
  default: {
803
- background: Theme.surface.default,
804
803
  text: Theme.text.primary,
805
804
  },
806
805
  hover: {
@@ -811,7 +810,7 @@ const createComponentsConfig = (theme = 'default') => {
811
810
  hoverBackground: Theme.action.primary.selectedHover,
812
811
  },
813
812
  status: {
814
- success: Theme.feedback.error.text,
813
+ success: Theme.feedback.success.text,
815
814
  error: Theme.feedback.error.text,
816
815
  warning: Theme.feedback.warning.text,
817
816
  },
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/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/config/config.js CHANGED
@@ -795,7 +795,6 @@ export const createComponentsConfig = (theme = 'default') => {
795
795
  },
796
796
  color: {
797
797
  default: {
798
- background: Theme.surface.default,
799
798
  text: Theme.text.primary,
800
799
  },
801
800
  hover: {
@@ -806,7 +805,7 @@ export const createComponentsConfig = (theme = 'default') => {
806
805
  hoverBackground: Theme.action.primary.selectedHover,
807
806
  },
808
807
  status: {
809
- success: Theme.feedback.error.text,
808
+ success: Theme.feedback.success.text,
810
809
  error: Theme.feedback.error.text,
811
810
  warning: Theme.feedback.warning.text,
812
811
  },
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/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/config/config.d.ts CHANGED
@@ -802,7 +802,6 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
802
802
  };
803
803
  color: {
804
804
  default: {
805
- background: "#FFFFFF";
806
805
  text: "#111827";
807
806
  };
808
807
  hover: {
@@ -813,7 +812,7 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
813
812
  hoverBackground: "#9FD0EC";
814
813
  };
815
814
  status: {
816
- success: "#DC2626";
815
+ success: "#059669";
817
816
  error: "#DC2626";
818
817
  warning: "#D97706";
819
818
  };
@@ -2125,7 +2124,6 @@ export declare const componentsConfig: {
2125
2124
  };
2126
2125
  color: {
2127
2126
  default: {
2128
- background: "#FFFFFF";
2129
2127
  text: "#111827";
2130
2128
  };
2131
2129
  hover: {
@@ -2136,7 +2134,7 @@ export declare const componentsConfig: {
2136
2134
  hoverBackground: "#9FD0EC";
2137
2135
  };
2138
2136
  status: {
2139
- success: "#DC2626";
2137
+ success: "#059669";
2140
2138
  error: "#DC2626";
2141
2139
  warning: "#D97706";
2142
2140
  };
@@ -3592,7 +3590,6 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
3592
3590
  };
3593
3591
  color: {
3594
3592
  default: {
3595
- background: "#FFFFFF";
3596
3593
  text: "#111827";
3597
3594
  };
3598
3595
  hover: {
@@ -3603,7 +3600,7 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
3603
3600
  hoverBackground: "#9FD0EC";
3604
3601
  };
3605
3602
  status: {
3606
- success: "#DC2626";
3603
+ success: "#059669";
3607
3604
  error: "#DC2626";
3608
3605
  warning: "#D97706";
3609
3606
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.27",
3
+ "version": "3.0.29",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",