diff --git a/packages/resize-observer/src/index.ts b/packages/resize-observer/src/index.ts index 3ed37d9de..093108057 100644 --- a/packages/resize-observer/src/index.ts +++ b/packages/resize-observer/src/index.ts @@ -25,7 +25,10 @@ export type ResizeHandler = ( ) => void; export type Size = { width: number; height: number }; -export type NullableSize = { width: number; height: number } | { width: null; height: null }; +type SizeWithClient = Size & { clientWidth: number; clientHeight: number }; +export type NullableSize = + | SizeWithClient + | { width: null; height: null; clientWidth: null; clientHeight: null }; /** * Instantiate a new ResizeObserver that automatically get's disposed on cleanup. @@ -139,7 +142,12 @@ export function createWindowSize(): Readonly { export const useWindowSize: typeof createWindowSize = /*#__PURE__*/ createHydratableSingletonRoot(createWindowSize); -const ELEMENT_SIZE_FALLBACK = { width: null, height: null } as const satisfies NullableSize; +const ELEMENT_SIZE_FALLBACK = { + width: null, + height: null, + clientWidth: null, + clientHeight: null, +} as const satisfies NullableSize; /** * @param target html element @@ -150,7 +158,8 @@ export function getElementSize(target: Element | false | undefined | null): Null return { ...ELEMENT_SIZE_FALLBACK }; } const { width, height } = target.getBoundingClientRect(); - return { width, height }; + const { clientWidth, clientHeight } = target; + return { width, height, clientWidth, clientHeight }; } /** @@ -163,7 +172,7 @@ export function getElementSize(target: Element | false | undefined | null): Null * console.log(size.width, size.height) * }) */ -export function createElementSize(target: Element): Readonly; +export function createElementSize(target: Element): SizeWithClient; export function createElementSize( target: Accessor, ): Readonly; diff --git a/packages/resize-observer/test/index.test.ts b/packages/resize-observer/test/index.test.ts index ad703dbf6..571d82831 100644 --- a/packages/resize-observer/test/index.test.ts +++ b/packages/resize-observer/test/index.test.ts @@ -134,8 +134,18 @@ describe("getWindowSize", () => { describe("getElementSize", () => { test("returns window size", () => { - expect(getElementSize(document.createElement("div"))).toEqual({ width: 0, height: 0 }); - expect(getElementSize(undefined)).toEqual({ width: null, height: null }); + expect(getElementSize(document.createElement("div"))).toEqual({ + width: 0, + height: 0, + clientWidth: 0, + clientHeight: 0, + }); + expect(getElementSize(undefined)).toEqual({ + width: null, + height: null, + clientWidth: null, + clientHeight: null, + }); }); });