@panneau/fields 5.0.0-alpha.3 → 5.0.0-alpha.5

package/dist/slug/SlugField.js

@@ -1,10 +1,12 @@
+import { useFieldsContext } from "../shared/context.js";
 import { getFieldProps, getSetting, isString } from "../shared/entry.js";
 import { messages } from "../shared/messages.js";
 import { TextField } from "../text/TextField.js";
+import SlugField_module_default from "./SlugField.module.js";
 import { c } from "react/compiler-runtime";
-import { IconButton, usePanneauIntl } from "@panneau/ui";
-import { useEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { Button, IconButton, usePanneauIntl } from "@panneau/ui";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { WandSparkles } from "lucide-react";
 //#region src/slug/SlugField.tsx
 /**
@@ -15,145 +17,180 @@ function slugify(text) {
 	return text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
 }
 /**
-* A slug for URLs. Typed text is cleaned up on blur. With a `source`, the slug follows it until
-* it is edited, and a button generates it again.
+* Checks a slug after a pause in typing, and keeps the latest answer for it. A check that
+* fails leaves the field as it is: saving still validates the slug.
 */
-function SlugField(t0) {
-	const $ = c(37);
-	let disabled;
-	let onBlur;
-	let onChange;
-	let props;
-	let readOnly;
-	let source;
-	let sourceLabel;
-	let value;
-	if ($[0] !== t0) {
-		({value, onChange, onBlur, source, sourceLabel, disabled, readOnly, ...props} = t0);
-		$[0] = t0;
-		$[1] = disabled;
-		$[2] = onBlur;
-		$[3] = onChange;
-		$[4] = props;
-		$[5] = readOnly;
-		$[6] = source;
-		$[7] = sourceLabel;
-		$[8] = value;
-	} else {
-		disabled = $[1];
-		onBlur = $[2];
-		onChange = $[3];
-		props = $[4];
-		readOnly = $[5];
-		source = $[6];
-		sourceLabel = $[7];
-		value = $[8];
-	}
-	const intl = usePanneauIntl();
-	const previousSource = useRef(source);
-	const editable = disabled !== true && readOnly !== true;
+function useSlugCheck(value, onCheck, delay, key) {
+	const $ = c(11);
+	const [result, setResult] = useState(null);
+	const latest = useRef(onCheck);
+	let t0;
+	if ($[0] !== onCheck) {
+		t0 = () => {
+			latest.current = onCheck;
+		};
+		$[0] = onCheck;
+		$[1] = t0;
+	} else t0 = $[1];
+	useEffect(t0);
+	const enabled = onCheck !== null && onCheck !== void 0;
 	let t1;
-	let t2;
-	if ($[9] !== editable || $[10] !== onChange || $[11] !== source || $[12] !== value) {
+	if ($[2] !== delay || $[3] !== enabled || $[4] !== value) {
 		t1 = () => {
-			const previous = previousSource.current;
-			previousSource.current = source;
-			if (!editable || source === previous || source === void 0) return;
-			const current = value ?? "";
-			if (current === "" || current === slugify(previous ?? "")) {
-				const next = slugify(source ?? "");
-				if (next !== current) onChange?.(next === "" ? null : next);
-			}
+			if (!enabled || value === "") return;
+			const controller = new AbortController();
+			const timer = setTimeout(() => {
+				const check = latest.current;
+				if (check === null || check === void 0) return;
+				check(value, { signal: controller.signal }).then((check_0) => {
+					if (!controller.signal.aborted) setResult({
+						value,
+						check: check_0
+					});
+				}).catch(_temp);
+			}, delay);
+			return () => {
+				clearTimeout(timer);
+				controller.abort();
+			};
 		};
+		$[2] = delay;
+		$[3] = enabled;
+		$[4] = value;
+		$[5] = t1;
+	} else t1 = $[5];
+	let t2;
+	if ($[6] !== delay || $[7] !== enabled || $[8] !== key || $[9] !== value) {
 		t2 = [
-			source,
 			value,
-			onChange,
-			editable
+			enabled,
+			delay,
+			key
 		];
-		$[9] = editable;
-		$[10] = onChange;
-		$[11] = source;
-		$[12] = value;
-		$[13] = t1;
-		$[14] = t2;
-	} else {
-		t1 = $[13];
-		t2 = $[14];
-	}
+		$[6] = delay;
+		$[7] = enabled;
+		$[8] = key;
+		$[9] = value;
+		$[10] = t2;
+	} else t2 = $[10];
 	useEffect(t1, t2);
-	const t3 = source ?? "";
-	let t4;
-	if ($[15] !== t3) {
-		t4 = slugify(t3);
-		$[15] = t3;
-		$[16] = t4;
-	} else t4 = $[16];
-	const generated = t4;
-	let t5;
-	if ($[17] !== onBlur || $[18] !== onChange || $[19] !== value) {
-		t5 = () => {
+	return result !== null && result.value === value ? result.check : null;
+}
+/**
+* A slug for URLs. Typed text is cleaned up on blur. With a `source`, the slug follows it until
+* it is edited, and a button generates it again. With `onCheck`, the backend says whether the
+* slug is taken, and gives its URL.
+*/
+function _temp() {}
+function SlugField({ value, onChange, onBlur, source, sourceLabel, onCheck, checkDelay = 300, checkKey = "", disabled, readOnly, prefix, errors, description, ...props }) {
+	const intl = usePanneauIntl();
+	const previousSource = useRef(source);
+	const check = useSlugCheck(value ?? "", onCheck, checkDelay, checkKey);
+	const disabledByBackend = check?.disabled === true;
+	const editable = disabled !== true && readOnly !== true && !disabledByBackend;
+	useEffect(() => {
+		const previous = previousSource.current;
+		previousSource.current = source;
+		if (!editable || source === previous || source === void 0) return;
+		const current = value ?? "";
+		if (current === "" || current === slugify(previous ?? "")) {
+			const next = slugify(source ?? "");
+			if (next !== current) onChange?.(next === "" ? null : next);
+		}
+	}, [
+		source,
+		value,
+		onChange,
+		editable
+	]);
+	const generated = slugify(source ?? "");
+	const taken = check !== null && !check.available;
+	const suggestion = taken && isString(check.suggestion) ? check.suggestion : null;
+	const url = check !== null && isString(check.url) && !taken ? check.url : null;
+	return /* @__PURE__ */ jsx(TextField, {
+		autoComplete: "off",
+		...props,
+		value,
+		onChange,
+		disabled,
+		readOnly: readOnly === true || disabledByBackend,
+		...check !== null && isString(check.prefix) ? { prefix: check.prefix } : prefix !== void 0 ? { prefix } : {},
+		...errors !== void 0 ? { errors } : {},
+		description: taken || url !== null || description !== void 0 ? /* @__PURE__ */ jsxs("span", {
+			className: SlugField_module_default.description,
+			children: [
+				description !== void 0 ? /* @__PURE__ */ jsx("span", { children: description }) : null,
+				url !== null ? /* @__PURE__ */ jsx("a", {
+					href: url,
+					target: "_blank",
+					rel: "noreferrer",
+					className: SlugField_module_default.url,
+					children: url
+				}) : null,
+				taken ? /* @__PURE__ */ jsxs("span", {
+					className: SlugField_module_default.taken,
+					role: "status",
+					children: [intl.formatMessage(messages.slugTaken), suggestion !== null && editable ? /* @__PURE__ */ jsx(Button, {
+						size: "sm",
+						appearance: "ghost",
+						onPress: () => onChange?.(suggestion),
+						children: intl.formatMessage(messages.useSuggestion, { suggestion })
+					}) : null]
+				}) : null
+			]
+		}) : void 0,
+		onBlur: () => {
 			if (value !== null && value !== void 0) {
 				const next_0 = slugify(value);
 				if (next_0 !== value) onChange?.(next_0 === "" ? null : next_0);
 			}
 			onBlur?.();
-		};
-		$[17] = onBlur;
-		$[18] = onChange;
-		$[19] = value;
-		$[20] = t5;
-	} else t5 = $[20];
-	let t6;
-	if ($[21] !== editable || $[22] !== generated || $[23] !== intl || $[24] !== onChange || $[25] !== source || $[26] !== sourceLabel || $[27] !== value) {
-		t6 = source !== void 0 && editable ? /* @__PURE__ */ jsx(IconButton, {
+		},
+		suffix: source !== void 0 && editable ? /* @__PURE__ */ jsx(IconButton, {
 			icon: WandSparkles,
 			size: "sm",
 			label: intl.formatMessage(messages.generateSlug, { field: sourceLabel ?? "" }),
 			isDisabled: generated === "" || generated === value,
 			onPress: () => onChange?.(generated === "" ? null : generated)
-		}) : void 0;
-		$[21] = editable;
-		$[22] = generated;
-		$[23] = intl;
-		$[24] = onChange;
-		$[25] = source;
-		$[26] = sourceLabel;
-		$[27] = value;
-		$[28] = t6;
-	} else t6 = $[28];
-	let t7;
-	if ($[29] !== disabled || $[30] !== onChange || $[31] !== props || $[32] !== readOnly || $[33] !== t5 || $[34] !== t6 || $[35] !== value) {
-		t7 = /* @__PURE__ */ jsx(TextField, {
-			autoComplete: "off",
-			...props,
-			value,
-			onChange,
-			disabled,
-			readOnly,
-			onBlur: t5,
-			suffix: t6
-		});
-		$[29] = disabled;
-		$[30] = onChange;
-		$[31] = props;
-		$[32] = readOnly;
-		$[33] = t5;
-		$[34] = t6;
-		$[35] = value;
-		$[36] = t7;
-	} else t7 = $[36];
-	return t7;
+		}) : void 0
+	});
 }
-function sourceText(value) {
+/**
+* The text of a source value: the value itself, or for a localized value, its value in `locale`.
+* Without a locale, the first locale that has a value.
+*/
+function sourceText(value, locale) {
 	if (typeof value === "string") return value;
-	if (value !== null && typeof value === "object") return Object.values(value).find(isString) ?? null;
+	if (value !== null && typeof value === "object") {
+		const record = value;
+		if (locale !== void 0) {
+			const text = record[locale];
+			return isString(text) ? text : null;
+		}
+		return Object.values(record).find(isString) ?? null;
+	}
 	return null;
 }
-/** The `slug` type: `from` names the field it follows, and setting `prefix` shows a URL prefix. */
+/** The form's values that a check depends on: all but the slug itself. */
+function checkKeyOf(values, name) {
+	if (values === null) return "";
+	const { [name]: _slug, ...others } = values;
+	try {
+		return JSON.stringify(others);
+	} catch {
+		return "";
+	}
+}
+/**
+* The `slug` type: `from` names the field it follows, in the slug's own locale, or in the default
+* locale (the first of the fields context) for a slug that isn't localized. Setting `prefix`
+* shows a URL prefix. With `check`, the fields context's check source checks the slug of a field
+* at the top of the resource, with the form's values.
+*/
 function SlugFieldEntry(props) {
-	const $ = c(18);
-	const { field, parentValue } = props;
+	const $ = c(33);
+	const { field, parentValue, locale, path } = props;
+	const { locales, checkSource } = useFieldsContext();
 	let t0;
 	if ($[0] !== field) {
 		t0 = getSetting(field, "prefix", isString);
@@ -161,56 +198,91 @@ function SlugFieldEntry(props) {
 		$[1] = t0;
 	} else t0 = $[1];
 	const prefix = t0;
+	const values = parentValue !== null && typeof parentValue === "object" ? parentValue : null;
 	let t1;
-	if ($[2] !== field.from || $[3] !== parentValue) {
-		t1 = field.from !== void 0 && parentValue !== null && typeof parentValue === "object" ? sourceText(parentValue[field.from]) : void 0;
+	if ($[2] !== field.from || $[3] !== locale || $[4] !== locales || $[5] !== values) {
+		t1 = field.from !== void 0 && values !== null ? sourceText(values[field.from], locale ?? locales[0]) : void 0;
 		$[2] = field.from;
-		$[3] = parentValue;
-		$[4] = t1;
-	} else t1 = $[4];
+		$[3] = locale;
+		$[4] = locales;
+		$[5] = values;
+		$[6] = t1;
+	} else t1 = $[6];
 	const source = t1;
+	const topLevel = path === field.name || path === `${field.name}.${locale ?? ""}`;
 	let t2;
-	if ($[5] !== props) {
-		t2 = getFieldProps(props);
-		$[5] = props;
-		$[6] = t2;
-	} else t2 = $[6];
-	const t3 = isString(props.value) ? props.value : null;
-	let t4;
-	if ($[7] !== field.from || $[8] !== source) {
-		t4 = source !== void 0 ? {
+	if ($[7] !== checkSource || $[8] !== field.check || $[9] !== field.name || $[10] !== locale || $[11] !== topLevel || $[12] !== values) {
+		t2 = field.check === true && checkSource !== null && topLevel ? (value, t3) => {
+			const { signal } = t3;
+			return checkSource.check(field.name, {
+				value,
+				...locale !== void 0 ? { locale } : {},
+				values: values ?? {}
+			}, { signal });
+		} : null;
+		$[7] = checkSource;
+		$[8] = field.check;
+		$[9] = field.name;
+		$[10] = locale;
+		$[11] = topLevel;
+		$[12] = values;
+		$[13] = t2;
+	} else t2 = $[13];
+	const onCheck = t2;
+	let t3;
+	if ($[14] !== props) {
+		t3 = getFieldProps(props);
+		$[14] = props;
+		$[15] = t3;
+	} else t3 = $[15];
+	const t4 = isString(props.value) ? props.value : null;
+	let t5;
+	if ($[16] !== field.name || $[17] !== onCheck || $[18] !== values) {
+		t5 = onCheck !== null ? checkKeyOf(values, field.name) : "";
+		$[16] = field.name;
+		$[17] = onCheck;
+		$[18] = values;
+		$[19] = t5;
+	} else t5 = $[19];
+	let t6;
+	if ($[20] !== field.from || $[21] !== source) {
+		t6 = source !== void 0 ? {
 			source,
 			sourceLabel: field.from ?? ""
 		} : {};
-		$[7] = field.from;
-		$[8] = source;
-		$[9] = t4;
-	} else t4 = $[9];
-	let t5;
-	if ($[10] !== prefix) {
-		t5 = prefix !== void 0 ? { prefix } : {};
-		$[10] = prefix;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
-	if ($[12] !== props.onChange || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
-		t6 = /* @__PURE__ */ jsx(SlugField, {
-			...t2,
-			value: t3,
+		$[20] = field.from;
+		$[21] = source;
+		$[22] = t6;
+	} else t6 = $[22];
+	let t7;
+	if ($[23] !== prefix) {
+		t7 = prefix !== void 0 ? { prefix } : {};
+		$[23] = prefix;
+		$[24] = t7;
+	} else t7 = $[24];
+	let t8;
+	if ($[25] !== onCheck || $[26] !== props.onChange || $[27] !== t3 || $[28] !== t4 || $[29] !== t5 || $[30] !== t6 || $[31] !== t7) {
+		t8 = /* @__PURE__ */ jsx(SlugField, {
+			...t3,
+			value: t4,
 			onChange: props.onChange,
-			...t4,
-			...t5
+			onCheck,
+			checkKey: t5,
+			...t6,
+			...t7
 		});
-		$[12] = props.onChange;
-		$[13] = t2;
-		$[14] = t3;
-		$[15] = t4;
-		$[16] = t5;
-		$[17] = t6;
-	} else t6 = $[17];
-	return t6;
+		$[25] = onCheck;
+		$[26] = props.onChange;
+		$[27] = t3;
+		$[28] = t4;
+		$[29] = t5;
+		$[30] = t6;
+		$[31] = t7;
+		$[32] = t8;
+	} else t8 = $[32];
+	return t8;
 }
 //#endregion
-export { SlugField, SlugFieldEntry, slugify };
+export { SlugField, SlugFieldEntry, slugify, sourceText };
 
 //# sourceMappingURL=SlugField.js.map

package/dist/slug/SlugField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SlugField.js","names":["next","WandSparkles","value","onChange","disabled","readOnly","_c"],"sources":["../../src/slug/SlugField.tsx"],"sourcesContent":["import { WandSparkles } from 'lucide-react';\nimport { useEffect, useRef } from 'react';\n\nimport { IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps } from '../shared/types';\nimport { TextField, type TextFieldProps } from '../text/TextField';\n\n/**\n * Turns a text into a slug: lowercase ASCII letters and digits separated by dashes, without\n * accents (`Été à Montréal` gives `ete-a-montreal`).\n */\nexport function slugify(text: string): string {\n    return text\n        .normalize('NFKD')\n        .replace(/[̀-ͯ]/g, '')\n        .toLowerCase()\n        .replace(/[^a-z0-9]+/g, '-')\n        .replace(/^-+|-+$/g, '');\n}\n\nexport interface SlugFieldProps extends Omit<TextFieldProps, 'type' | 'suffix'> {\n    /**\n     * The text the slug is made from (a title). While the slug is empty or still matches it, the\n     * slug follows it.\n     */\n    source?: string | null;\n    /** Name of the source, for the button that generates the slug from it. */\n    sourceLabel?: string;\n}\n\n/**\n * A slug for URLs. Typed text is cleaned up on blur. With a `source`, the slug follows it until\n * it is edited, and a button generates it again.\n */\nexport function SlugField({\n    value,\n    onChange,\n    onBlur,\n    source,\n    sourceLabel,\n    disabled,\n    readOnly,\n    ...props\n}: SlugFieldProps) {\n    const intl = usePanneauIntl();\n    const previousSource = useRef(source);\n    const editable = disabled !== true && readOnly !== true;\n\n    useEffect(() => {\n        const previous = previousSource.current;\n        previousSource.current = source;\n        if (!editable || source === previous || source === undefined) {\n            return;\n        }\n        const current = value ?? '';\n        if (current === '' || current === slugify(previous ?? '')) {\n            const next = slugify(source ?? '');\n            if (next !== current) {\n                onChange?.(next === '' ? null : next);\n            }\n        }\n    }, [source, value, onChange, editable]);\n\n    const generated = slugify(source ?? '');\n    return (\n        <TextField\n            autoComplete=\"off\"\n            {...props}\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            readOnly={readOnly}\n            onBlur={() => {\n                if (value !== null && value !== undefined) {\n                    const next = slugify(value);\n                    if (next !== value) {\n                        onChange?.(next === '' ? null : next);\n                    }\n                }\n                onBlur?.();\n            }}\n            suffix={\n                source !== undefined && editable ? (\n                    <IconButton\n                        icon={WandSparkles}\n                        size=\"sm\"\n                        label={intl.formatMessage(messages.generateSlug, {\n                            field: sourceLabel ?? '',\n                        })}\n                        isDisabled={generated === '' || generated === value}\n                        onPress={() => onChange?.(generated === '' ? null : generated)}\n                    />\n                ) : undefined\n            }\n        />\n    );\n}\n\nfunction sourceText(value: unknown): string | null {\n    if (typeof value === 'string') {\n        return value;\n    }\n    // A localized source: its first locale.\n    if (value !== null && typeof value === 'object') {\n        const first = Object.values(value as Record<string, unknown>).find(isString);\n        return first ?? null;\n    }\n    return null;\n}\n\n/** The `slug` type: `from` names the field it follows, and setting `prefix` shows a URL prefix. */\nexport function SlugFieldEntry(props: FieldEntryProps) {\n    const { field, parentValue } = props;\n    const prefix = getSetting(field, 'prefix', isString);\n    const source =\n        field.from !== undefined && parentValue !== null && typeof parentValue === 'object'\n            ? sourceText((parentValue as Record<string, unknown>)[field.from])\n            : undefined;\n    return (\n        <SlugField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n            {...(source !== undefined ? { source, sourceLabel: field.from ?? '' } : {})}\n            {...(prefix !== undefined ? { prefix } : {})}\n        />\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"SlugField.js","names":["check","next","onCheck","_c","styles"],"sources":["../../src/slug/SlugField.tsx"],"sourcesContent":["import { WandSparkles } from 'lucide-react';\nimport { useEffect, useRef, useState } from 'react';\n\nimport type { FieldCheckResponse } from '@panneau/protocol';\nimport { Button, IconButton, usePanneauIntl } from '@panneau/ui';\n\nimport { useFieldsContext } from '../shared/context';\nimport { getFieldProps, getSetting, isString } from '../shared/entry';\nimport { messages } from '../shared/messages';\nimport type { FieldEntryProps } from '../shared/types';\nimport { TextField, type TextFieldProps } from '../text/TextField';\nimport styles from './SlugField.module.css';\n\n/**\n * Turns a text into a slug: lowercase ASCII letters and digits separated by dashes, without\n * accents (`Été à Montréal` gives `ete-a-montreal`).\n */\nexport function slugify(text: string): string {\n    return text\n        .normalize('NFKD')\n        .replace(/[̀-ͯ]/g, '')\n        .toLowerCase()\n        .replace(/[^a-z0-9]+/g, '-')\n        .replace(/^-+|-+$/g, '');\n}\n\n/** Checks a slug with the backend: whether it is available, and its URL. */\nexport type SlugCheck = (\n    value: string,\n    options: { signal: AbortSignal },\n) => Promise<FieldCheckResponse>;\n\nexport interface SlugFieldProps extends Omit<TextFieldProps, 'type' | 'suffix'> {\n    /**\n     * The text the slug is made from (a title). While the slug is empty or still matches it, the\n     * slug follows it.\n     */\n    source?: string | null;\n    /** Name of the source, for the button that generates the slug from it. */\n    sourceLabel?: string;\n    /**\n     * Checks the slug as it is typed, and once when the field shows: the field then shows the\n     * URL the backend gives, and says when the slug is taken, with a free one to use instead.\n     */\n    onCheck?: SlugCheck | null;\n    /** How long typing must pause before a check, in milliseconds. Defaults to 300. */\n    checkDelay?: number;\n    /**\n     * What the check depends on besides the slug, such as the form's values: the slug is checked\n     * again when it changes. `onCheck` itself can change on every render.\n     */\n    checkKey?: string;\n}\n\n/**\n * Checks a slug after a pause in typing, and keeps the latest answer for it. A check that\n * fails leaves the field as it is: saving still validates the slug.\n */\nfunction useSlugCheck(\n    value: string,\n    onCheck: SlugCheck | null | undefined,\n    delay: number,\n    key: string,\n): FieldCheckResponse | null {\n    const [result, setResult] = useState<{ value: string; check: FieldCheckResponse } | null>(null);\n    const latest = useRef(onCheck);\n    useEffect(() => {\n        latest.current = onCheck;\n    });\n    const enabled = onCheck !== null && onCheck !== undefined;\n    useEffect(() => {\n        if (!enabled || value === '') {\n            return undefined;\n        }\n        const controller = new AbortController();\n        const timer = setTimeout(() => {\n            const check = latest.current;\n            if (check === null || check === undefined) {\n                return;\n            }\n            check(value, { signal: controller.signal })\n                .then((check) => {\n                    if (!controller.signal.aborted) {\n                        setResult({ value, check });\n                    }\n                })\n                .catch(() => undefined);\n        }, delay);\n        return () => {\n            clearTimeout(timer);\n            controller.abort();\n        };\n    }, [value, enabled, delay, key]);\n    return result !== null && result.value === value ? result.check : null;\n}\n\n/**\n * A slug for URLs. Typed text is cleaned up on blur. With a `source`, the slug follows it until\n * it is edited, and a button generates it again. With `onCheck`, the backend says whether the\n * slug is taken, and gives its URL.\n */\nexport function SlugField({\n    value,\n    onChange,\n    onBlur,\n    source,\n    sourceLabel,\n    onCheck,\n    checkDelay = 300,\n    checkKey = '',\n    disabled,\n    readOnly,\n    prefix,\n    errors,\n    description,\n    ...props\n}: SlugFieldProps) {\n    const intl = usePanneauIntl();\n    const previousSource = useRef(source);\n    const check = useSlugCheck(value ?? '', onCheck, checkDelay, checkKey);\n    const disabledByBackend = check?.disabled === true;\n    const editable = disabled !== true && readOnly !== true && !disabledByBackend;\n\n    useEffect(() => {\n        const previous = previousSource.current;\n        previousSource.current = source;\n        if (!editable || source === previous || source === undefined) {\n            return;\n        }\n        const current = value ?? '';\n        if (current === '' || current === slugify(previous ?? '')) {\n            const next = slugify(source ?? '');\n            if (next !== current) {\n                onChange?.(next === '' ? null : next);\n            }\n        }\n    }, [source, value, onChange, editable]);\n\n    const generated = slugify(source ?? '');\n    const taken = check !== null && !check.available;\n    const suggestion = taken && isString(check.suggestion) ? check.suggestion : null;\n    const url = check !== null && isString(check.url) && !taken ? check.url : null;\n    return (\n        <TextField\n            autoComplete=\"off\"\n            {...props}\n            value={value}\n            onChange={onChange}\n            disabled={disabled}\n            readOnly={readOnly === true || disabledByBackend}\n            {...(check !== null && isString(check.prefix)\n                ? { prefix: check.prefix }\n                : prefix !== undefined\n                  ? { prefix }\n                  : {})}\n            {...(errors !== undefined ? { errors } : {})}\n            description={\n                taken || url !== null || description !== undefined ? (\n                    <span className={styles.description}>\n                        {description !== undefined ? <span>{description}</span> : null}\n                        {url !== null ? (\n                            <a href={url} target=\"_blank\" rel=\"noreferrer\" className={styles.url}>\n                                {url}\n                            </a>\n                        ) : null}\n                        {taken ? (\n                            <span className={styles.taken} role=\"status\">\n                                {intl.formatMessage(messages.slugTaken)}\n                                {suggestion !== null && editable ? (\n                                    <Button\n                                        size=\"sm\"\n                                        appearance=\"ghost\"\n                                        onPress={() => onChange?.(suggestion)}\n                                    >\n                                        {intl.formatMessage(messages.useSuggestion, {\n                                            suggestion,\n                                        })}\n                                    </Button>\n                                ) : null}\n                            </span>\n                        ) : null}\n                    </span>\n                ) : undefined\n            }\n            onBlur={() => {\n                if (value !== null && value !== undefined) {\n                    const next = slugify(value);\n                    if (next !== value) {\n                        onChange?.(next === '' ? null : next);\n                    }\n                }\n                onBlur?.();\n            }}\n            suffix={\n                source !== undefined && editable ? (\n                    <IconButton\n                        icon={WandSparkles}\n                        size=\"sm\"\n                        label={intl.formatMessage(messages.generateSlug, {\n                            field: sourceLabel ?? '',\n                        })}\n                        isDisabled={generated === '' || generated === value}\n                        onPress={() => onChange?.(generated === '' ? null : generated)}\n                    />\n                ) : undefined\n            }\n        />\n    );\n}\n\n/**\n * The text of a source value: the value itself, or for a localized value, its value in `locale`.\n * Without a locale, the first locale that has a value.\n */\nexport function sourceText(value: unknown, locale?: string): string | null {\n    if (typeof value === 'string') {\n        return value;\n    }\n    if (value !== null && typeof value === 'object') {\n        const record = value as Record<string, unknown>;\n        if (locale !== undefined) {\n            const text = record[locale];\n            return isString(text) ? text : null;\n        }\n        return Object.values(record).find(isString) ?? null;\n    }\n    return null;\n}\n\n/** The form's values that a check depends on: all but the slug itself. */\nfunction checkKeyOf(values: Record<string, unknown> | null, name: string): string {\n    if (values === null) {\n        return '';\n    }\n    const { [name]: _slug, ...others } = values;\n    try {\n        return JSON.stringify(others);\n    } catch {\n        return '';\n    }\n}\n\n/**\n * The `slug` type: `from` names the field it follows, in the slug's own locale, or in the default\n * locale (the first of the fields context) for a slug that isn't localized. Setting `prefix`\n * shows a URL prefix. With `check`, the fields context's check source checks the slug of a field\n * at the top of the resource, with the form's values.\n */\nexport function SlugFieldEntry(props: FieldEntryProps) {\n    const { field, parentValue, locale, path } = props;\n    const { locales, checkSource } = useFieldsContext();\n    const prefix = getSetting(field, 'prefix', isString);\n    const values =\n        parentValue !== null && typeof parentValue === 'object'\n            ? (parentValue as Record<string, unknown>)\n            : null;\n    const source =\n        field.from !== undefined && values !== null\n            ? sourceText(values[field.from], locale ?? locales[0])\n            : undefined;\n    const topLevel = path === field.name || path === `${field.name}.${locale ?? ''}`;\n    const onCheck: SlugCheck | null =\n        field.check === true && checkSource !== null && topLevel\n            ? (value, { signal }) =>\n                  checkSource.check(\n                      field.name,\n                      {\n                          value,\n                          ...(locale !== undefined ? { locale } : {}),\n                          values: values ?? {},\n                      },\n                      { signal },\n                  )\n            : null;\n    return (\n        <SlugField\n            {...getFieldProps(props)}\n            value={isString(props.value) ? props.value : null}\n            onChange={props.onChange}\n            onCheck={onCheck}\n            checkKey={onCheck !== null ? checkKeyOf(values, field.name) : ''}\n            {...(source !== undefined ? { source, sourceLabel: field.from ?? '' } : {})}\n            {...(prefix !== undefined ? { prefix } : {})}\n        />\n    );\n}\n"],"mappings":"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"}

package/dist/slug/SlugField.module.js

@@ -0,0 +1,14 @@
+import "./SlugField.css";
+//#region src/slug/SlugField.module.css
+var description = "panneau-slug-field-description";
+var url = "panneau-slug-field-url";
+var taken = "panneau-slug-field-taken";
+var SlugField_module_default = {
+	description,
+	url,
+	taken
+};
+//#endregion
+export { SlugField_module_default as default, description, taken, url };
+
+//# sourceMappingURL=SlugField.module.js.map

package/dist/slug/SlugField.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SlugField.module.js","names":[],"sources":["../../src/slug/SlugField.module.css"],"sourcesContent":[".description {\n    display: flex;\n    flex-direction: column;\n    gap: var(--panneau-space-1);\n}\n\n.url {\n    overflow-wrap: anywhere;\n    color: var(--panneau-color-link);\n}\n\n.taken {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--panneau-space-2);\n    color: var(--panneau-color-warning);\n}\n"],"mappings":""}

package/dist/slug/index.d.ts

@@ -1,2 +1,2 @@
-export { SlugField, SlugFieldEntry, type SlugFieldProps, slugify } from './SlugField';
+export { SlugField, SlugFieldEntry, type SlugCheck, type SlugFieldProps, slugify, sourceText, } from './SlugField';
 //# sourceMappingURL=index.d.ts.map

package/dist/slug/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slug/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,KAAK,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/slug/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,SAAS,EACT,cAAc,EACd,KAAK,SAAS,EACd,KAAK,cAAc,EACnB,OAAO,EACP,UAAU,GACb,MAAM,aAAa,CAAC"}

package/dist/slug/index.js

@@ -1 +1 @@
-export { SlugField, SlugFieldEntry, slugify } from "./SlugField.js";
+export { SlugField, SlugFieldEntry, slugify, sourceText } from "./SlugField.js";

package/dist/upload/FilePicker.css

@@ -0,0 +1,24 @@
+.panneau-file-picker-zone {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--panneau-space-2);
+    padding: var(--panneau-space-3);
+    border: var(--panneau-border-width) dashed var(--panneau-color-border-control);
+    border-radius: var(--panneau-radius-md);
+}
+
+.panneau-file-picker-zone[data-drop-target] {
+    background-color: var(--panneau-color-accent-subtle);
+    border-color: var(--panneau-color-accent);
+}
+
+.panneau-file-picker-zone[data-focus-visible] {
+    outline: 2px solid var(--panneau-color-focus);
+    outline-offset: 2px;
+}
+
+.panneau-file-picker-hint {
+    font-size: var(--panneau-font-size-sm);
+    color: var(--panneau-color-text-muted);
+}

package/dist/upload/FilePicker.d.ts

@@ -0,0 +1,14 @@
+export interface FilePickerProps {
+    /** Called with the files chosen or dropped. */
+    onSelect: (files: File[]) => void;
+    /** Accepted MIME types, which the file dialog offers. */
+    accept?: readonly string[] | null;
+    multiple?: boolean;
+    isDisabled?: boolean;
+    /** Text of the button. Defaults to "Choose a file", or "Choose files" with `multiple`. */
+    label?: string;
+    className?: string;
+}
+/** A button that opens the file dialog, in a zone where files can be dropped. */
+export declare function FilePicker({ onSelect, accept, multiple, isDisabled, label, className, }: FilePickerProps): import("react").JSX.Element;
+//# sourceMappingURL=FilePicker.d.ts.map

package/dist/upload/FilePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker.d.ts","sourceRoot":"","sources":["../../src/upload/FilePicker.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,eAAe;IAC5B,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAClC,yDAAyD;IACzD,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,GAAG,IAAI,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,0FAA0F;IAC1F,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AASD,iFAAiF;AACjF,wBAAgB,UAAU,CAAC,EACvB,QAAQ,EACR,MAAM,EACN,QAAgB,EAChB,UAAkB,EAClB,KAAK,EACL,SAAS,GACZ,EAAE,eAAe,+BAmCjB"}

package/dist/upload/FilePicker.js

@@ -0,0 +1,47 @@
+import { cx } from "../shared/cx.js";
+import { messages } from "../shared/messages.js";
+import FilePicker_module_default from "./FilePicker.module.js";
+import { Button, usePanneauIntl } from "@panneau/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Upload } from "lucide-react";
+import { DropZone, FileTrigger } from "react-aria-components";
+//#region src/upload/FilePicker.tsx
+async function readDrop(items) {
+	return (await Promise.all(items.map((item) => item.kind === "file" ? item.getFile() : Promise.resolve(null)))).filter((file) => file !== null);
+}
+/** A button that opens the file dialog, in a zone where files can be dropped. */
+function FilePicker({ onSelect, accept, multiple = false, isDisabled = false, label, className }) {
+	const intl = usePanneauIntl();
+	return /* @__PURE__ */ jsxs(DropZone, {
+		className: cx(FilePicker_module_default.zone, className),
+		"aria-label": intl.formatMessage(messages.dropZone),
+		isDisabled,
+		onDrop: (event) => {
+			readDrop(event.items).then((files) => {
+				if (files.length > 0) onSelect(multiple ? files : files.slice(0, 1));
+			});
+		},
+		children: [/* @__PURE__ */ jsx(FileTrigger, {
+			...accept !== null && accept !== void 0 && accept.length > 0 ? { acceptedFileTypes: accept } : {},
+			allowsMultiple: multiple,
+			onSelect: (list) => {
+				const files_0 = list === null ? [] : [...list];
+				if (files_0.length > 0) onSelect(files_0);
+			},
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				appearance: "outline",
+				icon: Upload,
+				isDisabled,
+				children: label ?? intl.formatMessage(multiple ? messages.chooseFiles : messages.chooseFile)
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: FilePicker_module_default.hint,
+			children: intl.formatMessage(messages.dropHere)
+		})]
+	});
+}
+//#endregion
+export { FilePicker };
+
+//# sourceMappingURL=FilePicker.js.map

package/dist/upload/FilePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilePicker.js","names":["files","styles"],"sources":["../../src/upload/FilePicker.tsx"],"sourcesContent":["import { Upload } from 'lucide-react';\nimport { type DropItem, DropZone, FileTrigger } from 'react-aria-components';\n\nimport { Button, usePanneauIntl } from '@panneau/ui';\n\nimport { cx } from '../shared/cx';\nimport { messages } from '../shared/messages';\nimport styles from './FilePicker.module.css';\n\nexport interface FilePickerProps {\n    /** Called with the files chosen or dropped. */\n    onSelect: (files: File[]) => void;\n    /** Accepted MIME types, which the file dialog offers. */\n    accept?: readonly string[] | null;\n    multiple?: boolean;\n    isDisabled?: boolean;\n    /** Text of the button. Defaults to \"Choose a file\", or \"Choose files\" with `multiple`. */\n    label?: string;\n    className?: string;\n}\n\nasync function readDrop(items: DropItem[]): Promise<File[]> {\n    const files = await Promise.all(\n        items.map((item) => (item.kind === 'file' ? item.getFile() : Promise.resolve(null))),\n    );\n    return files.filter((file): file is File => file !== null);\n}\n\n/** A button that opens the file dialog, in a zone where files can be dropped. */\nexport function FilePicker({\n    onSelect,\n    accept,\n    multiple = false,\n    isDisabled = false,\n    label,\n    className,\n}: FilePickerProps) {\n    const intl = usePanneauIntl();\n    return (\n        <DropZone\n            className={cx(styles.zone, className)}\n            aria-label={intl.formatMessage(messages.dropZone)}\n            isDisabled={isDisabled}\n            onDrop={(event) => {\n                void readDrop(event.items).then((files) => {\n                    if (files.length > 0) {\n                        onSelect(multiple ? files : files.slice(0, 1));\n                    }\n                });\n            }}\n        >\n            <FileTrigger\n                {...(accept !== null && accept !== undefined && accept.length > 0\n                    ? { acceptedFileTypes: accept }\n                    : {})}\n                allowsMultiple={multiple}\n                onSelect={(list) => {\n                    const files = list === null ? [] : [...list];\n                    if (files.length > 0) {\n                        onSelect(files);\n                    }\n                }}\n            >\n                <Button size=\"sm\" appearance=\"outline\" icon={Upload} isDisabled={isDisabled}>\n                    {label ??\n                        intl.formatMessage(multiple ? messages.chooseFiles : messages.chooseFile)}\n                </Button>\n            </FileTrigger>\n            <span className={styles.hint}>{intl.formatMessage(messages.dropHere)}</span>\n        </DropZone>\n    );\n}\n"],"mappings":";;;;;;;;AAqBA,eAAe,SAAS,OAAoC;CAIxD,QAAO,MAHa,QAAQ,IACxB,MAAM,KAAK,SAAU,KAAK,SAAS,SAAS,KAAK,QAAQ,IAAI,QAAQ,QAAQ,IAAI,CAAE,CACvF,EAAA,CACa,QAAQ,SAAuB,SAAS,IAAI;AAC7D;;AAGA,SAAgB,WAAW,EACvB,UACA,QACA,WAAW,OACX,aAAa,OACb,OACA,aACgB;CAChB,MAAM,OAAO,eAAe;CAC5B,OACI,qBAAC,UAAD;EACI,WAAW,GAAGC,0BAAO,MAAM,SAAS;EACpC,cAAY,KAAK,cAAc,SAAS,QAAQ;EACpC;EACZ,SAAS,UAAU;GACf,SAAc,MAAM,KAAK,CAAC,CAAC,MAAM,UAAU;IACvC,IAAI,MAAM,SAAS,GACf,SAAS,WAAW,QAAQ,MAAM,MAAM,GAAG,CAAC,CAAC;GAErD,CAAC;EACL;EAVJ,UAAA,CAYI,oBAAC,aAAD;GACI,GAAK,WAAW,QAAQ,WAAW,KAAA,KAAa,OAAO,SAAS,IAC1D,EAAE,mBAAmB,OAAO,IAC5B,CAAC;GACP,gBAAgB;GAChB,WAAW,SAAS;IAChB,MAAMD,UAAQ,SAAS,OAAO,CAAA,IAAK,CAAC,GAAG,IAAI;IAC3C,IAAIA,QAAM,SAAS,GACf,SAASA,OAAK;GAEtB;GAEA,UAAA,oBAAC,QAAD;IAAQ,MAAK;IAAK,YAAW;IAAU,MAAM;IAAoB;IAC5D,UAAA,SACG,KAAK,cAAc,WAAW,SAAS,cAAc,SAAS,UAAU;GACxE,CAAA;EACC,CAAA,GACb,oBAAC,QAAD;GAAM,WAAWC,0BAAO;GAAO,UAAA,KAAK,cAAc,SAAS,QAAQ;EAAQ,CAAA,CACrE;;AAElB"}