remove @essex/hooks dependency

packages/fluent/package.json

@@ -20,7 +20,6 @@
 		"start": "essex watch"
 	},
 	"dependencies": {
-		"@essex/hooks": "^4.0.5",
 		"@thematic/color": "workspace:^",
 		"@thematic/core": "workspace:^",
 		"@thematic/react": "workspace:^",

packages/fluent/src/components/ScaleDropdown/hooks/useSafeDimensions.ts

@@ -2,11 +2,17 @@
  * Copyright (c) Microsoft. All rights reserved.
  * Licensed under the MIT license. See LICENSE file in the project.
  */
-import type { Dimensions } from '@essex/hooks'
-import { useDimensions } from '@essex/hooks'
+import type { MutableRefObject } from 'react'
+import { useEffect,useState } from 'react'
 
 const DEFAULT_WIDTH = 200
 const DEFAULT_HEIGHT = 32
+
+export interface Dimensions {
+	width: number
+	height: number
+}
+
 export function useSafeDimensions(
 	ref: React.RefObject<HTMLDivElement>,
 ): Dimensions {
@@ -30,3 +36,44 @@ export function useSafeCollapseDimensions(
 ): [number, number] {
 	return [width <= 0 ? 1 : width, height <= 0 ? 1 : height]
 }
+
+/**
+ * A hook for getting the dimensions of the given element. This hook also updates when the given element resizes.
+ * NOTE: ResizeObserver must be defined in the target runtime. BYO polyfill if it is not provided by default
+ * @param ref A ref to the element to measure
+ * @returns The dimensions for the element.
+ */
+function useDimensions(
+	ref: MutableRefObject<HTMLElement | null>,
+): Dimensions | undefined {
+	const [dimensions, setDimensions] = useState<Dimensions | undefined>()
+	useEffect(() => {
+		if (ref && ref.current) {
+			const rect = ref.current.getBoundingClientRect()
+			let dims: Dimensions = {
+				width: Math.floor(rect.width),
+				height: Math.floor(rect.height),
+			}
+			setDimensions(dims)
+
+			const observer = new ResizeObserver(entries => {
+				const entry = entries[0]
+				if (entry) {
+					const newDims = {
+						width: Math.floor(entry.contentRect.width),
+						height: Math.floor(entry.contentRect.height),
+					}
+					if (newDims.width !== dims.width || newDims.height !== dims.height) {
+						dims = newDims
+						setDimensions(newDims)
+					}
+				}
+			})
+			observer.observe(ref.current)
+			return () => {
+				observer.disconnect()
+			}
+		}
+	}, [ref])
+	return dimensions 
+}

packages/fluent/tsconfig.json

@@ -2,7 +2,8 @@
 	"extends": "@essex/tsconfig-base",
 	"compilerOptions": {
 		"outDir": "lib",
-		"jsx": "react-jsx"
+		"jsx": "react-jsx",
+		"lib": ["ESNext", "DOM"]
 	},
 	"include": ["src/**/*"]
 }

yarn.lock

@@ -898,21 +898,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@essex/hooks@npm:^4.0.5":
-  version: 4.0.5
-  resolution: "@essex/hooks@npm:4.0.5"
-  dependencies:
-    "@essex/toolbox": ^3.0.3
-    lodash-es: ^4.17.21
-  peerDependencies:
-    "@types/node": "*"
-    "@types/react": "*"
-    "@types/react-dom": "*"
-    react: ">=16.8.0"
-  checksum: d656c9a48aac86cfa4472b96192a8233a0ffdd6389826ace679a03c8e2801ba40e1756910e7400e3c262422f341447510af83a6fe544469034e42268554bd055
-  languageName: node
-  linkType: hard
-
 "@essex/jest-config@npm:^21.0.7":
   version: 21.0.7
   resolution: "@essex/jest-config@npm:21.0.7"
@@ -1028,13 +1013,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@essex/toolbox@npm:^3.0.3":
-  version: 3.0.3
-  resolution: "@essex/toolbox@npm:3.0.3"
-  checksum: 9db0b2bddbf85757bb0b0227476151731eafac86a843fe65e0b9c872758d99d367e2c6ea848af7d2f5ccdf7f685f7c1da66ff560685b3730e96b278093ce5fed
-  languageName: node
-  linkType: hard
-
 "@essex/tsconfig-base@npm:^1.0.2":
   version: 1.0.2
   resolution: "@essex/tsconfig-base@npm:1.0.2"
@@ -1936,7 +1914,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@thematic/fluent@workspace:packages/fluent"
   dependencies:
-    "@essex/hooks": ^4.0.5
     "@essex/scripts": ^20.5.1
     "@essex/tsconfig-base": ^1.0.2
     "@fluentui/font-icons-mdl2": ^8.2.3