@kiefer-tek/sophea-design-system 0.15.0

package/dist/table/index.js

@@ -0,0 +1,1750 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo, useCallback, useLayoutEffect, createContext, useContext, forwardRef, memo, Fragment as Fragment$1 } from "react";
+import { getCoreRowModel, getSortedRowModel, getPaginationRowModel, getFilteredRowModel, useReactTable, flexRender, createColumnHelper } from "@tanstack/react-table";
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, closestCenter, DndContext, DragOverlay } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates, arrayMove, useSortable, SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { C as Checkbox, c as Pagination, f as Popover, j as PopoverTrigger, i as PopoverContent, S as Separator, V as VisuallyHidden } from "../chunks/VisuallyHidden-DNar1Eli.js";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+import { CSS } from "@dnd-kit/utilities";
+import { f as ForwardRef, F as ForwardRef$1, b as ForwardRef$2, d as ForwardRef$3, e as ForwardRef$4, h as ForwardRef$5, g as ForwardRef$6, a as ForwardRef$7 } from "../chunks/XCircle-CoMtPyVN.js";
+function toSortDirection(dir) {
+  if (dir === "asc") return "ascending";
+  if (dir === "desc") return "descending";
+  return "none";
+}
+function useDataTable(options) {
+  const {
+    data,
+    columns,
+    pageSize: pageSizeOption = 10,
+    enableRowSelection = true,
+    enableColumnResizing = true,
+    columnResizeMode = "onChange",
+    initialSorting = [],
+    initialColumnVisibility = {},
+    initialRowSelection = {},
+    initialViewSelected = false,
+    getRowId,
+    onSelectionChange,
+    searchTerm,
+    serverSide,
+    tableOptions
+  } = options;
+  const isServerSide = !!serverSide;
+  const [sorting, setSorting] = useState(initialSorting);
+  const [rowSelection, setRowSelection] = useState(initialRowSelection);
+  const [columnSizing, setColumnSizing] = useState({});
+  const [columnVisibility, setColumnVisibility] = useState(
+    initialColumnVisibility
+  );
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: pageSizeOption
+  });
+  const initialSelectedIds = initialViewSelected && Object.keys(initialRowSelection).length > 0 ? new Set(Object.keys(initialRowSelection)) : null;
+  const [globalFilter, setGlobalFilter] = useState({
+    selectedIds: initialSelectedIds,
+    searchTerm: ""
+  });
+  useEffect(() => {
+    setPagination((prev) => ({
+      ...prev,
+      pageSize: pageSizeOption,
+      pageIndex: 0
+    }));
+  }, [pageSizeOption]);
+  const preSearchPageRef = useRef(0);
+  useEffect(() => {
+    if (isServerSide) return;
+    const term = searchTerm ?? "";
+    const wasSearching = !!globalFilter.searchTerm;
+    if (!wasSearching && term) {
+      preSearchPageRef.current = pagination.pageIndex;
+      setPagination((p) => ({ ...p, pageIndex: 0 }));
+    } else if (wasSearching && !term) {
+      setPagination((p) => ({ ...p, pageIndex: preSearchPageRef.current }));
+    }
+    setGlobalFilter((prev) => ({ ...prev, searchTerm: term }));
+  }, [searchTerm, isServerSide]);
+  const serverSideRef = useRef(serverSide);
+  serverSideRef.current = serverSide;
+  useEffect(() => {
+    if (!isServerSide) return;
+    serverSideRef.current.onSortingChange(sorting);
+  }, [sorting, isServerSide]);
+  useEffect(() => {
+    if (!isServerSide) return;
+    serverSideRef.current.onPaginationChange(
+      pagination.pageIndex,
+      pagination.pageSize
+    );
+  }, [pagination.pageIndex, pagination.pageSize, isServerSide]);
+  useEffect(() => {
+    if (!isServerSide) return;
+    setPagination((p) => ({ ...p, pageIndex: 0 }));
+    serverSideRef.current.onSearchTermChange(searchTerm ?? "");
+  }, [searchTerm, isServerSide]);
+  const serverPageCount = isServerSide ? isFinite(pagination.pageSize) && pagination.pageSize > 0 ? Math.ceil((serverSide.totalItems || 0) / pagination.pageSize) : 1 : void 0;
+  const tableOpts = {
+    data,
+    columns,
+    getRowId,
+    state: {
+      sorting,
+      rowSelection,
+      columnSizing,
+      columnVisibility,
+      pagination,
+      ...isServerSide ? {} : { globalFilter }
+    },
+    onSortingChange: isServerSide ? (updater) => {
+      setSorting(updater);
+      setPagination((p) => ({ ...p, pageIndex: 0 }));
+    } : setSorting,
+    onRowSelectionChange: setRowSelection,
+    onColumnSizingChange: setColumnSizing,
+    onColumnVisibilityChange: setColumnVisibility,
+    onPaginationChange: setPagination,
+    getCoreRowModel: getCoreRowModel(),
+    // We manage page resets explicitly (search enter/clear, view mode,
+    // pageSize change) so disable TanStack's auto-reset which would
+    // clobber our restored page index when the filter changes.
+    autoResetPageIndex: false,
+    columnResizeMode,
+    enableRowSelection,
+    enableColumnResizing,
+    ...tableOptions
+  };
+  if (isServerSide) {
+    tableOpts.manualPagination = true;
+    tableOpts.manualSorting = true;
+    tableOpts.manualFiltering = true;
+    tableOpts.pageCount = serverPageCount;
+  } else {
+    tableOpts.onGlobalFilterChange = setGlobalFilter;
+    tableOpts.getSortedRowModel = getSortedRowModel();
+    tableOpts.getPaginationRowModel = getPaginationRowModel();
+    tableOpts.getFilteredRowModel = getFilteredRowModel();
+    tableOpts.globalFilterFn = (row, _columnId, filterValue) => {
+      if (filterValue.selectedIds != null && !filterValue.selectedIds.has(row.id)) {
+        return false;
+      }
+      if (filterValue.searchTerm) {
+        const term = filterValue.searchTerm.toLowerCase();
+        return row.getAllCells().some((cell) => {
+          const value = cell.getValue();
+          if (value == null) return false;
+          return String(value).toLowerCase().includes(term);
+        });
+      }
+      return true;
+    };
+  }
+  const table = useReactTable(tableOpts);
+  const isAllPageRowsSelected = table.getIsAllPageRowsSelected();
+  const isSomePageRowsSelected = table.getIsSomePageRowsSelected();
+  const selectionState = isAllPageRowsSelected ? "all" : isSomePageRowsSelected ? "partial" : "none";
+  const selectedRowIds = useMemo(
+    () => Object.keys(rowSelection),
+    [rowSelection]
+  );
+  const selectedCount = selectedRowIds.length;
+  const totalPages = Math.max(1, table.getPageCount());
+  const currentPage = pagination.pageIndex + 1;
+  const hasActiveFilter = !isServerSide && (globalFilter.selectedIds != null || !!globalFilter.searchTerm);
+  const totalItems = isServerSide ? serverSide.totalItems : hasActiveFilter ? table.getPrePaginationRowModel().rows.length : data.length;
+  const isPaginated = isFinite(pagination.pageSize);
+  useEffect(() => {
+    if (isServerSide) return;
+    if (globalFilter.selectedIds == null) return;
+    const currentIds = new Set(Object.keys(rowSelection));
+    let changed = false;
+    const next = /* @__PURE__ */ new Set();
+    globalFilter.selectedIds.forEach((id) => {
+      if (currentIds.has(id)) {
+        next.add(id);
+      } else {
+        changed = true;
+      }
+    });
+    if (changed) {
+      setGlobalFilter((prev) => ({ ...prev, selectedIds: next }));
+    }
+  }, [rowSelection, isServerSide]);
+  const isFirstRenderRef = useRef(true);
+  const onSelectionChangeRef = useRef(onSelectionChange);
+  onSelectionChangeRef.current = onSelectionChange;
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      if (selectedRowIds.length > 0) {
+        onSelectionChangeRef.current?.(selectedRowIds);
+      }
+      return;
+    }
+    onSelectionChangeRef.current?.(selectedRowIds);
+  }, [selectedRowIds]);
+  const setPage = (page) => {
+    const clamped = Math.max(1, Math.min(page, totalPages));
+    setPagination((prev) => ({ ...prev, pageIndex: clamped - 1 }));
+  };
+  const clearSelection = () => {
+    table.resetRowSelection();
+  };
+  const toggleAllPageRowsSelected = (selected) => {
+    table.toggleAllPageRowsSelected(selected);
+  };
+  const toggleAllRowsSelected = (selected) => {
+    table.toggleAllRowsSelected(selected);
+  };
+  const isAllRowsSelected = table.getIsAllRowsSelected();
+  const isViewingSelected = globalFilter.selectedIds != null;
+  const enterViewMode = () => {
+    if (isServerSide) return;
+    if (selectedRowIds.length > 0) {
+      setGlobalFilter((prev) => ({
+        ...prev,
+        selectedIds: new Set(selectedRowIds)
+      }));
+      setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+    }
+  };
+  const exitViewMode = () => {
+    if (isServerSide) return;
+    setGlobalFilter((prev) => ({ ...prev, selectedIds: null }));
+    setPagination((prev) => ({ ...prev, pageIndex: 0 }));
+  };
+  return {
+    table,
+    currentPage,
+    totalPages,
+    totalItems,
+    pageSize: pagination.pageSize,
+    setPage,
+    isPaginated,
+    selectionState,
+    selectedCount,
+    selectedRowIds,
+    isAllPageRowsSelected,
+    isAllRowsSelected,
+    clearSelection,
+    toggleAllPageRowsSelected,
+    toggleAllRowsSelected,
+    isViewingSelected,
+    enterViewMode,
+    exitViewMode
+  };
+}
+function useElementWidth() {
+  const ref = useRef(null);
+  const [width, setWidth] = useState(0);
+  useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    setWidth(el.clientWidth);
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) setWidth(entry.contentRect.width);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return [ref, width];
+}
+function computeColumnWidths(containerWidth, headers, customWeights, fixedColumnIds, columnWeights, columnMinWidths) {
+  const result = {};
+  let fixedTotal = 0;
+  const dataColumns = [];
+  for (const h of headers) {
+    const baseSize = h.column.columnDef.size ?? 20;
+    if (fixedColumnIds.has(h.id)) {
+      fixedTotal += baseSize;
+    } else {
+      dataColumns.push({
+        id: h.id,
+        weight: customWeights[h.id] ?? columnWeights[h.id] ?? baseSize,
+        minWidth: columnMinWidths[h.id] ?? 50
+      });
+    }
+  }
+  const tableMinWidth = fixedTotal + dataColumns.reduce((sum, col) => sum + col.minWidth, 0);
+  const tableWidth = containerWidth > 0 ? Math.max(containerWidth, tableMinWidth) : 0;
+  if (tableWidth === 0) {
+    for (const h of headers) {
+      result[h.id] = h.column.columnDef.size ?? 20;
+    }
+    return result;
+  }
+  const available = tableWidth - fixedTotal;
+  let clampedTotal = 0;
+  const clamped = /* @__PURE__ */ new Set();
+  let stable = false;
+  while (!stable) {
+    stable = true;
+    const unclamped = dataColumns.filter((col) => !clamped.has(col.id));
+    const unclampedWeight2 = unclamped.reduce((s, c) => s + c.weight, 0);
+    const remaining = available - clampedTotal;
+    for (const col of unclamped) {
+      const proportional = remaining * (col.weight / unclampedWeight2);
+      if (proportional < col.minWidth) {
+        result[col.id] = col.minWidth;
+        clampedTotal += col.minWidth;
+        clamped.add(col.id);
+        stable = false;
+      }
+    }
+  }
+  const unclampedCols = dataColumns.filter((col) => !clamped.has(col.id));
+  const unclampedWeight = unclampedCols.reduce((s, c) => s + c.weight, 0);
+  const remainingSpace = available - clampedTotal;
+  let assigned = 0;
+  for (let i = 0; i < unclampedCols.length; i++) {
+    const col = unclampedCols[i];
+    if (i === unclampedCols.length - 1) {
+      result[col.id] = remainingSpace - assigned;
+    } else {
+      const w = Math.round(remainingSpace * (col.weight / unclampedWeight));
+      result[col.id] = w;
+      assigned += w;
+    }
+  }
+  for (const h of headers) {
+    if (fixedColumnIds.has(h.id)) {
+      result[h.id] = h.column.columnDef.size ?? 20;
+    }
+  }
+  return result;
+}
+function createSplitterResizeHandler(columnId, neighborId, startColumnWidth, startNeighborWidth, startColumnWeight, startNeighborWeight, columnMinWidth, neighborMinWidth, setter, isDraggingRef) {
+  return (event) => {
+    const startX = "touches" in event ? event.touches[0].clientX : event.clientX;
+    isDraggingRef.current = true;
+    const onMove = (e) => {
+      const currentX = "touches" in e ? e.touches[0].clientX : e.clientX;
+      const rawDelta = currentX - startX;
+      const minDelta = columnMinWidth - startColumnWidth;
+      const maxDelta = startNeighborWidth - neighborMinWidth;
+      const delta = Math.max(minDelta, Math.min(maxDelta, rawDelta));
+      setter((prev) => ({
+        ...prev,
+        [columnId]: startColumnWeight * ((startColumnWidth + delta) / startColumnWidth),
+        [neighborId]: startNeighborWeight * ((startNeighborWidth - delta) / startNeighborWidth)
+      }));
+    };
+    const onUp = () => {
+      document.removeEventListener("mousemove", onMove);
+      document.removeEventListener("mouseup", onUp);
+      document.removeEventListener("touchmove", onMove);
+      document.removeEventListener("touchend", onUp);
+      document.removeEventListener("touchcancel", onUp);
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+      isDraggingRef.current = false;
+    };
+    document.body.style.userSelect = "none";
+    document.body.style.cursor = "col-resize";
+    document.addEventListener("mousemove", onMove);
+    document.addEventListener("mouseup", onUp);
+    document.addEventListener("touchmove", onMove);
+    document.addEventListener("touchend", onUp);
+    document.addEventListener("touchcancel", onUp);
+  };
+}
+function useColumnWidths({
+  headers,
+  fixedColumnIds,
+  columnWeights = {},
+  columnMinWidths
+}) {
+  const [containerRef, containerWidth] = useElementWidth();
+  const [customWeights, setCustomWeights] = useState(
+    {}
+  );
+  const isDraggingRef = useRef(false);
+  useEffect(() => {
+    const isDragging = isDraggingRef;
+    return () => {
+      if (isDragging.current) {
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+      }
+    };
+  }, []);
+  const columnWidths = computeColumnWidths(
+    containerWidth,
+    headers,
+    customWeights,
+    fixedColumnIds,
+    columnWeights,
+    columnMinWidths
+  );
+  const createResizeHandler = useCallback(
+    (columnId, neighborId) => {
+      const header = headers.find((h) => h.id === columnId);
+      const neighbor = headers.find((h) => h.id === neighborId);
+      return createSplitterResizeHandler(
+        columnId,
+        neighborId,
+        columnWidths[columnId] ?? 0,
+        columnWidths[neighborId] ?? 0,
+        customWeights[columnId] ?? columnWeights[columnId] ?? header?.column.columnDef.size ?? 20,
+        customWeights[neighborId] ?? columnWeights[neighborId] ?? neighbor?.column.columnDef.size ?? 20,
+        columnMinWidths[columnId] ?? 50,
+        columnMinWidths[neighborId] ?? 50,
+        setCustomWeights,
+        isDraggingRef
+      );
+    },
+    [headers, columnWidths, customWeights, columnWeights, columnMinWidths]
+  );
+  return { containerRef, columnWidths, createResizeHandler };
+}
+function useDraggableRows(options) {
+  const { data, getRowId, enabled = true, onReorder } = options;
+  const [activeId, setActiveId] = useState(null);
+  const wasDraggingRef = useRef(false);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: 5 }
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const sortableItems = useMemo(
+    () => data.map((row) => getRowId(row)),
+    [data, getRowId]
+  );
+  const sortableIndexMap = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (let i = 0; i < sortableItems.length; i++) {
+      const item = sortableItems[i];
+      if (item !== void 0) {
+        map.set(item, i);
+      }
+    }
+    return map;
+  }, [sortableItems]);
+  const handleDragStart = useCallback((event) => {
+    setActiveId(String(event.active.id));
+  }, []);
+  const handleDragEnd = useCallback(
+    (event) => {
+      setActiveId(null);
+      wasDraggingRef.current = true;
+      requestAnimationFrame(() => {
+        wasDraggingRef.current = false;
+      });
+      if (event.activatorEvent instanceof PointerEvent) {
+        document.activeElement?.blur();
+      }
+      const { active, over } = event;
+      if (!over || active.id === over.id) return;
+      const oldIndex = sortableIndexMap.get(String(active.id));
+      const newIndex = sortableIndexMap.get(String(over.id));
+      if (oldIndex === void 0 || newIndex === void 0) return;
+      const reordered = arrayMove(sortableItems, oldIndex, newIndex);
+      const minIdx = Math.min(oldIndex, newIndex);
+      const maxIdx = Math.max(oldIndex, newIndex);
+      const changedOrders = {};
+      for (let i = minIdx; i <= maxIdx; i++) {
+        const id = reordered[i];
+        if (id !== void 0) {
+          changedOrders[id] = i;
+        }
+      }
+      onReorder?.(reordered, changedOrders);
+    },
+    [sortableItems, sortableIndexMap, onReorder]
+  );
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+  }, []);
+  return {
+    dndContextProps: {
+      sensors,
+      collisionDetection: closestCenter,
+      modifiers: [restrictToVerticalAxis],
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel
+    },
+    sortableItems,
+    activeId,
+    isDragging: activeId !== null,
+    isEnabled: enabled,
+    wasDraggingRef
+  };
+}
+const TableSizeContext = createContext("lg");
+function TableSizeProvider({ size, children }) {
+  return /* @__PURE__ */ jsx(TableSizeContext.Provider, { value: size, children });
+}
+function useTableSize() {
+  return useContext(TableSizeContext);
+}
+const TableElement = forwardRef(
+  function TableElement2({
+    variant = "cards",
+    selectionBehavior = "no-select",
+    width,
+    className,
+    style,
+    ...rest
+  }, ref) {
+    const size = useTableSize();
+    return /* @__PURE__ */ jsx(
+      "table",
+      {
+        ref,
+        className: ["sds-datatable-table", className].filter(Boolean).join(" "),
+        style: { ...style, width },
+        "data-fill": width ? void 0 : "",
+        "data-size": size,
+        "data-variant": variant,
+        "data-selection": selectionBehavior,
+        ...rest
+      }
+    );
+  }
+);
+const TableHeader = forwardRef(
+  function TableHeader2(props, ref) {
+    return /* @__PURE__ */ jsx("thead", { ref, ...props });
+  }
+);
+const TableBody = forwardRef(
+  function TableBody2({ dndSortable, renderDragOverlay, ...rest }, ref) {
+    return /* @__PURE__ */ jsx("tbody", { ref, ...rest });
+  }
+);
+function SortableTableRow({
+  sortableId,
+  showDragHandle = true,
+  selected,
+  disabled,
+  ref: _externalRef,
+  children,
+  className,
+  ...props
+}) {
+  const resolvedSize = useTableSize();
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    setActivatorNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({ id: sortableId });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0 : void 0
+  };
+  return /* @__PURE__ */ jsxs(
+    "tr",
+    {
+      ref: setNodeRef,
+      style,
+      className: ["sds-datatable-row", className].filter(Boolean).join(" "),
+      "data-drag-handle": showDragHandle || void 0,
+      "data-selected": selected || void 0,
+      "data-disabled": disabled || void 0,
+      ...props,
+      children: [
+        children,
+        showDragHandle && /* @__PURE__ */ jsx("td", { className: "sds-datatable-drag-cell", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            ref: setActivatorNodeRef,
+            type: "button",
+            className: "sds-datatable-drag-button",
+            "data-size": resolvedSize,
+            "aria-label": "Drag to reorder",
+            onMouseDown: (e) => e.preventDefault(),
+            ...attributes,
+            ...listeners,
+            children: /* @__PURE__ */ jsx(ForwardRef, {})
+          }
+        ) })
+      ]
+    }
+  );
+}
+function TableRow({
+  sortableId,
+  showDragHandle,
+  selected,
+  disabled,
+  ref,
+  className,
+  ...props
+}) {
+  if (sortableId) {
+    return /* @__PURE__ */ jsx(
+      SortableTableRow,
+      {
+        sortableId,
+        showDragHandle,
+        selected,
+        disabled,
+        ref,
+        className,
+        ...props
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "tr",
+    {
+      ref,
+      className: ["sds-datatable-row", className].filter(Boolean).join(" "),
+      "data-selected": selected || void 0,
+      "data-disabled": disabled || void 0,
+      ...props
+    }
+  );
+}
+const COLOR_VAR = {
+  "text-03": "var(--text-03)",
+  "text-04": "var(--text-04)"
+};
+function DataTableText({
+  font,
+  color,
+  truncate,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: `font-${font}`,
+      style: {
+        color: COLOR_VAR[color],
+        ...truncate ? {
+          display: "block",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        } : void 0
+      },
+      children
+    }
+  );
+}
+function defaultSortIcon(sorted) {
+  switch (sorted) {
+    case "ascending":
+      return ForwardRef$3;
+    case "descending":
+      return ForwardRef$2;
+    default:
+      return ForwardRef$1;
+  }
+}
+function TableHead({
+  children,
+  sorted,
+  onSort,
+  icon: iconFn = defaultSortIcon,
+  resizable,
+  onResizeStart,
+  alignment = "left",
+  width,
+  bottomBorder = true,
+  ...thProps
+}) {
+  const resolvedSize = useTableSize();
+  const isSmall = resolvedSize === "md";
+  const SortIcon = iconFn(sorted ?? "none");
+  return /* @__PURE__ */ jsxs(
+    "th",
+    {
+      ...thProps,
+      style: width != null ? { width } : void 0,
+      className: "sds-datatable-head",
+      "data-size": resolvedSize,
+      "data-align": alignment,
+      "data-bottom-border": bottomBorder || void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sds-datatable-head-row", children: [
+          /* @__PURE__ */ jsx("div", { className: "sds-datatable-head-label", children: typeof children === "string" ? /* @__PURE__ */ jsx(
+            DataTableText,
+            {
+              font: isSmall ? "secondary-action" : "main-ui-action",
+              color: "text-04",
+              truncate: true,
+              children
+            }
+          ) : children }),
+          /* @__PURE__ */ jsx("div", { className: "sds-datatable-head-sort", children: onSort && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "sds-datatable-sort-button",
+              onClick: onSort,
+              "aria-label": typeof children === "string" ? `Sort ${children}` : "Sort",
+              children: /* @__PURE__ */ jsx(SortIcon, {})
+            }
+          ) })
+        ] }),
+        resizable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            onMouseDown: onResizeStart,
+            onTouchStart: onResizeStart,
+            className: "sds-datatable-resize-handle",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(ForwardRef, {})
+          }
+        )
+      ]
+    }
+  );
+}
+function TableCell({
+  width,
+  children,
+  className,
+  style,
+  ...props
+}) {
+  const resolvedSize = useTableSize();
+  return /* @__PURE__ */ jsx(
+    "td",
+    {
+      className: ["sds-datatable-cell", className].filter(Boolean).join(" "),
+      "data-size": resolvedSize,
+      style: width != null ? { ...style, width } : style,
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: "sds-datatable-cell-inner", "data-size": resolvedSize, children })
+    }
+  );
+}
+const iconSizesMap = {
+  lg: { lg: 28, md: 24 },
+  md: { lg: 20, md: 16 }
+};
+function getOverlayState(selected, disabled) {
+  if (disabled) return selected ? "selected" : "hidden";
+  if (selected) return "selected";
+  return "hover";
+}
+function TableQualifier({
+  content,
+  disabled = false,
+  selectable = false,
+  selected = false,
+  onSelectChange,
+  icon: Icon,
+  imageSrc,
+  imageAlt = "",
+  background = false,
+  iconSize: iconSizePreset = "md"
+}) {
+  const resolvedSize = useTableSize();
+  const iconFontSize = iconSizesMap[iconSizePreset][resolvedSize];
+  const overlayState = getOverlayState(selected, disabled);
+  function renderContent() {
+    switch (content) {
+      case "icon":
+        return Icon ? /* @__PURE__ */ jsx("span", { style: { fontSize: iconFontSize, lineHeight: 0 }, children: /* @__PURE__ */ jsx(Icon, {}) }) : null;
+      case "image":
+        return imageSrc ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: imageSrc,
+            alt: imageAlt,
+            className: "sds-datatable-tq-img"
+          }
+        ) : null;
+      case "simple":
+      default:
+        return null;
+    }
+  }
+  const inner = renderContent();
+  const showBackground = background && content !== "simple";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "sds-datatable-tq",
+      "data-size": resolvedSize,
+      "data-disabled": disabled || void 0,
+      children: [
+        showBackground ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sds-datatable-tq-bg",
+            "data-selected": selected || void 0,
+            "data-disabled": disabled || void 0,
+            children: inner
+          }
+        ) : inner,
+        selectable && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sds-datatable-tq-overlay",
+            "data-content": content,
+            "data-state": content === "simple" ? void 0 : overlayState,
+            children: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                checked: selected,
+                onCheckedChange: (state) => onSelectChange?.(state === true),
+                disabled,
+                "aria-label": "Select row"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
+function QualifierContainer({
+  type,
+  children,
+  onClick
+}) {
+  const resolvedSize = useTableSize();
+  const Tag = type === "head" ? "th" : "td";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: "sds-datatable-qualifier",
+      "data-type": type,
+      "data-size": resolvedSize,
+      onClick,
+      children: /* @__PURE__ */ jsx("div", { className: "sds-datatable-qualifier-inner", children })
+    }
+  );
+}
+function ActionsContainer({
+  type,
+  children,
+  onClick
+}) {
+  const size = useTableSize();
+  const Tag = type === "head" ? "th" : "td";
+  return /* @__PURE__ */ jsx(
+    Tag,
+    {
+      className: "sds-datatable-actions",
+      "data-type": type,
+      "data-size": size,
+      onClick,
+      children: /* @__PURE__ */ jsx("div", { className: "sds-datatable-actions-inner", children })
+    }
+  );
+}
+function DragOverlayRowInner({
+  row,
+  columnWidths,
+  columnKindMap,
+  qualifierColumn,
+  isSelectable = false
+}) {
+  const tableWidth = columnWidths ? Object.values(columnWidths).reduce((sum, w) => sum + w, 0) : void 0;
+  return /* @__PURE__ */ jsxs(
+    "table",
+    {
+      className: "sds-datatable-table",
+      style: {
+        tableLayout: "fixed",
+        ...tableWidth != null ? { width: tableWidth } : { minWidth: "100%" }
+      },
+      children: [
+        columnWidths && /* @__PURE__ */ jsx("colgroup", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+          "col",
+          {
+            style: { width: columnWidths[cell.column.id] }
+          },
+          cell.column.id
+        )) }),
+        /* @__PURE__ */ jsx("tbody", { children: /* @__PURE__ */ jsx(TableRow, { selected: row.getIsSelected(), children: row.getVisibleCells().map((cell) => {
+          const colDef = columnKindMap?.get(cell.column.id);
+          if (colDef?.kind === "qualifier" && qualifierColumn) {
+            return /* @__PURE__ */ jsx(QualifierContainer, { type: "cell", children: /* @__PURE__ */ jsx(
+              TableQualifier,
+              {
+                content: qualifierColumn.content,
+                icon: qualifierColumn.getContent?.(row.original),
+                imageSrc: qualifierColumn.getImageSrc?.(row.original),
+                imageAlt: qualifierColumn.getImageAlt?.(row.original),
+                background: qualifierColumn.background,
+                iconSize: qualifierColumn.iconSize,
+                selectable: isSelectable,
+                selected: isSelectable && row.getIsSelected()
+              }
+            ) }, cell.id);
+          }
+          if (colDef?.kind === "actions") {
+            return /* @__PURE__ */ jsx(ActionsContainer, { type: "cell", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+          }
+          return /* @__PURE__ */ jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id);
+        }) }) })
+      ]
+    }
+  );
+}
+const DragOverlayRow = memo(DragOverlayRowInner);
+function getSelectionMessage(state, multi, count, isViewingSelected) {
+  if (state === "none" && !isViewingSelected) {
+    return multi ? "Select items to continue" : "Select an item to continue";
+  }
+  if (!multi) return "Item selected";
+  return `${count} item${count !== 1 ? "s" : ""} selected`;
+}
+function Footer(props) {
+  const resolvedSize = useTableSize();
+  return /* @__PURE__ */ jsxs("div", { className: "sds-datatable-footer", "data-size": resolvedSize, children: [
+    /* @__PURE__ */ jsx("div", { className: "sds-datatable-footer-left", children: props.mode === "selection" ? /* @__PURE__ */ jsx(
+      SelectionLeft,
+      {
+        selectionState: props.selectionState,
+        multiSelect: props.multiSelect,
+        selectedCount: props.selectedCount,
+        onView: props.onView,
+        isViewingSelected: props.isViewingSelected,
+        onClear: props.onClear
+      }
+    ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        SummaryLeft,
+        {
+          rangeStart: props.rangeStart,
+          rangeEnd: props.rangeEnd,
+          totalItems: props.totalItems,
+          units: props.units
+        }
+      ),
+      props.leftExtra
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "sds-datatable-footer-right", children: /* @__PURE__ */ jsx(
+      Pagination,
+      {
+        page: props.currentPage,
+        pageCount: props.totalPages,
+        onPageChange: props.onPageChange
+      }
+    ) })
+  ] });
+}
+function SelectionLeft({
+  selectionState,
+  multiSelect,
+  selectedCount,
+  onView,
+  isViewingSelected = false,
+  onClear
+}) {
+  const message = getSelectionMessage(
+    selectionState,
+    multiSelect,
+    selectedCount,
+    isViewingSelected
+  );
+  const hasSelection = selectionState !== "none";
+  const showActions = hasSelection || isViewingSelected;
+  return /* @__PURE__ */ jsxs("div", { className: "sds-datatable-footer-selection", children: [
+    /* @__PURE__ */ jsx(
+      DataTableText,
+      {
+        font: hasSelection ? "main-ui-action" : "main-ui-body",
+        color: "text-03",
+        children: message
+      }
+    ),
+    showActions && /* @__PURE__ */ jsxs("div", { className: "sds-datatable-footer-selection-actions", children: [
+      onView && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sds-datatable-footer-button",
+          "data-active": isViewingSelected || void 0,
+          onClick: onView,
+          "aria-label": "View selected",
+          "aria-pressed": isViewingSelected,
+          children: /* @__PURE__ */ jsx(ForwardRef$4, {})
+        }
+      ),
+      onClear && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "sds-datatable-footer-button",
+          onClick: onClear,
+          "aria-label": "Deselect all",
+          children: /* @__PURE__ */ jsx(ForwardRef$5, {})
+        }
+      )
+    ] })
+  ] });
+}
+function SummaryLeft({
+  rangeStart,
+  rangeEnd,
+  totalItems,
+  units
+}) {
+  const suffix = units ? ` ${units}` : "";
+  return /* @__PURE__ */ jsx("div", { className: "sds-datatable-footer-summary", children: /* @__PURE__ */ jsx(DataTableText, { font: "main-ui-body", color: "text-03", children: `Showing ${rangeStart}~${rangeEnd} of ${totalItems}${suffix}` }) });
+}
+function ColumnVisibilityPopover({
+  table,
+  columnVisibility
+}) {
+  const [open, setOpen] = useState(false);
+  const dataColumns = table.getAllLeafColumns().filter(
+    (col) => !col.id.startsWith("__") && col.id !== "qualifier" && typeof col.columnDef.header === "string" && col.columnDef.header.trim() !== ""
+  );
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sds-datatable-popover-trigger",
+        "data-open": open || void 0,
+        "aria-label": "Column options",
+        children: /* @__PURE__ */ jsx(ForwardRef$6, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", side: "bottom", withArrow: false, children: /* @__PURE__ */ jsxs("div", { className: "sds-datatable-menu", children: [
+      /* @__PURE__ */ jsx(Separator, { label: "Shown columns", decorative: false }),
+      dataColumns.map((column) => {
+        const canHide = column.getCanHide();
+        const isVisible = columnVisibility[column.id] !== false;
+        const label = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+        return /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "sds-datatable-menu-item",
+            "data-selected": isVisible || void 0,
+            "data-disabled": !canHide || void 0,
+            onClick: canHide ? () => column.toggleVisibility() : void 0,
+            children: [
+              /* @__PURE__ */ jsx(DataTableText, { font: "main-ui-body", color: "text-04", children: label }),
+              !canHide ? /* @__PURE__ */ jsx("span", { className: "sds-datatable-menu-tag", children: "Always shown" }) : isVisible ? /* @__PURE__ */ jsx("span", { className: "sds-datatable-menu-check", children: /* @__PURE__ */ jsx(ForwardRef$7, {}) }) : null
+            ]
+          },
+          column.id
+        );
+      })
+    ] }) })
+  ] });
+}
+function createColumnVisibilityColumn() {
+  return {
+    id: "__columnVisibility",
+    size: 44,
+    enableHiding: false,
+    enableSorting: false,
+    enableResizing: false,
+    header: ({ table }) => /* @__PURE__ */ jsx(
+      ColumnVisibilityPopover,
+      {
+        table,
+        columnVisibility: table.getState().columnVisibility
+      }
+    ),
+    cell: () => null
+  };
+}
+function SortMenuItem({ selected, label, onClick }) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "sds-datatable-menu-item",
+      "data-selected": selected || void 0,
+      onClick,
+      children: [
+        /* @__PURE__ */ jsx(DataTableText, { font: "main-ui-body", color: "text-04", children: label }),
+        selected ? /* @__PURE__ */ jsx("span", { className: "sds-datatable-menu-check", children: /* @__PURE__ */ jsx(ForwardRef$7, {}) }) : null
+      ]
+    }
+  );
+}
+function SortingPopover({
+  table,
+  sorting,
+  footerText,
+  ascendingLabel = "Ascending",
+  descendingLabel = "Descending"
+}) {
+  const [open, setOpen] = useState(false);
+  const sortableColumns = table.getAllLeafColumns().filter((col) => col.getCanSort());
+  const currentSort = sorting[0] ?? null;
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "sds-datatable-popover-trigger",
+        "data-open": open || void 0,
+        "aria-label": "Sort options",
+        children: /* @__PURE__ */ jsx(ForwardRef$1, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "end", side: "bottom", withArrow: false, children: /* @__PURE__ */ jsxs("div", { className: "sds-datatable-menu", children: [
+      /* @__PURE__ */ jsx(Separator, { label: "Sort by", decorative: false }),
+      /* @__PURE__ */ jsx(
+        SortMenuItem,
+        {
+          selected: currentSort === null,
+          label: "Manual ordering",
+          onClick: () => table.resetSorting()
+        }
+      ),
+      sortableColumns.map((column) => {
+        const isSorted = currentSort?.id === column.id;
+        const label = typeof column.columnDef.header === "string" ? column.columnDef.header : column.id;
+        return /* @__PURE__ */ jsx(
+          SortMenuItem,
+          {
+            selected: isSorted,
+            label,
+            onClick: () => {
+              if (isSorted) {
+                table.resetSorting();
+                return;
+              }
+              column.toggleSorting(false);
+            }
+          },
+          column.id
+        );
+      }),
+      currentSort !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Separator, { label: "Sorting order", decorative: false }),
+        /* @__PURE__ */ jsx(
+          SortMenuItem,
+          {
+            selected: !currentSort.desc,
+            label: ascendingLabel,
+            onClick: () => table.setSorting([{ id: currentSort.id, desc: false }])
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SortMenuItem,
+          {
+            selected: currentSort.desc,
+            label: descendingLabel,
+            onClick: () => table.setSorting([{ id: currentSort.id, desc: true }])
+          }
+        )
+      ] }),
+      footerText ? /* @__PURE__ */ jsx("div", { className: "sds-datatable-menu-footer", children: /* @__PURE__ */ jsx(DataTableText, { font: "secondary-body", color: "text-03", children: footerText }) }) : null
+    ] }) })
+  ] });
+}
+function createSortingColumn(options) {
+  return {
+    id: "__sorting",
+    size: 44,
+    enableHiding: false,
+    enableSorting: false,
+    enableResizing: false,
+    header: ({ table }) => /* @__PURE__ */ jsx(
+      SortingPopover,
+      {
+        table,
+        sorting: table.getState().sorting,
+        footerText: options?.footerText,
+        ascendingLabel: options?.ascendingLabel,
+        descendingLabel: options?.descendingLabel
+      }
+    ),
+    cell: () => null
+  };
+}
+function processColumns(columns, size) {
+  const tanstackColumns = [];
+  const fixedColumnIds = /* @__PURE__ */ new Set();
+  const columnWeights = {};
+  const columnMinWidths = {};
+  const columnKindMap = /* @__PURE__ */ new Map();
+  let qualifierColumn = null;
+  let firstDataColumnSeen = false;
+  for (const col of columns) {
+    const resolvedWidth = typeof col.width === "function" ? col.width(size) : col.width;
+    const clonedDef = {
+      ...col.def,
+      id: col.id,
+      size: "fixed" in resolvedWidth ? resolvedWidth.fixed : resolvedWidth.weight
+    };
+    if (col.kind === "data" && !firstDataColumnSeen) {
+      firstDataColumnSeen = true;
+      clonedDef.enableHiding = false;
+    }
+    tanstackColumns.push(clonedDef);
+    const id = col.id;
+    columnKindMap.set(id, col);
+    if ("fixed" in resolvedWidth) {
+      fixedColumnIds.add(id);
+    } else {
+      columnWeights[id] = resolvedWidth.weight;
+      columnMinWidths[id] = resolvedWidth.minWidth ?? 50;
+    }
+    if (col.kind === "qualifier") qualifierColumn = col;
+  }
+  return {
+    tanstackColumns,
+    widthConfig: { fixedColumnIds, columnWeights, columnMinWidths },
+    qualifierColumn,
+    columnKindMap
+  };
+}
+function DataTable(props) {
+  const {
+    data,
+    columns,
+    getRowId,
+    pageSize,
+    initialSorting,
+    initialColumnVisibility,
+    initialRowSelection,
+    initialViewSelected,
+    draggable,
+    expandable,
+    footer,
+    size = "lg",
+    variant = "cards",
+    selectionBehavior = "no-select",
+    onSelectionChange,
+    onRowClick,
+    searchTerm,
+    height,
+    serverSide,
+    emptyState,
+    className
+  } = props;
+  const effectivePageSize = pageSize ?? (footer ? 10 : data.length);
+  const qualifierColDef = columns.find(
+    (c) => c.kind === "qualifier"
+  );
+  const hasQualifierColumn = qualifierColDef != null && qualifierColDef.content !== "simple" || selectionBehavior === "multi-select";
+  const { tanstackColumns, widthConfig, qualifierColumn, columnKindMap } = useMemo(() => {
+    const processed = processColumns(columns, size);
+    if (!hasQualifierColumn) {
+      return {
+        ...processed,
+        tanstackColumns: processed.tanstackColumns.filter(
+          (c) => c.id !== "qualifier"
+        ),
+        widthConfig: {
+          ...processed.widthConfig,
+          fixedColumnIds: new Set(
+            Array.from(processed.widthConfig.fixedColumnIds).filter(
+              (id) => id !== "qualifier"
+            )
+          )
+        },
+        qualifierColumn: null
+      };
+    }
+    return processed;
+  }, [columns, size, hasQualifierColumn]);
+  const {
+    table,
+    currentPage,
+    totalPages,
+    totalItems,
+    setPage,
+    pageSize: resolvedPageSize,
+    selectionState,
+    selectedCount,
+    clearSelection,
+    toggleAllRowsSelected,
+    isAllRowsSelected,
+    isViewingSelected,
+    enterViewMode,
+    exitViewMode
+  } = useDataTable({
+    data,
+    columns: tanstackColumns,
+    pageSize: effectivePageSize,
+    initialSorting,
+    initialColumnVisibility,
+    initialRowSelection,
+    initialViewSelected,
+    getRowId,
+    onSelectionChange,
+    searchTerm,
+    serverSide: serverSide ? {
+      totalItems: serverSide.totalItems,
+      onSortingChange: serverSide.onSortingChange,
+      onPaginationChange: serverSide.onPaginationChange,
+      onSearchTermChange: serverSide.onSearchTermChange
+    } : void 0
+  });
+  const { containerRef, columnWidths, createResizeHandler } = useColumnWidths({
+    headers: table.getHeaderGroups()[0]?.headers ?? [],
+    ...widthConfig
+  });
+  useEffect(() => {
+    if (serverSide && draggable) {
+      console.warn(
+        "DataTable: `draggable` is ignored when `serverSide` is enabled. Drag-and-drop reordering is not supported with server-side pagination."
+      );
+    }
+  }, [serverSide, draggable]);
+  const effectiveDraggable = serverSide ? void 0 : draggable;
+  const draggableReturn = useDraggableRows({
+    data,
+    getRowId,
+    enabled: !!effectiveDraggable && table.getState().sorting.length === 0,
+    onReorder: effectiveDraggable?.onReorder
+  });
+  const hasDraggable = !!effectiveDraggable;
+  const isSelectable = selectionBehavior !== "no-select";
+  const isMultiSelect = selectionBehavior === "multi-select";
+  const showQualifierCheckbox = isSelectable;
+  const expandedControlled = expandable?.expandedIds != null;
+  const [expandedInternal, setExpandedInternal] = useState(() => {
+    const init = {};
+    for (const id of expandable?.defaultExpandedIds ?? []) init[id] = true;
+    return init;
+  });
+  const expandedMap = useMemo(() => {
+    if (!expandedControlled) return expandedInternal;
+    const m = {};
+    for (const id of expandable?.expandedIds ?? []) m[id] = true;
+    return m;
+  }, [expandedControlled, expandable?.expandedIds, expandedInternal]);
+  const expandOnRowClick = expandable ? expandable.expandOnRowClick !== false : false;
+  const canRowExpand = useCallback(
+    (rowOriginal) => !!expandable && (expandable.getRowCanExpand?.(rowOriginal) ?? true),
+    [expandable]
+  );
+  const toggleExpanded = useCallback(
+    (id) => {
+      const next = { ...expandedMap, [id]: !expandedMap[id] };
+      if (!next[id]) delete next[id];
+      if (!expandedControlled) setExpandedInternal(next);
+      expandable?.onExpandedChange?.(Object.keys(next));
+    },
+    [expandedMap, expandedControlled, expandable]
+  );
+  const isServerLoading = !!serverSide?.isLoading;
+  function renderFooter(footerConfig) {
+    if (isSelectable) {
+      return /* @__PURE__ */ jsx(
+        Footer,
+        {
+          mode: "selection",
+          multiSelect: isMultiSelect,
+          selectionState,
+          selectedCount,
+          onClear: footerConfig.onClear ?? (() => {
+            if (isViewingSelected) exitViewMode();
+            clearSelection();
+          }),
+          onView: !serverSide ? isViewingSelected ? exitViewMode : enterViewMode : void 0,
+          isViewingSelected,
+          pageSize: resolvedPageSize,
+          totalItems,
+          currentPage,
+          totalPages,
+          onPageChange: setPage,
+          units: footerConfig.units
+        }
+      );
+    }
+    const rangeStart = totalItems === 0 ? 0 : !isFinite(resolvedPageSize) ? 1 : (currentPage - 1) * resolvedPageSize + 1;
+    const rangeEnd = !isFinite(resolvedPageSize) ? totalItems : Math.min(currentPage * resolvedPageSize, totalItems);
+    return /* @__PURE__ */ jsx(
+      Footer,
+      {
+        mode: "summary",
+        rangeStart,
+        rangeEnd,
+        totalItems,
+        currentPage,
+        totalPages,
+        onPageChange: setPage,
+        leftExtra: footerConfig.leftExtra,
+        units: footerConfig.units
+      }
+    );
+  }
+  const scrollStyle = height != null ? {
+    maxHeight: typeof height === "number" ? `${height}px` : height,
+    overflowY: "auto"
+  } : void 0;
+  function DraggableTableInner() {
+    return /* @__PURE__ */ jsxs(
+      TableElement,
+      {
+        variant,
+        selectionBehavior,
+        width: Object.keys(columnWidths).length > 0 ? Object.values(columnWidths).reduce((sum, w) => sum + w, 0) : void 0,
+        children: [
+          /* @__PURE__ */ jsx("colgroup", { children: table.getVisibleLeafColumns().map((col) => /* @__PURE__ */ jsx(
+            "col",
+            {
+              style: columnWidths[col.id] != null ? { width: columnWidths[col.id] } : void 0
+            },
+            col.id
+          )) }),
+          /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header, headerIndex) => {
+            const colDef = columnKindMap.get(header.id);
+            if (colDef?.kind === "qualifier") {
+              return /* @__PURE__ */ jsxs(QualifierContainer, { type: "head", children: [
+                /* @__PURE__ */ jsx(VisuallyHidden, { children: "Selection" }),
+                isMultiSelect && /* @__PURE__ */ jsx(
+                  Checkbox,
+                  {
+                    label: /* @__PURE__ */ jsx(VisuallyHidden, { children: "Select all rows" }),
+                    checked: isAllRowsSelected ? true : selectedCount > 0 ? "indeterminate" : false,
+                    onCheckedChange: () => {
+                      if (!isAllRowsSelected && selectedCount > 0) {
+                        toggleAllRowsSelected(false);
+                      } else {
+                        toggleAllRowsSelected(!isAllRowsSelected);
+                      }
+                    }
+                  }
+                )
+              ] }, header.id);
+            }
+            if (colDef?.kind === "actions") {
+              const actionsDef = colDef;
+              return /* @__PURE__ */ jsxs(ActionsContainer, { type: "head", children: [
+                actionsDef.showColumnVisibility !== false && /* @__PURE__ */ jsx(
+                  ColumnVisibilityPopover,
+                  {
+                    table,
+                    columnVisibility: table.getState().columnVisibility
+                  }
+                ),
+                actionsDef.showSorting !== false && /* @__PURE__ */ jsx(
+                  SortingPopover,
+                  {
+                    table,
+                    sorting: table.getState().sorting,
+                    footerText: actionsDef.sortingFooterText
+                  }
+                )
+              ] }, header.id);
+            }
+            const canSort = header.column.getCanSort();
+            const sortDir = header.column.getIsSorted();
+            const nextHeader = headerGroup.headers[headerIndex + 1];
+            const canResize = header.column.getCanResize() && !!nextHeader && !widthConfig.fixedColumnIds.has(nextHeader.id);
+            const dataCol = colDef?.kind === "data" ? colDef : null;
+            return /* @__PURE__ */ jsx(
+              TableHead,
+              {
+                width: columnWidths[header.id],
+                sorted: canSort ? toSortDirection(sortDir) : void 0,
+                onSort: canSort ? () => header.column.toggleSorting() : void 0,
+                icon: dataCol?.icon,
+                resizable: canResize,
+                onResizeStart: canResize ? createResizeHandler(header.id, nextHeader.id) : void 0,
+                children: flexRender(
+                  header.column.columnDef.header,
+                  header.getContext()
+                )
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsxs(TableBody, { children: [
+            emptyState && table.getRowModel().rows.length === 0 && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx(
+              "td",
+              {
+                className: "sds-datatable-empty-cell",
+                colSpan: table.getVisibleLeafColumns().length,
+                children: emptyState
+              }
+            ) }),
+            table.getRowModel().rows.map((row) => {
+              const stableId = getRowId(row.original);
+              const rowId = hasDraggable ? stableId : void 0;
+              const rowCanExpand = canRowExpand(row.original);
+              const rowExpanded = rowCanExpand && !!expandedMap[stableId];
+              return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                /* @__PURE__ */ jsx(
+                  TableRow,
+                  {
+                    sortableId: rowId,
+                    selected: row.getIsSelected(),
+                    "aria-expanded": rowCanExpand ? rowExpanded : void 0,
+                    "data-expanded": rowExpanded ? "true" : void 0,
+                    onClick: () => {
+                      if (hasDraggable && draggableReturn.wasDraggingRef.current) {
+                        return;
+                      }
+                      if (onRowClick) {
+                        onRowClick(row.original);
+                      } else if (isSelectable) {
+                        if (!isMultiSelect) {
+                          table.toggleAllRowsSelected(false);
+                        }
+                        row.toggleSelected();
+                      }
+                      if (expandOnRowClick && rowCanExpand) {
+                        toggleExpanded(stableId);
+                      }
+                    },
+                    children: row.getVisibleCells().map((cell) => {
+                      const cellColDef = columnKindMap.get(cell.column.id);
+                      if (cellColDef?.kind === "qualifier") {
+                        const qDef = cellColDef;
+                        return /* @__PURE__ */ jsx(
+                          QualifierContainer,
+                          {
+                            type: "cell",
+                            onClick: (e) => e.stopPropagation(),
+                            children: /* @__PURE__ */ jsx(
+                              TableQualifier,
+                              {
+                                content: qDef.content,
+                                icon: qDef.getContent?.(row.original),
+                                imageSrc: qDef.getImageSrc?.(row.original),
+                                imageAlt: qDef.getImageAlt?.(row.original),
+                                background: qDef.background,
+                                iconSize: qDef.iconSize,
+                                selectable: showQualifierCheckbox,
+                                selected: showQualifierCheckbox && row.getIsSelected(),
+                                onSelectChange: showQualifierCheckbox ? (checked) => {
+                                  if (!isMultiSelect) {
+                                    table.toggleAllRowsSelected(false);
+                                  }
+                                  row.toggleSelected(checked);
+                                } : void 0
+                              }
+                            )
+                          },
+                          cell.id
+                        );
+                      }
+                      if (cellColDef?.kind === "actions") {
+                        return /* @__PURE__ */ jsx(
+                          ActionsContainer,
+                          {
+                            type: "cell",
+                            onClick: (e) => e.stopPropagation(),
+                            children: flexRender(
+                              cell.column.columnDef.cell,
+                              cell.getContext()
+                            )
+                          },
+                          cell.id
+                        );
+                      }
+                      return /* @__PURE__ */ jsx(TableCell, { "data-column-id": cell.column.id, children: flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      ) }, cell.id);
+                    })
+                  }
+                ),
+                rowExpanded && expandable ? /* @__PURE__ */ jsx("tr", { className: "sds-datatable-expanded-row", "data-row-id": stableId, children: /* @__PURE__ */ jsx(
+                  "td",
+                  {
+                    className: "sds-datatable-expanded-cell",
+                    colSpan: table.getVisibleLeafColumns().length,
+                    children: expandable.renderExpandedContent(row.original)
+                  }
+                ) }) : null
+              ] }, row.id);
+            })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(TableSizeProvider, { size, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: ["sds-datatable-root", className].filter(Boolean).join(" "),
+      "data-variant": variant,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "sds-datatable-scroll",
+            "data-loading": isServerLoading || void 0,
+            ref: containerRef,
+            style: scrollStyle,
+            children: hasDraggable ? /* @__PURE__ */ jsxs(
+              DndContext,
+              {
+                sensors: draggableReturn.dndContextProps.sensors,
+                collisionDetection: draggableReturn.dndContextProps.collisionDetection,
+                modifiers: draggableReturn.dndContextProps.modifiers,
+                onDragStart: draggableReturn.dndContextProps.onDragStart,
+                onDragEnd: draggableReturn.dndContextProps.onDragEnd,
+                onDragCancel: draggableReturn.dndContextProps.onDragCancel,
+                children: [
+                  /* @__PURE__ */ jsx(
+                    SortableContext,
+                    {
+                      items: draggableReturn.sortableItems,
+                      strategy: verticalListSortingStrategy,
+                      children: /* @__PURE__ */ jsx(DraggableTableInner, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(DragOverlay, { dropAnimation: null, children: draggableReturn.activeId ? (() => {
+                    const row = table.getRowModel().rows.find(
+                      (r) => getRowId(r.original) === draggableReturn.activeId
+                    );
+                    if (!row) return null;
+                    return /* @__PURE__ */ jsx(
+                      DragOverlayRow,
+                      {
+                        row,
+                        columnWidths,
+                        columnKindMap,
+                        qualifierColumn,
+                        isSelectable
+                      }
+                    );
+                  })() : null })
+                ]
+              }
+            ) : /* @__PURE__ */ jsx(DraggableTableInner, {})
+          }
+        ),
+        footer && renderFooter(footer)
+      ]
+    }
+  ) });
+}
+function createTableColumns() {
+  const helper = createColumnHelper();
+  return {
+    qualifier(config) {
+      const content = config?.content ?? "simple";
+      const def = helper.display({
+        id: "qualifier",
+        enableResizing: false,
+        enableSorting: false,
+        enableHiding: false,
+        // Cell rendering is handled by DataTable based on the qualifier config
+        cell: () => null
+      });
+      return {
+        kind: "qualifier",
+        id: "qualifier",
+        def,
+        width: (size) => size === "md" ? { fixed: 36 } : { fixed: 44 },
+        content,
+        getContent: config?.getContent,
+        getImageSrc: config?.getImageSrc,
+        getImageAlt: config?.getImageAlt,
+        background: config?.background,
+        iconSize: config?.iconSize
+      };
+    },
+    column(accessor, config) {
+      const {
+        header,
+        cell,
+        enableSorting = true,
+        enableResizing = true,
+        enableHiding = true,
+        icon,
+        weight = 20
+      } = config;
+      const accessorDef = helper.accessor(accessor, {
+        header,
+        enableSorting,
+        enableResizing,
+        enableHiding,
+        cell: cell ? (info) => cell(info.getValue(), info.row.original) : (info) => {
+          const value = info.getValue();
+          return value == null ? null : String(value);
+        }
+      });
+      const def = accessorDef;
+      return {
+        kind: "data",
+        id: accessor,
+        def,
+        width: { weight, minWidth: Math.max(header.length * 8 + 40, 80) },
+        icon
+      };
+    },
+    displayColumn(config) {
+      const { id, header, cell, width, enableHiding = true } = config;
+      const def = helper.display({
+        id,
+        header: header ?? void 0,
+        enableHiding,
+        enableSorting: false,
+        enableResizing: false,
+        cell: (info) => cell(info.row.original)
+      });
+      return {
+        kind: "display",
+        id,
+        def,
+        width
+      };
+    },
+    actions(config) {
+      const def = {
+        id: "__actions",
+        enableHiding: false,
+        enableSorting: false,
+        enableResizing: false,
+        // Header rendering is handled by DataTable based on the actions config
+        header: () => null,
+        cell: config?.cell ? (info) => config.cell(info.row.original) : () => null
+      };
+      const showVisibility = config?.showColumnVisibility ?? true;
+      const showSorting = config?.showSorting ?? true;
+      const buttonCount = (showVisibility ? 1 : 0) + (showSorting ? 1 : 0);
+      const BUTTON_MD = 28;
+      const BUTTON_SM = 24;
+      const PADDING = 8;
+      return {
+        kind: "actions",
+        id: "__actions",
+        def,
+        width: (size) => ({
+          fixed: Math.max(
+            buttonCount * (size === "md" ? BUTTON_SM : BUTTON_MD),
+            size === "md" ? BUTTON_SM : BUTTON_MD
+          ) + PADDING
+        }),
+        showColumnVisibility: showVisibility,
+        showSorting,
+        sortingFooterText: config?.sortingFooterText
+      };
+    }
+  };
+}
+export {
+  ActionsContainer,
+  ColumnVisibilityPopover,
+  DataTable,
+  DragOverlayRow,
+  Footer,
+  QualifierContainer,
+  SortingPopover,
+  TableBody,
+  TableCell,
+  TableElement,
+  TableHead,
+  TableHeader,
+  TableQualifier,
+  TableRow,
+  TableSizeProvider,
+  createColumnVisibilityColumn,
+  createSortingColumn,
+  createTableColumns,
+  toSortDirection,
+  useColumnWidths,
+  useDataTable,
+  useDraggableRows,
+  useTableSize
+};
+//# sourceMappingURL=index.js.map