@wix/editor-react-components 1.2357.0 → 1.2359.0

package/dist/site/components/Checkbox/component.js

@@ -6,10 +6,11 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, s as selectors, T as TestIds, a as semanticClassNames } from "../chunks/constants37.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__0DpH8";
 const field = "field__R0D8f";
 const item = "item__EzhwB";

package/dist/site/components/CheckboxGroup/component.js

@@ -6,10 +6,11 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, a as defaultOptions, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants36.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__raraS";
 const fieldset = "fieldset__pDERL";
 const labelRow = "labelRow__CTw2X";

package/dist/site/components/DatePicker/component.js

@@ -17,7 +17,8 @@ import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, D as DesignStates, A as ARIA_LABEL_NAMESPACE, d as defaultValues, S as SelectionModeValues, G as GranularityValues, V as VALUE_MISSING_MESSAGE, a as AriaLabels } from "../chunks/constants34.js";
 import { u as useValidatedField } from "../chunks/useValidatedField.js";
-import { I as InfoCircleSmall_default, R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 createContext(null);
 createContext(null);

package/dist/site/components/Dropdown/Dropdown.types.d.ts

@@ -1,5 +1,6 @@
 import { A11y, Direction } from '@wix/editor-react-types';
 import { SdkFunctionChangeableProps, SdkFunctionFocusableProps, SdkFunctionInputableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
+import { FieldValidationProps } from '../../../utils/validation/types';
 export type DropdownOption = {
     /** Text shown to the visitor in the list. */
     label: string;
@@ -8,13 +9,15 @@ export type DropdownOption = {
 };
 /** When the filter value is committed: immediately on pick, or only on an Apply click. */
 export type DropdownTriggerMode = 'onSelection' | 'onApply';
-/** Multi-select `value` item; a bare `string[]` is also accepted on read. */
+/** Legacy multi-select item shape; still accepted on read for back-compat. */
 export type DropdownValueItem = {
     value: string;
 };
+/** The selection emitted/validated: a value string (single) or `string[]` (multi). */
+export type DropdownValue = string | Array<string>;
 /** Match rule for searchable mode; defaults to case-insensitive "contains". */
 export type DropdownFilter = (item: DropdownOption, query: string) => boolean;
-export type DropdownProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & Omit<SdkFunctionInputableProps, 'onInput'> & {
+export type DropdownProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFunctionFocusableProps & Omit<SdkFunctionInputableProps, 'onInput'> & FieldValidationProps<DropdownValue> & {
     /** DOM `id` on the root `.dropdown` wrapper. */
     id: string;
     /** Appended to the root `.dropdown`. Use this for CSS-variable and per-element overrides. */
@@ -24,21 +27,31 @@ export type DropdownProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFu
     /** Single-select selection: a value string (empty = cleared). */
     value: string;
     /**
-     * Multi-select selection (`multiple: true`): an array of `{ value }` items
-     * (a bare `string[]` is also accepted on read).
+     * Multi-select selection (`multiple: true`): a `string[]` of selected
+     * values (a legacy `{ value }[]` is also accepted on read).
      */
     values?: Array<string> | Array<DropdownValueItem>;
+    /**
+     * Uncontrolled initial single-select selection. Used only when `value`
+     * is not provided (component owns its state).
+     */
+    defaultValue?: string;
+    /**
+     * Uncontrolled initial multi-select selection. Used only when `values`
+     * is not provided.
+     */
+    defaultValues?: Array<string> | Array<DropdownValueItem>;
     /** Bindable filter for searchable mode; defaults to case-insensitive "contains". */
     filter?: DropdownFilter;
     /** Live typed search query, separate from `value`; two-way bindable via `onInput`. */
     inputValue?: string;
     /**
      * Fires with the new selection so the bound field's setter stores it: a
-     * value string (single-select) or `{ value }[]` (multi-select). The value
+     * value string (single-select) or `string[]` (multi-select). The value
      * is passed plainly (not a DOM change event) — the binding wires
      * `onChange → <field>.setValue`.
      */
-    onChange?: (value: string | Array<DropdownValueItem>) => void;
+    onChange?: (value: string | Array<string>) => void;
     /** Fires with the new typed query string (bound via `onInput → <field>.setValue`). */
     onInput?: (value: string) => void;
     /** Text shown on the trigger when nothing is selected. */
@@ -67,6 +80,11 @@ export type DropdownProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFu
     required: boolean;
     /** Shows the current selection but blocks editing it. */
     readOnly: boolean;
+    /**
+     * Validation surface (`fieldValidity`, `showValidityIndication`,
+     * `onValidate`, `onValidityChange`) comes from `FieldValidationProps` — see
+     * the shared validation contract in `utils/validation`.
+     */
     /** Form field name used on submit. */
     name: string;
     /** Helper text shown under the field (and as the field's accessible description). */

package/dist/site/components/Dropdown/component.js

@@ -2,15 +2,17 @@ import { jsxs, jsx, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { useState, useCallback, useLayoutEffect, useEffect, useRef } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { C as Combobox, B as Button_Button_Button } from "../chunks/index10.js";
+import { C as Combobox, F as Field, B as Button_Button_Button } from "../chunks/index10.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { T as TranslationsDefinition } from "../chunks/index5.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels } from "../chunks/constants33.js";
+import { A as ALL_VALUE, s as selectors, a as semanticClassNames, T as TestIds, d as defaultValues, b as TriggerModeValues, c as ARIA_LABEL_NAMESPACE, e as AriaLabels, V as VALUE_MISSING_MESSAGE } from "../chunks/constants33.js";
+import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
 import { g as getDefaultExportFromCjs } from "../chunks/_commonjsHelpers.js";
@@ -165,6 +167,7 @@ const trigger = "trigger__J7jn7";
 const option = "option__QJeiF";
 const multiple = "multiple__ay77b";
 const select = "select__Lo-N7";
+const errorMessage = "errorMessage__iMuAa";
 const label = "label__Q7fZH";
 const description = "description__77blZ";
 const clear = "clear__isa6G";
@@ -190,6 +193,7 @@ const styles = {
   option,
   multiple,
   select,
+  errorMessage,
   label,
   description,
   clear,
@@ -278,7 +282,7 @@ const useDropdownSelection = (params) => {
   const selectedOptionLabel = selectedKey ? labelForKey(selectedKey) : "";
   const commitValue = (keys) => {
     const values = keys.map((key) => valueForKey(key)).filter((value2) => value2 !== ALL_VALUE);
-    const next = isMultiple ? values.map((value2) => ({ value: value2 })) : values[0] ?? ALL_VALUE;
+    const next = isMultiple ? values : values[0] ?? ALL_VALUE;
     emitChange(onChange, next);
   };
   const handleSelectionChange = (keys) => {
@@ -450,7 +454,8 @@ const DropdownTrigger = ({
   labelId,
   clearLabel,
   removeItemLabel,
-  descriptionId,
+  describedById,
+  isInvalid,
   onFocus,
   onBlur
 }) => {
@@ -486,7 +491,8 @@ const DropdownTrigger = ({
       placeholder: isMultiple && selectedItems.length > 0 ? "" : placeholder,
       "aria-label": ariaLabel,
       "aria-labelledby": labelId,
-      "aria-describedby": descriptionId,
+      "aria-describedby": describedById,
+      "aria-invalid": isInvalid || void 0,
       onFocus,
       onBlur
     }
@@ -516,7 +522,8 @@ const DropdownTrigger = ({
       className: triggerClassName,
       "data-testid": TestIds.trigger,
       "aria-label": ariaLabel,
-      "aria-describedby": descriptionId,
+      "aria-describedby": describedById,
+      "aria-invalid": isInvalid || void 0,
       onFocus,
       onBlur,
       children: [
@@ -650,6 +657,11 @@ function Dropdown(props) {
   const [popoverContainer, setPopoverContainer] = useState(null);
   const optionItems = toOptionItems(options);
   const isControlDisabled = isDisabled || optionItems.length === 0;
+  const boundValue = isMultiple ? props.values : props.value;
+  const defaultValue = isMultiple ? props.defaultValues : props.defaultValue;
+  const isControlled = boundValue !== void 0;
+  const sourceValue = isControlled ? boundValue : defaultValue;
+  const selectedValues = readSelectedValues(sourceValue, isMultiple);
   const {
     selectedItems,
     selectedKey,
@@ -658,10 +670,7 @@ function Dropdown(props) {
     handleApply
   } = useDropdownSelection({
     optionItems,
-    selectedValues: readSelectedValues(
-      isMultiple ? props.values : props.value,
-      isMultiple
-    ),
+    selectedValues,
     isMultiple,
     isApplyMode,
     onChange
@@ -685,6 +694,27 @@ function Dropdown(props) {
   const ariaLabel = label2 ? void 0 : t(AriaLabels.root.key) || (a11y == null ? void 0 : a11y.ariaLabel) || AriaLabels.root.default;
   const clearLabel = t(AriaLabels.clear.key) || AriaLabels.clear.default;
   const removeItemLabel = t(AriaLabels.removeItem.key) || AriaLabels.removeItem.default;
+  const selectedItemValues = selectedItems.map((item) => item.value).filter((value2) => value2 !== "");
+  const currentValue = isMultiple ? selectedItemValues : selectedItemValues[0] ?? "";
+  const intrinsic = required && selectedItemValues.length === 0 ? { valid: false, validationMessage: VALUE_MISSING_MESSAGE } : { valid: true, validationMessage: "" };
+  const {
+    validity,
+    showValidityIndication: showIndication,
+    handleBlur: validateOnBlur
+  } = useValidatedField({
+    value: currentValue,
+    valueKey: JSON.stringify(selectedItemValues),
+    intrinsic,
+    fieldValidity: props.fieldValidity,
+    showValidityIndication: props.showValidityIndication,
+    onValidate: props.onValidate,
+    onValidityChange: props.onValidityChange
+  });
+  const isInvalid = showIndication && !validity.valid;
+  const handleBlur = (event) => {
+    onBlur(event);
+    validateOnBlur();
+  };
   const rootClassName = clsx(
     className,
     styles.root,
@@ -711,9 +741,10 @@ function Dropdown(props) {
       labelId,
       clearLabel,
       removeItemLabel,
-      descriptionId,
+      describedById: descriptionId,
+      isInvalid,
       onFocus,
-      onBlur
+      onBlur: handleBlur
     }
   );
   const list2 = /* @__PURE__ */ jsx(
@@ -766,7 +797,7 @@ function Dropdown(props) {
       ...inline ? {} : { open: popupOpen, onOpenChange: setIsOpen },
       ...isSearchable ? { inputValue, onInputValueChange: handleInputValueChange } : {},
       children: [
-        label2 && /* @__PURE__ */ jsx(
+        label2 && /* @__PURE__ */ jsxs(
           Combobox.Label,
           {
             className: clsx(
@@ -775,7 +806,16 @@ function Dropdown(props) {
               formatClassNames(semanticClassNames.label)
             ),
             "data-testid": TestIds.label,
-            children: label2
+            children: [
+              label2,
+              required && /* @__PURE__ */ jsx(
+                RequiredIndicator,
+                {
+                  className: formatClassNames(semanticClassNames.requiredIndicator),
+                  "data-testid": TestIds.requiredIndicator
+                }
+              )
+            ]
           }
         ),
         triggerRegion,
@@ -795,12 +835,13 @@ function Dropdown(props) {
       "data-testid": TestIds.root,
       children: [
         /* @__PURE__ */ jsxs(
-          "div",
+          Field.Root,
           {
             className: clsx(
               styles.select,
               formatClassNames(semanticClassNames.root)
             ),
+            invalid: isInvalid,
             children: [
               field,
               description2 && /* @__PURE__ */ jsx(
@@ -811,6 +852,18 @@ function Dropdown(props) {
                   "data-testid": TestIds.description,
                   children: description2
                 }
+              ),
+              isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
+                Field.Error,
+                {
+                  match: true,
+                  className: clsx(
+                    styles.errorMessage,
+                    formatClassNames(semanticClassNames.errorMessage)
+                  ),
+                  "data-testid": TestIds.errorMessage,
+                  children: validity.validationMessage
+                }
               )
             ]
           }

package/dist/site/components/Dropdown/components/DropdownTrigger.d.ts

@@ -11,9 +11,10 @@ type DropdownTriggerProps = {
     labelId: string | undefined;
     clearLabel: string;
     removeItemLabel: string;
-    descriptionId: string | undefined;
+    describedById: string | undefined;
+    isInvalid: boolean;
     onFocus: (event: React.FocusEvent) => void;
     onBlur: (event: React.FocusEvent) => void;
 };
-export declare const DropdownTrigger: ({ isMultiple, isSearchable, clearable, selectedLabel, selectedItems, placeholder, ariaLabel, labelId, clearLabel, removeItemLabel, descriptionId, onFocus, onBlur, }: DropdownTriggerProps) => React.ReactElement;
+export declare const DropdownTrigger: ({ isMultiple, isSearchable, clearable, selectedLabel, selectedItems, placeholder, ariaLabel, labelId, clearLabel, removeItemLabel, describedById, isInvalid, onFocus, onBlur, }: DropdownTriggerProps) => React.ReactElement;
 export {};

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

@@ -86,6 +86,8 @@ export declare const DisplayNames: {
             optionValue: string;
             value: string;
             values: string;
+            defaultValue: string;
+            defaultValues: string;
             inputValue: string;
             open: string;
             isDisabled: string;
@@ -187,11 +189,13 @@ export declare const ALL_VALUE = "";
 export declare const TestIds: {
     readonly root: "dropdown-root";
     readonly label: "dropdown-label";
+    readonly requiredIndicator: "dropdown-required-indicator";
     readonly trigger: "dropdown-trigger";
     readonly listbox: "dropdown-listbox";
     readonly clear: "dropdown-clear";
     readonly applyButton: "dropdown-apply-button";
     readonly description: "dropdown-description";
+    readonly errorMessage: "dropdown-error-message";
 };
 export declare const selectors: {
     readonly root: "dropdown";
@@ -206,6 +210,7 @@ export declare const selectors: {
 export declare const semanticClassNames: {
     readonly root: "dropdown";
     readonly label: "dropdown__label";
+    readonly requiredIndicator: "dropdown__required-indicator";
     readonly input: "dropdown__input";
     readonly trigger: "dropdown__trigger";
     readonly clear: "dropdown__clear";
@@ -214,6 +219,7 @@ export declare const semanticClassNames: {
     readonly chips: "dropdown__chips";
     readonly chip: "dropdown__chip";
     readonly applyButton: "dropdown__apply-button";
+    readonly errorMessage: "dropdown__error-message";
 };
 export declare const ARIA_LABEL_NAMESPACE = "ariaLabels";
 export declare const AriaLabels: {
@@ -230,3 +236,5 @@ export declare const AriaLabels: {
         readonly default: "Remove";
     };
 };
+/** Intrinsic `required` failure message (pre-resolved; i18n is a shared TODO). */
+export declare const VALUE_MISSING_MESSAGE = "Please select an option.";

package/dist/site/components/Dropdown/css.css

@@ -1,3 +1,177 @@
+.root-ECdHfF {
+  flex-direction: column;
+  gap: 4px;
+  display: flex;
+}
+
+.label-YSWZBs {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-paragraph-2-color, #000);
+  margin-bottom: 4px;
+}
+
+.root-ECdHfF:has([disabled]) .label-YSWZBs, .root-ECdHfF[data-disabled] .label-YSWZBs {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.error-BUDKWp {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-system-error-color, #df3131);
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.error-BUDKWp svg {
+  flex-shrink: 0;
+  width: 1lh;
+  height: 1lh;
+}
+
+.description-IVviYU {
+  font: var(--wst-paragraph-3-font);
+  color: var(--wst-shade-3-color, #767676);
+}
+
+.descriptionEnd-O3mOtW {
+  text-align: end;
+  align-self: flex-end;
+}
+
+.control-fRhDZ8 {
+  width: 100%;
+}
+
+.control-fRhDZ8.controlLine-cAw0CF {
+  border: 0;
+  border-block-end-width: var(--wst-system-line-1-width, 1px);
+  border-block-end-style: solid;
+  border-block-end-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+.control-fRhDZ8.controlLine-cAw0CF:hover, .control-fRhDZ8.controlLine-cAw0CF:focus {
+  border-block-end-color: var(--wst-system-line-1-color, #000);
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) {
+  position: relative;
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) .control-fRhDZ8 {
+  block-size: 50px;
+  padding-block: 24px 6px;
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) .group-XazO1A {
+  align-items: end;
+  padding-block: 0;
+}
+
+.root-ECdHfF:has(.labelFloating-io8BLN) .adornment-Z1N0NF {
+  padding-block-end: 6px;
+}
+
+.labelFloating-io8BLN {
+  z-index: 2;
+  color: var(--wst-shade-3-color, #767676);
+  pointer-events: none;
+  margin: 0;
+  transition: inset-block-start .12s, transform .12s, font-size .12s;
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: 12px;
+  transform: translateY(-50%);
+}
+
+.labelFloating-io8BLN[data-filled], .labelFloating-io8BLN[data-focused], .root-ECdHfF:has(.control-fRhDZ8[placeholder]:not([placeholder=""])) .labelFloating-io8BLN, .root-ECdHfF:has(.labelFloating-io8BLN):has(.adornment-Z1N0NF) .labelFloating-io8BLN {
+  font-size: 12px;
+  inset-block-start: 8px;
+  transform: translateY(0);
+}
+
+.item-kQeHOQ {
+  width: 100%;
+}
+
+div.group-XazO1A {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.group-XazO1A:focus-within {
+  border-color: var(--wst-system-line-1-color, #000);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:focus) {
+  box-shadow: 0 0 0 2px var(--wst-links-and-actions-color, #116dff);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]) {
+  border-color: color-mix(in srgb,
+    var(--wst-system-error-color, #df3131) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]):hover, .group-XazO1A:has(.control-fRhDZ8[aria-invalid="true"]):focus-within {
+  border-color: var(--wst-system-error-color, #df3131);
+}
+
+.group-XazO1A:has(.control-fRhDZ8[data-valid]) {
+  border-color: color-mix(in srgb,
+    var(--wst-system-success-color, #008250) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled) {
+  cursor: not-allowed;
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled):hover {
+  border-color: color-mix(in srgb,
+    var(--wst-system-line-1-color, #000) 60%,
+    transparent);
+}
+
+.group-XazO1A:has(.control-fRhDZ8:disabled) .adornment-Z1N0NF {
+  color: var(--wst-system-disabled-color, #939393);
+}
+
+.group-XazO1A.groupLine-vlna4V {
+  border-width: 0;
+  border-block-end-width: var(--wst-system-line-1-width, 1px);
+  border-radius: 0;
+  padding-inline: 0;
+}
+
+.group-XazO1A .control-fRhDZ8 {
+  background-color: #0000;
+  border: 0;
+  flex: auto;
+  width: auto;
+  min-width: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.adornment-Z1N0NF {
+  font: var(--wst-paragraph-2-font);
+  color: var(--wst-shade-3-color, #767676);
+  flex-shrink: 0;
+  align-items: center;
+  display: inline-flex;
+}
+
+.adornment-Z1N0NF > svg {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
 .root__WnTks {
   box-sizing: border-box;
   display: inline-flex;
@@ -65,6 +239,15 @@
   flex-direction: column;
   gap: var(--gap, 4px);
 }
+.select__Lo-N7[data-invalid] .trigger__J7jn7 {
+  border-color: var(--errorColor, var(--wst-error-color, #e21c21));
+}
+
+.errorMessage__iMuAa {
+  margin: 0;
+  font: var(--helperFont, var(--wst-paragraph-3-font));
+  color: var(--errorColor, var(--wst-error-color, #e21c21));
+}
 
 .label__Q7fZH {
   font: var(--labelFont, var(--wst-paragraph-2-font));
@@ -254,6 +437,14 @@
   --gap: 8px;
   --textAlign: start;
 }
+.requiredIndicator__j5mIH {
+  display: inline-block;
+  width: 0.6em;
+  height: 0.6em;
+  margin-inline-start: 0.2em;
+  vertical-align: super;
+  color: inherit;
+}
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }

package/dist/site/components/Dropdown/dropdownUtils.d.ts

@@ -18,7 +18,5 @@ export declare const createFilterItem: (params: {
     isMultiple: boolean;
     inline: boolean;
 }) => (item: DropdownItem, typed: string) => boolean;
-export declare const emitChange: (onChange: NonNullable<DropdownProps["onChange"]>, value: string | Array<{
-    value: string;
-}>) => void;
+export declare const emitChange: (onChange: NonNullable<DropdownProps["onChange"]>, value: string | Array<string>) => void;
 export declare const emitInput: (onInput: NonNullable<DropdownProps["onInput"]>, value: string) => void;

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

@@ -3,9 +3,10 @@ import { D as DesignStates, f as DisplayNames, d as defaultValues, F as Function
 import { w as withSpec, g as getSelector } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, b as manifestInputable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
-  id: "f49b3649-fff3-42b4-8e18-a3cd2b23c2eb",
-  type: "wixEditorElements.Dropdown__DEV__v3",
+  id: "f49b3649-fff3-42b4-8e18-a3cd2b23c2ec",
+  type: "wixEditorElements.Dropdown__DEV__v4",
   description: "A single-select dropdown input. Visitors pick a value from a list of options (and can clear it when enabled). Options can be set statically or fed dynamically by a connected data source. Turn on search to filter a long list.",
   installation: {
     initialSize: {
@@ -341,13 +342,25 @@ const manifest = {
         dataType: DATA.DATA_TYPE.arrayItems,
         displayName: DisplayNames.root.data.values,
         [DATA.DATA_TYPE.arrayItems]: {
-          data: {
-            items: {
-              value: {
-                dataType: DATA.DATA_TYPE.text,
-                displayName: DisplayNames.root.data.optionValue
-              }
-            }
+          dataItem: {
+            dataType: DATA.DATA_TYPE.text,
+            displayName: DisplayNames.root.data.optionValue
+          }
+        }
+      },
+      // Uncontrolled counterparts of value/values, used only when the
+      // controlled field isn't bound.
+      defaultValue: {
+        dataType: DATA.DATA_TYPE.text,
+        displayName: DisplayNames.root.data.defaultValue
+      },
+      defaultValues: {
+        dataType: DATA.DATA_TYPE.arrayItems,
+        displayName: DisplayNames.root.data.defaultValues,
+        [DATA.DATA_TYPE.arrayItems]: {
+          dataItem: {
+            dataType: DATA.DATA_TYPE.text,
+            displayName: DisplayNames.root.data.optionValue
           }
         }
       },
@@ -473,7 +486,8 @@ const manifest = {
       },
       ...manifestChangeable(),
       ...manifestInputable(),
-      ...manifestFocusable()
+      ...manifestFocusable(),
+      ...manifestValidation({ valueDataType: DATA.DATA_TYPE.text })
     },
     displayGroups: {
       optionsGroup: {
@@ -490,6 +504,7 @@ const manifest = {
           items: [
             "required",
             "readOnly",
+            "isDisabled",
             "searchable",
             "multiple",
             "clearable",

package/dist/site/components/Menu/component.js

@@ -2273,16 +2273,22 @@ const Menu = (props) => {
     TranslationsDefinition
   );
   const translations = {
-    menuNavAriaLabel: translate(ARIA_LABEL_NAMESPACE)(translationsKeys.menuNavAriaLabel) || defaultTranslations.menuNavAriaLabel,
+    menuNavAriaLabel: translate(ARIA_LABEL_NAMESPACE)(
+      translationsKeys.menuNavAriaLabel,
+      defaultTranslations.menuNavAriaLabel
+    ),
     dropdownButtonAriaLabel: translate(ARIA_LABEL_NAMESPACE)(
-      translationsKeys.dropdownButtonAriaLabel
-    ) || defaultTranslations.dropdownButtonAriaLabel,
+      translationsKeys.dropdownButtonAriaLabel,
+      defaultTranslations.dropdownButtonAriaLabel
+    ),
     hamburgerOpenButtonAriaLabel: translate(ARIA_LABEL_NAMESPACE)(
-      translationsKeys.hamburgerOpenButtonAriaLabel
-    ) || defaultTranslations.hamburgerOpenButtonAriaLabel,
+      translationsKeys.hamburgerOpenButtonAriaLabel,
+      defaultTranslations.hamburgerOpenButtonAriaLabel
+    ),
     hamburgerCloseButtonAriaLabel: translate(ARIA_LABEL_NAMESPACE)(
-      translationsKeys.hamburgerCloseButtonAriaLabel
-    ) || defaultTranslations.hamburgerCloseButtonAriaLabel
+      translationsKeys.hamburgerCloseButtonAriaLabel,
+      defaultTranslations.hamburgerCloseButtonAriaLabel
+    )
   };
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsx(

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

@@ -312,7 +312,12 @@ export type Translations = {
         hamburgerCloseButtonAriaLabel?: string;
     };
 };
-export declare const defaultTranslations: Translations['translations'];
+export declare const defaultTranslations: {
+    menuNavAriaLabel: string;
+    dropdownButtonAriaLabel: string;
+    hamburgerOpenButtonAriaLabel: string;
+    hamburgerCloseButtonAriaLabel: string;
+};
 export declare const MenuParts: {
     readonly Root: "menu-root";
     readonly Navbar: "navbar";

package/dist/site/components/RadioButtons/component.js

@@ -6,11 +6,12 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, a as defaultOptions, V as VALUE_MISSING_MESSAGE, s as selectors, T as TestIds, b as semanticClassNames } from "../chunks/constants24.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__4SkBh";
 const fieldset = "fieldset__2OxuS";
 const labelRow = "labelRow__xKUgE";

package/dist/site/components/TextBox/component.js

@@ -6,11 +6,12 @@ import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { d as defaultValues, s as selectors, T as TestIds, V as VALIDATION_MESSAGES, a as semanticClassNames } from "../chunks/constants18.js";
 import { u as useValidatedField } from "../chunks/useValidatedField.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const root = "root__dlp5n";
 const field = "field__i7dfL";
 const errorMessage = "errorMessage__K0qsG";

package/dist/site/components/TextInput/component.js

@@ -5,7 +5,7 @@ import { c as clsx } from "../chunks/clsx.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { b as getAccessibilityAttributes, H as HAS_CUSTOM_FOCUS_CLASSNAME } from "../chunks/a11y.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { u as useValidatedField } from "../chunks/useValidatedField.js";
 import { s as selectors, T as TestIds, V as VALUE_MISSING_MESSAGE } from "../chunks/constants3.js";
 import { useService } from "@wix/services-manager-react";
@@ -14,6 +14,7 @@ import { c as $3e6197669829fe11$export$40bfa8c7b0832715, d as $d1116acdf220c2da$
 import { d as $fd2148440a13ec26$export$fc1a364ae1f3ff10, e as $191c9b6d48a0a4e2$export$294aa081a6c6f55d, f as $860f7da480e22816$export$b8473d3665f3a75a, g as $d3e0e05bdfcf66bd$export$c24727297075ec6a, h as $3985021b0ad6602f$export$37fb8590cf2c088c, i as $514c0188e459b4c0$export$9afb8bc826b033ea, j as $ee014567cb39d3f0$export$ff05c3ac10437e03, $ as $4e3b923658d69c60$export$8c610744efcf8a1d, a as $4e3b923658d69c60$export$28c660c63b792dea, k as $3985021b0ad6602f$export$f5b8910cec6cf069 } from "../chunks/Tooltip.js";
 import { a as $8e9d2fae0ecb9001$export$457c3d6518dd4c6f, b as $f39a9eba43920ace$export$86427a43e3e48ebb, c as $64fa3d84918910a7$export$29f1550f4b0d4415, d as $64fa3d84918910a7$export$fabf2dc03a41866e, e as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8, f as $64fa3d84918910a7$export$ef03459518577ad4, g as $64fa3d84918910a7$export$4d86445c2cf5e3, h as $65484d02dcb7eb3e$export$457c3d6518dd4c6f, i as $64fa3d84918910a7$export$2881499e37b75b9a } from "../chunks/filterDOMProps.js";
 import { S as SdkStateDefinition } from "../chunks/index6.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const $8e6cc465cc68f603$export$698f465ec27e93df = /* @__PURE__ */ createContext(null);
 function $054f71d2330da2e3$export$712718f7aec83d5(props, ref) {
   let { inputElementType = "input", isDisabled = false, isRequired = false, isReadOnly = false, type = "text", validationBehavior = "aria" } = props;

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

@@ -13,8 +13,9 @@ import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { E as EMPTY_VALUE, T as TestIds, s as selectors, a as TRANSLATIONS_NAMESPACE, d as defaultValues, V as VALUE_MISSING_MESSAGE, H as HourCycleValues, D as DefaultTranslations, b as TranslationKeys } from "../chunks/constants2.js";
 import { u as useValidatedField } from "../chunks/useValidatedField.js";
-import { R as RequiredIndicator, I as InfoCircleSmall_default } from "../chunks/RequiredIndicator.js";
+import { R as RequiredIndicator } from "../chunks/RequiredIndicator.js";
 import { D as DismissSmall_default } from "../chunks/DismissSmall.js";
+import { I as InfoCircleSmall_default } from "../chunks/InfoCircleSmall.js";
 const getTranslation = (translate, key, translationKeys, defaultTranslations) => {
   const translationKey = translationKeys[key];
   const translated = translate(translationKey);

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+const InfoCircleSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z M9,15 C12.3137085,15 15,12.3137085 15,9 C15,5.6862915 12.3137085,3 9,3 C5.6862915,3 3,5.6862915 3,9 C3,12.3137085 5.6862915,15 9,15 Z M8,8 L10,8 L10,12 L11,13 L7,13 L8,12 L8,8.85714286 L7,8.85714286 L8,8 Z M9,5 C9.55228475,5 10,5.44771525 10,6 C10,6.55228475 9.55228475,7 9,7 C8.44771525,7 8,6.55228475 8,6 C8,5.44771525 8.44771525,5 9,5 Z" }));
+InfoCircleSmall.displayName = "InfoCircleSmall";
+var InfoCircleSmall_default = InfoCircleSmall;
+export {
+  InfoCircleSmall_default as I
+};

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

@@ -1,9 +1,6 @@
-import * as React from "react";
 import { jsx } from "react/jsx-runtime";
 import { c as clsx } from "./clsx.js";
-const InfoCircleSmall = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 18 18", fill: "currentColor", width: size || "18", height: size || "18", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M9,16 C5.13400675,16 2,12.8659932 2,9 C2,5.13400675 5.13400675,2 9,2 C12.8659932,2 16,5.13400675 16,9 C16,12.8659932 12.8659932,16 9,16 Z M9,15 C12.3137085,15 15,12.3137085 15,9 C15,5.6862915 12.3137085,3 9,3 C5.6862915,3 3,5.6862915 3,9 C3,12.3137085 5.6862915,15 9,15 Z M8,8 L10,8 L10,12 L11,13 L7,13 L8,12 L8,8.85714286 L7,8.85714286 L8,8 Z M9,5 C9.55228475,5 10,5.44771525 10,6 C10,6.55228475 9.55228475,7 9,7 C8.44771525,7 8,6.55228475 8,6 C8,5.44771525 8.44771525,5 9,5 Z" }));
-InfoCircleSmall.displayName = "InfoCircleSmall";
-var InfoCircleSmall_default = InfoCircleSmall;
+import * as React from "react";
 const Asterisk = ({ size, ...props }) => /* @__PURE__ */ React.createElement("svg", { viewBox: "0 0 7 7", fill: "currentColor", width: size || "7", height: size || "7", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M1.809 7 1 6.397 2.74 3.94 0 3.026l.31-.974L3 2.948V0h1v2.976l2.69-.924.31.975-2.719.934L6 6.397 5.19 7 3.503 4.609 1.809 7Z" }));
 Asterisk.displayName = "Asterisk";
 var Asterisk_default = Asterisk;
@@ -24,6 +21,5 @@ const RequiredIndicator = ({
   }
 );
 export {
-  InfoCircleSmall_default as I,
   RequiredIndicator as R
 };

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

@@ -53,6 +53,8 @@ const DisplayNames = {
       optionValue: "Value",
       value: "Selected value",
       values: "Selected values",
+      defaultValue: "Default value",
+      defaultValues: "Default values",
       inputValue: "Search query",
       open: "Open",
       isDisabled: "Disabled",
@@ -154,11 +156,13 @@ 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"
+  description: "dropdown-description",
+  errorMessage: "dropdown-error-message"
 };
 const selectors = {
   root: "dropdown",
@@ -173,6 +177,7 @@ const selectors = {
 const semanticClassNames = {
   root: "dropdown",
   label: "dropdown__label",
+  requiredIndicator: "dropdown__required-indicator",
   input: "dropdown__input",
   trigger: "dropdown__trigger",
   clear: "dropdown__clear",
@@ -180,7 +185,8 @@ const semanticClassNames = {
   option: "dropdown__option",
   chips: "dropdown__chips",
   chip: "dropdown__chip",
-  applyButton: "dropdown__apply-button"
+  applyButton: "dropdown__apply-button",
+  errorMessage: "dropdown__error-message"
 };
 const ARIA_LABEL_NAMESPACE = "ariaLabels";
 const AriaLabels = {
@@ -188,11 +194,13 @@ const AriaLabels = {
   clear: { key: "Dropdown_AriaLabel_Clear", default: "Clear" },
   removeItem: { key: "Dropdown_AriaLabel_RemoveItem", default: "Remove" }
 };
+const VALUE_MISSING_MESSAGE = "Please select an option.";
 export {
   ALL_VALUE 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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2357.0",
+  "version": "1.2359.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -80,7 +80,7 @@
     "@wix/design-system-illustrations": "^2.19.0",
     "@wix/sdk": "^1.21.13",
     "@wix/services-manager-react": "^0.1.27",
-    "@wix/site-ui": "1.161.0",
+    "@wix/site-ui": "1.162.0",
     "@wix/video": "^1.85.0",
     "@wix/viewer-service-consent-policy": "^1.0.100",
     "@wix/web-bi-logger": "^2.1.26",
@@ -110,7 +110,7 @@
     "@types/react-dom": "^18.2.17",
     "@uiw/react-codemirror": "^4.24.1",
     "@vitejs/plugin-react": "^4.3.4",
-    "@wix/a11y-audit-tool-plugin": "^0.338.0",
+    "@wix/a11y-audit-tool-plugin": "^0.357.0",
     "@wix/astro": "^2.63.0",
     "@wix/business-tools": "^1.0.225",
     "@wix/cli": "^1.1.226",
@@ -132,7 +132,7 @@
     "@wix/react-component-schema": "^1.7.0",
     "@wix/seo-service": "^1.6.0",
     "@wix/services-manager": "0.2.8",
-    "@wix/sled-playwright": "^1.327.0",
+    "@wix/sled-playwright": "^1.328.0",
     "@wix/thunderbolt-components-native": "^1.0.0",
     "@wix/unidriver-core": "^1.5.5",
     "@wix/viewer-service-anchors": "^1.0.40",
@@ -143,7 +143,7 @@
     "@wix/viewer-service-sdk-state": "^1.0.28",
     "@wix/viewer-service-site-scroll-blocker": "^1.0.63",
     "@wix/viewer-service-topology": "^1.0.26",
-    "@wix/viewer-service-translations": "^1.0.22",
+    "@wix/viewer-service-translations": "^1.0.23",
     "@wix/viewer-service-url": "^1.0.69",
     "astro": "^5.16.6",
     "clsx": "2.0.0",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "d4bfc9da268b29efe1ddb1073eee5deb49e827b001018a694cf859ad"
+  "falconPackageHash": "161e4b7e541ef3b527e8626a785456eb4e6659d13805356f786a18ab"
 }