@react-fabric/date 1.0.0-beta.6 → 1.0.0-beta.60

package/src/hijri/initializer.js

@@ -0,0 +1,96 @@
+import {
+  GregToHijri
+} from './DateConverter';
+import StringDateParser from './StringDateParser';
+
+const defaultFormat = 'yyyy/mm/dd';
+const defaultProps ={
+  month:1,
+  date:1,
+  hours:0,
+  minutes:0,
+  seconds:0,
+  milliseconds:0
+};
+
+class Initializer {
+
+   static initDefault() {
+      return GregToHijri(new Date());
+   }
+
+   static init_number (number) {
+     return GregToHijri(new Date(number));
+   }
+
+   static init_number_number (year, month) {
+
+     return this.init_number_number_number(year, month, 1);
+   }
+   static init_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+   static init_number_number_number_number_number_number_number () {
+     return this.initFromNumbers(...arguments);
+   }
+
+   static init_string() {
+     return this.initFromStrings(...arguments);
+   }
+
+   static init_string_string() {
+     return this.initFromStrings(...arguments);
+   }
+
+   static init_object(object) {
+     return Object.assign({}, defaultProps, object);
+   }
+   static initFromNumbers(year,
+     month,
+     date,
+     hours = 0,
+     minutes = 0,
+     seconds = 0,
+     milliseconds = 0)
+   {
+     Array.from(arguments).forEach((arg, index) => {
+       arguments[index] = parseInt(arg);
+     });
+
+     return {
+       year,
+       month,
+       date,
+       hours,
+       minutes,
+       seconds,
+       milliseconds
+     }
+   }
+
+
+   //TODO
+   static initFromStrings(dateString, format = defaultFormat) {
+      const props = {};
+      props.year= StringDateParser.extractYear(dateString, format);
+      props.month= StringDateParser.extractMonth(dateString, format);
+      props.date= StringDateParser.extractDate(dateString, format);
+      return Object.assign({}, defaultProps, props);
+   }
+
+
+
+}
+
+Initializer.defaultFormat = defaultFormat;
+
+export default Initializer;

package/src/hijri/locales.js

@@ -0,0 +1,109 @@
+export const ar = {
+  dayNames: [
+    "ح",
+    "ن",
+    "ث",
+    "ر",
+    "خ",
+    "ج",
+    "س",
+    "أحد",
+    "اثن",
+    "ثلا",
+    "ارب",
+    "خم",
+    "جم",
+    "سبت",
+    "الأحد",
+    "الإثنين",
+    "الثلاثاء",
+    "الإربعاء",
+    "الخميس",
+    "الجمعة",
+    "السبت",
+  ],
+  monthNames: [
+    "مح",
+    "صف",
+    "ربع١",
+    "ربع٢",
+    "جم١",
+    "جم٢",
+    "رجب",
+    "شعب",
+    "رمض",
+    "شو",
+    "ذو ق",
+    "ذو ح",
+    "محرّم",
+    "صفر",
+    "ربيع أول",
+    "ربيع الآخر",
+    "جمادى أولى",
+    "جمادى الآخرة",
+    "رجب",
+    "شعبان",
+    "رمضان",
+    "شوال",
+    "ذو القعدة",
+    "ذو الحجّة",
+  ],
+  separator: "عند",
+  am: "ص",
+  pm: "م",
+};
+
+export const en = {
+  dayNames: [
+    "Su",
+    "Mo",
+    "Tu",
+    "We",
+    "Th",
+    "Fr",
+    "Sa",
+    "Sun",
+    "Mon",
+    "Tue",
+    "Wed",
+    "Thu",
+    "Fri",
+    "Sat",
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday",
+  ],
+  monthNames: [
+    "Muha",
+    "Saf",
+    "Rab1",
+    "Rab2",
+    "Jumd1",
+    "Jumd2",
+    "Rajb",
+    "Shbn",
+    "Rmdn",
+    "Shwl",
+    "Qada",
+    "Hija",
+    "Muharram",
+    "Safar",
+    "Rabi'ul Awwal",
+    "Rabi'ul Akhir",
+    "Jumadal Ula",
+    "Jumadal Akhira",
+    "Rajab",
+    "Sha'ban",
+    "Ramadan",
+    "Shawwal",
+    "Dhul Qa'ada",
+    "Dhul Hijja",
+  ],
+  separator: "at",
+  am: "am",
+  pm: "pm",
+};

