revert: use offset rect

Author: segunadebayo

.changeset/fix-indicator-scroll.md

@@ -0,0 +1,6 @@
+---
+"@zag-js/radio-group": patch
+"@zag-js/tabs": patch
+---
+
+Revert to using `offsetLeft`/`offsetTop` to fix indicator positioning in scrollable containers.

packages/machines/radio-group/src/radio-group.dom.ts

@@ -33,19 +33,12 @@ export const getRadioEl = (ctx: Scope, value: string | null) => {
   return ctx.getById(getItemId(ctx, value))
 }
 
-export const getOffsetRect = (el: HTMLElement | undefined) => {
-  if (!el) {
-    return { left: 0, top: 0, width: 0, height: 0 }
-  }
-  const rect = el.getBoundingClientRect()
-  const parent = el.offsetParent?.getBoundingClientRect()
-  return {
-    left: parent ? rect.left - parent.left : rect.left,
-    top: parent ? rect.top - parent.top : rect.top,
-    width: rect.width,
-    height: rect.height,
-  }
-}
+export const getOffsetRect = (el: HTMLElement | undefined) => ({
+  left: el?.offsetLeft ?? 0,
+  top: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0,
+})
 
 export const getRectById = (ctx: Scope, id: string) => {
   const radioEl = ctx.getById(getItemId(ctx, id))

packages/machines/tabs/src/tabs.dom.ts

@@ -26,19 +26,12 @@ export const getNextTriggerEl = (ctx: Scope, opts: { value: string; loopFocus?:
 export const getPrevTriggerEl = (ctx: Scope, opts: { value: string; loopFocus?: boolean | undefined }) =>
   prevById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus)
 
-export const getOffsetRect = (el: HTMLElement | undefined) => {
-  if (!el) {
-    return { left: 0, top: 0, width: 0, height: 0 }
-  }
-  const rect = el.getBoundingClientRect()
-  const parent = el.offsetParent?.getBoundingClientRect()
-  return {
-    left: parent ? rect.left - parent.left : rect.left,
-    top: parent ? rect.top - parent.top : rect.top,
-    width: rect.width,
-    height: rect.height,
-  }
-}
+export const getOffsetRect = (el: HTMLElement | undefined) => ({
+  left: el?.offsetLeft ?? 0,
+  top: el?.offsetTop ?? 0,
+  width: el?.offsetWidth ?? 0,
+  height: el?.offsetHeight ?? 0,
+})
 
 export const getRectById = (ctx: Scope, id: string) => {
   const tab = itemById(getElements(ctx), getTriggerId(ctx, id))