@lobehub/ui 1.168.3 → 1.168.5

package/es/HotkeyInput/index.d.ts

@@ -1,3 +1,4 @@
+import type { InputProps } from 'antd';
 import { type CSSProperties } from 'react';
 export interface HotkeyInputProps {
     allowReset?: boolean;
@@ -6,9 +7,13 @@ export interface HotkeyInputProps {
     disabled?: boolean;
     hotkeyConflicts?: string[];
     isApple?: boolean;
+    onBlur?: InputProps['onBlur'];
     onChange?: (value: string) => void;
     onConflict?: (conflictKey: string) => void;
+    onFocus?: InputProps['onFocus'];
+    onReset?: (currentValue: string, resetValue: string) => void;
     placeholder?: string;
+    resetValue?: string;
     style?: CSSProperties;
     texts?: {
         conflicts?: string;
@@ -16,7 +21,7 @@ export interface HotkeyInputProps {
         reset?: string;
     };
     value?: string;
-    variant?: 'ghost' | 'block' | 'pure';
+    variant?: 'default' | 'ghost' | 'block' | 'pure';
 }
 declare const HotkeyInput: import("react").NamedExoticComponent<HotkeyInputProps>;
 export default HotkeyInput;

package/es/HotkeyInput/index.js

@@ -18,6 +18,7 @@ import { Undo2Icon } from 'lucide-react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';
 import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
 import ActionIcon from "../ActionIcon";
 import Hotkey from "../Hotkey";
 import { checkIsAppleDevice, splitKeysByPlus } from "../Hotkey/utils";
@@ -32,6 +33,8 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
     value = _ref$value === void 0 ? '' : _ref$value,
     _ref$defaultValue = _ref.defaultValue,
     defaultValue = _ref$defaultValue === void 0 ? '' : _ref$defaultValue,
+    _ref$resetValue = _ref.resetValue,
+    resetValue = _ref$resetValue === void 0 ? '' : _ref$resetValue,
     onChange = _ref.onChange,
     onConflict = _ref.onConflict,
     _ref$placeholder = _ref.placeholder,
@@ -45,9 +48,12 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
     _ref$hotkeyConflicts = _ref.hotkeyConflicts,
     hotkeyConflicts = _ref$hotkeyConflicts === void 0 ? [] : _ref$hotkeyConflicts,
     _ref$variant = _ref.variant,
-    variant = _ref$variant === void 0 ? 'ghost' : _ref$variant,
+    variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     texts = _ref.texts,
-    isApple = _ref.isApple;
+    isApple = _ref.isApple,
+    onBlur = _ref.onBlur,
+    onReset = _ref.onReset,
+    onFocus = _ref.onFocus;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isFocused = _useState2[0],
@@ -69,6 +75,14 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
   var isAppleDevice = useMemo(function () {
     return checkIsAppleDevice(isApple);
   }, [isApple]);
+  var _useControlledState = useControlledState(defaultValue, {
+      defaultValue: defaultValue,
+      onChange: onChange,
+      value: value
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    hotkeyValue = _useControlledState2[0],
+    setHotkeyValue = _useControlledState2[1];
 
   // 使用 useRecordHotkeys 处理快捷键录入
   var _useRecordHotkeys = useRecordHotkeys(),
@@ -87,7 +101,8 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
     enableOnFormTags: true,
     enabled: isRecording && !disabled,
     keydown: false,
-    keyup: true
+    keyup: true,
+    preventDefault: true
   });
 
   // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后
@@ -145,7 +160,9 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
 
   // 检查快捷键冲突
   var checkHotkeyConflict = useCallback(function (newHotkey) {
-    return hotkeyConflicts.some(function (conflictKey) {
+    return hotkeyConflicts.filter(function (conflictKey) {
+      return conflictKey !== resetValue;
+    }).some(function (conflictKey) {
       var newKeys = splitKeysByPlus(newHotkey);
       var conflictKeys = splitKeysByPlus(conflictKey);
       return isEqual(newKeys.sort(), conflictKeys.sort());
@@ -166,38 +183,48 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
       // 检查冲突
       var conflict = checkHotkeyConflict(newKeysString);
       if (conflict) {
-        console.log('conflict');
         setHasConflict(true);
         onConflict === null || onConflict === void 0 || onConflict(newKeysString);
       } else {
         setHasConflict(false);
-        onChange === null || onChange === void 0 || onChange(newKeysString);
+        setHotkeyValue === null || setHotkeyValue === void 0 || setHotkeyValue(newKeysString);
       }
     }
-  }, [recordedKeys, isRecording, isValid, keysString, checkHotkeyConflict, onChange, onConflict]);
+  }, [recordedKeys, isRecording, isValid, keysString, checkHotkeyConflict, setHotkeyValue, onConflict]);
 
   // 处理输入框焦点
-  var handleFocus = function handleFocus() {
+  var handleFocus = function handleFocus(e) {
     if (disabled) return;
     setIsFocused(true);
     setHasConflict(false);
     setHasInvalidCombination(false);
     start(); // 开始记录
+    onFocus === null || onFocus === void 0 || onFocus(e);
   };
-  var handleBlur = function handleBlur() {
+  var handleBlur = function handleBlur(e) {
     setIsFocused(false);
     stop(); // 停止记录
+    onBlur === null || onBlur === void 0 || onBlur(e);
   };
 
   // 重置功能
   var handleReset = function handleReset(e) {
     e.preventDefault();
     e.stopPropagation();
-    onChange === null || onChange === void 0 || onChange(defaultValue);
+    setHotkeyValue === null || setHotkeyValue === void 0 || setHotkeyValue(resetValue);
     resetKeys();
     setHasConflict(false);
     setHasInvalidCombination(false);
-    handleBlur();
+    setIsFocused(false);
+    stop(); // 停止记录
+    onReset === null || onReset === void 0 || onReset(hotkeyValue, resetValue);
+  };
+  var handleClick = function handleClick(e) {
+    var _inputRef$current2;
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled || isFocused) return;
+    (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 || _inputRef$current2.focus();
   };
   return /*#__PURE__*/_jsxs(Flexbox, {
     className: className,
@@ -210,10 +237,7 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
       className: cx(styles.input, isFocused && styles.inputFocused, (hasConflict || hasInvalidCombination) && styles.inputError, disabled && styles.inputDisabled),
       horizontal: true,
       justify: 'space-between',
-      onClick: function onClick() {
-        var _inputRef$current2;
-        return !disabled && !isFocused && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.focus());
-      },
+      onClick: handleClick,
       children: [/*#__PURE__*/_jsx("div", {
         style: {
           pointerEvents: 'none'
@@ -223,8 +247,8 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
           children: keys.length > 0 ? /*#__PURE__*/_jsx(Hotkey, {
             keys: keysString
           }) : placeholder
-        }) : value ? /*#__PURE__*/_jsx(Hotkey, {
-          keys: value
+        }) : hotkeyValue ? /*#__PURE__*/_jsx(Hotkey, {
+          keys: hotkeyValue
         }) : /*#__PURE__*/_jsx("span", {
           className: styles.placeholder,
           children: placeholder
@@ -239,7 +263,7 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
         style: {
           pointerEvents: 'none'
         }
-      }), allowReset && value && value !== defaultValue && !disabled && /*#__PURE__*/_jsx(ActionIcon, {
+      }), allowReset && hotkeyValue && hotkeyValue !== resetValue && !disabled && /*#__PURE__*/_jsx(ActionIcon, {
         active: true,
         icon: Undo2Icon,
         onClick: handleReset,

package/es/HotkeyInput/style.d.ts

@@ -1,5 +1,5 @@
 export declare const useStyles: (props?: {
-    variant: 'ghost' | 'block' | 'pure';
+    variant: 'default' | 'ghost' | 'block' | 'pure';
 } | undefined) => import("antd-style").ReturnStyles<{
     errorText: import("antd-style").SerializedStyles;
     hiddenInput: import("antd-style").SerializedStyles;

package/es/HotkeyInput/style.js

@@ -7,7 +7,7 @@ export var useStyles = createStyles(function (_ref, _ref2) {
     token = _ref.token,
     prefixCls = _ref.prefixCls;
   var variant = _ref2.variant;
-  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:focus {\n        border-color: ", ";\n      }\n\n      &.", "-input-affix-wrapper-focused {\n        border-color: ", ";\n      }\n    "])), variant === 'block' ? token.colorFillTertiary : 'transparent', variant === 'block' ? 'transparent' : token.colorBorder, token.borderRadius, token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, prefixCls, token.colorTextQuaternary);
+  var typeStylish = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: ", "px;\n      transition:\n        background-color 100ms ", ",\n        border-color 200ms ", ";\n\n      &:hover {\n        background-color: ", ";\n      }\n\n      &:focus {\n        border-color: ", ";\n      }\n\n      &.", "-input-affix-wrapper-focused {\n        border-color: ", ";\n      }\n    "])), variant === 'block' || variant === 'default' ? token.colorFillTertiary : 'transparent', variant === 'block' ? 'transparent' : token.colorBorder, token.borderRadius, token.motionEaseOut, token.motionEaseOut, token.colorFillTertiary, token.colorTextQuaternary, prefixCls, token.colorTextQuaternary);
   return {
     errorText: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        font-size: 12px;\n        color: ", ";\n      "])), token.colorError),
     hiddenInput: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        cursor: text;\n\n        position: absolute;\n        z-index: -1;\n        inset-block-start: 0;\n        inset-inline-start: 0;\n\n        width: 100%;\n        height: 100%;\n\n        opacity: 0;\n      "]))),

package/package.json

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