@tiny-codes/react-easy 1.1.2 → 1.2.0

package/lib/components/ContextMenu/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/ContextMenu/index.tsx"],
+  "sourcesContent": ["import type { CSSProperties, ReactNode } from 'react';\nimport { forwardRef, useContext, useImperativeHandle, useMemo } from 'react';\nimport { theme as AntdTheme, ConfigProvider, Typography } from 'antd';\nimport classNames from 'classnames';\nimport type { ItemProps, MenuProps, SeparatorProps, ShowContextMenuParams, SubMenuProps } from 'react-contexify';\nimport { Item, Menu, RightSlot, Separator, Submenu, useContextMenu } from 'react-contexify';\nimport { useRefFunction } from '../../hooks';\nimport useStyle from './style';\nimport 'react-contexify/dist/ReactContexify.css';\n\nexport interface ContextMenuProps extends MenuProps {\n  /**\n   * - **EN:** Menu items to be displayed\n   * - **CN:** 要显示的菜单项\n   */\n  items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[] | undefined;\n  /**\n   * - **EN:** Trigger methods to show the menu, default is `['contextMenu']`\n   * - **CN:** 触发显示菜单的方式，默认是 `['contextMenu']`\n   */\n  trigger?: ('click' | 'doubleClick' | 'hover' | 'contextMenu')[];\n  triggerProps?: {\n    className?: string;\n    style?: CSSProperties;\n  };\n  prefixCls?: string;\n}\n// 上下文菜单组件\nconst ContextMenu = forwardRef<ContextMenuRef, ContextMenuProps>((props, ref) => {\n  const {\n    id,\n    items,\n    trigger = ['contextMenu'],\n    triggerProps,\n    prefixCls: prefixClsInProps,\n    className,\n    children,\n    ...rest\n  } = props;\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const prefixCls = getPrefixCls('context-menu', prefixClsInProps);\n  const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);\n  const { show, hideAll } = useContextMenu({ id });\n  const eventNames = useMemo<Record<NonNullable<ContextMenuProps['trigger']>[number], [string, string | undefined]>>(\n    () => ({\n      click: ['onClick', undefined],\n      doubleClick: ['onDoubleClick', undefined],\n      hover: ['onPointerEnter', 'onPointerLeave'],\n      contextMenu: ['onContextMenu', undefined],\n    }),\n    []\n  );\n\n  // Show context menu handler\n  const handleShow = useRefFunction(\n    (event: React.MouseEvent<HTMLElement>, options?: Pick<ShowContextMenuParams, 'position'>) => {\n      show({\n        id,\n        event,\n        props,\n        position: options?.position,\n      });\n    }\n  );\n  // Hide all context menus handler\n  const handleHideAll = useRefFunction(() => {\n    hideAll();\n  });\n  const eventHandlers = useMemo(() => {\n    const handlers: Record<string, (event: React.MouseEvent<HTMLElement>) => void> = {};\n    if (trigger) {\n      trigger.forEach((eventType) => {\n        const [handlerName, leaveHandlerName] = eventNames[eventType];\n        handlers[handlerName] = (event: React.MouseEvent<HTMLElement>) => {\n          handleShow(event);\n        };\n        if (leaveHandlerName) {\n          handlers[leaveHandlerName] = handleHideAll;\n        }\n      });\n    }\n    return handlers;\n  }, [eventNames, trigger]);\n\n  // Expose show and hideAll methods to the ref\n  useImperativeHandle(\n    ref,\n    () => ({\n      show: handleShow,\n      hideAll: handleHideAll,\n    }),\n    []\n  );\n\n  return (\n    <>\n      {children &&\n        wrapCSSVar(\n          <div\n            {...eventHandlers}\n            className={classNames(hashId, cssVarCls, prefixCls, `${prefixCls}-trigger`, triggerProps?.className)}\n            style={triggerProps?.style}\n          >\n            {children}\n          </div>\n        )}\n      {wrapCSSVar(\n        <Menu\n          id={id}\n          className={classNames(\n            hashId,\n            cssVarCls,\n            prefixCls,\n            `${prefixCls}-menu`,\n            {\n              [`${prefixCls}-menu-has-items`]: !!items?.length,\n            },\n            className\n          )}\n          {...rest}\n        >\n          {renderItems(items, { theme: props.theme, cmpPrefixCls: prefixCls })}\n        </Menu>\n      )}\n    </>\n  );\n});\nContextMenu.displayName = 'ContextMenu';\n\n// Render menu items\nfunction renderItems(\n  items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[] | undefined,\n  options: Pick<ContextMenuProps, 'theme'> & { cmpPrefixCls: string }\n): ReactNode[] | undefined {\n  return items?.map((item, index) => {\n    const isSeparator = 'type' in item && item.type === 'separator';\n    const isSubmenu = 'type' in item && item.type === 'submenu';\n    const menuItem = item as ContextMenuItem;\n\n    if (isSeparator) {\n      // eslint-disable-next-line react/no-array-index-key\n      return <Separator key={`[separator]:${index}`} />;\n    }\n\n    if (isSubmenu) {\n      const subMenu = item as ContextMenuSubmenu;\n      return (\n        <Submenu {...subMenu} key={subMenu.key}>\n          {renderItems(item.items, options)}\n        </Submenu>\n      );\n    }\n\n    return (\n      <Item\n        {...menuItem}\n        keyMatcher={\n          typeof menuItem.shortcutKey === 'object'\n            ? (e) => {\n                const shortcutKey = menuItem.shortcutKey as Partial<KeyboardEvent>;\n                if (shortcutKey.ctrlKey && !e.ctrlKey) return false;\n                if (shortcutKey.altKey && !e.altKey) return false;\n                if (shortcutKey.shiftKey && !e.shiftKey) return false;\n                if (shortcutKey.metaKey && !e.metaKey) return false;\n                if (!shortcutKey.key || shortcutKey.key !== e.key) return false;\n                return true;\n              }\n            : menuItem.shortcutKey\n        }\n        key={menuItem.key}\n      >\n        {menuItem.children ? (\n          menuItem.children\n        ) : (\n          <>\n            {menuItem.icon}\n            <span>{menuItem.label}</span>\n            {typeof menuItem.shortcutKey === 'object' && (\n              <RightSlot>{getShortcutText(menuItem.shortcutKey, options)}</RightSlot>\n            )}\n          </>\n        )}\n      </Item>\n    );\n  });\n}\n\nfunction getShortcutText(\n  event: Partial<Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'key'>>,\n  options: Pick<ContextMenuProps, 'theme'> & { cmpPrefixCls: string }\n): ReactNode[] {\n  const { theme, cmpPrefixCls } = options;\n  const keys: ReactNode[] = [];\n  const Keyboard = (props: { children: ReactNode }) => {\n    return (\n      <ConfigProvider theme={{ algorithm: theme === 'dark' ? AntdTheme.darkAlgorithm : undefined }}>\n        <Typography.Text keyboard className={`${cmpPrefixCls}-shortcut-key`}>\n          {props.children}\n        </Typography.Text>\n      </ConfigProvider>\n    );\n  };\n  if (event.ctrlKey) keys.push(<Keyboard>^</Keyboard>);\n  if (event.altKey) keys.push(<Keyboard>⌥</Keyboard>);\n  if (event.shiftKey) keys.push(<Keyboard>⇧</Keyboard>);\n  if (event.metaKey) keys.push(<Keyboard>⌘</Keyboard>);\n  if (event.key) {\n    keys.push(<Keyboard>{event.key}</Keyboard>);\n  }\n  return keys;\n}\n\nexport interface ContextMenuRef {\n  show: (event: React.MouseEvent<HTMLElement>) => void;\n  hideAll: () => void;\n}\n\nexport interface ContextMenuItem extends Omit<ItemProps, 'children' | 'keyMatcher'> {\n  key: string;\n  className?: string;\n  icon?: ReactNode;\n  label?: ReactNode;\n  shortcutKey?:\n    | Partial<Pick<KeyboardEvent, 'ctrlKey' | 'altKey' | 'shiftKey' | 'metaKey' | 'key'>>\n    | ItemProps['keyMatcher'];\n  children?: ReactNode;\n}\n\nexport interface ContextMenuSeparator extends SeparatorProps {\n  type: 'separator';\n}\n\nexport interface ContextMenuSubmenu extends SubMenuProps {\n  key: string;\n  type: 'submenu';\n  items: (ContextMenuItem | ContextMenuSeparator | ContextMenuSubmenu)[];\n}\n\nexport default ContextMenu;\n"],
+  "mappings": "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",
+  "names": ["useStyle", "classNames", "AntdTheme"]
+}

