@mantine/core 9.3.0 → 9.3.2

package/esm/components/Tree/TreeNode.mjs

@@ -14,6 +14,13 @@ function getValuesRange(anchor, value, flatValues) {
 	const end = Math.max(anchorIndex, valueIndex);
 	return flatValues.slice(start, end + 1);
 }
+function isVisibleTreeNode(node, root) {
+	for (let current = node; current && current !== root;) {
+		if (current.style.display === "none") return false;
+		current = current.parentElement;
+	}
+	return true;
+}
 function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level = 1, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data }) {
 	const ref = useRef(null);
 	const hasLoadedChildren = Array.isArray(node.children);
@@ -71,7 +78,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 			if (!root) return;
 			event.stopPropagation();
 			event.preventDefault();
-			const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none");
+			const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => isVisibleTreeNode(treeNode, root));
 			const index = nodes.indexOf(event.currentTarget);
 			if (index === -1) return;
 			const nextIndex = event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1;

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

@@ -1 +1 @@
-{"version":3,"file":"TreeNode.mjs","names":[],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { TreeAllowDrop, useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string | null, value: string | undefined, flatValues: string[]) {\n  if (!anchor || !value) {\n    return [];\n  }\n\n  const anchorIndex = flatValues.indexOf(anchor);\n  const valueIndex = flatValues.indexOf(value);\n  const start = Math.min(anchorIndex, valueIndex);\n  const end = Math.max(anchorIndex, valueIndex);\n\n  return flatValues.slice(start, end + 1);\n}\n\ninterface TreeNodeProps {\n  node: TreeNodeData;\n  getStyles: GetStylesApi<TreeFactory>;\n  rootIndex: number | undefined;\n  controller: TreeController;\n  expandOnClick: boolean | undefined;\n  flatValues: string[];\n  isSubtree?: boolean;\n  level?: number;\n  renderNode: RenderNode | undefined;\n  selectOnClick: boolean | undefined;\n  allowRangeSelection: boolean | undefined;\n  expandOnSpace: boolean | undefined;\n  checkOnSpace: boolean | undefined;\n  keepMounted: boolean | undefined;\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  allowDrop: TreeAllowDrop | undefined;\n  withDragHandle: boolean | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  data: TreeNodeData[];\n}\n\nexport function TreeNode({\n  node,\n  getStyles,\n  rootIndex,\n  controller,\n  expandOnClick,\n  selectOnClick,\n  isSubtree,\n  level = 1,\n  renderNode,\n  flatValues,\n  allowRangeSelection,\n  expandOnSpace,\n  checkOnSpace,\n  keepMounted,\n  onDragDrop,\n  allowDrop,\n  withDragHandle,\n  dragStateRef,\n  data,\n}: TreeNodeProps) {\n  const ref = useRef<HTMLLIElement>(null);\n  const hasLoadedChildren = Array.isArray(node.children);\n  const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n  const hasChildren = hasLoadedChildren || hasAsyncChildren;\n  const isLoading = controller.isNodeLoading(node.value);\n  const loadError = controller.getNodeLoadError(node.value);\n  const isExpanded = controller.expandedState[node.value] || false;\n\n  const nested = (node.children || []).map((child) => (\n    <TreeNode\n      key={child.value}\n      node={child}\n      flatValues={flatValues}\n      getStyles={getStyles}\n      rootIndex={undefined}\n      level={level + 1}\n      controller={controller}\n      expandOnClick={expandOnClick}\n      isSubtree\n      renderNode={renderNode}\n      selectOnClick={selectOnClick}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      allowDrop={allowDrop}\n      withDragHandle={withDragHandle}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({\n    nodeValue: node.value,\n    hasChildren,\n    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) => treeNode.style.display !== 'none'\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n\n      if (event.shiftKey) {\n        const selectNode = nodes[nextIndex];\n\n        if (selectNode) {\n          controller.setSelectedState(\n            getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n          );\n        }\n      }\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.isNodeChecked(node.value)\n          ? controller.uncheckNode(node.value)\n          : controller.checkNode(node.value);\n      }\n    }\n  };\n\n  const handleNodeClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n      controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n      ref.current?.focus();\n    } else {\n      if (expandOnClick) {\n        controller.toggleExpanded(node.value);\n      }\n\n      selectOnClick && controller.select(node.value);\n      ref.current?.focus();\n    }\n  };\n\n  const selected = controller.selectedState.includes(node.value);\n  const elementProps = {\n    ...getStyles('label'),\n    onClick: handleNodeClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n    ...dragElementProps,\n  };\n\n  const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n  return (\n    <li\n      {...getStyles('node', {\n        style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n      })}\n      role=\"treeitem\"\n      aria-selected={selected}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={rootIndex === 0 ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          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":";;;;;;;;AAQA,SAAS,eAAe,QAAuB,OAA2B,YAAsB;CAC9F,IAAI,CAAC,UAAU,CAAC,OACd,OAAO,CAAC;CAGV,MAAM,cAAc,WAAW,QAAQ,MAAM;CAC7C,MAAM,aAAa,WAAW,QAAQ,KAAK;CAC3C,MAAM,QAAQ,KAAK,IAAI,aAAa,UAAU;CAC9C,MAAM,MAAM,KAAK,IAAI,aAAa,UAAU;CAE5C,OAAO,WAAW,MAAM,OAAO,MAAM,CAAC;AACxC;AAwBA,SAAgB,SAAS,EACvB,MACA,WACA,WACA,YACA,eACA,eACA,WACA,QAAQ,GACR,YACA,YACA,qBACA,eACA,cACA,aACA,YACA,WACA,gBACA,cACA,QACgB;CAChB,MAAM,MAAM,OAAsB,IAAI;CACtC,MAAM,oBAAoB,MAAM,QAAQ,KAAK,QAAQ;CACrD,MAAM,mBAAmB,CAAC,CAAC,KAAK,eAAe,CAAC;CAChD,MAAM,cAAc,qBAAqB;CACzC,MAAM,YAAY,WAAW,cAAc,KAAK,KAAK;CACrD,MAAM,YAAY,WAAW,iBAAiB,KAAK,KAAK;CACxD,MAAM,aAAa,WAAW,cAAc,KAAK,UAAU;CAE3D,MAAM,UAAU,KAAK,YAAY,CAAC,GAAG,KAAK,UACxC,oBAAC,UAAD;EAEE,MAAM;EACM;EACD;EACX,WAAW,KAAA;EACX,OAAO,QAAQ;EACH;EACG;EACf,WAAA;EACY;EACG;EACM;EACN;EACD;EACD;EACD;EACD;EACK;EACF;EACR;CACP,GApBM,MAAM,KAoBZ,CACF;CAED,MAAM,EAAE,cAAc,kBAAkB,oBAAoB,oBAAoB;EAC9E,WAAW,KAAK;EAChB;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,UAA+B;EACpD,IAAI,MAAM,YAAY,SAAS,cAAc;GAC3C,MAAM,gBAAgB;GACtB,MAAM,eAAe;GAErB,IAAI,YACF,MAAM,cAAc,cAA6B,iBAAiB,GAAG,MAAM;QAE3E,WAAW,OAAO,KAAK,KAAK;EAEhC;EAEA,IAAI,MAAM,YAAY,SAAS,aAAa;GAC1C,MAAM,gBAAgB;GACtB,MAAM,eAAe;GACrB,IAAI,cAAc,aAChB,WAAW,SAAS,KAAK,KAAK;QACzB,IAAI,WACT,oBAAoB,MAAM,eAA8B,iBAAiB,GAAG,MAAM;EAEtF;EAEA,IAAI,MAAM,YAAY,SAAS,eAAe,MAAM,YAAY,SAAS,WAAW;GAClF,MAAM,OAAO,oBAAoB,MAAM,eAA8B,kBAAkB;GAEvF,IAAI,CAAC,MACH;GAGF,MAAM,gBAAgB;GACtB,MAAM,eAAe;GACrB,MAAM,QAAQ,MAAM,KAAK,KAAK,iBAAgC,iBAAiB,CAAC,EAAE,QAC/E,aAAa,SAAS,MAAM,YAAY,MAC3C;GACA,MAAM,QAAQ,MAAM,QAAQ,MAAM,aAA8B;GAEhE,IAAI,UAAU,IACZ;GAGF,MAAM,YAAY,MAAM,YAAY,SAAS,cAAc,QAAQ,IAAI,QAAQ;GAC/E,MAAM,YAAY,MAAM;GAExB,IAAI,MAAM,UAAU;IAClB,MAAM,aAAa,MAAM;IAEzB,IAAI,YACF,WAAW,iBACT,eAAe,WAAW,YAAY,WAAW,QAAQ,OAAO,UAAU,CAC5E;GAEJ;EACF;EAEA,IAAI,MAAM,YAAY,SAAS,SAAS;GACtC,IAAI,eAAe;IACjB,MAAM,gBAAgB;IACtB,MAAM,eAAe;IACrB,WAAW,eAAe,KAAK,KAAK;GACtC;GAEA,IAAI,cAAc;IAChB,MAAM,gBAAgB;IACtB,MAAM,eAAe;IACrB,WAAW,cAAc,KAAK,KAAK,IAC/B,WAAW,YAAY,KAAK,KAAK,IACjC,WAAW,UAAU,KAAK,KAAK;GACrC;EACF;CACF;CAEA,MAAM,mBAAmB,UAA4B;EACnD,MAAM,gBAAgB;EAEtB,IAAI,uBAAuB,MAAM,YAAY,WAAW,YAAY;GAClE,WAAW,iBAAiB,eAAe,WAAW,YAAY,KAAK,OAAO,UAAU,CAAC;GACzF,IAAI,SAAS,MAAM;EACrB,OAAO;GACL,IAAI,eACF,WAAW,eAAe,KAAK,KAAK;GAGtC,iBAAiB,WAAW,OAAO,KAAK,KAAK;GAC7C,IAAI,SAAS,MAAM;EACrB;CACF;CAEA,MAAM,WAAW,WAAW,cAAc,SAAS,KAAK,KAAK;CAC7D,MAAM,eAAe;EACnB,GAAG,UAAU,OAAO;EACpB,SAAS;EACT,iBAAiB,YAAY,KAAA;EAC7B,cAAc,KAAK;EACnB,GAAG;CACL;CAEA,MAAM,uBAAuB,cAAc,aAAa,OAAO,WAAW;CAE1E,OACE,qBAAC,MAAD;EACE,GAAI,UAAU,QAAQ,EACpB,OAAO,EAAE,kBAAkB,8BAA8B,QAAQ,EAAE,GAAG,EACxE,CAAC;EACD,MAAK;EACL,iBAAe;EACf,cAAY,KAAK;EACjB,iBAAe,YAAY,KAAA;EAC3B,cAAY;EACZ,UAAU,cAAc,IAAI,IAAI;EAChC,WAAW;EACN;YAXP;GAaG,OAAO,eAAe,aACrB,WAAW;IACT;IACA;IACA;IACA,QAAQ,UAAU;IAClB,MAAM;IACN,UAAU;IACV;IACA;IACA;IACA;IACA;GACF,CAAC,IAED,oBAAC,OAAD;IAAK,GAAI;cAAe,KAAK;GAAW,CAAA;GAGzC,wBACC,oBAAC,KAAD;IAAK,WAAU;IAAK,MAAK;IAAQ,GAAI,UAAU,SAAS;IAAG,cAAY;cACrE,oBAAC,MAAD;KACE,GAAI,UAAU,QAAQ,EACpB,OAAO,EAAE,kBAAkB,8BAA8B,MAAM,GAAG,EACpE,CAAC;eAED,oBAAC,OAAD;MAAK,GAAI,UAAU,OAAO;gBACxB,oBAAC,QAAD;OAAQ,MAAM;OAAI,OAAO,EAAE,mBAAmB,EAAE;MAAI,CAAA;KACjD,CAAA;IACH,CAAA;GACD,CAAA;GAGN,eAAe,OAAO,SAAS,IAC9B,oBAAC,UAAD;IAAU,MAAM,aAAa,YAAY;cACvC,oBAAC,KAAD;KAAK,WAAU;KAAK,MAAK;KAAQ,GAAI,UAAU,SAAS;KAAG,cAAY;eACpE;IACE,CAAA;GACG,CAAA,IAEV,cACA,OAAO,SAAS,KACd,oBAAC,KAAD;IAAK,WAAU;IAAK,MAAK;IAAQ,GAAI,UAAU,SAAS;IAAG,cAAY;cACpE;GACE,CAAA;EAGP;;AAER;AAEA,SAAS,cAAc"}
+{"version":3,"file":"TreeNode.mjs","names":[],"sources":["../../../src/components/Tree/TreeNode.tsx"],"sourcesContent":["import { Activity, useRef } from 'react';\nimport { Box, findElementAncestor, GetStylesApi } from '../../core';\nimport { Loader } from '../Loader';\nimport type { TreeDragDropPayload } from './move-tree-node/move-tree-node';\nimport type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';\nimport type { TreeController } from './use-tree';\nimport { TreeAllowDrop, useTreeNodeDragDrop } from './use-tree-node-drag-drop';\n\nfunction getValuesRange(anchor: string | null, value: string | undefined, flatValues: string[]) {\n  if (!anchor || !value) {\n    return [];\n  }\n\n  const anchorIndex = flatValues.indexOf(anchor);\n  const valueIndex = flatValues.indexOf(value);\n  const start = Math.min(anchorIndex, valueIndex);\n  const end = Math.max(anchorIndex, valueIndex);\n\n  return flatValues.slice(start, end + 1);\n}\n\nfunction isVisibleTreeNode(node: HTMLElement, root: Element) {\n  for (let current: HTMLElement | null = node; current && current !== root; ) {\n    if (current.style.display === 'none') {\n      return false;\n    }\n    current = current.parentElement;\n  }\n\n  return true;\n}\n\ninterface TreeNodeProps {\n  node: TreeNodeData;\n  getStyles: GetStylesApi<TreeFactory>;\n  rootIndex: number | undefined;\n  controller: TreeController;\n  expandOnClick: boolean | undefined;\n  flatValues: string[];\n  isSubtree?: boolean;\n  level?: number;\n  renderNode: RenderNode | undefined;\n  selectOnClick: boolean | undefined;\n  allowRangeSelection: boolean | undefined;\n  expandOnSpace: boolean | undefined;\n  checkOnSpace: boolean | undefined;\n  keepMounted: boolean | undefined;\n  onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;\n  allowDrop: TreeAllowDrop | undefined;\n  withDragHandle: boolean | undefined;\n  dragStateRef: React.RefObject<TreeDragState>;\n  data: TreeNodeData[];\n}\n\nexport function TreeNode({\n  node,\n  getStyles,\n  rootIndex,\n  controller,\n  expandOnClick,\n  selectOnClick,\n  isSubtree,\n  level = 1,\n  renderNode,\n  flatValues,\n  allowRangeSelection,\n  expandOnSpace,\n  checkOnSpace,\n  keepMounted,\n  onDragDrop,\n  allowDrop,\n  withDragHandle,\n  dragStateRef,\n  data,\n}: TreeNodeProps) {\n  const ref = useRef<HTMLLIElement>(null);\n  const hasLoadedChildren = Array.isArray(node.children);\n  const hasAsyncChildren = !!node.hasChildren && !hasLoadedChildren;\n  const hasChildren = hasLoadedChildren || hasAsyncChildren;\n  const isLoading = controller.isNodeLoading(node.value);\n  const loadError = controller.getNodeLoadError(node.value);\n  const isExpanded = controller.expandedState[node.value] || false;\n\n  const nested = (node.children || []).map((child) => (\n    <TreeNode\n      key={child.value}\n      node={child}\n      flatValues={flatValues}\n      getStyles={getStyles}\n      rootIndex={undefined}\n      level={level + 1}\n      controller={controller}\n      expandOnClick={expandOnClick}\n      isSubtree\n      renderNode={renderNode}\n      selectOnClick={selectOnClick}\n      allowRangeSelection={allowRangeSelection}\n      expandOnSpace={expandOnSpace}\n      checkOnSpace={checkOnSpace}\n      keepMounted={keepMounted}\n      onDragDrop={onDragDrop}\n      allowDrop={allowDrop}\n      withDragHandle={withDragHandle}\n      dragStateRef={dragStateRef}\n      data={data}\n    />\n  ));\n\n  const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({\n    nodeValue: node.value,\n    hasChildren,\n    isExpanded,\n    data,\n    onDragDrop,\n    dragStateRef,\n    allowDrop,\n    withDragHandle,\n  });\n\n  const handleKeyDown = (event: React.KeyboardEvent) => {\n    if (event.nativeEvent.code === 'ArrowRight') {\n      event.stopPropagation();\n      event.preventDefault();\n\n      if (isExpanded) {\n        event.currentTarget.querySelector<HTMLLIElement>('[role=treeitem]')?.focus();\n      } else {\n        controller.expand(node.value);\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowLeft') {\n      event.stopPropagation();\n      event.preventDefault();\n      if (isExpanded && hasChildren) {\n        controller.collapse(node.value);\n      } else if (isSubtree) {\n        findElementAncestor(event.currentTarget as HTMLElement, '[role=treeitem]')?.focus();\n      }\n    }\n\n    if (event.nativeEvent.code === 'ArrowDown' || event.nativeEvent.code === 'ArrowUp') {\n      const root = findElementAncestor(event.currentTarget as HTMLElement, '[data-tree-root]');\n\n      if (!root) {\n        return;\n      }\n\n      event.stopPropagation();\n      event.preventDefault();\n      const nodes = Array.from(root.querySelectorAll<HTMLLIElement>('[role=treeitem]')).filter(\n        (treeNode) => isVisibleTreeNode(treeNode, root)\n      );\n      const index = nodes.indexOf(event.currentTarget as HTMLLIElement);\n\n      if (index === -1) {\n        return;\n      }\n\n      const nextIndex = event.nativeEvent.code === 'ArrowDown' ? index + 1 : index - 1;\n      nodes[nextIndex]?.focus();\n\n      if (event.shiftKey) {\n        const selectNode = nodes[nextIndex];\n\n        if (selectNode) {\n          controller.setSelectedState(\n            getValuesRange(controller.anchorNode, selectNode.dataset.value, flatValues)\n          );\n        }\n      }\n    }\n\n    if (event.nativeEvent.code === 'Space') {\n      if (expandOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.toggleExpanded(node.value);\n      }\n\n      if (checkOnSpace) {\n        event.stopPropagation();\n        event.preventDefault();\n        controller.isNodeChecked(node.value)\n          ? controller.uncheckNode(node.value)\n          : controller.checkNode(node.value);\n      }\n    }\n  };\n\n  const handleNodeClick = (event: React.MouseEvent) => {\n    event.stopPropagation();\n\n    if (allowRangeSelection && event.shiftKey && controller.anchorNode) {\n      controller.setSelectedState(getValuesRange(controller.anchorNode, node.value, flatValues));\n      ref.current?.focus();\n    } else {\n      if (expandOnClick) {\n        controller.toggleExpanded(node.value);\n      }\n\n      selectOnClick && controller.select(node.value);\n      ref.current?.focus();\n    }\n  };\n\n  const selected = controller.selectedState.includes(node.value);\n  const elementProps = {\n    ...getStyles('label'),\n    onClick: handleNodeClick,\n    'data-selected': selected || undefined,\n    'data-value': node.value,\n    ...dragElementProps,\n  };\n\n  const withLoadingIndicator = isExpanded && isLoading && nested.length === 0;\n\n  return (\n    <li\n      {...getStyles('node', {\n        style: { '--label-offset': `calc(var(--level-offset) * ${level - 1})` },\n      })}\n      role=\"treeitem\"\n      aria-selected={selected}\n      data-value={node.value}\n      data-selected={selected || undefined}\n      data-level={level}\n      tabIndex={rootIndex === 0 ? 0 : -1}\n      onKeyDown={handleKeyDown}\n      ref={ref}\n    >\n      {typeof renderNode === 'function' ? (\n        renderNode({\n          node,\n          level,\n          selected,\n          isRoot: level === 1,\n          tree: controller,\n          expanded: isExpanded,\n          hasChildren,\n          isLoading,\n          loadError,\n          elementProps,\n          dragHandleProps,\n        })\n      ) : (\n        <div {...elementProps}>{node.label}</div>\n      )}\n\n      {withLoadingIndicator && (\n        <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n          <li\n            {...getStyles('node', {\n              style: { '--label-offset': `calc(var(--level-offset) * ${level})` },\n            })}\n          >\n            <div {...getStyles('label')}>\n              <Loader size={16} style={{ marginInlineStart: 4 }} />\n            </div>\n          </li>\n        </Box>\n      )}\n\n      {keepMounted && nested.length > 0 ? (\n        <Activity mode={isExpanded ? 'visible' : 'hidden'}>\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        </Activity>\n      ) : (\n        isExpanded &&\n        nested.length > 0 && (\n          <Box component=\"ul\" role=\"group\" {...getStyles('subtree')} data-level={level}>\n            {nested}\n          </Box>\n        )\n      )}\n    </li>\n  );\n}\n\nTreeNode.displayName = '@mantine/core/TreeNode';\n"],"mappings":"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"}

