@wix/site-ui 1.83.0 → 1.85.0

package/dist/SelectField/index.js

@@ -0,0 +1,124 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Select, Select_module } from "../Select/index.js";
+import { FieldRoot_FieldRoot, FieldError_FieldError, FieldDescription_FieldDescription } from "../8972.js";
+import * as __rspack_external_react from "react";
+const DEFAULT_ICON = '▾';
+const isDivider = (item)=>'divider' in item;
+const isGroup = (item)=>'groupLabel' in item;
+function renderOption(option) {
+    const { value, label, disabled, icon, description, suffix } = option;
+    const text = label ?? value;
+    const isRich = null != icon || null != description || null != suffix;
+    return /*#__PURE__*/ jsx(Select.Item, {
+        value: value,
+        disabled: disabled,
+        children: isRich ? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                null != icon ? /*#__PURE__*/ jsx("span", {
+                    className: Select_module.itemIcon,
+                    "aria-hidden": "true",
+                    children: icon
+                }) : null,
+                /*#__PURE__*/ jsxs("div", {
+                    className: Select_module.itemContent,
+                    children: [
+                        /*#__PURE__*/ jsx(Select.ItemText, {
+                            children: text
+                        }),
+                        null != description ? /*#__PURE__*/ jsx("div", {
+                            className: Select_module.itemDescription,
+                            children: description
+                        }) : null
+                    ]
+                }),
+                null != suffix ? /*#__PURE__*/ jsx("span", {
+                    className: Select_module.itemSuffix,
+                    children: suffix
+                }) : null
+            ]
+        }) : /*#__PURE__*/ jsx(Select.ItemText, {
+            children: text
+        })
+    }, value);
+}
+const SelectField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ options, label, 'aria-label': ariaLabel, placeholder, description, error, variant = 'floating', alignment = 'start', invalid = false, loading = false, required = false, disabled = false, readOnly, icon = DEFAULT_ICON, outerBorder = false, sideOffset = 4, dir, triggerClassName, popupClassName, ...rootProps }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
+        className: Select_module.root,
+        invalid: invalid,
+        disabled: disabled,
+        children: /*#__PURE__*/ jsxs(Select.Root, {
+            readOnly: readOnly || loading,
+            required: required,
+            disabled: disabled,
+            ...rootProps,
+            children: [
+                null != label ? /*#__PURE__*/ jsxs(Select.Label, {
+                    children: [
+                        label,
+                        required ? /*#__PURE__*/ jsx("span", {
+                            className: Select_module.requiredMarker,
+                            "aria-hidden": "true",
+                            children: "*"
+                        }) : null
+                    ]
+                }) : null,
+                /*#__PURE__*/ jsxs(Select.Trigger, {
+                    ref: ref,
+                    dir: dir,
+                    "aria-label": null == label ? ariaLabel : void 0,
+                    "aria-busy": loading || void 0,
+                    "data-variant": variant,
+                    "data-alignment": alignment,
+                    "data-loading": loading ? '' : void 0,
+                    className: triggerClassName,
+                    children: [
+                        /*#__PURE__*/ jsx(Select.Value, {
+                            placeholder: placeholder
+                        }),
+                        loading ? /*#__PURE__*/ jsx("span", {
+                            className: Select_module.loadingIndicator,
+                            "aria-hidden": "true"
+                        }) : /*#__PURE__*/ jsx(Select.Icon, {
+                            children: icon
+                        })
+                    ]
+                }),
+                null != error ? /*#__PURE__*/ jsx(FieldError_FieldError, {
+                    className: Select_module.error,
+                    match: invalid,
+                    children: error
+                }) : null,
+                null != description ? /*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
+                    className: Select_module.description,
+                    children: description
+                }) : null,
+                /*#__PURE__*/ jsx(Select.Portal, {
+                    children: /*#__PURE__*/ jsx(Select.Positioner, {
+                        alignItemWithTrigger: false,
+                        sideOffset: sideOffset,
+                        children: /*#__PURE__*/ jsx(Select.Popup, {
+                            dir: dir,
+                            "data-variant": variant,
+                            "data-outer-border": outerBorder ? '' : void 0,
+                            className: popupClassName,
+                            children: /*#__PURE__*/ jsx(Select.List, {
+                                children: options.map((item, index)=>{
+                                    if (isDivider(item)) return /*#__PURE__*/ jsx(Select.Separator, {}, `divider-${index}`);
+                                    if (isGroup(item)) return /*#__PURE__*/ jsxs(Select.Group, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Select.GroupLabel, {
+                                                children: item.groupLabel
+                                            }),
+                                            item.options.map(renderOption)
+                                        ]
+                                    }, `group-${index}`);
+                                    return renderOption(item);
+                                })
+                            })
+                        })
+                    })
+                })
+            ]
+        })
+    }));
+SelectField.displayName = 'SelectField';
+export { SelectField };

