@solidxai/core-ui 0.1.7-beta.0 → 0.1.7-beta.3

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

@@ -1,15 +1,16 @@
-import { Message } from "primereact/message";
 import { useEffect, useState } from "react";
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "../ISolidField";
 import { getExtensionComponent } from "../../../../../helpers/registry";
-import { AutoComplete, AutoCompleteCompleteEvent } from "primereact/autocomplete";
-import { Button } from "primereact/button";
+import { SolidAutocomplete } from "../../../../shad-cn-ui/SolidAutocomplete";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidCheckbox } from "../../../../shad-cn-ui/SolidCheckbox";
+import { SolidDialog } from "../../../../shad-cn-ui/SolidDialog";
+import { SolidMessage } from "../../../../shad-cn-ui/SolidMessage";
+import { SolidPanel } from "../../../../shad-cn-ui/SolidPanel";
 import { SolidFormFieldWidgetProps } from "../../../../../types/solid-core";
-import { useRelationEntityHandler } from "./widgets/helpers/useRelationEntityHandler";
+import { useRelationEntityHandler, RelationItem } from "./widgets/helpers/useRelationEntityHandler";
 import { InlineRelationEntityDialog } from "./widgets/helpers/InlineRelationEntityDialog";
-import { Checkbox } from "primereact/checkbox";
-import { Panel } from "primereact/panel";
 import { SolidFieldTooltip } from "../../../../../components/common/SolidFieldTooltip";
 import qs from 'qs';
 import * as Handlebars from "handlebars";
@@ -17,9 +18,12 @@ import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
 import { useRouter } from "../../../../../hooks/useRouter";
 import { usePathname } from "../../../../../hooks/usePathname";
 import { camelCase, capitalize } from "lodash";
+import styles from "../solidFields.module.css";
 import { SolidListView } from "../../../../core/list/SolidListView";
 import { RenderSolidFormEmbededView } from "./SolidRelationManyToOneField";
