@broxus/react-uikit 0.1.3 → 0.2.0

package/dist/esm/components/Control/TextArea/index.d.ts

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import ResizableTextArea from 'rc-textarea/lib/ResizableTextArea';
-import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea';
-import type { InputFocusOptions } from '../Input';
-import type { SizeType, StateType } from '../types';
+import { type TextAreaProps as RcTextAreaProps, type TextAreaRef } from 'rc-textarea';
+import { type SizeType, type StateType } from '../../Control/types';
 import './index.scss';
 interface ShowCountProps {
     formatter: (args: {
@@ -16,10 +14,5 @@ export interface TextAreaProps extends RcTextAreaProps {
     size?: SizeType;
     state?: StateType;
 }
-export interface TextAreaRef {
-    focus: (options?: InputFocusOptions) => void;
-    blur: () => void;
-    resizableTextArea?: ResizableTextArea;
-}
-export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>;
+export declare const TextArea: React.MemoExoticComponent<React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<TextAreaRef>>>;
 export {};

package/dist/esm/components/Control/TextArea/index.js

@@ -2,48 +2,39 @@ import * as React from 'react';
 import classNames from 'classnames';
 import RcTextArea from 'rc-textarea';
 import omit from 'rc-util/lib/omit';
-import { fixControlledValue } from '../Input';
+import { useConfig } from '../../ConfrigProvider';
+import { fixControlledValue } from '../../Control/Input';
 import './index.scss';
 function fixEmojiLength(value, maxLength) {
     return [...(value || '')].slice(0, maxLength).join('');
 }
-export const TextArea = React.forwardRef((props, ref) => {
-    const { dir, disabled, maxLength, readOnly, state, className, showCount, onPressEnter, ...restProps } = props;
-    const inputRef = React.useRef(null);
+/* eslint-disable jsx-a11y/label-has-associated-control */
+const ForwardedTextArea = React.forwardRef((props, ref) => {
+    const config = useConfig();
+    const { className, dir, disabled, maxLength, prefixCls = config.prefixCls, readOnly, showCount, state, onPressEnter, ...restProps } = props;
     const hasMaxLength = Number(maxLength) > 0;
     const [compositing, setCompositing] = React.useState(false);
     const [focused, setFocused] = React.useState(false);
     const [internalValue, setInternalValue] = React.useState(restProps.value ?? restProps.defaultValue);
-    React.useImperativeHandle(ref, () => ({
-        blur() {
-            inputRef.current?.blur();
-        },
-        focus() {
-            inputRef.current?.focus();
-        },
-        getInputRef() {
-            return inputRef;
-        },
-    }));
-    const setValue = (value, callback) => {
+    const setValue = React.useCallback((value, callback) => {
         if (restProps.value === undefined) {
             setInternalValue(value);
             callback?.();
         }
-    };
-    const onChange = event => {
+    }, [restProps.value]);
+    const onChange = React.useCallback(event => {
         let { value } = event.target;
         if (!compositing && hasMaxLength) {
             value = fixEmojiLength(value, maxLength ?? 0);
         }
         setValue(value);
         restProps.onChange?.(event);
-    };
-    const onCompositionStart = event => {
+    }, [compositing, hasMaxLength, maxLength, restProps, setValue]);
+    const onCompositionStart = React.useCallback(event => {
         setCompositing(true);
         restProps.onCompositionStart?.(event);
-    };
-    const onCompositionEnd = event => {
+    }, [restProps]);
+    const onCompositionEnd = React.useCallback(event => {
         setCompositing(false);
         let { value } = event.currentTarget;
         if (hasMaxLength) {
@@ -55,35 +46,34 @@ export const TextArea = React.forwardRef((props, ref) => {
             onChange(event);
         }
         restProps.onCompositionEnd?.(event);
-    };
-    const onBlur = event => {
+    }, [hasMaxLength, internalValue, maxLength, onChange, restProps, setValue]);
+    const onBlur = React.useCallback(event => {
         setFocused(false);
         restProps.onBlur?.(event);
-    };
-    const onFocus = event => {
+    }, [restProps]);
+    const onFocus = React.useCallback(event => {
         setFocused(true);
         restProps.onFocus?.(event);
-    };
-    const onKeyDown = event => {
+    }, [restProps]);
+    const onKeyDown = React.useCallback(event => {
         if (onPressEnter && event.keyCode === 13) {
             onPressEnter(event);
         }
         restProps.onKeyDown?.(event);
-    };
-    const wrapperClasses = React.useMemo(() => classNames([
-        'uk-control',
-        'uk-control-textarea',
-    ], {
-        [`uk-control-${state}`]: state,
-        'uk-control-rtl': dir === 'rtl',
-        'uk-control-textarea-show-count': showCount !== undefined,
-        'uk-disabled': disabled,
-        'uk-focused': focused,
-        'uk-readonly': readOnly,
-    }, className), [className, dir, disabled, focused, readOnly, state]);
+    }, [onPressEnter, restProps]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'textarea'), [config, prefixCls]);
+    const controlCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'control'), [config, prefixCls]);
+    const wrapperClasses = React.useMemo(() => classNames([controlCls, `${controlCls}-textarea`], {
+        [`${controlCls}-${state}`]: state,
+        [`${controlCls}-rtl`]: dir === 'rtl',
+        [`${controlCls}-textarea-show-count`]: showCount !== undefined,
+        [`${prefixCls}-disabled`]: disabled,
+        [`${prefixCls}-focused`]: focused,
+        [`${prefixCls}-readonly`]: readOnly,
+    }, className), [className, controlCls, dir, disabled, focused, prefixCls, readOnly, showCount, state]);
     const inputProps = React.useMemo(() => ({
         ...omit(restProps, ['allowClear', 'size']),
-        prefixCls: 'uk-textarea',
+        prefixCls: rootCls,
         // eslint-disable-next-line sort-keys
         onBlur,
         onChange,
@@ -91,11 +81,20 @@ export const TextArea = React.forwardRef((props, ref) => {
         onCompositionStart,
         onFocus,
         onKeyDown,
-    }), []);
+    }), [
+        onBlur,
+        onChange,
+        onCompositionEnd,
+        onCompositionStart,
+        onFocus,
+        onKeyDown,
+        restProps,
+        rootCls,
+    ]);
     let value = fixControlledValue(internalValue);
-    if (!compositing
-        && hasMaxLength
-        && (restProps.value === null || restProps.value === undefined)) {
+    if (!compositing &&
+        hasMaxLength &&
+        (restProps.value === null || restProps.value === undefined)) {
         value = fixEmojiLength(value, maxLength ?? 0);
     }
     let dataCount;
@@ -110,6 +109,11 @@ export const TextArea = React.forwardRef((props, ref) => {
     }
     const dataCountAttribute = dataCount ? { 'data-count': dataCount } : {};
     return (React.createElement("label", { className: wrapperClasses, htmlFor: inputProps.id, ...dataCountAttribute },
-        React.createElement("span", { className: "uk-control-input" },
-            React.createElement(RcTextArea, { ...inputProps, value: value, ref: inputRef }))));
+        React.createElement("span", { className: `${controlCls}-input` },
+            React.createElement(RcTextArea, { ...inputProps, value: value, ref: ref }))));
 });
+export const TextArea = React.memo(ForwardedTextArea);
+if (process.env.NODE_ENV !== 'production') {
+    ForwardedTextArea.displayName = 'TextArea.Forwarded';
+    TextArea.displayName = 'TextArea';
+}

package/dist/esm/components/Control/TextArea/index.scss

@@ -23,7 +23,7 @@
    Component: Textarea
  ========================================================================== */
 
-.uk-control-textarea {
+.uk-control.uk-control-textarea {
     height: auto;
     max-width: 100%;
     padding: 0;

package/dist/esm/components/Control/index.d.ts

@@ -1,7 +1,7 @@
 import './index.scss';
-export * from './Checkbox';
-export * from './Input';
-export * from './Radio';
-export * from './Select';
-export * from './TextArea';
-export * from './types';
+export * from '../Control/Checkbox';
+export * from '../Control/Input';
+export * from '../Control/Radio';
+export * from '../Control/Select';
+export * from '../Control/TextArea';
+export * from '../Control/types';

package/dist/esm/components/Control/index.js

@@ -1,7 +1,7 @@
 import './index.scss';
-export * from './Checkbox';
-export * from './Input';
-export * from './Radio';
-export * from './Select';
-export * from './TextArea';
-export * from './types';
+export * from '../Control/Checkbox';
+export * from '../Control/Input';
+export * from '../Control/Radio';
+export * from '../Control/Select';
+export * from '../Control/TextArea';
+export * from '../Control/types';

package/dist/esm/components/Control/types.d.ts

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import type { Direction } from '../../types';
-export declare type LiteralUnion<T extends U, U> = T | (U & {});
-export declare type SizeType = 'xsmall' | 'small' | 'medium' | 'large';
-export declare type StateType = 'success' | 'danger' | 'blank';
-export declare type ValueType = string | number;
-export declare type ControlType = LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
+import type * as React from 'react';
+import { type Direction } from '../../types';
+export type LiteralUnion<T extends U, U> = T | (U & {});
+export type SizeType = 'xsmall' | 'small' | 'medium' | 'large';
+export type StateType = 'success' | 'danger' | 'blank';
+export type ValueType = string | number;
+export type ControlType = LiteralUnion<'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week', string>;
 export interface ControlProps<T> {
     addonAfter?: React.ReactNode;
     addonBefore?: React.ReactNode;
@@ -12,6 +12,7 @@ export interface ControlProps<T> {
     defaultValue?: T;
     direction?: Direction;
     prefix?: React.ReactNode;
+    prefixCls?: string;
     size?: SizeType;
     state?: StateType;
     suffix?: React.ReactNode;

package/dist/esm/components/Cover/index.d.ts

@@ -3,6 +3,7 @@ import './index.scss';
 export interface CoverProps extends React.HTMLAttributes<HTMLDivElement> {
     automute?: boolean;
     height?: number;
+    prefixCls?: string;
     width?: number;
 }
-export declare function Cover(props: CoverProps): JSX.Element;
+export declare const Cover: React.MemoExoticComponent<(props: CoverProps) => JSX.Element>;

package/dist/esm/components/Cover/index.js

@@ -1,26 +1,28 @@
 import * as React from 'react';
 import { debounce, Dimensions } from '@broxus/js-utils';
 import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
 import './index.scss';
-export function Cover(props) {
-    const { automute = true, className, children, height, width, ...restProps } = props;
+export const Cover = React.memo((props) => {
+    const config = useConfig();
+    const { automute = true, className, children, height, prefixCls = config.prefixCls, width, ...restProps } = props;
     const container = React.useRef(null);
     const coveringElement = React.useRef(null);
-    const resize = () => {
+    const resize = React.useCallback(() => {
         if (coveringElement.current == null || container.current == null) {
             return;
         }
         const { current: el } = coveringElement;
         const { current: wrapper } = container;
         const { height: h, width: w } = Dimensions.cover({
-            height: height
-                || el.naturalHeight
-                || el.videoHeight
-                || el.clientHeight,
-            width: width
-                || el.naturalWidth
-                || el.videoWidth
-                || el.clientWidth,
+            height: height ||
+                el.naturalHeight ||
+                el.videoHeight ||
+                el.clientHeight,
+            width: width ||
+                el.naturalWidth ||
+                el.videoWidth ||
+                el.clientWidth,
         }, {
             height: wrapper.offsetHeight + (wrapper.offsetHeight % 2 ? 1 : 0),
             width: wrapper.offsetWidth + (wrapper.offsetWidth % 2 ? 1 : 0),
@@ -30,13 +32,15 @@ export function Cover(props) {
         }
         el.style.height = `${h}px`;
         el.style.width = `${w}px`;
-    };
+    }, [height, width]);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'cover'), [config, prefixCls]);
     const childrenWithCoverClass = React.Children.map(children, (child, idx) => {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
+                // @ts-ignore
                 ref: idx === 0 ? coveringElement : null,
                 // eslint-disable-next-line sort-keys
-                className: 'uk-cover',
+                className: rootCls,
                 onLoadedMetadata: () => {
                     resize();
                 },
@@ -44,7 +48,8 @@ export function Cover(props) {
                 onLoad: () => {
                     if (automute) {
                         try {
-                            coveringElement.current?.contentWindow?.postMessage('{"event": "command","method":"setVolume", "value":0}', '*');
+                            ;
+                            coveringElement.current?.contentWindow?.postMessage('{"event": "command", "method": "setVolume", "value": 0}', '*');
                         }
                         catch (e) { }
                     }
@@ -62,6 +67,9 @@ export function Cover(props) {
             window.removeEventListener('resize', debounced);
             window.removeEventListener('orientationchange', debounced);
         };
-    }, []);
-    return (React.createElement("div", { ref: container, className: classNames('uk-cover-container', className), ...restProps }, childrenWithCoverClass));
+    }, [resize]);
+    return (React.createElement("div", { ref: container, className: classNames(`${rootCls}-container`, className), ...restProps }, childrenWithCoverClass));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Cover.displayName = 'Cover';
 }

package/dist/esm/components/DescriptionList/Description.d.ts

@@ -1,7 +1,2 @@
 import * as React from 'react';
-declare type Props = React.HTMLAttributes<HTMLElement>;
-export declare function Description(props: Props): JSX.Element;
-export declare namespace Description {
-    var displayName: string;
-}
-export {};
+export declare const Description: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => JSX.Element>;

package/dist/esm/components/DescriptionList/Description.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
-export function Description(props) {
-    return React.createElement("dd", { ...props });
-}
+export const Description = React.memo((props) => (React.createElement("dd", { ...props })));
 if (process.env.NODE_ENV !== 'production') {
     Description.displayName = 'DescriptionList.Description';
 }

package/dist/esm/components/DescriptionList/DescriptionList.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElement> {
     divided?: boolean;
+    prefixCls?: string;
 }
-export declare function DescriptionList(props: DescriptionListProps): JSX.Element;
+export declare const DescriptionList: React.MemoExoticComponent<(props: DescriptionListProps) => JSX.Element>;

package/dist/esm/components/DescriptionList/DescriptionList.js

@@ -1,8 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-export function DescriptionList(props) {
-    const { className, divided, ...restProps } = props;
-    return (React.createElement("dl", { className: classNames('uk-description-list', {
-            'uk-description-list-divider': divided,
+import { useConfig } from '../ConfrigProvider';
+export const DescriptionList = React.memo((props) => {
+    const config = useConfig();
+    const { className, divided, prefixCls = config.prefixCls, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'description-list'), [config, prefixCls]);
+    return (React.createElement("dl", { className: classNames(rootCls, {
+            [`${rootCls}-divider`]: divided,
         }, className), ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    DescriptionList.displayName = 'DescriptionList';
 }

package/dist/esm/components/DescriptionList/Term.d.ts

@@ -1,7 +1,2 @@
 import * as React from 'react';
-declare type Props = React.HTMLAttributes<HTMLElement>;
-export declare function Term(props: Props): JSX.Element;
-export declare namespace Term {
-    var displayName: string;
-}
-export {};
+export declare const Term: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => JSX.Element>;

package/dist/esm/components/DescriptionList/Term.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
-export function Term(props) {
-    return React.createElement("dt", { ...props });
-}
+export const Term = React.memo((props) => React.createElement("dt", { ...props }));
 if (process.env.NODE_ENV !== 'production') {
     Term.displayName = 'DescriptionList.Term';
 }

package/dist/esm/components/DescriptionList/index.d.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { Description } from './Description';
-import { Term } from './Term';
-import type { DescriptionListProps } from './DescriptionList';
+import type * as React from 'react';
+import { Description } from '../DescriptionList/Description';
+import { type DescriptionListProps } from '../DescriptionList/DescriptionList';
+import { Term } from '../DescriptionList/Term';
 import './index.scss';
 export type { DescriptionListProps };
-export interface CompoundedDescriptionList extends React.FunctionComponent<DescriptionListProps> {
+export interface DescriptionList extends React.MemoExoticComponent<React.FunctionComponent<DescriptionListProps>> {
     Description: typeof Description;
     Term: typeof Term;
 }
-export declare const DescriptionList: CompoundedDescriptionList;
+export declare const DescriptionList: DescriptionList;

package/dist/esm/components/DescriptionList/index.js

@@ -1,6 +1,6 @@
-import { DescriptionList as InnerDescriptionList } from './DescriptionList';
-import { Description } from './Description';
-import { Term } from './Term';
+import { Description } from '../DescriptionList/Description';
+import { DescriptionList as InnerDescriptionList, } from '../DescriptionList/DescriptionList';
+import { Term } from '../DescriptionList/Term';
 import './index.scss';
 export const DescriptionList = InnerDescriptionList;
 DescriptionList.Description = Description;

package/dist/esm/components/Divider/index.d.ts

@@ -2,7 +2,8 @@ import * as React from 'react';
 import './index.scss';
 export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>, 'children'> {
     icon?: boolean;
+    prefixCls?: string;
     small?: boolean;
     vertical?: boolean;
 }
-export declare function Divider(props: DividerProps): JSX.Element;
+export declare const Divider: React.MemoExoticComponent<(props: DividerProps) => JSX.Element>;

package/dist/esm/components/Divider/index.js

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import classNames from 'classnames';
+import { useConfig } from '../ConfrigProvider';
 import './index.scss';
-export function Divider(props) {
-    const { className, icon, small, vertical, ...restProps } = props;
+export const Divider = React.memo((props) => {
+    const config = useConfig();
+    const { className, icon, prefixCls = config.prefixCls, small, vertical, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'divider'), [config, prefixCls]);
     return (React.createElement("hr", { className: classNames({
-            'uk-divider-icon': icon && !small && !vertical,
-            'uk-divider-small': small && !icon && !vertical,
-            'uk-divider-vertical': vertical && !icon && !small,
+            [`${rootCls}-icon`]: icon && !small && !vertical,
+            [`${rootCls}-small`]: small && !icon && !vertical,
+            [`${rootCls}-vertical`]: vertical && !icon && !small,
         }, className), ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Divider.displayName = 'Divider';
 }

package/dist/esm/components/Dotnav/Dotnav.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 export interface DotnavProps extends React.HTMLAttributes<HTMLUListElement> {
+    prefixCls?: string;
     vertical?: boolean;
 }
-export declare function Dotnav(props: DotnavProps): JSX.Element;
+export declare const Dotnav: React.MemoExoticComponent<(props: DotnavProps) => JSX.Element>;

package/dist/esm/components/Dotnav/Dotnav.js

@@ -1,8 +1,14 @@
 import * as React from 'react';
 import classNames from 'classnames';
-export function Dotnav(props) {
-    const { className, vertical, ...restProps } = props;
-    return (React.createElement("ul", { className: classNames('uk-dotnav', {
-            'uk-dotnav-vertical': vertical,
+import { useConfig } from '../ConfrigProvider';
+export const Dotnav = React.memo((props) => {
+    const config = useConfig();
+    const { className, prefixCls = config.prefixCls, vertical, ...restProps } = props;
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'dotnav'), [config, prefixCls]);
+    return (React.createElement("ul", { className: classNames(rootCls, {
+            [`${rootCls}-vertical`]: vertical,
         }, className), ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    Dotnav.displayName = 'Dotnav';
 }

package/dist/esm/components/Dotnav/Item.d.ts

@@ -2,7 +2,4 @@ import * as React from 'react';
 export interface DotnavItemProps extends Omit<React.LiHTMLAttributes<HTMLLIElement>, 'children'> {
     isActive?: boolean;
 }
-export declare function Item(props: DotnavItemProps): JSX.Element;
-export declare namespace Item {
-    var displayName: string;
-}
+export declare const Item: React.MemoExoticComponent<(props: DotnavItemProps) => JSX.Element>;

package/dist/esm/components/Dotnav/Item.js

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Button } from '../Button/Button';
-export function Item(props) {
+import { Button } from '../Button';
+import { useConfig } from '../ConfrigProvider';
+export const Item = React.memo((props) => {
+    const config = useConfig();
     const { className, isActive, onClick, ...restProps } = props;
     return (React.createElement("li", { className: classNames({
-            'uk-active': isActive,
+            [`${config.prefixCls}-active`]: isActive,
         }, className), ...restProps },
         React.createElement(Button, { type: "text", onClick: onClick })));
-}
+});
 if (process.env.NODE_ENV !== 'production') {
     Item.displayName = 'Dotnav.Item';
 }

package/dist/esm/components/Dotnav/index.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import { Item } from './Item';
-import type { DotnavProps } from './Dotnav';
+import type * as React from 'react';
+import { type DotnavProps } from '../Dotnav/Dotnav';
+import { Item } from '../Dotnav/Item';
 import './index.scss';
 export type { DotnavProps };
-export interface CompoundedDotnav extends React.FunctionComponent<DotnavProps> {
+export interface Dotnav extends React.MemoExoticComponent<React.FunctionComponent<DotnavProps>> {
     Item: typeof Item;
 }
-export declare const Dotnav: CompoundedDotnav;
+export declare const Dotnav: Dotnav;

package/dist/esm/components/Dotnav/index.js

@@ -1,5 +1,5 @@
-import { Dotnav as InnerDotnav } from './Dotnav';
-import { Item } from './Item';
+import { Dotnav as InnerDotnav } from '../Dotnav/Dotnav';
+import { Item } from '../Dotnav/Item';
 import './index.scss';
 export const Dotnav = InnerDotnav;
 Dotnav.Item = Item;

package/dist/esm/components/Drawer/index.d.ts

@@ -1,18 +1,10 @@
 import * as React from 'react';
-import type { GetContainer } from 'rc-util/lib/PortalWrapper';
-import type { Direction } from '../../types';
+import { type DrawerProps as RcDrawerProps } from 'rc-drawer';
+import { type Direction } from '../../types';
 import './index.scss';
-declare type DrawerRef = {
-    push(): void;
-    pull(): void;
-};
-declare type EventType = React.KeyboardEvent | React.MouseEvent;
-declare type LevelMove = number | [number, number];
-declare const PlacementTypes: ["top", "right", "bottom", "left"];
-declare type PlacementType = typeof PlacementTypes[number];
-declare const SizeTypes: ["default", "large"];
-declare type SizeType = typeof SizeTypes[number];
-declare type TriggerArguments = {
+declare const SizeTypes: readonly ["default", "large"];
+type SizeType = (typeof SizeTypes)[number];
+type TriggerArguments = {
     collapse: () => void;
     expand: () => void;
     isOpen: boolean;
@@ -20,43 +12,14 @@ declare type TriggerArguments = {
 export interface PushState {
     distance: string | number;
 }
-export interface DrawerProps {
-    afterVisibleChange?: (visible: boolean) => void;
+export interface DrawerProps extends RcDrawerProps {
     animation?: 'push' | 'reveal';
-    autoFocus?: boolean;
-    children?: React.ReactNode;
-    className?: string;
     closable?: boolean;
     closeIcon?: React.ReactNode;
     defaultOpen?: boolean;
-    destroyOnClose?: boolean;
     direction?: Direction;
-    duration?: string;
-    ease?: string;
-    forceRender?: boolean;
-    getContainer?: GetContainer;
-    handler?: React.ReactElement | null | false;
-    height?: number | string;
-    keyboard?: boolean;
-    level?: string | string[] | null;
-    levelMove?: LevelMove | ((event: {
-        target: HTMLElement;
-        open: boolean;
-    }) => LevelMove);
-    maskClosable?: boolean;
-    maskStyle?: React.CSSProperties;
-    open?: boolean;
-    placement?: PlacementType;
-    prefixCls?: string;
-    push?: boolean | PushState;
-    showMask?: boolean;
     size?: SizeType;
-    style?: React.CSSProperties;
     trigger?: (args: TriggerArguments) => JSX.Element;
-    width?: number | string;
-    wrapperClassName?: string;
-    zIndex?: number;
-    onClose?: (event: EventType) => void;
 }
-export declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<DrawerRef>>;
+export declare const Drawer: React.MemoExoticComponent<(props: DrawerProps) => JSX.Element>;
 export {};