package/esm/core/Box/Box.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.mjs","names":[],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n  MantineBreakpoint,\n  useMantineDeduplicateInlineStyles,\n  useMantineSxTransform,\n  useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n  extractStyleProps,\n  MantineStyleProps,\n  parseStyleProps,\n  STYlE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n  /** Class added to the root element, if applicable */\n  className?: string;\n\n  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n  style?: MantineStyleProp;\n\n  /** CSS variables defined on root component element */\n  __vars?: CssVarsProp;\n\n  /** `size` property passed down the HTML element */\n  __size?: string;\n\n  /** Breakpoint above which the component is hidden with `display: none` */\n  hiddenFrom?: MantineBreakpoint;\n\n  /** Breakpoint below which the component is hidden with `display: none` */\n  visibleFrom?: MantineBreakpoint;\n\n  /** Determines whether component should be hidden in light color scheme with `display: none` */\n  lightHidden?: boolean;\n\n  /** Determines whether component should be hidden in dark color scheme with `display: none` */\n  darkHidden?: boolean;\n\n  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n  mod?: BoxMod;\n}\n\nexport type ElementProps<\n  ElementType extends React.ElementType,\n  PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n  /** Variant passed from parent component, sets `data-variant` */\n  variant?: string;\n\n  /** Size passed from parent component, sets `data-size` if value is not number like */\n  size?: string | number;\n}\n\nfunction _Box({\n  component,\n  style,\n  __vars,\n  className,\n  variant,\n  mod,\n  size,\n  hiddenFrom,\n  visibleFrom,\n  lightHidden,\n  darkHidden,\n  renderRoot,\n  __size,\n  ref,\n  ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n  const theme = useMantineTheme();\n  const Element = component || 'div';\n  const { styleProps, rest } = extractStyleProps(others);\n  const useSxTransform = useMantineSxTransform();\n  const transformedSx = useSxTransform?.()?.(styleProps.sx);\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYlE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  const props = {\n    ref,\n    style: getBoxStyle({\n      theme,\n      style,\n      vars: __vars,\n      styleProps: parsedStyleProps.inlineStyles,\n    }),\n    className: cx(className, transformedSx, {\n      [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n      'mantine-light-hidden': lightHidden,\n      'mantine-dark-hidden': darkHidden,\n      [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n      [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n    }),\n    'data-variant': variant,\n    'data-size': isNumberLike(size) ? undefined : size || undefined,\n    size: __size,\n    ...getBoxMod(mod),\n    ...rest,\n  };\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n\n      {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n    </>\n  );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,gBADiB,sBACY,IAAI,IAAI,WAAW,EAAE;CACxD,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,mBAAmB,gBAAgB;EACvC;EACA;EACA,MAAM;CACR,CAAC;CAED,MAAM,0BAA0B,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxC,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAO,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,WAAW,GAAG,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAa,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAG,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAM,YAAsC,IAAI"}
+{"version":3,"file":"Box.mjs","names":[],"sources":["../../../src/core/Box/Box.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { polymorphic } from '../factory';\nimport { hashStyleProps, InlineStyles } from '../InlineStyles';\nimport {\n  MantineBreakpoint,\n  useMantineDeduplicateInlineStyles,\n  useMantineSxTransform,\n  useMantineTheme,\n} from '../MantineProvider';\nimport { isNumberLike } from '../utils';\nimport type { CssVarsProp, MantineStyleProp } from './Box.types';\nimport { getBoxMod } from './get-box-mod/get-box-mod';\nimport { getBoxStyle } from './get-box-style/get-box-style';\nimport {\n  extractStyleProps,\n  MantineStyleProps,\n  parseStyleProps,\n  STYlE_PROPS_DATA,\n} from './style-props';\nimport { useRandomClassName } from './use-random-classname/use-random-classname';\n\nexport type Mod = Record<string, any> | string;\nexport type BoxMod = Mod | Mod[] | BoxMod[];\n\nexport interface BoxProps extends MantineStyleProps {\n  /** Class added to the root element, if applicable */\n  className?: string | undefined;\n\n  /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */\n  style?: MantineStyleProp;\n\n  /** CSS variables defined on root component element */\n  __vars?: CssVarsProp;\n\n  /** `size` property passed down the HTML element */\n  __size?: string;\n\n  /** Breakpoint above which the component is hidden with `display: none` */\n  hiddenFrom?: MantineBreakpoint;\n\n  /** Breakpoint below which the component is hidden with `display: none` */\n  visibleFrom?: MantineBreakpoint;\n\n  /** Determines whether component should be hidden in light color scheme with `display: none` */\n  lightHidden?: boolean;\n\n  /** Determines whether component should be hidden in dark color scheme with `display: none` */\n  darkHidden?: boolean;\n\n  /** Element modifiers transformed into `data-` attributes, for example, `{ 'data-size': 'xl' }`, falsy values are removed */\n  mod?: BoxMod;\n}\n\nexport type ElementProps<\n  ElementType extends React.ElementType,\n  PropsToOmit extends string = never,\n> = Omit<React.ComponentProps<ElementType>, 'style' | PropsToOmit>;\n\nexport interface BoxComponentProps extends BoxProps {\n  /** Variant passed from parent component, sets `data-variant` */\n  variant?: string;\n\n  /** Size passed from parent component, sets `data-size` if value is not number like */\n  size?: string | number;\n}\n\nfunction _Box({\n  component,\n  style,\n  __vars,\n  className,\n  variant,\n  mod,\n  size,\n  hiddenFrom,\n  visibleFrom,\n  lightHidden,\n  darkHidden,\n  renderRoot,\n  __size,\n  ref,\n  ...others\n}: BoxComponentProps & { component: any; className: string; renderRoot: any; ref: any }) {\n  const theme = useMantineTheme();\n  const Element = component || 'div';\n  const { styleProps, rest } = extractStyleProps(others);\n  const useSxTransform = useMantineSxTransform();\n  const transformedSx = useSxTransform?.()?.(styleProps.sx);\n  const randomClassName = useRandomClassName();\n  const parsedStyleProps = parseStyleProps({\n    styleProps,\n    theme,\n    data: STYlE_PROPS_DATA,\n  });\n\n  const deduplicateInlineStyles = useMantineDeduplicateInlineStyles();\n  const responsiveClassName =\n    deduplicateInlineStyles && parsedStyleProps.hasResponsiveStyles\n      ? hashStyleProps(parsedStyleProps.styles, parsedStyleProps.media)\n      : randomClassName;\n\n  const props = {\n    ref,\n    style: getBoxStyle({\n      theme,\n      style,\n      vars: __vars,\n      styleProps: parsedStyleProps.inlineStyles,\n    }),\n    className: cx(className, transformedSx, {\n      [responsiveClassName]: parsedStyleProps.hasResponsiveStyles,\n      'mantine-light-hidden': lightHidden,\n      'mantine-dark-hidden': darkHidden,\n      [`mantine-hidden-from-${hiddenFrom}`]: hiddenFrom,\n      [`mantine-visible-from-${visibleFrom}`]: visibleFrom,\n    }),\n    'data-variant': variant,\n    'data-size': isNumberLike(size) ? undefined : size || undefined,\n    size: __size,\n    ...getBoxMod(mod),\n    ...rest,\n  };\n\n  return (\n    <>\n      {parsedStyleProps.hasResponsiveStyles && (\n        <InlineStyles\n          selector={`.${responsiveClassName}`}\n          styles={parsedStyleProps.styles}\n          media={parsedStyleProps.media}\n          deduplicate={deduplicateInlineStyles}\n        />\n      )}\n\n      {typeof renderRoot === 'function' ? renderRoot(props) : <Element {...props} />}\n    </>\n  );\n}\n\n_Box.displayName = '@mantine/core/Box';\n\nexport const Box = polymorphic<'div', BoxComponentProps>(_Box);\n"],"mappings":";;;;;;;;;;;;;;;;AAkEA,SAAS,KAAK,EACZ,WACA,OACA,QACA,WACA,SACA,KACA,MACA,YACA,aACA,aACA,YACA,YACA,QACA,KACA,GAAG,UACoF;CACvF,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,UAAU,aAAa;CAC7B,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CAErD,MAAM,gBADiB,sBACY,IAAI,IAAI,WAAW,EAAE;CACxD,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,mBAAmB,gBAAgB;EACvC;EACA;EACA,MAAM;CACR,CAAC;CAED,MAAM,0BAA0B,kCAAkC;CAClE,MAAM,sBACJ,2BAA2B,iBAAiB,sBACxC,eAAe,iBAAiB,QAAQ,iBAAiB,KAAK,IAC9D;CAEN,MAAM,QAAQ;EACZ;EACA,OAAO,YAAY;GACjB;GACA;GACA,MAAM;GACN,YAAY,iBAAiB;EAC/B,CAAC;EACD,WAAW,GAAG,WAAW,eAAe;IACrC,sBAAsB,iBAAiB;GACxC,wBAAwB;GACxB,uBAAuB;IACtB,uBAAuB,eAAe;IACtC,wBAAwB,gBAAgB;EAC3C,CAAC;EACD,gBAAgB;EAChB,aAAa,aAAa,IAAI,IAAI,KAAA,IAAY,QAAQ,KAAA;EACtD,MAAM;EACN,GAAG,UAAU,GAAG;EAChB,GAAG;CACL;CAEA,OACE,qBAAA,UAAA,EAAA,UAAA,CACG,iBAAiB,uBAChB,oBAAC,cAAD;EACE,UAAU,IAAI;EACd,QAAQ,iBAAiB;EACzB,OAAO,iBAAiB;EACxB,aAAa;CACd,CAAA,GAGF,OAAO,eAAe,aAAa,WAAW,KAAK,IAAI,oBAAC,SAAD,EAAS,GAAI,MAAQ,CAAA,CAC7E,EAAA,CAAA;AAEN;AAEA,KAAK,cAAc;AAEnB,MAAa,MAAM,YAAsC,IAAI"}

