Merge pull request #3553 from plotly/feature/datepicker-portals

Feature: redesigned datepicker portals

Author: KoolADE85

components/dash-core-components/src/components/css/datepickers.css

@@ -146,6 +146,74 @@
     overscroll-behavior: contain;
 }
 
+.dash-datepicker
+    [data-radix-popper-content-wrapper]:has(.dash-datepicker-portal) {
+    transform: none !important;
+}
+
+.dash-datepicker-portal {
+    position: fixed;
+    inset: 0;
+    width: 100vw;
+    height: 100vh;
+    max-width: 100vw;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--Dash-Shading-Strong);
+    border: none;
+    box-shadow: none;
+    overflow: visible;
+    padding: 0;
+    pointer-events: none;
+}
+
+.dash-datepicker-portal .dash-datepicker-calendar-wrapper {
+    background: var(--Dash-Fill-Inverse-Strong);
+    border-radius: var(--Dash-Spacing);
+    border: 1px solid var(--Dash-Stroke-Strong);
+    padding: 16px;
+    box-shadow: 0px 10px 38px -10px var(--Dash-Shading-Strong),
+        0px 10px 20px -15px var(--Dash-Shading-Weak);
+    z-index: 1;
+    pointer-events: auto;
+    width: fit-content;
+    max-width: 95vw;
+}
+
+.dash-datepicker-fullscreen {
+    pointer-events: auto;
+    background: var(--Dash-Fill-Inverse-Strong);
+}
+
+.dash-datepicker-close-button {
+    position: fixed;
+    top: calc(var(--Dash-Spacing) * 2);
+    right: calc(var(--Dash-Spacing) * 2);
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--Dash-Fill-Inverse-Strong);
+    border: none;
+    border-radius: var(--Dash-Spacing);
+    color: var(--Dash-Text-Strong);
+    cursor: pointer;
+    z-index: 501;
+    pointer-events: auto;
+}
+
+.dash-datepicker-close-button:hover {
+    background: var(--Dash-Fill-Weak);
+    color: var(--Dash-Fill-Interactive-Strong);
+}
+
+.dash-datepicker-close-button:focus {
+    outline: 2px solid var(--Dash-Fill-Interactive-Strong);
+    outline-offset: 2px;
+}
+
 .dash-datepicker-calendar-wrapper {
     display: flex;
     flex-direction: column;
@@ -156,6 +224,7 @@
     display: flex;
     align-items: flex-start;
     gap: calc(var(--Dash-Spacing) * 4);
+    flex-wrap: wrap;
 }
 
 .dash-datepicker-controls {

components/dash-core-components/src/fragments/DatePickerRange.tsx

@@ -51,6 +51,8 @@ const DatePickerRange = ({
     end_date_id,
     start_date_placeholder_text = 'Start Date',
     end_date_placeholder_text = 'End Date',
+    with_portal = false,
+    with_full_screen_portal = false,
 }: DatePickerRangeProps) => {
     const [internalStartDate, setInternalStartDate] = useState(
         strAsDate(start_date)
@@ -102,6 +104,7 @@ const DatePickerRange = ({
     const startInputRef = useRef<HTMLInputElement | null>(null);
     const endInputRef = useRef<HTMLInputElement | null>(null);
     const calendarRef = useRef<CalendarHandle>(null);
+    const hasPortal = with_portal || with_full_screen_portal;
 
     useEffect(() => {
         setInternalStartDate(strAsDate(start_date));
@@ -381,9 +384,21 @@ const DatePickerRange = ({
 
                 <Popover.Portal container={containerRef.current}>
                     <Popover.Content
-                        className="dash-datepicker-content"
-                        align="start"
-                        sideOffset={5}
+                        className={`dash-datepicker-content${
+                            hasPortal ? ' dash-datepicker-portal' : ''
+                        }${
+                            with_full_screen_portal
+                                ? ' dash-datepicker-fullscreen'
+                                : ''
+                        }`}
+                        align={hasPortal ? 'center' : 'start'}
+                        sideOffset={hasPortal ? 0 : 5}
+                        avoidCollisions={!hasPortal}
+                        onInteractOutside={
+                            with_full_screen_portal
+                                ? e => e.preventDefault()
+                                : undefined
+                        }
                         onOpenAutoFocus={e => e.preventDefault()}
                         onCloseAutoFocus={e => {
                             e.preventDefault();
@@ -404,6 +419,15 @@ const DatePickerRange = ({
                             }
                         }}
                     >
+                        {with_full_screen_portal && (
+                            <button
+                                className="dash-datepicker-close-button"
+                                onClick={() => setIsCalendarOpen(false)}
+                                aria-label="Close calendar"
+                            >
+                                <Cross1Icon />
+                            </button>
+                        )}
                         <Calendar
                             ref={calendarRef}
                             initialVisibleDate={initialCalendarDate}

components/dash-core-components/src/fragments/DatePickerSingle.tsx

@@ -39,6 +39,8 @@ const DatePickerSingle = ({
     day_size = 34,
     number_of_months_shown = 1,
     calendar_orientation,
+    with_portal = false,
+    with_full_screen_portal = false,
 }: DatePickerSingleProps) => {
     const [internalDate, setInternalDate] = useState(strAsDate(date));
     const direction = is_RTL
@@ -61,6 +63,7 @@ const DatePickerSingle = ({
     const containerRef = useRef<HTMLDivElement>(null);
     const inputRef = useRef<HTMLInputElement | null>(null);
     const calendarRef = useRef<CalendarHandle>(null);
+    const hasPortal = with_portal || with_full_screen_portal;
 
     useEffect(() => {
         setInternalDate(strAsDate(date));
@@ -200,9 +203,21 @@ const DatePickerSingle = ({
 
                 <Popover.Portal container={containerRef.current}>
                     <Popover.Content
-                        className="dash-datepicker-content"
-                        align="start"
-                        sideOffset={5}
+                        className={`dash-datepicker-content${
+                            hasPortal ? ' dash-datepicker-portal' : ''
+                        }${
+                            with_full_screen_portal
+                                ? ' dash-datepicker-fullscreen'
+                                : ''
+                        }`}
+                        align={hasPortal ? 'center' : 'start'}
+                        sideOffset={hasPortal ? 0 : 5}
+                        avoidCollisions={!hasPortal}
+                        onInteractOutside={
+                            with_full_screen_portal
+                                ? e => e.preventDefault()
+                                : undefined
+                        }
                         onOpenAutoFocus={e => e.preventDefault()}
                         onCloseAutoFocus={e => {
                             e.preventDefault();
@@ -212,6 +227,15 @@ const DatePickerSingle = ({
                             }
                         }}
                     >
+                        {with_full_screen_portal && (
+                            <button
+                                className="dash-datepicker-close-button"
+                                onClick={() => setIsCalendarOpen(false)}
+                                aria-label="Close calendar"
+                            >
+                                <Cross1Icon />
+                            </button>
+                        )}
                         <Calendar
                             ref={calendarRef}
                             initialVisibleDate={initialMonth}

components/dash-core-components/src/fragments/Dropdown.tsx

@@ -394,7 +394,6 @@ const Dropdown = (props: DropdownProps) => {
                         }
                     }}
                     className={`dash-dropdown ${className ?? ''}`}
-                    style={style}
                     aria-labelledby={`${accessibleId}-value-count ${accessibleId}-value`}
                     aria-haspopup="listbox"
                     aria-expanded={isOpen}
@@ -540,7 +539,11 @@ const Dropdown = (props: DropdownProps) => {
     );
 
     return (
-        <div ref={positioningContainerRef} className="dash-dropdown-wrapper">
+        <div
+            ref={positioningContainerRef}
+            className="dash-dropdown-wrapper"
+            style={style}
+        >
             {popover}
         </div>
     );