@homecode/ui 4.12.1 → 4.14.0

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 (28) hide show
  1. package/dist/esm/index.js +2 -0
  2. package/dist/esm/src/components/AssistiveText/AssistiveText.styl.js +1 -1
  3. package/dist/esm/src/components/Button/Button.styl.js +1 -1
  4. package/dist/esm/src/components/Calendar/Calendar.helpers.js +63 -0
  5. package/dist/esm/src/components/Calendar/Calendar.js +62 -0
  6. package/dist/esm/src/components/Calendar/Calendar.styl.js +7 -0
  7. package/dist/esm/src/components/DatePicker/DatePicker.js +21 -0
  8. package/dist/esm/src/components/DatePicker/DatePicker.styl.js +7 -0
  9. package/dist/esm/src/components/Input/Input.js +20 -10
  10. package/dist/esm/src/components/Input/Input.styl.js +2 -2
  11. package/dist/esm/src/components/InputFile/InputFile.js +11 -9
  12. package/dist/esm/src/components/InputFile/InputFile.styl.js +1 -1
  13. package/dist/esm/src/components/Label/Label.styl.js +1 -1
  14. package/dist/esm/src/components/Select/Select.js +2 -1
  15. package/dist/esm/src/components/Select/Select.styl.js +1 -1
  16. package/dist/esm/types/src/components/Calendar/Calendar.d.ts +3 -0
  17. package/dist/esm/types/src/components/Calendar/Calendar.helpers.d.ts +8 -0
  18. package/dist/esm/types/src/components/Calendar/Calendar.types.d.ts +21 -0
  19. package/dist/esm/types/src/components/DatePicker/DatePicker.d.ts +3 -0
  20. package/dist/esm/types/src/components/DatePicker/DatePicker.types.d.ts +9 -0
  21. package/dist/esm/types/src/components/Icon/Icon.example.d.ts +0 -1
  22. package/dist/esm/types/src/components/Input/Input.d.ts +2 -0
  23. package/dist/esm/types/src/components/Input/Input.types.d.ts +1 -0
  24. package/dist/esm/types/src/components/Select/Select.d.ts +1 -1
  25. package/dist/esm/types/src/components/Select/Select.types.d.ts +1 -1
  26. package/dist/esm/types/src/components/index.d.ts +2 -0
  27. package/dist/esm/types/src/types.d.ts +6 -0
  28. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -1,8 +1,10 @@
1
1
  export { AssistiveText } from './src/components/AssistiveText/AssistiveText.js';
2
2
  export { Button } from './src/components/Button/Button.js';
3
3
  export { ButtonGroup } from './src/components/ButtonGroup/ButtonGroup.js';
4
+ export { Calendar } from './src/components/Calendar/Calendar.js';
4
5
  export { Checkbox } from './src/components/Checkbox/Checkbox.js';
5
6
  export { Container } from './src/components/Container/Container.js';
7
+ export { DatePicker } from './src/components/DatePicker/DatePicker.js';
6
8
  export { DateTime, formatDate } from './src/components/DateTime/DateTime.js';
7
9
  export { Draggable } from './src/components/Draggable/Draggable.js';
8
10
  export { Expand } from './src/components/Expand/Expand.js';
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".AssistiveText_root__OI3ju{font-size:80%;line-height:1.5em;margin-bottom:.2em}.AssistiveText_size-s__gsuS-{padding:0 10px}.AssistiveText_size-m__PDlkc{padding:0 12px}.AssistiveText_size-l__D-9pQ{padding:0 14px}.AssistiveText_variant-danger__N8sGS{color:var(--danger-color)}";
3
+ var css_248z = ".AssistiveText_root__OI3ju{font-size:80%;line-height:1.5em;margin-bottom:.2em}.AssistiveText_size-s__gsuS-{padding:0 8px}.AssistiveText_size-m__PDlkc{padding:0 12px}.AssistiveText_size-l__D-9pQ{padding:0 14px}.AssistiveText_variant-danger__N8sGS{color:var(--danger-color)}";
4
4
  var S = {"root":"AssistiveText_root__OI3ju","size-s":"AssistiveText_size-s__gsuS-","size-m":"AssistiveText_size-m__PDlkc","size-l":"AssistiveText_size-l__D-9pQ","variant-danger":"AssistiveText_variant-danger__N8sGS"};
5
5
  styleInject(css_248z);
6
6
 
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".Button_root__SZns2{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;justify-content:center;line-height:1em;text-decoration:none;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Button_root__SZns2:focus,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-100)}.Button_root__SZns2[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Button_root__SZns2:active,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-300)}.Button_root__SZns2:active{opacity:.7}.Button_root__SZns2.Button_loading__c4pdo{pointer-events:none}.Button_root__SZns2.Button_checked__X7f58,.Button_root__SZns2.Button_checked__X7f58:hover{background-color:var(--accent-color);box-shadow:none;color:var(--decent-color)}.Button_root__SZns2.Button_checked__X7f58:hover{background-color:var(--accent-color-alpha-900)}.Button_root__SZns2.Button_checked__X7f58 path{fill:var(--decent-color)}.Button_postfix__DwG-n,.Button_prefix__czqd5{display:flex}.Button_prefix__czqd5:not(:last-child){margin-right:.5em}.Button_postfix__DwG-n:not(:first-child){margin-left:.5em}.Button_size-s__-SIY1{border-radius:4px;font-size:12px;min-height:30px;min-width:30px;padding:0 10px}.Button_size-s__-SIY1.Button_square__eYSY3{max-height:30px;width:30px}.Button_size-m__TBXc-{border-radius:6px;font-size:16px;min-height:40px;min-width:40px;padding:0 12px}.Button_size-m__TBXc-.Button_square__eYSY3{max-height:40px;width:40px}.Button_size-l__Sx37T{border-radius:8px;font-size:20px;min-height:50px;min-width:50px;padding:0 14px}.Button_size-l__Sx37T.Button_square__eYSY3{max-height:50px}.Button_square__eYSY3{justify-content:center;padding:0}.Button_variant-clear__z1HZm:focus,.Button_variant-clear__z1HZm:hover,.Button_variant-default__vbo51:focus,.Button_variant-default__vbo51:hover{background-color:var(--active-color-alpha-300)}.Button_variant-clear__z1HZm{background-color:transparent}.Button_variant-default__vbo51{background-color:var(--accent-color-alpha-100)}.Button_variant-outlined__shnIq{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_variant-outlined__shnIq:focus{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Button_variant-primary__zhEQI{background-color:var(--active-color);color:var(--accent-color-alpha-900)}.Button_variant-primary__zhEQI:hover{background-color:var(--active-color-alpha-800)}.Button_variant-primary__zhEQI:focus{background-color:var(--active-color);box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_spinner__ttaMr{margin-left:var(--indent-s)}";
3
+ var css_248z = ".Button_root__SZns2{align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:inset 0 0 0 2px none;box-sizing:border-box;color:inherit;cursor:pointer;display:inline-flex;justify-content:center;line-height:1em;text-decoration:none;transition:.2s ease-out;transition-property:background-color,box-shadow,opacity;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Button_root__SZns2:focus,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-100)}.Button_root__SZns2[disabled]{background-color:var(--accent-color-alpha-100);opacity:.4;pointer-events:none}.Button_root__SZns2:active,.Button_root__SZns2:hover{background-color:var(--active-color-alpha-300)}.Button_root__SZns2:active{opacity:.7}.Button_root__SZns2.Button_loading__c4pdo{pointer-events:none}.Button_root__SZns2.Button_checked__X7f58,.Button_root__SZns2.Button_checked__X7f58:hover{background-color:var(--accent-color);box-shadow:none;color:var(--decent-color)}.Button_root__SZns2.Button_checked__X7f58:hover{background-color:var(--accent-color-alpha-900)}.Button_root__SZns2.Button_checked__X7f58 path{fill:var(--decent-color)}.Button_postfix__DwG-n,.Button_prefix__czqd5{display:flex}.Button_prefix__czqd5:not(:last-child){margin-right:.5em}.Button_postfix__DwG-n:not(:first-child){margin-left:.5em}.Button_size-s__-SIY1{border-radius:4px;font-size:12px;min-height:30px;min-width:30px;padding:0 8px}.Button_size-s__-SIY1.Button_square__eYSY3{max-height:30px;width:30px}.Button_size-m__TBXc-{border-radius:6px;font-size:16px;min-height:40px;min-width:40px;padding:0 12px}.Button_size-m__TBXc-.Button_square__eYSY3{max-height:40px;width:40px}.Button_size-l__Sx37T{border-radius:8px;font-size:20px;min-height:50px;min-width:50px;padding:0 14px}.Button_size-l__Sx37T.Button_square__eYSY3{max-height:50px}.Button_square__eYSY3{justify-content:center;padding:0}.Button_variant-clear__z1HZm:focus,.Button_variant-clear__z1HZm:hover,.Button_variant-default__vbo51:focus,.Button_variant-default__vbo51:hover{background-color:var(--active-color-alpha-300)}.Button_variant-clear__z1HZm{background-color:transparent}.Button_variant-default__vbo51{background-color:var(--accent-color-alpha-100)}.Button_variant-outlined__shnIq{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_variant-outlined__shnIq:focus{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Button_variant-primary__zhEQI{background-color:var(--active-color);color:var(--accent-color-alpha-900)}.Button_variant-primary__zhEQI:hover{background-color:var(--active-color-alpha-800)}.Button_variant-primary__zhEQI:focus{background-color:var(--active-color);box-shadow:inset 0 0 0 2px var(--accent-color)}.Button_spinner__ttaMr{margin-left:var(--indent-s)}";
4
4
  var S = {"root":"Button_root__SZns2","loading":"Button_loading__c4pdo","checked":"Button_checked__X7f58","prefix":"Button_prefix__czqd5","postfix":"Button_postfix__DwG-n","size-s":"Button_size-s__-SIY1","square":"Button_square__eYSY3","size-m":"Button_size-m__TBXc-","size-l":"Button_size-l__Sx37T","variant-clear":"Button_variant-clear__z1HZm","variant-default":"Button_variant-default__vbo51","variant-outlined":"Button_variant-outlined__shnIq","variant-primary":"Button_variant-primary__zhEQI","spinner":"Button_spinner__ttaMr"};
