@wix/auto-patterns 1.44.0 → 1.46.0

package/dist/esm/components/fields/Number.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { FormField, NumberInput } from '@wix/design-system';
+import { useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+export const Number = props => {
+  var _field$validation, _field$validation3, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  const numberRange = (_field$validation = field.validation) == null ? void 0 : _field$validation.numberRange;
+  const min = numberRange == null ? void 0 : numberRange.min;
+  const max = numberRange == null ? void 0 : numberRange.max;
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation2;
+        if ((_field$validation2 = field.validation) != null && _field$validation2.required && (value === null || value === undefined || value === '')) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        if (value !== null && value !== undefined) {
+          if (min !== undefined && value < min) {
+            return t('cairo.fieldValidation.minNumber', {
+              minAmount: min
+            });
+          }
+          if (max !== undefined && value > max) {
+            return t('cairo.fieldValidation.maxNumber', {
+              maxAmount: max
+            });
+          }
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation3 = field.validation) == null ? void 0 : _field$validation3.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    value: controller.field.value ?? undefined,
+    onChange: e => controller.field.onChange(e),
+    onBlur: controller.field.onBlur,
+    inputRef: controller.field.ref,
+    dataHook: `number-${field.id}`
+  }));
+};
+//# sourceMappingURL=Number.js.map

