venice-ui 2.4.5 → 2.4.7

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 (15) hide show
  1. package/dist/cjs/Theme/Theme.js +1 -0
  2. package/dist/cjs/components/DatePicker/CalendarContent.js +33 -16
  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 +1 -0
  7. package/dist/esm/components/DatePicker/CalendarContent.js +34 -17
  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 +1 -0
  12. package/dist/types/components/Selector/Selector.d.ts +0 -1
  13. package/dist/types/components/Selector/Selector.styles.d.ts +10 -0
  14. package/dist/types/components/common/inputStyles.d.ts +19 -0
  15. package/package.json +1 -1
package/dist/cjs/Theme/Theme.js CHANGED
@@ -103,6 +103,7 @@ exports.mainTheme = {
103
103
  optionActiveColor: exports.Theme.colors.primary,
104
104
  optionColor: exports.Theme.colors.text,
105
105
  optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
106
+ selector: exports.Theme.colors.primary_10,
106
107
  //table
107
108
  tableBorderColor: exports.Theme.colors.gray_3,
108
109
  tableHeaderBackground: exports.Theme.colors.white,
package/dist/cjs/components/DatePicker/CalendarContent.js CHANGED
@@ -29,9 +29,16 @@ const DatePiocker_styles_1 = require("./DatePiocker.styles");
29
29
  const date_fns_1 = require("date-fns");
30
30
  const Aligment_1 = require("../Aligment");
31
31
  const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
32
+ const [tempYear, setTempYear] = (0, react_1.useState)((0, date_fns_1.getYear)(date));
33
+ const [tempMonth, setTempMonth] = (0, react_1.useState)((0, date_fns_1.getMonth)(date));
34
+ (0, react_1.useEffect)(() => {
35
+ setTempYear((0, date_fns_1.getYear)(date));
36
+ setTempMonth((0, date_fns_1.getMonth)(date));
37
+ }, [date]);
38
+ const viewDate = new Date(tempYear, tempMonth, 1);
32
39
  const [days, setDays] = (0, react_1.useState)([]);
33
- const firstDayOfMonth = (0, date_fns_1.startOfMonth)(date);
34
- const daysInMonth = (0, date_fns_1.getDaysInMonth)(date);
40
+ const firstDayOfMonth = (0, date_fns_1.startOfMonth)(viewDate);
41
+ const daysInMonth = (0, date_fns_1.getDaysInMonth)(viewDate);
35
42
  const firstDayIndex = (0, date_fns_1.getDay)(firstDayOfMonth);
36
43
  const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
37
44
  (0, react_1.useEffect)(() => {
@@ -43,36 +50,46 @@ const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, loc
43
50
  daysScope.push(j.toString());
44
51
  }
45
52
  setDays(daysScope);
46
- }, [date]);
53
+ }, [viewDate, beforeIndex, daysInMonth]);
47
54
  const setDay = (day) => {
48
55
  if (!isNaN(day)) {
49
- const newDate = (0, date_fns_1.setDate)(date, day);
56
+ const newDate = new Date(tempYear, tempMonth, day);
50
57
  handleChange(newDate);
51
58
  }
52
59
  };
53
60
  const handleSetMonth = (month) => {
54
61
  if (!isNaN(month)) {
55
- const newDate = (0, date_fns_1.setMonth)(date, month);
56
- handleChange(newDate);
62
+ setTempMonth(month);
57
63
  changeMode('day');
58
64
  }
59
65
  };
60
66
  const handleSetYear = (year) => {
61
67
  if (!isNaN(year)) {
62
- const newDate = (0, date_fns_1.setYear)(date, year);
63
- handleChange(newDate);
68
+ setTempYear(year);
64
69
  changeMode('month');
65
70
  }
66
71
  };
