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

package/components/table/TableHeader.js

@@ -0,0 +1,107 @@
+import { jsxs as h, jsx as o } from "react/jsx-runtime";
+import { useSensors as K, useSensor as O, PointerSensor as P, DndContext as E, DragOverlay as N } from "@dnd-kit/core";
+import { restrictToHorizontalAxis as j } from "@dnd-kit/modifiers";
+import { SortableContext as z, horizontalListSortingStrategy as L } from "@dnd-kit/sortable";
+import { useRef as W, useState as v } from "react";
+import k from "../../utils/classNames.js";
+import V from "./render/header/TableHeaderDragOverlay.js";
+import _ from "./render/header/TableHeaderSelectionCell.js";
+import { resolveColumnCollisionDetection as $ } from "./render/header/resolveColumnCollisionDetection.js";
+import { useOptionalTableInteractionContext as q } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as B } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as F } from "./context/TableRenderConfigContext.js";
+import { TableSectionContext as f, TableHeaderContext as p } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as G } from "./context/TableRenderContext.js";
+const ie = (x) => {
+  const { children: s, className: S, ...w } = x, l = G(), d = F(), t = q(), n = B();
+  if (!l || !d || !t || !n)
+    return null;
+  const D = K(O(P, { activationConstraint: { distance: 6 } })), r = W(0);
+  r.current = 0;
+  const [c, m] = v(void 0), [b, u] = v(void 0), R = !!n.onColumnDragEnd && (n.draggableColumnKeys?.length ?? 0) > 1, i = l.header, a = i?.rowCount ?? 1, y = i ?? {
+    rowCount: a,
+    totalColumnCount: l.columns.length,
+    columns: []
+  }, H = c ? i?.columns.find((e) => (e.columnKey ?? String(e.key)) === c) : void 0, g = () => {
+    m(void 0), u(void 0);
+  }, T = (e) => {
+    m(String(e.active.id)), u(e.active.rect.current.initial?.width ?? void 0);
+  }, A = (e) => {
+    g();
+  }, I = (e) => {
+    g(), n.onColumnDragEnd?.(e);
+  }, C = R && n.draggableColumnKeys ? /* @__PURE__ */ h(
+    E,
+    {
+      sensors: D,
+      collisionDetection: $,
+      modifiers: [j],
+      onDragStart: T,
+      onDragCancel: A,
+      onDragEnd: I,
+      children: [
+        /* @__PURE__ */ o(z, { items: n.draggableColumnKeys, strategy: L, children: s }),
+        /* @__PURE__ */ o(N, { adjustScale: !1, dropAnimation: null, children: /* @__PURE__ */ o(
+          V,
+          {
+            column: H,
+            header: y,
+            showSelectionColumn: t.showSelectionColumn,
+            width: b
+          }
+        ) })
+      ]
+    }
+  ) : s;
+  return d.isTableView ? /* @__PURE__ */ o("div", { ...w, className: "table-head", role: "rowgroup", ref: n.tableHeadRowRef, children: /* @__PURE__ */ o(f.Provider, { value: "header", children: /* @__PURE__ */ o(
+    p.Provider,
+    {
+      value: {
+        nextHeaderRowIndex: () => {
+          const e = r.current;
+          return r.current += 1, e;
+        }
+      },
+      children: /* @__PURE__ */ h(
+        "div",
+        {
+          className: k(
+            "table-head-grid",
+            t.selectionHeaderContent && "table-head-grid-custom-selection",
+            S
+          ),
+          role: a === 1 ? "row" : "presentation",
+          style: { gridTemplateRows: `repeat(${a}, auto)` },
+          children: [
+            t.showSelectionColumn && /* @__PURE__ */ o(
+              _,
+              {
+                isAllSelected: t.isAllRowsSelected,
+                isSomeRowsSelected: t.isSomeRowsSelected,
+                onToggleAllSelection: t.onToggleAllSelection,
+                rowCount: a,
+                selectionHeaderContent: t.selectionHeaderContent
+              }
+            ),
+            C
+          ]
+        }
+      )
+    }
+  ) }) }) : /* @__PURE__ */ o(f.Provider, { value: "header", children: /* @__PURE__ */ o(
+    p.Provider,
+    {
+      value: {
+        nextHeaderRowIndex: () => {
+          const e = r.current;
+          return r.current += 1, e;
+        }
+      },
+      children: C
+    }
+  ) });
+};
+export {
+  ie as default
+};
+//# sourceMappingURL=TableHeader.js.map

