From c4da278577a55e5af1776d69637d60cd66822de1 Mon Sep 17 00:00:00 2001 From: MrsLecter Date: Wed, 28 Jan 2026 19:08:28 +0200 Subject: [PATCH 1/2] feat: add props for close button --- .../styled/src/components/Close/Close.tsx | 22 ++++++++++--------- .../DateRangeInputModern.stories.tsx | 8 +++++++ .../DateRangeInputModern.tsx | 8 +++++-- .../Datepicker/Datepicker.stories.tsx | 8 +++++++ .../src/components/Datepicker/Datepicker.tsx | 12 +++++----- 5 files changed, 41 insertions(+), 17 deletions(-) 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( > Date: Wed, 28 Jan 2026 19:09:09 +0200 Subject: [PATCH 2/2] chore: upgrade to v1.0.4 --- packages/styled/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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",