matsuri-ui 9.7.2-alpha.0

package/dist/cjs/hooks/useMutationObserver.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMutationObserver = void 0;
+
+var _isBrowser = require("../isBrowser");
+
+var _react = require("react");
+
+const defaultConfig = {
+  childList: true
+};
+let animationFrameID = 0;
+
+const useMutationObserver = (element, config = defaultConfig) => {
+  const [entry, setEntry] = (0, _react.useState)();
+  (0, _react.useLayoutEffect)(() => {
+    if (!_isBrowser.isBrowser) return;
+    const mutationObserver = new MutationObserver(entries => {
+      if (!Array.isArray(entries)) {
+        return;
+      }
+
+      if (!entries.length) {
+        return;
+      }
+
+      animationFrameID = window.requestAnimationFrame(() => {
+        if (mutationObserver) {
+          setEntry(entries[0]);
+        }
+      });
+    });
+
+    if (element) {
+      mutationObserver.observe(element, config);
+    }
+
+    return () => {
+      if (element) {
+        mutationObserver.disconnect();
+      }
+
+      window.cancelAnimationFrame(animationFrameID);
+    };
+  }, [config, element]);
+  return entry;
+};
+
+exports.useMutationObserver = useMutationObserver;
+//# sourceMappingURL=useMutationObserver.js.map

package/dist/cjs/hooks/useMutationObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useMutationObserver.ts"],"names":["defaultConfig","childList","animationFrameID","useMutationObserver","element","config","entry","setEntry","isBrowser","mutationObserver","MutationObserver","entries","Array","isArray","length","window","requestAnimationFrame","observe","disconnect","cancelAnimationFrame"],"mappings":";;;;;;;AAAA;;AACA;;AAEA,MAAMA,aAAa,GAAG;AAClBC,EAAAA,SAAS,EAAE;AADO,CAAtB;AAIA,IAAIC,gBAAgB,GAAG,CAAvB;;AACO,MAAMC,mBAAmB,GAAG,CAC/BC,OAD+B,EAE/BC,MAA4B,GAAGL,aAFA,KAGF;AAC7B,QAAM,CAACM,KAAD,EAAQC,QAAR,IAAoB,sBAA1B;AACA,8BAAgB,MAAM;AAClB,QAAI,CAACC,oBAAL,EAAgB;AAChB,UAAMC,gBAAgB,GAAG,IAAIC,gBAAJ,CAAsBC,OAAD,IAAa;AACvD,UAAI,CAACC,KAAK,CAACC,OAAN,CAAcF,OAAd,CAAL,EAA6B;AACzB;AACH;;AACD,UAAI,CAACA,OAAO,CAACG,MAAb,EAAqB;AACjB;AACH;;AACDZ,MAAAA,gBAAgB,GAAGa,MAAM,CAACC,qBAAP,CAA6B,MAAM;AAClD,YAAIP,gBAAJ,EAAsB;AAClBF,UAAAA,QAAQ,CAACI,OAAO,CAAC,CAAD,CAAR,CAAR;AACH;AACJ,OAJkB,CAAnB;AAKH,KAZwB,CAAzB;;AAaA,QAAIP,OAAJ,EAAa;AACTK,MAAAA,gBAAgB,CAACQ,OAAjB,CAAyBb,OAAzB,EAAkCC,MAAlC;AACH;;AACD,WAAO,MAAM;AACT,UAAID,OAAJ,EAAa;AACTK,QAAAA,gBAAgB,CAACS,UAAjB;AACH;;AACDH,MAAAA,MAAM,CAACI,oBAAP,CAA4BjB,gBAA5B;AACH,KALD;AAMH,GAxBD,EAwBG,CAACG,MAAD,EAASD,OAAT,CAxBH;AAyBA,SAAOE,KAAP;AACH,CA/BM","sourcesContent":["import { isBrowser } from \"../isBrowser\"\nimport { useLayoutEffect, useState } from \"react\"\n\nconst defaultConfig = {\n    childList: true\n}\n\nlet animationFrameID = 0\nexport const useMutationObserver = (\n    element: HTMLElement | Document | null,\n    config: MutationObserverInit = defaultConfig\n): MutationRecord | undefined => {\n    const [entry, setEntry] = useState<MutationRecord>()\n    useLayoutEffect(() => {\n        if (!isBrowser) return\n        const mutationObserver = new MutationObserver((entries) => {\n            if (!Array.isArray(entries)) {\n                return\n            }\n            if (!entries.length) {\n                return\n            }\n            animationFrameID = window.requestAnimationFrame(() => {\n                if (mutationObserver) {\n                    setEntry(entries[0])\n                }\n            })\n        })\n        if (element) {\n            mutationObserver.observe(element, config)\n        }\n        return () => {\n            if (element) {\n                mutationObserver.disconnect()\n            }\n            window.cancelAnimationFrame(animationFrameID)\n        }\n    }, [config, element])\n    return entry\n}\n"],"file":"useMutationObserver.js"}