package/src/hijri/safe.js

@@ -0,0 +1,16 @@
+import HijriDate from './HijriDate';
+import {GregToHijri} from './DateConverter';
+
+export const toHijri = ((gregDate) => {
+  const {year, month, date} = GregToHijri(gregDate);
+  return new HijriDate(
+    year,
+    month,
+    date,
+    gregDate.getHours(),
+    gregDate.getMinutes(),
+    gregDate.getSeconds(),
+    gregDate.getMilliseconds()
+  );
+});
+export default HijriDate;

package/src/i18n/ar.json

@@ -10,5 +10,194 @@
     "hijri": "هجري",
     "gregorian": "ميلادي"
   },
-  "number": {}
+  "relative": {
+    "before": {
+      "now": "الآن",
+      "years": "{{count}} منذ عام",
+      "months": "{{count}} منذ شهر",
+      "weeks": "{{count}} قبل أسبوع",
+      "days": "{{count}} منذ يوم",
+      "hours": "{{count}} منذ ساعة",
+      "minutes": "{{count}} منذ دقيقة",
+      "seconds": "{{count}} قبل الثاني",
+      "yearsX": "بالكاد {{count}} منذ عام",
+      "monthsX": "بالكاد {{count}} منذ شهر",
+      "weeksX": "بالكاد {{count}} قبل أسبوع",
+      "daysX": "بالكاد {{count}} منذ يوم",
+      "hoursX": "بالكاد {{count}} منذ ساعة",
+      "minutesX": "بالكاد {{count}} منذ دقيقة",
+      "years_zero": "{{count}} منذ سنوات",
+      "years_one": "{{count}} منذ عام",
+      "years_two": "{{count}} منذ سنوات",
+      "years_few": "{{count}} منذ سنوات",
+      "years_many": "{{count}} منذ سنوات",
+      "years_other": "{{count}} منذ سنوات",
+      "months_zero": "{{count}} منذ أشهر",
+      "months_one": "{{count}} منذ شهر",
+      "months_two": "{{count}} منذ أشهر",
+      "months_few": "{{count}} منذ أشهر",
+      "months_many": "{{count}} منذ أشهر",
+      "months_other": "{{count}} منذ أشهر",
+      "weeks_zero": "{{count}} منذ أسابيع",
+      "weeks_one": "{{count}} قبل أسبوع",
+      "weeks_two": "{{count}} منذ أسابيع",
+      "weeks_few": "{{count}} منذ أسابيع",
+      "weeks_many": "{{count}} منذ أسابيع",
+      "weeks_other": "{{count}} منذ أسابيع",
+      "days_zero": "{{count}} منذ أيام",
+      "days_one": "{{count}} منذ يوم",
+      "days_two": "{{count}} منذ أيام",
+      "days_few": "{{count}} منذ أيام",
+      "days_many": "{{count}} منذ أيام",
+      "days_other": "{{count}} منذ أيام",
+      "hours_zero": "{{count}} منذ ساعات",
+      "hours_one": "{{count}} منذ ساعة",
+      "hours_two": "{{count}} منذ ساعات",
+      "hours_few": "{{count}} منذ ساعات",
+      "hours_many": "{{count}} منذ ساعات",
+      "hours_other": "{{count}} منذ ساعات",
+      "minutes_zero": "{{count}} منذ دقائق",
+      "minutes_one": "{{count}} منذ دقيقة",
+      "minutes_two": "{{count}} منذ دقائق",
+      "minutes_few": "{{count}} منذ دقائق",
+      "minutes_many": "{{count}} منذ دقائق",
+      "minutes_other": "{{count}} منذ دقائق",
+      "seconds_zero": "{{count}} قبل ثوان",
+      "seconds_one": "{{count}} قبل الثاني",
+      "seconds_two": "{{count}} قبل ثوان",
+      "seconds_few": "{{count}} قبل ثوان",
+      "seconds_many": "{{count}} قبل ثوان",
+      "seconds_other": "{{count}} قبل ثوان",
+      "yearsX_zero": "بالكاد {{count}} منذ سنوات",
+      "yearsX_one": "بالكاد {{count}} منذ عام",
+      "yearsX_two": "بالكاد {{count}} منذ سنوات",
+      "yearsX_few": "بالكاد {{count}} منذ سنوات",
+      "yearsX_many": "بالكاد {{count}} منذ سنوات",
+      "yearsX_other": "بالكاد {{count}} منذ سنوات",
+      "monthsX_zero": "بالكاد {{count}} منذ أشهر",
+      "monthsX_one": "بالكاد {{count}} منذ شهر",
+      "monthsX_two": "بالكاد {{count}} منذ أشهر",
+      "monthsX_few": "بالكاد {{count}} منذ أشهر",
+      "monthsX_many": "بالكاد {{count}} منذ أشهر",
+      "monthsX_other": "بالكاد {{count}} منذ أشهر",
+      "weeksX_zero": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_one": "بالكاد {{count}} قبل أسبوع",
+      "weeksX_two": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_few": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_many": "بالكاد {{count}} منذ أسابيع",
+      "weeksX_other": "بالكاد {{count}} منذ أسابيع",
+      "daysX_zero": "بالكاد {{count}} منذ أيام",
+      "daysX_one": "بالكاد {{count}} منذ يوم",
+      "daysX_two": "بالكاد {{count}} منذ أيام",
+      "daysX_few": "بالكاد {{count}} منذ أيام",
+      "daysX_many": "بالكاد {{count}} منذ أيام",
+      "daysX_other": "بالكاد {{count}} منذ أيام",
+      "hoursX_zero": "بالكاد {{count}} منذ ساعات",
+      "hoursX_one": "بالكاد {{count}} منذ ساعة",
+      "hoursX_two": "بالكاد {{count}} منذ ساعات",
+      "hoursX_few": "بالكاد {{count}} منذ ساعات",
+      "hoursX_many": "بالكاد {{count}} منذ ساعات",
+      "hoursX_other": "بالكاد {{count}} منذ ساعات",
+      "minutesX_zero": "بالكاد {{count}} منذ دقائق",
+      "minutesX_one": "بالكاد {{count}} منذ دقيقة",
+      "minutesX_two": "بالكاد {{count}} منذ دقائق",
+      "minutesX_few": "بالكاد {{count}} منذ دقائق",
+      "minutesX_many": "بالكاد {{count}} منذ دقائق",
+      "minutesX_other": "بالكاد {{count}} منذ دقائق"
+    },
+    "after": {
+      "now": "قريباً",
+      "years": "{{count}} بعد عام",
+      "months": "{{count}} بعد شهر",
+      "weeks": "{{count}} بعد أسبوع",
+      "days": "{{count}} بعد يوم",
+      "hours": "{{count}} بعد ساعة",
+      "minutes": "{{count}} بعد دقيقة",
+      "seconds": "{{count}} الثاني في وقت لاحق",
+      "yearsX": "بالكاد {{count}} بعد عام",
+      "monthsX": "بالكاد {{count}} بعد شهر",
+      "weeksX": "بالكاد {{count}} بعد أسبوع",
+      "daysX": "بالكاد {{count}} بعد يوم",
+      "hoursX": "بالكاد {{count}} بعد ساعة",
+      "minutesX": "بالكاد {{count}} بعد دقيقة",
+      "years_zero": "{{count}} بعد سنوات",
+      "years_one": "{{count}} بعد عام",
+      "years_two": "{{count}} بعد سنوات",
+      "years_few": "{{count}} بعد سنوات",
+      "years_many": "{{count}} بعد سنوات",
+      "years_other": "{{count}} بعد سنوات",
+      "months_zero": "{{count}} بعد أشهر",
+      "months_one": "{{count}} بعد شهر",
+      "months_two": "{{count}} بعد أشهر",
+      "months_few": "{{count}} بعد أشهر",
+      "months_many": "{{count}} بعد أشهر",
+      "months_other": "{{count}} بعد أشهر",
+      "weeks_zero": "{{count}} بعد أسابيع",
+      "weeks_one": "{{count}} بعد أسبوع",
+      "weeks_two": "{{count}} بعد أسابيع",
+      "weeks_few": "{{count}} بعد أسابيع",
+      "weeks_many": "{{count}} بعد أسابيع",
+      "weeks_other": "{{count}} بعد أسابيع",
+      "days_zero": "{{count}} بعد أيام",
+      "days_one": "{{count}} بعد يوم",
+      "days_two": "{{count}} بعد أيام",
+      "days_few": "{{count}} بعد أيام",
+      "days_many": "{{count}} بعد أيام",
+      "days_other": "{{count}} بعد أيام",
+      "hours_zero": "{{count}} بعد ساعات",
+      "hours_one": "{{count}} بعد ساعة",
+      "hours_two": "{{count}} بعد ساعات",
+      "hours_few": "{{count}} بعد ساعات",
+      "hours_many": "{{count}} بعد ساعات",
+      "hours_other": "{{count}} بعد ساعات",
+      "minutes_zero": "{{count}} بعد دقائق",
+      "minutes_one": "{{count}} بعد دقيقة",
+      "minutes_two": "{{count}} بعد دقائق",
+      "minutes_few": "{{count}} بعد دقائق",
+      "minutes_many": "{{count}} بعد دقائق",
+      "minutes_other": "{{count}} بعد دقائق",
+      "seconds_zero": "{{count}} بعد ثوان",
+      "seconds_one": "{{count}} الثاني في وقت لاحق",
+      "seconds_two": "{{count}} بعد ثوان",
+      "seconds_few": "{{count}} بعد ثوان",
+      "seconds_many": "{{count}} بعد ثوان",
+      "seconds_other": "{{count}} بعد ثوان",
+      "yearsX_zero": "بالكاد {{count}} بعد سنوات",
+      "yearsX_one": "بالكاد {{count}} بعد عام",
+      "yearsX_two": "بالكاد {{count}} بعد سنوات",
+      "yearsX_few": "بالكاد {{count}} بعد سنوات",
+      "yearsX_many": "بالكاد {{count}} بعد سنوات",
+      "yearsX_other": "بالكاد {{count}} بعد سنوات",
+      "monthsX_zero": "بالكاد {{count}} بعد أشهر",
+      "monthsX_one": "بالكاد {{count}} بعد شهر",
+      "monthsX_two": "بالكاد {{count}} بعد أشهر",
+      "monthsX_few": "بالكاد {{count}} بعد أشهر",
+      "monthsX_many": "بالكاد {{count}} بعد أشهر",
+      "monthsX_other": "بالكاد {{count}} بعد أشهر",
+      "weeksX_zero": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_one": "بالكاد {{count}} بعد أسبوع",
+      "weeksX_two": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_few": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_many": "بالكاد {{count}} بعد أسابيع",
+      "weeksX_other": "بالكاد {{count}} بعد أسابيع",
+      "daysX_zero": "بالكاد {{count}} بعد أيام",
+      "daysX_one": "بالكاد {{count}} بعد يوم",
+      "daysX_two": "بالكاد {{count}} بعد أيام",
+      "daysX_few": "بالكاد {{count}} بعد أيام",
+      "daysX_many": "بالكاد {{count}} بعد أيام",
+      "daysX_other": "بالكاد {{count}} بعد أيام",
+      "hoursX_zero": "بالكاد {{count}} بعد ساعات",
+      "hoursX_one": "بالكاد {{count}} بعد ساعة",
+      "hoursX_two": "بالكاد {{count}} بعد ساعات",
+      "hoursX_few": "بالكاد {{count}} بعد ساعات",
+      "hoursX_many": "بالكاد {{count}} بعد ساعات",
+      "hoursX_other": "بالكاد {{count}} بعد ساعات",
+      "minutesX_zero": "بالكاد {{count}} بعد دقائق",
+      "minutesX_one": "بالكاد {{count}} بعد دقيقة",
+      "minutesX_two": "بالكاد {{count}} بعد دقائق",
+      "minutesX_few": "بالكاد {{count}} بعد دقائق",
+      "minutesX_many": "بالكاد {{count}} بعد دقائق",
+      "minutesX_other": "بالكاد {{count}} بعد دقائق"
+    }
+  }
 }

