@wix/patterns-fields 1.118.0 → 1.121.0

package/dist/types/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-content-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;CAA8Y,CAAC;AACja,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;CAA0D,CAAC"}
+{"version":3,"file":"rich-content-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;CAAwY,CAAC;AAC3Z,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;CAA0D,CAAC"}

package/dist/types/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rich-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA0zB,CAAC;AAC70B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiqK,CAAC;AACnrK,eAAO,IAAI,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAg0E,CAAC"}
+{"version":3,"file":"rich-editor.st.css.d.ts","sourceRoot":"","sources":["../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAAwxB,CAAC;AAC3yB,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiqK,CAAC;AACnrK,eAAO,IAAI,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAg0E,CAAC"}

package/dist/types/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA67B,CAAC;AACh9B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;;;;CAAojB,CAAC"}
+{"version":3,"file":"toolbar.st.css.d.ts","sourceRoot":"","sources":["../../../../../../../src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;;;;;;;;;;;;;;;;CAA46B,CAAC;AAC/7B,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI;;;;;;;;;;;;;CAAojB,CAAC"}

package/dist/types/components/text/form-short-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-short-text.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMxD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AA4FrE,eAAO,MAAM,aAAa,WAvFK,kBAAkB;;CAuFI,CAAC"}
+{"version":3,"file":"form-short-text.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMxD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,MAAM,CAAC;CAAG;AA2FrE,eAAO,MAAM,aAAa,WAtFK,kBAAkB;;CAsFI,CAAC"}

package/dist/types/components/text/form-short-text.driver.d.ts

@@ -8,6 +8,8 @@ export declare function FormShortTextDriver(base: UniDriver, body: UniDriver, fi
     selectOption: (id: string) => Promise<void>;
     blur: () => Promise<void>;
     hasError: () => Promise<boolean>;
+    hasInputError: () => Promise<boolean>;
+    hasInputStatusIcon: () => Promise<boolean>;
     getErrorMessage: () => Promise<string>;
     getCharCountLeft: () => Promise<number | null>;
     isRequired: () => Promise<boolean>;

package/dist/types/components/text/form-short-text.driver.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-short-text.driver.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.driver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAS7D,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK;;;;uBAsBe,MAAM;uBAIZ,MAAM;;;;;;;;;;EAgB5B"}
+{"version":3,"file":"form-short-text.driver.d.ts","sourceRoot":"","sources":["../../../../src/components/text/form-short-text.driver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAU7D,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,EACf,IAAI,EAAE,SAAS,EACf,KAAK,EAAE,KAAK;;;;uBAsBe,MAAM;uBAIZ,MAAM;;;;;;;;;;;;EAuB5B"}

package/dist/types/components/text/text-view.st.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-view.st.css.d.ts","sourceRoot":"","sources":["../../../../src/components/text/text-view.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAAgF,CAAC;AACnG,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}
+{"version":3,"file":"text-view.st.css.d.ts","sourceRoot":"","sources":["../../../../src/components/text/text-view.st.css.ts"],"names":[],"mappings":"AAUA,eAAO,IAAI,SAAS,+BAAwC,CAAC;AAC7D,eAAO,IAAI,KAAK,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AACnE,eAAO,IAAI,EAAE,EAAE,OAAO,mBAAmB,EAAE,UAAoB,CAAC;AAEhE,eAAO,IAAI,SAAS,QAAc,CAAC;AACnC,eAAO,IAAI,OAAO;;;CAA8E,CAAC;AACjG,eAAO,IAAI,SAAS,IAAK,CAAC;AAC1B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,UAAU,IAAK,CAAC;AAC3B,eAAO,IAAI,MAAM,IAAK,CAAC;AACvB,eAAO,IAAI,IAAI,IAAK,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/patterns-fields",
-  "version": "1.118.0",
+  "version": "1.121.0",
   "license": "UNLICENSED",
   "author": {
     "name": "Kobi",
@@ -125,7 +125,7 @@
     "@wix/atlas": "^1.0.35",
     "@wix/data": "^1.0.323",
     "@wix/media": "^1.0.231",
-    "@wix/patterns-fields-utils": "1.99.0",
+    "@wix/patterns-fields-utils": "1.102.0",
     "@wix/rich-content": "1.0.37",
     "@wix/sdk": "^1.17.2",
     "@wix/wix-ui-icons-common": "^3.189.0",
@@ -153,7 +153,7 @@
     "@types/lodash": "^4.17.20",
     "@types/react": "^16.14.68",
     "@wix/babel-cli": "^1.11.0",
-    "@wix/bex-core": "2.396.0",
+    "@wix/bex-core": "2.399.0",
     "@wix/design-system": "^1.336.0",
     "@wix/eslint-config-yoshi": "^6.74.0",
     "@wix/jest-yoshi-preset": "^6.74.0",
@@ -213,5 +213,5 @@
       "optional": true
     }
   },
-  "falconPackageHash": "2e3a670efd18675aa351e79d60cf4c39157ee7f3fb5fb2150bd84e5b"
+  "falconPackageHash": "827f125383b7010617b4bf16c38f6aa880bcef94073c35e2835ca015"
 }

package/src/__tests__/components/datetime-input/form-date-time.spec.tsx

@@ -115,6 +115,40 @@ describe('FormDateTime field', () => {
     },
   );
 
+  it.each([false, true])(
+    'keeps invalid date text visible for Date-object values (required=%s)',
+    async (required) => {
+      // Loaded items can contain Date objects despite the renderer's string type.
+      const initialValue = new Date(
+        '2026-09-16T12:00:00.000Z',
+      ) as unknown as string;
+      const driver = setup({
+        field: makeField({ type: 'DATETIME', validation: { required } }),
+        initialValue,
+      });
+
+      await driver.tk.enterDateText('not-a-date');
+      await driver.tk.blurDate();
+
+      expect(await driver.tk.getDateText()).toBe('not-a-date');
+      expect(await driver.tk.dateHasError()).toBe(true);
+      expect(await driver.tk.timeHasError()).toBe(false);
+      await driver.submit();
+      expect(driver.onSubmit).not.toHaveBeenCalled();
+      expect(await driver.tk.getDateText()).toBe('not-a-date');
+
+      await driver.tk.enterDateText('09/17/2026');
+      await driver.tk.blurDate();
+      await driver.submit();
+
+      expect(await driver.tk.dateHasError()).toBe(false);
+      expect(driver.onSubmit).toHaveBeenCalledTimes(1);
+      expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toBe(
+        '2026-09-17T12:00:00.000Z',
+      );
+    },
+  );
+
   it('allows submit after correcting an invalid date', async () => {
     const driver = setup({ initialValue: '2026-09-16T12:00:00.000Z' });
     await driver.tk.enterDateText('not-a-date');

package/src/__tests__/components/media-image-field/form-media-image-input.spec.tsx

@@ -38,19 +38,31 @@ describe('FormMediaImageInput', () => {
       Component: FormMediaImageInput,
       UniDriverFactory: FormMediaImageFieldUniDriver,
       dataHook: (f) => `media-image-field-${f.id}`,
-      field: overrides.field ?? makeField({ type: 'MEDIA_IMAGE' as 'IMAGE' }),
+      field: overrides.field ?? makeField({ type: 'MEDIA_IMAGE' }),
       initialValue: overrides.initialValue ?? null,
     });
     driver.render();
     return driver;
   };
 
+  it('submits the edited alt text', async () => {
+    const driver = setup({ initialValue: mediaManagerImage });
+
+    await driver.tk.enterAltText('A sleeping cat');
+    await driver.submit();
+
+    expect(driver.onSubmit.mock.calls[0][0][driver.field.id]).toEqual({
+      ...mediaManagerImage,
+      altText: 'A sleeping cat',
+    });
+  });
+
   it.each([null, { altText: 'A cat' }])(
     'blocks save of a required field with no image: %p',
     async (initialValue) => {
       const driver = setup({
         field: makeField({
-          type: 'MEDIA_IMAGE' as 'IMAGE',
+          type: 'MEDIA_IMAGE',
           validation: { required: true },
         }),
         initialValue: initialValue as MediaImageValue | null,

package/src/__tests__/components/media-image-field/media-image-view.spec.tsx

@@ -17,7 +17,7 @@ const image: MediaImageValue = {
 
 const driverFactory = uniTestkitFactoryCreator(MediaImageViewUniDriver);
 
-const setup = (value: MediaImageValue | null) => {
+const setup = (value: unknown) => {
   const { container } = render(
     <PatternsFieldsTestProvider>
       <MediaImageView value={value} dataHook="media-image-view" />
@@ -42,10 +42,13 @@ describe('MediaImageView', () => {
     expect(await driver.hasAltTextPlaceholder()).toBe(true);
   });
 
-  it('renders only the empty-image placeholder for no value', async () => {
-    const driver = setup(null);
+  it.each([null, image.uri])(
+    'renders only the empty-image placeholder for %s',
+    async (value) => {
+      const driver = setup(value);
 
-    expect(await driver.isEmpty()).toBe(true);
-    expect(await driver.hasAltTextPlaceholder()).toBe(false);
-  });
+      expect(await driver.isEmpty()).toBe(true);
+      expect(await driver.hasAltTextPlaceholder()).toBe(false);
+    },
+  );
 });

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

@@ -108,6 +108,8 @@ describe('FormShortText field', () => {
     expect(await driver.tk.getErrorMessage()).toBe(
       'cairo.fieldValidation.requiredField',
     );
+    expect(await driver.tk.hasInputError()).toBe(true);
+    expect(await driver.tk.hasInputStatusIcon()).toBe(false);
   });
 
   it('shows a minLength error when the value is too short', async () => {
@@ -193,6 +195,8 @@ describe('FormShortText field', () => {
     expect(await driver.tk.getErrorMessage()).toBe(
       'Title must be one of the allowed values',
     );
+    expect(await driver.tk.hasInputError()).toBe(true);
+    expect(await driver.tk.hasInputStatusIcon()).toBe(false);
   });
 
   it('shows a pattern error when the value does not match', async () => {

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput1182625661";
+var _namespace_ = "addressinput942445692";
 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":"addressinput1182625661__root","tableAddressInput":"addressinput1182625661__tableAddressInput"};
+export var classes = {"root":"addressinput942445692__root","tableAddressInput":"addressinput942445692__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_ = "actionsmenu61633156";
+var _namespace_ = "actionsmenu1975778602";
 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":"actionsmenu61633156__root","action":"actionsmenu61633156__action"};
+export var classes = {"root":"actionsmenu1975778602__root","action":"actionsmenu1975778602__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_ = "formaudiofield2528348038";
+var _namespace_ = "formaudiofield2055988523";
 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":"formaudiofield2528348038__root","addItem":"formaudiofield2528348038__addItem","mediaTitle":"formaudiofield2528348038__mediaTitle"};
+export var classes = {"root":"formaudiofield2055988523__root","addItem":"formaudiofield2055988523__addItem","mediaTitle":"formaudiofield2055988523__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_ = "audioplayer4196418291";
+var _namespace_ = "audioplayer1656849630";
 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":"audioplayer4196418291__root"};
+export var classes = {"root":"audioplayer1656849630__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_ = "cellcolorview1789827475";
+var _namespace_ = "cellcolorview1893010142";
 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":"cellcolorview1789827475__root","hashPrefix":"cellcolorview1789827475__hashPrefix"};
+export var classes = {"root":"cellcolorview1893010142__root","hashPrefix":"cellcolorview1893010142__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_ = "colorview3286888254";
+var _namespace_ = "colorview1944567979";
 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":"colorview3286888254__root","view":"colorview3286888254__view","fillPreview":"colorview3286888254__fillPreview"};
+export var classes = {"root":"colorview1944567979__root","view":"colorview1944567979__view","fillPreview":"colorview1944567979__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/datetime-input/form-date-time.tsx

@@ -45,13 +45,19 @@ const _FormDateTime = (props: FormDateTimeProps) => {
     },
   });
 
+  const storedTimestamp = controller.field.value
+    ? new Date(controller.field.value).getTime()
+    : undefined;
+  // React Hook Form clones Date values during validation. Equal timestamps must
+  // keep the picker value stable so it does not overwrite the invalid draft.
   const date = useMemo(() => {
-    if (!controller.field.value) {
+    const hasValidStoredDate =
+      storedTimestamp !== undefined && !isNaN(storedTimestamp);
+    if (!hasValidStoredDate) {
       return undefined;
     }
-    const d = new Date(controller.field.value);
-    return isNaN(d.getTime()) ? undefined : d;
-  }, [controller.field.value]);
+    return new Date(storedTimestamp);
+  }, [storedTimestamp]);
 
   const [dateStatusMessage, setDateStatusMessage] = useState('');
   const [timeStatusMessage, setTimeStatusMessage] = useState('');

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog4134247488";
+var _namespace_ = "deletedialog82045101";
 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":"deletedialog4134247488__root","layout":"deletedialog4134247488__layout"};
+export var classes = {"root":"deletedialog82045101__root","layout":"deletedialog82045101__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_ = "formdocumentfield3466473275";
+var _namespace_ = "formdocumentfield1988095185";
 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":"formdocumentfield3466473275__root","viewWrapper":"formdocumentfield3466473275__viewWrapper","textWidth":"formdocumentfield3466473275__textWidth","documentLoader":"formdocumentfield3466473275__documentLoader","addDocument":"formdocumentfield3466473275__addDocument","addItemWrapper":"formdocumentfield3466473275__addItemWrapper"};
+export var classes = {"root":"formdocumentfield1988095185__root","viewWrapper":"formdocumentfield1988095185__viewWrapper","textWidth":"formdocumentfield1988095185__textWidth","documentLoader":"formdocumentfield1988095185__documentLoader","addDocument":"formdocumentfield1988095185__addDocument","addItemWrapper":"formdocumentfield1988095185__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_ = "exclamation1889797964";
+var _namespace_ = "exclamation3761338822";
 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":"exclamation1889797964__root","exclamation":"exclamation1889797964__exclamation","actions":"exclamation1889797964__actions","action":"exclamation1889797964__action"};
+export var classes = {"root":"exclamation3761338822__root","exclamation":"exclamation3761338822__exclamation","actions":"exclamation3761338822__actions","action":"exclamation3761338822__action"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/field-validation-settings/field-validation-settings-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "fieldvalidationsettingsinput3230697162";
+var _namespace_ = "fieldvalidationsettingsinput3495594979";
 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":"fieldvalidationsettingsinput3230697162__root","specificValuesInput":"fieldvalidationsettingsinput3230697162__specificValuesInput"};
+export var classes = {"root":"fieldvalidationsettingsinput3495594979__root","specificValuesInput":"fieldvalidationsettingsinput3495594979__specificValuesInput"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "highlightedtext3566174816";
+var _namespace_ = "highlightedtext1820140336";
 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":"highlightedtext3566174816__root","substring":"highlightedtext3566174816__substring"};
-export var keyframes = {"highlighted":"highlightedtext3566174816__highlighted","highlighted-match":"highlightedtext3566174816__highlighted-match"}; 
+export var classes = {"root":"highlightedtext1820140336__root","substring":"highlightedtext1820140336__substring"};
+export var keyframes = {"highlighted":"highlightedtext1820140336__highlighted","highlighted-match":"highlightedtext1820140336__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_ = "thumbnailreplaceoverlay1457233069";
+var _namespace_ = "thumbnailreplaceoverlay4253664154";
 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":"thumbnailreplaceoverlay1457233069__root","icon":"thumbnailreplaceoverlay1457233069__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay4253664154__root","icon":"thumbnailreplaceoverlay4253664154__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_ = "cellmediaeditshell2558708225";
+var _namespace_ = "cellmediaeditshell2310000275";
 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":"cellmediaeditshell2558708225__root"};
+export var classes = {"root":"cellmediaeditshell2310000275__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_ = "pasteurlbutton3407064295";
+var _namespace_ = "pasteurlbutton577192407";
 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":"pasteurlbutton3407064295__root","iconButtonTooltip":"pasteurlbutton3407064295__iconButtonTooltip","iconButton":"pasteurlbutton3407064295__iconButton"};
+export var classes = {"root":"pasteurlbutton577192407__root","iconButtonTooltip":"pasteurlbutton577192407__iconButtonTooltip","iconButton":"pasteurlbutton577192407__iconButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "formmediagalleryfield2708325978";
+var _namespace_ = "formmediagalleryfield2807419625";
 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":"formmediagalleryfield2708325978__root","container":"formmediagalleryfield2708325978__container","viewBox":"formmediagalleryfield2708325978__viewBox","addItemWrapper":"formmediagalleryfield2708325978__addItemWrapper","addItem":"formmediagalleryfield2708325978__addItem","overlay":"formmediagalleryfield2708325978__overlay","image":"formmediagalleryfield2708325978__image","previewImage":"formmediagalleryfield2708325978__previewImage","previewVideo":"formmediagalleryfield2708325978__previewVideo"};
+export var classes = {"root":"formmediagalleryfield2807419625__root","container":"formmediagalleryfield2807419625__container","viewBox":"formmediagalleryfield2807419625__viewBox","addItemWrapper":"formmediagalleryfield2807419625__addItemWrapper","addItem":"formmediagalleryfield2807419625__addItem","overlay":"formmediagalleryfield2807419625__overlay","image":"formmediagalleryfield2807419625__image","previewImage":"formmediagalleryfield2807419625__previewImage","previewVideo":"formmediagalleryfield2807419625__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_ = "mediaimage2609312527";
+var _namespace_ = "mediaimage3834455885";
 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":"mediaimage2609312527__root"};
+export var classes = {"root":"mediaimage3834455885__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":"--mediaimage2609312527-from","to":"--mediaimage2609312527-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":"--mediaimage3834455885-from","to":"--mediaimage3834455885-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_ = "overlay2799147747";
+var _namespace_ = "overlay3003704858";
 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":"overlay2799147747__root","iconOverlay":"overlay2799147747__iconOverlay"};
+export var classes = {"root":"overlay3003704858__root","iconOverlay":"overlay3003704858__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.st.css

@@ -10,8 +10,10 @@
 }
 
 /* A zero-height strip along the cell's bottom edge, so the popover opens
-   under the cell. */
+   under the cell. Flex, because the WDS Popover root is inline-block: on a
+   text line it would start 14px lower. */
 .anchor {
+  display: flex;
   position: absolute;
   left: 0;
   right: 0;

package/src/components/media-image-field/cell-media-image-edit.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmediaimageedit4241529426";
+var _namespace_ = "cellmediaimageedit1862349360";
 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":"cellmediaimageedit4241529426__root","view":"cellmediaimageedit4241529426__view","anchor":"cellmediaimageedit4241529426__anchor","anchorBox":"cellmediaimageedit4241529426__anchorBox","popoverContent":"cellmediaimageedit4241529426__popoverContent","image":"cellmediaimageedit4241529426__image","imageActions":"cellmediaimageedit4241529426__imageActions"};
+export var classes = {"root":"cellmediaimageedit1862349360__root","view":"cellmediaimageedit1862349360__view","anchor":"cellmediaimageedit1862349360__anchor","anchorBox":"cellmediaimageedit1862349360__anchorBox","popoverContent":"cellmediaimageedit1862349360__popoverContent","image":"cellmediaimageedit1862349360__image","imageActions":"cellmediaimageedit1862349360__imageActions"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-image-field/cell-media-image-edit.tsx

@@ -261,7 +261,8 @@ export const CellMediaImageEdit: React.FC<CellMediaImageEditProps> = ({
             <MediaImageView value={image} />
             <div className={classes.anchor}>
               <Popover
-                shown={popoverLayer !== 'none'}
+                // Modals open at WDS's z-index 5000, under this popover.
+                shown={openLayer === 'popover' || openLayer === 'menu'}
                 appendTo="window"
                 placement="bottom-start"
                 moveBy={{ x: 0, y: 4 }}

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "mediaimageview1317682424";
+var _namespace_ = "mediaimageview1279718523";
 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":"mediaimageview1317682424__root","altTextPlaceholder":"mediaimageview1317682424__altTextPlaceholder"};
+export var classes = {"root":"mediaimageview1279718523__root","altTextPlaceholder":"mediaimageview1279718523__altTextPlaceholder"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};