@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
221 lines (220 loc) • 8.96 kB
JavaScript
"use client";
import { jsxs as v, jsx as a, Fragment as fe } from "react/jsx-runtime";
import { c as _ } from "./index.CEyLAtio.js";
import { forwardRef as ge, useState as U, useRef as be, useCallback as me } from "react";
import { t as De } from "./translate.nuU7uChI.js";
import { u as Z } from "./useBreakpoint.CMOR9ZOB.js";
import "./index.CgTHIF3K.js";
import { g as _e } from "./AriaLiveRegions.utils.Cb327d_2.js";
import { Asterisk as he } from "../asterisk.CR60hx8S.js";
import { D as Ie } from "./Button.Cf1CKq8N.js";
import { FileList as ve } from "../filelist.BiKMKCyg.js";
import { D as we } from "./Icon.NSsVrYeq.js";
import { D as ze } from "./SystemFeedback.CyGbUCzT.js";
import { g as w } from "./helpers.BbWkXTr3.js";
import '../assets/InputFile.CCQxsulT.css';const Se = "ds-input-file_root_1pdsr_1", Ne = "ds-input-file_hint_1pdsr_1", Le = "ds-input-file_label_1pdsr_1", ke = "ds-input-file_browse-button--is-dragging-filled_1pdsr_4", ye = "ds-input-file_browse-button--is-dragging_1pdsr_4", Be = "ds-input-file_label--hidden_1pdsr_44", Fe = "ds-input-file_label--disabled_1pdsr_57", Te = "ds-input-file_feedback_1pdsr_77", Ae = "ds-input-file_dropzone_1pdsr_82", $e = "ds-input-file_dropzone--disabled_1pdsr_88", Ce = "ds-input-file_dropzone--invalid_1pdsr_102", Ee = "ds-input-file_dropzone--is-dragging_1pdsr_105", Re = "ds-input-file_hint-drop-zone_1pdsr_108", qe = "ds-input-file_upload-icon_1pdsr_111", Pe = "ds-input-file_browse-button-dropzone--is-dragging_1pdsr_114", xe = "ds-input-file_instructions_1pdsr_117", He = "ds-input-file_input_1pdsr_154", Oe = "ds-input-file_required-sr-info_1pdsr_158", t = {
root: Se,
hint: Ne,
label: Le,
browseButtonIsDraggingFilled: ke,
browseButtonIsDragging: ye,
labelHidden: Be,
labelDisabled: Fe,
feedback: Te,
dropzone: Ae,
dropzoneDisabled: $e,
dropzoneInvalid: Ce,
dropzoneIsDragging: Ee,
hintDropZone: Re,
uploadIcon: qe,
browseButtonDropzoneIsDragging: Pe,
instructions: xe,
input: He,
requiredSrInfo: Oe
}, We = {
dragAndDropInstructions: "Drag and drop files here or",
feedbackFileSize: "File too large. Maximum file size is",
feedbackFileType: "File type not allowed",
// {0} is the file name
fileListRemoveSelectionButtonLabel: "Remove {0} from selected files",
fileListPreviewAltText: "Preview of",
filesSelectedHint: "The following files are selected",
required: "required"
}, Ve = {
dragAndDropInstructions: "Dateien hier hin ziehen oder",
feedbackFileSize: "Datei zu groß. Maximale Dateigröße ist",
feedbackFileType: "Dateityp nicht zugelassen",
// {0} is the file name
fileListRemoveSelectionButtonLabel: "Datei {0} aus der Auswahl entfernen",
fileListPreviewAltText: "Vorschau von",
filesSelectedHint: "Die folgenden Dateien sind ausgewählt",
required: "erforderlich"
}, je = {
en: We,
de: Ve
}, Me = (r, d) => {
const i = d.split(",").map((l) => l.trim().toLowerCase()).filter(Boolean), u = r.name.toLowerCase(), o = r.type.toLowerCase();
return i.some((l) => {
if (l.startsWith("."))
return u.endsWith(l);
if (l.endsWith("/*")) {
const [z] = o.split("/");
return z === l.slice(0, -2);
}
return o === l;
});
}, Ue = ({
id: r,
label: d,
inputFileButtonProps: i
}) => {
var u;
if (!r)
throw new Error(w("DSInputFile", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputFile component.'));
if (!d)
throw new Error(w("DSInputFile", `A label is always required for a11y reasons. Please add a descriptive "label" prop to the DSInputFile component. If you don't want to display a label, set hideLabel={true}.`));
if (i && ((u = i.label) == null ? void 0 : u.trim()) === "")
throw new Error(w("DSInputFile", "The input file button needs to have a label for a11y reasons. Please add a label to the inputFileButtonProps."));
if (i && i.variant && i.variant !== "outline" && i.variant !== "filled")
throw new Error(w("DSInputFile", "The inputFileButtonProps variant value can only be 'outline' for DSInputFile components inside forms or 'filled' for standalone DSInputFile components."));
}, Ze = ge(({
id: r,
label: d,
accept: i,
className: u,
disabled: o = !1,
fileListItemRemoveButtonProps: l,
hideLabel: z = !1,
hint: m,
inputFileButtonProps: T,
invalid: h = !1,
isHintOutsideDropzone: G = {
base: !0,
m: !1
},
lang: A = "en",
maxSizeInMb: S = 7,
multiple: D = !1,
required: $ = !1,
showFileList: J = !0,
showDropzone: c = !1,
systemFeedback: N,
translations: K,
onFilesSelect: p,
...Q
}, I) => {
const f = De(K || je[A]);
process.env.NODE_ENV !== "production" && Ue({
id: r,
label: d,
inputFileButtonProps: T
});
const {
label: X = A === "en" ? `Choose File${D ? "s" : ""}` : `Datei${D ? "en" : ""} auswählen`,
variant: L = "outline",
...Y
} = T || {}, [C, E] = U([]), g = be(null), [b, k] = U(!1), ee = S * 1024 * 1024, y = `${r}-label`, R = `${r}-feedback`, B = `${r}-hint`, q = m ? ` ${B}` : "", te = Z(z), P = Z(G), ne = _(t.root, u), ie = _(t.dropzone, {
[t.dropzoneDisabled]: o,
[t.dropzoneInvalid]: h,
[t.dropzoneIsDragging]: b
}), oe = _(t.label, {
// hide label only visually to keep them available for assistive technologies
[t.labelHidden]: te,
[t.labelDisabled]: o
}), se = _(t.browseButton, {
[t.browseButtonIsDragging]: b && L === "outline",
[t.browseButtonIsDraggingFilled]: b && L === "filled"
}), re = _(t.browseButtonDropzone, {
[t.browseButtonDropzoneIsDragging]: b
}), ae = [h && N && R].filter(Boolean).join(" ") || void 0, le = (e) => {
g.current = e, typeof I == "function" ? I(e) : I && (I.current = e);
}, x = (e) => {
if (!e)
return;
const n = [];
for (const s of e)
if (i && !Me(s, i) && (s.feedback = `${f("feedbackFileType")}: ${s.type}.`), s.size > ee && (s.feedback = `${f("feedbackFileSize")} ${S} MB.`), n.push(s), !D && n.length > 0)
break;
n.length > 0 && (E(() => {
const s = [...n], M = s.map(({
name: F,
feedback: pe = ""
}) => `${F} ${pe}`).join(", ");
return setTimeout(() => {
ce(`${f("filesSelectedHint")}: ${M}.`);
}, 1e3), s;
}), p == null || p(n));
}, H = (e) => {
var n;
o || ((n = g.current) == null || n.click(), e.stopPropagation());
}, O = (e) => {
e.preventDefault(), b || k(!0);
}, W = (e) => {
e.preventDefault(), b && k(!1);
}, V = me((e) => {
e.preventDefault(), !o && (k(!1), x(e.dataTransfer.files));
}, [D, i, S, o]), de = (e) => {
x(e.target.files), g != null && g.current && (g.current.value = "");
}, ue = (e) => {
E((n) => {
const s = n.filter((M, F) => F !== e);
return p == null || p(s), s;
});
}, ce = (e) => {
const n = _e();
n && (n.innerText = e, setTimeout(() => {
n.innerText = "";
}, 350));
}, j = () => /* @__PURE__ */ a(Ie, { ...Y, className: c ? re : se, type: "button", variant: L, size: c ? "small" : "medium", disabled: o, iconName: c ? void 0 : "upload", onClick: H, "aria-describedby": ae, "aria-invalid": h, children: X });
return /* @__PURE__ */ v("div", { className: ne, children: [
/* @__PURE__ */ v("label", { className: oe, id: y, htmlFor: r, children: [
d,
$ && /* @__PURE__ */ v(fe, { children: [
/* @__PURE__ */ a(he, {}),
/* @__PURE__ */ a("span", { className: t.requiredSrInfo, children: f("required") })
] })
] }),
m && (P || !c) && /* @__PURE__ */ a("div", { className: t.hint, id: B, children: m }),
h && N && /* @__PURE__ */ a(ze, { className: t.feedback, message: N, variant: "error", id: R }),
!c && /* @__PURE__ */ a(
"div",
{
onDragOver: O,
onDragLeave: W,
onDrop: V,
"aria-labelledby": `${y}${q}`,
"aria-disabled": o,
children: j()
}
),
c && /* @__PURE__ */ v(
"div",
{
className: ie,
onClick: (e) => H(e),
onDragOver: O,
onDragLeave: W,
onDrop: V,
"aria-labelledby": `${y}${q}`,
"aria-disabled": o,
children: [
/* @__PURE__ */ a(we, { name: "upload", className: t.uploadIcon, size: "x-large" }),
/* @__PURE__ */ a("p", { id: "file-upload-instructions", className: t.instructions, children: f("dragAndDropInstructions") }),
j(),
m && !P && /* @__PURE__ */ a("div", { className: t.hintDropZone, id: B, children: m })
]
}
),
/* @__PURE__ */ a("input", { ...Q, type: "file", className: t.input, id: r, ref: le, accept: i, multiple: D, "aria-hidden": "true", required: $, disabled: o, onChange: de }),
C.length > 0 && J && /* @__PURE__ */ a(ve, { files: C, onRemoveFile: ue, fileListItemRemoveButtonProps: l, t: f })
] });
});
Ze.displayName = "DSInputFile";
export {
Ze as D,
We as a,
Ve as b,
je as c,
Me as f,
Ue as v
};