feat: added CSP nonce prop (radix-ui#2728)

Author: dkremniov-bc

.yarn/versions/dd1eb89d.yml

@@ -0,0 +1,6 @@
+releases:
+  "@radix-ui/react-scroll-area": patch
+  "@radix-ui/react-select": patch
+
+declined:
+  - primitives

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=""

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