@wix/editor-react-components 1.2332.0 → 1.2334.0

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

@@ -79,6 +79,8 @@ export type DropdownProps = Omit<SdkFunctionChangeableProps, 'onChange'> & SdkFu
     isDisabled?: boolean;
     /** Controls whether the option list is open. No effect in `inline` mode. */
     open?: boolean;
+    /** Preview-only: forces the option list open while the List part is being designed. */
+    previewList?: boolean;
     /** Writing direction applied to the root. */
     direction?: Direction;
     /** Accessibility attributes. `ariaLabel` labels the dropdown for assistive tech. */

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

@@ -10,7 +10,7 @@ import { f as formatClassNames } from "../chunks/classNames.js";
 import { a as getDataAttributes } from "../chunks/dataUtils.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import { A as ALL_VALUE, T as TestIds, s as semanticClassNames, d as defaultValues, a as TriggerModeValues, b as ARIA_LABEL_NAMESPACE, c as AriaLabels, e as selectors } from "../chunks/constants32.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/constants32.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";
@@ -219,11 +219,11 @@ const readOptionValue = (item) => {
   }
   return null;
 };
-const toOptionItems = (options) => options.filter((option2) => ((option2 == null ? void 0 : option2.label) ?? "").trim() !== "").map((option2, index) => ({
-  key: `option-${index}`,
-  value: (option2 == null ? void 0 : option2.value) ?? "",
-  label: (option2 == null ? void 0 : option2.label) ?? ""
-}));
+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) {
@@ -397,35 +397,47 @@ const DropdownChips = ({
   const chipsRef = useRef(null);
   const visible = useChipOverflow(chipsRef, items.length);
   const hidden = items.length - visible;
-  return /* @__PURE__ */ jsxs(Combobox.Chips, { ref: chipsRef, className: styles.chips, children: [
-    items.slice(0, visible).map((item, index) => /* @__PURE__ */ jsxs(
-      Combobox.Chip,
-      {
-        "data-chip": "",
-        className: clsx(
-          styles.chip,
-          index === visible - 1 && styles.chipShrink
-        ),
-        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
-  ] });
+  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
+            ),
+            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,
@@ -435,6 +447,7 @@ const DropdownTrigger = ({
   selectedItems,
   placeholder,
   ariaLabel,
+  labelId,
   clearLabel,
   removeItemLabel,
   descriptionId,
@@ -443,12 +456,22 @@ const DropdownTrigger = ({
 }) => {
   const triggerClassName = clsx(
     styles.trigger,
+    selectors.trigger,
     formatClassNames(semanticClassNames.trigger)
   );
+  const inputGroupClassName = clsx(
+    styles.trigger,
+    selectors.input,
+    formatClassNames(semanticClassNames.input)
+  );
   const clearControl = clearable ? /* @__PURE__ */ jsx(
     Combobox.Clear,
     {
-      className: styles.clear,
+      className: clsx(
+        styles.clear,
+        selectors.clear,
+        formatClassNames(semanticClassNames.clear)
+      ),
       "aria-label": clearLabel,
       "data-testid": TestIds.clear,
       children: /* @__PURE__ */ jsx(DismissSmall_default, { "aria-hidden": "true" })
@@ -462,13 +485,14 @@ const DropdownTrigger = ({
       readOnly: !isSearchable,
       placeholder: isMultiple && selectedItems.length > 0 ? "" : placeholder,
       "aria-label": ariaLabel,
+      "aria-labelledby": labelId,
       "aria-describedby": descriptionId,
       onFocus,
       onBlur
     }
   );
   if (isMultiple) {
-    return /* @__PURE__ */ jsxs(Combobox.InputGroup, { className: triggerClassName, children: [
+    return /* @__PURE__ */ jsxs(Combobox.InputGroup, { className: inputGroupClassName, children: [
       /* @__PURE__ */ jsx(
         DropdownChips,
         {
@@ -481,7 +505,7 @@ const DropdownTrigger = ({
     ] });
   }
   if (isSearchable) {
-    return /* @__PURE__ */ jsxs(Combobox.InputGroup, { className: triggerClassName, children: [
+    return /* @__PURE__ */ jsxs(Combobox.InputGroup, { className: inputGroupClassName, children: [
       inputControl,
       clearControl
     ] });
@@ -508,6 +532,7 @@ const DropdownList = ({
   inputValue,
   limit,
   isGrid,
+  isSearchable,
   columns,
   inline,
   isMultiple,
@@ -517,13 +542,16 @@ const DropdownList = ({
 }) => {
   const optionClassName = clsx(
     styles.option,
+    selectors.option,
     formatClassNames(semanticClassNames.option)
   );
   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, inputValue));
+  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;
@@ -540,6 +568,7 @@ const DropdownList = ({
         {
           className: clsx(
             styles.inlineList,
+            selectors.list,
             formatClassNames(semanticClassNames.listbox)
           ),
           "data-testid": TestIds.listbox,
@@ -555,6 +584,7 @@ const DropdownList = ({
     {
       className: clsx(
         styles.popup,
+        selectors.list,
         formatClassNames(semanticClassNames.listbox)
       ),
       "data-testid": TestIds.listbox,
@@ -591,6 +621,7 @@ function Dropdown(props) {
     name = defaultValues.name,
     triggerMode = defaultValues.triggerMode,
     applyButtonLabel = defaultValues.applyButtonLabel,
+    previewList,
     direction,
     a11y,
     onChange = noop,
@@ -651,7 +682,7 @@ function Dropdown(props) {
     inline
   });
   const t = translate(ARIA_LABEL_NAMESPACE);
-  const ariaLabel = t(AriaLabels.root.key) || (a11y == null ? void 0 : a11y.ariaLabel) || AriaLabels.root.default;
+  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 rootClassName = clsx(
@@ -662,9 +693,11 @@ function Dropdown(props) {
     !direction && directionStyles.fallbackDirection
   );
   const descriptionId = description2 ? `${id}-description` : void 0;
+  const comboboxId = `${id}-combobox`;
+  const labelId = label2 ? `${comboboxId}-label` : void 0;
   const fieldName = name || void 0;
   const hasInput = isMultiple || isSearchable;
-  const popupOpen = isMultiple || !isSearchable ? isOpen : isOpen && hasQuery;
+  const popupOpen = previewList === true || (isMultiple || !isSearchable ? isOpen : isOpen && hasQuery);
   const triggerRegion = /* @__PURE__ */ jsx(
     DropdownTrigger,
     {
@@ -675,6 +708,7 @@ function Dropdown(props) {
       selectedItems,
       placeholder,
       ariaLabel,
+      labelId,
       clearLabel,
       removeItemLabel,
       descriptionId,
@@ -690,6 +724,7 @@ function Dropdown(props) {
       inputValue,
       limit,
       isGrid,
+      isSearchable,
       columns,
       inline,
       isMultiple,
@@ -701,6 +736,7 @@ function Dropdown(props) {
   const field = /* @__PURE__ */ jsxs(
     Combobox.Root,
     {
+      id: comboboxId,
       multiple: isMultiple,
       value: isMultiple ? selectedItems : selectedItems[0] ?? null,
       onValueChange: (next) => {
@@ -730,7 +766,18 @@ function Dropdown(props) {
       ...inline ? {} : { open: popupOpen, onOpenChange: setIsOpen },
       ...isSearchable ? { inputValue, onInputValueChange: handleInputValueChange } : {},
       children: [
-        label2 && /* @__PURE__ */ jsx(Combobox.Label, { className: styles.label, "data-testid": TestIds.label, children: label2 }),
+        label2 && /* @__PURE__ */ jsx(
+          Combobox.Label,
+          {
+            className: clsx(
+              styles.label,
+              selectors.label,
+              formatClassNames(semanticClassNames.label)
+            ),
+            "data-testid": TestIds.label,
+            children: label2
+          }
+        ),
         triggerRegion,
         list2
       ]

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

@@ -1,4 +1,9 @@
+import { default as React } from 'react';
 import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
-import { default as Dropdown } from './Dropdown';
-export default Dropdown;
+import { DropdownProps } from './Dropdown.types';
+type DropdownPreviewProps = DropdownProps & {
+    previewChips?: boolean;
+};
+export default function DropdownPreview(props: DropdownPreviewProps): React.JSX.Element;
 export declare const resolveManifestOverrides: ResolveManifestOverrides;
+export {};

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

@@ -6,6 +6,7 @@ type DropdownListProps = {
     inputValue: string;
     limit: number;
     isGrid: boolean;
+    isSearchable: boolean;
     columns: number;
     inline: boolean;
     isMultiple: boolean;
@@ -13,5 +14,5 @@ type DropdownListProps = {
     hasQuery: boolean;
     popoverContainer: HTMLDivElement | null;
 };
-export declare const DropdownList: ({ optionItems, filterItem, inputValue, limit, isGrid, columns, inline, isMultiple, hasInput, hasQuery, popoverContainer, }: DropdownListProps) => React.ReactElement;
+export declare const DropdownList: ({ optionItems, filterItem, inputValue, limit, isGrid, isSearchable, columns, inline, isMultiple, hasInput, hasQuery, popoverContainer, }: DropdownListProps) => React.ReactElement;
 export {};

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

@@ -7,12 +7,13 @@ type DropdownTriggerProps = {
     selectedLabel: string;
     selectedItems: Array<DropdownItem>;
     placeholder: string;
-    ariaLabel: string;
+    ariaLabel: string | undefined;
+    labelId: string | undefined;
     clearLabel: string;
     removeItemLabel: string;
     descriptionId: string | undefined;
     onFocus: (event: React.FocusEvent) => void;
     onBlur: (event: React.FocusEvent) => void;
 };
-export declare const DropdownTrigger: ({ isMultiple, isSearchable, clearable, selectedLabel, selectedItems, placeholder, ariaLabel, clearLabel, removeItemLabel, descriptionId, onFocus, onBlur, }: DropdownTriggerProps) => React.ReactElement;
+export declare const DropdownTrigger: ({ isMultiple, isSearchable, clearable, selectedLabel, selectedItems, placeholder, ariaLabel, labelId, clearLabel, removeItemLabel, descriptionId, onFocus, onBlur, }: DropdownTriggerProps) => React.ReactElement;
 export {};

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

@@ -9,6 +9,73 @@ export declare const DesignStates: {
             readonly className: "dropdown--disabled";
         };
     };
+    readonly input: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "dropdown__input--hover";
+        };
+        readonly focus: {
+            readonly displayName: "Focus";
+            readonly className: "dropdown__input--focus";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "dropdown__input--disabled";
+        };
+    };
+    readonly trigger: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "dropdown__trigger--hover";
+        };
+        readonly selected: {
+            readonly displayName: "Selected";
+            readonly className: "dropdown__trigger--selected";
+        };
+    };
+    readonly clearButton: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "dropdown__clear--hover";
+        };
+        readonly selected: {
+            readonly displayName: "Selected";
+            readonly className: "dropdown__clear--selected";
+        };
+    };
+    readonly option: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "dropdown__option--hover";
+        };
+        readonly selected: {
+            readonly displayName: "Selected";
+            readonly className: "dropdown__option--selected";
+        };
+    };
+    readonly chip: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "dropdown__chip--hover";
+        };
+        readonly selected: {
+            readonly displayName: "Selected";
+            readonly className: "dropdown__chip--selected";
+        };
+    };
+};
+export declare const ElementKeys: {
+    readonly label: "label";
+    readonly input: "input";
+    readonly trigger: "trigger";
+    readonly clearButton: "clearButton";
+    readonly list: "list";
+    readonly option: "option";
+    readonly chip: "chip";
+};
+export declare const FunctionalStateKeys: {
+    readonly previewList: "previewList";
+    readonly previewChips: "previewChips";
 };
 export declare const DisplayNames: {
     root: {
@@ -56,6 +123,7 @@ export declare const DisplayNames: {
             paddingInlineStart: string;
             paddingInlineEnd: string;
             gap: string;
+            boxShadow: string;
             textAlign: string;
             font: string;
             textColor: string;
@@ -65,6 +133,18 @@ export declare const DisplayNames: {
             helperColor: string;
             optionTextColor: string;
             optionHoverBackgroundColor: string;
+            placeholderColor: string;
+            chipBackgroundColor: string;
+            chipTextColor: string;
+        };
+        elements: {
+            label: string;
+            input: string;
+            trigger: string;
+            clearButton: string;
+            list: string;
+            option: string;
+            chip: string;
         };
         displayGroups: {
             optionsGroup: string;
@@ -87,7 +167,7 @@ export declare const defaultValues: {
     readonly openOnInputClick: true;
     readonly inline: false;
     readonly grid: false;
-    readonly columns: 3;
+    readonly columns: 2;
     readonly limit: -1;
     readonly label: "";
     readonly required: false;
@@ -115,12 +195,24 @@ export declare const TestIds: {
 };
 export declare const selectors: {
     readonly root: "dropdown";
+    readonly label: "dropdown-label";
+    readonly input: "dropdown-input";
+    readonly trigger: "dropdown-trigger";
+    readonly clear: "dropdown-clear";
+    readonly list: "dropdown-list";
+    readonly option: "dropdown-option";
+    readonly chip: "dropdown-chip";
 };
 export declare const semanticClassNames: {
     readonly root: "dropdown";
+    readonly label: "dropdown__label";
+    readonly input: "dropdown__input";
     readonly trigger: "dropdown__trigger";
+    readonly clear: "dropdown__clear";
     readonly listbox: "dropdown__listbox";
     readonly option: "dropdown__option";
+    readonly chips: "dropdown__chips";
+    readonly chip: "dropdown__chip";
     readonly applyButton: "dropdown__apply-button";
 };
 export declare const ARIA_LABEL_NAMESPACE = "ariaLabels";

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

@@ -1,8 +1,9 @@
 .root__WnTks {
   box-sizing: border-box;
   display: inline-flex;
-  align-items: center;
-  gap: var(--gap);
+  flex-direction: column;
+  align-items: stretch;
+  gap: 8px;
   min-width: var(--minWidth, 240px);
   max-width: var(--maxWidth, 100%);
 }
@@ -31,8 +32,9 @@
   padding-inline-end: var(--paddingInlineEnd);
   color: var(--textColor, var(--wst-paragraph-2-color, #000));
   font: var(--font, var(--wst-paragraph-2-font));
+  box-shadow: var(--boxShadow, none);
 }
-.root__WnTks .trigger__J7jn7:focus-within {
+.root__WnTks .trigger__J7jn7:focus-within, .root__WnTks .trigger__J7jn7.dropdown__input--focus {
   border-color: var(--borderColor, var(--wst-system-line-1-color, #000));
 }
 .root__WnTks .option__QJeiF {
@@ -45,10 +47,10 @@
   color: var(--optionTextColor, var(--wst-paragraph-2-color, #000));
   font: var(--font, var(--wst-paragraph-2-font));
 }
-.root__WnTks .option__QJeiF[data-highlighted] {
+.root__WnTks .option__QJeiF[data-highlighted], .root__WnTks .option__QJeiF.dropdown__option--hover {
   background-color: var(--optionHoverBackgroundColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent));
 }
-.root__WnTks .option__QJeiF[data-selected] {
+.root__WnTks .option__QJeiF[data-selected], .root__WnTks .option__QJeiF.dropdown__option--selected {
   background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
 }
 
@@ -61,12 +63,13 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: var(--gap, 4px);
 }
 
 .label__Q7fZH {
   font: var(--labelFont, var(--wst-paragraph-2-font));
   color: var(--labelColor, var(--wst-paragraph-2-color, #000));
+  overflow-wrap: break-word;
 }
 
 .description__77blZ {
@@ -118,7 +121,8 @@
   border-start-end-radius: var(--borderStartEndRadius);
   border-end-start-radius: var(--borderEndStartRadius);
   border-end-end-radius: var(--borderEndEndRadius);
-  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent);
+  background-color: var(--chipBackgroundColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 8%, transparent));
+  color: var(--chipTextColor, inherit);
   font: var(--font, var(--wst-paragraph-2-font));
   line-height: 1.4;
 }
@@ -194,7 +198,7 @@
 
 .gridRow__9DEae {
   display: grid;
-  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
+  grid-template-columns: repeat(var(--columns, 2), minmax(0, 1fr));
   gap: 4px;
 }
 
@@ -220,6 +224,9 @@
   color: inherit;
   font: inherit;
 }
+.value__pqgtJ::placeholder {
+  color: var(--placeholderColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 65%, transparent));
+}
 
 .arrow__Q2E2Y {
   flex: none;

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

@@ -1,5 +1,5 @@
-import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, N as NativeStateType, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { D as DesignStates, f as DisplayNames, d as defaultValues, e as selectors } from "../chunks/constants32.js";
+import { C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, N as NativeStateType, E as ELEMENTS, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
+import { D as DesignStates, f as DisplayNames, d as defaultValues, F as FunctionalStateKeys, s as selectors } from "../chunks/constants32.js";
 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";
@@ -23,8 +23,8 @@ const manifest = {
     displayName: DisplayNames.root.elementDisplayName,
     archetype: Archetype.Dropdown,
     layout: {
-      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontal,
-      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.horizontalAndVertical,
+      resizeDirection: LAYOUT.RESIZE_DIRECTION.horizontalAndVertical,
+      contentResizeDirection: LAYOUT.CONTENT_RESIZE_DIRECTION.vertical,
       disableStretching: true,
       disablePositioning: false
     },
@@ -54,7 +54,262 @@ const manifest = {
         className: DesignStates.root.disabled.className,
         pseudoClass: NativeStateType.disabled,
         props: { isDisabled: true }
-      })
+      }),
+      // Display-less functional states: force hidden parts visible while their
+      // element is designed (referenced by the elements' visibleState).
+      [FunctionalStateKeys.previewList]: {
+        props: { previewList: true }
+      },
+      [FunctionalStateKeys.previewChips]: {
+        props: { previewChips: true }
+      }
+    },
+    displayFilters: {
+      states: {
+        hide: [
+          FunctionalStateKeys.previewList,
+          FunctionalStateKeys.previewChips
+        ]
+      }
+    },
+    elements: {
+      label: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.label,
+          selector: getSelector(selectors.label),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssCustomProperties: {
+            labelFont: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
+              displayName: DisplayNames.root.cssCustomProperties.labelFont,
+              defaultValue: "normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
+            },
+            labelColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.labelColor
+            }
+          }
+        }
+      },
+      input: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.input,
+          selector: getSelector(selectors.input),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          // Same var names as the root's — element-scoped overrides.
+          cssCustomProperties: {
+            backgroundColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+              displayName: DisplayNames.root.cssCustomProperties.backgroundColor
+            },
+            borderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+              displayName: DisplayNames.root.cssCustomProperties.borderColor
+            },
+            textColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.textColor
+            },
+            placeholderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.placeholderColor
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.hover.displayName,
+              className: DesignStates.input.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            focus: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.focus.displayName,
+              className: DesignStates.input.focus.className,
+              pseudoClass: NativeStateType.focus
+            }),
+            disabled: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.input.disabled.displayName,
+              className: DesignStates.input.disabled.className,
+              pseudoClass: NativeStateType.disabled,
+              props: { isDisabled: true }
+            })
+          }
+        }
+      },
+      trigger: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.trigger,
+          selector: getSelector(selectors.trigger),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssCustomProperties: {
+            backgroundColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.backgroundColor,
+              displayName: DisplayNames.root.cssCustomProperties.backgroundColor
+            },
+            borderColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.borderColor,
+              displayName: DisplayNames.root.cssCustomProperties.borderColor
+            },
+            textColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.textColor
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.trigger.hover.displayName,
+              className: DesignStates.trigger.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            selected: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.trigger.selected.displayName,
+              className: DesignStates.trigger.selected.className
+            })
+          }
+        }
+      },
+      clearButton: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.clearButton,
+          selector: getSelector(selectors.clear),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.clearButton.hover.displayName,
+              className: DesignStates.clearButton.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            selected: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.clearButton.selected.displayName,
+              className: DesignStates.clearButton.selected.className
+            })
+          }
+        }
+      },
+      list: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.list,
+          selector: getSelector(selectors.list),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssProperties: {
+            background: {},
+            borderTop: {},
+            borderBottom: {},
+            borderInlineStart: {},
+            borderInlineEnd: {},
+            borderStartStartRadius: {},
+            borderStartEndRadius: {},
+            borderEndStartRadius: {},
+            borderEndEndRadius: {}
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewList,
+            elementPath: ".root"
+          }
+        }
+      },
+      option: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.option,
+          selector: getSelector(selectors.option),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssCustomProperties: {
+            optionTextColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.optionTextColor
+            },
+            optionHoverBackgroundColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.optionHoverBackgroundColor
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.option.hover.displayName,
+              className: DesignStates.option.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            selected: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.option.selected.displayName,
+              className: DesignStates.option.selected.className
+            })
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewList,
+            elementPath: ".root"
+          }
+        }
+      },
+      chip: {
+        elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
+        inlineElement: {
+          displayName: DisplayNames.root.elements.chip,
+          selector: getSelector(selectors.chip),
+          behaviors: {
+            selectable: false,
+            removable: false
+          },
+          cssCustomProperties: {
+            chipBackgroundColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.chipBackgroundColor
+            },
+            chipTextColor: {
+              cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
+              displayName: DisplayNames.root.cssCustomProperties.chipTextColor
+            }
+          },
+          states: {
+            hover: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.chip.hover.displayName,
+              className: DesignStates.chip.hover.className,
+              pseudoClass: NativeStateType.hover
+            }),
+            selected: withSpec({
+              spec: IS_SUPPORT_DESIGN_STATE_SPEC,
+              displayName: DesignStates.chip.selected.displayName,
+              className: DesignStates.chip.selected.className
+            })
+          },
+          visibleState: {
+            stateKey: FunctionalStateKeys.previewChips,
+            elementPath: ".root"
+          }
+        }
+      }
     },
     data: {
       options: {
@@ -347,6 +602,10 @@ const manifest = {
         displayName: DisplayNames.root.cssCustomProperties.paddingInlineEnd,
         defaultValue: "12px"
       },
+      boxShadow: {
+        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.boxShadow,
+        displayName: DisplayNames.root.cssCustomProperties.boxShadow
+      },
       gap: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.gap,
         displayName: DisplayNames.root.cssCustomProperties.gap,
@@ -366,15 +625,6 @@ const manifest = {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
         displayName: DisplayNames.root.cssCustomProperties.textColor
       },
-      labelFont: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
-        displayName: DisplayNames.root.cssCustomProperties.labelFont,
-        defaultValue: "normal normal normal 14px/1.4em madefor-text, helveticaneuew01-45ligh, helveticaneuew02-45ligh, helveticaneuew10-45ligh, sans-serif"
-      },
-      labelColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-        displayName: DisplayNames.root.cssCustomProperties.labelColor
-      },
       helperFont: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.font,
         displayName: DisplayNames.root.cssCustomProperties.helperFont,
@@ -383,14 +633,6 @@ const manifest = {
       helperColor: {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
         displayName: DisplayNames.root.cssCustomProperties.helperColor
-      },
-      optionTextColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-        displayName: DisplayNames.root.cssCustomProperties.optionTextColor
-      },
-      optionHoverBackgroundColor: {
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color,
-        displayName: DisplayNames.root.cssCustomProperties.optionHoverBackgroundColor
       }
     }
   },

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