-import { Dialog } from "primereact/dialog";
+import { buildSyntheticChangeEvent } from "../fieldEventUtils";
+
+type AutoCompleteCompleteEvent = { query: string };
 
 export type FormViewParams = {
     moduleName: any;
@@ -192,9 +196,9 @@ export const DefaultRelationManyToManyAutoCompleteFormEditWidget = ({ formik, fi
 
     return (
         <div className="relative">
-            <div className="flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4">
+            <div className={styles.fieldWrapper}>
                 {showFieldLabel !== false && (
-                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
@@ -202,11 +206,11 @@ export const DefaultRelationManyToManyAutoCompleteFormEditWidget = ({ formik, fi
                 )}
                 {isUnsaved && (
                     <div className="mb-2">
-                        <Message severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
+                        <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">
-                    <AutoComplete
+                    <SolidAutocomplete
                         readOnly={readOnly || readOnlyPermission || isUnsaved}
                         disabled={disabled || readOnlyPermission || isUnsaved}
                         multiple
@@ -219,17 +223,17 @@ export const DefaultRelationManyToManyAutoCompleteFormEditWidget = ({ formik, fi
                         onChange={() => {
                             // Intentionally empty — currentValues is managed via onSelect/onUnselect
                         }}
-                        onSelect={(e) => linkItem(e.value)}
-                        onUnselect={(e) => unlinkItem(e.value)}
+                        onSelect={(e: { value: RelationItem }) => linkItem(e.value)}
+                        onUnselect={(e: { value: RelationItem }) => unlinkItem(e.value)}
                         className="solid-standard-autocomplete w-full"
                     />
                     {fieldContext.field.attrs.inlineCreate && (
                         <>
                             <div>
-                                <Button
-                                    icon="pi pi-plus"
+                                <SolidButton
+                                    icon="si si-plus"
                                     rounded
-                                    outlined
+                                    variant="outline"
                                     aria-label="Filter"
                                     type="button"
                                     size="small"
@@ -250,7 +254,7 @@ export const DefaultRelationManyToManyAutoCompleteFormEditWidget = ({ formik, fi
             </div>
             {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                 <div className="absolute mt-1">
-                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                    <SolidMessage severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                 </div>
             )}
         </div>
@@ -352,11 +356,11 @@ export const DefaultRelationManyToManyCheckBoxFormEditWidget = ({ formik, fieldC
         }
     };
 
-    const headerTemplate = (options: any) => (
-        <div className={`${options.className} justify-content-space-between`}>
+    const panelHeader = (
+        <div className="flex align-items-center gap-3 justify-content-space-between">
             <div className="flex align-items-center gap-3">
                 {showFieldLabel !== false && (
-                    <label className="form-field-label">
+                    <label className={`${styles.fieldLabel} form-field-label`}>
                         {fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
@@ -364,10 +368,10 @@ export const DefaultRelationManyToManyCheckBoxFormEditWidget = ({ formik, fieldC
                 )}
                 {fieldContext.field.attrs.inlineCreate && (
                     <>
-                        <Button
-                            icon="pi pi-plus"
+                        <SolidButton
+                            icon="si si-plus"
                             rounded
-                            outlined
+                            variant="outline"
                             aria-label="Filter"
                             type="button"
                             size="small"
@@ -384,7 +388,6 @@ export const DefaultRelationManyToManyCheckBoxFormEditWidget = ({ formik, fieldC
                     </>
                 )}
             </div>
-            <div>{options.togglerElement}</div>
         </div>
     );
 
@@ -392,27 +395,27 @@ export const DefaultRelationManyToManyCheckBoxFormEditWidget = ({ formik, fieldC
         <div>
             {isUnsaved && (
                 <div className="mb-2">
-                    <Message severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
+                    <SolidMessage severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
                 </div>
             )}
-            <Panel toggleable headerTemplate={headerTemplate}>
+            {panelHeader}
+            <SolidPanel>
                 <div className="formgrid grid">
                     {allOptions.map((item: any, i: number) => (
                         <div key={item.value} className={`field col-6 flex gap-2 ${i >= 2 ? 'mt-3' : ''}`}>
-                            <Checkbox
-                                readOnly={readOnlyPermission || isUnsaved}
-                                disabled={isUnsaved}
-                                inputId={item.label}
+                            <SolidCheckbox
+                                disabled={readOnlyPermission || isUnsaved}
+                                id={item.label}
                                 checked={currentValues.some((s) => s.value === item.value)}
                                 onChange={() => handleCheckboxChange(item)}
                             />
-                            <label htmlFor={item.label} className="form-field-label m-0">
+                            <label htmlFor={item.label} className={`${styles.fieldLabel} form-field-label m-0`}>
                                 {item.label}
                             </label>
                         </div>
                     ))}
                 </div>
-            </Panel>
+            </SolidPanel>
         </div>
     );
 };
@@ -600,7 +603,7 @@ export const DefaultRelationManyToManyListFormEditWidget = ({ formik, fieldConte
     return (
         <div>
             {showFieldLabel !== false && (
-                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>
                     {fieldLabel}
                     {fieldMetadata.required && <span className="text-red-500"> *</span>}
                     <SolidFieldTooltip fieldContext={fieldContext} />
@@ -608,7 +611,7 @@ export const DefaultRelationManyToManyListFormEditWidget = ({ formik, fieldConte
             )}
             {isUnsaved && (
                 <div className="mb-2">
-                    <Message severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
+                    <SolidMessage severity="warn" text={`Please save the ${entityName} first to assign ${fieldLabel}.`} className="w-full justify-content-start" />
                 </div>
             )}
             {listViewParams && (
@@ -625,24 +628,25 @@ export const DefaultRelationManyToManyListFormEditWidget = ({ formik, fieldConte
                 />
             )}
 
-            <Dialog
-                header={`Link existing ${fieldLabel}`}
-                visible={visibleLinkDialog}
-                style={{ width: '30vw', minWidth: 320 }}
-                onHide={() => setVisibleLinkDialog(false)}
+                <SolidDialog
+                    header={`Link existing ${fieldLabel}`}
+                    showHeader={true}
+                    visible={visibleLinkDialog}
+                    style={{ width: '30vw', minWidth: 320 }}
+                    onHide={() => setVisibleLinkDialog(false)}
                 footer={
                     <div className="flex gap-2 justify-content-end">
-                        <Button
+                        <SolidButton
                             label="Link"
                             size="small"
                             disabled={!selectedLinkItem || isLinking}
                             loading={isLinking}
                             onClick={handleLinkConfirm}
                         />
-                        <Button
+                        <SolidButton
                             label="Cancel"
                             size="small"
-                            outlined
+                            variant="outline"
                             className="bg-primary-reverse"
                             onClick={() => setVisibleLinkDialog(false)}
                         />
@@ -653,23 +657,23 @@ export const DefaultRelationManyToManyListFormEditWidget = ({ formik, fieldConte
                     <label className="form-field-label">
                         Search {fieldLabel}
                     </label>
-                    <AutoComplete
+                    <SolidAutocomplete
                         field="label"
                         value={selectedLinkItem}
                         suggestions={suggestions}
                         completeMethod={handleLinkSearch}
-                        onChange={(e) => setSelectedLinkItem(e.value)}
-                        onSelect={(e) => setSelectedLinkItem(e.value)}
+                        onChange={({ value }: { value: any }) => setSelectedLinkItem(value)}
+                        onSelect={({ value }: { value: any }) => setSelectedLinkItem(value)}
                         placeholder={`Type to search...`}
                         className="w-full"
                         dropdown
                     />
                 </div>
-            </Dialog>
+            </SolidDialog>
 
 
-            <Dialog
-                showHeader={false}
+            <SolidDialog
+                header="Save Required"
                 headerClassName="py-2"
                 contentClassName="px-0 pb-0"
                 className="solid-confirm-dialog"
@@ -690,17 +694,17 @@ export const DefaultRelationManyToManyListFormEditWidget = ({ formik, fieldConte
                         . Please click save if you wish to proceed?
                     </p>
                     <div className="flex align-items-center justify-content-start gap-2 mt-3">
-                        <Button label="Save" size="small" onClick={saveParentEntity} />
-                        <Button
+                        <SolidButton label="Save" size="small" onClick={saveParentEntity} />
+                        <SolidButton
                             label="Cancel"
                             size="small"
                             onClick={() => setShowSaveParentEntityConfirmationPopup(false)}
-                            outlined
+                            variant="outline"
                             className="bg-primary-reverse"
                         />
                     </div>
                 </div>
-            </Dialog>
+            </SolidDialog>
         </div>
     );
-};
+};

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

@@ -1 +1 @@
-{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAM5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAU5E,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,EAAE,GAAG,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC;IACf,EAAE,EAAE,GAAG,CAAC;IACR,OAAO,EAAE,GAAG,CAAC;IACb,oBAAoB,EAAE,GAAG,CAAC;IAC1B,MAAM,EAAE,GAAG,CAAC;CACf,CAAA;AAED,qBAAa,2BAA4B,YAAW,WAAW;IAE3D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAqBnB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA2D9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAED,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAoSzG,CAAA;AAED,eAAO,MAAM,0BAA0B,+HAAgI,GAAG,4CA8DzK,CAAA;AAGD,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAiBzG,CAAA;AAMD,eAAO,MAAM,iCAAiC,6BAA8B,yBAAyB,4CA8bpG,CAAA"}
+{"version":3,"file":"SolidRelationManyToOneField.d.ts","sourceRoot":"","sources":["../../../../../../src/components/core/form/fields/relations/SolidRelationManyToOneField.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAI5E,OAAO,EAAE,yBAAyB,EAAE,MAAM,iCAAiC,CAAC;AAc5E,MAAM,MAAM,cAAc,GAAG;IACzB,UAAU,EAAE,GAAG,CAAC;IAChB,SAAS,EAAE,GAAG,CAAC;IACf,EAAE,EAAE,GAAG,CAAC;IACR,OAAO,EAAE,GAAG,CAAC;IACb,oBAAoB,EAAE,GAAG,CAAC;IAC1B,MAAM,EAAE,GAAG,CAAC;CACf,CAAA;AAED,qBAAa,2BAA4B,YAAW,WAAW;IAE3D,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,YAAY,IAAI,GAAG;IAqBnB,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,gBAAgB,IAAI,GAAG,CAAC,MAAM;IA2D9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAoC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAED,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CA6SzG,CAAA;AAED,eAAO,MAAM,0BAA0B,+HAAgI,GAAG,4CA2DzK,CAAA;AAGD,eAAO,MAAM,sCAAsC,6BAA8B,yBAAyB,4CAiBzG,CAAA;AAMD,eAAO,MAAM,iCAAiC,6BAA8B,yBAAyB,4CAucpG,CAAA"}

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

@@ -56,14 +56,14 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createSolidEntityApi } from "../../../../../redux/api/solidEntityApi";
-import { AutoComplete } from "primereact/autocomplete";
-import { Message } from "primereact/message";
+import { SolidAutocomplete } from "../../../../shad-cn-ui/SolidAutocomplete";
+import { SolidButton } from "../../../../shad-cn-ui/SolidButton";
+import { SolidDialog } from "../../../../shad-cn-ui/SolidDialog";
+import { SolidMessage } from "../../../../shad-cn-ui/SolidMessage";
 import qs from "qs";
 import { useEffect, useState } from "react";
 import * as Yup from 'yup';
 import { camelCase } from "lodash";
-import { Button } from "primereact/button";
-import { Dialog } from "primereact/dialog";
 import SolidFormView from '../../../../../components/core/form/SolidFormView';
 import { getExtensionComponent } from "../../../../../helpers/registry";
 import { useDispatch } from 'react-redux';
@@ -73,6 +73,8 @@ import * as Handlebars from "handlebars";
 import { SolidFieldTooltip } from "../../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../../constants/error-messages";
 import { getVirtualScrollerOptions } from "../../../../../helpers/autoCompleteVirtualScroll";
+import { buildSyntheticChangeEvent } from "../fieldEventUtils";
+import styles from "../solidFields.module.css";
 var SolidRelationManyToOneField = /** @class */ (function () {
     function SolidRelationManyToOneField(fieldContext) {
         Object.defineProperty(this, "fieldContext", {
@@ -449,8 +451,14 @@ export var DefaultRelationManyToOneFormEditWidget = function (_a) {
         ], false);
         formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
     };
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " *" }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(AutoComplete, __assign({ readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled || readOnlyPermission }, formik.getFieldProps(fieldLayoutInfo.attrs.name), { id: fieldLayoutInfo.attrs.name, field: "solidManyToOneLabel", value: formik.values[fieldLayoutInfo.attrs.name] || '', dropdown: !readOnlyPermission, suggestions: autoCompleteItems, completeMethod: autoCompleteSearch, onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onFocus: function (e) { return e.target.select(); }, className: "w-full solid-standard-autocomplete", 
+    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 })] }), _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(SolidAutocomplete, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled || readOnlyPermission, id: fieldLayoutInfo.attrs.name, field: "solidManyToOneLabel", value: formik.values[fieldLayoutInfo.attrs.name] || '', dropdown: !readOnlyPermission, suggestions: autoCompleteItems, completeMethod: autoCompleteSearch, onChange: function (_a) {
+                                    var value = _a.value;
+                                    return fieldContext.onChange(buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, value, "text"), 'onFieldChange');
+                                }, onSelect: function (_a) {
+                                    var value = _a.value;
+                                    return fieldContext.onChange(buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, value, "text"), 'onFieldChange');
+                                }, className: "w-full solid-standard-autocomplete", 
                                 // virtualScrollerOptions={{
                                 //     itemSize: 38,
                                 //     lazy: true,
@@ -460,21 +468,19 @@ export var DefaultRelationManyToOneFormEditWidget = function (_a) {
                                     itemsLength: autoCompleteItems.length,
                                     lazy: true,
                                     onLazyLoad: onLazyLoad,
-                                }) })), fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && formViewParams &&
-                                _jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, customCreateHandler: customCreateHandler, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams })] })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_o = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _o === void 0 ? void 0 : _o.toString() }) }))] }));
+                                }) }), fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && formViewParams &&
+                                _jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, customCreateHandler: customCreateHandler, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams })] })] }), 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() }) }))] }));
 };
 export var RenderSolidFormEmbededView = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var formik = _a.formik, fieldContext = _a.fieldContext, customCreateHandler = _a.customCreateHandler, visibleCreateRelationEntity = _a.visibleCreateRelationEntity, setvisibleCreateRelationEntity = _a.setvisibleCreateRelationEntity, formViewParams = _a.formViewParams;
