react-resizable 3.1.1 → 3.1.3

package/README.md

@@ -1,84 +1,118 @@
-### React-Resizable
+# React-Resizable
 
-[View the Demo](https://react-grid-layout.github.io/react-resizable/index.html)
+[![npm version](https://img.shields.io/npm/v/react-resizable.svg)](https://www.npmjs.com/package/react-resizable)
+[![npm downloads](https://img.shields.io/npm/dm/react-resizable.svg)](https://www.npmjs.com/package/react-resizable)
+[![Build Status](https://github.com/react-grid-layout/react-resizable/actions/workflows/test.yml/badge.svg)](https://github.com/react-grid-layout/react-resizable/actions/workflows/test.yml)
+
+[**View the Demo**](https://react-grid-layout.github.io/react-resizable/examples/)
 
 A simple widget that can be resized via one or more handles.
 
 You can either use the `<Resizable>` element directly, or use the much simpler `<ResizableBox>` element.
 
-See the example and associated code in [ExampleLayout](/examples/ExampleLayout.js) and
-[ResizableBox](/lib/ResizableBox.js) for more details.
+See the example and associated code in [ExampleLayout](https://github.com/react-grid-layout/react-resizable/blob/master/examples/ExampleLayout.js) and
+[ResizableBox](https://github.com/react-grid-layout/react-resizable/blob/master/lib/ResizableBox.js) for more details.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Compatibility](#compatibility)
+- [Usage](#usage)
+  - [Resizable](#resizable)
+  - [ResizableBox](#resizablebox)
+- [Props](#props)
+- [Extracting Styles](#extracting-styles)
+- [Custom Resize Handles](#resize-handle)
+
+## Installation
+
+```bash
+$ npm install --save react-resizable
+```
+
+## Extracting Styles
+
+You **must** include the associated styles in your application, otherwise the resize handles will not be visible and will not work properly.
 
-Make sure you use the associated styles in [/css/styles.css](/css/styles.css), as without them, you will have
-problems with handle placement and visibility.
+```js
+// In your JS/TS entry point:
+import 'react-resizable/css/styles.css';
+```
 
-You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`.
-See the [demo](/examples/TestLayout.js) for more on this.
+Or import it in your CSS:
 
-### Installation
+```css
+@import 'react-resizable/css/styles.css';
+```
 
-    $ npm install --save react-resizable
+If you're using a bundler that doesn't support CSS imports, you can find the styles at `node_modules/react-resizable/css/styles.css` and include them manually.
 
-### Compatibility
+## Compatibility
 
-[React-Resizable 3.x](/CHANGELOG.md#3.0.0) is compatible with React `>= 16.3`.
-React-Resizable 2.x has been skipped.
-[React-Resizable 1.x](/CHANGELOG.md#1.11.1) is compatible with React `14-17`.
+| Version | React Version |
+|---------|---------------|
+| [3.x](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md#300-may-10-2021) | `>= 16.3` |
+| 2.x | Skipped |
+| [1.x](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md#1111-mar-5-2021) | `14 - 17` |
 
-### Usage
+## Usage
 
 This package has two major exports:
 
-* [`<Resizable>`](/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its
-  callbacks and setting its props.
-* [`<ResizableBox>`](/lib/ResizableBox.js): A simple `<div {...props} />` element that manages basic state. Convenient for simple use-cases.
+* [`<Resizable>`](https://github.com/react-grid-layout/react-resizable/blob/master/lib/Resizable.js): A raw component that does not have state. Use as a building block for larger components, by listening to its callbacks and setting its props.
+* [`<ResizableBox>`](https://github.com/react-grid-layout/react-resizable/blob/master/lib/ResizableBox.js): A simple `<div {...props} />` element that manages basic state. Convenient for simple use-cases.
 
+### `<Resizable>`
 
-#### `<Resizable>`
 ```js
-const {Resizable} = require('react-resizable');
-
-// ES6
 import { Resizable } from 'react-resizable';
+import 'react-resizable/css/styles.css';
 
-// ...
 class Example extends React.Component {
   state = {
     width: 200,
     height: 200,
   };
 
-  // On top layout
   onResize = (event, {node, size, handle}) => {
     this.setState({width: size.width, height: size.height});
   };
 
   render() {
     return (
-      <Resizable height={this.state.height} width={this.state.width} onResize={this.onResize}>
-        <div className="box" style={{width: this.state.width + 'px', height: this.state.height + 'px'}}>
+      <Resizable
+        height={this.state.height}
+        width={this.state.width}
+        onResize={this.onResize}
+      >
+        <div
+          className="box"
+          style={{width: this.state.width + 'px', height: this.state.height + 'px'}}
+        >
           <span>Contents</span>
         </div>
       </Resizable>
     );
   }
 }
-
 ```
 
+### `<ResizableBox>`
 
-#### `<ResizableBox>`
 ```js
-const {ResizableBox} = require('react-resizable');
-
-// ES6
 import { ResizableBox } from 'react-resizable';
+import 'react-resizable/css/styles.css';
 
 class Example extends React.Component {
   render() {
     return (
-      <ResizableBox width={200} height={200} draggableOpts={{grid: [25, 25]}}
-          minConstraints={[100, 100]} maxConstraints={[300, 300]}>
+      <ResizableBox
+        width={200}
+        height={200}
+        draggableOpts={{grid: [25, 25]}}
+        minConstraints={[100, 100]}
+        maxConstraints={[300, 300]}
+      >
         <span>Contents</span>
       </ResizableBox>
     );
@@ -86,7 +120,7 @@ class Example extends React.Component {
 }
 ```
 
-### Props
+## Props
 
 These props apply to both `<Resizable>` and `<ResizableBox>`. Unknown props that are not in the list below will be passed to the child component.
 
@@ -96,14 +130,15 @@ type ResizeCallbackData = {
   size: {width: number, height: number},
   handle: ResizeHandleAxis
 };
+
 type ResizeHandleAxis = 's' | 'w' | 'e' | 'n' | 'sw' | 'nw' | 'se' | 'ne';
 
-type ResizableProps =
-{
+type ResizableProps = {
   children: React.Element<any>,
   width: number,
   height: number,
-  // Either a ReactElement to be used as handle, or a function returning an element that is fed the handle's location as its first argument.
+  // Either a ReactElement to be used as handle, or a function
+  // returning an element that is fed the handle's location as its first argument.
   handle: ReactElement<any> | (resizeHandle: ResizeHandleAxis, ref: ReactRef<HTMLElement>) => ReactElement<any>,
   // If you change this, be sure to update your css
   handleSize: [number, number] = [10, 10],
@@ -115,7 +150,9 @@ type ResizableProps =
   onResizeStart?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   onResize?: ?(e: SyntheticEvent, data: ResizeCallbackData) => any,
   draggableOpts?: ?Object,
-  resizeHandles?: ?Array<ResizeHandleAxis> = ['se']
+  resizeHandles?: ?Array<ResizeHandleAxis> = ['se'],
+  // If `transform: scale(n)` is set on the parent, this should be set to `n`.
+  transformScale?: number = 1
 };
 ```
 
@@ -129,15 +166,17 @@ The following props can also be used on `<ResizableBox>`:
 
 If a `width` or `height` is passed to `<ResizableBox>`'s `style` prop, it will be ignored as it is required for internal function.
 
-#### Resize Handle
+You can pass options directly to the underlying `DraggableCore` instance by using the prop `draggableOpts`. See the [demo](https://react-grid-layout.github.io/react-resizable/examples/) for more on this.
+
+## Resize Handle
 
-If you override the resize handle, we expect that any `ref` passed to your new handle with represent the underlying DOM element.
+If you override the resize handle, we expect that any `ref` passed to your new handle will represent the underlying DOM element.
 
 This is required, as `react-resizable` must be able to access the underlying DOM node to attach handlers and measure position deltas.
 
 There are a few ways to do this:
 
-##### Native DOM Element
+### Native DOM Element
 
 This requires no special treatment.
 
@@ -145,11 +184,11 @@ This requires no special treatment.
 <Resizable handle={<div className="foo" />} />
 ```
 
-##### Custom React Component
+### Custom React Component
 
 You must [forward the ref](https://reactjs.org/docs/forwarding-refs.html) and props to the underlying DOM element.
 
-###### Class Components
+#### Class Components
 
 ```js
 class MyHandleComponent extends React.Component {
@@ -163,7 +202,7 @@ const MyHandle = React.forwardRef((props, ref) => <MyHandleComponent innerRef={r
 <Resizable handle={<MyHandle />} />
 ```
 
-###### Functional Components
+#### Functional Components
 
 ```js
 const MyHandle = React.forwardRef((props, ref) => {
@@ -174,7 +213,7 @@ const MyHandle = React.forwardRef((props, ref) => {
 <Resizable handle={<MyHandle />} />
 ```
 
-##### Custom Function
+### Custom Function
 
 You can define a function as a handle, which will simply receive an axis (see above `ResizeHandleAxis` type) and ref. This may be more clear to read, depending on your coding style.
 
@@ -183,5 +222,9 @@ const MyHandle = (props) => {
   return <div ref={props.innerRef} className="foo" {...props} />;
 };
 
-<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} {...props} />} />
-```
+<Resizable handle={(handleAxis, ref) => <MyHandle innerRef={ref} className={`foo handle-${handleAxis}`} />} />
+```
+
+## License
+
+MIT

package/build/propTypes.js

@@ -30,7 +30,8 @@ const resizableProps = exports.resizableProps = {
     children: _propTypes.default.node,
     disabled: _propTypes.default.bool,
     enableUserSelectHack: _propTypes.default.bool,
-    offsetParent: _propTypes.default.instanceOf(Element),
+    // #251: Check for Element to support SSR environments where DOM globals don't exist
+    offsetParent: typeof Element !== 'undefined' ? _propTypes.default.instanceOf(Element) : _propTypes.default.any,
     grid: _propTypes.default.arrayOf(_propTypes.default.number),
     handle: _propTypes.default.string,
     nodeRef: _propTypes.default.object,

package/build/propTypes.js.flow

@@ -76,7 +76,8 @@ export const resizableProps: Object = {
     children: PropTypes.node,
     disabled: PropTypes.bool,
     enableUserSelectHack: PropTypes.bool,
-    offsetParent: PropTypes.instanceOf(Element),
+    // #251: Check for Element to support SSR environments where DOM globals don't exist
+    offsetParent: typeof Element !== 'undefined' ? PropTypes.instanceOf(Element) : PropTypes.any,
     grid: PropTypes.arrayOf(PropTypes.number),
     handle: PropTypes.string,
     nodeRef: PropTypes.object,

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "react-resizable",
-  "version": "3.1.1",
+  "version": "3.1.3",
   "description": "A component that is resizable with handles.",
   "main": "index.js",
+  "files": [
+    "build/",
+    "css/",
+    "index.js"
+  ],
   "scripts": {
     "lint": "eslint lib/ __tests__/ setupTests/; flow",
     "test": "jest --coverage",
@@ -18,7 +23,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git@github.com:react-grid-layout/react-resizable.git"
+    "url": "git+ssh://git@github.com/react-grid-layout/react-resizable.git"
   },
   "keywords": [
     "react",

package/.babelrc

@@ -1,16 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "loose": true
-      }
-    ],
-    "@babel/preset-react",
-    "@babel/preset-flow"
-  ],
-  "plugins": [
-    ["@babel/plugin-proposal-class-properties", {"loose": true}],
-    "@babel/plugin-proposal-object-rest-spread"
-  ]
-}

package/.browserslistrc

@@ -1,3 +0,0 @@
-> 0.25%
-ie 11
-not dead

package/.claude/settings.local.json

@@ -1,18 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "WebFetch(domain:github.com)",
-      "Bash(npx jest:*)",
-      "Bash(git tag:*)",
-      "Bash(gh release create:*)",
-      "Bash(gh issue close:*)",
-      "Bash(gh search:*)",
-      "WebFetch(domain:raw.githubusercontent.com)",
-      "Bash(curl:*)"
-    ]
-  },
-  "enableAllProjectMcpServers": true,
-  "enabledMcpjsonServers": [
-    "messenger"
-  ]
-}

package/.flowconfig

@@ -1,25 +0,0 @@
-[version]
-^0.153.0
-
-[ignore]
-.*/node_modules/@babel.*
-.*/node_modules/.*/malformed_package_json/.*
-<PROJECT_ROOT>/build/.*
-
-[include]
-
-[libs]
-flow-typed
-
-[lints]
-all=warn
-implicit-inexact-object=error
-
-[options]
-suppress_type=$FlowFixMe
-experimental.strict_call_arity=true
-module.system.node.allow_root_relative=true
-module.use_strict=true
-server.max_workers=6
-exact_by_default=true
-sharedmemory.heap_size=3221225472

package/.packj.yaml

@@ -1,153 +0,0 @@
-#
-# 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