5
5
  styleInject(css_248z);
6
6
 
@@ -0,0 +1,63 @@
1
+ const CACHE = {}; // [year-month] = days
2
+ const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
3
+ const getWeekDaysArray = (startOfWeek = 1) => {
4
+ const weekDays = [];
5
+ for (let i = startOfWeek; i < startOfWeek + 7; i++) {
6
+ weekDays.push(i % 7);
7
+ }
8
+ return weekDays;
9
+ };
10
+ const isWeekend = (day) => {
11
+ const num = day % 7;
12
+ return num === 5 || num === 6;
13
+ };
14
+ const isSameDay = (day1, day2) => {
15
+ return (day1.day === day2.day &&
16
+ day1.month === day2.month &&
17
+ day1.year === day2.year);
18
+ };
19
+ const getDaysArray = (year, month, startOfWeek) => {
20
+ const key = `${year}-${month}-${startOfWeek}`;
21
+ if (CACHE[key])
22
+ return CACHE[key];
23
+ let monthIndex = month - 1; // JavaScript's Date months are 0-indexed.
24
+ let date = new Date(year, monthIndex, 1);
25
+ let result = [];
26
+ let startDay = (date.getDay() - startOfWeek + 7) % 7;
27
+ if (startDay > 0) {
28
+ let prevMonthLastDay = new Date(year, monthIndex, 0).getDate();
29
+ for (let i = 0; i < startDay; i++) {
30
+ result.unshift({
31
+ day: prevMonthLastDay - i,
32
+ month: monthIndex,
33
+ year: monthIndex === 0 ? year - 1 : year,
34
+ currentMonth: false,
35
+ });
36
+ }
37
+ }
38
+ while (date.getMonth() === monthIndex) {
39
+ result.push({
40
+ day: date.getDate(),
41
+ month: monthIndex + 1,
42
+ year: year,
43
+ currentMonth: true,
44
+ });
45
+ date.setDate(date.getDate() + 1);
46
+ }
47
+ let nextMonthDay = 1;
48
+ const nextMonthStartDay = result.length % 7;
49
+ for (let i = nextMonthStartDay; i < 7; i++) {
50
+ result.push({
51
+ day: nextMonthDay,
52
+ month: monthIndex + 2 > 12 ? 1 : monthIndex + 2,
53
+ year: monthIndex === 11 ? year + 1 : year,
54
+ currentMonth: false,
55
+ });
56
+ nextMonthDay++;
57
+ }
58
+ CACHE[key] = result;
59
+ return result;
60
+ };
61
+ const valueToDate = (day) => new Date(day.year, day.month - 1, day.day ?? 1);
62
+
63
+ export { getDaysArray, getWeekDaysArray, isSameDay, isWeekend, valueToDate, weekDays };
@@ -0,0 +1,62 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { useMemo, useState, useCallback } from 'react';
3
+ import cn from 'classnames';
4
+ import S from './Calendar.styl.js';
5
+ import { valueToDate, getWeekDaysArray, getDaysArray, isWeekend, weekDays, isSameDay } from './Calendar.helpers.js';
6
+ import { Input } from '../Input/Input.js';
7
+ import { Select } from '../Select/Select.js';
8
+
9
+ const MONTHS = [
10
+ 'January',
11
+ 'February',
12
+ 'March',
13
+ 'April',
14
+ 'May',
15
+ 'June',
16
+ 'July',
17
+ 'August',
18
+ 'September',
19
+ 'October',
20
+ 'November',
21
+ 'December',
22
+ ];
23
+ const MIN_YEAR = 1970;
24
+ const renderDayDefault = (val, props) => {
25
+ const { day, year, month } = val;
26
+ return (jsx("div", { ...props, children: day }, `${year}-${month}-${day}`));
27
+ };
28
+ function Calendar({ value, onDayClick, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek = 1, weekendClassName, size, }) {
29
+ const date = useMemo(() => valueToDate(value), [value]);
30
+ const [month, setMonth] = useState(date.getMonth() + 1);
31
+ const [year, setYear] = useState(date.getFullYear());
32
+ const weekDaysArray = useMemo(() => getWeekDaysArray(startOfWeek), [startOfWeek]);
33
+ const daysArray = useMemo(() => getDaysArray(year, month, startOfWeek), [startOfWeek, month, year]);
34
+ const monthOptions = useMemo(() => MONTHS.map((m, i) => ({
35
+ id: i + 1,
36
+ label: renderMonthLabel?.(i + 1) ?? m,
37
+ })), [renderMonthLabel]);
38
+ const onYearChange = useCallback((e, val) => {
39
+ if (String(val).length === 4)
40
+ setYear(Math.max(MIN_YEAR, val));
41
+ else
42
+ setYear(val);
43
+ }, []);
44
+ const onYearBlur = () => {
45
+ if (year < MIN_YEAR)
46
+ setYear(MIN_YEAR);
47
+ };
48
+ return (jsxs("div", { className: cn(S.root, S[`size-${size}`]), children: [jsxs("div", { className: S.header, children: [jsx(Input, { className: S.year, type: "number", min: MIN_YEAR,
49
+ // @ts-ignore
50
+ size: size, label: renderYearLabel?.(year) ?? 'Year', value: year,
51
+ // @ts-ignore
52
+ onChange: onYearChange, onBlur: onYearBlur }), jsx(Select, { className: S.month, size: size, label: renderMonthesLabel?.(month) ?? 'Month', options: monthOptions, value: month, onChange: val => setMonth(val) })] }), jsx("div", { className: S.weekDays, children: weekDaysArray.map((day, weekdayIndex) => (jsx("div", { className: cn(S.day, isWeekend(weekdayIndex) && weekendClassName), children: renderWeekDayLabel?.(day) ?? weekDays[day] }, `weekday-${day}`))) }), jsx("div", { className: S.days, children: daysArray.map((day, weekdayIndex) => {
53
+ const classes = cn(S.day, day.currentMonth && S.currMonth, isWeekend(weekdayIndex) && weekendClassName, isSameDay(day, value) && S.selected);
54
+ const dayProps = {
55
+ className: classes,
56
+ onClick: () => onDayClick?.(day),
57
+ };
58
+ return renderDay?.(day, dayProps) ?? renderDayDefault(day, dayProps);
59
+ }) })] }));
60
+ }
61
+
62
+ export { Calendar };
@@ -0,0 +1,7 @@
1
+ import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = ".Calendar_size-s__MFLPb{font-size:.5em}.Calendar_size-m__IGeoI{font-size:.75em}.Calendar_size-l__a2zct{font-size:1em}.Calendar_root__v8Jg6{display:flex;flex-direction:column}.Calendar_header__IHzS-{align-items:center;display:flex;justify-content:space-between}.Calendar_month__gi10Q{width:100%!important}.Calendar_year__UlmLM{min-width:5em}.Calendar_year__UlmLM input{min-width:0;min-width:auto}.Calendar_month__gi10Q{margin-left:var(--indent-s)}.Calendar_weekDays__Pglyw{align-items:center;color:var(--accent-color-alpha-500);display:flex;font-size:.75em;margin-top:var(--indent-s);width:100%}.Calendar_weekDays__Pglyw .Calendar_day__A3NG-{padding:1.5em 0}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:4px}.Calendar_size-s__MFLPb .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:6px}.Calendar_size-m__IGeoI .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:6px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:first-child{border-top-left-radius:8px}.Calendar_size-l__a2zct .Calendar_weekDays__Pglyw .Calendar_day__A3NG-:last-child{border-top-right-radius:8px}.Calendar_days__64U-y{display:flex;flex-wrap:wrap;justify-content:space-between;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Calendar_days__64U-y .Calendar_day__A3NG-:not(.Calendar_currMonth__oL4nl){color:var(--accent-color-alpha-500)}.Calendar_size-s__MFLPb .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:4px}.Calendar_size-m__IGeoI .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:6px}.Calendar_size-l__a2zct .Calendar_days__64U-y .Calendar_day__A3NG-:last-child{border-bottom-right-radius:8px}.Calendar_day__A3NG-{align-items:center;display:flex;height:2em;justify-content:center;width:14.28571%}.Calendar_day__A3NG-.Calendar_selected__ffB6-{background-color:var(--active-color-alpha-100)!important}.Calendar_day__A3NG-.Calendar_currMonth__oL4nl{font-weight:700}";
4
+ var S = {"size-s":"Calendar_size-s__MFLPb","size-m":"Calendar_size-m__IGeoI","size-l":"Calendar_size-l__a2zct","root":"Calendar_root__v8Jg6","header":"Calendar_header__IHzS-","month":"Calendar_month__gi10Q","year":"Calendar_year__UlmLM","weekDays":"Calendar_weekDays__Pglyw","day":"Calendar_day__A3NG-","days":"Calendar_days__64U-y","currMonth":"Calendar_currMonth__oL4nl","selected":"Calendar_selected__ffB6-"};
5
+ styleInject(css_248z);
6
+
7
+ export { S as default };
@@ -0,0 +1,21 @@
1
+ import { jsxs, jsx } from 'react/jsx-runtime';
2
+ import { useCallback, createElement } from 'react';
3
+ import cn from 'classnames';
4
+ import { Calendar } from '../Calendar/Calendar.js';
5
+ import { Button } from '../Button/Button.js';
6
+ import S from './DatePicker.styl.js';
7
+
8
+ function DatePicker(props) {
9
+ const { value, onChange, size, calendarProps } = props;
10
+ const isRange = Array.isArray(value);
11
+ const onFirstDateChange = useCallback((val) => {
12
+ onChange(isRange ? [val, value[1]] : val);
13
+ }, [value, onChange, isRange]);
14
+ const renderDay = useCallback((val, { className, ...props }) => {
15
+ const { day, year, month } = val;
16
+ return (createElement(Button, { ...props, variant: "clear", className: cn(className, S.day), size: size, key: `${year}-${month}-${day}` }, day));
17
+ }, [size]);
18
+ return (jsxs("div", { className: S.root, children: [jsx(Calendar, { size: size, ...calendarProps, value: isRange ? value[0] : value, onDayClick: onFirstDateChange, renderDay: renderDay }), isRange && (jsx(Calendar, { size: size, ...calendarProps, value: value[1], onDayClick: val => onChange([value[0], val]), renderDay: renderDay }))] }));
19
+ }
20
+
21
+ export { DatePicker };
@@ -0,0 +1,7 @@
1
+ import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
+
3
+ var css_248z = ".DatePicker_root__hh-PP{display:flex;flex-direction:column}.DatePicker_day__kGD0i:hover{background-color:var(--accent-color-alpha-100)}";
4
+ var S = {"root":"DatePicker_root__hh-PP","day":"DatePicker_day__kGD0i"};
5
+ styleInject(css_248z);
6
+
7
+ export { S as default };
@@ -13,15 +13,21 @@ import { capitalize } from '../../tools/string.js';
13
13
  import { generateUID } from '../../tools/uid.js';
