Merge pull request #8 from Toprent-app/feat/add-datepicker-z-index-to-props

Feat: add datepicker z index to props

Author: MrsLecter

packages/styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@power-rent/react-datepicker-modern",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A React datepicker build with styled-components.",
   "keywords": [
     "datepicker",

packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx

@@ -114,6 +114,7 @@ export interface DateRangeInputModernProps extends UseDatepickerProps {
   datepickerHeightCustom?: string
   datepickerLeftCustom?: string
   datepickerTopCustom?: string
+  datepickerZIndexCustom?: number | null
 }
 
 function DateRangeInputModern({
@@ -156,6 +157,7 @@ function DateRangeInputModern({
   datepickerHeightCustom,
   datepickerLeftCustom,
   datepickerTopCustom,
+  datepickerZIndexCustom,
 }: DateRangeInputModernProps) {
   const ref = useRef(null)
   const datepickerWrapperRef = useRef<HTMLDivElement>(null)
@@ -304,6 +306,7 @@ function DateRangeInputModern({
               datepickerBorderRadius={datepickerBorderRadiusCustom}
               datepickerWidth={datepickerWidthCustom}
               datepickerHeight={datepickerHeightCustom}
+              datepickerZIndex={datepickerZIndexCustom}
             />
           )}
         </Box>

packages/styled/src/components/Datepicker/Datepicker.tsx

@@ -153,6 +153,7 @@ export interface DatepickerProps extends UseDatepickerProps {
   datepickerHeight?: string
   datepickerLeft?: string
   datepickerTop?: string
+  datepickerZIndex?: number | null
 }
 
 function Datepicker(
@@ -188,6 +189,7 @@ function Datepicker(
     datepickerHeight = 'unset',
     datepickerLeft = '0px',
     datepickerTop = '0px',
+    datepickerZIndex = null,
   }: DatepickerProps,
   ref?: React.Ref<unknown>,
 ) {
@@ -315,7 +317,7 @@ function Datepicker(
           boxShadow={theme.datepickerBoxShadow}
           width={theme.datepickerWidth}
           height={datepickerHeight}
-          zIndex={theme.datepickerZIndex}
+          zIndex={datepickerZIndex || theme.datepickerZIndex}
           rtl={rtl}
           left={datepickerLeft}
           top={datepickerTop}