@webority/ui-react 0.13.1 → 0.13.4

package/dist/types/components/AppFileAttachment.d.ts

@@ -17,13 +17,20 @@
  * @param {(file: File|null) => void | (files: File[]) => void} props.onChange single-mode → File|null; multiple → File[]
  * @param {boolean} [props.multiple=false]
  * @param {string} [props.accept] Defaults to images; pass e.g. "image/*,application/pdf" for mixed.
- * @param {number} [props.maxSizeMb] Defaults to the shared DEFAULT_MAX_SIZE_MB.
+ *   An empty string accepts any file type, and the hint then names no types.
+ * @param {number} [props.maxSizeMb] Defaults to the shared DEFAULT_MAX_SIZE_MB. 0 means no size
+ *   limit: nothing is rejected for its size, and the hint names no size.
  * @param {boolean} [props.optional=false]
+ * @param {boolean} [props.validate=true] Check each pick against `accept` and `maxSizeMb` and show
+ *   the field's own message for a rejected file. Set false when the caller validates the files
+ *   itself and shows its own message through `error`: every pick then reaches `onChange`, so the
+ *   person never sees two messages in two voices for one problem. `accept` and `maxSizeMb` still
+ *   set the picker filter and the hint text.
  * @param {string} [props.error]
  * @param {string} [props.id]
  */
 export default function AppFileAttachment({ label, value, // File | { url, name } | array | null
-name, onChange, multiple, accept, maxSizeMb, optional, error, // external error, shown alongside internal validation errors
+name, onChange, multiple, accept, maxSizeMb, optional, validate, error, // external error, shown alongside internal validation errors
 id, ...rest }: {
     label?: string;
     value?: File | {
@@ -39,6 +46,7 @@ id, ...rest }: {
     accept?: string;
     maxSizeMb?: number;
     optional?: boolean;
+    validate?: boolean;
     error?: string;
     id?: string;
 }): import("react").JSX.Element;

package/dist/types/index.d.ts

@@ -26,7 +26,6 @@ export { default as AppDateRangePicker } from "./components/AppDateRangePicker.j
 export { default as AppDescriptions } from "./components/AppDescriptions.jsx";
 export { default as AppDropdown } from "./components/AppDropdown.jsx";
 export { default as AppEmptyState } from "./components/AppEmptyState.jsx";
-export { default as AppFeedback } from "./components/AppFeedback.jsx";
 export { default as AppFileAttachment } from "./components/AppFileAttachment.jsx";
 export { default as AppFilePicker } from "./components/AppFilePicker.jsx";
 export { default as AppFloatingDock } from "./components/AppFloatingDock.jsx";

package/dist/ui-react.js

@@ -2741,39 +2741,17 @@ var Qt = i(function({ icon: e, iconSize: t = 20, btnClassName: n = "topbar-icon-
 	});
 });
 //#endregion
-//#region src/components/AppFeedback.jsx
-function $t({ onSubmit: e, surface: t, screen: n, heading: r = "Share feedback", label: i = "Feedback", placeholder: a, collectEmail: o = !1, position: s = "bottom-right", className: c = "", style: l, ...u }) {
-	U("AppFeedback", u);
-	let { setRef: d, innerRef: f } = Q({ on: { "wui-feedback-submit": (t) => {
-		let n = f.current;
-		n && Promise.resolve(e?.(t.detail)).then(() => n.submitted(), (e) => n.failed(typeof e?.userMessage == "string" ? e.userMessage : void 0));
-	} } });
-	return /* @__PURE__ */ E("wui-feedback", {
-		ref: d,
-		position: s,
-		label: i,
-		heading: r,
-		placeholder: a || void 0,
-		"collect-email": o ? "" : void 0,
-		surface: t || void 0,
-		screen: n || void 0,
-		class: c || void 0,
-		style: l,
-		...u
-	});
-}
-//#endregion
 //#region src/lib/fileItem.js
