Resizable onExpand and onCollapse do not work.

[letahitien]

I'm using the Resizable component in a Next.js 14.1.0 project.

Here is the Resizable component:

import * as ResizablePrimitive from 'react-resizable-panels'
import { GripVertical } from 'lucide-react'

import { cn } from 'lib/utils'

const ResizablePanelGroup = ({
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
  <ResizablePrimitive.PanelGroup
    className={cn(
      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
      className
    )}
    {...props}
  />
)

const ResizablePanel = ResizablePrimitive.Panel

const ResizableHandle = ({
  withHandle,
  className,
  ...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
  withHandle?: boolean
}) => (
  <ResizablePrimitive.PanelResizeHandle
    className={cn(
      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
      className
    )}
    {...props}
  >
    {withHandle && (
      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
        <GripVertical className="h-2.5 w-2.5" />
      </div>
    )}
  </ResizablePrimitive.PanelResizeHandle>
)

export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

And here's the code that doesn't work:

<ResizablePanelGroup direction="horizontal">
  <ResizablePanel
    onResize={(size, prevSize) => {
      console.log('resize', size)
    }}
    collapsedSize={COLLAPSED_SIZE}
    onCollapse={() => {
      console.log('collapse')
    }}
    onExpand={() => {
      console.log('expand')
    }}
    className="h-screen"
    minSize={18}
    maxSize={18}
    collapsible
    order={1}
  >
    <Side profile={profile} params={params} />
  </ResizablePanel>
  <ResizableHandle className="bg-primary/[28%]" />
  <ResizablePanel className="h-screen" order={2}>
    <Content loading={true} profile={profile} params={params}>
      {children}
    </Content>
  </ResizablePanel>
</ResizablePanelGroup>

Collapse works correctly, but I get no feedback from the onCollapse and onExpand functions, whereas onResize works.

[DanSivewright]

I downgraded to the following for 'react-resizable-panels' and all seems to be working!

"react-resizable-panels": "^0.0.55".

[mk0y]

For me onResize and onDragging break component's functionality i.e. dragging stops working when i do setState in the callback. console.log works tho. any ideas?