diff --git a/src/index.tsx b/src/index.tsx index d642e0ccc8..6864528011 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -124,7 +124,7 @@ export type DatePickerProps = Omit< > & Pick & Pick & - Omit & + Omit & Omit< PopperComponentProps, | "className" @@ -1332,7 +1332,11 @@ export default class DatePicker extends Component< ) : null; if (this.state.open && this.props.portalId) { - portalContainer = {portalContainer}; + portalContainer = ( + + {portalContainer} + + ); } return ( diff --git a/src/month.tsx b/src/month.tsx index ac5f9781fc..2ef9ed6793 100644 --- a/src/month.tsx +++ b/src/month.tsx @@ -98,6 +98,8 @@ interface MonthProps | "preSelection" | "selected" | "showWeekNumber" + | "chooseDayAriaLabelPrefix" + | "disabledDayAriaLabelPrefix" > { monthClassName?: (date: Date) => string; onDayClick?: ( @@ -132,6 +134,8 @@ interface MonthProps showFourColumnMonthYearPicker?: boolean; showQuarterYearPicker?: boolean; weekAriaLabelPrefix?: WeekProps["ariaLabelPrefix"]; + chooseDayAriaLabelPrefix?: WeekProps["chooseDayAriaLabelPrefix"]; + disabledDayAriaLabelPrefix?: WeekProps["disabledDayAriaLabelPrefix"]; } /** diff --git a/src/popper_component.tsx b/src/popper_component.tsx index 594c465b4c..374794a201 100644 --- a/src/popper_component.tsx +++ b/src/popper_component.tsx @@ -6,33 +6,29 @@ import Portal from "./portal"; import TabLoop from "./tab_loop"; import withFloating from "./with_floating"; -import type { ReferenceType, UseFloatingReturn } from "@floating-ui/react"; +import type { FloatingProps } from "./with_floating"; interface PortalProps extends Omit, "children"> {} interface TabLoopProps extends Omit, "children"> {} -interface PopperComponentProps - extends PortalProps, - TabLoopProps { +interface PopperComponentProps + extends Omit, + TabLoopProps, + FloatingProps { className?: string; wrapperClassName?: string; - hidePopper?: boolean; popperComponent: React.ReactNode; popperContainer?: React.FC; - popperProps: UseFloatingReturn & { - arrowRef: React.RefObject; - }; targetComponent: React.ReactNode; popperOnKeyDown: React.KeyboardEventHandler; showArrow?: boolean; + portalId?: PortalProps["portalId"]; } // Exported for testing purposes -export class PopperComponent< - RT extends ReferenceType = ReferenceType, -> extends Component> { +export class PopperComponent extends Component { static get defaultProps(): Partial { return { hidePopper: true, diff --git a/src/with_floating.tsx b/src/with_floating.tsx index f4f518fdfc..bd6806ea5e 100644 --- a/src/with_floating.tsx +++ b/src/with_floating.tsx @@ -5,12 +5,19 @@ import { flip, autoUpdate, type UseFloatingOptions, - type ReferenceType, type Middleware, type Placement, + type UseFloatingReturn, } from "@floating-ui/react"; import React, { useRef } from "react"; +export interface FloatingProps { + hidePopper?: boolean; + popperProps: UseFloatingReturn & { + arrowRef: React.RefObject; + }; +} + export interface WithFloatingProps { popperModifiers?: Middleware[]; popperProps?: Omit; @@ -34,37 +41,34 @@ export interface WithFloatingProps { * * @returns A new component with floating behavior. */ -export default function withFloating< - T extends object, - RT extends ReferenceType = ReferenceType, ->(Component: React.ComponentType) { - const WithFloating: React.FC = ( - props, - ): JSX.Element => { - const alt_props = { - ...props, - popperModifiers: props.popperModifiers ?? [], - popperProps: props.popperProps ?? {}, - hidePopper: - typeof props.hidePopper === "boolean" ? props.hidePopper : true, - }; +export default function withFloating( + Component: React.ComponentType, +) { + type R = Omit & WithFloatingProps; + const WithFloating: React.FC = (props): JSX.Element => { + const hidePopper: boolean = + typeof props.hidePopper === "boolean" ? props.hidePopper : true; const arrowRef: React.RefObject = useRef(null); - const floatingProps = useFloating({ - open: !alt_props.hidePopper, + const floatingProps = useFloating({ + open: !hidePopper, whileElementsMounted: autoUpdate, - placement: alt_props.popperPlacement, + placement: props.popperPlacement, middleware: [ flip({ padding: 15 }), offset(10), arrow({ element: arrowRef }), - ...alt_props.popperModifiers, + ...(props.popperModifiers ?? []), ], - ...alt_props.popperProps, + ...props.popperProps, }); - return ( - - ); + const componentProps = { + ...props, + hidePopper, + popperProps: { ...floatingProps, arrowRef }, + } as unknown as T; + + return ; }; return WithFloating; diff --git a/test/week_picker_test.test.js b/test/week_picker_test.test.tsx similarity index 61% rename from test/week_picker_test.test.js rename to test/week_picker_test.test.tsx index a4aed861d1..8051d4fbb8 100644 --- a/test/week_picker_test.test.js +++ b/test/week_picker_test.test.tsx @@ -1,6 +1,7 @@ +import { render, fireEvent } from "@testing-library/react"; import React from "react"; + import DatePicker from "../src/index"; -import { render, fireEvent } from "@testing-library/react"; describe("WeekPicker", () => { it("should change the week when clicked on any option in the picker", () => { @@ -9,8 +10,10 @@ describe("WeekPicker", () => { , ); expect(onChangeSpy).not.toHaveBeenCalled(); - fireEvent.focus(container.querySelector("input")); - fireEvent.click(container.querySelector(".react-datepicker__day")); + fireEvent.focus(container.querySelector("input") ?? new HTMLElement()); + fireEvent.click( + container.querySelector(".react-datepicker__day") ?? new HTMLElement(), + ); expect(onChangeSpy).toHaveBeenCalled(); }); @@ -20,8 +23,14 @@ describe("WeekPicker", () => { , ); expect(onChangeSpy).not.toHaveBeenCalled(); - fireEvent.focus(container.querySelector("input")); - fireEvent.click(container.querySelector(".react-datepicker__week-number")); + const input = container.querySelector("input"); + expect(input).not.toBeNull(); + fireEvent.focus(input ?? new HTMLElement()); + const weekNumber = container.querySelector( + ".react-datepicker__week-number", + ); + expect(weekNumber).not.toBeNull(); + fireEvent.click(weekNumber ?? new HTMLElement()); expect(onChangeSpy).toHaveBeenCalled(); }); });