@alifd/chat 0.3.40-beta.0 → 0.3.40-beta.1

package/lib/button/group.js

@@ -25,21 +25,8 @@ const next_1 = require("@alifd/next");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const utils_1 = require("../utils");
 const button_1 = tslib_1.__importDefault(require("./button"));
-const ADAPTOR_WIDTH = 600;
 const ButtonGroup = (0, react_1.forwardRef)((props, ref) => {
     const { className, size = 'small', type = 'row', dataSource, children } = props;
-    const [clientWidth, setClientWidth] = (0, react_1.useState)(document.documentElement.clientWidth);
-    (0, react_1.useEffect)(() => {
-        const handleResize = () => {
-            setTimeout(() => {
-                setClientWidth(document.documentElement.clientWidth);
-            }, 100);
-        };
-        window.addEventListener('resize', handleResize);
-        return () => {
-            window.removeEventListener('resize', handleResize);
-        };
-    }, []);
     const renderRowButtons = (items) => {
         if (!items || !items.length) {
             return null;
@@ -50,33 +37,9 @@ const ButtonGroup = (0, react_1.forwardRef)((props, ref) => {
             }
             // Button组件的有些属性不太符合需求， text是一种type
             const _a = button || {}, { buttonType, buttonStatus, label, icon } = _a, others = tslib_1.__rest(_a, ["buttonType", "buttonStatus", "label", "icon"]);
-            return (react_1.default.createElement(button_1.default, Object.assign({ className: `single-button ${buttonType + '_' + buttonStatus}`, type: button.buttonType, warning: buttonStatus === 'warning' ? true : false, text: buttonType === 'text' ? true : false, disabled: buttonStatus === 'disabled' ? true : false, loading: buttonStatus === 'loading' ? true : false, icon: icon, size: size }, others), label));
+            return (react_1.default.createElement(button_1.default, Object.assign({ className: `single-button ${`${buttonType}_${buttonStatus}`}`, type: buttonType === 'text' ? 'primary' : buttonType, key: button.label, warning: buttonStatus === 'warning', text: buttonType === 'text', disabled: buttonStatus === 'disabled', loading: buttonStatus === 'loading', icon: icon, size: size }, others), label));
         });
     };
-    // 设计稿地址：https://mgdone.alibaba-inc.com/file/141793008176403?fileOpenFrom=home&fileTileSwitch=false&page_id=154%3A8248
-    // 大于600： 1,2,3：1行等距展示； 大于等于4个：每行两个，每行一个或2个
-    // 小于 600， 从上往下排
-    const renderColumnButtons = () => {
-        if (!dataSource || !dataSource.length) {
-            return null;
-        }
-        // const screenWidth = clientWidth;
-        if (clientWidth < ADAPTOR_WIDTH) {
-            return renderRowButtons(dataSource);
-        }
-        // 1,2,3：1行等距展示；
-        if (dataSource.length <= 3) {
-            return renderRowButtons(dataSource);
-        }
-        // 大于等于4个：每行两个
-        const rows = Math.ceil(dataSource.length / 2);
-        const buttonRows = Array.from({ length: rows }, (_, index) => {
-            const start = index * 2;
-            const end = Math.min(start + 2, dataSource.length); // Ensure end does not exceed array length
-            return react_1.default.createElement("div", { className: 'button-group sub' }, renderRowButtons(dataSource.slice(start, end)));
-        });
-        return buttonRows;
-    };
     const renderButtons = () => {
         if (react_1.default.isValidElement(children)) {
             return children;
@@ -84,10 +47,10 @@ const ButtonGroup = (0, react_1.forwardRef)((props, ref) => {
         if (!dataSource || !dataSource.length) {
             return null;
         }
-        let actionItems = renderRowButtons(dataSource);
+        const actionItems = renderRowButtons(dataSource);
         return (react_1.default.createElement("div", { className: `button-group ${type}` },
-            type == 'row' && actionItems,
-            type == 'column' && renderColumnButtons()));
+            type === 'row' && actionItems,
+            type === 'column' && actionItems));
     };
     return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}button-group ${type}`, className), ref: ref }, renderButtons()));
 });

package/lib/button/main.scss

@@ -1,43 +1,42 @@
 @import "../core/variables.scss";
 
 .#{$prefix}button {
+  &.next-btn-text  {
+    line-height: var(--common-text-line-height);
+
+    .next-btn-helper {
+      vertical-align: baseline;
+    }
+  }
+
+  &-with-icon {
+    &.large {
+      padding: 0 var(--btn-size-m-padding, 16px);
+    }
+
+    &.medium {
+      padding: 0 var(--btn-size-s-padding, 12px);
+    }
+
+    &.small {
+      padding: 0 var(--btn-size-xs-padding, 8px);
+    }
+  }
+
   .common-icon {
-    margin-right: 4px;
+    margin-right: var(--s-1, 4px);
+    display: inline-flex;
+    align-items: center;
   }
 
   &-group {
     .single-button {
-      flex: 1 0 calc(50% - 3px); // 修改为50%宽度，每个按钮间隔6px，所以是3px
+      flex: 1 0 calc(50% - 4px); // 修改为50%宽度，每个按钮间隔6px，所以是3px
       text-align: center;
-      margin-right: 6px;
+      margin-right: 0px;
       max-width: 100%;
       overflow: hidden;
-
-      &:nth-child(n+3) {
-        margin-top: 8px;
-      }
-
-      // 使用nth-child选择器处理偶数按钮的右边距
-      &:nth-child(2n) {
-        margin-right: 0;
-      }
-
-      // 最后一个按钮不需要右边距
-      &:last-child {
-        margin-right: 0;
-      }
-
-      // 当按钮数量小于等于3个时，恢复为三等分布局
-      &:first-child:nth-last-child(-n+3),
-      &:first-child:nth-last-child(-n+3) ~ .single-button {
-        flex: 1 0 calc(33.33% - 6px);
-        margin-top: 0;
-
-        // 重置偶数按钮的右边距规则
-        &:nth-child(2n) {
-          margin-right: 6px;
-        }
-      }
+      flex-shrink: 1;
 
       .next-btn-helper {
         max-width: 100%;
@@ -52,57 +51,17 @@
       justify-content: space-between; /* 这里可能不再需要，因为我们通过flex-basis控制每行按钮数 */
       align-items: center;
       width: 100%;
-      margin-bottom: 8px;
-      &:last-child{
-        margin-bottom: 0px;
-      }
-      &.column {
-        .single-button {
-          width: 100%;
-          margin-bottom: 8px;
-          &:last-child {
-            margin-bottom: 0px;
-          }
-        }
-        display: block;
-        // 如果设计调整对应的适配宽度，需要调整这里的值
-        @media (min-width: 600px) {
-          display: flex;
-          .single-button {
-            margin-bottom: 0px;
-            flex: 1 0 calc(33.33% - 6px); /* 每个按钮占据33.33%的宽度减去左右各3px的间隔（总共6px）来保证每行三个 */
-          }
-        }
-      }
-
-      &.sub {
-        .single-button {
-          max-width: calc(50% - 6px);
-          margin-bottom: 0;
-        }
-        @media (max-width: 600px) {
-          display: block;
-        }
-      }
     }
-
-  }
-
-  &.secondary:not[disabled] {
-    border: none !important;
-    background-color: $color-brand1-1 !important;
-    color: $color-brand1-6 !important;
-
-    &:hover {
-      opacity: 0.8;
-      border: none !important;
-      color: $color-brand1-6 !important;
-      background-color: $color-brand1-1 !important;
+    .row {
+      display: flex;
+      flex-wrap: nowrap;
+      gap: var(--s-2, 8px);
     }
 
-    &:focus {
-      color: $color-brand1-8 !important;
-      background-color: $color-brand1-2 !important;
+    .column {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--s-2, 8px);
     }
   }
 }

package/lib/card/main.scss

@@ -39,7 +39,7 @@
     &-inner {
         display: flex;
         flex-direction: column;
-        background-color: #fff;
+        background-color: var(--color-bg-1, #ffffff);
         @include size(
             $shadow-2,
             $size-base * 3,

package/lib/checkbox-group/main.scss

@@ -4,25 +4,25 @@
   .checkbox-item {
     display: flex;
     align-items: flex-start;
-    padding: 10px;
-    margin-bottom: 8px;
+    padding: var(--s-2, 8px);
+    margin-bottom: var(--s-2, 8px);
     border-radius: 6px;
-    background-color: $color-fill1-1;
+    background-color: var(--color-fill1-1, #F6F8FC);
     cursor: pointer;
 
     &:hover {
-      background-color: $color-fill1-2;
+      background-color: var(--color-fill1-2, #F0F2F5);
     }
 
     &.active {
-      background-color: $color-fill1-2;
+      background-color: var(--color-fill1-2, #F0F2F5);
     }
   }
 
   .checkbox-item-checkbox {
     flex-shrink: 0;
     flex-grow: 0;
-    margin-right: 8px;
+    margin-right: var(--s-2, 8px);
     height: 22px;
     display: flex;
     align-items: center;
@@ -58,6 +58,5 @@
 
   .confirm-button {
     width: 100%;
-    margin-top: 4px;
   }
 }

package/lib/checkbox-group/types.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @api
+ */
 export interface CheckboxItem {
     label: string;
     value: string;
     description?: string;
 }
+/**
+ * @api
+ */
 export interface CheckboxGroupProps {
     options: CheckboxItem[];
     value: string[];

package/lib/code-view/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @component 代码视图
+ * @en CodeView
+ * @type 展示 - Display
+ * @remarks 用于展示代码块的组件，支持语法高亮和复制功能。
+ */
+import React from 'react';
+import type { CodeViewProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<CodeViewProps & React.RefAttributes<HTMLDivElement>, "key" | keyof CodeViewProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/lib/code-view/index.js

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+/**
+ * @component 代码视图
+ * @en CodeView
+ * @type 展示 - Display
+ * @remarks 用于展示代码块的组件，支持语法高亮和复制功能。
+ */
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const highlight_js_1 = tslib_1.__importDefault(require("highlight.js"));
+const utils_1 = require("../utils");
+const CodeView = (0, react_1.forwardRef)((props, ref) => {
+    const { className, code, language = '', showCopyButton, theme = 'light', } = props;
+    const codeRef = (0, react_1.useRef)(null);
+    // 使用 useMemo 缓存高亮结果，只在 code 或 language 变化时重新计算
+    const highlightedCode = (0, react_1.useMemo)(() => {
+        if (!code)
+            return '';
+        // 先转义 HTML 特殊字符防止 XSS
+        const escapedCode = code
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#039;');
+        try {
+            // 创建临时元素进行高亮
+            const tempElement = document.createElement('code');
+            tempElement.className = `language-${language}`;
+            tempElement.innerHTML = escapedCode;
+            // 执行语法高亮
+            highlight_js_1.default.highlightElement(tempElement);
+            return tempElement.innerHTML;
+        }
+        catch (error) {
+            // 降级方案：返回转义后的原始代码
+            return escapedCode;
+        }
+    }, [code, language]);
+    const handleCopy = () => {
+        if (!codeRef.current)
+            return;
+        const content = codeRef.current.innerText;
+        (0, utils_1.defaultCopyText)(content);
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            handleCopy();
+        }
+    };
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}code-view`, `${utils_1.PREFIX_DEFAULT}hljs-${theme}`, className), ref: ref },
+        react_1.default.createElement("div", { className: `${utils_1.PREFIX_DEFAULT}code-view-header` },
+            react_1.default.createElement("div", { className: `${utils_1.PREFIX_DEFAULT}code-view-language` }, language),
+            showCopyButton !== false && (react_1.default.createElement("div", { className: `${utils_1.PREFIX_DEFAULT}code-view-copy`, onClick: handleCopy, onKeyDown: handleKeyDown, role: "button", tabIndex: 0, title: "\u590D\u5236\u4EE3\u7801" },
+                react_1.default.createElement(next_1.Icon, { size: 'xs', type: "copy" })))),
+        react_1.default.createElement("div", { className: `${utils_1.PREFIX_DEFAULT}code-view-container` },
+            react_1.default.createElement("pre", null,
+                react_1.default.createElement("code", { ref: codeRef, className: `${utils_1.PREFIX_DEFAULT}code-view-content hljs language-${language}`, dangerouslySetInnerHTML: { __html: highlightedCode }, "data-highlighted": "yes" })))));
+});
+CodeView.displayName = 'CodeView';
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(CodeView);

