@alifd/chat 0.0.1 → 0.1.1

package/es/float-button/hooks/useAutoAlign.js

@@ -4,9 +4,9 @@ import { useThrottle } from '../../utils';
 /**
  * 自动调整弹层 align 位置逻辑
  */
-export function useAutoAlign(dom, trigger, { enable, defaultAlign, }) {
+export function useAutoAlign(_dom, trigger, { enable, defaultAlign, }) {
     const [align, setAlign] = useState(defaultAlign);
-    const update = () => {
+    const update = (dom = _dom) => {
         if (!enable || !dom || !trigger) {
             return;
         }

package/es/float-button/hooks/useTriggerType.d.ts

@@ -0,0 +1,3 @@
+import type { HTMLAttributes } from 'react';
+import type { FloatButtonProps } from '../types';
+export declare function useTriggerType({ triggerType, visible, onVisibleChange, }: Pick<FloatButtonProps, 'triggerType' | 'visible' | 'onVisibleChange'>): Pick<HTMLAttributes<HTMLElement>, "onClick" | "onMouseEnter" | "onMouseLeave">;

package/es/float-button/hooks/useTriggerType.js

@@ -0,0 +1,31 @@
+import { useDebounce } from '../../utils';
+function normalizeTriggerType(triggerType, defaultTriggerType) {
+    if (!triggerType) {
+        return defaultTriggerType;
+    }
+    const arr = Array.isArray(triggerType) ? triggerType : [triggerType];
+    return Array.from(new Set(arr));
+}
+export function useTriggerType({ triggerType, visible, onVisibleChange, }) {
+    const normalTriggerTypes = normalizeTriggerType(triggerType, ['click']);
+    const allowClick = normalTriggerTypes.includes('click');
+    const allowHover = normalTriggerTypes.includes('hover');
+    const triggerHandlerProps = {};
+    const debounceOnVisibleChange = useDebounce((v, type) => {
+        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(v, type);
+    }, 150);
+    if (allowClick) {
+        triggerHandlerProps.onClick = () => {
+            onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(!visible, 'fromeTrigger');
+        };
+    }
+    if (allowHover) {
+        triggerHandlerProps.onMouseEnter = () => {
+            debounceOnVisibleChange(true, 'fromTrigger');
+        };
+        triggerHandlerProps.onMouseLeave = () => {
+            debounceOnVisibleChange(false, 'fromTrigger');
+        };
+    }
+    return triggerHandlerProps;
+}

package/es/float-button/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").FloatButtonProps & import("react").RefAttributes<import("./types").FloatButtonRef>, keyof import("./types").FloatButtonProps | "key"> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").FloatButtonRef, {}> & {
+declare const FloatButtonWithSub: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").FloatButtonProps & import("react").RefAttributes<import("./types").FloatButtonRef>, "key" | keyof import("./types").FloatButtonProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").FloatButtonRef, {}> & {
     Backtop: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<import("./types").BacktopProps & import("react").RefAttributes<import("./types").BacktopRef>, "key" | keyof import("./types").BacktopProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("./types").BacktopRef, {}>;
+    InnerDrawer: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("./types").FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
 };
-export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps } from './types';
+export type { BacktopRef, BacktopProps, FloatButtonRef, FloatButtonProps, FloatButtonInnerDrawerProps, DragableOption, Edge, Margin, Position, RequiredParts, ScreenRatioPosition, Size, TriggerType, } from './types';
 export default FloatButtonWithSub;

package/es/float-button/index.js

@@ -1,5 +1,6 @@
 import FloatButton from './view/float-button';
 import Backtop from './view/backtop';
+import InnerDrawer from './view/inner-drawer';
 import { assignSubComponent } from '../utils/index';
-const FloatButtonWithSub = assignSubComponent(FloatButton, { Backtop });
+const FloatButtonWithSub = assignSubComponent(FloatButton, { Backtop, InnerDrawer });
 export default FloatButtonWithSub;

package/es/float-button/main.scss

@@ -1,16 +1,79 @@
-@import '~@alifd/next/variables.scss';
+@import '../core/variables.scss';
 
-.#{$css-prefix}float-button {
-  position: fixed;
-  z-index: 1001;
+.#{$prefix}float-button {
+    position: fixed;
+    z-index: 1001;
 
-  &-backtop {
-    transition: opacity 0.2s, transform 0.2s;
-    cursor: pointer;
+    &-backtop {
+        transition:
+            opacity 0.2s,
+            transform 0.2s;
+        cursor: pointer;
 
-    &--hidden {
-      opacity: 0;
-      transform: scale(0);
+        &--hidden {
+            opacity: 0;
+            transform: scale(0);
+        }
+    }
+
+    &-inner-drawer {
+        flex: 1;
+        display: flex;
+        overflow: hidden;
+        display: flex;
+        box-shadow: $shadow-2;
+        border-radius: $size-base * 2;
+
+        &-outer {
+            display: flex;
+        }
+        &-inner-start {
+            flex: 1;
+        }
+        &-inner-end {
+            flex: none;
+            transition:
+                width 0.3s,
+                opacity 0.3s;
+            display: flex;
+        }
+        &-inner {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
+        &-header {
+            flex: none;
+            display: flex;
+            justify-content: end;
+            padding: $size-base * 2 $size-base * 3;
+            &-title {
+                flex: 1;
+                font-size: $font-size-subhead;
+                line-height: 1.5;
+            }
+            &-close {
+                flex: none;
+                color: $color-text1-2;
+                cursor: pointer;
+                transition: color 0.15s;
+                outline: 0;
+                border: 0;
+                padding: 0;
+                align-self: flex-start;
+                background-color: transparent;
+
+                &:hover {
+                    color: $color-brand1-6;
+                }
+            }
+        }
+        &-body {
+            flex: 1;
+            padding: 0 $size-base * 3 $size-base * 2;
+        }
+        &-footer {
+            flex: none;
+        }
     }
-  }
 }

package/es/float-button/style.d.ts

@@ -1,2 +1,3 @@
 import '@alifd/next/lib/balloon/style';
+import '@alifd/next/lib/drawer/style';
 import './main.scss';

package/es/float-button/style.js

@@ -1,2 +1,3 @@
 import '@alifd/next/lib/balloon/style';
+import '@alifd/next/lib/drawer/style';
 import './main.scss';

package/es/float-button/types.d.ts

@@ -1,4 +1,4 @@
-import type React from 'react';
+import React, { type ReactNode } from 'react';
 import { type CommonProps } from '@alifd/next';
 import { type BalloonProps } from '@alifd/next/lib/balloon';
 export type { BalloonProps };
@@ -100,6 +100,8 @@ export interface FloatButtonRef {
      */
     updateNestleEdge(animation?: boolean): void;
 }
+export type TriggerType = 'hover' | 'click';
+export type RequiredParts<O, K extends keyof O> = Omit<O, K> & Required<Pick<O, K>>;
 /**
  * @api FloatButton
  * @order 1
@@ -116,6 +118,11 @@ export interface FloatButtonProps extends CommonProps {
      * - `inner-drawer`: 文档内部抽屉
      */
     type?: 'balloon' | 'drawer' | 'inner-drawer';
+    drawerProps?: {
+        title?: ReactNode;
+        width?: number | string;
+        target: string | (() => HTMLElement);
+    };
     /**
      * 弹层位置，适用 `type`: 'balloon'
      */
@@ -196,7 +203,7 @@ export interface FloatButtonProps extends CommonProps {
      * 触发方式
      * @defaultValue 'click'
      */
-    triggerType?: BalloonProps['triggerType'];
+    triggerType?: TriggerType | TriggerType[];
     /**
      * 展示关闭按钮
      * @defaultValue false
@@ -210,6 +217,7 @@ export interface FloatButtonProps extends CommonProps {
      * 弹层内容
      */
     children?: React.ReactNode;
+    _renderView?: (prefix: string, props: RequiredParts<FloatButtonProps, 'visible' | 'onVisibleChange'>) => ReactNode;
 }
 /**
  * @api
@@ -223,3 +231,11 @@ export interface DragableOption {
     onDraging?: (dom: HTMLElement, event: MouseEvent) => void | false;
     onDragend?: (dom: HTMLElement) => void;
 }
+/**
+ * @api FloatButton.InnerDrawer
+ */
+export interface FloatButtonInnerDrawerProps extends FloatButtonProps {
+    width?: string | number;
+    target: string | (() => HTMLElement);
+    title?: ReactNode;
+}

package/es/float-button/view/backtop.js

@@ -1,7 +1,7 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import { ConfigProvider } from '@alifd/next';
 import cs from 'classnames';
-import { debounce } from '../../utils';
+import { PREFIX_DEFAULT, debounce } from '../../utils';
 function getScroller(scroller) {
     if (!scroller) {
         return window;
@@ -11,9 +11,9 @@ function getScroller(scroller) {
     }
     return scroller;
 }
-const Backtop = forwardRef(({ prefix = 'next-', autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
+const Backtop = forwardRef(({ autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
     const [visible, setVisible] = useState(true);
-    const cls = `${prefix}float-button-backtop`;
+    const cls = `${PREFIX_DEFAULT}float-button-backtop`;
     const visibleRef = useRef(visible);
     visibleRef.current = visible;
     const handleBackToTop = () => {

package/es/float-button/view/drawer.d.ts

@@ -1,2 +1,8 @@
 import React from 'react';
-export declare function Drawer(): React.JSX.Element;
+import type { DrawerProps as NextDrawerProps } from '@alifd/next/types/drawer';
+import type { TriggerType } from '../types';
+export interface DrawerProps extends Omit<NextDrawerProps, 'triggerType' | 'container' | 'onVisibleChange'> {
+    onVisibleChange?: (visible: boolean, reason: string) => void;
+    triggerType?: TriggerType | TriggerType[];
+}
+export declare function Drawer({ prefix, target, children, trigger, triggerType, visible, onVisibleChange, ...rests }: DrawerProps): React.JSX.Element;

package/es/float-button/view/drawer.js

@@ -1,4 +1,13 @@
+import { __rest } from "tslib";
 import React from 'react';
-export function Drawer() {
-    return (React.createElement("div", null, "drawer"));
+import { Drawer as NextDrawer } from '@alifd/next';
+import { useTriggerType } from '../hooks/useTriggerType';
+export function Drawer(_a) {
+    var { prefix, target, children, trigger, triggerType, visible, onVisibleChange } = _a, rests = __rest(_a, ["prefix", "target", "children", "trigger", "triggerType", "visible", "onVisibleChange"]);
+    const handlers = useTriggerType({ visible, onVisibleChange, triggerType });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", Object.assign({}, handlers), trigger),
+        React.createElement(NextDrawer, Object.assign({}, rests, { visible: visible, onClose: reason => {
+                onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(false, reason);
+            }, v2: true }), children)));
 }

package/es/float-button/view/float-button.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { FloatButtonProps, FloatButtonRef } from '../types';
-declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<FloatButtonProps & React.RefAttributes<FloatButtonRef>, keyof FloatButtonProps | "key"> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, FloatButtonRef, {}>;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<FloatButtonProps & React.RefAttributes<FloatButtonRef>, "key" | keyof FloatButtonProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, FloatButtonRef, {}>;
 export default _default;

package/es/float-button/view/float-button.js

@@ -1,20 +1,40 @@
 import { __rest } from "tslib";
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import cs from 'classnames';
 import { Balloon, ConfigProvider } from '@alifd/next';
-import { useControlable } from '../../utils/index';
+import { PREFIX_DEFAULT, useControlable } from '../../utils/index';
 import { useAutoHide } from '../hooks/useAutoHide';
 import { useAutoAlign } from '../hooks/useAutoAlign';
 import { useNestleEdge } from '../hooks/useNestleEdge';
 import { useDragable } from '../hooks/useDragable';
-const FloatButton = forwardRef((_a, ref) => {
-    var { className, style, prefix = 'next-', type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = false, align, balloonProps, children } = _a, others = __rest(_a, ["className", "style", "prefix", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "children"]);
+// import { InnerDrawer } from './inner-drawer';
+/**
+ * @component 悬浮球
+ * @en FloatButton
+ * @type 通用 - General
+ * @remarks 悬浮球组件用于承载机器人入口。- Apply for entry for web bot.
+ * @when 机器人入口 - The entry of robot
+ * @others
+ * ## 无障碍键盘操作指南
+ * | 按键    | 说明          |
+ * | :---- | :---------- |
+ * | Enter | 触发 onClick 事件 |
+ * | SPACE | 触发 onClick 事件 |
+ * @othersEn
+ * ## ARIA and KeyBoard
+ * | KeyBoard          | Description                              |
+ * | :---------- | :------------------------------ |
+ * | Enter       | Trigger the onClick event    |
+ * | SPACE       | Trigger the onClick event    |
+ */
+const FloatButton = forwardRef((props, ref) => {
+    const { className, style, type = 'balloon', addonAfter, addonBefore, dragable, safeAreaMargin = [10, 10, 10, 10], autoNestleEdge = true, interactiveEdges = ['left', 'right'], autoHide, autoAlign, leftSizeOfHidden, defaultPosition, trigger, triggerType = 'click', showClose = true, align, balloonProps, drawerProps, children, _renderView } = props, others = __rest(props, ["className", "style", "type", "addonAfter", "addonBefore", "dragable", "safeAreaMargin", "autoNestleEdge", "interactiveEdges", "autoHide", "autoAlign", "leftSizeOfHidden", "defaultPosition", "trigger", "triggerType", "showClose", "align", "balloonProps", "drawerProps", "children", "_renderView"]);
     const elRef = useRef(null);
     const triggerRef = useRef(null);
     const [el, setEl] = useState(null);
     const [triggerEl, setTriggerEl] = useState(null);
     const draggedRef = useRef(false);
-    const cls = `${prefix}float-button`;
+    const cls = `${PREFIX_DEFAULT}float-button`;
     const [visible, onVisibleChange] = useControlable(others, {
         valueName: 'visible',
         changeName: 'onVisibleChange',
@@ -23,10 +43,13 @@ const FloatButton = forwardRef((_a, ref) => {
         setEl(elRef.current);
         setTriggerEl(triggerRef.current);
     }, []);
-    const { align: currentAlign, update: updateAlign } = useAutoAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
+    const { align: currentAlign, update: _updateAlign } = useAutoAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
         enable: type === 'balloon' && autoAlign,
         defaultAlign: align,
     });
+    const updateAlign = () => {
+        _updateAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`));
+    };
     const { isHideRef, setHide, handleMove, saveRestorePosition } = useAutoHide(el, {
         enable: !visible && autoHide,
         interactiveEdges,
@@ -35,7 +58,6 @@ const FloatButton = forwardRef((_a, ref) => {
     useEffect(() => {
         if (visible) {
             setHide(false);
-            updateAlign();
         }
     }, [visible]);
     const { update: updateNestleEdge } = useNestleEdge(el, {
@@ -48,6 +70,9 @@ const FloatButton = forwardRef((_a, ref) => {
                 return false;
             }
         },
+        onUpdateEnd() {
+            updateAlign();
+        },
     });
     useImperativeHandle(ref, () => ({
         setVisible(value) {
@@ -81,32 +106,50 @@ const FloatButton = forwardRef((_a, ref) => {
         },
     });
     const classNames = cs(cls, className, dragClassName);
+    const handleVisibleChange = (v, type) => {
+        if (draggedRef.current) {
+            return;
+        }
+        onVisibleChange(v, type);
+    };
     const renderBalloon = () => {
-        return (React.createElement(Balloon, Object.assign({ visible: visible, onVisibleChange: (...args) => {
-                if (draggedRef.current) {
-                    return;
-                }
-                onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
+        return (React.createElement(Balloon, Object.assign({ visible: visible, onVisibleChange: handleVisibleChange, popupProps: {
+                afterOpen() {
+                    var _a, _b;
+                    updateAlign();
+                    (_b = (_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupProps) === null || _a === void 0 ? void 0 : _a.afterClose) === null || _b === void 0 ? void 0 : _b.call(_a);
+                },
             }, popupClassName: `${cls}-popup`, trigger: trigger, popupContainer: () => el, triggerType: triggerType, align: currentAlign, v2: true, closable: showClose, autoAdjust: false }, balloonProps), children));
     };
-    const renderDrawer = () => {
-        return React.createElement("div", null);
-    };
-    const renderInnerDrawer = () => {
-        return React.createElement("div", null);
-    };
+    // const renderDrawer = () => {
+    //     return <div></div>;
+    // };
+    // const renderInnerDrawer = () => {
+    //     return (
+    //         <InnerDrawer
+    //             {...drawerProps}
+    //             prefix={`${cls}-`}
+    //             target=".card-legal-affairs"
+    //             trigger={trigger}
+    //             triggerType={triggerType}
+    //             visible={visible}
+    //             closable={showClose}
+    //             onVisibleChange={(...args) => {
+    //                 if (draggedRef.current) {
+    //                     return;
+    //                 }
+    //                 onVisibleChange?.(...args);
+    //             }}
+    //         >
+    //             {children}
+    //         </InnerDrawer>
+    //     );
+    // };
     const renderView = () => {
-        switch (type) {
-            case 'drawer': {
-                return renderDrawer();
-            }
-            case 'inner-drawer': {
-                return renderInnerDrawer();
-            }
-            default: {
-                return renderBalloon();
-            }
+        if (typeof _renderView === 'function') {
+            return _renderView(`${cls}-`, Object.assign(Object.assign({}, props), { visible, onVisibleChange: handleVisibleChange }));
         }
+        return renderBalloon();
     };
     return (React.createElement("div", { className: classNames, style: Object.assign(Object.assign({}, style), dragStyle), ref: elRef },
         !!addonBefore && (React.createElement("div", { className: cs(`${cls}-addon`, `${cls}-addon--before`) }, addonBefore)),

package/es/float-button/view/inner-drawer.d.ts

@@ -1,2 +1,18 @@
-import React from 'react';
-export declare function InnerDrawer(): React.JSX.Element;
+import React, { type ReactNode } from 'react';
+import type { FloatButtonInnerDrawerProps, FloatButtonProps } from '../types';
+export interface InnerDrawerProps {
+    className?: string;
+    title?: ReactNode;
+    prefix: string;
+    target: string | (() => HTMLElement);
+    visible?: boolean;
+    onVisibleChange?: (visible: boolean, reason: string) => void;
+    children?: ReactNode;
+    trigger: ReactNode;
+    closable?: boolean;
+    triggerType: FloatButtonProps['triggerType'];
+    width?: string | number;
+}
+export declare function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable, title, width, }: InnerDrawerProps): React.JSX.Element;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<FloatButtonInnerDrawerProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+export default _default;

package/es/float-button/view/inner-drawer.js

@@ -1,4 +1,115 @@
-import React from 'react';
-export function InnerDrawer() {
-    return React.createElement("div", null, "inner-drawer");
+import { __rest } from "tslib";
+import React, { useRef, useLayoutEffect, useEffect, useState } from 'react';
+import ReactDOM from 'react-dom';
+import cs from 'classnames';
+import { Icon, ConfigProvider } from '@alifd/next';
+import { useTriggerType } from '../hooks/useTriggerType';
+import FloatButton from './float-button';
+function getTarget(target) {
+    if (typeof target === 'string') {
+        return document.querySelector(target);
+    }
+    return target();
 }
+function getMountTarget(prefix, target) {
+    const dom = getTarget(target);
+    let parent = dom === null || dom === void 0 ? void 0 : dom.parentElement;
+    if (!dom || !parent) {
+        return null;
+    }
+    if (!parent.dataset.chat) {
+        const oldParent = parent;
+        parent = document.createElement('div');
+        parent.classList.add(`${prefix}outer`);
+        parent.dataset.chat = 'drawer';
+        oldParent.appendChild(parent);
+        parent.appendChild(dom);
+    }
+    let mountTarget = parent.childNodes[1];
+    if (!mountTarget) {
+        mountTarget = document.createElement('div');
+        mountTarget.dataset.chat = 'drawer-mounted';
+        mountTarget.classList.add(`${prefix}inner-end`);
+        mountTarget.style.width = '0px';
+        mountTarget.style.opacity = '0';
+        parent.appendChild(mountTarget);
+    }
+    dom.classList.add(`${prefix}inner-start`);
+    return mountTarget;
+}
+export function InnerDrawer({ className, prefix, target, children, trigger, triggerType, visible, onVisibleChange, closable = true, title, width = 400, }) {
+    const [mount, setMount] = useState(!!visible);
+    useEffect(() => {
+        if (visible) {
+            setMount(visible);
+        }
+    }, [visible]);
+    const cls = `${prefix}inner-drawer`;
+    const handleVisibleChange = (nextVisible, type) => {
+        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible, type);
+    };
+    const handleVisibleChangeRef = useRef(handleVisibleChange);
+    handleVisibleChangeRef.current = handleVisibleChange;
+    const handlers = useTriggerType({ visible, onVisibleChange: handleVisibleChange, triggerType });
+    const mountTarget = mount ? getMountTarget(`${cls}-`, target) : undefined;
+    const domRef = useRef(null);
+    const triggerRef = useRef(null);
+    useLayoutEffect(() => {
+        if (mountTarget) {
+            const timer = setTimeout(() => {
+                mountTarget.style.width = visible
+                    ? `${typeof width === 'number' ? `${width}px` : width}`
+                    : '0px';
+                mountTarget.style.opacity = visible ? '1' : '0';
+            }, 16);
+            return () => {
+                clearTimeout(timer);
+            };
+        }
+    });
+    useEffect(() => {
+        if (!mountTarget || !className) {
+            return;
+        }
+        mountTarget.classList.add(className);
+        return () => {
+            mountTarget.classList.remove(className);
+        };
+    }, [mountTarget, className]);
+    useEffect(() => {
+        const onClick = (e) => {
+            const dom = domRef.current;
+            const trigger = triggerRef.current;
+            const target = e.target;
+            if (!dom || !trigger || !target) {
+                return;
+            }
+            if (!dom.contains(target) && !trigger.contains(target)) {
+                handleVisibleChangeRef.current(false, 'docClick');
+            }
+        };
+        window.addEventListener('click', onClick);
+        return () => {
+            window.removeEventListener('click', onClick);
+        };
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", Object.assign({}, handlers, { ref: triggerRef }), trigger),
+        !!mountTarget &&
+            ReactDOM.createPortal(React.createElement("div", { className: cs(cls, { [`${cls}--visible`]: visible }), ref: domRef, style: { width } },
+                React.createElement("div", { className: `${cls}-inner` },
+                    React.createElement("div", { className: `${cls}-header` },
+                        !!title && React.createElement("div", { className: `${cls}-header-title` }, title),
+                        !!closable && (React.createElement("button", { className: `${cls}-header-close`, onClick: () => handleVisibleChange(false, 'close') },
+                            React.createElement(Icon, { className: `${cls}-header-close-icon`, type: "close", size: 12 })))),
+                    React.createElement("div", { className: `${cls}-body` }, children))), mountTarget)));
+}
+function FloatButtonByInnerDrawer(props) {
+    const { width, title, target } = props, rests = __rest(props, ["width", "title", "target"]);
+    return (React.createElement(FloatButton, Object.assign({}, rests, { _renderView: (prefix, { trigger, triggerType, visible, onVisibleChange, showClose, children }) => {
+            return (React.createElement(InnerDrawer, { prefix: prefix, target: target, width: width, title: title, trigger: trigger, triggerType: triggerType, visible: visible, closable: showClose, onVisibleChange: (...args) => {
+                    onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(...args);
+                } }, children));
+        } })));
+}
+export default ConfigProvider.config(FloatButtonByInnerDrawer);

package/es/index.d.ts

@@ -1,2 +1,8 @@
 export { default as Button } from './button';
+export { default as Card } from './card';
+export { default as Feedback } from './feedback';
+export { default as FloatButton } from './float-button';
+export { default as Text } from './text';
+export { default as Tag } from './tag';
+export { default as Tab } from './tab';
 export declare const version: string;

package/es/index.js

@@ -1,2 +1,8 @@
 export { default as Button } from './button';
-export const version = '0.0.1';
+export { default as Card } from './card';
+export { default as Feedback } from './feedback';
+export { default as FloatButton } from './float-button';
+export { default as Text } from './text';
+export { default as Tag } from './tag';
+export { default as Tab } from './tab';
+export const version = '0.1.1';

package/es/tab/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Tab as NextTab } from '@alifd/next';
+import type { TabProps } from '@alifd/next/types/tab';
+export type { TabProps, ItemProps } from '@alifd/next/types/tab';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<TabProps & React.RefAttributes<NextTab>, "key" | keyof TabProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, NextTab, {}> & {
+    Item: typeof import("@alifd/next/types/tab").Item;
+};
+export default _default;

package/es/tab/index.js

@@ -0,0 +1,14 @@
+import { __rest } from "tslib";
+import React, { forwardRef } from 'react';
+import { Tab as NextTab, ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+const Tab = forwardRef((_a, ref) => {
+    var { className, size = 'small' } = _a, props = __rest(_a, ["className", "size"]);
+    return (React.createElement(NextTab, Object.assign({}, props, { className: cs(`${PREFIX_DEFAULT}tabs`, className), ref: ref, size: size })));
+});
+const TabWithSub = assignSubComponent(Tab, {
+    Item: NextTab.Item,
+    displayName: 'Tab',
+});
+export default ConfigProvider.config(TabWithSub);

package/es/tab/main.scss

@@ -0,0 +1,10 @@
+@import "@alifd/next/variables.scss";
+@import "../core/variables.scss";
+
+.#{$prefix}tabs {
+  &.#{$css-prefix}tabs-pure {
+    .#{$css-prefix}tabs-bar {
+      border-color: transparent;
+    }
+  }
+}

package/es/tab/style.d.ts

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/tab/style';
+import './main.scss';

package/es/tab/style.js

@@ -0,0 +1,2 @@
+import '@alifd/next/lib/tab/style';
+import './main.scss';