@@ -477,7 +477,7 @@ const Repeater = (props) => {
                 {
                   role: "listitem",
                   className: clsx(semanticClassNames.item, styles.item),
-                  children: renderItem(item2, index)
+                  children: renderItem(item2, index, items.length)
                 },
                 item2
               )),

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

@@ -8,7 +8,7 @@ export interface RepeaterProps {
     className?: string;
     direction?: Direction;
     a11y?: A11y;
-    renderItem?: (itemId: string, itemIndex: number) => React.JSX.Element;
+    renderItem?: (itemId: string, itemIndex: number, itemLength: number) => React.JSX.Element;
     items?: Array<string>;
     onLoadMore?: () => Promise<void>;
     emptyState?: EmptyState;

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

@@ -2,8 +2,48 @@ 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" },
+    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"
+};
 const DisplayNames = {
   root: {
     elementDisplayName: "Dropdown",
@@ -50,6 +90,7 @@ const DisplayNames = {
       paddingInlineStart: "Padding start",
       paddingInlineEnd: "Padding end",
       gap: "Spacing",
+      boxShadow: "Shadow",
       textAlign: "Value alignment",
       font: "Value font",
       textColor: "Value color",
@@ -58,7 +99,19 @@ const DisplayNames = {
       helperFont: "Helper text font",
       helperColor: "Helper text color",
       optionTextColor: "Option text color",
-      optionHoverBackgroundColor: "Option hover background"
+      optionHoverBackgroundColor: "Option hover background",
+      placeholderColor: "Placeholder color",
+      chipBackgroundColor: "Chip background",
+      chipTextColor: "Chip text color"
+    },
+    elements: {
+      label: "Label",
+      input: "Input",
+      trigger: "Button",
+      clearButton: "Clear button",
+      list: "List",
+      option: "Option",
+      chip: "Chip"
     },
     displayGroups: {
       optionsGroup: "Manage options",
@@ -81,7 +134,7 @@ const defaultValues = {
   openOnInputClick: true,
   inline: false,
   grid: false,
-  columns: 3,
+  columns: 2,
   limit: -1,
   label: "",
   required: false,
@@ -108,13 +161,25 @@ const TestIds = {
   description: "dropdown-description"
 };
 const selectors = {
-  root: "dropdown"
+  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",
+  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"
 };
 const ARIA_LABEL_NAMESPACE = "ariaLabels";
@@ -126,12 +191,13 @@ const AriaLabels = {
 export {
   ALL_VALUE as A,
   DesignStates as D,
+  FunctionalStateKeys as F,
   TestIds as T,
-  TriggerModeValues as a,
-  ARIA_LABEL_NAMESPACE as b,
-  AriaLabels as c,
+  semanticClassNames as a,
+  TriggerModeValues as b,
+  ARIA_LABEL_NAMESPACE as c,
   defaultValues as d,
-  selectors as e,
+  AriaLabels as e,
   DisplayNames as f,
-  semanticClassNames as s
+  selectors as s
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2332.0",
+  "version": "1.2334.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "fe06943bccda40d9f359f1458ee99bd92b7ef0ee0462cfa55b5ed597"
+  "falconPackageHash": "641aaf72a7073bed42b46ffb59d7524219b5c6cf59dba5d1e4a87bbd"
 }