@rio-cloud/rio-uikit 2.0.0-beta.1 → 2.0.0-beta.2

package/hooks/useTableExport.js

@@ -1,57 +1,26 @@
-import { useCallback } from 'react';
-/**
- * Converts a dataset into CSV format as a string.
- *
- * @template T Type of each row object.
- * @param data The data array to convert.
- * @param columns Optional keys to include as columns.
- * @param headers Optional key-to-label mapping for header row.
- * @param delimiter Delimiter to separate columns. Defaults to `","`.
- * @returns A string representing the CSV data.
- */
-const convertToCSV = (data, columns, headers, delimiter = ',') => {
-    if (!data.length) {
-        return '';
-    }
-    const escapeFn = (val) => {
-        if (val === null || val === undefined) {
-            return '';
-        }
-        const str = String(val);
-        const needsQuotes = str.includes(delimiter) || str.includes('"') || str.includes('\n');
-        const escaped = str.replace(/"/g, '""');
-        return needsQuotes ? `"${escaped}"` : escaped;
-    };
-    const headerRow = columns.map(key => escapeFn(headers?.[key] ?? String(key))).join(delimiter);
-    const dataRows = data.map(row => columns.map(key => escapeFn(row[key])).join(delimiter));
-    return [headerRow, ...dataRows].join('\n');
+import { useCallback as a } from "react";
+const b = (u, n, l, o = ",") => {
+  if (!u.length)
+    return "";
+  const s = (e) => {
+    if (e == null)
+      return "";
+    const t = String(e), i = t.includes(o) || t.includes('"') || t.includes(`
+`), r = t.replace(/"/g, '""');
+    return i ? `"${r}"` : r;
+  }, p = n.map((e) => s(l?.[e] ?? String(e))).join(o), d = u.map((e) => n.map((t) => s(e[t])).join(o));
+  return [p, ...d].join(`
+`);
+}, f = () => ({ exportToCSV: a(
+  ({ data: n, fileName: l = "export.csv", columns: o, headers: s, delimiter: p = ",", withBom: d = !0 }) => {
+    if (!n.length)
+      return;
+    const e = o ?? Object.keys(n[0]), t = b(n, e, s, p), i = d ? "\uFEFF" : "", r = new Blob([i + t], { type: "text/csv;charset=utf-8;" }), c = document.createElement("a");
+    c.href = URL.createObjectURL(r), c.setAttribute("download", l), document.body.appendChild(c), c.click(), document.body.removeChild(c);
+  },
+  []
+) });
+export {
+  f as default
 };
-/**
- * React hook for exporting tabular data to a downloadable CSV file.
- *
- * @template T Type of each data row object.
- * @returns An object with a `exportToCSV` function to trigger the export.
- *
- * @example
- * const { exportToCSV } = useTableExport<User>();
- * exportToCSV({ data: users, fileName: 'users.csv', delimiter: ';' });
- */
-const useTableExport = () => {
-    const exportToCSV = useCallback(({ data, fileName = 'export.csv', columns, headers, delimiter = ',', withBom = true }) => {
-        if (!data.length) {
-            return;
-        }
-        const cols = columns ?? Object.keys(data[0]);
-        const csv = convertToCSV(data, cols, headers, delimiter);
-        const bom = withBom ? '\uFEFF' : '';
-        const blob = new Blob([bom + csv], { type: 'text/csv;charset=utf-8;' });
-        const link = document.createElement('a');
-        link.href = URL.createObjectURL(blob);
-        link.setAttribute('download', fileName);
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }, []);
-    return { exportToCSV };
-};
-export default useTableExport;
+//# sourceMappingURL=useTableExport.js.map

package/hooks/useTableExport.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableExport.js","sources":["../../src/hooks/useTableExport.ts"],"sourcesContent":["import { useCallback } from 'react';\n\n/**\n * Options for exporting tabular data to CSV.\n */\nexport type ExportOptions<T extends object> = {\n    /**\n     * Array of data objects to export. Each object represents one row in the table.\n     */\n    data: T[];\n\n    /**\n     * Optional name for the exported file.\n     * @default \"export.csv\"\n     */\n    fileName?: string;\n\n    /**\n     * Optional list of object keys to export as columns.\n     * If omitted, all keys from the first row will be used.\n     */\n    columns?: (keyof T)[];\n\n    /**\n     * Optional map of column keys to custom header labels.\n     * @example { firstName: 'First Name' }\n     */\n    headers?: Partial<Record<keyof T, string>>;\n\n    /**\n     * Optional delimiter to use between values in the CSV.\n     * You can use `\";\"` or `\"\\t\"` for other formats.\n     * @default \",\"\n     */\n    delimiter?: string;\n\n    /**\n     * Whether to include UTF-8 BOM (useful for Excel).\n     * @default true\n     */\n    withBom?: boolean;\n};\n\n/**\n * Converts a dataset into CSV format as a string.\n *\n * @template T Type of each row object.\n * @param data The data array to convert.\n * @param columns Optional keys to include as columns.\n * @param headers Optional key-to-label mapping for header row.\n * @param delimiter Delimiter to separate columns. Defaults to `\",\"`.\n * @returns A string representing the CSV data.\n */\nconst convertToCSV = <T extends object>(\n    data: T[],\n    columns: (keyof T)[],\n    headers?: Partial<Record<keyof T, string>>,\n    delimiter = ','\n): string => {\n    if (!data.length) {\n        return '';\n    }\n\n    const escapeFn = (val: any) => {\n        if (val === null || val === undefined) {\n            return '';\n        }\n\n        const str = String(val);\n        const needsQuotes = str.includes(delimiter) || str.includes('\"') || str.includes('\\n');\n        const escaped = str.replace(/\"/g, '\"\"');\n        return needsQuotes ? `\"${escaped}\"` : escaped;\n    };\n\n    const headerRow = columns.map(key => escapeFn(headers?.[key] ?? String(key))).join(delimiter);\n\n    const dataRows = data.map(row => columns.map(key => escapeFn(row[key])).join(delimiter));\n\n    return [headerRow, ...dataRows].join('\\n');\n};\n\n/**\n * React hook for exporting tabular data to a downloadable CSV file.\n *\n * @template T Type of each data row object.\n * @returns An object with a `exportToCSV` function to trigger the export.\n *\n * @example\n * const { exportToCSV } = useTableExport<User>();\n * exportToCSV({ data: users, fileName: 'users.csv', delimiter: ';' });\n */\nconst useTableExport = <T extends object>() => {\n    const exportToCSV = useCallback(\n        ({ data, fileName = 'export.csv', columns, headers, delimiter = ',', withBom = true }: ExportOptions<T>) => {\n            if (!data.length) {\n                return;\n            }\n\n            const cols = columns ?? (Object.keys(data[0]) as (keyof T)[]);\n            const csv = convertToCSV(data, cols, headers, delimiter);\n\n            const bom = withBom ? '\\uFEFF' : '';\n            const blob = new Blob([bom + csv], { type: 'text/csv;charset=utf-8;' });\n\n            const link = document.createElement('a');\n            link.href = URL.createObjectURL(blob);\n            link.setAttribute('download', fileName);\n\n            document.body.appendChild(link);\n            link.click();\n\n            document.body.removeChild(link);\n        },\n        []\n    );\n\n    return { exportToCSV };\n};\n\nexport default useTableExport;\n"],"names":["convertToCSV","data","columns","headers","delimiter","escapeFn","val","str","needsQuotes","escaped","headerRow","key","dataRows","row","useTableExport","useCallback","fileName","withBom","cols","csv","bom","blob","link"],"mappings":";AAqDA,MAAMA,IAAe,CACjBC,GACAC,GACAC,GACAC,IAAY,QACH;AACT,MAAI,CAACH,EAAK;AACN,WAAO;AAGX,QAAMI,IAAW,CAACC,MAAa;AAC3B,QAAIA,KAAQ;AACR,aAAO;AAGX,UAAMC,IAAM,OAAOD,CAAG,GAChBE,IAAcD,EAAI,SAASH,CAAS,KAAKG,EAAI,SAAS,GAAG,KAAKA,EAAI,SAAS;AAAA,CAAI,GAC/EE,IAAUF,EAAI,QAAQ,MAAM,IAAI;AACtC,WAAOC,IAAc,IAAIC,CAAO,MAAMA;AAAA,EAC1C,GAEMC,IAAYR,EAAQ,IAAI,CAAAS,MAAON,EAASF,IAAUQ,CAAG,KAAK,OAAOA,CAAG,CAAC,CAAC,EAAE,KAAKP,CAAS,GAEtFQ,IAAWX,EAAK,IAAI,CAAAY,MAAOX,EAAQ,IAAI,CAAAS,MAAON,EAASQ,EAAIF,CAAG,CAAC,CAAC,EAAE,KAAKP,CAAS,CAAC;AAEvF,SAAO,CAACM,GAAW,GAAGE,CAAQ,EAAE,KAAK;AAAA,CAAI;AAC7C,GAYME,IAAiB,OAyBZ,EAAE,aAxBWC;AAAA,EAChB,CAAC,EAAE,MAAAd,GAAM,UAAAe,IAAW,cAAc,SAAAd,GAAS,SAAAC,GAAS,WAAAC,IAAY,KAAK,SAAAa,IAAU,SAA6B;AACxG,QAAI,CAAChB,EAAK;AACN;AAGJ,UAAMiB,IAAOhB,KAAY,OAAO,KAAKD,EAAK,CAAC,CAAC,GACtCkB,IAAMnB,EAAaC,GAAMiB,GAAMf,GAASC,CAAS,GAEjDgB,IAAMH,IAAU,WAAW,IAC3BI,IAAO,IAAI,KAAK,CAACD,IAAMD,CAAG,GAAG,EAAE,MAAM,2BAA2B,GAEhEG,IAAO,SAAS,cAAc,GAAG;AACvC,IAAAA,EAAK,OAAO,IAAI,gBAAgBD,CAAI,GACpCC,EAAK,aAAa,YAAYN,CAAQ,GAEtC,SAAS,KAAK,YAAYM,CAAI,GAC9BA,EAAK,MAAA,GAEL,SAAS,KAAK,YAAYA,CAAI;AAAA,EAClC;AAAA,EACA,CAAA;AAAC,EAGI;"}

package/hooks/useTableSelection.js

@@ -1,206 +1,103 @@
-import { useState, useRef, useCallback, useEffect } from 'react';
-/**
- * CSS class applied to the currently active row.
- */
-export const ACTIVE_CLASS = 'active';
-/**
- * Default HTML data attribute name used to store the unique ID on table row elements.
- */
-export const DEFAULT_DATA_ATTRIBUTE = 'data-id';
-// Default classes for the checkbox and action cells
-export const DEFAULT_TABLE_CHECKBOX_CELL_CLASS = '.table-checkbox';
-export const DEFAULT_TABLE_ACTION_CELL_CLASS = '.table-action';
-/**
- * A React hook to manage row selection and active row state for an HTML table,
- * including DOM manipulations for visual feedback to optimize performance by
- * preventing individual row re-renders.
- *
- * @param {UseTableSelectionOptions<TData>} options The configuration properties for the hook.
- * @returns {UseTableSelectionReturn} The state and handlers for managing table selection and active row.
- */
-const useTableSelection = (props) => {
-    const { tableData, idKey, initialSelectedRowIds = [], initialActiveRowId = '', checkboxQuerySelector = '.table-checkbox input[type="checkbox"]', dataAttributeName = DEFAULT_DATA_ATTRIBUTE, ref, } = props;
-    const [selectedRowIds, setSelectedRowIds] = useState(initialSelectedRowIds);
-    const [activeRowId, setActiveRowId] = useState(initialActiveRowId);
-    const [lastActiveRowId, setLastActiveRowId] = useState(initialActiveRowId);
-    const internalTableRef = useRef(null);
-    const tableRef = ref ?? internalTableRef;
-    // --- DOM Manipulation Effect (The performance workaround) ---
-    /**
-     * Effect to handle DOM manipulations for active row highlighting and ensuring
-     * checkboxes for selected rows are visually checked.
-     * This effect runs when active row state or selection state changes.
-     * Note: This effect currently only *selects* rows based on `selectedRowIds`.
-     * Deselection in the DOM is handled directly by `onSelection` and `onToggleAll` handlers.
-     * For a more centralized DOM update, this effect could be expanded to handle deselection as well.
-     */
-    useEffect(() => {
-        updateRowSelection();
-    }, [activeRowId, lastActiveRowId, selectedRowIds]); // Rerun when these change
-    const updateRowSelection = () => {
-        if (!tableRef.current) {
-            return;
-        }
-        const rows = [...tableRef.current.rows];
-        if (lastActiveRowId !== activeRowId) {
-            // Due to performance reasons the individual rows should not re-render when the
-            // selected driver changes, hence we need to avoid passing that information as props
-            // to the row component otherwise it would re-render as the props have changed.
-            // Instead, we check here which row to highlight.
-            removeHighlightFromRow(rows, lastActiveRowId, dataAttributeName);
-            highlightRow(rows, activeRowId, dataAttributeName);
-        }
-        // handle multi-selection
-        selectedRowIds.forEach(rowId => {
-            selectRow(rows, rowId, dataAttributeName, checkboxQuerySelector);
-        });
-    };
-    const handleActiveRowChange = useCallback((event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const targetRow = event.currentTarget;
-        const rowId = targetRow.getAttribute(dataAttributeName) ?? '';
-        // Avoid activation if click is on checkbox/action area (more robust check needed if complex row structure)
-        const clickedElement = event.target;
-        const isCheckboxCell = clickedElement.closest(DEFAULT_TABLE_CHECKBOX_CELL_CLASS);
-        const isActionCell = clickedElement.closest(DEFAULT_TABLE_ACTION_CELL_CLASS);
-        if (isCheckboxCell || isActionCell) {
-            return;
-        }
-        changeActiveRow(rowId);
-    }, []);
-    const changeActiveRow = (rowId = '') => {
-        setActiveRowId(currentActiveRow => {
-            const newActiveRowId = currentActiveRow === rowId ? '' : rowId;
-            setLastActiveRowId(currentActiveRow); // Update lastActive for the effect
-            return newActiveRowId;
-        });
-    };
-    const handleSelection = useCallback((event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        // Find the correct row element containing the data attribute
-        const rowElement = event.target.closest(`tr[${dataAttributeName}]`);
-        const selectedRowId = rowElement?.getAttribute(dataAttributeName);
-        if (!selectedRowId) {
-            console.warn('Could not find row ID for selection event.');
-            return;
-        }
-        setSelectedRowIds(prevSelectedRowIds => {
-            if (prevSelectedRowIds.includes(selectedRowId)) {
-                deselectRows([selectedRowId]);
-                return prevSelectedRowIds.filter(id => id !== selectedRowId);
-            }
-            return [...prevSelectedRowIds, selectedRowId];
-        });
-    }, []);
-    const handleToggleAll = useCallback((shouldSelect) => {
-        const allRowIds = tableData.map(row => `${row[idKey]}`);
-        setSelectedRowIds(shouldSelect ? allRowIds : []);
-        // Deselect all rows when there is at least one row selected, else select all rows
-        if (shouldSelect) {
-            setSelectedRowIds(allRowIds);
-        }
-        else {
-            setSelectedRowIds([]);
-            deselectRows(allRowIds);
-            for (const id in allRowIds) {
-                const rows = tableRef.current ? [...tableRef.current.rows] : [];
-                deselectRow([...rows], id, dataAttributeName, checkboxQuerySelector);
-            }
-        }
-        // DOM updates are handled by useEffect -> updateRowsDOM
-    }, [tableData]);
-    const deselectRows = (rowIds) => {
-        const rows = tableRef.current ? [...tableRef.current.rows] : [];
-        rowIds.forEach(rowId => {
-            deselectRow(rows, rowId, dataAttributeName, checkboxQuerySelector);
-        });
-    };
-    const hasSelection = selectedRowIds.length > 0;
-    const isAllSelected = hasSelection && selectedRowIds.length === tableData.length && tableData.length > 0;
-    // --- Return hook state and handlers ---
-    return {
-        tableRef,
-        selectedRowIds,
-        activeRowId,
-        onSelection: handleSelection,
-        onActiveRowChange: handleActiveRowChange,
-        onToggleAll: handleToggleAll,
-        updateRowSelection,
-        setSelectedRowIds: (rowIds) => setSelectedRowIds(rowIds),
-        setActiveRowId: (activeRowId) => changeActiveRow(activeRowId),
-        hasSelection,
-        isAllSelected,
-    };
-};
-/**
- * Finds a table row element by its data attribute value.
- *
- * @param rows Array of HTMLTableRowElements to search within.
- * @param value The value of the data attribute to find.
- * @param attribute The name of the data attribute (e.g., 'data-id').
- * @returns The found HTMLTableRowElement or undefined.
- */
-export const getRowByDataAttribute = (rows, value, attribute) => {
-    if (!value) {
-        return undefined;
+import { useState as h, useRef as H, useEffect as K, useCallback as b } from "react";
+const k = "active", N = "data-id", O = ".table-checkbox", P = ".table-action", j = (o) => {
+  const {
+    tableData: e,
+    idKey: n,
+    initialSelectedRowIds: r = [],
+    initialActiveRowId: A = "",
+    checkboxQuerySelector: w = '.table-checkbox input[type="checkbox"]',
+    dataAttributeName: l = N,
+    ref: _
+  } = o, [d, u] = h(r), [R, p] = h(A), [f, x] = h(A), D = H(null), a = _ ?? D;
+  K(() => {
+    E();
+  }, [R, f, d]);
+  const E = () => {
+    if (!a.current)
+      return;
+    const t = [...a.current.rows];
+    f !== R && (q(t, f, l), $(t, R, l)), d.forEach((s) => {
+      V(t, s, l, w);
+    });
+  }, v = b((t) => {
+    t.preventDefault(), t.stopPropagation();
+    const c = t.currentTarget.getAttribute(l) ?? "", i = t.target, g = i.closest(O), U = i.closest(P);
+    g || U || S(c);
+  }, []), S = (t = "") => {
+    p((s) => {
+      const c = s === t ? "" : t;
+      return x(s), c;
+    });
+  }, y = b((t) => {
+    t.preventDefault(), t.stopPropagation();
+    const c = t.target.closest(`tr[${l}]`)?.getAttribute(l);
+    if (!c) {
+      console.warn("Could not find row ID for selection event.");
+      return;
     }
-    return rows.find(row => row.getAttribute(attribute) === value);
-};
-/**
- * Adds an "active" class to a specified table row.
- *
- * @param rows Array of HTMLTableRowElements to search within.
- * @param rowId The ID of the row to highlight.
- * @param dataAttributeName The data attribute used to identify the row.
- */
-export const highlightRow = (rows, rowId, dataAttributeName) => {
-    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);
-    row?.classList.add(ACTIVE_CLASS);
-};
-/**
- * Removes the "active" class from a specified table row.
- *
- * @param rows Array of HTMLTableRowElements to search within.
- * @param rowId The ID of the row to unhighlight.
- * @param dataAttributeName The data attribute used to identify the row.
- */
-export const removeHighlightFromRow = (rows, rowId, dataAttributeName) => {
-    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);
-    row?.classList.remove(ACTIVE_CLASS);
-};
-// Helper to get the checkbox input for a single row
-const getCheckboxFromRow = (row, checkboxQuerySelector) => {
-    return row.querySelector(checkboxQuerySelector);
-};
-/**
- * Sets the checked state of a checkbox within a specific table row.
- * @param rows Array of HTMLTableRowElements to search within.
- * @param rowId The ID of the row to target (value of dataAttribute).
- * @param dataAttribute The data attribute used to identify the row.
- * @param checkboxQuerySelector A CSS selector to find the checkbox input within the row.
- * @param isChecked The desired checked state (true for checked, false for unchecked).
- */
-export const setRowCheckboxState = (rows, rowId, dataAttribute, checkboxQuerySelector, isChecked) => {
-    const row = getRowByDataAttribute(rows, rowId, dataAttribute);
-    if (row) {
-        const checkbox = getCheckboxFromRow(row, checkboxQuerySelector);
-        if (checkbox) {
-            checkbox.checked = isChecked;
+    u((i) => i.includes(c) ? (T([c]), i.filter((g) => g !== c)) : [...i, c]);
+  }, []), B = b(
+    (t) => {
+      const s = e.map((c) => `${c[n]}`);
+      if (u(t ? s : []), t)
+        u(s);
+      else {
+        u([]), T(s);
+        for (const c in s) {
+          const i = a.current ? [...a.current.rows] : [];
+          L([...i], c, l, w);
         }
-    }
-};
-/**
- * Marks a specific row as selected by checking its checkbox.
- */
-export const selectRow = (rows, rowId, dataAttribute, checkboxQuerySelector) => {
-    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, true);
+      }
+    },
+    [e]
+  ), T = (t) => {
+    const s = a.current ? [...a.current.rows] : [];
+    t.forEach((c) => {
+      L(s, c, l, w);
+    });
+  }, I = d.length > 0, F = I && d.length === e.length && e.length > 0;
+  return {
+    tableRef: a,
+    selectedRowIds: d,
+    activeRowId: R,
+    onSelection: y,
+    onActiveRowChange: v,
+    onToggleAll: B,
+    updateRowSelection: E,
+    setSelectedRowIds: (t) => u(t),
+    setActiveRowId: (t) => S(t),
+    hasSelection: I,
+    isAllSelected: F
+  };
+}, C = (o, e, n) => {
+  if (e)
+    return o.find((r) => r.getAttribute(n) === e);
+}, $ = (o, e, n) => {
+  C(o, e, n)?.classList.add(k);
+}, q = (o, e, n) => {
+  C(o, e, n)?.classList.remove(k);
+}, Q = (o, e) => o.querySelector(e), m = (o, e, n, r, A) => {
+  const w = C(o, e, n);
+  if (w) {
+    const l = Q(w, r);
+    l && (l.checked = A);
+  }
+}, V = (o, e, n, r) => {
+  m(o, e, n, r, !0);
+}, L = (o, e, n, r) => {
+  m(o, e, n, r, !1);
 };
-/**
- * Marks a specific row as deselected by unchecking its checkbox.
- */
-export const deselectRow = (rows, rowId, dataAttribute, checkboxQuerySelector) => {
-    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, false);
+export {
+  k as ACTIVE_CLASS,
+  N as DEFAULT_DATA_ATTRIBUTE,
+  P as DEFAULT_TABLE_ACTION_CELL_CLASS,
+  O as DEFAULT_TABLE_CHECKBOX_CELL_CLASS,
+  j as default,
+  L as deselectRow,
+  C as getRowByDataAttribute,
+  $ as highlightRow,
+  q as removeHighlightFromRow,
+  V as selectRow,
+  m as setRowCheckboxState
 };
-export default useTableSelection;
+//# sourceMappingURL=useTableSelection.js.map

package/hooks/useTableSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableSelection.js","sources":["../../src/hooks/useTableSelection.ts"],"sourcesContent":["import { useState, useRef, useCallback, useEffect } from 'react';\n\n/**\n * CSS class applied to the currently active row.\n */\nexport const ACTIVE_CLASS = 'active';\n\n/**\n * Default HTML data attribute name used to store the unique ID on table row elements.\n */\nexport const DEFAULT_DATA_ATTRIBUTE = 'data-id';\n\n// Default classes for the checkbox and action cells\nexport const DEFAULT_TABLE_CHECKBOX_CELL_CLASS = '.table-checkbox';\nexport const DEFAULT_TABLE_ACTION_CELL_CLASS = '.table-action';\n\n/**\n * Options for the `useTableSelection` hook.\n */\nexport type UseTableSelectionOptions<TData extends Record<string, any>> = {\n    /**\n     * The array of data items to be displayed in the table.\n     * The hook uses this to determine all possible row IDs for \"select all\" functionality.\n     */\n    tableData: TData[];\n\n    /**\n     * The key in `TData` objects that serves as the unique identifier for each row.\n     */\n    idKey: keyof TData;\n\n    /**\n     * Optional array of row IDs that should be initially selected.\n     */\n    initialSelectedRowIds?: string[];\n\n    /**\n     * Optional ID of the row that should be initially marked as active.\n     */\n    initialActiveRowId?: string;\n\n    // customize reference values\n\n    /**\n     * Optional CSS query selector to find the checkbox input element within each table row.\n     * @default '.table-checkbox input[type=\"checkbox\"]'\n     */\n    checkboxQuerySelector?: string;\n\n    /**\n     * Optional name of the HTML data attribute on `<tr>` elements that holds the unique row ID.\n     * @default 'data-id' (matches DEFAULT_DATA_ATTRIBUTE)\n     */\n    dataAttributeName?: string;\n\n    /**\n     * Optional external ref for the table element. If not provided, the hook creates its own.\n     * Useful if the parent component needs direct access to the table DOM element for other purposes.\n     */\n    ref?: React.RefObject<HTMLTableElement>;\n};\n\n/**\n * Return value of the `useTableSelection` hook.\n */\nexport type UseTableSelectionReturn = {\n    /**\n     * React ref attached to the `<table>` HTML element.\n     * Ensure this ref is assigned to your table element to enable DOM manipulations.\n     */\n    tableRef: React.RefObject<HTMLTableElement>;\n\n    /**\n     * An array of strings, where each string is the ID of a currently selected row.\n     */\n    selectedRowIds: string[];\n\n    /**\n     * The ID of the currently active row. An empty string signifies no row is active.\n     */\n    activeRowId: string;\n\n    /**\n     * Callback handler to be attached to the click/change event of individual row selection UI elements (e.g., checkboxes).\n     * It expects the clicked element to be within a `<tr>` that has the specified `dataAttributeName`.\n     * Manages the selection state of a single row.\n     *\n     * @param event The React mouse event from the selection UI element.\n     */\n    onSelection: (event: React.MouseEvent<HTMLElement>) => void;\n\n    /**\n     * Callback handler to be attached to the click event of table row (`<tr>`) elements.\n     * Manages the active row state.\n     * @param event The React mouse event from the `<tr>` element.\n     */\n    onActiveRowChange: (event: React.MouseEvent<HTMLTableRowElement>) => void;\n\n    /**\n     * Callback handler to select or deselect all rows.\n     * @param shouldSelect If true, all rows in `tableData` will be selected; otherwise, all selections will be cleared.\n     */\n    onToggleAll: (shouldSelect: boolean) => void;\n\n    /**\n     * Function to update row selection and active highlighting. This is useful when the row data changes due to a search value\n     * or any other filter.\n     *\n     * @returns\n     */\n    updateRowSelection: () => void;\n\n    /**\n     * Setter function to change selected rows from the outside in a controlled manner.\n     *\n     * @param rowIds\n     * @returns\n     */\n    setSelectedRowIds: (rowIds: string[]) => void;\n\n    /**\n     * Setter function to change the active row from the outside in a controlled manner.\n     * Use this to deselect an active row.\n     *\n     * @param activeRowId\n     * @returns\n     */\n    setActiveRowId: (activeRowId: string | undefined) => void;\n\n    /**\n     * A boolean indicating whether at least one row is currently selected.\n     */\n    hasSelection: boolean;\n\n    /**\n     * A boolean indicating whether all rows in the current `tableData` are selected.\n     */\n    isAllSelected: boolean;\n};\n\n/**\n * A React hook to manage row selection and active row state for an HTML table,\n * including DOM manipulations for visual feedback to optimize performance by\n * preventing individual row re-renders.\n *\n * @param {UseTableSelectionOptions<TData>} options The configuration properties for the hook.\n * @returns {UseTableSelectionReturn} The state and handlers for managing table selection and active row.\n */\nconst useTableSelection = <TData extends Record<string, any>>(\n    props: UseTableSelectionOptions<TData>\n): UseTableSelectionReturn => {\n    const {\n        tableData,\n        idKey,\n        initialSelectedRowIds = [],\n        initialActiveRowId = '',\n        checkboxQuerySelector = '.table-checkbox input[type=\"checkbox\"]',\n        dataAttributeName = DEFAULT_DATA_ATTRIBUTE,\n        ref,\n    } = props;\n\n    const [selectedRowIds, setSelectedRowIds] = useState<string[]>(initialSelectedRowIds);\n    const [activeRowId, setActiveRowId] = useState<string>(initialActiveRowId);\n    const [lastActiveRowId, setLastActiveRowId] = useState<string>(initialActiveRowId);\n\n    const internalTableRef = useRef<HTMLTableElement>(null);\n    const tableRef = ref ?? internalTableRef;\n\n    // --- DOM Manipulation Effect (The performance workaround) ---\n    /**\n     * Effect to handle DOM manipulations for active row highlighting and ensuring\n     * checkboxes for selected rows are visually checked.\n     * This effect runs when active row state or selection state changes.\n     * Note: This effect currently only *selects* rows based on `selectedRowIds`.\n     * Deselection in the DOM is handled directly by `onSelection` and `onToggleAll` handlers.\n     * For a more centralized DOM update, this effect could be expanded to handle deselection as well.\n     */\n    useEffect(() => {\n        updateRowSelection();\n    }, [activeRowId, lastActiveRowId, selectedRowIds]); // Rerun when these change\n\n    const updateRowSelection = () => {\n        if (!tableRef.current) {\n            return;\n        }\n\n        const rows = [...tableRef.current.rows] as HTMLTableRowElement[];\n\n        if (lastActiveRowId !== activeRowId) {\n            // Due to performance reasons the individual rows should not re-render when the\n            // selected driver changes, hence we need to avoid passing that information as props\n            // to the row component otherwise it would re-render as the props have changed.\n            // Instead, we check here which row to highlight.\n            removeHighlightFromRow(rows, lastActiveRowId, dataAttributeName);\n            highlightRow(rows, activeRowId, dataAttributeName);\n        }\n\n        // handle multi-selection\n        selectedRowIds.forEach(rowId => {\n            selectRow(rows, rowId, dataAttributeName, checkboxQuerySelector);\n        });\n    };\n\n    const handleActiveRowChange = useCallback((event: React.MouseEvent<HTMLTableRowElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        const targetRow = event.currentTarget;\n        const rowId = targetRow.getAttribute(dataAttributeName) ?? '';\n\n        // Avoid activation if click is on checkbox/action area (more robust check needed if complex row structure)\n        const clickedElement = event.target as HTMLElement;\n        const isCheckboxCell = clickedElement.closest(DEFAULT_TABLE_CHECKBOX_CELL_CLASS);\n        const isActionCell = clickedElement.closest(DEFAULT_TABLE_ACTION_CELL_CLASS);\n        if (isCheckboxCell || isActionCell) {\n            return;\n        }\n\n        changeActiveRow(rowId);\n    }, []);\n\n    const changeActiveRow = (rowId = '') => {\n        setActiveRowId(currentActiveRow => {\n            const newActiveRowId = currentActiveRow === rowId ? '' : rowId;\n            setLastActiveRowId(currentActiveRow); // Update lastActive for the effect\n            return newActiveRowId;\n        });\n    };\n\n    const handleSelection = useCallback((event: React.MouseEvent<HTMLElement>) => {\n        event.preventDefault();\n        event.stopPropagation();\n\n        // Find the correct row element containing the data attribute\n        const rowElement = (event.target as HTMLElement).closest(`tr[${dataAttributeName}]`);\n        const selectedRowId = rowElement?.getAttribute(dataAttributeName);\n\n        if (!selectedRowId) {\n            console.warn('Could not find row ID for selection event.');\n            return;\n        }\n\n        setSelectedRowIds(prevSelectedRowIds => {\n            if (prevSelectedRowIds.includes(selectedRowId)) {\n                deselectRows([selectedRowId]);\n                return prevSelectedRowIds.filter(id => id !== selectedRowId);\n            }\n            return [...prevSelectedRowIds, selectedRowId];\n        });\n    }, []);\n\n    const handleToggleAll = useCallback(\n        (shouldSelect: boolean) => {\n            const allRowIds = tableData.map(row => `${row[idKey]}`);\n            setSelectedRowIds(shouldSelect ? allRowIds : []);\n\n            // Deselect all rows when there is at least one row selected, else select all rows\n            if (shouldSelect) {\n                setSelectedRowIds(allRowIds);\n            } else {\n                setSelectedRowIds([]);\n                deselectRows(allRowIds);\n\n                for (const id in allRowIds) {\n                    const rows = tableRef.current ? [...tableRef.current.rows] : [];\n                    deselectRow([...rows] as HTMLTableRowElement[], id, dataAttributeName, checkboxQuerySelector);\n                }\n            }\n            // DOM updates are handled by useEffect -> updateRowsDOM\n        },\n        [tableData]\n    );\n\n    const deselectRows = (rowIds: string[]) => {\n        const rows = tableRef.current ? [...tableRef.current.rows] : [];\n        rowIds.forEach(rowId => {\n            deselectRow(rows, rowId, dataAttributeName, checkboxQuerySelector);\n        });\n    };\n\n    const hasSelection = selectedRowIds.length > 0;\n    const isAllSelected = hasSelection && selectedRowIds.length === tableData.length && tableData.length > 0;\n\n    // --- Return hook state and handlers ---\n    return {\n        tableRef,\n        selectedRowIds,\n        activeRowId,\n        onSelection: handleSelection,\n        onActiveRowChange: handleActiveRowChange,\n        onToggleAll: handleToggleAll,\n        updateRowSelection,\n        setSelectedRowIds: (rowIds: string[]) => setSelectedRowIds(rowIds),\n        setActiveRowId: (activeRowId: string | undefined) => changeActiveRow(activeRowId),\n        hasSelection,\n        isAllSelected,\n    };\n};\n\n/**\n * Finds a table row element by its data attribute value.\n *\n * @param rows Array of HTMLTableRowElements to search within.\n * @param value The value of the data attribute to find.\n * @param attribute The name of the data attribute (e.g., 'data-id').\n * @returns The found HTMLTableRowElement or undefined.\n */\nexport const getRowByDataAttribute = (\n    rows: HTMLTableRowElement[],\n    value: string | null | undefined,\n    attribute: string\n): HTMLTableRowElement | undefined => {\n    if (!value) {\n        return undefined;\n    }\n    return rows.find(row => row.getAttribute(attribute) === value);\n};\n\n/**\n * Adds an \"active\" class to a specified table row.\n *\n * @param rows Array of HTMLTableRowElements to search within.\n * @param rowId The ID of the row to highlight.\n * @param dataAttributeName The data attribute used to identify the row.\n */\nexport const highlightRow = (rows: HTMLTableRowElement[], rowId: string | null, dataAttributeName: string) => {\n    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);\n    row?.classList.add(ACTIVE_CLASS);\n};\n\n/**\n * Removes the \"active\" class from a specified table row.\n *\n * @param rows Array of HTMLTableRowElements to search within.\n * @param rowId The ID of the row to unhighlight.\n * @param dataAttributeName The data attribute used to identify the row.\n */\nexport const removeHighlightFromRow = (\n    rows: HTMLTableRowElement[],\n    rowId: string | null,\n    dataAttributeName: string\n) => {\n    const row = getRowByDataAttribute(rows, rowId, dataAttributeName);\n    row?.classList.remove(ACTIVE_CLASS);\n};\n\n// Helper to get the checkbox input for a single row\nconst getCheckboxFromRow = (row: HTMLTableRowElement, checkboxQuerySelector: string): HTMLInputElement | null => {\n    return row.querySelector(checkboxQuerySelector);\n};\n\n/**\n * Sets the checked state of a checkbox within a specific table row.\n * @param rows Array of HTMLTableRowElements to search within.\n * @param rowId The ID of the row to target (value of dataAttribute).\n * @param dataAttribute The data attribute used to identify the row.\n * @param checkboxQuerySelector A CSS selector to find the checkbox input within the row.\n * @param isChecked The desired checked state (true for checked, false for unchecked).\n */\nexport const setRowCheckboxState = (\n    rows: HTMLTableRowElement[],\n    rowId: string,\n    dataAttribute: string,\n    checkboxQuerySelector: string,\n    isChecked: boolean\n) => {\n    const row = getRowByDataAttribute(rows, rowId, dataAttribute);\n    if (row) {\n        const checkbox = getCheckboxFromRow(row, checkboxQuerySelector);\n        if (checkbox) {\n            checkbox.checked = isChecked;\n        }\n    }\n};\n\n/**\n * Marks a specific row as selected by checking its checkbox.\n */\nexport const selectRow = (\n    rows: HTMLTableRowElement[],\n    rowId: string,\n    dataAttribute: string,\n    checkboxQuerySelector: string\n) => {\n    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, true);\n};\n\n/**\n * Marks a specific row as deselected by unchecking its checkbox.\n */\nexport const deselectRow = (\n    rows: HTMLTableRowElement[],\n    rowId: string,\n    dataAttribute: string,\n    checkboxQuerySelector: string\n) => {\n    setRowCheckboxState(rows, rowId, dataAttribute, checkboxQuerySelector, false);\n};\n\nexport default useTableSelection;\n"],"names":["ACTIVE_CLASS","DEFAULT_DATA_ATTRIBUTE","DEFAULT_TABLE_CHECKBOX_CELL_CLASS","DEFAULT_TABLE_ACTION_CELL_CLASS","useTableSelection","props","tableData","idKey","initialSelectedRowIds","initialActiveRowId","checkboxQuerySelector","dataAttributeName","ref","selectedRowIds","setSelectedRowIds","useState","activeRowId","setActiveRowId","lastActiveRowId","setLastActiveRowId","internalTableRef","useRef","tableRef","useEffect","updateRowSelection","rows","removeHighlightFromRow","highlightRow","rowId","selectRow","handleActiveRowChange","useCallback","event","clickedElement","isCheckboxCell","isActionCell","changeActiveRow","currentActiveRow","newActiveRowId","handleSelection","selectedRowId","prevSelectedRowIds","deselectRows","id","handleToggleAll","shouldSelect","allRowIds","row","deselectRow","rowIds","hasSelection","isAllSelected","getRowByDataAttribute","value","attribute","getCheckboxFromRow","setRowCheckboxState","dataAttribute","isChecked","checkbox"],"mappings":"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"}

package/hooks/useTimeout.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import { default as React } from 'react';
 /**
  * A custom hook for handling timeout events.
  *

package/hooks/useTimeout.js

@@ -1,72 +1,38 @@
-import { useEffect, useMemo, useRef } from 'react';
-// See www.joshwcomeau.com/snippets/react-hooks/use-timeout/
-/**
- * A custom hook for handling timeout events.
- *
- * @param callback The callback function to execute after the timeout.
- * @param delay The duration of the timeout in milliseconds. Pass `null` to cancel the timeout.
- *
- * @returns A mutable ref object to manage the timeout ID.
- */
-const useTimeout = (callback, delay) => {
-    const timeoutRef = useRef(null);
-    const savedCallback = useRef(callback);
-    // Update the saved callback when the callback prop changes
-    useEffect(() => {
-        savedCallback.current = callback;
-    }, [callback]);
-    // Set up the timeout when the delay changes
-    useEffect(() => {
-        const tick = () => savedCallback.current();
-        // If delay is a number, set up the timeout
-        if (typeof delay === 'number') {
-            timeoutRef.current = window.setTimeout(tick, delay);
-            // Cleanup function to clear the timeout when delay changes or component unmounts
-            return () => {
-                if (timeoutRef.current !== null) {
-                    window.clearTimeout(timeoutRef.current);
-                }
-            };
-        }
-    }, [delay]);
-    return timeoutRef;
-};
-export const useChainedTimeout = () => {
-    const MAX_DELAY_MS = 2 ** 31 - 1;
-    const setChainedTimeout = (ref, fn, timeoutAtMs) => {
-        const delayMs = timeoutAtMs - Date.now();
-        ref.current =
-            delayMs <= MAX_DELAY_MS
-                ? setTimeout(fn, delayMs)
-                : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);
-    };
-    const handleRef = useRef(null);
-    const { set, clear } = useMemo(() => {
-        const clear = () => clearTimeout(handleRef.current);
-        const set = (fn, delayMs = 0) => {
-            clear();
-            if (delayMs <= MAX_DELAY_MS) {
-                // For simplicity, if the timeout is short, just set a normal timeout.
-                handleRef.current = setTimeout(fn, delayMs);
-            }
-            else {
-                setChainedTimeout(handleRef, fn, Date.now() + delayMs);
-            }
-        };
-        return {
-            set,
-            clear,
-        };
-    }, []);
-    useEffect(() => {
-        return () => {
-            clear();
-        };
-    }, [clear]);
+import { useRef as m, useMemo as T, useEffect as l } from "react";
+const f = (s, t) => {
+  const e = m(null), c = m(s);
+  return l(() => {
+    c.current = s;
+  }, [s]), l(() => {
+    const r = () => c.current();
+    if (typeof t == "number")
+      return e.current = window.setTimeout(r, t), () => {
+        e.current !== null && window.clearTimeout(e.current);
+      };
+  }, [t]), e;
+}, _ = () => {
+  const t = (u, i, o) => {
+    const n = o - Date.now();
+    u.current = n <= 2147483647 ? setTimeout(i, n) : setTimeout(() => t(u, i, o), 2147483647);
+  }, e = m(null), { set: c, clear: r } = T(() => {
+    const u = () => clearTimeout(e.current);
     return {
-        set,
-        clear,
-        handleRef,
+      set: (o, n = 0) => {
+        u(), n <= 2147483647 ? e.current = setTimeout(o, n) : t(e, o, Date.now() + n);
+      },
+      clear: u
     };
+  }, []);
+  return l(() => () => {
+    r();
+  }, [r]), {
+    set: c,
+    clear: r,
+    handleRef: e
+  };
+};
+export {
+  f as default,
+  _ as useChainedTimeout
 };
-export default useTimeout;
+//# sourceMappingURL=useTimeout.js.map

package/hooks/useTimeout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeout.js","sources":["../../src/hooks/useTimeout.ts"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useMemo, useRef } from 'react';\n\n// See www.joshwcomeau.com/snippets/react-hooks/use-timeout/\n\n/**\n * A custom hook for handling timeout events.\n *\n * @param callback The callback function to execute after the timeout.\n * @param delay The duration of the timeout in milliseconds. Pass `null` to cancel the timeout.\n *\n * @returns A mutable ref object to manage the timeout ID.\n */\nconst useTimeout = (callback: () => void, delay: number | null): React.MutableRefObject<number | null> => {\n    const timeoutRef = useRef<number | null>(null);\n    const savedCallback = useRef<() => void>(callback);\n\n    // Update the saved callback when the callback prop changes\n    useEffect(() => {\n        savedCallback.current = callback;\n    }, [callback]);\n\n    // Set up the timeout when the delay changes\n    useEffect(() => {\n        const tick = () => savedCallback.current();\n\n        // If delay is a number, set up the timeout\n        if (typeof delay === 'number') {\n            timeoutRef.current = window.setTimeout(tick, delay);\n\n            // Cleanup function to clear the timeout when delay changes or component unmounts\n            return () => {\n                if (timeoutRef.current !== null) {\n                    window.clearTimeout(timeoutRef.current);\n                }\n            };\n        }\n    }, [delay]);\n\n    return timeoutRef;\n};\n\nexport const useChainedTimeout = () => {\n    const MAX_DELAY_MS = 2 ** 31 - 1;\n\n    const setChainedTimeout = (ref: React.MutableRefObject<any>, fn: () => void, timeoutAtMs: number) => {\n        const delayMs = timeoutAtMs - Date.now();\n\n        ref.current =\n            delayMs <= MAX_DELAY_MS\n                ? setTimeout(fn, delayMs)\n                : setTimeout(() => setChainedTimeout(ref, fn, timeoutAtMs), MAX_DELAY_MS);\n    };\n\n    const handleRef = useRef<any>(null);\n\n    const { set, clear } = useMemo(() => {\n        const clear = () => clearTimeout(handleRef.current);\n\n        const set = (fn: () => void, delayMs = 0): void => {\n            clear();\n\n            if (delayMs <= MAX_DELAY_MS) {\n                // For simplicity, if the timeout is short, just set a normal timeout.\n                handleRef.current = setTimeout(fn, delayMs);\n            } else {\n                setChainedTimeout(handleRef, fn, Date.now() + delayMs);\n            }\n        };\n\n        return {\n            set,\n            clear,\n        };\n    }, []);\n\n    useEffect(() => {\n        return () => {\n            clear();\n        };\n    }, [clear]);\n\n    return {\n        set,\n        clear,\n        handleRef,\n    };\n};\n\nexport default useTimeout;\n"],"names":["useTimeout","callback","delay","timeoutRef","useRef","savedCallback","useEffect","tick","useChainedTimeout","setChainedTimeout","ref","fn","timeoutAtMs","delayMs","handleRef","set","clear","useMemo"],"mappings":";AAaA,MAAMA,IAAa,CAACC,GAAsBC,MAAgE;AACtG,QAAMC,IAAaC,EAAsB,IAAI,GACvCC,IAAgBD,EAAmBH,CAAQ;AAGjD,SAAAK,EAAU,MAAM;AACZ,IAAAD,EAAc,UAAUJ;AAAA,EAC5B,GAAG,CAACA,CAAQ,CAAC,GAGbK,EAAU,MAAM;AACZ,UAAMC,IAAO,MAAMF,EAAc,QAAA;AAGjC,QAAI,OAAOH,KAAU;AACjB,aAAAC,EAAW,UAAU,OAAO,WAAWI,GAAML,CAAK,GAG3C,MAAM;AACT,QAAIC,EAAW,YAAY,QACvB,OAAO,aAAaA,EAAW,OAAO;AAAA,MAE9C;AAAA,EAER,GAAG,CAACD,CAAK,CAAC,GAEHC;AACX,GAEaK,IAAoB,MAAM;AAGnC,QAAMC,IAAoB,CAACC,GAAkCC,GAAgBC,MAAwB;AACjG,UAAMC,IAAUD,IAAc,KAAK,IAAA;AAEnC,IAAAF,EAAI,UACAG,KAAW,aACL,WAAWF,GAAIE,CAAO,IACtB,WAAW,MAAMJ,EAAkBC,GAAKC,GAAIC,CAAW,GAAG,UAAY;AAAA,EACpF,GAEME,IAAYV,EAAY,IAAI,GAE5B,EAAE,KAAAW,GAAK,OAAAC,EAAA,IAAUC,EAAQ,MAAM;AACjC,UAAMD,IAAQ,MAAM,aAAaF,EAAU,OAAO;AAalD,WAAO;AAAA,MACH,KAZQ,CAACH,GAAgBE,IAAU,MAAY;AAC/CG,QAAAA,EAAAA,GAEIH,KAAW,aAEXC,EAAU,UAAU,WAAWH,GAAIE,CAAO,IAE1CJ,EAAkBK,GAAWH,GAAI,KAAK,IAAA,IAAQE,CAAO;AAAA,MAE7D;AAAA,MAII,OAAAG;AAAAA,IAAA;AAAA,EAER,GAAG,CAAA,CAAE;AAEL,SAAAV,EAAU,MACC,MAAM;AACT,IAAAU,EAAA;AAAA,EACJ,GACD,CAACA,CAAK,CAAC,GAEH;AAAA,IACH,KAAAD;AAAA,IACA,OAAAC;AAAA,IACA,WAAAF;AAAA,EAAA;AAER;"}

package/hooks/useToggle.js

@@ -1,31 +1,19 @@
-import { useState, useCallback } from 'react';
-/**
- * Custom hook to handle toggle states.
- *
- * @param initialValue - The initial state of the toggle (default: false)
- * @returns An object with the current value, toggle function, and control functions
- */
-const useToggle = (initialValue = false) => {
-    const [value, setValue] = useState(initialValue);
-    // Handle actual custom callbacks functions and
-    // events when assigning this function to a button directly
-    const toggle = useCallback((eventOrCallback) => {
-        setValue(prev => {
-            const newValue = !prev;
-            if (typeof eventOrCallback === 'function') {
-                // Call the callback with the new value
-                eventOrCallback(newValue);
-            }
-            return newValue;
-        });
-    }, []);
-    const enable = useCallback(() => setValue(true), []);
-    const disable = useCallback(() => setValue(false), []);
-    return {
-        isToggled: value,
-        toggle,
-        enable,
-        disable,
-    };
+import { useState as r, useCallback as t } from "react";
+const i = (l = !1) => {
+  const [n, e] = r(l), u = t((s) => {
+    e((f) => {
+      const o = !f;
+      return typeof s == "function" && s(o), o;
+    });
+  }, []), a = t(() => e(!0), []), c = t(() => e(!1), []);
+  return {
+    isToggled: n,
+    toggle: u,
+    enable: a,
+    disable: c
+  };
 };
-export default useToggle;
+export {
+  i as default
+};
+//# sourceMappingURL=useToggle.js.map

package/hooks/useToggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.js","sources":["../../src/hooks/useToggle.ts"],"sourcesContent":["import { useState, useCallback } from 'react';\n\n/**\n * Custom hook to handle toggle states.\n *\n * @param initialValue - The initial state of the toggle (default: false)\n * @returns An object with the current value, toggle function, and control functions\n */\nconst useToggle = (initialValue = false) => {\n    const [value, setValue] = useState<boolean>(initialValue);\n\n    // Handle actual custom callbacks functions and\n    // events when assigning this function to a button directly\n    const toggle = useCallback((eventOrCallback?: React.SyntheticEvent | ((newValue: boolean) => void)) => {\n        setValue(prev => {\n            const newValue = !prev;\n\n            if (typeof eventOrCallback === 'function') {\n                // Call the callback with the new value\n                eventOrCallback(newValue);\n            }\n\n            return newValue;\n        });\n    }, []);\n\n    const enable = useCallback(() => setValue(true), []);\n    const disable = useCallback(() => setValue(false), []);\n\n    return {\n        isToggled: value,\n        toggle,\n        enable,\n        disable,\n    };\n};\n\nexport default useToggle;\n"],"names":["useToggle","initialValue","value","setValue","useState","toggle","useCallback","eventOrCallback","prev","newValue","enable","disable"],"mappings":";AAQA,MAAMA,IAAY,CAACC,IAAe,OAAU;AACxC,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAkBH,CAAY,GAIlDI,IAASC,EAAY,CAACC,MAA2E;AACnG,IAAAJ,EAAS,CAAAK,MAAQ;AACb,YAAMC,IAAW,CAACD;AAElB,aAAI,OAAOD,KAAoB,cAE3BA,EAAgBE,CAAQ,GAGrBA;AAAA,IACX,CAAC;AAAA,EACL,GAAG,CAAA,CAAE,GAECC,IAASJ,EAAY,MAAMH,EAAS,EAAI,GAAG,CAAA,CAAE,GAC7CQ,IAAUL,EAAY,MAAMH,EAAS,EAAK,GAAG,CAAA,CAAE;AAErD,SAAO;AAAA,IACH,WAAWD;AAAA,IACX,QAAAG;AAAA,IACA,QAAAK;AAAA,IACA,SAAAC;AAAA,EAAA;AAER;"}