@wix/patterns-fields 1.77.0 → 1.78.0

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

@@ -0,0 +1,64 @@
+import React, { useMemo } from 'react';
+import { DatePicker } from '@wix/design-system';
+import type { DatePickerProps } from '@wix/design-system';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+import {
+  getDateWithoutTimezone,
+  getISODateStringWithFixedTimezone,
+} from './date-utils';
+
+export interface DateInputProps extends ControlledInputProps<string | null> {
+  placeholder?: string;
+  inputRef?: DatePickerProps['inputRef'];
+  onInvalid?(value: string): void;
+}
+
+export const ControlledDateInput: React.FC<DateInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  placeholder,
+  inputRef,
+  onInvalid,
+}) => {
+  const value = useMemo(() => {
+    if (!data) {
+      return undefined;
+    }
+
+    const iso = getISODateStringWithFixedTimezone(data);
+    return iso ? getDateWithoutTimezone(iso) : undefined;
+  }, [data]);
+
+  return (
+    <DatePicker
+      value={value}
+      onChange={(newValue) => {
+        const iso = getISODateStringWithFixedTimezone(newValue);
+        onChange(iso?.split('T')[0] ?? null);
+      }}
+      onValidate={({ validationType, value: inputValue }) => {
+        if (validationType === 'formatError' && inputValue === '') {
+          onChange(null);
+        } else if (validationType !== 'valid') {
+          onInvalid?.(inputValue);
+        }
+      }}
+      inputProps={{ autoFocus, onBlur, inputRef }}
+      readOnly={readOnly}
+      status={invalid ? 'error' : undefined}
+      placeholderText={placeholder}
+      width="100%"
+      dataHook={dataHook}
+    />
+  );
+};
+
+ControlledDateInput.displayName = 'ControlledDateInput';
+
+export const DateInput = ControlledDateInput;

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

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

package/src/components/datetime-input/controlled-date-time-input.uni.driver.ts

@@ -0,0 +1,18 @@
+import { UniDriver } from '@wix/wix-ui-test-utils/unidriver';
+import {
+  DatePickerUniDriver,
+  TimeInputUniDriver,
+} from '@wix/design-system/dist/testkit/unidriver';
+
+import { baseUniDriverFactory } from '../../testkit/base-driver';
+
+export function DateTimeInputUniDriver(base: UniDriver, body: UniDriver) {
+  return {
+    ...baseUniDriverFactory(base),
+    datePicker: DatePickerUniDriver(
+      base.$('[data-hook="date-time-date"]'),
+      body,
+    ),
+    timeInput: TimeInputUniDriver(base.$('[data-hook="date-time-time"]'), body),
+  };
+}

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

