@wix/site-ui 1.305.0 → 1.307.0

package/dist/Dialog/index.css

@@ -24,6 +24,10 @@
   overflow-y: auto;
 }
 
+.containScroll-M8I4Mc {
+  overscroll-behavior: contain;
+}
+
 .viewport-nOzLZZ :focus-visible {
   outline: 2px solid var(--wst-links-and-actions-color, #116dff);
   outline-offset: 2px;

package/dist/Dialog/index.d.ts

@@ -139,7 +139,7 @@ export declare const Dialog: {
     Viewport: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AlertDialogViewportProps, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Root: typeof Dialog_2.Root;
+    Root: typeof Root;
     Trigger: typeof Trigger;
     Portal: ({ container, ...props }: PortalProps) => JSX_2.Element;
     Handle: typeof Dialog_2.Handle;
@@ -948,6 +948,8 @@ declare interface ReasonToEventMap {
 
 declare type ReferenceType = Element | VirtualElement;
 
+declare function Root<Payload = unknown>({ modal, ...props }: Dialog_2.Root.Props<Payload>): JSX_2.Element;
+
 declare const scrub: "scrub";
 
 declare const selectors: {

package/dist/Dialog/index.js

@@ -8,11 +8,13 @@ import * as __rspack_external_react from "react";
 const Dialog_module = {
     backdrop: "backdrop-EHLKAc",
     viewport: "viewport-nOzLZZ",
+    containScroll: "containScroll-M8I4Mc",
     popup: "popup-RjSkgq",
     close: "close-zqdBdX",
     title: "title-U8Hyut",
     description: "description-ZV1a4j"
 };
+const PageScrollUnlockedContext = /*#__PURE__*/ __rspack_external_react.createContext(false);
 const Portal = ({ container, ...props })=>/*#__PURE__*/ jsx(DialogPortal_DialogPortal, {
         container: container ?? getThemedContainer(),
         ...props
@@ -42,11 +44,23 @@ const Title = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...
         className: clsx(Dialog_module.title, className),
         ...props
     }));
-const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(DialogViewport_DialogViewport, {
+const Viewport = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>{
+    const pageScrollUnlocked = __rspack_external_react.useContext(PageScrollUnlockedContext);
+    return /*#__PURE__*/ jsx(DialogViewport_DialogViewport, {
         ref: ref,
-        className: clsx(Dialog_module.viewport, className),
+        className: clsx(Dialog_module.viewport, pageScrollUnlocked && Dialog_module.containScroll, className),
         ...props
-    }));
+    });
+});
+function Root({ modal = true, ...props }) {
+    return /*#__PURE__*/ jsx(PageScrollUnlockedContext.Provider, {
+        value: 'trap-focus' === modal,
+        children: /*#__PURE__*/ jsx(DialogRoot, {
+            modal: modal,
+            ...props
+        })
+    });
+}
 function Trigger({ className, ...props }) {
     return /*#__PURE__*/ jsx(DialogTrigger_DialogTrigger, {
         ...props,
@@ -60,7 +74,7 @@ const Dialog = {
     Popup: Popup,
     Title: Title,
     Viewport: Viewport,
-    Root: DialogRoot,
+    Root: Root,
     Trigger: Trigger,
     Portal: Portal,
     Handle: DialogHandle,

package/dist/Field/index.d.ts

@@ -140,13 +140,24 @@ export declare const Field: {
         align?: DescriptionAlign;
     } & React_2.RefAttributes<HTMLParagraphElement>>;
     Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
-        /** `line` swaps the boxed border for a single bottom border. */
+        /** `line` swaps the boxed border for a single bottom border. Inside a `Field.Group`, set it on the group. */
         variant?: ControlVariant;
         /** Content shown inside the field before the input. */
         prefix?: React_2.ReactNode;
         /** Content shown inside the field after the input. */
         suffix?: React_2.ReactNode;
+        /** Class applied to the bordered group rendered when `prefix` or `suffix` is shown. Ignored inside a `Field.Group`. */
+        groupClassName?: string;
     } & React_2.RefAttributes<HTMLElement>>;
+    Group: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
+        className?: string;
+    } & {
+        /** `line` swaps the boxed border for a single bottom border. */
+        variant?: ControlVariant;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Adornment: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "className"> & {
+        className?: string;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLDivElement>>;

package/dist/Field/index.js

@@ -1,4 +1,4 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { InfoCircle } from "@wix/wix-ui-icons-common";
 import clsx from "clsx";
 import { useBaseUiId } from "../6046.js";
@@ -685,10 +685,14 @@ const Field_module = {
     item: "item-kQeHOQ",
     groupLine: "groupLine-vlna4V"
 };
-const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
-        ref: ref,
-        className: clsx(Field_module.root, className),
-        ...props
+const GroupContext = /*#__PURE__*/ __rspack_external_react.createContext(false);
+const Root = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(GroupContext.Provider, {
+        value: false,
+        children: /*#__PURE__*/ jsx(FieldRoot_FieldRoot, {
+            ref: ref,
+            className: clsx(Field_module.root, className),
+            ...props
+        })
     }));
 const Label = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = 'default', ...props }, ref)=>/*#__PURE__*/ jsx(FieldLabel_FieldLabel, {
         ref: ref,
@@ -718,6 +722,21 @@ const Description = /*#__PURE__*/ __rspack_external_react.forwardRef(({ classNam
         }, className),
         ...props
     }));
+const Group = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, variant = 'box', ...props }, ref)=>/*#__PURE__*/ jsx(GroupContext.Provider, {
+        value: true,
+        children: /*#__PURE__*/ jsx("div", {
+            ref: ref,
+            className: clsx(Input_module.root, Field_module.group, {
+                [Field_module.groupLine]: 'line' === variant
+            }, className),
+            ...props
+        })
+    }));
+const Adornment = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx("span", {
+        ref: ref,
+        className: clsx(Field_module.adornment, className),
+        ...props
+    }));
 const TEXT_INPUT_TYPES = new Set([
     'text',
     'email',
@@ -733,7 +752,8 @@ const TEXT_INPUT_TYPES = new Set([
     'time'
 ]);
 const hasAdornment = (node)=>null != node && 'boolean' != typeof node;
-const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', variant = 'box', prefix, suffix, ...props }, ref)=>{
+const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, type = 'text', variant = 'box', prefix, suffix, groupClassName, ...props }, ref)=>{
+    const insideGroup = __rspack_external_react.useContext(GroupContext);
     const showPrefix = hasAdornment(prefix);
     const showSuffix = hasAdornment(suffix);
     const adorned = showPrefix || showSuffix;
@@ -745,27 +765,28 @@ const Control = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, t
         }, Field_module.control, {
             [Field_module.controlLine]: 'line' === variant
         }, {
-            'has-custom-focus': adorned
+            'has-custom-focus': adorned || insideGroup
         }, className),
         ...props
     });
