Merge remote-tracking branch 'origin' into feat/nav-menu

Author: segunadebayo

bun.lock

@@ -34,23 +34,23 @@
     "setup:prod": "vc link --scope=chakra-ui -p ark-docs -y && vc env pull --environment production website/.env"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.3.6",
+    "@biomejs/biome": "2.3.7",
     "@release-it/keep-a-changelog": "7.0.0",
-    "@types/bun": "1.3.2",
+    "@types/bun": "1.3.3",
     "lefthook": "2.0.4",
     "release-it": "19.0.6",
     "prettier": "3.6.2",
     "prettier-plugin-svelte": "3.4.0",
     "turbo": "2.6.1",
     "typescript": "5.9.3",
-    "vercel": "48.10.2"
+    "vercel": "48.10.10"
   },
   "packageManager": "[email protected]",
   "trustedDependencies": [
     "@ark-ui/website"
   ],
   "overrides": {
     "flexsearch": "0.8.212",
-    "vite": "7.2.2"
+    "vite": "7.2.4"
   }
 }

package.json

@@ -1,5 +1,15 @@
 ## [Unreleased]
 
+## [5.29.1] - 2025-11-22
+
+### Fixed
+
+- **Fieldset**: Fixed `aria-describedby` resolution to correctly reference helper text and error text IDs
+- **Floating Panel**:
+  - Fixed resize trigger issue with `n` axis by explicitly setting `top: 0`
+  - Fixed `draggable` and `resizable` options not being respected when set to `false`
+- **Presence**: Fixed regression where UNMOUNT transition might not be called consistently
+
 ## [5.29.0] - 2025-11-20
 
 ### Added

packages/react/CHANGELOG.md