@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react';
+import { Cell, DatePicker, Layout, TimeInput } from '@wix/design-system';
+import type { DatePickerProps, TimeInputProps } from '@wix/design-system';
+
+import type { ControlledInputProps } from '../../types/controlled-input';
+import { useTranslations } from '../../hooks';
+
+const DATE_INPUT_DATA_HOOK = 'date-time-date';
+const TIME_INPUT_DATA_HOOK = 'date-time-time';
+
+const parseDate = (value: string | null): Date | undefined => {
+  if (!value) {
+    return undefined;
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? undefined : date;
+};
+
+export interface DateTimeInputProps
+  extends ControlledInputProps<string | null> {
+  datePlaceholder?: string;
+  timePlaceholder?: string;
+  timeInvalidMessage?: string;
+  dateInputRef?: DatePickerProps['inputRef'];
+  timeInputRef?: TimeInputProps['inputRef'];
+  onInvalidDate?(value: string): void;
+  onInvalidTime?(): void;
+}
+
+export const ControlledDateTimeInput: React.FC<DateTimeInputProps> = ({
+  data,
+  onChange,
+  onBlur,
+  readOnly,
+  autoFocus,
+  invalid,
+  dataHook,
+  datePlaceholder,
+  timePlaceholder,
+  timeInvalidMessage,
+  dateInputRef,
+  timeInputRef,
+  onInvalidDate,
+  onInvalidTime,
+}) => {
+  const { i18n } = useTranslations();
+  const value = useMemo(() => parseDate(data), [data]);
+
+  return (
+    <div
+      data-hook={dataHook}
+      onBlur={(event) => {
+        const relatedTarget = event.relatedTarget;
+        if (
+          relatedTarget instanceof Element &&
+          relatedTarget.closest('[role="dialog"], [data-hook*="calendar"]')
+        ) {
+          return;
+        }
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          onBlur?.();
+        }
+      }}
+    >
+      <Layout gap="SP2">
+        <Cell span={6}>
+          <DatePicker
+            value={value}
+            onChange={(newValue) => {
+              const nextValue = value ? new Date(value) : new Date(newValue);
+              nextValue.setFullYear(
+                newValue.getFullYear(),
+                newValue.getMonth(),
+                newValue.getDate(),
+              );
+              onChange(nextValue.toISOString());
+            }}
+            onValidate={({ validationType, value: inputValue }) => {
+              if (validationType === 'formatError' && inputValue === '') {
+                onChange(null);
+              } else if (validationType !== 'valid') {
+                onInvalidDate?.(inputValue);
+              }
+            }}
+            inputProps={{ autoFocus, inputRef: dateInputRef }}
+            readOnly={readOnly}
+            status={invalid ? 'error' : undefined}
+            placeholderText={datePlaceholder}
+            width="100%"
+            dataHook={DATE_INPUT_DATA_HOOK}
+          />
+        </Cell>
+        <Cell span={6}>
+          <TimeInput
+            value={value ?? null}
+            onChange={({ date: newValue }) => {
+              if (!newValue) {
+                onChange(null);
+                return;
+              }
+
+              const nextValue = value ? new Date(value) : new Date(newValue);
+              nextValue.setHours(newValue.getHours());
+              nextValue.setMinutes(newValue.getMinutes());
+              nextValue.setSeconds(newValue.getSeconds());
+              nextValue.setMilliseconds(newValue.getMilliseconds());
+              onChange(nextValue.toISOString());
+            }}
+            onInvalid={onInvalidTime}
+            inputRef={timeInputRef}
+            readOnly={readOnly}
+            status={invalid ? 'error' : undefined}
+            invalidMessage={timeInvalidMessage}
+            placeholder={timePlaceholder}
+            locale={i18n.language as TimeInputProps['locale']}
+            width="100%"
+            dataHook={TIME_INPUT_DATA_HOOK}
+          />
+        </Cell>
+      </Layout>
+    </div>
+  );
+};
+
+ControlledDateTimeInput.displayName = 'ControlledDateTimeInput';
+
+export const DateTimeInput = ControlledDateTimeInput;

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

@@ -1 +1,2 @@
 export * from './form-date-time';
+export * from './date-time-input';

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "deletedialog2543974984";
+var _namespace_ = "deletedialog1094858976";
 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":"deletedialog2543974984__root","layout":"deletedialog2543974984__layout"};
