Export Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

import { useEffect, useRef, useState } from "react";
import type { ButtonHTMLAttributes, ReactNode } from "react";

/* DevSnips React — ExportButton
 * Menu trigger for export destinations. aria-haspopup="menu", keyboard
 * navigable. Arrow keys move, Enter exports, Escape closes.
 */

export type ButtonSize = "xs" | "sm" | "md" | "lg" | "xl";
export type ExportVariant = "outline" | "secondary";

export interface ExportFormat {
  id: string;
  label: ReactNode;
  icon?: string;
}

export interface ExportButtonProps
  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
  formats?: ExportFormat[];
  onExport?: (id: string, format: ExportFormat) => void;
  label?: string;
  variant?: ExportVariant;
  size?: ButtonSize;
}

function cx(...parts: Array<string | false | null | undefined>): string {
  return parts.filter(Boolean).join(" ");
}

const SIZES: Record<ButtonSize, string> = {
  xs: "h-7 gap-1 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 gap-1.5 px-3 text-xs [&_svg]:size-[14px]",
  md: "h-9 gap-2 px-3.5 text-[13px] [&_svg]:size-4",
  lg: "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 gap-2 px-5 text-sm [&_svg]:size-5",
};

const VARIANTS: Record<ExportVariant, string> = {
  outline: "border-[var(--ds-color-border-strong)] bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  secondary: "border-[var(--ds-color-border)] bg-[var(--ds-color-secondary)] text-[var(--ds-color-secondary-foreground)] hover:bg-[var(--ds-color-surface-active)] active:bg-[var(--ds-color-surface-active)]",
};

const MENU =
  "absolute right-0 top-[calc(100%+4px)] z-40 min-w-[180px] rounded-[var(--ds-radius-md)] " +
  "border border-[var(--ds-color-border)] bg-[var(--ds-color-surface-elevated)] p-1 " +
  "shadow-[var(--ds-shadow-md)]";
const ITEM =
  "flex w-full items-center gap-2 rounded-[var(--ds-radius-sm)] border-0 px-2 py-1.5 " +
  "text-left font-normal text-[13px] leading-none text-[var(--ds-color-foreground)] " +
  "bg-transparent transition-colors duration-150 ease-out motion-reduce:transition-none " +
  "hover:bg-[var(--ds-color-surface-hover)] focus:bg-[var(--ds-color-surface-hover)] " +
  "focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ds-color-focus-ring)]";

