@krelborn/stylesui 0.0.0-stage → 0.9.0

package/dist/components/Combobox/useComboboxList.js

@@ -0,0 +1,138 @@
+import { extendTypeAheadQuery as e, isTypeAheadQueryLive as t, typeAheadTarget as n } from "../../collections/typeAhead.js";
+import { optionId as r } from "../../collections/optionId.js";
+import { renderedOptions as i } from "../../collections/renderedOptions.js";
+import { targetIndexForKey as a } from "../../collections/targetIndexForKey.js";
+import { useEffect as o, useEffectEvent as s, useId as c, useLayoutEffect as l, useRef as u, useState as d } from "react";
+// src/components/Combobox/useComboboxList.ts
+var f = {
+	block: "nearest",
+	container: "nearest"
+};
+function p({ controlId: p, filter: m, onCommit: h, query: g, selection: _ }) {
+	let v = c(), y = `${v}-list`, b = u(null), x = u(null), S = u(!1), C = u(!1), [w, T] = d(!1), [E, D] = d(null), { select: O, selectedContent: k, selectedValue: A, setSelectedContent: j } = _, M = s((e) => {
+		let t = m === null || g === "" ? void 0 : e.find((e) => !e.disabled);
+		D(t === void 0 ? null : {
+			source: "keyboard",
+			value: t.value
+		});
+	}), N = s((e) => {
+		E !== null && !e.some((e) => e.value === E.value) && D(null);
+	});
+	l(() => {
+		let e = P();
+		b.current?.toggleAttribute("data-empty", e.length === 0), C.current ? (C.current = !1, M(e)) : N(e);
+	}), o(() => {
+		if (!w) return;
+		let e = E !== null && (E.source === "keyboard" || S.current);
+		S.current = !1, e && P().find((e) => e.value === E.value)?.element.scrollIntoView(f);
+	}, [E, w]);
+	function P() {
+		return b.current === null ? [] : i(b.current);
+	}
+	function F(e, t, n) {
+		let r = e.at(t);
+		D(r === void 0 || t < 0 ? null : {
+			source: n,
+			value: r.value
+		});
+	}
+	function I(e) {
+		let t = e.findIndex((e) => e.value === E?.value);
+		return t === -1 ? e.findIndex((e) => e.value === A) : t;
+	}
+	function L(e, t) {
+		let n = P(), r = Math.max(n.findIndex((e) => e.value === A), 0), i = {
+			first: 0,
+			last: n.length - 1,
+			none: -1,
+			selected: r
+		};
+		S.current = !0, T(!0), F(n, i[e], t);
+	}
+	function R(e, t) {
+		e ? z() : L("selected", t);
+	}
+	function z() {
+		T(!1), D(null);
+	}
+	function B(e) {
+		let t = P().find((t) => t.value === e);
+		O(e), h?.(t?.textValue ?? ""), z();
+	}
+	function V() {
+		let e = P().find((e) => e.value === E?.value);
+		e === void 0 ? z() : e.disabled || B(e.value);
+	}
+	function H(e) {
+		let t = P(), n = t.findIndex((e) => e.value === E?.value), r = n === -1 && e === "ArrowUp" ? t.length - 1 : a({
+			count: t.length,
+			currentIndex: n,
+			key: e,
+			orientation: "vertical",
+			wraps: !1
+		});
+		return r === null || r === -1 ? [
+			"ArrowDown",
+			"ArrowUp",
+			"End",
+			"Home"
+		].includes(e) : (F(t, r, "keyboard"), !0);
+	}
+	function U() {
+		return t(x.current, Date.now());
+	}
+	function W(r) {
+		let i = Date.now();
+		if (Array.from(r).length !== 1 || r === " " && !t(x.current, i)) return !1;
+		x.current = e(x.current, r, i);
+		let a = P(), o = a.map((e) => e.textValue), s = n(o, I(a), x.current.text);
+		return s !== null && F(a, s, "keyboard"), !0;
+	}
+	function G() {
+		return P().length;
+	}
+	function K() {
+		C.current = !0;
+	}
+	function q(e) {
+		b.current = e;
+	}
+	function J(e) {
+		D({
+			source: "pointer",
+			value: e
+		});
+	}
+	return {
+		activeDescendant: w && E !== null ? r(v, E.value) : void 0,
+		attachList: q,
+		baseId: v,
+		close: z,
+		commitActive: V,
+		context: {
+			activateFromPointer: J,
+			active: E,
+			baseId: v,
+			commit: B,
+			filter: m,
+			query: g,
+			selectedValue: A,
+			setActive: D,
+			setSelectedContent: j
+		},
+		controlId: p ?? `${v}-control`,
+		countShown: G,
+		isTypingAhead: U,
+		listId: y,
+		matchFirst: K,
+		moveByKey: H,
+		open: w,
+		openList: L,
+		select: O,
+		selectedContent: k,
+		selectedValue: A,
+		toggleList: R,
+		typeAhead: W
+	};
+}
+export { p as useComboboxList };

