[major] DateInput refactored to use the popover component

packages/lib/src/date-input/DateInput.test.tsx

@@ -464,8 +464,6 @@ describe("DateInput component tests", () => {
     expect(calendarAction.getAttribute("aria-describedby")).toBeFalsy();
     expect(calendarAction.getAttribute("aria-expanded")).toBe("false");
     userEvent.click(calendarAction);
-    const datePicker = getByRole("dialog");
-    expect(datePicker.getAttribute("aria-modal")).toBe("true");
     expect(calendarAction.getAttribute("aria-expanded")).toBe("true");
     const ariaDescribedBy = calendarAction.getAttribute("aria-describedby") ?? "";
     expect(document.getElementById(ariaDescribedBy)).toBeTruthy();

packages/lib/src/date-input/DateInput.tsx

@@ -1,18 +1,6 @@
-import {
-  useState,
-  useRef,
-  useEffect,
-  useId,
-  useCallback,
-  useContext,
-  forwardRef,
-  FocusEvent,
-  KeyboardEvent,
-  useMemo,
-} from "react";
+import { useState, useRef, useEffect, useId, useCallback, useContext, forwardRef, useMemo } from "react";
 import dayjs, { Dayjs } from "dayjs";
 import styled from "@emotion/styled";
-import * as Popover from "@radix-ui/react-popover";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { HalstackLanguageContext } from "../HalstackContext";
 import DateInputPropsType, { RefType } from "./types";
@@ -21,6 +9,7 @@ import { getMargin } from "../common/utils";
 import { spaces } from "../common/variables";
 import DxcTextInput from "../text-input/TextInput";
 import { getDate, getFormatFromLocale, getValueForPicker } from "./utils";
+import DxcPopover from "../popover/Popover";
 
 dayjs.extend(customParseFormat);
 
@@ -80,8 +69,7 @@ const HelperText = styled.span<{ disabled: DateInputPropsType["disabled"] }>`
   margin-bottom: var(--spacing-gap-xs);
 `;
 
-const StyledPopoverContent = styled(Popover.Content)`
-  z-index: var(--z-date-input);
+const StyledPopoverContent = styled.div`
   &:focus-visible {
     outline: none;
   }
@@ -130,7 +118,6 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
         : null
     );
     const [sideOffset, setSideOffset] = useState(SIDEOFFSET);
-    const [portalContainer, setPortalContainer] = useState<HTMLElement | null>(null);
 
     const translatedLabels = languageContext.labels;
     const dateRef = useRef<HTMLDivElement | null>(null);
@@ -225,25 +212,6 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
       setIsOpen(false);
     };
 
-    const handleDatePickerEscKeydown = (event: KeyboardEvent<HTMLDivElement>) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        if (isOpen) {
-          event.stopPropagation();
-        }
-        closeCalendar();
-        dateRef.current?.getElementsByTagName("input")[0]?.focus();
-      }
-    };
-    const handleDatePickerOnBlur = (event: FocusEvent<HTMLDivElement>) => {
-      if (!event.currentTarget.contains(event.relatedTarget)) {
-        closeCalendar();
-      }
-    };
-    useEffect(() => {
-      setPortalContainer(document?.getElementById(`${calendarId}-portal`));
-    }, []);
-
     useEffect(() => {
       window.addEventListener("scroll", adjustSideOffset);
       return () => {
@@ -286,55 +254,43 @@ const DxcDateInput = forwardRef<RefType, DateInputPropsType>(
             </Label>
           )}
           {helperText && <HelperText disabled={disabled}>{helperText}</HelperText>}
-          <Popover.Root open={isOpen}>
-            <Popover.Trigger asChild aria-controls={undefined}>
-              <DxcTextInput
-                name={name}
-                defaultValue={defaultValue}
-                value={value ?? innerValue}
-                placeholder={placeholder ? formatter.toUpperCase() : undefined}
-                action={{
-                  onClick: openCalendar,
-                  icon: "filled_calendar_today",
-                  title: !disabled ? translatedLabels.dateInput.datePickerActionTitle : undefined,
-                }}
-                clearable={clearable}
-                disabled={disabled}
-                readOnly={readOnly}
-                optional={optional}
-                onChange={handleOnChange}
-                onBlur={handleOnBlur}
-                error={error}
-                autocomplete={autocomplete}
-                size={size}
-                tabIndex={tabIndex}
-                ref={dateRef}
-                ariaLabel={ariaLabel}
-              />
-            </Popover.Trigger>
-            {portalContainer && (
-              <Popover.Portal container={portalContainer}>
-                <StyledPopoverContent
-                  sideOffset={sideOffset}
-                  align="end"
-                  aria-modal
-                  onBlur={handleDatePickerOnBlur}
-                  onKeyDown={handleDatePickerEscKeydown}
-                  ref={popoverContentRef}
-                >
-                  <DatePicker
-                    id={calendarId}
-                    onDateSelect={handleCalendarOnClick}
-                    date={dayjsDate}
-                    format={formatter}
-                  />
-                </StyledPopoverContent>
-              </Popover.Portal>
-            )}
-          </Popover.Root>
+          <DxcPopover
+            asChild
+            isOpen={isOpen}
+            onClose={closeCalendar}
+            offset={sideOffset}
+            align="end"
+            popoverContent={
+              <StyledPopoverContent ref={popoverContentRef}>
+                <DatePicker id={calendarId} onDateSelect={handleCalendarOnClick} date={dayjsDate} format={formatter} />
+              </StyledPopoverContent>
+            }
+          >
+            <DxcTextInput
+              name={name}
+              defaultValue={defaultValue}
+              value={value ?? innerValue}
+              placeholder={placeholder ? formatter.toUpperCase() : undefined}
+              action={{
+                onClick: openCalendar,
+                icon: "filled_calendar_today",
+                title: !disabled ? translatedLabels.dateInput.datePickerActionTitle : undefined,
+              }}
+              clearable={clearable}
+              disabled={disabled}
+              readOnly={readOnly}
+              optional={optional}
+              onChange={handleOnChange}
+              onBlur={handleOnBlur}
+              error={error}
+              autocomplete={autocomplete}
+              size={size}
+              tabIndex={tabIndex}
+              ref={dateRef}
+              ariaLabel={ariaLabel}
+            />
+          </DxcPopover>
         </DateInputContainer>
-
-        <div id={`${calendarId}-portal`} style={{ position: "absolute" }} />
       </>
     );
   }

