@mantine/core 9.0.2 → 9.1.0

package/lib/components/Tabs/Tabs.context.d.ts

@@ -15,6 +15,7 @@ export interface TabsContextValue {
     radius: string | number | undefined;
     inverted: boolean | undefined;
     keepMounted: boolean | undefined;
+    keepMountedMode: 'activity' | 'display-none' | undefined;
     placement: 'right' | 'left' | undefined;
     unstyled: boolean | undefined;
     getStyles: GetStylesApi<TabsFactory>;

package/lib/components/Tabs/Tabs.d.ts

@@ -37,6 +37,8 @@ export interface TabsProps extends BoxProps, StylesApiProps<TabsFactory>, Elemen
     inverted?: boolean;
     /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true */
     keepMounted?: boolean;
+    /** Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' */
+    keepMountedMode?: 'activity' | 'display-none';
     /** If set, adjusts text color based on background color for `pills` variant */
     autoContrast?: boolean;
 }

package/lib/components/Tree/FlatTreeNode.d.ts

@@ -0,0 +1,31 @@
+import type { RenderNode, TreeNodeData } from './Tree';
+import type { TreeController } from './use-tree';
+export interface FlatTreeNodeProps {
+    /** Node data from tree data */
+    node: TreeNodeData;
+    /** Nesting level of the node, starts at 1 */
+    level: number;
+    /** Value of the parent node, `null` for root nodes */
+    parent: string | null;
+    /** Whether the node has children */
+    hasChildren: boolean;
+    /** Whether the node is expanded */
+    expanded: boolean;
+    /** Tree controller instance, return value of `useTree` hook */
+    tree: TreeController;
+    /** If set, tree node with children is expanded on click @default true */
+    expandOnClick?: boolean;
+    /** If set, tree node is selected on click @default false */
+    selectOnClick?: boolean;
+    /** If set, tree node with children is expanded on space key press @default true */
+    expandOnSpace?: boolean;
+    /** If set, tree node is checked on space key press @default false */
+    checkOnSpace?: boolean;
+    /** A function to render tree node label */
+    renderNode?: RenderNode;
+    /** Style to apply to the root element, used for virtualizer positioning */
+    style?: React.CSSProperties;
+    /** Tab index for the node */
+    tabIndex?: number;
+}
+export declare const FlatTreeNode: import("react").MemoExoticComponent<({ node, level, parent, hasChildren, expanded, tree, expandOnClick, selectOnClick, expandOnSpace, checkOnSpace, renderNode, style, tabIndex, }: FlatTreeNodeProps) => import("react/jsx-runtime").JSX.Element>;

package/lib/components/Tree/Tree.d.ts

@@ -1,20 +1,26 @@
 import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
 import { TreeController } from './use-tree';
 export interface TreeNodeData {
     label: React.ReactNode;
     value: string;
     nodeProps?: Record<string, any>;
     children?: TreeNodeData[];
+    hasChildren?: boolean;
 }
 export interface RenderTreeNodePayload {
     /** Node level in the tree */
     level: number;
     /** `true` if the node is expanded, applicable only for nodes with `children` */
     expanded: boolean;
-    /** `true` if the node has non-empty `children` array */
+    /** `true` if the node has non-empty `children` array or `hasChildren` is set to `true` in the data */
     hasChildren: boolean;
     /** `true` if the node is selected */
     selected: boolean;
+    /** `true` if the node's children are currently being loaded */
+    isLoading: boolean;
+    /** Error from the last failed load attempt, or `null` */
+    loadError: Error | null;
     /** Node data from the `data` prop of `Tree` */
     node: TreeNodeData;
     /** Tree controller instance, return value of `useTree` hook */
@@ -26,6 +32,12 @@ export interface RenderTreeNodePayload {
         onClick: (event: React.MouseEvent) => void;
         'data-selected': boolean | undefined;
         'data-value': string;
+        draggable?: boolean;
+        onDragStart?: (event: React.DragEvent) => void;
+        onDragOver?: (event: React.DragEvent) => void;
+        onDragLeave?: (event: React.DragEvent) => void;
+        onDrop?: (event: React.DragEvent) => void;
+        onDragEnd?: (event: React.DragEvent) => void;
     };
 }
 export type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;
@@ -33,6 +45,10 @@ export type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';
 export type TreeCssVariables = {
     root: '--level-offset';
 };
