npm - @mantine/core - Versions diffs - 9.2.2 → 9.3.0 - Mend

@mantine/core 9.2.2 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (851) hide show

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

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

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

@@ -46,6 +46,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 	const { elementProps: dragElementProps, dragHandleProps } = useTreeNodeDragDrop({
 		nodeValue: node.value,
 		hasChildren,
+		isExpanded,
 		data,
 		onDragDrop,
 		dragStateRef,
@@ -128,6 +129,7 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 				node,
 				level,
 				selected,
+				isRoot: level === 1,
 				tree: controller,
 				expanded: isExpanded,
 				hasChildren,
@@ -148,7 +150,10 @@ function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selec
 					...getStyles("node", { style: { "--label-offset": `calc(var(--level-offset) * ${level})` } }),
 					children: /* @__PURE__ */ jsx("div", {
 						...getStyles("label"),
-						children: /* @__PURE__ */ jsx(Loader, { size: 16 })
+						children: /* @__PURE__ */ jsx(Loader, {
+							size: 16,
+							style: { marginInlineStart: 4 }
+						})
 					})
 				})
 			}),

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

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

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"use-tree-node-drag-drop.mjs","names":[],"sources":["../../../src/components/Tree/use-tree-node-drag-drop.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { findTreeNode } from './get-children-nodes-values/get-children-nodes-values';\nimport type { TreeDragDropPayload, TreeDragDropPosition } from './move-tree-node/move-tree-node';\nimport type { TreeDragState, TreeNodeData } from './Tree';\n\nexport type TreeAllowDrop = (payload: TreeDragDropPayload) => boolean;\n\ninterface UseTreeNodeDragDropInput {\n nodeValue: string;\n hasChildren: boolean;\n data: TreeNodeData[];\n onDragDrop: ((payload: TreeDragDropPayload) => void) \| undefined;\n dragStateRef: React.RefObject<TreeDragState>;\n allowDrop: TreeAllowDrop \| undefined;\n withDragHandle: boolean \| undefined;\n}\n\nexport interface TreeDragHandleProps {\n onMouseDown: (event: React.MouseEvent) => void;\n}\n\nfunction isDescendantOf(\n data: TreeNodeData[],\n ancestorValue: string,\n descendantValue: string\n): boolean {\n const ancestor = findTreeNode(ancestorValue, data);\n if (!ancestor \|\| !ancestor.children) {\n return false;\n }\n\n function check(nodes: TreeNodeData[]): boolean {\n for (const node of nodes) {\n if (node.value === descendantValue) {\n return true;\n }\n\n if (node.children && check(node.children)) {\n return true;\n }\n }\n\n return false;\n }\n\n return check(ancestor.children);\n}\n\nfunction getDragDropPosition(\n event: React.DragEvent,\n element: HTMLElement,\n hasChildren: boolean\n): TreeDragDropPosition {\n const rect = element.getBoundingClientRect();\n const y = event.clientY - rect.top;\n const height = rect.height;\n\n if (hasChildren) {\n if (y < height * 0.25) {\n return 'before';\n }\n\n if (y > height * 0.75) {\n return 'after';\n }\n\n return 'inside';\n }\n\n if (y < height * 0.5) {\n return 'before';\n }\n\n return 'after';\n}\n\nconst EMPTY_DRAG_PROPS = { elementProps: {}, dragHandleProps: undefined } as const;\n\nexport function useTreeNodeDragDrop({\n nodeValue,\n hasChildren,\n data,\n onDragDrop,\n dragStateRef,\n allowDrop,\n withDragHandle,\n}: UseTreeNodeDragDropInput) {\n const [isDragHandleActive, setIsDragHandleActive] = useState(false);\n\n useEffect(() => {\n if (!withDragHandle \|\| !isDragHandleActive) {\n return undefined;\n }\n\n const handleWindowMouseUp = () => setIsDragHandleActive(false);\n window.addEventListener('mouseup', handleWindowMouseUp);\n return () => window.removeEventListener('mouseup', handleWindowMouseUp);\n }, [withDragHandle, isDragHandleActive]);\n\n if (!onDragDrop) {\n return EMPTY_DRAG_PROPS;\n }\n\n const handleDragStart = (event: React.DragEvent) => {\n if (withDragHandle && !isDragHandleActive) {\n return;\n }\n\n event.stopPropagation();\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', nodeValue);\n dragStateRef.current.draggedValue = nodeValue;\n\n const target = event.currentTarget as HTMLElement;\n requestAnimationFrame(() => {\n target.setAttribute('data-dragging', 'true');\n });\n };\n\n const handleDragOver = (event: React.DragEvent) => {\n const draggedValue = dragStateRef.current.draggedValue;\n if (!draggedValue \|\| draggedValue === nodeValue) {\n return;\n }\n\n if (isDescendantOf(data, draggedValue, nodeValue)) {\n return;\n }\n\n const target = event.currentTarget as HTMLElement;\n const position = getDragDropPosition(event, target, hasChildren);\n\n if (allowDrop && !allowDrop({ draggedNode: draggedValue, targetNode: nodeValue, position })) {\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget && prevTarget !== target) {\n prevTarget.removeAttribute('data-drag-over');\n }\n target.removeAttribute('data-drag-over');\n dragStateRef.current.currentDropTarget = null;\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n event.dataTransfer.dropEffect = 'move';\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget && prevTarget !== target) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n target.setAttribute('data-drag-over', position);\n dragStateRef.current.currentDropTarget = target;\n };\n\n const handleDragLeave = (event: React.DragEvent) => {\n const target = event.currentTarget as HTMLElement;\n const related = event.relatedTarget as HTMLElement \| null;\n\n if (related && target.contains(related)) {\n return;\n }\n\n target.removeAttribute('data-drag-over');\n\n if (dragStateRef.current.currentDropTarget === target) {\n dragStateRef.current.currentDropTarget = null;\n }\n };\n\n const handleDrop = (event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const target = event.currentTarget as HTMLElement;\n const position = target.getAttribute('data-drag-over') as TreeDragDropPosition \| null;\n target.removeAttribute('data-drag-over');\n\n const draggedValue = dragStateRef.current.draggedValue;\n if (draggedValue && position && draggedValue !== nodeValue) {\n const payload = { draggedNode: draggedValue, targetNode: nodeValue, position };\n if (!allowDrop \|\| allowDrop(payload)) {\n onDragDrop(payload);\n }\n }\n\n dragStateRef.current.draggedValue = null;\n dragStateRef.current.currentDropTarget = null;\n };\n\n const handleDragEnd = (event: React.DragEvent) => {\n const target = event.currentTarget as HTMLElement;\n target.removeAttribute('data-dragging');\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n dragStateRef.current.draggedValue = null;\n dragStateRef.current.currentDropTarget = null;\n\n if (withDragHandle) {\n setIsDragHandleActive(false);\n }\n };\n\n const elementProps = {\n draggable: withDragHandle ? isDragHandleActive : true,\n onDragStart: handleDragStart,\n onDragOver: handleDragOver,\n onDragLeave: handleDragLeave,\n onDrop: handleDrop,\n onDragEnd: handleDragEnd,\n };\n\n const dragHandleProps: TreeDragHandleProps \| undefined = withDragHandle\n ? { onMouseDown: () => setIsDragHandleActive(true) }\n : undefined;\n\n return { elementProps, dragHandleProps };\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"use-tree-node-drag-drop.mjs","names":[],"sources":["../../../src/components/Tree/use-tree-node-drag-drop.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\nimport { findTreeNode } from './get-children-nodes-values/get-children-nodes-values';\nimport type { TreeDragDropPayload, TreeDragDropPosition } from './move-tree-node/move-tree-node';\nimport type { TreeDragState, TreeNodeData } from './Tree';\n\nexport type TreeAllowDrop = (payload: TreeDragDropPayload) => boolean;\n\ninterface UseTreeNodeDragDropInput {\n nodeValue: string;\n hasChildren: boolean;\n isExpanded: boolean;\n data: TreeNodeData[];\n onDragDrop: ((payload: TreeDragDropPayload) => void) \| undefined;\n dragStateRef: React.RefObject<TreeDragState>;\n allowDrop: TreeAllowDrop \| undefined;\n withDragHandle: boolean \| undefined;\n}\n\nexport interface TreeDragHandleProps {\n onMouseDown: (event: React.MouseEvent) => void;\n}\n\nfunction isDescendantOf(\n data: TreeNodeData[],\n ancestorValue: string,\n descendantValue: string\n): boolean {\n const ancestor = findTreeNode(ancestorValue, data);\n if (!ancestor \|\| !ancestor.children) {\n return false;\n }\n\n function check(nodes: TreeNodeData[]): boolean {\n for (const node of nodes) {\n if (node.value === descendantValue) {\n return true;\n }\n\n if (node.children && check(node.children)) {\n return true;\n }\n }\n\n return false;\n }\n\n return check(ancestor.children);\n}\n\nfunction getDragDropPosition(\n event: React.DragEvent,\n element: HTMLElement,\n hasChildren: boolean,\n isExpanded: boolean\n): TreeDragDropPosition {\n const rect = element.getBoundingClientRect();\n const y = event.clientY - rect.top;\n const height = rect.height;\n\n if (hasChildren) {\n // Expanded folder: the subtree is visually below the label, so an 'after' drop\n // on the label itself would be ambiguous — the indicator would render between\n // the folder name and its first child, which reads as \"as first child\". Use\n // 2 zones: 'before' (top half) and 'inside' (bottom half). To drop after an\n // expanded folder, hover over the next sibling's 'before' position.\n if (isExpanded) {\n if (y < height * 0.5) {\n return 'before';\n }\n return 'inside';\n }\n\n // Collapsed folder: full 3-zone behavior.\n if (y < height * 0.25) {\n return 'before';\n }\n\n if (y > height * 0.75) {\n return 'after';\n }\n\n return 'inside';\n }\n\n if (y < height * 0.5) {\n return 'before';\n }\n\n return 'after';\n}\n\nconst EMPTY_DRAG_PROPS = { elementProps: {}, dragHandleProps: undefined } as const;\n\nexport function useTreeNodeDragDrop({\n nodeValue,\n hasChildren,\n isExpanded,\n data,\n onDragDrop,\n dragStateRef,\n allowDrop,\n withDragHandle,\n}: UseTreeNodeDragDropInput) {\n const [isDragHandleActive, setIsDragHandleActive] = useState(false);\n\n useEffect(() => {\n if (!withDragHandle \|\| !isDragHandleActive) {\n return undefined;\n }\n\n const handleWindowMouseUp = () => setIsDragHandleActive(false);\n window.addEventListener('mouseup', handleWindowMouseUp);\n return () => window.removeEventListener('mouseup', handleWindowMouseUp);\n }, [withDragHandle, isDragHandleActive]);\n\n if (!onDragDrop) {\n return EMPTY_DRAG_PROPS;\n }\n\n const handleDragStart = (event: React.DragEvent) => {\n if (withDragHandle && !isDragHandleActive) {\n return;\n }\n\n event.stopPropagation();\n event.dataTransfer.effectAllowed = 'move';\n event.dataTransfer.setData('text/plain', nodeValue);\n dragStateRef.current.draggedValue = nodeValue;\n\n const target = event.currentTarget as HTMLElement;\n const treeItem = target.closest('[role=treeitem]') as HTMLElement \| null;\n if (treeItem) {\n treeItem.setAttribute('data-dragging', 'true');\n }\n\n requestAnimationFrame(() => {\n target.setAttribute('data-dragging', 'true');\n });\n };\n\n const handleDragOver = (event: React.DragEvent) => {\n const draggedValue = dragStateRef.current.draggedValue;\n if (!draggedValue \|\| draggedValue === nodeValue) {\n return;\n }\n\n if (isDescendantOf(data, draggedValue, nodeValue)) {\n return;\n }\n\n const target = event.currentTarget as HTMLElement;\n const position = getDragDropPosition(event, target, hasChildren, isExpanded);\n\n if (allowDrop && !allowDrop({ draggedNode: draggedValue, targetNode: nodeValue, position })) {\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget && prevTarget !== target) {\n prevTarget.removeAttribute('data-drag-over');\n }\n target.removeAttribute('data-drag-over');\n dragStateRef.current.currentDropTarget = null;\n return;\n }\n\n event.preventDefault();\n event.stopPropagation();\n event.dataTransfer.dropEffect = 'move';\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget && prevTarget !== target) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n target.setAttribute('data-drag-over', position);\n dragStateRef.current.currentDropTarget = target;\n };\n\n const handleDragLeave = (event: React.DragEvent) => {\n const target = event.currentTarget as HTMLElement;\n const related = event.relatedTarget as HTMLElement \| null;\n\n if (related && target.contains(related)) {\n return;\n }\n\n target.removeAttribute('data-drag-over');\n\n if (dragStateRef.current.currentDropTarget === target) {\n dragStateRef.current.currentDropTarget = null;\n }\n };\n\n const handleDrop = (event: React.DragEvent) => {\n event.preventDefault();\n event.stopPropagation();\n\n const target = event.currentTarget as HTMLElement;\n const position = target.getAttribute('data-drag-over') as TreeDragDropPosition \| null;\n target.removeAttribute('data-drag-over');\n\n const draggedValue = dragStateRef.current.draggedValue;\n if (draggedValue && position && draggedValue !== nodeValue) {\n const payload = { draggedNode: draggedValue, targetNode: nodeValue, position };\n if (!allowDrop \|\| allowDrop(payload)) {\n onDragDrop(payload);\n }\n }\n\n dragStateRef.current.draggedValue = null;\n dragStateRef.current.currentDropTarget = null;\n };\n\n const handleDragEnd = (event: React.DragEvent) => {\n const target = event.currentTarget as HTMLElement;\n target.removeAttribute('data-dragging');\n\n const treeItem = target.closest('[role=treeitem]') as HTMLElement \| null;\n if (treeItem) {\n treeItem.removeAttribute('data-dragging');\n }\n\n const prevTarget = dragStateRef.current.currentDropTarget;\n if (prevTarget) {\n prevTarget.removeAttribute('data-drag-over');\n }\n\n dragStateRef.current.draggedValue = null;\n dragStateRef.current.currentDropTarget = null;\n\n if (withDragHandle) {\n setIsDragHandleActive(false);\n }\n };\n\n const elementProps = {\n draggable: withDragHandle ? isDragHandleActive : true,\n onDragStart: handleDragStart,\n onDragOver: handleDragOver,\n onDragLeave: handleDragLeave,\n onDrop: handleDrop,\n onDragEnd: handleDragEnd,\n };\n\n const dragHandleProps: TreeDragHandleProps \| undefined = withDragHandle\n ? { onMouseDown: () => setIsDragHandleActive(true) }\n : undefined;\n\n return { elementProps, dragHandleProps };\n}\n"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Typography.module.mjs","names":[],"sources":["../../../src/components/Typography/Typography.module.css"],"sourcesContent":[".root {\n & :first-child {\n margin-top: 0;\n }\n\n & :last-child {\n margin-bottom: 0;\n }\n\n & :where(h1, h2, h3, h4, h5, h6) {\n margin-bottom: var(--mantine-spacing-xs);\n text-wrap: var(--mantine-heading-text-wrap);\n font-family: var(--mantine-font-family-headings);\n }\n\n & :where(h1) {\n margin-top: calc(1.5 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h1-font-size);\n line-height: var(--mantine-h1-line-height);\n font-weight: var(--mantine-h1-font-weight);\n }\n\n & :where(h2) {\n margin-top: var(--mantine-spacing-xl);\n font-size: var(--mantine-h2-font-size);\n line-height: var(--mantine-h2-line-height);\n font-weight: var(--mantine-h2-font-weight);\n }\n\n & :where(h3) {\n margin-top: calc(0.8 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h3-font-size);\n line-height: var(--mantine-h3-line-height);\n font-weight: var(--mantine-h3-font-weight);\n }\n\n & :where(h4) {\n margin-top: calc(0.8 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h4-font-size);\n line-height: var(--mantine-h4-line-height);\n font-weight: var(--mantine-h4-font-weight);\n }\n\n & :where(h5) {\n margin-top: calc(0.5 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h5-font-size);\n line-height: var(--mantine-h5-line-height);\n font-weight: var(--mantine-h5-font-weight);\n }\n\n & :where(h6) {\n margin-top: calc(0.5 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h6-font-size);\n line-height: var(--mantine-h6-line-height);\n font-weight: var(--mantine-h6-font-weight);\n }\n\n & :where(img) {\n max-width: 100%;\n margin-bottom: var(--mantine-spacing-xs);\n }\n\n & :where(p) {\n margin-top: 0;\n margin-bottom: var(--mantine-spacing-lg);\n }\n\n & :where(mark) {\n @mixin where-light {\n background-color: var(--mantine-color-yellow-2);\n color: inherit;\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-yellow-5);\n color: var(--mantine-color-black);\n }\n }\n\n & :where(a) {\n color: var(--mantine-color-anchor);\n text-decoration: none;\n\n @mixin hover {\n text-decoration: underline;\n }\n }\n\n & :where(hr) {\n margin-top: var(--mantine-spacing-md);\n margin-bottom: var(--mantine-spacing-md);\n border: 0;\n border-top: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-3);\n }\n }\n\n & :where(pre) {\n padding: var(--mantine-spacing-xs);\n line-height: var(--mantine-line-height);\n margin: 0;\n margin-top: var(--mantine-spacing-md);\n margin-bottom: var(--mantine-spacing-md);\n overflow-x: auto;\n font-family: var(--mantine-font-family-monospace);\n font-size: var(--mantine-font-size-xs);\n border-radius: var(--mantine-radius-sm);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n\n & :where(code) {\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n color: inherit;\n border: 0;\n }\n }\n\n & :where(kbd) {\n --kbd-fz: 12px;\n --kbd-padding: 3px 5px;\n\n font-family: var(--mantine-font-family-monospace);\n line-height: var(--mantine-line-height);\n font-weight: var(--mantine-font-weight-bold);\n padding: var(--kbd-padding);\n font-size: var(--kbd-fz);\n border-radius: var(--mantine-radius-sm);\n border: 1px solid;\n border-bottom-width: 3px;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-3);\n color: var(--mantine-color-gray-7);\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-3);\n color: var(--mantine-color-dark-0);\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n & :where(code) {\n line-height: var(--mantine-line-height);\n padding: 1px 5px;\n border-radius: var(--mantine-radius-sm);\n font-family: var(--mantine-font-family-monospace);\n font-size: var(--mantine-font-size-xs);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n color: var(--mantine-color-white);\n }\n }\n\n & :where(ul, ol):not([data-type='taskList']) {\n margin-bottom: var(--mantine-spacing-md);\n padding-inline-start: var(--mantine-spacing-xl);\n list-style-position: outside;\n }\n\n & :where(table) {\n width: 100%;\n border-collapse: collapse;\n caption-side: bottom;\n margin-bottom: var(--mantine-spacing-md);\n\n @mixin where-light {\n --table-border-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --table-border-color: var(--mantine-color-dark-4);\n }\n\n & :where(caption) {\n margin-top: var(--mantine-spacing-xs);\n font-size: var(--mantine-font-size-sm);\n color: var(--mantine-color-dimmed);\n }\n\n & :where(th) {\n text-align: ~~left~~;\n font-weight: bold;\n font-size: var(--mantine-font-size-sm);\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n }\n\n & :where(thead th) {\n border-bottom: 1px solid;\n border-color: var(--table-border-color);\n }\n\n & :where(tfoot th) {\n border-top: 1px solid;\n border-color: var(--table-border-color);\n }\n\n & :where(td) {\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n border-bottom: 1px solid;\n border-color: var(--table-border-color);\n font-size: var(--mantine-font-size-sm);\n }\n\n & :where(tr:last-of-type td) {\n border-bottom: 0;\n }\n }\n\n & :where(blockquote) {\n font-size: var(--mantine-font-size-lg);\n line-height: var(--mantine-line-height);\n margin: var(--mantine-spacing-md) 0;\n border-radius: var(--mantine-radius-sm);\n padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n }\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Typography.module.mjs","names":[],"sources":["../../../src/components/Typography/Typography.module.css"],"sourcesContent":[".root {\n & :first-child {\n margin-top: 0;\n }\n\n & :last-child {\n margin-bottom: 0;\n }\n\n & :where(h1, h2, h3, h4, h5, h6) {\n margin-bottom: var(--mantine-spacing-xs);\n text-wrap: var(--mantine-heading-text-wrap);\n font-family: var(--mantine-font-family-headings);\n }\n\n & :where(h1) {\n margin-top: calc(1.5 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h1-font-size);\n line-height: var(--mantine-h1-line-height);\n font-weight: var(--mantine-h1-font-weight);\n }\n\n & :where(h2) {\n margin-top: var(--mantine-spacing-xl);\n font-size: var(--mantine-h2-font-size);\n line-height: var(--mantine-h2-line-height);\n font-weight: var(--mantine-h2-font-weight);\n }\n\n & :where(h3) {\n margin-top: calc(0.8 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h3-font-size);\n line-height: var(--mantine-h3-line-height);\n font-weight: var(--mantine-h3-font-weight);\n }\n\n & :where(h4) {\n margin-top: calc(0.8 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h4-font-size);\n line-height: var(--mantine-h4-line-height);\n font-weight: var(--mantine-h4-font-weight);\n }\n\n & :where(h5) {\n margin-top: calc(0.5 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h5-font-size);\n line-height: var(--mantine-h5-line-height);\n font-weight: var(--mantine-h5-font-weight);\n }\n\n & :where(h6) {\n margin-top: calc(0.5 * var(--mantine-spacing-xl));\n font-size: var(--mantine-h6-font-size);\n line-height: var(--mantine-h6-line-height);\n font-weight: var(--mantine-h6-font-weight);\n }\n\n & :where(img) {\n max-width: 100%;\n margin-bottom: var(--mantine-spacing-xs);\n }\n\n & :where(p) {\n margin-top: 0;\n margin-bottom: var(--mantine-spacing-lg);\n }\n\n & :where(mark) {\n @mixin where-light {\n background-color: var(--mantine-color-yellow-2);\n color: inherit;\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-yellow-5);\n color: var(--mantine-color-black);\n }\n }\n\n & :where(a) {\n color: var(--mantine-color-anchor);\n text-decoration: none;\n\n @mixin hover {\n text-decoration: underline;\n }\n }\n\n & :where(hr) {\n margin-top: var(--mantine-spacing-md);\n margin-bottom: var(--mantine-spacing-md);\n border: 0;\n border-top: 1px solid;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-3);\n }\n }\n\n & :where(pre) {\n padding: var(--mantine-spacing-xs);\n line-height: var(--mantine-line-height);\n margin: 0;\n margin-top: var(--mantine-spacing-md);\n margin-bottom: var(--mantine-spacing-md);\n overflow-x: auto;\n font-family: var(--mantine-font-family-monospace);\n font-size: var(--mantine-font-size-xs);\n border-radius: var(--mantine-radius-sm);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n\n & :where(code) {\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n color: inherit;\n border: 0;\n }\n }\n\n & :where(kbd) {\n --kbd-fz: 12px;\n --kbd-padding: 3px 5px;\n\n font-family: var(--mantine-font-family-monospace);\n line-height: var(--mantine-line-height);\n font-weight: var(--mantine-font-weight-bold);\n padding: var(--kbd-padding);\n font-size: var(--kbd-fz);\n border-radius: var(--mantine-radius-sm);\n border: 1px solid;\n border-bottom-width: 3px;\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-3);\n color: var(--mantine-color-gray-7);\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-3);\n color: var(--mantine-color-dark-0);\n background-color: var(--mantine-color-dark-5);\n }\n }\n\n & :where(code) {\n line-height: var(--mantine-line-height);\n padding: 1px 5px;\n border-radius: var(--mantine-radius-sm);\n font-family: var(--mantine-font-family-monospace);\n font-size: var(--mantine-font-size-xs);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n color: var(--mantine-color-black);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-5);\n color: var(--mantine-color-white);\n }\n }\n\n & :where(ul, ol):not([data-type='taskList']) {\n margin-bottom: var(--mantine-spacing-md);\n padding-inline-start: var(--mantine-spacing-xl);\n list-style-position: outside;\n }\n\n & :where(table) {\n width: 100%;\n border-collapse: collapse;\n caption-side: bottom;\n margin-bottom: var(--mantine-spacing-md);\n\n @mixin where-light {\n --table-border-color: var(--mantine-color-gray-3);\n }\n\n @mixin where-dark {\n --table-border-color: var(--mantine-color-dark-4);\n }\n\n & :where(caption) {\n margin-top: var(--mantine-spacing-xs);\n font-size: var(--mantine-font-size-sm);\n color: var(--mantine-color-dimmed);\n }\n\n & :where(th) {\n text-align: start;\n font-weight: bold;\n font-size: var(--mantine-font-size-sm);\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n }\n\n & :where(thead th) {\n border-bottom: 1px solid;\n border-color: var(--table-border-color);\n }\n\n & :where(tfoot th) {\n border-top: 1px solid;\n border-color: var(--table-border-color);\n }\n\n & :where(td) {\n padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);\n border-bottom: 1px solid;\n border-color: var(--table-border-color);\n font-size: var(--mantine-font-size-sm);\n }\n\n & :where(tr:last-of-type td) {\n border-bottom: 0;\n }\n }\n\n & :where(blockquote) {\n font-size: var(--mantine-font-size-lg);\n line-height: var(--mantine-line-height);\n margin: var(--mantine-spacing-md) 0;\n border-radius: var(--mantine-radius-sm);\n padding: var(--mantine-spacing-md) var(--mantine-spacing-lg);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-8);\n }\n }\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"UnstyledButton.module.mjs","names":[],"sources":["../../../src/components/UnstyledButton/UnstyledButton.module.css"],"sourcesContent":[".root {\n background-color: transparent;\n cursor: pointer;\n border: 0;\n padding: 0;\n appearance: none;\n font-size: var(--mantine-font-size-md);\n text-align: ~~left~~;\n text-decoration: none;\n color: inherit;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n~~\n @mixin where-rtl {\n text-align: right;\n~~ }\n~~}\n~~"],"mappings":""}
1	+ {"version":3,"file":"UnstyledButton.module.mjs","names":[],"sources":["../../../src/components/UnstyledButton/UnstyledButton.module.css"],"sourcesContent":[".root {\n background-color: transparent;\n cursor: pointer;\n border: 0;\n padding: 0;\n appearance: none;\n font-size: var(--mantine-font-size-md);\n text-align: start;\n text-decoration: none;\n color: inherit;\n touch-action: manipulation;\n -webkit-tap-highlight-color: transparent;\n}\n"],"mappings":""}

package/esm/index.mjs CHANGED Viewed

@@ -87,6 +87,7 @@ import { ScrollArea, ScrollAreaAutosize } from "./components/ScrollArea/ScrollAr
 import { UnstyledButton } from "./components/UnstyledButton/UnstyledButton.mjs";
 import { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden.mjs";
 import { Paper } from "./components/Paper/Paper.mjs";
+import { getArrowMergeDropdownStyles } from "./utils/Floating/FloatingArrow/get-arrow-position-styles.mjs";
 import { FloatingArrow } from "./utils/Floating/FloatingArrow/FloatingArrow.mjs";
 import { getFloatingPosition } from "./utils/Floating/get-floating-position/get-floating-position.mjs";
 import { useDelayedHover } from "./utils/Floating/use-delayed-hover.mjs";
@@ -97,6 +98,7 @@ import { transitions } from "./components/Transition/transitions.mjs";
 import { Transition } from "./components/Transition/Transition.mjs";
 import { getTransitionProps } from "./components/Transition/get-transition-props/get-transition-props.mjs";
 import { usePopoverContext } from "./components/Popover/Popover.context.mjs";
+import { PopoverContextMenu } from "./components/Popover/PopoverContextMenu/PopoverContextMenu.mjs";
 import { FocusTrap, FocusTrapInitialFocus } from "./components/FocusTrap/FocusTrap.mjs";
 import { PopoverDropdown } from "./components/Popover/PopoverDropdown/PopoverDropdown.mjs";
 import { PopoverTarget } from "./components/Popover/PopoverTarget/PopoverTarget.mjs";
@@ -245,10 +247,17 @@ import { LoadingOverlay } from "./components/LoadingOverlay/LoadingOverlay.mjs";
 import { Marquee } from "./components/Marquee/Marquee.mjs";
 import { MaskInput } from "./components/MaskInput/MaskInput.mjs";
 import { useMenuContext } from "./components/Menu/Menu.context.mjs";
+import { MenuCheckboxGroup } from "./components/Menu/MenuCheckboxGroup/MenuCheckboxGroup.mjs";
+import { MenuCheckboxItem } from "./components/Menu/MenuCheckboxItem/MenuCheckboxItem.mjs";
+import { MenuContextMenu } from "./components/Menu/MenuContextMenu/MenuContextMenu.mjs";
 import { MenuDivider } from "./components/Menu/MenuDivider/MenuDivider.mjs";
 import { MenuDropdown } from "./components/Menu/MenuDropdown/MenuDropdown.mjs";
 import { MenuItem } from "./components/Menu/MenuItem/MenuItem.mjs";
 import { MenuLabel } from "./components/Menu/MenuLabel/MenuLabel.mjs";
+import { MenuRadioGroup } from "./components/Menu/MenuRadioGroup/MenuRadioGroup.mjs";
+import { RadioIcon } from "./components/Radio/RadioIcon.mjs";
+import { MenuRadioItem } from "./components/Menu/MenuRadioItem/MenuRadioItem.mjs";
+import { MenuSearch } from "./components/Menu/MenuSearch/MenuSearch.mjs";
 import { MenuSubDropdown } from "./components/Menu/MenuSubDropdown/MenuSubDropdown.mjs";
 import { MenuSubItem } from "./components/Menu/MenuSubItem/MenuSubItem.mjs";
 import { MenuSubTarget } from "./components/Menu/MenuSubTarget/MenuSubTarget.mjs";
@@ -283,6 +292,7 @@ import { PaginationControl } from "./components/Pagination/PaginationControl/Pag
 import { PaginationDots } from "./components/Pagination/PaginationDots/PaginationDots.mjs";
 import { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious } from "./components/Pagination/PaginationEdges/PaginationEdges.mjs";
 import { PaginationItems } from "./components/Pagination/PaginationItems/PaginationItems.mjs";
+import { PaginationLabel } from "./components/Pagination/PaginationLabel/PaginationLabel.mjs";
 import { PaginationRoot } from "./components/Pagination/PaginationRoot/PaginationRoot.mjs";
 import { Pagination } from "./components/Pagination/Pagination.mjs";
 import { PasswordInput } from "./components/PasswordInput/PasswordInput.mjs";
@@ -294,7 +304,6 @@ import { ProgressSection } from "./components/Progress/ProgressSection/ProgressS
 import { Progress } from "./components/Progress/Progress.mjs";
 import { RadioGroup, RadioGroupContext } from "./components/Radio/RadioGroup/RadioGroup.mjs";
 import { RadioCard, RadioCardContext } from "./components/Radio/RadioCard/RadioCard.mjs";
-import { RadioIcon } from "./components/Radio/RadioIcon.mjs";
 import { RadioIndicator } from "./components/Radio/RadioIndicator/RadioIndicator.mjs";
 import { Radio } from "./components/Radio/Radio.mjs";
 import { Rating } from "./components/Rating/Rating.mjs";
@@ -312,6 +321,9 @@ import { Skeleton } from "./components/Skeleton/Skeleton.mjs";
 import { Slider } from "./components/Slider/Slider/Slider.mjs";
 import { RangeSlider } from "./components/Slider/RangeSlider/RangeSlider.mjs";
 import { Space } from "./components/Space/Space.mjs";
+import { useSplitterContext } from "./components/Splitter/Splitter.context.mjs";
+import { SplitterPane } from "./components/Splitter/SplitterPane/SplitterPane.mjs";
+import { Splitter } from "./components/Splitter/Splitter.mjs";
 import { Spoiler } from "./components/Spoiler/Spoiler.mjs";
 import { Stack } from "./components/Stack/Stack.mjs";
 import { useStepperContext } from "./components/Stepper/Stepper.context.mjs";
@@ -347,4 +359,4 @@ import { TreeSelectOption } from "./components/TreeSelect/TreeSelectOption.mjs";
 import { TreeSelect } from "./components/TreeSelect/TreeSelect.mjs";
 import { Typography } from "./components/Typography/Typography.mjs";
 import { RemoveScroll } from "react-remove-scroll";
-export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContext, BackgroundImage, Badge, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxCardContext, CheckboxGroup, CheckboxGroupContext, CheckboxIndicator, Chip, ChipGroup, ChipGroupContext, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSchemeScript, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_THEME, Dialog, DirectionContext, DirectionProvider, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerStackContext, DrawerTitle, FLEX_STYLE_PROPS_DATA, FOCUS_CLASS_NAMES, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingArrow, FloatingIndicator, FloatingWindow, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardGroupContext, HoverCardTarget, HueSlider, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputWrapper, InputWrapperContext, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, transitions as MANTINE_TRANSITIONS, MantineContext, MantineProvider, MantineThemeContext, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalStack, ModalStackContext, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NavLink, Notification, NumberFormatter, NumberInput, OptionalPortal, OptionsDropdown, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, Pill, PillGroup, PillsInput, PillsInputContext, PillsInputField, PinInput, Popover, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioCardContext, RadioGroup, RadioGroupContext, RadioIcon, RadioIndicator, RangeSlider, Rating, RemoveScroll, RingProgress, RollingNumber, STYlE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, SwitchGroupContext, Table, TableCaption, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Tooltip, TooltipFloating, TooltipGroup, TooltipGroupContext, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, camelToKebabCase, closeOnEscape, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createPolymorphicComponent, createSafeContext, createScopedKeydownHandler, createTheme, createUseExternalEvents, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, extractStyleProps, factory, filterProps, filterTreeData, findClosestNumber, findElementAncestor, findElementBySelector, findElementsBySelector, flattenTreeData, genericFactory, getAutoContrastValue, getBaseValue, getBreakpointValue, getCSSColorVariables, getContextItemIndex, getContrastColor, getDefaultZIndex, getEnv, getFloatingPosition, getFontSize, getGradient, getLineHeight, getOptionsLockup, getParsedComboboxData, getPrimaryContrastColor, getPrimaryShade, getRadius, getRefProp, getRootElement, getSafeId, getShadow, getSingleElementChild, getSize, getSortedBreakpoints, getSpacing, getStyleObject, getThemeColor, getTransitionProps, getTreeExpandedState, hashStyleProps, isColorValid, isElement, isLightColor, isMantineColorScheme, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, localStorageColorSchemeManager, luminance, mantineHtmlProps, memoize, mergeAsyncChildren, mergeMantineTheme, mergeThemeOverrides, moveTreeNode, noop, parseColor, parseStyleProps, parseThemeColor, polymorphic, polymorphicFactory, px, rem, resolveClassNames, resolveStyles, rgba, stylesToString, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDelayedHover, useDirection, useDrawerContext, useDrawersStack, useGridContext, useHoverCardContext, useHovered, useInputProps, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineStylesTransform, useMantineSxTransform, useMantineTheme, useMantineWithStaticClasses, useMatches, useMenuContext, useModalContext, useModalsStack, usePaginationContext, usePillsReorder, usePopoverContext, useProgressContext, useProps, useProviderColorScheme, useRandomClassName, useResolvedStylesApi, useSafeMantineTheme, useScrollAreaContext, useStepperContext, useStyles, useTableContext, useTabsContext, useTree, useVirtualizedCombobox, v8CssVariablesResolver, validateMantineTheme, virtualColor };
+export { Accordion, AccordionChevron, AccordionControl, AccordionItem, AccordionPanel, ActionIcon, ActionIconGroup, ActionIconGroupSection, Affix, Alert, AlphaSlider, Anchor, AngleSlider, AppShell, AppShellAside, AppShellFooter, AppShellHeader, AppShellMain, AppShellNavbar, AppShellSection, AspectRatio, Autocomplete, Avatar, AvatarGroup, AvatarGroupContext, BackgroundImage, Badge, Blockquote, Box, Breadcrumbs, Burger, Button, ButtonGroup, ButtonGroupSection, Card, CardSection, Center, CheckIcon, Checkbox, CheckboxCard, CheckboxCardContext, CheckboxGroup, CheckboxGroupContext, CheckboxIndicator, Chip, ChipGroup, ChipGroupContext, CloseButton, CloseIcon, Code, Collapse, ColorInput, ColorPicker, ColorSchemeScript, ColorSwatch, Combobox, ComboboxChevron, ComboboxClearButton, ComboboxDropdown, ComboboxDropdownTarget, ComboboxEmpty, ComboboxEventsTarget, ComboboxFooter, ComboboxGroup, ComboboxHeader, ComboboxHiddenInput, ComboboxOption, ComboboxOptions, ComboboxSearch, ComboboxTarget, Container, CopyButton, DEFAULT_THEME, Dialog, DirectionContext, DirectionProvider, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerHeader, DrawerOverlay, DrawerRoot, DrawerStack, DrawerStackContext, DrawerTitle, FLEX_STYLE_PROPS_DATA, FOCUS_CLASS_NAMES, Fieldset, FileButton, FileInput, FlatTreeNode, Flex, FloatingArrow, FloatingIndicator, FloatingWindow, FocusTrap, FocusTrapInitialFocus, Grid, GridCol, Group, HeadlessMantineProvider, Highlight, HoverCard, HoverCardDropdown, HoverCardGroup, HoverCardGroupContext, HoverCardTarget, HueSlider, Image, Indicator, InlineStyles, Input, InputBase, InputClearButton, InputClearSection, InputDescription, InputError, InputLabel, InputPlaceholder, InputWrapper, InputWrapperContext, JsonInput, Kbd, List, ListItem, Loader, LoadingOverlay, transitions as MANTINE_TRANSITIONS, MantineContext, MantineProvider, MantineThemeContext, MantineThemeProvider, Mark, Marquee, MaskInput, Menu, MenuCheckboxGroup, MenuCheckboxItem, MenuContextMenu, MenuDivider, MenuDropdown, MenuItem, MenuLabel, MenuRadioGroup, MenuRadioItem, MenuSearch, MenuSub, MenuSubDropdown, MenuSubItem, MenuSubTarget, MenuTarget, Modal, ModalBase, ModalBaseBody, ModalBaseCloseButton, ModalBaseContent, ModalBaseHeader, ModalBaseOverlay, ModalBaseTitle, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalOverlay, ModalRoot, ModalStack, ModalStackContext, ModalTitle, MultiSelect, NativeScrollArea, NativeSelect, NavLink, Notification, NumberFormatter, NumberInput, OptionalPortal, OptionsDropdown, OverflowList, Overlay, Pagination, PaginationControl, PaginationDots, PaginationFirst, PaginationItems, PaginationLabel, PaginationLast, PaginationNext, PaginationPrevious, PaginationRoot, Paper, PasswordInput, Pill, PillGroup, PillsInput, PillsInputContext, PillsInputField, PinInput, Popover, PopoverContextMenu, PopoverDropdown, PopoverTarget, Portal, Progress, ProgressLabel, ProgressRoot, ProgressSection, Radio, RadioCard, RadioCardContext, RadioGroup, RadioGroupContext, RadioIcon, RadioIndicator, RangeSlider, Rating, RemoveScroll, RingProgress, RollingNumber, STYlE_PROPS_DATA, ScrollArea, ScrollAreaAutosize, Scroller, SegmentedControl, Select, SemiCircleProgress, SimpleGrid, Skeleton, Slider, Space, Splitter, SplitterPane, Spoiler, Stack, Stepper, StepperCompleted, StepperStep, Switch, SwitchGroup, SwitchGroupContext, Table, TableCaption, TableOfContents, TableScrollContainer, TableTbody, TableTd, TableTfoot, TableTh, TableThead, TableTr, Tabs, TabsList, TabsPanel, TabsTab, TagsInput, Text, TextInput, Textarea, ThemeIcon, Timeline, TimelineItem, Title, Tooltip, TooltipFloating, TooltipGroup, TooltipGroupContext, Transition, Tree, TreeSelect, TreeSelectOption, Typography, UnstyledButton, VisuallyHidden, alpha, camelToKebabCase, closeOnEscape, colorsTuple, convertCssVariables, convertHsvaTo, createEventHandler, createPolymorphicComponent, createSafeContext, createScopedKeydownHandler, createTheme, createUseExternalEvents, createVarsResolver, darken, deepMerge, defaultCssVariablesResolver, defaultLoaders, defaultOptionsFilter, defaultTreeNodeFilter, defaultVariantColorsResolver, em, extractStyleProps, factory, filterProps, filterTreeData, findClosestNumber, findElementAncestor, findElementBySelector, findElementsBySelector, flattenTreeData, genericFactory, getArrowMergeDropdownStyles, getAutoContrastValue, getBaseValue, getBreakpointValue, getCSSColorVariables, getContextItemIndex, getContrastColor, getDefaultZIndex, getEnv, getFloatingPosition, getFontSize, getGradient, getLineHeight, getOptionsLockup, getParsedComboboxData, getPrimaryContrastColor, getPrimaryShade, getRadius, getRefProp, getRootElement, getSafeId, getShadow, getSingleElementChild, getSize, getSortedBreakpoints, getSpacing, getStyleObject, getThemeColor, getTransitionProps, getTreeExpandedState, hashStyleProps, isColorValid, isElement, isLightColor, isMantineColorScheme, isNumberLike, isOptionsGroup, isPrimitive, isVirtualColor, keys, lighten, localStorageColorSchemeManager, luminance, mantineHtmlProps, memoize, mergeAsyncChildren, mergeMantineTheme, mergeThemeOverrides, moveTreeNode, noop, parseColor, parseStyleProps, parseThemeColor, polymorphic, polymorphicFactory, px, rem, resolveClassNames, resolveStyles, rgba, stylesToString, toRgba, useAccordionContext, useAccordionItemContext, useAppShellContext, useCombobox, useComboboxContext, useComboboxTargetProps, useComputedColorScheme, useDelayedHover, useDirection, useDrawerContext, useDrawersStack, useGridContext, useHoverCardContext, useHovered, useInputProps, useListContext, useMantineClassNamesPrefix, useMantineColorScheme, useMantineContext, useMantineCssVariablesResolver, useMantineDeduplicateInlineStyles, useMantineEnv, useMantineIsHeadless, useMantineStyleNonce, useMantineStylesTransform, useMantineSxTransform, useMantineTheme, useMantineWithStaticClasses, useMatches, useMenuContext, useModalContext, useModalsStack, usePaginationContext, usePillsReorder, usePopoverContext, useProgressContext, useProps, useProviderColorScheme, useRandomClassName, useResolvedStylesApi, useSafeMantineTheme, useScrollAreaContext, useSplitterContext, useStepperContext, useStyles, useTableContext, useTabsContext, useTree, useVirtualizedCombobox, v8CssVariablesResolver, validateMantineTheme, virtualColor };

package/esm/utils/Floating/FloatingArrow/get-arrow-position-styles.mjs CHANGED Viewed

@@ -18,7 +18,56 @@ const radiusByFloatingSide = {
 	right: "borderBottomLeftRadius",
 	top: "borderBottomRightRadius"
 };
+function getMergeArrowStyles({ position, arrowSize, dir }) {
+	const [side, placement] = position.split("-");
+	if (!placement) return;
+	const baseStyles = {
+		width: arrowSize,
+		height: arrowSize,
+		position: "absolute"
+	};
+	if (side === "bottom") {
+		const isStart = placement === "start";
+		const physicalSide = isStart ? dir === "ltr" ? "left" : "right" : dir === "ltr" ? "right" : "left";
+		return {
+			...baseStyles,
+			top: -arrowSize,
+			[physicalSide]: 0,
+			clipPath: isStart !== (dir === "rtl") ? "polygon(0% 0%, 0% 100%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)"
+		};
+	}
+	if (side === "top") {
+		const isStart = placement === "start";
+		const physicalSide = isStart ? dir === "ltr" ? "left" : "right" : dir === "ltr" ? "right" : "left";
+		return {
+			...baseStyles,
+			bottom: -arrowSize,
+			[physicalSide]: 0,
+			clipPath: isStart !== (dir === "rtl") ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 100% 0%, 100% 100%)"
+		};
+	}
+	if (side === "left") return {
+		...baseStyles,
+		right: -arrowSize,
+		[placement === "start" ? "top" : "bottom"]: 0,
+		clipPath: placement === "start" ? "polygon(0% 0%, 100% 0%, 0% 100%)" : "polygon(0% 0%, 0% 100%, 100% 100%)"
+	};
+	if (side === "right") return {
+		...baseStyles,
+		left: -arrowSize,
+		[placement === "start" ? "top" : "bottom"]: 0,
+		clipPath: placement === "start" ? "polygon(0% 0%, 100% 0%, 100% 100%)" : "polygon(100% 0%, 0% 100%, 100% 100%)"
+	};
+}
 function getArrowPositionStyles({ position, arrowSize, arrowOffset, arrowRadius, arrowPosition, arrowX, arrowY, dir }) {
+	if (arrowPosition === "merge") {
+		const mergeStyles = getMergeArrowStyles({
+			position,
+			arrowSize,
+			dir
+		});
+		if (mergeStyles) return mergeStyles;
+	}
 	const [side, placement = "center"] = position.split("-");
 	const baseStyles = {
 		width: arrowSize,
@@ -62,7 +111,16 @@ function getArrowPositionStyles({ position, arrowSize, arrowOffset, arrowRadius,
 	};
 	return {};
 }
+function getArrowMergeDropdownStyles({ position, dir }) {
+	const [side, placement] = position.split("-");
+	if (!placement) return;
+	const isPhysicallyLeft = placement === "start" && dir === "ltr" || placement === "end" && dir === "rtl";
+	if (side === "bottom") return isPhysicallyLeft ? { borderTopLeftRadius: 0 } : { borderTopRightRadius: 0 };
+	if (side === "top") return isPhysicallyLeft ? { borderBottomLeftRadius: 0 } : { borderBottomRightRadius: 0 };
+	if (side === "left") return placement === "start" ? { borderTopRightRadius: 0 } : { borderBottomRightRadius: 0 };
+	if (side === "right") return placement === "start" ? { borderTopLeftRadius: 0 } : { borderBottomLeftRadius: 0 };
+}
 //#endregion
-export { getArrowPositionStyles };
+export { getArrowMergeDropdownStyles, getArrowPositionStyles };
 //# sourceMappingURL=get-arrow-position-styles.mjs.map

package/esm/utils/Floating/FloatingArrow/get-arrow-position-styles.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"get-arrow-position-styles.mjs","names":[],"sources":["../../../../src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts"],"sourcesContent":["import type { ArrowPosition, FloatingPlacement, FloatingPosition, FloatingSide } from '../types';\n\nfunction horizontalSide(\n placement: FloatingPlacement \| 'center',\n arrowY: number \| undefined,\n arrowOffset: number,\n arrowPosition: ArrowPosition\n) {\n if (placement === 'center' \|\| arrowPosition === 'center') {\n return { top: arrowY };\n }\n\n if (placement === 'end') {\n return { bottom: arrowOffset };\n }\n\n if (placement === 'start') {\n return { top: arrowOffset };\n }\n\n return {};\n}\n\nfunction verticalSide(\n placement: FloatingPlacement \| 'center',\n arrowX: number \| undefined,\n arrowOffset: number,\n arrowPosition: ArrowPosition,\n dir: 'rtl' \| 'ltr'\n) {\n if (placement === 'center' \|\| arrowPosition === 'center') {\n return { left: arrowX };\n }\n\n if (placement === 'end') {\n return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset };\n }\n\n if (placement === 'start') {\n return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset };\n }\n\n return {};\n}\n\nconst radiusByFloatingSide: Record<\n FloatingSide,\n keyof Pick<\n React.CSSProperties,\n \| 'borderBottomLeftRadius'\n \| 'borderBottomRightRadius'\n \| 'borderTopLeftRadius'\n \| 'borderTopRightRadius'\n >\n> = {\n bottom: 'borderTopLeftRadius',\n left: 'borderTopRightRadius',\n right: 'borderBottomLeftRadius',\n top: 'borderBottomRightRadius',\n};\n\nexport function getArrowPositionStyles({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n arrowX,\n arrowY,\n dir,\n}: {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number \| undefined;\n arrowY: number \| undefined;\n dir: 'rtl' \| 'ltr';\n}) {\n const [side, placement = 'center'] = position.split('-') as [FloatingSide, FloatingPlacement];\n const baseStyles = {\n width: arrowSize,\n height: arrowSize,\n transform: 'rotate(45deg)',\n position: 'absolute',\n [radiusByFloatingSide[side]]: arrowRadius,\n };\n\n const arrowPlacement = -arrowSize / 2;\n\n if (side === 'left') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n right: arrowPlacement,\n borderLeftColor: 'transparent',\n borderBottomColor: 'transparent',\n clipPath: 'polygon(100% 0, 0 0, 100% 100%)',\n };\n }\n\n if (side === 'right') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n left: arrowPlacement,\n borderRightColor: 'transparent',\n borderTopColor: 'transparent',\n clipPath: 'polygon(0 100%, 0 0, 100% 100%)',\n };\n }\n\n if (side === 'top') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n bottom: arrowPlacement,\n borderTopColor: 'transparent',\n borderLeftColor: 'transparent',\n clipPath: 'polygon(0 100%, 100% 100%, 100% 0)',\n };\n }\n\n if (side === 'bottom') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n top: arrowPlacement,\n borderBottomColor: 'transparent',\n borderRightColor: 'transparent',\n clipPath: 'polygon(0 100%, 0 0, 100% 0)',\n };\n }\n\n return {};\n}\n"],"mappings":";;AAEA,SAAS,eACP,WACA,QACA,aACA,eACA;CACA,IAAI,cAAc,YAAY,kBAAkB,UAC9C,OAAO,EAAE,KAAK,OAAO;CAGvB,IAAI,cAAc,OAChB,OAAO,EAAE,QAAQ,YAAY;CAG/B,IAAI,cAAc,SAChB,OAAO,EAAE,KAAK,YAAY;CAG5B,OAAO,CAAC;AACV;AAEA,SAAS,aACP,WACA,QACA,aACA,eACA,KACA;CACA,IAAI,cAAc,YAAY,kBAAkB,UAC9C,OAAO,EAAE,MAAM,OAAO;CAGxB,IAAI,cAAc,OAChB,OAAO,GAAG,QAAQ,QAAQ,UAAU,SAAS,YAAY;CAG3D,IAAI,cAAc,SAChB,OAAO,GAAG,QAAQ,QAAQ,SAAS,UAAU,YAAY;CAG3D,OAAO,CAAC;AACV;AAEA,MAAM,uBASF;CACF,QAAQ;CACR,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,SAAgB,uBAAuB,EACrC,UACA,WACA,aACA,aACA,eACA,QACA,QACA,OAUC;CACD,MAAM,CAAC,MAAM,YAAY,YAAY,SAAS,MAAM,GAAG;CACvD,MAAM,aAAa;EACjB,OAAO;EACP,QAAQ;EACR,WAAW;EACX,UAAU;GACT,qBAAqB,QAAQ;CAChC;CAEA,MAAM,iBAAiB,CAAC,YAAY;CAEpC,IAAI,SAAS,QACX,OAAO;EACL,GAAG;EACH,GAAG,eAAe,WAAW,QAAQ,aAAa,aAAa;EAC/D,OAAO;EACP,iBAAiB;EACjB,mBAAmB;EACnB,UAAU;CACZ;CAGF,IAAI,SAAS,SACX,OAAO;EACL,GAAG;EACH,GAAG,eAAe,WAAW,QAAQ,aAAa,aAAa;EAC/D,MAAM;EACN,kBAAkB;EAClB,gBAAgB;EAChB,UAAU;CACZ;CAGF,IAAI,SAAS,OACX,OAAO;EACL,GAAG;EACH,GAAG,aAAa,WAAW,QAAQ,aAAa,eAAe,GAAG;EAClE,QAAQ;EACR,gBAAgB;EAChB,iBAAiB;EACjB,UAAU;CACZ;CAGF,IAAI,SAAS,UACX,OAAO;EACL,GAAG;EACH,GAAG,aAAa,WAAW,QAAQ,aAAa,eAAe,GAAG;EAClE,KAAK;EACL,mBAAmB;EACnB,kBAAkB;EAClB,UAAU;CACZ;CAGF,OAAO,CAAC;AACV"}
1	+ {"version":3,"file":"get-arrow-position-styles.mjs","names":[],"sources":["../../../../src/utils/Floating/FloatingArrow/get-arrow-position-styles.ts"],"sourcesContent":["import type { ArrowPosition, FloatingPlacement, FloatingPosition, FloatingSide } from '../types';\n\nfunction horizontalSide(\n placement: FloatingPlacement \| 'center',\n arrowY: number \| undefined,\n arrowOffset: number,\n arrowPosition: ArrowPosition\n) {\n if (placement === 'center' \|\| arrowPosition === 'center') {\n return { top: arrowY };\n }\n\n if (placement === 'end') {\n return { bottom: arrowOffset };\n }\n\n if (placement === 'start') {\n return { top: arrowOffset };\n }\n\n return {};\n}\n\nfunction verticalSide(\n placement: FloatingPlacement \| 'center',\n arrowX: number \| undefined,\n arrowOffset: number,\n arrowPosition: ArrowPosition,\n dir: 'rtl' \| 'ltr'\n) {\n if (placement === 'center' \|\| arrowPosition === 'center') {\n return { left: arrowX };\n }\n\n if (placement === 'end') {\n return { [dir === 'ltr' ? 'right' : 'left']: arrowOffset };\n }\n\n if (placement === 'start') {\n return { [dir === 'ltr' ? 'left' : 'right']: arrowOffset };\n }\n\n return {};\n}\n\nconst radiusByFloatingSide: Record<\n FloatingSide,\n keyof Pick<\n React.CSSProperties,\n \| 'borderBottomLeftRadius'\n \| 'borderBottomRightRadius'\n \| 'borderTopLeftRadius'\n \| 'borderTopRightRadius'\n >\n> = {\n bottom: 'borderTopLeftRadius',\n left: 'borderTopRightRadius',\n right: 'borderBottomLeftRadius',\n top: 'borderBottomRightRadius',\n};\n\nfunction getMergeArrowStyles({\n position,\n arrowSize,\n dir,\n}: {\n position: FloatingPosition;\n arrowSize: number;\n dir: 'rtl' \| 'ltr';\n}) {\n const [side, placement] = position.split('-') as [FloatingSide, FloatingPlacement \| undefined];\n\n if (!placement) {\n return undefined;\n }\n\n const baseStyles = {\n width: arrowSize,\n height: arrowSize,\n position: 'absolute' as const,\n };\n\n if (side === 'bottom') {\n const isStart = placement === 'start';\n const physicalSide = isStart\n ? dir === 'ltr'\n ? 'left'\n : 'right'\n : dir === 'ltr'\n ? 'right'\n : 'left';\n\n return {\n ...baseStyles,\n top: -arrowSize,\n [physicalSide]: 0,\n clipPath:\n isStart !== (dir === 'rtl')\n ? 'polygon(0% 0%, 0% 100%, 100% 100%)'\n : 'polygon(100% 0%, 0% 100%, 100% 100%)',\n };\n }\n\n if (side === 'top') {\n const isStart = placement === 'start';\n const physicalSide = isStart\n ? dir === 'ltr'\n ? 'left'\n : 'right'\n : dir === 'ltr'\n ? 'right'\n : 'left';\n\n return {\n ...baseStyles,\n bottom: -arrowSize,\n [physicalSide]: 0,\n clipPath:\n isStart !== (dir === 'rtl')\n ? 'polygon(0% 0%, 100% 0%, 0% 100%)'\n : 'polygon(0% 0%, 100% 0%, 100% 100%)',\n };\n }\n\n if (side === 'left') {\n return {\n ...baseStyles,\n right: -arrowSize,\n [placement === 'start' ? 'top' : 'bottom']: 0,\n clipPath:\n placement === 'start'\n ? 'polygon(0% 0%, 100% 0%, 0% 100%)'\n : 'polygon(0% 0%, 0% 100%, 100% 100%)',\n };\n }\n\n if (side === 'right') {\n return {\n ...baseStyles,\n left: -arrowSize,\n [placement === 'start' ? 'top' : 'bottom']: 0,\n clipPath:\n placement === 'start'\n ? 'polygon(0% 0%, 100% 0%, 100% 100%)'\n : 'polygon(100% 0%, 0% 100%, 100% 100%)',\n };\n }\n\n return undefined;\n}\n\nexport function getArrowPositionStyles({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n arrowX,\n arrowY,\n dir,\n}: {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number \| undefined;\n arrowY: number \| undefined;\n dir: 'rtl' \| 'ltr';\n}) {\n if (arrowPosition === 'merge') {\n const mergeStyles = getMergeArrowStyles({ position, arrowSize, dir });\n if (mergeStyles) {\n return mergeStyles;\n }\n }\n\n const [side, placement = 'center'] = position.split('-') as [FloatingSide, FloatingPlacement];\n const baseStyles = {\n width: arrowSize,\n height: arrowSize,\n transform: 'rotate(45deg)',\n position: 'absolute',\n [radiusByFloatingSide[side]]: arrowRadius,\n };\n\n const arrowPlacement = -arrowSize / 2;\n\n if (side === 'left') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n right: arrowPlacement,\n borderLeftColor: 'transparent',\n borderBottomColor: 'transparent',\n clipPath: 'polygon(100% 0, 0 0, 100% 100%)',\n };\n }\n\n if (side === 'right') {\n return {\n ...baseStyles,\n ...horizontalSide(placement, arrowY, arrowOffset, arrowPosition),\n left: arrowPlacement,\n borderRightColor: 'transparent',\n borderTopColor: 'transparent',\n clipPath: 'polygon(0 100%, 0 0, 100% 100%)',\n };\n }\n\n if (side === 'top') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n bottom: arrowPlacement,\n borderTopColor: 'transparent',\n borderLeftColor: 'transparent',\n clipPath: 'polygon(0 100%, 100% 100%, 100% 0)',\n };\n }\n\n if (side === 'bottom') {\n return {\n ...baseStyles,\n ...verticalSide(placement, arrowX, arrowOffset, arrowPosition, dir),\n top: arrowPlacement,\n borderBottomColor: 'transparent',\n borderRightColor: 'transparent',\n clipPath: 'polygon(0 100%, 0 0, 100% 0)',\n };\n }\n\n return {};\n}\n\nexport function getArrowMergeDropdownStyles({\n position,\n dir,\n}: {\n position: FloatingPosition;\n dir: 'rtl' \| 'ltr';\n}): React.CSSProperties \| undefined {\n const [side, placement] = position.split('-') as [FloatingSide, FloatingPlacement \| undefined];\n\n if (!placement) {\n return undefined;\n }\n\n const isPhysicallyLeft =\n (placement === 'start' && dir === 'ltr') \|\| (placement === 'end' && dir === 'rtl');\n\n if (side === 'bottom') {\n return isPhysicallyLeft ? { borderTopLeftRadius: 0 } : { borderTopRightRadius: 0 };\n }\n\n if (side === 'top') {\n return isPhysicallyLeft ? { borderBottomLeftRadius: 0 } : { borderBottomRightRadius: 0 };\n }\n\n if (side === 'left') {\n return placement === 'start' ? { borderTopRightRadius: 0 } : { borderBottomRightRadius: 0 };\n }\n\n if (side === 'right') {\n return placement === 'start' ? { borderTopLeftRadius: 0 } : { borderBottomLeftRadius: 0 };\n }\n\n return undefined;\n}\n"],"mappings":"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"}

package/esm/utils/Floating/create-context-menu-handlers.mjs ADDED Viewed

@@ -0,0 +1,38 @@
+"use client";
+import { createEventHandler } from "../../core/utils/create-event-handler/create-event-handler.mjs";
+//#region packages/@mantine/core/src/utils/Floating/create-context-menu-handlers.ts
+function createContextMenuHandlers({ childProps, disabled, opened, setReference, open }) {
+	const onMouseDown = createEventHandler(childProps.onMouseDown, (event) => {
+		if (disabled) return;
+		if (event.button === 2) event.stopPropagation();
+	});
+	return {
+		onContextMenu: createEventHandler(childProps.onContextMenu, (event) => {
+			if (disabled || event.defaultPrevented) return;
+			event.preventDefault();
+			const { clientX, clientY } = event;
+			const contextElement = event.currentTarget;
+			setReference({
+				getBoundingClientRect: () => ({
+					x: clientX,
+					y: clientY,
+					width: 0,
+					height: 0,
+					top: clientY,
+					left: clientX,
+					right: clientX,
+					bottom: clientY,
+					toJSON: () => void 0
+				}),
+				contextElement
+			});
+			open();
+		}),
+		onMouseDown,
+		"data-expanded": opened ? true : void 0
+	};
+}
+//#endregion
+export { createContextMenuHandlers };
+//# sourceMappingURL=create-context-menu-handlers.mjs.map

package/esm/utils/Floating/create-context-menu-handlers.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"create-context-menu-handlers.mjs","names":[],"sources":["../../../src/utils/Floating/create-context-menu-handlers.ts"],"sourcesContent":["import { createEventHandler } from '../../core/utils/create-event-handler/create-event-handler';\n\ninterface CreateContextMenuHandlersOptions {\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 /** 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 createContextMenuHandlers({\n childProps,\n disabled,\n opened,\n setReference,\n open,\n}: CreateContextMenuHandlersOptions) {\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 const { clientX, clientY } = event;\n const contextElement = event.currentTarget;\n\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\n return {\n onContextMenu,\n onMouseDown,\n 'data-expanded': opened ? true : undefined,\n };\n}\n"],"mappings":";;;AAmBA,SAAgB,0BAA0B,EACxC,YACA,UACA,QACA,cACA,QACmC;CACnC,MAAM,cAAc,mBAClB,WAAW,cACV,UAAyC;EACxC,IAAI,UACF;EAEF,IAAI,MAAM,WAAW,GACnB,MAAM,gBAAgB;CAE1B,CACF;CAgCA,OAAO;EACL,eA/BoB,mBACpB,WAAW,gBACV,UAAyC;GACxC,IAAI,YAAY,MAAM,kBACpB;GAGF,MAAM,eAAe;GACrB,MAAM,EAAE,SAAS,YAAY;GAC7B,MAAM,iBAAiB,MAAM;GAE7B,aAAa;IACX,8BAA8B;KAC5B,GAAG;KACH,GAAG;KACH,OAAO;KACP,QAAQ;KACR,KAAK;KACL,MAAM;KACN,OAAO;KACP,QAAQ;KACR,cAAc,KAAA;IAChB;IACA;GACF,CAAC;GAED,KAAK;EACP,CAIY;EACZ;EACA,iBAAiB,SAAS,OAAO,KAAA;CACnC;AACF"}

package/lib/components/Blockquote/Blockquote.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { BoxProps, ElementProps, Factory, MantineColor, MantineRadius, StylesApiProps } from '../../core';
 export type BlockquoteStylesNames = 'root' | 'icon' | 'cite';
 export type BlockquoteCssVariables = {
-    root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius';
+    root: '--bq-bg-light' | '--bq-bg-dark' | '--bq-bd' | '--bq-icon-size' | '--bq-radius' | '--bq-text-wrap';
 };
 export interface BlockquoteProps extends BoxProps, StylesApiProps<BlockquoteFactory>, ElementProps<'blockquote', 'cite'> {
     /** Blockquote icon, displayed at the top left side */
@@ -14,6 +14,8 @@ export interface BlockquoteProps extends BoxProps, StylesApiProps<BlockquoteFact
     radius?: MantineRadius;
     /** Reference to a cited quote */
     cite?: React.ReactNode;
+    /** Controls `text-wrap` CSS property */
+    textWrap?: 'wrap' | 'nowrap' | 'balance' | 'pretty' | 'stable';
 }
 export type BlockquoteFactory = Factory<{
     props: BlockquoteProps;

package/lib/components/Checkbox/CheckboxIndicator/CheckboxIndicator.d.ts CHANGED Viewed

@@ -9,7 +9,7 @@ export interface CheckboxIndicatorProps extends BoxProps, StylesApiProps<Checkbo
     /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor */
     color?: MantineColor;
     /** Controls size of the component @default 'sm' */
-    size?: MantineSize | (string & {});
+    size?: MantineSize | (string & {}) | number;
     /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius */
     radius?: MantineRadius;
     /** Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` */

package/lib/components/Combobox/Combobox.context.d.ts CHANGED Viewed

@@ -9,5 +9,6 @@ export interface ComboboxContextValue {
     size: MantineSize | (string & {});
     resetSelectionOnOptionHover: boolean | undefined;
     readOnly: boolean | undefined;
+    floatingHeight: 'viewport' | undefined;
 }
 export declare const ComboboxProvider: import("react").Context<ComboboxContextValue | null>, useComboboxContext: () => ComboboxContextValue;

package/lib/components/Combobox/Combobox.d.ts CHANGED Viewed

@@ -36,6 +36,8 @@ export interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFa
     resetSelectionOnOptionHover?: boolean;
     /** Determines whether the `Combobox` value can be changed */
     readOnly?: boolean;
+    /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */
+    floatingHeight?: 'viewport';
 }
 export type ComboboxFactory = Factory<{
     props: ComboboxProps;