@wix/patterns-fields 1.95.0 → 1.97.0

package/src/__tests__/components/field-validation-settings/field-validation-settings-input.spec.tsx

@@ -30,6 +30,8 @@ const charactersLimitRule: FieldValidationRuleConfig = {
   separator: 'and',
   outOfBoundsError: (min, max) => `Enter a value from ${min} to ${max}.`,
   maxBelowMinError: 'Maximum must not be below minimum.',
+  exclusiveRulesExplanation:
+    "You can't limit character count for specific values.",
 };
 
 const specificValuesRule: FieldValidationRuleConfig = {
@@ -49,6 +51,8 @@ const patternRule: FieldValidationRuleConfig = {
   tooltip: 'Pattern tooltip',
   inputLabel: 'Regular expression',
   invalidError: 'Enter a valid regular expression.',
+  exclusiveRulesExplanation:
+    "You can't add pattern validation for specific values.",
 };
 
 const allRules = [
@@ -68,6 +72,7 @@ interface RenderInputOptions {
   readOnly?: boolean;
   invalid?: boolean;
   disabledRules?: readonly FieldValidationRuleConfig['type'][];
+  exclusiveSpecificValues?: boolean;
 }
 
 const renderInput = (
@@ -77,6 +82,7 @@ const renderInput = (
     readOnly,
     invalid,
     disabledRules,
+    exclusiveSpecificValues,
   }: RenderInputOptions = {},
 ) => {
   const onChange = jest.fn<void, [FieldValidationSettingsValue]>();
@@ -91,6 +97,7 @@ const renderInput = (
         readOnly={readOnly}
         invalid={invalid}
         disabledRules={disabledRules}
+        exclusiveSpecificValues={exclusiveSpecificValues}
         onChange={(nextData) => {
           onChange(nextData);
           setData(nextData);
@@ -337,6 +344,86 @@ describe('FieldValidationSettingsInput', () => {
     expect(await driver.getPatternToggle().isDisabled()).toBe(true);
   });
 
+  it('explains exclusivity under each rule that specific values block', async () => {
+    const { driver } = renderInput({ specificValues: [] });
+
+    expect(
+      await driver.getExclusiveRulesExplanation('characters-limit').text(),
+    ).toBe("You can't limit character count for specific values.");
+    expect(await driver.getExclusiveRulesExplanation('pattern').text()).toBe(
+      "You can't add pattern validation for specific values.",
+    );
+    expect(
+      await driver.getExclusiveRulesExplanation('specific-values').exists(),
+    ).toBe(false);
+  });
+
+  it('explains exclusivity under specific values when a character limit blocks it', async () => {
+    const { driver } = renderInput({ charactersLimit: {} });
+
+    expect(
+      await driver.getExclusiveRulesExplanation('specific-values').text(),
+    ).toBe('Disable the active rule first.');
+    expect(
+      await driver.getExclusiveRulesExplanation('characters-limit').exists(),
+    ).toBe(false);
+  });
+
+  it('falls back to the specific-values explanation exactly once for legacy configs', async () => {
+    const { driver, container } = renderInput(
+      { specificValues: [] },
+      {
+        rules: [
+          { ...charactersLimitRule, exclusiveRulesExplanation: undefined },
+          specificValuesRule,
+          { ...patternRule, exclusiveRulesExplanation: undefined },
+        ],
+      },
+    );
+
+    expect(await driver.hasExclusiveRulesExplanation()).toBe(true);
+    expect(
+      Array.from(
+        container.querySelectorAll('[data-hook$="exclusive-help"]'),
+      ).map((node) => node.textContent),
+    ).toEqual(['Disable the active rule first.']);
+  });
+
+  it('omits an exclusivity explanation when no rule config supplies one', async () => {
+    const { driver } = renderInput(
+      { specificValues: [] },
+      {
+        rules: [
+          { ...charactersLimitRule, exclusiveRulesExplanation: undefined },
+          { ...specificValuesRule, exclusiveRulesExplanation: undefined },
+        ],
+      },
+    );
+
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(true);
+    expect(await driver.hasExclusiveRulesExplanation()).toBe(false);
+  });
+
+  it('keeps every rule toggle enabled when specific values are not exclusive', async () => {
+    const { driver } = renderInput(
+      { specificValues: [] },
+      { exclusiveSpecificValues: false },
+    );
+
+    expect(await driver.getSpecificValuesToggle().isDisabled()).toBe(false);
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(false);
+    expect(await driver.getPatternToggle().isDisabled()).toBe(false);
+  });
+
+  it('does not explain exclusivity when specific values are not exclusive', async () => {
+    const { driver } = renderInput(
+      { charactersLimit: {} },
+      { exclusiveSpecificValues: false },
+    );
+
+    expect(await driver.hasExclusiveRulesExplanation()).toBe(false);
+  });
+
   it('keeps active conflicting rules enabled so loaded data can be repaired', async () => {
     const { driver, onChange } = renderInput({
       charactersLimit: {},

package/src/__tests__/components/url/form-url.spec.tsx

@@ -109,6 +109,69 @@ describe('FormUrl field', () => {
     expect(await driver.tk.hasError()).toBe(false);
   });
 
+  it('shows a min-length error when the URL is shorter than minLength', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'URL',
+        validation: { required: false, stringLengthRange: { minLength: 25 } },
+      }),
+    });
+
+    await driver.tk.enterText('https://wix.com');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.minCharacter{charMin=25}',
+    );
+  });
+
+  it('shows a max-length error when the URL is longer than maxLength', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'URL',
+        validation: { required: false, stringLengthRange: { maxLength: 20 } },
+      }),
+    });
+
+    await driver.tk.enterText('https://example.com/a/very/long/path');
+
+    expect(await driver.tk.hasError()).toBe(true);
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.fieldValidation.maxCharacter{charMax=20}',
+    );
+  });
+
+  it('accepts a URL inside the allowed length range', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'URL',
+        validation: {
+          required: false,
+          stringLengthRange: { minLength: 10, maxLength: 40 },
+        },
+      }),
+    });
+
+    await driver.tk.enterText('https://example.com');
+
+    expect(await driver.tk.hasError()).toBe(false);
+  });
+
+  it('reports the malformed-URL error before the length error', async () => {
+    const driver = setup({
+      field: makeField({
+        type: 'URL',
+        validation: { required: false, stringLengthRange: { minLength: 25 } },
+      }),
+    });
+
+    await driver.tk.enterText('not a url');
+
+    expect(await driver.tk.getErrorMessage()).toBe(
+      'cairo.customFields.url-input.error',
+    );
+  });
+
   it('reports the malformed-URL error before the pattern error', async () => {
     const driver = setup({
       field: makeField({

package/src/__tests__/components/video/form-video.spec.tsx

@@ -2,6 +2,7 @@ import '../../../testkit/test-polyfills';
 
 import type { Field } from '@wix/bex-core';
 
+import { Z_INDEX_MODAL_POPOVER } from '../../../components/common';
 import { FormVideo } from '../../../components/video/form-video';
 import { FormVideoDriver } from '../../../components/video/form-video.driver';
 import { FormFieldDriver, makeField } from '../../form-field.driver';
@@ -82,6 +83,22 @@ describe('FormVideo field', () => {
     );
   });
 
+  it('raises the more-actions menu above modal content', async () => {
+    const field = makeField({ type: 'VIDEO' });
+    const driver = setup({ field, initialValue: VALID_VIDEO_URI });
+
+    await driver.tk.clickMore();
+
+    const deleteAction = document.querySelector(
+      `[data-hook="video-delete-${field.id}"]`,
+    );
+    expect(deleteAction).toBeTruthy();
+    expect(deleteAction!.closest('[data-zindex]')).toHaveAttribute(
+      'data-zindex',
+      String(Z_INDEX_MODAL_POPOVER),
+    );
+  });
+
   // The empty state is the only one that can fail `required`, so its add
   // button is what react-hook-form should land on.
   it('focuses the add button when a required value blocks submit', async () => {

package/src/__tests__/exports/controlled-inputs.spec.tsx

@@ -488,6 +488,52 @@ describe('controlled inputs', () => {
     expect(onChange).toHaveBeenCalledWith(undefined);
   });
 
+  // The testkit factory resolves a dataHook once, when the driver is built, so
+  // a driver made before the click keeps answering about the old render. Each
+  // assertion below uses a driver created after the render it describes.
+  it('shows the audio loader inside the add button while the picker is open', async () => {
+    let resolvePick: (value: unknown) => void = () => {};
+    const openMediaManager = jest.fn().mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolvePick = resolve;
+        }),
+    );
+    const { container } = render(
+      <ControlledAudioInput
+        data={undefined}
+        onChange={jest.fn()}
+        dataHook="audio-loading"
+      />,
+      { wrapper: withMediaManager(openMediaManager) },
+    );
+
+    await getInput(container, 'audio-loading').audio.clickAddButton();
+    await act(async () => {});
+
+    expect(openMediaManager).toHaveBeenCalledTimes(1);
+
+    const fieldBox = container.querySelector<HTMLElement>(
+      '[data-hook="audio-loading"]',
+    );
+    expect(fieldBox).not.toBeNull();
+    expect(
+      fieldBox!.querySelector('[data-hook="fromAudioInput.loader"]'),
+    ).not.toBeNull();
+
+    const loading = getInput(container, 'audio-loading').audio;
+    expect(await loading.isLoading()).toBe(true);
+    expect(await loading.getAddButtonText()).toBe('');
+
+    await act(async () => {
+      resolvePick({ items: [] });
+    });
+
+    const settled = getInput(container, 'audio-loading').audio;
+    expect(await settled.isLoading()).toBe(false);
+    expect(await settled.getAddButtonText()).toBe('CMS.audio.button.add');
+  });
+
   it('disables the audio replace and delete actions when readOnly', async () => {
     const { container } = render(
       <ControlledAudioInput

package/src/components/address/input/address-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2635111141";
+var _namespace_ = "addressinput2635647605";
 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":"addressinput2635111141__root","tableAddressInput":"addressinput2635111141__tableAddressInput"};
+export var classes = {"root":"addressinput2635647605__root","tableAddressInput":"addressinput2635647605__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/address/input/address-input.tsx

@@ -10,6 +10,7 @@ import React, {
 
 import isEqual from 'lodash/isEqual';
 import debounce from 'lodash/debounce';
+import { usePatternsCmsFieldsContainer } from '../../../providers/PatternsFieldsContainerProvider';
 import type { Address } from '../../../types/address';
 import type {
   AddressInputProps as WDSAddressInputProps,
@@ -36,6 +37,14 @@ import { noop } from '../../../utils';
 
 const SEARCH_ADDRESS_DEBOUNCE = 250;
 
+interface AddressSuggestion {
+  formatted: string;
+  mainLabel: string;
+  secondaryLabel: string;
+  searchId?: string;
+  address?: AtlasAddress;
+}
+
 export interface AddressInputProps
   extends Omit<
     WDSAddressInputProps,
@@ -85,9 +94,11 @@ export const AddressInput = forwardRef<
     },
     forwardedRef,
   ) => {
+    const { patternsContainer } = usePatternsCmsFieldsContainer();
+    const errorHandler = patternsContainer?.errorHandler;
     const atlas = useMemo(
-      () => atlasService ?? new WixAtlasService(),
-      [atlasService],
+      () => atlasService ?? new WixAtlasService(errorHandler),
+      [atlasService, errorHandler],
     );
     const { t } = useTranslations();
 
@@ -111,46 +122,107 @@ export const AddressInput = forwardRef<
     const clearInputValue = useClearValue(setInputValue, '');
 
     const [isSearching, setIsSearching] = useState(false);
-    const [searchResults, setSearchResults] = useState<AtlasAddress[]>([]);
+    const [searchResults, setSearchResults] = useState<AddressSuggestion[]>([]);
     const [searchResultsError, setSearchResultsError] = useState<Error>();
+    const requestIdRef = useRef(0);
+    const isMountedRef = useRef(true);
     const searchAddress = useMemo(
       () =>
-        debounce((query: string) => {
-          setIsSearching(true);
-          setSearchResultsError(undefined);
-          return atlas
-            .searchAddress(query)
-            .then(setSearchResults)
-            .catch(setSearchResultsError)
-            .finally(() => setIsSearching(false));
+        debounce(async (query: string, requestId: number) => {
+          const isCurrent = () =>
+            isMountedRef.current && requestId === requestIdRef.current;
+          try {
+            let suggestions: AddressSuggestion[];
+            if (atlas.predictAddress && atlas.getAddress) {
+              const predictions = await atlas.predictAddress(query);
+              suggestions = predictions.flatMap((prediction) =>
+                prediction.searchId && prediction.description
+                  ? [
+                      {
+                        searchId: prediction.searchId,
+                        formatted: prediction.description,
+                        mainLabel:
+                          prediction.textStructure?.mainText ??
+                          prediction.description,
+                        secondaryLabel:
+                          prediction.textStructure?.secondaryText ?? '',
+                      },
+                    ]
+                  : [],
+              );
+            } else {
+              const addresses = await atlas.searchAddress(query);
+              suggestions = addresses.map((result) => {
+                const [mainLabel, ...secondary] =
+                  result.formatted?.split(', ') ?? [];
+                return {
+                  address: result,
+                  formatted: result.formatted ?? '',
+                  mainLabel: mainLabel ?? '',
+                  secondaryLabel: secondary.join(', '),
+                };
+              });
+            }
+            if (isCurrent()) {
+              setSearchResults(suggestions);
+            }
+          } catch (error) {
+            if (isCurrent()) {
+              setSearchResultsError(
+                error instanceof Error ? error : new Error(String(error)),
+              );
+            }
+          } finally {
+            if (isCurrent()) {
+              setIsSearching(false);
+            }
+          }
         }, SEARCH_ADDRESS_DEBOUNCE),
       [atlas],
     );
-    useEffect(
-      () => () => {
+
+    const cancelSearch = useCallback(() => {
+      requestIdRef.current++;
+      searchAddress.cancel();
+      setIsSearching(false);
+    }, [searchAddress]);
+
+    useEffect(() => {
+      const requests = requestIdRef;
+      isMountedRef.current = true;
+      return () => {
+        isMountedRef.current = false;
+        requests.current++;
         searchAddress.cancel();
-      },
-      [searchAddress],
-    );
+      };
+    }, [searchAddress]);
 
     const onInputChange = useCallback(
       ({ target }: React.ChangeEvent<HTMLInputElement>) => {
         onInput?.();
+        cancelSearch();
         setInputValue(target.value);
+        setSearchResults([]);
+        setSearchResultsError(undefined);
 
         const trimmedValue = target.value.trim();
 
         if (trimmedValue) {
-          searchAddress(trimmedValue);
+          setIsSearching(true);
+          searchAddress(trimmedValue, requestIdRef.current);
         } else {
           setAddress(undefined);
-          setSearchResults([]);
-
-          setIsSearching(false);
-          setSearchResultsError(undefined);
+          triggerOnChange(undefined);
         }
       },
-      [onInput, setAddress, setInputValue, searchAddress],
+      [
+        onInput,
+        cancelSearch,
+        setAddress,
+        setInputValue,
+        searchAddress,
+        triggerOnChange,
+      ],
     );
 
     const addressInputRef = useRef<WDSAddressInputRef>(null);
@@ -159,25 +231,29 @@ export const AddressInput = forwardRef<
       () => ({
         focus: () => addressInputRef.current?.focus(),
         clear: () => {
+          cancelSearch();
           clearAddress();
           clearInputValue();
+          setSearchResults([]);
+          triggerOnChange(undefined);
         },
       }),
-      [clearAddress, clearInputValue],
+      [cancelSearch, clearAddress, clearInputValue, triggerOnChange],
     );
 
     useEffect(() => {
-      if (!initialSearchText) return;
+      if (!initialSearchText) {
+        return;
+      }
       setInputValue(initialSearchText);
-      searchAddress(initialSearchText.trim());
+      setIsSearching(true);
+      searchAddress(initialSearchText.trim(), ++requestIdRef.current);
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []); // Deliberately run only on mount — initialSearchText is a one-shot seed
 
-    const isFocusedRef = useRef(false);
     const onSetSelection = useSetSelectionOnFocus();
     const onInputFocus = useCallback(
       (e?: React.FocusEvent<HTMLInputElement>) => {
-        isFocusedRef.current = true;
         onSetSelection(e);
         onFocus?.(e);
       },
@@ -186,40 +262,70 @@ export const AddressInput = forwardRef<
     const onInputBlur = useCallback(
       (e: React.FocusEvent<HTMLInputElement>) => {
         setSearchResultsError(undefined);
-        isFocusedRef.current = false;
+        cancelSearch();
         onBlur?.(e);
       },
-      [onBlur],
-    );
-
-    const isMountedRef = useRef(true);
-    useEffect(
-      () => () => {
-        isMountedRef.current = false;
-      },
-      [],
+      [onBlur, cancelSearch],
     );
 
     const requestFrameCallback = useRequestFrameCallback();
     const onSelect = useCallback(
       async (option: DropdownLayoutValueOption) => {
         const index = Number(option.id);
-        const selectedAddress = searchResults[index];
+        const suggestion = searchResults[index];
 
-        if (!selectedAddress) {
+        if (!suggestion) {
           return;
         }
 
         onInput?.();
-        setInputValue(selectedAddress.formatted ?? '');
-        triggerOnChange(selectedAddress);
-        requestFrameCallback(onSelectAddress);
+        cancelSearch();
+        const requestId = requestIdRef.current;
+        const isCurrent = () =>
+          isMountedRef.current && requestId === requestIdRef.current;
+        setIsSearching(true);
+        try {
+          const resolvedAddress = suggestion.searchId
+            ? await atlas.getAddress?.(suggestion.searchId)
+            : suggestion.address;
+          if (!isCurrent()) {
+            return;
+          }
+          if (!resolvedAddress) {
+            throw new Error('Address could not be resolved');
+          }
+          const selectedAddress = {
+            ...resolvedAddress,
+            formatted: resolvedAddress.formatted || suggestion.formatted,
+          };
+          setAddress(atlasAddressToAddress(selectedAddress));
+          setInputValue(selectedAddress.formatted);
+          triggerOnChange(selectedAddress);
+          requestFrameCallback(() => {
+            if (isCurrent()) {
+              onSelectAddress();
+            }
+          });
+        } catch (error) {
+          if (isCurrent()) {
+            setSearchResultsError(
+              error instanceof Error ? error : new Error(String(error)),
+            );
+          }
+        } finally {
+          if (isCurrent()) {
+            setIsSearching(false);
+          }
+        }
       },
       [
         onInput,
+        atlas,
+        cancelSearch,
         onSelectAddress,
         requestFrameCallback,
         searchResults,
+        setAddress,
         setInputValue,
         triggerOnChange,
       ],
@@ -281,15 +387,12 @@ export const AddressInput = forwardRef<
 
     const options = useMemo(
       () =>
-        searchResults.map((addr, index) => {
-          const [mainLabel, ...secondaryLabelParts] =
-            addr?.formatted?.split(', ') ?? [];
-
+        searchResults.map((suggestion, index) => {
           return addressInputItemBuilder({
             id: index,
-            displayLabel: addr.formatted ?? '',
-            mainLabel: mainLabel ?? '',
-            secondaryLabel: secondaryLabelParts.join(', '),
+            displayLabel: suggestion.formatted,
+            mainLabel: suggestion.mainLabel,
+            secondaryLabel: suggestion.secondaryLabel,
             optionLayout: 'single-line',
           });
         }),
@@ -297,7 +400,16 @@ export const AddressInput = forwardRef<
     );
 
     return (
-      <div onMouseDown={onMouseDown} onKeyDown={onKeyDown}>
+      <div
+        onMouseDown={onMouseDown}
+        onKeyDown={onKeyDown}
+        onKeyDownCapture={(event) => {
+          // The dropdown can stop Escape before it reaches onKeyDown.
+          if (event.key === 'Escape') {
+            cancelSearch();
+          }
+        }}
+      >
         <WDSAddressInput
           dataHook="address-input"
           {...props}
@@ -313,6 +425,7 @@ export const AddressInput = forwardRef<
           onBlur={onInputBlur}
           autoSelect={false}
           status={inputStatus}
+          size="small"
         />
       </div>
     );

package/src/components/audio/actions/actions-menu/actions-menu.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "actionsmenu2195877707";
+var _namespace_ = "actionsmenu372674477";
 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":"actionsmenu2195877707__root","action":"actionsmenu2195877707__action"};
+export var classes = {"root":"actionsmenu372674477__root","action":"actionsmenu372674477__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/controlled-audio.uni.driver.ts

@@ -7,8 +7,8 @@ export function ControlledAudioInputUniDriver(
   base: UniDriver,
   body: UniDriver,
 ) {
-  // The dataHook sits on the AddItem in the empty state and on the wrapper Box
-  // in the filled one, so `base` is either.
+  // The dataHook sits on the AddItem in the empty and loading states and on the
+  // wrapper Box in the filled one, so `base` is either.
   const addItem = AddItemUniDriver(base, body);
   const moreButton = base.$('[data-hook="fromAudioInput.button.more"]');
   const deleteAction = body.$('[data-hook="fromAudioInput.button.delete"]');
@@ -23,6 +23,7 @@ export function ControlledAudioInputUniDriver(
     getAddButtonText: () => base.text(),
     clickAddButton: () => addItem.click(),
     isAddButtonFocused: () => addItem.isFocused(),
+    isLoading: () => base.$('[data-hook="fromAudioInput.loader"]').exists(),
     getAudioName: () => base.$('[data-hook="fromAudioInput.audioName"]').text(),
     audioPlayerExists: () =>
       base.$('[data-hook="fromAudioInput.player"]').exists(),

package/src/components/audio/audio-field/form-audio-field.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formaudiofield2679064113";
+var _namespace_ = "formaudiofield127042580";
 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":"formaudiofield2679064113__root","addItem":"formaudiofield2679064113__addItem","mediaTitle":"formaudiofield2679064113__mediaTitle"};
+export var classes = {"root":"formaudiofield127042580__root","addItem":"formaudiofield127042580__addItem","mediaTitle":"formaudiofield127042580__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};