@broxus/react-uikit 0.1.2 → 0.2.0

package/dist/cjs/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/cjs/components/DescriptionList/Description.js

@@ -25,10 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Description = void 0;
 const React = __importStar(require("react"));
-function Description(props) {
-    return React.createElement("dd", { ...props });
-}
-exports.Description = Description;
+exports.Description = React.memo((props) => (React.createElement("dd", { ...props })));
 if (process.env.NODE_ENV !== 'production') {
-    Description.displayName = 'DescriptionList.Description';
+    exports.Description.displayName = 'DescriptionList.Description';
 }

package/dist/cjs/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/cjs/components/DescriptionList/DescriptionList.js

@@ -29,10 +29,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.DescriptionList = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-function DescriptionList(props) {
-    const { className, divided, ...restProps } = props;
-    return (React.createElement("dl", { className: (0, classnames_1.default)('uk-description-list', {
-            'uk-description-list-divider': divided,
+const ConfrigProvider_1 = require("../ConfrigProvider");
+exports.DescriptionList = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.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: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-divider`]: divided,
         }, className), ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.DescriptionList.displayName = 'DescriptionList';
 }
-exports.DescriptionList = DescriptionList;

package/dist/cjs/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/cjs/components/DescriptionList/Term.js

@@ -25,10 +25,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Term = void 0;
 const React = __importStar(require("react"));
-function Term(props) {
-    return React.createElement("dt", { ...props });
-}
-exports.Term = Term;
+exports.Term = React.memo((props) => React.createElement("dt", { ...props }));
 if (process.env.NODE_ENV !== 'production') {
-    Term.displayName = 'DescriptionList.Term';
+    exports.Term.displayName = 'DescriptionList.Term';
 }

package/dist/cjs/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/cjs/components/DescriptionList/index.js

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DescriptionList = void 0;
-const DescriptionList_1 = require("./DescriptionList");
-const Description_1 = require("./Description");
-const Term_1 = require("./Term");
+const Description_1 = require("../DescriptionList/Description");
+const DescriptionList_1 = require("../DescriptionList/DescriptionList");
+const Term_1 = require("../DescriptionList/Term");
 require("./index.scss");
 exports.DescriptionList = DescriptionList_1.DescriptionList;
 exports.DescriptionList.Description = Description_1.Description;

package/dist/cjs/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/cjs/components/Divider/index.js

@@ -29,13 +29,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Divider = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
 require("./index.scss");
-function Divider(props) {
-    const { className, icon, small, vertical, ...restProps } = props;
+exports.Divider = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.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: (0, classnames_1.default)({
-            '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') {
+    exports.Divider.displayName = 'Divider';
 }
-exports.Divider = Divider;

package/dist/cjs/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/cjs/components/Dotnav/Dotnav.js

@@ -29,10 +29,15 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dotnav = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-function Dotnav(props) {
-    const { className, vertical, ...restProps } = props;
-    return (React.createElement("ul", { className: (0, classnames_1.default)('uk-dotnav', {
-            'uk-dotnav-vertical': vertical,
+const ConfrigProvider_1 = require("../ConfrigProvider");
+exports.Dotnav = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.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: (0, classnames_1.default)(rootCls, {
+            [`${rootCls}-vertical`]: vertical,
         }, className), ...restProps }));
+});
+if (process.env.NODE_ENV !== 'production') {
+    exports.Dotnav.displayName = 'Dotnav';
 }
-exports.Dotnav = Dotnav;

package/dist/cjs/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/cjs/components/Dotnav/Item.js

@@ -29,15 +29,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
 const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const Button_1 = require("../Button/Button");
-function Item(props) {
+const Button_1 = require("../Button");
+const ConfrigProvider_1 = require("../ConfrigProvider");
+exports.Item = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
     const { className, isActive, onClick, ...restProps } = props;
     return (React.createElement("li", { className: (0, classnames_1.default)({
-            'uk-active': isActive,
+            [`${config.prefixCls}-active`]: isActive,
         }, className), ...restProps },
         React.createElement(Button_1.Button, { type: "text", onClick: onClick })));
-}
-exports.Item = Item;
+});
 if (process.env.NODE_ENV !== 'production') {
-    Item.displayName = 'Dotnav.Item';
+    exports.Item.displayName = 'Dotnav.Item';
 }

package/dist/cjs/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/cjs/components/Dotnav/index.js

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dotnav = void 0;
-const Dotnav_1 = require("./Dotnav");
-const Item_1 = require("./Item");
+const Dotnav_1 = require("../Dotnav/Dotnav");
+const Item_1 = require("../Dotnav/Item");
 require("./index.scss");
 exports.Dotnav = Dotnav_1.Dotnav;
 exports.Dotnav.Item = Item_1.Item;

package/dist/cjs/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 {};

package/dist/cjs/components/Drawer/index.js

@@ -31,159 +31,60 @@ const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
 const classnames_1 = __importDefault(require("classnames"));
 const rc_drawer_1 = __importDefault(require("rc-drawer"));
+const ConfrigProvider_1 = require("../ConfrigProvider");
 const utils_1 = require("../../utils");
 require("./index.scss");
-const DrawerContext = React.createContext(null);
-const PlacementTypes = (0, js_utils_1.tuple)('top', 'right', 'bottom', 'left');
-const SizeTypes = (0, js_utils_1.tuple)('default', 'large');
+const SizeTypes = ['default', 'large'];
 const defaultPushState = { distance: 180 };
-exports.Drawer = React.forwardRef((props, ref) => {
-    const { animation, children, className, defaultOpen, destroyOnClose, direction, duration = 'var(--drawer-transition-duration)', ease = 'var(--ease-in-out-circ)', keyboard = true, level = null, maskClosable = true, open, placement = 'right', prefixCls = 'uk-drawer', push = defaultPushState, showMask = true, size = 'default', style, trigger, wrapperClassName, zIndex, ...restProps } = props;
-    const forceUpdate = (0, utils_1.useForceUpdate)();
-    const parentDrawer = React.useContext(DrawerContext);
-    const destroyClose = React.useRef(false);
-    const [internalPush, setPush] = React.useState(false);
+exports.Drawer = React.memo((props) => {
+    const config = (0, ConfrigProvider_1.useConfig)();
+    const { animation, children, className, defaultOpen, destroyOnClose, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size = 'default', rootClassName, trigger, ...restProps } = props;
     const [internalOpen, setOpen] = React.useState(defaultOpen);
-    // eslint-disable-next-line no-param-reassign
     const mergedOpen = open === undefined ? internalOpen : open;
-    React.useEffect(() => {
-        // fix: delete drawer in child and re-render, no push started.
-        // <Drawer>{show && <Drawer />}</Drawer>
-        if (mergedOpen && parentDrawer) {
-            parentDrawer.push();
-        }
-        return () => {
-            if (parentDrawer) {
-                parentDrawer.pull();
-                // parentDrawer = null
-            }
-        };
-    }, []);
-    React.useEffect(() => {
-        if (parentDrawer) {
-            if (mergedOpen) {
-                parentDrawer.push();
-                forceUpdate();
-            }
-            else {
-                parentDrawer.pull();
-                forceUpdate();
-            }
-        }
-    }, [mergedOpen]);
-    const drawerClassName = React.useMemo(() => (0, classnames_1.default)({
-        [`${prefixCls}-${size}`]: size !== undefined,
-        [`${prefixCls}-${animation}`]: animation !== undefined,
-        [`${prefixCls}-rtl`]: direction === 'rtl',
-        'no-mask': !showMask,
-    }, className), [prefixCls, size, animation, showMask, direction, className]);
-    const drawerWrapperClassName = React.useMemo(() => (0, classnames_1.default)(`${prefixCls}-container`, {
-        [`${prefixCls}-${animation}-container`]: animation !== undefined,
-    }, wrapperClassName), [prefixCls, animation, wrapperClassName]);
-    const operations = React.useMemo(() => ({
-        pull() {
-            if (push) {
-                setPush(false);
-                forceUpdate();
-            }
-        },
-        push() {
-            if (push) {
-                setPush(true);
-                forceUpdate();
-            }
-        },
-    }), [push]);
-    React.useImperativeHandle(ref, () => operations, [operations]);
-    const isDestroyOnClose = destroyOnClose && !mergedOpen;
-    const afterVisibleChange = (visible) => {
-        restProps.afterVisibleChange?.(visible);
+    const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'drawer'), [config, prefixCls]);
+    const drawerRootClassName = React.useMemo(() => (0, classnames_1.default)({
+        [`${rootCls}-${size}`]: size !== undefined,
+        [`${rootCls}-${animation}`]: animation !== undefined,
+        [`${rootCls}-rtl`]: direction === 'rtl',
+        'no-mask': !mask,
+    }, rootClassName), [rootCls, size, animation, mask, direction, rootClassName]);
+    const drawerWrapperClassName = React.useMemo(() => (0, classnames_1.default)(`${rootCls}-container`, {
+        [`${rootCls}-${animation}-container`]: animation !== undefined,
+    }), [rootCls, animation]);
+    const afterOpenChange = React.useCallback((visible) => {
+        restProps.afterOpenChange?.(visible);
         if (visible) {
+            (0, js_utils_1.addClass)(document.body, drawerWrapperClassName);
             (0, utils_1.addModalMode)();
         }
         else {
             (0, utils_1.removeModalMode)();
+            (0, js_utils_1.removeClass)(document.body, drawerWrapperClassName);
         }
-    };
-    const getRcDrawerStyle = () => {
-        // get drawer push width or height
-        const getPushTransform = (_placement) => {
-            let distance;
-            // noinspection SuspiciousTypeOfGuard
-            if (typeof push === 'boolean') {
-                distance = push ? defaultPushState.distance : 0;
-            }
-            else {
-                distance = push?.distance;
-            }
-            distance = parseFloat(String(distance || 0));
-            if (_placement === 'left' || _placement === 'right') {
-                return `translateX(${_placement === 'left' ? distance : -distance}px)`;
-            }
-            if (_placement === 'top' || _placement === 'bottom') {
-                return `translateY(${_placement === 'top' ? distance : -distance}px)`;
-            }
-            return '';
-        };
-        return {
-            transform: internalPush ? getPushTransform(placement) : undefined,
-            zIndex,
-            ...style,
-        };
-    };
-    const collapse = () => {
+    }, [drawerWrapperClassName, restProps]);
+    const collapse = React.useCallback(() => {
         setOpen(false);
-    };
-    const expand = () => {
+    }, []);
+    const expand = React.useCallback(() => {
         setOpen(true);
-    };
-    const onClose = (event) => {
+    }, []);
+    const onClose = React.useCallback((event) => {
         setOpen(false);
         restProps.onClose?.(event);
-    };
-    const onDestroyTransitionEnd = () => {
-        if (!isDestroyOnClose) {
-            return;
-        }
-        if (!mergedOpen) {
-            destroyClose.current = true;
-            forceUpdate();
-        }
-    };
-    const renderBody = () => {
-        if (destroyClose.current && !mergedOpen) {
-            return null;
-        }
-        destroyClose.current = false;
-        const containerStyle = {};
-        if (isDestroyOnClose) {
-            // Increase the opacity transition, delete children after closing.
-            containerStyle.opacity = 0;
-            containerStyle.transition = 'opacity var(--transition-duration)';
-        }
-        return (React.createElement("div", { className: `${prefixCls}-body-wrapper`, style: containerStyle, onTransitionEnd: onDestroyTransitionEnd },
-            React.createElement("div", { className: `${prefixCls}-body` }, children)));
-    };
-    return (React.createElement(DrawerContext.Provider, { value: operations },
+    }, [restProps]);
+    return (React.createElement(React.Fragment, null,
         trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
-        React.createElement(rc_drawer_1.default, { ...{
-                afterVisibleChange,
-                children,
-                className: drawerClassName,
-                defaultOpen,
-                duration,
-                ease,
-                handler: false,
-                keyboard,
-                level: (animation !== undefined && level == null) ? 'all' : level,
-                maskClosable,
-                open: mergedOpen,
-                placement,
-                prefixCls,
-                showMask,
-                style: getRcDrawerStyle(),
-                wrapperClassName: drawerWrapperClassName,
-                ...restProps,
-                onClose,
-            } }, renderBody())));
+        React.createElement(rc_drawer_1.default, { afterOpenChange: afterOpenChange, className: className, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+                motionDeadline: 200,
+                motionName: (0, utils_1.getMotionName)(prefixCls || config.prefixCls, 'fade'),
+            }, motion: motionPlacement => ({
+                motionAppear: true,
+                motionDeadline: 200,
+                motionEnter: true,
+                motionLeave: true,
+                motionName: (0, utils_1.getMotionName)(config.prefixCls, `slide-${motionPlacement}`),
+            }), open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, onClose: onClose, ...restProps }, children)));
 });
+if (process.env.NODE_ENV !== 'production') {
+    exports.Drawer.displayName = 'Drawer';
+}

package/dist/cjs/components/Drawer/index.scss

@@ -32,10 +32,8 @@
 
 .uk-drawer {
     height: 100%;
+    pointer-events: none;
     position: fixed;
-    transition: height 0s ease var(--drawer-transition-duration),
-        transform var(--drawer-transition-duration) var(--ease-in-out-circ),
-        width 0s ease var(--drawer-transition-duration);
     width: 0;
     z-index: var(--drawer-z-index);
     @if mixin-exists(hook-drawer) {
@@ -52,11 +50,6 @@
     transform: none !important;
 }
 
-.uk-drawer > * {
-    transition: box-shadow var(--drawer-transition-duration) var(--ease-in-out-circ),
-        transform var(--drawer-transition-duration) var(--ease-in-out-circ);
-}
-
 /* Reveal animation */
 .uk-drawer-reveal:not(.uk-drawer-open) .uk-drawer-content-wrapper {
     transform: none !important;
@@ -97,12 +90,18 @@
 .uk-drawer-content-wrapper {
     height: 100%;
     position: absolute;
+    transition: transform;
+    transition-duration: var(--drawer-transition-duration);
     width: 100%;
     @if mixin-exists(hook-drawer-content-wrapper) {
         @include hook-drawer-content-wrapper;
     }
 }
 
+.uk-drawer-content-wrapper-hidden {
+    display: none;
+}
+
 .uk-drawer-content {
     background-clip: padding-box;
     background-color: var(--drawer-content-background);
@@ -110,6 +109,7 @@
     height: 100%;
     outline: 0 none;
     overflow: visible;
+    pointer-events: auto;
     position: relative;
     width: 100%;
     z-index: 1;
@@ -144,7 +144,7 @@
 }
 
 
-// Side
+// Sides
 // ========================================================================
 
 /*
@@ -246,16 +246,14 @@
 // ========================================================================
 
 .uk-drawer-mask {
-    animation: uk-motion-fade var(--drawer-transition-duration) var(--ease-in-out-circ);
     background-color: var(--drawer-mask-background);
-    height: 0;
+    bottom: 0;
     left: 0;
     opacity: 0;
     pointer-events: none;
     position: absolute;
+    right: 0;
     top: 0;
-    transition: height 0s ease var(--drawer-transition-duration), opacity var(--drawer-transition-duration) linear;
-    width: 100%;
     @if mixin-exists(hook-drawer-mask) {
         @include hook-drawer-mask;
     }
@@ -265,7 +263,6 @@
     height: 100%;
     opacity: 1;
     pointer-events: auto;
-    transition: opacity var(--drawer-transition-duration) linear;
     @if mixin-exists(hook-drawer-mask-open) {
         @include hook-drawer-mask-open;
     }

package/dist/cjs/components/Drop/index.d.ts

@@ -1,11 +1,10 @@
 import * as React from 'react';
-import type { TriggerProps } from 'rc-trigger';
-import type { ActionType, AlignType, AnimationType, BuildInPlacements } from 'rc-trigger/lib/interface';
+import { type BuildInPlacements, type TriggerProps } from 'rc-trigger';
+import { type ActionType, type AlignType } from 'rc-trigger/lib/interface';
 import './index.scss';
 export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupContainer' | 'mouseEnterDelay' | 'mouseLeaveDelay'> {
     align?: AlignType;
     alignPoint?: boolean;
-    animation?: AnimationType;
     arrow?: boolean;
     hideAction?: ActionType[];
     minOverlayWidthMatchTrigger?: boolean;
@@ -16,6 +15,7 @@ export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupCont
     placement?: string;
     placements?: BuildInPlacements;
     prefixCls?: string;
+    rootCls?: string;
     showAction?: ActionType[];
     transitionName?: string;
     trigger?: ActionType | ActionType[];
@@ -23,4 +23,12 @@ export interface DropProps extends Pick<TriggerProps, 'children' | 'getPopupCont
     onOverlayClick?: (e: Event) => void;
     onVisibleChange?: (visible: boolean) => void;
 }
-export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<unknown>>;
+export type TriggerRef = {
+    forceAlign: VoidFunction;
+};
+export type DropRef = {
+    close: VoidFunction;
+    open: VoidFunction;
+    triggerRef: TriggerRef;
+};
+export declare const Drop: React.ForwardRefExoticComponent<DropProps & React.RefAttributes<DropRef>>;