ExportPopup

Portal-mounted popup that collects export options and emits an ExportRequest on submit. Ships built-in tabs for PDF, PNG, and XLSX; supports custom shallow or rich tabs for additional formats.

Imported from a separate package:

import { ExportPopup } from "@svar-ui/react-export-popup";

Usage

// Props
title?: string;              // header text (not localized). Default: ""
tabs?: TabSpec[];             // ordered tabs. Default: ["pdf", "png"]
initial?: Partial<ExportRequest>; // one-shot UI seed, read once at mount
excelTimeline?: boolean;      // show Simple/Timeline toggle on xlsx tab. Default: false
sizeOptions?: SizeOption[];   // size dropdown entries
htmlSize?: HtmlSize;          // content measurements for page-count hint
statusText?: string;          // footer info text

// Positioning (forwarded to inner Popup)
parent?: HTMLElement;
at?: TPosition;               // Default: "bottom"
left?: number;                // Default: 0
top?: number;                 // Default: 0

// Events
onExport?: (request: ExportRequest) => void;
onClose?: () => void;

Neither onExport nor onClose closes the popup - the caller unmounts it.

ExportRequest

The object emitted by onExport:

Field	Type	Description
format	string	Tab id: "pdf", "png", "xlsx", or custom
fileName	string	Suggested file name
data	unknown	Arbitrary data from rich tabs
skin	ExportAppearance	"light", "dark", "print", or "bw"
paper	PaperConfig	Page settings (PDF/PNG only)
excel	ExcelConfig	Spreadsheet settings (XLSX only)

PaperConfig

Field	Type	Description
size	SizeSpec	Paper size id or { width, height } in mm
landscape	boolean	Landscape orientation
pageMode	PageMode	"single", "poster", or "booklet"
fitSize	boolean	Fit content to page
scale	number	Scale factor
margins	RequestMargins	{ top, bottom, left, right } in mm
header	string	Page header text (empty string when off)
footer	string	Page footer text (empty string when off)
styles	string[]	Extra CSS URLs passed through

ExcelConfig

Field	Type	Description
visual	boolean	Timeline vs simple mode
columns	ExcelColumn[]	Column definitions with id, label, optional hidden
dateFormat	string	Date serialization format
sheetNames	string[]	Sheet name(s)
indent	"native" | "spaces"	Indent style

TabSpec

Each entry in tabs is either a built-in format string or an extra tab object:

• Built-in - "pdf", "png", or "xlsx"

• Shallow tab (ShallowTab) - settingless placeholder; exports { format, skin } only

  Field	Type	Description
  id	string	Unique tab id
  label	string	Tab label
  title	string	Display-only
  fileName	string	Display-only

• Rich tab (RichTab) - renders a custom component with its own settings

  Field	Type	Description
  id	string	Unique tab id
  label	string	Tab label
  component	Component	React component receiving { value, onChange, _ }
  accessor	TabAccessor	Seeds and writes custom data into the request

Example

Open from a button and forward the request to export-data:

import { useState, useRef } from "react";
import { Kanban } from "@svar-ui/react-kanban";
import { ExportPopup } from "@svar-ui/react-export-popup";

const columns = [
  { id: "new", label: "New" },
  { id: "done", label: "Done" },
];
const cards = [
  { id: 1, label: "Task A", column: "new" },
  { id: 2, label: "Task B", column: "done" },
];

const url = "https://export.example.com";

function App() {
  const [open, setOpen] = useState(false);
  const api = useRef(null);
  const anchor = useRef(null);

  const doExport = (request) => {
    api.current.exec("export-data", { url, ...request });
    setOpen(false);
  };

  return (
    <>
      <button ref={anchor} onClick={() => setOpen(true)}>Export</button>

      <Kanban ref={api} cards={cards} columns={columns} />

      {open && (
        <ExportPopup
          tabs={["pdf", "png", "xlsx"]}
          parent={anchor.current}
          initial={{ format: "pdf", paper: { landscape: true } }}
          onExport={doExport}
          onClose={() => setOpen(false)}
        />
      )}
    </>
  );
}

Adding a shallow custom tab:

<ExportPopup
  tabs={[
    "pdf",
    "png",
    { id: "mspx", label: "MS Project XML", fileName: "project.xml" },
  ]}
  initial={{ format: "mspx" }}
  onExport={doExport}
  onClose={() => setOpen(false)}
/>

Related

• Export and import guide - PDF, PNG, xlsx export workflows
• export-data - the action that receives the popup's export request