@wix/auto-patterns 1.8.0 → 1.9.0

package/dist/esm/components/AutoPatternsEntityPage/Fields/FormFieldInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ShortText","useEntityPageContext","useController","Checkbox","DateInput","DateTime","Number","LongText","Url","EDITABLE_INPUT_ELEMENTS","SHORT_TEXT","LONG_TEXT","BOOLEAN","DATE","DATETIME","NUMBER","URL","FormFieldInput","props","field","inputRef","pageState","controller","name","id","control","form","defaultValue","entity","hasOwnProperty","type","FieldInput","createElement","value","onChange","dataHook"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/FormFieldInput.tsx"],"sourcesContent":["import React from 'react';\nimport { ShortText } from './ShortText';\nimport { useEntityPageContext } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { Field, PatternsFieldType } from '../../../types';\nimport { Checkbox } from './Checkbox';\nimport { DateInput } from './DateInput';\nimport { DateTime } from './DateTime';\nimport { Number } from './Number';\nimport { LongText } from './LongText';\nimport { Url } from './Url';\nimport { BaseInputProps } from './types';\n\nexport const EDITABLE_INPUT_ELEMENTS: Partial<\n  Record<PatternsFieldType, React.ComponentType<any>>\n> = {\n  SHORT_TEXT: ShortText,\n  LONG_TEXT: LongText,\n  BOOLEAN: Checkbox,\n  DATE: DateInput,\n  DATETIME: DateTime,\n  NUMBER: Number,\n  URL: Url,\n};\n\nexport interface FormFieldInputProps {\n  field: Field;\n  inputRef?: BaseInputProps<any>['inputRef'];\n}\n\nexport const FormFieldInput = (props: FormFieldInputProps) => {\n  const { field, inputRef } = props;\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  });\n\n  if (\n    !EDITABLE_INPUT_ELEMENTS.hasOwnProperty(field.type) ||\n    !pageState ||\n    !pageState.entity\n  ) {\n    return null;\n  }\n\n  const FieldInput = EDITABLE_INPUT_ELEMENTS[field.type]!;\n\n  return (\n    <FieldInput\n      field={field}\n      value={controller.field.value}\n      onChange={controller.field.onChange}\n      dataHook={`form-field-${field.id}`}\n      inputRef={inputRef}\n    />\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,GAAG,QAAQ,OAAO;AAG3B,OAAO,MAAMC,uBAEZ,GAAG;EACFC,UAAU,EAAEV,SAAS;EACrBW,SAAS,EAAEJ,QAAQ;EACnBK,OAAO,EAAET,QAAQ;EACjBU,IAAI,EAAET,SAAS;EACfU,QAAQ,EAAET,QAAQ;EAClBU,MAAM,EAAET,MAAM;EACdU,GAAG,EAAER;AACP,CAAC;AAOD,OAAO,MAAMS,cAAc,GAAIC,KAA0B,IAAK;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGF,KAAK;EAEjC,MAAMG,SAAS,GAAGpB,oBAAoB,CAAC,CAAC;EAExC,MAAMqB,UAAU,GAAGpB,aAAa,CAAC;IAC/BqB,IAAI,EAAE,CAAAJ,KAAK,oBAALA,KAAK,CAAEK,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEJ,SAAS,CAACK,IAAI,CAACD,OAAO;IAC/BE,YAAY,EAAGN,SAAS,CAACO,MAAM,CAAS,CAAAT,KAAK,oBAALA,KAAK,CAAEK,EAAE,KAAI,EAAE;EACzD,CAAC,CAAC;EAEF,IACE,CAACf,uBAAuB,CAACoB,cAAc,CAACV,KAAK,CAACW,IAAI,CAAC,IACnD,CAACT,SAAS,IACV,CAACA,SAAS,CAACO,MAAM,EACjB;IACA,OAAO,IAAI;EACb;EAEA,MAAMG,UAAU,GAAGtB,uBAAuB,CAACU,KAAK,CAACW,IAAI,CAAE;EAEvD,oBACE/B,KAAA,CAAAiC,aAAA,CAACD,UAAU;IACTZ,KAAK,EAAEA,KAAM;IACbc,KAAK,EAAEX,UAAU,CAACH,KAAK,CAACc,KAAM;IAC9BC,QAAQ,EAAEZ,UAAU,CAACH,KAAK,CAACe,QAAS;IACpCC,QAAQ,EAAE,cAAchB,KAAK,CAACK,EAAE,EAAG;IACnCJ,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAEN,CAAC","ignoreList":[]}
+{"version":3,"names":["React","ShortText","useEntityPageContext","useController","Checkbox","DateInput","DateTime","Number","LongText","Url","ImageInput","EDITABLE_INPUT_ELEMENTS","SHORT_TEXT","LONG_TEXT","BOOLEAN","DATE","DATETIME","NUMBER","URL","IMAGE","FormFieldInput","props","_pageState$entity","field","inputRef","pageState","controller","name","id","control","form","defaultValue","entity","hasOwnProperty","type","FieldInput","createElement","value","onChange","dataHook"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/FormFieldInput.tsx"],"sourcesContent":["import React from 'react';\nimport { ShortText } from './ShortText';\nimport { useEntityPageContext } from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { Field, PatternsFieldType } from '../../../types';\nimport { Checkbox } from './Checkbox';\nimport { DateInput } from './DateInput';\nimport { DateTime } from './DateTime';\nimport { Number } from './Number';\nimport { LongText } from './LongText';\nimport { Url } from './Url';\nimport { BaseInputProps } from './types';\nimport { ImageInput } from './ImageInput';\n\nexport const EDITABLE_INPUT_ELEMENTS: Partial<\n  Record<PatternsFieldType, React.ComponentType<any>>\n> = {\n  SHORT_TEXT: ShortText,\n  LONG_TEXT: LongText,\n  BOOLEAN: Checkbox,\n  DATE: DateInput,\n  DATETIME: DateTime,\n  NUMBER: Number,\n  URL: Url,\n  IMAGE: ImageInput,\n};\n\nexport interface FormFieldInputProps {\n  field: Field;\n  inputRef?: BaseInputProps<any>['inputRef'];\n}\n\nexport const FormFieldInput = (props: FormFieldInputProps) => {\n  const { field, inputRef } = props;\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  });\n\n  if (!EDITABLE_INPUT_ELEMENTS.hasOwnProperty(field.type) || !pageState) {\n    return null;\n  }\n\n  const FieldInput = EDITABLE_INPUT_ELEMENTS[field.type]!;\n\n  return (\n    <FieldInput\n      field={field}\n      value={controller.field.value}\n      onChange={controller.field.onChange}\n      dataHook={`form-field-${field.id}`}\n      inputRef={inputRef}\n    />\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,aAAa,QAAQ,oBAAoB;AAElD,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,MAAM,QAAQ,UAAU;AACjC,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,GAAG,QAAQ,OAAO;AAE3B,SAASC,UAAU,QAAQ,cAAc;AAEzC,OAAO,MAAMC,uBAEZ,GAAG;EACFC,UAAU,EAAEX,SAAS;EACrBY,SAAS,EAAEL,QAAQ;EACnBM,OAAO,EAAEV,QAAQ;EACjBW,IAAI,EAAEV,SAAS;EACfW,QAAQ,EAAEV,QAAQ;EAClBW,MAAM,EAAEV,MAAM;EACdW,GAAG,EAAET,GAAG;EACRU,KAAK,EAAET;AACT,CAAC;AAOD,OAAO,MAAMU,cAAc,GAAIC,KAA0B,IAAK;EAAA,IAAAC,iBAAA;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAEjC,MAAMI,SAAS,GAAGvB,oBAAoB,CAAC,CAAC;EAExC,MAAMwB,UAAU,GAAGvB,aAAa,CAAC;IAC/BwB,IAAI,EAAE,CAAAJ,KAAK,oBAALA,KAAK,CAAEK,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEJ,SAAS,CAACK,IAAI,CAACD,OAAO;IAC/BE,YAAY,GAAAT,iBAAA,GAAGG,SAAS,CAACO,MAAM,qBAAjBV,iBAAA,CAA4B,CAAAC,KAAK,oBAALA,KAAK,CAAEK,EAAE,KAAI,EAAE;EAC3D,CAAC,CAAC;EAEF,IAAI,CAACjB,uBAAuB,CAACsB,cAAc,CAACV,KAAK,CAACW,IAAI,CAAC,IAAI,CAACT,SAAS,EAAE;IACrE,OAAO,IAAI;EACb;EAEA,MAAMU,UAAU,GAAGxB,uBAAuB,CAACY,KAAK,CAACW,IAAI,CAAE;EAEvD,oBACElC,KAAA,CAAAoC,aAAA,CAACD,UAAU;IACTZ,KAAK,EAAEA,KAAM;IACbc,KAAK,EAAEX,UAAU,CAACH,KAAK,CAACc,KAAM;IAC9BC,QAAQ,EAAEZ,UAAU,CAACH,KAAK,CAACe,QAAS;IACpCC,QAAQ,EAAE,cAAchB,KAAK,CAACK,EAAE,EAAG;IACnCJ,QAAQ,EAAEA;EAAS,CACpB,CAAC;AAEN,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsEntityPage/Fields/ImageInput.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FormField, ImageViewer } from '@wix/design-system';
+import { useEntityPageContext, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
+import { getImageUrl } from '../../../utils/media/getImageUrl';
+import { dashboard } from '@wix/dashboard';
+export const ImageInput = props => {
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
+  const {
+    field,
+    dataHook
+  } = props;
+  const {
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  const pageState = useEntityPageContext();
+  async function openMedia() {
+    try {
+      var _chosenMediaItems$ite;
+      const chosenMediaItems = await dashboard.openMediaManager({
+        multiSelect: false,
+        category: 'IMAGE'
+      });
+      const newImage = chosenMediaItems == null || (_chosenMediaItems$ite = chosenMediaItems.items[0]) == null || (_chosenMediaItems$ite = _chosenMediaItems$ite.media) == null || (_chosenMediaItems$ite = _chosenMediaItems$ite.image) == null ? void 0 : _chosenMediaItems$ite.image;
+      controller.field.onChange(newImage);
+    } catch (error) {
+      console.error('Error opening Media Manager or no files selected:', error);
+    }
+  }
+  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 t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
+  const imageUrl = controller.field.value && getImageUrl(controller.field.value);
+  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(ImageViewer, {
+    imageUrl: imageUrl,
+    dataHook: `image-${field.id}`,
+    onAddImage: () => openMedia(),
+    onUpdateImage: () => openMedia(),
+    updateImageInfo: t('cairo.replace-image.tooltip'),
+    removeImageInfo: t('cairo.table.advanced-sorting.remove.button.tooltip'),
+    fit: "cover",
+    onRemoveImage: () => controller.field.onChange(null)
+  }));
+};
+//# sourceMappingURL=ImageInput.js.map

package/dist/esm/components/AutoPatternsEntityPage/Fields/ImageInput.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FormField","ImageViewer","useEntityPageContext","useSelector","useWixPatternsContainer","useController","getImageUrl","dashboard","ImageInput","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","container","initTask","status","pageState","openMedia","_chosenMediaItems$ite","chosenMediaItems","openMediaManager","multiSelect","category","newImage","items","media","image","controller","onChange","error","console","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","imageUrl","createElement","label","displayName","fieldState","statusMessage","message","onAddImage","onUpdateImage","updateImageInfo","removeImageInfo","fit","onRemoveImage"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/ImageInput.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, ImageViewer } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport {\n  useEntityPageContext,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\nimport { getImageUrl } from '../../../utils/media/getImageUrl';\nimport { dashboard } from '@wix/dashboard';\n\nexport interface ImageInputProps extends BaseInputProps<string> {}\n\nexport const ImageInput = (props: ImageInputProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const pageState = useEntityPageContext();\n\n  async function openMedia() {\n    try {\n      const chosenMediaItems = await dashboard.openMediaManager({\n        multiSelect: false,\n        category: 'IMAGE',\n      });\n\n      const newImage = chosenMediaItems?.items[0]?.media?.image?.image;\n\n      controller.field.onChange(newImage);\n    } catch (error) {\n      console.error('Error opening Media Manager or no files selected:', error);\n    }\n  }\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 t('cairo.fieldValidation.requiredField');\n        }\n\n        return true;\n      },\n    },\n  });\n\n  const imageUrl =\n    controller.field.value && getImageUrl(controller.field.value);\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      <ImageViewer\n        imageUrl={imageUrl}\n        dataHook={`image-${field.id}`}\n        onAddImage={() => openMedia()}\n        onUpdateImage={() => openMedia()}\n        updateImageInfo={t('cairo.replace-image.tooltip')}\n        removeImageInfo={t(\n          'cairo.table.advanced-sorting.remove.button.tooltip',\n        )}\n        fit=\"cover\"\n        onRemoveImage={() => controller.field.onChange(null)}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/AutoPatternsEntityPage/Fields/LongText.js

@@ -1,27 +1,45 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { FormField, InputArea } from '@wix/design-system';
+import { useEntityPageContext, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
 export const LongText = props => {
-  var _field$validation;
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
   const {
     field,
-    value,
-    onChange,
-    dataHook,
-    inputRef
+    dataHook
   } = props;
-  const ref = useRef({});
+  const {
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  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 t('cairo.fieldValidation.requiredField');
+        }
+        return true;
+      }
+    }
+  });
   return /*#__PURE__*/React.createElement(FormField, {
     label: field.displayName,
-    required: (_field$validation = field.validation) == null ? void 0 : _field$validation.required,
+    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(InputArea, {
-    value: value,
-    onChange: e => onChange == null ? void 0 : onChange(e.target.value),
-    dataHook: `long-text-${field.id}`,
-    ref: internalRef => {
-      inputRef == null || inputRef(ref.current);
-      ref.current.focus = () => internalRef == null ? void 0 : internalRef.focus();
-    }
+    value: controller.field.value,
+    onChange: e => controller.field.onChange == null ? void 0 : controller.field.onChange(e.target.value),
+    onBlur: controller.field.onBlur,
+    ref: controller.field.ref,
+    dataHook: `long-text-${field.id}`
   }));
 };
 //# sourceMappingURL=LongText.js.map

