react-grid-layout 1.3.3 → 1.4.0

package/.flowconfig

@@ -1,9 +1,11 @@
 [version]
-^0.158.0
+^0.172.0
 
 [ignore]
 <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/.packj.yaml

@@ -0,0 +1,153 @@
+#
+# Audit policies
+#
+audit:
+  alerts:
+    #
+    # category: malicious packages (publicly known and unknown)
+    #
+    malicious:
+      contains known malware:
+        - reason: package is known to contain a dangerous malware
+        - enabled: true
+      typo-squatting or repo-jacking package:
+        - reason: package impersonates another popular package to propagate malware
+        - enabled: true
+
+    #
+    # alert category: suspicious packages (potentially malicious)
+    #
+    suspicious:
+      inconsistent with repo source:
+        - reason: package code inconsistent with the public repo source code
+        - enabled: false # WIP
+      overwrites system binaries:
+        - reason: package code inconsistent with the public repo source code
+        - enabled: false # WIP
+
+    #
+    # alert category: packages vulnerable to code exploits
+    #
+    vulnerable:
+      contains known vulnerabilities:
+        - reason: known vulnerabilities (CVEs) in package code could be exploited
+        - enabled: true
+      insecure network communication:
+        - reason: package code uses insecure network communication (not https)
+        - enabled: false # WIP
+
+    #
+    # packages with undesirable or "risky" attributes
+    #
+    undesirable:
+      package is old or abandoned:
+        - reason: old or abandoned packages receive no security updates and are risky
+        - enabled: true
+
+      invalid or no author email:
+        - reason: a package with lack of or invalid author email suggests 2FA not enabled
+        - enabled: true
+
+      invalid or no homepage:
+        - reason: a package with no or invalid homepage may not be preferable
+        - enabled: false
+
+      no source repo:
+        - reason: lack of public source repo may suggest malicious intention
+        - enabled: true
+
+      fewer downloads:
+        - reason: a package with few downloads may not be preferable
+        - enabled: true
+
+      no or insufficient readme:
+        - reason: a package with lack of documentation may not be preferable
+        - enabled: false
+
+      fewer versions or releases:
+        - reason: few versions suggest unstable or inactive project
+        - enabled: true
+
+      too many dependencies:
+        - reason: too many dependencies increase attack surface
+        - enabled: false
+
+      version release after a long gap:
+        - reason: a release after a long time may indicate account hijacking
+        - enabled: false
+
+      contains custom installation hooks:
+        - reason: custom installation hooks may download or execute malicious code
+        - enabled: false # WIP
+
+      #
+      # type: repo stats
+      #
+      few source repo stars:
+        - reason: a package with few repo stars may not be preferable
+        - enabled: false
+
+      few source repo forks:
+        - reason: a package with few repo forks may not be preferable
+        - enabled: false
+
+      forked source repo:
+        - reason: a forked copy of a popular package may contain malicious code
+        - enabled: true
+
+      #
+      # type: APIs and permissions
+      #
+      generates new code:
+        - reason: package generates new code at runtime, which could be malicious
+        - enabled: false
+      forks or exits OS processes:
+        - reason: package spawns new operating system processes, which could be malicious
+        - enabled: false
+      accesses obfuscated (hidden) code:
+        - enabled: true
+      accesses environment variables:
+        - enabled: false
+      changes system/environment variables:
+        - enabled: false
+      accesses files and dirs:
+        - enabled: false
+      communicates with external network:
+        - enabled: false
+      reads user input:
+        - enabled: false
+
+#
+# Sandboxing policies
+#
+sandbox:
+  rules:
+    #
+    # File system (allow or block accesses to file/dirs)
+    #
+    #   ~/ represents home dir
+    #   . represents cwd dir
+    #
+    # NOTE: only ONE 'allow' and 'block' lines are allowed
+    #
+    fs:
+      # TODO: customize as per your threat model
+
+      # block access to home dir and all other locations (except the ones below)
+      block: ~/, /
+      allow: ., ~/.cache, ~/.npm, ~/.local, ~/.ruby, /tmp, /proc, /etc, /var, /bin, /usr/include, /usr/local, /usr/bin, /usr/lib, /usr/share, /lib
+
+    #
+    # Network (allow or block domains/ports)
+    #
+    # NOTE: only ONE 'allow' and 'block' lines are allowed
+    #
+    network:
+
+      # TODO: customize as per your threat model
+
+      # block all external network communication (except the ones below)
+      block: 0.0.0.0
+
+      # For NPM packages
+      allow: registry.yarnpkg.com:0, npmjs.org:0, npmjs.com:0

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)
@@ -264,8 +300,8 @@ Thanks to @daynin and @n1ghtmare for taking an active role in maintaining RGL, a
 
 ### New Features
 
-- Added ability to drag items into the grid from outside. [#980](https://github.com/STRML/react-grid-layout/pull/980). See [the example](https://strml.github.io/react-grid-layout/examples/15-drag-from-outside.html).
-  - This is especially exciting as it opens up new "widget toolbox" use cases such as [Example 14](https://strml.github.io/react-grid-layout/examples/14-toolbox.html) with more intuitive interaction. Thanks @daynin.
+- Added ability to drag items into the grid from outside. [#980](https://github.com/STRML/react-grid-layout/pull/980). See [the example](https://react-grid-layout.github.io/react-grid-layout/examples/15-drag-from-outside.html).
+  - This is especially exciting as it opens up new "widget toolbox" use cases such as [Example 14](https://react-grid-layout.github.io/react-grid-layout/examples/14-toolbox.html) with more intuitive interaction. Thanks @daynin.
 - `transformScale` prop [#987](https://github.com/STRML/react-grid-layout/pull/987)
 - `<ResponsiveReactGridLayout>` now supports margin-per-breakpoint [#1016](https://github.com/STRML/react-grid-layout/pull/1016)
 

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