@pitchfork-ui/react 0.2.0 → 0.6.0

package/dist/components/Tooltip/Tooltip2.js

@@ -1,3 +1,4 @@
+import { usePresence } from "../../hooks/usePresence.js";
 import { cx } from "../../utils/cx.js";
 import './Tooltip.css';/* empty css        */
 import { forwardRef, useEffect, useId, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
@@ -87,6 +88,7 @@ var Tooltip = forwardRef(function Tooltip({ content, children, open, placement =
 	const [resolvedPlacement, setResolvedPlacement] = useState(placement);
 	const isControlled = open !== void 0;
 	const isVisible = !disabled && (isControlled ? open : isOpen);
+	const { isMounted, isExiting } = usePresence(Boolean(isVisible), 160);
 	const clearShowTimer = () => {
 		if (showTimerRef.current !== void 0) {
 			window.clearTimeout(showTimerRef.current);
@@ -105,8 +107,6 @@ var Tooltip = forwardRef(function Tooltip({ content, children, open, placement =
 		clearShowTimer();
 		if (isControlled) return;
 		setIsOpen(false);
-		setStyle({ visibility: "hidden" });
-		setResolvedPlacement(placement);
 	};
 	useEffect(() => {
 		return () => {
@@ -141,11 +141,11 @@ var Tooltip = forwardRef(function Tooltip({ content, children, open, placement =
 		},
 		"aria-describedby": isVisible ? tooltipId : void 0,
 		children: children ?? /* @__PURE__ */ jsx("span", {})
-	}), isVisible && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
+	}), isMounted && typeof document !== "undefined" ? createPortal(/* @__PURE__ */ jsx("div", {
 		id: tooltipId,
 		ref: tooltipRef,
 		role: "tooltip",
-		className: cx("pf-tooltip", `pf-tooltip--${resolvedPlacement}`, className),
+		className: cx("pf-tooltip", `pf-tooltip--${resolvedPlacement}`, isExiting && "pf-tooltip--exiting", className),
 		style,
 		children: content
 	}), document.body) : null] });

package/dist/components/TreeView/TreeView.css

@@ -20,7 +20,7 @@
   display: grid;
   grid-template-columns: auto 1fr;
   min-width: 0;
-  padding-left: calc(var(--pf-tree-level, 0) * var(--space-4));
+  padding-inline-start: calc(var(--pf-tree-level, 0) * var(--space-4));
 }
 
 .pf-tree-view__toggle-wrap {
@@ -69,7 +69,7 @@
   min-height: 34px;
   min-width: 0;
   padding: 0 var(--space-2);
-  text-align: left;
+  text-align: start;
   width: 100%;
 }
 

package/dist/hooks/useExitAnimation.js

@@ -0,0 +1,25 @@
+import { useState } from "react";
+//#region src/hooks/useExitAnimation.ts
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Plays an exit animation before signalling removal. Apply `isExiting` to a CSS
+* class that runs the exit keyframes; `onExited` fires after `duration`. When the
+* user prefers reduced motion, `onExited` fires immediately with no animation.
+*/
+function useExitAnimation({ onExited, duration = 220 } = {}) {
+	const [isExiting, setIsExiting] = useState(false);
+	const startExit = () => {
+		if (prefersReducedMotion()) {
+			onExited?.();
+			return;
+		}
+		setIsExiting(true);
+		window.setTimeout(() => onExited?.(), duration);
+	};
+	return {
+		isExiting,
+		startExit
+	};
+}
+//#endregion
+export { useExitAnimation };

package/dist/hooks/usePresence.js

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from "react";
+//#region src/hooks/usePresence.ts
+var prefersReducedMotion = () => typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+/**
+* Keeps a conditionally-rendered element mounted long enough to play an exit
+* animation. Drive it with the `present` prop (e.g. a Modal's `open`): when it
+* flips to false, the element stays mounted with `isExiting` true for `duration`
+* ms, then unmounts. Reduced motion unmounts immediately.
+*/
+function usePresence(present, duration = 200) {
+	const [isExiting, setIsExiting] = useState(false);
+	const wasPresent = useRef(false);
+	useEffect(() => {
+		if (present) {
+			wasPresent.current = true;
+			return;
+		}
+		if (!wasPresent.current || prefersReducedMotion()) return;
+		wasPresent.current = false;
+		setIsExiting(true);
+		const timer = window.setTimeout(() => setIsExiting(false), duration);
+		return () => window.clearTimeout(timer);
+	}, [present, duration]);
+	const exiting = !present && isExiting;
+	return {
+		isMounted: present || exiting,
+		isExiting: exiting
+	};
+}
+//#endregion
+export { usePresence };