package/dist/cjs/hooks/useOnClickOutside.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnClickOutside = void 0;
+
+var _react = require("react");
+
+const useOnClickOutside = (ref, handler) => {
+  (0, _react.useEffect)(() => {
+    const listener = event => {
+      if (handler) {
+        if (!ref.current || ref.current.contains(event.target)) {
+          return;
+        }
+
+        handler(event);
+      }
+    };
+
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [ref, handler]);
+};
+
+exports.useOnClickOutside = useOnClickOutside;
+//# sourceMappingURL=useOnClickOutside.js.map

package/dist/cjs/hooks/useOnClickOutside.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useOnClickOutside.ts"],"names":["useOnClickOutside","ref","handler","listener","event","current","contains","target","document","addEventListener","removeEventListener"],"mappings":";;;;;;;AAAA;;AACO,MAAMA,iBAAiB,GAAG,CAC7BC,GAD6B,EAE7BC,OAF6B,KAG5B;AACD,wBAAU,MAAM;AACZ,UAAMC,QAAQ,GAAIC,KAAD,IAAoC;AACjD,UAAIF,OAAJ,EAAa;AACT,YAAI,CAACD,GAAG,CAACI,OAAL,IAAgBJ,GAAG,CAACI,OAAJ,CAAYC,QAAZ,CAAqBF,KAAK,CAACG,MAA3B,CAApB,EAAgE;AAC5D;AACH;;AAEDL,QAAAA,OAAO,CAACE,KAAD,CAAP;AACH;AACJ,KARD;;AAUAI,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,WAA1B,EAAuCN,QAAvC;AACAK,IAAAA,QAAQ,CAACC,gBAAT,CAA0B,YAA1B,EAAwCN,QAAxC;AAEA,WAAO,MAAM;AACTK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,WAA7B,EAA0CP,QAA1C;AACAK,MAAAA,QAAQ,CAACE,mBAAT,CAA6B,YAA7B,EAA2CP,QAA3C;AACH,KAHD;AAIH,GAlBD,EAkBG,CAACF,GAAD,EAAMC,OAAN,CAlBH;AAmBH,CAvBM","sourcesContent":["import { useEffect } from \"react\"\nexport const useOnClickOutside = (\n    ref: React.RefObject<HTMLElement>,\n    handler?: (event: MouseEvent | TouchEvent) => void\n) => {\n    useEffect(() => {\n        const listener = (event: MouseEvent | TouchEvent) => {\n            if (handler) {\n                if (!ref.current || ref.current.contains(event.target as Node)) {\n                    return\n                }\n\n                handler(event)\n            }\n        }\n\n        document.addEventListener(\"mousedown\", listener)\n        document.addEventListener(\"touchstart\", listener)\n\n        return () => {\n            document.removeEventListener(\"mousedown\", listener)\n            document.removeEventListener(\"touchstart\", listener)\n        }\n    }, [ref, handler])\n}\n"],"file":"useOnClickOutside.js"}

package/dist/cjs/hooks/useResizeObserver.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResizeObserver = void 0;
+
+var _isBrowser = require("../isBrowser");
+
+var _react = require("react");
+
+var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+let animationFrameID = 0;
+
+const useResizeObserver = ref => {
+  const [entry, setEntry] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    if (!_isBrowser.isBrowser) return;
+    const element = ref && ref.current ? ref.current : null;
+    const resizeObserver = new _resizeObserverPolyfill.default(entries => {
+      if (!Array.isArray(entries)) {
+        return;
+      }
+
+      if (!entries.length) {
+        return;
+      }
+
+      animationFrameID = window.requestAnimationFrame(() => {
+        if (resizeObserver) {
+          setEntry(entries[0]);
+        }
+      });
+    });
+
+    if (element) {
+      resizeObserver.observe(element);
+    }
+
+    return () => {
+      if (element) {
+        resizeObserver.unobserve(element);
+      }
+
+      window.cancelAnimationFrame(animationFrameID);
+    };
+  }, [ref]);
+  return entry;
+};
+
+exports.useResizeObserver = useResizeObserver;
+//# sourceMappingURL=useResizeObserver.js.map

