From 57c1450cf2e4dca9ad76ac39b105bb7d65b53a74 Mon Sep 17 00:00:00 2001
From: Daniel Kremniov <114945181+dkremniov-bc@users.noreply.github.com>
Date: Wed, 28 Feb 2024 18:36:08 +0200
Subject: [PATCH] feat: added CSP nonce prop (#2728)

---
 .yarn/versions/dd1eb89d.yml                   | 6 ++++++
 packages/react/scroll-area/src/ScrollArea.tsx | 7 +++++--
 packages/react/select/src/Select.tsx          | 7 +++++--
 3 files changed, 16 insertions(+), 4 deletions(-)
 create mode 100644 .yarn/versions/dd1eb89d.yml

diff --git a/.yarn/versions/dd1eb89d.yml b/.yarn/versions/dd1eb89d.yml
new file mode 100644
index 0000000000..d80ea517e6
--- /dev/null
+++ b/.yarn/versions/dd1eb89d.yml
@@ -0,0 +1,6 @@
+releases:
+  "@radix-ui/react-scroll-area": patch
+  "@radix-ui/react-select": patch
+
+declined:
+  - primitives
diff --git a/packages/react/scroll-area/src/ScrollArea.tsx b/packages/react/scroll-area/src/ScrollArea.tsx
index 237e595ec9..051379375b 100644
--- a/packages/react/scroll-area/src/ScrollArea.tsx
+++ b/packages/react/scroll-area/src/ScrollArea.tsx
@@ -136,11 +136,13 @@ ScrollArea.displayName = SCROLL_AREA_NAME;
 const VIEWPORT_NAME = 'ScrollAreaViewport';
 
 type ScrollAreaViewportElement = React.ElementRef<typeof Primitive.div>;
-interface ScrollAreaViewportProps extends PrimitiveDivProps {}
+interface ScrollAreaViewportProps extends PrimitiveDivProps {
+  nonce?: string;
+}
 
 const ScrollAreaViewport = React.forwardRef<ScrollAreaViewportElement, ScrollAreaViewportProps>(
   (props: ScopedProps<ScrollAreaViewportProps>, forwardedRef) => {
-    const { __scopeScrollArea, children, ...viewportProps } = props;
+    const { __scopeScrollArea, children, nonce, ...viewportProps } = props;
     const context = useScrollAreaContext(VIEWPORT_NAME, __scopeScrollArea);
     const ref = React.useRef<ScrollAreaViewportElement>(null);
     const composedRefs = useComposedRefs(forwardedRef, ref, context.onViewportChange);
@@ -151,6 +153,7 @@ const ScrollAreaViewport = React.forwardRef<ScrollAreaViewportElement, ScrollAre
           dangerouslySetInnerHTML={{
             __html: `[data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}`,
           }}
+          nonce={nonce}
         />
         <Primitive.div
           data-radix-scroll-area-viewport=""
diff --git a/packages/react/select/src/Select.tsx b/packages/react/select/src/Select.tsx
index 1d77e0ac2b..2707811b0e 100644
--- a/packages/react/select/src/Select.tsx
+++ b/packages/react/select/src/Select.tsx
@@ -1037,11 +1037,13 @@ const VIEWPORT_NAME = 'SelectViewport';
 
 type SelectViewportElement = React.ElementRef<typeof Primitive.div>;
 type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
-interface SelectViewportProps extends PrimitiveDivProps {}
+interface SelectViewportProps extends PrimitiveDivProps {
+  nonce?: string;
+}
 
 const SelectViewport = React.forwardRef<SelectViewportElement, SelectViewportProps>(
   (props: ScopedProps<SelectViewportProps>, forwardedRef) => {
-    const { __scopeSelect, ...viewportProps } = props;
+    const { __scopeSelect, nonce, ...viewportProps } = props;
     const contentContext = useSelectContentContext(VIEWPORT_NAME, __scopeSelect);
     const viewportContext = useSelectViewportContext(VIEWPORT_NAME, __scopeSelect);
     const composedRefs = useComposedRefs(forwardedRef, contentContext.onViewportChange);
@@ -1053,6 +1055,7 @@ const SelectViewport = React.forwardRef<SelectViewportElement, SelectViewportPro
           dangerouslySetInnerHTML={{
             __html: `[data-radix-select-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-select-viewport]::-webkit-scrollbar{display:none}`,
           }}
+          nonce={nonce}
         />
         <Collection.Slot scope={__scopeSelect}>
           <Primitive.div