@pixpilot/formily-shadcn 1.18.0 → 1.18.1

package/dist/components/drawer-item/BaseDrawerItem.d.cts

@@ -0,0 +1,59 @@
+import { SyncReactNode } from "../../types/react.cjs";
+import { FormItemProps } from "../form-item/form-item-types.cjs";
+import "../form-item/index.cjs";
+import { OverlayBaseSlots, OverlayProps } from "../overlay-common/overlay-types.cjs";
+import { OverlayTriggerProps } from "../overlay-common/OverlayTrigger.cjs";
+import "../overlay-common/index.cjs";
+import React from "react";
+import { DrawerContentProps } from "@pixpilot/shadcn-ui";
+
+//#region src/components/drawer-item/BaseDrawerItem.d.ts
+interface DrawerItemProps extends FormItemProps {
+  /**
+   * Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a
+   * label it reads `Add <title>` when the field is empty and `Edit <title>`
+   * once it holds a value. Settable from an x-reaction via
+   * `decoratorProps.trigger`.
+   */
+  trigger?: OverlayTriggerProps;
+  /** Controlled open state of the drawer. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When false, the drawer closes without validating the field first.
+   * Default is true.
+   */
+  validateOnClose?: boolean;
+  /** Label of the button that closes the drawer. Set to `null` to hide the footer. */
+  doneLabel?: SyncReactNode;
+  /**
+   * The drawer itself — its `title`, `description`, and `slots`, e.g.
+   * `{ title: 'Notes', slots: { content: { side: 'right' } } }`. Title and
+   * description default to the field's label and description.
+   */
+  drawer?: DrawerItemDrawerProps;
+}
+interface DrawerItemDrawerSlots extends OverlayBaseSlots {
+  content?: DrawerContentProps;
+  title?: React.ComponentProps<'div'>;
+  description?: React.ComponentProps<'div'>;
+  footer?: React.ComponentProps<'div'>;
+}
+type DrawerItemDrawerProps = OverlayProps<DrawerItemDrawerSlots> & {
+  /** Edge the drawer anchors to. Passed to the drawer root. Default `bottom`. */
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+};
+/**
+ * Formily decorator that edits a single field inside a drawer.
+ *
+ * Used in place of FormItem (`x-decorator: 'DrawerItem'`), it renders the
+ * field's label, description, and validation feedback exactly as FormItem
+ * does, but puts a trigger button where the input would sit and moves the
+ * input itself into a drawer. The field keeps its own component, so validation
+ * and x-reactions behave as they do under FormItem.
+ */
+declare const BaseDrawerItem: React.FC<React.PropsWithChildren<DrawerItemProps>>;
+//#endregion
+export { BaseDrawerItem, DrawerItemProps };

package/dist/components/drawer-item/BaseDrawerItem.d.ts

