@mantine/core 9.6.2 → 9.7.0

package/cjs/components/Toolbar/use-toolbar-navigation.cjs

@@ -0,0 +1,76 @@
+"use client";
+let react = require("react");
+//#region packages/@mantine/core/src/components/Toolbar/use-toolbar-navigation.ts
+function useToolbarNavigation({ orientation, loop, dir }) {
+	const toolbarRef = (0, react.useRef)(null);
+	const activeItemRef = (0, react.useRef)(null);
+	const getFocusableItems = (0, react.useCallback)(() => {
+		if (!toolbarRef.current) return [];
+		return Array.from(toolbarRef.current.querySelectorAll("[data-toolbar-toggle]:not([data-disabled])"));
+	}, []);
+	const syncTabIndex = (0, react.useCallback)(() => {
+		const items = getFocusableItems();
+		const tabStop = activeItemRef.current && items.includes(activeItemRef.current) ? activeItemRef.current : items[0];
+		items.forEach((item) => {
+			item.setAttribute("tabindex", item === tabStop ? "0" : "-1");
+		});
+	}, [getFocusableItems]);
+	(0, react.useEffect)(() => {
+		syncTabIndex();
+		const node = toolbarRef.current;
+		if (!node) return;
+		const observer = new MutationObserver(syncTabIndex);
+		observer.observe(node, {
+			childList: true,
+			subtree: true,
+			attributeFilter: ["data-disabled"]
+		});
+		return () => observer.disconnect();
+	}, [syncTabIndex]);
+	return {
+		toolbarRef,
+		handleKeyDown: (0, react.useCallback)((event) => {
+			const items = getFocusableItems();
+			if (items.length === 0) return;
+			const currentIndex = items.findIndex((item) => item === document.activeElement);
+			if (currentIndex === -1) return;
+			let nextIndex = null;
+			const forwardKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
+			const backwardKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
+			const isForward = orientation === "horizontal" && event.key === forwardKey || orientation === "vertical" && event.key === "ArrowDown";
+			const isBackward = orientation === "horizontal" && event.key === backwardKey || orientation === "vertical" && event.key === "ArrowUp";
+			if (isForward) {
+				event.preventDefault();
+				if (currentIndex < items.length - 1) nextIndex = currentIndex + 1;
+				else if (loop) nextIndex = 0;
+			} else if (isBackward) {
+				event.preventDefault();
+				if (currentIndex > 0) nextIndex = currentIndex - 1;
+				else if (loop) nextIndex = items.length - 1;
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				nextIndex = 0;
+			} else if (event.key === "End") {
+				event.preventDefault();
+				nextIndex = items.length - 1;
+			}
+			if (nextIndex !== null) items[nextIndex].focus();
+		}, [
+			orientation,
+			loop,
+			dir,
+			getFocusableItems
+		]),
+		handleItemFocus: (0, react.useCallback)((event) => {
+			const target = event.target;
+			if (getFocusableItems().includes(target)) {
+				activeItemRef.current = target;
+				syncTabIndex();
+			}
+		}, [getFocusableItems, syncTabIndex])
+	};
+}
+//#endregion
+exports.useToolbarNavigation = useToolbarNavigation;
+
+//# sourceMappingURL=use-toolbar-navigation.cjs.map

