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

package/dist/components/disclosure/index.js

@@ -0,0 +1,365 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
+import { rowContentColor, rowStyles } from "../../row/styles.js";
+import { RowContent, rowStyleOf } from "../../row/index.js";
+import { ExpandChevron } from "../../disclosure/chevron.js";
+import { DisclosureGroupStateContext } from "../../disclosure/index.js";
+import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { createContext, use, useEffect, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDisclosureState } from "react-stately/useDisclosureState";
+//#region src/components/disclosure/index.tsx
+const stylesOf = themedStyles(({ spacing }) => StyleSheet.create({ inner: {
+	paddingBottom: spacing.lg,
+	paddingHorizontal: spacing.lg
+} }));
+const styles = StyleSheet.create({
+	clip: { overflow: "hidden" },
+	closed: { display: "none" }
+});
+const DisclosureContext = createContext(null);
+function chevronFor(isExpanded) {
+	return /* @__PURE__ */ jsx(ExpandChevron, { isExpanded });
+}
+/**
+* A section that opens to show what is under it. Pass `isExpanded` with
+* `onExpandedChange` to hold whether it is open, or `defaultExpanded` to let
+* it keep its own.
+*
+* ```tsx
+* <Disclosure>
+*   <Disclosure.Header>Headline</Disclosure.Header>
+*   <Disclosure.Panel>
+*     <Text>Supporting line</Text>
+*   </Disclosure.Panel>
+* </Disclosure>
+* ```
+*
+* The header is the row every list here draws, so a section above a list of
+* rows lines up with them. The panel opens to whatever height its content
+* reports, and opens and closes at once under reduced motion.
+*
+* Inside a `DisclosureGroup`, give it an `id`, the key the group reports.
+*
+* `style`, `ref` and `testID` land on the section's own view, as they do on
+* each part's.
+*/
+function Disclosure(t0) {
+	const $ = c(24);
+	const { children, defaultExpanded, id, isDisabled: t1, isExpanded, onExpandedChange, ref, style, testID } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const group = use(DisclosureGroupStateContext);
+	const fallback = useId();
+	const key = id ?? fallback;
+	let t2;
+	if ($[0] !== group || $[1] !== isExpanded || $[2] !== key) {
+		t2 = group === null ? isExpanded : group.expandedKeys.has(key);
+		$[0] = group;
+		$[1] = isExpanded;
+		$[2] = key;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== group || $[5] !== key || $[6] !== onExpandedChange) {
+		t3 = expandedChangeOf(group, key, onExpandedChange);
+		$[4] = group;
+		$[5] = key;
+		$[6] = onExpandedChange;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[8] !== defaultExpanded || $[9] !== t2 || $[10] !== t3) {
+		t4 = {
+			defaultExpanded,
+			isExpanded: t2,
+			onExpandedChange: t3
+		};
+		$[8] = defaultExpanded;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+	} else t4 = $[11];
+	const state = useDisclosureState(t4);
+	const header = useId();
+	const disabled = isDisabled || (group?.isDisabled ?? false);
+	let t5;
+	if ($[12] !== disabled || $[13] !== header || $[14] !== state) {
+		t5 = {
+			header,
+			isDisabled: disabled,
+			state
+		};
+		$[12] = disabled;
+		$[13] = header;
+		$[14] = state;
+		$[15] = t5;
+	} else t5 = $[15];
+	const value = t5;
+	let t6;
+	if ($[16] !== children || $[17] !== ref || $[18] !== style || $[19] !== testID) {
+		t6 = /* @__PURE__ */ jsx(View, {
+			ref,
+			style,
+			testID,
+			children
+		});
+		$[16] = children;
+		$[17] = ref;
+		$[18] = style;
+		$[19] = testID;
+		$[20] = t6;
+	} else t6 = $[20];
+	let t7;
+	if ($[21] !== t6 || $[22] !== value) {
+		t7 = /* @__PURE__ */ jsx(DisclosureContext, {
+			value,
+			children: t6
+		});
+		$[21] = t6;
+		$[22] = value;
+		$[23] = t7;
+	} else t7 = $[23];
+	return t7;
+}
+/**
+* The row that opens and closes the section: a button announced as expanded
+* or collapsed, drawing the shared row's slots with a chevron in the
+* trailing one.
+*/
+function DisclosureHeader(t0) {
+	const $ = c(32);
+	const { children, leading, ref, style, supporting, testID } = t0;
+	const { header, isDisabled, state } = useDisclosure("Disclosure.Header");
+	const theme = useTheme();
+	let t1;
+	if ($[0] !== isDisabled || $[1] !== theme) {
+		t1 = rowContentColor(theme, { isDisabled });
+		$[0] = isDisabled;
+		$[1] = theme;
+		$[2] = t1;
+	} else t1 = $[2];
+	let t2;
+	if ($[3] !== isDisabled || $[4] !== t1) {
+		t2 = {
+			color: t1,
+			disabled: isDisabled
+		};
+		$[3] = isDisabled;
+		$[4] = t1;
+		$[5] = t2;
+	} else t2 = $[5];
+	const feedback = usePressFeedback(t2);
+	const t3 = state.isExpanded;
+	let t4;
+	if ($[6] !== state) {
+		t4 = toggleOf(state);
+		$[6] = state;
+		$[7] = t4;
+	} else t4 = $[7];
+	const t5 = feedback.handlers;
+	let t6;
+	if ($[8] !== feedback.ring || $[9] !== style || $[10] !== supporting || $[11] !== theme) {
+		t6 = composeStyles(rowStyleOf(theme, { supporting }), feedback.ring, feedback.ring === void 0 ? void 0 : rowStyles.ring, style);
+		$[8] = feedback.ring;
+		$[9] = style;
+		$[10] = supporting;
+		$[11] = theme;
+		$[12] = t6;
+	} else t6 = $[12];
+	const t7 = feedback.layer;
+	let t8;
+	if ($[13] !== state.isExpanded) {
+		t8 = chevronFor(state.isExpanded);
+		$[13] = state.isExpanded;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== children || $[16] !== isDisabled || $[17] !== leading || $[18] !== supporting || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsx(RowContent, {
+			isDisabled,
+			leading,
+			supporting,
+			trailing: t8,
+			children
+		});
+		$[15] = children;
+		$[16] = isDisabled;
+		$[17] = leading;
+		$[18] = supporting;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	let t10;
+	if ($[21] !== feedback.handlers || $[22] !== feedback.layer || $[23] !== header || $[24] !== isDisabled || $[25] !== ref || $[26] !== state.isExpanded || $[27] !== t4 || $[28] !== t6 || $[29] !== t9 || $[30] !== testID) {
+		t10 = /* @__PURE__ */ jsxs(Pressable, {
+			"aria-expanded": t3,
+			id: header,
+			onPress: t4,
+			ref,
+			role: "button",
+			testID,
+			...t5,
+			disabled: isDisabled,
+			style: t6,
+			children: [t7, t9]
+		});
+		$[21] = feedback.handlers;
+		$[22] = feedback.layer;
+		$[23] = header;
+		$[24] = isDisabled;
+		$[25] = ref;
+		$[26] = state.isExpanded;
+		$[27] = t4;
+		$[28] = t6;
+		$[29] = t9;
+		$[30] = testID;
+		$[31] = t10;
+	} else t10 = $[31];
+	return t10;
+}
+/**
+* What the section shows while it is open. Its content sits 16dp in, lined
+* up with the headline above it, and it is named by the header.
+*/
+function DisclosurePanel(t0) {
+	const $ = c(26);
+	const { children, ref, role: t1, style, testID } = t0;
+	const role = t1 === void 0 ? "group" : t1;
+	const { header, state } = useDisclosure("Disclosure.Panel");
+	const { isExpanded } = state;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const { motion } = theme;
+	const reduceMotion = useReducedMotion();
+	const [shown, setShown] = useState(isExpanded);
+	const openness = useSharedValue(isExpanded ? 1 : 0);
+	const height = useSharedValue(-1);
+	let t2;
+	if ($[0] !== height || $[1] !== shown) {
+		t2 = (event) => {
+			if (shown) height.set(event.nativeEvent.layout.height);
+		};
+		$[0] = height;
+		$[1] = shown;
+		$[2] = t2;
+	} else t2 = $[2];
+	const measure = t2;
+	if (isExpanded && !shown) setShown(true);
+	else if (!isExpanded && shown && reduceMotion) setShown(false);
+	let t3;
+	let t4;
+	if ($[3] !== isExpanded || $[4] !== motion || $[5] !== openness || $[6] !== reduceMotion) {
+		t3 = () => {
+			const target = isExpanded ? 1 : 0;
+			if (reduceMotion) {
+				openness.set(target);
+				return;
+			}
+			openness.set(withTiming(target, {
+				duration: motion.durationMedium2,
+				easing: Easing.bezier(...motion.easingEmphasized)
+			}));
+			if (isExpanded) return;
+			const timer = setTimeout(() => {
+				setShown(false);
+			}, motion.durationMedium2);
+			return () => {
+				clearTimeout(timer);
+			};
+		};
+		t4 = [
+			isExpanded,
+			motion,
+			openness,
+			reduceMotion
+		];
+		$[3] = isExpanded;
+		$[4] = motion;
+		$[5] = openness;
+		$[6] = reduceMotion;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t3 = $[7];
+		t4 = $[8];
+	}
+	useEffect(t3, t4);
+	const clip = useAnimatedStyle(() => {
+		"worklet";
+		const measured = height.get();
+		const progress = openness.get();
+		if (measured < 0) return progress === 1 ? {} : { height: 0 };
+		return { height: measured * progress };
+	});
+	const t5 = Animated;
+	const t6 = !isExpanded;
+	let t7;
+	if ($[9] !== clip || $[10] !== style) {
+		t7 = composeStyles(styles.clip, clip, style);
+		$[9] = clip;
+		$[10] = style;
+		$[11] = t7;
+	} else t7 = $[11];
+	const T0 = View;
+	const t8 = composeStyles(own.inner, shown ? void 0 : styles.closed);
+	let t9;
+	if ($[12] !== T0 || $[13] !== children || $[14] !== measure || $[15] !== t8) {
+		t9 = /* @__PURE__ */ jsx(T0, {
+			onLayout: measure,
+			style: t8,
+			children
+		});
+		$[12] = T0;
+		$[13] = children;
+		$[14] = measure;
+		$[15] = t8;
+		$[16] = t9;
+	} else t9 = $[16];
+	let t10;
+	if ($[17] !== header || $[18] !== ref || $[19] !== role || $[20] !== t5.View || $[21] !== t6 || $[22] !== t7 || $[23] !== t9 || $[24] !== testID) {
+		t10 = /* @__PURE__ */ jsx(t5.View, {
+			"aria-hidden": t6,
+			"aria-labelledby": header,
+			ref,
+			role,
+			style: t7,
+			testID,
+			children: t9
+		});
+		$[17] = header;
+		$[18] = ref;
+		$[19] = role;
+		$[20] = t5.View;
+		$[21] = t6;
+		$[22] = t7;
+		$[23] = t9;
+		$[24] = testID;
+		$[25] = t10;
+	} else t10 = $[25];
+	return t10;
+}
+function expandedChangeOf(group, key, onExpandedChange) {
+	return (expanded) => {
+		group?.toggleKey(key);
+		onExpandedChange?.(expanded);
+	};
+}
+function toggleOf(state) {
+	return () => {
+		state.toggle();
+	};
+}
+function useDisclosure(part) {
+	const value = use(DisclosureContext);
+	if (value === null) throw new Error(`${part} is drawn inside Disclosure.`);
+	return value;
+}
+Disclosure.Header = DisclosureHeader;
+Disclosure.Panel = DisclosurePanel;
+//#endregion
+export { Disclosure, DisclosureHeader, DisclosurePanel };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewStyle","AnimatedStyle","Key","DisclosureGroupState","DisclosureState","createContext","use","useCallback","useEffect","useId","useMemo","useState","Pressable","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","useDisclosureState","ResolvedTheme","DisclosureGroupStateContext","ExpandChevron","usePressFeedback","RowContent","rowContentColor","rowStyleOf","rowStyles","useTheme","composeStyles","themedStyles","stylesOf","spacing","create","inner","paddingBottom","lg","paddingHorizontal","styles","clip","overflow","closed","display","DisclosureContextValue","header","isDisabled","state","DisclosureHeaderProps","children","leading","ref","style","supporting","testID","DisclosurePanelProps","role","DisclosureProps","defaultExpanded","id","isExpanded","onExpandedChange","DisclosureContext","chevronFor","Disclosure","t0","$","_c","t1","undefined","group","fallback","key","t2","expandedKeys","has","t3","expandedChangeOf","t4","disabled","t5","value","t6","t7","DisclosureHeader","useDisclosure","theme","color","feedback","toggleOf","handlers","ring","layer","t8","t9","t10","DisclosurePanel","own","motion","reduceMotion","shown","setShown","openness","height","event","set","nativeEvent","layout","measure","target","duration","durationMedium2","easing","bezier","easingEmphasized","timer","setTimeout","clearTimeout","measured","get","progress","T0","expanded","toggleKey","toggle","part","Error","Header","Panel","_c"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { LayoutChangeEvent, StyleProp, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Key } from 'react-stately'\nimport type { DisclosureGroupState } from 'react-stately/useDisclosureGroupState'\nimport type { DisclosureState } from 'react-stately/useDisclosureState'\n\nimport {\n  createContext,\n  use,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useState,\n} from 'react'\nimport { Pressable, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { useDisclosureState } from 'react-stately/useDisclosureState'\n\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { DisclosureGroupStateContext } from '../../disclosure'\nimport { ExpandChevron } from '../../disclosure/chevron'\nimport { usePressFeedback } from '../../press'\nimport { RowContent, rowContentColor, rowStyleOf, rowStyles } from '../../row'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's Disclosure: a section that opens to show what is under it, and\n// closes again. The header is the row every list here draws, src/row, shared\n// with ListItem and every menu item, so its 56dp floor, 72dp with a\n// supporting line, body-large headline, body-medium supporting line and\n// state layers are that module's, and a header above a list cannot drift\n// from the rows below it. A 24dp chevron in its trailing slot turns a quarter\n// to point down once the section is open, over the short3 duration on the\n// standard curve, as web's does, and mirrors under right-to-left. The panel\n// holds its content 16dp in, lined up with the headline above it.\n//\n// **The header is a button and not a heading.** Web renders the button\n// inside a heading at `headingLevel`; React Native's screen readers have no\n// heading levels, so the prop is dropped, as AppBar drops it. The button\n// reports whether the section is expanded.\n//\n// **The panel moves its height on Reanimated**, from nothing to the height\n// its content reports through `onLayout`, over the medium2 duration on the\n// emphasised curve, web's. Under reduced motion it opens and closes at once.\n// It closes the same way it opens, which web does not: there the collapsed\n// panel takes React Aria's `hidden=\"until-found\"`, which stops its content\n// being laid out at once and leaves nothing to shrink, and native has no\n// counterpart to it. Once closed, its content is laid out no longer, so\n// nothing in it is reached by a press, a key or a screen reader, and it is\n// hidden from a screen reader while it closes.\n//\n// The state is React Stately's `useDisclosureState`, the one web's React Aria\n// keeps, handed to the two parts through context. Inside a DisclosureGroup\n// the group's keys say whether the section is open, under its `id`, and the\n// group's `isDisabled` disables it as its own does, as React Aria's do.\n\nconst stylesOf = themedStyles(({ spacing }: ResolvedTheme) =>\n  StyleSheet.create({\n    inner: {\n      paddingBottom: spacing.lg,\n      paddingHorizontal: spacing.lg,\n    },\n  }),\n)\n\nconst styles = StyleSheet.create({\n  // What the panel's height moves inside: its content lays out at its own\n  // height whatever the clip is, which is what `onLayout` measures.\n  clip: {\n    overflow: 'hidden',\n  },\n  // A closed panel's content, which takes no part in layout, presses, keys\n  // or a screen reader once its close has run.\n  closed: {\n    display: 'none',\n  },\n})\n\ntype DisclosureContextValue = {\n  readonly header: string\n  readonly isDisabled: boolean\n  readonly state: DisclosureState\n}\n\ntype DisclosureHeaderProps = {\n  /** The header's headline, what the section is about. */\n  readonly children?: ReactNode\n  /** Content before the headline: an avatar, an icon. */\n  readonly leading?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  /** A second line under the headline, in the muted role. */\n  readonly supporting?: ReactNode\n  readonly testID?: string\n}\n\ntype DisclosurePanelProps = {\n  /** What the section shows while it is open. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * `region` names the panel as a landmark, for a section a reader should be\n   * able to jump to, where `group` only gathers what is in it.\n   * @default 'group'\n   */\n  readonly role?: 'group' | 'region'\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\ntype DisclosureProps = {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  readonly children?: ReactNode\n  /** Whether the section starts open, when it keeps its own state. */\n  readonly defaultExpanded?: boolean\n  /**\n   * The section's key in a `DisclosureGroup`, which the group reports as\n   * expanded. Outside a group it does nothing.\n   */\n  readonly id?: Key\n  /**\n   * Keeps the section from opening or closing, and draws its header\n   * disabled.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Whether the section is open, when the call site holds the state. */\n  readonly isExpanded?: boolean\n  /** Called with the new state as the section opens or closes. */\n  readonly onExpandedChange?: (isExpanded: boolean) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\nconst DisclosureContext = createContext<DisclosureContextValue | null>(null)\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 `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ExpandChevron isExpanded={isExpanded} />\n}\n\n/**\n * A section that opens to show what is under it. Pass `isExpanded` with\n * `onExpandedChange` to hold whether it is open, or `defaultExpanded` to let\n * it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>\n *     <Text>Supporting line</Text>\n *   </Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * reports, and opens and closes at once under reduced motion.\n *\n * Inside a `DisclosureGroup`, give it an `id`, the key the group reports.\n *\n * `style`, `ref` and `testID` land on the section's own view, as they do on\n * each part's.\n */\nfunction Disclosure({\n  children,\n  defaultExpanded,\n  id,\n  isDisabled = false,\n  isExpanded,\n  onExpandedChange,\n  ref,\n  style,\n  testID,\n}: DisclosureProps) {\n  const group = use(DisclosureGroupStateContext)\n  const fallback = useId()\n  const key = id ?? fallback\n  const state = useDisclosureState({\n    defaultExpanded,\n    isExpanded: group === null ? isExpanded : group.expandedKeys.has(key),\n    onExpandedChange: expandedChangeOf(group, key, onExpandedChange),\n  })\n  const header = useId()\n  const disabled = isDisabled || (group?.isDisabled ?? false)\n  const value = useMemo<DisclosureContextValue>(\n    () => ({ header, isDisabled: disabled, state }),\n    [disabled, header, state],\n  )\n\n  return (\n    <DisclosureContext value={value}>\n      <View ref={ref} style={style} testID={testID}>\n        {children}\n      </View>\n    </DisclosureContext>\n  )\n}\n\n/**\n * The row that opens and closes the section: a button announced as expanded\n * or collapsed, drawing the shared row's slots with a chevron in the\n * trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  leading,\n  ref,\n  style,\n  supporting,\n  testID,\n}: DisclosureHeaderProps) {\n  const { header, isDisabled, state } = useDisclosure('Disclosure.Header')\n  const theme = useTheme()\n  const feedback = usePressFeedback({\n    color: rowContentColor(theme, { isDisabled }),\n    disabled: isDisabled,\n  })\n\n  return (\n    <Pressable\n      aria-expanded={state.isExpanded}\n      id={header}\n      onPress={toggleOf(state)}\n      ref={ref}\n      role=\"button\"\n      testID={testID}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      style={composeStyles<ViewStyle>(\n        rowStyleOf(theme, { supporting }),\n        feedback.ring,\n        feedback.ring === undefined ? undefined : rowStyles.ring,\n        style,\n      )}\n    >\n      {feedback.layer}\n      <RowContent\n        isDisabled={isDisabled}\n        leading={leading}\n        supporting={supporting}\n        trailing={chevronFor(state.isExpanded)}\n      >\n        {children}\n      </RowContent>\n    </Pressable>\n  )\n}\n\n/**\n * What the section shows while it is open. Its content sits 16dp in, lined\n * up with the headline above it, and it is named by the header.\n */\nfunction DisclosurePanel({\n  children,\n  ref,\n  role = 'group',\n  style,\n  testID,\n}: DisclosurePanelProps) {\n  const { header, state } = useDisclosure('Disclosure.Panel')\n  const { isExpanded } = state\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const { motion } = theme\n  const reduceMotion = useReducedMotion()\n  // Whether the content is laid out: from the moment the section opens until\n  // its close has run.\n  const [shown, setShown] = useState(isExpanded)\n  const openness = useSharedValue(isExpanded ? 1 : 0)\n  // The content's own height, once it has reported one while laid out. A\n  // closed panel's content reports nothing worth keeping, and the handler is\n  // there from the start all the same: React Native Web watches a view's size\n  // only if it had a handler when it mounted.\n  const height = useSharedValue(-1)\n  const measure = useCallback(\n    (event: LayoutChangeEvent) => {\n      if (shown) {\n        height.set(event.nativeEvent.layout.height)\n      }\n    },\n    [height, shown],\n  )\n\n  // Laid out the moment it opens, and at once no longer when it closes with\n  // no motion to run.\n  if (isExpanded && !shown) {\n    setShown(true)\n  } else if (!isExpanded && shown && reduceMotion) {\n    setShown(false)\n  }\n\n  useEffect(() => {\n    const target = isExpanded ? 1 : 0\n\n    if (reduceMotion) {\n      openness.set(target)\n      return undefined\n    }\n\n    openness.set(\n      withTiming(target, {\n        duration: motion.durationMedium2,\n        easing: Easing.bezier(...motion.easingEmphasized),\n      }),\n    )\n    if (isExpanded) {\n      return undefined\n    }\n\n    const timer = setTimeout(() => {\n      setShown(false)\n    }, motion.durationMedium2)\n\n    return () => {\n      clearTimeout(timer)\n    }\n  }, [isExpanded, motion, openness, reduceMotion])\n\n  // Open before the content has reported a height, the panel takes the\n  // content's own, so a section that starts open draws it on the first\n  // frame; otherwise it is the share of that height the motion has reached.\n  const clip = useAnimatedStyle(() => {\n    'worklet'\n    const measured = height.get()\n    const progress = openness.get()\n\n    if (measured < 0) {\n      return progress === 1 ? {} : { height: 0 }\n    }\n\n    return { height: measured * progress }\n  })\n\n  return (\n    <Animated.View\n      aria-hidden={!isExpanded}\n      aria-labelledby={header}\n      ref={ref}\n      role={role}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(styles.clip, clip, style)}\n      testID={testID}\n    >\n      <View\n        onLayout={measure}\n        style={composeStyles<ViewStyle>(\n          own.inner,\n          shown ? undefined : styles.closed,\n        )}\n      >\n        {children}\n      </View>\n    </Animated.View>\n  )\n}\n\n// What a section calls as it opens or closes: inside a group, the group's\n// toggle of its key first, then the call site's own handler either way.\nfunction expandedChangeOf(\n  group: DisclosureGroupState | null,\n  key: Key,\n  onExpandedChange: ((isExpanded: boolean) => void) | undefined,\n) {\n  return (expanded: boolean) => {\n    group?.toggleKey(key)\n    onExpandedChange?.(expanded)\n  }\n}\n\n// A press's toggle. Built by a call rather than declared in the component,\n// which is what react-perf's jsx-no-new-function-as-prop is after; the React\n// Compiler memoises the result on its input.\nfunction toggleOf(state: DisclosureState) {\n  return () => {\n    state.toggle()\n  }\n}\n\nfunction useDisclosure(part: string): DisclosureContextValue {\n  const value = use(DisclosureContext)\n  if (value === null) {\n    throw new Error(`${part} is drawn inside Disclosure.`)\n  }\n  return value\n}\n\nDisclosure.Header = DisclosureHeader\nDisclosure.Panel = DisclosurePanel\n\nexport { Disclosure, DisclosureHeader, DisclosurePanel }\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps }\n"],"mappings":"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"}

