npm - @mantine/core - Versions diffs - 9.2.2 → 9.3.1 - Mend

@mantine/core 9.2.2 → 9.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (863) hide show

package/cjs/components/Tooltip/Tooltip.cjs CHANGED Viewed

@@ -10,6 +10,7 @@ const require_use_styles = require("../../core/styles-api/use-styles/use-styles.
 const require_factory = require("../../core/factory/factory.cjs");
 const require_Box = require("../../core/Box/Box.cjs");
 const require_DirectionProvider = require("../../core/DirectionProvider/DirectionProvider.cjs");
+const require_get_arrow_position_styles = require("../../utils/Floating/FloatingArrow/get-arrow-position-styles.cjs");
 const require_FloatingArrow = require("../../utils/Floating/FloatingArrow/FloatingArrow.cjs");
 const require_get_floating_position = require("../../utils/Floating/get-floating-position/get-floating-position.cjs");
 const require_OptionalPortal = require("../Portal/OptionalPortal.cjs");
@@ -104,6 +105,10 @@ const Tooltip = require_factory.factory((_props) => {
 	const child = require_get_single_element_child.getSingleElementChild(children);
 	if (!target && !child) throw new Error("[@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");
 	const tooltipStyles = getStyles("tooltip");
+	const mergeStyles = arrowPosition === "merge" && withArrow ? require_get_arrow_position_styles.getArrowMergeDropdownStyles({
+		position: tooltip.placement,
+		dir
+	}) : void 0;
 	if (target) {
 		const transition = require_get_transition_props.getTransitionProps(transitionProps, {
 			duration: 100,
@@ -129,6 +134,7 @@ const Tooltip = require_factory.factory((_props) => {
 						style: {
 							...tooltipStyles.style,
 							...transitionStyles,
+							...mergeStyles,
 							zIndex,
 							top: tooltip.y ?? 0,
 							left: tooltip.x ?? 0
@@ -175,6 +181,7 @@ const Tooltip = require_factory.factory((_props) => {
 					style: {
 						...getStyles("tooltip").style,
 						...transitionStyles,
+						...mergeStyles,
 						zIndex,
 						top: tooltip.y ?? 0,
 						left: tooltip.x ?? 0

package/cjs/components/Tooltip/Tooltip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","getRefProp","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 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 /* 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 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 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\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 }, mod]}\n {...tooltipStyles}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: tooltipStyles.className,\n style: {\n ...tooltipStyles.style,\n ...transitionStyles,\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 }, mod]}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: getStyles('tooltip').className,\n style: {\n ...getStyles('tooltip').style,\n ...transitionStyles,\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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"}
1	+ {"version":3,"file":"Tooltip.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","factory","useProps","useDirection","useTooltip","getFloatingPosition","useStyles","getSingleElementChild","getArrowMergeDropdownStyles","getTransitionProps","OptionalPortal","Transition","Box","FloatingArrow","getRefProp","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 /* 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 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 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 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 }, 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 }, 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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"}

package/cjs/components/Tooltip/TooltipFloating/TooltipFloating.cjs CHANGED Viewed

@@ -1,5 +1,4 @@
 "use client";
-require("../../../_virtual/_rolldown/runtime.cjs");
 const require_get_default_z_index = require("../../../core/utils/get-default-z-index/get-default-z-index.cjs");
 const require_get_size = require("../../../core/utils/get-size/get-size.cjs");
 const require_get_ref_prop = require("../../../core/utils/get-ref-prop/get-ref-prop.cjs");

package/cjs/components/Tooltip/TooltipFloating/TooltipFloating.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipFloating.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","getThemeColor","factory","useProps","useMantineTheme","useStyles","useFloatingTooltip","getSingleElementChild","getRefProp","OptionalPortal","Box","getStyleObject","classes"],"sources":["../../../../src/components/Tooltip/TooltipFloating/TooltipFloating.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n getStyleObject,\n getThemeColor,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../../core';\nimport { OptionalPortal } from '../../Portal';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from '../Tooltip.types';\nimport { useFloatingTooltip } from './use-floating-tooltip';\nimport classes from '../Tooltip.module.css';\n\nexport interface TooltipFloatingProps extends TooltipBaseProps {\n /** Offset from mouse in px @default 10 /\n offset?: number;\n\n /* Uncontrolled tooltip initial opened state */\n defaultOpened?: boolean;\n}\n\nexport type TooltipFloatingFactory = Factory<{\n props: TooltipFloatingProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n}>;\n\nconst defaultProps = {\n refProp: 'ref',\n withinPortal: true,\n offset: 10,\n position: 'right',\n zIndex: getDefaultZIndex('popover'),\n} satisfies Partial<TooltipFloatingProps>;\n\nconst varsResolver = createVarsResolver<TooltipFloatingFactory>((theme, { radius, color }) => ({\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,\n '--tooltip-color': color ? 'var(--mantine-color-white)' : undefined,\n },\n}));\n\nexport const TooltipFloating = factory<TooltipFloatingFactory>((_props) => {\n const props = useProps('TooltipFloating', defaultProps, _props);\n const {\n children,\n refProp,\n withinPortal,\n style,\n className,\n classNames,\n styles,\n unstyled,\n radius,\n color,\n label,\n offset,\n position,\n multiline,\n zIndex,\n disabled,\n defaultOpened,\n variant,\n vars,\n portalProps,\n attributes,\n ref,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const getStyles = useStyles<TooltipFloatingFactory>({\n name: 'TooltipFloating',\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 { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({\n offset,\n position,\n defaultOpened,\n });\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n '[@mantine/core] Tooltip.Floating 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 targetRef = useMergedRef(boundaryRef, getRefProp(child), ref);\n const childProps = child.props as any;\n\n const onMouseEnter = (event: React.MouseEvent<unknown, MouseEvent>) => {\n childProps.onMouseEnter?.(event);\n handleMouseMove(event);\n setOpened(true);\n };\n\n const onMouseLeave = (event: React.MouseEvent<unknown, MouseEvent>) => {\n childProps.onMouseLeave?.(event);\n setOpened(false);\n };\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Box\n {...others}\n {...getStyles('tooltip', {\n style: {\n ...getStyleObject(style, theme),\n zIndex: zIndex as React.CSSProperties['zIndex'],\n display: !disabled && opened ? 'block' : 'none',\n top: (y && Math.round(y)) ?? '',\n left: (x && Math.round(x)) ?? '',\n },\n })}\n variant={variant}\n ref={floating}\n mod={{ multiline }}\n >\n {label}\n </Box>\n </OptionalPortal>\n\n {cloneElement(child, {\n ...childProps,\n [refProp]: targetRef,\n onMouseEnter,\n onMouseLeave,\n })}\n </>\n );\n});\n\nTooltipFloating.classes = classes;\nTooltipFloating.varsResolver = varsResolver;\nTooltipFloating.displayName = '@mantine/core/TooltipFloating';\n"],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;~~AAqCA,MAAM,eAAe;CACnB,SAAS;CACT,cAAc;CACd,QAAQ;CACR,UAAU;CACV,QAAQA,4BAAAA,iBAAiB,SAAS;AACpC;AAEA,MAAM,eAAeC,6BAAAA,oBAA4C,OAAO,EAAE,QAAQ,aAAa,EAC7F,SAAS;CACP,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CACvE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACtD,mBAAmB,QAAQ,+BAA+B,KAAA;AAC5D,EACF,EAAE;AAEF,MAAa,kBAAkBC,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,UACA,SACA,cACA,OACA,WACA,YACA,QACA,UACA,QACA,OACA,OACA,QACA,UACA,WACA,QACA,UACA,eACA,SACA,MACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,YAAYC,mBAAAA,UAAkC;EAClD,MAAM;EACN;EACA,SAAA,uBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,EAAE,iBAAiB,GAAG,GAAG,QAAQ,aAAa,UAAU,cAAcC,6BAAAA,mBAAmB;EAC7F;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oLACF;CAGF,MAAM,aAAA,GAAA,eAAA,cAAyB,aAAaC,qBAAAA,WAAW,KAAK,GAAG,GAAG;CAClE,MAAM,aAAa,MAAM;CAEzB,MAAM,gBAAgB,UAAiD;EACrE,WAAW,eAAe,KAAK;EAC/B,gBAAgB,KAAK;EACrB,UAAU,IAAI;CAChB;CAEA,MAAM,gBAAgB,UAAiD;EACrE,WAAW,eAAe,KAAK;EAC/B,UAAU,KAAK;CACjB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,GAAI;GACJ,GAAI,UAAU,WAAW,EACvB,OAAO;IACL,GAAGC,yBAAAA,eAAe,OAAO,KAAK;IACtB;IACR,SAAS,CAAC,YAAY,SAAS,UAAU;IACzC,MAAM,KAAK,KAAK,MAAM,CAAC,MAAM;IAC7B,OAAO,KAAK,KAAK,MAAM,CAAC,MAAM;GAChC,EACF,CAAC;GACQ;GACT,KAAK;GACL,KAAK,EAAE,UAAU;aAEhB;EACE,CAAA;CACS,CAAA,IAAA,GAAA,MAAA,cAEF,OAAO;EACnB,GAAG;GACF,UAAU;EACX;EACA;CACF,CAAC,CACD,EAAA,CAAA;AAEN,CAAC;AAED,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}
1	+ {"version":3,"file":"TooltipFloating.cjs","names":["getDefaultZIndex","createVarsResolver","getRadius","getThemeColor","factory","useProps","useMantineTheme","useStyles","useFloatingTooltip","getSingleElementChild","getRefProp","OptionalPortal","Box","getStyleObject","classes"],"sources":["../../../../src/components/Tooltip/TooltipFloating/TooltipFloating.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n getStyleObject,\n getThemeColor,\n useMantineTheme,\n useProps,\n useStyles,\n} from '../../../core';\nimport { OptionalPortal } from '../../Portal';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from '../Tooltip.types';\nimport { useFloatingTooltip } from './use-floating-tooltip';\nimport classes from '../Tooltip.module.css';\n\nexport interface TooltipFloatingProps extends TooltipBaseProps {\n /** Offset from mouse in px @default 10 /\n offset?: number;\n\n /* Uncontrolled tooltip initial opened state */\n defaultOpened?: boolean;\n}\n\nexport type TooltipFloatingFactory = Factory<{\n props: TooltipFloatingProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n}>;\n\nconst defaultProps = {\n refProp: 'ref',\n withinPortal: true,\n offset: 10,\n position: 'right',\n zIndex: getDefaultZIndex('popover'),\n} satisfies Partial<TooltipFloatingProps>;\n\nconst varsResolver = createVarsResolver<TooltipFloatingFactory>((theme, { radius, color }) => ({\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? getThemeColor(color, theme) : undefined,\n '--tooltip-color': color ? 'var(--mantine-color-white)' : undefined,\n },\n}));\n\nexport const TooltipFloating = factory<TooltipFloatingFactory>((_props) => {\n const props = useProps('TooltipFloating', defaultProps, _props);\n const {\n children,\n refProp,\n withinPortal,\n style,\n className,\n classNames,\n styles,\n unstyled,\n radius,\n color,\n label,\n offset,\n position,\n multiline,\n zIndex,\n disabled,\n defaultOpened,\n variant,\n vars,\n portalProps,\n attributes,\n ref,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const getStyles = useStyles<TooltipFloatingFactory>({\n name: 'TooltipFloating',\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 { handleMouseMove, x, y, opened, boundaryRef, floating, setOpened } = useFloatingTooltip({\n offset,\n position,\n defaultOpened,\n });\n\n const child = getSingleElementChild(children);\n if (!child) {\n throw new Error(\n '[@mantine/core] Tooltip.Floating 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 targetRef = useMergedRef(boundaryRef, getRefProp(child), ref);\n const childProps = child.props as any;\n\n const onMouseEnter = (event: React.MouseEvent<unknown, MouseEvent>) => {\n childProps.onMouseEnter?.(event);\n handleMouseMove(event);\n setOpened(true);\n };\n\n const onMouseLeave = (event: React.MouseEvent<unknown, MouseEvent>) => {\n childProps.onMouseLeave?.(event);\n setOpened(false);\n };\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Box\n {...others}\n {...getStyles('tooltip', {\n style: {\n ...getStyleObject(style, theme),\n zIndex: zIndex as React.CSSProperties['zIndex'],\n display: !disabled && opened ? 'block' : 'none',\n top: (y && Math.round(y)) ?? '',\n left: (x && Math.round(x)) ?? '',\n },\n })}\n variant={variant}\n ref={floating}\n mod={{ multiline }}\n >\n {label}\n </Box>\n </OptionalPortal>\n\n {cloneElement(child, {\n ...childProps,\n [refProp]: targetRef,\n onMouseEnter,\n onMouseLeave,\n })}\n </>\n );\n});\n\nTooltipFloating.classes = classes;\nTooltipFloating.varsResolver = varsResolver;\nTooltipFloating.displayName = '@mantine/core/TooltipFloating';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqCA,MAAM,eAAe;CACnB,SAAS;CACT,cAAc;CACd,QAAQ;CACR,UAAU;CACV,QAAQA,4BAAAA,iBAAiB,SAAS;AACpC;AAEA,MAAM,eAAeC,6BAAAA,oBAA4C,OAAO,EAAE,QAAQ,aAAa,EAC7F,SAAS;CACP,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAYC,iBAAAA,UAAU,MAAM;CACvE,gBAAgB,QAAQC,wBAAAA,cAAc,OAAO,KAAK,IAAI,KAAA;CACtD,mBAAmB,QAAQ,+BAA+B,KAAA;AAC5D,EACF,EAAE;AAEF,MAAa,kBAAkBC,gBAAAA,SAAiC,WAAW;CACzE,MAAM,QAAQC,kBAAAA,SAAS,mBAAmB,cAAc,MAAM;CAC9D,MAAM,EACJ,UACA,SACA,cACA,OACA,WACA,YACA,QACA,UACA,QACA,OACA,OACA,QACA,UACA,WACA,QACA,UACA,eACA,SACA,MACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,YAAYC,mBAAAA,UAAkC;EAClD,MAAM;EACN;EACA,SAAA,uBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,EAAE,iBAAiB,GAAG,GAAG,QAAQ,aAAa,UAAU,cAAcC,6BAAAA,mBAAmB;EAC7F;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQC,iCAAAA,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,oLACF;CAGF,MAAM,aAAA,GAAA,eAAA,cAAyB,aAAaC,qBAAAA,WAAW,KAAK,GAAG,GAAG;CAClE,MAAM,aAAa,MAAM;CAEzB,MAAM,gBAAgB,UAAiD;EACrE,WAAW,eAAe,KAAK;EAC/B,gBAAgB,KAAK;EACrB,UAAU,IAAI;CAChB;CAEA,MAAM,gBAAgB,UAAiD;EACrE,WAAW,eAAe,KAAK;EAC/B,UAAU,KAAK;CACjB;CAEA,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,uBAAAA,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,GAAI;GACJ,GAAI,UAAU,WAAW,EACvB,OAAO;IACL,GAAGC,yBAAAA,eAAe,OAAO,KAAK;IACtB;IACR,SAAS,CAAC,YAAY,SAAS,UAAU;IACzC,MAAM,KAAK,KAAK,MAAM,CAAC,MAAM;IAC7B,OAAO,KAAK,KAAK,MAAM,CAAC,MAAM;GAChC,EACF,CAAC;GACQ;GACT,KAAK;GACL,KAAK,EAAE,UAAU;aAEhB;EACE,CAAA;CACS,CAAA,IAAA,GAAA,MAAA,cAEF,OAAO;EACnB,GAAG;GACF,UAAU;EACX;EACA;CACF,CAAC,CACD,EAAA,CAAA;AAEN,CAAC;AAED,gBAAgB,UAAUC,uBAAAA;AAC1B,gBAAgB,eAAe;AAC/B,gBAAgB,cAAc"}

package/cjs/components/Tooltip/TooltipFloating/use-floating-tooltip.cjs CHANGED Viewed

@@ -1,5 +1,4 @@
 "use client";
-require("../../../_virtual/_rolldown/runtime.cjs");
 let react = require("react");
 let _floating_ui_react = require("@floating-ui/react");
 //#region packages/@mantine/core/src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts

package/cjs/components/Tooltip/TooltipFloating/use-floating-tooltip.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-floating-tooltip.cjs","names":[],"sources":["../../../../src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { getOverflowAncestors, shift, useFloating } from '@floating-ui/react';\nimport { FloatingPosition } from '../../../utils/Floating';\n\ninterface UseFloatingTooltip {\n offset: number;\n position: FloatingPosition;\n defaultOpened?: boolean;\n}\n\nexport function useFloatingTooltip<T extends HTMLElement = any>({\n offset,\n position,\n defaultOpened,\n}: UseFloatingTooltip) {\n const [opened, setOpened] = useState(defaultOpened);\n const boundaryRef = useRef<T>(null);\n const { x, y, elements, refs, update, placement } = useFloating({\n placement: position,\n middleware: [\n shift({\n crossAxis: true,\n padding: 5,\n rootBoundary: 'document',\n }),\n ],\n });\n\n const horizontalOffset = placement.includes('right')\n ? offset\n : position.includes('left')\n ? offset * -1\n : 0;\n\n const verticalOffset = placement.includes('bottom')\n ? offset\n : position.includes('top')\n ? offset * -1\n : 0;\n\n const handleMouseMove = useCallback(\n ({ clientX, clientY }: MouseEvent \| React.MouseEvent<T, MouseEvent>) => {\n refs.setPositionReference({\n getBoundingClientRect() {\n return {\n width: 0,\n height: 0,\n x: clientX,\n y: clientY,\n left: clientX + horizontalOffset,\n top: clientY + verticalOffset,\n right: clientX,\n bottom: clientY,\n };\n },\n });\n },\n [elements.reference]\n );\n\n useEffect(() => {\n if (refs.floating.current) {\n const boundary = boundaryRef.current!;\n boundary.addEventListener('mousemove', handleMouseMove);\n\n const parents = getOverflowAncestors(refs.floating.current);\n parents.forEach((parent) => {\n parent.addEventListener('scroll', update);\n });\n\n return () => {\n boundary.removeEventListener('mousemove', handleMouseMove);\n parents.forEach((parent) => {\n parent.removeEventListener('scroll', update);\n });\n };\n }\n\n return undefined;\n }, [elements.reference, refs.floating.current, update, handleMouseMove, opened]);\n\n return { handleMouseMove, x, y, opened, setOpened, boundaryRef, floating: refs.setFloating };\n}\n"],"mappings":"~~;;;;;~~AAUA,SAAgB,mBAAgD,EAC9D,QACA,UACA,iBACqB;CACrB,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,aAAa;CAClD,MAAM,eAAA,GAAA,MAAA,QAAwB,IAAI;CAClC,MAAM,EAAE,GAAG,GAAG,UAAU,MAAM,QAAQ,eAAA,GAAA,mBAAA,aAA0B;EAC9D,WAAW;EACX,YAAY,EAAA,GAAA,mBAAA,OACJ;GACJ,WAAW;GACX,SAAS;GACT,cAAc;EAChB,CAAC,CACH;CACF,CAAC;CAED,MAAM,mBAAmB,UAAU,SAAS,OAAO,IAC/C,SACA,SAAS,SAAS,MAAM,IACtB,SAAS,KACT;CAEN,MAAM,iBAAiB,UAAU,SAAS,QAAQ,IAC9C,SACA,SAAS,SAAS,KAAK,IACrB,SAAS,KACT;CAEN,MAAM,mBAAA,GAAA,MAAA,cACH,EAAE,SAAS,cAA4D;EACtE,KAAK,qBAAqB,EACxB,wBAAwB;GACtB,OAAO;IACL,OAAO;IACP,QAAQ;IACR,GAAG;IACH,GAAG;IACH,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,OAAO;IACP,QAAQ;GACV;EACF,EACF,CAAC;CACH,GACA,CAAC,SAAS,SAAS,CACrB;CAEA,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,KAAK,SAAS,SAAS;GACzB,MAAM,WAAW,YAAY;GAC7B,SAAS,iBAAiB,aAAa,eAAe;GAEtD,MAAM,WAAA,GAAA,mBAAA,sBAA+B,KAAK,SAAS,OAAO;GAC1D,QAAQ,SAAS,WAAW;IAC1B,OAAO,iBAAiB,UAAU,MAAM;GAC1C,CAAC;GAED,aAAa;IACX,SAAS,oBAAoB,aAAa,eAAe;IACzD,QAAQ,SAAS,WAAW;KAC1B,OAAO,oBAAoB,UAAU,MAAM;IAC7C,CAAC;GACH;EACF;CAGF,GAAG;EAAC,SAAS;EAAW,KAAK,SAAS;EAAS;EAAQ;EAAiB;CAAM,CAAC;CAE/E,OAAO;EAAE;EAAiB;EAAG;EAAG;EAAQ;EAAW;EAAa,UAAU,KAAK;CAAY;AAC7F"}
1	+ {"version":3,"file":"use-floating-tooltip.cjs","names":[],"sources":["../../../../src/components/Tooltip/TooltipFloating/use-floating-tooltip.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react';\nimport { getOverflowAncestors, shift, useFloating } from '@floating-ui/react';\nimport { FloatingPosition } from '../../../utils/Floating';\n\ninterface UseFloatingTooltip {\n offset: number;\n position: FloatingPosition;\n defaultOpened?: boolean;\n}\n\nexport function useFloatingTooltip<T extends HTMLElement = any>({\n offset,\n position,\n defaultOpened,\n}: UseFloatingTooltip) {\n const [opened, setOpened] = useState(defaultOpened);\n const boundaryRef = useRef<T>(null);\n const { x, y, elements, refs, update, placement } = useFloating({\n placement: position,\n middleware: [\n shift({\n crossAxis: true,\n padding: 5,\n rootBoundary: 'document',\n }),\n ],\n });\n\n const horizontalOffset = placement.includes('right')\n ? offset\n : position.includes('left')\n ? offset * -1\n : 0;\n\n const verticalOffset = placement.includes('bottom')\n ? offset\n : position.includes('top')\n ? offset * -1\n : 0;\n\n const handleMouseMove = useCallback(\n ({ clientX, clientY }: MouseEvent \| React.MouseEvent<T, MouseEvent>) => {\n refs.setPositionReference({\n getBoundingClientRect() {\n return {\n width: 0,\n height: 0,\n x: clientX,\n y: clientY,\n left: clientX + horizontalOffset,\n top: clientY + verticalOffset,\n right: clientX,\n bottom: clientY,\n };\n },\n });\n },\n [elements.reference]\n );\n\n useEffect(() => {\n if (refs.floating.current) {\n const boundary = boundaryRef.current!;\n boundary.addEventListener('mousemove', handleMouseMove);\n\n const parents = getOverflowAncestors(refs.floating.current);\n parents.forEach((parent) => {\n parent.addEventListener('scroll', update);\n });\n\n return () => {\n boundary.removeEventListener('mousemove', handleMouseMove);\n parents.forEach((parent) => {\n parent.removeEventListener('scroll', update);\n });\n };\n }\n\n return undefined;\n }, [elements.reference, refs.floating.current, update, handleMouseMove, opened]);\n\n return { handleMouseMove, x, y, opened, setOpened, boundaryRef, floating: refs.setFloating };\n}\n"],"mappings":";;;;AAUA,SAAgB,mBAAgD,EAC9D,QACA,UACA,iBACqB;CACrB,MAAM,CAAC,QAAQ,cAAA,GAAA,MAAA,UAAsB,aAAa;CAClD,MAAM,eAAA,GAAA,MAAA,QAAwB,IAAI;CAClC,MAAM,EAAE,GAAG,GAAG,UAAU,MAAM,QAAQ,eAAA,GAAA,mBAAA,aAA0B;EAC9D,WAAW;EACX,YAAY,EAAA,GAAA,mBAAA,OACJ;GACJ,WAAW;GACX,SAAS;GACT,cAAc;EAChB,CAAC,CACH;CACF,CAAC;CAED,MAAM,mBAAmB,UAAU,SAAS,OAAO,IAC/C,SACA,SAAS,SAAS,MAAM,IACtB,SAAS,KACT;CAEN,MAAM,iBAAiB,UAAU,SAAS,QAAQ,IAC9C,SACA,SAAS,SAAS,KAAK,IACrB,SAAS,KACT;CAEN,MAAM,mBAAA,GAAA,MAAA,cACH,EAAE,SAAS,cAA4D;EACtE,KAAK,qBAAqB,EACxB,wBAAwB;GACtB,OAAO;IACL,OAAO;IACP,QAAQ;IACR,GAAG;IACH,GAAG;IACH,MAAM,UAAU;IAChB,KAAK,UAAU;IACf,OAAO;IACP,QAAQ;GACV;EACF,EACF,CAAC;CACH,GACA,CAAC,SAAS,SAAS,CACrB;CAEA,CAAA,GAAA,MAAA,iBAAgB;EACd,IAAI,KAAK,SAAS,SAAS;GACzB,MAAM,WAAW,YAAY;GAC7B,SAAS,iBAAiB,aAAa,eAAe;GAEtD,MAAM,WAAA,GAAA,mBAAA,sBAA+B,KAAK,SAAS,OAAO;GAC1D,QAAQ,SAAS,WAAW;IAC1B,OAAO,iBAAiB,UAAU,MAAM;GAC1C,CAAC;GAED,aAAa;IACX,SAAS,oBAAoB,aAAa,eAAe;IACzD,QAAQ,SAAS,WAAW;KAC1B,OAAO,oBAAoB,UAAU,MAAM;IAC7C,CAAC;GACH;EACF;CAGF,GAAG;EAAC,SAAS;EAAW,KAAK,SAAS;EAAS;EAAQ;EAAiB;CAAM,CAAC;CAE/E,OAAO;EAAE;EAAiB;EAAG;EAAG;EAAQ;EAAW;EAAa,UAAU,KAAK;CAAY;AAC7F"}

package/cjs/components/Tooltip/TooltipGroup/TooltipGroup.cjs CHANGED Viewed

@@ -1,5 +1,4 @@
 "use client";
-require("../../../_virtual/_rolldown/runtime.cjs");
 const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/cjs/components/Tooltip/TooltipGroup/TooltipGroup.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TooltipGroup.cjs","names":["useProps","FloatingDelayGroup"],"sources":["../../../../src/components/Tooltip/TooltipGroup/TooltipGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { FloatingDelayGroup } from '@floating-ui/react';\nimport { ExtendComponent, Factory, MantineThemeComponent, useProps } from '../../../core';\n\nexport interface TooltipGroupContextValue {\n withinGroup: boolean;\n}\n\nexport const TooltipGroupContext = createContext<TooltipGroupContextValue>({ withinGroup: false });\n\nexport interface TooltipGroupProps {\n /** `Tooltip` components /\n children: React.ReactNode;\n\n /* Open delay in ms /\n openDelay?: number;\n\n /* Close delay in ms */\n closeDelay?: number;\n}\n\nconst defaultProps = {\n openDelay: 0,\n closeDelay: 0,\n} satisfies Partial<TooltipGroupProps>;\n\nexport function TooltipGroup(props: TooltipGroupProps) {\n const { openDelay, closeDelay, children } = useProps('TooltipGroup', defaultProps, props);\n\n return (\n <TooltipGroupContext value={{ withinGroup: true }}>\n <FloatingDelayGroup delay={{ open: openDelay, close: closeDelay }}>\n {children}\n </FloatingDelayGroup>\n </TooltipGroupContext>\n );\n}\n\nexport type TooltipGroupFactory = Factory<{\n props: TooltipGroupProps;\n}>;\n\nTooltipGroup.displayName = '@mantine/core/TooltipGroup';\nTooltipGroup.extend = (c: ExtendComponent<TooltipGroupFactory>): MantineThemeComponent => c;\n"],"mappings":"~~;;;;;;;~~AAQA,MAAa,uBAAA,GAAA,MAAA,eAA8D,EAAE,aAAa,MAAM,CAAC;AAajG,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;AACd;AAEA,SAAgB,aAAa,OAA0B;CACrD,MAAM,EAAE,WAAW,YAAY,aAAaA,kBAAAA,SAAS,gBAAgB,cAAc,KAAK;CAExF,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAAqB,OAAO,EAAE,aAAa,KAAK;YAC9C,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,oBAAD;GAAoB,OAAO;IAAE,MAAM;IAAW,OAAO;GAAW;GAC7D;EACiB,CAAA;CACD,CAAA;AAEzB;AAMA,aAAa,cAAc;AAC3B,aAAa,UAAU,MAAmE"}
1	+ {"version":3,"file":"TooltipGroup.cjs","names":["useProps","FloatingDelayGroup"],"sources":["../../../../src/components/Tooltip/TooltipGroup/TooltipGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { FloatingDelayGroup } from '@floating-ui/react';\nimport { ExtendComponent, Factory, MantineThemeComponent, useProps } from '../../../core';\n\nexport interface TooltipGroupContextValue {\n withinGroup: boolean;\n}\n\nexport const TooltipGroupContext = createContext<TooltipGroupContextValue>({ withinGroup: false });\n\nexport interface TooltipGroupProps {\n /** `Tooltip` components /\n children: React.ReactNode;\n\n /* Open delay in ms /\n openDelay?: number;\n\n /* Close delay in ms */\n closeDelay?: number;\n}\n\nconst defaultProps = {\n openDelay: 0,\n closeDelay: 0,\n} satisfies Partial<TooltipGroupProps>;\n\nexport function TooltipGroup(props: TooltipGroupProps) {\n const { openDelay, closeDelay, children } = useProps('TooltipGroup', defaultProps, props);\n\n return (\n <TooltipGroupContext value={{ withinGroup: true }}>\n <FloatingDelayGroup delay={{ open: openDelay, close: closeDelay }}>\n {children}\n </FloatingDelayGroup>\n </TooltipGroupContext>\n );\n}\n\nexport type TooltipGroupFactory = Factory<{\n props: TooltipGroupProps;\n}>;\n\nTooltipGroup.displayName = '@mantine/core/TooltipGroup';\nTooltipGroup.extend = (c: ExtendComponent<TooltipGroupFactory>): MantineThemeComponent => c;\n"],"mappings":";;;;;;AAQA,MAAa,uBAAA,GAAA,MAAA,eAA8D,EAAE,aAAa,MAAM,CAAC;AAajG,MAAM,eAAe;CACnB,WAAW;CACX,YAAY;AACd;AAEA,SAAgB,aAAa,OAA0B;CACrD,MAAM,EAAE,WAAW,YAAY,aAAaA,kBAAAA,SAAS,gBAAgB,cAAc,KAAK;CAExF,OACE,iBAAA,GAAA,kBAAA,KAAC,qBAAD;EAAqB,OAAO,EAAE,aAAa,KAAK;YAC9C,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,oBAAD;GAAoB,OAAO;IAAE,MAAM;IAAW,OAAO;GAAW;GAC7D;EACiB,CAAA;CACD,CAAA;AAEzB;AAMA,aAAa,cAAc;AAC3B,aAAa,UAAU,MAAmE"}

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

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_TooltipGroup = require("./TooltipGroup/TooltipGroup.cjs");
 let react = require("react");
 let _mantine_hooks = require("@mantine/hooks");
@@ -65,8 +64,12 @@ function useTooltip(settings) {
 		(0, _floating_ui_react.useRole)(context, { role: "tooltip" }),
 		(0, _floating_ui_react.useDismiss)(context, { enabled: typeof settings.opened === "undefined" })
 	]);
-	(0, _mantine_hooks.useDidUpdate)(() => {
-		settings.onPositionChange?.(placement);
+	const previousPlacementRef = (0, react.useRef)(placement);
+	(0, _mantine_hooks.useIsomorphicEffect)(() => {
+		if (previousPlacementRef.current !== placement) {
+			previousPlacementRef.current = placement;
+			settings.onPositionChange?.(placement);
+		}
 	}, [placement]);
 	const isGroupPhase = opened && currentId && currentId !== uid;
 	return {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tooltip.cjs","names":["TooltipGroupContext","autoUpdate"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n inline,\n offset,\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 { ~~useDidUpdate~~, ~~useId~~ } 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 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 }),\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 ~~useDidUpdate~~(() => {\n settings.onPositionChange?.(placement);\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":"~~;;;;;;;~~AAsCA,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,EAAA,GAAA,mBAAA,QAAQ,SAAS,MAAM,CAAC;CAE1D,IAAI,mBAAmB,OACrB,YAAY,MAAA,GAAA,mBAAA,OAER,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,aAAA,GAAA,mBAAA,MAAiB,KAAA,GAAA,mBAAA,MAAS,mBAAmB,IAAI,CACtF;CAGF,YAAY,MAAA,GAAA,mBAAA,OAAW;EAAE,SAAS,SAAS;EAAW,SAAS,SAAS;CAAY,CAAC,CAAC;CAEtF,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,aAAA,GAAA,mBAAA,QAAmB,KAAA,GAAA,mBAAA,QAAW,mBAAmB,MAAM,CAC9F;MACK,IAAI,SAAS,QAClB,YAAY,MAAA,GAAA,mBAAA,QAAY,CAAC;CAG3B,OAAO;AACT;AAEA,SAAgB,WAAW,UAAsB;CAC/C,MAAM,CAAC,oBAAoB,0BAAA,GAAA,MAAA,UAAkC,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,eAAA,GAAA,MAAA,KAAkBA,qBAAAA,mBAAmB,EAAE;CAC7C,MAAM,OAAA,GAAA,eAAA,OAAY;CAElB,MAAM,YAAA,GAAA,MAAA,cACH,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,SAAA,GAAA,mBAAA,aACvC;EACd,UAAU,SAAS;EACnB,WAAW,SAAS;EACpB,MAAM;EACN,cAAc;EACd,YAAY,sBAAsB,QAAQ;EAC1C,sBAAsBC,mBAAAA;CACxB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,WAAW,kBAAA,GAAA,mBAAA,eAA+B,SAAS,EAAE,IAAI,IAAI,CAAC;CAEzF,MAAM,EAAE,mBAAmB,sBAAA,GAAA,mBAAA,iBAAqC;mCACrD,SAAS;GAChB,SAAS,SAAS,QAAQ;GAC1B,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;GACzF,WAAW,CAAC,SAAS,QAAQ;EAC/B,CAAC;mCACQ,SAAS;GAAE,SAAS,SAAS,QAAQ;GAAO,aAAa;EAAK,CAAC;kCAChE,SAAS,EAAE,MAAM,UAAU,CAAC;qCAEzB,SAAS,EAAE,SAAS,OAAO,SAAS,WAAW,YAAY,CAAC;CACzE,CAAC;CAED,CAAA,GAAA,eAAA,~~oBAAmB~~;~~EACjB~~,SAAS,mBAAmB,SAAS;~~CACvC~~,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"}
1	+ {"version":3,"file":"use-tooltip.cjs","names":["TooltipGroupContext","autoUpdate"],"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 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 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 }),\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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"}

package/cjs/components/Transition/Transition.cjs CHANGED Viewed

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_Mantine_context = require("../../core/MantineProvider/Mantine.context.cjs");
 const require_get_transition_styles = require("./get-transition-styles/get-transition-styles.cjs");
 const require_use_transition = require("./use-transition.cjs");

package/cjs/components/Transition/Transition.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Transition.cjs","names":["useMantineEnv","useTransition","Activity","getTransitionStyles"],"sources":["../../../src/components/Transition/Transition.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useMantineEnv } from '../../core';\nimport { getTransitionStyles } from './get-transition-styles/get-transition-styles';\nimport { MantineTransition } from './transitions';\nimport { useTransition } from './use-transition';\n\nexport interface TransitionProps {\n /** If set, the element is kept in the DOM when hidden. React 19 `Activity` is used to preserve state while the element is not visible. /\n keepMounted?: boolean;\n\n /* Transition name or object /\n transition?: MantineTransition;\n\n /* Transition duration in ms @default 250 /\n duration?: number;\n\n /* Exit transition duration in ms @default 250 /\n exitDuration?: number;\n\n /* Transition timing function @default theme.transitionTimingFunction /\n timingFunction?: string;\n\n /* Determines whether component should be mounted to the DOM /\n mounted: boolean;\n\n /* Render function with transition styles argument /\n children: (styles: React.CSSProperties) => React.JSX.Element;\n\n /* Called when exit transition ends /\n onExited?: () => void;\n\n /* Called when exit transition starts /\n onExit?: () => void;\n\n /* Called when enter transition starts /\n onEnter?: () => void;\n\n /* Called when enter transition ends /\n onEntered?: () => void;\n\n /* Delay in ms before enter transition starts /\n enterDelay?: number;\n\n /* Delay in ms before exit transition starts */\n exitDelay?: number;\n}\n\nexport type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;\n\nexport function Transition({\n keepMounted,\n transition = 'fade',\n duration = 250,\n exitDuration = duration,\n mounted,\n children,\n timingFunction = 'ease',\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n}: TransitionProps) {\n const env = useMantineEnv();\n const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({\n mounted,\n exitDuration,\n duration,\n timingFunction,\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n });\n\n if (env === 'test') {\n return mounted ? <>{children({})}</> : keepMounted ? children({ display: 'none' }) : null;\n }\n\n if (transitionDuration === 0) {\n if (keepMounted) {\n return <Activity mode={mounted ? 'visible' : 'hidden'}>{children({})}</Activity>;\n }\n return mounted ? <>{children({})}</> : null;\n }\n\n const isExited = transitionStatus === 'exited';\n\n if (keepMounted) {\n return (\n <Activity mode={isExited ? 'hidden' : 'visible'}>\n {children(\n isExited\n ? {}\n : getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n )}\n </Activity>\n );\n }\n\n return isExited ? null : (\n <>\n {children(\n getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n )}\n </>\n );\n}\n\nTransition.displayName = '@mantine/core/Transition';\n\nexport namespace Transition {\n export type Props = TransitionProps;\n export type Override = TransitionOverride;\n}\n"],"mappings":"~~;;;;;;;;~~AAiDA,SAAgB,WAAW,EACzB,aACA,aAAa,QACb,WAAW,KACX,eAAe,UACf,SACA,UACA,iBAAiB,QACjB,QACA,WACA,SACA,UACA,YACA,aACkB;CAClB,MAAM,MAAMA,wBAAAA,cAAc;CAC1B,MAAM,EAAE,oBAAoB,kBAAkB,6BAA6BC,uBAAAA,cAAc;EACvF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,QAAQ,QACV,OAAO,UAAU,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,cAAc,SAAS,EAAE,SAAS,OAAO,CAAC,IAAI;CAGvF,IAAI,uBAAuB,GAAG;EAC5B,IAAI,aACF,OAAO,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;GAAU,MAAM,UAAU,YAAY;aAAW,SAAS,CAAC,CAAC;EAAY,CAAA;EAEjF,OAAO,UAAU,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI;CACzC;CAEA,MAAM,WAAW,qBAAqB;CAEtC,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,KAACA,MAAAA,UAAD;EAAU,MAAM,WAAW,WAAW;YACnC,SACC,WACI,CAAC,IACDC,8BAAAA,oBAAoB;GAClB;GACA,UAAU;GACV,OAAO;GACP,gBAAgB;EAClB,CAAC,CACP;CACQ,CAAA;CAId,OAAO,WAAW,OAChB,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACG,SACCA,8BAAAA,oBAAoB;EAClB;EACA,UAAU;EACV,OAAO;EACP,gBAAgB;CAClB,CAAC,CACH,EACA,CAAA;AAEN;AAEA,WAAW,cAAc"}
1	+ {"version":3,"file":"Transition.cjs","names":["useMantineEnv","useTransition","Activity","getTransitionStyles"],"sources":["../../../src/components/Transition/Transition.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useMantineEnv } from '../../core';\nimport { getTransitionStyles } from './get-transition-styles/get-transition-styles';\nimport { MantineTransition } from './transitions';\nimport { useTransition } from './use-transition';\n\nexport interface TransitionProps {\n /** If set, the element is kept in the DOM when hidden. React 19 `Activity` is used to preserve state while the element is not visible. /\n keepMounted?: boolean;\n\n /* Transition name or object /\n transition?: MantineTransition;\n\n /* Transition duration in ms @default 250 /\n duration?: number;\n\n /* Exit transition duration in ms @default 250 /\n exitDuration?: number;\n\n /* Transition timing function @default theme.transitionTimingFunction /\n timingFunction?: string;\n\n /* Determines whether component should be mounted to the DOM /\n mounted: boolean;\n\n /* Render function with transition styles argument /\n children: (styles: React.CSSProperties) => React.JSX.Element;\n\n /* Called when exit transition ends /\n onExited?: () => void;\n\n /* Called when exit transition starts /\n onExit?: () => void;\n\n /* Called when enter transition starts /\n onEnter?: () => void;\n\n /* Called when enter transition ends /\n onEntered?: () => void;\n\n /* Delay in ms before enter transition starts /\n enterDelay?: number;\n\n /* Delay in ms before exit transition starts */\n exitDelay?: number;\n}\n\nexport type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;\n\nexport function Transition({\n keepMounted,\n transition = 'fade',\n duration = 250,\n exitDuration = duration,\n mounted,\n children,\n timingFunction = 'ease',\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n}: TransitionProps) {\n const env = useMantineEnv();\n const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({\n mounted,\n exitDuration,\n duration,\n timingFunction,\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n });\n\n if (env === 'test') {\n return mounted ? <>{children({})}</> : keepMounted ? children({ display: 'none' }) : null;\n }\n\n if (transitionDuration === 0) {\n if (keepMounted) {\n return <Activity mode={mounted ? 'visible' : 'hidden'}>{children({})}</Activity>;\n }\n return mounted ? <>{children({})}</> : null;\n }\n\n const isExited = transitionStatus === 'exited';\n\n if (keepMounted) {\n return (\n <Activity mode={isExited ? 'hidden' : 'visible'}>\n {children(\n isExited\n ? {}\n : getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n )}\n </Activity>\n );\n }\n\n return isExited ? null : (\n <>\n {children(\n getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n )}\n </>\n );\n}\n\nTransition.displayName = '@mantine/core/Transition';\n\nexport namespace Transition {\n export type Props = TransitionProps;\n export type Override = TransitionOverride;\n}\n"],"mappings":";;;;;;;AAiDA,SAAgB,WAAW,EACzB,aACA,aAAa,QACb,WAAW,KACX,eAAe,UACf,SACA,UACA,iBAAiB,QACjB,QACA,WACA,SACA,UACA,YACA,aACkB;CAClB,MAAM,MAAMA,wBAAAA,cAAc;CAC1B,MAAM,EAAE,oBAAoB,kBAAkB,6BAA6BC,uBAAAA,cAAc;EACvF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,QAAQ,QACV,OAAO,UAAU,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,cAAc,SAAS,EAAE,SAAS,OAAO,CAAC,IAAI;CAGvF,IAAI,uBAAuB,GAAG;EAC5B,IAAI,aACF,OAAO,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;GAAU,MAAM,UAAU,YAAY;aAAW,SAAS,CAAC,CAAC;EAAY,CAAA;EAEjF,OAAO,UAAU,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI;CACzC;CAEA,MAAM,WAAW,qBAAqB;CAEtC,IAAI,aACF,OACE,iBAAA,GAAA,kBAAA,KAACA,MAAAA,UAAD;EAAU,MAAM,WAAW,WAAW;YACnC,SACC,WACI,CAAC,IACDC,8BAAAA,oBAAoB;GAClB;GACA,UAAU;GACV,OAAO;GACP,gBAAgB;EAClB,CAAC,CACP;CACQ,CAAA;CAId,OAAO,WAAW,OAChB,iBAAA,GAAA,kBAAA,KAAA,kBAAA,UAAA,EAAA,UACG,SACCA,8BAAAA,oBAAoB;EAClB;EACA,UAAU;EACV,OAAO;EACP,gBAAgB;CAClB,CAAC,CACH,EACA,CAAA;AAEN;AAEA,WAAW,cAAc"}

package/cjs/components/Tree/FlatTreeNode.cjs CHANGED Viewed

@@ -1,11 +1,10 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_find_element_ancestor = require("../../core/utils/find-element-ancestor/find-element-ancestor.cjs");
 const require_Tree_module = require("./Tree.module.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Tree/FlatTreeNode.tsx
-const FlatTreeNode = (0, react.memo)(function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick = true, selectOnClick, expandOnSpace = true, checkOnSpace, renderNode, style, tabIndex = -1 }) {
+const FlatTreeNode = (0, react.memo)(function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick = true, selectOnClick, expandOnSpace = true, checkOnSpace, renderNode, style, tabIndex = -1, linesPath }) {
 	const ref = (0, react.useRef)(null);
 	const isLoading = tree.isNodeLoading(node.value);
 	const loadError = tree.getNodeLoadError(node.value);
@@ -64,7 +63,7 @@ const FlatTreeNode = (0, react.memo)(function FlatTreeNode({ node, level, parent
 		"data-selected": selected || void 0,
 		"data-value": node.value
 	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref,
 		className: require_Tree_module.default.node,
 		style: {
@@ -79,10 +78,19 @@ const FlatTreeNode = (0, react.memo)(function FlatTreeNode({ node, level, parent
 		"data-level": level,
 		tabIndex,
 		onKeyDown: handleKeyDown,
-		children: typeof renderNode === "function" ? renderNode({
+		children: [linesPath?.map((state, idx) => {
+			if (state === "none") return null;
+			const column = idx + 2;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"aria-hidden": true,
+				className: `${require_Tree_module.default.flatLine}${state === "closing" ? ` ${require_Tree_module.default.flatLineClosing}` : ""}`,
+				style: { "--flat-line-column": column }
+			}, column);
+		}), typeof renderNode === "function" ? renderNode({
 			node,
 			level,
 			selected,
+			isRoot: level === 1,
 			tree,
 			expanded,
 			hasChildren,
@@ -93,7 +101,7 @@ const FlatTreeNode = (0, react.memo)(function FlatTreeNode({ node, level, parent
 		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			...elementProps,
 			children: node.label
-		})
+		})]
 	});
 });
 FlatTreeNode.displayName = "@mantine/core/FlatTreeNode";

package/cjs/components/Tree/FlatTreeNode.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlatTreeNode.cjs","names":["findElementAncestor","classes"],"sources":["../../../src/components/Tree/FlatTreeNode.tsx"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { findElementAncestor } from '../../core';\nimport type { RenderNode, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface FlatTreeNodeProps {\n /** Node data from tree data /\n node: TreeNodeData;\n\n /* Nesting level of the node, starts at 1 /\n level: number;\n\n /* Value of the parent node, `null` for root nodes /\n parent: string \| null;\n\n /* Whether the node has children /\n hasChildren: boolean;\n\n /* Whether the node is expanded /\n expanded: boolean;\n\n /* Tree controller instance, return value of `useTree` hook /\n tree: TreeController;\n\n /* If set, tree node with children is expanded on click @default true /\n expandOnClick?: boolean;\n\n /* If set, tree node is selected on click @default false /\n selectOnClick?: boolean;\n\n /* If set, tree node with children is expanded on space key press @default true /\n expandOnSpace?: boolean;\n\n /* If set, tree node is checked on space key press @default false /\n checkOnSpace?: boolean;\n\n /* A function to render tree node label /\n renderNode?: RenderNode;\n\n /* Style to apply to the root element, used for virtualizer positioning /\n style?: React.CSSProperties;\n\n /* Tab index for the node /\n tabIndex?: number;\n}\n\nexport const FlatTreeNode = memo(function FlatTreeNode({\n node,\n level,\n parent,\n hasChildren,\n expanded,\n tree,\n expandOnClick = true,\n selectOnClick,\n expandOnSpace = true,\n checkOnSpace,\n renderNode,\n style,\n tabIndex = -1,\n}: FlatTreeNodeProps) {\n const ref = useRef<HTMLDivElement>(null);\n const isLoading = tree.isNodeLoading(node.value);\n const loadError = tree.getNodeLoadError(node.value);\n const selected = tree.selectedState.includes(node.value);\n\n const handleClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n\n if (expandOnClick && hasChildren) {\n tree.toggleExpanded(node.value);\n }\n\n if (selectOnClick) {\n tree.select(node.value);\n }\n\n ref.current?.focus();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.nativeEvent.code === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n\n if (expanded && hasChildren) {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n const nodes = root\n ? Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n (treeNode) => treeNode.style.display !== 'none'\n )\n : [];\n const index = nodes.indexOf(event.currentTarget as HTMLElement);\n if (index !== -1) {\n nodes[index + 1]?.focus();\n }\n } else if (hasChildren) {\n tree.expand(node.value);\n }\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n\n if (expanded && hasChildren) {\n tree.collapse(node.value);\n } else if (parent) {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n const parentElement = root?.querySelector<HTMLElement>(\n `[role=treeitem][data-value=\"${CSS.escape(parent)}\"]`\n );\n parentElement?.focus();\n }\n }\n\n if (event.nativeEvent.code === 'ArrowDown' \|\| event.nativeEvent.code === 'ArrowUp') {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n if (!root) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n const nodes = Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n (treeNode) => treeNode.style.display !== 'none'\n );\n const index = nodes.indexOf(event.currentTarget as HTMLElement);\n\n if (index === -1) {\n return;\n }\n\n const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n nodes[nextIndex]?.focus();\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (expandOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n tree.toggleExpanded(node.value);\n }\n\n if (checkOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n if (tree.isNodeChecked(node.value)) {\n tree.uncheckNode(node.value);\n } else {\n tree.checkNode(node.value);\n }\n }\n }\n };\n\n const elementProps = {\n className: classes.label,\n style: {} as React.CSSProperties,\n onClick: handleClick,\n 'data-selected': selected \|\| undefined,\n 'data-value': node.value,\n };\n\n return (\n <div\n ref={ref}\n className={classes.node}\n style={{\n ...({\n '--label-offset': `calc(var(--level-offset, var(--mantine-spacing-lg)) ${level - 1})`,\n } as React.CSSProperties),\n ...style,\n }}\n role=\"treeitem\"\n aria-selected={selected}\n aria-expanded={hasChildren ? expanded : undefined}\n data-value={node.value}\n data-selected={selected \|\| undefined}\n data-level={level}\n tabIndex={tabIndex}\n onKeyDown={handleKeyDown}\n >\n {typeof renderNode === 'function' ? (\n renderNode({\n node,\n level,\n selected,\n tree,\n expanded,\n hasChildren,\n isLoading,\n loadError,\n elementProps,\n dragHandleProps: undefined,\n })\n ) : (\n <div {...elementProps}>{node.label}</div>\n )}\n </div>\n );\n});\n\nFlatTreeNode.displayName = '@mantine/core/FlatTreeNode';\n"],"mappings":"~~;;;;;;;AA+CA~~,MAAa,gBAAA,GAAA,MAAA,MAAoB,SAAS,aAAa,EACrD,MACA,OACA,QACA,aACA,UACA,MACA,gBAAgB,MAChB,eACA,gBAAgB,MAChB,cACA,YACA,OACA,WAAW,~~MACS~~;CACpB,MAAM,OAAA,GAAA,MAAA,QAA6B,IAAI;CACvC,MAAM,YAAY,KAAK,cAAc,KAAK,KAAK;CAC/C,MAAM,YAAY,KAAK,iBAAiB,KAAK,KAAK;CAClD,MAAM,WAAW,KAAK,cAAc,SAAS,KAAK,KAAK;CAEvD,MAAM,eAAe,UAA4B;EAC/C,MAAM,gBAAgB;EAEtB,IAAI,iBAAiB,aACnB,KAAK,eAAe,KAAK,KAAK;EAGhC,IAAI,eACF,KAAK,OAAO,KAAK,KAAK;EAGxB,IAAI,SAAS,MAAM;CACrB;CAEA,MAAM,iBAAiB,UAA+B;EACpD,IAAI,MAAM,YAAY,SAAS,cAAc;GAC3C,MAAM,gBAAgB;GACtB,MAAM,eAAe;GAErB,IAAI,YAAY,aAAa;IAC3B,MAAM,OAAOA,8BAAAA,oBAAoB,MAAM,eAA8B,kBAAkB;IACvF,MAAM,QAAQ,OACV,MAAM,KAAK,KAAK,iBAA8B,iBAAiB,CAAC,EAAE,QAC/D,aAAa,SAAS,MAAM,YAAY,MAC3C,IACA,CAAC;IACL,MAAM,QAAQ,MAAM,QAAQ,MAAM,aAA4B;IAC9D,IAAI,UAAU,IACZ,MAAM,QAAQ,IAAI,MAAM;GAE5B,OAAO,IAAI,aACT,KAAK,OAAO,KAAK,KAAK;EAE1B;EAEA,IAAI,MAAM,YAAY,SAAS,aAAa;GAC1C,MAAM,gBAAgB;GACtB,MAAM,eAAe;GAErB,IAAI,YAAY,aACd,KAAK,SAAS,KAAK,KAAK;QACnB,IAAI,QAKT,CAJaA,8BAAAA,oBAAoB,MAAM,eAA8B,kBAC5C,GAAG,cAC1B,+BAA+B,IAAI,OAAO,MAAM,EAAE,GACpD,IACe,MAAM;EAEzB;EAEA,IAAI,MAAM,YAAY,SAAS,eAAe,MAAM,YAAY,SAAS,WAAW;GAClF,MAAM,OAAOA,8BAAAA,oBAAoB,MAAM,eAA8B,kBAAkB;GAEvF,IAAI,CAAC,MACH;GAGF,MAAM,gBAAgB;GACtB,MAAM,eAAe;GACrB,MAAM,QAAQ,MAAM,KAAK,KAAK,iBAA8B,iBAAiB,CAAC,EAAE,QAC7E,aAAa,SAAS,MAAM,YAAY,MAC3C;GACA,MAAM,QAAQ,MAAM,QAAQ,MAAM,aAA4B;GAE9D,IAAI,UAAU,IACZ;GAIF,MADkB,MAAM,YAAY,SAAS,cAAc,QAAQ,IAAI,QAAQ,IAC7D,MAAM;EAC1B;EAEA,IAAI,MAAM,YAAY,SAAS,SAAS;GACtC,IAAI,eAAe;IACjB,MAAM,gBAAgB;IACtB,MAAM,eAAe;IACrB,KAAK,eAAe,KAAK,KAAK;GAChC;GAEA,IAAI,cAAc;IAChB,MAAM,gBAAgB;IACtB,MAAM,eAAe;IACrB,IAAI,KAAK,cAAc,KAAK,KAAK,GAC/B,KAAK,YAAY,KAAK,KAAK;SAE3B,KAAK,UAAU,KAAK,KAAK;GAE7B;EACF;CACF;CAEA,MAAM,eAAe;EACnB,WAAWC,oBAAAA,QAAQ;EACnB,OAAO,CAAC;EACR,SAAS;EACT,iBAAiB,YAAY,KAAA;EAC7B,cAAc,KAAK;CACrB;CAEA,OACE,iBAAA,GAAA,kBAAA,~~KAAC~~,OAAD;EACO;EACL,WAAWA,oBAAAA,QAAQ;EACnB,OAAO;GAEH,kBAAkB,yDAAyD,QAAQ,EAAE;GAEvF,GAAG;EACL;EACA,MAAK;EACL,iBAAe;EACf,iBAAe,cAAc,WAAW,KAAA;EACxC,cAAY,KAAK;EACjB,iBAAe,YAAY,KAAA;EAC3B,cAAY;EACF;EACV,WAAW;~~YAEV~~,OAAO,eAAe,aACrB,WAAW;GACT;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,iBAAiB,KAAA;EACnB,CAAC,IAED,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,GAAI;aAAe,KAAK;EAAW,CAAA;CAEvC~~,CAAA;~~AAET,CAAC;AAED,aAAa,cAAc"}
1	+ {"version":3,"file":"FlatTreeNode.cjs","names":["findElementAncestor","classes"],"sources":["../../../src/components/Tree/FlatTreeNode.tsx"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { findElementAncestor } from '../../core';\nimport type { FlatTreeLineState } from './flatten-tree-data/flatten-tree-data';\nimport type { RenderNode, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface FlatTreeNodeProps {\n /** Node data from tree data /\n node: TreeNodeData;\n\n /* Nesting level of the node, starts at 1 /\n level: number;\n\n /* Value of the parent node, `null` for root nodes /\n parent: string \| null;\n\n /* Whether the node has children /\n hasChildren: boolean;\n\n /* Whether the node is expanded /\n expanded: boolean;\n\n /* Tree controller instance, return value of `useTree` hook /\n tree: TreeController;\n\n /* If set, tree node with children is expanded on click @default true /\n expandOnClick?: boolean;\n\n /* If set, tree node is selected on click @default false /\n selectOnClick?: boolean;\n\n /* If set, tree node with children is expanded on space key press @default true /\n expandOnSpace?: boolean;\n\n /* If set, tree node is checked on space key press @default false /\n checkOnSpace?: boolean;\n\n /* A function to render tree node label /\n renderNode?: RenderNode;\n\n /* Style to apply to the root element, used for virtualizer positioning /\n style?: React.CSSProperties;\n\n /* Tab index for the node /\n tabIndex?: number;\n\n /* Line state per ancestor + own level, computed by `flattenTreeData`.\n * When provided and the tree root has `data-with-lines`, connector lines are rendered. /\n linesPath?: FlatTreeLineState[];\n}\n\nexport const FlatTreeNode = memo(function FlatTreeNode({\n node,\n level,\n parent,\n hasChildren,\n expanded,\n tree,\n expandOnClick = true,\n selectOnClick,\n expandOnSpace = true,\n checkOnSpace,\n renderNode,\n style,\n tabIndex = -1,\n linesPath,\n}: FlatTreeNodeProps) {\n const ref = useRef<HTMLDivElement>(null);\n const isLoading = tree.isNodeLoading(node.value);\n const loadError = tree.getNodeLoadError(node.value);\n const selected = tree.selectedState.includes(node.value);\n\n const handleClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n\n if (expandOnClick && hasChildren) {\n tree.toggleExpanded(node.value);\n }\n\n if (selectOnClick) {\n tree.select(node.value);\n }\n\n ref.current?.focus();\n };\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.nativeEvent.code === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n\n if (expanded && hasChildren) {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n const nodes = root\n ? Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n (treeNode) => treeNode.style.display !== 'none'\n )\n : [];\n const index = nodes.indexOf(event.currentTarget as HTMLElement);\n if (index !== -1) {\n nodes[index + 1]?.focus();\n }\n } else if (hasChildren) {\n tree.expand(node.value);\n }\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n\n if (expanded && hasChildren) {\n tree.collapse(node.value);\n } else if (parent) {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n const parentElement = root?.querySelector<HTMLElement>(\n `[role=treeitem][data-value=\"${CSS.escape(parent)}\"]`\n );\n parentElement?.focus();\n }\n }\n\n if (event.nativeEvent.code === 'ArrowDown' \|\| event.nativeEvent.code === 'ArrowUp') {\n const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n if (!root) {\n return;\n }\n\n event.stopPropagation();\n event.preventDefault();\n const nodes = Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n (treeNode) => treeNode.style.display !== 'none'\n );\n const index = nodes.indexOf(event.currentTarget as HTMLElement);\n\n if (index === -1) {\n return;\n }\n\n const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n nodes[nextIndex]?.focus();\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (expandOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n tree.toggleExpanded(node.value);\n }\n\n if (checkOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n if (tree.isNodeChecked(node.value)) {\n tree.uncheckNode(node.value);\n } else {\n tree.checkNode(node.value);\n }\n }\n }\n };\n\n const elementProps = {\n className: classes.label,\n style: {} as React.CSSProperties,\n onClick: handleClick,\n 'data-selected': selected \|\| undefined,\n 'data-value': node.value,\n };\n\n return (\n <div\n ref={ref}\n className={classes.node}\n style={{\n ...({\n '--label-offset': `calc(var(--level-offset, var(--mantine-spacing-lg)) ${level - 1})`,\n } as React.CSSProperties),\n ...style,\n }}\n role=\"treeitem\"\n aria-selected={selected}\n aria-expanded={hasChildren ? expanded : undefined}\n data-value={node.value}\n data-selected={selected \|\| undefined}\n data-level={level}\n tabIndex={tabIndex}\n onKeyDown={handleKeyDown}\n >\n {linesPath?.map((state, idx) => {\n if (state === 'none') {\n return null;\n }\n const column = idx + 2;\n return (\n <span\n key={column}\n aria-hidden\n className={`${classes.flatLine}${state === 'closing' ? ` ${classes.flatLineClosing}` : ''}`}\n style={{ '--flat-line-column': column } as React.CSSProperties}\n />\n );\n })}\n {typeof renderNode === 'function' ? (\n renderNode({\n node,\n level,\n selected,\n isRoot: level === 1,\n tree,\n expanded,\n hasChildren,\n isLoading,\n loadError,\n elementProps,\n dragHandleProps: undefined,\n })\n ) : (\n <div {...elementProps}>{node.label}</div>\n )}\n </div>\n );\n});\n\nFlatTreeNode.displayName = '@mantine/core/FlatTreeNode';\n"],"mappings":"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"}

package/cjs/components/Tree/Tree.cjs CHANGED Viewed

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 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_use_props = require("../../core/MantineProvider/use-props/use-props.cjs");

package/cjs/components/Tree/Tree.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.cjs","names":["createVarsResolver","getSpacing","factory","useProps","useTree","useStyles","TreeNode","Box","classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useClickOutside, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport { TreeNode } from './TreeNode';\nimport type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';\nimport { TreeController, useTree } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface TreeNodeData {\n label: React.ReactNode;\n value: string;\n nodeProps?: Record<string, any>;\n children?: TreeNodeData[];\n hasChildren?: boolean;\n}\n\nexport interface RenderTreeNodePayload {\n /** Node level in the tree /\n level: number;\n\n /* `true` if the node is expanded, applicable only for nodes with `children` /\n expanded: boolean;\n\n /* `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data /\n hasChildren: boolean;\n\n /* `true` if the node is selected /\n selected: boolean;\n\n /* `true` if the node's children are currently being loaded /\n isLoading: boolean;\n\n /* Error from the last failed load attempt, or `null` /\n loadError: Error \| null;\n\n /* Node data from the `data` prop of `Tree` /\n node: TreeNodeData;\n\n /* Tree controller instance, return value of `useTree` hook /\n tree: TreeController;\n\n /* Props to spread into the root node element /\n elementProps: {\n className: string;\n style: React.CSSProperties;\n onClick: (event: React.MouseEvent) => void;\n 'data-selected': boolean \| undefined;\n 'data-value': string;\n draggable?: boolean;\n onDragStart?: (event: React.DragEvent) => void;\n onDragOver?: (event: React.DragEvent) => void;\n onDragLeave?: (event: React.DragEvent) => void;\n onDrop?: (event: React.DragEvent) => void;\n onDragEnd?: (event: React.DragEvent) => void;\n };\n\n /* Props to spread into the drag handle element when `withDragHandle` is set on `Tree`.\n * `undefined` when `withDragHandle` is not enabled or drag-and-drop is disabled. /\n dragHandleProps: TreeDragHandleProps \| undefined;\n}\n\nexport type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;\n\nexport type TreeStylesNames = 'root' \| 'node' \| 'subtree' \| 'label';\nexport type TreeCssVariables = {\n root: '--level-offset';\n};\n\nexport interface TreeDragState {\n draggedValue: string \| null;\n currentDropTarget: HTMLElement \| null;\n}\n\nexport interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {\n /* Data used to render nodes /\n data: TreeNodeData[];\n\n /* Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' /\n levelOffset?: MantineSpacing;\n\n /* If set, tree node with children is expanded on click @default true /\n expandOnClick?: boolean;\n\n /* If set, tree node with children is expanded on space key press @default true /\n expandOnSpace?: boolean;\n\n /* If set, tree node is checked on space key press @default false /\n checkOnSpace?: boolean;\n\n /* If set, tree node is selected on click @default false /\n selectOnClick?: boolean;\n\n /* Use-tree hook instance that can be used to manipulate component state /\n tree?: TreeController;\n\n /* A function to render tree node label /\n renderNode?: RenderNode;\n\n /* If set, selection is cleared when user clicks outside of the tree @default false /\n clearSelectionOnOutsideClick?: boolean;\n\n /* If set, tree nodes range can be selected with click when `Shift` key is pressed @default true /\n allowRangeSelection?: boolean;\n\n /* If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false /\n keepMounted?: boolean;\n\n /* Called when a node is dropped on another node, enables drag-and-drop when provided /\n onDragDrop?: (payload: TreeDragDropPayload) => void;\n\n /* Called for each potential drop target to determine whether a drop is allowed.\n * When it returns `false`, the drop indicator is hidden and the drop is rejected. /\n allowDrop?: TreeAllowDrop;\n\n /* If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps`\n * from the `renderNode` payload, rather than anywhere on the node. @default false /\n withDragHandle?: boolean;\n\n /* If set, connecting lines are rendered showing parent-child relationships @default false */\n withLines?: boolean;\n}\n\nfunction getFlatValues(data: TreeNodeData[]): string[] {\n return data.reduce<string[]>((acc, item) => {\n acc.push(item.value);\n if (item.children) {\n acc.push(...getFlatValues(item.children));\n }\n return acc;\n }, []);\n}\n\nexport type TreeFactory = Factory<{\n props: TreeProps;\n ref: HTMLUListElement;\n stylesNames: TreeStylesNames;\n vars: TreeCssVariables;\n}>;\n\nconst defaultProps = {\n expandOnClick: true,\n allowRangeSelection: true,\n expandOnSpace: true,\n} satisfies Partial<TreeProps>;\n\nconst varsResolver = createVarsResolver<TreeFactory>((_theme, { levelOffset }) => ({\n root: {\n '--level-offset': getSpacing(levelOffset),\n },\n}));\n\nexport const Tree = factory<TreeFactory>((_props) => {\n const props = useProps('Tree', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n expandOnClick,\n tree,\n renderNode,\n selectOnClick,\n clearSelectionOnOutsideClick,\n allowRangeSelection,\n expandOnSpace,\n levelOffset,\n checkOnSpace,\n keepMounted,\n onDragDrop,\n allowDrop,\n withDragHandle,\n withLines,\n attributes,\n ref,\n ...others\n } = props;\n\n const defaultController = useTree();\n const controller = tree \|\| defaultController;\n\n const dragStateRef = useRef<TreeDragState>({ draggedValue: null, currentDropTarget: null });\n\n const getStyles = useStyles<TreeFactory>({\n name: 'Tree',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const clickOutsideRef = useClickOutside(\n () => clearSelectionOnOutsideClick && controller.clearSelected()\n );\n\n const mergedRef = useMergedRef(ref, clickOutsideRef);\n\n const flatValues = useMemo(() => getFlatValues(data), [data]);\n\n useEffect(() => {\n controller.initialize(data);\n }, [data]);\n\n const nodes = data.map((node, index) => (\n <TreeNode\n key={node.value}\n node={node}\n getStyles={getStyles}\n rootIndex={index}\n expandOnClick={expandOnClick}\n selectOnClick={selectOnClick}\n controller={controller}\n renderNode={renderNode}\n flatValues={flatValues}\n allowRangeSelection={allowRangeSelection}\n expandOnSpace={expandOnSpace}\n checkOnSpace={checkOnSpace}\n keepMounted={keepMounted}\n onDragDrop={onDragDrop}\n allowDrop={allowDrop}\n withDragHandle={withDragHandle}\n dragStateRef={dragStateRef}\n data={data}\n />\n ));\n\n return (\n <Box\n component=\"ul\"\n ref={mergedRef}\n {...getStyles('root')}\n {...others}\n role=\"tree\"\n aria-multiselectable={controller.multiple}\n data-tree-root\n data-with-lines={withLines \|\| undefined}\n >\n {nodes}\n </Box>\n );\n});\n\nTree.displayName = '@mantine/core/Tree';\nTree.classes = classes;\nTree.varsResolver = varsResolver;\n\nexport namespace Tree {\n export type Props = TreeProps;\n export type StylesNames = TreeStylesNames;\n export type Factory = TreeFactory;\n export type NodeData = TreeNodeData;\n export type RenderNodePayload = RenderTreeNodePayload;\n}\n"],"mappings":"~~;;;;;;;;;;;;;;;AAuIA~~,SAAS,cAAc,MAAgC;CACrD,OAAO,KAAK,QAAkB,KAAK,SAAS;EAC1C,IAAI,KAAK,KAAK,KAAK;EACnB,IAAI,KAAK,UACP,IAAI,KAAK,GAAG,cAAc,KAAK,QAAQ,CAAC;EAE1C,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AASA,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;AACjB;AAEA,MAAM,eAAeA,6BAAAA,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,WAAW,EAC1C,EACF,EAAE;AAEF,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,WACA,gBACA,WACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoBC,iBAAAA,QAAQ;CAClC,MAAM,aAAa,QAAQ;CAE3B,MAAM,gBAAA,GAAA,MAAA,QAAqC;EAAE,cAAc;EAAM,mBAAmB;CAAK,CAAC;CAE1F,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAMD,MAAM,aAAA,GAAA,eAAA,cAAyB,MAAA,GAAA,eAAA,uBAHvB,gCAAgC,WAAW,cAAc,CAGf,CAAC;CAEnD,MAAM,cAAA,GAAA,MAAA,eAA2B,cAAc,IAAI,GAAG,CAAC,IAAI,CAAC;CAE5D,CAAA,GAAA,MAAA,iBAAgB;EACd,WAAW,WAAW,IAAI;CAC5B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACD;EACD;EACK;EACF;EACR;CACP,GAlBM,KAAK,KAkBX,CACF;CAED,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,MAAM;EACpB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;EACA,mBAAiB,aAAa,KAAA;YAE7B;CACE,CAAA;AAET,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe"}
1	+ {"version":3,"file":"Tree.cjs","names":["createVarsResolver","getSpacing","factory","useProps","useTree","useStyles","TreeNode","Box","classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useClickOutside, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport { TreeNode } from './TreeNode';\nimport type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';\nimport { TreeController, useTree } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface TreeNodeData {\n label: React.ReactNode;\n value: string;\n nodeProps?: Record<string, any>;\n children?: TreeNodeData[];\n hasChildren?: boolean;\n}\n\nexport interface RenderTreeNodePayload {\n /** Node level in the tree /\n level: number;\n\n /* `true` if the node is expanded, applicable only for nodes with `children` /\n expanded: boolean;\n\n /* `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data /\n hasChildren: boolean;\n\n /* `true` if the node is selected /\n selected: boolean;\n\n /* `true` if the node is at the top-most level of the tree (level 1) /\n isRoot: boolean;\n\n /* `true` if the node's children are currently being loaded /\n isLoading: boolean;\n\n /* Error from the last failed load attempt, or `null` /\n loadError: Error \| null;\n\n /* Node data from the `data` prop of `Tree` /\n node: TreeNodeData;\n\n /* Tree controller instance, return value of `useTree` hook /\n tree: TreeController;\n\n /* Props to spread into the root node element /\n elementProps: {\n className: string;\n style: React.CSSProperties;\n onClick: (event: React.MouseEvent) => void;\n 'data-selected': boolean \| undefined;\n 'data-value': string;\n draggable?: boolean;\n onDragStart?: (event: React.DragEvent) => void;\n onDragOver?: (event: React.DragEvent) => void;\n onDragLeave?: (event: React.DragEvent) => void;\n onDrop?: (event: React.DragEvent) => void;\n onDragEnd?: (event: React.DragEvent) => void;\n };\n\n /* Props to spread into the drag handle element when `withDragHandle` is set on `Tree`.\n * `undefined` when `withDragHandle` is not enabled or drag-and-drop is disabled. /\n dragHandleProps: TreeDragHandleProps \| undefined;\n}\n\nexport type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;\n\nexport type TreeStylesNames = 'root' \| 'node' \| 'subtree' \| 'label';\nexport type TreeCssVariables = {\n root: '--level-offset';\n};\n\nexport interface TreeDragState {\n draggedValue: string \| null;\n currentDropTarget: HTMLElement \| null;\n}\n\nexport interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {\n /* Data used to render nodes /\n data: TreeNodeData[];\n\n /* Horizontal padding of each subtree level, key of `theme.spacing` or any valid CSS value @default 'lg' /\n levelOffset?: MantineSpacing;\n\n /* If set, tree node with children is expanded on click @default true /\n expandOnClick?: boolean;\n\n /* If set, tree node with children is expanded on space key press @default true /\n expandOnSpace?: boolean;\n\n /* If set, tree node is checked on space key press @default false /\n checkOnSpace?: boolean;\n\n /* If set, tree node is selected on click @default false /\n selectOnClick?: boolean;\n\n /* Use-tree hook instance that can be used to manipulate component state /\n tree?: TreeController;\n\n /* A function to render tree node label /\n renderNode?: RenderNode;\n\n /* If set, selection is cleared when user clicks outside of the tree @default false /\n clearSelectionOnOutsideClick?: boolean;\n\n /* If set, tree nodes range can be selected with click when `Shift` key is pressed @default true /\n allowRangeSelection?: boolean;\n\n /* If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false /\n keepMounted?: boolean;\n\n /* Called when a node is dropped on another node, enables drag-and-drop when provided /\n onDragDrop?: (payload: TreeDragDropPayload) => void;\n\n /* Called for each potential drop target to determine whether a drop is allowed.\n * When it returns `false`, the drop indicator is hidden and the drop is rejected. /\n allowDrop?: TreeAllowDrop;\n\n /* If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps`\n * from the `renderNode` payload, rather than anywhere on the node. @default false /\n withDragHandle?: boolean;\n\n /* If set, connecting lines are rendered showing parent-child relationships @default false */\n withLines?: boolean;\n}\n\nfunction getFlatValues(data: TreeNodeData[]): string[] {\n return data.reduce<string[]>((acc, item) => {\n acc.push(item.value);\n if (item.children) {\n acc.push(...getFlatValues(item.children));\n }\n return acc;\n }, []);\n}\n\nexport type TreeFactory = Factory<{\n props: TreeProps;\n ref: HTMLUListElement;\n stylesNames: TreeStylesNames;\n vars: TreeCssVariables;\n}>;\n\nconst defaultProps = {\n expandOnClick: true,\n allowRangeSelection: true,\n expandOnSpace: true,\n} satisfies Partial<TreeProps>;\n\nconst varsResolver = createVarsResolver<TreeFactory>((_theme, { levelOffset }) => ({\n root: {\n '--level-offset': getSpacing(levelOffset),\n },\n}));\n\nexport const Tree = factory<TreeFactory>((_props) => {\n const props = useProps('Tree', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n data,\n expandOnClick,\n tree,\n renderNode,\n selectOnClick,\n clearSelectionOnOutsideClick,\n allowRangeSelection,\n expandOnSpace,\n levelOffset,\n checkOnSpace,\n keepMounted,\n onDragDrop,\n allowDrop,\n withDragHandle,\n withLines,\n attributes,\n ref,\n ...others\n } = props;\n\n const defaultController = useTree();\n const controller = tree \|\| defaultController;\n\n const dragStateRef = useRef<TreeDragState>({ draggedValue: null, currentDropTarget: null });\n\n const getStyles = useStyles<TreeFactory>({\n name: 'Tree',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const clickOutsideRef = useClickOutside(\n () => clearSelectionOnOutsideClick && controller.clearSelected()\n );\n\n const mergedRef = useMergedRef(ref, clickOutsideRef);\n\n const flatValues = useMemo(() => getFlatValues(data), [data]);\n\n useEffect(() => {\n controller.initialize(data);\n }, [data]);\n\n const nodes = data.map((node, index) => (\n <TreeNode\n key={node.value}\n node={node}\n getStyles={getStyles}\n rootIndex={index}\n expandOnClick={expandOnClick}\n selectOnClick={selectOnClick}\n controller={controller}\n renderNode={renderNode}\n flatValues={flatValues}\n allowRangeSelection={allowRangeSelection}\n expandOnSpace={expandOnSpace}\n checkOnSpace={checkOnSpace}\n keepMounted={keepMounted}\n onDragDrop={onDragDrop}\n allowDrop={allowDrop}\n withDragHandle={withDragHandle}\n dragStateRef={dragStateRef}\n data={data}\n />\n ));\n\n return (\n <Box\n component=\"ul\"\n ref={mergedRef}\n {...getStyles('root')}\n {...others}\n role=\"tree\"\n aria-multiselectable={controller.multiple}\n data-tree-root\n data-with-lines={withLines \|\| undefined}\n >\n {nodes}\n </Box>\n );\n});\n\nTree.displayName = '@mantine/core/Tree';\nTree.classes = classes;\nTree.varsResolver = varsResolver;\n\nexport namespace Tree {\n export type Props = TreeProps;\n export type StylesNames = TreeStylesNames;\n export type Factory = TreeFactory;\n export type NodeData = TreeNodeData;\n export type RenderNodePayload = RenderTreeNodePayload;\n}\n"],"mappings":";;;;;;;;;;;;;;AA0IA,SAAS,cAAc,MAAgC;CACrD,OAAO,KAAK,QAAkB,KAAK,SAAS;EAC1C,IAAI,KAAK,KAAK,KAAK;EACnB,IAAI,KAAK,UACP,IAAI,KAAK,GAAG,cAAc,KAAK,QAAQ,CAAC;EAE1C,OAAO;CACT,GAAG,CAAC,CAAC;AACP;AASA,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;AACjB;AAEA,MAAM,eAAeA,6BAAAA,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,WAAW,EAC1C,EACF,EAAE;AAEF,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,WACA,gBACA,WACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoBC,iBAAAA,QAAQ;CAClC,MAAM,aAAa,QAAQ;CAE3B,MAAM,gBAAA,GAAA,MAAA,QAAqC;EAAE,cAAc;EAAM,mBAAmB;CAAK,CAAC;CAE1F,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAMD,MAAM,aAAA,GAAA,eAAA,cAAyB,MAAA,GAAA,eAAA,uBAHvB,gCAAgC,WAAW,cAAc,CAGf,CAAC;CAEnD,MAAM,cAAA,GAAA,MAAA,eAA2B,cAAc,IAAI,GAAG,CAAC,IAAI,CAAC;CAE5D,CAAA,GAAA,MAAA,iBAAgB;EACd,WAAW,WAAW,IAAI;CAC5B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACD;EACD;EACK;EACF;EACR;CACP,GAlBM,KAAK,KAkBX,CACF;CAED,OACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,MAAM;EACpB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;EACA,mBAAiB,aAAa,KAAA;YAE7B;CACE,CAAA;AAET,CAAC;AAED,KAAK,cAAc;AACnB,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe"}

package/cjs/components/Tree/Tree.module.cjs CHANGED Viewed

@@ -4,7 +4,9 @@ var Tree_module_default = {
 	"root": "m_f698e191",
 	"subtree": "m_75f3ecf",
 	"node": "m_f6970eb1",
-	"label": "m_dc283425"
+	"label": "m_dc283425",
+	"flatLine": "m_c03b303c",
+	"flatLineClosing": "m_bf7448d9"
 };
 //#endregion
 exports.default = Tree_module_default;

package/cjs/components/Tree/Tree.module.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.module.cjs","names":[],"sources":["../../../src/components/Tree/Tree.module.css"],"sourcesContent":[".root {\n --level-offset: var(--mantine-spacing-lg);\n --tree-line-width: rem(1px);\n --tree-line-color: var(--mantine-color-default-border);\n margin: 0;\n padding: 0;\n user-select: none;\n}\n\n.subtree {\n margin: 0;\n padding: 0;\n}\n\n.node {\n cursor: pointer;\n list-style: none;\n margin: 0;\n padding: 0;\n outline: 0;\n\n &:focus-visible {\n > .label {\n outline: 2px solid var(--mantine-primary-color-filled);\n outline-offset: 2px;\n }\n }\n}\n\n.label {\n position: relative;\n padding-inline-start: var(--label-offset);\n\n &:where([data-selected]) {\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n &:where([data-dragging]) {\n opacity: 0.4;\n }\n\n &:where([data-drag-over='before'])::before {\n content: '';\n position: absolute;\n top: -1px;\n inset-inline-start: var(--label-offset, 0);\n inset-inline-end: 0;\n height: 2px;\n background-color: var(--mantine-primary-color-filled);\n pointer-events: none;\n z-index: 1;\n }\n\n &:where([data-drag-over='after'])::after {\n content: '';\n position: absolute;\n bottom: -1px;\n inset-inline-start: var(--label-offset, 0);\n inset-inline-end: 0;\n height: 2px;\n background-color: var(--mantine-primary-color-filled);\n pointer-events: none;\n z-index: 1;\n }\n\n &:where([data-drag-over='inside']) {\n background-color: var(--mantine-primary-color-light);\n }\n}\n\n:where([data-with-lines]) {\n .node {\n position: relative;\n }\n\n ~~.subtree~~ > .node {\n ~~&::~~before {\n content: '';\n position: absolute;\n top: rem(12px);\n inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n width: calc(var(--level-offset) / 2);\n height: 0;\n border-top: var(--tree-line-width) solid var(--tree-line-color);\n pointer-events: none;\n }\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n width: 0;\n border-inline-start: var(--tree-line-width) solid var(--tree-line-color);\n pointer-events: none;\n }\n\n &:last-child::after {\n bottom: auto;\n height: rem(12px);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Tree.module.cjs","names":[],"sources":["../../../src/components/Tree/Tree.module.css"],"sourcesContent":[":where([data-tree-root]) {\n --level-offset: var(--mantine-spacing-lg);\n --tree-line-width: rem(1px);\n --tree-line-color: var(--mantine-color-default-border);\n}\n\n.root {\n margin: 0;\n padding: 0;\n user-select: none;\n}\n\n.subtree {\n margin: 0;\n padding: 0;\n}\n\n.node {\n cursor: pointer;\n list-style: none;\n margin: 0;\n padding: 0;\n outline: 0;\n\n &:focus-visible {\n > .label {\n outline: 2px solid var(--mantine-primary-color-filled);\n outline-offset: 2px;\n }\n }\n}\n\n.label {\n position: relative;\n padding-inline-start: var(--label-offset);\n\n &:where([data-selected]) {\n @mixin where-light {\n background-color: var(--mantine-color-gray-1);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n &:where([data-dragging]) {\n opacity: 0.4;\n }\n\n &:where([data-drag-over='before'])::before {\n content: '';\n position: absolute;\n top: -1px;\n inset-inline-start: var(--label-offset, 0);\n inset-inline-end: 0;\n height: 2px;\n background-color: var(--mantine-primary-color-filled);\n pointer-events: none;\n z-index: 1;\n }\n\n &:where([data-drag-over='after'])::after {\n content: '';\n position: absolute;\n bottom: -1px;\n inset-inline-start: var(--label-offset, 0);\n inset-inline-end: 0;\n height: 2px;\n background-color: var(--mantine-primary-color-filled);\n pointer-events: none;\n z-index: 1;\n }\n\n &:where([data-drag-over='inside']) {\n background-color: var(--mantine-primary-color-light);\n }\n}\n\n:where([data-with-lines]) {\n .node {\n position: relative;\n }\n\n /* Horizontal connector at the node's own level — applies to both nested and flat layouts /\n .node:not([data-level='1'])::before {\n content: '';\n position: absolute;\n top: rem(12px);\n inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n width: calc(var(--level-offset) / 2);\n height: 0;\n border-top: var(--tree-line-width) solid var(--tree-line-color);\n pointer-events: none;\n z-index: 1;\n }\n\n / Vertical line for nested layout (regular Tree): the line spans the parent <li>'s\n full height — including descendants — so ancestor columns stay continuous. /\n .subtree > .node {\n &::after {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n width: 0;\n border-inline-start: var(--tree-line-width) solid var(--tree-line-color);\n pointer-events: none;\n z-index: 1;\n }\n\n &:last-child::after {\n bottom: auto;\n height: rem(12px);\n }\n }\n\n .node:where([data-dragging]) {\n &::before,\n &::after {\n display: none;\n }\n\n .flatLine {\n display: none;\n }\n }\n}\n\n/ Vertical line markers rendered as DOM children by `FlatTreeNode` for flat layouts\n (e.g. virtualized trees) where ::after on a single node can't span ancestor rows.\n Each marker is positioned at column `--flat-line-column` and is only visible\n inside a `[data-with-lines]` tree. /\n.flatLine {\n position: absolute;\n top: 0;\n bottom: 0;\n width: 0;\n inset-inline-start: calc((var(--flat-line-column) - 1.5) var(--level-offset));\n border-inline-start: var(--tree-line-width) solid var(--tree-line-color);\n pointer-events: none;\n z-index: 1;\n display: none;\n}\n\n:where([data-with-lines]) .flatLine {\n display: block;\n}\n\n.flatLineClosing {\n bottom: auto;\n height: rem(12px);\n}\n"],"mappings":""}

package/cjs/components/Tree/TreeNode.cjs CHANGED Viewed

@@ -1,5 +1,4 @@
 "use client";
-require("../../_virtual/_rolldown/runtime.cjs");
 const require_find_element_ancestor = require("../../core/utils/find-element-ancestor/find-element-ancestor.cjs");
 const require_Box = require("../../core/Box/Box.cjs");
 const require_Loader = require("../Loader/Loader.cjs");
@@ -15,6 +14,13 @@ function getValuesRange(anchor, value, flatValues) {
 	const end = Math.max(anchorIndex, valueIndex);
 	return flatValues.slice(start, end + 1);
 }
+function isVisibleTreeNode(node, root) {
+	for (let current = node; current && current !== root;) {
+		if (current.style.display === "none") return false;
+		current = current.parentElement;
+	}
+	return true;
+}
 function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data }) {
 	const ref = (0, react.useRef)(null);
 	const hasLoadedChildren = Array.isArray(node.children);
@@ -47,6 +53,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 	const { elementProps: dragElementProps, dragHandleProps } = require_use_tree_node_drag_drop.useTreeNodeDragDrop({
 		nodeValue: node.value,
 		hasChildren,
+		isExpanded,
 		data,
 		onDragDrop,
 		dragStateRef,
@@ -71,7 +78,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 			if (!root) return;
 			event.stopPropagation();
 			event.preventDefault();
-			const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none");
+			const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => isVisibleTreeNode(treeNode, root));
 			const index = nodes.indexOf(event.currentTarget);
 			if (index === -1) return;
 			const nextIndex = event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1;
@@ -129,6 +136,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 				node,
 				level,
 				selected,
+				isRoot: level === 1,
 				tree: controller,
 				expanded: isExpanded,
 				hasChildren,
@@ -149,7 +157,10 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 					...getStyles("node", { style: { "--label-offset": `calc(var(--level-offset) * ${level})` } }),
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						...getStyles("label"),
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, { size: 16 })
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, {
+							size: 16,
+							style: { marginInlineStart: 4 }
+						})
 					})
 				})
 			}),