feat(zIndex): add zIndex styles

affects: @datepicker-react/styled

ISSUES CLOSED: #32

Author: tresko

docs/THEME_PROPS.md

@@ -111,6 +111,7 @@ inputCalendarIconWidth?: string
 inputCalendarIconHeight?: string
 inputCalendarIconColor?: string
 
+datepickerZIndex?: ResponsiveValue<ZIndexProperty>
 datepickerBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
 datepickerBoxShadow?: ResponsiveValue<BoxShadowProperty>
 datepickerPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
@@ -151,6 +152,7 @@ datepickerNextMonthButtonBottom?: ResponsiveValue<BottomProperty<TLengthStyledSy
 datepickerMonthsGridHeight?: ResponsiveValue<HeightProperty<TLengthStyledSystem>>
 datepickerMonthsGridOverflow?: ResponsiveValue<OverflowProperty>
 
+dateRangeZIndex?: ResponsiveValue<ZIndexProperty>
 dateRangeBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
 dateRangeGridTemplateColumns?: ResponsiveValue<GridTemplateColumnsProperty<TLengthStyledSystem>>
 dateRangeGridTemplateRows?: ResponsiveValue<GridTemplateRowsProperty<TLengthStyledSystem>>
@@ -167,4 +169,12 @@ dateRangeDatepickerWrapperBottom?: ResponsiveValue<BottomProperty<TLengthStyledS
 dateRangeDatepickerWrapperPosition?: ResponsiveValue<PositionProperty>
 dateRangeStartDateInputPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
 dateRangeEndDateInputPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
+
+dateSingleZIndex?: ResponsiveValue<ZIndexProperty>
+dateSingleDatepickerWrapperTop?: ResponsiveValue<TopProperty<TLengthStyledSystem>>
+dateSingleDatepickerWrapperRight?: ResponsiveValue<RightProperty<TLengthStyledSystem>>
+dateSingleDatepickerWrapperLeft?: ResponsiveValue<LeftProperty<TLengthStyledSystem>>
+dateSingleDatepickerWrapperBottom?: ResponsiveValue<BottomProperty<TLengthStyledSystem>>
+dateSingleDatepickerWrapperPosition?: ResponsiveValue<PositionProperty>
+dateSingleInputPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
 ```

packages/styled/src/@types/theme.d.ts

@@ -145,6 +145,7 @@ export interface InputTheme extends CommonTheme {
 }
 
 export interface DatepickerTheme extends CommonTheme {
+  datepickerZIndex?: ResponsiveValue<ZIndexProperty>
   datepickerBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
   datepickerBoxShadow?: ResponsiveValue<BoxShadowProperty>
   datepickerPadding?: ResponsiveValue<PaddingProperty<TLengthStyledSystem>>
@@ -187,6 +188,7 @@ export interface DatepickerTheme extends CommonTheme {
 }
 
 export interface DateRangeInputTheme extends CommonTheme {
+  dateRangeZIndex?: ResponsiveValue<ZIndexProperty>
   dateRangeBackground?: ResponsiveValue<BackgroundProperty<TLengthStyledSystem>>
   dateRangeGridTemplateColumns?: ResponsiveValue<GridTemplateColumnsProperty<TLengthStyledSystem>>
   dateRangeGridTemplateRows?: ResponsiveValue<GridTemplateRowsProperty<TLengthStyledSystem>>
@@ -206,6 +208,7 @@ export interface DateRangeInputTheme extends CommonTheme {
 }
 
 export interface DateSingleInputTheme extends CommonTheme {
+  dateSingleZIndex?: ResponsiveValue<ZIndexProperty>
   dateSingleDatepickerWrapperTop?: ResponsiveValue<TopProperty<TLengthStyledSystem>>
   dateSingleDatepickerWrapperRight?: ResponsiveValue<RightProperty<TLengthStyledSystem>>
   dateSingleDatepickerWrapperLeft?: ResponsiveValue<LeftProperty<TLengthStyledSystem>>

packages/styled/src/components/DateRangeInput/DateRangeInput.tsx

@@ -11,6 +11,8 @@ import {
   BorderRadiusProps,
   color,
   ColorProps,
+  zIndex,
+  ZIndexProps,
   compose,
 } from 'styled-system'
 import {
@@ -37,7 +39,9 @@ import globalStyles from '../../globalStyles'
 interface RtlProps {
   rtl: boolean
 }
-const Wrapper = styled(Box)<RtlProps>`
+interface WrapperProps extends RtlProps, ZIndexProps {}
+const Wrapper = styled(Box)<WrapperProps>`
+  ${zIndex}
   ${({rtl}) =>
     rtl &&
     css`
@@ -47,10 +51,7 @@ const Wrapper = styled(Box)<RtlProps>`
 
 interface InputArrowIconProps extends OpacityProps, ColorProps, RtlProps {}
 
-const composeInputArrowIconStyles = compose(
-  color,
-  opacity,
-)
+const composeInputArrowIconStyles = compose(color, opacity)
 
 const InputArrowIcon = styled(ArrowIcon)<InputArrowIconProps>`
   ${composeInputArrowIconStyles}
