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

package/components/table/render/header/resolveHeaderCellClassName.js

@@ -1,18 +1,19 @@
-import o from "../../../../utils/classNames.js";
-import { getVerticalAlignClassName as b, getHorizontalAlignClassName as d } from "../../shared/getAlignClassName.js";
-const n = (e, a, l) => {
-  const { isDraggable: t, isDragging: i, isResizable: r, isStickyLeftColumn: s } = l;
-  return o(
+import b from "../../../../utils/classNames.js";
+import { getVerticalAlignClassName as d, getHorizontalAlignClassName as g } from "../../shared/getAlignClassName.js";
+const n = (e, l, a) => {
+  const { isDraggable: t, isDragging: i, isResizable: r, isStickyLeftColumn: s, isStickyRightColumn: o } = a;
+  return b(
     "table-head-cell",
     e.sortable && "table-head-cell-sortable",
     t && "table-head-cell-draggable",
     i && "table-head-cell-dragging",
     r && "table-head-cell-resizable",
     s && "table-head-cell-sticky-left-column",
-    e.columnStart + e.colSpan - 1 < a.totalColumnCount && "table-head-cell-has-column-divider",
-    e.rowStart + e.rowSpan - 1 < a.rowCount && "table-head-cell-has-row-divider",
-    d(e.horizontalAlign),
-    b(e.verticalAlign),
+    o && "table-head-cell-sticky-right-column",
+    e.columnStart + e.colSpan - 1 < l.totalColumnCount && "table-head-cell-has-column-divider",
+    e.rowStart + e.rowSpan - 1 < l.rowCount && "table-head-cell-has-row-divider",
+    g(e.horizontalAlign),
+    d(e.verticalAlign),
     e.hideOnMobile && "table-hide-mobile",
     e.headerClassName
   );

package/components/table/render/header/resolveHeaderCellClassName.js.map

@@ -1 +1 @@
-{"version":3,"file":"resolveHeaderCellClassName.js","sources":["../../../../../src/components/table/render/header/resolveHeaderCellClassName.ts"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from '../../shared/getAlignClassName';\nimport type { TableRowData } from '../../Table.types';\nimport type { HeaderColumn } from './TableHeader.types';\n\nexport const resolveHeaderCellClassName = (\n    column: HeaderColumn<TableRowData>,\n    header: NonNullable<{ columns: HeaderColumn<TableRowData>[]; rowCount: number; totalColumnCount: number }>,\n    options: {\n        isDraggable?: boolean;\n        isDragging?: boolean;\n        isResizable: boolean;\n        isStickyLeftColumn?: boolean;\n    }\n) => {\n    const { isDraggable, isDragging, isResizable, isStickyLeftColumn } = options;\n\n    return classNames(\n        'table-head-cell',\n        column.sortable && 'table-head-cell-sortable',\n        isDraggable && 'table-head-cell-draggable',\n        isDragging && 'table-head-cell-dragging',\n        isResizable && 'table-head-cell-resizable',\n        isStickyLeftColumn && 'table-head-cell-sticky-left-column',\n        column.columnStart + column.colSpan - 1 < header.totalColumnCount && 'table-head-cell-has-column-divider',\n        column.rowStart + column.rowSpan - 1 < header.rowCount && 'table-head-cell-has-row-divider',\n        getHorizontalAlignClassName(column.horizontalAlign),\n        getVerticalAlignClassName(column.verticalAlign),\n        column.hideOnMobile && 'table-hide-mobile',\n        column.headerClassName\n    );\n};\n"],"names":["resolveHeaderCellClassName","column","header","options","isDraggable","isDragging","isResizable","isStickyLeftColumn","classNames","getHorizontalAlignClassName","getVerticalAlignClassName"],"mappings":";;AAKO,MAAMA,IAA6B,CACtCC,GACAC,GACAC,MAMC;AACD,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,aAAAC,GAAa,oBAAAC,MAAuBJ;AAErE,SAAOK;AAAA,IACH;AAAA,IACAP,EAAO,YAAY;AAAA,IACnBG,KAAe;AAAA,IACfC,KAAc;AAAA,IACdC,KAAe;AAAA,IACfC,KAAsB;AAAA,IACtBN,EAAO,cAAcA,EAAO,UAAU,IAAIC,EAAO,oBAAoB;AAAA,IACrED,EAAO,WAAWA,EAAO,UAAU,IAAIC,EAAO,YAAY;AAAA,IAC1DO,EAA4BR,EAAO,eAAe;AAAA,IAClDS,EAA0BT,EAAO,aAAa;AAAA,IAC9CA,EAAO,gBAAgB;AAAA,IACvBA,EAAO;AAAA,EAAA;AAEf;"}
+{"version":3,"file":"resolveHeaderCellClassName.js","sources":["../../../../../src/components/table/render/header/resolveHeaderCellClassName.ts"],"sourcesContent":["import classNames from '../../../../utils/classNames';\nimport { getHorizontalAlignClassName, getVerticalAlignClassName } from '../../shared/getAlignClassName';\nimport type { TableRowData } from '../../Table.types';\nimport type { HeaderColumn } from './TableHeader.types';\n\nexport const resolveHeaderCellClassName = (\n    column: HeaderColumn<TableRowData>,\n    header: NonNullable<{ columns: HeaderColumn<TableRowData>[]; rowCount: number; totalColumnCount: number }>,\n    options: {\n        isDraggable?: boolean;\n        isDragging?: boolean;\n        isResizable: boolean;\n        isStickyLeftColumn?: boolean;\n        isStickyRightColumn?: boolean;\n    }\n) => {\n    const { isDraggable, isDragging, isResizable, isStickyLeftColumn, isStickyRightColumn } = options;\n\n    return classNames(\n        'table-head-cell',\n        column.sortable && 'table-head-cell-sortable',\n        isDraggable && 'table-head-cell-draggable',\n        isDragging && 'table-head-cell-dragging',\n        isResizable && 'table-head-cell-resizable',\n        isStickyLeftColumn && 'table-head-cell-sticky-left-column',\n        isStickyRightColumn && 'table-head-cell-sticky-right-column',\n        column.columnStart + column.colSpan - 1 < header.totalColumnCount && 'table-head-cell-has-column-divider',\n        column.rowStart + column.rowSpan - 1 < header.rowCount && 'table-head-cell-has-row-divider',\n        getHorizontalAlignClassName(column.horizontalAlign),\n        getVerticalAlignClassName(column.verticalAlign),\n        column.hideOnMobile && 'table-hide-mobile',\n        column.headerClassName\n    );\n};\n"],"names":["resolveHeaderCellClassName","column","header","options","isDraggable","isDragging","isResizable","isStickyLeftColumn","isStickyRightColumn","classNames","getHorizontalAlignClassName","getVerticalAlignClassName"],"mappings":";;AAKO,MAAMA,IAA6B,CACtCC,GACAC,GACAC,MAOC;AACD,QAAM,EAAE,aAAAC,GAAa,YAAAC,GAAY,aAAAC,GAAa,oBAAAC,GAAoB,qBAAAC,MAAwBL;AAE1F,SAAOM;AAAA,IACH;AAAA,IACAR,EAAO,YAAY;AAAA,IACnBG,KAAe;AAAA,IACfC,KAAc;AAAA,IACdC,KAAe;AAAA,IACfC,KAAsB;AAAA,IACtBC,KAAuB;AAAA,IACvBP,EAAO,cAAcA,EAAO,UAAU,IAAIC,EAAO,oBAAoB;AAAA,IACrED,EAAO,WAAWA,EAAO,UAAU,IAAIC,EAAO,YAAY;AAAA,IAC1DQ,EAA4BT,EAAO,eAAe;AAAA,IAClDU,EAA0BV,EAAO,aAAa;AAAA,IAC9CA,EAAO,gBAAgB;AAAA,IACvBA,EAAO;AAAA,EAAA;AAEf;"}

package/components/table/runtime/useResolvedRenderColumns.d.ts

@@ -19,20 +19,20 @@ export type UseResolvedRenderColumnsReturn<RowType extends TableRowData> = {
     handleColumnResizeStart: ReturnType<typeof useResizableColumns<RowType>>['handleColumnResizeStart'];
     lastResizableColumnKey?: string;
     resettableColumnKeys: Set<string>;
-    renderLeafColumns: RenderHeaderColumn<RowType>[];
+    renderDataColumns: RenderHeaderColumn<RowType>[];
     resizeColumnsEnabled: boolean;
     resolvedRenderColumns: RenderHeaderColumn<RowType>[];
     resizedColumns: ReturnType<typeof useResizableColumns<RowType>>['resizedColumns'];
 };
 /**
- * Resolves the leaf-level table columns that drive layout and column behavior.
+ * Resolves the actual data columns that drive layout and column behavior.
  *
  * Header registration can contain grouped header cells, multi-row headers, and
  * other metadata that is useful for rendering, but drag, resize, sticky layout,
- * and body/footer cell placement ultimately need a flat list of leaf columns.
+ * and body/footer cell placement ultimately need a flat list of actual data columns.
  *
  * This hook therefore:
- * - narrows registered header cells down to leaf columns with a stable `columnKey`
+ * - narrows registered header cells down to single-column data headers with a stable `columnKey`
  * - applies column reordering
  * - applies resized widths
  * - exposes a normalized column map for body/footer cell lookup

package/components/table/runtime/useResolvedRenderColumns.js

@@ -1,6 +1,6 @@
 import { useMemo as l } from "react";
-import { useDraggableColumns as x } from "../layout/useDraggableColumns.js";
-import { useResizableColumns as A } from "../layout/useResizableColumns.js";
+import { useDraggableColumns as A } from "../layout/useDraggableColumns.js";
+import { useResizableColumns as L } from "../layout/useResizableColumns.js";
 const B = (m) => {
   const { columnOrder: g, onColumnOrderChange: C, onColumnResize: y, renderHeaderColumns: t, viewType: d } = m, i = l(
     () => t.flatMap(
@@ -28,18 +28,18 @@ const B = (m) => {
       sortable: e.sortable
     })),
     [i]
-  ), o = d === "TABLE" && n.filter((e) => e.draggable === !0).length > 1, { draggableColumnKeys: R, handleColumnDragEnd: p, orderedColumns: b } = x({
+  ), o = d === "TABLE" && n.filter((e) => e.draggable === !0).length > 1, { draggableColumnKeys: R, handleColumnDragEnd: p, orderedColumns: b } = A({
     columns: n,
     columnOrder: g,
     enabled: o,
     onColumnOrderChange: C
   }), h = d === "TABLE" && b.some((e) => e.resizeable === !0), {
     handleColumnResizeReset: K,
-    handleColumnResizeStart: f,
-    lastResizableColumnKey: M,
-    resettableColumnKeys: W,
+    handleColumnResizeStart: M,
+    lastResizableColumnKey: W,
+    resettableColumnKeys: f,
     resizedColumns: r
-  } = A({
+  } = L({
     columns: b,
     enabled: h,
     onColumnResize: y
@@ -87,21 +87,21 @@ const B = (m) => {
       ])
     ),
     [s]
-  ), L = l(
+  ), x = l(
     () => new Map(s.map((e, a) => [e.columnKey, a])),
     [s]
   );
   return {
     columnDefinitionsByKey: w,
-    columnIndexByKey: L,
+    columnIndexByKey: x,
     draggableColumnKeys: R,
     draggableColumnsEnabled: o,
     handleColumnDragEnd: p,
     handleColumnResizeReset: K,
-    handleColumnResizeStart: f,
-    lastResizableColumnKey: M,
-    resettableColumnKeys: W,
-    renderLeafColumns: i,
+    handleColumnResizeStart: M,
+    lastResizableColumnKey: W,
+    resettableColumnKeys: f,
+    renderDataColumns: i,
     resizeColumnsEnabled: h,
     resolvedRenderColumns: s,
     resizedColumns: r

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

@@ -1 +1 @@
-{"version":3,"file":"useResolvedRenderColumns.js","sources":["../../../../src/components/table/runtime/useResolvedRenderColumns.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { RenderHeaderColumn } from '../context/TableRenderContext';\nimport { useDraggableColumns } from '../layout/useDraggableColumns';\nimport { useResizableColumns } from '../layout/useResizableColumns';\nimport type { TableColumnDefinition, TableProps, TableRowData } from '../Table.types';\n\ntype UseResolvedRenderColumnsProps<RowType extends TableRowData> = {\n    columnOrder: TableProps<RowType>['columnOrder'];\n    onColumnOrderChange: TableProps<RowType>['onColumnOrderChange'];\n    onColumnResize: TableProps<RowType>['onColumnResize'];\n    renderHeaderColumns: RenderHeaderColumn<RowType>[];\n    viewType: TableProps<RowType>['viewType'];\n};\n\nexport type UseResolvedRenderColumnsReturn<RowType extends TableRowData> = {\n    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;\n    columnIndexByKey: Map<string, number>;\n    draggableColumnKeys?: string[];\n    draggableColumnsEnabled: boolean;\n    handleColumnDragEnd: ReturnType<typeof useDraggableColumns>['handleColumnDragEnd'];\n    handleColumnResizeReset: ReturnType<typeof useResizableColumns<RowType>>['handleColumnResizeReset'];\n    handleColumnResizeStart: ReturnType<typeof useResizableColumns<RowType>>['handleColumnResizeStart'];\n    lastResizableColumnKey?: string;\n    resettableColumnKeys: Set<string>;\n    renderLeafColumns: RenderHeaderColumn<RowType>[];\n    resizeColumnsEnabled: boolean;\n    resolvedRenderColumns: RenderHeaderColumn<RowType>[];\n    resizedColumns: ReturnType<typeof useResizableColumns<RowType>>['resizedColumns'];\n};\n\n/**\n * Resolves the leaf-level table columns that drive layout and column behavior.\n *\n * Header registration can contain grouped header cells, multi-row headers, and\n * other metadata that is useful for rendering, but drag, resize, sticky layout,\n * and body/footer cell placement ultimately need a flat list of leaf columns.\n *\n * This hook therefore:\n * - narrows registered header cells down to leaf columns with a stable `columnKey`\n * - applies column reordering\n * - applies resized widths\n * - exposes a normalized column map for body/footer cell lookup\n *\n * `Table` uses this as the canonical column model for the rest of the render pass.\n */\nconst useResolvedRenderColumns = <RowType extends TableRowData>(\n    props: UseResolvedRenderColumnsProps<RowType>\n): UseResolvedRenderColumnsReturn<RowType> => {\n    const { columnOrder, onColumnOrderChange, onColumnResize, renderHeaderColumns, viewType } = props;\n\n    // Only leaf header cells represent actual data columns. Group headers span\n    // other columns and are part of the header layout, but not the column model\n    // used by body/footer cells or drag/resize behavior.\n    const renderLeafColumns = useMemo(\n        () =>\n            renderHeaderColumns.flatMap(column =>\n                column.columnKey && column.colSpan === 1\n                    ? [\n                          {\n                              ...column,\n                              columnKey: column.columnKey,\n                          },\n                      ]\n                    : []\n            ),\n        [renderHeaderColumns]\n    );\n\n    const baseRenderColumnDefinitions = useMemo(\n        () =>\n            renderLeafColumns.map(column => ({\n                key: column.columnKey,\n                label: column.columnKey,\n                mobileLabel: column.mobileLabel,\n                width: column.width,\n                minResizeWidth: column.minResizeWidth,\n                maxResizeWidth: column.maxResizeWidth,\n                draggable: column.draggable,\n                resizeable: column.resizeable,\n                horizontalAlign: column.horizontalAlign,\n                headerClassName: column.headerClassName,\n                hideOnMobile: column.hideOnMobile,\n                sortable: column.sortable,\n            })),\n        [renderLeafColumns]\n    );\n\n    const draggableColumnsEnabled =\n        viewType === 'TABLE' && baseRenderColumnDefinitions.filter(column => column.draggable === true).length > 1;\n    const { draggableColumnKeys, handleColumnDragEnd, orderedColumns } = useDraggableColumns({\n        columns: baseRenderColumnDefinitions,\n        columnOrder,\n        enabled: draggableColumnsEnabled,\n        onColumnOrderChange,\n    });\n\n    const resizeColumnsEnabled = viewType === 'TABLE' && orderedColumns.some(column => column.resizeable === true);\n    const {\n        handleColumnResizeReset,\n        handleColumnResizeStart,\n        lastResizableColumnKey,\n        resettableColumnKeys,\n        resizedColumns,\n    } = useResizableColumns({\n        columns: orderedColumns,\n        enabled: resizeColumnsEnabled,\n        onColumnResize,\n    });\n\n    // Merge reordered/resized column behavior back into the registered leaf\n    // columns so the rest of the table can render from one normalized shape.\n    const resolvedRenderColumns = useMemo(() => {\n        const renderColumnsByKey = new Map(renderLeafColumns.map(column => [column.columnKey, column] as const));\n\n        return resizedColumns.flatMap(column => {\n            const renderColumn = renderColumnsByKey.get(column.key);\n\n            return renderColumn\n                ? [\n                      {\n                          ...renderColumn,\n                          width: column.width,\n                          minResizeWidth: column.minResizeWidth,\n                          maxResizeWidth: column.maxResizeWidth,\n                          draggable: column.draggable,\n                          resizeable: column.resizeable,\n                          horizontalAlign: column.horizontalAlign,\n                          headerClassName: column.headerClassName,\n                          hideOnMobile: column.hideOnMobile,\n                          sortable: column.sortable,\n                      },\n                  ]\n                : [];\n        });\n    }, [renderLeafColumns, resizedColumns]);\n\n    // Body and footer cells resolve their column metadata by `columnKey`, so keep\n    // an efficient lookup map next to the ordered column array.\n    const columnDefinitionsByKey = useMemo(\n        () =>\n            new Map<string, TableColumnDefinition<RowType>>(\n                resolvedRenderColumns.map(column => [\n                    column.columnKey,\n                    {\n                        key: column.columnKey,\n                        label: column.label,\n                        mobileLabel: column.mobileLabel,\n                        icon: column.icon,\n                        filter: column.filter,\n                        hideLabel: column.hideLabel,\n                        width: column.width,\n                        minResizeWidth: column.minResizeWidth,\n                        maxResizeWidth: column.maxResizeWidth,\n                        draggable: column.draggable,\n                        resizeable: column.resizeable,\n                        horizontalAlign: column.horizontalAlign,\n                        className: undefined,\n                        headerClassName: column.headerClassName,\n                        hideOnMobile: column.hideOnMobile,\n                        sortable: column.sortable,\n                    },\n                ])\n            ),\n        [resolvedRenderColumns]\n    );\n    const columnIndexByKey = useMemo(\n        () => new Map(resolvedRenderColumns.map((column, index) => [column.columnKey, index] as const)),\n        [resolvedRenderColumns]\n    );\n\n    return {\n        columnDefinitionsByKey,\n        columnIndexByKey,\n        draggableColumnKeys,\n        draggableColumnsEnabled,\n        handleColumnDragEnd,\n        handleColumnResizeReset,\n        handleColumnResizeStart,\n        lastResizableColumnKey,\n        resettableColumnKeys,\n        renderLeafColumns,\n        resizeColumnsEnabled,\n        resolvedRenderColumns,\n        resizedColumns,\n    };\n};\n\nexport default useResolvedRenderColumns;\n"],"names":["useResolvedRenderColumns","props","columnOrder","onColumnOrderChange","onColumnResize","renderHeaderColumns","viewType","renderLeafColumns","useMemo","column","baseRenderColumnDefinitions","draggableColumnsEnabled","draggableColumnKeys","handleColumnDragEnd","orderedColumns","useDraggableColumns","resizeColumnsEnabled","handleColumnResizeReset","handleColumnResizeStart","lastResizableColumnKey","resettableColumnKeys","resizedColumns","useResizableColumns","resolvedRenderColumns","renderColumnsByKey","renderColumn","columnDefinitionsByKey","columnIndexByKey","index"],"mappings":"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"}
+{"version":3,"file":"useResolvedRenderColumns.js","sources":["../../../../src/components/table/runtime/useResolvedRenderColumns.ts"],"sourcesContent":["import { useMemo } from 'react';\n\nimport type { RenderHeaderColumn } from '../context/TableRenderContext';\nimport { useDraggableColumns } from '../layout/useDraggableColumns';\nimport { useResizableColumns } from '../layout/useResizableColumns';\nimport type { TableColumnDefinition, TableProps, TableRowData } from '../Table.types';\n\ntype UseResolvedRenderColumnsProps<RowType extends TableRowData> = {\n    columnOrder: TableProps<RowType>['columnOrder'];\n    onColumnOrderChange: TableProps<RowType>['onColumnOrderChange'];\n    onColumnResize: TableProps<RowType>['onColumnResize'];\n    renderHeaderColumns: RenderHeaderColumn<RowType>[];\n    viewType: TableProps<RowType>['viewType'];\n};\n\nexport type UseResolvedRenderColumnsReturn<RowType extends TableRowData> = {\n    columnDefinitionsByKey: Map<string, TableColumnDefinition<RowType>>;\n    columnIndexByKey: Map<string, number>;\n    draggableColumnKeys?: string[];\n    draggableColumnsEnabled: boolean;\n    handleColumnDragEnd: ReturnType<typeof useDraggableColumns>['handleColumnDragEnd'];\n    handleColumnResizeReset: ReturnType<typeof useResizableColumns<RowType>>['handleColumnResizeReset'];\n    handleColumnResizeStart: ReturnType<typeof useResizableColumns<RowType>>['handleColumnResizeStart'];\n    lastResizableColumnKey?: string;\n    resettableColumnKeys: Set<string>;\n    renderDataColumns: RenderHeaderColumn<RowType>[];\n    resizeColumnsEnabled: boolean;\n    resolvedRenderColumns: RenderHeaderColumn<RowType>[];\n    resizedColumns: ReturnType<typeof useResizableColumns<RowType>>['resizedColumns'];\n};\n\n/**\n * Resolves the actual data columns that drive layout and column behavior.\n *\n * Header registration can contain grouped header cells, multi-row headers, and\n * other metadata that is useful for rendering, but drag, resize, sticky layout,\n * and body/footer cell placement ultimately need a flat list of actual data columns.\n *\n * This hook therefore:\n * - narrows registered header cells down to single-column data headers with a stable `columnKey`\n * - applies column reordering\n * - applies resized widths\n * - exposes a normalized column map for body/footer cell lookup\n *\n * `Table` uses this as the canonical column model for the rest of the render pass.\n */\nconst useResolvedRenderColumns = <RowType extends TableRowData>(\n    props: UseResolvedRenderColumnsProps<RowType>\n): UseResolvedRenderColumnsReturn<RowType> => {\n    const { columnOrder, onColumnOrderChange, onColumnResize, renderHeaderColumns, viewType } = props;\n\n    // Only single-column header cells represent actual data columns. Group headers span\n    // other columns and are part of the header layout, but not the column model\n    // used by body/footer cells or drag/resize behavior.\n    const renderDataColumns = useMemo(\n        () =>\n            renderHeaderColumns.flatMap(column =>\n                column.columnKey && column.colSpan === 1\n                    ? [\n                          {\n                              ...column,\n                              columnKey: column.columnKey,\n                          },\n                      ]\n                    : []\n            ),\n        [renderHeaderColumns]\n    );\n\n    const baseRenderColumnDefinitions = useMemo(\n        () =>\n            renderDataColumns.map(column => ({\n                key: column.columnKey,\n                label: column.columnKey,\n                mobileLabel: column.mobileLabel,\n                width: column.width,\n                minResizeWidth: column.minResizeWidth,\n                maxResizeWidth: column.maxResizeWidth,\n                draggable: column.draggable,\n                resizeable: column.resizeable,\n                horizontalAlign: column.horizontalAlign,\n                headerClassName: column.headerClassName,\n                hideOnMobile: column.hideOnMobile,\n                sortable: column.sortable,\n            })),\n        [renderDataColumns]\n    );\n\n    const draggableColumnsEnabled =\n        viewType === 'TABLE' && baseRenderColumnDefinitions.filter(column => column.draggable === true).length > 1;\n    const { draggableColumnKeys, handleColumnDragEnd, orderedColumns } = useDraggableColumns({\n        columns: baseRenderColumnDefinitions,\n        columnOrder,\n        enabled: draggableColumnsEnabled,\n        onColumnOrderChange,\n    });\n\n    const resizeColumnsEnabled = viewType === 'TABLE' && orderedColumns.some(column => column.resizeable === true);\n    const {\n        handleColumnResizeReset,\n        handleColumnResizeStart,\n        lastResizableColumnKey,\n        resettableColumnKeys,\n        resizedColumns,\n    } = useResizableColumns({\n        columns: orderedColumns,\n        enabled: resizeColumnsEnabled,\n        onColumnResize,\n    });\n\n    // Merge reordered/resized column behavior back into the registered data\n    // columns so the rest of the table can render from one normalized shape.\n    const resolvedRenderColumns = useMemo(() => {\n        const renderColumnsByKey = new Map(renderDataColumns.map(column => [column.columnKey, column] as const));\n\n        return resizedColumns.flatMap(column => {\n            const renderColumn = renderColumnsByKey.get(column.key);\n\n            return renderColumn\n                ? [\n                      {\n                          ...renderColumn,\n                          width: column.width,\n                          minResizeWidth: column.minResizeWidth,\n                          maxResizeWidth: column.maxResizeWidth,\n                          draggable: column.draggable,\n                          resizeable: column.resizeable,\n                          horizontalAlign: column.horizontalAlign,\n                          headerClassName: column.headerClassName,\n                          hideOnMobile: column.hideOnMobile,\n                          sortable: column.sortable,\n                      },\n                  ]\n                : [];\n        });\n    }, [renderDataColumns, resizedColumns]);\n\n    // Body and footer cells resolve their column metadata by `columnKey`, so keep\n    // an efficient lookup map next to the ordered column array.\n    const columnDefinitionsByKey = useMemo(\n        () =>\n            new Map<string, TableColumnDefinition<RowType>>(\n                resolvedRenderColumns.map(column => [\n                    column.columnKey,\n                    {\n                        key: column.columnKey,\n                        label: column.label,\n                        mobileLabel: column.mobileLabel,\n                        icon: column.icon,\n                        filter: column.filter,\n                        hideLabel: column.hideLabel,\n                        width: column.width,\n                        minResizeWidth: column.minResizeWidth,\n                        maxResizeWidth: column.maxResizeWidth,\n                        draggable: column.draggable,\n                        resizeable: column.resizeable,\n                        horizontalAlign: column.horizontalAlign,\n                        className: undefined,\n                        headerClassName: column.headerClassName,\n                        hideOnMobile: column.hideOnMobile,\n                        sortable: column.sortable,\n                    },\n                ])\n            ),\n        [resolvedRenderColumns]\n    );\n    const columnIndexByKey = useMemo(\n        () => new Map(resolvedRenderColumns.map((column, index) => [column.columnKey, index] as const)),\n        [resolvedRenderColumns]\n    );\n\n    return {\n        columnDefinitionsByKey,\n        columnIndexByKey,\n        draggableColumnKeys,\n        draggableColumnsEnabled,\n        handleColumnDragEnd,\n        handleColumnResizeReset,\n        handleColumnResizeStart,\n        lastResizableColumnKey,\n        resettableColumnKeys,\n        renderDataColumns,\n        resizeColumnsEnabled,\n        resolvedRenderColumns,\n        resizedColumns,\n    };\n};\n\nexport default useResolvedRenderColumns;\n"],"names":["useResolvedRenderColumns","props","columnOrder","onColumnOrderChange","onColumnResize","renderHeaderColumns","viewType","renderDataColumns","useMemo","column","baseRenderColumnDefinitions","draggableColumnsEnabled","draggableColumnKeys","handleColumnDragEnd","orderedColumns","useDraggableColumns","resizeColumnsEnabled","handleColumnResizeReset","handleColumnResizeStart","lastResizableColumnKey","resettableColumnKeys","resizedColumns","useResizableColumns","resolvedRenderColumns","renderColumnsByKey","renderColumn","columnDefinitionsByKey","columnIndexByKey","index"],"mappings":";;;AA8CA,MAAMA,IAA2B,CAC7BC,MAC0C;AAC1C,QAAM,EAAE,aAAAC,GAAa,qBAAAC,GAAqB,gBAAAC,GAAgB,qBAAAC,GAAqB,UAAAC,MAAaL,GAKtFM,IAAoBC;AAAA,IACtB,MACIH,EAAoB;AAAA,MAAQ,CAAAI,MACxBA,EAAO,aAAaA,EAAO,YAAY,IACjC;AAAA,QACI;AAAA,UACI,GAAGA;AAAA,UACH,WAAWA,EAAO;AAAA,QAAA;AAAA,MACtB,IAEJ,CAAA;AAAA,IAAC;AAAA,IAEf,CAACJ,CAAmB;AAAA,EAAA,GAGlBK,IAA8BF;AAAA,IAChC,MACID,EAAkB,IAAI,CAAAE,OAAW;AAAA,MAC7B,KAAKA,EAAO;AAAA,MACZ,OAAOA,EAAO;AAAA,MACd,aAAaA,EAAO;AAAA,MACpB,OAAOA,EAAO;AAAA,MACd,gBAAgBA,EAAO;AAAA,MACvB,gBAAgBA,EAAO;AAAA,MACvB,WAAWA,EAAO;AAAA,MAClB,YAAYA,EAAO;AAAA,MACnB,iBAAiBA,EAAO;AAAA,MACxB,iBAAiBA,EAAO;AAAA,MACxB,cAAcA,EAAO;AAAA,MACrB,UAAUA,EAAO;AAAA,IAAA,EACnB;AAAA,IACN,CAACF,CAAiB;AAAA,EAAA,GAGhBI,IACFL,MAAa,WAAWI,EAA4B,OAAO,OAAUD,EAAO,cAAc,EAAI,EAAE,SAAS,GACvG,EAAE,qBAAAG,GAAqB,qBAAAC,GAAqB,gBAAAC,EAAA,IAAmBC,EAAoB;AAAA,IACrF,SAASL;AAAA,IACT,aAAAR;AAAA,IACA,SAASS;AAAA,IACT,qBAAAR;AAAA,EAAA,CACH,GAEKa,IAAuBV,MAAa,WAAWQ,EAAe,KAAK,CAAAL,MAAUA,EAAO,eAAe,EAAI,GACvG;AAAA,IACF,yBAAAQ;AAAA,IACA,yBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,gBAAAC;AAAA,EAAA,IACAC,EAAoB;AAAA,IACpB,SAASR;AAAA,IACT,SAASE;AAAA,IACT,gBAAAZ;AAAA,EAAA,CACH,GAIKmB,IAAwBf,EAAQ,MAAM;AACxC,UAAMgB,IAAqB,IAAI,IAAIjB,EAAkB,IAAI,CAAAE,MAAU,CAACA,EAAO,WAAWA,CAAM,CAAU,CAAC;AAEvG,WAAOY,EAAe,QAAQ,CAAAZ,MAAU;AACpC,YAAMgB,IAAeD,EAAmB,IAAIf,EAAO,GAAG;AAEtD,aAAOgB,IACD;AAAA,QACI;AAAA,UACI,GAAGA;AAAA,UACH,OAAOhB,EAAO;AAAA,UACd,gBAAgBA,EAAO;AAAA,UACvB,gBAAgBA,EAAO;AAAA,UACvB,WAAWA,EAAO;AAAA,UAClB,YAAYA,EAAO;AAAA,UACnB,iBAAiBA,EAAO;AAAA,UACxB,iBAAiBA,EAAO;AAAA,UACxB,cAAcA,EAAO;AAAA,UACrB,UAAUA,EAAO;AAAA,QAAA;AAAA,MACrB,IAEJ,CAAA;AAAA,IACV,CAAC;AAAA,EACL,GAAG,CAACF,GAAmBc,CAAc,CAAC,GAIhCK,IAAyBlB;AAAA,IAC3B,MACI,IAAI;AAAA,MACAe,EAAsB,IAAI,CAAAd,MAAU;AAAA,QAChCA,EAAO;AAAA,QACP;AAAA,UACI,KAAKA,EAAO;AAAA,UACZ,OAAOA,EAAO;AAAA,UACd,aAAaA,EAAO;AAAA,UACpB,MAAMA,EAAO;AAAA,UACb,QAAQA,EAAO;AAAA,UACf,WAAWA,EAAO;AAAA,UAClB,OAAOA,EAAO;AAAA,UACd,gBAAgBA,EAAO;AAAA,UACvB,gBAAgBA,EAAO;AAAA,UACvB,WAAWA,EAAO;AAAA,UAClB,YAAYA,EAAO;AAAA,UACnB,iBAAiBA,EAAO;AAAA,UACxB,WAAW;AAAA,UACX,iBAAiBA,EAAO;AAAA,UACxB,cAAcA,EAAO;AAAA,UACrB,UAAUA,EAAO;AAAA,QAAA;AAAA,MACrB,CACH;AAAA,IAAA;AAAA,IAET,CAACc,CAAqB;AAAA,EAAA,GAEpBI,IAAmBnB;AAAA,IACrB,MAAM,IAAI,IAAIe,EAAsB,IAAI,CAACd,GAAQmB,MAAU,CAACnB,EAAO,WAAWmB,CAAK,CAAU,CAAC;AAAA,IAC9F,CAACL,CAAqB;AAAA,EAAA;AAG1B,SAAO;AAAA,IACH,wBAAAG;AAAA,IACA,kBAAAC;AAAA,IACA,qBAAAf;AAAA,IACA,yBAAAD;AAAA,IACA,qBAAAE;AAAA,IACA,yBAAAI;AAAA,IACA,yBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,mBAAAb;AAAA,IACA,sBAAAS;AAAA,IACA,uBAAAO;AAAA,IACA,gBAAAF;AAAA,EAAA;AAER;"}

package/components/table/runtime/useResolvedRenderHeader.d.ts

@@ -9,7 +9,7 @@ type UseResolvedRenderHeaderProps<RowType extends TableRowData> = {
 };
 /**
  * Builds the normalized header layout from registered header cells and the
- * already-resolved leaf columns.
+ * already-resolved data columns.
  *
  * `useResolvedRenderColumns(...)` decides which columns actually exist after
  * reorder/resize behavior. This hook takes that flat column model plus the

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

@@ -1 +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 leaf 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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"}
+{"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/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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "2.3.0-beta.2",
+    "version": "2.3.0-beta.3",
     "description": "The RIO UIKIT component library",
     "repository": {
         "type": "git",