@wix/patterns-fields 1.88.0 → 1.90.0

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

@@ -67,11 +67,12 @@ interface RenderInputOptions {
   rules?: readonly FieldValidationRuleConfig[];
   readOnly?: boolean;
   invalid?: boolean;
+  disabledRules?: readonly FieldValidationRuleConfig['type'][];
 }
 
 const renderInput = (
   initialData: FieldValidationSettingsValue,
-  { rules = allRules, readOnly, invalid }: RenderInputOptions = {},
+  { rules = allRules, readOnly, invalid, disabledRules }: RenderInputOptions = {},
 ) => {
   const onChange = jest.fn<void, [FieldValidationSettingsValue]>();
 
@@ -84,6 +85,7 @@ const renderInput = (
         rules={rules}
         readOnly={readOnly}
         invalid={invalid}
+        disabledRules={disabledRules}
         onChange={(nextData) => {
           onChange(nextData);
           setData(nextData);
@@ -354,6 +356,23 @@ describe('FieldValidationSettingsInput', () => {
     expect(await driver.getPatternInput().isDisabled()).toBe(true);
   });
 
+  it('disables only the rules listed in disabledRules, leaving others interactive', async () => {
+    const { driver, onChange } = renderInput(
+      { required: true, charactersLimit: { min: 2, max: 20 } },
+      { disabledRules: ['required'] },
+    );
+
+    expect(await driver.getRequiredToggle().isDisabled()).toBe(true);
+    expect(await driver.getCharactersLimitToggle().isDisabled()).toBe(false);
+    expect(await driver.getMinCharactersInput().isDisabled()).toBe(false);
+
+    await driver.getCharactersLimitToggle().click();
+    expect(onChange).toHaveBeenLastCalledWith({
+      required: true,
+      charactersLimit: undefined,
+    });
+  });
+
   it('applies unattributed aggregate invalid styling without inventing an error message', async () => {
     const { driver } = renderInput(
       { charactersLimit: { min: 2, max: 20 } },

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput2914469914";
+var _namespace_ = "addressinput3700843274";
 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":"addressinput2914469914__root","tableAddressInput":"addressinput2914469914__tableAddressInput"};
+export var classes = {"root":"addressinput3700843274__root","tableAddressInput":"addressinput3700843274__tableAddressInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "actionsmenu3671995341";
+var _namespace_ = "actionsmenu878314913";
 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":"actionsmenu3671995341__root","action":"actionsmenu3671995341__action"};
+export var classes = {"root":"actionsmenu878314913__root","action":"actionsmenu878314913__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "formaudiofield1943540213";
+var _namespace_ = "formaudiofield1616225075";
 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":"formaudiofield1943540213__root","addItem":"formaudiofield1943540213__addItem","mediaTitle":"formaudiofield1943540213__mediaTitle"};
+export var classes = {"root":"formaudiofield1616225075__root","addItem":"formaudiofield1616225075__addItem","mediaTitle":"formaudiofield1616225075__mediaTitle"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "audioplayer2417328348";
+var _namespace_ = "audioplayer2664516220";
 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":"audioplayer2417328348__root"};
+export var classes = {"root":"audioplayer2664516220__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_ = "cellcolorview3557913876";
+var _namespace_ = "cellcolorview1626215053";
 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":"cellcolorview3557913876__root","hashPrefix":"cellcolorview3557913876__hashPrefix"};
+export var classes = {"root":"cellcolorview1626215053__root","hashPrefix":"cellcolorview1626215053__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_ = "colorview3341471977";
+var _namespace_ = "colorview3893042649";
 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":"colorview3341471977__root","view":"colorview3341471977__view","fillPreview":"colorview3341471977__fillPreview"};
+export var classes = {"root":"colorview3893042649__root","view":"colorview3893042649__view","fillPreview":"colorview3893042649__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_ = "deletedialog516047347";
+var _namespace_ = "deletedialog2588741587";
 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":"deletedialog516047347__root","layout":"deletedialog516047347__layout"};
+export var classes = {"root":"deletedialog2588741587__root","layout":"deletedialog2588741587__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_ = "formdocumentfield1759869050";
+var _namespace_ = "formdocumentfield2951358547";
 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":"formdocumentfield1759869050__root","viewWrapper":"formdocumentfield1759869050__viewWrapper","textWidth":"formdocumentfield1759869050__textWidth","documentLoader":"formdocumentfield1759869050__documentLoader","addDocument":"formdocumentfield1759869050__addDocument","addItemWrapper":"formdocumentfield1759869050__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2951358547__root","viewWrapper":"formdocumentfield2951358547__viewWrapper","textWidth":"formdocumentfield2951358547__textWidth","documentLoader":"formdocumentfield2951358547__documentLoader","addDocument":"formdocumentfield2951358547__addDocument","addItemWrapper":"formdocumentfield2951358547__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_ = "exclamation2405445415";
+var _namespace_ = "exclamation3285067274";
 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":"exclamation2405445415__root","exclamation":"exclamation2405445415__exclamation","actions":"exclamation2405445415__actions","action":"exclamation2405445415__action"};
+export var classes = {"root":"exclamation3285067274__root","exclamation":"exclamation3285067274__exclamation","actions":"exclamation3285067274__actions","action":"exclamation3285067274__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -15,6 +15,7 @@ import { v4 as uuid } from 'uuid';
 import type { ControlledInputProps } from '../../types/controlled-input';
 import type {
   CharactersLimitFieldValidationRuleConfig,
+  FieldValidationRule,
   FieldValidationRuleConfig,
   FieldValidationSettingsValue,
   PatternFieldValidationRuleConfig,
@@ -29,6 +30,8 @@ export interface FieldValidationSettingsInputProps
     'autoFocus' | 'onBlur'
   > {
   rules: readonly FieldValidationRuleConfig[];
+  /** Rules the caller has fixed and the user can't toggle, independent of `readOnly`. */
+  disabledRules?: readonly FieldValidationRule[];
 }
 
 interface RuleToggleProps {
@@ -73,7 +76,10 @@ export const FieldValidationSettingsInput = ({
   invalid,
   dataHook = 'field-validation-settings',
   rules,
+  disabledRules,
 }: FieldValidationSettingsInputProps) => {
+  const isRuleDisabled = (rule: FieldValidationRule) =>
+    Boolean(readOnly) || Boolean(disabledRules?.includes(rule));
   const supportedRules = rules.map(({ type }) => type);
   const violations = getFieldValidationSettingsViolations(data, supportedRules);
   const supportsSpecificValues = rules.some(
@@ -102,7 +108,7 @@ export const FieldValidationSettingsInput = ({
       key="required"
       dataHook="field-validation-required"
       checked={Boolean(data.required)}
-      disabled={readOnly}
+      disabled={isRuleDisabled('required')}
       label={rule.label}
       infoContent={rule.tooltip}
       onChange={() => update({ required: !data.required })}
@@ -135,7 +141,10 @@ export const FieldValidationSettingsInput = ({
         <RuleToggle
           dataHook="field-validation-characters-limit"
           checked={hasCharactersLimit}
-          disabled={readOnly || (hasSpecificValues && !hasCharactersLimit)}
+          disabled={
+            isRuleDisabled('charactersLimit') ||
+            (hasSpecificValues && !hasCharactersLimit)
+          }
           label={rule.label}
           infoContent={rule.tooltip}
           onChange={() =>
@@ -150,7 +159,7 @@ export const FieldValidationSettingsInput = ({
                   dataHook="field-validation-min-characters"
                   size="small"
                   value={data.charactersLimit?.min}
-                  disabled={readOnly}
+                  disabled={isRuleDisabled('charactersLimit')}
                   status={
                     hasUnattributedInvalidState || minViolation
                       ? 'error'
@@ -184,7 +193,7 @@ export const FieldValidationSettingsInput = ({
                   dataHook="field-validation-max-characters"
                   size="small"
                   value={data.charactersLimit?.max}
-                  disabled={readOnly}
+                  disabled={isRuleDisabled('charactersLimit')}
                   status={
                     hasUnattributedInvalidState ||
                     maxOutOfBoundsViolation ||
@@ -227,7 +236,8 @@ export const FieldValidationSettingsInput = ({
         dataHook="field-validation-specific-values"
         checked={hasSpecificValues}
         disabled={
-          readOnly || ((hasCharactersLimit || hasPattern) && !hasSpecificValues)
+          isRuleDisabled('specificValues') ||
+          ((hasCharactersLimit || hasPattern) && !hasSpecificValues)
         }
         label={rule.label}
         infoContent={rule.tooltip}
@@ -251,7 +261,7 @@ export const FieldValidationSettingsInput = ({
                     dataHook={`field-validation-specific-value-${index}`}
                     size="small"
                     value={option.value}
-                    disabled={readOnly}
+                    disabled={isRuleDisabled('specificValues')}
                     status={
                       optionViolation || hasUnattributedInvalidState
                         ? 'error'
@@ -280,7 +290,7 @@ export const FieldValidationSettingsInput = ({
                     dataHook={`field-validation-specific-value-remove-${index}`}
                     size="tiny"
                     priority="secondary"
-                    disabled={readOnly}
+                    disabled={isRuleDisabled('specificValues')}
                     ariaLabel={rule.removeButton}
                     onClick={() =>
                       update({
@@ -301,7 +311,7 @@ export const FieldValidationSettingsInput = ({
               dataHook="field-validation-specific-value-add"
               size="small"
               prefixIcon={<AddSmall />}
-              disabled={readOnly}
+              disabled={isRuleDisabled('specificValues')}
               onClick={() =>
                 update({
                   specificValues: [
@@ -335,7 +345,9 @@ export const FieldValidationSettingsInput = ({
         <RuleToggle
           dataHook="field-validation-pattern"
           checked={hasPattern}
-          disabled={readOnly || (hasSpecificValues && !hasPattern)}
+          disabled={
+            isRuleDisabled('pattern') || (hasSpecificValues && !hasPattern)
+          }
           label={rule.label}
           infoContent={rule.tooltip}
           onChange={() => update({ pattern: hasPattern ? undefined : '' })}
@@ -346,7 +358,7 @@ export const FieldValidationSettingsInput = ({
               dataHook="field-validation-pattern-input"
               size="small"
               value={data.pattern}
-              disabled={readOnly}
+              disabled={isRuleDisabled('pattern')}
               status={
                 hasUnattributedInvalidState || invalidPatternViolation
                   ? 'error'

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext106472051";
+var _namespace_ = "highlightedtext2489718241";
 var _style_ = classesRuntime.bind(null, _namespace_);
 
 export var cssStates = statesRuntime.bind(null, _namespace_);
@@ -13,8 +13,8 @@ export var style: import("@stylable/runtime").STFunction = _style_;
 export var st: import("@stylable/runtime").STFunction = _style_;
 
 export var namespace = _namespace_;
-export var classes = {"root":"highlightedtext106472051__root","substring":"highlightedtext106472051__substring"};
-export var keyframes = {"highlighted":"highlightedtext106472051__highlighted","highlighted-match":"highlightedtext106472051__highlighted-match"}; 
+export var classes = {"root":"highlightedtext2489718241__root","substring":"highlightedtext2489718241__substring"};
+export var keyframes = {"highlighted":"highlightedtext2489718241__highlighted","highlighted-match":"highlightedtext2489718241__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {}; 

package/src/components/image/thumbnail-replace-overlay.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "thumbnailreplaceoverlay1401102869";
+var _namespace_ = "thumbnailreplaceoverlay2678678087";
 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":"thumbnailreplaceoverlay1401102869__root","icon":"thumbnailreplaceoverlay1401102869__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2678678087__root","icon":"thumbnailreplaceoverlay2678678087__icon"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "cellmediaeditshell2282788607";
+var _namespace_ = "cellmediaeditshell3649700933";
 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":"cellmediaeditshell2282788607__root"};
+export var classes = {"root":"cellmediaeditshell3649700933__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_ = "pasteurlbutton2169628829";
+var _namespace_ = "pasteurlbutton3936701426";
 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":"pasteurlbutton2169628829__root","iconButtonTooltip":"pasteurlbutton2169628829__iconButtonTooltip","iconButton":"pasteurlbutton2169628829__iconButton"};
+export var classes = {"root":"pasteurlbutton3936701426__root","iconButtonTooltip":"pasteurlbutton3936701426__iconButtonTooltip","iconButton":"pasteurlbutton3936701426__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-gallery/cell-media-gallery-edit.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   AvatarGroup,
   Box,
@@ -53,20 +53,21 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
 }) => {
   const { t } = useTranslations();
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const hasValue = Boolean(value?.length);
+  const items = useMemo(() => (Array.isArray(value) ? value : []), [value]);
+  const hasValue = items.length > 0;
   const [isPreviewOpen, setIsPreviewOpen] = useState(false);
   // Tracks whether a commit happened during the current external-UI session.
   // Prevents calling onCancel() after the user already committed (e.g., clear
   // in the preview modal fires onClear then onClose, but we should not cancel).
   const didCommitRef = useRef(false);
 
-  const avatarItems = (value ?? []).map((item) => ({
+  const avatarItems = items.map((item) => ({
     imgProps: { src: mediaURItoImageURL(item.src, ThumbnailSize.S) },
   }));
 
   const { openMediaGalleryDialog, ...dialogProps } = useMediaGalleryDialog({
     initialOpen: false,
-    items: value ?? [],
+    items,
     onChange: (items: WixCodeGalleryItem[]) => {
       didCommitRef.current = true;
       onChange(items.length > 0 ? items : null);
@@ -112,18 +113,22 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
 
   const onDownloadMedia = useCallback(
     async (mediaUri?: string) => {
-      const uri = mediaUri ?? value?.[0]?.src;
-      if (!uri) return;
+      const uri = mediaUri ?? items[0]?.src;
+      if (!uri) {
+        return;
+      }
       try {
         const result = await files.generateFileDownloadUrl(uri);
         const downloadUrl = result.downloadUrls?.[0]?.url;
-        if (!downloadUrl) throw new Error('No download URL returned');
+        if (!downloadUrl) {
+          throw new Error('No download URL returned');
+        }
         executeDownloading(downloadUrl);
       } catch {
         executeDownloading(getMediaURL(uri));
       }
     },
-    [value],
+    [items],
   );
 
   const { handleContainerFocus, handleContainerBlur } = useCellEditKeyboard({
@@ -210,7 +215,7 @@ export const CellMediaGalleryEdit: React.FC<CellMediaGalleryEditProps> = ({
       <MediaPreviewModal
         isOpen={isPreviewOpen}
         onClose={handlePreviewClose}
-        value={(value ?? []).map((item) => item.src)}
+        value={items.map((item) => item.src)}
         onRequestMedia={handlePreviewRequestMedia}
         onClearMedia={handlePreviewClear}
         onDownloadMedia={onDownloadMedia}

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_ = "formmediagalleryfield1285781073";
+var _namespace_ = "formmediagalleryfield1968615131";
 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":"formmediagalleryfield1285781073__root","container":"formmediagalleryfield1285781073__container","viewBox":"formmediagalleryfield1285781073__viewBox","addItemWrapper":"formmediagalleryfield1285781073__addItemWrapper","addItem":"formmediagalleryfield1285781073__addItem","overlay":"formmediagalleryfield1285781073__overlay","image":"formmediagalleryfield1285781073__image","previewImage":"formmediagalleryfield1285781073__previewImage","previewVideo":"formmediagalleryfield1285781073__previewVideo"};
+export var classes = {"root":"formmediagalleryfield1968615131__root","container":"formmediagalleryfield1968615131__container","viewBox":"formmediagalleryfield1968615131__viewBox","addItemWrapper":"formmediagalleryfield1968615131__addItemWrapper","addItem":"formmediagalleryfield1968615131__addItem","overlay":"formmediagalleryfield1968615131__overlay","image":"formmediagalleryfield1968615131__image","previewImage":"formmediagalleryfield1968615131__previewImage","previewVideo":"formmediagalleryfield1968615131__previewVideo"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimage369066312";
+var _namespace_ = "mediaimage1570058065";
 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":"mediaimage369066312__root"};
+export var classes = {"root":"mediaimage1570058065__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":"--mediaimage369066312-from","to":"--mediaimage369066312-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":"--mediaimage1570058065-from","to":"--mediaimage1570058065-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_ = "overlay652708390";
+var _namespace_ = "overlay2437557314";
 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":"overlay652708390__root","iconOverlay":"overlay652708390__iconOverlay"};
+export var classes = {"root":"overlay2437557314__root","iconOverlay":"overlay2437557314__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_ = "medialoader2912078919";
+var _namespace_ = "medialoader1392786445";
 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":"medialoader2912078919__root","loader":"medialoader2912078919__loader"};
+export var classes = {"root":"medialoader1392786445__root","loader":"medialoader1392786445__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_ = "mediatag4045658866";
+var _namespace_ = "mediatag320229137";
 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":"mediatag4045658866__root"};
+export var classes = {"root":"mediatag320229137__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit1848840766";
+var _namespace_ = "cellmultidocumentedit963765177";
 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":"cellmultidocumentedit1848840766__root","chipTrigger":"cellmultidocumentedit1848840766__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit963765177__root","chipTrigger":"cellmultidocumentedit963765177__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/cell-multi-document-edit.tsx

@@ -61,7 +61,7 @@ export const CellMultiDocumentEdit: React.FC<CellMultiDocumentEditProps> = ({
   const { t } = useTranslations();
   const msid = useWixPatternsContainer()?.environment?.msid;
 
-  const uris = useMemo(() => value ?? [], [value]);
+  const uris = useMemo(() => (Array.isArray(value) ? value : []), [value]);
   const containerRef = useRef<HTMLDivElement | null>(null);
 
   const handleMultiChange = useCallback(

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_ = "formmultidocument951527975";
+var _namespace_ = "formmultidocument1849338433";
 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":"formmultidocument951527975__root","viewRoot":"formmultidocument951527975__viewRoot","singleViewWrapper":"formmultidocument951527975__singleViewWrapper","addDocumentButton":"formmultidocument951527975__addDocumentButton"};
+export var classes = {"root":"formmultidocument1849338433__root","viewRoot":"formmultidocument1849338433__viewRoot","singleViewWrapper":"formmultidocument1849338433__singleViewWrapper","addDocumentButton":"formmultidocument1849338433__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};