@rio-cloud/rio-uikit 2.3.0-beta.1 → 2.3.0-beta.3

package/components/table/runtime/useResolvedRenderHeader.js

@@ -0,0 +1,67 @@
+import { useMemo as f } from "react";
+const z = (g) => {
+  const { renderHeaderColumns: i, resolvedRenderColumns: a, sortBy: l, sortDirection: h } = g;
+  return f(() => {
+    if (i.length === 0 || a.length === 0)
+      return;
+    const y = new Set(Array.isArray(l) ? l : l ? [l] : []), b = Math.max(...i.map((e) => e.row + e.rowSpan - 1), 1), d = Array.from({ length: b }, () => Array(a.length).fill(!1)), c = new Map(
+      a.map((e) => [e.columnKey, e])
+    ), m = new Map(
+      a.map((e, r) => [e.columnKey, r + 1])
+    ), w = (e, r) => {
+      for (let o = 1; o <= a.length - r + 1; o += 1)
+        if (d[e - 1]?.slice(o - 1, o - 1 + r).every((t) => !t))
+          return o;
+      return 1;
+    }, p = i.map((e) => {
+      const r = e.columnKey ? c.get(e.columnKey) : void 0, o = r?.columnKey ? {
+        key: r.columnKey,
+        label: r.label,
+        width: r.width,
+        mobileLabel: r.mobileLabel,
+        horizontalAlign: r.horizontalAlign,
+        headerClassName: r.headerClassName,
+        hideOnMobile: r.hideOnMobile,
+        sortable: r.sortable,
+        draggable: r.draggable,
+        resizeable: r.resizeable,
+        minResizeWidth: r.minResizeWidth,
+        maxResizeWidth: r.maxResizeWidth
+      } : void 0, n = r ? m.get(r.columnKey) ?? 1 : w(e.row, e.colSpan);
+      for (let t = e.row - 1; t < e.row - 1 + e.rowSpan; t += 1)
+        for (let s = n - 1; s < n - 1 + e.colSpan; s += 1)
+          d[t]?.[s] !== void 0 && (d[t][s] = !0);
+      return {
+        key: e.id,
+        columnKey: e.columnKey,
+        label: e.label,
+        icon: e.icon,
+        filter: e.filter,
+        hideLabel: e.hideLabel,
+        horizontalAlign: r?.horizontalAlign ?? e.horizontalAlign,
+        verticalAlign: r?.verticalAlign ?? e.verticalAlign,
+        className: void 0,
+        headerClassName: r?.headerClassName ?? e.headerClassName,
+        hideOnMobile: r?.hideOnMobile ?? e.hideOnMobile,
+        draggable: r?.draggable ?? e.draggable,
+        resizeable: r?.resizeable ?? e.resizeable,
+        sortable: r?.sortable ?? e.sortable,
+        sortDirection: e.columnKey && y.has(e.columnKey) ? h : void 0,
+        rowStart: e.row,
+        rowSpan: e.rowSpan,
+        columnStart: n,
+        colSpan: e.colSpan,
+        source: o
+      };
+    });
+    return {
+      rowCount: b,
+      totalColumnCount: a.length,
+      columns: p
+    };
+  }, [i, a, l, h]);
+};
+export {
+  z as default
+};
+//# sourceMappingURL=useResolvedRenderHeader.js.map