packages/lib/src/date-input/DatePicker.tsx

@@ -10,11 +10,6 @@ import { YearMonthPicker } from "./YearMonthPicker";
 import { calculateIsYearFirst } from "./utils";
 
 const DatePickerContainer = styled.div`
-  padding: var(--spacing-padding-m) var(--spacing-padding-xs) var(--spacing-padding-xs) var(--spacing-padding-xs);
-  background-color: var(--color-bg-neutral-lightest);
-  box-shadow: var(--shadow-200);
-  border: var(--border-width-s) var(--border-style-default) var(--border-color-neutral-medium);
-  border-radius: var(--border-radius-s);
   width: fit-content;
   font-family: var(--typography-font-family);
   font-size: var(--typography-label-m);

packages/lib/src/date-input/DateUnitPicker.tsx

@@ -14,7 +14,6 @@ const PickerContainer = styled.div`
   width: 50%;
   max-width: 292px;
   height: 312px;
-  box-shadow: var(--shadow-200);
   ${scrollbarStyles}
 `;
 

packages/lib/src/dialog/Dialog.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from "@testing-library/react";
+import { fireEvent, render, waitFor } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import DxcButton from "../button/Button";
 import DxcCard from "../card/Card";
@@ -280,14 +280,14 @@ describe("Dialog component: Focus lock tests", () => {
     fireEvent.keyDown(dialog, { key: "Tab", shiftKey: true });
     expect(document.activeElement).not.toEqual(inputs[0]);
   });
-  test("Focus travels correctly in a complex tab sequence", () => {
+  test("Focus travels correctly in a complex tab sequence", async () => {
     const onClick = jest.fn();
     const { getAllByRole, queryByRole, getByRole } = render(
       <DxcDialog onCloseClick={onClick}>
         <DxcSelect label="Accept" options={options} />
         <DxcDateInput label="Older age" />
         <DxcTooltip label="Text input tooltip label">
-          <DxcTextInput label="Name" />
+          <DxcTextInput label="Name" name="Name" />
         </DxcTooltip>
         <DxcAlert
           semantic="error"
@@ -302,20 +302,15 @@ describe("Dialog component: Focus lock tests", () => {
     );
     const select = getAllByRole("combobox")[0];
     expect(document.activeElement).toEqual(select);
-    if (select != null) {
-      fireEvent.keyDown(select, { key: "ArrowDown", code: "ArrowDown", keyCode: 40, charCode: 40 });
-    }
+    userEvent.keyboard("{ArrowDown}");
     expect(queryByRole("listbox")).toBeTruthy();
     userEvent.tab();
     userEvent.tab();
-    userEvent.keyboard("{Enter}");
-    expect(getAllByRole("dialog")[1]).toBeTruthy();
-    userEvent.keyboard("{Escape}");
     userEvent.tab();
+    await waitFor(() => expect(document.activeElement).toEqual(getByRole("textbox", { name: "Name" })));
     userEvent.tab();
     userEvent.tab();
-    expect(document.activeElement).toEqual(getByRole("button", { name: "Close alert" }));
-    userEvent.tab();
+    expect(document.activeElement).toEqual(getByRole("button", { name: "Cancel" }));
     userEvent.tab();
     expect(document.activeElement).toEqual(getByRole("button", { name: "Save" }));
     userEvent.tab();