@solidxai/core-ui 0.1.9-beta.20 → 0.1.9-beta.21

package/dist/components/core/form/fields/relations/RolesGroupedByModuleWidget.tsx

@@ -1,64 +1,31 @@
 import { useEffect, useState } from 'react';
 import qs from 'qs';
-import { SolidFormFieldWidgetProps } from '../../../../../types/solid-core';
-import { useRelationEntityHandler, RelationItem } from './widgets/helpers/useRelationEntityHandler';
 import { SolidAccordion, SolidAccordionItem, SolidAccordionTrigger, SolidAccordionContent } from '../../../../shad-cn-ui/SolidAccordion';
 import { SolidCheckbox } from '../../../../shad-cn-ui/SolidCheckbox';
-import { SolidMessage } from '../../../../shad-cn-ui/SolidMessage';
 import { SolidPanel } from '../../../../shad-cn-ui/SolidPanel';
-import { SolidButton } from '../../../../shad-cn-ui/SolidButton';
-import { capitalize } from 'lodash';
-import { InlineRelationEntityDialog } from './widgets/helpers/InlineRelationEntityDialog';
-import { SolidFieldTooltip } from '../../../../../components/common/SolidFieldTooltip';
 import { solidGet } from '../../../../../http/solidHttp';
-import styles from '../solidFields.module.css';
 
 type RoleGroup = {
     moduleId: number | null;
     moduleDisplayName: string;
-    roles: RelationItem[];
+    roles: { label: string; value: any }[];
 };
 
-/**
- * RolesGroupedByModuleWidget
- *
- * Groups roles by their associated module on the User form:
- *   - Roles with no module → "Default Roles" accordion (first)
- *   - Roles linked to a module → "<Module Display Name> Roles" accordion
- *
- * Each checkbox immediately fires a link/unlink API call.
- */
-export const RolesGroupedByModuleWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-    const fieldMetadata = fieldContext.fieldMetadata;
-    const fieldLayoutInfo = fieldContext.field;
-    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
-    const readOnlyPermission = fieldContext.readOnly;
-
-    const [visibleCreateDialog, setVisibleCreateDialog] = useState(false);
+interface RolesGroupedByModuleWidgetProps {
+    selectedRoles: string[];
+    onToggle: (roleName: string) => void;
+    readOnly?: boolean;
+}
+
+export const RolesGroupedByModuleWidget = ({
+    selectedRoles,
+    onToggle,
+    readOnly = false,
+}: RolesGroupedByModuleWidgetProps) => {
     const [allRoles, setAllRoles] = useState<any[]>([]);
     const [groups, setGroups] = useState<RoleGroup[]>([]);
     const [openItems, setOpenItems] = useState<string[]>([]);
 
-    const {
-        currentValues,
-        fetchCurrentValues,
-        linkItem,
-        unlinkItem,
-        addNewRelation,
-    } = useRelationEntityHandler({ fieldContext });
-
-    // Sync currentValues to Formik for validation
-    useEffect(() => {
-        formik.setFieldValue(fieldLayoutInfo.attrs.name, currentValues);
-    }, [currentValues]);
-
-    // On mount: load currently linked roles
-    useEffect(() => {
-        fetchCurrentValues();
-    }, [fieldContext.data?.id]);
-
-    // Fetch all roles with module populated
     useEffect(() => {
         const fetchRoles = async () => {
             try {
@@ -74,19 +41,18 @@ export const RolesGroupedByModuleWidget = ({ formik, fieldContext }: SolidFormFi
             }
         };
         fetchRoles();
-    }, [fieldContext.data?.id]);
+    }, []);
 