package/dist/cjs/hooks/useResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useResizeObserver.ts"],"names":["animationFrameID","useResizeObserver","ref","entry","setEntry","isBrowser","element","current","resizeObserver","ResizeObserver","entries","Array","isArray","length","window","requestAnimationFrame","observe","unobserve","cancelAnimationFrame"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAIA,gBAAgB,GAAG,CAAvB;;AACO,MAAMC,iBAAiB,GAA2BC,GAAxB,IAAqF;AAClH,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,sBAA1B;AAEA,wBAAU,MAAM;AACZ,QAAI,CAACC,oBAAL,EAAgB;AAChB,UAAMC,OAAO,GAAGJ,GAAG,IAAIA,GAAG,CAACK,OAAX,GAAqBL,GAAG,CAACK,OAAzB,GAAmC,IAAnD;AACA,UAAMC,cAAc,GAAG,IAAIC,+BAAJ,CAAoBC,OAAD,IAAoC;AAC1E,UAAI,CAACC,KAAK,CAACC,OAAN,CAAcF,OAAd,CAAL,EAA6B;AACzB;AACH;;AACD,UAAI,CAACA,OAAO,CAACG,MAAb,EAAqB;AACjB;AACH;;AACDb,MAAAA,gBAAgB,GAAGc,MAAM,CAACC,qBAAP,CAA6B,MAAM;AAClD,YAAIP,cAAJ,EAAoB;AAChBJ,UAAAA,QAAQ,CAACM,OAAO,CAAC,CAAD,CAAR,CAAR;AACH;AACJ,OAJkB,CAAnB;AAKH,KAZsB,CAAvB;;AAaA,QAAIJ,OAAJ,EAAa;AACTE,MAAAA,cAAc,CAACQ,OAAf,CAAuBV,OAAvB;AACH;;AAED,WAAO,MAAM;AACT,UAAIA,OAAJ,EAAa;AACTE,QAAAA,cAAc,CAACS,SAAf,CAAyBX,OAAzB;AACH;;AACDQ,MAAAA,MAAM,CAACI,oBAAP,CAA4BlB,gBAA5B;AACH,KALD;AAMH,GA1BD,EA0BG,CAACE,GAAD,CA1BH;AA2BA,SAAOC,KAAP;AACH,CA/BM","sourcesContent":["import { isBrowser } from \"../isBrowser\"\nimport { useEffect, useState } from \"react\"\nimport ResizeObserver from \"resize-observer-polyfill\"\n\nlet animationFrameID = 0\nexport const useResizeObserver = <T extends HTMLElement>(ref: React.RefObject<T>): ResizeObserverEntry | undefined => {\n    const [entry, setEntry] = useState<ResizeObserverEntry>()\n\n    useEffect(() => {\n        if (!isBrowser) return\n        const element = ref && ref.current ? ref.current : null\n        const resizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {\n            if (!Array.isArray(entries)) {\n                return\n            }\n            if (!entries.length) {\n                return\n            }\n            animationFrameID = window.requestAnimationFrame(() => {\n                if (resizeObserver) {\n                    setEntry(entries[0])\n                }\n            })\n        })\n        if (element) {\n            resizeObserver.observe(element)\n        }\n\n        return () => {\n            if (element) {\n                resizeObserver.unobserve(element)\n            }\n            window.cancelAnimationFrame(animationFrameID)\n        }\n    }, [ref])\n    return entry\n}\n"],"file":"useResizeObserver.js"}

package/dist/cjs/hooks/useTimeout.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTimeout = void 0;
+
+var _react = require("react");
+
+const useTimeout = (callback, delay) => {
+  const savedCallback = (0, _react.useRef)();
+  (0, _react.useEffect)(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+  (0, _react.useEffect)(() => {
+    const tick = () => {
+      if (savedCallback.current !== undefined) {
+        savedCallback.current();
+      }
+    };
+
+    let id = setTimeout(tick, delay);
+    return () => clearTimeout(id);
+  }, [delay]);
+};
+
+exports.useTimeout = useTimeout;
+//# sourceMappingURL=useTimeout.js.map

package/dist/cjs/hooks/useTimeout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useTimeout.ts"],"names":["useTimeout","callback","delay","savedCallback","current","tick","undefined","id","setTimeout","clearTimeout"],"mappings":";;;;;;;AAAA;;AAIO,MAAMA,UAAU,GAAG,CAACC,QAAD,EAAqBC,KAArB,KAAuC;AAC7D,QAAMC,aAAa,GAAG,oBAAtB;AAEA,wBAAU,MAAM;AACZA,IAAAA,aAAa,CAACC,OAAd,GAAwBH,QAAxB;AACH,GAFD,EAEG,CAACA,QAAD,CAFH;AAIA,wBAAU,MAAM;AACZ,UAAMI,IAAI,GAAG,MAAM;AACf,UAAIF,aAAa,CAACC,OAAd,KAA0BE,SAA9B,EAAyC;AACrCH,QAAAA,aAAa,CAACC,OAAd;AACH;AACJ,KAJD;;AAKA,QAAIG,EAAE,GAAGC,UAAU,CAACH,IAAD,EAAOH,KAAP,CAAnB;AACA,WAAO,MAAMO,YAAY,CAACF,EAAD,CAAzB;AACH,GARD,EAQG,CAACL,KAAD,CARH;AASH,CAhBM","sourcesContent":["import { useEffect, useRef } from \"react\"\n\ntype Callback = (...argv: any[]) => void\n\nexport const useTimeout = (callback: Callback, delay: number) => {\n    const savedCallback = useRef<undefined | Callback>()\n\n    useEffect(() => {\n        savedCallback.current = callback\n    }, [callback])\n\n    useEffect(() => {\n        const tick = () => {\n            if (savedCallback.current !== undefined) {\n                savedCallback.current()\n            }\n        }\n        let id = setTimeout(tick, delay)\n        return () => clearTimeout(id)\n    }, [delay])\n}\n"],"file":"useTimeout.js"}

