@lobehub/ui 1.60.2 → 1.62.0

package/es/EditableText/index.d.ts

@@ -1,5 +1,9 @@
 /// <reference types="react" />
 import { ControlInputProps } from "../components/ControlInput";
-export type EditableTextProps = ControlInputProps;
-declare const EditableText: import("react").NamedExoticComponent<ControlInputProps>;
+export interface EditableTextProps extends ControlInputProps {
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    showEditIcon?: boolean;
+}
+declare const EditableText: import("react").NamedExoticComponent<EditableTextProps>;
 export default EditableText;

package/es/EditableText/index.js

@@ -1,28 +1,42 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["value", "showEditIcon", "onChange", "editing", "onEditingChange"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { Edit3 } from 'lucide-react';
-import { memo, useState } from 'react';
+import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
+import useControlledState from 'use-merge-value';
 import ActionIcon from "../ActionIcon";
 import { ControlInput } from "../components/ControlInput";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var EditableText = /*#__PURE__*/memo(function (_ref) {
   var value = _ref.value,
-    onChange = _ref.onChange;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    edited = _useState2[0],
-    setEdited = _useState2[1];
-  return edited ? /*#__PURE__*/_jsx(ControlInput, {
+    _ref$showEditIcon = _ref.showEditIcon,
+    showEditIcon = _ref$showEditIcon === void 0 ? true : _ref$showEditIcon,
+    onChange = _ref.onChange,
+    editing = _ref.editing,
+    onEditingChange = _ref.onEditingChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useControlledState = useControlledState(false, {
+      onChange: onEditingChange,
+      value: editing
+    }),
+    _useControlledState2 = _slicedToArray(_useControlledState, 2),
+    edited = _useControlledState2[0],
+    setEdited = _useControlledState2[1];
+  return edited ? /*#__PURE__*/_jsx(ControlInput, _objectSpread({
     onChange: onChange,
     onChangeEnd: function onChangeEnd() {
       setEdited(false);
     },
     value: value
-  }) : /*#__PURE__*/_jsxs(Flexbox, {
+  }, props)) : /*#__PURE__*/_jsxs(Flexbox, {
     gap: 8,
     horizontal: true,
-    children: [value, /*#__PURE__*/_jsx(ActionIcon, {
+    children: [value, showEditIcon && /*#__PURE__*/_jsx(ActionIcon, {
       icon: Edit3,
       onClick: function onClick() {
         setEdited(!edited);

package/es/TokenTag/index.d.ts

@@ -1,6 +1,10 @@
 /// <reference types="react" />
 import { DivProps } from "../types";
 export interface TokenTagProps extends DivProps {
+    /**
+     * @default 'left'
+     */
+    displayMode?: 'left' | 'used';
     /**
      * @description Maximum value for the token
      */

package/es/TokenTag/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "maxValue", "value", "text"];
+var _excluded = ["className", "displayMode", "maxValue", "value", "text"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { forwardRef } from 'react';
@@ -10,6 +10,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
+    _ref$displayMode = _ref.displayMode,
+    displayMode = _ref$displayMode === void 0 ? 'left' : _ref$displayMode,
     maxValue = _ref.maxValue,
     value = _ref.value,
     text = _ref.text,
@@ -38,7 +40,7 @@ var TokenTag = /*#__PURE__*/forwardRef(function (_ref, ref) {
     children: [/*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: ICON_SIZE
-    }), valueLeft > 0 ? (text === null || text === void 0 ? void 0 : text.tokens) || "Tokens ".concat(valueLeft) : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
+    }), valueLeft > 0 ? (text === null || text === void 0 ? void 0 : text.tokens) || "Tokens ".concat(displayMode === 'left' ? valueLeft : value) : (text === null || text === void 0 ? void 0 : text.overload) || 'Overload']
   }));
 });
 export default TokenTag;

package/es/components/ControlInput.js

@@ -30,6 +30,7 @@ export var ControlInput = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (value !== undefined) setInput(value);
   }, [value]);
   return /*#__PURE__*/_jsx(Input, _objectSpread({
+    autoFocus: true,
     onBlur: function onBlur() {
       isFocusing.current = false;
       onChangeEnd === null || onChangeEnd === void 0 ? void 0 : onChangeEnd(input);

package/package.json

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