@igne-agency/react-web-ui 0.3.1 → 0.4.0

package/dist/components/select-field/select-field.js

@@ -5,8 +5,8 @@ import { OPTIONS_LOADED } from "../field/options-load.js";
 import { Select } from "./select.js";
 import select_module_default from "./select.module.js";
 import { c } from "react/compiler-runtime";
-import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 // src/components/select-field/select-field.tsx
 /**
 * The assembled select: a labelled trigger over the shared popup surface, then
@@ -17,6 +17,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * 	label="Status"
 * 	optionalLabel="optional"
 * 	options={statusOptions}
+* 	icon={<ExpandMoreIcon />}
+* 	checkIcon={<CheckIcon />}
 * 	value={status}
 * 	onValueChange={setStatus}
 * 	loadingLabel="Loading options…"
@@ -27,11 +29,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * />
 */
 var SelectField = (t0) => {
-	const $ = c(87);
+	const $ = c(91);
+	let checkIcon;
 	let className;
 	let description;
 	let dirty;
 	let errors;
+	let icon;
 	let label;
 	let loadBrokenLabel;
 	let loadFailedLabel;
@@ -49,49 +53,53 @@ var SelectField = (t0) => {
 	let t2;
 	let touched;
 	if ($[0] !== t0) {
-		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending: t1, placeholder, load: t2, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, onBlur, className, onOpenChange, onOpenChangeComplete, ...rootProps} = t0);
+		({label, description, errors, requiredness, optionalLabel, dirty, touched, pending: t1, placeholder, icon, checkIcon, load: t2, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, onBlur, className, onOpenChange, onOpenChangeComplete, ...rootProps} = t0);
 		$[0] = t0;
-		$[1] = className;
-		$[2] = description;
-		$[3] = dirty;
-		$[4] = errors;
-		$[5] = label;
-		$[6] = loadBrokenLabel;
-		$[7] = loadFailedLabel;
-		$[8] = loadingLabel;
-		$[9] = noOptionsLabel;
-		$[10] = onBlur;
-		$[11] = onOpenChange;
-		$[12] = onOpenChangeComplete;
-		$[13] = optionalLabel;
-		$[14] = placeholder;
-		$[15] = requiredness;
-		$[16] = retryLabel;
-		$[17] = rootProps;
-		$[18] = t1;
-		$[19] = t2;
-		$[20] = touched;
+		$[1] = checkIcon;
+		$[2] = className;
+		$[3] = description;
+		$[4] = dirty;
+		$[5] = errors;
+		$[6] = icon;
+		$[7] = label;
+		$[8] = loadBrokenLabel;
+		$[9] = loadFailedLabel;
+		$[10] = loadingLabel;
+		$[11] = noOptionsLabel;
+		$[12] = onBlur;
+		$[13] = onOpenChange;
+		$[14] = onOpenChangeComplete;
+		$[15] = optionalLabel;
+		$[16] = placeholder;
+		$[17] = requiredness;
+		$[18] = retryLabel;
+		$[19] = rootProps;
+		$[20] = t1;
+		$[21] = t2;
+		$[22] = touched;
 	} else {
-		className = $[1];
-		description = $[2];
-		dirty = $[3];
-		errors = $[4];
-		label = $[5];
-		loadBrokenLabel = $[6];
-		loadFailedLabel = $[7];
-		loadingLabel = $[8];
-		noOptionsLabel = $[9];
-		onBlur = $[10];
-		onOpenChange = $[11];
-		onOpenChangeComplete = $[12];
-		optionalLabel = $[13];
-		placeholder = $[14];
-		requiredness = $[15];
-		retryLabel = $[16];
-		rootProps = $[17];
-		t1 = $[18];
-		t2 = $[19];
-		touched = $[20];
+		checkIcon = $[1];
+		className = $[2];
+		description = $[3];
+		dirty = $[4];
+		errors = $[5];
+		icon = $[6];
+		label = $[7];
+		loadBrokenLabel = $[8];
+		loadFailedLabel = $[9];
+		loadingLabel = $[10];
+		noOptionsLabel = $[11];
+		onBlur = $[12];
+		onOpenChange = $[13];
+		onOpenChangeComplete = $[14];
+		optionalLabel = $[15];
+		placeholder = $[16];
+		requiredness = $[17];
+		retryLabel = $[18];
+		rootProps = $[19];
+		t1 = $[20];
+		t2 = $[21];
+		touched = $[22];
 	}
 	const pending = t1 === void 0 ? false : t1;
 	const load = t2 === void 0 ? OPTIONS_LOADED : t2;
