@tachybase/components 0.23.8

package/lib/form-drawer/index.js

@@ -0,0 +1,187 @@
+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 form_drawer_exports = {};
+__export(form_drawer_exports, {
+  FormDrawer: () => FormDrawer,
+  default: () => form_drawer_default
+});
+module.exports = __toCommonJS(form_drawer_exports);
+var import_react = __toESM(require("react"));
+var import_schema = require("@tachybase/schema");
+var import_antd = require("antd");
+var import_react_dom = require("react-dom");
+var import_builtins = require("../__builtins__");
+const isDrawerTitle = /* @__PURE__ */ __name((props) => {
+  return (0, import_schema.isNum)(props) || (0, import_schema.isStr)(props) || (0, import_schema.isBool)(props) || import_react.default.isValidElement(props);
+}, "isDrawerTitle");
+const getDrawerProps = /* @__PURE__ */ __name((props) => {
+  if (isDrawerTitle(props)) {
+    return {
+      title: props
+    };
+  } else {
+    return props;
+  }
+}, "getDrawerProps");
+function FormDrawer(title, id, renderer) {
+  if ((0, import_schema.isFn)(id) || import_react.default.isValidElement(id)) {
+    renderer = id;
+    id = "form-drawer";
+  }
+  const env = {
+    host: document.createElement("div"),
+    openMiddlewares: [],
+    form: null,
+    promise: null
+  };
+  const root = (0, import_builtins.createPortalRoot)(env.host, id);
+  const props = getDrawerProps(title);
+  const drawer = {
+    width: "40%",
+    ...props,
+    onClose: /* @__PURE__ */ __name((e) => {
+      var _a;
+      if (((_a = props == null ? void 0 : props.onClose) == null ? void 0 : _a.call(props, e)) !== false) {
+        formDrawer.close();
+      }
+    }, "onClose"),
+    afterOpenChange: /* @__PURE__ */ __name((open) => {
+      var _a;
+      (_a = props == null ? void 0 : props.afterOpenChange) == null ? void 0 : _a.call(props, open);
+      if (open) return;
+      root.unmount();
+    }, "afterOpenChange")
+  };
+  const DrawerContent = (0, import_schema.observer)(() => {
+    return /* @__PURE__ */ import_react.default.createElement(import_react.Fragment, null, (0, import_schema.isFn)(renderer) ? renderer(env.form) : renderer);
+  });
+  const renderDrawer = /* @__PURE__ */ __name((open = true) => {
+    const { form } = env;
+    if (!form) return null;
+    return /* @__PURE__ */ import_react.default.createElement(import_antd.Drawer, { ...drawer, open }, /* @__PURE__ */ import_react.default.createElement(import_schema.FormProvider, { form }, /* @__PURE__ */ import_react.default.createElement(DrawerContent, null)));
+  }, "renderDrawer");
+  document.body.appendChild(env.host);
+  const formDrawer = {
+    forOpen: /* @__PURE__ */ __name((middleware) => {
+      if ((0, import_schema.isFn)(middleware)) {
+        env.openMiddlewares.push(middleware);
+      }
+      return formDrawer;
+    }, "forOpen"),
+    open: /* @__PURE__ */ __name((props2) => {
+      if (env.promise) return env.promise;
+      env.promise = new Promise((resolve, reject) => {
+        const run = /* @__PURE__ */ __name(async () => {
+          try {
+            props2 = await (0, import_builtins.loading)(drawer.loadingText, () => (0, import_schema.applyMiddleware)(props2, env.openMiddlewares));
+            env.form = env.form || (0, import_schema.createForm)({
+              ...props2,
+              effects(form) {
+                var _a;
+                (0, import_schema.onFormSubmitSuccess)(() => {
+                  resolve((0, import_schema.toJS)(form.values));
+                  formDrawer.close();
+                });
+                (_a = props2 == null ? void 0 : props2.effects) == null ? void 0 : _a.call(props2, form);
+              }
+            });
+          } catch (e) {
+            reject(e);
+          }
+        }, "run");
+        run();
+        root.render(() => renderDrawer(false));
+        setTimeout(() => {
+          root.render(() => renderDrawer(true));
+        }, 16);
+      });
+      return env.promise;
+    }, "open"),
+    close: /* @__PURE__ */ __name(() => {
+      if (!env.host) return;
+      root.render(() => renderDrawer(false));
+    }, "close")
+  };
+  return formDrawer;
+}
+__name(FormDrawer, "FormDrawer");
+const DrawerExtra = /* @__PURE__ */ __name((props) => {
+  const ref = (0, import_react.useRef)(null);
+  const [extra, setExtra] = (0, import_react.useState)();
+  const extraRef = (0, import_react.useRef)();
+  const prefixCls = (0, import_builtins.usePrefixCls)("drawer");
+  (0, import_react.useLayoutEffect)(() => {
+    var _a, _b;
+    const content = (_b = (_a = ref.current) == null ? void 0 : _a.closest(`.${prefixCls}-content`)) == null ? void 0 : _b.querySelector(`.${prefixCls}-header`);
+    if (content) {
+      if (!extraRef.current) {
+        extraRef.current = content.querySelector(`.${prefixCls}-extra`);
+        if (!extraRef.current) {
+          extraRef.current = document.createElement("div");
+          extraRef.current.classList.add(`${prefixCls}-extra`);
+          content.appendChild(extraRef.current);
+        }
+      }
+      setExtra(extraRef.current);
+    }
+  });
+  extraRef.current = extra;
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref, style: { display: "none" } }, extra && (0, import_react_dom.createPortal)(props.children, extra));
+}, "DrawerExtra");
+const DrawerFooter = /* @__PURE__ */ __name((props) => {
+  const ref = (0, import_react.useRef)(null);
+  const [footer, setFooter] = (0, import_react.useState)();
+  const footerRef = (0, import_react.useRef)();
+  const prefixCls = (0, import_builtins.usePrefixCls)("drawer");
+  (0, import_react.useLayoutEffect)(() => {
+    var _a;
+    const content = (_a = ref.current) == null ? void 0 : _a.closest(`.${prefixCls}-content`);
+    if (content) {
+      if (!footerRef.current) {
+        footerRef.current = content.querySelector(`.${prefixCls}-footer`);
+        if (!footerRef.current) {
+          footerRef.current = document.createElement("div");
+          footerRef.current.classList.add(`${prefixCls}-footer`);
+          content.appendChild(footerRef.current);
+        }
+      }
+      setFooter(footerRef.current);
+    }
+  });
+  footerRef.current = footer;
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref, style: { display: "none" } }, footer && (0, import_react_dom.createPortal)(props.children, footer));
+}, "DrawerFooter");
+FormDrawer.Extra = DrawerExtra;
+FormDrawer.Footer = DrawerFooter;
+FormDrawer.Portal = (0, import_builtins.createPortalProvider)("form-drawer");
+var form_drawer_default = FormDrawer;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormDrawer
+});

