@mantine/core 9.1.0 → 9.1.1

package/lib/components/Combobox/use-combobox-target-props/use-combobox-target-props.d.ts

@@ -4,9 +4,11 @@ interface UseComboboxTargetPropsInput {
     withKeyboardNavigation: boolean | undefined;
     withExpandedAttribute: boolean | undefined;
     onKeyDown: React.KeyboardEventHandler<HTMLInputElement> | undefined;
+    onClick: React.MouseEventHandler<HTMLInputElement> | undefined;
     autoComplete: string | undefined;
 }
-export declare function useComboboxTargetProps({ onKeyDown, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete, }: UseComboboxTargetPropsInput): {
+export declare function useComboboxTargetProps({ onKeyDown, onClick, withKeyboardNavigation, withAriaAttributes, withExpandedAttribute, targetType, autoComplete, }: UseComboboxTargetPropsInput): {
     onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onClick: (event: React.MouseEvent<HTMLInputElement>) => void;
 };
 export {};

package/lib/components/MultiSelect/MultiSelect.d.ts

@@ -47,7 +47,7 @@ export interface MultiSelectProps<Value extends Primitive = string> extends BoxP
     /** Divider used to separate values in the hidden input `value` attribute @default ',' */
     hiddenInputValuesDivider?: string;
     /** A function to render content of the option, replaces the default content of the option */
-    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
+    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;
     /** A function to render content of the pill */
     renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */

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

@@ -45,7 +45,7 @@ export interface PopoverContextValue {
     variant: string | undefined;
     keepMounted: boolean | undefined;
     getStyles: GetStylesApi<PopoverFactory>;
-    resolvedStyles: Record<string, any>;
+    resolvedStyles: Record<string, any> | undefined;
     floatingStrategy: FloatingStrategy | undefined;
     referenceHidden: boolean | undefined;
 }

package/lib/components/Select/Select.d.ts

@@ -39,7 +39,7 @@ export interface SelectProps<Value extends Primitive = string> extends BoxProps,
     /** Props passed down to the hidden input */
     hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
     /** A function to render content of the option, replaces the default content of the option */
-    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem>) => React.ReactNode;
+    renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;
     /** Props passed down to the underlying `ScrollArea` component in the dropdown */
     scrollAreaProps?: ScrollAreaProps;
     /** Controls color of the default chevron, by default depends on the color scheme */

package/lib/components/Tree/Tree.d.ts

@@ -1,5 +1,6 @@
 import { BoxProps, ElementProps, Factory, MantineSpacing, StylesApiProps } from '../../core';
 import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
+import type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';
 import { TreeController } from './use-tree';
 export interface TreeNodeData {
     label: React.ReactNode;
@@ -39,6 +40,9 @@ export interface RenderTreeNodePayload {
         onDrop?: (event: React.DragEvent) => void;
         onDragEnd?: (event: React.DragEvent) => void;
     };
+    /** Props to spread into the drag handle element when `withDragHandle` is set on `Tree`.
+     * `undefined` when `withDragHandle` is not enabled or drag-and-drop is disabled. */
+    dragHandleProps: TreeDragHandleProps | undefined;
 }
 export type RenderNode = (payload: RenderTreeNodePayload) => React.ReactNode;
 export type TreeStylesNames = 'root' | 'node' | 'subtree' | 'label';
@@ -74,6 +78,12 @@ export interface TreeProps extends BoxProps, StylesApiProps<TreeFactory>, Elemen
     keepMounted?: boolean;
     /** Called when a node is dropped on another node, enables drag-and-drop when provided */
     onDragDrop?: (payload: TreeDragDropPayload) => void;
+    /** Called for each potential drop target to determine whether a drop is allowed.
+     * When it returns `false`, the drop indicator is hidden and the drop is rejected. */
+    allowDrop?: TreeAllowDrop;
+    /** If set, drag-and-drop must be initiated from an element that spreads `dragHandleProps`
+     * from the `renderNode` payload, rather than anywhere on the node. @default false */
+    withDragHandle?: boolean;
     /** If set, connecting lines are rendered showing parent-child relationships @default false */
     withLines?: boolean;
 }

package/lib/components/Tree/TreeNode.d.ts

@@ -2,6 +2,7 @@ import { GetStylesApi } from '../../core';
 import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
 import type { RenderNode, TreeDragState, TreeFactory, TreeNodeData } from './Tree';
 import type { TreeController } from './use-tree';