-    // Rebuild groups whenever allRoles changes
     useEffect(() => {
         if (!allRoles.length) return;
 
-        const groupMap = new Map<number | null, { displayName: string; roles: RelationItem[] }>();
+        const groupMap = new Map<number | null, { displayName: string; roles: { label: string; value: any }[] }>();
         groupMap.set(null, { displayName: 'Default', roles: [] });
 
         allRoles.forEach((role: any) => {
             const moduleId: number | null = role.moduleId ?? role.module?.id ?? null;
             const moduleDisplayName: string = role.module?.displayName ?? 'Default';
-            const item: RelationItem = { label: role.name, value: role.id, original: role };
+            const item = { label: role.name, value: role.id };
 
             if (moduleId === null || moduleId === undefined) {
                 groupMap.get(null)!.roles.push(item);
@@ -98,7 +64,6 @@ export const RolesGroupedByModuleWidget = ({ formik, fieldContext }: SolidFormFi
             }
         });
 
-        // Default group first, then modules sorted alphabetically by displayName
         const built: RoleGroup[] = [];
         built.push({ moduleId: null, moduleDisplayName: 'Default', roles: groupMap.get(null)!.roles });
 
@@ -120,122 +85,56 @@ export const RolesGroupedByModuleWidget = ({ formik, fieldContext }: SolidFormFi
         setOpenItems(nonEmpty.map((g) => String(g.moduleId ?? 'default')));
     }, [allRoles]);
 
-    const handleCheckboxChange = (item: RelationItem) => {
-        const isLinked = currentValues.some((s) => s.value === item.value);
-        if (isLinked) unlinkItem(item);
-        else linkItem(item);
-    };
-
-    const isUnsaved = fieldContext.data?.id === undefined || fieldContext.data?.id === 'new';
-    const entityName =
-        fieldContext.solidFormViewMetaData?.data?.solidView?.model?.displayName ||
-        capitalize(fieldContext.modelName);
-
-    const isFormFieldValid = (fmk: any, fieldName: string) =>
-        fmk.touched[fieldName] && fmk.errors[fieldName];
+    if (groups.length === 0) {
+        return (
+            <SolidPanel>
+                <p className="text-sm text-muted-foreground m-0">No roles defined.</p>
+            </SolidPanel>
+        );
+    }
 
     return (
-        <div>
-            {isUnsaved && (
-                <div className="mb-2">
-                    <SolidMessage
-                        severity="warn"
-                        text={`Please save the ${entityName} first to assign ${fieldLabel}.`}
-                        className="w-full justify-content-start"
-                    />
-                </div>
-            )}
-
-            <div className="flex align-items-center gap-3 mb-2">
-                {showFieldLabel !== false && (
-                    <label className={`${styles.fieldLabel} form-field-label`}>
-                        {fieldLabel}
-                        {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                        <SolidFieldTooltip fieldContext={fieldContext} />
-                    </label>
-                )}
-                {fieldLayoutInfo.attrs.inlineCreate && (
-                    <>
-                        <SolidButton
-                            icon="si si-plus"
-                            rounded
-                            variant="outline"
-                            aria-label="Add role"
-                            type="button"
-                            size="sm"
-                            onClick={() => setVisibleCreateDialog(true)}
-                            className="custom-add-button"
-                            disabled={isUnsaved}
-                        />
-                        <InlineRelationEntityDialog
-                            visible={visibleCreateDialog}
-                            setVisible={setVisibleCreateDialog}
-                            fieldContext={fieldContext}
-                            onCreate={addNewRelation}
-                        />
-                    </>
-                )}
-            </div>
-
-            {groups.length === 0 && !isUnsaved && (
-                <SolidPanel>
-                    <p className="text-sm text-muted-foreground m-0">No roles defined.</p>
-                </SolidPanel>
-            )}
-
-            {groups.length > 0 && (
-                <SolidAccordion
-                    type="multiple"
-                    value={openItems}
-                    onValueChange={setOpenItems}
-                    className="w-full"
-                >
-                    {groups.map((group) => {
-                        const key = String(group.moduleId ?? 'default');
-                        const title =
-                            group.moduleId === null
-                                ? 'Default Roles'
-                                : `${group.moduleDisplayName} Roles`;
-                        return (
-                            <SolidAccordionItem key={key} value={key}>
-                                <SolidAccordionTrigger>{title}</SolidAccordionTrigger>
-                                <SolidAccordionContent>
-                                    <div className="formgrid grid pt-1">
-                                        {group.roles.map((item, i) => (
-                                            <div
-                                                key={item.value}
-                                                className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}
-                                            >
-                                                <SolidCheckbox
-                                                    disabled={readOnlyPermission || isUnsaved}
-                                                    id={`role-${item.value}`}
-                                                    checked={currentValues.some((s) => s.value === item.value)}
-                                                    onChange={() => handleCheckboxChange(item)}
-                                                />
-                                                <label
-                                                    htmlFor={`role-${item.value}`}
-                                                    className={`${styles.fieldLabel} form-field-label m-0`}
-                                                >
-                                                    {item.label}
-                                                </label>
-                                            </div>
-                                        ))}
+        <SolidAccordion
+            type="multiple"
+            value={openItems}
+            onValueChange={setOpenItems}
+            className="w-full"
+        >
+            {groups.map((group) => {
+                const key = String(group.moduleId ?? 'default');
+                const title =
+                    group.moduleId === null
+                        ? 'Default Roles'
+                        : `${group.moduleDisplayName} Roles`;
+                return (
+                    <SolidAccordionItem key={key} value={key}>
+                        <SolidAccordionTrigger>{title}</SolidAccordionTrigger>
+                        <SolidAccordionContent>
+                            <div className="flex flex-wrap -mx-2 -mt-2 pt-1">
+                                {group.roles.map((item, i) => (
+                                    <div
+                                        key={item.value}
+                                        className={`field flex w-1/2 gap-2 ${i >= 2 ? 'mt-3' : ''}`}
+                                    >
+                                        <SolidCheckbox
+                                            disabled={readOnly}
+                                            id={`role-${item.value}`}
+                                            checked={selectedRoles.includes(item.label)}
+                                            onChange={() => onToggle(item.label)}
+                                        />
+                                        <label
+                                            htmlFor={`role-${item.value}`}
+                                            className="form-field-label m-0"
+                                        >
+                                            {item.label}
+                                        </label>
                                     </div>
-                                </SolidAccordionContent>
-                            </SolidAccordionItem>
-                        );
-                    })}
-                </SolidAccordion>
-            )}
-
-            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                <div className="mt-1">
-                    <SolidMessage
-                        severity="error"
-                        text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()}
-                    />
-                </div>
-            )}
-        </div>
+                                ))}
+                            </div>
+                        </SolidAccordionContent>
+                    </SolidAccordionItem>
+                );
+            })}
+        </SolidAccordion>
     );
 };