package/dist/components/Combobox/useComboboxOption.d.ts

@@ -0,0 +1,35 @@
+import type { ReactNode, RefObject } from "react";
+interface UseComboboxOptionOptions {
+    /**
+     * The option's label
+     */
+    children: ReactNode;
+    /**
+     * The option's leading content
+     */
+    leading: ReactNode;
+    /**
+     * The option element
+     */
+    optionRef: RefObject<HTMLDivElement | null>;
+    /**
+     * Whether the option is selected
+     */
+    selected: boolean;
+    /**
+     * The text the consumer gave the option, if any
+     */
+    textValue: string | undefined;
+    /**
+     * The option's value
+     */
+    value: string;
+}
+/**
+ * Keeps an option in step with its combobox: shown or hidden for the filter, showing itself in the field while
+ * selected, and no longer active once it unmounts
+ *
+ * @param options the option's state, content and element
+ */
+export declare function useComboboxOption({ children, leading, optionRef, selected, textValue, value, }: UseComboboxOptionOptions): void;
+export {};

package/dist/components/Combobox/useComboboxOption.js

@@ -0,0 +1,46 @@
+import { optionTextValue as e } from "../../collections/renderedOptions.js";
+import { isOptionShown as t } from "./isOptionShown.js";
+import { useComboboxContext as n } from "./useComboboxContext.js";
+import { useLayoutEffect as r } from "react";
+import { c as i } from "react/compiler-runtime";
+// src/components/Combobox/useComboboxOption.ts
+function a(a) {
+	let o = i(29), { children: s, leading: c, optionRef: l, selected: u, textValue: d, value: f } = a, { filter: p, query: m, setActive: h, setSelectedContent: g } = n("ComboboxOption"), _;
+	o[0] !== p || o[1] !== l || o[2] !== m ? (_ = () => {
+		let n = l.current;
+		n !== null && (n.hidden = !t(p, m, e(n)));
+	}, o[0] = p, o[1] = l, o[2] = m, o[3] = _) : _ = o[3];
+	let v;
+	o[4] !== s || o[5] !== p || o[6] !== l || o[7] !== m || o[8] !== d ? (v = [
+		s,
+		p,
+		l,
+		m,
+		d
+	], o[4] = s, o[5] = p, o[6] = l, o[7] = m, o[8] = d, o[9] = v) : v = o[9], r(_, v);
+	let y;
+	o[10] !== s || o[11] !== c || o[12] !== l || o[13] !== u || o[14] !== g || o[15] !== f ? (y = () => {
+		let t = l.current;
+		u && t !== null && g({
+			label: s,
+			leading: c,
+			text: e(t),
+			value: f
+		});
+	}, o[10] = s, o[11] = c, o[12] = l, o[13] = u, o[14] = g, o[15] = f, o[16] = y) : y = o[16];
+	let b;
+	o[17] !== s || o[18] !== c || o[19] !== l || o[20] !== u || o[21] !== g || o[22] !== d || o[23] !== f ? (b = [
+		s,
+		c,
+		l,
+		u,
+		g,
+		d,
+		f
+	], o[17] = s, o[18] = c, o[19] = l, o[20] = u, o[21] = g, o[22] = d, o[23] = f, o[24] = b) : b = o[24], r(y, b);
+	let x, S;
+	o[25] !== h || o[26] !== f ? (x = () => () => {
+		h((e) => e?.value === f ? null : e);
+	}, S = [h, f], o[25] = h, o[26] = f, o[27] = x, o[28] = S) : (x = o[27], S = o[28]), r(x, S);
+}
+export { a as useComboboxOption };

