@os-design/use-resize-observer 1.0.21 → 1.0.23

package/dist/{types/index.d.ts → index.d.ts}

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { type RefObject } from 'react';
 declare const useResizeObserver: (target: Element | RefObject<Element>, listener: ResizeObserverCallback) => void;
 export default useResizeObserver;
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAqB,MAAM,OAAO,CAAC;AAG1D,QAAA,MAAM,iBAAiB,WACb,OAAO,GAAG,SAAS,CAAC,OAAO,CAAC,YAC1B,sBAAsB,KAC/B,IAyBF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/{esm/index.js → index.js}

@@ -21,5 +21,4 @@ const useResizeObserver = (target, listener) => {
     return () => resizeObserver.unobserve(element);
   }, [target]);
 };
-export default useResizeObserver;
-//# sourceMappingURL=index.js.map
+export default useResizeObserver;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@os-design/use-resize-observer",
-  "version": "1.0.21",
+  "version": "1.0.23",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist",
     "src",
@@ -20,9 +20,8 @@
   "sideEffects": false,
   "scripts": {
     "clean": "rimraf dist",
-    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts,.tsx --out-dir dist/cjs --source-maps",
-    "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types",
+    "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts,.tsx --out-dir dist",
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declaration --declarationDir dist",
     "build": "yarn clean && npm-run-all 'build:*'",
     "ncu": "ncu -u"
   },
@@ -30,11 +29,11 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/use-browser-layout-effect": "^1.0.19",
+    "@os-design/use-browser-layout-effect": "^1.0.21",
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
     "react": ">=18"
   },
-  "gitHead": "2605fbf8f46c78800cd4ba6dcb0dd895a893bf96"
+  "gitHead": "86a83e87297a07afe132782ca2c95023b7139276"
 }

package/src/index.mdx

@@ -0,0 +1,76 @@
+import { Meta } from '@storybook/blocks';
+import UseResizeObserverExample from './index.example';
+
+<Meta title='Utils/useResizeObserver' />
+
+# useResizeObserver
+
+Sets the listener that will be called whenever the resize event of an element occurs.
+
+## Example of usage
+
+```tsx
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+import styled from '@emotion/styled';
+import { useResizeObserver } from '@os-design/utils';
+
+const getRandomInt = (min: number, max: number) =>
+  Math.floor(Math.random() * (max - min + 1) + min);
+
+const Container = styled.div`
+  background-color: hsl(0, 0%, 90%);
+  width: 10em;
+`;
+
+const UseResizeObserverExample: React.FC = () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [numberOfWords, setNumberOfWords] = useState(10);
+
+  // Change the content of the container every second
+  useEffect(() => {
+    const interval = setInterval(
+      () => setNumberOfWords(getRandomInt(5, 30)),
+      1000
+    );
+    return () => clearInterval(interval);
+  }, []);
+
+  const updateContainerSize = useCallback(() => {
+    if (!containerRef.current) return;
+    setSize({
+      width: containerRef.current?.clientWidth,
+      height: containerRef.current?.clientHeight,
+    });
+  }, []);
+
+  // Detect container size on mount
+  useLayoutEffect(() => {
+    updateContainerSize();
+  }, [updateContainerSize]);
+
+  // Detect container size on resize
+  useResizeObserver(containerRef, updateContainerSize);
+
+  return (
+    <>
+      <Container ref={containerRef}>
+        {'Text '.repeat(numberOfWords).trimRight()}
+      </Container>
+      <p>
+        Size: {size.width}x{size.height}
+      </p>
+    </>
+  );
+};
+
+export default UseResizeObserverExample;
+```
+
+<UseResizeObserverExample />

package/src/index.ts

@@ -1,5 +1,5 @@
 import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';
