emoji-picker-react 4.5.12 → 4.5.14

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 (13) hide show
  1. package/dist/emoji-picker-react.cjs.development.css +5 -5
  2. package/dist/emoji-picker-react.cjs.development.js +1 -4
  3. package/dist/emoji-picker-react.cjs.development.js.map +1 -1
  4. package/dist/emoji-picker-react.cjs.production.min.js +1 -1
  5. package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
  6. package/dist/emoji-picker-react.esm.js +5 -8
  7. package/dist/emoji-picker-react.esm.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/EmojiPickerReact.css +0 -4
  10. package/src/components/body/EmojiVariationPicker.css +8 -0
  11. package/src/components/header/Search.css +24 -2
  12. package/src/components/navigation/CategoryNavigation.css +15 -0
  13. package/src/dataUtils/emojiSelectors.ts +1 -3
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "4.5.12",
2
+ "version": "4.5.14",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
package/src/EmojiPickerReact.css CHANGED
@@ -69,9 +69,7 @@
69
69
  --epr-category-label-z-index: 2;
70
70
  --epr-skin-variation-picker-z-index: 5;
71
71
  --epr-preview-z-index: 6;
72
- }
73
72
 
74
- .EmojiPickerReact {
75
73
  /* Dark Theme Variables */
76
74
  --epr-dark: #000;
77
75
  --epr-dark-emoji-variation-picker-bg-color: var(--epr-dark);
@@ -92,7 +90,6 @@
92
90
  @media (prefers-color-scheme: dark) {
93
91
  /* Keep in sync with the section below */
94
92
  .EmojiPickerReact.epr-auto-theme {
95
- --epr-dark: var(--epr-dark-dark);
96
93
  --epr-emoji-variation-picker-bg-color: var(
97
94
  --epr-dark-emoji-variation-picker-bg-color
98
95
  );
@@ -121,7 +118,6 @@
121
118
 
122
119
  .EmojiPickerReact.epr-dark-theme {
123
120
  /* Keep in sync with the section above */
124
- --epr-dark: var(--epr-dark-dark);
125
121
  --epr-emoji-variation-picker-bg-color: var(
126
122
  --epr-dark-emoji-variation-picker-bg-color
127
123
  );
package/src/components/body/EmojiVariationPicker.css CHANGED
@@ -62,6 +62,14 @@
62
62
  background-position: -25px 0;
63
63
  }
64
64
 
65
+ @media (prefers-color-scheme: dark) {
66
+ .EmojiPickerReact.epr-auto-theme
67
+ .epr-emoji-variation-picker
68
+ .epr-emoji-pointer {
69
+ background-position: -25px 0;
70
+ }
71
+ }
72
+
65
73
  .EmojiPickerReact .epr-emoji-variation-picker .epr-emoji-pointer {
66
74
  top: 100%;
67
75
  transform: translateX(-18px);
package/src/components/header/Search.css CHANGED
@@ -68,20 +68,36 @@
68
68
  background: var(--epr-hover-bg-color);
69
69
  }
70
70
 
71
- .EmojiPickerReact..epr-dark-theme
71
+ .EmojiPickerReact.epr-dark-theme
72
72
  .epr-search-container
73
73
  button.epr-btn-clear-search
74
74
  .epr-icn-clear-search {
75
75
  background-position-y: -40px;
76
76
  }
77
77
 
78
- .EmojiPickerReact..epr-dark-theme
78
+ .EmojiPickerReact.epr-dark-theme
79
79
  .epr-search-container
80
80
  button.epr-btn-clear-search:hover
81
81
  .epr-icn-clear-search {
82
82
  background-position-y: -60px;
83
83
  }
84
84
 
85
+ @media (prefers-color-scheme: dark) {
86
+ .EmojiPickerReact.epr-auto-theme
87
+ .epr-search-container
88
+ button.epr-btn-clear-search
89
+ .epr-icn-clear-search {
90
+ background-position-y: -40px;
91
+ }
92
+
93
+ .EmojiPickerReact.epr-auto-theme
94
+ .epr-search-container
95
+ button.epr-btn-clear-search:hover
96
+ .epr-icn-clear-search {
97
+ background-position-y: -60px;
98
+ }
99
+ }
100
+
85
101
  .EmojiPickerReact .epr-search-container .epr-icn-search {
86
102
  content: '';
87
103
  position: absolute;
@@ -100,6 +116,12 @@
100
116
  background-position-y: -20px;
101
117
  }
102
118
 
119
+ @media (prefers-color-scheme: dark) {
120
+ .EmojiPickerReact.epr-auto-theme .epr-search-container .epr-icn-search {
121
+ background-position-y: -20px;
122
+ }
123
+ }
124
+
103
125
  .EmojiPickerReact .epr-search-container input.epr-search::placeholder {
104
126
  color: var(--epr-search-input-placeholder-color);
105
127
  }
package/src/components/navigation/CategoryNavigation.css CHANGED
@@ -84,6 +84,21 @@ aside.EmojiPickerReact.epr-main:has(input:placeholder-shown) .epr-category-nav {
84
84
  > button.epr-cat-btn.epr-active {
85
85
  background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
86
86
  }
87
+
88
+ @media (prefers-color-scheme: dark) {
89
+ .EmojiPickerReact.epr-auto-theme .epr-category-nav > button.epr-cat-btn {
90
+ background-position-y: calc(var(--epr-category-navigation-button-size) * 2);
91
+ }
92
+ .EmojiPickerReact.epr-auto-theme:not(.epr-search-active)
93
+ .epr-category-nav
94
+ > button.epr-cat-btn:hover,
95
+ .EmojiPickerReact.epr-auto-theme:not(.epr-search-active)
96
+ .epr-category-nav
97
+ > button.epr-cat-btn.epr-active {
98
+ background-position-y: calc(var(--epr-category-navigation-button-size) * 3);
99
+ }
100
+ }
101
+
87
102
  .EmojiPickerReact button.epr-cat-btn.epr-icn-suggested {
88
103
  background-position-x: calc(var(--epr-category-navigation-button-size) * -8);
89
104
  }
package/src/dataUtils/emojiSelectors.ts CHANGED
@@ -93,9 +93,7 @@ export function emojiByUnified(unified?: string): DataEmoji | undefined {
93
93
  export const allEmojis: DataEmojis = Object.values(emojis).flat();
94
94
 
95
95
  export function setCustomEmojis(customEmojis: CustomEmoji[]): void {
96
- if (!customEmojis || customEmojis.length === 0) {
97
- emojis[Categories.CUSTOM].length = 0;
98
- }
96
+ emojis[Categories.CUSTOM].length = 0;
99
97
 
100
98
  customEmojis.forEach(emoji => {
101
99
  const emojiData = customToRegularEmoji(emoji);