@alifd/chat 0.0.1 → 0.1.0

package/lib/card/types.d.ts

@@ -0,0 +1,56 @@
+import type { HTMLAttributes, JSXElementConstructor, ReactElement, ReactNode } from 'react';
+export type HTMLAttributesWeak = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
+export interface CardSubCommonProps {
+    prefix: string;
+    className?: string;
+    children?: ReactNode;
+}
+export type Align = 'start' | 'center' | 'end';
+export interface CardHeaderProps extends CardSubCommonProps {
+    extras?: ReactNode;
+    align?: Align;
+}
+export interface CardContentProps extends CardSubCommonProps {
+}
+export interface CardFooterProps extends CardSubCommonProps {
+    align?: Align;
+}
+/**
+ * @api
+ */
+export interface CardProps extends HTMLAttributesWeak {
+    innerClassName?: string;
+    /**
+     * 尺寸
+     * @defaultValue 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    title?: ReactNode;
+    titleAlign?: Align;
+    titleLine?: boolean;
+    footer?: ReactNode;
+    /**
+     * @defaultValue 'end'
+     */
+    footerAlign?: Align;
+    footerLine?: boolean;
+    noPadding?: boolean;
+    components?: {
+        Header?: JSXElementConstructor<CardHeaderProps>;
+        Content?: JSXElementConstructor<CardContentProps>;
+        Footer?: JSXElementConstructor<CardFooterProps>;
+    };
+}
+export interface CollapsableCardProps extends CardProps {
+    visible?: boolean;
+    defaultVisible?: boolean;
+    triggerType?: 'hover' | 'click';
+    onVisibleChange?: (visible: boolean) => void;
+    mode?: 'inner' | 'popup';
+    leaveToUnVisibleOnCard?: boolean;
+    renderContent: (info: {
+        visible: boolean;
+        onVisibleChange: (visible: boolean) => void;
+        children?: ReactNode;
+    }) => ReactElement<CardContentProps>;
+}

package/lib/card/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/card/view/card.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { CardProps } from '../types';
+export declare function useCardInner({ prefix, innerClassName, title, titleAlign, titleLine, footer, footerAlign, footerLine, components, children, }: CardProps): React.JSX.Element;
+export declare function useCardOuter(props: CardProps): React.JSX.Element;
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<CardProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}>;
+export default _default;

