emoji-picker-react 4.13.1 → 4.13.3
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.
- package/README.md +15 -15
- package/dist/config/config.d.ts +1 -1
- package/dist/emoji-picker-react.cjs.development.js +34 -18
- package/dist/emoji-picker-react.cjs.development.js.map +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js +1 -1
- package/dist/emoji-picker-react.cjs.production.min.js.map +1 -1
- package/dist/emoji-picker-react.esm.js +34 -18
- package/dist/emoji-picker-react.esm.js.map +1 -1
- package/dist/globals/doesBrowserSupportCssHas.d.ts +2 -0
- package/package.json +1 -1
- package/src/components/header/Search/Search.tsx +1 -3
- package/src/config/config.ts +10 -10
- package/src/globals/doesBrowserSupportCssHas.ts +16 -0
- package/src/hooks/useFilter.ts +24 -17
package/README.md
CHANGED
|
@@ -60,14 +60,14 @@ function App() {
|
|
|
60
60
|
|
|
61
61
|
# Props
|
|
62
62
|
|
|
63
|
-
The following props are accepted by
|
|
63
|
+
The following props are accepted by the picker:
|
|
64
64
|
|
|
65
65
|
| Prop | Type | Default | Description |
|
|
66
66
|
| ---------------------- | ------------------------------------------------------ | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
67
67
|
| open | boolean | `true` | Controls whether the picker is open or not. |
|
|
68
68
|
| onEmojiClick | function | | Callback function that is called when an emoji is clicked. The function receives the emoji object as a parameter. |
|
|
69
69
|
| autoFocusSearch | boolean | `true` | Controls the auto focus of the search input. |
|
|
70
|
-
|
|
|
70
|
+
| theme | string | `light` | Controls the theme of the picker. Possible values are `light`, `dark` and `auto`. |
|
|
71
71
|
| emojiStyle | string | `apple` | Controls the emoji style. Possible values are `google`, `apple`, `facebook`, `twitter` and `native`. |
|
|
72
72
|
| defaultSkinTone | string | `neutral` | Controls the default skin tone. |
|
|
73
73
|
| lazyLoadEmojis | boolean | `false` | Controls whether the emojis are loaded lazily or not. |
|
|
@@ -77,20 +77,20 @@ The following props are accepted by them picker:
|
|
|
77
77
|
| skinTonesDisabled | boolean | `false` | Controls whether the skin tones are disabled or not. |
|
|
78
78
|
| searchDisabled | boolean | `false` | Controls whether the search is disabled or not. When disabled, the skin tone picker will be shown in the preview component. |
|
|
79
79
|
| skinTonePickerLocation | string | `SEARCH` | Controls the location of the skin tone picker. Possible values are `SEARCH` and `PREVIEW`. |
|
|
80
|
-
| emojiVersion |
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
|
|
|
84
|
-
|
|
|
85
|
-
| getEmojiUrl |
|
|
86
|
-
| categories |
|
|
87
|
-
| customEmojis |
|
|
88
|
-
| hiddenEmojis |
|
|
89
|
-
| reactionsDefaultOpen |
|
|
80
|
+
| emojiVersion | string | - | Allows displaying emojis up to a certain version for compatibility. |
|
|
81
|
+
| className | string | - | Adds a class name to the root element of the picker. |
|
|
82
|
+
| width | number/string | `350` | Controls the width of the picker. You can provide a number that will be treated as pixel size, or your any accepted css width as string. |
|
|
83
|
+
| height | number/string | `450` | Controls the height of the picker. You can provide a number that will be treated as pixel size, or your any accepted css height as string. |
|
|
84
|
+
| style | React.CSSProperties | `{}` | Adds inline style to the root element of the picker. |
|
|
85
|
+
| getEmojiUrl | Function | - | Allows to customize the emoji url and provide your own image host. |
|
|
86
|
+
| categories | Array | - | Allows full config over ordering, naming and display of categories. |
|
|
87
|
+
| customEmojis | Array<{names: string[], imgUrl: string, id: string}> | - | Allows adding custom emojis to the picker. |
|
|
88
|
+
| hiddenEmojis | string[] | - | Controls the emojis that are hidden from the picker. |
|
|
89
|
+
| reactionsDefaultOpen | boolean | `false` | Controls whether the reactions picker is on the initial mount instead of the main picker component. |
|
|
90
90
|
| reactions | string[] | - | Controls the reactions to display in the reactions picker. Takes unified emoji ids |
|
|
91
|
-
| onReactionClick |
|
|
92
|
-
| allowExpandReactions |
|
|
93
|
-
| onSkinToneChange |
|
|
91
|
+
| onReactionClick | Function | - | Callback function that is called when a reaction is clicked. The function receives the emoji object as a parameter. If not passed, onEmojiClicked is used. |
|
|
92
|
+
| allowExpandReactions | boolean | `true` | Controls whether the reactions picker can be expanded to the main picker. |
|
|
93
|
+
| onSkinToneChange | Function | - | Callback function that is called when a skin tone is changed. The function receives new picked skin tone as a parameter. |
|
|
94
94
|
|
|
95
95
|
## Full details
|
|
96
96
|
|
package/dist/config/config.d.ts
CHANGED
|
@@ -51,7 +51,7 @@ declare type ConfigExternal = {
|
|
|
51
51
|
} & Omit<PickerConfigInternal, 'previewConfig' | 'unicodeToHide'>;
|
|
52
52
|
export declare type PickerConfig = Partial<ConfigExternal>;
|
|
53
53
|
export declare type PickerDimensions = string | number;
|
|
54
|
-
export declare type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent, api
|
|
54
|
+
export declare type MouseDownEvent = (emoji: EmojiClickData, event: MouseEvent, api?: OnEmojiClickApi) => void;
|
|
55
55
|
export declare type OnSkinToneChange = (emoji: SkinTones) => void;
|
|
56
56
|
declare type OnEmojiClickApi = {
|
|
57
57
|
collapseToReactions: () => void;
|
|
@@ -18066,6 +18066,19 @@ function useOnMouseMove() {
|
|
|
18066
18066
|
}, [BodyRef, allowMouseMove, isMouseDisallowed]);
|
|
18067
18067
|
}
|
|
18068
18068
|
|
|
18069
|
+
function doesBrowserSupportCssHas() {
|
|
18070
|
+
// if env is not browser:
|
|
18071
|
+
if (typeof window === 'undefined' || typeof window.CSS === 'undefined') {
|
|
18072
|
+
return false;
|
|
18073
|
+
}
|
|
18074
|
+
try {
|
|
18075
|
+
return CSS.supports('selector(:has(*))');
|
|
18076
|
+
} catch (e) {
|
|
18077
|
+
return false;
|
|
18078
|
+
}
|
|
18079
|
+
}
|
|
18080
|
+
var browserSupportsCssHas = /*#__PURE__*/doesBrowserSupportCssHas();
|
|
18081
|
+
|
|
18069
18082
|
function useFocusSearchInput() {
|
|
18070
18083
|
var SearchInputRef = useSearchInputRef();
|
|
18071
18084
|
return React.useCallback(function () {
|
|
@@ -18139,22 +18152,27 @@ function useFilter() {
|
|
|
18139
18152
|
statusSearchResults: statusSearchResults
|
|
18140
18153
|
};
|
|
18141
18154
|
function onChange(inputValue) {
|
|
18142
|
-
|
|
18143
|
-
|
|
18144
|
-
if (filter != null && filter[nextValue] || nextValue.length <= 1) {
|
|
18145
|
-
return applySearch(nextValue);
|
|
18146
|
-
}
|
|
18147
|
-
var longestMatch = findLongestMatch(nextValue, filter);
|
|
18148
|
-
if (!longestMatch) {
|
|
18149
|
-
// Can we even get here?
|
|
18150
|
-
// If so, we need to search among all emojis
|
|
18151
|
-
return applySearch(nextValue);
|
|
18155
|
+
if (browserSupportsCssHas) {
|
|
18156
|
+
return;
|
|
18152
18157
|
}
|
|
18153
|
-
|
|
18154
|
-
var
|
|
18155
|
-
|
|
18158
|
+
setTimeout(function () {
|
|
18159
|
+
var filter = filterRef.current;
|
|
18160
|
+
var nextValue = inputValue.toLowerCase();
|
|
18161
|
+
if (filter != null && filter[nextValue] || nextValue.length <= 1) {
|
|
18162
|
+
return applySearch(nextValue);
|
|
18163
|
+
}
|
|
18164
|
+
var longestMatch = findLongestMatch(nextValue, filter);
|
|
18165
|
+
if (!longestMatch) {
|
|
18166
|
+
// Can we even get here?
|
|
18167
|
+
// If so, we need to search among all emojis
|
|
18168
|
+
return applySearch(nextValue);
|
|
18169
|
+
}
|
|
18170
|
+
setFilterRef(function (current) {
|
|
18171
|
+
var _Object$assign;
|
|
18172
|
+
return Object.assign(current, (_Object$assign = {}, _Object$assign[nextValue] = filterEmojiObjectByKeyword(longestMatch, nextValue), _Object$assign));
|
|
18173
|
+
});
|
|
18174
|
+
applySearch(nextValue);
|
|
18156
18175
|
});
|
|
18157
|
-
applySearch(nextValue);
|
|
18158
18176
|
}
|
|
18159
18177
|
}
|
|
18160
18178
|
function useApplySearch() {
|
|
@@ -20868,11 +20886,9 @@ function Search() {
|
|
|
20868
20886
|
"aria-controls": "epr-search-id",
|
|
20869
20887
|
placeholder: placeholder,
|
|
20870
20888
|
onChange: function onChange(event) {
|
|
20889
|
+
var _event$target$value, _event$target;
|
|
20871
20890
|
setInc(inc + 1);
|
|
20872
|
-
|
|
20873
|
-
var _event$target$value, _event$target;
|
|
20874
|
-
_onChange((_event$target$value = event == null ? void 0 : (_event$target = event.target) == null ? void 0 : _event$target.value) != null ? _event$target$value : value);
|
|
20875
|
-
});
|
|
20891
|
+
_onChange((_event$target$value = event == null ? void 0 : (_event$target = event.target) == null ? void 0 : _event$target.value) != null ? _event$target$value : value);
|
|
20876
20892
|
},
|
|
20877
20893
|
ref: SearchInputRef
|
|
20878
20894
|
}), searchTerm ? React.createElement("div", {
|