xladmin-import-export 0.1.0

package/README.md

@@ -0,0 +1,55 @@
+<div align="center">
+  <a href="./README.md">
+    <img src="https://img.shields.io/badge/English-blue?style=for-the-badge" alt="English">
+  </a>
+  <a href="./docs/README.ru.md">
+    <img src="https://img.shields.io/badge/%D0%A0%D1%83%D1%81%D1%81%D0%BA%D0%B8%D0%B9-red?style=for-the-badge" alt="Русский">
+  </a>
+</div>
+
+# xladmin-import-export frontend
+
+Optional frontend extension for `xladmin` that adds import/export actions to model pages.
+
+## Features
+
+- export and import icon buttons for the model toolbar
+- export dialog with format and field selection
+- import dialog with file upload, conflict mode, validation preview, and commit
+- works with `xladmin` selection state, including "select all current results"
+
+## Install
+
+```bash
+npm i xladmin xladmin-import-export
+```
+
+## Minimal Example
+
+```tsx
+import {ModelPage} from 'xladmin';
+import {
+  ModelImportExportActions,
+  createAxiosXLAdminImportExportClient,
+} from 'xladmin-import-export';
+
+const importExportClient = createAxiosXLAdminImportExportClient(api);
+
+<ModelPage
+  client={client}
+  basePath="/admin"
+  slug="users"
+  renderBeforePagination={(context) => (
+    <ModelImportExportActions client={importExportClient} context={context} />
+  )}
+/>
+```
+
+## Development
+
+```bash
+cd xladmin-frontend
+npm run test --workspace ./packages/xladmin-import-export
+npm run check --workspace ./packages/xladmin-import-export
+npm run build --workspace ./packages/xladmin-import-export
+```

package/dist/index.d.ts

@@ -0,0 +1,110 @@
+import { XLAdminRequestOptions, ModelPageToolbarContext } from 'xladmin';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ImportExportFieldMeta = {
+    name: string;
+    label: string;
+    default_selected: boolean;
+};
+type ImportConflictMode = 'auto_generate_pk' | 'update_existing' | 'skip_existing';
+type ImportExportFormat = 'xlsx' | 'csv' | 'json';
+type ImportExportMetaResponse = {
+    model_slug: string;
+    export_formats: ImportExportFormat[];
+    import_formats: ImportExportFormat[];
+    export_fields: ImportExportFieldMeta[];
+    import_fields: ImportExportFieldMeta[];
+    pk_field: string;
+    pk_type: string;
+    available_conflict_modes: ImportConflictMode[];
+};
+type ImportValidationResponse = {
+    summary: {
+        total_rows: number;
+        create: number;
+        update: number;
+        skip: number;
+        errors: number;
+    };
+    created_preview: Array<{
+        row_number: number;
+        label: string;
+    }>;
+    updated_preview: Array<{
+        row_number: number;
+        label: string;
+    }>;
+    skipped_preview: Array<{
+        row_number: number;
+        label: string;
+    }>;
+    errors: Array<{
+        row_number: number;
+        field?: string | null;
+        message: string;
+    }>;
+};
+type ImportCommitResponse = {
+    created: number;
+    updated: number;
+    skipped: number;
+};
+type ImportExportSelectionScope = {
+    q?: string;
+    sort?: string;
+    filters?: Record<string, string>;
+};
+type ExportRequestPayload = {
+    format: ImportExportFormat;
+    fields: string[];
+    ids: Array<string | number>;
+    select_all?: boolean;
+    selection_scope?: ImportExportSelectionScope;
+};
+type ImportRequestPayload = {
+    file: File;
+    format: ImportExportFormat;
+    fields: string[];
+    conflict_mode: ImportConflictMode;
+};
+type DownloadExportResponse = {
+    blob: Blob;
+    filename: string;
+};
+type XLAdminImportExportAxiosLike = {
+    get: <T>(url: string, config?: {
+        signal?: AbortSignal;
+    }) => Promise<{
+        data: T;
+    } | T>;
+    post: <T>(url: string, body?: unknown, config?: {
+        signal?: AbortSignal;
+        headers?: Record<string, string>;
+        responseType?: 'blob';
+    }) => Promise<{
+        data: T;
+        headers?: Record<string, string>;
+    } | T>;
+};
+type XLAdminImportExportClient = {
+    getMeta: (slug: string, options?: XLAdminRequestOptions) => Promise<ImportExportMetaResponse>;
+    downloadExport: (slug: string, payload: ExportRequestPayload, options?: XLAdminRequestOptions) => Promise<DownloadExportResponse>;
+    validateImport: (slug: string, payload: ImportRequestPayload, options?: XLAdminRequestOptions) => Promise<ImportValidationResponse>;
+    commitImport: (slug: string, payload: ImportRequestPayload, options?: XLAdminRequestOptions) => Promise<ImportCommitResponse>;
+};
+type XLAdminImportExportFetchClientConfig = {
+    baseUrl: string;
+    fetch?: typeof globalThis.fetch;
+    headers?: HeadersInit | (() => HeadersInit | Promise<HeadersInit>);
+    credentials?: RequestCredentials;
+};
+declare function createAxiosXLAdminImportExportClient(api: XLAdminImportExportAxiosLike): XLAdminImportExportClient;
+declare function createFetchXLAdminImportExportClient(config: XLAdminImportExportFetchClientConfig): XLAdminImportExportClient;
+
+type ModelImportExportActionsProps = {
+    client: XLAdminImportExportClient;
+    context: ModelPageToolbarContext;
+};
+declare function ModelImportExportActions({ client, context }: ModelImportExportActionsProps): react_jsx_runtime.JSX.Element | null;
+
+export { type DownloadExportResponse, type ExportRequestPayload, type ImportCommitResponse, type ImportConflictMode, type ImportExportFieldMeta, type ImportExportFormat, type ImportExportMetaResponse, type ImportExportSelectionScope, type ImportRequestPayload, type ImportValidationResponse, ModelImportExportActions, type XLAdminImportExportAxiosLike, type XLAdminImportExportClient, type XLAdminImportExportFetchClientConfig, createAxiosXLAdminImportExportClient, createFetchXLAdminImportExportClient };

