@wix/patterns-fields 1.64.0 → 1.65.0

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_ = "formmultidocument1646878148";
+var _namespace_ = "formmultidocument3810399093";
 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":"formmultidocument1646878148__root","viewRoot":"formmultidocument1646878148__viewRoot","singleViewWrapper":"formmultidocument1646878148__singleViewWrapper","addDocumentButton":"formmultidocument1646878148__addDocumentButton"};
+export var classes = {"root":"formmultidocument3810399093__root","viewRoot":"formmultidocument3810399093__viewRoot","singleViewWrapper":"formmultidocument3810399093__singleViewWrapper","addDocumentButton":"formmultidocument3810399093__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultireferenceinput4082023659";
+var _namespace_ = "cellmultireferenceinput3292292763";
 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":"cellmultireferenceinput4082023659__root"};
+export var classes = {"root":"cellmultireferenceinput3292292763__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput2844628780";
+var _namespace_ = "cellreferenceinput567253305";
 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":"cellreferenceinput2844628780__root","autocomplete":"cellreferenceinput2844628780__autocomplete"};
+export var classes = {"root":"cellreferenceinput567253305__root","autocomplete":"cellreferenceinput567253305__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput322459511";
+var _namespace_ = "richcontentdefaultvalueinput3859438755";
 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":"richcontentdefaultvalueinput322459511__root","richContentEditorContainer":"richcontentdefaultvalueinput322459511__richContentEditorContainer","editor":"richcontentdefaultvalueinput322459511__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput3859438755__root","richContentEditorContainer":"richcontentdefaultvalueinput3859438755__richContentEditorContainer","editor":"richcontentdefaultvalueinput3859438755__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput2065350076";
+var _namespace_ = "richcontentforminput886430406";
 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":"richcontentforminput2065350076__root","editor":"richcontentforminput2065350076__editor"};
+export var classes = {"root":"richcontentforminput886430406__root","editor":"richcontentforminput886430406__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput3871435670";
+var _namespace_ = "richcontentformreadonlyinput3897125604";
 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":"richcontentformreadonlyinput3871435670__root"};
+export var classes = {"root":"richcontentformreadonlyinput3897125604__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal2749976818";
+var _namespace_ = "fullscreenmodal491427046";
 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":"fullscreenmodal2749976818__root","modalContent":"fullscreenmodal2749976818__modalContent"};
+export var classes = {"root":"fullscreenmodal491427046__root","modalContent":"fullscreenmodal491427046__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader1965612095";
+var _namespace_ = "publishloader3884077448";
 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":"publishloader1965612095__root","publishLoader":"publishloader1965612095__publishLoader"};
+export var classes = {"root":"publishloader3884077448__root","publishLoader":"publishloader3884077448__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton2591940812";
+var _namespace_ = "togglefullscreenbutton173289788";
 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":"togglefullscreenbutton2591940812__root"};
+export var classes = {"root":"togglefullscreenbutton173289788__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor3767465264";
+var _namespace_ = "richcontenteditor2967905748";
 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":"richcontenteditor3767465264__root","toolbarContainer":"richcontenteditor3767465264__toolbarContainer","footerToolbarContainer":"richcontenteditor3767465264__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3767465264__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3767465264__editor","modalEditor":"richcontenteditor3767465264__modalEditor"};
+export var classes = {"root":"richcontenteditor2967905748__root","toolbarContainer":"richcontenteditor2967905748__toolbarContainer","footerToolbarContainer":"richcontenteditor2967905748__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2967905748__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2967905748__editor","modalEditor":"richcontenteditor2967905748__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar3712074113";
+var _namespace_ = "richcontenttoolbar4116874708";
 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":"richcontenttoolbar3712074113__root","toolbar":"richcontenttoolbar3712074113__toolbar","toolbarButton":"richcontenttoolbar3712074113__toolbarButton","separator":"richcontenttoolbar3712074113__separator"};
+export var classes = {"root":"richcontenttoolbar4116874708__root","toolbar":"richcontenttoolbar4116874708__toolbar","toolbarButton":"richcontenttoolbar4116874708__toolbarButton","separator":"richcontenttoolbar4116874708__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer1665367031";
+var _namespace_ = "richcontentviewer183561878";
 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":"richcontentviewer1665367031__root","viewer":"richcontentviewer1665367031__viewer","modalViewer":"richcontentviewer1665367031__modalViewer"};
+export var classes = {"root":"richcontentviewer183561878__root","viewer":"richcontentviewer183561878__viewer","modalViewer":"richcontentviewer183561878__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor2872059563";
+var _namespace_ = "richeditor2134816257";
 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":"richeditor2872059563__root","editor":"richeditor2872059563__editor","header-one":"richeditor2872059563__header-one","header-two":"richeditor2872059563__header-two","header-three":"richeditor2872059563__header-three","header-four":"richeditor2872059563__header-four","header-five":"richeditor2872059563__header-five","header-six":"richeditor2872059563__header-six","paragraph-one":"richeditor2872059563__paragraph-one","unstyled":"richeditor2872059563__unstyled","paragraph-three":"richeditor2872059563__paragraph-three","align-left":"richeditor2872059563__align-left","align-right":"richeditor2872059563__align-right","align-center":"richeditor2872059563__align-center","align-justify":"richeditor2872059563__align-justify","withMargin":"richeditor2872059563__withMargin","dir-rtl":"richeditor2872059563__dir-rtl"};
+export var classes = {"root":"richeditor2134816257__root","editor":"richeditor2134816257__editor","header-one":"richeditor2134816257__header-one","header-two":"richeditor2134816257__header-two","header-three":"richeditor2134816257__header-three","header-four":"richeditor2134816257__header-four","header-five":"richeditor2134816257__header-five","header-six":"richeditor2134816257__header-six","paragraph-one":"richeditor2134816257__paragraph-one","unstyled":"richeditor2134816257__unstyled","paragraph-three":"richeditor2134816257__paragraph-three","align-left":"richeditor2134816257__align-left","align-right":"richeditor2134816257__align-right","align-center":"richeditor2134816257__align-center","align-justify":"richeditor2134816257__align-justify","withMargin":"richeditor2134816257__withMargin","dir-rtl":"richeditor2134816257__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor631860270";
+var _namespace_ = "richtexteditor4167547933";
 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":"richtexteditor631860270__root","nativeInput":"richtexteditor631860270__nativeInput","editor":"richtexteditor631860270__editor"};
+export var classes = {"root":"richtexteditor4167547933__root","nativeInput":"richtexteditor4167547933__nativeInput","editor":"richtexteditor4167547933__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar2791712600";
+var _namespace_ = "toolbar609773673";
 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":"toolbar2791712600__root","item":"toolbar2791712600__item","separator":"toolbar2791712600__separator","clearFormatting":"toolbar2791712600__clearFormatting","fullScreen":"toolbar2791712600__fullScreen","dropdownItemContent":"toolbar2791712600__dropdownItemContent","dropdownItemTitle":"toolbar2791712600__dropdownItemTitle","dropdownItemSubtitle":"toolbar2791712600__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2791712600__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2791712600__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2791712600__dropdownHeaderThree","dropdownHeaderFour":"toolbar2791712600__dropdownHeaderFour","dropdownHeaderFive":"toolbar2791712600__dropdownHeaderFive","dropdownHeaderSix":"toolbar2791712600__dropdownHeaderSix","dropdownParagraphOne":"toolbar2791712600__dropdownParagraphOne","dropdownNormalText":"toolbar2791712600__dropdownNormalText","dropdownParagraphThree":"toolbar2791712600__dropdownParagraphThree"};
+export var classes = {"root":"toolbar609773673__root","item":"toolbar609773673__item","separator":"toolbar609773673__separator","clearFormatting":"toolbar609773673__clearFormatting","fullScreen":"toolbar609773673__fullScreen","dropdownItemContent":"toolbar609773673__dropdownItemContent","dropdownItemTitle":"toolbar609773673__dropdownItemTitle","dropdownItemSubtitle":"toolbar609773673__dropdownItemSubtitle","dropdownHeaderOne":"toolbar609773673__dropdownHeaderOne","dropdownHeaderTwo":"toolbar609773673__dropdownHeaderTwo","dropdownHeaderThree":"toolbar609773673__dropdownHeaderThree","dropdownHeaderFour":"toolbar609773673__dropdownHeaderFour","dropdownHeaderFive":"toolbar609773673__dropdownHeaderFive","dropdownHeaderSix":"toolbar609773673__dropdownHeaderSix","dropdownParagraphOne":"toolbar609773673__dropdownParagraphOne","dropdownNormalText":"toolbar609773673__dropdownNormalText","dropdownParagraphThree":"toolbar609773673__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/text/form-short-text.driver.ts

@@ -1,6 +1,7 @@
 import type { Field } from '@wix/bex-core';
 import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
 import {
+  AutoCompleteUniDriver,
   FormFieldUniDriver,
   InputUniDriver,
 } from '@wix/design-system/dist/testkit/unidriver';
@@ -15,6 +16,8 @@ export function FormShortTextDriver(
   const formField = FormFieldUniDriver(base, body);
   const inputBase = base.$(`[data-hook="short-text-${field.id}"]`);
   const input = InputUniDriver(inputBase, body);
+  const hasSpecificValues = !!field.validation?.specificValues?.length;
+  const autocomplete = AutoCompleteUniDriver(inputBase, body);
 
   return {
     ...baseUniDriverFactory(base),
@@ -22,9 +25,25 @@ export function FormShortTextDriver(
       const labelEl = await formField.getLabel();
       return labelEl?.textContent ?? '';
     },
-    getValue: () => input.getValue(),
-    enterText: (value: string) => input.enterText(value),
-    blur: () => input.blur(),
+    getValue: async () =>
+      hasSpecificValues
+        ? autocomplete.inputDriver.getValue()
+        : input.getValue(),
+    enterText: async (value: string) =>
+      hasSpecificValues
+        ? autocomplete.inputDriver.enterText(value)
+        : input.enterText(value),
+    selectOption: (id: string) => {
+      if (!hasSpecificValues) {
+        throw new Error(
+          'selectOption() requires a field with validation.specificValues',
+        );
+      }
+
+      return autocomplete.driver.selectOptionById(id);
+    },
+    blur: async () =>
+      hasSpecificValues ? autocomplete.inputDriver.blur() : input.blur(),
     hasError: () => formField.hasStatus('error'),
     getErrorMessage: () => formField.getStatusMessage(),
     getCharCountLeft: () => formField.getLengthLeft(),

package/src/components/text/form-short-text.tsx

@@ -1,14 +1,25 @@
-import React from 'react';
-import { FormField, Input } from '@wix/design-system';
+import React, { useCallback, useMemo, useState } from 'react';
+import {
+  AutoComplete,
+  FormField,
+  Input,
+  listItemSelectBuilder,
+  type DropdownLayoutValueOption,
+} from '@wix/design-system';
 import { observer } from 'mobx-react-lite';
+import type { Field, SpecificValue } from '@wix/bex-core';
 import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps } from '../../types/base-input';
 import { isEmpty, isLongerThan, isShorterThan } from '../../validations/string';
+import { useTranslations } from '../../hooks/use-translations';
 
 export interface FormShortTextProps extends BaseInputProps<string> {}
 
+const specificValuesMessage = (displayName: string) =>
+  `${displayName} must be one of the allowed values`;
+
 const _FormShortText = (props: FormShortTextProps) => {
   const { field, dataHook, formControl, data } = props;
 
@@ -17,6 +28,7 @@ const _FormShortText = (props: FormShortTextProps) => {
   const stringLengthRange = field.validation?.stringLengthRange;
   const minLength = stringLengthRange?.minLength;
   const maxLength = stringLengthRange?.maxLength;
+  const specificValues = field.validation?.specificValues;
 
   const controller = useController({
     name: field.id,
@@ -40,6 +52,14 @@ const _FormShortText = (props: FormShortTextProps) => {
           });
         }
 
+        if (
+          value &&
+          specificValues?.length &&
+          !specificValues.some((option) => option.id === value)
+        ) {
+          return specificValuesMessage(field.displayName);
+        }
+
         return true;
       },
     },
@@ -58,15 +78,107 @@ const _FormShortText = (props: FormShortTextProps) => {
       statusMessage={controller.fieldState.error?.message}
       dataHook={dataHook}
     >
-      <Input
-        value={controller.field.value}
-        onChange={(e) => controller.field.onChange?.(e.target.value)}
-        onBlur={controller.field.onBlur}
-        dataHook={`short-text-${field.id}`}
-        ref={controller.field.ref}
-      />
+      {specificValues?.length ? (
+        <ShortTextSpecificValues
+          field={field}
+          controller={controller}
+          specificValues={specificValues}
+        />
+      ) : (
+        <Input
+          value={controller.field.value}
+          onChange={(e) => controller.field.onChange?.(e.target.value)}
+          onBlur={controller.field.onBlur}
+          dataHook={`short-text-${field.id}`}
+          ref={controller.field.ref}
+        />
+      )}
     </FormField>
   );
 };
 
+type ShortTextController = ReturnType<typeof useController>;
+
+interface ShortTextSpecificValuesProps {
+  field: Field;
+  controller: ShortTextController;
+  specificValues: SpecificValue[];
+}
+
+const ShortTextSpecificValues = ({
+  field,
+  controller,
+  specificValues,
+}: ShortTextSpecificValuesProps) => {
+  const { t: tf } = useTranslations();
+  const [searchValue, setSearchValue] = useState<string>();
+  const selectedOption = specificValues.find(
+    (option) => option.id === controller.field.value,
+  );
+  const selectedId = selectedOption ? selectedOption.id : undefined;
+  const displayValue =
+    searchValue ?? selectedOption?.value ?? controller.field.value ?? '';
+
+  const options = useMemo(() => {
+    const source = searchValue
+      ? specificValues.filter((option) =>
+          option.value.toLowerCase().includes(searchValue.toLowerCase()),
+        )
+      : specificValues;
+    return source.map((option) =>
+      listItemSelectBuilder({
+        id: option.id,
+        title: option.value,
+        selected: option.id === selectedId,
+      }),
+    );
+  }, [searchValue, specificValues, selectedId]);
+
+  const handleSelect = useCallback(
+    (option: DropdownLayoutValueOption) => {
+      const id = String(option.id);
+      controller.field.onChange(id);
+      setSearchValue(undefined);
+    },
+    [controller.field],
+  );
+
+  const handleSearch = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      setSearchValue(e.target.value);
+      if (!e.target.value) {
+        controller.field.onChange('');
+      }
+    },
+    [controller.field],
+  );
+
+  const handleClear = useCallback(() => {
+    controller.field.onChange('');
+    setSearchValue(undefined);
+  }, [controller.field]);
+
+  const handleBlur = useCallback(() => {
+    setSearchValue(undefined);
+    controller.field.onBlur();
+  }, [controller.field]);
+
+  return (
+    <AutoComplete
+      value={displayValue}
+      selectedId={selectedId}
+      options={options}
+      onSelect={handleSelect}
+      onChange={handleSearch}
+      onClear={handleClear}
+      onBlur={handleBlur}
+      clearButton={!field.validation?.required}
+      placeholder={tf('auto-patterns.fields.select_placeholder')}
+      emptyStateMessage={tf('auto-patterns.fields.no_results_found')}
+      inputRef={controller.field.ref}
+      dataHook={`short-text-${field.id}`}
+    />
+  );
+};
+
 export const FormShortText = observer(_FormShortText);

package/src/components/text/text-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview1961865459";
+var _namespace_ = "textview2917192743";
 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":"textview1961865459__root","textView":"textview1961865459__textView"};
+export var classes = {"root":"textview2917192743__root","textView":"textview2917192743__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};