+import { TreeAllowDrop } from './use-tree-node-drag-drop';
 interface TreeNodeProps {
     node: TreeNodeData;
     getStyles: GetStylesApi<TreeFactory>;
@@ -18,10 +19,12 @@ interface TreeNodeProps {
     checkOnSpace: boolean | undefined;
     keepMounted: boolean | undefined;
     onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
+    allowDrop: TreeAllowDrop | undefined;
+    withDragHandle: boolean | undefined;
     dragStateRef: React.RefObject<TreeDragState>;
     data: TreeNodeData[];
 }
-export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, dragStateRef, data, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare function TreeNode({ node, getStyles, rootIndex, controller, expandOnClick, selectOnClick, isSubtree, level, renderNode, flatValues, allowRangeSelection, expandOnSpace, checkOnSpace, keepMounted, onDragDrop, allowDrop, withDragHandle, dragStateRef, data, }: TreeNodeProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace TreeNode {
     var displayName: string;
 }

package/lib/components/Tree/index.d.ts

@@ -13,3 +13,4 @@ export type { TreeNodeFilter } from './filter-tree-data/filter-tree-data';
 export type { TreeDragDropPosition, TreeDragDropPayload } from './move-tree-node/move-tree-node';
 export type { FlattenedTreeNodeData } from './flatten-tree-data/flatten-tree-data';
 export type { FlatTreeNodeProps } from './FlatTreeNode';
+export type { TreeAllowDrop, TreeDragHandleProps } from './use-tree-node-drag-drop';

package/lib/components/Tree/use-tree-node-drag-drop.d.ts

@@ -1,18 +1,30 @@
 import type { TreeDragDropPayload } from './move-tree-node/move-tree-node';
 import type { TreeDragState, TreeNodeData } from './Tree';
+export type TreeAllowDrop = (payload: TreeDragDropPayload) => boolean;
 interface UseTreeNodeDragDropInput {
     nodeValue: string;
     hasChildren: boolean;
     data: TreeNodeData[];
     onDragDrop: ((payload: TreeDragDropPayload) => void) | undefined;
     dragStateRef: React.RefObject<TreeDragState>;
+    allowDrop: TreeAllowDrop | undefined;
+    withDragHandle: boolean | undefined;
 }
-export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, }: UseTreeNodeDragDropInput): Record<string, never> | {
-    draggable: true;
-    onDragStart: (event: React.DragEvent) => void;
-    onDragOver: (event: React.DragEvent) => void;
-    onDragLeave: (event: React.DragEvent) => void;
-    onDrop: (event: React.DragEvent) => void;
-    onDragEnd: (event: React.DragEvent) => void;
+export interface TreeDragHandleProps {
+    onMouseDown: (event: React.MouseEvent) => void;
+}
+export declare function useTreeNodeDragDrop({ nodeValue, hasChildren, data, onDragDrop, dragStateRef, allowDrop, withDragHandle, }: UseTreeNodeDragDropInput): {
+    readonly elementProps: {};
+    readonly dragHandleProps: undefined;
+} | {
+    elementProps: {
+        draggable: boolean;
+        onDragStart: (event: React.DragEvent) => void;
+        onDragOver: (event: React.DragEvent) => void;
+        onDragLeave: (event: React.DragEvent) => void;
+        onDrop: (event: React.DragEvent) => void;
+        onDragEnd: (event: React.DragEvent) => void;
+    };
+    dragHandleProps: TreeDragHandleProps | undefined;
 };
 export {};

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

@@ -7,6 +7,6 @@ export interface UseResolvedStylesApiInput<Payload extends FactoryPayload> {
     stylesCtx?: Record<string, any>;
 }
 export declare function useResolvedStylesApi<Payload extends FactoryPayload>({ classNames, styles, props, stylesCtx, }: UseResolvedStylesApiInput<Payload>): {
-    resolvedClassNames: Partial<Record<string, string>>;
-    resolvedStyles: Record<string, any>;
+    resolvedClassNames: Partial<Record<string, string>> | undefined;
+    resolvedStyles: Record<string, any> | undefined;
 };

package/package.json

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

package/styles/Radio.css

@@ -29,6 +29,7 @@
 .m_f3ed6b2b {
   color: var(--radio-icon-color);
   opacity: var(--radio-icon-opacity, 0);
+  translate: -50% -50%;
   transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
   transition:
     opacity 100ms ease,
@@ -37,8 +38,8 @@
   width: var(--radio-icon-size);
   height: var(--radio-icon-size);
   position: absolute;
-  top: calc(50% - var(--radio-icon-size) / 2);
-  left: calc(50% - var(--radio-icon-size) / 2);
+  top: 50%;
+  left: 50%;
 }
 
 .m_8a3dbb89 {

package/styles/Radio.layer.css

@@ -29,6 +29,7 @@
 .m_f3ed6b2b {
   color: var(--radio-icon-color);
   opacity: var(--radio-icon-opacity, 0);
+  translate: -50% -50%;
   transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
   transition:
     opacity 100ms ease,
@@ -37,8 +38,8 @@
   width: var(--radio-icon-size);
   height: var(--radio-icon-size);
   position: absolute;
-  top: calc(50% - var(--radio-icon-size) / 2);
-  left: calc(50% - var(--radio-icon-size) / 2);
+  top: 50%;
+  left: 50%;
 }
 
 .m_8a3dbb89 {

package/styles.css

@@ -5820,6 +5820,7 @@ fieldset:disabled .m_8ee546b8,
 .m_f3ed6b2b {
   color: var(--radio-icon-color);
   opacity: var(--radio-icon-opacity, 0);
+  translate: -50% -50%;
   transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
   transition:
     opacity 100ms ease,
@@ -5828,8 +5829,8 @@ fieldset:disabled .m_8ee546b8,
   width: var(--radio-icon-size);
   height: var(--radio-icon-size);
   position: absolute;
-  top: calc(50% - var(--radio-icon-size) / 2);
-  left: calc(50% - var(--radio-icon-size) / 2);
+  top: 50%;
+  left: 50%;
 }
 
 .m_8a3dbb89 {

package/styles.layer.css

@@ -5820,6 +5820,7 @@ fieldset:disabled .m_8ee546b8,
 .m_f3ed6b2b {
   color: var(--radio-icon-color);
   opacity: var(--radio-icon-opacity, 0);
+  translate: -50% -50%;
   transform: var(--radio-icon-transform, scale(0.2) translateY(calc(0.625rem * var(--mantine-scale))));
   transition:
     opacity 100ms ease,
@@ -5828,8 +5829,8 @@ fieldset:disabled .m_8ee546b8,
   width: var(--radio-icon-size);
   height: var(--radio-icon-size);
   position: absolute;
-  top: calc(50% - var(--radio-icon-size) / 2);
-  left: calc(50% - var(--radio-icon-size) / 2);
+  top: 50%;
+  left: 50%;
 }
 
 .m_8a3dbb89 {