welcome-ui/dist/FileUpload.mjs

Customizable design system with react • styled-components • styled-system and ariakit.

"use client";
import { j as r } from "./jsx-runtime-Bqq1Hxg9.mjs";
import { useState as T, useRef as b, useEffect as U } from "react";
import { Box as z } from "./Box.mjs";
import { Button as D } from "./Button.mjs";
import { getFileIcon as C, getFileName as N, getFileSize as O } from "./Files.mjs";
import { shouldForwardProp as P, forwardRef as K } from "./System.mjs";
import { Tag as M } from "./Tag.mjs";
import { c as L } from "./create-event-rXDe5aCQ.mjs";
import X from "@xstyled/styled-components";
const Y = X.inputBox.withConfig({ shouldForwardProp: P })`
  display: none;
`, Z = 2e6, q = "*/*", h = (e) => Array.isArray(e) ? e : e ? [e] : [], G = ({ file: e, onRemove: p }) => {
  const l = C(e), n = N(e), u = O(e);
  return /* @__PURE__ */ r.jsxs(M, { "data-id": n, mr: "sm", mt: "sm", onRemove: p, children: [
    /* @__PURE__ */ r.jsx(l, { size: "md" }),
    n,
    u ? /* @__PURE__ */ r.jsxs(z, { color: "beige-60", children: [
      "(",
      u,
      ")"
    ] }) : null
  ] }, n);
}, H = K(
  ({
    accept: e = q,
    children: p,
    dataTestId: l,
    disabled: n,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    draggable: u,
    handleAddFile: x,
    handleRemoveFile: g,
    maxSize: A = Z,
    multiple: y,
    name: f,
    onBlur: c,
    onChange: a,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    onError: J,
    preview: E = G,
    value: F = [],
    ...I
  }, i) => {
    const [s, d] = T(h(F)), R = b();
    U(() => {
      d(h(F));
    }, [F]), U(() => () => {
      s && s.map((t) => t instanceof File ? URL.revokeObjectURL(t.preview) : t);
    }, [s]);
    const _ = (t) => {
      let o = Array.from(t.target.files).map(
        (m) => (m.preview = URL.createObjectURL(m), m)
      );
      d(o), o.length === 1 && (o = o[0]);
      const j = L({ name: f, value: o });
      a && a(j), x && x(o), c && c();
    }, v = (t) => {
      const o = s.filter((S) => S !== t), j = y ? o : void 0;
      d(o);
      const m = L({ name: f, value: j });
      a && a(m), g && g(t), c && c();
    }, w = () => {
      R.current.click();
    }, k = s.map((t) => t instanceof File ? t.preview : void 0).join("");
    return /* @__PURE__ */ r.jsxs(r.Fragment, { children: [
      p ? p({ disabled: n, files: s, onRemoveFile: v, openFile: w }) : /* @__PURE__ */ r.jsx(D, { disabled: n, onClick: w, children: "Upload file" }),
      /* @__PURE__ */ r.jsx("br", {}),
      /* @__PURE__ */ r.jsx(
        Y,
        {
          accept: e,
          "data-testid": l,
          disabled: n,
          maxSize: A,
          multiple: y,
          name: f,
          onBlur: c,
          onChange: _,
          ref: (t) => {
            R.current = t, typeof i == "function" ? i(t) : i != null && i.current && (i.current = t);
          },
          ...I,
          type: "file"
        },
        k
      ),
      E ? s.map((t) => /* @__PURE__ */ r.jsx(
        E,
        {
          file: t,
          onRemove: () => v(t)
        },
        t instanceof File ? t.name : t
      )) : null
    ] });
  }
);
H.displayName = "FileUpload";
export {
  H as FileUpload
};