@diplodoc/components 4.14.1 → 4.15.0

package/build/cjs/hooks/useVirtualElementRef.js

@@ -66,6 +66,29 @@ var useVirtualElementRef = (element) => {
       }
     });
   }, [top, left, right, bottom, height, width, x, y]);
+  const update = (0, import_react.useCallback)(
+    ({ top: top2, left: left2, right: right2, bottom: bottom2, height: height2, width: width2 }) => {
+      setTop(top2);
+      setLeft(left2);
+      setRight(right2);
+      setBottom(bottom2);
+      setHeight(height2);
+      setWidth(width2);
+    },
+    [setTop, setLeft, setRight, setBottom, setHeight, setWidth]
+  );
+  const watch = (0, import_react.useCallback)(() => {
+    var _a;
+    if (element) {
+      rect.current = element.getBoundingClientRect();
+      (_a = observer.current) == null ? void 0 : _a.observe(element);
+      update(rect.current);
+    }
+    return () => {
+      var _a2;
+      (_a2 = observer.current) == null ? void 0 : _a2.disconnect();
+    };
+  }, [element, observer, update]);
   (0, import_react.useEffect)(() => {
     const _observer = observer.current = new ResizeObserver((entries) => {
       if (!rect.current) {
@@ -75,33 +98,28 @@ var useVirtualElementRef = (element) => {
       for (const entry of entries) {
         const dw = width2 - entry.contentRect.width;
         const dh = height2 - entry.contentRect.height;
-        setWidth(entry.contentRect.width);
-        setHeight(entry.contentRect.height);
-        setTop(dh + top2 + entry.contentRect.top);
-        setLeft(dw + left2 + entry.contentRect.left);
-        setRight(dw + left2 + entry.contentRect.right);
-        setBottom(dh + top2 + entry.contentRect.bottom);
+        update({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height,
+          top: dh + top2 + entry.contentRect.top,
+          left: dw + left2 + entry.contentRect.left,
+          right: dw + left2 + entry.contentRect.right,
+          bottom: dh + top2 + entry.contentRect.bottom,
+          x,
+          y
+        });
       }
     });
     return () => {
       _observer.disconnect();
     };
-  }, [rect]);
+  }, [rect, observer, update]);
   (0, import_react.useEffect)(() => {
-    var _a, _b;
     if (element) {
       rect.current = element.getBoundingClientRect();
-      (_a = observer.current) == null ? void 0 : _a.observe(element);
-      return () => {
-        var _a2;
-        (_a2 = observer.current) == null ? void 0 : _a2.unobserve(element);
-      };
-    } else {
-      (_b = observer.current) == null ? void 0 : _b.disconnect();
-      return () => {
-      };
+      update(rect.current);
     }
-  }, [element]);
-  return box;
+  }, [element, update]);
+  return [box, watch];
 };
 //# sourceMappingURL=useVirtualElementRef.js.map

