Export Dialog

#Installation & usage

Use an Export Dialog when a person leaves a list or report with a file: it asks the three questions an export needs (which days, which format, which columns) in one place and shows the result of the choice before anything runs. For a dialog of your own content use a Dialog; for the range field alone, a Date Range Picker.

'use client'

import { Button } from '@youj/react'
import { ExportDialog } from '@youj/react/date'

const COLUMNS = [
  { id: 'id', label: 'Payment ID' },
  { id: 'amount', label: 'Amount' },
  { id: 'status', label: 'Status' },
]

export function ExportPayments() {
  return (
    <ExportDialog
      title="Export payments"
      trigger={<Button variant="outline">Export</Button>}
      columns={COLUMNS}
      summary={async ({ from, to }) => {
        const { count, total } = await countPayments(from, to)
        return { count, total: formatEuros(total) }
      }}
      countLabel={(count) => `${count} payments`}
      onExport={async (request) => {
        const job = await startExport(request)
        return job.large ? { emailed: true, email: job.email } : undefined
      }}
    />
  )
}

onExport receives what was chosen: { period, from, to, format, timeZone, columns }, with from and to as the first and last day (start of day, local time, both included). Resolve for done, resolve { emailed: true } for an export that will arrive by email, and reject or throw for failed; the error's message is shown. timeZone is the value of the option chosen (local or utc by default): your export applies it.

summary gets the same request without waiting for the person to press anything, once when the dialog opens and again when the range or the time zone changes. A late answer to a range that was since left is dropped. Without summary the panel shows the days alone.

It lives in the date entry, @youj/react/date, with the Date Range Picker it is built on.

#Date ranges

presets is a list of ids (today, yesterday, last7Days, last30Days, thisMonth, lastMonth, yearToDate), shown in that order with the provider’s names for them. custom={false} leaves out Custom. The range behind each id is a pure function you can use yourself:

import { presetRange } from '@youj/react/date'

presetRange('last7Days', new Date(2026, 8, 29), 'en-US')
// { from: Sep 23, to: Sep 29, text: 'Sep 23 – 29' }

text is how the locale writes the range, with the year only when the range is not in the current one. The clock is the second argument, so a range never depends on when it runs: pass now to the dialog to fix it in tests and stories.

#Format, time zone and columns

formats is a list of { value, label } (CSV, XLSX and JSON by default), shown as a select, and the first is chosen. timeZones is a pair, shown as a two-option switch: your local zone and UTC by default. columns is every column the file can hold, { id, label }; the button next to Columns says "All 12", "8 of 12" or "None", and its popover has a checkbox per column with All and None above them. With no column chosen, Export is off.

#Description

#Code