@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.1

package/dist/components/chip-group/index.js

@@ -0,0 +1,669 @@
+import { CloseGlyph } from "../../glyphs/index.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { AnimatedPressable, toggleState } from "../../button/index.js";
+import { usePressFeedback } from "../../press/index.js";
+import { stylesOf } from "../../chip/styles.js";
+import { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import Animated from "react-native-reanimated";
+import { useListState } from "react-stately/useListState";
+//#region src/components/chip-group/index.tsx
+const REMOVE_REACH = {
+	bottom: 3,
+	left: 3,
+	right: 3,
+	top: 3
+};
+const styles = StyleSheet.create({
+	chip: { maxWidth: "100%" },
+	layer: {
+		bottom: 0,
+		left: 0,
+		position: "absolute",
+		right: 0,
+		top: 0
+	}
+});
+const groupStylesOf = themedStyles(({ colors, radii, sizing, spacing, stateLayerOpacity }) => StyleSheet.create({
+	label: { color: colors.onSurfaceVariant },
+	labelError: { color: colors.error },
+	list: {
+		alignItems: "center",
+		flexDirection: "row",
+		flexWrap: "wrap",
+		gap: spacing.sm,
+		minHeight: sizing.controlXs
+	},
+	message: { color: colors.onSurfaceVariant },
+	messageError: { color: colors.error },
+	messageLine: { marginTop: spacing.xs },
+	removable: { paddingEnd: spacing.lg + 18 },
+	remove: {
+		alignItems: "center",
+		borderRadius: radii.circle,
+		end: 1 + spacing.lg - spacing.sm,
+		height: 18,
+		justifyContent: "center",
+		marginTop: -9,
+		position: "absolute",
+		top: "50%",
+		width: 18
+	},
+	removeHovered: { opacity: stateLayerOpacity.hover },
+	removeLayer: {
+		borderRadius: radii.circle,
+		opacity: 0
+	},
+	removePressed: { opacity: stateLayerOpacity.pressed },
+	root: {
+		flexDirection: "column",
+		rowGap: spacing.xs
+	}
+}));
+/**
+* A labelled set of chips, one or more of which can be chosen, each of which
+* can be removed. Selection is React Stately's: set `selectionMode` to
+* `single` or `multiple`, and pass `selectedKeys` with `onSelectionChange` to
+* control it, or `defaultSelectedKeys` to let the group keep its own.
+*
+* ```tsx
+* <ChipGroup label="Label" onRemove={remove} selectionMode="multiple">
+*   <ChipGroup.Chip id="first">First item</ChipGroup.Chip>
+* </ChipGroup>
+* ```
+*
+* Give the group `onRemove` and each chip draws a close target. A chip that
+* toggles nothing else is Chip; this is for a set that shares a value.
+*
+* A screen reader hears a group named by its label, and each chip as a button
+* named by its label, selected or not. On the web the line under the group
+* describes it, as web's does; on iOS and Android it is read after the chips,
+* where it sits. `style`, `ref` and `testID` land on the group as a whole,
+* which is the element a layout positions.
+*/
+function ChipGroup(t0) {
+	const $ = c(52);
+	let children;
+	let defaultSelectedKeys;
+	let description;
+	let disabledKeys;
+	let disallowEmptySelection;
+	let error;
+	let items;
+	let label;
+	let onRemove;
+	let onSelectionChange;
+	let props;
+	let renderEmptyState;
+	let selectedKeys;
+	let style;
+	let t1;
+	let t2;
+	if ($[0] !== t0) {
+		({children, defaultSelectedKeys, description, disabledKeys, disallowEmptySelection, error, items, label, onRemove, onSelectionChange, removeLabel: t1, renderEmptyState, selectedKeys, selectionMode: t2, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = defaultSelectedKeys;
+		$[3] = description;
+		$[4] = disabledKeys;
+		$[5] = disallowEmptySelection;
+		$[6] = error;
+		$[7] = items;
+		$[8] = label;
+		$[9] = onRemove;
+		$[10] = onSelectionChange;
+		$[11] = props;
+		$[12] = renderEmptyState;
+		$[13] = selectedKeys;
+		$[14] = style;
+		$[15] = t1;
+		$[16] = t2;
+	} else {
+		children = $[1];
+		defaultSelectedKeys = $[2];
+		description = $[3];
+		disabledKeys = $[4];
+		disallowEmptySelection = $[5];
+		error = $[6];
+		items = $[7];
+		label = $[8];
+		onRemove = $[9];
+		onSelectionChange = $[10];
+		props = $[11];
+		renderEmptyState = $[12];
+		selectedKeys = $[13];
+		style = $[14];
+		t1 = $[15];
+		t2 = $[16];
+	}
+	const removeLabel = t1 === void 0 ? "Remove" : t1;
+	const selectionMode = t2 === void 0 ? "none" : t2;
+	const theme = useTheme();
+	const t3 = children;
+	let t4;
+	if ($[17] !== defaultSelectedKeys || $[18] !== disabledKeys || $[19] !== disallowEmptySelection || $[20] !== items || $[21] !== onSelectionChange || $[22] !== selectedKeys || $[23] !== selectionMode || $[24] !== t3) {
+		t4 = {
+			children: t3,
+			defaultSelectedKeys,
+			disabledKeys,
+			disallowEmptySelection,
+			items,
+			onSelectionChange,
+			selectedKeys,
+			selectionMode
+		};
+		$[17] = defaultSelectedKeys;
+		$[18] = disabledKeys;
+		$[19] = disallowEmptySelection;
+		$[20] = items;
+		$[21] = onSelectionChange;
+		$[22] = selectedKeys;
+		$[23] = selectionMode;
+		$[24] = t3;
+		$[25] = t4;
+	} else t4 = $[25];
+	const state = useListState(t4);
+	const labelId = useId();
+	const messageId = useId();
+	const labelRole = useTypeRole("labelLarge");
+	const messageRole = useTypeRole("bodySmall");
+	let t5;
+	if ($[26] !== description || $[27] !== error || $[28] !== label || $[29] !== labelId || $[30] !== labelRole || $[31] !== messageId || $[32] !== messageRole || $[33] !== onRemove || $[34] !== props || $[35] !== removeLabel || $[36] !== renderEmptyState || $[37] !== state || $[38] !== style || $[39] !== theme) {
+		const own = groupStylesOf(theme);
+		const invalid = error !== void 0;
+		const message = error ?? description;
+		let t6;
+		if ($[41] !== state.collection) {
+			t6 = [...state.collection];
+			$[41] = state.collection;
+			$[42] = t6;
+		} else t6 = $[42];
+		const nodes = t6;
+		let t7;
+		if ($[43] !== message || $[44] !== messageId) {
+			t7 = lineOf(messageId, message);
+			$[43] = message;
+			$[44] = messageId;
+			$[45] = t7;
+		} else t7 = $[45];
+		let t8;
+		if ($[46] !== nodes || $[47] !== onRemove || $[48] !== removeLabel || $[49] !== renderEmptyState || $[50] !== state) {
+			t8 = nodes.length === 0 ? renderEmptyState?.() : nodes.map((node) => /* @__PURE__ */ jsx(GroupChip, {
+				node,
+				onRemove,
+				removeLabel,
+				state
+			}, node.key));
+			$[46] = nodes;
+			$[47] = onRemove;
+			$[48] = removeLabel;
+			$[49] = renderEmptyState;
+			$[50] = state;
+			$[51] = t8;
+		} else t8 = $[51];
+		t5 = /* @__PURE__ */ jsxs(View, {
+			...props,
+			"aria-labelledby": labelId,
+			role: "group",
+			...t7,
+			style: composeStyles(own.root, style),
+			children: [
+				/* @__PURE__ */ jsx(Text, {
+					id: labelId,
+					style: composeStyles(labelRole, own.label, invalid ? own.labelError : void 0),
+					children: label
+				}),
+				/* @__PURE__ */ jsx(View, {
+					style: own.list,
+					children: t8
+				}),
+				message === void 0 ? null : /* @__PURE__ */ jsx(View, {
+					style: own.messageLine,
+					children: /* @__PURE__ */ jsx(Text, {
+						id: messageId,
+						style: composeStyles(messageRole, own.message, invalid ? own.messageError : void 0),
+						children: message
+					})
+				})
+			]
+		});
+		$[26] = description;
+		$[27] = error;
+		$[28] = label;
+		$[29] = labelId;
+		$[30] = labelRole;
+		$[31] = messageId;
+		$[32] = messageRole;
+		$[33] = onRemove;
+		$[34] = props;
+		$[35] = removeLabel;
+		$[36] = renderEmptyState;
+		$[37] = state;
+		$[38] = style;
+		$[39] = theme;
+		$[40] = t5;
+	} else t5 = $[40];
+	return t5;
+}
+/**
+* One chip of a `ChipGroup`, which draws it: the group builds its set from
+* these, so one renders nothing on its own. Give every chip an `id`, which is
+* the key selection and removal report it by.
+*/
+function ChipGroupChip(_props) {
+	return null;
+}
+ChipGroupChip.getCollectionNode = function* getCollectionNode(props) {
+	yield {
+		"aria-label": props["aria-label"],
+		hasChildNodes: false,
+		key: props.id,
+		props,
+		rendered: props.children,
+		textValue: props.textValue ?? (typeof props.children === "string" ? props.children : ""),
+		type: "item"
+	};
+};
+/**
+* A chip as the group draws it, from its entry in the collection: the pill,
+* which is a button while the group selects, and the close target over its
+* end while the group removes.
+*/
+function GroupChip(t0) {
+	const $ = c(78);
+	const { node, onRemove, removeLabel, state } = t0;
+	const theme = useTheme();
+	let children;
+	let hitSlop;
+	let icon;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onLayout;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let style;
+	if ($[0] !== node.props) {
+		const { children: t1, hitSlop: t2, icon: t3, id: _id, isDisabled: _isDisabled, onBlur: t4, onFocus: t5, onHoverIn: t6, onHoverOut: t7, onLayout: t8, onPress: t9, onPressIn: t10, onPressOut: t11, style: t12, textValue: _textValue, ...t13 } = node.props;
+		children = t1;
+		hitSlop = t2;
+		icon = t3;
+		onBlur = t4;
+		onFocus = t5;
+		onHoverIn = t6;
+		onHoverOut = t7;
+		onLayout = t8;
+		onPress = t9;
+		onPressIn = t10;
+		onPressOut = t11;
+		style = t12;
+		props = t13;
+		$[0] = node.props;
+		$[1] = children;
+		$[2] = hitSlop;
+		$[3] = icon;
+		$[4] = onBlur;
+		$[5] = onFocus;
+		$[6] = onHoverIn;
+		$[7] = onHoverOut;
+		$[8] = onLayout;
+		$[9] = onPress;
+		$[10] = onPressIn;
+		$[11] = onPressOut;
+		$[12] = props;
+		$[13] = style;
+	} else {
+		children = $[1];
+		hitSlop = $[2];
+		icon = $[3];
+		onBlur = $[4];
+		onFocus = $[5];
+		onHoverIn = $[6];
+		onHoverOut = $[7];
+		onLayout = $[8];
+		onPress = $[9];
+		onPressIn = $[10];
+		onPressOut = $[11];
+		props = $[12];
+		style = $[13];
+	}
+	const [width, setWidth] = useState(48);
+	const { selectionManager } = state;
+	let isDisabled;
+	let selectable;
+	let selected;
+	let t1;
+	if ($[14] !== node.key || $[15] !== selectionManager || $[16] !== theme) {
+		isDisabled = selectionManager.isDisabled(node.key);
+		selectable = selectionManager.selectionMode !== "none";
+		selected = selectionManager.isSelected(node.key);
+		t1 = paintOf(theme, {
+			assist: false,
+			disabled: isDisabled,
+			elevated: false,
+			selected
+		});
+		$[14] = node.key;
+		$[15] = selectionManager;
+		$[16] = theme;
+		$[17] = isDisabled;
+		$[18] = selectable;
+		$[19] = selected;
+		$[20] = t1;
+	} else {
+		isDisabled = $[17];
+		selectable = $[18];
+		selected = $[19];
+		t1 = $[20];
+	}
+	const paint = t1;
+	const eased = useEasedColors(paint);
+	let t2;
+	if ($[21] !== theme.radii.sm) {
+		t2 = { borderRadius: theme.radii.sm };
+		$[21] = theme.radii.sm;
+		$[22] = t2;
+	} else t2 = $[22];
+	let t3;
+	if ($[23] !== isDisabled || $[24] !== onBlur || $[25] !== onFocus || $[26] !== onHoverIn || $[27] !== onHoverOut || $[28] !== onPressIn || $[29] !== onPressOut || $[30] !== paint.layer || $[31] !== t2) {
+		t3 = {
+			color: paint.layer,
+			corners: t2,
+			disabled: isDisabled,
+			onBlur,
+			onFocus,
+			onHoverIn,
+			onHoverOut,
+			onPressIn,
+			onPressOut
+		};
+		$[23] = isDisabled;
+		$[24] = onBlur;
+		$[25] = onFocus;
+		$[26] = onHoverIn;
+		$[27] = onHoverOut;
+		$[28] = onPressIn;
+		$[29] = onPressOut;
+		$[30] = paint.layer;
+		$[31] = t2;
+		$[32] = t3;
+	} else t3 = $[32];
+	const feedback = usePressFeedback(t3);
+	let t4;
+	if ($[33] !== eased.container || $[34] !== feedback.ring || $[35] !== onRemove || $[36] !== style || $[37] !== theme) {
+		t4 = composeStyles(stylesOf(theme).pill, eased.container, onRemove === void 0 ? void 0 : groupStylesOf(theme).removable, feedback.ring, style);
+		$[33] = eased.container;
+		$[34] = feedback.ring;
+		$[35] = onRemove;
+		$[36] = style;
+		$[37] = theme;
+		$[38] = t4;
+	} else t4 = $[38];
+	const pill = t4;
+	const t5 = selectable ? feedback.layer : null;
+	let t6;
+	if ($[39] !== icon || $[40] !== paint.glyph || $[41] !== selected) {
+		t6 = /* @__PURE__ */ jsx(ChipGlyph, {
+			color: paint.glyph,
+			icon,
+			selected
+		});
+		$[39] = icon;
+		$[40] = paint.glyph;
+		$[41] = selected;
+		$[42] = t6;
+	} else t6 = $[42];
+	let t7;
+	if ($[43] !== children || $[44] !== eased.label) {
+		t7 = /* @__PURE__ */ jsx(ChipLabel, {
+			color: eased.label,
+			children
+		});
+		$[43] = children;
+		$[44] = eased.label;
+		$[45] = t7;
+	} else t7 = $[45];
+	let t8;
+	if ($[46] !== t5 || $[47] !== t6 || $[48] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			t5,
+			t6,
+			t7
+		] });
+		$[46] = t5;
+		$[47] = t6;
+		$[48] = t7;
+		$[49] = t8;
+	} else t8 = $[49];
+	const content = t8;
+	let t9;
+	if ($[50] !== hitSlop || $[51] !== theme || $[52] !== width) {
+		t9 = hitSlop ?? targetOf(width, theme);
+		$[50] = hitSlop;
+		$[51] = theme;
+		$[52] = width;
+		$[53] = t9;
+	} else t9 = $[53];
+	const target = t9;
+	const t10 = selectable ? target : void 0;
+	let t11;
+	if ($[54] !== content || $[55] !== feedback.handlers || $[56] !== isDisabled || $[57] !== node.key || $[58] !== onLayout || $[59] !== onPress || $[60] !== pill || $[61] !== props || $[62] !== selectable || $[63] !== selected || $[64] !== state || $[65] !== target) {
+		t11 = selectable ? /* @__PURE__ */ jsx(AnimatedPressable, {
+			role: "button",
+			...toggleState(selected),
+			...props,
+			...feedback.handlers,
+			disabled: isDisabled,
+			hitSlop: target,
+			onLayout: measureThen(setWidth, onLayout),
+			onPress: selectThen(state, node.key, onPress),
+			style: pill,
+			children: content
+		}) : /* @__PURE__ */ jsx(Animated.View, {
+			...props,
+			"aria-disabled": isDisabled,
+			onLayout: onLayout ?? void 0,
+			style: pill,
+			children: content
+		});
+		$[54] = content;
+		$[55] = feedback.handlers;
+		$[56] = isDisabled;
+		$[57] = node.key;
+		$[58] = onLayout;
+		$[59] = onPress;
+		$[60] = pill;
+		$[61] = props;
+		$[62] = selectable;
+		$[63] = selected;
+		$[64] = state;
+		$[65] = target;
+		$[66] = t11;
+	} else t11 = $[66];
+	let t12;
+	if ($[67] !== isDisabled || $[68] !== node.key || $[69] !== node.textValue || $[70] !== onRemove || $[71] !== paint.content || $[72] !== removeLabel) {
+		t12 = onRemove === void 0 ? null : /* @__PURE__ */ jsx(RemoveButton, {
+			color: paint.content,
+			isDisabled,
+			label: node.textValue === "" ? removeLabel : `${removeLabel} ${node.textValue}`,
+			onPress: removeThen(onRemove, node.key)
+		});
+		$[67] = isDisabled;
+		$[68] = node.key;
+		$[69] = node.textValue;
+		$[70] = onRemove;
+		$[71] = paint.content;
+		$[72] = removeLabel;
+		$[73] = t12;
+	} else t12 = $[73];
+	let t13;
+	if ($[74] !== t10 || $[75] !== t11 || $[76] !== t12) {
+		t13 = /* @__PURE__ */ jsxs(View, {
+			hitSlop: t10,
+			style: styles.chip,
+			children: [t11, t12]
+		});
+		$[74] = t10;
+		$[75] = t11;
+		$[76] = t12;
+		$[77] = t13;
+	} else t13 = $[77];
+	return t13;
+}
+/**
+* How the group is described by the line under it. On the web it points at
+* the line with `aria-describedby`, as web's group does. iOS and Android
+* focus the chips rather than the group, so there the line is left where a
+* screen reader reaches it in order, after the last chip.
+*/
+function lineOf(id, message) {
+	return Platform.OS === "web" && message !== void 0 ? { "aria-describedby": id } : void 0;
+}
+/**
+* A chip's close target: the close glyph in the label's colour, with a hover
+* and a pressed layer of its own and a ring for focus from a key, as the
+* header sets out.
+*/
+function RemoveButton(t0) {
+	const $ = c(38);
+	const { color, isDisabled, label, onPress } = t0;
+	const theme = useTheme();
+	let t1;
+	if ($[0] !== color || $[1] !== isDisabled) {
+		t1 = {
+			color,
+			disabled: isDisabled,
+			disableRipple: true
+		};
+		$[0] = color;
+		$[1] = isDisabled;
+		$[2] = t1;
+	} else t1 = $[2];
+	const feedback = usePressFeedback(t1);
+	let T0;
+	let T1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let t9;
+	if ($[3] !== color || $[4] !== feedback.handlers || $[5] !== feedback.hovered || $[6] !== feedback.pressed || $[7] !== feedback.ring || $[8] !== isDisabled || $[9] !== label || $[10] !== onPress || $[11] !== theme) {
+		const own = groupStylesOf(theme);
+		T1 = Pressable;
+		t3 = label;
+		t4 = "button";
+		t5 = feedback.handlers;
+		t6 = isDisabled;
+		t7 = REMOVE_REACH;
+		t8 = onPress;
+		t9 = composeStyles(own.remove, feedback.ring === void 0 ? void 0 : ringOf(color));
+		T0 = View;
+		t2 = composeStyles(styles.layer, own.removeLayer, { backgroundColor: color }, feedback.hovered ? own.removeHovered : void 0, feedback.pressed ? own.removePressed : void 0);
+		$[3] = color;
+		$[4] = feedback.handlers;
+		$[5] = feedback.hovered;
+		$[6] = feedback.pressed;
+		$[7] = feedback.ring;
+		$[8] = isDisabled;
+		$[9] = label;
+		$[10] = onPress;
+		$[11] = theme;
+		$[12] = T0;
+		$[13] = T1;
+		$[14] = t2;
+		$[15] = t3;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t6;
+		$[19] = t7;
+		$[20] = t8;
+		$[21] = t9;
+	} else {
+		T0 = $[12];
+		T1 = $[13];
+		t2 = $[14];
+		t3 = $[15];
+		t4 = $[16];
+		t5 = $[17];
+		t6 = $[18];
+		t7 = $[19];
+		t8 = $[20];
+		t9 = $[21];
+	}
+	let t10;
+	if ($[22] !== T0 || $[23] !== t2) {
+		t10 = /* @__PURE__ */ jsx(T0, { style: t2 });
+		$[22] = T0;
+		$[23] = t2;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
+	if ($[25] !== color) {
+		t11 = /* @__PURE__ */ jsx(CloseGlyph, {
+			color,
+			size: 18
+		});
+		$[25] = color;
+		$[26] = t11;
+	} else t11 = $[26];
+	let t12;
+	if ($[27] !== T1 || $[28] !== t10 || $[29] !== t11 || $[30] !== t3 || $[31] !== t4 || $[32] !== t5 || $[33] !== t6 || $[34] !== t7 || $[35] !== t8 || $[36] !== t9) {
+		t12 = /* @__PURE__ */ jsxs(T1, {
+			"aria-label": t3,
+			role: t4,
+			...t5,
+			disabled: t6,
+			hitSlop: t7,
+			onPress: t8,
+			style: t9,
+			children: [t10, t11]
+		});
+		$[27] = T1;
+		$[28] = t10;
+		$[29] = t11;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t5;
+		$[33] = t6;
+		$[34] = t7;
+		$[35] = t8;
+		$[36] = t9;
+		$[37] = t12;
+	} else t12 = $[37];
+	return t12;
+}
+function removeThen(onRemove, key) {
+	return () => {
+		onRemove(/* @__PURE__ */ new Set([key]));
+	};
+}
+function ringOf(color) {
+	return {
+		outlineColor: color,
+		outlineOffset: 1,
+		outlineStyle: "solid",
+		outlineWidth: 2
+	};
+}
+function selectThen(state, key, onPress) {
+	return (event) => {
+		onPress?.(event);
+		state.selectionManager.select(key);
+	};
+}
+ChipGroup.Chip = ChipGroupChip;
+//#endregion
+export { ChipGroup, ChipGroupChip };
+
+//# sourceMappingURL=index.js.map