@revolist/ui 4.0.5-rc → 4.0.5

package/resource-picker/resource-picker.js

@@ -1,27 +1,28 @@
 import { c as e, i as t, n, o as r, t as i } from "../_chunks/hooks.module-CG3gN83z.js";
 import { t as a } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { createControlId as o } from "../core/control-id.js";
-import { t as s } from "../_chunks/chevron-down-GbplLa6s.js";
-import { t as ee } from "../_chunks/xmark-DD_PBvZI.js";
-import { SearchInput as c } from "../search-input/index.js";
-import { resourcePickerClasses as l, resourcePickerDataAttribute as u, resourcePickerIdKey as d } from "./resource-picker.utils.js";
-import { ResourcePickerAvatar as f } from "./resource-picker-avatar.js";
-import { ResourcePickerOption as p } from "./resource-picker-option.js";
-import { ResourcePickerPopup as m } from "./resource-picker-popup.js";
-//#region src/resource-picker/resource-picker.tsx
-function h({ resources: h, selectedResourceIds: v, text: y, onChange: b, classNames: x, disabled: S = !1, readOnly: C = !1, presentation: w = "inline", multiple: T = !0, preserveOrder: E = !1, unassigned: D, resourceDataAttribute: O, isResourceDisabled: k, getAvatarColor: A }) {
-	let j = i(null), M = i(null), N = i(null), P = i(null), F = i(!1), [I] = t(() => o("rv-resource-list")), L = `${I}-popup`, R = w === "dropdown", [z, B] = t(!1), [V, H] = t(""), [U, W] = t(0), G = r(() => {
+import { t as s } from "../_chunks/selection-list-tooltips-m00U3L6z.js";
+import { t as c } from "../_chunks/chevron-down-GbplLa6s.js";
+import { t as l } from "../_chunks/xmark-DD_PBvZI.js";
+import { SearchInput as u } from "../search-input/index.js";
+import { resourcePickerClasses as d, resourcePickerDataAttribute as f, resourcePickerIdKey as p } from "./resource-picker.utils.js";
+import { ResourcePickerAvatar as m } from "./resource-picker-avatar.js";
+import { ResourcePickerOption as ee } from "./resource-picker-option.js";
+import { ResourcePickerPopup as h } from "./resource-picker-popup.js";
+//#region package/resource-picker/resource-picker.tsx
+function g({ resources: g, selectedResourceIds: y, text: b, onChange: x, classNames: S, disabled: C = !1, readOnly: w = !1, presentation: T = "inline", multiple: E = !0, preserveOrder: D = !1, unassigned: O, resourceDataAttribute: te, isResourceDisabled: k, getAvatarColor: A }) {
+	let j = i(null), M = i(null), N = i(null), P = i(null), ne = s(".rv-resource-picker__option"), F = i(!1), [I] = t(() => o("rv-resource-list")), L = `${I}-popup`, R = T === "dropdown", [z, B] = t(!1), [V, H] = t(""), [U, W] = t(0), G = r(() => {
 		B(!1), H("");
-	}, []), K = new Set(v.map(d)), q = n(() => E ? [...h] : [...h].sort((e, t) => e.name.localeCompare(t.name, void 0, {
+	}, []), K = new Set(y.map(p)), q = n(() => D ? [...g] : [...g].sort((e, t) => e.name.localeCompare(t.name, void 0, {
 		numeric: !0,
 		sensitivity: "base"
-	})), [E, h]), J = n(() => {
+	})), [D, g]), J = n(() => {
 		let e = V.trim().toLocaleLowerCase();
 		return e ? q.filter((t) => `${t.name} ${t.role ?? ""}`.toLocaleLowerCase().includes(e)) : q;
 	}, [V, q]), Y = n(() => {
-		let e = new Map(h.map((e) => [d(e.id), e]));
-		return v.map((t) => e.get(d(t))).filter((e) => !!e);
-	}, [h, v]), X = R && U >= 0 && U < J.length ? `${I}-option-${U}` : void 0;
+		let e = new Map(g.map((e) => [p(e.id), e]));
+		return y.map((t) => e.get(p(t))).filter((e) => !!e);
+	}, [g, y]), X = R && U >= 0 && U < J.length ? `${I}-option-${U}` : void 0;
 	e(() => {
 		if (!R || !z) return;
 		let e = (e) => {
@@ -49,72 +50,73 @@ function h({ resources: h, selectedResourceIds: v, text: y, onChange: b, classNa
 		e && P.current.contains(e) && e.closest(".rv-resource-picker__option")?.scrollIntoView?.({ block: "nearest" });
 	}, [X, z]);
 	let Z = (e) => {
-		C || (b(e), !T && R && G());
-	}, te = () => {
+		w || (x(e), !E && R && G());
+	}, re = () => {
 		let e = J[U];
 		if (!e) return;
-		let t = d(e.id);
-		(!k?.(e) || K.has(t)) && Z(K.has(t) ? v.filter((e) => d(e) !== t) : T ? g([...v, e.id]) : [e.id]);
-	}, ne = (e) => {
+		let t = p(e.id);
+		(!k?.(e) || K.has(t)) && Z(K.has(t) ? y.filter((e) => p(e) !== t) : E ? _([...y, e.id]) : [e.id]);
+	}, ie = (e) => {
 		if (e.key === "Escape") e.preventDefault(), e.stopPropagation(), G(), M.current?.focus();
 		else if (e.key === "ArrowDown" || e.key === "ArrowUp") {
 			if (e.preventDefault(), e.stopPropagation(), !J.length) return;
 			F.current = !0, W((t) => e.key === "ArrowDown" ? t >= J.length - 1 ? 0 : t + 1 : t <= 0 ? J.length - 1 : t - 1);
-		} else e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), te());
+		} else e.key === "Enter" && (e.preventDefault(), e.stopPropagation(), re());
 	}, Q = typeof document > "u" ? null : j.current?.closest("dialog, .rv-dialog-overlay") ?? document.body, $ = /* @__PURE__ */ a("div", {
+		ref: ne,
 		class: "rv-resource-picker__popover",
-		onKeyDown: R ? ne : void 0,
-		children: [/* @__PURE__ */ a(c, {
+		onKeyDown: R ? ie : void 0,
+		children: [/* @__PURE__ */ a(u, {
 			inputRef: N,
 			rootClassName: "rv-resource-picker__search-control",
-			inputClassName: l("rv-resource-picker__search", x?.search),
+			inputClassName: d("rv-resource-picker__search", S?.search),
 			value: V,
-			disabled: S,
-			placeholder: y.searchPlaceholder,
-			"aria-label": y.searchAriaLabel,
+			disabled: C,
+			placeholder: b.searchPlaceholder,
+			"aria-label": b.searchAriaLabel,
 			onValueChange: H
 		}), /* @__PURE__ */ a("div", {
 			ref: P,
-			class: l("rv-resource-picker__list", x?.list),
+			class: d("rv-resource-picker__list", S?.list),
 			role: R ? "listbox" : "group",
 			id: R ? I : void 0,
-			"aria-multiselectable": R ? T : void 0,
+			"aria-multiselectable": R ? E : void 0,
 			"aria-activedescendant": X,
-			"aria-label": y.groupAriaLabel,
-			children: [D && !C ? /* @__PURE__ */ a("label", {
-				class: l("rv-resource-picker__option rv-resource-picker__option--unassigned", x?.option),
+			"aria-label": b.groupAriaLabel,
+			children: [O && !w ? /* @__PURE__ */ a("label", {
+				class: d("rv-resource-picker__option rv-resource-picker__option--unassigned", S?.option),
 				children: [
 					/* @__PURE__ */ a("input", {
 						type: "checkbox",
-						checked: v.length === 0,
-						disabled: S,
-						...u(D.dataAttribute, ""),
-						onChange: () => b([])
+						checked: y.length === 0,
+						disabled: C,
+						...f(O.dataAttribute, ""),
+						onChange: () => x([])
 					}),
 					/* @__PURE__ */ a("span", {
 						class: "rv-resource-picker__avatar-spacer",
 						"aria-hidden": "true"
 					}),
 					/* @__PURE__ */ a("span", {
-						class: l("rv-resource-picker__details", x?.details),
-						children: /* @__PURE__ */ a("strong", { children: D.label })
+						class: d("rv-resource-picker__details", S?.details),
+						children: /* @__PURE__ */ a("strong", { children: O.label })
 					})
 				]
-			}) : null, h.length === 0 ? /* @__PURE__ */ a(_, {
-				className: x?.muted,
-				text: y.emptyResources
-			}) : J.length === 0 ? /* @__PURE__ */ a(_, {
-				className: x?.muted,
-				text: y.emptySearch
-			}) : J.map((e, t) => /* @__PURE__ */ a(p, {
+			}) : null, g.length === 0 ? /* @__PURE__ */ a(v, {
+				className: S?.muted,
+				text: b.emptyResources
+			}) : J.length === 0 ? /* @__PURE__ */ a(v, {
+				className: S?.muted,
+				text: b.emptySearch
+			}) : J.map((e, t) => /* @__PURE__ */ a(ee, {
 				resource: e,
-				selected: K.has(d(e.id)),
-				selectedResourceIds: v,
-				disabled: S,
-				readOnly: C,
-				multiple: T,
-				resourceDataAttribute: O,
-				classNames: x,
+				selected: K.has(p(e.id)),
+				selectedResourceIds: y,
+				disabled: C,
+				readOnly: w,
+				multiple: E,
+				resourceDataAttribute: te,
+				classNames: S,
 				isResourceDisabled: k,
 				getAvatarColor: A,
 				optionId: R ? `${I}-option-${t}` : void 0,
@@ -123,12 +125,12 @@ function h({ resources: h, selectedResourceIds: v, text: y, onChange: b, classNa
 					F.current = !1, W(t);
 				},
 				onChange: Z
-			}, d(e.id)))]
+			}, p(e.id)))]
 		})]
 	});
 	return /* @__PURE__ */ a("div", {
 		ref: j,
-		class: l("rv-resource-picker", R ? "rv-resource-picker--dropdown" : void 0, z ? "rv-resource-picker--open" : void 0, x?.root),
+		class: d("rv-resource-picker", R ? "rv-resource-picker--dropdown" : void 0, z ? "rv-resource-picker--open" : void 0, S?.root),
 		children: [R ? /* @__PURE__ */ a("div", {
 			ref: M,
 			class: "rv-resource-picker__control",
@@ -136,51 +138,51 @@ function h({ resources: h, selectedResourceIds: v, text: y, onChange: b, classNa
 			"aria-expanded": z,
 			"aria-controls": I,
 			"aria-haspopup": "listbox",
-			"aria-label": y.groupAriaLabel,
-			tabIndex: S ? -1 : 0,
+			"aria-label": b.groupAriaLabel,
+			tabIndex: C ? -1 : 0,
 			onClick: (e) => {
-				S || (e.preventDefault(), z ? G() : B(!0));
+				C || (e.preventDefault(), z ? G() : B(!0));
 			},
 			onKeyDown: (e) => {
-				S || e.target !== e.currentTarget || (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), B(!0));
+				C || e.target !== e.currentTarget || (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") && (e.preventDefault(), B(!0));
 			},
 			children: [/* @__PURE__ */ a("div", {
 				class: "rv-resource-picker__chips",
 				children: Y.length ? Y.map((e) => /* @__PURE__ */ a("span", {
 					class: "rv-resource-picker__chip",
 					children: [
-						/* @__PURE__ */ a(f, {
+						/* @__PURE__ */ a(m, {
 							resource: e,
-							className: x?.avatar,
+							className: S?.avatar,
 							color: A?.(e)
 						}),
 						/* @__PURE__ */ a("span", {
 							class: "rv-resource-picker__chip-label",
 							children: e.name
 						}),
-						!S && !C ? /* @__PURE__ */ a("button", {
+						!C && !w ? /* @__PURE__ */ a("button", {
 							type: "button",
 							class: "rv-resource-picker__chip-remove",
 							"aria-label": `Remove ${e.name}`,
 							onClick: (t) => {
-								t.stopPropagation(), b(v.filter((t) => d(t) !== d(e.id)));
+								t.stopPropagation(), x(y.filter((t) => p(t) !== p(e.id)));
 							},
 							children: /* @__PURE__ */ a("span", {
 								"aria-hidden": "true",
-								dangerouslySetInnerHTML: { __html: ee }
+								dangerouslySetInnerHTML: { __html: l }
 							})
 						}) : null
 					]
-				}, d(e.id))) : /* @__PURE__ */ a("span", {
+				}, p(e.id))) : /* @__PURE__ */ a("span", {
 					class: "rv-resource-picker__placeholder",
-					children: y.searchPlaceholder
+					children: b.searchPlaceholder
 				})
 			}), /* @__PURE__ */ a("span", {
 				class: "rv-resource-picker__chevron",
 				"aria-hidden": "true",
-				dangerouslySetInnerHTML: { __html: s }
+				dangerouslySetInnerHTML: { __html: c }
 			})]
-		}) : null, R ? z && Q ? /* @__PURE__ */ a(m, {
+		}) : null, R ? z && Q ? /* @__PURE__ */ a(h, {
 			triggerRef: M,
 			portalTarget: Q,
 			popupId: L,
@@ -188,14 +190,14 @@ function h({ resources: h, selectedResourceIds: v, text: y, onChange: b, classNa
 		}) : null : $]
 	});
 }
-function g(e) {
-	return [...new Map(e.map((e) => [d(e), e])).values()];
+function _(e) {
+	return [...new Map(e.map((e) => [p(e), e])).values()];
 }
-function _({ className: e, text: t }) {
+function v({ className: e, text: t }) {
 	return /* @__PURE__ */ a("span", {
-		class: l("rv-resource-picker__empty", e),
+		class: d("rv-resource-picker__empty", e),
 		children: t
 	});
 }
 //#endregion
-export { h as SharedResourcePicker };
+export { g as SharedResourcePicker };

package/resource-picker/resource-picker.scss

@@ -18,7 +18,10 @@
   --rv-control-border: var(--rv-resource-picker-border, var(--rv-ui-border));
 }
 .rv-resource-picker__search-control input {
-  min-height: var(--rv-resource-picker-search-height, var(--rv-control-height, 32px));
+  min-height: var(
+    --rv-resource-picker-search-height,
+    var(--rv-control-height, 32px)
+  );
 }
 
 .rv-resource-picker__list {
@@ -31,10 +34,11 @@
   max-height: var(--rv-resource-picker-max-height, 184px);
   overflow: auto;
   padding: var(--rv-resource-picker-list-padding, 6px);
-  border: 1px solid var(
-    --rv-resource-picker-border,
-    color-mix(in srgb, currentColor 14%, transparent)
-  );
+  border: 1px solid
+    var(
+      --rv-resource-picker-border,
+      color-mix(in srgb, currentColor 14%, transparent)
+    );
   border-radius: var(--rv-resource-picker-radius, 6px);
   background: var(--rv-resource-picker-background, Canvas);
 }
@@ -139,14 +143,18 @@
   display: flex;
   box-sizing: border-box;
   width: 100%;
-  min-height: var(--rv-resource-picker-control-height, var(--rv-control-height, 32px));
+  min-height: var(
+    --rv-resource-picker-control-height,
+    var(--rv-control-height, 32px)
+  );
   align-items: center;
   gap: 8px;
   padding: var(--rv-resource-picker-control-padding, 1px 10px);
-  border: 1px solid var(
-    --rv-resource-picker-border,
-    color-mix(in srgb, currentColor 14%, transparent)
-  );
+  border: 1px solid
+    var(
+      --rv-resource-picker-border,
+      color-mix(in srgb, currentColor 14%, transparent)
+    );
   border-radius: var(--rv-resource-picker-radius, 8px);
   outline: none;
   background: var(--rv-resource-picker-background, Canvas);
@@ -165,11 +173,12 @@
 .rv-resource-picker__control:focus-visible,
 .rv-resource-picker--open .rv-resource-picker__control {
   border-color: var(--rv-resource-picker-accent, var(--rv-ui-accent));
-  box-shadow: 0 0 0 3px color-mix(
-    in srgb,
-    var(--rv-resource-picker-accent, var(--rv-ui-shadow)) 16%,
-    transparent
-  );
+  box-shadow: 0 0 0 3px
+    color-mix(
+      in srgb,
+      var(--rv-resource-picker-accent, var(--rv-ui-shadow)) 16%,
+      transparent
+    );
 }
 
 .rv-resource-picker__chips {
@@ -188,11 +197,12 @@
   align-items: center;
   gap: 5px;
   padding: 3px 5px 3px 3px;
-  border: 1px solid color-mix(
-    in srgb,
-    var(--rv-resource-picker-accent, var(--rv-ui-accent)) 18%,
-    transparent
-  );
+  border: 1px solid
+    color-mix(
+      in srgb,
+      var(--rv-resource-picker-accent, var(--rv-ui-accent)) 18%,
+      transparent
+    );
   border-radius: 999px;
   background: color-mix(
     in srgb,
@@ -267,7 +277,8 @@
 
 .rv-resource-picker__chevron {
   flex: 0 0 auto;
-  transition: transform var(--rv-ui-motion-normal, 160ms) var(--rv-ui-motion-ease, ease-out);
+  transition: transform var(--rv-ui-motion-normal, 160ms)
+    var(--rv-ui-motion-ease, ease-out);
 }
 
 .rv-resource-picker__chevron svg,
@@ -290,17 +301,19 @@
   gap: 6px;
   box-sizing: border-box;
   padding: 7px;
-  border: 1px solid var(
-    --rv-resource-picker-border,
-    color-mix(in srgb, currentColor 14%, transparent)
-  );
+  border: 1px solid
+    var(
+      --rv-resource-picker-border,
+      color-mix(in srgb, currentColor 14%, transparent)
+    );
   border-radius: calc(var(--rv-resource-picker-radius, 8px) + 2px);
   background: var(--rv-resource-picker-popover-background, Canvas);
   box-shadow: var(
     --rv-resource-picker-popover-shadow,
     0 14px 36px var(--rv-ui-shadow)
   );
-  animation: rv-resource-picker-popover-in var(--rv-ui-motion-enter, 180ms) var(--rv-ui-motion-ease, ease-out);
+  animation: rv-resource-picker-popover-in var(--rv-ui-motion-enter, 180ms)
+    var(--rv-ui-motion-ease, ease-out);
 }
 
 .rv-resource-picker__portal.revo-dropdown-menu {
@@ -349,23 +362,38 @@
   outline: 2px solid var(--rv-resource-picker-accent, var(--rv-ui-accent));
   outline-offset: -2px;
 }
-.rv-resource-picker__option .avatar-cell.rv-resource-picker__avatar { box-shadow: none; }
-.rv-resource-picker__details strong { font-weight: 500; line-height: 1.4; }
-.rv-resource-picker__details em { font-size: 12px; line-height: 1.4; }
-.rv-resource-picker__list { gap: 4px; }
+.rv-resource-picker__option .avatar-cell.rv-resource-picker__avatar {
+  box-shadow: none;
+}
+.rv-resource-picker__details strong {
+  font-weight: 500;
+  line-height: 1.4;
+}
+.rv-resource-picker__details em {
+  font-size: 12px;
+  line-height: 1.4;
+}
+.rv-resource-picker__list {
+  gap: 4px;
+}
 
 // The portal wrapper already owns its entrance; avoid fading nested surfaces twice.
-.rv-resource-picker__portal .rv-resource-picker__popover { animation: none; }
+.rv-resource-picker__portal .rv-resource-picker__popover {
+  animation: none;
+}
 
 .rv-resource-picker__option,
 .rv-resource-picker__control {
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
-    border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
 }
 .rv-resource-picker__chip-remove {
   transition:
-    background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, ease-out),
     opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, ease-out);
 }

package/resource-picker/resource-picker.utils.js

@@ -1,4 +1,4 @@
-//#region src/resource-picker/resource-picker.utils.ts
+//#region package/resource-picker/resource-picker.utils.ts
 function e(e) {
 	return String(e);
 }

package/rich-text/index.js

@@ -1 +1 @@
-export { t as HtmlEditor, s as HtmlSyntax, r as defaultHtmlEditorText, i as formatRichTextHtml, n as htmlRenderNodes, a as isSafeRichTextLink, o as sanitizeRichTextHtml } from "../_chunks/rich-text-xfMWadGi.js";
+export { t as HtmlEditor, s as HtmlSyntax, r as defaultHtmlEditorText, i as formatRichTextHtml, n as htmlRenderNodes, a as isSafeRichTextLink, o as sanitizeRichTextHtml } from "../_chunks/rich-text-Ci4d6dHn.js";