@wix/patterns-fields 1.36.0 → 1.38.0

package/src/components/image/form-image-input.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Box, FormField, ImageViewer } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useIsMobile, useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { isEmpty } from '../../validations/string';
+import { getImageUrl } from '../../utils/get-image-url';
+import { MEDIA_HEIGHT, MEDIA_MAX_WIDTH } from '../../utils/media-constants';
+
+export interface FormImageInputProps extends BaseInputProps<string> {}
+
+const _FormImageInput = (props: FormImageInputProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t, openMediaManager } = useWixPatternsContainer();
+  const isMobile = useIsMobile();
+
+  async function openMedia() {
+    if (!openMediaManager) {
+      return;
+    }
+    try {
+      const chosenMediaItems = await openMediaManager({
+        multiSelect: false,
+        category: 'IMAGE',
+      });
+
+      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;
+
+      controller.field.onChange(newImage);
+    } catch (error) {
+      console.error('Error opening Media Manager or no files selected:', error);
+    }
+  }
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+
+        return true;
+      },
+    },
+  });
+
+  const imageUrl =
+    controller.field.value && getImageUrl(controller.field.value);
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+        <ImageViewer
+          imageUrl={imageUrl}
+          dataHook={`image-${field.id}`}
+          onAddImage={isMobile ? undefined : () => openMedia()}
+          onUpdateImage={isMobile ? undefined : () => openMedia()}
+          updateImageInfo={t('cairo.replace-image.tooltip')}
+          removeImageInfo={t('cairo.remove-image.tooltip')}
+          addImageInfo={t('cairo.add-image.tooltip')}
+          height={MEDIA_HEIGHT}
+          width="100%"
+          fit="cover"
+          onRemoveImage={() => controller.field.onChange(null)}
+        />
+      </Box>
+    </FormField>
+  );
+};
+
+export const FormImageInput = observer(_FormImageInput);

package/src/components/image/image-view-field.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Box, Text } from '@wix/design-system';
+import { getImageUrl } from '../../utils/get-image-url';
+import {
+  MEDIA_HEIGHT,
+  MEDIA_MAX_WIDTH,
+  MEDIA_BORDER_RADIUS,
+} from '../../utils/media-constants';
+
+export interface ImageViewFieldProps {
+  value: unknown;
+  displayName: string;
+  id: string;
+}
+
+export const ImageViewField: React.FC<ImageViewFieldProps> = ({
+  value,
+  displayName,
+  id,
+}) => {
+  const imageValue = typeof value === 'string' ? value : undefined;
+  const imageUrl = getImageUrl(imageValue);
+
+  if (!imageUrl) {
+    return <Text>-</Text>;
+  }
+
+  return (
+    <Box
+      height={MEDIA_HEIGHT}
+      width="100%"
+      maxWidth={MEDIA_MAX_WIDTH}
+      borderRadius={MEDIA_BORDER_RADIUS}
+      overflow="hidden"
+    >
+      <img
+        src={imageUrl}
+        alt={displayName || id}
+        style={{
+          height: '100%',
+          width: '100%',
+          objectFit: 'cover',
+          display: 'block',
+        }}
+      />
+    </Box>
+  );
+};

package/src/components/image/index.ts

@@ -1,3 +1,5 @@
 export * from './image-thumbnail';
 export * from './image-view';
+export * from './image-view-field';
 export * from './cell-image-edit';
+export * from './form-image-input';

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay3859327744";
+var _namespace_ = "thumbnailreplaceoverlay1906651930";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"thumbnailreplaceoverlay3859327744__root","icon":"thumbnailreplaceoverlay3859327744__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay1906651930__root","icon":"thumbnailreplaceoverlay1906651930__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/index.ts

@@ -1,9 +1,11 @@
 export * from './address';
+export * from './array';
 export * from './audio';
 export * from './common';
 export * from './exclamation';
 export * from './time-input';
 export * from './time-view';
+export * from './json-input';
 export * from './object';
 export * from './media-gallery';
 export * from './rich-content';
@@ -13,6 +15,8 @@ export * from './video';
 export * from './document';
 export * from './multi-document';
 export * from './color-view';
+export * from './date-input';
+export * from './datetime-input';
 export * from './delete-dialog';
 export * from './email';
 export * from './boolean';

package/src/components/json-input/index.ts

@@ -0,0 +1,2 @@
+export * from './json-input';
+export * from './form-json-input';

