@igne-agency/react-web-ui 0.0.0-stage → 0.2.1

package/dist/components/combobox-field/item-lookups.js

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+// src/components/combobox-field/item-lookups.ts
+/**
+* The component that runs an `itemQuery`, put in place by
+* `ComboboxItemQueries`. Empty without one.
+*/
+var ItemLookupsContext = createContext(null);
+export { ItemLookupsContext };

package/dist/components/combobox-field/react-query.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+/**
+ * Lets every `ComboboxField` under it run its `itemQuery` through TanStack
+ * Query. Mount it once, inside the app's `QueryClientProvider`.
+ *
+ * @example
+ * <QueryClientProvider client={queryClient}>
+ * 	<ComboboxItemQueries>
+ * 		<App />
+ * 	</ComboboxItemQueries>
+ * </QueryClientProvider>
+ */
+export declare const ComboboxItemQueries: ({ children, }: Readonly<{
+    children: ReactNode;
+}>) => ReactNode;

package/dist/components/combobox-field/react-query.js

@@ -0,0 +1,78 @@
+import { ItemLookupsContext } from "./item-lookups.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import { useQueries } from "@tanstack/react-query";
+// src/components/combobox-field/react-query.tsx
+var QueryItemLookups = (t0) => {
+	const $ = c(10);
+	const { keys, itemQuery, children } = t0;
+	let t1;
+	if ($[0] !== itemQuery || $[1] !== keys) {
+		let t2;
+		if ($[3] !== itemQuery) {
+			t2 = (key) => ({
+				...itemQuery(key),
+				placeholderData: void 0
+			});
+			$[3] = itemQuery;
+			$[4] = t2;
+		} else t2 = $[4];
+		t1 = keys.map(t2);
+		$[0] = itemQuery;
+		$[1] = keys;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[5] !== t1) {
+		t2 = {
+			queries: t1,
+			combine: _temp2
+		};
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	const lookups = useQueries(t2);
+	let t3;
+	if ($[7] !== children || $[8] !== lookups) {
+		t3 = children(lookups);
+		$[7] = children;
+		$[8] = lookups;
+		$[9] = t3;
+	} else t3 = $[9];
+	return t3;
+};
+/**
+* Lets every `ComboboxField` under it run its `itemQuery` through TanStack
+* Query. Mount it once, inside the app's `QueryClientProvider`.
+*
+* @example
+* <QueryClientProvider client={queryClient}>
+* 	<ComboboxItemQueries>
+* 		<App />
+* 	</ComboboxItemQueries>
+* </QueryClientProvider>
+*/
+var ComboboxItemQueries = (t0) => {
+	const $ = c(2);
+	const { children } = t0;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(ItemLookupsContext, {
+			value: QueryItemLookups,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+function _temp(result) {
+	return {
+		data: result.data,
+		error: result.error
+	};
+}
+function _temp2(results) {
+	return results.map(_temp);
+}
+export { ComboboxItemQueries };

package/dist/components/combobox-field/selection.d.ts

@@ -0,0 +1,50 @@
+/** The copy a combobox shows only when it holds several values. */
+export type ComboboxMultipleLabels = Readonly<{
+    /** Names the group of tags, such as "Selected statuses". */
+    selectedLabel: string;
+    /** The remove control's own name, which the tag's name completes, such as "Remove". */
+    removeLabel: string;
+    /** The remove control's tooltip for a value, such as "Remove Jan Jansen". */
+    removeHint: (itemLabel: string) => string;
+}>;
+/**
+ * One value or several. The shape of `value`, `defaultValue` and
+ * `onValueChange` follows `multiple`.
+ *
+ * @example
+ * const selection: ComboboxMode<User> = { value: user, onValueChange: setUser };
+ */
+export type ComboboxMode<TItem> = Readonly<{
+    multiple?: false;
+    value?: TItem | null;
+    defaultValue?: TItem | null;
+    onValueChange?: (value: TItem | null) => void;
+}> | (Readonly<{
+    multiple: true;
+    value?: readonly TItem[];
+    defaultValue?: readonly TItem[];
+    onValueChange?: (value: readonly TItem[]) => void;
+}> & ComboboxMultipleLabels);
+/**
+ * A field's controlled value as a list, or `undefined` while it is
+ * uncontrolled.
+ *
+ * @example
+ * selectedValues({ value: user }); // [user]
+ */
+export declare const selectedValues: <TItem>(mode: ComboboxMode<TItem>) => readonly TItem[] | undefined;
+/**
+ * A field's starting value as a list, for an uncontrolled field.
+ *
+ * @example
+ * defaultValues({ defaultValue: null }); // []
+ */
+export declare const defaultValues: <TItem>(mode: ComboboxMode<TItem>) => readonly TItem[];
+/**
+ * Hands a new selection to `onValueChange` in its mode's shape: the list under
+ * `multiple`, else its first value or `null`.
+ *
+ * @example
+ * emitValues({ onValueChange: setUser }, [user]); // setUser(user)
+ */
+export declare const emitValues: <TItem>(mode: ComboboxMode<TItem>, next: readonly TItem[]) => void;

package/dist/components/combobox-field/selection.js

@@ -0,0 +1,38 @@
+// src/components/combobox-field/selection.ts
+/**
+* A field's controlled value as a list, or `undefined` while it is
+* uncontrolled.
+*
+* @example
+* selectedValues({ value: user }); // [user]
+*/
+var selectedValues = (mode) => {
+	if (mode.multiple === true) return mode.value;
+	if (mode.value === void 0) return;
+	return mode.value === null ? [] : [mode.value];
+};
+/**
+* A field's starting value as a list, for an uncontrolled field.
+*
+* @example
+* defaultValues({ defaultValue: null }); // []
+*/
+var defaultValues = (mode) => {
+	if (mode.multiple === true) return mode.defaultValue ?? [];
+	return mode.defaultValue === void 0 || mode.defaultValue === null ? [] : [mode.defaultValue];
+};
+/**
+* Hands a new selection to `onValueChange` in its mode's shape: the list under
+* `multiple`, else its first value or `null`.
+*
+* @example
+* emitValues({ onValueChange: setUser }, [user]); // setUser(user)
+*/
+var emitValues = (mode, next) => {
+	if (mode.multiple === true) {
+		mode.onValueChange?.(next);
+		return;
+	}
+	mode.onValueChange?.(next.at(0) ?? null);
+};
+export { defaultValues, emitValues, selectedValues };

package/dist/components/combobox-field/tsf-combobox-field.d.ts

@@ -0,0 +1,33 @@
+import type { QueryKey } from "@tanstack/react-query";
+import type { ReactNode } from "react";
+import { type ConnectedFieldProps } from "../../lib/forms/use-connected-field.ts";
+import { type ComboboxDerivations, type ComboboxFieldChrome, type ComboboxItemLookup } from "./combobox-field.tsx";
+import type { ComboboxItems } from "./combobox-items.ts";
+import type { ComboboxMultipleLabels } from "./selection.ts";
+type Connected<TItem, TData, TKey extends QueryKey> = Omit<ComboboxFieldChrome, keyof ConnectedFieldProps> & ComboboxItems<TItem> & ComboboxDerivations<TItem> & ComboboxItemLookup<TItem, TData, TKey>;
+export type TSFComboboxFieldProps<TItem, TData = TItem, TKey extends QueryKey = QueryKey> = Connected<TItem, TData, TKey> & (Readonly<{
+    multiple?: false;
+}> | (Readonly<{
+    multiple: true;
+}> & ComboboxMultipleLabels));
+/**
+ * `ComboboxField` bound to the TanStack Form field it renders in: the form
+ * value is the item or `null`, or under `multiple` the list of items. Reach it
+ * as `field.ComboboxField` inside `form.AppField`.
+ *
+ * @example
+ * <form.AppField name="reviewer">
+ * 	{field => (
+ * 		<field.ComboboxField
+ * 			label="Reviewer"
+ * 			optionalLabel="optional"
+ * 			items={reviewers}
+ * 			itemKey={user => user.id}
+ * 			{...comboboxCopy}>
+ * 			{user => user.name}
+ * 		</field.ComboboxField>
+ * 	)}
+ * </form.AppField>
+ */
+export declare const TSFComboboxField: <TItem, TData = TItem, TKey extends QueryKey = QueryKey>(props: TSFComboboxFieldProps<TItem, TData, TKey>) => ReactNode;
+export {};

package/dist/components/combobox-field/tsf-combobox-field.js

@@ -0,0 +1,88 @@
+import { useConnectedField } from "../../lib/forms/use-connected-field.js";
+import { ComboboxField } from "./combobox-field.js";
+import { c } from "react/compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+// src/components/combobox-field/tsf-combobox-field.tsx
+var SingleField = (t0) => {
+	const $ = c(7);
+	const { props } = t0;
+	const { field, props: connected } = useConnectedField();
+	let t1;
+	if ($[0] !== field) {
+		t1 = (next) => field.handleChange(next);
+		$[0] = field;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ComboboxField, {
+			...props,
+			...connected,
+			value: field.state.value,
+			onValueChange: t1
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+var MultipleField = (t0) => {
+	const $ = c(7);
+	const { props } = t0;
+	const { field, props: connected } = useConnectedField();
+	let t1;
+	if ($[0] !== field) {
+		t1 = (next) => field.handleChange(next);
+		$[0] = field;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] !== connected || $[3] !== field.state.value || $[4] !== props || $[5] !== t1) {
+		t2 = /* @__PURE__ */ jsx(ComboboxField, {
+			...props,
+			...connected,
+			multiple: true,
+			value: field.state.value,
+			onValueChange: t1
+		});
+		$[2] = connected;
+		$[3] = field.state.value;
+		$[4] = props;
+		$[5] = t1;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+};
+/**
+* `ComboboxField` bound to the TanStack Form field it renders in: the form
+* value is the item or `null`, or under `multiple` the list of items. Reach it
+* as `field.ComboboxField` inside `form.AppField`.
+*
+* @example
+* <form.AppField name="reviewer">
+* 	{field => (
+* 		<field.ComboboxField
+* 			label="Reviewer"
+* 			optionalLabel="optional"
+* 			items={reviewers}
+* 			itemKey={user => user.id}
+* 			{...comboboxCopy}>
+* 			{user => user.name}
+* 		</field.ComboboxField>
+* 	)}
+* </form.AppField>
+*/
+var TSFComboboxField = (props) => {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = props.multiple === true ? /* @__PURE__ */ jsx(MultipleField, { props }) : /* @__PURE__ */ jsx(SingleField, { props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+};
+export { TSFComboboxField };

package/dist/components/combobox-field/value-state-view.css

@@ -0,0 +1,21 @@
+@layer kit.reset, kit.base, kit.components;
+@layer kit.components {
+  ._muted_1afap_3 {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--sys-unit-2);
+    min-inline-size: 0;
+    color: var(--combobox-unavailable-fg, var(--sys-color-text-muted));
+  }
+  ._item_1afap_10 {
+    min-inline-size: 0;
+  }
+  ._name_1afap_13 {
+    position: absolute;
+    overflow: hidden;
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    white-space: nowrap;
+  }
+}

package/dist/components/combobox-field/value-state-view.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode } from "react";
+import type { ValueState, ValueStateLabels } from "./value-state.ts";
+/**
+ * What a value is read as: its label, marked when it is no longer available.
+ *
+ * @example
+ * valueStateName(state, user => user.name, labels); // "Jan Jansen"
+ */
+export declare const valueStateName: <TItem>(state: ValueState<TItem>, itemLabel: (item: TItem) => string, labels: ValueStateLabels | undefined) => string;
+type ValueStateViewProps<TItem> = Readonly<{
+    state: ValueState<TItem>;
+    renderItem: (item: TItem) => ReactNode;
+    itemLabel: (item: TItem) => string;
+    labels: ValueStateLabels | undefined;
+}>;
+/**
+ * One value as it shows in a tag or a trigger: its item, or the item muted and
+ * marked unavailable, read as `valueStateName`.
+ *
+ * @example
+ * <ValueStateView state={state} renderItem={renderItem} itemLabel={itemLabel} labels={labels} />
+ */
+export declare const ValueStateView: <TItem>({ state, renderItem, itemLabel, labels, }: ValueStateViewProps<TItem>) => ReactNode;
+/**
+ * The polite status that sums up a field's values that are no longer
+ * available. Mount it once per field, outside any popup.
+ *
+ * @example
+ * <ValueStatesStatus states={states} labels={labels} />
+ */
+export declare const ValueStatesStatus: <TItem>({ states, labels, }: Readonly<{
+    states: readonly ValueState<TItem>[];
+    labels: ValueStateLabels;
+}>) => ReactNode;
+export {};

package/dist/components/combobox-field/value-state-view.js

@@ -0,0 +1,107 @@
+import SvgBlock from "../../vendor/@material-design-icons/svg/outlined/block.js";
+import { Icon } from "../icon/icon.js";
+import value_state_view_module_default from "./value-state-view.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/combobox-field/value-state-view.tsx
+/**
+* What a value is read as: its label, marked when it is no longer available.
+*
+* @example
+* valueStateName(state, user => user.name, labels); // "Jan Jansen"
+*/
+var valueStateName = (state, itemLabel, labels) => state.status === "unavailable" && labels !== void 0 ? labels.valueUnavailableName(itemLabel(state.item)) : itemLabel(state.item);
+/**
+* One value as it shows in a tag or a trigger: its item, or the item muted and
+* marked unavailable, read as `valueStateName`.
+*
+* @example
+* <ValueStateView state={state} renderItem={renderItem} itemLabel={itemLabel} labels={labels} />
+*/
+var ValueStateView = (t0) => {
+	const $ = c(5);
+	const { state, renderItem, itemLabel, labels } = t0;
+	let t1;
+	if ($[0] !== itemLabel || $[1] !== labels || $[2] !== renderItem || $[3] !== state) {
+		t1 = state.status === "unavailable" && labels !== void 0 ? /* @__PURE__ */ jsxs("span", {
+			className: value_state_view_module_default.muted,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: value_state_view_module_default.item,
+					children: renderItem(state.item)
+				}),
+				/* @__PURE__ */ jsx(Icon, {
+					svg: SvgBlock,
+					label: ""
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					children: labels.valueUnavailableLabel
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: value_state_view_module_default.name,
+					children: valueStateName(state, itemLabel, labels)
+				})
+			]
+		}) : renderItem(state.item);
+		$[0] = itemLabel;
+		$[1] = labels;
+		$[2] = renderItem;
+		$[3] = state;
+		$[4] = t1;
+	} else t1 = $[4];
+	return t1;
+};
+/**
+* The polite status that sums up a field's values that are no longer
+* available. Mount it once per field, outside any popup.
+*
+* @example
+* <ValueStatesStatus states={states} labels={labels} />
+*/
+var ValueStatesStatus = (t0) => {
+	const $ = c(11);
+	const { states, labels } = t0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	if ($[0] !== labels || $[1] !== states) {
+		const unavailable = states.filter(_temp).length;
+		t1 = "status";
+		t2 = "true";
+		t3 = value_state_view_module_default.name;
+		t4 = unavailable === 0 ? null : labels.valuesUnavailableLabel(unavailable);
+		$[0] = labels;
+		$[1] = states;
+		$[2] = t1;
+		$[3] = t2;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t1 = $[2];
+		t2 = $[3];
+		t3 = $[4];
+		t4 = $[5];
+	}
+	let t5;
+	if ($[6] !== t1 || $[7] !== t2 || $[8] !== t3 || $[9] !== t4) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			role: t1,
+			"aria-atomic": t2,
+			className: t3,
+			children: t4
+		});
+		$[6] = t1;
+		$[7] = t2;
+		$[8] = t3;
+		$[9] = t4;
+		$[10] = t5;
+	} else t5 = $[10];
+	return t5;
+};
+function _temp(state) {
+	return state.status === "unavailable";
+}
+export { ValueStateView, ValueStatesStatus, valueStateName };

package/dist/components/combobox-field/value-state-view.module.js

@@ -0,0 +1,10 @@
+import './value-state-view.css';// src/components/combobox-field/value-state-view.module.scss
+var muted = "_muted_1afap_3";
+var item = "_item_1afap_10";
+var name = "_name_1afap_13";
+var value_state_view_module_default = {
+	muted,
+	item,
+	name
+};
+export { value_state_view_module_default as default, item, muted, name };

package/dist/components/combobox-field/value-state.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Where a value's item lookup stands. A `useQuery` result fits.
+ *
+ * @example
+ * const lookup: ItemLookup<User> = { data: undefined, error: null };
+ */
+export type ItemLookup<TItem> = Readonly<{
+    data: TItem | undefined;
+    error: unknown;
+}>;
+/**
+ * How a value shows: its item, or its item marked as no longer available.
+ *
+ * @example
+ * const state: ValueState<User> = { status: "ready", key: "u1", item: user };
+ */
+export type ValueState<TItem> = Readonly<{
+    status: "ready" | "unavailable";
+    key: string;
+    item: TItem;
+}>;
+/** The copy a combobox shows for values its `itemQuery` reports gone. */
+export type ValueStateLabels = Readonly<{
+    /** The word a value no longer available shows beside it, such as "unavailable". */
+    valueUnavailableLabel: string;
+    /** How a value no longer available is read, such as "Jan Jansen, unavailable". */
+    valueUnavailableName: (itemLabel: string) => string;
+    /** The status sentence for such values, such as "2 selected values are no longer available.". */
+    valuesUnavailableLabel: (count: number) => string;
+}>;
+type ValueSources<TItem> = Readonly<{
+    key: string;
+    item: TItem;
+    picked: boolean;
+    listed: TItem | undefined;
+    lookup: ItemLookup<TItem> | undefined;
+    retryable: (error: unknown) => boolean;
+}>;
+/**
+ * The state a value shows in: a value picked here as it is, else the list's
+ * copy, else what its lookup says. A lookup that failed for good marks the
+ * value unavailable; one that may still succeed keeps the value as known.
+ *
+ * @example
+ * valueStateOf({ key: "u1", item: user, picked: false, listed: undefined, lookup: undefined, retryable: () => true });
+ * // { status: "ready", key: "u1", item: user }
+ */
+export declare const valueStateOf: <TItem>({ key, item, picked, listed, lookup, retryable, }: ValueSources<TItem>) => ValueState<TItem>;
+export {};

package/dist/components/combobox-field/value-state.js

@@ -0,0 +1,38 @@
+// src/components/combobox-field/value-state.ts
+/**
+* The state a value shows in: a value picked here as it is, else the list's
+* copy, else what its lookup says. A lookup that failed for good marks the
+* value unavailable; one that may still succeed keeps the value as known.
+*
+* @example
+* valueStateOf({ key: "u1", item: user, picked: false, listed: undefined, lookup: undefined, retryable: () => true });
+* // { status: "ready", key: "u1", item: user }
+*/
+var valueStateOf = ({ key, item, picked, listed, lookup, retryable }) => {
+	if (picked) return {
+		status: "ready",
+		key,
+		item
+	};
+	if (listed !== void 0) return {
+		status: "ready",
+		key,
+		item: listed
+	};
+	if (lookup === void 0) return {
+		status: "ready",
+		key,
+		item
+	};
+	const known = lookup.data ?? item;
+	return lookup.error !== null && lookup.error !== void 0 && !retryable(lookup.error) ? {
+		status: "unavailable",
+		key,
+		item: known
+	} : {
+		status: "ready",
+		key,
+		item: known
+	};
+};
+export { valueStateOf };

package/dist/components/composer/composer-attachments.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+export type ComposerAttachButtonProps = Readonly<{
+    /** The button's accessible name and tooltip, such as "Add attachment". */
+    label: string;
+    /** The MIME types and extensions the file picker offers. */
+    accept?: readonly string[];
+}>;
+/** An icon button that opens the file picker and stages what is picked. */
+export declare const ComposerAttachButton: ({ label, accept, }: ComposerAttachButtonProps) => ReactNode;
+export type ComposerAttachmentsProps = Readonly<{
+    /** The tile list's accessible name, such as "Attachments". */
+    label: string;
+    /** Each tile's remove button's accessible name, such as "Remove". */
+    removeLabel: string;
+    /** A tile's tooltip, from the file's name and formatted size. */
+    fileHint: (name: string, size: string) => string;
+}>;
+/**
+ * The staged files as removable tiles. Removing the last one returns focus to
+ * the editor. Renders nothing while no file is staged.
+ */
+export declare const ComposerAttachments: ({ label, removeLabel, fileHint, }: ComposerAttachmentsProps) => ReactNode;
+export type ComposerAttachmentsErrorProps = Readonly<{
+    /** The alert, from the formatted `maxFileSize`, such as "Files over 5 MB must be removed before sending." */
+    tooLargeError: (maxSize: string) => string;
+}>;
+/**
+ * An alert while any staged file is over `maxFileSize`. Renders nothing while
+ * every file fits.
+ */
+export declare const ComposerAttachmentsError: ({ tooLargeError, }: ComposerAttachmentsErrorProps) => ReactNode;