package/components/table/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sources":["../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {\n    DndContext,\n    DragOverlay,\n    PointerSensor,\n    type DragCancelEvent,\n    type DragEndEvent,\n    type DragStartEvent,\n    useSensor,\n    useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';\nimport { type ReactNode, useRef, useState } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport TableHeaderDragOverlay from './render/header/TableHeaderDragOverlay';\nimport TableHeaderSelectionCell from './render/header/TableHeaderSelectionCell';\nimport { resolveColumnCollisionDetection } from './render/header/resolveColumnCollisionDetection';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { TableHeaderContext, TableSectionContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderProps<RowType extends TableRowData> = TableHtmlAttributes & {\n    /**\n     * Additional class names for the header grid wrapper.\n     */\n    className?: string;\n\n    /**\n     * Table header content.\n     */\n    children?: ReactNode;\n};\n\nconst TableHeader = <RowType extends TableRowData = TableRowData>(props: TableHeaderProps<RowType>) => {\n    const { children, className, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext) {\n        return null;\n    }\n\n    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 6 } }));\n\n    const headerRowIndexRef = useRef(0);\n    headerRowIndexRef.current = 0;\n\n    const [activeDraggedColumnKey, setActiveDraggedColumnKey] = useState<string | undefined>(undefined);\n    const [activeDraggedColumnWidth, setActiveDraggedColumnWidth] = useState<number | undefined>(undefined);\n\n    const canDragColumns = !!layoutContext.onColumnDragEnd && (layoutContext.draggableColumnKeys?.length ?? 0) > 1;\n    const header = renderContext.header;\n    const headerRowCount = header?.rowCount ?? 1;\n    const overlayHeader = header ?? {\n        rowCount: headerRowCount,\n        totalColumnCount: renderContext.columns.length,\n        columns: [],\n    };\n\n    const activeDraggedColumn = activeDraggedColumnKey\n        ? header?.columns.find(column => (column.columnKey ?? String(column.key)) === activeDraggedColumnKey)\n        : undefined;\n\n    const clearActiveDraggedColumn = () => {\n        setActiveDraggedColumnKey(undefined);\n        setActiveDraggedColumnWidth(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        setActiveDraggedColumnKey(String(event.active.id));\n        setActiveDraggedColumnWidth(event.active.rect.current.initial?.width ?? undefined);\n    };\n\n    const handleDragCancel = (_event: DragCancelEvent) => {\n        clearActiveDraggedColumn();\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        clearActiveDraggedColumn();\n        layoutContext.onColumnDragEnd?.(event);\n    };\n\n    const content =\n        canDragColumns && layoutContext.draggableColumnKeys ? (\n            <DndContext\n                sensors={sensors}\n                collisionDetection={resolveColumnCollisionDetection}\n                modifiers={[restrictToHorizontalAxis]}\n                onDragStart={handleDragStart}\n                onDragCancel={handleDragCancel}\n                onDragEnd={handleDragEnd}\n            >\n                <SortableContext items={layoutContext.draggableColumnKeys} strategy={horizontalListSortingStrategy}>\n                    {children}\n                </SortableContext>\n                <DragOverlay adjustScale={false} dropAnimation={null}>\n                    <TableHeaderDragOverlay\n                        column={activeDraggedColumn}\n                        header={overlayHeader}\n                        showSelectionColumn={interactionContext.showSelectionColumn}\n                        width={activeDraggedColumnWidth}\n                    />\n                </DragOverlay>\n            </DndContext>\n        ) : (\n            children\n        );\n\n    if (!renderConfigContext.isTableView) {\n        return (\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    {content}\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        );\n    }\n\n    return (\n        <div {...remainingProps} className='table-head' role='rowgroup' ref={layoutContext.tableHeadRowRef}>\n            <TableSectionContext.Provider value='header'>\n                <TableHeaderContext.Provider\n                    value={{\n                        nextHeaderRowIndex: () => {\n                            const nextHeaderRowIndex = headerRowIndexRef.current;\n                            headerRowIndexRef.current += 1;\n                            return nextHeaderRowIndex;\n                        },\n                    }}\n                >\n                    <div\n                        className={classNames(\n                            'table-head-grid',\n                            interactionContext.selectionHeaderContent && 'table-head-grid-custom-selection',\n                            className\n                        )}\n                        role={headerRowCount === 1 ? 'row' : 'presentation'}\n                        style={{ gridTemplateRows: `repeat(${headerRowCount}, auto)` }}\n                    >\n                        {interactionContext.showSelectionColumn && (\n                            <TableHeaderSelectionCell\n                                isAllSelected={interactionContext.isAllRowsSelected}\n                                isSomeRowsSelected={interactionContext.isSomeRowsSelected}\n                                onToggleAllSelection={interactionContext.onToggleAllSelection}\n                                rowCount={headerRowCount}\n                                selectionHeaderContent={interactionContext.selectionHeaderContent}\n                            />\n                        )}\n                        {content}\n                    </div>\n                </TableHeaderContext.Provider>\n            </TableSectionContext.Provider>\n        </div>\n    );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","props","children","className","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","sensors","useSensors","useSensor","PointerSensor","headerRowIndexRef","useRef","activeDraggedColumnKey","setActiveDraggedColumnKey","useState","activeDraggedColumnWidth","setActiveDraggedColumnWidth","canDragColumns","header","headerRowCount","overlayHeader","activeDraggedColumn","column","clearActiveDraggedColumn","handleDragStart","event","handleDragCancel","_event","handleDragEnd","content","jsxs","DndContext","resolveColumnCollisionDetection","restrictToHorizontalAxis","jsx","SortableContext","horizontalListSortingStrategy","DragOverlay","TableHeaderDragOverlay","TableSectionContext","TableHeaderContext","nextHeaderRowIndex","classNames","TableHeaderSelectionCell"],"mappings":"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"}

package/components/table/TableHeaderColumn.d.ts

@@ -0,0 +1,76 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { TableColumnDefinition, TableHtmlAttributes, TableRowData, TableVerticalAlign } from './Table.types';
+export type TableHeaderColumnProps<RowType extends TableRowData> = Omit<TableColumnDefinition<RowType>, 'className' | 'draggable' | 'filter' | 'headerClassName' | 'icon' | 'key' | 'label' | 'resizeable'> & PropsWithChildren<{
+    /**
+     * Column key for leaf header columns.
+     */
+    columnKey?: string;
+    /**
+     * Optional explicit header label.
+     * If omitted, `children` are used.
+     */
+    label?: ReactNode;
+    /**
+     * Optional rioglyph class rendered before the header label in table view.
+     */
+    icon?: string;
+    /**
+     * Optional custom filter control rendered next to the header label.
+     *
+     * Intended for table-specific filter dropdowns such as `TableColumnFilter`.
+     */
+    filter?: ReactNode;
+    /**
+     * Hides the visible label in table view while preserving `label` for
+     * dropdowns, cards, and mobile metadata.
+     *
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Number of columns this header cell spans.
+     *
+     * @default 1
+     */
+    colSpan?: number;
+    /**
+     * Number of header rows this cell spans.
+     *
+     * @default 1
+     */
+    rowSpan?: number;
+    /**
+     * Additional class names for this header cell only.
+     */
+    className?: string;
+    /**
+     * Additional class names for this header cell only.
+     */
+    headerClassName?: string;
+    /**
+     * Enables drag-reordering for this header column in `TABLE` view.
+     *
+     * When `columnOrder` and `onColumnOrderChange` are provided, reordering is controlled from the outside.
+     * When they are omitted, the table keeps the reordered state internally.
+     *
+     * @default false
+     */
+    draggable?: boolean;
+    /**
+     * Enables resizing for this header column in `TABLE` view.
+     *
+     * When `onColumnResize` is provided, resized widths are controlled from the outside.
+     * When it is omitted, the table keeps resized widths internally.
+     *
+     * @default false
+     */
+    resizeable?: boolean;
+    /**
+     * Vertical alignment for this header cell.
+     *
+     * @default 'middle'
+     */
+    verticalAlign?: TableVerticalAlign;
+} & TableHtmlAttributes>;
+declare const TableHeaderColumn: <RowType extends TableRowData = TableRowData>(props: TableHeaderColumnProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export default TableHeaderColumn;

package/components/table/TableHeaderColumn.js

@@ -0,0 +1,81 @@
+import { jsx as i } from "react/jsx-runtime";
+import { useId as j } from "react";
+import E from "../../utils/classNames.js";
+import M from "./render/header/TableDraggableHeaderCell.js";
+import V from "./render/header/TableStaticHeaderCell.js";
+import { useOptionalTableInteractionContext as q } from "./context/TableInteractionContext.js";
+import { useOptionalTableLayoutContext as B } from "./context/TableLayoutContext.js";
+import { useOptionalTableRenderConfigContext as F } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as G, useTableHeaderRowContext as J } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as Q } from "./context/TableRenderContext.js";
+const le = (m) => {
+  const {
+    children: u,
+    className: c,
+    colSpan: C = 1,
+    columnKey: d,
+    draggable: b,
+    filter: h,
+    headerClassName: p,
+    hideLabel: f,
+    hideOnMobile: g,
+    horizontalAlign: R,
+    icon: y,
+    label: S,
+    maxResizeWidth: x,
+    mobileLabel: z,
+    minResizeWidth: w,
+    resizeable: T,
+    rowSpan: K = 1,
+    sortable: O,
+    verticalAlign: L,
+    width: D,
+    ...H
+  } = m, n = Q(), r = F(), t = q(), o = B(), N = G(), k = J(), a = j();
+  if (!n || !r || !t || !o || N !== "header")
+    return null;
+  const A = k?.row ?? 1;
+  if (n.renderDraft.headerColumns.push({
+    id: a,
+    columnKey: d,
+    label: S ?? u ?? "",
+    icon: y,
+    filter: h,
+    hideLabel: f,
+    width: D,
+    mobileLabel: z,
+    horizontalAlign: R,
+    verticalAlign: L,
+    headerClassName: E(c, p),
+    hideOnMobile: g,
+    sortable: O,
+    draggable: b,
+    resizeable: T,
+    minResizeWidth: w,
+    maxResizeWidth: x,
+    row: A,
+    colSpan: C,
+    rowSpan: K
+  }), !r.isTableView)
+    return null;
+  const l = n.header, e = l?.columns.find((P) => String(P.key) === a);
+  if (!l || !e)
+    return null;
+  const I = !!e.columnKey && e.colSpan === 1 && e.columnKey !== o.lastResizableColumnKey && e.resizeable === !0 && !!o.onColumnResizeStart, W = !!e.columnKey && e.colSpan === 1 && (o.draggableColumnKeys?.length ?? 0) > 1 && e.draggable === !0 && !!o.onColumnDragEnd, v = !!e.columnKey && o.resettableColumnKeys?.has(e.columnKey), s = {
+    column: e,
+    header: l,
+    htmlAttributes: H,
+    hasResettableWidth: v,
+    isResizable: I,
+    onColumnResizeReset: o.onColumnResizeReset,
+    onColumnResizeStart: o.onColumnResizeStart,
+    onSortChange: t.onSortChange,
+    showSelectionColumn: t.showSelectionColumn,
+    stickyLeftColumnCount: o.stickyLeftColumnCount
+  };
+  return W ? /* @__PURE__ */ i(M, { ...s }) : /* @__PURE__ */ i(V, { ...s });
+};
+export {
+  le as default
+};
+//# sourceMappingURL=TableHeaderColumn.js.map

