@stihl-design-system/components
Version:
Welcome to the STIHL Design System react component library.
237 lines (236 loc) • 9.63 kB
JavaScript
"use client";
import { jsxs as D, jsx as r, Fragment as _e } from "react/jsx-runtime";
import { c as f } from "./index.DL9mof6u.js";
import { forwardRef as he, useState as Q, useRef as Ie, useCallback as ve } from "react";
import { t as we } from "./translate.nuU7uChI.js";
import { u as P } from "./useBreakpoint.1txsny17.js";
import "./index.D-sRdssb.js";
import { g as Se } from "./AriaLiveRegions.utils.CybNIBSa.js";
import { Asterisk as Fe } from "../asterisk.B2ih8VwF.js";
import { D as ze } from "./Button.Cn5yg7dG.js";
import { FileList as Ne } from "../filelist.BG6SGVJ8.js";
import { D as Le } from "./Icon.CDLyB7Pv.js";
import { D as ke } from "./Popover.D7McfVaH.js";
import { D as ye } from "./SystemFeedback.CjlARKki.js";
import { g as _ } from "./helpers.CexwVao7.js";
import '../assets/InputFile.D7Ihod7B.css';const Be = "ds-input-file_root_ad2pg_1", Te = "ds-input-file_browse-button--is-dragging-filled_ad2pg_1", Ae = "ds-input-file_browse-button--is-dragging_ad2pg_1", Pe = "ds-input-file_hint_ad2pg_14", $e = "ds-input-file_label-wrapper_ad2pg_14", Ce = "ds-input-file_label_ad2pg_14", Re = "ds-input-file_label--disabled_ad2pg_33", Ee = "ds-input-file_label-wrapper--hidden_ad2pg_45", We = "ds-input-file_feedback_ad2pg_73", qe = "ds-input-file_dropzone_ad2pg_77", xe = "ds-input-file_dropzone--disabled_ad2pg_83", He = "ds-input-file_dropzone--invalid_ad2pg_97", Oe = "ds-input-file_dropzone--is-dragging_ad2pg_100", Ve = "ds-input-file_hint-drop-zone_ad2pg_103", je = "ds-input-file_upload-icon_ad2pg_106", Me = "ds-input-file_browse-button-dropzone--is-dragging_ad2pg_109", Ue = "ds-input-file_instructions_ad2pg_112", Ze = "ds-input-file_input_ad2pg_149", Ge = "ds-input-file_required-sr-info_ad2pg_153", t = {
root: Be,
browseButtonIsDraggingFilled: Te,
browseButtonIsDragging: Ae,
hint: Pe,
labelWrapper: $e,
label: Ce,
labelDisabled: Re,
labelWrapperHidden: Ee,
feedback: We,
dropzone: qe,
dropzoneDisabled: xe,
dropzoneInvalid: He,
dropzoneIsDragging: Oe,
hintDropZone: Ve,
uploadIcon: je,
browseButtonDropzoneIsDragging: Me,
instructions: Ue,
input: Ze,
requiredSrInfo: Ge
}, Je = {
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",
togglePopover: "Toggle popover"
}, Ke = {
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",
togglePopover: "Popover öffnen/schließen"
}, X = {
en: Je,
de: Ke
}, Qe = (a, d) => {
const o = d.split(",").map((l) => l.trim().toLowerCase()).filter(Boolean), g = a.name.toLowerCase(), n = a.type.toLowerCase();
return o.some((l) => {
if (l.startsWith("."))
return g.endsWith(l);
if (l.endsWith("/*")) {
const [h] = n.split("/");
return h === l.slice(0, -2);
}
return n === l;
});
}, Xe = ({
id: a,
label: d,
inputFileButtonProps: o,
hideLabel: g,
popoverContent: n
}) => {
if (!a)
throw new Error(_("DSInputFile", 'A unique "id" prop is required. Please add a unique "id" prop to the DSInputFile component.'));
if (!d)
throw new Error(_("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 (o && o.label?.trim() === "")
throw new Error(_("DSInputFile", "The input file button needs to have a label for a11y reasons. Please add a label to the inputFileButtonProps."));
if (o && o.variant && o.variant !== "outline" && o.variant !== "filled")
throw new Error(_("DSInputFile", "The inputFileButtonProps variant value can only be 'outline' for DSInputFile components inside forms or 'filled' for standalone DSInputFile components."));
g && n && console.warn(_("DSInputFile", "Using a popover when hideLabel is set to true is not supported."));
}, Ye = he(({
id: a,
label: d,
accept: o,
className: g,
disabled: n = !1,
fileListItemRemoveButtonProps: l,
hideLabel: h = !1,
hint: b,
inputFileButtonProps: $,
invalid: I = !1,
isHintOutsideDropzone: Y = {
base: !0,
m: !1
},
lang: S = "en",
maxSizeInMb: F = 7,
multiple: m = !1,
popoverContent: z,
popoverInfoButtonProps: C,
required: R = !1,
showFileList: ee = !0,
showDropzone: p = !1,
systemFeedback: N,
translations: L,
onFilesSelect: E,
...te
}, v) => {
const c = we(L || X[S]);
process.env.NODE_ENV !== "production" && Xe({
id: a,
label: d,
inputFileButtonProps: $,
hideLabel: P(h),
popoverContent: z
});
const {
label: ne = S === "en" ? `Choose File${m ? "s" : ""}` : `Datei${m ? "en" : ""} auswählen`,
variant: k = "outline",
...oe
} = $ || {}, ie = {
...C,
label: L && L.togglePopover || C?.label || X[S].togglePopover
}, [W, q] = Q([]), w = Ie(null), [u, y] = Q(!1), re = F * 1024 * 1024, B = `${a}-label`, x = `${a}-feedback`, T = `${a}-hint`, H = b ? ` ${T}` : "", O = P(h), V = P(Y), ae = f(t.root, g), se = f(t.dropzone, {
[t.dropzoneDisabled]: n,
[t.dropzoneInvalid]: I,
[t.dropzoneIsDragging]: u
}), le = f(t.label, {
[t.labelDisabled]: n
}), de = f(t.labelWrapper, {
// hide label only visually to keep them available for assistive technologies
[t.labelWrapperHidden]: O
}), pe = f(t.browseButton, {
[t.browseButtonIsDragging]: u && k === "outline",
[t.browseButtonIsDraggingFilled]: u && k === "filled"
}), ce = f(t.browseButtonDropzone, {
[t.browseButtonDropzoneIsDragging]: u
}), ue = [I && N && x].filter(Boolean).join(" ") || void 0, fe = (e) => {
w.current = e, typeof v == "function" ? v(e) : v && (v.current = e);
}, j = (e) => {
if (!e)
return;
const s = [];
for (const i of e)
if (o && !Qe(i, o) && (i.feedback = `${c("feedbackFileType")}: ${i.type}.`), i.size > re && (i.feedback = `${c("feedbackFileSize")} ${F} MB.`), s.push(i), !m && s.length > 0)
break;
s.length > 0 && (q(() => {
const i = [...s], K = i.map(({
name: A,
feedback: De = ""
}) => `${A} ${De}`).join(", ");
return setTimeout(() => {
me(`${c("filesSelectedHint")}: ${K}.`);
}, 1e3), i;
}), E?.(s));
}, M = (e) => {
n || (w.current?.click(), e.stopPropagation());
}, U = (e) => {
e.preventDefault(), u || y(!0);
}, Z = (e) => {
e.preventDefault(), u && y(!1);
}, G = ve((e) => {
e.preventDefault(), !n && (y(!1), j(e.dataTransfer.files));
}, [m, o, F, n]), ge = (e) => {
j(e.target.files), w?.current && (w.current.value = "");
}, be = (e) => {
q((s) => {
const i = s.filter((K, A) => A !== e);
return E?.(i), i;
});
}, me = (e) => {
const s = Se();
s && (s.innerText = e, setTimeout(() => {
s.innerText = "";
}, 350));
}, J = () => /* @__PURE__ */ r(ze, { ...oe, className: p ? ce : pe, type: "button", variant: k, size: p ? "small" : "medium", disabled: n, iconName: p ? void 0 : "upload", onClick: M, "aria-describedby": ue, "aria-invalid": I, children: ne });
return /* @__PURE__ */ D("div", { className: ae, children: [
/* @__PURE__ */ D("div", { className: de, children: [
/* @__PURE__ */ D("label", { className: le, id: B, htmlFor: a, children: [
d,
R && /* @__PURE__ */ D(_e, { children: [
/* @__PURE__ */ r(Fe, {}),
/* @__PURE__ */ r("span", { className: t.requiredSrInfo, children: c("required") })
] })
] }),
z && !O && /* @__PURE__ */ r(ke, { placement: "top", defaultAnchorButtonProps: ie, children: z })
] }),
b && (V || !p) && /* @__PURE__ */ r("div", { className: t.hint, id: T, children: b }),
!p && /* @__PURE__ */ r(
"div",
{
onDragOver: U,
onDragLeave: Z,
onDrop: G,
"aria-labelledby": `${B}${H}`,
"aria-disabled": n,
children: J()
}
),
p && /* @__PURE__ */ D(
"div",
{
className: se,
onClick: (e) => M(e),
onDragOver: U,
onDragLeave: Z,
onDrop: G,
"aria-labelledby": `${B}${H}`,
"aria-disabled": n,
children: [
/* @__PURE__ */ r(Le, { name: "upload", className: t.uploadIcon, size: "x-large" }),
/* @__PURE__ */ r("p", { id: "file-upload-instructions", className: t.instructions, children: c("dragAndDropInstructions") }),
J(),
b && !V && /* @__PURE__ */ r("div", { className: t.hintDropZone, id: T, children: b })
]
}
),
/* @__PURE__ */ r("input", { ...te, type: "file", className: t.input, id: a, ref: fe, accept: o, multiple: m, "aria-hidden": "true", required: R, disabled: n, onChange: ge }),
I && N && /* @__PURE__ */ r(ye, { className: t.feedback, message: N, variant: "error", id: x }),
W.length > 0 && ee && /* @__PURE__ */ r(Ne, { files: W, onRemoveFile: be, fileListItemRemoveButtonProps: l, t: c })
] });
});
Ye.displayName = "DSInputFile";
export {
Ye as D,
Je as a,
Ke as b,
X as c,
Qe as f,
Xe as v
};