@lobehub/ui 1.168.0 → 1.168.1

package/es/Hotkey/components/LeftClickIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const RightClickIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default RightClickIcon;

package/es/Hotkey/components/LeftClickIcon.js

@@ -0,0 +1,9 @@
+import { createLucideIcon } from 'lucide-react';
+var RightClickIcon = createLucideIcon('right-click', [['path', {
+  d: 'M19 10a7 7 0 10-14 0v4a7 7 0 1014 0v-4zM2 9.333C2 6.36 3.491 3.71 5.814 2',
+  key: '1'
+}], ['path', {
+  d: 'M12 4v7H6',
+  key: '2'
+}]]);
+export default RightClickIcon;

package/es/Hotkey/components/RightClickIcon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const RightClickIcon: import("react").ForwardRefExoticComponent<Omit<import("lucide-react").LucideProps, "ref"> & import("react").RefAttributes<SVGSVGElement>>;
+export default RightClickIcon;

package/es/Hotkey/components/RightClickIcon.js

@@ -0,0 +1,9 @@
+import { createLucideIcon } from 'lucide-react';
+var RightClickIcon = createLucideIcon('right-click', [['path', {
+  d: 'M19 10a7 7 0 10-14 0v4a7 7 0 1014 0v-4zM22 9.333C22 6.36 20.509 3.71 18.186 2',
+  key: '1'
+}], ['path', {
+  d: 'M12 4v7h6',
+  key: '2'
+}]]);
+export default RightClickIcon;

package/es/Hotkey/index.js

@@ -1,12 +1,9 @@
 'use client';
 
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var _excluded = ["classNames", "styles", "keys", "desc", "inverseTheme", "isApple", "compact", "className", "style"];
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-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); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -15,26 +12,84 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import { isString } from 'lodash-es';
-import { ChevronUpIcon, Command, Delete, Option } from 'lucide-react';
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+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 { ArrowBigUpIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, ChevronUpIcon, Command, CornerDownLeftIcon, Delete, Grid2X2Icon, MouseIcon, Option, SpaceIcon } from 'lucide-react';
 import { memo, useEffect, useMemo, useState } from 'react';
 import { Flexbox } from 'react-layout-kit';
 import Icon from "../Icon";
+import LeftClickIcon from "./components/LeftClickIcon";
+import RightClickIcon from "./components/RightClickIcon";
 import { useStyles } from "./style";