14
14
  import S from './Input.styl.js';
15
15
  import '../ButtonGroup/ButtonGroup.styl.js';
16
- import '../Checkbox/Checkbox.styl.js';
17
- import '../Container/Container.styl.js';
18
- import 'moment';
16
+ import '../Calendar/Calendar.styl.js';
17
+ import 'compareq';
18
+ import 'lodash.pick';
19
19
  import 'timen';
20
+ import '../Portal/Portal.js';
21
+ import '../Paranja/Paranja.styl.js';
20
22
  import '../../tools/dom.js';
21
23
  import debounce from '../../tools/debounce.js';
22
- import 'compareq';
23
- import 'lodash.pick';
24
+ import '../Popup/Popup.styl.js';
24
25
  import '../../tools/queryParams.js';
26
+ import '../Select/Select.styl.js';
27
+ import '../Checkbox/Checkbox.styl.js';
28
+ import '../Container/Container.styl.js';
29
+ import '../DatePicker/DatePicker.styl.js';
30
+ import 'moment';
25
31
  import '../Draggable/Draggable.styl.js';
26
32
  import '../Expand/Expand.styl.js';
27
33
  import '../Form/Form.styl.js';
@@ -32,14 +38,10 @@ import '../Gallery/Gallery.styl.js';
32
38
  import '../Heading/Heading.js';
33
39
  import '../InputFile/InputFile.styl.js';
34
40
  import '../InputFile/Item/Item.styl.js';
35
- import '../Portal/Portal.js';
36
- import '../Paranja/Paranja.styl.js';
37
41
  import '../LightBox/LightBox.styl.js';
38
42
  import '../Notifications/Notifications.js';
39
- import '../Popup/Popup.styl.js';
40
43
  import '../PopupMenu/PopupMenu.styl.js';
41
44
  import '../Router/Router.js';
42
- import '../Select/Select.styl.js';
43
45
  import '../Table/Table.styl.js';
44
46
  import '../Tabs/Tabs.styl.js';
45
47
  import '../Text/Text.js';
@@ -124,6 +126,7 @@ class Input extends Component {
124
126
  return type === 'number' || Boolean(value || defaultValue);
125
127
  }
126
128
  isTextArea = () => this.props.type === 'textarea';
129
+ isNumber = () => this.props.type === 'number';
127
130
  isLabelOnTop(hasValue = this.store?.hasValue) {
128
131
  const { forceLabelOnTop, addonLeft } = this.props;
129
132
  return (forceLabelOnTop || Boolean(addonLeft) || hasValue || this.store?.isFocused);
@@ -210,6 +213,12 @@ class Input extends Component {
210
213
  this.store.inputValue = value;
211
214
  }
212
215
  };
216
+ onNumberWheel = delta => {
217
+ const { onChange, step = 1 } = this.props;
218
+ const value = this.getValue() + step * delta;
219
+ this.onChange(value);
220
+ onChange?.(null, value);
221
+ };
213
222
  onTextAreaInput = e => {
214
223
  const { onInput } = this.props;
215
224
  this.store.inputValue = e.target.innerText;
@@ -318,13 +327,14 @@ class Input extends Component {
318
327
  render() {
319
328
  const { className, size, label, value, variant, error, hasClear, required, disabled, } = this.props;
320
329
  const { isFocused, hasValue, labelClipPath, isLabelOnTop } = this.store;
330
+ const isNumber = this.isNumber();
321
331
  const isTextArea = this.isTextArea();
322
332
  const Control = isTextArea ? 'span' : 'input';
323
333
  const controlProps = this.getControlProps();
324
334
  const classes = cn(S.root, isTextArea && S.isTextArea, S[`size-${size}`], S[`variant-${variant}`], isFocused && S.isFocused, error && S.hasError, hasClear && S.hasClear, disabled && S.isDisabled, className);
325
335
  return (
326
336
  // @ts-ignore
327
- jsxs("div", { className: classes, title: value, children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), this.renderAddon('left'), this.wrapControll(createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: this.inputRef, key: "control" })), isTextArea && controlProps.placeholder && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder })), jsx(Label, { className: S.label, size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: this.onLabelClipPathChange, children: label }, "label"), this.renderAddon('right'), required && jsx(RequiredStar, { size: size }, "required-star")] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: this.onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
337
+ jsxs("div", { className: classes, title: value, children: [jsxs("label", { className: S.main, children: [jsx("div", { className: S.border, suppressHydrationWarning: true, style: { clipPath: labelClipPath } }, "border"), this.renderAddon('left'), this.wrapControll(createElement(Control, { ...controlProps, className: cn(S.control, controlProps?.className), ref: this.inputRef, key: "control" })), isNumber && (jsxs("div", { className: S.numberArrows, children: [jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(1), children: jsx(Icon, { type: "chevronUp", size: size }) }), jsx(Button, { variant: "clear", onClick: () => this.onNumberWheel(-1), children: jsx(Icon, { type: "chevronDown", size: size }) })] })), isTextArea && controlProps.placeholder && (jsx("span", { className: S.placeholder, spellCheck: false, children: controlProps.placeholder })), jsx(Label, { className: S.label, size: size, isOnTop: isLabelOnTop, isError: Boolean(error), onClipPathChange: this.onLabelClipPathChange, children: label }, "label"), this.renderAddon('right'), required && jsx(RequiredStar, { size: size }, "required-star")] }, "main"), hasClear && !disabled && hasValue && (jsx(Button, { className: S.clearButton, variant: "clear", size: size, square: true, onClick: this.onClearPress, title: "", children: jsx(Icon, { className: S.clearIcon, size: size, type: "close" }) }, "clear")), !disabled && typeof error === 'string' && (jsx(AssistiveText, { variant: "danger", size: size, children: error }, "assistive-text"))] }));
328
338
  }
