mimir-ui-kit 1.21.0 → 1.21.2

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 (40) hide show
  1. package/dist/DatePickerModal-BM0BgzTb.js +204 -0
  2. package/dist/assets/Button.css +1 -1
  3. package/dist/assets/DatePickerModal.css +1 -0
  4. package/dist/assets/Drawer.css +1 -1
  5. package/dist/assets/TextArea.css +1 -1
  6. package/dist/components/Button/Button.d.ts +52 -0
  7. package/dist/components/Button/Button.js +33 -28
  8. package/dist/components/Button/constants.d.ts +8 -1
  9. package/dist/components/Button/constants.js +9 -0
  10. package/dist/components/Button/index.d.ts +1 -1
  11. package/dist/components/Button/index.js +2 -1
  12. package/dist/components/Button/types.d.ts +7 -2
  13. package/dist/components/DatePicker/DatePicker.d.ts +0 -12
  14. package/dist/components/DatePicker/DatePicker.js +18 -87
  15. package/dist/components/DatePicker/DatePickerModal.d.ts +1 -2
  16. package/dist/components/DatePicker/DatePickerModal.js +7 -182
  17. package/dist/components/DatePicker/constants.d.ts +0 -1
  18. package/dist/components/DatePicker/constants.js +0 -15
  19. package/dist/components/Drawer/Drawer.d.ts +13 -5
  20. package/dist/components/Drawer/Drawer.js +75 -51
  21. package/dist/components/TextArea/TextArea.js +9 -9
  22. package/dist/components/Uploader/Uploader.js +1 -1
  23. package/dist/components/index.d.ts +1 -1
  24. package/dist/components/index.js +2 -1
  25. package/dist/hooks/index.d.ts +1 -0
  26. package/dist/hooks/index.js +2 -0
  27. package/dist/hooks/useResizeObserver/getElement.d.ts +4 -0
  28. package/dist/hooks/useResizeObserver/getElement.js +18 -0
  29. package/dist/hooks/useResizeObserver/index.d.ts +1 -0
  30. package/dist/hooks/useResizeObserver/index.js +4 -0
  31. package/dist/hooks/useResizeObserver/useResizeObserver.d.ts +17 -0
  32. package/dist/hooks/useResizeObserver/useResizeObserver.js +49 -0
  33. package/dist/index.js +4 -1
  34. package/package.json +1 -1
  35. package/dist/assets/styles.css +0 -1
  36. package/dist/components/DatePicker/MonthPickerModal.d.ts +0 -9
  37. package/dist/components/DatePicker/MonthPickerModal.js +0 -123
  38. package/dist/components/DatePicker/YearPickerModal.d.ts +0 -9
  39. package/dist/components/DatePicker/YearPickerModal.js +0 -120
  40. package/dist/styles.module-BZXDqssF.js +0 -36
@@ -1,92 +1,44 @@
1
1
  import { jsxs, jsx } from "react/jsx-runtime";
2
2
  import { c as classNames } from "../../index-CweZ_OcN.js";
3
- import { memo, forwardRef, useState, useEffect } from "react";
4
- import { DatePickerModal } from "./DatePickerModal.js";
5
- import { MonthPickerModal } from "./MonthPickerModal.js";
6
- import { c as cls } from "../../styles.module-BZXDqssF.js";
7
- import { YearPickerModal } from "./YearPickerModal.js";
3
+ import { memo, forwardRef, useState } from "react";
4
+ import { c as cls, D as DatePickerModal } from "../../DatePickerModal-BM0BgzTb.js";
8
5
  import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
9
6
  import { formating } from "../../utils/index.js";
10
7
  import { Button } from "../Button/Button.js";
11
8
  import { I as Input } from "../../Input-6mudFqTb.js";
