@wix/patterns-fields 1.42.0 → 1.44.0

package/src/assets/locale/messages_sk.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "Convert (Not Available)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "Convert value to {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_sl.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "Convert (Not Available)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "Convert value to {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_sv.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "Konvertera (en tillgängligt)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "Konvertera värde till {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_th.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "แปลง (ไม่พร้อมใช้งาน)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "แปลงค่าเป็น {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_tl.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "Convert (Not Available)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "Convert value to {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_tr.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "Dönüştür (Mevcut Değil)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "Değeri şuna dönüştür: {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_uk.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "Перетворити (недоступно)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "Змінити значення на {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_vi.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "Chuyển đổi (không có sẵn)",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "Chuyển đổi giá trị thành {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/messages_zh.json

@@ -5,6 +5,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsTitleLabel": "What should the title of the images be?",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h4.title": "Subsection Title",
   "CMS.richTextEditor.toolbar.headerDropdown.option.h3.title": "Content Title",
+  "CMS.formTime.invalidMessage": "Invalid time format ",
   "CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle": "Paragraph 2",
   "CMS.mediaGallery.addLink.currentTab": "Current tab",
   "CMS.mediaGallery.dialog.externalLinkLabel": "Link",
@@ -48,6 +49,7 @@
   "auto-patterns.fields.type_mismatch_convert_disabled": "轉換（不可用）",
   "CMS.mediaControl.pasteUrl.error.document": "Invalid document URL",
   "CMS.mediaGallery.dialog.itemAltTooltip": "Alt text helps boost your site's SEO and improves web accessibility.",
+  "CMS.formTime.placeholder": "hh:mm  ",
   "auto-patterns.fields.type_mismatch_convert": "將值轉換為 {typeName}",
   "CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty": "No title",
   "auto-patterns.fields.select_placeholder": "Select...",
@@ -63,6 +65,7 @@
   "CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel": "Where should new images appear?",
   "auto-patterns.fields.field_type_rich_text_title": "Rich Text",
   "CMS.mediaGallery.dialog.sortByFilenameAsc": "File name A-Z",
+  "CMS.formDate.placeholder": "dd:mm:yyyy ",
   "auto-patterns.fields.no_items": "No items",
   "auto-patterns.fields.replace_video_tooltip": "Replace video",
   "CMS.mediaGallery.dialog.externalLinkButtonAdd": "Add Link",

package/src/assets/locale/version_file

@@ -1 +1 @@
-1780842046
+1781422647

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "addressinput705668431";
+var _namespace_ = "addressinput3364327842";
 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":"addressinput705668431__root","tableAddressInput":"addressinput705668431__tableAddressInput"};
+export var classes = {"root":"addressinput3364327842__root","tableAddressInput":"addressinput3364327842__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_ = "actionsmenu287889715";
+var _namespace_ = "actionsmenu2270870419";
 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":"actionsmenu287889715__root","action":"actionsmenu287889715__action"};
+export var classes = {"root":"actionsmenu2270870419__root","action":"actionsmenu2270870419__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_ = "formaudiofield811929063";
+var _namespace_ = "formaudiofield1875584870";
 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":"formaudiofield811929063__root","addItem":"formaudiofield811929063__addItem","mediaTitle":"formaudiofield811929063__mediaTitle"};
+export var classes = {"root":"formaudiofield1875584870__root","addItem":"formaudiofield1875584870__addItem","mediaTitle":"formaudiofield1875584870__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_ = "audioplayer4013659205";
+var _namespace_ = "audioplayer1307598087";
 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":"audioplayer4013659205__root"};
+export var classes = {"root":"audioplayer1307598087__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_ = "cellcolorview2960314587";
+var _namespace_ = "cellcolorview201992451";
 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":"cellcolorview2960314587__root","hashPrefix":"cellcolorview2960314587__hashPrefix"};
+export var classes = {"root":"cellcolorview201992451__root","hashPrefix":"cellcolorview201992451__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_ = "colorview3681998319";
+var _namespace_ = "colorview3980151302";
 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":"colorview3681998319__root","view":"colorview3681998319__view","fillPreview":"colorview3681998319__fillPreview"};
+export var classes = {"root":"colorview3980151302__root","view":"colorview3980151302__view","fillPreview":"colorview3980151302__fillPreview"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/date-input/cell-date-input.tsx

@@ -0,0 +1,124 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { DatePicker } from '@wix/design-system';
+import {
+  closeDatePickerCalendar,
+  getDatePickerInputElement,
+} from './date-picker-internals';
+
+export interface CellDateInputImperativeHandle {
+  /** Focus the underlying input. */
+  focus: () => void;
+  /** Open the calendar popover. */
+  openCalendar: () => void;
+  /** Close the calendar popover. */
+  closeCalendar: () => void;
+}
+
+export interface CellDateInputProps {
+  /** Current Date value (or null for empty). */
+  value?: Date | null;
+  /**
+   * Fires when WDS DatePicker emits a value. Does NOT commit by default —
+   * the consumer decides whether to auto-commit (standalone date cell) or
+   * stash the value (composite cells like DateTime that stay in edit mode
+   * after a date pick).
+   */
+  onChange?: (date: Date) => void;
+  /** When set, renders the clear (X) suffix and calls this on click. */
+  onClear?: () => void;
+  /** Ref object that receives the underlying `<input>` element. Consumers
+   *  can call `inputRef.current?.focus()` or dispatch DOM events on it. */
+  inputRef?: React.MutableRefObject<HTMLInputElement | null | undefined>;
+  dataHook?: string;
+  placeholder?: string;
+  /** Override the default aria-label on the input. */
+  ariaLabel?: string;
+  /** Hide the calendar prefix icon (used inside split sub-cells). */
+  hidePrefix?: boolean;
+  /** Forward additional DatePicker popoverProps (appendTo, moveBy, zIndex). */
+  popoverProps?: React.ComponentProps<typeof DatePicker>['popoverProps'];
+}
+
+/**
+ * Cell-layer Date input. Wraps WDS `<DatePicker>` with cell-edit semantics:
+ * - `onChange` fires on every WDS onChange (typing-driven valid date or
+ *   calendar pick). It deliberately does NOT auto-commit so composite cells
+ *   (DateTime) can stash the value while staying in edit mode.
+ * - `onClear` shows the clear (X) suffix; the cell decides whether to fire
+ *   onCommit alongside the value reset.
+ * - Exposes `focus` / `openCalendar` / `closeCalendar` via imperative handle
+ *   so consumers can drive type-to-edit and scroll-close behaviors.
+ */
+export const CellDateInput = forwardRef<
+  CellDateInputImperativeHandle,
+  CellDateInputProps
+>(
+  (
+    {
+      value,
+      onChange,
+      onClear,
+      inputRef,
+      dataHook,
+      placeholder,
+      ariaLabel,
+      hidePrefix,
+      popoverProps,
+    },
+    forwardedRef,
+  ) => {
+    const datePickerRef = useRef<DatePicker | null>(null);
+
+    useImperativeHandle(
+      forwardedRef,
+      () => ({
+        focus: () => getDatePickerInputElement(datePickerRef.current)?.focus(),
+        openCalendar: () => datePickerRef.current?.openCalendar?.(),
+        closeCalendar: () => closeDatePickerCalendar(datePickerRef.current),
+      }),
+      [],
+    );
+
+    const handleChange = useCallback(
+      (date: Date) => {
+        onChange?.(date);
+      },
+      [onChange],
+    );
+
+    const validValue =
+      value instanceof Date && !isNaN(value.getTime()) ? value : undefined;
+
+    return (
+      <DatePicker
+        ref={datePickerRef}
+        dataHook={dataHook}
+        size="small"
+        width="100%"
+        value={validValue}
+        onChange={handleChange}
+        clearButton={!!onClear && !!validValue}
+        onClear={onClear}
+        placeholderText={placeholder}
+        popoverProps={popoverProps ?? { appendTo: 'window', moveBy: { y: 4 } }}
+        inputProps={{
+          border: 'none',
+          ...(hidePrefix ? { prefix: <span /> } : {}),
+          ...(ariaLabel ? { ariaLabel } : {}),
+          inputRef: (el: HTMLInputElement | null) => {
+            if (inputRef) {
+              inputRef.current = el ?? undefined;
+            }
+          },
+        }}
+      />
+    );
+  },
+);
+
+CellDateInput.displayName = 'CellDateInput';

package/src/components/date-input/date-picker-internals.ts

@@ -0,0 +1,30 @@
+import type { DatePicker } from '@wix/design-system';
+
+/**
+ * WDS `DatePicker` exposes two operations we need that aren't part of its
+ * public type surface:
+ *
+ *   - `state.inputRef` — the underlying `HTMLInputElement` (used to focus
+ *     the input and to programmatically seed it for type-to-edit).
+ *   - `_closeCalendar()` — WDS declares `closeCalendar` in its types but
+ *     only the underscored form exists at runtime.
+ *
+ * Both reaches live behind this helper so the cast happens in exactly one
+ * place. If WDS adds a public surface for these, swap the implementation
+ * here and every consumer picks it up automatically.
+ */
+type DatePickerWithInternals = DatePicker & {
+  state?: { inputRef?: HTMLInputElement };
+  _closeCalendar?: () => void;
+};
+
+export const getDatePickerInputElement = (
+  picker: DatePicker | null | undefined,
+): HTMLInputElement | undefined =>
+  (picker as DatePickerWithInternals | null | undefined)?.state?.inputRef;
+
+export const closeDatePickerCalendar = (
+  picker: DatePicker | null | undefined,
+): void => {
+  (picker as DatePickerWithInternals | null | undefined)?._closeCalendar?.();
+};

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

@@ -5,6 +5,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps, BaseInputRef } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 import {
   getDateWithoutTimezone,
@@ -16,6 +17,7 @@ export interface FormDateInputProps extends BaseInputProps<string | null> {}
 const _FormDateInput = (props: FormDateInputProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
+  const { t: tFields } = useTranslations();
 
   const computeError = (
     value: string | null | undefined,
@@ -72,6 +74,7 @@ const _FormDateInput = (props: FormDateInputProps) => {
         }}
         dataHook={`date-${field.id}`}
         width="100%"
+        placeholderText={tFields('CMS.formDate.placeholder')}
         value={date}
         onChange={(newValue: Date) => {
           setDate(newValue);

package/src/components/date-input/index.ts

@@ -1 +1,3 @@
 export * from './form-date-input';
+export * from './cell-date-input';
+export * from './date-picker-internals';

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

@@ -11,6 +11,7 @@ import { useWixPatternsContainer } from '@wix/bex-core/react';
 import { useController } from '@wix/bex-core/form';
 
 import { BaseInputProps, BaseInputRef } from '../../types/base-input';
+import { useTranslations } from '../../hooks';
 import { isEmpty } from '../../validations/string';
 
 export interface FormDateTimeProps extends BaseInputProps<string | null> {}
@@ -18,6 +19,7 @@ export interface FormDateTimeProps extends BaseInputProps<string | null> {}
 const _FormDateTime = (props: FormDateTimeProps) => {
   const { field, dataHook, inputRef, formControl, data } = props;
   const { translate: t } = useWixPatternsContainer();
+  const { t: tFields } = useTranslations();
 
   const controller = useController({
     name: field?.id ?? '',
@@ -82,6 +84,7 @@ const _FormDateTime = (props: FormDateTimeProps) => {
                 internalRef?.state?.inputRef?.focus?.();
             }}
             width="100%"
+            placeholderText={tFields('CMS.formDate.placeholder')}
             value={date}
             onChange={() => {}}
             // onChange is triggered only when you have valid, non-empty value.
@@ -142,6 +145,8 @@ const _FormDateTime = (props: FormDateTimeProps) => {
               timeRef.current.focus = () => internalRef?.focus();
             }}
             dataHook={`datetime-time-${field.id}`}
+            placeholder={tFields('CMS.formTime.placeholder')}
+            invalidMessage={tFields('CMS.formTime.invalidMessage')}
             value={date ?? null}
             status={
               controller.fieldState.error || timeStatusMessage

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog939076837";
+var _namespace_ = "deletedialog2144465902";
 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":"deletedialog939076837__root","layout":"deletedialog939076837__layout"};
+export var classes = {"root":"deletedialog2144465902__root","layout":"deletedialog2144465902__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_ = "formdocumentfield189717351";
+var _namespace_ = "formdocumentfield2906035939";
 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":"formdocumentfield189717351__root","viewWrapper":"formdocumentfield189717351__viewWrapper","textWidth":"formdocumentfield189717351__textWidth","documentLoader":"formdocumentfield189717351__documentLoader","addDocument":"formdocumentfield189717351__addDocument","addItemWrapper":"formdocumentfield189717351__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2906035939__root","viewWrapper":"formdocumentfield2906035939__viewWrapper","textWidth":"formdocumentfield2906035939__textWidth","documentLoader":"formdocumentfield2906035939__documentLoader","addDocument":"formdocumentfield2906035939__addDocument","addItemWrapper":"formdocumentfield2906035939__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_ = "exclamation1326878845";
+var _namespace_ = "exclamation3597327772";
 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":"exclamation1326878845__root","exclamation":"exclamation1326878845__exclamation","actions":"exclamation1326878845__actions","action":"exclamation1326878845__action"};
+export var classes = {"root":"exclamation3597327772__root","exclamation":"exclamation3597327772__exclamation","actions":"exclamation3597327772__actions","action":"exclamation3597327772__action"};
 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_ = "highlightedtext3563469804";
+var _namespace_ = "highlightedtext3177720312";
 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":"highlightedtext3563469804__root","substring":"highlightedtext3563469804__substring"};
-export var keyframes = {"highlighted":"highlightedtext3563469804__highlighted","highlighted-match":"highlightedtext3563469804__highlighted-match"}; 
+export var classes = {"root":"highlightedtext3177720312__root","substring":"highlightedtext3177720312__substring"};
+export var keyframes = {"highlighted":"highlightedtext3177720312__highlighted","highlighted-match":"highlightedtext3177720312__highlighted-match"}; 
 export var layers = {};
 export var containers = {};
 export var stVars = {};