@lobehub/ui 1.138.16 → 1.138.18

package/es/ActionIconGroup/index.js

@@ -69,6 +69,10 @@ var ActionIconGroup = /*#__PURE__*/memo(function (_ref) {
           });
         })
       },
+      overlayStyle: {
+        maxHeight: '50%',
+        overflow: 'auto'
+      },
       trigger: ['click'],
       children: /*#__PURE__*/_jsx(ActionIcon, {
         icon: MoreHorizontal,

package/es/ChatInputArea/mobile/ChatInputArea.d.ts

@@ -4,7 +4,6 @@ import { type ChatInputAreaInnerProps } from '../ChatInputAreaInner';
 export interface MobileChatInputAreaProps extends ChatInputAreaInnerProps {
     bottomAddons?: ReactNode;
     expand?: boolean;
-    safeArea?: boolean;
     setExpand?: (expand: boolean) => void;
     style?: CSSProperties;
     textAreaLeftAddons?: ReactNode;

package/es/ChatInputArea/mobile/ChatInputArea.js

@@ -8,7 +8,6 @@ import { rgba } from 'polished';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../../ActionIcon";
-import MobileSafeArea from "../../MobileSafeArea";
 import ChatInputAreaInner from "../ChatInputAreaInner";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -16,7 +15,7 @@ var useStyles = createStyles(function (_ref) {
   var css = _ref.css,
     token = _ref.token;
   return {
-    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      padding-block: 12px 12px;\n      background: ", ";\n      border-block-start: 1px solid ", ";\n    "])), token.colorFillQuaternary, rgba(token.colorBorder, 0.25)),
+    container: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      flex: none;\n      padding-block: 12px 12px;\n      background: ", ";\n      border-block-start: 1px solid ", ";\n    "])), token.colorFillQuaternary, rgba(token.colorBorder, 0.25)),
     expand: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: absolute;\n      height: 100%;\n      background: ", ";\n    "])), token.colorBgLayout),
     expandButton: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: absolute;\n      inset-inline-start: 14px;\n    "]))),
     expandTextArea: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      flex: 1;\n    "]))),
@@ -36,8 +35,7 @@ var MobileChatInputArea = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     onSend = _ref2.onSend,
     onInput = _ref2.onInput,
     loading = _ref2.loading,
-    value = _ref2.value,
-    safeArea = _ref2.safeArea;
+    value = _ref2.value;
   var containerRef = useRef(null);
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
@@ -76,69 +74,65 @@ var MobileChatInputArea = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   }, [expand, loading]);
   var showAddons = !expand && !isFocused;
   return /*#__PURE__*/_jsxs(Flexbox, {
-    children: [/*#__PURE__*/_jsxs(Flexbox, {
-      className: cx(styles.container, expand && styles.expand, className),
-      gap: 12,
-      style: style,
-      children: [topAddons && /*#__PURE__*/_jsx(Flexbox, {
-        style: showAddons ? {} : {
-          display: 'none'
+    className: cx(styles.container, expand && styles.expand, className),
+    gap: 12,
+    style: style,
+    children: [topAddons && /*#__PURE__*/_jsx(Flexbox, {
+      style: showAddons ? {} : {
+        display: 'none'
+      },
+      children: topAddons
+    }), /*#__PURE__*/_jsxs(Flexbox, {
+      className: cx(expand && styles.expand),
+      ref: containerRef,
+      style: {
+        position: 'relative'
+      },
+      children: [showFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
+        active: true,
+        className: styles.expandButton,
+        icon: expand ? ChevronDown : ChevronUp,
+        onClick: function onClick() {
+          return setExpand === null || setExpand === void 0 ? void 0 : setExpand(!expand);
         },
-        children: topAddons
-      }), /*#__PURE__*/_jsxs(Flexbox, {
-        className: cx(expand && styles.expand),
-        ref: containerRef,
-        style: {
-          position: 'relative'
+        size: {
+          blockSize: 24,
+          borderRadius: '50%',
+          fontSize: 14
         },
-        children: [showFullscreen && /*#__PURE__*/_jsx(ActionIcon, {
-          active: true,
-          className: styles.expandButton,
-          icon: expand ? ChevronDown : ChevronUp,
-          onClick: function onClick() {
-            return setExpand === null || setExpand === void 0 ? void 0 : setExpand(!expand);
+        style: expand ? {
+          top: 6
+        } : {}
+      }), /*#__PURE__*/_jsx(InnerContainer, {
+        children: /*#__PURE__*/_jsx(ChatInputAreaInner, {
+          autoSize: expand ? false : {
+            maxRows: 6,
+            minRows: 0
           },
-          size: {
-            blockSize: 24,
-            borderRadius: '50%',
-            fontSize: 14
+          className: cx(expand && styles.expandTextArea),
+          loading: loading,
+          onBlur: function onBlur() {
+            return setIsFocused(false);
           },
-          style: expand ? {
-            top: 6
-          } : {}
-        }), /*#__PURE__*/_jsx(InnerContainer, {
-          children: /*#__PURE__*/_jsx(ChatInputAreaInner, {
-            autoSize: expand ? false : {
-              maxRows: 6,
-              minRows: 0
-            },
-            className: cx(expand && styles.expandTextArea),
-            loading: loading,
-            onBlur: function onBlur() {
-              return setIsFocused(false);
-            },
-            onFocus: function onFocus() {
-              return setIsFocused(true);
-            },
-            onInput: onInput,
-            onSend: onSend,
-            ref: ref,
-            style: {
-              height: 36,
-              paddingBlock: 6
-            },
-            type: expand ? 'pure' : 'block',
-            value: value
-          })
-        })]
-      }), bottomAddons && /*#__PURE__*/_jsx(Flexbox, {
-        style: showAddons ? {} : {
-          display: 'none'
-        },
-        children: bottomAddons
+          onFocus: function onFocus() {
+            return setIsFocused(true);
+          },
+          onInput: onInput,
+          onSend: onSend,
+          ref: ref,
+          style: {
+            height: 36,
+            paddingBlock: 6
+          },
+          type: expand ? 'pure' : 'block',
+          value: value
+        })
       })]
-    }), safeArea && !isFocused && /*#__PURE__*/_jsx(MobileSafeArea, {
-      position: 'bottom'
+    }), bottomAddons && /*#__PURE__*/_jsx(Flexbox, {
+      style: showAddons ? {} : {
+        display: 'none'
+      },
+      children: bottomAddons
     })]
   });
 });

package/es/GridBackground/GridShowcase.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
-import { DivProps } from "../types";
+import { FlexboxProps } from 'react-layout-kit';
 import { type GridBackgroundProps } from './index';
-export interface GridShowcaseProps extends DivProps {
+export interface GridShowcaseProps extends FlexboxProps {
     backgroundColor?: GridBackgroundProps['backgroundColor'];
+    innerProps?: FlexboxProps;
 }
 declare const GridShowcase: import("react").NamedExoticComponent<GridShowcaseProps>;
 export default GridShowcase;

package/es/GridBackground/GridShowcase.js

@@ -2,7 +2,7 @@
 
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "children", "backgroundColor"];
+var _excluded = ["style", "children", "backgroundColor", "innerProps"];
 import { useTheme } from 'antd-style';
 import { rgba } from 'polished';
 import { memo } from 'react';
@@ -15,9 +15,10 @@ var GridShowcase = /*#__PURE__*/memo(function (_ref) {
     children = _ref.children,
     _ref$backgroundColor = _ref.backgroundColor,
     backgroundColor = _ref$backgroundColor === void 0 ? '#001dff' : _ref$backgroundColor,
+    innerProps = _ref.innerProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     style: _objectSpread({
       position: 'relative'
     }, style)
@@ -27,13 +28,14 @@ var GridShowcase = /*#__PURE__*/memo(function (_ref) {
       colorBack: rgba(theme.colorText, 0.12),
       colorFront: rgba(theme.colorText, 0.6),
       flip: true
-    }), /*#__PURE__*/_jsx(Flexbox, {
-      align: 'center',
-      style: {
+    }), /*#__PURE__*/_jsx(Flexbox, _objectSpread(_objectSpread({
+      align: 'center'
+    }, innerProps), {}, {
+      style: _objectSpread({
         zIndex: 4
-      },
+      }, innerProps === null || innerProps === void 0 ? void 0 : innerProps.style),
       children: children
-    }), /*#__PURE__*/_jsx(GridBackground, {
+    })), /*#__PURE__*/_jsx(GridBackground, {
       animation: true,
       backgroundColor: backgroundColor,
       colorBack: rgba(theme.colorText, 0.24),

package/es/MobileTabBar/style.js

@@ -7,10 +7,10 @@ export var useStyles = createStyles(function (_ref) {
     token = _ref.token;
   return {
     active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      color: ", ";\n    "])), token.colorPrimary),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      overflow: hidden;\n      flex: none;\n      user-select: none;\n\n      width: 100vw;\n\n      background: ", ";\n      border-block-start: 1px solid ", ";\n    "])), token.colorBgLayout, rgba(token.colorBorder, 0.25)),
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      user-select: none;\n\n      overflow: hidden;\n      flex: none;\n\n      width: 100vw;\n\n      background: ", ";\n      border-block-start: 1px solid ", ";\n    "])), token.colorBgLayout, rgba(token.colorBorder, 0.25)),
     icon: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      width: 24px;\n      height: 24px;\n      font-size: 24px;\n    "]))),
     inner: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      width: 100%;\n      height: 48px;\n    "]))),
-    tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      width: 48px;\n      height: 48px;\n      color: ", ";\n    "])), token.colorTextSecondary),
-    title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n\n      font-size: 12px;\n      line-height: 1.125em;\n      margin-top: -0.125em;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])))
+    tab: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n      cursor: pointer;\n      width: 48px;\n      height: 48px;\n      color: ", ";\n    "])), token.colorTextDescription),
+    title: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n      overflow: hidden;\n\n      width: 100%;\n      margin-block-start: -0.125em;\n\n      font-size: 12px;\n      line-height: 1.125em;\n      text-align: center;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    "])))
   };
 });

package/package.json

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