package/components/table/TableHeaderColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderColumn.js","sources":["../../../src/components/table/TableHeaderColumn.tsx"],"sourcesContent":["import { useId, type PropsWithChildren, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { TableColumnDefinition, TableHtmlAttributes, TableRowData, TableVerticalAlign } from './Table.types';\nimport DraggableTableHeaderCell from './render/header/TableDraggableHeaderCell';\nimport StaticTableHeaderCell from './render/header/TableStaticHeaderCell';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableLayoutContext } from './context/TableLayoutContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport { useOptionalTableSection, useTableHeaderRowContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderColumnProps<RowType extends TableRowData> = Omit<\n    TableColumnDefinition<RowType>,\n    'className' | 'draggable' | 'filter' | 'headerClassName' | 'icon' | 'key' | 'label' | 'resizeable'\n> &\n    PropsWithChildren<\n        {\n            /**\n             * Column key for leaf header columns.\n             */\n            columnKey?: string;\n\n            /**\n             * Optional explicit header label.\n             * If omitted, `children` are used.\n             */\n            label?: ReactNode;\n\n            /**\n             * Optional rioglyph class rendered before the header label in table view.\n             */\n            icon?: string;\n\n            /**\n             * Optional custom filter control rendered next to the header label.\n             *\n             * Intended for table-specific filter dropdowns such as `TableColumnFilter`.\n             */\n            filter?: ReactNode;\n\n            /**\n             * Hides the visible label in table view while preserving `label` for\n             * dropdowns, cards, and mobile metadata.\n             *\n             * @default false\n             */\n            hideLabel?: boolean;\n\n            /**\n             * Number of columns this header cell spans.\n             *\n             * @default 1\n             */\n            colSpan?: number;\n\n            /**\n             * Number of header rows this cell spans.\n             *\n             * @default 1\n             */\n            rowSpan?: number;\n\n            /**\n             * Additional class names for this header cell only.\n             */\n            className?: string;\n\n            /**\n             * Additional class names for this header cell only.\n             */\n            headerClassName?: string;\n\n            /**\n             * Enables drag-reordering for this header column in `TABLE` view.\n             *\n             * When `columnOrder` and `onColumnOrderChange` are provided, reordering is controlled from the outside.\n             * When they are omitted, the table keeps the reordered state internally.\n             *\n             * @default false\n             */\n            draggable?: boolean;\n\n            /**\n             * Enables resizing for this header column in `TABLE` view.\n             *\n             * When `onColumnResize` is provided, resized widths are controlled from the outside.\n             * When it is omitted, the table keeps resized widths internally.\n             *\n             * @default false\n             */\n            resizeable?: boolean;\n\n            /**\n             * Vertical alignment for this header cell.\n             *\n             * @default 'middle'\n             */\n            verticalAlign?: TableVerticalAlign;\n        } & TableHtmlAttributes\n    >;\n\nconst TableHeaderColumn = <RowType extends TableRowData = TableRowData>(props: TableHeaderColumnProps<RowType>) => {\n    const {\n        children,\n        className,\n        colSpan = 1,\n        columnKey,\n        draggable,\n        filter,\n        headerClassName,\n        hideLabel,\n        hideOnMobile,\n        horizontalAlign,\n        icon,\n        label,\n        maxResizeWidth,\n        mobileLabel,\n        minResizeWidth,\n        resizeable,\n        rowSpan = 1,\n        sortable,\n        verticalAlign,\n        width,\n        ...remainingProps\n    } = props;\n\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const layoutContext = useOptionalTableLayoutContext();\n    const section = useOptionalTableSection();\n    const headerRowContext = useTableHeaderRowContext();\n    const columnId = useId();\n\n    if (!renderContext || !renderConfigContext || !interactionContext || !layoutContext || section !== 'header') {\n        return null;\n    }\n\n    const resolvedRow = headerRowContext?.row ?? 1;\n\n    renderContext.renderDraft.headerColumns.push({\n        id: columnId,\n        columnKey,\n        label: label ?? children ?? '',\n        icon,\n        filter,\n        hideLabel,\n        width,\n        mobileLabel,\n        horizontalAlign,\n        verticalAlign,\n        headerClassName: classNames(className, headerClassName),\n        hideOnMobile,\n        sortable,\n        draggable,\n        resizeable,\n        minResizeWidth,\n        maxResizeWidth,\n        row: resolvedRow,\n        colSpan,\n        rowSpan,\n    });\n\n    if (!renderConfigContext.isTableView) {\n        return null;\n    }\n\n    const header = renderContext.header;\n    const headerColumn = header?.columns.find(column => String(column.key) === columnId);\n\n    if (!header || !headerColumn) {\n        return null;\n    }\n\n    const isResizable =\n        !!headerColumn.columnKey &&\n        headerColumn.colSpan === 1 &&\n        headerColumn.columnKey !== layoutContext.lastResizableColumnKey &&\n        headerColumn.resizeable === true &&\n        !!layoutContext.onColumnResizeStart;\n\n    const isDraggable =\n        !!headerColumn.columnKey &&\n        headerColumn.colSpan === 1 &&\n        (layoutContext.draggableColumnKeys?.length ?? 0) > 1 &&\n        headerColumn.draggable === true &&\n        !!layoutContext.onColumnDragEnd;\n\n    const hasResettableWidth =\n        !!headerColumn.columnKey && layoutContext.resettableColumnKeys?.has(headerColumn.columnKey);\n\n    const sharedProps = {\n        column: headerColumn,\n        header,\n        htmlAttributes: remainingProps,\n        hasResettableWidth,\n        isResizable,\n        onColumnResizeReset: layoutContext.onColumnResizeReset,\n        onColumnResizeStart: layoutContext.onColumnResizeStart,\n        onSortChange: interactionContext.onSortChange,\n        showSelectionColumn: interactionContext.showSelectionColumn,\n        stickyLeftColumnCount: layoutContext.stickyLeftColumnCount,\n    };\n\n    return isDraggable ? <DraggableTableHeaderCell {...sharedProps} /> : <StaticTableHeaderCell {...sharedProps} />;\n};\n\nexport default TableHeaderColumn;\n"],"names":["TableHeaderColumn","props","children","className","colSpan","columnKey","draggable","filter","headerClassName","hideLabel","hideOnMobile","horizontalAlign","icon","label","maxResizeWidth","mobileLabel","minResizeWidth","resizeable","rowSpan","sortable","verticalAlign","width","remainingProps","renderContext","useOptionalTableRenderContext","renderConfigContext","useOptionalTableRenderConfigContext","interactionContext","useOptionalTableInteractionContext","layoutContext","useOptionalTableLayoutContext","section","useOptionalTableSection","headerRowContext","useTableHeaderRowContext","columnId","useId","resolvedRow","classNames","header","headerColumn","column","isResizable","isDraggable","hasResettableWidth","sharedProps","DraggableTableHeaderCell","jsx","StaticTableHeaderCell"],"mappings":";;;;;;;;;;AAsGA,MAAMA,KAAoB,CAA8CC,MAA2C;AAC/G,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,QAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,WAAAC;AAAA,IACA,cAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHrB,GAEEsB,IAAgBC,EAAA,GAChBC,IAAsBC,EAAA,GACtBC,IAAqBC,EAAA,GACrBC,IAAgBC,EAAA,GAChBC,IAAUC,EAAA,GACVC,IAAmBC,EAAA,GACnBC,IAAWC,EAAA;AAEjB,MAAI,CAACb,KAAiB,CAACE,KAAuB,CAACE,KAAsB,CAACE,KAAiBE,MAAY;AAC/F,WAAO;AAGX,QAAMM,IAAcJ,GAAkB,OAAO;AAyB7C,MAvBAV,EAAc,YAAY,cAAc,KAAK;AAAA,IACzC,IAAIY;AAAA,IACJ,WAAA9B;AAAA,IACA,OAAOQ,KAASX,KAAY;AAAA,IAC5B,MAAAU;AAAA,IACA,QAAAL;AAAA,IACA,WAAAE;AAAA,IACA,OAAAY;AAAA,IACA,aAAAN;AAAA,IACA,iBAAAJ;AAAA,IACA,eAAAS;AAAA,IACA,iBAAiBkB,EAAWnC,GAAWK,CAAe;AAAA,IACtD,cAAAE;AAAA,IACA,UAAAS;AAAA,IACA,WAAAb;AAAA,IACA,YAAAW;AAAA,IACA,gBAAAD;AAAA,IACA,gBAAAF;AAAA,IACA,KAAKuB;AAAA,IACL,SAAAjC;AAAA,IACA,SAAAc;AAAA,EAAA,CACH,GAEG,CAACO,EAAoB;AACrB,WAAO;AAGX,QAAMc,IAAShB,EAAc,QACvBiB,IAAeD,GAAQ,QAAQ,KAAK,OAAU,OAAOE,EAAO,GAAG,MAAMN,CAAQ;AAEnF,MAAI,CAACI,KAAU,CAACC;AACZ,WAAO;AAGX,QAAME,IACF,CAAC,CAACF,EAAa,aACfA,EAAa,YAAY,KACzBA,EAAa,cAAcX,EAAc,0BACzCW,EAAa,eAAe,MAC5B,CAAC,CAACX,EAAc,qBAEdc,IACF,CAAC,CAACH,EAAa,aACfA,EAAa,YAAY,MACxBX,EAAc,qBAAqB,UAAU,KAAK,KACnDW,EAAa,cAAc,MAC3B,CAAC,CAACX,EAAc,iBAEde,IACF,CAAC,CAACJ,EAAa,aAAaX,EAAc,sBAAsB,IAAIW,EAAa,SAAS,GAExFK,IAAc;AAAA,IAChB,QAAQL;AAAA,IACR,QAAAD;AAAA,IACA,gBAAgBjB;AAAA,IAChB,oBAAAsB;AAAA,IACA,aAAAF;AAAA,IACA,qBAAqBb,EAAc;AAAA,IACnC,qBAAqBA,EAAc;AAAA,IACnC,cAAcF,EAAmB;AAAA,IACjC,qBAAqBA,EAAmB;AAAA,IACxC,uBAAuBE,EAAc;AAAA,EAAA;AAGzC,SAAOc,sBAAeG,GAAA,EAA0B,GAAGD,GAAa,IAAK,gBAAAE,EAACC,GAAA,EAAuB,GAAGH,EAAA,CAAa;AACjH;"}

