@wix/site-ui 1.88.0 → 1.89.0

package/dist/Select/index.css

@@ -38,8 +38,8 @@
 
 .trigger-UPubf5[data-variant="box"], .trigger-UPubf5[data-variant="line"] {
   justify-content: space-between;
-  width: 220px;
-  min-width: 220px;
+  width: 100%;
+  min-width: 88px;
   padding-inline: 12px;
 }
 
@@ -50,6 +50,7 @@
     var(--wst-system-line-1-color, #000) 60%,
     transparent);
   background-color: var(--wst-primary-background-color, #fff);
+  border-radius: 4px;
 }
 
 .trigger-UPubf5[data-variant="line"] {
@@ -121,7 +122,7 @@
   transform: none;
 }
 
-.trigger-UPubf5 > span {
+.trigger-UPubf5 > span:not(.value-fKND1Z) {
   white-space: nowrap;
   flex-shrink: 0;
 }
@@ -147,7 +148,7 @@
 }
 
 .value-fKND1Z {
-  text-overflow: ellipsis;
+  text-overflow: clip;
   white-space: nowrap;
   flex: auto;
   min-width: 0;
@@ -167,18 +168,14 @@
 
 .popup-BEvbSY {
   background-color: var(--wst-primary-background-color, #fff);
-  min-width: max(var(--anchor-width), 220px);
+  min-width: max(var(--anchor-width), 88px);
   box-sizing: border-box;
   border: 0;
-  max-width: 320px;
+  border-radius: 4px;
   overflow: hidden;
   box-shadow: 0 4px 8px #0000001f, 0 0 4px #0000001a;
 }
 
-.popup-BEvbSY[data-variant="box"], .popup-BEvbSY[data-variant="line"] {
-  min-width: max(var(--anchor-width), 220px);
-}
-
 .popup-BEvbSY[data-outer-border] {
   border-width: var(--wst-system-line-1-width, 1px);
   border-style: solid;
@@ -187,43 +184,6 @@
     transparent);
 }
 
-.popupDynamicWidth-XmkrCB {
-  width: max-content;
-}
-
-.narrowTrigger-sSpJ7t {
-  justify-content: space-between;
-  width: 200px;
-}
-
-.narrowTrigger-sSpJ7t .value-fKND1Z {
-  flex-shrink: 1;
-  flex-basis: 0;
-}
-
-.blockTrigger-FJvDrq {
-  justify-content: space-between;
-  width: 320px;
-}
-
-.exampleStack-urnxUp {
-  flex-direction: column;
-  gap: 10px;
-  display: flex;
-}
-
-.counter-vIhcIf {
-  min-width: 20px;
-  height: 20px;
-  font: var(--wst-paragraph-3-font);
-  color: var(--wst-paragraph-2-color, #000);
-  background-color: color-mix(in srgb,
-    var(--wst-base-2-color, #000) 8%,
-    transparent);
-  border-radius: 10px;
-  padding-inline: 6px;
-}
-
 .list-fTpwcL {
   flex-direction: column;
   max-height: 300px;
@@ -305,7 +265,6 @@ body .item-SBIvtk.item-SBIvtk.item-SBIvtk.item-SBIvtk:focus, body .item-SBIvtk.i
 
 .itemDescription-MNvNbs {
   font: var(--wst-paragraph-3-font);
-  color: var(--wst-shade-3-color, #767676);
   text-overflow: ellipsis;
   overflow: hidden;
 }
@@ -323,6 +282,11 @@ body .item-SBIvtk.item-SBIvtk.item-SBIvtk.item-SBIvtk:focus, body .item-SBIvtk.i
   height: 20px;
 }
 
+.itemIcon-ASIDFq svg {
+  width: 100%;
+  height: 100%;
+}
+
 .itemIndicator-qlxJA4 {
   width: 16px;
   height: 16px;
@@ -368,7 +332,16 @@ body .item-SBIvtk.item-SBIvtk.item-SBIvtk.item-SBIvtk:focus, body .item-SBIvtk.i
 .error-rsn7w1 {
   font: var(--wst-paragraph-3-font);
   color: var(--wst-system-error-color, #df3131);
+  align-items: center;
+  gap: 4px;
   margin: 4px 0 0;
+  display: flex;
+}
+
+.error-rsn7w1 svg {
+  flex-shrink: 0;
+  width: 1lh;
+  height: 1lh;
 }
 
 .description-WHObss {

package/dist/Select/index.js

@@ -1813,11 +1813,6 @@ const Select_module = {
     backdrop: "backdrop-kGw5mZ",
     positioner: "positioner-rz27gX",
     popup: "popup-BEvbSY",
-    popupDynamicWidth: "popupDynamicWidth-XmkrCB",
-    narrowTrigger: "narrowTrigger-sSpJ7t",
-    blockTrigger: "blockTrigger-FJvDrq",
-    exampleStack: "exampleStack-urnxUp",
-    counter: "counter-vIhcIf",
     list: "list-fTpwcL",
     item: "item-SBIvtk",
     itemText: "itemText-tVdjcF",

package/dist/SelectField/index.d.ts

@@ -719,8 +719,9 @@ export declare const SelectField: React_2.ForwardRefExoticComponent<RootOwnProps
     /** 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.
+     * Text direction. Forwarded to the trigger and to the portaled positioner +
+     * popup so they lay out and anchor (RTL-aware `align`) correctly even though
+     * they render outside the field's subtree.
      */
     dir?: "ltr" | "rtl" | undefined;
     /** Class applied to the trigger button. */
@@ -786,8 +787,9 @@ export declare type SelectFieldProps = RootOwnProps & {
     /** 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.
+     * Text direction. Forwarded to the trigger and to the portaled positioner +
+     * popup so they lay out and anchor (RTL-aware `align`) correctly even though
+     * they render outside the field's subtree.
      */
     dir?: 'ltr' | 'rtl';
     /** Class applied to the trigger button. */

package/dist/SelectField/index.js

@@ -1,8 +1,8 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown, InfoCircle } from "@wix/wix-ui-icons-common";
 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) {
@@ -41,7 +41,7 @@ function renderOption(option) {
         })
     }, 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, {
+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 = /*#__PURE__*/ jsx(ChevronDown, {}), outerBorder = false, sideOffset = 4, dir, triggerClassName, popupClassName, ...rootProps }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
         className: Select_module.root,
         invalid: invalid,
         disabled: disabled,
@@ -82,10 +82,15 @@ const SelectField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ options,
                         })
                     ]
                 }),
-                null != error ? /*#__PURE__*/ jsx(FieldError_FieldError, {
+                null != error ? /*#__PURE__*/ jsxs(FieldError_FieldError, {
                     className: Select_module.error,
                     match: invalid,
-                    children: error
+                    children: [
+                        /*#__PURE__*/ jsx(InfoCircle, {
+                            "aria-hidden": true
+                        }),
+                        error
+                    ]
                 }) : null,
                 null != description ? /*#__PURE__*/ jsx(FieldDescription_FieldDescription, {
                     className: Select_module.description,
@@ -93,6 +98,8 @@ const SelectField = /*#__PURE__*/ __rspack_external_react.forwardRef(({ options,
                 }) : null,
                 /*#__PURE__*/ jsx(Select.Portal, {
                     children: /*#__PURE__*/ jsx(Select.Positioner, {
+                        dir: dir,
+                        align: "start",
                         alignItemWithTrigger: false,
                         sideOffset: sideOffset,
                         children: /*#__PURE__*/ jsx(Select.Popup, {

package/dist/index.d.ts

@@ -8958,8 +8958,9 @@ export declare const SelectField: React_2.ForwardRefExoticComponent<RootOwnProps
     /** 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.
+     * Text direction. Forwarded to the trigger and to the portaled positioner +
+     * popup so they lay out and anchor (RTL-aware `align`) correctly even though
+     * they render outside the field's subtree.
      */
     dir?: "ltr" | "rtl" | undefined;
     /** Class applied to the trigger button. */
@@ -9025,8 +9026,9 @@ export declare type SelectFieldProps = RootOwnProps & {
     /** 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.
+     * Text direction. Forwarded to the trigger and to the portaled positioner +
+     * popup so they lay out and anchor (RTL-aware `align`) correctly even though
+     * they render outside the field's subtree.
      */
     dir?: 'ltr' | 'rtl';
     /** Class applied to the trigger button. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.88.0",
+  "version": "1.89.0",
   "description": "Pure UI components for the Wix site builder",
   "license": "MIT",
   "type": "module",
@@ -95,5 +95,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "5487b52dceba792843845f2f0203cae7c727c8654c0ebf616e361b66"
+  "falconPackageHash": "44b9b3e5fde142552a4990cc7f18cc6b31df121b9494732e85bbca72"
 }