-import { RefObject, useEffect, useRef } from 'react';
+import { type RefObject, useEffect, useRef } from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
 const useResizeObserver = (

package/dist/cjs/index.js

@@ -1,38 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _useBrowserLayoutEffect = _interopRequireDefault(require("@os-design/use-browser-layout-effect"));
-var _react = require("react");
-var _resizeObserverPolyfill = _interopRequireDefault(require("resize-observer-polyfill"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-var useResizeObserver = function useResizeObserver(target, listener) {
-  var listenerRef = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    listenerRef.current = listener;
-  }, [listener]);
-  (0, _useBrowserLayoutEffect["default"])(function () {
-    var element;
-    if (_typeof(target) === 'object' && target !== null) {
-      element = target instanceof Element ? target : target.current;
-    }
-    if (!element) return function () {
-      return undefined;
-    };
-    var eventListener = function eventListener(entries, observer) {
-      if (!listenerRef.current) return;
-      listenerRef.current(entries, observer);
-    };
-    var resizeObserver = new _resizeObserverPolyfill["default"](eventListener);
-    resizeObserver.observe(element);
-    return function () {
-      return resizeObserver.unobserve(element);
-    };
-  }, [target]);
-};
-var _default = useResizeObserver;
-exports["default"] = _default;
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["_useBrowserLayoutEffect","_interopRequireDefault","require","_react","_resizeObserverPolyfill","obj","__esModule","_typeof","Symbol","iterator","constructor","prototype","useResizeObserver","target","listener","listenerRef","useRef","useEffect","current","useBrowserLayoutEffect","element","Element","undefined","eventListener","entries","observer","resizeObserver","ResizeObserver","observe","unobserve","_default","exports"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;;;;AAAA,IAAAA,uBAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,uBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAAsD,SAAAD,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,gBAAAA,GAAA;AAAA,SAAAE,QAAAF,GAAA,sCAAAE,OAAA,wBAAAC,MAAA,uBAAAA,MAAA,CAAAC,QAAA,aAAAJ,GAAA,kBAAAA,GAAA,gBAAAA,GAAA,WAAAA,GAAA,yBAAAG,MAAA,IAAAH,GAAA,CAAAK,WAAA,KAAAF,MAAA,IAAAH,GAAA,KAAAG,MAAA,CAAAG,SAAA,qBAAAN,GAAA,KAAAE,OAAA,CAAAF,GAAA;AAEtD,IAAMO,iBAAiB,GAAG,SAApBA,iBAAiBA,CACrBC,MAAoC,EACpCC,QAAgC,EACvB;EACT,IAAMC,WAAW,GAAG,IAAAC,aAAM,EAAyB,CAAC;EAEpD,IAAAC,gBAAS,EAAC,YAAM;IACdF,WAAW,CAACG,OAAO,GAAGJ,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,IAAAK,kCAAsB,EAAC,YAAM;IAC3B,IAAIC,OAAO;IACX,IAAIb,OAAA,CAAOM,MAAM,MAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDO,OAAO,GAAGP,MAAM,YAAYQ,OAAO,GAAGR,MAAM,GAAGA,MAAM,CAACK,OAAO;IAC/D;IAEA,IAAI,CAACE,OAAO,EAAE,OAAO;MAAA,OAAME,SAAS;IAAA;IAEpC,IAAMC,aAAqC,GAAG,SAAxCA,aAAqCA,CAAIC,OAAO,EAAEC,QAAQ,EAAK;MACnE,IAAI,CAACV,WAAW,CAACG,OAAO,EAAE;MAC1BH,WAAW,CAACG,OAAO,CAACM,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,IAAMC,cAAc,GAAG,IAAIC,kCAAc,CAACJ,aAAa,CAAC;IACxDG,cAAc,CAACE,OAAO,CAACR,OAAO,CAAC;IAE/B,OAAO;MAAA,OAAMM,cAAc,CAACG,SAAS,CAACT,OAAO,CAAC;IAAA;EAChD,CAAC,EAAE,CAACP,MAAM,CAAC,CAAC;AACd,CAAC;AAAC,IAAAiB,QAAA,GAEalB,iBAAiB;AAAAmB,OAAA,cAAAD,QAAA"}

package/dist/esm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["useBrowserLayoutEffect","useEffect","useRef","ResizeObserver","useResizeObserver","target","listener","listenerRef","current","element","Element","undefined","eventListener","entries","observer","resizeObserver","observe","unobserve"],"sources":["../../src/index.ts"],"sourcesContent":["import useBrowserLayoutEffect from '@os-design/use-browser-layout-effect';\nimport { RefObject, useEffect, useRef } from 'react';\nimport ResizeObserver from 'resize-observer-polyfill';\n\nconst useResizeObserver = (\n  target: Element | RefObject<Element>,\n  listener: ResizeObserverCallback\n): void => {\n  const listenerRef = useRef<ResizeObserverCallback>();\n\n  useEffect(() => {\n    listenerRef.current = listener;\n  }, [listener]);\n\n  useBrowserLayoutEffect(() => {\n    let element;\n    if (typeof target === 'object' && target !== null) {\n      element = target instanceof Element ? target : target.current;\n    }\n\n    if (!element) return () => undefined;\n\n    const eventListener: ResizeObserverCallback = (entries, observer) => {\n      if (!listenerRef.current) return;\n      listenerRef.current(entries, observer);\n    };\n\n    const resizeObserver = new ResizeObserver(eventListener);\n    resizeObserver.observe(element);\n\n    return () => resizeObserver.unobserve(element);\n  }, [target]);\n};\n\nexport default useResizeObserver;\n"],"mappings":"AAAA,OAAOA,sBAAsB,MAAM,sCAAsC;AACzE,SAAoBC,SAAS,EAAEC,MAAM,QAAQ,OAAO;AACpD,OAAOC,cAAc,MAAM,0BAA0B;AAErD,MAAMC,iBAAiB,GAAGA,CACxBC,MAAoC,EACpCC,QAAgC,KACvB;EACT,MAAMC,WAAW,GAAGL,MAAM,CAAyB,CAAC;EAEpDD,SAAS,CAAC,MAAM;IACdM,WAAW,CAACC,OAAO,GAAGF,QAAQ;EAChC,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEdN,sBAAsB,CAAC,MAAM;IAC3B,IAAIS,OAAO;IACX,IAAI,OAAOJ,MAAM,KAAK,QAAQ,IAAIA,MAAM,KAAK,IAAI,EAAE;MACjDI,OAAO,GAAGJ,MAAM,YAAYK,OAAO,GAAGL,MAAM,GAAGA,MAAM,CAACG,OAAO;IAC/D;IAEA,IAAI,CAACC,OAAO,EAAE,OAAO,MAAME,SAAS;IAEpC,MAAMC,aAAqC,GAAGA,CAACC,OAAO,EAAEC,QAAQ,KAAK;MACnE,IAAI,CAACP,WAAW,CAACC,OAAO,EAAE;MAC1BD,WAAW,CAACC,OAAO,CAACK,OAAO,EAAEC,QAAQ,CAAC;IACxC,CAAC;IAED,MAAMC,cAAc,GAAG,IAAIZ,cAAc,CAACS,aAAa,CAAC;IACxDG,cAAc,CAACC,OAAO,CAACP,OAAO,CAAC;IAE/B,OAAO,MAAMM,cAAc,CAACE,SAAS,CAACR,OAAO,CAAC;EAChD,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;AACd,CAAC;AAED,eAAeD,iBAAiB"}

package/dist/types/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAGrD,QAAA,MAAM,iBAAiB,WACb,OAAO,GAAG,UAAU,OAAO,CAAC,YAC1B,sBAAsB,KAC/B,IAyBF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}