@wix/editor-react-components 1.2764.0 → 1.2766.0

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

@@ -1,16 +1,14 @@
-const selectors = {
-  root: "textInput",
-  label: "textInput__label",
-  input: "textInput__input",
-  prefix: "textInput__prefix",
-  helperText: "textInput__helper",
-  requiredIndicator: "textInput__required-indicator"
+const componentClassNames = {
+  root: "text-input",
+  label: "text-input-label",
+  input: "text-input-input",
+  helperText: "text-input-helper",
+  errorMessage: "text-input-error-message"
 };
-const TestIds = {
-  requiredIndicator: "text-input-required-indicator",
-  tooltipButton: "text-input-tooltip-button"
+const FunctionalStateKeys = {
+  previewError: "previewError"
 };
-const VALUE_MISSING_MESSAGE = "This field is required";
+const ERROR_MESSAGE_PREVIEW_TEXT = "Error message";
 const DesignStates = {
   input: {
     hover: { displayName: "Hover", className: "textInput__input--hover" },
@@ -28,70 +26,32 @@ const DisplayNames = {
     elements: {
       label: "Label",
       input: "Input",
-      prefix: "Prefix",
-      helperText: "Helper text"
+      helperText: "Helper text",
+      errorMessage: "Error message"
     }
   },
   cssCustomProperties: {
-    helperFont: "Helper text font",
-    helperColor: "Helper text color",
-    textColor: "Text color",
-    placeholderTextColor: "Placeholder text color",
-    requiredTextColor: "Required text color",
-    prefixFont: "Prefix font",
-    labelFont: "Label font",
-    labelTextColor: "Label text color",
-    labelMarginBottom: "Label bottom margin",
-    labelPaddingInlineStart: "Label left padding",
-    labelPaddingInlineEnd: "Label right padding",
-    labelAlign: "Label alignment",
-    inputAlign: "Input alignment"
+    placeholderTextColor: "Placeholder text color"
   },
   data: {
     value: "Value",
-    defaultValue: "Default value",
-    isDisabled: "Disabled",
-    name: "Name",
-    minLength: "Minimum length",
-    autocompleteToken: "Autocomplete type",
-    numberSpinnerHidden: "Hide number spinner",
-    labelDirection: "Label direction",
-    inputDirection: "Input direction",
-    inputType: "Input type",
-    maxLength: "Maximum length",
-    min: "Minimum value",
-    max: "Maximum value",
-    pattern: "Pattern validation",
-    phoneFormat: "Phone format",
+    disabled: "Disabled",
     label: "Label text",
     placeholder: "Placeholder text",
-    tooltip: "Tooltip",
-    description: "Helper text",
-    autoComplete: "Autocomplete",
-    readOnly: "Read only",
-    required: "Required",
-    errorMessageType: "Error message format",
-    prefix: "Prefix",
-    step: "Step"
+    helperText: "Helper text",
+    errorMessage: "Error message",
+    readOnly: "Read only"
   },
-  options: {
-    text: "Text",
-    number: "Number",
-    email: "Email",
-    url: "URL",
-    tel: "Phone number",
-    password: "Password",
-    center: "Center",
-    start: "Left",
-    end: "Right",
-    inline: "Inline",
-    tooltip: "Tooltip"
+  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.",
+    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.",
+    helperText: "A hint shown under this field, like a format example. It's always visible, so keep it short."
   }
 };
 export {
   DesignStates as D,
-  TestIds as T,
-  VALUE_MISSING_MESSAGE as V,
+  ERROR_MESSAGE_PREVIEW_TEXT as E,
+  FunctionalStateKeys as F,
   DisplayNames as a,
-  selectors as s
+  componentClassNames as c
 };

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

@@ -1,48 +1,25 @@
+const TEXT_PROP_STATIC_VALUE_MAX_LENGTH = 400;
 const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "dropdown--hover" },
-    disabled: { displayName: "Disabled", className: "dropdown--disabled" }
-  },
   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"
     }
   },