-import { ALT_KEY, BACKSPACE_KEY, CONTROL_KEY, META_KEY, MOD_KEY, checkIsAppleDevice, splitKeysByPlus, startCase } from "./utils";
+import { ALT_KEY, BACKSPACE_KEY, CONTROL_KEY, DOWN_KEY, ENTER_KEY, LEFT_CLICK_KEY, LEFT_KEY, META_KEY, MID_CLICK_KEY, MOD_KEY, RIGHT_CLICK_KEY, RIGHT_KEY, SHIFT_KEY, SPACE_KEY, TAB_KEY, UP_KEY, checkIsAppleDevice, splitKeysByPlus, startCase } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-var Hotkey = /*#__PURE__*/memo(function (_ref) {
-  var classNames = _ref.classNames,
-    styles = _ref.styles,
-    keys = _ref.keys,
-    desc = _ref.desc,
-    inverseTheme = _ref.inverseTheme,
-    isApple = _ref.isApple,
-    compact = _ref.compact,
-    className = _ref.className,
-    style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var mappingKey = function mappingKey(isAppleDevice) {
+  var _ref;
+  return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, ALT_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: Option
+  }) : 'Alt'), BACKSPACE_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: Delete
+  }) : 'Backspace'), CONTROL_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: ChevronUpIcon
+  }) : 'Ctrl'), DOWN_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: ArrowDownIcon
+  })), ENTER_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: CornerDownLeftIcon
+  }) : 'Enter'), LEFT_CLICK_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: LeftClickIcon,
+    size: {
+      fontSize: '1.15em',
+      strokeWidth: 1.75
+    }
+  })), LEFT_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: ArrowLeftIcon
+  })), META_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: Command
+  }) : /*#__PURE__*/_jsx(Icon, {
+    icon: Grid2X2Icon
+  })), MID_CLICK_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: MouseIcon,
+    size: {
+      fontSize: '1.15em',
+      strokeWidth: 1.75
+    }
+  })), MOD_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: Command
+  }) : 'Ctrl'), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, RIGHT_CLICK_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: RightClickIcon,
+    size: {
+      fontSize: '1.15em',
+      strokeWidth: 1.75
+    }
+  })), RIGHT_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: ArrowRightIcon
+  })), SHIFT_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: ArrowBigUpIcon,
+    size: {
+      fontSize: '1.15em',
+      strokeWidth: 1.75
+    }
+  }) : 'Shift'), SPACE_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: SpaceIcon
+  })), TAB_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
+    icon: ArrowRightToLineIcon
+  }) : 'Tab'), UP_KEY, /*#__PURE__*/_jsx(Icon, {
+    icon: ArrowUpIcon
+  }));
+};
+var Hotkey = /*#__PURE__*/memo(function (_ref2) {
+  var classNames = _ref2.classNames,
+    styles = _ref2.styles,
+    keys = _ref2.keys,
+    desc = _ref2.desc,
+    inverseTheme = _ref2.inverseTheme,
+    isApple = _ref2.isApple,
+    compact = _ref2.compact,
+    className = _ref2.className,
+    style = _ref2.style,
+    rest = _objectWithoutProperties(_ref2, _excluded);
   var _useStyles = useStyles(inverseTheme),
     cx = _useStyles.cx,
     s = _useStyles.styles;
@@ -47,23 +102,12 @@ var Hotkey = /*#__PURE__*/memo(function (_ref) {
     return checkIsAppleDevice(isApple);
   }, [isApple]);
   useEffect(function () {
-    var mapping = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ALT_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
-      icon: Option
-    }) : 'alt'), BACKSPACE_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
-      icon: Delete
-    }) : 'backspace'), CONTROL_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
-      icon: ChevronUpIcon
-    }) : 'ctrl'), META_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
-      icon: Command
-    }) : 'win'), MOD_KEY, isAppleDevice ? /*#__PURE__*/_jsx(Icon, {
-      icon: Command
-    }) : 'ctrl');
-    var newValue = splitKeysByPlus(keys).map(function (k) {
-      var _mapping$k;
-      return (_mapping$k = mapping[k]) !== null && _mapping$k !== void 0 ? _mapping$k : k;
-    });
+    var newValue = splitKeysByPlus(keys);
     setKeysGroup(newValue);
-  }, [keys, isAppleDevice]);
+  }, [keys]);
+  var mapping = useMemo(function () {
+    return mappingKey(isAppleDevice);
+  }, [isAppleDevice]);
   return /*#__PURE__*/_jsxs(Flexbox, _objectSpread(_objectSpread({
     align: 'center',
     className: cx(s, className),
@@ -87,15 +131,17 @@ var Hotkey = /*#__PURE__*/memo(function (_ref) {
       horizontal: true,
       style: styles === null || styles === void 0 ? void 0 : styles.kbdStyle,
       children: keysGroup.map(function (key, index) {
+        var _mapping$key;
         return /*#__PURE__*/_jsx("div", {
-          children: isString(key) ? startCase(key) : key
+          children: (_mapping$key = mapping[key]) !== null && _mapping$key !== void 0 ? _mapping$key : startCase(key)
         }, index);
       })
     }) : keysGroup.map(function (key, index) {
+      var _mapping$key2;
       return /*#__PURE__*/_jsx("kbd", {
         className: classNames === null || classNames === void 0 ? void 0 : classNames.descClassName,
         style: styles === null || styles === void 0 ? void 0 : styles.kbdStyle,
-        children: isString(key) ? startCase(key) : key
+        children: (_mapping$key2 = mapping[key]) !== null && _mapping$key2 !== void 0 ? _mapping$key2 : startCase(key)
       }, index);
     })]
   }));

package/es/Hotkey/utils.d.ts

@@ -1,8 +1,19 @@
 export declare const ALT_KEY = "alt";
 export declare const MOD_KEY = "mod";
+export declare const SHIFT_KEY = "shift";
 export declare const META_KEY = "meta";
 export declare const BACKSPACE_KEY = "backspace";
 export declare const CONTROL_KEY = "ctrl";
