react-restyle-components 0.4.46 → 0.4.47

package/lib/src/core-components/src/components/Table/columnResize.js

@@ -1,40 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Column Resize Feature
- *
- * This file contains the column resizing functionality for the Table component.
- * It can be easily enabled/disabled via props without affecting core table logic.
- *
- * Features:
- * - Drag to resize columns
- * - Min/Max width constraints
- * - Double-click to auto-fit column width
- * - Persist column widths (optional)
- *
- * Usage:
- * <Table
- *   resizable={true}
- *   resizeConfig={{
- *     minWidth: 50,
- *     maxWidth: 500,
- *     onResize: (columnWidths) => console.log(columnWidths),
- *   }}
- * />
- */
-import { useRef, useState, useCallback, useEffect, useMemo, } from 'react';
-import { styled, css, keyframes } from 'styled-components';
-// ============================================================================
-// Animations
-// ============================================================================
-const pulseGlow = keyframes `
+"use strict";import{jsx as N,jsxs as T}from"react/jsx-runtime";import{useRef as b,useState as R,useCallback as l,useEffect as U,useMemo as V}from"react";import{styled as Y,css as B,keyframes as M}from"styled-components";const J=M`
   0%, 100% { 
     box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
   }
   50% { 
     box-shadow: 0 0 8px 2px rgba(59, 130, 246, 0.6);
   }
-`;
-const slideIn = keyframes `
+`,K=M`
   from { 
     transform: scaleY(0);
     opacity: 0;
@@ -43,19 +14,14 @@ const slideIn = keyframes `
     transform: scaleY(1);
     opacity: 1;
   }
-`;
-const shimmer = keyframes `
+`,tt=M`
   0% { background-position: -200% 0; }
   100% { background-position: 200% 0; }
-`;
-// ============================================================================
-// Styled Components
-// ============================================================================
-export const ResizeHandle = styled.div `
+`;export const ResizeHandle=Y.div`
   position: absolute;
   top: 0;
   right: -2px;
-  width: ${({ $handleWidth }) => ($handleWidth || 8) + 4}px;
+  width: ${({$handleWidth:t})=>(t||8)+4}px;
   height: 100%;
   cursor: col-resize;
   background: transparent;
@@ -73,26 +39,23 @@ export const ResizeHandle = styled.div `
     top: 20%;
     width: 3px;
     height: 60%;
-    background: ${({ $isResizing, $handleColor, $handleHoverColor }) => $isResizing
-    ? $handleHoverColor || '#3b82f6'
-    : $handleColor || 'rgba(255, 255, 255, 0.25)'};
+    background: ${({$isResizing:t,$handleColor:h,$handleHoverColor:s})=>t?s||"#3b82f6":h||"rgba(255, 255, 255, 0.25)"};
     border-radius: 2px;
     transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-    transform: scaleY(${({ $isResizing }) => ($isResizing ? 1 : 0.7)});
+    transform: scaleY(${({$isResizing:t})=>t?1:.7});
   }
 
   /* Hover effect - expand and glow */
   &:hover::after {
-    background: ${({ $handleHoverColor }) => $handleHoverColor || '#3b82f6'};
+    background: ${({$handleHoverColor:t})=>t||"#3b82f6"};
     transform: scaleY(1);
     box-shadow: 0 0 8px rgba(59, 130, 246, 0.5);
   }
 
   /* Active/resizing state */
