haze-ui 1.12.2 → 1.14.0

package/dist/types/utils/floating.d.ts

@@ -0,0 +1,99 @@
+import type { ComponentProps, CSSProperties, Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+/** Lazy feature detection so tests can flip between native and fallback. */
+export declare function supportsNativePopover(): boolean;
+/**
+ * Anchor positioning requires the popover API first: jsdom's
+ * `CSS.supports` returns true for arbitrary declarations, so it must never
+ * be trusted on its own.
+ */
+export declare function supportsAnchorPositioning(): boolean;
+declare const anchoredPlacements: {
+    readonly bottom: import("@linaria/core").LinariaClassName;
+    readonly 'bottom-span': import("@linaria/core").LinariaClassName;
+    readonly 'bottom-center': import("@linaria/core").LinariaClassName;
+    readonly 'bottom-end': import("@linaria/core").LinariaClassName;
+    readonly top: import("@linaria/core").LinariaClassName;
+    readonly left: import("@linaria/core").LinariaClassName;
+    readonly right: import("@linaria/core").LinariaClassName;
+};
+type AnchorablePlacement = keyof typeof anchoredPlacements;
+/**
+ * Panel placement relative to the trigger. `point` leaves positioning
+ * entirely to the consumer (e.g. ContextMenu at the pointer coordinates).
+ */
+export type FloatingPlacement = AnchorablePlacement | 'point';
+type UseFloatingOptions = {
+    open: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    /** Element the panel is anchored to; also the outside-close boundary. */
+    triggerRef: RefObject<HTMLElement | null>;
+    /** The floating panel element. */
+    panelRef: RefObject<HTMLElement | null>;
+};
+export type FloatingBehavior = {
+    open: boolean;
+    native: boolean;
+    anchored: boolean;
+    /**
+     * Whether the panel element is actually shown right now (native path:
+     * mirrored from `toggle` events; fallback path: identical to `open`).
+     * Differs from `open` across the commit→effect gap: `open` flips when
+     * React commits, while the popover only becomes focusable/paintable
+     * after the effect calls showPopover(). Consumers that move focus into
+     * the panel on open must gate on `shown`, or the focus call lands on a
+     * display:none element and is silently dropped (Chromium).
+     */
+    shown: boolean;
+    /** Unique CSS anchor name for this instance (anchored path). */
+    anchorName: string;
+    /** Inline style for the trigger: declares `anchor-name`. */
+    triggerStyle: CSSProperties | undefined;
+    /** Spread on the trigger: records pointerdown for race attribution. */
+    onTriggerPointerDown: () => void;
+    /** Spread as the trigger's click handler: suppression-aware toggle. */
+    onTriggerClick: () => void;
+    /** Spread on the panel: popover attribute + anchor custom property. */
+    panelAttrs: {
+        popover: 'auto' | undefined;
+        style: CSSProperties | undefined;
+    };
+    /** Positioning-skeleton entries for the panel's x-class array. */
+    panelClasses: (string | false)[];
+    triggerRef: RefObject<HTMLElement | null>;
+    panelRef: RefObject<HTMLElement | null>;
+};
+export declare function useFloating({ open, setOpen, triggerRef, panelRef, }: UseFloatingOptions): FloatingBehavior;
+/** x-class entries placing the panel relative to the trigger, per tier. */
+export declare function floatingPlacementClasses(behavior: Pick<FloatingBehavior, 'native' | 'anchored'>, placement: FloatingPlacement): (string | false)[];
+/**
+ * Tier 2 positioning: place the panel under/over/beside the trigger and
+ * re-place on scroll/resize while open. No-op on the anchored and
+ * fallback tiers.
+ */
+export declare function useFloatingPosition({ behavior, placement, }: {
+    behavior: FloatingBehavior;
+    placement: FloatingPlacement;
+}): void;
+type FloatingPanelProps = {
+    /** Behavior record produced by `useFloating` at the floating root. */
+    behavior: FloatingBehavior;
+    /**
+     * Placement relative to the trigger. Omit (or pass 'point') when the
+     * consumer positions the panel itself, e.g. ContextMenu at the pointer.
+     */
+    placement?: FloatingPlacement;
+    /** Consumer visual skin: border, background, shadow, padding. */
+    visualClass?: string;
+    className?: string;
+    children?: ReactNode;
+    /** Merged with the anchor custom property the behavior may set. */
+    style?: CSSProperties;
+} & Omit<ComponentProps<'div'>, 'className' | 'children' | 'style'>;
+/**
+ * The panel element of a floating pair: applies the popover attribute,
+ * the anchor custom property and the tier/placement classes, and runs the
+ * tier-2 position effect. Everything else (id, role, handlers, ref) is
+ * passed through to the underlying div.
+ */
+export declare function FloatingPanel({ behavior, placement, visualClass, className, style, children, ...rest }: FloatingPanelProps): import("react").JSX.Element;
+export {};

package/dist/types/utils/menuKeyboard.d.ts

@@ -0,0 +1,43 @@
+import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';
+/** Enabled items inside a container, in DOM order. */
+export declare function getEnabledMenuItems(container: HTMLElement | null, selector?: string): HTMLElement[];
+type UseMenuKeyboardOptions = {
+    /** Element containing the item children (`[role=menuitem]` by default). */
+    menuRef: RefObject<HTMLElement | null>;
+    /**
+     * Called when the menu should close via keyboard; the caller returns
+     * focus to the trigger.
+     */
+    onClose: () => void;
+    /**
+     * Item selector for containers that are not a `role="menu"` — e.g. the
+     * `[role=option]` list of a Command palette.
+     */
+    selector?: string;
+};
+/**
+ * Keyboard behavior for a roving-tabindex item container (WAI-ARIA menu
+ * button / listbox pattern): ↑/↓ move focus (wrapping, skipping disabled
+ * items), Home/End jump to the ends, Escape closes (returning focus to
+ * the trigger), Tab closes, and printable characters run typeahead.
+ */
+export declare function useMenuKeyboard({ menuRef, onClose, selector, }: UseMenuKeyboardOptions): (event: ReactKeyboardEvent) => void;
+type UseRovingTabindexOptions = {
+    menuRef: RefObject<HTMLElement | null>;
+    /**
+     * While false the effect is inert — panels that stay mounted when
+     * closed (Menu, Combobox-style listboxes) manage the tab stops only
+     * while open.
+     */
+    active: boolean;
+    selector?: string;
+};
+/**
+ * Roving tabindex for a menu/listbox container: exactly one item is a tab
+ * stop at any time. On activation the current stop is kept (first item
+ * initially); a `focusin` listener moves the stop with focus, and a
+ * MutationObserver re-syncs when the item set changes (e.g. a filtered
+ * Command list).
+ */
+export declare function useRovingTabindex({ menuRef, active, selector, }: UseRovingTabindexOptions): void;
+export {};

package/dist/utils/floating.js

@@ -0,0 +1,181 @@
+
+import { classnames as e } from "./classnames.js";
+/* empty css                   */
+import { jsx as t } from "react/jsx-runtime";
+import { useCallback as n, useEffect as r, useId as i, useRef as a, useState as o } from "react";
+//#region src/lib/utils/floating.tsx
+var s = 500;
+function c() {
+	return typeof HTMLElement < "u" && "popover" in HTMLElement.prototype;
+}
+function l() {
+	return c() && typeof CSS < "u" && typeof CSS.supports == "function" && CSS.supports("anchor-name: --haze-floating-probe");
+}
+var u = "haze-floating__floatingNative", d = "haze-floating__floatingAnchored", f = "haze-floating__floatingFixed", p = "haze-floating__floatingHidden", m = "haze-floating__anchoredBottom", h = "haze-floating__anchoredBottomSpan", g = "haze-floating__anchoredBottomCenter", _ = "haze-floating__anchoredBottomEnd", v = "haze-floating__anchoredTop", y = "haze-floating__anchoredLeft", b = "haze-floating__anchoredRight", x = "haze-floating__fallbackBottom", S = x, C = "haze-floating__fallbackBottomCenter", w = "haze-floating__fallbackBottomEnd", T = "haze-floating__fallbackTop", E = "haze-floating__fallbackLeft", D = "haze-floating__fallbackRight", O = "haze-floating__gapBelow", k = "haze-floating__gapAbove", A = "haze-floating__gapBefore", j = "haze-floating__gapAfter", M = {
+	bottom: m,
+	"bottom-span": h,
+	"bottom-center": g,
+	"bottom-end": _,
+	top: v,
+	left: y,
+	right: b
+}, N = {
+	bottom: x,
+	"bottom-span": S,
+	"bottom-center": C,
+	"bottom-end": w,
+	top: T,
+	left: E,
+	right: D
+}, P = {
+	bottom: O,
+	"bottom-span": O,
+	"bottom-center": O,
+	"bottom-end": O,
+	top: k,
+	left: A,
+	right: j
+};
+function F({ open: e, setOpen: t, triggerRef: m, panelRef: h }) {
+	let g = `--haze-floating-${i().replace(/[^a-zA-Z0-9]/g, "")}`, _ = c(), v = l(), y = a(!1), [b, x] = o(!1), S = a(null), C = a(-Infinity), w = a(-Infinity);
+	r(() => {
+		let n = h.current;
+		if (!n || !_) return;
+		n !== S.current && (S.current = n, y.current = !1, x(!1));
+		let r = (n) => {
+			let r = n.newState;
+			y.current = r === "open", x(y.current), r === "closed" && e ? (performance.now() - C.current < s && (w.current = performance.now()), C.current = -Infinity, t(!1)) : r === "open" && !e && t(!0);
+		};
+		return n.addEventListener("toggle", r), e && !y.current ? n.showPopover() : !e && y.current && n.hidePopover(), () => n.removeEventListener("toggle", r);
+	}, [
+		_,
+		e,
+		t,
+		h
+	]), r(() => {
+		if (_ || !e) return;
+		let n = (e) => e instanceof Node && !!(m.current?.contains(e) || h.current?.contains(e)), r = (e) => {
+			n(e.target) || t(!1);
+		}, i = (e) => {
+			e.key === "Escape" && t(!1);
+		};
+		return document.addEventListener("pointerdown", r), document.addEventListener("keydown", i), () => {
+			document.removeEventListener("pointerdown", r), document.removeEventListener("keydown", i);
+		};
+	}, [
+		_,
+		e,
+		t,
+		m,
+		h
+	]);
+	let T = n(() => {
+		e && (C.current = performance.now());
+	}, [e]), E = n(() => {
+		if (performance.now() - w.current < s) {
+			w.current = -Infinity;
+			return;
+		}
+		t((e) => !e);
+	}, [t]);
+	return {
+		open: e,
+		native: _,
+		anchored: v,
+		shown: _ ? b : e,
+		anchorName: g,
+		triggerStyle: v ? { anchorName: g } : void 0,
+		onTriggerPointerDown: T,
+		onTriggerClick: E,
+		panelAttrs: {
+			popover: _ ? "auto" : void 0,
+			style: v ? { "--haze-floating-anchor": g } : void 0
+		},
+		panelClasses: [
+			_ && u,
+			_ && v && d,
+			_ && !v && f,
+			!_ && !e && p
+		],
+		triggerRef: m,
+		panelRef: h
+	};
+}
+function I(e, t) {
+	return t === "point" ? [] : [
+		e.native && e.anchored && M[t],
+		e.native && !e.anchored && P[t],
+		!e.native && N[t]
+	];
+}
+function L(e, t) {
+	return parseFloat(getComputedStyle(e)[t]) || 0;
+}
+function R(e, t, n) {
+	if (n === "point") return;
+	let r = t.getBoundingClientRect(), i = e.getBoundingClientRect(), a = r.left + r.width / 2 - i.width / 2, o = r.top + r.height / 2 - i.height / 2;
+	switch (n) {
+		case "bottom":
+		case "bottom-span":
+			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${r.left}px`;
+			return;
+		case "bottom-center":
+			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${a}px`;
+			return;
+		case "bottom-end":
+			e.style.top = `${r.bottom + L(e, "marginTop")}px`, e.style.left = `${r.right - i.width}px`;
+			return;
+		case "top":
+			e.style.top = `${r.top - i.height - L(e, "marginBottom")}px`, e.style.left = `${a}px`;
+			return;
+		case "left":
+			e.style.top = `${o}px`, e.style.left = `${r.left - i.width - L(e, "marginRight")}px`;
+			return;
+		case "right":
+			e.style.top = `${o}px`, e.style.left = `${r.right + L(e, "marginLeft")}px`;
+			return;
+	}
+}
+function z({ behavior: e, placement: t }) {
+	let { native: n, anchored: i, open: a, triggerRef: o, panelRef: s } = e;
+	r(() => {
+		if (!n || i || t === "point" || !a) return;
+		let e = s.current, r = o.current;
+		if (!e || !r) return;
+		let c = () => R(e, r, t);
+		return c(), window.addEventListener("scroll", c, !0), window.addEventListener("resize", c), () => {
+			window.removeEventListener("scroll", c, !0), window.removeEventListener("resize", c);
+		};
+	}, [
+		n,
+		i,
+		a,
+		t,
+		o,
+		s
+	]);
+}
+function B({ behavior: n, placement: r, visualClass: i, className: a, style: o, children: s, ...c }) {
+	z({
+		behavior: n,
+		placement: r ?? "point"
+	});
+	let l = n.panelAttrs.style || o ? {
+		...n.panelAttrs.style,
+		...o
+	} : void 0;
+	return /* @__PURE__ */ t("div", {
+		...c,
+		...n.panelAttrs,
+		style: l,
+		className: e([
+			i,
+			...n.panelClasses,
+			...r ? I(n, r) : [],
+			a
+		]),
+		children: s
+	});
+}
+//#endregion
+export { B as FloatingPanel, I as floatingPlacementClasses, l as supportsAnchorPositioning, c as supportsNativePopover, F as useFloating, z as useFloatingPosition };

package/dist/utils/menuKeyboard.js

@@ -0,0 +1,88 @@
+import { useCallback as e, useEffect as t, useRef as n } from "react";
+//#region src/lib/utils/menuKeyboard.ts
+var r = 500, i = "[role=\"menuitem\"]:not([disabled])";
+function a(e, t = i) {
+	return e ? Array.from(e.querySelectorAll(t)) : [];
+}
+function o({ menuRef: i, onClose: o, selector: s }) {
+	let c = n(""), l = n(0);
+	return t(() => () => window.clearTimeout(l.current), []), e((e) => {
+		let t = a(i.current, s);
+		if (t.length === 0) return;
+		let n = t.indexOf(document.activeElement), u = (e) => t[e]?.focus();
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), u((n + 1) % t.length);
+				return;
+			case "ArrowUp":
+				e.preventDefault(), u((n - 1 + t.length) % t.length);
+				return;
+			case "Home":
+				e.preventDefault(), u(0);
+				return;
+			case "End":
+				e.preventDefault(), u(t.length - 1);
+				return;
+			case "Escape":
+				e.preventDefault(), o();
+				return;
+			case "Tab":
+				e.preventDefault(), o();
+				return;
+			default: {
+				if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
+				e.preventDefault();
+				let i = (c.current + e.key).toLowerCase();
+				c.current = i, window.clearTimeout(l.current), l.current = window.setTimeout(() => {
+					c.current = "";
+				}, r);
+				let a = n + 1;
+				for (let e = 0; e < t.length; e++) {
+					let n = (a + e) % t.length;
+					if (t[n].textContent.toLowerCase().startsWith(i)) {
+						u(n);
+						return;
+					}
+				}
+			}
+		}
+	}, [
+		i,
+		o,
+		s
+	]);
+}
+function s({ menuRef: e, active: n, selector: r = i }) {
+	t(() => {
+		let t = e.current;
+		if (!n || !t) return;
+		let i = () => {
+			let e = a(t, r);
+			if (e.length === 0) return;
+			let n = e.findIndex((e) => e.tabIndex === 0), i = n >= 0 ? n : 0;
+			e.forEach((e, t) => {
+				e.tabIndex = t === i ? 0 : -1;
+			});
+		};
+		i();
+		let o = new MutationObserver(i);
+		o.observe(t, {
+			childList: !0,
+			subtree: !0
+		});
+		let s = (e) => {
+			a(t, r).forEach((t) => {
+				t.tabIndex = t === e.target ? 0 : -1;
+			});
+		};
+		return t.addEventListener("focusin", s), () => {
+			o.disconnect(), t.removeEventListener("focusin", s);
+		};
+	}, [
+		e,
+		n,
+		r
+	]);
+}
+//#endregion
+export { a as getEnabledMenuItems, o as useMenuKeyboard, s as useRovingTabindex };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.12.2",
+  "version": "1.14.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",
@@ -9,7 +9,8 @@
   "exports": {
     ".": {
       "types": "./dist/types/index.d.ts",
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
     },
     "./styles.css": "./dist/haze-ui.css",
     "./css/*": "./dist/css/*"
@@ -29,9 +30,11 @@
     "lint": "eslint --fix src *.mjs",
     "deploy": "npm run build:demo && gh-pages -d dist",
     "test": "vitest run --passWithNoTests",
+    "test:e2e": "playwright test --config e2e/playwright.config.ts",
     "test:watch": "vitest",
     "prepublishOnly": "npm run build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "size": "size-limit"
   },
   "repository": {
     "type": "git",
@@ -49,11 +52,10 @@
   "peerDependencies": {
     "@linaria/core": "^7.0.0 || ^8.0.0",
     "react": "^19.0.0",
-    "react-f0rm": ">=0.7.0"
+    "react-f0rm": ">=0.7.0 <0.9.0"
   },
   "dependencies": {
-    "react-toolroom": "^0.18.4",
-    "react-use-control": "^1.3.2"
+    "react-use-control": "^1.5.0"
   },
   "devDependencies": {
     "@babel/core": "^8.0.1",
@@ -64,6 +66,8 @@
     "@linaria/core": "^8.2.0",
     "@native-router/core": "^1.10.0",
     "@native-router/react": "^1.9.0",
+    "@playwright/test": "^1.62.1",
+    "@size-limit/file": "^13.0.3",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.6",
@@ -95,15 +99,37 @@
     "ramda": "^0.32.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-f0rm": "^0.7.0",
+    "react-f0rm": "^0.8.0",
     "react-icons": "^5.7.0",
+    "react-toolroom": "^0.18.4",
     "rollup-plugin-type-as-json-schema": "^0.2.6",
     "semantic-release": "^25.0.9",
+    "size-limit": "^13.0.3",
     "terser": "^5.51.2",
     "tools-config": "^0.3.1",
     "tsc-alias": "^1.9.2",
     "typescript": "^6.0.3",
     "vite": "^8.2.2",
     "vitest": "^4.1.11"
-  }
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "16 KB"
+    },
+    {
+      "path": "dist/index.js",
+      "limit": "4 KB",
+      "gzip": true
+    },
+    {
+      "path": "dist/haze-ui.css",
+      "limit": "136 KB"
+    },
+    {
+      "path": "dist/haze-ui.css",
+      "limit": "19 KB",
+      "gzip": true
+    }
+  ]
 }