@@ -101,7 +109,7 @@ var SelectField = (t0) => {
 	const inside = useRef(false);
 	const t3 = rootProps.value !== void 0 && rootProps.value !== null && rootProps.value !== "";
 	let t4;
-	if ($[21] !== dirty || $[22] !== errors || $[23] !== pending || $[24] !== requiredness || $[25] !== rootProps.disabled || $[26] !== rootProps.readOnly || $[27] !== t3 || $[28] !== touched) {
+	if ($[23] !== dirty || $[24] !== errors || $[25] !== pending || $[26] !== requiredness || $[27] !== rootProps.disabled || $[28] !== rootProps.readOnly || $[29] !== t3 || $[30] !== touched) {
 		t4 = {
 			errors,
 			requiredness,
@@ -112,113 +120,115 @@ var SelectField = (t0) => {
 			readOnly: rootProps.readOnly,
 			filled: t3
 		};
-		$[21] = dirty;
-		$[22] = errors;
-		$[23] = pending;
-		$[24] = requiredness;
-		$[25] = rootProps.disabled;
-		$[26] = rootProps.readOnly;
-		$[27] = t3;
-		$[28] = touched;
-		$[29] = t4;
-	} else t4 = $[29];
+		$[23] = dirty;
+		$[24] = errors;
+		$[25] = pending;
+		$[26] = requiredness;
+		$[27] = rootProps.disabled;
+		$[28] = rootProps.readOnly;
+		$[29] = t3;
+		$[30] = touched;
+		$[31] = t4;
+	} else t4 = $[31];
 	const field = useFieldState(t4);
 	const t5 = field.state.pending === true || load.status === "pending";
 	let t6;
-	if ($[30] !== field.state || $[31] !== t5) {
+	if ($[32] !== field.state || $[33] !== t5) {
 		t6 = {
 			...field.state,
 			pending: t5
 		};
-		$[30] = field.state;
-		$[31] = t5;
-		$[32] = t6;
-	} else t6 = $[32];
+		$[32] = field.state;
+		$[33] = t5;
+		$[34] = t6;
+	} else t6 = $[34];
 	const fieldState = t6;
 	let t7;
-	if ($[33] !== description || $[34] !== field.invalid || $[35] !== ids) {
+	if ($[35] !== description || $[36] !== field.invalid || $[37] !== ids) {
 		t7 = ids.describedBy(description !== void 0, field.invalid);
-		$[33] = description;
-		$[34] = field.invalid;
-		$[35] = ids;
-		$[36] = t7;
-	} else t7 = $[36];
+		$[35] = description;
+		$[36] = field.invalid;
+		$[37] = ids;
+		$[38] = t7;
+	} else t7 = $[38];
 	const describedBy = t7;
 	let t8;
-	if ($[37] !== onBlur) {
+	if ($[39] !== onBlur) {
 		t8 = () => {
 			if (inside.current && !open.current && !focused.current) {
 				inside.current = false;
 				onBlur?.();
 			}
 		};
-		$[37] = onBlur;
-		$[38] = t8;
-	} else t8 = $[38];
+		$[39] = onBlur;
+		$[40] = t8;
+	} else t8 = $[40];
 	const leave = t8;
 	const t9 = requiredness === "required";
 	let t10;
-	if ($[39] !== onOpenChange) {
+	if ($[41] !== onOpenChange) {
 		t10 = (next, details) => {
 			open.current = next;
 			if (next) inside.current = true;
 			onOpenChange?.(next, details);
 		};
-		$[39] = onOpenChange;
-		$[40] = t10;
-	} else t10 = $[40];
+		$[41] = onOpenChange;
+		$[42] = t10;
+	} else t10 = $[42];
 	let t11;
-	if ($[41] !== leave || $[42] !== onOpenChangeComplete) {
+	if ($[43] !== leave || $[44] !== onOpenChangeComplete) {
 		t11 = (next_0) => {
 			onOpenChangeComplete?.(next_0);
 			if (!next_0) requestAnimationFrame(leave);
 		};
-		$[41] = leave;
-		$[42] = onOpenChangeComplete;
-		$[43] = t11;
-	} else t11 = $[43];
+		$[43] = leave;
+		$[44] = onOpenChangeComplete;
+		$[45] = t11;
+	} else t11 = $[45];
 	let t12;
-	if ($[44] !== optionalLabel || $[45] !== requiredness) {
+	if ($[46] !== optionalLabel || $[47] !== requiredness) {
 		t12 = /* @__PURE__ */ jsx(Field.Requiredness, {
 			requiredness,
 			optionalLabel
 		});
-		$[44] = optionalLabel;
-		$[45] = requiredness;
-		$[46] = t12;
-	} else t12 = $[46];
+		$[46] = optionalLabel;
+		$[47] = requiredness;
+		$[48] = t12;
+	} else t12 = $[48];
 	let t13;
-	if ($[47] !== label || $[48] !== t12) {
+	if ($[49] !== label || $[50] !== t12) {
 		t13 = /* @__PURE__ */ jsxs(Select.Label, { children: [
 			label,
 			" ",
 			t12
 		] });
-		$[47] = label;
-		$[48] = t12;
-		$[49] = t13;
-	} else t13 = $[49];
+		$[49] = label;
+		$[50] = t12;
+		$[51] = t13;
+	} else t13 = $[51];
 	let t14;
-	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
 		t14 = () => {
 			focused.current = true;
 			inside.current = true;
 		};
-		$[50] = t14;
-	} else t14 = $[50];
+		$[52] = t14;
+	} else t14 = $[52];
 	let t15;
