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

package/dist/components/core/form/fields/SolidDateField.tsx

@@ -1,6 +1,7 @@
 
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
+import { SolidDatePicker } from "../../../shad-cn-ui/SolidDatePicker";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
+import { buildSyntheticChangeEvent } from "./fieldEventUtils";
 import { useEffect, useRef, useState } from "react";
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
@@ -8,9 +9,15 @@ import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFormFieldWidgetProps, SolidListFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
-import { Tag } from "primereact/tag";
 import { StatusIcon } from '../../../../components/core/extension/solid-core/CustomIcon/StatusIcon';
 import { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';
+import styles from "./solidFields.module.css";
+
+const toDateValue = (value: any) => {
+    if (!value) return null;
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+};
 
 export class SolidDateField implements ISolidField {
 
@@ -111,95 +118,48 @@ export class SolidDateField implements ISolidField {
 
 
 export const DefaultDateFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
-
-    const [overlayVisible, setOverlayVisible] = useState(false);
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
     const className = fieldLayoutInfo.attrs?.className || 'field col-12';
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const calendarRef = useRef<any>(null); // Reference for the Calendar component
-    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
     const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
     const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const readOnlyPermission = fieldContext.readOnly;
 
     const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
-    // const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
-
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
     const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
-    useEffect(() => {
-        const handleDocumentClick = (event: MouseEvent) => {
-            const inputElement = calendarRef.current?.getInput();
-            const overlayElement = calendarRef.current?.getOverlay();
-
-            if (overlayVisible && inputElement && !inputElement.contains(event.target as Node) && overlayElement && !overlayElement.contains(event.target as Node)) {
-                setOverlayVisible(false);
-            }
-        };
-
-        document.addEventListener('mousedown', handleDocumentClick);
-        return () => {
-            document.removeEventListener('mousedown', handleDocumentClick);
-        };
-    }, [overlayVisible]);
+    const parsedValue = toDateValue(formik.values[fieldLayoutInfo.attrs.name]);
 
-    const handleInputClick = () => {
-        setOverlayVisible(true);
+    const handleChange = (date: Date | null) => {
+        const syntheticEvent = buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, date, "date");
+        fieldContext.onChange(syntheticEvent, "onFieldChange");
     };
 
-
     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">{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
-                        {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                     </label>
                 }
-                <div onClick={handleInputClick} id={fieldLayoutInfo.attrs.name}>
-                    <Calendar
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                        ref={calendarRef} // Attach ref to Calendar
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        name={fieldMetadata.name}
-                        // onChange={formik.handleChange}
-                        onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                        //@ts-ignore
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                        // dateFormat="mm/dd/yy"
-                        // placeholder="mm/dd/yyyy hh:mm"
-                        mask="99/99/9999"
-                        hideOnDateTimeSelect
-                        appendTo="self"
-                        className=""
-                        onFocus={() => setOverlayVisible(true)}
-                        visible={overlayVisible}
-                        onVisibleChange={(e) => {
-                            console.log("Overlay visibility changed:", e.visible);
-                            setOverlayVisible(e.visible);
-                        }}
-                        onBlur={(e: React.FocusEvent) => {
-                            if (calendarRef.current?.getOverlay()?.contains(e.relatedTarget as Node)) {
-                                return;
-                            }
-                            setOverlayVisible(false);
-                        }}
-                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                            if (e.key === "Tab") {
-                                setOverlayVisible(false);
-                            }
-                        }
-                        }
-                    />
-                </div>
+                <SolidDatePicker
+                    selected={parsedValue ?? undefined}
+                    onChange={(date: Date | null) => handleChange(date as Date | null)}
+                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    placeholderText={fieldLayoutInfo.attrs.placeholder}
+                    className=""
+                />
             </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>
@@ -219,15 +179,13 @@ export const DefaultDateFormViewWidget = ({ formik, fieldContext, }: SolidFormFi
 
 
     return (
-        <div className="mt-2 flex flex-column gap-2">
+        <div className={styles.fieldViewWrapper}>
             {showFieldLabel !== false && (
-                <p className="m-0 form-field-label font-medium">
+                <p className={`${styles.fieldViewLabel} form-field-label`}>
                     {fieldLabel}
                 </p>
             )}
-
-            <p className="m-0">
-                {/* {displayValue ?? "-"} */}
+            <p className={styles.fieldViewValue}>
                 <DateFieldViewComponent value={rawValue} format={format} fallback="-"></DateFieldViewComponent>
             </p>
         </div>

package/dist/components/core/form/fields/SolidDateTimeField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDateTimeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidDateTimeField.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAKzE,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAe9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAkC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAKD,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CA6FhG,CAAA;AAGD,eAAO,MAAM,6BAA6B,8BAGvC,yBAAyB,4CA2B3B,CAAC"}
+{"version":3,"file":"SolidDateTimeField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidDateTimeField.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAYzE,qBAAa,kBAAmB,YAAW,WAAW;IAElD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAe9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAkC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAKD,eAAO,MAAM,6BAA6B,6BAA8B,yBAAyB,4CAoDhG,CAAA;AAGD,eAAO,MAAM,6BAA6B,8BAGvC,yBAAyB,4CAwB3B,CAAC"}

package/dist/components/core/form/fields/SolidDateTimeField.js

@@ -10,14 +10,21 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
-import { useEffect, useRef, useState } from "react";
+import { SolidDatePicker } from "../../../shad-cn-ui/SolidDatePicker";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
+import { buildSyntheticChangeEvent } from "./fieldEventUtils";
 import * as Yup from 'yup';
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';
+import styles from "./solidFields.module.css";
+var toDateValue = function (value) {
+    if (!value)
+        return null;
+    var date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+};
 var SolidDateTimeField = /** @class */ (function () {
     function SolidDateTimeField(fieldContext) {
         Object.defineProperty(this, "fieldContext", {
@@ -112,60 +119,27 @@ var SolidDateTimeField = /** @class */ (function () {
 }());
 export { SolidDateTimeField };
 export var DefaultDateTimeFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
     var formik = _a.formik, fieldContext = _a.fieldContext;
-    var _l = useState(false), overlayVisible = _l[0], setOverlayVisible = _l[1];
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
     var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-12';
     var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
-    var calendarRef = useRef(null); // Reference for the Calendar component
-    var fieldDescription = (_d = fieldLayoutInfo.attrs.description) !== null && _d !== void 0 ? _d : fieldMetadata.description;
     var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    var showFieldLabel = (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.showLabel;
+    var showFieldLabel = (_d = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.showLabel;
     var readOnlyPermission = fieldContext.readOnly;
     var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-    var fieldDisabled = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.disabled;
+    var fieldDisabled = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.disabled;
+    var fieldReadonly = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.readonly;
     var formDisabled = (_j = (_h = (_g = solidFormViewMetaData.data.solidView) === null || _g === void 0 ? void 0 : _g.layout) === null || _h === void 0 ? void 0 : _h.attrs) === null || _j === void 0 ? void 0 : _j.disabled;
-    useEffect(function () {
-        var handleDocumentClick = function (event) {
-            var _a, _b;
-            var inputElement = (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.getInput();
-            var overlayElement = (_b = calendarRef.current) === null || _b === void 0 ? void 0 : _b.getOverlay();
-            if (overlayVisible && inputElement && !inputElement.contains(event.target) && overlayElement && !overlayElement.contains(event.target)) {
-                setOverlayVisible(false);
-            }
-        };
-        document.addEventListener('mousedown', handleDocumentClick);
-        return function () {
-            document.removeEventListener('mousedown', handleDocumentClick);
-        };
-    }, [overlayVisible]);
-    var handleInputClick = function () {
-        setOverlayVisible(true);
+    var formReadonly = (_m = (_l = (_k = solidFormViewMetaData.data.solidView) === null || _k === void 0 ? void 0 : _k.layout) === null || _l === void 0 ? void 0 : _l.attrs) === null || _m === void 0 ? void 0 : _m.readonly;
+    var parsedValue = toDateValue(formik.values[fieldLayoutInfo.attrs.name]);
+    var handleChange = function (date) {
+        var syntheticEvent = buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, date, "datetime-local");
+        fieldContext.onChange(syntheticEvent, "onFieldChange");
     };
-    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 })] }), _jsx("div", { onClick: handleInputClick, id: fieldLayoutInfo.attrs.name, children: _jsx(Calendar, { disabled: formDisabled || fieldDisabled || readOnlyPermission, ref: calendarRef, id: fieldLayoutInfo.attrs.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), 
-                            // onChange={formik.handleChange}
-                            onChange: function (e) { return fieldContext.onChange(e, 'onFieldChange'); }, 
-                            //@ts-ignore
-                            value: formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date(), 
-                            // dateFormat="mm/dd/yy"
-                            // placeholder="mm/dd/yyyy hh:mm"
-                            mask: "99/99/9999 99:99", appendTo: "self", showTime: true, hourFormat: "24", hideOnDateTimeSelect: true, onFocus: function () { return setOverlayVisible(true); }, visible: overlayVisible, onVisibleChange: function (e) {
-                                console.log("Overlay visibility changed:", e.visible);
-                                setOverlayVisible(e.visible);
-                            }, onBlur: function (e) {
-                                var _a, _b;
-                                if ((_b = (_a = calendarRef.current) === null || _a === void 0 ? void 0 : _a.getOverlay()) === null || _b === void 0 ? void 0 : _b.contains(e.relatedTarget)) {
-                                    return;
-                                }
-                                setOverlayVisible(false);
-                            }, onKeyDown: function (e) {
-                                if (e.key === "Tab") {
-                                    setOverlayVisible(false);
-                                }
-                            } }) })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_k = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _k === void 0 ? void 0 : _k.toString() }) }))] }));
+    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 })] }), _jsx(SolidDatePicker, { selected: parsedValue !== null && parsedValue !== void 0 ? parsedValue : undefined, onChange: function (date) { return handleChange(date); }, disabled: formDisabled || fieldDisabled || readOnlyPermission, readOnly: formReadonly || fieldReadonly || readOnlyPermission, showTimeSelect: true, dateFormat: "yyyy-MM-dd h:mm aa", placeholderText: fieldLayoutInfo.attrs.placeholder, className: "" })] }), 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 DefaultDateTimeFormViewWidget = function (_a) {
     var _b, _c, _d;
@@ -177,6 +151,6 @@ export var DefaultDateTimeFormViewWidget = function (_a) {
     var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
     var rawValue = formik.values[fieldName];
     var format = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.format;
-    return (_jsxs("div", { className: "mt-2 flex 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: _jsx(DateFieldViewComponent, { value: rawValue, format: format, fallback: "-", showTime: true }) })] }));
+    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: _jsx(DateFieldViewComponent, { value: rawValue, format: format, fallback: "-" }) })] }));
 };
 //# sourceMappingURL=SolidDateTimeField.js.map