@@ -0,0 +1,59 @@
+import { SyncReactNode } from "../../types/react.js";
+import { FormItemProps } from "../form-item/form-item-types.js";
+import "../form-item/index.js";
+import { OverlayBaseSlots, OverlayProps } from "../overlay-common/overlay-types.js";
+import { OverlayTriggerProps } from "../overlay-common/OverlayTrigger.js";
+import "../overlay-common/index.js";
+import React from "react";
+import { DrawerContentProps } from "@pixpilot/shadcn-ui";
+
+//#region src/components/drawer-item/BaseDrawerItem.d.ts
+interface DrawerItemProps extends FormItemProps {
+  /**
+   * Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a
+   * label it reads `Add <title>` when the field is empty and `Edit <title>`
+   * once it holds a value. Settable from an x-reaction via
+   * `decoratorProps.trigger`.
+   */
+  trigger?: OverlayTriggerProps;
+  /** Controlled open state of the drawer. */
+  open?: boolean;
+  /** Initial open state when uncontrolled. */
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * When false, the drawer closes without validating the field first.
+   * Default is true.
+   */
+  validateOnClose?: boolean;
+  /** Label of the button that closes the drawer. Set to `null` to hide the footer. */
+  doneLabel?: SyncReactNode;
+  /**
+   * The drawer itself — its `title`, `description`, and `slots`, e.g.
+   * `{ title: 'Notes', slots: { content: { side: 'right' } } }`. Title and
+   * description default to the field's label and description.
+   */
+  drawer?: DrawerItemDrawerProps;
+}
+interface DrawerItemDrawerSlots extends OverlayBaseSlots {
+  content?: DrawerContentProps;
+  title?: React.ComponentProps<'div'>;
+  description?: React.ComponentProps<'div'>;
+  footer?: React.ComponentProps<'div'>;
+}
+type DrawerItemDrawerProps = OverlayProps<DrawerItemDrawerSlots> & {
+  /** Edge the drawer anchors to. Passed to the drawer root. Default `bottom`. */
+  direction?: 'top' | 'bottom' | 'left' | 'right';
+};
+/**
+ * Formily decorator that edits a single field inside a drawer.
+ *
+ * Used in place of FormItem (`x-decorator: 'DrawerItem'`), it renders the
+ * field's label, description, and validation feedback exactly as FormItem
+ * does, but puts a trigger button where the input would sit and moves the
+ * input itself into a drawer. The field keeps its own component, so validation
+ * and x-reactions behave as they do under FormItem.
+ */
+declare const BaseDrawerItem: React.FC<React.PropsWithChildren<DrawerItemProps>>;
+//#endregion
+export { BaseDrawerItem, DrawerItemProps };

package/dist/components/drawer-item/BaseDrawerItem.js

@@ -0,0 +1,107 @@
+import { ShakeStyles } from "../array-common/ShakeStyles.js";
+import { BaseFormItem } from "../form-item/BaseFormItem.js";
+import { OverlayFields } from "../overlay-common/OverlayFields.js";
+import { OverlayTrigger } from "../overlay-common/OverlayTrigger.js";
+import { useOverlay } from "../overlay-common/use-overlay.js";
+import React from "react";
+import { Button, Drawer, DrawerBody, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@pixpilot/shadcn-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn as cn$1 } from "@pixpilot/shadcn";
+
+//#region src/components/drawer-item/BaseDrawerItem.tsx
+/**
+* Formily decorator that edits a single field inside a drawer.
+*
+* Used in place of FormItem (`x-decorator: 'DrawerItem'`), it renders the
+* field's label, description, and validation feedback exactly as FormItem
+* does, but puts a trigger button where the input would sit and moves the
+* input itself into a drawer. The field keeps its own component, so validation
+* and x-reactions behave as they do under FormItem.
+*/
+const BaseDrawerItem = ({ children, label, description, trigger: triggerProp, open: openProp, defaultOpen, onOpenChange, validateOnClose, doneLabel = "Done", drawer, feedbackStatus, feedbackText,...formItemProps }) => {
+	const { label: effectiveLabel, description: desc, trigger, open, gapClass, hasError, shouldShake, handleOpenChange, requestClose } = useOverlay({
+		label,
+		description,
+		trigger: triggerProp,
+		open: openProp,
+		defaultOpen,
+		onOpenChange,
+		validateOnClose
+	});
+	const title = drawer?.title ?? effectiveLabel ?? "Details";
+	const overlayDescription = drawer?.description ?? desc;
+	const slots = drawer?.slots;
+	return /* @__PURE__ */ jsxs(Drawer, {
+		open,
+		onOpenChange: handleOpenChange,
+		direction: drawer?.direction,
+		children: [
+			/* @__PURE__ */ jsx(BaseFormItem, {
+				...formItemProps,
+				label,
+				description,
+				feedbackStatus,
+				feedbackText,
+				children: /* @__PURE__ */ jsx(DrawerTrigger, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(OverlayTrigger, {
+						invalid: hasError,
+						...trigger
+					})
+				})
+			}),
+			!open && /* @__PURE__ */ jsx(OverlayFields, { children }),
+			/* @__PURE__ */ jsxs(DrawerContent, {
+				...overlayDescription == null ? { "aria-describedby": void 0 } : {},
+				...slots?.content,
+				className: cn$1("sm:mx-auto sm:max-w-md", shouldShake && "pp-shake", slots?.content?.className),
+				onInteractOutside: (event) => {
+					slots?.content?.onInteractOutside?.(event);
+					if (event.defaultPrevented) return;
+					event.preventDefault();
+					requestClose();
+				},
+				onEscapeKeyDown: (event) => {
+					slots?.content?.onEscapeKeyDown?.(event);
+					if (event.defaultPrevented) return;
+					event.preventDefault();
+					requestClose();
+				},
+				children: [
+					/* @__PURE__ */ jsx(ShakeStyles, {}),
+					/* @__PURE__ */ jsxs(DrawerHeader, {
+						...slots?.header,
+						children: [/* @__PURE__ */ jsx(DrawerTitle, {
+							...slots?.title,
+							children: title
+						}), overlayDescription != null && /* @__PURE__ */ jsx(DrawerDescription, {
+							...slots?.description,
+							children: overlayDescription
+						})]
+					}),
+					open && /* @__PURE__ */ jsxs(DrawerBody, {
+						...slots?.body,
+						className: cn$1("grid py-1", gapClass, slots?.body?.className),
+						children: [children, feedbackText != null && feedbackText !== "" && /* @__PURE__ */ jsx("p", {
+							className: cn$1("text-[0.8rem]", feedbackStatus === "error" && "text-destructive font-medium", feedbackStatus === "warning" && "text-amber-600", feedbackStatus === "success" && "text-green-600"),
+							children: feedbackText
+						})]
+					}),
+					doneLabel != null && /* @__PURE__ */ jsx(DrawerFooter, {
+						...slots?.footer,
+						children: /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							"data-slot": "footer-button",
+							onClick: requestClose,
+							children: doneLabel
+						})
+					})
+				]
+			})
+		]
+	});
+};
+BaseDrawerItem.displayName = "BaseDrawerItem";
+
+//#endregion
+export { BaseDrawerItem };