package/esm/core/styles-api/use-styles/use-styles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"use-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport type { MantineStyleProp } from '../../Box';\nimport { FactoryPayload } from '../../factory';\nimport {\n  useMantineClassNamesPrefix,\n  useMantineIsHeadless,\n  useMantineTheme,\n  useMantineWithStaticClasses,\n} from '../../MantineProvider';\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';\nimport {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types';\nimport { getClassName } from './get-class-name/get-class-name';\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names';\nimport { getStyle } from './get-style/get-style';\nimport { resolveStyle } from './get-style/resolve-style/resolve-style';\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles';\nimport { mergeVars } from './get-style/resolve-vars/merge-vars';\nimport { useStylesTransform } from './use-transformed-styles';\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[];\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never;\n  props: Payload['props'];\n  stylesCtx?: Payload['ctx'];\n  className?: string;\n  style?: MantineStyleProp;\n  rootSelector?: Payload['stylesNames'];\n  unstyled?: boolean;\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;\n  styles?: Styles<Payload>;\n  vars?: PartialVarsResolver<Payload>;\n  varsResolver?: VarsResolver<Payload>;\n  attributes?: Attributes<Payload>;\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string;\n  style: CSSProperties;\n};\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const theme = useMantineTheme();\n  const classNamesPrefix = useMantineClassNamesPrefix();\n  const withStaticClasses = useMantineWithStaticClasses();\n  const headless = useMantineIsHeadless();\n  const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n) as string[];\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  });\n\n  const resolvedClassNames = resolveClassNames({ theme, classNames, props, stylesCtx });\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({ theme, classNames: theme.components[n]?.classNames, props, stylesCtx })\n  );\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx });\n\n  const resolvedThemeStyles: Record<string, any> = {};\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components[n]?.styles,\n        props,\n        stylesCtx,\n      });\n\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = { ...resolvedThemeStyles[key], ...resolved[key] };\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ]);\n\n  const resolvedRootStyle = resolveStyle({ style, theme });\n\n  return (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  });\n}\n"],"mappings":";;;;;;;;;;;AAiDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CACjD,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,mBAAmB,2BAA2B;CACpD,MAAM,oBAAoB,4BAA4B;CACtD,MAAM,WAAW,qBAAqB;CACtC,MAAM,aAAa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,GAAG,QAAQ,MAAM,CAAC;CACvE,MAAM,EAAE,qBAAqB,yBAAyB,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,kBAAkB;EAAE;EAAO;EAAY;EAAO;CAAU,CAAC;CACpF,MAAM,0BAA0B,UAAU,KAAK,MAC7C,kBAAkB;EAAE;EAAO,YAAY,MAAM,WAAW,IAAI;EAAY;EAAO;CAAU,CAAC,CAC5F;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACD,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAW,cAAc;GAC7B;GACA,QAAQ,MAAM,WAAW,IAAI;GAC7B;GACA;EACF,CAAC;EAED,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GAAE,GAAG,oBAAoB;GAAM,GAAG,SAAS;EAAK;CAE/E;CAGF,MAAM,eAAe,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,IAAI,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoB,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,QAAQ,UAAU,aAAa;EAC7B,GAAG,aAAa;EAEhB,WAAW,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAO,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;AACF"}
+{"version":3,"file":"use-styles.mjs","names":[],"sources":["../../../../src/core/styles-api/use-styles/use-styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport type { MantineStyleProp } from '../../Box';\nimport { FactoryPayload } from '../../factory';\nimport {\n  useMantineClassNamesPrefix,\n  useMantineIsHeadless,\n  useMantineTheme,\n  useMantineWithStaticClasses,\n} from '../../MantineProvider';\nimport { PartialVarsResolver, VarsResolver } from '../create-vars-resolver/create-vars-resolver';\nimport {\n  Attributes,\n  ClassNames,\n  ClassNamesArray,\n  GetStylesApiOptions,\n  Styles,\n} from '../styles-api.types';\nimport { getClassName } from './get-class-name/get-class-name';\nimport { resolveClassNames } from './get-class-name/resolve-class-names/resolve-class-names';\nimport { getStyle } from './get-style/get-style';\nimport { resolveStyle } from './get-style/resolve-style/resolve-style';\nimport { resolveStyles } from './get-style/resolve-styles/resolve-styles';\nimport { mergeVars } from './get-style/resolve-vars/merge-vars';\nimport { useStylesTransform } from './use-transformed-styles';\n\nexport interface UseStylesInput<Payload extends FactoryPayload> {\n  name: string | (string | undefined)[];\n  classes: Payload['stylesNames'] extends string ? Record<string, string> : never;\n  props: Payload['props'];\n  stylesCtx?: Payload['ctx'];\n  className?: string | undefined;\n  style?: MantineStyleProp;\n  rootSelector?: Payload['stylesNames'];\n  unstyled?: boolean;\n  classNames?: ClassNames<Payload> | ClassNamesArray<Payload>;\n  styles?: Styles<Payload>;\n  vars?: PartialVarsResolver<Payload>;\n  varsResolver?: VarsResolver<Payload>;\n  attributes?: Attributes<Payload>;\n}\n\nexport type GetStylesApi<Payload extends FactoryPayload> = (\n  selector: NonNullable<Payload['stylesNames']>,\n  options?: GetStylesApiOptions\n) => {\n  className: string;\n  style: CSSProperties;\n};\n\nexport function useStyles<Payload extends FactoryPayload>({\n  name,\n  classes,\n  props,\n  stylesCtx,\n  className,\n  style,\n  rootSelector = 'root' as NonNullable<Payload['stylesNames']>,\n  unstyled,\n  classNames,\n  styles,\n  vars,\n  varsResolver,\n  attributes,\n}: UseStylesInput<Payload>): GetStylesApi<Payload> {\n  const theme = useMantineTheme();\n  const classNamesPrefix = useMantineClassNamesPrefix();\n  const withStaticClasses = useMantineWithStaticClasses();\n  const headless = useMantineIsHeadless();\n  const themeName = (Array.isArray(name) ? name : [name]).filter((n) => n) as string[];\n  const { withStylesTransform, getTransformedStyles } = useStylesTransform({\n    props,\n    stylesCtx,\n    themeName,\n    theme,\n  });\n\n  const resolvedClassNames = resolveClassNames({ theme, classNames, props, stylesCtx });\n  const resolvedThemeClassNames = themeName.map((n) =>\n    resolveClassNames({ theme, classNames: theme.components[n]?.classNames, props, stylesCtx })\n  );\n\n  const resolvedComponentStyles = withStylesTransform\n    ? {}\n    : resolveStyles({ theme, styles, props, stylesCtx });\n\n  const resolvedThemeStyles: Record<string, any> = {};\n\n  if (!withStylesTransform) {\n    for (const n of themeName) {\n      const resolved = resolveStyles({\n        theme,\n        styles: theme.components[n]?.styles,\n        props,\n        stylesCtx,\n      });\n\n      for (const key of Object.keys(resolved)) {\n        resolvedThemeStyles[key] = { ...resolvedThemeStyles[key], ...resolved[key] };\n      }\n    }\n  }\n\n  const resolvedVars = mergeVars([\n    headless ? {} : varsResolver?.(theme, props, stylesCtx),\n    ...themeName.map((n) => theme.components?.[n]?.vars?.(theme, props, stylesCtx)),\n    vars?.(theme, props, stylesCtx),\n  ]);\n\n  const resolvedRootStyle = resolveStyle({ style, theme });\n\n  return (selector, options) => ({\n    ...attributes?.[selector],\n\n    className: getClassName({\n      theme,\n      options,\n      themeName,\n      selector,\n      classNamesPrefix,\n      resolvedClassNames,\n      resolvedThemeClassNames,\n      classes,\n      unstyled,\n      className,\n      rootSelector,\n      props,\n      stylesCtx,\n      withStaticClasses,\n      headless,\n      transformedStyles: getTransformedStyles([options?.styles, styles]),\n    }),\n\n    style: getStyle({\n      theme,\n      selector,\n      options,\n      props,\n      stylesCtx,\n      rootSelector,\n      withStylesTransform,\n      resolvedStyles: resolvedComponentStyles,\n      resolvedThemeStyles,\n      resolvedVars,\n      resolvedRootStyle,\n    }),\n  });\n}\n"],"mappings":";;;;;;;;;;;AAiDA,SAAgB,UAA0C,EACxD,MACA,SACA,OACA,WACA,WACA,OACA,eAAe,QACf,UACA,YACA,QACA,MACA,cACA,cACiD;CACjD,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,mBAAmB,2BAA2B;CACpD,MAAM,oBAAoB,4BAA4B;CACtD,MAAM,WAAW,qBAAqB;CACtC,MAAM,aAAa,MAAM,QAAQ,IAAI,IAAI,OAAO,CAAC,IAAI,GAAG,QAAQ,MAAM,CAAC;CACvE,MAAM,EAAE,qBAAqB,yBAAyB,mBAAmB;EACvE;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,qBAAqB,kBAAkB;EAAE;EAAO;EAAY;EAAO;CAAU,CAAC;CACpF,MAAM,0BAA0B,UAAU,KAAK,MAC7C,kBAAkB;EAAE;EAAO,YAAY,MAAM,WAAW,IAAI;EAAY;EAAO;CAAU,CAAC,CAC5F;CAEA,MAAM,0BAA0B,sBAC5B,CAAC,IACD,cAAc;EAAE;EAAO;EAAQ;EAAO;CAAU,CAAC;CAErD,MAAM,sBAA2C,CAAC;CAElD,IAAI,CAAC,qBACH,KAAK,MAAM,KAAK,WAAW;EACzB,MAAM,WAAW,cAAc;GAC7B;GACA,QAAQ,MAAM,WAAW,IAAI;GAC7B;GACA;EACF,CAAC;EAED,KAAK,MAAM,OAAO,OAAO,KAAK,QAAQ,GACpC,oBAAoB,OAAO;GAAE,GAAG,oBAAoB;GAAM,GAAG,SAAS;EAAK;CAE/E;CAGF,MAAM,eAAe,UAAU;EAC7B,WAAW,CAAC,IAAI,eAAe,OAAO,OAAO,SAAS;EACtD,GAAG,UAAU,KAAK,MAAM,MAAM,aAAa,IAAI,OAAO,OAAO,OAAO,SAAS,CAAC;EAC9E,OAAO,OAAO,OAAO,SAAS;CAChC,CAAC;CAED,MAAM,oBAAoB,aAAa;EAAE;EAAO;CAAM,CAAC;CAEvD,QAAQ,UAAU,aAAa;EAC7B,GAAG,aAAa;EAEhB,WAAW,aAAa;GACtB;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA,mBAAmB,qBAAqB,CAAC,SAAS,QAAQ,MAAM,CAAC;EACnE,CAAC;EAED,OAAO,SAAS;GACd;GACA;GACA;GACA;GACA;GACA;GACA;GACA,gBAAgB;GAChB;GACA;GACA;EACF,CAAC;CACH;AACF"}

