@react-fabric/date 1.0.0-beta.9 → 1.0.2

package/src/panels/DatePanel.tsx

@@ -21,9 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, useDebounce, useGlobals } from "@react-fabric/core";
-import { isArray, isEmpty } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { Button, useApplicationContext, useDebounce, usePropState } from "@react-fabric/core";
+import { cn, isArray, isEmpty } from "@react-fabric/utilities";
 import { isAfter, isBefore, isSameDay } from "date-fns";
 import { useCallback, useEffect, useReducer, useState } from "react";
 import { useTranslation } from "react-i18next";
@@ -46,7 +45,28 @@ type PanelActions =
   | { type: "changePage"; page: PageType }
   | { type: "changePageDate"; date: Date; pageChange: boolean };
 
-export const DatePanel = ({
+/**
+ * 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.
+ *
+ * @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}
+ * />
+ * ```
+ */
+export function DatePanel({
   className,
   max,
   min,
@@ -56,18 +76,14 @@ export const DatePanel = ({
   value,
   withTime,
   ...rest
-}: DateProps) => {
+}: DateProps) {
   const { t } = useTranslation("date");
-  const { currentCalendar } = useGlobals();
-  const [isHijri, setHijri] = useState(currentCalendar === "hijri");
+  const { currentCalendar } = useApplicationContext();
+  const [isHijri, setIsHijri] = usePropState(currentCalendar === "hijri");
   const [canSelectToday, setCanSelectToday] = useState(true);
 
   const fireChange = useDebounce(onChange, [onChange]);
 
-  useEffect(() => {
-    setHijri(currentCalendar === "hijri");
-  }, [currentCalendar]);
-
   const [state, dispatch] = useReducer(
     (state: PanelState, action: PanelActions) => {
       if (action.type === "reset") {
@@ -101,7 +117,7 @@ export const DatePanel = ({
       }
       if (action.type === "changePageDate") {
         state.pageDate = action.date;
-        action.pageChange && (state.page = Math.max(state.page - 1, 0));
+        if (action.pageChange) state.page = Math.max(state.page - 1, 0);
       }
       if (action.type === "changeDate" || action.type === "changeTime") {
         if (min && state.selected && isBefore(state.selected, new Date(min))) {
@@ -114,16 +130,21 @@ export const DatePanel = ({
           state.hour = state.selected.getHours();
           state.minute = state.selected.getMinutes();
         }
-        state.selected && fireChange?.(state.selected.toISOString());
+        if (state.selected) fireChange?.(state.selected.toISOString());
       }
       return { ...state };
     },
     {
       page: PageType.DATE,
-      pageDate: new Date(),
       hour: 0,
       minute: 0,
     } as PanelState,
+    () => ({
+      page: PageType.DATE,
+      pageDate: new Date(),
+      hour: 0,
+      minute: 0,
+    }),
   );
 
   useEffect(() => {
@@ -134,6 +155,7 @@ export const DatePanel = ({
     if (max && canSelect) {
       canSelect = isBefore(new Date(), max);
     }
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setCanSelectToday(canSelect);
   }, [min, max]);
 
@@ -170,13 +192,7 @@ export const DatePanel = ({
   }, []);
 
   return (
-    <div
-      className={classNames(
-        "block overflow-hidden bg-base rounded-capped",
-        className,
-      )}
-      {...rest}
-    >
+    <div className={cn("block overflow-hidden bg-default rounded-capped", className)} {...rest}>
       <BasePanel
         {...state}
         max={max}
@@ -198,7 +214,7 @@ export const DatePanel = ({
               color="primary"
               className="my-1"
               onClick={() => {
-                setHijri(!isHijri);
+                setIsHijri(!isHijri);
               }}
             >
               {t(isHijri ? "label.gregorian" : "label.hijri")}
@@ -206,13 +222,7 @@ export const DatePanel = ({
           )}
         </span>
         {state.page === PageType.DATE && canSelectToday && (
-          <Button
-            size="sm"
-            variant="link"
-            color="primary"
-            className="my-1"
-            onClick={() => selectDate(new Date())}
-          >
+          <Button size="sm" variant="link" color="primary" className="my-1" onClick={() => selectDate(new Date())}>
             {t("label.today")}
           </Button>
         )}
@@ -222,9 +232,7 @@ export const DatePanel = ({
             variant="link"
             color="primary"
             className="my-1"
-            onClick={() =>
-              dispatch({ type: "changePage", page: PageType.DATE })
-            }
+            onClick={() => dispatch({ type: "changePage", page: PageType.DATE })}
           >
             {t("core:action.cancel")}
           </Button>
@@ -232,4 +240,4 @@ export const DatePanel = ({
       </div>
     </div>
   );
-};
+}

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

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Content, Section } from "@react-fabric/core";
+import { Content, Layout } from "@react-fabric/core";
 import { EMPTY_ARRAY } from "@react-fabric/utilities";
 import { endOfDay, isSameMonth, setYear, startOfDay } from "date-fns";
 import i18next from "i18next";
@@ -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 {
@@ -44,11 +44,7 @@ type EventActions =
   | { type: "changePage"; page: PageType }
   | { type: "changePageDate"; date: Date; changePage?: boolean };
 
-const makeList = (
-  year: number,
-  recurring: EventType[] = [],
-  predefined: Array<EventType<Date>> = [],
-) => {
+function makeList(year: number, recurring: EventType[] = [], predefined: Array<EventType<Date>> = []) {
   const list = [...predefined];
   recurring.forEach((evt) =>
     list.push({
@@ -73,11 +69,7 @@ const makeList = (
   let hijriStart = DateUtil.startOfYear(new Date(`${year - 1}-12-31`), true);
   hijriStart = DateUtil.addMonths(hijriStart, 8, true);
   if (hijriStart.getFullYear() !== year) {
-    hijriStart = DateUtil.addYears(
-      hijriStart,
-      hijriStart.getFullYear() > year ? -1 : 1,
-      true,
-    );
+    hijriStart = DateUtil.addYears(hijriStart, hijriStart.getFullYear() > year ? -1 : 1, true);
   }
   const hijriEnd = DateUtil.endOfMonth(hijriStart, true);
   list.push({
@@ -88,18 +80,28 @@ const makeList = (
   return list.sort((a, b) => {
     return a.start.getTime() < b.start.getTime() ? -1 : 1;
   });
-};
+}
+
+export interface EventProps {
+  isHijri?: boolean;
+  /**
+   * list of calendar events
+   */
+  events?: EventType[];
+  /**
+   * list of calendar events
+   */
+  recurringEvents?: EventType[];
 
-export const EventPanel = ({
-  isHijri,
-  onChange,
-  events = EMPTY_ARRAY,
-  recurringEvents = EMPTY_ARRAY,
-}: { isHijri: boolean } & Partial<SuperDateProps>) => {
+  /**
+   * change handler
+   */
+  onChange?: (value: string, dates: [string, string]) => void;
+}
+
+export function EventPanel({ isHijri, onChange, events = EMPTY_ARRAY, recurringEvents = EMPTY_ARRAY }: EventProps) {
   const { t } = useTranslation();
-  const [predefined, setPredefined] = useState<
-    KeyValue<Array<EventType<Date>>>
-  >({});
+  const [predefined, setPredefined] = useState<KeyValue<EventType<Date>[]>>(() => ({}));
 
   const [state, dispatch] = useReducer(
     (state: EventState, action: EventActions) => {
@@ -114,25 +116,25 @@ 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);
         }
       }
       if (resetList) {
         const year = state.pageDate.getFullYear();
-        state.events = makeList(
-          year,
-          recurringEvents ?? [],
-          predefined[year] ?? [],
-        );
+        state.events = makeList(year, recurringEvents ?? [], predefined[year] ?? []);
       }
       return { ...state };
     },
     {
+      page: PageType.MONTH,
+      events: [],
+    } as unknown as EventState,
+    () => ({
       pageDate: new Date(),
       page: PageType.MONTH,
       events: [],
-    } as EventState,
+    }),
   );
 
   useEffect(() => {
@@ -140,31 +142,34 @@ export const EventPanel = ({
   }, []);
 
   useEffect(() => {
-    const predefined: KeyValue = {};
+    const predefined: KeyValue<EventType<Date>[]> = {};
     events.forEach((evt) => {
       const start = startOfDay(new Date(evt.start));
       const end = endOfDay(new Date(evt.end));
 
-      if (!predefined[start.getFullYear()])
-        predefined[start.getFullYear()] = [];
-      predefined[start.getFullYear()].push(evt);
+      const startYear = start.getFullYear();
+      if (!predefined[startYear]) predefined[startYear] = [];
+      predefined[startYear].push({
+        ...evt,
+        start,
+        end,
+      });
       if (start.getFullYear() !== end.getFullYear()) {
         if (!predefined[end.getFullYear()]) predefined[end.getFullYear()] = [];
-        predefined[end.getFullYear()].push(evt);
+        predefined[end.getFullYear()].push({ ...evt, start, end });
       }
     });
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setPredefined(predefined);
   }, [events]);
 
   return (
-    <Section>
+    <Layout>
       <DateHeader
         page={state.page}
         pageDate={state.pageDate}
         changePage={(page) => dispatch({ type: "changePage", page })}
-        changePageDate={(date) =>
-          dispatch({ type: "changePageDate", date, changePage: false })
-        }
+        changePageDate={(date) => dispatch({ type: "changePageDate", date, changePage: false })}
       />
       {state.page === PageType.MONTH && (
         <Content className="p-2 max-h-48">
@@ -172,24 +177,18 @@ export const EventPanel = ({
             <div
               role="none"
               key={evt.label}
+              data-dropdown-dismiss="true"
               onClick={() => {
-                onChange?.(
-                  `${evt.start.toISOString()}|${evt.end.toISOString()}`,
-                  [evt.start.toISOString(), evt.end.toISOString()],
-                );
+                onChange?.(`${evt.start.toISOString()}|${evt.end.toISOString()}`, [
+                  evt.start.toISOString(),
+                  evt.end.toISOString(),
+                ]);
               }}
               className="text-sm my-1 py-1 px-2 flex flex-nowrap items-center cursor-pointer rounded hover:bg-primary-50"
             >
-              <div className="flex-1 truncate">
-                {t(evt.label, { defaultValue: evt.label })}
-              </div>
+              <div className="flex-1 truncate">{t(evt.label, { defaultValue: evt.label })}</div>
               <div className="text-muted text-xs">
-                {DateUtil.format(
-                  evt.start,
-                  isSameMonth(evt.start, evt.end) ? "dd" : "dd/MMM",
-                  i18next.language,
-                  isHijri,
-                )}
+                {DateUtil.format(evt.start, isSameMonth(evt.start, evt.end) ? "dd" : "dd/MMM", i18next.language, isHijri)}
                 <span> - </span>
                 {DateUtil.format(evt.end, "dd/MMM", i18next.language, isHijri)}
               </div>
@@ -213,6 +212,6 @@ export const EventPanel = ({
           changePageDate={(date) => dispatch({ type: "changePageDate", date })}
         />
       )}
-    </Section>
+    </Layout>
   );
-};
+}

package/src/panels/RangePanel.tsx

@@ -21,11 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, useDebounce, useGlobals } from "@react-fabric/core";
-import { isArray, isEmpty } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { Button, useApplicationContext, useDebounce, usePropState } from "@react-fabric/core";
+import { cn, isArray, isEmpty } from "@react-fabric/utilities";
 import { addMonths, isAfter, isBefore, isSameDay } from "date-fns";
-import { useCallback, useEffect, useReducer, useState } from "react";
+import { useCallback, useEffect, useReducer } from "react";
 import { useTranslation } from "react-i18next";
 import { PageType, type DateLike, type RangeProps } from "../types";
 import { DateUtil } from "../utils/dateUtil";
@@ -58,7 +57,25 @@ type PanelActions =
       pageChange?: boolean;
     };
 
-export const RangePanel = ({
+/**
+ * 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.
+ *
+ * @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)}
+ * />
+ * ```
+ */
+export function RangePanel({
   className,
   max,
   min,
@@ -70,17 +87,13 @@ export const RangePanel = ({
   // @ts-expect-error ignore
   showApply = false,
   ...rest
-}: RangeProps) => {
+}: RangeProps) {
   const { t } = useTranslation("date");
-  const { currentCalendar } = useGlobals();
-  const [isHijri, setHijri] = useState(currentCalendar === "hijri");
+  const { currentCalendar } = useApplicationContext();
+  const [isHijri, setIsHijri] = usePropState(currentCalendar === "hijri");
 
   const fireChange = useDebounce(onChange, [onChange]);
 
-  useEffect(() => {
-    setHijri(currentCalendar === "hijri");
-  }, [currentCalendar]);
-
   const [state, dispatch] = useReducer(
     (state: RangeState, action: PanelActions) => {
       if (action.type === "reset") {
@@ -155,42 +168,39 @@ export const RangePanel = ({
         state[action.range].pageDate = action.date;
         if (action.pageChange) {
           state[action.range].page = Math.max(state[action.range].page - 1, 0);
-          action.range === "start" &&
-            state.start.page === PageType.DATE &&
-            (state.end.pageDate = addMonths(action.date, 1));
+          if (action.range === "start" && state.start.page === PageType.DATE) state.end.pageDate = addMonths(action.date, 1);
         }
       }
 
       if (action.type === "changeDate" || action.type === "changeTime") {
-        if (
-          min &&
-          state.selected &&
-          isBefore(state.selected[0], new Date(min))
-        ) {
+        if (min && state.selected && isBefore(state.selected[0], new Date(min))) {
           state.selected[0] = new Date(min);
           state.start.hour = state.selected[0].getHours();
           state.start.minute = state.selected[0].getMinutes();
         }
-        if (
-          max &&
-          state.selected &&
-          isAfter(state.selected[1], new Date(max))
-        ) {
+        if (max && state.selected && isAfter(state.selected[1], new Date(max))) {
           state.selected[1] = new Date(max);
           state.end.hour = state.selected[1].getHours();
           state.end.minute = state.selected[1].getMinutes();
         }
-        !showApply &&
-          state.selected &&
-          !state.hilight &&
-          fireChange?.([
-            state.selected[0].toISOString(),
-            state.selected[1].toISOString(),
-          ]);
+        if (!showApply && state.selected && !state.hilight)
+          fireChange?.([state.selected[0].toISOString(), state.selected[1].toISOString()]);
       }
       return { ...state };
     },
     {
+      start: {
+        page: PageType.DATE,
+        hour: 0,
+        minute: 0,
+      },
+      end: {
+        page: PageType.DATE,
+        hour: 0,
+        minute: 0,
+      },
+    } as RangeState,
+    () => ({
       start: {
         page: PageType.DATE,
         pageDate: new Date(),
@@ -203,7 +213,9 @@ export const RangePanel = ({
         hour: 0,
         minute: 0,
       },
-    } as RangeState,
+      hilight: undefined,
+      selected: undefined,
+    }),
   );
 
   useEffect(() => {
@@ -262,13 +274,7 @@ export const RangePanel = ({
   }, []);
 
   return (
-    <div
-      className={classNames(
-        "block overflow-hidden bg-base rounded-capped",
-        className,
-      )}
-      {...rest}
-    >
+    <div className={cn("block overflow-hidden bg-default rounded-capped", className)} {...rest}>
       <div className="flex flex-nowrap">
         <BasePanel
           {...state.start}
@@ -281,12 +287,8 @@ export const RangePanel = ({
           selected={state.selected}
           selectDate={selectDate}
           isDateDisabled={isStartDateDisabled}
-          changeTime={(time) =>
-            dispatch({ type: "changeTime", range: "start", ...time })
-          }
-          changePage={(page) =>
-            dispatch({ type: "changePage", range: "start", page })
-          }
+          changeTime={(time) => dispatch({ type: "changeTime", range: "start", ...time })}
+          changePage={(page) => dispatch({ type: "changePage", range: "start", page })}
           mouseOver={(date) => dispatch({ type: "changeHilight", date })}
           changePageDate={changeStartPageDate}
         />
@@ -302,12 +304,8 @@ export const RangePanel = ({
           selected={state.selected}
           selectDate={selectDate}
           isDateDisabled={isEndDateDisabled}
-          changeTime={(time) =>
-            dispatch({ type: "changeTime", range: "end", ...time })
-          }
-          changePage={(page) =>
-            dispatch({ type: "changePage", range: "end", page })
-          }
+          changeTime={(time) => dispatch({ type: "changeTime", range: "end", ...time })}
+          changePage={(page) => dispatch({ type: "changePage", range: "end", page })}
           mouseOver={(date) => dispatch({ type: "changeHilight", date })}
           changePageDate={changeEndPageDate}
         />
@@ -321,7 +319,7 @@ export const RangePanel = ({
               color="primary"
               className="my-1"
               onClick={() => {
-                setHijri(!isHijri);
+                setIsHijri(!isHijri);
               }}
             >
               {t(isHijri ? "label.gregorian" : "label.hijri")}
@@ -383,13 +381,9 @@ export const RangePanel = ({
             variant="solid"
             color="primary"
             disabled={!state.selected}
+            data-dropdown-dismiss="true"
             className="my-1"
-            onClick={() =>
-              fireChange?.([
-                state.selected?.[0].toISOString(),
-                state.selected?.[1].toISOString(),
-              ])
-            }
+            onClick={() => fireChange?.([state.selected?.[0].toISOString(), state.selected?.[1].toISOString()])}
           >
             {t("core:action.apply")}
           </Button>
@@ -397,4 +391,4 @@ export const RangePanel = ({
       </div>
     </div>
   );
-};
+}

package/src/types/index.ts

@@ -22,7 +22,6 @@
  */
 
 import {
-  type ColorType,
   type CssProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
@@ -63,6 +62,14 @@ format?:
     | string;
     */
 
+export interface EventType<D = DateLike> {
+  label: string;
+  icon?: string;
+  start: D;
+  end: D;
+  hijri?: boolean;
+}
+
 export interface BaseProps {
   min?: DateLike;
   max?: DateLike;
@@ -82,45 +89,3 @@ export interface RangeProps extends BaseProps, CssProp, TestProps {
   onChange?: (dates: [start: string, end: string]) => void;
   presets?: Record<string, [DateLike, DateLike]>;
 }
-
-export interface EventType<D = DateLike> {
-  label: string;
-  icon?: string;
-  start: D;
-  end: D;
-  hijri?: boolean;
-}
-
-export interface PresetType {
-  value: string;
-  label: string;
-}
-
-export interface SuperDateProps extends TestProps {
-  as?: "button" | "chip";
-  color?: ColorType;
-  variant?: "solid" | "outline" | "link";
-  disabled?: boolean;
-  /**
-   * relative date value
-   */
-  value?: string;
-  /**
-   * change handler
-   */
-  onChange?: (value: string, dates: [string, string]) => void;
-  /**
-   * list of calendar events
-   */
-  events?: EventType[];
-  /**
-   * list of calendar events
-   */
-  recurringEvents?: EventType[];
-  /**
-   * list of relative presets
-   *
-   * {value:'$year-5|$year', label:'last 5 years'}
-   */
-  presets?: PresetType[];
-}