venice-ui 2.4.6 → 2.4.8

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/Theme/Theme.js +4 -1
  2. package/dist/cjs/components/List/List.js +6 -3
  3. package/dist/cjs/components/Selector/Selector.js +5 -4
  4. package/dist/cjs/components/Selector/Selector.styles.js +40 -11
  5. package/dist/cjs/components/common/inputStyles.js +44 -1
  6. package/dist/esm/Theme/Theme.js +4 -1
  7. package/dist/esm/components/List/List.js +7 -4
  8. package/dist/esm/components/Selector/Selector.js +7 -6
  9. package/dist/esm/components/Selector/Selector.styles.js +40 -11
  10. package/dist/esm/components/common/inputStyles.js +39 -0
  11. package/dist/types/Theme/Theme.d.ts +3 -0
  12. package/dist/types/components/List/List.d.ts +4 -0
  13. package/dist/types/components/Selector/Selector.d.ts +0 -1
  14. package/dist/types/components/Selector/Selector.styles.d.ts +10 -0
  15. package/dist/types/components/common/inputStyles.d.ts +19 -0
  16. package/package.json +1 -1
package/dist/cjs/Theme/Theme.js CHANGED
@@ -24,7 +24,9 @@ exports.Theme = {
24
24
  gray_4: '#f3f3f3',
25
25
  white: "#ffffff",
26
26
  overlayer: 'rgba(0,0,0,0.4)',
27
- red: '#ad1616'
27
+ red: '#ad1616',
28
+ orange: '#de890a',
29
+ green: '#179334'
28
30
  },
29
31
  fontSize: {
30
32
  xxs: '10px',
@@ -103,6 +105,7 @@ exports.mainTheme = {
103
105
  optionActiveColor: exports.Theme.colors.primary,
104
106
  optionColor: exports.Theme.colors.text,
105
107
  optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
108
+ selector: exports.Theme.colors.primary_10,
106
109
  //table
107
110
  tableBorderColor: exports.Theme.colors.gray_3,
108
111
  tableHeaderBackground: exports.Theme.colors.white,
package/dist/cjs/components/List/List.js CHANGED
@@ -13,7 +13,7 @@ const Icons_1 = require("../Icons");
13
13
  const Theme_1 = require("../../Theme");
14
14
  const Table_styles_1 = require("../Table/Table.styles");
15
15
  const DropdownMenu_1 = require("../DropdownMenu");
16
- const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, levelActions = [], }) => {
16
+ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, isStatus = false, items, handleChange, handleSelect, selected, theme = Theme_1.mainTheme, levelActions = [], }) => {
17
17
  const updateItem = (items, rowID, updater) => {
18
18
  items.forEach((_item) => {
19
19
  if (_item.id === rowID) {
@@ -98,11 +98,14 @@ const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false,
98
98
  }
99
99
  };
100
100
  const gerenrateRow = (row, level) => {
101
+ const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
101
102
  return (react_1.default.createElement(react_1.default.Fragment, null,
102
103
  react_1.default.createElement(list_styles_1.ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
103
- isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
104
+ isCollapsable && (react_1.default.createElement(list_styles_1.ListIconWrapper, { extend: row.extend || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
104
105
  e.stopPropagation();
105
- } }, row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
106
+ } },
107
+ row.children.length !== 0 && (react_1.default.createElement(Icons_1.Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),
108
+ row.children.length === 0 && isStatus && rowHaveStatus && (react_1.default.createElement(Icons_1.Icon, { name: row.statusError ? "error" : row.statusWarnning ? "warning" : "check_circle", size: 16, noPadding: true, iconColor: row.statusError ? Theme_1.Theme.colors.red : row.statusWarnning ? Theme_1.Theme.colors.orange : Theme_1.Theme.colors.green })))),
106
109
  isCheckbox && (react_1.default.createElement("div", { onClick: (e) => e.stopPropagation() },
107
110
  react_1.default.createElement(Checkbox_1.Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
108
111
  react_1.default.createElement(list_styles_1.ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
package/dist/cjs/components/Selector/Selector.js CHANGED
@@ -34,7 +34,7 @@ const Modal_1 = require("../Modal");
34
34
  const common_1 = require("../common");
35
35
  const styled_components_1 = require("styled-components");
36
36
  const Typography_1 = require("../Typography");
37
- const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
37
+ const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
38
38
  const [open, toogleOpen] = (0, react_1.useState)(false);
39
39
  const selectOption = (selectedValue) => {
40
40
  handleSelect(name, selectedValue);
@@ -49,12 +49,13 @@ const Selector = ({ theme = Theme_1.mainTheme, label, labelPosition = 'top', siz
49
49
  }
50
50
  };
51
51
  return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
52
- react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width, gap: 4 },
52
+ react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
53
53
  label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
54
54
  react_1.default.createElement(Selector_styles_1.SelectorElement, null,
55
- value ? (react_1.default.createElement(react_1.default.Fragment, null,
55
+ value ? (react_1.default.createElement(Selector_styles_1.SelectorValueWrapper, { size: size, isDisabled: disabled },
56
56
  react_1.default.createElement(Selector_styles_1.SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
57
- react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconSize)(size), isDisabled: disabled }))) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: handleOpen, size: (0, common_1.setIconSize)(size), isDisabled: disabled })),
57
+ react_1.default.createElement(Icons_1.Icon, { name: 'close', onClick: () => handleClear(), size: (0, common_1.setIconShiftSize)(size), isDisabled: disabled }))) : (react_1.default.createElement(react_1.default.Fragment, null,
58
+ react_1.default.createElement(Selector_styles_1.SelectorAction, { size: size, isDisabled: disabled, onClick: handleOpen }, optionsPanelTitle))),
58
59
  open && (react_1.default.createElement(Modal_1.Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (react_1.default.createElement(Typography_1.Text, null, optionsPanelEmptyMsg)))),
59
60
  error && react_1.default.createElement(Input_1.InputErrorMsg, null, error)))));
60
61
  };
