emoji-picker-react 4.18.0 → 4.19.1

package/README.md

@@ -105,6 +105,7 @@ The following is a complete list of all props accepted by `EmojiPicker`.
 | `previewConfig` | `PreviewConfig`                                  | `{ showPreview: true }` | Configuration for the bottom preview bar.                                |
 | `getEmojiUrl`   | `(unified: string, style: EmojiStyle) => string` | -                       | Function to override the default CDN URL for emoji images.               |
 | `categoryIcons` | `CategoryIcons`                                  | `{}`                    | Map `Categories` enum values to custom React nodes for navigation icons. |
+| `nonce`         | `string`                                         | `undefined`             | Content Security Policy (CSP) nonce for the inline style tag.            |
 
 ### ❤️ Reactions Picker Mode
 
@@ -141,6 +142,14 @@ When passing `customEmojis`, use this format:
 
 ```
 
+### Content Security Policy (CSP)
+
+If your site has a CSP that blocks inline styles, you can pass a `nonce` to the `EmojiPicker` component. This nonce will be applied to the inline `<style>` tag.
+
+```jsx
+<EmojiPicker nonce="your-nonce-value" />
+```
+
 ### Preview Config
 
 Control the footer preview area using `previewConfig`:

package/dist/Stylesheet/stylesheet.d.ts

@@ -9,7 +9,9 @@ export declare const stylesheet: {
     isApplied: () => boolean;
 };
 export declare const commonStyles: Record<never, Set<string>>;
-export declare const PickerStyleTag: React.NamedExoticComponent<object>;
+export declare const PickerStyleTag: React.NamedExoticComponent<{
+    nonce?: string | undefined;
+}>;
 export declare const commonInteractionStyles: Record<never, Set<string>>;
 export declare function darkMode(key: string, value: Styles): {
     '.epr-dark-theme': {

package/dist/config/config.d.ts

@@ -41,6 +41,7 @@ export declare type PickerConfigInternal = {
     hiddenEmojis: string[];
     emojiData?: EmojiData;
     categoryIcons: CategoryIcons;
+    nonce?: string;
 };
 export declare type PreviewConfig = {
     defaultEmoji: string;

package/dist/emoji-picker-react.cjs.development.js

@@ -109,8 +109,10 @@ var commonStyles = /*#__PURE__*/stylesheet.create({
     '.': ClassNames.hidden
   }, hidden)
 });
-var PickerStyleTag = /*#__PURE__*/React.memo(function PickerStyleTag() {
+var PickerStyleTag = /*#__PURE__*/React.memo(function PickerStyleTag(_ref) {
+  var nonce = _ref.nonce;
   return React.createElement("style", {
+    nonce: nonce,
     suppressHydrationWarning: true,
     dangerouslySetInnerHTML: {
       __html: stylesheet.getStyle()
@@ -468,7 +470,8 @@ function basePickerConfig() {
     allowExpandReactions: true,
     hiddenEmojis: [],
     emojiData: undefined,
-    categoryIcons: {}
+    categoryIcons: {},
+    nonce: undefined
   };
 }
 var basePreviewConfig = {
@@ -25976,7 +25979,9 @@ function Header() {
 }
 
 function EmojiPicker(props) {
-  return React.createElement(ElementRefContextProvider, null, React.createElement(PickerStyleTag, null), React.createElement(PickerConfigProvider, Object.assign({}, props), React.createElement(PickerDataProvider, null, React.createElement(ContentControl, null))));
+  return React.createElement(ElementRefContextProvider, null, React.createElement(PickerStyleTag, {
+    nonce: props.nonce
+  }), React.createElement(PickerConfigProvider, Object.assign({}, props), React.createElement(PickerDataProvider, null, React.createElement(ContentControl, null))));
 }
 function ContentControl() {
   var _useReactionsModeStat = useReactionsModeState(),