@broxus/react-uikit 0.3.1 → 0.4.1

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 export const DescriptionList = React.memo((props) => {
     const config = useConfig();
     const { className, divided, prefixCls = config.prefixCls, ...restProps } = props;

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

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const Term: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => JSX.Element>;
+export declare const Term: React.MemoExoticComponent<(props: React.HTMLAttributes<HTMLElement>) => React.JSX.Element>;

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

@@ -6,4 +6,4 @@ export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>,
     small?: boolean;
     vertical?: boolean;
 }
-export declare const Divider: React.MemoExoticComponent<(props: DividerProps) => JSX.Element>;
+export declare const Divider: React.MemoExoticComponent<(props: DividerProps) => React.JSX.Element>;

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import './index.scss';
 export const Divider = React.memo((props) => {
     const config = useConfig();

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

@@ -3,4 +3,4 @@ export interface DotnavProps extends React.HTMLAttributes<HTMLUListElement> {
     prefixCls?: string;
     vertical?: boolean;
 }
-export declare const Dotnav: React.MemoExoticComponent<(props: DotnavProps) => JSX.Element>;
+export declare const Dotnav: React.MemoExoticComponent<(props: DotnavProps) => React.JSX.Element>;

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

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 export const Dotnav = React.memo((props) => {
     const config = useConfig();
     const { className, prefixCls = config.prefixCls, vertical, ...restProps } = props;

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

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

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

@@ -1,7 +1,7 @@
-import * as React from 'react';
 import classNames from 'classnames';
+import * as React from 'react';
 import { Button } from '../../components/Button';
-import { useConfig } from '../../components/ConfrigProvider';
+import { useConfig } from '../../components/ConfigProvider';
 export const Item = React.memo((props) => {
     const config = useConfig();
     const { className, isActive, onClick, ...restProps } = props;

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

@@ -1,10 +1,9 @@
-import * as React from 'react';
 import { type DrawerProps as RcDrawerProps } from 'rc-drawer';
+import * as React from 'react';
 import { type Direction } from '../../types';
 import './index.scss';
-declare const SizeTypes: readonly ["default", "large"];
-type SizeType = (typeof SizeTypes)[number];
-type TriggerArguments = {
+export type DrawerSize = 'large';
+export type TriggerArguments = {
     collapse: () => void;
     expand: () => void;
     isOpen: boolean;
@@ -13,13 +12,12 @@ export interface PushState {
     distance: string | number;
 }
 export interface DrawerProps extends RcDrawerProps {
-    animation?: 'push' | 'reveal';
+    animation?: 'push' | 'reveal' | 'slide';
     closable?: boolean;
     closeIcon?: React.ReactNode;
     defaultOpen?: boolean;
     direction?: Direction;
-    size?: SizeType;
+    size?: DrawerSize;
     trigger?: (args: TriggerArguments) => JSX.Element;
 }
-export declare const Drawer: React.MemoExoticComponent<(props: DrawerProps) => JSX.Element>;
-export {};
+export declare const Drawer: React.MemoExoticComponent<(props: DrawerProps) => React.JSX.Element>;

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

@@ -1,60 +1,109 @@
-import * as React from 'react';
 import { addClass, removeClass } from '@broxus/js-utils';
 import classNames from 'classnames';
 import RcDrawer from 'rc-drawer';
-import { useConfig } from '../../components/ConfrigProvider';
+import * as React from 'react';
+import { useConfig } from '../../components/ConfigProvider';
 import { addModalMode, getMotionName, removeModalMode } from '../../utils';
 import './index.scss';
-const SizeTypes = ['default', 'large'];
 const defaultPushState = { distance: 180 };
+// Todo: add imperative handling
 export const Drawer = React.memo((props) => {
     const config = 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 { animation = 'slide', children, className, contentWrapperStyle, defaultOpen, destroyOnClose, direction, getContainer = config.getPopupContainer, keyboard = true, mask = true, maskClosable = true, motion, open, placement = 'right', prefixCls = config.prefixCls, push = defaultPushState, size, rootClassName, rootStyle, trigger, onClose: onCloseCallback, ...restProps } = props;
+    const [isShown, setShown] = React.useState(defaultOpen);
     const [internalOpen, setOpen] = React.useState(defaultOpen);
     const mergedOpen = open === undefined ? internalOpen : open;
+    const customMotion = typeof motion === 'function' ? motion(placement) : motion;
     const rootCls = React.useMemo(() => config.getRootPrefixCls(prefixCls || config.prefixCls, 'drawer'), [config, prefixCls]);
     const drawerRootClassName = React.useMemo(() => classNames({
-        [`${rootCls}-${size}`]: size !== undefined,
         [`${rootCls}-${animation}`]: animation !== undefined,
+        [`${rootCls}-animation`]: mergedOpen || isShown,
+        [`${rootCls}-large`]: size === 'large',
         [`${rootCls}-rtl`]: direction === 'rtl',
         'no-mask': !mask,
-    }, rootClassName), [rootCls, size, animation, mask, direction, rootClassName]);
-    const drawerWrapperClassName = React.useMemo(() => classNames(`${rootCls}-container`, {
-        [`${rootCls}-${animation}-container`]: animation !== undefined,
-    }), [rootCls, animation]);
-    const afterOpenChange = React.useCallback((visible) => {
-        restProps.afterOpenChange?.(visible);
-        if (visible) {
-            addClass(document.body, drawerWrapperClassName);
-            addModalMode();
-        }
-        else {
-            removeModalMode();
-            removeClass(document.body, drawerWrapperClassName);
-        }
-    }, [drawerWrapperClassName, restProps]);
+    }, rootClassName), [rootCls, animation, mergedOpen, isShown, size, direction, mask, rootClassName]);
+    const drawerContainerClassName = React.useMemo(() => classNames(`${rootCls}-container`, {
+        [`${rootCls}-container-large`]: size === 'large',
+        [`${rootCls}-container-${animation}-${placement}`]: placement !== undefined && ['push', 'reveal'].includes(animation),
+    }), [rootCls, size, placement, animation]);
+    const internalMotion = React.useMemo(() => ({
+        onAppearPrepare: element => {
+            addModalMode(`${rootCls}-page`);
+            addClass(document.body, drawerContainerClassName);
+            customMotion?.onEnterPrepare?.(element);
+        },
+        onAppearStart: (element, event) => {
+            if (['push', 'reveal'].includes(animation)) {
+                addClass(document.body, classNames({
+                    [`${rootCls}-container-animation`]: animation !== undefined,
+                }));
+            }
+            setShown(true);
+            customMotion?.onAppearStart?.(element, event);
+        },
+        onEnterPrepare: element => {
+            addModalMode(`${rootCls}-page`);
+            addClass(document.body, drawerContainerClassName);
+            customMotion?.onEnterPrepare?.(element);
+        },
+        onEnterStart: (element, event) => {
+            if (['push', 'reveal'].includes(animation)) {
+                addClass(document.body, classNames({
+                    [`${rootCls}-container-animation`]: animation !== undefined,
+                }));
+            }
+            setShown(true);
+            customMotion?.onAppearStart?.(element, event);
+        },
+        onLeaveEnd: (element, event) => {
+            removeModalMode(`${rootCls}-page`);
+            removeClass(document.body, drawerContainerClassName);
+            setShown(false);
+            customMotion?.onLeaveEnd?.(element, event);
+        },
+        onLeavePrepare: element => {
+            if (['push', 'reveal'].includes(animation)) {
+                removeClass(document.body, classNames({
+                    [`${rootCls}-container-animation`]: animation !== undefined,
+                }));
+            }
+            customMotion?.onLeavePrepare?.(element);
+        },
+    }), [animation, customMotion, drawerContainerClassName, rootCls]);
+    const onClose = React.useCallback((event) => {
+        setOpen(false);
+        onCloseCallback?.(event);
+    }, [onCloseCallback]);
     const collapse = React.useCallback(() => {
         setOpen(false);
     }, []);
     const expand = React.useCallback(() => {
+        addModalMode(`${rootCls}-page`);
+        addClass(document.body, drawerContainerClassName);
         setOpen(true);
-    }, []);
-    const onClose = React.useCallback((event) => {
-        setOpen(false);
-        restProps.onClose?.(event);
-    }, [restProps]);
+    }, [drawerContainerClassName, rootCls]);
+    const cleanup = React.useCallback(() => {
+        removeModalMode(`${rootCls}-page`);
+        removeClass(document.body, drawerContainerClassName, `${rootCls}-container-animation`);
+    }, [drawerContainerClassName, rootCls]);
+    const mergedMotion = React.useCallback((motionPlacement) => ({
+        motionAppear: true,
+        motionEnter: true,
+        motionLeave: true,
+        motionName: getMotionName(prefixCls || config.prefixCls, `drawer-${animation}-${motionPlacement}`),
+        ...customMotion,
+        ...internalMotion,
+    }), [animation, config.prefixCls, customMotion, internalMotion, prefixCls]);
+    React.useEffect(() => cleanup, [cleanup]);
     return (React.createElement(React.Fragment, null,
         trigger?.({ collapse, expand, isOpen: !!mergedOpen }),
-        React.createElement(RcDrawer, { afterOpenChange: afterOpenChange, className: className, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
-                motionDeadline: 200,
-                motionName: getMotionName(prefixCls || config.prefixCls, 'fade'),
-            }, motion: motionPlacement => ({
-                motionAppear: true,
-                motionDeadline: 200,
-                motionEnter: true,
-                motionLeave: true,
-                motionName: getMotionName(config.prefixCls, `slide-${motionPlacement}`),
-            }), open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, onClose: onClose, ...restProps }, children)));
+        React.createElement(RcDrawer, { className: className, contentWrapperStyle: {
+                height: undefined,
+                width: undefined,
+                ...contentWrapperStyle,
+            }, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+                motionName: getMotionName(prefixCls || config.prefixCls, 'drawer-fade'),
+            }, motion: mergedMotion, open: mergedOpen, placement: placement, prefixCls: rootCls, push: push, rootClassName: drawerRootClassName, rootStyle: { ...rootStyle, display: (mergedOpen || isShown) ? 'block' : '' }, onClose: onClose, ...restProps }, children)));
 });
 if (process.env.NODE_ENV !== 'production') {
     Drawer.displayName = 'Drawer';