@kanso-labs/react-native-kanso-ui 0.8.0 → 0.10.0

package/dist/components/select/index.d.ts

@@ -0,0 +1,152 @@
+import { ValidationResult } from "../../form/index.js";
+import { FieldVariant } from "../../field/index.js";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+import { ChangeValueType, SelectionMode as SelectionMode$1, ValueType } from "react-stately/useSelectState";
+//#region src/components/select/index.d.ts
+type SelectProps<M extends SelectionMode$1 = 'single'> = {
+  /**
+   * Lets the list open with no options in it, showing its empty state.
+   * Left off, a press on a select with no options does nothing.
+   * @default false
+   */
+  readonly allowsEmptyCollection?: boolean;
+  /** Whether the list is open at first, when the select keeps its own. */
+  readonly defaultOpen?: boolean;
+  /**
+   * What is chosen at first, when the select keeps its own value: an
+   * option's `id`, or a list of them with `selectionMode="multiple"`.
+   */
+  readonly defaultValue?: ValueType<M>;
+  /**
+   * A hint shown under the field. Replaced by `error` when there is one, so
+   * the two never stack.
+   */
+  readonly description?: string;
+  /** The `id`s of the options drawn disabled, which take no presses. */
+  readonly disabledKeys?: Iterable<Key>;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the field in its error state: the message, the error colours, and the
+   * error a screen reader reads with the field all follow from it. The line
+   * under the field arrives with the message, so the field grows when this
+   * does, unless it is inside a `Form`, which keeps the line drawn. It wins
+   * over what `validate` and the form say, and holds a `native` form back.
+   */
+  readonly error?: string;
+  /**
+   * Whether the label sits in the empty box and floats to the top once the
+   * list is open or something is chosen. `false` keeps it small at the top
+   * in every state.
+   * @default true
+   */
+  readonly floatingLabel?: boolean;
+  /**
+   * Draws the field disabled: it takes no presses and its list never opens.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Whether the list is open, when the call site holds it. */
+  readonly isOpen?: boolean;
+  /**
+   * Marks the label with an asterisk, as the text fields page marks a field
+   * that must be filled. Inside a `native` form, a field left empty holds
+   * the form back.
+   * @default false
+   */
+  readonly isRequired?: boolean;
+  /**
+   * What the field is for, and the name a screen reader reads for it before
+   * its value. Required, since a select with no label is a box nobody can
+   * name.
+   */
+  readonly label: string;
+  /**
+   * An icon at the start of the box, before the label and the value: the
+   * page's 24dp leading icon, in the muted role. The slot hands it that
+   * colour and size through `useIconStyle()`.
+   */
+  readonly leadingIcon?: ReactNode;
+  /**
+   * The name the value is submitted under by the `Form` around the field,
+   * and the key its `validationErrors` reach the field by. A select with
+   * nothing chosen submits an empty string, and one choosing several
+   * submits the list of their `id`s.
+   */
+  readonly name?: string;
+  /**
+   * Called with what is chosen whenever it changes: an option's `id`, or
+   * the list of them with `selectionMode="multiple"`.
+   */
+  readonly onChange?: (value: ChangeValueType<M>) => void;
+  /** Called with whether the list is open whenever that changes. */
+  readonly onOpenChange?: (isOpen: boolean) => void;
+  /**
+   * The options, a `ListBox.Item` for each and `ListBox.Section` to group
+   * them. The list is a ListBox's, and draws every slot one does. Give
+   * every option an `id`, which is what the value holds.
+   */
+  readonly options?: ReactNode;
+  /**
+   * What the box shows while nothing is chosen. Left out, it is "Select an
+   * item" in the `I18nProvider`'s language, or the device's outside one.
+   */
+  readonly placeholder?: string;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Whether one option is chosen, or several. A select choosing several
+   * stays open as they are pressed.
+   * @default 'single'
+   */
+  readonly selectionMode?: M;
+  /**
+   * Whether a press on an option closes the list.
+   * @default true with one option chosen, false with several
+   */
+  readonly shouldCloseOnSelect?: boolean;
+  /** Positions and sizes the field as a whole. */
+  readonly style?: StyleProp<ViewStyle>;
+  /** The test id of the box, which is the control. */
+  readonly testID?: string;
+  /**
+   * Checks the value, and returns its problem in words, or several, where
+   * there is one, and `true`, `null` or `undefined` where there is none.
+   * Under the default `aria` validation the error shows as the value
+   * changes; inside a `native` form it shows once a submission is tried, or
+   * once something is chosen, and holds the form back.
+   */
+  readonly validate?: (value: ValueType<M>) => ValidationResult;
+  /** What is chosen, when the call site holds it. */
+  readonly value?: ValueType<M>;
+  /**
+   * The filled box, or the outlined one, as the text fields page draws them.
+   * @default 'filled'
+   */
+  readonly variant?: FieldVariant;
+};
+/**
+ * A labelled field that opens a list to choose from. Pass `value` with
+ * `onChange` to hold what is chosen, or `defaultValue` to let the select
+ * keep its own. The value is an option's `id`, so give every option one;
+ * with `selectionMode="multiple"` it is a list of them.
+ *
+ * ```tsx
+ * <Select
+ *   label="Label"
+ *   options={[
+ *     <ListBox.Item id="first" key="first">First item</ListBox.Item>,
+ *     <ListBox.Item id="second" key="second">Second item</ListBox.Item>,
+ *   ]}
+ * />
+ * ```
+ *
+ * The box, the label, the supporting line and the error are the field chrome
+ * every field here draws; the list is a ListBox's, on the surface every
+ * anchored panel here draws. `style` and `ref` are the field as a whole, and
+ * `testID` the box.
+ */
+declare function Select<M extends SelectionMode$1 = 'single'>({ allowsEmptyCollection, defaultOpen, defaultValue, description, disabledKeys, error, floatingLabel, isDisabled, isOpen, isRequired, label, leadingIcon, name, onChange, onOpenChange, options, placeholder, ref, selectionMode, shouldCloseOnSelect, style, testID, validate, value, variant }: SelectProps<M>): import("react").JSX.Element;
+//#endregion
+export { Select, type SelectProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/select/index.js

@@ -0,0 +1,419 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { listFor } from "../../i18n/index.js";
+import { useLocaleOf, useMessages } from "../../i18n/provider.js";
+import { useFieldValidation } from "../../form/index.js";
+import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
+import { FieldChevron } from "../../field/chevron.js";
+import { FieldBox, FieldMessage, FieldValue, describedBy } from "../../field/index.js";
+import { Overlay } from "../../overlay/host.js";
+import { useAnchoredPlacement } from "../../overlay/anchored.js";
+import { CollectionView, focusKeyOf } from "../../collection/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useSelectState } from "react-stately/useSelectState";
+//#region src/components/select/index.tsx
+const SHRINKS = { flexGrow: 0 };
+const stylesOf = themedStyles(({ colors, radii, shadows }) => StyleSheet.create({ list: {
+	backgroundColor: colors.surfaceContainerLow,
+	borderRadius: radii.xs,
+	boxShadow: shadows.elevation2,
+	overflow: "hidden"
+} }));
+function chevronFor(isOpen) {
+	return /* @__PURE__ */ jsx(FieldChevron, { isOpen });
+}
+function keysOf(value) {
+	if (value === null) return [];
+	return typeof value === "object" ? value : [value];
+}
+/**
+* A labelled field that opens a list to choose from. Pass `value` with
+* `onChange` to hold what is chosen, or `defaultValue` to let the select
+* keep its own. The value is an option's `id`, so give every option one;
+* with `selectionMode="multiple"` it is a list of them.
+*
+* ```tsx
+* <Select
+*   label="Label"
+*   options={[
+*     <ListBox.Item id="first" key="first">First item</ListBox.Item>,
+*     <ListBox.Item id="second" key="second">Second item</ListBox.Item>,
+*   ]}
+* />
+* ```
+*
+* The box, the label, the supporting line and the error are the field chrome
+* every field here draws; the list is a ListBox's, on the surface every
+* anchored panel here draws. `style` and `ref` are the field as a whole, and
+* `testID` the box.
+*/
+function Select(t0) {
+	const $ = c(65);
+	const { allowsEmptyCollection, defaultOpen, defaultValue, description, disabledKeys, error, floatingLabel: t1, isDisabled: t2, isOpen, isRequired: t3, label, leadingIcon, name, onChange, onOpenChange, options, placeholder, ref, selectionMode, shouldCloseOnSelect, style, testID, validate, value, variant: t4 } = t0;
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const isRequired = t3 === void 0 ? false : t3;
+	const variant = t4 === void 0 ? "filled" : t4;
+	const id = useId();
+	const box = useRef(null);
+	const [focused, setFocused] = useState(false);
+	const messages = useMessages();
+	const locale = useLocaleOf(void 0);
+	const state = useSelectState({
+		allowsEmptyCollection,
+		children: options,
+		defaultOpen,
+		defaultValue,
+		disabledKeys,
+		isDisabled,
+		isOpen,
+		onChange: (changed) => {
+			validation.onEdit();
+			validation.onBlur();
+			onChange?.(changed);
+		},
+		onOpenChange,
+		selectionMode,
+		shouldCloseOnSelect,
+		value
+	});
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[0] !== error || $[1] !== isDisabled || $[2] !== isRequired || $[3] !== name || $[4] !== state.selectionManager.selectionMode || $[5] !== state.value) {
+		const chosen = keysOf(state.value);
+		const several = state.selectionManager.selectionMode === "multiple";
+		t13 = useFieldValidation;
+		t5 = box;
+		t6 = error;
+		t7 = isDisabled;
+		t8 = chosen.length === 0;
+		t9 = false;
+		t10 = isRequired;
+		t11 = name;
+		t12 = several ? chosen.map(String) : String(chosen[0] ?? "");
+		$[0] = error;
+		$[1] = isDisabled;
+		$[2] = isRequired;
+		$[3] = name;
+		$[4] = state.selectionManager.selectionMode;
+		$[5] = state.value;
+		$[6] = t10;
+		$[7] = t11;
+		$[8] = t12;
+		$[9] = t13;
+		$[10] = t5;
+		$[11] = t6;
+		$[12] = t7;
+		$[13] = t8;
+		$[14] = t9;
+	} else {
+		t10 = $[6];
+		t11 = $[7];
+		t12 = $[8];
+		t13 = $[9];
+		t5 = $[10];
+		t6 = $[11];
+		t7 = $[12];
+		t8 = $[13];
+		t9 = $[14];
+	}
+	let t14;
+	if ($[15] !== state.value || $[16] !== t10 || $[17] !== t11 || $[18] !== t12 || $[19] !== t5 || $[20] !== t6 || $[21] !== t7 || $[22] !== t8 || $[23] !== t9 || $[24] !== validate) {
+		t14 = {
+			control: t5,
+			error: t6,
+			isDisabled: t7,
+			isEmpty: t8,
+			isReadOnly: t9,
+			isRequired: t10,
+			name: t11,
+			submitted: t12,
+			validate,
+			value: state.value
+		};
+		$[15] = state.value;
+		$[16] = t10;
+		$[17] = t11;
+		$[18] = t12;
+		$[19] = t5;
+		$[20] = t6;
+		$[21] = t7;
+		$[22] = t8;
+		$[23] = t9;
+		$[24] = validate;
+		$[25] = t14;
+	} else t14 = $[25];
+	const validation = t13(t14);
+	const shownError = validation.error;
+	const isPlaceholder = state.selectedItems.length === 0;
+	let t15;
+	if ($[26] !== isPlaceholder || $[27] !== locale || $[28] !== messages || $[29] !== placeholder || $[30] !== state.selectedItems) {
+		t15 = isPlaceholder ? placeholder ?? messages.selectPlaceholder : listFor(state.selectedItems.map(_temp), locale);
+		$[26] = isPlaceholder;
+		$[27] = locale;
+		$[28] = messages;
+		$[29] = placeholder;
+		$[30] = state.selectedItems;
+		$[31] = t15;
+	} else t15 = $[31];
+	const shown = t15;
+	const T0 = View;
+	const T1 = FieldBox;
+	const t16 = state.isOpen || focused;
+	const t17 = shownError !== void 0;
+	const t18 = !isPlaceholder;
+	let t19;
+	if ($[32] !== state.isOpen) {
+		t19 = chevronFor(state.isOpen);
+		$[32] = state.isOpen;
+		$[33] = t19;
+	} else t19 = $[33];
+	const t20 = triggerFor(state, {
+		described: describedBy(id, {
+			description,
+			error: shownError
+		}),
+		name: `${label} ${shown}`,
+		setFocused,
+		testID
+	});
+	let t21;
+	if ($[34] !== isPlaceholder || $[35] !== shown) {
+		t21 = /* @__PURE__ */ jsx(FieldValue, {
+			isPlaceholder,
+			children: shown
+		});
+		$[34] = isPlaceholder;
+		$[35] = shown;
+		$[36] = t21;
+	} else t21 = $[36];
+	let t22;
+	if ($[37] !== T1 || $[38] !== floatingLabel || $[39] !== isDisabled || $[40] !== isRequired || $[41] !== label || $[42] !== leadingIcon || $[43] !== t16 || $[44] !== t17 || $[45] !== t18 || $[46] !== t19 || $[47] !== t20 || $[48] !== t21 || $[49] !== variant) {
+		t22 = /* @__PURE__ */ jsx(T1, {
+			floatingLabel,
+			isDisabled,
+			isFocused: t16,
+			isInvalid: t17,
+			isPopulated: t18,
+			isRequired,
+			label,
+			leading: leadingIcon,
+			ref: box,
+			trailing: t19,
+			trigger: t20,
+			variant,
+			children: t21
+		});
+		$[37] = T1;
+		$[38] = floatingLabel;
+		$[39] = isDisabled;
+		$[40] = isRequired;
+		$[41] = label;
+		$[42] = leadingIcon;
+		$[43] = t16;
+		$[44] = t17;
+		$[45] = t18;
+		$[46] = t19;
+		$[47] = t20;
+		$[48] = t21;
+		$[49] = variant;
+		$[50] = t22;
+	} else t22 = $[50];
+	let t23;
+	if ($[51] !== description || $[52] !== id || $[53] !== shownError) {
+		t23 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error: shownError,
+			id
+		});
+		$[51] = description;
+		$[52] = id;
+		$[53] = shownError;
+		$[54] = t23;
+	} else t23 = $[54];
+	let t24;
+	if ($[55] !== label || $[56] !== state) {
+		t24 = /* @__PURE__ */ jsx(SelectPopup, {
+			anchor: box,
+			label,
+			state
+		});
+		$[55] = label;
+		$[56] = state;
+		$[57] = t24;
+	} else t24 = $[57];
+	let t25;
+	if ($[58] !== T0 || $[59] !== ref || $[60] !== style || $[61] !== t22 || $[62] !== t23 || $[63] !== t24) {
+		t25 = /* @__PURE__ */ jsxs(T0, {
+			ref,
+			style,
+			children: [
+				t22,
+				t23,
+				t24
+			]
+		});
+		$[58] = T0;
+		$[59] = ref;
+		$[60] = style;
+		$[61] = t22;
+		$[62] = t23;
+		$[63] = t24;
+		$[64] = t25;
+	} else t25 = $[64];
+	return t25;
+}
+/**
+* The list, drawn in the overlay host above the screen and placed under the
+* box: as wide as the box, flipped above it at the edge of the window, and
+* scrolled to the option a screen reader is sent to once it has been placed.
+*/
+function _temp(item) {
+	return item.textValue;
+}
+function SelectList(t0) {
+	const $ = c(23);
+	const { anchor, isOpen, label, setPresent, state } = t0;
+	const styles = stylesOf(useTheme());
+	let t1;
+	if ($[0] !== anchor) {
+		t1 = {
+			align: "start",
+			anchor
+		};
+		$[0] = anchor;
+		$[1] = t1;
+	} else t1 = $[1];
+	const placement = useAnchoredPlacement(t1);
+	const motion = usePanelMotion(isOpen, placement.placed, setPresent);
+	const [panel, setPanel] = useState(null);
+	const [option, setOption] = useState(null);
+	const close = state.close;
+	useBackToClose(close, isOpen);
+	useFocusOnPlaced(isOpen && placement.placed, option ?? panel);
+	let t2;
+	if ($[2] !== close || $[3] !== isOpen) {
+		t2 = isOpen ? /* @__PURE__ */ jsx(DismissLayer, { onPress: close }) : null;
+		$[2] = close;
+		$[3] = isOpen;
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = Animated;
+	const t4 = placement.onLayout;
+	const t5 = composeStyles(styles.list, { width: placement.anchorWidth }, placement.style, { transformOrigin: PANEL_ORIGINS[placement.side] }, motion);
+	let t6;
+	if ($[5] !== state) {
+		t6 = focusKeyOf(state);
+		$[5] = state;
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== label || $[8] !== placement.placed || $[9] !== setOption || $[10] !== state || $[11] !== t6) {
+		t7 = /* @__PURE__ */ jsx(CollectionView, {
+			"aria-label": label,
+			focusKey: t6,
+			kind: "listbox",
+			onFocusTarget: setOption,
+			revealFocus: placement.placed,
+			state,
+			style: SHRINKS
+		});
+		$[7] = label;
+		$[8] = placement.placed;
+		$[9] = setOption;
+		$[10] = state;
+		$[11] = t6;
+		$[12] = t7;
+	} else t7 = $[12];
+	let t8;
+	if ($[13] !== close || $[14] !== placement.onLayout || $[15] !== setPanel || $[16] !== t3.View || $[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ jsx(t3.View, {
+			onAccessibilityEscape: close,
+			onLayout: t4,
+			ref: setPanel,
+			style: t5,
+			children: t7
+		});
+		$[13] = close;
+		$[14] = placement.onLayout;
+		$[15] = setPanel;
+		$[16] = t3.View;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else t8 = $[19];
+	let t9;
+	if ($[20] !== t2 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t8] });
+		$[20] = t2;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+/**
+* The list while it is open and while its exit runs: mounted the moment the
+* select opens, and kept until the list has faded out. A screen reader goes
+* back to the box once it has gone.
+*/
+function SelectPopup(t0) {
+	const $ = c(4);
+	const { anchor, label, state } = t0;
+	const [present, setPresent] = useState(state.isOpen);
+	if (state.isOpen && !present) setPresent(true);
+	useReturnFocus(present, false, anchor);
+	if (!present) return null;
+	let t1;
+	if ($[0] !== anchor || $[1] !== label || $[2] !== state) {
+		t1 = /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(SelectList, {
+			anchor,
+			isOpen: state.isOpen,
+			label,
+			setPresent,
+			state
+		}) });
+		$[0] = anchor;
+		$[1] = label;
+		$[2] = state;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+}
+/**
+* The box as the select's control: named by its label and what it shows,
+* described by the line under it, saying whether its list is open, and
+* opening or closing the list when pressed. It tracks its own focus, for a
+* keyboard reaching it, which the box draws as it draws a focused field.
+*/
+function triggerFor(state, { described, name, setFocused, testID }) {
+	return {
+		"aria-expanded": state.isOpen,
+		"aria-label": name,
+		described,
+		onBlur: () => {
+			setFocused(false);
+		},
+		onFocus: () => {
+			setFocused(true);
+		},
+		onPress: () => {
+			state.toggle();
+		},
+		testID
+	};
+}
+//#endregion
+export { Select };
+
+//# sourceMappingURL=index.js.map

package/dist/components/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","RefObject","HostInstance","StyleProp","ViewStyle","AnimatedStyle","Key","ListProps","StatelyListProps","ChangeValueType","SelectionMode","SelectState","ValueType","useId","useRef","useState","StyleSheet","View","Animated","useSelectState","FieldTriggerProps","FieldVariant","ValidationResult","ResolvedTheme","CollectionView","focusKeyOf","describedBy","FieldBox","FieldChevron","FieldMessage","FieldValue","useFieldValidation","listFor","useLocaleOf","useMessages","Overlay","useAnchoredPlacement","DismissLayer","PANEL_ORIGINS","useBackToClose","useFocusOnPlaced","usePanelMotion","useReturnFocus","useTheme","composeStyles","themedStyles","SelectListProps","anchor","isOpen","label","setPresent","present","state","SelectProps","allowsEmptyCollection","defaultOpen","defaultValue","M","description","disabledKeys","Iterable","error","floatingLabel","isDisabled","isRequired","leadingIcon","name","onChange","value","onOpenChange","options","placeholder","ref","selectionMode","shouldCloseOnSelect","style","testID","validate","variant","SHRINKS","flexGrow","stylesOf","colors","radii","shadows","create","list","backgroundColor","surfaceContainerLow","borderRadius","xs","boxShadow","elevation2","overflow","chevronFor","keysOf","Select","t0","$","_c","t1","t2","t3","t4","undefined","id","box","focused","setFocused","messages","locale","children","changed","validation","onEdit","onBlur","t10","t11","t12","t13","t5","t6","t7","t8","t9","selectionManager","chosen","several","length","map","String","t14","control","isEmpty","isReadOnly","submitted","shownError","isPlaceholder","selectedItems","t15","selectPlaceholder","_temp","shown","T0","T1","t16","t17","t18","t19","t20","triggerFor","described","t21","t22","t23","t24","t25","item","textValue","SelectList","styles","align","placement","motion","placed","panel","setPanel","option","setOption","close","onLayout","width","anchorWidth","transformOrigin","side","SelectPopup","onFocus","onPress","toggle","_c"],"sources":["../../../src/components/select/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref, RefObject } from 'react'\nimport type { HostInstance, StyleProp, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key } from 'react-stately'\nimport type { ListProps as StatelyListProps } from 'react-stately/useListState'\nimport type {\n  ChangeValueType,\n  SelectionMode,\n  SelectState,\n  ValueType,\n} from 'react-stately/useSelectState'\n\nimport { useId, useRef, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport Animated from 'react-native-reanimated'\nimport { useSelectState } from 'react-stately/useSelectState'\n\nimport type { FieldTriggerProps, FieldVariant } from '../../field'\nimport type { ValidationResult } from '../../form'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { CollectionView, focusKeyOf } from '../../collection'\nimport {\n  describedBy,\n  FieldBox,\n  FieldChevron,\n  FieldMessage,\n  FieldValue,\n} from '../../field'\nimport { useFieldValidation } from '../../form'\nimport { listFor } from '../../i18n'\nimport { useLocaleOf, useMessages } from '../../i18n/provider'\nimport { Overlay, useAnchoredPlacement } from '../../overlay'\nimport {\n  DismissLayer,\n  PANEL_ORIGINS,\n  useBackToClose,\n  useFocusOnPlaced,\n  usePanelMotion,\n  useReturnFocus,\n} from '../../overlay/panel'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's Select, the menus page's exposed dropdown menu: a field that\n// opens a list rather than taking a keystroke. Everything above the list is\n// the field chrome in src/field, the box, the label, the supporting line and\n// the error every field here draws, and the list is ListBox's, through\n// src/collection, on the surface every anchored panel here draws, placed by\n// src/overlay. What is here is React Stately's select state around the two,\n// and the things that are this component's own, which are web's.\n//\n// **The whole box opens the list.** The box is the control, a button a\n// screen reader reads as the label and then the value, so its padding, its\n// label and its icons all open the list, as the page draws it and as web's\n// does. Web's names its button the other way round, the value first, but its\n// label sits outside the button; here the label is inside it, drawn before\n// the value, and a name that reads what the box draws in the order it draws\n// it is what WCAG's label in name asks for.\n//\n// **The chevron turns.** The page's trailing icon points down while the list\n// is closed and up while it is open, turned on the step the list arrives on,\n// as src/field's chevron turns for every field that opens a list.\n//\n// **The list is the field's width**, under the field, and above it where the\n// window has no room below. It grows from the edge facing the field, as\n// every anchored panel here does, on surface container low with the\n// extra-small corner and the second elevation. A press outside it closes it,\n// as do Android's back gesture and VoiceOver's escape gesture.\n//\n// **A screen reader is sent to the chosen option as the list opens**, or to\n// the first option that takes a press where nothing is chosen, and back to\n// the field as it closes. A list taller than its room opens scrolled to the\n// chosen option.\n//\n// The value shown is each chosen option's `textValue`, its headline where\n// that is a string, and the chosen options' values joined into a list in the\n// locale's words where several are chosen. Where nothing is, the box shows\n// `placeholder`, or \"Select an item\" in the locale's words, React Aria's.\n//\n// Two things web's has that this does not, each because React Native has no\n// counterpart. A keyboard on web moves through the options and picks one by\n// typing its first letters; on a phone the list is touched or read by a\n// screen reader, which moves through it itself. And web's box tells a screen\n// reader it opens a listbox; React Native has neither the popup property nor\n// the listbox role, so the box is a button that says whether its list is\n// expanded, and the options are buttons that say whether they are chosen.\n\ntype SelectListProps = {\n  readonly anchor: RefObject<HostInstance | null>\n  readonly isOpen: boolean\n  readonly label: string\n  readonly setPresent: (present: boolean) => void\n  readonly state: SelectState<object, SelectionMode>\n}\n\ntype SelectProps<M extends SelectionMode = 'single'> = {\n  /**\n   * Lets the list open with no options in it, showing its empty state.\n   * Left off, a press on a select with no options does nothing.\n   * @default false\n   */\n  readonly allowsEmptyCollection?: boolean\n  /** Whether the list is open at first, when the select keeps its own. */\n  readonly defaultOpen?: boolean\n  /**\n   * What is chosen at first, when the select keeps its own value: an\n   * option's `id`, or a list of them with `selectionMode=\"multiple\"`.\n   */\n  readonly defaultValue?: ValueType<M>\n  /**\n   * A hint shown under the field. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  readonly description?: string\n  /** The `id`s of the options drawn disabled, which take no presses. */\n  readonly disabledKeys?: Iterable<Key>\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state: the message, the error colours, and the\n   * error a screen reader reads with the field all follow from it. The line\n   * under the field arrives with the message, so the field grows when this\n   * does, unless it is inside a `Form`, which keeps the line drawn. It wins\n   * over what `validate` and the form say, and holds a `native` form back.\n   */\n  readonly error?: string\n  /**\n   * Whether the label sits in the empty box and floats to the top once the\n   * list is open or something is chosen. `false` keeps it small at the top\n   * in every state.\n   * @default true\n   */\n  readonly floatingLabel?: boolean\n  /**\n   * Draws the field disabled: it takes no presses and its list never opens.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Whether the list is open, when the call site holds it. */\n  readonly isOpen?: boolean\n  /**\n   * Marks the label with an asterisk, as the text fields page marks a field\n   * that must be filled. Inside a `native` form, a field left empty holds\n   * the form back.\n   * @default false\n   */\n  readonly isRequired?: boolean\n  /**\n   * What the field is for, and the name a screen reader reads for it before\n   * its value. Required, since a select with no label is a box nobody can\n   * name.\n   */\n  readonly label: string\n  /**\n   * An icon at the start of the box, before the label and the value: the\n   * page's 24dp leading icon, in the muted role. The slot hands it that\n   * colour and size through `useIconStyle()`.\n   */\n  readonly leadingIcon?: ReactNode\n  /**\n   * The name the value is submitted under by the `Form` around the field,\n   * and the key its `validationErrors` reach the field by. A select with\n   * nothing chosen submits an empty string, and one choosing several\n   * submits the list of their `id`s.\n   */\n  readonly name?: string\n  /**\n   * Called with what is chosen whenever it changes: an option's `id`, or\n   * the list of them with `selectionMode=\"multiple\"`.\n   */\n  readonly onChange?: (value: ChangeValueType<M>) => void\n  /** Called with whether the list is open whenever that changes. */\n  readonly onOpenChange?: (isOpen: boolean) => void\n  /**\n   * The options, a `ListBox.Item` for each and `ListBox.Section` to group\n   * them. The list is a ListBox's, and draws every slot one does. Give\n   * every option an `id`, which is what the value holds.\n   */\n  readonly options?: ReactNode\n  /**\n   * What the box shows while nothing is chosen. Left out, it is \"Select an\n   * item\" in the `I18nProvider`'s language, or the device's outside one.\n   */\n  readonly placeholder?: string\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether one option is chosen, or several. A select choosing several\n   * stays open as they are pressed.\n   * @default 'single'\n   */\n  readonly selectionMode?: M\n  /**\n   * Whether a press on an option closes the list.\n   * @default true with one option chosen, false with several\n   */\n  readonly shouldCloseOnSelect?: boolean\n  /** Positions and sizes the field as a whole. */\n  readonly style?: StyleProp<ViewStyle>\n  /** The test id of the box, which is the control. */\n  readonly testID?: string\n  /**\n   * Checks the value, and returns its problem in words, or several, where\n   * there is one, and `true`, `null` or `undefined` where there is none.\n   * Under the default `aria` validation the error shows as the value\n   * changes; inside a `native` form it shows once a submission is tried, or\n   * once something is chosen, and holds the form back.\n   */\n  readonly validate?: (value: ValueType<M>) => ValidationResult\n  /** What is chosen, when the call site holds it. */\n  readonly value?: ValueType<M>\n  /**\n   * The filled box, or the outlined one, as the text fields page draws them.\n   * @default 'filled'\n   */\n  readonly variant?: FieldVariant\n}\n\n// The list never grows past its room, and the rows scroll inside it.\nconst SHRINKS: ViewStyle = { flexGrow: 0 }\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }: ResolvedTheme) =>\n  StyleSheet.create({\n    // The menus page's list surface: surface container low, the\n    // extra-small corner and the second elevation, clipping its rows to\n    // the corner.\n    list: {\n      backgroundColor: colors.surfaceContainerLow,\n      borderRadius: radii.xs,\n      boxShadow: shadows.elevation2,\n      overflow: 'hidden',\n    },\n  }),\n)\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isOpen`.\nfunction chevronFor(isOpen: boolean) {\n  return <FieldChevron isOpen={isOpen} />\n}\n\n// The keys a select's value holds, one or several, as a list.\nfunction keysOf(value: Key | null | readonly Key[]): readonly Key[] {\n  if (value === null) {\n    return []\n  }\n\n  return typeof value === 'object' ? value : [value]\n}\n\n/**\n * A labelled field that opens a list to choose from. Pass `value` with\n * `onChange` to hold what is chosen, or `defaultValue` to let the select\n * keep its own. The value is an option's `id`, so give every option one;\n * with `selectionMode=\"multiple\"` it is a list of them.\n *\n * ```tsx\n * <Select\n *   label=\"Label\"\n *   options={[\n *     <ListBox.Item id=\"first\" key=\"first\">First item</ListBox.Item>,\n *     <ListBox.Item id=\"second\" key=\"second\">Second item</ListBox.Item>,\n *   ]}\n * />\n * ```\n *\n * The box, the label, the supporting line and the error are the field chrome\n * every field here draws; the list is a ListBox's, on the surface every\n * anchored panel here draws. `style` and `ref` are the field as a whole, and\n * `testID` the box.\n */\nfunction Select<M extends SelectionMode = 'single'>({\n  allowsEmptyCollection,\n  defaultOpen,\n  defaultValue,\n  description,\n  disabledKeys,\n  error,\n  floatingLabel = true,\n  isDisabled = false,\n  isOpen,\n  isRequired = false,\n  label,\n  leadingIcon,\n  name,\n  onChange,\n  onOpenChange,\n  options,\n  placeholder,\n  ref,\n  selectionMode,\n  shouldCloseOnSelect,\n  style,\n  testID,\n  validate,\n  value,\n  variant = 'filled',\n}: SelectProps<M>) {\n  const id = useId()\n  const box = useRef<HostInstance>(null)\n  const [focused, setFocused] = useState(false)\n  const messages = useMessages()\n  const locale = useLocaleOf(undefined)\n  const state = useSelectState<object, M>({\n    allowsEmptyCollection,\n    // Each option builds its own entry in the collection, as a ListBox's\n    // does. The collection skips what is not an element, as a ReactNode may\n    // be, and asks any element for its entry.\n    // oxlint-disable-next-line typescript/no-unsafe-type-assertion -- see above\n    children: options as StatelyListProps<object>['children'],\n    defaultOpen,\n    defaultValue,\n    disabledKeys,\n    isDisabled,\n    isOpen,\n    onChange: (changed) => {\n      // A choice is made once, rather than typed, so it is committed as it\n      // lands, as a checkbox group commits a tick.\n      validation.onEdit()\n      validation.onBlur()\n      onChange?.(changed)\n    },\n    onOpenChange,\n    selectionMode,\n    shouldCloseOnSelect,\n    value,\n  })\n  const chosen = keysOf(state.value)\n  const several = state.selectionManager.selectionMode === 'multiple'\n  const validation = useFieldValidation({\n    control: box,\n    error,\n    isDisabled,\n    isEmpty: chosen.length === 0,\n    isReadOnly: false,\n    isRequired,\n    name,\n    submitted: several ? chosen.map(String) : String(chosen[0] ?? ''),\n    validate,\n    value: state.value,\n  })\n  const shownError = validation.error\n  const isPlaceholder = state.selectedItems.length === 0\n  const shown = isPlaceholder\n    ? (placeholder ?? messages.selectPlaceholder)\n    : listFor(\n        state.selectedItems.map((item) => item.textValue),\n        locale,\n      )\n\n  return (\n    <View ref={ref} style={style}>\n      <FieldBox\n        floatingLabel={floatingLabel}\n        isDisabled={isDisabled}\n        // The list takes the reader away from the box while it is open, so\n        // the box is told it is focused then, or its label would fall back\n        // onto the placeholder.\n        isFocused={state.isOpen || focused}\n        isInvalid={shownError !== undefined}\n        isPopulated={!isPlaceholder}\n        isRequired={isRequired}\n        label={label}\n        leading={leadingIcon}\n        ref={box}\n        trailing={chevronFor(state.isOpen)}\n        trigger={triggerFor(state, {\n          described: describedBy(id, { description, error: shownError }),\n          name: `${label} ${shown}`,\n          setFocused,\n          testID,\n        })}\n        variant={variant}\n      >\n        <FieldValue isPlaceholder={isPlaceholder}>{shown}</FieldValue>\n      </FieldBox>\n      <FieldMessage description={description} error={shownError} id={id} />\n      <SelectPopup anchor={box} label={label} state={state} />\n    </View>\n  )\n}\n\n/**\n * The list, drawn in the overlay host above the screen and placed under the\n * box: as wide as the box, flipped above it at the edge of the window, and\n * scrolled to the option a screen reader is sent to once it has been placed.\n */\nfunction SelectList({\n  anchor,\n  isOpen,\n  label,\n  setPresent,\n  state,\n}: SelectListProps) {\n  const styles = stylesOf(useTheme())\n  const placement = useAnchoredPlacement({ align: 'start', anchor })\n  const motion = usePanelMotion(isOpen, placement.placed, setPresent)\n  const [panel, setPanel] = useState<HostInstance | null>(null)\n  const [option, setOption] = useState<HostInstance | null>(null)\n  // oxlint-disable-next-line typescript/unbound-method -- React Stately's `close` is a callback, and reads no `this`\n  const close = state.close\n\n  useBackToClose(close, isOpen)\n  // Only while open: a choice moves the focus key to the option just chosen\n  // as the list leaves, and the reader belongs back at the box by then.\n  useFocusOnPlaced(isOpen && placement.placed, option ?? panel)\n\n  return (\n    <>\n      {isOpen ? <DismissLayer onPress={close} /> : null}\n      <Animated.View\n        onAccessibilityEscape={close}\n        onLayout={placement.onLayout}\n        ref={setPanel}\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.list,\n          { width: placement.anchorWidth },\n          placement.style,\n          { transformOrigin: PANEL_ORIGINS[placement.side] },\n          motion,\n        )}\n      >\n        <CollectionView\n          aria-label={label}\n          focusKey={focusKeyOf(state)}\n          kind=\"listbox\"\n          onFocusTarget={setOption}\n          revealFocus={placement.placed}\n          state={state}\n          style={SHRINKS}\n        />\n      </Animated.View>\n    </>\n  )\n}\n\n/**\n * The list while it is open and while its exit runs: mounted the moment the\n * select opens, and kept until the list has faded out. A screen reader goes\n * back to the box once it has gone.\n */\nfunction SelectPopup({\n  anchor,\n  label,\n  state,\n}: Omit<SelectListProps, 'isOpen' | 'setPresent'>) {\n  const [present, setPresent] = useState(state.isOpen)\n\n  if (state.isOpen && !present) {\n    setPresent(true)\n  }\n\n  useReturnFocus(present, false, anchor)\n\n  if (!present) {\n    return null\n  }\n\n  return (\n    <Overlay>\n      <SelectList\n        anchor={anchor}\n        isOpen={state.isOpen}\n        label={label}\n        setPresent={setPresent}\n        state={state}\n      />\n    </Overlay>\n  )\n}\n\n/**\n * The box as the select's control: named by its label and what it shows,\n * described by the line under it, saying whether its list is open, and\n * opening or closing the list when pressed. It tracks its own focus, for a\n * keyboard reaching it, which the box draws as it draws a focused field.\n */\nfunction triggerFor(\n  state: SelectState<object, SelectionMode>,\n  {\n    described,\n    name,\n    setFocused,\n    testID,\n  }: {\n    readonly described: FieldTriggerProps['described']\n    readonly name: string\n    readonly setFocused: (focused: boolean) => void\n    readonly testID: string | undefined\n  },\n): FieldTriggerProps {\n  return {\n    'aria-expanded': state.isOpen,\n    'aria-label': name,\n    described,\n    onBlur: () => {\n      setFocused(false)\n    },\n    onFocus: () => {\n      setFocused(true)\n    },\n    onPress: () => {\n      state.toggle()\n    },\n    testID,\n  }\n}\n\nexport { Select }\nexport type { SelectProps }\n"],"mappings":"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"}

package/dist/components/separator/index.d.ts

@@ -13,7 +13,8 @@ type SeparatorProps = ViewProps & {
   readonly inset?: SeparatorInset;
   /**
    * Which way the rule runs. A rule takes its length from its parent: a
-   * horizontal one spans a column, and a vertical one a row.
+   * horizontal one spans a column, and a vertical one a row. Inside a
+   * `Toolbar` it runs across the bar unless this says otherwise.
    * @default 'horizontal'
    */
   readonly orientation?: 'horizontal' | 'vertical';
@@ -39,7 +40,7 @@ type SeparatorProps = ViewProps & {
  * iOS nor Android has. `style`, `ref` and `testID` land on the `View`, and a
  * `style` there applies over the rule's own.
  */
-declare function Separator({ inset, orientation, style, ...props }: SeparatorProps): import("react").JSX.Element;
+declare function Separator({ inset, orientation: own, style, ...props }: SeparatorProps): import("react").JSX.Element;
 //#endregion
 export { Separator, type SeparatorInset, type SeparatorProps };
 //# sourceMappingURL=index.d.ts.map