welcome-ui/dist/FileUpload.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import { jsxs as U, Fragment as T, jsx as p } from "react/jsx-runtime";
import { forwardRef as D, useState as O, useRef as A, useMemo as H, useImperativeHandle as K, useEffect as j } from "react";
import { Button as M } from "./Button.js";
import { g as Y, b as q, a as G } from "./index-lbUBMgHp.js";
import { Tag as J } from "./Tag.js";
import { c as Q } from "./index-PAaZGbyz.js";
import { c as k } from "./create-event-rXDe5aCQ.js";
const V = "_input_nmgw3_2", W = {
  input: V,
  "preview-tag": "_preview-tag_nmgw3_5",
  "preview-tag-size": "_preview-tag-size_nmgw3_9"
}, y = Q(W), X = "*/*", x = (e) => Array.isArray(e) ? e : e ? [e] : [], Z = ({ file: e, onRemove: m }) => {
  const a = Y(e), w = q(e), i = G(e);
  return /* @__PURE__ */ U(J, { className: y("preview-tag"), "data-testid": w, onRemove: m, children: [
    /* @__PURE__ */ p(a, { size: "md" }),
    w,
    i ? /* @__PURE__ */ U("span", { className: y("preview-tag-size"), children: [
      "(",
      i,
      ")"
    ] }) : null
  ] }, w);
}, $ = D(
  ({
    accept: e = X,
    children: m,
    disabled: a,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    draggable: w,
    handleAddFile: i,
    handleRemoveFile: f,
    multiple: z,
    name: u,
    onBlur: c,
    onChange: n,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    onError: d,
    preview: E,
    value: v = [],
    ...I
  }, S) => {
    const [r, g] = O(x(v)), _ = A(), L = H(() => E || Z, [E]);
    K(S, () => _.current), j(() => {
      g(x(v));
    }, [v]), j(() => () => {
      r == null || r.map((t) => t instanceof File ? URL.revokeObjectURL(t.preview) : t);
    }, [r]);
    const b = (t) => {
      let s = Array.from(t.target.files).map(
        (o) => (o instanceof File && (o.preview = URL.createObjectURL(o)), o)
      );
      g(s), s.length === 1 && (s = s[0]);
      const F = k({ name: u, value: s });
      n == null || n(F), i == null || i(s), c == null || c();
    }, N = (t) => {
      const s = r.filter((P) => P !== t), F = z ? s : void 0;
      g(s);
      const o = k({ name: u, value: F });
      n == null || n(o), f == null || f(t), c == null || c();
    }, R = () => {
      _.current.click();
    }, l = r.map((t) => t instanceof File ? t.preview : void 0).join("");
    return /* @__PURE__ */ U(T, { children: [
      m ? m({ disabled: a, files: r, onRemoveFile: N, openFile: R }) : /* @__PURE__ */ p(M, { disabled: a, onClick: R, children: "Upload file" }),
      /* @__PURE__ */ p("br", {}),
      /* @__PURE__ */ p(
        "input",
        {
          accept: e,
          className: y("input"),
          disabled: a,
          multiple: z,
          name: u,
          onBlur: c,
          onChange: b,
          ref: _,
          ...I,
          type: "file"
        },
        l
      ),
      L ? r.map((t) => /* @__PURE__ */ p(
        L,
        {
          file: t,
          onRemove: () => N(t)
        },
        t instanceof File ? t.name : t
      )) : null
    ] });
  }
);
$.displayName = "FileUpload";
export {
  $ as FileUpload
};