diff --git a/packages/web/src/views/Day/components/Calendar/DayCalendarEventCards.tsx b/packages/web/src/views/Day/components/Calendar/DayCalendarEventCards.tsx index 9e4e9174d..eceea16dd 100644 --- a/packages/web/src/views/Day/components/Calendar/DayCalendarEventCards.tsx +++ b/packages/web/src/views/Day/components/Calendar/DayCalendarEventCards.tsx @@ -109,7 +109,7 @@ export const DayTimedCalendarEvent = ({ visibleDates, }: DayTimedEventCardProps) => { const isRegistered = Boolean(event._id) && !isPending && !isPlaceholder; - const isDeck = Boolean(deckLayout) && !isActiveDraft; + const isDeck = Boolean(deckLayout); const [isFocused, setIsFocused] = useState(false); const registrationRef = useDayEventRegistrationRef({ eventId: event._id, @@ -135,7 +135,7 @@ export const DayTimedCalendarEvent = ({ const highlight = `inset 0 1px 0 rgba(255,255,255,${isFocused ? 0.1 : 0.07})`; return `${ring}, ${drop}, ${highlight}`; })(); - const shouldFloatAboveDeck = isActiveDraft || (isDeck && isFocused); + const shouldFloatAboveDeck = isActiveDraft && !isDeck; const position = getDayTimedEventPosition({ deckLayout, event, diff --git a/packages/web/src/views/Day/components/Calendar/DayCalendarGrid.test.tsx b/packages/web/src/views/Day/components/Calendar/DayCalendarGrid.test.tsx index c4947e1d9..cd7720b37 100644 --- a/packages/web/src/views/Day/components/Calendar/DayCalendarGrid.test.tsx +++ b/packages/web/src/views/Day/components/Calendar/DayCalendarGrid.test.tsx @@ -241,7 +241,7 @@ describe("DayCalendarGrid", () => { ); }); - it("raises a focused Day deck card above its group-mates", () => { + it("keeps a focused Day deck card in its fan-out stack", () => { setDayEvents([ createTimedEvent({ _id: "back", @@ -260,17 +260,18 @@ describe("DayCalendarGrid", () => { renderDayCalendarGrid(); const back = screen.getByRole("button", { name: /back overlap/i }); + const initialBackZIndex = Number(back.style.zIndex); - expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX); + expect(initialBackZIndex).toBeLessThan(ZIndex.MAX); fireEvent.focus(back); - expect(Number(back.style.zIndex)).toBe(ZIndex.MAX); + expect(Number(back.style.zIndex)).toBe(initialBackZIndex); fireEvent.blur(back); - expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX); + expect(Number(back.style.zIndex)).toBe(initialBackZIndex); }); - it("raises a clicked overlapping Day event above its group-mates without widening it", async () => { + it("keeps a clicked overlapping Day event in its fan-out stack without widening it", async () => { setDayEvents([ createTimedEvent({ _id: "back", @@ -291,10 +292,11 @@ describe("DayCalendarGrid", () => { const back = screen.getByRole("button", { name: /back overlap/i }); const front = screen.getByRole("button", { name: /front overlap/i }); const initialBackWidth = parseFloat(back.style.width); + const initialBackZIndex = Number(back.style.zIndex); const frontWidth = parseFloat(front.style.width); expect(initialBackWidth).toBe(frontWidth); - expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX); + expect(initialBackZIndex).toBeLessThan(ZIndex.MAX); fireEvent.pointerDown(back, { button: 0, @@ -312,7 +314,7 @@ describe("DayCalendarGrid", () => { await waitFor(() => { expect(getDraft()?._id).toBe("back"); - expect(Number(back.style.zIndex)).toBe(ZIndex.MAX); + expect(Number(back.style.zIndex)).toBe(initialBackZIndex); expect(parseFloat(back.style.width)).toBe(frontWidth); }); }); diff --git a/packages/web/src/views/Week/components/Draft/grid/GridDraft.test.tsx b/packages/web/src/views/Week/components/Draft/grid/GridDraft.test.tsx index 01285ccc6..08fde10fb 100644 --- a/packages/web/src/views/Week/components/Draft/grid/GridDraft.test.tsx +++ b/packages/web/src/views/Week/components/Draft/grid/GridDraft.test.tsx @@ -4,7 +4,6 @@ import { type PropsWithChildren, type Ref, useState } from "react"; import { Origin, Priorities } from "@core/constants/core.constants"; import dayjs from "@core/util/date/dayjs"; import { CALENDAR_DECK_MIN_WIDTH } from "@web/common/calendar-grid/calendarGrid.constants"; -import { ZIndex } from "@web/common/constants/web.constants"; import { type Schema_GridEvent } from "@web/common/types/web.event.types"; import { gridEventDefaultPosition } from "@web/common/utils/event/event.util"; import { DraftContext } from "@web/views/Week/components/Draft/context/DraftContext"; @@ -239,9 +238,11 @@ describe("GridDraft keyboard focus", () => { }); }); - it("keeps an active overlapping saved draft at its stacked width while raising it", () => { + it("keeps an active overlapping saved draft at its stacked width and stack order", () => { + const deckLayout = { groupSize: 2, order: 0 }; + renderGridDraft({ - deckLayout: { groupSize: 2, order: 0 }, + deckLayout, }); const draftBlock = screen.getByRole("button", { @@ -249,7 +250,7 @@ describe("GridDraft keyboard focus", () => { }); expect(draftBlock.style.width).toBe(`${CALENDAR_DECK_MIN_WIDTH}px`); - expect(Number(draftBlock.style.zIndex)).toBe(ZIndex.MAX); + expect(Number(draftBlock.style.zIndex)).toBe(deckLayout.order + 1); }); it("submits the draft from title Enter without focusing the draft block", async () => { diff --git a/packages/web/src/views/Week/components/Event/Grid/GridEvent/GridEvent.tsx b/packages/web/src/views/Week/components/Event/Grid/GridEvent/GridEvent.tsx index 2f44d00a6..c0644448d 100644 --- a/packages/web/src/views/Week/components/Event/Grid/GridEvent/GridEvent.tsx +++ b/packages/web/src/views/Week/components/Event/Grid/GridEvent/GridEvent.tsx @@ -69,7 +69,7 @@ const GridEventBase = ( const isPlaceholder = displayMode === "placeholder"; const isResizing = motionMode === "resizing"; const event = _event; - const isDeck = Boolean(deckLayout) && !isDraft; + const isDeck = Boolean(deckLayout); const [isFocused, setIsFocused] = useState(false); const shouldAcknowledgeCommit = useSomedayCommitAcknowledgement(event._id) && @@ -104,8 +104,7 @@ const GridEventBase = ( ? basePosition : applyCalendarTimedEventDisplayPosition(basePosition, deckLayout); - const shouldFloatAboveDeck = - isDraft || isDragging || isResizing || (isDeck && isFocused); + const shouldFloatAboveDeck = isDragging || isResizing || (isDraft && !isDeck); const zIndex = shouldFloatAboveDeck ? ZIndex.MAX : (position.zIndex ?? ZIndex.LAYER_1); diff --git a/packages/web/src/views/Week/components/Grid/MainGrid/MainGrid.test.tsx b/packages/web/src/views/Week/components/Grid/MainGrid/MainGrid.test.tsx index 17bb451a0..3b5a4d07f 100644 --- a/packages/web/src/views/Week/components/Grid/MainGrid/MainGrid.test.tsx +++ b/packages/web/src/views/Week/components/Grid/MainGrid/MainGrid.test.tsx @@ -637,7 +637,7 @@ describe("saved Week event ownership", () => { expect(Number(solo.style.zIndex)).toBe(ZIndex.LAYER_1); }); - it("raises a focused deck card above its group-mates", () => { + it("keeps a focused deck card in its fan-out stack", () => { const store = createStore([ createSavedEvent({ _id: "back", @@ -665,13 +665,14 @@ describe("saved Week event ownership", () => { ); const back = screen.getByRole("button", { name: /back overlap/i }); - expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX); + const initialBackZIndex = Number(back.style.zIndex); + expect(initialBackZIndex).toBeLessThan(ZIndex.MAX); fireEvent.focus(back); - expect(Number(back.style.zIndex)).toBe(ZIndex.MAX); + expect(Number(back.style.zIndex)).toBe(initialBackZIndex); fireEvent.blur(back); - expect(Number(back.style.zIndex)).toBeLessThan(ZIndex.MAX); + expect(Number(back.style.zIndex)).toBe(initialBackZIndex); }); it("keeps saved timed mouse and resize events out of the draft motion owner", () => {