emoji-picker-react 5.1.0 → 5.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/README.md +29 -1
  2. package/dist/DomUtils/classNames.d.ts +0 -1
  3. package/dist/DomUtils/keyboardNavigation.d.ts +5 -1
  4. package/dist/DomUtils/selectors.d.ts +2 -2
  5. package/dist/config/defaultPickerConfiguration.d.ts +1 -1
  6. package/dist/data/index.js +1 -1
  7. package/dist/data/skinToneVariations.js +2 -2
  8. package/dist/esm/chunks/chunk-6LOWV5AK.mjs +144 -0
  9. package/dist/esm/chunks/chunk-DDDACPJK.mjs +6825 -0
  10. package/dist/esm/chunks/chunk-G75AG4FD.mjs +6 -0
  11. package/dist/esm/chunks/chunk-ZOAKI5M6.mjs +8025 -18
  12. package/dist/esm/chunks/deferredPicker-A6MWDDKH.mjs +113 -0
  13. package/dist/esm/chunks/emojis-VTEL5M5C.mjs +3 -6
  14. package/dist/esm/data.mjs +6 -9
  15. package/dist/esm/index.mjs +226 -333
  16. package/dist/esm/primitives/index.mjs +5 -65
  17. package/dist/hooks/preloadEmoji.d.ts +0 -4
  18. package/dist/hooks/searchHighlight.d.ts +3 -5
  19. package/dist/hooks/useCategoryHeight.d.ts +2 -1
  20. package/dist/hooks/useEmojiVirtualization.d.ts +1 -0
  21. package/dist/index.js +1 -1
  22. package/dist/primitives/Root.d.ts +2 -2
  23. package/dist/primitives/index.d.mts +2 -2
  24. package/dist/primitives/index.d.ts +2 -2
  25. package/dist/primitives/index.js +1 -1
  26. package/dist/virtualization/virtualizationHelpers.d.ts +2 -0
  27. package/llms-full.txt +181 -21
  28. package/llms.txt +1 -0
  29. package/package.json +1 -1
  30. package/dist/esm/chunks/chunk-3NQHPTFV.mjs +0 -9
  31. package/dist/esm/chunks/chunk-FJVAS6PR.mjs +0 -214
  32. package/dist/esm/chunks/chunk-L4H5QY3X.mjs +0 -9509
  33. package/dist/esm/chunks/searchHighlight-7NH7OJ5Q.mjs +0 -134
package/dist/esm/index.mjs CHANGED
@@ -1,48 +1,10 @@
1
1
  "use client";
2
- import {
3
- Categories,
4
- CategoryNav,
5
- DEFAULT_PICKER_HEIGHT,
6
- DEFAULT_PICKER_WIDTH,
7
- DefaultPickerConfiguration,
8
- EmojiStyle,
9
- Empty,
10
- List,
11
- LoadError,
12
- Loading,
13
- MutableConfigProvider,
14
- Panel,
15
- Preview,
16
- Reactions,
17
- Relative,
18
- Root,
19
- Search,
20
- SkinTone,
21
- SkinTonePickerLocation,
22
- SkinTones,
23
- SuggestionMode,
24
- Theme,
25
- ViewOnlyEmoji,
26
- Viewport,
27
- commonInteractionStyles,
28
- compareConfig,
29
- cx,
30
- defaultPickerTokens,
31
- emojiByUnified,
32
- isPickerBehaviorProp,
33
- resolveEmojiStyle,
34
- resolveSkinTonePickerLocation,
35
- stylesheet,
36
- useDefaultAppearance,
37
- useDefineMutableConfig,
38
- usePreviewConfig,
39
- useSearchDisabledConfig,
40
- useSkinTonePickerLocationConfig,
41
- useSkinTonesDisabledConfig,
42
- validColumns
43
- } from "./chunks/chunk-L4H5QY3X.mjs";
44
- import "./chunks/chunk-3NQHPTFV.mjs";
45
- import "./chunks/chunk-FJVAS6PR.mjs";
2
+ import { Categories, CategoryNav, DEFAULT_PICKER_HEIGHT, DEFAULT_PICKER_WIDTH, DefaultPickerConfiguration, EmojiStyle, Empty, List, LoadError, Loading, MutableConfigProvider, Panel, Preview, Reactions, Relative, Root, Search, SkinTone, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme, ViewOnlyEmoji, Viewport, commonInteractionStyles, compareConfig, cx, defaultPickerTokens, emojiByUnified, isPickerBehaviorProp, resolveEmojiStyle, resolveSkinTonePickerLocation, stylesheet, useDefaultAppearance, useDefineMutableConfig, usePreviewConfig, useSearchDisabledConfig, useSkinTonePickerLocationConfig, useSkinTonesDisabledConfig, validColumns } from "./chunks/chunk-DDDACPJK.mjs";
3
+
4
+ import "./chunks/chunk-G75AG4FD.mjs";
5
+
6
+ import "./chunks/chunk-6LOWV5AK.mjs";
7
+
46
8
  import "./chunks/chunk-ZOAKI5M6.mjs";