+export var classes = {"root":"deletedialog1094858976__root","layout":"deletedialog1094858976__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_ = "formdocumentfield3942593150";
+var _namespace_ = "formdocumentfield2922614934";
 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":"formdocumentfield3942593150__root","viewWrapper":"formdocumentfield3942593150__viewWrapper","textWidth":"formdocumentfield3942593150__textWidth","documentLoader":"formdocumentfield3942593150__documentLoader","addDocument":"formdocumentfield3942593150__addDocument","addItemWrapper":"formdocumentfield3942593150__addItemWrapper"};
+export var classes = {"root":"formdocumentfield2922614934__root","viewWrapper":"formdocumentfield2922614934__viewWrapper","textWidth":"formdocumentfield2922614934__textWidth","documentLoader":"formdocumentfield2922614934__documentLoader","addDocument":"formdocumentfield2922614934__addDocument","addItemWrapper":"formdocumentfield2922614934__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_ = "exclamation93645059";
+var _namespace_ = "exclamation783678966";
 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":"exclamation93645059__root","exclamation":"exclamation93645059__exclamation","actions":"exclamation93645059__actions","action":"exclamation93645059__action"};
+export var classes = {"root":"exclamation783678966__root","exclamation":"exclamation783678966__exclamation","actions":"exclamation783678966__actions","action":"exclamation783678966__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_ = "highlightedtext443633919";
+var _namespace_ = "highlightedtext554123618";
 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":"highlightedtext443633919__root","substring":"highlightedtext443633919__substring"};
-export var keyframes = {"highlighted":"highlightedtext443633919__highlighted","highlighted-match":"highlightedtext443633919__highlighted-match"}; 
+export var classes = {"root":"highlightedtext554123618__root","substring":"highlightedtext554123618__substring"};
+export var keyframes = {"highlighted":"highlightedtext554123618__highlighted","highlighted-match":"highlightedtext554123618__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_ = "thumbnailreplaceoverlay256676927";
+var _namespace_ = "thumbnailreplaceoverlay2167647921";
 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":"thumbnailreplaceoverlay256676927__root","icon":"thumbnailreplaceoverlay256676927__icon"};
+export var classes = {"root":"thumbnailreplaceoverlay2167647921__root","icon":"thumbnailreplaceoverlay2167647921__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_ = "cellmediaeditshell4155159438";
+var _namespace_ = "cellmediaeditshell1926219709";
 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":"cellmediaeditshell4155159438__root"};
+export var classes = {"root":"cellmediaeditshell1926219709__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_ = "pasteurlbutton2773123813";
+var _namespace_ = "pasteurlbutton273961580";
 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":"pasteurlbutton2773123813__root","iconButtonTooltip":"pasteurlbutton2773123813__iconButtonTooltip","iconButton":"pasteurlbutton2773123813__iconButton"};
+export var classes = {"root":"pasteurlbutton273961580__root","iconButtonTooltip":"pasteurlbutton273961580__iconButtonTooltip","iconButton":"pasteurlbutton273961580__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_ = "formmediagalleryfield1193756263";
+var _namespace_ = "formmediagalleryfield3708660909";
 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":"formmediagalleryfield1193756263__root","container":"formmediagalleryfield1193756263__container","viewBox":"formmediagalleryfield1193756263__viewBox","addItemWrapper":"formmediagalleryfield1193756263__addItemWrapper","addItem":"formmediagalleryfield1193756263__addItem","overlay":"formmediagalleryfield1193756263__overlay","image":"formmediagalleryfield1193756263__image","previewImage":"formmediagalleryfield1193756263__previewImage","previewVideo":"formmediagalleryfield1193756263__previewVideo"};
+export var classes = {"root":"formmediagalleryfield3708660909__root","container":"formmediagalleryfield3708660909__container","viewBox":"formmediagalleryfield3708660909__viewBox","addItemWrapper":"formmediagalleryfield3708660909__addItemWrapper","addItem":"formmediagalleryfield3708660909__addItem","overlay":"formmediagalleryfield3708660909__overlay","image":"formmediagalleryfield3708660909__image","previewImage":"formmediagalleryfield3708660909__previewImage","previewVideo":"formmediagalleryfield3708660909__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_ = "mediaimage3759441515";
+var _namespace_ = "mediaimage261599455";
 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":"mediaimage3759441515__root"};
+export var classes = {"root":"mediaimage261599455__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":"--mediaimage3759441515-from","to":"--mediaimage3759441515-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":"--mediaimage261599455-from","to":"--mediaimage261599455-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_ = "overlay4284987991";
+var _namespace_ = "overlay1850441246";
 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":"overlay4284987991__root","iconOverlay":"overlay4284987991__iconOverlay"};
+export var classes = {"root":"overlay1850441246__root","iconOverlay":"overlay1850441246__iconOverlay"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "medialoader1179098921";
+var _namespace_ = "medialoader529284598";
 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":"medialoader1179098921__root","loader":"medialoader1179098921__loader"};
+export var classes = {"root":"medialoader529284598__root","loader":"medialoader529284598__loader"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/media-tag/web-media-tag/media-tag.st.css.ts

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellmultidocumentedit3271635599";
+var _namespace_ = "cellmultidocumentedit3275062389";
 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":"cellmultidocumentedit3271635599__root","chipTrigger":"cellmultidocumentedit3271635599__chipTrigger"};
+export var classes = {"root":"cellmultidocumentedit3275062389__root","chipTrigger":"cellmultidocumentedit3275062389__chipTrigger"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/multi-document/multi-document-input/form-multi-document.st.css.ts

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../../stylable-esm-runtime.js"
 
 
 
-var _namespace_ = "formmultidocument1614247919";
+var _namespace_ = "formmultidocument2139057341";
 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":"formmultidocument1614247919__root","viewRoot":"formmultidocument1614247919__viewRoot","singleViewWrapper":"formmultidocument1614247919__singleViewWrapper","addDocumentButton":"formmultidocument1614247919__addDocumentButton"};
+export var classes = {"root":"formmultidocument2139057341__root","viewRoot":"formmultidocument2139057341__viewRoot","singleViewWrapper":"formmultidocument2139057341__singleViewWrapper","addDocumentButton":"formmultidocument2139057341__addDocumentButton"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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

@@ -10,7 +10,7 @@ export interface FormNumberInputProps
   onInvalid?(value: string): void;
 }
 
-export const FormNumberInput: React.FC<FormNumberInputProps> = ({
+export const ControlledNumberInput: React.FC<FormNumberInputProps> = ({
   data,
   onChange,
   onBlur,
@@ -34,4 +34,6 @@ export const FormNumberInput: React.FC<FormNumberInputProps> = ({
   />
 );
 
-FormNumberInput.displayName = 'FormNumberInput';
+ControlledNumberInput.displayName = 'ControlledNumberInput';
+
+export const FormNumberInput = ControlledNumberInput;

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

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

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

@@ -5,7 +5,7 @@ import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
 
 
 
-var _namespace_ = "cellreferenceinput1547807768";
+var _namespace_ = "cellreferenceinput3436803696";
 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":"cellreferenceinput1547807768__root","autocomplete":"cellreferenceinput1547807768__autocomplete"};
+export var classes = {"root":"cellreferenceinput3436803696__root","autocomplete":"cellreferenceinput3436803696__autocomplete"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

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_ = "richcontentdefaultvalueinput1248798382";
+var _namespace_ = "richcontentdefaultvalueinput2759942484";
 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":"richcontentdefaultvalueinput1248798382__root","richContentEditorContainer":"richcontentdefaultvalueinput1248798382__richContentEditorContainer","editor":"richcontentdefaultvalueinput1248798382__editor"};
+export var classes = {"root":"richcontentdefaultvalueinput2759942484__root","richContentEditorContainer":"richcontentdefaultvalueinput2759942484__richContentEditorContainer","editor":"richcontentdefaultvalueinput2759942484__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};

package/src/components/rich-content/rich-content-input/default-value-input/rich-content-default-value-input.tsx

@@ -1,5 +1,5 @@
 import type { FC } from 'react';
-import React from 'react';
+import React, { useCallback } from 'react';
 
 import type { RichContent } from '@wix/patterns-fields-utils/@wix/patterns-fields-bundled-ricos';
 
@@ -13,7 +13,9 @@ import { classes as formInputClasses } from '../form-input/rich-content-form-inp
 import { classes } from './rich-content-default-value-input.st.css.js';
 
 export type RichContentDefaultValueInputProps = FormInputProps<RichContent> &
-  RichContentInputProps;
+  RichContentInputProps & {
+    onBlur?(): void;
+  };
 
 export const RichContentDefaultValueInput: FC<
   RichContentDefaultValueInputProps
@@ -25,6 +27,9 @@ export const RichContentDefaultValueInput: FC<
   theme,
   colorScheme,
   dataHook,
+  autoFocus: autoFocusDefault,
+  invalid,
+  onBlur,
 }) => {
   const {
     localValue,
@@ -39,13 +44,19 @@ export const RichContentDefaultValueInput: FC<
     data,
     onChange,
     onCustomEvent,
+    autoFocusDefault,
   });
 
   const biSettings = useRicosBISettings('defaultValueModal');
+  const handleBlur = useCallback(() => {
+    triggerOnChange();
+    onBlur?.();
+  }, [onBlur, triggerOnChange]);
 
   return (
     <div
       data-hook="rich-content.input"
+      aria-invalid={invalid || undefined}
       className={classes.richContentEditorContainer}
     >
       <RichContentEditor
@@ -54,7 +65,7 @@ export const RichContentDefaultValueInput: FC<
         autoFocus={autoFocus}
         onEnterFullScreen={onEnterFullScreen}
         onExitFullScreen={onExitFullScreen}
-        onBlur={triggerOnChange}
+        onBlur={handleBlur}
         content={localValue}
         injectedContent={injectedValue}
         onChange={handleOnChange}

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_ = "richcontentforminput1237143093";
+var _namespace_ = "richcontentforminput3101278271";
 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":"richcontentforminput1237143093__root","editor":"richcontentforminput1237143093__editor"};
+export var classes = {"root":"richcontentforminput3101278271__root","editor":"richcontentforminput3101278271__editor"};
 export var keyframes = {}; 
 export var layers = {};
 export var containers = {};