Add inline option to use the calendar stand alone or with a custom in…

pages/index.js

@@ -31,6 +31,7 @@ export default function Playground() {
     const [newDisabledDates, setNewDisabledDates] = useState({ startDate: "", endDate: "" });
     const [startFrom, setStartFrom] = useState("2023-03-01");
     const [startWeekOn, setStartWeekOn] = useState("");
+    const [inline, setInline] = useState(false);
 
     const handleChange = (value, e) => {
         setValue(value);
@@ -113,6 +114,7 @@ export default function Playground() {
                         return isEmpty ? "Select Date" : "Clear";
                     }}
                     popoverDirection={"down"}
+                    inline={inline}
                     // classNames={{
                     //     input: ({ disabled, readOnly, className }) => {
                     //         if (disabled) {
@@ -215,6 +217,20 @@ export default function Playground() {
                             </label>
                         </div>
                     </div>
+                    <div className="mb-2 w-1/2 sm:w-full">
+                        <div className="inline-flex items-center">
+                            <input
+                                type="checkbox"
+                                className="mr-2 rounded"
+                                id="inline"
+                                checked={inline}
+                                onChange={e => setInline(e.target.checked)}
+                            />
+                            <label className="block" htmlFor="inline">
+                                Inline
+                            </label>
+                        </div>
+                    </div>
                 </div>
                 <div className="w-full sm:w-1/3 pr-2 flex flex-col">
                     <div className="mb-2">

src/components/Datepicker.tsx

@@ -7,13 +7,13 @@ import Input from "../components/Input";
 import Shortcuts from "../components/Shortcuts";
 import { COLORS, DATE_FORMAT, DEFAULT_COLOR, LANGUAGE } from "../constants";
 import DatepickerContext from "../contexts/DatepickerContext";
-import { formatDate, nextMonth, previousMonth } from "../helpers";
+import { formatDate, nextMonth, previousMonth, classNames as classNamesUtil } from "../helpers";
 import useOnClickOutside from "../hooks";
 import { Period, DatepickerType, ColorKeys } from "../types";
 
 import { Arrow, VerticalDash } from "./utils";
 
-const Datepicker: React.FC<DatepickerType> = ({
+const Datepicker = ({
     primaryColor = "blue",
     value = null,
     onChange,
@@ -22,13 +22,14 @@ const Datepicker: React.FC<DatepickerType> = ({
     showShortcuts = false,
     configs = undefined,
     asSingle = false,
-    placeholder = null,
+    placeholder = undefined,
     separator = "~",
     startFrom = null,
     i18n = LANGUAGE,
     disabled = false,
     inputClassName = null,
     containerClassName = null,
+    pickerClassName = null,
     toggleClassName = null,
     toggleIcon = undefined,
     displayFormat = DATE_FORMAT,
@@ -41,8 +42,9 @@ const Datepicker: React.FC<DatepickerType> = ({
     inputName,
     startWeekOn = "sun",
     classNames = undefined,
-    popoverDirection = undefined
-}) => {
+    popoverDirection = undefined,
+    inline = false
+}: DatepickerType) => {
     // Ref
     const containerRef = useRef<HTMLDivElement | null>(null);
     const calendarContainerRef = useRef<HTMLDivElement | null>(null);
@@ -64,7 +66,7 @@ const Datepicker: React.FC<DatepickerType> = ({
     // Custom Hooks use
     useOnClickOutside(containerRef, () => {
         const container = containerRef.current;
-        if (container) {
+        if (container && !inline) {
             hideDatepicker();
         }
     });
@@ -327,18 +329,33 @@ const Datepicker: React.FC<DatepickerType> = ({
             : defaultContainerClassName;
     }, [containerClassName]);
 
+    const pickerClassNameOverload = useMemo(() => {
+        const defaultPickerClassName = classNamesUtil(
+            "shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg w-fit",
+            !inline && "mt-2.5"
+        );
+        return typeof pickerClassName === "function"
+            ? pickerClassName(defaultPickerClassName)
+            : typeof pickerClassName === "string" && pickerClassName !== ""
+            ? pickerClassName
+            : defaultPickerClassName;
+    }, [pickerClassName, inline]);
+
     return (
         <DatepickerContext.Provider value={contextValues}>
             <div className={containerClassNameOverload} ref={containerRef}>
-                <Input setContextRef={setInputRef} />
+                {!inline && <Input setContextRef={setInputRef} />}
 
                 <div
-                    className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden"
+                    className={classNamesUtil(
+                        "transition-all ease-out duration-300 mt-[1px] text-sm lg:text-xs 2xl:text-sm",
+                        !inline && "absolute z-10 opacity-0 hidden translate-y-4"
+                    )}
                     ref={calendarContainerRef}
                 >
-                    <Arrow ref={arrowRef} />
+                    {!inline && <Arrow ref={arrowRef} />}
 
-                    <div className="mt-2.5 shadow-sm border border-gray-300 px-1 py-0.5 bg-white dark:bg-slate-800 dark:text-white dark:border-slate-600 rounded-lg">
+                    <div className={pickerClassNameOverload}>
                         <div className="flex flex-col lg:flex-row py-2">
                             {showShortcuts && <Shortcuts />}
 

src/constants/index.ts

@@ -18,7 +18,8 @@ export const COLORS = [
     "purple",
     "fuchsia",
     "pink",
-    "rose"
+    "rose",
+    "zinc"
 ] as const;
 
 export const DEFAULT_COLOR: ColorKeys = "blue";
@@ -57,7 +58,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-100",
         fuchsia: "bg-fuchsia-100",
         pink: "bg-pink-100",
-        rose: "bg-rose-100"
+        rose: "bg-rose-100",
+        zinc: "bg-zinc-100"
     },
     200: {
         blue: "bg-blue-200",
@@ -76,7 +78,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-200",
         fuchsia: "bg-fuchsia-200",
         pink: "bg-pink-200",
-        rose: "bg-rose-200"
+        rose: "bg-rose-200",
+        zinc: "bg-zinc-200"
     },
     500: {
         blue: "bg-blue-500",
@@ -95,7 +98,8 @@ export const BG_COLOR: Colors = {
         violet: "bg-violet-500",
         fuchsia: "bg-fuchsia-500",
         pink: "bg-pink-500",
-        rose: "bg-rose-500"
+        rose: "bg-rose-500",
+        zinc: "bg-zinc-500"
     },
     hover: {
         blue: "hover:bg-blue-600",
@@ -114,7 +118,8 @@ export const BG_COLOR: Colors = {
         violet: "hover:bg-violet-600",
         fuchsia: "hover:bg-fuchsia-600",
         pink: "hover:bg-pink-600",
-        rose: "hover:bg-rose-600"
+        rose: "hover:bg-rose-600",
+        zinc: "hover:bg-zinc-600"
     }
 };
 
@@ -136,7 +141,8 @@ export const TEXT_COLOR: Colors = {
         violet: "text-violet-500",
         fuchsia: "text-fuchsia-500",
         pink: "text-pink-500",
-        rose: "text-rose-500"
+        rose: "text-rose-500",
+        zinc: "text-zinc-500"
     },
     600: {
         blue: "text-blue-600 dark:text-blue-400 dark:hover:text-blue-400",
@@ -155,7 +161,8 @@ export const TEXT_COLOR: Colors = {
         violet: "text-violet-600 dark:text-violet-400 dark:hover:text-violet-400",
         fuchsia: "text-fuchsia-600 dark:text-fuchsia-400 dark:hover:text-fuchsia-400",
         pink: "text-pink-600 dark:text-pink-400 dark:hover:text-pink-400",
-        rose: "text-rose-600 dark:text-rose-400 dark:hover:text-rose-400"
+        rose: "text-rose-600 dark:text-rose-400 dark:hover:text-rose-400",
+        zinc: "text-zinc-600 dark:text-zinc-400 dark:hover:text-zinc-400"
     },
     hover: {
         blue: "hover:text-blue-700",
@@ -174,7 +181,8 @@ export const TEXT_COLOR: Colors = {
         violet: "hover:text-violet-700",
         fuchsia: "hover:text-fuchsia-700",
         pink: "hover:text-pink-700",
-        rose: "hover:text-rose-700"
+        rose: "hover:text-rose-700",
+        zinc: "hover:text-zinc-700"
     }
 };
 
@@ -196,7 +204,8 @@ export const BORDER_COLOR: Colors = {
         violet: "border-violet-500",
         fuchsia: "border-fuchsia-500",
         pink: "border-pink-500",
-        rose: "border-rose-500"
+        rose: "border-rose-500",
+        zinc: "border-zinc-500"
     },
     focus: {
         blue: "focus:border-blue-500",
@@ -215,7 +224,8 @@ export const BORDER_COLOR: Colors = {
         violet: "focus:border-violet-500",
         fuchsia: "focus:border-fuchsia-500",
         pink: "focus:border-pink-500",
-        rose: "focus:border-rose-500"
+        rose: "focus:border-rose-500",
+        zinc: "focus:border-zinc-500"
     }
 };
 
@@ -237,7 +247,8 @@ export const RING_COLOR: Colors = {
         violet: "focus:ring-violet-500",
         fuchsia: "focus:ring-fuchsia-500",
         pink: "focus:ring-pink-500",
-        rose: "focus:ring-rose-500"
+        rose: "focus:ring-rose-500",
+        zinc: "focus:ring-zinc-500"
     },
     "second-focus": {
         blue: "focus:ring-blue-500/20",
@@ -256,7 +267,8 @@ export const RING_COLOR: Colors = {
         violet: "focus:ring-violet-500/20",
         fuchsia: "focus:ring-fuchsia-500/20",
         pink: "focus:ring-pink-500/20",
-        rose: "focus:ring-rose-500/20"
+        rose: "focus:ring-rose-500/20",
+        zinc: "focus:ring-zinc-500/20"
     }
 };
 
@@ -278,6 +290,7 @@ export const BUTTON_COLOR: Colors = {
         violet: "focus:ring-violet-500/50 focus:bg-violet-100/50",
         fuchsia: "focus:ring-fuchsia-500/50 focus:bg-fuchsia-100/50",
         pink: "focus:ring-pink-500/50 focus:bg-pink-100/50",
-        rose: "focus:ring-rose-500/50 focus:bg-rose-100/50"
+        rose: "focus:ring-rose-500/50 focus:bg-rose-100/50",
+        zinc: "focus:ring-zinc-500/50 focus:bg-zinc-100/50"
     }
 };

src/types/index.ts

@@ -69,6 +69,7 @@ export interface DatepickerType {
     disabled?: boolean;
     classNames?: ClassNamesTypeProp | undefined;
     containerClassName?: ((className: string) => string) | string | null;
+    pickerClassName?: ((className: string) => string) | string | null;
     inputClassName?: ((className: string) => string) | string | null;
     toggleClassName?: ((className: string) => string) | string | null;
     toggleIcon?: (open: boolean) => React.ReactNode;
@@ -82,6 +83,7 @@ export interface DatepickerType {
     disabledDates?: DateRangeType[] | null;
     startWeekOn?: string | null;
     popoverDirection?: PopoverDirectionType;
+    inline?: boolean;
 }
 
 export type ColorKeys = (typeof COLORS)[number]; // "blue" | "orange"

tsconfig.json

@@ -20,7 +20,8 @@
         "skipLibCheck": true,
         "noEmit": true,
         "resolveJsonModule": true,
-        "isolatedModules": true
+        "isolatedModules": true,
+        "incremental": true
     },
     "include": ["src/**/*"],
     "exclude": ["node_modules"]