@mantine/core 9.6.3 → 9.7.0

package/esm/components/Tour/is-element-in-view.mjs

@@ -0,0 +1,30 @@
+"use client";
+//#region packages/@mantine/core/src/components/Tour/is-element-in-view.ts
+function isScrollable(element) {
+	const { overflow, overflowX, overflowY } = getComputedStyle(element);
+	return /(auto|scroll|hidden)/.test(`${overflow} ${overflowX} ${overflowY}`);
+}
+function isElementInView(element) {
+	const rect = element.getBoundingClientRect();
+	if (rect.width === 0 && rect.height === 0) return false;
+	const top = rect.top;
+	const left = rect.left;
+	const bottom = rect.top + rect.height;
+	const right = rect.left + rect.width;
+	if (top < 0 || left < 0 || bottom > window.innerHeight || right > window.innerWidth) return false;
+	let parent = element.parentElement;
+	while (parent && parent !== document.body) {
+		if (isScrollable(parent)) {
+			const parentRect = parent.getBoundingClientRect();
+			const clientTop = parentRect.top + parent.clientTop;
+			const clientLeft = parentRect.left + parent.clientLeft;
+			if (top < clientTop || left < clientLeft || bottom > clientTop + parent.clientHeight || right > clientLeft + parent.clientWidth) return false;
+		}
+		parent = parent.parentElement;
+	}
+	return true;
+}
+//#endregion
+export { isElementInView };
+
+//# sourceMappingURL=is-element-in-view.mjs.map

package/esm/components/Tour/is-element-in-view.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-element-in-view.mjs","names":[],"sources":["../../../src/components/Tour/is-element-in-view.ts"],"sourcesContent":["function isScrollable(element: HTMLElement) {\n  const { overflow, overflowX, overflowY } = getComputedStyle(element);\n  return /(auto|scroll|hidden)/.test(`${overflow} ${overflowX} ${overflowY}`);\n}\n\nexport function isElementInView(element: HTMLElement) {\n  const rect = element.getBoundingClientRect();\n\n  if (rect.width === 0 && rect.height === 0) {\n    return false;\n  }\n\n  const top = rect.top;\n  const left = rect.left;\n  const bottom = rect.top + rect.height;\n  const right = rect.left + rect.width;\n\n  if (top < 0 || left < 0 || bottom > window.innerHeight || right > window.innerWidth) {\n    return false;\n  }\n\n  let parent = element.parentElement;\n\n  while (parent && parent !== document.body) {\n    if (isScrollable(parent)) {\n      const parentRect = parent.getBoundingClientRect();\n      const clientTop = parentRect.top + parent.clientTop;\n      const clientLeft = parentRect.left + parent.clientLeft;\n\n      if (\n        top < clientTop ||\n        left < clientLeft ||\n        bottom > clientTop + parent.clientHeight ||\n        right > clientLeft + parent.clientWidth\n      ) {\n        return false;\n      }\n    }\n\n    parent = parent.parentElement;\n  }\n\n  return true;\n}\n"],"mappings":";;AAAA,SAAS,aAAa,SAAsB;CAC1C,MAAM,EAAE,UAAU,WAAW,cAAc,iBAAiB,OAAO;CACnE,OAAO,uBAAuB,KAAK,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW;AAC5E;AAEA,SAAgB,gBAAgB,SAAsB;CACpD,MAAM,OAAO,QAAQ,sBAAsB;CAE3C,IAAI,KAAK,UAAU,KAAK,KAAK,WAAW,GACtC,OAAO;CAGT,MAAM,MAAM,KAAK;CACjB,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK,MAAM,KAAK;CAC/B,MAAM,QAAQ,KAAK,OAAO,KAAK;CAE/B,IAAI,MAAM,KAAK,OAAO,KAAK,SAAS,OAAO,eAAe,QAAQ,OAAO,YACvE,OAAO;CAGT,IAAI,SAAS,QAAQ;CAErB,OAAO,UAAU,WAAW,SAAS,MAAM;EACzC,IAAI,aAAa,MAAM,GAAG;GACxB,MAAM,aAAa,OAAO,sBAAsB;GAChD,MAAM,YAAY,WAAW,MAAM,OAAO;GAC1C,MAAM,aAAa,WAAW,OAAO,OAAO;GAE5C,IACE,MAAM,aACN,OAAO,cACP,SAAS,YAAY,OAAO,gBAC5B,QAAQ,aAAa,OAAO,aAE5B,OAAO;EAEX;EAEA,SAAS,OAAO;CAClB;CAEA,OAAO;AACT"}

package/esm/components/Tour/press-aware-auto-update.mjs

@@ -0,0 +1,38 @@
+"use client";
+import { autoUpdate } from "@floating-ui/react";
+//#region packages/@mantine/core/src/components/Tour/press-aware-auto-update.ts
+function pressAwareAutoUpdate(reference, floating, update) {
+	const target = reference instanceof Element ? reference : null;
+	let pressed = false;
+	let pending = false;
+	let frame = -1;
+	const handlePointerDown = () => {
+		pressed = true;
+	};
+	const handlePointerUp = () => {
+		if (!pressed) return;
+		pressed = false;
+		if (pending) {
+			pending = false;
+			frame = requestAnimationFrame(update);
+		}
+	};
+	target?.addEventListener("pointerdown", handlePointerDown);
+	window.addEventListener("pointerup", handlePointerUp, true);
+	window.addEventListener("pointercancel", handlePointerUp, true);
+	const cleanup = autoUpdate(reference, floating, () => {
+		if (pressed) pending = true;
+		else update();
+	});
+	return () => {
+		cleanup();
+		cancelAnimationFrame(frame);
+		target?.removeEventListener("pointerdown", handlePointerDown);
+		window.removeEventListener("pointerup", handlePointerUp, true);
+		window.removeEventListener("pointercancel", handlePointerUp, true);
+	};
+}
+//#endregion
+export { pressAwareAutoUpdate };
+
+//# sourceMappingURL=press-aware-auto-update.mjs.map

