diff --git a/packages/styled/package.json b/packages/styled/package.json index a632106..ac0f5b3 100644 --- a/packages/styled/package.json +++ b/packages/styled/package.json @@ -1,6 +1,6 @@ { "name": "@power-rent/react-datepicker-modern", - "version": "1.0.1", + "version": "1.0.2", "description": "A React datepicker build with styled-components.", "keywords": [ "datepicker", diff --git a/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx b/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx index 58b6d86..283147f 100644 --- a/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx +++ b/packages/styled/src/components/DateRangeInputModern/DateRangeInputModern.tsx @@ -108,6 +108,12 @@ export interface DateRangeInputModernProps extends UseDatepickerProps { initialVisibleMonth?: Date startDateLabel?: string endDateLabel?: string + datepickerSelectDateGridTemplateColumns?: string + datepickerBorderRadiusCustom?: string + datepickerWidthCustom?: string + datepickerHeightCustom?: string + datepickerLeftCustom?: string + datepickerTopCustom?: string } function DateRangeInputModern({ @@ -144,6 +150,12 @@ function DateRangeInputModern({ unavailableDates = [], startDateLabel = 'From', endDateLabel = 'To', + datepickerSelectDateGridTemplateColumns, + datepickerBorderRadiusCustom, + datepickerWidthCustom, + datepickerHeightCustom, + datepickerLeftCustom, + datepickerTopCustom, }: DateRangeInputModernProps) { const ref = useRef(null) const datepickerWrapperRef = useRef(null) @@ -162,6 +174,9 @@ function DateRangeInputModern({ dateRangeStartDateInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 0x', dateRangeEndDateInputPadding: vertical ? (rtl ? '0 32px 0 8px' : '0 8px 0 32px') : '0 0px', dateRangeDatepickerWrapperPosition: 'absolute', + datepickerHeight: 'unset', + datepickerLeft: '0px', + datepickerTop: '0px', ...getPlacement(placement, rtl), }) @@ -253,8 +268,8 @@ function DateRangeInputModern({ {focusedInput !== null && ( @@ -285,6 +300,10 @@ function DateRangeInputModern({ unavailableDates={unavailableDates} ref={ref} initialVisibleMonth={initialVisibleMonth} + datepickerSelectDateGridTemplateColumns={datepickerSelectDateGridTemplateColumns} + datepickerBorderRadius={datepickerBorderRadiusCustom} + datepickerWidth={datepickerWidthCustom} + datepickerHeight={datepickerHeightCustom} /> )} diff --git a/packages/styled/src/components/Datepicker/Datepicker.tsx b/packages/styled/src/components/Datepicker/Datepicker.tsx index 9eb5d3c..999e23b 100644 --- a/packages/styled/src/components/Datepicker/Datepicker.tsx +++ b/packages/styled/src/components/Datepicker/Datepicker.tsx @@ -73,6 +73,9 @@ interface StyledDatepicker ZIndexProps, BoxShadowProps { rtl: boolean + height: string + left: string + top: string } const composeStyledDatepickerStyles = compose( background, @@ -85,7 +88,10 @@ const composeStyledDatepickerStyles = compose( ) const StyledDatepicker = styled('div')` - ${composeStyledDatepickerStyles} + ${composeStyledDatepickerStyles}; + height: ${({height}) => height || 'unset'}; + left: ${({left}) => left || 'unset'}; + top: ${({top}) => top || 'unset'}; ${({rtl}) => rtl && css` @@ -141,6 +147,12 @@ export interface DatepickerProps extends UseDatepickerProps { monthLabelFormat?(date: Date): string onDayRender?(date: Date): React.ReactNode unavailableDates?: Date[] + datepickerSelectDateGridTemplateColumns?: string + datepickerWidth?: string + datepickerBorderRadius?: string + datepickerHeight?: string + datepickerLeft?: string + datepickerTop?: string } function Datepicker( @@ -170,6 +182,12 @@ function Datepicker( displayFormat = 'MM/dd/yyyy', phrases = datepickerPhrases, unavailableDates = [], + datepickerSelectDateGridTemplateColumns = '', + datepickerWidth = '', + datepickerBorderRadius = '', + datepickerHeight = 'unset', + datepickerLeft = '0px', + datepickerTop = '0px', }: DatepickerProps, ref?: React.Ref, ) { @@ -214,11 +232,11 @@ function Datepicker( const themeContext = useContext(ThemeContext) const theme: DatepickerTheme = useThemeProps({ datepickerZIndex: null, - datepickerBackground: '#ffffff', + datepickerBackground: '#ffffff !important', datepickerPadding: vertical ? '16px 16px 0' : '32px', datepickerBorderRadius: '2px', datepickerPosition: 'relative', - datepickerWidth: 'fit-content', + datepickerWidth: datepickerWidth || 'fit-content', datepickerCloseWrapperPosition: vertical ? 'relative' : 'absolute', datepickerCloseWrapperDisplay: vertical ? 'flex' : 'block', datepickerCloseWrapperJustifyContent: vertical ? 'flex-end' : 'initial', @@ -292,12 +310,15 @@ function Datepicker( {showClose && (