package/components/table/TableHeaderRow.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export type TableHeaderRowProps = {
+    /**
+     * Header columns rendered inside this header row.
+     */
+    children?: ReactNode;
+};
+declare const TableHeaderRow: ({ children }: TableHeaderRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableHeaderRow;

package/components/table/TableHeaderRow.js

@@ -0,0 +1,14 @@
+import { jsx as n } from "react/jsx-runtime";
+import { useTableHeaderContext as a, TableHeaderRowContext as d } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as l } from "./context/TableRenderContext.js";
+const i = ({ children: e }) => {
+  const t = l(), o = a();
+  if (!t)
+    return null;
+  const r = (o?.nextHeaderRowIndex() ?? 0) + 1;
+  return /* @__PURE__ */ n(d.Provider, { value: { row: r }, children: e });
+};
+export {
+  i as default
+};
+//# sourceMappingURL=TableHeaderRow.js.map

package/components/table/TableHeaderRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeaderRow.js","sources":["../../../src/components/table/TableHeaderRow.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { TableHeaderRowContext, useTableHeaderContext } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableHeaderRowProps = {\n    /**\n     * Header columns rendered inside this header row.\n     */\n    children?: ReactNode;\n};\n\nconst TableHeaderRow = ({ children }: TableHeaderRowProps) => {\n    const renderContext = useOptionalTableRenderContext();\n    const headerContext = useTableHeaderContext();\n\n    if (!renderContext) {\n        return null;\n    }\n\n    const row = (headerContext?.nextHeaderRowIndex() ?? 0) + 1;\n\n    return <TableHeaderRowContext.Provider value={{ row }}>{children}</TableHeaderRowContext.Provider>;\n};\n\nexport default TableHeaderRow;\n"],"names":["TableHeaderRow","children","renderContext","useOptionalTableRenderContext","headerContext","useTableHeaderContext","row","jsx","TableHeaderRowContext"],"mappings":";;;AAYA,MAAMA,IAAiB,CAAC,EAAE,UAAAC,QAAoC;AAC1D,QAAMC,IAAgBC,EAAA,GAChBC,IAAgBC,EAAA;AAEtB,MAAI,CAACH;AACD,WAAO;AAGX,QAAMI,KAAOF,GAAe,mBAAA,KAAwB,KAAK;AAEzD,SAAO,gBAAAG,EAACC,EAAsB,UAAtB,EAA+B,OAAO,EAAE,KAAAF,EAAA,GAAQ,UAAAL,GAAS;AACrE;"}