package/dist/esm/components/AutoPatternsEntityPage/Fields/LongText.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","FormField","InputArea","LongText","props","_field$validation","field","value","onChange","dataHook","inputRef","ref","createElement","label","displayName","required","validation","e","target","id","internalRef","current","focus"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/LongText.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { FormField, InputArea } from '@wix/design-system';\nimport { BaseInputProps, BaseInputRef } from './types';\n\nexport interface LongTextProps extends BaseInputProps<string> {}\n\nexport const LongText = (props: LongTextProps) => {\n  const { field, value, onChange, dataHook, inputRef } = props;\n\n  const ref = useRef<BaseInputRef>({});\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <InputArea\n        value={value}\n        onChange={(e) => onChange?.(e.target.value)}\n        dataHook={`long-text-${field.id}`}\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          ref.current.focus = () => internalRef?.focus();\n        }}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,SAASC,SAAS,EAAEC,SAAS,QAAQ,oBAAoB;AAKzD,OAAO,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EAAA,IAAAC,iBAAA;EAChD,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAGN,KAAK;EAE5D,MAAMO,GAAG,GAAGX,MAAM,CAAe,CAAC,CAAC,CAAC;EAEpC,oBACED,KAAA,CAAAa,aAAA,CAACX,SAAS;IACRY,KAAK,EAAEP,KAAK,CAACQ,WAAY;IACzBC,QAAQ,GAAAV,iBAAA,GAAEC,KAAK,CAACU,UAAU,qBAAhBX,iBAAA,CAAkBU,QAAS;IACrCN,QAAQ,EAAEA;EAAS,gBAEnBV,KAAA,CAAAa,aAAA,CAACV,SAAS;IACRK,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAGS,CAAC,IAAKT,QAAQ,oBAARA,QAAQ,CAAGS,CAAC,CAACC,MAAM,CAACX,KAAK,CAAE;IAC5CE,QAAQ,EAAE,aAAaH,KAAK,CAACa,EAAE,EAAG;IAClCR,GAAG,EAAGS,WAAW,IAAK;MACpBV,QAAQ,YAARA,QAAQ,CAAGC,GAAG,CAACU,OAAO,CAAC;MACvBV,GAAG,CAACU,OAAO,CAACC,KAAK,GAAG,MAAMF,WAAW,oBAAXA,WAAW,CAAEE,KAAK,CAAC,CAAC;IAChD;EAAE,CACH,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FormField","InputArea","useEntityPageContext","useSelector","useWixPatternsContainer","useController","LongText","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","container","initTask","status","pageState","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","createElement","label","displayName","fieldState","error","statusMessage","message","onChange","e","target","onBlur","ref"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/LongText.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, InputArea } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport {\n  useEntityPageContext,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nexport interface LongTextProps extends BaseInputProps<string> {}\n\nexport const LongText = (props: LongTextProps) => {\n  const { field, dataHook } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\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 t('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    >\n      <InputArea\n        value={controller.field.value}\n        onChange={(e) => controller.field.onChange?.(e.target.value)}\n        onBlur={controller.field.onBlur}\n        ref={controller.field.ref}\n        dataHook={`long-text-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,SAAS,EAAEC,SAAS,QAAQ,oBAAoB;AAEzD,SACEC,oBAAoB,EACpBC,WAAW,EACXC,uBAAuB,QAClB,eAAe;AACtB,SAASC,aAAa,QAAQ,oBAAoB;AAIlD,OAAO,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EAAA,IAAAC,iBAAA,EAAAC,kBAAA,EAAAC,qBAAA;EAChD,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGL,KAAK;EAEjC,MAAM;IAAEM,SAAS,EAAEC,CAAC;IAAE,GAAGC;EAAU,CAAC,GAAGX,uBAAuB,CAAC,CAAC;EAChED,WAAW,CAAC,MAAMY,SAAS,CAACC,QAAQ,CAACC,MAAM,CAAC;EAE5C,MAAMC,SAAS,GAAGhB,oBAAoB,CAAC,CAAC;EAExC,MAAMiB,UAAU,GAAGd,aAAa,CAAC;IAC/Be,IAAI,EAAE,CAAAT,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEJ,SAAS,CAACK,IAAI,CAACD,OAAO;IAC/BE,YAAY,GAAAhB,iBAAA,GAAGU,SAAS,CAACO,MAAM,qBAAjBjB,iBAAA,CAA4B,CAAAG,KAAK,oBAALA,KAAK,CAAEU,EAAE,KAAI,EAAE,CAAC;IAC1DK,KAAK,EAAE;MACLC,QAAQ,EAAGC,KAAK,IAAK;QAAA,IAAAC,iBAAA;QACnB,IACE,CAAAA,iBAAA,GAAAlB,KAAK,CAACmB,UAAU,aAAhBD,iBAAA,CAAkBE,QAAQ,KACzBH,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAKI,SAAS,IAAIJ,KAAK,KAAK,EAAE,CAAC,EACvD;UACA,OAAOd,CAAC,CAAC,qCAAqC,CAAC;QACjD;QAEA,OAAO,IAAI;MACb;IACF;EACF,CAAC,CAAC;EAEF,oBACEf,KAAA,CAAAkC,aAAA,CAACjC,SAAS;IACRkC,KAAK,EAAEvB,KAAK,CAACwB,WAAY;IACzBJ,QAAQ,GAAAtB,kBAAA,GAAEE,KAAK,CAACmB,UAAU,qBAAhBrB,kBAAA,CAAkBsB,QAAS;IACrCd,MAAM,EAAEE,UAAU,CAACiB,UAAU,CAACC,KAAK,GAAG,OAAO,GAAGL,SAAU;IAC1DM,aAAa,GAAA5B,qBAAA,GAAES,UAAU,CAACiB,UAAU,CAACC,KAAK,qBAA3B3B,qBAAA,CAA6B6B,OAAQ;IACpD3B,QAAQ,EAAEA;EAAS,gBAEnBb,KAAA,CAAAkC,aAAA,CAAChC,SAAS;IACR2B,KAAK,EAAET,UAAU,CAACR,KAAK,CAACiB,KAAM;IAC9BY,QAAQ,EAAGC,CAAC,IAAKtB,UAAU,CAACR,KAAK,CAAC6B,QAAQ,oBAAzBrB,UAAU,CAACR,KAAK,CAAC6B,QAAQ,CAAGC,CAAC,CAACC,MAAM,CAACd,KAAK,CAAE;IAC7De,MAAM,EAAExB,UAAU,CAACR,KAAK,CAACgC,MAAO;IAChCC,GAAG,EAAEzB,UAAU,CAACR,KAAK,CAACiC,GAAI;IAC1BhC,QAAQ,EAAE,aAAaD,KAAK,CAACU,EAAE;EAAG,CACnC,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}

package/dist/esm/components/AutoPatternsEntityPage/Fields/Number.js

@@ -1,54 +1,60 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { FormField, NumberInput } from '@wix/design-system';
-import { useWixPatternsContainer, useSelector } from '@wix/patterns';
+import { useEntityPageContext, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
 export const Number = props => {
-  var _field$validation, _field$validation2;
+  var _field$validation, _pageState$entity, _field$validation3, _controller$fieldStat;
   const {
     field,
-    value,
-    onChange,
-    dataHook,
-    inputRef
+    dataHook
   } = props;
-  const ref = useRef({});
   const {
     translate: t,
     ...container
   } = useWixPatternsContainer();
   useSelector(() => container.initTask.status);
+  const pageState = useEntityPageContext();
   const numberRange = (_field$validation = field.validation) == null ? void 0 : _field$validation.numberRange;
-  const min = (numberRange == null ? void 0 : numberRange.min) ?? undefined;
-  const max = (numberRange == null ? void 0 : numberRange.max) ?? undefined;
-  let invalidMessage;
-  if (value !== null) {
-    if (min !== undefined && value < min) {
-      invalidMessage = t('cairo.fieldValidation.minNumber', {
-        minAmount: min
-      });
-      ref.current.invalid = true;
-    } else if (max !== undefined && value > max) {
-      invalidMessage = t('cairo.fieldValidation.maxNumber', {
-        maxAmount: max
-      });
-      ref.current.invalid = true;
-    } else {
-      ref.current.invalid = false;
+  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: pageState.form.control,
+    defaultValue: (_pageState$entity = pageState.entity) == null ? void 0 : _pageState$entity[(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$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
-    status: invalidMessage ? 'error' : undefined,
-    statusMessage: invalidMessage,
+    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: value || undefined,
-    onChange: e => onChange(e),
-    dataHook: `number-${field.id}`,
-    inputRef: internalRef => {
-      inputRef == null || inputRef(ref.current);
-      ref.current.focus = () => internalRef == null ? void 0 : internalRef.focus();
-    }
+    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/AutoPatternsEntityPage/Fields/Number.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","FormField","NumberInput","useWixPatternsContainer","useSelector","Number","props","_field$validation","_field$validation2","field","value","onChange","dataHook","inputRef","ref","translate","t","container","initTask","status","numberRange","validation","min","undefined","max","invalidMessage","minAmount","current","invalid","maxAmount","createElement","label","displayName","required","statusMessage","e","id","internalRef","focus"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/Number.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { FormField, NumberInput } from '@wix/design-system';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useWixPatternsContainer, useSelector } from '@wix/patterns';\n\nexport interface NumberProps extends BaseInputProps<number | null> {}\n\nexport const Number = (props: NumberProps) => {\n  const { field, value, onChange, dataHook, inputRef } = props;\n  const ref = useRef<BaseInputRef>({});\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const numberRange = field.validation?.numberRange;\n  const min = numberRange?.min ?? undefined;\n  const max = numberRange?.max ?? undefined;\n  let invalidMessage: string | undefined;\n\n  if (value !== null) {\n    if (min !== undefined && value < min) {\n      invalidMessage = t('cairo.fieldValidation.minNumber', {\n        minAmount: min,\n      });\n      ref.current.invalid = true;\n    } else if (max !== undefined && value > max) {\n      invalidMessage = t('cairo.fieldValidation.maxNumber', {\n        maxAmount: max,\n      });\n      ref.current.invalid = true;\n    } else {\n      ref.current.invalid = false;\n    }\n  }\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      status={invalidMessage ? 'error' : undefined}\n      statusMessage={invalidMessage}\n      dataHook={dataHook}\n    >\n      <NumberInput\n        value={value || undefined}\n        onChange={(e) => onChange(e)}\n        dataHook={`number-${field.id}`}\n        inputRef={(internalRef) => {\n          inputRef?.(ref.current);\n          ref.current.focus = () => internalRef?.focus();\n        }}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,SAASC,SAAS,EAAEC,WAAW,QAAQ,oBAAoB;AAE3D,SAASC,uBAAuB,EAAEC,WAAW,QAAQ,eAAe;AAIpE,OAAO,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EAAA,IAAAC,iBAAA,EAAAC,kBAAA;EAC5C,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAGP,KAAK;EAC5D,MAAMQ,GAAG,GAAGd,MAAM,CAAe,CAAC,CAAC,CAAC;EACpC,MAAM;IAAEe,SAAS,EAAEC,CAAC;IAAE,GAAGC;EAAU,CAAC,GAAGd,uBAAuB,CAAC,CAAC;EAChEC,WAAW,CAAC,MAAMa,SAAS,CAACC,QAAQ,CAACC,MAAM,CAAC;EAC5C,MAAMC,WAAW,IAAAb,iBAAA,GAAGE,KAAK,CAACY,UAAU,qBAAhBd,iBAAA,CAAkBa,WAAW;EACjD,MAAME,GAAG,GAAG,CAAAF,WAAW,oBAAXA,WAAW,CAAEE,GAAG,KAAIC,SAAS;EACzC,MAAMC,GAAG,GAAG,CAAAJ,WAAW,oBAAXA,WAAW,CAAEI,GAAG,KAAID,SAAS;EACzC,IAAIE,cAAkC;EAEtC,IAAIf,KAAK,KAAK,IAAI,EAAE;IAClB,IAAIY,GAAG,KAAKC,SAAS,IAAIb,KAAK,GAAGY,GAAG,EAAE;MACpCG,cAAc,GAAGT,CAAC,CAAC,iCAAiC,EAAE;QACpDU,SAAS,EAAEJ;MACb,CAAC,CAAC;MACFR,GAAG,CAACa,OAAO,CAACC,OAAO,GAAG,IAAI;IAC5B,CAAC,MAAM,IAAIJ,GAAG,KAAKD,SAAS,IAAIb,KAAK,GAAGc,GAAG,EAAE;MAC3CC,cAAc,GAAGT,CAAC,CAAC,iCAAiC,EAAE;QACpDa,SAAS,EAAEL;MACb,CAAC,CAAC;MACFV,GAAG,CAACa,OAAO,CAACC,OAAO,GAAG,IAAI;IAC5B,CAAC,MAAM;MACLd,GAAG,CAACa,OAAO,CAACC,OAAO,GAAG,KAAK;IAC7B;EACF;EAEA,oBACE7B,KAAA,CAAA+B,aAAA,CAAC7B,SAAS;IACR8B,KAAK,EAAEtB,KAAK,CAACuB,WAAY;IACzBC,QAAQ,GAAAzB,kBAAA,GAAEC,KAAK,CAACY,UAAU,qBAAhBb,kBAAA,CAAkByB,QAAS;IACrCd,MAAM,EAAEM,cAAc,GAAG,OAAO,GAAGF,SAAU;IAC7CW,aAAa,EAAET,cAAe;IAC9Bb,QAAQ,EAAEA;EAAS,gBAEnBb,KAAA,CAAA+B,aAAA,CAAC5B,WAAW;IACVQ,KAAK,EAAEA,KAAK,IAAIa,SAAU;IAC1BZ,QAAQ,EAAGwB,CAAC,IAAKxB,QAAQ,CAACwB,CAAC,CAAE;IAC7BvB,QAAQ,EAAE,UAAUH,KAAK,CAAC2B,EAAE,EAAG;IAC/BvB,QAAQ,EAAGwB,WAAW,IAAK;MACzBxB,QAAQ,YAARA,QAAQ,CAAGC,GAAG,CAACa,OAAO,CAAC;MACvBb,GAAG,CAACa,OAAO,CAACW,KAAK,GAAG,MAAMD,WAAW,oBAAXA,WAAW,CAAEC,KAAK,CAAC,CAAC;IAChD;EAAE,CACH,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FormField","NumberInput","useEntityPageContext","useSelector","useWixPatternsContainer","useController","Number","props","_field$validation","_pageState$entity","_field$validation3","_controller$fieldStat","field","dataHook","translate","t","container","initTask","status","pageState","numberRange","validation","min","max","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation2","required","undefined","minAmount","maxAmount","createElement","label","displayName","fieldState","error","statusMessage","message","onChange","e","onBlur","inputRef","ref"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/Number.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, NumberInput } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport {\n  useEntityPageContext,\n  useSelector,\n  useWixPatternsContainer,\n} 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 } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const pageState = useEntityPageContext();\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: 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 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/AutoPatternsEntityPage/Fields/ShortText.js

@@ -1,41 +1,59 @@
-import React, { useRef } from 'react';
+import React from 'react';
 import { FormField, Input } from '@wix/design-system';
-import { useValidateTextLength } from './utils/validateTextLength';
+import { useEntityPageContext, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
 export const ShortText = props => {
-  var _field$validation, _field$validation2;
+  var _field$validation, _pageState$entity, _controller$field$val, _field$validation3, _controller$fieldStat;
   const {
     field,
-    onChange,
-    value,
-    dataHook,
-    inputRef
+    dataHook
   } = props;
-  const ref = useRef({});
-  const stringLengthRange = (_field$validation = field.validation) == null ? void 0 : _field$validation.stringLengthRange;
   const {
-    charCount,
-    invalidMessage
-  } = useValidateTextLength({
-    value,
-    stringLengthRange,
-    onChange,
-    ref
+    translate: t,
+    ...container
+  } = useWixPatternsContainer();
+  useSelector(() => container.initTask.status);
+  const pageState = useEntityPageContext();
+  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: pageState.form.control,
+    defaultValue: (_pageState$entity = pageState.entity) == null ? void 0 : _pageState$entity[(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$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    required: (_field$validation3 = field.validation) == null ? void 0 : _field$validation3.required,
     charCount: charCount,
-    status: invalidMessage ? 'error' : undefined,
-    statusMessage: invalidMessage,
+    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: value,
-    onChange: e => onChange == null ? void 0 : onChange(e.target.value),
+    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: internalRef => {
-      inputRef == null || inputRef(ref.current);
-      ref.current.focus = () => internalRef == null ? void 0 : internalRef.focus();
-    }
+    ref: controller.field.ref
   }));
 };
 //# sourceMappingURL=ShortText.js.map

package/dist/esm/components/AutoPatternsEntityPage/Fields/ShortText.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","FormField","Input","useValidateTextLength","ShortText","props","_field$validation","_field$validation2","field","onChange","value","dataHook","inputRef","ref","stringLengthRange","validation","charCount","invalidMessage","createElement","label","displayName","required","status","undefined","statusMessage","e","target","id","internalRef","current","focus"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/ShortText.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { FormField, Input } from '@wix/design-system';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useValidateTextLength } from './utils/validateTextLength';\n\nexport interface ShortTextProps extends BaseInputProps<string> {}\n\nexport const ShortText = (props: ShortTextProps) => {\n  const { field, onChange, value, dataHook, inputRef } = props;\n\n  const ref = useRef<BaseInputRef>({});\n\n  const stringLengthRange = field.validation?.stringLengthRange;\n\n  const { charCount, invalidMessage } = useValidateTextLength({\n    value,\n    stringLengthRange,\n    onChange,\n    ref,\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      charCount={charCount}\n      status={invalidMessage ? 'error' : undefined}\n      statusMessage={invalidMessage}\n      dataHook={dataHook}\n    >\n      <Input\n        value={value}\n        onChange={(e) => onChange?.(e.target.value)}\n        dataHook={`short-text-${field.id}`}\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          ref.current.focus = () => internalRef?.focus();\n        }}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,MAAM,QAAQ,OAAO;AACrC,SAASC,SAAS,EAAEC,KAAK,QAAQ,oBAAoB;AAErD,SAASC,qBAAqB,QAAQ,4BAA4B;AAIlE,OAAO,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EAAA,IAAAC,iBAAA,EAAAC,kBAAA;EAClD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAGP,KAAK;EAE5D,MAAMQ,GAAG,GAAGb,MAAM,CAAe,CAAC,CAAC,CAAC;EAEpC,MAAMc,iBAAiB,IAAAR,iBAAA,GAAGE,KAAK,CAACO,UAAU,qBAAhBT,iBAAA,CAAkBQ,iBAAiB;EAE7D,MAAM;IAAEE,SAAS;IAAEC;EAAe,CAAC,GAAGd,qBAAqB,CAAC;IAC1DO,KAAK;IACLI,iBAAiB;IACjBL,QAAQ;IACRI;EACF,CAAC,CAAC;EAEF,oBACEd,KAAA,CAAAmB,aAAA,CAACjB,SAAS;IACRkB,KAAK,EAAEX,KAAK,CAACY,WAAY;IACzBC,QAAQ,GAAAd,kBAAA,GAAEC,KAAK,CAACO,UAAU,qBAAhBR,kBAAA,CAAkBc,QAAS;IACrCL,SAAS,EAAEA,SAAU;IACrBM,MAAM,EAAEL,cAAc,GAAG,OAAO,GAAGM,SAAU;IAC7CC,aAAa,EAAEP,cAAe;IAC9BN,QAAQ,EAAEA;EAAS,gBAEnBZ,KAAA,CAAAmB,aAAA,CAAChB,KAAK;IACJQ,KAAK,EAAEA,KAAM;IACbD,QAAQ,EAAGgB,CAAC,IAAKhB,QAAQ,oBAARA,QAAQ,CAAGgB,CAAC,CAACC,MAAM,CAAChB,KAAK,CAAE;IAC5CC,QAAQ,EAAE,cAAcH,KAAK,CAACmB,EAAE,EAAG;IACnCd,GAAG,EAAGe,WAAW,IAAK;MACpBhB,QAAQ,YAARA,QAAQ,CAAGC,GAAG,CAACgB,OAAO,CAAC;MACvBhB,GAAG,CAACgB,OAAO,CAACC,KAAK,GAAG,MAAMF,WAAW,oBAAXA,WAAW,CAAEE,KAAK,CAAC,CAAC;IAChD;EAAE,CACH,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FormField","Input","useEntityPageContext","useSelector","useWixPatternsContainer","useController","ShortText","props","_field$validation","_pageState$entity","_controller$field$val","_field$validation3","_controller$fieldStat","field","dataHook","translate","t","container","initTask","status","pageState","stringLengthRange","validation","minLength","maxLength","controller","name","id","control","form","defaultValue","entity","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/AutoPatternsEntityPage/Fields/ShortText.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, Input } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport {\n  useEntityPageContext,\n  useSelector,\n  useWixPatternsContainer,\n} 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 } = props;\n\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const pageState = useEntityPageContext();\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: 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 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/AutoPatternsEntityPage/Fields/Url.js

@@ -1,57 +1,55 @@
-import _extends from "@babel/runtime/helpers/extends";
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import { FormField, Input } from '@wix/design-system';
 import { Link } from '@wix/wix-ui-icons-common';
-import { useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useEntityPageContext, useSelector, useWixPatternsContainer } from '@wix/patterns';
+import { useController } from '@wix/patterns/form';
 export const Url = props => {
-  var _field$validation;
+  var _pageState$entity, _field$validation2, _controller$fieldStat;
   const {
     field,
-    value,
-    onChange,
-    dataHook,
-    inputRef
+    dataHook
   } = props;
-  const ref = useRef({});
-  const [fieldsStatus, setFieldStatus] = useState({});
   const {
     translate: t,
     ...container
   } = useWixPatternsContainer();
   useSelector(() => container.initTask.status);
+  const pageState = useEntityPageContext();
 
   // Same regex as data-extensions https://github.com/wix-private/server-infra/blob/a6c3009d39bbb0312c929f68ee81c559e1eb5b4e/iptf/dataextensions/src/main/scala/com/wixpress/infra/dataextensions/runtime/validator/Formats.scala#L31
   const uriPattern =
   // eslint-disable-next-line no-useless-escape
   /^[A-Za-z][A-Za-z0-9+.-]*:(\/\/([A-Za-z0-9._~\-%!$&'()*+,;=:]*@)?[A-Za-z0-9._~\-!$&'()*+,;=%:\[\]]*(:[0-9]*)?)?[A-Za-z0-9._~\-%!$&'()*+,;=:@\/]*([?][A-Za-z0-9._~\-%!$&'()*+,;=:@\/?]*)?([#][A-Za-z0-9._~\-%!$&'()*+,;=:@\/?]*)?$/;
-  return /*#__PURE__*/React.createElement(FormField, _extends({
+  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 t('cairo.fieldValidation.requiredField');
+        } else if (value) {
+          return uriPattern.test(value) || t('cairo.customFields.url-input.error');
+        }
+        return true;
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement(FormField, {
     label: field.displayName,
-    required: (_field$validation = field.validation) == null ? void 0 : _field$validation.required,
-    dataHook: dataHook
-  }, fieldsStatus), /*#__PURE__*/React.createElement(Input, {
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    dataHook: dataHook,
+    status: controller.fieldState.error ? 'error' : undefined,
+    statusMessage: (_controller$fieldStat = controller.fieldState.error) == null ? void 0 : _controller$fieldStat.message
+  }, /*#__PURE__*/React.createElement(Input, {
     prefix: /*#__PURE__*/React.createElement(Input.IconAffix, null, /*#__PURE__*/React.createElement(Link, null)),
     placeholder: t('cairo.customFields.url-input.placeholder'),
     dataHook: `url-${field.id}`,
-    value: value,
-    onChange: e => onChange == null ? void 0 : onChange(e.target.value),
-    onBlur: () => {
-      ref.current.invalid = value ? !uriPattern.test(value) : false;
-      if (ref.current.invalid) {
-        setFieldStatus({
-          status: 'error',
-          statusMessage: t('cairo.customFields.url-input.error')
-        });
-      } else {
-        setFieldStatus({
-          status: undefined,
-          statusMessage: undefined
-        });
-      }
-    },
-    ref: internalRef => {
-      inputRef == null || inputRef(ref.current);
-      ref.current.focus = () => internalRef == null ? void 0 : internalRef.focus();
-    }
+    value: controller.field.value,
+    onChange: e => controller.field.onChange == null ? void 0 : controller.field.onChange(e.target.value),
+    onBlur: controller.field.onBlur,
+    ref: controller.field.ref
   }));
 };
 //# sourceMappingURL=Url.js.map

package/dist/esm/components/AutoPatternsEntityPage/Fields/Url.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useRef","useState","FormField","Input","Link","useSelector","useWixPatternsContainer","Url","props","_field$validation","field","value","onChange","dataHook","inputRef","ref","fieldsStatus","setFieldStatus","translate","t","container","initTask","status","uriPattern","createElement","_extends","label","displayName","required","validation","prefix","IconAffix","placeholder","id","e","target","onBlur","current","invalid","test","statusMessage","undefined","internalRef","focus"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/Url.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { FormField, Input, StatusType } from '@wix/design-system';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { Link } from '@wix/wix-ui-icons-common';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\n\nexport interface UrlProps extends BaseInputProps<string> {}\n\nexport const Url = (props: UrlProps) => {\n  const { field, value, onChange, dataHook, inputRef } = props;\n  const ref = useRef<BaseInputRef>({});\n  const [fieldsStatus, setFieldStatus] = useState<{\n    status?: StatusType;\n    statusMessage?: string;\n  }>({});\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  // Same regex as data-extensions https://github.com/wix-private/server-infra/blob/a6c3009d39bbb0312c929f68ee81c559e1eb5b4e/iptf/dataextensions/src/main/scala/com/wixpress/infra/dataextensions/runtime/validator/Formats.scala#L31\n  const uriPattern =\n    // eslint-disable-next-line no-useless-escape\n    /^[A-Za-z][A-Za-z0-9+.-]*:(\\/\\/([A-Za-z0-9._~\\-%!$&'()*+,;=:]*@)?[A-Za-z0-9._~\\-!$&'()*+,;=%:\\[\\]]*(:[0-9]*)?)?[A-Za-z0-9._~\\-%!$&'()*+,;=:@\\/]*([?][A-Za-z0-9._~\\-%!$&'()*+,;=:@\\/?]*)?([#][A-Za-z0-9._~\\-%!$&'()*+,;=:@\\/?]*)?$/;\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n      {...fieldsStatus}\n    >\n      <Input\n        prefix={\n          <Input.IconAffix>\n            <Link />\n          </Input.IconAffix>\n        }\n        placeholder={t('cairo.customFields.url-input.placeholder')}\n        dataHook={`url-${field.id}`}\n        value={value}\n        onChange={(e) => onChange?.(e.target.value)}\n        onBlur={() => {\n          ref.current.invalid = value ? !uriPattern.test(value) : false;\n\n          if (ref.current.invalid) {\n            setFieldStatus({\n              status: 'error',\n              statusMessage: t('cairo.customFields.url-input.error'),\n            });\n          } else {\n            setFieldStatus({ status: undefined, statusMessage: undefined });\n          }\n        }}\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          ref.current.focus = () => internalRef?.focus();\n        }}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";AAAA,OAAOA,KAAK,IAAIC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC/C,SAASC,SAAS,EAAEC,KAAK,QAAoB,oBAAoB;AAEjE,SAASC,IAAI,QAAQ,0BAA0B;AAC/C,SAASC,WAAW,EAAEC,uBAAuB,QAAQ,eAAe;AAIpE,OAAO,MAAMC,GAAG,GAAIC,KAAe,IAAK;EAAA,IAAAC,iBAAA;EACtC,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC;EAAS,CAAC,GAAGN,KAAK;EAC5D,MAAMO,GAAG,GAAGf,MAAM,CAAe,CAAC,CAAC,CAAC;EACpC,MAAM,CAACgB,YAAY,EAAEC,cAAc,CAAC,GAAGhB,QAAQ,CAG5C,CAAC,CAAC,CAAC;EACN,MAAM;IAAEiB,SAAS,EAAEC,CAAC;IAAE,GAAGC;EAAU,CAAC,GAAGd,uBAAuB,CAAC,CAAC;EAChED,WAAW,CAAC,MAAMe,SAAS,CAACC,QAAQ,CAACC,MAAM,CAAC;;EAE5C;EACA,MAAMC,UAAU;EACd;EACA,kOAAkO;EAEpO,oBACExB,KAAA,CAAAyB,aAAA,CAACtB,SAAS,EAAAuB,QAAA;IACRC,KAAK,EAAEhB,KAAK,CAACiB,WAAY;IACzBC,QAAQ,GAAAnB,iBAAA,GAAEC,KAAK,CAACmB,UAAU,qBAAhBpB,iBAAA,CAAkBmB,QAAS;IACrCf,QAAQ,EAAEA;EAAS,GACfG,YAAY,gBAEhBjB,KAAA,CAAAyB,aAAA,CAACrB,KAAK;IACJ2B,MAAM,eACJ/B,KAAA,CAAAyB,aAAA,CAACrB,KAAK,CAAC4B,SAAS,qBACdhC,KAAA,CAAAyB,aAAA,CAACpB,IAAI,MAAE,CACQ,CAClB;IACD4B,WAAW,EAAEb,CAAC,CAAC,0CAA0C,CAAE;IAC3DN,QAAQ,EAAE,OAAOH,KAAK,CAACuB,EAAE,EAAG;IAC5BtB,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAGsB,CAAC,IAAKtB,QAAQ,oBAARA,QAAQ,CAAGsB,CAAC,CAACC,MAAM,CAACxB,KAAK,CAAE;IAC5CyB,MAAM,EAAEA,CAAA,KAAM;MACZrB,GAAG,CAACsB,OAAO,CAACC,OAAO,GAAG3B,KAAK,GAAG,CAACY,UAAU,CAACgB,IAAI,CAAC5B,KAAK,CAAC,GAAG,KAAK;MAE7D,IAAII,GAAG,CAACsB,OAAO,CAACC,OAAO,EAAE;QACvBrB,cAAc,CAAC;UACbK,MAAM,EAAE,OAAO;UACfkB,aAAa,EAAErB,CAAC,CAAC,oCAAoC;QACvD,CAAC,CAAC;MACJ,CAAC,MAAM;QACLF,cAAc,CAAC;UAAEK,MAAM,EAAEmB,SAAS;UAAED,aAAa,EAAEC;QAAU,CAAC,CAAC;MACjE;IACF,CAAE;IACF1B,GAAG,EAAG2B,WAAW,IAAK;MACpB5B,QAAQ,YAARA,QAAQ,CAAGC,GAAG,CAACsB,OAAO,CAAC;MACvBtB,GAAG,CAACsB,OAAO,CAACM,KAAK,GAAG,MAAMD,WAAW,oBAAXA,WAAW,CAAEC,KAAK,CAAC,CAAC;IAChD;EAAE,CACH,CACQ,CAAC;AAEhB,CAAC","ignoreList":[]}
+{"version":3,"names":["React","FormField","Input","Link","useEntityPageContext","useSelector","useWixPatternsContainer","useController","Url","props","_pageState$entity","_field$validation2","_controller$fieldStat","field","dataHook","translate","t","container","initTask","status","pageState","uriPattern","controller","name","id","control","form","defaultValue","entity","rules","validate","value","_field$validation","validation","required","undefined","test","createElement","label","displayName","fieldState","error","statusMessage","message","prefix","IconAffix","placeholder","onChange","e","target","onBlur","ref"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/Url.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, Input } from '@wix/design-system';\nimport { BaseInputProps } from './types';\nimport { Link } from '@wix/wix-ui-icons-common';\nimport {\n  useEntityPageContext,\n  useSelector,\n  useWixPatternsContainer,\n} from '@wix/patterns';\nimport { useController } from '@wix/patterns/form';\n\nexport interface UrlProps extends BaseInputProps<string> {}\n\nexport const Url = (props: UrlProps) => {\n  const { field, dataHook } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n  const pageState = useEntityPageContext();\n\n  // Same regex as data-extensions https://github.com/wix-private/server-infra/blob/a6c3009d39bbb0312c929f68ee81c559e1eb5b4e/iptf/dataextensions/src/main/scala/com/wixpress/infra/dataextensions/runtime/validator/Formats.scala#L31\n  const uriPattern =\n    // eslint-disable-next-line no-useless-escape\n    /^[A-Za-z][A-Za-z0-9+.-]*:(\\/\\/([A-Za-z0-9._~\\-%!$&'()*+,;=:]*@)?[A-Za-z0-9._~\\-!$&'()*+,;=%:\\[\\]]*(:[0-9]*)?)?[A-Za-z0-9._~\\-%!$&'()*+,;=:@\\/]*([?][A-Za-z0-9._~\\-%!$&'()*+,;=:@\\/?]*)?([#][A-Za-z0-9._~\\-%!$&'()*+,;=:@\\/?]*)?$/;\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: string | null | undefined) => {\n        if (\n          field.validation?.required &&\n          (value === null || value === undefined || value === '')\n        ) {\n          return t('cairo.fieldValidation.requiredField');\n        } else if (value) {\n          return (\n            uriPattern.test(value) || t('cairo.customFields.url-input.error')\n          );\n        }\n        return true;\n      },\n    },\n  });\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n      status={controller.fieldState.error ? 'error' : undefined}\n      statusMessage={controller.fieldState.error?.message}\n    >\n      <Input\n        prefix={\n          <Input.IconAffix>\n            <Link />\n          </Input.IconAffix>\n        }\n        placeholder={t('cairo.customFields.url-input.placeholder')}\n        dataHook={`url-${field.id}`}\n        value={controller.field.value}\n        onChange={(e) => controller.field.onChange?.(e.target.value)}\n        onBlur={controller.field.onBlur}\n        ref={controller.field.ref}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/esm/components/modals/actions/BulkDeleteModal.js

@@ -3,14 +3,16 @@ import React from 'react';
 export const BulkDeleteModal = _ref => {
   var _modalParams$title, _modalParams$actions, _modalParams$actions2, _modalParams$descript;
   let {
-    sharedData,
+    sdk,
     modalParams,
     actionParams
   } = _ref;
   const {
-    optimisticActions,
+    getOptimisticActions,
+    collectionId,
     closeModal
-  } = sharedData;
+  } = sdk;
+  const optimisticActions = getOptimisticActions(collectionId);
   return /*#__PURE__*/React.createElement(Modal, {
     isOpen: true,
     onRequestClose: closeModal
@@ -22,12 +24,12 @@ export const BulkDeleteModal = _ref => {
     },
     primaryButtonOnClick: () => {
       var _modalParams$feedback;
-      const schema = sharedData.getSchema(sharedData.collectionId);
+      const schema = sdk.getSchema(sdk.collectionId);
       if (!schema) {
         throw new Error('Schema not found');
       }
       const selectedIds = actionParams.selectedValues.map(value => value[schema.idField]);
-      optimisticActions.deleteMany(actionParams.selectedValues, {
+      optimisticActions == null || optimisticActions.deleteMany(actionParams.selectedValues, {
         successToast: ((_modalParams$feedback = modalParams.feedback) == null || (_modalParams$feedback = _modalParams$feedback.successToast) == null ? void 0 : _modalParams$feedback.text) || 'Items deleted successfully',
         errorToast: () => {
           var _modalParams$feedback2;