-  trigger: {
-    hover: { displayName: "Hover", className: "dropdown__trigger--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__trigger--selected"
-    }
-  },
-  clearButton: {
-    hover: { displayName: "Hover", className: "dropdown__clear--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__clear--selected"
-    }
-  },
   option: {
     hover: { displayName: "Hover", className: "dropdown__option--hover" },
     selected: {
       displayName: "Selected",
       className: "dropdown__option--selected"
     }
-  },
-  chip: {
-    hover: { displayName: "Hover", className: "dropdown__chip--hover" },
-    selected: {
-      displayName: "Selected",
-      className: "dropdown__chip--selected"
-    }
   }
 };
 const FunctionalStateKeys = {
   previewList: "previewList",
-  previewChips: "previewChips"
+  previewError: "previewError"
 };
 const DisplayNames = {
   root: {
@@ -52,160 +29,66 @@ const DisplayNames = {
       optionLabel: "Label",
       optionValue: "Value",
       value: "Selected value",
-      values: "Selected values",
-      defaultValue: "Default value",
-      defaultValues: "Default values",
-      inputValue: "Search query",
-      open: "Open",
-      isDisabled: "Disabled",
+      disabled: "Disabled",
       placeholder: "Placeholder",
-      searchable: "Allow search",
-      multiple: "Allow multiple selection",
-      clearable: "Show clear button",
-      autoHighlight: "Highlight first match",
-      openOnInputClick: "Open list on click",
-      inline: "Show options inline",
-      grid: "Show options in a grid",
-      columns: "Columns",
-      limit: "Max visible options",
       label: "Label",
-      required: "Required",
       readOnly: "Read only",
-      description: "Helper text",
-      triggerMode: {
-        displayName: "Apply filter",
-        options: {
-          onSelection: "On selection",
-          onApply: "On button click"
-        }
-      },
-      applyButtonLabel: "Apply button text"
+      helperText: "Helper text",
+      errorMessage: "Error message"
+    },
+    // 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."
     },
     cssCustomProperties: {
-      width: "Width",
-      maxWidth: "Max width",
-      backgroundColor: "Background",
-      borderColor: "Border color",
-      borderWidth: "Border width",
-      paddingTop: "Padding top",
-      paddingBottom: "Padding bottom",
-      paddingInlineStart: "Padding start",
-      paddingInlineEnd: "Padding end",
-      gap: "Spacing",
-      boxShadow: "Shadow",
-      textAlign: "Value alignment",
-      font: "Value font",
-      textColor: "Value color",
-      labelFont: "Label font",
-      labelColor: "Label color",
-      helperFont: "Helper text font",
-      helperColor: "Helper text color",
-      optionTextColor: "Option text color",
-      optionHoverBackgroundColor: "Option hover background",
       placeholderColor: "Placeholder color",
-      chipBackgroundColor: "Chip background",
-      chipTextColor: "Chip text color"
+      optionsGap: "Space between options"
     },
     elements: {
       label: "Label",
       input: "Input",
-      trigger: "Button",
-      clearButton: "Clear button",
       list: "List",
       option: "Option",
-      chip: "Chip"
+      helperText: "Helper text",
+      errorMessage: "Error message"
+    },
+    presets: {
+      baseDropdown: "Base Dropdown"
     },
     displayGroups: {
-      optionsGroup: "Manage options",
-      sizeGroup: "Size",
-      backgroundGroup: "Background",
-      cornersGroup: "Corner radius",
-      paddingGroup: "Padding"
+      optionsGroup: "Manage options"
     }
   }
 };
