@wix/editor-react-components 1.2331.0 → 1.2333.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;