package/dist/components/Combobox/useComboboxSelection.d.ts

@@ -0,0 +1,45 @@
+import type { Dispatch, SetStateAction } from "react";
+import type { SelectedContent } from "./ComboboxContext";
+interface UseComboboxSelectionOptions {
+    /**
+     * The value selected at first when uncontrolled
+     */
+    defaultValue: string | null;
+    /**
+     * Called with the new selection
+     */
+    onValueChange: ((value: string | null) => void) | undefined;
+    /**
+     * The selected value when controlled, or undefined when uncontrolled
+     */
+    value: string | null | undefined;
+}
+/**
+ * A combobox's selection and what its selected option shows
+ */
+export interface ComboboxSelection {
+    /**
+     * Selects a value, or none, reporting it unless it is already selected
+     */
+    select: (value: string | null) => void;
+    /**
+     * What the selected option shows in the field, or null when it has not rendered
+     */
+    selectedContent: SelectedContent | null;
+    /**
+     * The selected value, or null for none
+     */
+    selectedValue: string | null;
+    /**
+     * Sets what the selected option shows, which it hands over as it renders
+     */
+    setSelectedContent: Dispatch<SetStateAction<SelectedContent | null>>;
+}
+/**
+ * Holds a combobox's selection, controlled or uncontrolled, and what the selected option shows in the field
+ *
+ * @param options the selection props and the change callback
+ * @returns the selection and the ways it changes
+ */
+export declare function useComboboxSelection({ defaultValue, onValueChange, value, }: UseComboboxSelectionOptions): ComboboxSelection;
+export {};

package/dist/components/Combobox/useComboboxSelection.js

@@ -0,0 +1,17 @@
+import { useState as e } from "react";
+import { c as t } from "react/compiler-runtime";
+// src/components/Combobox/useComboboxSelection.ts
+function n(n) {
+	let r = t(8), { defaultValue: i, onValueChange: a, value: o } = n, [s, c] = e(i), [l, u] = e(null), d = o === void 0 ? s : o, f;
+	r[0] !== a || r[1] !== d || r[2] !== o ? (f = function(e) {
+		e !== d && (o === void 0 && c(e), a?.(e));
+	}, r[0] = a, r[1] = d, r[2] = o, r[3] = f) : f = r[3];
+	let p = f, m = l?.value === d ? l : null, h;
+	return r[4] !== p || r[5] !== d || r[6] !== m ? (h = {
+		select: p,
+		selectedContent: m,
+		selectedValue: d,
+		setSelectedContent: u
+	}, r[4] = p, r[5] = d, r[6] = m, r[7] = h) : h = r[7], h;
+}
+export { n as useComboboxSelection };

package/dist/components/Combobox/useResultsAnnouncement.d.ts

@@ -0,0 +1,23 @@
+/**
+ * What an `Autocomplete`'s live region says
+ */
+interface ResultsAnnouncement {
+    /**
+     * The live region's text
+     */
+    announcement: string;
+    /**
+     * Says how many options match once typing pauses while the list stays open, replacing any count still to come
+     */
+    announceCount: () => void;
+}
+/**
+ * Announces how many options match once typing pauses for the type-ahead window
+ *
+ * @param resultsLabel the words for a number of matches
+ * @param countShown counts the options the filter shows
+ * @param listOpen whether the list is open; a count still to come is dropped as it closes
+ * @returns the live region's text and a way to announce the count
+ */
+export declare function useResultsAnnouncement(resultsLabel: (count: number) => string, countShown: () => number, listOpen: boolean): ResultsAnnouncement;
+export {};

