@mbao01/common 0.0.10 → 0.0.11

package/dist/types/components/DatePicker/DatePicker.d.ts

@@ -1,2 +1,2 @@
 import { type DatePickerProps } from "./types";
-export declare const DatePicker: ({ name, size, wide, label, outline, variant, disabled, defaultDate, getDateValue, getDateLabel, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: ({ name, size, wide, label, outline, variant, disabled, defaultDate, children, getDateValue, getDateLabel, ...props }: DatePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/DatePicker/types.d.ts

@@ -5,6 +5,10 @@ type BaseDatePickerProps = Pick<ButtonProps, "variant" | "outline" | "wide" | "s
     label?: string;
 };
 export type DatePickerProps = BaseDatePickerProps & Omit<DayPickerSingleProps, "mode" | "selected" | "onSelect"> & {
+    children?: ({ date, setDate, }: {
+        date: Date | undefined;
+        setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    }) => JSX.Element | null;
     defaultDate?: Date;
     getDateLabel?: (date: Date | undefined) => string | undefined;
     getDateValue?: (date: Date | undefined) => string | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mbao01/common",
   "private": false,
-  "version": "0.0.10",
+  "version": "0.0.11",
   "type": "module",
   "author": "Ayomide Bakare",
   "license": "MIT",
@@ -127,5 +127,5 @@
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2"
   },
-  "gitHead": "ea8132bd773a0b14c438d7e4a6eb37b202b4a2aa"
+  "gitHead": "148ac0de002cadbfa9129b6056a72b7e132f0110"
 }

package/src/components/DatePicker/DatePicker.tsx

@@ -18,6 +18,7 @@ export const DatePicker = ({
   variant,
   disabled,
   defaultDate,
+  children,
   getDateValue = (date) => date?.toUTCString(),
   getDateLabel = (date) => (date ? format(date, "PPP") : undefined),
   ...props
@@ -27,6 +28,17 @@ export const DatePicker = ({
   const dateLabel = getDateLabel(date);
   const dateValue = getDateValue(date);
 
+  const calendar = (
+    <Calendar
+      initialFocus
+      mode="single"
+      selected={date}
+      onSelect={setDate}
+      captionLayout="dropdown-buttons"
+      {...props}
+    />
+  );
+
   return (
     <Popover>
       <Popover.Trigger asChild>
@@ -44,15 +56,19 @@ export const DatePicker = ({
           <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
         </Button>
       </Popover.Trigger>
-      <Popover.Content className="w-auto p-0">
-        <Calendar
-          initialFocus
-          mode="single"
-          selected={date}
-          onSelect={setDate}
-          captionLayout="dropdown-buttons"
-          {...props}
-        />
+      <Popover.Content
+        className={cn("w-auto p-0", {
+          "flex flex-col space-y-2 p-2": children,
+        })}
+      >
+        {children ? (
+          <>
+            {children?.({ date, setDate })}
+            <div className="rounded-md border">{calendar}</div>
+          </>
+        ) : (
+          calendar
+        )}
       </Popover.Content>
     </Popover>
   );

package/src/components/DatePicker/types.ts

@@ -15,6 +15,13 @@ type BaseDatePickerProps = Pick<
 
 export type DatePickerProps = BaseDatePickerProps &
   Omit<DayPickerSingleProps, "mode" | "selected" | "onSelect"> & {
+    children?: ({
+      date,
+      setDate,
+    }: {
+      date: Date | undefined;
+      setDate: React.Dispatch<React.SetStateAction<Date | undefined>>;
+    }) => JSX.Element | null;
     defaultDate?: Date;
     getDateLabel?: (date: Date | undefined) => string | undefined;
     getDateValue?: (date: Date | undefined) => string | undefined;