@wix/patterns-fields 1.35.0 → 1.37.0

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "pasteurlbutton1313810729";
+var _namespace_ = "pasteurlbutton1322793467";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"pasteurlbutton1313810729__root","iconButtonTooltip":"pasteurlbutton1313810729__iconButtonTooltip","iconButton":"pasteurlbutton1313810729__iconButton"};
+export var classes = {"root":"pasteurlbutton1322793467__root","iconButtonTooltip":"pasteurlbutton1322793467__iconButtonTooltip","iconButton":"pasteurlbutton1322793467__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield216174486";
+var _namespace_ = "formmediagalleryfield1657353146";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmediagalleryfield216174486__root","container":"formmediagalleryfield216174486__container","viewBox":"formmediagalleryfield216174486__viewBox","addItemWrapper":"formmediagalleryfield216174486__addItemWrapper","addItem":"formmediagalleryfield216174486__addItem","overlay":"formmediagalleryfield216174486__overlay","image":"formmediagalleryfield216174486__image","previewImage":"formmediagalleryfield216174486__previewImage","previewVideo":"formmediagalleryfield216174486__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1657353146__root","container":"formmediagalleryfield1657353146__container","viewBox":"formmediagalleryfield1657353146__viewBox","addItemWrapper":"formmediagalleryfield1657353146__addItemWrapper","addItem":"formmediagalleryfield1657353146__addItem","overlay":"formmediagalleryfield1657353146__overlay","image":"formmediagalleryfield1657353146__image","previewImage":"formmediagalleryfield1657353146__previewImage","previewVideo":"formmediagalleryfield1657353146__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "overlay1355255452";
+var _namespace_ = "overlay523965683";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"overlay1355255452__root","iconOverlay":"overlay1355255452__iconOverlay"};
+export var classes = {"root":"overlay523965683__root","iconOverlay":"overlay523965683__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader194269943";
+var _namespace_ = "medialoader4060432554";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"medialoader194269943__root","loader":"medialoader194269943__loader"};
+export var classes = {"root":"medialoader4060432554__root","loader":"medialoader4060432554__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

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

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument2601852807";
+var _namespace_ = "formmultidocument933927350";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"formmultidocument2601852807__root","viewRoot":"formmultidocument2601852807__viewRoot","singleViewWrapper":"formmultidocument2601852807__singleViewWrapper","addDocumentButton":"formmultidocument2601852807__addDocumentButton"};
+export var classes = {"root":"formmultidocument933927350__root","viewRoot":"formmultidocument933927350__viewRoot","singleViewWrapper":"formmultidocument933927350__singleViewWrapper","addDocumentButton":"formmultidocument933927350__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

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

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

@@ -0,0 +1,30 @@
+import type { Field } from '@wix/bex-core';
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  FormFieldUniDriver,
+  NumberInputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function FormNumberDriver(
+  base: UniDriver,
+  body: UniDriver,
+  _field: Field,
+) {
+  const formField = FormFieldUniDriver(base, body);
+  const input = NumberInputUniDriver(base, body);
+
+  return {
+    ...baseUniDriverFactory(base),
+    getLabel: async () => {
+      const labelEl = await formField.getLabel();
+      return labelEl?.textContent ?? '';
+    },
+    getValue: () => input.getValue(),
+    enterText: (value: string) => input.enterText(value),
+    hasError: () => formField.hasStatus('error'),
+    getErrorMessage: () => formField.getStatusMessage(),
+    isRequired: () => formField.isRequired(),
+  };
+}

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

@@ -0,0 +1,65 @@
+import React from 'react';
+import { FormField, NumberInput } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { useWixPatternsContainer } from '@wix/bex-core/react';
+import { useController } from '@wix/bex-core/form';
+
+import { BaseInputProps } from '../../types/base-input';
+import { isGreaterThan, isLessThan } from '../../validations/number';
+import { isEmpty } from '../../validations/value';
+
+export interface FormNumberProps extends BaseInputProps<number | null> {}
+
+const _FormNumber = (props: FormNumberProps) => {
+  const { field, dataHook, formControl, data } = props;
+
+  const { translate: t } = useWixPatternsContainer();
+
+  const numberRange = field.validation?.numberRange;
+  const min = numberRange?.min;
+  const max = numberRange?.max;
+
+  const controller = useController({
+    name: field.id,
+    control: formControl,
+    defaultValue: data?.[field.id],
+    rules: {
+      validate: (value) => {
+        if (field.validation?.required && isEmpty(value)) {
+          return t('cairo.fieldValidation.requiredField');
+        }
+
+        if (value !== null && value !== undefined) {
+          if (min !== undefined && isLessThan(value, min)) {
+            return t('cairo.fieldValidation.minNumber', { minAmount: min });
+          }
+          if (max !== undefined && isGreaterThan(value, max)) {
+            return t('cairo.fieldValidation.maxNumber', { maxAmount: max });
+          }
+        }
+
+        return true;
+      },
+    },
+  });
+
+  return (
+    <FormField
+      label={field.displayName}
+      required={field.validation?.required}
+      status={controller.fieldState.error ? 'error' : undefined}
+      statusMessage={controller.fieldState.error?.message}
+      dataHook={dataHook}
+    >
+      <NumberInput
+        value={controller.field.value ?? undefined}
+        onChange={(e) => controller.field.onChange(e)}
+        onBlur={controller.field.onBlur}
+        inputRef={controller.field.ref}
+        dataHook={`number-${field.id}`}
+      />
+    </FormField>
+  );
+};
+
+export const FormNumber = observer(_FormNumber);

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

@@ -1 +1,2 @@
 export * from './cell-number-input';
+export * from './form-number';

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

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

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

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

package/src/components/object/index.ts

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

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput905880240";
+var _namespace_ = "cellreferenceinput1842881103";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,7 +13,7 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"cellreferenceinput905880240__root","autocomplete":"cellreferenceinput905880240__autocomplete"};
+export var classes = {"root":"cellreferenceinput1842881103__root","autocomplete":"cellreferenceinput1842881103__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/form-rich-content.driver.ts

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