@godxjp/ui 13.9.3 → 13.10.0

package/dist/components/data-entry/upload.js

@@ -1,12 +1,417 @@
-export { Upload, collectUploadCommitActions, createUploadItem, useUploadDraft } from '../../chunk-OO5DZH45.js';
-import '../../chunk-TBJBVEIP.js';
-import '../../chunk-X6AJ5HEI.js';
-import '../../chunk-RZ32HY5E.js';
-import '../../chunk-K24AQV4R.js';
-import '../../chunk-VU4GFGDG.js';
-import '../../chunk-XBFUROAY.js';
-import '../../chunk-B4K4BXEF.js';
-import '../../chunk-7PWBC4BY.js';
-import '../../chunk-B6S6LTWT.js';
-import '../../chunk-5732TWQF.js';
-import '../../chunk-U7N2A7A3.js';
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Camera, ImagePlus, RotateCcw, Trash2, Upload as UploadIcon, X } from "lucide-react";
+import { useTranslation } from "../../i18n/use-translation";
+import { formatBytes } from "../../lib/format";
+import { cn } from "../../lib/utils";
+import { controlIconClass } from "../../lib/control-styles";
+import { Button } from "../general/button";
+import { UploadCropDialog } from "./upload-crop-dialog";
+import {
+  createUploadItem,
+  revokePreviewUrl
+} from "./upload-types";
+import { useUploadDraft } from "./use-upload-draft";
+import { collectUploadCommitActions, createUploadItem as createUploadItem2 } from "./upload-types";
+import { useUploadDraft as useUploadDraft2 } from "./use-upload-draft";
+function defaultAcceptForVariant(variant) {
+  if (variant === "avatar" || variant === "avatar-crop" || variant === "picture" || variant === "picture-card") {
+    return "image/*";
+  }
+  return void 0;
+}
+function defaultMaxCount(variant) {
+  if (variant === "avatar" || variant === "avatar-crop" || variant === "picture") return 1;
+  return void 0;
+}
+function fileMatchesAccept(file, accept) {
+  if (!accept) return true;
+  return accept.split(",").some((rule) => {
+    const trimmed = rule.trim();
+    if (trimmed.endsWith("/*")) return file.type.startsWith(trimmed.slice(0, -1));
+    return file.type === trimmed || file.name.endsWith(trimmed);
+  });
+}
+function useUploadList(controlled, defaultValue, onValueChange) {
+  const [internal, setInternal] = React.useState(defaultValue ?? []);
+  const items = controlled ?? internal;
+  const itemsRef = React.useRef(items);
+  itemsRef.current = items;
+  const setItems = React.useCallback(
+    (next) => {
+      const resolved = typeof next === "function" ? next(itemsRef.current) : next;
+      itemsRef.current = resolved;
+      if (controlled === void 0) setInternal(resolved);
+      onValueChange?.(resolved);
+    },
+    [controlled, onValueChange]
+  );
+  return [items, setItems];
+}
+async function runUpload(file, item, onUpload, setItems) {
+  const uid = item.uid;
+  setItems((prev) => prev.map((it) => it.uid === uid ? { ...it, status: "uploading" } : it));
+  try {
+    const result = await onUpload(file, item);
+    setItems(
+      (prev) => prev.map(
+        (it) => it.uid === uid ? {
+          ...it,
+          status: "done",
+          mediaId: result.mediaId,
+          previewUrl: result.previewUrl ?? it.previewUrl,
+          file: void 0
+        } : it
+      )
+    );
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    setItems(
+      (prev) => prev.map((it) => it.uid === uid ? { ...it, status: "error", error: message } : it)
+    );
+  }
+}
+function Upload({
+  variant = "dropzone",
+  value,
+  defaultValue,
+  onValueChange,
+  accept: acceptProp,
+  multiple: multipleProp,
+  maxCount: maxCountProp,
+  maxSizeBytes,
+  disabled,
+  removable = true,
+  onUpload,
+  className,
+  children
+}) {
+  const { t } = useTranslation();
+  const accept = acceptProp ?? defaultAcceptForVariant(variant);
+  const maxCount = maxCountProp ?? defaultMaxCount(variant);
+  const multiple = multipleProp ?? (maxCount === 1 ? false : true);
+  const inputRef = React.useRef(null);
+  const [dragActive, setDragActive] = React.useState(false);
+  const [cropFile, setCropFile] = React.useState(null);
+  const [items, setItems] = useUploadList(value, defaultValue, onValueChange);
+  const isSingleAvatar = variant === "avatar" || variant === "avatar-crop" || variant === "picture" && maxCount === 1;
+  const singleItem = isSingleAvatar ? items[0] ?? null : null;
+  const draft = useUploadDraft({
+    value: singleItem,
+    onChange: (next) => {
+      setItems(next ? [next] : []);
+    }
+  });
+  const pickFiles = (fileList) => {
+    if (!fileList?.length || disabled) return;
+    const slotsLeft = maxCount != null ? Math.max(0, maxCount - items.length) : fileList.length;
+    const candidates = Array.from(fileList).slice(0, multiple ? slotsLeft || fileList.length : 1);
+    for (const file of candidates) {
+      if (!fileMatchesAccept(file, accept)) continue;
+      if (maxSizeBytes != null && file.size > maxSizeBytes) continue;
+      if (variant === "avatar-crop") {
+        setCropFile(file);
+        return;
+      }
+      if (isSingleAvatar) {
+        const baseline = items[0];
+        const item3 = createUploadItem(file, {
+          pendingReplace: Boolean(baseline?.mediaId),
+          replacesMediaId: baseline?.mediaId
+        });
+        setItems([item3]);
+        if (onUpload) void runUpload(file, item3, onUpload, setItems);
+        return;
+      }
+      const item2 = createUploadItem(file);
+      setItems((prev) => [...prev, item2]);
+      if (onUpload) void runUpload(file, item2, onUpload, setItems);
+    }
+  };
+  const removeItem = (uid) => {
+    if (isSingleAvatar) {
+      draft.markRemove();
+      return;
+    }
+    setItems((prev) => {
+      const target = prev.find((it) => it.uid === uid);
+      revokePreviewUrl(target);
+      return prev.filter((it) => it.uid !== uid);
+    });
+  };
+  const hiddenInput = /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      type: "file",
+      className: "sr-only",
+      accept,
+      multiple: multiple && !isSingleAvatar,
+      disabled,
+      "aria-label": t("dataEntry.upload.inputLabel"),
+      onChange: (e) => {
+        pickFiles(e.target.files);
+        e.target.value = "";
+      }
+    }
+  );
+  const uploadingCount = items.filter((it) => it.status === "uploading").length;
+  const doneCount = items.filter((it) => it.status === "done").length;
+  const errorCount = items.filter((it) => it.status === "error").length;
+  const liveRegion = /* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", "data-slot": "upload-status", children: errorCount > 0 ? t("dataEntry.upload.statusFailed", { count: errorCount }) : uploadingCount > 0 ? t("dataEntry.upload.statusUploading", { count: uploadingCount }) : items.length > 0 ? t("dataEntry.upload.statusReady", { count: items.length, done: doneCount }) : "" });
+  const openPicker = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+  if (variant === "dropzone") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
+      hiddenInput,
+      liveRegion,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "button",
+          tabIndex: disabled ? -1 : 0,
+          "aria-disabled": disabled,
+          "aria-label": t("dataEntry.upload.dropzoneLabel"),
+          onClick: openPicker,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              openPicker();
+            }
+          },
+          onDragOver: (e) => {
+            e.preventDefault();
+            setDragActive(true);
+          },
+          onDragLeave: () => setDragActive(false),
+          onDrop: (e) => {
+            e.preventDefault();
+            setDragActive(false);
+            pickFiles(e.dataTransfer.files);
+          },
+          className: cn(
+            "cursor-pointer rounded-lg border-2 border-dashed p-10 text-center transition-colors",
+            dragActive ? "border-primary bg-primary/5" : "border-border hover:border-primary/50",
+            disabled && "pointer-events-none opacity-50"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(UploadIcon, { className: "text-muted-foreground mx-auto size-10", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm", children: t("dataEntry.upload.dropzoneHint") }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: t("dataEntry.upload.dropzoneMeta") })
+          ]
+        }
+      ),
+      items.length > 0 && /* @__PURE__ */ jsx(UploadFileList, { items, onRemove: removable ? removeItem : void 0 })
+    ] });
+  }
+  if (variant === "button") {
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
+      hiddenInput,
+      liveRegion,
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", disabled, onClick: openPicker, children: [
+        /* @__PURE__ */ jsx(UploadIcon, { className: "me-2 size-4", "aria-hidden": "true" }),
+        children ?? t("dataEntry.upload.buttonLabel")
+      ] }),
+      items.length > 0 && /* @__PURE__ */ jsx(UploadFileList, { items, onRemove: removable ? removeItem : void 0 })
+    ] });
+  }
+  if (variant === "picture-card") {
+    const canAdd = maxCount == null || items.length < maxCount;
+    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap gap-3", className), children: [
+      hiddenInput,
+      liveRegion,
+      items.map((item2) => /* @__PURE__ */ jsx(
+        UploadPictureCard,
+        {
+          item: item2,
+          onRemove: removable ? () => removeItem(item2.uid) : void 0
+        },
+        item2.uid
+      )),
+      canAdd && /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: openPicker,
+          className: cn(
+            "flex size-24 flex-col items-center justify-center rounded-md border border-dashed",
+            "text-muted-foreground hover:border-primary hover:text-primary transition-colors",
+            disabled && "pointer-events-none opacity-50"
+          ),
+          "aria-label": t("dataEntry.upload.addImage"),
+          children: [
+            /* @__PURE__ */ jsx(ImagePlus, { className: "size-6", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "mt-1 text-xs", children: t("dataEntry.upload.addImage") })
+          ]
+        }
+      )
+    ] });
+  }
+  if (variant === "picture") {
+    const item2 = draft.state.display;
+    return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm max-w-xs", className), children: [
+      hiddenInput,
+      liveRegion,
+      item2?.previewUrl && !item2.pendingDelete ? /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden rounded-md border", children: [
+        /* @__PURE__ */ jsx("img", { src: item2.previewUrl, alt: "", className: "max-h-48 w-full object-cover" }),
+        item2.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-sm", children: t("dataEntry.upload.uploading") }),
+        item2.pendingReplace && /* @__PURE__ */ jsx("div", { className: "bg-warning text-warning-foreground absolute start-2 top-2 rounded px-2 py-0.5 text-xs", children: t("dataEntry.upload.pendingReplace") })
+      ] }) : /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: openPicker,
+          className: "text-muted-foreground hover:border-primary flex h-32 w-full flex-col items-center justify-center rounded-md border border-dashed",
+          children: [
+            /* @__PURE__ */ jsx(ImagePlus, { className: controlIconClass, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "mt-2 text-sm", children: t("dataEntry.upload.addImage") })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(UploadDraftActions, { draft, disabled, onPick: openPicker })
+    ] });
+  }
+  const item = draft.state.display;
+  const showPlaceholder = !item?.previewUrl || item.pendingDelete;
+  return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm items-start", className), children: [
+    hiddenInput,
+    liveRegion,
+    /* @__PURE__ */ jsx(
+      UploadCropDialog,
+      {
+        open: variant === "avatar-crop" && cropFile != null,
+        onOpenChange: (open) => !open && setCropFile(null),
+        file: cropFile,
+        onConfirm: (cropped) => {
+          const baseline = items[0];
+          const item2 = createUploadItem(cropped, {
+            pendingReplace: Boolean(baseline?.mediaId),
+            replacesMediaId: baseline?.mediaId
+          });
+          setItems([item2]);
+          setCropFile(null);
+          if (onUpload) void runUpload(cropped, item2, onUpload, setItems);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "relative inline-block", children: [
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: openPicker,
+          className: cn(
+            "border-border bg-muted relative size-24 overflow-hidden rounded-full border-2",
+            "focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none",
+            item?.pendingDelete && "opacity-40",
+            disabled && "pointer-events-none opacity-50"
+          ),
+          "aria-label": t("dataEntry.upload.avatarLabel"),
+          children: [
+            !showPlaceholder && item?.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("span", { className: "text-muted-foreground flex size-full items-center justify-center", children: /* @__PURE__ */ jsx(Camera, { className: controlIconClass, "aria-hidden": "true" }) }),
+            !disabled && /* @__PURE__ */ jsx("span", { className: "text-2xs absolute inset-x-0 bottom-0 bg-black/50 py-1 text-center text-white", children: t("dataEntry.upload.change") })
+          ]
+        }
+      ),
+      removable && item && !item.pendingDelete && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          onClick: () => draft.markRemove(),
+          className: "bg-background hover:bg-destructive hover:text-destructive-foreground absolute -end-1 -top-1 rounded-full border p-1 shadow-sm",
+          "aria-label": t("dataEntry.upload.removeAvatar"),
+          children: /* @__PURE__ */ jsx(Trash2, { className: "size-3.5", "aria-hidden": "true" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(UploadDraftActions, { draft, disabled, onPick: openPicker })
+  ] });
+}
+function UploadDraftActions({
+  draft,
+  disabled,
+  onPick
+}) {
+  const { t } = useTranslation();
+  const { state, undoRemove, undoReplace } = draft;
+  if (state.canUndoRemove) {
+    return /* @__PURE__ */ jsxs("div", { className: "border-destructive/40 bg-destructive/5 flex flex-wrap items-center gap-2 rounded-md border border-dashed px-3 py-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-destructive", children: t("dataEntry.upload.markedForDelete") }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: undoRemove, children: [
+        /* @__PURE__ */ jsx(RotateCcw, { className: "me-1 size-3.5", "aria-hidden": "true" }),
+        t("dataEntry.upload.undo")
+      ] })
+    ] });
+  }
+  if (state.canUndoReplace) {
+    return /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground flex flex-wrap items-center gap-2 text-sm", children: [
+      /* @__PURE__ */ jsx("span", { children: t("dataEntry.upload.pendingReplaceHint") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", disabled, onClick: undoReplace, children: t("dataEntry.upload.undo") }),
+      /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", disabled, onClick: onPick, children: t("dataEntry.upload.change") })
+    ] });
+  }
+  return null;
+}
+function UploadPictureCard({ item, onRemove }) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: "bg-muted relative size-24 overflow-hidden rounded-md border", children: [
+    item.previewUrl ? /* @__PURE__ */ jsx("img", { src: item.previewUrl, alt: "", className: "size-full object-cover" }) : /* @__PURE__ */ jsx("div", { className: "text-muted-foreground flex size-full items-center justify-center text-xs", children: "\u2026" }),
+    item.status === "uploading" && /* @__PURE__ */ jsx("div", { className: "bg-background/70 absolute inset-0 flex items-center justify-center text-xs", children: "\u2026" }),
+    onRemove && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        className: "bg-background/90 hover:bg-destructive hover:text-destructive-foreground absolute end-1 top-1 rounded-full p-0.5 shadow",
+        "aria-label": t("dataEntry.upload.removeImage"),
+        children: /* @__PURE__ */ jsx(X, { className: "size-3.5", "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+function UploadFileList({
+  items,
+  onRemove
+}) {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx("ul", { className: "ui-stack-xs", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-3 rounded-md border px-3 py-2 text-sm", children: [
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ jsx("div", { className: "truncate font-medium", children: item.name }),
+      /* @__PURE__ */ jsxs("div", { className: "text-muted-foreground text-xs", children: [
+        formatBytes(item.size),
+        item.status === "uploading" && " \xB7 \u2026",
+        item.status === "error" && item.error && /* @__PURE__ */ jsxs("span", { className: "text-destructive", children: [
+          " \xB7 ",
+          item.error
+        ] }),
+        item.mediaId && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+          " \xB7 ",
+          item.mediaId.slice(0, 8),
+          "\u2026"
+        ] })
+      ] })
+    ] }),
+    onRemove && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "sm",
+        variant: "ghost",
+        "aria-label": t("dataEntry.upload.removeFile", { name: item.name }),
+        onClick: () => onRemove(item.uid),
+        children: /* @__PURE__ */ jsx(X, { className: "size-4", "aria-hidden": "true" })
+      }
+    )
+  ] }, item.uid)) });
+}
+export {
+  Upload,
+  collectUploadCommitActions,
+  createUploadItem2 as createUploadItem,
+  useUploadDraft2 as useUploadDraft
+};

