feat(createStack): add overlay z-index management composable#129
Merged
johnleider merged 4 commits intomasterfrom Feb 2, 2026
Merged
feat(createStack): add overlay z-index management composable#129johnleider merged 4 commits intomasterfrom
johnleider merged 4 commits intomasterfrom
Conversation
|
commit: |
Add createStack composable for managing overlay z-index stacking: - Global reactive registry of active overlays - Automatic z-index calculation (baseZIndex + increment per overlay) - globalTop/localTop tracking for keyboard event handling - Parent/child tracking via injection for nested overlays - SSR-safe with per-app isolation via createStackPlugin - Stack context with dismiss(), scrimZIndex, and isBlocking support Integrate stack with Dialog component: - DialogContent now registers with stack for z-index coordination - Added blocking and disableGlobalStack props - Exposes globalTop and zIndex in slot props Add Scrim component: - Uses stack context for automatic z-index positioning - Supports teleport and transitions - Handles blocking state (non-dismissable dialogs)
2dc6587 to
735d752
Compare
- Add readonly() wrapping to createStackContext return values - Remove unused StackPluginOptions (baseZIndex, increment) - Add accessibility attrs to example (role, aria-modal, aria-labelledby) - Add Escape key handling to example using useHotkey - Add plugin setup comment to StackProvider - Add comprehensive tests for plugin, nesting, SSR, dismiss(id)
- Refactor Scrim from Scrim.Root to direct Scrim export
- Change useStack signature: onDismiss as 2nd arg, options as 3rd
- Add inheritAttrs: false to fix attribute forwarding warning
- Add Scrim and stack composables to API hover whitelist
- Update Dialog, docs, and examples for new patterns
BREAKING: useStack(isActive, { onDismiss }) -> useStack(isActive, onDismiss, options?)
- Rapid toggle cycles with correct final globalTop state - Middle overlay closes (z-index preservation) - Overlay reopen gets new z-index - Dismiss with non-existent ID (no-op) - Multiple blocking overlays - onDismiss that opens another overlay - Concurrent activation in same tick - Parent unmount while children active - Scope disposal during active state - Many overlays ordering - Dismiss called multiple times rapidly
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
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.
Summary
createStackcomposable for managing overlay z-index stacking with automatic calculation and scrim integrationScrimcomponent for shared overlay backdrops using the stack contextuseStackintoDialogContentfor proper z-index coordination when multiple dialogs are openFeatures
createStack Composable
createRegistrybaseZIndex+incrementper overlay)globalTop/localToptracking for keyboard event handling (e.g., Escape key)createStackPlugindismiss(),scrimZIndex, andisBlockingsupportScrim Component
Dialog Integration
DialogContentnow registers with stack for z-index coordinationblockinganddisableGlobalStackpropsglobalTopandzIndexin slot propsAPI
Test plan