+export declare const SPACE_KEY = "space";
+export declare const TAB_KEY = "tab";
+export declare const ENTER_KEY = "enter";
+export declare const LEFT_KEY = "left";
+export declare const RIGHT_KEY = "right";
+export declare const UP_KEY = "up";
+export declare const DOWN_KEY = "down";
+export declare const RIGHT_CLICK_KEY = "right-click";
+export declare const LEFT_CLICK_KEY = "left-click";
+export declare const MID_CLICK_KEY = "mid-click";
 export declare const splitKeysByPlus: (keys: string) => string[];
 export declare const startCase: (str: string) => string;
 export declare const checkIsAppleDevice: (isApple?: boolean) => boolean;

package/es/Hotkey/utils.js

@@ -1,8 +1,19 @@
 export var ALT_KEY = 'alt';
 export var MOD_KEY = 'mod';
+export var SHIFT_KEY = 'shift';
 export var META_KEY = 'meta';
 export var BACKSPACE_KEY = 'backspace';
 export var CONTROL_KEY = 'ctrl';
+export var SPACE_KEY = 'space';
+export var TAB_KEY = 'tab';
+export var ENTER_KEY = 'enter';
+export var LEFT_KEY = 'left';
+export var RIGHT_KEY = 'right';
+export var UP_KEY = 'up';
+export var DOWN_KEY = 'down';
+export var RIGHT_CLICK_KEY = 'right-click';
+export var LEFT_CLICK_KEY = 'left-click';
+export var MID_CLICK_KEY = 'mid-click';
 export var splitKeysByPlus = function splitKeysByPlus(keys) {
   var placeholder = 'PLACEHOLDER';
   var parts = keys.replaceAll('++', "+".concat(placeholder)).split('+');

package/es/HotkeyInput/index.js

@@ -16,7 +16,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { isEqual } from 'lodash-es';
 import { Undo2Icon } from 'lucide-react';
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useRecordHotkeys } from 'react-hotkeys-hook';
+import { useHotkeys, useRecordHotkeys } from 'react-hotkeys-hook';
 import { Flexbox } from 'react-layout-kit';
 import ActionIcon from "../ActionIcon";
 import Hotkey from "../Hotkey";
@@ -77,7 +77,18 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
     _useRecordHotkeys2$ = _useRecordHotkeys2[1],
     start = _useRecordHotkeys2$.start,
     stop = _useRecordHotkeys2$.stop,
-    isRecording = _useRecordHotkeys2$.isRecording;
+    isRecording = _useRecordHotkeys2$.isRecording,
+    resetKeys = _useRecordHotkeys2$.resetKeys;
+  useHotkeys('*', function () {
+    var _inputRef$current;
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
+  }, {
+    enableOnContentEditable: true,
+    enableOnFormTags: true,
+    enabled: isRecording && !disabled,
+    keydown: false,
+    keyup: true
+  });
 
   // 处理按键，保证格式正确：修饰键在前，最多一个非修饰键在后
   var formatKeys = useCallback(function (keysSet) {
@@ -155,6 +166,7 @@ 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 {
@@ -165,28 +177,28 @@ var HotkeyInput = /*#__PURE__*/memo(function (_ref) {
   }, [recordedKeys, isRecording, isValid, keysString, checkHotkeyConflict, onChange, onConflict]);
 
   // 处理输入框焦点
-  var handleFocus = useCallback(function () {
+  var handleFocus = function handleFocus() {
     if (disabled) return;
     setIsFocused(true);
     setHasConflict(false);
     setHasInvalidCombination(false);
     start(); // 开始记录
-  }, [disabled, start]);
-  var handleBlur = useCallback(function () {
+  };
+  var handleBlur = function handleBlur() {
     setIsFocused(false);
     stop(); // 停止记录
-  }, [stop]);
+  };
 
   // 重置功能
-  var handleReset = useCallback(function (e) {
-    var _inputRef$current;
+  var handleReset = function handleReset(e) {
     e.preventDefault();
     e.stopPropagation();
     onChange === null || onChange === void 0 || onChange(defaultValue);
+    resetKeys();
     setHasConflict(false);
     setHasInvalidCombination(false);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.blur();
-  }, [onChange, defaultValue]);
+    handleBlur();
+  };
   return /*#__PURE__*/_jsxs(Flexbox, {
     className: className,
     gap: 8,

package/package.json

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