47
9
 
48
10
  // src/index.tsx
@@ -56,328 +18,259 @@ import * as React from "react";
56
18
 
57
19
  // src/hooks/useShouldShowSkinTonePicker.ts
58
20
  function useIsSkinToneInSearch() {
59
- const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
60
- return skinTonePickerLocationConfig === "SEARCH" /* SEARCH */;
21
+ return "SEARCH" /* SEARCH */ === useSkinTonePickerLocationConfig();
61
22
  }
23
+
62
24
  function useIsSkinToneInPreview() {
63
- const skinTonePickerLocationConfig = useSkinTonePickerLocationConfig();
64
- return skinTonePickerLocationConfig === "PREVIEW" /* PREVIEW */;
25
+ return "PREVIEW" /* PREVIEW */ === useSkinTonePickerLocationConfig();
65
26
  }
66
27
 
67
28
  // src/components/header/Header.tsx
68
29
  function Header() {
69
- const appearance = useDefaultAppearance();
70
- const searchDisabled = useSearchDisabledConfig();
71
- const skinTonesDisabled = useSkinTonesDisabledConfig();
72
- const toneInSearch = useIsSkinToneInSearch();
73
- return /* @__PURE__ */ React.createElement(
74
- Relative,
75
- {
76
- className: cx(
77
- "epr-header",
78
- appearance && commonInteractionStyles.hiddenOnReactions
79
- )
80
- },
81
- !searchDisabled && /* @__PURE__ */ React.createElement(Search, null, !skinTonesDisabled && toneInSearch && /* @__PURE__ */ React.createElement(SkinTone, null)),
82
- /* @__PURE__ */ React.createElement(CategoryNav, null)
83
- );
30
+ const appearance = useDefaultAppearance(), searchDisabled = useSearchDisabledConfig(), skinTonesDisabled = useSkinTonesDisabledConfig(), toneInSearch = useIsSkinToneInSearch();
31
+ /* @__PURE__ */
32
+ return React.createElement(Relative, {
33
+ className: cx("epr-header", appearance && commonInteractionStyles.hiddenOnReactions)
34
+ }, !searchDisabled && /* @__PURE__ */ React.createElement(Search, null, !skinTonesDisabled && toneInSearch && /* @__PURE__ */ React.createElement(SkinTone, null)),
35
+ /* @__PURE__ */ React.createElement(CategoryNav, null));
84
36
  }
85
37
 
86
38
  // src/components/main/defaultAppearance.tsx
87
39
  import * as React2 from "react";
40
+
88
41
  function defaultRootClassName(theme, className, unstyled) {
89
- if (unstyled) {
90
- return cx(className);
91
- }
92
- return cx(
93
- styles.main,
94
- styles.baseVariables,
95
- theme === "dark" /* DARK */ && styles.darkTheme,
96
- theme === "auto" /* AUTO */ && styles.autoThemeDark,
97
- className
98
- );
42
+ return unstyled ? cx(className) : cx(styles.main, styles.baseVariables, "dark" /* DARK */ === theme && styles.darkTheme, "auto" /* AUTO */ === theme && styles.autoThemeDark, className);
99
43
  }