package/dist/components/data-entry/use-upload-draft.d.ts

@@ -0,0 +1,25 @@
+import { type UploadCommitAction, type UploadFileItem } from "./upload-types";
+export type UploadDraftState = {
+    /** Item rendered in UI (may reflect pending delete/replace). */
+    display: UploadFileItem | null;
+    /** Server baseline — restored on undo remove/replace. */
+    baseline: UploadFileItem | null;
+    canUndoRemove: boolean;
+    canUndoReplace: boolean;
+};
+export type UseUploadDraftOptions = {
+    value?: UploadFileItem | null;
+    onChange?: (item: UploadFileItem | null) => void;
+};
+/**
+ * Single-value draft for avatar / picture — coordinates with media-service:
+ * soft-delete only on form commit; undo before save (no restore API).
+ */
+export declare function useUploadDraft({ value, onChange }: UseUploadDraftOptions): {
+    state: UploadDraftState;
+    markRemove: () => void;
+    undoRemove: () => void;
+    stageReplace: (file: File) => void;
+    undoReplace: () => void;
+    getCommitActions: () => UploadCommitAction;
+};

package/dist/components/data-entry/use-upload-draft.js

@@ -0,0 +1,64 @@
+import * as React from "react";
+import {
+  createUploadItem,
+  revokePreviewUrl
+} from "./upload-types";
+function useUploadDraft({ value, onChange }) {
+  const [baseline, setBaseline] = React.useState(value ?? null);
+  React.useEffect(() => {
+    if (value && !value.pendingDelete && !value.pendingReplace && value.mediaId) {
+      setBaseline(value);
+    }
+  }, [value]);
+  const markRemove = React.useCallback(() => {
+    if (!value) return;
+    onChange?.({ ...value, pendingDelete: true, pendingReplace: false, status: "removed" });
+  }, [onChange, value]);
+  const undoRemove = React.useCallback(() => {
+    if (!baseline) {
+      onChange?.(null);
+      return;
+    }
+    onChange?.({ ...baseline, pendingDelete: false, pendingReplace: false, status: "done" });
+  }, [baseline, onChange]);
+  const stageReplace = React.useCallback(
+    (file) => {
+      revokePreviewUrl(value);
+      const next = createUploadItem(file, {
+        pendingReplace: Boolean(value?.mediaId),
+        replacesMediaId: value?.mediaId,
+        status: "idle"
+      });
+      onChange?.({ ...next, pendingDelete: false });
+    },
+    [onChange, value]
+  );
+  const undoReplace = React.useCallback(() => {
+    revokePreviewUrl(value);
+    onChange?.(baseline ? { ...baseline, pendingReplace: false, pendingDelete: false } : null);
+  }, [baseline, onChange, value]);
+  const getCommitActions = React.useCallback(() => {
+    if (!value) return { deleteMediaIds: [], promoteMediaIds: [] };
+    const deleteMediaIds = [];
+    if (value.pendingDelete && value.mediaId) deleteMediaIds.push(value.mediaId);
+    if (value.pendingReplace && value.replacesMediaId) deleteMediaIds.push(value.replacesMediaId);
+    const promoteMediaIds = value.mediaId && !value.pendingDelete && value.status !== "error" ? [value.mediaId] : [];
+    return {
+      deleteMediaIds: [...new Set(deleteMediaIds)],
+      promoteMediaIds: [...new Set(promoteMediaIds)]
+    };
+  }, [value]);
+  const state = React.useMemo(
+    () => ({
+      display: value ?? null,
+      baseline,
+      canUndoRemove: Boolean(value?.pendingDelete),
+      canUndoReplace: Boolean(value?.pendingReplace)
+    }),
+    [baseline, value]
+  );
+  return { state, markRemove, undoRemove, stageReplace, undoReplace, getCommitActions };
+}
+export {
+  useUploadDraft
+};

