@lobehub/ui 1.155.6 → 1.155.7

package/es/Collapse/index.js

@@ -32,6 +32,7 @@ var Collapse = /*#__PURE__*/memo(function (_ref) {
   return /*#__PURE__*/_jsx(AntdCollapse, _objectSpread({
     bordered: !gap && (variant === 'default' || variant === 'ghost'),
     className: cx(styles.group, !collapsible && styles.hideCollapsibleIcon, variantStyle, className),
+    collapsible: collapsible ? 'header' : 'icon',
     expandIcon: function expandIcon(_ref2) {
       var isActive = _ref2.isActive;
       return /*#__PURE__*/_jsx(Icon, {

package/es/Form/components/FormFlatGroup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { FlexboxProps } from 'react-layout-kit';
+import { FormVariant } from './FormGroup';
+export interface FormFlatGroupProps extends FlexboxProps {
+    variant?: FormVariant;
+}
+declare const FormFlatGroup: import("react").NamedExoticComponent<FormFlatGroupProps>;
+export default FormFlatGroup;

package/es/Form/components/FormFlatGroup.js

@@ -0,0 +1,35 @@
+'use client';
+
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "variant"];
+import { useResponsive } from 'antd-style';
+import { memo } from 'react';
+import { Flexbox } from 'react-layout-kit';
+import { useStyles } from "./FormGroup";
+import { jsx as _jsx } from "react/jsx-runtime";
+var FormFlatGroup = /*#__PURE__*/memo(function (_ref) {
+  var className = _ref.className,
+    children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useResponsive = useResponsive(),
+    mobile = _useResponsive.mobile;
+  var _useStyles = useStyles(variant),
+    cx = _useStyles.cx,
+    styles = _useStyles.styles,
+    prefixCls = _useStyles.prefixCls;
+  var groupClassName = "".concat(prefixCls, "-form-group");
+  var variantStyle = cx(variant === 'default' && styles.defaultStyle, variant === 'block' && styles.blockStyle, variant === 'ghost' && styles.ghostStyle, variant === 'pure' && styles.pureStyle);
+  return mobile ? /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: cx(groupClassName, styles.mobileFlatGroup, styles.mobileGroupBody, className)
+  }, rest), {}, {
+    children: children
+  })) : /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+    className: cx(groupClassName, styles.flatGroup, variantStyle, className)
+  }, rest), {}, {
+    children: children
+  }));
+});
+export default FormFlatGroup;

package/es/Form/components/FormGroup.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type CollapseProps } from "../../Collapse";
+import type { FormItemProps } from "./FormItem";
 import { type IconProps } from "../../Icon";
 export type FormVariant = 'default' | 'block' | 'ghost' | 'pure';
 export type ItemsType = 'group' | 'flat';
@@ -16,13 +17,25 @@ export declare const useStyles: (props?: unknown) => import("antd-style").Return
     pureTitle: import("antd-style").SerializedStyles;
     title: import("antd-style").SerializedStyles;
 }>;
-export interface FormGroupProps extends Omit<CollapseProps, 'collapsible'> {
+export interface ItemGroup {
+    children: FormItemProps[] | ReactNode;
+    collapsible?: boolean;
+    defaultActive?: boolean;
+    extra?: ReactNode;
+    icon?: IconProps['icon'];
+    key?: string;
+    title: ReactNode;
+    variant?: FormVariant;
+}
+export interface FormGroupProps extends Omit<CollapseProps, 'collapsible' | 'items' | 'defaultActiveKey' | 'activeKey'> {
+    active?: boolean;
     children: ReactNode;
     collapsible?: boolean;
     defaultActive?: boolean;
     extra?: ReactNode;
     icon?: IconProps['icon'];
-    itemsType?: ItemsType;
+    key?: string | number;
+    onCollapse?: (active: boolean) => void;
     title?: ReactNode;
     variant?: FormVariant;
 }

package/es/Form/components/FormGroup.js

@@ -3,7 +3,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _excluded = ["className", "icon", "title", "children", "extra", "itemsType", "variant", "defaultActive", "collapsible"];
+var _excluded = ["className", "icon", "title", "children", "extra", "variant", "defaultActive", "collapsible", "active", "key", "onCollapse"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 import { createStyles, useResponsive } from 'antd-style';
 import { isUndefined } from 'lodash-es';
@@ -37,12 +37,15 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
     title = _ref2.title,
     children = _ref2.children,
     extra = _ref2.extra,
-    itemsType = _ref2.itemsType,
     _ref2$variant = _ref2.variant,
     variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
     _ref2$defaultActive = _ref2.defaultActive,
     defaultActive = _ref2$defaultActive === void 0 ? true : _ref2$defaultActive,
     collapsible = _ref2.collapsible,
+    active = _ref2.active,
+    _ref2$key = _ref2.key,
+    key = _ref2$key === void 0 ? 'group' : _ref2$key,
+    onCollapse = _ref2.onCollapse,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var _useResponsive = useResponsive(),
     mobile = _useResponsive.mobile;
@@ -54,7 +57,6 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
   var groupTitleClassName = "".concat(prefixCls, "-form-group-title");
   var groupHeaderClassName = "".concat(prefixCls, "-form-group-header");
   var groupContentClassName = "".concat(prefixCls, "-form-group-content");
-  var variantStyle = cx(variant === 'default' && styles.defaultStyle, variant === 'block' && styles.blockStyle, variant === 'ghost' && styles.ghostStyle, variant === 'pure' && styles.pureStyle);
   var defaultCollapsible = isUndefined(collapsible) ? variant !== 'pure' : collapsible;
   var titleContent = /*#__PURE__*/_jsxs(Flexbox, {
     className: cx(groupTitleClassName, styles.title, variant === 'pure' && styles.pureTitle),
@@ -64,15 +66,6 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
       icon: icon
     }), title]
   });
