dragBounds improvements

[gfazioli]

• feat(Window): add viewport and mixed unit constraints support
• 🚀 feat(Window): allow string units for dragBounds and add demos
• feat(Window): add container boundary constraints for non‑portal windows

[Copilot]

Pull request overview

This PR adds support for viewport units (vw, vh), percentages, and mixed unit types for window sizing and drag boundary constraints in the Mantine Window component.

Changes:

• Added convertToPixels utility function to handle multiple CSS unit types (px, vw, vh, %)
• Enhanced dragBounds, minWidth, maxWidth, minHeight, and maxHeight to accept string units in addition to numbers
• Improved container boundary constraints for non-portal windows during resize operations
• Added comprehensive documentation and demo examples for new features

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
package/src/lib/convert-to-pixels.ts	New utility function to convert CSS values (px, vw, vh, %) to pixels
package/src/lib/convert-to-pixels.test.ts	Comprehensive test suite for the conversion utility
package/src/hooks/use-mantine-window.ts	Updated clamping and bounds logic to use convertToPixels; added container constraints for non-portal resize
package/src/Window.tsx	Updated type definitions to accept string units for size and boundary constraints
package/src/Window.story.tsx	Added five new story examples demonstrating viewport and mixed unit features
docs/docs.mdx	Added documentation sections for viewport-based and percentage-based constraints
docs/demos/index.ts	Exported new demo components
docs/demos/Window.demo.withinPortal.tsx	Updated positioning and documentation for container boundary behavior
docs/demos/Window.demo.viewportDragBounds.tsx	New demo showing viewport-based drag boundaries
docs/demos/Window.demo.viewportConstraints.tsx	New demo showing viewport-based size constraints
docs/demos/Window.demo.percentageDragBounds.tsx	New demo showing percentage-based drag boundaries
docs/demos/Window.demo.mixedDragBounds.tsx	New demo showing mixed unit drag boundaries
docs/demos/Window.demo.mixedConstraints.tsx	New demo showing mixed unit size constraints

Comments suppressed due to low confidence (1)

package/src/hooks/use-mantine-window.ts:431

• Container boundary constraints are inconsistently applied across resize directions. The topLeft, top, left, and bottomLeft cases don't have explicit container boundary checks after clamping, while topRight, right, bottomRight, bottom, and bottomLeft do.

For the topLeft case specifically, when the window position changes (newX and newY are adjusted), there's no verification that the new position doesn't push the window outside the container bounds. This could allow the window to extend beyond the container when resizing from these corners.

Consider adding container boundary validation for all resize directions to ensure consistent behavior, or add a comment explaining why certain directions don't need these checks.

      switch (resizeDirection.current) {
        case 'topLeft':
          newWidth = clampWidth(resizeStart.current.width - deltaX);
          newHeight = clampHeight(resizeStart.current.height - deltaY);
          newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
          newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
          break;
        case 'top':
          newHeight = clampHeight(resizeStart.current.height - deltaY);
          newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
          break;
        case 'topRight':
          newWidth = clampWidth(resizeStart.current.width + deltaX);
          // Limit width based on position and container
          if (!withinPortal && newX + newWidth > containerMaxWidth) {
            newWidth = containerMaxWidth - newX;
          }
          newHeight = clampHeight(resizeStart.current.height - deltaY);
          newY = resizeStart.current.posY + (resizeStart.current.height - newHeight);
          break;
        case 'right':
          newWidth = clampWidth(resizeStart.current.width + deltaX);
          // Limit width based on position and container
          if (!withinPortal && newX + newWidth > containerMaxWidth) {
            newWidth = containerMaxWidth - newX;
          }
          break;
        case 'bottomRight':
          newWidth = clampWidth(resizeStart.current.width + deltaX);
          // Limit width based on position and container
          if (!withinPortal && newX + newWidth > containerMaxWidth) {
            newWidth = containerMaxWidth - newX;
          }
          newHeight = clampHeight(resizeStart.current.height + deltaY);
          // Limit height based on position and container
          if (!withinPortal && newY + newHeight > containerMaxHeight) {
            newHeight = containerMaxHeight - newY;
          }
          break;
        case 'bottom':
          newHeight = clampHeight(resizeStart.current.height + deltaY);
          // Limit height based on position and container
          if (!withinPortal && newY + newHeight > containerMaxHeight) {
            newHeight = containerMaxHeight - newY;
          }
          break;
        case 'bottomLeft':
          newWidth = clampWidth(resizeStart.current.width - deltaX);
          newHeight = clampHeight(resizeStart.current.height + deltaY);
          // Limit height based on position and container
          if (!withinPortal && newY + newHeight > containerMaxHeight) {
            newHeight = containerMaxHeight - newY;
          }
          newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
          break;
        case 'left':
          newWidth = clampWidth(resizeStart.current.width - deltaX);
          newX = resizeStart.current.posX + (resizeStart.current.width - newWidth);
          break;

[Copilot]

Pull request overview

Copilot reviewed 23 out of 23 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 24 out of 24 changed files in this pull request and generated 15 comments.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 11 comments.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 8 comments.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 5 comments.

[Copilot]

Pull request overview

Copilot reviewed 27 out of 27 changed files in this pull request and generated 3 comments.