package/dist/components/core/form/fields/relations/SolidRelationManyToManyField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToManyField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAQ5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAiB5E,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,EAAE,GAAG,CAAC;IAChB,EAAE,EAAE,GAAG,CAAC;IACR,OAAO,EAAE,GAAG,CAAC;IACb,cAAc,EAAE,GAAG,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,SAAS,EAAE,GAAG,CAAC;IACf,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,UAAU,EAAE,GAAG,CAAC;IAChB,kBAAkB,EAAE,GAAG,CAAC;IACxB,oBAAoB,EAAE,GAAG,CAAC;IAC1B,mBAAmB,CAAC,EAAE,GAAG,CAAC;IAC1B,gBAAgB,CAAC,EAAE,GAAG,CAAC;CAC1B,CAAC;AAIF,qBAAa,4BAA6B,YAAW,WAAW;IAE5D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAInB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAKnD,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAe9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAkB3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAKjE;AAID;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mDAAmD,6BAA8B,yBAAyB,4CAiJtH,CAAC;AAIF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,+CAA+C,6BAA8B,yBAAyB,4CA+IlH,CAAC;AA6BF,eAAO,MAAM,2CAA2C,6BAA8B,yBAAyB,4CA0Q9G,CAAC"}
+{"version":3,"file":"SolidRelationManyToManyField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToManyField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAQ5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAiB5E,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,EAAE,GAAG,CAAC;IAChB,EAAE,EAAE,GAAG,CAAC;IACR,OAAO,EAAE,GAAG,CAAC;IACb,cAAc,EAAE,GAAG,CAAC;IACpB,YAAY,EAAE,GAAG,CAAC;IAClB,SAAS,EAAE,GAAG,CAAC;IACf,eAAe,CAAC,EAAE,GAAG,CAAC;IACtB,UAAU,EAAE,GAAG,CAAC;IAChB,kBAAkB,EAAE,GAAG,CAAC;IACxB,oBAAoB,EAAE,GAAG,CAAC;IAC1B,mBAAmB,CAAC,EAAE,GAAG,CAAC;IAC1B,gBAAgB,CAAC,EAAE,GAAG,CAAC;CAC1B,CAAC;AAIF,qBAAa,4BAA6B,YAAW,WAAW;IAE5D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAInB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAKnD,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAe9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAkB3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAKjE;AAID;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,mDAAmD,6BAA8B,yBAAyB,4CAiJtH,CAAC;AAIF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,+CAA+C,6BAA8B,yBAAyB,4CA+IlH,CAAC;AA6BF,eAAO,MAAM,2CAA2C,6BAA8B,yBAAyB,4CA4Q9G,CAAC"}