package/dist/cjs/components/Selector/Selector.styles.js CHANGED
@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.SelectorValue = exports.SelectorElement = void 0;
6
+ exports.SelectorValueWrapper = exports.SelectorAction = exports.SelectorValue = exports.SelectorElement = void 0;
7
7
  const styled_components_1 = __importDefault(require("styled-components"));
8
8
  const common_1 = require("../common");
9
+ const Theme_1 = require("../../Theme/Theme");
9
10
  exports.SelectorElement = styled_components_1.default.div `
10
11
  position: relative;
11
12
  cursor: pointer;
@@ -14,22 +15,50 @@ exports.SelectorElement = styled_components_1.default.div `
14
15
  align-items: center;
15
16
  `;
16
17
  exports.SelectorValue = styled_components_1.default.div `
17
- ${common_1.defaultStyles}
18
- cursor: pointer;
19
- display: flex;
20
- align-items: center;
21
- ${(p) => (0, common_1.setSize)(p.size)}
22
- color:${(p) => p.theme.optionActiveColor};
18
+ box-sizing: border-box;
19
+
20
+ width: 100%;
21
+ font-family: 'Lato', sans-serif;
22
+ outline: 0;
23
+ white-space: nowrap;
24
+ overflow: hidden;
25
+ text-overflow: ellipsis;
26
+ color: ${(p) => p.theme.textColor};
23
27
  &:hover {
24
- background-color: ${(p) => p.theme.optionHoverBackground};
28
+ color: ${(p) => p.theme.action};
25
29
  }