package/esm/components/Tour/press-aware-auto-update.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"press-aware-auto-update.mjs","names":[],"sources":["../../../src/components/Tour/press-aware-auto-update.ts"],"sourcesContent":["import { autoUpdate, type ReferenceType } from '@floating-ui/react';\n\nexport function pressAwareAutoUpdate(\n  reference: ReferenceType,\n  floating: HTMLElement,\n  update: () => void\n) {\n  const target = reference instanceof Element ? reference : null;\n  let pressed = false;\n  let pending = false;\n  let frame = -1;\n\n  const handlePointerDown = () => {\n    pressed = true;\n  };\n\n  const handlePointerUp = () => {\n    if (!pressed) {\n      return;\n    }\n\n    pressed = false;\n\n    if (pending) {\n      pending = false;\n      frame = requestAnimationFrame(update);\n    }\n  };\n\n  target?.addEventListener('pointerdown', handlePointerDown);\n  window.addEventListener('pointerup', handlePointerUp, true);\n  window.addEventListener('pointercancel', handlePointerUp, true);\n\n  const cleanup = autoUpdate(reference, floating, () => {\n    if (pressed) {\n      pending = true;\n    } else {\n      update();\n    }\n  });\n\n  return () => {\n    cleanup();\n    cancelAnimationFrame(frame);\n    target?.removeEventListener('pointerdown', handlePointerDown);\n    window.removeEventListener('pointerup', handlePointerUp, true);\n    window.removeEventListener('pointercancel', handlePointerUp, true);\n  };\n}\n"],"mappings":";;;AAEA,SAAgB,qBACd,WACA,UACA,QACA;CACA,MAAM,SAAS,qBAAqB,UAAU,YAAY;CAC1D,IAAI,UAAU;CACd,IAAI,UAAU;CACd,IAAI,QAAQ;CAEZ,MAAM,0BAA0B;EAC9B,UAAU;CACZ;CAEA,MAAM,wBAAwB;EAC5B,IAAI,CAAC,SACH;EAGF,UAAU;EAEV,IAAI,SAAS;GACX,UAAU;GACV,QAAQ,sBAAsB,MAAM;EACtC;CACF;CAEA,QAAQ,iBAAiB,eAAe,iBAAiB;CACzD,OAAO,iBAAiB,aAAa,iBAAiB,IAAI;CAC1D,OAAO,iBAAiB,iBAAiB,iBAAiB,IAAI;CAE9D,MAAM,UAAU,WAAW,WAAW,gBAAgB;EACpD,IAAI,SACF,UAAU;OAEV,OAAO;CAEX,CAAC;CAED,aAAa;EACX,QAAQ;EACR,qBAAqB,KAAK;EAC1B,QAAQ,oBAAoB,eAAe,iBAAiB;EAC5D,OAAO,oBAAoB,aAAa,iBAAiB,IAAI;EAC7D,OAAO,oBAAoB,iBAAiB,iBAAiB,IAAI;CACnE;AACF"}

package/esm/components/Tour/use-target-rect.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { useIsomorphicEffect } from "@mantine/hooks";
+//#region packages/@mantine/core/src/components/Tour/use-target-rect.ts
+function resolveTarget(target) {
+	if (!target) return null;
+	return typeof target === "string" ? document.querySelector(target) : target.current || null;
+}
+function useTargetElement(target) {
+	const [element, setElement] = useState(null);
+	useIsomorphicEffect(() => {
+		const el = resolveTarget(target);
+		setElement(el);
+		if (el || typeof target !== "string") return;
+		const mutationObserver = new MutationObserver(() => {
+			const found = resolveTarget(target);
+			if (found) {
+				mutationObserver.disconnect();
+				setElement(found);
+			}
+		});
+		mutationObserver.observe(document.body, {
+			childList: true,
+			subtree: true
+		});
+		return () => {
+			mutationObserver.disconnect();
+		};
+	}, [target]);
+	return element;
+}
+function useTargetRect(element) {
+	const [rect, setRect] = useState(null);
+	const updateRect = useCallback(() => {
+		if (!element) return;
+		const r = element.getBoundingClientRect();
+		setRect((previous) => previous && previous.top === r.top && previous.left === r.left && previous.width === r.width && previous.height === r.height ? previous : {
+			top: r.top,
+			left: r.left,
+			width: r.width,
+			height: r.height
+		});
+	}, [element]);
+	useEffect(() => {
+		if (!element) {
+			setRect(null);
+			return;
+		}
+		updateRect();
+	}, [element, updateRect]);
+	return {
+		rect,
+		updateRect
+	};
+}
+//#endregion
+export { resolveTarget, useTargetElement, useTargetRect };
+
+//# sourceMappingURL=use-target-rect.mjs.map

