Splitter - Set-Size example buggy / crashes

[sparecycles]

Description

When I do api().setSize("a", 10) I expect the panel to get resized to 10% of the size.

It doesn't do that consistently, just hitting the buttons makes the UI unresponsive.

Additionally: resizing a panel to under 10% and then setting the size to 10% throws an exception that the total is over 100%:
this breaks mouseover of the handle since state.context becomes undefined.

Link to Reproduction (or Detailed Explanation)

(video)

Steps to Reproduce

set-size.mp4

(Code from https://ark-ui.com/react/docs/components/splitter)

import { Splitter } from '@ark-ui/solid'

export const RenderProp = () => (
  <Splitter.Root
    size={[
      { id: 'a', size: 50 },
      { id: 'b', size: 50 },
    ]}
  >
    <Splitter.Context>
      {(api) => (
        <>
          <Splitter.Panel id="a">
            <button type="button" onClick={() => api().setSize('a', 10)}>
              Set to 10%
            </button>
          </Splitter.Panel>
          <Splitter.ResizeTrigger id="a:b" />
          <Splitter.Panel id="b">
            <button type="button" onClick={() => api().setSize('b', 10)}>
              Set to 10%
            </button>
          </Splitter.Panel>
        </>
      )}
    </Splitter.Context>
  </Splitter.Root>
)

Ark UI Version

3.3.0

Framework

• React
• Solid
• Vue

Browser

Electron 29.1.5

Additional Information

No response

[xeinebiu]

This issue does mention ArkUI 3.3.0, its really old version per my opinion.

[sparecycles]

Oh? I may try to reproduce it this weekend with current v4.2.0.

[Jdyn]

Hey @segunadebayo any update on this? We're still encountering this, which is further described in chakra-ui/ark#2967.

Still occurs on the latest version.