+export interface TreeDragState {
+    draggedValue: string | null;
+    currentDropTarget: HTMLElement | null;
+}
 export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, ElementProps<'ul'> {
     /** Data used to render nodes */
     data: TreeNodeData[];
@@ -56,6 +72,10 @@ export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, Elemen
     allowRangeSelection?: boolean;
     /** If set, subtree content is kept mounted when collapsed. React 19 `Activity` is used to preserve state. @default false */
     keepMounted?: boolean;
+    /** Called when a node is dropped on another node, enables drag-and-drop when provided */
+    onDragDrop?: (payload: TreeDragDropPayload) => void;
+    /** If set, connecting lines are rendered showing parent-child relationships @default false */
+    withLines?: boolean;
 }
 export type TreeFactory = Factory<{
     props: TreeProps;

package/lib/components/Tree/TreeNode.d.ts

@@ -1,5 +1,6 @@
 import { GetStylesApi } from '../../core';
-import type { RenderNode, TreeFactory, TreeNodeData } from './Tree';
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';
 import type { TreeController } from './use-tree';
 interface TreeNodeProps {
     node: TreeNodeData;
@@ -16,8 +17,11 @@ interface TreeNodeProps {
     expandOnSpace: boolean | undefined;
     checkOnSpace: boolean | undefined;
     keepMounted: boolean | undefined;
+    onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
+    dragStateRef: React.RefObject<TreeDragState>;
+    data: TreeNodeData[];
 }
-export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, dragStateRef, data, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeNode {
     var displayName: string;
 }

package/lib/components/Tree/filter-tree-data/filter-tree-data.d.ts

@@ -0,0 +1,4 @@
+import type { TreeNodeData } from '../Tree';
+export type TreeNodeFilter = (query: string, node: TreeNodeData) => boolean;
+export declare function defaultTreeNodeFilter(query: string, node: TreeNodeData): boolean;
+export declare function filterTreeData(data: TreeNodeData[], query: string, filter?: TreeNodeFilter): TreeNodeData[];

package/lib/components/Tree/flatten-tree-data/flatten-tree-data.d.ts

@@ -0,0 +1,15 @@
+import type { TreeNodeData } from '../Tree';
+import type { TreeExpandedState } from '../use-tree';
+export interface FlattenedTreeNodeData {
+    /** Node data from tree data */
+    node: TreeNodeData;
+    /** Nesting level of the node, starts at 1 */
+    level: number;
+    /** Value of the parent node, `null` for root nodes */
+    parent: string | null;
+    /** Whether the node has children */
+    hasChildren: boolean;
+    /** Whether the node is expanded */
+    expanded: boolean;
+}
+export declare function flattenTreeData(data: TreeNodeData[], expandedState: TreeExpandedState): FlattenedTreeNodeData[];

package/lib/components/Tree/index.d.ts

@@ -3,4 +3,13 @@ import type { RenderTreeNodePayload, TreeCssVariables, TreeFactory, TreeNodeData
 import type { UseTreeInput, UseTreeReturnType } from './use-tree';
 export { Tree } from './Tree';
 export { useTree, getTreeExpandedState } from './use-tree';
+export { mergeAsyncChildren } from './merge-async-children/merge-async-children';
+export { moveTreeNode } from './move-tree-node/move-tree-node';
+export { filterTreeData, defaultTreeNodeFilter } from './filter-tree-data/filter-tree-data';
+export { flattenTreeData } from './flatten-tree-data/flatten-tree-data';
+export { FlatTreeNode } from './FlatTreeNode';
 export type { TreeProps, TreeStylesNames, TreeFactory, TreeCssVariables, TreeNodeData, RenderTreeNodePayload, UseTreeInput, UseTreeReturnType, CheckedNodeStatus, };
+export type { TreeNodeFilter } from './filter-tree-data/filter-tree-data';
+export type { TreeDragDropPosition, TreeDragDropPayload } from './move-tree-node/move-tree-node';
+export type { FlattenedTreeNodeData } from './flatten-tree-data/flatten-tree-data';
+export type { FlatTreeNodeProps } from './FlatTreeNode';

package/lib/components/Tree/merge-async-children/merge-async-children.d.ts

@@ -0,0 +1,2 @@
+import type { TreeNodeData } from '../Tree';
+export declare function mergeAsyncChildren(data: TreeNodeData[], parentValue: string, children: TreeNodeData[]): TreeNodeData[];

package/lib/components/Tree/move-tree-node/move-tree-node.d.ts

@@ -0,0 +1,11 @@
+import type { TreeNodeData } from '../Tree';
+export type TreeDragDropPosition = 'before' | 'after' | 'inside';
+export interface TreeDragDropPayload {
+    /** Value of the dragged node */
+    draggedNode: string;
+    /** Value of the target node */
+    targetNode: string;
+    /** Position relative to the target node */
+    position: TreeDragDropPosition;
+}
+export declare function moveTreeNode(data: TreeNodeData[], payload: TreeDragDropPayload): TreeNodeData[];

package/lib/components/Tree/use-tree-node-drag-drop.d.ts

@@ -0,0 +1,18 @@
+import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeDragState, TreeNodeData } from './Tree';
+interface UseTreeNodeDragDropInput {
+    nodeValue: string;
+    hasChildren: boolean;
+    data: TreeNodeData[];
+    onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
+    dragStateRef: React.RefObject<TreeDragState>;
+}
+export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, }: UseTreeNodeDragDropInput): Record<string, never> | {
+    draggable: true;
+    onDragStart: (event: React.DragEvent) => void;
+    onDragOver: (event: React.DragEvent) => void;
+    onDragLeave: (event: React.DragEvent) => void;
+    onDrop: (event: React.DragEvent) => void;
+    onDragEnd: (event: React.DragEvent) => void;
+};
+export {};