-function en(e) {
+function $t(e) {
 	return e instanceof File ? `${e.name}:${e.size}` : e?.url || e?.name || "item";
 }
-function tn(e) {
+function en(e) {
 	return e instanceof File ? e.name : e?.name;
 }
-function nn(e) {
+function tn(e) {
 	return e instanceof File ? `${(e.size / 1024).toFixed(0)} KB` : null;
 }
-function rn(e, t) {
+function nn(e, t) {
 	let [n, r] = f(null);
 	return o(() => {
 		if (!t) {
@@ -2789,8 +2767,8 @@ function rn(e, t) {
 }
 //#endregion
 //#region src/lib/FileItemRow.jsx
-function an({ item: e, isImage: t, onRemove: n, noun: r = "attachment" }) {
-	let i = rn(e, t), a = tn(e), o = nn(e);
+function rn({ item: e, isImage: t, onRemove: n, noun: r = "attachment" }) {
+	let i = nn(e, t), a = en(e), o = tn(e);
 	return /* @__PURE__ */ D("div", {
 		className: "attach-item",
 		children: [
@@ -2829,52 +2807,52 @@ function an({ item: e, isImage: t, onRemove: n, noun: r = "attachment" }) {
 }
 //#endregion
 //#region src/components/AppFileAttachment.jsx
-function on({ label: e = "Attachment", value: t, name: n, onChange: r, multiple: i = !1, accept: a = k, maxSizeMb: o = A, optional: c = !1, error: l, id: u, ...d }) {
-	U("AppFileAttachment", d);
-	let p = s(), m = u || p, [h, g] = f(""), _ = i && Array.isArray(t) ? t : t ? [t] : [], v = F(a), y = (e) => e instanceof File ? P(e) : v || P(e), b = !i && _.length === 1 && y(_[0]);
-	function x(e) {
+function an({ label: e = "Attachment", value: t, name: n, onChange: r, multiple: i = !1, accept: a = k, maxSizeMb: o = A, optional: c = !1, validate: l = !0, error: u, id: d, ...p }) {
+	U("AppFileAttachment", p);
+	let m = s(), h = d || m, [g, _] = f(""), v = i && Array.isArray(t) ? t : t ? [t] : [], y = F(a), b = (e) => e instanceof File ? P(e) : y || P(e), x = !i && v.length === 1 && b(v[0]), S = o > 0, C = on(a, S ? o : 0);
+	function w(e) {
 		let n = Array.from(e.target.files || []);
 		if (e.target.value = "", !n.length) return;
 		let s = [], c = "";
 		for (let e of n) {
-			let t = I(e, {
+			let t = l ? I(e, {
 				accept: a,
-				maxSizeMb: o
-			});
+				maxSizeMb: S ? o : Infinity
+			}) : null;
 			if (t) {
 				c ||= t;
 				continue;
 			}
 			s.push(e);
 		}
-		if (g(c), s.length) if (i) {
-			let e = Array.isArray(t) ? t : t ? [t] : [], n = new Set(e.map(en));
-			r(e.concat(s.filter((e) => !n.has(en(e)))));
+		if (_(c), s.length) if (i) {
+			let e = Array.isArray(t) ? t : t ? [t] : [], n = new Set(e.map($t));
+			r(e.concat(s.filter((e) => !n.has($t(e)))));
 		} else r(s[0]);
 	}
-	function S(e) {
-		g(""), r(i ? _.filter((t, n) => n !== e) : null);
+	function O(e) {
+		_(""), r(i ? v.filter((t, n) => n !== e) : null);
 	}
-	let C = l || h, w = C ? `${m}-error` : void 0, O = i || _.length === 0, M = v ? "image" : "file", N = i ? `Add ${M}s` : `Add ${v ? "an" : "a"} ${M}`;
+	let j = u || g, M = j ? `${h}-error` : void 0, N = i || v.length === 0, L = y ? "image" : "file", R = i ? `Add ${L}s` : `Add ${y ? "an" : "a"} ${L}`;
 	return /* @__PURE__ */ D("div", {
 		className: "field",
 		children: [
 			/* @__PURE__ */ D("label", {
 				className: "label",
-				htmlFor: m,
+				htmlFor: h,
 				children: [e, c && /* @__PURE__ */ E("span", {
 					className: "label-optional",
 					children: " (optional)"
 				})]
 			}),
-			O && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("label", {
+			N && /* @__PURE__ */ D(T, { children: [/* @__PURE__ */ D("label", {
 				className: "attach-drop",
-				htmlFor: m,
+				htmlFor: h,
 				children: [
 					/* @__PURE__ */ E("span", {
 						className: "attach-drop-icon",
 						children: /* @__PURE__ */ E(Y, {
-							name: v ? "image" : "file-text",
+							name: y ? "image" : "file-text",
 							size: 18
 						})
 					}),
@@ -2882,15 +2860,10 @@ function on({ label: e = "Attachment", value: t, name: n, onChange: r, multiple:
 						className: "attach-drop-copy",
 						children: [/* @__PURE__ */ E("span", {
 							className: "attach-drop-title",
-							children: N
-						}), /* @__PURE__ */ D("span", {
+							children: R
+						}), C && /* @__PURE__ */ E("span", {
 							className: "attach-drop-hint",
-							children: [
-								j(a),
-								", up to ",
-								o,
-								" MB"
-							]
+							children: C
 						})]
 					}),
 					/* @__PURE__ */ E("span", {
@@ -2899,38 +2872,42 @@ function on({ label: e = "Attachment", value: t, name: n, onChange: r, multiple:
 					})
 				]
 			}), /* @__PURE__ */ E("input", {
-				id: m,
+				id: h,
 				type: "file",
 				className: "visually-hidden",
 				name: n,
-				accept: a,
+				accept: a || void 0,
 				multiple: i || void 0,
-				"aria-describedby": w,
-				onChange: x,
-				...d
+				"aria-describedby": M,
+				onChange: w,
+				...p
 			})] }),
-			b ? /* @__PURE__ */ E(sn, {
-				item: _[0],
+			x ? /* @__PURE__ */ E(sn, {
+				item: v[0],
 				isImage: !0,
-				onRemove: () => S(0)
-			}) : _.length > 0 && /* @__PURE__ */ E("div", {
+				onRemove: () => O(0)
+			}) : v.length > 0 && /* @__PURE__ */ E("div", {
 				className: "attach-list",
-				children: _.map((e, t) => /* @__PURE__ */ E(an, {
+				children: v.map((e, t) => /* @__PURE__ */ E(rn, {
 					item: e,
-					isImage: y(e),
-					onRemove: () => S(t)
-				}, en(e)))
+					isImage: b(e),
+					onRemove: () => O(t)
+				}, $t(e)))
 			}),
-			C && /* @__PURE__ */ E("div", {
+			j && /* @__PURE__ */ E("div", {
 				className: "field-error",
-				id: `${m}-error`,
-				children: C
+				id: `${h}-error`,
+				children: j
 			})
 		]
 	});
 }
+function on(e, t) {
+	let n = e?.trim() ? j(e) : "", r = t > 0 ? `up to ${t} MB` : "";
+	return n && r ? `${n}, ${r}` : r ? `Up to ${t} MB` : n;
+}
 function sn({ item: e, isImage: t, onRemove: n }) {
-	let r = rn(e, t), i = tn(e), a = nn(e);
+	let r = nn(e, t), i = en(e), a = tn(e);
 	return /* @__PURE__ */ D("div", {
 		className: "attach-preview",
 		children: [/* @__PURE__ */ D("div", {
@@ -2981,7 +2958,7 @@ function cn({ label: e, value: t, name: n, id: r, onPick: i, multiple: a = !1, m
 	}, ce = (e) => {
 		let n = Array.from(e || []);
 		if (!n.length) return;
-		let r = Array.isArray(t) ? t : t ? [t] : [], a = new Set(r.map(en)), o = "", s = [];
+		let r = Array.isArray(t) ? t : t ? [t] : [], a = new Set(r.map($t)), o = "", s = [];
 		for (let e of n) {
 			let t = I(e, {
 				accept: l,
@@ -2991,7 +2968,7 @@ function cn({ label: e, value: t, name: n, id: r, onPick: i, multiple: a = !1, m
 				o ||= t;
 				continue;
 			}
-			a.has(en(e)) || (a.add(en(e)), s.push(e));
+			a.has($t(e)) || (a.add($t(e)), s.push(e));
 		}
 		let d = r.concat(s);
 		c && d.length > c && (d = d.slice(0, c), o ||= `Up to ${c} files.`), O(o), i(d);
@@ -3141,12 +3118,12 @@ function cn({ label: e, value: t, name: n, id: r, onPick: i, multiple: a = !1, m
 					fe,
 					a && L.length > 0 && /* @__PURE__ */ E("div", {
 						className: "attach-list",
-						children: L.map((e, t) => /* @__PURE__ */ E(an, {
+						children: L.map((e, t) => /* @__PURE__ */ E(rn, {
 							item: e,
 							isImage: e instanceof File ? P(e) : V || P(e),
 							noun: "file",
 							onRemove: () => ue(t)
-						}, en(e)))
+						}, $t(e)))
 					})
 				]
 			}),
@@ -5999,4 +5976,4 @@ function Yr(e, t = 10) {
 	};
 }
 //#endregion
-export { Oe as AppAccordion, ke as AppActionIcon, Me as AppAlert, ze as AppAsyncBlock, Ze as AppAutocomplete, rt as AppAvatar, ot as AppAvatarGroup, st as AppBadge, lt as AppBanner, ut as AppBreadcrumbs, Ie as AppButton, ft as AppCallout, mt as AppCard, gt as AppCheckbox, _t as AppChip, vt as AppChoiceCard, yt as AppChoiceChip, bt as AppColorField, St as AppCompareTable, jt as AppConfirmDialog, Nt as AppConsentBanner, Ft as AppCopyButton, Gt as AppDataTable, Kt as AppDatePicker, qt as AppDateRangePicker, Jt as AppDescriptions, Zt as AppDropdown, Le as AppEmptyState, $t as AppFeedback, on as AppFileAttachment, cn as AppFilePicker, ln as AppFloatingDock, un as AppFormActions, dn as AppFormRow, fn as AppFormSection, Y as AppIcon, pn as AppInfoList, He as AppInfoTip, Ct as AppInput, vn as AppKpiTile, Sn as AppLink, wn as AppLogoPicker, On as AppMeter, Ot as AppModal, kn as AppMultiSelect, An as AppNumberInput, jn as AppOtpInput, Mn as AppPageHeader, Nn as AppPagination, Pn as AppPhoneNumberInput, Ve as AppPopover, Fn as AppPricingCard, Rn as AppProgress, zn as AppRadio, Bn as AppRepeater, Z as AppRequiredMark, Vn as AppResourceCard, Un as AppResult, Wn as AppScrollbar, Gn as AppSearch, Kn as AppSegmented, Jn as AppSelect, Bt as AppSelectMini, Yn as AppShell, Qn as AppSidebarMenu, It as AppSkeleton, Lt as AppSkeletonRows, $n as AppSlider, Re as AppSpinner, tr as AppSplash, nr as AppStatusBadge, rr as AppStepper, ar as AppSwitch, or as AppTableEmptyState, Ht as AppTablePagination, ur as AppTabs, dr as AppTagInput, fr as AppTextarea, hr as AppTimePicker, mr as AppTimeline, Fr as AppToast, Lr as AppToolbar, G as AppTooltip, Rr as AppWizard, Br as AppWorkspaceSwitcher, At as MODAL_ICONS, Gr as dismissAll, Jr as errorToast, Te as iconNames, De as registerIcons, qr as toast, Yr as usePagination };
+export { Oe as AppAccordion, ke as AppActionIcon, Me as AppAlert, ze as AppAsyncBlock, Ze as AppAutocomplete, rt as AppAvatar, ot as AppAvatarGroup, st as AppBadge, lt as AppBanner, ut as AppBreadcrumbs, Ie as AppButton, ft as AppCallout, mt as AppCard, gt as AppCheckbox, _t as AppChip, vt as AppChoiceCard, yt as AppChoiceChip, bt as AppColorField, St as AppCompareTable, jt as AppConfirmDialog, Nt as AppConsentBanner, Ft as AppCopyButton, Gt as AppDataTable, Kt as AppDatePicker, qt as AppDateRangePicker, Jt as AppDescriptions, Zt as AppDropdown, Le as AppEmptyState, an as AppFileAttachment, cn as AppFilePicker, ln as AppFloatingDock, un as AppFormActions, dn as AppFormRow, fn as AppFormSection, Y as AppIcon, pn as AppInfoList, He as AppInfoTip, Ct as AppInput, vn as AppKpiTile, Sn as AppLink, wn as AppLogoPicker, On as AppMeter, Ot as AppModal, kn as AppMultiSelect, An as AppNumberInput, jn as AppOtpInput, Mn as AppPageHeader, Nn as AppPagination, Pn as AppPhoneNumberInput, Ve as AppPopover, Fn as AppPricingCard, Rn as AppProgress, zn as AppRadio, Bn as AppRepeater, Z as AppRequiredMark, Vn as AppResourceCard, Un as AppResult, Wn as AppScrollbar, Gn as AppSearch, Kn as AppSegmented, Jn as AppSelect, Bt as AppSelectMini, Yn as AppShell, Qn as AppSidebarMenu, It as AppSkeleton, Lt as AppSkeletonRows, $n as AppSlider, Re as AppSpinner, tr as AppSplash, nr as AppStatusBadge, rr as AppStepper, ar as AppSwitch, or as AppTableEmptyState, Ht as AppTablePagination, ur as AppTabs, dr as AppTagInput, fr as AppTextarea, hr as AppTimePicker, mr as AppTimeline, Fr as AppToast, Lr as AppToolbar, G as AppTooltip, Rr as AppWizard, Br as AppWorkspaceSwitcher, At as MODAL_ICONS, Gr as dismissAll, Jr as errorToast, Te as iconNames, De as registerIcons, qr as toast, Yr as usePagination };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webority/ui-react",
-  "version": "0.13.1",
+  "version": "0.13.4",
   "description": "Webority shared React component library — App* primitives on react-bootstrap + the @webority/theme design system.",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
@@ -28,8 +28,8 @@
   },
   "sideEffects": false,
   "dependencies": {
-    "@webority/theme": "0.13.1",
-    "@webority/ui-elements": "0.13.1"
+    "@webority/theme": "0.13.4",
+    "@webority/ui-elements": "0.13.4"
   },
   "peerDependencies": {
     "@webority/analytics": "^0.5.2",

package/dist/types/components/AppFeedback.d.ts

@@ -1,61 +0,0 @@
-import "@webority/ui-elements";
-/**
- * An in-product feedback affordance — a floating trigger pinned to a page corner that opens a
- * small panel with a message box and, optionally, an email address.
- *
- * Wraps the shared `<wui-feedback>` element, which owns the panel, the keyboard and ARIA
- * behaviour, and the busy/error/thank-you states. This wrapper owns exactly one thing: turning
- * the element's `wui-feedback-submit` event into your `onSubmit`, and your promise's outcome
- * back into the element's `submitted()` / `failed()`.
- *
- * `onSubmit` is REQUIRED and it is the whole contract — resolve and the person sees a
- * thank-you, reject and they see an inline error with everything they typed still there. The
- * library never posts anything itself: every product has its own endpoint, its own auth and its
- * own idea of where feedback lands.
- *
- * ```jsx
- * <AppFeedback
- *   surface="customer-portal"
- *   screen={location.pathname}
- *   collectEmail
- *   onSubmit={async ({ message, email, surface, screen }) => {
- *     await Api.Feedback.submit({ message, email, surface, screen });
- *   }}
- * />
- * ```
- *
- * To show your own failure copy rather than the element's default, reject with an error
- * carrying a `userMessage` — an exception's own `message` is never shown, because it is written
- * for a developer, not for the person reading it.
- *
- * @param {object} props
- * @param {(payload: { message: string, email: string, surface: string, screen: string }) =>
- *   Promise<void>|void} props.onSubmit Required. Deliver the feedback; resolve on success,
- *   reject on failure.
- * @param {string} [props.surface] Which product surface this came from, passed through to onSubmit.
- * @param {string} [props.screen] Which screen/route it came from, passed through to onSubmit.
- * @param {string} [props.heading='Share feedback'] Panel heading, and the dialog's accessible name.
- * @param {string} [props.label='Feedback'] Trigger text beside the icon.
- * @param {string} [props.placeholder] Placeholder for the message box.
- * @param {boolean} [props.collectEmail=false] Also ask for an email address.
- * @param {"bottom-right"|"bottom-left"} [props.position='bottom-right'] Which corner it pins to.
- * @param {string} [props.className] Extra classes on the element.
- * @param {import('react').CSSProperties} [props.style] Inline style; lands on the element with `className`.
- */
-export default function AppFeedback({ onSubmit, surface, screen, heading, label, placeholder, collectEmail, position, className, style, ...rest }: {
-    onSubmit: (payload: {
-        message: string;
-        email: string;
-        surface: string;
-        screen: string;
-    }) => Promise<void> | void;
-    surface?: string;
-    screen?: string;
-    heading?: string;
-    label?: string;
-    placeholder?: string;
-    collectEmail?: boolean;
-    position?: "bottom-right" | "bottom-left";
-    className?: string;
-    style?: import('react').CSSProperties;
-}): import("react").JSX.Element;