@wix/editor-react-components 1.2765.0 → 1.2767.0

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

@@ -1,914 +1,246 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import * as React from "react";
-import { useState, useCallback, useLayoutEffect, useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { C as Combobox, F as Field, B as Button_Button_Button } from "../chunks/index11.js";
+import { F as Field, C as Combobox } from "../chunks/index11.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
 import { T as TranslationsDefinition } from "../chunks/index4.js";
-import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
-import { u as useValidatedField, 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 accessibilityStyles } from "../chunks/accessibility.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, V as VALUE_MISSING_MESSAGE } from "../chunks/constants36.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";
-import { r as requireIsSymbol, a as require_baseSlice } from "../chunks/_baseSlice.js";
-import { r as requireIsObject, a as requireEq, b as requireIsArrayLike, c as require_isIndex } from "../chunks/isArrayLike.js";
-const ConfirmSmall = ({ 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: "M11.9393398,6 C12.232233,5.70710678 12.7071068,5.70710678 13,6 C13.2928932,6.29289322 13.2928932,6.76776695 13,7.06066017 L7.5,12.5606602 L5,10.0606602 C4.70710678,9.76776695 4.70710678,9.29289322 5,9 C5.29289322,8.70710678 5.76776695,8.70710678 6.06066017,9 L7.5,10.4393398 L11.9393398,6 Z" }));
-ConfirmSmall.displayName = "ConfirmSmall";
-var ConfirmSmall_default = ConfirmSmall;
-var _trimmedEndIndex;
-var hasRequired_trimmedEndIndex;
-function require_trimmedEndIndex() {
-  if (hasRequired_trimmedEndIndex) return _trimmedEndIndex;
-  hasRequired_trimmedEndIndex = 1;
-  var reWhitespace = /\s/;
-  function trimmedEndIndex(string) {
-    var index = string.length;
-    while (index-- && reWhitespace.test(string.charAt(index))) {
-    }
-    return index;
-  }
-  _trimmedEndIndex = trimmedEndIndex;
-  return _trimmedEndIndex;
-}
-var _baseTrim;
-var hasRequired_baseTrim;
-function require_baseTrim() {
-  if (hasRequired_baseTrim) return _baseTrim;
-  hasRequired_baseTrim = 1;
-  var trimmedEndIndex = require_trimmedEndIndex();
-  var reTrimStart = /^\s+/;
-  function baseTrim(string) {
-    return string ? string.slice(0, trimmedEndIndex(string) + 1).replace(reTrimStart, "") : string;
-  }
-  _baseTrim = baseTrim;
-  return _baseTrim;
-}
-var toNumber_1;
-var hasRequiredToNumber;
-function requireToNumber() {
-  if (hasRequiredToNumber) return toNumber_1;
-  hasRequiredToNumber = 1;
-  var baseTrim = require_baseTrim(), isObject = requireIsObject(), isSymbol = requireIsSymbol();
-  var NAN = 0 / 0;
-  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-  var reIsBinary = /^0b[01]+$/i;
-  var reIsOctal = /^0o[0-7]+$/i;
-  var freeParseInt = parseInt;
-  function toNumber(value2) {
-    if (typeof value2 == "number") {
-      return value2;
-    }
-    if (isSymbol(value2)) {
-      return NAN;
-    }
-    if (isObject(value2)) {
-      var other = typeof value2.valueOf == "function" ? value2.valueOf() : value2;
-      value2 = isObject(other) ? other + "" : other;
-    }
-    if (typeof value2 != "string") {
-      return value2 === 0 ? value2 : +value2;
-    }
-    value2 = baseTrim(value2);
-    var isBinary = reIsBinary.test(value2);
-    return isBinary || reIsOctal.test(value2) ? freeParseInt(value2.slice(2), isBinary ? 2 : 8) : reIsBadHex.test(value2) ? NAN : +value2;
-  }
-  toNumber_1 = toNumber;
-  return toNumber_1;
-}
-var toFinite_1;
-var hasRequiredToFinite;
-function requireToFinite() {
-  if (hasRequiredToFinite) return toFinite_1;
-  hasRequiredToFinite = 1;
-  var toNumber = requireToNumber();
-  var INFINITY = 1 / 0, MAX_INTEGER = 17976931348623157e292;
-  function toFinite(value2) {
-    if (!value2) {
-      return value2 === 0 ? value2 : 0;
-    }
-    value2 = toNumber(value2);
-    if (value2 === INFINITY || value2 === -INFINITY) {
-      var sign = value2 < 0 ? -1 : 1;
-      return sign * MAX_INTEGER;
-    }
-    return value2 === value2 ? value2 : 0;
-  }
-  toFinite_1 = toFinite;
-  return toFinite_1;
-}
-var toInteger_1;
-var hasRequiredToInteger;
-function requireToInteger() {
-  if (hasRequiredToInteger) return toInteger_1;
-  hasRequiredToInteger = 1;
-  var toFinite = requireToFinite();
-  function toInteger(value2) {
-    var result = toFinite(value2), remainder = result % 1;
-    return result === result ? remainder ? result - remainder : result : 0;
-  }
-  toInteger_1 = toInteger;
-  return toInteger_1;
-}
-var _isIterateeCall;
-var hasRequired_isIterateeCall;
-function require_isIterateeCall() {
-  if (hasRequired_isIterateeCall) return _isIterateeCall;
-  hasRequired_isIterateeCall = 1;
-  var eq = requireEq(), isArrayLike = requireIsArrayLike(), isIndex = require_isIndex(), isObject = requireIsObject();
-  function isIterateeCall(value2, index, object) {
-    if (!isObject(object)) {
-      return false;
-    }
-    var type = typeof index;
-    if (type == "number" ? isArrayLike(object) && isIndex(index, object.length) : type == "string" && index in object) {
-      return eq(object[index], value2);
-    }
-    return false;
-  }
-  _isIterateeCall = isIterateeCall;
-  return _isIterateeCall;
-}
-var chunk_1;
-var hasRequiredChunk;
-function requireChunk() {
-  if (hasRequiredChunk) return chunk_1;
-  hasRequiredChunk = 1;
-  var baseSlice = require_baseSlice(), isIterateeCall = require_isIterateeCall(), toInteger = requireToInteger();
-  var nativeCeil = Math.ceil, nativeMax = Math.max;
-  function chunk2(array, size, guard) {
-    if (guard ? isIterateeCall(array, size, guard) : size === void 0) {
-      size = 1;
-    } else {
-      size = nativeMax(toInteger(size), 0);
-    }
-    var length = array == null ? 0 : array.length;
-    if (!length || size < 1) {
-      return [];
-    }
-    var index = 0, resIndex = 0, result = Array(nativeCeil(length / size));
-    while (index < length) {
-      result[resIndex++] = baseSlice(array, index, index += size);
-    }
-    return result;
-  }
-  chunk_1 = chunk2;
-  return chunk_1;
-}
-var chunkExports = requireChunk();
-const chunk = /* @__PURE__ */ getDefaultExportFromCjs(chunkExports);
+import { A as AriaLabels, T as TestIds, e as editorElementClassNames, D as DesignStates } from "../chunks/constants36.js";
 const root = "root__WnTks";
