@nocobase/flow-engine 2.1.0-beta.26 → 2.1.0-beta.29

package/lib/components/FormItem.d.ts

@@ -14,5 +14,11 @@ interface ExtendedFormItemProps extends FormItemProps {
     labelWrap?: boolean;
     showLabel?: boolean;
 }
+export declare const verticalFormItemLabelStyle: {
+    paddingBottom: number;
+};
+export declare const formItemStyle: {
+    marginBottom: number;
+};
 export declare const FormItem: ({ children, showLabel, labelWidth, ...rest }: ExtendedFormItemProps & ChildExtraProps) => React.JSX.Element;
 export {};

package/lib/components/FormItem.js

@@ -37,11 +37,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var FormItem_exports = {};
 __export(FormItem_exports, {
-  FormItem: () => FormItem
+  FormItem: () => FormItem,
+  formItemStyle: () => formItemStyle,
+  verticalFormItemLabelStyle: () => verticalFormItemLabelStyle
 });
 module.exports = __toCommonJS(FormItem_exports);
 var import_react = __toESM(require("react"));
 var import_antd = require("antd");
+const verticalFormItemLabelStyle = { paddingBottom: 0 };
+const formItemStyle = { marginBottom: 12 };
 const formItemPropKeys = [
   "colon",
   "dependencies",
@@ -90,6 +94,7 @@ const FormItem = /* @__PURE__ */ __name(({
   });
   const { label, labelWrap, colon = true, layout } = rest;
   const effectiveLabelWrap = !layout || layout === "vertical" ? true : labelWrap;
+  const labelColStyle = layout === "vertical" ? { width: labelWidth, ...verticalFormItemLabelStyle } : { width: labelWidth };
   const renderLabel = /* @__PURE__ */ __name(() => {
     if (!showLabel) return null;
     if (effectiveLabelWrap) {
@@ -132,7 +137,8 @@ const FormItem = /* @__PURE__ */ __name(({
     import_antd.Form.Item,
     {
       ...rest,
-      labelCol: { style: { width: labelWidth } },
+      style: { ...formItemStyle, ...rest.style },
+      labelCol: { style: labelColStyle },
       layout,
       label: renderLabel(),
       colon: false,
@@ -147,5 +153,7 @@ const FormItem = /* @__PURE__ */ __name(({
 }, "FormItem");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  FormItem
+  FormItem,
+  formItemStyle,
+  verticalFormItemLabelStyle
 });

package/lib/components/variables/VariableHybridInput.d.ts

@@ -0,0 +1,27 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+import React from 'react';
+import type { MetaTreeNode } from '../../flowContext';
+export interface VariableHybridInputConverters {
+    formatPathToValue?: (item?: MetaTreeNode) => string | undefined;
+    parseValueToPath?: (value?: string) => string[] | undefined;
+    variableRegExp?: RegExp;
+}
+export interface VariableHybridInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    addonBefore?: React.ReactNode;
+    metaTree?: MetaTreeNode[] | (() => MetaTreeNode[] | Promise<MetaTreeNode[]>);
+    converters?: VariableHybridInputConverters;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const VariableHybridInput: React.NamedExoticComponent<VariableHybridInputProps>;

package/lib/components/variables/VariableHybridInput.js

@@ -0,0 +1,499 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+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 __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+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);
+var VariableHybridInput_exports = {};
+__export(VariableHybridInput_exports, {
+  VariableHybridInput: () => VariableHybridInput
+});
+module.exports = __toCommonJS(VariableHybridInput_exports);
+var import_css = require("@emotion/css");
+var import_antd = require("antd");
+var import_react = __toESM(require("react"));
+var import_FlowContextProvider = require("../../FlowContextProvider");
+var import_FlowContextSelector = require("../FlowContextSelector");
+var import_useResolvedMetaTree = require("./useResolvedMetaTree");
+var import_utils = require("./utils");
+const DEFAULT_VARIABLE_REGEXP = /\{\{\s*([^{}]+?)\s*\}\}/g;
+const TAG_CLASS = "nb-variable-tag";
+function reactNodeToPlainText(node) {
+  if (node == null || typeof node === "boolean") return "";
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  if (Array.isArray(node)) return node.map(reactNodeToPlainText).join("");
+  if ((0, import_react.isValidElement)(node)) return reactNodeToPlainText(node.props.children);
+  return "";
+}
+__name(reactNodeToPlainText, "reactNodeToPlainText");
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+__name(escapeHtml, "escapeHtml");
+function getDomValue(element) {
+  const out = [];
+  for (const node of Array.from(element.childNodes)) {
+    if (node instanceof HTMLElement && node.dataset.variable) {
+      out.push(node.dataset.variable);
+    } else {
+      out.push(node.textContent || "");
+    }
+  }
+  return out.join("");
+}
+__name(getDomValue, "getDomValue");
+function createTagHTML(variable, label) {
+  return `<span class="${TAG_CLASS}" contenteditable="false" data-variable="${escapeHtml(
+    variable
+  )}" title="${escapeHtml(label)}">${escapeHtml(label)}</span>`;
+}
+__name(createTagHTML, "createTagHTML");
+function normalizeVariableKey(value) {
+  return value.replace(/^\{\{\s*/, "").replace(/\s*\}\}$/, "").trim();
+}
+__name(normalizeVariableKey, "normalizeVariableKey");
+function renderHTML(value, labelMap, regExp) {
+  const re = new RegExp(regExp.source, regExp.flags.includes("g") ? regExp.flags : `${regExp.flags}g`);
+  return escapeHtml(value || "").replace(re, (matched) => {
+    const label = labelMap.get(normalizeVariableKey(matched)) || matched;
+    return createTagHTML(matched, label);
+  });
+}
+__name(renderHTML, "renderHTML");
+function buildLabelMap(nodes, ctxT, converters) {
+  const map = /* @__PURE__ */ new Map();
+  function walk(items = [], parentTitles = []) {
+    var _a;
+    for (const item of items) {
+      const titlePart = reactNodeToPlainText(item.title || item.name);
+      const titles = [...parentTitles, titlePart];
+      const value = ((_a = converters == null ? void 0 : converters.formatPathToValue) == null ? void 0 : _a.call(converters, item)) ?? (0, import_utils.formatPathToValue)(item);
+      if (value) {
+        map.set(normalizeVariableKey(value), titles.map(ctxT).join("/"));
+      }
+      if (Array.isArray(item.children)) {
+        walk(item.children, titles);
+      }
+    }
+  }
+  __name(walk, "walk");
+  walk(nodes);
+  return map;
+}
+__name(buildLabelMap, "buildLabelMap");
+function pasteHTML(container, html, indexes) {
+  var _a;
+  const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+  const range = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+  if (!range) return;
+  if (indexes) {
+    const children = Array.from(container.childNodes);
+    if (indexes[0] === -1) {
+      if (indexes[1] && children[indexes[1] - 1]) {
+        range.setStartAfter(children[indexes[1] - 1]);
+      } else {
+        range.setStart(container, 0);
+      }
+    } else {
+      range.setStart(children[indexes[0]], indexes[1]);
+    }
+    if (indexes[2] === -1) {
+      if (indexes[3] && children[indexes[3] - 1]) {
+        range.setEndAfter(children[indexes[3] - 1]);
+      } else {
+        range.setEnd(container, 0);
+      }
+    } else {
+      range.setEnd(children[indexes[2]], indexes[3]);
+    }
+  }
+  const wrapper = document.createElement("div");
+  wrapper.innerHTML = html;
+  const fragment = document.createDocumentFragment();
+  let lastNode = null;
+  while (wrapper.firstChild) {
+    lastNode = fragment.appendChild(wrapper.firstChild);
+  }
+  range.deleteContents();
+  range.insertNode(fragment);
+  if (lastNode) {
+    const next = new Range();
+    next.setStartAfter(lastNode);
+    next.collapse(true);
+    selection == null ? void 0 : selection.removeAllRanges();
+    selection == null ? void 0 : selection.addRange(next);
+  }
+}
+__name(pasteHTML, "pasteHTML");
+function getSingleEndRange(nodes, index, offset) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  if (index === -1) {
+    let realIndex2 = offset;
+    let collapseFlag = false;
+    if (realIndex2 && ((_a = nodes[realIndex2 - 1]) == null ? void 0 : _a.nodeName) === "#text" && ((_b = nodes[realIndex2]) == null ? void 0 : _b.nodeName) === "#text") {
+      collapseFlag = true;
+    }
+    let textOffset2 = 0;
+    for (let i = offset - 1; i >= 0; i -= 1) {
+      if (collapseFlag) {
+        if (((_c = nodes[i]) == null ? void 0 : _c.nodeName) === "#text") {
+          textOffset2 += ((_d = nodes[i].textContent) == null ? void 0 : _d.length) || 0;
+        } else {
+          collapseFlag = false;
+        }
+      }
+      if (((_e = nodes[i]) == null ? void 0 : _e.nodeName) === "#text" && ((_f = nodes[i + 1]) == null ? void 0 : _f.nodeName) === "#text") {
+        realIndex2 -= 1;
+      }
+    }
+    return textOffset2 ? [realIndex2, textOffset2] : [-1, realIndex2];
+  }
+  let realIndex = 0;
+  let textOffset = 0;
+  for (let i = 0; i < index + 1; i += 1) {
+    if (((_g = nodes[i]) == null ? void 0 : _g.nodeName) === "#text") {
+      if (i !== index && nodes[i + 1] && ((_h = nodes[i + 1]) == null ? void 0 : _h.nodeName) !== "#text") {
+        realIndex += 1;
+      }
+      textOffset += i === index ? offset : ((_i = nodes[i].textContent) == null ? void 0 : _i.length) || 0;
+    } else {
+      realIndex += 1;
+      textOffset = 0;
+    }
+  }
+  return [realIndex, textOffset];
+}
+__name(getSingleEndRange, "getSingleEndRange");
+function getCurrentRange(element) {
+  var _a;
+  const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+  const range = (selection == null ? void 0 : selection.rangeCount) ? selection.getRangeAt(0) : null;
+  if (!range || !element.contains(range.commonAncestorContainer)) {
+    return [-1, 0, -1, 0];
+  }
+  const nodes = Array.from(element.childNodes);
+  if (!nodes.length) return [-1, 0, -1, 0];
+  const startIndex = range.startContainer === element ? -1 : nodes.indexOf(range.startContainer);
+  const endIndex = range.endContainer === element ? -1 : nodes.indexOf(range.endContainer);
+  return [
+    ...getSingleEndRange(nodes, startIndex, range.startOffset),
+    ...getSingleEndRange(nodes, endIndex, range.endOffset)
+  ];
+}
+__name(getCurrentRange, "getCurrentRange");
+const VariableHybridInputComponent = /* @__PURE__ */ __name((props) => {
+  const { addonBefore, className, converters, disabled, metaTree, onChange, placeholder, style } = props;
+  const { token } = import_antd.theme.useToken();
+  const ctx = (0, import_FlowContextProvider.useFlowContext)();
+  const { resolvedMetaTree } = (0, import_useResolvedMetaTree.useResolvedMetaTree)(metaTree);
+  const inputRef = (0, import_react.useRef)(null);
+  const [isComposing, setIsComposing] = (0, import_react.useState)(false);
+  const [changed, setChanged] = (0, import_react.useState)(false);
+  const [range, setRange] = (0, import_react.useState)([-1, 0, -1, 0]);
+  const value = typeof props.value === "string" ? props.value : props.value == null ? "" : String(props.value);
+  const variableRegExp = (converters == null ? void 0 : converters.variableRegExp) ?? DEFAULT_VARIABLE_REGEXP;
+  const labelMap = (0, import_react.useMemo)(
+    () => buildLabelMap(resolvedMetaTree, ctx.t, converters),
+    [resolvedMetaTree, ctx, converters]
+  );
+  const [html, setHtml] = (0, import_react.useState)(() => renderHTML(value, labelMap, variableRegExp));
+  const emitChange = (0, import_react.useCallback)(
+    (target) => {
+      onChange == null ? void 0 : onChange(getDomValue(target).trim());
+    },
+    [onChange]
+  );
+  (0, import_react.useEffect)(() => {
+    setHtml(renderHTML(value, labelMap, variableRegExp));
+    if (!changed) {
+      setRange([-1, 0, -1, 0]);
+    }
+  }, [value, labelMap]);
+  (0, import_react.useEffect)(() => {
+    var _a;
+    const element = inputRef.current;
+    if (!element) return;
+    if (document.activeElement !== element) return;
+    const nextRange = new Range();
+    if (changed) {
+      if (range.join() === "-1,0,-1,0") return;
+      const selection = (_a = window.getSelection) == null ? void 0 : _a.call(window);
+      if (!selection) return;
+      try {
+        const children = Array.from(element.childNodes);
+        if (children.length) {
+          if (range[0] === -1) {
+            if (range[1]) nextRange.setStartAfter(children[range[1] - 1]);
+          } else {
+            nextRange.setStart(children[range[0]], range[1]);
+          }
+          if (range[2] === -1) {
+            if (range[3]) nextRange.setEndAfter(children[range[3] - 1]);
+          } else {
+            nextRange.setEnd(children[range[2]], range[3]);
+          }
+        }
+        nextRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(nextRange);
+      } catch {
+      }
+    } else {
+      const { lastChild } = element;
+      if (lastChild) {
+        nextRange.setStartAfter(lastChild);
+        nextRange.setEndAfter(lastChild);
+        const nodes = Array.from(element.childNodes);
+        const idx = nodes.indexOf(lastChild);
+        const startIndex = nextRange.startContainer === element ? -1 : idx;
+        const endIndex = nextRange.startContainer === element ? -1 : idx;
+        setRange([startIndex, nextRange.startOffset, endIndex, nextRange.endOffset]);
+      }
+    }
+  }, [changed, html, range]);
+  const insertVariable = (0, import_react.useCallback)(
+    (variable, meta) => {
+      const current = inputRef.current;
+      if (!current || !variable) return;
+      const label = labelMap.get(normalizeVariableKey(variable)) || (meta ? [...meta.parentTitles || [], reactNodeToPlainText(meta.title || meta.name)].map(ctx.t).join("/") : variable);
+      current.focus();
+      pasteHTML(current, createTagHTML(variable, label), range);
+      setChanged(true);
+      setRange(getCurrentRange(current));
+      emitChange(current);
+    },
+    [labelMap, range, emitChange, ctx]
+  );
+  const handleSelectorChange = (0, import_react.useCallback)(
+    (next, meta) => {
+      if (!next) return;
+      insertVariable(next, meta);
+    },
+    [insertVariable]
+  );
+  const handleInput = (0, import_react.useCallback)(
+    ({ currentTarget }) => {
+      if (isComposing) return;
+      setChanged(true);
+      setRange(getCurrentRange(currentTarget));
+      emitChange(currentTarget);
+    },
+    [emitChange, isComposing]
+  );
+  const handleBlur = (0, import_react.useCallback)(({ currentTarget }) => {
+    setRange(getCurrentRange(currentTarget));
+  }, []);
+  const handleKeyDown = (0, import_react.useCallback)((event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+    }
+  }, []);
+  const handlePaste = (0, import_react.useCallback)(
+    (event) => {
+      event.preventDefault();
+      const text = event.clipboardData.getData("text/plain").replace(/\n/g, " ");
+      if (!text) return;
+      setChanged(true);
+      pasteHTML(event.currentTarget, escapeHtml(text));
+      setRange(getCurrentRange(event.currentTarget));
+      emitChange(event.currentTarget);
+    },
+    [emitChange]
+  );
+  const handleCompositionStart = (0, import_react.useCallback)(() => setIsComposing(true), []);
+  const handleCompositionEnd = (0, import_react.useCallback)(
+    ({ currentTarget }) => {
+      setIsComposing(false);
+      setChanged(true);
+      setRange(getCurrentRange(currentTarget));
+      emitChange(currentTarget);
+    },
+    [emitChange]
+  );
+  const wrapperClassName = (0, import_react.useMemo)(
+    () => import_css.css`
+      display: flex;
+      width: 100%;
+      min-width: 0;
+
+      &.ant-space-compact {
+        display: flex;
+      }
+
+      /* The trigger button from FlowContextSelector sits at the right end.
+         Flatten its left corners so it shares the border with the editor. */
+      > .ant-btn {
+        flex-shrink: 0;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+        margin-left: -${token.lineWidth}px;
+      }
+
+      > .ant-btn:hover,
+      > .ant-btn:focus {
+        z-index: 2;
+      }
+    `,
+    [token.lineWidth]
+  );
+  const addonClassName = (0, import_react.useMemo)(
+    () => import_css.css`
+      display: inline-flex;
+      align-items: center;
+      padding: 0 ${token.paddingSM}px;
+      background: ${token.colorFillTertiary};
+      border: ${token.lineWidth}px ${token.lineType} ${token.colorBorder};
+      border-right: 0;
+      border-radius: ${token.borderRadius}px 0 0 ${token.borderRadius}px;
+      color: ${token.colorText};
+      font-size: ${token.fontSize}px;
+      line-height: 1;
+      white-space: nowrap;
+    `,
+    [token]
+  );
+  const editorClassName = (0, import_react.useMemo)(() => {
+    const verticalPad = Math.max(
+      0,
+      (token.controlHeight - Math.round(token.lineHeight * token.fontSize)) / 2 - token.lineWidth
+    );
+    return import_css.css`
+      flex: 1 1 auto;
+      min-width: 0;
+      min-height: ${token.controlHeight}px;
+      padding: ${verticalPad}px ${token.paddingSM}px;
+      overflow: hidden;
+      white-space: pre-wrap;
+      word-break: break-word;
+      line-height: ${token.lineHeight};
+      font-size: ${token.fontSize}px;
+      color: ${token.colorText};
+      background: ${token.colorBgContainer};
+      border: ${token.lineWidth}px ${token.lineType} ${token.colorBorder};
+      /* Right corners are always flat because the X picker button is glued to the right side. */
+      border-radius: ${addonBefore ? "0" : `${token.borderRadius}px 0 0 ${token.borderRadius}px`};
+      cursor: text;
+      transition: all ${token.motionDurationMid};
+      outline: none;
+
+      &:hover {
+        border-color: ${token.colorPrimaryHover};
+        z-index: 1;
+      }
+
+      &:focus,
+      &:focus-visible {
+        border-color: ${token.colorPrimary};
+        box-shadow: 0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline};
+        z-index: 1;
+      }
+
+      &[data-placeholder]:empty::before {
+        content: attr(data-placeholder);
+        color: ${token.colorTextPlaceholder};
+        pointer-events: none;
+      }
+
+      .${TAG_CLASS} {
+        /* inline lets long tag content wrap naturally across lines, mirroring v1. */
+        display: inline;
+        margin: 0 ${token.marginXXS}px;
+        padding: ${token.paddingXXS}px ${token.paddingXS}px;
+        font-size: ${token.fontSizeSM}px;
+        line-height: ${token.lineHeightSM};
+        color: ${token.colorPrimaryText};
+        background: ${token.colorPrimaryBg};
+        border: ${token.lineWidth}px ${token.lineType} ${token.colorPrimaryBorder};
+        border-radius: ${token.borderRadiusSM}px;
+        vertical-align: baseline;
+        user-select: none;
+        cursor: default;
+      }
+
+      &.is-disabled {
+        background: ${token.colorBgContainerDisabled};
+        color: ${token.colorTextDisabled};
+        border-color: ${token.colorBorder};
+        cursor: not-allowed;
+
+        &:hover {
+          border-color: ${token.colorBorder};
+        }
+
+        .${TAG_CLASS} {
+          color: ${token.colorTextDisabled};
+          background: ${token.colorFillTertiary};
+          border-color: ${token.colorBorder};
+        }
+      }
+    `;
+  }, [token, addonBefore]);
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_antd.Space.Compact, { className: (0, import_css.cx)("nb-variable-hybrid-input", wrapperClassName, className), style }, addonBefore != null && /* @__PURE__ */ import_react.default.createElement("span", { className: addonClassName }, addonBefore), /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: inputRef,
+      role: "textbox",
+      "aria-label": "textbox",
+      className: (0, import_css.cx)(editorClassName, {
+        "is-disabled": disabled
+      }),
+      contentEditable: !disabled,
+      "data-placeholder": placeholder,
+      onInput: handleInput,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown,
+      onPaste: handlePaste,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_FlowContextSelector.FlowContextSelector,
+    {
+      metaTree,
+      disabled,
+      parseValueToPath: (converters == null ? void 0 : converters.parseValueToPath) ?? import_utils.parseValueToPath,
+      formatPathToValue: (item) => {
+        var _a;
+        return ((_a = converters == null ? void 0 : converters.formatPathToValue) == null ? void 0 : _a.call(converters, item)) || (0, import_utils.formatPathToValue)(item);
+      },
+      onChange: handleSelectorChange
+    }
+  )));
+}, "VariableHybridInputComponent");
+const VariableHybridInput = import_react.default.memo(VariableHybridInputComponent);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  VariableHybridInput
+});

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

