@majoo-ui/react 1.43.0 → 1.44.3

package/components/modalDialog/ModalDialog.d.ts

@@ -0,0 +1,810 @@
+import React from 'react';
+import { Dialog } from '../../';
+import type { DialogContentProps } from '..';
+export declare const ModalDialogFooter: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, {
+    colors: unknown;
+    space: unknown;
+    shadows: unknown;
+    fontSizes: unknown;
+    fonts: unknown;
+    lineHeights: unknown;
+    letterSpacings: unknown;
+    radii: unknown;
+    sizes: unknown;
+    zIndices: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    m: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+    subtleColor: (value: string) => {
+        color: string;
+        backgroundColor: string;
+    };
+}>>;
+export declare const ModalDialogTitle: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, {
+    colors: unknown;
+    space: unknown;
+    shadows: unknown;
+    fontSizes: unknown;
+    fonts: unknown;
+    lineHeights: unknown;
+    letterSpacings: unknown;
+    radii: unknown;
+    sizes: unknown;
+    zIndices: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    m: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+    subtleColor: (value: string) => {
+        color: string;
+        backgroundColor: string;
+    };
+}>>;
+export declare const ModalDialogContent: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, {
+    colors: unknown;
+    space: unknown;
+    shadows: unknown;
+    fontSizes: unknown;
+    fonts: unknown;
+    lineHeights: unknown;
+    letterSpacings: unknown;
+    radii: unknown;
+    sizes: unknown;
+    zIndices: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    m: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+    subtleColor: (value: string) => {
+        color: string;
+        backgroundColor: string;
+    };
+}>>;
+export declare const ModalDialogTrigger: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, import("@stitches/react/types/css-util").CSS<{
+    sm: "(min-width: 359px)";
+    md: "(min-width: 767px)";
+    lg: "(min-width: 1023px)";
+    xl: "(min-width: 1199px)";
+    '2xl': "(min-width: 1399px)";
+    '3xl': "(min-width: 1600px)";
+}, {
+    colors: unknown;
+    space: unknown;
+    shadows: unknown;
+    fontSizes: unknown;
+    fonts: unknown;
+    lineHeights: unknown;
+    letterSpacings: unknown;
+    radii: unknown;
+    sizes: unknown;
+    zIndices: unknown;
+}, import("@stitches/react/types/config").DefaultThemeMap, {
+    m: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        margin: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mt: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mr: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mb: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    ml: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    mx: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginLeft: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginRight: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    my: (value: {
+        readonly [$$ScaleValue]: "space";
+    }) => {
+        marginTop: {
+            readonly [$$ScaleValue]: "space";
+        };
+        marginBottom: {
+            readonly [$$ScaleValue]: "space";
+        };
+    };
+    size: (value: {
+        readonly [$$PropertyValue]: "width";
+    }) => {
+        width: {
+            readonly [$$PropertyValue]: "width";
+        };
+        height: {
+            readonly [$$PropertyValue]: "width";
+        };
+    };
+    subtleColor: (value: string) => {
+        color: string;
+        backgroundColor: string;
+    };
+}>>;
+declare type IDialog = React.ComponentProps<typeof Dialog>;
+interface ModalDialogProps extends IDialog, DialogContentProps {
+    /** set PageDialog zIndex, default is set to 1400 */
+    layer?: number | string;
+    /** Force to mobile view or desktop view, if undefined ModalDialog will be responsive according to current screen size */
+    isMobile?: boolean | undefined;
+    /**
+    * @deprecated Use size or css props css={{width: width css property}} instead. This will be deleted in the future to limit unnecessary props.
+    */
+    width?: string | number;
+    /** Set default behavior when opening dialog with form. Usually used with prevent default*/
+    onOpenAutoFocus?(): void;
+}
+/**
+* ModalDialog are used to focus and display content that contains one specific task that requires interaction from the user and is separate from the main page.
+* https://react-majoo-ui.mangkujagat.com/?path=/story/core-components-pagedialog--default
+* @param size - default fullsize
+* @param layer - z-index default 1400
+* @param isMobile - force mobile/desktop view, default is responsive
+* @param onOpenAutoFocus - set default open behaviour
+*
+* @example
+* // Uncontrolled Example
+*  <ModalDialog>
+*    <ModalDialogTrigger>Button Trigger</ModalDialogTrigger>
+*    <ModalDialogTitle>Title</ModalDialogTitle>
+*    <ModalDialogContent>Content</ModalDialogContent>
+*    <ModalDialogFooter>Footer</ModalDialogFooter>
+*  </ModalDialog>
+* @component
+*/
+declare const ModalDialog: {
+    (props: ModalDialogProps): JSX.Element;
+    Trigger: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, import("@stitches/react/types/css-util").CSS<{
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, {
+        colors: unknown;
+        space: unknown;
+        shadows: unknown;
+        fontSizes: unknown;
+        fonts: unknown;
+        lineHeights: unknown;
+        letterSpacings: unknown;
+        radii: unknown;
+        sizes: unknown;
+        zIndices: unknown;
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        m: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            margin: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: {
+            readonly [$$PropertyValue]: "width";
+        }) => {
+            width: {
+                readonly [$$PropertyValue]: "width";
+            };
+            height: {
+                readonly [$$PropertyValue]: "width";
+            };
+        };
+        subtleColor: (value: string) => {
+            color: string;
+            backgroundColor: string;
+        };
+    }>>;
+    Title: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, import("@stitches/react/types/css-util").CSS<{
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, {
+        colors: unknown;
+        space: unknown;
+        shadows: unknown;
+        fontSizes: unknown;
+        fonts: unknown;
+        lineHeights: unknown;
+        letterSpacings: unknown;
+        radii: unknown;
+        sizes: unknown;
+        zIndices: unknown;
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        m: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            margin: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: {
+            readonly [$$PropertyValue]: "width";
+        }) => {
+            width: {
+                readonly [$$PropertyValue]: "width";
+            };
+            height: {
+                readonly [$$PropertyValue]: "width";
+            };
+        };
+        subtleColor: (value: string) => {
+            color: string;
+            backgroundColor: string;
+        };
+    }>>;
+    Content: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, import("@stitches/react/types/css-util").CSS<{
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, {
+        colors: unknown;
+        space: unknown;
+        shadows: unknown;
+        fontSizes: unknown;
+        fonts: unknown;
+        lineHeights: unknown;
+        letterSpacings: unknown;
+        radii: unknown;
+        sizes: unknown;
+        zIndices: unknown;
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        m: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            margin: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: {
+            readonly [$$PropertyValue]: "width";
+        }) => {
+            width: {
+                readonly [$$PropertyValue]: "width";
+            };
+            height: {
+                readonly [$$PropertyValue]: "width";
+            };
+        };
+        subtleColor: (value: string) => {
+            color: string;
+            backgroundColor: string;
+        };
+    }>>;
+    Footer: import("@stitches/react/types/styled-component").StyledComponent<"div", {}, {
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, import("@stitches/react/types/css-util").CSS<{
+        sm: "(min-width: 359px)";
+        md: "(min-width: 767px)";
+        lg: "(min-width: 1023px)";
+        xl: "(min-width: 1199px)";
+        '2xl': "(min-width: 1399px)";
+        '3xl': "(min-width: 1600px)";
+    }, {
+        colors: unknown;
+        space: unknown;
+        shadows: unknown;
+        fontSizes: unknown;
+        fonts: unknown;
+        lineHeights: unknown;
+        letterSpacings: unknown;
+        radii: unknown;
+        sizes: unknown;
+        zIndices: unknown;
+    }, import("@stitches/react/types/config").DefaultThemeMap, {
+        m: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            margin: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mt: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mr: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mb: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        ml: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        mx: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginLeft: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginRight: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        my: (value: {
+            readonly [$$ScaleValue]: "space";
+        }) => {
+            marginTop: {
+                readonly [$$ScaleValue]: "space";
+            };
+            marginBottom: {
+                readonly [$$ScaleValue]: "space";
+            };
+        };
+        size: (value: {
+            readonly [$$PropertyValue]: "width";
+        }) => {
+            width: {
+                readonly [$$PropertyValue]: "width";
+            };
+            height: {
+                readonly [$$PropertyValue]: "width";
+            };
+        };
+        subtleColor: (value: string) => {
+            color: string;
+            backgroundColor: string;
+        };
+    }>>;
+    defaultProps: {
+        size: string;
+        layer: string;
+    };
+};
+export default ModalDialog;