@cwellt_software/cwellt-reactjs-lib 1.2.13 → 1.2.14

package/dist/src/components/display/data/generic_tooltip/CwGenericTooltip.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from 'react-dom';
+import styles from "./cw-generic-tooltip.module.css";
+// Constants moved outside to prevent recreation
+const margin = 16;
+const defaultPosition = "right";
+const positionOrder = ['right', 'bottom', 'left', 'top'];
+// Memoized utility functions to prevent recreation
+const calculatePositionForSide = (position, triggerRect, tooltipRect) => {
+    switch (position) {
+        case 'left':
+            return {
+                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
+                left: triggerRect.left - tooltipRect.width - margin
+            };
+        case 'right':
+            return {
+                top: triggerRect.top + (triggerRect.height - tooltipRect.height) / 2,
+                left: triggerRect.right + margin
+            };
+        case 'top':
+            return {
+                top: triggerRect.top - tooltipRect.height - margin,
+                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+            };
+        case 'bottom':
+            return {
+                top: triggerRect.bottom + margin,
+                left: triggerRect.left + (triggerRect.width - tooltipRect.width) / 2
+            };
+    }
+};
+// Optimized hooks
+const useTooltipDelay = (callback, delay) => {
+    const timeoutRef = useRef();
+    const clearTooltipTimeout = useCallback(() => {
+        if (timeoutRef.current) {
+            window.clearTimeout(timeoutRef.current);
+            timeoutRef.current = undefined;
+        }
+    }, []);
+    const setTooltipTimeout = useCallback(() => {
+        clearTooltipTimeout();
+        if (delay) {
+            timeoutRef.current = window.setTimeout(callback, delay);
+        }
+        else {
+            callback();
+        }
+    }, [callback, delay, clearTooltipTimeout]);
+    useEffect(() => clearTooltipTimeout, [clearTooltipTimeout]);
+    return { setTooltipTimeout, clearTooltipTimeout };
+};
+const useTooltipPosition = (isVisible, containerRef, preferredPosition, tooltipClassName) => {
+    const [tooltipState, setTooltipState] = useState({
+        position: { top: 0, left: 0 },
+        actualPosition: preferredPosition
+    });
+    const frameRef = useRef();
+    const updatePosition = useCallback(() => {
+        if (!isVisible || !containerRef.current)
+            return;
+        const tooltipElement = document.querySelector(`.${tooltipClassName}`);
+        if (!tooltipElement)
+            return;
+        const triggerRect = containerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipElement.getBoundingClientRect();
+        // Try preferred position first
+        const position = calculatePositionForSide(preferredPosition, triggerRect, tooltipRect);
+        const windowWidth = window.innerWidth;
+        const windowHeight = window.innerHeight;
+        // Quick bounds check
+        if (position.left >= margin &&
+            position.top >= margin &&
+            position.left + tooltipRect.width <= windowWidth - margin &&
+            position.top + tooltipRect.height <= windowHeight - margin) {
+            setTooltipState({ position, actualPosition: preferredPosition });
+            return;
+        }
+        // Try other positions if preferred doesn't fit
+        for (const pos of positionOrder) {
+            if (pos === preferredPosition)
+                continue;
+            const newPosition = calculatePositionForSide(pos, triggerRect, tooltipRect);
+            if (newPosition.left >= margin &&
+                newPosition.top >= margin &&
+                newPosition.left + tooltipRect.width <= windowWidth - margin &&
+                newPosition.top + tooltipRect.height <= windowHeight - margin) {
+                setTooltipState({ position: newPosition, actualPosition: pos });
+                return;
+            }
+        }
+        // Fallback to preferred position if none fit
+        setTooltipState({ position, actualPosition: preferredPosition });
+    }, [isVisible, preferredPosition, tooltipClassName]);
+    useEffect(() => {
+        frameRef.current = requestAnimationFrame(updatePosition);
+        return () => {
+            if (frameRef.current) {
+                cancelAnimationFrame(frameRef.current);
+            }
+        };
+    }, [updatePosition]);
+    return tooltipState;
+};
+// Main component with optimizations
+export const CwGenericTooltip = ({ children, content = null, position = defaultPosition, dissapearsWhenHover = false, hide = false, overlayStyle = {}, showDelay = 0, }) => {
+    const [isVisible, setIsVisible] = useState(false);
+    const containerRef = useRef(null);
+    const { setTooltipTimeout, clearTooltipTimeout } = useTooltipDelay(() => {
+        setIsVisible(true);
+    }, showDelay);
+    const { position: tooltipPosition, actualPosition } = useTooltipPosition(isVisible, containerRef, position, styles["cw-generic-tooltip-content"]);
+    // Memoize tooltip content creation
+    const tooltipContent = useMemo(() => {
+        if (hide || !isVisible || !content)
+            return null;
+        return createPortal(_jsx("div", { className: styles["cw-generic-tooltip-content"], "data-position": actualPosition, "data-visible": isVisible, style: {
+                position: 'fixed',
+                top: `${tooltipPosition.top}px`,
+                left: `${tooltipPosition.left}px`,
+                visibility: tooltipPosition.top === 0 && tooltipPosition.left === 0 ? 'hidden' : 'visible',
+                ...overlayStyle
+            }, onMouseEnter: () => dissapearsWhenHover && setIsVisible(false), children: content }), document.body);
+    }, [isVisible, content, actualPosition, tooltipPosition, dissapearsWhenHover, overlayStyle, hide]);
+    const handleMouseEnter = useCallback(() => {
+        setTooltipTimeout();
+    }, [setTooltipTimeout]);
+    const handleMouseLeave = useCallback(() => {
+        clearTooltipTimeout();
+        setIsVisible(false);
+    }, [clearTooltipTimeout]);
+    return (_jsxs("div", { ref: containerRef, className: styles["cw-generic-tooltip"], onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, style: overlayStyle, children: [tooltipContent, children] }));
+};
+export const _preview = () => {
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "row", gap: "1em", padding: "50vh", pointerEvents: "auto" }, children: [_jsx("h3", { children: "Top" }), _jsx(CwGenericTooltip, { content: _jsxs("div", { style: { width: "200px" }, children: [_jsx("button", { children: "Button in tooltip" }), _jsx("p", { children: "Tooltip content" })] }), position: "top", dissapearsWhenHover: true, children: _jsx("div", { children: _jsx("p", { children: "Hover for top tooltip" }) }) }), _jsx("h3", { children: "Right" }), _jsx(CwGenericTooltip, { content: _jsxs("div", { children: [_jsx("button", { children: "Button in tooltip" }), _jsx("p", { children: "Tooltip content" })] }), position: "right", children: _jsx("div", { children: _jsx("p", { children: "Hover for right tooltip" }) }) }), _jsx("h3", { children: "Left" }), _jsx(CwGenericTooltip, { content: _jsxs("div", { children: [_jsx("button", { children: "Button in tooltip" }), _jsx("p", { children: "Tooltip content" })] }), position: "left", children: _jsx("div", { children: _jsx("p", { children: "Hover for left tooltip" }) }) }), _jsx("h3", { children: "Bottom" }), _jsx(CwGenericTooltip, { content: _jsxs("div", { children: [_jsx("button", { children: "Button in tooltip" }), _jsx("p", { children: "Tooltip content" })] }), position: "bottom", children: _jsx("div", { children: _jsx("p", { children: "Hover for bottom tooltip" }) }) })] }));
+};