package/components/table/TableRow.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { TableHtmlAttributes, TableRowData } from './Table.types';
+export type TableRowProps<RowType extends TableRowData> = TableHtmlAttributes & Partial<RowType> & {
+    /**
+     * Disables row interaction such as hover styles, clicks, and keyboard activation.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Optional class names only for this row.
+     */
+    className?: string;
+    /**
+     * Disable table hover styling for this row.
+     */
+    noHover?: boolean;
+    /**
+     * Table row content.
+     */
+    children?: ReactNode;
+};
+declare const TableRow: <RowType extends TableRowData = TableRowData>(props: TableRowProps<RowType>) => import("react/jsx-runtime").JSX.Element | null;
+export default TableRow;

package/components/table/TableRow.js

@@ -0,0 +1,111 @@
+import { jsx as a, jsxs as D, Fragment as K } from "react/jsx-runtime";
+import { motion as A } from "motion/react";
+import { useRef as V } from "react";
+import O from "../checkbox/Checkbox.js";
+import y from "../../utils/classNames.js";
+import { resolveRowKey as j, resolveRowClassName as B } from "./model/resolveRowMeta.js";
+import { getInteractiveRowProps as H } from "./shared/getInteractiveRowProps.js";
+import { useOptionalTableInteractionContext as F } from "./context/TableInteractionContext.js";
+import { useOptionalTableRenderConfigContext as q } from "./context/TableRenderConfigContext.js";
+import { useOptionalTableSection as z, useTableBodyContext as E, extractTableHtmlAttributes as T, TableRowContext as G } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as J } from "./context/TableRenderContext.js";
+const L = (C) => {
+  const { isSelected: b, isTableView: n, onToggleSelection: p, cardCellClassName: u, disabled: i } = C;
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: y("table-cell table-selection-cell", !n && u),
+      role: "cell",
+      "aria-colindex": 1,
+      style: n ? { gridColumn: "1 / span 1" } : void 0,
+      onClick: (e) => e.stopPropagation(),
+      onKeyDown: (e) => e.stopPropagation(),
+      children: /* @__PURE__ */ a("div", { className: "table-selection-control", children: /* @__PURE__ */ a(O, { checked: b, disabled: i, onChange: p }) })
+    }
+  );
+}, te = (C) => {
+  const { children: b, disabled: n, className: p, noHover: u, ...i } = C, e = q(), w = J(), o = F(), N = z(), v = E(), m = V(0);
+  if (m.current = 0, !w || !e || !o || w.columns.length === 0 || N !== "body" || !v)
+    return null;
+  const c = i, r = v.nextRowIndex(), t = j(c, r, e.rowKey), R = typeof e.rowAnimationProps == "function" ? e.rowAnimationProps(c, r) : e.rowAnimationProps, l = H({
+    isClickable: o.isClickable && !n,
+    onRowClick: (s, d) => {
+      o.onRowClick?.(s, d), o.onActiveRowChange?.(
+        o.activeRowId === t ? void 0 : t,
+        s,
+        d
+      );
+    },
+    row: c,
+    rowIndex: r
+  }), g = o.selectedRowIdSet.has(t), P = o.showSelectionColumn && /* @__PURE__ */ a(
+    L,
+    {
+      isSelected: g,
+      isTableView: e.isTableView,
+      onToggleSelection: () => o.onToggleRowSelection?.(t),
+      cardCellClassName: e.cardClasses.cellClassName,
+      disabled: n
+    }
+  ), x = y(
+    "table-row",
+    !e.isTableView && "divider-y-1 divider-color-lighter divider-style-solid",
+    o.activeRowId === t && "table-row-active",
+    n && "table-row-disabled",
+    g && "table-row-selected",
+    l.isClickableClassName,
+    (n || u) && "table-row-no-hover",
+    !e.isTableView && e.cardClasses.rowClassName,
+    p,
+    B(e.rowClassName, c, r)
+  ), f = /* @__PURE__ */ D(K, { children: [
+    P,
+    b
+  ] }), k = {
+    ...T(i),
+    className: x,
+    "data-index": r,
+    "data-row-id": String(t),
+    onClick: l.onClick,
+    onKeyDown: l.onKeyDown,
+    role: "row",
+    tabIndex: l.tabIndex
+  }, I = {
+    ...T(i),
+    className: x,
+    "data-index": r,
+    "data-row-id": String(t),
+    onClick: l.onClick,
+    onKeyDown: l.onKeyDown,
+    role: "row",
+    tabIndex: l.tabIndex,
+    ...R
+  }, h = /* @__PURE__ */ a(
+    G.Provider,
+    {
+      value: {
+        nextColumnIndex: (s, d = 1) => {
+          if (s !== void 0 && s >= 0)
+            return m.current = s + d, s;
+          const S = m.current;
+          return m.current += d, S;
+        },
+        rowIndex: r,
+        rowId: t,
+        rowData: c
+      },
+      children: R ? /* @__PURE__ */ a(A.div, { ...I, children: f }) : /* @__PURE__ */ a("div", { ...k, children: f })
+    }
+  );
+  return w.renderDraft.bodyRows.push({
+    rowId: t,
+    rowIndex: r,
+    kind: "data",
+    disabled: n,
+    render: () => h
+  }), w.isRegisteringBodyRows ? null : h;
+};
+export {
+  te as default
+};
+//# sourceMappingURL=TableRow.js.map