-  if (itemsType === 'flat') {
-    return mobile ? /*#__PURE__*/_jsx(Flexbox, {
-      className: cx(groupClassName, styles.mobileFlatGroup, styles.mobileGroupBody, className),
-      children: children
-    }) : /*#__PURE__*/_jsx(Flexbox, {
-      className: cx(groupClassName, styles.flatGroup, variantStyle, className),
-      children: children
-    });
-  }
   if (mobile) return /*#__PURE__*/_jsxs(Flexbox, {
     className: cx(groupClassName, className),
     children: [/*#__PURE__*/_jsxs(Flexbox, {
@@ -86,16 +79,20 @@ var FormGroup = /*#__PURE__*/memo(function (_ref2) {
     })]
   });
   return /*#__PURE__*/_jsx(Collapse, _objectSpread({
+    activeKey: isUndefined(active) ? undefined : active ? [key] : [],
     className: cx(groupClassName, className),
     collapsible: defaultCollapsible,
-    defaultActiveKey: defaultActive ? [1] : undefined,
+    defaultActiveKey: defaultActive ? [key] : undefined,
     items: [{
       children: children,
       extra: extra,
-      key: 1,
+      key: key,
       label: titleContent
     }],
+    onChange: function onChange(v) {
+      return onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(v.length > 0);
+    },
     variant: variant
-  }, rest), 1);
+  }, rest));
 });
 export default FormGroup;

package/es/Form/index.d.ts

@@ -1,25 +1,21 @@
 import { Form as AntForm, FormProps as AntFormProps, type FormInstance } from 'antd';
 import { CSSProperties, type ReactNode, RefAttributes } from 'react';
-import FormGroup, { type FormGroupProps, FormVariant, ItemsType } from './components/FormGroup';
+import FormGroup, { type FormVariant, type ItemGroup, type ItemsType } from './components/FormGroup';
 import FormItem, { type FormItemProps } from './components/FormItem';
-export interface ItemGroup {
-    children: FormItemProps[] | ReactNode;
-    defaultActive?: boolean;
-    extra?: FormGroupProps['extra'];
-    icon?: FormGroupProps['icon'];
-    title: FormGroupProps['title'];
-}
 export interface FormProps extends Omit<AntFormProps, 'variant'> {
+    activeKey?: (string | number)[];
     children?: ReactNode;
     classNames?: {
         footer?: string;
     };
     collapsible?: boolean;
+    defaultActiveKey?: (string | number)[];
     footer?: ReactNode;
     gap?: number | string;
     itemMinWidth?: FormItemProps['minWidth'];
     items?: ItemGroup[] | FormItemProps[];
     itemsType?: ItemsType;
+    onCollapse?: (key: (string | number)[]) => void;
     styles?: {
         footer?: CSSProperties;
     };

package/es/Form/index.js

@@ -1,10 +1,13 @@
 'use client';
 
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "itemMinWidth", "footer", "form", "items", "children", "itemsType", "variant", "gap", "style", "collapsible", "classNames", "styles"];
+var _excluded = ["className", "itemMinWidth", "footer", "form", "items", "children", "itemsType", "variant", "gap", "style", "collapsible", "classNames", "styles", "defaultActiveKey", "activeKey", "onCollapse"];
 import { Form as AntForm } from 'antd';
