From 7b1e660e97208b9b143840c44b9f9354c45047ad Mon Sep 17 00:00:00 2001
From: Joonas Rouhiainen <joonas.rouhiainen@reaktor.com>
Date: Tue, 3 Nov 2020 22:02:31 +0200
Subject: [PATCH] Take CSP style nonce as props, pass to react-virtualized
 AutoSizer

When using a Content-Security-Policy with a style-src rule that does
not include 'unsafe-inline', a nonce prop needs to be used with
react-virtualized as it appends inline <style> tags to the DOM.

Resolves https://github.com/frontend-collective/react-sortable-tree/issues/653
---
 README.md                  | 1 +
 src/react-sortable-tree.js | 7 ++++++-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 18e7f97a..ae041ed7 100644
--- a/README.md
+++ b/README.md
@@ -128,6 +128,7 @@ export default class Tree extends Component {
 | isVirtualized                  |      bool      | Set to false to disable virtualization. Defaults to `true`. **NOTE**: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | nodeContentRenderer            |      any       | Override the default component ([`NodeRendererDefault`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/node-renderer-default.js)) for rendering nodes (but keep the scaffolding generator). This is a last resort for customization - most custom styling should be able to be solved with `generateNodeProps`, a `theme` or CSS rules. If you must use it, is best to copy the component in `node-renderer-default.js` to use as a base, and customize as needed.                                                                                                                                                     |
 | placeholderRenderer            |      any       | Override the default placeholder component ([`PlaceholderRendererDefault`](https://github.com/frontend-collective/react-sortable-tree/blob/master/src/placeholder-renderer-default.js)) which is displayed when the tree is empty. This is an advanced option, and in most cases should probably be solved with a `theme` or custom CSS instead.                                                                                                                                                                                                                                                                                                   |
+| cssNonce                       |     string     | Content-Security-Policy nonce to use with inline `<style>` tags in virtualized mode.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 
 ## Data Helper Functions
 
diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js
index 54b4f771..0ae4fe08 100644
--- a/src/react-sortable-tree.js
+++ b/src/react-sortable-tree.js
@@ -613,6 +613,7 @@ class ReactSortableTree extends Component {
       dragDropManager,
       style,
       className,
+      cssNonce,
       innerStyle,
       rowHeight,
       isVirtualized,
@@ -687,7 +688,7 @@ class ReactSortableTree extends Component {
       const ScrollZoneVirtualList = this.scrollZoneVirtualList;
       // Render list with react-virtualized
       list = (
-        <AutoSizer>
+        <AutoSizer nonce={cssNonce}>
           {({ height, width }) => (
             <ScrollZoneVirtualList
               {...scrollToInfo}
@@ -835,6 +836,9 @@ ReactSortableTree.propTypes = {
   // NOTE: Auto-scrolling while dragging, and scrolling to the `searchFocusOffset` will be disabled.
   isVirtualized: PropTypes.bool,
 
+  // Content-Security-Policy nonce to use with inline `<style>` tags in virtualized mode.
+  cssNonce: PropTypes.string,
+
   treeNodeRenderer: PropTypes.func,
 
   // Override the default component for rendering nodes (but keep the scaffolding generator)
@@ -909,6 +913,7 @@ ReactSortableTree.defaultProps = {
   canDrop: null,
   canNodeHaveChildren: () => true,
   className: '',
+  cssNonce: null,
   dndType: null,
   generateNodeProps: null,
   getNodeKey: defaultGetNodeKey,