package/lib/components/ContextMenu/style/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare const _default: (prefixCls: string, rootCls?: string | undefined) => readonly [(node: import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>, string, string];
+export default _default;

package/lib/components/ContextMenu/style/index.js

@@ -0,0 +1,48 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/ContextMenu/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+module.exports = __toCommonJS(style_exports);
+var import_internal = require("antd/es/theme/internal");
+var genStyle = (token) => {
+  const { componentCls } = token;
+  return {
+    [componentCls]: {
+      "&-trigger": {
+        width: "fit-content"
+      },
+      "&-menu": {
+        padding: 0,
+        "&-has-items": {
+          padding: "var(--contexify-menu-padding)"
+        },
+        [`${componentCls}-shortcut-key`]: {
+          kbd: {
+            fontFamily: "-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,sans-serif"
+          }
+        }
+      }
+    }
+  };
+};
+var style_default = (0, import_internal.genStyleHooks)("ContextMenu", genStyle);
+//# sourceMappingURL=index.js.map

package/lib/components/ContextMenu/style/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/ContextMenu/style/index.ts"],
+  "sourcesContent": ["import { genStyleHooks } from 'antd/es/theme/internal';\nimport type { AliasToken, GenerateStyle } from 'antd/es/theme/internal';\nimport type { CSSObject } from '@ant-design/cssinjs';\nimport type { FullToken } from '@ant-design/cssinjs-utils';\n\ntype OverflowTagsToken = FullToken<{ ''?: object }, AliasToken, ''>;\n\nconst genStyle: GenerateStyle<OverflowTagsToken> = (token): CSSObject => {\n  const { componentCls } = token;\n  return {\n    [componentCls]: {\n      '&-trigger': {\n        width: 'fit-content',\n      },\n      '&-menu': {\n        padding: 0,\n        '&-has-items': {\n          padding: 'var(--contexify-menu-padding)',\n        },\n        [`${componentCls}-shortcut-key`]: {\n          kbd: {\n            fontFamily: '-apple-system,BlinkMacSystemFont,PingFang SC,Hiragino Sans GB,sans-serif',\n          },\n        },\n      },\n    },\n  };\n};\n\nexport default genStyleHooks('ContextMenu' as never, genStyle);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAA8B;AAO9B,IAAM,WAA6C,CAAC,UAAqB;AACvE,QAAM,EAAE,aAAa,IAAI;AACzB,SAAO;AAAA,IACL,CAAC,YAAY,GAAG;AAAA,MACd,aAAa;AAAA,QACX,OAAO;AAAA,MACT;AAAA,MACA,UAAU;AAAA,QACR,SAAS;AAAA,QACT,eAAe;AAAA,UACb,SAAS;AAAA,QACX;AAAA,QACA,CAAC,GAAG,2BAA2B,GAAG;AAAA,UAChC,KAAK;AAAA,YACH,YAAY;AAAA,UACd;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAEA,IAAO,oBAAQ,+BAAc,eAAwB,QAAQ;",
+  "names": []
+}

package/lib/components/DeleteConfirmAction/index.d.ts

@@ -1,8 +1,7 @@
 import { type ConfirmActionWithStatic } from '../ConfirmAction';
 /**
- * **EN:** Delete operation confirmation box
- *
- * **CN:** 删除操作确认框
+ * - **EN:** Delete operation confirmation box
+ * - **CN:** 删除操作确认框
  */
 declare const DeleteConfirmAction: ConfirmActionWithStatic;
 export default DeleteConfirmAction;

package/lib/components/DeleteConfirmAction/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/DeleteConfirmAction/index.tsx"],
-  "sourcesContent": ["import { forwardRef } from 'react';\nimport type { ButtonProps, SwitchProps } from 'antd';\nimport { Button, Switch, Typography } from 'antd';\nimport type { LinkProps } from 'antd/es/typography/Link';\nimport { CloseCircleFilled } from '@ant-design/icons';\nimport { type ConfirmActionWithStatic, genRenderer, withDefaultConfirmActionProps } from '../ConfirmAction';\n\nconst renderDeleteConfirmAction = genRenderer({\n  confirmType: 'delete',\n  danger: true,\n  icon: <CloseCircleFilled />,\n});\nconst forwarded = forwardRef(renderDeleteConfirmAction);\n\n/**\n * **EN:** Delete operation confirmation box\n *\n * **CN:** 删除操作确认框\n */\nconst DeleteConfirmAction = forwarded as unknown as ConfirmActionWithStatic;\n/**\n * **EN:** Deletion confirmation box with button type\n *\n * **CN:** 按钮类型的删除确认框\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nDeleteConfirmAction.Button = withDefaultConfirmActionProps<ButtonProps, 'onClick'>(forwarded as any, {\n  triggerComponent: Button,\n  triggerEvent: 'onClick',\n  triggerProps: {},\n});\n/**\n * **EN:** Deletion confirmation box with switch type\n *\n * **CN:** 开关类型的删除确认框\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nDeleteConfirmAction.Switch = withDefaultConfirmActionProps<SwitchProps, 'onChange'>(forwarded as any, {\n  triggerComponent: Switch,\n  triggerEvent: 'onChange',\n  triggerProps: {},\n});\n/**\n * **EN:** Deletion confirmation box with link type\n *\n * **CN:** 链接类型的删除确认框\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nDeleteConfirmAction.Link = withDefaultConfirmActionProps<LinkProps, 'onClick'>(forwarded as any, {\n  triggerComponent: Typography.Link,\n  triggerEvent: 'onClick',\n  triggerProps: {\n    style: { whiteSpace: 'nowrap' },\n  },\n});\n\nexport default DeleteConfirmAction;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAE3B,kBAA2C;AAE3C,mBAAkC;AAClC,2BAAyF;AAEzF,IAAM,gCAA4B,kCAAY;AAAA,EAC5C,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,MAAM,oCAAC,oCAAkB;AAC3B,CAAC;AACD,IAAM,gBAAY,yBAAW,yBAAyB;AAOtD,IAAM,sBAAsB;AAO5B,oBAAoB,aAAS,oDAAsD,WAAkB;AAAA,EACnG,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,cAAc,CAAC;AACjB,CAAC;AAOD,oBAAoB,aAAS,oDAAuD,WAAkB;AAAA,EACpG,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,cAAc,CAAC;AACjB,CAAC;AAOD,oBAAoB,WAAO,oDAAoD,WAAkB;AAAA,EAC/F,kBAAkB,uBAAW;AAAA,EAC7B,cAAc;AAAA,EACd,cAAc;AAAA,IACZ,OAAO,EAAE,YAAY,SAAS;AAAA,EAChC;AACF,CAAC;AAED,IAAO,8BAAQ;",
+  "sourcesContent": ["import { forwardRef } from 'react';\nimport type { ButtonProps, SwitchProps } from 'antd';\nimport { Button, Switch, Typography } from 'antd';\nimport type { LinkProps } from 'antd/es/typography/Link';\nimport { CloseCircleFilled } from '@ant-design/icons';\nimport { type ConfirmActionWithStatic, genRenderer, withDefaultConfirmActionProps } from '../ConfirmAction';\n\nconst renderDeleteConfirmAction = genRenderer({\n  confirmType: 'delete',\n  danger: true,\n  icon: <CloseCircleFilled />,\n});\nconst forwarded = forwardRef(renderDeleteConfirmAction);\n\n/**\n * - **EN:** Delete operation confirmation box\n * - **CN:** 删除操作确认框\n */\nconst DeleteConfirmAction = forwarded as unknown as ConfirmActionWithStatic;\n/**\n * - **EN:** Deletion confirmation box with button type\n * - **CN:** 按钮类型的删除确认框\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nDeleteConfirmAction.Button = withDefaultConfirmActionProps<ButtonProps, 'onClick'>(forwarded as any, {\n  triggerComponent: Button,\n  triggerEvent: 'onClick',\n  triggerProps: {},\n});\n/**\n * - **EN:** Deletion confirmation box with switch type\n * - **CN:** 开关类型的删除确认框\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nDeleteConfirmAction.Switch = withDefaultConfirmActionProps<SwitchProps, 'onChange'>(forwarded as any, {\n  triggerComponent: Switch,\n  triggerEvent: 'onChange',\n  triggerProps: {},\n});\n/**\n * - **EN:** Deletion confirmation box with link type\n * - **CN:** 链接类型的删除确认框\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nDeleteConfirmAction.Link = withDefaultConfirmActionProps<LinkProps, 'onClick'>(forwarded as any, {\n  triggerComponent: Typography.Link,\n  triggerEvent: 'onClick',\n  triggerProps: {\n    style: { whiteSpace: 'nowrap' },\n  },\n});\n\nexport default DeleteConfirmAction;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA2B;AAE3B,kBAA2C;AAE3C,mBAAkC;AAClC,2BAAyF;AAEzF,IAAM,gCAA4B,kCAAY;AAAA,EAC5C,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,MAAM,oCAAC,oCAAkB;AAC3B,CAAC;AACD,IAAM,gBAAY,yBAAW,yBAAyB;AAMtD,IAAM,sBAAsB;AAM5B,oBAAoB,aAAS,oDAAsD,WAAkB;AAAA,EACnG,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,cAAc,CAAC;AACjB,CAAC;AAMD,oBAAoB,aAAS,oDAAuD,WAAkB;AAAA,EACpG,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,cAAc,CAAC;AACjB,CAAC;AAMD,oBAAoB,WAAO,oDAAoD,WAAkB;AAAA,EAC/F,kBAAkB,uBAAW;AAAA,EAC7B,cAAc;AAAA,EACd,cAAc;AAAA,IACZ,OAAO,EAAE,YAAY,SAAS;AAAA,EAChC;AACF,CAAC;AAED,IAAO,8BAAQ;",
   "names": []
 }

package/lib/components/EditableText/form.d.ts

@@ -0,0 +1,150 @@
+import type { CSSProperties, ReactElement } from 'react';
+import type { ButtonProps, FormItemProps, FormProps, InputProps, SpaceProps } from 'antd';
+import type { TextAreaProps } from 'antd/es/input';
+export interface EditableFormProps<V, IT extends 'Input' | 'TextArea' | RenderInputInterface> {
+    prefixCls?: string;
+    /**
+     * - **EN:** The value to edit
+     * - **CN:** 编辑的值
+     */
+    value: V | undefined;
+    /**
+     * - **EN:** Whether the text is required when editing, default is `true`, if `formItemProps.rules`
+     *   is set, it will override this value
+     * - **CN:** 编辑文本时是否必填，默认值为`true`，如果设置了`formItemProps.rules`，将会覆盖此值
+     *
+     * @default true
+     */
+    required?: boolean;
+    /**
+     * - **EN:** Form properties
+     * - **CN:** 表单属性
+     */
+    formProps?: FormProps;
+    /**
+     * - **EN:** Form item properties
+     * - **CN:** 表单项属性
+     */
+    formItemProps?: FormItemProps;
+    /**
+     * - **EN:** Custom component type for rendering the input box
+     * - **CN:** 自定义设置渲染输入框的组件类型
+     *
+     * @default 'Input'
+     */
+    inputComp?: IT;
+    /**
+     * - **EN:** Input component properties
+     * - **CN:** 输入框组件属性
+     */
+    inputProps?: IT extends 'TextArea' ? TextAreaProps : IT extends 'Input' ? InputProps : never;
+    /**
+     * - **EN:** Whether to display as a block-level element, with width 100%
+     * - **CN:** 是否显示为块级元素，宽度100%
+     *
+     * @default false
+     */
+    block?: boolean;
+    /**
+     * - **EN:** Semantic class names
+     * - **CN:** 语义化类名
+     */
+    classNames?: {
+        /**
+         * - **EN:** Edit mode parent container class name
+         * - **CN:** 编辑模式父容器类名
+         */
+        wrapper?: string;
+        /**
+         * - **EN:** Submit button class name
+         * - **CN:** 提交按钮类名
+         */
+        submitButton?: string;
+        /**
+         * - **EN:** Cancel button class name
+         * - **CN:** 取消按钮类名
+         */
+        cancelButton?: string;
+        /**
+         * - **EN:** Submit button icon class name
+         * - **CN:** 提交按钮图标类名
+         */
+        submitIcon?: string;
+        /**
+         * - **EN:** Cancel button icon class name
+         * - **CN:** 取消按钮图标类名
+         */
+        cancelIcon?: string;
+    };
+    /**
+     * - **EN:** Semantic styles
+     * - **CN:** 语义化样式
+     */
+    styles?: {
+        /**
+         * - **EN:** Edit mode parent container style
+         * - **CN:** 编辑模式父容器样式
+         */
+        wrapper?: CSSProperties;
+        /**
+         * - **EN:** Submit button style
+         * - **CN:** 提交按钮样式
+         */
+        submitButton?: CSSProperties;
+        /**
+         * - **EN:** Cancel button style
+         * - **CN:** 取消按钮样式
+         */
+        cancelButton?: CSSProperties;
+        /**
+         * - **EN:** Submit button icon style
+         * - **CN:** 提交按钮图标样式
+         */
+        submitIcon?: CSSProperties;
+        /**
+         * - **EN:** Cancel button icon style
+         * - **CN:** 取消按钮图标样式
+         */
+        cancelIcon?: CSSProperties;
+    };
+    /**
+     * **EN:** Submit and cancel action button alignment
+     *
+     * **CN:** 提交、取消操作按钮的对齐方式
+     *
+     * - `start` - align to the top | 顶部对齐
+     * - `center` - align to the center | 居中对齐
+     * - `end` - align to the bottom | 底部对齐
+     *
+     * @default 'center'
+     */
+    actionAlign?: SpaceProps['align'];
+    /**
+     * - **EN:** Submit button properties
+     * - **CN:** 提交操作按钮属性
+     */
+    submitProps?: ButtonProps;
+    /**
+     * - **EN:** Cancel button properties
+     * - **CN:** 取消操作按钮属性
+     */
+    cancelProps?: ButtonProps;
+    /**
+     * - **EN:** Confirm button click event, supports asynchronous operations
+     * - **CN:** 确认按钮点击事件，支持异步操作
+     */
+    onOk: (value: V | undefined) => void | Promise<void>;
+    /**
+     * - **EN:** Cancel button click event, supports asynchronous operations
+     * - **CN:** 取消按钮点击事件，支持异步操作
+     */
+    onCancel?: () => void | Promise<void>;
+}
+declare const EditableTextForm: <V, IT extends "Input" | RenderInputInterface | "TextArea">(props: EditableFormProps<V, IT>) => import("react/jsx-runtime").JSX.Element;
+export type RenderInputInterface = <V>(props: RenderInputProps<V>) => ReactElement | null;
+export interface RenderInputProps<V> extends Omit<EditableFormProps<V, 'Input'>, 'inputComp' | 'inputProps' | 'onOk' | 'onCancel'> {
+    onChange?: (value: V | undefined) => void;
+    submit(): Promise<void>;
+    cancel(): Promise<void>;
+}
+export default EditableTextForm;

package/lib/components/EditableText/form.js

@@ -0,0 +1,253 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/EditableText/form.tsx
+var form_exports = {};
+__export(form_exports, {
+  default: () => form_default
+});
+module.exports = __toCommonJS(form_exports);
+var import_react = require("react");
+var import_antd = require("antd");
+var import_classnames = __toESM(require("classnames"));
+var import_icons = require("@ant-design/icons");
+var import_useT = __toESM(require("../../hooks/useT"));
+var defaultInputActionGap = 8;
+var EditableTextForm = (props) => {
+  var _a, _b;
+  const {
+    prefixCls,
+    value,
+    required = true,
+    classNames,
+    styles: styleNames,
+    inputComp = "Input",
+    block: blockInProps = false,
+    formProps,
+    formItemProps,
+    inputProps,
+    actionAlign = "center",
+    submitProps,
+    cancelProps,
+    onOk,
+    onCancel
+  } = props;
+  const t = (0, import_useT.default)();
+  const { getPrefixCls: getAntPrefixCls } = (0, import_react.useContext)(import_antd.ConfigProvider.ConfigContext);
+  const [form] = import_antd.Form.useForm();
+  const wrapperRef = (0, import_react.useRef)(null);
+  const inputRef = (0, import_react.useRef)(null);
+  const supportAutoScale = inputComp === "Input" || inputComp === "TextArea";
+  const detectorRef = (0, import_react.useRef)(null);
+  const actionRef = (0, import_react.useRef)(null);
+  const [inputWidth, setInputWidth] = (0, import_react.useState)();
+  const [visibility, setVisibility] = (0, import_react.useState)("hidden");
+  const [forceBlock, setForceBlock] = (0, import_react.useState)(false);
+  const [saving, setSaving] = (0, import_react.useState)(false);
+  const inputActionGapRef = (0, import_react.useRef)(0);
+  inputActionGapRef.current = pxToNumber(((_a = formItemProps == null ? void 0 : formItemProps.style) == null ? void 0 : _a.marginRight) ?? ((_b = formItemProps == null ? void 0 : formItemProps.style) == null ? void 0 : _b.marginInlineEnd)) || defaultInputActionGap;
+  const block = blockInProps || forceBlock;
+  (0, import_react.useEffect)(() => {
+    form.setFieldsValue({ value });
+  }, [form, value]);
+  (0, import_react.useEffect)(() => {
+    var _a2, _b2;
+    let contentWidth = 0;
+    const inputElement = (_a2 = inputRef.current) == null ? void 0 : _a2.input;
+    if (detectorRef.current && inputElement && supportAutoScale) {
+      const inputStyle = getComputedStyle(inputElement);
+      contentWidth = detectorRef.current.offsetWidth + pxToNumber(inputStyle.paddingLeft) + pxToNumber(inputStyle.paddingRight) + pxToNumber(inputStyle.borderLeftWidth) + pxToNumber(inputStyle.borderRightWidth);
+      setInputWidth(contentWidth);
+    }
+    const actionWidth = ((_b2 = actionRef.current) == null ? void 0 : _b2.offsetWidth) || 0;
+    const gap = inputActionGapRef.current;
+    setVisibility("visible");
+    const observer = new ResizeObserver(([entity]) => {
+      const wrapperWidth = entity.contentRect.width;
+      if (contentWidth + actionWidth + gap - wrapperWidth > 1) {
+        setForceBlock(true);
+      } else {
+        setForceBlock(false);
+      }
+    });
+    if (wrapperRef.current) {
+      observer.observe(wrapperRef.current);
+    }
+    return () => observer.disconnect();
+  }, [supportAutoScale]);
+  const handleCancel = async () => {
+    form.resetFields();
+    try {
+      await (onCancel == null ? void 0 : onCancel());
+    } catch (error) {
+      console.error(error);
+    }
+  };
+  const handleEscape = async (e) => {
+    var _a2;
+    if ((inputComp === "Input" || inputComp === "TextArea") && e.key === "Escape") {
+      await handleCancel();
+      (_a2 = cancelProps == null ? void 0 : cancelProps.onClick) == null ? void 0 : _a2.call(cancelProps, e);
+    }
+  };
+  const handleSubmit = async (values) => {
+    const { value: value2 } = values;
+    try {
+      setSaving(true);
+      await (onOk == null ? void 0 : onOk(value2));
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const renderInput = () => {
+    if (inputComp === "Input" || inputComp === "TextArea") {
+      const COMP = inputComp === "Input" ? import_antd.Input : import_antd.Input.TextArea;
+      return /* @__PURE__ */ React.createElement(
+        COMP,
+        {
+          ref: inputRef,
+          placeholder: t("components.EditableText.placeholder"),
+          ...inputProps,
+          style: {
+            width: block ? void 0 : inputWidth,
+            // Width is 100% in block mode, no need to set width
+            ...inputProps && "style" in inputProps ? inputProps == null ? void 0 : inputProps.style : {}
+          },
+          onPressEnter: () => {
+            if (inputComp === "Input") {
+              form.submit();
+            }
+          },
+          onKeyUp: handleEscape
+        }
+      );
+    } else {
+      return /* @__PURE__ */ React.createElement(
+        CustomInput,
+        {
+          ...props,
+          render: inputComp,
+          submit: async () => {
+            const values = await form.validateFields();
+            await handleSubmit(values);
+          },
+          cancel: handleCancel
+        }
+      );
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { ref: wrapperRef, className: (0, import_classnames.default)(`${prefixCls}-form`, classNames == null ? void 0 : classNames.wrapper), style: styleNames == null ? void 0 : styleNames.wrapper }, /* @__PURE__ */ React.createElement(
+    import_antd.Form,
+    {
+      component: "div",
+      layout: "inline",
+      form,
+      initialValues: { value },
+      autoComplete: "off",
+      onFinish: handleSubmit,
+      ...formProps,
+      style: {
+        visibility,
+        ...formProps == null ? void 0 : formProps.style
+      }
+    },
+    /* @__PURE__ */ React.createElement(
+      import_antd.Form.Item,
+      {
+        rules: [{ required, message: t("components.EditableText.requiredMsg") }],
+        ...formItemProps,
+        className: (0, import_classnames.default)(formItemProps == null ? void 0 : formItemProps.className, { [`${getAntPrefixCls("form-item-block")}`]: block }),
+        style: {
+          marginInlineEnd: defaultInputActionGap,
+          ...formItemProps == null ? void 0 : formItemProps.style
+        },
+        name: "value"
+      },
+      renderInput()
+    ),
+    supportAutoScale && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        ref: detectorRef,
+        style: {
+          position: "absolute",
+          visibility: "hidden",
+          height: 0,
+          whiteSpace: "pre"
+        }
+      },
+      value == null ? void 0 : value.toString()
+    ),
+    /* @__PURE__ */ React.createElement(import_antd.Space, { ref: actionRef, className: `${prefixCls}-form-btns`, align: actionAlign, size: 4 }, /* @__PURE__ */ React.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        disabled: saving,
+        loading: saving,
+        title: t("components.EditableText.save"),
+        icon: /* @__PURE__ */ React.createElement(import_icons.CheckSquareFilled, { className: classNames == null ? void 0 : classNames.submitIcon, style: styleNames == null ? void 0 : styleNames.submitIcon }),
+        style: styleNames == null ? void 0 : styleNames.submitButton,
+        onClick: () => form.submit(),
+        ...submitProps,
+        className: (0, import_classnames.default)(
+          `${prefixCls}-form-btn`,
+          `${prefixCls}-form-btn-save`,
+          classNames == null ? void 0 : classNames.submitButton,
+          submitProps == null ? void 0 : submitProps.className
+        )
+      }
+    ), /* @__PURE__ */ React.createElement(
+      import_antd.Button,
+      {
+        type: "text",
+        style: styleNames == null ? void 0 : styleNames.cancelButton,
+        className: (0, import_classnames.default)(`${prefixCls}-form-btn`, `${prefixCls}-form-btn-close`, classNames == null ? void 0 : classNames.cancelButton),
+        title: t("components.EditableText.cancel"),
+        icon: /* @__PURE__ */ React.createElement(import_icons.CloseSquareFilled, { className: classNames == null ? void 0 : classNames.cancelIcon, style: styleNames == null ? void 0 : styleNames.cancelIcon }),
+        onClick: async (e) => {
+          var _a2;
+          await handleCancel();
+          (_a2 = cancelProps == null ? void 0 : cancelProps.onClick) == null ? void 0 : _a2.call(cancelProps, e);
+        },
+        ...cancelProps
+      }
+    ))
+  ));
+};
+function CustomInput(props) {
+  const { render, value, onChange, ...restProps } = props;
+  const useInput = render;
+  return useInput({ ...restProps, value, onChange });
+}
+function pxToNumber(px) {
+  return px ? parseFloat(px.toString().replace("px", "")) : 0;
+}
+var form_default = EditableTextForm;
+//# sourceMappingURL=form.js.map

package/lib/components/EditableText/form.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/EditableText/form.tsx"],
+  "sourcesContent": ["import type { CSSProperties, ReactElement } from 'react';\nimport { useContext, useEffect, useRef, useState } from 'react';\nimport type { ButtonProps, FormItemProps, FormProps, InputProps, SpaceProps } from 'antd';\nimport { Button, ConfigProvider, Form, Input, Space } from 'antd';\nimport type { InputRef, TextAreaProps } from 'antd/es/input';\nimport names from 'classnames';\nimport { CheckSquareFilled, CloseSquareFilled } from '@ant-design/icons';\nimport useT from '../../hooks/useT';\n\nconst defaultInputActionGap = 8;\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport interface EditableFormProps<V, IT extends 'Input' | 'TextArea' | RenderInputInterface> {\n  prefixCls?: string;\n  /**\n   * - **EN:** The value to edit\n   * - **CN:** 编辑的值\n   */\n  value: V | undefined;\n  /**\n   * - **EN:** Whether the text is required when editing, default is `true`, if `formItemProps.rules`\n   *   is set, it will override this value\n   * - **CN:** 编辑文本时是否必填，默认值为`true`，如果设置了`formItemProps.rules`，将会覆盖此值\n   *\n   * @default true\n   */\n  required?: boolean;\n  /**\n   * - **EN:** Form properties\n   * - **CN:** 表单属性\n   */\n  formProps?: FormProps;\n  /**\n   * - **EN:** Form item properties\n   * - **CN:** 表单项属性\n   */\n  formItemProps?: FormItemProps;\n  /**\n   * - **EN:** Custom component type for rendering the input box\n   * - **CN:** 自定义设置渲染输入框的组件类型\n   *\n   * @default 'Input'\n   */\n  inputComp?: IT;\n  /**\n   * - **EN:** Input component properties\n   * - **CN:** 输入框组件属性\n   */\n  inputProps?: IT extends 'TextArea' ? TextAreaProps : IT extends 'Input' ? InputProps : never;\n  /**\n   * - **EN:** Whether to display as a block-level element, with width 100%\n   * - **CN:** 是否显示为块级元素，宽度100%\n   *\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * - **EN:** Semantic class names\n   * - **CN:** 语义化类名\n   */\n  classNames?: {\n    /**\n     * - **EN:** Edit mode parent container class name\n     * - **CN:** 编辑模式父容器类名\n     */\n    wrapper?: string;\n    /**\n     * - **EN:** Submit button class name\n     * - **CN:** 提交按钮类名\n     */\n    submitButton?: string;\n    /**\n     * - **EN:** Cancel button class name\n     * - **CN:** 取消按钮类名\n     */\n    cancelButton?: string;\n    /**\n     * - **EN:** Submit button icon class name\n     * - **CN:** 提交按钮图标类名\n     */\n    submitIcon?: string;\n    /**\n     * - **EN:** Cancel button icon class name\n     * - **CN:** 取消按钮图标类名\n     */\n    cancelIcon?: string;\n  };\n  /**\n   * - **EN:** Semantic styles\n   * - **CN:** 语义化样式\n   */\n  styles?: {\n    /**\n     * - **EN:** Edit mode parent container style\n     * - **CN:** 编辑模式父容器样式\n     */\n    wrapper?: CSSProperties;\n    /**\n     * - **EN:** Submit button style\n     * - **CN:** 提交按钮样式\n     */\n    submitButton?: CSSProperties;\n    /**\n     * - **EN:** Cancel button style\n     * - **CN:** 取消按钮样式\n     */\n    cancelButton?: CSSProperties;\n    /**\n     * - **EN:** Submit button icon style\n     * - **CN:** 提交按钮图标样式\n     */\n    submitIcon?: CSSProperties;\n    /**\n     * - **EN:** Cancel button icon style\n     * - **CN:** 取消按钮图标样式\n     */\n    cancelIcon?: CSSProperties;\n  };\n  /**\n   * **EN:** Submit and cancel action button alignment\n   *\n   * **CN:** 提交、取消操作按钮的对齐方式\n   *\n   * - `start` - align to the top | 顶部对齐\n   * - `center` - align to the center | 居中对齐\n   * - `end` - align to the bottom | 底部对齐\n   *\n   * @default 'center'\n   */\n  actionAlign?: SpaceProps['align'];\n  /**\n   * - **EN:** Submit button properties\n   * - **CN:** 提交操作按钮属性\n   */\n  submitProps?: ButtonProps;\n  /**\n   * - **EN:** Cancel button properties\n   * - **CN:** 取消操作按钮属性\n   */\n  cancelProps?: ButtonProps;\n  /**\n   * - **EN:** Confirm button click event, supports asynchronous operations\n   * - **CN:** 确认按钮点击事件，支持异步操作\n   */\n  onOk: (value: V | undefined) => void | Promise<void>;\n  /**\n   * - **EN:** Cancel button click event, supports asynchronous operations\n   * - **CN:** 取消按钮点击事件，支持异步操作\n   */\n  onCancel?: () => void | Promise<void>;\n}\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nconst EditableTextForm = <V, IT extends 'Input' | 'TextArea' | RenderInputInterface>(\n  props: EditableFormProps<V, IT>\n) => {\n  const {\n    prefixCls,\n    value,\n    required = true,\n    classNames,\n    styles: styleNames,\n    inputComp = 'Input' as IT,\n    block: blockInProps = false,\n    formProps,\n    formItemProps,\n    inputProps,\n    actionAlign = 'center',\n    submitProps,\n    cancelProps,\n    onOk,\n    onCancel,\n  } = props;\n  const t = useT();\n  const { getPrefixCls: getAntPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  const [form] = Form.useForm<{ value: V | undefined }>();\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<InputRef>(null);\n  const supportAutoScale = inputComp === 'Input' || inputComp === 'TextArea';\n  const detectorRef = useRef<HTMLSpanElement>(null);\n  const actionRef = useRef<HTMLDivElement>(null);\n  const [inputWidth, setInputWidth] = useState<number>();\n  const [visibility, setVisibility] = useState<CSSProperties['visibility']>('hidden');\n  const [forceBlock, setForceBlock] = useState(false);\n  const [saving, setSaving] = useState(false);\n  const inputActionGapRef = useRef<number>(0);\n  inputActionGapRef.current =\n    pxToNumber(formItemProps?.style?.marginRight ?? formItemProps?.style?.marginInlineEnd) || defaultInputActionGap;\n  const block = blockInProps || forceBlock;\n\n  // Update form value when `value` prop changes\n  useEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    form.setFieldsValue({ value: value as any });\n  }, [form, value]);\n\n  // Detect the width of the text and dynamically scale the input width until it reaches the max width of the container.\n  // Only built-in Input and TextArea components are supported.\n  useEffect(() => {\n    let contentWidth = 0;\n    const inputElement = inputRef.current?.input;\n    if (detectorRef.current && inputElement && supportAutoScale) {\n      const inputStyle = getComputedStyle(inputElement);\n      contentWidth =\n        detectorRef.current.offsetWidth +\n        pxToNumber(inputStyle.paddingLeft) +\n        pxToNumber(inputStyle.paddingRight) +\n        pxToNumber(inputStyle.borderLeftWidth) +\n        pxToNumber(inputStyle.borderRightWidth);\n      setInputWidth(contentWidth);\n    }\n    const actionWidth = actionRef.current?.offsetWidth || 0; // Width of action buttons\n    const gap = inputActionGapRef.current; // Gap between input box and action buttons\n    setVisibility('visible');\n    // Listen to the width of the wrapper container, if the input box width is greater than the wrapper container width,\n    const observer = new ResizeObserver(([entity]) => {\n      const wrapperWidth = entity.contentRect.width;\n      // Width deviation greater than 1px is considered overflow, to avoid misjudgment due to pixel density or scaling\n      if (contentWidth + actionWidth + gap - wrapperWidth > 1) {\n        setForceBlock(true);\n      } else {\n        setForceBlock(false);\n      }\n    });\n    if (wrapperRef.current) {\n      observer.observe(wrapperRef.current);\n    }\n    return () => observer.disconnect();\n  }, [supportAutoScale]);\n\n  // Cancel editing\n  const handleCancel = async () => {\n    form.resetFields();\n    try {\n      await onCancel?.();\n    } catch (error) {\n      console.error(error);\n    }\n  };\n  // Pressing the Escape key to cancel editing\n  const handleEscape: InputProps['onKeyUp'] = async (e) => {\n    if ((inputComp === 'Input' || inputComp === 'TextArea') && e.key === 'Escape') {\n      await handleCancel();\n      cancelProps?.onClick?.(e as unknown as React.MouseEvent<HTMLElement>);\n    }\n  };\n  // Submit editing\n  const handleSubmit = async (values: { value: V | undefined }) => {\n    const { value } = values;\n    try {\n      setSaving(true);\n      await onOk?.(value);\n    } catch (error) {\n      console.error(error);\n    } finally {\n      setSaving(false);\n    }\n  };\n\n  const renderInput = () => {\n    if (inputComp === 'Input' || inputComp === 'TextArea') {\n      const COMP = inputComp === 'Input' ? Input : Input.TextArea;\n      return (\n        <COMP\n          ref={inputRef}\n          placeholder={t('components.EditableText.placeholder')}\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          {...(inputProps as any)}\n          style={{\n            width: block ? undefined : inputWidth, // Width is 100% in block mode, no need to set width\n            ...(inputProps && 'style' in inputProps ? inputProps?.style : {}),\n          }}\n          onPressEnter={() => {\n            if (inputComp === 'Input') {\n              form.submit();\n            }\n          }}\n          onKeyUp={handleEscape}\n        />\n      );\n    } else {\n      return (\n        <CustomInput<V>\n          {...props}\n          render={inputComp}\n          submit={async () => {\n            const values = await form.validateFields();\n            await handleSubmit(values);\n          }}\n          cancel={handleCancel}\n        />\n      );\n    }\n  };\n\n  return (\n    <div ref={wrapperRef} className={names(`${prefixCls}-form`, classNames?.wrapper)} style={styleNames?.wrapper}>\n      <Form\n        component=\"div\" // Do not use form tag to avoid conflicts with external form, which may be nested in other forms\n        layout=\"inline\"\n        form={form}\n        initialValues={{ value }}\n        autoComplete=\"off\"\n        onFinish={handleSubmit}\n        {...formProps}\n        style={{\n          visibility,\n          ...formProps?.style,\n        }}\n      >\n        {/* Input box */}\n        <Form.Item\n          rules={[{ required, message: t('components.EditableText.requiredMsg') }]}\n          {...formItemProps}\n          className={names(formItemProps?.className, { [`${getAntPrefixCls('form-item-block')}`]: block })}\n          style={{\n            marginInlineEnd: defaultInputActionGap,\n            ...formItemProps?.style,\n          }}\n          name=\"value\"\n        >\n          {renderInput()}\n        </Form.Item>\n        {/* Used to calculate the width of the text content */}\n        {supportAutoScale && (\n          <span\n            ref={detectorRef}\n            style={{\n              position: 'absolute',\n              visibility: 'hidden',\n              height: 0,\n              whiteSpace: 'pre',\n            }}\n          >\n            {value?.toString()}\n          </span>\n        )}\n\n        {/* Action buttons */}\n        <Space ref={actionRef} className={`${prefixCls}-form-btns`} align={actionAlign} size={4}>\n          <Button\n            type=\"text\"\n            disabled={saving}\n            loading={saving}\n            title={t('components.EditableText.save')}\n            icon={<CheckSquareFilled className={classNames?.submitIcon} style={styleNames?.submitIcon} />}\n            style={styleNames?.submitButton}\n            onClick={() => form.submit()}\n            {...submitProps}\n            className={names(\n              `${prefixCls}-form-btn`,\n              `${prefixCls}-form-btn-save`,\n              classNames?.submitButton,\n              submitProps?.className\n            )}\n          />\n          <Button\n            type=\"text\"\n            style={styleNames?.cancelButton}\n            className={names(`${prefixCls}-form-btn`, `${prefixCls}-form-btn-close`, classNames?.cancelButton)}\n            title={t('components.EditableText.cancel')}\n            icon={<CloseSquareFilled className={classNames?.cancelIcon} style={styleNames?.cancelIcon} />}\n            onClick={async (e) => {\n              await handleCancel();\n              cancelProps?.onClick?.(e);\n            }}\n            {...cancelProps}\n          />\n        </Space>\n      </Form>\n    </div>\n  );\n};\n\nfunction CustomInput<V>(\n  props: RenderInputProps<V> & {\n    render: RenderInputInterface;\n  }\n): ReactElement | null {\n  const { render, value, onChange, ...restProps } = props;\n  const useInput = render;\n  return useInput({ ...restProps, value, onChange });\n}\n\nfunction pxToNumber(px: string | number | null | undefined) {\n  return px ? parseFloat(px.toString().replace('px', '')) : 0;\n}\n\nexport type RenderInputInterface = <V>(props: RenderInputProps<V>) => ReactElement | null;\nexport interface RenderInputProps<V>\n  extends Omit<EditableFormProps<V, 'Input'>, 'inputComp' | 'inputProps' | 'onOk' | 'onCancel'> {\n  onChange?: (value: V | undefined) => void;\n  submit(): Promise<void>;\n  cancel(): Promise<void>;\n}\n\nexport default EditableTextForm;\n"],
+  "mappings": "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",
+  "names": ["useT", "_a", "_b", "value", "names"]
+}