@mantine/core 9.6.2 → 9.7.0

package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs

@@ -0,0 +1,47 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { polymorphicFactory } from "../../../core/factory/polymorphic-factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggle/ToolbarToggle.tsx
+const defaultProps = {};
+const ToolbarToggle = polymorphicFactory((_props) => {
+	const { classNames, className, style, styles, vars, disabled, active, autoWidth, children, component, onClick, ...others } = useProps("ToolbarToggle", defaultProps, _props);
+	const ctx = useToolbarContext();
+	return /* @__PURE__ */ jsx(Box, {
+		component: component || "button",
+		type: !component || component === "button" ? "button" : void 0,
+		...others,
+		...ctx.getStyles("toggle", {
+			className,
+			classNames,
+			style,
+			styles,
+			focusable: true
+		}),
+		"data-toolbar-toggle": true,
+		"data-active": active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled,
+		"aria-disabled": disabled || void 0,
+		"aria-pressed": active,
+		tabIndex: disabled ? -1 : 0,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				return;
+			}
+			onClick?.(event);
+		},
+		children
+	});
+});
+ToolbarToggle.classes = Toolbar_module_default;
+ToolbarToggle.displayName = "@mantine/core/ToolbarToggle";
+//#endregion
+export { ToolbarToggle };
+
+//# sourceMappingURL=ToolbarToggle.mjs.map

package/esm/components/Toolbar/ToolbarToggle/ToolbarToggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggle.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggle/ToolbarToggle.tsx"],"sourcesContent":["import {\n  Box,\n  BoxComponentProps,\n  CompoundStylesApiProps,\n  polymorphicFactory,\n  PolymorphicFactory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleStylesNames = 'toggle';\n\nexport interface ToolbarToggleProps\n  extends BoxComponentProps, CompoundStylesApiProps<ToolbarToggleFactory> {\n  /** If set, the toggle is disabled */\n  disabled?: boolean;\n\n  /** If set, the toggle is displayed in active state */\n  active?: boolean;\n\n  /** If set, the toggle width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n}\n\nexport type ToolbarToggleFactory = PolymorphicFactory<{\n  props: ToolbarToggleProps;\n  defaultRef: HTMLButtonElement;\n  defaultComponent: 'button';\n  stylesNames: ToolbarToggleStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleProps> = {};\n\nexport const ToolbarToggle = polymorphicFactory<ToolbarToggleFactory>(\n  (_props: ToolbarToggleProps & { component?: any }) => {\n    const props = useProps('ToolbarToggle', defaultProps, _props);\n    const {\n      classNames,\n      className,\n      style,\n      styles,\n      vars,\n      disabled,\n      active,\n      autoWidth,\n      children,\n      component,\n      onClick,\n      ...others\n    } = props as typeof props & {\n      children?: React.ReactNode;\n      component?: any;\n      onClick?: React.MouseEventHandler<HTMLElement>;\n    };\n    const ctx = useToolbarContext();\n\n    return (\n      <Box\n        component={component || 'button'}\n        type={!component || component === 'button' ? 'button' : undefined}\n        {...others}\n        {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n        data-toolbar-toggle\n        data-active={active || undefined}\n        data-disabled={disabled || undefined}\n        data-auto-width={autoWidth || undefined}\n        disabled={disabled}\n        aria-disabled={disabled || undefined}\n        aria-pressed={active}\n        tabIndex={disabled ? -1 : 0}\n        onClick={(event: React.MouseEvent<HTMLElement>) => {\n          if (disabled) {\n            event.preventDefault();\n            return;\n          }\n          onClick?.(event);\n        }}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n\nToolbarToggle.classes = classes;\nToolbarToggle.displayName = '@mantine/core/ToolbarToggle';\n"],"mappings":";;;;;;;;AAiCA,MAAM,eAA4C,CAAC;AAEnD,MAAa,gBAAgB,oBAC1B,WAAqD;CAEpD,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,QACA,WACA,UACA,WACA,SACA,GAAG,WAbS,SAAS,iBAAiB,cAAc,MAc9C;CAKR,MAAM,MAAM,kBAAkB;CAE9B,OACE,oBAAC,KAAD;EACE,WAAW,aAAa;EACxB,MAAM,CAAC,aAAa,cAAc,WAAW,WAAW,KAAA;EACxD,GAAI;EACJ,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,UAAU,KAAA;EACvB,iBAAe,YAAY,KAAA;EAC3B,mBAAiB,aAAa,KAAA;EACpB;EACV,iBAAe,YAAY,KAAA;EAC3B,gBAAc;EACd,UAAU,WAAW,KAAK;EAC1B,UAAU,UAAyC;GACjD,IAAI,UAAU;IACZ,MAAM,eAAe;IACrB;GACF;GACA,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CACF;AAEA,cAAc,UAAUA;AACxB,cAAc,cAAc"}

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs

@@ -0,0 +1,8 @@
+"use client";
+import { createSafeContext } from "../../../core/utils/create-safe-context/create-safe-context.mjs";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts
+const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] = createSafeContext("Toolbar.ToggleGroup component was not found in tree");
+//#endregion
+export { ToolbarToggleGroupProvider, useToolbarToggleGroupContext };
+
+//# sourceMappingURL=ToolbarToggleGroup.context.mjs.map

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleGroup.context.mjs","names":[],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.context.ts"],"sourcesContent":["import { createSafeContext } from '../../../core';\n\nexport interface ToolbarToggleGroupContextValue {\n  value: string | string[] | null;\n  onChange: (itemValue: string) => void;\n  type: 'single' | 'multiple';\n  disabled: boolean;\n}\n\nexport const [ToolbarToggleGroupProvider, useToolbarToggleGroupContext] =\n  createSafeContext<ToolbarToggleGroupContextValue>(\n    'Toolbar.ToggleGroup component was not found in tree'\n  );\n"],"mappings":";;;AASA,MAAa,CAAC,4BAA4B,gCACxC,kBACE,qDACF"}

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs

@@ -0,0 +1,61 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { ToolbarToggleGroupProvider } from "./ToolbarToggleGroup.context.mjs";
+import { useUncontrolled } from "@mantine/hooks";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx
+const defaultProps = {};
+function normalizeGroupValue(type, value) {
+	if (type === "single") return Array.isArray(value) ? value[0] ?? null : value ?? null;
+	if (Array.isArray(value)) return value;
+	return value == null ? [] : [value];
+}
+const ToolbarToggleGroup = factory((_props) => {
+	const { classNames, className, style, styles, vars, type, value, defaultValue, onChange, disabled, children, ...others } = useProps("ToolbarToggleGroup", defaultProps, _props);
+	const ctx = useToolbarContext();
+	const [_value, handleChange] = useUncontrolled({
+		value,
+		defaultValue,
+		finalValue: type === "single" ? null : [],
+		onChange
+	});
+	const normalizedValue = normalizeGroupValue(type, _value);
+	const handleItemChange = (itemValue) => {
+		if (type === "single") handleChange(normalizedValue === itemValue ? null : itemValue);
+		else {
+			const currentValue = normalizedValue;
+			if (currentValue.includes(itemValue)) handleChange(currentValue.filter((v) => v !== itemValue));
+			else handleChange([...currentValue, itemValue]);
+		}
+	};
+	return /* @__PURE__ */ jsx(ToolbarToggleGroupProvider, {
+		value: {
+			value: normalizedValue,
+			onChange: handleItemChange,
+			type,
+			disabled: disabled || false
+		},
+		children: /* @__PURE__ */ jsx(Box, {
+			...others,
+			role: "group",
+			...ctx.getStyles("group", {
+				className,
+				classNames,
+				style,
+				styles
+			}),
+			"data-orientation": ctx.orientation,
+			children
+		})
+	});
+});
+ToolbarToggleGroup.classes = Toolbar_module_default;
+ToolbarToggleGroup.displayName = "@mantine/core/ToolbarToggleGroup";
+//#endregion
+export { ToolbarToggleGroup };
+
+//# sourceMappingURL=ToolbarToggleGroup.mjs.map

