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

package/dist/segments/index.js

@@ -0,0 +1,574 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles } from "../theme/styles.js";
+import { useTypeRole } from "../typography/roles.js";
+import { startsWithIn } from "../autocomplete/index.js";
+import { messagesFor } from "../i18n/index.js";
+import { FieldSegments, descriptionOf } from "../field/index.js";
+import { NumberParser } from "../number/parser.js";
+import { segmentStylesOf } from "./styles.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Platform, Pressable, StyleSheet, Text, TextInput } from "react-native";
+import { createElement, useEffect, useEffectEvent, useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CalendarDate, DateFormatter, toCalendar } from "@internationalized/date";
+//#region src/segments/index.tsx
+const ADJUSTABLE = [{ name: "increment" }, { name: "decrement" }];
+const INVISIBLE = /[\s\u061C\u200E\u200F\u202A-\u202E\u2066-\u2069]/gu;
+const SENTINEL = " ";
+const AFTER_SENTINEL = {
+	end: 1,
+	start: 1
+};
+const NUMERIC = /* @__PURE__ */ new Set([
+	"day",
+	"hour",
+	"minute",
+	"month",
+	"second",
+	"year"
+]);
+const styles = StyleSheet.create({
+	input: {
+		height: 1,
+		opacity: 0,
+		position: "absolute",
+		start: 0,
+		top: 0,
+		width: 1
+	},
+	notDrawn: { display: "none" }
+});
+function actionOf(line, segment) {
+	return (event) => {
+		const { actionName } = event.nativeEvent;
+		if (actionName === "increment" || actionName === "decrement") stepKey(line, segment, actionName);
+	};
+}
+function arrivedIn({ inside, onFocus }) {
+	if (!inside.current) {
+		inside.current = true;
+		onFocus?.();
+	}
+}
+function changedOf(line) {
+	return (text) => {
+		const segment = line.state.segments.find((each) => each.type === line.active);
+		if (segment === void 0) return;
+		if (text.length < 1) {
+			eraseKey(line, segment);
+			return;
+		}
+		const point = text.replace(SENTINEL, "").codePointAt(0);
+		if (point !== void 0) typeKey(line, segment, String.fromCodePoint(point));
+	};
+}
+function commonPrefixLength(texts) {
+	const sorted = texts.toSorted();
+	const first = sorted.at(0) ?? "";
+	const last = sorted.at(-1) ?? "";
+	let length = 0;
+	while (length < first.length && first[length] === last[length]) length++;
+	return length;
+}
+/**
+* A date or a time's segments, inside a field's box, from React Stately's
+* date field state: each part of the value typed or stepped on its own, the
+* one being typed drawn as a filled shape and the empty ones in their
+* placeholders, muted.
+*/
+function DateSegments(t0) {
+	const $ = c(18);
+	let onActiveChange;
+	let props;
+	let ref;
+	if ($[0] !== t0) {
+		({onActiveChange, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = onActiveChange;
+		$[2] = props;
+		$[3] = ref;
+	} else {
+		onActiveChange = $[1];
+		props = $[2];
+		ref = $[3];
+	}
+	const [active, setActive] = useState(null);
+	const entered = useRef("");
+	const inside = useRef(false);
+	const input = useRef(null);
+	let t1;
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ new Map();
+		$[4] = t1;
+	} else t1 = $[4];
+	const nodes = useRef(t1);
+	const { drawing, state } = props;
+	let t2;
+	if ($[5] !== onActiveChange) {
+		t2 = (type) => {
+			onActiveChange?.(type);
+		};
+		$[5] = onActiveChange;
+		$[6] = t2;
+	} else t2 = $[6];
+	const reportActive = useEffectEvent(t2);
+	let t3;
+	if ($[7] !== active || $[8] !== reportActive) {
+		t3 = () => {
+			reportActive(active);
+		};
+		$[7] = active;
+		$[8] = reportActive;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== active) {
+		t4 = [active];
+		$[10] = active;
+		$[11] = t4;
+	} else t4 = $[11];
+	useEffect(t3, t4);
+	let t5;
+	if ($[12] !== drawing || $[13] !== state) {
+		t5 = () => ({
+			focus: () => {
+				const first = state.segments.find((segment) => typedInto(drawing, segment));
+				if (!inside.current && first !== void 0) focusTo({
+					entered,
+					input,
+					nodes,
+					setActive,
+					state
+				}, first.type);
+			},
+			focusLast: () => {
+				const last = state.segments.findLast((segment_0) => typedInto(drawing, segment_0));
+				if (last !== void 0) focusTo({
+					entered,
+					input,
+					nodes,
+					setActive,
+					state
+				}, last.type);
+			},
+			focusOn: (type_0, keyboard) => {
+				focusTo({
+					entered,
+					input,
+					nodes,
+					setActive,
+					state
+				}, type_0, keyboard);
+			}
+		});
+		$[12] = drawing;
+		$[13] = state;
+		$[14] = t5;
+	} else t5 = $[14];
+	useImperativeHandle(ref, t5);
+	let t6;
+	if ($[15] !== active || $[16] !== props) {
+		t6 = /* @__PURE__ */ jsx(SegmentLine, {
+			...props,
+			active,
+			entered,
+			input,
+			inside,
+			nodes,
+			setActive
+		});
+		$[15] = active;
+		$[16] = props;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
+}
+function dayPeriodsOf(locale) {
+	const formatter = new DateFormatter(locale, {
+		hour: "numeric",
+		hour12: true
+	});
+	const periodAt = (hours) => {
+		const date = /* @__PURE__ */ new Date();
+		date.setHours(hours);
+		return formatter.formatToParts(date).find((part) => part.type === "dayPeriod")?.value ?? "";
+	};
+	return [periodAt(0), periodAt(12)];
+}
+function drawn(drawing, segment) {
+	if (drawing === void 0) return true;
+	return segment.type === "literal" ? segment.text.replaceAll(INVISIBLE, "") !== "" : drawing.parts.has(segment.type);
+}
+function edited({ onEdit }, changed) {
+	if (changed) onEdit?.();
+}
+function eraseFrom(state, segment, locale, entered, moves) {
+	if (state.isDisabled || state.isReadOnly) return false;
+	if (segment.text === segment.placeholder) moves.previous();
+	const parser = new NumberParser(locale, { maximumFractionDigits: 0 });
+	if (parser.isValidPartialNumber(segment.text) && !segment.isPlaceholder) {
+		const shortened = segment.text.slice(0, -1);
+		const parsed = parser.parse(shortened);
+		const kept = parsed === 0 ? "" : shortened;
+		if (kept === "") state.clearSegment(segment.type);
+		else state.setSegment(segment.type, parsed);
+		entered.current = kept;
+		return true;
+	}
+	if (segment.type === "dayPeriod" || segment.type === "era") {
+		state.clearSegment(segment.type);
+		return true;
+	}
+	return false;
+}
+function eraseKey(line, segment) {
+	edited(line, eraseFrom(line.state, segment, line.locale, line.entered, movesFrom(line, segment.type)));
+}
+function erasOf(calendar, locale) {
+	const formatter = new DateFormatter(locale, {
+		era: "narrow",
+		timeZone: "UTC",
+		year: "numeric"
+	});
+	const first = toCalendar(new CalendarDate(1, 1, 1), calendar);
+	const eras = calendar.getEras().map((era) => {
+		const date = first.set({
+			day: 1,
+			era,
+			month: 1,
+			year: 1
+		}).toDate("UTC");
+		return {
+			era,
+			formatted: formatter.formatToParts(date).find((part) => part.type === "era")?.value ?? era
+		};
+	});
+	const prefix = commonPrefixLength(eras.map((era) => era.formatted));
+	return eras.map(({ era, formatted }) => ({
+		era,
+		formatted: formatted.slice(prefix)
+	}));
+}
+function focusTo({ entered, input, nodes, setActive, state }, type, keyboard = true) {
+	entered.current = "";
+	if (Platform.OS === "web") {
+		nodes.current.get(type)?.focus();
+		return;
+	}
+	if (!keyboard) {
+		setActive(type);
+		input.current?.blur();
+		return;
+	}
+	if (state.isReadOnly) return;
+	setActive(type);
+	input.current?.focus();
+}
+function hidesEra(state, era) {
+	return state.calendar.identifier === "gregory" && era !== "BC";
+}
+function inputFocusedOf(line) {
+	return () => {
+		const first = line.state.segments.find((segment) => typedInto(line.drawing, segment))?.type ?? null;
+		line.setActive((current) => current ?? first);
+		arrivedIn(line);
+	};
+}
+function inputOf({ input }) {
+	return (node) => {
+		input.current = node;
+	};
+}
+function leftOf({ entered, inside, onBlur, setActive, state }) {
+	return () => {
+		inside.current = false;
+		entered.current = "";
+		setActive(null);
+		state.confirmPlaceholder();
+		onBlur?.();
+	};
+}
+function movesFrom(line, type) {
+	const editable = line.state.segments.filter((segment) => typedInto(line.drawing, segment));
+	const at = editable.findIndex((segment) => segment.type === type);
+	const to = (index, beyond) => () => {
+		const segment = index < 0 ? void 0 : editable.at(index);
+		if (segment === void 0) beyond?.();
+		else focusTo(line, segment.type);
+	};
+	return {
+		away: to(at > 0 ? at - 1 : at + 1),
+		next: to(at + 1, line.onPastEnd),
+		previous: to(at - 1, line.onBeforeStart)
+	};
+}
+function nameOf(type) {
+	return type === "literal" ? "day" : type;
+}
+function nodeOf({ nodes }, type) {
+	return (node) => {
+		if (node === null) return;
+		nodes.current.set(type, node);
+		return () => {
+			nodes.current.delete(type);
+		};
+	};
+}
+function pressOf(line, type) {
+	return () => {
+		focusTo(line, type, line.drawing?.raisesKeyboard ?? true);
+	};
+}
+function relatedTargetOf(event) {
+	return typeof event === "object" && event !== null && "relatedTarget" in event ? event.relatedTarget : void 0;
+}
+function SegmentLine(line) {
+	const $ = c(15);
+	const { active, described, drawing, isInvalid, label, locale, state } = line;
+	const id = useId();
+	const theme = useTheme();
+	const own = segmentStylesOf(theme);
+	const role = useTypeRole("bodyLarge");
+	const words = messagesFor(locale).segments;
+	let t0;
+	if ($[0] !== drawing || $[1] !== state.segments) {
+		let t1;
+		if ($[3] !== drawing) {
+			t1 = (segment) => typedInto(drawing, segment);
+			$[3] = drawing;
+			$[4] = t1;
+		} else t1 = $[4];
+		t0 = state.segments.find(t1);
+		$[0] = drawing;
+		$[1] = state.segments;
+		$[2] = t0;
+	} else t0 = $[2];
+	const first = t0;
+	const value = line.holding ?? valueOf(state, words);
+	const valueId = `${id}-value`;
+	const parts = value === "" ? described : [{
+		id: valueId,
+		text: value
+	}, ...described];
+	const canEdit = !state.isDisabled && !state.isReadOnly;
+	const T0 = FieldSegments;
+	const t1 = state.segments.map((segment_0, index) => {
+		if (!drawn(drawing, segment_0)) return null;
+		if (!segment_0.isEditable) return /* @__PURE__ */ jsx(Text, {
+			"aria-hidden": segment_0.type === "literal",
+			style: drawing === void 0 ? composeStyles(role, segment_0.type === "literal" ? void 0 : own.segment, state.isDisabled ? own.textDisabled : segment_0.type === "literal" ? own.textMuted : own.text) : drawing.literal,
+			children: segment_0.text
+		}, `${segment_0.type}-${index}`);
+		const focused = segment_0.type === active;
+		const describes = isInvalid || segment_0.type === first?.type;
+		return /* @__PURE__ */ createElement(Pressable, {
+			...Platform.OS === "web" ? webPropsOf(line, segment_0) : void 0,
+			...describes ? descriptionOf(parts) : void 0,
+			...webStateOf(isInvalid, state),
+			accessibilityActions: canEdit ? ADJUSTABLE : void 0,
+			accessibilityRole: Platform.OS === "web" ? void 0 : "adjustable",
+			"aria-disabled": state.isDisabled,
+			"aria-label": `${words[nameOf(segment_0.type)]}, ${label}`,
+			"aria-valuemax": segment_0.maxValue,
+			"aria-valuemin": segment_0.minValue,
+			"aria-valuenow": segment_0.value ?? void 0,
+			"aria-valuetext": valueTextOf(segment_0, state, locale, words.empty),
+			disabled: state.isDisabled,
+			key: segment_0.type,
+			onAccessibilityAction: actionOf(line, segment_0),
+			onPress: Platform.OS === "web" ? void 0 : pressOf(line, segment_0.type),
+			ref: nodeOf(line, segment_0.type),
+			role: Platform.OS === "web" ? "spinbutton" : void 0,
+			style: drawing === void 0 ? composeStyles(own.segment, focused ? own.segmentFocused : void 0) : drawing.box(segment_0.type, focused)
+		}, /* @__PURE__ */ jsx(Text, {
+			style: drawing === void 0 ? composeStyles(role, textStyleOf(own, segment_0, focused, state.isDisabled)) : drawing.text(segment_0.type, focused),
+			children: segment_0.text
+		}));
+	});
+	let t2;
+	if ($[5] !== active || $[6] !== canEdit || $[7] !== line || $[8] !== value || $[9] !== valueId) {
+		t2 = Platform.OS === "web" ? value === "" ? null : /* @__PURE__ */ jsx(Text, {
+			id: valueId,
+			style: styles.notDrawn,
+			children: value
+		}) : /* @__PURE__ */ jsx(TextInput, {
+			"aria-hidden": true,
+			autoCapitalize: "none",
+			autoComplete: "off",
+			autoCorrect: false,
+			caretHidden: true,
+			contextMenuHidden: true,
+			editable: canEdit,
+			importantForAutofill: "no",
+			keyboardType: active === null || NUMERIC.has(active) ? "number-pad" : "default",
+			onBlur: leftOf(line),
+			onChangeText: changedOf(line),
+			onFocus: inputFocusedOf(line),
+			ref: inputOf(line),
+			selection: AFTER_SENTINEL,
+			spellCheck: false,
+			style: styles.input,
+			value: SENTINEL
+		});
+		$[5] = active;
+		$[6] = canEdit;
+		$[7] = line;
+		$[8] = value;
+		$[9] = valueId;
+		$[10] = t2;
+	} else t2 = $[10];
+	let t3;
+	if ($[11] !== T0 || $[12] !== t1 || $[13] !== t2) {
+		t3 = /* @__PURE__ */ jsxs(T0, { children: [t1, t2] });
+		$[11] = T0;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+	} else t3 = $[14];
+	return t3;
+}
+function stepBy(state, segment, by, entered) {
+	if (state.isDisabled || state.isReadOnly) return false;
+	entered.current = "";
+	state[by](segment.type);
+	return true;
+}
+function stepKey(line, segment, by) {
+	const changed = stepBy(line.state, segment, by, line.entered);
+	if (changed && segment.type === "era" && line.active === "era" && hidesEra(line.state, "AD")) movesFrom(line, "era").away();
+	edited(line, changed);
+}
+function textStyleOf(own, segment, focused, isDisabled) {
+	if (isDisabled) return own.textDisabled;
+	if (focused) return own.textFocused;
+	return segment.isPlaceholder ? own.textMuted : own.text;
+}
+function typedInto(drawing, segment) {
+	return segment.isEditable && drawn(drawing, segment);
+}
+function typeInto(state, segment, key, locale, entered, moves) {
+	if (state.isDisabled || state.isReadOnly) return false;
+	const startsWith = startsWithIn(locale);
+	switch (segment.type) {
+		case "day":
+		case "hour":
+		case "minute":
+		case "month":
+		case "second":
+		case "year": {
+			const parser = new NumberParser(locale, { maximumFractionDigits: 0 });
+			const typed = entered.current + key;
+			if (!parser.isValidPartialNumber(typed)) return false;
+			const number = parser.parse(typed);
+			if (Number.isNaN(number)) return false;
+			const { maxValue } = segment;
+			const over = maxValue !== void 0 && number > maxValue;
+			state.setSegment(segment.type, over ? parser.parse(key) : number);
+			if (maxValue !== void 0 && (Number(`${number}0`) > maxValue || typed.length >= String(maxValue).length)) {
+				entered.current = "";
+				moves.next();
+			} else entered.current = typed;
+			return true;
+		}
+		case "dayPeriod": {
+			const [am, pm] = dayPeriodsOf(locale);
+			if (startsWith(am, key)) state.setSegment("dayPeriod", 0);
+			else if (startsWith(pm, key)) state.setSegment("dayPeriod", 1);
+			else return false;
+			moves.next();
+			return true;
+		}
+		case "era": {
+			const matched = erasOf(state.calendar, locale).find((era) => startsWith(era.formatted, key));
+			if (matched === void 0) return false;
+			state.setSegment("era", matched.era);
+			if (hidesEra(state, matched.era)) moves.away();
+			else moves.next();
+			return true;
+		}
+	}
+	return false;
+}
+function typeKey(line, segment, key) {
+	edited(line, typeInto(line.state, segment, key, line.locale, line.entered, movesFrom(line, segment.type)));
+}
+function valueOf(state, words) {
+	if (state.value === null) return "";
+	const written = state.formatValue({ month: "long" });
+	return state.maxGranularity === "hour" ? words.selectedTime.replace("{time}", written) : words.selectedDate.replace("{date}", written);
+}
+function valueTextOf(segment, state, locale, empty) {
+	if (segment.isPlaceholder) return empty;
+	const { hour12, timeZone } = state.dateFormatter.resolvedOptions();
+	if (segment.type === "month") {
+		const month = new DateFormatter(locale, {
+			month: "long",
+			timeZone
+		}).format(state.dateValue);
+		return month === segment.text ? month : `${segment.text} – ${month}`;
+	}
+	if (segment.type === "hour") return new DateFormatter(locale, {
+		hour: "numeric",
+		hour12,
+		timeZone
+	}).format(state.dateValue);
+	return segment.text;
+}
+function webPropsOf(line, segment) {
+	const moves = movesFrom(line, segment.type);
+	const step = (by) => () => {
+		stepKey(line, segment, by);
+	};
+	const erase = () => {
+		eraseKey(line, segment);
+	};
+	const keys = /* @__PURE__ */ new Map([
+		["ArrowDown", step("decrement")],
+		["ArrowLeft", I18nManager.isRTL ? moves.next : moves.previous],
+		["ArrowRight", I18nManager.isRTL ? moves.previous : moves.next],
+		["ArrowUp", step("increment")],
+		["Backspace", erase],
+		["Delete", erase],
+		["End", step("incrementToMax")],
+		["Home", step("decrementToMin")],
+		["PageDown", step("decrementPage")],
+		["PageUp", step("incrementPage")]
+	]);
+	return {
+		onBlur: (event) => {
+			const to = relatedTargetOf(event.nativeEvent);
+			if (![...line.nodes.current.values()].some((node) => node === to)) leftOf(line)();
+		},
+		onFocus: () => {
+			line.entered.current = "";
+			line.setActive(segment.type);
+			arrivedIn(line);
+		},
+		onKeyDown: (event) => {
+			const { altKey, ctrlKey, key, metaKey } = event.nativeEvent;
+			const handler = keys.get(key);
+			if (handler !== void 0) {
+				event.preventDefault();
+				handler();
+				return;
+			}
+			const point = key.codePointAt(0);
+			if (point !== void 0 && String.fromCodePoint(point) === key && !altKey && !ctrlKey && !metaKey) {
+				event.preventDefault();
+				typeKey(line, segment, key);
+			}
+		}
+	};
+}
+function webStateOf(isInvalid, state) {
+	if (Platform.OS !== "web") return;
+	return {
+		...isInvalid ? { "aria-invalid": true } : void 0,
+		...state.isReadOnly ? { "aria-readonly": true } : void 0,
+		...state.isRequired ? { "aria-required": true } : void 0
+	};
+}
+//#endregion
+export { DateSegments };
+
+//# sourceMappingURL=index.js.map