package/lib/code-view/main.scss

@@ -0,0 +1,54 @@
+@import '../core/variables.scss';
+
+.#{$prefix}code-view {
+    // border: 4px solid var(--color-bg-1, #ffffff);
+    border-radius: var(--corner-2, 8px);
+    overflow: hidden;
+    background-color: var(--color-fill1-1);
+    position: relative;
+
+    pre {
+      margin: 0;
+
+      code.hljs {
+        padding: var(--s-2, 8px) var(--s-3, 12px);
+
+        &.ct-code-view-content {
+            padding: var(--s-2, 8px) var(--s-3, 12px);
+            background-color: var(--color-fill1-1);
+        }
+      }
+    }
+
+    &-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: var(--s-2, 8px) var(--s-3, 12px);
+        line-height: 22px;
+        background-color: var(--color-fill1-2);
+    }
+
+    &-language {
+        color: var(--color-text1-3);
+        font-size: 14px;
+        font-weight: 600;
+    }
+
+    &-copy {
+        cursor: pointer;
+        height: 22px;
+        color: var(--color-text1-2);
+
+        &:hover {
+            color: var(--color-text1-3);
+        }
+    }
+
+    &-container {
+        max-height: 500px;
+        overflow-y: auto;
+    }
+
+    
+}

package/lib/code-view/style.d.ts