-  ${({ $isResizing }) => $isResizing &&
-    css `
+  ${({$isResizing:t})=>t&&B`
       &::after {
-        animation: ${pulseGlow} 1s ease-in-out infinite;
+        animation: ${J} 1s ease-in-out infinite;
         transform: scaleY(1.1);
       }
 
@@ -128,32 +91,31 @@ export const ResizeHandle = styled.div `
   &:hover::before {
     opacity: 1;
   }
-`;
-export const ResizeLine = styled.div `
+`,ResizeLine=Y.div`
   position: fixed;
   top: 0;
-  left: ${({ $left }) => $left}px;
+  left: ${({$left:t})=>t}px;
   width: 2px;
   height: 100vh;
   pointer-events: none;
   z-index: 10000;
-  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  opacity: ${({$visible:t})=>t?1:0};
   transition: opacity 0.15s ease, transform 0.1s ease;
-  transform: ${({ $visible }) => ($visible ? 'scaleX(1)' : 'scaleX(0)')};
+  transform: ${({$visible:t})=>t?"scaleX(1)":"scaleX(0)"};
   transform-origin: center;
 
   /* Gradient line with glow effect */
   background: linear-gradient(
     to bottom,
     transparent 0%,
-    ${({ $color }) => $color || '#3b82f6'} 5%,
-    ${({ $color }) => $color || '#3b82f6'} 95%,
+    ${({$color:t})=>t||"#3b82f6"} 5%,
+    ${({$color:t})=>t||"#3b82f6"} 95%,
     transparent 100%
   );
   box-shadow: 
-    0 0 10px ${({ $color }) => $color || '#3b82f6'},
-    0 0 20px ${({ $color }) => ($color || '#3b82f6') + '80'},
-    0 0 30px ${({ $color }) => ($color || '#3b82f6') + '40'};
+    0 0 10px ${({$color:t})=>t||"#3b82f6"},
+    0 0 20px ${({$color:t})=>(t||"#3b82f6")+"80"},
+    0 0 30px ${({$color:t})=>(t||"#3b82f6")+"40"};
 
   /* Animated shimmer effect */
   &::after {
@@ -169,231 +131,6 @@ export const ResizeLine = styled.div `
       rgba(255, 255, 255, 0.3),
       transparent
     );
-    animation: ${slideIn} 0.3s ease-out;
+    animation: ${K} 0.3s ease-out;
   }