package/dist/components/Combobox/useResultsAnnouncement.js

@@ -0,0 +1,24 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { c as r } from "react/compiler-runtime";
+// src/components/Combobox/useResultsAnnouncement.ts
+var i = 500;
+function a(a, o, s) {
+	let c = r(11), [l, u] = n(""), d = t(void 0), f, p;
+	c[0] === Symbol.for("react.memo_cache_sentinel") ? (f = () => () => clearTimeout(d.current), p = [], c[0] = f, c[1] = p) : (f = c[0], p = c[1]), e(f, p);
+	let m, h;
+	c[2] === s ? (m = c[3], h = c[4]) : (m = () => {
+		s || clearTimeout(d.current);
+	}, h = [s], c[2] = s, c[3] = m, c[4] = h), e(m, h);
+	let g;
+	c[5] !== o || c[6] !== a ? (g = function() {
+		u(""), clearTimeout(d.current), d.current = setTimeout(() => {
+			u(a(o()));
+		}, i);
+	}, c[5] = o, c[6] = a, c[7] = g) : g = c[7];
+	let _ = g, v;
+	return c[8] !== _ || c[9] !== l ? (v = {
+		announceCount: _,
+		announcement: l
+	}, c[8] = _, c[9] = l, c[10] = v) : v = c[10], v;
+}
+export { a as useResultsAnnouncement };

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

@@ -0,0 +1,2 @@
+export { useContextMenu } from "./useContextMenu";
+export type { UseContextMenuOptions, UseContextMenuResult } from "./useContextMenu";

package/dist/components/ContextMenu/useContextMenu.d.ts

