improvements#19
Merged
Merged
Conversation
Owner
gfazioli
commented
Mar 24, 2026
gfazioli
commented
- 🔧 refactor window state handling and add accessibility labels
- refactor(Window): 🔧 Use refs for drag/resize handlers to keep global listeners stable
- 🔧 refactor: streamline window state persistence logic
- ⚡ perf: debounce window state persistence
- test(Window): 🧪 add comprehensive tests for Window component
- refactor(Window): use flat defaultX/Y/Width/Height API with responsive values
- 🚀 feat(docs): add controlled position demo & responsive radius/shadow
- 🛠️ refactor: separate z-index handling for portal and container windows
- feat(Window.Group): add group container with layout presets and tools button
- feat(layout): ✨ Add layout icons and tools button to Window
- 🚀 feat(demo): add withToolsButton configurator option
- refactor(layout icons): update icons to 16:9 viewBox and improve sizing
- style(Window): 🎨 Improve spacing and alignment in Window menu actions
- 🚀 feat(WindowGroup): add default layout, group ref, and collapsable windows support
- 🎉 feat(Window): allow Group to hide tools button via showToolsButton
- Update docs to reflect default persistState value - Remove unused .pre CSS class - Add role="dialog" and aria-label to Window component - Add aria-labels to close and collapse buttons - Fix negative height calculation with Math.max - Improve touchmove listener with passive: false - Use global z-index counter and stable refs in state hooks - Ensure callbacks avoid stale closures and persist state correctly
…listeners stable - Introduce HEADER_HEIGHT constant for header height consistency. - Update Window component to use HEADER_HEIGHT instead of hard‑coded value. - Refactor useMantineWindow to store drag/resize handlers in refs. - Remove effect dependencies to register global listeners only once. - Improves performance and prevents stale closures.
- Add refs to track latest position, size, and collapsed state to avoid stale closures. - Consolidate persistence side effect into a single useCallback. - Update setPosition, setSize, setIsCollapsed to use new persistSideEffect. - Remove unnecessary dependencies from useCallback hooks. - Improves reliability of persisted window state across renders.
- Batch rapid drag/resize updates into a single localStorage write. - Clear pending persistence on component unmount. - Remove unused click‑outside ref and simplify ref merging.
- Verify rendering, ARIA, and accessibility attributes. - Test controlled open/close and collapse behavior. - Validate resize handles and draggable attributes. - Check positioning, visual props, and persistence logic. - Ensure component works without title or children.
…e values - Replace `defaultPosition`/`defaultSize` with `defaultX`, `defaultY`, `defaultWidth`, `defaultHeight`. - Introduce `ResponsiveValue` type and `useResponsiveValue` hook for breakpoint‑aware values. - Update docs, demos, tests, and stories to reflect the new API. - Adjust internal state, persistence, and callbacks to support controlled/uncontrolled values and return pixel values.
- Introduce `controlledPosition` demo for external control of window position and size. - Remove obsolete demos and update exports accordingly. - Update documentation to reflect new demo names and unit type explanations. - Update `Window` component to resolve responsive `radius` and `shadow` before passing to `varsResolver`.
- Add `withinPortal` option to window hooks for portal-aware behavior - Introduce separate z-index counters for portal (high) and container (low) contexts - Default `withinPortal` to true for backward compatibility - Update bringToFront logic to increment the appropriate counter based on portal context
… button - Introduce Window.Group component that coordinates z-index and provides layout presets. - Add WindowGroup context to register windows and expose layout, close, collapse, expand actions. - Update Window to expose Group static component and integrate group logic (portal handling, tools button). - Add demos, docs, and tests covering group rendering, tools button visibility, layout application, and global actions. - Provide storybook examples for basic group and tiled layout.
- Introduce LayoutIcons component with snap, fill, arrange, and tile icons. - Add `withToolsButton` prop to Window, defaulting to true. - Update WindowGroup to handle only group layouts; single-window layouts are now handled by Window. - Adjust tests to reflect new tools button visibility behavior.
- Adds new boolean prop to Window demo configurator - Enables toggling the tools button in the demo interface
- Switch to a 16:9 viewBox for better aspect ratio handling - Increase default icon size to 28 for clearer visibility - Add consistent padding, border radius, and gap constants - Simplify calculations and improve code readability across all layout icons
- Update Flex components to use justify="space-between" and px="sm" for consistent layout - Remove gap prop to avoid uneven spacing between action icons - Align action icons evenly for a cleaner, more balanced UI appearance
…indows support - Introduce `defaultLayout` prop to apply an initial layout after windows register. - Add `groupRef` to expose group API (applyLayout, closeAll, etc.) for external control. - Add `collapsable` flag to windows and limit collapse/expand actions to collapsable windows. - Update demos and documentation to showcase new layout presets and tools button behavior.
- Add showToolsButton prop to Window.Group to control visibility of the tools button - Update demo titles to reflect new feature - Add tests for showToolsButton behavior, defaultLayout, and onLayoutChange - Ensure solo Window still shows tools button by default.
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors the Window component’s state model to support controlled/uncontrolled position and size (including responsive values), introduces Window.Group for coordinated multi-window layouts/z-index, and updates docs/tests/stories to match the new API and tooling UI.
Changes:
- Add
WindowGroup/context and layout tooling (icons + tools menu) for single-window and group layouts. - Replace
defaultPosition/defaultSizewith flatdefaultX/defaultY/defaultWidth/defaultHeightand add controlledx/y/width/height(all supporting responsive values). - Rework persistence logic (debounced) and expand test/docs coverage around the new behaviors.
Reviewed changes
Copilot reviewed 42 out of 42 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| package/src/index.ts | Exports new WindowGroup/context types and useResponsiveValue. |
| package/src/hooks/use-window-state.ts | Refactors state/persistence for controlled/uncontrolled axes and debounced localStorage writes; adjusts z-index behavior. |
| package/src/hooks/use-responsive-value.ts | New hook to resolve responsive prop values via Mantine breakpoints. |
| package/src/hooks/use-mantine-window.ts | Integrates group context, responsive props resolution, stable global listeners, and layout helpers. |
| package/src/WindowGroup.tsx | Adds WindowGroup container with window registry, z-index coordination, default layouts, and group actions. |
| package/src/WindowGroup.context.ts | Defines group context types/contracts (WindowLayout, callbacks, registry state). |
| package/src/Window.tsx | Updates public props API, adds tools menu + layout actions, improves ARIA labels, and exposes Window.Group. |
| package/src/Window.test.tsx | Expands tests for rendering, accessibility, persistence, flat API, and group behavior. |
| package/src/Window.story.tsx | Migrates stories from defaultPosition/defaultSize to flat defaults and updates copy. |
| package/src/Window.module.css | Removes unused .pre styling. |
| package/src/LayoutIcons.tsx | Adds layout icon set for tools menu. |
| docs/docs.mdx | Rewrites docs structure for new flat API, responsive values, and Window.Group features. |
| docs/demos/index.ts | Reorganizes demos; adds group/responsive/unit demos; removes legacy viewport/percentage demos exports. |
| docs/demos/Window.demo.withinPortal.tsx | Migrates demo to flat defaults and formatting cleanup. |
| docs/demos/Window.demo.unitTypes.tsx | Adds new unit-types demo aligned with updated docs. |
| docs/demos/Window.demo.responsive.tsx | Adds responsive props demo using breakpoint objects. |
| docs/demos/Window.demo.positionAndSize.tsx | Renames/updates demo to show flat position + size defaults. |
| docs/demos/Window.demo.persistence.tsx | Migrates persistence demo to flat defaults. |
| docs/demos/Window.demo.layoutPresets.tsx | Adds demo for controlling group layouts via groupRef + onLayoutChange. |
| docs/demos/Window.demo.groupLayout.tsx | Adds demo illustrating defaultLayout and layout change tracking. |
| docs/demos/Window.demo.group.tsx | Adds basic group usage demo. |
| docs/demos/Window.demo.controlledPosition.tsx | Adds controlled position/size demo using callbacks to sync external state. |
| docs/demos/Window.demo.configurator.tsx | Migrates configurator defaults; adds withToolsButton option. |
| docs/demos/Window.demo.stylesApi.tsx | Migrates Styles API demo to flat defaults. |
| docs/demos/Window.demo.centered.tsx | Migrates centered demo to flat defaults. |
| docs/demos/Window.demo.callbacks.tsx | Migrates callbacks demo to flat defaults. |
| docs/demos/Window.demo.dragBounds.tsx | Migrates drag bounds demo to flat defaults. |
| docs/demos/Window.demo.fullSizeHandles.tsx | Migrates full-size handles demo to flat defaults. |
| docs/demos/Window.demo.minMaxSize.tsx | Migrates min/max size demo to flat defaults. |
| docs/demos/Window.demo.mixedConstraints.tsx | Migrates mixed constraints demo to flat defaults. |
| docs/demos/Window.demo.mixedDragBounds.tsx | Migrates mixed drag bounds demo to flat defaults. |
| docs/demos/Window.demo.multiple.tsx | Migrates multiple windows demo to flat defaults. |
| docs/demos/Window.demo.noCollapsable.tsx | Migrates no-collapsable demo to flat defaults. |
| docs/demos/Window.demo.viewportSize.tsx | Removes legacy viewport-size demo (superseded by unit/responsive docs). |
| docs/demos/Window.demo.viewportPosition.tsx | Removes legacy viewport-position demo (superseded by unit/responsive docs). |
| docs/demos/Window.demo.viewportDragBounds.tsx | Removes legacy viewport-drag-bounds demo. |
| docs/demos/Window.demo.viewportConstraints.tsx | Removes legacy viewport-constraints demo. |
| docs/demos/Window.demo.percentageSize.tsx | Removes legacy percentage-size demo. |
| docs/demos/Window.demo.percentagePosition.tsx | Removes legacy percentage-position demo. |
| docs/demos/Window.demo.percentageDragBounds.tsx | Removes legacy percentage-drag-bounds demo. |
| docs/demos/Window.demo.responsiveWindow.tsx | Removes legacy responsive-window demo (replaced by breakpoint-object demo). |
| docs/demos/Window.demo.customSize.tsx | Removes legacy custom-size demo (replaced by position-and-size demo). |
Comments suppressed due to low confidence (1)
package/src/hooks/use-window-state.ts:343
- This effect persists collapsed state but only re-runs when
collapsedchanges, even though it readspersistState,isHydrated,key, and defaults from the closure. That can lead to persisting to a stale key or skipping persistence whenpersistStatetoggles. Consider adding the missing dependencies and/or using the same debounced persistence path as the other setters.
- Add hydration guard to persist side effect in use-window-state. - Clarify Window.Group default `withinPortal` behavior in docs. - Refactor WindowGroup layout logic and state naming for clarity.
- Introduce WindowGroup component with its props and styles names - Add WindowGroup styles API file and register it in the styles API index - Update docs page to include WindowGroup in tabs and component prefix - Extend docgen script to generate declarations for WindowGroup - Adjust component props and styles arrays to support WindowGroup in documentation
…e details - Clarified project scope and added WindowGroup component. - Updated command table with new build, docs, lint, and storybook commands. - Added important note to clean and rebuild after API changes. - Reorganized architecture sections and added multi‑unit support and SSR hydration safety. - Included z‑index management and updated test file list.
- Introduces a concise Features list for quick reference. - Adds missing Mantine UI keywords for better discoverability. - Keeps README concise and organized.
… handles docs - Adds documentation for centered window behavior. - Documents disabling collapse functionality. - Explains full-size resize handles for better UX. - Removes duplicate sections.
- Replace object-based defaultPosition/Size with flat defaultX, defaultY, defaultWidth, defaultHeight. - Update README example to use new flat props. - Add migration guide and new feature list to docs. - Refactor layout icons to a common base component for cleaner rendering. - Expand tests to cover position/size callbacks, persistence, and Window.Group actions.
- Introduce flat `x`, `y`, `width`, `height` props with uncontrolled defaults - Clarify responsive value support for radius and shadow - Update test notes to reflect new testing setup and visual checks for Popover - Revise package description to include z-index and WindowGroup features
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.