package/lib/form-grid/index.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Grid, IGridOptions } from '@tachybase/schema';
+export interface IFormGridProps extends IGridOptions {
+    grid?: Grid<HTMLElement>;
+    prefixCls?: string;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface IGridColumnProps {
+    gridSpan?: number;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export declare const createFormGrid: (props: IFormGridProps) => Grid<HTMLElement>;
+export declare const useFormGrid: () => Grid<HTMLElement>;
+export declare const GridColumn: React.FC<React.PropsWithChildren<IGridColumnProps>>;
+export declare const FormGrid: React.NamedExoticComponent<Omit<{
+    children?: React.ReactNode | undefined;
+}, "children" | "ref" | keyof IFormGridProps> & IFormGridProps & {
+    children?: React.ReactNode | undefined;
+} & {
+    ref?: React.RefAttributes<any>;
+}> & {
+    readonly type: import("@tachybase/schema").ReactFC<IFormGridProps & {
+        children?: React.ReactNode | undefined;
+    } & {
+        ref?: React.RefAttributes<any>;
+    }>;
+} & {
+    createFormGrid: (props: IFormGridProps) => Grid<HTMLElement>;
+    useFormGrid: () => Grid<HTMLElement>;
+    GridColumn: React.FC<React.PropsWithChildren<IGridColumnProps>>;
+};
+export default FormGrid;

package/lib/form-grid/index.js

@@ -0,0 +1,108 @@
+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 form_grid_exports = {};
+__export(form_grid_exports, {
+  FormGrid: () => FormGrid,
+  GridColumn: () => GridColumn,
+  createFormGrid: () => createFormGrid,
+  default: () => form_grid_default,
+  useFormGrid: () => useFormGrid
+});
+module.exports = __toCommonJS(form_grid_exports);
+var import_react = __toESM(require("react"));
+var import_schema = require("@tachybase/schema");
+var import_classnames = __toESM(require("classnames"));
+var import_builtins = require("../__builtins__");
+var import_form_layout = require("../form-layout");
+var import_style = __toESM(require("./style"));
+const FormGridContext = import_react.default.createContext(null);
+const createFormGrid = /* @__PURE__ */ __name((props) => {
+  return (0, import_schema.markRaw)(new import_schema.Grid(props));
+}, "createFormGrid");
+const useFormGrid = /* @__PURE__ */ __name(() => (0, import_react.useContext)(FormGridContext), "useFormGrid");
+const InternalFormGrid = (0, import_schema.observer)(
+  ({ children, className, style, ...props }) => {
+    const layout = (0, import_form_layout.useFormLayout)();
+    const options = {
+      columnGap: (layout == null ? void 0 : layout.gridColumnGap) ?? 8,
+      rowGap: (layout == null ? void 0 : layout.gridRowGap) ?? 4,
+      ...props
+    };
+    const grid = (0, import_react.useMemo)(() => (0, import_schema.markRaw)((options == null ? void 0 : options.grid) ? options.grid : new import_schema.Grid(options)), [import_schema.Grid.id(options)]);
+    const ref = (0, import_react.useRef)(null);
+    const prefixCls = (0, import_builtins.usePrefixCls)("formily-grid", props);
+    const [wrapSSR, hashId] = (0, import_style.default)(prefixCls);
+    const dataProps = (0, import_builtins.pickDataProps)(props);
+    (0, import_react.useLayoutEffect)(() => {
+      if (ref.current) {
+        return grid.connect(ref.current);
+      }
+    }, [grid]);
+    return /* @__PURE__ */ import_react.default.createElement(FormGridContext.Provider, { value: grid }, wrapSSR(
+      /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ...dataProps,
+          className: (0, import_classnames.default)(`${prefixCls}-layout`, hashId, className),
+          style: {
+            ...style,
+            gridTemplateColumns: grid.templateColumns,
+            gap: grid.gap
+          },
+          ref
+        },
+        children
+      )
+    ));
+  },
+  {
+    forwardRef: true
+  }
+);
+const GridColumn = (0, import_schema.observer)(
+  ({ gridSpan, children, ...props }) => {
+    return /* @__PURE__ */ import_react.default.createElement("div", { ...props, style: props.style, "data-grid-span": gridSpan }, children);
+  }
+);
+GridColumn.defaultProps = {
+  gridSpan: 1
+};
+const FormGrid = Object.assign(InternalFormGrid, {
+  createFormGrid,
+  useFormGrid,
+  GridColumn
+});
+var form_grid_default = FormGrid;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormGrid,
+  GridColumn,
+  createFormGrid,
+  useFormGrid
+});