package/lib/components/Tree/use-tree.d.ts

@@ -27,8 +27,18 @@ export interface UseTreeInput {
     onNodeExpand?: (value: string) => void;
     /** Called with the node value when it is collapsed */
     onNodeCollapse?: (value: string) => void;
+    /** Called when a node with `hasChildren: true` is expanded for the first time.
+     * The callback should update the tree data with loaded children.
+     */
+    onLoadChildren?: (nodeValue: string) => Promise<void>;
+    /** When `true`, checking a parent does not affect children and vice versa.
+     * Each node's checked state is fully independent. @default false
+     */
+    checkStrictly?: boolean;
 }
 export interface UseTreeReturnType {
+    /** When `true`, each node's checked state is independent (no parent-child cascading) */
+    checkStrictly: boolean;
     /** Determines whether multiple node can be selected at a time */
     multiple: boolean;
     /** A record of `node.value` and boolean values that represent nodes expanded state */
@@ -81,6 +91,14 @@ export interface UseTreeReturnType {
     isNodeChecked: (value: string) => boolean;
     /** Returns `true` if node with provided value is indeterminate */
     isNodeIndeterminate: (value: string) => boolean;
+    /** Returns `true` if the node's children are currently being loaded */
+    isNodeLoading: (value: string) => boolean;
+    /** Returns the error from the last failed load attempt for the given node, or `null` */
+    getNodeLoadError: (value: string) => Error | null;
+    /** Programmatically triggers loading of a node's children */
+    loadNode: (value: string) => Promise<void>;
+    /** Clears the loaded cache for a node, causing it to re-fetch on next expand */
+    invalidateNode: (value: string) => void;
 }
-export declare function useTree({ initialSelectedState, expandedState, initialCheckedState, checkedState, initialExpandedState, selectedState, multiple, onNodeCollapse, onNodeExpand, onCheckedStateChange, onSelectedStateChange, onExpandedStateChange, }?: UseTreeInput): UseTreeReturnType;
+export declare function useTree({ initialSelectedState, expandedState, initialCheckedState, checkedState, initialExpandedState, selectedState, multiple, onNodeCollapse, onNodeExpand, onCheckedStateChange, onSelectedStateChange, onExpandedStateChange, onLoadChildren, checkStrictly, }?: UseTreeInput): UseTreeReturnType;
 export type TreeController = ReturnType<typeof useTree>;

package/lib/components/index.d.ts

@@ -60,6 +60,7 @@ export * from './List';
 export * from './LoadingOverlay';
 export * from './Mark';
 export * from './Marquee';
+export * from './MaskInput';
 export * from './Menu';
 export * from './Modal';
 export * from './MultiSelect';

package/lib/core/InlineStyles/InlineStyles.d.ts

@@ -1,4 +1,5 @@
 import { InlineStylesInput } from './styles-to-string/styles-to-string';
 export interface InlineStylesProps extends InlineStylesInput, Omit<React.ComponentProps<'style'>, keyof InlineStylesInput> {
+    deduplicate?: boolean;
 }
-export declare function InlineStyles(props: InlineStylesInput): import("react/jsx-runtime").JSX.Element;
+export declare function InlineStyles({ deduplicate, ...props }: InlineStylesProps): import("react/jsx-runtime").JSX.Element;

package/lib/core/InlineStyles/hash-styles.d.ts

@@ -0,0 +1,2 @@
+import type { InlineStylesMediaQuery } from './styles-to-string/styles-to-string';
+export declare function hashStyleProps(styles: React.CSSProperties | undefined, media: InlineStylesMediaQuery[] | undefined): string;

package/lib/core/InlineStyles/index.d.ts

@@ -1,4 +1,5 @@
 export { InlineStyles } from './InlineStyles';
+export { hashStyleProps } from './hash-styles';
 export { stylesToString } from './styles-to-string/styles-to-string';
 export type { InlineStylesInput, InlineStylesMediaQuery, } from './styles-to-string/styles-to-string';
 export type { InlineStylesProps } from './InlineStyles';

package/lib/core/MantineProvider/Mantine.context.d.ts

@@ -17,6 +17,7 @@ interface MantineContextValue {
     headless?: boolean;
     stylesTransform?: MantineStylesTransform;
     env?: 'default' | 'test';
+    deduplicateInlineStyles?: boolean;
 }
 export declare const MantineContext: import("react").Context<MantineContextValue | null>;
 export declare function useMantineContext(): MantineContextValue;
@@ -28,4 +29,5 @@ export declare function useMantineIsHeadless(): boolean | undefined;
 export declare function useMantineSxTransform(): (() => (sx: any) => string) | undefined;
 export declare function useMantineStylesTransform(): (() => (styles: any, payload: any) => Record<string, string>) | undefined;
 export declare function useMantineEnv(): "default" | "test";
+export declare function useMantineDeduplicateInlineStyles(): boolean | undefined;
 export {};

package/lib/core/MantineProvider/MantineProvider.d.ts

@@ -34,12 +34,14 @@ export interface MantineProviderProps {
     withGlobalClasses?: boolean;
     /** An object to transform `styles` and `sx` props into css classes, can be used with CSS-in-JS libraries */
     stylesTransform?: MantineStylesTransform;
+    /** Determines whether inline styles with identical content should be deduplicated using React 19 style hoisting. When enabled, components with the same responsive style props share a single `<style />` tag instead of each generating their own. @default false */
+    deduplicateInlineStyles?: boolean;
     /** Your application */
     children?: React.ReactNode;
     /** Environment at which the provider is used, `'test'` environment disables all transitions and portals */
     env?: 'default' | 'test';
 }
-export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function MantineProvider({ theme, children, getStyleNonce, withStaticClasses, withGlobalClasses, deduplicateCssVariables, withCssVariables, cssVariablesSelector, classNamesPrefix, colorSchemeManager, defaultColorScheme, getRootElement, cssVariablesResolver, forceColorScheme, stylesTransform, env, deduplicateInlineStyles, }: MantineProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MantineProvider {
     var displayName: string;
 }

package/lib/core/MantineProvider/index.d.ts

@@ -6,7 +6,7 @@ export * from './ColorSchemeScript';
 export { DEFAULT_THEME } from './default-theme';
 export { validateMantineTheme, mergeMantineTheme } from './merge-mantine-theme';
 export { MantineProvider, HeadlessMantineProvider } from './MantineProvider';
-export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, useMantineSxTransform, useMantineStylesTransform, useMantineEnv, } from './Mantine.context';
+export { MantineContext, useMantineContext, useMantineClassNamesPrefix, useMantineStyleNonce, useMantineCssVariablesResolver, useMantineWithStaticClasses, useMantineIsHeadless, useMantineSxTransform, useMantineStylesTransform, useMantineEnv, useMantineDeduplicateInlineStyles, } from './Mantine.context';
 export { useMantineTheme, useSafeMantineTheme, MantineThemeContext, MantineThemeProvider, } from './MantineThemeProvider';
 export type { MantineThemeProviderProps } from './MantineThemeProvider';
 export type { MantineProviderProps, HeadlessMantineProviderProps } from './MantineProvider';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.0.2",
+  "version": "9.1.0",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.0.2",
+    "@mantine/hooks": "9.1.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
@@ -52,12 +52,12 @@
     "clsx": "^2.1.1",
     "react-number-format": "^5.4.5",
     "react-remove-scroll": "^2.7.2",
-    "type-fest": "^5.5.0"
+    "type-fest": "^5.6.0"
   },
   "devDependencies": {
     "@mantine-tests/core": "workspace:*",
     "@mantine/hooks": "workspace:*",
-    "react": "19.2.4",
-    "react-dom": "19.2.4"
+    "react": "19.2.5",
+    "react-dom": "19.2.5"
   }
 }

