@mantine/core 9.0.1 → 9.1.0

package/cjs/components/Tabs/Tabs.cjs

@@ -21,6 +21,7 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const VALUE_ERROR = "Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value";
 const defaultProps = {
 	keepMounted: true,
+	keepMountedMode: "activity",
 	orientation: "horizontal",
 	loop: true,
 	activateTabWithKeyboard: true,
@@ -38,7 +39,7 @@ const varsResolver = require_create_vars_resolver.createVarsResolver((theme, { r
 } }));
 const Tabs = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Tabs", defaultProps, _props);
-	const { defaultValue, value, onChange, orientation, children, loop, id, activateTabWithKeyboard, allowTabDeactivation, variant, color, radius, inverted, placement, keepMounted, classNames, styles, unstyled, className, style, vars, autoContrast, mod, attributes, ...others } = props;
+	const { defaultValue, value, onChange, orientation, children, loop, id, activateTabWithKeyboard, allowTabDeactivation, variant, color, radius, inverted, placement, keepMounted, keepMountedMode, classNames, styles, unstyled, className, style, vars, autoContrast, mod, attributes, ...others } = props;
 	const uid = (0, _mantine_hooks.useId)(id);
 	const [currentTab, setCurrentTab] = (0, _mantine_hooks.useUncontrolled)({
 		value,
@@ -76,6 +77,7 @@ const Tabs = require_factory.factory((_props) => {
 			radius,
 			inverted,
 			keepMounted,
+			keepMountedMode,
 			unstyled,
 			getStyles
 		},

package/cjs/components/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","names":["createVarsResolver","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","TabsProvider","getSafeId","Box","classes","TabsTab","TabsPanel","TabsList"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSafeId,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n  | 'root'\n  | TabsListStylesNames\n  | TabsPanelStylesNames\n  | TabsTabStylesNames;\n\nexport type TabsVariant = 'default' | 'outline' | 'pills';\nexport type TabsCssVariables = {\n  root: '--tabs-color' | '--tabs-radius';\n};\n\nexport interface TabsProps\n  extends\n    BoxProps,\n    StylesApiProps<TabsFactory>,\n    ElementProps<'div', 'defaultValue' | 'value' | 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: string | null;\n\n  /** Controlled component value */\n  value?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Tabs orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' */\n  placement?: 'left' | 'right';\n\n  /** Base id, used to generate ids to connect labels with controls, generated randomly by default */\n  id?: string;\n\n  /** If set, arrow key presses loop though items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** If set, tab is activated with arrow key press @default true */\n  activateTabWithKeyboard?: boolean;\n\n  /** If set, tab can be deactivated @default false */\n  allowTabDeactivation?: boolean;\n\n  /** Tabs content */\n  children?: React.ReactNode;\n\n  /** Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Determines whether tabs should have inverted styles @default false */\n  inverted?: boolean;\n\n  /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true */\n  keepMounted?: boolean;\n\n  /** If set, adjusts text color based on background color for `pills` variant */\n  autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n  props: TabsProps;\n  ref: HTMLDivElement;\n  variant: TabsVariant;\n  stylesNames: TabsStylesNames;\n  vars: TabsCssVariables;\n  staticComponents: {\n    Tab: typeof TabsTab;\n    Panel: typeof TabsPanel;\n    List: typeof TabsList;\n  };\n}>;\n\nconst VALUE_ERROR =\n  'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n  keepMounted: true,\n  orientation: 'horizontal',\n  loop: true,\n  activateTabWithKeyboard: true,\n  variant: 'default',\n  placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n  root: {\n    '--tabs-radius': getRadius(radius),\n    '--tabs-color': getThemeColor(color, theme),\n    '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n      ? getContrastColor({ color, theme, autoContrast })\n      : undefined,\n  },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n  const props = useProps('Tabs', defaultProps, _props);\n  const {\n    defaultValue,\n    value,\n    onChange,\n    orientation,\n    children,\n    loop,\n    id,\n    activateTabWithKeyboard,\n    allowTabDeactivation,\n    variant,\n    color,\n    radius,\n    inverted,\n    placement,\n    keepMounted,\n    classNames,\n    styles,\n    unstyled,\n    className,\n    style,\n    vars,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n\n  const [currentTab, setCurrentTab] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const getStyles = useStyles<TabsFactory>({\n    name: 'Tabs',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <TabsProvider\n      value={{\n        placement,\n        value: currentTab,\n        orientation,\n        id: uid,\n        loop,\n        activateTabWithKeyboard,\n        getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n        getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n        onChange: setCurrentTab,\n        allowTabDeactivation,\n        variant,\n        color,\n        radius,\n        inverted,\n        keepMounted,\n        unstyled,\n        getStyles,\n      }}\n    >\n      <Box\n        id={uid}\n        variant={variant}\n        mod={[\n          {\n            orientation,\n            inverted: orientation === 'horizontal' && inverted,\n            placement: orientation === 'vertical' && placement,\n          },\n          mod,\n        ]}\n        {...getStyles('root')}\n        {...others}\n      >\n        {children}\n      </Box>\n    </TabsProvider>\n  );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n  export type Props = TabsProps;\n  export type StylesNames = TabsStylesNames;\n  export type CssVariables = TabsCssVariables;\n  export type Factory = TabsFactory;\n  export type Variant = TabsVariant;\n  export type ContextValue = TabsContextValue;\n\n  export namespace Tab {\n    export type Props = TabsTabProps;\n    export type StylesNames = TabsTabStylesNames;\n  }\n\n  export namespace Panel {\n    export type Props = TabsPanelProps;\n    export type StylesNames = TabsPanelStylesNames;\n  }\n\n  export namespace List {\n    export type Props = TabsListProps;\n    export type StylesNames = TabsListStylesNames;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmGA,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;CACZ;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiBC,iBAAAA,UAAU,OAAO;CAClC,gBAAgBC,wBAAAA,cAAc,OAAO,MAAM;CAC3C,qBAAqBC,gCAAAA,qBAAqB,cAAc,MAAM,GAC1DC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;EAAc,CAAC,GAChD,KAAA;CACL,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,OAAY,GAAG;CAErB,MAAM,CAAC,YAAY,kBAAA,GAAA,eAAA,iBAAiC;EAClD;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAUC,oBAAAA,UAAU,GAAG,IAAI,OAAO,YAAY;GAC9C,YAAYA,oBAAAA,UAAU,GAAG,IAAI,SAAS,YAAY;GAClD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;IAC1C,EACD,IACD;GACD,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH;GACG,CAAA;EACO,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAMC,gBAAAA;AACX,KAAK,QAAQC,kBAAAA;AACb,KAAK,OAAOC,iBAAAA"}
+{"version":3,"file":"Tabs.cjs","names":["createVarsResolver","getRadius","getThemeColor","getAutoContrastValue","getContrastColor","factory","useProps","useStyles","TabsProvider","getSafeId","Box","classes","TabsTab","TabsPanel","TabsList"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getRadius,\n  getSafeId,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n  | 'root'\n  | TabsListStylesNames\n  | TabsPanelStylesNames\n  | TabsTabStylesNames;\n\nexport type TabsVariant = 'default' | 'outline' | 'pills';\nexport type TabsCssVariables = {\n  root: '--tabs-color' | '--tabs-radius';\n};\n\nexport interface TabsProps\n  extends\n    BoxProps,\n    StylesApiProps<TabsFactory>,\n    ElementProps<'div', 'defaultValue' | 'value' | 'onChange'> {\n  /** Uncontrolled component default value */\n  defaultValue?: string | null;\n\n  /** Controlled component value */\n  value?: string | null;\n\n  /** Called when value changes */\n  onChange?: (value: string | null) => void;\n\n  /** Tabs orientation @default 'horizontal' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' */\n  placement?: 'left' | 'right';\n\n  /** Base id, used to generate ids to connect labels with controls, generated randomly by default */\n  id?: string;\n\n  /** If set, arrow key presses loop though items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** If set, tab is activated with arrow key press @default true */\n  activateTabWithKeyboard?: boolean;\n\n  /** If set, tab can be deactivated @default false */\n  allowTabDeactivation?: boolean;\n\n  /** Tabs content */\n  children?: React.ReactNode;\n\n  /** Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Determines whether tabs should have inverted styles @default false */\n  inverted?: boolean;\n\n  /** If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true */\n  keepMounted?: boolean;\n\n  /** 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' */\n  keepMountedMode?: 'activity' | 'display-none';\n\n  /** If set, adjusts text color based on background color for `pills` variant */\n  autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n  props: TabsProps;\n  ref: HTMLDivElement;\n  variant: TabsVariant;\n  stylesNames: TabsStylesNames;\n  vars: TabsCssVariables;\n  staticComponents: {\n    Tab: typeof TabsTab;\n    Panel: typeof TabsPanel;\n    List: typeof TabsList;\n  };\n}>;\n\nconst VALUE_ERROR =\n  'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n  keepMounted: true,\n  keepMountedMode: 'activity',\n  orientation: 'horizontal',\n  loop: true,\n  activateTabWithKeyboard: true,\n  variant: 'default',\n  placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n  root: {\n    '--tabs-radius': getRadius(radius),\n    '--tabs-color': getThemeColor(color, theme),\n    '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n      ? getContrastColor({ color, theme, autoContrast })\n      : undefined,\n  },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n  const props = useProps('Tabs', defaultProps, _props);\n  const {\n    defaultValue,\n    value,\n    onChange,\n    orientation,\n    children,\n    loop,\n    id,\n    activateTabWithKeyboard,\n    allowTabDeactivation,\n    variant,\n    color,\n    radius,\n    inverted,\n    placement,\n    keepMounted,\n    keepMountedMode,\n    classNames,\n    styles,\n    unstyled,\n    className,\n    style,\n    vars,\n    autoContrast,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n\n  const [currentTab, setCurrentTab] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: null,\n    onChange,\n  });\n\n  const getStyles = useStyles<TabsFactory>({\n    name: 'Tabs',\n    props,\n    classes,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <TabsProvider\n      value={{\n        placement,\n        value: currentTab,\n        orientation,\n        id: uid,\n        loop,\n        activateTabWithKeyboard,\n        getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n        getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n        onChange: setCurrentTab,\n        allowTabDeactivation,\n        variant,\n        color,\n        radius,\n        inverted,\n        keepMounted,\n        keepMountedMode,\n        unstyled,\n        getStyles,\n      }}\n    >\n      <Box\n        id={uid}\n        variant={variant}\n        mod={[\n          {\n            orientation,\n            inverted: orientation === 'horizontal' && inverted,\n            placement: orientation === 'vertical' && placement,\n          },\n          mod,\n        ]}\n        {...getStyles('root')}\n        {...others}\n      >\n        {children}\n      </Box>\n    </TabsProvider>\n  );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n  export type Props = TabsProps;\n  export type StylesNames = TabsStylesNames;\n  export type CssVariables = TabsCssVariables;\n  export type Factory = TabsFactory;\n  export type Variant = TabsVariant;\n  export type ContextValue = TabsContextValue;\n\n  export namespace Tab {\n    export type Props = TabsTabProps;\n    export type StylesNames = TabsTabStylesNames;\n  }\n\n  export namespace Panel {\n    export type Props = TabsPanelProps;\n    export type StylesNames = TabsPanelStylesNames;\n  }\n\n  export namespace List {\n    export type Props = TabsListProps;\n    export type StylesNames = TabsListStylesNames;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAsGA,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;CACZ;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiBC,iBAAAA,UAAU,OAAO;CAClC,gBAAgBC,wBAAAA,cAAc,OAAO,MAAM;CAC3C,qBAAqBC,gCAAAA,qBAAqB,cAAc,MAAM,GAC1DC,2BAAAA,iBAAiB;EAAE;EAAO;EAAO;EAAc,CAAC,GAChD,KAAA;CACL,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,iBACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,OAAA,GAAA,eAAA,OAAY,GAAG;CAErB,MAAM,CAAC,YAAY,kBAAA,GAAA,eAAA,iBAAiC;EAClD;EACA;EACA,YAAY;EACZ;EACD,CAAC;CAEF,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN;EACA,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,qBAAAA,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAUC,oBAAAA,UAAU,GAAG,IAAI,OAAO,YAAY;GAC9C,YAAYA,oBAAAA,UAAU,GAAG,IAAI,SAAS,YAAY;GAClD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;YAED,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;IAC1C,EACD,IACD;GACD,GAAI,UAAU,OAAO;GACrB,GAAI;GAEH;GACG,CAAA;EACO,CAAA;EAEjB;AAEF,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAMC,gBAAAA;AACX,KAAK,QAAQC,kBAAAA;AACb,KAAK,OAAOC,iBAAAA"}

package/cjs/components/Tabs/Tabs.context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TabsFactory } from './Tabs';\n\nexport interface TabsContextValue {\n  id: string;\n  value: string | null;\n  orientation: 'horizontal' | 'vertical' | undefined;\n  loop: boolean | undefined;\n  activateTabWithKeyboard: boolean | undefined;\n  allowTabDeactivation: boolean | undefined;\n  onChange: (value: string | null) => void;\n  getTabId: (value: string) => string;\n  getPanelId: (value: string) => string;\n  variant: string | undefined;\n  color: string | undefined;\n  radius: string | number | undefined;\n  inverted: boolean | undefined;\n  keepMounted: boolean | undefined;\n  placement: 'right' | 'left' | undefined;\n  unstyled: boolean | undefined;\n  getStyles: GetStylesApi<TabsFactory>;\n}\n\nexport const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>(\n  'Tabs component was not found in the tree'\n);\n"],"mappings":";;AAuBA,MAAa,CAAC,cAAc,0FAAkBA,kBAC5C,2CACD"}
+{"version":3,"file":"Tabs.context.cjs","names":["createSafeContext"],"sources":["../../../src/components/Tabs/Tabs.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { TabsFactory } from './Tabs';\n\nexport interface TabsContextValue {\n  id: string;\n  value: string | null;\n  orientation: 'horizontal' | 'vertical' | undefined;\n  loop: boolean | undefined;\n  activateTabWithKeyboard: boolean | undefined;\n  allowTabDeactivation: boolean | undefined;\n  onChange: (value: string | null) => void;\n  getTabId: (value: string) => string;\n  getPanelId: (value: string) => string;\n  variant: string | undefined;\n  color: string | undefined;\n  radius: string | number | undefined;\n  inverted: boolean | undefined;\n  keepMounted: boolean | undefined;\n  keepMountedMode: 'activity' | 'display-none' | undefined;\n  placement: 'right' | 'left' | undefined;\n  unstyled: boolean | undefined;\n  getStyles: GetStylesApi<TabsFactory>;\n}\n\nexport const [TabsProvider, useTabsContext] = createSafeContext<TabsContextValue>(\n  'Tabs component was not found in the tree'\n);\n"],"mappings":";;AAwBA,MAAa,CAAC,cAAc,0FAAkBA,kBAC5C,2CACD"}

package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs

@@ -16,7 +16,8 @@ const TabsPanel = require_factory.factory((_props) => {
 	const ctx = require_Tabs_context.useTabsContext();
 	const active = ctx.value === value;
 	const shouldKeepMounted = ctx.keepMounted || keepMounted;
-	const content = shouldKeepMounted && env !== "test" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
+	const useActivity = ctx.keepMountedMode !== "display-none";
+	const content = shouldKeepMounted && useActivity && env !== "test" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
 		mode: active ? "visible" : "hidden",
 		children
 	}) : shouldKeepMounted ? children : active ? children : null;

package/cjs/components/Tabs/TabsPanel/TabsPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabsPanel.cjs","names":["factory","useProps","useMantineEnv","useTabsContext","Activity","Box","classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useMantineEnv,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n  extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component */\n  keepMounted?: boolean;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n  props: TabsPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsPanelStylesNames;\n  compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n  const props = useProps('TabsPanel', null, _props);\n  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n    props;\n\n  const env = useMantineEnv();\n  const ctx = useTabsContext();\n\n  const active = ctx.value === value;\n  const shouldKeepMounted = ctx.keepMounted || keepMounted;\n  const content =\n    shouldKeepMounted && env !== 'test' ? (\n      <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n    ) : shouldKeepMounted ? (\n      children\n    ) : active ? (\n      children\n    ) : null;\n\n  return (\n    <Box\n      {...ctx.getStyles('panel', {\n        className,\n        classNames,\n        styles,\n        style: [style, !active ? { display: 'none' } : undefined],\n        props,\n      })}\n      mod={[{ orientation: ctx.orientation }, mod]}\n      role=\"tabpanel\"\n      id={ctx.getPanelId(value)}\n      aria-labelledby={ctx.getTabId(value)}\n      {...others}\n    >\n      {content}\n    </Box>\n  );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;;AAmCA,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,OAAO;CACjD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAMC,wBAAAA,eAAe;CAC3B,MAAM,MAAMC,qBAAAA,gBAAgB;CAE5B,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,UACJ,qBAAqB,QAAQ,SAC3B,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;EAAoB,CAAA,GAClE,oBACF,WACE,SACF,WACE;AAEN,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,QAAQ,GAAG,KAAA,EAAU;GACzD;GACD,CAAC;EACF,KAAK,CAAC,EAAE,aAAa,IAAI,aAAa,EAAE,IAAI;EAC5C,MAAK;EACL,IAAI,IAAI,WAAW,MAAM;EACzB,mBAAiB,IAAI,SAAS,MAAM;EACpC,GAAI;YAEH;EACG,CAAA;EAER;AAEF,UAAU,UAAUC,oBAAAA;AACpB,UAAU,cAAc"}
+{"version":3,"file":"TabsPanel.cjs","names":["factory","useProps","useMantineEnv","useTabsContext","Activity","Box","classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useMantineEnv,\n  useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n  extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n  /** Panel content */\n  children: React.ReactNode;\n\n  /** If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component */\n  keepMounted?: boolean;\n\n  /** Value of associated control */\n  value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n  props: TabsPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: TabsPanelStylesNames;\n  compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n  const props = useProps('TabsPanel', null, _props);\n  const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n    props;\n\n  const env = useMantineEnv();\n  const ctx = useTabsContext();\n\n  const active = ctx.value === value;\n  const shouldKeepMounted = ctx.keepMounted || keepMounted;\n  const useActivity = ctx.keepMountedMode !== 'display-none';\n  const content =\n    shouldKeepMounted && useActivity && env !== 'test' ? (\n      <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n    ) : shouldKeepMounted ? (\n      children\n    ) : active ? (\n      children\n    ) : null;\n\n  return (\n    <Box\n      {...ctx.getStyles('panel', {\n        className,\n        classNames,\n        styles,\n        style: [style, !active ? { display: 'none' } : undefined],\n        props,\n      })}\n      mod={[{ orientation: ctx.orientation }, mod]}\n      role=\"tabpanel\"\n      id={ctx.getPanelId(value)}\n      aria-labelledby={ctx.getTabId(value)}\n      {...others}\n    >\n      {content}\n    </Box>\n  );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;;AAmCA,MAAa,YAAYA,gBAAAA,SAA2B,WAAW;CAC7D,MAAM,QAAQC,kBAAAA,SAAS,aAAa,MAAM,OAAO;CACjD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAMC,wBAAAA,eAAe;CAC3B,MAAM,MAAMC,qBAAAA,gBAAgB;CAE5B,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,iBAAA,GAAA,kBAAA,KAACC,MAAAA,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;EAAoB,CAAA,GAClE,oBACF,WACE,SACF,WACE;AAEN,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,QAAQ,GAAG,KAAA,EAAU;GACzD;GACD,CAAC;EACF,KAAK,CAAC,EAAE,aAAa,IAAI,aAAa,EAAE,IAAI;EAC5C,MAAK;EACL,IAAI,IAAI,WAAW,MAAM;EACzB,mBAAiB,IAAI,SAAS,MAAM;EACpC,GAAI;YAEH;EACG,CAAA;EAER;AAEF,UAAU,UAAUC,oBAAAA;AACpB,UAAU,cAAc"}

package/cjs/components/Textarea/Autosize.cjs

@@ -96,6 +96,7 @@ function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }
 	const heightRef = (0, react.useRef)(0);
 	const resizeTextarea = () => {
 		const node = libRef.current;
+		if (!node) return;
 		const nodeSizingData = getSizingData(node);
 		if (!nodeSizingData) return;
 		const [height] = calculateNodeHeight(nodeSizingData, node.value || node.placeholder || "x", minRows, maxRows);

package/cjs/components/Textarea/Autosize.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autosize.cjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n  ref?: React.Ref<HTMLTextAreaElement>;\n  maxRows?: number;\n  minRows?: number;\n  style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n    height?: number;\n  };\n}\n\nconst SIZING_STYLE_KEYS = [\n  'borderBottomWidth',\n  'borderLeftWidth',\n  'borderRightWidth',\n  'borderTopWidth',\n  'boxSizing',\n  'fontFamily',\n  'fontSize',\n  'fontStyle',\n  'fontWeight',\n  'letterSpacing',\n  'lineHeight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'paddingTop',\n  'tabSize',\n  'textIndent',\n  'textRendering',\n  'textTransform',\n  'width',\n  'wordBreak',\n  'wordSpacing',\n  'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n  sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n  paddingSize: number;\n  borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n  'min-height': '0',\n  'max-height': 'none',\n  height: '0',\n  visibility: 'hidden',\n  overflow: 'hidden',\n  position: 'absolute',\n  'z-index': '-1000',\n  top: '0',\n  right: '0',\n  display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n  });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n  const style = window.getComputedStyle(node);\n\n  if (style === null) {\n    return null;\n  }\n\n  const sizingStyle = {} as SizingData['sizingStyle'];\n  for (const key of SIZING_STYLE_KEYS) {\n    (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n  }\n\n  if ((sizingStyle as any).boxSizing === '') {\n    return null;\n  }\n\n  const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n  const borderSize =\n    parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n  return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n  sizingData: SizingData,\n  value: string,\n  minRows = 1,\n  maxRows = Infinity\n): [number, number] {\n  if (!hiddenTextarea) {\n    hiddenTextarea = document.createElement('textarea');\n    hiddenTextarea.setAttribute('tabindex', '-1');\n    hiddenTextarea.setAttribute('aria-hidden', 'true');\n    hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n    forceHiddenStyles(hiddenTextarea);\n  }\n\n  if (hiddenTextarea.parentNode === null) {\n    document.body.appendChild(hiddenTextarea);\n  }\n\n  const { paddingSize, borderSize, sizingStyle } = sizingData;\n  const { boxSizing } = sizingStyle;\n\n  Object.keys(sizingStyle).forEach((key) => {\n    (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n  });\n\n  forceHiddenStyles(hiddenTextarea);\n\n  hiddenTextarea.value = value;\n  let height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n  hiddenTextarea.value = value;\n  height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  hiddenTextarea.value = 'x';\n  const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n  let minHeight = rowHeight * minRows;\n  if (boxSizing === 'border-box') {\n    minHeight = minHeight + paddingSize + borderSize;\n  }\n  height = Math.max(minHeight, height);\n\n  let maxHeight = rowHeight * maxRows;\n  if (boxSizing === 'border-box') {\n    maxHeight = maxHeight + paddingSize + borderSize;\n  }\n  height = Math.min(maxHeight, height);\n\n  return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n  maxRows,\n  minRows,\n  onChange,\n  ref: userRef,\n  ...props\n}: TextareaAutosizeProps) {\n  const isControlled = props.value !== undefined;\n  const libRef = useRef<HTMLTextAreaElement | null>(null);\n  const ref = useMergedRef(libRef, userRef);\n  const heightRef = useRef(0);\n\n  const resizeTextarea = () => {\n    const node = libRef.current!;\n    const nodeSizingData = getSizingData(node);\n\n    if (!nodeSizingData) {\n      return;\n    }\n\n    const [height] = calculateNodeHeight(\n      nodeSizingData,\n      node.value || node.placeholder || 'x',\n      minRows,\n      maxRows\n    );\n\n    if (heightRef.current !== height) {\n      heightRef.current = height;\n      node.style.setProperty('height', `${height}px`, 'important');\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) {\n      resizeTextarea();\n    }\n    onChange?.(event);\n  };\n\n  useLayoutEffect(resizeTextarea);\n\n  useEffect(() => {\n    const handleResize = () => resizeTextarea();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  useEffect(() => {\n    const handleFontsLoaded = () => resizeTextarea();\n    document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n    return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n  }, []);\n\n  useEffect(() => {\n    const handleReset = (event: Event) => {\n      if (libRef.current?.form === event.target && !isControlled) {\n        const currentValue = libRef.current!.value;\n        requestAnimationFrame(() => {\n          if (libRef.current && currentValue !== libRef.current.value) {\n            resizeTextarea();\n          }\n        });\n      }\n    };\n    document.body.addEventListener('reset', handleReset);\n    return () => document.body.removeEventListener('reset', handleReset);\n  }, [isControlled]);\n\n  return <textarea {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}
+{"version":3,"file":"Autosize.cjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n  ref?: React.Ref<HTMLTextAreaElement>;\n  maxRows?: number;\n  minRows?: number;\n  style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n    height?: number;\n  };\n}\n\nconst SIZING_STYLE_KEYS = [\n  'borderBottomWidth',\n  'borderLeftWidth',\n  'borderRightWidth',\n  'borderTopWidth',\n  'boxSizing',\n  'fontFamily',\n  'fontSize',\n  'fontStyle',\n  'fontWeight',\n  'letterSpacing',\n  'lineHeight',\n  'paddingBottom',\n  'paddingLeft',\n  'paddingRight',\n  'paddingTop',\n  'tabSize',\n  'textIndent',\n  'textRendering',\n  'textTransform',\n  'width',\n  'wordBreak',\n  'wordSpacing',\n  'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n  sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n  paddingSize: number;\n  borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n  'min-height': '0',\n  'max-height': 'none',\n  height: '0',\n  visibility: 'hidden',\n  overflow: 'hidden',\n  position: 'absolute',\n  'z-index': '-1000',\n  top: '0',\n  right: '0',\n  display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n  Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n    node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n  });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n  const style = window.getComputedStyle(node);\n\n  if (style === null) {\n    return null;\n  }\n\n  const sizingStyle = {} as SizingData['sizingStyle'];\n  for (const key of SIZING_STYLE_KEYS) {\n    (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n  }\n\n  if ((sizingStyle as any).boxSizing === '') {\n    return null;\n  }\n\n  const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n  const borderSize =\n    parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n  return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n  sizingData: SizingData,\n  value: string,\n  minRows = 1,\n  maxRows = Infinity\n): [number, number] {\n  if (!hiddenTextarea) {\n    hiddenTextarea = document.createElement('textarea');\n    hiddenTextarea.setAttribute('tabindex', '-1');\n    hiddenTextarea.setAttribute('aria-hidden', 'true');\n    hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n    forceHiddenStyles(hiddenTextarea);\n  }\n\n  if (hiddenTextarea.parentNode === null) {\n    document.body.appendChild(hiddenTextarea);\n  }\n\n  const { paddingSize, borderSize, sizingStyle } = sizingData;\n  const { boxSizing } = sizingStyle;\n\n  Object.keys(sizingStyle).forEach((key) => {\n    (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n  });\n\n  forceHiddenStyles(hiddenTextarea);\n\n  hiddenTextarea.value = value;\n  let height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n  hiddenTextarea.value = value;\n  height =\n    boxSizing === 'border-box'\n      ? hiddenTextarea.scrollHeight + borderSize\n      : hiddenTextarea.scrollHeight - paddingSize;\n\n  hiddenTextarea.value = 'x';\n  const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n  let minHeight = rowHeight * minRows;\n  if (boxSizing === 'border-box') {\n    minHeight = minHeight + paddingSize + borderSize;\n  }\n  height = Math.max(minHeight, height);\n\n  let maxHeight = rowHeight * maxRows;\n  if (boxSizing === 'border-box') {\n    maxHeight = maxHeight + paddingSize + borderSize;\n  }\n  height = Math.min(maxHeight, height);\n\n  return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n  maxRows,\n  minRows,\n  onChange,\n  ref: userRef,\n  ...props\n}: TextareaAutosizeProps) {\n  const isControlled = props.value !== undefined;\n  const libRef = useRef<HTMLTextAreaElement | null>(null);\n  const ref = useMergedRef(libRef, userRef);\n  const heightRef = useRef(0);\n\n  const resizeTextarea = () => {\n    const node = libRef.current;\n\n    if (!node) {\n      return;\n    }\n\n    const nodeSizingData = getSizingData(node);\n\n    if (!nodeSizingData) {\n      return;\n    }\n\n    const [height] = calculateNodeHeight(\n      nodeSizingData,\n      node.value || node.placeholder || 'x',\n      minRows,\n      maxRows\n    );\n\n    if (heightRef.current !== height) {\n      heightRef.current = height;\n      node.style.setProperty('height', `${height}px`, 'important');\n    }\n  };\n\n  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n    if (!isControlled) {\n      resizeTextarea();\n    }\n    onChange?.(event);\n  };\n\n  useLayoutEffect(resizeTextarea);\n\n  useEffect(() => {\n    const handleResize = () => resizeTextarea();\n    window.addEventListener('resize', handleResize);\n    return () => window.removeEventListener('resize', handleResize);\n  }, []);\n\n  useEffect(() => {\n    const handleFontsLoaded = () => resizeTextarea();\n    document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n    return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n  }, []);\n\n  useEffect(() => {\n    const handleReset = (event: Event) => {\n      if (libRef.current?.form === event.target && !isControlled) {\n        const currentValue = libRef.current!.value;\n        requestAnimationFrame(() => {\n          if (libRef.current && currentValue !== libRef.current.value) {\n            resizeTextarea();\n          }\n        });\n      }\n    };\n    document.body.addEventListener('reset', handleReset);\n    return () => document.body.removeEventListener('reset', handleReset);\n  }, [isControlled]);\n\n  return <textarea {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}

package/cjs/components/Tree/FlatTreeNode.cjs

@@ -0,0 +1,102 @@
+"use client";
+require("../../_virtual/_rolldown/runtime.cjs");
+const require_find_element_ancestor = require("../../core/utils/find-element-ancestor/find-element-ancestor.cjs");
+const require_Tree_module = require("./Tree.module.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region packages/@mantine/core/src/components/Tree/FlatTreeNode.tsx
+const FlatTreeNode = (0, react.memo)(function FlatTreeNode({ node, level, parent, hasChildren, expanded, tree, expandOnClick = true, selectOnClick, expandOnSpace = true, checkOnSpace, renderNode, style, tabIndex = -1 }) {
+	const ref = (0, react.useRef)(null);
+	const isLoading = tree.isNodeLoading(node.value);
+	const loadError = tree.getNodeLoadError(node.value);
+	const selected = tree.selectedState.includes(node.value);
+	const handleClick = (event) => {
+		event.stopPropagation();
+		if (expandOnClick && hasChildren) tree.toggleExpanded(node.value);
+		if (selectOnClick) tree.select(node.value);
+		ref.current?.focus();
+	};
+	const handleKeyDown = (event) => {
+		if (event.nativeEvent.code === "ArrowRight") {
+			event.stopPropagation();
+			event.preventDefault();
+			if (expanded && hasChildren) {
+				const root = require_find_element_ancestor.findElementAncestor(event.currentTarget, "[data-tree-root]");
+				const nodes = root ? Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none") : [];
+				const index = nodes.indexOf(event.currentTarget);
+				if (index !== -1) nodes[index + 1]?.focus();
+			} else if (hasChildren) tree.expand(node.value);
+		}
+		if (event.nativeEvent.code === "ArrowLeft") {
+			event.stopPropagation();
+			event.preventDefault();
+			if (expanded && hasChildren) tree.collapse(node.value);
+			else if (parent) (require_find_element_ancestor.findElementAncestor(event.currentTarget, "[data-tree-root]")?.querySelector(`[role=treeitem][data-value="${CSS.escape(parent)}"]`))?.focus();
+		}
+		if (event.nativeEvent.code === "ArrowDown" || event.nativeEvent.code === "ArrowUp") {
+			const root = require_find_element_ancestor.findElementAncestor(event.currentTarget, "[data-tree-root]");
+			if (!root) return;
+			event.stopPropagation();
+			event.preventDefault();
+			const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none");
+			const index = nodes.indexOf(event.currentTarget);
+			if (index === -1) return;
+			nodes[event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1]?.focus();
+		}
+		if (event.nativeEvent.code === "Space") {
+			if (expandOnSpace) {
+				event.stopPropagation();
+				event.preventDefault();
+				tree.toggleExpanded(node.value);
+			}
+			if (checkOnSpace) {
+				event.stopPropagation();
+				event.preventDefault();
+				if (tree.isNodeChecked(node.value)) tree.uncheckNode(node.value);
+				else tree.checkNode(node.value);
+			}
+		}
+	};
+	const elementProps = {
+		className: require_Tree_module.default.label,
+		style: {},
+		onClick: handleClick,
+		"data-selected": selected || void 0,
+		"data-value": node.value
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		ref,
+		className: require_Tree_module.default.node,
+		style: {
+			"--label-offset": `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,
+			...style
+		},
+		role: "treeitem",
+		"aria-selected": selected,
+		"aria-expanded": hasChildren ? expanded : void 0,
+		"data-value": node.value,
+		"data-selected": selected || void 0,
+		"data-level": level,
+		tabIndex,
+		onKeyDown: handleKeyDown,
+		children: typeof renderNode === "function" ? renderNode({
+			node,
+			level,
+			selected,
+			tree,
+			expanded,
+			hasChildren,
+			isLoading,
+			loadError,
+			elementProps
+		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			...elementProps,
+			children: node.label
+		})
+	});
+});
+FlatTreeNode.displayName = "@mantine/core/FlatTreeNode";
+//#endregion
+exports.FlatTreeNode = FlatTreeNode;
+
+//# sourceMappingURL=FlatTreeNode.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FlatTreeNode.cjs","names":["findElementAncestor","classes"],"sources":["../../../src/components/Tree/FlatTreeNode.tsx"],"sourcesContent":["import { memo, useRef } from 'react';\nimport { findElementAncestor } from '../../core';\nimport type { RenderNode, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport classes from './Tree.module.css';\n\nexport interface FlatTreeNodeProps {\n  /** Node data from tree data */\n  node: TreeNodeData;\n\n  /** Nesting level of the node, starts at 1 */\n  level: number;\n\n  /** Value of the parent node, `null` for root nodes */\n  parent: string | null;\n\n  /** Whether the node has children */\n  hasChildren: boolean;\n\n  /** Whether the node is expanded */\n  expanded: boolean;\n\n  /** Tree controller instance, return value of `useTree` hook */\n  tree: TreeController;\n\n  /** If set, tree node with children is expanded on click @default true */\n  expandOnClick?: boolean;\n\n  /** If set, tree node is selected on click @default false */\n  selectOnClick?: boolean;\n\n  /** If set, tree node with children is expanded on space key press @default true */\n  expandOnSpace?: boolean;\n\n  /** If set, tree node is checked on space key press @default false */\n  checkOnSpace?: boolean;\n\n  /** A function to render tree node label */\n  renderNode?: RenderNode;\n\n  /** Style to apply to the root element, used for virtualizer positioning */\n  style?: React.CSSProperties;\n\n  /** Tab index for the node */\n  tabIndex?: number;\n}\n\nexport const FlatTreeNode = memo(function FlatTreeNode({\n  node,\n  level,\n  parent,\n  hasChildren,\n  expanded,\n  tree,\n  expandOnClick = true,\n  selectOnClick,\n  expandOnSpace = true,\n  checkOnSpace,\n  renderNode,\n  style,\n  tabIndex = -1,\n}: FlatTreeNodeProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const isLoading = tree.isNodeLoading(node.value);\n  const loadError = tree.getNodeLoadError(node.value);\n  const selected = tree.selectedState.includes(node.value);\n\n  const handleClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (expandOnClick && hasChildren) {\n      tree.toggleExpanded(node.value);\n    }\n\n    if (selectOnClick) {\n      tree.select(node.value);\n    }\n\n    ref.current?.focus();\n  };\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const nodes = root\n          ? Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n              (treeNode) => treeNode.style.display !== 'none'\n            )\n          : [];\n        const index = nodes.indexOf(event.currentTarget as HTMLElement);\n        if (index !== -1) {\n          nodes[index + 1]?.focus();\n        }\n      } else if (hasChildren) {\n        tree.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (expanded && hasChildren) {\n        tree.collapse(node.value);\n      } else if (parent) {\n        const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n        const parentElement = root?.querySelector<HTMLElement>(\n          `[role=treeitem][data-value=\"${CSS.escape(parent)}\"]`\n        );\n        parentElement?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLElement>('[role=treeitem]')).filter(\n        (treeNode) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        tree.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        if (tree.isNodeChecked(node.value)) {\n          tree.uncheckNode(node.value);\n        } else {\n          tree.checkNode(node.value);\n        }\n      }\n    }\n  };\n\n  const elementProps = {\n    className: classes.label,\n    style: {} as React.CSSProperties,\n    onClick: handleClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n  };\n\n  return (\n    <div\n      ref={ref}\n      className={classes.node}\n      style={{\n        ...({\n          '--label-offset': `calc(var(--level-offset, var(--mantine-spacing-lg)) * ${level - 1})`,\n        } as React.CSSProperties),\n        ...style,\n      }}\n      role=\"treeitem\"\n      aria-selected={selected}\n      aria-expanded={hasChildren ? expanded : undefined}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={tabIndex}\n      onKeyDown={handleKeyDown}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          tree,\n          expanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n    </div>\n  );\n});\n\nFlatTreeNode.displayName = '@mantine/core/FlatTreeNode';\n"],"mappings":"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"}

package/cjs/components/Tree/Tree.cjs

@@ -28,9 +28,13 @@ const defaultProps = {
 const varsResolver = require_create_vars_resolver.createVarsResolver((_theme, { levelOffset }) => ({ root: { "--level-offset": require_get_size.getSpacing(levelOffset) } }));
 const Tree = require_factory.factory((_props) => {
 	const props = require_use_props.useProps("Tree", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, data, expandOnClick, tree, renderNode, selectOnClick, clearSelectionOnOutsideClick, allowRangeSelection, expandOnSpace, levelOffset, checkOnSpace, keepMounted, attributes, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, data, expandOnClick, tree, renderNode, selectOnClick, clearSelectionOnOutsideClick, allowRangeSelection, expandOnSpace, levelOffset, checkOnSpace, keepMounted, onDragDrop, withLines, attributes, ref, ...others } = props;
 	const defaultController = require_use_tree.useTree();
 	const controller = tree || defaultController;
+	const dragStateRef = (0, react.useRef)({
+		draggedValue: null,
+		currentDropTarget: null
+	});
 	const getStyles = require_use_styles.useStyles({
 		name: "Tree",
 		classes: require_Tree_module.default,
@@ -61,7 +65,10 @@ const Tree = require_factory.factory((_props) => {
 		allowRangeSelection,
 		expandOnSpace,
 		checkOnSpace,
-		keepMounted
+		keepMounted,
+		onDragDrop,
+		dragStateRef,
+		data
 	}, node.value));
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 		component: "ul",
@@ -71,6 +78,7 @@ const Tree = require_factory.factory((_props) => {
 		role: "tree",
 		"aria-multiselectable": controller.multiple,
 		"data-tree-root": true,
+		"data-with-lines": withLines || void 0,
 		children: nodes
 	});
 });

package/cjs/components/Tree/Tree.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tree.cjs","names":["createVarsResolver","getSpacing","factory","useProps","useTree","useStyles","TreeNode","Box","classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo } 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 { TreeNode } from './TreeNode';\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}\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 */\n  hasChildren: boolean;\n\n  /** `true` if the node is selected */\n  selected: boolean;\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  };\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 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\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    attributes,\n    ref,\n    ...others\n  } = props;\n\n  const defaultController = useTree();\n  const controller = tree || defaultController;\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    />\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    >\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":";;;;;;;;;;;;;;;AAiGA,SAAS,cAAc,MAAgC;AACrD,QAAO,KAAK,QAAkB,KAAK,SAAS;AAC1C,MAAI,KAAK,KAAK,MAAM;AACpB,MAAI,KAAK,SACP,KAAI,KAAK,GAAG,cAAc,KAAK,SAAS,CAAC;AAE3C,SAAO;IACN,EAAE,CAAC;;AAUR,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;CAChB;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,YAAY,EAC1C,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoBC,iBAAAA,SAAS;CACnC,MAAM,aAAa,QAAQ;CAE3B,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAMF,MAAM,aAAA,GAAA,eAAA,cAAyB,MAAA,GAAA,eAAA,uBAHvB,gCAAgC,WAAW,eAAe,CACjE,CAEmD;CAEpD,MAAM,cAAA,GAAA,MAAA,eAA2B,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAE7D,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,WAAW,KAAK;IAC1B,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACb,EAbK,KAAK,MAaV,CACF;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;YAEC;EACG,CAAA;EAER;AAEF,KAAK,cAAc;AACnB,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe"}
+{"version":3,"file":"Tree.cjs","names":["createVarsResolver","getSpacing","factory","useProps","useTree","useStyles","TreeNode","Box","classes"],"sources":["../../../src/components/Tree/Tree.tsx"],"sourcesContent":["import { useEffect, useMemo, useRef } from 'react';\nimport { useClickOutside, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getSpacing,\n  MantineSpacing,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport { TreeNode } from './TreeNode';\nimport { 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\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  /** 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    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      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":";;;;;;;;;;;;;;;AA0HA,SAAS,cAAc,MAAgC;AACrD,QAAO,KAAK,QAAkB,KAAK,SAAS;AAC1C,MAAI,KAAK,KAAK,MAAM;AACpB,MAAI,KAAK,SACP,KAAI,KAAK,GAAG,cAAc,KAAK,SAAS,CAAC;AAE3C,SAAO;IACN,EAAE,CAAC;;AAUR,MAAM,eAAe;CACnB,eAAe;CACf,qBAAqB;CACrB,eAAe;CAChB;AAED,MAAM,eAAeA,6BAAAA,oBAAiC,QAAQ,EAAE,mBAAmB,EACjF,MAAM,EACJ,kBAAkBC,iBAAAA,WAAW,YAAY,EAC1C,EACF,EAAE;AAEH,MAAa,OAAOC,gBAAAA,SAAsB,WAAW;CACnD,MAAM,QAAQC,kBAAAA,SAAS,QAAQ,cAAc,OAAO;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,eACA,MACA,YACA,eACA,8BACA,qBACA,eACA,aACA,cACA,aACA,YACA,WACA,YACA,KACA,GAAG,WACD;CAEJ,MAAM,oBAAoBC,iBAAAA,SAAS;CACnC,MAAM,aAAa,QAAQ;CAE3B,MAAM,gBAAA,GAAA,MAAA,QAAqC;EAAE,cAAc;EAAM,mBAAmB;EAAM,CAAC;CAE3F,MAAM,YAAYC,mBAAAA,UAAuB;EACvC,MAAM;EACN,SAAA,oBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAMF,MAAM,aAAA,GAAA,eAAA,cAAyB,MAAA,GAAA,eAAA,uBAHvB,gCAAgC,WAAW,eAAe,CACjE,CAEmD;CAEpD,MAAM,cAAA,GAAA,MAAA,eAA2B,cAAc,KAAK,EAAE,CAAC,KAAK,CAAC;AAE7D,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,WAAW,KAAK;IAC1B,CAAC,KAAK,CAAC;CAEV,MAAM,QAAQ,KAAK,KAAK,MAAM,UAC5B,iBAAA,GAAA,kBAAA,KAACC,iBAAAA,UAAD;EAEQ;EACK;EACX,WAAW;EACI;EACA;EACH;EACA;EACA;EACS;EACN;EACD;EACD;EACD;EACE;EACR;EACN,EAhBK,KAAK,MAgBV,CACF;AAEF,QACE,iBAAA,GAAA,kBAAA,KAACC,YAAAA,KAAD;EACE,WAAU;EACV,KAAK;EACL,GAAI,UAAU,OAAO;EACrB,GAAI;EACJ,MAAK;EACL,wBAAsB,WAAW;EACjC,kBAAA;EACA,mBAAiB,aAAa,KAAA;YAE7B;EACG,CAAA;EAER;AAEF,KAAK,cAAc;AACnB,KAAK,UAAUC,oBAAAA;AACf,KAAK,eAAe"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tree.module.cjs","names":[],"sources":["../../../src/components/Tree/Tree.module.css"],"sourcesContent":[".root {\n  --level-offset: var(--mantine-spacing-lg);\n  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  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"],"mappings":""}
+{"version":3,"file":"Tree.module.cjs","names":[],"sources":["../../../src/components/Tree/Tree.module.css"],"sourcesContent":[".root {\n  --level-offset: var(--mantine-spacing-lg);\n  --tree-line-width: rem(1px);\n  --tree-line-color: var(--mantine-color-default-border);\n  margin: 0;\n  padding: 0;\n  user-select: none;\n}\n\n.subtree {\n  margin: 0;\n  padding: 0;\n}\n\n.node {\n  cursor: pointer;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n  outline: 0;\n\n  &:focus-visible {\n    > .label {\n      outline: 2px solid var(--mantine-primary-color-filled);\n      outline-offset: 2px;\n    }\n  }\n}\n\n.label {\n  position: relative;\n  padding-inline-start: var(--label-offset);\n\n  &:where([data-selected]) {\n    @mixin where-light {\n      background-color: var(--mantine-color-gray-1);\n    }\n\n    @mixin where-dark {\n      background-color: var(--mantine-color-dark-5);\n    }\n  }\n\n  &:where([data-dragging]) {\n    opacity: 0.4;\n  }\n\n  &:where([data-drag-over='before'])::before {\n    content: '';\n    position: absolute;\n    top: -1px;\n    inset-inline-start: var(--label-offset, 0);\n    inset-inline-end: 0;\n    height: 2px;\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='after'])::after {\n    content: '';\n    position: absolute;\n    bottom: -1px;\n    inset-inline-start: var(--label-offset, 0);\n    inset-inline-end: 0;\n    height: 2px;\n    background-color: var(--mantine-primary-color-filled);\n    pointer-events: none;\n    z-index: 1;\n  }\n\n  &:where([data-drag-over='inside']) {\n    background-color: var(--mantine-primary-color-light);\n  }\n}\n\n:where([data-with-lines]) {\n  .node {\n    position: relative;\n  }\n\n  .subtree > .node {\n    &::before {\n      content: '';\n      position: absolute;\n      top: rem(12px);\n      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n      width: calc(var(--level-offset) / 2);\n      height: 0;\n      border-top: var(--tree-line-width) solid var(--tree-line-color);\n      pointer-events: none;\n    }\n\n    &::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      inset-inline-start: calc(var(--label-offset) - var(--level-offset) / 2);\n      width: 0;\n      border-inline-start: var(--tree-line-width) solid var(--tree-line-color);\n      pointer-events: none;\n    }\n\n    &:last-child::after {\n      bottom: auto;\n      height: rem(12px);\n    }\n  }\n}\n"],"mappings":""}

package/cjs/components/Tree/TreeNode.cjs

@@ -2,6 +2,8 @@
 require("../../_virtual/_rolldown/runtime.cjs");
 const require_find_element_ancestor = require("../../core/utils/find-element-ancestor/find-element-ancestor.cjs");
 const require_Box = require("../../core/Box/Box.cjs");
+const require_Loader = require("../Loader/Loader.cjs");
+const require_use_tree_node_drag_drop = require("./use-tree-node-drag-drop.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region packages/@mantine/core/src/components/Tree/TreeNode.tsx
@@ -13,8 +15,14 @@ function getValuesRange(anchor, value, flatValues) {
 	const end = Math.max(anchorIndex, valueIndex);
 	return flatValues.slice(start, end + 1);
 }
-function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted }) {
+function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, dragStateRef, data }) {
 	const ref = (0, react.useRef)(null);
+	const hasLoadedChildren = Array.isArray(node.children);
+	const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
+	const hasChildren = hasLoadedChildren || hasAsyncChildren;
+	const isLoading = controller.isNodeLoading(node.value);
+	const loadError = controller.getNodeLoadError(node.value);
+	const isExpanded = controller.expandedState[node.value] || false;
 	const nested = (node.children || []).map((child) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TreeNode, {
 		node: child,
 		flatValues,
@@ -29,19 +37,29 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		allowRangeSelection,
 		expandOnSpace,
 		checkOnSpace,
-		keepMounted
+		keepMounted,
+		onDragDrop,
+		dragStateRef,
+		data
 	}, child.value));
+	const dragProps = require_use_tree_node_drag_drop.useTreeNodeDragDrop({
+		nodeValue: node.value,
+		hasChildren,
+		data,
+		onDragDrop,
+		dragStateRef
+	});
 	const handleKeyDown = (event) => {
 		if (event.nativeEvent.code === "ArrowRight") {
 			event.stopPropagation();
 			event.preventDefault();
-			if (controller.expandedState[node.value]) event.currentTarget.querySelector("[role=treeitem]")?.focus();
+			if (isExpanded) event.currentTarget.querySelector("[role=treeitem]")?.focus();
 			else controller.expand(node.value);
 		}
 		if (event.nativeEvent.code === "ArrowLeft") {
 			event.stopPropagation();
 			event.preventDefault();
-			if (controller.expandedState[node.value] && (node.children || []).length > 0) controller.collapse(node.value);
+			if (isExpanded && hasChildren) controller.collapse(node.value);
 			else if (isSubtree) require_find_element_ancestor.findElementAncestor(event.currentTarget, "[role=treeitem]")?.focus();
 		}
 		if (event.nativeEvent.code === "ArrowDown" || event.nativeEvent.code === "ArrowUp") {
@@ -78,7 +96,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 			controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));
 			ref.current?.focus();
 		} else {
-			expandOnClick && controller.toggleExpanded(node.value);
+			if (expandOnClick) controller.toggleExpanded(node.value);
 			selectOnClick && controller.select(node.value);
 			ref.current?.focus();
 		}
@@ -88,8 +106,10 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		...getStyles("label"),
 		onClick: handleNodeClick,
 		"data-selected": selected || void 0,
-		"data-value": node.value
+		"data-value": node.value,
+		...dragProps
 	};
+	const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
 		...getStyles("node", { style: { "--label-offset": `calc(var(--level-offset) * ${level - 1})` } }),
 		role: "treeitem",
@@ -100,33 +120,51 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		tabIndex: rootIndex === 0 ? 0 : -1,
 		onKeyDown: handleKeyDown,
 		ref,
-		children: [typeof renderNode === "function" ? renderNode({
-			node,
-			level,
-			selected,
-			tree: controller,
-			expanded: controller.expandedState[node.value] || false,
-			hasChildren: Array.isArray(node.children) && node.children.length > 0,
-			elementProps
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			...elementProps,
-			children: node.label
-		}), keepMounted && nested.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
-			mode: controller.expandedState[node.value] ? "visible" : "hidden",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+		children: [
+			typeof renderNode === "function" ? renderNode({
+				node,
+				level,
+				selected,
+				tree: controller,
+				expanded: isExpanded,
+				hasChildren,
+				isLoading,
+				loadError,
+				elementProps
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				...elementProps,
+				children: node.label
+			}),
+			withLoadingIndicator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+				component: "ul",
+				role: "group",
+				...getStyles("subtree"),
+				"data-level": level,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+					...getStyles("node", { style: { "--label-offset": `calc(var(--level-offset) * ${level})` } }),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						...getStyles("label"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Loader.Loader, { size: 16 })
+					})
+				})
+			}),
+			keepMounted && nested.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Activity, {
+				mode: isExpanded ? "visible" : "hidden",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
+					component: "ul",
+					role: "group",
+					...getStyles("subtree"),
+					"data-level": level,
+					children: nested
+				})
+			}) : isExpanded && nested.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
 				component: "ul",
 				role: "group",
 				...getStyles("subtree"),
 				"data-level": level,
 				children: nested
 			})
