@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 k, jsx as a, Fragment as pe } from "react/jsx-runtime";
import { c as D } from "./index.CEyLAtio.js";
import { forwardRef as ge, useState as U, useRef as me, useCallback as be } from "react";
import { t as _e } from "./translate.nuU7uChI.js";
import { u as Z } from "./useBreakpoint.CMOR9ZOB.js";
import "./index.CgTHIF3K.js";
import { g as De } from "./AriaLiveRegions.utils.zSFFD3SF.js";
import { Asterisk as he } from "../asterisk.CR60hx8S.js";
import { DSButton as Ie } from "../button.Bt0-bRGX.js";
import { FileList as ke } from "../filelist.Ba5xMDGg.js";
import { D as ve } from "./Icon.CAXZUNWo.js";
import { DSSystemFeedback as we } from "../systemfeedback.BpKZEv4U.js";
import { g as v } from "./helpers.CcqWV-wZ.js";
import '../assets/InputFile.Dx_CULYq.css';const ze = "ds-input-file_root_1m0k1_1", Se = "ds-input-file_hint_1m0k1_1", Ne = "ds-input-file_label_1m0k1_1", ye = "ds-input-file_browse-button--is-dragging-filled_1m0k1_4", Le = "ds-input-file_browse-button--is-dragging_1m0k1_4", Be = "ds-input-file_label--hidden_1m0k1_44", Fe = "ds-input-file_label--disabled_1m0k1_57", Te = "ds-input-file_feedback_1m0k1_77", Ae = "ds-input-file_dropzone_1m0k1_82", $e = "ds-input-file_dropzone--disabled_1m0k1_88", Ce = "ds-input-file_dropzone--invalid_1m0k1_102", Ee = "ds-input-file_dropzone--is-dragging_1m0k1_105", Re = "ds-input-file_hint-drop-zone_1m0k1_108", qe = "ds-input-file_upload-icon_1m0k1_111", Pe = "ds-input-file_browse-button-dropzone--is-dragging_1m0k1_116", xe = "ds-input-file_instructions_1m0k1_119", He = "ds-input-file_input_1m0k1_156", Oe = "ds-input-file_required-sr-info_1m0k1_160", t = {
root: ze,
hint: Se,
label: Ne,
browseButtonIsDraggingFilled: ye,
browseButtonIsDragging: Le,
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 [w] = o.split("/");
return w === l.slice(0, -2);
}
return o === l;
});
}, Ue = ({
id: r,
label: d,
inputFileButtonProps: i
}) => {
var u;
if (!r)
throw new Error(v("DSInputFile", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputFile component.'));
if (!d)
throw new Error(v("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(v("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(v("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: w = !1,
hint: b,
inputFileButtonProps: T,
invalid: h = !1,
isHintOutsideDropzone: G = {
base: !0,
m: !1
},
lang: A = "en",
maxSizeInMb: z = 7,
multiple: _ = !1,
required: $ = !1,
showFileList: J = !0,
showDropzone: c = !1,
systemFeedback: S,
translations: K,
onFilesSelect: f,
...Q
}, I) => {
const p = _e(K || je[A]);
process.env.NODE_ENV !== "production" && Ue({
id: r,
label: d,
inputFileButtonProps: T
});
const {
label: X = A === "en" ? `Choose File${_ ? "s" : ""}` : `Datei${_ ? "en" : ""} auswählen`,
variant: N = "outline",
...Y
} = T || {}, [C, E] = U([]), g = me(null), [m, y] = U(!1), ee = z * 1024 * 1024, L = `${r}-label`, R = `${r}-feedback`, B = `${r}-hint`, q = b ? ` ${B}` : "", te = Z(w), P = Z(G), ne = D(t.root, u), ie = D(t.dropzone, {
[t.dropzoneDisabled]: o,
[t.dropzoneInvalid]: h,
[t.dropzoneIsDragging]: m
}), oe = D(t.label, {
// hide label only visually to keep them available for assistive technologies
[t.labelHidden]: te,
[t.labelDisabled]: o
}), se = D(t.browseButton, {
[t.browseButtonIsDragging]: m && N === "outline",
[t.browseButtonIsDraggingFilled]: m && N === "filled"
}), re = D(t.browseButtonDropzone, {
[t.browseButtonDropzoneIsDragging]: m
}), ae = [h && S && 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 = `${p("feedbackFileType")}: ${s.type}.`), s.size > ee && (s.feedback = `${p("feedbackFileSize")} ${z} MB.`), n.push(s), !_ && n.length > 0)
break;
n.length > 0 && (E(() => {
const s = [...n], M = s.map(({
name: F,
feedback: fe = ""
}) => `${F} ${fe}`).join(", ");
return setTimeout(() => {
ce(`${p("filesSelectedHint")}: ${M}.`);
}, 1e3), s;
}), f == null || f(n));
}, H = (e) => {
var n;
o || ((n = g.current) == null || n.click(), e.stopPropagation());
}, O = (e) => {
e.preventDefault(), m || y(!0);
}, W = (e) => {
e.preventDefault(), m && y(!1);
}, V = be((e) => {
e.preventDefault(), !o && (y(!1), x(e.dataTransfer.files));
}, [_, i, z, 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 f == null || f(s), s;
});
}, ce = (e) => {
const n = De();
n && (n.innerText = e, setTimeout(() => {
n.innerText = "";
}, 350));
}, j = () => /* @__PURE__ */ a(Ie, { ...Y, className: c ? re : se, type: "button", variant: N, size: c ? "small" : "medium", disabled: o, iconName: c ? void 0 : "upload", onClick: H, "aria-describedby": ae, "aria-invalid": h, children: X });
return /* @__PURE__ */ k("div", { className: ne, children: [
/* @__PURE__ */ k("label", { className: oe, id: L, htmlFor: r, children: [
d,
$ && /* @__PURE__ */ k(pe, { children: [
/* @__PURE__ */ a(he, {}),
/* @__PURE__ */ a("span", { className: t.requiredSrInfo, children: p("required") })
] })
] }),
b && (P || !c) && /* @__PURE__ */ a("div", { className: t.hint, id: B, children: b }),
h && S && /* @__PURE__ */ a(we, { className: t.feedback, message: S, type: "invalid", id: R }),
!c && /* @__PURE__ */ a(
"div",
{
onDragOver: O,
onDragLeave: W,
onDrop: V,
"aria-labelledby": `${L}${q}`,
"aria-disabled": o,
children: j()
}
),
c && /* @__PURE__ */ k(
"div",
{
className: ie,
onClick: (e) => H(e),
onDragOver: O,
onDragLeave: W,
onDrop: V,
"aria-labelledby": `${L}${q}`,
"aria-disabled": o,
children: [
/* @__PURE__ */ a(ve, { name: "upload", className: t.uploadIcon }),
/* @__PURE__ */ a("p", { id: "file-upload-instructions", className: t.instructions, children: p("dragAndDropInstructions") }),
j(),
b && !P && /* @__PURE__ */ a("div", { className: t.hintDropZone, id: B, children: b })
]
}
),
/* @__PURE__ */ a("input", { ...Q, type: "file", className: t.input, id: r, ref: le, accept: i, multiple: _, "aria-hidden": "true", required: $, disabled: o, onChange: de }),
C.length > 0 && J && /* @__PURE__ */ a(ke, { files: C, onRemoveFile: ue, fileListItemRemoveButtonProps: l, t: p })
] });
});
Ze.displayName = "DSInputFile";
export {
Ze as D,
We as a,
Ve as b,
je as c,
Me as f,
Ue as v
};