@mantine/core 9.4.1 → 9.4.3-alpha.0

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

package/cjs/components/Tree/TreeNode.cjs

@@ -23,7 +23,7 @@ function isVisibleTreeNode(node, root) {
 }
 function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data }) {
 	const ref = (0, react.useRef)(null);
-	const hasLoadedChildren = Array.isArray(node.children);
+	const hasLoadedChildren = Array.isArray(node.children) && node.children.length > 0;
 	const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
 	const hasChildren = hasLoadedChildren || hasAsyncChildren;
 	const isLoading = controller.isNodeLoading(node.value);
@@ -64,14 +64,21 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		if (event.nativeEvent.code === "ArrowRight") {
 			event.stopPropagation();
 			event.preventDefault();
-			if (isExpanded) event.currentTarget.querySelector("[role=treeitem]")?.focus();
-			else controller.expand(node.value);
+			if (isExpanded) {
+				const nextNode = event.currentTarget.querySelector("[role=treeitem]");
+				nextNode?.setAttribute("data-focus-ring", "true");
+				nextNode?.focus();
+			} else controller.expand(node.value);
 		}
 		if (event.nativeEvent.code === "ArrowLeft") {
 			event.stopPropagation();
 			event.preventDefault();
 			if (isExpanded && hasChildren) controller.collapse(node.value);
-			else if (isSubtree) require_find_element_ancestor.findElementAncestor(event.currentTarget, "[role=treeitem]")?.focus();
+			else if (isSubtree) {
+				const parentNode = require_find_element_ancestor.findElementAncestor(event.currentTarget, "[role=treeitem]");
+				parentNode?.setAttribute("data-focus-ring", "true");
+				parentNode?.focus();
+			}
 		}
 		if (event.nativeEvent.code === "ArrowDown" || event.nativeEvent.code === "ArrowUp") {
 			const root = require_find_element_ancestor.findElementAncestor(event.currentTarget, "[data-tree-root]");
@@ -82,7 +89,9 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 			const index = nodes.indexOf(event.currentTarget);
 			if (index === -1) return;
 			const nextIndex = event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1;
-			nodes[nextIndex]?.focus();
+			const nextNode = nodes[nextIndex];
+			nextNode?.setAttribute("data-focus-ring", "true");
+			nextNode?.focus();
 			if (event.shiftKey) {
 				const selectNode = nodes[nextIndex];
 				if (selectNode) controller.setSelectedState(getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues));
@@ -130,6 +139,9 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 		"data-level": level,
 		tabIndex: rootIndex === 0 ? 0 : -1,
 		onKeyDown: handleKeyDown,
+		onBlur: (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget)) event.currentTarget.removeAttribute("data-focus-ring");
+		},
 		ref,
 		children: [
 			typeof renderNode === "function" ? renderNode({

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

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

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

@@ -4,7 +4,7 @@ function flattenTreeDataTo(acc, data, expandedState, parent, level, ancestorIsLa
 	for (let i = 0; i < data.length; i++) {
 		const node = data[i];
 		const isLast = i === data.length - 1;
-		const hasLoadedChildren = Array.isArray(node.children);
+		const hasLoadedChildren = Array.isArray(node.children) && node.children.length > 0;
 		const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
 		const hasChildren = hasLoadedChildren || hasAsyncChildren;
 		const expanded = expandedState[node.value] || false;

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

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

package/cjs/components/TreeSelect/TreeSelectOption.cjs

@@ -13,8 +13,9 @@ const OPTION_GAP = 6;
 function TreeSelectOption({ node, level, expanded, hasChildren, selected, checked, indeterminate, showCheckbox, isLastChild, lineGuides, withLines, onToggleExpand, renderNode, chevronAriaLabels }) {
 	const indentPx = (level - 1) * LEVEL_OFFSET;
 	const handleExpandClick = (event) => {
-		event.stopPropagation();
-		event.preventDefault();
+		event?.stopPropagation();
+		event?.preventDefault();
+		if (!hasChildren) return;
 		onToggleExpand(node.value);
 	};
 	const handleExpandMouseDown = (event) => {
@@ -27,7 +28,8 @@ function TreeSelectOption({ node, level, expanded, hasChildren, selected, checke
 		hasChildren,
 		selected,
 		checked,
-		indeterminate
+		indeterminate,
+		expand: handleExpandClick
 	}) : null;
 	const lineElements = withLines && level > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		lineGuides.map((show, g) => show ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {

package/cjs/components/TreeSelect/TreeSelectOption.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeSelectOption.cjs","names":["classes","Combobox","AccordionChevron","CheckboxIndicator","CheckIcon"],"sources":["../../../src/components/TreeSelect/TreeSelectOption.tsx"],"sourcesContent":["import { AccordionChevron } from '../Accordion';\nimport { CheckboxIndicator } from '../Checkbox/CheckboxIndicator/CheckboxIndicator';\nimport { CheckIcon } from '../Checkbox/CheckIcon';\nimport { Combobox } from '../Combobox';\nimport type { TreeNodeData } from '../Tree';\nimport classes from './TreeSelect.module.css';\n\nconst LEVEL_OFFSET = 20;\nconst BASE_PADDING = 8;\nconst LINE_CONTENT_GAP = 5;\nconst OPTION_GAP = 6;\n\nexport interface TreeSelectChevronAriaLabels {\n  /** aria-label for the expand button when the node is collapsed @default 'Expand' */\n  expand?: string;\n\n  /** aria-label for the expand button when the node is expanded @default 'Collapse' */\n  collapse?: string;\n}\n\nexport interface TreeSelectOptionProps {\n  node: TreeNodeData;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  checked: boolean;\n  indeterminate: boolean;\n  showCheckbox: boolean;\n  isLastChild: boolean;\n  lineGuides: boolean[];\n  withLines: boolean;\n  onToggleExpand: (value: string) => void;\n  renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;\n  chevronAriaLabels?: TreeSelectChevronAriaLabels;\n}\n\nexport interface TreeSelectRenderNodePayload {\n  node: TreeNodeData;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  checked: boolean;\n  indeterminate: boolean;\n}\n\nexport function TreeSelectOption({\n  node,\n  level,\n  expanded,\n  hasChildren,\n  selected,\n  checked,\n  indeterminate,\n  showCheckbox,\n  isLastChild,\n  lineGuides,\n  withLines,\n  onToggleExpand,\n  renderNode,\n  chevronAriaLabels,\n}: TreeSelectOptionProps) {\n  const indentPx = (level - 1) * LEVEL_OFFSET;\n\n  const handleExpandClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n    event.preventDefault();\n    onToggleExpand(node.value);\n  };\n\n  const handleExpandMouseDown = (event: React.MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const customContent = renderNode\n    ? renderNode({ node, level, expanded, hasChildren, selected, checked, indeterminate })\n    : null;\n\n  const lineElements =\n    withLines && level > 1 ? (\n      <>\n        {lineGuides.map((show, g) =>\n          show ? (\n            <span\n              key={`g${g}`}\n              className={classes.guideLine}\n              style={{ insetInlineStart: BASE_PADDING + (g + 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2 }}\n            />\n          ) : null\n        )}\n        <span\n          className={classes.branchVertical}\n          data-last={isLastChild || undefined}\n          style={{\n            insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2,\n          }}\n        />\n        <span\n          className={classes.branchHorizontal}\n          style={{\n            insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2,\n            width: LEVEL_OFFSET / 2,\n          }}\n        />\n      </>\n    ) : null;\n\n  const isActive = selected || checked;\n  const showCheckMark = !showCheckbox && isActive;\n\n  const ariaChecked = showCheckbox ? (indeterminate && !checked ? 'mixed' : checked) : undefined;\n\n  return (\n    <Combobox.Option\n      value={node.value}\n      disabled={node.nodeProps?.disabled}\n      active={isActive}\n      className={classes.option}\n      style={{\n        paddingInlineStart:\n          BASE_PADDING +\n          indentPx +\n          (withLines && level > 1 ? LINE_CONTENT_GAP : 0) +\n          (!hasChildren ? OPTION_GAP : 0),\n      }}\n      aria-selected={isActive}\n      aria-level={level}\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-checked={ariaChecked}\n    >\n      {lineElements}\n      {customContent || (\n        <>\n          {hasChildren && (\n            <span\n              className={classes.expandIcon}\n              data-expanded={expanded || undefined}\n              onClick={handleExpandClick}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  handleExpandClick(e as any);\n                }\n              }}\n              onMouseDown={handleExpandMouseDown}\n              role=\"button\"\n              tabIndex={-1}\n              aria-label={\n                expanded\n                  ? (chevronAriaLabels?.collapse ?? 'Collapse')\n                  : (chevronAriaLabels?.expand ?? 'Expand')\n              }\n            >\n              <AccordionChevron size=\"80%\" />\n            </span>\n          )}\n          {showCheckbox && (\n            <CheckboxIndicator\n              checked={checked || indeterminate}\n              indeterminate={!checked && indeterminate}\n              size=\"18px\"\n            />\n          )}\n          <span className={classes.label}>{node.label}</span>\n          {showCheckMark && <CheckIcon className={classes.checkIcon} />}\n        </>\n      )}\n    </Combobox.Option>\n  );\n}\n\nTreeSelectOption.displayName = '@mantine/core/TreeSelectOption';\n"],"mappings":"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"}
+{"version":3,"file":"TreeSelectOption.cjs","names":["classes","Combobox","AccordionChevron","CheckboxIndicator","CheckIcon"],"sources":["../../../src/components/TreeSelect/TreeSelectOption.tsx"],"sourcesContent":["import { AccordionChevron } from '../Accordion';\nimport { CheckboxIndicator } from '../Checkbox/CheckboxIndicator/CheckboxIndicator';\nimport { CheckIcon } from '../Checkbox/CheckIcon';\nimport { Combobox } from '../Combobox';\nimport type { TreeNodeData } from '../Tree';\nimport classes from './TreeSelect.module.css';\n\nconst LEVEL_OFFSET = 20;\nconst BASE_PADDING = 8;\nconst LINE_CONTENT_GAP = 5;\nconst OPTION_GAP = 6;\n\nexport interface TreeSelectChevronAriaLabels {\n  /** aria-label for the expand button when the node is collapsed @default 'Expand' */\n  expand?: string;\n\n  /** aria-label for the expand button when the node is expanded @default 'Collapse' */\n  collapse?: string;\n}\n\nexport interface TreeSelectOptionProps {\n  node: TreeNodeData;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  checked: boolean;\n  indeterminate: boolean;\n  showCheckbox: boolean;\n  isLastChild: boolean;\n  lineGuides: boolean[];\n  withLines: boolean;\n  onToggleExpand: (value: string) => void;\n  renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;\n  chevronAriaLabels?: TreeSelectChevronAriaLabels;\n}\n\nexport interface TreeSelectRenderNodePayload {\n  node: TreeNodeData;\n  level: number;\n  expanded: boolean;\n  hasChildren: boolean;\n  selected: boolean;\n  checked: boolean;\n  indeterminate: boolean;\n\n  /** Toggles the expanded state of the node. Can be used to build a custom expand control\n   * in `renderNode` without controlling the expanded state externally.\n   * No-op for nodes without children. */\n  expand: (event?: React.MouseEvent) => void;\n}\n\nexport function TreeSelectOption({\n  node,\n  level,\n  expanded,\n  hasChildren,\n  selected,\n  checked,\n  indeterminate,\n  showCheckbox,\n  isLastChild,\n  lineGuides,\n  withLines,\n  onToggleExpand,\n  renderNode,\n  chevronAriaLabels,\n}: TreeSelectOptionProps) {\n  const indentPx = (level - 1) * LEVEL_OFFSET;\n\n  const handleExpandClick = (event?: React.MouseEvent) => {\n    event?.stopPropagation();\n    event?.preventDefault();\n\n    if (!hasChildren) {\n      return;\n    }\n\n    onToggleExpand(node.value);\n  };\n\n  const handleExpandMouseDown = (event: React.MouseEvent) => {\n    event.preventDefault();\n  };\n\n  const customContent = renderNode\n    ? renderNode({\n        node,\n        level,\n        expanded,\n        hasChildren,\n        selected,\n        checked,\n        indeterminate,\n        expand: handleExpandClick,\n      })\n    : null;\n\n  const lineElements =\n    withLines && level > 1 ? (\n      <>\n        {lineGuides.map((show, g) =>\n          show ? (\n            <span\n              key={`g${g}`}\n              className={classes.guideLine}\n              style={{ insetInlineStart: BASE_PADDING + (g + 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2 }}\n            />\n          ) : null\n        )}\n        <span\n          className={classes.branchVertical}\n          data-last={isLastChild || undefined}\n          style={{\n            insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2,\n          }}\n        />\n        <span\n          className={classes.branchHorizontal}\n          style={{\n            insetInlineStart: BASE_PADDING + (level - 1) * LEVEL_OFFSET - LEVEL_OFFSET / 2,\n            width: LEVEL_OFFSET / 2,\n          }}\n        />\n      </>\n    ) : null;\n\n  const isActive = selected || checked;\n  const showCheckMark = !showCheckbox && isActive;\n\n  const ariaChecked = showCheckbox ? (indeterminate && !checked ? 'mixed' : checked) : undefined;\n\n  return (\n    <Combobox.Option\n      value={node.value}\n      disabled={node.nodeProps?.disabled}\n      active={isActive}\n      className={classes.option}\n      style={{\n        paddingInlineStart:\n          BASE_PADDING +\n          indentPx +\n          (withLines && level > 1 ? LINE_CONTENT_GAP : 0) +\n          (!hasChildren ? OPTION_GAP : 0),\n      }}\n      aria-selected={isActive}\n      aria-level={level}\n      aria-expanded={hasChildren ? expanded : undefined}\n      aria-checked={ariaChecked}\n    >\n      {lineElements}\n      {customContent || (\n        <>\n          {hasChildren && (\n            <span\n              className={classes.expandIcon}\n              data-expanded={expanded || undefined}\n              onClick={handleExpandClick}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  handleExpandClick(e as any);\n                }\n              }}\n              onMouseDown={handleExpandMouseDown}\n              role=\"button\"\n              tabIndex={-1}\n              aria-label={\n                expanded\n                  ? (chevronAriaLabels?.collapse ?? 'Collapse')\n                  : (chevronAriaLabels?.expand ?? 'Expand')\n              }\n            >\n              <AccordionChevron size=\"80%\" />\n            </span>\n          )}\n          {showCheckbox && (\n            <CheckboxIndicator\n              checked={checked || indeterminate}\n              indeterminate={!checked && indeterminate}\n              size=\"18px\"\n            />\n          )}\n          <span className={classes.label}>{node.label}</span>\n          {showCheckMark && <CheckIcon className={classes.checkIcon} />}\n        </>\n      )}\n    </Combobox.Option>\n  );\n}\n\nTreeSelectOption.displayName = '@mantine/core/TreeSelectOption';\n"],"mappings":"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"}

package/cjs/components/TreeSelect/flatten-tree-select-data.cjs

@@ -4,7 +4,7 @@ function flattenTo(acc, data, expandedState, parent, level, parentGuides) {
 	for (let i = 0; i < data.length; i++) {
 		const node = data[i];
 		const isLast = i === data.length - 1;
-		const hasLoadedChildren = Array.isArray(node.children);
+		const hasLoadedChildren = Array.isArray(node.children) && node.children.length > 0;
 		const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;
 		const hasChildren = hasLoadedChildren || hasAsyncChildren;
 		const expanded = expandedState[node.value] || false;

package/cjs/components/TreeSelect/flatten-tree-select-data.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"flatten-tree-select-data.cjs","names":[],"sources":["../../../src/components/TreeSelect/flatten-tree-select-data.ts"],"sourcesContent":["import type { TreeNodeData } from '../Tree';\nimport type { TreeExpandedState } from '../Tree/use-tree';\n\nexport interface TreeSelectFlatNode {\n  node: TreeNodeData;\n  level: number;\n  parent: string | null;\n  hasChildren: boolean;\n  expanded: boolean;\n  isLastChild: boolean;\n  lineGuides: boolean[];\n}\n\nfunction flattenTo(\n  acc: TreeSelectFlatNode[],\n  data: TreeNodeData[],\n  expandedState: TreeExpandedState,\n  parent: string | null,\n  level: number,\n  parentGuides: boolean[]\n): void {\n  for (let i = 0; i < data.length; i++) {\n    const node = data[i];\n    const isLast = i === data.length - 1;\n    const hasLoadedChildren = Array.isArray(node.children);\n    const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n    const hasChildren = hasLoadedChildren || hasAsyncChildren;\n    const expanded = expandedState[node.value] || false;\n\n    acc.push({\n      node,\n      level,\n      parent,\n      hasChildren,\n      expanded,\n      isLastChild: isLast,\n      lineGuides: parentGuides,\n    });\n\n    if (expanded && hasLoadedChildren) {\n      const childGuides = level >= 2 ? [...parentGuides, !isLast] : [];\n      flattenTo(acc, node.children!, expandedState, node.value, level + 1, childGuides);\n    }\n  }\n}\n\nexport function flattenTreeSelectData(\n  data: TreeNodeData[],\n  expandedState: TreeExpandedState\n): TreeSelectFlatNode[] {\n  const result: TreeSelectFlatNode[] = [];\n  flattenTo(result, data, expandedState, null, 1, []);\n  return result;\n}\n"],"mappings":";;AAaA,SAAS,UACP,KACA,MACA,eACA,QACA,OACA,cACM;CACN,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,OAAO,KAAK;EAClB,MAAM,SAAS,MAAM,KAAK,SAAS;EACnC,MAAM,oBAAoB,MAAM,QAAQ,KAAK,QAAQ;EACrD,MAAM,mBAAmB,CAAC,CAAC,KAAK,eAAe,CAAC;EAChD,MAAM,cAAc,qBAAqB;EACzC,MAAM,WAAW,cAAc,KAAK,UAAU;EAE9C,IAAI,KAAK;GACP;GACA;GACA;GACA;GACA;GACA,aAAa;GACb,YAAY;EACd,CAAC;EAED,IAAI,YAAY,mBAAmB;GACjC,MAAM,cAAc,SAAS,IAAI,CAAC,GAAG,cAAc,CAAC,MAAM,IAAI,CAAC;GAC/D,UAAU,KAAK,KAAK,UAAW,eAAe,KAAK,OAAO,QAAQ,GAAG,WAAW;EAClF;CACF;AACF;AAEA,SAAgB,sBACd,MACA,eACsB;CACtB,MAAM,SAA+B,CAAC;CACtC,UAAU,QAAQ,MAAM,eAAe,MAAM,GAAG,CAAC,CAAC;CAClD,OAAO;AACT"}
+{"version":3,"file":"flatten-tree-select-data.cjs","names":[],"sources":["../../../src/components/TreeSelect/flatten-tree-select-data.ts"],"sourcesContent":["import type { TreeNodeData } from '../Tree';\nimport type { TreeExpandedState } from '../Tree/use-tree';\n\nexport interface TreeSelectFlatNode {\n  node: TreeNodeData;\n  level: number;\n  parent: string | null;\n  hasChildren: boolean;\n  expanded: boolean;\n  isLastChild: boolean;\n  lineGuides: boolean[];\n}\n\nfunction flattenTo(\n  acc: TreeSelectFlatNode[],\n  data: TreeNodeData[],\n  expandedState: TreeExpandedState,\n  parent: string | null,\n  level: number,\n  parentGuides: boolean[]\n): void {\n  for (let i = 0; i < data.length; i++) {\n    const node = data[i];\n    const isLast = i === data.length - 1;\n    const hasLoadedChildren = Array.isArray(node.children) && node.children.length > 0;\n    const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n    const hasChildren = hasLoadedChildren || hasAsyncChildren;\n    const expanded = expandedState[node.value] || false;\n\n    acc.push({\n      node,\n      level,\n      parent,\n      hasChildren,\n      expanded,\n      isLastChild: isLast,\n      lineGuides: parentGuides,\n    });\n\n    if (expanded && hasLoadedChildren) {\n      const childGuides = level >= 2 ? [...parentGuides, !isLast] : [];\n      flattenTo(acc, node.children!, expandedState, node.value, level + 1, childGuides);\n    }\n  }\n}\n\nexport function flattenTreeSelectData(\n  data: TreeNodeData[],\n  expandedState: TreeExpandedState\n): TreeSelectFlatNode[] {\n  const result: TreeSelectFlatNode[] = [];\n  flattenTo(result, data, expandedState, null, 1, []);\n  return result;\n}\n"],"mappings":";;AAaA,SAAS,UACP,KACA,MACA,eACA,QACA,OACA,cACM;CACN,KAAK,IAAI,IAAI,GAAG,IAAI,KAAK,QAAQ,KAAK;EACpC,MAAM,OAAO,KAAK;EAClB,MAAM,SAAS,MAAM,KAAK,SAAS;EACnC,MAAM,oBAAoB,MAAM,QAAQ,KAAK,QAAQ,KAAK,KAAK,SAAS,SAAS;EACjF,MAAM,mBAAmB,CAAC,CAAC,KAAK,eAAe,CAAC;EAChD,MAAM,cAAc,qBAAqB;EACzC,MAAM,WAAW,cAAc,KAAK,UAAU;EAE9C,IAAI,KAAK;GACP;GACA;GACA;GACA;GACA;GACA,aAAa;GACb,YAAY;EACd,CAAC;EAED,IAAI,YAAY,mBAAmB;GACjC,MAAM,cAAc,SAAS,IAAI,CAAC,GAAG,cAAc,CAAC,MAAM,IAAI,CAAC;GAC/D,UAAU,KAAK,KAAK,UAAW,eAAe,KAAK,OAAO,QAAQ,GAAG,WAAW;EAClF;CACF;AACF;AAEA,SAAgB,sBACd,MACA,eACsB;CACtB,MAAM,SAA+B,CAAC;CACtC,UAAU,QAAQ,MAAM,eAAe,MAAM,GAAG,CAAC,CAAC;CAClD,OAAO;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.context.mjs","names":[],"sources":["../../../src/components/Accordion/Accordion.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { AccordionFactory } from './Accordion';\nimport { AccordionChevronPosition, AccordionHeadingOrder } from './Accordion.types';\n\nexport interface AccordionContextValue {\n  loop: boolean | undefined;\n  transitionDuration: number | undefined;\n  disableChevronRotation: boolean | undefined;\n  chevronPosition: AccordionChevronPosition | undefined;\n  order: AccordionHeadingOrder | undefined;\n  chevron: React.ReactNode;\n  onChange: (value: string) => void;\n  isItemActive: (value: string) => boolean;\n  getControlId: (value: string) => string;\n  getRegionId: (value: string) => string;\n  getStyles: GetStylesApi<AccordionFactory>;\n  variant: string | undefined;\n  unstyled: boolean | undefined;\n  keepMounted: boolean | undefined;\n}\n\nexport const [AccordionProvider, useAccordionContext] = createSafeContext<AccordionContextValue>(\n  'Accordion component was not found in the tree'\n);\n"],"mappings":";;;AAqBA,MAAa,CAAC,mBAAmB,uBAAuB,kBACtD,+CACF"}
+{"version":3,"file":"Accordion.context.mjs","names":[],"sources":["../../../src/components/Accordion/Accordion.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { AccordionFactory } from './Accordion';\nimport { AccordionChevronPosition, AccordionHeadingOrder } from './Accordion.types';\n\nexport interface AccordionContextValue {\n  loop: boolean | undefined;\n  transitionDuration: number | undefined;\n  disableChevronRotation: boolean | undefined;\n  chevronPosition: AccordionChevronPosition | undefined;\n  order: AccordionHeadingOrder | undefined;\n  chevron: React.ReactNode;\n  onChange: (value: string) => void;\n  isItemActive: (value: string) => boolean;\n  getControlId: (value: string) => string;\n  getRegionId: (value: string) => string;\n  getStyles: GetStylesApi<AccordionFactory>;\n  variant: string | undefined;\n  unstyled: boolean | undefined;\n  keepMounted: boolean | undefined;\n  keepMountedMode: 'activity' | 'display-none' | undefined;\n}\n\nexport const [AccordionProvider, useAccordionContext] = createSafeContext<AccordionContextValue>(\n  'Accordion component was not found in the tree'\n);\n"],"mappings":";;;AAsBA,MAAa,CAAC,mBAAmB,uBAAuB,kBACtD,+CACF"}

package/esm/components/Accordion/Accordion.mjs

@@ -23,7 +23,8 @@ const defaultProps = {
 	chevronPosition: "right",
 	variant: "default",
 	chevronSize: "auto",
-	chevronIconSize: 16
+	chevronIconSize: 16,
+	keepMountedMode: "activity"
 };
 const varsResolver = createVarsResolver((_, { transitionDuration, chevronSize, radius }) => ({ root: {
 	"--accordion-transition-duration": transitionDuration === void 0 ? void 0 : `${transitionDuration}ms`,
@@ -32,7 +33,7 @@ const varsResolver = createVarsResolver((_, { transitionDuration, chevronSize, r
 } }));
 const Accordion = genericFactory((_props) => {
 	const props = useProps("Accordion", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, children, multiple, value, defaultValue, onChange, id, loop, transitionDuration, disableChevronRotation, chevronPosition, chevronSize, order, chevron, variant, radius, chevronIconSize, attributes, keepMounted, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, children, multiple, value, defaultValue, onChange, id, loop, transitionDuration, disableChevronRotation, chevronPosition, chevronSize, order, chevron, variant, radius, chevronIconSize, attributes, keepMounted, keepMountedMode, ...others } = props;
 	const uid = useId(id);
 	const [_value, handleChange] = useUncontrolled({
 		value,
@@ -72,7 +73,8 @@ const Accordion = genericFactory((_props) => {
 			getStyles,
 			variant,
 			unstyled,
-			keepMounted
+			keepMounted,
+			keepMountedMode
 		},
 		children: /* @__PURE__ */ jsx(Box, {
 			...getStyles("root"),

package/esm/components/Accordion/Accordion.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.mjs","names":["classes"],"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getRadius,\n  getSafeId,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionProvider } from './Accordion.context';\nimport { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types';\nimport { AccordionChevron } from './AccordionChevron';\nimport { AccordionControl, type AccordionControlProps } from './AccordionControl/AccordionControl';\nimport { AccordionItem, type AccordionItemProps } from './AccordionItem/AccordionItem';\nimport { AccordionPanel, type AccordionPanelProps } from './AccordionPanel/AccordionPanel';\nimport classes from './Accordion.module.css';\nimport type { AccordionItemContextValue } from './AccordionItem.context';\nexport type AccordionStylesNames =\n  | 'root'\n  | 'content'\n  | 'item'\n  | 'panel'\n  | 'icon'\n  | 'chevron'\n  | 'label'\n  | 'itemTitle'\n  | 'control';\n\nexport type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';\nexport type AccordionCssVariables = {\n  root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';\n};\n\nexport interface AccordionProps<Multiple extends boolean = false>\n  extends\n    BoxProps,\n    StylesApiProps<AccordionFactory>,\n    ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> {\n  /** If set, multiple items can be opened at the same time @default false */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: AccordionValue<Multiple>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: AccordionValue<Multiple>;\n\n  /** Called when value changes, payload type depends on `multiple` prop */\n  onChange?: (value: AccordionValue<Multiple>) => void;\n\n  /** If set, arrow keys loop through items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** If set, chevron rotation is disabled @default false */\n  disableChevronRotation?: boolean;\n\n  /** Position of the chevron relative to the item label @default right */\n  chevronPosition?: AccordionChevronPosition;\n\n  /** Size of the chevron icon container @default auto */\n  chevronSize?: number | string;\n\n  /** Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. @default 16 */\n  chevronIconSize?: number | string;\n\n  /** Sets heading level (h2-h6) for `Accordion.Control` elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect. */\n  order?: AccordionHeadingOrder;\n\n  /** Custom chevron icon */\n  chevron?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. @default true */\n  keepMounted?: boolean;\n}\n\nexport type AccordionFactory = Factory<{\n  props: AccordionProps;\n  ref: HTMLDivElement;\n  stylesNames: AccordionStylesNames;\n  vars: AccordionCssVariables;\n  variant: AccordionVariant;\n  signature: <Multiple extends boolean = false>(\n    props: AccordionProps<Multiple>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Item: typeof AccordionItem;\n    Panel: typeof AccordionPanel;\n    Control: typeof AccordionControl;\n    Chevron: typeof AccordionChevron;\n  };\n}>;\n\nconst defaultProps = {\n  multiple: false,\n  loop: true,\n  disableChevronRotation: false,\n  chevronPosition: 'right',\n  variant: 'default',\n  chevronSize: 'auto',\n  chevronIconSize: 16,\n} satisfies Partial<AccordionProps>;\n\nconst varsResolver = createVarsResolver<AccordionFactory>(\n  (_, { transitionDuration, chevronSize, radius }) => ({\n    root: {\n      '--accordion-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--accordion-chevron-size': chevronSize === undefined ? undefined : rem(chevronSize),\n      '--accordion-radius': radius === undefined ? undefined : getRadius(radius),\n    },\n  })\n);\n\nexport const Accordion = genericFactory<AccordionFactory>((_props) => {\n  const props = useProps('Accordion', defaultProps as any, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    id,\n    loop,\n    transitionDuration,\n    disableChevronRotation,\n    chevronPosition,\n    chevronSize,\n    order,\n    chevron,\n    variant,\n    radius,\n    chevronIconSize,\n    attributes,\n    keepMounted,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const isItemActive = (itemValue: string) =>\n    Array.isArray(_value) ? _value.includes(itemValue) : itemValue === _value;\n\n  const handleItemChange = (itemValue: string) => {\n    const nextValue = Array.isArray(_value)\n      ? _value.includes(itemValue)\n        ? _value.filter((selectedValue) => selectedValue !== itemValue)\n        : [..._value, itemValue]\n      : itemValue === _value\n        ? null\n        : (itemValue as any);\n\n    handleChange(nextValue);\n  };\n\n  const getStyles = useStyles<AccordionFactory>({\n    name: 'Accordion',\n    classes,\n    props: props as AccordionProps,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <AccordionProvider\n      value={{\n        isItemActive,\n        onChange: handleItemChange,\n        getControlId: getSafeId(\n          `${uid}-control`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        getRegionId: getSafeId(\n          `${uid}-panel`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        chevron: chevron === null ? null : chevron || <AccordionChevron size={chevronIconSize} />,\n        transitionDuration,\n        disableChevronRotation,\n        chevronPosition,\n        order,\n        loop,\n        getStyles,\n        variant,\n        unstyled,\n        keepMounted,\n      }}\n    >\n      <Box {...getStyles('root')} id={uid} {...others} variant={variant} data-accordion>\n        {children}\n      </Box>\n    </AccordionProvider>\n  );\n});\n\nAccordion.classes = classes;\nAccordion.varsResolver = varsResolver;\nAccordion.displayName = '@mantine/core/Accordion';\nAccordion.Item = AccordionItem;\nAccordion.Panel = AccordionPanel;\nAccordion.Control = AccordionControl;\nAccordion.Chevron = AccordionChevron;\n\nexport namespace Accordion {\n  export type Props = AccordionProps;\n  export type StylesNames = AccordionStylesNames;\n  export type CssVariables = AccordionCssVariables;\n  export type Factory = AccordionFactory;\n  export type Variant = AccordionVariant;\n\n  export namespace Control {\n    export type Props = AccordionControlProps;\n  }\n\n  export namespace Item {\n    export type Props = AccordionItemProps;\n    export type Context = AccordionItemContextValue;\n  }\n\n  export namespace Panel {\n    export type Props = AccordionPanelProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyGA,MAAM,eAAe;CACnB,UAAU;CACV,MAAM;CACN,wBAAwB;CACxB,iBAAiB;CACjB,SAAS;CACT,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,oBAAoB,aAAa,cAAc,EACnD,MAAM;CACJ,mCACE,uBAAuB,KAAA,IAAY,KAAA,IAAY,GAAG,mBAAmB;CACvE,4BAA4B,gBAAgB,KAAA,IAAY,KAAA,IAAY,IAAI,WAAW;CACnF,sBAAsB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;AAC3E,EACF,EACF;AAEA,MAAa,YAAY,gBAAkC,WAAW;CACpE,MAAM,QAAQ,SAAS,aAAa,cAAqB,MAAM;CAC/D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,UACA,OACA,cACA,UACA,IACA,MACA,oBACA,wBACA,iBACA,aACA,OACA,SACA,SACA,QACA,iBACA,YACA,aACA,GAAG,WACD;CAEJ,MAAM,MAAM,MAAM,EAAE;CACpB,MAAM,CAAC,QAAQ,gBAAgB,gBAAgB;EAC7C;EACA;EACA,YAAY,WAAY,CAAC,IAAY;EACrC;CACF,CAAC;CAED,MAAM,gBAAgB,cACpB,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,SAAS,IAAI,cAAc;CAErE,MAAM,oBAAoB,cAAsB;EAS9C,aARkB,MAAM,QAAQ,MAAM,IAClC,OAAO,SAAS,SAAS,IACvB,OAAO,QAAQ,kBAAkB,kBAAkB,SAAS,IAC5D,CAAC,GAAG,QAAQ,SAAS,IACvB,cAAc,SACZ,OACC,SAEe;CACxB;CAEA,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA,UAAU;GACV,cAAc,UACZ,GAAG,IAAI,WACP,2EACF;GACA,aAAa,UACX,GAAG,IAAI,SACP,2EACF;GACA,SAAS,YAAY,OAAO,OAAO,WAAW,oBAAC,kBAAD,EAAkB,MAAM,gBAAkB,CAAA;GACxF;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,IAAI;GAAK,GAAI;GAAiB;GAAS,kBAAA;GAChE;EACE,CAAA;CACY,CAAA;AAEvB,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,UAAU,OAAO;AACjB,UAAU,QAAQ;AAClB,UAAU,UAAU;AACpB,UAAU,UAAU"}
+{"version":3,"file":"Accordion.mjs","names":["classes"],"sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createVarsResolver,\n  ElementProps,\n  Factory,\n  genericFactory,\n  getRadius,\n  getSafeId,\n  MantineRadius,\n  rem,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../core';\nimport { AccordionProvider } from './Accordion.context';\nimport { AccordionChevronPosition, AccordionHeadingOrder, AccordionValue } from './Accordion.types';\nimport { AccordionChevron } from './AccordionChevron';\nimport { AccordionControl, type AccordionControlProps } from './AccordionControl/AccordionControl';\nimport { AccordionItem, type AccordionItemProps } from './AccordionItem/AccordionItem';\nimport { AccordionPanel, type AccordionPanelProps } from './AccordionPanel/AccordionPanel';\nimport classes from './Accordion.module.css';\nimport type { AccordionItemContextValue } from './AccordionItem.context';\nexport type AccordionStylesNames =\n  | 'root'\n  | 'content'\n  | 'item'\n  | 'panel'\n  | 'icon'\n  | 'chevron'\n  | 'label'\n  | 'itemTitle'\n  | 'control';\n\nexport type AccordionVariant = 'default' | 'contained' | 'filled' | 'separated';\nexport type AccordionCssVariables = {\n  root: '--accordion-transition-duration' | '--accordion-chevron-size' | '--accordion-radius';\n};\n\nexport interface AccordionProps<Multiple extends boolean = false>\n  extends\n    BoxProps,\n    StylesApiProps<AccordionFactory>,\n    ElementProps<'div', 'value' | 'defaultValue' | 'onChange'> {\n  /** If set, multiple items can be opened at the same time @default false */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: AccordionValue<Multiple>;\n\n  /** Uncontrolled component default value */\n  defaultValue?: AccordionValue<Multiple>;\n\n  /** Called when value changes, payload type depends on `multiple` prop */\n  onChange?: (value: AccordionValue<Multiple>) => void;\n\n  /** If set, arrow keys loop through items (first to last and last to first) @default true */\n  loop?: boolean;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** If set, chevron rotation is disabled @default false */\n  disableChevronRotation?: boolean;\n\n  /** Position of the chevron relative to the item label @default right */\n  chevronPosition?: AccordionChevronPosition;\n\n  /** Size of the chevron icon container @default auto */\n  chevronSize?: number | string;\n\n  /** Size of the default chevron icon. Ignored when `chevron` prop is set. Use `chevronSize` instead when using custom chevron. @default 16 */\n  chevronIconSize?: number | string;\n\n  /** Sets heading level (h2-h6) for `Accordion.Control` elements. Wraps each control in the corresponding heading tag, recommended to meet WAI-ARIA accessibility requirements. Has no visual effect. */\n  order?: AccordionHeadingOrder;\n\n  /** Custom chevron icon */\n  chevron?: React.ReactNode;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius. Numbers are converted to rem. @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** If set to `false`, panels are unmounted when collapsed. By default, panels stay mounted when collapsed. @default true */\n  keepMounted?: boolean;\n\n  /** Controls how inactive panels 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\nexport type AccordionFactory = Factory<{\n  props: AccordionProps;\n  ref: HTMLDivElement;\n  stylesNames: AccordionStylesNames;\n  vars: AccordionCssVariables;\n  variant: AccordionVariant;\n  signature: <Multiple extends boolean = false>(\n    props: AccordionProps<Multiple>\n  ) => React.JSX.Element;\n  staticComponents: {\n    Item: typeof AccordionItem;\n    Panel: typeof AccordionPanel;\n    Control: typeof AccordionControl;\n    Chevron: typeof AccordionChevron;\n  };\n}>;\n\nconst defaultProps = {\n  multiple: false,\n  loop: true,\n  disableChevronRotation: false,\n  chevronPosition: 'right',\n  variant: 'default',\n  chevronSize: 'auto',\n  chevronIconSize: 16,\n  keepMountedMode: 'activity',\n} satisfies Partial<AccordionProps>;\n\nconst varsResolver = createVarsResolver<AccordionFactory>(\n  (_, { transitionDuration, chevronSize, radius }) => ({\n    root: {\n      '--accordion-transition-duration':\n        transitionDuration === undefined ? undefined : `${transitionDuration}ms`,\n      '--accordion-chevron-size': chevronSize === undefined ? undefined : rem(chevronSize),\n      '--accordion-radius': radius === undefined ? undefined : getRadius(radius),\n    },\n  })\n);\n\nexport const Accordion = genericFactory<AccordionFactory>((_props) => {\n  const props = useProps('Accordion', defaultProps as any, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    children,\n    multiple,\n    value,\n    defaultValue,\n    onChange,\n    id,\n    loop,\n    transitionDuration,\n    disableChevronRotation,\n    chevronPosition,\n    chevronSize,\n    order,\n    chevron,\n    variant,\n    radius,\n    chevronIconSize,\n    attributes,\n    keepMounted,\n    keepMountedMode,\n    ...others\n  } = props;\n\n  const uid = useId(id);\n  const [_value, handleChange] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as any) : null,\n    onChange,\n  });\n\n  const isItemActive = (itemValue: string) =>\n    Array.isArray(_value) ? _value.includes(itemValue) : itemValue === _value;\n\n  const handleItemChange = (itemValue: string) => {\n    const nextValue = Array.isArray(_value)\n      ? _value.includes(itemValue)\n        ? _value.filter((selectedValue) => selectedValue !== itemValue)\n        : [..._value, itemValue]\n      : itemValue === _value\n        ? null\n        : (itemValue as any);\n\n    handleChange(nextValue);\n  };\n\n  const getStyles = useStyles<AccordionFactory>({\n    name: 'Accordion',\n    classes,\n    props: props as AccordionProps,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  return (\n    <AccordionProvider\n      value={{\n        isItemActive,\n        onChange: handleItemChange,\n        getControlId: getSafeId(\n          `${uid}-control`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        getRegionId: getSafeId(\n          `${uid}-panel`,\n          'Accordion.Item component was rendered with invalid value or without value'\n        ),\n        chevron: chevron === null ? null : chevron || <AccordionChevron size={chevronIconSize} />,\n        transitionDuration,\n        disableChevronRotation,\n        chevronPosition,\n        order,\n        loop,\n        getStyles,\n        variant,\n        unstyled,\n        keepMounted,\n        keepMountedMode,\n      }}\n    >\n      <Box {...getStyles('root')} id={uid} {...others} variant={variant} data-accordion>\n        {children}\n      </Box>\n    </AccordionProvider>\n  );\n});\n\nAccordion.classes = classes;\nAccordion.varsResolver = varsResolver;\nAccordion.displayName = '@mantine/core/Accordion';\nAccordion.Item = AccordionItem;\nAccordion.Panel = AccordionPanel;\nAccordion.Control = AccordionControl;\nAccordion.Chevron = AccordionChevron;\n\nexport namespace Accordion {\n  export type Props = AccordionProps;\n  export type StylesNames = AccordionStylesNames;\n  export type CssVariables = AccordionCssVariables;\n  export type Factory = AccordionFactory;\n  export type Variant = AccordionVariant;\n\n  export namespace Control {\n    export type Props = AccordionControlProps;\n  }\n\n  export namespace Item {\n    export type Props = AccordionItemProps;\n    export type Context = AccordionItemContextValue;\n  }\n\n  export namespace Panel {\n    export type Props = AccordionPanelProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AA4GA,MAAM,eAAe;CACnB,UAAU;CACV,MAAM;CACN,wBAAwB;CACxB,iBAAiB;CACjB,SAAS;CACT,aAAa;CACb,iBAAiB;CACjB,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAClB,GAAG,EAAE,oBAAoB,aAAa,cAAc,EACnD,MAAM;CACJ,mCACE,uBAAuB,KAAA,IAAY,KAAA,IAAY,GAAG,mBAAmB;CACvE,4BAA4B,gBAAgB,KAAA,IAAY,KAAA,IAAY,IAAI,WAAW;CACnF,sBAAsB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;AAC3E,EACF,EACF;AAEA,MAAa,YAAY,gBAAkC,WAAW;CACpE,MAAM,QAAQ,SAAS,aAAa,cAAqB,MAAM;CAC/D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,UACA,OACA,cACA,UACA,IACA,MACA,oBACA,wBACA,iBACA,aACA,OACA,SACA,SACA,QACA,iBACA,YACA,aACA,iBACA,GAAG,WACD;CAEJ,MAAM,MAAM,MAAM,EAAE;CACpB,MAAM,CAAC,QAAQ,gBAAgB,gBAAgB;EAC7C;EACA;EACA,YAAY,WAAY,CAAC,IAAY;EACrC;CACF,CAAC;CAED,MAAM,gBAAgB,cACpB,MAAM,QAAQ,MAAM,IAAI,OAAO,SAAS,SAAS,IAAI,cAAc;CAErE,MAAM,oBAAoB,cAAsB;EAS9C,aARkB,MAAM,QAAQ,MAAM,IAClC,OAAO,SAAS,SAAS,IACvB,OAAO,QAAQ,kBAAkB,kBAAkB,SAAS,IAC5D,CAAC,GAAG,QAAQ,SAAS,IACvB,cAAc,SACZ,OACC,SAEe;CACxB;CAEA,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACO;EACP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,mBAAD;EACE,OAAO;GACL;GACA,UAAU;GACV,cAAc,UACZ,GAAG,IAAI,WACP,2EACF;GACA,aAAa,UACX,GAAG,IAAI,SACP,2EACF;GACA,SAAS,YAAY,OAAO,OAAO,WAAW,oBAAC,kBAAD,EAAkB,MAAM,gBAAkB,CAAA;GACxF;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,IAAI;GAAK,GAAI;GAAiB;GAAS,kBAAA;GAChE;EACE,CAAA;CACY,CAAA;AAEvB,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc;AACxB,UAAU,OAAO;AACjB,UAAU,QAAQ;AAClB,UAAU,UAAU;AACpB,UAAU,UAAU"}

package/esm/components/Accordion/AccordionPanel/AccordionPanel.mjs

@@ -8,7 +8,7 @@ import Accordion_module_default from "../Accordion.module.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Accordion/AccordionPanel/AccordionPanel.tsx
 const AccordionPanel = factory((props) => {
-	const { classNames, className, style, styles, vars, children, keepMounted, ...others } = useProps("AccordionPanel", null, props);
+	const { classNames, className, style, styles, vars, children, keepMounted, keepMountedMode, ...others } = useProps("AccordionPanel", null, props);
 	const { value } = useAccordionItemContext();
 	const ctx = useAccordionContext();
 	return /* @__PURE__ */ jsx(Collapse, {
@@ -24,6 +24,7 @@ const AccordionPanel = factory((props) => {
 		id: ctx.getRegionId(value),
 		"aria-labelledby": ctx.getControlId(value),
 		keepMounted: keepMounted ?? ctx.keepMounted,
+		keepMountedMode: keepMountedMode ?? ctx.keepMountedMode,
 		...others,
 		children: /* @__PURE__ */ jsx("div", {
 			...ctx.getStyles("content", {

package/esm/components/Accordion/AccordionPanel/AccordionPanel.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionPanel.mjs","names":["classes"],"sources":["../../../../src/components/Accordion/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { Collapse } from '../../Collapse';\nimport { useAccordionContext } from '../Accordion.context';\nimport { useAccordionItemContext } from '../AccordionItem.context';\nimport classes from '../Accordion.module.css';\n\nexport type AccordionPanelStylesNames = 'panel' | 'content';\n\nexport interface AccordionPanelProps\n  extends BoxProps, CompoundStylesApiProps<AccordionPanelFactory>, ElementProps<'div'> {\n  /** Called when the panel animation completes */\n  onTransitionEnd?: () => void;\n\n  /** Called when the panel animation starts */\n  onTransitionStart?: () => void;\n\n  /** If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting. */\n  keepMounted?: boolean;\n}\n\nexport type AccordionPanelFactory = Factory<{\n  props: AccordionPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: AccordionPanelStylesNames;\n  compound: true;\n}>;\n\nexport const AccordionPanel = factory<AccordionPanelFactory>((props) => {\n  const { classNames, className, style, styles, vars, children, keepMounted, ...others } = useProps(\n    'AccordionPanel',\n    null,\n    props\n  );\n\n  const { value } = useAccordionItemContext();\n  const ctx = useAccordionContext();\n\n  return (\n    <Collapse\n      {...ctx.getStyles('panel', { className, classNames, style, styles })}\n      expanded={ctx.isItemActive(value)}\n      transitionDuration={ctx.transitionDuration ?? 200}\n      role=\"region\"\n      id={ctx.getRegionId(value)}\n      aria-labelledby={ctx.getControlId(value)}\n      keepMounted={keepMounted ?? ctx.keepMounted}\n      {...others}\n    >\n      <div {...ctx.getStyles('content', { classNames, styles })}>{children}</div>\n    </Collapse>\n  );\n});\n\nAccordionPanel.displayName = '@mantine/core/AccordionPanel';\nAccordionPanel.classes = classes;\n"],"mappings":";;;;;;;;;AAkCA,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,UAAU,aAAa,GAAG,WAAW,SACvF,kBACA,MACA,KACF;CAEA,MAAM,EAAE,UAAU,wBAAwB;CAC1C,MAAM,MAAM,oBAAoB;CAEhC,OACE,oBAAC,UAAD;EACE,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,UAAU,IAAI,aAAa,KAAK;EAChC,oBAAoB,IAAI,sBAAsB;EAC9C,MAAK;EACL,IAAI,IAAI,YAAY,KAAK;EACzB,mBAAiB,IAAI,aAAa,KAAK;EACvC,aAAa,eAAe,IAAI;EAChC,GAAI;YAEJ,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,WAAW;IAAE;IAAY;GAAO,CAAC;GAAI;EAAc,CAAA;CAClE,CAAA;AAEd,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUA"}
+{"version":3,"file":"AccordionPanel.mjs","names":["classes"],"sources":["../../../../src/components/Accordion/AccordionPanel/AccordionPanel.tsx"],"sourcesContent":["import {\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { Collapse } from '../../Collapse';\nimport { useAccordionContext } from '../Accordion.context';\nimport { useAccordionItemContext } from '../AccordionItem.context';\nimport classes from '../Accordion.module.css';\n\nexport type AccordionPanelStylesNames = 'panel' | 'content';\n\nexport interface AccordionPanelProps\n  extends BoxProps, CompoundStylesApiProps<AccordionPanelFactory>, ElementProps<'div'> {\n  /** Called when the panel animation completes */\n  onTransitionEnd?: () => void;\n\n  /** Called when the panel animation starts */\n  onTransitionStart?: () => void;\n\n  /** If set, overrides the Accordion-level `keepMounted` value. When undefined (default), uses Accordion's `keepMounted` setting. */\n  keepMounted?: boolean;\n\n  /** If set, overrides the Accordion-level `keepMountedMode` value. When undefined (default), uses Accordion's `keepMountedMode` setting. */\n  keepMountedMode?: 'activity' | 'display-none';\n}\n\nexport type AccordionPanelFactory = Factory<{\n  props: AccordionPanelProps;\n  ref: HTMLDivElement;\n  stylesNames: AccordionPanelStylesNames;\n  compound: true;\n}>;\n\nexport const AccordionPanel = factory<AccordionPanelFactory>((props) => {\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    children,\n    keepMounted,\n    keepMountedMode,\n    ...others\n  } = useProps('AccordionPanel', null, props);\n\n  const { value } = useAccordionItemContext();\n  const ctx = useAccordionContext();\n\n  return (\n    <Collapse\n      {...ctx.getStyles('panel', { className, classNames, style, styles })}\n      expanded={ctx.isItemActive(value)}\n      transitionDuration={ctx.transitionDuration ?? 200}\n      role=\"region\"\n      id={ctx.getRegionId(value)}\n      aria-labelledby={ctx.getControlId(value)}\n      keepMounted={keepMounted ?? ctx.keepMounted}\n      keepMountedMode={keepMountedMode ?? ctx.keepMountedMode}\n      {...others}\n    >\n      <div {...ctx.getStyles('content', { classNames, styles })}>{children}</div>\n    </Collapse>\n  );\n});\n\nAccordionPanel.displayName = '@mantine/core/AccordionPanel';\nAccordionPanel.classes = classes;\n"],"mappings":";;;;;;;;;AAqCA,MAAa,iBAAiB,SAAgC,UAAU;CACtE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,aACA,iBACA,GAAG,WACD,SAAS,kBAAkB,MAAM,KAAK;CAE1C,MAAM,EAAE,UAAU,wBAAwB;CAC1C,MAAM,MAAM,oBAAoB;CAEhC,OACE,oBAAC,UAAD;EACE,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAY;GAAO;EAAO,CAAC;EACnE,UAAU,IAAI,aAAa,KAAK;EAChC,oBAAoB,IAAI,sBAAsB;EAC9C,MAAK;EACL,IAAI,IAAI,YAAY,KAAK;EACzB,mBAAiB,IAAI,aAAa,KAAK;EACvC,aAAa,eAAe,IAAI;EAChC,iBAAiB,mBAAmB,IAAI;EACxC,GAAI;YAEJ,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,WAAW;IAAE;IAAY;GAAO,CAAC;GAAI;EAAc,CAAA;CAClE,CAAA;AAEd,CAAC;AAED,eAAe,cAAc;AAC7B,eAAe,UAAUA"}

package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs

@@ -10,7 +10,7 @@ function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, asid
 	const asideWidth = aside?.width;
 	const collapsedAsideTransform = "translateX(var(--app-shell-aside-width))";
 	const collapsedAsideTransformRtl = "translateX(calc(var(--app-shell-aside-width) * -1))";
-	if (aside?.breakpoint && !aside?.collapsed?.mobile) {
+	if (aside?.breakpoint !== void 0 && !aside?.collapsed?.mobile) {
 		maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};
 		if (mode === "fixed") {
 			maxMediaStyles[aside?.breakpoint]["--app-shell-aside-width"] = "100%";
@@ -38,7 +38,7 @@ function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, asid
 			}
 		});
 	}
-	if (aside?.breakpoint && mode === "static") {
+	if (aside?.breakpoint !== void 0 && mode === "static") {
 		minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};
 		minMediaStyles[aside.breakpoint]["--app-shell-aside-position"] = "sticky";
 		minMediaStyles[aside.breakpoint]["--app-shell-aside-grid-row"] = "2";

package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-aside-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignAsideVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  aside: AppShellProps['aside'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  aside,\n  theme,\n  mode,\n}: AssignAsideVariablesInput) {\n  const asideWidth = aside?.width;\n  const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n  const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n  if (aside?.breakpoint && !aside?.collapsed?.mobile) {\n    maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(asideWidth)) {\n    const baseSize = rem(getBaseSize(asideWidth));\n    baseStyles['--app-shell-aside-width'] = baseSize;\n    baseStyles['--app-shell-aside-offset'] = baseSize;\n  }\n\n  if (isResponsiveSize(asideWidth)) {\n    if (typeof asideWidth.base !== 'undefined') {\n      baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n      baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n    }\n\n    keys(asideWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n        minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n      }\n    });\n  }\n\n  if (aside?.breakpoint && mode === 'static') {\n    minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n    // Adjust main column end when aside is visible\n    minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n  }\n\n  if (aside?.collapsed?.desktop) {\n    const breakpointValue = aside!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n    } else {\n      minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n    }\n    minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n\n  if (aside?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,cAAc,CAAC,OAAO,WAAW,QAAQ;EAClD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE;CACF;CAEA,IAAI,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;EAC9D;EAEA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,6BAA6B,IAAI,WAAY,IAAI;IACrE,eAAe,IAAI,CAAC,8BAA8B,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,cAAc,SAAS,UAAU;EAC1C,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,mCAAmC;EAEpE,eAAe,MAAM,WAAW,CAAC,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,8BAA8B;OACzD;GACL,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,+BAA+B;GAC/D,eAAe,gBAAgB,CAAC,iCAAiC;EACnE;EACA,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkB,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,8BAA8B;EAChE,OACE,eAAe,gBAAgB,CAAC,6BAA6B;EAE/D,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;AACF"}
+{"version":3,"file":"assign-aside-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignAsideVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  aside: AppShellProps['aside'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  aside,\n  theme,\n  mode,\n}: AssignAsideVariablesInput) {\n  const asideWidth = aside?.width;\n  const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n  const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n  if (aside?.breakpoint !== undefined && !aside?.collapsed?.mobile) {\n    maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n      maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(asideWidth)) {\n    const baseSize = rem(getBaseSize(asideWidth));\n    baseStyles['--app-shell-aside-width'] = baseSize;\n    baseStyles['--app-shell-aside-offset'] = baseSize;\n  }\n\n  if (isResponsiveSize(asideWidth)) {\n    if (typeof asideWidth.base !== 'undefined') {\n      baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n      baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n    }\n\n    keys(asideWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n        minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n      }\n    });\n  }\n\n  if (aside?.breakpoint !== undefined && mode === 'static') {\n    minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n    minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n    // Adjust main column end when aside is visible\n    minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n  }\n\n  if (aside?.collapsed?.desktop) {\n    const breakpointValue = aside!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n    } else {\n      minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n    }\n    minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n\n  if (aside?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    if (mode === 'fixed') {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n      maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n    } else {\n      maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n    maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,eAAe,KAAA,KAAa,CAAC,OAAO,WAAW,QAAQ;EAChE,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE;CACF;CAEA,IAAI,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;EAC9D;EAEA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,6BAA6B,IAAI,WAAY,IAAI;IACrE,eAAe,IAAI,CAAC,8BAA8B,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,eAAe,KAAA,KAAa,SAAS,UAAU;EACxD,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,mCAAmC;EAEpE,eAAe,MAAM,WAAW,CAAC,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,8BAA8B;OACzD;GACL,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,+BAA+B;GAC/D,eAAe,gBAAgB,CAAC,iCAAiC;EACnE;EACA,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkB,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,8BAA8B;EAChE,OACE,eAAe,gBAAgB,CAAC,6BAA6B;EAE/D,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;AACF"}

package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs

@@ -10,7 +10,7 @@ function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, nav
 	const navbarWidth = navbar?.width;
 	const collapsedNavbarTransform = "translateX(calc(var(--app-shell-navbar-width) * -1))";
 	const collapsedNavbarTransformRtl = "translateX(var(--app-shell-navbar-width))";
-	if (navbar?.breakpoint && !navbar?.collapsed?.mobile) {
+	if (navbar?.breakpoint !== void 0 && !navbar?.collapsed?.mobile) {
 		maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};
 		maxMediaStyles[navbar?.breakpoint]["--app-shell-navbar-offset"] = "0px";
 		maxMediaStyles[navbar?.breakpoint]["--app-shell-navbar-width"] = "100%";
@@ -37,7 +37,7 @@ function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, nav
 			}
 		});
 	}
-	if (navbar?.breakpoint && mode === "static") {
+	if (navbar?.breakpoint !== void 0 && mode === "static") {
 		minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};
 		minMediaStyles[navbar.breakpoint]["--app-shell-navbar-position"] = "sticky";
 		minMediaStyles[navbar.breakpoint]["--app-shell-navbar-grid-row"] = "2";

package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  navbar: AppShellProps['navbar'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  navbar,\n  theme,\n  mode,\n}: AssignNavbarVariablesInput) {\n  const navbarWidth = navbar?.width;\n  const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n  const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n  if (navbar?.breakpoint && !navbar?.collapsed?.mobile) {\n    maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n    if (mode === 'static') {\n      maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(navbarWidth)) {\n    const baseSize = rem(getBaseSize(navbarWidth));\n    baseStyles['--app-shell-navbar-width'] = baseSize;\n    baseStyles['--app-shell-navbar-offset'] = baseSize;\n    if (mode === 'static') {\n      baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(navbarWidth)) {\n    if (typeof navbarWidth.base !== 'undefined') {\n      baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n      baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n      if (mode === 'static') {\n        baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n      }\n    }\n\n    keys(navbarWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n        minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n        if (mode === 'static') {\n          minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n        }\n      }\n    });\n  }\n\n  if (navbar?.breakpoint && mode === 'static') {\n    minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n    minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n  }\n\n  if (navbar?.collapsed?.desktop) {\n    const breakpointValue = navbar!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n    } else {\n      // In static mode, hide the element completely so grid column collapses\n      minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n    }\n  }\n\n  if (navbar?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n    if (mode === 'static') {\n      maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,cAAc,CAAC,QAAQ,WAAW,QAAQ;EACpD,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,WAAW,CAAC,+BAA+B;EAClE,eAAe,QAAQ,WAAW,CAAC,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,WAAW,CAAC,mCAAmC;CAE1E;CAEA,IAAI,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAI,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;EAEtE;EAEA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,8BAA8B,IAAI,YAAa,IAAI;IACvE,eAAe,IAAI,CAAC,+BAA+B,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmC,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,cAAc,SAAS,UAAU;EAC3C,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,oCAAoC;EACtE,eAAe,OAAO,WAAW,CAAC,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,+BAA+B;OAC1D;GAEL,eAAe,gBAAgB,CAAC,8BAA8B;GAC9D,eAAe,gBAAgB,CAAC,gCAAgC;GAChE,eAAe,gBAAgB,CAAC,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,8BAA8B;EAC9D,eAAe,gBAAgB,CAAC,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,gBAAgB,CAAC,mCAAmC;EAErE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;CACJ;AACF"}
+{"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n  baseStyles: CSSVariables;\n  minMediaStyles: MediaQueryVariables;\n  maxMediaStyles: MediaQueryVariables;\n  navbar: AppShellProps['navbar'] | undefined;\n  theme: MantineTheme;\n  mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n  baseStyles,\n  minMediaStyles,\n  maxMediaStyles,\n  navbar,\n  theme,\n  mode,\n}: AssignNavbarVariablesInput) {\n  const navbarWidth = navbar?.width;\n  const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n  const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n  if (navbar?.breakpoint !== undefined && !navbar?.collapsed?.mobile) {\n    maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n    maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n    if (mode === 'static') {\n      maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n    }\n  }\n\n  if (isPrimitiveSize(navbarWidth)) {\n    const baseSize = rem(getBaseSize(navbarWidth));\n    baseStyles['--app-shell-navbar-width'] = baseSize;\n    baseStyles['--app-shell-navbar-offset'] = baseSize;\n    if (mode === 'static') {\n      baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n    }\n  }\n\n  if (isResponsiveSize(navbarWidth)) {\n    if (typeof navbarWidth.base !== 'undefined') {\n      baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n      baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n      if (mode === 'static') {\n        baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n      }\n    }\n\n    keys(navbarWidth).forEach((key) => {\n      if (key !== 'base') {\n        minMediaStyles[key] = minMediaStyles[key] || {};\n        minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n        minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n        if (mode === 'static') {\n          minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n        }\n      }\n    });\n  }\n\n  if (navbar?.breakpoint !== undefined && mode === 'static') {\n    minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n    minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n    minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n  }\n\n  if (navbar?.collapsed?.desktop) {\n    const breakpointValue = navbar!.breakpoint;\n    minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n    if (mode === 'fixed') {\n      minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n    } else {\n      // In static mode, hide the element completely so grid column collapses\n      minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n      minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n      minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n    }\n  }\n\n  if (navbar?.collapsed?.mobile) {\n    const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n    maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n    if (mode === 'static') {\n      maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n    }\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n    maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n      collapsedNavbarTransformRtl;\n  }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,eAAe,KAAA,KAAa,CAAC,QAAQ,WAAW,QAAQ;EAClE,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,WAAW,CAAC,+BAA+B;EAClE,eAAe,QAAQ,WAAW,CAAC,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,WAAW,CAAC,mCAAmC;CAE1E;CAEA,IAAI,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAI,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;EAEtE;EAEA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,8BAA8B,IAAI,YAAa,IAAI;IACvE,eAAe,IAAI,CAAC,+BAA+B,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmC,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,eAAe,KAAA,KAAa,SAAS,UAAU;EACzD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,oCAAoC;EACtE,eAAe,OAAO,WAAW,CAAC,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,+BAA+B;OAC1D;GAEL,eAAe,gBAAgB,CAAC,8BAA8B;GAC9D,eAAe,gBAAgB,CAAC,gCAAgC;GAChE,eAAe,gBAAgB,CAAC,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,8BAA8B;EAC9D,eAAe,gBAAgB,CAAC,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,gBAAgB,CAAC,mCAAmC;EAErE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;CACJ;AACF"}

package/esm/components/Collapse/Collapse.mjs

@@ -14,10 +14,11 @@ const defaultProps = {
 	transitionTimingFunction: "ease",
 	animateOpacity: true,
 	orientation: "vertical",
-	keepMounted: true
+	keepMounted: true,
+	keepMountedMode: "activity"
 };
 const Collapse = factory((props) => {
-	const { children, expanded, transitionDuration, transitionTimingFunction, style, onTransitionEnd, onTransitionStart, animateOpacity, keepMounted, ref, orientation, ...others } = useProps("Collapse", defaultProps, props);
+	const { children, expanded, transitionDuration, transitionTimingFunction, style, onTransitionEnd, onTransitionStart, animateOpacity, keepMounted, keepMountedMode, ref, orientation, ...others } = useProps("Collapse", defaultProps, props);
 	const env = useMantineEnv();
 	const theme = useMantineTheme();
 	const shouldReduceMotion = useReducedMotion();
@@ -31,15 +32,26 @@ const Collapse = factory((props) => {
 		keepMounted: false
 	});
 	if (duration === 0) {
-		if (keepMounted === true && env !== "test") return /* @__PURE__ */ jsx(Activity, {
-			mode: expanded ? "visible" : "hidden",
-			children: /* @__PURE__ */ jsx(Box, {
+		if (keepMounted === true && (keepMountedMode === "display-none" || env !== "test")) {
+			if (keepMountedMode === "display-none") return /* @__PURE__ */ jsx(Box, {
 				...others,
-				style,
+				style: {
+					...getStyleObject(style, theme),
+					...!expanded ? { display: "none" } : {}
+				},
 				ref,
 				children
-			})
-		});
+			});
+			return /* @__PURE__ */ jsx(Activity, {
+				mode: expanded ? "visible" : "hidden",
+				children: /* @__PURE__ */ jsx(Box, {
+					...others,
+					style,
+					ref,
+					children
+				})
+			});
+		}
 		return expanded ? /* @__PURE__ */ jsx(Box, {
 			...others,
 			style,
@@ -50,7 +62,7 @@ const Collapse = factory((props) => {
 	const isExited = collapse.state === "exited";
 	let content;
 	if (keepMounted === false) content = isExited ? null : children;
-	else if (keepMounted === true) content = /* @__PURE__ */ jsx(Activity, {
+	else if (keepMounted === true) content = keepMountedMode === "display-none" ? children : /* @__PURE__ */ jsx(Activity, {
 		mode: isExited ? "hidden" : "visible",
 		children
 	});
@@ -61,7 +73,8 @@ const Collapse = factory((props) => {
 			style: {
 				opacity: expanded || !animateOpacity ? 1 : 0,
 				transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : "none",
-				...getStyleObject(style, theme)
+				...getStyleObject(style, theme),
+				...keepMounted && keepMountedMode === "display-none" && isExited ? { display: "none" } : {}
 			},
 			ref
 		}),

package/esm/components/Collapse/Collapse.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n  keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n  keepMounted: true,\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && env !== 'test') {\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others} style={style} ref={ref}>\n            {children}\n          </Box>\n        </Activity>\n      );\n    }\n\n    return expanded ? (\n      <Box {...others} style={style} ref={ref}>\n        {children}\n      </Box>\n    ) : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;AACf;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,YAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,QAAQ,QAAQ,QAClC,OACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAe;IAAY;IACjC;GACE,CAAA;EACG,CAAA;EAId,OAAO,WACL,oBAAC,KAAD;GAAK,GAAI;GAAe;GAAY;GACjC;EACE,CAAA,IACH;CACN;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAE/E,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;GAChC;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}
+{"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  Factory,\n  factory,\n  getStyleObject,\n  useMantineEnv,\n  useMantineTheme,\n  useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n  /** Collapse orientation @default 'vertical' */\n  orientation?: 'vertical' | 'horizontal';\n\n  /** Expanded state */\n  expanded: boolean;\n\n  /** Called when the transition ends */\n  onTransitionEnd?: () => void;\n\n  /** Called when transition starts */\n  onTransitionStart?: () => void;\n\n  /** Transition duration in ms @default 200 */\n  transitionDuration?: number;\n\n  /** Transition timing function @default ease */\n  transitionTimingFunction?: string;\n\n  /** Determines whether the opacity is animated @default true */\n  animateOpacity?: boolean;\n\n  /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n  keepMounted?: boolean;\n\n  /** Controls how the element is hidden when `keepMounted` is set:\n   * `'activity'` – hidden with React 19 `Activity` component,\n   * `'display-none'` – hidden with `display: none` styles\n   * @default 'activity'\n   */\n  keepMountedMode?: 'activity' | 'display-none';\n}\n\nexport type CollapseFactory = Factory<{\n  props: CollapseProps;\n  ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n  transitionDuration: 200,\n  transitionTimingFunction: 'ease',\n  animateOpacity: true,\n  orientation: 'vertical',\n  keepMounted: true,\n  keepMountedMode: 'activity',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n  const {\n    children,\n    expanded,\n    transitionDuration,\n    transitionTimingFunction,\n    style,\n    onTransitionEnd,\n    onTransitionStart,\n    animateOpacity,\n    keepMounted,\n    keepMountedMode,\n    ref,\n    orientation,\n    ...others\n  } = useProps('Collapse', defaultProps, props);\n\n  const env = useMantineEnv();\n  const theme = useMantineTheme();\n  const shouldReduceMotion = useReducedMotion();\n  const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n  const duration = reduceMotion ? 0 : transitionDuration;\n  const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n  const collapse = hook({\n    expanded,\n    transitionDuration: duration,\n    transitionTimingFunction,\n    onTransitionEnd,\n    onTransitionStart,\n    keepMounted: false,\n  });\n\n  if (duration === 0) {\n    if (keepMounted === true && (keepMountedMode === 'display-none' || env !== 'test')) {\n      if (keepMountedMode === 'display-none') {\n        return (\n          <Box\n            {...others}\n            style={{\n              ...getStyleObject(style, theme),\n              ...(!expanded ? { display: 'none' } : {}),\n            }}\n            ref={ref}\n          >\n            {children}\n          </Box>\n        );\n      }\n\n      return (\n        <Activity mode={expanded ? 'visible' : 'hidden'}>\n          <Box {...others} style={style} ref={ref}>\n            {children}\n          </Box>\n        </Activity>\n      );\n    }\n\n    return expanded ? (\n      <Box {...others} style={style} ref={ref}>\n        {children}\n      </Box>\n    ) : null;\n  }\n\n  const isExited = collapse.state === 'exited';\n\n  let content: React.ReactNode;\n  if (keepMounted === false) {\n    content = isExited ? null : children;\n  } else if (keepMounted === true) {\n    content =\n      keepMountedMode === 'display-none' ? (\n        children\n      ) : (\n        <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>\n      );\n  } else {\n    content = children;\n  }\n\n  return (\n    <Box\n      {...others}\n      {...collapse.getCollapseProps({\n        style: {\n          opacity: expanded || !animateOpacity ? 1 : 0,\n          transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n          ...getStyleObject(style, theme),\n          ...(keepMounted && keepMountedMode === 'display-none' && isExited\n            ? { display: 'none' }\n            : {}),\n        },\n        ref,\n      })}\n    >\n      {content}\n    </Box>\n  );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n  export type Props = CollapseProps;\n  export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AAmDA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,iBACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,YAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,SAAS,oBAAoB,kBAAkB,QAAQ,SAAS;GAClF,IAAI,oBAAoB,gBACtB,OACE,oBAAC,KAAD;IACE,GAAI;IACJ,OAAO;KACL,GAAG,eAAe,OAAO,KAAK;KAC9B,GAAI,CAAC,WAAW,EAAE,SAAS,OAAO,IAAI,CAAC;IACzC;IACK;IAEJ;GACE,CAAA;GAIT,OACE,oBAAC,UAAD;IAAU,MAAM,WAAW,YAAY;cACrC,oBAAC,KAAD;KAAK,GAAI;KAAe;KAAY;KACjC;IACE,CAAA;GACG,CAAA;EAEd;EAEA,OAAO,WACL,oBAAC,KAAD;GAAK,GAAI;GAAe;GAAY;GACjC;EACE,CAAA,IACH;CACN;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UACE,oBAAoB,iBAClB,WAEA,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAGzE,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;IAC9B,GAAI,eAAe,oBAAoB,kBAAkB,WACrD,EAAE,SAAS,OAAO,IAClB,CAAC;GACP;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}