feat: add use-size hook (#6457)

* feat: add use-size hook

* chore: update lockfile

* chore: deprecate use dimensions

* chore: add storybook for use size

* fix: update hook deps

.changeset/shaggy-camels-dance.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/hooks": patch
+---
+
+Deprecate use-dimensions in favor of the use-size hook

.changeset/sharp-llamas-rush.md

@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react-use-size": patch
+---
+
+Initial release

hooks/use-size/README.md

@@ -0,0 +1,24 @@
+# @chakra-ui/react-use-size
+
+A Quick description of the component
+
+> This is an internal utility, not intended for public usage.
+
+## Installation
+
+```sh
+yarn add @chakra-ui/react-use-size
+# or
+npm i @chakra-ui/react-use-size
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/chakra-ui/chakra-ui/blob/master/CONTRIBUTING.md)
+for details.
+
+## Licence
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/chakra-ui/chakra-ui/blob/master/LICENSE).

hooks/use-size/index.ts

@@ -0,0 +1 @@
+export * from "./src"

hooks/use-size/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@chakra-ui/react-use-size",
+  "version": "1.0.0",
+  "description": "Track an element size over time",
+  "keywords": [
+    "react-use-size"
+  ],
+  "author": "Segun Adebayo <sage@adebayosegun.com>",
+  "homepage": "https://github.com/chakra-ui/chakra-ui#readme",
+  "license": "MIT",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chakra-ui/chakra-ui.git",
+    "directory": "packages/react-use-size"
+  },
+  "bugs": {
+    "url": "https://github.com/chakra-ui/chakra-ui/issues"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format=esm,cjs --dts",
+    "dev": "pnpm build -- --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit",
+    "build:fast": "tsup src/index.ts --format=esm,cjs"
+  },
+  "dependencies": {
+    "@zag-js/element-size": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.0.0"
+  }
+}

hooks/use-size/src/index.ts

@@ -0,0 +1,21 @@
+import { trackElementSize } from "@zag-js/element-size"
+import { useEffect, useLayoutEffect, useState } from "react"
+
+type Size = {
+  width: number
+  height: number
+}
+
+const useSafeLayoutEffect = Boolean(globalThis?.document)
+  ? useLayoutEffect
+  : useEffect
+
+export function useSize<T extends HTMLElement>(ref: React.RefObject<T | null>) {
+  const [size, setSize] = useState<Size>()
+  useSafeLayoutEffect(() => {
+    return trackElementSize(ref.current, (size) => {
+      setSize(size)
+    })
+  }, [])
+  return size
+}

hooks/use-size/stories/use-size.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta } from "@storybook/react"
+import React, { useRef } from "react"
+import { useSize } from "../src"
+
+const meta: Meta = {
+  title: "Hooks / useSize",
+}
+
+export function MeasureSize() {
+  const ref = useRef<HTMLDivElement>(null)
+  const size = useSize(ref)
+  return (
+    <div>
+      <h1>Measured Size: {JSON.stringify(size, null, 4)}</h1>
+      <div ref={ref} style={{ background: "pink", border: "1px dashed black" }}>
+        In publishing and graphic design, Lorem ipsum is a placeholder text
+        commonly used to demonstrate the visual form of a document or a typeface
+        without relying on meaningful content
+      </div>
+    </div>
+  )
+}
+
+export default meta

packages/hooks/src/use-dimensions.ts

@@ -7,6 +7,12 @@ import { useSafeLayoutEffect } from "./use-safe-layout-effect"
  *
  * @param ref ref of the component to measure
  * @param observe if `true`, resize and scroll observers will be turned on
+ *
+ * @deprecated use the `useSize` hook instead
+ *
+ * ```jsx
+ * import { useSize } from "@chakra-ui/react-use-size"
+ * ```
  */
 export function useDimensions(
   ref: React.RefObject<HTMLElement>,