26
30
  ${(p) => p.isDisabled &&
27
31
  `
28
32
  cursor:not-allowed;
29
33
  background-color: ${p.theme.inputDisabledBackground};
30
34
  color: ${p.theme.inputDisabledTextColor};
31
- &:hover{
32
- background-color: ${p.theme.inputDisabledBackground};
33
- }
35
+ `}
36
+ `;
37
+ exports.SelectorAction = styled_components_1.default.div `
38
+ ${(p) => (0, common_1.setSelectorSize)(p.size)}
39
+ color:${(p) => p.theme.optionActiveColor};
40
+ cursor: pointer;
41
+ text-decoration: underline;
42
+
43
+ ${(p) => p.isDisabled &&
44
+ `
45
+ cursor:not-allowed;
46
+ color: ${p.theme.inputDisabledTextColor};
47
+
48
+ `}
49
+ `;
50
+ exports.SelectorValueWrapper = styled_components_1.default.div `
51
+ cursor: pointer;
52
+ display: flex;
53
+ align-items: center;
54
+ background-color: ${(p) => p.theme.selector};
55
+ border-radius: ${Theme_1.Theme.borderRadius.m};
56
+ gap: 4px;
57
+ ${(p) => (0, common_1.setSelecAreaSize)(p.size)}
58
+ ${(p) => p.isDisabled &&
59
+ `
60
+ cursor:not-allowed;
61
+ background-color: ${p.theme.inputDisabledBackground};
62
+
34
63
  `}
35
64
  `;
package/dist/cjs/components/common/inputStyles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSizeWithPrefix = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPaddingWithPrefix = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
3
+ exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelTop = exports.panelTop = exports.setIconShiftSize = exports.setIconSize = exports.iconShiftSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSizeWithPrefix = exports.setFontSize = exports.setSelectorSize = exports.setSelecAreaSize = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPaddingWithPrefix = exports.selectorPadding = exports.selectAreaPadding = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
4
4
  const polished_1 = require("polished");
5
5
  const Theme_1 = require("../../Theme");
6
6
  exports.defaultStyles = `