package/dist/cjs/hooks/useWindowResize.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWindowResize = void 0;
+
+var _debounce = require("../@utils/debounce");
+
+var _isBrowser = require("../isBrowser");
+
+var _react = require("react");
+
+const useWindowResize = () => {
+  const [width, setWidth] = (0, _react.useState)(_isBrowser.isBrowser ? window.innerWidth : 0);
+  const [height, setHeight] = (0, _react.useState)(_isBrowser.isBrowser ? window.innerHeight : 0);
+  const {
+    current: listener
+  } = (0, _react.useRef)((0, _debounce.debounce)(() => {
+    if (!_isBrowser.isBrowser) return;
+    setWidth(window.innerWidth);
+    setHeight(window.innerHeight);
+  }, 100));
+  (0, _react.useEffect)(() => {
+    if (!_isBrowser.isBrowser) return;
+    window.addEventListener("resize", listener);
+    return () => {
+      window.removeEventListener("resize", listener);
+    };
+  }, [listener]);
+  return {
+    width,
+    height
+  };
+};
+
+exports.useWindowResize = useWindowResize;
+//# sourceMappingURL=useWindowResize.js.map

package/dist/cjs/hooks/useWindowResize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/hooks/useWindowResize.ts"],"names":["useWindowResize","width","setWidth","isBrowser","window","innerWidth","height","setHeight","innerHeight","current","listener","addEventListener","removeEventListener"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEO,MAAMA,eAAe,GAAG,MAAM;AACjC,QAAM,CAACC,KAAD,EAAQC,QAAR,IAAoB,qBAASC,uBAAYC,MAAM,CAACC,UAAnB,GAAgC,CAAzC,CAA1B;AACA,QAAM,CAACC,MAAD,EAASC,SAAT,IAAsB,qBAASJ,uBAAYC,MAAM,CAACI,WAAnB,GAAiC,CAA1C,CAA5B;AAEA,QAAM;AAAEC,IAAAA,OAAO,EAAEC;AAAX,MAAwB,mBAC1B,wBAAS,MAAM;AACX,QAAI,CAACP,oBAAL,EAAgB;AAChBD,IAAAA,QAAQ,CAACE,MAAM,CAACC,UAAR,CAAR;AACAE,IAAAA,SAAS,CAACH,MAAM,CAACI,WAAR,CAAT;AACH,GAJD,EAIG,GAJH,CAD0B,CAA9B;AAQA,wBAAU,MAAM;AACZ,QAAI,CAACL,oBAAL,EAAgB;AAChBC,IAAAA,MAAM,CAACO,gBAAP,CAAwB,QAAxB,EAAkCD,QAAlC;AACA,WAAO,MAAM;AACTN,MAAAA,MAAM,CAACQ,mBAAP,CAA2B,QAA3B,EAAqCF,QAArC;AACH,KAFD;AAGH,GAND,EAMG,CAACA,QAAD,CANH;AAQA,SAAO;AACHT,IAAAA,KADG;AAEHK,IAAAA;AAFG,GAAP;AAIH,CAxBM","sourcesContent":["import { debounce } from \"../@utils/debounce\"\nimport { isBrowser } from \"../isBrowser\"\nimport { useEffect, useRef, useState } from \"react\"\n\nexport const useWindowResize = () => {\n    const [width, setWidth] = useState(isBrowser ? window.innerWidth : 0)\n    const [height, setHeight] = useState(isBrowser ? window.innerHeight : 0)\n\n    const { current: listener } = useRef(\n        debounce(() => {\n            if (!isBrowser) return\n            setWidth(window.innerWidth)\n            setHeight(window.innerHeight)\n        }, 100)\n    )\n\n    useEffect(() => {\n        if (!isBrowser) return\n        window.addEventListener(\"resize\", listener)\n        return () => {\n            window.removeEventListener(\"resize\", listener)\n        }\n    }, [listener])\n\n    return {\n        width,\n        height\n    }\n}\n"],"file":"useWindowResize.js"}