package/build/cjs/hooks/useVirtualElementRef.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useVirtualElementRef.ts"],
-  "sourcesContent": ["import {useEffect, useMemo, useRef, useState} from 'react';\n\nexport const useVirtualElementRef = (element: HTMLElement | null) => {\n    const observer = useRef<ResizeObserver>();\n    const rect = useRef<DOMRect>();\n\n    const x = 0;\n    const y = 0;\n\n    const [width, setWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n    const [top, setTop] = useState(0);\n    const [left, setLeft] = useState(0);\n    const [right, setRight] = useState(0);\n    const [bottom, setBottom] = useState(0);\n    const box = useMemo(() => {\n        const rect = {top, left, right, bottom, height, width, x, y};\n        return {\n            ...rect,\n            current: {\n                getBoundingClientRect() {\n                    return {\n                        ...rect,\n                        toJSON() {\n                            return rect;\n                        },\n                    };\n                },\n            },\n        };\n    }, [top, left, right, bottom, height, width, x, y]);\n\n    useEffect(() => {\n        const _observer = (observer.current = new ResizeObserver((entries) => {\n            if (!rect.current) {\n                return;\n            }\n\n            const {top, left, width, height} = rect.current;\n\n            for (const entry of entries) {\n                const dw = width - entry.contentRect.width;\n                const dh = height - entry.contentRect.height;\n\n                setWidth(entry.contentRect.width);\n                setHeight(entry.contentRect.height);\n                setTop(dh + top + entry.contentRect.top);\n                setLeft(dw + left + entry.contentRect.left);\n                setRight(dw + left + entry.contentRect.right);\n                setBottom(dh + top + entry.contentRect.bottom);\n            }\n        }));\n\n        return () => {\n            _observer.disconnect();\n        };\n    }, [rect]);\n\n    useEffect(() => {\n        if (element) {\n            rect.current = element.getBoundingClientRect();\n            observer.current?.observe(element);\n\n            return () => {\n                observer.current?.unobserve(element);\n            };\n        } else {\n            observer.current?.disconnect();\n\n            return () => {};\n        }\n    }, [element]);\n\n    return box;\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAmD;AAE5C,IAAM,uBAAuB,CAAC,YAAgC;AACjE,QAAM,eAAW,qBAAuB;AACxC,QAAM,WAAO,qBAAgB;AAE7B,QAAM,IAAI;AACV,QAAM,IAAI;AAEV,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,CAAC;AACtC,QAAM,CAAC,KAAK,MAAM,QAAI,uBAAS,CAAC;AAChC,QAAM,CAAC,MAAM,OAAO,QAAI,uBAAS,CAAC;AAClC,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,CAAC;AACpC,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,CAAC;AACtC,QAAM,UAAM,sBAAQ,MAAM;AACtB,UAAMA,QAAO,EAAC,KAAK,MAAM,OAAO,QAAQ,QAAQ,OAAO,GAAG,EAAC;AAC3D,WAAO,iCACAA,QADA;AAAA,MAEH,SAAS;AAAA,QACL,wBAAwB;AACpB,iBAAO,iCACAA,QADA;AAAA,YAEH,SAAS;AACL,qBAAOA;AAAA,YACX;AAAA,UACJ;AAAA,QACJ;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,KAAK,MAAM,OAAO,QAAQ,QAAQ,OAAO,GAAG,CAAC,CAAC;AAElD,8BAAU,MAAM;AACZ,UAAM,YAAa,SAAS,UAAU,IAAI,eAAe,CAAC,YAAY;AAClE,UAAI,CAAC,KAAK,SAAS;AACf;AAAA,MACJ;AAEA,YAAM,EAAC,KAAAC,MAAK,MAAAC,OAAM,OAAAC,QAAO,QAAAC,QAAM,IAAI,KAAK;AAExC,iBAAW,SAAS,SAAS;AACzB,cAAM,KAAKD,SAAQ,MAAM,YAAY;AACrC,cAAM,KAAKC,UAAS,MAAM,YAAY;AAEtC,iBAAS,MAAM,YAAY,KAAK;AAChC,kBAAU,MAAM,YAAY,MAAM;AAClC,eAAO,KAAKH,OAAM,MAAM,YAAY,GAAG;AACvC,gBAAQ,KAAKC,QAAO,MAAM,YAAY,IAAI;AAC1C,iBAAS,KAAKA,QAAO,MAAM,YAAY,KAAK;AAC5C,kBAAU,KAAKD,OAAM,MAAM,YAAY,MAAM;AAAA,MACjD;AAAA,IACJ,CAAC;AAED,WAAO,MAAM;AACT,gBAAU,WAAW;AAAA,IACzB;AAAA,EACJ,GAAG,CAAC,IAAI,CAAC;AAET,8BAAU,MAAM;AA1DpB;AA2DQ,QAAI,SAAS;AACT,WAAK,UAAU,QAAQ,sBAAsB;AAC7C,qBAAS,YAAT,mBAAkB,QAAQ;AAE1B,aAAO,MAAM;AA/DzB,YAAAI;AAgEgB,SAAAA,MAAA,SAAS,YAAT,gBAAAA,IAAkB,UAAU;AAAA,MAChC;AAAA,IACJ,OAAO;AACH,qBAAS,YAAT,mBAAkB;AAElB,aAAO,MAAM;AAAA,MAAC;AAAA,IAClB;AAAA,EACJ,GAAG,CAAC,OAAO,CAAC;AAEZ,SAAO;AACX;",
-  "names": ["rect", "top", "left", "width", "height", "_a"]
+  "sourcesContent": ["import {useCallback, useEffect, useMemo, useRef, useState} from 'react';\n\ntype DOMRectLike = Omit<DOMRect, 'toJSON'>;\n\nexport const useVirtualElementRef = (element: HTMLElement | null) => {\n    const observer = useRef<ResizeObserver>();\n    const rect = useRef<DOMRectLike>();\n\n    const x = 0;\n    const y = 0;\n\n    const [width, setWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n    const [top, setTop] = useState(0);\n    const [left, setLeft] = useState(0);\n    const [right, setRight] = useState(0);\n    const [bottom, setBottom] = useState(0);\n    const box = useMemo(() => {\n        const rect = {top, left, right, bottom, height, width, x, y};\n        return {\n            ...rect,\n            current: {\n                getBoundingClientRect() {\n                    return {\n                        ...rect,\n                        toJSON() {\n                            return rect;\n                        },\n                    };\n                },\n            },\n        };\n    }, [top, left, right, bottom, height, width, x, y]);\n\n    const update = useCallback(\n        ({top, left, right, bottom, height, width}: DOMRectLike) => {\n            setTop(top);\n            setLeft(left);\n            setRight(right);\n            setBottom(bottom);\n            setHeight(height);\n            setWidth(width);\n        },\n        [setTop, setLeft, setRight, setBottom, setHeight, setWidth],\n    );\n\n    const watch = useCallback(() => {\n        if (element) {\n            rect.current = element.getBoundingClientRect();\n            observer.current?.observe(element);\n            update(rect.current);\n        }\n\n        return () => {\n            observer.current?.disconnect();\n        };\n    }, [element, observer, update]);\n\n    useEffect(() => {\n        const _observer = (observer.current = new ResizeObserver((entries) => {\n            if (!rect.current) {\n                return;\n            }\n\n            const {top, left, width, height} = rect.current;\n\n            for (const entry of entries) {\n                const dw = width - entry.contentRect.width;\n                const dh = height - entry.contentRect.height;\n\n                update({\n                    width: entry.contentRect.width,\n                    height: entry.contentRect.height,\n                    top: dh + top + entry.contentRect.top,\n                    left: dw + left + entry.contentRect.left,\n                    right: dw + left + entry.contentRect.right,\n                    bottom: dh + top + entry.contentRect.bottom,\n                    x,\n                    y,\n                });\n            }\n        }));\n\n        return () => {\n            _observer.disconnect();\n        };\n    }, [rect, observer, update]);\n\n    useEffect(() => {\n        if (element) {\n            rect.current = element.getBoundingClientRect();\n            update(rect.current);\n        }\n    }, [element, update]);\n\n    return [box, watch] as const;\n};\n"],
+  "mappings": "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",
+  "names": ["rect", "top", "left", "right", "bottom", "height", "width", "_a"]
 }

package/build/cjs/i18n/index.d.ts

@@ -112,6 +112,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -244,6 +245,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -377,6 +379,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -513,6 +516,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -646,6 +650,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -782,6 +787,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -918,6 +924,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1051,6 +1058,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1187,6 +1195,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1320,6 +1329,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1453,6 +1463,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1586,6 +1597,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1722,6 +1734,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1855,6 +1868,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -1988,6 +2002,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;
@@ -2121,6 +2136,7 @@ declare const _default: {
         search: {
             search_placeholder: string;
             search_action: string;
+            search_close: string;
             "search_request-query": string;
             "search_not-found-title": string;
             "search_not-found-text": string;