@wix/editor-react-components 1.2884.0 → 1.2886.0

package/dist/site/components/{TextInput → TextField}/component.js

@@ -178,12 +178,12 @@ const $bcdf0525bf22703d$export$2c73285ae9390cec = /* @__PURE__ */ $f39a9eba43920
     ]
   }, renderProps.children));
 });
-const root = "root__zQlRz";
-const inputWrapper = "inputWrapper__2KDrH";
-const input = "input__fyTfx";
-const label = "label__mbGIM";
-const helperText = "helperText__SfMAH";
-const errorMessage = "errorMessage__4XDzv";
+const root = "root__Y9X01";
+const inputWrapper = "inputWrapper__V6hJ5";
+const input = "input__vXtLV";
+const label = "label__8LasD";
+const helperText = "helperText__9ngR5";
+const errorMessage = "errorMessage__42dH-";
 const style = {
   root,
   inputWrapper,
@@ -194,7 +194,7 @@ const style = {
 };
 const noop = () => {
 };
-const TextInput = (props) => {
+const TextField2 = (props) => {
   var _a, _b, _c, _d;
   const {
     id,
@@ -328,5 +328,5 @@ const TextInput = (props) => {
   );
 };
 export {
-  TextInput as default
+  TextField2 as default
 };

package/dist/site/components/TextField/component.preview.d.ts

@@ -0,0 +1 @@
+export { default } from './TextField';

package/dist/site/components/{TextInput → TextField}/constants.d.ts

@@ -1,9 +1,9 @@
 export declare const componentClassNames: {
-    readonly root: "text-input";
-    readonly label: "text-input-label";
-    readonly input: "text-input-input";
-    readonly helperText: "text-input-helper";
-    readonly errorMessage: "text-input-error-message";
+    readonly root: "text-field";
+    readonly label: "text-field-label";
+    readonly input: "text-field-input";
+    readonly helperText: "text-field-helper";
+    readonly errorMessage: "text-field-error-message";
 };
 export declare const FunctionalStateKeys: {
     readonly previewError: "previewError";
@@ -12,19 +12,19 @@ export declare const DesignStates: {
     readonly input: {
         readonly hover: {
             readonly displayName: "Hover";
-            readonly className: "textInput__input--hover";
+            readonly className: "textField__input--hover";
         };
         readonly focus: {
             readonly displayName: "Focus";
-            readonly className: "textInput__input--focus";
+            readonly className: "textField__input--focus";
         };
         readonly error: {
             readonly displayName: "Error";
-            readonly className: "textInput__input--error";
+            readonly className: "textField__input--error";
         };
         readonly disabled: {
             readonly displayName: "Disabled";
-            readonly className: "textInput__input--disabled";
+            readonly className: "textField__input--disabled";
         };
     };
 };

package/dist/site/components/{TextInput → TextField}/css.css

@@ -1,14 +1,14 @@
-.root__zQlRz {
+.root__Y9X01 {
   display: flex;
   flex-direction: column;
   min-width: max-content !important;
 }
-.root__zQlRz .inputWrapper__2KDrH {
+.root__Y9X01 .inputWrapper__V6hJ5 {
   flex: 1;
   display: flex;
   position: relative;
 }
-.root__zQlRz .input__fyTfx {
+.root__Y9X01 .input__vXtLV {
   appearance: none;
   border-style: solid;
   box-sizing: content-box !important;
@@ -18,22 +18,22 @@
   flex: 1;
   text-overflow: ellipsis;
 }
-.root__zQlRz .input__fyTfx::placeholder {
+.root__Y9X01 .input__vXtLV::placeholder {
   color: var(--placeholderTextColor);
   opacity: 1;
 }
-.root__zQlRz .input__fyTfx:disabled, .root__zQlRz .input__fyTfx.textInput__input--disabled {
+.root__Y9X01 .input__vXtLV:disabled, .root__Y9X01 .input__vXtLV.textField__input--disabled {
   cursor: not-allowed;
 }
-.root__zQlRz .label__mbGIM,
-.root__zQlRz .helperText__SfMAH,
-.root__zQlRz .errorMessage__4XDzv {
+.root__Y9X01 .label__8LasD,
+.root__Y9X01 .helperText__9ngR5,
+.root__Y9X01 .errorMessage__42dH- {
   display: block;
   contain: inline-size;
   overflow-wrap: anywhere;
 }
-.root__zQlRz .helperText__SfMAH,
-.root__zQlRz .errorMessage__4XDzv {
+.root__Y9X01 .helperText__9ngR5,
+.root__Y9X01 .errorMessage__42dH- {
   margin-inline: 0;
   margin-bottom: 0;
 }

package/dist/site/components/TextField/index.d.ts

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as TextField } from './component';

package/dist/site/components/TextField/index.js

@@ -0,0 +1,6 @@
+'use client';
+
+import TextField from './component.js';
+
+export { TextField };
+export default TextField;

package/dist/site/components/{TextInput → TextField}/manifest.js

@@ -8,11 +8,11 @@ const designState = (s, pseudoClass) => ({
   ...pseudoClass ? { pseudoClass } : {}
 });
 const manifest = {
-  id: "e4b0ddb2-7550-46ef-bdc9-8d72d7e8519b",
-  type: "wixEditorElements.TextInput__DEV__v6",
-  description: "TextInput",
+  id: "f1b7ccea-ee58-4f52-a1f8-bdb036749bd7",
+  type: "wixEditorElements.TextField",
+  description: "TextField",
   installation: {
-    presets: { small: "baseTextInput", large: "baseTextInput" },
+    presets: { small: "baseTextField", large: "baseTextField" },
     initialSize: {
       width: {
         sizingType: LAYOUT.SIZING_TYPE.pixels,
@@ -25,7 +25,8 @@ const manifest = {
   },
   resources: {
     client: {
-      componentUrl: "./site/components/TextInput/component.tsx",
+      componentUrl: "./site/components/TextField/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/TextField",
       dependencies: {
         serviceDependencies: [
           "@wix/site-service-locale",
@@ -34,7 +35,7 @@ const manifest = {
       }
     },
     editor: {
-      componentUrl: "./site/components/TextInput/component.preview.tsx",
+      componentUrl: "./site/components/TextField/component.preview.tsx",
       dependencies: {
         serviceDependencies: [
           "@wix/site-service-locale",
@@ -48,9 +49,9 @@ const manifest = {
     displayName: DisplayNames.root.elementDisplayName,
     archetype: Archetype.TextInput,
     presets: {
-      baseTextInput: {
-        displayName: "Base Text Input",
-        presetCssUrl: "./site/components/TextInput/presets/baseTextInput.css",
+      baseTextField: {
+        displayName: "Base Text Field",
+        presetCssUrl: "./site/components/TextField/presets/baseTextField.css",
         presetDefaults: {
           elements: {
             input: {
@@ -365,8 +366,8 @@ const manifest = {
   },
   moduleConfiguration: {
     package: { name: "@wix/editor-react-components", version: "^1.0.0" },
-    component: { path: "TextInput" },
-    cssFile: { path: "TextInput/css" }
+    component: { path: "TextField" },
+    cssFile: { path: "TextField/css" }
   }
 };
 export {

package/dist/site/components/TimePicker/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const COMPONENT_TYPE = "wixEditorElements.TimePicker__DEV__v8";
+export declare const COMPONENT_TYPE = "wixEditorElements.TimePicker";
 export declare const DisplayNames: {
     root: {
         elementDisplayName: string;

package/dist/site/components/TimePicker/manifest.js

@@ -5,7 +5,7 @@ import { m as manifestKeyboard, a as manifestFocusable } from "../chunks/manifes
 const basePresetName = "baseTimePicker";
 const keyboardEvents = manifestKeyboard();
 const manifest = {
-  id: "bf0b381a-2eb3-46bc-b76f-0ea73689a67a",
+  id: "18ff7012-495d-4ce2-a1e5-d28eda545f41",
   type: COMPONENT_TYPE,
   description: Descriptions.component,
   installation: {
@@ -359,6 +359,7 @@ const manifest = {
   resources: {
     client: {
       componentUrl: "./site/components/TimePicker/component.tsx",
+      moduleSpecifier: "@wix/editor-react-components/TimePicker",
       dependencies: {
         serviceDependencies: [
           "@wix/site-service-locale",

package/dist/site/components/chunks/constants2.js

@@ -1,4 +1,4 @@
-const COMPONENT_TYPE = "wixEditorElements.TimePicker__DEV__v8";
+const COMPONENT_TYPE = "wixEditorElements.TimePicker";
 const DisplayNames = {
   root: {
     elementDisplayName: "Time Picker",

package/dist/site/components/chunks/constants3.js

@@ -1,27 +1,27 @@
 const componentClassNames = {
-  root: "text-input",
-  label: "text-input-label",
-  input: "text-input-input",
-  helperText: "text-input-helper",
-  errorMessage: "text-input-error-message"
+  root: "text-field",
+  label: "text-field-label",
+  input: "text-field-input",
+  helperText: "text-field-helper",
+  errorMessage: "text-field-error-message"
 };
 const FunctionalStateKeys = {
   previewError: "previewError"
 };
 const DesignStates = {
   input: {
-    hover: { displayName: "Hover", className: "textInput__input--hover" },
-    focus: { displayName: "Focus", className: "textInput__input--focus" },
-    error: { displayName: "Error", className: "textInput__input--error" },
+    hover: { displayName: "Hover", className: "textField__input--hover" },
+    focus: { displayName: "Focus", className: "textField__input--focus" },
+    error: { displayName: "Error", className: "textField__input--error" },
     disabled: {
       displayName: "Disabled",
-      className: "textInput__input--disabled"
+      className: "textField__input--disabled"
     }
   }
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "TextInput",
+    elementDisplayName: "TextField",
     elements: {
       label: "Label",
       input: "Input",

package/dist/site/components/chunks/constants36.js

@@ -1,97 +1,165 @@
-const COMPONENT_TYPE = "wixEditorElements.Dropdown__DEV__v6";
-const DesignStates = {
-  input: {
-    hover: { displayName: "Hover", className: "dropdown__input--hover" },
-    focus: { displayName: "Focus", className: "dropdown__input--focus" },
-    error: { displayName: "Error", className: "dropdown__input--error" },
-    disabled: {
-      displayName: "Disabled",
-      className: "dropdown__input--disabled"
-    }
-  },
-  option: {
-    hover: { displayName: "Hover", className: "dropdown__option--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__option--selected"
-    }
-  }
-};
-const FunctionalStateKeys = {
-  previewList: "previewList",
-  previewError: "previewError"
-};
+const COMPONENT_TYPE = "wixEditorElements.DatePicker";
 const DisplayNames = {
   root: {
-    elementDisplayName: "Dropdown",
+    elementDisplayName: "Date Picker",
     data: {
-      options: "Options",
-      optionLabel: "Label",
-      optionValue: "Value",
-      value: "Selected value",
-      disabled: "Disabled",
-      placeholder: "Placeholder",
+      value: "Selected date",
+      onValueChange: "On Value Change",
+      onOpenChange: "On Open Change",
+      onKeyDown: "On Key Down",
+      onKeyUp: "On Key Up",
       label: "Label",
-      readOnly: "Read only",
       helperText: "Helper text",
-      errorMessage: "Error message"
+      errorMessage: "Error message",
+      readOnly: "Read only",
+      disabled: "Disabled"
     },
-    // Tooltip copy for the Design panel's info icon on these data props —
-    // https://wix.slack.com/archives/C0BBFFEG6HL/p1791456026776399
-    descriptions: {
-      value: "This field's current value. Connect it to your context to save the data your visitors provide. A value typed in this panel stays fixed.",
-      helperText: "A hint shown under this field, like a format example. It's always visible, so keep it short.",
-      errorMessage: "The message shown when this field is invalid. Connect it to your context so it appears only when something's wrong. A message typed in this panel always shows."
+    presets: {
+      baseDatePicker: "Base Date Picker"
     },
-    cssCustomProperties: {
-      placeholderColor: "Placeholder color",
-      optionsGap: "Space between options"
+    designStates: {
+      hover: "Hover",
+      focus: "Focus",
+      disabled: "Disabled",
+      error: "Error",
+      selected: "Selected",
+      today: "Today"
     },
     elements: {
       label: "Label",
-      input: "Input",
-      list: "List",
-      option: "Option",
       helperText: "Helper text",
-      errorMessage: "Error message"
+      errorMessage: "Error message",
+      dateInput: "Date input",
+      calendarButton: "Calendar button",
+      popover: "Popover",
+      calendarHeader: "Calendar header",
+      weekdays: "Weekdays",
+      dates: "Dates"
+    }
+  }
+};
+const Descriptions = {
+  root: {
+    data: {
+      value: "This field's current value. Connect it to your context to save the data your visitors provide. A value typed in this panel stays fixed.",
+      helperText: "A hint shown under this field, like a format example. It's always visible, so keep it short.",
+      errorMessage: "The message shown when this field is invalid. Connect it to your context so it appears only when something's wrong. A message typed in this panel always shows.",
+      onKeyDown: "Fires before the date picker handles the key, also while the calendar is open. preventDefault() cancels that handling. Cancelling Escape or Tab can trap keyboard focus. Cancelling arrows, Page Up/Down, Home, End, Backspace, Delete or digits stops visitors editing the date by keyboard.",
+      onKeyUp: "Fires when a key is released, including while the calendar is open. It only reports the key: calling preventDefault() doesn't change how the date picker responds."
+    }
+  }
+};
+const defaultValues = {
+  label: "",
+  helperText: "",
+  readOnly: false,
+  disabled: false
+};
+const DesignStates = {
+  root: {
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "datePicker--disabled"
+    }
+  },
+  dateInput: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "datePicker__date-input--hover"
     },
-    presets: {
-      baseDropdown: "Base Dropdown"
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "datePicker__date-input--focus"
+    },
+    error: {
+      displayName: DisplayNames.root.designStates.error,
+      className: "datePicker__date-input--error"
+    },
+    disabled: {
+      displayName: DisplayNames.root.designStates.disabled,
+      className: "datePicker__date-input--disabled"
+    }
+  },
+  calendarButton: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "datePicker__calendar-button--hover"
+    },
+    selected: {
+      displayName: DisplayNames.root.designStates.selected,
+      className: "datePicker__calendar-button--selected"
     },
-    displayGroups: {
-      optionsGroup: "Manage options"
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "datePicker__calendar-button--focus"
+    }
+  },
+  dates: {
+    hover: {
+      displayName: DisplayNames.root.designStates.hover,
+      className: "datePicker__date--hover"
+    },
+    selected: {
+      displayName: DisplayNames.root.designStates.selected,
+      className: "datePicker__date--selected"
+    },
+    today: {
+      displayName: DisplayNames.root.designStates.today,
+      className: "datePicker__date--today"
+    },
+    focus: {
+      displayName: DisplayNames.root.designStates.focus,
+      className: "datePicker__date--focus"
     }
   }
 };
-const TestIds = {
-  root: "dropdown-root",
-  label: "dropdown-label",
-  input: "dropdown-input",
-  list: "dropdown-list",
-  helperText: "dropdown-helper-text",
-  errorMessage: "dropdown-error-message"
-};
-const editorElementClassNames = {
-  root: "dropdown",
-  label: "dropdown-label",
-  input: "dropdown-input",
-  list: "dropdown-list",
-  option: "dropdown-option",
-  helperText: "dropdown-helper-text",
-  errorMessage: "dropdown-error-message"
+const FunctionalStateKeys = {
+  previewCalendarOpen: "previewCalendarOpen",
+  previewError: "previewError"
 };
+const ARIA_LABEL_NAMESPACE = "ariaLabels";
 const AriaLabels = {
   root: {
-    legacyKey: "Dropdown_AriaLabel",
-    default: "Dropdown"
+    legacyKey: "datePicker_aria_label",
+    default: "Date picker"
+  },
+  openCalendar: {
+    legacyKey: "datePicker_open_calendar",
+    default: "Open calendar"
   }
 };
+const TestIds = {
+  root: "datepicker-root",
+  group: "datepicker-group",
+  field: "datepicker-field",
+  calendarButton: "datepicker-calendar-button",
+  calendar: "datepicker-calendar",
+  helperText: "datepicker-helper-text",
+  errorMessage: "datepicker-error-message"
+};
+const selectors = {
+  root: "datePicker",
+  label: "datePicker__label",
+  helperText: "datePicker__helper-text",
+  dateInput: "datePicker__date-input",
+  segment: "datePicker__segment",
+  calendarButton: "datePicker__calendar-button",
+  popover: "datePicker__popover",
+  calendarHeader: "datePicker__calendar-header",
+  navButton: "datePicker__nav-button",
+  weekday: "datePicker__weekday",
+  date: "datePicker__date",
+  errorMessage: "datePicker__error-message"
+};
 export {
-  AriaLabels as A,
+  ARIA_LABEL_NAMESPACE as A,
   COMPONENT_TYPE as C,
   DesignStates as D,
   FunctionalStateKeys as F,
   TestIds as T,
-  DisplayNames as a,
-  editorElementClassNames as e
+  AriaLabels as a,
+  DisplayNames as b,
+  Descriptions as c,
+  defaultValues as d,
+  selectors as s
 };