329
339
  }
330
340
 
@@ -1,7 +1,7 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".Input_root__kj4vQ{color:var(--accent-color);position:relative}.Input_root__kj4vQ.Input_isTextArea__1a6n1{max-height:10em}.Input_control__wZcMD,.Input_main__M6Qxb,.Input_root__kj4vQ{width:100%}.Input_controlWrapper__WgrZL,.Input_root__kj4vQ{max-width:100%}.Input_main__M6Qxb{border-radius:inherit;display:flex;max-width:100%;position:relative}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{height:auto!important;max-height:inherit!important}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:2px!important}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:8px!important}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:13px!important}.Input_border__01i-B{background-color:var(--accent-color-alpha-100);border-radius:inherit;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.15s ease-out;transition-property:box-shadow,border-color,background-color;z-index:0}.Input_root__kj4vQ:hover .Input_border__01i-B{background-color:var(--active-color-alpha-100)}.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--accent-color-alpha-100)}.Input_isFocused__9jtFN.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Input_isFocused__9jtFN.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Input_hasError__5iS2M .Input_variant-outlined__qKjnJ .Input_border__01i-B,.Input_hasError__5iS2M:hover .Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:inset 0 0 0 2px var(--danger-color)}.Input_isDisabled__e7J10.Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:none}.Input_size-s__-U0r-{font-size:12px}.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:4px;font-size:12px;min-height:30px;min-width:30px;padding:0 10px}.Input_size-m__jTEMl{font-size:16px}.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:6px;font-size:16px;min-height:40px;min-width:40px;padding:0 12px}.Input_size-l__BR-zg{font-size:20px}.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:8px;font-size:20px;min-height:50px;min-width:50px;padding:0 14px}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-left:0}.Input_isDisabled__e7J10{color:var(--accent-color-alpha-500);opacity:.4}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht,.Input_control__wZcMD{font-size:inherit;font-weight:400}.Input_labelGap__T6fAj{opacity:0;pointer-events:none;position:absolute}.Input_isTextArea__1a6n1 .Input_label__FT90l{max-height:40px}.Input_scroller__OBm8M{max-height:100%;width:100%}.Input_control__wZcMD{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;box-shadow:none;box-shadow:inset 0 0 0 2px none;color:inherit;display:inline-flex;filter:none;flex-grow:1;min-width:200px;position:relative;text-overflow:ellipsis;transition:border-color .15s ease-in-out 0s;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD{display:block;height:100%;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD:hover{cursor:text}.Input_isTextArea__1a6n1 .Input_control__wZcMD:after{content:\"\";display:block}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:8px 10px 0}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:8px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:10px 12px 0}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:10px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:12px 14px 0}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:12px}.Input_control__wZcMD:-internal-autofill-selected,.Input_control__wZcMD:-webkit-autofill{animation-fill-mode:both;animation-name:Input_clearBg__jqI1h}.Input_size-s__-U0r-.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:20px}.Input_size-m__jTEMl.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:24px}.Input_size-l__BR-zg.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:28px}.Input_control__wZcMD::-moz-placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::-moz-selection{background-color:var(--active-color-alpha-300)}.Input_control__wZcMD::selection{background-color:var(--active-color-alpha-300)}.Input_placeholder__DRYLA{display:inline-block;left:0;max-width:100%;opacity:.4;overflow:hidden;padding:inherit;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht{align-items:center;display:inline-flex;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Input_size-s__-U0r- .Input_addonLeft__i1c70,.Input_size-s__-U0r- .Input_addonRight__A9Iht{min-width:calc(var(--indent-s)*1.5)}.Input_size-m__jTEMl .Input_addonLeft__i1c70,.Input_size-m__jTEMl .Input_addonRight__A9Iht{min-width:var(--indent-m)}.Input_size-l__BR-zg .Input_addonLeft__i1c70,.Input_size-l__BR-zg .Input_addonRight__A9Iht{min-width:var(--indent-l)}.Input_addonLeft__i1c70>span,.Input_addonRight__A9Iht>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Input_addonLeft__i1c70{margin-right:12px}.Input_addonRight__A9Iht{margin-left:12px}.Input_requiredStar__6MeQ4{background-color:var(--warning-color);border-radius:50%;height:8px;opacity:.8;pointer-events:none;position:absolute;width:8px}.Input_isDisabled__e7J10 .Input_requiredStar__6MeQ4{display:none}.Input_size-s__-U0r- .Input_requiredStar__6MeQ4{right:4px;top:4px}.Input_size-m__jTEMl .Input_requiredStar__6MeQ4{right:6px;top:6px}.Input_size-l__BR-zg .Input_requiredStar__6MeQ4{right:8px;top:8px}.Input_isDisabled__e7J10{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Input_clearButton__0E-9L{border-bottom-left-radius:0;border-top-left-radius:0;bottom:1px;height:auto;position:absolute;right:0;top:0;z-index:1}.Input_clearButton__0E-9L:hover{background-color:var(--accent-color-alpha-0)!important}.Input_clearIcon__Gi1Nc{flex-shrink:0;opacity:.3;transition:opacity .2s ease-out}.Input_clearButton__0E-9L:hover .Input_clearIcon__Gi1Nc{opacity:.8}.Input_size-s__-U0r- .Input_clearIcon__Gi1Nc{height:10px;width:10px}.Input_size-m__jTEMl .Input_clearIcon__Gi1Nc{height:12px;width:12px}.Input_size-l__BR-zg .Input_clearIcon__Gi1Nc{height:14px;width:14px}.Input_size-xl__o-R-1 .Input_clearIcon__Gi1Nc{height:16px;width:16px}";
4
- var S = {"root":"Input_root__kj4vQ","isTextArea":"Input_isTextArea__1a6n1","main":"Input_main__M6Qxb","control":"Input_control__wZcMD","controlWrapper":"Input_controlWrapper__WgrZL","size-s":"Input_size-s__-U0r-","size-m":"Input_size-m__jTEMl","size-l":"Input_size-l__BR-zg","border":"Input_border__01i-B","variant-default":"Input_variant-default__frNbg","isFocused":"Input_isFocused__9jtFN","variant-outlined":"Input_variant-outlined__qKjnJ","hasError":"Input_hasError__5iS2M","isDisabled":"Input_isDisabled__e7J10","addonLeft":"Input_addonLeft__i1c70","addonRight":"Input_addonRight__A9Iht","labelGap":"Input_labelGap__T6fAj","label":"Input_label__FT90l","scroller":"Input_scroller__OBm8M","placeholder":"Input_placeholder__DRYLA","clearBg":"Input_clearBg__jqI1h","hasClear":"Input_hasClear__5Y3nU","requiredStar":"Input_requiredStar__6MeQ4","clearButton":"Input_clearButton__0E-9L","clearIcon":"Input_clearIcon__Gi1Nc","size-xl":"Input_size-xl__o-R-1"};
3
+ var css_248z = ".Input_root__kj4vQ{color:var(--accent-color);position:relative}.Input_root__kj4vQ.Input_isTextArea__1a6n1{max-height:10em}.Input_control__wZcMD,.Input_main__M6Qxb,.Input_root__kj4vQ{width:100%}.Input_controlWrapper__WgrZL,.Input_root__kj4vQ{max-width:100%}.Input_main__M6Qxb{border-radius:inherit;display:flex;max-width:100%;position:relative}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{height:auto!important;max-height:inherit!important}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:2px!important}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:8px!important}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-right:13px!important}.Input_border__01i-B{background-color:var(--accent-color-alpha-100);border-radius:inherit;bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;transition:.15s ease-out;transition-property:box-shadow,border-color,background-color;z-index:0}.Input_root__kj4vQ:hover .Input_border__01i-B{background-color:var(--active-color-alpha-100)}.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--accent-color-alpha-100)}.Input_isFocused__9jtFN.Input_variant-default__frNbg .Input_border__01i-B{background-color:var(--active-color-alpha-300)}.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.Input_isFocused__9jtFN.Input_variant-outlined__qKjnJ .Input_border__01i-B{background-color:var(--active-color-alpha-300);box-shadow:inset 0 0 0 2px var(--active-color)}.Input_hasError__5iS2M .Input_variant-outlined__qKjnJ .Input_border__01i-B,.Input_hasError__5iS2M:hover .Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:inset 0 0 0 2px var(--danger-color)}.Input_isDisabled__e7J10.Input_variant-outlined__qKjnJ .Input_border__01i-B{box-shadow:none}.Input_size-s__-U0r-{font-size:12px}.Input_size-s__-U0r- .Input_main__M6Qxb{border-radius:4px;font-size:12px;min-height:30px;min-width:30px;padding:0 8px}.Input_size-m__jTEMl{font-size:16px}.Input_size-m__jTEMl .Input_main__M6Qxb{border-radius:6px;font-size:16px;min-height:40px;min-width:40px;padding:0 12px}.Input_size-l__BR-zg{font-size:20px}.Input_size-l__BR-zg .Input_main__M6Qxb{border-radius:8px;font-size:20px;min-height:50px;min-width:50px;padding:0 14px}.Input_isTextArea__1a6n1 .Input_main__M6Qxb{padding-left:0}.Input_isDisabled__e7J10{color:var(--accent-color-alpha-500);opacity:.4}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht,.Input_control__wZcMD{font-size:inherit;font-weight:400}.Input_labelGap__T6fAj{opacity:0;pointer-events:none;position:absolute}.Input_isTextArea__1a6n1 .Input_label__FT90l{max-height:40px}.Input_scroller__OBm8M{max-height:100%;width:100%}.Input_control__wZcMD{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;box-shadow:none;box-shadow:inset 0 0 0 2px none;color:inherit;display:inline-flex;filter:none;flex-grow:1;min-width:200px;position:relative;text-overflow:ellipsis;transition:border-color .15s ease-in-out 0s;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD{display:block;height:100%;width:100%}.Input_isTextArea__1a6n1 .Input_control__wZcMD:hover{cursor:text}.Input_isTextArea__1a6n1 .Input_control__wZcMD:after{content:\"\";display:block}.Input_control__wZcMD[type=number]{-moz-appearance:textfield;margin-right:14px}.Input_control__wZcMD[type=number]::-webkit-inner-spin-button,.Input_control__wZcMD[type=number]::-webkit-outer-spin-button{-webkit-appearance:none}.Input_numberArrows__8jveR{display:flex;flex-direction:column;height:100%;position:absolute;right:0}.Input_numberArrows__8jveR>button{background-color:transparent!important;height:50%;max-height:none;min-height:0;min-height:auto;opacity:.5;padding-left:0;padding-right:0;transition:opacity .1s ease-out;width:50%}.Input_numberArrows__8jveR>button:hover{opacity:1}.Input_size-s__-U0r- .Input_numberArrows__8jveR>button{min-width:24px}.Input_size-m__jTEMl .Input_numberArrows__8jveR>button{min-width:32px}.Input_size-l__BR-zg .Input_numberArrows__8jveR>button{min-width:40px}.Input_numberArrows__8jveR>button>svg{transform:scale(.8)}.Input_numberArrows__8jveR>button:first-child>svg{margin-bottom:-5%}.Input_numberArrows__8jveR>button:last-child>svg{margin-top:-5%}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:8px 8px 0}.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-s__-U0r-.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:8px}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:10px 12px 0}.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-m__jTEMl.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:10px}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA{padding:12px 14px 0}.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_control__wZcMD:after,.Input_size-l__BR-zg.Input_isTextArea__1a6n1 .Input_placeholder__DRYLA:after{height:12px}.Input_control__wZcMD:-internal-autofill-selected,.Input_control__wZcMD:-webkit-autofill{animation-fill-mode:both;animation-name:Input_clearBg__jqI1h}.Input_size-s__-U0r-.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:20px}.Input_size-m__jTEMl.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:24px}.Input_size-l__BR-zg.Input_hasClear__5Y3nU .Input_control__wZcMD{padding-right:28px}.Input_control__wZcMD::-moz-placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::placeholder{color:var(--accent-color-alpha-500)}.Input_control__wZcMD::-moz-selection{background-color:var(--active-color-alpha-300)}.Input_control__wZcMD::selection{background-color:var(--active-color-alpha-300)}.Input_placeholder__DRYLA{display:inline-block;left:0;max-width:100%;opacity:.4;overflow:hidden;padding:inherit;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;white-space:nowrap}.Input_addonLeft__i1c70,.Input_addonRight__A9Iht{align-items:center;display:inline-flex;min-width:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Input_size-s__-U0r- .Input_addonLeft__i1c70,.Input_size-s__-U0r- .Input_addonRight__A9Iht{min-width:calc(var(--indent-s)*1.5)}.Input_size-m__jTEMl .Input_addonLeft__i1c70,.Input_size-m__jTEMl .Input_addonRight__A9Iht{min-width:var(--indent-m)}.Input_size-l__BR-zg .Input_addonLeft__i1c70,.Input_size-l__BR-zg .Input_addonRight__A9Iht{min-width:var(--indent-l)}.Input_addonLeft__i1c70>span,.Input_addonRight__A9Iht>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Input_addonLeft__i1c70{margin-right:12px}.Input_addonRight__A9Iht{margin-left:12px}.Input_requiredStar__6MeQ4{background-color:var(--warning-color);border-radius:50%;height:8px;opacity:.8;pointer-events:none;position:absolute;width:8px}.Input_isDisabled__e7J10 .Input_requiredStar__6MeQ4{display:none}.Input_size-s__-U0r- .Input_requiredStar__6MeQ4{right:4px;top:4px}.Input_size-m__jTEMl .Input_requiredStar__6MeQ4{right:6px;top:6px}.Input_size-l__BR-zg .Input_requiredStar__6MeQ4{right:8px;top:8px}.Input_isDisabled__e7J10{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.Input_clearButton__0E-9L{border-bottom-left-radius:0;border-top-left-radius:0;bottom:1px;height:auto;position:absolute;right:0;top:0;z-index:1}.Input_clearButton__0E-9L:hover{background-color:var(--accent-color-alpha-0)!important}.Input_clearIcon__Gi1Nc{flex-shrink:0;opacity:.3;transition:opacity .2s ease-out}.Input_clearButton__0E-9L:hover .Input_clearIcon__Gi1Nc{opacity:.8}.Input_size-s__-U0r- .Input_clearIcon__Gi1Nc{height:10px;width:10px}.Input_size-m__jTEMl .Input_clearIcon__Gi1Nc{height:12px;width:12px}.Input_size-l__BR-zg .Input_clearIcon__Gi1Nc{height:14px;width:14px}.Input_size-xl__o-R-1 .Input_clearIcon__Gi1Nc{height:16px;width:16px}";
4
+ var S = {"root":"Input_root__kj4vQ","isTextArea":"Input_isTextArea__1a6n1","main":"Input_main__M6Qxb","control":"Input_control__wZcMD","controlWrapper":"Input_controlWrapper__WgrZL","size-s":"Input_size-s__-U0r-","size-m":"Input_size-m__jTEMl","size-l":"Input_size-l__BR-zg","border":"Input_border__01i-B","variant-default":"Input_variant-default__frNbg","isFocused":"Input_isFocused__9jtFN","variant-outlined":"Input_variant-outlined__qKjnJ","hasError":"Input_hasError__5iS2M","isDisabled":"Input_isDisabled__e7J10","addonLeft":"Input_addonLeft__i1c70","addonRight":"Input_addonRight__A9Iht","labelGap":"Input_labelGap__T6fAj","label":"Input_label__FT90l","scroller":"Input_scroller__OBm8M","numberArrows":"Input_numberArrows__8jveR","placeholder":"Input_placeholder__DRYLA","clearBg":"Input_clearBg__jqI1h","hasClear":"Input_hasClear__5Y3nU","requiredStar":"Input_requiredStar__6MeQ4","clearButton":"Input_clearButton__0E-9L","clearIcon":"Input_clearIcon__Gi1Nc","size-xl":"Input_size-xl__o-R-1"};
5
5
  styleInject(css_248z);