package/styles/Tree.css

@@ -1,5 +1,7 @@
 .m_f698e191 {
   --level-offset: var(--mantine-spacing-lg);
+  --tree-line-width: calc(0.0625rem * var(--mantine-scale));
+  --tree-line-color: var(--mantine-color-default-border);
   margin: 0;
   padding: 0;
   user-select: none;
@@ -24,6 +26,7 @@
     }
 
 .m_dc283425 {
+  position: relative;
   padding-inline-start: var(--label-offset);
 }
 
@@ -34,3 +37,66 @@
 :where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) {
       background-color: var(--mantine-color-dark-5);
 }
+
+.m_dc283425:where([data-dragging]) {
+    opacity: 0.4;
+  }
+
+.m_dc283425:where([data-drag-over='before'])::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: 2px;
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: 2px;
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='inside']) {
+    background-color: var(--mantine-primary-color-light);
+  }
+
+:where([data-with-lines]) .m_f6970eb1 {
+    position: relative;
+  }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::before {
+      content: '';
+      position: absolute;
+      top: calc(0.75rem * var(--mantine-scale));
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: calc(var(--level-offset) / 2);
+      height: 0;
+      border-top: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: 0;
+      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
+      bottom: auto;
+      height: calc(0.75rem * var(--mantine-scale));
+    }