package/dist/esm/components/fields/Number.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","NumberInput","useSelector","useWixPatternsContainer","useController","Number","props","_field$validation","_field$validation3","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","numberRange","validation","min","max","controller","name","id","control","defaultValue","rules","validate","value","_field$validation2","required","undefined","minAmount","maxAmount","createElement","label","displayName","fieldState","error","statusMessage","message","onChange","e","onBlur","inputRef","ref"],"sources":["../../../../src/components/fields/Number.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, NumberInput } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nexport interface NumberProps extends BaseInputProps<number | null> {}\n\nexport const Number = (props: NumberProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const numberRange = field.validation?.numberRange;\n  const min = numberRange?.min;\n  const max = numberRange?.max;\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        if (value !== null && value !== undefined) {\n          if (min !== undefined && value < min) {\n            return t('cairo.fieldValidation.minNumber', {\n              minAmount: min,\n            });\n          }\n          if (max !== undefined && value > max) {\n            return t('cairo.fieldValidation.maxNumber', {\n              maxAmount: max,\n            });\n          }\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <NumberInput\n        value={controller.field.value ?? undefined}\n        onChange={(e) => controller.field.onChange(e)}\n        onBlur={controller.field.onBlur}\n        inputRef={controller.field.ref}\n        dataHook={`number-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/Object.js

@@ -0,0 +1,67 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+import { isDataValidOrNotSet } from '../../cms-fields/validations/validations';
+import { FormJsonInput, TypeMismatchExclamation } from '../../cms-fields';
+import * as objectValidation from '../../cms-fields/validations/object';
+export const Object = props => {
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook
+  } = props;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const {
+    translate: pt
+  } = useWixPatternsContainer();
+  const pageState = useEntityPageContext();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: pageState.form.control,
+    defaultValue: (_pageState$entity = pageState.entity) == null ? void 0 : _pageState$entity[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook,
+    suffix: isDataValidOrNotSet(controller.field.value, objectValidation) ? undefined : /*#__PURE__*/React.createElement(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'
+      })
+    })
+  }, /*#__PURE__*/React.createElement(FormJsonInput, {
+    autoFocus: false,
+    data: controller.field.value,
+    onChange: value => controller.field.onChange == null ? void 0 : controller.field.onChange(value),
+    onBlur: controller.field.onBlur,
+    ref: controller.field.ref,
+    dataHook: `object-${field.id}`,
+    field: field.id
+  }));
+};
+//# sourceMappingURL=Object.js.map

package/dist/esm/components/fields/Object.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","useEntityPageContext","useWixPatternsContainer","useController","useAutoPatternsAppContainer","isDataValidOrNotSet","FormJsonInput","TypeMismatchExclamation","objectValidation","Object","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","pt","pageState","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","status","fieldState","error","statusMessage","message","suffix","typeName","clearButtonText","convertButtonText","onClear","onChange","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","autoFocus","data","onBlur","ref"],"sources":["../../../../src/components/fields/Object.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\nimport { isDataValidOrNotSet } from '../../cms-fields/validations/validations';\nimport { FormJsonInput, TypeMismatchExclamation } from '../../cms-fields';\nimport * as objectValidation from '../../cms-fields/validations/object';\n\nexport interface ObjectProps extends BaseInputProps<string> {}\n\nexport const Object = (props: ObjectProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t } = useAutoPatternsAppContainer();\n  const { translate: pt } = useWixPatternsContainer();\n\n  const pageState = useEntityPageContext();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as any)?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isDataValidOrNotSet(\n          controller.field.value,\n          objectValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_object_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue={{}}\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Object',\n            })}\n          />\n        )\n      }\n    >\n      <FormJsonInput\n        autoFocus={false}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange?.(value)}\n        onBlur={controller.field.onBlur}\n        ref={controller.field.ref}\n        dataHook={`object-${field.id}`}\n        field={field.id}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/Reference.js

@@ -0,0 +1,122 @@
+import React, { useCallback, useMemo } from 'react';
+import { FormField, AutoComplete, Input } from '@wix/design-system';
+import { useController } from '@wix/patterns/form';
+import { useReferenceField } from '../../hooks';
+import { useWixPatternsContainer } from '@wix/patterns';
+import { ReferenceAvatar } from '../ReferenceAvatar';
+import { getImageFieldId } from '../../utils/schema';
+import { ReferenceFooter } from '../ReferenceFooter/ReferenceFooter';
+export const Reference = props => {
+  var _controller$field$val, _field$validation2, _controller$fieldStat, _field$validation3;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    collection,
+    referencedSchema,
+    idField,
+    displayField,
+    keyedItems,
+    showInitialLoader,
+    fetchedLastPage,
+    searchValue,
+    options,
+    placeholder
+  } = useReferenceField({
+    field
+  });
+  const {
+    translate: t
+  } = useWixPatternsContainer();
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data[field.id],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && !value) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  const selectedDisplayValue = ((_controller$field$val = controller.field.value) == null ? void 0 : _controller$field$val[displayField]) || '';
+  const displayValue = searchValue || selectedDisplayValue;
+  const selectedImage = useMemo(() => {
+    var _controller$field$val2;
+    const selectedId = (_controller$field$val2 = controller.field.value) == null ? void 0 : _controller$field$val2[idField];
+    if (!selectedId) {
+      return undefined;
+    }
+    const foundItem = keyedItems.find(ki => ki.key === selectedId);
+    if (foundItem != null && foundItem.item.image) {
+      return foundItem.item.image;
+    }
+    if (referencedSchema) {
+      const imageFieldId = getImageFieldId(referencedSchema.fields);
+      if (imageFieldId) {
+        var _controller$field$val3;
+        return (_controller$field$val3 = controller.field.value) == null ? void 0 : _controller$field$val3[imageFieldId];
+      }
+    }
+    return undefined;
+  }, [controller.field.value, idField, keyedItems, referencedSchema]);
+  const selectedPrefix = selectedDisplayValue && !searchValue ? /*#__PURE__*/React.createElement(Input.Affix, null, /*#__PURE__*/React.createElement(ReferenceAvatar, {
+    name: selectedDisplayValue,
+    image: selectedImage
+  })) : undefined;
+  const handleSelect = useCallback(option => {
+    const selectedItem = keyedItems.find(ki => ki.key === option.id);
+    controller.field.onChange({
+      [idField]: String(option.id),
+      [displayField]: (selectedItem == null ? void 0 : selectedItem.item.name) || ''
+    });
+    collection.clearSearch();
+  }, [idField, displayField, controller.field, collection, keyedItems]);
+  const handleChange = useCallback(e => {
+    collection.search(e.target.value);
+    if (!e.target.value) {
+      controller.field.onChange(null);
+    }
+  }, [collection, controller.field]);
+  const handleClear = useCallback(() => {
+    controller.field.onChange(null);
+    collection.clearSearch();
+  }, [controller.field, collection]);
+  const handleBlur = useCallback(() => {
+    collection.clearSearch();
+  }, [collection]);
+  if (!referencedSchema) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(AutoComplete, {
+    placeholder: placeholder,
+    options: options,
+    value: displayValue,
+    prefix: selectedPrefix,
+    onChange: handleChange,
+    onSelect: handleSelect,
+    onClear: handleClear,
+    onBlur: handleBlur,
+    clearButton: !((_field$validation3 = field.validation) != null && _field$validation3.required),
+    infiniteScroll: true,
+    hasMore: !showInitialLoader && !fetchedLastPage,
+    loadMore: collection.fetchNextPageIfNeeded,
+    fixedFooter: /*#__PURE__*/React.createElement(ReferenceFooter, {
+      collection: collection
+    }),
+    dataHook: `reference-input-${field.id}`
+  }));
+};
+//# sourceMappingURL=Reference.js.map

package/dist/esm/components/fields/Reference.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useCallback","useMemo","FormField","AutoComplete","Input","useController","useReferenceField","useWixPatternsContainer","ReferenceAvatar","getImageFieldId","ReferenceFooter","Reference","props","_controller$field$val","_field$validation2","_controller$fieldStat","_field$validation3","field","dataHook","formControl","data","collection","referencedSchema","idField","displayField","keyedItems","showInitialLoader","fetchedLastPage","searchValue","options","placeholder","translate","t","controller","name","id","control","defaultValue","rules","validate","value","_field$validation","validation","required","selectedDisplayValue","displayValue","selectedImage","_controller$field$val2","selectedId","undefined","foundItem","find","ki","key","item","image","imageFieldId","fields","_controller$field$val3","selectedPrefix","createElement","Affix","handleSelect","option","selectedItem","onChange","String","clearSearch","handleChange","e","search","target","handleClear","handleBlur","label","displayName","status","fieldState","error","statusMessage","message","prefix","onSelect","onClear","onBlur","clearButton","infiniteScroll","hasMore","loadMore","fetchNextPageIfNeeded","fixedFooter"],"sources":["../../../../src/components/fields/Reference.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from 'react';\nimport {\n  FormField,\n  DropdownLayoutValueOption,\n  AutoComplete,\n  Input,\n} from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useController } from '@wix/patterns/form';\nimport { ReferenceField } from '../../types';\nimport { useReferenceField } from '../../hooks';\nimport { useWixPatternsContainer } from '@wix/patterns';\nimport { ReferenceAvatar } from '../ReferenceAvatar';\nimport { getImageFieldId } from '../../utils/schema';\nimport { ReferenceFooter } from '../ReferenceFooter/ReferenceFooter';\n\ntype ReferenceValue = Record<string, unknown>;\n\nexport interface ReferenceProps extends BaseInputProps<ReferenceValue | null> {\n  field: ReferenceField;\n}\n\nexport const Reference = (props: ReferenceProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const {\n    collection,\n    referencedSchema,\n    idField,\n    displayField,\n    keyedItems,\n    showInitialLoader,\n    fetchedLastPage,\n    searchValue,\n    options,\n    placeholder,\n  } = useReferenceField({ field });\n  const { translate: t } = useWixPatternsContainer();\n\n  const controller = useController({\n    name: field.id,\n    control: formControl,\n    defaultValue: data[field.id],\n    rules: {\n      validate: (value) => {\n        if (field.validation?.required && !value) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n        return true;\n      },\n    },\n  });\n\n  const selectedDisplayValue = controller.field.value?.[displayField] || '';\n  const displayValue = searchValue || selectedDisplayValue;\n\n  const selectedImage = useMemo(() => {\n    const selectedId = controller.field.value?.[idField];\n    if (!selectedId) {\n      return undefined;\n    }\n\n    const foundItem = keyedItems.find((ki) => ki.key === selectedId);\n    if (foundItem?.item.image) {\n      return foundItem.item.image;\n    }\n\n    if (referencedSchema) {\n      const imageFieldId = getImageFieldId(referencedSchema.fields);\n      if (imageFieldId) {\n        return controller.field.value?.[imageFieldId];\n      }\n    }\n    return undefined;\n  }, [controller.field.value, idField, keyedItems, referencedSchema]);\n\n  const selectedPrefix =\n    selectedDisplayValue && !searchValue ? (\n      <Input.Affix>\n        <ReferenceAvatar name={selectedDisplayValue} image={selectedImage} />\n      </Input.Affix>\n    ) : undefined;\n\n  const handleSelect = useCallback(\n    (option: DropdownLayoutValueOption) => {\n      const selectedItem = keyedItems.find((ki) => ki.key === option.id);\n      controller.field.onChange({\n        [idField]: String(option.id),\n        [displayField]: selectedItem?.item.name || '',\n      });\n      collection.clearSearch();\n    },\n    [idField, displayField, controller.field, collection, keyedItems],\n  );\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      collection.search(e.target.value);\n      if (!e.target.value) {\n        controller.field.onChange(null);\n      }\n    },\n    [collection, controller.field],\n  );\n\n  const handleClear = useCallback(() => {\n    controller.field.onChange(null);\n    collection.clearSearch();\n  }, [controller.field, collection]);\n\n  const handleBlur = useCallback(() => {\n    collection.clearSearch();\n  }, [collection]);\n\n  if (!referencedSchema) {\n    return null;\n  }\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <AutoComplete\n        placeholder={placeholder}\n        options={options}\n        value={displayValue}\n        prefix={selectedPrefix}\n        onChange={handleChange}\n        onSelect={handleSelect}\n        onClear={handleClear}\n        onBlur={handleBlur}\n        clearButton={!field.validation?.required}\n        infiniteScroll\n        hasMore={!showInitialLoader && !fetchedLastPage}\n        loadMore={collection.fetchNextPageIfNeeded}\n        fixedFooter={<ReferenceFooter collection={collection} />}\n        dataHook={`reference-input-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/RichContent.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import { fromPlainText } from '@wix/ricos';
+import { FormField } from '@wix/design-system';
+import { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { isDataValidOrNotSet } from '../../cms-fields/validations/validations';
+import { TypeMismatchExclamation } from '../../cms-fields';
+import { FormRichContentInput } from '../../cms-fields/components/rich-content/editor';
+import * as richContentValidation from '../../cms-fields/validations/rich-content';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+export const RichContent = props => {
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook
+  } = props;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const {
+    translate: pt,
+    experiments
+  } = useWixPatternsContainer();
+  const theme = {};
+  const ricosExperiments = experiments;
+  const pageState = useEntityPageContext();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: pageState.form.control,
+    defaultValue: (_pageState$entity = pageState.entity) == null ? void 0 : _pageState$entity[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  const isValueValid = isDataValidOrNotSet(controller.field.value, richContentValidation);
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook,
+    suffix: isValueValid ? undefined : /*#__PURE__*/React.createElement(TypeMismatchExclamation, {
+      typeName: t('auto-patterns.fields.field_type_rich_content_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: fromPlainText(''),
+      tooltipText: t('auto-patterns.fields.type_mismatch_tip', {
+        typeName: 'Rich Content'
+      })
+    })
+  }, isValueValid ? /*#__PURE__*/React.createElement(FormRichContentInput, {
+    autoFocus: false,
+    data: controller.field.value,
+    onChange: value => controller.field.onChange == null ? void 0 : controller.field.onChange(value),
+    dataHook: `rich-content-${field.id}`,
+    field: field.id,
+    theme: theme,
+    experiments: ricosExperiments,
+    isSiteMetadataLoading: false
+  }) : null);
+};
+//# sourceMappingURL=RichContent.js.map

package/dist/esm/components/fields/RichContent.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","fromPlainText","FormField","useEntityPageContext","useWixPatternsContainer","useController","isDataValidOrNotSet","TypeMismatchExclamation","FormRichContentInput","richContentValidation","useAutoPatternsAppContainer","RichContent","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","pt","experiments","theme","ricosExperiments","pageState","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","isValueValid","createElement","label","displayName","status","fieldState","error","statusMessage","message","suffix","typeName","clearButtonText","convertButtonText","onClear","onChange","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","autoFocus","data","isSiteMetadataLoading"],"sources":["../../../../src/components/fields/RichContent.tsx"],"sourcesContent":["import React from 'react';\n\nimport type { RichContent as RichContentType, RicosTheme } from '@wix/ricos';\nimport type Experiments from '@wix/wix-experiments';\nimport { fromPlainText } from '@wix/ricos';\nimport { FormField } from '@wix/design-system';\nimport { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nimport { isDataValidOrNotSet } from '../../cms-fields/validations/validations';\nimport { TypeMismatchExclamation } from '../../cms-fields';\nimport { FormRichContentInput } from '../../cms-fields/components/rich-content/editor';\nimport * as richContentValidation from '../../cms-fields/validations/rich-content';\n\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\nimport { BaseInputProps } from './types';\n\nexport interface RichContentProps extends BaseInputProps<RichContentType> {}\n\nexport const RichContent = (props: RichContentProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t } = useAutoPatternsAppContainer();\n  const { translate: pt, experiments } = useWixPatternsContainer();\n  const theme = {} as RicosTheme;\n  const ricosExperiments = experiments as unknown as Experiments;\n\n  const pageState = useEntityPageContext();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as Record<string, RichContentType>)?.[\n      field?.id ?? ''\n    ],\n    rules: {\n      validate: (value: RichContentType | string | undefined) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const isValueValid = isDataValidOrNotSet(\n    controller.field.value,\n    richContentValidation,\n  );\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isValueValid ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_rich_content_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue={fromPlainText('')}\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Rich Content',\n            })}\n          />\n        )\n      }\n    >\n      {isValueValid ? (\n        <FormRichContentInput\n          autoFocus={false}\n          data={controller.field.value}\n          onChange={(value) => controller.field.onChange?.(value)}\n          dataHook={`rich-content-${field.id}`}\n          field={field.id}\n          theme={theme}\n          experiments={ricosExperiments}\n          isSiteMetadataLoading={false}\n        />\n      ) : null}\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/RichText.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+import { isDataValidOrNotSet } from '../../cms-fields/validations/validations';
+import { FormRichTextInput, TypeMismatchExclamation } from '../../cms-fields';
+import * as richTextValidation from '../../cms-fields/validations/rich-text';
+export const RichText = props => {
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook
+  } = props;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const {
+    translate: pt
+  } = useWixPatternsContainer();
+  const pageState = useEntityPageContext();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: pageState.form.control,
+    defaultValue: (_pageState$entity = pageState.entity) == null ? void 0 : _pageState$entity[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook,
+    suffix: isDataValidOrNotSet(controller.field.value, richTextValidation) ? undefined : /*#__PURE__*/React.createElement(TypeMismatchExclamation, {
+      typeName: t('auto-patterns.fields.field_type_rich_text_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: 'Rich Text'
+      })
+    })
+  }, /*#__PURE__*/React.createElement(FormRichTextInput, {
+    autoFocus: false,
+    data: controller.field.value,
+    onChange: value => controller.field.onChange == null ? void 0 : controller.field.onChange(value),
+    dataHook: `rich-text-${field.id}`,
+    field: field.id
+  }));
+};
+//# sourceMappingURL=RichText.js.map

package/dist/esm/components/fields/RichText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","useEntityPageContext","useWixPatternsContainer","useController","useAutoPatternsAppContainer","isDataValidOrNotSet","FormRichTextInput","TypeMismatchExclamation","richTextValidation","RichText","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","pt","pageState","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","status","fieldState","error","statusMessage","message","suffix","typeName","clearButtonText","convertButtonText","onClear","onChange","convertDisabledText","fieldName","isConverted","isConverting","convertedValue","tooltipText","autoFocus","data"],"sources":["../../../../src/components/fields/RichText.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';\nimport { isDataValidOrNotSet } from '../../cms-fields/validations/validations';\nimport { FormRichTextInput, TypeMismatchExclamation } from '../../cms-fields';\nimport * as richTextValidation from '../../cms-fields/validations/rich-text';\n\nexport interface RichTextProps extends BaseInputProps<string> {}\n\nexport const RichText = (props: RichTextProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t } = useAutoPatternsAppContainer();\n  const { translate: pt } = useWixPatternsContainer();\n\n  const pageState = useEntityPageContext();\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: pageState.form.control,\n    defaultValue: (pageState.entity as any)?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return pt('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n      suffix={\n        isDataValidOrNotSet(\n          controller.field.value,\n          richTextValidation,\n        ) ? undefined : (\n          <TypeMismatchExclamation\n            typeName={t('auto-patterns.fields.field_type_rich_text_title')}\n            clearButtonText={t('auto-patterns.fields.type_mismatch_clear')}\n            convertButtonText={t('auto-patterns.fields.type_mismatch_convert')}\n            onClear={() => controller.field.onChange(undefined)}\n            onChange={(value) => controller.field.onChange(value)}\n            convertDisabledText={t(\n              'auto-patterns.fields.type_mismatch_convert_disabled',\n            )}\n            fieldName={field.displayName}\n            isConverted={false}\n            isConverting={false}\n            convertedValue=\"\"\n            tooltipText={t('auto-patterns.fields.type_mismatch_tip', {\n              typeName: 'Rich Text',\n            })}\n          />\n        )\n      }\n    >\n      <FormRichTextInput\n        autoFocus={false}\n        data={controller.field.value}\n        onChange={(value) => controller.field.onChange?.(value)}\n        dataHook={`rich-text-${field.id}`}\n        field={field.id}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/ShortText.js

@@ -0,0 +1,60 @@
+import React from 'react';
+import { FormField, Input } from '@wix/design-system';
+import { useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+export const ShortText = props => {
+  var _field$validation, _controller$field$val, _field$validation3, _controller$fieldStat;
+  const {
+    field,
+    dataHook,
+    formControl,
+    data
+  } = props;
+  const {
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  const stringLengthRange = (_field$validation = field.validation) == null ? void 0 : _field$validation.stringLengthRange;
+  const minLength = stringLengthRange == null ? void 0 : stringLengthRange.minLength;
+  const maxLength = stringLengthRange == null ? void 0 : stringLengthRange.maxLength;
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: formControl,
+    defaultValue: data == null ? void 0 : data[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation2;
+        if ((_field$validation2 = field.validation) != null && _field$validation2.required && (value === null || value === undefined || value === '')) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+        if (minLength && value && value.length < minLength) {
+          return t('cairo.fieldValidation.minCharacter', {
+            charMin: minLength
+          });
+        } else if (maxLength && value && value.length > maxLength) {
+          return t('cairo.fieldValidation.maxCharacter', {
+            charMax: maxLength
+          });
+        }
+        return true;
+      }
+    }
+  });
+  const charCount = maxLength ? maxLength - ((_controller$field$val = controller.field.value) == null ? void 0 : _controller$field$val.length) : undefined;
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation3 = field.validation) == null ? void 0 : _field$validation3.required,
+    charCount: charCount,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook
+  }, /*#__PURE__*/React.createElement(Input, {
+    value: controller.field.value,
+    onChange: e => controller.field.onChange == null ? void 0 : controller.field.onChange(e.target.value),
+    onBlur: controller.field.onBlur,
+    dataHook: `short-text-${field.id}`,
+    ref: controller.field.ref
+  }));
+};
+//# sourceMappingURL=ShortText.js.map