6
6
 
7
7
  export { S as default };
@@ -16,30 +16,32 @@ import '../AssistiveText/AssistiveText.styl.js';
16
16
  import '../Spinner/Spinner.styl.js';
17
17
  import '../Button/Button.styl.js';
18
18
  import '../ButtonGroup/ButtonGroup.styl.js';
19
+ import '../Calendar/Calendar.styl.js';
20
+ import 'lodash.omit';
21
+ import '../RequiredStar/RequiredStar.styl.js';
19
22
  import 'nanoid';
23
+ import '../Input/Input.styl.js';
24
+ import '../Portal/Portal.js';
25
+ import '../Paranja/Paranja.styl.js';
26
+ import '../../tools/dom.js';
27
+ import '../Popup/Popup.styl.js';
28
+ import '../../tools/queryParams.js';
29
+ import '../Select/Select.styl.js';
20
30
  import '../Checkbox/Checkbox.styl.js';
21
31
  import '../Container/Container.styl.js';
32
+ import '../DatePicker/DatePicker.styl.js';
22
33
  import 'moment';
23
34
  import { Draggable } from '../Draggable/Draggable.js';
24
35
  import '../Expand/Expand.styl.js';
25
- import 'lodash.omit';
26
- import '../RequiredStar/RequiredStar.styl.js';
27
- import '../Input/Input.styl.js';
28
36
  import '../Form/Form.styl.js';