package/dist/components/data-grid/data-grid.d.ts

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { type ColumnDef, type ColumnFiltersState, type OnChangeFn, type PaginationState, type RowSelectionState, type RowData, type SortingState, type VisibilityState } from "@tanstack/react-table";
+import type { TableDensityProp } from "../../props/vocabulary";
+export type DataGridDensity = TableDensityProp;
+export type { ColumnDef } from "@tanstack/react-table";
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        label?: React.ReactNode;
+    }
+}
+export interface DataGridProps<T> {
+    columns: ColumnDef<T, unknown>[];
+    data: T[];
+    getRowId?: (row: T) => string;
+    /** Stable id key when getRowId is omitted (defaults to "id"). */
+    rowIdKey?: keyof T & string;
+    sorting?: SortingState;
+    onSortingChange?: OnChangeFn<SortingState>;
+    columnFilters?: ColumnFiltersState;
+    onColumnFiltersChange?: OnChangeFn<ColumnFiltersState>;
+    globalFilter?: string;
+    onGlobalFilterChange?: OnChangeFn<string>;
+    pagination?: PaginationState;
+    onPaginationChange?: OnChangeFn<PaginationState>;
+    /** Total server row count (manual pagination) — drives the page count. */
+    rowCount?: number;
+    rowSelection?: RowSelectionState;
+    onRowSelectionChange?: OnChangeFn<RowSelectionState>;
+    enableRowSelection?: boolean;
+    columnVisibility?: VisibilityState;
+    onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
+    manualSorting?: boolean;
+    manualFiltering?: boolean;
+    manualPagination?: boolean;
+    density?: DataGridDensity;
+    onDensityChange?: (d: DataGridDensity) => void;
+    loading?: boolean;
+    empty?: React.ReactNode;
+    onRowClick?: (row: T) => void;
+    className?: string;
+    children?: React.ReactNode;
+}
+interface DataGridComponent {
+    <T>(props: DataGridProps<T>): React.ReactElement;
+    Toolbar: React.FC<{
+        children?: React.ReactNode;
+        className?: string;
+    }>;
+    Search: React.FC<{
+        placeholder?: string;
+        className?: string;
+    }>;
+    ViewOptions: React.FC<{
+        className?: string;
+    }>;
+    BulkActions: React.FC<{
+        children: (count: number) => React.ReactNode;
+    }>;
+    DensityToggle: React.FC;
+    Content: React.FC;
+    Pagination: React.FC<{
+        pageSizeOptions?: number[];
+        className?: string;
+    }>;
+    displayName?: string;
+}
+export declare const DataGrid: DataGridComponent;