package/dist/esm/components/fields/ShortText.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","Input","useSelector","useWixPatternsContainer","useController","ShortText","props","_field$validation","_controller$field$val","_field$validation3","_controller$fieldStat","field","dataHook","formControl","data","translate","t","container","initTask","status","stringLengthRange","validation","minLength","maxLength","controller","name","id","control","defaultValue","rules","validate","value","_field$validation2","required","undefined","length","charMin","charMax","charCount","createElement","label","displayName","fieldState","error","statusMessage","message","onChange","e","target","onBlur","ref"],"sources":["../../../../src/components/fields/ShortText.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, Input } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nexport interface ShortTextProps extends BaseInputProps<string> {}\n\nexport const ShortText = (props: ShortTextProps) => {\n  const { field, dataHook, formControl, data } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const stringLengthRange = field.validation?.stringLengthRange;\n  const minLength = stringLengthRange?.minLength;\n  const maxLength = stringLengthRange?.maxLength;\n\n  const controller = useController({\n    name: field?.id ?? '',\n    control: formControl,\n    defaultValue: data?.[field?.id ?? ''],\n    rules: {\n      validate: (value) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        }\n\n        if (minLength && value && value.length < minLength) {\n          return t('cairo.fieldValidation.minCharacter', {\n            charMin: minLength,\n          });\n        } else if (maxLength && value && value.length > maxLength) {\n          return t('cairo.fieldValidation.maxCharacter', {\n            charMax: maxLength,\n          });\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const charCount = maxLength\n    ? maxLength - controller.field.value?.length\n    : undefined;\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      charCount={charCount}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n      dataHook={dataHook}\n    >\n      <Input\n        value={controller.field.value}\n        onChange={(e) => controller.field.onChange?.(e.target.value)}\n        onBlur={controller.field.onBlur}\n        dataHook={`short-text-${field.id}`}\n        ref={controller.field.ref}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/fields/Time.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FormField } from '@wix/design-system';
+import { useEntityPageContext, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { useAutoPatternsAppContainer } from '../AutoPatternsApp/AutoPatternsAppContainerProvider';
+import { isDataValidOrNotSet } from '../../cms-fields/validations/validations';
+import { FormTimeInput, TypeMismatchExclamation } from '../../cms-fields';
+import * as timeValidation from '../../cms-fields/validations/time';
+export const Time = props => {
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook
+  } = props;
+  const {
+    translate: t
+  } = useAutoPatternsAppContainer();
+  const {
+    translate: pt
+  } = useWixPatternsContainer();
+  const pageState = useEntityPageContext();
+  const controller = useController({
+    name: (field == null ? void 0 : field.id) ?? '',
+    control: pageState.form.control,
+    defaultValue: (_pageState$entity = pageState.entity) == null ? void 0 : _pageState$entity[(field == null ? void 0 : field.id) ?? ''],
+    rules: {
+      validate: value => {
+        var _field$validation;
+        if ((_field$validation = field.validation) != null && _field$validation.required && (value === null || value === undefined || value === '')) {
+          return pt('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
+    label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message,
+    dataHook: dataHook,
+    suffix: isDataValidOrNotSet(controller.field.value, timeValidation) ? undefined : /*#__PURE__*/React.createElement(TypeMismatchExclamation, {
+      typeName: t('auto-patterns.fields.field_type_time_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: "00:00:00.000",
+      tooltipText: t('auto-patterns.fields.type_mismatch_tip', {
+        typeName: 'Time'
+      })
+    })
+  }, /*#__PURE__*/React.createElement(FormTimeInput, {
+    autoFocus: false,
+    data: controller.field.value,
+    onChange: value => controller.field.onChange(value),
+    dataHook: `time-${field.id}`
+  }));
+};
+//# sourceMappingURL=Time.js.map