@wix/auto-patterns 1.7.0 → 1.8.0

package/dist/cjs/components/AutoPatternsEntityPage/Fields/DateInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_dates","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DateInput","props","field","value","onChange","date","setDate","useState","getDateWithoutTimezone","getISODateStringWithFixedTimezone","undefined","ref","useRef","statusMessage","setStatusMessage","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","DatePicker","dataHook","id","width","newValue","formattedDate","split","onValidate","validationType","current","invalid","status","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/DateInput.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { FormField, DatePicker } from '@wix/design-system';\nimport {\n  getDateWithoutTimezone,\n  getISODateStringWithFixedTimezone,\n} from './utils/dates';\nimport { BaseInputProps, BaseInputRef } from './types';\n\nexport interface DateProps extends BaseInputProps<string | null> {}\n\nexport const DateInput = (props: DateProps) => {\n  const { field, value, onChange } = props;\n\n  const [date, setDate] = useState<Date | undefined>(() =>\n    value\n      ? getDateWithoutTimezone(getISODateStringWithFixedTimezone(value))\n      : undefined,\n  );\n\n  const ref = useRef<BaseInputRef>({});\n  const [statusMessage, setStatusMessage] = useState('');\n\n  return (\n    <FormField label={field.displayName}>\n      <DatePicker\n        dataHook={`date-${field.id}`}\n        width=\"100%\"\n        value={date}\n        onChange={(newValue: Date) => {\n          const formattedDate = getISODateStringWithFixedTimezone(newValue);\n          setDate(newValue);\n          onChange(formattedDate.split('T')[0]);\n        }}\n        onValidate={({ validationType, value: newValue }) => {\n          if (validationType === 'valid') {\n            setStatusMessage('');\n            ref.current.invalid = false;\n          } else if (validationType === 'formatError' && newValue === '') {\n            setDate(undefined);\n            onChange(null);\n            setStatusMessage('');\n            ref.current.invalid = false;\n          } else {\n            setStatusMessage('Invalid date');\n            ref.current.invalid = true;\n          }\n        }}\n        status={ref.current.invalid ? 'error' : undefined}\n        statusMessage={statusMessage}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_dates","_patterns","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DateInput","props","_field$validation","field","value","onChange","dataHook","inputRef","translate","container","useWixPatternsContainer","useSelector","initTask","status","date","setDate","useState","getDateWithoutTimezone","getISODateStringWithFixedTimezone","undefined","ref","useRef","statusMessage","setStatusMessage","createElement","FormField","label","displayName","required","validation","__self","__source","fileName","lineNumber","columnNumber","DatePicker","internalRef","current","focus","_internalRef$state","state","id","width","newValue","formattedDate","split","onValidate","validationType","format","invalid","dateFormat","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/DateInput.tsx"],"sourcesContent":["import React, { useRef, useState } from 'react';\nimport { FormField, DatePicker } from '@wix/design-system';\nimport {\n  getDateWithoutTimezone,\n  getISODateStringWithFixedTimezone,\n} from './utils/dates';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useSelector, useWixPatternsContainer } from '@wix/patterns';\n\nexport interface DateProps extends BaseInputProps<string | null> {}\n\nexport const DateInput = (props: DateProps) => {\n  const { field, value, onChange, dataHook, inputRef } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const [date, setDate] = useState<Date | undefined>(() =>\n    value\n      ? getDateWithoutTimezone(getISODateStringWithFixedTimezone(value))\n      : undefined,\n  );\n\n  const ref = useRef<BaseInputRef>({});\n  const [statusMessage, setStatusMessage] = useState('');\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <DatePicker\n        ref={(internalRef) => {\n          inputRef?.(ref.current);\n          // TODO: PR to WSR needed to expose as public API\n          // @ts-expect-error\n          ref.current.focus = () => internalRef?.state?.inputRef?.focus?.();\n        }}\n        dataHook={`date-${field.id}`}\n        width=\"100%\"\n        value={date}\n        onChange={(newValue: Date) => {\n          const formattedDate = getISODateStringWithFixedTimezone(newValue);\n          setDate(newValue);\n          onChange(formattedDate.split('T')[0]);\n        }}\n        onValidate={({ validationType, value: newValue, format }) => {\n          if (validationType === 'valid') {\n            setStatusMessage('');\n            ref.current.invalid = false;\n          } else if (validationType === 'formatError' && newValue === '') {\n            setDate(undefined);\n            onChange(null);\n            setStatusMessage('');\n            ref.current.invalid = false;\n          } else {\n            setStatusMessage(\n              t('cairo.customFields.fieldType.date.invalid.value', {\n                dateFormat: format ?? '',\n              }),\n            );\n            ref.current.invalid = true;\n          }\n        }}\n        status={ref.current.invalid ? 'error' : undefined}\n        statusMessage={statusMessage}\n      />\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/AutoPatternsEntityPage/Fields/DateTime.js

@@ -4,15 +4,24 @@ exports.__esModule = true;
 exports.DateTime = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _designSystem = require("@wix/design-system");
+var _patterns = require("@wix/patterns");
 var _jsxFileName = "/home/builduser/work/73d19ce3378ce4dd/packages/auto-patterns/dist/cjs/components/AutoPatternsEntityPage/Fields/DateTime.tsx";
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const DateTime = props => {
+  var _field$validation;
   const {
     field,
     value,
-    onChange
+    onChange,
+    dataHook,
+    inputRef
   } = props;
+  const {
+    translate: t,
+    ...container
+  } = (0, _patterns.useWixPatternsContainer)();
+  (0, _patterns.useSelector)(() => container.initTask.status);
   const date = (0, _react.useMemo)(() => {
     if (!value) {
       return undefined;
@@ -26,19 +35,30 @@ const DateTime = props => {
   const timeRef = (0, _react.useRef)({});
   const [dateValue, setDateValue] = (0, _react.useState)(date == null ? void 0 : date.getDate());
   const [timeValue, setTimeValue] = (0, _react.useState)(date == null ? void 0 : date.getTime());
+  (0, _react.useEffect)(() => {
+    ref.current.focus = () => {
+      if (dateRef.current.invalid) {
+        return dateRef.current.focus == null ? void 0 : dateRef.current.focus();
+      }
+      return timeRef.current.focus == null ? void 0 : timeRef.current.focus();
+    };
+    inputRef == null || inputRef(ref.current);
+  }, [inputRef]);
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
+    required: (_field$validation = field.validation) == null ? void 0 : _field$validation.required,
+    dataHook: dataHook,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 35,
+      lineNumber: 50,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Layout, {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 36,
+      lineNumber: 55,
       columnNumber: 7
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
@@ -46,10 +66,19 @@ const DateTime = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 37,
+      lineNumber: 56,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.DatePicker, {
+    ref: internalRef => {
+      dateRef.current.focus = () => {
+        var _internalRef$state;
+        return (// TODO: PR to WSR needed to expose as public API
+          // @ts-expect-error
+          internalRef == null || (_internalRef$state = internalRef.state) == null || (_internalRef$state = _internalRef$state.inputRef) == null || _internalRef$state.focus == null ? void 0 : _internalRef$state.focus()
+        );
+      };
+    },
     width: "100%",
     value: date
     // onChange is triggered only when you have valid, non-empty value. and onValidate is triggered on every change to we use onValidate
@@ -57,7 +86,8 @@ const DateTime = props => {
     onChange: () => {},
     onValidate: ({
       validationType,
-      value: newValue
+      value: newValue,
+      format
     }) => {
       if (validationType === 'valid') {
         const dateWithNewDate = date ? new Date(date) : new Date(newValue);
@@ -77,7 +107,9 @@ const DateTime = props => {
           onChange(null);
         }
       } else {
-        setStatusMessage('Invalid date');
+        setStatusMessage(t('cairo.customFields.fieldType.date.invalid.value', {
+          dateFormat: format ?? ''
+        }));
         dateRef.current.invalid = true;
       }
       ref.current.invalid = dateRef.current.invalid || timeRef.current.invalid;
@@ -88,7 +120,7 @@ const DateTime = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 38,
+      lineNumber: 57,
       columnNumber: 11
     }
   })), /*#__PURE__*/_react.default.createElement(_designSystem.Cell, {
@@ -96,13 +128,16 @@ const DateTime = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 76,
+      lineNumber: 105,
       columnNumber: 9
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.TimeInput, {
+    ref: internalRef => {
+      timeRef.current.focus = () => internalRef == null ? void 0 : internalRef.focus();
+    },
     dataHook: `datetime-time-${field.id}`,
     value: date ?? null,
-    invalidMessage: "Invalid time",
+    invalidMessage: t('cairo.customFields.fieldType.dateAndTime.invalid.value'),
     onInvalid: () => {
       timeRef.current.invalid = true;
       ref.current.invalid = dateRef.current.invalid || timeRef.current.invalid;
@@ -131,7 +166,7 @@ const DateTime = props => {
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 77,
+      lineNumber: 106,
       columnNumber: 11
     }
   }))));

package/dist/cjs/components/AutoPatternsEntityPage/Fields/DateTime.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DateTime","props","field","value","onChange","date","useMemo","undefined","d","Date","isNaN","getTime","statusMessage","setStatusMessage","useState","ref","useRef","dateRef","timeRef","dateValue","setDateValue","getDate","timeValue","setTimeValue","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","Layout","Cell","span","DatePicker","width","onValidate","validationType","newValue","dateWithNewDate","_value","setFullYear","getFullYear","setMonth","getMonth","setDate","toISOString","current","invalid","status","dataHook","id","TimeInput","invalidMessage","onInvalid","dateWithNewTime","setHours","getHours","setMinutes","getMinutes","setSeconds","getSeconds","setMilliseconds","getMilliseconds","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/DateTime.tsx"],"sourcesContent":["import React, { useRef, useMemo, useState } from 'react';\nimport {\n  Cell,\n  DatePicker,\n  FormField,\n  Layout,\n  TimeInput,\n} from '@wix/design-system';\nimport { BaseInputProps, BaseInputRef } from './types';\n\nexport interface DateTimeProps extends BaseInputProps<string | null> {}\nexport const DateTime = (props: DateTimeProps) => {\n  const { field, value, onChange } = props;\n\n  const date = useMemo(() => {\n    if (!value) {\n      return undefined;\n    }\n    const d = new Date(value);\n    return isNaN(d.getTime()) ? undefined : d;\n  }, [value]);\n  const [statusMessage, setStatusMessage] = useState('');\n\n  const ref = useRef<BaseInputRef>({});\n  const dateRef = useRef<BaseInputRef>({});\n  const timeRef = useRef<BaseInputRef>({});\n  const [dateValue, setDateValue] = useState<number | string | undefined>(\n    date?.getDate(),\n  );\n  const [timeValue, setTimeValue] = useState<number | string | undefined>(\n    date?.getTime(),\n  );\n\n  return (\n    <FormField label={field.displayName}>\n      <Layout>\n        <Cell span={6}>\n          <DatePicker\n            width=\"100%\"\n            value={date}\n            // onChange is triggered only when you have valid, non-empty value. and onValidate is triggered on every change to we use onValidate\n            onChange={() => {}}\n            onValidate={({ validationType, value: newValue }) => {\n              if (validationType === 'valid') {\n                const dateWithNewDate = date\n                  ? new Date(date)\n                  : new Date(newValue);\n                const _value = new Date(newValue);\n                dateWithNewDate.setFullYear(_value.getFullYear());\n                dateWithNewDate.setMonth(_value.getMonth());\n                dateWithNewDate.setDate(_value.getDate());\n                onChange(dateWithNewDate.toISOString());\n                setDateValue(new Date(newValue).getDate());\n                setStatusMessage('');\n                dateRef.current.invalid = false;\n              } else if (validationType === 'formatError' && value === '') {\n                setStatusMessage('');\n                dateRef.current.invalid = false;\n                setDateValue(value);\n                if (!timeValue) {\n                  onChange(null);\n                }\n              } else {\n                setStatusMessage('Invalid date');\n                dateRef.current.invalid = true;\n              }\n\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            status={ref.current.invalid ? 'error' : undefined}\n            statusMessage={statusMessage}\n            dataHook={`datetime-date-${field.id}`}\n          />\n        </Cell>\n        <Cell span={6}>\n          <TimeInput\n            dataHook={`datetime-time-${field.id}`}\n            value={date ?? null}\n            invalidMessage=\"Invalid time\"\n            onInvalid={() => {\n              timeRef.current.invalid = true;\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            onChange={({ date: newValue }) => {\n              timeRef.current.invalid = false;\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n\n              if (newValue) {\n                const dateWithNewTime = date ? new Date(date) : newValue;\n                dateWithNewTime.setHours(newValue.getHours());\n                dateWithNewTime.setMinutes(newValue.getMinutes());\n                dateWithNewTime.setSeconds(newValue.getSeconds());\n                dateWithNewTime.setMilliseconds(newValue.getMilliseconds());\n                onChange(dateWithNewTime.toISOString());\n              } else if (!ref.current.invalid) {\n                if (!newValue) {\n                  setTimeValue('');\n                  if (!dateValue) {\n                    onChange(null);\n                  }\n                }\n              }\n            }}\n          />\n        </Cell>\n      </Layout>\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_patterns","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","DateTime","props","_field$validation","field","value","onChange","dataHook","inputRef","translate","container","useWixPatternsContainer","useSelector","initTask","status","date","useMemo","undefined","d","Date","isNaN","getTime","statusMessage","setStatusMessage","useState","ref","useRef","dateRef","timeRef","dateValue","setDateValue","getDate","timeValue","setTimeValue","useEffect","current","focus","invalid","createElement","FormField","label","displayName","required","validation","__self","__source","fileName","lineNumber","columnNumber","Layout","Cell","span","DatePicker","internalRef","_internalRef$state","state","width","onValidate","validationType","newValue","format","dateWithNewDate","_value","setFullYear","getFullYear","setMonth","getMonth","setDate","toISOString","dateFormat","id","TimeInput","invalidMessage","onInvalid","dateWithNewTime","setHours","getHours","setMinutes","getMinutes","setSeconds","getSeconds","setMilliseconds","getMilliseconds","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/DateTime.tsx"],"sourcesContent":["import React, { useRef, useMemo, useState, useEffect } from 'react';\nimport {\n  Cell,\n  DatePicker,\n  FormField,\n  Layout,\n  TimeInput,\n} from '@wix/design-system';\nimport { BaseInputProps, BaseInputRef } from './types';\nimport { useWixPatternsContainer, useSelector } from '@wix/patterns';\n\nexport interface DateTimeProps extends BaseInputProps<string | null> {}\nexport const DateTime = (props: DateTimeProps) => {\n  const { field, value, onChange, dataHook, inputRef } = props;\n  const { translate: t, ...container } = useWixPatternsContainer();\n  useSelector(() => container.initTask.status);\n\n  const date = useMemo(() => {\n    if (!value) {\n      return undefined;\n    }\n    const d = new Date(value);\n    return isNaN(d.getTime()) ? undefined : d;\n  }, [value]);\n  const [statusMessage, setStatusMessage] = useState('');\n\n  const ref = useRef<BaseInputRef>({});\n  const dateRef = useRef<BaseInputRef>({});\n  const timeRef = useRef<BaseInputRef>({});\n  const [dateValue, setDateValue] = useState<number | string | undefined>(\n    date?.getDate(),\n  );\n  const [timeValue, setTimeValue] = useState<number | string | undefined>(\n    date?.getTime(),\n  );\n\n  useEffect(() => {\n    ref.current.focus = () => {\n      if (dateRef.current.invalid) {\n        return dateRef.current.focus?.();\n      }\n\n      return timeRef.current.focus?.();\n    };\n\n    inputRef?.(ref.current);\n  }, [inputRef]);\n\n  return (\n    <FormField\n      label={field.displayName}\n      required={field.validation?.required}\n      dataHook={dataHook}\n    >\n      <Layout>\n        <Cell span={6}>\n          <DatePicker\n            ref={(internalRef) => {\n              dateRef.current.focus = () =>\n                // TODO: PR to WSR needed to expose as public API\n                // @ts-expect-error\n                internalRef?.state?.inputRef?.focus?.();\n            }}\n            width=\"100%\"\n            value={date}\n            // onChange is triggered only when you have valid, non-empty value. and onValidate is triggered on every change to we use onValidate\n            onChange={() => {}}\n            onValidate={({ validationType, value: newValue, format }) => {\n              if (validationType === 'valid') {\n                const dateWithNewDate = date\n                  ? new Date(date)\n                  : new Date(newValue);\n                const _value = new Date(newValue);\n                dateWithNewDate.setFullYear(_value.getFullYear());\n                dateWithNewDate.setMonth(_value.getMonth());\n                dateWithNewDate.setDate(_value.getDate());\n                onChange(dateWithNewDate.toISOString());\n                setDateValue(new Date(newValue).getDate());\n                setStatusMessage('');\n                dateRef.current.invalid = false;\n              } else if (validationType === 'formatError' && value === '') {\n                setStatusMessage('');\n                dateRef.current.invalid = false;\n                setDateValue(value);\n                if (!timeValue) {\n                  onChange(null);\n                }\n              } else {\n                setStatusMessage(\n                  t('cairo.customFields.fieldType.date.invalid.value', {\n                    dateFormat: format ?? '',\n                  }),\n                );\n                dateRef.current.invalid = true;\n              }\n\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            status={ref.current.invalid ? 'error' : undefined}\n            statusMessage={statusMessage}\n            dataHook={`datetime-date-${field.id}`}\n          />\n        </Cell>\n        <Cell span={6}>\n          <TimeInput\n            ref={(internalRef) => {\n              timeRef.current.focus = () => internalRef?.focus();\n            }}\n            dataHook={`datetime-time-${field.id}`}\n            value={date ?? null}\n            invalidMessage={t(\n              'cairo.customFields.fieldType.dateAndTime.invalid.value',\n            )}\n            onInvalid={() => {\n              timeRef.current.invalid = true;\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n            }}\n            onChange={({ date: newValue }) => {\n              timeRef.current.invalid = false;\n              ref.current.invalid =\n                dateRef.current.invalid || timeRef.current.invalid;\n\n              if (newValue) {\n                const dateWithNewTime = date ? new Date(date) : newValue;\n                dateWithNewTime.setHours(newValue.getHours());\n                dateWithNewTime.setMinutes(newValue.getMinutes());\n                dateWithNewTime.setSeconds(newValue.getSeconds());\n                dateWithNewTime.setMilliseconds(newValue.getMilliseconds());\n                onChange(dateWithNewTime.toISOString());\n              } else if (!ref.current.invalid) {\n                if (!newValue) {\n                  setTimeValue('');\n                  if (!dateValue) {\n                    onChange(null);\n                  }\n                }\n              }\n            }}\n          />\n        </Cell>\n      </Layout>\n    </FormField>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/AutoPatternsEntityPage/Fields/FormFieldInput.js

@@ -24,17 +24,17 @@ const EDITABLE_INPUT_ELEMENTS = exports.EDITABLE_INPUT_ELEMENTS = {
   URL: _Url.Url
 };
 const FormFieldInput = props => {
-  var _pageState$entity;
   const {
-    field
+    field,
+    inputRef
   } = props;
   const pageState = (0, _patterns.useEntityPageContext)();
   const controller = (0, _form.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) ?? '']
+    defaultValue: pageState.entity[(field == null ? void 0 : field.id) ?? '']
   });
-  if (!field || !EDITABLE_INPUT_ELEMENTS.hasOwnProperty(field.type) || !pageState || !pageState.entity) {
+  if (!EDITABLE_INPUT_ELEMENTS.hasOwnProperty(field.type) || !pageState || !pageState.entity) {
     return null;
   }
   const FieldInput = EDITABLE_INPUT_ELEMENTS[field.type];
@@ -42,10 +42,12 @@ const FormFieldInput = props => {
     field: field,
     value: controller.field.value,
     onChange: controller.field.onChange,
+    dataHook: `form-field-${field.id}`,
+    inputRef: inputRef,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 50,
+      lineNumber: 53,
       columnNumber: 5
     }
   });

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_ShortText","_patterns","_form","_Checkbox","_DateInput","_DateTime","_Number","_LongText","_Url","_jsxFileName","EDITABLE_INPUT_ELEMENTS","exports","SHORT_TEXT","ShortText","LONG_TEXT","LongText","BOOLEAN","Checkbox","DATE","DateInput","DATETIME","DateTime","NUMBER","Number","URL","Url","FormFieldInput","props","_pageState$entity","field","pageState","useEntityPageContext","controller","useController","name","id","control","form","defaultValue","entity","hasOwnProperty","type","FieldInput","default","createElement","value","onChange","__self","__source","fileName","lineNumber","columnNumber"],"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';\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}\n\nexport const FormFieldInput = (props: FormFieldInputProps) => {\n  const { field } = props;\n\n  const pageState = useEntityPageContext();\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    !field ||\n    !EDITABLE_INPUT_ELEMENTS.hasOwnProperty(field.type) ||\n    !pageState ||\n    !pageState.entity\n  ) {\n    return null;\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    />\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,IAAA,GAAAT,OAAA;AAA4B,IAAAU,YAAA;AAErB,MAAMC,uBAEZ,GAAAC,OAAA,CAAAD,uBAAA,GAAG;EACFE,UAAU,EAAEC,oBAAS;EACrBC,SAAS,EAAEC,kBAAQ;EACnBC,OAAO,EAAEC,kBAAQ;EACjBC,IAAI,EAAEC,oBAAS;EACfC,QAAQ,EAAEC,kBAAQ;EAClBC,MAAM,EAAEC,cAAM;EACdC,GAAG,EAAEC;AACP,CAAC;AAMM,MAAMC,cAAc,GAAIC,KAA0B,IAAK;EAAA,IAAAC,iBAAA;EAC5D,MAAM;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAEvB,MAAMG,SAAS,GAAG,IAAAC,8BAAoB,EAAC,CAAC;EACxC,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAE,CAAAL,KAAK,oBAALA,KAAK,CAAEM,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEN,SAAS,CAACO,IAAI,CAACD,OAAO;IAC/BE,YAAY,GAAAV,iBAAA,GAAGE,SAAS,CAACS,MAAM,qBAAjBX,iBAAA,CAA4B,CAAAC,KAAK,oBAALA,KAAK,CAAEM,EAAE,KAAI,EAAE;EAC3D,CAAC,CAAC;EAEF,IACE,CAACN,KAAK,IACN,CAACnB,uBAAuB,CAAC8B,cAAc,CAACX,KAAK,CAACY,IAAI,CAAC,IACnD,CAACX,SAAS,IACV,CAACA,SAAS,CAACS,MAAM,EACjB;IACA,OAAO,IAAI;EACb;EACA,MAAMG,UAAU,GAAGhC,uBAAuB,CAACmB,KAAK,CAACY,IAAI,CAAE;EAEvD,oBACE5C,MAAA,CAAA8C,OAAA,CAAAC,aAAA,CAACF,UAAU;IACTb,KAAK,EAAEA,KAAM;IACbgB,KAAK,EAAEb,UAAU,CAACH,KAAK,CAACgB,KAAM;IAC9BC,QAAQ,EAAEd,UAAU,CAACH,KAAK,CAACiB,QAAS;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAxC,YAAA;MAAAyC,UAAA;MAAAC,YAAA;IAAA;EAAA,CACrC,CAAC;AAEN,CAAC;AAACxC,OAAA,CAAAe,cAAA,GAAAA,cAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_ShortText","_patterns","_form","_Checkbox","_DateInput","_DateTime","_Number","_LongText","_Url","_jsxFileName","EDITABLE_INPUT_ELEMENTS","exports","SHORT_TEXT","ShortText","LONG_TEXT","LongText","BOOLEAN","Checkbox","DATE","DateInput","DATETIME","DateTime","NUMBER","Number","URL","Url","FormFieldInput","props","field","inputRef","pageState","useEntityPageContext","controller","useController","name","id","control","form","defaultValue","entity","hasOwnProperty","type","FieldInput","default","createElement","value","onChange","dataHook","__self","__source","fileName","lineNumber","columnNumber"],"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,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,SAAA,GAAAJ,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAN,OAAA;AACA,IAAAO,OAAA,GAAAP,OAAA;AACA,IAAAQ,SAAA,GAAAR,OAAA;AACA,IAAAS,IAAA,GAAAT,OAAA;AAA4B,IAAAU,YAAA;AAGrB,MAAMC,uBAEZ,GAAAC,OAAA,CAAAD,uBAAA,GAAG;EACFE,UAAU,EAAEC,oBAAS;EACrBC,SAAS,EAAEC,kBAAQ;EACnBC,OAAO,EAAEC,kBAAQ;EACjBC,IAAI,EAAEC,oBAAS;EACfC,QAAQ,EAAEC,kBAAQ;EAClBC,MAAM,EAAEC,cAAM;EACdC,GAAG,EAAEC;AACP,CAAC;AAOM,MAAMC,cAAc,GAAIC,KAA0B,IAAK;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGF,KAAK;EAEjC,MAAMG,SAAS,GAAG,IAAAC,8BAAoB,EAAC,CAAC;EAExC,MAAMC,UAAU,GAAG,IAAAC,mBAAa,EAAC;IAC/BC,IAAI,EAAE,CAAAN,KAAK,oBAALA,KAAK,CAAEO,EAAE,KAAI,EAAE;IACrBC,OAAO,EAAEN,SAAS,CAACO,IAAI,CAACD,OAAO;IAC/BE,YAAY,EAAGR,SAAS,CAACS,MAAM,CAAS,CAAAX,KAAK,oBAALA,KAAK,CAAEO,EAAE,KAAI,EAAE;EACzD,CAAC,CAAC;EAEF,IACE,CAACzB,uBAAuB,CAAC8B,cAAc,CAACZ,KAAK,CAACa,IAAI,CAAC,IACnD,CAACX,SAAS,IACV,CAACA,SAAS,CAACS,MAAM,EACjB;IACA,OAAO,IAAI;EACb;EAEA,MAAMG,UAAU,GAAGhC,uBAAuB,CAACkB,KAAK,CAACa,IAAI,CAAE;EAEvD,oBACE5C,MAAA,CAAA8C,OAAA,CAAAC,aAAA,CAACF,UAAU;IACTd,KAAK,EAAEA,KAAM;IACbiB,KAAK,EAAEb,UAAU,CAACJ,KAAK,CAACiB,KAAM;IAC9BC,QAAQ,EAAEd,UAAU,CAACJ,KAAK,CAACkB,QAAS;IACpCC,QAAQ,EAAE,cAAcnB,KAAK,CAACO,EAAE,EAAG;IACnCN,QAAQ,EAAEA,QAAS;IAAAmB,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAzC,YAAA;MAAA0C,UAAA;MAAAC,YAAA;IAAA;EAAA,CACpB,CAAC;AAEN,CAAC;AAACzC,OAAA,CAAAe,cAAA,GAAAA,cAAA","ignoreList":[]}

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

@@ -1,33 +1,44 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.LongText = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _designSystem = require("@wix/design-system");
 var _jsxFileName = "/home/builduser/work/73d19ce3378ce4dd/packages/auto-patterns/dist/cjs/components/AutoPatternsEntityPage/Fields/LongText.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const LongText = props => {
+  var _field$validation;
   const {
     field,
     value,
-    onChange
+    onChange,
+    dataHook,
+    inputRef
   } = props;
+  const ref = (0, _react.useRef)({});
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
+    required: (_field$validation = field.validation) == null ? void 0 : _field$validation.required,
+    dataHook: dataHook,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 11,
+      lineNumber: 13,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.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();
+    },
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 12,
+      lineNumber: 18,
       columnNumber: 7
     }
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_jsxFileName","LongText","props","field","value","onChange","default","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","InputArea","e","target","dataHook","id","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/LongText.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, InputArea } from '@wix/design-system';\nimport { BaseInputProps } from './types';\n\nexport interface LongTextProps extends BaseInputProps<string> {}\n\nexport const LongText = (props: LongTextProps) => {\n  const { field, value, onChange } = props;\n\n  return (\n    <FormField label={field.displayName}>\n      <InputArea\n        value={value}\n        onChange={(e) => onChange?.(e.target.value)}\n        dataHook={`long-text-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAA0D,IAAAE,YAAA;AAKnD,MAAMC,QAAQ,GAAIC,KAAoB,IAAK;EAChD,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAExC,oBACEN,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAS,SAAS;IAACC,KAAK,EAAEN,KAAK,CAACO,WAAY;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAb,YAAA;MAAAc,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClCnB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAiB,SAAS;IACRZ,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAGY,CAAC,IAAKZ,QAAQ,oBAARA,QAAQ,CAAGY,CAAC,CAACC,MAAM,CAACd,KAAK,CAAE;IAC5Ce,QAAQ,EAAE,aAAahB,KAAK,CAACiB,EAAE,EAAG;IAAAT,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAb,YAAA;MAAAc,UAAA;MAAAC,YAAA;IAAA;EAAA,CACnC,CACQ,CAAC;AAEhB,CAAC;AAACM,OAAA,CAAApB,QAAA,GAAAA,QAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","LongText","props","_field$validation","field","value","onChange","dataHook","inputRef","ref","useRef","createElement","FormField","label","displayName","required","validation","__self","__source","fileName","lineNumber","columnNumber","InputArea","target","id","internalRef","current","focus","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAA0D,IAAAE,YAAA;AAAA,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAL,wBAAAK,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAKnD,MAAMW,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,GAAG,IAAAC,aAAM,EAAe,CAAC,CAAC,CAAC;EAEpC,oBACElC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,aAAA,CAAAiC,SAAS;IACRC,KAAK,EAAET,KAAK,CAACU,WAAY;IACzBC,QAAQ,GAAAZ,iBAAA,GAAEC,KAAK,CAACY,UAAU,qBAAhBb,iBAAA,CAAkBY,QAAS;IACrCR,QAAQ,EAAEA,QAAS;IAAAU,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvC,YAAA;MAAAwC,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAEnB7C,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,aAAA,CAAA2C,SAAS;IACRjB,KAAK,EAAEA,KAAM;IACbC,QAAQ,EAAGxB,CAAC,IAAKwB,QAAQ,oBAARA,QAAQ,CAAGxB,CAAC,CAACyC,MAAM,CAAClB,KAAK,CAAE;IAC5CE,QAAQ,EAAE,aAAaH,KAAK,CAACoB,EAAE,EAAG;IAClCf,GAAG,EAAGgB,WAAW,IAAK;MACpBjB,QAAQ,YAARA,QAAQ,CAAGC,GAAG,CAACiB,OAAO,CAAC;MACvBjB,GAAG,CAACiB,OAAO,CAACC,KAAK,GAAG,MAAMF,WAAW,oBAAXA,WAAW,CAAEE,KAAK,CAAC,CAAC;IAChD,CAAE;IAAAV,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAvC,YAAA;MAAAwC,UAAA;MAAAC,YAAA;IAAA;EAAA,CACH,CACQ,CAAC;AAEhB,CAAC;AAACO,OAAA,CAAA3B,QAAA,GAAAA,QAAA","ignoreList":[]}

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

@@ -1,33 +1,71 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.Number = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _designSystem = require("@wix/design-system");
+var _patterns = require("@wix/patterns");
 var _jsxFileName = "/home/builduser/work/73d19ce3378ce4dd/packages/auto-patterns/dist/cjs/components/AutoPatternsEntityPage/Fields/Number.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const Number = props => {
+  var _field$validation, _field$validation2;
   const {
     field,
     value,
-    onChange
+    onChange,
+    dataHook,
+    inputRef
   } = props;
+  const ref = (0, _react.useRef)({});
+  const {
+    translate: t,
+    ...container
+  } = (0, _patterns.useWixPatternsContainer)();
+  (0, _patterns.useSelector)(() => container.initTask.status);
+  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;
+    }
+  }
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    status: invalidMessage ? 'error' : undefined,
+    statusMessage: invalidMessage,
+    dataHook: dataHook,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 11,
+      lineNumber: 35,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.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();
+    },
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 12,
+      lineNumber: 42,
       columnNumber: 7
     }
   }));

package/dist/cjs/components/AutoPatternsEntityPage/Fields/Number.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_jsxFileName","Number","props","field","value","onChange","default","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","NumberInput","undefined","e","dataHook","id","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/Number.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, NumberInput } from '@wix/design-system';\nimport { BaseInputProps } from './types';\n\nexport interface NumberProps extends BaseInputProps<number | null> {}\n\nexport const Number = (props: NumberProps) => {\n  const { field, value, onChange } = props;\n\n  return (\n    <FormField label={field.displayName}>\n      <NumberInput\n        value={value || undefined}\n        onChange={(e) => onChange(e)}\n        dataHook={`number-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAA4D,IAAAE,YAAA;AAKrD,MAAMC,MAAM,GAAIC,KAAkB,IAAK;EAC5C,MAAM;IAAEC,KAAK;IAAEC,KAAK;IAAEC;EAAS,CAAC,GAAGH,KAAK;EAExC,oBACEN,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAS,SAAS;IAACC,KAAK,EAAEN,KAAK,CAACO,WAAY;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAb,YAAA;MAAAc,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClCnB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAiB,WAAW;IACVZ,KAAK,EAAEA,KAAK,IAAIa,SAAU;IAC1BZ,QAAQ,EAAGa,CAAC,IAAKb,QAAQ,CAACa,CAAC,CAAE;IAC7BC,QAAQ,EAAE,UAAUhB,KAAK,CAACiB,EAAE,EAAG;IAAAT,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAb,YAAA;MAAAc,UAAA;MAAAC,YAAA;IAAA;EAAA,CAChC,CACQ,CAAC;AAEhB,CAAC;AAACM,OAAA,CAAApB,MAAA,GAAAA,MAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_patterns","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Number","props","_field$validation","_field$validation2","field","value","onChange","dataHook","inputRef","ref","useRef","translate","container","useWixPatternsContainer","useSelector","initTask","status","numberRange","validation","min","undefined","max","invalidMessage","minAmount","current","invalid","maxAmount","createElement","FormField","label","displayName","required","statusMessage","__self","__source","fileName","lineNumber","columnNumber","NumberInput","id","internalRef","focus","exports"],"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":"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","ignoreList":[]}

package/dist/cjs/components/AutoPatternsEntityPage/Fields/ShortText.js

@@ -1,33 +1,58 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 exports.__esModule = true;
 exports.ShortText = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _designSystem = require("@wix/design-system");
+var _validateTextLength = require("./utils/validateTextLength");
 var _jsxFileName = "/home/builduser/work/73d19ce3378ce4dd/packages/auto-patterns/dist/cjs/components/AutoPatternsEntityPage/Fields/ShortText.tsx";
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const ShortText = props => {
+  var _field$validation, _field$validation2;
   const {
     field,
     onChange,
-    value
+    value,
+    dataHook,
+    inputRef
   } = props;
+  const ref = (0, _react.useRef)({});
+  const stringLengthRange = (_field$validation = field.validation) == null ? void 0 : _field$validation.stringLengthRange;
+  const {
+    charCount,
+    invalidMessage
+  } = (0, _validateTextLength.useValidateTextLength)({
+    value,
+    stringLengthRange,
+    onChange,
+    ref
+  });
   return /*#__PURE__*/_react.default.createElement(_designSystem.FormField, {
     label: field.displayName,
+    required: (_field$validation2 = field.validation) == null ? void 0 : _field$validation2.required,
+    charCount: charCount,
+    status: invalidMessage ? 'error' : undefined,
+    statusMessage: invalidMessage,
+    dataHook: dataHook,
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 10,
+      lineNumber: 23,
       columnNumber: 5
     }
   }, /*#__PURE__*/_react.default.createElement(_designSystem.Input, {
     value: value,
     onChange: e => onChange == null ? void 0 : onChange(e.target.value),
     dataHook: `short-text-${field.id}`,
+    ref: internalRef => {
+      inputRef == null || inputRef(ref.current);
+      ref.current.focus = () => internalRef == null ? void 0 : internalRef.focus();
+    },
     __self: void 0,
     __source: {
       fileName: _jsxFileName,
-      lineNumber: 11,
+      lineNumber: 31,
       columnNumber: 7
     }
   }));

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_designSystem","_jsxFileName","ShortText","props","field","onChange","value","default","createElement","FormField","label","displayName","__self","__source","fileName","lineNumber","columnNumber","Input","e","target","dataHook","id","exports"],"sources":["../../../../../src/components/AutoPatternsEntityPage/Fields/ShortText.tsx"],"sourcesContent":["import React from 'react';\nimport { FormField, Input } from '@wix/design-system';\nimport { BaseInputProps } from './types';\n\nexport interface ShortTextProps extends BaseInputProps<string> {}\n\nexport const ShortText = (props: ShortTextProps) => {\n  const { field, onChange, value } = props;\n  return (\n    <FormField label={field.displayName}>\n      <Input\n        value={value}\n        onChange={(e) => onChange?.(e.target.value)}\n        dataHook={`short-text-${field.id}`}\n      />\n    </FormField>\n  );\n};\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAAsD,IAAAE,YAAA;AAK/C,MAAMC,SAAS,GAAIC,KAAqB,IAAK;EAClD,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;EAAM,CAAC,GAAGH,KAAK;EACxC,oBACEN,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAS,SAAS;IAACC,KAAK,EAAEN,KAAK,CAACO,WAAY;IAAAC,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAb,YAAA;MAAAc,UAAA;MAAAC,YAAA;IAAA;EAAA,gBAClCnB,MAAA,CAAAU,OAAA,CAAAC,aAAA,CAACR,aAAA,CAAAiB,KAAK;IACJX,KAAK,EAAEA,KAAM;IACbD,QAAQ,EAAGa,CAAC,IAAKb,QAAQ,oBAARA,QAAQ,CAAGa,CAAC,CAACC,MAAM,CAACb,KAAK,CAAE;IAC5Cc,QAAQ,EAAE,cAAchB,KAAK,CAACiB,EAAE,EAAG;IAAAT,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAAb,YAAA;MAAAc,UAAA;MAAAC,YAAA;IAAA;EAAA,CACpC,CACQ,CAAC;AAEhB,CAAC;AAACM,OAAA,CAAApB,SAAA,GAAAA,SAAA","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_validateTextLength","_jsxFileName","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ShortText","props","_field$validation","_field$validation2","field","onChange","value","dataHook","inputRef","ref","useRef","stringLengthRange","validation","charCount","invalidMessage","useValidateTextLength","createElement","FormField","label","displayName","required","status","undefined","statusMessage","__self","__source","fileName","lineNumber","columnNumber","Input","target","id","internalRef","current","focus","exports"],"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":"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","ignoreList":[]}