package/dist/components/drawer-item/ConnectedDrawerItem.cjs

@@ -0,0 +1,16 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_map_form_item_props = require('../form-item/map-form-item-props.cjs');
+const require_BaseDrawerItem = require('./BaseDrawerItem.cjs');
+let __formily_react = require("@formily/react");
+__formily_react = require_rolldown_runtime.__toESM(__formily_react);
+
+//#region src/components/drawer-item/ConnectedDrawerItem.tsx
+/**
+* DrawerItem decorator connected to Formily field state.
+* Maps field label, description, and validation state onto the decorator the
+* same way FormItem does.
+*/
+const DrawerItem = (0, __formily_react.connect)(require_BaseDrawerItem.BaseDrawerItem, (0, __formily_react.mapProps)(require_map_form_item_props.mapFormItemProps));
+
+//#endregion
+exports.DrawerItem = DrawerItem;

package/dist/components/drawer-item/ConnectedDrawerItem.d.cts

@@ -0,0 +1,15 @@
+import { DrawerItemProps } from "./BaseDrawerItem.cjs";
+import * as react4 from "react";
+
+//#region src/components/drawer-item/ConnectedDrawerItem.d.ts
+
+/**
+ * DrawerItem decorator connected to Formily field state.
+ * Maps field label, description, and validation state onto the decorator the
+ * same way FormItem does.
+ */
+declare const DrawerItem: react4.ForwardRefExoticComponent<Omit<Partial<DrawerItemProps & {
+  children?: react4.ReactNode | undefined;
+}>, "ref"> & react4.RefAttributes<unknown>>;
+//#endregion
+export { DrawerItem };

package/dist/components/drawer-item/ConnectedDrawerItem.d.ts

@@ -0,0 +1,15 @@
+import { DrawerItemProps } from "./BaseDrawerItem.js";
+import * as react4 from "react";
+
+//#region src/components/drawer-item/ConnectedDrawerItem.d.ts
+
+/**
+ * DrawerItem decorator connected to Formily field state.
+ * Maps field label, description, and validation state onto the decorator the
+ * same way FormItem does.
+ */
+declare const DrawerItem: react4.ForwardRefExoticComponent<Omit<Partial<DrawerItemProps & {
+  children?: react4.ReactNode | undefined;
+}>, "ref"> & react4.RefAttributes<unknown>>;
+//#endregion
+export { DrawerItem };