package/esm/utils/Floating/use-context-menu-handlers.mjs

@@ -0,0 +1,85 @@
+"use client";
+import { createEventHandler } from "../../core/utils/create-event-handler/create-event-handler.mjs";
+import { useRef } from "react";
+import { useLongPress } from "@mantine/hooks";
+//#region packages/@mantine/core/src/utils/Floating/use-context-menu-handlers.ts
+function useContextMenuHandlers({ childProps, disabled, opened, longPressDelay = 500, setReference, open }) {
+	const touchActiveRef = useRef(false);
+	const gestureHandledRef = useRef(false);
+	const touchTargetRef = useRef(null);
+	const disabledRef = useRef(disabled);
+	disabledRef.current = disabled;
+	const openAtPoint = (clientX, clientY, contextElement) => {
+		setReference({
+			getBoundingClientRect: () => ({
+				x: clientX,
+				y: clientY,
+				width: 0,
+				height: 0,
+				top: clientY,
+				left: clientX,
+				right: clientX,
+				bottom: clientY,
+				toJSON: () => void 0
+			}),
+			contextElement
+		});
+		open();
+	};
+	const onMouseDown = createEventHandler(childProps.onMouseDown, (event) => {
+		if (disabled) return;
+		if (event.button === 2) event.stopPropagation();
+	});
+	const onContextMenu = createEventHandler(childProps.onContextMenu, (event) => {
+		if (disabled || event.defaultPrevented) return;
+		event.preventDefault();
+		if (gestureHandledRef.current) return;
+		openAtPoint(event.clientX, event.clientY, event.currentTarget);
+		if (touchActiveRef.current) gestureHandledRef.current = true;
+	});
+	const longPressHandlers = useLongPress((event) => {
+		if (disabledRef.current || gestureHandledRef.current) return;
+		const touchEvent = event;
+		const touch = touchEvent.touches[0] ?? touchEvent.changedTouches[0];
+		if (!touch) return;
+		openAtPoint(touch.clientX, touch.clientY, touchTargetRef.current);
+		gestureHandledRef.current = true;
+	}, {
+		threshold: longPressDelay,
+		events: ["touch"],
+		cancelOnMove: true,
+		onStart: (event) => {
+			touchActiveRef.current = true;
+			gestureHandledRef.current = false;
+			touchTargetRef.current = event.currentTarget;
+		},
+		onFinish: (event) => {
+			touchActiveRef.current = false;
+			gestureHandledRef.current = false;
+			if (!disabledRef.current) event.preventDefault();
+		},
+		onCancel: () => {
+			touchActiveRef.current = false;
+			gestureHandledRef.current = false;
+		}
+	});
+	return {
+		onContextMenu,
+		onMouseDown,
+		onTouchStart: createEventHandler(childProps.onTouchStart, longPressHandlers.onTouchStart),
+		onTouchEnd: createEventHandler(childProps.onTouchEnd, longPressHandlers.onTouchEnd),
+		onTouchCancel: createEventHandler(childProps.onTouchCancel, longPressHandlers.onTouchCancel),
+		onTouchMove: createEventHandler(childProps.onTouchMove, longPressHandlers.onTouchMove),
+		style: disabled ? childProps.style : {
+			...childProps.style,
+			WebkitTouchCallout: "none",
+			WebkitUserSelect: "none",
+			userSelect: "none"
+		},
+		"data-expanded": opened ? true : void 0
+	};
+}
+//#endregion
+export { useContextMenuHandlers };
+
+//# sourceMappingURL=use-context-menu-handlers.mjs.map

