@hyddenlabs/hydn-ui 0.3.2 → 0.3.4

package/dist/components/data-display/data-grid/data-grid.js

@@ -0,0 +1,566 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
+import { Icon } from "../../system/icon/icon.js";
+import IconButton from "../../forms/button/icon-button.js";
+import Input from "../../forms/input/input.js";
+import InputGroup from "../../forms/input-group/input-group.js";
+import Checkbox from "../../forms/checkbox/checkbox.js";
+import Button from "../../forms/button/button.js";
+import Tooltip from "../../feedback/tooltip/tooltip.js";
+import Stack from "../../layout/stack/stack.js";
+import Badge from "../badge/badge.js";
+import Text from "../../typography/text/text.js";
+import useTable from "../data-table/use-table.js";
+import EmptyState from "../empty-state/empty-state.js";
+import { Link } from "react-router-dom";
+const INTERACTIVE_TAGS = /* @__PURE__ */ new Set(["A", "BUTTON", "INPUT", "SELECT", "TEXTAREA", "LABEL"]);
+function isInteractiveElement(element, container) {
+  let current = element;
+  while (current && current !== container) {
+    if (INTERACTIVE_TAGS.has(current.tagName)) return true;
+    if (current.getAttribute("role") === "button") return true;
+    current = current.parentElement;
+  }
+  return false;
+}
+const MOBILE_BREAKPOINT = 640;
+function DataGrid({
+  data,
+  columns,
+  className = "",
+  striped = false,
+  hoverable = true,
+  compact = false,
+  sortable = true,
+  paginated = false,
+  pageSize = 10,
+  selectable = false,
+  searchable = false,
+  searchKeys,
+  searchPlaceholder = "Search...",
+  onSearchChange,
+  actions,
+  actionsLabel = "Actions",
+  rowHref,
+  onRowClick,
+  onSelectionChange,
+  emptyState = {
+    title: "No data available",
+    description: void 0,
+    buttonText: void 0,
+    onButtonClick: void 0
+  },
+  headerActions,
+  title,
+  initialSort
+}) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [isMobile, setIsMobile] = useState(false);
+  const handleSearchChange = (value) => {
+    setSearchQuery(value);
+    if (onSearchChange) {
+      onSearchChange(value);
+    }
+  };
+  const containerRef = useRef(null);
+  const [visibleColumns, setVisibleColumns] = useState(() => columns);
+  const calculateActionsMinWidth = () => {
+    if (!actions) return 0;
+    let maxActionCount = 0;
+    if (Array.isArray(actions)) {
+      maxActionCount = actions.length;
+    } else {
+      data.forEach((row, index) => {
+        const result = actions(row, index);
+        if (Array.isArray(result)) {
+          maxActionCount = Math.max(maxActionCount, result.length);
+        } else {
+          maxActionCount = Math.max(maxActionCount, 2);
+        }
+      });
+    }
+    if (maxActionCount === 0) {
+      return 60;
+    }
+    const actionWidth = 24;
+    const gapWidth = 8;
+    const extraPadding = 16;
+    return actionWidth * maxActionCount + gapWidth * Math.max(0, maxActionCount - 1) + extraPadding;
+  };
+  const actionsMinWidth = calculateActionsMinWidth();
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const hasHideableColumns = columns.some((col) => col.hidePriority !== void 0 || col.minWidth !== void 0);
+    const updateLayout = () => {
+      const containerWidth = container.offsetWidth;
+      const nowMobile = containerWidth < MOBILE_BREAKPOINT;
+      setIsMobile(nowMobile);
+      if (nowMobile || !hasHideableColumns) {
+        setVisibleColumns(columns);
+        return;
+      }
+      const isHideable = (col) => col.hidePriority !== void 0 || col.minWidth !== void 0;
+      const hideableColumns = columns.map((col, index) => ({ col, originalIndex: index })).filter(({ col }) => isHideable(col)).sort((a, b) => {
+        const aPriority = a.col.hidePriority;
+        const bPriority = b.col.hidePriority;
+        if (aPriority !== void 0 && bPriority !== void 0) {
+          if (aPriority !== bPriority) return aPriority - bPriority;
+        }
+        if (aPriority !== void 0 && bPriority === void 0) return -1;
+        if (aPriority === void 0 && bPriority !== void 0) return 1;
+        const aMin = a.col.minWidth ?? 0;
+        const bMin = b.col.minWidth ?? 0;
+        if (aMin !== bMin) return bMin - aMin;
+        return b.originalIndex - a.originalIndex;
+      });
+      const nonHideableColumns = columns.filter((col) => !isHideable(col));
+      const estimateColumnWidth = (col) => {
+        if (col.minWidth) return col.minWidth;
+        if (col.width) {
+          const match = col.width.match(/(\d+)/);
+          if (match) {
+            const num = parseInt(match[1], 10);
+            if (col.width.includes("px")) return num;
+            return num * 4;
+          }
+        }
+        return 150;
+      };
+      const horizontalPadding = compact ? 24 : 32;
+      const gridGap = 16;
+      let currentWidth = nonHideableColumns.reduce((sum, col) => sum + estimateColumnWidth(col), 0);
+      let totalColumns = nonHideableColumns.length;
+      if (selectable) {
+        currentWidth += 48;
+        totalColumns += 1;
+      }
+      if (actions) {
+        currentWidth += actionsMinWidth;
+        totalColumns += 1;
+      }
+      const columnsToShow = [...nonHideableColumns];
+      for (const { col } of hideableColumns) {
+        const colWidth = estimateColumnWidth(col);
+        const newTotalColumns = totalColumns + 1;
+        const totalGaps = Math.max(0, newTotalColumns - 1) * gridGap;
+        const totalWidthNeeded = currentWidth + colWidth + totalGaps + horizontalPadding;
+        if (totalWidthNeeded <= containerWidth) {
+          columnsToShow.push(col);
+          currentWidth += colWidth;
+          totalColumns = newTotalColumns;
+        }
+      }
+      const orderedVisibleColumns = columns.filter((col) => columnsToShow.includes(col));
+      setVisibleColumns(orderedVisibleColumns);
+    };
+    updateLayout();
+    const observer = new ResizeObserver(() => {
+      updateLayout();
+    });
+    observer.observe(container);
+    return () => {
+      observer.disconnect();
+    };
+  }, [columns, selectable, actions, actionsMinWidth, compact, data]);
+  const effectiveSearchKeys = searchKeys || visibleColumns.map((col) => col.key);
+  const tableOptions = {
+    data,
+    initialSort,
+    pageSize,
+    searchQuery,
+    searchKeys: effectiveSearchKeys
+  };
+  const {
+    currentData,
+    sortedData,
+    filteredData,
+    sortConfig,
+    handleSort,
+    currentPage,
+    totalPages,
+    nextPage,
+    prevPage,
+    canNextPage,
+    canPrevPage,
+    selectedRows,
+    toggleRow,
+    toggleAll,
+    isRowSelected,
+    isAllSelected
+  } = useTable(tableOptions);
+  const displayData = paginated ? currentData : sortedData;
+  const hasHeader = Boolean(
+    title && String(title).length > 0 || (Array.isArray(headerActions) ? headerActions.length > 0 : headerActions) || searchable
+  );
+  const handleToggleRow = (index) => {
+    toggleRow(index);
+    if (onSelectionChange) {
+      const newSelection = new Set(selectedRows);
+      if (newSelection.has(index)) {
+        newSelection.delete(index);
+      } else {
+        newSelection.add(index);
+      }
+      onSelectionChange(Array.from(newSelection));
+    }
+  };
+  const handleToggleAll = () => {
+    toggleAll();
+    if (onSelectionChange) {
+      if (isAllSelected) {
+        onSelectionChange([]);
+      } else {
+        const startIndex = (currentPage - 1) * pageSize;
+        const allIndices = displayData.map((_, idx) => startIndex + idx);
+        onSelectionChange(allIndices);
+      }
+    }
+  };
+  const formatValue = (value, column) => {
+    if (value == null) return "";
+    switch (column.format) {
+      case "date": {
+        const dateValue = value instanceof Date ? value : new Date(value);
+        return new Intl.DateTimeFormat("en-US", column.formatOptions).format(dateValue);
+      }
+      case "currency":
+        return new Intl.NumberFormat("en-US", {
+          style: "currency",
+          currency: "USD",
+          ...column.formatOptions
+        }).format(Number(value));
+      case "number":
+        return new Intl.NumberFormat("en-US", column.formatOptions).format(Number(value));
+      case "percent":
+        return new Intl.NumberFormat("en-US", {
+          style: "percent",
+          ...column.formatOptions
+        }).format(Number(value));
+      default:
+        return String(value);
+    }
+  };
+  const renderCellContent = (value, column, row, rowIndex) => {
+    const isEmpty = value == null || value === "";
+    if (isEmpty && column.fallback !== void 0) {
+      return column.fallback;
+    }
+    if (column.render) {
+      return column.render(value, row, rowIndex);
+    }
+    if (column.badgeMap) {
+      const stringValue = String(value);
+      const badgeConfig = column.badgeMap[stringValue] || column.badgeMap["*"] || { variant: "neutral" };
+      return /* @__PURE__ */ jsx(Badge, { variant: badgeConfig.variant || "neutral", size: column.componentSize || "md", children: badgeConfig.label || stringValue });
+    }
+    if (column.statusDotMap) {
+      const stringValue = String(value);
+      const dotConfig = column.statusDotMap[stringValue] || column.statusDotMap["*"] || { color: "neutral" };
+      const dotColor = dotConfig.color || "neutral";
+      const dotColorClasses = {
+        primary: "bg-primary",
+        accent: "bg-accent",
+        neutral: "bg-muted-foreground",
+        success: "bg-success",
+        warning: "bg-warning",
+        error: "bg-error",
+        info: "bg-info"
+      };
+      return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2 min-w-0", children: [
+        /* @__PURE__ */ jsx("span", { className: `size-2 rounded-full shrink-0 ${dotColorClasses[dotColor]}` }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: dotConfig.label || stringValue })
+      ] });
+    }
+    if (column.renderAsBadges) {
+      if (Array.isArray(value)) {
+        if (value.length === 0 && column.fallback !== void 0) {
+          return column.fallback;
+        }
+        return /* @__PURE__ */ jsx(Stack, { direction: "horizontal", spacing: "xs", wrap: true, children: value.map((item, idx) => /* @__PURE__ */ jsx(Badge, { variant: column.badgeVariant || "neutral", size: column.componentSize || "md", children: String(item) }, idx)) });
+      } else {
+        return /* @__PURE__ */ jsx(Badge, { variant: column.badgeVariant || "neutral", size: column.componentSize || "md", children: String(value) });
+      }
+    }
+    if (column.format) {
+      return formatValue(value, column);
+    }
+    return String(value ?? "");
+  };
+  const renderSortIcon = (columnKey) => {
+    if (!sortable) return null;
+    const isSorted = sortConfig?.key === columnKey;
+    if (!isSorted) {
+      return /* @__PURE__ */ jsx(Icon, { name: "selector", size: "xs", color: "neutral" });
+    }
+    if (sortConfig?.direction === "asc") {
+      return /* @__PURE__ */ jsx(Icon, { name: "chevron-up", size: "xs", color: "primary" });
+    }
+    return /* @__PURE__ */ jsx(Icon, { name: "chevron-down", size: "xs", color: "primary" });
+  };
+  const renderActions = (row, actualIndex) => {
+    if (!actions) return null;
+    let rowActions;
+    if (Array.isArray(actions)) {
+      rowActions = actions;
+    } else {
+      const result = actions(row, actualIndex);
+      if (Array.isArray(result)) {
+        rowActions = result;
+      } else {
+        return /* @__PURE__ */ jsx("div", { "data-interactive": true, children: result });
+      }
+    }
+    return /* @__PURE__ */ jsx(Stack, { direction: "horizontal", spacing: "sm", "data-interactive": true, children: rowActions.map((action, actionIndex) => {
+      if (action && typeof action === "object" && "onClick" in action) {
+        const actionConfig = action;
+        const button = /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            icon: actionConfig.icon,
+            iconSize: actionConfig.iconSize || "md",
+            buttonStyle: "ghost",
+            variant: actionConfig.variant || "neutral",
+            iconColor: actionConfig.iconColor,
+            hoverIcon: actionConfig.hoverIcon,
+            ariaLabel: actionConfig.label,
+            onClick: () => actionConfig.onClick(row, actualIndex),
+            noPadding: true
+          },
+          actionIndex
+        );
+        return actionConfig.tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: actionConfig.tooltip, children: button }, actionIndex) : button;
+      } else {
+        return /* @__PURE__ */ jsx("div", { "data-interactive": true, children: action }, actionIndex);
+      }
+    }) });
+  };
+  const rowPadding = compact ? "py-2 px-3" : "py-3 px-4";
+  const buildGridTemplateColumns = () => {
+    const parts = [];
+    if (selectable) {
+      parts.push("24px");
+    }
+    visibleColumns.forEach((col) => {
+      if (col.width) {
+        const widthMatch = col.width.match(/(\d+)px/);
+        if (widthMatch) {
+          parts.push(`${widthMatch[1]}px`);
+        } else {
+          parts.push("1fr");
+        }
+      } else if (col.minWidth && col.maxWidth) {
+        parts.push(`minmax(${col.minWidth}px, ${col.maxWidth}px)`);
+      } else if (col.minWidth) {
+        parts.push(`minmax(${col.minWidth}px, 1fr)`);
+      } else if (col.maxWidth) {
+        parts.push(`minmax(auto, ${col.maxWidth}px)`);
+      } else {
+        parts.push("1fr");
+      }
+    });
+    if (actions) {
+      parts.push(`minmax(${actionsMinWidth}px, max-content)`);
+    }
+    return parts.join(" ");
+  };
+  const gridTemplateColumns = !isMobile ? buildGridTemplateColumns() : void 0;
+  const renderRow = (row, rowIndex) => {
+    const actualIndex = paginated ? (currentPage - 1) * pageSize + rowIndex : rowIndex;
+    const isSelected = isRowSelected(actualIndex);
+    const href = rowHref?.(row, actualIndex);
+    const hasHref = Boolean(href);
+    const hasOnRowClick = Boolean(onRowClick);
+    const isClickable = hasHref || hasOnRowClick;
+    const rowClasses = [
+      "relative",
+      "border-b border-border/50",
+      striped && rowIndex % 2 === 1 ? "bg-muted/30" : "",
+      hoverable && isClickable ? "hover:bg-muted/50 transition-colors" : "",
+      isSelected ? "bg-primary/5" : ""
+    ].filter(Boolean).join(" ");
+    const layoutClasses = isMobile ? "flex flex-col gap-3" : "grid items-center gap-4";
+    const rowStyle = !isMobile && gridTemplateColumns ? { gridTemplateColumns } : void 0;
+    const rowClickProps = !hasHref && hasOnRowClick ? {
+      onClick: (e) => {
+        if (isInteractiveElement(e.target, e.currentTarget)) {
+          return;
+        }
+        onRowClick?.(row, actualIndex);
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onRowClick?.(row, actualIndex);
+        }
+      },
+      role: "button",
+      tabIndex: 0,
+      className: "cursor-pointer"
+    } : {};
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `${layoutClasses} ${rowPadding} ${rowClasses} ${rowClickProps.className || ""}`,
+        style: rowStyle,
+        onClick: rowClickProps.onClick,
+        onKeyDown: rowClickProps.onKeyDown,
+        role: rowClickProps.role,
+        tabIndex: rowClickProps.tabIndex,
+        children: [
+          hasHref && href && /* @__PURE__ */ jsx(Link, { to: href, className: "absolute inset-0 z-1", "aria-label": `View details`, tabIndex: 0 }),
+          selectable && /* @__PURE__ */ jsx("div", { className: `relative z-10 ${isMobile ? "" : "shrink-0"}`, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: isSelected,
+              onChange: () => handleToggleRow(actualIndex),
+              ariaLabel: `Select row ${actualIndex + 1}`
+            }
+          ) }),
+          visibleColumns.map((column) => {
+            const value = row[column.key];
+            const content = renderCellContent(value, column, row, actualIndex);
+            const showLabel = isMobile && column.showLabelOnMobile !== false;
+            const alignClass = column.align === "center" ? "text-center" : column.align === "right" ? "text-right" : "text-left";
+            const pointerClass = hasHref ? "pointer-events-none [&_a]:pointer-events-auto [&_button]:pointer-events-auto [&_input]:pointer-events-auto [&_select]:pointer-events-auto [&_textarea]:pointer-events-auto [&_label]:pointer-events-auto [&_[data-interactive]]:pointer-events-auto" : "";
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: `${alignClass} ${isMobile ? "flex flex-col gap-0.5" : "min-w-0 overflow-hidden"} ${pointerClass}`,
+                children: [
+                  showLabel && /* @__PURE__ */ jsx(Text, { size: "xs", variant: "muted", className: "uppercase tracking-wide", children: column.label }),
+                  /* @__PURE__ */ jsx("div", { className: column.wrapText ? "" : "truncate", children: content })
+                ]
+              },
+              String(column.key)
+            );
+          }),
+          actions && /* @__PURE__ */ jsx("div", { className: `relative z-10 shrink-0 ${isMobile ? "flex justify-end pt-1" : "justify-self-end"}`, children: renderActions(row, actualIndex) })
+        ]
+      },
+      actualIndex
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `overflow-hidden ${className}`, children: [
+    hasHeader && /* @__PURE__ */ jsx("div", { className: "mb-3", children: searchable ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
+      title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row items-stretch sm:items-center gap-3 sm:justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-1 sm:max-w-md", children: /* @__PURE__ */ jsx(InputGroup, { prefix: /* @__PURE__ */ jsx(Icon, { name: "search", size: "sm" }), className: "w-full", children: /* @__PURE__ */ jsx(
+          Input,
+          {
+            type: "text",
+            value: searchQuery,
+            onChange: (e) => handleSearchChange(e.target.value),
+            placeholder: searchPlaceholder
+          }
+        ) }) }),
+        Array.isArray(headerActions) && headerActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap sm:flex-nowrap ml-auto", children: headerActions.map((act, idx) => /* @__PURE__ */ jsxs(
+          Button,
+          {
+            onClick: act.onClick,
+            variant: act.variant,
+            style: act.style,
+            size: act.size,
+            className: act.className,
+            ariaLabel: act.ariaLabel || (!act.label && act.icon ? "Action" : void 0),
+            children: [
+              act.icon ? /* @__PURE__ */ jsx(Icon, { name: act.icon, size: "sm" }) : null,
+              act.label
+            ]
+          },
+          idx
+        )) })
+      ] })
+    ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex-1", children: title && /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title }) }),
+      Array.isArray(headerActions) && headerActions.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 flex-wrap sm:flex-nowrap", children: headerActions.map((act, idx) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          onClick: act.onClick,
+          variant: act.variant,
+          style: act.style,
+          size: act.size,
+          className: act.className,
+          ariaLabel: act.ariaLabel || (!act.label && act.icon ? "Action" : void 0),
+          children: [
+            act.icon ? /* @__PURE__ */ jsx(Icon, { name: act.icon, size: "sm" }) : null,
+            act.label
+          ]
+        },
+        idx
+      )) })
+    ] }) }),
+    data.length === 0 ? /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: emptyState.title,
+        description: emptyState.description,
+        buttonText: emptyState.buttonText,
+        onButtonClick: emptyState.onButtonClick
+      }
+    ) }) : filteredData.length === 0 && searchQuery.trim() ? /* @__PURE__ */ jsx("div", { className: "border border-border rounded-lg", children: /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        title: "No results found",
+        description: `No items match "${searchQuery}". Try adjusting your search.`
+      }
+    ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      !isMobile && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `grid items-center gap-4 ${rowPadding} border-b border-border bg-muted/30`,
+          style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
+          children: [
+            selectable && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Checkbox, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }) }),
+            visibleColumns.map((column) => {
+              const alignClass = column.align === "center" ? "text-center" : column.align === "right" ? "text-right" : "text-left";
+              return /* @__PURE__ */ jsx("div", { className: `min-w-0 ${alignClass}`, children: column.sortable !== false && sortable ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => handleSort(column.key),
+                  className: "flex items-center gap-1 hover:text-foreground transition-colors font-medium text-sm text-muted-foreground",
+                  type: "button",
+                  children: [
+                    column.label,
+                    renderSortIcon(column.key)
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx(Text, { size: "sm", variant: "muted", weight: "medium", children: column.label }) }, String(column.key));
+            }),
+            actions && /* @__PURE__ */ jsx("div", { className: "justify-self-end", children: /* @__PURE__ */ jsx(Text, { size: "sm", variant: "muted", weight: "medium", children: actionsLabel }) })
+          ]
+        }
+      ),
+      isMobile && selectable && /* @__PURE__ */ jsxs("div", { className: `flex items-center gap-2 ${rowPadding} border-b border-border`, children: [
+        /* @__PURE__ */ jsx(Checkbox, { checked: isAllSelected, onChange: handleToggleAll, ariaLabel: "Select all rows" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", variant: "muted", children: "Select all" })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "divide-y divide-border/50", children: displayData.map((row, idx) => renderRow(row, idx)) }),
+      paginated && totalPages > 1 && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-4 py-3 border-t border-border", children: [
+        /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+          "Page ",
+          currentPage,
+          " of ",
+          totalPages,
+          " (",
+          filteredData.length,
+          " ",
+          searchQuery.trim() ? "filtered" : "total",
+          " ",
+          "rows",
+          searchQuery.trim() && data.length !== filteredData.length ? ` of ${data.length}` : "",
+          ")"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(Button, { size: "sm", style: "outline", onClick: prevPage, disabled: !canPrevPage, children: "Previous" }),
+          /* @__PURE__ */ jsx(Button, { size: "sm", style: "outline", onClick: nextPage, disabled: !canNextPage, children: "Next" })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+DataGrid.displayName = "DataGrid";
+export {
+  DataGrid as default
+};
+//# sourceMappingURL=data-grid.js.map