+import { isUndefined } from 'lodash-es';
 import { forwardRef } from 'react';
+import FormFlatGroup from "./components/FormFlatGroup";
 import FormFooter from "./components/FormFooter";
 import FormGroup from "./components/FormGroup";
 import FormItem from "./components/FormItem";
@@ -30,6 +33,9 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     classNames = _ref$classNames === void 0 ? {} : _ref$classNames,
     _ref$styles = _ref.styles,
     styles = _ref$styles === void 0 ? {} : _ref$styles,
+    defaultActiveKey = _ref.defaultActiveKey,
+    activeKey = _ref.activeKey,
+    _onCollapse = _ref.onCollapse,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -41,19 +47,28 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }, item), itemIndex);
   };
   var mapTree = function mapTree(group, groupIndex) {
+    var key = (group === null || group === void 0 ? void 0 : group.key) || groupIndex;
     return /*#__PURE__*/_jsx(FormGroup, {
-      collapsible: collapsible,
-      defaultActive: group === null || group === void 0 ? void 0 : group.defaultActive,
+      active: activeKey && group !== null && group !== void 0 && group.key ? activeKey.includes(key) : undefined,
+      collapsible: isUndefined(group.collapsible) ? collapsible : group.collapsible,
+      defaultActive: defaultActiveKey && group !== null && group !== void 0 && group.key ? defaultActiveKey.includes(key) : group === null || group === void 0 ? void 0 : group.defaultActive,
       extra: group === null || group === void 0 ? void 0 : group.extra,
       icon: group === null || group === void 0 ? void 0 : group.icon,
+      onCollapse: function onCollapse(active) {
+        var keys = activeKey || defaultActiveKey || [];
+        keys = keys.filter(function (k) {
+          return k !== key;
+        });
+        _onCollapse === null || _onCollapse === void 0 || _onCollapse(active ? [].concat(_toConsumableArray(keys), [key]) : keys);
+      },
       title: group.title,
-      variant: variant,
+      variant: (group === null || group === void 0 ? void 0 : group.variant) || variant,
       children: Array.isArray(group.children) ? group.children.filter(function (item) {
         return !item.hidden;
       }).map(function (item, i) {
         return mapFlat(item, i);
       }) : group.children
-    }, groupIndex);
+    }, key);
   };
   return /*#__PURE__*/_jsxs(AntForm, _objectSpread(_objectSpread({
     className: cx(s.form, variant === 'pure' && s.pure, s.mobile, className),
@@ -67,8 +82,7 @@ var FormParent = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, rest), {}, {
     children: [items && (items === null || items === void 0 ? void 0 : items.length) > 0 ? itemsType === 'group' ? items === null || items === void 0 ? void 0 : items.map(function (item, i) {
       return mapTree(item, i);
-    }) : /*#__PURE__*/_jsx(FormGroup, {
-      itemsType: 'flat',
+    }) : /*#__PURE__*/_jsx(FormFlatGroup, {
       variant: variant,
       children: items === null || items === void 0 ? void 0 : items.filter(function (item) {
         return !item.hidden;

package/es/components.d.ts

@@ -21,10 +21,10 @@ export { default as FileTypeIcon, type FileTypeIconProps } from './FileTypeIcon'
 export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';
 export { default as FontLoader, type FontLoaderProps } from './FontLoader';
 export { default as Footer, type FooterProps } from './Footer';
-export { default as Form, type FormInstance, type FormProps, type ItemGroup } from './Form';
+export { default as Form, type FormInstance, type FormProps } from './Form';
 export { default as FormDivider, type FormDividerProps } from './Form/components/FormDivider';
 export { default as FormFooter, type FormFooterProps } from './Form/components/FormFooter';
-export { default as FormGroup, type FormGroupProps } from './Form/components/FormGroup';
+export { default as FormGroup, type FormGroupProps, type ItemGroup, } from './Form/components/FormGroup';
 export { default as FormItem, type FormItemProps } from './Form/components/FormItem';
 export { default as FormTitle, type FormTitleProps } from './Form/components/FormTitle';
 export { default as FormModal, type FormModalProps } from './FormModal';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.155.6",
+  "version": "1.155.7",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",