package/dist/components/drawer-item/ConnectedDrawerItem.js

@@ -0,0 +1,14 @@
+import { mapFormItemProps } from "../form-item/map-form-item-props.js";
+import { BaseDrawerItem } from "./BaseDrawerItem.js";
+import { connect, mapProps } from "@formily/react";
+
+//#region src/components/drawer-item/ConnectedDrawerItem.tsx
+/**
+* DrawerItem decorator connected to Formily field state.
+* Maps field label, description, and validation state onto the decorator the
+* same way FormItem does.
+*/
+const DrawerItem = connect(BaseDrawerItem, mapProps(mapFormItemProps));
+
+//#endregion
+export { DrawerItem };

package/dist/components/drawer-item/index.d.cts

@@ -0,0 +1,2 @@
+import { BaseDrawerItem, DrawerItemProps } from "./BaseDrawerItem.cjs";
+import { DrawerItem } from "./ConnectedDrawerItem.cjs";

package/dist/components/drawer-item/index.d.ts

@@ -0,0 +1,2 @@
+import { BaseDrawerItem, DrawerItemProps } from "./BaseDrawerItem.js";
+import { DrawerItem } from "./ConnectedDrawerItem.js";

package/dist/components/drawer-item/mcp.js

@@ -0,0 +1,119 @@
+import { defineProps } from "../../mcp/src/utils.js";
+
+//#region src/components/drawer-item/mcp.ts
+const meta = {
+	name: "DrawerItem",
+	category: "Formily",
+	description: "A Formily decorator used in place of FormItem (`x-decorator: 'DrawerItem'`). It renders the field's label, description, and validation feedback like FormItem, but puts a trigger button where the input would sit and moves the field's own component into a drawer.",
+	htmlElement: "div",
+	props: defineProps({
+		label: "Label content or accessible label for the component.",
+		description: "Description content rendered with the component.",
+		trigger: {
+			description: "Props for the trigger button, e.g. `{ label: 'Write a bio' }`. Without a label it reads `Add <title>` while the field is empty and `Edit <title>` once it holds a value (`item` when the field has no title). Accepts the button's other props too (`icon`, `className`, …). An x-reaction can set this via `decoratorProps.trigger`.",
+			defaultValue: "`Add <title>` / `Edit <title>`"
+		},
+		open: {
+			description: "Controlled open state of the drawer.",
+			type: "boolean"
+		},
+		defaultOpen: {
+			description: "Initial open state when uncontrolled.",
+			type: "boolean",
+			defaultValue: "false"
+		},
+		onOpenChange: "Called when the drawer open state changes.",
+		validateOnClose: {
+			description: "When true (default), closing validates the field and keeps the drawer open (with a shake) while it is invalid. Set false to always close.",
+			type: "boolean",
+			defaultValue: "true"
+		},
+		doneLabel: {
+			description: "Label of the button that closes the drawer. Set to `null` to hide the footer.",
+			defaultValue: `'Done'`
+		},
+		drawer: "The drawer itself: `{ title, description, direction, slots }`, e.g. `{ title: 'Notes', direction: 'right' }`. `direction` (`top | bottom | left | right`, default `bottom`) sets the anchored edge. Title and description default to the field's label and description; `slots` takes props for `content`, `header`, `title`, `description`, `body`, and `footer`.",
+		slots: "Slot props forwarded to the FormItem parts (label, description, error).",
+		descriptionPlacement: "Forwarded to the underlying FormItem.",
+		requiredMark: "Forwarded to the underlying FormItem.",
+		asterisk: "Forwarded to the underlying FormItem.",
+		feedbackStatus: "Forwarded to the underlying FormItem.",
+		feedbackText: "Forwarded to the underlying FormItem."
+	}),
+	examples: [
+		{
+			title: "Edit a single field in a drawer",
+			code: `{
+  type: 'object',
+  properties: {
+    age: {
+      type: 'number',
+      title: 'Age',
+      description: 'Enter your age in years.',
+      default: 25,
+      'x-decorator': 'DrawerItem',
+      'x-component': 'NumberInput',
+    },
+  },
+}`
+		},
+		{
+			title: "Declarative schema field",
+			code: `<SchemaField.String name="bio" title="Bio" x-decorator="DrawerItem" x-component="Textarea" />`
+		},
+		{
+			title: "A side drawer",
+			code: `{
+  type: 'string',
+  title: 'Bio',
+  'x-decorator': 'DrawerItem',
+  'x-decorator-props': {
+    drawer: { direction: 'right' },
+  },
+  'x-component': 'Textarea',
+}`
+		},
+		{
+			title: "A whole object edited in one drawer",
+			code: `{
+  type: 'object',
+  title: 'Profile',
+  'x-decorator': 'DrawerItem',
+  // type: 'object' resolves to ObjectContainer. Turn off its own label and
+  // description — the drawer header already shows them — and use the flat
+  // variant so the card chrome does not double up inside the drawer.
+  'x-component-props': { variant: 'flat', label: false, description: false },
+  properties: {
+    firstName: { type: 'string', title: 'First Name' },
+    lastName: { type: 'string', title: 'Last Name', required: true },
+  },
+}`
+		}
+	],
+	notes: [
+		"Works on an object too: decorating a `type: object` field puts its whole form in the drawer, and closing validates every field inside it, at any depth.",
+		"Swap in for FormItem on any field — the field keeps its own `x-component`, so validation, x-reactions, and component props behave exactly as under FormItem.",
+		"Edits commit to the form as the user types; there is no draft/Save step. The footer button closes the drawer rather than saving.",
+		"Closing (Done, Escape, or outside click) validates the field first. An invalid field keeps the drawer open and shakes it.",
+		"While the drawer is closed the input stays mounted in a hidden container, so component state and reactions behave as if it were always rendered.",
+		"The trigger renders in an error state, and the label turns red, while the field has a validation error — the message appears under the trigger and inside the drawer.",
+		"The drawer heading defaults to the field label; override with `drawer.title` / `drawer.description`."
+	],
+	keywords: [
+		"formily",
+		"decorator",
+		"drawer",
+		"sheet",
+		"field",
+		"form-item"
+	],
+	related: [
+		"FormItem",
+		"DialogItem",
+		"PopoverItem",
+		"ObjectContainer"
+	]
+};
+
+//#endregion
+export { meta };