package/dist/components/core/form/fields/relations/SolidRelationManyToManyField.js

@@ -119,7 +119,7 @@ var SolidRelationManyToManyField = /** @class */ (function () {
         value: function (formik) {
             var _a;
             var fieldLayoutInfo = this.fieldContext.field;
-            var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field col-12';
+            var className = ((_a = fieldLayoutInfo.attrs) === null || _a === void 0 ? void 0 : _a.className) || 'field w-full px-2 pt-2';
             var viewWidget = fieldLayoutInfo.attrs.viewWidget;
             var editWidget = fieldLayoutInfo.attrs.editWidget;
             if (!editWidget)
@@ -231,7 +231,7 @@ export var DefaultRelationManyToManyAutoCompleteFormEditWidget = function (_a) {
     }); };
     var isUnsaved = ((_g = fieldContext.data) === null || _g === void 0 ? void 0 : _g.id) === undefined || ((_h = fieldContext.data) === null || _h === void 0 ? void 0 : _h.id) === "new";
     var entityName = ((_m = (_l = (_k = (_j = fieldContext.solidFormViewMetaData) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.solidView) === null || _l === void 0 ? void 0 : _l.model) === null || _m === void 0 ? void 0 : _m.displayName) || capitalize(fieldContext.modelName);
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel !== false && (_jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(SolidAutocomplete, { readOnly: readOnly || readOnlyPermission || isUnsaved, disabled: disabled || readOnlyPermission || isUnsaved, multiple: true, id: fieldLayoutInfo.attrs.name, field: "label", value: currentValues, dropdown: !readOnlyPermission && !isUnsaved, suggestions: suggestions, completeMethod: autoCompleteSearch, onChange: function () {
+    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel !== false && (_jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-start" }) })), _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(SolidAutocomplete, { readOnly: readOnly || readOnlyPermission || isUnsaved, disabled: disabled || readOnlyPermission || isUnsaved, multiple: true, id: fieldLayoutInfo.attrs.name, field: "label", value: currentValues, dropdown: !readOnlyPermission && !isUnsaved, suggestions: suggestions, completeMethod: autoCompleteSearch, onChange: function () {
                                     // Intentionally empty — currentValues is managed via onSelect/onUnselect
                                 }, onSelect: function (e) { return linkItem(e.value); }, onUnselect: function (e) { return unlinkItem(e.value); }, className: "solid-standard-autocomplete w-full" }), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx("div", { children: _jsx(SolidButton, { icon: "si si-plus", rounded: true, variant: "outline", "aria-label": "Filter", type: "button", size: "sm", onClick: function () { return setVisibleCreateDialog(true); }, className: "custom-add-button", disabled: isUnsaved }) }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(SolidMessage, { severity: "error", text: (_o = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _o === void 0 ? void 0 : _o.toString() }) }))] }));
 };
@@ -317,8 +317,8 @@ export var DefaultRelationManyToManyCheckBoxFormEditWidget = function (_a) {
             linkItem(item);
         }
     };
