@gravitee/graphene-core 2.42.1 → 2.43.0-renovate-react.07a6489

package/dist/base/FileUploadInput/FileUploadInput.d.ts

@@ -2,6 +2,7 @@ import { Accept, FileRejection } from 'react-dropzone';
 import * as React from 'react';
 interface FileUploadInputProps extends Omit<React.ComponentProps<'div'>, 'children' | 'onError'> {
     accept?: Accept;
+    describedById?: string;
     disabled?: boolean;
     hint?: React.ReactNode;
     icon?: React.ReactNode;
@@ -12,8 +13,9 @@ interface FileUploadInputProps extends Omit<React.ComponentProps<'div'>, 'childr
     multiple?: boolean;
     onFilesAccepted?: (files: File[]) => void;
     onFilesRejected?: (rejections: FileRejection[]) => void;
+    triggerLabel?: React.ReactNode;
 }
-declare function FileUploadInput({ accept, className, disabled, hint, icon, invalid, label, maxFileSize, maxFiles, multiple, onFilesAccepted, onFilesRejected, ...props }: FileUploadInputProps): React.JSX.Element;
+declare function FileUploadInput({ accept, className, describedById, disabled, hint, icon, invalid, label, maxFileSize, maxFiles, multiple, onFilesAccepted, onFilesRejected, triggerLabel, ...props }: FileUploadInputProps): React.JSX.Element;
 export { FileUploadInput };
 export type { Accept, FileRejection } from 'react-dropzone';
 export type { FileUploadInputProps };