-	if ($[51] !== leave) {
+	if ($[53] !== leave) {
 		t15 = () => {
 			focused.current = false;
 			leave();
 		};
-		$[51] = leave;
-		$[52] = t15;
-	} else t15 = $[52];
+		$[53] = leave;
+		$[54] = t15;
+	} else t15 = $[54];
 	let t16;
-	if ($[53] !== className || $[54] !== describedBy || $[55] !== fieldState || $[56] !== load || $[57] !== loadBrokenLabel || $[58] !== loadFailedLabel || $[59] !== loadingLabel || $[60] !== noOptionsLabel || $[61] !== placeholder || $[62] !== retryLabel || $[63] !== t15) {
+	if ($[55] !== checkIcon || $[56] !== className || $[57] !== describedBy || $[58] !== fieldState || $[59] !== icon || $[60] !== load || $[61] !== loadBrokenLabel || $[62] !== loadFailedLabel || $[63] !== loadingLabel || $[64] !== noOptionsLabel || $[65] !== placeholder || $[66] !== retryLabel || $[67] !== t15) {
 		t16 = /* @__PURE__ */ jsx(Select.Control, {
 			placeholder,
+			icon,
+			checkIcon,
 			load,
 			loadingLabel,
 			loadFailedLabel,
@@ -231,21 +241,23 @@ var SelectField = (t0) => {
 			onFocus: t14,
 			onBlur: t15
 		});
-		$[53] = className;
-		$[54] = describedBy;
-		$[55] = fieldState;
-		$[56] = load;
-		$[57] = loadBrokenLabel;
-		$[58] = loadFailedLabel;
-		$[59] = loadingLabel;
-		$[60] = noOptionsLabel;
-		$[61] = placeholder;
-		$[62] = retryLabel;
-		$[63] = t15;
-		$[64] = t16;
-	} else t16 = $[64];
+		$[55] = checkIcon;
+		$[56] = className;
+		$[57] = describedBy;
+		$[58] = fieldState;
+		$[59] = icon;
+		$[60] = load;
+		$[61] = loadBrokenLabel;
+		$[62] = loadFailedLabel;
+		$[63] = loadingLabel;
+		$[64] = noOptionsLabel;
+		$[65] = placeholder;
+		$[66] = retryLabel;
+		$[67] = t15;
+		$[68] = t16;
+	} else t16 = $[68];
 	let t17;
-	if ($[65] !== field.disabled || $[66] !== ids.controlId || $[67] !== rootProps || $[68] !== t10 || $[69] !== t11 || $[70] !== t13 || $[71] !== t16 || $[72] !== t9) {
+	if ($[69] !== field.disabled || $[70] !== ids.controlId || $[71] !== rootProps || $[72] !== t10 || $[73] !== t11 || $[74] !== t13 || $[75] !== t16 || $[76] !== t9) {
 		t17 = /* @__PURE__ */ jsxs(Select.Root, {
 			name: ids.controlId,
 			inputRef: detachHiddenInput,
@@ -256,38 +268,38 @@ var SelectField = (t0) => {
 			onOpenChangeComplete: t11,
 			children: [t13, t16]
 		});
-		$[65] = field.disabled;
-		$[66] = ids.controlId;
-		$[67] = rootProps;
-		$[68] = t10;
-		$[69] = t11;
-		$[70] = t13;
-		$[71] = t16;
-		$[72] = t9;
-		$[73] = t17;
-	} else t17 = $[73];
+		$[69] = field.disabled;
+		$[70] = ids.controlId;
+		$[71] = rootProps;
+		$[72] = t10;
+		$[73] = t11;
+		$[74] = t13;
+		$[75] = t16;
+		$[76] = t9;
+		$[77] = t17;
+	} else t17 = $[77];
 	let t18;
-	if ($[74] !== description || $[75] !== ids.descriptionId) {
+	if ($[78] !== description || $[79] !== ids.descriptionId) {
 		t18 = /* @__PURE__ */ jsx(Select.Description, {
 			id: ids.descriptionId,
 			children: description
 		});
-		$[74] = description;
-		$[75] = ids.descriptionId;
-		$[76] = t18;
-	} else t18 = $[76];
+		$[78] = description;
+		$[79] = ids.descriptionId;
+		$[80] = t18;
+	} else t18 = $[80];
 	let t19;
-	if ($[77] !== errors || $[78] !== ids.errorId) {
+	if ($[81] !== errors || $[82] !== ids.errorId) {
 		t19 = /* @__PURE__ */ jsx(Select.Error, {
 			id: ids.errorId,
 			children: errors
 		});
-		$[77] = errors;
-		$[78] = ids.errorId;
-		$[79] = t19;
-	} else t19 = $[79];
+		$[81] = errors;
+		$[82] = ids.errorId;
+		$[83] = t19;
+	} else t19 = $[83];
 	let t20;
-	if ($[80] !== dirty || $[81] !== field.invalid || $[82] !== t17 || $[83] !== t18 || $[84] !== t19 || $[85] !== touched) {
+	if ($[84] !== dirty || $[85] !== field.invalid || $[86] !== t17 || $[87] !== t18 || $[88] !== t19 || $[89] !== touched) {
 		t20 = /* @__PURE__ */ jsxs(Field.Root, {
 			className: select_module_default.field,
 			invalid: field.invalid,
@@ -299,14 +311,14 @@ var SelectField = (t0) => {
 				t19
 			]
 		});
-		$[80] = dirty;
-		$[81] = field.invalid;
-		$[82] = t17;
-		$[83] = t18;
-		$[84] = t19;
-		$[85] = touched;
-		$[86] = t20;
-	} else t20 = $[86];
+		$[84] = dirty;
+		$[85] = field.invalid;
+		$[86] = t17;
+		$[87] = t18;
+		$[88] = t19;
+		$[89] = touched;
+		$[90] = t20;
+	} else t20 = $[90];
 	return t20;
 };
 export { SelectField };

package/dist/components/select-field/select.d.ts

@@ -8,25 +8,43 @@ export type SelectRootProps<T extends string> = Omit<BaseSelect.Root.Props<T>, "
     options: readonly SelectOption<T>[];
     onValueChange?: (value: T) => void;
 }>;