@@ -64,6 +64,28 @@ exports.inputPadding = {
64
64
  padding: ${Theme_1.Theme.padding.m};
65
65
  `,
66
66
  };
67
+ exports.selectAreaPadding = {
68
+ small: `
69
+ padding: calc(${Theme_1.Theme.padding.s} - 2px) ${Theme_1.Theme.padding.s};
70
+ `,
71
+ medium: `
72
+ padding: calc(${Theme_1.Theme.padding.m} - 2px) ${Theme_1.Theme.padding.m};
73
+ `,
74
+ large: `
75
+ padding: calc(${Theme_1.Theme.padding.m} - 4px) ${Theme_1.Theme.padding.m};
76
+ `,
77
+ };
78
+ exports.selectorPadding = {
79
+ small: `
80
+ padding: calc(${Theme_1.Theme.padding.s} ) 0px;
81
+ `,
82
+ medium: `
83
+ padding: calc(${Theme_1.Theme.padding.m} + 1px) 0px;
84
+ `,
85
+ large: `
86
+ padding: calc(${Theme_1.Theme.padding.m} ) 0px;
87
+ `,
88
+ };
67
89
  exports.inputPaddingWithPrefix = {
68
90
  small: `
69
91
  padding: ${Theme_1.Theme.padding.s};
@@ -116,6 +138,18 @@ const setSize = (size) => {
116
138
  return exports.sizes[size] + exports.inputPadding[size];
117
139
  };
118
140
  exports.setSize = setSize;
141
+ const setSelecAreaSize = (size) => {
142
+ return exports.sizes[size] + exports.selectAreaPadding[size];
143
+ };
144
+ exports.setSelecAreaSize = setSelecAreaSize;
145
+ const setSelectorSize = (size) => {
146
+ return exports.sizes[size] + exports.selectorPadding[size];
147
+ };
148
+ exports.setSelectorSize = setSelectorSize;
149
+ const setFontSize = (size) => {
150
+ return exports.sizes[size];
151
+ };
152
+ exports.setFontSize = setFontSize;
119
153
  const setSizeWithPrefix = (size) => {
120
154
  return exports.sizes[size] + exports.inputPaddingWithPrefix[size];
121
155
  };
@@ -177,10 +211,19 @@ exports.iconSize = {
177
211
  medium: 28,
178
212
  large: 34,
179
213
  };
214
+ exports.iconShiftSize = {
215
+ small: 12,
216
+ medium: 16,
217
+ large: 24,
218
+ };
180
219
  const setIconSize = (size) => {
181
220
  return exports.iconSize[size];
182
221
  };
183
222
  exports.setIconSize = setIconSize;
223
+ const setIconShiftSize = (size) => {
224
+ return exports.iconShiftSize[size];
225
+ };
226
+ exports.setIconShiftSize = setIconShiftSize;
184
227
  exports.panelTop = {
185
228
  small: '26px',
186
229
  medium: '36px',
package/dist/esm/Theme/Theme.js CHANGED
@@ -21,7 +21,9 @@ export const Theme = {
21
21
  gray_4: '#f3f3f3',
22
22
  white: "#ffffff",
23
23
  overlayer: 'rgba(0,0,0,0.4)',
24
- red: '#ad1616'
24
+ red: '#ad1616',
25
+ orange: '#de890a',
26
+ green: '#179334'
25
27
  },
26
28
  fontSize: {
27
29
  xxs: '10px',
@@ -100,6 +102,7 @@ export const mainTheme = {
100
102
  optionActiveColor: Theme.colors.primary,
101
103
  optionColor: Theme.colors.text,
102
104
  optionHoverBackground: lighten(0.3, Theme.colors.primary),
105
+ selector: Theme.colors.primary_10,
103
106
  //table
104
107
  tableBorderColor: Theme.colors.gray_3,
105
108
  tableHeaderBackground: Theme.colors.white,
package/dist/esm/components/List/List.js CHANGED
@@ -4,10 +4,10 @@ import { ListIconWrapper, ListRow, ListRowExtend, ListText, MoreWrapper, } from
4
4
  import { Checkbox } from '../Checkbox';
5
5
  import { ThemeProvider } from 'styled-components';
6
6
  import { Icon } from '../Icons';
7
- import { mainTheme } from '../../Theme';
7
+ import { mainTheme, Theme } from '../../Theme';
8
8
  import { OptionTableCellWrapper } from '../Table/Table.styles';
9
9
  import { DropdownMenu } from '../DropdownMenu';
10
- export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, items, handleChange, handleSelect, selected, theme = mainTheme, levelActions = [], }) => {
10
+ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, isStatus = false, items, handleChange, handleSelect, selected, theme = mainTheme, levelActions = [], }) => {
11
11
  const updateItem = (items, rowID, updater) => {
12
12
  items.forEach((_item) => {
13
13
  if (_item.id === rowID) {
@@ -92,11 +92,14 @@ export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable =
92
92
  }
93
93
  };
94
94
  const gerenrateRow = (row, level) => {
95
+ const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
95
96
  return (React.createElement(React.Fragment, null,
96
97
  React.createElement(ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
97
- isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || false, onClick: (e) => {
98
+ isCollapsable && (React.createElement(ListIconWrapper, { extend: row.extend || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
98
99
  e.stopPropagation();
99
- } }, row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })))),
100
+ } },
101
+ row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),
102
+ row.children.length === 0 && isStatus && rowHaveStatus && (React.createElement(Icon, { name: row.statusError ? "error" : row.statusWarnning ? "warning" : "check_circle", size: 16, noPadding: true, iconColor: row.statusError ? Theme.colors.red : row.statusWarnning ? Theme.colors.orange : Theme.colors.green })))),
100
103
  isCheckbox && (React.createElement("div", { onClick: (e) => e.stopPropagation() },
101
104
  React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
102
105
  React.createElement(ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
package/dist/esm/components/Selector/Selector.js CHANGED
@@ -3,12 +3,12 @@ import { Aligment } from '../Aligment';
3
3
  import { mainTheme } from '../../Theme/Theme';
4
4
  import { InputErrorMsg, InputLabelElement } from '../Input';
5
5
  import { Icon } from '../Icons';
6
- import { SelectorElement, SelectorValue } from './Selector.styles';
6
+ import { SelectorAction, SelectorElement, SelectorValue, SelectorValueWrapper, } from './Selector.styles';
7
7
  import { Modal } from '../Modal';
8
- import { PanelOption, setIconSize } from '../common';
8
+ import { PanelOption, setIconShiftSize } from '../common';
9
9
  import { ThemeProvider } from 'styled-components';
10
10
  import { Text } from '../Typography';
11
- export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, iconName = 'add_circle', optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
11
+ export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size = 'medium', width, options, value, name, error, handleSelect, handleClear, optionsPanelTitle = 'Please select', optionsPanelEmptyMsg = 'There are no options to choose from', disabled = false, }) => {
12
12
  const [open, toogleOpen] = useState(false);
13
13
  const selectOption = (selectedValue) => {
14
14
  handleSelect(name, selectedValue);
@@ -23,12 +23,13 @@ export const Selector = ({ theme = mainTheme, label, labelPosition = 'top', size
23
23
  }
24
24
  };
25
25
  return (React.createElement(ThemeProvider, { theme: theme },
26
- React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width, gap: 4 },
26
+ React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', justify: labelPosition === 'top' ? 'center' : 'flex-start', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
27
27
  label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
28
28
  React.createElement(SelectorElement, null,
29
- value ? (React.createElement(React.Fragment, null,
29
+ value ? (React.createElement(SelectorValueWrapper, { size: size, isDisabled: disabled },
30
30
  React.createElement(SelectorValue, { onClick: handleOpen, size: size, isDisabled: disabled }, getLabelForValue(value)),
31
- React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconSize(size), isDisabled: disabled }))) : (React.createElement(Icon, { name: iconName, onClick: handleOpen, size: setIconSize(size), isDisabled: disabled })),
31
+ React.createElement(Icon, { name: 'close', onClick: () => handleClear(), size: setIconShiftSize(size), isDisabled: disabled }))) : (React.createElement(React.Fragment, null,
32
+ React.createElement(SelectorAction, { size: size, isDisabled: disabled, onClick: handleOpen }, optionsPanelTitle))),
32
33
  open && (React.createElement(Modal, { title: optionsPanelTitle, labelClose: "Close", handleClose: () => toogleOpen(false), isOpen: open, exitOnEsc: true }, options?.length > 0 ? (options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: () => selectOption(option.value) }, option.label)))) : (React.createElement(Text, null, optionsPanelEmptyMsg)))),