-const defaultValues = {
-  placeholder: "Select a value",
-  inputValue: "",
-  open: false,
-  isDisabled: false,
-  searchable: false,
-  multiple: false,
-  clearable: false,
-  autoHighlight: false,
-  openOnInputClick: true,
-  inline: false,
-  grid: false,
-  columns: 2,
-  limit: -1,
-  label: "",
-  required: false,
-  readOnly: false,
-  name: "",
-  description: "",
-  triggerMode: "onSelection",
-  applyButtonLabel: "Apply",
-  noResultsText: "No results"
-};
-var TriggerModeValues = /* @__PURE__ */ ((TriggerModeValues2) => {
-  TriggerModeValues2["OnSelection"] = "onSelection";
-  TriggerModeValues2["OnApply"] = "onApply";
-  return TriggerModeValues2;
-})(TriggerModeValues || {});
-const ALL_VALUE = "";
 const TestIds = {
   root: "dropdown-root",
   label: "dropdown-label",
-  requiredIndicator: "dropdown-required-indicator",
-  trigger: "dropdown-trigger",
-  listbox: "dropdown-listbox",
-  clear: "dropdown-clear",
-  applyButton: "dropdown-apply-button",
-  description: "dropdown-description",
+  input: "dropdown-input",
+  list: "dropdown-list",
+  helperText: "dropdown-helper-text",
   errorMessage: "dropdown-error-message"
 };
