diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx index 54e90b7..eef0a90 100644 --- a/src/components/Datepicker.tsx +++ b/src/components/Datepicker.tsx @@ -29,6 +29,7 @@ const Datepicker: React.FC = ({ disabled = false, inputClassName = null, containerClassName = null, + popupClassName = null, toggleClassName = null, toggleIcon = undefined, displayFormat = DATE_FORMAT, @@ -327,15 +328,22 @@ const Datepicker: React.FC = ({ : defaultContainerClassName; }, [containerClassName]); + const popupClassNameOverload = useMemo(() => { + const defaultPopupClassName = + "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"; + return typeof popupClassName === "function" + ? popupClassName(defaultPopupClassName) + : typeof popupClassName === "string" && popupClassName !== "" + ? popupClassName + : defaultPopupClassName; + }, [popupClassName]); + return (
-
+
diff --git a/src/types/index.ts b/src/types/index.ts index b9e561c..937f4cd 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -69,6 +69,7 @@ export interface DatepickerType { disabled?: boolean; classNames?: ClassNamesTypeProp | undefined; containerClassName?: ((className: string) => string) | string | null; + popupClassName?: ((className: string) => string) | string | null; inputClassName?: ((className: string) => string) | string | null; toggleClassName?: ((className: string) => string) | string | null; toggleIcon?: (open: boolean) => React.ReactNode;