-const trigger = "trigger__J7jn7";
+const input = "input__pbp9w";
 const option = "option__QJeiF";
-const multiple = "multiple__ay77b";
+const optionLabel = "optionLabel__pBY1S";
 const select = "select__Lo-N7";
 const errorMessage = "errorMessage__iMuAa";
 const label = "label__Q7fZH";
-const description = "description__77blZ";
-const clear = "clear__isa6G";
-const chips = "chips__LvQLW";
-const chipsOverflow = "chipsOverflow__mUTan";
-const chip = "chip__Fr--t";
-const chipLabel = "chipLabel__gL-DJ";
-const chipShrink = "chipShrink__kDlpE";
-const chipRemove = "chipRemove__sBxpf";
-const itemIndicator = "itemIndicator__-IS1X";
-const empty = "empty__dKQbw";
+const helperText = "helperText__M9s0b";
 const positioner = "positioner__YS--m";
 const popup = "popup__GQi1e";
 const list = "list__DruZL";
-const gridRow = "gridRow__9DEae";
-const inlineList = "inlineList__eJvV9";
 const value = "value__pqgtJ";
+const placeholder = "placeholder__qfcAb";
 const arrow = "arrow__Q2E2Y";
-const applyButton = "applyButton__GsIJM";
 const styles = {
   root,
-  trigger,
+  input,
   option,
-  multiple,
+  optionLabel,
   select,
   errorMessage,
   label,
-  description,
-  clear,
-  chips,
-  chipsOverflow,
-  chip,
-  chipLabel,
-  chipShrink,
-  chipRemove,
-  itemIndicator,
-  empty,
+  helperText,
   positioner,
   popup,
   list,
-  gridRow,
-  inlineList,
   value,
-  arrow,
-  applyButton
-};
-const readOptionValue = (item) => {
-  if (typeof item === "string") {
-    return item;
-  }
-  if (item && typeof item === "object" && typeof item.value === "string") {
-    return item.value;
-  }
-  return null;
-};
-const toOptionItems = (options) => options.filter((option2) => ((option2 == null ? void 0 : option2.label) ?? "").trim() !== "").map((option2, index) => {
-  const label2 = (option2 == null ? void 0 : option2.label) ?? "";
-  const value2 = (option2 == null ? void 0 : option2.value) ?? "";
-  return { key: `option-${index}`, value: value2 || label2, label: label2 };
-});
-const readSelectedValues = (rawValue, isMultiple) => {
-  let list2;
-  if (!isMultiple) {
-    list2 = [rawValue];
-  } else {
-    list2 = Array.isArray(rawValue) ? rawValue : [];
-  }
-  return list2.map(readOptionValue).filter((value2) => value2 !== null && value2 !== ALL_VALUE);
-};
-const createFilterItem = (params) => (item, typed) => {
-  const { customFilter, isSearchable, isMultiple, inline } = params;
-  const q = typed.trim();
-  if (q.length === 0) {
-    return !(isSearchable && !isMultiple && !inline);
-  }
-  return customFilter ? customFilter({ value: item.value, label: item.label }, q) : item.label.toLowerCase().includes(q.toLowerCase());
-};
-const emitChange = (onChange, value2) => {
-  onChange(value2);
-};
-const emitInput = (onInput, value2) => {
-  onInput(value2);
-};
-const useDropdownSelection = (params) => {
-  const { optionItems, selectedValues, isMultiple, isApplyMode, onChange } = params;
-  const itemForKey = (key) => optionItems.find((item) => item.key === key);
-  const valueForKey = (key) => {
-    var _a;
-    return ((_a = itemForKey(key)) == null ? void 0 : _a.value) ?? ALL_VALUE;
-  };
-  const labelForKey = (key) => {
-    var _a;
-    return ((_a = itemForKey(key)) == null ? void 0 : _a.label) ?? "";
-  };
-  const keysForValues = (values) => values.map((value2) => {
-    var _a;
-    return (_a = optionItems.find((item) => item.value === value2)) == null ? void 0 : _a.key;
-  }).filter((key) => Boolean(key));
-  const [selectedKeys, setSelectedKeys] = useState(
-    keysForValues(selectedValues)
-  );
-  const valuesSignature = JSON.stringify(selectedValues);
-  const optionsSignature = JSON.stringify(optionItems.map((item) => item.value));
-  const syncSignature = `${valuesSignature}::${optionsSignature}`;
-  const [prevSyncSignature, setPrevSyncSignature] = useState(syncSignature);
-  if (prevSyncSignature !== syncSignature) {
-    setPrevSyncSignature(syncSignature);
-    setSelectedKeys(keysForValues(selectedValues));
-  }
-  const selectedItems = selectedKeys.map((key) => itemForKey(key)).filter((item) => Boolean(item));
-  const selectedKey = selectedKeys[0] ?? null;
-  const selectedOptionLabel = selectedKey ? labelForKey(selectedKey) : "";
-  const commitValue = (keys) => {
-    const values = keys.map((key) => valueForKey(key)).filter((value2) => value2 !== ALL_VALUE);
-    const next = isMultiple ? values : values[0] ?? ALL_VALUE;
-    emitChange(onChange, next);
-  };
-  const handleSelectionChange = (keys) => {
-    setSelectedKeys(keys);
-    if (!isApplyMode) {
-      commitValue(keys);
-    }
-  };
-  const handleApply = () => commitValue(selectedKeys);
-  return {
-    selectedKeys,
-    selectedItems,
-    selectedKey,
-    selectedOptionLabel,
-    handleSelectionChange,
-    handleApply
-  };
-};
-const useDropdownQuery = (params) => {
-  const {
-    boundInputValue,
-    boundOpen,
-    isMultiple,
-    selectedKey,
-    selectedOptionLabel,
-    onInput
-  } = params;
-  const [inputValue, setInputValue] = useState(
-    boundInputValue ?? (isMultiple ? "" : selectedOptionLabel)
-  );
-  const [prevBoundInputValue, setPrevBoundInputValue] = useState(boundInputValue);
-  if (boundInputValue !== prevBoundInputValue) {
-    setPrevBoundInputValue(boundInputValue);
-    if (boundInputValue !== void 0 && boundInputValue !== inputValue) {
-      setInputValue(boundInputValue);
-    }
-  }
-  const [prevSelectedKey, setPrevSelectedKey] = useState(selectedKey);
-  if (!isMultiple && prevSelectedKey !== selectedKey) {
-    setPrevSelectedKey(selectedKey);
-    if (boundInputValue === void 0) {
-      setInputValue(selectedOptionLabel);
-    }
-  }
-  const handleInputValueChange = (next) => {
-    setInputValue(next);
-    emitInput(onInput, next);
-  };
-  const [isOpen, setIsOpen] = useState(boundOpen ?? false);
-  const [prevBoundOpen, setPrevBoundOpen] = useState(boundOpen);
-  if (boundOpen !== prevBoundOpen) {
-    setPrevBoundOpen(boundOpen);
-    if (typeof boundOpen === "boolean" && boundOpen !== isOpen) {
-      setIsOpen(boundOpen);
-    }
-  }
-  return {
-    inputValue,
-    handleInputValueChange,
-    hasQuery: inputValue.trim().length > 0,
-    isOpen,
-    setIsOpen
-  };
-};
-const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-const COUNTER_RESERVE = 52;
-const MIN_PARTIAL = 48;
-const GAP = 4;
-const useChipOverflow = (ref, count) => {
-  const [visible, setVisible] = useState(count);
-  useIsomorphicLayoutEffect(() => {
-    setVisible(count);
-  }, [count]);
-  useIsomorphicLayoutEffect(() => {
-    const el = ref.current;
-    if (!el || visible !== count) {
-      return;
-    }
-    const available = el.clientWidth;
-    if (available === 0) {
-      return;
-    }
-    const chips2 = Array.from(el.querySelectorAll("[data-chip]"));
-    let used = 0;
-    let fit = 0;
-    for (let index = 0; index < chips2.length; index += 1) {
-      const width = chips2[index].offsetWidth + (index > 0 ? GAP : 0);
-      const reserve = index < count - 1 ? COUNTER_RESERVE : 0;
-      if (used + width + reserve > available) {
-        break;
-      }
-      used += width;
-      fit += 1;
-    }
-    let show = fit;
-    if (fit < count) {
-      const reserve = fit + 1 < count ? COUNTER_RESERVE : 0;
-      if (available - used - GAP - reserve >= MIN_PARTIAL) {
-        show = fit + 1;
-      }
-    }
-    const next = count > 0 ? Math.max(1, show) : show;
-    if (next !== count) {
-      setVisible(next);
-    }
-  }, [ref, visible, count]);
-  const handleResize = useCallback(() => setVisible(count), [count]);
-  useResizeObserver({ ref, callback: handleResize });
-  return visible;
-};
-const DropdownChips = ({
-  items,
-  inputControl,
-  removeItemLabel,
-  chipClassName
-}) => {
-  const chipsRef = useRef(null);
-  const visible = useChipOverflow(chipsRef, items.length);
-  const hidden = items.length - visible;
-  return /* @__PURE__ */ jsxs(
-    Combobox.Chips,
-    {
-      ref: chipsRef,
-      className: clsx(
-        styles.chips,
-        formatClassNames(semanticClassNames.chips)
-      ),
-      children: [
-        items.slice(0, visible).map((item, index) => /* @__PURE__ */ jsxs(
-          Combobox.Chip,
-          {
-            "data-chip": "",
-            className: clsx(
-              styles.chip,
-              selectors.chip,
-              formatClassNames(semanticClassNames.chip),
-              index === visible - 1 && styles.chipShrink,
-              chipClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx("span", { className: styles.chipLabel, children: item.label }),
-              /* @__PURE__ */ jsx(
-                Combobox.ChipRemove,
-                {
-                  className: styles.chipRemove,
-                  "aria-label": removeItemLabel,
-                  children: /* @__PURE__ */ jsx(DismissSmall_default, { "aria-hidden": "true" })
-                }
-              )
-            ]
-          },
-          item.key
-        )),
-        hidden > 0 && /* @__PURE__ */ jsxs("span", { className: styles.chipsOverflow, children: [
-          "+",
-          hidden
-        ] }),
-        inputControl
-      ]
-    }
-  );
-};
-const DropdownTrigger = ({
-  isMultiple,
-  isSearchable,
-  clearable,
-  selectedLabel,
-  selectedItems,
   placeholder,
-  ariaLabel,
-  labelId,
-  clearLabel,
-  removeItemLabel,
-  describedById,
-  isInvalid,
-  onFocus,
-  onBlur,
-  elementProps
-}) => {
-  var _a, _b, _c, _d;
-  const triggerClassName = clsx(
-    styles.trigger,
-    selectors.trigger,
-    formatClassNames(semanticClassNames.trigger),
-    (_a = elementProps == null ? void 0 : elementProps.trigger) == null ? void 0 : _a.className
-  );
-  const inputGroupClassName = clsx(
-    styles.trigger,
-    selectors.input,
-    formatClassNames(semanticClassNames.input),
-    (_b = elementProps == null ? void 0 : elementProps.input) == null ? void 0 : _b.className
-  );
-  const clearControl = clearable ? /* @__PURE__ */ jsx(
-    Combobox.Clear,
-    {
-      className: clsx(
-        styles.clear,
-        selectors.clear,
-        formatClassNames(semanticClassNames.clear),
-        (_c = elementProps == null ? void 0 : elementProps.clearButton) == null ? void 0 : _c.className
-      ),
-      "aria-label": clearLabel,
-      "data-testid": TestIds.clear,
-      children: /* @__PURE__ */ jsx(DismissSmall_default, { "aria-hidden": "true" })
-    }
-  ) : null;
-  const inputControl = /* @__PURE__ */ jsx(
-    Combobox.Input,
-    {
-      className: styles.value,
-      "data-testid": TestIds.trigger,
-      readOnly: !isSearchable,
-      placeholder: isMultiple && selectedItems.length > 0 ? "" : placeholder,
-      "aria-label": ariaLabel,
-      "aria-labelledby": labelId,
-      "aria-describedby": describedById,
-      "aria-invalid": isInvalid || void 0,
-      onFocus,
-      onBlur
-    }
-  );
-  if (isMultiple) {
-    return /* @__PURE__ */ jsxs(Combobox.InputGroup, { className: inputGroupClassName, children: [
-      /* @__PURE__ */ jsx(
-        DropdownChips,
-        {
-          items: selectedItems,
-          inputControl,
-          removeItemLabel,
-          chipClassName: (_d = elementProps == null ? void 0 : elementProps.chip) == null ? void 0 : _d.className
-        }
-      ),
-      clearControl
-    ] });
-  }
-  if (isSearchable) {
-    return /* @__PURE__ */ jsxs(Combobox.InputGroup, { className: inputGroupClassName, children: [
-      inputControl,
-      clearControl
-    ] });
-  }
-  return /* @__PURE__ */ jsxs(
-    Combobox.Trigger,
-    {
-      className: triggerClassName,
-      "data-testid": TestIds.trigger,
-      "aria-label": ariaLabel,
-      "aria-labelledby": labelId,
-      "aria-describedby": describedById,
-      "aria-invalid": isInvalid || void 0,
-      onFocus,
-      onBlur,
-      children: [
-        /* @__PURE__ */ jsx(Combobox.Value, { children: () => /* @__PURE__ */ jsx("span", { className: styles.value, children: selectedLabel }) }),
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.arrow })
-      ]
-    }
-  );
-};
-const DropdownList = ({
-  optionItems,
-  filterItem,
-  inputValue,
-  limit,
-  isGrid,
-  isSearchable,
-  columns,
-  inline,
-  isMultiple,
-  hasInput,
-  hasQuery,
-  popoverContainer,
-  elementProps
-}) => {
-  var _a, _b;
-  const listClassName = clsx(
-    selectors.list,
-    formatClassNames(semanticClassNames.listbox),
-    (_a = elementProps == null ? void 0 : elementProps.list) == null ? void 0 : _a.className
-  );
-  const optionClassName = clsx(
-    styles.option,
-    selectors.option,
-    formatClassNames(semanticClassNames.option),
-    (_b = elementProps == null ? void 0 : elementProps.option) == null ? void 0 : _b.className
-  );
-  const renderItem = (item) => /* @__PURE__ */ jsxs(Combobox.Item, { value: item, className: optionClassName, children: [
-    item.label,
-    isMultiple && /* @__PURE__ */ jsx(Combobox.ItemIndicator, { className: styles.itemIndicator, children: /* @__PURE__ */ jsx(ConfirmSmall_default, { "aria-hidden": "true" }) })
-  ] }, item.key);
-  const gridItems = optionItems.filter(
-    (item) => filterItem(item, isSearchable ? inputValue : "")
-  );
-  const gridVisible = limit > 0 ? gridItems.slice(0, limit) : gridItems;
-  const gridStyle = { "--columns": columns };
-  const listChildren = isGrid ? chunk(gridVisible, columns).map((row, rowIndex) => /* @__PURE__ */ jsx(Combobox.Row, { className: styles.gridRow, children: row.map(renderItem) }, `row-${rowIndex}`)) : renderItem;
-  let emptyState = null;
-  if (isGrid) {
-    emptyState = hasQuery && gridVisible.length === 0 ? /* @__PURE__ */ jsx("div", { className: styles.empty, children: defaultValues.noResultsText }) : null;
-  } else if (hasInput) {
-    emptyState = /* @__PURE__ */ jsx(Combobox.Empty, { className: styles.empty, children: hasQuery ? defaultValues.noResultsText : null });
-  }
-  if (inline) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        Combobox.List,
-        {
-          className: clsx(styles.inlineList, listClassName),
-          "data-testid": TestIds.listbox,
-          style: isGrid ? gridStyle : void 0,
-          children: listChildren
-        }
-      ),
-      emptyState
-    ] });
-  }
-  return /* @__PURE__ */ jsx(Combobox.Portal, { container: popoverContainer ?? void 0, children: /* @__PURE__ */ jsx(Combobox.Positioner, { className: styles.positioner, sideOffset: 4, children: /* @__PURE__ */ jsxs(
-    Combobox.Popup,
-    {
-      className: clsx(styles.popup, listClassName),
-      "data-testid": TestIds.listbox,
-      children: [
-        /* @__PURE__ */ jsx(
-          Combobox.List,
-          {
-            className: styles.list,
-            style: isGrid ? gridStyle : void 0,
-            children: listChildren
-          }
-        ),
-        emptyState
-      ]
-    }
-  ) }) });
+  arrow
 };
