@lobehub/ui 2.18.1 → 2.18.3

package/es/Accordion/Accordion.js

@@ -34,8 +34,7 @@ var Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     userStyle = _ref.style,
     _ref$accordion = _ref.accordion,
     accordion = _ref$accordion === void 0 ? false : _ref$accordion,
-    _ref$defaultExpandedK = _ref.defaultExpandedKeys,
-    defaultExpandedKeys = _ref$defaultExpandedK === void 0 ? [] : _ref$defaultExpandedK,
+    defaultExpandedKeys = _ref.defaultExpandedKeys,
     expandedKeysProp = _ref.expandedKeys,
     onExpandedChange = _ref.onExpandedChange,
     _ref$variant = _ref.variant,
@@ -58,7 +57,18 @@ var Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
-  var _useMergeState = useMergeState(defaultExpandedKeys, {
+
+  // Convert children to array and filter valid elements
+  var validChildren = Children.toArray(children).filter(isValidElement);
+
+  // Collect all item keys
+  var allItemKeys = validChildren.map(function (child, index) {
+    return child.props.itemKey || index;
+  });
+
+  // If defaultExpandedKeys or expandedKeys is undefined, expand all items by default
+  var initialExpandedKeys = defaultExpandedKeys !== null && defaultExpandedKeys !== void 0 ? defaultExpandedKeys : allItemKeys;
+  var _useMergeState = useMergeState(initialExpandedKeys, {
       onChange: onExpandedChange,
       value: expandedKeysProp
     }),
@@ -92,9 +102,6 @@ var Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     showDivider: showDivider,
     variant: variant
   };
-
-  // Convert children to array and filter valid elements
-  var validChildren = Children.toArray(children).filter(isValidElement);
   var content = /*#__PURE__*/_jsx(_Fragment, {
     children: validChildren.map(function (child, index) {
       // Extract itemKey from child props to use as React key

package/es/Accordion/AccordionItem.js

@@ -7,7 +7,7 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { AnimatePresence, LazyMotion, m } from 'framer-motion';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Block from "../Block";
 import Text from "../Text";
@@ -41,7 +41,8 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
     padding = _ref.padding,
     ref = _ref.ref,
     customVariant = _ref.variant,
-    customStyles = _ref.styles;
+    customStyles = _ref.styles,
+    headerWrapper = _ref.headerWrapper;
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -77,7 +78,7 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
   }, [disabled, handleToggle]);
 
   // Build indicator
-  var renderIndicator = function renderIndicator() {
+  var indicator = useMemo(function () {
     if (hideIndicatorFinal) return null;
     if (customIndicator) {
       if (typeof customIndicator === 'function') {
@@ -106,35 +107,37 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
         className: cx(styles.icon, isOpen && styles.iconRotate)
       })
     });
-  };
+  }, [hideIndicatorFinal, customIndicator, disabled, isOpen, cx, styles, classNames, customStyles]);
 
   // Animation variants
-  var motionProps = _objectSpread({
-    animate: isOpen ? 'enter' : 'exit',
-    exit: 'exit',
-    initial: 'exit',
-    variants: {
-      enter: {
-        height: 'auto',
-        opacity: 1,
-        transition: {
-          duration: 0.2,
-          ease: [0.4, 0, 0.2, 1]
-        }
-      },
-      exit: {
-        height: 0,
-        opacity: 0,
-        transition: {
-          duration: 0.2,
-          ease: [0.4, 0, 0.2, 1]
+  var motionProps = useMemo(function () {
+    return _objectSpread({
+      animate: isOpen ? 'enter' : 'exit',
+      exit: 'exit',
+      initial: 'exit',
+      variants: {
+        enter: {
+          height: 'auto',
+          opacity: 1,
+          transition: {
+            duration: 0.2,
+            ease: [0.4, 0, 0.2, 1]
+          }
+        },
+        exit: {
+          height: 0,
+          opacity: 0,
+          transition: {
+            duration: 0.2,
+            ease: [0.4, 0, 0.2, 1]
+          }
         }
       }
-    }
-  }, contextMotionProps);
+    }, contextMotionProps);
+  }, [isOpen, contextMotionProps]);
 
   // Render content
-  var renderContent = function renderContent() {
+  var contentElement = useMemo(function () {
     if (disableAnimation) {
       if (keepContentMounted) {
         return /*#__PURE__*/_jsx("div", {
@@ -195,29 +198,31 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
         }))
       })
     });
-  };
-  var titleNode = typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
-    className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
-    ellipsis: true,
-    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.title,
-    children: title
-  }) : title;
-  var actionNode = action && /*#__PURE__*/_jsx(Flexbox, {
-    align: 'center',
-    className: cx('accordion-action', styles.action, classNames === null || classNames === void 0 ? void 0 : classNames.action),
-    flex: 'none',
-    gap: 4,
-    horizontal: true,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.action,
-    children: action
-  });
-  return /*#__PURE__*/_jsxs("div", {
-    className: cx('accordion-item', styles.item, classNames === null || classNames === void 0 ? void 0 : classNames.base),
-    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.base,
-    children: [/*#__PURE__*/_jsx(Block, {
+  }, [disableAnimation, keepContentMounted, isOpen, cx, styles, classNames, customStyles, children, motionProps]);
+  var titleNode = useMemo(function () {
+    return typeof title === 'string' ? /*#__PURE__*/_jsx(Text, {
+      className: classNames === null || classNames === void 0 ? void 0 : classNames.title,
+      ellipsis: true,
+      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.title,
+      children: title
+    }) : title;
+  }, [title, classNames === null || classNames === void 0 ? void 0 : classNames.title, customStyles === null || customStyles === void 0 ? void 0 : customStyles.title]);
+  var actionNode = useMemo(function () {
+    return action && /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: cx('accordion-action', styles.action, classNames === null || classNames === void 0 ? void 0 : classNames.action),
+      flex: 'none',
+      gap: 4,
+      horizontal: true,
+      onClick: function onClick(e) {
+        return e.stopPropagation();
+      },
+      style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.action,
+      children: action
+    });
+  }, [action, cx, styles, classNames === null || classNames === void 0 ? void 0 : classNames.action, customStyles === null || customStyles === void 0 ? void 0 : customStyles.action]);
+  var headerElement = useMemo(function () {
+    var header = /*#__PURE__*/_jsx(Block, {
       className: cx('accordion-header', styles.header, classNames === null || classNames === void 0 ? void 0 : classNames.header),
       clickable: !disabled,
       gap: 4,
@@ -246,7 +251,7 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
           style: {
             overflow: 'hidden'
           },
-          children: [titleNode, renderIndicator()]
+          children: [titleNode, indicator]
         }), /*#__PURE__*/_jsx(Flexbox, {
           align: 'center',
           flex: 'none',
@@ -269,10 +274,19 @@ var AccordionItem = /*#__PURE__*/memo(function (_ref) {
           flex: 'none',
           gap: 4,
           horizontal: true,
-          children: [actionNode, renderIndicator()]
+          children: [actionNode, indicator]
         })]
       })
-    }), renderContent()]
+    });
+    if (headerWrapper) {
+      return headerWrapper(header);
+    }
+    return header;
+  }, [cx, styles, classNames, disabled, handleToggle, handleKeyDown, padding, paddingBlock, paddingInline, ref, customVariant, variant, indicatorPlacementFinal, titleNode, indicator, actionNode, headerWrapper]);
+  return /*#__PURE__*/_jsxs("div", {
+    className: cx('accordion-item', styles.item, classNames === null || classNames === void 0 ? void 0 : classNames.base),
+    style: customStyles === null || customStyles === void 0 ? void 0 : customStyles.base,
+    children: [headerElement, contentElement]
   });
 });
 AccordionItem.displayName = 'AccordionItem';

package/es/Accordion/type.d.ts

@@ -24,6 +24,7 @@ export interface AccordionItemProps extends Pick<BlockProps, 'padding' | 'paddin
      * Whether the item is disabled
      */
     disabled?: boolean;
+    headerWrapper?: (header: ReactNode) => ReactNode;
     /**
      * Whether to hide the chevron indicator
      * @default false

package/package.json

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