@wix/site-ui 1.305.0 → 1.306.0

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

@@ -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>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/site-ui",
-  "version": "1.305.0",
+  "version": "1.306.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": "5508fda51c2dac629f39cd93488e8c4e4cef5872969641420fa389eb"
 }