fix(ResizablePanel): stabilize & remove flex layout requirement (#538)

Author: tenphi

.changeset/silver-peaches-float.md

@@ -0,0 +1,5 @@
+---
+'@cube-dev/ui-kit': patch
+---
+
+Stabilize ResizablePanel & remove requirement for the flex layout.

src/components/layout/Panel.tsx

@@ -1,10 +1,4 @@
-import {
-  createContext,
-  ForwardedRef,
-  forwardRef,
-  ReactNode,
-  useMemo,
-} from 'react';
+import { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react';
 
 import {
   BASE_STYLES,
@@ -21,14 +15,6 @@ import {
   tasty,
 } from '../../tasty';
 
-export interface PanelContextData {
-  layout: 'grid' | 'flex';
-}
-
-export const PanelContext = createContext<PanelContextData>({
-  layout: 'grid',
-});
-
 const PanelElement = tasty({
   as: 'section',
   qa: 'Panel',
@@ -164,25 +150,19 @@ function Panel(props: CubePanelProps, ref: ForwardedRef<HTMLDivElement>) {
   );
 
   return (
-    <PanelContext.Provider
-      value={{
-        layout: isFlex ? 'flex' : 'grid',
-      }}
+    <PanelElement
+      ref={ref}
+      qa={qa}
+      mods={appliedMods}
+      styles={styles}
+      style={style}
+      {...otherProps}
     >
-      <PanelElement
-        ref={ref}
-        qa={qa}
-        mods={appliedMods}
-        styles={styles}
-        style={style}
-        {...otherProps}
-      >
-        <PanelInnerElement mods={appliedMods} styles={innerStyles}>
-          {children}
-        </PanelInnerElement>
-        {extra}
-      </PanelElement>
-    </PanelContext.Provider>
+      <PanelInnerElement mods={appliedMods} styles={innerStyles}>
+        {children}
+      </PanelInnerElement>
+      {extra}
+    </PanelElement>
   );
 }
 

src/components/layout/ResizablePanel.stories.tsx

@@ -57,6 +57,13 @@ const TemplateControllable: StoryFn<CubeResizablePanelProps> = (args) => {
   );
 };
 
+const GridTemplate: StoryFn<CubeResizablePanelProps> = (args) => (
+  <Panel isStretched height="min 30x" fill="#white" gridColumns="auto 1fr">
+    <ResizablePanel size={300} {...args} />
+    <Panel fill="#light"></Panel>
+  </Panel>
+);
+
 export const ResizeRight = TemplateRight.bind({});
 ResizeRight.args = {
   direction: 'right',
@@ -86,3 +93,9 @@ export const Disabled = TemplateRight.bind({});
 Disabled.args = {
   isDisabled: true,
 };
+
+export const InGridLayout = GridTemplate.bind({});
+InGridLayout.args = {
+  direction: 'right',
+  maxSize: 500,
+};

src/components/layout/ResizablePanel.tsx

@@ -1,17 +1,10 @@
-import {
-  ForwardedRef,
-  forwardRef,
-  useContext,
-  useEffect,
-  useState,
-} from 'react';
+import { ForwardedRef, forwardRef, useEffect, useState } from 'react';
 import { useHover, useMove } from 'react-aria';
 
-import { useWarn } from '../../_internal/index';
 import { BasePropsWithoutChildren, Styles, tasty } from '../../tasty/index';
 import { mergeProps, useCombinedRefs } from '../../utils/react/index';
 
-import { Panel, CubePanelProps, PanelContext } from './Panel';
+import { Panel, CubePanelProps } from './Panel';
 
 type Direction = 'top' | 'right' | 'bottom' | 'left';
 
@@ -166,16 +159,6 @@ function ResizablePanel(
   props: CubeResizablePanelProps,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const panelContext = useContext(PanelContext);
-
-  useWarn(panelContext.layout !== 'flex', {
-    once: true,
-    key: 'resizable panel layout requirement',
-    args: [
-      'ResizablePanel can only be used inside a flex layout. Use Panel with `isFlex` property to create one.',
-    ],
-  });
-
   const isControllable = typeof props.size === 'number';
   const {
     isDisabled,
@@ -240,16 +223,19 @@ function ResizablePanel(
     },
     onMoveEnd(e) {
       setIsDragging(false);
+      setSize((size) => clamp(Math.round(size)));
     },
   });
 
   useEffect(() => {
-    onSizeChange?.(size);
+    if (providedSize == null || Math.abs(providedSize - size) > 0.5) {
+      onSizeChange?.(size);
+    }
   }, [size]);
 
   useEffect(() => {
-    if (providedSize) {
-      setSize(providedSize);
+    if (providedSize && Math.abs(providedSize - size) > 0.5) {
+      setSize(clamp(providedSize));
     }
   }, [providedSize]);