reka-ui 2.9.0 → 2.9.2

package/src/Splitter/utils/callPanelCallbacks.ts

@@ -1,41 +1,49 @@
 import type { PanelData } from '../SplitterPanel.vue'
 import { assert } from './assert'
+import { fuzzyNumbersEqual } from './compare'
 
 // Layout should be pre-converted into percentages
 export function callPanelCallbacks(
   panelsArray: PanelData[],
   layout: number[],
   panelIdToLastNotifiedSizeMap: Record<string, number>,
+  groupSizeInPixels?: number | null,
 ) {
   layout.forEach((size, index) => {
     const panelData = panelsArray[index]
     assert(panelData)
 
     const { callbacks, constraints, id: panelId } = panelData
-    const { collapsedSize = 0, collapsible } = constraints
+    const { collapsedSize = 0, collapsible, sizeUnit } = constraints
+
+    // Convert size to native units for px panels
+    let displaySize = size
+    if (sizeUnit === 'px' && groupSizeInPixels != null) {
+      displaySize = (size / 100) * groupSizeInPixels
+    }
 
     const lastNotifiedSize = panelIdToLastNotifiedSizeMap[panelId]
-    if (lastNotifiedSize == null || size !== lastNotifiedSize) {
-      panelIdToLastNotifiedSizeMap[panelId] = size
+    if (lastNotifiedSize == null || !fuzzyNumbersEqual(displaySize, lastNotifiedSize)) {
+      panelIdToLastNotifiedSizeMap[panelId] = displaySize
 
       const { onCollapse, onExpand, onResize } = callbacks
 
       if (onResize)
-        onResize(size, lastNotifiedSize)
+        onResize(displaySize, lastNotifiedSize)
 
       if (collapsible && (onCollapse || onExpand)) {
         if (
           onExpand
-          && (lastNotifiedSize == null || lastNotifiedSize === collapsedSize)
-          && size !== collapsedSize
+          && (lastNotifiedSize == null || fuzzyNumbersEqual(lastNotifiedSize, collapsedSize))
+          && !fuzzyNumbersEqual(displaySize, collapsedSize)
         ) {
           onExpand()
         }
 
         if (
           onCollapse
-          && (lastNotifiedSize == null || lastNotifiedSize !== collapsedSize)
-          && size === collapsedSize
+          && (lastNotifiedSize == null || !fuzzyNumbersEqual(lastNotifiedSize, collapsedSize))
+          && fuzzyNumbersEqual(displaySize, collapsedSize)
         ) {
           onCollapse()
         }

package/src/Splitter/utils/units.ts

@@ -157,5 +157,17 @@ export function recalculateLayoutForPixelPanels({
     nextLayout[index] = prevSize * scaleFactor
   }
 
+  // Normalize to ensure percentages always sum to exactly 100.
+  // Floating-point arithmetic in the px→% conversions above can cause drift
+  // (e.g. 99.89% instead of 100%) that gets persisted to localStorage and
+  // triggers validation warnings on every subsequent page load.
+  const total = nextLayout.reduce((sum, size) => sum + size, 0)
+  if (total > 0 && Math.abs(total - 100) > 1e-9) {
+    const factor = 100 / total
+    for (let index = 0; index < nextLayout.length; index++) {
+      nextLayout[index] = (nextLayout[index] ?? 0) * factor
+    }
+  }
+
   return nextLayout
 }

package/src/Toast/FocusProxy.vue

@@ -11,7 +11,6 @@ const providerContext = injectToastProviderContext()
 
 <template>
   <VisuallyHidden
-    aria-hidden="true"
     tabindex="0"
     style="position: fixed"
     @focus="(event: FocusEvent) => {

package/src/Toast/ToastRootImpl.vue

@@ -182,7 +182,6 @@ provideToastRootContext({ onClose: handleClose })
     v-if="announceTextContent"
     role="alert"
     :aria-live="type === 'foreground' ? 'assertive' : 'polite'"
-    aria-atomic="true"
   >
     {{ announceTextContent }}
   </ToastAnnounce>
@@ -194,9 +193,6 @@ provideToastRootContext({ onClose: handleClose })
     <CollectionItem>
       <Primitive
         :ref="forwardRef"
-        role="alert"
-        aria-live="off"
-        aria-atomic="true"
         tabindex="0"
         v-bind="$attrs"
         :as="as"

package/src/YearPicker/YearPickerGrid.vue

@@ -20,7 +20,7 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
   <Primitive
     v-bind="props"
     tabindex="-1"
-    role="grid"
+    role="application"
     :aria-labelledby="rootContext.headingId"
     :aria-readonly="readonly"
     :aria-disabled="disabled"

package/src/YearRangePicker/YearRangePickerGrid.vue

@@ -20,7 +20,7 @@ const readonly = computed(() => rootContext.readonly.value ? true : undefined)
   <Primitive
     v-bind="props"
     tabindex="-1"
-    role="grid"
+    role="application"
     :aria-labelledby="rootContext.headingId"
     :aria-readonly="readonly"
     :aria-disabled="disabled"

package/src/shared/date/useDateField.ts

@@ -874,9 +874,10 @@ export function useDateField(props: UseDateFieldProps) {
   function handleSegmentKeydown(e: KeyboardEvent) {
     const disabled = props.disabled.value
     const readonly = props.readonly.value
-
     if (disabled || readonly)
       return
+    if (e.key !== kbd.TAB)
+      e.preventDefault()
     const segmentKeydownHandlers = {
       day: handleDaySegmentKeydown,
       month: handleMonthSegmentKeydown,

package/src/shared/useBodyScrollLock.ts

@@ -80,6 +80,8 @@ const useBodyLockStackCount = createSharedComposable(() => {
 
     // let dismissibleLayer set previous pointerEvent first
     nextTick(() => {
+      if (!locked.value)
+        return
       document.body.style.pointerEvents = 'none'
       document.body.style.overflow = 'hidden'
     })

package/src/shared/useHideOthers.ts

@@ -16,7 +16,14 @@ export function useHideOthers(target: MaybeElementRef) {
     // disable hideOthers on test mode
     if (import.meta.env.MODE === 'test')
       return
-    if (el)
+    // Skip if inside a closed native popover
+    // Use try/catch as `:popover-open` pseudo-class is not supported in all browsers (e.g. Safari 18)
+    let isInsideClosedPopover = false
+    try {
+      isInsideClosedPopover = !!el?.closest('[popover]:not(:popover-open)')
+    }
+    catch {}
+    if (el && !isInsideClosedPopover)
       undo = hideOthers(el)
     else if (undo)
       undo()