From 6153ef62a3cec763a1ee4d301082751b7e73956e Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Tue, 2 Apr 2024 17:02:24 +0300
Subject: [PATCH] Update calendar props and demos

---
 components/doc/calendar/filleddoc.js        |  57 +++++
 components/doc/calendar/form/formikdoc.js   | 217 --------------------
 components/doc/calendar/form/hookfromdoc.js | 179 ----------------
 components/doc/calendar/invaliddoc.js       |  10 +-
 components/lib/calendar/Calendar.js         |   2 +-
 components/lib/calendar/CalendarBase.js     |   5 +
 components/lib/calendar/calendar.d.ts       |   5 +
 pages/calendar/index.js                     |  26 +--
 8 files changed, 79 insertions(+), 422 deletions(-)
 create mode 100644 components/doc/calendar/filleddoc.js
 delete mode 100644 components/doc/calendar/form/formikdoc.js
 delete mode 100644 components/doc/calendar/form/hookfromdoc.js

diff --git a/components/doc/calendar/filleddoc.js b/components/doc/calendar/filleddoc.js
new file mode 100644
index 0000000000..bc40cba1ea
--- /dev/null
+++ b/components/doc/calendar/filleddoc.js
@@ -0,0 +1,57 @@
+import { DocSectionCode } from '@/components/doc/common/docsectioncode';
+import { DocSectionText } from '@/components/doc/common/docsectiontext';
+import { Calendar } from '@/components/lib/calendar/Calendar';
+import { useState } from 'react';
+
+export function FilledDoc(props) {
+    const [date, setDate] = useState(null);
+
+    const code = {
+        basic: `
+<Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        `,
+        javascript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+
+export default function FilledDemo() {
+    const [date, setDate] = useState(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `,
+        typescript: `
+import React, { useState } from "react";
+import { Calendar } from 'primereact/calendar';
+import { Nullable } from "primereact/ts-helpers";
+
+export default function FilledDemo() {
+    const [date, setDate] = useState<Nullable<Date>>(null);
+
+    return (
+        <div className="card flex justify-content-center">
+            <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+        </div>
+    )
+}
+        `
+    };
+
+    return (
+        <>
+            <DocSectionText {...props}>
+                <p>
+                    Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.
+                </p>
+            </DocSectionText>
+            <div className="card flex justify-content-center">
+                <Calendar variant="filled" value={date} onChange={(e) => setDate(e.value)} />
+            </div>
+            <DocSectionCode code={code} />
+        </>
+    );
+}
diff --git a/components/doc/calendar/form/formikdoc.js b/components/doc/calendar/form/formikdoc.js
deleted file mode 100644
index 06c3a716e8..0000000000
--- a/components/doc/calendar/form/formikdoc.js
+++ /dev/null
@@ -1,217 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Calendar } from '@/components/lib/calendar/Calendar';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useFormik } from 'formik';
-import { useRef } from 'react';
-
-export function FormikDoc(props) {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.date.toLocaleDateString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            date: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.date) {
-                errors.date = 'Date is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            if (!formik.errors.date) {
-                data && show(data);
-                formik.resetForm();
-            }
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-    <label htmlFor="cal_date">Date</label>
-    <Toast ref={toast} />
-    <Calendar
-        inputId="cal_date"
-        name="date"
-        value={formik.values.date}
-        className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-        onChange={(e) => {
-            formik.setFieldValue('date', e.target.value);
-        }}
-    />
-    {getFormErrorMessage('date')}
-    <Button type="submit" label="Submit" />
-</form>
-        `,
-        javascript: `
-import React, {useRef} from 'react';
-import { useFormik } from 'formik';
-import { Calendar } from "primereact/calendar";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.date.toLocaleDateString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            date: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.date) {
-                errors.date = 'Date is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            if (!formik.errors.date) {
-                data && show(data);
-                formik.resetForm();
-            }
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="cal_date">Date</label>
-                <Toast ref={toast} />
-                <Calendar
-                    inputId="cal_date"
-                    name="date"
-                    value={formik.values.date}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('date', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('date')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, {useRef} from 'react';
-import { useFormik } from 'formik';
-import { Calendar } from "primereact/calendar";
-import { Button } from 'primereact/button';
-import { Toast } from 'primereact/toast';
-import { classNames } from 'primereact/utils';
-
-export default function FormikDoc() {
-    const toast = useRef(null);
-
-    const show = () => {
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: formik.values.date.toLocaleDateString() });
-    };
-
-    const formik = useFormik({
-        initialValues: {
-            date: ''
-        },
-        validate: (data) => {
-            let errors = {};
-
-            if (!data.date) {
-                errors.date = 'Date is required.';
-            }
-
-            return errors;
-        },
-        onSubmit: (data) => {
-            if (!formik.errors.date) {
-                data && show(data);
-                formik.resetForm();
-            }
-        }
-    });
-
-    const isFormFieldInvalid = (name) => !!(formik.touched[name] && formik.errors[name]);
-
-    const getFormErrorMessage = (name) => {
-        return isFormFieldInvalid(name) ? <small className="p-error">{formik.errors[name]}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                <label htmlFor="cal_date">Date</label>
-                <Toast ref={toast} />
-                <Calendar
-                    inputId="cal_date"
-                    name="date"
-                    value={formik.values.date}
-                    className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-                    onChange={(e) => {
-                        formik.setFieldValue('date', e.target.value);
-                    }}
-                />
-                {getFormErrorMessage('date')}
-                <Button type="submit" label="Submit" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://formik.org/">Formik</a> is a popular library for handling forms in React.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={formik.handleSubmit} className="flex flex-column gap-2">
-                    <label htmlFor="cal_date">Date</label>
-                    <Toast ref={toast} />
-                    <Calendar
-                        inputId="cal_date"
-                        name="date"
-                        value={formik.values.date}
-                        className={classNames({ 'p-invalid': isFormFieldInvalid('date') })}
-                        onChange={(e) => {
-                            formik.setFieldValue('date', e.target.value);
-                        }}
-                    />
-                    {getFormErrorMessage('date')}
-                    <Button type="submit" label="Submit" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ formik: '^2.1.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/calendar/form/hookfromdoc.js b/components/doc/calendar/form/hookfromdoc.js
deleted file mode 100644
index b5b04a1781..0000000000
--- a/components/doc/calendar/form/hookfromdoc.js
+++ /dev/null
@@ -1,179 +0,0 @@
-import { DocSectionCode } from '@/components/doc/common/docsectioncode';
-import { DocSectionText } from '@/components/doc/common/docsectiontext';
-import { Button } from '@/components/lib/button/Button';
-import { Calendar } from '@/components/lib/calendar/Calendar';
-import { Toast } from '@/components/lib/toast/Toast';
-import { classNames } from '@/components/lib/utils/Utils';
-import { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-
-export function HookFormDoc(props) {
-    const toast = useRef(null);
-    const defaultValues = { date: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-    const show = () => {
-        const date = new Date(form.getValues('date')).toLocaleDateString();
-
-        toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: date });
-    };
-
-    const onSubmit = (data) => {
-        data.date && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    const code = {
-        basic: `
-<Toast ref={toast} />
-<Controller
-    name="date"
-    control={form.control}
-    rules={{ required: 'Date is required.' }}
-    render={({ field, fieldState }) => (
-        <>
-            <label htmlFor={field.name}>Date</label>
-            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-            {getFormErrorMessage(field.name)}
-        </>
-    )}
-/>
-        `,
-        javascript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Calendar } from "primereact/calendar";
-import { Toast } from "primereact/toast";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = { date: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-const show = () => {
-    const date = new Date(form.getValues('date')).toLocaleDateString();
-    
-    toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: date });
-};
-
-    const onSubmit = (data) => {
-        data.date && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="date"
-                    control={form.control}
-                    rules={{ required: 'Date is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Date</label>
-                            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `,
-        typescript: `
-import React, { useRef } from 'react';
-import { Controller, useForm } from 'react-hook-form';
-import { Button } from 'primereact/button';
-import { classNames } from 'primereact/utils';
-import { Calendar } from "primereact/calendar";
-import { Toast } from "primereact/toast";
-
-export default function HookFormDoc() {
-    const toast = useRef(null);
-    const defaultValues = { date: null };
-    const form = useForm({ defaultValues });
-    const errors = form.formState.errors;
-
-const show = () => {
-    const date = new Date(form.getValues('date')).toLocaleDateString();
-    
-    toast.current.show({ severity: 'success', summary: 'Form Submitted', detail: date });
-};
-
-    const onSubmit = (data) => {
-        data.date && show();
-        form.reset();
-    };
-
-    const getFormErrorMessage = (name) => {
-        return errors[name] ? <small className="p-error">{errors[name].message}</small> : <small className="p-error">&nbsp;</small>;
-    };
-
-    return (
-        <div className="card flex justify-content-center">
-            <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                <Toast ref={toast} />
-                <Controller
-                    name="date"
-                    control={form.control}
-                    rules={{ required: 'Date is required.' }}
-                    render={({ field, fieldState }) => (
-                        <>
-                            <label htmlFor={field.name}>Date</label>
-                            <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-                            {getFormErrorMessage(field.name)}
-                        </>
-                    )}
-                />
-                <Button label="Submit" type="submit" icon="pi pi-check" />
-            </form>
-        </div>
-    )
-}
-        `
-    };
-
-    return (
-        <>
-            <DocSectionText {...props}>
-                <p>
-                    <a href="https://react-hook-form.com/">React Hook Form</a> is another popular React library to handle forms.
-                </p>
-            </DocSectionText>
-            <div className="card flex justify-content-center">
-                <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-column gap-2">
-                    <Toast ref={toast} />
-                    <Controller
-                        name="date"
-                        control={form.control}
-                        rules={{ required: 'Date is required.' }}
-                        render={({ field, fieldState }) => (
-                            <>
-                                <label htmlFor={field.name}>Date</label>
-                                <Calendar inputId={field.name} value={field.value} onChange={field.onChange} dateFormat="dd/mm/yy" className={classNames({ 'p-invalid': fieldState.error })} />
-                                {getFormErrorMessage(field.name)}
-                            </>
-                        )}
-                    />
-                    <Button label="Submit" type="submit" icon="pi pi-check" />
-                </form>
-            </div>
-            <DocSectionCode code={code} dependencies={{ 'react-hook-form': '^7.39.4' }} />
-        </>
-    );
-}
diff --git a/components/doc/calendar/invaliddoc.js b/components/doc/calendar/invaliddoc.js
index a72653555f..a05a779a64 100644
--- a/components/doc/calendar/invaliddoc.js
+++ b/components/doc/calendar/invaliddoc.js
@@ -5,7 +5,7 @@ import { Calendar } from '@/components/lib/calendar/Calendar';
 export function InvalidDoc(props) {
     const code = {
         basic: `
-<Calendar className="p-invalid" />
+<Calendar invalid/>
         `,
         javascript: `
 import React, { useState } from "react";
@@ -14,7 +14,7 @@ import { Calendar } from 'primereact/calendar';
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Calendar className="p-invalid" />
+            <Calendar invalid/>
         </div>
     )
 }
@@ -26,7 +26,7 @@ import { Calendar } from 'primereact/calendar';
 export default function InvalidDemo() {
     return (
         <div className="card flex justify-content-center">
-            <Calendar className="p-invalid" />
+            <Calendar invalid/>
         </div>
     )
 }
@@ -37,11 +37,11 @@ export default function InvalidDemo() {
         <>
             <DocSectionText {...props}>
                 <p>
-                    Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.
+                    Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
                 </p>
             </DocSectionText>
             <div className="card flex justify-content-center">
-                <Calendar className="p-invalid" />
+                <Calendar invalid />
             </div>
             <DocSectionCode code={code} />
         </>
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index 73e56920ea..85dbdce032 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -4036,7 +4036,7 @@ export const Calendar = React.memo(
                         name={props.name}
                         type="text"
                         role="combobox"
-                        className={props.inputClassName}
+                        className={(props.inputClassName, cx('input', { context }))}
                         style={props.inputStyle}
                         readOnly={props.readOnlyInput}
                         disabled={props.disabled}
diff --git a/components/lib/calendar/CalendarBase.js b/components/lib/calendar/CalendarBase.js
index 5ce0dd57e0..d06bd90367 100644
--- a/components/lib/calendar/CalendarBase.js
+++ b/components/lib/calendar/CalendarBase.js
@@ -186,6 +186,10 @@ const classes = {
             'p-inputwrapper-focus': focusedState,
             'p-focus': focusedState || panelVisible
         }),
+    input: ({ props, context }) =>
+        classNames('p-inputtext p-component', {
+            'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+        }),
     dropdownButton: 'p-datepicker-trigger',
     buttonbar: 'p-datepicker-buttonbar',
     todayButton: 'p-button-text',
@@ -262,6 +266,7 @@ export const CalendarBase = ComponentBase.extend({
         inputMode: 'none',
         inputRef: null,
         inputStyle: null,
+        variant: null,
         invalid: false,
         keepInvalid: false,
         locale: null,
diff --git a/components/lib/calendar/calendar.d.ts b/components/lib/calendar/calendar.d.ts
index 7084a2811b..278b7fd79d 100644
--- a/components/lib/calendar/calendar.d.ts
+++ b/components/lib/calendar/calendar.d.ts
@@ -575,6 +575,11 @@ interface CalendarBaseProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Array with dates to disable.
      */
diff --git a/pages/calendar/index.js b/pages/calendar/index.js
index 7848d2dca4..5e05036b8d 100644
--- a/pages/calendar/index.js
+++ b/pages/calendar/index.js
@@ -3,9 +3,8 @@ import { BasicDoc } from '@/components/doc/calendar/basicdoc';
 import { ButtonBarDoc } from '@/components/doc/calendar/buttonbardoc';
 import { DateTemplateDoc } from '@/components/doc/calendar/datetemplatedoc';
 import { DisabledDoc } from '@/components/doc/calendar/disableddoc';
+import { FilledDoc } from '@/components/doc/calendar/filleddoc';
 import { FloatLabelDoc } from '@/components/doc/calendar/floatlabeldoc';
-import { FormikDoc } from '@/components/doc/calendar/form/formikdoc';
-import { HookFormDoc } from '@/components/doc/calendar/form/hookfromdoc';
 import { FormatDoc } from '@/components/doc/calendar/formatdoc';
 import { IconDoc } from '@/components/doc/calendar/icondoc';
 import { ImportDoc } from '@/components/doc/calendar/importdoc';
@@ -109,6 +108,11 @@ const CalendarDemo = () => {
             label: 'Inline',
             component: InlineDoc
         },
+        {
+            id: 'filled',
+            label: 'Filled',
+            component: FilledDoc
+        },
         {
             id: 'floatlabel',
             label: 'Float Label',
@@ -124,24 +128,6 @@ const CalendarDemo = () => {
             label: 'Disabled',
             component: DisabledDoc
         },
-        {
-            id: 'form',
-            label: 'Form',
-            description: 'Compatibility with popular React form libraries.',
-            children: [
-                {
-                    id: 'formik',
-                    label: 'Formik',
-                    component: FormikDoc
-                },
-                {
-                    id: 'hookform',
-                    label: 'Hook Form',
-                    component: HookFormDoc
-                }
-            ]
-        },
-
         {
             id: 'accessibility',
             label: 'Accessibility',