@broxus/react-uikit 0.3.0 → 0.4.0

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

@@ -1,13 +1,11 @@
 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 SizeType = 'small' | 'medium' | 'large';
+export type StateType = 'success' | 'warning' | '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;
     allowClear?: boolean;
     defaultValue?: T;
     direction?: Direction;

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

@@ -6,4 +6,4 @@ export interface CoverProps extends React.HTMLAttributes<HTMLDivElement> {
     prefixCls?: string;
     width?: number;
 }
-export declare const Cover: React.MemoExoticComponent<(props: CoverProps) => JSX.Element>;
+export declare const Cover: React.MemoExoticComponent<(props: CoverProps) => React.JSX.Element>;

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

@@ -27,13 +27,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Cover = void 0;
-const React = __importStar(require("react"));
 const js_utils_1 = require("@broxus/js-utils");
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 require("./index.scss");
 exports.Cover = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { automute = true, className, children, height, prefixCls = config.prefixCls, width, ...restProps } = props;
     const container = React.useRef(null);
     const coveringElement = React.useRef(null);
@@ -66,10 +66,11 @@ exports.Cover = React.memo((props) => {
     const childrenWithCoverClass = React.Children.map(children, (child, idx) => {
         if (React.isValidElement(child)) {
             return React.cloneElement(child, {
+                ...child.props,
                 // @ts-ignore
                 ref: idx === 0 ? coveringElement : null,
                 // eslint-disable-next-line sort-keys
-                className: rootCls,
+                className: (0, classnames_1.default)(rootCls, child.props.className),
                 onLoadedMetadata: () => {
                     resize();
                 },

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

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

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

@@ -3,4 +3,4 @@ export interface DescriptionListProps extends React.HTMLAttributes<HTMLDListElem
     divided?: boolean;
     prefixCls?: string;
 }
-export declare const DescriptionList: React.MemoExoticComponent<(props: DescriptionListProps) => JSX.Element>;
+export declare const DescriptionList: React.MemoExoticComponent<(props: DescriptionListProps) => React.JSX.Element>;

package/dist/cjs/components/DescriptionList/DescriptionList.js

@@ -27,11 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.DescriptionList = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 exports.DescriptionList = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_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, {

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

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 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("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 require("./index.scss");
 exports.Divider = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_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)({

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

@@ -27,11 +27,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Dotnav = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 exports.Dotnav = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_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, {

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

@@ -27,12 +27,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Item = void 0;
-const React = __importStar(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
+const React = __importStar(require("react"));
 const Button_1 = require("../../components/Button");
-const ConfrigProvider_1 = require("../../components/ConfrigProvider");
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 exports.Item = React.memo((props) => {
-    const config = (0, ConfrigProvider_1.useConfig)();
+    const config = (0, ConfigProvider_1.useConfig)();
     const { className, isActive, onClick, ...restProps } = props;
     return (React.createElement("li", { className: (0, classnames_1.default)({
             [`${config.prefixCls}-active`]: isActive,

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

@@ -27,63 +27,112 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Drawer = void 0;
-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("../../components/ConfrigProvider");
+const React = __importStar(require("react"));
+const ConfigProvider_1 = require("../../components/ConfigProvider");
 const utils_1 = require("../../utils");
 require("./index.scss");
-const SizeTypes = ['default', 'large'];
 const defaultPushState = { distance: 180 };
+// Todo: add imperative handling
 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 config = (0, ConfigProvider_1.useConfig)();
+    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(() => (0, classnames_1.default)({
-        [`${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(() => (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);
-        }
-    }, [drawerWrapperClassName, restProps]);
+    }, rootClassName), [rootCls, animation, mergedOpen, isShown, size, direction, mask, rootClassName]);
+    const drawerContainerClassName = React.useMemo(() => (0, classnames_1.default)(`${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 => {
+            (0, utils_1.addModalMode)(`${rootCls}-page`);
+            (0, js_utils_1.addClass)(document.body, drawerContainerClassName);
+            customMotion?.onEnterPrepare?.(element);
+        },
+        onAppearStart: (element, event) => {
+            if (['push', 'reveal'].includes(animation)) {
+                (0, js_utils_1.addClass)(document.body, (0, classnames_1.default)({
+                    [`${rootCls}-container-animation`]: animation !== undefined,
+                }));
+            }
+            setShown(true);
+            customMotion?.onAppearStart?.(element, event);
+        },
+        onEnterPrepare: element => {
+            (0, utils_1.addModalMode)(`${rootCls}-page`);
+            (0, js_utils_1.addClass)(document.body, drawerContainerClassName);
+            customMotion?.onEnterPrepare?.(element);
+        },
+        onEnterStart: (element, event) => {
+            if (['push', 'reveal'].includes(animation)) {
+                (0, js_utils_1.addClass)(document.body, (0, classnames_1.default)({
+                    [`${rootCls}-container-animation`]: animation !== undefined,
+                }));
+            }
+            setShown(true);
+            customMotion?.onAppearStart?.(element, event);
+        },
+        onLeaveEnd: (element, event) => {
+            (0, utils_1.removeModalMode)(`${rootCls}-page`);
+            (0, js_utils_1.removeClass)(document.body, drawerContainerClassName);
+            setShown(false);
+            customMotion?.onLeaveEnd?.(element, event);
+        },
+        onLeavePrepare: element => {
+            if (['push', 'reveal'].includes(animation)) {
+                (0, js_utils_1.removeClass)(document.body, (0, classnames_1.default)({
+                    [`${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(() => {
+        (0, utils_1.addModalMode)(`${rootCls}-page`);
+        (0, js_utils_1.addClass)(document.body, drawerContainerClassName);
         setOpen(true);
-    }, []);
-    const onClose = React.useCallback((event) => {
-        setOpen(false);
-        restProps.onClose?.(event);
-    }, [restProps]);
+    }, [drawerContainerClassName, rootCls]);
+    const cleanup = React.useCallback(() => {
+        (0, utils_1.removeModalMode)(`${rootCls}-page`);
+        (0, js_utils_1.removeClass)(document.body, drawerContainerClassName, `${rootCls}-container-animation`);
+    }, [drawerContainerClassName, rootCls]);
+    const mergedMotion = React.useCallback((motionPlacement) => ({
+        motionAppear: true,
+        motionEnter: true,
+        motionLeave: true,
+        motionName: (0, utils_1.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(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)));
+        React.createElement(rc_drawer_1.default, { className: className, contentWrapperStyle: {
+                height: undefined,
+                width: undefined,
+                ...contentWrapperStyle,
+            }, destroyOnClose: destroyOnClose, keyboard: keyboard, getContainer: getContainer, mask: mask, maskClosable: maskClosable, maskMotion: {
+                motionName: (0, utils_1.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') {
     exports.Drawer.displayName = 'Drawer';