@lobehub/ui 1.145.7 → 1.146.1

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,22 @@ 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,
+    _ref$styles2 = _ref$styles === void 0 ? {} : _ref$styles,
+    inputStyle = _ref$styles2.input,
+    shortKeyStyle = _ref$styles2.shortKey,
+    _ref$classNames = _ref.classNames,
+    _ref$classNames2 = _ref$classNames === void 0 ? {} : _ref$classNames,
+    inputClassName = _ref$classNames2.input,
+    shortKeyClassName = _ref$classNames2.shortKey,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var _useControlledState = useControlledState(defaultValue, {
       defaultValue: defaultValue,
       onChange: onInputChange,
@@ -67,18 +81,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 +121,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.7",
+  "version": "1.146.1",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",