@@ -0,0 +1,112 @@
+import type { CSSProperties, FocusEvent, KeyboardEvent, MouseEvent, PointerEvent } from "react";
+import type { RequiredAccessibleName } from "../../accessibility";
+import type { MenuOverlayProps } from "../Menu/Menu";
+/**
+ * Options for `useContextMenu`
+ */
+export interface UseContextMenuOptions {
+    /**
+     * Called with the new open state when the menu opens or closes
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Props `getTargetProps` sets on the region
+ */
+interface ContextMenuTargetProps {
+    /**
+     * Marks the region, so a region inside it handles its own events
+     */
+    "data-context-menu-region": "";
+    /**
+     * Opens the menu at the pointer, or at the focused element when no pointer sent the event
+     */
+    onContextMenu: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Opens the menu at the focused element on Shift+F10 or the ContextMenu key
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * Notes the pointer pressing in the region, which the menu holds while the press that opened it lasts, and opens the
+     * menu on a touch held in place
+     */
+    onPointerDown: (event: PointerEvent<HTMLElement>) => void;
+    /**
+     * Names the region as the menu's anchor, and stops iOS showing its callout on a held link or image
+     */
+    style: CSSProperties;
+}
+/**
+ * Props `getMenuProps` sets on the `Menu`
+ */
+interface ContextMenuOverlayProps extends MenuOverlayProps {
+    /**
+     * Places the menu at the point it opened at rather than beside the region
+     */
+    "data-context-menu": "";
+    /**
+     * Closes the menu when focus leaves it
+     */
+    onBlur: (event: FocusEvent<HTMLElement>) => void;
+    /**
+     * Keeps the browser's menu from opening over the menu
+     */
+    onContextMenu: (event: MouseEvent<HTMLElement>) => void;
+    /**
+     * Closes the menu on Tab, returning focus to where it opened from
+     */
+    onKeyDown: (event: KeyboardEvent<HTMLElement>) => void;
+    /**
+     * The point's distances from each edge of the region
+     */
+    style: CSSProperties;
+}
+/**
+ * Prop getters for the region a context menu opens in and its `Menu`, whether it is open, what it opened for, and a
+ * way to close it
+ */
+export interface UseContextMenuResult {
+    /**
+     * Closes the menu, returning focus to where it opened from as choosing an item does, and reports `false` through
+     * `onOpenChange`
+     */
+    close: () => void;
+    /**
+     * Returns the props to spread on the `Menu`, merged with the given ones, which must name the menu with `aria-label`
+     * or `aria-labelledby`, since no trigger names it
+     */
+    getMenuProps: <Props extends object>(props: Props & RequiredAccessibleName & Partial<ContextMenuOverlayProps>) => Omit<Props, keyof ContextMenuOverlayProps> & ContextMenuOverlayProps;
+    /**
+     * Returns the props to spread on the region the menu opens in, merged with any given: where both set a handler, both
+     * run, the given one first, and `style` objects merge. Give the region's own `style` here rather than after the
+     * spread, which would drop the anchor name the menu is placed by.
+     */
+    getTargetProps: <Props extends object>(props?: Props & Partial<ContextMenuTargetProps>) => Omit<Props, keyof ContextMenuTargetProps> & ContextMenuTargetProps;
+    /**
+     * Whether the menu is open
+     */
+    open: boolean;
+    /**
+     * The element the menu last opened for, such as the one under the pointer; `null` until it first opens
+     */
+    target: Element | null;
+}
+/**
+ * Connects a `Menu` to a region, such as a list of files or a canvas, so a right-click in the region opens the menu at
+ * the pointer, with focus on the menu itself, and the next Down or Up moves to the first or last item. Shift+F10 or the
+ * ContextMenu key opens it below the focused element, with focus on its first item, and a touch held for half a second
+ * opens it at the touch, as a right-click does. Choosing an item, Escape, Tab or a click outside closes it, and focus
+ * goes back to the element in the region that had it when it opened, unless a click outside put it elsewhere. `target`
+ * tells which element the menu opened for, so one menu can serve every row.
+ *
+ * @param options the change callback
+ * @returns prop getters for the region and the `Menu`, whether it is open, what it opened for, and `close`
+ *
+ * @example
+ * const contextMenu = useContextMenu();
+ *
+ * <ul {...contextMenu.getTargetProps()} aria-label="Files">…</ul>
+ * <Menu {...contextMenu.getMenuProps({ "aria-label": "File actions" })}>…</Menu>
+ */
+export declare function useContextMenu({ onOpenChange }?: UseContextMenuOptions): UseContextMenuResult;
+export {};

package/dist/components/ContextMenu/useContextMenu.js

@@ -0,0 +1,202 @@
+import { closeWhenFocusLeaves as e } from "../../menus/closeWhenFocusLeaves.js";
+import { focusOnOpening as t } from "../../menus/focusOnOpening.js";
+import { hasModifier as n } from "../../menus/hasModifier.js";
+import { leaveMenuOnTab as r } from "../../menus/leaveMenuOnTab.js";
+import { watchRemovals as i } from "../../menus/watchRemovals.js";
+import { mergeProps as a } from "../../overlays/mergeProps.js";
+import { syncPopover as o } from "../../overlays/syncPopover.js";
+import { usePopover as s } from "../Popover/usePopover.js";
+import { watchLongPress as c } from "./watchLongPress.js";
+import { useEffect as l, useRef as u, useState as d } from "react";
+// src/components/ContextMenu/useContextMenu.ts
+function f({ onOpenChange: f } = {}) {
+	let h = s({
+		onOpenChange: f,
+		placement: "bottom-start"
+	}), [S, C] = d(null), w = u("menu"), T = u(null), E = u(!1), D = u(!1), O = u(null), k = u(null), A = u(!1), j = u(null), M = u(!1), { anchorName: N, id: P } = h.getOverlayProps();
+	l(() => () => {
+		O.current?.(), B();
+	}, []), l(() => {
+		let e = S?.page.getElementById(P);
+		if (S === null || e == null) return;
+		let n;
+		return e.matches(":popover-open") ? t(e, S.focus) : (w.current = S.focus, n = o(e, !0)), S.pressingPointer !== null && y(e, S.pressingPointer), n;
+	}, [P, S]);
+	function F(e) {
+		if (!I(e) || (B(), p(e)) || (e.preventDefault(), L(e.nativeEvent))) return;
+		if (m(e.nativeEvent)) {
+			z(e.currentTarget, e.target);
+			return;
+		}
+		let t = e.buttons === 0 ? null : k.current, n = {
+			bottom: e.clientY,
+			top: e.clientY,
+			x: e.clientX
+		};
+		H(e.currentTarget, e.target, n, "menu", t);
+	}
+	function I(e) {
+		let t = e.target.closest("[data-context-menu-region], [role=\"menu\"]");
+		return t === null || t === e.currentTarget;
+	}
+	function L(e) {
+		let t = e.pointerType;
+		return t === "touch" && M.current || t === "" && A.current;
+	}
+	function R(e) {
+		!(e.key === "ContextMenu" || e.key === "F10" && e.shiftKey) || !I(e) || e.defaultPrevented || n(e) || g(e.target) || (e.preventDefault(), z(e.currentTarget, e.target), A.current = !0);
+	}
+	function z(e, t) {
+		let n = e.ownerDocument, r = n.defaultView, i = t.getBoundingClientRect(), a = r?.getComputedStyle(n.getElementById(P) ?? t).direction === "rtl", o = r?.innerWidth ?? i.right, s = r?.innerHeight ?? i.bottom;
+		H(e, t, {
+			bottom: _(i.top, s),
+			top: _(i.bottom, s),
+			x: _(a ? i.right : i.left, o)
+		}, "first", null);
+	}
+	function B() {
+		j.current?.(), j.current = null;
+	}
+	function V(e) {
+		if (k.current = e.pointerId, e.pointerType !== "touch" || j.current !== null || !I(e) || g(e.target)) return;
+		let t = e.currentTarget, n = e.target, { clientX: r, clientY: i, pointerId: a } = e;
+		M.current = !1, j.current = c({
+			clientX: r,
+			clientY: i,
+			pointerId: a
+		}, t.ownerDocument, {
+			onEnd: () => {
+				j.current = null;
+			},
+			onLongPress: () => {
+				M.current = !0, H(t, n, {
+					bottom: i,
+					top: i,
+					x: r
+				}, "menu", a);
+			}
+		});
+	}
+	function H(e, t, n, r, i) {
+		let a = e.ownerDocument, o = a.getElementById(P), s = a.activeElement, c = e.getBoundingClientRect();
+		A.current = !1, D.current = !1, s !== null && e.contains(s) && o?.contains(s) !== !0 ? T.current = s : o?.matches(":popover-open") !== !0 && (T.current = null), C({
+			focus: r,
+			offsets: {
+				bottom: c.bottom - n.bottom,
+				left: n.x - c.left,
+				right: c.right - n.x,
+				top: n.top - c.top
+			},
+			page: a,
+			pressingPointer: i,
+			target: t
+		});
+	}
+	function U(e) {
+		let t = e.currentTarget;
+		e.target === t && e.newState === "closed" && (E.current = t.contains(t.ownerDocument.activeElement) || D.current && x(t.ownerDocument), D.current = !1);
+	}
+	function W(e) {
+		let n = e.currentTarget;
+		e.target === n && (O.current?.(), O.current = null, e.newState === "open" ? (O.current = i(n), t(n, w.current)) : (A.current = !1, E.current && (E.current = !1, b(n, T.current))));
+	}
+	function G(e) {
+		e.preventDefault();
+	}
+	function K(e) {
+		r(e, T.current, J);
+	}
+	function q(t) {
+		e(t.currentTarget, t.relatedTarget, () => !1);
+	}
+	function J() {
+		h.open && (D.current = !0), h.close();
+	}
+	function Y(e) {
+		let t = a(e, {
+			close: J,
+			"data-context-menu": "",
+			onBeforeToggle: U,
+			onBlur: q,
+			onContextMenu: G,
+			onKeyDown: K,
+			onToggle: W,
+			style: v(S?.offsets)
+		});
+		return h.getOverlayProps(t);
+	}
+	function X(e) {
+		return a(e, {
+			"data-context-menu-region": "",
+			onContextMenu: F,
+			onKeyDown: R,
+			onPointerDown: V,
+			style: {
+				anchorName: N,
+				WebkitTouchCallout: "none"
+			}
+		});
+	}
+	return {
+		close: J,
+		getMenuProps: Y,
+		getTargetProps: X,
+		open: h.open,
+		target: S?.target ?? null
+	};
+}
+function p(e) {
+	return e.defaultPrevented || g(e.target) || e.shiftKey && !m(e.nativeEvent);
+}
+function m(e) {
+	return "pointerType" in e && e.pointerType === "";
+}
+var h = /* @__PURE__ */ new Set([
+	"button",
+	"checkbox",
+	"color",
+	"file",
+	"hidden",
+	"image",
+	"radio",
+	"range",
+	"reset",
+	"submit"
+]);
+function g(e) {
+	let t = e;
+	switch (t?.tagName) {
+		case "INPUT": return !h.has(t.type);
+		case "SELECT":
+		case "TEXTAREA": return !0;
+		default: {
+			let e = t?.closest("[contenteditable]") ?? null;
+			return e !== null && e.getAttribute("contenteditable") !== "false";
+		}
+	}
+}
+function _(e, t) {
+	return Math.min(Math.max(e, 0), t);
+}
+function v(e) {
+	return e === void 0 ? {} : {
+		"--_sui-context-menu-bottom": `${e.bottom}px`,
+		"--_sui-context-menu-left": `${e.left}px`,
+		"--_sui-context-menu-right": `${e.right}px`,
+		"--_sui-context-menu-top": `${e.top}px`
+	};
+}
+function y(e, t) {
+	try {
+		e.setPointerCapture(t);
+	} catch (e) {
+		if (e?.name !== "NotFoundError") throw e;
+	}
+}
+function b(e, t) {
+	(x(e.ownerDocument) || e.contains(e.ownerDocument.activeElement)) && t?.focus();
+}
+function x(e) {
+	return e.activeElement === null || e.activeElement === e.body;
+}
+export { f as useContextMenu };

package/dist/components/ContextMenu/watchLongPress.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The touch that started a press
+ */
+interface Press {
+    clientX: number;
+    clientY: number;
+    pointerId: number;
+}
+/**
+ * Callbacks for the end of a long-press
+ */
+interface LongPressCallbacks {
+    /**
+     * Called when the press ends, however it ends
+     */
+    onEnd: () => void;
+    /**
+     * Called once the touch has been held long enough
+     */
+    onLongPress: () => void;
+}
+/**
+ * Watches a touch press for being held in place long enough to open a context menu. Moving further than the tolerance,
+ * lifting the finger, the browser cancelling the touch, as it does when a scroll starts, and a second finger all stop
+ * it opening. Until the press ends, text selection is stopped, which iOS would start on held text, and a press held
+ * long enough ends without the mouse events and click browsers send after a touch, which would act on the element
+ * under the finger and move focus out of the menu.
+ *
+ * @param press the `pointerdown` of the touch
+ * @param page the document the touch is in
+ * @param callbacks what to call once the touch is held long enough, and when the press ends
+ * @returns a function that stops watching at once
+ */
+export declare function watchLongPress(press: Press, page: Document, { onEnd, onLongPress }: LongPressCallbacks): () => void;
+export {};