reka-ui 2.8.2 → 2.9.0

package/src/RangeCalendar/RangeCalendarRoot.vue

@@ -80,7 +80,7 @@ export interface RangeCalendarRootProps extends PrimitiveProps {
   defaultPlaceholder?: DateValue
   /** The default value for the calendar */
   defaultValue?: DateRange
-  /** The controlled checked state of the calendar. Can be bound as `v-model`. */
+  /** The controlled selected date range of the calendar. Can be bound as `v-model`. */
   modelValue?: DateRange | null
   /** The placeholder date, which is used to determine what month to display when no date is selected. This updates as the user navigates the calendar and can be used to programmatically control the calendar view */
   placeholder?: DateValue
@@ -379,7 +379,7 @@ watch([startValue, endValue], ([_startValue, _endValue]) => {
 })
 
 const kbd = useKbd()
-useEventListener('keydown', (ev) => {
+useEventListener(parentElement, 'keydown', (ev) => {
   if (ev.key === kbd.ESCAPE && isEditing.value) {
     // Abort start and end selection
     startValue.value = validModelValue.value.start?.copy()

package/src/RangeCalendar/useRangeCalendar.ts

@@ -124,15 +124,12 @@ export function useRangeCalendarState(props: UseRangeCalendarProps) {
     if (props.maximumDays?.value && !props.end.value) {
       const maximumDays = props.maximumDays.value
       const anchor = props.start.value
+      const focused = props.focusedValue.value
 
-      if (isStartBeforeFocused) {
-        const maxEnd = anchor.add({ days: maximumDays - 1 })
-        return { start: anchor, end: maxEnd }
-      }
-      else {
-        const minStart = anchor.subtract({ days: maximumDays - 1 })
-        return { start: minStart, end: anchor }
-      }
+      if (!isBefore(focused, anchor))
+        return { start: anchor, end: anchor.add({ days: maximumDays - 1 }) }
+
+      return { start: anchor.subtract({ days: maximumDays - 1 }), end: anchor }
     }
 
     const isValid = areAllDaysBetweenValid(start, end, props.allowNonContiguousRanges.value ? () => false : props.isDateUnavailable, rangeIsDateDisabled, props.isDateHighlightable)

package/src/Splitter/SplitterGroup.vue

@@ -79,6 +79,7 @@ import { Primitive } from '@/Primitive'
 import { assert } from './utils/assert'
 import { calculateDeltaPercentage, calculateUnsafeDefaultLayout } from './utils/calculate'
 import { callPanelCallbacks } from './utils/callPanelCallbacks'
+import { fuzzyCompareNumbers } from './utils/compare'
 import debounce from './utils/debounce'
 import { getResizeHandleElement } from './utils/dom'
 import { getResizeEventCursorPosition, isKeyDown, isMouseEvent, isTouchEvent } from './utils/events'
@@ -92,6 +93,7 @@ import {
   reportConstraintsViolation,
 } from './utils/registry'
 import { computePanelFlexBoxStyle } from './utils/style'
+import { convertPanelConstraintsToPercent, hasPixelSizedPanel, recalculateLayoutForPixelPanels } from './utils/units'
 import { validatePanelGroupLayout } from './utils/validation'
 
 const props = withDefaults(defineProps<SplitterGroupProps>(), {
@@ -118,6 +120,7 @@ const dir = useDirection()
 const { forwardRef, currentElement: panelGroupElementRef } = useForwardExpose()
 
 const dragState = ref<DragState | null>(null)
+const groupSizeInPixels = ref<number | null>(null)
 const layout = ref<number[]>([])
 const panelIdToLastNotifiedSizeMapRef = ref<Record<string, number>>({})
 const panelSizeBeforeCollapseRef = ref<Map<string, number>>(new Map())
@@ -149,6 +152,45 @@ const eagerValuesRef = ref<{
   panelDataArrayChanged: false,
 })
 
+function getGroupSizeInPixels(): number | null {
+  if (groupSizeInPixels.value != null)
+    return groupSizeInPixels.value
+
+  const element = panelGroupElementRef.value
+  if (element && element instanceof HTMLElement) {
+    const rect = element.getBoundingClientRect()
+    const size = direction.value === 'horizontal' ? rect.width : rect.height
+
+    if (!Number.isNaN(size)) {
+      groupSizeInPixels.value = size
+      return size
+    }
+  }
+
+  return null
+}
+
+function getPanelConstraintsInPercent(groupSizeOverride?: number | null) {
+  const groupSize = groupSizeOverride ?? getGroupSizeInPixels()
+
+  return convertPanelConstraintsToPercent({
+    panelDataArray: eagerValuesRef.value.panelDataArray,
+    groupSizeInPixels: groupSize,
+  })
+}
+
+function getPanelDataWithPercentConstraints(groupSizeOverride?: number | null) {
+  const percentConstraints = getPanelConstraintsInPercent(groupSizeOverride)
+
+  if (!percentConstraints)
+    return null
+
+  return eagerValuesRef.value.panelDataArray.map((panelData, index) => ({
+    ...panelData,
+    constraints: percentConstraints[index],
+  }))
+}
+
 const setLayout = (val: number[]) => layout.value = val
 
 useWindowSplitterPanelGroupBehavior({
@@ -158,6 +200,33 @@ useWindowSplitterPanelGroupBehavior({
   panelDataArray: eagerValuesRef.value.panelDataArray,
   setLayout,
   panelGroupElement: panelGroupElementRef,
+  getPanelDataWithPercentConstraints,
+})
+
+watchEffect((onCleanup) => {
+  const element = panelGroupElementRef.value
+  if (!element)
+    return
+
+  if (typeof ResizeObserver !== 'function')
+    return
+
+  const resizeObserver = new ResizeObserver((entries) => {
+    const entry = entries[0]
+    if (!entry)
+      return
+
+    const { height, width } = entry.contentRect
+    const nextSize = direction.value === 'horizontal' ? width : height
+
+    if (!Number.isNaN(nextSize))
+      groupSizeInPixels.value = nextSize
+  })
+
+  if (element instanceof HTMLElement)
+    resizeObserver.observe(element)
+
+  onCleanup(() => resizeObserver.disconnect())
 })
 
 watchEffect(() => {
@@ -254,18 +323,24 @@ watch(() => eagerValuesRef.value.panelDataArrayChanged, () => {
     }
 
     if (unsafeLayout === null) {
+      const panelDataArrayWithPercentConstraints = getPanelDataWithPercentConstraints()
+      if (!panelDataArrayWithPercentConstraints)
+        return
+
       unsafeLayout = calculateUnsafeDefaultLayout({
-        panelDataArray,
+        panelDataArray: panelDataArrayWithPercentConstraints,
       })
     }
 
+    const panelConstraints = getPanelConstraintsInPercent()
+    if (!panelConstraints)
+      return
+
     // Validate even saved layouts in case something has changed since last render
     // e.g. for pixel groups, this could be the size of the window
     const nextLayout = validatePanelGroupLayout({
       layout: unsafeLayout,
-      panelConstraints: panelDataArray.map(
-        panelData => panelData.constraints,
-      ),
+      panelConstraints,
     })
 
     if (!areEqual(prevLayout, nextLayout)) {
@@ -283,6 +358,49 @@ watch(() => eagerValuesRef.value.panelDataArrayChanged, () => {
   }
 })
 
+watch(groupSizeInPixels, (nextSize, prevSize) => {
+  if (prevSize == null || nextSize == null)
+    return
+
+  const { layout: prevLayout, panelDataArray } = eagerValuesRef.value
+  if (prevLayout.length === 0)
+    return
+  if (!hasPixelSizedPanel(panelDataArray))
+    return
+
+  const recalculatedLayout = recalculateLayoutForPixelPanels({
+    layout: prevLayout,
+    panelDataArray,
+    prevGroupSize: prevSize,
+    nextGroupSize: nextSize,
+  })
+
+  if (!recalculatedLayout)
+    return
+
+  const panelConstraints = getPanelConstraintsInPercent(nextSize)
+  if (!panelConstraints)
+    return
+
+  const nextLayout = validatePanelGroupLayout({
+    layout: recalculatedLayout,
+    panelConstraints,
+  })
+
+  if (!compareLayouts(prevLayout, nextLayout)) {
+    setLayout(nextLayout)
+
+    eagerValuesRef.value.layout = nextLayout
+    emits('layout', nextLayout)
+
+    callPanelCallbacks(
+      panelDataArray,
+      nextLayout,
+      panelIdToLastNotifiedSizeMapRef.value,
+    )
+  }
+})
+
 function registerResizeHandle(dragHandleId: string) {
   return function resizeHandler(event: ResizeEvent) {
     event.preventDefault()
@@ -317,7 +435,9 @@ function registerResizeHandle(dragHandleId: string) {
     if (dir.value === 'rtl' && isHorizontal)
       delta = -delta
 
-    const panelConstraints = panelDataArray.map(panelData => panelData.constraints)
+    const panelConstraints = getPanelConstraintsInPercent()
+    if (!panelConstraints)
+      return
 
     const nextLayout = adjustLayoutByDelta({
       delta,
@@ -378,20 +498,35 @@ function registerResizeHandle(dragHandleId: string) {
 function resizePanel(panelData: PanelData, unsafePanelSize: number) {
   const { layout: prevLayout, panelDataArray } = eagerValuesRef.value
 
-  const panelConstraintsArray = panelDataArray.map(panelData => panelData.constraints)
+  const panelConstraintsArray = getPanelConstraintsInPercent()
+  if (!panelConstraintsArray)
+    return
+
+  const panelIndex = findPanelDataIndex(panelDataArray, panelData)
+  const panelUnit = panelData.constraints.sizeUnit ?? '%'
+
+  // Convert px to percent if needed for internal calculation
+  let sizeInPercent = unsafePanelSize
+  if (panelUnit === 'px') {
+    const groupSize = getGroupSizeInPixels()
+    if (groupSize != null) {
+      sizeInPercent = (unsafePanelSize / groupSize) * 100
+    }
+  }
 
   const { panelSize, pivotIndices } = panelDataHelper(
     panelDataArray,
     panelData,
     prevLayout,
+    panelConstraintsArray,
   )
 
   assert(panelSize != null)
 
-  const isLastPanel = findPanelDataIndex(panelDataArray, panelData) === panelDataArray.length - 1
+  const isLastPanel = panelIndex === panelDataArray.length - 1
   const delta = isLastPanel
-    ? panelSize - unsafePanelSize
-    : unsafePanelSize - panelSize
+    ? panelSize - sizeInPercent
+    : sizeInPercent - panelSize
 
   const nextLayout = adjustLayoutByDelta({
     delta,
@@ -420,39 +555,29 @@ function reevaluatePanelConstraints(panelData: PanelData, prevConstraints: Panel
   const index = findPanelDataIndex(panelDataArray, panelData)
   panelDataArray[index] = panelData
   eagerValuesRef.value.panelDataArrayChanged = true
-  const {
-    collapsedSize: prevCollapsedSize = 0,
-    collapsible: prevCollapsible,
-  } = prevConstraints
 
-  const {
-    collapsedSize: nextCollapsedSize = 0,
-    collapsible: nextCollapsible,
-    maxSize: nextMaxSize = 100,
-    minSize: nextMinSize = 0,
-  } = panelData.constraints
+  const panelConstraintsArray = getPanelConstraintsInPercent()
+  if (!panelConstraintsArray)
+    return
 
+  const nextConstraints = panelConstraintsArray[index]
   const { panelSize: prevPanelSize } = panelDataHelper(
     panelDataArray,
     panelData,
     layout,
+    panelConstraintsArray,
   )
-  if (prevPanelSize === null) {
-    // It's possible that the panels in this group have changed since the last render
+
+  if (prevPanelSize === null)
     return
-  }
 
-  if (
-    prevCollapsible
-    && nextCollapsible
-    && prevPanelSize === prevCollapsedSize
-  ) {
-    if (prevCollapsedSize !== nextCollapsedSize) {
+  const nextCollapsedSize = nextConstraints?.collapsedSize ?? 0
+  const nextMaxSize = nextConstraints?.maxSize ?? 100
+  const nextMinSize = nextConstraints?.minSize ?? 0
+
+  if (nextConstraints?.collapsible && isPanelCollapsed(panelData)) {
+    if (prevPanelSize !== nextCollapsedSize)
       resizePanel(panelData, nextCollapsedSize)
-    }
-    else {
-      // Stay collapsed
-    }
   }
   else if (prevPanelSize < nextMinSize) {
     resizePanel(panelData, nextMinSize)
@@ -511,15 +636,15 @@ function collapsePanel(panelData: PanelData) {
   const { layout: prevLayout, panelDataArray } = eagerValuesRef.value
 
   if (panelData.constraints.collapsible) {
-    const panelConstraintsArray = panelDataArray.map(
-      panelData => panelData.constraints,
-    )
+    const panelConstraintsArray = getPanelConstraintsInPercent()
+    if (!panelConstraintsArray)
+      return
 
     const {
       collapsedSize = 0,
       panelSize,
       pivotIndices,
-    } = panelDataHelper(panelDataArray, panelData, prevLayout)
+    } = panelDataHelper(panelDataArray, panelData, prevLayout, panelConstraintsArray)
 
     assert(
       panelSize != null,
@@ -529,7 +654,13 @@ function collapsePanel(panelData: PanelData) {
     if (panelSize !== collapsedSize) {
       // Store size before collapse;
       // This is the size that gets restored if the expand() API is used.
-      panelSizeBeforeCollapseRef.value.set(panelData.id, panelSize)
+      const sizeUnit = panelData.constraints.sizeUnit ?? '%'
+      const groupSize = groupSizeInPixels.value ?? getGroupSizeInPixels()
+      const sizeBeforeCollapse = sizeUnit === 'px' && groupSize
+        ? (panelSize / 100) * groupSize
+        : panelSize
+
+      panelSizeBeforeCollapseRef.value.set(panelData.id, sizeBeforeCollapse)
 
       const isLastPanel
         = findPanelDataIndex(panelDataArray, panelData)
@@ -567,26 +698,35 @@ function expandPanel(panelData: PanelData) {
   const { layout: prevLayout, panelDataArray } = eagerValuesRef.value
 
   if (panelData.constraints.collapsible) {
-    const panelConstraintsArray = panelDataArray.map(
-      panelData => panelData.constraints,
-    )
+    const panelConstraintsArray = getPanelConstraintsInPercent()
+    if (!panelConstraintsArray)
+      return
 
     const {
       collapsedSize = 0,
-      panelSize,
+      panelSize = 0,
       minSize = 0,
       pivotIndices,
-    } = panelDataHelper(panelDataArray, panelData, prevLayout)
+    } = panelDataHelper(panelDataArray, panelData, prevLayout, panelConstraintsArray)
 
-    if (panelSize === collapsedSize) {
+    if (fuzzyCompareNumbers(panelSize, collapsedSize) <= 0) {
       // Restore this panel to the size it was before it was collapsed, if possible.
       const prevPanelSize = panelSizeBeforeCollapseRef.value.get(
         panelData.id,
       )
+      const sizeUnit = panelData.constraints.sizeUnit ?? '%'
+      const groupSize = groupSizeInPixels.value ?? getGroupSizeInPixels()
+
+      const restoredSize
+        = sizeUnit === 'px' && groupSize
+          ? prevPanelSize != null
+            ? (prevPanelSize / groupSize) * 100
+            : null
+          : prevPanelSize
 
       const baseSize
-        = prevPanelSize != null && prevPanelSize >= minSize
-          ? prevPanelSize
+        = restoredSize != null && restoredSize >= minSize
+          ? restoredSize
           : minSize
 
       const isLastPanel
@@ -629,24 +769,42 @@ function getPanelSize(panelData: PanelData) {
     `Panel size not found for panel "${panelData.id}"`,
   )
 
+  // If the panel uses px units, convert from percent back to px
+  const panelUnit = panelData.constraints.sizeUnit ?? '%'
+  if (panelUnit === 'px') {
+    const groupSize = getGroupSizeInPixels()
+    if (groupSize != null) {
+      return (panelSize / 100) * groupSize
+    }
+  }
+
   return panelSize
 }
 
 function isPanelCollapsed(panelData: PanelData) {
   const { layout, panelDataArray } = eagerValuesRef.value
 
+  const panelConstraintsArray = getPanelConstraintsInPercent()
+
   const {
     collapsedSize = 0,
     collapsible,
     panelSize,
-  } = panelDataHelper(panelDataArray, panelData, layout)
+  } = panelDataHelper(
+    panelDataArray,
+    panelData,
+    layout,
+    panelConstraintsArray ?? undefined,
+  )
 
   if (!collapsible)
     return false
 
   // panelSize is undefined during ssr due to vue ssr reactivity limitation.
   if (panelSize === undefined) {
-    return panelData.constraints.defaultSize === panelData.constraints.collapsedSize
+    const panelIndex = findPanelDataIndex(panelDataArray, panelData)
+    const constraints = panelConstraintsArray?.[panelIndex] ?? panelData.constraints
+    return constraints.defaultSize === constraints.collapsedSize
   }
   else {
     return panelSize === collapsedSize
@@ -656,11 +814,18 @@ function isPanelCollapsed(panelData: PanelData) {
 function isPanelExpanded(panelData: PanelData) {
   const { layout, panelDataArray } = eagerValuesRef.value
 
+  const panelConstraintsArray = getPanelConstraintsInPercent()
+
   const {
     collapsedSize = 0,
     collapsible,
     panelSize,
-  } = panelDataHelper(panelDataArray, panelData, layout)
+  } = panelDataHelper(
+    panelDataArray,
+    panelData,
+    layout,
+    panelConstraintsArray ?? undefined,
+  )
 
   assert(
     panelSize != null,
@@ -702,6 +867,7 @@ function panelDataHelper(
   panelDataArray: PanelData[],
   panelData: PanelData,
   layout: number[],
+  panelConstraints?: PanelConstraints[] | null,
 ) {
   const panelIndex = findPanelDataIndex(panelDataArray, panelData)
 
@@ -710,10 +876,13 @@ function panelDataHelper(
     ? [panelIndex - 1, panelIndex]
     : [panelIndex, panelIndex + 1]
 
+  const constraints = panelConstraints ?? getPanelConstraintsInPercent()
+  const panelConstraintsFromGroup = constraints?.[panelIndex]
+
   const panelSize = layout[panelIndex]
 
   return {
-    ...panelData.constraints,
+    ...(panelConstraintsFromGroup ?? panelData.constraints),
     panelSize,
     pivotIndices,
   }

package/src/Splitter/SplitterPanel.vue

@@ -4,20 +4,22 @@ import { useId } from '@/shared'
 import { PRECISION } from './utils/constants'
 
 export interface SplitterPanelProps extends PrimitiveProps {
-  /** The size of panel when it is collapsed. */
+  /** The size of panel when it is collapsed; interpreted using `sizeUnit`. */
   collapsedSize?: number
   /** Should panel collapse when resized beyond its `minSize`. When `true`, it will be collapsed to `collapsedSize`. */
   collapsible?: boolean
-  /** Initial size of panel (numeric value between 1-100) */
+  /** Initial size of panel, interpreted using `sizeUnit` (percent by default). */
   defaultSize?: number
   /** Panel id (unique within group); falls back to `useId` when not provided */
   id?: string
-  /** The maximum allowable size of panel (numeric value between 1-100); defaults to `100` */
+  /** The maximum allowable size of panel, interpreted using `sizeUnit`; defaults to `100` (percent). */
   maxSize?: number
-  /** The minimum allowable size of panel (numeric value between 1-100); defaults to `10` */
+  /** The minimum allowable size of panel, interpreted using `sizeUnit`; defaults to `10` (percent). */
   minSize?: number
   /** The order of panel within group; required for groups with conditionally rendered panels */
   order?: number
+  /** Unit used for sizing values; `%` by default, or `px` for fixed sizing. */
+  sizeUnit?: '%' | 'px'
 }
 
 export type SplitterPanelEmits = {
@@ -49,6 +51,7 @@ export type PanelConstraints = {
   /** Panel id (unique within group); falls back to useId when not provided */
   maxSize?: number | undefined
   minSize?: number | undefined
+  sizeUnit?: '%' | 'px' | undefined
 }
 
 export type PanelData = {
@@ -107,6 +110,7 @@ const panelDataRef = computed(() => ({
     /** Panel id (unique within group); falls back to useId when not provided */
     maxSize: props.maxSize,
     minSize: props.minSize,
+    sizeUnit: props.sizeUnit ?? '%',
   },
   id: panelId,
   idIsFromProps: props.id !== undefined,
@@ -121,6 +125,7 @@ watch(() => panelDataRef.value.constraints, (constraints, prevConstraints) => {
     || prevConstraints.collapsible !== constraints.collapsible
     || prevConstraints.maxSize !== constraints.maxSize
     || prevConstraints.minSize !== constraints.minSize
+    || prevConstraints.sizeUnit !== constraints.sizeUnit
   ) {
     reevaluatePanelConstraints(panelDataRef.value, prevConstraints)
   }
@@ -157,11 +162,11 @@ defineExpose({
   collapse,
   /** If panel is currently collapsed, expand it to its most recent size. */
   expand,
-  /** Gets the current size of the panel as a percentage (1 - 100). */
+  /** Gets the current size of the panel (in the panel's sizeUnit: percentage for '%', pixels for 'px'). */
   getSize() {
     return getPanelSize(panelDataRef.value)
   },
-  /** Resize panel to the specified percentage (1 - 100). */
+  /** Resize panel to the specified size (in the panel's sizeUnit: percentage for '%', pixels for 'px'). */
   resize,
   /** Returns `true` if the panel is currently collapsed */
   isCollapsed,

package/src/Splitter/utils/composables/useWindowSplitterPanelGroupBehavior.ts

@@ -17,6 +17,7 @@ export function useWindowSplitterPanelGroupBehavior({
   panelDataArray,
   panelGroupElement,
   setLayout,
+  getPanelDataWithPercentConstraints,
 }: {
   eagerValuesRef: Ref<{
     panelDataArray: PanelData[]
@@ -26,21 +27,26 @@ export function useWindowSplitterPanelGroupBehavior({
   panelDataArray: PanelData[]
   panelGroupElement: Ref<ParentNode | null>
   setLayout: (sizes: number[]) => void
+  getPanelDataWithPercentConstraints: (groupSizeOverride?: number | null) => PanelData[] | null
 }): void {
   watchEffect((onCleanup) => {
     const _panelGroupElement = panelGroupElement.value
     if (!_panelGroupElement)
       return
 
+    const panelDataArrayWithPercentConstraints = getPanelDataWithPercentConstraints()
+    if (!panelDataArrayWithPercentConstraints)
+      return
+
     const resizeHandleElements = getResizeHandleElementsForGroup(
       groupId,
       _panelGroupElement,
     )
 
-    for (let index = 0; index < panelDataArray.length - 1; index++) {
+    for (let index = 0; index < panelDataArrayWithPercentConstraints.length - 1; index++) {
       const { valueMax, valueMin, valueNow } = calculateAriaValues({
         layout: layout.value,
-        panelsArray: panelDataArray,
+        panelsArray: panelDataArrayWithPercentConstraints,
         pivotIndices: [index, index + 1],
       })
 
@@ -50,7 +56,7 @@ export function useWindowSplitterPanelGroupBehavior({
           console.warn(`WARNING: Missing resize handle for PanelGroup "${groupId}"`)
       }
       else {
-        const panelData = panelDataArray[index]
+        const panelData = panelDataArrayWithPercentConstraints[index]
         assert(panelData)
 
         resizeHandleElement.setAttribute('aria-controls', panelData.id)
@@ -87,6 +93,10 @@ export function useWindowSplitterPanelGroupBehavior({
     const eagerValues = eagerValuesRef.value
     assert(eagerValues)
 
+    const panelDataArrayWithPercentConstraints = getPanelDataWithPercentConstraints()
+    if (!panelDataArrayWithPercentConstraints)
+      return
+
     const { panelDataArray } = eagerValues
     const groupElement = getPanelGroupElement(groupId, _panelGroupElement)
     assert(groupElement != null, `No group found for id "${groupId}"`)
@@ -115,11 +125,11 @@ export function useWindowSplitterPanelGroupBehavior({
           case 'Enter': {
             event.preventDefault()
 
-            const index = panelDataArray.findIndex(
+            const index = panelDataArrayWithPercentConstraints.findIndex(
               panelData => panelData.id === idBefore,
             )
             if (index >= 0) {
-              const panelData = panelDataArray[index]
+              const panelData = panelDataArrayWithPercentConstraints[index]
               assert(panelData)
 
               const size = layout.value[index]
@@ -136,7 +146,7 @@ export function useWindowSplitterPanelGroupBehavior({
                     ? minSize - collapsedSize
                     : collapsedSize - size,
                   layout: layout.value,
-                  panelConstraints: panelDataArray.map(
+                  panelConstraints: panelDataArrayWithPercentConstraints.map(
                     panelData => panelData.constraints,
                   ),
                   pivotIndices: determinePivotIndices(

package/src/Splitter/utils/storage.ts

@@ -33,6 +33,9 @@ export type PanelConfigurationState = {
     [panelId: string]: number
   }
   layout: number[]
+  sizeUnits?: {
+    [panelIndex: number]: 'px' | '%'
+  }
 }
 
 export type SerializedPanelGroupState = {
@@ -102,9 +105,20 @@ export function savePanelGroupState(
   const panelGroupKey = getPanelGroupKey(autoSaveId)
   const panelKey = getPanelKey(panels)
   const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {}
+
+  // Store the size units for each panel so we can restore them correctly
+  const sizeUnits: { [panelIndex: number]: 'px' | '%' } = {}
+  panels.forEach((panel, index) => {
+    const unit = panel.constraints.sizeUnit ?? '%'
+    if (unit === 'px') {
+      sizeUnits[index] = 'px'
+    }
+  })
+
   state[panelKey] = {
     expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
     layout: sizes,
+    ...(Object.keys(sizeUnits).length > 0 && { sizeUnits }),
   }
 
   try {