Correct transition props

src/ts/components/core/LoadingOverlay.tsx

@@ -1,17 +1,15 @@
-import {
-    LoadingOverlay as MantineLoadingOverlay,
-    TransitionOverride,
-} from "@mantine/core";
+import { LoadingOverlay as MantineLoadingOverlay } from "@mantine/core";
 import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { LoaderProps } from "props/loader";
 import { OverlayProps } from "props/overlay";
 import { StylesApiProps } from "props/styles";
+import { TransitionProps } from "props/transition";
 import React from "react";
 
 interface Props extends BoxProps, StylesApiProps, DashBaseProps {
     /** Props passed down to `Transition` component, `{ transition: 'fade', duration: 0 }` by default */
-    transitionProps?: TransitionOverride;
+    transitionProps?: TransitionProps;
     /** Props passed down to `Loader` component */
     loaderProps?: LoaderProps;
     /** Props passed down to `Overlay` component */

src/ts/components/core/slider/RangeSlider.tsx

@@ -3,12 +3,12 @@ import {
     MantineRadius,
     RangeSlider as MantineRangeSlider,
     MantineSize,
-    TransitionOverride,
 } from "@mantine/core";
 import { useDidUpdate } from "@mantine/hooks";
 import { BoxProps } from "props/box";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
+import { TransitionProps } from "props/transition";
 import React, { useState } from "react";
 
 interface Props
@@ -42,7 +42,7 @@ interface Props
     /** Function to generate label or any react node to render instead, set to null to disable label */
     label?: React.ReactNode;
     /** Props passed down to the `Transition` component, `{ transition: 'fade', duration: 0 }` by default */
-    labelTransitionProps?: TransitionOverride;
+    labelTransitionProps?: TransitionProps;
     /** Determines whether the label should be visible when the slider is not being dragged or hovered, `false` by default */
     labelAlwaysOn?: boolean;
     /** Determines whether the label should be displayed when the slider is hovered, `true` by default */

src/ts/components/core/slider/Slider.tsx

@@ -3,12 +3,12 @@ import {
     MantineRadius,
     MantineSize,
     Slider as MantineSlider,
-    TransitionOverride,
 } from "@mantine/core";
 import { useDidUpdate } from "@mantine/hooks";
 import { BoxProps } from "props/box";
 import { DashBaseProps, PersistenceProps } from "props/dash";
 import { StylesApiProps } from "props/styles";
+import { TransitionProps } from "props/transition";
 import React, { useState } from "react";
 
 interface Props
@@ -42,7 +42,7 @@ interface Props
     /** Function to generate label or any react node to render instead, set to null to disable label */
     label?: React.ReactNode;
     /** Props passed down to the `Transition` component, `{ transition: 'fade', duration: 0 }` by default */
-    labelTransitionProps?: TransitionOverride;
+    labelTransitionProps?: TransitionProps;
     /** Determines whether the label should be visible when the slider is not being dragged or hovered, `false` by default */
     labelAlwaysOn?: boolean;
     /** Thumb `aria-label` */

src/ts/components/core/tooltip/Tooltip.tsx

@@ -4,11 +4,11 @@ import {
     FloatingAxesOffsets,
     FloatingStrategy,
     Tooltip as MantineTooltip,
-    TransitionOverride,
 } from "@mantine/core";
 import { BoxProps } from "props/box";
 import { DashBaseProps } from "props/dash";
 import { TooltipBaseProps } from "props/tooltip";
+import { TransitionProps } from "props/transition";
 import React from "react";
 
 interface Props extends TooltipBaseProps, DashBaseProps {
@@ -31,7 +31,7 @@ interface Props extends TooltipBaseProps, DashBaseProps {
     /** Arrow position relative to the tooltip, `side` by default */
     arrowPosition?: ArrowPosition;
     /** Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type, `{ duration: 100, transition: 'fade' }` by default */
-    transitionProps?: TransitionOverride;
+    transitionProps?: TransitionProps;
     /** Determines which events will be used to show tooltip, `{ hover: true, focus: false, touch: false }` by default */
     events?: {
         hover: boolean;

src/ts/props/modal.ts

@@ -3,11 +3,11 @@ import {
     MantineShadow,
     MantineSize,
     MantineSpacing,
-    TransitionOverride,
 } from "@mantine/core";
 import { BoxProps } from "./box";
 import { __CloseButtonProps } from "./button";
 import { OverlayProps } from "./overlay";
+import { TransitionProps } from "./transition";
 
 export interface ModalBaseProps extends BoxProps {
     /** If set modal/drawer will not be unmounted from the DOM when it is hidden, `display: none` styles will be added instead, `false` by default */
@@ -27,7 +27,7 @@ export interface ModalBaseProps extends BoxProps {
     /** Determines whether the modal/drawer should be closed when user clicks on the overlay, `true` by default */
     closeOnClickOutside?: boolean;
     /** Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'pop' }` by default */
-    transitionProps?: TransitionOverride;
+    transitionProps?: TransitionProps;
     /** Determines whether `onClose` should be called when user presses the escape key, `true` by default */
     closeOnEscape?: boolean;
     /** Determines whether focus should be returned to the last active element when `onClose` is called, `true` by default */
@@ -47,7 +47,7 @@ export interface ModalBaseProps extends BoxProps {
 export interface ModalBaseOverlayProps
     extends Omit<OverlayProps, "styles" | "classNames" | "variant" | "vars"> {
     /** Props passed down to the `Transition` component */
-    transitionProps?: TransitionOverride;
+    transitionProps?: TransitionProps;
 }
 
 export interface ModalBaseCloseButtonProps

src/ts/props/popover.ts

@@ -6,10 +6,10 @@ import {
     MantineRadius,
     MantineShadow,
     PopoverWidth,
-    TransitionOverride,
 } from "@mantine/core";
 import { PopoverMiddlewares } from "@mantine/core/lib/components/Popover/Popover.types";
 import { StylesApiProps } from "./styles";
+import { TransitionProps } from "./transition";
 
 export interface __PopoverProps {
     /** Dropdown position relative to the target element, `'bottom'` by default */
@@ -21,7 +21,7 @@ export interface __PopoverProps {
     /** If set dropdown will not be unmounted from the DOM when it is hidden, `display: none` styles will be added instead */
     keepMounted?: boolean;
     /** Props passed down to the `Transition` component that used to animate dropdown presence, use to configure duration and animation type, `{ duration: 150, transition: 'fade' }` by default */
-    transitionProps?: TransitionOverride;
+    transitionProps?: TransitionProps;
     /** Dropdown width, or `'target'` to make dropdown width the same as target element, `'max-content'` by default */
     width?: PopoverWidth;
     /** Floating ui middlewares to configure position handling, `{ flip: true, shift: true, inline: false }` by default */

src/ts/props/transition.ts

@@ -0,0 +1,16 @@
+import { MantineTransition } from "@mantine/core";
+
+export interface TransitionProps {
+    /** If set element will not be unmounted from the DOM when it is hidden, `display: none` styles will be applied instead */
+    keepMounted?: boolean;
+    /** Transition name or object */
+    transition?: MantineTransition;
+    /** Transition duration in ms, `250` by default */
+    duration?: number;
+    /** Exit transition duration in ms, `250` by default */
+    exitDuration?: number;
+    /** Transition timing function, `theme.transitionTimingFunction` by default */
+    timingFunction?: string;
+    /** Determines whether component should be mounted to the DOM */
+    mounted: boolean;
+}