@wix/patterns-fields 1.43.0 → 1.45.0

package/src/components/reference/cell-multi-reference-view.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import { Box, TagList } from '@wix/design-system';
+import { useTranslations } from '../../hooks/use-translations';
+import { ReferenceAvatar } from './reference-avatar';
+
+export interface CellMultiReferenceItem {
+  id: string;
+  name: string;
+  image?: string;
+}
+
+export interface CellMultiReferenceViewProps {
+  /** Resolved reference items to display as avatar chips. */
+  items: CellMultiReferenceItem[];
+  dataHook?: string;
+  /**
+   * Stable DOM id prefix for the tags. WDS Tag requires `id` to be present;
+   * each tag uses `${fieldId}-${index}`. Callers are responsible for ensuring
+   * uniqueness (e.g., derive from columnId + rowKey).
+   */
+  fieldId: string;
+}
+
+export const CellMultiReferenceView: React.FC<CellMultiReferenceViewProps> = ({
+  items,
+  dataHook,
+  fieldId,
+}) => {
+  const { t } = useTranslations();
+
+  const tags = useMemo(
+    () =>
+      items.map((item, i) => {
+        const label = item.name || t('patterns-fields.reference.untitled');
+        return {
+          id: `${fieldId}-${i}`,
+          dataHook: 'cell-multi-reference-tag',
+          thumb: (
+            <ReferenceAvatar name={label} image={item.image} size="size18" />
+          ),
+          children: label,
+          removable: false as const,
+        };
+      }),
+    [items, fieldId, t],
+  );
+
+  if (tags.length === 0) {
+    return null;
+  }
+
+  return (
+    <Box
+      dataHook={dataHook}
+      direction="vertical"
+      verticalAlign="middle"
+      padding="0 8px"
+      height="100%"
+      width="100%"
+      minWidth={0}
+    >
+      <TagList
+        overflowMode={{
+          type: 'collapse',
+          overflowTooltipContent: (hiddenTags) =>
+            hiddenTags
+              .map((tag) =>
+                typeof tag.children === 'string' ? tag.children : '',
+              )
+              .filter(Boolean)
+              .join(', '),
+        }}
+        size="small"
+        dataHook="cell-multi-reference-tags"
+        tags={tags}
+      />
+    </Box>
+  );
+};
+
+CellMultiReferenceView.displayName = 'CellMultiReferenceView';

package/src/components/reference/cell-reference-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1827087999";
+var _namespace_ = "cellreferenceinput3465800922";
 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":"cellreferenceinput1827087999__root","autocomplete":"cellreferenceinput1827087999__autocomplete"};