-const selectors = {
+const editorElementClassNames = {
   root: "dropdown",
   label: "dropdown-label",
   input: "dropdown-input",
-  trigger: "dropdown-trigger",
-  clear: "dropdown-clear",
   list: "dropdown-list",
   option: "dropdown-option",
-  chip: "dropdown-chip"
-};
-const semanticClassNames = {
-  root: "dropdown",
-  label: "dropdown__label",
-  requiredIndicator: "dropdown__required-indicator",
-  input: "dropdown__input",
-  trigger: "dropdown__trigger",
-  clear: "dropdown__clear",
-  listbox: "dropdown__listbox",
-  option: "dropdown__option",
-  chips: "dropdown__chips",
-  chip: "dropdown__chip",
-  applyButton: "dropdown__apply-button",
-  errorMessage: "dropdown__error-message"
+  helperText: "dropdown-helper-text",
+  errorMessage: "dropdown-error-message"
 };
-const ARIA_LABEL_NAMESPACE = "ariaLabels";
 const AriaLabels = {
-  root: { key: "Dropdown_AriaLabel", default: "Dropdown" },
-  clear: { key: "Dropdown_AriaLabel_Clear", default: "Clear" },
-  removeItem: { key: "Dropdown_AriaLabel_RemoveItem", default: "Remove" }
+  root: { key: "Dropdown_AriaLabel", default: "Dropdown" }
 };
-const VALUE_MISSING_MESSAGE = "Please select an option.";
 export {
-  ALL_VALUE as A,
+  AriaLabels as A,
   DesignStates as D,
   FunctionalStateKeys as F,
   TestIds as T,
-  VALUE_MISSING_MESSAGE as V,
-  semanticClassNames as a,
-  TriggerModeValues as b,
-  ARIA_LABEL_NAMESPACE as c,
-  defaultValues as d,
-  AriaLabels as e,
-  DisplayNames as f,
-  selectors as s
+  DisplayNames as a,
+  TEXT_PROP_STATIC_VALUE_MAX_LENGTH as b,
+  editorElementClassNames as e
 };

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

@@ -1,4 +1,4 @@
-import React__default, { useRef, useCallback, useMemo, useContext, useState, forwardRef, createContext, useEffect } from "react";
+import React__default, { useRef, useCallback, useMemo, useContext, useState, forwardRef, createContext } from "react";
 const $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof document !== "undefined" ? React__default.useLayoutEffect : () => {
 };
 let $bdb11010cef70236$export$d41a04c74483c6ef = /* @__PURE__ */ new Map();
@@ -396,125 +396,6 @@ function $f39a9eba43920ace$export$86427a43e3e48ebb(fn) {
 function $f39a9eba43920ace$export$b5d7cc18bb8d2b59() {
   return useContext($f39a9eba43920ace$export$94b6d0abf7d33e8c);
 }
-const $d805ff57cab8bee2$var$RTL_SCRIPTS = /* @__PURE__ */ new Set([
-  "Arab",
-  "Syrc",
-  "Samr",
-  "Mand",
-  "Thaa",
-  "Mend",
-  "Nkoo",
-  "Adlm",
-  "Rohg",
-  "Hebr"
-]);
-const $d805ff57cab8bee2$var$RTL_LANGS = /* @__PURE__ */ new Set([
-  "ae",
-  "ar",
-  "arc",
-  "bcc",
-  "bqi",
-  "ckb",
-  "dv",
-  "fa",
-  "glk",
-  "he",
-  "ku",
-  "mzn",
-  "nqo",
-  "pnb",
-  "ps",
-  "sd",
-  "ug",
-  "ur",
-  "yi"
-]);
-function $d805ff57cab8bee2$export$702d680b21cbd764(localeString) {
-  if (Intl.Locale) {
-    let locale = new Intl.Locale(localeString).maximize();
-    let textInfo = typeof locale.getTextInfo === "function" ? locale.getTextInfo() : locale.textInfo;
-    if (textInfo) return textInfo.direction === "rtl";
-    if (locale.script) return $d805ff57cab8bee2$var$RTL_SCRIPTS.has(locale.script);
-  }
-  let lang = localeString.split("-")[0];
-  return $d805ff57cab8bee2$var$RTL_LANGS.has(lang);
-}
-const $520a025cdb0d710d$var$localeSymbol = Symbol.for("react-aria.i18n.locale");
-function $520a025cdb0d710d$export$f09106e7c6677ec5() {
-  let locale = typeof window !== "undefined" && window[$520a025cdb0d710d$var$localeSymbol] || typeof navigator !== "undefined" && (navigator.language || navigator.userLanguage) || "en-US";
-  try {
-    Intl.DateTimeFormat.supportedLocalesOf([
-      locale
-    ]);
-  } catch {
-    locale = "en-US";
-  }
-  return {
-    locale,
-    direction: $d805ff57cab8bee2$export$702d680b21cbd764(locale) ? "rtl" : "ltr"
-  };
-}
-let $520a025cdb0d710d$var$currentLocale = $520a025cdb0d710d$export$f09106e7c6677ec5();
-let $520a025cdb0d710d$var$listeners = /* @__PURE__ */ new Set();
-function $520a025cdb0d710d$var$updateLocale() {
-  $520a025cdb0d710d$var$currentLocale = $520a025cdb0d710d$export$f09106e7c6677ec5();
-  for (let listener of $520a025cdb0d710d$var$listeners) listener($520a025cdb0d710d$var$currentLocale);
-}
-function $520a025cdb0d710d$export$188ec29ebc2bdc3a() {
-  let isSSR = $c7eafbbe1ea5834e$export$535bd6ca7f90a273();
-  let [defaultLocale, setDefaultLocale] = useState($520a025cdb0d710d$var$currentLocale);
-  useEffect(() => {
-    if ($520a025cdb0d710d$var$listeners.size === 0) window.addEventListener("languagechange", $520a025cdb0d710d$var$updateLocale);
-    $520a025cdb0d710d$var$listeners.add(setDefaultLocale);
-    return () => {
-      $520a025cdb0d710d$var$listeners.delete(setDefaultLocale);
-      if ($520a025cdb0d710d$var$listeners.size === 0) window.removeEventListener("languagechange", $520a025cdb0d710d$var$updateLocale);
-    };
-  }, []);
-  if (isSSR) {
-    let locale = typeof window !== "undefined" && window[$520a025cdb0d710d$var$localeSymbol];
-    return {
-      locale: locale || "en-US",
-      direction: "ltr"
-    };
-  }
-  return defaultLocale;
-}
-const $2eb8e6d23f3d0cb0$var$I18nContext = /* @__PURE__ */ React__default.createContext(null);
-function $2eb8e6d23f3d0cb0$var$I18nProviderWithLocale(props) {
-  let { locale, children } = props;
-  let value = React__default.useMemo(() => ({
-    locale,
-    direction: $d805ff57cab8bee2$export$702d680b21cbd764(locale) ? "rtl" : "ltr"
-  }), [
-    locale
-  ]);
-  return /* @__PURE__ */ React__default.createElement($2eb8e6d23f3d0cb0$var$I18nContext.Provider, {
-    value
-  }, children);
-}
-function $2eb8e6d23f3d0cb0$var$I18nProviderWithDefaultLocale(props) {
-  let { children } = props;
-  let defaultLocale = $520a025cdb0d710d$export$188ec29ebc2bdc3a();
-  return /* @__PURE__ */ React__default.createElement($2eb8e6d23f3d0cb0$var$I18nContext.Provider, {
-    value: defaultLocale
-  }, children);
-}
-function $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82(props) {
-  let { locale, children } = props;
-  if (locale) return /* @__PURE__ */ React__default.createElement($2eb8e6d23f3d0cb0$var$I18nProviderWithLocale, {
-    locale,
-    children
-  });
-  return /* @__PURE__ */ React__default.createElement($2eb8e6d23f3d0cb0$var$I18nProviderWithDefaultLocale, {
-    children
-  });
-}
-function $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7() {
-  let defaultLocale = $520a025cdb0d710d$export$188ec29ebc2bdc3a();
-  let context = useContext($2eb8e6d23f3d0cb0$var$I18nContext);
-  return context || defaultLocale;
-}
 const $8e9d2fae0ecb9001$var$DOMPropNames = /* @__PURE__ */ new Set([
   "id"
 ]);
@@ -584,23 +465,21 @@ function $8e9d2fae0ecb9001$export$457c3d6518dd4c6f(props, opts = {}) {
   return filteredProps;
 }
 export {
-  $2eb8e6d23f3d0cb0$export$a54013f0d02a8f82 as $,
-  $8e9d2fae0ecb9001$export$457c3d6518dd4c6f as a,
-  $f39a9eba43920ace$export$86427a43e3e48ebb as b,
-  $64fa3d84918910a7$export$29f1550f4b0d4415 as c,
-  $64fa3d84918910a7$export$fabf2dc03a41866e as d,
-  $64fa3d84918910a7$export$9d4c57ee4c6ffdd8 as e,
-  $64fa3d84918910a7$export$ef03459518577ad4 as f,
-  $64fa3d84918910a7$export$4d86445c2cf5e3 as g,
-  $65484d02dcb7eb3e$export$457c3d6518dd4c6f as h,
-  $64fa3d84918910a7$export$2881499e37b75b9a as i,
-  $c7eafbbe1ea5834e$export$619500959fc48b26 as j,
-  $2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7 as k,
-  $df56164dff5785e2$export$4338b53315abf666 as l,
-  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c as m,
-  $c7eafbbe1ea5834e$export$535bd6ca7f90a273 as n,
-  $f39a9eba43920ace$export$b5d7cc18bb8d2b59 as o,
-  $3ef42575df84b30b$export$9d1611c77c2fe928 as p,
-  $64fa3d84918910a7$export$c62b8e45d58ddad9 as q,
-  $f39a9eba43920ace$export$8dc98ba7eadeaa56 as r
+  $8e9d2fae0ecb9001$export$457c3d6518dd4c6f as $,
+  $f39a9eba43920ace$export$86427a43e3e48ebb as a,
+  $64fa3d84918910a7$export$29f1550f4b0d4415 as b,
+  $64fa3d84918910a7$export$fabf2dc03a41866e as c,
+  $64fa3d84918910a7$export$9d4c57ee4c6ffdd8 as d,
+  $64fa3d84918910a7$export$ef03459518577ad4 as e,
+  $64fa3d84918910a7$export$4d86445c2cf5e3 as f,
+  $65484d02dcb7eb3e$export$457c3d6518dd4c6f as g,
+  $64fa3d84918910a7$export$2881499e37b75b9a as h,
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c as i,
+  $c7eafbbe1ea5834e$export$535bd6ca7f90a273 as j,
+  $df56164dff5785e2$export$4338b53315abf666 as k,
+  $c7eafbbe1ea5834e$export$619500959fc48b26 as l,
+  $f39a9eba43920ace$export$b5d7cc18bb8d2b59 as m,
+  $3ef42575df84b30b$export$9d1611c77c2fe928 as n,
+  $64fa3d84918910a7$export$c62b8e45d58ddad9 as o,
+  $f39a9eba43920ace$export$8dc98ba7eadeaa56 as p
 };