package/dist/components/DropdownMenu/useMenuKeyboard.js

@@ -1,52 +0,0 @@
-import { useCallback as e, useEffect as t, useRef as n } from "react";
-//#region src/lib/components/DropdownMenu/useMenuKeyboard.ts
-var r = 500;
-function i(e) {
-	return e ? Array.from(e.querySelectorAll("[role=\"menuitem\"]:not([disabled])")) : [];
-}
-function a({ menuRef: a, onClose: o }) {
-	let s = n(""), c = n(0);
-	return t(() => () => window.clearTimeout(c.current), []), e((e) => {
-		let t = i(a.current);
-		if (t.length === 0) return;
-		let n = t.indexOf(document.activeElement), l = (e) => t[e]?.focus();
-		switch (e.key) {
-			case "ArrowDown":
-				e.preventDefault(), l((n + 1) % t.length);
-				return;
-			case "ArrowUp":
-				e.preventDefault(), l((n - 1 + t.length) % t.length);
-				return;
-			case "Home":
-				e.preventDefault(), l(0);
-				return;
-			case "End":
-				e.preventDefault(), l(t.length - 1);
-				return;
-			case "Escape":
-				e.preventDefault(), o();
-				return;
-			case "Tab":
-				e.preventDefault(), o();
-				return;
-			default: {
-				if (e.key.length !== 1 || e.ctrlKey || e.metaKey || e.altKey) return;
-				e.preventDefault();
-				let i = (s.current + e.key).toLowerCase();
-				s.current = i, window.clearTimeout(c.current), c.current = window.setTimeout(() => {
-					s.current = "";
-				}, r);
-				let a = n + 1;
-				for (let e = 0; e < t.length; e++) {
-					let n = (a + e) % t.length;
-					if (t[n].textContent.toLowerCase().startsWith(i)) {
-						l(n);
-						return;
-					}
-				}
-			}
-		}
-	}, [a, o]);
-}
-//#endregion
-export { i as getEnabledMenuItems, a as useMenuKeyboard };

package/dist/types/components/DropdownMenu/useMenuKeyboard.d.ts

@@ -1,19 +0,0 @@
-import type { KeyboardEvent as ReactKeyboardEvent, RefObject } from 'react';
-/** Enabled menu items inside a menu container, in DOM order. */
-export declare function getEnabledMenuItems(container: HTMLElement | null): HTMLElement[];
-type UseMenuKeyboardOptions = {
-    /** Element containing the `[role=menuitem]` children. */
-    menuRef: RefObject<HTMLElement | null>;
-    /** Called when the menu should close via keyboard; the caller returns
-     * focus to the trigger. */
-    onClose: () => void;
-};
-/**
- * Keyboard behavior for a `role="menu"` container with roving-tabindex
- * items: ↑/↓ move focus (wrapping, skipping disabled items), Home/End
- * jump to the ends, Escape closes (returning focus to the trigger), Tab
- * closes, and printable characters run typeahead — matching the WAI-ARIA
- * Menu Button pattern.
- */
-export declare function useMenuKeyboard({ menuRef, onClose }: UseMenuKeyboardOptions): (event: ReactKeyboardEvent) => void;
-export {};

package/dist/types/hooks/index.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/types/utils/index.d.ts

@@ -1 +0,0 @@
-export {};