@djangocfg/ui-core 2.1.40 → 2.1.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.40",
+  "version": "2.1.41",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -102,7 +102,7 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.40",
+    "@djangocfg/typescript-config": "^2.1.41",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/index.ts

@@ -27,7 +27,7 @@ export { Skeleton } from './skeleton';
 export { AspectRatio } from './aspect-ratio';
 export { ScrollArea, ScrollBar } from './scroll-area';
 export type { ScrollAreaHandle, ScrollAreaProps } from './scroll-area';
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup } from './resizable';
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup, useResizableDragging } from './resizable';
 export type { ResizableHandleProps } from './resizable';
 export { Sticky } from './sticky';
 export { Portal } from './portal';

package/src/components/resizable.tsx

@@ -5,11 +5,21 @@ import * as ResizablePrimitive from "react-resizable-panels"
 import { cn } from "../lib/utils"
 import { DragHandleDots2Icon } from "@radix-ui/react-icons"
 
+// Context to share dragging state across panel group
+const ResizableDraggingContext = React.createContext<{
+  isDragging: boolean
+  setIsDragging: (value: boolean) => void
+}>({ isDragging: false, setIsDragging: () => {} })
+
+// Hook to check if panel group is being resized
+export const useResizableDragging = () => React.useContext(ResizableDraggingContext)
+
 const ResizablePanelGroup = ({
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => {
   const [mounted, setMounted] = React.useState(false)
+  const [isDragging, setIsDragging] = React.useState(false)
 
   React.useEffect(() => {
     setMounted(true)
@@ -30,13 +40,16 @@ const ResizablePanelGroup = ({
   }
 
   return (
-    <ResizablePrimitive.PanelGroup
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
+    <ResizableDraggingContext.Provider value={{ isDragging, setIsDragging }}>
+      <ResizablePrimitive.PanelGroup
+        className={cn(
+          "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+          className
+        )}
+        data-dragging={isDragging ? "true" : undefined}
+        {...props}
+      />
+    </ResizableDraggingContext.Provider>
   )
 }
 
@@ -94,14 +107,22 @@ const ResizableHandle = ({
   size = 'md',
   showIndicator = false,
   indicatorHeight = 32,
+  onDragging,
   ...props
 }: ResizableHandleProps) => {
   const [mounted, setMounted] = React.useState(false)
+  const { setIsDragging } = React.useContext(ResizableDraggingContext)
 
   React.useEffect(() => {
     setMounted(true)
   }, [])
 
+  // Handle drag state change - update context and call user callback
+  const handleDragging = React.useCallback((isDragging: boolean) => {
+    setIsDragging(isDragging)
+    onDragging?.(isDragging)
+  }, [setIsDragging, onDragging])
+
   // Size variants for hit area
   const sizeClasses = {
     sm: 'after:w-0.5',
@@ -129,6 +150,8 @@ const ResizableHandle = ({
         "w-px h-full",
         "hover:bg-primary/20 active:bg-primary/30",
         "transition-colors",
+        // Touch handling for better drag performance
+        "touch-none select-none",
         // Invisible hit area for easier dragging
         "after:absolute after:inset-y-0 after:left-1/2 after:-translate-x-1/2",
         sizeClasses[size],
@@ -140,6 +163,8 @@ const ResizableHandle = ({
         "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
         className
       )}
+      style={{ touchAction: 'none' }}
+      onDragging={handleDragging}
       {...props}
     >
       {/* Optional pill indicator */}