33
34
  error && React.createElement(InputErrorMsg, null, error)))));
34
35
  };
package/dist/esm/components/Selector/Selector.styles.js CHANGED
@@ -1,5 +1,6 @@
1
1
  import styled from 'styled-components';
2
- import { defaultStyles, setSize } from '../common';
2
+ import { setSelecAreaSize, setSelectorSize } from '../common';
3
+ import { Theme } from '../../Theme/Theme';
3
4
  export const SelectorElement = styled.div `
4
5
  position: relative;
5
6
  cursor: pointer;
@@ -8,22 +9,50 @@ export const SelectorElement = styled.div `
8
9
  align-items: center;
9
10
  `;
10
11
  export const SelectorValue = styled.div `
11
- ${defaultStyles}
12
- cursor: pointer;
13
- display: flex;
14
- align-items: center;
15
- ${(p) => setSize(p.size)}
16
- color:${(p) => p.theme.optionActiveColor};
12
+ box-sizing: border-box;
13
+
14
+ width: 100%;
15
+ font-family: 'Lato', sans-serif;
16
+ outline: 0;
17
+ white-space: nowrap;
18
+ overflow: hidden;
19
+ text-overflow: ellipsis;
20
+ color: ${(p) => p.theme.textColor};
17
21
  &:hover {
18
- background-color: ${(p) => p.theme.optionHoverBackground};
22
+ color: ${(p) => p.theme.action};
19
23
  }
