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

package/dist/components/drop-zone/index.d.ts

@@ -0,0 +1,113 @@
+import { PickedFile } from "../../files/index.js";
+import { DragTypes, DropEnterEvent, DropEvent, DropExitEvent, DropOperation } from "../../drop/index.js";
+import { StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/drop-zone/index.d.ts
+type DropZoneProps = {
+  /**
+   * Names the target without drawing anything, for a page that already says
+   * what it takes. Beats `label` as the name.
+   */
+  readonly 'aria-label'?: string;
+  /** What the target holds beside its label, such as a FileTrigger. */
+  readonly children?: ReactNode;
+  /**
+   * What a drop of these types would do, from the operations the drag
+   * allows: `cancel` refuses it. A pick on iOS and Android allows `copy`
+   * alone. Left out, the first the drag allows.
+   */
+  readonly getDropOperation?: (types: DragTypes, allowedOperations: readonly DropOperation[]) => DropOperation;
+  /**
+   * Takes nothing: no drop, and on iOS and Android no press, drawn faded.
+   * @default false
+   */
+  readonly isDisabled?: boolean;
+  /**
+   * What the target says it is for, drawn inside it and used as its name. A
+   * string rather than a node, since it is what names the target; anything
+   * richer goes in `children`.
+   */
+  readonly label?: string;
+  /**
+   * Called with what landed: what was dropped under React Native Web, what
+   * was picked on iOS and Android.
+   */
+  readonly onDrop?: (event: DropEvent) => void;
+  /** Called once something the target takes comes over it. Under React Native Web alone. */
+  readonly onDropEnter?: (event: DropEnterEvent) => void;
+  /** Called once what came over it leaves, or lands. Under React Native Web alone. */
+  readonly onDropExit?: (event: DropExitEvent) => void;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  readonly style?: StyleProp<ViewStyle>;
+  readonly testID?: string;
+};
+type FileTriggerProps = {
+  /** The MIME types the chooser offers, such as `image/png` or `image/*`. Every type when left out. */
+  readonly acceptedFileTypes?: readonly string[];
+  /** Whether more than one file can be picked. @default false */
+  readonly allowsMultiple?: boolean;
+  /** The Button, IconButton or Fab that opens the chooser. */
+  readonly children?: ReactNode;
+  /**
+   * Opens the camera rather than the chooser, facing away from the person
+   * for `environment` or towards them for `user`, as web's `capture` does.
+   * It takes one photo, or a video where `acceptedFileTypes` names a video
+   * type.
+   */
+  readonly defaultCamera?: 'environment' | 'user';
+  /** Called with what was picked. Not called when the person backs out. */
+  readonly onSelect?: (files: readonly PickedFile[]) => void;
+};
+/**
+ * A place to drop files. Under React Native Web it takes HTML5 drag and drop,
+ * as kanso-ui's does; on iOS and Android, which hand an app no drag from
+ * another, pressing it opens the file chooser, and `onDrop` is handed what
+ * was picked. Either way `onDrop` is handed the items, which
+ * `isFileDropItem` and `isTextDropItem` pick apart.
+ *
+ * ```tsx
+ * <DropZone label="Drop here" onDrop={handleDrop}>
+ *   <FileTrigger onSelect={handleSelect}>
+ *     <Button variant="outlined">Label</Button>
+ *   </FileTrigger>
+ * </DropZone>
+ * ```
+ *
+ * It is drawn from the outlined card, with a dashed rule rather than a solid
+ * one, and fills with the primary container while something is over it.
+ * `label` both draws the words and names the target; `aria-label` names it
+ * without drawing anything.
+ *
+ * The chooser is expo-document-picker's, which an app installs alongside the
+ * library. Without it a press writes to the console that the package is
+ * missing, and nothing opens.
+ *
+ * `style`, `ref` and `testID` land on the target itself, which is what a
+ * layout places.
+ */
+declare function DropZone({ 'aria-label': ariaLabel, children, getDropOperation, isDisabled, label, onDrop, onDropEnter, onDropExit, ref, style, testID }: DropZoneProps): import("react").JSX.Element;
+/**
+ * Opens the file chooser from the button it wraps, and hands `onSelect`
+ * what was picked.
+ *
+ * ```tsx
+ * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>
+ *   <Button>Label</Button>
+ * </FileTrigger>
+ * ```
+ *
+ * It renders nothing of its own, so it takes no `style`: what is seen is the
+ * Button, IconButton or Fab it wraps, which opens the chooser after its own
+ * `onPress`. `allowsMultiple` takes more than one file, and `defaultCamera`
+ * opens the camera instead. kanso-ui's `acceptDirectory` is not here, since
+ * neither iOS's chooser nor Android's picks a folder.
+ *
+ * The chooser is expo-document-picker's and the camera expo-image-picker's,
+ * which an app installs alongside the library, the second only for
+ * `defaultCamera`. Without the one it needs, a press writes to the console
+ * which package is missing, and nothing opens.
+ */
+declare function FileTrigger({ acceptedFileTypes, allowsMultiple, children, defaultCamera, onSelect }: FileTriggerProps): import("react").JSX.Element;
+//#endregion
+export { DropZone, type DropZoneProps, FileTrigger, type FileTriggerProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drop-zone/index.js

@@ -0,0 +1,304 @@
+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 { withOpacity } from "../../theme/color.js";
+import { refsOf } from "../../ref/index.js";
+import { ButtonSlotContext } from "../../button/slots.js";
+import { fileItemOf, isDropTarget, operationOf, typesOf, watchDrops } from "../../drop/index.js";
+import { pickThen, preparePicker } from "../../files/index.js";
+import { c } from "react/compiler-runtime";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/drop-zone/index.tsx
+const MIN_HEIGHT = 160;
+const stylesOf = themedStyles(({ colors, radii, spacing, stateLayerOpacity }) => {
+	const disabled = withOpacity(colors.onSurface, stateLayerOpacity.disabledContent);
+	return StyleSheet.create({
+		label: {
+			color: colors.onSurfaceVariant,
+			textAlign: "center"
+		},
+		labelBox: { pointerEvents: "none" },
+		labelDisabled: { color: disabled },
+		labelOver: { color: colors.onPrimaryContainer },
+		press: { borderRadius: radii.md },
+		ring: { outlineOffset: -1 },
+		root: {
+			alignItems: "center",
+			backgroundColor: colors.surface,
+			borderColor: colors.outlineVariant,
+			borderRadius: radii.md,
+			borderStyle: "dashed",
+			borderWidth: 1,
+			boxSizing: "border-box",
+			gap: spacing.md,
+			justifyContent: "center",
+			minHeight: MIN_HEIGHT,
+			padding: spacing.xl
+		},
+		rootDisabled: { borderColor: disabled },
+		rootOver: {
+			backgroundColor: colors.primaryContainer,
+			borderColor: colors.primary,
+			borderStyle: "solid"
+		}
+	});
+});
+/**
+* A place to drop files. Under React Native Web it takes HTML5 drag and drop,
+* as kanso-ui's does; on iOS and Android, which hand an app no drag from
+* another, pressing it opens the file chooser, and `onDrop` is handed what
+* was picked. Either way `onDrop` is handed the items, which
+* `isFileDropItem` and `isTextDropItem` pick apart.
+*
+* ```tsx
+* <DropZone label="Drop here" onDrop={handleDrop}>
+*   <FileTrigger onSelect={handleSelect}>
+*     <Button variant="outlined">Label</Button>
+*   </FileTrigger>
+* </DropZone>
+* ```
+*
+* It is drawn from the outlined card, with a dashed rule rather than a solid
+* one, and fills with the primary container while something is over it.
+* `label` both draws the words and names the target; `aria-label` names it
+* without drawing anything.
+*
+* The chooser is expo-document-picker's, which an app installs alongside the
+* library. Without it a press writes to the console that the package is
+* missing, and nothing opens.
+*
+* `style`, `ref` and `testID` land on the target itself, which is what a
+* layout places.
+*/
+function DropZone(t0) {
+	const $ = c(30);
+	const { "aria-label": ariaLabel, children, getDropOperation, isDisabled: t1, label, onDrop, onDropEnter, onDropExit, ref, style, testID } = t0;
+	const isDisabled = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	const { colors, radii } = theme;
+	const styles = stylesOf(theme);
+	const bodyMedium = useTypeRole("bodyMedium");
+	const [isOver, setOver] = useState(false);
+	const node = useRef(null);
+	const web = Platform.OS === "web";
+	let t2;
+	if ($[0] !== radii.md) {
+		t2 = { borderRadius: radii.md };
+		$[0] = radii.md;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== colors.onSurface || $[3] !== isDisabled || $[4] !== t2) {
+		t3 = {
+			color: colors.onSurface,
+			corners: t2,
+			disabled: isDisabled
+		};
+		$[2] = colors.onSurface;
+		$[3] = isDisabled;
+		$[4] = t2;
+		$[5] = t3;
+	} else t3 = $[5];
+	const feedback = usePressFeedback(t3);
+	let t4;
+	if ($[6] !== getDropOperation || $[7] !== onDrop || $[8] !== onDropEnter || $[9] !== onDropExit) {
+		t4 = () => ({
+			getDropOperation,
+			onDrop,
+			onDropEnter,
+			onDropExit
+		});
+		$[6] = getDropOperation;
+		$[7] = onDrop;
+		$[8] = onDropEnter;
+		$[9] = onDropExit;
+		$[10] = t4;
+	} else t4 = $[10];
+	const handlersNow = useEffectEvent(t4);
+	let t5;
+	if ($[11] !== isDisabled) {
+		t5 = () => isDisabled;
+		$[11] = isDisabled;
+		$[12] = t5;
+	} else t5 = $[12];
+	const disabledNow = useEffectEvent(t5);
+	const name = ariaLabel ?? label;
+	const over = isOver && !isDisabled;
+	let t6;
+	if ($[13] !== disabledNow || $[14] !== handlersNow) {
+		t6 = () => {
+			if (!web) {
+				preparePicker({});
+				return;
+			}
+			const target = node.current;
+			if (!isDropTarget(target)) return;
+			return watchDrops(target, () => handlersNow(), () => disabledNow(), setOver);
+		};
+		$[13] = disabledNow;
+		$[14] = handlersNow;
+		$[15] = t6;
+	} else t6 = $[15];
+	let t7;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = [web];
+		$[16] = t7;
+	} else t7 = $[16];
+	useEffect(t6, t7);
+	const T0 = View;
+	const t8 = web && isDisabled ? true : void 0;
+	const t9 = web ? name : void 0;
+	let t10;
+	if ($[17] !== ref) {
+		t10 = refsOf(ref, node);
+		$[17] = ref;
+		$[18] = t10;
+	} else t10 = $[18];
+	const t11 = web && name !== void 0 ? "group" : void 0;
+	const t12 = composeStyles(styles.root, over ? styles.rootOver : void 0, isDisabled ? styles.rootDisabled : void 0, style);
+	const t13 = web ? null : /* @__PURE__ */ jsx(Pressable, {
+		...feedback.handlers,
+		"aria-label": name,
+		disabled: isDisabled,
+		onPress: pressOf(getDropOperation, onDrop),
+		role: "button",
+		style: composeStyles(StyleSheet.absoluteFill, styles.press, feedback.ring, feedback.ring === void 0 ? void 0 : styles.ring),
+		children: feedback.layer
+	});
+	const t14 = label === void 0 ? null : /* @__PURE__ */ jsx(View, {
+		"aria-hidden": true,
+		style: styles.labelBox,
+		children: /* @__PURE__ */ jsx(Text, {
+			style: composeStyles(bodyMedium, styles.label, over ? styles.labelOver : void 0, isDisabled ? styles.labelDisabled : void 0),
+			children: label
+		})
+	});
+	let t15;
+	if ($[19] !== T0 || $[20] !== children || $[21] !== t10 || $[22] !== t11 || $[23] !== t12 || $[24] !== t13 || $[25] !== t14 || $[26] !== t8 || $[27] !== t9 || $[28] !== testID) {
+		t15 = /* @__PURE__ */ jsxs(T0, {
+			"aria-disabled": t8,
+			"aria-label": t9,
+			ref: t10,
+			role: t11,
+			style: t12,
+			testID,
+			children: [
+				t13,
+				t14,
+				children
+			]
+		});
+		$[19] = T0;
+		$[20] = children;
+		$[21] = t10;
+		$[22] = t11;
+		$[23] = t12;
+		$[24] = t13;
+		$[25] = t14;
+		$[26] = t8;
+		$[27] = t9;
+		$[28] = testID;
+		$[29] = t15;
+	} else t15 = $[29];
+	return t15;
+}
+/**
+* Opens the file chooser from the button it wraps, and hands `onSelect`
+* what was picked.
+*
+* ```tsx
+* <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>
+*   <Button>Label</Button>
+* </FileTrigger>
+* ```
+*
+* It renders nothing of its own, so it takes no `style`: what is seen is the
+* Button, IconButton or Fab it wraps, which opens the chooser after its own
+* `onPress`. `allowsMultiple` takes more than one file, and `defaultCamera`
+* opens the camera instead. kanso-ui's `acceptDirectory` is not here, since
+* neither iOS's chooser nor Android's picks a folder.
+*
+* The chooser is expo-document-picker's and the camera expo-image-picker's,
+* which an app installs alongside the library, the second only for
+* `defaultCamera`. Without the one it needs, a press writes to the console
+* which package is missing, and nothing opens.
+*/
+function FileTrigger(t0) {
+	const $ = c(13);
+	const { acceptedFileTypes, allowsMultiple, children, defaultCamera, onSelect } = t0;
+	let t1;
+	let t2;
+	if ($[0] !== defaultCamera) {
+		t1 = () => {
+			preparePicker({ defaultCamera });
+		};
+		t2 = [defaultCamera];
+		$[0] = defaultCamera;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	if ($[3] !== acceptedFileTypes || $[4] !== allowsMultiple || $[5] !== defaultCamera || $[6] !== onSelect) {
+		t3 = () => {
+			pickThen({
+				acceptedFileTypes,
+				allowsMultiple,
+				defaultCamera
+			}, (files) => {
+				onSelect?.(files);
+			});
+		};
+		$[3] = acceptedFileTypes;
+		$[4] = allowsMultiple;
+		$[5] = defaultCamera;
+		$[6] = onSelect;
+		$[7] = t3;
+	} else t3 = $[7];
+	const pick = t3;
+	let t4;
+	if ($[8] !== pick) {
+		t4 = slotsOf(pick);
+		$[8] = pick;
+		$[9] = t4;
+	} else t4 = $[9];
+	let t5;
+	if ($[10] !== children || $[11] !== t4) {
+		t5 = /* @__PURE__ */ jsx(ButtonSlotContext, {
+			value: t4,
+			children
+		});
+		$[10] = children;
+		$[11] = t4;
+		$[12] = t5;
+	} else t5 = $[12];
+	return t5;
+}
+function pressOf(getDropOperation, onDrop) {
+	return (event) => {
+		const { locationX: x, locationY: y } = event.nativeEvent;
+		pickThen({ allowsMultiple: true }, (files) => {
+			const dropOperation = operationOf({ getDropOperation }, typesOf(files.map((file) => file.type)), ["copy"]);
+			if (dropOperation !== "cancel") onDrop?.({
+				dropOperation,
+				items: files.map(fileItemOf),
+				type: "drop",
+				x,
+				y
+			});
+		});
+	};
+}
+function slotsOf(pick) {
+	return { default: pick };
+}
+//#endregion
+export { DropZone, FileTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/components/drop-zone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","GestureResponderEvent","HostInstance","StyleProp","TextStyle","ViewStyle","View","ViewType","useEffect","useEffectEvent","useRef","useState","Platform","Pressable","StyleSheet","Text","ButtonSlots","DragTypes","DropEnterEvent","DropEvent","DropExitEvent","DropOperation","PickedFile","ButtonSlotContext","fileItemOf","isDropTarget","operationOf","typesOf","watchDrops","pickThen","preparePicker","usePressFeedback","refsOf","withOpacity","useTheme","composeStyles","themedStyles","useTypeRole","MIN_HEIGHT","stylesOf","colors","radii","spacing","stateLayerOpacity","disabled","onSurface","disabledContent","create","label","color","onSurfaceVariant","textAlign","labelBox","pointerEvents","labelDisabled","labelOver","onPrimaryContainer","press","borderRadius","md","ring","outlineOffset","root","alignItems","backgroundColor","surface","borderColor","outlineVariant","borderStyle","borderWidth","boxSizing","gap","justifyContent","minHeight","padding","xl","rootDisabled","rootOver","primaryContainer","primary","DropZoneProps","children","getDropOperation","types","allowedOperations","isDisabled","onDrop","event","onDropEnter","onDropExit","ref","style","testID","FileTriggerProps","acceptedFileTypes","allowsMultiple","defaultCamera","onSelect","files","DropZone","t0","$","_c","ariaLabel","t1","undefined","theme","styles","bodyMedium","isOver","setOver","node","web","OS","t2","t3","corners","feedback","t4","handlersNow","t5","disabledNow","name","over","t6","target","current","t7","Symbol","for","T0","t8","t9","t10","t11","t12","t13","handlers","pressOf","absoluteFill","layer","t14","t15","FileTrigger","pick","slotsOf","locationX","x","locationY","y","nativeEvent","dropOperation","map","file","type","items","default","_c"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n  View as ViewType,\n} from 'react-native'\n\nimport { useEffect, useEffectEvent, useRef, useState } from 'react'\nimport { Platform, Pressable, StyleSheet, Text, View } from 'react-native'\n\nimport type { ButtonSlots } from '../../button/slots'\nimport type {\n  DragTypes,\n  DropEnterEvent,\n  DropEvent,\n  DropExitEvent,\n  DropOperation,\n} from '../../drop'\nimport type { PickedFile } from '../../files'\n\nimport { ButtonSlotContext } from '../../button/slots'\nimport {\n  fileItemOf,\n  isDropTarget,\n  operationOf,\n  typesOf,\n  watchDrops,\n} from '../../drop'\nimport { pickThen, preparePicker } from '../../files'\nimport { usePressFeedback } from '../../press'\nimport { refsOf } from '../../ref'\nimport { withOpacity } from '../../theme/color'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { useTypeRole } from '../../typography/roles'\n\n// A place to drop files, and a way to open the file chooser from a button, as\n// kanso-ui's DropZone and FileTrigger are. Material Design carries no page for\n// either, so the target is drawn from the nearest thing it does carry, the\n// outlined card: the same surface, 1dp outline variant rule and medium\n// corner, at least 160dp tall with 24dp of padding and its label centred in\n// body medium. Web's two departures from that card are kept. **The rule is\n// dashed**, since a solid one reads as a card holding content and a dashed one\n// as a place to put something. **Something over it fills it** with primary\n// container, the rule turning primary and solid, the pair a selected row\n// takes, so \"this is the target\" looks like \"this is the one chosen\". It\n// switches at once rather than over web's short transition, as a card's\n// press colours do.\n//\n// What a drop is depends on the platform, since neither iOS nor Android hands\n// React Native a drag from another app. **Under React Native Web it is HTML5\n// drag and drop**, as on web, through src/drop. **On iOS and Android the\n// target is a press target** that opens the chooser and hands `onDrop` what\n// was picked, as file drop items, so a call site writes one handler for both.\n// The drop operation it reports is `copy`, which is true of a pick as it is\n// of a drop from the desktop: the chooser hands the app a copy in its cache,\n// and the person's own file stays where it was. So a call site reading the\n// operation is told nothing a pick does not do. The press target lies under\n// what the target holds, so a button inside it still takes its own presses,\n// and VoiceOver reaches both rather than one.\n//\n// Disabled is web's: the rule and the label in on surface at the disabled\n// content opacity, over the surface, so a dashed rule at full strength stops\n// reading as somewhere to aim at, and nothing is taken.\n//\n// FileTrigger renders nothing of its own. The Button, IconButton or Fab it\n// wraps opens the chooser through src/button's default slot, the way a\n// button opens the overlay around it, as web's React Aria hands its\n// FileTrigger's press to whatever it wraps.\n\n// The least height a target takes, from web: room enough to aim at.\nconst MIN_HEIGHT = 160\n\nconst stylesOf = themedStyles(\n  ({ colors, radii, spacing, stateLayerOpacity }) => {\n    const disabled = withOpacity(\n      colors.onSurface,\n      stateLayerOpacity.disabledContent,\n    )\n\n    return StyleSheet.create({\n      // The label, in the muted role, centred under the target's content.\n      label: {\n        color: colors.onSurfaceVariant,\n        textAlign: 'center',\n      },\n      labelBox: {\n        pointerEvents: 'none',\n      },\n      labelDisabled: {\n        color: disabled,\n      },\n      labelOver: {\n        color: colors.onPrimaryContainer,\n      },\n      // The press target fills the target under its content, inside the\n      // rule. Its ring is drawn over the target's edge rather than around\n      // it, as web's is, so a parent clipping its children never cuts the\n      // outer half away: set 1dp into the press target, it covers the rule\n      // and the 1dp inside it.\n      press: {\n        borderRadius: radii.md,\n      },\n      ring: {\n        outlineOffset: -1,\n      },\n      root: {\n        alignItems: 'center',\n        backgroundColor: colors.surface,\n        borderColor: colors.outlineVariant,\n        borderRadius: radii.md,\n        borderStyle: 'dashed',\n        borderWidth: 1,\n        boxSizing: 'border-box',\n        gap: spacing.md,\n        justifyContent: 'center',\n        minHeight: MIN_HEIGHT,\n        padding: spacing.xl,\n      },\n      rootDisabled: {\n        borderColor: disabled,\n      },\n      rootOver: {\n        backgroundColor: colors.primaryContainer,\n        borderColor: colors.primary,\n        borderStyle: 'solid',\n      },\n    })\n  },\n)\n\ntype DropZoneProps = {\n  /**\n   * Names the target without drawing anything, for a page that already says\n   * what it takes. Beats `label` as the name.\n   */\n  readonly 'aria-label'?: string\n  /** What the target holds beside its label, such as a FileTrigger. */\n  readonly children?: ReactNode\n  /**\n   * What a drop of these types would do, from the operations the drag\n   * allows: `cancel` refuses it. A pick on iOS and Android allows `copy`\n   * alone. Left out, the first the drag allows.\n   */\n  readonly getDropOperation?: (\n    types: DragTypes,\n    allowedOperations: readonly DropOperation[],\n  ) => DropOperation\n  /**\n   * Takes nothing: no drop, and on iOS and Android no press, drawn faded.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  /**\n   * What the target says it is for, drawn inside it and used as its name. A\n   * string rather than a node, since it is what names the target; anything\n   * richer goes in `children`.\n   */\n  readonly label?: string\n  /**\n   * Called with what landed: what was dropped under React Native Web, what\n   * was picked on iOS and Android.\n   */\n  readonly onDrop?: (event: DropEvent) => void\n  /** Called once something the target takes comes over it. Under React Native Web alone. */\n  readonly onDropEnter?: (event: DropEnterEvent) => void\n  /** Called once what came over it leaves, or lands. Under React Native Web alone. */\n  readonly onDropExit?: (event: DropExitEvent) => void\n  readonly ref?: Ref<ComponentRef<typeof ViewType>>\n  readonly style?: StyleProp<ViewStyle>\n  readonly testID?: string\n}\n\ntype FileTriggerProps = {\n  /** The MIME types the chooser offers, such as `image/png` or `image/*`. Every type when left out. */\n  readonly acceptedFileTypes?: readonly string[]\n  /** Whether more than one file can be picked. @default false */\n  readonly allowsMultiple?: boolean\n  /** The Button, IconButton or Fab that opens the chooser. */\n  readonly children?: ReactNode\n  /**\n   * Opens the camera rather than the chooser, facing away from the person\n   * for `environment` or towards them for `user`, as web's `capture` does.\n   * It takes one photo, or a video where `acceptedFileTypes` names a video\n   * type.\n   */\n  readonly defaultCamera?: 'environment' | 'user'\n  /** Called with what was picked. Not called when the person backs out. */\n  readonly onSelect?: (files: readonly PickedFile[]) => void\n}\n\n/**\n * A place to drop files. Under React Native Web it takes HTML5 drag and drop,\n * as kanso-ui's does; on iOS and Android, which hand an app no drag from\n * another, pressing it opens the file chooser, and `onDrop` is handed what\n * was picked. Either way `onDrop` is handed the items, which\n * `isFileDropItem` and `isTextDropItem` pick apart.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything.\n *\n * The chooser is expo-document-picker's, which an app installs alongside the\n * library. Without it a press writes to the console that the package is\n * missing, and nothing opens.\n *\n * `style`, `ref` and `testID` land on the target itself, which is what a\n * layout places.\n */\nfunction DropZone({\n  'aria-label': ariaLabel,\n  children,\n  getDropOperation,\n  isDisabled = false,\n  label,\n  onDrop,\n  onDropEnter,\n  onDropExit,\n  ref,\n  style,\n  testID,\n}: DropZoneProps) {\n  const theme = useTheme()\n  const { colors, radii } = theme\n  const styles = stylesOf(theme)\n  const bodyMedium = useTypeRole('bodyMedium')\n  const [isOver, setOver] = useState(false)\n  const node = useRef<HostInstance | null>(null)\n  const web = Platform.OS === 'web'\n  const feedback = usePressFeedback({\n    color: colors.onSurface,\n    corners: { borderRadius: radii.md },\n    disabled: isDisabled,\n  })\n  const handlersNow = useEffectEvent(() => ({\n    getDropOperation,\n    onDrop,\n    onDropEnter,\n    onDropExit,\n  }))\n  const disabledNow = useEffectEvent(() => isDisabled)\n  const name = ariaLabel ?? label\n  const over = isOver && !isDisabled\n\n  useEffect(() => {\n    if (!web) {\n      preparePicker({})\n      return undefined\n    }\n\n    const target = node.current\n\n    if (!isDropTarget(target)) {\n      return undefined\n    }\n    return watchDrops(\n      target,\n      () => handlersNow(),\n      () => disabledNow(),\n      setOver,\n    )\n  }, [web])\n\n  return (\n    <View\n      // Under React Native Web the target names itself, as a group, and says\n      // it is disabled, since there is no press target to carry either.\n      aria-disabled={web && isDisabled ? true : undefined}\n      aria-label={web ? name : undefined}\n      ref={refsOf<HostInstance>(ref, node)}\n      role={web && name !== undefined ? 'group' : undefined}\n      style={composeStyles<ViewStyle>(\n        styles.root,\n        over ? styles.rootOver : undefined,\n        isDisabled ? styles.rootDisabled : undefined,\n        style,\n      )}\n      testID={testID}\n    >\n      {web ? null : (\n        <Pressable\n          {...feedback.handlers}\n          aria-label={name}\n          disabled={isDisabled}\n          onPress={pressOf(getDropOperation, onDrop)}\n          role=\"button\"\n          style={composeStyles<ViewStyle>(\n            StyleSheet.absoluteFill,\n            styles.press,\n            feedback.ring,\n            feedback.ring === undefined ? undefined : styles.ring,\n          )}\n        >\n          {feedback.layer}\n        </Pressable>\n      )}\n      {label === undefined ? null : (\n        // Hidden from a screen reader, which hears it as the target's name,\n        // and from touches, which land on the press target under it.\n        <View aria-hidden style={styles.labelBox}>\n          <Text\n            style={composeStyles<TextStyle>(\n              bodyMedium,\n              styles.label,\n              over ? styles.labelOver : undefined,\n              isDisabled ? styles.labelDisabled : undefined,\n            )}\n          >\n            {label}\n          </Text>\n        </View>\n      )}\n      {children}\n    </View>\n  )\n}\n\n/**\n * Opens the file chooser from the button it wraps, and hands `onSelect`\n * what was picked.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own, so it takes no `style`: what is seen is the\n * Button, IconButton or Fab it wraps, which opens the chooser after its own\n * `onPress`. `allowsMultiple` takes more than one file, and `defaultCamera`\n * opens the camera instead. kanso-ui's `acceptDirectory` is not here, since\n * neither iOS's chooser nor Android's picks a folder.\n *\n * The chooser is expo-document-picker's and the camera expo-image-picker's,\n * which an app installs alongside the library, the second only for\n * `defaultCamera`. Without the one it needs, a press writes to the console\n * which package is missing, and nothing opens.\n */\nfunction FileTrigger({\n  acceptedFileTypes,\n  allowsMultiple,\n  children,\n  defaultCamera,\n  onSelect,\n}: FileTriggerProps) {\n  useEffect(() => {\n    preparePicker({ defaultCamera })\n  }, [defaultCamera])\n\n  const pick = () => {\n    void pickThen(\n      { acceptedFileTypes, allowsMultiple, defaultCamera },\n      (files) => {\n        onSelect?.(files)\n      },\n    )\n  }\n\n  return <ButtonSlotContext value={slotsOf(pick)}>{children}</ButtonSlotContext>\n}\n\n// What pressing the target does on iOS and Android: opens the chooser and\n// hands `onDrop` what was picked, as a drop that copies, where the call site\n// takes the copy. Built by a call rather than inline at the prop, which is\n// what react-perf's jsx-no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction pressOf(\n  getDropOperation: DropZoneProps['getDropOperation'],\n  onDrop: DropZoneProps['onDrop'],\n) {\n  return (event: GestureResponderEvent) => {\n    const { locationX: x, locationY: y } = event.nativeEvent\n\n    void pickThen({ allowsMultiple: true }, (files) => {\n      const dropOperation = operationOf(\n        { getDropOperation },\n        typesOf(files.map((file) => file.type)),\n        ['copy'],\n      )\n\n      if (dropOperation !== 'cancel') {\n        onDrop?.({\n          dropOperation,\n          items: files.map(fileItemOf),\n          type: 'drop',\n          x,\n          y,\n        })\n      }\n    })\n  }\n}\n\n// The slots a FileTrigger hands its button: its press in the default slot,\n// in place of any overlay's around it. Built by a call rather than inline at\n// the prop, which is what react-perf's jsx-no-new-object-as-prop is after;\n// the React Compiler memoises the result on its inputs.\nfunction slotsOf(pick: () => void): ButtonSlots {\n  return { default: pick }\n}\n\nexport { DropZone, FileTrigger }\nexport type { DropZoneProps, FileTriggerProps }\n"],"mappings":"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"}

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

@@ -74,7 +74,7 @@ type FabProps = (ButtonLinkForm | FabPressForm) & FabNaming & Omit<PressableProp
  * `style`, `ref` and `testID` land on the `Pressable`, which is what a call
  * site positions over its screen.
  */
-declare function Fab({ children, delayLongPress, disableRipple, href, isDisabled, label, onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, onPressOut, ref, size, slot, style, tone, type, variant, ...props }: FabProps): import("react").JSX.Element;
+declare function Fab({ accessibilityHint, children, delayLongPress, disableRipple, href, isDisabled, label, onBlur, onFocus, onHoverIn, onHoverOut, onLongPress, onPress, onPressIn, onPressOut, ref, size, slot, style, tone, type, variant, ...props }: FabProps): import("react").JSX.Element;
 //#endregion
 export { Fab, type FabProps, type FabSize, type FabTone, type FabVariant };
 //# sourceMappingURL=index.d.ts.map