@wix/patterns-fields 1.94.0 → 1.96.0

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_ = "actionsmenu2358938485";
+var _namespace_ = "actionsmenu2362666947";
 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":"actionsmenu2358938485__root","action":"actionsmenu2358938485__action"};
+export var classes = {"root":"actionsmenu2362666947__root","action":"actionsmenu2362666947__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_ = "formaudiofield1123005832";
+var _namespace_ = "formaudiofield502767307";
 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":"formaudiofield1123005832__root","addItem":"formaudiofield1123005832__addItem","mediaTitle":"formaudiofield1123005832__mediaTitle"};
+export var classes = {"root":"formaudiofield502767307__root","addItem":"formaudiofield502767307__addItem","mediaTitle":"formaudiofield502767307__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/audio/audio-field/form-audio-field.tsx

@@ -3,16 +3,16 @@ import React, { useRef, useMemo } from 'react';
 
 import { getMediaURL } from '../../../auto-field-types';
 import type { AddItemActions } from '@wix/design-system';
-import { AddItem, AudioPlayer, Box, Text } from '@wix/design-system';
+import { AddItem, AudioPlayer, Box, Loader, Text } from '@wix/design-system';
 
 import { useMergedRef, useTranslations, useWithCallback } from '../../../hooks';
 import { getMediaTitle, MEDIA_TYPES } from '../../../utils';
+import { MEDIA_MAX_WIDTH } from '../../../utils/media-constants';
 
 import { Z_INDEX_MODAL_POPOVER } from '../../common';
 import type { ControlledInputProps } from '../../../types/controlled-input';
 import type { FormMediaControlProps } from '../../media-control';
 import { useMediaControl, useMediaHandlers } from '../../media-control';
-import { MediaLoader } from '../../media-loader';
 import { ActionsButton } from '../actions/actions-button';
 import { buildAudioActions } from '../actions/audio-actions';
 
@@ -97,61 +97,67 @@ export const FormAudioField: FC<FormAudioFieldProps> = ({
     [t, readOnly, handleReplace, handleDownload, handleDelete],
   );
 
-  if (loading) {
-    return <MediaLoader borderStyle="dashed" className={classes.addItem} />;
-  }
-
-  if (!data) {
-    return (
-      <AddItem
-        ref={setInputRef}
-        dataHook={dataHook}
-        className={style(classes.addItem, {
-          disabled: !!readOnly,
-          error: invalid,
-        })}
-        theme="dashes"
-        onClick={callMedia}
-        disabled={readOnly}
-        children={t('CMS.audio.button.add')}
-      />
-    );
-  }
+  // The picker takes over the field while it is open, value or not.
+  const showAddItem = loading || !data;
 
   return (
-    <Box dataHook={dataHook} direction="vertical" gap="S1">
-      <div ref={viewRef} tabIndex={0}>
-        <Box
-          direction="vertical"
-          verticalAlign="middle"
-          backgroundColor="D70"
-          padding="SP5"
-          borderRadius={12}
-        >
-          <Text
-            dataHook="fromAudioInput.audioName"
-            className={classes.mediaTitle}
-          >
-            {getMediaTitle(data)}
-          </Text>
-          <Box direction="horizontal" marginTop="9px" marginBottom="-3px">
-            <AudioPlayer
-              dataHook="fromAudioInput.player"
-              src={getMediaURL(data)}
-              onLoad={onMediaLoad}
-              onLoadError={onMediaLoad}
-            />
-            <Box marginLeft="SP3" gap="SP1">
-              <ActionsButton
-                dataHook="fromAudioInput.button.more"
-                actionsMenuProps={actionsMenuProps}
-                priority="secondary"
-                skin="inverted"
-              />
+    <Box width="100%" maxWidth={MEDIA_MAX_WIDTH}>
+      {showAddItem ? (
+        <AddItem
+          ref={setInputRef}
+          dataHook={dataHook}
+          className={style(classes.addItem, {
+            disabled: !!readOnly,
+            error: invalid,
+          })}
+          theme="dashes"
+          onClick={callMedia}
+          disabled={readOnly || loading}
+          showIcon={!loading}
+          children={
+            loading ? (
+              <Loader dataHook="fromAudioInput.loader" size="tiny" />
+            ) : (
+              t('CMS.audio.button.add')
+            )
+          }
+        />
+      ) : (
+        <Box dataHook={dataHook} direction="vertical" gap="S1">
+          <div ref={viewRef} tabIndex={0}>
+            <Box
+              direction="vertical"
+              verticalAlign="middle"
+              backgroundColor="D70"
+              padding="SP5"
+              borderRadius={12}
+            >
+              <Text
+                dataHook="fromAudioInput.audioName"
+                className={classes.mediaTitle}
+              >
+                {getMediaTitle(data)}
+              </Text>
+              <Box direction="horizontal" marginTop="9px" marginBottom="-3px">
+                <AudioPlayer
+                  dataHook="fromAudioInput.player"
+                  src={getMediaURL(data)}
+                  onLoad={onMediaLoad}
+                  onLoadError={onMediaLoad}
+                />
+                <Box marginLeft="SP3" gap="SP1">
+                  <ActionsButton
+                    dataHook="fromAudioInput.button.more"
+                    actionsMenuProps={actionsMenuProps}
+                    priority="secondary"
+                    skin="inverted"
+                  />
+                </Box>
+              </Box>
             </Box>
-          </Box>
+          </div>
         </Box>
-      </div>
+      )}
     </Box>
   );
 };

package/src/components/audio/audio-player/audio-player.st.css.ts

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

package/src/components/color-view/cell-color-view.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellcolorview614177914";
+var _namespace_ = "cellcolorview938440383";
 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":"cellcolorview614177914__root","hashPrefix":"cellcolorview614177914__hashPrefix"};
+export var classes = {"root":"cellcolorview938440383__root","hashPrefix":"cellcolorview938440383__hashPrefix"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "colorview434636090";
+var _namespace_ = "colorview65911971";
 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":"colorview434636090__root","view":"colorview434636090__view","fillPreview":"colorview434636090__fillPreview"};
+export var classes = {"root":"colorview65911971__root","view":"colorview65911971__view","fillPreview":"colorview65911971__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/delete-dialog/delete-dialog.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog3489034795";
+var _namespace_ = "deletedialog3266102737";
 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":"deletedialog3489034795__root","layout":"deletedialog3489034795__layout"};
+export var classes = {"root":"deletedialog3266102737__root","layout":"deletedialog3266102737__layout"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formdocumentfield1976509087";
+var _namespace_ = "formdocumentfield1771787540";
 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":"formdocumentfield1976509087__root","viewWrapper":"formdocumentfield1976509087__viewWrapper","textWidth":"formdocumentfield1976509087__textWidth","documentLoader":"formdocumentfield1976509087__documentLoader","addDocument":"formdocumentfield1976509087__addDocument","addItemWrapper":"formdocumentfield1976509087__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1771787540__root","viewWrapper":"formdocumentfield1771787540__viewWrapper","textWidth":"formdocumentfield1771787540__textWidth","documentLoader":"formdocumentfield1771787540__documentLoader","addDocument":"formdocumentfield1771787540__addDocument","addItemWrapper":"formdocumentfield1771787540__addItemWrapper"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/exclamation/exclamation.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "exclamation3877731892";
+var _namespace_ = "exclamation1979955691";
 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":"exclamation3877731892__root","exclamation":"exclamation3877731892__exclamation","actions":"exclamation3877731892__actions","action":"exclamation3877731892__action"};
+export var classes = {"root":"exclamation1979955691__root","exclamation":"exclamation1979955691__exclamation","actions":"exclamation1979955691__actions","action":"exclamation1979955691__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};