-    var panelHeader = (_jsx("div", { className: "flex align-items-center gap-3 justify-content-space-between", children: _jsxs("div", { className: "flex align-items-center gap-3", children: [showFieldLabel !== false && (_jsxs("label", { className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx(SolidButton, { icon: "si si-plus", rounded: true, variant: "outline", "aria-label": "Filter", type: "button", size: "sm", onClick: function () { return setVisibleCreateDialog(true); }, className: "custom-add-button", disabled: isUnsaved }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] }) }));
-    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), panelHeader, _jsx(SolidPanel, { children: _jsx("div", { className: "formgrid grid", children: allOptions.map(function (item, i) { return (_jsxs("div", { className: "field col-12 sm:col-6 flex gap-2 ".concat(i >= 2 ? 'mt-1 md:mt-3' : 'mt-1 md:mt-0'), children: [_jsx(SolidCheckbox, { disabled: readOnlyPermission || isUnsaved, id: item.label, checked: currentValues.some(function (s) { return s.value === item.value; }), onChange: function () { return handleCheckboxChange(item); } }), _jsx("label", { htmlFor: item.label, className: "".concat(styles.fieldLabel, " form-field-label m-0"), children: item.label })] }, item.value)); }) }) })] }));
+    var panelHeader = (_jsx("div", { className: "flex items-center gap-4 justify-between", children: _jsxs("div", { className: "flex items-center gap-4", children: [showFieldLabel !== false && (_jsxs("label", { className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), fieldContext.field.attrs.inlineCreate && (_jsxs(_Fragment, { children: [_jsx(SolidButton, { icon: "si si-plus", rounded: true, variant: "outline", "aria-label": "Filter", type: "button", size: "sm", onClick: function () { return setVisibleCreateDialog(true); }, className: "custom-add-button", disabled: isUnsaved }), _jsx(InlineRelationEntityDialog, { visible: visibleCreateDialog, setVisible: setVisibleCreateDialog, fieldContext: fieldContext, onCreate: addNewRelation })] }))] }) }));
+    return (_jsxs("div", { children: [isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-start" }) })), panelHeader, _jsx(SolidPanel, { children: _jsx("div", { className: "flex flex-wrap -mx-2 -mt-2", children: allOptions.map(function (item, i) { return (_jsxs("div", { className: "field flex w-full gap-2 sm:w-1/2 ".concat(i >= 2 ? 'mt-1 md:mt-3' : 'mt-1 md:mt-0'), children: [_jsx(SolidCheckbox, { disabled: readOnlyPermission || isUnsaved, id: item.label, checked: currentValues.some(function (s) { return s.value === item.value; }), onChange: function () { return handleCheckboxChange(item); } }), _jsx("label", { htmlFor: item.label, className: "".concat(styles.fieldLabel, " form-field-label m-0"), children: item.label })] }, item.value)); }) }) })] }));
 };
 var buildRelationCustomFilter = function (_a) {
     var _b;
@@ -531,13 +531,13 @@ export var DefaultRelationManyToManyListFormEditWidget = function (_a) {
     }); };
     var isUnsaved = ((_e = fieldContext.data) === null || _e === void 0 ? void 0 : _e.id) === undefined || ((_f = fieldContext.data) === null || _f === void 0 ? void 0 : _f.id) === "new";
     var entityName = ((_k = (_j = (_h = (_g = fieldContext.solidFormViewMetaData) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.solidView) === null || _j === void 0 ? void 0 : _j.model) === null || _k === void 0 ? void 0 : _k.displayName) || capitalize(fieldContext.modelName);
-    return (_jsxs("div", { children: [showFieldLabel !== false && (_jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-content-start" }) })), listViewParams && (_jsx(SolidListView, __assign({}, listViewParams, { embededFieldRelationType: "many-to-many", handleAddClickForEmbeddedView: handleAddClickForEmbeddedView, handleEditClickForEmbeddedView: handleEditClickForEmbeddedView, handleDeleteClick: handleDeleteClick }), refreshList.toString())), readOnlyPermission !== true && formViewParams && (_jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams, handlePopupClose: handlePopupClose })), _jsxs(SolidDialog, { open: visibleLinkDialog, onOpenChange: setVisibleLinkDialog, style: { width: '30vw', minWidth: 320 }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Link existing ".concat(fieldLabel) }), _jsx(SolidDialogDescription, { children: "Search and link an existing ".concat(fieldLabel, " record to this item.") }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { children: _jsxs("div", { className: "flex flex-column gap-2 pt-2", children: [_jsxs("label", { className: "form-field-label", children: ["Search ", fieldLabel] }), _jsx(SolidAutocomplete, { field: "label", value: selectedLinkItem, suggestions: suggestions, completeMethod: handleLinkSearch, onChange: function (_a) {
+    return (_jsxs("div", { children: [_jsxs("div", { className: styles.fieldWrapper, children: [showFieldLabel !== false && (_jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "".concat(styles.fieldLabel, " form-field-label"), children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] })), isUnsaved && (_jsx("div", { className: "mb-2", children: _jsx(SolidMessage, { severity: "warn", text: "Please save the ".concat(entityName, " first to assign ").concat(fieldLabel, "."), className: "w-full justify-start" }) })), listViewParams && (_jsx(SolidListView, __assign({}, listViewParams, { embededFieldRelationType: "many-to-many", handleAddClickForEmbeddedView: handleAddClickForEmbeddedView, handleEditClickForEmbeddedView: handleEditClickForEmbeddedView, handleDeleteClick: handleDeleteClick }), refreshList.toString())), readOnlyPermission !== true && formViewParams && (_jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams, handlePopupClose: handlePopupClose }))] }), _jsxs(SolidDialog, { open: visibleLinkDialog, onOpenChange: setVisibleLinkDialog, style: { width: '30vw', minWidth: 320 }, children: [_jsxs(SolidDialogHeader, { children: [_jsx(SolidDialogTitle, { children: "Link existing ".concat(fieldLabel) }), _jsx(SolidDialogDescription, { children: "Search and link an existing ".concat(fieldLabel, " record to this item.") }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { children: _jsxs("div", { className: "flex flex-col gap-2 pt-2", children: [_jsxs("label", { className: "form-field-label", children: ["Search ", fieldLabel] }), _jsx(SolidAutocomplete, { field: "label", value: selectedLinkItem, suggestions: suggestions, completeMethod: handleLinkSearch, onChange: function (_a) {
                                         var value = _a.value;
                                         return setSelectedLinkItem(value);
                                     }, onSelect: function (_a) {
                                         var value = _a.value;
                                         return setSelectedLinkItem(value);
-                                    }, placeholder: "Type to search...", className: "w-full", dropdown: true })] }) }), _jsxs("div", { className: "solid-radix-dialog-footer flex gap-2 justify-content-end", children: [_jsx(SolidButton, { label: "Link", size: "sm", disabled: !selectedLinkItem || isLinking, loading: isLinking, onClick: handleLinkConfirm }), _jsx(SolidButton, { label: "Cancel", size: "sm", variant: "outline", className: "bg-primary-reverse", onClick: function () { return setVisibleLinkDialog(false); } })] })] }), _jsxs(SolidDialog, { open: showSaveParentEntityConfirmationPopup, onOpenChange: setShowSaveParentEntityConfirmationPopup, className: "solid-confirm-dialog solid-field-confirm-dialog", style: { width: "min(420px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-field-confirm-header", children: [_jsx(SolidDialogTitle, { children: "Save Required" }), _jsx(SolidDialogDescription, { children: "Save the current ".concat(((_o = (_m = (_l = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _l === void 0 ? void 0 : _l.solidView) === null || _m === void 0 ? void 0 : _m.model) === null || _o === void 0 ? void 0 : _o.displayName)
+                                    }, placeholder: "Type to search...", className: "w-full", dropdown: true })] }) }), _jsxs("div", { className: "solid-radix-dialog-footer flex gap-2 justify-end", children: [_jsx(SolidButton, { label: "Link", size: "sm", disabled: !selectedLinkItem || isLinking, loading: isLinking, onClick: handleLinkConfirm }), _jsx(SolidButton, { label: "Cancel", size: "sm", variant: "outline", className: "bg-[var(--primary-color-text)]", onClick: function () { return setVisibleLinkDialog(false); } })] })] }), _jsxs(SolidDialog, { open: showSaveParentEntityConfirmationPopup, onOpenChange: setShowSaveParentEntityConfirmationPopup, className: "solid-confirm-dialog solid-field-confirm-dialog", style: { width: "min(420px, calc(100vw - 2rem))" }, children: [_jsxs(SolidDialogHeader, { className: "solid-field-confirm-header", children: [_jsx(SolidDialogTitle, { children: "Save Required" }), _jsx(SolidDialogDescription, { children: "Save the current ".concat(((_o = (_m = (_l = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _l === void 0 ? void 0 : _l.solidView) === null || _m === void 0 ? void 0 : _m.model) === null || _o === void 0 ? void 0 : _o.displayName)
                                     ? solidFormViewMetaData.data.solidView.model.displayName
                                     : capitalize(fieldContext.modelName), " before creating ").concat(fieldLabel, ".") }), _jsx(SolidDialogClose, {})] }), _jsx(SolidDialogBody, { className: "solid-field-confirm-dialog-body", children: _jsxs("p", { className: "solid-field-confirm-message", children: ["Before creating ", fieldLabel, ", you need to save", " ", ((_r = (_q = (_p = solidFormViewMetaData === null || solidFormViewMetaData === void 0 ? void 0 : solidFormViewMetaData.data) === null || _p === void 0 ? void 0 : _p.solidView) === null || _q === void 0 ? void 0 : _q.model) === null || _r === void 0 ? void 0 : _r.displayName)
                                     ? solidFormViewMetaData.data.solidView.model.displayName