package/dist/components/form-item/ConnectedFormItem.d.cts

@@ -1,13 +1,13 @@
 import { FormItemProps } from "./form-item-types.cjs";
-import * as react1450 from "react";
+import * as react1583 from "react";
 
 //#region src/components/form-item/ConnectedFormItem.d.ts
 /**
  * FormItem component connected to Formily field state.
  * Automatically maps field validation state to component props.
  */
-declare const FormItem: react1450.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
-  children?: react1450.ReactNode | undefined;
-}>, "ref"> & react1450.RefAttributes<unknown>>;
+declare const FormItem: react1583.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
+  children?: react1583.ReactNode | undefined;
+}>, "ref"> & react1583.RefAttributes<unknown>>;
 //#endregion
 export { FormItem };

package/dist/components/form-item/ConnectedFormItem.d.ts

@@ -1,13 +1,13 @@
 import { FormItemProps } from "./form-item-types.js";
-import * as react1450 from "react";
+import * as react1585 from "react";
 
 //#region src/components/form-item/ConnectedFormItem.d.ts
 /**
  * FormItem component connected to Formily field state.
  * Automatically maps field validation state to component props.
  */
-declare const FormItem: react1450.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
-  children?: react1450.ReactNode | undefined;
-}>, "ref"> & react1450.RefAttributes<unknown>>;
+declare const FormItem: react1585.ForwardRefExoticComponent<Omit<Partial<FormItemProps & {
+  children?: react1585.ReactNode | undefined;
+}>, "ref"> & react1585.RefAttributes<unknown>>;
 //#endregion
 export { FormItem };