package/dist/components/disclosure-group/index.d.ts

@@ -0,0 +1,61 @@
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+import { Key } from "react-stately";
+//#region src/components/disclosure-group/index.d.ts
+type DisclosureGroupProps = {
+  /**
+   * Whether several sections may be open at once. Otherwise opening one
+   * closes the one that was open.
+   * @default false
+   */
+  readonly allowsMultipleExpanded?: boolean;
+  /** The sections, as `Disclosure` elements each given an `id`. */
+  readonly children?: ReactNode;
+  /** The keys of the sections open at first, when the group keeps its own. */
+  readonly defaultExpandedKeys?: Iterable<Key>;
+  /**
+   * Whether a rule is drawn between the sections. There is never one above
+   * the first or below the last.
+   * @default true
+   */
+  readonly divided?: boolean;
+  /** The keys of the open sections, when the call site holds them. */
+  readonly expandedKeys?: Iterable<Key>;
+  /**
+   * Keeps every section from opening or closing, and draws their headers
+   * disabled.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /** Called with the keys of the open sections as one opens or closes. */
+  readonly onExpandedChange?: (keys: Set<Key>) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+/**
+ * A stack of `Disclosure` sections that agree about what is open. Pass
+ * `expandedKeys` with `onExpandedChange` to hold which are open, or
+ * `defaultExpandedKeys` to let the group keep its own.
+ *
+ * ```tsx
+ * <DisclosureGroup defaultExpandedKeys={FIRST}>
+ *   <Disclosure id="first">
+ *     <Disclosure.Header>Headline</Disclosure.Header>
+ *     <Disclosure.Panel>
+ *       <Text>Supporting line</Text>
+ *     </Disclosure.Panel>
+ *   </Disclosure>
+ * </DisclosureGroup>
+ * ```
+ *
+ * One section opens at a time unless `allowsMultipleExpanded` says otherwise.
+ * Give every section an `id`, which is the key the group reports.
+ *
+ * `style`, `ref` and `testID` land on the group's own view, the one a layout
+ * positions.
+ */
+declare function DisclosureGroup({ allowsMultipleExpanded, children, defaultExpandedKeys, divided, expandedKeys, isDisabled, onExpandedChange, ref, style, testID }: DisclosureGroupProps): import("react").JSX.Element;
+//#endregion
+export { DisclosureGroup, type DisclosureGroupProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,100 @@
+import { DisclosureGroupStateContext } from "../../disclosure/index.js";
+import { Separator } from "../separator/index.js";
+import { c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { Children, Fragment, isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useDisclosureGroupState } from "react-stately/useDisclosureGroupState";
+//#region src/components/disclosure-group/index.tsx
+/**
+* A stack of `Disclosure` sections that agree about what is open. Pass
+* `expandedKeys` with `onExpandedChange` to hold which are open, or
+* `defaultExpandedKeys` to let the group keep its own.
+*
+* ```tsx
+* <DisclosureGroup defaultExpandedKeys={FIRST}>
+*   <Disclosure id="first">
+*     <Disclosure.Header>Headline</Disclosure.Header>
+*     <Disclosure.Panel>
+*       <Text>Supporting line</Text>
+*     </Disclosure.Panel>
+*   </Disclosure>
+* </DisclosureGroup>
+* ```
+*
+* One section opens at a time unless `allowsMultipleExpanded` says otherwise.
+* Give every section an `id`, which is the key the group reports.
+*
+* `style`, `ref` and `testID` land on the group's own view, the one a layout
+* positions.
+*/
+function DisclosureGroup(t0) {
+	const $ = c(17);
+	const { allowsMultipleExpanded, children, defaultExpandedKeys, divided: t1, expandedKeys, isDisabled, onExpandedChange, ref, style, testID } = t0;
+	const divided = t1 === void 0 ? true : t1;
+	let t2;
+	if ($[0] !== allowsMultipleExpanded || $[1] !== defaultExpandedKeys || $[2] !== expandedKeys || $[3] !== isDisabled || $[4] !== onExpandedChange) {
+		t2 = {
+			allowsMultipleExpanded,
+			defaultExpandedKeys,
+			expandedKeys,
+			isDisabled,
+			onExpandedChange
+		};
+		$[0] = allowsMultipleExpanded;
+		$[1] = defaultExpandedKeys;
+		$[2] = expandedKeys;
+		$[3] = isDisabled;
+		$[4] = onExpandedChange;
+		$[5] = t2;
+	} else t2 = $[5];
+	const state = useDisclosureGroupState(t2);
+	let t3;
+	if ($[6] !== children || $[7] !== divided) {
+		t3 = divided ? dividedChildren(children) : children;
+		$[6] = children;
+		$[7] = divided;
+		$[8] = t3;
+	} else t3 = $[8];
+	let t4;
+	if ($[9] !== ref || $[10] !== style || $[11] !== t3 || $[12] !== testID) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			ref,
+			style,
+			testID,
+			children: t3
+		});
+		$[9] = ref;
+		$[10] = style;
+		$[11] = t3;
+		$[12] = testID;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== state || $[15] !== t4) {
+		t5 = /* @__PURE__ */ jsx(DisclosureGroupStateContext, {
+			value: state,
+			children: t4
+		});
+		$[14] = state;
+		$[15] = t4;
+		$[16] = t5;
+	} else t5 = $[16];
+	return t5;
+}
+function dividedChildren(children) {
+	return flatten(children).map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [index === 0 ? null : /* @__PURE__ */ jsx(Separator, {}), section] }, keyOf(section, index)));
+}
+function flatten(children) {
+	return Children.toArray(children).flatMap((child) => {
+		if (isValidElement(child) && child.type === Fragment) return flatten(child.props.children);
+		return [child];
+	});
+}
+function keyOf(section, index) {
+	return isValidElement(section) && section.key !== null ? section.key : String(index);
+}
+//#endregion
+export { DisclosureGroup };
+
+//# sourceMappingURL=index.js.map

