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

@mantine/core 9.2.2 → 9.3.1

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 (863) hide show

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/use-context-menu-handlers.mjs ADDED Viewed

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

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

@@ -0,0 +1 @@

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

package/lib/components/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/Collapse/Collapse.d.ts CHANGED Viewed

@@ -14,7 +14,7 @@ export interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'
     transitionTimingFunction?: string;
     /** Determines whether the opacity is animated @default true */
     animateOpacity?: boolean;
-    /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default false */
+    /** If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */
     keepMounted?: boolean;
 }
 export type CollapseFactory = Factory<{

package/lib/components/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;

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

@@ -48,6 +48,8 @@ export interface ComboboxLikeProps<Value extends Primitive = string> {
     withScrollArea?: boolean;
     /** `max-height` of the dropdown, only applicable when `withScrollArea` prop is `true`, `250` by default */
     maxDropdownHeight?: number | string;
+    /** If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */
+    floatingHeight?: 'viewport';
 }
 export interface ComboboxLikeRenderOptionInput<T> {
     option: T;

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

@@ -15,6 +15,8 @@ export interface OptionsDropdownProps {
     limit: number | undefined;
     withScrollArea: boolean | undefined;
     maxDropdownHeight: number | string | undefined;
+    /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */
+    floatingHeight?: 'viewport';
     hidden?: boolean;
     hiddenWhenEmpty?: boolean;
     filterOptions?: boolean;
@@ -29,4 +31,4 @@ export interface OptionsDropdownProps {
     renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;
     scrollAreaProps: ScrollAreaProps | undefined;
 }
-export declare function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, withScrollArea, filterOptions, withCheckIcon, withAlignedLabels, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, 'aria-label': ariaLabel, }: OptionsDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, floatingHeight, withScrollArea, filterOptions, withCheckIcon, withAlignedLabels, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, 'aria-label': ariaLabel, }: OptionsDropdownProps): import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -12,7 +12,7 @@ export interface __BaseInputProps extends __InputWrapperProps, __InputProps {
     wrapperProps?: WrapperProps;
 }
 export type __InputStylesNames = InputStylesNames | InputWrapperStylesNames;
-export type InputStylesNames = 'input' | 'wrapper' | 'section';
+export type InputStylesNames = 'input' | 'wrapper' | 'section' | 'bottomSection';
 export type InputVariant = 'default' | 'filled' | 'unstyled';
 export type InputCssVariables = {
     wrapper: '--input-height' | '--input-fz' | '--input-radius' | '--input-left-section-width' | '--input-right-section-width' | '--input-left-section-pointer-events' | '--input-right-section-pointer-events' | '--input-padding-y' | '--input-margin-top' | '--input-margin-bottom';
@@ -64,6 +64,10 @@ export interface __InputProps {
     loading?: boolean;
     /** Position of the loading indicator @default 'right' */
     loadingPosition?: 'left' | 'right';
+    /** Content section displayed at the bottom of the input, inside the border */
+    __bottomSection?: React.ReactNode;
+    /** Props passed down to the `__bottomSection` element */
+    __bottomSectionProps?: React.ComponentProps<'div'>;
 }
 export interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {
     __staticSelector?: string;

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

@@ -98,6 +98,8 @@ export declare function useMaskInputProps(props: MaskInputProps & {
         __defaultRightSection?: React.ReactNode;
         loading?: boolean;
         loadingPosition?: "left" | "right";
+        __bottomSection?: React.ReactNode;
+        __bottomSectionProps?: React.ComponentProps<"div">;
         unstyled?: boolean;
         variant?: (string & {}) | import("..").InputVariant | undefined;
         classNames?: Partial<Record<import("..").__InputStylesNames, string>> | ((theme: import("../..").MantineTheme, props: MaskInputProps, ctx: unknown) => Partial<Record<import("..").__InputStylesNames, string>>) | undefined;
@@ -117,6 +119,7 @@ export declare function useMaskInputProps(props: MaskInputProps & {
             error?: Record<string, any> | undefined;
             required?: Record<string, any> | undefined;
             wrapper?: Record<string, any> | undefined;
+            bottomSection?: Record<string, any> | undefined;
         } | undefined;
         form?: string | undefined | undefined;
         slot?: string | undefined | undefined;

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

@@ -17,5 +17,10 @@ export interface MenuContextValue {
     setOpenedViaClick: (value: boolean) => void;
     withInitialFocusPlaceholder: boolean | undefined;
     registerOpenSub: (closeFn: () => void) => () => void;
+    hasSearch: boolean;
+    registerSearch: () => () => void;
+    searchExitClearRef: React.RefObject<(() => void) | null>;
+    alignItemsLabels: 'all' | 'with-indicators' | 'none';
+    checkIcon: React.ReactNode;
 }
 export declare const MenuContextProvider: import("react").Context<MenuContextValue | null>, useMenuContext: () => MenuContextValue;