package/dist/src/components/display/data/table/CwTable.d.ts

@@ -103,5 +103,5 @@ export interface CwTableProps<T = any> {
  *
  * @returns React component
  */
-export declare function CwTable<T = any>({ columns, data, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData, rowKey, loading, scrollHeight, stickyHeader, rowSelection, }: Readonly<CwTableProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare function CwTable<T = any>({ columns, data, pagination, pageSizeOptions, expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData, rowKey, loading, scrollHeight, stickyHeader, rowSelection }: Readonly<CwTableProps<T>>): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=CwTable.d.ts.map

package/dist/src/components/display/data/table/CwTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CwTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/table/CwTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,QAAQ;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACnB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE;QACd,eAAe,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;QAC/B,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;QACnE,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;KAC7B,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,wBAAgB,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,EAChC,OAAO,EACP,IAAI,EACJ,UAAkB,EAClB,eAAiC,EACjC,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,kBAAkB,EAClB,EAAE,EACF,UAA8C,EAC9C,MAAyB,EACzB,OAAe,EACf,YAAY,EACZ,YAAoB,EACpB,YAAY,GACZ,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,2CAiV3B"}
+{"version":3,"file":"CwTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/table/CwTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAC;AAGzE,MAAM,WAAW,MAAM,CAAC,CAAC,GAAG,GAAG;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,QAAQ;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CAEnB;AAED,MAAM,WAAW,YAAY,CAAC,CAAC,GAAG,GAAG;IACpC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC;IACrB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,MAAM,EAAE,CAAC,KAAK,MAAM,CAAC,CAAC;IAChD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACjB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,YAAY,CAAC,EAAE;QACd,eAAe,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC;QAC/B,QAAQ,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;QACnE,IAAI,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;KAC7B,CAAC;CACF;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoEG;AAEH,wBAAgB,OAAO,CAAC,CAAC,GAAG,GAAG,EAAE,EAChC,OAAO,EACP,IAAI,EACJ,UAAkB,EAClB,eAAiC,EACjC,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,KAAK,EACL,kBAAkB,EAClB,EAAE,EACF,UAA8C,EAC9C,MAAyB,EACzB,OAAe,EACf,YAAY,EACZ,YAAoB,EACpB,YAAY,EACZ,EAAE,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,2CA8V3B"}

package/dist/src/components/display/data/table/CwTable.js

@@ -0,0 +1,203 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useMemo, useState } from "react";
+/**
+ * A reusable and customizable table component.
+ *
+ * @param props - Component props to configure columns, data, styles, pagination, expanded rows, and more.
+ *
+ * @example
+ * const columns: Column<User>[] = [
+ *   {
+ *     title: 'Name',
+ *     dataIndex: 'name',
+ *     key: 'name',
+ *     sortable: true, // Column is sortable
+ *     width: 100 // You can define the width of the column
+ *   },
+ *   {
+ *     title: 'Age',
+ *     dataIndex: 'age',
+ *     key: 'age',
+ *     sortable: true,
+ *     render: (item) => <span>{item.age} years</span> // Custom rendering
+ *   },
+ *   {
+ *     title: 'Address',
+ *     dataIndex: 'address',
+ *     key: 'address',
+ *     render: (item) => (
+ *       <a href={`https://maps.google.com/?q=${encodeURIComponent(item.address)}`} target="_blank" rel="noreferrer">
+ *         {item.address}
+ *       </a>
+ *     ) // Link rendering
+ *   }
+ * ];
+ *
+ * const data:User[] = [
+ *   { key: '1', name: 'Mike', age: 32, address: '10 Downing Street' },
+ *   { key: '2', name: 'John', age: 42, address: '11 Downing Street' },
+ *   { key: '3', name: 'Andres', age: 33, address: '12 Downing Street' },
+ *   { key: '4', name: 'Gabriel', age: 22, address: '13 Downing Street' },
+ *   { key: '5', name: 'Sergio', age: 47, address: '14 Downing Street' },
+ *   { key: '6', name: 'Zacarias', age: 61, address: '15 Downing Street' }
+ * ];
+ *
+ * const generateExpandedContent = (record) => (
+ *   <div>
+ *     Custom expanded content for {record.name}
+ *   </div>
+ * );
+ *
+ * <CwTable<User>
+ *   columns={columns}
+ *   data={data}
+ *   pagination={true}
+ *   pageSizeOptions={[3, 5, 10]} // Optional, defaults to [5, 10, 20, 50]
+ *   expandedRowRender={generateExpandedContent}
+ *   onExpand={(item) => console.log('Expanded:', item)}
+ *   rowKey="key" // Optional, defaults to 'key'
+ *   textNoData="No data available" // Optional message when no data
+ *   loading={false} // Optional, shows loading indicator
+ *   scrollHeight={300} // Optional scroll height, defaults to 300
+ *   stickyHeader={true} // Optional, makes header sticky on scroll
+ *   classNameContainer="my-table-wrapper" // Optional wrapper class
+ *   className="my-table" // Optional table class
+ *   classNameRow="my-table-row" // Optional class for each row
+ *   id="custom-table-id" // Optional ID for the container
+ *   style={{ border: '1px solid #ccc' }} // Optional inline styles
+ * />
+ *
+ * @returns React component
+ */
+export function CwTable({ columns, data, pagination = false, pageSizeOptions = [5, 10, 20, 50], expandedRowRender, onExpand, className, classNameRow, style, classNameContainer, id, textNoData = "No data available at the moment", rowKey = "key", loading = false, scrollHeight, stickyHeader = false, }) {
+    const [currentPage, setCurrentPage] = useState(1);
+    const [expandedRowKey, setExpandedRowKey] = useState(null);
+    const [sortConfig, setSortConfig] = useState({
+        key: null,
+        direction: "asc"
+    });
+    const [localItemsPerPage, setLocalItemsPerPage] = useState(pageSizeOptions[0]);
+    const [columnWidths, setColumnWidths] = useState(() => columns.reduce((acc, col) => {
+        if (col.width)
+            acc[col.key] = col.width;
+        return acc;
+    }, {}));
+    const handleItemsPerPageChange = useCallback((e) => {
+        setLocalItemsPerPage(parseInt(e.target.value, 10));
+        setCurrentPage(1);
+    }, []);
+    const handleRowExpand = useCallback((item) => {
+        const itemKey = item[rowKey];
+        setExpandedRowKey((prev) => (prev === itemKey ? null : itemKey));
+        onExpand?.(item);
+    }, [rowKey, onExpand]);
+    const handleSort = useCallback((columnKey) => {
+        setSortConfig(prev => {
+            if (prev.key !== columnKey)
+                return { key: columnKey, direction: "asc" };
+            if (prev.direction === "asc")
+                return { key: columnKey, direction: "desc" };
+            return { key: null, direction: "asc" };
+        });
+    }, []);
+    const sortedData = useMemo(() => {
+        if (!data || data.length === 0)
+            return [];
+        const dataCopy = [...data];
+        if (sortConfig.key) {
+            dataCopy.sort((a, b) => {
+                const aVal = a[sortConfig.key];
+                const bVal = b[sortConfig.key];
+                return (aVal < bVal ? -1 : aVal > bVal ? 1 : 0) * (sortConfig.direction === "asc" ? 1 : -1);
+            });
+        }
+        return dataCopy;
+    }, [data, sortConfig]);
+    const paginatedData = useMemo(() => {
+        if (!sortedData)
+            return [];
+        if (!pagination)
+            return sortedData;
+        const start = (currentPage - 1) * localItemsPerPage;
+        return sortedData.slice(start, start + localItemsPerPage);
+    }, [sortedData, currentPage, localItemsPerPage, pagination]);
+    const totalPages = useMemo(() => {
+        return pagination ? Math.ceil(sortedData.length / localItemsPerPage) : 1;
+    }, [sortedData, localItemsPerPage, pagination]);
+    const handlePageChange = (page) => {
+        if (page >= 1 && page <= totalPages)
+            setCurrentPage(page);
+    };
+    const startResize = (e, key) => {
+        e.preventDefault();
+        const startX = e.clientX;
+        const startWidth = e.target.parentElement?.offsetWidth || 0;
+        const onMouseMove = (moveEvent) => {
+            const newWidth = Math.max(startWidth + moveEvent.clientX - startX, 50); // mínimo 50px
+            setColumnWidths(prev => ({ ...prev, [key]: newWidth }));
+        };
+        const onMouseUp = () => {
+            window.removeEventListener("mousemove", onMouseMove);
+            window.removeEventListener("mouseup", onMouseUp);
+        };
+        window.addEventListener("mousemove", onMouseMove);
+        window.addEventListener("mouseup", onMouseUp);
+    };
+    const scrollContainerStyle = useMemo(() => {
+        if (stickyHeader || scrollHeight) {
+            return {
+                maxHeight: scrollHeight ?? 300,
+                overflowY: "auto"
+            };
+        }
+        return {}; // sin altura ni scroll
+    }, [stickyHeader, scrollHeight]);
+    const getColSpan = () => columns.length + (expandedRowRender ? 1 : 0);
+    const hasClassNameRow = (item) => {
+        return typeof item === 'object' && item !== null && 'classNameRow' in item;
+    };
+    const renderTableBody = () => {
+        if (loading) {
+            return (_jsx("tr", { children: _jsx("td", { colSpan: getColSpan(), children: _jsx("div", { children: "Loading data..." }) }) }));
+        }
+        if (!paginatedData || paginatedData.length === 0) {
+            return (_jsx("tr", { children: _jsx("td", { colSpan: getColSpan(), className: "cw-table-cell-empty", style: { textAlign: "center" }, children: textNoData }) }));
+        }
+        return paginatedData.map(item => {
+            const itemKey = item[rowKey];
+            if (!itemKey)
+                console.warn("Missing row key for item", item);
+            return (_jsxs(React.Fragment, { children: [_jsxs("tr", { className: `${classNameRow ?? ""} ${hasClassNameRow(item) ? item.classNameRow : ""}`, children: [expandedRowRender && (_jsx("td", { className: "cw-table-col-action cw-table-col-expand", children: _jsx("button", { onClick: () => handleRowExpand(item), className: `cw-button-icon ${expandedRowKey === itemKey
+                                        ? "cwi-chevron-down"
+                                        : "cwi-chevron-right"}` }) })), columns.map(col => (_jsx("td", { className: col.className ?? "", children: col.render ? col.render(item) : col.dataIndex ? String(item[col.dataIndex]) : "" }, `${itemKey}_${col.key}`)))] }), expandedRowRender && expandedRowKey === itemKey && (_jsx("tr", { className: "cw-table-row-expanded", children: _jsx("td", { colSpan: getColSpan(), children: expandedRowRender(item) }) }))] }, String(itemKey)));
+        });
+    };
+    return (_jsxs("div", { id: id, className: `cw-table-container ${classNameContainer ?? ""}`, style: style, children: [_jsx("div", { style: scrollContainerStyle, children: _jsxs("table", { className: `cw-table ${className ?? ""}`, style: { width: "100%" }, children: [_jsx("thead", { style: stickyHeader
+                                ? { position: "sticky", top: 0, background: "white", zIndex: 2 }
+                                : undefined, children: _jsxs("tr", { children: [expandedRowRender && _jsx("th", {}), columns.map(col => (_jsxs("th", { onClick: () => col.sortable && col.dataIndex && handleSort(col.dataIndex), className: `${col.className ?? ""} ${sortConfig.key === col.dataIndex
+                                            ? sortConfig.direction
+                                            : ""}`.trim(), style: {
+                                            cursor: col.sortable ? "pointer" : "default",
+                                            userSelect: "none",
+                                            width: columnWidths[col.key] ?? col.width,
+                                            ...((col.width || columnWidths[col.key]) && {
+                                                minWidth: 50,
+                                                maxWidth: columnWidths[col.key] ?? col.width
+                                            }),
+                                        }, children: [_jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [_jsx("span", { children: col.title }), col.sortable && col.dataIndex && (_jsx("span", { style: { fontSize: "12px", marginLeft: "6px" }, children: sortConfig.key !== col.dataIndex ? "↕" : sortConfig.direction === "asc"
+                                                            ? "↑"
+                                                            : "↓" }))] }), _jsx("span", { onMouseDown: (e) => startResize(e, col.key), className: "th-column-resizer" })] }, col.key)))] }) }), _jsx("tbody", { children: renderTableBody() })] }) }), pagination && totalPages > 1 && (_jsxs("footer", { className: "cw-table-pagination", children: [_jsx("button", { onClick: () => handlePageChange(1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left-double", title: "First" }), _jsx("button", { onClick: () => handlePageChange(currentPage - 1), disabled: currentPage === 1 || totalPages === 1, className: "cw-button-icon cwi-chevron-left", title: "Previous" }), _jsx("input", { type: "number", value: currentPage, onChange: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (!isNaN(value))
+                                handlePageChange(value);
+                        }, onBlur: (e) => {
+                            const value = parseInt(e.target.value, 10);
+                            if (isNaN(value) || value < 1 || value > totalPages) {
+                                handlePageChange(1);
+                            }
+                        }, min: 1, max: totalPages, style: {
+                            width: "4rem",
+                            textAlign: "center",
+                            marginRight: "0.5rem"
+                        } }), "of ", totalPages, _jsx("button", { onClick: () => handlePageChange(currentPage + 1), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right", title: "Next" }), _jsx("button", { onClick: () => handlePageChange(totalPages), disabled: currentPage === totalPages || totalPages === 1, className: "cw-button-icon cwi-chevron-right-double", title: "Last" }), _jsx("select", { value: localItemsPerPage, onChange: handleItemsPerPageChange, style: { marginLeft: "1rem" }, children: pageSizeOptions.map(size => (_jsxs("option", { value: size, children: [size, " / page"] }, size))) })] }))] }));
+}

package/dist/src/components/display/data/table_sortable/CwSortableTable.d.ts

@@ -0,0 +1,74 @@
+import React from "react";
+export interface SortableColumn<T = any> {
+    /** Header label */
+    title: string;
+    /** Key of the data field to display (skipped when `render` is provided) */
+    dataIndex?: keyof T;
+    /** Unique column identifier */
+    key: string;
+    /** Custom cell renderer — receives the full row item */
+    render?: (item: T) => React.ReactNode;
+    /** Additional CSS class for <th> and <td> */
+    className?: string;
+    /** Fixed column width */
+    width?: number | string;
+}
+export interface CwSortableTableProps<T = any> {
+    /** Column definitions */
+    columns: SortableColumn<T>[];
+    /** Data array — each item must have the field specified in `rowKey` */
+    data: T[];
+    /**
+     * Field used as unique row identifier.
+     * @default "key"
+     */
+    rowKey?: keyof T;
+    /**
+     * Async callback fired when the user clicks Save.
+     * Receives the full re-ordered array — persist it however you need.
+     *
+     * @example
+     * onReorder={async (newOrder) => {
+     *   await Promise.all(newOrder.map((item, i) => api.updateOrder(item.id, i)));
+     * }}
+     */
+    onReorder: (newData: T[]) => Promise<void>;
+    /** Show a loading skeleton instead of rows */
+    loading?: boolean;
+    /** Message shown when data is empty */
+    textNoData?: string;
+    /** CSS class for the outer container */
+    className?: string;
+    /** CSS class for the <table> element */
+    tableClassName?: string;
+    /** Constrain height and enable vertical scroll */
+    maxHeight?: number | string;
+    /**
+     * Whether to show the drag handle column.
+     * @default true
+     */
+    showHandle?: boolean;
+    /** Optional inline styles for the outer container */
+    style?: React.CSSProperties;
+    /** Label for the Save button. @default "Save order" */
+    saveLabel?: string;
+    /** Label for the Discard button. @default "Discard" */
+    discardLabel?: string;
+}
+/**
+ * CwSortableTable
+ *
+ * A table with drag-and-drop row reordering and save/discard support.
+ * Shares visual styles with CwTable but is intentionally simpler:
+ * no column sorting, no pagination.
+ *
+ * When the user reorders rows, changes are held locally until they
+ * click Save. A save bar appears automatically when there are pending changes.
+ *
+ * Follows the same pattern as CwSortableList:
+ * - All rows are draggable — the handle is visual only
+ * - Reorder is calculated in onDragEnd using lastValidDropIndex
+ * - draggedItem is tracked in state, not via dataTransfer
+ */
+export declare function CwSortableTable<T = any>({ columns, data, rowKey, onReorder, loading, textNoData, className, tableClassName, maxHeight, showHandle, style, saveLabel, discardLabel, }: Readonly<CwSortableTableProps<T>>): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CwSortableTable.d.ts.map

package/dist/src/components/display/data/table_sortable/CwSortableTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwSortableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/table_sortable/CwSortableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAWxC,MAAM,WAAW,cAAc,CAAC,CAAC,GAAG,GAAG;IACtC,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC,CAAC;IACpB,+BAA+B;IAC/B,GAAG,EAAE,MAAM,CAAC;IACZ,wDAAwD;IACxD,MAAM,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IACtC,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAID,MAAM,WAAW,oBAAoB,CAAC,CAAC,GAAG,GAAG;IAC5C,yBAAyB;IACzB,OAAO,EAAE,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7B,uEAAuE;IACvE,IAAI,EAAE,CAAC,EAAE,CAAC;IACV;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC;IACjB;;;;;;;;OAQG;IACH,SAAS,EAAE,CAAC,OAAO,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,8CAA8C;IAC9C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,wCAAwC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uDAAuD;IACvD,YAAY,CAAC,EAAE,MAAM,CAAC;CACtB;AA4BD;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,eAAe,CAAC,CAAC,GAAG,GAAG,EAAE,EACxC,OAAO,EACP,IAAI,EACJ,MAAyB,EACzB,SAAS,EACT,OAAe,EACf,UAAgC,EAChC,SAAS,EACT,cAAc,EACd,SAAS,EACT,UAAiB,EACjB,KAAK,EACL,SAAwB,EACxB,YAAwB,GACxB,EAAE,QAAQ,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,2CAiMnC"}

package/dist/src/components/display/data/table_sortable/useSortableTable.d.ts

@@ -0,0 +1,42 @@
+export interface SortableTableDragState {
+    /** Index of the row currently being dragged (-1 if none) */
+    dragSourceIndex: number;
+    /** Index where the drop indicator should appear (-1 if none) */
+    dropTargetIndex: number;
+}
+export interface UseSortableTableReturn<T> {
+    /** Current ordered items */
+    items: T[];
+    /** Current drag state (for rendering drop indicators) */
+    dragState: SortableTableDragState;
+    /** Whether there are unsaved reorder changes */
+    hasChanges: boolean;
+    /**
+     * Call this after each drag-and-drop with the already-reordered array.
+     * The hook just stores it — reorder logic lives in the component, same pattern as useSortableList.
+     */
+    handleReorder: (newItems: T[]) => void;
+    /** Save current order — receives an async callback to persist the data */
+    handleSave: (onSave: (items: T[]) => Promise<void>) => Promise<void>;
+    /** Discard changes and restore original order */
+    handleDiscard: () => void;
+}
+/**
+ * Hook that provides state management for CwSortableTable.
+ *
+ * Follows the same pattern as useSortableList:
+ * - The hook only manages STATE (items, hasChanges, save, discard)
+ * - The component manages INTERACTION (drag, drop, calculating new order)
+ * - handleReorder receives the already-reordered array and just stores it
+ * - Changes are only persisted when handleSave is called
+ * - handleDiscard restores the original order
+ *
+ * @param initialItems - The initial array of items to display
+ *
+ * @example
+ * ```tsx
+ * const { items, hasChanges, handleReorder, handleSave, handleDiscard } = useSortableTable(data);
+ * ```
+ */
+export declare function useSortableTable<T>(initialItems: T[]): UseSortableTableReturn<T>;
+//# sourceMappingURL=useSortableTable.d.ts.map

package/dist/src/components/display/data/table_sortable/useSortableTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSortableTable.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/table_sortable/useSortableTable.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;IACtC,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;IACxB,gEAAgE;IAChE,eAAe,EAAE,MAAM,CAAC;CACxB;AAED,MAAM,WAAW,sBAAsB,CAAC,CAAC;IACxC,4BAA4B;IAC5B,KAAK,EAAE,CAAC,EAAE,CAAC;IACX,yDAAyD;IACzD,SAAS,EAAE,sBAAsB,CAAC;IAClC,gDAAgD;IAChD,UAAU,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,aAAa,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IACvC,0EAA0E;IAC1E,UAAU,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACrE,iDAAiD;IACjD,aAAa,EAAE,MAAM,IAAI,CAAC;CAC1B;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EACjC,YAAY,EAAE,CAAC,EAAE,GACf,sBAAsB,CAAC,CAAC,CAAC,CA8C3B"}

package/dist/src/components/display/data/tooltip_manager/CwTooltip.d.ts

@@ -0,0 +1,25 @@
+import { type CSSProperties, type FC, type ReactNode } from "react";
+interface CwTooltipProps {
+    children: ReactNode;
+    content?: ReactNode;
+    dissapearsWhenHover?: boolean;
+    hide?: boolean;
+    position?: "top" | "bottom" | "left" | "right";
+    overlayStyle?: CSSProperties;
+    showDelay?: number;
+    displayInline?: boolean;
+}
+/**
+ * Tooltip component backed by the global CwTooltipManager singleton.
+ * More performant than CwGenericTooltip for high-density scenarios (e.g. schedulers)
+ * as it shares a single DOM portal across all instances.
+ *
+ * Self-initializes the Manager if not already mounted via ensureTooltipManager().
+ * Drop-in replacement for CwGenericTooltip with the same API.
+ *
+ * @see CwTooltipManager
+ * @see CwGenericTooltip
+ */
+export declare const CwTooltipNew: FC<CwTooltipProps>;
+export {};
+//# sourceMappingURL=CwTooltip.d.ts.map

package/dist/src/components/display/data/tooltip_manager/CwTooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwTooltip.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/tooltip_manager/CwTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAkC,KAAK,aAAa,EAAE,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpG,UAAU,cAAc;IACvB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC/C,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,EAAE,EAAE,CAAC,cAAc,CAgF3C,CAAC"}

package/dist/src/components/display/data/tooltip_manager/CwTooltipManager.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+type TooltipPosition = "top" | "bottom" | "left" | "right";
+export declare const showTooltip: (content: React.ReactNode, triggerElement: HTMLElement, position?: TooltipPosition, dissapearsWhenHover?: boolean) => void;
+export declare const hideTooltip: (delay?: number) => void;
+export declare const ensureTooltipManager: () => void;
+/**
+ * Global tooltip renderer. Manages a single portal instance in the DOM,
+ * shared across all CwTooltipNew instances for optimal performance.
+ *
+ * Mount once at the app root, or let CwTooltipNew handle it automatically
+ * via ensureTooltipManager().
+ *
+ * @see CwTooltipNew
+ * @see showTooltip
+ * @see hideTooltip
+ */
+export declare const CwTooltipManager: React.FC;
+export {};
+//# sourceMappingURL=CwTooltipManager.d.ts.map

package/dist/src/components/display/data/tooltip_manager/CwTooltipManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CwTooltipManager.d.ts","sourceRoot":"","sources":["../../../../../../src/components/display/data/tooltip_manager/CwTooltipManager.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAMzF,KAAK,eAAe,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;AA4B3D,eAAO,MAAM,WAAW,GACvB,SAAS,KAAK,CAAC,SAAS,EACxB,gBAAgB,WAAW,EAC3B,WAAU,eAAyB,EACnC,sBAAqB,OAAe,SAgBpC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,QAAO,MAAY,SAa9C,CAAC;AAkCF,eAAO,MAAM,oBAAoB,YAQhC,CAAC;AAGF;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAmKpC,CAAC"}

package/dist/src/components/display/graphics/icon/CwIcon.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Icon component that supports both FontAwesome 4 and cwellt icon font
+ * @example
+ * <CwIcon iconId="house" /> // Uses cwellt icon font
+ * <CwIcon iconId="house" source="fontawesome" /> // Uses FontAwesome
+ */
+export function CwIcon(props) {
+    const { iconId, source = 'cwellt', color, size, ...iconProps } = props;
+    const getClassName = (baseClass) => {
+        return [
+            baseClass,
+            color && `cw-color-${color}`,
+            size && `cw-font-size-${size}`
+        ].filter(Boolean).join(' ');
+    };
+    // Return appropriate icon based on source
+    if (source === 'fontawesome') {
+        return _jsx("span", { ...iconProps, className: getClassName(`fa fa-${iconId}`) });
+    }
+    // Use custom icon font
+    return _jsx("span", { ...iconProps, className: getClassName(`cwi-icons cwi-${iconId}`) });
+}

package/dist/src/components/display/graphics/loading/CwLoading.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './cw-loading.css';
+/**
+ * CwLoading
+ *
+ * A versatile loading component that shows a spinner with optional text
+ * and disables the wrapped content while in loading state.
+ *
+ * @example
+ * // Basic usage
+ * <CwLoading isLoading={isSubmitting}>
+ *   <form>...</form>
+ * </CwLoading>
+ *
+ * // With custom text and size
+ * <CwLoading
+ *   isLoading={isLoading}
+ *   text="Please wait..."
+ *   size="large"
+ * >
+ *   <UserProfile />
+ * </CwLoading>
+ */
+export function CwLoading({ isLoading = false, text = '', size = 'regular', iconPosition = 'outside', iconName = 'cwi-plane-solid', animation = 'spin', children }) {
+    const iconClasses = `cwi-icons ${iconName || ''}`;
+    return (_jsxs("div", { "aria-busy": isLoading, className: isLoading ? 'cw-loading-container' : '', "data-children": !!children, children: [isLoading && (_jsxs("div", { className: "cw-loading-content", "data-size": size, "data-animation": animation, children: [_jsx("div", { className: "cw-loading", "data-icon-position": iconPosition, children: _jsx("span", { className: iconClasses }) }), text && (_jsx("p", { children: text }))] })), _jsx("div", { className: isLoading ? 'cw-loading-disabled-content' : '', children: children })] }));
+}

package/dist/src/components/display/graphics/loading-small/CwLoadingSmall.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @deprecated since may 2025. Use <CwLoading size="small"> instead.
+ *
+ * This component will be removed in a future release.
+ *
+ * @example
+ * // Instead of:
+ * <CwLoadingSmall />
+ *
+ * // Use:
+ * <CwLoading size="small" />
+ */
+export function CwLoadingSmall(CwelltLoadingAppointements) {
+    return (_jsx("div", { children: CwelltLoadingAppointements.isLoading === true ? (
+        // * Show loading appointment
+        _jsx("div", { className: "cw-loading-container", children: _jsx("div", { className: "cw-loading" }) })) : (
+        // Show empty div
+        _jsx("div", {})) }));
+}

package/dist/src/components/display/text/heading/CwHeadingMain.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CwHeadingMain(props) {
+    const { children, ...headingProps } = props;
+    return (_jsx("div", { className: "cw-heading", children: _jsx("h2", { className: "cwHeading_desc", ...headingProps, children: children }) }));
+}

package/dist/src/components/display/text/heading/CwHeadingSecond.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CwHeadingSecond(props) {
+    const { children, ...headingProps } = props;
+    return (_jsx("div", { className: "cw-heading", children: _jsx("h3", { className: "cwHeading_desc", ...headingProps, children: children }) }));
+}