+/** The select's state, holding the options every part below it reads. */
 declare const SelectRoot: <T extends string>({ options, onValueChange, ...props }: SelectRootProps<T>) => ReactNode;
+/** The label that names the trigger. */
 declare const SelectLabel: ({ className, ...props }: BaseSelect.Label.Props) => ReactNode;
 export type SelectTriggerProps = BaseSelect.Trigger.Props & Readonly<{
     /** Shown while nothing is selected. */
     placeholder?: string;
     /** The states projected onto the trigger as `data-*` attributes. */
     state?: FieldState;
+    /** The chevron after the value, such as an expand icon. */
+    icon?: ReactNode;
 }>;
-declare const SelectTrigger: ({ placeholder, state, className, children, ...props }: SelectTriggerProps) => ReactNode;
+/** The chevron after the trigger's value. Its children are the icon; without them it renders nothing. */
+declare const SelectIcon: ({ className, children, ...props }: BaseSelect.Icon.Props) => ReactNode;
+/** The button that opens the list. Without children it shows the value, the pending mark and `icon`. */
+declare const SelectTrigger: ({ placeholder, state, icon, className, children, ...props }: SelectTriggerProps) => ReactNode;
+/** Places the popup against the trigger. */
 declare const SelectPositioner: ({ className, sideOffset, alignItemWithTrigger, ...props }: BaseSelect.Positioner.Props) => ReactNode;