package/lib/form-grid/style.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (prefixCls: string) => import("..").UseComponentStyleResult;
+export default _default;

package/lib/form-grid/style.js

@@ -0,0 +1,31 @@
+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);
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default
+});
+module.exports = __toCommonJS(style_exports);
+var import_builtins = require("./../__builtins__");
+var style_default = (0, import_builtins.genStyleHook)("form-grid", (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}-layout`]: {
+      display: "grid"
+    }
+  };
+});

package/lib/form-item/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useOverflow';
+export * from './useFormItemLayout';

package/lib/form-item/hooks/index.js

@@ -0,0 +1,23 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var hooks_exports = {};
+module.exports = __toCommonJS(hooks_exports);
+__reExport(hooks_exports, require("./useOverflow"), module.exports);
+__reExport(hooks_exports, require("./useFormItemLayout"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./useOverflow"),
+  ...require("./useFormItemLayout")
+});

package/lib/form-item/hooks/useFormItemLayout.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { IFormItemProps } from '../types';
+export declare const useFormItemLayout: (props: IFormItemProps) => {
+    layout: "inline" | "horizontal" | "vertical";
+    colon: boolean;
+    labelAlign: "left" | "right";
+    labelWrap: boolean;
+    labelWidth: string | number;
+    wrapperWidth: string | number;
+    labelCol: number;
+    wrapperCol: number;
+    wrapperAlign: "left" | "right";
+    wrapperWrap: boolean;
+    fullness: boolean;
+    size: "default" | "small" | "large";
+    inset: boolean;
+    asterisk: boolean;
+    bordered: boolean;
+    feedbackIcon: React.ReactNode;
+    feedbackLayout: (string & {}) | "none" | "loose" | "terse" | "popover";
+    tooltipLayout: "text" | "icon";
+    tooltipIcon: string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element;
+    className?: string;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    label?: React.ReactNode;
+    tooltip?: React.ReactNode;
+    labelStyle?: React.CSSProperties;
+    wrapperStyle?: React.CSSProperties;
+    addonBefore?: React.ReactNode;
+    addonAfter?: React.ReactNode;
+    extra?: React.ReactNode;
+    feedbackText?: React.ReactNode;
+    feedbackStatus?: "error" | "warning" | "success" | "pending" | (string & {});
+    getPopupContainer?: (node: HTMLElement) => HTMLElement;
+    gridSpan?: number;
+};

package/lib/form-item/hooks/useFormItemLayout.js

@@ -0,0 +1,66 @@
+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 useFormItemLayout_exports = {};
+__export(useFormItemLayout_exports, {
+  useFormItemLayout: () => useFormItemLayout
+});
+module.exports = __toCommonJS(useFormItemLayout_exports);
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_form_layout = require("../../form-layout");
+const useFormItemLayout = /* @__PURE__ */ __name((props) => {
+  const layout = (0, import_form_layout.useFormLayout)();
+  const layoutType = props.layout ?? layout.layout ?? "horizontal";
+  return {
+    ...props,
+    layout: layoutType,
+    colon: props.colon ?? layout.colon,
+    labelAlign: layoutType === "vertical" ? props.labelAlign ?? "left" : props.labelAlign ?? layout.labelAlign ?? "right",
+    labelWrap: props.labelWrap ?? layout.labelWrap,
+    labelWidth: props.labelWidth ?? layout.labelWidth,
+    wrapperWidth: props.wrapperWidth ?? layout.wrapperWidth,
+    labelCol: props.labelCol ?? layout.labelCol,
+    wrapperCol: props.wrapperCol ?? layout.wrapperCol,
+    wrapperAlign: props.wrapperAlign ?? layout.wrapperAlign,
+    wrapperWrap: props.wrapperWrap ?? layout.wrapperWrap,
+    fullness: props.fullness ?? layout.fullness,
+    size: props.size ?? layout.size,
+    inset: props.inset ?? layout.inset,
+    asterisk: props.asterisk,
+    bordered: props.bordered ?? layout.bordered,
+    feedbackIcon: props.feedbackIcon,
+    feedbackLayout: props.feedbackLayout ?? layout.feedbackLayout ?? "loose",
+    tooltipLayout: props.tooltipLayout ?? layout.tooltipLayout ?? "icon",
+    tooltipIcon: props.tooltipIcon ?? layout.tooltipIcon ?? /* @__PURE__ */ import_react.default.createElement(import_icons.QuestionCircleOutlined, null)
+  };
+}, "useFormItemLayout");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useFormItemLayout
+});

package/lib/form-item/hooks/useOverflow.d.ts

@@ -0,0 +1,5 @@
+export declare function useOverflow<Container extends HTMLElement, Content extends HTMLElement>(): {
+    overflow: boolean;
+    containerRef: import("react").MutableRefObject<Container>;
+    contentRef: import("react").MutableRefObject<Content>;
+};

package/lib/form-item/hooks/useOverflow.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var useOverflow_exports = {};
+__export(useOverflow_exports, {
+  useOverflow: () => useOverflow
+});
+module.exports = __toCommonJS(useOverflow_exports);
+var import_react = require("react");
+var import_form_layout = require("../../form-layout");
+function useOverflow() {
+  const [overflow, setOverflow] = (0, import_react.useState)(false);
+  const containerRef = (0, import_react.useRef)(null);
+  const contentRef = (0, import_react.useRef)(null);
+  const layout = (0, import_form_layout.useFormLayout)();
+  const labelCol = JSON.stringify(layout.labelCol);
+  (0, import_react.useEffect)(() => {
+    requestAnimationFrame(() => {
+      if (containerRef.current && contentRef.current) {
+        const contentWidth = contentRef.current.getBoundingClientRect().width;
+        const containerWidth = containerRef.current.getBoundingClientRect().width;
+        if (contentWidth && containerWidth && containerWidth < contentWidth) {
+          if (!overflow) setOverflow(true);
+        } else {
+          if (overflow) setOverflow(false);
+        }
+      }
+    });
+  }, [labelCol]);
+  return {
+    overflow,
+    containerRef,
+    contentRef
+  };
+}
+__name(useOverflow, "useOverflow");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useOverflow
+});

package/lib/form-item/index.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ReactFC } from '@tachybase/schema';
+import { IFormItemProps } from './types';
+export * from './hooks';
+export * from './types';
+type ComposeFormItem = ReactFC<IFormItemProps> & {
+    BaseItem: ReactFC<IFormItemProps>;
+};
+export declare const BaseItem: React.FC<React.PropsWithChildren<IFormItemProps>>;
+export declare const FormItem: ComposeFormItem;
+export default FormItem;