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

package/dist/components/fab-menu/index.js

@@ -0,0 +1,640 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { useTypeRole } from "../../typography/roles.js";
+import { CloseGlyph } from "../../glyphs/index.js";
+import { refsOf } from "../../ref/index.js";
+import { AnimatedPressable, buttonStyles } from "../../button/index.js";
+import { DismissLayer, useBackToClose, useFocusOnPlaced, useReturnFocus } from "../../overlay/panel.js";
+import { Overlay } from "../../overlay/host.js";
+import { useAnchoredPlacement } from "../../overlay/anchored.js";
+import { FAB_ICON_SIZES, fabColorsOf, fabCornersOf, fabPalettesOf, fabShadowOf, fabSizesOf } from "../../fab/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, Pressable, StyleSheet, Text, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useMenuTriggerState } from "react-stately/useMenuTriggerState";
+import { useTreeState } from "react-stately/useTreeState";
+//#region src/components/fab-menu/index.tsx
+const CLOSE_SIZE = 20;
+const RISE_FROM = 8;
+const HAS_MENU = { "aria-haspopup": "menu" };
+const CLOSE = /* @__PURE__ */ jsx(CloseGlyph, {});
+const styles = StyleSheet.create({
+	base: {
+		alignItems: "center",
+		flexShrink: 0,
+		justifyContent: "center"
+	},
+	icon: {
+		alignItems: "center",
+		flexShrink: 0,
+		justifyContent: "center"
+	},
+	label: { flexShrink: 1 }
+});
+const stylesOf = themedStyles(({ radii, sizing, spacing }) => StyleSheet.create({
+	action: {
+		alignItems: "center",
+		columnGap: spacing.sm,
+		flexDirection: "row",
+		minHeight: sizing.controlLg,
+		minWidth: sizing.controlLg,
+		paddingHorizontal: spacing.xl
+	},
+	corner: { borderRadius: radii.pill },
+	menu: {
+		alignItems: "flex-end",
+		rowGap: spacing.xs
+	}
+}));
+/**
+* A FAB that opens a column of related actions above it, and closes them
+* again. The actions are `FabMenu.Item`s.
+*
+* ```tsx
+* <FabMenu aria-label="Label" icon={<PlusIcon />}>
+*   <FabMenu.Item icon={<FirstIcon />} id="first">
+*     First item
+*   </FabMenu.Item>
+*   <FabMenu.Item icon={<SecondIcon />} id="second">
+*     Second item
+*   </FabMenu.Item>
+* </FabMenu>
+* ```
+*
+* `style`, `ref` and `testID` land on the FAB, which is what a call site
+* positions over its screen.
+*/
+function FabMenu(t0) {
+	const $ = c(51);
+	const { "aria-label": label, children, defaultOpen, icon, isOpen, onAction, onOpenChange, ref, size: t1, style, testID, tone: t2 } = t0;
+	const size = t1 === void 0 ? "md" : t1;
+	const tone = t2 === void 0 ? "primary" : t2;
+	const theme = useTheme();
+	let t3;
+	if ($[0] !== defaultOpen || $[1] !== isOpen || $[2] !== onOpenChange) {
+		t3 = {
+			defaultOpen,
+			isOpen,
+			onOpenChange
+		};
+		$[0] = defaultOpen;
+		$[1] = isOpen;
+		$[2] = onOpenChange;
+		$[3] = t3;
+	} else t3 = $[3];
+	const state = useMenuTriggerState(t3);
+	const open = state.isOpen;
+	const fab = useRef(null);
+	const anchor = useCloseButtonAnchor(fab, theme.sizing.controlLg);
+	const { content } = fabColorsOf(theme)[open ? "filled" : "tonal"][tone];
+	const feedback = usePressFeedback({ color: content });
+	const morph = useCloseMorph(open, size, tone);
+	let t4;
+	if ($[4] !== state) {
+		t4 = () => {
+			state.toggle();
+		};
+		$[4] = state;
+		$[5] = t4;
+	} else t4 = $[5];
+	const toggle = t4;
+	let t5;
+	if ($[6] !== state) {
+		t5 = () => {
+			state.close();
+		};
+		$[6] = state;
+		$[7] = t5;
+	} else t5 = $[7];
+	const close = t5;
+	useReturnFocus(open, false, fab);
+	const T0 = AnimatedPressable;
+	const t6 = HAS_MENU;
+	const t7 = "button";
+	const t8 = feedback.handlers;
+	let t9;
+	if ($[8] !== ref) {
+		t9 = refsOf(fab, ref);
+		$[8] = ref;
+		$[9] = t9;
+	} else t9 = $[9];
+	let t10;
+	if ($[10] !== feedback || $[11] !== morph.container || $[12] !== style || $[13] !== theme) {
+		t10 = composeStyles(styles.base, morph.container, fabShadowOf(feedback, false, theme), feedback.ring, style);
+		$[10] = feedback;
+		$[11] = morph.container;
+		$[12] = style;
+		$[13] = theme;
+		$[14] = t10;
+	} else t10 = $[14];
+	let t11;
+	if ($[15] !== morph.clip) {
+		t11 = composeStyles(buttonStyles.clip, morph.clip);
+		$[15] = morph.clip;
+		$[16] = t11;
+	} else t11 = $[16];
+	let t12;
+	if ($[17] !== feedback.layer || $[18] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Animated.View, {
+			style: t11,
+			children: feedback.layer
+		});
+		$[17] = feedback.layer;
+		$[18] = t11;
+		$[19] = t12;
+	} else t12 = $[19];
+	const T1 = View;
+	const t13 = styles;
+	const T2 = IconStyleContext;
+	const t14 = iconStyleOf(content, open ? CLOSE_SIZE : FAB_ICON_SIZES[size]);
+	const t15 = open ? CLOSE : icon;
+	let t16;
+	if ($[20] !== T2 || $[21] !== t14 || $[22] !== t15) {
+		t16 = /* @__PURE__ */ jsx(T2, {
+			value: t14,
+			children: t15
+		});
+		$[20] = T2;
+		$[21] = t14;
+		$[22] = t15;
+		$[23] = t16;
+	} else t16 = $[23];
+	let t17;
+	if ($[24] !== T1 || $[25] !== t13.icon || $[26] !== t16) {
+		t17 = /* @__PURE__ */ jsx(T1, {
+			style: t13.icon,
+			children: t16
+		});
+		$[24] = T1;
+		$[25] = t13.icon;
+		$[26] = t16;
+		$[27] = t17;
+	} else t17 = $[27];
+	let t18;
+	if ($[28] !== T0 || $[29] !== feedback.handlers || $[30] !== label || $[31] !== open || $[32] !== t10 || $[33] !== t12 || $[34] !== t17 || $[35] !== t6 || $[36] !== t9 || $[37] !== testID || $[38] !== toggle) {
+		t18 = /* @__PURE__ */ jsxs(T0, {
+			...t6,
+			"aria-expanded": open,
+			"aria-label": label,
+			role: t7,
+			testID,
+			...t8,
+			onPress: toggle,
+			ref: t9,
+			style: t10,
+			children: [t12, t17]
+		});
+		$[28] = T0;
+		$[29] = feedback.handlers;
+		$[30] = label;
+		$[31] = open;
+		$[32] = t10;
+		$[33] = t12;
+		$[34] = t17;
+		$[35] = t6;
+		$[36] = t9;
+		$[37] = testID;
+		$[38] = toggle;
+		$[39] = t18;
+	} else t18 = $[39];
+	let t19;
+	if ($[40] !== anchor || $[41] !== children || $[42] !== close || $[43] !== label || $[44] !== onAction || $[45] !== open || $[46] !== tone) {
+		t19 = open ? /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(FabMenuPanel, {
+			anchor,
+			close,
+			label,
+			onAction,
+			tone,
+			children
+		}) }) : null;
+		$[40] = anchor;
+		$[41] = children;
+		$[42] = close;
+		$[43] = label;
+		$[44] = onAction;
+		$[45] = open;
+		$[46] = tone;
+		$[47] = t19;
+	} else t19 = $[47];
+	let t20;
+	if ($[48] !== t18 || $[49] !== t19) {
+		t20 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t18, t19] });
+		$[48] = t18;
+		$[49] = t19;
+		$[50] = t20;
+	} else t20 = $[50];
+	return t20;
+}
+/**
+* One action: a pill holding an icon and a label, on the menu's tone. A press
+* on it runs it and closes the menu.
+*
+* The menu draws it from its entry in the collection, so it renders nothing
+* on its own. `style`, `ref` and `testID` land on the pill.
+*/
+function FabMenuItem(_props) {
+	return null;
+}
+FabMenuItem.getCollectionNode = function* getCollectionNode(props) {
+	yield {
+		hasChildNodes: false,
+		key: props.id,
+		props,
+		rendered: props.children,
+		textValue: props.textValue ?? (typeof props.children === "string" ? props.children : ""),
+		type: "item"
+	};
+};
+/** An action's pill, drawn from its entry in the collection. */
+function FabMenuAction(t0) {
+	const $ = c(35);
+	const { activate, isDisabled, node, setFocusTarget, tone } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const role = useTypeRole("titleMedium");
+	let children;
+	let icon;
+	let onBlur;
+	let onFocus;
+	let onHoverIn;
+	let onHoverOut;
+	let onPress;
+	let onPressIn;
+	let onPressOut;
+	let props;
+	let ref;
+	let style;
+	if ($[0] !== node.props) {
+		const { children: t1, icon: t2, id: _id, isDisabled: _isDisabled, onAction: _onAction, onBlur: t3, onFocus: t4, onHoverIn: t5, onHoverOut: t6, onPress: t7, onPressIn: t8, onPressOut: t9, ref: t10, style: t11, textValue: _textValue, ...t12 } = node.props;
+		children = t1;
+		icon = t2;
+		onBlur = t3;
+		onFocus = t4;
+		onHoverIn = t5;
+		onHoverOut = t6;
+		onPress = t7;
+		onPressIn = t8;
+		onPressOut = t9;
+		ref = t10;
+		style = t11;
+		props = t12;
+		$[0] = node.props;
+		$[1] = children;
+		$[2] = icon;
+		$[3] = onBlur;
+		$[4] = onFocus;
+		$[5] = onHoverIn;
+		$[6] = onHoverOut;
+		$[7] = onPress;
+		$[8] = onPressIn;
+		$[9] = onPressOut;
+		$[10] = props;
+		$[11] = ref;
+		$[12] = style;
+	} else {
+		children = $[1];
+		icon = $[2];
+		onBlur = $[3];
+		onFocus = $[4];
+		onHoverIn = $[5];
+		onHoverOut = $[6];
+		onPress = $[7];
+		onPressIn = $[8];
+		onPressOut = $[9];
+		props = $[10];
+		ref = $[11];
+		style = $[12];
+	}
+	const palettes = fabPalettesOf(theme);
+	const colors = isDisabled ? palettes.disabled : palettes.tonal[tone];
+	const feedback = usePressFeedback({
+		color: colors.content,
+		corners: own.corner,
+		disabled: isDisabled,
+		onBlur,
+		onFocus,
+		onHoverIn,
+		onHoverOut,
+		onPressIn,
+		onPressOut
+	});
+	const T0 = Pressable;
+	const t1 = "menuitem";
+	const t2 = feedback.handlers;
+	let t3;
+	if ($[13] !== activate || $[14] !== node || $[15] !== onPress) {
+		t3 = pressThen(onPress, activate, node);
+		$[13] = activate;
+		$[14] = node;
+		$[15] = onPress;
+		$[16] = t3;
+	} else t3 = $[16];
+	let t4;
+	if ($[17] !== ref || $[18] !== setFocusTarget) {
+		t4 = refsOf(setFocusTarget, ref);
+		$[17] = ref;
+		$[18] = setFocusTarget;
+		$[19] = t4;
+	} else t4 = $[19];
+	const t5 = composeStyles(own.action, own.corner, colors.container, fabShadowOf(feedback, isDisabled, theme), feedback.ring, style);
+	const t6 = feedback.layer;
+	const t7 = icon === void 0 ? null : /* @__PURE__ */ jsx(View, {
+		style: styles.icon,
+		children: /* @__PURE__ */ jsx(IconStyleContext, {
+			value: iconStyleOf(colors.content, FAB_ICON_SIZES.md),
+			children: icon
+		})
+	});
+	const T1 = Text;
+	const t8 = 1;
+	const t9 = composeStyles(role, styles.label, colors.label);
+	let t10;
+	if ($[20] !== T1 || $[21] !== children || $[22] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T1, {
+			numberOfLines: t8,
+			style: t9,
+			children
+		});
+		$[20] = T1;
+		$[21] = children;
+		$[22] = t9;
+		$[23] = t10;
+	} else t10 = $[23];
+	let t11;
+	if ($[24] !== T0 || $[25] !== feedback.handlers || $[26] !== feedback.layer || $[27] !== isDisabled || $[28] !== props || $[29] !== t10 || $[30] !== t3 || $[31] !== t4 || $[32] !== t5 || $[33] !== t7) {
+		t11 = /* @__PURE__ */ jsxs(T0, {
+			role: t1,
+			...props,
+			...t2,
+			disabled: isDisabled,
+			onPress: t3,
+			ref: t4,
+			style: t5,
+			children: [
+				t6,
+				t7,
+				t10
+			]
+		});
+		$[24] = T0;
+		$[25] = feedback.handlers;
+		$[26] = feedback.layer;
+		$[27] = isDisabled;
+		$[28] = props;
+		$[29] = t10;
+		$[30] = t3;
+		$[31] = t4;
+		$[32] = t5;
+		$[33] = t7;
+		$[34] = t11;
+	} else t11 = $[34];
+	return t11;
+}
+/**
+* The open menu: the dismiss layer, then the column of actions, placed above
+* the close button's end and risen into place once it has been.
+*/
+function FabMenuPanel(t0) {
+	const $ = c(29);
+	const { anchor, children, close, label, onAction, tone } = t0;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const t1 = children;
+	let t2;
+	if ($[0] !== t1) {
+		t2 = { children: t1 };
+		$[0] = t1;
+		$[1] = t2;
+	} else t2 = $[1];
+	const state = useTreeState(t2);
+	let t3;
+	if ($[2] !== anchor || $[3] !== theme.spacing.sm) {
+		t3 = {
+			align: "end",
+			anchor,
+			side: "top",
+			sideOffset: theme.spacing.sm
+		};
+		$[2] = anchor;
+		$[3] = theme.spacing.sm;
+		$[4] = t3;
+	} else t3 = $[4];
+	const placement = useAnchoredPlacement(t3);
+	const rise = useRiseIn(placement.placed);
+	const [focusTarget, setFocusTarget] = useState(null);
+	let t4;
+	if ($[5] !== state) {
+		t4 = firstActionKey(state);
+		$[5] = state;
+		$[6] = t4;
+	} else t4 = $[6];
+	const focusKey = t4;
+	let t5;
+	if ($[7] !== close || $[8] !== onAction) {
+		t5 = (node) => {
+			const action = node.props;
+			if (action.onAction === void 0) onAction?.(node.key);
+			else action.onAction();
+			close();
+		};
+		$[7] = close;
+		$[8] = onAction;
+		$[9] = t5;
+	} else t5 = $[9];
+	const activate = t5;
+	useBackToClose(close, true);
+	useFocusOnPlaced(placement.placed, focusTarget);
+	let t6;
+	if ($[10] !== close) {
+		t6 = /* @__PURE__ */ jsx(DismissLayer, { onPress: close });
+		$[10] = close;
+		$[11] = t6;
+	} else t6 = $[11];
+	const t7 = Animated;
+	const t8 = placement.onLayout;
+	const t9 = "menu";
+	const t10 = composeStyles(own.menu, placement.style, rise);
+	let t11;
+	if ($[12] !== activate || $[13] !== focusKey || $[14] !== setFocusTarget || $[15] !== state.collection || $[16] !== state.selectionManager || $[17] !== tone) {
+		t11 = [...state.collection].map((node_0) => /* @__PURE__ */ jsx(FabMenuAction, {
+			activate,
+			isDisabled: state.selectionManager.isDisabled(node_0.key),
+			node: node_0,
+			setFocusTarget: node_0.key === focusKey ? setFocusTarget : void 0,
+			tone
+		}, node_0.key));
+		$[12] = activate;
+		$[13] = focusKey;
+		$[14] = setFocusTarget;
+		$[15] = state.collection;
+		$[16] = state.selectionManager;
+		$[17] = tone;
+		$[18] = t11;
+	} else t11 = $[18];
+	let t12;
+	if ($[19] !== close || $[20] !== label || $[21] !== placement.onLayout || $[22] !== t10 || $[23] !== t11 || $[24] !== t7.View) {
+		t12 = /* @__PURE__ */ jsx(t7.View, {
+			"aria-label": label,
+			onAccessibilityEscape: close,
+			onLayout: t8,
+			role: t9,
+			style: t10,
+			children: t11
+		});
+		$[19] = close;
+		$[20] = label;
+		$[21] = placement.onLayout;
+		$[22] = t10;
+		$[23] = t11;
+		$[24] = t7.View;
+		$[25] = t12;
+	} else t12 = $[25];
+	let t13;
+	if ($[26] !== t12 || $[27] !== t6) {
+		t13 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t6, t12] });
+		$[26] = t12;
+		$[27] = t6;
+		$[28] = t13;
+	} else t13 = $[28];
+	return t13;
+}
+/** The first action a press reaches, which a screen reader is sent to. */
+function firstActionKey(state) {
+	for (const key of state.collection.getKeys()) if (!state.selectionManager.isDisabled(key)) return key;
+	return null;
+}
+function iconStyleOf(color, size) {
+	return {
+		color,
+		size
+	};
+}
+/**
+* The press handler of an action: the call site's own `onPress`, then the
+* action's activation. Built by a call rather than written inline at the
+* prop, which is what react-perf's no-new-function-as-prop is after.
+*/
+function pressThen(onPress, activate, node) {
+	return (event) => {
+		onPress?.(event);
+		activate(node);
+	};
+}
+/**
+* The close button the FAB becomes, for the actions to be placed against: a
+* square of the close button's edge in the FAB's bottom trailing corner, read
+* off the FAB wherever in its change it is when it is measured.
+*/
+function useCloseButtonAnchor(fab, edge) {
+	const $ = c(3);
+	let t0;
+	if ($[0] !== edge || $[1] !== fab) {
+		t0 = { current: { measureInWindow: (callback) => {
+			fab.current?.measureInWindow((x, y, width, height) => {
+				callback(I18nManager.isRTL ? x : x + width - edge, y + height - edge, edge, edge);
+			});
+		} } };
+		$[0] = edge;
+		$[1] = fab;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/**
+* The FAB's change into the close button and back: its width, height,
+* corner and container eased to the state's over medium1 on the emphasised
+* curve, at once under reduced motion. The corner is returned twice, for the
+* container and for the clip its press feedback is drawn in.
+*/
+function useCloseMorph(isOpen, size, tone) {
+	const $ = c(3);
+	const theme = useTheme();
+	const reduceMotion = useReducedMotion();
+	const { motion, sizing } = theme;
+	const edge = isOpen ? sizing.controlLg : fabSizesOf(theme)[size].width;
+	const corner = isOpen ? sizing.controlLg / 2 : fabCornersOf(theme)[size].borderRadius;
+	const fill = fabColorsOf(theme)[isOpen ? "filled" : "tonal"][tone].container;
+	const timing = {
+		duration: motion.durationMedium1,
+		easing: Easing.bezier(...motion.easingEmphasized)
+	};
+	const container = useAnimatedStyle(() => {
+		"worklet";
+		return {
+			backgroundColor: reduceMotion ? fill : withTiming(fill, timing),
+			borderRadius: reduceMotion ? corner : withTiming(corner, timing),
+			height: reduceMotion ? edge : withTiming(edge, timing),
+			width: reduceMotion ? edge : withTiming(edge, timing)
+		};
+	});
+	const clip = useAnimatedStyle(() => {
+		"worklet";
+		return { borderRadius: reduceMotion ? corner : withTiming(corner, timing) };
+	});
+	let t0;
+	if ($[0] !== clip || $[1] !== container) {
+		t0 = {
+			clip,
+			container
+		};
+		$[0] = clip;
+		$[1] = container;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
+}
+/**
+* The actions' arrival: they fade in and rise 8dp into place over short3 on
+* the emphasised decelerating curve once they have been placed, and stay
+* transparent until then. Under reduced motion they arrive at once.
+*/
+function useRiseIn(placed) {
+	const $ = c(6);
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const shown = useSharedValue(0);
+	let t0;
+	let t1;
+	if ($[0] !== motion || $[1] !== placed || $[2] !== reduceMotion || $[3] !== shown) {
+		t0 = () => {
+			if (!placed) return;
+			shown.set(reduceMotion ? 1 : withTiming(1, {
+				duration: motion.durationShort3,
+				easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+			}));
+		};
+		t1 = [
+			motion,
+			placed,
+			reduceMotion,
+			shown
+		];
+		$[0] = motion;
+		$[1] = placed;
+		$[2] = reduceMotion;
+		$[3] = shown;
+		$[4] = t0;
+		$[5] = t1;
+	} else {
+		t0 = $[4];
+		t1 = $[5];
+	}
+	useEffect(t0, t1);
+	return useAnimatedStyle(() => {
+		"worklet";
+		const progress = shown.get();
+		return {
+			opacity: progress,
+			transform: [{ translateY: RISE_FROM * (1 - progress) }]
+		};
+	});
+}
+FabMenu.Item = FabMenuItem;
+//#endregion
+export { FabMenu, FabMenuItem };
+
+//# sourceMappingURL=index.js.map