package/cjs/components/Toolbar/use-toolbar-navigation.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toolbar-navigation.cjs","names":["useRef","useCallback"],"sources":["../../../src/components/Toolbar/use-toolbar-navigation.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from 'react';\n\ninterface UseToolbarNavigationOptions {\n  orientation: 'horizontal' | 'vertical';\n  loop: boolean;\n  dir: 'ltr' | 'rtl';\n}\n\nexport function useToolbarNavigation({ orientation, loop, dir }: UseToolbarNavigationOptions) {\n  const toolbarRef = useRef<HTMLDivElement>(null);\n  const activeItemRef = useRef<HTMLElement | null>(null);\n\n  const getFocusableItems = useCallback((): HTMLElement[] => {\n    if (!toolbarRef.current) {\n      return [];\n    }\n    return Array.from(\n      toolbarRef.current.querySelectorAll<HTMLElement>('[data-toolbar-toggle]:not([data-disabled])')\n    );\n  }, []);\n\n  const syncTabIndex = useCallback(() => {\n    const items = getFocusableItems();\n    const tabStop =\n      activeItemRef.current && items.includes(activeItemRef.current)\n        ? activeItemRef.current\n        : items[0];\n\n    items.forEach((item) => {\n      item.setAttribute('tabindex', item === tabStop ? '0' : '-1');\n    });\n  }, [getFocusableItems]);\n\n  useEffect(() => {\n    syncTabIndex();\n\n    const node = toolbarRef.current;\n    if (!node) {\n      return undefined;\n    }\n\n    const observer = new MutationObserver(syncTabIndex);\n    observer.observe(node, { childList: true, subtree: true, attributeFilter: ['data-disabled'] });\n\n    return () => observer.disconnect();\n  }, [syncTabIndex]);\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      const items = getFocusableItems();\n      if (items.length === 0) {\n        return;\n      }\n\n      const currentIndex = items.findIndex((item) => item === document.activeElement);\n      if (currentIndex === -1) {\n        return;\n      }\n\n      let nextIndex: number | null = null;\n\n      const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n      const backwardKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n\n      const isForward =\n        (orientation === 'horizontal' && event.key === forwardKey) ||\n        (orientation === 'vertical' && event.key === 'ArrowDown');\n\n      const isBackward =\n        (orientation === 'horizontal' && event.key === backwardKey) ||\n        (orientation === 'vertical' && event.key === 'ArrowUp');\n\n      if (isForward) {\n        event.preventDefault();\n        if (currentIndex < items.length - 1) {\n          nextIndex = currentIndex + 1;\n        } else if (loop) {\n          nextIndex = 0;\n        }\n      } else if (isBackward) {\n        event.preventDefault();\n        if (currentIndex > 0) {\n          nextIndex = currentIndex - 1;\n        } else if (loop) {\n          nextIndex = items.length - 1;\n        }\n      } else if (event.key === 'Home') {\n        event.preventDefault();\n        nextIndex = 0;\n      } else if (event.key === 'End') {\n        event.preventDefault();\n        nextIndex = items.length - 1;\n      }\n\n      if (nextIndex !== null) {\n        items[nextIndex].focus();\n      }\n    },\n    [orientation, loop, dir, getFocusableItems]\n  );\n\n  const handleItemFocus = useCallback(\n    (event: React.FocusEvent<HTMLDivElement>) => {\n      const target = event.target as HTMLElement;\n      if (getFocusableItems().includes(target)) {\n        activeItemRef.current = target;\n        syncTabIndex();\n      }\n    },\n    [getFocusableItems, syncTabIndex]\n  );\n\n  return { toolbarRef, handleKeyDown, handleItemFocus };\n}\n"],"mappings":";;;AAQA,SAAgB,qBAAqB,EAAE,aAAa,MAAM,OAAoC;CAC5F,MAAM,cAAA,GAAaA,MAAAA,OAAAA,CAAuB,IAAI;CAC9C,MAAM,iBAAA,GAAgBA,MAAAA,OAAAA,CAA2B,IAAI;CAErD,MAAM,qBAAA,GAAoBC,MAAAA,YAAAA,OAAiC;EACzD,IAAI,CAAC,WAAW,SACd,OAAO,CAAC;EAEV,OAAO,MAAM,KACX,WAAW,QAAQ,iBAA8B,4CAA4C,CAC/F;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,gBAAA,GAAeA,MAAAA,YAAAA,OAAkB;EACrC,MAAM,QAAQ,kBAAkB;EAChC,MAAM,UACJ,cAAc,WAAW,MAAM,SAAS,cAAc,OAAO,IACzD,cAAc,UACd,MAAM;EAEZ,MAAM,SAAS,SAAS;GACtB,KAAK,aAAa,YAAY,SAAS,UAAU,MAAM,IAAI;EAC7D,CAAC;CACH,GAAG,CAAC,iBAAiB,CAAC;CAEtB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,aAAa;EAEb,MAAM,OAAO,WAAW;EACxB,IAAI,CAAC,MACH;EAGF,MAAM,WAAW,IAAI,iBAAiB,YAAY;EAClD,SAAS,QAAQ,MAAM;GAAE,WAAW;GAAM,SAAS;GAAM,iBAAiB,CAAC,eAAe;EAAE,CAAC;EAE7F,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,YAAY,CAAC;CAmEjB,OAAO;EAAE;EAAY,gBAAA,GAjECA,MAAAA,YAAAA,EACnB,UAA+C;GAC9C,MAAM,QAAQ,kBAAkB;GAChC,IAAI,MAAM,WAAW,GACnB;GAGF,MAAM,eAAe,MAAM,WAAW,SAAS,SAAS,SAAS,aAAa;GAC9E,IAAI,iBAAiB,IACnB;GAGF,IAAI,YAA2B;GAE/B,MAAM,aAAa,QAAQ,QAAQ,cAAc;GACjD,MAAM,cAAc,QAAQ,QAAQ,eAAe;GAEnD,MAAM,YACH,gBAAgB,gBAAgB,MAAM,QAAQ,cAC9C,gBAAgB,cAAc,MAAM,QAAQ;GAE/C,MAAM,aACH,gBAAgB,gBAAgB,MAAM,QAAQ,eAC9C,gBAAgB,cAAc,MAAM,QAAQ;GAE/C,IAAI,WAAW;IACb,MAAM,eAAe;IACrB,IAAI,eAAe,MAAM,SAAS,GAChC,YAAY,eAAe;SACtB,IAAI,MACT,YAAY;GAEhB,OAAO,IAAI,YAAY;IACrB,MAAM,eAAe;IACrB,IAAI,eAAe,GACjB,YAAY,eAAe;SACtB,IAAI,MACT,YAAY,MAAM,SAAS;GAE/B,OAAO,IAAI,MAAM,QAAQ,QAAQ;IAC/B,MAAM,eAAe;IACrB,YAAY;GACd,OAAO,IAAI,MAAM,QAAQ,OAAO;IAC9B,MAAM,eAAe;IACrB,YAAY,MAAM,SAAS;GAC7B;GAEA,IAAI,cAAc,MAChB,MAAM,UAAU,CAAC,MAAM;EAE3B,GACA;GAAC;GAAa;GAAM;GAAK;EAAiB,CAcX;EAAG,kBAAA,GAXZA,MAAAA,YAAAA,EACrB,UAA4C;GAC3C,MAAM,SAAS,MAAM;GACrB,IAAI,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG;IACxC,cAAc,UAAU;IACxB,aAAa;GACf;EACF,GACA,CAAC,mBAAmB,YAAY,CAGgB;CAAE;AACtD"}

package/cjs/components/Tooltip/Tooltip.cjs