72
+ const months = localeLabels?.months ?? [
73
+ 'January', 'February', 'March', 'April', 'May', 'June',
74
+ 'July', 'August', 'September', 'October', 'November', 'December'
75
+ ];
76
+ const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
67
77
  return (react_1.default.createElement(DatePiocker_styles_1.CalendarContentWrapper, null,
68
78
  mode === 'day' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" },
69
- react_1.default.createElement(DatePiocker_styles_1.DaysHeader, null, localeLabels?.weekdaysShort?.map((_item) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, null,
70
- react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, _item))))),
71
- react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((_day) => (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, null,
72
- react_1.default.createElement(DatePiocker_styles_1.Day, { active: parseInt(_day) === (0, date_fns_1.getDate)(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
73
- mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, localeLabels?.months?.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
74
- react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === (0, date_fns_1.getMonth)(date), onClick: () => handleSetMonth(index) }, _month)))))),
75
- mode === 'year' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, null,
76
- react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === (0, date_fns_1.getYear)(date), onClick: () => handleSetYear(_year) }, _year))))))));
79
+ react_1.default.createElement(DatePiocker_styles_1.DaysHeader, null, weekdays.map((label, idx) => (react_1.default.createElement(DatePiocker_styles_1.DayLabelWrapper, { key: `wd-${idx}` },
80
+ react_1.default.createElement(DatePiocker_styles_1.DayLabel, null, label))))),
81
+ react_1.default.createElement(DatePiocker_styles_1.DaysContent, null, days.map((dayStr, idx) => {
82
+ const dayNum = parseInt(dayStr, 10);
83
+ const isActive = !isNaN(dayNum) &&
84
+ dayNum === (0, date_fns_1.getDate)(date) &&
85
+ tempMonth === (0, date_fns_1.getMonth)(date) &&
86
+ tempYear === (0, date_fns_1.getYear)(date);
87
+ return (react_1.default.createElement(DatePiocker_styles_1.DayWrapper, { key: `d-${idx}` },
88
+ react_1.default.createElement(DatePiocker_styles_1.Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
89
+ })))),
90
+ mode === 'month' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, months.map((_month, index) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `m-${index}` },
91
+ react_1.default.createElement(DatePiocker_styles_1.Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
92
+ mode === 'year' && (react_1.default.createElement(Aligment_1.Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (react_1.default.createElement(DatePiocker_styles_1.MonthWrapper, { key: `y-${_year}` },
93
+ react_1.default.createElement(DatePiocker_styles_1.Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
77
94
  };
78
95
  exports.CalendarContent = CalendarContent;
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
@@ -100,6 +100,7 @@ export const mainTheme = {
100
100
  optionActiveColor: Theme.colors.primary,
101
101
  optionColor: Theme.colors.text,
102
102
  optionHoverBackground: lighten(0.3, Theme.colors.primary),
103
+ selector: Theme.colors.primary_10,
103
104
  //table
104
105
  tableBorderColor: Theme.colors.gray_3,
105
106
  tableHeaderBackground: Theme.colors.white,
package/dist/esm/components/DatePicker/CalendarContent.js CHANGED
@@ -1,11 +1,18 @@
1
1
  import React, { useState, useEffect } from 'react';
2
2
  import { CalendarContentWrapper, Day, DayLabel, DayLabelWrapper, DaysContent, DaysHeader, DayWrapper, Month, MonthWrapper, } from './DatePiocker.styles';
3
- import { getDate, getDay, getDaysInMonth, getMonth, getYear, setDate, setMonth, setYear, startOfMonth, } from 'date-fns';
3
+ import { getDate, getDay, getDaysInMonth, getMonth, getYear, startOfMonth, } from 'date-fns';
4
4
  import { Aligment } from '../Aligment';
5
5
  export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsScope, localeLabels, }) => {
6
+ const [tempYear, setTempYear] = useState(getYear(date));
7
+ const [tempMonth, setTempMonth] = useState(getMonth(date));
8
+ useEffect(() => {
9
+ setTempYear(getYear(date));
10
+ setTempMonth(getMonth(date));
11
+ }, [date]);
12
+ const viewDate = new Date(tempYear, tempMonth, 1);
6
13
  const [days, setDays] = useState([]);
7
- const firstDayOfMonth = startOfMonth(date);
8
- const daysInMonth = getDaysInMonth(date);
14
+ const firstDayOfMonth = startOfMonth(viewDate);
15
+ const daysInMonth = getDaysInMonth(viewDate);
9
16
  const firstDayIndex = getDay(firstDayOfMonth);
10
17
  const beforeIndex = firstDayIndex === 0 ? 6 : firstDayIndex - 1;
11
18
  useEffect(() => {
@@ -17,35 +24,45 @@ export const CalendarContent = ({ date, mode, handleChange, changeMode, yearsSco
17
24
  daysScope.push(j.toString());
18
25
  }
19
26
  setDays(daysScope);
20
- }, [date]);
27
+ }, [viewDate, beforeIndex, daysInMonth]);
21
28
  const setDay = (day) => {
22
29
  if (!isNaN(day)) {
23
- const newDate = setDate(date, day);
30
+ const newDate = new Date(tempYear, tempMonth, day);
24
31
  handleChange(newDate);
25
32
  }
26
33
  };
27
34
  const handleSetMonth = (month) => {
28
35
  if (!isNaN(month)) {
29
- const newDate = setMonth(date, month);
30
- handleChange(newDate);
36
+ setTempMonth(month);
31
37
  changeMode('day');
32
38
  }
33
39
  };
34
40
  const handleSetYear = (year) => {
35
41
  if (!isNaN(year)) {
36
- const newDate = setYear(date, year);
37
- handleChange(newDate);
42
+ setTempYear(year);
38
43
  changeMode('month');
39
44
  }
40
45
  };
46
+ const months = localeLabels?.months ?? [
47
+ 'January', 'February', 'March', 'April', 'May', 'June',
48
+ 'July', 'August', 'September', 'October', 'November', 'December'
49
+ ];
50
+ const weekdays = localeLabels?.weekdaysShort ?? ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
41
51
  return (React.createElement(CalendarContentWrapper, null,
42
52
  mode === 'day' && (React.createElement(Aligment, { wrap: "wrap" },
43
- React.createElement(DaysHeader, null, localeLabels?.weekdaysShort?.map((_item) => (React.createElement(DayLabelWrapper, null,
44
- React.createElement(DayLabel, null, _item))))),
45
- React.createElement(DaysContent, null, days.map((_day) => (React.createElement(DayWrapper, null,
46
- React.createElement(Day, { active: parseInt(_day) === getDate(date), haveContent: _day !== '', onClick: () => setDay(parseInt(_day)) }, _day))))))),
47
- mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, localeLabels?.months?.map((_month, index) => (React.createElement(MonthWrapper, null,
48
- React.createElement(Month, { active: index === getMonth(date), onClick: () => handleSetMonth(index) }, _month)))))),
49
- mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, null,
50
- React.createElement(Month, { active: _year === getYear(date), onClick: () => handleSetYear(_year) }, _year))))))));
53
+ React.createElement(DaysHeader, null, weekdays.map((label, idx) => (React.createElement(DayLabelWrapper, { key: `wd-${idx}` },
54
+ React.createElement(DayLabel, null, label))))),
55
+ React.createElement(DaysContent, null, days.map((dayStr, idx) => {
56
+ const dayNum = parseInt(dayStr, 10);
57
+ const isActive = !isNaN(dayNum) &&
58
+ dayNum === getDate(date) &&
59
+ tempMonth === getMonth(date) &&
60
+ tempYear === getYear(date);
61
+ return (React.createElement(DayWrapper, { key: `d-${idx}` },
62
+ React.createElement(Day, { active: isActive, haveContent: dayStr !== '', onClick: () => !isNaN(dayNum) && setDay(dayNum) }, dayStr)));
63
+ })))),
64
+ mode === 'month' && (React.createElement(Aligment, { wrap: "wrap" }, months.map((_month, index) => (React.createElement(MonthWrapper, { key: `m-${index}` },
65
+ React.createElement(Month, { active: index === tempMonth, onClick: () => handleSetMonth(index) }, _month)))))),
66
+ mode === 'year' && (React.createElement(Aligment, { wrap: "wrap" }, yearsScope.map((_year) => (React.createElement(MonthWrapper, { key: `y-${_year}` },
67
+ React.createElement(Month, { active: _year === tempYear, onClick: () => handleSetYear(_year) }, _year))))))));
51
68
  };
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
@@ -93,6 +93,7 @@ export declare const mainTheme: {
93
93
  optionActiveColor: string;
94
94
  optionColor: string;
95
95
  optionHoverBackground: string;
96
+ selector: string;
96
97
  tableBorderColor: string;
97
98
  tableHeaderBackground: string;
98
99
  tableHeaderActive: string;
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.5",
3
+ "version": "2.4.7",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",