Skip to content

[calendar] Preserve keyboard focus through viewport remounts #4462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
atomiks wants to merge 11 commits into from
Closed

[calendar] Preserve keyboard focus through viewport remounts #4462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
f3ab07f
[calendar] Fix motion demo keyboard focus
atomiks Mar 27, 2026
8ee3861
[calendar] Simplify motion demo animation
atomiks Mar 27, 2026
586c41c
[calendar] Restore parent month animation
atomiks Mar 27, 2026
962768f
[calendar] Preserve keyboard focus through viewport remounts
atomiks Mar 27, 2026
e0797ab
[calendar] Remove motion demo workaround
atomiks Mar 27, 2026
c568e56
[calendar] Fix remaining viewport focus regressions
atomiks Mar 27, 2026
23fb375
[calendar] Preserve focus through animated viewport remounts
atomiks Mar 27, 2026
07fdd85
[calendar] Preserve animated viewport keyboard navigation
atomiks Mar 27, 2026
49b92c9
[calendar] Simplify animated viewport focus fix
atomiks Mar 28, 2026
54c9615
[calendar] Fix React 18 focus regressions
atomiks Mar 28, 2026
cce7159
[calendar] Simplify viewport focus handoff
atomiks Mar 28, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions docs/src/app/(docs)/react/components/calendar/demos/animation-motion/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,18 @@
import * as React from 'react';
import { format } from 'date-fns/format';
import { Calendar } from '@base-ui/react/calendar';
import { motion, AnimatePresence } from 'motion/react';
import { AnimatePresence, motion } from 'motion/react';
import styles from '../../calendar.module.css';

export default function AnimatedCalendarWithMotion() {
interface AnimatedCalendarWithMotionProps {
defaultVisibleDate?: Date;
}

export default function AnimatedCalendarWithMotion({
defaultVisibleDate,
}: AnimatedCalendarWithMotionProps) {
return (
<Calendar.Root className={styles.Root}>
<Calendar.Root className={styles.Root} defaultVisibleDate={defaultVisibleDate}>
{({ visibleDate }) => (
<React.Fragment>
<header className={styles.Header}>
Expand Down
41 changes: 31 additions & 10 deletions docs/src/app/(docs)/react/components/calendar/demos/animation/css-modules/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
.Root {
/* Clip overflow to prevent content spilling out when transitioning. */
overflow: clip;
--duration: 0.2s;
--easing: cubic-bezier(0.22, 1, 0.36, 1);
--duration: 0.65s;
--exit-fade-duration: 0.45s;
--easing: cubic-bezier(0.16, 1, 0.3, 1);
}

.HeaderLabelWrapper {
Expand Down Expand Up @@ -36,15 +37,20 @@
transform: translateY(0);
}
&[data-ending-style] {
@media (prefers-reduced-motion: no-preference) {
transition:
opacity var(--exit-fade-duration) var(--easing),
transform var(--duration) var(--easing);
}
opacity: 0;
transform: translateY(-20px);
transform: translateY(-12px);
}
}

&[data-navigation-direction='next'][data-current] {
&[data-starting-style] {
opacity: 0;
transform: translateY(20px);
transform: translateY(12px);
}
&[data-ending-style] {
opacity: 1;
Expand All @@ -58,15 +64,20 @@
transform: translateY(0);
}
&[data-ending-style] {
@media (prefers-reduced-motion: no-preference) {
transition:
opacity var(--exit-fade-duration) var(--easing),
transform var(--duration) var(--easing);
}
opacity: 0;
transform: translateY(20px);
transform: translateY(12px);
}
}

&[data-navigation-direction='previous'][data-current] {
&[data-starting-style] {
opacity: 0;
transform: translateY(-20px);
transform: translateY(-12px);
}
&[data-ending-style] {
opacity: 1;
Expand Down Expand Up @@ -106,14 +117,19 @@
opacity: 1;
}
&[data-ending-style] {
transform: translateX(-100%);
@media (prefers-reduced-motion: no-preference) {
transition:
opacity var(--exit-fade-duration) var(--easing),
transform var(--duration) var(--easing);
}
transform: translateX(-78%);
opacity: 0;
}
}

&[data-navigation-direction='next'][data-current] {
&[data-starting-style] {
transform: translateX(100%);
transform: translateX(78%);
opacity: 0;
}
&[data-ending-style] {
Expand All @@ -128,14 +144,19 @@
opacity: 1;
}
&[data-ending-style] {
transform: translateX(100%);
@media (prefers-reduced-motion: no-preference) {
transition:
opacity var(--exit-fade-duration) var(--easing),
transform var(--duration) var(--easing);
}
transform: translateX(78%);
opacity: 0;
}
}

&[data-navigation-direction='previous'][data-current] {
&[data-starting-style] {
transform: translateX(-100%);
transform: translateX(-78%);
opacity: 0;
}
&[data-ending-style] {
Expand Down
11 changes: 9 additions & 2 deletions docs/src/app/(docs)/react/components/calendar/demos/animation/css-modules/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,16 @@ import { Calendar } from '@base-ui/react/calendar';
import styles from '../../calendar.module.css';
import indexStyles from './index.module.css';

export default function AnimatedCalendar() {
interface AnimatedCalendarProps {
defaultVisibleDate?: Date;
}

export default function AnimatedCalendar({ defaultVisibleDate }: AnimatedCalendarProps) {
return (
<Calendar.Root className={clsx(styles.Root, indexStyles.Root)}>
<Calendar.Root
className={clsx(styles.Root, indexStyles.Root)}
defaultVisibleDate={defaultVisibleDate}
>
{({ visibleDate }) => (
<React.Fragment>
<header className={styles.Header}>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/(docs)/react/components/calendar/page.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ import { DemoCalendarAnimation } from './demos/animation';

#### Animating with `motion/react`

You can use external animation libraries like [Framer Motion](https://www.framer.com/motion/) to animate month transitions.
You can compose external animation libraries like [Motion](https://motion.dev/) with calendar parts and animate the month grid with Motion props.

import { DemoCalendarAnimationMotion } from './demos/animation-motion';

Expand Down
13 changes: 12 additions & 1 deletion docs/src/app/(docs)/react/components/calendar/types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -491,7 +491,18 @@ type CalendarContext = {
nativeEvent?: Event,
trigger?: HTMLElement,
reason?: CalendarChangeEventReason,
) => void;
) => (
| { reason: 'month-change'; event: Event }
| { reason: 'value-prop-change'; event: Event }
| { reason: 'day-press'; event: Event }
| { reason: 'keyboard'; event: KeyboardEvent }
) & {
cancel: () => void;
allowPropagation: () => void;
isCanceled: boolean;
isPropagationAllowed: boolean;
trigger: Element | undefined;
};
};
```

Expand Down
Loading
Loading