@@ -49,7 +49,8 @@ const defaultProps = {
 		flip: true,
 		shift: true,
 		inline: false
-	}
+	},
+	hideDetached: true
 };
 const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { radius, color, variant, autoContrast }) => {
 	const colors = theme.variantColorResolver({
@@ -66,7 +67,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
 });
 const Tooltip = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Tooltip", defaultProps, _props);
-	const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, interactive, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, ref, ...others } = props;
+	const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, interactive, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, hideDetached, ref, ...others } = props;
 	const { dir } = require_DirectionProvider.useDirection();
 	const arrowRef = (0, react.useRef)(null);
 	const tooltip = require_use_tooltip.useTooltip({
@@ -83,7 +84,8 @@ const Tooltip = require_factory.factory((_props) => {
 		offset: typeof offset === "number" ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
 		inline,
 		strategy: floatingStrategy,
-		middlewares
+		middlewares,
+		hideDetached
 	});
 	(0, react.useEffect)(() => {
 		const targetNode = target instanceof HTMLElement ? target : typeof target === "string" ? document.querySelector(target) : target?.current || null;
@@ -142,7 +144,8 @@ const Tooltip = require_factory.factory((_props) => {
 							...mergeStyles,
 							zIndex,
 							top: tooltip.y ?? 0,
-							left: tooltip.x ?? 0
+							left: tooltip.x ?? 0,
+							...tooltip.referenceHidden ? { display: "none" } : null
 						}
 					}),
 					children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingArrow.FloatingArrow, {
@@ -192,7 +195,8 @@ const Tooltip = require_factory.factory((_props) => {
 						...mergeStyles,
 						zIndex,
 						top: tooltip.y ?? 0,
-						left: tooltip.x ?? 0
+						left: tooltip.x ?? 0,
+						...tooltip.referenceHidden ? { display: "none" } : null
 					}
 				}),
 				children: [label, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FloatingArrow.FloatingArrow, {

package/cjs/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useRef","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","useMergedRef","getRefProp","cloneElement","cx","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getRefProp,\n  getSingleElementChild,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingArrow,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getArrowMergeDropdownStyles,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n  TooltipGroup,\n  type TooltipGroupProps,\n  type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n  /** Called when tooltip position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Open delay in ms */\n  openDelay?: number;\n\n  /** Close delay in ms @default 0 */\n  closeDelay?: number;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Uncontrolled tooltip initial opened state */\n  defaultOpened?: boolean;\n\n  /** Space between target element and tooltip in px @default 5 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** If set, the tooltip has an arrow @default false */\n  withArrow?: boolean;\n\n  /** Arrow size in px @default 4 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position relative to the tooltip @default side */\n  arrowPosition?: ArrowPosition;\n\n  /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n\n  /** If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. Required by [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) if the tooltip contains interactive content. Note that an interactive tooltip intercepts pointer events of the content it overlaps @default false */\n  interactive?: boolean;\n\n  /** Must be set if the tooltip target is an inline element */\n  inline?: boolean;\n\n  /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n  keepMounted?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Selector, ref of an element or element itself that should be used for positioning */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n}\n\nexport type TooltipFactory = Factory<{\n  props: TooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n  staticComponents: {\n    Floating: typeof TooltipFloating;\n    Group: typeof TooltipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'top',\n  refProp: 'ref',\n  withinPortal: true,\n  arrowSize: 4,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  offset: 5,\n  transitionProps: { duration: 100, transition: 'fade' },\n  events: { hover: true, focus: false, touch: false },\n  zIndex: getDefaultZIndex('popover'),\n  middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      theme,\n      color: color || theme.primaryColor,\n      autoContrast,\n      variant: variant || 'filled',\n    });\n\n    return {\n      tooltip: {\n        '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--tooltip-bg': color ? colors.background : undefined,\n        '--tooltip-color': color ? colors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n  const props = useProps('Tooltip', defaultProps, _props);\n  const {\n    children,\n    position,\n    refProp,\n    label,\n    openDelay,\n    closeDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    withinPortal,\n    radius,\n    color,\n    classNames,\n    styles,\n    unstyled,\n    style,\n    className,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    offset,\n    transitionProps,\n    multiline,\n    events,\n    interactive,\n    zIndex,\n    disabled,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    inline,\n    variant,\n    keepMounted,\n    vars,\n    portalProps,\n    mod,\n    floatingStrategy,\n    middlewares,\n    autoContrast,\n    attributes,\n    target,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const tooltip = useTooltip({\n    position: getFloatingPosition(dir, position),\n    closeDelay,\n    openDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    events,\n    interactive,\n    arrowRef,\n    arrowOffset,\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    inline,\n    strategy: floatingStrategy,\n    middlewares,\n  });\n\n  useEffect(() => {\n    const targetNode =\n      target instanceof HTMLElement\n        ? target\n        : typeof target === 'string'\n          ? document.querySelector(target)\n          : target?.current || null;\n\n    if (targetNode) {\n      tooltip.reference(targetNode);\n    }\n  }, [target, tooltip]);\n\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const child = getSingleElementChild(children);\n  if (!target && !child) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const tooltipStyles = getStyles('tooltip');\n  const interactiveMod = interactive && !disabled && !!tooltip.opened;\n  const mergeStyles =\n    arrowPosition === 'merge' && withArrow\n      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n      : undefined;\n\n  if (target) {\n    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n    return (\n      <>\n        <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n          <Transition\n            {...transition}\n            keepMounted={keepMounted}\n            mounted={!disabled && !!tooltip.opened}\n            duration={tooltip.isGroupPhase ? 10 : transition.duration}\n          >\n            {(transitionStyles) => (\n              <Box\n                {...others}\n                data-fixed={floatingStrategy === 'fixed' || undefined}\n                variant={variant}\n                mod={[{ multiline, interactive: interactiveMod }, mod]}\n                {...tooltipStyles}\n                {...tooltip.getFloatingProps({\n                  ref: tooltip.floating,\n                  className: tooltipStyles.className,\n                  style: {\n                    ...tooltipStyles.style,\n                    ...transitionStyles,\n                    ...mergeStyles,\n                    zIndex: zIndex as React.CSSProperties['zIndex'],\n                    top: tooltip.y ?? 0,\n                    left: tooltip.x ?? 0,\n                  },\n                })}\n              >\n                {label}\n                <FloatingArrow\n                  ref={arrowRef}\n                  arrowX={tooltip.arrowX}\n                  arrowY={tooltip.arrowY}\n                  visible={withArrow}\n                  position={tooltip.placement}\n                  arrowSize={arrowSize!}\n                  arrowOffset={arrowOffset!}\n                  arrowRadius={arrowRadius!}\n                  arrowPosition={arrowPosition!}\n                  {...getStyles('arrow')}\n                />\n              </Box>\n            )}\n          </Transition>\n        </OptionalPortal>\n      </>\n    );\n  }\n\n  // fallback to children-based approach\n  const childProps = child!.props as any;\n  const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n  const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Transition\n          {...transition}\n          keepMounted={keepMounted}\n          mounted={!disabled && !!tooltip.opened}\n          duration={tooltip.isGroupPhase ? 10 : transition.duration}\n        >\n          {(transitionStyles) => (\n            <Box\n              {...others}\n              data-fixed={floatingStrategy === 'fixed' || undefined}\n              variant={variant}\n              mod={[{ multiline, interactive: interactiveMod }, mod]}\n              {...tooltip.getFloatingProps({\n                ref: tooltip.floating,\n                className: getStyles('tooltip').className,\n                style: {\n                  ...getStyles('tooltip').style,\n                  ...transitionStyles,\n                  ...mergeStyles,\n                  zIndex: zIndex as React.CSSProperties['zIndex'],\n                  top: tooltip.y ?? 0,\n                  left: tooltip.x ?? 0,\n                },\n              })}\n            >\n              {label}\n              <FloatingArrow\n                ref={arrowRef}\n                arrowX={tooltip.arrowX}\n                arrowY={tooltip.arrowY}\n                visible={withArrow}\n                position={tooltip.placement}\n                arrowSize={arrowSize}\n                arrowOffset={arrowOffset}\n                arrowRadius={arrowRadius}\n                arrowPosition={arrowPosition}\n                {...getStyles('arrow')}\n              />\n            </Box>\n          )}\n        </Transition>\n      </OptionalPortal>\n\n      {cloneElement(\n        child!,\n        tooltip.getReferenceProps({\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onMouseMove: props.onMouseMove,\n          onPointerDown: props.onPointerDown,\n          onPointerEnter: props.onPointerEnter,\n          ...childProps,\n          className: cx(className, childProps.className),\n          [refProp]: targetRef,\n        })\n      )}\n    </>\n  );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n  export type Props = TooltipProps;\n  export type Factory = TooltipFactory;\n  export type CssVariables = TooltipCssVariables;\n  export type StylesNames = TooltipStylesNames;\n\n  export namespace Group {\n    export type Props = TooltipGroupProps;\n    export type ContextValue = TooltipGroupContextValue;\n  }\n\n  export namespace Floating {\n    export type Props = TooltipFloatingProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useRef","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","useMergedRef","getRefProp","cloneElement","cx","classes","TooltipFloating","TooltipGroup"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  createVarsResolver,\n  factory,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getRefProp,\n  getSingleElementChild,\n  useDirection,\n  useProps,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingArrow,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getArrowMergeDropdownStyles,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n  TooltipGroup,\n  type TooltipGroupProps,\n  type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n  /** Called when tooltip position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Open delay in ms */\n  openDelay?: number;\n\n  /** Close delay in ms @default 0 */\n  closeDelay?: number;\n\n  /** Controlled opened state */\n  opened?: boolean;\n\n  /** Uncontrolled tooltip initial opened state */\n  defaultOpened?: boolean;\n\n  /** Space between target element and tooltip in px @default 5 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** If set, the tooltip has an arrow @default false */\n  withArrow?: boolean;\n\n  /** Arrow size in px @default 4 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position relative to the tooltip @default side */\n  arrowPosition?: ArrowPosition;\n\n  /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } */\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n\n  /** If set, the tooltip stays open while the pointer is over it @default false */\n  interactive?: boolean;\n\n  /** Must be set if the tooltip target is an inline element */\n  inline?: boolean;\n\n  /** If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead */\n  keepMounted?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, adjusts text color based on background color for `filled` variant */\n  autoContrast?: boolean;\n\n  /** Selector, ref of an element or element itself that should be used for positioning */\n  target?: React.RefObject<HTMLElement | null> | HTMLElement | null | string;\n\n  /** If set, the tooltip is hidden when the target element is removed from the DOM, hidden with `display: none` or scrolled out of the visible area. Has no effect on `Tooltip.Floating` @default true */\n  hideDetached?: boolean;\n}\n\nexport type TooltipFactory = Factory<{\n  props: TooltipProps;\n  ref: HTMLDivElement;\n  stylesNames: TooltipStylesNames;\n  vars: TooltipCssVariables;\n  staticComponents: {\n    Floating: typeof TooltipFloating;\n    Group: typeof TooltipGroup;\n  };\n}>;\n\nconst defaultProps = {\n  position: 'top',\n  refProp: 'ref',\n  withinPortal: true,\n  arrowSize: 4,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  offset: 5,\n  transitionProps: { duration: 100, transition: 'fade' },\n  events: { hover: true, focus: false, touch: false },\n  zIndex: getDefaultZIndex('popover'),\n  middlewares: { flip: true, shift: true, inline: false },\n  hideDetached: true,\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n  (theme, { radius, color, variant, autoContrast }) => {\n    const colors = theme.variantColorResolver({\n      theme,\n      color: color || theme.primaryColor,\n      autoContrast,\n      variant: variant || 'filled',\n    });\n\n    return {\n      tooltip: {\n        '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n        '--tooltip-bg': color ? colors.background : undefined,\n        '--tooltip-color': color ? colors.color : undefined,\n      },\n    };\n  }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n  const props = useProps('Tooltip', defaultProps, _props);\n  const {\n    children,\n    position,\n    refProp,\n    label,\n    openDelay,\n    closeDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    withinPortal,\n    radius,\n    color,\n    classNames,\n    styles,\n    unstyled,\n    style,\n    className,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    offset,\n    transitionProps,\n    multiline,\n    events,\n    interactive,\n    zIndex,\n    disabled,\n    onClick,\n    onMouseEnter,\n    onMouseLeave,\n    inline,\n    variant,\n    keepMounted,\n    vars,\n    portalProps,\n    mod,\n    floatingStrategy,\n    middlewares,\n    autoContrast,\n    attributes,\n    target,\n    hideDetached,\n    ref,\n    ...others\n  } = props;\n\n  const { dir } = useDirection();\n  const arrowRef = useRef<HTMLDivElement>(null);\n\n  const tooltip = useTooltip({\n    position: getFloatingPosition(dir, position),\n    closeDelay,\n    openDelay,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    events,\n    interactive,\n    arrowRef,\n    arrowOffset,\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    inline,\n    strategy: floatingStrategy,\n    middlewares,\n    hideDetached,\n  });\n\n  useEffect(() => {\n    const targetNode =\n      target instanceof HTMLElement\n        ? target\n        : typeof target === 'string'\n          ? document.querySelector(target)\n          : target?.current || null;\n\n    if (targetNode) {\n      tooltip.reference(targetNode);\n    }\n  }, [target, tooltip]);\n\n  const getStyles = useStyles<TooltipFactory>({\n    name: 'Tooltip',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'tooltip',\n    vars,\n    varsResolver,\n  });\n\n  const child = getSingleElementChild(children);\n  if (!target && !child) {\n    throw new Error(\n      '[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const tooltipStyles = getStyles('tooltip');\n  const interactiveMod = interactive && !disabled && !!tooltip.opened;\n  const mergeStyles =\n    arrowPosition === 'merge' && withArrow\n      ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n      : undefined;\n\n  if (target) {\n    const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n    return (\n      <>\n        <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n          <Transition\n            {...transition}\n            keepMounted={keepMounted}\n            mounted={!disabled && !!tooltip.opened}\n            duration={tooltip.isGroupPhase ? 10 : transition.duration}\n          >\n            {(transitionStyles) => (\n              <Box\n                {...others}\n                data-fixed={floatingStrategy === 'fixed' || undefined}\n                variant={variant}\n                mod={[{ multiline, interactive: interactiveMod }, mod]}\n                {...tooltipStyles}\n                {...tooltip.getFloatingProps({\n                  ref: tooltip.floating,\n                  className: tooltipStyles.className,\n                  style: {\n                    ...tooltipStyles.style,\n                    ...transitionStyles,\n                    ...mergeStyles,\n                    zIndex: zIndex as React.CSSProperties['zIndex'],\n                    top: tooltip.y ?? 0,\n                    left: tooltip.x ?? 0,\n                    ...(tooltip.referenceHidden ? { display: 'none' } : null),\n                  },\n                })}\n              >\n                {label}\n                <FloatingArrow\n                  ref={arrowRef}\n                  arrowX={tooltip.arrowX}\n                  arrowY={tooltip.arrowY}\n                  visible={withArrow}\n                  position={tooltip.placement}\n                  arrowSize={arrowSize!}\n                  arrowOffset={arrowOffset!}\n                  arrowRadius={arrowRadius!}\n                  arrowPosition={arrowPosition!}\n                  {...getStyles('arrow')}\n                />\n              </Box>\n            )}\n          </Transition>\n        </OptionalPortal>\n      </>\n    );\n  }\n\n  // fallback to children-based approach\n  const childProps = child!.props as any;\n  const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n  const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n  return (\n    <>\n      <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n        <Transition\n          {...transition}\n          keepMounted={keepMounted}\n          mounted={!disabled && !!tooltip.opened}\n          duration={tooltip.isGroupPhase ? 10 : transition.duration}\n        >\n          {(transitionStyles) => (\n            <Box\n              {...others}\n              data-fixed={floatingStrategy === 'fixed' || undefined}\n              variant={variant}\n              mod={[{ multiline, interactive: interactiveMod }, mod]}\n              {...tooltip.getFloatingProps({\n                ref: tooltip.floating,\n                className: getStyles('tooltip').className,\n                style: {\n                  ...getStyles('tooltip').style,\n                  ...transitionStyles,\n                  ...mergeStyles,\n                  zIndex: zIndex as React.CSSProperties['zIndex'],\n                  top: tooltip.y ?? 0,\n                  left: tooltip.x ?? 0,\n                  ...(tooltip.referenceHidden ? { display: 'none' } : null),\n                },\n              })}\n            >\n              {label}\n              <FloatingArrow\n                ref={arrowRef}\n                arrowX={tooltip.arrowX}\n                arrowY={tooltip.arrowY}\n                visible={withArrow}\n                position={tooltip.placement}\n                arrowSize={arrowSize}\n                arrowOffset={arrowOffset}\n                arrowRadius={arrowRadius}\n                arrowPosition={arrowPosition}\n                {...getStyles('arrow')}\n              />\n            </Box>\n          )}\n        </Transition>\n      </OptionalPortal>\n\n      {cloneElement(\n        child!,\n        tooltip.getReferenceProps({\n          onClick,\n          onMouseEnter,\n          onMouseLeave,\n          onMouseMove: props.onMouseMove,\n          onPointerDown: props.onPointerDown,\n          onPointerEnter: props.onPointerEnter,\n          ...childProps,\n          className: cx(className, childProps.className),\n          [refProp]: targetRef,\n        })\n      )}\n    </>\n  );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n  export type Props = TooltipProps;\n  export type Factory = TooltipFactory;\n  export type CssVariables = TooltipCssVariables;\n  export type StylesNames = TooltipStylesNames;\n\n  export namespace Group {\n    export type Props = TooltipGroupProps;\n    export type ContextValue = TooltipGroupContextValue;\n  }\n\n  export namespace Floating {\n    export type Props = TooltipFloatingProps;\n  }\n}\n"],"mappings":"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"}

package/cjs/components/Tooltip/use-tooltip.cjs

@@ -1,4 +1,5 @@
 "use client";
+const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
 const require_TooltipGroup = require("./TooltipGroup/TooltipGroup.cjs");
 let react = require("react");
 let _mantine_hooks = require("@mantine/hooks");
@@ -16,7 +17,7 @@ function getDefaultMiddlewares(middlewares) {
 }
 function getTooltipMiddlewares(settings) {
 	const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);
-	const middlewares = [(0, _floating_ui_react.offset)(settings.offset)];
+	const middlewares = [(0, _floating_ui_react.offset)(settings.offset), (0, _floating_ui_react.hide)()];
 	if (middlewaresOptions.shift) middlewares.push((0, _floating_ui_react.shift)(typeof middlewaresOptions.shift === "boolean" ? { padding: 8 } : {
 		padding: 8,
 		...middlewaresOptions.shift
@@ -35,11 +36,12 @@ function useTooltip(settings) {
 	const opened = typeof settings.opened === "boolean" ? settings.opened : uncontrolledOpened;
 	const withinGroup = (0, react.use)(require_TooltipGroup.TooltipGroupContext).withinGroup;
 	const uid = (0, _mantine_hooks.useId)();
+	const env = require_Mantine_context.useMantineEnv();
 	const onChange = (0, react.useCallback)((_opened) => {
 		setUncontrolledOpened(_opened);
 		if (_opened) setCurrentId(uid);
 	}, [uid]);
-	const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} } } = (0, _floating_ui_react.useFloating)({
+	const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideData } } = (0, _floating_ui_react.useFloating)({
 		strategy: settings.strategy,
 		placement: settings.position,
 		open: opened,
@@ -84,7 +86,8 @@ function useTooltip(settings) {
 		getReferenceProps,
 		isGroupPhase,
 		opened,
-		placement
+		placement,
+		referenceHidden: settings.hideDetached && env !== "test" ? hideData?.referenceHidden : false
 	};
 }
 //#endregion

package/cjs/components/Tooltip/use-tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tooltip.cjs","names":["offset","shift","flip","arrow","inline","useState","use","TooltipGroupContext","useId","useCallback","useFloating","autoUpdate","useDelayGroup","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useRef"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  inline,\n  offset,\n  safePolygon,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n  position: FloatingPosition;\n  closeDelay?: number;\n  openDelay?: number;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  offset: number | FloatingAxesOffsets;\n  arrowRef?: React.RefObject<HTMLDivElement | null>;\n  arrowOffset?: number;\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n  interactive?: boolean;\n  inline?: boolean;\n  strategy?: FloatingStrategy;\n  middlewares?: TooltipMiddlewares;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getTooltipMiddlewares(settings: UseTooltip) {\n  const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n  const middlewares: Middleware[] = [offset(settings.offset)];\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { padding: 8 }\n          : { padding: 8, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  } else if (settings.inline) {\n    middlewares.push(inline());\n  }\n\n  return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(TooltipGroupContext).withinGroup;\n  const uid = useId();\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n      }\n    },\n    [uid]\n  );\n\n  const {\n    x,\n    y,\n    context,\n    refs,\n    placement,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n  } = useFloating({\n    strategy: settings.strategy,\n    placement: settings.position,\n    open: opened,\n    onOpenChange: onChange,\n    middleware: getTooltipMiddlewares(settings),\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events?.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events?.touch,\n      handleClose: settings.interactive ? safePolygon() : null,\n    }),\n    useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n    useRole(context, { role: 'tooltip' }),\n    // Cannot be used with controlled tooltip, page jumps\n    useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n  ]);\n\n  const previousPlacementRef = useRef(placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== placement) {\n      previousPlacementRef.current = placement;\n      settings.onPositionChange?.(placement);\n    }\n  }, [placement]);\n\n  const isGroupPhase = opened && currentId && currentId !== uid;\n\n  return {\n    x,\n    y,\n    arrowX,\n    arrowY,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    getFloatingProps,\n    getReferenceProps,\n    isGroupPhase,\n    opened,\n    placement,\n  };\n}\n"],"mappings":"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"}
+{"version":3,"file":"use-tooltip.cjs","names":["offset","hide","shift","flip","arrow","inline","useState","use","TooltipGroupContext","useId","useMantineEnv","useCallback","useFloating","autoUpdate","useDelayGroup","useInteractions","useHover","safePolygon","useFocus","useRole","useDismiss","useRef"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n  arrow,\n  autoUpdate,\n  flip,\n  hide,\n  inline,\n  offset,\n  safePolygon,\n  shift,\n  useDelayGroup,\n  useDismiss,\n  useFloating,\n  useFocus,\n  useHover,\n  useInteractions,\n  useRole,\n  type Middleware,\n} from '@floating-ui/react';\nimport { useId, useIsomorphicEffect } from '@mantine/hooks';\nimport { useMantineEnv } from '../../core';\nimport { FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';\nimport { type TooltipMiddlewares } from './Tooltip.types';\nimport { TooltipGroupContext } from './TooltipGroup/TooltipGroup';\n\ninterface UseTooltip {\n  position: FloatingPosition;\n  closeDelay?: number;\n  openDelay?: number;\n  onPositionChange?: (position: FloatingPosition) => void;\n  opened?: boolean;\n  defaultOpened?: boolean;\n  offset: number | FloatingAxesOffsets;\n  arrowRef?: React.RefObject<HTMLDivElement | null>;\n  arrowOffset?: number;\n  events?: { hover: boolean; focus: boolean; touch: boolean };\n  interactive?: boolean;\n  inline?: boolean;\n  strategy?: FloatingStrategy;\n  middlewares?: TooltipMiddlewares;\n  hideDetached?: boolean;\n}\n\nfunction getDefaultMiddlewares(middlewares: TooltipMiddlewares | undefined): TooltipMiddlewares {\n  if (middlewares === undefined) {\n    return { shift: true, flip: true };\n  }\n\n  const result = { ...middlewares };\n  if (middlewares.shift === undefined) {\n    result.shift = true;\n  }\n\n  if (middlewares.flip === undefined) {\n    result.flip = true;\n  }\n\n  return result;\n}\n\nfunction getTooltipMiddlewares(settings: UseTooltip) {\n  const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);\n  const middlewares: Middleware[] = [offset(settings.offset), hide()];\n\n  if (middlewaresOptions.shift) {\n    middlewares.push(\n      shift(\n        typeof middlewaresOptions.shift === 'boolean'\n          ? { padding: 8 }\n          : { padding: 8, ...middlewaresOptions.shift }\n      )\n    );\n  }\n\n  if (middlewaresOptions.flip) {\n    middlewares.push(\n      typeof middlewaresOptions.flip === 'boolean' ? flip() : flip(middlewaresOptions.flip)\n    );\n  }\n\n  middlewares.push(arrow({ element: settings.arrowRef!, padding: settings.arrowOffset }));\n\n  if (middlewaresOptions.inline) {\n    middlewares.push(\n      typeof middlewaresOptions.inline === 'boolean' ? inline() : inline(middlewaresOptions.inline)\n    );\n  } else if (settings.inline) {\n    middlewares.push(inline());\n  }\n\n  return middlewares;\n}\n\nexport function useTooltip(settings: UseTooltip) {\n  const [uncontrolledOpened, setUncontrolledOpened] = useState(settings.defaultOpened);\n  const controlled = typeof settings.opened === 'boolean';\n  const opened = controlled ? settings.opened : uncontrolledOpened;\n  const withinGroup = use(TooltipGroupContext).withinGroup;\n  const uid = useId();\n  const env = useMantineEnv();\n\n  const onChange = useCallback(\n    (_opened: boolean) => {\n      setUncontrolledOpened(_opened);\n\n      if (_opened) {\n        setCurrentId(uid);\n      }\n    },\n    [uid]\n  );\n\n  const {\n    x,\n    y,\n    context,\n    refs,\n    placement,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideData },\n  } = useFloating({\n    strategy: settings.strategy,\n    placement: settings.position,\n    open: opened,\n    onOpenChange: onChange,\n    middleware: getTooltipMiddlewares(settings),\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { delay: groupDelay, currentId, setCurrentId } = useDelayGroup(context, { id: uid });\n\n  const { getReferenceProps, getFloatingProps } = useInteractions([\n    useHover(context, {\n      enabled: settings.events?.hover,\n      delay: withinGroup ? groupDelay : { open: settings.openDelay, close: settings.closeDelay },\n      mouseOnly: !settings.events?.touch,\n      handleClose: settings.interactive ? safePolygon() : null,\n    }),\n    useFocus(context, { enabled: settings.events?.focus, visibleOnly: true }),\n    useRole(context, { role: 'tooltip' }),\n    // Cannot be used with controlled tooltip, page jumps\n    useDismiss(context, { enabled: typeof settings.opened === 'undefined' }),\n  ]);\n\n  const previousPlacementRef = useRef(placement);\n  useIsomorphicEffect(() => {\n    if (previousPlacementRef.current !== placement) {\n      previousPlacementRef.current = placement;\n      settings.onPositionChange?.(placement);\n    }\n  }, [placement]);\n\n  const isGroupPhase = opened && currentId && currentId !== uid;\n\n  return {\n    x,\n    y,\n    arrowX,\n    arrowY,\n    reference: refs.setReference,\n    floating: refs.setFloating,\n    getFloatingProps,\n    getReferenceProps,\n    isGroupPhase,\n    opened,\n    placement,\n    referenceHidden: settings.hideDetached && env !== 'test' ? hideData?.referenceHidden : false,\n  };\n}\n"],"mappings":"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"}

package/cjs/components/Tour/Tour.cjs

@@ -0,0 +1,283 @@
+"use client";
+const require_get_size = require("../../core/utils/get-size/get-size.cjs");
+const require_create_vars_resolver = require("../../core/styles-api/create-vars-resolver/create-vars-resolver.cjs");
+const require_get_theme_color = require("../../core/MantineProvider/color-functions/get-theme-color/get-theme-color.cjs");
+const require_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");
+const require_use_styles = require("../../core/styles-api/use-styles/use-styles.cjs");
+const require_factory = require("../../core/factory/factory.cjs");
+const require_Box = require("../../core/Box/Box.cjs");
+const require_OptionalPortal = require("../Portal/OptionalPortal.cjs");
+const require_Transition = require("../Transition/Transition.cjs");
+const require_FocusTrap = require("../FocusTrap/FocusTrap.cjs");
+const require_get_overlay_hit_path = require("./get-overlay-hit-path.cjs");
+const require_Tour_context = require("./Tour.context.cjs");
+const require_Tour_module = require("./Tour.module.cjs");
+const require_TourBeacon = require("./TourBeacon/TourBeacon.cjs");
+const require_TourBeaconPositioned = require("./TourBeaconPositioned.cjs");
+const require_TourBody = require("./TourBody/TourBody.cjs");
+const require_TourCloseButton = require("./TourCloseButton/TourCloseButton.cjs");
+const require_TourNavigation = require("./TourNavigation/TourNavigation.cjs");
+const require_TourOverlay = require("./TourOverlay/TourOverlay.cjs");
+const require_TourRoot = require("./TourRoot/TourRoot.cjs");
+const require_TourStep = require("./TourStep/TourStep.cjs");
+const require_TourTitle = require("./TourTitle/TourTitle.cjs");
+const require_use_tooltip_auto_focus = require("./use-tooltip-auto-focus.cjs");
+const require_TourTooltip = require("./TourTooltip/TourTooltip.cjs");
+const require_use_tour = require("./use-tour.cjs");
+let react = require("react");
+let _mantine_hooks = require("@mantine/hooks");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Tour/Tour.tsx
+const defaultProps = {
+	active: false,
+	mode: "guided",
+	withOverlay: true,
+	withOverlayInteraction: false,
+	withCloseButton: true,
+	withKeyboardNavigation: true,
+	withScrollIntoView: true,
+	spotlightPadding: 8,
+	closeOnEscape: true,
+	closeOnOverlayClick: false,
+	withinPortal: true,
+	zIndex: 1e4,
+	transitionProps: {
+		duration: 200,
+		transition: "pop"
+	},
+	maxWidth: 360,
+	stepTransitionDuration: 300,
+	overlayColor: "rgba(0, 0, 0, 0.5)"
+};
+const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { zIndex, overlayColor, tooltipShadow, color }) => ({ root: {
+	"--tour-color": color ? require_get_theme_color.getThemeColor(color, theme) : void 0,
+	"--tour-z-index": zIndex?.toString(),
+	"--tour-overlay-color": overlayColor,
+	"--tour-tooltip-radius": void 0,
+	"--tour-tooltip-shadow": require_get_size.getShadow(tooltipShadow),
+	"--tour-beacon-size": void 0,
+	"--tour-beacon-color": void 0
+} }));
+const noop = () => {};
+function getBeaconLabel(label, title) {
+	return typeof title === "string" || typeof title === "number" ? `${label}: ${title}` : label;
+}
+const Tour = require_factory.factory((_props) => {
+	const props = require_use_props.useProps("Tour", defaultProps, _props);
+	const { classNames, className, style, styles, unstyled, vars, active, onClose, step: stepProp, defaultStep, onStepChange, onStepOpen, onStepClose, mode, withOverlay, withOverlayInteraction, withCloseButton, withKeyboardNavigation, withScrollIntoView, scrollToHandler, spotlightPadding, spotlightRadius, closeOnEscape, closeOnOverlayClick, labels: labelsProp, withinPortal, portalProps, zIndex, transitionProps, stepTransitionDuration, maxWidth, overlayColor, tooltipShadow, color, children, attributes, ...others } = props;
+	const labels = {
+		...require_Tour_context.defaultLabels,
+		...labelsProp
+	};
+	const spotlightPaddingValue = spotlightPadding;
+	const id = (0, react.useId)();
+	const maskId = `${id}-mask`;
+	const [registeredTitleId, registerTitle] = (0, react.useState)(null);
+	const [registeredBodyId, registerBody] = (0, react.useState)(null);
+	const titleId = registeredTitleId ?? `${id}-title`;
+	const bodyId = registeredBodyId ?? `${id}-body`;
+	const titleMounted = registeredTitleId !== null;
+	const bodyMounted = registeredBodyId !== null;
+	const beaconToFocusRef = (0, react.useRef)(null);
+	const { steps, setStep, beaconOpenStep, openBeaconStep, close, displayStep, displayStepIndex, targetRect, floatingStyles, floatingRefs, isCentered, constrainedWidth, stepMoving, showTooltip, clearExitedTarget } = require_use_tour.useTour({
+		active,
+		onClose,
+		step: stepProp,
+		defaultStep,
+		onStepChange,
+		onStepOpen,
+		onStepClose,
+		mode,
+		withKeyboardNavigation,
+		withScrollIntoView,
+		scrollToHandler,
+		closeOnEscape,
+		maxWidth,
+		stepTransitionDuration,
+		children,
+		stepComponent: require_TourStep.TourStep
+	});
+	(0, react.useEffect)(() => {
+		if (!active) beaconToFocusRef.current = null;
+	}, [active]);
+	const resolvedSpotlightPadding = displayStep?.spotlightPadding ?? spotlightPaddingValue;
+	const resolvedSpotlightRadius = displayStep?.spotlightRadius ?? spotlightRadius ?? 4;
+	const resolvedWithOverlay = displayStep?.withOverlay ?? withOverlay;
+	const focusTrapActive = showTooltip && mode === "guided" && !!resolvedWithOverlay && !withOverlayInteraction;
+	const autoFocusRef = require_use_tooltip_auto_focus.useTooltipAutoFocus({
+		autoFocus: showTooltip && !focusTrapActive,
+		opened: showTooltip,
+		step: displayStepIndex
+	});
+	const tooltipMergedRef = (0, _mantine_hooks.useMergedRef)(floatingRefs.setFloating, autoFocusRef);
+	const getStyles = require_use_styles.useStyles({
+		name: "Tour",
+		classes: require_Tour_module.default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tour_context.TourProvider, {
+		value: {
+			getStyles,
+			step: displayStepIndex,
+			setStep,
+			stepsCount: steps.length,
+			close,
+			withOverlay: !!resolvedWithOverlay,
+			withOverlayInteraction,
+			withCloseButton,
+			spotlightPadding: resolvedSpotlightPadding,
+			spotlightRadius: resolvedSpotlightRadius,
+			closeOnOverlayClick,
+			transitionProps,
+			color,
+			labels,
+			titleId,
+			bodyId,
+			titleMounted,
+			bodyMounted,
+			registerTitle,
+			registerBody,
+			setTargetElement: noop
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_OptionalPortal.OptionalPortal, {
+			...portalProps,
+			withinPortal,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+				...getStyles("root"),
+				...others,
+				children: [
+					resolvedWithOverlay && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transition.Transition, {
+						mounted: showTooltip,
+						duration: transitionProps?.duration ?? 200,
+						transition: "fade",
+						children: (overlayStyles) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+							...getStyles("overlay"),
+							role: "presentation",
+							width: "100%",
+							height: "100%",
+							style: overlayStyles,
+							"data-with-overlay-interaction": withOverlayInteraction || void 0,
+							onMouseDown: (event) => event.preventDefault(),
+							onClick: () => {
+								if (closeOnOverlayClick) close();
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("mask", {
+									id: maskId,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+										x: "0",
+										y: "0",
+										width: "100%",
+										height: "100%",
+										fill: "white"
+									}), targetRect && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+										x: targetRect.left - resolvedSpotlightPadding,
+										y: targetRect.top - resolvedSpotlightPadding,
+										width: targetRect.width + resolvedSpotlightPadding * 2,
+										height: targetRect.height + resolvedSpotlightPadding * 2,
+										rx: resolvedSpotlightRadius,
+										ry: resolvedSpotlightRadius,
+										fill: "black",
+										...getStyles("spotlight", { style: stepMoving ? { transition: "all 150ms ease" } : void 0 })
+									})]
+								}) }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("rect", {
+									x: "0",
+									y: "0",
+									width: "100%",
+									height: "100%",
+									style: { fill: "var(--tour-overlay-color)" },
+									mask: `url(#${maskId})`
+								}),
+								withOverlayInteraction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+									d: require_get_overlay_hit_path.getOverlayHitPath(targetRect, resolvedSpotlightPadding, resolvedSpotlightRadius),
+									fillRule: "evenodd",
+									fill: "transparent",
+									style: { pointerEvents: "auto" }
+								})
+							]
+						})
+					}),
+					active && mode === "beacon" && beaconOpenStep === null && steps.map((stepData, index) => {
+						if (stepData.withBeacon === false) return null;
+						return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TourBeaconPositioned.TourBeaconPositioned, {
+							target: stepData.target,
+							onClick: () => {
+								beaconToFocusRef.current = index;
+								openBeaconStep(index);
+							},
+							ariaLabel: getBeaconLabel(labels.beacon, stepData.title),
+							withInitialFocus: beaconToFocusRef.current === index,
+							onInitialFocus: () => {
+								beaconToFocusRef.current = null;
+							},
+							pulseStyles: getStyles("beaconPulse"),
+							...getStyles("beacon")
+						}, index);
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Transition.Transition, {
+						mounted: showTooltip && !!displayStep,
+						duration: transitionProps?.duration ?? 200,
+						transition: transitionProps?.transition ?? "pop",
+						onExited: clearExitedTarget,
+						timingFunction: transitionProps?.timingFunction,
+						children: ({ transitionProperty, transitionDuration, transitionTimingFunction, ...transitionStyles }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusTrap.FocusTrap, {
+							active: focusTrapActive,
+							innerRef: tooltipMergedRef,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Box.Box, {
+								...getStyles("tooltip"),
+								role: "dialog",
+								tabIndex: -1,
+								"aria-labelledby": titleMounted ? titleId : void 0,
+								"aria-label": titleMounted ? void 0 : labels.stepCounter(displayStepIndex + 1, steps.length),
+								"aria-describedby": bodyMounted ? bodyId : void 0,
+								"data-centered": isCentered || void 0,
+								style: {
+									...getStyles("tooltip").style,
+									...isCentered ? {} : floatingStyles,
+									...transitionStyles,
+									width: isCentered ? maxWidth : constrainedWidth,
+									transition: [...transitionProperty ? transitionProperty.split(",").map((prop) => `${prop.trim()} ${transitionDuration} ${transitionTimingFunction || "ease"}`) : [], ...stepMoving ? [
+										"top",
+										"left",
+										"translate"
+									].map((prop) => `${prop} ${stepTransitionDuration}ms cubic-bezier(0.16, 1, 0.3, 1)`) : []].join(", ")
+								},
+								children: [
+									focusTrapActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusTrap.FocusTrap.InitialFocus, {}),
+									withCloseButton && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TourCloseButton.TourCloseButton, {}),
+									displayStep?.title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TourTitle.TourTitle, { children: displayStep.title }),
+									displayStep?.children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TourBody.TourBody, { children: displayStep.children }),
+									/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_TourNavigation.TourNavigation, {})
+								]
+							})
+						})
+					})
+				]
+			})
+		})
+	});
+});
+Tour.classes = require_Tour_module.default;
+Tour.displayName = "@mantine/core/Tour";
+Tour.Root = require_TourRoot.TourRoot;
+Tour.Step = require_TourStep.TourStep;
+Tour.Overlay = require_TourOverlay.TourOverlay;
+Tour.Tooltip = require_TourTooltip.TourTooltip;
+Tour.Title = require_TourTitle.TourTitle;
+Tour.Body = require_TourBody.TourBody;
+Tour.CloseButton = require_TourCloseButton.TourCloseButton;
+Tour.Navigation = require_TourNavigation.TourNavigation;
+Tour.Beacon = require_TourBeacon.TourBeacon;
+//#endregion
+exports.Tour = Tour;
+
+//# sourceMappingURL=Tour.cjs.map