welcome-ui/dist/FileUpload.js

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

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