From a444ba756a098527c2a488a3305fb427d7d51831 Mon Sep 17 00:00:00 2001
From: Julien <juliencaron@protonmail.com>
Date: Tue, 6 Feb 2024 15:09:29 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=97=91=EF=B8=8F=20deprecate=20useElementS?=
 =?UTF-8?q?ize=20(#473)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/stale-items-hunt.md                        |  5 +++++
 .../usehooks-ts/src/useElementSize/useElementSize.md  |  5 +----
 .../usehooks-ts/src/useElementSize/useElementSize.ts  |  1 +
 .../src/useResizeObserver/useResizeObserver.demo.tsx  | 11 ++++++++++-
 scripts/updateTestingIssue.mjs                        |  1 +
 5 files changed, 18 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/stale-items-hunt.md

diff --git a/.changeset/stale-items-hunt.md b/.changeset/stale-items-hunt.md
new file mode 100644
index 00000000..ca1b9751
--- /dev/null
+++ b/.changeset/stale-items-hunt.md
@@ -0,0 +1,5 @@
+---
+"usehooks-ts": minor
+---
+
+Depreciated useElementSize replaced by useResizeObserver
diff --git a/packages/usehooks-ts/src/useElementSize/useElementSize.md b/packages/usehooks-ts/src/useElementSize/useElementSize.md
index 7a0f6d36..d248bf66 100644
--- a/packages/usehooks-ts/src/useElementSize/useElementSize.md
+++ b/packages/usehooks-ts/src/useElementSize/useElementSize.md
@@ -1,4 +1 @@
-This hook helps you to dynamically recover the width and the height of an HTML element.
-Dimensions are updated on load, on mount/un-mount, when resizing the window and when the ref changes.
-
-**Note**: If you use this hook in an SSR context, set the `initializeWithValue` option to `{ width: undefined, height: undefined }` (You can pass it default values when initializing the hook, see example below).
+This hook has been **deprecated**, use [`useResizeObserver()`](/react-hook/use-resize-observer) instead.
diff --git a/packages/usehooks-ts/src/useElementSize/useElementSize.ts b/packages/usehooks-ts/src/useElementSize/useElementSize.ts
index f7842803..44998a66 100644
--- a/packages/usehooks-ts/src/useElementSize/useElementSize.ts
+++ b/packages/usehooks-ts/src/useElementSize/useElementSize.ts
@@ -17,6 +17,7 @@ type UseElementSizeResult = [(node: Element | null) => void, Size] &
   (Size & { ref: (node: Element | null) => void })
 
 /**
+ * @deprecated - Use `useResizeObserver` instead.
  * A hook for tracking the size of a DOM element.
  * @template T - The type of the DOM element. Defaults to `HTMLDivElement`.
  * @param {?UseElementSizeOptions} [options] - The options for customizing the behavior of the hook (optional).
diff --git a/packages/usehooks-ts/src/useResizeObserver/useResizeObserver.demo.tsx b/packages/usehooks-ts/src/useResizeObserver/useResizeObserver.demo.tsx
index 4dc4b05e..1ba35d3a 100644
--- a/packages/usehooks-ts/src/useResizeObserver/useResizeObserver.demo.tsx
+++ b/packages/usehooks-ts/src/useResizeObserver/useResizeObserver.demo.tsx
@@ -37,7 +37,16 @@ export function WithDebounce() {
   })
 
   return (
-    <div ref={ref} style={{ border: '1px solid palevioletred', width: '100%' }}>
+    <div
+      ref={ref}
+      style={{
+        border: '1px solid palevioletred',
+        width: '100%',
+        resize: 'both',
+        overflow: 'auto',
+        maxWidth: '100%',
+      }}
+    >
       debounced: {width} x {height}
     </div>
   )
diff --git a/scripts/updateTestingIssue.mjs b/scripts/updateTestingIssue.mjs
index 4816395c..fbaec814 100644
--- a/scripts/updateTestingIssue.mjs
+++ b/scripts/updateTestingIssue.mjs
@@ -10,6 +10,7 @@ const hookDir = path.resolve('./packages/usehooks-ts/src')
 const excludeHooks = [
   'useSsr', // @deprecated
   'useImageOnLoad', // @deprecated
+  'useElementSize', // @deprecated
   'useIsomorphicLayoutEffect', // Combination of useLayoutEffect and useEffect without custom logic
 ]