-    var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
-    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-6 flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4';
-    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
-    var parentModelName = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.parentModelName;
-    var childModelName = (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.childModelName;
-    var parentFieldName = (_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.parentFieldName;
-    var childFieldName = (_g = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.childFieldName;
-    var parentModuleName = (_h = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _h === void 0 ? void 0 : _h.parentModuleName;
+    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-6';
+    var parentModelName = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.parentModelName;
+    var childModelName = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.childModelName;
+    var parentFieldName = (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.parentFieldName;
+    var childFieldName = (_f = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.childFieldName;
+    var parentModuleName = (_g = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.parentModuleName;
     var params = {
         moduleName: formViewParams.moduleName,
         modelName: camelCase(formViewParams.modelName),
@@ -490,9 +496,9 @@ export var RenderSolidFormEmbededView = function (_a) {
             setvisibleCreateRelationEntity(false);
         }),
     };
-    return (_jsxs("div", { children: [_jsx("div", { children: _jsx(Button, { icon: "pi pi-plus", rounded: true, outlined: true, "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setvisibleCreateRelationEntity(true); }, className: "custom-add-button" }) }), _jsx(Dialog, { header: "", showHeader: false, visible: visibleCreateRelationEntity, style: {
-                    width: (_m = (_l = (_k = (_j = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _j === void 0 ? void 0 : _j.inlineCreateLayout) === null || _k === void 0 ? void 0 : _k.attrs) === null || _l === void 0 ? void 0 : _l.width) !== null && _m !== void 0 ? _m : "60vw",
-                    height: (_r = (_q = (_p = (_o = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _o === void 0 ? void 0 : _o.inlineCreateLayout) === null || _p === void 0 ? void 0 : _p.attrs) === null || _q === void 0 ? void 0 : _q.height) !== null && _r !== void 0 ? _r : "auto"
+    return (_jsxs("div", { children: [_jsx("div", { children: _jsx(SolidButton, { icon: "si si-plus", rounded: true, variant: "outline", "aria-label": "Filter", type: "button", size: "small", onClick: function () { return setvisibleCreateRelationEntity(true); }, className: "custom-add-button" }) }), _jsx(SolidDialog, { visible: visibleCreateRelationEntity, showHeader: false, style: {
+                    width: (_l = (_k = (_j = (_h = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _h === void 0 ? void 0 : _h.inlineCreateLayout) === null || _j === void 0 ? void 0 : _j.attrs) === null || _k === void 0 ? void 0 : _k.width) !== null && _l !== void 0 ? _l : "60vw",
+                    height: (_q = (_p = (_o = (_m = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _m === void 0 ? void 0 : _m.inlineCreateLayout) === null || _o === void 0 ? void 0 : _o.attrs) === null || _p === void 0 ? void 0 : _p.height) !== null && _q !== void 0 ? _q : "auto"
                 }, onHide: function () {
                     if (!visibleCreateRelationEntity)
                         return;
@@ -509,7 +515,7 @@ export var DefaultRelationManyToOneFormViewWidget = function (_a) {
     var value = formik.values[fieldLayoutInfo.attrs.name];
     var userKeyField = ((_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.coModelFieldToDisplay) ? (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.coModelFieldToDisplay : (_g = (_f = fieldMetadata === null || fieldMetadata === void 0 ? void 0 : fieldMetadata.relationModel) === null || _f === void 0 ? void 0 : _f.userKeyField) === null || _g === void 0 ? void 0 : _g.name;
     var displayValue = value === null || value === void 0 ? void 0 : value[userKeyField];
-    return (_jsxs("div", { className: "mt-2 flex-column gap-2", children: [showFieldLabel !== false && (_jsx("p", { className: "m-0 form-field-label font-medium", children: fieldLabel })), _jsx("p", { className: "m-0", children: displayValue })] }));
+    return (_jsxs("div", { className: styles.fieldViewWrapper, children: [showFieldLabel !== false && (_jsx("p", { className: "".concat(styles.fieldViewLabel, " form-field-label"), children: fieldLabel })), _jsx("p", { className: styles.fieldViewValue, children: displayValue || '' })] }));
 };
 export var PseudoRelationManyToOneFormWidget = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
@@ -884,8 +890,14 @@ export var PseudoRelationManyToOneFormWidget = function (_a) {
         ], false);
         formik.setFieldValue(fieldLayoutInfo.attrs.name, updatedRelationData);
     };
-    return (_jsxs("div", { className: "relative", children: [_jsxs("div", { className: "flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4", children: [showFieldLabel != false &&
-                        _jsxs("label", { htmlFor: fieldLayoutInfo.attrs.name, className: "form-field-label", children: [fieldLabel, fieldMetadata.required && _jsx("span", { className: "text-red-500", children: " * " }), _jsx(SolidFieldTooltip, { fieldContext: fieldContext })] }), _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(AutoComplete, __assign({ readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled || readOnlyPermission || viewMode === "view", field: "solidManyToOneLabel" }, formik.getFieldProps(fieldLayoutInfo.attrs.name), { id: fieldLayoutInfo.attrs.name, value: resolvedValue || null, dropdown: !readOnlyPermission, suggestions: autoCompleteItems, completeMethod: autoCompleteSearch, onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, onFocus: function (e) { return e.target.select(); }, className: "w-full solid-standard-autocomplete", 
+    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 })] }), _jsxs("div", { className: "flex align-items-center gap-3", children: [_jsx(SolidAutocomplete, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled || readOnlyPermission || viewMode === "view", field: "solidManyToOneLabel", id: fieldLayoutInfo.attrs.name, value: resolvedValue || null, dropdown: !readOnlyPermission, suggestions: autoCompleteItems, completeMethod: autoCompleteSearch, onChange: function (_a) {
+                                    var value = _a.value;
+                                    return fieldContext.onChange(buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, value, "text"), 'onFieldChange');
+                                }, onSelect: function (_a) {
+                                    var value = _a.value;
+                                    return fieldContext.onChange(buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, value, "text"), 'onFieldChange');
+                                }, className: "w-full solid-standard-autocomplete", 
                                 // virtualScrollerOptions={{
                                 //     itemSize: 38,
                                 //     lazy: true,
@@ -895,7 +907,7 @@ export var PseudoRelationManyToOneFormWidget = function (_a) {
                                     itemsLength: autoCompleteItems.length,
                                     lazy: true,
                                     onLazyLoad: onLazyLoad,
-                                }) })), fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && formViewParams && viewMode !== "view" &&
-                                _jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, customCreateHandler: customCreateHandler, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams, children: " " })] })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_v = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _v === void 0 ? void 0 : _v.toString() }) }))] }));
+                                }) }), fieldLayoutInfo.attrs.inlineCreate === "true" && readOnlyPermission === false && formViewParams && viewMode !== "view" &&
+                                _jsx(RenderSolidFormEmbededView, { formik: formik, fieldContext: fieldContext, customCreateHandler: customCreateHandler, visibleCreateRelationEntity: visibleCreateRelationEntity, setvisibleCreateRelationEntity: setvisibleCreateRelationEntity, formViewParams: formViewParams, children: " " })] })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(SolidMessage, { severity: "error", text: (_v = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _v === void 0 ? void 0 : _v.toString() }) }))] }));
 };
 //# sourceMappingURL=SolidRelationManyToOneField.js.map