20
24
  ${(p) => p.isDisabled &&
21
25
  `
22
26
  cursor:not-allowed;
23
27
  background-color: ${p.theme.inputDisabledBackground};
24
28
  color: ${p.theme.inputDisabledTextColor};
25
- &:hover{
26
- background-color: ${p.theme.inputDisabledBackground};
27
- }
29
+ `}
30
+ `;
31
+ export const SelectorAction = styled.div `
32
+ ${(p) => setSelectorSize(p.size)}
33
+ color:${(p) => p.theme.optionActiveColor};
34
+ cursor: pointer;
35
+ text-decoration: underline;
36
+
37
+ ${(p) => p.isDisabled &&
38
+ `
39
+ cursor:not-allowed;
40
+ color: ${p.theme.inputDisabledTextColor};
41
+
42
+ `}
43
+ `;
44
+ export const SelectorValueWrapper = styled.div `
45
+ cursor: pointer;
46
+ display: flex;
47
+ align-items: center;
48
+ background-color: ${(p) => p.theme.selector};
49
+ border-radius: ${Theme.borderRadius.m};
50
+ gap: 4px;
51
+ ${(p) => setSelecAreaSize(p.size)}
52
+ ${(p) => p.isDisabled &&
53
+ `
54
+ cursor:not-allowed;
55
+ background-color: ${p.theme.inputDisabledBackground};
56
+
28
57
  `}
29
58
  `;
package/dist/esm/components/common/inputStyles.js CHANGED
@@ -61,6 +61,28 @@ export const inputPadding = {
61
61
  padding: ${Theme.padding.m};
62
62
  `,
63
63
  };