-		}) : controller.expandedState[node.value] && nested.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
-			component: "ul",
-			role: "group",
-			...getStyles("subtree"),
-			"data-level": level,
-			children: nested
-		})]
+		]
 	});
 }
 TreeNode.displayName = "@mantine/core/TreeNode";

package/cjs/components/Tree/TreeNode.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.cjs","names":["findElementAncestor","Activity","Box"],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport type { RenderNode, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\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}\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}: TreeNodeProps) {\n  const ref = useRef<HTMLLIElement>(null);\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    />\n  ));\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (controller.expandedState[node.value]) {\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 (controller.expandedState[node.value] && (node.children || []).length > 0) {\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      expandOnClick && controller.toggleExpanded(node.value);\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  };\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: controller.expandedState[node.value] || false,\n          hasChildren: Array.isArray(node.children) && node.children.length > 0,\n          elementProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n\n      {keepMounted && nested.length > 0 ? (\n        <Activity mode={controller.expandedState[node.value] ? 'visible' : 'hidden'}>\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        </Activity>\n      ) : (\n        controller.expandedState[node.value] &&\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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"}
+{"version":3,"file":"TreeNode.cjs","names":["useTreeNodeDragDrop","findElementAncestor","Box","Loader","Activity"],"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 { 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  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  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      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  const dragProps = useTreeNodeDragDrop({\n    nodeValue: node.value,\n    hasChildren,\n    data,\n    onDragDrop,\n    dragStateRef,\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    ...dragProps,\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        })\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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"}