@@ -7,6 +7,8 @@
  * For more information, please refer to: https://www.nocobase.com/agreement.
  */
 export { VariableInput } from './VariableInput';
+export { VariableHybridInput } from './VariableHybridInput';
+export type { VariableHybridInputProps, VariableHybridInputConverters } from './VariableHybridInput';
 export { SlateVariableEditor } from './SlateVariableEditor';
 export { VariableTag } from './VariableTag';
 export { InlineVariableTag } from './InlineVariableTag';

package/lib/components/variables/index.js

@@ -29,12 +29,14 @@ var variables_exports = {};
 __export(variables_exports, {
   InlineVariableTag: () => import_InlineVariableTag.InlineVariableTag,
   SlateVariableEditor: () => import_SlateVariableEditor.SlateVariableEditor,
+  VariableHybridInput: () => import_VariableHybridInput.VariableHybridInput,
   VariableInput: () => import_VariableInput.VariableInput,
   VariableTag: () => import_VariableTag.VariableTag,
   useResolvedMetaTree: () => import_useResolvedMetaTree.useResolvedMetaTree
 });
 module.exports = __toCommonJS(variables_exports);
 var import_VariableInput = require("./VariableInput");
+var import_VariableHybridInput = require("./VariableHybridInput");
 var import_SlateVariableEditor = require("./SlateVariableEditor");
 var import_VariableTag = require("./VariableTag");
 var import_InlineVariableTag = require("./InlineVariableTag");
@@ -45,6 +47,7 @@ __reExport(variables_exports, require("./utils"), module.exports);
 0 && (module.exports = {
   InlineVariableTag,
   SlateVariableEditor,
+  VariableHybridInput,
   VariableInput,
   VariableTag,
   useResolvedMetaTree,

package/lib/data-source/index.d.ts

@@ -90,6 +90,8 @@ export declare class DataSourceManager {
         force: boolean;
     }): Promise<void>;
 }
+export type CollectionFieldInterfaceDataSourceManager = Pick<DataSourceManager, 'collectionFieldInterfaceManager'>;
+export declare function getCollectionFieldInterface(interfaceName: string | undefined, ...dataSourceManagers: Array<CollectionFieldInterfaceDataSourceManager | null | undefined>): any;
 export declare class DataSource {
     dataSourceManager: DataSourceManager;
     collectionManager: CollectionManager;