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/esm/components/Tooltip/Tooltip.mjs CHANGED Viewed

@@ -9,6 +9,7 @@ import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
 import { factory } from "../../core/factory/factory.mjs";
 import { Box } from "../../core/Box/Box.mjs";
 import { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
+import { getArrowMergeDropdownStyles } from "../../utils/Floating/FloatingArrow/get-arrow-position-styles.mjs";
 import { FloatingArrow } from "../../utils/Floating/FloatingArrow/FloatingArrow.mjs";
 import { getFloatingPosition } from "../../utils/Floating/get-floating-position/get-floating-position.mjs";
 import { OptionalPortal } from "../Portal/OptionalPortal.mjs";
@@ -102,6 +103,10 @@ const Tooltip = factory((_props) => {
 	const 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 ? getArrowMergeDropdownStyles({
+		position: tooltip.placement,
+		dir
+	}) : void 0;
 	if (target) {
 		const transition = getTransitionProps(transitionProps, {
 			duration: 100,
@@ -127,6 +132,7 @@ const Tooltip = factory((_props) => {
 						style: {
 							...tooltipStyles.style,
 							...transitionStyles,
+							...mergeStyles,
 							zIndex,
 							top: tooltip.y ?? 0,
 							left: tooltip.x ?? 0
@@ -173,6 +179,7 @@ const Tooltip = factory((_props) => {
 					style: {
 						...getStyles("tooltip").style,
 						...transitionStyles,
+						...mergeStyles,
 						zIndex,
 						top: tooltip.y ?? 0,
 						left: tooltip.x ?? 0

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.mjs","names":["classes"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n 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.mjs","names":["classes"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getArrowMergeDropdownStyles,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n TooltipGroup,\n type TooltipGroupProps,\n type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n /** Called when tooltip position changes /\n onPositionChange?: (position: FloatingPosition) => void;\n\n /* Open delay in ms /\n openDelay?: number;\n\n /* Close delay in ms @default 0 /\n closeDelay?: number;\n\n /* Controlled opened state /\n opened?: boolean;\n\n /* Uncontrolled tooltip initial opened state /\n defaultOpened?: boolean;\n\n /* Space between target element and tooltip in px @default 5 /\n offset?: number \| FloatingAxesOffsets;\n\n /* If set, the tooltip has an arrow @default false /\n withArrow?: boolean;\n\n /* Arrow size in px @default 4 /\n arrowSize?: number;\n\n /* Arrow offset in px @default 5 /\n arrowOffset?: number;\n\n /* Arrow `border-radius` in px @default 0 /\n arrowRadius?: number;\n\n /* Arrow position relative to the tooltip @default side /\n arrowPosition?: ArrowPosition;\n\n /* Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } /\n transitionProps?: TransitionOverride;\n\n /* Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } /\n events?: { hover: boolean; focus: boolean; touch: boolean };\n\n /* 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/esm/components/Tooltip/use-tooltip.mjs CHANGED Viewed

@@ -1,7 +1,7 @@
 "use client";
 import { TooltipGroupContext } from "./TooltipGroup/TooltipGroup.mjs";
-import { use, useCallback, useState } from "react";
-import { useDidUpdate, useId as useId$1 } from "@mantine/hooks";
+import { use, useCallback, useRef, useState } from "react";
+import { useId as useId$1, useIsomorphicEffect } from "@mantine/hooks";
 import { arrow, autoUpdate, flip, inline, offset, shift, useDelayGroup, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole } from "@floating-ui/react";
 //#region packages/@mantine/core/src/components/Tooltip/use-tooltip.ts
 function getDefaultMiddlewares(middlewares) {
@@ -64,8 +64,12 @@ function useTooltip(settings) {
 		useRole(context, { role: "tooltip" }),
 		useDismiss(context, { enabled: typeof settings.opened === "undefined" })
 	]);
-	useDidUpdate(() => {
-		settings.onPositionChange?.(placement);
+	const previousPlacementRef = useRef(placement);
+	useIsomorphicEffect(() => {
+		if (previousPlacementRef.current !== placement) {
+			previousPlacementRef.current = placement;
+			settings.onPositionChange?.(placement);
+		}
 	}, [placement]);
 	const isGroupPhase = opened && currentId && currentId !== uid;
 	return {

package/esm/components/Tooltip/use-tooltip.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tooltip.mjs","names":["useId"],"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,CAAC,OAAO,SAAS,MAAM,CAAC;CAE1D,IAAI,mBAAmB,OACrB,YAAY,KACV,MACE,OAAO,mBAAmB,UAAU,YAChC,EAAE,SAAS,EAAE,IACb;EAAE,SAAS;EAAG,GAAG,mBAAmB;CAAM,CAChD,CACF;CAGF,IAAI,mBAAmB,MACrB,YAAY,KACV,OAAO,mBAAmB,SAAS,YAAY,KAAK,IAAI,KAAK,mBAAmB,IAAI,CACtF;CAGF,YAAY,KAAK,MAAM;EAAE,SAAS,SAAS;EAAW,SAAS,SAAS;CAAY,CAAC,CAAC;CAEtF,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,YAAY,OAAO,IAAI,OAAO,mBAAmB,MAAM,CAC9F;MACK,IAAI,SAAS,QAClB,YAAY,KAAK,OAAO,CAAC;CAG3B,OAAO;AACT;AAEA,SAAgB,WAAW,UAAsB;CAC/C,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,mBAAmB,EAAE;CAC7C,MAAM,MAAMA,QAAM;CAElB,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SACF,aAAa,GAAG;CAEpB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,EACJ,GACA,GACA,SACA,MACA,WACA,gBAAgB,EAAE,OAAO,EAAE,GAAG,QAAQ,GAAG,WAAW,CAAC,QACnD,YAAY;EACd,UAAU,SAAS;EACnB,WAAW,SAAS;EACpB,MAAM;EACN,cAAc;EACd,YAAY,sBAAsB,QAAQ;EAC1C,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,WAAW,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAEzF,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS,SAAS,QAAQ;GAC1B,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;GACzF,WAAW,CAAC,SAAS,QAAQ;EAC/B,CAAC;EACD,SAAS,SAAS;GAAE,SAAS,SAAS,QAAQ;GAAO,aAAa;EAAK,CAAC;EACxE,QAAQ,SAAS,EAAE,MAAM,UAAU,CAAC;EAEpC,WAAW,SAAS,EAAE,SAAS,OAAO,SAAS,WAAW,YAAY,CAAC;CACzE,CAAC;CAED,~~mBAAmB~~;~~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.mjs","names":["useId"],"sources":["../../../src/components/Tooltip/use-tooltip.ts"],"sourcesContent":["import { use, useCallback, useRef, useState } from 'react';\nimport {\n arrow,\n autoUpdate,\n flip,\n inline,\n offset,\n 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":";;;;;;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,CAAC,OAAO,SAAS,MAAM,CAAC;CAE1D,IAAI,mBAAmB,OACrB,YAAY,KACV,MACE,OAAO,mBAAmB,UAAU,YAChC,EAAE,SAAS,EAAE,IACb;EAAE,SAAS;EAAG,GAAG,mBAAmB;CAAM,CAChD,CACF;CAGF,IAAI,mBAAmB,MACrB,YAAY,KACV,OAAO,mBAAmB,SAAS,YAAY,KAAK,IAAI,KAAK,mBAAmB,IAAI,CACtF;CAGF,YAAY,KAAK,MAAM;EAAE,SAAS,SAAS;EAAW,SAAS,SAAS;CAAY,CAAC,CAAC;CAEtF,IAAI,mBAAmB,QACrB,YAAY,KACV,OAAO,mBAAmB,WAAW,YAAY,OAAO,IAAI,OAAO,mBAAmB,MAAM,CAC9F;MACK,IAAI,SAAS,QAClB,YAAY,KAAK,OAAO,CAAC;CAG3B,OAAO;AACT;AAEA,SAAgB,WAAW,UAAsB;CAC/C,MAAM,CAAC,oBAAoB,yBAAyB,SAAS,SAAS,aAAa;CAEnF,MAAM,SADa,OAAO,SAAS,WAAW,YAClB,SAAS,SAAS;CAC9C,MAAM,cAAc,IAAI,mBAAmB,EAAE;CAC7C,MAAM,MAAMA,QAAM;CAElB,MAAM,WAAW,aACd,YAAqB;EACpB,sBAAsB,OAAO;EAE7B,IAAI,SACF,aAAa,GAAG;CAEpB,GACA,CAAC,GAAG,CACN;CAEA,MAAM,EACJ,GACA,GACA,SACA,MACA,WACA,gBAAgB,EAAE,OAAO,EAAE,GAAG,QAAQ,GAAG,WAAW,CAAC,QACnD,YAAY;EACd,UAAU,SAAS;EACnB,WAAW,SAAS;EACpB,MAAM;EACN,cAAc;EACd,YAAY,sBAAsB,QAAQ;EAC1C,sBAAsB;CACxB,CAAC;CAED,MAAM,EAAE,OAAO,YAAY,WAAW,iBAAiB,cAAc,SAAS,EAAE,IAAI,IAAI,CAAC;CAEzF,MAAM,EAAE,mBAAmB,qBAAqB,gBAAgB;EAC9D,SAAS,SAAS;GAChB,SAAS,SAAS,QAAQ;GAC1B,OAAO,cAAc,aAAa;IAAE,MAAM,SAAS;IAAW,OAAO,SAAS;GAAW;GACzF,WAAW,CAAC,SAAS,QAAQ;EAC/B,CAAC;EACD,SAAS,SAAS;GAAE,SAAS,SAAS,QAAQ;GAAO,aAAa;EAAK,CAAC;EACxE,QAAQ,SAAS,EAAE,MAAM,UAAU,CAAC;EAEpC,WAAW,SAAS,EAAE,SAAS,OAAO,SAAS,WAAW,YAAY,CAAC;CACzE,CAAC;CAED,MAAM,uBAAuB,OAAO,SAAS;CAC7C,0BAA0B;EACxB,IAAI,qBAAqB,YAAY,WAAW;GAC9C,qBAAqB,UAAU;GAC/B,SAAS,mBAAmB,SAAS;EACvC;CACF,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,UAAU,aAAa,cAAc;CAE1D,OAAO;EACL;EACA;EACA;EACA;EACA,WAAW,KAAK;EAChB,UAAU,KAAK;EACf;EACA;EACA;EACA;EACA;CACF;AACF"}

package/esm/components/Tree/FlatTreeNode.mjs CHANGED Viewed

@@ -2,9 +2,9 @@
 import { findElementAncestor } from "../../core/utils/find-element-ancestor/find-element-ancestor.mjs";
 import Tree_module_default from "./Tree.module.mjs";
 import { memo, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Tree/FlatTreeNode.tsx
-const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick = true, selectOnClick, expandOnSpace = true, checkOnSpace, renderNode, style, tabIndex = -1 }) {
+const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick = true, selectOnClick, expandOnSpace = true, checkOnSpace, renderNode, style, tabIndex = -1, linesPath }) {
 	const ref = useRef(null);
 	const isLoading = tree.isNodeLoading(node.value);
 	const loadError = tree.getNodeLoadError(node.value);
@@ -63,7 +63,7 @@ const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildr
 		"data-selected": selected || void 0,
 		"data-value": node.value
 	};
-	return /* @__PURE__ */ jsx("div", {
+	return /* @__PURE__ */ jsxs("div", {
 		ref,
 		className: Tree_module_default.node,
 		style: {
@@ -78,10 +78,19 @@ const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildr
 		"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__ */ jsx("span", {
+				"aria-hidden": true,
+				className: `${Tree_module_default.flatLine}${state === "closing" ? ` ${Tree_module_default.flatLineClosing}` : ""}`,
+				style: { "--flat-line-column": column }
+			}, column);
+		}), typeof renderNode === "function" ? renderNode({
 			node,
 			level,
 			selected,
+			isRoot: level === 1,
 			tree,
 			expanded,
 			hasChildren,
@@ -92,7 +101,7 @@ const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildr
 		}) : /* @__PURE__ */ jsx("div", {
 			...elementProps,
 			children: node.label
-		})
+		})]
 	});
 });
 FlatTreeNode.displayName = "@mantine/core/FlatTreeNode";

package/esm/components/Tree/FlatTreeNode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlatTreeNode.mjs","names":["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,eAAe,KAAK,SAAS,aAAa,EACrD,MACA,OACA,QACA,aACA,UACA,MACA,gBAAgB,MAChB,eACA,gBAAgB,MAChB,cACA,YACA,OACA,WAAW,~~MACS~~;CACpB,MAAM,MAAM,OAAuB,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,OAAO,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,CAJa,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,OAAO,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,WAAWA,oBAAQ;EACnB,OAAO,CAAC;EACR,SAAS;EACT,iBAAiB,YAAY,KAAA;EAC7B,cAAc,KAAK;CACrB;CAEA,OACE,~~oBAAC~~,OAAD;EACO;EACL,WAAWA,oBAAQ;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,oBAAC,OAAD;GAAK,GAAI;aAAe,KAAK;EAAW,CAAA;CAEvC~~,CAAA;~~AAET,CAAC;AAED,aAAa,cAAc"}
1	+ {"version":3,"file":"FlatTreeNode.mjs","names":["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/esm/components/Tree/Tree.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.mjs","names":["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,eAAe,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkB,WAAW,WAAW,EAC1C,EACF,EAAE;AAEF,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,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,oBAAoB,QAAQ;CAClC,MAAM,aAAa,QAAQ;CAE3B,MAAM,eAAe,OAAsB;EAAE,cAAc;EAAM,mBAAmB;CAAK,CAAC;CAE1F,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAMD,MAAM,YAAY,aAAa,KAJP,sBAChB,gCAAgC,WAAW,cAAc,CAGf,CAAC;CAEnD,MAAM,aAAa,cAAc,cAAc,IAAI,GAAG,CAAC,IAAI,CAAC;CAE5D,gBAAgB;EACd,WAAW,WAAW,IAAI;CAC5B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,oBAAC,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,oBAAC,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,UAAUA;AACf,KAAK,eAAe"}
1	+ {"version":3,"file":"Tree.mjs","names":["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,eAAe,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkB,WAAW,WAAW,EAC1C,EACF,EAAE;AAEF,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,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,oBAAoB,QAAQ;CAClC,MAAM,aAAa,QAAQ;CAE3B,MAAM,eAAe,OAAsB;EAAE,cAAc;EAAM,mBAAmB;CAAK,CAAC;CAE1F,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAMD,MAAM,YAAY,aAAa,KAJP,sBAChB,gCAAgC,WAAW,cAAc,CAGf,CAAC;CAEnD,MAAM,aAAa,cAAc,cAAc,IAAI,GAAG,CAAC,IAAI,CAAC;CAE5D,gBAAgB;EACd,WAAW,WAAW,IAAI;CAC5B,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,oBAAC,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,oBAAC,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,UAAUA;AACf,KAAK,eAAe"}

package/esm/components/Tree/Tree.module.mjs 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
 export { Tree_module_default as default };

package/esm/components/Tree/Tree.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Tree.module.mjs","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.mjs","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/esm/components/Tree/TreeNode.mjs CHANGED Viewed

@@ -14,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 = useRef(null);
 	const hasLoadedChildren = Array.isArray(node.children);
@@ -46,6 +53,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 	const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({
 		nodeValue: node.value,
 		hasChildren,
+		isExpanded,
 		data,
 		onDragDrop,
 		dragStateRef,
@@ -70,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;
@@ -128,6 +136,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 				node,
 				level,
 				selected,
+				isRoot: level === 1,
 				tree: controller,
 				expanded: isExpanded,
 				hasChildren,
@@ -148,7 +157,10 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 					...getStyles("node", { style: { "--label-offset": `calc(var(--level-offset) * ${level})` } }),
 					children: /* @__PURE__ */ jsx("div", {
 						...getStyles("label"),
-						children: /* @__PURE__ */ jsx(Loader, { size: 16 })
+						children: /* @__PURE__ */ jsx(Loader, {
+							size: 16,
+							style: { marginInlineStart: 4 }
+						})
 					})
 				})
 			}),

package/esm/components/Tree/TreeNode.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TreeNode.mjs","names":[],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { TreeAllowDrop, useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string \| null, value: string \| undefined, flatValues: string[]) {\n if (!anchor \|\| !value) {\n return [];\n }\n\n const anchorIndex = flatValues.indexOf(anchor);\n const valueIndex = flatValues.indexOf(value);\n const start = Math.min(anchorIndex, valueIndex);\n const end = Math.max(anchorIndex, valueIndex);\n\n return flatValues.slice(start, end + 1);\n}\n\ninterface TreeNodeProps {\n node: TreeNodeData;\n getStyles: GetStylesApi<TreeFactory>;\n rootIndex: number \| undefined;\n controller: TreeController;\n expandOnClick: boolean \| undefined;\n flatValues: string[];\n isSubtree?: boolean;\n level?: number;\n renderNode: RenderNode \| undefined;\n selectOnClick: boolean \| undefined;\n allowRangeSelection: boolean \| undefined;\n expandOnSpace: boolean \| undefined;\n checkOnSpace: boolean \| undefined;\n keepMounted: boolean \| undefined;\n onDragDrop: ((payload: TreeDragDropPayload) => void) \| undefined;\n allowDrop: TreeAllowDrop \| undefined;\n withDragHandle: boolean \| undefined;\n dragStateRef: React.RefObject<TreeDragState>;\n data: TreeNodeData[];\n}\n\nexport function TreeNode({\n node,\n getStyles,\n rootIndex,\n controller,\n expandOnClick,\n selectOnClick,\n isSubtree,\n level = 1,\n renderNode,\n flatValues,\n allowRangeSelection,\n expandOnSpace,\n checkOnSpace,\n keepMounted,\n onDragDrop,\n allowDrop,\n withDragHandle,\n dragStateRef,\n data,\n}: TreeNodeProps) {\n const ref = useRef<HTMLLIElement>(null);\n const hasLoadedChildren = Array.isArray(node.children);\n const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n const hasChildren = hasLoadedChildren \|\| hasAsyncChildren;\n const isLoading = controller.isNodeLoading(node.value);\n const loadError = controller.getNodeLoadError(node.value);\n const isExpanded = controller.expandedState[node.value] \|\| false;\n\n const nested = (node.children \|\| []).map((child) => (\n <TreeNode\n key={child.value}\n node={child}\n flatValues={flatValues}\n getStyles={getStyles}\n rootIndex={undefined}\n level={level + 1}\n controller={controller}\n expandOnClick={expandOnClick}\n isSubtree\n renderNode={renderNode}\n selectOnClick={selectOnClick}\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 const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({\n nodeValue: node.value,\n hasChildren,\n data,\n onDragDrop,\n dragStateRef,\n allowDrop,\n withDragHandle,\n });\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.nativeEvent.code === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n\n if (isExpanded) {\n event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]')?.focus();\n } else {\n controller.expand(node.value);\n }\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n if (isExpanded && hasChildren) {\n controller.collapse(node.value);\n } else if (isSubtree) {\n findElementAncestor(event.currentTarget as HTMLElement, '[role=treeitem]')?.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<HTMLLIElement>('[role=treeitem]')).filter(\n (treeNode) => treeNode.style.display !== 'none'\n );\n const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\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 if (event.shiftKey) {\n const selectNode = nodes[nextIndex];\n\n if (selectNode) {\n controller.setSelectedState(\n getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n );\n }\n }\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (expandOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n controller.toggleExpanded(node.value);\n }\n\n if (checkOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n controller.isNodeChecked(node.value)\n ? controller.uncheckNode(node.value)\n : controller.checkNode(node.value);\n }\n }\n };\n\n const handleNodeClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n\n if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n ref.current?.focus();\n } else {\n if (expandOnClick) {\n controller.toggleExpanded(node.value);\n }\n\n selectOnClick && controller.select(node.value);\n ref.current?.focus();\n }\n };\n\n const selected = controller.selectedState.includes(node.value);\n const elementProps = {\n ...getStyles('label'),\n onClick: handleNodeClick,\n 'data-selected': selected \|\| undefined,\n 'data-value': node.value,\n ...dragElementProps,\n };\n\n const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n return (\n <li\n {...getStyles('node', {\n style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n })}\n role=\"treeitem\"\n aria-selected={selected}\n data-value={node.value}\n data-selected={selected \|\| undefined}\n data-level={level}\n tabIndex={rootIndex === 0 ? 0 : -1}\n onKeyDown={handleKeyDown}\n ref={ref}\n >\n {typeof renderNode === 'function' ? (\n renderNode({\n node,\n level,\n selected,\n tree: controller,\n expanded: isExpanded,\n hasChildren,\n isLoading,\n loadError,\n elementProps,\n dragHandleProps,\n })\n ) : (\n <div {...elementProps}>{node.label}</div>\n )}\n\n {withLoadingIndicator && (\n <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n <li\n {...getStyles('node', {\n style: { '--label-offset': `calc(var(--level-offset) * ${level})` },\n })}\n >\n <div {...getStyles('label')}>\n <Loader size={16} />\n </div>\n </li>\n </Box>\n )}\n\n {keepMounted && nested.length > 0 ? (\n <Activity mode={isExpanded ? 'visible' : 'hidden'}>\n <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n {nested}\n </Box>\n </Activity>\n ) : (\n isExpanded &&\n nested.length > 0 && (\n <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n {nested}\n </Box>\n )\n )}\n </li>\n );\n}\n\nTreeNode.displayName = '@mantine/core/TreeNode';\n"],"mappings":"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"}
1	+ {"version":3,"file":"TreeNode.mjs","names":[],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { TreeAllowDrop, useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string \| null, value: string \| undefined, flatValues: string[]) {\n if (!anchor \|\| !value) {\n return [];\n }\n\n const anchorIndex = flatValues.indexOf(anchor);\n const valueIndex = flatValues.indexOf(value);\n const start = Math.min(anchorIndex, valueIndex);\n const end = Math.max(anchorIndex, valueIndex);\n\n return flatValues.slice(start, end + 1);\n}\n\nfunction isVisibleTreeNode(node: HTMLElement, root: Element) {\n for (let current: HTMLElement \| null = node; current && current !== root; ) {\n if (current.style.display === 'none') {\n return false;\n }\n current = current.parentElement;\n }\n\n return true;\n}\n\ninterface TreeNodeProps {\n node: TreeNodeData;\n getStyles: GetStylesApi<TreeFactory>;\n rootIndex: number \| undefined;\n controller: TreeController;\n expandOnClick: boolean \| undefined;\n flatValues: string[];\n isSubtree?: boolean;\n level?: number;\n renderNode: RenderNode \| undefined;\n selectOnClick: boolean \| undefined;\n allowRangeSelection: boolean \| undefined;\n expandOnSpace: boolean \| undefined;\n checkOnSpace: boolean \| undefined;\n keepMounted: boolean \| undefined;\n onDragDrop: ((payload: TreeDragDropPayload) => void) \| undefined;\n allowDrop: TreeAllowDrop \| undefined;\n withDragHandle: boolean \| undefined;\n dragStateRef: React.RefObject<TreeDragState>;\n data: TreeNodeData[];\n}\n\nexport function TreeNode({\n node,\n getStyles,\n rootIndex,\n controller,\n expandOnClick,\n selectOnClick,\n isSubtree,\n level = 1,\n renderNode,\n flatValues,\n allowRangeSelection,\n expandOnSpace,\n checkOnSpace,\n keepMounted,\n onDragDrop,\n allowDrop,\n withDragHandle,\n dragStateRef,\n data,\n}: TreeNodeProps) {\n const ref = useRef<HTMLLIElement>(null);\n const hasLoadedChildren = Array.isArray(node.children);\n const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n const hasChildren = hasLoadedChildren \|\| hasAsyncChildren;\n const isLoading = controller.isNodeLoading(node.value);\n const loadError = controller.getNodeLoadError(node.value);\n const isExpanded = controller.expandedState[node.value] \|\| false;\n\n const nested = (node.children \|\| []).map((child) => (\n <TreeNode\n key={child.value}\n node={child}\n flatValues={flatValues}\n getStyles={getStyles}\n rootIndex={undefined}\n level={level + 1}\n controller={controller}\n expandOnClick={expandOnClick}\n isSubtree\n renderNode={renderNode}\n selectOnClick={selectOnClick}\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 const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({\n nodeValue: node.value,\n hasChildren,\n isExpanded,\n data,\n onDragDrop,\n dragStateRef,\n allowDrop,\n withDragHandle,\n });\n\n const handleKeyDown = (event: React.KeyboardEvent) => {\n if (event.nativeEvent.code === 'ArrowRight') {\n event.stopPropagation();\n event.preventDefault();\n\n if (isExpanded) {\n event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]')?.focus();\n } else {\n controller.expand(node.value);\n }\n }\n\n if (event.nativeEvent.code === 'ArrowLeft') {\n event.stopPropagation();\n event.preventDefault();\n if (isExpanded && hasChildren) {\n controller.collapse(node.value);\n } else if (isSubtree) {\n findElementAncestor(event.currentTarget as HTMLElement, '[role=treeitem]')?.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<HTMLLIElement>('[role=treeitem]')).filter(\n (treeNode) => isVisibleTreeNode(treeNode, root)\n );\n const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\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 if (event.shiftKey) {\n const selectNode = nodes[nextIndex];\n\n if (selectNode) {\n controller.setSelectedState(\n getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n );\n }\n }\n }\n\n if (event.nativeEvent.code === 'Space') {\n if (expandOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n controller.toggleExpanded(node.value);\n }\n\n if (checkOnSpace) {\n event.stopPropagation();\n event.preventDefault();\n controller.isNodeChecked(node.value)\n ? controller.uncheckNode(node.value)\n : controller.checkNode(node.value);\n }\n }\n };\n\n const handleNodeClick = (event: React.MouseEvent) => {\n event.stopPropagation();\n\n if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n ref.current?.focus();\n } else {\n if (expandOnClick) {\n controller.toggleExpanded(node.value);\n }\n\n selectOnClick && controller.select(node.value);\n ref.current?.focus();\n }\n };\n\n const selected = controller.selectedState.includes(node.value);\n const elementProps = {\n ...getStyles('label'),\n onClick: handleNodeClick,\n 'data-selected': selected \|\| undefined,\n 'data-value': node.value,\n ...dragElementProps,\n };\n\n const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n return (\n <li\n {...getStyles('node', {\n style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n })}\n role=\"treeitem\"\n aria-selected={selected}\n data-value={node.value}\n data-selected={selected \|\| undefined}\n data-level={level}\n tabIndex={rootIndex === 0 ? 0 : -1}\n onKeyDown={handleKeyDown}\n ref={ref}\n >\n {typeof renderNode === 'function' ? (\n renderNode({\n node,\n level,\n selected,\n isRoot: level === 1,\n tree: controller,\n expanded: isExpanded,\n hasChildren,\n isLoading,\n loadError,\n elementProps,\n dragHandleProps,\n })\n ) : (\n <div {...elementProps}>{node.label}</div>\n )}\n\n {withLoadingIndicator && (\n <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n <li\n {...getStyles('node', {\n style: { '--label-offset': `calc(var(--level-offset) * ${level})` },\n })}\n >\n <div {...getStyles('label')}>\n <Loader size={16} style={{ marginInlineStart: 4 }} />\n </div>\n </li>\n </Box>\n )}\n\n {keepMounted && nested.length > 0 ? (\n <Activity mode={isExpanded ? 'visible' : 'hidden'}>\n <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n {nested}\n </Box>\n </Activity>\n ) : (\n isExpanded &&\n nested.length > 0 && (\n <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n {nested}\n </Box>\n )\n )}\n </li>\n );\n}\n\nTreeNode.displayName = '@mantine/core/TreeNode';\n"],"mappings":"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"}

package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs CHANGED Viewed

@@ -1,25 +1,30 @@
 "use client";
 //#region packages/@mantine/core/src/components/Tree/flatten-tree-data/flatten-tree-data.ts
-function flattenTreeDataTo(acc, data, expandedState, parent, level) {
+function flattenTreeDataTo(acc, data, expandedState, parent, level, ancestorIsLast) {
 	for (let i = 0; i < data.length; i++) {
 		const node = data[i];
+		const isLast = i === data.length - 1;
 		const hasLoadedChildren = Array.isArray(node.children);
 		const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
 		const hasChildren = hasLoadedChildren || hasAsyncChildren;
 		const expanded = expandedState[node.value] || false;
+		const linesPath = [];
+		for (let l = 2; l <= level; l++) if (l === level) linesPath.push(isLast ? "closing" : "continuing");
+		else linesPath.push(ancestorIsLast[l - 1] ? "none" : "continuing");
 		acc.push({
 			node,
 			level,
 			parent,
 			hasChildren,
-			expanded
+			expanded,
+			linesPath
 		});
-		if (expanded && hasLoadedChildren) flattenTreeDataTo(acc, node.children, expandedState, node.value, level + 1);
+		if (expanded && hasLoadedChildren) flattenTreeDataTo(acc, node.children, expandedState, node.value, level + 1, [...ancestorIsLast, isLast]);
 	}
 }
 function flattenTreeData(data, expandedState) {
 	const result = [];
-	flattenTreeDataTo(result, data, expandedState, null, 1);
+	flattenTreeDataTo(result, data, expandedState, null, 1, []);
 	return result;
 }
 //#endregion

package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"flatten-tree-data.mjs","names":[],"sources":["../../../../src/components/Tree/flatten-tree-data/flatten-tree-data.ts"],"sourcesContent":["import type { TreeNodeData } from '../Tree';\nimport type { TreeExpandedState } from '../use-tree';\n\nexport interface FlattenedTreeNodeData {\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\nfunction flattenTreeDataTo(\n acc: FlattenedTreeNodeData[],\n data: TreeNodeData[],\n expandedState: TreeExpandedState,\n parent: string \| null,\n level: number\n): void {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const hasLoadedChildren = Array.isArray(node.children);\n const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n const hasChildren = hasLoadedChildren \|\| hasAsyncChildren;\n const expanded = expandedState[node.value] \|\| false;\n\n acc.push({ node, level, parent, hasChildren, expanded });\n\n if (expanded && hasLoadedChildren) {\n flattenTreeDataTo(acc, node.children!, expandedState, node.value, level + 1);\n }\n }\n}\n\nexport function flattenTreeData(\n data: TreeNodeData[],\n expandedState: TreeExpandedState\n): FlattenedTreeNodeData[] {\n const result: FlattenedTreeNodeData[] = [];\n flattenTreeDataTo(result, data, expandedState, null, 1);\n return result;\n}\n"],"mappings":";;~~AAoBA~~,SAAS,kBACP,KACA,MACA,eACA,QACA,~~OACM~~;CACN,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,OAAO,KAAK;EAClB,MAAM,oBAAoB,MAAM,QAAQ,KAAK,QAAQ;EACrD,MAAM,mBAAmB,CAAC,CAAC,KAAK,eAAe,CAAC;EAChD,MAAM,cAAc,qBAAqB;EACzC,MAAM,WAAW,cAAc,KAAK,UAAU;EAE9C,IAAI,KAAK;GAAE;GAAM;GAAO;GAAQ;GAAa;~~EAAS~~,CAAC;~~EAEvD~~,IAAI,YAAY,mBACd,kBAAkB,KAAK,KAAK,UAAW,eAAe,KAAK,OAAO,QAAQ,CAAC;~~CAE/E~~;AACF;AAEA,SAAgB,gBACd,MACA,eACyB;CACzB,MAAM,SAAkC,CAAC;CACzC,kBAAkB,QAAQ,MAAM,eAAe,MAAM,CAAC;~~CACtD~~,OAAO;AACT"}
1	+ {"version":3,"file":"flatten-tree-data.mjs","names":[],"sources":["../../../../src/components/Tree/flatten-tree-data/flatten-tree-data.ts"],"sourcesContent":["import type { TreeNodeData } from '../Tree';\nimport type { TreeExpandedState } from '../use-tree';\n\nexport type FlatTreeLineState = 'continuing' \| 'closing' \| 'none';\n\nexport interface FlattenedTreeNodeData {\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 /* For each level from 2 to this node's `level`, indicates whether a connector\n * line should be drawn at that column for this row:\n * - `'continuing'`: full vertical line passes through this row\n * - `'closing'`: line ends at this row (truncated to the connector level)\n * - `'none'`: no line at this column for this row\n \n Index 0 corresponds to level 2, index 1 to level 3, etc.\n * Empty for level-1 (root) nodes. */\n linesPath: FlatTreeLineState[];\n}\n\nfunction flattenTreeDataTo(\n acc: FlattenedTreeNodeData[],\n data: TreeNodeData[],\n expandedState: TreeExpandedState,\n parent: string \| null,\n level: number,\n ancestorIsLast: boolean[]\n): void {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const isLast = i === data.length - 1;\n const hasLoadedChildren = Array.isArray(node.children);\n const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n const hasChildren = hasLoadedChildren \|\| hasAsyncChildren;\n const expanded = expandedState[node.value] \|\| false;\n\n const linesPath: FlatTreeLineState[] = [];\n for (let l = 2; l <= level; l++) {\n if (l === level) {\n linesPath.push(isLast ? 'closing' : 'continuing');\n } else {\n linesPath.push(ancestorIsLast[l - 1] ? 'none' : 'continuing');\n }\n }\n\n acc.push({ node, level, parent, hasChildren, expanded, linesPath });\n\n if (expanded && hasLoadedChildren) {\n flattenTreeDataTo(acc, node.children!, expandedState, node.value, level + 1, [\n ...ancestorIsLast,\n isLast,\n ]);\n }\n }\n}\n\nexport function flattenTreeData(\n data: TreeNodeData[],\n expandedState: TreeExpandedState\n): FlattenedTreeNodeData[] {\n const result: FlattenedTreeNodeData[] = [];\n flattenTreeDataTo(result, data, expandedState, null, 1, []);\n return result;\n}\n"],"mappings":";;AAgCA,SAAS,kBACP,KACA,MACA,eACA,QACA,OACA,gBACM;CACN,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,OAAO,KAAK;EAClB,MAAM,SAAS,MAAM,KAAK,SAAS;EACnC,MAAM,oBAAoB,MAAM,QAAQ,KAAK,QAAQ;EACrD,MAAM,mBAAmB,CAAC,CAAC,KAAK,eAAe,CAAC;EAChD,MAAM,cAAc,qBAAqB;EACzC,MAAM,WAAW,cAAc,KAAK,UAAU;EAE9C,MAAM,YAAiC,CAAC;EACxC,KAAK,IAAI,IAAI,GAAG,KAAK,OAAO,KAC1B,IAAI,MAAM,OACR,UAAU,KAAK,SAAS,YAAY,YAAY;OAEhD,UAAU,KAAK,eAAe,IAAI,KAAK,SAAS,YAAY;EAIhE,IAAI,KAAK;GAAE;GAAM;GAAO;GAAQ;GAAa;GAAU;EAAU,CAAC;EAElE,IAAI,YAAY,mBACd,kBAAkB,KAAK,KAAK,UAAW,eAAe,KAAK,OAAO,QAAQ,GAAG,CAC3E,GAAG,gBACH,MACF,CAAC;CAEL;AACF;AAEA,SAAgB,gBACd,MACA,eACyB;CACzB,MAAM,SAAkC,CAAC;CACzC,kBAAkB,QAAQ,MAAM,eAAe,MAAM,GAAG,CAAC,CAAC;CAC1D,OAAO;AACT"}

package/esm/components/Tree/use-tree-node-drag-drop.mjs CHANGED Viewed

@@ -14,11 +14,15 @@ function isDescendantOf(data, ancestorValue, descendantValue) {
 	}
 	return check(ancestor.children);
 }
-function getDragDropPosition(event, element, hasChildren) {
+function getDragDropPosition(event, element, hasChildren, isExpanded) {
 	const rect = element.getBoundingClientRect();
 	const y = event.clientY - rect.top;
 	const height = rect.height;
 	if (hasChildren) {
+		if (isExpanded) {
+			if (y < height * .5) return "before";
+			return "inside";
+		}
 		if (y < height * .25) return "before";
 		if (y > height * .75) return "after";
 		return "inside";
@@ -30,7 +34,7 @@ const EMPTY_DRAG_PROPS = {
 	elementProps: {},
 	dragHandleProps: void 0
 };
-function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, allowDrop, withDragHandle }) {
+function useTreeNodeDragDrop({ nodeValue, hasChildren, isExpanded, data, onDragDrop, dragStateRef, allowDrop, withDragHandle }) {
 	const [isDragHandleActive, setIsDragHandleActive] = useState(false);
 	useEffect(() => {
 		if (!withDragHandle || !isDragHandleActive) return;
@@ -46,6 +50,8 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		event.dataTransfer.setData("text/plain", nodeValue);
 		dragStateRef.current.draggedValue = nodeValue;
 		const target = event.currentTarget;
+		const treeItem = target.closest("[role=treeitem]");
+		if (treeItem) treeItem.setAttribute("data-dragging", "true");
 		requestAnimationFrame(() => {
 			target.setAttribute("data-dragging", "true");
 		});
@@ -55,7 +61,7 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		if (!draggedValue || draggedValue === nodeValue) return;
 		if (isDescendantOf(data, draggedValue, nodeValue)) return;
 		const target = event.currentTarget;
-		const position = getDragDropPosition(event, target, hasChildren);
+		const position = getDragDropPosition(event, target, hasChildren, isExpanded);
 		if (allowDrop && !allowDrop({
 			draggedNode: draggedValue,
 			targetNode: nodeValue,
@@ -101,7 +107,10 @@ function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragSta
 		dragStateRef.current.currentDropTarget = null;
 	};
 	const handleDragEnd = (event) => {
-		event.currentTarget.removeAttribute("data-dragging");
+		const target = event.currentTarget;
+		target.removeAttribute("data-dragging");
+		const treeItem = target.closest("[role=treeitem]");
+		if (treeItem) treeItem.removeAttribute("data-dragging");
 		const prevTarget = dragStateRef.current.currentDropTarget;
 		if (prevTarget) prevTarget.removeAttribute("data-drag-over");
 		dragStateRef.current.draggedValue = null;