mimir-ui-kit 1.21.1 → 1.21.3
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.
- package/dist/assets/Drawer.css +1 -1
- package/dist/components/Drawer/Drawer.d.ts +1 -5
- package/dist/components/Drawer/Drawer.js +27 -29
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.js +2 -0
- package/dist/hooks/useResizeObserver/getElement.d.ts +4 -0
- package/dist/hooks/useResizeObserver/getElement.js +18 -0
- package/dist/hooks/useResizeObserver/index.d.ts +1 -0
- package/dist/hooks/useResizeObserver/index.js +4 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.d.ts +17 -0
- package/dist/hooks/useResizeObserver/useResizeObserver.js +49 -0
- package/dist/index.js +2 -0
- package/package.json +1 -1
package/dist/assets/Drawer.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._drawer_1y1lk_3{--drawer-width: 808px;--drawer-z-index: 10000;position:fixed;z-index:10000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_1y1lk_3::-webkit-scrollbar{width:3px}._drawer_1y1lk_3::-webkit-scrollbar-thumb{background-color:var(--black-80);border-radius:2px}._drawer_1y1lk_3::-webkit-scrollbar-track{background-color:var(--white)}._drawer_1y1lk_3 ._content_1y1lk_27{position:relative;display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_1y1lk_3 ._content_1y1lk_27{--drawer-width: 100%;padding:var(--space-m)}}._drawer_1y1lk_3 ._content_1y1lk_27._is-loading_1y1lk_41{align-items:center;justify-content:center}._drawer_1y1lk_3 ._header_1y1lk_45{display:flex;gap:var(--space-xs);min-height:68px}._drawer_1y1lk_3 ._header_1y1lk_45:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_1y1lk_3 ._header_1y1lk_45._sticky-header_1y1lk_53{position:-webkit-sticky;position:sticky;top:0;left:0;background-color:var(--black-5)}._drawer_1y1lk_3 ._header_1y1lk_45 ._title_1y1lk_59{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_1y1lk_3 ._header_1y1lk_45 ._title_1y1lk_59{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_1y1lk_3 ._header_1y1lk_45 ._space_1y1lk_73{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_1y1lk_3 ._header_1y1lk_45{min-height:55px}._drawer_1y1lk_3 ._header_1y1lk_45:not(:last-child){margin-bottom:var(--space-m)}}._drawer_1y1lk_3 ._inner_1y1lk_84{flex:1}._drawer_1y1lk_3 ._button_1y1lk_87{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_1y1lk_3 ._footer_1y1lk_92{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_1y1lk_3 ._footer_1y1lk_92{padding-top:var(--space-m)}}._drawer_1y1lk_3 ._footer-button_1y1lk_101{display:block;margin-left:auto}._drawer_1y1lk_3._left_1y1lk_105{top:0;left:-100%}._drawer_1y1lk_3._right_1y1lk_109{top:0;right:-100%}._drawer_1y1lk_3._full_1y1lk_113{top:0;right:0;bottom:0;left:0;width:100%;height:100%;max-height:100vh;border-radius:0;transform:scale(.95);opacity:0;transition:transform .3s ease-in-out,opacity .3s ease-in-out}._drawer_1y1lk_3._bottom_1y1lk_123{right:50%;bottom:-100%;left:50%;height:-webkit-max-content;height:-moz-max-content;height:max-content;max-height:calc(100% - var(--space-xs));border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_1y1lk_3._bottom_1y1lk_123._full-bottom-height_1y1lk_133{height:calc(100% - var(--space-xs))}._drawer_1y1lk_3._bottom_1y1lk_123._is-loading_1y1lk_41{height:50vh}._drawer_1y1lk_3._opened_1y1lk_139{transition:all .3s ease;pointer-events:auto}._drawer_1y1lk_3._opened_1y1lk_139._left_1y1lk_105{left:0%;transition:left .3s ease}._drawer_1y1lk_3._opened_1y1lk_139._right_1y1lk_109{right:0%;transition:right .3s ease}._drawer_1y1lk_3._opened_1y1lk_139._bottom_1y1lk_123{bottom:0%}._drawer_1y1lk_3._opened_1y1lk_139._full_1y1lk_113{transform:scale(1);opacity:1}._drawer_1y1lk_3._is-closing_1y1lk_158._left_1y1lk_105{left:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._right_1y1lk_109{right:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._bottom_1y1lk_123{bottom:-100%}._drawer_1y1lk_3._is-closing_1y1lk_158._full_1y1lk_113{transform:scale(.95);opacity:0}@media (max-width: 1440px){._drawer_1y1lk_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_1y1lk_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_1y1lk_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_1y1lk_3{--drawer-width: 100%}._drawer_1y1lk_3._bottom_1y1lk_123{--drawer-width: calc(100% - var(--space-xs))}}._overlay_1y1lk_195{--overlay-z-index: 9990;position:fixed;top:0;left:0;z-index:9990;z-index:var(--overlay-z-index);width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_1y1lk_195._opened_1y1lk_139{opacity:1;transition:all .3s ease}._overlay_1y1lk_195._is-closing_1y1lk_158{opacity:0;transition:all .3s ease}
|
|
@@ -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
|
*/
|
|
@@ -52,5 +48,5 @@ type TProps = {
|
|
|
52
48
|
/**
|
|
53
49
|
* Компонент шторки, который может выезжать слева, справа или внизу.
|
|
54
50
|
*/
|
|
55
|
-
export declare const Drawer: ({ isOpen, onClose, title, className, isLoading, stickyHeader, fullBottomHeight, position, paddingRight,
|
|
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;
|
|
56
52
|
export {};
|
|
@@ -5,43 +5,44 @@ 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";
|
|
10
11
|
import { Loader } from "../Loader/Loader.js";
|
|
11
12
|
import { Portal } from "../Portal/Portal.js";
|
|
12
|
-
import '../../assets/Drawer.css';const drawer = "
|
|
13
|
-
const content = "
|
|
14
|
-
const header = "
|
|
15
|
-
const title = "
|
|
16
|
-
const space = "
|
|
17
|
-
const inner = "
|
|
18
|
-
const button = "
|
|
19
|
-
const footer = "
|
|
20
|
-
const left = "
|
|
21
|
-
const right = "
|
|
22
|
-
const full = "
|
|
23
|
-
const bottom = "
|
|
24
|
-
const opened = "
|
|
25
|
-
const overlay = "
|
|
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";
|
|
26
27
|
const cls = {
|
|
27
28
|
drawer,
|
|
28
29
|
content,
|
|
29
|
-
"is-loading": "_is-
|
|
30
|
+
"is-loading": "_is-loading_1y1lk_41",
|
|
30
31
|
header,
|
|
31
|
-
"sticky-header": "_sticky-
|
|
32
|
+
"sticky-header": "_sticky-header_1y1lk_53",
|
|
32
33
|
title,
|
|
33
34
|
space,
|
|
34
35
|
inner,
|
|
35
36
|
button,
|
|
36
37
|
footer,
|
|
37
|
-
"footer-button": "_footer-
|
|
38
|
+
"footer-button": "_footer-button_1y1lk_101",
|
|
38
39
|
left,
|
|
39
40
|
right,
|
|
40
41
|
full,
|
|
41
42
|
bottom,
|
|
42
|
-
"full-bottom-height": "_full-bottom-
|
|
43
|
+
"full-bottom-height": "_full-bottom-height_1y1lk_133",
|
|
43
44
|
opened,
|
|
44
|
-
"is-closing": "_is-
|
|
45
|
+
"is-closing": "_is-closing_1y1lk_158",
|
|
45
46
|
overlay
|
|
46
47
|
};
|
|
47
48
|
const ANIMATION_DELAY = 300;
|
|
@@ -50,12 +51,11 @@ const Drawer = ({
|
|
|
50
51
|
onClose,
|
|
51
52
|
title: title2,
|
|
52
53
|
className,
|
|
53
|
-
isLoading,
|
|
54
|
+
isLoading = false,
|
|
54
55
|
stickyHeader,
|
|
55
56
|
fullBottomHeight = false,
|
|
56
57
|
position = EDrawerPosition.RIGHT,
|
|
57
58
|
paddingRight = 8,
|
|
58
|
-
additionalHeight = 0,
|
|
59
59
|
footer: footer2,
|
|
60
60
|
children
|
|
61
61
|
}) => {
|
|
@@ -63,9 +63,10 @@ const Drawer = ({
|
|
|
63
63
|
const [isMounted, setIsMounted] = useState(false);
|
|
64
64
|
const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
|
|
65
65
|
const timerRef = useRef();
|
|
66
|
-
const contentRef = useRef(null);
|
|
67
|
-
const isBottomPosition = position === EDrawerPosition.BOTTOM;
|
|
68
66
|
const isMobile = useMediaQuery(EMediaQuery.XS1);
|
|
67
|
+
const { ref } = useResizeObserver({
|
|
68
|
+
enabled: position === EDrawerPosition.BOTTOM
|
|
69
|
+
});
|
|
69
70
|
useLockBodyScroll({
|
|
70
71
|
on: isBodyScrollLocked,
|
|
71
72
|
paddingRight
|
|
@@ -103,26 +104,23 @@ const Drawer = ({
|
|
|
103
104
|
const mods = {
|
|
104
105
|
[cls.opened]: isMounted,
|
|
105
106
|
[cls["is-closing"]]: isClosing,
|
|
106
|
-
[cls["full-bottom-height"]]: fullBottomHeight
|
|
107
|
+
[cls["full-bottom-height"]]: fullBottomHeight,
|
|
108
|
+
[cls["is-loading"]]: isLoading
|
|
107
109
|
};
|
|
108
110
|
if (!isOpen) {
|
|
109
111
|
return null;
|
|
110
112
|
}
|
|
111
|
-
const bottomPositionHeight = isBottomPosition && contentRef.current && !fullBottomHeight ? contentRef.current.offsetHeight + additionalHeight : void 0;
|
|
112
113
|
return /* @__PURE__ */ jsxs(Portal, { children: [
|
|
113
114
|
/* @__PURE__ */ jsx(
|
|
114
115
|
"div",
|
|
115
116
|
{
|
|
116
117
|
"aria-hidden": !isOpen,
|
|
117
118
|
role: "dialog",
|
|
118
|
-
style: {
|
|
119
|
-
height: bottomPositionHeight
|
|
120
|
-
},
|
|
121
119
|
className: classNames(cls.drawer, cls[position], mods, className),
|
|
122
120
|
children: /* @__PURE__ */ jsx(
|
|
123
121
|
"section",
|
|
124
122
|
{
|
|
125
|
-
ref
|
|
123
|
+
ref,
|
|
126
124
|
className: classNames(cls.content, cls[position], {
|
|
127
125
|
[cls["is-loading"]]: Boolean(isLoading)
|
|
128
126
|
}),
|
package/dist/hooks/index.d.ts
CHANGED
package/dist/hooks/index.js
CHANGED
|
@@ -5,6 +5,7 @@ import { useInterval } from "./useInterval/useInterval.js";
|
|
|
5
5
|
import { useTimer } from "./useTimer/index.js";
|
|
6
6
|
import { useCopyToClipboard } from "./useCopyToClipboard/useCopyToClipboard.js";
|
|
7
7
|
import { useMergeRefs } from "./useMergeRefs/useMergeRefs.js";
|
|
8
|
+
import { useResizeObserver } from "./useResizeObserver/useResizeObserver.js";
|
|
8
9
|
export {
|
|
9
10
|
EMediaQuery,
|
|
10
11
|
EMinMediaQuery,
|
|
@@ -13,5 +14,6 @@ export {
|
|
|
13
14
|
useLockBodyScroll,
|
|
14
15
|
useMediaQuery,
|
|
15
16
|
useMergeRefs,
|
|
17
|
+
useResizeObserver,
|
|
16
18
|
useTimer
|
|
17
19
|
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
export type GetElementTarget = RefObject<Element | null | undefined> | (() => Element) | Element | Window | Document;
|
|
4
|
+
export declare const getElement: <Target extends GetElementTarget>(target: Target) => Element | (Target & Document) | (Target & Window) | null | undefined;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
const getElement = (target) => {
|
|
2
|
+
if (typeof target === "function") {
|
|
3
|
+
return target();
|
|
4
|
+
}
|
|
5
|
+
if (target instanceof Document) {
|
|
6
|
+
return target;
|
|
7
|
+
}
|
|
8
|
+
if (target instanceof Window) {
|
|
9
|
+
return target;
|
|
10
|
+
}
|
|
11
|
+
if (target instanceof Element) {
|
|
12
|
+
return target;
|
|
13
|
+
}
|
|
14
|
+
return target.current;
|
|
15
|
+
};
|
|
16
|
+
export {
|
|
17
|
+
getElement
|
|
18
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { useResizeObserver } from './useResizeObserver';
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
export type UseResizeObserverTarget = RefObject<Element | null | undefined> | (() => Element) | Element;
|
|
4
|
+
export interface UseResizeObserverOptions extends ResizeObserverOptions {
|
|
5
|
+
enabled?: boolean;
|
|
6
|
+
onChange?: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
|
|
7
|
+
}
|
|
8
|
+
export interface UseResizeObserverReturn {
|
|
9
|
+
entries: ResizeObserverEntry[];
|
|
10
|
+
}
|
|
11
|
+
export interface UseResizeObserver {
|
|
12
|
+
<Target extends UseResizeObserverTarget | UseResizeObserverTarget[]>(target: Target, options?: UseResizeObserverOptions): UseResizeObserverReturn;
|
|
13
|
+
<Target extends UseResizeObserverTarget | UseResizeObserverTarget[]>(options?: UseResizeObserverOptions, target?: never): UseResizeObserverReturn & {
|
|
14
|
+
ref: (node: Target) => void;
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
export declare const useResizeObserver: UseResizeObserver;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { useState, useRef, useEffect } from "react";
|
|
2
|
+
import { getElement } from "./getElement.js";
|
|
3
|
+
const useResizeObserver = (...params) => {
|
|
4
|
+
const target = typeof params[0] === "object" && !("current" in params[0]) ? void 0 : params[0];
|
|
5
|
+
const options = target ? params[1] : params[0];
|
|
6
|
+
const enabled = (options == null ? void 0 : options.enabled) ?? true;
|
|
7
|
+
const [entries, setEntries] = useState([]);
|
|
8
|
+
const [internalRef, setInternalRef] = useState();
|
|
9
|
+
const internalOnChangeRef = useRef();
|
|
10
|
+
internalOnChangeRef.current = options == null ? void 0 : options.onChange;
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
if (!enabled && !target && !internalRef) return;
|
|
13
|
+
if (Array.isArray(target)) {
|
|
14
|
+
if (!target.length) return;
|
|
15
|
+
const observer2 = new ResizeObserver((entries2) => {
|
|
16
|
+
var _a;
|
|
17
|
+
setEntries(entries2);
|
|
18
|
+
(_a = internalOnChangeRef.current) == null ? void 0 : _a.call(internalOnChangeRef, entries2, observer2);
|
|
19
|
+
});
|
|
20
|
+
target.forEach((target2) => {
|
|
21
|
+
const element2 = getElement(target2);
|
|
22
|
+
if (!element2) return;
|
|
23
|
+
observer2.observe(element2, options);
|
|
24
|
+
});
|
|
25
|
+
return () => {
|
|
26
|
+
observer2.disconnect();
|
|
27
|
+
};
|
|
28
|
+
}
|
|
29
|
+
const element = target ? getElement(target) : internalRef;
|
|
30
|
+
if (!element) return;
|
|
31
|
+
const observer = new ResizeObserver((entries2) => {
|
|
32
|
+
var _a;
|
|
33
|
+
setEntries(entries2);
|
|
34
|
+
(_a = internalOnChangeRef.current) == null ? void 0 : _a.call(internalOnChangeRef, entries2, observer);
|
|
35
|
+
});
|
|
36
|
+
observer.observe(element, options);
|
|
37
|
+
return () => {
|
|
38
|
+
observer.disconnect();
|
|
39
|
+
};
|
|
40
|
+
}, [internalRef, target, options == null ? void 0 : options.box, enabled]);
|
|
41
|
+
if (target) return { entries };
|
|
42
|
+
return {
|
|
43
|
+
ref: setInternalRef,
|
|
44
|
+
entries
|
|
45
|
+
};
|
|
46
|
+
};
|
|
47
|
+
export {
|
|
48
|
+
useResizeObserver
|
|
49
|
+
};
|
package/dist/index.js
CHANGED
|
@@ -50,6 +50,7 @@ import { useInterval } from "./hooks/useInterval/useInterval.js";
|
|
|
50
50
|
import { useTimer } from "./hooks/useTimer/index.js";
|
|
51
51
|
import { useCopyToClipboard } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
|
|
52
52
|
import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
|
|
53
|
+
import { useResizeObserver } from "./hooks/useResizeObserver/useResizeObserver.js";
|
|
53
54
|
import { Icon } from "./icons/Icon.js";
|
|
54
55
|
import { formating } from "./utils/index.js";
|
|
55
56
|
import './assets/index.css';export {
|
|
@@ -118,6 +119,7 @@ import './assets/index.css';export {
|
|
|
118
119
|
useLockBodyScroll,
|
|
119
120
|
useMediaQuery,
|
|
120
121
|
useMergeRefs,
|
|
122
|
+
useResizeObserver,
|
|
121
123
|
useTimer,
|
|
122
124
|
useToast
|
|
123
125
|
};
|