package/dist/components/disclosure-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","StyleProp","ViewStyle","Key","Children","Fragment","isValidElement","View","useDisclosureGroupState","DisclosureGroupStateContext","Separator","DisclosureGroupProps","allowsMultipleExpanded","children","defaultExpandedKeys","Iterable","divided","expandedKeys","isDisabled","onExpandedChange","keys","Set","ref","style","testID","DisclosureGroup","t0","$","_c","t1","undefined","t2","state","t3","dividedChildren","t4","t5","flatten","map","section","index","keyOf","toArray","flatMap","child","type","props","key","String","_c"],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { StyleProp, ViewStyle } from 'react-native'\nimport type { Key } from 'react-stately'\n\nimport { Children, Fragment, isValidElement } from 'react'\nimport { View } from 'react-native'\nimport { useDisclosureGroupState } from 'react-stately/useDisclosureGroupState'\n\nimport { DisclosureGroupStateContext } from '../../disclosure'\nimport { Separator } from '../separator'\n\n// kanso-ui's DisclosureGroup: a stack of Disclosures that agree with each\n// other about what is open, the lists page's accordion. The sections are the\n// library's own `Disclosure`, unchanged: this adds only the agreement between\n// them and the rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and the\n// keys are React Stately's `useDisclosureGroupState`, the state web's React\n// Aria keeps, handed to the sections through context.\n//\n// **A rule between the sections, and none at the ends.** The group draws the\n// library's `Separator` between each pair rather than asking each section to\n// draw a border, so a section drawn on its own and a section in a group stay\n// the same component. `divided={false}` leaves them undivided, for a stack\n// sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a screen want\n// different surroundings, and the screen is what knows which it is.\n\ntype DisclosureGroupProps = {\n  /**\n   * Whether several sections may be open at once. Otherwise opening one\n   * closes the one that was open.\n   * @default false\n   */\n  readonly allowsMultipleExpanded?: boolean\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  readonly children?: ReactNode\n  /** The keys of the sections open at first, when the group keeps its own. */\n  readonly defaultExpandedKeys?: Iterable<Key>\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  readonly divided?: boolean\n  /** The keys of the open sections, when the call site holds them. */\n  readonly expandedKeys?: Iterable<Key>\n  /**\n   * Keeps every section from opening or closing, and draws their headers\n   * disabled.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /** Called with the keys of the open sections as one opens or closes. */\n  readonly onExpandedChange?: (keys: Set<Key>) => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Pass\n * `expandedKeys` with `onExpandedChange` to hold which are open, or\n * `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>\n *       <Text>Supporting line</Text>\n *     </Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id`, which is the key the group reports.\n *\n * `style`, `ref` and `testID` land on the group's own view, the one a layout\n * positions.\n */\nfunction DisclosureGroup({\n  allowsMultipleExpanded,\n  children,\n  defaultExpandedKeys,\n  divided = true,\n  expandedKeys,\n  isDisabled,\n  onExpandedChange,\n  ref,\n  style,\n  testID,\n}: DisclosureGroupProps) {\n  const state = useDisclosureGroupState({\n    allowsMultipleExpanded,\n    defaultExpandedKeys,\n    expandedKeys,\n    isDisabled,\n    onExpandedChange,\n  })\n\n  return (\n    <DisclosureGroupStateContext value={state}>\n      <View ref={ref} style={style} testID={testID}>\n        {divided ? dividedChildren(children) : children}\n      </View>\n    </DisclosureGroupStateContext>\n  )\n}\n\n// The sections with a rule between each pair, and none at the ends.\nfunction dividedChildren(children: ReactNode) {\n  return flatten(children).map((section, index) => (\n    <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator />}\n      {section}\n    </Fragment>\n  ))\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one, or maps over data and\n// wraps the result, would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap((child) => {\n    if (\n      isValidElement<{ children?: ReactNode }>(child) &&\n      child.type === Fragment\n    ) {\n      return flatten(child.props.children)\n    }\n    return [child]\n  })\n}\n\n// The key `Children.toArray` put on each element, or the entry's position for\n// anything that is not one.\nfunction keyOf(section: ReactNode, index: number) {\n  return isValidElement(section) && section.key !== null\n    ? section.key\n    : String(index)\n}\n\nexport { DisclosureGroup }\nexport type { DisclosureGroupProps }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqFA,SAAA2B,gBAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAyB,MAAA,EAAAhB,wBAAAC,UAAAC,qBAAAE,SAAAa,IAAAZ,cAAAC,YAAAC,kBAAAG,KAAAC,OAAAC,WAAAE;CAIvB,MAAAV,UAAAa,OAAAC,KAAAA,IAAA,OAAAD;CAAc,IAAAE;CAAA,IAAAJ,EAAA,OAAAf,0BAAAe,EAAA,OAAAb,uBAAAa,EAAA,OAAAV,gBAAAU,EAAA,OAAAT,cAAAS,EAAA,OAAAR,kBAAA;EAQwBY,KAAA;GAAAnB;GAAAE;GAAAG;GAAAC;GAAAC;EAMtC;EAACQ,EAAA,KAAAf;EAAAe,EAAA,KAAAb;EAAAa,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAND,MAAAK,QAAcxB,wBAAwBuB,EAMrC;CAAC,IAAAE;CAAA,IAAAN,EAAA,OAAAd,YAAAc,EAAA,OAAAX,SAAA;EAKKiB,KAAAjB,UAAUkB,gBAAgBrB,QAAmB,IAA7CA;EAA8Cc,EAAA,KAAAd;EAAAc,EAAA,KAAAX;EAAAW,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAL,OAAAK,EAAA,QAAAJ,SAAAI,EAAA,QAAAM,MAAAN,EAAA,QAAAH,QAAA;EADjDW,KAAA,oBAAC,MAAD;GAAWb;GAAYC;GAAeC;GACnCS,UAAAA;EADE,CAAA;EAEEN,EAAA,KAAAL;EAAAK,EAAA,MAAAJ;EAAAI,EAAA,MAAAM;EAAAN,EAAA,MAAAH;EAAAG,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAAK,SAAAL,EAAA,QAAAQ,IAAA;EAHTC,KAAA,oBAAC,6BAAD;GAAoCJ,OAAAA;GAClCG,UAAAA;EAD0B,CAAA;EAIER,EAAA,MAAAK;EAAAL,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAJ9BS;AAI8B;AAKlC,SAASF,gBAAgBrB,UAAqB;CAC5C,OAAOwB,QAAQxB,QAAQ,CAAC,CAACyB,KAAKC,SAASC,UACrC,qBAAC,UAAD,EAAA,UAAA,CACGA,UAAU,IAAI,OAAO,oBAAC,WAAD,CAAU,CAAA,GAC/BD,OACO,EAAA,GAHKE,MAAMF,SAASC,KAAK,CAGzB,CACX;AACH;AAOA,SAASH,QAAQxB,UAAkC;CACjD,OAAOT,SAASsC,QAAQ7B,QAAQ,CAAC,CAAC8B,SAASC,UAAU;EACnD,IACEtC,eAAyCsC,KAAK,KAC9CA,MAAMC,SAASxC,UAEf,OAAOgC,QAAQO,MAAME,MAAMjC,QAAQ;EAErC,OAAO,CAAC+B,KAAK;CACf,CAAC;AACH;AAIA,SAASH,MAAMF,SAAoBC,OAAe;CAChD,OAAOlC,eAAeiC,OAAO,KAAKA,QAAQQ,QAAQ,OAC9CR,QAAQQ,MACRC,OAAOR,KAAK;AAClB"}