package/lib/card/view/card.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCardOuter = exports.useCardInner = void 0;
+const tslib_1 = require("tslib");
+const next_1 = require("@alifd/next");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../../utils");
+function DefaultHeader({ prefix, className, align, extras, children }) {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className) },
+        react_1.default.createElement("div", { className: `${prefix}-title`, style: { textAlign: align } }, children),
+        !!extras && react_1.default.createElement("div", { className: `${prefix}-extras` }, extras)));
+}
+function DefaultContent({ className, children }) {
+    return react_1.default.createElement("div", { className: (0, classnames_1.default)(className) }, children);
+}
+function DefaultFooter({ className, align, children }) {
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className), style: { textAlign: align } }, children));
+}
+function useCardInner({ prefix, innerClassName, title, titleAlign, titleLine, footer, footerAlign = 'end', footerLine, components, children, }) {
+    const cls = prefix;
+    const { Header = DefaultHeader, Content = DefaultContent, Footer = DefaultFooter, } = components || {};
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${cls}-inner`, innerClassName) },
+        !!title && (react_1.default.createElement(Header, { prefix: `${cls}-header`, className: (0, classnames_1.default)(`${cls}-header`, { [`${cls}-header--line`]: titleLine }), align: titleAlign }, title)),
+        react_1.default.createElement(Content, { prefix: `${cls}-content`, className: (0, classnames_1.default)(`${cls}-content`, {
+                [`${cls}-content--gap-top`]: !title || titleLine,
+                [`${cls}-content--gap-bottom`]: !footer || footerLine,
+            }) }, children),
+        !!footer && (react_1.default.createElement(Footer, { prefix: `${cls}-footer`, className: (0, classnames_1.default)(`${cls}-footer`, { [`${cls}-footer--line`]: footerLine }), align: footerAlign }, footer))));
+}
+exports.useCardInner = useCardInner;
+function useCardOuter(props) {
+    const { prefix, className, title, titleAlign, titleLine, footer, footerAlign, footerLine, size = 'medium', noPadding, components, children, innerClassName } = props, rests = tslib_1.__rest(props, ["prefix", "className", "title", "titleAlign", "titleLine", "footer", "footerAlign", "footerLine", "size", "noPadding", "components", "children", "innerClassName"]);
+    const cls = prefix;
+    const rootCls = (0, classnames_1.default)(cls, `${cls}--${size}`, { [`${cls}--no-padding`]: noPadding }, className);
+    return (react_1.default.createElement("div", Object.assign({ className: rootCls }, rests), children));
+}
+exports.useCardOuter = useCardOuter;
+/**
+ * @component 卡片
+ * @en Card
+ * @type 通用 - General
+ * @remarks
+ * 一个通用的卡片组件。
+ * - A card is a piece of paper with unique related data taht servers as an entry point to more detailed information.
+ * @when
+ * 当一个模块的同类信息不能自然形成区块感，可借助 Card 组件将信息整合，帮助界面信息模块感更强。
+ * -
+ * A card could contain a photo, text, and a link about a single subject.
+ */
+function Card(props) {
+    const cls = `${utils_1.PREFIX_DEFAULT}card`;
+    const inner = useCardInner(Object.assign(Object.assign({}, props), { prefix: cls }));
+    const outer = useCardOuter(Object.assign(Object.assign({}, props), { prefix: cls, children: inner }));
+    return outer;
+}
+exports.default = next_1.ConfigProvider.config(Card);

package/lib/card/view/collapsable.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { CollapsableCardProps } from '../types';
+declare function CollapsableCard({ components, visible, defaultVisible, onVisibleChange, triggerType, mode, renderContent, ...props }: CollapsableCardProps): React.JSX.Element;
+declare namespace CollapsableCard {
+    var displayName: string;
+}
+export default CollapsableCard;

package/lib/card/view/collapsable.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const card_1 = require("./card");
+const utils_1 = require("../../utils");
+function useContent(props) {
+    const propsRef = (0, react_1.useRef)(props);
+    propsRef.current = props;
+    return (0, react_1.useMemo)(() => {
+        return function Content({ className, children }) {
+            const { visible, onVisibleChange, renderContent } = propsRef.current;
+            return (react_1.default.createElement("div", { className: (0, classnames_1.default)(className) }, renderContent({ visible, onVisibleChange, children })));
+        };
+    }, []);
+}
+function CollapsableCard(_a) {
+    var { components, visible: _v, defaultVisible: _dv, onVisibleChange: _onVC, triggerType = 'hover', mode, renderContent } = _a, props = tslib_1.__rest(_a, ["components", "visible", "defaultVisible", "onVisibleChange", "triggerType", "mode", "renderContent"]);
+    const cls = `${utils_1.PREFIX_DEFAULT}card`;
+    const [value, setValue] = (0, utils_1.useControlable)(props, {
+        valueName: 'visible',
+        changeName: 'onVisibleChange',
+    });
+    const hoverToTrigger = triggerType === 'hover';
+    const setValueForContent = (visible) => {
+        if (hoverToTrigger) {
+            return;
+        }
+        setValue(visible);
+    };
+    const { Header, Footer } = components || {};
+    const Content = useContent({
+        visible: false,
+        onVisibleChange: setValueForContent,
+        renderContent,
+    });
+    const PopupContent = useContent({
+        visible: true,
+        onVisibleChange: setValueForContent,
+        renderContent,
+    });
+    const newProps = Object.assign(Object.assign({}, props), { innerClassName: (0, classnames_1.default)(props.innerClassName, `${cls}-collapsable-inner`), prefix: cls, components: { Header, Footer, Content } });
+    const inner = (0, card_1.useCardInner)(newProps);
+    const popupInnerProps = Object.assign(Object.assign({}, newProps), { innerClassName: (0, classnames_1.default)(props.innerClassName, `${cls}-collapsable-inner`, `${cls}-collapsable-inner--popup`), components: { Header, Footer, Content: PopupContent } });
+    const popupInner = (0, card_1.useCardInner)(popupInnerProps);
+    const classNames = (0, classnames_1.default)(`${cls}-collapsable`, { [`${cls}-collapsable--visible`]: value }, newProps.className);
+    const debounceSetValue = (0, utils_1.useDebounce)(setValue, 150);
+    const outer = (0, card_1.useCardOuter)(Object.assign(Object.assign(Object.assign({}, newProps), (hoverToTrigger
+        ? {
+            onMouseEnter: () => {
+                debounceSetValue(true);
+            },
+            onMouseLeave: () => {
+                debounceSetValue(false);
+            },
+        }
+        : {})), { className: classNames, children: (react_1.default.createElement(react_1.default.Fragment, null,
+            inner,
+            value ? popupInner : null)) }));
+    return outer;
+}
+CollapsableCard.displayName = 'CollapsableCard';
+exports.default = CollapsableCard;

package/lib/core/variables.scss

@@ -0,0 +1,33 @@
+$prefix: 'ct-' !default;
+
+$color-brand1-6: var(--color-brand1-6, #5584ff) !default;
+$size-base: 4px !default;
+$shadow-1: 1px 1px 4px 0px rgba(0, 0, 0, 0.16) !default;
+$shadow-2: 2px 4px 16px 0px rgba(0, 0, 0, 0.12) !default;
+
+$font-size-headline: var(--font-size-headline, 24px) !default;
+$font-size-title: var(--font-size-title, 20px) !default;
+$font-size-subhead: var(--font-size-subhead, 16px) !default;
+$font-size-body-2: var(--font-size-body-2, 14px) !default;
+$font-size-body-1: var(--font-size-body-1, 14px) !default;
+$font-size-caption: var(--font-size-caption, 12px) !default;
+
+/// 禁用
+$color-text1-1: var(--color-text1-1, #cccccc) !default;
+/// 水印/提示
+$color-text1-2: var(--color-text1-2, #999999) !default;
+/// 正文/标题
+$color-text1-3: var(--color-text1-3, #666666) !default;
+/// 正文/标题
+$color-text1-4: var(--color-text1-4, #333333) !default;
+
+/// 很浅
+$color-line1-0: var(--color-line1-0, #f1f3f6) !default;
+/// 浅
+$color-line1-1: var(--color-line1-1, #e6e7eb) !default;
+/// 常规
+$color-line1-2: var(--color-line1-2, #dcdee3) !default;
+/// 深
+$color-line1-3: var(--color-line1-3, #c4c6cf) !default;
+/// 重
+$color-line1-4: var(--color-line1-4, #a0a2ad) !default;

package/lib/feedback/index.d.ts

@@ -0,0 +1,6 @@
+import type { FeedbackProps } from './types';
+import Good from './view/good';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<FeedbackProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, undefined, {}> & {
+    Good: typeof Good;
+};
+export default _default;

package/lib/feedback/index.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const good_1 = tslib_1.__importDefault(require("./view/good"));
+/**
+ * @component 反馈
+ * @en Feedback
+ * @type 通用 - General
+ * @remarks 反馈组件给用户提供点赞、踩的交互按钮。
+ * @when 需要获取用户针对显示内容的赞同或否定意见时
+ */
+function Feedback(props) {
+    const { className, order = ['good', 'bad'], size, direction = 'hoz', defaultValue, value: _value, onChange: _onChange, renderItem } = props, rests = tslib_1.__rest(props, ["className", "order", "size", "direction", "defaultValue", "value", "onChange", "renderItem"]);
+    const cls = `${utils_1.PREFIX_DEFAULT}feedback`;
+    const [value, onChange] = (0, utils_1.useControlable)(props);
+    const defaultRenderItem = (0, react_1.useCallback)((status) => {
+        switch (status) {
+            case 'good': {
+                return (react_1.default.createElement(good_1.default, { className: (0, classnames_1.default)(`${cls}-item-icon`, `${cls}-item-icon--good`), height: "1em" }));
+            }
+            case 'bad': {
+                return (react_1.default.createElement(good_1.default, { className: (0, classnames_1.default)(`${cls}-item-icon`, `${cls}-item-icon--bad`), height: "1em" }));
+            }
+        }
+    }, [cls]);
+    const render = renderItem || defaultRenderItem;
+    const padding = size && `0px ${Math.round((size * 3) / 10)}px`;
+    const fontSize = size;
+    return (react_1.default.createElement("div", Object.assign({ className: (0, classnames_1.default)(cls, className) }, rests),
+        react_1.default.createElement("div", { className: `${cls}-inner`, style: {
+                flexDirection: direction === 'hoz' ? 'row' : 'column',
+                padding,
+                fontSize,
+            } }, order.map(status => {
+            return (react_1.default.createElement("button", { className: (0, classnames_1.default)(`${cls}-item`, {
+                    [`${cls}-item--active`]: status === value,
+                }), style: { padding }, key: status, onClick: () => {
+                    onChange(value === status ? 'stale' : status);
+                } }, render(status)));
+        }))));
+}
+Feedback.displayName = 'Feedback';
+const FeedbackWithSub = (0, utils_1.assignSubComponent)(Feedback, { Good: good_1.default });
+exports.default = next_1.ConfigProvider.config(FeedbackWithSub);

package/lib/feedback/main.scss

@@ -0,0 +1,42 @@
+@import '../core/variables.scss';
+
+.#{$prefix}feedback {
+    display: inline-block;
+
+    &-inner {
+        padding: 0 4px;
+        display: flex;
+        flex-direction: row;
+    }
+    &-item {
+        background-color: transparent;
+        outline: 0;
+        border: 0;
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+        padding: 0 4px;
+        cursor: pointer;
+        color: inherit;
+        font-size: inherit;
+        transition:
+            color 0.15s,
+            opacity 0.15s;
+
+        &--active {
+            color: $color-brand1-6;
+        }
+
+        &:hover {
+            opacity: 0.8;
+        }
+
+        &-icon {
+            line-height: 1;
+
+            &--bad {
+                transform: rotate(180deg);
+            }
+        }
+    }
+}

package/lib/feedback/style.d.ts

@@ -0,0 +1 @@
+import './main.scss';

package/lib/feedback/style.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./main.scss");

package/lib/feedback/types.d.ts

@@ -0,0 +1,54 @@
+import type { HTMLAttributes, ReactNode, SVGProps } from 'react';
+export type HTMLAttributesWeek = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'direction'>;
+/**
+ * @api
+ */
+export type FeedbackStatus = 'good' | 'stale' | 'bad';
+/**
+ * @api
+ */
+export type FeedbackActiveStatus = 'good' | 'bad';
+/**
+ * @api Feedback
+ */
+export interface FeedbackProps extends HTMLAttributesWeek {
+    /**
+     * 当前状态（受控）
+     * @defaultValue 'stale'
+     */
+    value?: FeedbackStatus;
+    /**
+     * 默认状态（非受控）
+     * @defaultValue 'stale'
+     */
+    defaultValue?: FeedbackStatus;
+    /**
+     * 顺序
+     * @defaultValue ['good', 'bad']
+     */
+    order?: ['good', 'bad'] | ['bad', 'good'];
+    /**
+     * 当用户点击状态发生变化时
+     * @param status - 用户点击的状态
+     */
+    onChange?: (status: FeedbackStatus) => void;
+    /**
+     * 自定义节点渲染
+     * @param status - 节点状态
+     * @returns 节点内容
+     */
+    renderItem?: (status: 'good' | 'bad') => ReactNode;
+    /**
+     * 指定尺寸
+     */
+    size?: number;
+    /**
+     * 方向
+     * @defaultValue 'hoz'
+     */
+    direction?: 'ver' | 'hoz';
+}
+/**
+ * @api Feedback.Good
+ */
+export type FeedbackGoodProps = SVGProps<SVGSVGElement>;

package/lib/feedback/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/feedback/view/good.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FeedbackGoodProps } from '../types';
+declare function Good(props: FeedbackGoodProps): React.JSX.Element;
+declare namespace Good {
+    var displayName: string;
+}
+export default Good;

package/lib/feedback/view/good.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+function Good(props) {
+    return (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024" }, props),
+        react_1.default.createElement("path", { fill: "currentColor", d: "M832 364.8H684.8s19.2-64 32-179.2C723.2 128 678.4 70.4 614.4 64h-12.8c-51.2 0-83.2 32-102.4 76.8l-38.4 96c-32 64-57.6 102.4-76.8 115.2-25.6 12.8-121.6 12.8-128 12.8H128c-38.4 0-64 25.6-64 57.6v480c0 32 25.6 57.6 64 57.6h646.4c96 0 121.6-64 134.4-153.6L960 499.2c6.4-70.4-6.4-134.4-128-134.4zM256 902.4H128v-480h128v480zm640-409.6L844.8 800C832 857.6 832 902.4 768 902.4H320v-480c44.8 0 70.4-6.4 89.6-19.2 32-12.8 64-64 108.8-147.2 25.6-64 38.4-96 44.8-102.4 6.4-19.2 19.2-32 44.8-32h6.4c32 0 44.8 32 44.8 51.2-12.8 102.4-32 166.4-32 166.4l-25.6 83.2h243.2c19.2 0 32 0 44.8 12.8 12.8 12.8 6.4 38.4 6.4 57.6z" })));
+}
+Good.displayName = 'FeedbackGood';
+exports.default = Good;

package/lib/float-button/hooks/useAutoAlign.d.ts

@@ -2,10 +2,10 @@ import type { BalloonProps } from '../types';
 /**
  * 自动调整弹层 align 位置逻辑
  */
-export declare function useAutoAlign(dom: HTMLElement | null | undefined, trigger: HTMLElement | null, { enable, defaultAlign, }: {
+export declare function useAutoAlign(_dom: HTMLElement | null | undefined, trigger: HTMLElement | null, { enable, defaultAlign, }: {
     enable?: boolean;
     defaultAlign: BalloonProps['align'];
 }): {
     align: "b" | "br" | "rt" | "tr" | "t" | "r" | "l" | "tl" | "bl" | "lt" | "lb" | "rb" | undefined;
-    update: () => void;
+    update: (dom?: HTMLElement | null | undefined) => void;
 };

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

@@ -7,9 +7,9 @@ const utils_1 = require("../../utils");
 /**
  * 自动调整弹层 align 位置逻辑
  */
-function useAutoAlign(dom, trigger, { enable, defaultAlign, }) {
+function useAutoAlign(_dom, trigger, { enable, defaultAlign, }) {
     const [align, setAlign] = (0, react_1.useState)(defaultAlign);
-    const update = () => {
+    const update = (dom = _dom) => {
         if (!enable || !dom || !trigger) {
             return;
         }

package/lib/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/lib/float-button/hooks/useTriggerType.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTriggerType = void 0;
+const utils_1 = require("../../utils");
+function normalizeTriggerType(triggerType, defaultTriggerType) {
+    if (!triggerType) {
+        return defaultTriggerType;
+    }
+    const arr = Array.isArray(triggerType) ? triggerType : [triggerType];
+    return Array.from(new Set(arr));
+}
+function useTriggerType({ triggerType, visible, onVisibleChange, }) {
+    const normalTriggerTypes = normalizeTriggerType(triggerType, ['click']);
+    const allowClick = normalTriggerTypes.includes('click');
+    const allowHover = normalTriggerTypes.includes('hover');
+    const triggerHandlerProps = {};
+    const debounceOnVisibleChange = (0, utils_1.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;
+}
+exports.useTriggerType = useTriggerType;

package/lib/float-button/main.scss

@@ -1,16 +1,74 @@
-@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;
+        padding: $size-base * 2 $size-base * 3;
+        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;
+            &-title {
+                flex: 1;
+            }
+            &-close {
+                flex: none;
+                color: $color-text1-2;
+                cursor: pointer;
+                transition: color .15s;
+                outline: 0;
+                border: 0;
+                background-color: transparent;
+
+                &:hover {
+                    color: $color-brand1-6;
+                }
+            }
+        }
+        &-body {
+            flex: 1;
+        }
+        &-footer {
+            flex: none;
+        }
     }
-  }
 }

package/lib/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/lib/float-button/style.js

@@ -1,4 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@alifd/next/lib/balloon/style");
+require("@alifd/next/lib/drawer/style");
 require("./main.scss");

package/lib/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,7 @@ export interface FloatButtonRef {
      */
     updateNestleEdge(animation?: boolean): void;
 }
+export type TriggerType = 'hover' | 'click';
 /**
  * @api FloatButton
  * @order 1
@@ -116,6 +117,10 @@ export interface FloatButtonProps extends CommonProps {
      * - `inner-drawer`: 文档内部抽屉
      */
     type?: 'balloon' | 'drawer' | 'inner-drawer';
+    drawerProps?: {
+        title?: ReactNode;
+        width?: number | string;
+    };
     /**
      * 弹层位置，适用 `type`: 'balloon'
      */
@@ -196,7 +201,7 @@ export interface FloatButtonProps extends CommonProps {
      * 触发方式
      * @defaultValue 'click'
      */
-    triggerType?: BalloonProps['triggerType'];
+    triggerType?: TriggerType | TriggerType[];
     /**
      * 展示关闭按钮
      * @defaultValue false

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

@@ -14,9 +14,9 @@ function getScroller(scroller) {
     }
     return scroller;
 }
-const Backtop = (0, react_1.forwardRef)(({ prefix = 'next-', autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
+const Backtop = (0, react_1.forwardRef)(({ autoHide = true, scroller, offset = 10, smooth = true, children }, ref) => {
     const [visible, setVisible] = (0, react_1.useState)(true);
-    const cls = `${prefix}float-button-backtop`;
+    const cls = `${utils_1.PREFIX_DEFAULT}float-button-backtop`;
     const visibleRef = (0, react_1.useRef)(visible);
     visibleRef.current = visible;
     const handleBackToTop = () => {

package/lib/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;