package/dist/components/core/form/fields/SolidDateTimeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDateTimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidDateTimeField.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { Calendar } from \"primereact/calendar\";\nimport { Message } from \"primereact/message\";\nimport { useEffect, useRef, useState } from \"react\";\nimport * as Yup from 'yup';\nimport { FormikObject, ISolidField, SolidFieldProps } from \"./ISolidField\";\nimport { getExtensionComponent } from \"../../../../helpers/registry\";\nimport { SolidFormFieldWidgetProps } from \"../../../../types/solid-core\";\nimport { SolidFieldTooltip } from \"../../../../components/common/SolidFieldTooltip\";\nimport { ERROR_MESSAGES } from \"../../../../constants/error-messages\";\nimport { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';\n\nexport class SolidDateTimeField implements ISolidField {\n\n    private fieldContext: SolidFieldProps;\n\n    constructor(fieldContext: SolidFieldProps) {\n        this.fieldContext = fieldContext;\n    }\n\n    updateFormData(value: any, formData: FormData): any {\n        const fieldLayoutInfo = this.fieldContext.field;\n        if (value) {\n            formData.append(fieldLayoutInfo.attrs.name, value);\n        }\n    }\n\n    initialValue(): any {\n        const fieldName = this.fieldContext.field.attrs.name;\n        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;\n\n        const existingValue = this.fieldContext.data[fieldName];\n\n        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';\n    }\n\n    validationSchema(): Yup.Schema {\n        let schema: Yup.DateSchema<Date | null | undefined> = Yup.date();\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n\n        // 1. required \n        if (fieldMetadata.required) {\n            schema = schema.required(ERROR_MESSAGES.FIELD_REUQIRED(fieldLabel));\n        } else {\n            schema = schema.nullable();\n        }\n        return schema;\n    }\n\n    render(formik: FormikObject) {\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n\n        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n        let viewWidget = fieldLayoutInfo.attrs.viewWidget;\n        let editWidget = fieldLayoutInfo.attrs.editWidget;\n        if (!editWidget) {\n            editWidget = 'DefaultDateTimeFormEditWidget';\n        }\n        if (!viewWidget) {\n            viewWidget = 'DefaultDateTimeFormViewWidget';\n        }\n        const viewMode: string = this.fieldContext.viewMode;\n\n        return (\n            <>\n                <div className={className}>\n                    {viewMode === \"view\" &&\n                        this.renderExtensionRenderMode(viewWidget, formik)\n                    }\n                    {viewMode === \"edit\" && (\n                        <>\n                            {editWidget &&\n                                this.renderExtensionRenderMode(editWidget, formik)\n                            }\n                        </>\n                    )\n                    }\n                </div>\n            </>\n        );\n    }\n    renderExtensionRenderMode(widget: string, formik: FormikObject) {\n        let DynamicWidget = getExtensionComponent(widget);\n        const widgetProps: SolidFormFieldWidgetProps = {\n            formik: formik,\n            fieldContext: this.fieldContext,\n        }\n        return (\n            <>\n                {DynamicWidget && <DynamicWidget {...widgetProps} />}\n            </>\n        )\n    }\n}\n\n\n\n\nexport const DefaultDateTimeFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const [overlayVisible, setOverlayVisible] = useState(false);\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const calendarRef = useRef<any>(null); // Reference for the Calendar component\n    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;\n    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n    const readOnlyPermission = fieldContext.readOnly;\n\n    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n\n    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;\n    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;\n\n    useEffect(() => {\n        const handleDocumentClick = (event: MouseEvent) => {\n            const inputElement = calendarRef.current?.getInput();\n            const overlayElement = calendarRef.current?.getOverlay();\n\n            if (overlayVisible && inputElement && !inputElement.contains(event.target as Node) && overlayElement && !overlayElement.contains(event.target as Node)) {\n                setOverlayVisible(false);\n            }\n        };\n\n        document.addEventListener('mousedown', handleDocumentClick);\n        return () => {\n            document.removeEventListener('mousedown', handleDocumentClick);\n        };\n    }, [overlayVisible]);\n\n    const handleInputClick = () => {\n        setOverlayVisible(true);\n    };\n\n    return (\n        <div className=\"relative\">\n            <div className=\"flex flex-column gap-2 mt-1 sm:mt-2 md:mt-3 lg:mt-4\">\n                {showFieldLabel != false &&\n                    <label htmlFor={fieldLayoutInfo.attrs.name} className=\"form-field-label\">{fieldLabel}\n                        {fieldMetadata.required && <span className=\"text-red-500\"> *</span>}\n                        <SolidFieldTooltip fieldContext={fieldContext} />\n                        {/* &nbsp;   {fieldDescription && <span className=\"form_field_help\">({fieldDescription}) </span>} */}\n                    </label>\n                }\n                <div onClick={handleInputClick} id={fieldLayoutInfo.attrs.name}>\n                    <Calendar\n                        disabled={formDisabled || fieldDisabled || readOnlyPermission}\n                        ref={calendarRef} // Attach ref to Calendar\n                        id={fieldLayoutInfo.attrs.name}\n                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}\n                        // onChange={formik.handleChange}\n                        onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}\n                        //@ts-ignore\n                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}\n                        // dateFormat=\"mm/dd/yy\"\n                        // placeholder=\"mm/dd/yyyy hh:mm\"\n                        mask=\"99/99/9999 99:99\"\n                        appendTo=\"self\"\n                        showTime\n                        hourFormat=\"24\"\n                        hideOnDateTimeSelect\n                        onFocus={() => setOverlayVisible(true)}\n                        visible={overlayVisible}\n                        onVisibleChange={(e) => {\n                            console.log(\"Overlay visibility changed:\", e.visible);\n                            setOverlayVisible(e.visible);\n                        }}\n                        onBlur={(e: React.FocusEvent) => {\n                            if (calendarRef.current?.getOverlay()?.contains(e.relatedTarget as Node)) {\n                                return;\n                            }\n                            setOverlayVisible(false);\n                        }}\n                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {\n                            if (e.key === \"Tab\") {\n                                setOverlayVisible(false);\n                            }\n                        }\n                        }\n                    />\n                </div>\n            </div>\n            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (\n                <div className=\"absolute mt-1\">\n                    <Message severity=\"error\" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />\n                </div>\n            )}\n        </div>\n    );\n}\n\n\nexport const DefaultDateTimeFormViewWidget = ({\n    formik,\n    fieldContext,\n}: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n\n    const fieldName = fieldLayoutInfo.attrs.name;\n    const fieldLabel =\n        fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n\n    const rawValue = formik.values[fieldName];\n    const format = fieldLayoutInfo.attrs?.format as string | undefined;\n\n    return (\n        <div className=\"mt-2 flex flex-column gap-2\">\n            {showFieldLabel !== false && (\n                <p className=\"m-0 form-field-label font-medium\">\n                    {fieldLabel}\n                </p>\n            )}\n\n            <p className=\"m-0\">\n                {/* {displayValue ?? \"-\"} */}\n                <DateFieldViewComponent value={rawValue} format={format} fallback=\"-\" showTime={true}></DateFieldViewComponent>\n\n            </p>\n        </div>\n    );\n};\n"]}
+{"version":3,"file":"SolidDateTimeField.js","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidDateTimeField.tsx"],"names":[],"mappings":"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","sourcesContent":["\nimport { SolidDatePicker } from \"../../../shad-cn-ui/SolidDatePicker\";\nimport { SolidMessage } from \"../../../shad-cn-ui/SolidMessage\";\nimport { buildSyntheticChangeEvent } from \"./fieldEventUtils\";\nimport { useEffect, useRef, useState } from \"react\";\nimport * as Yup from 'yup';\nimport { FormikObject, ISolidField, SolidFieldProps } from \"./ISolidField\";\nimport { getExtensionComponent } from \"../../../../helpers/registry\";\nimport { SolidFormFieldWidgetProps } from \"../../../../types/solid-core\";\nimport { SolidFieldTooltip } from \"../../../../components/common/SolidFieldTooltip\";\nimport { ERROR_MESSAGES } from \"../../../../constants/error-messages\";\nimport { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';\nimport styles from \"./solidFields.module.css\";\n\nconst toDateValue = (value: any) => {\n    if (!value) return null;\n    const date = value instanceof Date ? value : new Date(value);\n    return Number.isNaN(date.getTime()) ? null : date;\n};\n\nexport class SolidDateTimeField implements ISolidField {\n\n    private fieldContext: SolidFieldProps;\n\n    constructor(fieldContext: SolidFieldProps) {\n        this.fieldContext = fieldContext;\n    }\n\n    updateFormData(value: any, formData: FormData): any {\n        const fieldLayoutInfo = this.fieldContext.field;\n        if (value) {\n            formData.append(fieldLayoutInfo.attrs.name, value);\n        }\n    }\n\n    initialValue(): any {\n        const fieldName = this.fieldContext.field.attrs.name;\n        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;\n\n        const existingValue = this.fieldContext.data[fieldName];\n\n        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';\n    }\n\n    validationSchema(): Yup.Schema {\n        let schema: Yup.DateSchema<Date | null | undefined> = Yup.date();\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n\n        // 1. required \n        if (fieldMetadata.required) {\n            schema = schema.required(ERROR_MESSAGES.FIELD_REUQIRED(fieldLabel));\n        } else {\n            schema = schema.nullable();\n        }\n        return schema;\n    }\n\n    render(formik: FormikObject) {\n        const fieldMetadata = this.fieldContext.fieldMetadata;\n        const fieldLayoutInfo = this.fieldContext.field;\n        const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n\n        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n        let viewWidget = fieldLayoutInfo.attrs.viewWidget;\n        let editWidget = fieldLayoutInfo.attrs.editWidget;\n        if (!editWidget) {\n            editWidget = 'DefaultDateTimeFormEditWidget';\n        }\n        if (!viewWidget) {\n            viewWidget = 'DefaultDateTimeFormViewWidget';\n        }\n        const viewMode: string = this.fieldContext.viewMode;\n\n        return (\n            <>\n                <div className={className}>\n                    {viewMode === \"view\" &&\n                        this.renderExtensionRenderMode(viewWidget, formik)\n                    }\n                    {viewMode === \"edit\" && (\n                        <>\n                            {editWidget &&\n                                this.renderExtensionRenderMode(editWidget, formik)\n                            }\n                        </>\n                    )\n                    }\n                </div>\n            </>\n        );\n    }\n    renderExtensionRenderMode(widget: string, formik: FormikObject) {\n        let DynamicWidget = getExtensionComponent(widget);\n        const widgetProps: SolidFormFieldWidgetProps = {\n            formik: formik,\n            fieldContext: this.fieldContext,\n        }\n        return (\n            <>\n                {DynamicWidget && <DynamicWidget {...widgetProps} />}\n            </>\n        )\n    }\n}\n\n\n\n\nexport const DefaultDateTimeFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {\n\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n    const className = fieldLayoutInfo.attrs?.className || 'field col-12';\n    const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const solidFormViewMetaData = fieldContext.solidFormViewMetaData;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n    const readOnlyPermission = fieldContext.readOnly;\n\n    const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];\n\n    const fieldDisabled = fieldLayoutInfo.attrs?.disabled;\n    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;\n    const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;\n    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;\n\n    const parsedValue = toDateValue(formik.values[fieldLayoutInfo.attrs.name]);\n\n    const handleChange = (date: Date | null) => {\n        const syntheticEvent = buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, date, \"datetime-local\");\n        fieldContext.onChange(syntheticEvent, \"onFieldChange\");\n    };\n\n    return (\n        <div className=\"relative\">\n            <div className={styles.fieldWrapper}>\n                {showFieldLabel != false &&\n                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}\n                        {fieldMetadata.required && <span className=\"text-red-500\"> *</span>}\n                        <SolidFieldTooltip fieldContext={fieldContext} />\n                        {/* &nbsp;   {fieldDescription && <span className=\"form_field_help\">({fieldDescription}) </span>} */}\n                    </label>\n                }\n                <SolidDatePicker\n                    selected={parsedValue ?? undefined}\n                    onChange={(date: Date | null) => handleChange(date as Date | null)}\n                    disabled={formDisabled || fieldDisabled || readOnlyPermission}\n                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}\n                    showTimeSelect\n                    dateFormat=\"yyyy-MM-dd h:mm aa\"\n                    placeholderText={fieldLayoutInfo.attrs.placeholder}\n                    className=\"\"\n                />\n            </div>\n            {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (\n                <div className=\"absolute mt-1\">\n                    <SolidMessage severity=\"error\" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />\n                </div>\n            )}\n        </div>\n    );\n}\n\n\nexport const DefaultDateTimeFormViewWidget = ({\n    formik,\n    fieldContext,\n}: SolidFormFieldWidgetProps) => {\n    const fieldMetadata = fieldContext.fieldMetadata;\n    const fieldLayoutInfo = fieldContext.field;\n\n    const fieldName = fieldLayoutInfo.attrs.name;\n    const fieldLabel =\n        fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;\n    const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;\n\n    const rawValue = formik.values[fieldName];\n    const format = fieldLayoutInfo.attrs?.format as string | undefined;\n\n    return (\n        <div className={styles.fieldViewWrapper}>\n            {showFieldLabel !== false && (\n                <p className={`${styles.fieldViewLabel} form-field-label`}>\n                    {fieldLabel}\n                </p>\n            )}\n            <p className={styles.fieldViewValue}>\n                <DateFieldViewComponent value={rawValue} format={format} fallback=\"-\"></DateFieldViewComponent>\n            </p>\n        </div>\n    );\n};\n"]}