100
- function defaultRootStyle({
101
- width,
102
- height,
103
- style,
104
- columns
105
- }) {
106
- return {
107
- // v4-compatible default dimensions; consumer style and explicit
108
- // width/height props both override them. With `columns`, the width
109
- // fits the columns instead.
110
- ...columns === void 0 && { width: getDimension(DEFAULT_PICKER_WIDTH) },
111
- height: getDimension(DEFAULT_PICKER_HEIGHT),
112
- ...style,
113
- ...width !== void 0 ? { width: getDimension(width) } : {},
114
- ...height !== void 0 ? { height: getDimension(height) } : {}
115
- };
44
+
45
+ function defaultRootStyle({width, height, style, columns}) {
46
+ return {
47
+ // v4-compatible default dimensions; consumer style and explicit
48
+ // width/height props both override them. With `columns`, the width
49
+ // fits the columns instead.
50
+ ...void 0 === columns && {
51
+ width: getDimension(DEFAULT_PICKER_WIDTH)
52
+ },
53
+ height: getDimension(DEFAULT_PICKER_HEIGHT),
54
+ ...style,
55
+ ...void 0 !== width ? {
56
+ width: getDimension(width)
57
+ } : {},
58
+ ...void 0 !== height ? {
59
+ height: getDimension(height)
60
+ } : {}
61
+ };
116
62
  }
63
+
117
64
  function getDimension(dimension) {
118
- return typeof dimension === "number" ? `${dimension}px` : dimension;
65
+ return "number" == typeof dimension ? `${dimension}px` : dimension;
119
66
  }
67
+
120
68
  var darkThemeBaseVariables = {
121
- "--epr-dark": "#000",
122
- "--epr-dark-emoji-variation-picker-bg-color": "var(--epr-dark)",
123
- "--epr-dark-highlight-color": "#c0c0c0",
124
- "--epr-dark-text-color": "var(--epr-highlight-color)",
125
- "--epr-dark-hover-bg-color": "#363636f6",
126
- "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
127
- "--epr-dark-focus-bg-color": "#474747",
128
- "--epr-dark-search-input-bg-color": "#333333",
129
- "--epr-dark-category-label-bg-color": "#222222e6",
130
- "--epr-dark-picker-border-color": "#151617",
131
- "--epr-dark-bg-color": "#222222",
132
- "--epr-dark-reactions-bg-color": "#22222290",
133
- "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
134
- "--epr-dark-emoji-variation-indicator-color": "#444",
135
- "--epr-dark-category-icon-active-color": "#6AA9DD",
136
- "--epr-dark-category-icon-inactive-color": "#C0C0BF",
137
- "--epr-dark-skin-tone-picker-menu-color": "#22222295",
138
- "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
139
- "--epr-dark-skin-tone-inner-border-color": "#00000000"
140
- };
141
- var DarkTheme = {
142
- "--epr-emoji-variation-picker-bg-color": "var(--epr-dark-emoji-variation-picker-bg-color)",
143
- "--epr-hover-bg-color-reduced-opacity": "var(--epr-dark-hover-bg-color-reduced-opacity)",
144
- "--epr-highlight-color": "var(--epr-dark-highlight-color)",
145
- "--epr-text-color": "var(--epr-dark-text-color)",
146
- "--epr-hover-bg-color": "var(--epr-dark-hover-bg-color)",
147
- "--epr-focus-bg-color": "var(--epr-dark-focus-bg-color)",
148
- "--epr-search-input-bg-color": "var(--epr-dark-search-input-bg-color)",
149
- "--epr-category-label-bg-color": "var(--epr-dark-category-label-bg-color)",
150
- "--epr-picker-border-color": "var(--epr-dark-picker-border-color)",
151
- "--epr-bg-color": "var(--epr-dark-bg-color)",
152
- "--epr-reactions-bg-color": "var(--epr-dark-reactions-bg-color)",
153
- "--epr-search-input-bg-color-active": "var(--epr-dark-search-input-bg-color-active)",
154
- "--epr-emoji-variation-indicator-color": "var(--epr-dark-emoji-variation-indicator-color)",
155
- "--epr-category-icon-active-color": "var(--epr-dark-category-icon-active-color)",
156
- "--epr-category-icon-inactive-color": "var(--epr-dark-category-icon-inactive-color)",
157
- "--epr-skin-tone-picker-menu-color": "var(--epr-dark-skin-tone-picker-menu-color)",
158
- "--epr-skin-tone-outer-border-color": "var(--epr-dark-skin-tone-outer-border-color)",
159
- "--epr-skin-tone-inner-border-color": "var(--epr-dark-skin-tone-inner-border-color)",
160
- "--epr-dark-text-color": "var(--epr-highlight-color)",
161
- "--epr-dark-hover-bg-color": "#363636f6",
162
- "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
163
- "--epr-dark-focus-bg-color": "#474747",
164
- "--epr-dark-search-input-bg-color": "#333333",
165
- "--epr-dark-category-label-bg-color": "#222222e6",
166
- "--epr-dark-picker-border-color": "#151617",
167
- "--epr-dark-bg-color": "#222222",
168
- "--epr-dark-reactions-bg-color": "#22222290",
169
- "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
170
- "--epr-dark-emoji-variation-indicator-color": "#444",
171
- "--epr-dark-category-icon-active-color": "#6AA9DD",
172
- "--epr-dark-category-icon-inactive-color": "#C0C0BF",
173
- "--epr-dark-skin-tone-picker-menu-color": "#22222295",
174
- "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
175
- "--epr-dark-skin-tone-inner-border-color": "#00000000"
176
- };
177
- var styles = /* @__PURE__ */ (() => stylesheet.create({
178
- main: {
179
- ".": ["epr-main", "EmojiPickerReact" /* emojiPicker */],
180
- position: "relative",
181
- display: "flex",
182
- flexDirection: "column",
183
- borderWidth: "1px",
184
- borderStyle: "solid",
185
- borderRadius: "var(--epr-picker-border-radius)",
186
- borderColor: "var(--epr-picker-border-color)",
187
- backgroundColor: "var(--epr-bg-color)",
188
- overflow: "hidden",
189
- transition: "height 0.3s ease-in-out, background-color 0.1s ease-in-out",
190
- "*": {
191
- boxSizing: "border-box",
192
- // Overridable without a specificity fight (v4 hard-coded sans-serif).
193
- fontFamily: "var(--epr-font-family, sans-serif)"
194
- }
195
- },
196
- baseVariables: {
197
- // Single-sourced from the public token preset: the default tree and
198
- // bare-Root consumers share the same documented defaults. The private
199
- // dark-theme values ride along (referenced only by the DarkTheme
200
- // overrides below); they stay out of the shared preset so the
201
- // primitives bundle keeps its separation marker scan clean.
202
- "--": { ...defaultPickerTokens, ...darkThemeBaseVariables }
203
- },
204
- // color-scheme makes native parts (scrollbars, the search field's
205
- // controls) render dark too; without it they stay light on a dark picker.
206
- autoThemeDark: {
207
- ".": "epr-auto-theme" /* autoTheme */,
208
- "@media (prefers-color-scheme: dark)": {
209
- "--": DarkTheme,
210
- colorScheme: "dark"
69
+ "--epr-dark": "#000",
70
+ "--epr-dark-emoji-variation-picker-bg-color": "var(--epr-dark)",
71
+ "--epr-dark-highlight-color": "#c0c0c0",
72
+ "--epr-dark-text-color": "var(--epr-highlight-color)",
73
+ "--epr-dark-hover-bg-color": "#363636f6",
74
+ "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
75
+ "--epr-dark-focus-bg-color": "#474747",
76
+ "--epr-dark-search-input-bg-color": "#333333",
77
+ "--epr-dark-category-label-bg-color": "#222222e6",
78
+ "--epr-dark-picker-border-color": "#151617",
79
+ "--epr-dark-bg-color": "#222222",
80
+ "--epr-dark-reactions-bg-color": "#22222290",
81
+ "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
82
+ "--epr-dark-emoji-variation-indicator-color": "#444",
83
+ "--epr-dark-category-icon-active-color": "#6AA9DD",
84
+ "--epr-dark-category-icon-inactive-color": "#C0C0BF",
85
+ "--epr-dark-skin-tone-picker-menu-color": "#22222295",
86
+ "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
87
+ "--epr-dark-skin-tone-inner-border-color": "#00000000"
88
+ }, DarkTheme = {
89
+ "--epr-emoji-variation-picker-bg-color": "var(--epr-dark-emoji-variation-picker-bg-color)",
90
+ "--epr-hover-bg-color-reduced-opacity": "var(--epr-dark-hover-bg-color-reduced-opacity)",
91
+ "--epr-highlight-color": "var(--epr-dark-highlight-color)",
92
+ "--epr-text-color": "var(--epr-dark-text-color)",
93
+ "--epr-hover-bg-color": "var(--epr-dark-hover-bg-color)",
94
+ "--epr-focus-bg-color": "var(--epr-dark-focus-bg-color)",
95
+ "--epr-search-input-bg-color": "var(--epr-dark-search-input-bg-color)",
96
+ "--epr-category-label-bg-color": "var(--epr-dark-category-label-bg-color)",
97
+ "--epr-picker-border-color": "var(--epr-dark-picker-border-color)",
98
+ "--epr-bg-color": "var(--epr-dark-bg-color)",
99
+ "--epr-reactions-bg-color": "var(--epr-dark-reactions-bg-color)",
100
+ "--epr-search-input-bg-color-active": "var(--epr-dark-search-input-bg-color-active)",
101
+ "--epr-emoji-variation-indicator-color": "var(--epr-dark-emoji-variation-indicator-color)",
102
+ "--epr-category-icon-active-color": "var(--epr-dark-category-icon-active-color)",
103
+ "--epr-category-icon-inactive-color": "var(--epr-dark-category-icon-inactive-color)",
104
+ "--epr-skin-tone-picker-menu-color": "var(--epr-dark-skin-tone-picker-menu-color)",
105
+ "--epr-skin-tone-outer-border-color": "var(--epr-dark-skin-tone-outer-border-color)",
106
+ "--epr-skin-tone-inner-border-color": "var(--epr-dark-skin-tone-inner-border-color)",
107
+ "--epr-dark-text-color": "var(--epr-highlight-color)",
108
+ "--epr-dark-hover-bg-color": "#363636f6",
109
+ "--epr-dark-hover-bg-color-reduced-opacity": "#36363680",
110
+ "--epr-dark-focus-bg-color": "#474747",
111
+ "--epr-dark-search-input-bg-color": "#333333",
112
+ "--epr-dark-category-label-bg-color": "#222222e6",
113
+ "--epr-dark-picker-border-color": "#151617",
114
+ "--epr-dark-bg-color": "#222222",
115
+ "--epr-dark-reactions-bg-color": "#22222290",
116
+ "--epr-dark-search-input-bg-color-active": "var(--epr-dark)",
117
+ "--epr-dark-emoji-variation-indicator-color": "#444",
118
+ "--epr-dark-category-icon-active-color": "#6AA9DD",
119
+ "--epr-dark-category-icon-inactive-color": "#C0C0BF",
120
+ "--epr-dark-skin-tone-picker-menu-color": "#22222295",
121
+ "--epr-dark-skin-tone-outer-border-color": "var(--epr-dark-picker-border-color)",
122
+ "--epr-dark-skin-tone-inner-border-color": "#00000000"
123
+ }, styles = /* @__PURE__ */ (() => stylesheet.create({
124
+ main: {
125
+ ".": [ "epr-main", "EmojiPickerReact" /* emojiPicker */ ],
126
+ position: "relative",
127
+ display: "flex",
128
+ flexDirection: "column",
129
+ borderWidth: "1px",
130
+ borderStyle: "solid",
131
+ borderRadius: "var(--epr-picker-border-radius)",
132
+ borderColor: "var(--epr-picker-border-color)",
133
+ backgroundColor: "var(--epr-bg-color)",
134
+ overflow: "hidden",
135
+ transition: "height 0.3s ease-in-out, background-color 0.1s ease-in-out",
136
+ fontFamily: "var(--epr-font-family, inherit)",
137
+ "*": {
138
+ boxSizing: "border-box",
139
+ // Overridable without a specificity fight (v4 hard-coded sans-serif).
140
+ fontFamily: "inherit"
141
+ }
142
+ },
143
+ baseVariables: {
144
+ // Single-sourced from the public token preset: the default tree and
145
+ // bare-Root consumers share the same documented defaults. The private
146
+ // dark-theme values ride along (referenced only by the DarkTheme
147
+ // overrides below); they stay out of the shared preset so the
148
+ // primitives bundle keeps its separation marker scan clean.
149
+ "--": {
150
+ ...defaultPickerTokens,
151
+ ...darkThemeBaseVariables
152
+ }
153
+ },
154
+ // color-scheme makes native parts (scrollbars, the search field's
155
+ // controls) render dark too; without it they stay light on a dark picker.
156
+ autoThemeDark: {
157
+ ".": "epr-auto-theme" /* autoTheme */ ,
158
+ "@media (prefers-color-scheme: dark)": {
159
+ "--": DarkTheme,
160
+ colorScheme: "dark"
161
+ }
162
+ },
163
+ darkTheme: {
164
+ ".": "epr-dark-theme" /* darkTheme */ ,
165
+ "--": DarkTheme,
166
+ colorScheme: "dark"
211
167
  }
212
- },
213
- darkTheme: {
214
- ".": "epr-dark-theme" /* darkTheme */,
215
- "--": DarkTheme,
216
- colorScheme: "dark"
217
- }
218
- }))();
168
+ }))(), NATIVE_ATTRIBUTES = /* @__PURE__ */ new Set([ "id", "title", "lang", "dir" ]);
219
169
 
220
- // src/EmojiPickerReact.tsx
221
- function EmojiPicker(props) {
222
- const rootInput = props;
223
- const {
224
- theme: legacyTheme,
225
- colorScheme,
226
- width,
227
- height,
228
- className,
229
- style,
230
- unstyled,
231
- components,
232
- open,
233
- searchDisabled = false,
234
- skinTonesDisabled = false,
235
- skinTonePickerLocation = "SEARCH" /* SEARCH */,
236
- previewConfig,
237
- ...rest
238
- } = rootInput;
239
- const theme = colorScheme ?? legacyTheme;
240
- const showPreview = previewConfig?.showPreview ?? true;
241
- const resolvedLocation = resolveSkinTonePickerLocation(
242
- skinTonePickerLocation,
243
- searchDisabled,
244
- showPreview
245
- );
246
- const defaultConfiguration = {
247
- searchDisabled,
248
- skinTonesDisabled,
249
- skinTonePickerLocation: resolvedLocation,
250
- previewConfig,
251
- // Closed, as in v4, keeps the picker's state (skin tone, search,
252
- // reactions mode) and renders nothing.
253
- open: open !== false
254
- };
255
- const { behaviorProps, unknownProps } = pickBehaviorProps(rest);
256
- useUnknownPropsWarning(unknownProps);
257
- return /* @__PURE__ */ React3.createElement(DefaultPickerConfiguration.Provider, { value: defaultConfiguration }, /* @__PURE__ */ React3.createElement(
258
- Root,
259
- {
260
- appearance: unstyled ? "none" : "default",
261
- components,
262
- ...behaviorProps,
263
- className: defaultRootClassName(theme, className, unstyled),
264
- style: defaultRootStyle({
265
- width,
266
- height,
267
- style,
268
- columns: validColumns(props.columns)
269
- })
270
- },
271
- /* @__PURE__ */ React3.createElement(Reactions, null),
272
- /* @__PURE__ */ React3.createElement(Panel, null, CONTENT)
273
- ));
274
- }
275
- var NATIVE_ATTRIBUTES = /* @__PURE__ */ new Set([
276
- "id",
277
- "title",
278
- "lang",
279
- "dir"
280
- ]);
281
170
  function isNativeAttribute(key) {
282
- return NATIVE_ATTRIBUTES.has(key) || key.startsWith("aria-") || key.startsWith("data-");
171
+ return NATIVE_ATTRIBUTES.has(key) || key.startsWith("aria-") || key.startsWith("data-");
283
172
  }
173
+
284
174
  function pickBehaviorProps(props) {
285
- const behaviorProps = {};
286
- const unknown = [];
287
- const values = props;
288
- for (const key of Object.keys(values)) {
289
- if (isPickerBehaviorProp(key) || isNativeAttribute(key)) {
290
- behaviorProps[key] = values[key];
291
- } else {
292
- unknown.push(key);
293
- }
294
- }
295
- return { behaviorProps, unknownProps: unknown.join(", ") };
296
- }
297
- var useUnknownPropsWarning = process.env.NODE_ENV === "production" ? () => void 0 : useDevUnknownPropsWarning;
298
- function useDevUnknownPropsWarning(unknownProps) {
299
- React3.useEffect(() => {
300
- if (unknownProps) {
301
- console.warn(
302
- `[emoji-picker-react] Ignoring unknown prop(s): ${unknownProps}. See docs/v5/MIGRATION.md for removed props.`
303
- );
304
- }
305
- }, [unknownProps]);
175
+ const behaviorProps = {}, unknown = [], values = props;
176
+ for (const key of Object.keys(values)) isPickerBehaviorProp(key) || isNativeAttribute(key) ? behaviorProps[key] = values[key] : unknown.push(key);
177
+ return {
178
+ behaviorProps,
179
+ unknownProps: unknown.join(", ")
180
+ };
306
181
  }
307
- function ContentControl() {
308
- const showPreview = usePreviewConfig().showPreview;
309
- const skinTonesDisabled = useSkinTonesDisabledConfig();
310
- const toneInPreview = useIsSkinToneInPreview();
311
- return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Header, null), /* @__PURE__ */ React3.createElement(Viewport, null, /* @__PURE__ */ React3.createElement(List, null), /* @__PURE__ */ React3.createElement(Empty, null), /* @__PURE__ */ React3.createElement(Loading, null), /* @__PURE__ */ React3.createElement(LoadError, null)), showPreview && /* @__PURE__ */ React3.createElement(Preview, null, !skinTonesDisabled && toneInPreview && /* @__PURE__ */ React3.createElement(SkinTone, { orientation: "vertical" })));
312
- }
313
- var CONTENT = /* @__PURE__ */ React3.createElement(ContentControl);
314
- var EmojiPickerReact_default = /* @__PURE__ */ React3.memo(EmojiPicker, compareConfig);
182
+
183
+ var useUnknownPropsWarning = "production" === process.env.NODE_ENV ? () => {} : function useDevUnknownPropsWarning(unknownProps) {
184
+ React3.useEffect((() => {
185
+ unknownProps && console.warn(`[emoji-picker-react] Ignoring unknown prop(s): ${unknownProps}. See docs/v5/MIGRATION.md for removed props.`);
186
+ }), [ unknownProps ]);
187
+ }, CONTENT = /* @__PURE__ */ React3.createElement((function ContentControl() {
188
+ const showPreview = usePreviewConfig().showPreview, skinTonesDisabled = useSkinTonesDisabledConfig(), toneInPreview = useIsSkinToneInPreview();
189
+ /* @__PURE__ */
190
+ return React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Header, null), /* @__PURE__ */ React3.createElement(Viewport, null, /* @__PURE__ */ React3.createElement(List, null), /* @__PURE__ */ React3.createElement(Empty, null), /* @__PURE__ */ React3.createElement(Loading, null), /* @__PURE__ */ React3.createElement(LoadError, null)), showPreview && /* @__PURE__ */ React3.createElement(Preview, null, !skinTonesDisabled && toneInPreview && /* @__PURE__ */ React3.createElement(SkinTone, {
191
+ orientation: "vertical"
192
+ })));
193
+ })), EmojiPickerReact_default = /* @__PURE__ */ React3.memo((
194
+ // src/EmojiPickerReact.tsx
195
+ function EmojiPicker(props) {
196
+ const rootInput = props, {theme: legacyTheme, colorScheme, width, height, className, style, unstyled, components, open, searchDisabled = !1, skinTonesDisabled = !1, skinTonePickerLocation = "SEARCH" /* SEARCH */ , previewConfig, ...rest} = rootInput, theme = colorScheme ?? legacyTheme, defaultConfiguration = {
197
+ searchDisabled,
198
+ skinTonesDisabled,
199
+ skinTonePickerLocation: resolveSkinTonePickerLocation(skinTonePickerLocation, searchDisabled, previewConfig?.showPreview ?? !0),
200
+ previewConfig,
201
+ // Closed, as in v4, keeps the picker's state (skin tone, search,
202
+ // reactions mode) and renders nothing.
203
+ open: !1 !== open
204
+ }, {behaviorProps, unknownProps} = pickBehaviorProps(rest);
205
+ return useUnknownPropsWarning(unknownProps), /* @__PURE__ */ React3.createElement(DefaultPickerConfiguration.Provider, {
206
+ value: defaultConfiguration
207
+ }, /* @__PURE__ */ React3.createElement(Root, {
208
+ appearance: unstyled ? "none" : "default",
209
+ components,
210
+ ...behaviorProps,
211
+ className: defaultRootClassName(theme, className, unstyled),
212
+ style: defaultRootStyle({
213
+ width,
214
+ height,
215
+ style,
216
+ columns: validColumns(props.columns)
217
+ })
218
+ },
219
+ /* @__PURE__ */ React3.createElement(Reactions, null),
220
+ /* @__PURE__ */ React3.createElement(Panel, null, CONTENT)));
221
+ }), compareConfig);
315
222
 