package/src/i18n/en.json

@@ -9,5 +9,65 @@
     "today": "Today",
     "hijri": "Hijri",
     "gregorian": "Gregorian"
+  },
+  "relative": {
+    "before": {
+      "now": "Just now",
+      "years": "Last year",
+      "years_other": "{{count}} years ago",
+      "months": "Last month",
+      "months_other": "{{count}} months ago",
+      "weeks": "Last week",
+      "weeks_other": "{{count}} weeks ago",
+      "days": "Yesterday",
+      "days_other": "{{count}} days ago",
+      "hours": "{{count}} hour ago",
+      "hours_other": "{{count}} hours ago",
+      "minutes": "{{count}} minute ago",
+      "minutes_other": "{{count}} minutes ago",
+      "seconds": "{{count}} second ago",
+      "seconds_other": "{{count}} seconds ago",
+      "yearsX": "Almost {{count}} year ago",
+      "yearsX_other": "Almost {{count}} years ago",
+      "monthsX": "Almost {{count}} month ago",
+      "monthsX_other": "Almost {{count}} months ago",
+      "weeksX": "Almost {{count}} week ago",
+      "weeksX_other": "Almost {{count}} weeks ago",
+      "daysX": "Almost {{count}} day ago",
+      "daysX_other": "Almost {{count}} days ago",
+      "hoursX": "Almost {{count}} hour ago",
+      "hoursX_other": "Almost {{count}} hours ago",
+      "minutesX": "Almost {{count}} minute ago",
+      "minutesX_other": "Almost {{count}} minutes ago"
+    },
+    "after": {
+      "now": "Soon",
+      "years": "Next year",
+      "years_other": "{{count}} years later",
+      "months": "Next month",
+      "months_other": "{{count}} months later",
+      "weeks": "Next week",
+      "weeks_other": "{{count}} weeks later",
+      "days": "Tomorrow",
+      "days_other": "{{count}} days later",
+      "hours": "{{count}} hour later",
+      "hours_other": "{{count}} hours later",
+      "minutes": "{{count}} minute later",
+      "minutes_other": "{{count}} minutes later",
+      "seconds": "{{count}} second later",
+      "seconds_other": "{{count}} seconds later",
+      "yearsX": "Almost {{count}} year later",
+      "yearsX_other": "Almost {{count}} years later",
+      "monthsX": "Almost {{count}} month later",
+      "monthsX_other": "Almost {{count}} months later",
+      "weeksX": "Almost {{count}} week later",
+      "weeksX_other": "Almost {{count}} weeks later",
+      "daysX": "Almost {{count}} day later",
+      "daysX_other": "Almost {{count}} days later",
+      "hoursX": "Almost {{count}} hour later",
+      "hoursX_other": "Almost {{count}} hours later",
+      "minutesX": "Almost {{count}} minute later",
+      "minutesX_other": "Almost {{count}} minutes later"
+    }
   }
 }