package/dist/index.js

@@ -0,0 +1,729 @@
+// src/client.ts
+function createAxiosXLAdminImportExportClient(api) {
+  return {
+    async getMeta(slug, options) {
+      return unwrap(await api.get(`/xladmin/models/${slug}/import-export/meta/`, {
+        signal: options == null ? void 0 : options.signal
+      }));
+    },
+    async downloadExport(slug, payload, options) {
+      var _a;
+      const response = await api.post(
+        `/xladmin/models/${slug}/export/`,
+        payload,
+        {
+          signal: options == null ? void 0 : options.signal,
+          responseType: "blob"
+        }
+      );
+      const headers = isWrappedResponse(response) && response.headers ? response.headers : void 0;
+      const blob = unwrap(response);
+      return {
+        blob,
+        filename: (_a = resolveFilename(headers)) != null ? _a : `${slug}-export.${payload.format}`
+      };
+    },
+    async validateImport(slug, payload, options) {
+      return unwrap(await api.post(
+        `/xladmin/models/${slug}/import/validate/`,
+        await buildImportFormData(payload),
+        {
+          signal: options == null ? void 0 : options.signal,
+          headers: {}
+        }
+      ));
+    },
+    async commitImport(slug, payload, options) {
+      return unwrap(await api.post(
+        `/xladmin/models/${slug}/import/commit/`,
+        await buildImportFormData(payload),
+        {
+          signal: options == null ? void 0 : options.signal,
+          headers: {}
+        }
+      ));
+    }
+  };
+}
+function createFetchXLAdminImportExportClient(config) {
+  var _a;
+  const fetchImpl = (_a = config.fetch) != null ? _a : globalThis.fetch;
+  if (!fetchImpl) {
+    throw new Error("Fetch API is not available in the current environment.");
+  }
+  return {
+    async getMeta(slug, options) {
+      return await requestJson(fetchImpl, config, "GET", `/xladmin/models/${slug}/import-export/meta/`, void 0, options == null ? void 0 : options.signal);
+    },
+    async downloadExport(slug, payload, options) {
+      var _a2;
+      const response = await request(fetchImpl, config, "POST", `/xladmin/models/${slug}/export/`, payload, options == null ? void 0 : options.signal);
+      return {
+        blob: await response.blob(),
+        filename: (_a2 = resolveFilename(headersToRecord(response.headers))) != null ? _a2 : `${slug}-export.${payload.format}`
+      };
+    },
+    async validateImport(slug, payload, options) {
+      return await requestJson(
+        fetchImpl,
+        config,
+        "POST",
+        `/xladmin/models/${slug}/import/validate/`,
+        await buildImportFormData(payload),
+        options == null ? void 0 : options.signal
+      );
+    },
+    async commitImport(slug, payload, options) {
+      return await requestJson(
+        fetchImpl,
+        config,
+        "POST",
+        `/xladmin/models/${slug}/import/commit/`,
+        await buildImportFormData(payload),
+        options == null ? void 0 : options.signal
+      );
+    }
+  };
+}
+async function buildImportFormData(payload) {
+  const formData = new FormData();
+  formData.append("file", await createStableUploadFile(payload.file), payload.file.name);
+  formData.append("format", payload.format);
+  formData.append("conflict_mode", payload.conflict_mode);
+  formData.append("fields", JSON.stringify(payload.fields));
+  return formData;
+}
+async function createStableUploadFile(file) {
+  const buffer = await file.arrayBuffer();
+  return new File([buffer], file.name, {
+    type: file.type,
+    lastModified: file.lastModified
+  });
+}
+function isWrappedResponse(response) {
+  return typeof response === "object" && response !== null && "data" in response;
+}
+function unwrap(response) {
+  return isWrappedResponse(response) ? response.data : response;
+}
+function resolveFilename(headers) {
+  var _a, _b;
+  const contentDisposition = (_a = headers == null ? void 0 : headers["content-disposition"]) != null ? _a : headers == null ? void 0 : headers["Content-Disposition"];
+  if (!contentDisposition) {
+    return null;
+  }
+  const match = /filename="([^"]+)"/.exec(contentDisposition);
+  return (_b = match == null ? void 0 : match[1]) != null ? _b : null;
+}
+function headersToRecord(headers) {
+  const normalizedHeaders = {};
+  headers.forEach((value, key) => {
+    normalizedHeaders[key] = value;
+  });
+  return normalizedHeaders;
+}
+async function requestJson(fetchImpl, config, method, path, body, signal) {
+  const response = await request(fetchImpl, config, method, path, body, signal);
+  return await response.json();
+}
+async function request(fetchImpl, config, method, path, body, signal) {
+  var _a;
+  const headers = await resolveHeaders(config.headers);
+  const isFormData = body instanceof FormData;
+  const response = await fetchImpl(buildRequestUrl(config.baseUrl, path), {
+    method,
+    signal,
+    credentials: (_a = config.credentials) != null ? _a : "include",
+    headers: isFormData ? headers : {
+      "Content-Type": "application/json",
+      ...headers
+    },
+    body: body === void 0 ? void 0 : isFormData ? body : JSON.stringify(body)
+  });
+  if (!response.ok) {
+    let detail = `${response.status} ${response.statusText}`;
+    try {
+      const errorData = await response.json();
+      if (typeof errorData.detail === "string" && errorData.detail) {
+        detail = errorData.detail;
+      }
+    } catch {
+      const fallbackText = await response.text().catch(() => "");
+      if (fallbackText.trim()) {
+        detail = fallbackText.trim();
+      }
+    }
+    throw new Error(detail);
+  }
+  return response;
+}
+async function resolveHeaders(headers) {
+  if (headers === void 0) {
+    return {};
+  }
+  if (typeof headers === "function") {
+    return headers();
+  }
+  return headers;
+}
+function buildRequestUrl(baseUrl, path) {
+  const normalizedBaseUrl = baseUrl.replace(/\/+$/, "");
+  const normalizedPath = path.startsWith("/") ? path : `/${path}`;
+  if (/^https?:\/\//i.test(normalizedBaseUrl)) {
+    return `${normalizedBaseUrl}${normalizedPath}`;
+  }
+  return `${normalizedBaseUrl}${normalizedPath}`;
+}
+
+// src/components/ModelImportExportActions.tsx
+import { useEffect, useMemo, useState } from "react";
+import DownloadIcon from "@mui/icons-material/Download";
+import UploadIcon from "@mui/icons-material/Upload";
+import {
+  Alert,
+  Box,
+  Button,
+  Checkbox,
+  CircularProgress,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  FormControl,
+  FormControlLabel,
+  IconButton,
+  InputLabel,
+  List,
+  ListItem,
+  MenuItem,
+  Select,
+  Stack,
+  Tooltip,
+  Typography
+} from "@mui/material";
+import { useAdminLocale } from "xladmin";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function ModelImportExportActions({ client, context }) {
+  const locale = useAdminLocale();
+  const messages = useMemo(() => getMessages(locale), [locale]);
+  const [meta, setMeta] = useState(null);
+  const [isUnavailable, setIsUnavailable] = useState(false);
+  const [error, setError] = useState(null);
+  const [exportOpen, setExportOpen] = useState(false);
+  const [importOpen, setImportOpen] = useState(false);
+  const [exportFormat, setExportFormat] = useState("xlsx");
+  const [selectedExportFields, setSelectedExportFields] = useState([]);
+  const [isExporting, setIsExporting] = useState(false);
+  const [importFormat, setImportFormat] = useState("xlsx");
+  const [selectedImportFields, setSelectedImportFields] = useState([]);
+  const [conflictMode, setConflictMode] = useState("update_existing");
+  const [importFile, setImportFile] = useState(null);
+  const [isValidating, setIsValidating] = useState(false);
+  const [isImporting, setIsImporting] = useState(false);
+  const [validationResult, setValidationResult] = useState(null);
+  const [validationError, setValidationError] = useState(null);
+  const [importSuccess, setImportSuccess] = useState(null);
+  const resetImportValidation = () => {
+    setValidationResult(null);
+    setValidationError(null);
+    setImportSuccess(null);
+  };
+  useEffect(() => {
+    let isMounted = true;
+    setMeta(null);
+    setIsUnavailable(false);
+    setError(null);
+    client.getMeta(context.slug).then((response) => {
+      var _a, _b, _c;
+      if (!isMounted) {
+        return;
+      }
+      setMeta(response);
+      setExportFormat((_a = response.export_formats[0]) != null ? _a : "xlsx");
+      setSelectedExportFields(getDefaultSelectedFields(response.export_fields));
+      setImportFormat((_b = response.import_formats[0]) != null ? _b : "xlsx");
+      setSelectedImportFields(getDefaultSelectedFields(response.import_fields));
+      setConflictMode((_c = response.available_conflict_modes[0]) != null ? _c : "update_existing");
+    }).catch((reason) => {
+      if (!isMounted) {
+        return;
+      }
+      const message = reason instanceof Error ? reason.message : "Failed to load import/export settings.";
+      if (message.includes("404")) {
+        setIsUnavailable(true);
+        return;
+      }
+      setError(message);
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [client, context.slug]);
+  if (isUnavailable || meta === null) {
+    return null;
+  }
+  const exportCount = context.selectionCount > 0 ? context.selectionCount : context.total;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.5, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Tooltip, { title: messages.exportButton, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => setExportOpen(true), disabled: Boolean(error), children: /* @__PURE__ */ jsx(DownloadIcon, { fontSize: "small" }) }) }) }),
+      /* @__PURE__ */ jsx(Tooltip, { title: messages.importButton, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(IconButton, { size: "small", onClick: () => setImportOpen(true), disabled: Boolean(error), children: /* @__PURE__ */ jsx(UploadIcon, { fontSize: "small" }) }) }) })
+    ] }),
+    /* @__PURE__ */ jsxs(Dialog, { open: exportOpen, onClose: () => !isExporting && setExportOpen(false), fullWidth: true, maxWidth: "md", children: [
+      /* @__PURE__ */ jsx(DialogTitle, { sx: { px: 3, pt: 3, pb: 1 }, children: messages.exportTitle }),
+      /* @__PURE__ */ jsx(DialogContent, { sx: { px: 3, pb: 3, pt: 0.5 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, children: [
+        error ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: error }) : null,
+        /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: messages.exportCount(exportCount, context.selectionCount > 0) }),
+        /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+          /* @__PURE__ */ jsx(InputLabel, { id: "export-format-label", children: messages.formatLabel }),
+          /* @__PURE__ */ jsx(
+            Select,
+            {
+              labelId: "export-format-label",
+              value: exportFormat,
+              label: messages.formatLabel,
+              onChange: (event) => setExportFormat(event.target.value),
+              children: meta.export_formats.map((format) => /* @__PURE__ */ jsx(MenuItem, { value: format, children: format.toUpperCase() }, format))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          FieldsSelector,
+          {
+            title: messages.exportFieldsLabel,
+            fields: meta.export_fields,
+            selectedFields: selectedExportFields,
+            onChange: setSelectedExportFields,
+            allLabel: messages.selectAllFields,
+            noneLabel: messages.clearFields
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 3, pt: 0, gap: 1 }, children: [
+        /* @__PURE__ */ jsx(Button, { onClick: () => setExportOpen(false), disabled: isExporting, children: messages.cancel }),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "contained",
+            onClick: () => void handleExport({
+              client,
+              context,
+              format: exportFormat,
+              fields: selectedExportFields,
+              setIsExporting,
+              onDone: () => setExportOpen(false)
+            }),
+            disabled: isExporting || selectedExportFields.length === 0,
+            children: isExporting ? messages.exporting : messages.exportConfirm
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Dialog,
+      {
+        open: importOpen,
+        onClose: () => !isValidating && !isImporting && setImportOpen(false),
+        fullWidth: true,
+        maxWidth: "md",
+        children: [
+          /* @__PURE__ */ jsx(DialogTitle, { sx: { px: 3, pt: 3, pb: 1 }, children: messages.importTitle }),
+          /* @__PURE__ */ jsx(DialogContent, { sx: { px: 3, pb: 3, pt: 0.5 }, children: /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, children: [
+            validationError ? /* @__PURE__ */ jsx(Alert, { severity: "error", children: validationError }) : null,
+            importSuccess ? /* @__PURE__ */ jsx(Alert, { severity: "success", children: importSuccess }) : null,
+            /* @__PURE__ */ jsxs(Stack, { direction: { xs: "column", sm: "row" }, sx: { pt: 1 }, spacing: 1.5, children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  variant: "outlined",
+                  component: "label",
+                  sx: { whiteSpace: "nowrap", flexShrink: 0, minWidth: 132 },
+                  children: [
+                    importFile ? importFile.name : messages.chooseFile,
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        hidden: true,
+                        type: "file",
+                        accept: ".xlsx,.csv,.json",
+                        onChange: (event) => {
+                          var _a, _b;
+                          const file = (_b = (_a = event.target.files) == null ? void 0 : _a[0]) != null ? _b : null;
+                          setImportFile(file);
+                          resetImportValidation();
+                          if (!file) {
+                            return;
+                          }
+                          const nextFormat = inferFormatFromFile(file.name);
+                          if (nextFormat !== null && meta.import_formats.includes(nextFormat)) {
+                            setImportFormat(nextFormat);
+                          }
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, children: [
+                /* @__PURE__ */ jsx(InputLabel, { id: "import-format-label", children: messages.formatLabel }),
+                /* @__PURE__ */ jsx(
+                  Select,
+                  {
+                    labelId: "import-format-label",
+                    value: importFormat,
+                    label: messages.formatLabel,
+                    onChange: (event) => {
+                      resetImportValidation();
+                      setImportFormat(event.target.value);
+                    },
+                    children: meta.import_formats.map((format) => /* @__PURE__ */ jsx(MenuItem, { value: format, children: format.toUpperCase() }, format))
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(FormControl, { fullWidth: true, sx: { mt: 0.5 }, children: [
+              /* @__PURE__ */ jsx(InputLabel, { id: "import-conflict-mode-label", children: messages.conflictModeLabel }),
+              /* @__PURE__ */ jsx(
+                Select,
+                {
+                  labelId: "import-conflict-mode-label",
+                  value: conflictMode,
+                  label: messages.conflictModeLabel,
+                  onChange: (event) => {
+                    resetImportValidation();
+                    setConflictMode(event.target.value);
+                  },
+                  children: meta.available_conflict_modes.map((mode) => /* @__PURE__ */ jsx(MenuItem, { value: mode, children: messages.conflictMode(mode) }, mode))
+                }
+              )
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              FieldsSelector,
+              {
+                title: messages.importFieldsLabel,
+                fields: meta.import_fields,
+                selectedFields: selectedImportFields,
+                onChange: (value) => {
+                  resetImportValidation();
+                  setSelectedImportFields(value);
+                },
+                allLabel: messages.selectAllFields,
+                noneLabel: messages.clearFields
+              }
+            ),
+            /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outlined",
+                  onClick: () => void handleValidateImport({
+                    client,
+                    slug: context.slug,
+                    file: importFile,
+                    format: importFormat,
+                    fields: selectedImportFields,
+                    conflictMode,
+                    setIsValidating,
+                    setValidationResult,
+                    setValidationError
+                  }),
+                  disabled: !importFile || selectedImportFields.length === 0 || isValidating || isImporting,
+                  children: messages.validate
+                }
+              ),
+              isValidating ? /* @__PURE__ */ jsx(CircularProgress, { size: 20 }) : null
+            ] }),
+            validationResult ? /* @__PURE__ */ jsx(ValidationSummary, { messages, result: validationResult }) : null
+          ] }) }),
+          /* @__PURE__ */ jsxs(DialogActions, { sx: { px: 3, pb: 3, pt: 0, gap: 1 }, children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                onClick: () => setImportOpen(false),
+                disabled: isValidating || isImporting,
+                children: messages.cancel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "contained",
+                onClick: () => void handleCommitImport({
+                  client,
+                  slug: context.slug,
+                  file: importFile,
+                  format: importFormat,
+                  fields: selectedImportFields,
+                  conflictMode,
+                  setIsImporting,
+                  setValidationError,
+                  setImportSuccess,
+                  refresh: context.refresh,
+                  onSuccess: () => {
+                    setValidationResult(null);
+                    setImportFile(null);
+                  },
+                  messages
+                }),
+                disabled: !importFile || !validationResult || validationResult.summary.errors > 0 || isImporting,
+                children: isImporting ? messages.importing : messages.confirmImport
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function FieldsSelector({
+  title,
+  fields,
+  selectedFields,
+  onChange,
+  allLabel,
+  noneLabel
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { children: [
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", alignItems: "center", children: [
+      /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: title }),
+      /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => onChange(fields.map((field) => field.name)), children: allLabel }),
+        /* @__PURE__ */ jsx(Button, { size: "small", onClick: () => onChange([]), children: noneLabel })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      List,
+      {
+        dense: true,
+        disablePadding: true,
+        sx: {
+          maxHeight: 280,
+          overflow: "auto"
+        },
+        children: fields.map((field) => /* @__PURE__ */ jsx(ListItem, { disableGutters: true, sx: { py: 0.125 }, children: /* @__PURE__ */ jsx(
+          FormControlLabel,
+          {
+            sx: { m: 0, alignItems: "center" },
+            control: /* @__PURE__ */ jsx(
+              Checkbox,
+              {
+                size: "small",
+                checked: selectedFields.includes(field.name),
+                onChange: (_, checked) => {
+                  if (checked) {
+                    onChange([...selectedFields, field.name]);
+                    return;
+                  }
+                  onChange(selectedFields.filter((item) => item !== field.name));
+                }
+              }
+            ),
+            label: /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 0.75, alignItems: "center", sx: { minHeight: 24 }, children: [
+              /* @__PURE__ */ jsx(Typography, { variant: "body2", sx: { lineHeight: 1.35 }, children: field.label }),
+              field.label !== field.name ? /* @__PURE__ */ jsx(Typography, { variant: "caption", color: "text.secondary", sx: { lineHeight: 1.2 }, children: field.name }) : null
+            ] })
+          }
+        ) }, field.name))
+      }
+    )
+  ] });
+}
+function ValidationSummary({
+  messages,
+  result
+}) {
+  return /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, children: [
+    /* @__PURE__ */ jsx(Typography, { variant: "subtitle2", children: messages.validationSummaryTitle }),
+    /* @__PURE__ */ jsx(Typography, { color: "text.secondary", children: messages.validationSummary(result) }),
+    result.errors.length > 0 ? /* @__PURE__ */ jsx(Alert, { severity: "warning", children: /* @__PURE__ */ jsx(Stack, { spacing: 0.5, children: result.errors.slice(0, 10).map((error) => /* @__PURE__ */ jsxs(Typography, { variant: "body2", children: [
+      "#",
+      error.row_number,
+      ": ",
+      error.message
+    ] }, `${error.row_number}-${error.message}`)) }) }) : null
+  ] });
+}
+function getDefaultSelectedFields(fields) {
+  const defaultSelected = fields.filter((field) => field.default_selected).map((field) => field.name);
+  if (defaultSelected.length > 0) {
+    return defaultSelected;
+  }
+  return fields.map((field) => field.name);
+}
+async function handleExport({
+  client,
+  context,
+  format,
+  fields,
+  setIsExporting,
+  onDone
+}) {
+  setIsExporting(true);
+  try {
+    const response = await client.downloadExport(context.slug, {
+      format,
+      fields,
+      ids: context.isAllMatchingSelected ? [] : context.selectedIds,
+      select_all: context.isAllMatchingSelected || context.selectedIds.length === 0,
+      selection_scope: {
+        q: context.appliedQuery || void 0,
+        sort: context.sortValue || void 0,
+        filters: context.appliedFilters
+      }
+    });
+    const objectUrl = URL.createObjectURL(response.blob);
+    const link = document.createElement("a");
+    link.href = objectUrl;
+    link.download = response.filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(objectUrl);
+    onDone();
+  } finally {
+    setIsExporting(false);
+  }
+}
+async function handleValidateImport({
+  client,
+  slug,
+  file,
+  format,
+  fields,
+  conflictMode,
+  setIsValidating,
+  setValidationResult,
+  setValidationError
+}) {
+  if (!file) {
+    return;
+  }
+  setIsValidating(true);
+  setValidationError(null);
+  try {
+    const result = await client.validateImport(slug, {
+      file,
+      format,
+      fields,
+      conflict_mode: conflictMode
+    });
+    setValidationResult(result);
+  } catch (reason) {
+    setValidationResult(null);
+    setValidationError(reason instanceof Error ? reason.message : "Validation failed.");
+  } finally {
+    setIsValidating(false);
+  }
+}
+async function handleCommitImport({
+  client,
+  slug,
+  file,
+  format,
+  fields,
+  conflictMode,
+  setIsImporting,
+  setValidationError,
+  setImportSuccess,
+  refresh,
+  onSuccess,
+  messages
+}) {
+  if (!file) {
+    return;
+  }
+  setIsImporting(true);
+  setValidationError(null);
+  try {
+    const result = await client.commitImport(slug, {
+      file,
+      format,
+      fields,
+      conflict_mode: conflictMode
+    });
+    await refresh();
+    onSuccess();
+    setImportSuccess(messages.importSuccess(result));
+  } catch (reason) {
+    setValidationError(reason instanceof Error ? reason.message : "Import failed.");
+  } finally {
+    setIsImporting(false);
+  }
+}
+function inferFormatFromFile(fileName) {
+  const normalized = fileName.toLowerCase();
+  if (normalized.endsWith(".xlsx")) {
+    return "xlsx";
+  }
+  if (normalized.endsWith(".csv")) {
+    return "csv";
+  }
+  if (normalized.endsWith(".json")) {
+    return "json";
+  }
+  return null;
+}
+function getMessages(locale) {
+  if (locale === "ru") {
+    return {
+      exportButton: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442",
+      importButton: "\u0418\u043C\u043F\u043E\u0440\u0442",
+      exportTitle: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442 \u0434\u0430\u043D\u043D\u044B\u0445",
+      importTitle: "\u0418\u043C\u043F\u043E\u0440\u0442 \u0434\u0430\u043D\u043D\u044B\u0445",
+      exporting: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442...",
+      importing: "\u0418\u043C\u043F\u043E\u0440\u0442...",
+      exportConfirm: "\u042D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u0442\u044C",
+      confirmImport: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044C \u0438\u043C\u043F\u043E\u0440\u0442",
+      cancel: "\u041E\u0442\u043C\u0435\u043D\u0430",
+      formatLabel: "\u0424\u043E\u0440\u043C\u0430\u0442",
+      exportFieldsLabel: "\u041F\u043E\u043B\u044F \u0434\u043B\u044F \u044D\u043A\u0441\u043F\u043E\u0440\u0442\u0430",
+      importFieldsLabel: "\u041F\u043E\u043B\u044F \u0434\u043B\u044F \u0438\u043C\u043F\u043E\u0440\u0442\u0430",
+      selectAllFields: "\u0412\u0441\u0435",
+      clearFields: "\u041E\u0447\u0438\u0441\u0442\u0438\u0442\u044C",
+      chooseFile: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0444\u0430\u0439\u043B",
+      validate: "\u041F\u0440\u043E\u0432\u0435\u0440\u0438\u0442\u044C",
+      conflictModeLabel: "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u043F\u0440\u0438 \u0441\u043E\u0432\u043F\u0430\u0434\u0435\u043D\u0438\u0438 PK",
+      validationSummaryTitle: "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442 \u043F\u0440\u043E\u0432\u0435\u0440\u043A\u0438",
+      exportCount: (count, selected) => selected ? `\u0411\u0443\u0434\u0435\u0442 \u044D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u043E \u043E\u0431\u044A\u0435\u043A\u0442\u043E\u0432: ${count}` : `\u0411\u0443\u0434\u0443\u0442 \u044D\u043A\u0441\u043F\u043E\u0440\u0442\u0438\u0440\u043E\u0432\u0430\u043D\u044B \u0432\u0441\u0435 \u043E\u0431\u044A\u0435\u043A\u0442\u044B \u0442\u0435\u043A\u0443\u0449\u0435\u0433\u043E \u0440\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u0430: ${count}`,
+      conflictMode: (mode) => ({
+        auto_generate_pk: "\u0421\u0433\u0435\u043D\u0435\u0440\u0438\u0440\u043E\u0432\u0430\u0442\u044C \u043D\u043E\u0432\u044B\u0439 PK",
+        update_existing: "\u041E\u0431\u043D\u043E\u0432\u0438\u0442\u044C \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0435",
+        skip_existing: "\u041F\u0440\u043E\u043F\u0443\u0441\u0442\u0438\u0442\u044C \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u044E\u0449\u0438\u0435"
+      })[mode],
+      validationSummary: (result) => `\u0412\u0441\u0435\u0433\u043E \u0441\u0442\u0440\u043E\u043A: ${result.summary.total_rows}. \u0421\u043E\u0437\u0434\u0430\u0442\u044C: ${result.summary.create}. \u041E\u0431\u043D\u043E\u0432\u0438\u0442\u044C: ${result.summary.update}. \u041F\u0440\u043E\u043F\u0443\u0441\u0442\u0438\u0442\u044C: ${result.summary.skip}. \u041E\u0448\u0438\u0431\u043E\u043A: ${result.summary.errors}.`,
+      importSuccess: (result) => `\u0418\u043C\u043F\u043E\u0440\u0442 \u0437\u0430\u0432\u0435\u0440\u0448\u0451\u043D. \u0421\u043E\u0437\u0434\u0430\u043D\u043E: ${result.created}, \u043E\u0431\u043D\u043E\u0432\u043B\u0435\u043D\u043E: ${result.updated}, \u043F\u0440\u043E\u043F\u0443\u0449\u0435\u043D\u043E: ${result.skipped}.`
+    };
+  }
+  return {
+    exportButton: "Export",
+    importButton: "Import",
+    exportTitle: "Export data",
+    importTitle: "Import data",
+    exporting: "Exporting...",
+    importing: "Importing...",
+    exportConfirm: "Export",
+    confirmImport: "Confirm import",
+    cancel: "Cancel",
+    formatLabel: "Format",
+    exportFieldsLabel: "Fields to export",
+    importFieldsLabel: "Fields to import",
+    selectAllFields: "All",
+    clearFields: "Clear",
+    chooseFile: "Choose file",
+    validate: "Validate",
+    conflictModeLabel: "Conflict mode",
+    validationSummaryTitle: "Validation summary",
+    exportCount: (count, selected) => selected ? `Objects to export: ${count}` : `All objects from the current result will be exported: ${count}`,
+    conflictMode: (mode) => ({
+      auto_generate_pk: "Auto-generate PK",
+      update_existing: "Update existing",
+      skip_existing: "Skip existing"
+    })[mode],
+    validationSummary: (result) => `Rows: ${result.summary.total_rows}. Create: ${result.summary.create}. Update: ${result.summary.update}. Skip: ${result.summary.skip}. Errors: ${result.summary.errors}.`,
+    importSuccess: (result) => `Import completed. Created: ${result.created}, updated: ${result.updated}, skipped: ${result.skipped}.`
+  };
+}
+export {
+  ModelImportExportActions,
+  createAxiosXLAdminImportExportClient,
+  createFetchXLAdminImportExportClient
+};

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "xladmin-import-export",
+  "version": "0.1.0",
+  "description": "Optional import/export extension for xladmin.",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Artasov/xladmin.git",
+    "directory": "xladmin-frontend/packages/xladmin-import-export"
+  },
+  "homepage": "https://github.com/Artasov/xladmin/tree/main/xladmin-frontend/packages/xladmin-import-export",
+  "bugs": {
+    "url": "https://github.com/Artasov/xladmin/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "node ../../scripts/clean.mjs && tsup src/index.ts --format esm --dts",
+    "check": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --environment jsdom --pool threads"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.14.0 <12.0.0",
+    "@emotion/styled": ">=11.14.0 <12.0.0",
+    "@mui/icons-material": ">=7.0.0 <8.0.0",
+    "@mui/material": ">=7.0.0 <8.0.0",
+    "axios": ">=1.0.0 <2.0.0",
+    "react": ">=19.0.0 <20.0.0",
+    "react-dom": ">=19.0.0 <20.0.0",
+    "xladmin": ">=0.2.8 <1.0.0"
+  },
+  "peerDependenciesMeta": {
+    "axios": {
+      "optional": true
+    }
+  }
+}