From 496ed1e9e066edae1eec021d0f7a042a82467c55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ricardo=20L=C3=BCders?= <ricardo@luders.com.br>
Date: Fri, 22 Sep 2023 16:13:07 +0200
Subject: [PATCH] fix(datepicker): button type (#984)

---
 src/components/Datepicker/Buttons.tsx    | 126 -----------------------
 src/components/Datepicker/Datepicker.tsx |   5 +
 2 files changed, 5 insertions(+), 126 deletions(-)
 delete mode 100644 src/components/Datepicker/Buttons.tsx

diff --git a/src/components/Datepicker/Buttons.tsx b/src/components/Datepicker/Buttons.tsx
deleted file mode 100644
index d54065947..000000000
--- a/src/components/Datepicker/Buttons.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-// import { useContext } from 'react';
-// import { twMerge } from 'tailwind-merge';
-// import type { Views } from '../../helpers/date';
-// import { goToPrevNext, startOfYearPeriod } from '../../helpers/date';
-// import { DatePickerContext } from './DatepickerContext';
-
-// export interface FlowbiteDatePickerButtonTheme {
-//   root: {
-//     base: string;
-//   };
-// }
-
-// export const ButtonPrevMonth = () => {
-//   const { selectedDate, changeSelectedDate, view, options } = useContext(DatePickerContext);
-
-//   return (
-//     <button
-//       type="button"
-//       className={twMerge(
-//         'rounded-lg bg-white p-2.5 text-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
-//         options?.theme?.icons,
-//       )}
-//       onClick={() => changeSelectedDate('prev', new Date(goToPrevNext(view, selectedDate, -1)))}
-//     >
-//       {options?.icons?.prev ? (
-//         options?.icons?.prev()
-//       ) : (
-//         <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-//           <path
-//             fillRule="evenodd"
-//             d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z"
-//             clipRule="evenodd"
-//           ></path>
-//         </svg>
-//       )}
-//     </button>
-//   );
-// };
-
-// export const ButtonSelectMonth = () => {
-//   const { selectedDate, view, setView, options, getFormattedDate } = useContext(DatePickerContext);
-
-//   const calculateView = (): Views => {
-//     if (view === 'days') return 'months';
-//     if (view === 'months') return 'years';
-//     if (view === 'years') return 'decades';
-//     return view;
-//   };
-
-//   return (
-//     <button
-//       type="button"
-//       className={twMerge(
-//         'rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
-//         options?.theme?.icons,
-//       )}
-//       onClick={() => setView(calculateView())}
-//     >
-//       {view === 'days' && getFormattedDate(selectedDate, { month: 'long', year: 'numeric' })}
-//       {view === 'months' && getFormattedDate(selectedDate, { year: 'numeric' })}
-//       {view === 'years' && `${startOfYearPeriod(selectedDate, 10)}-${startOfYearPeriod(selectedDate, 10) + 9}`}
-//       {view === 'decades' && `${startOfYearPeriod(selectedDate, 100)}-${startOfYearPeriod(selectedDate, 100) + 90}`}
-//     </button>
-//   );
-// };
-
-// export const ButtonNextMonth = () => {
-//   const { selectedDate, changeSelectedDate, view, options } = useContext(DatePickerContext);
-//   return (
-//     <button
-//       type="button"
-//       className={twMerge(
-//         'rounded-lg bg-white p-2.5 text-lg text-gray-500 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:text-white',
-//         options?.theme?.icons,
-//       )}
-//       onClick={() => changeSelectedDate('next', new Date(goToPrevNext(view, selectedDate, 1)))}
-//     >
-//       {options?.icons?.next ? (
-//         options?.icons?.next()
-//       ) : (
-//         <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-//           <path
-//             fillRule="evenodd"
-//             d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
-//             clipRule="evenodd"
-//           ></path>
-//         </svg>
-//       )}
-//     </button>
-//   );
-// };
-
-// export const ButtonToday = () => {
-//   const { changeSelectedDate, setView, options } = useContext(DatePickerContext);
-//   return (
-//     <button
-//       type="button"
-//       className={twMerge(
-//         'w-full rounded-lg bg-blue-700 px-5 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700',
-//         options?.theme?.todayBtn,
-//       )}
-//       onClick={() => {
-//         changeSelectedDate('today', new Date());
-//         setView('days');
-//       }}
-//     >
-//       Today
-//     </button>
-//   );
-// };
-
-// export const ButtonClear = () => {
-//   const { setShowSelectedDate, options } = useContext(DatePickerContext);
-//   return (
-//     <button
-//       type="button"
-//       className={twMerge(
-//         'w-full rounded-lg border border-gray-300 bg-white px-5 py-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:ring-4 focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
-//         options?.theme?.clearBtn,
-//       )}
-//       onClick={() => setShowSelectedDate(false)}
-//     >
-//       Clear
-//     </button>
-//   );
-// };
diff --git a/src/components/Datepicker/Datepicker.tsx b/src/components/Datepicker/Datepicker.tsx
index 9470c29d1..72fe930dc 100644
--- a/src/components/Datepicker/Datepicker.tsx
+++ b/src/components/Datepicker/Datepicker.tsx
@@ -251,6 +251,7 @@ export const Datepicker: FC<DatepickerProps> = ({
                 {title && <div className={theme.popup.header.title}>{title}</div>}
                 <div className={theme.popup.header.selectors.base}>
                   <button
+                    type="button"
                     className={twMerge(
                       theme.popup.header.selectors.button.base,
                       theme.popup.header.selectors.button.prev,
@@ -260,6 +261,7 @@ export const Datepicker: FC<DatepickerProps> = ({
                     <HiArrowLeft />
                   </button>
                   <button
+                    type="button"
                     className={twMerge(
                       theme.popup.header.selectors.button.base,
                       theme.popup.header.selectors.button.view,
@@ -269,6 +271,7 @@ export const Datepicker: FC<DatepickerProps> = ({
                     {getViewTitle()}
                   </button>
                   <button
+                    type="button"
                     className={twMerge(
                       theme.popup.header.selectors.button.base,
                       theme.popup.header.selectors.button.next,
@@ -284,6 +287,7 @@ export const Datepicker: FC<DatepickerProps> = ({
                 <div className={theme.popup.footer.base}>
                   {showTodayButton && (
                     <button
+                      type="button"
                       className={twMerge(theme.popup.footer.button.base, theme.popup.footer.button.today)}
                       onClick={() => {
                         const today = new Date();
@@ -296,6 +300,7 @@ export const Datepicker: FC<DatepickerProps> = ({
                   )}
                   {showClearButton && (
                     <button
+                      type="button"
                       className={twMerge(theme.popup.footer.button.base, theme.popup.footer.button.clear)}
                       onClick={() => {
                         changeSelectedDate(defaultDate, true);