@@ -0,0 +1,4 @@
+import '@alifd/next/lib/message/style2';
+import '../utils/github.scss';
+import '../utils/github-dark.scss';
+import './main.scss';

package/lib/code-view/style.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@alifd/next/lib/message/style2");
+require("../utils/github.scss");
+require("../utils/github-dark.scss");
+require("./main.scss");

package/lib/code-view/types.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @api
+ */
+export interface CodeViewProps {
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 代码内容
+     */
+    code: string;
+    /**
+     * 编程语言
+     */
+    language?: string;
+    /**
+     * 是否显示复制按钮
+     * @defaultValue true
+     */
+    showCopyButton?: boolean;
+    /**
+     * 主题模式
+     * @defaultValue 'light'
+     */
+    theme?: 'light' | 'dark';
+}

package/lib/code-view/types.js

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

package/lib/collapse/index.d.ts

@@ -0,0 +1,157 @@
+/**
+ * @component 折叠面板
+ * @en Collapse
+ * @type 通用 - General
+ * @remarks [折叠面板组件] 是一个 [容器类] UI 组件，用于 [内容的展开和收起]，包括点击和悬停触发，使内容能够 [灵活地显示和隐藏]。它通常用于 [长内容的分段显示、信息的分级展示等场景]。支持动画效果和多种触发方式。
+ */
+import React from 'react';
+import type { CollapseProps } from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<CollapseProps & React.RefAttributes<import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/collapse").CollapseProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    onItemClick(key: import("@alifd/next/types/collapse/types").KeyType): void;
+    genratePanelId(itemId: string | undefined, index: number): string | undefined;
+    getProps(item: import("@alifd/next/types/collapse/types").DataItem, index: number, key: import("@alifd/next/types/collapse/types").KeyType): {
+        key: import("@alifd/next/types/collapse/types").KeyType;
+        title: import("react").ReactNode;
+        isExpanded: boolean;
+        disabled: boolean | undefined;
+        id: string | undefined;
+        onClick: (() => void) | null;
+    };
+    getItemsByDataSource(): import("react").JSX.Element[];
+    getItemsByChildren(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | null | undefined;
+    setExpandedKey(expandedKeys: import("@alifd/next/types/collapse/types").KeyType[]): void;
+    render(): import("react").JSX.Element;
+    context: any;
+    setState<K extends "expandedKeys">(state: {
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    } | ((prevState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, props: Readonly<import("@alifd/next/types/collapse").CollapseProps>) => {
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    } | Pick<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }, K> | null) | Pick<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/collapse").CollapseProps> & Readonly<{
+        children?: import("react").ReactNode;
+    }>;
+    state: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>;
+    refs: {
+        [key: string]: import("react").ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, prevState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, prevState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, nextContext: any): void;
+}>>, "key" | keyof CollapseProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, import("@alifd/next/types/config-provider/types").ConfiguredComponent<import("@alifd/next/types/collapse").CollapseProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+    onItemClick(key: import("@alifd/next/types/collapse/types").KeyType): void;
+    genratePanelId(itemId: string | undefined, index: number): string | undefined;
+    getProps(item: import("@alifd/next/types/collapse/types").DataItem, index: number, key: import("@alifd/next/types/collapse/types").KeyType): {
+        key: import("@alifd/next/types/collapse/types").KeyType;
+        title: import("react").ReactNode;
+        isExpanded: boolean;
+        disabled: boolean | undefined;
+        id: string | undefined;
+        onClick: (() => void) | null;
+    };
+    getItemsByDataSource(): import("react").JSX.Element[];
+    getItemsByChildren(): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | null | undefined;
+    setExpandedKey(expandedKeys: import("@alifd/next/types/collapse/types").KeyType[]): void;
+    render(): import("react").JSX.Element;
+    context: any;
+    setState<K extends "expandedKeys">(state: {
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    } | ((prevState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, props: Readonly<import("@alifd/next/types/collapse").CollapseProps>) => {
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    } | Pick<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }, K> | null) | Pick<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }, K> | null, callback?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
+    readonly props: Readonly<import("@alifd/next/types/collapse").CollapseProps> & Readonly<{
+        children?: import("react").ReactNode;
+    }>;
+    state: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>;
+    refs: {
+        [key: string]: import("react").ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, nextContext: any): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+    getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, prevState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>): any;
+    componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, prevState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, snapshot?: any): void;
+    componentWillMount?(): void;
+    UNSAFE_componentWillMount?(): void;
+    componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextContext: any): void;
+    UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextContext: any): void;
+    componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, nextContext: any): void;
+    UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").CollapseProps>, nextState: Readonly<{
+        expandedKeys: import("@alifd/next/types/collapse/types").KeyType[];
+    }>, nextContext: any): void;
+}>, {}> & {
+    Panel: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<import("@alifd/next/types/collapse").PanelProps & import("@alifd/next/types/config-provider/types").ComponentCommonProps, {
+        onKeyDown: (e: import("react").KeyboardEvent<HTMLElement>) => void;
+        render(): import("react").JSX.Element;
+        context: any;
+        setState<K_1 extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("@alifd/next/types/collapse").PanelProps>) => {} | Pick<{}, K_1> | null) | Pick<{}, K_1> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<import("@alifd/next/types/collapse").PanelProps> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<import("@alifd/next/types/collapse").PanelProps>, nextState: Readonly<{}>, nextContext: any): void;
+    }, {}> & {
+        isNextPanel: boolean;
+    };
+};
+export default _default;

package/lib/collapse/index.js

@@ -0,0 +1,22 @@
+"use strict";
+/**
+ * @component 折叠面板
+ * @en Collapse
+ * @type 通用 - General
+ * @remarks [折叠面板组件] 是一个 [容器类] UI 组件，用于 [内容的展开和收起]，包括点击和悬停触发，使内容能够 [灵活地显示和隐藏]。它通常用于 [长内容的分段显示、信息的分级展示等场景]。支持动画效果和多种触发方式。
+ */
+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 Collapse = (0, react_1.forwardRef)((props) => {
+    const { className, children } = props, rest = tslib_1.__rest(props, ["className", "children"]);
+    return (react_1.default.createElement(next_1.Collapse, Object.assign({}, rest, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}collapse`, className) }), children));
+});
+const CollapsableWithSub = (0, utils_1.assignSubComponent)(Collapse, {
+    displayName: 'Collapse',
+    Panel: next_1.Collapse.Panel
+});
+exports.default = next_1.ConfigProvider.config(CollapsableWithSub);