From 611cfae0d1d31c079f7f1454fa28b5c171ebdb40 Mon Sep 17 00:00:00 2001 From: jialecl Date: Fri, 21 Aug 2026 13:01:04 +0200 Subject: [PATCH 1/3] DateInput popover changed to DxcPopover --- packages/lib/src/date-input/DateInput.tsx | 122 ++++++------------ packages/lib/src/date-input/DatePicker.tsx | 6 +- .../lib/src/date-input/DateUnitPicker.tsx | 1 - 3 files changed, 40 insertions(+), 89 deletions(-) diff --git a/packages/lib/src/date-input/DateInput.tsx b/packages/lib/src/date-input/DateInput.tsx index 9a031ebec..cf588d9f9 100644 --- a/packages/lib/src/date-input/DateInput.tsx +++ b/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( : null ); const [sideOffset, setSideOffset] = useState(SIDEOFFSET); - const [portalContainer, setPortalContainer] = useState(null); const translatedLabels = languageContext.labels; const dateRef = useRef(null); @@ -225,25 +212,6 @@ const DxcDateInput = forwardRef( setIsOpen(false); }; - const handleDatePickerEscKeydown = (event: KeyboardEvent) => { - if (event.key === "Escape") { - event.preventDefault(); - if (isOpen) { - event.stopPropagation(); - } - closeCalendar(); - dateRef.current?.getElementsByTagName("input")[0]?.focus(); - } - }; - const handleDatePickerOnBlur = (event: FocusEvent) => { - 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( )} {helperText && {helperText}} - - - - - {portalContainer && ( - - - - - - )} - + + + + } + > + + - -
); } diff --git a/packages/lib/src/date-input/DatePicker.tsx b/packages/lib/src/date-input/DatePicker.tsx index b6eaf29b3..5424357b7 100644 --- a/packages/lib/src/date-input/DatePicker.tsx +++ b/packages/lib/src/date-input/DatePicker.tsx @@ -10,11 +10,7 @@ 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); + /* padding: var(--spacing-padding-m) var(--spacing-padding-xs) var(--spacing-padding-xs) var(--spacing-padding-xs); */ width: fit-content; font-family: var(--typography-font-family); font-size: var(--typography-label-m); diff --git a/packages/lib/src/date-input/DateUnitPicker.tsx b/packages/lib/src/date-input/DateUnitPicker.tsx index f8247d68e..8c79ca7c8 100644 --- a/packages/lib/src/date-input/DateUnitPicker.tsx +++ b/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} `; From 52343374a353a37c32cd4eb2806d35275d672de1 Mon Sep 17 00:00:00 2001 From: jialecl Date: Mon, 24 Aug 2026 08:23:01 +0200 Subject: [PATCH 2/3] Tests updated --- packages/lib/src/date-input/DateInput.test.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/lib/src/date-input/DateInput.test.tsx b/packages/lib/src/date-input/DateInput.test.tsx index 9dd3a17fe..45daca01f 100644 --- a/packages/lib/src/date-input/DateInput.test.tsx +++ b/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(); From 3a2007a5805e3baf270c88ee802bc54757302f78 Mon Sep 17 00:00:00 2001 From: jialecl Date: Mon, 24 Aug 2026 12:56:30 +0200 Subject: [PATCH 3/3] Tests updated --- packages/lib/src/date-input/DatePicker.tsx | 1 - packages/lib/src/dialog/Dialog.test.tsx | 17 ++++++----------- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/lib/src/date-input/DatePicker.tsx b/packages/lib/src/date-input/DatePicker.tsx index 5424357b7..49b597c83 100644 --- a/packages/lib/src/date-input/DatePicker.tsx +++ b/packages/lib/src/date-input/DatePicker.tsx @@ -10,7 +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); */ width: fit-content; font-family: var(--typography-font-family); font-size: var(--typography-label-m); diff --git a/packages/lib/src/dialog/Dialog.test.tsx b/packages/lib/src/dialog/Dialog.test.tsx index 36c6f770f..0dfb24831 100644 --- a/packages/lib/src/dialog/Dialog.test.tsx +++ b/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( - + { ); 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();