64
+ export const selectAreaPadding = {
65
+ small: `
66
+ padding: calc(${Theme.padding.s} - 2px) ${Theme.padding.s};
67
+ `,
68
+ medium: `
69
+ padding: calc(${Theme.padding.m} - 2px) ${Theme.padding.m};
70
+ `,
71
+ large: `
72
+ padding: calc(${Theme.padding.m} - 4px) ${Theme.padding.m};
73
+ `,
74
+ };
75
+ export const selectorPadding = {
76
+ small: `
77
+ padding: calc(${Theme.padding.s} ) 0px;
78
+ `,
79
+ medium: `
80
+ padding: calc(${Theme.padding.m} + 1px) 0px;
81
+ `,
82
+ large: `
83
+ padding: calc(${Theme.padding.m} ) 0px;
84
+ `,
85
+ };
64
86
  export const inputPaddingWithPrefix = {
65
87
  small: `
66
88
  padding: ${Theme.padding.s};
@@ -112,6 +134,15 @@ export const eyeTopPosition = {
112
134
  export const setSize = (size) => {
113
135
  return sizes[size] + inputPadding[size];
114
136
  };
137
+ export const setSelecAreaSize = (size) => {
138
+ return sizes[size] + selectAreaPadding[size];
139
+ };
140
+ export const setSelectorSize = (size) => {
141
+ return sizes[size] + selectorPadding[size];
142
+ };
143
+ export const setFontSize = (size) => {
144
+ return sizes[size];
145
+ };
115
146
  export const setSizeWithPrefix = (size) => {
116
147
  return sizes[size] + inputPaddingWithPrefix[size];
117
148
  };
@@ -166,9 +197,17 @@ export const iconSize = {
166
197
  medium: 28,
167
198
  large: 34,
168
199
  };
200
+ export const iconShiftSize = {
201
+ small: 12,
202
+ medium: 16,
203
+ large: 24,
204
+ };
169
205
  export const setIconSize = (size) => {
170
206
  return iconSize[size];
171
207
  };
208
+ export const setIconShiftSize = (size) => {
209
+ return iconShiftSize[size];
210
+ };
172
211
  export const panelTop = {
173
212
  small: '26px',
174
213
  medium: '36px',
package/dist/types/Theme/Theme.d.ts CHANGED
@@ -21,6 +21,8 @@ export declare const Theme: {
21
21
  white: string;
22
22
  overlayer: string;
23
23
  red: string;
24
+ orange: string;
25
+ green: string;
24
26
  };
25
27
  fontSize: {
26
28
  xxs: string;
@@ -93,6 +95,7 @@ export declare const mainTheme: {
93
95
  optionActiveColor: string;
94
96
  optionColor: string;
95
97
  optionHoverBackground: string;
98
+ selector: string;
96
99
  tableBorderColor: string;
97
100
  tableHeaderBackground: string;
98
101
  tableHeaderActive: string;
package/dist/types/components/List/List.d.ts CHANGED
@@ -11,6 +11,7 @@ export interface IListProps {
11
11
  selected?: string;
12
12
  isCheckbox?: boolean;
13
13
  isCollapsable?: boolean;
14
+ isStatus?: boolean;
14
15
  isSelectable?: boolean;
15
16
  haveMoreOptions?: boolean;
16
17
  theme?: any;
@@ -22,5 +23,8 @@ export interface IListItem {
22
23
  children: IListItem[];
23
24
  selected?: boolean;
24
25
  extend?: boolean;
26
+ statusDone?: boolean;
27
+ statusError?: boolean;
28
+ statusWarnning?: boolean;
25
29
  }
26
30
  export declare const List: FC<IListProps>;
package/dist/types/components/Selector/Selector.d.ts CHANGED
@@ -12,7 +12,6 @@ export interface ISelectorProps {
12
12
  error?: string;
13
13
  handleSelect: (name: string, value: string | number) => void;
14
14
  handleClear: () => void;
15
- iconName?: string;
16
15
  optionsPanelTitle?: string;
17
16
  optionsPanelEmptyMsg?: string;
18
17
  disabled?: boolean;
package/dist/types/components/Selector/Selector.styles.d.ts CHANGED
@@ -6,4 +6,14 @@ interface ISelectorValueStyle {
6
6
  isDisabled?: boolean;
7
7
  }
8
8
  export declare const SelectorValue: import("styled-components").StyledComponent<"div", any, ISelectorValueStyle, never>;
9
+ interface ISelectorActionStyle {
10
+ size: InputSize;
11
+ isDisabled?: boolean;
12
+ }
13
+ export declare const SelectorAction: import("styled-components").StyledComponent<"div", any, ISelectorActionStyle, never>;
14
+ interface ISelectorValueWrapperStyle {
15
+ size: InputSize;
16
+ isDisabled?: boolean;
17
+ }
18
+ export declare const SelectorValueWrapper: import("styled-components").StyledComponent<"div", any, ISelectorValueWrapperStyle, never>;
9
19
  export {};
package/dist/types/components/common/inputStyles.d.ts CHANGED
@@ -20,6 +20,16 @@ export declare const inputPadding: {
20
20
  medium: string;
21
21
  large: string;
22
22
  };
23
+ export declare const selectAreaPadding: {
24
+ small: string;
25
+ medium: string;
26
+ large: string;
27
+ };
28
+ export declare const selectorPadding: {
29
+ small: string;
30
+ medium: string;
31
+ large: string;
32
+ };
23
33
  export declare const inputPaddingWithPrefix: {
24
34
  small: string;
25
35
  medium: string;
@@ -46,6 +56,9 @@ export declare const eyeTopPosition: {
46
56
  large: string;
47
57
  };
48
58
  export declare const setSize: (size: InputSize) => string;
59
+ export declare const setSelecAreaSize: (size: InputSize) => string;
60
+ export declare const setSelectorSize: (size: InputSize) => string;
61
+ export declare const setFontSize: (size: InputSize) => string;
49
62
  export declare const setSizeWithPrefix: (size: InputSize) => string;
50
63
  export declare const setHeight: (size: InputSize) => string;
51
64
  export declare const setButtonSize: (size: InputSize, loader: boolean) => string;
@@ -68,7 +81,13 @@ export declare const iconSize: {
68
81
  medium: number;
69
82
  large: number;
70
83
  };
84
+ export declare const iconShiftSize: {
85
+ small: number;
86
+ medium: number;
87
+ large: number;
88
+ };
71
89
  export declare const setIconSize: (size: InputSize) => number;
90
+ export declare const setIconShiftSize: (size: InputSize) => number;
72
91
  export declare const panelTop: {
73
92
  small: string;
74
93
  medium: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.4.6",
3
+ "version": "2.4.8",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",