package/dist/base/FileUploadInput/FileUploadInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadInput.d.ts","sourceRoot":"","sources":["../../../src/base/FileUploadInput/FileUploadInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAM9E,UAAU,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CACzD;AAqBD,iBAAS,eAAe,CAAC,EACvB,MAAM,EACN,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAY,EACZ,QAAgB,EAChB,eAAe,EACf,eAAe,EACf,GAAG,KAAK,EACT,EAAE,oBAAoB,qBA+CtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,CAAC"}
+{"version":3,"file":"FileUploadInput.d.ts","sourceRoot":"","sources":["../../../src/base/FileUploadInput/FileUploadInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAe,MAAM,gBAAgB,CAAC;AAO9E,UAAU,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;IAC9F,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAC1C,eAAe,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;IACxD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAqBD,iBAAS,eAAe,CAAC,EACvB,MAAM,EACN,SAAS,EACT,aAAa,EACb,QAAQ,EACR,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,KAAK,EACL,WAAW,EACX,QAAY,EACZ,QAAgB,EAChB,eAAe,EACf,eAAe,EACf,YAA4B,EAC5B,GAAG,KAAK,EACT,EAAE,oBAAoB,qBAgFtB;AAED,OAAO,EAAE,eAAe,EAAE,CAAC;AAC3B,YAAY,EAAE,MAAM,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC5D,YAAY,EAAE,oBAAoB,EAAE,CAAC"}

package/dist/composed/FileUpload/FileUpload.d.ts

@@ -1,7 +1,7 @@
-import { Accept, FileRejection } from '../../base/FileUploadInput';
+import { Accept, FileRejection, FileUploadInputProps } from '../../base/FileUploadInput';
 import { FileUploadItemValue } from './FileUploadItem';
 import * as React from 'react';
-interface FileUploadProps {
+interface FileUploadProps extends Pick<FileUploadInputProps, 'icon' | 'triggerLabel'> {
     accept?: Accept;
     className?: string;
     disabled?: boolean;

package/dist/composed/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/composed/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,aAAa,EAAmB,MAAM,8CAA8C,CAAC;AAEhH,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,UAAU,eAAe;IACvB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CACvD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAM,EACN,OAAO,EACP,KAAK,EACL,YAAY,EACZ,UAAU,EACV,aAAa,EACb,GAAG,UAAU,EACd,EAAE,eAAe,qBA6BjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../src/composed/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,KAAK,MAAM,EACX,KAAK,aAAa,EAElB,KAAK,oBAAoB,EAC1B,MAAM,8CAA8C,CAAC;AAEtD,OAAO,EAAkB,KAAK,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5E,UAAU,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,MAAM,GAAG,cAAc,CAAC;IACnF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACrC,aAAa,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CACvD;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,MAAM,EACN,OAAO,EACP,KAAK,EACL,YAAY,EACZ,UAAU,EACV,aAAa,EACb,GAAG,UAAU,EACd,EAAE,eAAe,qBA4EjB;AAED,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}

package/dist/index.js

@@ -23203,42 +23203,61 @@ function gB({ maxFiles: e, maxFileSize: t, multiple: n }) {
 	let r = [];
 	return n && e !== void 0 && e > 1 && r.push(`Max ${e} files`), t !== void 0 && r.push(`Up to ${hB(t)}`), r.length > 0 ? r.join(" · ") : null;
 }
-function _B({ accept: e, className: t, disabled: n, hint: r, icon: i, invalid: a, label: o, maxFileSize: s, maxFiles: c = 1, multiple: l = !1, onFilesAccepted: u, onFilesRejected: d, ...f }) {
-	let { getInputProps: p, getRootProps: m, isDragActive: h, isDragReject: g } = fB({
+function _B({ accept: e, className: t, describedById: n, disabled: r, hint: i, icon: a, invalid: o, label: s, maxFileSize: c, maxFiles: l = 1, multiple: u = !1, onFilesAccepted: d, onFilesRejected: f, triggerLabel: p = "Choose file", ...m }) {
+	let { getInputProps: h, getRootProps: g, isDragActive: _, isDragReject: v, open: y } = fB({
 		accept: e,
-		disabled: n,
-		maxFiles: c,
-		maxSize: s,
-		multiple: l,
-		onDropAccepted: u,
-		onDropRejected: d
-	}), _ = k.useId(), v = n ? "disabled" : a || g ? "reject" : h ? "active" : "idle", y = r === null ? null : r ?? gB({
-		maxFiles: c,
-		maxFileSize: s,
-		multiple: l
-	}), x = o === void 0 ? "Choose file to upload" : o;
+		disabled: r,
+		maxFiles: l,
+		maxSize: c,
+		multiple: u,
+		noKeyboard: !0,
+		onDropAccepted: d,
+		onDropRejected: f
+	}), x = k.useId(), S = k.useId(), C = r ? "disabled" : o || v ? "reject" : _ ? "active" : "idle", w = i === null ? null : i ?? gB({
+		maxFiles: l,
+		maxFileSize: c,
+		multiple: u
+	}), T = s === void 0 ? "Choose file to upload" : s, E = [n, w ? S : void 0].filter(Boolean).join(" ") || void 0;
 	return /* @__PURE__ */ U("div", {
-		...f,
-		...m(),
+		...m,
+		...g(),
 		"data-slot": "file-upload-input",
-		"data-state": v,
-		"aria-disabled": n ? !0 : void 0,
-		"aria-invalid": a || g ? !0 : void 0,
-		className: q("flex cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-input bg-background px-6 py-10 text-center transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "data-active:border-ring data-active:bg-accent/40", "data-[state=reject]:border-destructive", "data-[state=disabled]:pointer-events-none data-[state=disabled]:cursor-not-allowed data-[state=disabled]:opacity-50", t),
+		"data-state": C,
+		"aria-disabled": r ? !0 : void 0,
+		"aria-invalid": o || v ? !0 : void 0,
+		className: q("flex cursor-pointer flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-input bg-background px-6 py-10 text-center transition-colors outline-none", "data-active:border-ring data-active:bg-accent/40", "data-[state=reject]:border-destructive", "data-[state=disabled]:pointer-events-none data-[state=disabled]:cursor-not-allowed data-[state=disabled]:opacity-50", t),
 		children: [
-			/* @__PURE__ */ H("input", { ...p(x ? { "aria-labelledby": _ } : { "aria-label": "Upload file" }) }),
+			/* @__PURE__ */ H("input", { ...h({
+				...T ? { "aria-labelledby": x } : { "aria-label": "Choose file to upload" },
+				"aria-describedby": E,
+				"aria-invalid": o || v ? !0 : void 0
+			}) }),
 			/* @__PURE__ */ H("div", {
 				"aria-hidden": "true",
-				className: q("flex items-center justify-center text-muted-foreground", x === null && y === null && "h-full w-full"),
-				children: i ?? /* @__PURE__ */ H(b, { className: "size-8" })
+				className: q("flex items-center justify-center text-muted-foreground", T === null && w === null && "h-full w-full"),
+				children: a ?? /* @__PURE__ */ H(b, { className: "size-8" })
 			}),
-			x ? /* @__PURE__ */ H(fR, {
-				id: _,
-				children: x
+			T ? /* @__PURE__ */ H(fR, {
+				id: x,
+				children: T
 			}) : null,
-			y ? /* @__PURE__ */ H("div", {
+			w ? /* @__PURE__ */ H("div", {
+				id: S,
 				className: "text-xs text-muted-foreground",
-				children: y
+				children: w
+			}) : null,
+			p ? /* @__PURE__ */ H(hb, {
+				type: "button",
+				variant: "outline",
+				size: "sm",
+				disabled: r,
+				"aria-describedby": E,
+				"aria-invalid": o || v ? !0 : void 0,
+				"data-slot": "file-upload-trigger",
+				onClick: (e) => {
+					e.stopPropagation(), y();
+				},
+				children: p
 			}) : null
 		]
 	});
@@ -30439,29 +30458,48 @@ function NJ({ className: e, item: t, onRemove: n, ...r }) {
 //#endregion
 //#region src/composed/FileUpload/FileUpload.tsx
 function PJ({ className: e, errors: t, invalid: n, items: r, onFileRemove: i, onFilesAdd: a, onFilesReject: o, ...s }) {
-	let c = t !== void 0 && t.length > 0;
+	let c = k.useRef(null), l = k.useId(), [u, d] = k.useState(""), f = t !== void 0 && t.length > 0, p = (e) => {
+		e.length === 1 ? d(`Added ${e[0].name}`) : e.length > 1 && d(`Added ${e.length} files`), a?.(e);
+	}, m = (e) => {
+		e.length === 1 ? d(`${e[0].file.name} rejected`) : e.length > 1 && d(`${e.length} files rejected`), o?.(e);
+	}, h = (e) => {
+		let t = r.findIndex((t) => t.id === e), n = r[t];
+		n && d(`Removed ${n.file.name}`);
+		let a = r[t + 1] ?? r[t - 1];
+		requestAnimationFrame(a ? () => {
+			Array.from(c.current?.querySelectorAll("[data-file-upload-item-id]") ?? []).find((e) => e.getAttribute("data-file-upload-item-id") === a.id)?.querySelector("button")?.focus();
+		} : () => c.current?.querySelector("[data-slot=\"file-upload-trigger\"]")?.focus()), i?.(e);
+	};
 	return /* @__PURE__ */ U("div", {
+		ref: c,
 		"data-slot": "file-upload",
 		className: q("flex flex-col gap-3", e),
 		children: [
 			/* @__PURE__ */ H(_B, {
 				...s,
-				invalid: n || c,
-				onFilesAccepted: a,
-				onFilesRejected: o
+				invalid: n || f,
+				describedById: f ? l : void 0,
+				onFilesAccepted: p,
+				onFilesRejected: m
 			}),
-			c ? /* @__PURE__ */ H("ul", {
-				role: "alert",
-				className: "flex flex-col gap-1 text-xs text-destructive",
-				children: t.map((e, t) => /* @__PURE__ */ H("li", { children: e }, t))
+			f ? /* @__PURE__ */ H(CR, {
+				id: l,
+				errors: t.map((e) => ({ message: e }))
 			}) : null,
 			r.length > 0 ? /* @__PURE__ */ H("ul", {
 				className: "flex flex-col gap-2",
 				children: r.map((e) => /* @__PURE__ */ H("li", { children: /* @__PURE__ */ H(NJ, {
 					item: e,
-					onRemove: i
+					onRemove: h,
+					"data-file-upload-item-id": e.id
 				}) }, e.id))
-			}) : null
+			}) : null,
+			/* @__PURE__ */ H("div", {
+				role: "status",
+				"aria-live": "polite",
+				className: "sr-only",
+				children: u
+			})
 		]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravitee/graphene-core",
-  "version": "2.42.1",
+  "version": "2.43.0-renovate-react.07a6489",
   "type": "module",
   "description": "Gravitee's Graphene design system: accessible React components, design tokens, icons, and shared ESLint/TypeScript configs. Built on shadcn/ui and Tailwind.",
   "keywords": [
@@ -91,6 +91,7 @@
   },
   "peerDependencies": {
     "@fontsource/dm-sans": ">=5.0.0",
+    "@gravitee/graphene-core": "2.43.0-renovate-react.07a6489",
     "@tanstack/react-table": "^8.0.0",
     "@testing-library/dom": ">=10.0.0",
     "@testing-library/react": ">=16.0.0",