@@ -1,7 +1,7 @@
 {
   "name": "@ark-ui/react",
   "type": "module",
-  "version": "5.29.0",
+  "version": "5.29.1",
   "description": "A collection of unstyled, accessible UI components for React, utilizing state machines for seamless interaction.",
   "keywords": [
     "accordion",
@@ -85,81 +85,81 @@
   "sideEffects": false,
   "dependencies": {
     "@internationalized/date": "3.10.0",
-    "@zag-js/accordion": "1.29.0",
-    "@zag-js/anatomy": "1.29.0",
-    "@zag-js/angle-slider": "1.29.0",
-    "@zag-js/async-list": "1.29.0",
-    "@zag-js/auto-resize": "1.29.0",
-    "@zag-js/avatar": "1.29.0",
-    "@zag-js/bottom-sheet": "1.29.0",
-    "@zag-js/carousel": "1.29.0",
-    "@zag-js/checkbox": "1.29.0",
-    "@zag-js/clipboard": "1.29.0",
-    "@zag-js/collapsible": "1.29.0",
-    "@zag-js/collection": "1.29.0",
-    "@zag-js/color-picker": "1.29.0",
-    "@zag-js/color-utils": "1.29.0",
-    "@zag-js/combobox": "1.29.0",
-    "@zag-js/core": "1.29.0",
-    "@zag-js/date-picker": "1.29.0",
-    "@zag-js/date-utils": "1.29.0",
-    "@zag-js/dialog": "1.29.0",
-    "@zag-js/dom-query": "1.29.0",
-    "@zag-js/editable": "1.29.0",
-    "@zag-js/file-upload": "1.29.0",
-    "@zag-js/file-utils": "1.29.0",
-    "@zag-js/floating-panel": "1.29.0",
-    "@zag-js/focus-trap": "1.29.0",
-    "@zag-js/highlight-word": "1.29.0",
-    "@zag-js/hover-card": "1.29.0",
-    "@zag-js/image-cropper": "1.29.0",
-    "@zag-js/i18n-utils": "1.29.0",
-    "@zag-js/json-tree-utils": "1.29.0",
-    "@zag-js/listbox": "1.29.0",
-    "@zag-js/marquee": "1.29.0",
-    "@zag-js/menu": "1.29.0",
-    "@zag-js/navigation-menu": "1.29.0",
-    "@zag-js/number-input": "1.29.0",
-    "@zag-js/pagination": "1.29.0",
-    "@zag-js/password-input": "1.29.0",
-    "@zag-js/pin-input": "1.29.0",
-    "@zag-js/popover": "1.29.0",
-    "@zag-js/presence": "1.29.0",
-    "@zag-js/progress": "1.29.0",
-    "@zag-js/qr-code": "1.29.0",
-    "@zag-js/radio-group": "1.29.0",
-    "@zag-js/rating-group": "1.29.0",
-    "@zag-js/react": "1.29.0",
-    "@zag-js/scroll-area": "1.29.0",
-    "@zag-js/select": "1.29.0",
-    "@zag-js/signature-pad": "1.29.0",
-    "@zag-js/slider": "1.29.0",
-    "@zag-js/splitter": "1.29.0",
-    "@zag-js/steps": "1.29.0",
-    "@zag-js/switch": "1.29.0",
-    "@zag-js/tabs": "1.29.0",
-    "@zag-js/tags-input": "1.29.0",
-    "@zag-js/timer": "1.29.0",
-    "@zag-js/toast": "1.29.0",
-    "@zag-js/toggle": "1.29.0",
-    "@zag-js/toggle-group": "1.29.0",
-    "@zag-js/tooltip": "1.29.0",
-    "@zag-js/tour": "1.29.0",
-    "@zag-js/tree-view": "1.29.0",
-    "@zag-js/types": "1.29.0",
-    "@zag-js/utils": "1.29.0"
+    "@zag-js/accordion": "1.29.1",
+    "@zag-js/anatomy": "1.29.1",
+    "@zag-js/angle-slider": "1.29.1",
+    "@zag-js/async-list": "1.29.1",
+    "@zag-js/auto-resize": "1.29.1",
+    "@zag-js/avatar": "1.29.1",
+    "@zag-js/bottom-sheet": "1.29.1",
+    "@zag-js/carousel": "1.29.1",
+    "@zag-js/checkbox": "1.29.1",
+    "@zag-js/clipboard": "1.29.1",
+    "@zag-js/collapsible": "1.29.1",
+    "@zag-js/collection": "1.29.1",
+    "@zag-js/color-picker": "1.29.1",
+    "@zag-js/color-utils": "1.29.1",
+    "@zag-js/combobox": "1.29.1",
+    "@zag-js/core": "1.29.1",
+    "@zag-js/date-picker": "1.29.1",
+    "@zag-js/date-utils": "1.29.1",
+    "@zag-js/dialog": "1.29.1",
+    "@zag-js/dom-query": "1.29.1",
+    "@zag-js/editable": "1.29.1",
+    "@zag-js/file-upload": "1.29.1",
+    "@zag-js/file-utils": "1.29.1",
+    "@zag-js/floating-panel": "1.29.1",
+    "@zag-js/focus-trap": "1.29.1",
+    "@zag-js/highlight-word": "1.29.1",
+    "@zag-js/hover-card": "1.29.1",
+    "@zag-js/image-cropper": "1.29.1",
+    "@zag-js/i18n-utils": "1.29.1",
+    "@zag-js/json-tree-utils": "1.29.1",
+    "@zag-js/listbox": "1.29.1",
+    "@zag-js/marquee": "1.29.1",
+    "@zag-js/menu": "1.29.1",
+    "@zag-js/navigation-menu": "1.29.1",
+    "@zag-js/number-input": "1.29.1",
+    "@zag-js/pagination": "1.29.1",
+    "@zag-js/password-input": "1.29.1",
+    "@zag-js/pin-input": "1.29.1",
+    "@zag-js/popover": "1.29.1",
+    "@zag-js/presence": "1.29.1",
+    "@zag-js/progress": "1.29.1",
+    "@zag-js/qr-code": "1.29.1",
+    "@zag-js/radio-group": "1.29.1",
+    "@zag-js/rating-group": "1.29.1",
+    "@zag-js/react": "1.29.1",
+    "@zag-js/scroll-area": "1.29.1",
+    "@zag-js/select": "1.29.1",
+    "@zag-js/signature-pad": "1.29.1",
+    "@zag-js/slider": "1.29.1",
+    "@zag-js/splitter": "1.29.1",
+    "@zag-js/steps": "1.29.1",
+    "@zag-js/switch": "1.29.1",
+    "@zag-js/tabs": "1.29.1",
+    "@zag-js/tags-input": "1.29.1",
+    "@zag-js/timer": "1.29.1",
+    "@zag-js/toast": "1.29.1",
+    "@zag-js/toggle": "1.29.1",
+    "@zag-js/toggle-group": "1.29.1",
+    "@zag-js/tooltip": "1.29.1",
+    "@zag-js/tour": "1.29.1",
+    "@zag-js/tree-view": "1.29.1",
+    "@zag-js/types": "1.29.1",
+    "@zag-js/utils": "1.29.1"
   },
   "devDependencies": {
     "check-password-strength": "3.0.0",
-    "@biomejs/biome": "2.3.6",
+    "@biomejs/biome": "2.3.7",
     "@storybook/addon-a11y": "9.1.16",
     "@storybook/react-vite": "9.1.16",
     "@testing-library/dom": "10.4.1",
     "@testing-library/jest-dom": "6.9.1",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
     "@types/jsdom": "21.1.7",
-    "@types/react": "19.2.5",
+    "@types/react": "19.2.6",
     "@types/react-dom": "19.2.3",
     "@vitejs/plugin-react": "5.1.1",
     "clean-package": "2.2.0",
@@ -172,11 +172,11 @@
     "react-shadow": "20.6.0",
     "react-use": "17.6.0",
     "react-frame-component": "5.2.7",
-    "react-hook-form": "7.66.0",
+    "react-hook-form": "7.66.1",
     "resize-observer-polyfill": "1.5.1",
     "storybook": "9.1.16",
     "typescript": "5.9.3",
-    "vite": "7.2.2",
+    "vite": "7.2.4",
     "vite-plugin-dts": "4.5.4",
     "vitest": "^4.0.0",
     "@vitest/coverage-v8": "^4.0.0",

packages/react/package.json

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import { axe } from 'vitest-axe'
 import { Field, Fieldset } from '../'
 
@@ -43,4 +43,35 @@ describe('Fieldset', () => {
     render(<ComponentUnderTest />)
     expect(screen.queryByText('Fieldset Error Text')).not.toBeInTheDocument()
   })
+
+  it('should render aria-labelledby on the fieldset', async () => {
+    render(<ComponentUnderTest />)
+    const fieldset = screen.getByRole('group', { name: /legend/i })
+    expect(fieldset).toHaveAttribute('aria-labelledby', expect.stringContaining('legend'))
+  })
+
+  it('should have helper text accessible', async () => {
+    render(<ComponentUnderTest />)
+    const fieldset = screen.getByRole('group', { name: /legend/i })
+    expect(fieldset).toBeInTheDocument()
+    expect(screen.getByText('Fieldset Helper Text')).toBeInTheDocument()
+  })
+
+  it('should set aria-describedby with helper text', async () => {
+    render(<ComponentUnderTest />)
+    const fieldset = screen.getByRole('group', { name: /legend/i })
+    await waitFor(() => {
+      expect(fieldset).toHaveAttribute('aria-describedby', expect.stringContaining('helper-text'))
+    })
+  })
+
+  it('should set aria-describedby with error text when invalid', async () => {
+    render(<ComponentUnderTest invalid />)
+    const fieldset = screen.getByRole('group', { name: /legend/i })
+    await waitFor(() => {
+      const describedBy = fieldset.getAttribute('aria-describedby')
+      expect(describedBy).toContain('error-text')
+      expect(describedBy).toContain('helper-text')
+    })
+  })
 })

packages/react/src/components/fieldset/fieldset.test.tsx

@@ -1,5 +1,5 @@
 import { dataAttr } from '@zag-js/dom-query'
-import { useId, useMemo, useRef } from 'react'
+import { useId, useRef, useState } from 'react'
 import { useEnvironmentContext } from '../../providers'
 import { useSafeLayoutEffect } from '../../utils/use-safe-layout-effect'
 import type { HTMLProps } from '../factory'
@@ -27,8 +27,7 @@ export const useFieldset = (props: UseFieldsetProps = {}) => {
 
   const env = useEnvironmentContext()
 
-  const hasErrorText = useRef(false)
-  const hasHelperText = useRef(false)
+  const [textElements, setTextElements] = useState({ hasErrorText: false, hasHelperText: false })
 
   const uid = useId()
   const id = props.id ?? uid
@@ -44,8 +43,9 @@ export const useFieldset = (props: UseFieldsetProps = {}) => {
 
     const checkTextElements = () => {
       const docOrShadowRoot = env.getRootNode() as ShadowRoot | Document
-      hasErrorText.current = !!docOrShadowRoot.getElementById(errorTextId)
-      hasHelperText.current = !!docOrShadowRoot.getElementById(helperTextId)
+      const hasErrorText = !!docOrShadowRoot.getElementById(errorTextId)
+      const hasHelperText = !!docOrShadowRoot.getElementById(helperTextId)
+      setTextElements({ hasErrorText, hasHelperText })
     }
 
     checkTextElements()
@@ -57,56 +57,42 @@ export const useFieldset = (props: UseFieldsetProps = {}) => {
     return () => observer.disconnect()
   }, [env, errorTextId, helperTextId])
 
-  const labelIds = useMemo(() => {
-    const ids: string[] = []
-    if (hasErrorText.current && invalid) ids.push(errorTextId)
-    if (hasHelperText.current) ids.push(helperTextId)
-    return ids.join(' ') || undefined
-  }, [invalid, errorTextId, helperTextId])
-
-  const getRootProps = useMemo(
-    () => () =>
-      ({
-        ...parts.root.attrs,
-        ref: rootRef,
-        disabled,
-        'data-disabled': dataAttr(disabled),
-        'data-invalid': dataAttr(invalid),
-        'aria-labelledby': legendId,
-        'aria-describedby': labelIds,
-      }) as HTMLProps<'fieldset'>,
-    [disabled, invalid, legendId, labelIds],
-  )
-
-  const getLegendProps = useMemo(
-    () => () =>
-      ({
-        id: legendId,
-        ...parts.legend.attrs,
-        'data-disabled': dataAttr(disabled),
-        'data-invalid': dataAttr(invalid),
-      }) as HTMLProps<'legend'>,
-    [legendId, disabled, invalid],
-  )
-
-  const getHelperTextProps = useMemo(
-    () => () =>
-      ({
-        id: helperTextId,
-        ...parts.helperText.attrs,
-      }) as HTMLProps<'span'>,
-    [helperTextId],
-  )
-
-  const getErrorTextProps = useMemo(
-    () => () =>
-      ({
-        id: errorTextId,
-        ...parts.errorText.attrs,
-        'aria-live': 'polite',
-      }) as HTMLProps<'span'>,
-    [errorTextId],
-  )
+  const ids: string[] = []
+  if (textElements.hasErrorText && invalid) ids.push(errorTextId)
+  if (textElements.hasHelperText) ids.push(helperTextId)
+  const labelIds = ids.length > 0 ? ids.join(' ') : undefined
+
+  const getRootProps = () =>
+    ({
+      ...parts.root.attrs,
+      ref: rootRef,
+      disabled,
+      'data-disabled': dataAttr(disabled),
+      'data-invalid': dataAttr(invalid),
+      'aria-labelledby': legendId,
+      'aria-describedby': labelIds,
+    }) as HTMLProps<'fieldset'>
+
+  const getLegendProps = () =>
+    ({
+      id: legendId,
+      ...parts.legend.attrs,
+      'data-disabled': dataAttr(disabled),
+      'data-invalid': dataAttr(invalid),
+    }) as HTMLProps<'legend'>
+
+  const getHelperTextProps = () =>
+    ({
+      id: helperTextId,
+      ...parts.helperText.attrs,
+    }) as HTMLProps<'span'>
+
+  const getErrorTextProps = () =>
+    ({
+      id: errorTextId,
+      ...parts.errorText.attrs,
+      'aria-live': 'polite',
+    }) as HTMLProps<'span'>
 
   return {
     refs: {

packages/react/src/components/fieldset/use-fieldset.ts

@@ -1,5 +1,15 @@
 ## [Unreleased]
 
+## [5.29.1] - 2025-11-22
+
+### Fixed
+
+- **Fieldset**: Fixed `aria-describedby` resolution to correctly reference helper text and error text IDs
+- **Floating Panel**:
+  - Fixed resize trigger issue with `n` axis by explicitly setting `top: 0`
+  - Fixed `draggable` and `resizable` options not being respected when set to `false`
+- **Presence**: Fixed regression where UNMOUNT transition might not be called consistently
+
 ## [5.29.0] - 2025-11-20
 
 ### Added