-const noop = () => {
-};
-function Dropdown(props) {
-  var _a;
-  const environmentService = useService(EnvironmentDefinition);
-  const { translate } = useService(
-    TranslationsDefinition
-  );
-  const {
-    id,
-    className = "",
-    searchable = defaultValues.searchable,
-    clearable = defaultValues.clearable,
-    autoHighlight = defaultValues.autoHighlight,
-    openOnInputClick = defaultValues.openOnInputClick,
-    inline = defaultValues.inline,
-    readOnly = defaultValues.readOnly,
-    name = defaultValues.name,
-    triggerMode = defaultValues.triggerMode,
-    applyButtonLabel = defaultValues.applyButtonLabel,
-    previewList,
-    direction,
-    a11y,
-    onChange = noop,
-    onInput = noop,
-    onFocus = noop,
-    onBlur = noop,
-    wix,
-    elementProps
-  } = props;
-  const label2 = props.label ?? defaultValues.label;
-  const placeholder = props.placeholder ?? defaultValues.placeholder;
-  const description2 = props.description ?? defaultValues.description;
-  const isMultiple = props.multiple === true;
-  const required = props.required === true;
-  const isDisabled = props.isDisabled === true;
-  const limit = typeof props.limit === "number" ? props.limit : defaultValues.limit;
-  const customFilter = typeof props.filter === "function" ? props.filter : void 0;
-  const options = Array.isArray(props.options) ? props.options : [];
-  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
-  const isSearchable = searchable === true;
-  const isGrid = props.grid === true;
-  const columns = Math.max(
-    1,
-    typeof props.columns === "number" ? Math.floor(props.columns) : defaultValues.columns
-  );
-  const isApplyMode = triggerMode === TriggerModeValues.OnApply;
+const itemToStringLabel = (item) => (item == null ? void 0 : item.label) ?? "";
+const itemToStringValue = (item) => (item == null ? void 0 : item.value) ?? "";
+function Dropdown({
+  a11y,
+  className,
+  direction,
+  disabled,
+  elementProps,
+  errorMessage: errorMessage2,
+  helperText: helperText2,
+  id,
+  label: label2,
+  onValueChange,
+  options,
+  placeholder: placeholder2,
+  previewError,
+  previewList,
+  readOnly,
+  value: value2,
+  wix,
+  ...rest
+}) {
+  var _a, _b, _c, _d, _e;
+  const [open, setOpen] = useState(false);
   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,
-    selectedOptionLabel,
-    handleSelectionChange,
-    handleApply
-  } = useDropdownSelection({
-    optionItems,
-    selectedValues,
-    isMultiple,
-    isApplyMode,
-    onChange
-  });
-  const selectedLabel = selectedOptionLabel || placeholder;
-  const { inputValue, handleInputValueChange, hasQuery, isOpen, setIsOpen } = useDropdownQuery({
-    boundInputValue: typeof props.inputValue === "string" ? props.inputValue : void 0,
-    boundOpen: typeof props.open === "boolean" ? props.open : void 0,
-    isMultiple,
-    selectedKey,
-    selectedOptionLabel,
-    onInput
-  });
-  const filterItem = createFilterItem({
-    customFilter,
-    isSearchable,
-    isMultiple,
-    inline
-  });
-  const t = translate(ARIA_LABEL_NAMESPACE);
-  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || (label2 ? void 0 : t(AriaLabels.root.key) || 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 selectedOption = typeof value2 === "undefined" ? void 0 : options == null ? void 0 : options.find((option2) => option2.value === value2);
+  const handleSelectionChange = (option2) => {
+    if (option2 === null) {
+      return;
+    }
+    onValueChange == null ? void 0 : onValueChange(option2.value);
   };
-  const rootClassName = clsx(
-    className,
-    styles.root,
-    isMultiple && styles.multiple,
-    selectors.root,
-    !direction && directionStyles.fallbackDirection
-  );
-  const descriptionId = description2 ? `${id}-description` : void 0;
+  const invalid = typeof errorMessage2 !== "undefined" && errorMessage2 !== "";
+  const inErrorState = invalid || Boolean(previewError);
+  const { language } = useService(EnvironmentDefinition);
+  const { translate } = useService(TranslationsDefinition);
+  const ariaLabel = (a11y == null ? void 0 : a11y.ariaLabel) || (label2 ? void 0 : translate("ariaLabels")(AriaLabels.root.key) || AriaLabels.root.default);
   const comboboxId = `${id}-combobox`;
-  const labelId = label2 ? `${comboboxId}-label` : void 0;
-  const fieldName = name || void 0;
-  const hasInput = isMultiple || isSearchable;
-  const customAccessibleNameId = label2 && ariaLabel && !hasInput ? `${id}-accessible-name` : void 0;
-  const popupOpen = previewList === true || (isMultiple || !isSearchable ? isOpen : isOpen && hasQuery);
-  const triggerRegion = /* @__PURE__ */ jsx(
-    DropdownTrigger,
-    {
-      isMultiple,
-      isSearchable,
-      clearable,
-      selectedLabel,
-      selectedItems,
-      placeholder,
-      ariaLabel,
-      labelId: customAccessibleNameId ?? (ariaLabel ? void 0 : labelId),
-      clearLabel,
-      removeItemLabel,
-      describedById: descriptionId,
-      isInvalid,
-      onFocus,
-      onBlur: handleBlur,
-      elementProps
-    }
-  );
-  const list2 = /* @__PURE__ */ jsx(
-    DropdownList,
-    {
-      optionItems,
-      filterItem,
-      inputValue,
-      limit,
-      isGrid,
-      isSearchable,
-      columns,
-      inline,
-      isMultiple,
-      hasInput,
-      hasQuery,
-      popoverContainer,
-      elementProps
-    }
-  );
-  const field = /* @__PURE__ */ jsxs(
-    Combobox.Root,
-    {
-      id: comboboxId,
-      multiple: isMultiple,
-      value: isMultiple ? selectedItems : selectedItems[0] ?? null,
-      onValueChange: (next) => {
-        let nextItems;
-        if (isMultiple) {
-          nextItems = next ?? [];
-        } else {
-          nextItems = next ? [next] : [];
-        }
-        handleSelectionChange(nextItems.map((item) => item.key));
-      },
-      itemToStringLabel: (item) => (item == null ? void 0 : item.label) ?? "",
-      itemToStringValue: (item) => (item == null ? void 0 : item.value) ?? "",
-      isItemEqualToValue: (a, b) => (a == null ? void 0 : a.key) === (b == null ? void 0 : b.key),
-      disabled: isControlDisabled,
-      required,
-      readOnly,
-      name: fieldName,
-      inline,
-      autoHighlight: isSearchable && autoHighlight,
-      openOnInputClick: hasInput && openOnInputClick,
-      ...isGrid ? { grid: true } : {
-        items: optionItems,
-        filter: filterItem,
-        limit: limit > 0 ? limit : void 0
-      },
-      ...inline ? {} : { open: popupOpen, onOpenChange: setIsOpen },
-      ...isSearchable ? { inputValue, onInputValueChange: handleInputValueChange } : {},
-      children: [
-        customAccessibleNameId && /* @__PURE__ */ jsx(
-          "span",
-          {
-            id: customAccessibleNameId,
-            className: accessibilityStyles.visuallyHidden,
-            children: ariaLabel
-          }
-        ),
-        label2 && /* @__PURE__ */ jsxs(
-          Combobox.Label,
-          {
-            className: clsx(
-              styles.label,
-              selectors.label,
-              formatClassNames(semanticClassNames.label),
-              (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
-            ),
-            "data-testid": TestIds.label,
-            children: [
-              label2,
-              required && /* @__PURE__ */ jsx(
-                RequiredIndicator,
-                {
-                  className: formatClassNames(semanticClassNames.requiredIndicator),
-                  "data-testid": TestIds.requiredIndicator
-                }
-              )
-            ]
-          }
-        ),
-        triggerRegion,
-        list2
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsxs(
+  const helperTextId = helperText2 ? `${id}-helper-text` : void 0;
+  const errorMessageId = inErrorState ? `${id}-error-message` : void 0;
+  const describedBy = [helperTextId, errorMessageId].filter(Boolean).join(" ") || void 0;
+  const accessibleNameId = label2 && ariaLabel ? `${id}-accessible-name` : void 0;
+  return /* @__PURE__ */ jsx(
     "div",
     {
-      id,
-      ref: setPopoverContainer,
-      ...getDataAttributes(props),
-      className: rootClassName,
-      dir: direction,
-      lang: environmentService.language,
-      "data-testid": TestIds.root,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Field.Root,
-          {
-            className: clsx(
-              styles.select,
-              formatClassNames(semanticClassNames.root)
-            ),
-            invalid: isInvalid,
-            children: [
-              field,
-              description2 && /* @__PURE__ */ jsx(
-                "p",
-                {
-                  id: descriptionId,
-                  className: styles.description,
-                  "data-testid": TestIds.description,
-                  children: description2
-                }
-              ),
-              isInvalid && validity.validationMessage && /* @__PURE__ */ jsx(
-                Field.Error,
-                {
-                  match: true,
-                  className: clsx(
-                    styles.errorMessage,
-                    formatClassNames(semanticClassNames.errorMessage)
+      className: presetWrapperStyles.presetWrapper,
+      ...wix == null ? void 0 : wix.presetsWrapperProps,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          id,
+          ref: setPopoverContainer,
+          className: clsx(
+            className,
+            styles.root,
+            editorElementClassNames.root,
+            !direction && directionStyles.fallbackDirection
+          ),
+          "data-testid": TestIds.root,
+          dir: direction,
+          lang: language,
+          ...getDataAttributes(rest),
+          children: /* @__PURE__ */ jsxs(Field.Root, { className: styles.select, invalid: inErrorState, children: [
+            /* @__PURE__ */ jsxs(
+              Combobox.Root,
+              {
+                disabled: disabled || !(options == null ? void 0 : options.length),
+                id: comboboxId,
+                items: options,
+                itemToStringLabel,
+                itemToStringValue,
+                onOpenChange: setOpen,
+                onValueChange: handleSelectionChange,
+                open: previewList || open,
+                readOnly,
+                value: selectedOption ?? null,
+                children: [
+                  accessibleNameId && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      id: accessibleNameId,
+                      className: accessibilityStyles.visuallyHidden,
+                      children: ariaLabel
+                    }
+                  ),
+                  label2 && /* @__PURE__ */ jsx(
+                    Combobox.Label,
+                    {
+                      className: clsx(
+                        styles.label,
+                        editorElementClassNames.label,
+                        (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className
+                      ),
+                      "data-testid": TestIds.label,
+                      children: label2
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    Combobox.Trigger,
+                    {
+                      ...accessibleNameId ? { "aria-labelledby": accessibleNameId } : {},
+                      "aria-describedby": describedBy,
+                      "aria-haspopup": "listbox",
+                      "aria-invalid": inErrorState || void 0,
+                      "aria-label": ariaLabel,
+                      className: clsx(
+                        styles.input,
+                        editorElementClassNames.input,
+                        (_b = elementProps == null ? void 0 : elementProps.input) == null ? void 0 : _b.className,
+                        // No native pseudo-class exists for "invalid" here (see the
+                        // manifest's `input.states.error` comment) — applied for
+                        // real so the live export (scoped to this same class) has a
+                        // real selector to bind to, not just the editor's own
+                        // design-preview injection. Same pattern as Option's
+                        // `selected` state below.
+                        inErrorState ? DesignStates.input.error.className : void 0
+                      ),
+                      "data-testid": TestIds.input,
+                      children: [
+                        /* @__PURE__ */ jsx(Combobox.Value, { children: /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: clsx(
+                              styles.value,
+                              !selectedOption && styles.placeholder
+                            ),
+                            children: selectedOption ? selectedOption.label : placeholder2
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: styles.arrow })
+                      ]
+                    }
                   ),
-                  "data-testid": TestIds.errorMessage,
-                  children: validity.validationMessage
-                }
-              )
-            ]
-          }
-        ),
-        isApplyMode && /* @__PURE__ */ jsx(
-          Button_Button_Button,
-          {
-            type: "button",
-            variant: "primary",
-            className: clsx(
-              styles.applyButton,
-              formatClassNames(semanticClassNames.applyButton)
+                  /* @__PURE__ */ jsx(Combobox.Portal, { container: popoverContainer, children: /* @__PURE__ */ jsx(Combobox.Positioner, { className: styles.positioner, sideOffset: 4, children: /* @__PURE__ */ jsx(
+                    Combobox.Popup,
+                    {
+                      className: clsx(
+                        styles.popup,
+                        editorElementClassNames.list,
+                        (_c = elementProps == null ? void 0 : elementProps.list) == null ? void 0 : _c.className
+                      ),
+                      "data-testid": TestIds.list,
+                      children: /* @__PURE__ */ jsx(Combobox.List, { className: styles.list, children: options == null ? void 0 : options.map((option2, index) => {
+                        var _a2;
+                        return /* @__PURE__ */ jsx(
+                          Combobox.Item,
+                          {
+                            className: clsx(
+                              styles.option,
+                              editorElementClassNames.option,
+                              (_a2 = elementProps == null ? void 0 : elementProps.option) == null ? void 0 : _a2.className,
+                              // No native pseudo-class exists for "selected" (see
+                              // the manifest's `option.states.selected` comment)
+                              // — applied for real here so the panel's per-state
+                              // export has a real selector to bind to, not just
+                              // the editor's own design-preview injection.
+                              option2 === selectedOption ? DesignStates.option.selected.className : void 0
+                            ),
+                            value: option2,
+                            children: /* @__PURE__ */ jsx("span", { className: styles.optionLabel, children: option2.label })
+                          },
+                          `option-${index}`
+                        );
+                      }) })
+                    }
+                  ) }) })
+                ]
+              }
             ),
-            "data-testid": TestIds.applyButton,
-            onClick: handleApply,
-            disabled: isControlDisabled,
-            children: applyButtonLabel
-          }
-        )
-      ]
+            helperText2 && /* @__PURE__ */ jsx(
+              "p",
+              {
+                className: clsx(
+                  styles.helperText,
+                  editorElementClassNames.helperText,
+                  (_d = elementProps == null ? void 0 : elementProps.helperText) == null ? void 0 : _d.className
+                ),
+                "data-testid": TestIds.helperText,
+                id: helperTextId,
+                children: helperText2
+              }
+            ),
+            inErrorState && /* @__PURE__ */ jsx(
+              Field.Error,
+              {
+                className: clsx(
+                  styles.errorMessage,
+                  editorElementClassNames.errorMessage,
+                  (_e = elementProps == null ? void 0 : elementProps.errorMessage) == null ? void 0 : _e.className
+                ),
+                "data-testid": TestIds.errorMessage,
+                id: errorMessageId,
+                match: true,
+                children: errorMessage2
+              }
+            )
+          ] })
+        }
+      )
     }
-  ) });
+  );
 }
 export {
   Dropdown as default