-`;
-// ============================================================================
-// Hook: useColumnResize
-// ============================================================================
-export function useColumnResize({ columns, config = {}, enabled = true, tableId, }) {
-    const { minWidth = 50, maxWidth = 800, autoFit = true, onResize, onResizeStart, onResizeEnd, defaultWidths = {}, handleColor, handleHoverColor, handleWidth = 4, } = config;
-    // Initialize column widths - Column-level width takes FIRST priority
-    const initialWidths = useMemo(() => {
-        const widths = {};
-        columns.forEach((col) => {
-            // Priority 1: Column-level width (user-defined in column)
-            if (typeof col.width === 'number') {
-                widths[col.dataField] = col.width;
-            }
-            else if (typeof col.width === 'string' && col.width.endsWith('px')) {
-                widths[col.dataField] = parseInt(col.width, 10);
-            }
-            // Priority 2: defaultWidths from resizeConfig (only if column width not set)
-            else if (defaultWidths[col.dataField]) {
-                widths[col.dataField] = defaultWidths[col.dataField];
-            }
-        });
-        return widths;
-    }, [columns, defaultWidths]);
-    const [columnWidths, setColumnWidths] = useState(initialWidths);
-    const [isResizing, setIsResizing] = useState(false);
-    const [resizingColumn, setResizingColumn] = useState(null);
-    // Refs for drag tracking
-    const startXRef = useRef(0);
-    const startWidthRef = useRef(0);
-    const currentColumnRef = useRef(null);
-    const headerRefMap = useRef(new Map());
-    // Update widths when columns change - Column-level width takes FIRST priority
-    useEffect(() => {
-        setColumnWidths((prev) => {
-            const newWidths = { ...prev };
-            columns.forEach((col) => {
-                // Only add if not already set (user hasn't resized it)
-                if (!(col.dataField in newWidths)) {
-                    // Priority 1: Column-level width
-                    if (typeof col.width === 'number') {
-                        newWidths[col.dataField] = col.width;
-                    }
-                    else if (typeof col.width === 'string' && col.width.endsWith('px')) {
-                        newWidths[col.dataField] = parseInt(col.width, 10);
-                    }
-                    // Priority 2: defaultWidths from resizeConfig
-                    else if (defaultWidths[col.dataField]) {
-                        newWidths[col.dataField] = defaultWidths[col.dataField];
-                    }
-                }
-            });
-            return newWidths;
-        });
-    }, [columns, defaultWidths]);
-    // Handle mouse move during resize
-    const handleMouseMove = useCallback((e) => {
-        if (!currentColumnRef.current)
-            return;
-        const deltaX = e.clientX - startXRef.current;
-        let newWidth = startWidthRef.current + deltaX;
-        // Apply min/max constraints
-        const column = columns.find((col) => col.dataField === currentColumnRef.current);
-        const colMinWidth = typeof column?.minWidth === 'number'
-            ? column.minWidth
-            : typeof column?.minWidth === 'string' && column.minWidth.endsWith('px')
-                ? parseInt(column.minWidth, 10)
-                : minWidth;
-        const colMaxWidth = typeof column?.maxWidth === 'number'
-            ? column.maxWidth
-            : typeof column?.maxWidth === 'string' && column.maxWidth.endsWith('px')
-                ? parseInt(column.maxWidth, 10)
-                : maxWidth;
-        newWidth = Math.max(colMinWidth, Math.min(colMaxWidth, newWidth));
-        setColumnWidths((prev) => ({
-            ...prev,
-            [currentColumnRef.current]: newWidth,
-        }));
-    }, [columns, minWidth, maxWidth]);
-    // Handle mouse up (end resize)
-    const handleMouseUp = useCallback(() => {
-        if (currentColumnRef.current) {
-            const finalWidth = columnWidths[currentColumnRef.current];
-            onResizeEnd?.(currentColumnRef.current, finalWidth);
-            onResize?.(columnWidths);
-        }
-        setIsResizing(false);
-        setResizingColumn(null);
-        currentColumnRef.current = null;
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
-        document.body.style.cursor = '';
-        document.body.style.userSelect = '';
-    }, [columnWidths, handleMouseMove, onResize, onResizeEnd]);
-    // Handle mouse down (start resize)
-    const handleMouseDown = useCallback((e, dataField, headerRef) => {
-        if (!enabled)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        const headerEl = headerRef.current;
-        if (!headerEl)
-            return;
-        const currentWidth = headerEl.offsetWidth;
-        startXRef.current = e.clientX;
-        startWidthRef.current = currentWidth;
-        currentColumnRef.current = dataField;
-        setIsResizing(true);
-        setResizingColumn(dataField);
-        onResizeStart?.(dataField, currentWidth);
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('mouseup', handleMouseUp);
-        document.body.style.cursor = 'col-resize';
-        document.body.style.userSelect = 'none';
-    }, [enabled, handleMouseMove, handleMouseUp, onResizeStart]);
-    // Handle double-click for auto-fit
-    const handleDoubleClick = useCallback((e, dataField) => {
-        if (!enabled || !autoFit)
-            return;
-        e.preventDefault();
-        e.stopPropagation();
-        // Get all cells for this column and find the max content width
-        const cells = document.querySelectorAll(`[data-column="${dataField}"]`);
-        let maxContentWidth = minWidth;
-        cells.forEach((cell) => {
-            // Create a temporary span to measure text width
-            const span = document.createElement('span');
-            span.style.visibility = 'hidden';
-            span.style.position = 'absolute';
-            span.style.whiteSpace = 'nowrap';
-            span.style.font = window.getComputedStyle(cell).font;
-            span.textContent = cell.innerText;
-            document.body.appendChild(span);
-            maxContentWidth = Math.max(maxContentWidth, span.offsetWidth + 24); // Add padding
-            document.body.removeChild(span);
-        });
-        // Apply constraints
-        maxContentWidth = Math.min(maxContentWidth, maxWidth);
-        setColumnWidths((prev) => {
-            const newWidths = { ...prev, [dataField]: maxContentWidth };
-            onResize?.(newWidths);
-            return newWidths;
-        });
-        onResizeEnd?.(dataField, maxContentWidth);
-    }, [enabled, autoFit, minWidth, maxWidth, onResize, onResizeEnd]);
-    // Get resize handle component
-    const getResizeHandle = useCallback((dataField, headerRef) => {
-        if (!enabled)
-            return null;
-        headerRefMap.current.set(dataField, headerRef);
-        return (_jsx(ResizeHandle, { "$isResizing": resizingColumn === dataField, "$handleColor": handleColor, "$handleHoverColor": handleHoverColor, "$handleWidth": handleWidth, onMouseDown: (e) => handleMouseDown(e, dataField, headerRef), onDoubleClick: (e) => handleDoubleClick(e, dataField), onClick: (e) => e.stopPropagation() }));
-    }, [
-        enabled,
-        resizingColumn,
-        handleColor,
-        handleHoverColor,
-        handleWidth,
-        handleMouseDown,
-        handleDoubleClick,
-    ]);
-    // Reset all widths
-    const resetWidths = useCallback(() => {
-        setColumnWidths(initialWidths);
-        onResize?.(initialWidths);
-    }, [initialWidths, onResize]);
-    // Set specific column width
-    const setColumnWidth = useCallback((dataField, width) => {
-        const constrainedWidth = Math.max(minWidth, Math.min(maxWidth, width));
-        setColumnWidths((prev) => {
-            const newWidths = { ...prev, [dataField]: constrainedWidth };
-            onResize?.(newWidths);
-            return newWidths;
-        });
-    }, [minWidth, maxWidth, onResize]);
-    return {
-        columnWidths,
-        getResizeHandle,
-        resetWidths,
-        setColumnWidth,
-        isResizing,
-        resizingColumn,
-    };
-}
-// ============================================================================
-// Helper: Get column style with resize width
-// ============================================================================
-export function getColumnStyle(column, columnWidths, resizable, isResizing) {
-    const style = {};
-    // Use resized width if available
-    if (resizable && columnWidths[column.dataField]) {
-        style.width = columnWidths[column.dataField];
-        style.minWidth = columnWidths[column.dataField];
-        style.maxWidth = columnWidths[column.dataField];
-    }
-    else {
-        // Use column-defined widths
-        if (column.width) {
-            style.width = column.width;
-        }
-        if (column.minWidth) {
-            style.minWidth = column.minWidth;
-        }
-        if (column.maxWidth) {
-            style.maxWidth = column.maxWidth;
-        }
-    }
-    // Add smooth transition when not actively resizing (for auto-fit double-click)
-    if (resizable && !isResizing) {
-        style.transition = 'width 0.2s cubic-bezier(0.4, 0, 0.2, 1)';
-    }
-    return style;
-}
-export const ResizableHeaderCell = ({ children, dataField, resizable, getResizeHandle, style, className, }) => {
-    const headerRef = useRef(null);
-    return (_jsxs("th", { ref: headerRef, style: { ...style, position: 'relative' }, className: className, "data-column": dataField, children: [children, resizable && getResizeHandle(dataField, headerRef)] }));
-};
-// ============================================================================
-// Export
-// ============================================================================
-export default {
-    useColumnResize,
-    getColumnStyle,
-    ResizeHandle,
-    ResizeLine,
-    ResizableHeaderCell,
-};
+`;export function useColumnResize({columns:t,config:h={},enabled:s=!0,tableId:g}){const{minWidth:r=50,maxWidth:c=800,autoFit:m=!0,onResize:u,onResizeStart:k,onResizeEnd:W,defaultWidths:f={},handleColor:E,handleHoverColor:F,handleWidth:S=4}=h,w=V(()=>{const i={};return t.forEach(e=>{typeof e.width=="number"?i[e.dataField]=e.width:typeof e.width=="string"&&e.width.endsWith("px")?i[e.dataField]=parseInt(e.width,10):f[e.dataField]&&(i[e.dataField]=f[e.dataField])}),i},[t,f]),[y,x]=R(w),[A,I]=R(!1),[z,D]=R(null),H=b(0),X=b(0),p=b(null),G=b(new Map);U(()=>{x(i=>{const e={...i};return t.forEach(n=>{n.dataField in e||(typeof n.width=="number"?e[n.dataField]=n.width:typeof n.width=="string"&&n.width.endsWith("px")?e[n.dataField]=parseInt(n.width,10):f[n.dataField]&&(e[n.dataField]=f[n.dataField]))}),e})},[t,f]);const v=l(i=>{if(!p.current)return;const e=i.clientX-H.current;let n=X.current+e;const o=t.find($=>$.dataField===p.current),d=typeof o?.minWidth=="number"?o.minWidth:typeof o?.minWidth=="string"&&o.minWidth.endsWith("px")?parseInt(o.minWidth,10):r,a=typeof o?.maxWidth=="number"?o.maxWidth:typeof o?.maxWidth=="string"&&o.maxWidth.endsWith("px")?parseInt(o.maxWidth,10):c;n=Math.max(d,Math.min(a,n)),x($=>({...$,[p.current]:n}))},[t,r,c]),C=l(()=>{if(p.current){const i=y[p.current];W?.(p.current,i),u?.(y)}I(!1),D(null),p.current=null,document.removeEventListener("mousemove",v),document.removeEventListener("mouseup",C),document.body.style.cursor="",document.body.style.userSelect=""},[y,v,u,W]),j=l((i,e,n)=>{if(!s)return;i.preventDefault(),i.stopPropagation();const o=n.current;if(!o)return;const d=o.offsetWidth;H.current=i.clientX,X.current=d,p.current=e,I(!0),D(e),k?.(e,d),document.addEventListener("mousemove",v),document.addEventListener("mouseup",C),document.body.style.cursor="col-resize",document.body.style.userSelect="none"},[s,v,C,k]),L=l((i,e)=>{if(!s||!m)return;i.preventDefault(),i.stopPropagation();const n=document.querySelectorAll(`[data-column="${e}"]`);let o=r;n.forEach(d=>{const a=document.createElement("span");a.style.visibility="hidden",a.style.position="absolute",a.style.whiteSpace="nowrap",a.style.font=window.getComputedStyle(d).font,a.textContent=d.innerText,document.body.appendChild(a),o=Math.max(o,a.offsetWidth+24),document.body.removeChild(a)}),o=Math.min(o,c),x(d=>{const a={...d,[e]:o};return u?.(a),a}),W?.(e,o)},[s,m,r,c,u,W]),P=l((i,e)=>s?(G.current.set(i,e),N(ResizeHandle,{$isResizing:z===i,$handleColor:E,$handleHoverColor:F,$handleWidth:S,onMouseDown:n=>j(n,i,e),onDoubleClick:n=>L(n,i),onClick:n=>n.stopPropagation()})):null,[s,z,E,F,S,j,L]),_=l(()=>{x(w),u?.(w)},[w,u]),q=l((i,e)=>{const n=Math.max(r,Math.min(c,e));x(o=>{const d={...o,[i]:n};return u?.(d),d})},[r,c,u]);return{columnWidths:y,getResizeHandle:P,resetWidths:_,setColumnWidth:q,isResizing:A,resizingColumn:z}}export function getColumnStyle(t,h,s,g){const r={};return s&&h[t.dataField]?(r.width=h[t.dataField],r.minWidth=h[t.dataField],r.maxWidth=h[t.dataField]):(t.width&&(r.width=t.width),t.minWidth&&(r.minWidth=t.minWidth),t.maxWidth&&(r.maxWidth=t.maxWidth)),s&&!g&&(r.transition="width 0.2s cubic-bezier(0.4, 0, 0.2, 1)"),r}export const ResizableHeaderCell=({children:t,dataField:h,resizable:s,getResizeHandle:g,style:r,className:c})=>{const m=b(null);return T("th",{ref:m,style:{...r,position:"relative"},className:c,"data-column":h,children:[t,s&&g(h,m)]})};export default{useColumnResize,getColumnStyle,ResizeHandle,ResizeLine,ResizableHeaderCell};