12
- import { EInputVariant } from "../Input/constants.js";
13
9
  const DatePicker = memo(
14
10
  forwardRef(
15
- ({
16
- size,
17
- value,
18
- onChangeValue,
19
- name,
20
- before,
21
- type = "days",
22
- error,
23
- variant,
24
- disabled = false,
25
- ...props
26
- }, ref) => {
11
+ ({ size, value, onChangeValue, name, before, ...props }, ref) => {
27
12
  const [isActive, setActive] = useState(false);
28
- const [pickerType, setType] = useState(type);
29
13
  const [date, setDate] = useState(
30
14
  value ? new Date(value) : /* @__PURE__ */ new Date()
31
15
  );
32
- const [isError, setError] = useState(error);
33
- useEffect(() => {
34
- setError(error);
35
- }, [error]);
36
16
  useClickOutside({
37
17
  isActive,
38
- setActive: (e) => {
39
- setActive(e);
40
- setType(type);
41
- },
18
+ setActive,
42
19
  className: cls["calendar-block"]
43
20
  });
44
21
  const onOpen = () => {
45
- if (!disabled) setActive(true);
22
+ setActive(true);
46
23
  };
47
24
  const onDate = (d) => {
48
- if (pickerType === "years") {
49
- if (type === "years") {
50
- setActive(false);
51
- setType(type);
52
- } else {
53
- setType("months");
54
- }
55
- }
56
- if (pickerType === "months") {
57
- if (type === "months") {
58
- setActive(false);
59
- setType(type);
60
- } else {
61
- setType("days");
62
- }
63
- }
64
25
  setDate(d);
65
26
  onChangeValue == null ? void 0 : onChangeValue({ value: d, name });
66
27
  };
67
28
  const wrapperClassNames = classNames(cls.wrapper, isActive && cls.active);
68
- return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, "data-disabled": disabled, children: [
69
- /* @__PURE__ */ jsx(
70
- "div",
29
+ return /* @__PURE__ */ jsxs("div", { className: wrapperClassNames, children: [
30
+ /* @__PURE__ */ jsx("div", { className: cls["date-wrapper"], onClick: onOpen, children: /* @__PURE__ */ jsx(
31
+ Input,
71
32
  {
72
- "data-error": isError,
73
- className: cls["date-wrapper"],
74
- onClick: onOpen,
75
- children: /* @__PURE__ */ jsx(
76
- Input,
77
- {
78
- ref,
79
- className: cls.input,
80
- wrapperClassName: cls["input-wrapper"],
81
- size,
82
- type: "text",
83
- variant: isError ? EInputVariant.Error : variant,
84
- value: formating.Date(date, "dd.mm.yy"),
85
- ...props
86
- }
87
- )
33
+ ref,
34
+ className: cls.input,
35
+ wrapperClassName: cls["input-wrapper"],
36
+ size,
37
+ type: "text",
38
+ value: formating.Date(date, "dd.mm.yy"),
39
+ ...props
88
40
  }
89
- ),
41
+ ) }),
90
42
  /* @__PURE__ */ jsx("div", { className: cls["button-wrapper"], children: /* @__PURE__ */ jsx(
91
43
  Button,
92
44
  {
@@ -98,34 +50,13 @@ const DatePicker = memo(
98
50
  iconName: isActive ? "DropdownArrowUp16px" : "DropdownArrowBottom16px"
99
51
  }
100
52
  ) }),
101
- pickerType === "days" && isActive && /* @__PURE__ */ jsx(
53
+ isActive && /* @__PURE__ */ jsx(
102
54
  DatePickerModal,
103
55
  {
104
56
  onChangeValue: onDate,
105
57
  date,
106
58
  setActive,
107
- before: typeof before === "string" ? new Date(before) : before,
108
- onType: setType
109
- }
110
- ),
111
- pickerType === "months" && isActive && /* @__PURE__ */ jsx(
112
- MonthPickerModal,
113
- {
114
- onChangeValue: onDate,
115
- date,
116
- setActive,
117
- before: typeof before === "string" ? new Date(before) : before,
118
- onType: setType
119
- }
120
- ),
121
- pickerType === "years" && isActive && /* @__PURE__ */ jsx(
122
- YearPickerModal,
123
- {
124
- onChangeValue: onDate,
125
- date,
126
- setActive,
127
- before: typeof before === "string" ? new Date(before) : before,
128
- onType: setType
59
+ before: typeof before === "string" ? new Date(before) : before
129
60
  }
130
61
  )
131
62
  ] });
@@ -3,7 +3,6 @@ type DatePickerModal = {
3
3
  onChangeValue: (d: Date) => void;
4
4
  setActive: (s: boolean) => void;
5
5
  before?: Date;
6
- onType?: (s: 'days' | 'months' | 'years') => void;
7
6
  };
8
- export declare function DatePickerModal({ date, onChangeValue, setActive, before, onType }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
7
+ export declare function DatePickerModal({ date, onChangeValue, setActive, before }: DatePickerModal): import("react/jsx-runtime").JSX.Element;
9
8
  export {};
@@ -1,184 +1,9 @@
1
- import { jsx, Fragment, jsxs } from "react/jsx-runtime";
2
- import { useRef, useState, useEffect } from "react";
3
- import { week } from "./constants.js";
4
- import { c as cls } from "../../styles.module-BZXDqssF.js";
5
- import { Icon } from "../../icons/Icon.js";
6
- import { formating } from "../../utils/index.js";
7
- import { Button } from "../Button/Button.js";
8
- function DatePickerModal({
9
- date,
10
- onChangeValue,
11
- setActive,
12
- before,
13
- onType
14
- }) {
15
- const field = useRef(null);
16
- const _current = new Date(date);
17
- const _selecte = new Date(date);
18
- const current = {
19
- y: _current.getFullYear(),
20
- d: _current.getDate(),
21
- m: _current.getMonth() + 1
22
- };
23
- const selecte = {
24
- y: _selecte.getFullYear(),
25
- d: _selecte.getDate(),
26
- m: _selecte.getMonth() + 1
27
- };
28
- const countWorkDays = 4;
29
- const [month, setMonth] = useState({ y: selecte.y, m: selecte.m });
30
- const blockWidth = 368;
31
- useEffect(() => {
32
- var _a, _b, _c, _d;
33
- const windowHeight = window.innerHeight;
34
- const windowWidth = window.innerWidth;
35
- if (field.current !== null) {
36
- const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
37
- const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
38
- const inputPosition = field.current.getBoundingClientRect();
39
- const calendarSize = field.current.offsetHeight;
40
- if (windowHeight < inputPosition.y + calendarSize) {
41
- field.current.style.top = -calendarSize + "px";
42
- } else {
43
- field.current.style.top = inputHeight + "px";
44
- }
45
- if (windowWidth < inputPosition.x + blockWidth) {
46
- field.current.style.left = inputWidth - blockWidth + "px";
47
- }
48
- field.current.style.opacity = "1";
49
- }
50
- }, [month]);
51
- const countPrevDays = (e) => {
52
- let dayOfWeek = e.getDay();
53
- if (dayOfWeek === 0) dayOfWeek = 7;
54
- return dayOfWeek - 1;
55
- };
56
- const currentMonthIndex = month.m - 1;
57
- const currentMonthFull = new Date(month.y, currentMonthIndex);
58
- const days = [];
59
- const prevDays = () => {
60
- const prevMonth = new Date(currentMonthFull);
61
- prevMonth.setDate(prevMonth.getDate() - 1);
62
- const lastDayPrevMohth = prevMonth.getDate();
63
- const prevList = [];
64
- for (let i = 0; i < countPrevDays(currentMonthFull); i++) {
65
- prevList.push(lastDayPrevMohth - i);
66
- }
67
- prevList.reverse();
68
- return prevList;
69
- };
70
- const prevDaysArray = prevDays();
71
- while (currentMonthFull.getMonth() === currentMonthIndex) {
72
- days.push(currentMonthFull.getDate());
73
- currentMonthFull.setDate(currentMonthFull.getDate() + 1);
74
- }
75
- const nextDays = () => {
76
- const totalViewDays = 42;
77
- const daysCount = totalViewDays - (prevDaysArray.length + days.length);
78
- const nextList = [];
79
- for (let i = 1; i <= daysCount; i++) {
80
- nextList.push(i);
81
- }
82
- return nextList;
83
- };
84
- const nextDaysArray = nextDays();
85
- const update = (m, y) => {
86
- y = m > 12 ? y + 1 : m < 1 ? y - 1 : y;
87
- m = m > 12 ? 1 : m < 1 ? 12 : m;
88
- return { y, m };
89
- };
90
- const onExit = () => {
91
- setActive(false);
92
- };
93
- const next = () => {
94
- setMonth(update(month.m + 1, month.y));
95
- };
96
- const prev = () => {
97
- setMonth(update(month.m - 1, month.y));
98
- };
99
- const isBefore = (activeDate) => {
100
- if (before) {
101
- const beforeDate = before.getTime();
102
- if (beforeDate > activeDate) return true;
103
- }
104
- return false;
105
- };
106
- const send = (searchDate) => {
107
- if (isBefore(
108
- (/* @__PURE__ */ new Date(
109
- `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
110
- )).getTime()
111
- ))
112
- return;
113
- onChangeValue(
114
- /* @__PURE__ */ new Date(
115
- `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, searchDate)}`
116
- )
117
- );
118
- onExit();
119
- };
120
- return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
121
- /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
122
- /* @__PURE__ */ jsx(
123
- Button,
124
- {
125
- isIconButton: true,
126
- iconName: "DropdownArrowLeft16px",
127
- onClick: prev,
128
- variant: "secondary-gray",
129
- size: "l"
130
- }
131
- ),
132
- /* @__PURE__ */ jsxs("div", { className: cls["d"], onClick: () => onType == null ? void 0 : onType("months"), children: [
133
- formating.Month(month.m).name,
134
- "’",
135
- month.y.toString().slice(-2),
136
- /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
137
- ] }),
138
- /* @__PURE__ */ jsx(
139
- Button,
140
- {
141
- isIconButton: true,
142
- iconName: "DropdownArrowRight16px",
143
- onClick: next,
144
- variant: "secondary-gray",
145
- size: "l"
146
- }
147
- )
148
- ] }),
149
- /* @__PURE__ */ jsxs("div", { className: cls["b"], children: [
150
- week.map((i, s) => /* @__PURE__ */ jsx(
151
- "div",
152
- {
153
- className: `${s > countWorkDays ? [cls["m"], cls["orange"]].join(" ") : cls["m"]}`,
154
- children: i
155
- },
156
- `v${s}`
157
- )),
158
- prevDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key)),
159
- days.map((i, s) => /* @__PURE__ */ jsx(
160
- "div",
161
- {
162
- className: isBefore(
163
- (/* @__PURE__ */ new Date(
164
- `${month.y}-${formating.Number(2, month.m)}-${formating.Number(2, i)}`
165
- )).getTime()
166
- ) ? cls["m"] : cls["a"],
167
- children: i !== 0 ? /* @__PURE__ */ jsx(
168
- "b",
169
- {
170
- className: current.y === month.y && current.m === month.m && current.d === i ? cls["current"] : "",
171
- onClick: () => send(i),
172
- children: i
173
- }
174
- ) : /* @__PURE__ */ jsx("p", {})
175
- },
176
- s
177
- )),
178
- nextDaysArray.map((el, key) => /* @__PURE__ */ jsx("div", { className: cls["m"], children: el }, key))
179
- ] })
180
- ] }) });
181
- }
1
+ import "react/jsx-runtime";
2
+ import "react";
3
+ import "./constants.js";
4
+ import { D } from "../../DatePickerModal-BM0BgzTb.js";
5
+ import "../../utils/index.js";
6
+ import "../Button/Button.js";
182
7
  export {
183
- DatePickerModal
8
+ D as DatePickerModal
184
9
  };
@@ -4,4 +4,3 @@ export declare enum EDatePickerBeforeDate {
4
4
  CurrentDate3 = "2024-07-11"
5
5
  }
6
6
  export declare const week: string[];
7
- export declare const months: string[];
@@ -5,22 +5,7 @@ var EDatePickerBeforeDate = /* @__PURE__ */ ((EDatePickerBeforeDate2) => {
5
5
  return EDatePickerBeforeDate2;
6
6
  })(EDatePickerBeforeDate || {});
7
7
  const week = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
8
- const months = [
9
- "Январь",
10
- "Февраль",
11
- "Март",
12
- "Апрель",
13
- "Май",
14
- "Июнь",
15
- "Июль",
16
- "Август",
17
- "Сентябрь",
18
- "Октябрь",
19
- "Ноябрь",
20
- "Декабрь"
21
- ];
22
8
  export {
23
9
  EDatePickerBeforeDate,
24
- months,
25
10
  week
26
11
  };
@@ -14,10 +14,6 @@ type TProps = {
14
14
  * Настраиваемый паддинг для body, что бы избежать скачка контента при overflow: hidden
15
15
  */
16
16
  paddingRight?: number;
17
- /**
18
- * Дополнительная высота для учета нижнего сайдбара
19
- */
20
- additionalHeight?: number;
21
17
  /**
22
18
  * Функция закрытия шторки
23
19
  */
@@ -26,6 +22,18 @@ type TProps = {
26
22
  * Дополнительный класс для родительской обертки.
27
23
  */
28
24
  className?: string;
25
+ /**
26
+ * Флаг отвечающий за загрузку
27
+ */
28
+ isLoading?: boolean;
29
+ /**
30
+ * Флаг делающий шапку sticky
31
+ */
32
+ stickyHeader?: boolean;
33
+ /**
34
+ * Флаг отвечающий за высоту шторки в положении `bottom`
35
+ */
36
+ fullBottomHeight?: boolean;
29
37
  /**
30
38
  * Позиция шторки.
31
39
  */
@@ -40,5 +48,5 @@ type TProps = {
40
48
  /**
41
49
  * Компонент шторки, который может выезжать слева, справа или внизу.
42
50
  */
43
- export declare const Drawer: ({ isOpen, onClose, title, className, position, paddingRight, additionalHeight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
51
+ export declare const Drawer: ({ isOpen, onClose, title, className, isLoading, stickyHeader, fullBottomHeight, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
44
52
  export {};
@@ -1,43 +1,48 @@
1
- import { jsxs, jsx } from "react/jsx-runtime";
1
+ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
2
2
  import { c as classNames } from "../../index-CweZ_OcN.js";
3
3
  import { useState, useRef, useCallback, useEffect } from "react";
4
4
  import { EDrawerPosition } from "./constants.js";
5
5
  import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
6
6
  import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
7
7
  import { useLockBodyScroll } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
8
+ import { useResizeObserver } from "../../hooks/useResizeObserver/useResizeObserver.js";
8
9
  import { Button } from "../Button/Button.js";
9
10
  import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
11
+ import { Loader } from "../Loader/Loader.js";
10
12
  import { Portal } from "../Portal/Portal.js";
11
- import '../../assets/Drawer.css';const drawer = "_drawer_geqni_3";
12
- const content = "_content_geqni_17";
13
- const header = "_header_geqni_31";
14
- const title = "_title_geqni_39";
15
- const space = "_space_geqni_53";
16
- const inner = "_inner_geqni_64";
17
- const button = "_button_geqni_67";
18
- const footer = "_footer_geqni_72";
19
- const left = "_left_geqni_85";
20
- const right = "_right_geqni_89";
21
- const full = "_full_geqni_93";
22
- const bottom = "_bottom_geqni_103";
23
- const opened = "_opened_geqni_112";
24
- const overlay = "_overlay_geqni_168";
13
+ import '../../assets/Drawer.css';const drawer = "_drawer_1y1lk_3";
14
+ const content = "_content_1y1lk_27";
15
+ const header = "_header_1y1lk_45";
16
+ const title = "_title_1y1lk_59";
17
+ const space = "_space_1y1lk_73";
18
+ const inner = "_inner_1y1lk_84";
19
+ const button = "_button_1y1lk_87";
20
+ const footer = "_footer_1y1lk_92";
21
+ const left = "_left_1y1lk_105";
22
+ const right = "_right_1y1lk_109";
23
+ const full = "_full_1y1lk_113";
24
+ const bottom = "_bottom_1y1lk_123";
25
+ const opened = "_opened_1y1lk_139";
26
+ const overlay = "_overlay_1y1lk_195";
25
27
  const cls = {
26
28
  drawer,
27
29
  content,
30
+ "is-loading": "_is-loading_1y1lk_41",
28
31
  header,
32
+ "sticky-header": "_sticky-header_1y1lk_53",
29
33
  title,
30
34
  space,
31
35
  inner,
32
36
  button,
33
37
  footer,
34
- "footer-button": "_footer-button_geqni_81",
38
+ "footer-button": "_footer-button_1y1lk_101",
35
39
  left,
36
40
  right,
37
41
  full,
38
42
  bottom,
43
+ "full-bottom-height": "_full-bottom-height_1y1lk_133",
39
44
  opened,
40
- "is-closing": "_is-closing_geqni_131",
45
+ "is-closing": "_is-closing_1y1lk_158",
41
46
  overlay
42
47
  };
43
48
  const ANIMATION_DELAY = 300;
@@ -46,9 +51,11 @@ const Drawer = ({
46
51
  onClose,
47
52
  title: title2,
48
53
  className,
54
+ isLoading = false,
55
+ stickyHeader,
56
+ fullBottomHeight = false,
49
57
  position = EDrawerPosition.RIGHT,
50
58
  paddingRight = 8,
51
- additionalHeight = 0,
52
59
  footer: footer2,
53
60
  children
54
61
  }) => {
@@ -56,9 +63,10 @@ const Drawer = ({
56
63
  const [isMounted, setIsMounted] = useState(false);
57
64
  const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
58
65
  const timerRef = useRef();
59
- const contentRef = useRef(null);
60
- const isBottomPosition = position === EDrawerPosition.BOTTOM;
61
66
  const isMobile = useMediaQuery(EMediaQuery.XS1);
67
+ const { ref } = useResizeObserver({
68
+ enabled: position === EDrawerPosition.BOTTOM
69
+ });
62
70
  useLockBodyScroll({
63
71
  on: isBodyScrollLocked,
64
72
  paddingRight
@@ -95,7 +103,9 @@ const Drawer = ({
95
103
  }, [isOpen, handleKeyDown]);
96
104
  const mods = {
97
105
  [cls.opened]: isMounted,
98
- [cls["is-closing"]]: isClosing
106
+ [cls["is-closing"]]: isClosing,
107
+ [cls["full-bottom-height"]]: fullBottomHeight,
108
+ [cls["is-loading"]]: isLoading
99
109
  };
100
110
  if (!isOpen) {
101
111
  return null;
@@ -106,37 +116,51 @@ const Drawer = ({
106
116
  {
107
117
  "aria-hidden": !isOpen,
108
118
  role: "dialog",
109
- style: {
110
- minHeight: isBottomPosition && contentRef.current ? contentRef.current.offsetHeight + additionalHeight : void 0
111
- },
112
119
  className: classNames(cls.drawer, cls[position], mods, className),
113
- children: /* @__PURE__ */ jsxs("section", { className: classNames(cls.content, cls[position]), children: [
114
- /* @__PURE__ */ jsxs("header", { className: cls.header, children: [
115
- /* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
116
- /* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
117
- Button,
118
- {
119
- variant: EButtonVariantDefault.SecondaryWhite,
120
- isIconButton: true,
121
- size: isMobile ? EButtonSize.S : EButtonSize.M,
122
- iconName: "Close16px",
123
- onClick: handleClose,
124
- className: cls.button
125
- }
126
- ) })
127
- ] }),
128
- /* @__PURE__ */ jsx("div", { ref: contentRef, className: cls.inner, children }),
129
- /* @__PURE__ */ jsx("footer", { className: cls.footer, children: typeof footer2 === "function" ? footer2({ handleClose }) : footer2 || /* @__PURE__ */ jsx(
130
- Button,
131
- {
132
- size: isMobile ? EButtonSize.M : EButtonSize.XXL,
133
- full: isMobile,
134
- onClick: handleClose,
135
- className: cls["footer-button"],
136
- children: "Закрыть"
137
- }
138
- ) })
139
- ] })
120
+ children: /* @__PURE__ */ jsx(
121
+ "section",
122
+ {
123
+ ref,
124
+ className: classNames(cls.content, cls[position], {
125
+ [cls["is-loading"]]: Boolean(isLoading)
126
+ }),
127
+ children: isLoading ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
128
+ /* @__PURE__ */ jsxs(
129
+ "header",
130
+ {
131
+ className: classNames(cls.header, {
132
+ [cls["sticky-header"]]: stickyHeader
133
+ }),
134
+ children: [
135
+ /* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
136
+ /* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
137
+ Button,
138
+ {
139
+ variant: EButtonVariantDefault.SecondaryWhite,
140
+ isIconButton: true,
141
+ size: isMobile ? EButtonSize.S : EButtonSize.M,
142
+ iconName: "Close16px",
143
+ onClick: handleClose,
144
+ className: cls.button
145
+ }
146
+ ) })
147
+ ]
148
+ }
149
+ ),
150
+ /* @__PURE__ */ jsx("div", { className: cls.inner, children }),
151
+ /* @__PURE__ */ jsx("footer", { className: cls.footer, children: typeof footer2 === "function" ? footer2({ handleClose }) : footer2 || /* @__PURE__ */ jsx(
152
+ Button,
153
+ {
154
+ size: isMobile ? EButtonSize.M : EButtonSize.XXL,
155
+ full: isMobile,
156
+ onClick: handleClose,
157
+ className: cls["footer-button"],
158
+ children: "Закрыть"
159
+ }
160
+ ) })
161
+ ] })
162
+ }
163
+ )
140
164
  }
141
165
  ),
142
166
  /* @__PURE__ */ jsx("div", { className: classNames(cls.overlay, mods), onClick: handleClose })
@@ -7,18 +7,18 @@ import { Icon } from "../../icons/Icon.js";
7
7
  import { Button } from "../Button/Button.js";
8
8
  import { c as cls } from "../../Input-6mudFqTb.js";
9
9
  import { EInputVariant } from "../Input/constants.js";
10
- import '../../assets/TextArea.css';const textarea = "_textarea_mbbjz_2";
11
- const label = "_label_mbbjz_11";
12
- const s = "_s_mbbjz_35";
13
- const m = "_m_mbbjz_43";
14
- const l = "_l_mbbjz_11";
10
+ import '../../assets/TextArea.css';const textarea = "_textarea_191db_2";
11
+ const label = "_label_191db_11";
12
+ const s = "_s_191db_36";
13
+ const m = "_m_191db_44";
14
+ const l = "_l_191db_11";
15
15
  const textareaCls = {
16
- "textarea-wrapper": "_textarea-wrapper_mbbjz_2",
16
+ "textarea-wrapper": "_textarea-wrapper_191db_2",
17
17
  textarea,
18
- "has-label": "_has-label_mbbjz_8",
18
+ "has-label": "_has-label_191db_8",
19
19
  label,
20
- "has-left-slot": "_has-left-slot_mbbjz_24",
21
- "active-label": "_active-label_mbbjz_27",
20
+ "has-left-slot": "_has-left-slot_191db_25",
21
+ "active-label": "_active-label_191db_28",
22
22
  s,
23
23
  m,
24
24
  l
@@ -23,7 +23,7 @@ const MIME = {
23
23
  };
24
24
  const filesTyps = ["jpeg", "jpg", "png", "tiff", "gif"];
25
25
  const generateId = (min, max) => {
26
- return Math.round(Math.random() * (max - min) + min);
26
+ return Math.random() * (max - min) + min;
27
27
  };
28
28
  const Uploader = forwardRef(
29
29
  (props, ref) => {
@@ -1,4 +1,4 @@
1
- export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline, type TButtonProps } from './Button';
1
+ export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline, EButtonVariantBorderless, type TButtonProps } from './Button';
2
2
  export { Input, EInputSize, EInputVariant } from './Input';
3
3
  export type { TInputProps, TSize, TVariant } from './Input';
4
4
  export { TextArea } from './TextArea';
@@ -1,5 +1,5 @@
1
1
  import { Button } from "./Button/Button.js";
2
- import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
2
+ import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
3
3
  import { I } from "../Input-6mudFqTb.js";
4
4
  import { EInputSize, EInputVariant } from "./Input/constants.js";
5
5
  import { TextArea } from "./TextArea/TextArea.js";
@@ -53,6 +53,7 @@ export {
53
53
  EAccordionSize,
54
54
  EButtonForm,
55
55
  EButtonSize,
56
+ EButtonVariantBorderless,
56
57
  EButtonVariantDefault,
57
58
  EButtonVariantOutline,
58
59
  EButtonVariantRound,
@@ -4,3 +4,4 @@ export { useInterval } from './useInterval';
4
4
  export { useTimer } from './useTimer';
5
5
  export { useCopyToClipboard } from './useCopyToClipboard';
6
6
  export { useMergeRefs } from './useMergeRefs';
7
+ export { useResizeObserver } from './useResizeObserver';