package/src/i18n/index.ts

@@ -24,8 +24,5 @@
 import { addTranslationBundle } from "@react-fabric/core";
 import ar from "./ar.json";
 import en from "./en.json";
-import arSuper from "./superdate/ar.json";
-import enSuper from "./superdate/en.json";
 
 addTranslationBundle("date", { en, ar });
-addTranslationBundle("superdate", { en: enSuper, ar: arSuper });

package/src/index.ts

@@ -24,9 +24,15 @@
 import "./hijri";
 import "./i18n";
 
+export { DateHeader } from "./components/DateHeader";
+export { DecadePage } from "./components/DecadePage";
+export { YearPage } from "./components/YearPage";
 export { DateDisplay } from "./display/DateDisplay";
+export { DateDuration } from "./display/DateDuration";
 export { DatePanel } from "./panels/DatePanel";
+export { EventPanel } from "./panels/EventPanel";
 export { RangePanel } from "./panels/RangePanel";
-export { SuperDate } from "./superdate/Superdate";
 
 export { DateUtil } from "./utils/dateUtil";
+
+export * from "./types";

package/src/panels/DatePanel.tsx

@@ -46,6 +46,32 @@ type PanelActions =
   | { type: "changePage"; page: PageType }
   | { type: "changePageDate"; date: Date; pageChange: boolean };
 