package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs

@@ -0,0 +1,23 @@
+"use client";
+//#region packages/@mantine/core/src/components/Tree/filter-tree-data/filter-tree-data.ts
+function defaultTreeNodeFilter(query, node) {
+	return (typeof node.label === "string" ? node.label : node.value).toLowerCase().includes(query.toLowerCase().trim());
+}
+function filterTreeData(data, query, filter = defaultTreeNodeFilter) {
+	if (!query.trim()) return data;
+	const result = [];
+	for (const node of data) {
+		const nodeMatches = filter(query, node);
+		const filteredChildren = Array.isArray(node.children) && node.children.length > 0 ? filterTreeData(node.children, query, filter) : [];
+		if (nodeMatches || filteredChildren.length > 0) result.push(filteredChildren.length > 0 ? {
+			...node,
+			children: filteredChildren
+		} : { ...node });
+	}
+	return result;
+}
+//#endregion
+exports.defaultTreeNodeFilter = defaultTreeNodeFilter;
+exports.filterTreeData = filterTreeData;
+
+//# sourceMappingURL=filter-tree-data.cjs.map

package/cjs/components/Tree/filter-tree-data/filter-tree-data.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-tree-data.cjs","names":[],"sources":["../../../../src/components/Tree/filter-tree-data/filter-tree-data.ts"],"sourcesContent":["import type { TreeNodeData } from '../Tree';\n\nexport type TreeNodeFilter = (query: string, node: TreeNodeData) => boolean;\n\nexport function defaultTreeNodeFilter(query: string, node: TreeNodeData): boolean {\n  const label = typeof node.label === 'string' ? node.label : node.value;\n  return label.toLowerCase().includes(query.toLowerCase().trim());\n}\n\nexport function filterTreeData(\n  data: TreeNodeData[],\n  query: string,\n  filter: TreeNodeFilter = defaultTreeNodeFilter\n): TreeNodeData[] {\n  if (!query.trim()) {\n    return data;\n  }\n\n  const result: TreeNodeData[] = [];\n\n  for (const node of data) {\n    const nodeMatches = filter(query, node);\n    const filteredChildren =\n      Array.isArray(node.children) && node.children.length > 0\n        ? filterTreeData(node.children, query, filter)\n        : [];\n\n    if (nodeMatches || filteredChildren.length > 0) {\n      result.push(\n        filteredChildren.length > 0 ? { ...node, children: filteredChildren } : { ...node }\n      );\n    }\n  }\n\n  return result;\n}\n"],"mappings":";;AAIA,SAAgB,sBAAsB,OAAe,MAA6B;AAEhF,SADc,OAAO,KAAK,UAAU,WAAW,KAAK,QAAQ,KAAK,OACpD,aAAa,CAAC,SAAS,MAAM,aAAa,CAAC,MAAM,CAAC;;AAGjE,SAAgB,eACd,MACA,OACA,SAAyB,uBACT;AAChB,KAAI,CAAC,MAAM,MAAM,CACf,QAAO;CAGT,MAAM,SAAyB,EAAE;AAEjC,MAAK,MAAM,QAAQ,MAAM;EACvB,MAAM,cAAc,OAAO,OAAO,KAAK;EACvC,MAAM,mBACJ,MAAM,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS,SAAS,IACnD,eAAe,KAAK,UAAU,OAAO,OAAO,GAC5C,EAAE;AAER,MAAI,eAAe,iBAAiB,SAAS,EAC3C,QAAO,KACL,iBAAiB,SAAS,IAAI;GAAE,GAAG;GAAM,UAAU;GAAkB,GAAG,EAAE,GAAG,MAAM,CACpF;;AAIL,QAAO"}