316
223
  // src/components/ErrorBoundary.tsx
317
224
  import * as React4 from "react";
225
+
318
226
  var ErrorBoundary = class extends React4.Component {
319
- constructor(props) {
320
- super(props);
321
- this.state = { hasError: false };
322
- }
323
- static getDerivedStateFromError() {
324
- return { hasError: true };
325
- }
326
- componentDidCatch(error, errorInfo) {
327
- console.error("Emoji Picker React failed to render:", error, errorInfo);
328
- }
329
- render() {
330
- if (this.state.hasError) {
331
- return null;
227
+ constructor(props) {
228
+ super(props), this.state = {
229
+ hasError: !1
230
+ };
231
+ }
232
+ static getDerivedStateFromError() {
233
+ return {
234
+ hasError: !0
235
+ };
236
+ }
237
+ componentDidCatch(error, errorInfo) {
238
+ console.error("Emoji Picker React failed to render:", error, errorInfo);
239
+ }
240
+ render() {
241
+ return this.state.hasError ? null : this.props.children;
332
242
  }
333
- return this.props.children;
334
- }
335
243
  };
336
244
 
337
245
  // src/components/emoji/ExportedEmoji.tsx
338
246
  import * as React5 from "react";
339
- function ExportedEmoji({
340
- unified,
341
- size = 32,
342
- emojiStyle,
343
- lazyLoad = false,
344
- getEmojiUrl,
345
- emojiUrl
346
- }) {
347
- if (!unified && !emojiUrl && !getEmojiUrl) {
348
- return null;
349
- }
350
- return /* @__PURE__ */ React5.createElement(
351
- ViewOnlyEmoji,
352
- {
353
- unified,
354
- size,
355
- emojiStyle: resolveEmojiStyle(emojiStyle, emojiUrl || getEmojiUrl),
356
- lazyLoad,
357
- getEmojiUrl: emojiUrl ? () => emojiUrl : getEmojiUrl
358
- }
359
- );
247
+
248
+ function ExportedEmoji({unified, size = 32, emojiStyle, lazyLoad = !1, getEmojiUrl, emojiUrl}) {
249
+ return unified || emojiUrl || getEmojiUrl ? /* @__PURE__ */ React5.createElement(ViewOnlyEmoji, {
250
+ unified,
251
+ size,
252
+ emojiStyle: resolveEmojiStyle(emojiStyle, emojiUrl || getEmojiUrl),
253
+ lazyLoad,
254
+ getEmojiUrl: emojiUrl ? () => emojiUrl : getEmojiUrl
255
+ }) : null;
360
256
  }
361
257
 
362
258
  // src/index.tsx
363
259
  function EmojiPicker2(props) {
364
- const MutableConfigRef = useDefineMutableConfig({
365
- onEmojiClick: props.onEmojiClick,
366
- onReactionClick: props.onReactionClick,
367
- onSkinToneChange: props.onSkinToneChange,
368
- onSearchChange: props.onSearchChange,
369
- onReactionsModeChange: props.onReactionsModeChange
370
- });
371
- return /* @__PURE__ */ React6.createElement(ErrorBoundary, null, /* @__PURE__ */ React6.createElement(MutableConfigProvider, { value: MutableConfigRef, inheritToRoot: true }, /* @__PURE__ */ React6.createElement(EmojiPickerReact_default, { ...props })));
260
+ const MutableConfigRef = useDefineMutableConfig({
261
+ onEmojiClick: props.onEmojiClick,
262
+ onReactionClick: props.onReactionClick,
263
+ onSkinToneChange: props.onSkinToneChange,
264
+ onSearchChange: props.onSearchChange,
265
+ onReactionsModeChange: props.onReactionsModeChange
266
+ });
267
+ /* @__PURE__ */
268
+ return React6.createElement(ErrorBoundary, null, /* @__PURE__ */ React6.createElement(MutableConfigProvider, {
269
+ value: MutableConfigRef,
270
+ inheritToRoot: !0
271
+ }, /* @__PURE__ */ React6.createElement(EmojiPickerReact_default, {
272
+ ...props
273
+ })));
372
274
  }
373
- export {
374
- Categories,
375
- ExportedEmoji as Emoji,
376
- EmojiStyle,
377
- SkinTonePickerLocation,
378
- SkinTones,
379
- SuggestionMode,
380
- Theme,
381
- EmojiPicker2 as default,
382
- emojiByUnified
383
- };
275
+
276
+ export { Categories, ExportedEmoji as Emoji, EmojiStyle, SkinTonePickerLocation, SkinTones, SuggestionMode, Theme, EmojiPicker2 as default, emojiByUnified };