package/components/table/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":["../../../src/components/table/TableRow.tsx"],"sourcesContent":["import { motion, type HTMLMotionProps } from 'motion/react';\nimport { type ReactNode, useRef } from 'react';\n\nimport Checkbox from '../checkbox/Checkbox';\nimport classNames from '../../utils/classNames';\nimport { resolveRowClassName, resolveRowKey } from './model/resolveRowMeta';\nimport { getInteractiveRowProps } from './shared/getInteractiveRowProps';\nimport type { TableHtmlAttributes, TableRowData } from './Table.types';\nimport { useOptionalTableInteractionContext } from './context/TableInteractionContext';\nimport { useOptionalTableRenderConfigContext } from './context/TableRenderConfigContext';\nimport {\n    extractTableHtmlAttributes,\n    useTableBodyContext,\n    TableRowContext,\n    useOptionalTableSection,\n} from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableRowProps<RowType extends TableRowData> = TableHtmlAttributes &\n    Partial<RowType> & {\n        /**\n         * Disables row interaction such as hover styles, clicks, and keyboard activation.\n         *\n         * @default false\n         */\n        disabled?: boolean;\n\n        /**\n         * Optional class names only for this row.\n         */\n        className?: string;\n\n        /**\n         * Disable table hover styling for this row.\n         */\n        noHover?: boolean;\n\n        /**\n         * Table row content.\n         */\n        children?: ReactNode;\n    };\n\ntype TableRowSelectionCellProps = {\n    isSelected: boolean;\n    isTableView: boolean;\n    onToggleSelection?: () => void;\n    cardCellClassName?: string;\n    disabled?: boolean;\n};\n\nconst TableRowSelectionCell = (props: TableRowSelectionCellProps) => {\n    const { isSelected, isTableView, onToggleSelection, cardCellClassName, disabled } = props;\n\n    return (\n        <div\n            className={classNames('table-cell table-selection-cell', !isTableView && cardCellClassName)}\n            role='cell'\n            aria-colindex={1}\n            style={isTableView ? { gridColumn: '1 / span 1' } : undefined}\n            onClick={event => event.stopPropagation()}\n            onKeyDown={event => event.stopPropagation()}\n        >\n            <div className='table-selection-control'>\n                <Checkbox checked={isSelected} disabled={disabled} onChange={onToggleSelection} />\n            </div>\n        </div>\n    );\n};\n\nconst TableRow = <RowType extends TableRowData = TableRowData>(props: TableRowProps<RowType>) => {\n    const { children, disabled, className, noHover, ...remainingProps } = props;\n\n    const renderConfigContext = useOptionalTableRenderConfigContext<RowType>();\n    const renderContext = useOptionalTableRenderContext<RowType>();\n    const interactionContext = useOptionalTableInteractionContext<RowType>();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    const cellIndexRef = useRef(0);\n    cellIndexRef.current = 0;\n\n    if (\n        !renderContext ||\n        !renderConfigContext ||\n        !interactionContext ||\n        renderContext.columns.length === 0 ||\n        section !== 'body' ||\n        !bodyContext\n    ) {\n        return null;\n    }\n\n    const rowData = remainingProps as RowType;\n    const rowIndex = bodyContext.nextRowIndex();\n    const rowId = resolveRowKey(rowData, rowIndex, renderConfigContext.rowKey);\n\n    const resolvedRowAnimationProps =\n        typeof renderConfigContext.rowAnimationProps === 'function'\n            ? renderConfigContext.rowAnimationProps(rowData, rowIndex)\n            : renderConfigContext.rowAnimationProps;\n\n    const interactiveRowProps = getInteractiveRowProps({\n        isClickable: interactionContext.isClickable && !disabled,\n        onRowClick: (clickedRow, clickedRowIndex) => {\n            interactionContext.onRowClick?.(clickedRow, clickedRowIndex);\n            interactionContext.onActiveRowChange?.(\n                interactionContext.activeRowId === rowId ? undefined : rowId,\n                clickedRow,\n                clickedRowIndex\n            );\n        },\n        row: rowData,\n        rowIndex,\n    });\n\n    const isSelected = interactionContext.selectedRowIdSet.has(rowId);\n    const selectionCell = interactionContext.showSelectionColumn && (\n        <TableRowSelectionCell\n            isSelected={isSelected}\n            isTableView={renderConfigContext.isTableView}\n            onToggleSelection={() => interactionContext.onToggleRowSelection?.(rowId)}\n            cardCellClassName={renderConfigContext.cardClasses.cellClassName}\n            disabled={disabled}\n        />\n    );\n\n    const rowClassName = classNames(\n        'table-row',\n        !renderConfigContext.isTableView && 'divider-y-1 divider-color-lighter divider-style-solid',\n        interactionContext.activeRowId === rowId && 'table-row-active',\n        disabled && 'table-row-disabled',\n        isSelected && 'table-row-selected',\n        interactiveRowProps.isClickableClassName,\n        (disabled || noHover) && 'table-row-no-hover',\n        !renderConfigContext.isTableView && renderConfigContext.cardClasses.rowClassName,\n        className,\n        resolveRowClassName(renderConfigContext.rowClassName, rowData, rowIndex)\n    );\n\n    const rowContent = (\n        <>\n            {selectionCell}\n            {children}\n        </>\n    );\n\n    const staticRowProps = {\n        ...extractTableHtmlAttributes(remainingProps),\n        className: rowClassName,\n        'data-index': rowIndex,\n        'data-row-id': String(rowId),\n        onClick: interactiveRowProps.onClick,\n        onKeyDown: interactiveRowProps.onKeyDown,\n        role: 'row' as const,\n        tabIndex: interactiveRowProps.tabIndex,\n    };\n\n    const animatedRowProps = {\n        ...(extractTableHtmlAttributes(remainingProps) as Omit<\n            HTMLMotionProps<'div'>,\n            'children' | 'className' | 'data-index' | 'data-row-id' | 'onClick' | 'onKeyDown' | 'role' | 'tabIndex'\n        >),\n        className: rowClassName,\n        'data-index': rowIndex,\n        'data-row-id': String(rowId),\n        onClick: interactiveRowProps.onClick,\n        onKeyDown: interactiveRowProps.onKeyDown,\n        role: 'row' as const,\n        tabIndex: interactiveRowProps.tabIndex,\n        ...resolvedRowAnimationProps,\n    };\n\n    const rowNode = (\n        <TableRowContext.Provider\n            value={{\n                nextColumnIndex: (explicitColumnIndex, span = 1) => {\n                    if (explicitColumnIndex !== undefined && explicitColumnIndex >= 0) {\n                        cellIndexRef.current = explicitColumnIndex + span;\n                        return explicitColumnIndex;\n                    }\n\n                    const nextIndex = cellIndexRef.current;\n                    cellIndexRef.current += span;\n                    return nextIndex;\n                },\n                rowIndex,\n                rowId,\n                rowData,\n            }}\n        >\n            {resolvedRowAnimationProps ? (\n                <motion.div {...animatedRowProps}>{rowContent}</motion.div>\n            ) : (\n                <div {...staticRowProps}>{rowContent}</div>\n            )}\n        </TableRowContext.Provider>\n    );\n\n    renderContext.renderDraft.bodyRows.push({\n        rowId,\n        rowIndex,\n        kind: 'data',\n        disabled,\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableRow;\n"],"names":["TableRowSelectionCell","props","isSelected","isTableView","onToggleSelection","cardCellClassName","disabled","jsx","classNames","event","Checkbox","TableRow","children","className","noHover","remainingProps","renderConfigContext","useOptionalTableRenderConfigContext","renderContext","useOptionalTableRenderContext","interactionContext","useOptionalTableInteractionContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","cellIndexRef","useRef","rowData","rowIndex","rowId","resolveRowKey","resolvedRowAnimationProps","interactiveRowProps","getInteractiveRowProps","clickedRow","clickedRowIndex","selectionCell","rowClassName","resolveRowClassName","rowContent","jsxs","Fragment","staticRowProps","extractTableHtmlAttributes","animatedRowProps","rowNode","TableRowContext","explicitColumnIndex","span","nextIndex","motion"],"mappings":"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"}

package/components/table/TableSpacerRow.d.ts

@@ -0,0 +1,13 @@
+import { TableHtmlAttributes } from './Table.types';
+export type TableSpacerRowProps = TableHtmlAttributes & {
+    /**
+     * Optional class names only for this spacer row.
+     */
+    className?: string;
+    /**
+     * Disable table hover styling for this row.
+     */
+    noHover?: boolean;
+};
+declare const TableSpacerRow: (props: TableSpacerRowProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TableSpacerRow;

package/components/table/TableSpacerRow.js

@@ -0,0 +1,29 @@
+import { jsx as n } from "react/jsx-runtime";
+import d from "../../utils/classNames.js";
+import { useOptionalTableSection as p, useTableBodyContext as m } from "./context/TableStructureContext.js";
+import { useOptionalTableRenderContext as b } from "./context/TableRenderContext.js";
+const R = (s) => {
+  const { className: a, noHover: l, ...c } = s, e = b(), i = p(), r = m();
+  if (!e || e.columns.length === 0 || i !== "body" || !r)
+    return null;
+  const o = r.nextRowIndex(), t = /* @__PURE__ */ n(
+    "div",
+    {
+      ...c,
+      className: d("table-row table-row-spacer", l && "table-row-no-hover", a),
+      "data-index": o,
+      role: "presentation",
+      children: /* @__PURE__ */ n("div", { className: "table-cell table-spacer-cell", role: "presentation" })
+    }
+  );
+  return e.renderDraft.bodyRows.push({
+    rowId: `spacer-${o}`,
+    rowIndex: o,
+    kind: "spacer",
+    render: () => t
+  }), e.isRegisteringBodyRows ? null : t;
+};
+export {
+  R as default
+};
+//# sourceMappingURL=TableSpacerRow.js.map

package/components/table/TableSpacerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableSpacerRow.js","sources":["../../../src/components/table/TableSpacerRow.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport type { TableHtmlAttributes } from './Table.types';\nimport { useTableBodyContext, useOptionalTableSection } from './context/TableStructureContext';\nimport { useOptionalTableRenderContext } from './context/TableRenderContext';\n\nexport type TableSpacerRowProps = TableHtmlAttributes & {\n    /**\n     * Optional class names only for this spacer row.\n     */\n    className?: string;\n\n    /**\n     * Disable table hover styling for this row.\n     */\n    noHover?: boolean;\n};\n\nconst TableSpacerRow = (props: TableSpacerRowProps) => {\n    const { className, noHover, ...remainingProps } = props;\n\n    const renderContext = useOptionalTableRenderContext();\n    const section = useOptionalTableSection();\n    const bodyContext = useTableBodyContext();\n\n    if (!renderContext || renderContext.columns.length === 0 || section !== 'body' || !bodyContext) {\n        return null;\n    }\n\n    const rowIndex = bodyContext.nextRowIndex();\n\n    const rowNode = (\n        <div\n            {...remainingProps}\n            className={classNames('table-row table-row-spacer', noHover && 'table-row-no-hover', className)}\n            data-index={rowIndex}\n            role='presentation'\n        >\n            <div className='table-cell table-spacer-cell' role='presentation' />\n        </div>\n    );\n\n    renderContext.renderDraft.bodyRows.push({\n        rowId: `spacer-${rowIndex}`,\n        rowIndex,\n        kind: 'spacer',\n        render: () => rowNode,\n    });\n\n    return renderContext.isRegisteringBodyRows ? null : rowNode;\n};\n\nexport default TableSpacerRow;\n"],"names":["TableSpacerRow","props","className","noHover","remainingProps","renderContext","useOptionalTableRenderContext","section","useOptionalTableSection","bodyContext","useTableBodyContext","rowIndex","rowNode","jsx","classNames"],"mappings":";;;;AAiBA,MAAMA,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,WAAAC,GAAW,SAAAC,GAAS,GAAGC,MAAmBH,GAE5CI,IAAgBC,EAAA,GAChBC,IAAUC,EAAA,GACVC,IAAcC,EAAA;AAEpB,MAAI,CAACL,KAAiBA,EAAc,QAAQ,WAAW,KAAKE,MAAY,UAAU,CAACE;AAC/E,WAAO;AAGX,QAAME,IAAWF,EAAY,aAAA,GAEvBG,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGT;AAAA,MACJ,WAAWU,EAAW,8BAA8BX,KAAW,sBAAsBD,CAAS;AAAA,MAC9F,cAAYS;AAAA,MACZ,MAAK;AAAA,MAEL,UAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,gCAA+B,MAAK,eAAA,CAAe;AAAA,IAAA;AAAA,EAAA;AAI1E,SAAAR,EAAc,YAAY,SAAS,KAAK;AAAA,IACpC,OAAO,UAAUM,CAAQ;AAAA,IACzB,UAAAA;AAAA,IACA,MAAM;AAAA,IACN,QAAQ,MAAMC;AAAA,EAAA,CACjB,GAEMP,EAAc,wBAAwB,OAAOO;AACxD;"}

package/components/table/TableToolbar.d.ts

@@ -1,4 +1,5 @@
 import { PropsWithChildren } from 'react';
+import { default as TableToolbarColumn } from './TableToolbarColumn';
 export type TableToolbarProps = {
     /**
      * Optional class names for the wrapper element.
@@ -7,3 +8,5 @@ export type TableToolbarProps = {
 };
 declare const TableToolbar: ({ className, children }: PropsWithChildren<TableToolbarProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableToolbar;
+export { TableToolbarColumn };
+export type { TableToolbarColumnHorizontalAlign, TableToolbarColumnProps, TableToolbarColumnVerticalAlign, } from './TableToolbarColumn';

package/components/table/TableToolbar.js

@@ -1,7 +1,52 @@
-import { jsx as s } from "react/jsx-runtime";
-import l from "../../utils/classNames.js";
-const e = ({ className: a, children: o }) => /* @__PURE__ */ s("div", { className: l("table-toolbar", a), children: o });
+import { jsx as s, jsxs as T } from "react/jsx-runtime";
+import { useRef as f, useState as v, useLayoutEffect as x, Children as y, isValidElement as b, Fragment as z } from "react";
+import N from "../../hooks/useResizeObserver.js";
+import p from "../../utils/classNames.js";
+import w from "./TableToolbarColumn.js";
+const A = (o) => b(o) && o.type === w, h = (o) => {
+  const t = [];
+  for (const e of y.toArray(o)) {
+    if (b(e) && e.type === z) {
+      const r = h(e.props.children);
+      if (!r)
+        return null;
+      t.push(...r);
+      continue;
+    }
+    if (!A(e))
+      return null;
+    t.push(e);
+  }
+  return t;
+}, u = (o) => {
+  if (!o)
+    return !1;
+  const t = Array.from(o.children);
+  if (t.length < 2)
+    return !1;
+  const e = (t[0]?.offsetTop ?? 0) + (t[0]?.offsetHeight ?? 0);
+  return t.some((r) => r.offsetTop + r.offsetHeight !== e);
+}, j = ({ className: o, children: t }) => {
+  const e = f(null), r = f(null), c = f(null), [g, d] = v(!1), [m, , { inlineSize: C }] = N(), n = h(t), a = (n ?? []).filter((l) => l.props.horizontalAlign !== "right"), i = (n ?? []).filter((l) => l.props.horizontalAlign === "right");
+  return x(() => {
+    const l = e.current;
+    l?.classList.add("table-toolbar-measuring");
+    const R = u(m.current) || u(r.current) || u(c.current);
+    l?.classList.remove("table-toolbar-measuring"), d(R);
+  }, [t, a.length, i.length, C]), n?.length ? /* @__PURE__ */ s(
+    "div",
+    {
+      className: p("table-toolbar", g && "table-toolbar-has-wrap", o),
+      ref: e,
+      children: /* @__PURE__ */ T("div", { className: "table-toolbar-container", ref: m, children: [
+        a.length > 0 && /* @__PURE__ */ s("div", { className: "table-toolbar-group-left", ref: r, children: a }),
+        i.length > 0 && /* @__PURE__ */ s("div", { className: "table-toolbar-group-right", ref: c, children: i })
+      ] })
+    }
+  ) : /* @__PURE__ */ s("div", { className: p("table-toolbar", o), children: t });
+};
 export {
-  e as default
+  w as TableToolbarColumn,
+  j as default
 };
 //# sourceMappingURL=TableToolbar.js.map