package/src/components/media-control/cell-media-edit-shell.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaeditshell2103765304";
+var _namespace_ = "cellmediaeditshell2607537795";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellmediaeditshell2103765304__root"};
+export var classes = {"root":"cellmediaeditshell2607537795__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-control/paste-url-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton323743403";
+var _namespace_ = "pasteurlbutton310768866";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton323743403__root","iconButtonTooltip":"pasteurlbutton323743403__iconButtonTooltip","iconButton":"pasteurlbutton323743403__iconButton"};
+export var classes = {"root":"pasteurlbutton310768866__root","iconButtonTooltip":"pasteurlbutton310768866__iconButtonTooltip","iconButton":"pasteurlbutton310768866__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield3333265392";
+var _namespace_ = "formmediagalleryfield4220744262";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield3333265392__root","container":"formmediagalleryfield3333265392__container","viewBox":"formmediagalleryfield3333265392__viewBox","addItemWrapper":"formmediagalleryfield3333265392__addItemWrapper","addItem":"formmediagalleryfield3333265392__addItem","overlay":"formmediagalleryfield3333265392__overlay","image":"formmediagalleryfield3333265392__image","previewImage":"formmediagalleryfield3333265392__previewImage","previewVideo":"formmediagalleryfield3333265392__previewVideo"};
+export var classes = {"root":"formmediagalleryfield4220744262__root","container":"formmediagalleryfield4220744262__container","viewBox":"formmediagalleryfield4220744262__viewBox","addItemWrapper":"formmediagalleryfield4220744262__addItemWrapper","addItem":"formmediagalleryfield4220744262__addItem","overlay":"formmediagalleryfield4220744262__overlay","image":"formmediagalleryfield4220744262__image","previewImage":"formmediagalleryfield4220744262__previewImage","previewVideo":"formmediagalleryfield4220744262__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/form-media-gallery.driver.ts

@@ -0,0 +1,30 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+import { FormMediaGalleryFieldUniDriver } from './form-media-gallery-field.uni.driver';
+
+export function FormMediaGalleryDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const inner = FormMediaGalleryFieldUniDriver(
+    base.$(`[data-hook="media-gallery-${field.id}"]`),
+    `media-gallery-${field.id}`,
+  );
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    inner: () => inner,
+  };
+}

package/src/components/media-gallery/form-media-gallery.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+import { BaseInputProps } from '../../types/base-input';
+import type { WixCodeGalleryItem } from '../../auto-field-types';
+import { isEmpty } from '../../validations/array';
+import { FormMediaGalleryField } from './form-media-gallery-field';
+
+export interface FormMediaGalleryProps
+  extends BaseInputProps<WixCodeGalleryItem[]> {
+  autoFocus?: boolean;
+}
+
+const _FormMediaGallery = (props: FormMediaGalleryProps) => {
+  const { field, dataHook, formControl, data, autoFocus } = props;
+  const { translate: pt } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <FormMediaGalleryField
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        onClear={() => controller.field.onChange([])}
+        invalid={!!controller.fieldState.error}
+        autoFocus={autoFocus}
+        readOnly={false}
+        dataHook={`media-gallery-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormMediaGallery = observer(_FormMediaGallery);

package/src/components/media-image/media-image.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage83983951";
+var _namespace_ = "mediaimage4014780765";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,12 +13,12 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediaimage83983951__root"};
+export var classes = {"root":"mediaimage4014780765__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 
-export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage83983951-from","to":"--mediaimage83983951-to"}; 
+export var vars = {"wds-color-red-200":"--wds-color-red-200","wsr-color-R20":"--wsr-color-R20","wds-color-black-550":"--wds-color-black-550","wsr-color-D55":"--wsr-color-D55","from":"--mediaimage4014780765-from","to":"--mediaimage4014780765-to"}; 
 
 
 

package/src/components/media-image/overlays/overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay448562002";
+var _namespace_ = "overlay2083186616";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay448562002__root","iconOverlay":"overlay448562002__iconOverlay"};
+export var classes = {"root":"overlay2083186616__root","iconOverlay":"overlay2083186616__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-loader/media-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader732921463";
+var _namespace_ = "medialoader2739525698";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader732921463__root","loader":"medialoader732921463__loader"};
+export var classes = {"root":"medialoader2739525698__root","loader":"medialoader2739525698__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "mediatag803492834";
+var _namespace_ = "mediatag15581887";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"mediatag803492834__root"};
+export var classes = {"root":"mediatag15581887__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/index.ts

@@ -1,2 +1,3 @@
 export { MultiDocumentView } from './multi-document-view/multi-document-view';
+export { FormMultiDocument } from './multi-document-input/form-multi-document';
 export { FormMultiDocumentField } from './multi-document-input/form-multi-document-field';

package/src/components/multi-document/multi-document-input/form-multi-document.driver.ts

@@ -0,0 +1,26 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../../testkit/base-driver';
+
+export function FormMultiDocumentDriver(
+  base: UniDriver,
+  body: UniDriver,
+  field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const multiDocumentField = base.$(`[data-hook="multi-document-${field.id}"]`);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    multiDocumentFieldExists: () => multiDocumentField.exists(),
+    isRequired: () => formField.isRequired(),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+  };
+}

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument441385592";
+var _namespace_ = "formmultidocument2147054451";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmultidocument441385592__root","viewRoot":"formmultidocument441385592__viewRoot","singleViewWrapper":"formmultidocument441385592__singleViewWrapper","addDocumentButton":"formmultidocument441385592__addDocumentButton"};
+export var classes = {"root":"formmultidocument2147054451__root","viewRoot":"formmultidocument2147054451__viewRoot","singleViewWrapper":"formmultidocument2147054451__singleViewWrapper","addDocumentButton":"formmultidocument2147054451__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../../types/base-input';
+import { isEmpty } from '../../../validations/array';
+import { FormMultiDocumentField } from './form-multi-document-field';
+
+export interface FormMultiDocumentProps extends BaseInputProps<string[]> {}
+
+const _FormMultiDocument = (props: FormMultiDocumentProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const controller = useController({
+    name: field?.id ?? '',
+    control: formControl,
+    defaultValue: data?.[field?.id ?? ''],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <FormMultiDocumentField
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange(value)}
+        dataHook={`multi-document-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormMultiDocument = observer(_FormMultiDocument);

package/src/components/number-input/form-number.driver.ts

@@ -1,3 +1,4 @@
+import type { Field } from '@wix/bex-core';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
   FormFieldUniDriver,
@@ -6,7 +7,11 @@ import {
 
 import { baseUniDriverFactory } from '../../testkit/base-driver';
 
-export function FormNumberDriver(base: UniDriver, body: UniDriver) {
+export function FormNumberDriver(
+  base: UniDriver,
+  body: UniDriver,
+  _field: Field,
+) {
   const formField = FormFieldUniDriver(base, body);
   const input = NumberInputUniDriver(base, body);
 

package/src/components/number-input/form-number.tsx

@@ -6,6 +6,7 @@ import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
 import { isGreaterThan, isLessThan } from '../../validations/number';
+import { isEmpty } from '../../validations/value';
 
 export interface FormNumberProps extends BaseInputProps<number | null> {}
 
@@ -24,10 +25,7 @@ const _FormNumber = (props: FormNumberProps) => {
     defaultValue: data?.[field.id],
     rules: {
       validate: (value) => {
-        if (
-          field.validation?.required &&
-          (value === null || value === undefined || value === '')
-        ) {
+        if (field.validation?.required && isEmpty(value)) {
           return t('cairo.fieldValidation.requiredField');
         }
 

package/src/components/object/form-object.driver.ts

@@ -0,0 +1,20 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import { FormFieldUniDriver } from '@wix/design-system/dist/testkit/unidriver';
+
+import {
+  baseUniDriverFactory,
+  getFormFieldLabelText,
+} from '../../testkit/base-driver';
+
+export function FormObjectDriver(base: UniDriver, body: UniDriver) {
+  const formField = FormFieldUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: () => getFormFieldLabelText(formField),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+    hasSuffix: async () => (await formField.getSuffix()) !== null,
+  };
+}

package/src/components/object/form-object.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
+import {
+  isDataValidOrNotSet,
+  objectValidation,
+} from '../../validations/validations';
+import { isEmpty } from '../../validations/string';
+import { TypeMismatchExclamation } from '../exclamation/type-mismatch-exclamation';
+
+import { FormJsonInput } from '../json-input/form-json-input';
+
+export interface FormObjectProps extends BaseInputProps<string> {}
+
+const _FormObject = (props: FormObjectProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: pt } = useWixPatternsContainer();
+  const { t } = useTranslations();
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+      suffix={
+        isDataValidOrNotSet(
+          controller.field.value,
+          objectValidation,
+        ) ? undefined : (
+          <TypeMismatchExclamation
+            typeName={t('auto-patterns.fields.field_type_object_title')}
+            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}
+            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}
+            onClear={() => controller.field.onChange(undefined)}
+            onChange={(value) => controller.field.onChange(value)}
+            convertDisabledText={t(
+              'auto-patterns.fields.type_mismatch_convert_disabled',
+            )}
+            fieldName={field.displayName}
+            isConverted={false}
+            isConverting={false}
+            convertedValue={{}}
+            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {
+              typeName: 'Object',
+            })}
+          />
+        )
+      }
+    >
+      <FormJsonInput
+        autoFocus={false}
+        data={controller.field.value}
+        onChange={(value) => controller.field.onChange?.(value)}
+        onBlur={controller.field.onBlur}
+        ref={controller.field.ref}
+        dataHook={`object-${field.id}`}
+        field={field.id}
+      />
+    </FormField>
+  );
+};
+
+export const FormObject = observer(_FormObject);

package/src/components/object/index.ts

@@ -1,4 +1,3 @@
 export * from './json-view';
-export * from './json-input';
 export * from './cell-json-input';
-export * from './form-json-input';
+export * from './form-object';