+export var classes = {"root":"cellreferenceinput3465800922__root","autocomplete":"cellreferenceinput3465800922__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/reference/index.ts

@@ -1,3 +1,5 @@
 export * from './reference-avatar';
 export * from './cell-reference-view';
 export * from './cell-reference-input';
+export * from './cell-multi-reference-view';
+export * from './cell-multi-reference-input';

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentdefaultvalueinput1004202508";
+var _namespace_ = "richcontentdefaultvalueinput1019219597";
 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":"richcontentdefaultvalueinput1004202508__root","richContentEditorContainer":"richcontentdefaultvalueinput1004202508__richContentEditorContainer","editor":"richcontentdefaultvalueinput1004202508__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput1019219597__root","richContentEditorContainer":"richcontentdefaultvalueinput1019219597__richContentEditorContainer","editor":"richcontentdefaultvalueinput1019219597__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-input/rich-content-form-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentforminput30064399";
+var _namespace_ = "richcontentforminput61346866";
 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":"richcontentforminput30064399__root","editor":"richcontentforminput30064399__editor"};
+export var classes = {"root":"richcontentforminput61346866__root","editor":"richcontentforminput61346866__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/form-read-only-input/rich-content-form-read-only-input.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentformreadonlyinput3289671566";
+var _namespace_ = "richcontentformreadonlyinput2624720836";
 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":"richcontentformreadonlyinput3289671566__root"};
+export var classes = {"root":"richcontentformreadonlyinput2624720836__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/fullscreen-modal/fullscreen-modal.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "fullscreenmodal2240460981";
+var _namespace_ = "fullscreenmodal815098482";
 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":"fullscreenmodal2240460981__root","modalContent":"fullscreenmodal2240460981__modalContent"};
+export var classes = {"root":"fullscreenmodal815098482__root","modalContent":"fullscreenmodal815098482__modalContent"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/publish-loader/publish-loader.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "publishloader712224198";
+var _namespace_ = "publishloader460654946";
 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":"publishloader712224198__root","publishLoader":"publishloader712224198__publishLoader"};
+export var classes = {"root":"publishloader460654946__root","publishLoader":"publishloader460654946__publishLoader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-common/toggle-fullscreen-button/toggle-fullscreen-button.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "togglefullscreenbutton4240859601";
+var _namespace_ = "togglefullscreenbutton51783882";
 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":"togglefullscreenbutton4240859601__root"};
+export var classes = {"root":"togglefullscreenbutton51783882__root"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenteditor3497885434";
+var _namespace_ = "richcontenteditor2103691306";
 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":"richcontenteditor3497885434__root","toolbarContainer":"richcontenteditor3497885434__toolbarContainer","footerToolbarContainer":"richcontenteditor3497885434__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor3497885434__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor3497885434__editor","modalEditor":"richcontenteditor3497885434__modalEditor"};
+export var classes = {"root":"richcontenteditor2103691306__root","toolbarContainer":"richcontenteditor2103691306__toolbarContainer","footerToolbarContainer":"richcontenteditor2103691306__footerToolbarContainer","toolbarAndFullScreenButtonWrapper":"richcontenteditor2103691306__toolbarAndFullScreenButtonWrapper","editor":"richcontenteditor2103691306__editor","modalEditor":"richcontenteditor2103691306__modalEditor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-editor.tsx

@@ -78,16 +78,25 @@ const InsertToolbarSync: FC<ToolbarSyncProps> = ({
 }) => {
   const { buttons } = editor.useToolbarProps('insert');
 
-  // `useToolbarProps` rebuilds `buttons` (new array + closures) on every render,
-  // so guard against pushing an unchanged-by-content array into parent state.
-  const signature = buttons.map((b) => b.id).join('|');
-  const buttonsRef = useRef(buttons);
-  buttonsRef.current = buttons;
+  // Ricos 11's next-runtime proxy is supposed to convert the legacy
+  // `Record<string, ToolbarButtonProps>` into a v2 `ExternalToolbarButton[]`,
+  // but some consumer bundles end up calling through to the inner adapter
+  // (duplicate `@wix/ricos` copies / unwrapped ref) and we receive the
+  // record shape. Normalize to an array so `.map` is safe, and treat the
+  // non-array (record) shape as ready — otherwise the absolute-positioned
+  // RCELoader overlay stays mounted and the editor row becomes unclickable.
+  const isRecordShape = !Array.isArray(buttons);
+  const safeButtons: readonly RicosExternalToolbarButton[] = isRecordShape
+    ? []
+    : buttons;
+  const signature = safeButtons.map((b) => b.id).join('|');
+  const buttonsRef = useRef(safeButtons);
+  buttonsRef.current = safeButtons;
 
   useEffect(() => {
     onButtonsChange(buttonsRef.current);
-    onReadyChange(buttonsRef.current.length > 0);
-  }, [signature, onButtonsChange, onReadyChange]);
+    onReadyChange(buttonsRef.current.length > 0 || isRecordShape);
+  }, [signature, isRecordShape, onButtonsChange, onReadyChange]);
 
   return null;
 };
@@ -139,10 +148,13 @@ const RCE = forwardRef<RCEHandle, RCEProps & ToggleFullscreenButtonProps>(
     const [toolbarContainer, setToolbarContainer] =
       useState<HTMLDivElement | null>(null);
 
-    const setEditorInstance = useCallback((nextEditor: RicosEditorAPI | null) => {
-      editorRef.current = nextEditor;
-      setEditor(nextEditor);
-    }, []);
+    const setEditorInstance = useCallback(
+      (nextEditor: RicosEditorAPI | null) => {
+        editorRef.current = nextEditor;
+        setEditor(nextEditor);
+      },
+      [],
+    );
 
     const setContent = useCallback((nextContent: RicosDocument) => {
       editorRef.current?.getEditorCommands().setContent(nextContent);
@@ -480,7 +492,10 @@ export const RichContentEditor: FC<RichContentEditorProps> = ({
     const isChanged = isRichContentChanged();
 
     try {
-      finalContent = await publishEditorContent(modalEditorRef.current, content);
+      finalContent = await publishEditorContent(
+        modalEditorRef.current,
+        content,
+      );
       onExitFullScreen?.(finalContent, isChanged);
     } catch (error) {
       finalContent = content;
@@ -512,13 +527,7 @@ export const RichContentEditor: FC<RichContentEditorProps> = ({
       );
     }
     onBlur?.();
-  }, [
-    content,
-    isRichContentChanged,
-    onBlur,
-    onPublish,
-    publishEditorContent,
-  ]);
+  }, [content, isRichContentChanged, onBlur, onPublish, publishEditorContent]);
 
   useEffect(() => {
     if (!isFullScreen) {

package/src/components/rich-content/rich-content-input/rich-content-editor/rich-content-toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontenttoolbar4068399874";
+var _namespace_ = "richcontenttoolbar1669682485";
 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":"richcontenttoolbar4068399874__root","toolbar":"richcontenttoolbar4068399874__toolbar","toolbarButton":"richcontenttoolbar4068399874__toolbarButton","separator":"richcontenttoolbar4068399874__separator"};
+export var classes = {"root":"richcontenttoolbar1669682485__root","toolbar":"richcontenttoolbar1669682485__toolbar","toolbarButton":"richcontenttoolbar1669682485__toolbarButton","separator":"richcontenttoolbar1669682485__separator"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/rich-content-viewer/rich-content-viewer.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richcontentviewer2820543816";
+var _namespace_ = "richcontentviewer3382508919";
 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":"richcontentviewer2820543816__root","viewer":"richcontentviewer2820543816__viewer","modalViewer":"richcontentviewer2820543816__modalViewer"};
+export var classes = {"root":"richcontentviewer3382508919__root","viewer":"richcontentviewer3382508919__viewer","modalViewer":"richcontentviewer3382508919__modalViewer"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richeditor1163655534";
+var _namespace_ = "richeditor1374828981";
 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":"richeditor1163655534__root","editor":"richeditor1163655534__editor","header-one":"richeditor1163655534__header-one","header-two":"richeditor1163655534__header-two","header-three":"richeditor1163655534__header-three","header-four":"richeditor1163655534__header-four","header-five":"richeditor1163655534__header-five","header-six":"richeditor1163655534__header-six","paragraph-one":"richeditor1163655534__paragraph-one","unstyled":"richeditor1163655534__unstyled","paragraph-three":"richeditor1163655534__paragraph-three","align-left":"richeditor1163655534__align-left","align-right":"richeditor1163655534__align-right","align-center":"richeditor1163655534__align-center","align-justify":"richeditor1163655534__align-justify","withMargin":"richeditor1163655534__withMargin","dir-rtl":"richeditor1163655534__dir-rtl"};
+export var classes = {"root":"richeditor1374828981__root","editor":"richeditor1374828981__editor","header-one":"richeditor1374828981__header-one","header-two":"richeditor1374828981__header-two","header-three":"richeditor1374828981__header-three","header-four":"richeditor1374828981__header-four","header-five":"richeditor1374828981__header-five","header-six":"richeditor1374828981__header-six","paragraph-one":"richeditor1374828981__paragraph-one","unstyled":"richeditor1374828981__unstyled","paragraph-three":"richeditor1374828981__paragraph-three","align-left":"richeditor1374828981__align-left","align-right":"richeditor1374828981__align-right","align-center":"richeditor1374828981__align-center","align-justify":"richeditor1374828981__align-justify","withMargin":"richeditor1374828981__withMargin","dir-rtl":"richeditor1374828981__dir-rtl"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/rich-text-editor.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../stylable-esm-runtime.
 
 
 
-var _namespace_ = "richtexteditor4142196869";
+var _namespace_ = "richtexteditor2477284817";
 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":"richtexteditor4142196869__root","nativeInput":"richtexteditor4142196869__nativeInput","editor":"richtexteditor4142196869__editor"};
+export var classes = {"root":"richtexteditor2477284817__root","nativeInput":"richtexteditor2477284817__nativeInput","editor":"richtexteditor2477284817__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-text/rich-text-input/rich-text-editor/toolbar/toolbar.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../../../stylable-esm-runti
 
 
 
-var _namespace_ = "toolbar1207446565";
+var _namespace_ = "toolbar2906952157";
 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":"toolbar1207446565__root","item":"toolbar1207446565__item","separator":"toolbar1207446565__separator","clearFormatting":"toolbar1207446565__clearFormatting","fullScreen":"toolbar1207446565__fullScreen","dropdownItemContent":"toolbar1207446565__dropdownItemContent","dropdownItemTitle":"toolbar1207446565__dropdownItemTitle","dropdownItemSubtitle":"toolbar1207446565__dropdownItemSubtitle","dropdownHeaderOne":"toolbar1207446565__dropdownHeaderOne","dropdownHeaderTwo":"toolbar1207446565__dropdownHeaderTwo","dropdownHeaderThree":"toolbar1207446565__dropdownHeaderThree","dropdownHeaderFour":"toolbar1207446565__dropdownHeaderFour","dropdownHeaderFive":"toolbar1207446565__dropdownHeaderFive","dropdownHeaderSix":"toolbar1207446565__dropdownHeaderSix","dropdownParagraphOne":"toolbar1207446565__dropdownParagraphOne","dropdownNormalText":"toolbar1207446565__dropdownNormalText","dropdownParagraphThree":"toolbar1207446565__dropdownParagraphThree"};
+export var classes = {"root":"toolbar2906952157__root","item":"toolbar2906952157__item","separator":"toolbar2906952157__separator","clearFormatting":"toolbar2906952157__clearFormatting","fullScreen":"toolbar2906952157__fullScreen","dropdownItemContent":"toolbar2906952157__dropdownItemContent","dropdownItemTitle":"toolbar2906952157__dropdownItemTitle","dropdownItemSubtitle":"toolbar2906952157__dropdownItemSubtitle","dropdownHeaderOne":"toolbar2906952157__dropdownHeaderOne","dropdownHeaderTwo":"toolbar2906952157__dropdownHeaderTwo","dropdownHeaderThree":"toolbar2906952157__dropdownHeaderThree","dropdownHeaderFour":"toolbar2906952157__dropdownHeaderFour","dropdownHeaderFive":"toolbar2906952157__dropdownHeaderFive","dropdownHeaderSix":"toolbar2906952157__dropdownHeaderSix","dropdownParagraphOne":"toolbar2906952157__dropdownParagraphOne","dropdownNormalText":"toolbar2906952157__dropdownNormalText","dropdownParagraphThree":"toolbar2906952157__dropdownParagraphThree"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "textview1313282440";
+var _namespace_ = "textview2263726534";
 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":"textview1313282440__root","textView":"textview1313282440__textView"};
+export var classes = {"root":"textview2263726534__root","textView":"textview2263726534__textView"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { CloseButton } from '@wix/design-system';
 import type { TimeInputImperativeActions } from '@wix/design-system';
 
 import type { FormInputProps } from '../../types';
-import { useAutoFocus } from '../../hooks';
+import { useAutoFocus, useTranslations } from '../../hooks';
 
 import { TimeInput } from './time-input';
 import { useTime, type Time } from './hooks';
@@ -22,6 +22,7 @@ export const FormTimeInput: FC<FormTimeInputProps> = ({
 }) => {
   const inputRef = useRef<TimeInputImperativeActions>(null);
   useAutoFocus(inputRef, autoFocus);
+  const { t } = useTranslations();
 
   const [value, onChangeValue] = useTime(data, onChange);
 
@@ -39,6 +40,8 @@ export const FormTimeInput: FC<FormTimeInputProps> = ({
       onChange={onChangeValue}
       onInput={onInput}
       width="100%"
+      placeholder={t('CMS.formTime.placeholder')}
+      invalidMessage={t('CMS.formTime.invalidMessage')}
       suffix={
         value && !readOnly ? (
           <CloseButton

package/src/services/translations.ts

@@ -6,6 +6,7 @@ export type TranslationsKeys =
   | 'CMS.mediaGallery.dialog.settingsNewItemsTitleLabel'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.h4.title'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.h3.title'
+  | 'CMS.formTime.invalidMessage'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.p2.subtitle'
   | 'CMS.mediaGallery.addLink.currentTab'
   | 'CMS.mediaGallery.dialog.externalLinkLabel'
@@ -47,6 +48,7 @@ export type TranslationsKeys =
   | 'auto-patterns.fields.type_mismatch_convert_disabled'
   | 'CMS.mediaControl.pasteUrl.error.document'
   | 'CMS.mediaGallery.dialog.itemAltTooltip'
+  | 'CMS.formTime.placeholder'
   | 'CMS.mediaGallery.dialog.settingsNewItemsTitleEmpty'
   | 'auto-patterns.fields.select_placeholder'
   | 'CMS.richTextEditor.toolbar.headerDropdown.option.h1.title'
@@ -60,6 +62,7 @@ export type TranslationsKeys =
   | 'CMS.mediaGallery.dialog.settingsNewItemsDirectionLabel'
   | 'auto-patterns.fields.field_type_rich_text_title'
   | 'CMS.mediaGallery.dialog.sortByFilenameAsc'
+  | 'CMS.formDate.placeholder'
   | 'auto-patterns.fields.no_items'
   | 'auto-patterns.fields.replace_video_tooltip'
   | 'CMS.mediaGallery.dialog.externalLinkButtonAdd'