function Icon({ name, className }: { name?: string; className?: string }) {
  if (!name) return null;
  const common = { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": "true", focusable: "false" } as const;
  const paths: Record<string, ReactNode> = {
    "download": <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />,
    "file": <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></>,
    "archive": <><rect x="3" y="4" width="18" height="4" rx="1" /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8" /><path d="M10 12h4" /></>,
    "external": <><path d="M15 3h6v6" /><path d="M10 14 21 3" /></>,
  };
  return <svg {...common}>{paths[name]}</svg>;
}

export function ExportButton({
  formats = [],
  onExport,
  label = "Export",
  variant = "outline",
  size = "sm",
  disabled,
  className,
  type = "button",
  ...rest
}: ExportButtonProps) {
  const [open, setOpen] = useState(false);
  const triggerRef = useRef<HTMLButtonElement>(null);
  const itemRefs = useRef<Array<HTMLButtonElement | null>>([]);
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    function onDown(e: MouseEvent) { if (containerRef.current && !containerRef.current.contains(e.target as Node)) setOpen(false); }
    function onKey(e: KeyboardEvent) { if (e.key === "Escape") { setOpen(false); triggerRef.current?.focus(); } }
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); };
  }, [open]);

  function openMenu() { setOpen(true); setTimeout(() => itemRefs.current[0]?.focus(), 0); }
  function choose(i: number) { setOpen(false); onExport?.(formats[i].id, formats[i]); triggerRef.current?.focus(); }
  function onKey(e: React.KeyboardEvent, i: number) {
    const n = formats.length;
    if (e.key === "ArrowDown") { e.preventDefault(); itemRefs.current[(i + 1) % n]?.focus(); }
    else if (e.key === "ArrowUp") { e.preventDefault(); itemRefs.current[(i - 1 + n) % n]?.focus(); }
    else if (e.key === "Enter" || e.key === " ") { e.preventDefault(); choose(i); }
  }

  return (
    <div ref={containerRef} className="relative inline-flex">
      <button
        type={type}
        ref={triggerRef}
        aria-haspopup="menu"
        aria-expanded={open}
        className={cx("inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:opacity-50", VARIANTS[variant], SIZES[size], className)}
        disabled={disabled}
        onClick={() => (open ? setOpen(false) : openMenu())}
        {...rest}
      >
        <Icon name="download" className="shrink-0" />
        <span>{label}</span>
        <svg className={cx("h-[1em] w-[1em] shrink-0 transition-transform duration-150 ease-out motion-reduce:transition-none", open ? "rotate-180" : "rotate-0")} viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m6 9 6 6 6-6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
      {open && (
        <div role="menu" className={MENU}>
          {formats.map((f, i) => (
            <button key={f.id} ref={(el) => { itemRefs.current[i] = el; }} role="menuitem" tabIndex={-1} className={ITEM} onClick={() => choose(i)} onKeyDown={(e) => onKey(e, i)}>
              <Icon name={f.icon ?? "download"} className="shrink-0" />
              <span>{f.label}</span>
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

export default ExportButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115

/* DevSnips React — JavaScript parity build.
 * Same API, behavior, and classes as code.tsx; TypeScript types removed.
 * Regenerated from code.tsx — edit code.tsx and re-run the generator.
 */

import { useEffect, useRef, useState } from "react";
function cx(...parts) {
  return parts.filter(Boolean).join(" ");
}
const SIZES = {
  xs: "h-7 gap-1 px-2 text-xs [&_svg]:size-[14px]",
  sm: "h-8 gap-1.5 px-3 text-xs [&_svg]:size-[14px]",
  md: "h-9 gap-2 px-3.5 text-[13px] [&_svg]:size-4",
  lg: "h-10 gap-2 px-4 text-[13px] [&_svg]:size-[18px]",
  xl: "h-11 gap-2 px-5 text-sm [&_svg]:size-5"
};
const VARIANTS = {
  outline: "border-[var(--ds-color-border-strong)] bg-transparent text-[var(--ds-color-foreground)] hover:bg-[var(--ds-color-surface-hover)] active:bg-[var(--ds-color-surface-active)]",
  secondary: "border-[var(--ds-color-border)] bg-[var(--ds-color-secondary)] text-[var(--ds-color-secondary-foreground)] hover:bg-[var(--ds-color-surface-active)] active:bg-[var(--ds-color-surface-active)]"
};
const MENU = "absolute right-0 top-[calc(100%+4px)] z-40 min-w-[180px] rounded-[var(--ds-radius-md)] border border-[var(--ds-color-border)] bg-[var(--ds-color-surface-elevated)] p-1 shadow-[var(--ds-shadow-md)]";
const ITEM = "flex w-full items-center gap-2 rounded-[var(--ds-radius-sm)] border-0 px-2 py-1.5 text-left font-normal text-[13px] leading-none text-[var(--ds-color-foreground)] bg-transparent transition-colors duration-150 ease-out motion-reduce:transition-none hover:bg-[var(--ds-color-surface-hover)] focus:bg-[var(--ds-color-surface-hover)] focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-[var(--ds-color-focus-ring)]";
function Icon({ name, className }) {
  if (!name) return null;
  const common = { width: "1em", height: "1em", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", className, "aria-hidden": "true", focusable: "false" };
  const paths = {
    "download": <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />,
    "file": <><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" /><path d="M14 2v6h6" /></>,
    "archive": <><rect x="3" y="4" width="18" height="4" rx="1" /><path d="M5 8v11a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8" /><path d="M10 12h4" /></>,
    "external": <><path d="M15 3h6v6" /><path d="M10 14 21 3" /></>
  };
  return <svg {...common}>{paths[name]}</svg>;
}
export function ExportButton({
  formats = [],
  onExport,
  label = "Export",
  variant = "outline",
  size = "sm",
  disabled,
  className,
  type = "button",
  ...rest
}) {
  const [open, setOpen] = useState(false);
  const triggerRef = useRef(null);
  const itemRefs = useRef([]);
  const containerRef = useRef(null);
  useEffect(() => {
    if (!open) return;
    function onDown(e) {
      if (containerRef.current && !containerRef.current.contains(e.target)) setOpen(false);
    }
    function onKey2(e) {
      if (e.key === "Escape") {
        setOpen(false);
        triggerRef.current?.focus();
      }
    }
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey2);
    return () => {
      document.removeEventListener("mousedown", onDown);
      document.removeEventListener("keydown", onKey2);
    };
  }, [open]);
  function openMenu() {
    setOpen(true);
    setTimeout(() => itemRefs.current[0]?.focus(), 0);
  }
  function choose(i) {
    setOpen(false);
    onExport?.(formats[i].id, formats[i]);
    triggerRef.current?.focus();
  }
  function onKey(e, i) {
    const n = formats.length;
    if (e.key === "ArrowDown") {
      e.preventDefault();
      itemRefs.current[(i + 1) % n]?.focus();
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      itemRefs.current[(i - 1 + n) % n]?.focus();
    } else if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      choose(i);
    }
  }
  return <div ref={containerRef} className="relative inline-flex">
      <button
    type={type}
    ref={triggerRef}
    aria-haspopup="menu"
    aria-expanded={open}
    className={cx("inline-flex select-none items-center justify-center whitespace-nowrap rounded-[var(--ds-radius-sm)] border font-medium leading-none transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--ds-color-focus-ring)] disabled:pointer-events-none disabled:opacity-50", VARIANTS[variant], SIZES[size], className)}
    disabled={disabled}
    onClick={() => open ? setOpen(false) : openMenu()}
    {...rest}
  >
        <Icon name="download" className="shrink-0" />
        <span>{label}</span>
        <svg className={cx("h-[1em] w-[1em] shrink-0 transition-transform duration-150 ease-out motion-reduce:transition-none", open ? "rotate-180" : "rotate-0")} viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m6 9 6 6 6-6" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round" /></svg>
      </button>
      {open && <div role="menu" className={MENU}>
          {formats.map((f, i) => <button key={f.id} ref={(el) => {
    itemRefs.current[i] = el;
  }} role="menuitem" tabIndex={-1} className={ITEM} onClick={() => choose(i)} onKeyDown={(e) => onKey(e, i)}>
              <Icon name={f.icon ?? "download"} className="shrink-0" />
              <span>{f.label}</span>
            </button>)}
        </div>}
    </div>;
}

export default ExportButton;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

# Export Button

A menu trigger for export destinations. `formats` is a list of export targets; opens a keyboard-navigable menu (aria-haspopup="menu"). Arrow keys move, Enter exports, Escape closes.

## Installation

This component requires **React** and **Tailwind CSS**. Drop `code.tsx` (or `code.jsx` for JavaScript projects) into your project. Tailwind utility classes are included directly in the component, so no separate CSS file is required.

The component consumes the DevSnips semantic design tokens through Tailwind arbitrary values (for example `bg-[var(--ds-color-primary)]`). Define the `--ds-*` tokens once in your theme — see [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the full token spec.

## Usage

```tsx
<ExportButton formats={[{id:"csv",label:"Export as CSV"},{id:"pdf",label:"Export as PDF"}}] onExport={handle} />
```

## JavaScript

A `code.jsx` build is provided for projects that ship plain JSX. It exposes the same API and behavior as `code.tsx` — only the TypeScript types are removed.

## Props

| Prop | Type | Default |
|---|---|---|
| `formats` | `Array<{ id: string; label: ReactNode; icon?: string }>` | `[]` |
| `onExport` | `(id, format) => void` | — |
| `label` | `string` | `"Export"` |
| `variant` | `outline \| secondary` | `outline` |
| `size` | `ButtonSize` | `sm` |
| `disabled` | `boolean` | `false` |

Plus all native `ButtonHTMLAttributes<HTMLButtonElement>`.

## Variants

outline (default) · secondary. Menu is a bordered elevated surface.

## Sizes

xs (28px) · sm (32px) · **md (36px, default)** · lg (40px) · xl (44px). Horizontal padding scales 8 → 20px; icons scale 14 → 20px. Default is `sm` for toolbars.

## States

default · hover · focus-visible · open (menu, `aria-expanded`) · disabled (reduced opacity).

## Accessibility

Trigger has `aria-haspopup="menu"` + `aria-expanded`. Menu uses `role="menu"`, items `role="menuitem"`. **Keyboard**: ArrowUp/Down move, Enter/Space exports, Escape closes and returns focus to the trigger, outside click closes.

## Styling

Tailwind classes are included directly in the component and consume the DevSnips semantic design tokens (`--ds-*`) via arbitrary values. The button themes with the surface automatically in light and dark mode. No component-specific CSS file is needed.

## Design Tokens

See [React/DESIGN_TOKENS.md](../../../DESIGN_TOKENS.md) for the authoritative token specification. This button uses the semantic color, radius, and motion tokens; define them once in your project theme and every button in the family stays in sync.

## Notes

Use in table/report toolbars where multiple export targets exist. For a single target, use DownloadButton instead.