package/dist/index.d.ts

@@ -8574,6 +8574,8 @@ declare function Root_4<Value>({ className, size, style, ...props }: RootProps<V
 
 declare function Root_5<Value extends number | ReadonlyArray<number>>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
 
+declare type RootOwnProps = Omit<React_2.ComponentProps<typeof Select.Root>, 'children'>;
+
 declare type RootProps<Value> = WithStringClassName<Radio_2.Root.Props<Value>> & {
     size?: number;
 };
@@ -8782,6 +8784,7 @@ export declare interface ScrollAreaViewportState extends ScrollAreaRootState {}
 declare const scrub: "scrub";
 
 export declare const Select: {
+    Root: typeof Select_2.Root;
     Label: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectLabelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
@@ -8794,6 +8797,7 @@ export declare const Select: {
     Icon: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectIconProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLSpanElement>>;
+    Portal: React_2.ForwardRefExoticComponent<Omit<SelectPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
     Backdrop: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectBackdropProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
@@ -8830,9 +8834,9 @@ export declare const Select: {
     GroupLabel: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SelectGroupLabelProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string | undefined;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Root: typeof Select_2.Root;
-    Portal: React_2.ForwardRefExoticComponent<Omit<SelectPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
-    Separator: React_2.ForwardRefExoticComponent<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
+    Separator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SeparatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+        className?: string | undefined;
+    } & React_2.RefAttributes<HTMLDivElement>>;
 };
 
 export declare namespace Select_2 {
@@ -8919,6 +8923,120 @@ export declare interface SelectBackdropState {
     transitionStatus: TransitionStatus;
 }
 
+/**
+ * Composite, data-driven dropdown built on the `Select` atoms.
+ *
+ * Unlike `Select`, which exposes each part for fully custom composition,
+ * `SelectField` renders the full label → trigger → popup → list tree from a
+ * single `options` prop, mirroring the wix-ui-tpa `Dropdown` API.
+ */
+export declare const SelectField: React_2.ForwardRefExoticComponent<RootOwnProps & {
+    /** The options, dividers, and groups to render in the popup. */
+    options: Array<SelectFieldItem>;
+    /** Accessible label rendered above the trigger. */
+    label?: React_2.ReactNode;
+    /** Accessible label for the trigger when no visible `label` is provided. */
+    'aria-label'?: string | undefined;
+    /** Text shown in the trigger when nothing is selected. */
+    placeholder?: string | undefined;
+    /** Always-visible helper text rendered below the trigger. */
+    description?: React_2.ReactNode;
+    /** Error message rendered below the trigger when the field is invalid. */
+    error?: React_2.ReactNode;
+    /** Visual style of the trigger. */
+    variant?: SelectFieldVariant | undefined;
+    /** Horizontal alignment of the trigger value. */
+    alignment?: SelectFieldAlignment | undefined;
+    /** Marks the field invalid, styling the trigger and revealing `error`. */
+    invalid?: boolean | undefined;
+    /** Shows a spinner in place of the icon and blocks interaction. */
+    loading?: boolean | undefined;
+    /** Trigger icon. Defaults to a chevron; replaced by a spinner while loading. */
+    icon?: React_2.ReactNode;
+    /** Draws a border around the popup. */
+    outerBorder?: boolean | undefined;
+    /** Gap in pixels between the trigger and the popup. */
+    sideOffset?: number | undefined;
+    /**
+     * Text direction. Forwarded to both the trigger and the portaled popup so the
+     * popup lays out correctly even though it renders outside the field's subtree.
+     */
+    dir?: "ltr" | "rtl" | undefined;
+    /** Class applied to the trigger button. */
+    triggerClassName?: string | undefined;
+    /** Class applied to the popup. */
+    popupClassName?: string | undefined;
+} & React_2.RefAttributes<HTMLButtonElement>>;
+
+export declare type SelectFieldAlignment = 'start' | 'center';
+
+/** A visual divider between options. */
+export declare type SelectFieldDivider = {
+    divider: true;
+};
+
+/** A labelled group of options rendered under a {@link Select.GroupLabel}. */
+export declare type SelectFieldGroup = {
+    groupLabel: React_2.ReactNode;
+    options: Array<SelectFieldOption>;
+};
+
+export declare type SelectFieldItem = SelectFieldOption | SelectFieldDivider | SelectFieldGroup;
+
+/**
+ * A single selectable option rendered inside the {@link SelectField} popup.
+ * `label` defaults to `value` when omitted. `icon`, `description`, and `suffix`
+ * opt the row into the rich layout (leading icon, secondary line, trailing slot).
+ */
+export declare type SelectFieldOption = {
+    value: string;
+    label?: React_2.ReactNode;
+    disabled?: boolean;
+    icon?: React_2.ReactNode;
+    description?: React_2.ReactNode;
+    suffix?: React_2.ReactNode;
+};
+
+export declare type SelectFieldProps = RootOwnProps & {
+    /** The options, dividers, and groups to render in the popup. */
+    options: Array<SelectFieldItem>;
+    /** Accessible label rendered above the trigger. */
+    label?: React_2.ReactNode;
+    /** Accessible label for the trigger when no visible `label` is provided. */
+    'aria-label'?: string;
+    /** Text shown in the trigger when nothing is selected. */
+    placeholder?: string;
+    /** Always-visible helper text rendered below the trigger. */
+    description?: React_2.ReactNode;
+    /** Error message rendered below the trigger when the field is invalid. */
+    error?: React_2.ReactNode;
+    /** Visual style of the trigger. */
+    variant?: SelectFieldVariant;
+    /** Horizontal alignment of the trigger value. */
+    alignment?: SelectFieldAlignment;
+    /** Marks the field invalid, styling the trigger and revealing `error`. */
+    invalid?: boolean;
+    /** Shows a spinner in place of the icon and blocks interaction. */
+    loading?: boolean;
+    /** Trigger icon. Defaults to a chevron; replaced by a spinner while loading. */
+    icon?: React_2.ReactNode;
+    /** Draws a border around the popup. */
+    outerBorder?: boolean;
+    /** Gap in pixels between the trigger and the popup. */
+    sideOffset?: number;
+    /**
+     * Text direction. Forwarded to both the trigger and the portaled popup so the
+     * popup lays out correctly even though it renders outside the field's subtree.
+     */
+    dir?: 'ltr' | 'rtl';
+    /** Class applied to the trigger button. */
+    triggerClassName?: string;
+    /** Class applied to the popup. */
+    popupClassName?: string;
+};
+
+export declare type SelectFieldVariant = 'floating' | 'box' | 'line';
+
 /**
  * Groups related select items with the corresponding label.
  * Renders a `<div>` element.

package/dist/index.js

@@ -29,6 +29,7 @@ export { Radio, RadioSize } from "./Radio/index.js";
 export { RadioGroup } from "./RadioGroup/index.js";
 export { ScrollArea } from "./ScrollArea/index.js";
 export { Select } from "./Select/index.js";
+export { SelectField } from "./SelectField/index.js";
 export { Separator } from "./Separator/index.js";
 export { Slider, SliderSize } from "./Slider/index.js";
 export { Switch, SwitchSize } from "./Switch/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.83.0",
+  "version": "1.85.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -29,6 +29,7 @@
     "check:lint-and-format": "yarn run -T concurrently yarn:lint yarn:format:check",
     "test:visual": "test-storybook --url http://localhost:6006",
     "test:visual:update": "test-storybook --url http://localhost:6006 --updateSnapshot",
+    "tpa:coverage": "node scripts/tpa-coverage.mjs",
     "verify:component": "node scripts/verify-component-status.mjs",
     "verify:visual": "node scripts/visual-review-component.mjs",
     "tsc": "tsc -b ./tsconfig.json --force",
@@ -37,7 +38,7 @@
     "build-storybook": "NODE_OPTIONS=--max-old-space-size=8192 storybook build"
   },
   "dependencies": {
-    "@wix/wix-ui-icons-common": "^3.114.0",
+    "@wix/wix-ui-icons-common": "^3.173.0",
     "clsx": "2.0.0"
   },
   "peerDependencies": {
@@ -94,5 +95,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "3a309112efa840c5f4adcf6ae31501fc60a3f71247490debd3b674eb"
+  "falconPackageHash": "d0c650c8061789b98b5add0bff6db0e4df6f06baffcc4ac6792b4065"
 }