package/esm/utils/Floating/use-context-menu-handlers.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-context-menu-handlers.mjs","names":[],"sources":["../../../src/utils/Floating/use-context-menu-handlers.ts"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useLongPress } from '@mantine/hooks';\nimport { createEventHandler } from '../../core/utils/create-event-handler/create-event-handler';\n\ninterface UseContextMenuHandlersOptions {\n  /** Props of the child element that opens the dropdown */\n  childProps: Record<string, any>;\n\n  /** If set, right-click trigger is disabled and the browser's default context menu is shown */\n  disabled: boolean | undefined;\n\n  /** Current opened state, used to set `data-expanded` on the child */\n  opened: boolean;\n\n  /** Delay in ms before a touch long-press opens the dropdown, `500` by default */\n  longPressDelay?: number;\n\n  /** Sets the floating reference to a virtual element positioned at the cursor */\n  setReference: (node: object) => void;\n\n  /** Called to open the dropdown after the reference has been set */\n  open: () => void;\n}\n\nexport function useContextMenuHandlers({\n  childProps,\n  disabled,\n  opened,\n  longPressDelay = 500,\n  setReference,\n  open,\n}: UseContextMenuHandlersOptions) {\n  const touchActiveRef = useRef(false);\n  const gestureHandledRef = useRef(false);\n  const touchTargetRef = useRef<object | null>(null);\n  const disabledRef = useRef(disabled);\n  disabledRef.current = disabled;\n\n  const openAtPoint = (clientX: number, clientY: number, contextElement: object | null) => {\n    setReference({\n      getBoundingClientRect: () => ({\n        x: clientX,\n        y: clientY,\n        width: 0,\n        height: 0,\n        top: clientY,\n        left: clientX,\n        right: clientX,\n        bottom: clientY,\n        toJSON: () => undefined,\n      }),\n      contextElement,\n    });\n\n    open();\n  };\n\n  const onMouseDown = createEventHandler<any>(\n    childProps.onMouseDown,\n    (event: React.MouseEvent<HTMLElement>) => {\n      if (disabled) {\n        return;\n      }\n      if (event.button === 2) {\n        event.stopPropagation();\n      }\n    }\n  );\n\n  const onContextMenu = createEventHandler<any>(\n    childProps.onContextMenu,\n    (event: React.MouseEvent<HTMLElement>) => {\n      if (disabled || event.defaultPrevented) {\n        return;\n      }\n\n      event.preventDefault();\n\n      if (gestureHandledRef.current) {\n        return;\n      }\n\n      openAtPoint(event.clientX, event.clientY, event.currentTarget);\n\n      if (touchActiveRef.current) {\n        gestureHandledRef.current = true;\n      }\n    }\n  );\n\n  const longPressHandlers = useLongPress(\n    (event) => {\n      if (disabledRef.current || gestureHandledRef.current) {\n        return;\n      }\n\n      const touchEvent = event as React.TouchEvent<HTMLElement>;\n      const touch = touchEvent.touches[0] ?? touchEvent.changedTouches[0];\n      if (!touch) {\n        return;\n      }\n\n      openAtPoint(touch.clientX, touch.clientY, touchTargetRef.current);\n      gestureHandledRef.current = true;\n    },\n    {\n      threshold: longPressDelay,\n      events: ['touch'],\n      cancelOnMove: true,\n      onStart: (event) => {\n        touchActiveRef.current = true;\n        gestureHandledRef.current = false;\n        touchTargetRef.current = event.currentTarget;\n      },\n      onFinish: (event) => {\n        touchActiveRef.current = false;\n        gestureHandledRef.current = false;\n        if (!disabledRef.current) {\n          event.preventDefault();\n        }\n      },\n      onCancel: () => {\n        touchActiveRef.current = false;\n        gestureHandledRef.current = false;\n      },\n    }\n  );\n\n  const onTouchStart = createEventHandler<any>(\n    childProps.onTouchStart,\n    longPressHandlers.onTouchStart\n  );\n  const onTouchEnd = createEventHandler<any>(childProps.onTouchEnd, longPressHandlers.onTouchEnd);\n  const onTouchCancel = createEventHandler<any>(\n    childProps.onTouchCancel,\n    longPressHandlers.onTouchCancel\n  );\n  const onTouchMove = createEventHandler<any>(\n    childProps.onTouchMove,\n    longPressHandlers.onTouchMove\n  );\n\n  return {\n    onContextMenu,\n    onMouseDown,\n    onTouchStart,\n    onTouchEnd,\n    onTouchCancel,\n    onTouchMove,\n    style: disabled\n      ? childProps.style\n      : {\n          ...childProps.style,\n          WebkitTouchCallout: 'none',\n          WebkitUserSelect: 'none',\n          userSelect: 'none',\n        },\n    'data-expanded': opened ? true : undefined,\n  };\n}\n"],"mappings":";;;;;AAwBA,SAAgB,uBAAuB,EACrC,YACA,UACA,QACA,iBAAiB,KACjB,cACA,QACgC;CAChC,MAAM,iBAAiB,OAAO,KAAK;CACnC,MAAM,oBAAoB,OAAO,KAAK;CACtC,MAAM,iBAAiB,OAAsB,IAAI;CACjD,MAAM,cAAc,OAAO,QAAQ;CACnC,YAAY,UAAU;CAEtB,MAAM,eAAe,SAAiB,SAAiB,mBAAkC;EACvF,aAAa;GACX,8BAA8B;IAC5B,GAAG;IACH,GAAG;IACH,OAAO;IACP,QAAQ;IACR,KAAK;IACL,MAAM;IACN,OAAO;IACP,QAAQ;IACR,cAAc,KAAA;GAChB;GACA;EACF,CAAC;EAED,KAAK;CACP;CAEA,MAAM,cAAc,mBAClB,WAAW,cACV,UAAyC;EACxC,IAAI,UACF;EAEF,IAAI,MAAM,WAAW,GACnB,MAAM,gBAAgB;CAE1B,CACF;CAEA,MAAM,gBAAgB,mBACpB,WAAW,gBACV,UAAyC;EACxC,IAAI,YAAY,MAAM,kBACpB;EAGF,MAAM,eAAe;EAErB,IAAI,kBAAkB,SACpB;EAGF,YAAY,MAAM,SAAS,MAAM,SAAS,MAAM,aAAa;EAE7D,IAAI,eAAe,SACjB,kBAAkB,UAAU;CAEhC,CACF;CAEA,MAAM,oBAAoB,cACvB,UAAU;EACT,IAAI,YAAY,WAAW,kBAAkB,SAC3C;EAGF,MAAM,aAAa;EACnB,MAAM,QAAQ,WAAW,QAAQ,MAAM,WAAW,eAAe;EACjE,IAAI,CAAC,OACH;EAGF,YAAY,MAAM,SAAS,MAAM,SAAS,eAAe,OAAO;EAChE,kBAAkB,UAAU;CAC9B,GACA;EACE,WAAW;EACX,QAAQ,CAAC,OAAO;EAChB,cAAc;EACd,UAAU,UAAU;GAClB,eAAe,UAAU;GACzB,kBAAkB,UAAU;GAC5B,eAAe,UAAU,MAAM;EACjC;EACA,WAAW,UAAU;GACnB,eAAe,UAAU;GACzB,kBAAkB,UAAU;GAC5B,IAAI,CAAC,YAAY,SACf,MAAM,eAAe;EAEzB;EACA,gBAAgB;GACd,eAAe,UAAU;GACzB,kBAAkB,UAAU;EAC9B;CACF,CACF;CAgBA,OAAO;EACL;EACA;EACA,cAjBmB,mBACnB,WAAW,cACX,kBAAkB,YAeP;EACX,YAdiB,mBAAwB,WAAW,YAAY,kBAAkB,UAczE;EACT,eAdoB,mBACpB,WAAW,eACX,kBAAkB,aAYN;EACZ,aAXkB,mBAClB,WAAW,aACX,kBAAkB,WASR;EACV,OAAO,WACH,WAAW,QACX;GACE,GAAG,WAAW;GACd,oBAAoB;GACpB,kBAAkB;GAClB,YAAY;EACd;EACJ,iBAAiB,SAAS,OAAO,KAAA;CACnC;AACF"}