package/esm/components/Tour/use-target-rect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-target-rect.mjs","names":[],"sources":["../../../src/components/Tour/use-target-rect.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\n\nexport type TourTarget = string | React.RefObject<HTMLElement | null> | undefined;\n\nexport interface TargetRect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nexport function resolveTarget(target: TourTarget): HTMLElement | null {\n  if (!target) {\n    return null;\n  }\n\n  return typeof target === 'string'\n    ? document.querySelector<HTMLElement>(target)\n    : target.current || null;\n}\n\nexport function useTargetElement(target: TourTarget) {\n  const [element, setElement] = useState<HTMLElement | null>(null);\n\n  useIsomorphicEffect(() => {\n    const el = resolveTarget(target);\n    setElement(el);\n\n    if (el || typeof target !== 'string') {\n      return undefined;\n    }\n\n    const mutationObserver = new MutationObserver(() => {\n      const found = resolveTarget(target);\n      if (found) {\n        mutationObserver.disconnect();\n        setElement(found);\n      }\n    });\n\n    mutationObserver.observe(document.body, { childList: true, subtree: true });\n\n    return () => {\n      mutationObserver.disconnect();\n    };\n  }, [target]);\n\n  return element;\n}\n\nexport function useTargetRect(element: HTMLElement | null) {\n  const [rect, setRect] = useState<TargetRect | null>(null);\n\n  const updateRect = useCallback(() => {\n    if (!element) {\n      return;\n    }\n\n    const r = element.getBoundingClientRect();\n    setRect((previous) =>\n      previous &&\n      previous.top === r.top &&\n      previous.left === r.left &&\n      previous.width === r.width &&\n      previous.height === r.height\n        ? previous\n        : { top: r.top, left: r.left, width: r.width, height: r.height }\n    );\n  }, [element]);\n\n  useEffect(() => {\n    if (!element) {\n      setRect(null);\n      return;\n    }\n\n    updateRect();\n  }, [element, updateRect]);\n\n  return { rect, updateRect };\n}\n"],"mappings":";;;;AAYA,SAAgB,cAAc,QAAwC;CACpE,IAAI,CAAC,QACH,OAAO;CAGT,OAAO,OAAO,WAAW,WACrB,SAAS,cAA2B,MAAM,IAC1C,OAAO,WAAW;AACxB;AAEA,SAAgB,iBAAiB,QAAoB;CACnD,MAAM,CAAC,SAAS,cAAc,SAA6B,IAAI;CAE/D,0BAA0B;EACxB,MAAM,KAAK,cAAc,MAAM;EAC/B,WAAW,EAAE;EAEb,IAAI,MAAM,OAAO,WAAW,UAC1B;EAGF,MAAM,mBAAmB,IAAI,uBAAuB;GAClD,MAAM,QAAQ,cAAc,MAAM;GAClC,IAAI,OAAO;IACT,iBAAiB,WAAW;IAC5B,WAAW,KAAK;GAClB;EACF,CAAC;EAED,iBAAiB,QAAQ,SAAS,MAAM;GAAE,WAAW;GAAM,SAAS;EAAK,CAAC;EAE1E,aAAa;GACX,iBAAiB,WAAW;EAC9B;CACF,GAAG,CAAC,MAAM,CAAC;CAEX,OAAO;AACT;AAEA,SAAgB,cAAc,SAA6B;CACzD,MAAM,CAAC,MAAM,WAAW,SAA4B,IAAI;CAExD,MAAM,aAAa,kBAAkB;EACnC,IAAI,CAAC,SACH;EAGF,MAAM,IAAI,QAAQ,sBAAsB;EACxC,SAAS,aACP,YACA,SAAS,QAAQ,EAAE,OACnB,SAAS,SAAS,EAAE,QACpB,SAAS,UAAU,EAAE,SACrB,SAAS,WAAW,EAAE,SAClB,WACA;GAAE,KAAK,EAAE;GAAK,MAAM,EAAE;GAAM,OAAO,EAAE;GAAO,QAAQ,EAAE;EAAO,CACnE;CACF,GAAG,CAAC,OAAO,CAAC;CAEZ,gBAAgB;EACd,IAAI,CAAC,SAAS;GACZ,QAAQ,IAAI;GACZ;EACF;EAEA,WAAW;CACb,GAAG,CAAC,SAAS,UAAU,CAAC;CAExB,OAAO;EAAE;EAAM;CAAW;AAC5B"}

package/esm/components/Tour/use-tooltip-auto-focus.mjs

@@ -0,0 +1,34 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import { useIsomorphicEffect } from "@mantine/hooks";
+//#region packages/@mantine/core/src/components/Tour/use-tooltip-auto-focus.ts
+function isFocusLost() {
+	return document.activeElement === null || document.activeElement === document.body;
+}
+function useTooltipAutoFocus({ autoFocus, opened, step }) {
+	const autoFocusRef = useRef(autoFocus);
+	const nodeRef = useRef(null);
+	useIsomorphicEffect(() => {
+		autoFocusRef.current = autoFocus;
+	});
+	useEffect(() => {
+		const node = nodeRef.current;
+		if (opened && node?.isConnected && isFocusLost()) node.focus({ preventScroll: true });
+	}, [step]);
+	return useCallback((node) => {
+		nodeRef.current = node;
+		if (!node) return;
+		const timeout = window.setTimeout(() => {
+			if (!autoFocusRef.current || !node.isConnected || node.contains(document.activeElement)) return;
+			node.focus({ preventScroll: true });
+		});
+		return () => {
+			window.clearTimeout(timeout);
+			if (nodeRef.current === node) nodeRef.current = null;
+		};
+	}, []);
+}
+//#endregion
+export { useTooltipAutoFocus };
+
+//# sourceMappingURL=use-tooltip-auto-focus.mjs.map

package/esm/components/Tour/use-tooltip-auto-focus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tooltip-auto-focus.mjs","names":[],"sources":["../../../src/components/Tour/use-tooltip-auto-focus.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\nimport { useIsomorphicEffect } from '@mantine/hooks';\n\ninterface UseTooltipAutoFocusInput {\n  autoFocus: boolean;\n  opened: boolean;\n  step: number;\n}\n\nfunction isFocusLost() {\n  return document.activeElement === null || document.activeElement === document.body;\n}\n\nexport function useTooltipAutoFocus({ autoFocus, opened, step }: UseTooltipAutoFocusInput) {\n  const autoFocusRef = useRef(autoFocus);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  useIsomorphicEffect(() => {\n    autoFocusRef.current = autoFocus;\n  });\n\n  useEffect(() => {\n    const node = nodeRef.current;\n    if (opened && node?.isConnected && isFocusLost()) {\n      node.focus({ preventScroll: true });\n    }\n  }, [step]);\n\n  return useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n\n    if (!node) {\n      return undefined;\n    }\n\n    const timeout = window.setTimeout(() => {\n      if (!autoFocusRef.current || !node.isConnected || node.contains(document.activeElement)) {\n        return;\n      }\n\n      node.focus({ preventScroll: true });\n    });\n\n    return () => {\n      window.clearTimeout(timeout);\n      if (nodeRef.current === node) {\n        nodeRef.current = null;\n      }\n    };\n  }, []);\n}\n"],"mappings":";;;;AASA,SAAS,cAAc;CACrB,OAAO,SAAS,kBAAkB,QAAQ,SAAS,kBAAkB,SAAS;AAChF;AAEA,SAAgB,oBAAoB,EAAE,WAAW,QAAQ,QAAkC;CACzF,MAAM,eAAe,OAAO,SAAS;CACrC,MAAM,UAAU,OAA2B,IAAI;CAE/C,0BAA0B;EACxB,aAAa,UAAU;CACzB,CAAC;CAED,gBAAgB;EACd,MAAM,OAAO,QAAQ;EACrB,IAAI,UAAU,MAAM,eAAe,YAAY,GAC7C,KAAK,MAAM,EAAE,eAAe,KAAK,CAAC;CAEtC,GAAG,CAAC,IAAI,CAAC;CAET,OAAO,aAAa,SAA6B;EAC/C,QAAQ,UAAU;EAElB,IAAI,CAAC,MACH;EAGF,MAAM,UAAU,OAAO,iBAAiB;GACtC,IAAI,CAAC,aAAa,WAAW,CAAC,KAAK,eAAe,KAAK,SAAS,SAAS,aAAa,GACpF;GAGF,KAAK,MAAM,EAAE,eAAe,KAAK,CAAC;EACpC,CAAC;EAED,aAAa;GACX,OAAO,aAAa,OAAO;GAC3B,IAAI,QAAQ,YAAY,MACtB,QAAQ,UAAU;EAEtB;CACF,GAAG,CAAC,CAAC;AACP"}

