@lobehub/ui 1.145.6 → 1.146.0

package/es/ChatHeader/index.d.ts

@@ -2,14 +2,12 @@ import { CSSProperties, ReactNode } from 'react';
 import { DivProps } from "../types";
 export interface ChatHeaderProps extends DivProps {
     classNames?: {
+        center?: string;
         left?: string;
         right?: string;
     };
-    contentStyles?: {
-        left?: CSSProperties;
-        right?: CSSProperties;
-    };
     gap?: {
+        center?: number;
         left?: number;
         right?: number;
     };
@@ -17,6 +15,11 @@ export interface ChatHeaderProps extends DivProps {
     onBackClick?: () => void;
     right?: ReactNode;
     showBackButton?: boolean;
+    styles?: {
+        center?: CSSProperties;
+        left?: CSSProperties;
+        right?: CSSProperties;
+    };
 }
 declare const ChatHeader: import("react").NamedExoticComponent<ChatHeaderProps>;
 export default ChatHeader;

package/es/ChatHeader/index.js

@@ -12,11 +12,12 @@ var ChatHeader = /*#__PURE__*/memo(function (_ref) {
     right = _ref.right,
     className = _ref.className,
     style = _ref.style,
-    contentStyles = _ref.contentStyles,
+    contentStyles = _ref.styles,
     classNames = _ref.classNames,
     showBackButton = _ref.showBackButton,
     onBackClick = _ref.onBackClick,
-    gap = _ref.gap;
+    gap = _ref.gap,
+    children = _ref.children;
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
@@ -45,6 +46,13 @@ var ChatHeader = /*#__PURE__*/memo(function (_ref) {
           marginRight: gap !== null && gap !== void 0 && gap.left ? -gap.left / 2 : -6
         }
       }), left]
+    }), children && /*#__PURE__*/_jsx(Flexbox, {
+      align: 'center',
+      className: cx(styles.center, classNames === null || classNames === void 0 ? void 0 : classNames.center),
+      gap: (gap === null || gap === void 0 ? void 0 : gap.center) || 12,
+      horizontal: true,
+      style: contentStyles === null || contentStyles === void 0 ? void 0 : contentStyles.center,
+      children: children
     }), /*#__PURE__*/_jsx(Flexbox, {
       align: 'center',
       className: cx(styles.right, classNames === null || classNames === void 0 ? void 0 : classNames.right),

package/es/ChatHeader/style.d.ts

@@ -1,4 +1,5 @@
 export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    center: import("antd-style").SerializedStyles;
     container: string;
     left: import("antd-style").SerializedStyles;
     right: import("antd-style").SerializedStyles;

package/es/ChatHeader/style.js

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 import { createStyles } from 'antd-style';
 import { rgba } from 'polished';
 export var useStyles = createStyles(function (_ref) {
@@ -8,8 +8,9 @@ export var useStyles = createStyles(function (_ref) {
     stylish = _ref.stylish,
     cx = _ref.cx;
   return {
-    container: cx(stylish.blurStrong, css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n\n        overflow: hidden;\n        grid-area: header;\n        align-self: stretch;\n\n        width: 100%;\n        height: 64px;\n\n        background: linear-gradient(\n          to bottom,\n          ", ",\n          ", "\n        );\n        border-block-end: 1px solid ", ";\n      "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorBorder)),
-    left: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
-    right: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: none;\n    "])))
+    center: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n    "]))),
+    container: cx(stylish.blurStrong, css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        position: absolute;\n        z-index: 10;\n\n        overflow: hidden;\n        grid-area: header;\n        align-self: stretch;\n\n        width: 100%;\n        height: 64px;\n\n        background: linear-gradient(\n          to bottom,\n          ", ",\n          ", "\n        );\n        border-block-end: 1px solid ", ";\n      "])), rgba(token.colorBgLayout, 0.8), rgba(token.colorBgLayout, 0.4), token.colorBorder)),
+    left: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: 1;\n    "]))),
+    right: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n      position: relative;\n      overflow: hidden;\n      flex: none;\n    "])))
   };
 });

package/es/SearchBar/index.d.ts

@@ -1,6 +1,10 @@
-/// <reference types="react" />
+import { CSSProperties } from 'react';
 import { type InputProps } from "../Input";
-export interface SearchBarProps extends InputProps {
+export interface SearchBarProps extends Omit<InputProps, 'styles' | 'classNames'> {
+    classNames: {
+        input?: string;
+        shortKey?: string;
+    };
     defaultValue?: string;
     /**
      * @description Whether to enable the shortcut key to focus on the input
@@ -9,16 +13,21 @@ export interface SearchBarProps extends InputProps {
     enableShortKey?: boolean;
     loading?: boolean;
     onInputChange?: (value: string) => void;
+    /**
+     * @description Whether add spotlight background
+     * @default false
+     */
+    onSearch?: (value: string) => void;
     /**
      * @description The shortcut key to focus on the input. Only works if `enableShortKey` is true
      * @default 'f'
      */
     shortKey?: string;
-    /**
-     * @description Whether add spotlight background
-     * @default false
-     */
     spotlight?: boolean;
+    styles: {
+        input?: CSSProperties;
+        shortKey?: CSSProperties;
+    };
     value?: string;
 }
 declare const SearchBar: import("react").NamedExoticComponent<SearchBarProps>;

package/es/SearchBar/index.js

@@ -3,7 +3,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["defaultValue", "spotlight", "className", "value", "onInputChange", "placeholder", "enableShortKey", "shortKey", "loading"];
+var _excluded = ["defaultValue", "spotlight", "className", "value", "onInputChange", "placeholder", "enableShortKey", "shortKey", "onSearch", "loading", "style", "onChange", "onBlur", "onPressEnter", "onFocus", "styles", "classNames"];
 import { LucideLoader2, Search } from 'lucide-react';
 import { memo, useEffect, useRef, useState } from 'react';
 import useControlledState from 'use-merge-value';
@@ -24,8 +24,20 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
     enableShortKey = _ref.enableShortKey,
     _ref$shortKey = _ref.shortKey,
     shortKey = _ref$shortKey === void 0 ? 'f' : _ref$shortKey,
+    onSearch = _ref.onSearch,
     loading = _ref.loading,
-    properties = _objectWithoutProperties(_ref, _excluded);
+    style = _ref.style,
+    _onChange = _ref.onChange,
+    _onBlur = _ref.onBlur,
+    _onPressEnter = _ref.onPressEnter,
+    _onFocus = _ref.onFocus,
+    _ref$styles = _ref.styles,
+    inputStyle = _ref$styles.input,
+    shortKeyStyle = _ref$styles.shortKey,
+    _ref$classNames = _ref.classNames,
+    inputClassName = _ref$classNames.input,
+    shortKeyClassName = _ref$classNames.shortKey,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useControlledState = useControlledState(defaultValue, {
       defaultValue: defaultValue,
       onChange: onInputChange,
@@ -67,18 +79,34 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
   }, []);
   return /*#__PURE__*/_jsxs("div", {
     className: cx(styles.search, className),
+    style: style,
     children: [spotlight && /*#__PURE__*/_jsx(Spotlight, {}), /*#__PURE__*/_jsx(Input, _objectSpread({
       allowClear: true,
-      className: styles.input,
-      onBlur: function onBlur() {
-        return setShowTag(true);
+      className: cx(styles.input, inputClassName),
+      onBlur: function onBlur(e) {
+        _onBlur === null || _onBlur === void 0 || _onBlur(e);
+        setInputValue(e.target.value);
+        if (!e.target.value) {
+          setShowTag(true);
+        }
       },
       onChange: function onChange(e) {
+        _onChange === null || _onChange === void 0 || _onChange(e);
         setInputValue(e.target.value);
-        setShowTag(!e.target.value);
+        if (e.target.value) {
+          setShowTag(false);
+        } else {
+          setShowTag(true);
+          onSearch === null || onSearch === void 0 || onSearch(e.target.value);
+        }
+      },
+      onFocus: function onFocus(e) {
+        _onFocus === null || _onFocus === void 0 || _onFocus(e);
+        setShowTag(false);
       },
-      onFocus: function onFocus() {
-        return setShowTag(false);
+      onPressEnter: function onPressEnter(e) {
+        _onPressEnter === null || _onPressEnter === void 0 || _onPressEnter(e);
+        onSearch === null || onSearch === void 0 || onSearch(inputValue);
       },
       placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'Type keywords...',
       prefix: /*#__PURE__*/_jsx(Icon, {
@@ -91,9 +119,11 @@ var SearchBar = /*#__PURE__*/memo(function (_ref) {
         }
       }),
       ref: inputReference,
+      style: inputStyle,
       value: value
-    }, properties)), enableShortKey && showTag && !inputValue && /*#__PURE__*/_jsxs(Tag, {
-      className: styles.tag,
+    }, rest)), enableShortKey && showTag && !inputValue && /*#__PURE__*/_jsxs(Tag, {
+      className: cx(styles.tag, shortKeyClassName),
+      style: shortKeyStyle,
       children: [symbol, " ", shortKey.toUpperCase()]
     })]
   });

package/package.json

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