package/styles/Tree.layer.css

@@ -1,5 +1,7 @@
 @layer mantine {.m_f698e191 {
   --level-offset: var(--mantine-spacing-lg);
+  --tree-line-width: calc(0.0625rem * var(--mantine-scale));
+  --tree-line-color: var(--mantine-color-default-border);
   margin: 0;
   padding: 0;
   user-select: none;
@@ -24,6 +26,7 @@
     }
 
 .m_dc283425 {
+  position: relative;
   padding-inline-start: var(--label-offset);
 }
 
@@ -34,4 +37,67 @@
 :where([data-mantine-color-scheme='dark']) .m_dc283425:where([data-selected]) {
       background-color: var(--mantine-color-dark-5);
 }
+
+.m_dc283425:where([data-dragging]) {
+    opacity: 0.4;
+  }
+
+.m_dc283425:where([data-drag-over='before'])::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: 2px;
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    bottom: -1px;
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: 2px;
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='inside']) {
+    background-color: var(--mantine-primary-color-light);
+  }
+
+:where([data-with-lines]) .m_f6970eb1 {
+    position: relative;
+  }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::before {
+      content: '';
+      position: absolute;
+      top: calc(0.75rem * var(--mantine-scale));
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: calc(var(--level-offset) / 2);
+      height: 0;
+      border-top: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: 0;
+      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
+      bottom: auto;
+      height: calc(0.75rem * var(--mantine-scale));
+    }
 }

package/styles.css

@@ -7972,6 +7972,8 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
 
 .m_f698e191 {
   --level-offset: var(--mantine-spacing-lg);
+  --tree-line-width: calc(0.0625rem * var(--mantine-scale));
+  --tree-line-color: var(--mantine-color-default-border);
   margin: 0;
   padding: 0;
   user-select: none;
@@ -7996,6 +7998,7 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
     }
 
 .m_dc283425 {
+  position: relative;
   padding-inline-start: var(--label-offset);
 }
 
@@ -8007,6 +8010,69 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
       background-color: var(--mantine-color-dark-5);
 }
 
+.m_dc283425:where([data-dragging]) {
+    opacity: 0.4;
+  }
+
+.m_dc283425:where([data-drag-over='before'])::before {
+    content: '';
+    position: absolute;
+    top: calc(-0.0625rem * var(--mantine-scale));
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: calc(0.125rem * var(--mantine-scale));
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='after'])::after {
+    content: '';
+    position: absolute;
+    bottom: calc(-0.0625rem * var(--mantine-scale));
+    inset-inline-start: var(--label-offset, 0);
+    inset-inline-end: 0;
+    height: calc(0.125rem * var(--mantine-scale));
+    background-color: var(--mantine-primary-color-filled);
+    pointer-events: none;
+    z-index: 1;
+  }
+
+.m_dc283425:where([data-drag-over='inside']) {
+    background-color: var(--mantine-primary-color-light);
+  }
+
+:where([data-with-lines]) .m_f6970eb1 {
+    position: relative;
+  }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::before {
+      content: '';
+      position: absolute;
+      top: calc(0.75rem * var(--mantine-scale));
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: calc(var(--level-offset) / 2);
+      height: 0;
+      border-top: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);
+      width: 0;
+      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);
+      pointer-events: none;
+    }
+
+:where([data-with-lines]) .m_75f3ecf > .m_f6970eb1:last-child::after {
+      bottom: auto;
+      height: calc(0.75rem * var(--mantine-scale));
+    }
+
 .m_d08caa0 :first-child {
     margin-top: 0;
   }