+/** The shared popup surface the list sits on. */
 declare const SelectPopup: ({ className, ...props }: BaseSelect.Popup.Props) => ReactNode;
 export type SelectItemProps = BaseSelect.Item.Props;
-declare const SelectItem: ({ className, children, ...props }: SelectItemProps) => ReactNode;
+/** One option's row, holding its `ItemText` and `ItemIndicator`. */
+declare const SelectItem: ({ className, ...props }: SelectItemProps) => ReactNode;
+/** An option's text, which the trigger shows once it is chosen. */
+declare const SelectItemText: ({ className, ...props }: BaseSelect.ItemText.Props) => ReactNode;
+/** The mark beside the chosen option. Its children are the mark, such as a tick. */
+declare const SelectItemIndicator: ({ className, ...props }: BaseSelect.ItemIndicator.Props) => ReactNode;
+export type SelectItemsProps = Readonly<{
+    /** The mark beside the chosen option, such as a tick. */
+    checkIcon: ReactNode;
+}>;
 /**
  * Every option of the enclosing `Select.Root`, in the order it was given them.
  * Compose the parts directly instead where a row is more than its label.
  */
-declare const SelectItems: () => ReactNode;
-export type SelectControlProps = Omit<SelectTriggerProps, "children"> & OptionsLoadLabels & Readonly<{
+declare const SelectItems: ({ checkIcon, }: SelectItemsProps) => ReactNode;
+export type SelectControlProps = Omit<SelectTriggerProps, "children"> & OptionsLoadLabels & SelectItemsProps & Readonly<{
     /** How far the options have loaded, when they come from a query. */
     load?: OptionsLoad;
 }>;
@@ -34,19 +52,21 @@ export type SelectControlProps = Omit<SelectTriggerProps, "children"> & OptionsL
  * The trigger over the portalled list of every option: the shape almost every
  * select takes. Reach for the parts where the list needs anything else.
  */
-declare const SelectControl: ({ load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, ...props }: SelectControlProps) => ReactNode;
+declare const SelectControl: ({ load, loadingLabel, loadFailedLabel, loadBrokenLabel, retryLabel, noOptionsLabel, checkIcon, ...props }: SelectControlProps) => ReactNode;
 /** The parts of a select. */
 export type SelectParts = Readonly<{
     Root: typeof SelectRoot;
     Label: typeof SelectLabel;
     Trigger: typeof SelectTrigger;
     Value: typeof BaseSelect.Value;
-    Icon: typeof BaseSelect.Icon;
+    Icon: typeof SelectIcon;
     Portal: typeof BaseSelect.Portal;
     Positioner: typeof SelectPositioner;
     Popup: typeof SelectPopup;
     List: typeof BaseSelect.List;
     Item: typeof SelectItem;
+    ItemText: typeof SelectItemText;
+    ItemIndicator: typeof SelectItemIndicator;
     Items: typeof SelectItems;
     Group: typeof BaseSelect.Group;
     GroupLabel: typeof BaseSelect.GroupLabel;
@@ -67,6 +87,8 @@ export type SelectParts = Readonly<{
  * <Select.Root options={options} value={value} onValueChange={setValue}>
  * 	<Select.Label>Status</Select.Label>
  * 	<Select.Control
+ * 		icon={<ExpandMoreIcon />}
+ * 		checkIcon={<CheckIcon />}
  * 		loadingLabel="Loading options…"
  * 		loadFailedLabel="Options could not be loaded."
  * 		loadBrokenLabel="Options could not be loaded, and trying again won't help."