29
37
  import '../Form/Validator.js';
30
38
  import '../Form/SubmitButtons/SubmitButtons.styl.js';
31
39
  import '../Gallery/Gallery.styl.js';
32
40
  import '../Heading/Heading.js';
33
- import '../Portal/Portal.js';
34
- import '../Paranja/Paranja.styl.js';
35
41
  import '../LightBox/LightBox.styl.js';
36
42
  import '../Notifications/Notifications.js';
37
- import '../../tools/dom.js';
38
- import '../Popup/Popup.styl.js';
39
- import '../../tools/queryParams.js';
40
43
  import '../PopupMenu/PopupMenu.styl.js';
41
44
  import '../Router/Router.js';
42
- import '../Select/Select.styl.js';
43
45
  import '../Table/Table.styl.js';
44
46
  import '../Tabs/Tabs.styl.js';
45
47
  import '../Text/Text.js';
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".InputFile_root__pY3JG{position:relative}.InputFile_border__whRyD{border-radius:inherit;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:background-color .2s ease-out;width:100%}.InputFile_variant-outlined__f5hnA .InputFile_border__whRyD{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD{background-color:var(--accent-color-alpha-100)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD:hover{background-color:var(--active-color-alpha-300)}.InputFile_empty__7j1BK:hover .InputFile_border__whRyD{background-color:var(--active-color-alpha-500)}.InputFile_label__bAEz-{align-items:center;display:flex;height:100%;position:absolute}.InputFile_inner__BQFX7{max-height:inherit}.InputFile_items__ND1YG{align-items:center;display:flex;flex-wrap:wrap;font-size:0;margin:-4px;width:calc(100% + 8px)}.InputFile_item__qg5I6{display:inline-flex;margin:4px;position:relative}.InputFile_item__qg5I6:first-child:last-child{width:100%}.InputFile_addButton__rW719{align-items:center;cursor:pointer;justify-content:center;position:relative;transition:background-color .2s ease-out}.InputFile_root__pY3JG:not(.InputFile_empty__7j1BK) .InputFile_addButton__rW719:hover{background-color:var(--active-color-alpha-500)}.InputFile_input__7FR5r{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}.InputFile_size-s__hsWTE{font-size:12px}.InputFile_size-s__hsWTE .InputFile_border__whRyD,.InputFile_size-s__hsWTE .InputFile_item__qg5I6{border-radius:4px}.InputFile_size-s__hsWTE .InputFile_items__ND1YG{padding:10px}.InputFile_size-s__hsWTE .InputFile_item__qg5I6{height:50px;width:50px}.InputFile_size-m__unA0n{font-size:16px}.InputFile_size-m__unA0n .InputFile_border__whRyD,.InputFile_size-m__unA0n .InputFile_item__qg5I6{border-radius:6px}.InputFile_size-m__unA0n .InputFile_items__ND1YG{padding:12px}.InputFile_size-m__unA0n .InputFile_item__qg5I6{height:70px;width:70px}.InputFile_size-l__wpOVo{font-size:20px}.InputFile_size-l__wpOVo .InputFile_border__whRyD,.InputFile_size-l__wpOVo .InputFile_item__qg5I6{border-radius:8px}.InputFile_size-l__wpOVo .InputFile_items__ND1YG{padding:14px}.InputFile_size-l__wpOVo .InputFile_item__qg5I6{height:100px;width:100px}.InputFile_draggable__M7-3v{position:relative;width:100%}.InputFile_draggable__M7-3v .InputFile_item__qg5I6:not(.InputFile_addButton__rW719){cursor:move}";
3
+ var css_248z = ".InputFile_root__pY3JG{position:relative}.InputFile_border__whRyD{border-radius:inherit;height:100%;left:0;pointer-events:none;position:absolute;top:0;transition:background-color .2s ease-out;width:100%}.InputFile_variant-outlined__f5hnA .InputFile_border__whRyD{background-color:transparent;box-shadow:inset 0 0 0 2px var(--accent-color)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD{background-color:var(--accent-color-alpha-100)}.InputFile_variant-default__Jqzal .InputFile_border__whRyD:hover{background-color:var(--active-color-alpha-300)}.InputFile_empty__7j1BK:hover .InputFile_border__whRyD{background-color:var(--active-color-alpha-500)}.InputFile_label__bAEz-{align-items:center;display:flex;height:100%;position:absolute}.InputFile_inner__BQFX7{max-height:inherit}.InputFile_items__ND1YG{align-items:center;display:flex;flex-wrap:wrap;font-size:0;margin:-4px;width:calc(100% + 8px)}.InputFile_item__qg5I6{display:inline-flex;margin:4px;position:relative}.InputFile_item__qg5I6:first-child:last-child{width:100%}.InputFile_addButton__rW719{align-items:center;cursor:pointer;justify-content:center;position:relative;transition:background-color .2s ease-out}.InputFile_root__pY3JG:not(.InputFile_empty__7j1BK) .InputFile_addButton__rW719:hover{background-color:var(--active-color-alpha-500)}.InputFile_input__7FR5r{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0}.InputFile_size-s__hsWTE{font-size:12px}.InputFile_size-s__hsWTE .InputFile_border__whRyD,.InputFile_size-s__hsWTE .InputFile_item__qg5I6{border-radius:4px}.InputFile_size-s__hsWTE .InputFile_items__ND1YG{padding:8px}.InputFile_size-s__hsWTE .InputFile_item__qg5I6{height:50px;width:50px}.InputFile_size-m__unA0n{font-size:16px}.InputFile_size-m__unA0n .InputFile_border__whRyD,.InputFile_size-m__unA0n .InputFile_item__qg5I6{border-radius:6px}.InputFile_size-m__unA0n .InputFile_items__ND1YG{padding:12px}.InputFile_size-m__unA0n .InputFile_item__qg5I6{height:70px;width:70px}.InputFile_size-l__wpOVo{font-size:20px}.InputFile_size-l__wpOVo .InputFile_border__whRyD,.InputFile_size-l__wpOVo .InputFile_item__qg5I6{border-radius:8px}.InputFile_size-l__wpOVo .InputFile_items__ND1YG{padding:14px}.InputFile_size-l__wpOVo .InputFile_item__qg5I6{height:100px;width:100px}.InputFile_draggable__M7-3v{position:relative;width:100%}.InputFile_draggable__M7-3v .InputFile_item__qg5I6:not(.InputFile_addButton__rW719){cursor:move}";
4
4
  var S = {"root":"InputFile_root__pY3JG","border":"InputFile_border__whRyD","variant-outlined":"InputFile_variant-outlined__f5hnA","variant-default":"InputFile_variant-default__Jqzal","empty":"InputFile_empty__7j1BK","label":"InputFile_label__bAEz-","inner":"InputFile_inner__BQFX7","items":"InputFile_items__ND1YG","item":"InputFile_item__qg5I6","addButton":"InputFile_addButton__rW719","input":"InputFile_input__7FR5r","size-s":"InputFile_size-s__hsWTE","size-m":"InputFile_size-m__unA0n","size-l":"InputFile_size-l__wpOVo","draggable":"InputFile_draggable__M7-3v"};
5
5
  styleInject(css_248z);