package/esm/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleGroup.mjs","names":["currentValue","classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleGroup/ToolbarToggleGroup.tsx"],"sourcesContent":["import { useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport {\n  ToolbarToggleGroupProvider,\n  type ToolbarToggleGroupContextValue,\n} from './ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleGroupStylesNames = 'group';\n\ninterface ToolbarToggleGroupBaseProps\n  extends\n    BoxProps,\n    CompoundStylesApiProps<ToolbarToggleGroupFactory>,\n    Omit<ElementProps<'div'>, 'onChange' | 'value' | 'defaultValue'> {\n  /** Disables all toggle items within this group */\n  disabled?: boolean;\n\n  /** `Toolbar.ToggleItem` components */\n  children: React.ReactNode;\n}\n\nexport interface ToolbarToggleGroupSingleProps extends ToolbarToggleGroupBaseProps {\n  /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n  type: 'single';\n\n  /** Controlled value, `null` when no item is active */\n  value?: string | null;\n\n  /** Uncontrolled default value */\n  defaultValue?: string | null;\n\n  /** Called with the new value when an item is toggled, `null` when the active item is deselected */\n  onChange?: (value: string | null) => void;\n}\n\nexport interface ToolbarToggleGroupMultipleProps extends ToolbarToggleGroupBaseProps {\n  /** Selection mode: `'single'` allows at most one active item, `'multiple'` allows any number of active items */\n  type: 'multiple';\n\n  /** Controlled value, array of active item values */\n  value?: string[];\n\n  /** Uncontrolled default value */\n  defaultValue?: string[];\n\n  /** Called with the array of active item values when an item is toggled */\n  onChange?: (value: string[]) => void;\n}\n\nexport type ToolbarToggleGroupProps =\n  | ToolbarToggleGroupSingleProps\n  | ToolbarToggleGroupMultipleProps;\n\nexport type ToolbarToggleGroupFactory = Factory<{\n  props: ToolbarToggleGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: ToolbarToggleGroupStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {} as Partial<ToolbarToggleGroupProps>;\n\nfunction normalizeGroupValue(\n  type: 'single' | 'multiple',\n  value: string | string[] | null | undefined\n): string | string[] | null {\n  if (type === 'single') {\n    return Array.isArray(value) ? (value[0] ?? null) : (value ?? null);\n  }\n\n  if (Array.isArray(value)) {\n    return value;\n  }\n\n  return value == null ? [] : [value];\n}\n\nexport const ToolbarToggleGroup = factory<ToolbarToggleGroupFactory>((_props) => {\n  const props = useProps('ToolbarToggleGroup', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    type,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    children,\n    ...others\n  } = props as ToolbarToggleGroupBaseProps & {\n    type: 'single' | 'multiple';\n    value?: string | string[] | null;\n    defaultValue?: string | string[] | null;\n    onChange?: (value: any) => void;\n  };\n\n  const ctx = useToolbarContext();\n\n  const finalValue = type === 'single' ? null : [];\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue,\n    onChange,\n  });\n\n  const normalizedValue = normalizeGroupValue(type, _value);\n\n  const handleItemChange = (itemValue: string) => {\n    if (type === 'single') {\n      const currentValue = normalizedValue as string | null;\n      handleChange(currentValue === itemValue ? null : itemValue);\n    } else {\n      const currentValue = normalizedValue as string[];\n      if (currentValue.includes(itemValue)) {\n        handleChange(currentValue.filter((v) => v !== itemValue));\n      } else {\n        handleChange([...currentValue, itemValue]);\n      }\n    }\n  };\n\n  const contextValue: ToolbarToggleGroupContextValue = {\n    value: normalizedValue,\n    onChange: handleItemChange,\n    type,\n    disabled: disabled || false,\n  };\n\n  return (\n    <ToolbarToggleGroupProvider value={contextValue}>\n      <Box\n        {...others}\n        role=\"group\"\n        {...ctx.getStyles('group', { className, classNames, style, styles })}\n        data-orientation={ctx.orientation}\n      >\n        {children}\n      </Box>\n    </ToolbarToggleGroupProvider>\n  );\n});\n\nToolbarToggleGroup.classes = classes;\nToolbarToggleGroup.displayName = '@mantine/core/ToolbarToggleGroup';\n"],"mappings":";;;;;;;;;;AAsEA,MAAM,eAAe,CAAC;AAEtB,SAAS,oBACP,MACA,OAC0B;CAC1B,IAAI,SAAS,UACX,OAAO,MAAM,QAAQ,KAAK,IAAK,MAAM,MAAM,OAAS,SAAS;CAG/D,IAAI,MAAM,QAAQ,KAAK,GACrB,OAAO;CAGT,OAAO,SAAS,OAAO,CAAC,IAAI,CAAC,KAAK;AACpC;AAEA,MAAa,qBAAqB,SAAoC,WAAW;CAE/E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,MACA,OACA,cACA,UACA,UACA,UACA,GAAG,WAbS,SAAS,sBAAsB,cAAc,MAcnD;CAOR,MAAM,MAAM,kBAAkB;CAG9B,MAAM,CAAC,QAAQ,gBAAgB,gBAAgB;EAC7C;EACA;EACA,YAJiB,SAAS,WAAW,OAAO,CAAC;EAK7C;CACF,CAAC;CAED,MAAM,kBAAkB,oBAAoB,MAAM,MAAM;CAExD,MAAM,oBAAoB,cAAsB;EAC9C,IAAI,SAAS,UAEX,aAAaA,oBAAiB,YAAY,OAAO,SAAS;OACrD;GACL,MAAM,eAAe;GACrB,IAAI,aAAa,SAAS,SAAS,GACjC,aAAa,aAAa,QAAQ,MAAM,MAAM,SAAS,CAAC;QAExD,aAAa,CAAC,GAAG,cAAc,SAAS,CAAC;EAE7C;CACF;CASA,OACE,oBAAC,4BAAD;EAA4B,OAAO;GAPnC,OAAO;GACP,UAAU;GACV;GACA,UAAU,YAAY;EAIwB;EAC5C,UAAA,oBAAC,KAAD;GACE,GAAI;GACJ,MAAK;GACL,GAAI,IAAI,UAAU,SAAS;IAAE;IAAW;IAAY;IAAO;GAAO,CAAC;GACnE,oBAAkB,IAAI;GAErB;EACE,CAAA;CACqB,CAAA;AAEhC,CAAC;AAED,mBAAmB,UAAUC;AAC7B,mBAAmB,cAAc"}

package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { useToolbarContext } from "../Toolbar.context.mjs";
+import Toolbar_module_default from "../Toolbar.module.mjs";
+import { useToolbarToggleGroupContext } from "../ToolbarToggleGroup/ToolbarToggleGroup.context.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx
+const defaultProps = {};
+const ToolbarToggleItem = factory((_props) => {
+	const { classNames, className, style, styles, vars, value, disabled, autoWidth, children, onClick, ...others } = useProps("ToolbarToggleItem", defaultProps, _props);
+	const ctx = useToolbarContext();
+	const groupCtx = useToolbarToggleGroupContext();
+	const isActive = groupCtx.type === "single" ? groupCtx.value === value : groupCtx.value.includes(value);
+	const isDisabled = disabled || groupCtx.disabled;
+	return /* @__PURE__ */ jsx(Box, {
+		component: "button",
+		...others,
+		type: "button",
+		...ctx.getStyles("toggle", {
+			className,
+			classNames,
+			style,
+			styles,
+			focusable: true
+		}),
+		"data-toolbar-toggle": true,
+		"data-active": isActive || void 0,
+		"data-disabled": isDisabled || void 0,
+		"data-auto-width": autoWidth || void 0,
+		disabled: isDisabled,
+		tabIndex: isDisabled ? -1 : 0,
+		"aria-pressed": isActive,
+		onClick: (event) => {
+			if (isDisabled) {
+				event.preventDefault();
+				return;
+			}
+			groupCtx.onChange(value);
+			onClick?.(event);
+		},
+		children
+	});
+});
+ToolbarToggleItem.classes = Toolbar_module_default;
+ToolbarToggleItem.displayName = "@mantine/core/ToolbarToggleItem";
+//#endregion
+export { ToolbarToggleItem };
+
+//# sourceMappingURL=ToolbarToggleItem.mjs.map

package/esm/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolbarToggleItem.mjs","names":["classes"],"sources":["../../../../src/components/Toolbar/ToolbarToggleItem/ToolbarToggleItem.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { useToolbarContext } from '../Toolbar.context';\nimport { useToolbarToggleGroupContext } from '../ToolbarToggleGroup/ToolbarToggleGroup.context';\nimport classes from '../Toolbar.module.css';\n\nexport type ToolbarToggleItemStylesNames = 'toggle';\n\nexport interface ToolbarToggleItemProps\n  extends BoxProps, CompoundStylesApiProps<ToolbarToggleItemFactory>, ElementProps<'button'> {\n  /** Value used to identify the item in ToggleGroup */\n  value: string;\n\n  /** If set, the toggle item is disabled */\n  disabled?: boolean;\n\n  /** If set, the toggle item width adjusts to content instead of being square, `false` by default */\n  autoWidth?: boolean;\n}\n\nexport type ToolbarToggleItemFactory = Factory<{\n  props: ToolbarToggleItemProps;\n  ref: HTMLButtonElement;\n  stylesNames: ToolbarToggleItemStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps: Partial<ToolbarToggleItemProps> = {};\n\nexport const ToolbarToggleItem = factory<ToolbarToggleItemFactory>((_props) => {\n  const props = useProps('ToolbarToggleItem', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    value,\n    disabled,\n    autoWidth,\n    children,\n    onClick,\n    ...others\n  } = props;\n  const ctx = useToolbarContext();\n  const groupCtx = useToolbarToggleGroupContext();\n\n  const isActive =\n    groupCtx.type === 'single'\n      ? groupCtx.value === value\n      : (groupCtx.value as string[]).includes(value);\n\n  const isDisabled = disabled || groupCtx.disabled;\n\n  return (\n    <Box\n      component=\"button\"\n      {...others}\n      type=\"button\"\n      {...ctx.getStyles('toggle', { className, classNames, style, styles, focusable: true })}\n      data-toolbar-toggle\n      data-active={isActive || undefined}\n      data-disabled={isDisabled || undefined}\n      data-auto-width={autoWidth || undefined}\n      disabled={isDisabled}\n      tabIndex={isDisabled ? -1 : 0}\n      aria-pressed={isActive}\n      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {\n        if (isDisabled) {\n          event.preventDefault();\n          return;\n        }\n        groupCtx.onChange(value);\n        onClick?.(event);\n      }}\n    >\n      {children}\n    </Box>\n  );\n});\n\nToolbarToggleItem.classes = classes;\nToolbarToggleItem.displayName = '@mantine/core/ToolbarToggleItem';\n"],"mappings":";;;;;;;;;AAkCA,MAAM,eAAgD,CAAC;AAEvD,MAAa,oBAAoB,SAAmC,WAAW;CAE7E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,UACA,WACA,UACA,SACA,GAAG,WAZS,SAAS,qBAAqB,cAAc,MAalD;CACR,MAAM,MAAM,kBAAkB;CAC9B,MAAM,WAAW,6BAA6B;CAE9C,MAAM,WACJ,SAAS,SAAS,WACd,SAAS,UAAU,QAClB,SAAS,MAAmB,SAAS,KAAK;CAEjD,MAAM,aAAa,YAAY,SAAS;CAExC,OACE,oBAAC,KAAD;EACE,WAAU;EACV,GAAI;EACJ,MAAK;EACL,GAAI,IAAI,UAAU,UAAU;GAAE;GAAW;GAAY;GAAO;GAAQ,WAAW;EAAK,CAAC;EACrF,uBAAA;EACA,eAAa,YAAY,KAAA;EACzB,iBAAe,cAAc,KAAA;EAC7B,mBAAiB,aAAa,KAAA;EAC9B,UAAU;EACV,UAAU,aAAa,KAAK;EAC5B,gBAAc;EACd,UAAU,UAA+C;GACvD,IAAI,YAAY;IACd,MAAM,eAAe;IACrB;GACF;GACA,SAAS,SAAS,KAAK;GACvB,UAAU,KAAK;EACjB;EAEC;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,UAAUA;AAC5B,kBAAkB,cAAc"}

package/esm/components/Toolbar/use-toolbar-navigation.mjs

@@ -0,0 +1,76 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+//#region packages/@mantine/core/src/components/Toolbar/use-toolbar-navigation.ts
+function useToolbarNavigation({ orientation, loop, dir }) {
+	const toolbarRef = useRef(null);
+	const activeItemRef = useRef(null);
+	const getFocusableItems = useCallback(() => {
+		if (!toolbarRef.current) return [];
+		return Array.from(toolbarRef.current.querySelectorAll("[data-toolbar-toggle]:not([data-disabled])"));
+	}, []);
+	const syncTabIndex = 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]);
+	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: 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: useCallback((event) => {
+			const target = event.target;
+			if (getFocusableItems().includes(target)) {
+				activeItemRef.current = target;
+				syncTabIndex();
+			}
+		}, [getFocusableItems, syncTabIndex])
+	};
+}
+//#endregion
+export { useToolbarNavigation };
+
+//# sourceMappingURL=use-toolbar-navigation.mjs.map

