@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/primitives/select-multi.mjs

@@ -0,0 +1,590 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { cn } from "../../lib/utils.mjs";
+import { Badge } from "../ui/badge.mjs";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.mjs";
+import { useIsMobile } from "../../hooks/use-media-query.mjs";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../ui/command.mjs";
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger } from "../ui/drawer.mjs";
+import { flattenOptions } from "./types.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import { useDeferredValue, useId, useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/select-multi.tsx
+const EMPTY_VALUE = [];
+const EMPTY_OPTIONS = [];
+/**
+* SelectMulti - Multi-select component with chips
+*
+* Features:
+* - Always searchable
+* - Responsive: Popover on desktop, Drawer on mobile
+* - Chip display with remove buttons
+* - Supports static and async options
+* - Keyboard navigation
+*
+* @example
+* ```tsx
+* <SelectMulti
+*   value={selectedTags}
+*   onChange={setSelectedTags}
+*   options={[
+*     { value: "react", label: "React" },
+*     { value: "vue", label: "Vue" },
+*     { value: "angular", label: "Angular" },
+*   ]}
+* />
+* ```
+*/
+function SelectMulti(t0) {
+	const $ = c(141);
+	const { value, onChange, options: staticOptions, loadOptions, queryKey, prefetchOnMount: t1, maxSelections, loading: t2, emptyMessage: t3, placeholder: t4, disabled, className, id, "aria-invalid": ariaInvalid, drawerTitle: t5, maxVisibleChips: t6 } = t0;
+	const prefetchOnMount = t1 === void 0 ? false : t1;
+	const externalLoading = t2 === void 0 ? false : t2;
+	const emptyMessage = t3 === void 0 ? "No options found" : t3;
+	const placeholder = t4 === void 0 ? "Select..." : t4;
+	const drawerTitle = t5 === void 0 ? "Select options" : t5;
+	const maxVisibleChips = t6 === void 0 ? 3 : t6;
+	const resolvedValue = value ?? EMPTY_VALUE;
+	const resolvedStaticOptions = staticOptions ?? EMPTY_OPTIONS;
+	const resolveText = useResolveText();
+	let t7;
+	if ($[0] !== placeholder || $[1] !== resolveText) {
+		t7 = resolveText(placeholder);
+		$[0] = placeholder;
+		$[1] = resolveText;
+		$[2] = t7;
+	} else t7 = $[2];
+	const resolvedPlaceholder = t7;
+	let t8;
+	if ($[3] !== emptyMessage || $[4] !== resolveText) {
+		t8 = resolveText(emptyMessage);
+		$[3] = emptyMessage;
+		$[4] = resolveText;
+		$[5] = t8;
+	} else t8 = $[5];
+	const resolvedEmptyMessage = t8;
+	let t9;
+	if ($[6] !== drawerTitle || $[7] !== resolveText) {
+		t9 = resolveText(drawerTitle);
+		$[6] = drawerTitle;
+		$[7] = resolveText;
+		$[8] = t9;
+	} else t9 = $[8];
+	const resolvedDrawerTitle = t9;
+	const [open, setOpen] = useState(false);
+	const [search, setSearch] = useState("");
+	const instanceId = useId();
+	const deferredSearch = useDeferredValue(search);
+	const isMobile = useIsMobile();
+	let t10;
+	if ($[9] !== resolvedStaticOptions) {
+		t10 = flattenOptions(resolvedStaticOptions);
+		$[9] = resolvedStaticOptions;
+		$[10] = t10;
+	} else t10 = $[10];
+	const flatStaticOptions = t10;
+	let t11;
+	if ($[11] !== deferredSearch || $[12] !== instanceId || $[13] !== queryKey) {
+		t11 = queryKey ? queryKey(deferredSearch) : [
+			"select-multi",
+			instanceId,
+			deferredSearch
+		];
+		$[11] = deferredSearch;
+		$[12] = instanceId;
+		$[13] = queryKey;
+		$[14] = t11;
+	} else t11 = $[14];
+	const loadOptionsKey = t11;
+	let t12;
+	if ($[15] !== deferredSearch || $[16] !== loadOptions) {
+		t12 = () => loadOptions?.(deferredSearch) ?? Promise.resolve([]);
+		$[15] = deferredSearch;
+		$[16] = loadOptions;
+		$[17] = t12;
+	} else t12 = $[17];
+	const t13 = !!loadOptions && (open || prefetchOnMount);
+	let t14;
+	if ($[18] !== loadOptionsKey || $[19] !== t12 || $[20] !== t13) {
+		t14 = {
+			queryKey: loadOptionsKey,
+			queryFn: t12,
+			enabled: t13,
+			staleTime: 3e4,
+			gcTime: 3e5
+		};
+		$[18] = loadOptionsKey;
+		$[19] = t12;
+		$[20] = t13;
+		$[21] = t14;
+	} else t14 = $[21];
+	const { data: t15, isFetching } = useQuery(t14);
+	let t16;
+	if ($[22] !== t15) {
+		t16 = t15 === void 0 ? [] : t15;
+		$[22] = t15;
+		$[23] = t16;
+	} else t16 = $[23];
+	const dynamicOptions = t16;
+	let t17;
+	bb0: {
+		if (!loadOptions) {
+			t17 = flatStaticOptions;
+			break bb0;
+		}
+		if (flatStaticOptions.length === 0) {
+			t17 = dynamicOptions;
+			break bb0;
+		}
+		let t18$1;
+		if ($[24] !== dynamicOptions || $[25] !== flatStaticOptions) {
+			const mergedMap = [...flatStaticOptions, ...dynamicOptions].reduce(_temp, /* @__PURE__ */ new Map());
+			t18$1 = Array.from(mergedMap.values());
+			$[24] = dynamicOptions;
+			$[25] = flatStaticOptions;
+			$[26] = t18$1;
+		} else t18$1 = $[26];
+		t17 = t18$1;
+	}
+	const allOptions = t17;
+	let t18;
+	bb1: {
+		if (loadOptions) {
+			t18 = allOptions;
+			break bb1;
+		}
+		if (!search) {
+			t18 = allOptions;
+			break bb1;
+		}
+		let t19$1;
+		if ($[27] !== allOptions || $[28] !== resolveText || $[29] !== search) {
+			let t20$1;
+			if ($[31] !== resolveText || $[32] !== search) {
+				t20$1 = (opt_0) => resolveText(opt_0.label).toLowerCase().includes(search.toLowerCase());
+				$[31] = resolveText;
+				$[32] = search;
+				$[33] = t20$1;
+			} else t20$1 = $[33];
+			t19$1 = allOptions.filter(t20$1);
+			$[27] = allOptions;
+			$[28] = resolveText;
+			$[29] = search;
+			$[30] = t19$1;
+		} else t19$1 = $[30];
+		t18 = t19$1;
+	}
+	const filteredOptions = t18;
+	let t19;
+	if ($[34] !== allOptions || $[35] !== resolveText) {
+		t19 = (val) => {
+			const option = allOptions.find((opt_1) => opt_1.value === val);
+			return option?.label ? resolveText(option.label) : String(val);
+		};
+		$[34] = allOptions;
+		$[35] = resolveText;
+		$[36] = t19;
+	} else t19 = $[36];
+	const getLabel = t19;
+	let t20;
+	if ($[37] !== maxSelections || $[38] !== onChange || $[39] !== resolvedValue) {
+		t20 = (selectedValue) => {
+			const typedValue = selectedValue;
+			if (resolvedValue.includes(typedValue)) onChange(resolvedValue.filter((v) => v !== typedValue));
+			else {
+				if (maxSelections && resolvedValue.length >= maxSelections) return;
+				onChange([...resolvedValue, typedValue]);
+			}
+		};
+		$[37] = maxSelections;
+		$[38] = onChange;
+		$[39] = resolvedValue;
+		$[40] = t20;
+	} else t20 = $[40];
+	const handleToggle = t20;
+	let t21;
+	if ($[41] !== onChange || $[42] !== resolvedValue) {
+		t21 = (removedValue, e) => {
+			e?.stopPropagation();
+			onChange(resolvedValue.filter((v_0) => v_0 !== removedValue));
+		};
+		$[41] = onChange;
+		$[42] = resolvedValue;
+		$[43] = t21;
+	} else t21 = $[43];
+	const handleRemove = t21;
+	let t22;
+	if ($[44] !== onChange) {
+		t22 = (e_0) => {
+			e_0.stopPropagation();
+			onChange([]);
+		};
+		$[44] = onChange;
+		$[45] = t22;
+	} else t22 = $[45];
+	const handleClearAll = t22;
+	const showLoading = isFetching || externalLoading;
+	const canAddMore = !maxSelections || resolvedValue.length < maxSelections;
+	let t23;
+	let t24;
+	let t25;
+	let t26;
+	let t27;
+	let t28;
+	let t29;
+	let t30;
+	let t31;
+	if ($[46] !== ariaInvalid || $[47] !== className || $[48] !== disabled || $[49] !== getLabel || $[50] !== handleRemove || $[51] !== id || $[52] !== maxVisibleChips || $[53] !== open || $[54] !== resolvedPlaceholder || $[55] !== resolvedValue) {
+		const visibleChips = resolvedValue.slice(0, maxVisibleChips);
+		const hiddenCount = resolvedValue.length - maxVisibleChips;
+		t23 = id;
+		t24 = "combobox";
+		t25 = "select-multi-list";
+		t26 = "listbox";
+		t27 = open;
+		t28 = ariaInvalid;
+		t29 = 0;
+		const t32$1 = disabled && "cursor-not-allowed opacity-50";
+		const t33$1 = ariaInvalid && "border-destructive ring-destructive/20";
+		if ($[65] !== className || $[66] !== t32$1 || $[67] !== t33$1) {
+			t30 = cn("qa-select-multi border-input bg-transparent font-mono flex min-h-9 w-full flex-wrap items-center gap-1 border px-3 py-1.5 text-sm transition-colors", "focus-within:ring-ring focus-within:border-ring focus-within:ring-2", t32$1, t33$1, className);
+			$[65] = className;
+			$[66] = t32$1;
+			$[67] = t33$1;
+			$[68] = t30;
+		} else t30 = $[68];
+		t31 = resolvedValue.length === 0 ? /* @__PURE__ */ jsx("span", {
+			className: "text-muted-foreground text-xs",
+			children: resolvedPlaceholder
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [visibleChips.map((val_0) => /* @__PURE__ */ jsxs(Badge, {
+			variant: "secondary",
+			className: "gap-1 pr-1",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "max-w-24 truncate",
+				children: getLabel(val_0)
+			}), !disabled && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: (e_1) => handleRemove(val_0, e_1),
+				className: "hover:bg-muted-foreground/20 rounded-full p-0.5",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:x",
+					className: "size-2.5"
+				})
+			})]
+		}, String(val_0))), hiddenCount > 0 && /* @__PURE__ */ jsxs(Badge, {
+			variant: "outline",
+			className: "text-muted-foreground",
+			children: [
+				"+",
+				hiddenCount,
+				" more"
+			]
+		})] });
+		$[46] = ariaInvalid;
+		$[47] = className;
+		$[48] = disabled;
+		$[49] = getLabel;
+		$[50] = handleRemove;
+		$[51] = id;
+		$[52] = maxVisibleChips;
+		$[53] = open;
+		$[54] = resolvedPlaceholder;
+		$[55] = resolvedValue;
+		$[56] = t23;
+		$[57] = t24;
+		$[58] = t25;
+		$[59] = t26;
+		$[60] = t27;
+		$[61] = t28;
+		$[62] = t29;
+		$[63] = t30;
+		$[64] = t31;
+	} else {
+		t23 = $[56];
+		t24 = $[57];
+		t25 = $[58];
+		t26 = $[59];
+		t27 = $[60];
+		t28 = $[61];
+		t29 = $[62];
+		t30 = $[63];
+		t31 = $[64];
+	}
+	let t32;
+	if ($[69] !== disabled || $[70] !== handleClearAll || $[71] !== resolvedValue.length) {
+		t32 = resolvedValue.length > 0 && !disabled && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: handleClearAll,
+			className: "hover:bg-muted p-0.5 opacity-50 hover:opacity-100",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:x",
+				className: "size-3"
+			})
+		});
+		$[69] = disabled;
+		$[70] = handleClearAll;
+		$[71] = resolvedValue.length;
+		$[72] = t32;
+	} else t32 = $[72];
+	let t33;
+	if ($[73] === Symbol.for("react.memo_cache_sentinel")) {
+		t33 = /* @__PURE__ */ jsx(Icon, {
+			icon: "ph:plus",
+			className: "size-3.5 opacity-50"
+		});
+		$[73] = t33;
+	} else t33 = $[73];
+	let t34;
+	if ($[74] !== t32) {
+		t34 = /* @__PURE__ */ jsxs("div", {
+			className: "ml-auto flex shrink-0 items-center gap-1",
+			children: [t32, t33]
+		});
+		$[74] = t32;
+		$[75] = t34;
+	} else t34 = $[75];
+	let t35;
+	if ($[76] !== t23 || $[77] !== t24 || $[78] !== t25 || $[79] !== t26 || $[80] !== t27 || $[81] !== t28 || $[82] !== t29 || $[83] !== t30 || $[84] !== t31 || $[85] !== t34) {
+		t35 = /* @__PURE__ */ jsxs("div", {
+			id: t23,
+			role: t24,
+			"aria-controls": t25,
+			"aria-haspopup": t26,
+			"aria-expanded": t27,
+			"aria-invalid": t28,
+			tabIndex: t29,
+			className: t30,
+			children: [t31, t34]
+		});
+		$[76] = t23;
+		$[77] = t24;
+		$[78] = t25;
+		$[79] = t26;
+		$[80] = t27;
+		$[81] = t28;
+		$[82] = t29;
+		$[83] = t30;
+		$[84] = t31;
+		$[85] = t34;
+		$[86] = t35;
+	} else t35 = $[86];
+	const TriggerContent = t35;
+	const t36 = !loadOptions;
+	let t37;
+	if ($[87] !== search) {
+		t37 = /* @__PURE__ */ jsx(CommandInput, {
+			placeholder: "Search...",
+			value: search,
+			onValueChange: setSearch
+		});
+		$[87] = search;
+		$[88] = t37;
+	} else t37 = $[88];
+	let t38;
+	if ($[89] !== showLoading) {
+		t38 = showLoading && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center py-6",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:circle-notch",
+				className: "text-muted-foreground size-4 animate-spin"
+			})
+		});
+		$[89] = showLoading;
+		$[90] = t38;
+	} else t38 = $[90];
+	let t39;
+	if ($[91] !== resolvedEmptyMessage) {
+		t39 = /* @__PURE__ */ jsx(CommandEmpty, { children: resolvedEmptyMessage });
+		$[91] = resolvedEmptyMessage;
+		$[92] = t39;
+	} else t39 = $[92];
+	let t40;
+	if ($[93] !== canAddMore || $[94] !== filteredOptions || $[95] !== handleToggle || $[96] !== resolveText || $[97] !== resolvedValue) {
+		let t41$1;
+		if ($[99] !== canAddMore || $[100] !== handleToggle || $[101] !== resolveText || $[102] !== resolvedValue) {
+			t41$1 = (option_0) => {
+				const isSelected_0 = resolvedValue.includes(option_0.value);
+				const isDisabled = option_0.disabled || !isSelected_0 && !canAddMore;
+				return /* @__PURE__ */ jsxs(CommandItem, {
+					value: String(option_0.value),
+					onSelect: handleToggle,
+					disabled: isDisabled,
+					children: [
+						/* @__PURE__ */ jsx("div", {
+							className: cn("flex size-4 items-center justify-center border", isSelected_0 ? "bg-primary border-primary text-primary-foreground" : "border-muted-foreground/30"),
+							children: isSelected_0 && /* @__PURE__ */ jsx(Icon, {
+								icon: "ph:check",
+								className: "size-3"
+							})
+						}),
+						option_0.icon,
+						/* @__PURE__ */ jsx("span", {
+							className: "truncate",
+							children: resolveText(option_0.label)
+						})
+					]
+				}, String(option_0.value));
+			};
+			$[99] = canAddMore;
+			$[100] = handleToggle;
+			$[101] = resolveText;
+			$[102] = resolvedValue;
+			$[103] = t41$1;
+		} else t41$1 = $[103];
+		t40 = filteredOptions.map(t41$1);
+		$[93] = canAddMore;
+		$[94] = filteredOptions;
+		$[95] = handleToggle;
+		$[96] = resolveText;
+		$[97] = resolvedValue;
+		$[98] = t40;
+	} else t40 = $[98];
+	let t41;
+	if ($[104] !== t40) {
+		t41 = /* @__PURE__ */ jsx(CommandGroup, { children: t40 });
+		$[104] = t40;
+		$[105] = t41;
+	} else t41 = $[105];
+	let t42;
+	if ($[106] !== t38 || $[107] !== t39 || $[108] !== t41) {
+		t42 = /* @__PURE__ */ jsxs(CommandList, { children: [
+			t38,
+			t39,
+			t41
+		] });
+		$[106] = t38;
+		$[107] = t39;
+		$[108] = t41;
+		$[109] = t42;
+	} else t42 = $[109];
+	let t43;
+	if ($[110] !== maxSelections || $[111] !== resolvedValue.length) {
+		t43 = maxSelections && /* @__PURE__ */ jsxs("div", {
+			className: "text-muted-foreground border-t p-2 text-center text-xs",
+			children: [
+				resolvedValue.length,
+				" / ",
+				maxSelections,
+				" selected"
+			]
+		});
+		$[110] = maxSelections;
+		$[111] = resolvedValue.length;
+		$[112] = t43;
+	} else t43 = $[112];
+	let t44;
+	if ($[113] !== t36 || $[114] !== t37 || $[115] !== t42 || $[116] !== t43) {
+		t44 = /* @__PURE__ */ jsxs(Command, {
+			shouldFilter: t36,
+			children: [
+				t37,
+				t42,
+				t43
+			]
+		});
+		$[113] = t36;
+		$[114] = t37;
+		$[115] = t42;
+		$[116] = t43;
+		$[117] = t44;
+	} else t44 = $[117];
+	const CommandContent = t44;
+	if (isMobile) {
+		let t45$1;
+		if ($[118] !== TriggerContent || $[119] !== disabled) {
+			t45$1 = /* @__PURE__ */ jsx(DrawerTrigger, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled,
+					className: "w-full text-left",
+					children: TriggerContent
+				})
+			});
+			$[118] = TriggerContent;
+			$[119] = disabled;
+			$[120] = t45$1;
+		} else t45$1 = $[120];
+		let t46$1;
+		if ($[121] !== resolvedDrawerTitle) {
+			t46$1 = /* @__PURE__ */ jsx(DrawerHeader, { children: /* @__PURE__ */ jsx(DrawerTitle, { children: resolvedDrawerTitle }) });
+			$[121] = resolvedDrawerTitle;
+			$[122] = t46$1;
+		} else t46$1 = $[122];
+		let t47$1;
+		if ($[123] !== CommandContent) {
+			t47$1 = /* @__PURE__ */ jsx("div", {
+				className: "px-4 pb-6",
+				children: CommandContent
+			});
+			$[123] = CommandContent;
+			$[124] = t47$1;
+		} else t47$1 = $[124];
+		let t48;
+		if ($[125] !== t46$1 || $[126] !== t47$1) {
+			t48 = /* @__PURE__ */ jsxs(DrawerContent, { children: [t46$1, t47$1] });
+			$[125] = t46$1;
+			$[126] = t47$1;
+			$[127] = t48;
+		} else t48 = $[127];
+		let t49;
+		if ($[128] !== open || $[129] !== t45$1 || $[130] !== t48) {
+			t49 = /* @__PURE__ */ jsxs(Drawer, {
+				open,
+				onOpenChange: setOpen,
+				children: [t45$1, t48]
+			});
+			$[128] = open;
+			$[129] = t45$1;
+			$[130] = t48;
+			$[131] = t49;
+		} else t49 = $[131];
+		return t49;
+	}
+	let t45;
+	if ($[132] !== TriggerContent || $[133] !== disabled) {
+		t45 = /* @__PURE__ */ jsx(PopoverTrigger, { render: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			disabled,
+			className: "w-full text-left",
+			children: TriggerContent
+		}) });
+		$[132] = TriggerContent;
+		$[133] = disabled;
+		$[134] = t45;
+	} else t45 = $[134];
+	let t46;
+	if ($[135] !== CommandContent) {
+		t46 = /* @__PURE__ */ jsx(PopoverContent, {
+			className: "w-(--anchor-width) p-0",
+			align: "start",
+			children: CommandContent
+		});
+		$[135] = CommandContent;
+		$[136] = t46;
+	} else t46 = $[136];
+	let t47;
+	if ($[137] !== open || $[138] !== t45 || $[139] !== t46) {
+		t47 = /* @__PURE__ */ jsxs(Popover, {
+			open,
+			onOpenChange: setOpen,
+			children: [t45, t46]
+		});
+		$[137] = open;
+		$[138] = t45;
+		$[139] = t46;
+		$[140] = t47;
+	} else t47 = $[140];
+	return t47;
+}
+function _temp(map, opt) {
+	return new Map(map).set(opt.value, opt);
+}
+
+//#endregion
+export { SelectMulti };