@mantine-vue/core 3.0.0 → 3.1.0

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

@@ -0,0 +1,234 @@
+import type { VNodeChild } from 'vue';
+import type { FlipOptions, InlineOptions, ShiftOptions, SizeOptions } from '@floating-ui/vue';
+import type { ClassNames, Styles, Vars } from '../../core';
+import type { ArrowPosition, FloatingAxesOffsets, FloatingPosition, FloatingStrategy } from '../../utils/Floating';
+export type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';
+export type PopoverCssVariables = '--popover-radius' | '--popover-shadow';
+/** `target` matches the width of the target element; anything else is a CSS width. */
+export type PopoverWidth = 'target' | string | number | null;
+export interface PopoverMiddlewares {
+    /** Shifts the dropdown along its axis so it stays inside the viewport. */
+    shift?: boolean | ShiftOptions;
+    /** Flips the dropdown to the opposite side when it does not fit. */
+    flip?: boolean | FlipOptions;
+    /** Improves the position for targets that span multiple lines. */
+    inline?: boolean | InlineOptions;
+    /** Constrains the dropdown to the available space. */
+    size?: boolean | SizeOptions;
+}
+export interface PopoverSlots {
+    /** `Popover.Target` and `Popover.Dropdown`. */
+    default?: () => VNodeChild;
+}
+export interface PopoverTargetSlots {
+    /** The element the dropdown is anchored to. Must be a single element or component that accepts a ref. */
+    default?: () => VNodeChild;
+}
+export interface PopoverDropdownSlots {
+    /** Content of the dropdown. */
+    default?: () => VNodeChild;
+}
+export interface PopoverContextMenuSlots {
+    /** The element that opens the popover on right click or long press. */
+    default?: () => VNodeChild;
+}
+/** Props of `Popover`. */
+export interface PopoverProps {
+    /** Static selector the Styles API classes are generated from. Used by components built on `Popover`. */
+    __staticSelector?: string;
+    /**
+     * Side the dropdown is rendered on.
+     *
+     * @default 'bottom'
+     */
+    position?: FloatingPosition;
+    /**
+     * Distance between the dropdown and its target in px. Half the arrow size is added
+     * automatically when `withArrow` is set.
+     *
+     * @default 8
+     */
+    offset?: number | FloatingAxesOffsets;
+    /** Open state. Controlled when set, bound with `v-model:opened`. */
+    opened?: boolean;
+    /** Uncontrolled initial open state. */
+    defaultOpened?: boolean;
+    /**
+     * Width of the dropdown. `target` matches the target element.
+     *
+     * @default 'max-content'
+     */
+    width?: PopoverWidth;
+    /**
+     * If set, an arrow pointing at the target is rendered.
+     *
+     * @default false
+     */
+    withArrow?: boolean;
+    /**
+     * Size of the arrow in px.
+     *
+     * @default 7
+     */
+    arrowSize?: number;
+    /**
+     * Distance between the arrow and the edge of the dropdown in px.
+     *
+     * @default 5
+     */
+    arrowOffset?: number;
+    /**
+     * `border-radius` of the arrow in px.
+     *
+     * @default 0
+     */
+    arrowRadius?: number;
+    /**
+     * Position of the arrow along the side of the dropdown. `merge` blends the arrow into
+     * the dropdown body instead of drawing it as a separate triangle.
+     *
+     * @default 'side'
+     */
+    arrowPosition?: ArrowPosition;
+    /**
+     * If set, the dropdown is rendered inside a `Portal`.
+     *
+     * @default true
+     */
+    withinPortal?: boolean;
+    /** Props passed down to the `Portal` when `withinPortal` is set. */
+    portalProps?: Record<string, any>;
+    /**
+     * If set, the dropdown closes on a click outside the target and the dropdown.
+     *
+     * @default true
+     */
+    closeOnClickOutside?: boolean;
+    /**
+     * If set, the dropdown closes when `Escape` is pressed inside it.
+     *
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * If set, focus is trapped inside the dropdown while it is open.
+     *
+     * @default false
+     */
+    trapFocus?: boolean;
+    /**
+     * If set, the target and the dropdown get the ARIA roles that describe the
+     * relationship between them.
+     *
+     * @default true
+     */
+    withRoles?: boolean;
+    /**
+     * If set, the dropdown never opens.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * If set, focus returns to the target when the dropdown closes.
+     *
+     * @default false
+     */
+    returnFocus?: boolean;
+    /**
+     * If set, the dropdown stays mounted while it is closed.
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Props passed down to the `Transition`.
+     *
+     * @default { transition: 'fade', duration: 150 }
+     */
+    transitionProps?: Record<string, any>;
+    /**
+     * `z-index` of the dropdown.
+     *
+     * @default getDefaultZIndex('popover')
+     */
+    zIndex?: string | number;
+    /**
+     * CSS `position` strategy of the dropdown.
+     *
+     * @default 'absolute'
+     */
+    floatingStrategy?: FloatingStrategy;
+    /**
+     * Floating UI middlewares applied to the dropdown.
+     *
+     * @default { flip: true, shift: true }
+     */
+    middlewares?: PopoverMiddlewares;
+    /** Base `id` used to connect the target with the dropdown. Generated when not set. */
+    id?: string;
+    /** Props merged into the target element. */
+    targetProps?: Record<string, any>;
+    /**
+     * If set, an overlay is rendered behind the dropdown.
+     *
+     * @default false
+     */
+    withOverlay?: boolean;
+    /** Props passed down to the `Overlay`. */
+    overlayProps?: Record<string, any>;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius`. */
+    radius?: string | number;
+    /** Key of `theme.shadows` or any valid CSS value to set the shadow. */
+    shadow?: string;
+    /** `classNames` of the Styles API. */
+    classNames?: ClassNames<PopoverProps>;
+    /** `styles` of the Styles API. */
+    styles?: Styles<PopoverProps>;
+    /** CSS variables of the Styles API. */
+    vars?: Vars<PopoverProps>;
+    /**
+     * If set, all Mantine classes are removed.
+     *
+     * @default false
+     */
+    unstyled?: boolean;
+}
+/** Props of `Popover.Target`. */
+export interface PopoverTargetProps {
+    /**
+     * Name of the prop the reference ref is passed to on the child.
+     *
+     * @default 'ref'
+     */
+    refProp?: string;
+    /**
+     * Value of `aria-haspopup` set on the target. Only used when `withRoles` is set.
+     *
+     * @default 'dialog'
+     */
+    popupType?: string;
+    /** Any other prop is merged into the cloned child. */
+    [key: string]: any;
+}
+/** Props of `Popover.Dropdown`. Every prop is forwarded to the dropdown element. */
+export interface PopoverDropdownProps {
+    [key: string]: any;
+}
+/** Props of `Popover.ContextMenu`. */
+export interface PopoverContextMenuProps {
+    /**
+     * If set, the context menu does not open.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Time in ms a touch has to be held before the menu opens.
+     *
+     * @default 500
+     */
+    longPressDelay?: number;
+    /** Any other prop is merged into the cloned child. */
+    [key: string]: any;
+}

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

@@ -0,0 +1,45 @@
+import type { PopoverProps, PopoverSlots } from './Popover.types';
+declare const defaults: {
+    readonly position: "bottom";
+    readonly offset: 8;
+    readonly width: "max-content";
+    readonly withArrow: false;
+    readonly arrowSize: 7;
+    readonly arrowOffset: 5;
+    readonly arrowRadius: 0;
+    readonly arrowPosition: "side";
+    readonly withinPortal: true;
+    readonly closeOnClickOutside: true;
+    readonly closeOnEscape: true;
+    readonly trapFocus: false;
+    readonly withRoles: true;
+    readonly returnFocus: false;
+    readonly keepMounted: false;
+    readonly zIndex: number;
+    readonly floatingStrategy: "absolute";
+    readonly transitionProps: {
+        readonly transition: "fade";
+        readonly duration: 150;
+    };
+};
+/** Module scope: created once, not per component instance. */
+declare const varsResolver: (theme: import("../..").MantineTheme, props: any, ctx: Record<string, any>) => Record<string, Record<string, string | undefined>>;
+export { defaults, varsResolver };
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<PopoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+    open: () => any;
+    "update:opened": (opened: boolean) => any;
+    dismiss: () => any;
+}, string, import("vue").PublicProps, Readonly<PopoverProps> & Readonly<{
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    "onUpdate:opened"?: ((opened: boolean) => any) | undefined;
+    onDismiss?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, PopoverSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+import type { PopoverContextMenuSlots } from './Popover.types';
+type __VLS_Slots = PopoverContextMenuSlots;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+import type { PopoverDropdownSlots } from './Popover.types';
+type __VLS_Slots = PopoverDropdownSlots;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,11 @@
+import type { PopoverTargetSlots } from './Popover.types';
+type __VLS_Slots = PopoverTargetSlots;
+declare const __VLS_base: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,2 +1,2 @@
 export { Popover, PopoverTarget, PopoverDropdown, PopoverContextMenu } from './Popover';
-export type { PopoverProps, PopoverStylesNames, PopoverCssVariables, PopoverTargetProps, PopoverDropdownProps, PopoverContextMenuProps, PopoverMiddlewares, PopoverWidth, } from './Popover';
+export type { PopoverContextMenuProps, PopoverContextMenuSlots, PopoverCssVariables, PopoverDropdownProps, PopoverDropdownSlots, PopoverMiddlewares, PopoverProps, PopoverSlots, PopoverStylesNames, PopoverTargetProps, PopoverTargetSlots, PopoverWidth, } from './Popover';

package/lib/components/Popover/popover-utils.d.ts

@@ -0,0 +1,13 @@
+import { type VNode } from 'vue';
+/**
+ * The popover attaches itself to its child by cloning it, so there must be exactly one
+ * real child.
+ */
+export declare function one(slots: any, name: string): VNode;
+/** A cloned child may already carry an array of handlers for the same event. */
+export declare function call(handler: any, event: Event): void;
+/**
+ * Component refs resolve to instances, not elements. Floating UI also accepts a virtual
+ * element, which is why anything with `getBoundingClientRect` is passed through.
+ */
+export declare function asElement(node: any): HTMLElement | null;

package/lib/components/Portal/OptionalPortal.d.ts

@@ -1,35 +1,2 @@
-export declare const OptionalPortal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    withinPortal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    target: {
-        type: (ObjectConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    reuseTargetNode: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> | import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>[] | undefined, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    withinPortal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    target: {
-        type: (ObjectConstructor | StringConstructor)[];
-        default: undefined;
-    };
-    reuseTargetNode: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    target: string | Record<string, any>;
-    reuseTargetNode: boolean;
-    withinPortal: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export { default as OptionalPortal } from './OptionalPortal.vue';
+export type { OptionalPortalOwnProps, OptionalPortalProps, OptionalPortalSlots, } from './OptionalPortal.types';

package/lib/components/Portal/OptionalPortal.types.d.ts

@@ -0,0 +1,37 @@
+import type { VNodeChild } from 'vue';
+/** Props declared by `OptionalPortal` itself. See `OptionalPortalProps` for the full public type. */
+export interface OptionalPortalOwnProps {
+    /**
+     * Determines whether children should be rendered inside Portal.
+     * When false, children are rendered as regular React children.
+     *
+     * Note: In test environment, Portal is always disabled regardless of this value.
+     *
+     * @default true
+     */
+    withinPortal?: boolean;
+    /**
+     * Target element where portal should be rendered. Accepts:
+     * - HTMLElement: Renders portal inside this element
+     * - string: CSS selector - renders inside first matching element
+     * - undefined: Uses shared portal node or creates new one based on `reuseTargetNode`
+     *
+     * Note: If selector doesn't match any element, portal will not render
+     */
+    target?: string | HTMLElement;
+    /**
+     * When true and target is not specified, all Portal instances share a single
+     * container node appended to document.body. When false, each Portal creates
+     * its own container node.
+     *
+     * Has no effect when target is specified.
+     *
+     * @default true
+     */
+    reuseTargetNode?: boolean;
+}
+export type OptionalPortalProps = OptionalPortalOwnProps;
+export interface OptionalPortalSlots {
+    /** Content rendered inline or in the portal. */
+    default?: () => VNodeChild;
+}

package/lib/components/Portal/OptionalPortal.vue.d.ts

@@ -0,0 +1,11 @@
+import type { OptionalPortalOwnProps, OptionalPortalSlots } from './OptionalPortal.types';
+type __VLS_Slots = OptionalPortalSlots;
+declare const __VLS_base: import("vue").DefineComponent<OptionalPortalOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<OptionalPortalOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/components/Portal/Portal.d.ts

@@ -1,25 +1,16 @@
-import { type PropType } from 'vue';
-export declare const Portal: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    target: {
-        type: PropType<HTMLElement | string>;
-        default: undefined;
-    };
-    reuseTargetNode: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}> | null, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    target: {
-        type: PropType<HTMLElement | string>;
-        default: undefined;
-    };
-    reuseTargetNode: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    target: string | HTMLElement;
-    reuseTargetNode: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export declare const Portal: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("./Portal.types").PortalOwnProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<import("./Portal.types").PortalOwnProps> & Readonly<{}>, {}, {}, {}, {}, {}>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<import("./Portal.types").PortalOwnProps> & Readonly<{}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: import("./Portal.types").PortalSlots;
+});
+export type { PortalOwnProps, PortalProps, PortalSlots } from './Portal.types';

package/lib/components/Portal/Portal.types.d.ts

@@ -0,0 +1,29 @@
+import type { HTMLAttributes, VNodeChild } from 'vue';
+/** Props declared by `Portal` itself. See `PortalProps` for the full public type. */
+export interface PortalOwnProps {
+    /**
+     * Target element where portal should be rendered. Accepts:
+     * - HTMLElement: Renders portal inside this element
+     * - string: CSS selector - renders inside first matching element
+     * - undefined: Uses shared portal node or creates new one based on `reuseTargetNode`
+     *
+     * Note: If selector doesn't match any element, portal will not render
+     */
+    target?: HTMLElement | string;
+    /**
+     * When true and target is not specified, all Portal instances share a single
+     * container node appended to document.body. When false, each Portal creates
+     * its own container node.
+     *
+     * Has no effect when target is specified.
+     *
+     * @default true
+     */
+    reuseTargetNode?: boolean;
+}
+export interface PortalProps extends Omit<HTMLAttributes, keyof PortalOwnProps>, PortalOwnProps {
+}
+export interface PortalSlots {
+    /** Content rendered into the target element. */
+    default?: () => VNodeChild;
+}

package/lib/components/Portal/Portal.vue.d.ts

@@ -0,0 +1,11 @@
+import type { PortalOwnProps, PortalSlots } from './Portal.types';
+type __VLS_Slots = PortalSlots;
+declare const __VLS_base: import("vue").DefineComponent<PortalOwnProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<PortalOwnProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -1,7 +1,9 @@
 export interface ProgressContextValue {
     getStyles: (selector: string, options?: {
         className?: any;
+        classNames?: any;
         style?: any;
+        styles?: any;
         props?: any;
     }) => any;
     autoContrast?: boolean;