react-grid-layout 1.3.4 → 1.4.1

package/.flowconfig

@@ -5,6 +5,7 @@
 <PROJECT_ROOT>/build/.*
 <PROJECT_ROOT>/dist/.*
 <PROJECT_ROOT>/node_modules/resolve/.*
+<PROJECT_ROOT>/node_modules/.*/resolve/.*
 # Speeds parsing:
 .*/node_modules/@babel.*
 .*/node_modules/babel.*

package/.prettierignore

@@ -1,3 +1,4 @@
 dist/
 examples/
-__mocks__/
+__mocks__/
+flow-typed/

package/.prettierrc

@@ -8,7 +8,6 @@
   "jsxSingleQuote": false,
   "trailingComma": "none",
   "bracketSpacing": true,
-  "jsxBracketSameLine": false,
   "arrowParens": "avoid",
   "requirePragma": false,
   "insertPragma": false,

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 1.4.0 (Sep 11, 2023)
+
+Hey, it's been a long time! Taking a year and a half off is a pretty "open-source" thing to do, thanks for bearing with me.
+
+### New Features
+
+- **Grid items can now be resized left and up!** Thanks to @ludovic and @dseif for all the hard work they did on this. [#1917](https://github.com/react-grid-layout/react-grid-layout/pull/1917)
+  - To use, specify `resizeHandles` directions on your `<GridItem>`s. See [the example](/test/examples/20-resizable-handles.jsx) for more on how to do this.
+  - See also [the demo](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html).
+- `<WidthProvider>` now uses a `ResizeObserver` instead of hooking into the window's `'resize'` event. [#1839](https://github.com/react-grid-layout/react-grid-layout/pull/1839)
+  - This should not be breaking for any users but introduces a new dependency, [resize-observer-polyfill](https://www.npmjs.com/package/resize-observer-polyfill). It will not be imported unless you use `<WidthProvider>`.
+
+### Bugfixes
+
+- Fixed `horizontal` compact not always moving grid elements as far left as possible. [#1822](https://github.com/react-grid-layout/react-grid-layout/pull/1822)
+- Fixed a bug when `allowOverlap={true}` and `compactType={null}`, where collisions would still be processed. [#1782](https://github.com/react-grid-layout/react-grid-layout/pull/1782)
+- Fixed `onResizeStop` and `onDragStop` callbacks not returning updated layout. [#1613](https://github.com/react-grid-layout/react-grid-layout/pull/1613)
+- An item will now rerender when `data-grid` props change. [#718](https://github.com/react-grid-layout/react-grid-layout/issues/718)
+- Corrected draggableHandle configuration in static elements example [#1826](https://github.com/react-grid-layout/react-grid-layout/pull/1826)
+
+### Internal Changes
+
+- Various dependency upgrades and upgraded tests.
+- Removed long-deprecated `_grid` property.
+- Various doc updates.
+
+## 1.3.4 (Feb 21, 2022)
+
+### Bugfixes
+
+- Add `e.stopPropagation()` on drag events to better support nested grids. Thanks @rogerfar [#1494](https://github.com/react-grid-layout/react-grid-layout/pull/1494).
+
+### Internal Changes
+
+- Various dependency upgrades.
+
 ## 1.3.3 (Jan 24, 2022)
 
 This was a quick release to improve package size and dependency use. Thanks @salvoravida [#1655](https://github.com/react-grid-layout/react-grid-layout/pull/1655)

package/README.md

@@ -57,6 +57,7 @@ RGL is React-only and does not require jQuery.
 1. [Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/17-resizable-handles.html)
 1. [Scaled Containers](https://react-grid-layout.github.io/react-grid-layout/examples/18-scale.html)
 1. [Allow Overlap](https://react-grid-layout.github.io/react-grid-layout/examples/19-allow-overlap.html)
+1. [All Resizable Handles](https://react-grid-layout.github.io/react-grid-layout/examples/20-resizable-handles.html)
 
 #### Projects Using React-Grid-Layout
 
@@ -357,7 +358,7 @@ preventCollision: ?boolean = false,
 // onDragStart attribute is required for Firefox for a dragging initialization
 // @see https://bugzilla.mozilla.org/show_bug.cgi?id=568313
 isDroppable: ?boolean = false,
-// Defines which resize handles should be rendered
+// Defines which resize handles should be rendered.
 // Allows for any combination of:
 // 's' - South handle (bottom-center)
 // 'w' - West handle (left-center)
@@ -367,6 +368,8 @@ isDroppable: ?boolean = false,
 // 'nw' - Northwest handle (top-left)
 // 'se' - Southeast handle (bottom-right)
 // 'ne' - Northeast handle (top-right)
+//
+// Note that changing this property dynamically does not work due to a restriction in react-resizable.
 resizeHandles: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se'],
 // Custom component for resize handles
 // See `handle` as used in https://github.com/react-grid-layout/react-resizable#resize-handle
@@ -468,6 +471,8 @@ RGL supports the following properties on grid items or layout items. When initia
 build a layout array (as in the first example above), or attach this object as the `data-grid` property
 to each of your child elements (as in the second example).
 
+If `data-grid` is provided on an item, it will take precedence over an item in the `layout` with the same key (`i`).
+
 Note that if a grid item is provided but incomplete (missing one of `x, y, w, or h`), an error
 will be thrown so you can correct your layout.
 
@@ -504,13 +509,27 @@ will be draggable, even if the item is marked `static: true`.
   // If false, will not be resizable. Overrides `static`.
   isResizable: ?boolean = true,
   // By default, a handle is only shown on the bottom-right (southeast) corner.
-  // Note that resizing from the top or left is generally not intuitive.
+  // As of RGL >= 1.4.0, resizing on any corner works just fine!
   resizeHandles?: ?Array<'s' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne'> = ['se']
   // If true and draggable, item will be moved only within grid.
   isBounded: ?boolean = false
 }
 ```
 
+### Grid Item Heights and Widths
+
+Grid item widths are based on container and number of columns. The size of a grid unit's height is based on `rowHeight`.
+
+Note that an item that has `h=2` is _not exactly twice as tall as one with `h=1` unless you have no `margin`_!
+
+In order for the grid to not be ragged, when an item spans grid units, it must also span margins. So you must add the height or width or the margin you are spanning for each unit. So actual pixel height is `(rowHeight * h) + (marginH * (h - 1)`.
+
+For example, with `rowHeight=30`, `margin=[10,10]` and a unit with height 4, the calculation is `(30 * 4) + (10 * 3)`
+
+![margin](margin.png)
+
+If this is a problem for you, set `margin=[0,0]` and handle visual spacing between your elements inside the elements' content.
+
 ### Performance
 
 `<ReactGridLayout>` has [an optimized `shouldComponentUpdate` implementation](lib/ReactGridLayout.jsx), but it relies on the user memoizing the `children` array:
@@ -546,23 +565,33 @@ function MyGrid(props) {
 
 Because the `children` prop doesn't change between rerenders, updates to `<MyGrid>` won't result in new renders, improving performance.
 
+### React Hooks Performance
+
+Using hooks to save your layout state on change will cause the layouts to re-render as the ResponsiveGridLayout will change it's value on every render.
+To avoid this you should wrap your WidthProvider in a useMemo:
+
+```js
+const ResponsiveReactGridLayout = useMemo(() => WidthProvider(Responsive), []);
+```
+
 ### Custom Child Components and Draggable Handles
 
 If you use React Components as grid children, they need to do a few things:
 
 1. Forward refs to an underlying DOM node, and
-2. Forward `style` and `className` to that same DOM node.
+2. Forward `style`,`className`, `onMouseDown`, `onMouseUp` and `onTouchEnd` to that same DOM node.
 
 For example:
 
 ```js
-const CustomGridItemComponent = React.forwardRef(({style, className, ...props}, ref) => {
+const CustomGridItemComponent = React.forwardRef(({style, className, onMouseDown, onMouseUp, onTouchEnd, children, ...props}, ref) => {
   return (
-    <div style={{ /* styles */, ...style}} className={className} ref={ref}>
+    <div style={{ /* styles */, ...style}} className={className} ref={ref} onMouseDown={onMouseDown} onMouseUp={onMouseUp} onTouchEnd={onTouchEnd}>
       {/* Some other content */}
+      {children} {/* Make sure to include children to add resizable handle */}
     </div>
   );
-}
+})
 ```
 
 The same is true of custom elements as draggable handles using the `draggableHandle` prop. This is so that