+/**
+ * DatePanel component to display a date picker with options for selecting a date and time.
+ * It allows switching between Gregorian and Hijri calendars, and includes buttons for selecting today or canceling the selection.
+ * It uses the current calendar and locale from the global context.
+ * It handles date selection, time changes, and page navigation within the date picker.
+ * It also supports disabling specific dates and setting minimum and maximum date limits.
+ *
+ * @param {DateProps} props - The properties for the DatePanel component.
+ * @return {JSX.Element} The rendered DatePanel component.
+ *
+ * @example
+ * ```jsx
+ * <DatePanel
+ *   className="my-date-panel"
+ *   max="2025-12-31"
+ *   min="2020-01-01"
+ *   dateDisabled={["2023-01-01", "2023-12-25"]}
+ *   onChange={(date) => console.log("Selected date:", date)}
+ *   showHijriToggle={true}
+ *   value={new Date()}
+ *   withTime={true}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/date-date-panel--datepanels}
+ */
 export const DatePanel = ({
   className,
   max,

package/src/{superdate → panels}/EventPanel.tsx

@@ -30,7 +30,7 @@ import { useTranslation } from "react-i18next";
 import { DateHeader } from "../components/DateHeader";
 import { DecadePage } from "../components/DecadePage";
 import { YearPage } from "../components/YearPage";
-import { type EventType, PageType, type SuperDateProps } from "../types";
+import { type EventType, PageType } from "../types";
 import { DateUtil } from "../utils/dateUtil";
 
 interface EventState {
@@ -90,12 +90,29 @@ const makeList = (
   });
 };
 
+export interface EventProps {
+  isHijri?: boolean;
+  /**
+   * list of calendar events
+   */
+  events?: EventType[];
+  /**
+   * list of calendar events
+   */
+  recurringEvents?: EventType[];
+
+  /**
+   * change handler
+   */
+  onChange?: (value: string, dates: [string, string]) => void;
+}
+
 export const EventPanel = ({
   isHijri,
   onChange,
   events = EMPTY_ARRAY,
   recurringEvents = EMPTY_ARRAY,
-}: { isHijri: boolean } & Partial<SuperDateProps>) => {
+}: EventProps) => {
   const { t } = useTranslation();
   const [predefined, setPredefined] = useState<
     KeyValue<Array<EventType<Date>>>
@@ -114,7 +131,7 @@ export const EventPanel = ({
       if (action.type === "changePageDate") {
         resetList = true;
         state.pageDate = action.date;
-        if (action.changePage !== false) {
+        if (action.changePage) {
           state.page = Math.max(state.page - 1, PageType.MONTH);
         }
       }
@@ -172,6 +189,7 @@ export const EventPanel = ({
             <div
               role="none"
               key={evt.label}
+              data-dropdown-dismiss="true"
               onClick={() => {
                 onChange?.(
                   `${evt.start.toISOString()}|${evt.end.toISOString()}`,

package/src/panels/RangePanel.tsx

@@ -58,6 +58,28 @@ type PanelActions =
       pageChange?: boolean;
     };
 
+/**
+ * RangePanel component to display a date range picker with options for selecting a start and end date.
+ * It allows switching between Gregorian and Hijri calendars, and includes buttons for applying or canceling the selection.
+ * It uses the current calendar and locale from the global context.
+ * It handles date selection, time changes, and page navigation within the date picker.
+ * It also supports disabling specific dates and setting minimum and maximum date limits.
+ *
+ * @param {RangeProps} props - The properties for the RangePanel component.
+ * @return {JSX.Element} The rendered RangePanel component.
+ *
+ * @example
+ * ```jsx
+ * <RangePanel
+ *   className="my-range-panel"
+ *   max="2025-12-31"
+ *   min="2020-01-01"
+ *  dateDisabled={["2023-01-01", "2023-12-25"]}
+ *  onChange={(dateRange) => console.log("Selected date range:", dateRange)}
+ * />
+ * ```
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/date-date-panel--range-panel}
+ */
 export const RangePanel = ({
   className,
   max,
@@ -383,6 +405,7 @@ export const RangePanel = ({
             variant="solid"
             color="primary"
             disabled={!state.selected}
+            data-dropdown-dismiss="true"
             className="my-1"
             onClick={() =>
               fireChange?.([