package/lib/components/Collapse/Collapse.d.ts

@@ -14,7 +14,7 @@ export interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'
     transitionTimingFunction?: string;
     /** Determines whether the opacity is animated @default true */
     animateOpacity?: boolean;
-    /** 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 false */
+    /** 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 */
     keepMounted?: boolean;
 }
 export type CollapseFactory = Factory<{

package/lib/components/Dialog/Dialog.d.ts

@@ -9,7 +9,7 @@ export type DialogCssVariables = {
 export interface DialogProps extends BoxProps, AffixBaseProps, PaperBaseProps, StylesApiProps<DialogFactory>, ElementProps<'div'> {
     /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false */
     keepMounted?: boolean;
-    /** If set, displays the close button @default true */
+    /** If set, displays the close button @default false */
     withCloseButton?: boolean;
     /** Called on close button click */
     onClose?: () => void;

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

@@ -1,6 +1,7 @@
 export interface HoverCardContextValue {
     openDropdown: () => void;
     closeDropdown: () => void;
+    assignTarget: (node: HTMLElement | null) => void;
     getReferenceProps?: () => any;
     getFloatingProps?: () => any;
     reference?: (node: HTMLElement | null) => void;

package/lib/components/HoverCard/use-hover-card.d.ts

@@ -10,6 +10,7 @@ export declare function useHoverCard(settings: UseHoverCard): {
     opened: boolean | undefined;
     reference: ((node: import("@floating-ui/react-dom").ReferenceType | null) => void) & ((node: import("@floating-ui/react").ReferenceType | null) => void);
     floating: ((node: HTMLElement | null) => void) & ((node: HTMLElement | null) => void);
+    assignTarget: (node: HTMLElement | null) => void;
     getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
     getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
     openDropdown: () => void;

package/lib/components/Input/use-input-props.d.ts

@@ -9,7 +9,7 @@ interface BaseProps extends __BaseInputProps, BoxProps, StylesApiProps<{
     id?: string;
 }
 export declare function useInputProps<T extends BaseProps, U extends Partial<T> | null>(component: string, defaultProps: U, _props: T): Omit<T & (U extends null | undefined ? {} : { [Key in Extract<keyof T, keyof U>]-?: U[Key] | NonNullable<T[Key]>; }), "label" | "style" | "size" | "styles" | "className" | "id" | "vars" | "variant" | "unstyled" | "attributes" | "classNames" | "mod" | "description" | "error" | "__staticSelector" | "required" | "__stylesApiProps" | "withAsterisk" | "labelProps" | "descriptionProps" | "errorProps" | "inputContainer" | "inputWrapperOrder" | "wrapperProps"> & {
-    classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
+    classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
     styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
     unstyled: boolean | undefined;
     wrapperProps: {
@@ -299,7 +299,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
         description: import("react").ReactNode;
         error: import("react").ReactNode;
         required: boolean | undefined;
-        classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
+        classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
         __staticSelector: string | undefined;
         __stylesApiProps: Record<string, any> | BaseProps;
         errorProps: (import(".").InputErrorProps & import("../..").DataAttributes) | undefined;
@@ -319,7 +319,7 @@ export declare function useInputProps<T extends BaseProps, U extends Partial<T>
     } & BoxProps;
     inputProps: {
         required: boolean | undefined;
-        classNames: Partial<Record<string, string>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string>>) | undefined;
+        classNames: Partial<Record<string, string | undefined>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, string | undefined>>) | undefined;
         styles: Partial<Record<string, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: any, ctx: unknown) => Partial<Record<string, import("../..").CSSProperties>>) | undefined;
         unstyled: boolean | undefined;
         size: (string & {}) | import("../..").MantineSize | undefined;

package/lib/components/MaskInput/use-mask-input-props.d.ts

@@ -4,7 +4,7 @@ export declare function useMaskInputProps(props: MaskInputProps & {
 }): {
     maskRef: import("react").RefCallback<HTMLInputElement>;
     elementProps: {
-        className?: string;
+        className?: string | undefined;
         style?: import("../..").MantineStyleProp;
         __vars?: import("../..").CssVarsProp;
         __size?: string;
@@ -102,7 +102,7 @@ export declare function useMaskInputProps(props: MaskInputProps & {
         __bottomSectionProps?: React.ComponentProps<"div">;
         unstyled?: boolean;
         variant?: (string & {}) | import("..").InputVariant | undefined;
-        classNames?: Partial<Record<import("..").__InputStylesNames, string>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, string>>) | undefined;
+        classNames?: Partial<Record<import("..").__InputStylesNames, string | undefined>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, string | undefined>>) | undefined;
         styles?: Partial<Record<import("..").__InputStylesNames, import("../..").CSSProperties>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, import("../..").CSSProperties>>) | undefined;
         vars?: import("../..").PartialVarsResolver<{
             props: MaskInputProps;

package/lib/components/Menu/MenuContextMenu/MenuContextMenu.d.ts

@@ -3,6 +3,8 @@ export interface MenuContextMenuProps {
     children: React.ReactNode;
     /** If set, the right-click trigger is disabled and the browser's default context menu is shown */
     disabled?: boolean;
+    /** Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default */
+    longPressDelay?: number;
 }
 export declare function MenuContextMenu(props: MenuContextMenuProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare namespace MenuContextMenu {

package/lib/components/Menu/MenuSub/MenuSub.d.ts

@@ -9,6 +9,8 @@ export type MenuSubFactory = Factory<{
 }>;
 export interface MenuSubProps extends __PopoverProps {
     children: React.ReactNode;
+    /** Controlled opened state */
+    opened?: boolean;
     /** Called with current state when dropdown opens or closes */
     onChange?: (opened: boolean) => void;
     /** Open delay in ms, applicable when hover trigger is used */

package/lib/components/Pagination/Pagination.icons.d.ts

@@ -2,7 +2,7 @@ interface _PaginationIconProps {
     path: string;
     stroke?: any;
     style?: React.CSSProperties;
-    className?: string;
+    className?: string | undefined;
     children?: React.ReactNode;
 }
 export type PaginationIconProps = Omit<_PaginationIconProps, 'path'>;

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

@@ -44,6 +44,7 @@ export interface PopoverContextValue {
     __staticSelector: string;
     variant: string | undefined;
     keepMounted: boolean | undefined;
+    keepMountedMode: 'activity' | 'display-none' | undefined;
     getStyles: GetStylesApi<PopoverFactory>;
     resolvedStyles: Record<string, any> | undefined;
     floatingStrategy: FloatingStrategy | undefined;

package/lib/components/Popover/Popover.d.ts

@@ -27,6 +27,13 @@ export interface __PopoverProps {
     onOpen?: () => void;
     /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */
     keepMounted?: boolean;
+    /**
+     * Controls how the dropdown is hidden when `keepMounted` is set:
+     * `'activity'` – hidden with React 19 `Activity` component,
+     * `'display-none'` – hidden with `display: none` styles
+     * @default 'activity'
+     */
+    keepMountedMode?: 'activity' | 'display-none';
     /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */
     transitionProps?: TransitionOverride;
     /** Called when exit transition ends */

package/lib/components/Popover/PopoverContextMenu/PopoverContextMenu.d.ts

@@ -3,6 +3,8 @@ export interface PopoverContextMenuProps {
     children: React.ReactNode;
     /** If set, the right-click trigger is disabled and the browser's default context menu is shown */
     disabled?: boolean;
+    /** Delay in ms before a touch long-press opens the dropdown on touch devices, `500` by default */
+    longPressDelay?: number;
 }
 export declare function PopoverContextMenu(props: PopoverContextMenuProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export declare namespace PopoverContextMenu {

package/lib/components/Slider/Thumb/Thumb.d.ts

@@ -17,7 +17,7 @@ export interface ThumbProps extends Omit<React.ComponentProps<'div'>, 'value'> {
     children?: React.ReactNode;
     disabled: boolean | undefined;
     orientation?: 'horizontal' | 'vertical';
-    className?: string;
+    className?: string | undefined;
     style?: React.CSSProperties;
 }
 export declare function Thumb({ max, min, value, position, label, dragging, onMouseDown, onKeyDownCapture, labelTransitionProps, labelAlwaysOn, thumbLabel, thumbValueText, onFocus, onBlur, showLabelOnHover, isHovered, children, disabled, orientation, ref, }: ThumbProps): import("react/jsx-runtime").JSX.Element;

package/lib/components/Splitter/Splitter.d.ts

@@ -32,6 +32,8 @@ export interface SplitterProps extends BoxProps, StylesApiProps<SplitterFactory>
     handleIcon?: React.ReactNode;
     /** Determines whether the thumb with grip icon is displayed on the handle @default true */
     withHandle?: boolean;
+    /** Restore the two panes adjacent to a handle to their default ratio (preserving their combined size) when the handle is double-clicked @default true */
+    resetOnDoubleClick?: boolean;
     /** Ref to imperative splitter API (sizes, collapse, expand, etc.) */
     splitterRef?: React.RefObject<UseSplitterReturnValue | null>;
     /** Splitter panes */

package/lib/components/Transition/Transition.d.ts

@@ -2,6 +2,13 @@ import { MantineTransition } from './transitions';
 export interface TransitionProps {
     /** If set, the element is kept in the DOM when hidden. React 19 `Activity` is used to preserve state while the element is not visible. */
     keepMounted?: boolean;
+    /**
+     * Controls how the element is hidden when `keepMounted` is set:
+     * `'activity'` – hidden with React 19 `Activity` component,
+     * `'display-none'` – hidden with `display: none` styles
+     * @default 'activity'
+     */
+    keepMountedMode?: 'activity' | 'display-none';
     /** Transition name or object */
     transition?: MantineTransition;
     /** Transition duration in ms @default 250 */
@@ -28,7 +35,7 @@ export interface TransitionProps {
     exitDelay?: number;
 }
 export type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;
-export declare function Transition({ keepMounted, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function Transition({ keepMounted, keepMountedMode, transition, duration, exitDuration, mounted, children, timingFunction, onExit, onEntered, onEnter, onExited, enterDelay, exitDelay, }: TransitionProps): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace Transition {
     var displayName: string;
 }

package/lib/core/Box/Box.d.ts

@@ -5,7 +5,7 @@ export type Mod = Record<string, any> | string;
 export type BoxMod = Mod | Mod[] | BoxMod[];
 export interface BoxProps extends MantineStyleProps {
     /** Class added to the root element, if applicable */
-    className?: string;
+    className?: string | undefined;
     /** Inline style added to root component element, can subscribe to theme defined on MantineProvider */
     style?: MantineStyleProp;
     /** CSS variables defined on root component element */

package/lib/core/styles-api/styles-api.types.d.ts

@@ -3,7 +3,7 @@ import type { FactoryPayload } from '../factory';
 import type { MantineTheme } from '../MantineProvider';
 import { PartialVarsResolver } from './create-vars-resolver/create-vars-resolver';
 export interface GetStylesApiOptions {
-    className?: string;
+    className?: string | undefined;
     style?: MantineStyleProp;
     focusable?: boolean;
     active?: boolean;
@@ -21,7 +21,7 @@ export interface GetStylesApiOptions {
 }
 export type StylesApiRecord<Payload extends FactoryPayload, DataType> = Payload['compound'] extends true ? Payload['stylesNames'] extends string ? StylesRecord<Payload['stylesNames'], DataType> : never : Payload['stylesNames'] extends string ? StylesRecord<Payload['stylesNames'], DataType> | ((theme: MantineTheme, props: Payload['props'], ctx: Payload['ctx']) => StylesRecord<Payload['stylesNames'], DataType>) : never;
 export type Styles<Payload extends FactoryPayload> = StylesApiRecord<Payload, CSSProperties>;
-export type ClassNames<Payload extends FactoryPayload> = StylesApiRecord<Payload, string>;
+export type ClassNames<Payload extends FactoryPayload> = StylesApiRecord<Payload, string | undefined>;
 export type ClassNamesArray<Payload extends FactoryPayload> = (StylesApiRecord<Payload, string> | undefined)[];
 export type Attributes<Payload extends FactoryPayload> = Payload['stylesNames'] extends string ? Payload['compound'] extends true ? never : {
     [K in Payload['stylesNames']]?: Record<string, any>;

package/lib/core/styles-api/use-styles/use-styles.d.ts

@@ -8,7 +8,7 @@ export interface UseStylesInput<Payload extends FactoryPayload> {
     classes: Payload['stylesNames'] extends string ? Record<string, string> : never;
     props: Payload['props'];
     stylesCtx?: Payload['ctx'];
-    className?: string;
+    className?: string | undefined;
     style?: MantineStyleProp;
     rootSelector?: Payload['stylesNames'];
     unstyled?: boolean;

package/lib/utils/Floating/{create-context-menu-handlers.d.ts → use-context-menu-handlers.d.ts}

@@ -1,18 +1,25 @@
-interface CreateContextMenuHandlersOptions {
+interface UseContextMenuHandlersOptions {
     /** Props of the child element that opens the dropdown */
     childProps: Record<string, any>;
     /** If set, right-click trigger is disabled and the browser's default context menu is shown */
     disabled: boolean | undefined;
     /** Current opened state, used to set `data-expanded` on the child */
     opened: boolean;
+    /** Delay in ms before a touch long-press opens the dropdown, `500` by default */
+    longPressDelay?: number;
     /** Sets the floating reference to a virtual element positioned at the cursor */
     setReference: (node: object) => void;
     /** Called to open the dropdown after the reference has been set */
     open: () => void;
 }
-export declare function createContextMenuHandlers({ childProps, disabled, opened, setReference, open, }: CreateContextMenuHandlersOptions): {
+export declare function useContextMenuHandlers({ childProps, disabled, opened, longPressDelay, setReference, open, }: UseContextMenuHandlersOptions): {
     onContextMenu: (event?: any) => void;
     onMouseDown: (event?: any) => void;
+    onTouchStart: (event?: any) => void;
+    onTouchEnd: (event?: any) => void;
+    onTouchCancel: (event?: any) => void;
+    onTouchMove: (event?: any) => void;
+    style: any;
     'data-expanded': boolean | undefined;
 };
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mantine/core",
-  "version": "9.3.0",
+  "version": "9.3.2",
   "description": "React components library focused on usability, accessibility and developer experience",
   "homepage": "https://mantine.dev/",
   "license": "MIT",
@@ -43,7 +43,7 @@
     "directory": "packages/@mantine/core"
   },
   "peerDependencies": {
-    "@mantine/hooks": "9.3.0",
+    "@mantine/hooks": "9.3.2",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },

package/styles/Blockquote.css

@@ -3,7 +3,7 @@
 
   position: relative;
   margin: 0;
-  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));
+  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap));
   border-inline-start: var(--blockquote-border);
   border-start-end-radius: var(--bq-radius);
   border-end-end-radius: var(--bq-radius);

package/styles/Blockquote.layer.css

@@ -3,7 +3,7 @@
 
   position: relative;
   margin: 0;
-  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));
+  text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap));
   border-inline-start: var(--blockquote-border);
   border-start-end-radius: var(--bq-radius);
   border-end-end-radius: var(--bq-radius);

package/styles/Input.css

@@ -164,7 +164,7 @@
   width: 100%;
   transition: border-color 100ms ease;
 
-  text-align: start;
+  text-align: var(--input-text-align, start);
   color: var(--input-color);
   border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
   background-color: var(--input-bg);

package/styles/Input.layer.css

@@ -164,7 +164,7 @@
   width: 100%;
   transition: border-color 100ms ease;
 
-  text-align: start;
+  text-align: var(--input-text-align, start);
   color: var(--input-color);
   border: calc(0.0625rem * var(--mantine-scale)) solid var(--input-bd);
   background-color: var(--input-bg);

package/styles/SegmentedControl.css

@@ -45,7 +45,10 @@
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
+  border-radius: max(
+    calc(var(--sc-radius, var(--mantine-radius-default)) - 4px),
+    calc(var(--sc-radius, var(--mantine-radius-default)) / 4)
+  );
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {

package/styles/SegmentedControl.layer.css

@@ -45,7 +45,10 @@
   position: absolute;
   display: block;
   z-index: 1;
-  border-radius: calc(var(--sc-radius, var(--mantine-radius-default)) - 4px);
+  border-radius: max(
+    calc(var(--sc-radius, var(--mantine-radius-default)) - 4px),
+    calc(var(--sc-radius, var(--mantine-radius-default)) / 4)
+  );
 }
 
 :where([data-mantine-color-scheme='light']) .m_9e182ccd {

package/styles/Text.css

@@ -4,7 +4,7 @@
   font-size: var(--text-fz, var(--mantine-font-size-md));
   line-height: var(--text-lh, var(--mantine-line-height-md));
   font-weight: var(--mantine-font-weight-regular);
-  text-wrap: var(--text-text-wrap, var(--mantine-text-wrap, wrap));
+  text-wrap: var(--text-text-wrap, var(--mantine-text-wrap));
   margin: 0;
   padding: 0;
 }