Set TypeScript 5.1 as the minimum TS version (#18)

Author: marcbouchenoire

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [Unreleased]
 
 - Add `sticky` prop on `EmojiPicker.Root` to allow disabling sticky category headers, thanks @Earthsplit!
+- Add TypeScript as an optional peer dependency to prevent using TypeScript versions lower than 5.1.
 
 ## [0.2.0] - 2025-04-02
 

README.md

@@ -76,6 +76,11 @@ It can be composed and combined with other shadcn/ui components like [Popover](h
 
 Find the full documentation and examples on [frimousse.liveblocks.io](https://frimousse.liveblocks.io).
 
+## Compatibility
+
+- React 18 and 19
+- TypeScript 5.1 and above
+
 ## Miscellaneous
 
 The name [“frimousse”](https://en.wiktionary.org/wiki/frimousse) means “little face” in French, and it can also refer to smileys and emoticons.

package-lock.json

@@ -38,7 +38,13 @@
     "release": "release-it"
   },
   "peerDependencies": {
-    "react": "^18 || ^19"
+    "react": "^18 || ^19",
+    "typescript": ">=5.1.0"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.4",

package.json

@@ -930,11 +930,7 @@ const EmojiPickerListCategory = memo(
     return (
       <div {...listCategoryProps(categoryIndex, category)}>
         <CategoryHeader
-          {...listCategoryHeaderProps(
-            { label: category.label },
-            false,
-            sticky,
-          )}
+          {...listCategoryHeaderProps({ label: category.label }, false, sticky)}
         />
       </div>
     );
@@ -1301,10 +1297,7 @@ const EmojiPickerSkinToneSelector = forwardRef<
  * </EmojiPicker.Root>
  * ```
  */
-function EmojiPickerLoading({
-  children,
-  ...props
-}: EmojiPickerLoadingProps): ReactNode {
+function EmojiPickerLoading({ children, ...props }: EmojiPickerLoadingProps) {
   const store = useEmojiPickerStore();
   const isLoading = useSelector(store, $isLoading);
 
@@ -1353,10 +1346,7 @@ function EmojiPickerEmptyWithSearch({
  * </EmojiPicker.Empty>
  * ```
  */
-function EmojiPickerEmpty({
-  children,
-  ...props
-}: EmojiPickerEmptyProps): ReactNode {
+function EmojiPickerEmpty({ children, ...props }: EmojiPickerEmptyProps) {
   const store = useEmojiPickerStore();
   const isEmpty = useSelector(store, $isEmpty);
 
@@ -1407,9 +1397,7 @@ function EmojiPickerEmpty({
  * If you prefer to use a hook rather than a component,
  * {@link useActiveEmoji} is also available.
  */
-function EmojiPickerActiveEmoji({
-  children,
-}: EmojiPickerActiveEmojiProps): ReactNode {
+function EmojiPickerActiveEmoji({ children }: EmojiPickerActiveEmojiProps) {
   const activeEmoji = useActiveEmoji();
 
   return children({ emoji: activeEmoji });
@@ -1459,10 +1447,7 @@ function EmojiPickerActiveEmoji({
  * An already-built skin tone selector is also available,
  * {@link EmojiPicker.SkinToneSelector|`<EmojiPicker.SkinToneSelector />`}.
  */
-function EmojiPickerSkinTone({
-  children,
-  emoji,
-}: EmojiPickerSkinToneProps): ReactNode {
+function EmojiPickerSkinTone({ children, emoji }: EmojiPickerSkinToneProps) {
   const [skinTone, setSkinTone, skinToneVariations] = useSkinTone(emoji);
 
   return children({ skinTone, setSkinTone, skinToneVariations });

src/components/emoji-picker.tsx

@@ -90,5 +90,5 @@ export function useSkinTone(
     store.set({ skinTone });
   }, []);
 
-  return [skinTone, setSkinTone, skinToneVariations] as const;
+  return [skinTone, setSkinTone, skinToneVariations];
 }