6
6
 
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".Label_size-s__CL8do{font-size:12px;padding:0 10px}.Label_size-m__X81DA{font-size:16px;padding:0 12px}.Label_size-l__-2YIE{font-size:20px;padding:0 14px}.Label_size-xl__aeykV{padding-right:10px}.Label_root__TewVm{align-items:center;color:var(--accent-color-alpha-500);display:flex;left:0;padding-bottom:0;padding-top:0;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Label_root__TewVm,.Label_root__TewVm>div{height:100%;max-width:100%}.Label_gap__zlRrx,.Label_view__Lz9Eu>div{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Label_view__Lz9Eu{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;max-width:100%;transform:translateZ(0);transform-origin:top left;transition:transform .15s ease-out}.Label_onTop__7Ntzk .Label_view__Lz9Eu{color:var(--accent-color);transform:scale(.7) translate3d(0,-50%,0)}.Label_isError__YqI0d .Label_view__Lz9Eu{color:var(--danger-color)}.Label_gapWrap__lDGBB{max-width:100%;opacity:0;padding:inherit;pointer-events:none;position:absolute}.Label_gapWrap__lDGBB:before{border-radius:4px;content:\"\";height:1.4em;left:-6px;position:absolute;right:-6px;z-index:-1}";
3
+ var css_248z = ".Label_size-s__CL8do{font-size:12px;padding:0 8px}.Label_size-m__X81DA{font-size:16px;padding:0 12px}.Label_size-l__-2YIE{font-size:20px;padding:0 14px}.Label_size-xl__aeykV{padding-right:10px}.Label_root__TewVm{align-items:center;color:var(--accent-color-alpha-500);display:flex;left:0;padding-bottom:0;padding-top:0;pointer-events:none;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:1}.Label_root__TewVm,.Label_root__TewVm>div{height:100%;max-width:100%}.Label_gap__zlRrx,.Label_view__Lz9Eu>div{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Label_view__Lz9Eu{align-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;height:100%;max-width:100%;transform:translateZ(0);transform-origin:top left;transition:transform .15s ease-out}.Label_onTop__7Ntzk .Label_view__Lz9Eu{color:var(--accent-color);transform:scale(.7) translate3d(0,-50%,0)}.Label_isError__YqI0d .Label_view__Lz9Eu{color:var(--danger-color)}.Label_gapWrap__lDGBB{max-width:100%;opacity:0;padding:inherit;pointer-events:none;position:absolute}.Label_gapWrap__lDGBB:before{border-radius:4px;content:\"\";height:1.4em;left:-6px;position:absolute;right:-6px;z-index:-1}";
4
4
  var S = {"size-s":"Label_size-s__CL8do","size-m":"Label_size-m__X81DA","size-l":"Label_size-l__-2YIE","size-xl":"Label_size-xl__aeykV","root":"Label_root__TewVm","view":"Label_view__Lz9Eu","gap":"Label_gap__zlRrx","onTop":"Label_onTop__7Ntzk","isError":"Label_isError__YqI0d","gapWrap":"Label_gapWrap__lDGBB"};
5
5
  styleInject(css_248z);
6
6
 