-    if (!adorned) return control;
-    return /*#__PURE__*/ jsxs("div", {
-        className: clsx(Input_module.root, Field_module.group, {
-            [Field_module.groupLine]: 'line' === variant
-        }),
+    const adornedControl = /*#__PURE__*/ jsxs(Fragment, {
         children: [
-            showPrefix && /*#__PURE__*/ jsx("span", {
-                className: Field_module.adornment,
+            showPrefix && /*#__PURE__*/ jsx(Adornment, {
                 children: prefix
             }),
             control,
-            showSuffix && /*#__PURE__*/ jsx("span", {
-                className: Field_module.adornment,
+            showSuffix && /*#__PURE__*/ jsx(Adornment, {
                 children: suffix
             })
         ]
     });
+    if (insideGroup) return adornedControl;
+    if (!adorned) return control;
+    return /*#__PURE__*/ jsx(Group, {
+        variant: variant,
+        className: groupClassName,
+        children: adornedControl
+    });
 });
 const Item = /*#__PURE__*/ __rspack_external_react.forwardRef(({ className, ...props }, ref)=>/*#__PURE__*/ jsx(FieldItem_FieldItem, {
         ref: ref,
@@ -778,6 +799,8 @@ const Field = {
     Error: Error,
     Description: Description,
     Control: Control,
+    Group: Group,
+    Adornment: Adornment,
     Item: Item,
     Validity: FieldValidity_FieldValidity
 };

package/dist/RadioField/index.d.ts

@@ -70,13 +70,24 @@ declare const Field: {
         align?: DescriptionAlign;
     } & React_2.RefAttributes<HTMLParagraphElement>>;
     Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
-        /** `line` swaps the boxed border for a single bottom border. */
+        /** `line` swaps the boxed border for a single bottom border. Inside a `Field.Group`, set it on the group. */
         variant?: ControlVariant;
         /** Content shown inside the field before the input. */
         prefix?: React_2.ReactNode;
         /** Content shown inside the field after the input. */
         suffix?: React_2.ReactNode;
+        /** Class applied to the bordered group rendered when `prefix` or `suffix` is shown. Ignored inside a `Field.Group`. */
+        groupClassName?: string;
     } & React_2.RefAttributes<HTMLElement>>;
+    Group: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
+        className?: string;
+    } & {
+        /** `line` swaps the boxed border for a single bottom border. */
+        variant?: ControlVariant;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Adornment: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "className"> & {
+        className?: string;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLDivElement>>;

package/dist/index.d.ts

@@ -3157,7 +3157,7 @@ export declare const Dialog: {
     Viewport: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<AlertDialogViewportProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Root: typeof Dialog_2.Root;
+    Root: typeof Root_3;
     Trigger: typeof Trigger_3;
     Portal: ({ container, ...props }: PortalProps) => JSX_2.Element;
     Handle: typeof Dialog_2.Handle;
@@ -4237,13 +4237,24 @@ export declare const Field: {
         align?: DescriptionAlign;
     } & React_2.RefAttributes<HTMLParagraphElement>>;
     Control: React_2.ForwardRefExoticComponent<Omit<WithStringClassName<Omit<Omit<FieldControlProps_2, "ref"> & React_2.RefAttributes<HTMLElement>, "ref">>, "prefix" | "suffix"> & {
-        /** `line` swaps the boxed border for a single bottom border. */
+        /** `line` swaps the boxed border for a single bottom border. Inside a `Field.Group`, set it on the group. */
         variant?: ControlVariant;
         /** Content shown inside the field before the input. */
         prefix?: React_2.ReactNode;
         /** Content shown inside the field after the input. */
         suffix?: React_2.ReactNode;
+        /** Class applied to the bordered group rendered when `prefix` or `suffix` is shown. Ignored inside a `Field.Group`. */
+        groupClassName?: string;
     } & React_2.RefAttributes<HTMLElement>>;
+    Group: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "className"> & {
+        className?: string;
+    } & {
+        /** `line` swaps the boxed border for a single bottom border. */
+        variant?: ControlVariant;
+    } & React_2.RefAttributes<HTMLDivElement>>;
+    Adornment: React_2.ForwardRefExoticComponent<Omit<Omit<React_2.DetailedHTMLProps<React_2.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref">, "className"> & {
+        className?: string;
+    } & React_2.RefAttributes<HTMLSpanElement>>;
     Item: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<FieldItemProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLDivElement>>;
@@ -6335,7 +6346,7 @@ export declare const NavigationMenu: {
     Icon: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<NavigationMenuIconProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLSpanElement>>;
-    Root: typeof Root_3;
+    Root: typeof Root_4;
     Portal: React_2.ForwardRefExoticComponent<Omit<NavigationMenuPortalProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>>;
 };
 
@@ -8355,7 +8366,7 @@ export declare interface ProgressValueProps extends Omit<BaseUIComponentProps<'s
 export declare interface ProgressValueState extends ProgressRootState {}
 
 export declare const Radio: {
-    Root: typeof Root_4;
+    Root: typeof Root_5;
     Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<RadioIndicatorProps_2, "ref"> & React_2.RefAttributes<HTMLSpanElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLSpanElement>>;
@@ -8764,13 +8775,15 @@ declare function Root_2<Value = any>({ className, dir, separator, 'aria-label':
     separator?: React_2.ReactNode;
 }): JSX_2.Element;
 
-declare function Root_3<Value = any>({ className, orientation, ...props }: WithStringClassName<NavigationMenu_2.Root.Props<Value>>): JSX_2.Element;
+declare function Root_3<Payload = unknown>({ modal, ...props }: Dialog_2.Root.Props<Payload>): JSX_2.Element;
 
-declare function Root_4<Value>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
+declare function Root_4<Value = any>({ className, orientation, ...props }: WithStringClassName<NavigationMenu_2.Root.Props<Value>>): JSX_2.Element;
 
-declare function Root_5<Value extends number | ReadonlyArray<number>>({ className, size, style, ...props }: RootProps_3<Value>): JSX_2.Element;
+declare function Root_5<Value>({ className, size, style, ...props }: RootProps_2<Value>): JSX_2.Element;
 
-declare const Root_6: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToastRootProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
+declare function Root_6<Value extends number | ReadonlyArray<number>>({ className, size, style, ...props }: RootProps_3<Value>): JSX_2.Element;
+
+declare const Root_7: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<ToastRootProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
     className?: string;
 } & {
     skin?: string;
@@ -11728,7 +11741,7 @@ export declare const Slider: {
     Indicator: React_2.ForwardRefExoticComponent<Omit<Omit<Omit<SliderIndicatorProps_2, "ref"> & React_2.RefAttributes<HTMLDivElement>, "ref">, "className"> & {
         className?: string;
     } & React_2.RefAttributes<HTMLDivElement>>;
-    Root: typeof Root_5;
+    Root: typeof Root_6;
 };
 
 export declare namespace Slider_2 {
@@ -12795,7 +12808,7 @@ declare type ToastNamespace = {
     Provider: typeof Toast_2.Provider;
     Portal: typeof Portal;
     Viewport: typeof Viewport;
-    Root: typeof Root_6;
+    Root: typeof Root_7;
     Title: typeof Title_2;
     Close: typeof CloseButton;
     useToastManager: typeof Toast_2.useToastManager;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.305.0",
+  "version": "1.307.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": "a737b726b90b19a7cb5c486bea69d5838e150d73656b13a69374a7c8"
+  "falconPackageHash": "897e7589cc1211e7c27a38dab7d7123acc891838bf54a7872b808b1d"
 }