@wix/editor-react-components 1.2253.0 → 1.2255.0

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

@@ -0,0 +1,4 @@
+import { ResolveManifestOverrides } from '../../../utils/ResolveManifestOverrides';
+import { default as Dropdown } from './Dropdown';
+export default Dropdown;
+export declare const resolveManifestOverrides: ResolveManifestOverrides;

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

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { DropdownItem } from '../dropdownUtils';
+export declare const DropdownChips: ({ items, inputControl, removeItemLabel, }: {
+    items: Array<DropdownItem>;
+    inputControl: React.ReactNode;
+    removeItemLabel: string;
+}) => React.ReactElement;

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

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { DropdownItem } from '../dropdownUtils';
+type DropdownListProps = {
+    optionItems: Array<DropdownItem>;
+    filterItem: (item: DropdownItem, typed: string) => boolean;
+    inputValue: string;
+    limit: number;
+    isGrid: boolean;
+    columns: number;
+    inline: boolean;
+    isMultiple: boolean;
+    hasInput: boolean;
+    hasQuery: boolean;
+    popoverContainer: HTMLDivElement | null;
+};
+export declare const DropdownList: ({ optionItems, filterItem, inputValue, limit, isGrid, columns, inline, isMultiple, hasInput, hasQuery, popoverContainer, }: DropdownListProps) => React.ReactElement;
+export {};

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { DropdownItem } from '../dropdownUtils';
+type DropdownTriggerProps = {
+    isMultiple: boolean;
+    isSearchable: boolean;
+    clearable: boolean;
+    selectedLabel: string;
+    selectedItems: Array<DropdownItem>;
+    placeholder: string;
+    ariaLabel: string;
+    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 {};

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

@@ -0,0 +1,140 @@
+export declare const DesignStates: {
+    readonly root: {
+        readonly hover: {
+            readonly displayName: "Hover";
+            readonly className: "dropdown--hover";
+        };
+        readonly disabled: {
+            readonly displayName: "Disabled";
+            readonly className: "dropdown--disabled";
+        };
+    };
+};
+export declare const DisplayNames: {
+    root: {
+        elementDisplayName: string;
+        data: {
+            options: string;
+            optionLabel: string;
+            optionValue: string;
+            value: string;
+            values: string;
+            inputValue: string;
+            open: string;
+            isDisabled: string;
+            placeholder: string;
+            searchable: string;
+            multiple: string;
+            clearable: string;
+            autoHighlight: string;
+            openOnInputClick: string;
+            inline: string;
+            grid: string;
+            columns: string;
+            limit: string;
+            label: string;
+            required: string;
+            readOnly: string;
+            description: string;
+            triggerMode: {
+                displayName: string;
+                options: {
+                    onSelection: string;
+                    onApply: string;
+                };
+            };
+            applyButtonLabel: string;
+        };
+        cssCustomProperties: {
+            width: string;
+            maxWidth: string;
+            backgroundColor: string;
+            borderColor: string;
+            borderWidth: string;
+            paddingTop: string;
+            paddingBottom: string;
+            paddingInlineStart: string;
+            paddingInlineEnd: string;
+            gap: string;
+            textAlign: string;
+            font: string;
+            textColor: string;
+            labelFont: string;
+            labelColor: string;
+            helperFont: string;
+            helperColor: string;
+            optionTextColor: string;
+            optionHoverBackgroundColor: string;
+        };
+        displayGroups: {
+            optionsGroup: string;
+            sizeGroup: string;
+            backgroundGroup: string;
+            cornersGroup: string;
+            paddingGroup: string;
+        };
+    };
+};
+export declare const defaultValues: {
+    readonly placeholder: "Select a value";
+    readonly inputValue: "";
+    readonly open: false;
+    readonly isDisabled: false;
+    readonly searchable: false;
+    readonly multiple: false;
+    readonly clearable: false;
+    readonly autoHighlight: false;
+    readonly openOnInputClick: true;
+    readonly inline: false;
+    readonly grid: false;
+    readonly columns: 3;
+    readonly limit: -1;
+    readonly label: "";
+    readonly required: false;
+    readonly readOnly: false;
+    readonly name: "";
+    readonly description: "";
+    readonly triggerMode: "onSelection";
+    readonly applyButtonLabel: "Apply";
+    readonly noResultsText: "No results";
+};
+export declare const enum TriggerModeValues {
+    OnSelection = "onSelection",
+    OnApply = "onApply"
+}
+/** The value that represents the cleared / empty state. */
+export declare const ALL_VALUE = "";
+export declare const TestIds: {
+    readonly root: "dropdown-root";
+    readonly label: "dropdown-label";
+    readonly trigger: "dropdown-trigger";
+    readonly listbox: "dropdown-listbox";
+    readonly clear: "dropdown-clear";
+    readonly applyButton: "dropdown-apply-button";
+    readonly description: "dropdown-description";
+};
+export declare const selectors: {
+    readonly root: "dropdown";
+};
+export declare const semanticClassNames: {
+    readonly root: "dropdown";
+    readonly trigger: "dropdown__trigger";
+    readonly listbox: "dropdown__listbox";
+    readonly option: "dropdown__option";
+    readonly applyButton: "dropdown__apply-button";
+};
+export declare const ARIA_LABEL_NAMESPACE = "ariaLabels";
+export declare const AriaLabels: {
+    readonly root: {
+        readonly key: "Dropdown_AriaLabel";
+        readonly default: "Dropdown";
+    };
+    readonly clear: {
+        readonly key: "Dropdown_AriaLabel_Clear";
+        readonly default: "Clear";
+    };
+    readonly removeItem: {
+        readonly key: "Dropdown_AriaLabel_RemoveItem";
+        readonly default: "Remove";
+    };
+};

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

@@ -0,0 +1,255 @@
+.root__WnTks {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gap);
+  min-width: var(--minWidth, 240px);
+  max-width: var(--maxWidth, 100%);
+}
+.root__WnTks .trigger__J7jn7 {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: 100%;
+  appearance: none;
+  cursor: pointer;
+  text-align: inherit;
+  height: auto;
+  min-height: var(--wst-select-height, 42px);
+  background-color: var(--backgroundColor, var(--wst-primary-background-color, #fff));
+  border-style: solid;
+  border-width: var(--borderWidth);
+  border-color: var(--borderColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent));
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+  padding-top: var(--paddingTop);
+  padding-bottom: var(--paddingBottom);
+  padding-inline-start: var(--paddingInlineStart);
+  padding-inline-end: var(--paddingInlineEnd);
+  color: var(--textColor, var(--wst-paragraph-2-color, #000));
+  font: var(--font, var(--wst-paragraph-2-font));
+}
+.root__WnTks .trigger__J7jn7:focus-within {
+  border-color: var(--borderColor, var(--wst-system-line-1-color, #000));
+}
+.root__WnTks .option__QJeiF {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-block: 10px;
+  padding-inline: 12px;
+  cursor: pointer;
+  color: var(--optionTextColor, var(--wst-paragraph-2-color, #000));
+  font: var(--font, var(--wst-paragraph-2-font));
+}
+.root__WnTks .option__QJeiF[data-highlighted] {
+  background-color: var(--optionHoverBackgroundColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 6%, transparent));
+}
+.root__WnTks .option__QJeiF[data-selected] {
+  background-color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
+}
+
+.multiple__ay77b {
+  width: var(--width, var(--minWidth, 240px));
+}
+
+.select__Lo-N7 {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.label__Q7fZH {
+  font: var(--labelFont, var(--wst-paragraph-2-font));
+  color: var(--labelColor, var(--wst-paragraph-2-color, #000));
+}
+
+.description__77blZ {
+  margin: 0;
+  font: var(--helperFont, var(--wst-paragraph-3-font));
+  color: var(--helperColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 65%, transparent));
+}
+
+.clear__isa6G {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 4px;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.chips__LvQLW {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+.chipsOverflow__mUTan {
+  flex: none;
+  padding-inline: 4px;
+  font: var(--font, var(--wst-paragraph-2-font));
+  line-height: 1.4;
+  white-space: nowrap;
+  color: color-mix(in srgb, var(--wst-paragraph-2-color, #000) 65%, transparent);
+}
+
+.chip__Fr--t {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border-start-start-radius: var(--borderStartStartRadius);
+  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);
+  font: var(--font, var(--wst-paragraph-2-font));
+  line-height: 1.4;
+}
+
+.chipLabel__gL-DJ {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.chipShrink__kDlpE {
+  flex: 0 1 auto;
+  min-width: 0;
+}
+
+.chipRemove__sBxpf {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: none;
+  background: none;
+  color: inherit;
+  font: inherit;
+  line-height: 1;
+  cursor: pointer;
+}
+
+.itemIndicator__-IS1X {
+  margin-inline-start: auto;
+  padding-inline-start: 8px;
+}
+
+.empty__dKQbw {
+  display: block;
+  padding: 12px;
+  text-align: center;
+  font: var(--font, var(--wst-paragraph-2-font));
+  color: var(--wst-shade-3-color, #767676);
+}
+.empty__dKQbw:empty {
+  padding: 0;
+}
+
+.positioner__YS--m {
+  width: var(--anchor-width);
+  z-index: 100;
+}
+
+.popup__GQi1e {
+  box-sizing: border-box;
+  overflow: hidden;
+  background-color: var(--backgroundColor, var(--wst-primary-background-color, #fff));
+  border: var(--borderWidth, 1px) solid var(--borderColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent));
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+  box-shadow: 0 4px 12px color-mix(in srgb, var(--wst-paragraph-2-color, #000) 12%, transparent);
+}
+
+.list__DruZL {
+  display: flex;
+  flex-direction: column;
+  max-height: 300px;
+  overflow-y: auto;
+  padding-block: 4px;
+}
+.list__DruZL:empty {
+  padding-block: 0;
+}
+
+.gridRow__9DEae {
+  display: grid;
+  grid-template-columns: repeat(var(--columns, 3), minmax(0, 1fr));
+  gap: 4px;
+}
+
+.inlineList__eJvV9 {
+  margin-top: 4px;
+  max-height: 240px;
+  overflow-y: auto;
+  border: var(--borderWidth) solid var(--borderColor, color-mix(in srgb, var(--wst-paragraph-2-color, #000) 60%, transparent));
+  border-start-start-radius: var(--borderStartStartRadius);
+  border-start-end-radius: var(--borderStartEndRadius);
+  border-end-start-radius: var(--borderEndStartRadius);
+  border-end-end-radius: var(--borderEndEndRadius);
+}
+
+.value__pqgtJ {
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  text-align: var(--textAlign);
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.arrow__Q2E2Y {
+  flex: none;
+  width: 0;
+  height: 0;
+  border-inline-start: 4px solid transparent;
+  border-inline-end: 4px solid transparent;
+  border-top: 5px solid currentColor;
+}
+
+.applyButton__GsIJM {
+  flex: none;
+}.dropdown {
+  --minWidth: 240px;
+  --maxWidth: 640px;
+  --borderWidth: 1px;
+  --borderStartStartRadius: 4px;
+  --borderStartEndRadius: 4px;
+  --borderEndStartRadius: 4px;
+  --borderEndEndRadius: 4px;
+  --paddingTop: 8px;
+  --paddingBottom: 8px;
+  --paddingInlineStart: 12px;
+  --paddingInlineEnd: 12px;
+  --gap: 8px;
+  --textAlign: start;
+}
+.fallbackDirection__HeRgn:not([dir]) {
+  direction: var(--wix-opt-in-direction);
+}
+.presetWrapper__J1yzj {
+  display: contents;
+}

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

@@ -0,0 +1,24 @@
+import { DropdownFilter, DropdownOption, DropdownProps } from './Dropdown.types';
+/** An option normalized for base-ui: a stable key plus its value and label. */
+export type DropdownItem = {
+    key: string;
+    value: string;
+    label: string;
+};
+/** Reads a value string from a selection item: a bare string or `{ value }`. */
+export declare const readOptionValue: (item: unknown) => string | null;
+/** Drops blank-label options and assigns stable index keys. */
+export declare const toOptionItems: (options: Array<DropdownOption>) => Array<DropdownItem>;
+/** Normalizes the bound `value` (string, `string[]`, or `{ value }[]`) to values. */
+export declare const readSelectedValues: (rawValue: unknown, isMultiple: boolean) => Array<string>;
+/** Builds the per-item match used to filter the list against the typed query. */
+export declare const createFilterItem: (params: {
+    customFilter?: DropdownFilter;
+    isSearchable: boolean;
+    isMultiple: boolean;
+    inline: boolean;
+}) => (item: DropdownItem, typed: string) => boolean;
+export declare const emitChange: (onChange: NonNullable<DropdownProps['onChange']>, value: string | {
+    value: string;
+}[]) => void;
+export declare const emitInput: (onInput: NonNullable<DropdownProps['onInput']>, value: string) => void;

package/dist/site/components/Dropdown/hooks/useChipOverflow.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Returns how many of `count` chips fit on one row of `ref`, leaving room for a
+ * "+N" counter. Renders all chips first (to measure them), then caps; re-runs on
+ * selection change and container resize. Falls back to `count` when it can't
+ * measure (e.g. SSR / not yet laid out).
+ */
+export declare const useChipOverflow: (ref: {
+    current: HTMLElement | null;
+}, count: number) => number;

package/dist/site/components/Dropdown/hooks/useDropdownQuery.d.ts

@@ -0,0 +1,15 @@
+import { DropdownProps } from '../Dropdown.types';
+export declare const useDropdownQuery: (params: {
+    boundInputValue: string | undefined;
+    boundOpen: boolean | undefined;
+    isMultiple: boolean;
+    selectedKey: string | null;
+    selectedOptionLabel: string;
+    onInput: NonNullable<DropdownProps['onInput']>;
+}) => {
+    inputValue: string;
+    handleInputValueChange: (next: string) => void;
+    hasQuery: boolean;
+    isOpen: boolean;
+    setIsOpen: import('react').Dispatch<import('react').SetStateAction<boolean>>;
+};

package/dist/site/components/Dropdown/hooks/useDropdownSelection.d.ts

@@ -0,0 +1,16 @@
+import { DropdownProps } from '../Dropdown.types';
+import { DropdownItem } from '../dropdownUtils';
+export declare const useDropdownSelection: (params: {
+    optionItems: Array<DropdownItem>;
+    selectedValues: Array<string>;
+    isMultiple: boolean;
+    isApplyMode: boolean;
+    onChange: NonNullable<DropdownProps['onChange']>;
+}) => {
+    selectedKeys: string[];
+    selectedItems: DropdownItem[];
+    selectedKey: string;
+    selectedOptionLabel: string;
+    handleSelectionChange: (keys: Array<string>) => void;
+    handleApply: () => void;
+};

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

@@ -0,0 +1,2 @@
+export * from './component';
+export { default, default as Dropdown } from './component';

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

@@ -0,0 +1,6 @@
+'use client';
+
+import Dropdown from './component.js';
+
+export { Dropdown };
+export default Dropdown;

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

@@ -0,0 +1,5 @@
+import { EditorReactComponent } from '@wix/component-protocol/schema';
+declare const manifest: EditorReactComponent & {
+    id: string;
+};
+export default manifest;