package/esm/components/Toolbar/use-toolbar-navigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-toolbar-navigation.mjs","names":[],"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,aAAa,OAAuB,IAAI;CAC9C,MAAM,gBAAgB,OAA2B,IAAI;CAErD,MAAM,oBAAoB,kBAAiC;EACzD,IAAI,CAAC,WAAW,SACd,OAAO,CAAC;EAEV,OAAO,MAAM,KACX,WAAW,QAAQ,iBAA8B,4CAA4C,CAC/F;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,eAAe,kBAAkB;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,gBAAgB;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,eAjEC,aACnB,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,iBAXZ,aACrB,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/esm/components/Tooltip/Tooltip.mjs

@@ -47,7 +47,8 @@ const defaultProps = {
 		flip: true,
 		shift: true,
 		inline: false
-	}
+	},
+	hideDetached: true
 };
 const varsResolver = createVarsResolver((theme, { radius, color, variant, autoContrast }) => {
 	const colors = theme.variantColorResolver({
@@ -64,7 +65,7 @@ const varsResolver = createVarsResolver((theme, { radius, color, variant, autoCo
 });
 const Tooltip = factory((_props) => {
 	const 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 } = useDirection();
 	const arrowRef = useRef(null);
 	const tooltip = useTooltip({
@@ -81,7 +82,8 @@ const Tooltip = factory((_props) => {
 		offset: typeof offset === "number" ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
 		inline,
 		strategy: floatingStrategy,
-		middlewares
+		middlewares,
+		hideDetached
 	});
 	useEffect(() => {
 		const targetNode = target instanceof HTMLElement ? target : typeof target === "string" ? document.querySelector(target) : target?.current || null;
@@ -140,7 +142,8 @@ const Tooltip = factory((_props) => {
 							...mergeStyles,
 							zIndex,
 							top: tooltip.y ?? 0,
-							left: tooltip.x ?? 0
+							left: tooltip.x ?? 0,
+							...tooltip.referenceHidden ? { display: "none" } : null
 						}
 					}),
 					children: [label, /* @__PURE__ */ jsx(FloatingArrow, {
@@ -190,7 +193,8 @@ const Tooltip = factory((_props) => {
 						...mergeStyles,
 						zIndex,
 						top: tooltip.y ?? 0,
-						left: tooltip.x ?? 0
+						left: tooltip.x ?? 0,
+						...tooltip.referenceHidden ? { display: "none" } : null
 					}
 				}),
 				children: [label, /* @__PURE__ */ jsx(FloatingArrow, {

package/esm/components/Tooltip/Tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.mjs","names":["classes"],"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.mjs","names":["classes"],"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/esm/components/Tooltip/use-tooltip.mjs

@@ -1,8 +1,9 @@
 "use client";
+import { useMantineEnv } from "../../core/MantineProvider/Mantine.context.mjs";
 import { TooltipGroupContext } from "./TooltipGroup/TooltipGroup.mjs";
 import { use, useCallback, useRef, useState } from "react";
 import { useId as useId$1, useIsomorphicEffect } from "@mantine/hooks";
-import { arrow, autoUpdate, flip, inline, offset, safePolygon, shift, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
+import { arrow, autoUpdate, flip, hide, inline, offset, safePolygon, shift, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 //#region packages/@mantine/core/src/components/Tooltip/use-tooltip.ts
 function getDefaultMiddlewares(middlewares) {
 	if (middlewares === void 0) return {
@@ -16,7 +17,7 @@ function getDefaultMiddlewares(middlewares) {
 }
 function getTooltipMiddlewares(settings) {
 	const middlewaresOptions = getDefaultMiddlewares(settings.middlewares);
-	const middlewares = [offset(settings.offset)];
+	const middlewares = [offset(settings.offset), hide()];
 	if (middlewaresOptions.shift) middlewares.push(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 = use(TooltipGroupContext).withinGroup;
 	const uid = useId$1();
+	const env = useMantineEnv();
 	const onChange = useCallback((_opened) => {
 		setUncontrolledOpened(_opened);
 		if (_opened) setCurrentId(uid);
 	}, [uid]);
-	const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {} } } = useFloating({
+	const { x, y, context, refs, placement, middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, hide: hideData } } = 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/esm/components/Tooltip/use-tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-tooltip.mjs","names":["useId"],"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":";;;;;;AAwCA,SAAS,sBAAsB,aAAiE;CAC9F,IAAI,gBAAgB,KAAA,GAClB,OAAO;EAAE,OAAO;EAAM,MAAM;CAAK;CAGnC,MAAM,SAAS,EAAE,GAAG,YAAY;CAChC,IAAI,YAAY,UAAU,KAAA,GACxB,OAAO,QAAQ;CAGjB,IAAI,YAAY,SAAS,KAAA,GACvB,OAAO,OAAO;CAGhB,OAAO;AACT;AAEA,SAAS,sBAAsB,UAAsB;CACnD,MAAM,qBAAqB,sBAAsB,SAAS,WAAW;CACrE,MAAM,cAA4B,CAAC,OAAO,SAAS,MAAM,CAAC;CAE1D,IAAI,mBAAmB,OACrB,YAAY,KACV,MACE,OAAO,mBAAmB,UAAU,YAChC,EAAE,SAAS,EAAE,IACb;EAAE,SAAS;EAAG,GAAG,mBAAmB;CAAM,CAChD,CACF;CAGF,IAAI,mBAAmB,MACrB,YAAY,KACV,OAAO,mBAAmB,SAAS,YAAY,KAAK,IAAI,KAAK,mBAAmB,IAAI,CACtF;CAGF,YAAY,KAAK,MAAM;EAAE,SAAS,SAAS;EAAW,SAAS,SAAS;CAAY,CAAC,CAAC;CAEtF,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,YAAY,OAAO,IAAI,OAAO,mBAAmB,MAAM,CAC9F;MACK,IAAI,SAAS,QAClB,YAAY,KAAK,OAAO,CAAC;CAG3B,OAAO;AACT;AAEA,SAAgB,WAAW,UAAsB;CAC/C,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,mBAAmB,CAAC,CAAC;CAC7C,MAAM,MAAMA,QAAM;CAElB,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SACF,aAAa,GAAG;CAEpB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,EACJ,GACA,GACA,SACA,MACA,WACA,gBAAgB,EAAE,OAAO,EAAE,GAAG,QAAQ,GAAG,WAAW,CAAC,QACnD,YAAY;EACd,UAAU,SAAS;EACnB,WAAW,SAAS;EACpB,MAAM;EACN,cAAc;EACd,YAAY,sBAAsB,QAAQ;EAC1C,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,WAAW,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAEzF,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS,SAAS,QAAQ;GAC1B,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;GACzF,WAAW,CAAC,SAAS,QAAQ;GAC7B,aAAa,SAAS,cAAc,YAAY,IAAI;EACtD,CAAC;EACD,SAAS,SAAS;GAAE,SAAS,SAAS,QAAQ;GAAO,aAAa;EAAK,CAAC;EACxE,QAAQ,SAAS,EAAE,MAAM,UAAU,CAAC;EAEpC,WAAW,SAAS,EAAE,SAAS,OAAO,SAAS,WAAW,YAAY,CAAC;CACzE,CAAC;CAED,MAAM,uBAAuB,OAAO,SAAS;CAC7C,0BAA0B;EACxB,IAAI,qBAAqB,YAAY,WAAW;GAC9C,qBAAqB,UAAU;GAC/B,SAAS,mBAAmB,SAAS;EACvC;CACF,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,UAAU,aAAa,cAAc;CAE1D,OAAO;EACL;EACA;EACA;EACA;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;CACF;AACF"}
+{"version":3,"file":"use-tooltip.mjs","names":["useId"],"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":";;;;;;;AA2CA,SAAS,sBAAsB,aAAiE;CAC9F,IAAI,gBAAgB,KAAA,GAClB,OAAO;EAAE,OAAO;EAAM,MAAM;CAAK;CAGnC,MAAM,SAAS,EAAE,GAAG,YAAY;CAChC,IAAI,YAAY,UAAU,KAAA,GACxB,OAAO,QAAQ;CAGjB,IAAI,YAAY,SAAS,KAAA,GACvB,OAAO,OAAO;CAGhB,OAAO;AACT;AAEA,SAAS,sBAAsB,UAAsB;CACnD,MAAM,qBAAqB,sBAAsB,SAAS,WAAW;CACrE,MAAM,cAA4B,CAAC,OAAO,SAAS,MAAM,GAAG,KAAK,CAAC;CAElE,IAAI,mBAAmB,OACrB,YAAY,KACV,MACE,OAAO,mBAAmB,UAAU,YAChC,EAAE,SAAS,EAAE,IACb;EAAE,SAAS;EAAG,GAAG,mBAAmB;CAAM,CAChD,CACF;CAGF,IAAI,mBAAmB,MACrB,YAAY,KACV,OAAO,mBAAmB,SAAS,YAAY,KAAK,IAAI,KAAK,mBAAmB,IAAI,CACtF;CAGF,YAAY,KAAK,MAAM;EAAE,SAAS,SAAS;EAAW,SAAS,SAAS;CAAY,CAAC,CAAC;CAEtF,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,YAAY,OAAO,IAAI,OAAO,mBAAmB,MAAM,CAC9F;MACK,IAAI,SAAS,QAClB,YAAY,KAAK,OAAO,CAAC;CAG3B,OAAO;AACT;AAEA,SAAgB,WAAW,UAAsB;CAC/C,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,mBAAmB,CAAC,CAAC;CAC7C,MAAM,MAAMA,QAAM;CAClB,MAAM,MAAM,cAAc;CAE1B,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SACF,aAAa,GAAG;CAEpB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,EACJ,GACA,GACA,SACA,MACA,WACA,gBAAgB,EAAE,OAAO,EAAE,GAAG,QAAQ,GAAG,WAAW,CAAC,GAAG,MAAM,eAC5D,YAAY;EACd,UAAU,SAAS;EACnB,WAAW,SAAS;EACpB,MAAM;EACN,cAAc;EACd,YAAY,sBAAsB,QAAQ;EAC1C,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,WAAW,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAEzF,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS,SAAS,QAAQ;GAC1B,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;GACzF,WAAW,CAAC,SAAS,QAAQ;GAC7B,aAAa,SAAS,cAAc,YAAY,IAAI;EACtD,CAAC;EACD,SAAS,SAAS;GAAE,SAAS,SAAS,QAAQ;GAAO,aAAa;EAAK,CAAC;EACxE,QAAQ,SAAS,EAAE,MAAM,UAAU,CAAC;EAEpC,WAAW,SAAS,EAAE,SAAS,OAAO,SAAS,WAAW,YAAY,CAAC;CACzE,CAAC;CAED,MAAM,uBAAuB,OAAO,SAAS;CAC7C,0BAA0B;EACxB,IAAI,qBAAqB,YAAY,WAAW;GAC9C,qBAAqB,UAAU;GAC/B,SAAS,mBAAmB,SAAS;EACvC;CACF,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,UAAU,aAAa,cAAc;CAE1D,OAAO;EACL;EACA;EACA;EACA;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;EACA,iBAAiB,SAAS,gBAAgB,QAAQ,SAAS,UAAU,kBAAkB;CACzF;AACF"}

package/esm/components/Tour/Tour.context.mjs

@@ -0,0 +1,22 @@
+"use client";
+import { createContext, use } from "react";
+//#region packages/@mantine/core/src/components/Tour/Tour.context.ts
+const defaultLabels = {
+	skip: "Skip",
+	back: "Back",
+	next: "Next",
+	close: "Close",
+	stepCounter: (current, total) => `${current} of ${total}`,
+	beacon: "Start tour"
+};
+const TourContext = createContext(null);
+function useTourContext() {
+	const ctx = use(TourContext);
+	if (ctx === null) throw new Error("Tour component was not found in tree");
+	return ctx;
+}
+const TourProvider = TourContext.Provider;
+//#endregion
+export { TourContext, TourProvider, defaultLabels, useTourContext };
+
+//# sourceMappingURL=Tour.context.mjs.map

package/esm/components/Tour/Tour.context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tour.context.mjs","names":[],"sources":["../../../src/components/Tour/Tour.context.ts"],"sourcesContent":["import { createContext, use } from 'react';\nimport type { GetStylesApi, MantineColor } from '../../core';\nimport type { TransitionOverride } from '../Transition';\nimport type { TourFactory } from './Tour';\nimport type { TourRootFactory } from './TourRoot/TourRoot';\n\nexport interface TourLabels {\n  /** Label for the skip button @default \"Skip\" */\n  skip: string;\n\n  /** Label for the back button @default \"Back\" */\n  back: string;\n\n  /** Label for the next button @default \"Next\" */\n  next: string;\n\n  /** Label for the close/finish button @default \"Close\" */\n  close: string;\n\n  /** Function that returns step counter text @default (current, total) => `${current} of ${total}` */\n  stepCounter: (current: number, total: number) => string;\n\n  /** Label for the beacon button, the step title is appended when it is a string @default \"Start tour\" */\n  beacon: string;\n}\n\nexport const defaultLabels: TourLabels = {\n  skip: 'Skip',\n  back: 'Back',\n  next: 'Next',\n  close: 'Close',\n  stepCounter: (current, total) => `${current} of ${total}`,\n  beacon: 'Start tour',\n};\n\nexport interface TourContextValue {\n  /** Returns styles for the given selector */\n  getStyles: GetStylesApi<TourFactory & TourRootFactory>;\n\n  /** Current active step index */\n  step: number;\n\n  /** Sets the active step index */\n  setStep: (step: number) => void;\n\n  /** Total number of steps */\n  stepsCount: number;\n\n  /** Closes the tour */\n  close: () => void;\n\n  /** Whether `Tour.Overlay` is rendered */\n  withOverlay: boolean;\n\n  /** Whether pointer events pass through the spotlight cutout to the target element */\n  withOverlayInteraction: boolean;\n\n  /** Whether `Tour.CloseButton` is rendered */\n  withCloseButton: boolean;\n\n  /** Key of `theme.colors` or any valid CSS color passed to `Tour.Navigation` next button */\n  color?: MantineColor;\n\n  /** Padding around the spotlight cutout in px */\n  spotlightPadding: number;\n\n  /** Border radius of the spotlight cutout in px */\n  spotlightRadius: number;\n\n  /** Whether clicking the overlay closes the tour */\n  closeOnOverlayClick: boolean;\n\n  /** Default transition props of `Tour.Tooltip` */\n  transitionProps: TransitionOverride | undefined;\n\n  /** Labels for tour UI elements */\n  labels: TourLabels;\n\n  /** Id of the mounted `Tour.Title` (or the generated fallback), referenced by the tooltip `aria-labelledby` */\n  titleId: string;\n\n  /** Id of the mounted `Tour.Body` (or the generated fallback), referenced by the tooltip `aria-describedby` */\n  bodyId: string;\n\n  /** Whether `Tour.Title` is currently mounted */\n  titleMounted: boolean;\n\n  /** Whether `Tour.Body` is currently mounted */\n  bodyMounted: boolean;\n\n  /** Registers the id of the mounted `Tour.Title`, `null` when it unmounts */\n  registerTitle: (id: string | null) => void;\n\n  /** Registers the id of the mounted `Tour.Body`, `null` when it unmounts */\n  registerBody: (id: string | null) => void;\n\n  /** Registers the current step target element, used to skip arrow hotkeys fired from inside it */\n  setTargetElement: (element: HTMLElement | null) => void;\n}\n\nexport const TourContext = createContext<TourContextValue | null>(null);\n\nexport function useTourContext() {\n  const ctx = use(TourContext);\n\n  if (ctx === null) {\n    throw new Error('Tour component was not found in tree');\n  }\n\n  return ctx;\n}\n\nexport const TourProvider = TourContext.Provider;\n"],"mappings":";;;AA0BA,MAAa,gBAA4B;CACvC,MAAM;CACN,MAAM;CACN,MAAM;CACN,OAAO;CACP,cAAc,SAAS,UAAU,GAAG,QAAQ,MAAM;CAClD,QAAQ;AACV;AAmEA,MAAa,cAAc,cAAuC,IAAI;AAEtE,SAAgB,iBAAiB;CAC/B,MAAM,MAAM,IAAI,WAAW;CAE3B,IAAI,QAAQ,MACV,MAAM,IAAI,MAAM,sCAAsC;CAGxD,OAAO;AACT;AAEA,MAAa,eAAe,YAAY"}