package/esm/components/Tour/use-tour-state.mjs

@@ -0,0 +1,102 @@
+"use client";
+import { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
+import { useEffect, useEffectEvent, useRef, useState } from "react";
+import { useFocusReturn, useHotkeys, useUncontrolled, useWindowEvent } from "@mantine/hooks";
+//#region packages/@mantine/core/src/components/Tour/use-tour-state.ts
+function useTourState({ active, onClose, step, defaultStep, onStepChange, onStepOpen, onStepClose, mode, stepsCount, closeOnEscape, withKeyboardNavigation }) {
+	const { dir } = useDirection();
+	const targetRef = useRef(null);
+	const [currentStep, setCurrentStep, controlled] = useUncontrolled({
+		value: step,
+		defaultValue: defaultStep,
+		finalValue: 0,
+		onChange: onStepChange
+	});
+	const [beaconOpenStep, setBeaconOpenStep] = useState(null);
+	const resetUncontrolledStep = useEffectEvent(() => {
+		const initialStep = defaultStep ?? 0;
+		if (!controlled && currentStep !== initialStep) setCurrentStep(initialStep);
+	});
+	const wasActiveRef = useRef(!!active);
+	useEffect(() => {
+		if (wasActiveRef.current && !active) resetUncontrolledStep();
+		wasActiveRef.current = !!active;
+	}, [active]);
+	const showTooltip = !!active && (mode === "guided" || beaconOpenStep !== null);
+	const displayStepIndex = mode === "beacon" && beaconOpenStep !== null ? beaconOpenStep : currentStep;
+	const openStep = showTooltip && displayStepIndex >= 0 ? displayStepIndex : null;
+	const reportedStepRef = useRef(null);
+	const emitStepClose = useEffectEvent((index) => onStepClose(index));
+	const emitStepOpen = useEffectEvent((index) => onStepOpen(index));
+	useEffect(() => {
+		const previousStep = reportedStepRef.current;
+		if (previousStep === openStep) return;
+		reportedStepRef.current = openStep;
+		if (previousStep !== null) emitStepClose(previousStep);
+		if (openStep !== null) emitStepOpen(openStep);
+	}, [openStep]);
+	const close = () => {
+		const openedStep = reportedStepRef.current;
+		if (openedStep !== null) {
+			reportedStepRef.current = null;
+			onStepClose(openedStep);
+		}
+		setBeaconOpenStep(null);
+		onClose?.();
+	};
+	const setStep = (index) => {
+		if (mode === "beacon" && beaconOpenStep !== null) setBeaconOpenStep(index);
+		setCurrentStep(index);
+	};
+	const openBeaconStep = (index) => {
+		setBeaconOpenStep(index);
+		setCurrentStep(index);
+	};
+	useFocusReturn({
+		opened: !!active,
+		shouldReturnFocus: true
+	});
+	const isInsideTarget = (event) => !!targetRef.current && event.target instanceof Node && targetRef.current.contains(event.target);
+	const goToNextStep = (event) => {
+		if (isInsideTarget(event)) return;
+		event.preventDefault();
+		if (currentStep < stepsCount - 1) setCurrentStep(currentStep + 1);
+		else close();
+	};
+	const goToPreviousStep = (event) => {
+		if (isInsideTarget(event)) return;
+		event.preventDefault();
+		if (currentStep > 0) setCurrentStep(currentStep - 1);
+	};
+	const arrowHotkeys = [];
+	if (active && mode === "guided" && withKeyboardNavigation) {
+		arrowHotkeys.push([
+			dir === "rtl" ? "ArrowLeft" : "ArrowRight",
+			goToNextStep,
+			{ preventDefault: false }
+		]);
+		arrowHotkeys.push([
+			dir === "rtl" ? "ArrowRight" : "ArrowLeft",
+			goToPreviousStep,
+			{ preventDefault: false }
+		]);
+	}
+	useHotkeys(arrowHotkeys);
+	useWindowEvent("keydown", (event) => {
+		if (event.key === "Escape" && showTooltip && closeOnEscape && !event.isComposing && event.target?.getAttribute?.("data-mantine-stop-propagation") !== "true") close();
+	}, { capture: true });
+	return {
+		currentStep,
+		setStep,
+		beaconOpenStep,
+		openBeaconStep,
+		showTooltip,
+		displayStepIndex,
+		close,
+		targetRef
+	};
+}
+//#endregion
+export { useTourState };
+
+//# sourceMappingURL=use-tour-state.mjs.map

package/esm/components/Tour/use-tour-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tour-state.mjs","names":[],"sources":["../../../src/components/Tour/use-tour-state.ts"],"sourcesContent":["import { useEffect, useEffectEvent, useRef, useState } from 'react';\nimport {\n  useFocusReturn,\n  useHotkeys,\n  useUncontrolled,\n  useWindowEvent,\n  type HotkeyItem,\n} from '@mantine/hooks';\nimport { useDirection } from '../../core';\n\nexport interface UseTourStateInput {\n  active: boolean | undefined;\n  onClose: (() => void) | undefined;\n  step: number | undefined;\n  defaultStep: number | undefined;\n  onStepChange: ((step: number) => void) | undefined;\n  onStepOpen: (step: number) => void;\n  onStepClose: (step: number) => void;\n  mode: 'guided' | 'beacon';\n  stepsCount: number;\n  closeOnEscape: boolean | undefined;\n  withKeyboardNavigation: boolean | undefined;\n}\n\nexport function useTourState({\n  active,\n  onClose,\n  step,\n  defaultStep,\n  onStepChange,\n  onStepOpen,\n  onStepClose,\n  mode,\n  stepsCount,\n  closeOnEscape,\n  withKeyboardNavigation,\n}: UseTourStateInput) {\n  const { dir } = useDirection();\n  const targetRef = useRef<HTMLElement | null>(null);\n\n  const [currentStep, setCurrentStep, controlled] = useUncontrolled({\n    value: step,\n    defaultValue: defaultStep,\n    finalValue: 0,\n    onChange: onStepChange,\n  });\n\n  const [beaconOpenStep, setBeaconOpenStep] = useState<number | null>(null);\n\n  const resetUncontrolledStep = useEffectEvent(() => {\n    const initialStep = defaultStep ?? 0;\n    if (!controlled && currentStep !== initialStep) {\n      setCurrentStep(initialStep);\n    }\n  });\n\n  const wasActiveRef = useRef(!!active);\n\n  useEffect(() => {\n    if (wasActiveRef.current && !active) {\n      resetUncontrolledStep();\n    }\n    wasActiveRef.current = !!active;\n  }, [active]);\n\n  const showTooltip = !!active && (mode === 'guided' || beaconOpenStep !== null);\n  const displayStepIndex =\n    mode === 'beacon' && beaconOpenStep !== null ? beaconOpenStep : currentStep;\n  const openStep = showTooltip && displayStepIndex >= 0 ? displayStepIndex : null;\n\n  const reportedStepRef = useRef<number | null>(null);\n  const emitStepClose = useEffectEvent((index: number) => onStepClose(index));\n  const emitStepOpen = useEffectEvent((index: number) => onStepOpen(index));\n\n  useEffect(() => {\n    const previousStep = reportedStepRef.current;\n\n    if (previousStep === openStep) {\n      return;\n    }\n\n    reportedStepRef.current = openStep;\n\n    if (previousStep !== null) {\n      emitStepClose(previousStep);\n    }\n\n    if (openStep !== null) {\n      emitStepOpen(openStep);\n    }\n  }, [openStep]);\n\n  const close = () => {\n    const openedStep = reportedStepRef.current;\n\n    if (openedStep !== null) {\n      reportedStepRef.current = null;\n      onStepClose(openedStep);\n    }\n\n    setBeaconOpenStep(null);\n    onClose?.();\n  };\n\n  const setStep = (index: number) => {\n    if (mode === 'beacon' && beaconOpenStep !== null) {\n      setBeaconOpenStep(index);\n    }\n    setCurrentStep(index);\n  };\n\n  const openBeaconStep = (index: number) => {\n    setBeaconOpenStep(index);\n    setCurrentStep(index);\n  };\n\n  useFocusReturn({ opened: !!active, shouldReturnFocus: true });\n\n  const isInsideTarget = (event: KeyboardEvent) =>\n    !!targetRef.current && event.target instanceof Node && targetRef.current.contains(event.target);\n\n  const goToNextStep = (event: KeyboardEvent) => {\n    if (isInsideTarget(event)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    if (currentStep < stepsCount - 1) {\n      setCurrentStep(currentStep + 1);\n    } else {\n      close();\n    }\n  };\n\n  const goToPreviousStep = (event: KeyboardEvent) => {\n    if (isInsideTarget(event)) {\n      return;\n    }\n\n    event.preventDefault();\n\n    if (currentStep > 0) {\n      setCurrentStep(currentStep - 1);\n    }\n  };\n\n  const arrowHotkeys: HotkeyItem[] = [];\n\n  if (active && mode === 'guided' && withKeyboardNavigation) {\n    arrowHotkeys.push([\n      dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight',\n      goToNextStep,\n      { preventDefault: false },\n    ]);\n    arrowHotkeys.push([\n      dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft',\n      goToPreviousStep,\n      { preventDefault: false },\n    ]);\n  }\n\n  useHotkeys(arrowHotkeys);\n  useWindowEvent(\n    'keydown',\n    (event) => {\n      if (\n        event.key === 'Escape' &&\n        showTooltip &&\n        closeOnEscape &&\n        !event.isComposing &&\n        (event.target as HTMLElement | null)?.getAttribute?.('data-mantine-stop-propagation') !==\n          'true'\n      ) {\n        close();\n      }\n    },\n    { capture: true }\n  );\n\n  return {\n    currentStep,\n    setStep,\n    beaconOpenStep,\n    openBeaconStep,\n    showTooltip,\n    displayStepIndex,\n    close,\n    targetRef,\n  };\n}\n"],"mappings":"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"}

package/esm/components/Tour/use-tour.mjs

@@ -0,0 +1,155 @@
+"use client";
+import { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
+import { getFloatingPosition } from "../../utils/Floating/get-floating-position/get-floating-position.mjs";
+import { pressAwareAutoUpdate } from "./press-aware-auto-update.mjs";
+import { resolveTarget, useTargetElement, useTargetRect } from "./use-target-rect.mjs";
+import { useTourState } from "./use-tour-state.mjs";
+import { isElementInView } from "./is-element-in-view.mjs";
+import { Children, useEffect, useEffectEvent, useRef, useState } from "react";
+import { flip, offset, shift, size, useFloating } from "@floating-ui/react";
+import { flushSync } from "react-dom";
+//#region packages/@mantine/core/src/components/Tour/use-tour.ts
+function useTour({ active, onClose, step: stepProp, defaultStep, onStepChange, onStepOpen, onStepClose, mode, withKeyboardNavigation, withScrollIntoView, scrollToHandler, closeOnEscape, maxWidth, stepTransitionDuration, children, stepComponent }) {
+	const steps = [];
+	Children.forEach(children, (child) => {
+		if (child && typeof child === "object" && "type" in child && child.type === stepComponent) steps.push(child.props);
+	});
+	const { dir } = useDirection();
+	const { setStep, beaconOpenStep, openBeaconStep, showTooltip, displayStepIndex, close, targetRef } = useTourState({
+		active,
+		onClose,
+		step: stepProp,
+		defaultStep,
+		onStepChange,
+		onStepOpen: (index) => {
+			onStepOpen?.(index);
+			steps[index]?.onStepOpen?.();
+		},
+		onStepClose: (index) => {
+			onStepClose?.(index);
+			steps[index]?.onStepClose?.();
+		},
+		mode,
+		stepsCount: steps.length,
+		closeOnEscape,
+		withKeyboardNavigation
+	});
+	const displayStep = steps[displayStepIndex] || null;
+	const activeTarget = showTooltip ? displayStep?.target : void 0;
+	const lastActiveTargetRef = useRef(void 0);
+	if (showTooltip) lastActiveTargetRef.current = activeTarget;
+	const [, setExitedCount] = useState(0);
+	const clearExitedTarget = () => {
+		lastActiveTargetRef.current = void 0;
+		setExitedCount((count) => count + 1);
+	};
+	const resolvedTarget = showTooltip ? activeTarget : lastActiveTargetRef.current;
+	const targetElement = useTargetElement(resolvedTarget);
+	const { rect: targetRect, updateRect } = useTargetRect(targetElement);
+	useEffect(() => {
+		targetRef.current = targetElement;
+	}, [targetElement]);
+	const scrollTargetIntoView = useEffectEvent((element) => {
+		if (scrollToHandler) scrollToHandler(element);
+		else if (!isElementInView(element)) element.scrollIntoView({
+			behavior: "smooth",
+			block: "center"
+		});
+	});
+	useEffect(() => {
+		if (active && withScrollIntoView && targetElement) scrollTargetIntoView(targetElement);
+	}, [
+		active,
+		targetElement,
+		withScrollIntoView
+	]);
+	const nextTargetNeedsScroll = useEffectEvent(() => {
+		if (!withScrollIntoView || scrollToHandler) return false;
+		const element = resolveTarget(displayStep?.target);
+		return !!element && !isElementInView(element);
+	});
+	const stepPosition = getFloatingPosition(dir, displayStep?.position || "bottom");
+	const isSidePlacement = stepPosition.startsWith("left") || stepPosition.startsWith("right");
+	const [constrainedWidth, setConstrainedWidth] = useState(maxWidth);
+	const { refs: floatingRefs, floatingStyles } = useFloating({
+		elements: { reference: targetElement },
+		placement: stepPosition,
+		transform: false,
+		whileElementsMounted: (reference, floating, update) => {
+			let mounted = false;
+			const cleanup = pressAwareAutoUpdate(reference, floating, () => {
+				update();
+				if (mounted) flushSync(updateRect);
+				else updateRect();
+			});
+			mounted = true;
+			return cleanup;
+		},
+		middleware: [
+			offset(12),
+			flip(isSidePlacement ? { fallbackAxisSideDirection: "end" } : void 0),
+			shift({ padding: 8 }),
+			size({
+				padding: 8,
+				apply({ availableWidth, placement }) {
+					const side = placement.split("-")[0];
+					setConstrainedWidth(side === "left" || side === "right" ? maxWidth : Math.min(maxWidth, availableWidth));
+				}
+			})
+		]
+	});
+	const isCentered = !targetElement;
+	const [hasPositioned, setHasPositioned] = useState(false);
+	const [stepMoving, setStepMoving] = useState(false);
+	useEffect(() => {
+		if (!active) {
+			setHasPositioned(false);
+			return;
+		}
+		const timer = requestAnimationFrame(() => {
+			setHasPositioned(true);
+		});
+		return () => cancelAnimationFrame(timer);
+	}, [active]);
+	const previousStepRef = useRef({
+		index: displayStepIndex,
+		shown: showTooltip
+	});
+	useEffect(() => {
+		const previous = previousStepRef.current;
+		previousStepRef.current = {
+			index: displayStepIndex,
+			shown: showTooltip
+		};
+		if (!showTooltip) {
+			setStepMoving(false);
+			return;
+		}
+		if (!hasPositioned || !previous.shown || previous.index === displayStepIndex || nextTargetNeedsScroll()) return;
+		setStepMoving(true);
+		const timer = window.setTimeout(() => setStepMoving(false), stepTransitionDuration);
+		return () => window.clearTimeout(timer);
+	}, [displayStepIndex, showTooltip]);
+	return {
+		steps,
+		setStep,
+		beaconOpenStep,
+		openBeaconStep,
+		close,
+		displayStep,
+		displayStepIndex,
+		targetRect,
+		targetElement,
+		floatingStyles,
+		floatingRefs,
+		isCentered,
+		constrainedWidth,
+		stepMoving: hasPositioned && stepMoving,
+		showTooltip,
+		clearExitedTarget
+	};
+}
+//#endregion
+export { useTour };
+
+//# sourceMappingURL=use-tour.mjs.map

package/esm/components/Tour/use-tour.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tour.mjs","names":[],"sources":["../../../src/components/Tour/use-tour.ts"],"sourcesContent":["import { Children, useEffect, useEffectEvent, useRef, useState } from 'react';\nimport { flip, offset, shift, size, useFloating } from '@floating-ui/react';\nimport { flushSync } from 'react-dom';\nimport { useDirection } from '../../core';\nimport { getFloatingPosition } from '../../utils/Floating';\nimport { isElementInView } from './is-element-in-view';\nimport { pressAwareAutoUpdate } from './press-aware-auto-update';\nimport type { TourStepProps } from './TourStep/TourStep';\nimport {\n  resolveTarget,\n  useTargetElement,\n  useTargetRect,\n  type TargetRect,\n  type TourTarget,\n} from './use-target-rect';\nimport { useTourState } from './use-tour-state';\n\nexport interface UseTourInput {\n  active?: boolean;\n  onClose?: () => void;\n  step?: number;\n  defaultStep?: number;\n  onStepChange?: (step: number) => void;\n  onStepOpen?: (step: number) => void;\n  onStepClose?: (step: number) => void;\n  mode?: 'guided' | 'beacon';\n  withKeyboardNavigation?: boolean;\n  withScrollIntoView?: boolean;\n  scrollToHandler?: (element: HTMLElement) => void;\n  closeOnEscape?: boolean;\n  maxWidth?: number;\n  stepTransitionDuration?: number;\n  children?: React.ReactNode;\n  stepComponent: React.ComponentType<any>;\n}\n\nexport interface UseTourReturn {\n  steps: TourStepProps[];\n  setStep: (step: number) => void;\n  beaconOpenStep: number | null;\n  openBeaconStep: (step: number) => void;\n  close: () => void;\n  displayStep: TourStepProps | null;\n  displayStepIndex: number;\n  targetRect: TargetRect | null;\n  targetElement: HTMLElement | null;\n  floatingStyles: React.CSSProperties;\n  floatingRefs: ReturnType<typeof useFloating>['refs'];\n  isCentered: boolean;\n  constrainedWidth: number;\n  stepMoving: boolean;\n  showTooltip: boolean;\n  clearExitedTarget: () => void;\n}\n\nexport function useTour({\n  active,\n  onClose,\n  step: stepProp,\n  defaultStep,\n  onStepChange,\n  onStepOpen,\n  onStepClose,\n  mode,\n  withKeyboardNavigation,\n  withScrollIntoView,\n  scrollToHandler,\n  closeOnEscape,\n  maxWidth,\n  stepTransitionDuration,\n  children,\n  stepComponent,\n}: UseTourInput): UseTourReturn {\n  const steps: TourStepProps[] = [];\n  Children.forEach(children, (child) => {\n    if (child && typeof child === 'object' && 'type' in child && child.type === stepComponent) {\n      steps.push(child.props as TourStepProps);\n    }\n  });\n\n  const { dir } = useDirection();\n\n  const {\n    setStep,\n    beaconOpenStep,\n    openBeaconStep,\n    showTooltip,\n    displayStepIndex,\n    close,\n    targetRef,\n  } = useTourState({\n    active,\n    onClose,\n    step: stepProp,\n    defaultStep,\n    onStepChange,\n    onStepOpen: (index) => {\n      onStepOpen?.(index);\n      steps[index]?.onStepOpen?.();\n    },\n    onStepClose: (index) => {\n      onStepClose?.(index);\n      steps[index]?.onStepClose?.();\n    },\n    mode: mode!,\n    stepsCount: steps.length,\n    closeOnEscape,\n    withKeyboardNavigation,\n  });\n\n  const displayStep = steps[displayStepIndex] || null;\n  const activeTarget = showTooltip ? displayStep?.target : undefined;\n\n  const lastActiveTargetRef = useRef<TourTarget>(undefined);\n  if (showTooltip) {\n    lastActiveTargetRef.current = activeTarget;\n  }\n\n  const [, setExitedCount] = useState(0);\n  const clearExitedTarget = () => {\n    lastActiveTargetRef.current = undefined;\n    setExitedCount((count) => count + 1);\n  };\n\n  const resolvedTarget = showTooltip ? activeTarget : lastActiveTargetRef.current;\n  const targetElement = useTargetElement(resolvedTarget);\n  const { rect: targetRect, updateRect } = useTargetRect(targetElement);\n\n  useEffect(() => {\n    targetRef.current = targetElement;\n  }, [targetElement]);\n\n  const scrollTargetIntoView = useEffectEvent((element: HTMLElement) => {\n    if (scrollToHandler) {\n      scrollToHandler(element);\n    } else if (!isElementInView(element)) {\n      element.scrollIntoView({ behavior: 'smooth', block: 'center' });\n    }\n  });\n\n  useEffect(() => {\n    if (active && withScrollIntoView && targetElement) {\n      scrollTargetIntoView(targetElement);\n    }\n  }, [active, targetElement, withScrollIntoView]);\n\n  const nextTargetNeedsScroll = useEffectEvent(() => {\n    if (!withScrollIntoView || scrollToHandler) {\n      return false;\n    }\n\n    const element = resolveTarget(displayStep?.target);\n    return !!element && !isElementInView(element);\n  });\n\n  const stepPosition = getFloatingPosition(dir, displayStep?.position || 'bottom');\n  const isSidePlacement = stepPosition.startsWith('left') || stepPosition.startsWith('right');\n\n  const [constrainedWidth, setConstrainedWidth] = useState(maxWidth!);\n\n  const { refs: floatingRefs, floatingStyles } = useFloating({\n    elements: { reference: targetElement },\n    placement: stepPosition,\n    transform: false,\n    whileElementsMounted: (reference, floating, update) => {\n      let mounted = false;\n      const cleanup = pressAwareAutoUpdate(reference, floating, () => {\n        update();\n        if (mounted) {\n          flushSync(updateRect);\n        } else {\n          updateRect();\n        }\n      });\n      mounted = true;\n      return cleanup;\n    },\n    middleware: [\n      offset(12),\n      flip(isSidePlacement ? { fallbackAxisSideDirection: 'end' } : undefined),\n      shift({ padding: 8 }),\n      size({\n        padding: 8,\n        apply({ availableWidth, placement }) {\n          const side = placement.split('-')[0];\n          setConstrainedWidth(\n            side === 'left' || side === 'right' ? maxWidth! : Math.min(maxWidth!, availableWidth)\n          );\n        },\n      }),\n    ],\n  });\n\n  const isCentered = !targetElement;\n  const [hasPositioned, setHasPositioned] = useState(false);\n  const [stepMoving, setStepMoving] = useState(false);\n\n  useEffect(() => {\n    if (!active) {\n      setHasPositioned(false);\n      return;\n    }\n\n    const timer = requestAnimationFrame(() => {\n      setHasPositioned(true);\n    });\n\n    return () => cancelAnimationFrame(timer);\n  }, [active]);\n\n  const previousStepRef = useRef({ index: displayStepIndex, shown: showTooltip });\n\n  useEffect(() => {\n    const previous = previousStepRef.current;\n    previousStepRef.current = { index: displayStepIndex, shown: showTooltip };\n\n    if (!showTooltip) {\n      setStepMoving(false);\n      return undefined;\n    }\n\n    if (\n      !hasPositioned ||\n      !previous.shown ||\n      previous.index === displayStepIndex ||\n      nextTargetNeedsScroll()\n    ) {\n      return undefined;\n    }\n\n    setStepMoving(true);\n    const timer = window.setTimeout(() => setStepMoving(false), stepTransitionDuration);\n    return () => window.clearTimeout(timer);\n  }, [displayStepIndex, showTooltip]);\n\n  return {\n    steps,\n    setStep,\n    beaconOpenStep,\n    openBeaconStep,\n    close,\n    displayStep,\n    displayStepIndex,\n    targetRect,\n    targetElement,\n    floatingStyles,\n    floatingRefs,\n    isCentered,\n    constrainedWidth,\n    stepMoving: hasPositioned && stepMoving,\n    showTooltip,\n    clearExitedTarget,\n  };\n}\n"],"mappings":"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"}

package/esm/components/TreeSelect/TreeSelect.mjs

@@ -20,7 +20,7 @@ import { flattenTreeSelectData } from "./flatten-tree-select-data.mjs";
 import { checkedToValue, expandToLeafChecked } from "./get-checked-values-by-strategy.mjs";
 import TreeSelect_module_default from "./TreeSelect.module.mjs";
 import { TreeSelectOption } from "./TreeSelectOption.mjs";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Fragment, useCallback, useEffect, useMemo, useRef } from "react";
 import { useId as useId$1, useUncontrolled } from "@mantine/hooks";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/TreeSelect/TreeSelect.tsx
@@ -58,7 +58,7 @@ const TreeSelect = genericFactory((_props) => {
 		"InputWrapper",
 		"TreeSelect"
 	], defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, data, mode, value, defaultValue, onChange, checkStrictly, checkedStrategy, defaultExpandedValues, defaultExpandAll, expandedValues, onExpandedChange, expandOnClick, searchable, searchValue, defaultSearchValue, onSearchChange, filter, nothingFoundMessage, allowDeselect, clearable, clearSectionMode, clearButtonProps, maxValues, maxDisplayedValues, maxDisplayedValuesContent, onRemove, onClear, renderNode, withLines, hiddenInputProps, hiddenInputValuesDivider, scrollAreaProps, chevronColor, maxDropdownHeight, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, clearSearchOnChange, openOnFocus, chevronAriaLabels, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, successProps, wrapperProps, description, label, error, success, withErrorStyles, withSuccessStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, size, data, mode, value, defaultValue, onChange, checkStrictly, checkedStrategy, defaultExpandedValues, defaultExpandAll, expandedValues, onExpandedChange, expandOnClick, searchable, searchValue, defaultSearchValue, onSearchChange, filter, nothingFoundMessage, allowDeselect, clearable, clearSectionMode, clearButtonProps, maxValues, maxDisplayedValues, maxDisplayedValuesContent, onRemove, onClear, renderNode, renderPill, withLines, hiddenInputProps, hiddenInputValuesDivider, scrollAreaProps, chevronColor, maxDropdownHeight, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, comboboxProps, clearSearchOnChange, openOnFocus, chevronAriaLabels, variant, onKeyDown, onFocus, onBlur, onClick, readOnly, disabled, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, successProps, wrapperProps, description, label, error, success, withErrorStyles, withSuccessStyles, name, form, id, placeholder, required, mod, attributes, ...others } = props;
 	const isMulti = mode === "multiple" || mode === "checkbox";
 	const isCheckbox = mode === "checkbox";
 	const _id = useId$1(id);
@@ -335,21 +335,34 @@ const TreeSelect = genericFactory((_props) => {
 	const pillsListStyle = _clearable && isMulti ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm } : void 0;
 	const visiblePills = maxDisplayedValues != null ? displayValues.slice(0, maxDisplayedValues) : displayValues;
 	const overflowCount = maxDisplayedValues != null ? Math.max(0, displayValues.length - maxDisplayedValues) : 0;
-	const pills = visiblePills.map((item, index) => /* @__PURE__ */ jsx(Pill, {
-		withRemoveButton: !readOnly,
-		onRemove: () => {
-			if (isCheckbox) {
-				const childLeaves = checkStrictly ? [item] : getChildrenNodesValues(item, data);
-				const newInternal = internalChecked.filter((v) => !childLeaves.includes(v));
-				setValue(checkedToValue(newInternal, data, checkedStrategy));
-			} else setValue(_value.filter((v) => v !== item));
-			onRemove?.(item);
-		},
-		unstyled,
-		disabled,
-		...getStyles("pill"),
-		children: getNodeLabel(item)
-	}, `${item}-${index}`));
+	const removePillValue = (item) => {
+		if (isCheckbox) {
+			const childLeaves = checkStrictly ? [item] : getChildrenNodesValues(item, data);
+			const newInternal = internalChecked.filter((v) => !childLeaves.includes(v));
+			setValue(checkedToValue(newInternal, data, checkedStrategy));
+		} else setValue(_value.filter((v) => v !== item));
+		onRemove?.(item);
+	};
+	const pills = visiblePills.map((item, index) => {
+		if (renderPill) return /* @__PURE__ */ jsx(Fragment, { children: renderPill({
+			node: nodeLookup[item] ?? {
+				value: item,
+				label: item
+			},
+			value: item,
+			onRemove: () => removePillValue(item),
+			disabled,
+			readOnly
+		}) }, `${item}-${index}`);
+		return /* @__PURE__ */ jsx(Pill, {
+			withRemoveButton: !readOnly,
+			onRemove: () => removePillValue(item),
+			unstyled,
+			disabled,
+			...getStyles("pill"),
+			children: getNodeLabel(item)
+		}, `${item}-${index}`);
+	});
 	if (overflowCount > 0) {
 		const overflowContent = typeof maxDisplayedValuesContent === "function" ? maxDisplayedValuesContent(overflowCount) : maxDisplayedValuesContent || `+${overflowCount} more`;
 		pills.push(/* @__PURE__ */ jsx(Pill, {