@progress/kendo-react-dialogs 13.3.0 → 13.4.0-develop.1

package/index.d.ts

@@ -5,828 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { BaseEvent } from '@progress/kendo-react-common';
-import { default as default_2 } from 'prop-types';
-import { Draggable } from '@progress/kendo-react-common';
-import { JSX } from 'react/jsx-runtime';
-import * as React_2 from 'react';
-import { ZIndexContext } from '@progress/kendo-react-common';
-import { ZIndexContextType } from '@progress/kendo-react-common';
-
-/**
- * Lists the possible layout of the dialogs action buttons.
- */
-export declare type ActionsLayout = 'start' | 'center' | 'end' | 'stretched';
-
-/**
- * Represents the [KendoReact Dialog component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- *
- * Accepts properties of type [DialogProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialogprops).
- * Obtaining the `ref` returns an object of type [DialogHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/dialoghandle).
- *
- * @remarks
- * Supported children components are: {@link DialogActionsBar}.
- */
-export declare const Dialog: React_2.ForwardRefExoticComponent<DialogProps & React_2.RefAttributes<DialogHandle | null>>;
-
-/**
- * Returns the action bar of the Dialog.
- *
- * @returns React.ReactElement
- */
-export declare const DialogActionsBar: React_2.FunctionComponent<DialogActionsBarProps>;
-
-/**
- * Represents the props of the [KendoReact DialogActionsBar component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- */
-declare interface DialogActionsBarProps {
-    /**
-     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/action-buttons)). Defaults to `stretched`.
-     */
-    layout?: ActionsLayout;
-    /**
-     * @hidden
-     */
-    children?: any;
-}
-
-/**
- * @hidden
- */
-export declare interface DialogCloseEvent extends BaseEvent<DialogHandle> {
-}
-
-/**
- * Represent the `ref` of the Dialog component.
- */
-export declare interface DialogHandle {
-    /**
-     * The current element or `null` if there is no one.
-     */
-    element: HTMLDivElement | null;
-    /**
-     * The props of the Dialog component.
-     */
-    props: DialogProps;
-}
-
-/**
- * Represents the props of the [KendoReact Dialog component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- */
-export declare interface DialogProps {
-    /**
-     * Set the focus the Dialog container automatically when mounted.
-     *
-     * @default false
-     *
-     * @example
-     * ```jsx
-     * <Dialog autoFocus={true} />
-     * ```
-     */
-    autoFocus?: boolean;
-    /**
-     * Specifies the query selector used to set the initial focus ([see examples](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/initial-focus)).
-     *
-     * @example
-     * ```jsx
-     * <Dialog autoFocusedElement="#input-id" />
-     * ```
-     */
-    autoFocusedElement?: string;
-    /**
-     * Sets the title of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/title)). If you do not specify the `title`, the Dialog does not render a **Close** button.
-     *
-     * @example
-     * ```jsx
-     * <Dialog title="Dialog Title" />
-     * ```
-     */
-    title?: string | React.ReactElement<any>;
-    /**
-     * Sets a class of the Dialog DOM element.
-     *
-     * @example
-     * ```jsx
-     * <Dialog className="custom-class" />
-     * ```
-     */
-    className?: string;
-    /**
-     * Specifies whether a close button should be rendered at the top corner of the dialog.
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Dialog closeIcon={true} />
-     * ```
-     */
-    closeIcon?: boolean;
-    /**
-     * Specifies if the Dialog will be modal by rendering an overlay under the component.
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Dialog modal={false} />
-     * ```
-     */
-    modal?: boolean;
-    /**
-     * Set styles to the Dialog overlay element rendered when the `modal` prop is enabled.
-     *
-     * @example
-     * ```jsx
-     * <Dialog overlayStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.5)' }} />
-     * ```
-     */
-    overlayStyle?: React.CSSProperties;
-    /**
-     * Specifies the width of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
-     *
-     * @example
-     * ```jsx
-     * <Dialog width="400px" />
-     * ```
-     */
-    width?: number | string;
-    /**
-     * Specifies the height of the Dialog ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog/dimensions)).
-     *
-     * @example
-     * ```jsx
-     * <Dialog height="300px" />
-     * ```
-     */
-    height?: number | string;
-    /**
-     * Specifies the minimum width of the Dialog.
-     *
-     * @example
-     * ```jsx
-     * <Dialog minWidth="200px" />
-     * ```
-     */
-    minWidth?: number | string;
-    /**
-     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
-     *
-     * @example
-     * ```jsx
-     * <Dialog onClose={(event) => console.log(event)} />
-     * ```
-     */
-    onClose?: (event: DialogCloseEvent) => void;
-    /**
-     * @hidden
-     */
-    children?: React.ReactNode;
-    /**
-     * Sets the `aria-labelledby` value.
-     *
-     * @example
-     * ```jsx
-     * <Dialog id="dialog-id" />
-     * ```
-     */
-    id?: string;
-    /**
-     * Represents the `dir` HTML attribute.
-     *
-     * @example
-     * ```jsx
-     * <Dialog dir="rtl" />
-     * ```
-     */
-    dir?: string;
-    /**
-     * The styles that are applied to the Dialog.
-     *
-     * @example
-     * ```jsx
-     * <Dialog style={{ border: '1px solid black' }} />
-     * ```
-     */
-    style?: React.CSSProperties;
-    /**
-     * The styles that are applied to the content of the Dialog.
-     *
-     * @example
-     * ```jsx
-     * <Dialog contentStyle={{ padding: '20px' }} />
-     * ```
-     */
-    contentStyle?: React.CSSProperties;
-    /**
-     * Defines the container to which the Dialog will be appended.
-     * * If set to `null` the Dialog will be rendered without React Portal.
-     *
-     * @default document.body
-     *
-     * @example
-     * ```jsx
-     * <Dialog appendTo={document.getElementById('container')} />
-     * ```
-     */
-    appendTo?: any;
-    /**
-     * Configures the `themeColor` of the Dialog.
-     *
-     * The available options are:
-     * - primary
-     * - dark
-     * - light
-     *
-     * @example
-     * ```jsx
-     * <Dialog themeColor="dark" />
-     * ```
-     */
-    themeColor?: 'primary' | 'dark' | 'light';
-}
-
-/**
- * Represents the PropsContext of the `Dialog` component.
- * Used for global configuration of all `Dialog` instances.
- */
-export declare const DialogPropsContext: React_2.Context<(p: DialogProps) => DialogProps>;
-
-/** @hidden */
-declare type Window_2 = WindowHandle;
-
-/**
- * Represents the [KendoReact Window component](https://www.telerik.com/kendo-react-ui/components/dialogs/window).
- *
- * Accepts properties of type [WindowProps](https://www.telerik.com/kendo-react-ui/components/dialogs/api/windowprops).
- * Obtaining the `ref` returns an object of type [WindowHandle](https://www.telerik.com/kendo-react-ui/components/dialogs/api/windowhandle).
- *
- * @remarks
- * Supported children components are: {@link WindowActionsBar}.
- */
-declare const Window_2: React_2.ForwardRefExoticComponent<WindowProps & React_2.RefAttributes<any>>;
-export { Window_2 as Window }
-
-/**
- * Returns the action bar of the Window.
- *
- * @returns React.ReactElement
- */
-export declare const WindowActionsBar: React_2.FunctionComponent<WindowActionsBarProps>;
-
-/**
- * Represents the props of the [KendoReact WindowActionsBar component](https://www.telerik.com/kendo-react-ui/components/dialogs/dialog).
- */
-declare interface WindowActionsBarProps {
-    /**
-     * Specifies the possible layouts of the action buttons ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/action-buttons)). Defaults to `end`.
-     */
-    layout?: ActionsLayout;
-    /**
-     * @hidden
-     */
-    children?: any;
-}
-
-export declare interface WindowActionsEvent extends BaseEvent<Window_2> {
-    /**
-     * The current stage state of the Window.
-     */
-    state?: 'DEFAULT' | 'FULLSCREEN' | 'MINIMIZED';
-}
-
-/**
- * Represent the `ref` of the Window component.
- */
-export declare interface WindowHandle extends Pick<WindowWithoutContext, keyof WindowWithoutContext> {
-    /**
-     * The Window element.
-     */
-    element?: HTMLDivElement | null;
-    /**
-     * **Deprecated.** Use `element` instead.
-     */
-    windowElement?: HTMLDivElement | null;
-}
-
-export declare interface WindowMoveEvent {
-    /**
-     * An event target.
-     */
-    target: Window_2;
-    /**
-     * A native DOM event.
-     */
-    nativeEvent: any;
-    /**
-     * Indicates that dragging is completed and that the user dropped the resize handler.
-     */
-    end: boolean;
-    /**
-     * Indicates that the move operation was initialized through dragging. If the Window is moved through the keyboard, the value will be `false`.
-     */
-    drag: boolean;
-    /**
-     * The new top value of the Window.
-     */
-    top: number;
-    /**
-     * The new left value of the Window.
-     */
-    left: number;
-    /**
-     * The new width value of the Window.
-     */
-    width: number;
-    /**
-     * The new height value of the Window.
-     */
-    height: number;
-}
-
-/**
- * Represents the props of the [KendoReact Window component](https://www.telerik.com/kendo-react-ui/components/dialogs/window).
- */
-export declare interface WindowProps {
-    /**
-     * Defines the container to which the Window will be appended. If set to `null`, the Window will be rendered without React Portal.
-     *
-     * @default parent element
-     *
-     * @example
-     * ```jsx
-     * <Window appendTo={document.body} />
-     * ```
-     */
-    appendTo?: HTMLElement | null;
-    /**
-     * Focus the Window container automatically when mounted.
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Window autoFocus={false} />
-     * ```
-     */
-    autoFocus?: boolean;
-    /**
-     * @hidden
-     */
-    children?: React.ReactNode;
-    /**
-     * Specifies if the Window will render the close button.
-     *
-     * @example
-     * ```jsx
-     * <Window closeButton={CustomCloseButton} />
-     * ```
-     */
-    closeButton?: React.ComponentType<any>;
-    /**
-     * Specifies if the Window stage will change on title double click.
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Window doubleClickStageChange={false} />
-     * ```
-     */
-    doubleClickStageChange?: boolean;
-    /**
-     * Specifies if the Window will be draggable ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-dragging)).
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Window draggable={true} />
-     * ```
-     */
-    draggable?: boolean;
-    /**
-     * Specifies the height of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-dimensions)). When set to `null`, the window is automatically sized to fit its content.
-     *
-     * @example
-     * ```jsx
-     * <Window height={500} />
-     * ```
-     */
-    height?: number | null;
-    /**
-     * Specifies the initial `left` value ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-positioning)). The Window will be in an uncontrolled mode.
-     *
-     * @example
-     * ```jsx
-     * <Window initialLeft={100} />
-     * ```
-     */
-    initialLeft?: number;
-    /**
-     * Specifies the initial `top` value ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/positioning-dragging#toc-positioning)). The component will be in an uncontrolled mode.
-     *
-     * @example
-     * ```jsx
-     * <Window initialTop={50} />
-     * ```
-     */
-    initialTop?: number;
-    /**
-     * Specifies the initial width of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-dimensions)). The component will be in an uncontrolled mode.
-     *
-     * @example
-     * ```jsx
-     * <Window initialWidth={300} />
-     * ```
-     */
-    initialWidth?: number;
-    /**
-     * Specifies the initial height of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-dimensions)). The component will be in an uncontrolled mode.
-     *
-     * @example
-     * ```jsx
-     * <Window initialHeight={200} />
-     * ```
-     */
-    initialHeight?: number | null;
-    /**
-     * Specifies the left coordinates of the Window.
-     *
-     * @example
-     * ```jsx
-     * <Window left={150} />
-     * ```
-     */
-    left?: number;
-    /**
-     * Specifies if the Window will render the maximize button.
-     *
-     * @example
-     * ```jsx
-     * <Window maximizeButton={CustomMaximizeButton} />
-     * ```
-     */
-    maximizeButton?: React.ComponentType<any>;
-    /**
-     * Specifies the minimum height of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-resizing)).
-     *
-     * @default 100
-     *
-     * @example
-     * ```jsx
-     * <Window minHeight={100} />
-     * ```
-     */
-    minHeight?: number;
-    /**
-     * Specifies the minimum width of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-resizing)).
-     *
-     * @default 120
-     *
-     * @example
-     * ```jsx
-     * <Window minWidth={100} />
-     * ```
-     */
-    minWidth?: number;
-    /**
-     * Specifies if the Window will render the minimize button.
-     *
-     * @example
-     * ```jsx
-     * <Window minimizeButton={CustomMinimizeButton} />
-     * ```
-     */
-    minimizeButton?: React.ComponentType<any>;
-    /**
-     * Specifies if the Window will be modal by rendering an overlay under the component.
-     *
-     * @default false
-     *
-     * @example
-     * ```jsx
-     * <Window modal={true} />
-     * ```
-     */
-    modal?: boolean;
-    /**
-     * Specifies if the Window will be resizable ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/dimensions-resizing#toc-resizing)).
-     *
-     * @default true
-     *
-     * @example
-     * ```jsx
-     * <Window resizable={true} />
-     * ```
-     */
-    resizable?: boolean;
-    /**
-     * Specifies if the Window will render the restore button.
-     *
-     * @example
-     * ```jsx
-     * <Window restoreButton={CustomRestoreButton} />
-     * ```
-     */
-    restoreButton?: React.ComponentType<any>;
-    /**
-     * Specifies if the Window content will update during resizing.
-     *
-     * @example
-     * ```jsx
-     * <Window shouldUpdateOnDrag={true} />
-     * ```
-     */
-    shouldUpdateOnDrag?: boolean;
-    /**
-     * Specifies the title of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/title)).
-     *
-     * @example
-     * ```jsx
-     * <Window title="My Window" />
-     * ```
-     */
-    title?: React.ReactNode | string;
-    /**
-     * Specifies the top coordinates of the Window.
-     *
-     * @example
-     * ```jsx
-     * <Window top={100} />
-     * ```
-     */
-    top?: number;
-    /**
-     * Specifies the width of the Window.
-     *
-     * @example
-     * ```jsx
-     * <Window width={400} />
-     * ```
-     */
-    width?: number;
-    /**
-     * Controls the state of the Window ([see example](https://www.telerik.com/kendo-react-ui/components/dialogs/window/minimizing-fullscreen)).
-     *
-     * The supported values are:
-     * * `DEFAULT`
-     * * `MINIMIZED`
-     * * `FULLSCREEN`
-     *
-     * @example
-     * ```jsx
-     * <Window stage="DEFAULT" />
-     * ```
-     */
-    stage?: windowStage | string;
-    /**
-     * Set styles to the Window element.
-     *
-     * @example
-     * ```jsx
-     * <Window style={{ backgroundColor: 'red' }} />
-     * ```
-     */
-    style?: React.CSSProperties;
-    /**
-     * Set styles to the Window overlay element rendered when the `modal` prop is enabled.
-     *
-     * @example
-     * ```jsx
-     * <Window overlayStyle={{ opacity: 0.5 }} />
-     * ```
-     */
-    overlayStyle?: React.CSSProperties;
-    /**
-     * Sets a class of the Window DOM element.
-     *
-     * @example
-     * ```jsx
-     * <Window className="custom-class" />
-     * ```
-     */
-    className?: string;
-    /**
-     * Configures the `themeColor` of the Window.
-     *
-     * The available options are:
-     * - primary
-     * - dark
-     * - light
-     *
-     * @example
-     * ```jsx
-     * <Window themeColor="dark" />
-     * ```
-     */
-    themeColor?: 'primary' | 'dark' | 'light';
-    /**
-     * Fires when the **Close** button in the title is clicked or when the `Esc` button is pressed.
-     *
-     * @example
-     * ```jsx
-     * <Window onClose={(event) => console.log('Window closed', event)} />
-     * ```
-     */
-    onClose?: (event: WindowActionsEvent) => void;
-    /**
-     * Fires when the Window is dragged.
-     *
-     * @example
-     * ```jsx
-     * <Window onMove={(event) => console.log('Window moved', event)} />
-     * ```
-     */
-    onMove?: (event: WindowMoveEvent) => void;
-    /**
-     * Fires when the `DEFAULT`, `FULLSCREEN`, or `MINIMIZED` state of the Window is changed.
-     *
-     * @example
-     * ```jsx
-     * <Window onStageChange={(event) => console.log('Stage changed', event)} />
-     * ```
-     */
-    onStageChange?: (event: WindowActionsEvent) => void;
-    /**
-     * Fires when the Window resizes.
-     *
-     * @example
-     * ```jsx
-     * <Window onResize={(event) => console.log('Window resized', event)} />
-     * ```
-     */
-    onResize?: (event: WindowMoveEvent) => void;
-    /**
-     * Sets the `id` attribute value of the wrapper element of the Window.
-     *
-     * @example
-     * ```jsx
-     * <Window id="my-window" />
-     * ```
-     */
-    id?: string;
-}
-
-/**
- * Represents the PropsContext of the `Window` component.
- * Used for global configuration of all `Window` instances.
- */
-export declare const WindowPropsContext: React_2.Context<(p: WindowProps) => WindowProps>;
-
-declare enum windowStage {
-    DEFAULT = "DEFAULT",
-    FULLSCREEN = "FULLSCREEN",
-    MINIMIZED = "MINIMIZED"
-}
-
-declare interface WindowState {
-    stage: windowStage | string;
-    isDragging: boolean;
-    top: number;
-    left: number;
-    width: number;
-    height: number | null;
-    focused: boolean;
-    zIndex: number;
-}
-
-/** @hidden */
-export declare class WindowWithoutContext extends React_2.Component<WindowProps, WindowState> {
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        width: default_2.Requireable<number>;
-        height: default_2.Requireable<number>;
-        left: default_2.Requireable<number>;
-        top: default_2.Requireable<number>;
-        initialWidth: default_2.Requireable<number>;
-        initialHeight: default_2.Requireable<number>;
-        initialLeft: default_2.Requireable<number>;
-        initialTop: default_2.Requireable<number>;
-        minWidth: default_2.Requireable<number>;
-        minHeight: default_2.Requireable<number>;
-        resizable: default_2.Requireable<boolean>;
-        draggable: default_2.Requireable<boolean>;
-        title: default_2.Requireable<any>;
-        shouldUpdateOnDrag: default_2.Requireable<boolean>;
-        stage: default_2.Requireable<string>;
-        className: default_2.Requireable<string>;
-        id: default_2.Requireable<string>;
-        style: default_2.Requireable<object>;
-        overlayStyle: default_2.Requireable<object>;
-        autoFocus: default_2.Requireable<boolean>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        minWidth: number;
-        minHeight: number;
-        resizable: boolean;
-        draggable: boolean;
-        modal: boolean;
-        doubleClickStageChange: boolean;
-        autoFocus: boolean;
-    };
-    /**
-     * @hidden
-     */
-    static contextType: React_2.Context<ZIndexContextType>;
-    /**
-     * @hidden
-     */
-    context: React_2.ContextType<typeof ZIndexContext>;
-    /**
-     * **Deprecated.** Use `element` instead.
-     */
-    windowElement?: HTMLDivElement | null;
-    /**
-     * The Window element.
-     */
-    element?: HTMLDivElement | null;
-    /**
-     * @hidden
-     */
-    windowTitle?: any;
-    /**
-     * The draggable handle for the Window component.
-     */
-    draggable: Draggable | null;
-    private windowCoordinatesState?;
-    private offSetCoordinates?;
-    private get _id();
-    private titleId;
-    private _blurTimeout?;
-    private mounted;
-    private activeElement;
-    constructor(props: WindowProps);
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentWillUnmount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(prevProps: WindowProps): void;
-    /**
-     * @hidden
-     */
-    onKeyDown: React_2.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * @hidden
-     */
-    onPress: (data: any) => void;
-    /**
-     * @hidden
-     */
-    onDrag: (data: any) => void;
-    /**
-     * @hidden
-     */
-    onRelease: (data: any) => void;
-    /**
-     * @hidden
-     */
-    onFocus: () => void;
-    /**
-     * @hidden
-     */
-    onBlur: () => void;
-    /**
-     * @hidden
-     */
-    render(): JSX.Element | null;
-    private get top();
-    private get left();
-    private get width();
-    private get height();
-    private get windowStage();
-    private getInitialTop;
-    private getInitialLeft;
-    private getInitialWidth;
-    private getInitialHeight;
-    private handleMinimize;
-    private handleFullscreen;
-    private handleRestore;
-    private handleCloseWindow;
-    private handleDoubleClick;
-    private handleResize;
-    private dispatchMoveEvent;
-    private handleBrowserWindowResize;
-    private getActionBar;
-    private getContent;
-    private getCurrentZIndex;
-    private getDocument;
-    private getWindow;
-    private generateTitleId;
-}
-
-export { }
+import { Dialog, DialogHandle, DialogPropsContext } from './Dialog.js';
+import { DialogActionsBar } from './DialogActionsBar.js';
+import { Window, WindowHandle, WindowPropsContext, WindowWithoutContext } from './Window.js';
+import { WindowProps } from './WindowProps.js';
+import { WindowActionsBar } from './WindowActionsBar.js';
+import { DialogCloseEvent, WindowActionsEvent, WindowMoveEvent } from './events.js';
+import { ActionsLayout } from './models/actions-layout.js';
+import { DialogProps } from './DialogProps.js';
+export { Dialog, DialogProps, DialogActionsBar, DialogCloseEvent, DialogHandle, DialogPropsContext, Window, WindowProps, WindowActionsBar, WindowActionsEvent, WindowMoveEvent, WindowHandle, WindowPropsContext, WindowWithoutContext, ActionsLayout };