package/components/table/runtime/useResolvedRenderHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResolvedRenderHeader.js","sources":["../../../../src/components/table/runtime/useResolvedRenderHeader.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { RenderHeaderColumn } from '../context/TableRenderContext';\nimport type { TableViewHeader } from '../model/tableView.types';\nimport type { TableColumnDefinition, TableRowData, TableSortDirection } from '../Table.types';\n\ntype UseResolvedRenderHeaderProps<RowType extends TableRowData> = {\n    renderHeaderColumns: RenderHeaderColumn<RowType>[];\n    resolvedRenderColumns: RenderHeaderColumn<RowType>[];\n    sortBy?: string | string[];\n    sortDirection?: TableSortDirection;\n};\n\n/**\n * Builds the normalized header layout from registered header cells and the\n * already-resolved data columns.\n *\n * `useResolvedRenderColumns(...)` decides which columns actually exist after\n * reorder/resize behavior. This hook takes that flat column model plus the\n * registered header cells and computes the final header grid:\n * - row count\n * - column start positions\n * - row/column spans\n * - sortable state for the active sort key\n * - `source` metadata for downstream header/cell consumers\n *\n * The result is a stable header view model that `TableHeader` can render\n * without repeating placement logic.\n */\nconst useResolvedRenderHeader = <RowType extends TableRowData>(\n    props: UseResolvedRenderHeaderProps<RowType>\n): TableViewHeader<RowType> | undefined => {\n    const { renderHeaderColumns, resolvedRenderColumns, sortBy, sortDirection } = props;\n\n    return useMemo<TableViewHeader<RowType> | undefined>(() => {\n        if (renderHeaderColumns.length === 0 || resolvedRenderColumns.length === 0) {\n            return;\n        }\n\n        const sortedColumnKeys = new Set(Array.isArray(sortBy) ? sortBy : sortBy ? [sortBy] : []);\n        const rowCount = Math.max(...renderHeaderColumns.map(column => column.row + column.rowSpan - 1), 1);\n        const occupied = Array.from({ length: rowCount }, () => Array(resolvedRenderColumns.length).fill(false));\n        const resolvedRenderColumnsByKey = new Map(\n            resolvedRenderColumns.map(column => [column.columnKey, column] as const)\n        );\n        const columnStartByKey = new Map(\n            resolvedRenderColumns.map((column, index) => [column.columnKey, index + 1] as const)\n        );\n\n        // Group headers without a direct `columnKey` still need a column start.\n        // Find the next free slot by walking the occupied grid from left to right.\n        const findColumnStart = (rowStart: number, colSpan: number) => {\n            for (let candidate = 1; candidate <= resolvedRenderColumns.length - colSpan + 1; candidate += 1) {\n                const hasFreeSlot = occupied[rowStart - 1]\n                    ?.slice(candidate - 1, candidate - 1 + colSpan)\n                    .every(isUsed => !isUsed);\n\n                if (hasFreeSlot) {\n                    return candidate;\n                }\n            }\n\n            return 1;\n        };\n\n        const columns = renderHeaderColumns.map(column => {\n            const resolvedRenderColumn = column.columnKey\n                ? resolvedRenderColumnsByKey.get(column.columnKey)\n                : undefined;\n            const sourceColumnDefinition: TableColumnDefinition<RowType> | undefined = resolvedRenderColumn?.columnKey\n                ? {\n                      key: resolvedRenderColumn.columnKey,\n                      label: resolvedRenderColumn.label,\n                      width: resolvedRenderColumn.width,\n                      mobileLabel: resolvedRenderColumn.mobileLabel,\n                      horizontalAlign: resolvedRenderColumn.horizontalAlign,\n                      headerClassName: resolvedRenderColumn.headerClassName,\n                      hideOnMobile: resolvedRenderColumn.hideOnMobile,\n                      sortable: resolvedRenderColumn.sortable,\n                      draggable: resolvedRenderColumn.draggable,\n                      resizeable: resolvedRenderColumn.resizeable,\n                      minResizeWidth: resolvedRenderColumn.minResizeWidth,\n                      maxResizeWidth: resolvedRenderColumn.maxResizeWidth,\n                  }\n                : undefined;\n            const columnStart = resolvedRenderColumn\n                ? (columnStartByKey.get(resolvedRenderColumn.columnKey) ?? 1)\n                : findColumnStart(column.row, column.colSpan);\n\n            // Mark the occupied grid so following grouped header cells can find\n            // the next free placement slot in multi-row header layouts.\n            for (let rowIndex = column.row - 1; rowIndex < column.row - 1 + column.rowSpan; rowIndex += 1) {\n                for (\n                    let columnIndex = columnStart - 1;\n                    columnIndex < columnStart - 1 + column.colSpan;\n                    columnIndex += 1\n                ) {\n                    if (occupied[rowIndex]?.[columnIndex] !== undefined) {\n                        occupied[rowIndex][columnIndex] = true;\n                    }\n                }\n            }\n\n            return {\n                key: column.id,\n                columnKey: column.columnKey,\n                label: column.label,\n                icon: column.icon,\n                filter: column.filter,\n                hideLabel: column.hideLabel,\n                horizontalAlign: resolvedRenderColumn?.horizontalAlign ?? column.horizontalAlign,\n                verticalAlign: resolvedRenderColumn?.verticalAlign ?? column.verticalAlign,\n                className: undefined,\n                headerClassName: resolvedRenderColumn?.headerClassName ?? column.headerClassName,\n                hideOnMobile: resolvedRenderColumn?.hideOnMobile ?? column.hideOnMobile,\n                draggable: resolvedRenderColumn?.draggable ?? column.draggable,\n                resizeable: resolvedRenderColumn?.resizeable ?? column.resizeable,\n                sortable: resolvedRenderColumn?.sortable ?? column.sortable,\n                sortDirection: column.columnKey && sortedColumnKeys.has(column.columnKey) ? sortDirection : undefined,\n                rowStart: column.row,\n                rowSpan: column.rowSpan,\n                columnStart,\n                colSpan: column.colSpan,\n                source: sourceColumnDefinition,\n            };\n        });\n\n        return {\n            rowCount,\n            totalColumnCount: resolvedRenderColumns.length,\n            columns,\n        };\n    }, [renderHeaderColumns, resolvedRenderColumns, sortBy, sortDirection]);\n};\n\nexport default useResolvedRenderHeader;\n"],"names":["useResolvedRenderHeader","props","renderHeaderColumns","resolvedRenderColumns","sortBy","sortDirection","useMemo","sortedColumnKeys","rowCount","column","occupied","resolvedRenderColumnsByKey","columnStartByKey","index","findColumnStart","rowStart","colSpan","candidate","isUsed","columns","resolvedRenderColumn","sourceColumnDefinition","columnStart","rowIndex","columnIndex"],"mappings":"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"}

package/components/table/selection/useInternalTableSelectionState.d.ts

@@ -0,0 +1,17 @@
+import { RenderBodyRow } from '../context/TableRenderContext';
+import { TableRowData, TableRowId } from '../Table.types';
+type UseInternalTableSelectionStateOptions<RowType extends TableRowData> = {
+    bodyRows: RenderBodyRow<RowType>[];
+    selectedRowIds?: TableRowId[];
+    onSelectionChange?: (rowIds: TableRowId[]) => void;
+};
+type UseInternalTableSelectionStateReturn = {
+    currentSelectedRowIds: TableRowId[];
+    selectedRowIdSet: Set<TableRowId>;
+    isAllRowsSelected: boolean;
+    isSomeRowsSelected: boolean;
+    handleToggleAllSelection: () => void;
+    handleToggleRowSelection: (rowId: TableRowId) => void;
+};
+declare const useInternalTableSelectionState: <RowType extends TableRowData>(props: UseInternalTableSelectionStateOptions<RowType>) => UseInternalTableSelectionStateReturn;
+export default useInternalTableSelectionState;

package/components/table/selection/useInternalTableSelectionState.js

@@ -0,0 +1,28 @@
+import { useMemo as o } from "react";
+const f = (r) => {
+  const { bodyRows: c, selectedRowIds: w, onSelectionChange: n } = r, l = o(
+    () => c.filter((e) => e.kind === "data" && !e.disabled).map((e) => e.rowId),
+    [c]
+  ), d = o(() => new Set(l), [l]), t = w ?? [], a = o(() => new Set(t), [t]), S = o(
+    () => t.filter((e) => d.has(e)),
+    [t, d]
+  ), i = o(() => new Set(S), [S]), s = l.length > 0 && l.every((e) => i.has(e)), R = i.size > 0 && !s;
+  return {
+    currentSelectedRowIds: t,
+    selectedRowIdSet: a,
+    isAllRowsSelected: s,
+    isSomeRowsSelected: R,
+    handleToggleAllSelection: () => {
+      n?.(s ? [] : l);
+    },
+    handleToggleRowSelection: (e) => {
+      n && n(
+        a.has(e) ? t.filter((g) => g !== e) : [...t, e]
+      );
+    }
+  };
+};
+export {
+  f as default
+};
+//# sourceMappingURL=useInternalTableSelectionState.js.map

package/components/table/selection/useInternalTableSelectionState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInternalTableSelectionState.js","sources":["../../../../src/components/table/selection/useInternalTableSelectionState.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { RenderBodyRow } from '../context/TableRenderContext';\nimport type { TableRowData, TableRowId } from '../Table.types';\n\ntype UseInternalTableSelectionStateOptions<RowType extends TableRowData> = {\n    bodyRows: RenderBodyRow<RowType>[];\n    selectedRowIds?: TableRowId[];\n    onSelectionChange?: (rowIds: TableRowId[]) => void;\n};\n\ntype UseInternalTableSelectionStateReturn = {\n    currentSelectedRowIds: TableRowId[];\n    selectedRowIdSet: Set<TableRowId>;\n    isAllRowsSelected: boolean;\n    isSomeRowsSelected: boolean;\n    handleToggleAllSelection: () => void;\n    handleToggleRowSelection: (rowId: TableRowId) => void;\n};\n\nconst useInternalTableSelectionState = <RowType extends TableRowData>(\n    props: UseInternalTableSelectionStateOptions<RowType>\n): UseInternalTableSelectionStateReturn => {\n    const { bodyRows, selectedRowIds, onSelectionChange } = props;\n\n    const selectableRowIds = useMemo(\n        () => bodyRows.filter(row => row.kind === 'data' && !row.disabled).map(row => row.rowId),\n        [bodyRows]\n    );\n    const selectableRowIdSet = useMemo(() => new Set(selectableRowIds), [selectableRowIds]);\n    const currentSelectedRowIds = selectedRowIds ?? [];\n    const selectedRowIdSet = useMemo(() => new Set(currentSelectedRowIds), [currentSelectedRowIds]);\n    const normalizedSelectedRowIds = useMemo(\n        () => currentSelectedRowIds.filter(rowId => selectableRowIdSet.has(rowId)),\n        [currentSelectedRowIds, selectableRowIdSet]\n    );\n    const normalizedSelectedRowIdSet = useMemo(() => new Set(normalizedSelectedRowIds), [normalizedSelectedRowIds]);\n\n    const isAllRowsSelected =\n        selectableRowIds.length > 0 && selectableRowIds.every(rowId => normalizedSelectedRowIdSet.has(rowId));\n    const isSomeRowsSelected = normalizedSelectedRowIdSet.size > 0 && !isAllRowsSelected;\n\n    const handleToggleAllSelection = () => {\n        onSelectionChange?.(isAllRowsSelected ? [] : selectableRowIds);\n    };\n\n    const handleToggleRowSelection = (rowId: TableRowId) => {\n        if (!onSelectionChange) {\n            return;\n        }\n\n        onSelectionChange(\n            selectedRowIdSet.has(rowId)\n                ? currentSelectedRowIds.filter(selectedRowId => selectedRowId !== rowId)\n                : [...currentSelectedRowIds, rowId]\n        );\n    };\n\n    return {\n        currentSelectedRowIds,\n        selectedRowIdSet,\n        isAllRowsSelected,\n        isSomeRowsSelected,\n        handleToggleAllSelection,\n        handleToggleRowSelection,\n    };\n};\n\nexport default useInternalTableSelectionState;\n"],"names":["useInternalTableSelectionState","props","bodyRows","selectedRowIds","onSelectionChange","selectableRowIds","useMemo","row","selectableRowIdSet","currentSelectedRowIds","selectedRowIdSet","normalizedSelectedRowIds","rowId","normalizedSelectedRowIdSet","isAllRowsSelected","isSomeRowsSelected","selectedRowId"],"mappings":";AAoBA,MAAMA,IAAiC,CACnCC,MACuC;AACvC,QAAM,EAAE,UAAAC,GAAU,gBAAAC,GAAgB,mBAAAC,EAAA,IAAsBH,GAElDI,IAAmBC;AAAA,IACrB,MAAMJ,EAAS,OAAO,CAAAK,MAAOA,EAAI,SAAS,UAAU,CAACA,EAAI,QAAQ,EAAE,IAAI,CAAAA,MAAOA,EAAI,KAAK;AAAA,IACvF,CAACL,CAAQ;AAAA,EAAA,GAEPM,IAAqBF,EAAQ,MAAM,IAAI,IAAID,CAAgB,GAAG,CAACA,CAAgB,CAAC,GAChFI,IAAwBN,KAAkB,CAAA,GAC1CO,IAAmBJ,EAAQ,MAAM,IAAI,IAAIG,CAAqB,GAAG,CAACA,CAAqB,CAAC,GACxFE,IAA2BL;AAAA,IAC7B,MAAMG,EAAsB,OAAO,OAASD,EAAmB,IAAII,CAAK,CAAC;AAAA,IACzE,CAACH,GAAuBD,CAAkB;AAAA,EAAA,GAExCK,IAA6BP,EAAQ,MAAM,IAAI,IAAIK,CAAwB,GAAG,CAACA,CAAwB,CAAC,GAExGG,IACFT,EAAiB,SAAS,KAAKA,EAAiB,MAAM,CAAAO,MAASC,EAA2B,IAAID,CAAK,CAAC,GAClGG,IAAqBF,EAA2B,OAAO,KAAK,CAACC;AAkBnE,SAAO;AAAA,IACH,uBAAAL;AAAA,IACA,kBAAAC;AAAA,IACA,mBAAAI;AAAA,IACA,oBAAAC;AAAA,IACA,0BArB6B,MAAM;AACnC,MAAAX,IAAoBU,IAAoB,CAAA,IAAKT,CAAgB;AAAA,IACjE;AAAA,IAoBI,0BAlB6B,CAACO,MAAsB;AACpD,MAAKR,KAILA;AAAA,QACIM,EAAiB,IAAIE,CAAK,IACpBH,EAAsB,OAAO,CAAAO,MAAiBA,MAAkBJ,CAAK,IACrE,CAAC,GAAGH,GAAuBG,CAAK;AAAA,MAAA;AAAA,IAE9C;AAAA,EAQI;AAER;"}

package/components/table/selection/useTableSelection.d.ts

@@ -1,8 +1,8 @@
-import { TableRowId } from '../Table.types';
+import { TableRowData, TableRowId } from '../Table.types';
 /**
  * Configuration for `useTableSelection`.
  */
-export type UseTableSelectionOptions<RowType extends Record<string, unknown>> = {
+export type UseTableSelectionOptions<RowType extends TableRowData> = {
     /**
      * Data rows that participate in active-row and selection state.
      */
@@ -78,5 +78,5 @@ export type UseTableSelectionReturn = {
  * row and selection in sync when rows change, and provides convenience helpers
  * for single-row and all-row toggling.
  */
-declare const useTableSelection: <RowType extends Record<string, unknown>>(props: UseTableSelectionOptions<RowType>) => UseTableSelectionReturn;
+declare const useTableSelection: <RowType extends TableRowData>(props: UseTableSelectionOptions<RowType>) => UseTableSelectionReturn;
 export default useTableSelection;

package/components/table/selection/useTableSelection.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTableSelection.js","sources":["../../../../src/components/table/selection/useTableSelection.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { resolveRowKey } from '../model/resolveRowMeta';\nimport type { TableRowId } from '../Table.types';\n\n/**\n * Configuration for `useTableSelection`.\n */\nexport type UseTableSelectionOptions<RowType extends Record<string, unknown>> = {\n    /**\n     * Data rows that participate in active-row and selection state.\n     */\n    rows: RowType[];\n\n    /**\n     * Optional key accessor used to derive stable row ids.\n     *\n     * If omitted, the row index is used as a fallback.\n     */\n    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => TableRowId);\n\n    /**\n     * Optional initially active row id.\n     */\n    initialActiveRowId?: TableRowId;\n\n    /**\n     * Optional initially selected row ids.\n     */\n    initialSelectedRowIds?: TableRowId[];\n};\n\n/**\n * Selection and active-row state returned by `useTableSelection`.\n */\nexport type UseTableSelectionReturn = {\n    /**\n     * Currently active row id.\n     */\n    activeRowId?: TableRowId;\n\n    /**\n     * Currently selected row ids.\n     */\n    selectedRowIds: TableRowId[];\n\n    /**\n     * Whether at least one row is currently selected.\n     */\n    hasSelection: boolean;\n\n    /**\n     * Whether all current rows are selected.\n     */\n    isAllSelected: boolean;\n\n    /**\n     * Checks whether a given row id is currently selected.\n     */\n    isRowSelected: (rowId: TableRowId) => boolean;\n\n    /**\n     * Sets the current active row id.\n     */\n    setActiveRowId: (rowId: TableRowId | undefined) => void;\n\n    /**\n     * Replaces the current selection with the provided row ids.\n     */\n    setSelectedRowIds: (rowIds: TableRowId[]) => void;\n\n    /**\n     * Toggles selection state for a single row id.\n     */\n    toggleRowSelection: (rowId: TableRowId) => void;\n\n    /**\n     * Selects or deselects all current rows.\n     *\n     * If `shouldSelect` is omitted, the hook toggles based on the current\n     * all-selected state.\n     */\n    toggleAllSelection: (shouldSelect?: boolean) => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clearSelection: () => void;\n};\n\n/**\n * Small helper hook for controlled table demos and simple table integrations\n * that need active-row state plus checkbox selection state.\n *\n * The hook derives stable row ids from `rows` and `rowKey`, keeps the active\n * row and selection in sync when rows change, and provides convenience helpers\n * for single-row and all-row toggling.\n */\nconst useTableSelection = <RowType extends Record<string, unknown>>(\n    props: UseTableSelectionOptions<RowType>\n): UseTableSelectionReturn => {\n    const { rows, rowKey, initialActiveRowId, initialSelectedRowIds = [] } = props;\n\n    const rowIds = useMemo(() => rows.map((row, rowIndex) => resolveRowKey(row, rowIndex, rowKey)), [rows, rowKey]);\n    const rowIdSet = useMemo(() => new Set(rowIds), [rowIds]);\n\n    const [activeRowId, setActiveRowId] = useState<TableRowId | undefined>(initialActiveRowId);\n    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>(initialSelectedRowIds);\n\n    useEffect(() => {\n        setSelectedRowIds(previousSelectedRowIds => previousSelectedRowIds.filter(rowId => rowIdSet.has(rowId)));\n        setActiveRowId(previousActiveRowId =>\n            previousActiveRowId !== undefined && rowIdSet.has(previousActiveRowId) ? previousActiveRowId : undefined\n        );\n    }, [rowIdSet]);\n\n    const toggleRowSelection = (rowId: TableRowId) => {\n        setSelectedRowIds(previousSelectedRowIds =>\n            previousSelectedRowIds.includes(rowId)\n                ? previousSelectedRowIds.filter(selectedRowId => selectedRowId !== rowId)\n                : [...previousSelectedRowIds, rowId]\n        );\n    };\n\n    const toggleAllSelection = (shouldSelect = !rowIds.every(rowId => selectedRowIds.includes(rowId))) => {\n        setSelectedRowIds(shouldSelect ? rowIds : []);\n    };\n\n    const clearSelection = () => {\n        setSelectedRowIds([]);\n    };\n\n    return {\n        activeRowId,\n        selectedRowIds,\n        hasSelection: selectedRowIds.length > 0,\n        isAllSelected: rowIds.length > 0 && rowIds.every(rowId => selectedRowIds.includes(rowId)),\n        isRowSelected: rowId => selectedRowIds.includes(rowId),\n        setActiveRowId,\n        setSelectedRowIds,\n        toggleRowSelection,\n        toggleAllSelection,\n        clearSelection,\n    };\n};\n\nexport default useTableSelection;\n"],"names":["useTableSelection","props","rows","rowKey","initialActiveRowId","initialSelectedRowIds","rowIds","useMemo","row","rowIndex","resolveRowKey","rowIdSet","activeRowId","setActiveRowId","useState","selectedRowIds","setSelectedRowIds","useEffect","previousSelectedRowIds","rowId","previousActiveRowId","toggleRowSelection","selectedRowId","toggleAllSelection","shouldSelect","clearSelection"],"mappings":";;AAkGA,MAAMA,IAAoB,CACtBC,MAC0B;AAC1B,QAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,oBAAAC,GAAoB,uBAAAC,IAAwB,CAAA,MAAOJ,GAEnEK,IAASC,EAAQ,MAAML,EAAK,IAAI,CAACM,GAAKC,MAAaC,EAAcF,GAAKC,GAAUN,CAAM,CAAC,GAAG,CAACD,GAAMC,CAAM,CAAC,GACxGQ,IAAWJ,EAAQ,MAAM,IAAI,IAAID,CAAM,GAAG,CAACA,CAAM,CAAC,GAElD,CAACM,GAAaC,CAAc,IAAIC,EAAiCV,CAAkB,GACnF,CAACW,GAAgBC,CAAiB,IAAIF,EAAuBT,CAAqB;AAExF,EAAAY,EAAU,MAAM;AACZ,IAAAD,EAAkB,CAAAE,MAA0BA,EAAuB,OAAO,CAAAC,MAASR,EAAS,IAAIQ,CAAK,CAAC,CAAC,GACvGN;AAAA,MAAe,OACXO,MAAwB,UAAaT,EAAS,IAAIS,CAAmB,IAAIA,IAAsB;AAAA,IAAA;AAAA,EAEvG,GAAG,CAACT,CAAQ,CAAC;AAEb,QAAMU,IAAqB,CAACF,MAAsB;AAC9C,IAAAH;AAAA,MAAkB,CAAAE,MACdA,EAAuB,SAASC,CAAK,IAC/BD,EAAuB,OAAO,CAAAI,MAAiBA,MAAkBH,CAAK,IACtE,CAAC,GAAGD,GAAwBC,CAAK;AAAA,IAAA;AAAA,EAE/C,GAEMI,IAAqB,CAACC,IAAe,CAAClB,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC,MAAM;AAClG,IAAAH,EAAkBQ,IAAelB,IAAS,EAAE;AAAA,EAChD,GAEMmB,IAAiB,MAAM;AACzB,IAAAT,EAAkB,CAAA,CAAE;AAAA,EACxB;AAEA,SAAO;AAAA,IACH,aAAAJ;AAAA,IACA,gBAAAG;AAAA,IACA,cAAcA,EAAe,SAAS;AAAA,IACtC,eAAeT,EAAO,SAAS,KAAKA,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC;AAAA,IACxF,eAAe,CAAAA,MAASJ,EAAe,SAASI,CAAK;AAAA,IACrD,gBAAAN;AAAA,IACA,mBAAAG;AAAA,IACA,oBAAAK;AAAA,IACA,oBAAAE;AAAA,IACA,gBAAAE;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useTableSelection.js","sources":["../../../../src/components/table/selection/useTableSelection.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from 'react';\n\nimport { resolveRowKey } from '../model/resolveRowMeta';\nimport type { TableRowData, TableRowId } from '../Table.types';\n\n/**\n * Configuration for `useTableSelection`.\n */\nexport type UseTableSelectionOptions<RowType extends TableRowData> = {\n    /**\n     * Data rows that participate in active-row and selection state.\n     */\n    rows: RowType[];\n\n    /**\n     * Optional key accessor used to derive stable row ids.\n     *\n     * If omitted, the row index is used as a fallback.\n     */\n    rowKey?: keyof RowType | ((row: RowType, rowIndex: number) => TableRowId);\n\n    /**\n     * Optional initially active row id.\n     */\n    initialActiveRowId?: TableRowId;\n\n    /**\n     * Optional initially selected row ids.\n     */\n    initialSelectedRowIds?: TableRowId[];\n};\n\n/**\n * Selection and active-row state returned by `useTableSelection`.\n */\nexport type UseTableSelectionReturn = {\n    /**\n     * Currently active row id.\n     */\n    activeRowId?: TableRowId;\n\n    /**\n     * Currently selected row ids.\n     */\n    selectedRowIds: TableRowId[];\n\n    /**\n     * Whether at least one row is currently selected.\n     */\n    hasSelection: boolean;\n\n    /**\n     * Whether all current rows are selected.\n     */\n    isAllSelected: boolean;\n\n    /**\n     * Checks whether a given row id is currently selected.\n     */\n    isRowSelected: (rowId: TableRowId) => boolean;\n\n    /**\n     * Sets the current active row id.\n     */\n    setActiveRowId: (rowId: TableRowId | undefined) => void;\n\n    /**\n     * Replaces the current selection with the provided row ids.\n     */\n    setSelectedRowIds: (rowIds: TableRowId[]) => void;\n\n    /**\n     * Toggles selection state for a single row id.\n     */\n    toggleRowSelection: (rowId: TableRowId) => void;\n\n    /**\n     * Selects or deselects all current rows.\n     *\n     * If `shouldSelect` is omitted, the hook toggles based on the current\n     * all-selected state.\n     */\n    toggleAllSelection: (shouldSelect?: boolean) => void;\n\n    /**\n     * Clears the current selection.\n     */\n    clearSelection: () => void;\n};\n\n/**\n * Small helper hook for controlled table demos and simple table integrations\n * that need active-row state plus checkbox selection state.\n *\n * The hook derives stable row ids from `rows` and `rowKey`, keeps the active\n * row and selection in sync when rows change, and provides convenience helpers\n * for single-row and all-row toggling.\n */\nconst useTableSelection = <RowType extends TableRowData>(\n    props: UseTableSelectionOptions<RowType>\n): UseTableSelectionReturn => {\n    const { rows, rowKey, initialActiveRowId, initialSelectedRowIds = [] } = props;\n\n    const rowIds = useMemo(() => rows.map((row, rowIndex) => resolveRowKey(row, rowIndex, rowKey)), [rows, rowKey]);\n    const rowIdSet = useMemo(() => new Set(rowIds), [rowIds]);\n\n    const [activeRowId, setActiveRowId] = useState<TableRowId | undefined>(initialActiveRowId);\n    const [selectedRowIds, setSelectedRowIds] = useState<TableRowId[]>(initialSelectedRowIds);\n\n    useEffect(() => {\n        setSelectedRowIds(previousSelectedRowIds => previousSelectedRowIds.filter(rowId => rowIdSet.has(rowId)));\n        setActiveRowId(previousActiveRowId =>\n            previousActiveRowId !== undefined && rowIdSet.has(previousActiveRowId) ? previousActiveRowId : undefined\n        );\n    }, [rowIdSet]);\n\n    const toggleRowSelection = (rowId: TableRowId) => {\n        setSelectedRowIds(previousSelectedRowIds =>\n            previousSelectedRowIds.includes(rowId)\n                ? previousSelectedRowIds.filter(selectedRowId => selectedRowId !== rowId)\n                : [...previousSelectedRowIds, rowId]\n        );\n    };\n\n    const toggleAllSelection = (shouldSelect = !rowIds.every(rowId => selectedRowIds.includes(rowId))) => {\n        setSelectedRowIds(shouldSelect ? rowIds : []);\n    };\n\n    const clearSelection = () => {\n        setSelectedRowIds([]);\n    };\n\n    return {\n        activeRowId,\n        selectedRowIds,\n        hasSelection: selectedRowIds.length > 0,\n        isAllSelected: rowIds.length > 0 && rowIds.every(rowId => selectedRowIds.includes(rowId)),\n        isRowSelected: rowId => selectedRowIds.includes(rowId),\n        setActiveRowId,\n        setSelectedRowIds,\n        toggleRowSelection,\n        toggleAllSelection,\n        clearSelection,\n    };\n};\n\nexport default useTableSelection;\n"],"names":["useTableSelection","props","rows","rowKey","initialActiveRowId","initialSelectedRowIds","rowIds","useMemo","row","rowIndex","resolveRowKey","rowIdSet","activeRowId","setActiveRowId","useState","selectedRowIds","setSelectedRowIds","useEffect","previousSelectedRowIds","rowId","previousActiveRowId","toggleRowSelection","selectedRowId","toggleAllSelection","shouldSelect","clearSelection"],"mappings":";;AAkGA,MAAMA,IAAoB,CACtBC,MAC0B;AAC1B,QAAM,EAAE,MAAAC,GAAM,QAAAC,GAAQ,oBAAAC,GAAoB,uBAAAC,IAAwB,CAAA,MAAOJ,GAEnEK,IAASC,EAAQ,MAAML,EAAK,IAAI,CAACM,GAAKC,MAAaC,EAAcF,GAAKC,GAAUN,CAAM,CAAC,GAAG,CAACD,GAAMC,CAAM,CAAC,GACxGQ,IAAWJ,EAAQ,MAAM,IAAI,IAAID,CAAM,GAAG,CAACA,CAAM,CAAC,GAElD,CAACM,GAAaC,CAAc,IAAIC,EAAiCV,CAAkB,GACnF,CAACW,GAAgBC,CAAiB,IAAIF,EAAuBT,CAAqB;AAExF,EAAAY,EAAU,MAAM;AACZ,IAAAD,EAAkB,CAAAE,MAA0BA,EAAuB,OAAO,CAAAC,MAASR,EAAS,IAAIQ,CAAK,CAAC,CAAC,GACvGN;AAAA,MAAe,OACXO,MAAwB,UAAaT,EAAS,IAAIS,CAAmB,IAAIA,IAAsB;AAAA,IAAA;AAAA,EAEvG,GAAG,CAACT,CAAQ,CAAC;AAEb,QAAMU,IAAqB,CAACF,MAAsB;AAC9C,IAAAH;AAAA,MAAkB,CAAAE,MACdA,EAAuB,SAASC,CAAK,IAC/BD,EAAuB,OAAO,CAAAI,MAAiBA,MAAkBH,CAAK,IACtE,CAAC,GAAGD,GAAwBC,CAAK;AAAA,IAAA;AAAA,EAE/C,GAEMI,IAAqB,CAACC,IAAe,CAAClB,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC,MAAM;AAClG,IAAAH,EAAkBQ,IAAelB,IAAS,EAAE;AAAA,EAChD,GAEMmB,IAAiB,MAAM;AACzB,IAAAT,EAAkB,CAAA,CAAE;AAAA,EACxB;AAEA,SAAO;AAAA,IACH,aAAAJ;AAAA,IACA,gBAAAG;AAAA,IACA,cAAcA,EAAe,SAAS;AAAA,IACtC,eAAeT,EAAO,SAAS,KAAKA,EAAO,MAAM,CAAAa,MAASJ,EAAe,SAASI,CAAK,CAAC;AAAA,IACxF,eAAe,CAAAA,MAASJ,EAAe,SAASI,CAAK;AAAA,IACrD,gBAAAN;AAAA,IACA,mBAAAG;AAAA,IACA,oBAAAK;AAAA,IACA,oBAAAE;AAAA,IACA,gBAAAE;AAAA,EAAA;AAER;"}

package/components/table/shared/getCellContentOverflowClassName.d.ts

@@ -0,0 +1,3 @@
+import { TableCellOverflow } from '../Table.types';
+declare const getCellContentOverflowClassName: (overflow?: TableCellOverflow) => "ellipsis-1" | "overflow-hidden" | "ellipsis-2" | "ellipsis-3" | "overflow-visible";
+export default getCellContentOverflowClassName;

package/components/table/shared/getCellContentOverflowClassName.js

@@ -0,0 +1,18 @@
+const s = (e = "hidden") => {
+  switch (e) {
+    case "visible":
+      return "overflow-visible";
+    case "ellipsis":
+      return "ellipsis-1";
+    case "ellipsis-2":
+      return "ellipsis-2";
+    case "ellipsis-3":
+      return "ellipsis-3";
+    default:
+      return "overflow-hidden";
+  }
+};
+export {
+  s as default
+};
+//# sourceMappingURL=getCellContentOverflowClassName.js.map

package/components/table/shared/getCellContentOverflowClassName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getCellContentOverflowClassName.js","sources":["../../../../src/components/table/shared/getCellContentOverflowClassName.ts"],"sourcesContent":["import type { TableCellOverflow } from '../Table.types';\n\nconst getCellContentOverflowClassName = (overflow: TableCellOverflow = 'hidden') => {\n    switch (overflow) {\n        case 'visible':\n            return 'overflow-visible';\n        case 'ellipsis':\n            return 'ellipsis-1';\n        case 'ellipsis-2':\n            return 'ellipsis-2';\n        case 'ellipsis-3':\n            return 'ellipsis-3';\n        default:\n            return 'overflow-hidden';\n    }\n};\n\nexport default getCellContentOverflowClassName;\n"],"names":["getCellContentOverflowClassName","overflow"],"mappings":"AAEA,MAAMA,IAAkC,CAACC,IAA8B,aAAa;AAChF,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB;"}

package/components/table/shared/getInteractiveRowProps.d.ts

@@ -1,11 +1,12 @@
 import { KeyboardEventHandler } from 'react';
-type GetInteractiveRowPropsArgs<RowType extends Record<string, unknown>> = {
+import { TableRowData } from '../Table.types';
+type GetInteractiveRowPropsArgs<RowType extends TableRowData> = {
     isClickable: boolean;
     onRowClick?: (row: RowType, rowIndex: number) => void;
     row: RowType;
     rowIndex: number;
 };
-export declare const getInteractiveRowProps: <RowType extends Record<string, unknown>>(args: GetInteractiveRowPropsArgs<RowType>) => {
+export declare const getInteractiveRowProps: <RowType extends TableRowData>(args: GetInteractiveRowPropsArgs<RowType>) => {
     isClickableClassName: string | undefined;
     onClick: (() => void | undefined) | undefined;
     onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;

package/components/table/shared/getInteractiveRowProps.js.map

@@ -1 +1 @@
-{"version":3,"file":"getInteractiveRowProps.js","sources":["../../../../src/components/table/shared/getInteractiveRowProps.ts"],"sourcesContent":["import type { KeyboardEventHandler } from 'react';\n\ntype GetInteractiveRowPropsArgs<RowType extends Record<string, unknown>> = {\n    isClickable: boolean;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    row: RowType;\n    rowIndex: number;\n};\n\nexport const getInteractiveRowProps = <RowType extends Record<string, unknown>>(\n    args: GetInteractiveRowPropsArgs<RowType>\n) => {\n    const { isClickable, onRowClick, row, rowIndex } = args;\n\n    const onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined = isClickable\n        ? event => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  onRowClick?.(row, rowIndex);\n              }\n          }\n        : undefined;\n\n    return {\n        isClickableClassName: isClickable ? 'table-row-clickable' : undefined,\n        onClick: isClickable ? () => onRowClick?.(row, rowIndex) : undefined,\n        onKeyDown,\n        tabIndex: isClickable ? 0 : undefined,\n    };\n};\n"],"names":["getInteractiveRowProps","args","isClickable","onRowClick","row","rowIndex","event"],"mappings":"AASO,MAAMA,IAAyB,CAClCC,MACC;AACD,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,KAAAC,GAAK,UAAAC,MAAaJ;AAWnD,SAAO;AAAA,IACH,sBAAsBC,IAAc,wBAAwB;AAAA,IAC5D,SAASA,IAAc,MAAMC,IAAaC,GAAKC,CAAQ,IAAI;AAAA,IAC3D,WAZgEH,IAC9D,CAAAI,MAAS;AACL,OAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNH,IAAaC,GAAKC,CAAQ;AAAA,IAElC,IACA;AAAA,IAMF,UAAUH,IAAc,IAAI;AAAA,EAAA;AAEpC;"}
+{"version":3,"file":"getInteractiveRowProps.js","sources":["../../../../src/components/table/shared/getInteractiveRowProps.ts"],"sourcesContent":["import type { KeyboardEventHandler } from 'react';\n\nimport type { TableRowData } from '../Table.types';\n\ntype GetInteractiveRowPropsArgs<RowType extends TableRowData> = {\n    isClickable: boolean;\n    onRowClick?: (row: RowType, rowIndex: number) => void;\n    row: RowType;\n    rowIndex: number;\n};\n\nexport const getInteractiveRowProps = <RowType extends TableRowData>(args: GetInteractiveRowPropsArgs<RowType>) => {\n    const { isClickable, onRowClick, row, rowIndex } = args;\n\n    const onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined = isClickable\n        ? event => {\n              if (event.key === 'Enter' || event.key === ' ') {\n                  event.preventDefault();\n                  onRowClick?.(row, rowIndex);\n              }\n          }\n        : undefined;\n\n    return {\n        isClickableClassName: isClickable ? 'table-row-clickable' : undefined,\n        onClick: isClickable ? () => onRowClick?.(row, rowIndex) : undefined,\n        onKeyDown,\n        tabIndex: isClickable ? 0 : undefined,\n    };\n};\n"],"names":["getInteractiveRowProps","args","isClickable","onRowClick","row","rowIndex","event"],"mappings":"AAWO,MAAMA,IAAyB,CAA+BC,MAA8C;AAC/G,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,KAAAC,GAAK,UAAAC,MAAaJ;AAWnD,SAAO;AAAA,IACH,sBAAsBC,IAAc,wBAAwB;AAAA,IAC5D,SAASA,IAAc,MAAMC,IAAaC,GAAKC,CAAQ,IAAI;AAAA,IAC3D,WAZgEH,IAC9D,CAAAI,MAAS;AACL,OAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNH,IAAaC,GAAKC,CAAQ;AAAA,IAElC,IACA;AAAA,IAMF,UAAUH,IAAc,IAAI;AAAA,EAAA;AAEpC;"}

package/hooks/useDraggableElement.d.ts

@@ -1,11 +1,11 @@
-import { MutableRefObject, PointerEvent as ReactPointerEvent } from 'react';
+import { MutableRefObject, PointerEvent as ReactPointerEvent, ReactNode, RefObject } from 'react';
 export type DraggablePosition = {
     /**
-     * Top offset in pixels relative to the viewport.
+     * Top offset in pixels relative to the active positioning context.
      */
     top: number;
     /**
-     * Left offset in pixels relative to the viewport.
+     * Left offset in pixels relative to the active positioning context.
      */
     left: number;
     /**
@@ -29,7 +29,29 @@ export type UseDraggableResult<T extends HTMLElement> = {
     /**
      * Pointer down handler for the dedicated drag handle element.
      */
-    onDragHandlePointerDown: (event: ReactPointerEvent<HTMLElement>) => void;
+    onDragHandleDown: (event: ReactPointerEvent<HTMLElement>) => void;
+    /**
+     * Renders the provided element through the shared portal root in viewport mode.
+     * An optional custom target can be passed for specialized overlay hosts.
+     * In container mode, the element is returned unchanged and this helper is usually not needed.
+     */
+    renderElement: (element: ReactNode, target?: HTMLElement | null) => ReactNode;
+};
+export type UseDraggableElementOptions = {
+    /**
+     * Defines whether drag coordinates are resolved against the viewport or a collision container.
+     * Viewport mode also enables portal rendering via `renderElement`.
+     */
+    positioning?: 'viewport' | 'container';
+    /**
+     * Optional initial position for the draggable element.
+     * Use `center` to center the element inside the active positioning context on mount.
+     */
+    initialPosition?: 'center' | Pick<DraggablePosition, 'top' | 'left'>;
+    /**
+     * Optional container whose visible client rect is used as the drag boundary in container mode.
+     */
+    collisionContainerRef?: RefObject<HTMLElement | null>;
 };
-declare const useDraggableElement: <T extends HTMLElement = HTMLDivElement>() => UseDraggableResult<T>;
+declare const useDraggableElement: <T extends HTMLElement = HTMLDivElement>(options?: UseDraggableElementOptions) => UseDraggableResult<T>;
 export default useDraggableElement;

package/hooks/useDraggableElement.js

@@ -1,49 +1,126 @@
-import { useState as f, useRef as m, useCallback as R, useEffect as X } from "react";
-const x = 4, d = "is-dragging", p = (o, s, i) => Math.min(i, Math.max(s, o)), b = () => {
-  const [o, s] = f(!1), [i, h] = f({ top: 0, left: 0, hasDragged: !1 }), c = m(null), l = m(null), w = R((t) => {
+import { useState as M, useRef as C, useEffect as Y, useCallback as H, useLayoutEffect as N } from "react";
+import { createPortal as O } from "react-dom";
+import { getOrCreatePortalRoot as W } from "../utils/portalRoot.js";
+const y = 4, v = "is-dragging", s = (a, e, o) => Math.min(o, Math.max(e, a)), R = (a) => a?.current?.getBoundingClientRect() ?? null, I = (a, e, o) => a === "container" && o ? {
+  top: s(
+    (o.height - e.height) / 2,
+    0,
+    Math.max(0, o.height - e.height)
+  ),
+  left: s(
+    (o.width - e.width) / 2,
+    0,
+    Math.max(0, o.width - e.width)
+  )
+} : {
+  top: s(
+    (window.innerHeight - e.height) / 2,
+    0,
+    Math.max(0, window.innerHeight - e.height)
+  ),
+  left: s(
+    (window.innerWidth - e.width) / 2,
+    0,
+    Math.max(0, window.innerWidth - e.width)
+  )
+}, j = (a = {}) => {
+  const { positioning: e = "viewport", initialPosition: o, collisionContainerRef: d } = a, [u, D] = M(!1), [g, p] = M({ top: 0, left: 0, hasDragged: !1 }), [x, L] = M(null), h = C(null), w = C(null), c = e === "viewport";
+  Y(() => {
+    if (!c) {
+      L(null);
+      return;
+    }
+    L(W());
+  }, [c]);
+  const S = H(
+    (t, r) => {
+      if (!c)
+        return t;
+      const n = r ?? x;
+      return n ? O(t, n) : null;
+    },
+    [c, x]
+  );
+  N(() => {
+    if (g.hasDragged || !o)
+      return;
+    const t = h.current;
+    if (!t)
+      return;
+    const r = o === "center" ? I(
+      e,
+      t.getBoundingClientRect(),
+      R(d)
+    ) : o;
+    p(
+      (n) => n.top === r.top && n.left === r.left ? n : { top: r.top, left: r.left, hasDragged: !1 }
+    );
+  }, [d, o, g.hasDragged, e]);
+  const T = H((t) => {
     if (t.button !== 0)
       return;
     t.preventDefault(), t.stopPropagation();
-    const r = c.current;
+    const r = h.current;
     if (!r)
       return;
     const n = r.getBoundingClientRect();
-    l.current = {
+    w.current = {
       offsetX: t.clientX - n.left,
       offsetY: t.clientY - n.top,
       startX: t.clientX,
       startY: t.clientY,
       hasMoved: !1
-    }, s(!0);
+    }, D(!0);
   }, []);
-  return X(() => {
-    if (!o)
+  return Y(() => {
+    if (!u)
       return;
     const t = document.documentElement;
-    t.classList.add(d);
-    const r = (a) => {
-      const e = l.current, g = c.current;
-      if (!e || !g)
+    t.classList.add(v);
+    const r = (B) => {
+      const i = w.current, P = h.current;
+      if (!i || !P)
+        return;
+      const { clientX: m, clientY: E } = B, _ = Math.hypot(m - i.startX, E - i.startY);
+      if (!i.hasMoved && _ < y)
         return;
-      const E = Math.hypot(a.clientX - e.startX, a.clientY - e.startY);
-      if (!e.hasMoved && E < x)
+      i.hasMoved || (i.hasMoved = !0);
+      const f = P.getBoundingClientRect(), l = R(d);
+      if (e === "container" && l) {
+        const A = s(
+          m - l.left - i.offsetX,
+          0,
+          Math.max(0, l.width - f.width)
+        ), G = s(
+          E - l.top - i.offsetY,
+          0,
+          Math.max(0, l.height - f.height)
+        );
+        p({
+          top: G,
+          left: A,
+          hasDragged: !0
+        });
         return;
-      e.hasMoved || (e.hasMoved = !0);
-      const u = g.getBoundingClientRect(), L = Math.max(0, window.innerWidth - u.width), M = Math.max(0, window.innerHeight - u.height), v = p(a.clientX - e.offsetX, 0, L), D = p(a.clientY - e.offsetY, 0, M);
-      h({
-        top: D,
-        left: v,
+      }
+      const X = {
+        left: s(m - i.offsetX, 0, Math.max(0, window.innerWidth - f.width)),
+        top: s(E - i.offsetY, 0, Math.max(0, window.innerHeight - f.height))
+      };
+      p({
+        top: X.top,
+        left: X.left,
         hasDragged: !0
       });
     }, n = () => {
-      t.classList.remove(d), s(!1), l.current = null;
+      t.classList.remove(v), D(!1), w.current = null;
     };
     return window.addEventListener("pointermove", r), window.addEventListener("pointerup", n), window.addEventListener("pointercancel", n), () => {
-      window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", n), window.removeEventListener("pointercancel", n), t.classList.remove(d);
+      window.removeEventListener("pointermove", r), window.removeEventListener("pointerup", n), window.removeEventListener("pointercancel", n), t.classList.remove(v);
     };
-  }, [o]), { draggableRef: c, isDragging: o, position: i, onDragHandlePointerDown: w };
+  }, [d, u, e]), { draggableRef: h, isDragging: u, position: g, onDragHandleDown: T, renderElement: S };
 };
 export {
-  b as default
+  j as default
 };
 //# sourceMappingURL=useDraggableElement.js.map

package/hooks/useDraggableElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggableElement.js","sources":["../../src/hooks/useDraggableElement.ts"],"sourcesContent":["import {\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n    type MutableRefObject,\n    type PointerEvent as ReactPointerEvent,\n} from 'react';\n\nexport type DraggablePosition = {\n    /**\n     * Top offset in pixels relative to the viewport.\n     */\n    top: number;\n\n    /**\n     * Left offset in pixels relative to the viewport.\n     */\n    left: number;\n\n    /**\n     * Indicates whether the element has been moved by dragging at least once.\n     */\n    hasDragged: boolean;\n};\n\nexport type UseDraggableResult<T extends HTMLElement> = {\n    /**\n     * Ref that must be attached to the draggable element container.\n     */\n    draggableRef: MutableRefObject<T | null>;\n\n    /**\n     * Indicates whether a drag interaction is currently active.\n     */\n    isDragging: boolean;\n\n    /**\n     * Current draggable coordinates and drag-state metadata.\n     */\n    position: DraggablePosition;\n\n    /**\n     * Pointer down handler for the dedicated drag handle element.\n     */\n    onDragHandlePointerDown: (event: ReactPointerEvent<HTMLElement>) => void;\n};\n\ntype DraggableState = {\n    offsetX: number;\n    offsetY: number;\n    startX: number;\n    startY: number;\n    hasMoved: boolean;\n};\n\nconst MOVEMENT_THRESHOLD_PX = 4;\nconst DRAGGING_CLASS_NAME = 'is-dragging';\n\nconst clampToRange = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst useDraggableElement = <T extends HTMLElement = HTMLDivElement>(): UseDraggableResult<T> => {\n    const [isDragging, setIsDragging] = useState(false);\n    const [position, setPosition] = useState<DraggablePosition>({ top: 0, left: 0, hasDragged: false });\n\n    const draggableRef = useRef<T | null>(null);\n    const dragStateRef = useRef<DraggableState | null>(null);\n\n    const onDragHandlePointerDown = useCallback((event: ReactPointerEvent<HTMLElement>) => {\n        if (event.button !== 0) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const draggableElement = draggableRef.current;\n        if (!draggableElement) {\n            return;\n        }\n\n        const rect = draggableElement.getBoundingClientRect();\n        dragStateRef.current = {\n            offsetX: event.clientX - rect.left,\n            offsetY: event.clientY - rect.top,\n            startX: event.clientX,\n            startY: event.clientY,\n            hasMoved: false,\n        };\n        setIsDragging(true);\n    }, []);\n\n    useEffect(() => {\n        if (!isDragging) {\n            return;\n        }\n\n        const rootElement = document.documentElement;\n        rootElement.classList.add(DRAGGING_CLASS_NAME);\n\n        const handlePointerMove = (event: PointerEvent) => {\n            const dragState = dragStateRef.current;\n            const draggableElement = draggableRef.current;\n            if (!dragState || !draggableElement) {\n                return;\n            }\n\n            const movedDistance = Math.hypot(event.clientX - dragState.startX, event.clientY - dragState.startY);\n            if (!dragState.hasMoved && movedDistance < MOVEMENT_THRESHOLD_PX) {\n                return;\n            }\n\n            if (!dragState.hasMoved) {\n                dragState.hasMoved = true;\n            }\n\n            const rect = draggableElement.getBoundingClientRect();\n            const maxLeft = Math.max(0, window.innerWidth - rect.width);\n            const maxTop = Math.max(0, window.innerHeight - rect.height);\n            const nextLeft = clampToRange(event.clientX - dragState.offsetX, 0, maxLeft);\n            const nextTop = clampToRange(event.clientY - dragState.offsetY, 0, maxTop);\n\n            setPosition({\n                top: nextTop,\n                left: nextLeft,\n                hasDragged: true,\n            });\n        };\n\n        const handlePointerRelease = () => {\n            rootElement.classList.remove(DRAGGING_CLASS_NAME);\n            setIsDragging(false);\n            dragStateRef.current = null;\n        };\n\n        window.addEventListener('pointermove', handlePointerMove);\n        window.addEventListener('pointerup', handlePointerRelease);\n        window.addEventListener('pointercancel', handlePointerRelease);\n\n        return () => {\n            window.removeEventListener('pointermove', handlePointerMove);\n            window.removeEventListener('pointerup', handlePointerRelease);\n            window.removeEventListener('pointercancel', handlePointerRelease);\n            rootElement.classList.remove(DRAGGING_CLASS_NAME);\n        };\n    }, [isDragging]);\n\n    return { draggableRef, isDragging, position, onDragHandlePointerDown };\n};\n\nexport default useDraggableElement;\n"],"names":["MOVEMENT_THRESHOLD_PX","DRAGGING_CLASS_NAME","clampToRange","value","min","max","useDraggableElement","isDragging","setIsDragging","useState","position","setPosition","draggableRef","useRef","dragStateRef","onDragHandlePointerDown","useCallback","event","draggableElement","rect","useEffect","rootElement","handlePointerMove","dragState","movedDistance","maxLeft","maxTop","nextLeft","nextTop","handlePointerRelease"],"mappings":";AAwDA,MAAMA,IAAwB,GACxBC,IAAsB,eAEtBC,IAAe,CAACC,GAAeC,GAAaC,MAAgB,KAAK,IAAIA,GAAK,KAAK,IAAID,GAAKD,CAAK,CAAC,GAE9FG,IAAsB,MAAqE;AAC7F,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAUC,CAAW,IAAIF,EAA4B,EAAE,KAAK,GAAG,MAAM,GAAG,YAAY,GAAA,CAAO,GAE5FG,IAAeC,EAAiB,IAAI,GACpCC,IAAeD,EAA8B,IAAI,GAEjDE,IAA0BC,EAAY,CAACC,MAA0C;AACnF,QAAIA,EAAM,WAAW;AACjB;AAGJ,IAAAA,EAAM,eAAA,GACNA,EAAM,gBAAA;AAEN,UAAMC,IAAmBN,EAAa;AACtC,QAAI,CAACM;AACD;AAGJ,UAAMC,IAAOD,EAAiB,sBAAA;AAC9B,IAAAJ,EAAa,UAAU;AAAA,MACnB,SAASG,EAAM,UAAUE,EAAK;AAAA,MAC9B,SAASF,EAAM,UAAUE,EAAK;AAAA,MAC9B,QAAQF,EAAM;AAAA,MACd,QAAQA,EAAM;AAAA,MACd,UAAU;AAAA,IAAA,GAEdT,EAAc,EAAI;AAAA,EACtB,GAAG,CAAA,CAAE;AAEL,SAAAY,EAAU,MAAM;AACZ,QAAI,CAACb;AACD;AAGJ,UAAMc,IAAc,SAAS;AAC7B,IAAAA,EAAY,UAAU,IAAIpB,CAAmB;AAE7C,UAAMqB,IAAoB,CAACL,MAAwB;AAC/C,YAAMM,IAAYT,EAAa,SACzBI,IAAmBN,EAAa;AACtC,UAAI,CAACW,KAAa,CAACL;AACf;AAGJ,YAAMM,IAAgB,KAAK,MAAMP,EAAM,UAAUM,EAAU,QAAQN,EAAM,UAAUM,EAAU,MAAM;AACnG,UAAI,CAACA,EAAU,YAAYC,IAAgBxB;AACvC;AAGJ,MAAKuB,EAAU,aACXA,EAAU,WAAW;AAGzB,YAAMJ,IAAOD,EAAiB,sBAAA,GACxBO,IAAU,KAAK,IAAI,GAAG,OAAO,aAAaN,EAAK,KAAK,GACpDO,IAAS,KAAK,IAAI,GAAG,OAAO,cAAcP,EAAK,MAAM,GACrDQ,IAAWzB,EAAae,EAAM,UAAUM,EAAU,SAAS,GAAGE,CAAO,GACrEG,IAAU1B,EAAae,EAAM,UAAUM,EAAU,SAAS,GAAGG,CAAM;AAEzE,MAAAf,EAAY;AAAA,QACR,KAAKiB;AAAA,QACL,MAAMD;AAAA,QACN,YAAY;AAAA,MAAA,CACf;AAAA,IACL,GAEME,IAAuB,MAAM;AAC/B,MAAAR,EAAY,UAAU,OAAOpB,CAAmB,GAChDO,EAAc,EAAK,GACnBM,EAAa,UAAU;AAAA,IAC3B;AAEA,kBAAO,iBAAiB,eAAeQ,CAAiB,GACxD,OAAO,iBAAiB,aAAaO,CAAoB,GACzD,OAAO,iBAAiB,iBAAiBA,CAAoB,GAEtD,MAAM;AACT,aAAO,oBAAoB,eAAeP,CAAiB,GAC3D,OAAO,oBAAoB,aAAaO,CAAoB,GAC5D,OAAO,oBAAoB,iBAAiBA,CAAoB,GAChER,EAAY,UAAU,OAAOpB,CAAmB;AAAA,IACpD;AAAA,EACJ,GAAG,CAACM,CAAU,CAAC,GAER,EAAE,cAAAK,GAAc,YAAAL,GAAY,UAAAG,GAAU,yBAAAK,EAAA;AACjD;"}
+{"version":3,"file":"useDraggableElement.js","sources":["../../src/hooks/useDraggableElement.ts"],"sourcesContent":["import {\n    useCallback,\n    useEffect,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type MutableRefObject,\n    type PointerEvent as ReactPointerEvent,\n    type ReactNode,\n    type RefObject,\n} from 'react';\nimport { createPortal } from 'react-dom';\n\nimport { getOrCreatePortalRoot } from '../utils/portalRoot';\n\nexport type DraggablePosition = {\n    /**\n     * Top offset in pixels relative to the active positioning context.\n     */\n    top: number;\n\n    /**\n     * Left offset in pixels relative to the active positioning context.\n     */\n    left: number;\n\n    /**\n     * Indicates whether the element has been moved by dragging at least once.\n     */\n    hasDragged: boolean;\n};\n\nexport type UseDraggableResult<T extends HTMLElement> = {\n    /**\n     * Ref that must be attached to the draggable element container.\n     */\n    draggableRef: MutableRefObject<T | null>;\n\n    /**\n     * Indicates whether a drag interaction is currently active.\n     */\n    isDragging: boolean;\n\n    /**\n     * Current draggable coordinates and drag-state metadata.\n     */\n    position: DraggablePosition;\n\n    /**\n     * Pointer down handler for the dedicated drag handle element.\n     */\n    onDragHandleDown: (event: ReactPointerEvent<HTMLElement>) => void;\n\n    /**\n     * Renders the provided element through the shared portal root in viewport mode.\n     * An optional custom target can be passed for specialized overlay hosts.\n     * In container mode, the element is returned unchanged and this helper is usually not needed.\n     */\n    renderElement: (element: ReactNode, target?: HTMLElement | null) => ReactNode;\n};\n\nexport type UseDraggableElementOptions = {\n    /**\n     * Defines whether drag coordinates are resolved against the viewport or a collision container.\n     * Viewport mode also enables portal rendering via `renderElement`.\n     */\n    positioning?: 'viewport' | 'container';\n\n    /**\n     * Optional initial position for the draggable element.\n     * Use `center` to center the element inside the active positioning context on mount.\n     */\n    initialPosition?: 'center' | Pick<DraggablePosition, 'top' | 'left'>;\n\n    /**\n     * Optional container whose visible client rect is used as the drag boundary in container mode.\n     */\n    collisionContainerRef?: RefObject<HTMLElement | null>;\n};\n\ntype DraggableState = {\n    offsetX: number;\n    offsetY: number;\n    startX: number;\n    startY: number;\n    hasMoved: boolean;\n};\n\nconst MOVEMENT_THRESHOLD_PX = 4;\nconst DRAGGING_CLASS_NAME = 'is-dragging';\n\nconst clampToRange = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));\n\nconst resolveCollisionContainerRect = (collisionContainerRef?: RefObject<HTMLElement | null>) =>\n    collisionContainerRef?.current?.getBoundingClientRect() ?? null;\n\nconst resolveCenteredPosition = (\n    positioning: UseDraggableElementOptions['positioning'],\n    draggableRect: DOMRect,\n    collisionContainerRect: DOMRect | null\n) => {\n    if (positioning === 'container' && collisionContainerRect) {\n        return {\n            top: clampToRange(\n                (collisionContainerRect.height - draggableRect.height) / 2,\n                0,\n                Math.max(0, collisionContainerRect.height - draggableRect.height)\n            ),\n            left: clampToRange(\n                (collisionContainerRect.width - draggableRect.width) / 2,\n                0,\n                Math.max(0, collisionContainerRect.width - draggableRect.width)\n            ),\n        };\n    }\n\n    return {\n        top: clampToRange(\n            (window.innerHeight - draggableRect.height) / 2,\n            0,\n            Math.max(0, window.innerHeight - draggableRect.height)\n        ),\n        left: clampToRange(\n            (window.innerWidth - draggableRect.width) / 2,\n            0,\n            Math.max(0, window.innerWidth - draggableRect.width)\n        ),\n    };\n};\n\nconst useDraggableElement = <T extends HTMLElement = HTMLDivElement>(\n    options: UseDraggableElementOptions = {}\n): UseDraggableResult<T> => {\n    const { positioning = 'viewport', initialPosition, collisionContainerRef } = options;\n\n    const [isDragging, setIsDragging] = useState(false);\n    const [position, setPosition] = useState<DraggablePosition>({ top: 0, left: 0, hasDragged: false });\n    const [portalRoot, setPortalRoot] = useState<HTMLElement | null>(null);\n\n    const draggableRef = useRef<T | null>(null);\n    const dragStateRef = useRef<DraggableState | null>(null);\n    const portalEnabled = positioning === 'viewport';\n\n    useEffect(() => {\n        if (!portalEnabled) {\n            setPortalRoot(null);\n            return;\n        }\n\n        setPortalRoot(getOrCreatePortalRoot());\n    }, [portalEnabled]);\n\n    const renderElement = useCallback(\n        (element: ReactNode, target?: HTMLElement | null) => {\n            if (!portalEnabled) {\n                return element;\n            }\n\n            const renderTarget = target ?? portalRoot;\n            return renderTarget ? createPortal(element, renderTarget) : null;\n        },\n        [portalEnabled, portalRoot]\n    );\n\n    useLayoutEffect(() => {\n        if (position.hasDragged || !initialPosition) {\n            return;\n        }\n\n        const draggableElement = draggableRef.current;\n        if (!draggableElement) {\n            return;\n        }\n\n        const nextPosition =\n            initialPosition === 'center'\n                ? resolveCenteredPosition(\n                      positioning,\n                      draggableElement.getBoundingClientRect(),\n                      resolveCollisionContainerRect(collisionContainerRef)\n                  )\n                : initialPosition;\n\n        setPosition(currentPosition =>\n            currentPosition.top === nextPosition.top && currentPosition.left === nextPosition.left\n                ? currentPosition\n                : { top: nextPosition.top, left: nextPosition.left, hasDragged: false }\n        );\n    }, [collisionContainerRef, initialPosition, position.hasDragged, positioning]);\n\n    const onDragHandleDown = useCallback((event: ReactPointerEvent<HTMLElement>) => {\n        if (event.button !== 0) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n\n        const draggableElement = draggableRef.current;\n        if (!draggableElement) {\n            return;\n        }\n\n        const rect = draggableElement.getBoundingClientRect();\n        dragStateRef.current = {\n            offsetX: event.clientX - rect.left,\n            offsetY: event.clientY - rect.top,\n            startX: event.clientX,\n            startY: event.clientY,\n            hasMoved: false,\n        };\n        setIsDragging(true);\n    }, []);\n\n    useEffect(() => {\n        if (!isDragging) {\n            return;\n        }\n\n        const rootElement = document.documentElement;\n        rootElement.classList.add(DRAGGING_CLASS_NAME);\n\n        const handlePointerMove = (event: PointerEvent) => {\n            const dragState = dragStateRef.current;\n            const draggableElement = draggableRef.current;\n            if (!dragState || !draggableElement) {\n                return;\n            }\n\n            const { clientX, clientY } = event;\n\n            const movedDistance = Math.hypot(clientX - dragState.startX, clientY - dragState.startY);\n            if (!dragState.hasMoved && movedDistance < MOVEMENT_THRESHOLD_PX) {\n                return;\n            }\n\n            if (!dragState.hasMoved) {\n                dragState.hasMoved = true;\n            }\n\n            const rect = draggableElement.getBoundingClientRect();\n            const collisionContainerRect = resolveCollisionContainerRect(collisionContainerRef);\n\n            if (positioning === 'container' && collisionContainerRect) {\n                const nextLeftPos = clampToRange(\n                    clientX - collisionContainerRect.left - dragState.offsetX,\n                    0,\n                    Math.max(0, collisionContainerRect.width - rect.width)\n                );\n\n                const nextTopPos = clampToRange(\n                    clientY - collisionContainerRect.top - dragState.offsetY,\n                    0,\n                    Math.max(0, collisionContainerRect.height - rect.height)\n                );\n\n                setPosition({\n                    top: nextTopPos,\n                    left: nextLeftPos,\n                    hasDragged: true,\n                });\n\n                return;\n            }\n\n            const nextPosition = {\n                left: clampToRange(clientX - dragState.offsetX, 0, Math.max(0, window.innerWidth - rect.width)),\n                top: clampToRange(clientY - dragState.offsetY, 0, Math.max(0, window.innerHeight - rect.height)),\n            };\n\n            setPosition({\n                top: nextPosition.top,\n                left: nextPosition.left,\n                hasDragged: true,\n            });\n        };\n\n        const handlePointerRelease = () => {\n            rootElement.classList.remove(DRAGGING_CLASS_NAME);\n            setIsDragging(false);\n            dragStateRef.current = null;\n        };\n\n        window.addEventListener('pointermove', handlePointerMove);\n        window.addEventListener('pointerup', handlePointerRelease);\n        window.addEventListener('pointercancel', handlePointerRelease);\n\n        return () => {\n            window.removeEventListener('pointermove', handlePointerMove);\n            window.removeEventListener('pointerup', handlePointerRelease);\n            window.removeEventListener('pointercancel', handlePointerRelease);\n            rootElement.classList.remove(DRAGGING_CLASS_NAME);\n        };\n    }, [collisionContainerRef, isDragging, positioning]);\n\n    return { draggableRef, isDragging, position, onDragHandleDown, renderElement };\n};\n\nexport default useDraggableElement;\n"],"names":["MOVEMENT_THRESHOLD_PX","DRAGGING_CLASS_NAME","clampToRange","value","min","max","resolveCollisionContainerRect","collisionContainerRef","resolveCenteredPosition","positioning","draggableRect","collisionContainerRect","useDraggableElement","options","initialPosition","isDragging","setIsDragging","useState","position","setPosition","portalRoot","setPortalRoot","draggableRef","useRef","dragStateRef","portalEnabled","useEffect","getOrCreatePortalRoot","renderElement","useCallback","element","target","renderTarget","createPortal","useLayoutEffect","draggableElement","nextPosition","currentPosition","onDragHandleDown","event","rect","rootElement","handlePointerMove","dragState","clientX","clientY","movedDistance","nextLeftPos","nextTopPos","handlePointerRelease"],"mappings":"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"}

package/hooks/usePopperDropdown.d.ts

@@ -4,6 +4,7 @@ type UsePopperDropdownResult = {
     open: () => void;
     close: () => void;
     toggle: () => void;
+    update: () => void;
     referenceRef: any;
     popperElementRef: (el: HTMLElement | null) => void;
     popperStyles: CSSProperties;

package/hooks/usePopperDropdown.js

@@ -1,21 +1,24 @@
-import { useRef as u, useState as o } from "react";
-import { usePopper as f } from "react-popper";
-const E = ({ placement: s = "bottom-start" } = {}) => {
-  const t = u(null), [r, n] = o(null), [l, e] = o(!1), p = f(t.current, r, {
+import { useRef as d, useState as o, useCallback as i } from "react";
+import { usePopper as b } from "react-popper";
+const R = ({ placement: s = "bottom-start" } = {}) => {
+  const p = d(null), [r, n] = o(null), [l, t] = o(!1), e = b(p.current, r, {
     placement: s
-  });
+  }), u = () => t(!0), c = () => t(!1), a = () => t((m) => !m), f = i(() => {
+    e.update?.();
+  }, [e.update]);
   return {
     isOpen: l,
-    open: () => e(!0),
-    close: () => e(!1),
-    toggle: () => e((c) => !c),
-    referenceRef: t,
+    open: u,
+    close: c,
+    toggle: a,
+    update: f,
+    referenceRef: p,
     popperElementRef: n,
-    popperStyles: p.styles.popper,
-    popperAttributes: p.attributes.popper
+    popperStyles: e.styles.popper,
+    popperAttributes: e.attributes.popper
   };
 };
 export {
-  E as default
+  R as default
 };
 //# sourceMappingURL=usePopperDropdown.js.map

package/hooks/usePopperDropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePopperDropdown.js","sources":["../../src/hooks/usePopperDropdown.ts"],"sourcesContent":["import { type CSSProperties, useRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\ntype UsePopperDropdownResult = {\n    isOpen: boolean;\n    open: () => void;\n    close: () => void;\n    toggle: () => void;\n    referenceRef: any;\n    popperElementRef: (el: HTMLElement | null) => void;\n    popperStyles: CSSProperties;\n    popperAttributes: Record<string, any>;\n};\n\ntype UsePopperDropdownParams = {\n    placement?: 'bottom-start' | 'bottom-end';\n};\n\nconst usePopperDropdown = ({ placement = 'bottom-start' }: UsePopperDropdownParams = {}) => {\n    const referenceRef = useRef<HTMLElement>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n    const [isOpen, setIsOpen] = useState(false);\n\n    const popper = usePopper(referenceRef.current, popperElement, {\n        placement,\n    });\n\n    const open = () => setIsOpen(true);\n    const close = () => setIsOpen(false);\n    const toggle = () => setIsOpen(prev => !prev);\n\n    return {\n        isOpen,\n        open,\n        close,\n        toggle,\n        referenceRef,\n        popperElementRef: setPopperElement,\n        popperStyles: popper.styles.popper,\n        popperAttributes: popper.attributes.popper,\n    } as UsePopperDropdownResult;\n};\n\nexport default usePopperDropdown;\n"],"names":["usePopperDropdown","placement","referenceRef","useRef","popperElement","setPopperElement","useState","isOpen","setIsOpen","popper","usePopper","prev"],"mappings":";;AAkBA,MAAMA,IAAoB,CAAC,EAAE,WAAAC,IAAY,eAAA,IAA4C,CAAA,MAAO;AACxF,QAAMC,IAAeC,EAAoB,IAAI,GACvC,CAACC,GAAeC,CAAgB,IAAIC,EAA6B,IAAI,GACrE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GAEpCG,IAASC,EAAUR,EAAa,SAASE,GAAe;AAAA,IAC1D,WAAAH;AAAA,EAAA,CACH;AAMD,SAAO;AAAA,IACH,QAAAM;AAAA,IACA,MANS,MAAMC,EAAU,EAAI;AAAA,IAO7B,OANU,MAAMA,EAAU,EAAK;AAAA,IAO/B,QANW,MAAMA,EAAU,CAAAG,MAAQ,CAACA,CAAI;AAAA,IAOxC,cAAAT;AAAA,IACA,kBAAkBG;AAAA,IAClB,cAAcI,EAAO,OAAO;AAAA,IAC5B,kBAAkBA,EAAO,WAAW;AAAA,EAAA;AAE5C;"}
+{"version":3,"file":"usePopperDropdown.js","sources":["../../src/hooks/usePopperDropdown.ts"],"sourcesContent":["import { type CSSProperties, useCallback, useRef, useState } from 'react';\nimport { usePopper } from 'react-popper';\n\ntype UsePopperDropdownResult = {\n    isOpen: boolean;\n    open: () => void;\n    close: () => void;\n    toggle: () => void;\n    update: () => void;\n    referenceRef: any;\n    popperElementRef: (el: HTMLElement | null) => void;\n    popperStyles: CSSProperties;\n    popperAttributes: Record<string, any>;\n};\n\ntype UsePopperDropdownParams = {\n    placement?: 'bottom-start' | 'bottom-end';\n};\n\nconst usePopperDropdown = ({ placement = 'bottom-start' }: UsePopperDropdownParams = {}) => {\n    const referenceRef = useRef<HTMLElement>(null);\n    const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);\n    const [isOpen, setIsOpen] = useState(false);\n\n    const popper = usePopper(referenceRef.current, popperElement, {\n        placement,\n    });\n\n    const open = () => setIsOpen(true);\n    const close = () => setIsOpen(false);\n    const toggle = () => setIsOpen(prev => !prev);\n    const update = useCallback(() => {\n        void popper.update?.();\n    }, [popper.update]);\n\n    return {\n        isOpen,\n        open,\n        close,\n        toggle,\n        update,\n        referenceRef,\n        popperElementRef: setPopperElement,\n        popperStyles: popper.styles.popper,\n        popperAttributes: popper.attributes.popper,\n    } as UsePopperDropdownResult;\n};\n\nexport default usePopperDropdown;\n"],"names":["usePopperDropdown","placement","referenceRef","useRef","popperElement","setPopperElement","useState","isOpen","setIsOpen","popper","usePopper","open","close","toggle","prev","update","useCallback"],"mappings":";;AAmBA,MAAMA,IAAoB,CAAC,EAAE,WAAAC,IAAY,eAAA,IAA4C,CAAA,MAAO;AACxF,QAAMC,IAAeC,EAAoB,IAAI,GACvC,CAACC,GAAeC,CAAgB,IAAIC,EAA6B,IAAI,GACrE,CAACC,GAAQC,CAAS,IAAIF,EAAS,EAAK,GAEpCG,IAASC,EAAUR,EAAa,SAASE,GAAe;AAAA,IAC1D,WAAAH;AAAA,EAAA,CACH,GAEKU,IAAO,MAAMH,EAAU,EAAI,GAC3BI,IAAQ,MAAMJ,EAAU,EAAK,GAC7BK,IAAS,MAAML,EAAU,CAAAM,MAAQ,CAACA,CAAI,GACtCC,IAASC,EAAY,MAAM;AAC7B,IAAKP,EAAO,SAAA;AAAA,EAChB,GAAG,CAACA,EAAO,MAAM,CAAC;AAElB,SAAO;AAAA,IACH,QAAAF;AAAA,IACA,MAAAI;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,QAAAE;AAAA,IACA,cAAAb;AAAA,IACA,kBAAkBG;AAAA,IAClB,cAAcI,EAAO,OAAO;AAAA,IAC5B,kBAAkBA,EAAO,WAAW;AAAA,EAAA;AAE5C;"}

package/hooks/useUrlState.js

@@ -1,12 +1,12 @@
 import { useRef as R, useEffect as D } from "react";
 import { isNil as z, isEqual as v } from "es-toolkit";
-import { deserializeValue as T, toQueryString as M, serializeValue as A } from "../utils/routeUtils.js";
+import { toQueryString as T, deserializeValue as M, serializeValue as A } from "../utils/routeUtils.js";
 import E from "./useAfterMount.js";
 import U from "./useLatest.js";
 const C = (r) => {
   const e = r.replace(/^\?/, "");
   return new URLSearchParams(e).toString();
-}, L = (r, e) => r.customDeserialize ? r.customDeserialize(e) : T(e, r.type ?? "string"), N = (r, e) => r ?? e, I = (r) => {
+}, L = (r, e) => r.customDeserialize ? r.customDeserialize(e) : M(e, r.type ?? "string"), N = (r, e) => r ?? e, I = (r) => {
   const { valueToApply: e, currentStoreValue: t, urlRawValue: a, defaultValue: d } = r;
   if (typeof e > "u" || v(e, t))
     return !1;
@@ -74,7 +74,7 @@ const C = (r) => {
       const w = O(o, V, k);
       w !== m && (i = x({ nextParams: u, key: o.key, serializedValue: w }) || i, ((o.history ?? "push") === "push" || !k && K(o, m)) && (f = !0));
     }), i) {
-      const o = M(u, e), V = u.toString();
+      const o = T(u, e), V = u.toString();
       l.current = V, n && (S && o === "" ? localStorage.removeItem(n) : localStorage.setItem(n, o));
       const m = f ? "push" : "replace";
       h.current(o, m);