Skip to content

3.3.0

Latest

Choose a tag to compare

@gfazioli gfazioli released this 06 Oct 15:25

✨ Features

  • Headless useDragResize hook (#57): the geometry engine of Window, now exported. Make any element draggable and resizable from any edge or corner, with the same units (px, vw, vh, %), min / max sizes, viewport or parent boundary, dragBounds, axis lock and keyboard resizing. Prop getters for the drag area (getDragHandleProps) and the handles (getResizeHandleProps(direction, { keyboard, label })), controlled or uncontrolled position and size, isDragging / isResizing. Window itself is built on it.
  • axis prop (#55): 'x' or 'y' locks the user's drag to one direction. The locked coordinate stays where the gesture started; programmatic moves are not restricted.
  • Keyboard resizing (#56): one handle per window (the bottom-right corner, the right edge when collapsed or resizable="horizontal", the bottom edge for resizable="vertical") is a focusable WAI-ARIA separator with aria-valuenow / aria-valuemin / aria-valuemax, and aria-valuetext on the corner. Arrow keys resize by resizeStep (10px), Shift + arrows by resizeShiftStep (50px), Home / End go to the min / max size. Each key press fires onResizeStart, onSizeChange and onResizeEnd, and is persisted by persistState. New props: withKeyboardResize, resizeStep, resizeShiftStep, resizeHandleLabel.

⚡ Improvements

  • Behavior change: every resizable window gains one tab stop, its keyboard resize handle, with a visible focus mark (core's FloatingWindow.ResizeHandle is focusable too). Set withKeyboardResize={false} to keep the previous tab order.
  • Drag bounds use the window's rendered size, measured once per gesture.
  • The comparison with Mantine core FloatingWindow no longer has a core-only row: axis lock, keyboard resizing and a headless hook are now on both sides.

🐛 Bug Fixes

  • Window forwards its ref to the root element. A consumer ref used to replace the internal one, which broke container tracking with withinPortal={false}.

What's Changed

  • docs: add a comparison with Mantine core FloatingWindow by @gfazioli in #54
  • feat: axis lock, keyboard resizing and a headless useDragResize hook by @gfazioli in #58

Full Changelog: 3.2.3...3.3.0