package/dist/components/core/form/fields/SolidDateTimeField.tsx

@@ -1,6 +1,7 @@
 
-import { Calendar } from "primereact/calendar";
-import { Message } from "primereact/message";
+import { SolidDatePicker } from "../../../shad-cn-ui/SolidDatePicker";
+import { SolidMessage } from "../../../shad-cn-ui/SolidMessage";
+import { buildSyntheticChangeEvent } from "./fieldEventUtils";
 import { useEffect, useRef, useState } from "react";
 import * as Yup from 'yup';
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
@@ -9,6 +10,13 @@ import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
 import { DateFieldViewComponent } from '../../../../components/core/common/DateFieldViewComponent';
+import styles from "./solidFields.module.css";
+
+const toDateValue = (value: any) => {
+    if (!value) return null;
+    const date = value instanceof Date ? value : new Date(value);
+    return Number.isNaN(date.getTime()) ? null : date;
+};
 
 export class SolidDateTimeField implements ISolidField {
 
@@ -102,13 +110,10 @@ export class SolidDateTimeField implements ISolidField {
 
 export const DefaultDateTimeFormEditWidget = ({ formik, fieldContext }: SolidFormFieldWidgetProps) => {
 
-    const [overlayVisible, setOverlayVisible] = useState(false);
     const fieldMetadata = fieldContext.fieldMetadata;
     const fieldLayoutInfo = fieldContext.field;
     const className = fieldLayoutInfo.attrs?.className || 'field col-12';
     const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
-    const calendarRef = useRef<any>(null); // Reference for the Calendar component
-    const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
     const solidFormViewMetaData = fieldContext.solidFormViewMetaData;
     const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
     const readOnlyPermission = fieldContext.readOnly;
@@ -116,79 +121,41 @@ export const DefaultDateTimeFormEditWidget = ({ formik, fieldContext }: SolidFor
     const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
 
     const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+    const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
     const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+    const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
 
-    useEffect(() => {
-        const handleDocumentClick = (event: MouseEvent) => {
-            const inputElement = calendarRef.current?.getInput();
-            const overlayElement = calendarRef.current?.getOverlay();
-
-            if (overlayVisible && inputElement && !inputElement.contains(event.target as Node) && overlayElement && !overlayElement.contains(event.target as Node)) {
-                setOverlayVisible(false);
-            }
-        };
+    const parsedValue = toDateValue(formik.values[fieldLayoutInfo.attrs.name]);
 
-        document.addEventListener('mousedown', handleDocumentClick);
-        return () => {
-            document.removeEventListener('mousedown', handleDocumentClick);
-        };
-    }, [overlayVisible]);
-
-    const handleInputClick = () => {
-        setOverlayVisible(true);
+    const handleChange = (date: Date | null) => {
+        const syntheticEvent = buildSyntheticChangeEvent(fieldLayoutInfo.attrs.name, date, "datetime-local");
+        fieldContext.onChange(syntheticEvent, "onFieldChange");
     };
 
     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">{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className={`${styles.fieldLabel} form-field-label`}>{fieldLabel}
                         {fieldMetadata.required && <span className="text-red-500"> *</span>}
                         <SolidFieldTooltip fieldContext={fieldContext} />
                         {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
                     </label>
                 }
-                <div onClick={handleInputClick} id={fieldLayoutInfo.attrs.name}>
-                    <Calendar
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                        ref={calendarRef} // Attach ref to Calendar
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        // onChange={formik.handleChange}
-                        onChange={(e) => fieldContext.onChange(e, 'onFieldChange')}
-                        //@ts-ignore
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                        // dateFormat="mm/dd/yy"
-                        // placeholder="mm/dd/yyyy hh:mm"
-                        mask="99/99/9999 99:99"
-                        appendTo="self"
-                        showTime
-                        hourFormat="24"
-                        hideOnDateTimeSelect
-                        onFocus={() => setOverlayVisible(true)}
-                        visible={overlayVisible}
-                        onVisibleChange={(e) => {
-                            console.log("Overlay visibility changed:", e.visible);
-                            setOverlayVisible(e.visible);
-                        }}
-                        onBlur={(e: React.FocusEvent) => {
-                            if (calendarRef.current?.getOverlay()?.contains(e.relatedTarget as Node)) {
-                                return;
-                            }
-                            setOverlayVisible(false);
-                        }}
-                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
-                            if (e.key === "Tab") {
-                                setOverlayVisible(false);
-                            }
-                        }
-                        }
-                    />
-                </div>
+                <SolidDatePicker
+                    selected={parsedValue ?? undefined}
+                    onChange={(date: Date | null) => handleChange(date as Date | null)}
+                    disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                    readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                    showTimeSelect
+                    dateFormat="yyyy-MM-dd h:mm aa"
+                    placeholderText={fieldLayoutInfo.attrs.placeholder}
+                    className=""
+                />
             </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>
@@ -212,17 +179,14 @@ export const DefaultDateTimeFormViewWidget = ({
     const format = fieldLayoutInfo.attrs?.format as string | undefined;
 
     return (
-        <div className="mt-2 flex flex-column gap-2">
+        <div className={styles.fieldViewWrapper}>
             {showFieldLabel !== false && (
-                <p className="m-0 form-field-label font-medium">
+                <p className={`${styles.fieldViewLabel} form-field-label`}>
                     {fieldLabel}
                 </p>
             )}
-
-            <p className="m-0">
-                {/* {displayValue ?? "-"} */}
-                <DateFieldViewComponent value={rawValue} format={format} fallback="-" showTime={true}></DateFieldViewComponent>
-
+            <p className={styles.fieldViewValue}>
+                <DateFieldViewComponent value={rawValue} format={format} fallback="-"></DateFieldViewComponent>
             </p>
         </div>
     );

package/dist/components/core/form/fields/SolidDecimalField.d.ts

@@ -1,4 +1,4 @@
-import * as Yup from 'yup';
+import * as Yup from "yup";
 import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
 import { SolidFormFieldWidgetProps } from "../../../../types/solid-core";
 export declare class SolidDecimalField implements ISolidField {

package/dist/components/core/form/fields/SolidDecimalField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SolidDecimalField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidDecimalField.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAIzE,qBAAa,iBAAkB,YAAW,WAAW;IAEjD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAuB9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAiC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAID,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CAc/F,CAAA;AAED,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CAgD/F,CAAA"}
+{"version":3,"file":"SolidDecimalField.d.ts","sourceRoot":"","sources":["../../../../../src/components/core/form/fields/SolidDecimalField.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAE3E,OAAO,EAAE,yBAAyB,EAAE,MAAM,8BAA8B,CAAC;AAKzE,qBAAa,iBAAkB,YAAW,WAAW;IAEjD,OAAO,CAAC,YAAY,CAAkB;gBAE1B,YAAY,EAAE,eAAe;IAIzC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,GAAG,GAAG;IAOnD,YAAY,IAAI,GAAG;IASnB,gBAAgB,IAAI,GAAG,CAAC,MAAM;IAuB9B,MAAM,CAAC,MAAM,EAAE,YAAY;IAiC3B,yBAAyB,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY;CAYjE;AAID,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CAe/F,CAAA;AAED,eAAO,MAAM,4BAA4B,6BAA8B,yBAAyB,4CA4C/F,CAAA"}

package/dist/components/core/form/fields/SolidDecimalField.js

@@ -10,12 +10,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { InputNumber } from "primereact/inputnumber";
-import { Message } from "primereact/message";
-import * as Yup from 'yup';
+import * as Yup from "yup";
+import styles from "./solidFields.module.css";
 import { getExtensionComponent } from "../../../../helpers/registry";
 import { SolidFieldTooltip } from "../../../../components/common/SolidFieldTooltip";
 import { ERROR_MESSAGES } from "../../../../constants/error-messages";
+import { SolidNumberInput } from "../../../shad-cn-ui";
 var SolidDecimalField = /** @class */ (function () {
     function SolidDecimalField(fieldContext) {
         Object.defineProperty(this, "fieldContext", {
@@ -122,27 +122,27 @@ export var DefaultDecimalFormViewWidget = function (_a) {
     var fieldLayoutInfo = fieldContext.field;
     var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
-    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: formik.values[fieldLayoutInfo.attrs.name] && typeof formik.values[fieldLayoutInfo.attrs.name] !== "object" && formik.values[fieldLayoutInfo.attrs.name] })] }));
+    var value = formik.values[fieldLayoutInfo.attrs.name];
+    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: value != null && typeof value !== "object" ? value : '' })] }));
 };
 export var DefaultDecimalFormEditWidget = function (_a) {
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
     var formik = _a.formik, fieldContext = _a.fieldContext;
     var fieldMetadata = fieldContext.fieldMetadata;
     var fieldLayoutInfo = fieldContext.field;
-    var className = ((_b = fieldLayoutInfo.attrs) === null || _b === void 0 ? void 0 : _b.className) || 'field col-12';
-    var fieldLabel = (_c = fieldLayoutInfo.attrs.label) !== null && _c !== void 0 ? _c : fieldMetadata.displayName;
-    var fieldDescription = (_d = fieldLayoutInfo.attrs.description) !== null && _d !== void 0 ? _d : fieldMetadata.description;
+    var fieldLabel = (_b = fieldLayoutInfo.attrs.label) !== null && _b !== void 0 ? _b : fieldMetadata.displayName;
     var solidFormViewMetaData = fieldContext.solidFormViewMetaData;
-    var showFieldLabel = (_e = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.showLabel;
+    var showFieldLabel = (_c = fieldLayoutInfo === null || fieldLayoutInfo === void 0 ? void 0 : fieldLayoutInfo.attrs) === null || _c === void 0 ? void 0 : _c.showLabel;
     var readOnlyPermission = fieldContext.readOnly;
     var isFormFieldValid = function (formik, fieldName) { return formik.touched[fieldName] && formik.errors[fieldName]; };
-    var fieldDisabled = (_f = fieldLayoutInfo.attrs) === null || _f === void 0 ? void 0 : _f.disabled;
-    var fieldReadonly = (_g = fieldLayoutInfo.attrs) === null || _g === void 0 ? void 0 : _g.readonly;
-    var formDisabled = (_k = (_j = (_h = solidFormViewMetaData.data.solidView) === null || _h === void 0 ? void 0 : _h.layout) === null || _j === void 0 ? void 0 : _j.attrs) === null || _k === void 0 ? void 0 : _k.disabled;
-    var formReadonly = (_o = (_m = (_l = solidFormViewMetaData.data.solidView) === null || _l === void 0 ? void 0 : _l.layout) === null || _m === void 0 ? void 0 : _m.attrs) === null || _o === void 0 ? void 0 : _o.readonly;
-    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 })] }), _jsx(InputNumber, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, id: fieldLayoutInfo.attrs.name, minFractionDigits: 2, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), onChange: function (e) {
-                            formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value);
-                        }, value: formik.values[fieldLayoutInfo.attrs.name] || '' })] }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("div", { className: "absolute mt-1", children: _jsx(Message, { severity: "error", text: (_p = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _p === void 0 ? void 0 : _p.toString() }) }))] }));
+    var fieldDisabled = (_d = fieldLayoutInfo.attrs) === null || _d === void 0 ? void 0 : _d.disabled;
+    var fieldReadonly = (_e = fieldLayoutInfo.attrs) === null || _e === void 0 ? void 0 : _e.readonly;
+    var formDisabled = (_h = (_g = (_f = solidFormViewMetaData.data.solidView) === null || _f === void 0 ? void 0 : _f.layout) === null || _g === void 0 ? void 0 : _g.attrs) === null || _h === void 0 ? void 0 : _h.disabled;
+    var formReadonly = (_l = (_k = (_j = solidFormViewMetaData.data.solidView) === null || _j === void 0 ? void 0 : _j.layout) === null || _k === void 0 ? void 0 : _k.attrs) === null || _l === void 0 ? void 0 : _l.readonly;
+    return (_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 })] }), _jsx("div", { className: styles.fieldNumberWrapper, children: _jsx(SolidNumberInput, { readOnly: formReadonly || fieldReadonly || readOnlyPermission, disabled: formDisabled || fieldDisabled, id: fieldLayoutInfo.attrs.name, "aria-describedby": "".concat(fieldLayoutInfo.attrs.name, "-help"), onChange: function (e) {
+                        var nextVal = typeof e.value === "number" ? e.value : null;
+                        formik.setFieldValue(fieldLayoutInfo.attrs.name, nextVal);
+                    }, value: formik.values[fieldLayoutInfo.attrs.name] || '' }) }), isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (_jsx("p", { className: styles.fieldError, children: (_m = formik === null || formik === void 0 ? void 0 : formik.errors[fieldLayoutInfo.attrs.name]) === null || _m === void 0 ? void 0 : _m.toString() }))] }));
 };
 //# sourceMappingURL=SolidDecimalField.js.map