@intility/bifrost-react/dist/components/FileInputArea/FileInputArea.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import classNames from "classnames";
import { forwardRef, useState } from "react";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * File upload form field, wraps a native `<input type="file">`, and supports
 * the same props/event listeners like `onInput` and `multiple`.
 *
 * Browsers will let users drag-and-drop files to it, or click/tap to open a
 * file selector.
 *
 * **Note:** The native `<input type="file">` will be visually hidden so you are
 * required to provide content and feedback based on input events and state.
 *
 * @see https://bifrost.intility.com/react/fileinputarea
 *
 * @example
 * <FileInputArea aria-label="Upload file">
 *   <Icon
 *     icon={faArrowUpFromBracket}
 *     className="bfc-base-2"
 *     style={{ marginBottom: 8 }}
 *   />
 *   <div>
 *     Drag & drop file or{" "}
 *     <span className="bf-neutral-link-text">click to upload</span>
 *   </div>
 *   <div className="bfc-base-2">.csv file, less than 10 MB</div>
 * </FileInputArea>
 *
 * @example
 * // connected to a visible label
 * <Label htmlFor="my-file-input-area">Upload file</Label>
 * <FileInputArea id="my-file-input-area">...</FileInputArea>
 */
const FileInputArea = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(26);
  let children;
  let className;
  let props;
  let state;
  let style;
  if ($[0] !== t0) {
    ({
      state,
      className,
      style,
      children,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = props;
    $[4] = state;
    $[5] = style;
  } else {
    children = $[1];
    className = $[2];
    props = $[3];
    state = $[4];
    style = $[5];
  }
  const [dragging, setDragging] = useState(false);
  const t1 = props.disabled;
  const t2 = state === "alert";
  let t3;
  if ($[6] !== className || $[7] !== dragging || $[8] !== t2) {
    t3 = classNames(className, "bf-file-input-area", {
      "bf-file-input-area-alert": t2,
      "bf-file-input-area-dragging": dragging
    });
    $[6] = className;
    $[7] = dragging;
    $[8] = t2;
    $[9] = t3;
  } else {
    t3 = $[9];
  }
  let t4;
  let t5;
  let t6;
  if ($[10] !== props) {
    t4 = e => {
      setDragging(true);
      return props.onDragEnter?.(e);
    };
    t5 = e_0 => {
      setDragging(false);
      return props.onDragLeave?.(e_0);
    };
    t6 = e_1 => {
      setDragging(false);
      return props.onDrop?.(e_1);
    };
    $[10] = props;
    $[11] = t4;
    $[12] = t5;
    $[13] = t6;
  } else {
    t4 = $[11];
    t5 = $[12];
    t6 = $[13];
  }
  let t7;
  if ($[14] !== props || $[15] !== ref || $[16] !== t4 || $[17] !== t5 || $[18] !== t6) {
    t7 = /*#__PURE__*/_jsx("input", {
      ...props,
      type: "file",
      ref: ref,
      onDragEnter: t4,
      onDragLeave: t5,
      onDrop: t6
    });
    $[14] = props;
    $[15] = ref;
    $[16] = t4;
    $[17] = t5;
    $[18] = t6;
    $[19] = t7;
  } else {
    t7 = $[19];
  }
  let t8;
  if ($[20] !== children || $[21] !== props.disabled || $[22] !== style || $[23] !== t3 || $[24] !== t7) {
    t8 = /*#__PURE__*/_jsxs("div", {
      "aria-disabled": t1,
      className: t3,
      style: style,
      children: [t7, children]
    });
    $[20] = children;
    $[21] = props.disabled;
    $[22] = style;
    $[23] = t3;
    $[24] = t7;
    $[25] = t8;
  } else {
    t8 = $[25];
  }
  return t8;
});
FileInputArea.displayName = "FileInputArea";
export default FileInputArea;