@@ -566,8 +566,9 @@ class Select extends Component {
566
566
  renderOptionsList() {
567
567
  const { size } = this.props;
568
568
  this.isTree = false;
569
+ const optionsList = this.renderOptions();
569
570
  const classes = cn(S.options, S[`size-${size}`], this.isTree && S.isTree);
570
- return (jsxs("div", { ref: this.contentRef, children: [this.renderPresets(), jsx(Scroll, { y: true, offset: { y: { before: 10, after: 10 } }, className: classes, onInnerRef: this.onScrollInnerRef, children: this.renderOptions() }, "items-scroll")] }));
571
+ return (jsxs("div", { ref: this.contentRef, children: [this.renderPresets(), jsx(Scroll, { y: true, offset: { y: { before: 10, after: 10 } }, className: classes, onInnerRef: this.onScrollInnerRef, children: optionsList }, "items-scroll")] }));
571
572
  }
572
573
  render() {
573
574
  const { className, popupProps, size, error, blur } = this.props;
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:var(--indent-s);margin-right:0!important;transition:transform .2s ease-out;width:14px!important}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_size-s__qBK9t .Select_triggerButton__lErtt{padding-bottom:10px;padding-top:10px}.Select_size-m__jp7n- .Select_triggerButton__lErtt{padding-bottom:12px;padding-top:12px}.Select_size-l__b4EEy .Select_triggerButton__lErtt{padding-bottom:14px;padding-top:14px}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;animation:Select_fadeIn__QpAwZ .3s ease-out;cursor:pointer;display:flex;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:12px;height:26px;padding:0 10px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:16px;height:34px;padding:0 12px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:20px;height:42px;padding:0 14px}.Select_size-xl__0OerX .Select_option__iJkfJ{height:50px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
3
+ var css_248z = ".Select_root__mjOjv{max-height:200px;max-width:100%;position:relative}.Select_root__mjOjv.Select_disabled__AlOQi{opacity:.4;pointer-events:none}.Select_additionalLabel__K0--Z{flex-grow:1;overflow:hidden;text-align:left;text-overflow:ellipsis}.Select_trigger__OH48f{position:relative;z-index:1}.Select_triggerArrow__1LEop{flex-shrink:0;margin-left:var(--indent-s);margin-right:0!important;transition:transform .2s ease-out;width:14px!important}.Select_triggerArrow__1LEop.Select_isOpen__WlMUH{transform:rotateX(-180deg)}.Select_disabled__AlOQi .Select_triggerArrow__1LEop{color:var(--text3-color)}.Select_triggerButton__lErtt{justify-content:space-between;text-align:left;width:100%}.Select_size-s__qBK9t .Select_triggerButton__lErtt{padding-bottom:8px;padding-top:8px}.Select_size-m__jp7n- .Select_triggerButton__lErtt{padding-bottom:12px;padding-top:12px}.Select_size-l__b4EEy .Select_triggerButton__lErtt{padding-bottom:14px;padding-top:14px}.Select_triggerButton__lErtt.Select_hasTriggerArrow__vPLad>span{max-width:calc(100% - 22px)}.Select_triggerButton__lErtt.Select_isError__WJJLq{box-shadow:inset 0 0 0 2px var(--danger-color)}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh{opacity:0;overflow:hidden;text-overflow:ellipsis}.Select_triggerButton__lErtt .Select_triggerButtonLabel__XXLzh.Select_hasSelected__zQhBV{opacity:1}.Select_presetPanel__Yu94r{box-shadow:inset 0 -1px 0 var(--decent-color-alpha-100);display:flex;padding:5px}.Select_presetButton__BAl0q{flex-grow:1;justify-content:center}.Select_presetButton__BAl0q+.Select_presetButton__BAl0q{margin-left:8px}.Select_options__3C0-v{max-height:200px;overflow-y:auto}.keyboard .Select_options__3C0-v{pointer-events:none}.Select_option__iJkfJ{align-items:center;animation:Select_fadeIn__QpAwZ .3s ease-out;cursor:pointer;display:flex;padding-bottom:0!important;padding-top:0!important;position:relative;text-align:left;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.Select_isTree__SiTaD .Select_option__iJkfJ{min-height:36px}.Select_size-s__qBK9t .Select_option__iJkfJ{font-size:12px;height:26px;padding:0 8px}.Select_size-m__jp7n- .Select_option__iJkfJ{font-size:16px;height:34px;padding:0 12px}.Select_size-l__b4EEy .Select_option__iJkfJ{font-size:20px;height:42px;padding:0 14px}.Select_size-xl__0OerX .Select_option__iJkfJ{height:50px}.Select_option__iJkfJ:first-child{border-top-left-radius:2px;border-top-right-radius:2px}.Select_option__iJkfJ:last-child{border-bottom-left-radius:2px;border-bottom-right-radius:2px}.Select_isTree__SiTaD .Select_option__iJkfJ{padding-left:30px}.Select_option__iJkfJ.Select_isGroup__aP1lY{color:var(--accent-color);font-weight:500;pointer-events:none}.Select_isExpanded__rG8R1>.Select_option__iJkfJ{display:flex}.Select_option__iJkfJ>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Select_option__iJkfJ:before{content:\"\";display:inline-block}.Select_option__iJkfJ.Select_level-0__vu03A:before{content:none}.Select_option__iJkfJ.Select_level-1__ozH2U:before{min-width:24px;width:24px}.Select_option__iJkfJ.Select_level-2__XDqeh:before{min-width:48px;width:48px}.Select_option__iJkfJ.Select_level-3__Bc9XS:before{min-width:72px;width:72px}.Select_option__iJkfJ.Select_level-4__KfQcQ:before{min-width:96px;width:96px}.Select_option__iJkfJ.Select_level-5__DGSDM:before{min-width:120px;width:120px}.Select_option__iJkfJ.Select_level-6__p688A:before{min-width:144px;width:144px}.Select_option__iJkfJ.Select_isIndeterminate__dy-xV,.Select_option__iJkfJ.Select_isSelected__n3ZeN{background-color:var(--active-color-alpha-500)}.keyboard .Select_option__iJkfJ.Select_isFocused__oZSgY,.pointer .Select_option__iJkfJ:hover{box-shadow:inset 100vw 0 0 0 var(--accent-color-alpha-200)}.Select_expandButton__UTwlR{background-color:transparent!important;display:flex;height:100%;justify-content:flex-end;overflow:visible;padding:0;position:relative;width:30px}.Select_expandButton__UTwlR:before{content:\"\";display:block;height:calc(100% + 20px);position:absolute;right:0;top:-10;width:100px}.Select_size-m__jp7n- .Select_expandButton__UTwlR{margin-left:-40px}.Select_size-l__b4EEy .Select_expandButton__UTwlR{margin-left:-46px}.Select_expandIcon__gWAIB{-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .1s ease-out}.Select_isExpanded__rG8R1 .Select_expandIcon__gWAIB{transform:rotate(90deg) translateZ(0)}.Select_expandButton__UTwlR:hover .Select_expandIcon__gWAIB{color:var(--primary-color)}@keyframes Select_fadeIn__QpAwZ{0%{opacity:0}10%{opacity:0}to{opacity:1}}";
4
4
  var S = {"root":"Select_root__mjOjv","disabled":"Select_disabled__AlOQi","additionalLabel":"Select_additionalLabel__K0--Z","trigger":"Select_trigger__OH48f","triggerArrow":"Select_triggerArrow__1LEop","isOpen":"Select_isOpen__WlMUH","triggerButton":"Select_triggerButton__lErtt","size-s":"Select_size-s__qBK9t","size-m":"Select_size-m__jp7n-","size-l":"Select_size-l__b4EEy","hasTriggerArrow":"Select_hasTriggerArrow__vPLad","isError":"Select_isError__WJJLq","triggerButtonLabel":"Select_triggerButtonLabel__XXLzh","hasSelected":"Select_hasSelected__zQhBV","presetPanel":"Select_presetPanel__Yu94r","presetButton":"Select_presetButton__BAl0q","options":"Select_options__3C0-v","option":"Select_option__iJkfJ","fadeIn":"Select_fadeIn__QpAwZ","isTree":"Select_isTree__SiTaD","size-xl":"Select_size-xl__0OerX","isGroup":"Select_isGroup__aP1lY","isExpanded":"Select_isExpanded__rG8R1","level-0":"Select_level-0__vu03A","level-1":"Select_level-1__ozH2U","level-2":"Select_level-2__XDqeh","level-3":"Select_level-3__Bc9XS","level-4":"Select_level-4__KfQcQ","level-5":"Select_level-5__DGSDM","level-6":"Select_level-6__p688A","isSelected":"Select_isSelected__n3ZeN","isIndeterminate":"Select_isIndeterminate__dy-xV","isFocused":"Select_isFocused__oZSgY","expandButton":"Select_expandButton__UTwlR","expandIcon":"Select_expandIcon__gWAIB"};
5
5
  styleInject(css_248z);
6
6
 
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import * as T from './Calendar.types';
3
+ export declare function Calendar({ value, onDayClick, renderDay, renderWeekDayLabel, renderMonthLabel, renderMonthesLabel, renderYearLabel, startOfWeek, weekendClassName, size, }: T.Props): JSX.Element;
@@ -0,0 +1,8 @@
1
+ import type { Date } from 'uilib/types';
2
+ import * as T from './Calendar.types';
3
+ export declare const weekDays: string[];
4
+ export declare const getWeekDaysArray: (startOfWeek?: number) => any[];
5
+ export declare const isWeekend: (day: number) => boolean;
6
+ export declare const isSameDay: (day1: Date, day2: Date) => boolean;
7
+ export declare const getDaysArray: (year: any, month: any, startOfWeek: any) => T.Day[];
8
+ export declare const valueToDate: (day: Date) => globalThis.Date;
@@ -0,0 +1,21 @@
1
+ import { ReactNode } from 'react';
2
+ import { Size, Date } from 'uilib/types';
3
+ export type Day = Date & {
4
+ currentMonth?: boolean;
5
+ };
6
+ export type DayProps = {
7
+ className: string;
8
+ onClick: () => void;
9
+ };
10
+ export type Props = {
11
+ value: Date;
12
+ onDayClick: (value: Date) => void;
13
+ startOfWeek?: number;
14
+ size?: Size;
15
+ renderDay?: (day: Day, dayProps: DayProps) => ReactNode;
16
+ renderWeekDayLabel?: (day: number) => ReactNode;
17
+ renderYearLabel?: (year: number) => string;
18
+ renderMonthesLabel?: (month: number) => string;
19
+ renderMonthLabel?: (month: number) => string;
20
+ weekendClassName?: string;
21
+ };
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ import * as T from './DatePicker.types';
3
+ export declare function DatePicker(props: T.Props): JSX.Element;
@@ -0,0 +1,9 @@
1
+ import type { Size, Date } from 'uilib/types';
2
+ import type { Props as CalendarProps } from 'uilib/components/Calendar/Calendar.types';
3
+ export type Value = Date | [Date, Date];
4
+ export type Props = {
5
+ value: Value;
6
+ onChange: (value: Value) => void;
7
+ size?: Size;
8
+ calendarProps?: CalendarProps;
9
+ };
@@ -1,3 +1,2 @@
1
- /// <reference types="react" />
2
1
  declare const _default: () => JSX.Element;
3
2
  export default _default;
@@ -22,6 +22,7 @@ export declare class Input extends Component<T.Props> {
22
22
  updateHasValue(): void;
23
23
  hasValue(value?: any): boolean;
24
24
  isTextArea: () => boolean;
25
+ isNumber: () => boolean;
25
26
  isLabelOnTop(hasValue?: any): any;
26
27
  getValue(val?: any): any;
27
28
  onTextareaPaste: (e: any) => void;
@@ -30,6 +31,7 @@ export declare class Input extends Component<T.Props> {
30
31
  onDocKeyUp: (e: KeyboardEvent) => void;
31
32
  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
32
33
  onChange: (value: any, e?: any) => void;
34
+ onNumberWheel: (delta: any) => void;
33
35
  onTextAreaInput: (e: any) => void;
34
36
  onLabelClipPathChange: (clipPath: string) => string;
35
37
  onTypingEnd: () => void;
@@ -4,6 +4,7 @@ export type ControlProps = HTMLProps<HTMLInputElement>;
4
4
  export type Value = string | number;
5
5
  export type Props = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & Omit<ControlProps, 'ref'> & FormControl<Value> & {
6
6
  name?: string;
7
+ step?: number;
7
8
  size?: Size;
8
9
  label?: string;
9
10
  variant?: 'default' | 'outlined';
@@ -73,7 +73,7 @@ export declare class Select extends Component<T.Props, T.State> {
73
73
  getNewSelected(id: any): T.State['selected'];
74
74
  getValue(): any;
75
75
  getInputVal(): T.Value;
76
- getLabel(id: any): any;
76
+ getLabel(id: any): string;
77
77
  getFieldLabel(label: any): any;
78
78
  getSelectedLabel(): string;
79
79
  filterOption({ label }: {
@@ -7,7 +7,7 @@ export type Option = {
7
7
  id: Id;
8
8
  isGroupHeader?: boolean;
9
9
  parentId?: Id;
10
- label: any;
10
+ label: string;
11
11
  sortingKey?: string | number;
12
12
  children?: Option[];
13
13
  render?: (label: string) => string;
@@ -1,8 +1,10 @@
1
1
  export * from './AssistiveText/AssistiveText';
2
2
  export * from './Button/Button';
3
3
  export * from './ButtonGroup/ButtonGroup';
4
+ export * from './Calendar/Calendar';
4
5
  export * from './Checkbox/Checkbox';
5
6
  export * from './Container/Container';
7
+ export * from './DatePicker/DatePicker';
6
8
  export * from './DateTime/DateTime';
7
9
  export * from './Draggable/Draggable';
8
10
  export * from './Expand/Expand';
@@ -13,3 +13,9 @@ export type FormControl<T> = {
13
13
  name?: string;
14
14
  label?: string;
15
15
  };
16
+ export type Date = {
17
+ year: number;
18
+ month: number;
19
+ day?: number;
20
+ ISO?: string;
21
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homecode/ui",
3
- "version": "4.12.1",
3
+ "version": "4.14.0",
4
4
  "description": "React UI components library",
5
5
  "scripts": {
6
6
  "test": "echo \"Error: no test specified\" && exit 1",