@@ -63,11 +64,7 @@ const InputArrowIcon = styled(ArrowIcon)<InputArrowIconProps>`
 
 interface StyledGridProps extends BackgroundProps, BorderProps, BorderRadiusProps {}
 
-const composeInputGridStyles = compose(
-  background,
-  border,
-  borderRadius,
-)
+const composeInputGridStyles = compose(background, border, borderRadius)
 
 const InputGrid = styled(Grid)<StyledGridProps>`
   ${composeInputGridStyles}
@@ -161,6 +158,7 @@ function DateRangeInput({
   const datepickerWrapperRef = useRef<HTMLDivElement>(null)
   const themeContext = useContext(ThemeContext)
   const theme: DateRangeInputTheme = useThemeProps({
+    dateRangeZIndex: null,
     dateRangeBackground: 'transparent',
     dateRangeGridTemplateColumns: vertical ? '1fr 24px 1fr' : '194px 39px 194px',
     dateRangeGridTemplateRows: 'unset',
@@ -213,7 +211,12 @@ function DateRangeInput({
 
   return (
     <ThemeProvider theme={(theme: Record<string, unknown>) => theme || {}}>
-      <Wrapper rtl={rtl} position="relative" ref={datepickerWrapperRef}>
+      <Wrapper
+        zIndex={theme.dateRangeZIndex}
+        rtl={rtl}
+        position="relative"
+        ref={datepickerWrapperRef}
+      >
         <InputGrid
           data-testid="DateRangeInputGrid"
           background={theme.dateRangeBackground}

packages/styled/src/components/DateSingleInput/DateSingleInput.tsx

@@ -1,4 +1,5 @@
 import React, {useRef, useEffect} from 'react'
+import {zIndex, ZIndexProps} from 'styled-system'
 import styled, {css, ThemeProvider} from 'styled-components'
 import {
   START_DATE,
@@ -19,7 +20,9 @@ import useThemeProps from '../../hooks/useThemeProps'
 interface RtlProps {
   rtl: boolean
 }
-const Wrapper = styled(Box)<RtlProps>`
+interface WrapperProps extends RtlProps, ZIndexProps {}
+const Wrapper = styled(Box)<WrapperProps>`
+  ${zIndex}
   ${({rtl}) =>
     rtl &&
     css`
@@ -119,6 +122,7 @@ function DateSingleInput({
   const ref = useRef(null)
   const datepickerWrapperRef = useRef<HTMLDivElement>(null)
   const theme: DateSingleInputTheme = useThemeProps({
+    dateSingleZIndex: null,
     dateSingleInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 44px',
     dateSingleDatepickerWrapperPosition: 'absolute',
     ...getPlacement(placement, rtl),
@@ -168,7 +172,12 @@ function DateSingleInput({
 
   return (
     <ThemeProvider theme={(theme: Record<string, unknown>) => theme || {}}>
-      <Wrapper rtl={rtl} position="relative" ref={datepickerWrapperRef}>
+      <Wrapper
+        zIndex={theme.dateSingleZIndex}
+        rtl={rtl}
+        position="relative"
+        ref={datepickerWrapperRef}
+      >
         <Input
           id={inputId}
           ariaLabel={phrases.dateAriaLabel}

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

@@ -21,6 +21,8 @@ import {
   HeightProps,
   WidthProps,
   width,
+  zIndex,
+  ZIndexProps,
   compose,
 } from 'styled-system'
 import {
@@ -68,6 +70,7 @@ interface StyledDatepicker
     BorderRadiusProps,
     PositionProps,
     WidthProps,
+    ZIndexProps,
     BoxShadowProps {
   rtl: boolean
 }
@@ -78,6 +81,7 @@ const composeStyledDatepickerStyles = compose(
   position,
   boxShadow,
   width,
+  zIndex,
 )
 
 const StyledDatepicker = styled('div')<StyledDatepicker>`
@@ -109,20 +113,14 @@ const DateWrapper = styled('div')`
 `
 
 interface CloseWrapperProps extends JustifyContentProps, DisplayProps {}
-const composeCloseWrapperStyles = compose(
-  display,
-  justifyContent,
-)
+const composeCloseWrapperStyles = compose(display, justifyContent)
 
 const CloseWrapper = styled(Box)<CloseWrapperProps>`
   ${composeCloseWrapperStyles}
 `
 
 interface MonthGridProps extends HeightProps, OverflowProps {}
-const composeMonthGridStyles = compose(
-  overflow,
-  height,
-)
+const composeMonthGridStyles = compose(overflow, height)
 
 const MonthGrid = styled(Grid)<MonthGridProps>`
   ${composeMonthGridStyles}
@@ -209,6 +207,7 @@ function Datepicker(
   const monthGridRef = useRef<HTMLDivElement>(null)
   const themeContext = useContext(ThemeContext)
   const theme: DatepickerTheme = useThemeProps({
+    datepickerZIndex: null,
     datepickerBackground: '#ffffff',
     datepickerPadding: vertical ? '16px 16px 0' : '32px',
     datepickerBorderRadius: '2px',
@@ -291,6 +290,7 @@ function Datepicker(
           position={theme.datepickerPosition}
           boxShadow={theme.datepickerBoxShadow}
           width={theme.datepickerWidth}
+          zIndex={theme.datepickerZIndex}
           rtl={rtl}
         >
           {showClose && (