[scheduler] Add content slots for the Event Timeline event block and resource title cell - #23557
Open
rita-codes wants to merge 14 commits into
Open
rita-codes wants to merge 14 commits into
rita-codes wants to merge 14 commits into
Conversation
…resource title cell Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EBYMarDHeuysLnbKifmMaP
rita-codes
added
type: enhancement
Deploy previewBundle size
Check out the code infra dashboard for more information about this PR. |
… slots Keys and clicks on links, buttons and inputs rendered by the `timelineEventContent` and `timelineResourceTitle` slots are left to that content: the row keyboard navigation, the collapse toggle and the click-to-edit trigger ignore them, and Tab reaches the focusable content of an event before moving to the next one. The event slot receives the row `resource` and the block `variant` instead of `resourceId`, both slots get the processed resource type, and the demos, docs and tests follow. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jb1k7h8uiiEjJnsob4GQW3
The context is typed with the shared `SchedulerSlots` and each surface reads it through a generic `useSchedulerSlots`, like `useChartsSlots`, so adding the calendar slots does not touch the provider. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jb1k7h8uiiEjJnsob4GQW3
…-slots' into 23552-scheduler-timeline-content-slots
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jb1k7h8uiiEjJnsob4GQW3
`EventTimelineSlots`, `EventTimelineSlotProps` and the slot props interfaces are exported from `@mui/x-scheduler-premium/models`, next to the component they describe. The community package keeps the shared `SchedulerSlots`. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jb1k7h8uiiEjJnsob4GQW3
…m suffix `EventTimelinePremiumSlots`, `EventTimelinePremiumSlotProps` and `EventTimelinePremiumSlotsAndSlotProps`, following the other types of the premium package. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jb1k7h8uiiEjJnsob4GQW3
`isEventFromNestedInteractiveElement` and `getTabbableDescendants` live in `@mui/x-internals/domUtils`, and the first one resolves the target through `getTarget` so it works inside a shadow root. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jb1k7h8uiiEjJnsob4GQW3
Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Jb1k7h8uiiEjJnsob4GQW3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #23552. Split out of #23468, which keeps the discussion about the Base UI
renderprop on the event root.The slots
Two new slots on
EventTimelinePremium, following theeventDialogGeneralTabpattern from #23338:timelineEventContentreplaces the text inside an event block. Props:occurrence,resource(the row's resource) andvariant("placeholder"while the block previews a drag, a resize or a creation). The block keeps its geometry, handles and button semantics, and the slot renders in both the regular and the placeholder branch.timelineResourceTitlereplaces the text inside a resource title cell. Props:resource. The legend color and the collapse toggle stay.resourceis the processed resource, typedOmit<SchedulerResource, 'children'>, because the store stripschildrenfrom its lookup.Types
EventTimelinePremiumSlots/EventTimelinePremiumSlotPropsextend the sharedSchedulerSlots/SchedulerSlotProps, and onlyEventTimelinePremiumPropsuses them. They live in@mui/x-scheduler-premium/models, likeGridPremiumSlotsComponentin the Data Grid.TimelineEventContentPropsOverridesandTimelineResourceTitlePropsOverridesare augmented from@mui/x-scheduler-premium/modelsto typeslotProps.TimelineEventContentPropsandTimelineResourceTitlePropsare exported to type custom slot components.SchedulerSlotstype and each surface reads it with a genericuseSchedulerSlots<TSlots, TSlotProps>(), likeuseChartsSlots. Adding the Event Calendar slots later does not touch the provider.EventTimelinePremiumSlotsfor the timeline andSchedulerSlotsfor the other components, so each API page lists only its own slots.Interactive content in the slots
Links, buttons and inputs rendered by a slot keep their own clicks and keys:
The guard is
isEventFromNestedInteractiveElementin@mui/x-internals/domUtils, next togetTarget. Pickers and Chat have their own copies and can migrate to it later.Docs
A section with a demo on the events page and on the resources page. Both mention that the slot content is part of the accessible name of the events (the title demo uses
describeChildon its tooltip for that reason), and the events page mentions that the slot also renders in the placeholder.Notes for reviewers
occurrence.titlein three different layouts, so a sharedeventContentslot would not fit them. Calendar slots can be added next to these later without a rename.EventDragPreviewis shared with the calendar views, so it is left for a follow-up.simulateDragAndDropgains aholdoption that stops after thedragover, so a test can assert on the placeholder. The test awaits one animation frame, which is when pragmatic-drag-and-drop deliversonDrag, and ends the drag in afinally.