package/dist/components/popover-item/ConnectedPopoverItem.d.cts

@@ -1,5 +1,5 @@
 import { PopoverItemProps } from "./BasePopoverItem.cjs";
-import * as react4 from "react";
+import * as react7 from "react";
 
 //#region src/components/popover-item/ConnectedPopoverItem.d.ts
 
@@ -8,8 +8,8 @@ import * as react4 from "react";
  * Maps field label, description, and validation state onto the decorator the
  * same way FormItem does.
  */
-declare const PopoverItem: react4.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
-  children?: react4.ReactNode | undefined;
-}>, "ref"> & react4.RefAttributes<unknown>>;
+declare const PopoverItem: react7.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
+  children?: react7.ReactNode | undefined;
+}>, "ref"> & react7.RefAttributes<unknown>>;
 //#endregion
 export { PopoverItem };

package/dist/components/popover-item/ConnectedPopoverItem.d.ts

@@ -1,5 +1,5 @@
 import { PopoverItemProps } from "./BasePopoverItem.js";
-import * as react4 from "react";
+import * as react7 from "react";
 
 //#region src/components/popover-item/ConnectedPopoverItem.d.ts
 
@@ -8,8 +8,8 @@ import * as react4 from "react";
  * Maps field label, description, and validation state onto the decorator the
  * same way FormItem does.
  */
-declare const PopoverItem: react4.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
-  children?: react4.ReactNode | undefined;
-}>, "ref"> & react4.RefAttributes<unknown>>;
+declare const PopoverItem: react7.ForwardRefExoticComponent<Omit<Partial<PopoverItemProps & {
+  children?: react7.ReactNode | undefined;
+}>, "ref"> & react7.RefAttributes<unknown>>;
 //#endregion
 export { PopoverItem };

package/dist/components/schema-field/schema-field-basics.cjs

@@ -3,6 +3,7 @@ const require_use_merged_schema_components = require('../../hooks/use-merged-sch
 const require_ArrayCards = require('../array-cards/ArrayCards.cjs');
 const require_ArrayCollapse = require('../array-collapse/ArrayCollapse.cjs');
 const require_ArrayDialog = require('../array-dialog/ArrayDialog.cjs');
+const require_ArrayDrawer = require('../array-drawer/ArrayDrawer.cjs');
 const require_ArrayInline = require('../array-inline/ArrayInline.cjs');
 const require_ArrayPopover = require('../array-popover/ArrayPopover.cjs');
 const require_ArrayTags = require('../array-tags/ArrayTags.cjs');
@@ -12,6 +13,7 @@ const require_Column = require('../column/Column.cjs');
 const require_DatePicker = require('../date-picker/DatePicker.cjs');
 const require_ConnectedFormItem = require('../form-item/ConnectedFormItem.cjs');
 const require_ConnectedDialogItem = require('../dialog-item/ConnectedDialogItem.cjs');
+const require_ConnectedDrawerItem = require('../drawer-item/ConnectedDrawerItem.cjs');
 const require_FormGrid = require('../form-grid/FormGrid.cjs');
 const require_IconToggle = require('../icon-toggle/IconToggle.cjs');
 const require_Input = require('../input/Input.cjs');
@@ -48,6 +50,10 @@ const basicComponentRegistry = {
 		component: require_ArrayDialog.ArrayDialog,
 		decorator: "FormItem"
 	},
+	ArrayDrawer: {
+		component: require_ArrayDrawer.ArrayDrawer,
+		decorator: "FormItem"
+	},
 	ArrayInline: {
 		component: require_ArrayInline.ArrayInline,
 		decorator: "FormItem"
@@ -78,6 +84,7 @@ const basicComponentRegistry = {
 		decorator: "FormItem"
 	},
 	DialogItem: { component: require_ConnectedDialogItem.DialogItem },
+	DrawerItem: { component: require_ConnectedDrawerItem.DrawerItem },
 	PopoverItem: { component: require_ConnectedPopoverItem.PopoverItem },
 	FormGrid: { component: require_FormGrid.FormGrid },
 	FormItem: { component: require_ConnectedFormItem.FormItem },