diff --git a/packages/styled/package.json b/packages/styled/package.json
index 4bd301d..c7f968d 100644
--- a/packages/styled/package.json
+++ b/packages/styled/package.json
@@ -1,6 +1,6 @@
{
"name": "@power-rent/react-datepicker-modern",
- "version": "1.0.3",
+ "version": "1.0.4",
"description": "A React datepicker build with styled-components.",
"keywords": [
"datepicker",
diff --git a/packages/styled/src/components/Close/Close.tsx b/packages/styled/src/components/Close/Close.tsx
index 3254535..007d91d 100644
--- a/packages/styled/src/components/Close/Close.tsx
+++ b/packages/styled/src/components/Close/Close.tsx
@@ -83,16 +83,18 @@ function Close({onClick, rtl, closeText}: CloseProps) {
aria-label="Close"
>
-
- {closeText}
-
+ {closeText && (
+
+ {closeText}
+
+ )}
)
}
diff --git a/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.stories.tsx b/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.stories.tsx
index f995e45..14eff64 100644
--- a/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.stories.tsx
+++ b/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.stories.tsx
@@ -53,6 +53,8 @@ interface AppProps {
onDayRender?(date: Date): React.ReactNode
unavailableDates?: Date[]
initialVisibleMonth?: Date
+ datepickerCloseWrapperRightCustom?: string | null
+ datepickerPaddingCustom?: string | null
}
function App({
@@ -76,6 +78,8 @@ function App({
monthLabelFormat = monthLabelFormatFn,
onDayRender = undefined,
unavailableDates = [],
+ datepickerCloseWrapperRightCustom = null,
+ datepickerPaddingCustom = null,
}: AppProps) {
const [state, dispatch] = useReducer(reducer, initialState)
@@ -111,6 +115,8 @@ function App({
onDayRender={onDayRender}
unavailableDates={unavailableDates}
initialVisibleMonth={initialVisibleMonth}
+ datepickerCloseWrapperRightCustom={datepickerCloseWrapperRightCustom}
+ datepickerPaddingCustom={datepickerPaddingCustom}
/>
)
}
@@ -124,5 +130,7 @@ storiesOf('DateRangeInputModern', module).add('Simple demo', () => (
showClose={boolean('showClose', true)}
showSelectedDates={boolean('showSelectedDates', true)}
displayFormat={text('displayFormat', 'MM/dd/yyyy')}
+ datepickerCloseWrapperRightCustom={text('datepickerCloseWrapperRightCustom', '10px')}
+ datepickerPaddingCustom={text('datepickerPaddingCustom', '10px')}
/>
))
diff --git a/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx b/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx
index dac0d02..e10b3c7 100644
--- a/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx
+++ b/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx
@@ -115,6 +115,8 @@ export interface DateRangeInputModernProps extends UseDatepickerProps {
datepickerLeftCustom?: string
datepickerTopCustom?: string
datepickerZIndexCustom?: number | null
+ datepickerPaddingCustom?: string | null
+ datepickerCloseWrapperRightCustom?: string | null
}
function DateRangeInputModern({
@@ -157,7 +159,8 @@ function DateRangeInputModern({
datepickerHeightCustom,
datepickerLeftCustom,
datepickerTopCustom,
- datepickerZIndexCustom,
+ datepickerPaddingCustom,
+ datepickerCloseWrapperRightCustom,
}: DateRangeInputModernProps) {
const ref = useRef(null)
const datepickerWrapperRef = useRef(null)
@@ -306,7 +309,8 @@ function DateRangeInputModern({
datepickerBorderRadius={datepickerBorderRadiusCustom}
datepickerWidth={datepickerWidthCustom}
datepickerHeight={datepickerHeightCustom}
- datepickerZIndex={datepickerZIndexCustom}
+ datepickerPadding={datepickerPaddingCustom}
+ datepickerCloseWrapperRight={datepickerCloseWrapperRightCustom}
/>
)}
diff --git a/packages/styled/src/components/Datepicker/Datepicker.stories.tsx b/packages/styled/src/components/Datepicker/Datepicker.stories.tsx
index 410be32..72756ba 100644
--- a/packages/styled/src/components/Datepicker/Datepicker.stories.tsx
+++ b/packages/styled/src/components/Datepicker/Datepicker.stories.tsx
@@ -41,6 +41,8 @@ interface AppProps {
onDayRender?(date: Date): React.ReactNode
unavailableDates?: Date[]
initialVisibleMonth?: Date
+ datepickerPadding?: string | null
+ datepickerCloseWrapperRight?: string | null
}
function App({
@@ -64,6 +66,8 @@ function App({
monthLabelFormat = monthLabelFormatFn,
onDayRender = undefined,
unavailableDates = [],
+ datepickerPadding = null,
+ datepickerCloseWrapperRight = null,
}: AppProps) {
const [state, setState] = useState({
startDate: null,
@@ -107,6 +111,8 @@ function App({
onDayRender={onDayRender}
unavailableDates={unavailableDates}
initialVisibleMonth={initialVisibleMonth}
+ datepickerPadding={datepickerPadding}
+ datepickerCloseWrapperRight={datepickerCloseWrapperRight}
/>
)
}
@@ -121,6 +127,8 @@ storiesOf('Datepicker', module)
showClose={boolean('showClose', true)}
showSelectedDates={boolean('showSelectedDates', true)}
displayFormat={text('displayFormat', 'MM/dd/yyyy')}
+ datepickerPadding={text('datepickerPadding', '10px')}
+ datepickerCloseWrapperRight={text('datepickerCloseWrapperRight', '10px')}
/>
))
.add('Initial visible month', () => (
diff --git a/packages/styled/src/components/Datepicker/Datepicker.tsx b/packages/styled/src/components/Datepicker/Datepicker.tsx
index 9edede5..dd9f346 100644
--- a/packages/styled/src/components/Datepicker/Datepicker.tsx
+++ b/packages/styled/src/components/Datepicker/Datepicker.tsx
@@ -153,7 +153,8 @@ export interface DatepickerProps extends UseDatepickerProps {
datepickerHeight?: string
datepickerLeft?: string
datepickerTop?: string
- datepickerZIndex?: number | null
+ datepickerPadding?: string | null
+ datepickerCloseWrapperRight?: string | null
}
function Datepicker(
@@ -189,7 +190,8 @@ function Datepicker(
datepickerHeight = 'unset',
datepickerLeft = '0px',
datepickerTop = '0px',
- datepickerZIndex = null,
+ datepickerPadding = null,
+ datepickerCloseWrapperRight = null,
}: DatepickerProps,
ref?: React.Ref,
) {
@@ -311,13 +313,13 @@ function Datepicker(
>