@lobehub/ui 1.60.1 → 1.61.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/Swatches/style.js

@@ -6,6 +6,6 @@ export var useStyles = createStyles(function (_ref, size) {
     token = _ref.token;
   return {
     active: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n      box-shadow: 0 0 0 2px ", ";\n    "])), token.colorTextTertiary),
-    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: 0 0 0 1px ", ";\n\n      transition:\n        scale 400ms ", ",\n        box-shadow 100ms ", ";\n\n      &:hover {\n        box-shadow: 0 0 0 3px ", ";\n      }\n\n      &:active {\n        scale: 0.8;\n      }\n    "])), size, size, token.colorBgContainer, token.colorBorderSecondary, token.motionEaseOut, token.motionEaseOut, token.colorText)
+    container: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      cursor: pointer;\n\n      width: ", "px;\n      height: ", "px;\n\n      background: ", ";\n      border-radius: 50%;\n      box-shadow: inset 0 0 0 2px ", ";\n\n      transition:\n        scale 400ms ", ",\n        box-shadow 100ms ", ";\n\n      &:hover {\n        box-shadow: 0 0 0 3px ", ";\n      }\n\n      &:active {\n        scale: 0.8;\n      }\n    "])), size, size, token.colorBgContainer, token.colorSplit, token.motionEaseOut, token.motionEaseOut, token.colorText)
   };
 });

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.1",
+  "version": "1.61.0",
   "description": "Lobe UI is an open-source UI component library for building chatbot web apps",
   "keywords": [
     "lobehub",