From e9bcec23aae6972cc122cce6bd335d38096b5888 Mon Sep 17 00:00:00 2001
From: Espen Hovlandsdal <espen@hovlandsdal.com>
Date: Fri, 13 Dec 2024 16:57:27 -0800
Subject: [PATCH] fix: warnings from styled-components on language input render

---
 src/LanguageField.tsx | 15 +++++++++++----
 src/LanguageInput.tsx | 12 +++++++-----
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/LanguageField.tsx b/src/LanguageField.tsx
index 6462e10..db7bac9 100644
--- a/src/LanguageField.tsx
+++ b/src/LanguageField.tsx
@@ -1,8 +1,14 @@
 import {useCallback} from 'react'
-import {FieldMember, InputProps, MemberField, MemberFieldProps, StringInputProps} from 'sanity'
+import {
+  FieldMember,
+  type InputProps,
+  MemberField,
+  type MemberFieldProps,
+  type PrimitiveInputElementProps,
+} from 'sanity'
 
 import {LanguageInput} from './LanguageInput'
-import {CodeInputLanguage} from './types'
+import type {CodeInputLanguage} from './types'
 
 export function LanguageField(
   props: MemberFieldProps & {member: FieldMember; language: string; languages: CodeInputLanguage[]},
@@ -10,10 +16,11 @@ export function LanguageField(
   const {member, languages, language, renderItem, renderField, renderPreview} = props
 
   const renderInput = useCallback(
-    (inputProps: Omit<InputProps, 'renderDefault'>) => {
+    ({elementProps, onChange}: Omit<InputProps, 'renderDefault'>) => {
       return (
         <LanguageInput
-          {...(inputProps as StringInputProps)}
+          onChange={onChange}
+          elementProps={elementProps as PrimitiveInputElementProps}
           language={language}
           languages={languages}
         />
diff --git a/src/LanguageInput.tsx b/src/LanguageInput.tsx
index b1358f7..7bd864c 100644
--- a/src/LanguageInput.tsx
+++ b/src/LanguageInput.tsx
@@ -1,17 +1,19 @@
 import {Select} from '@sanity/ui'
-import {ChangeEvent, useCallback} from 'react'
-import {set, StringInputProps, unset} from 'sanity'
+import {type ChangeEvent, useCallback} from 'react'
+import {set, type StringInputProps, unset} from 'sanity'
 
 import {CodeInputLanguage} from './types'
 
-export interface LanguageInputProps extends StringInputProps {
+export interface LanguageInputProps {
   language: string
   languages: CodeInputLanguage[]
+  onChange: StringInputProps['onChange']
+  elementProps: StringInputProps['elementProps']
 }
 
 /** @internal */
 export function LanguageInput(props: LanguageInputProps) {
-  const {language, languages, onChange} = props
+  const {language, languages, onChange, elementProps} = props
 
   const handleChange = useCallback(
     (e: ChangeEvent<HTMLSelectElement>) => {
@@ -22,7 +24,7 @@ export function LanguageInput(props: LanguageInputProps) {
   )
 
   return (
-    <Select {...props} value={language} onChange={handleChange}>
+    <Select {...elementProps} value={language} onChange={handleChange}>
       {languages.map((lang: {title: string; value: string}) => (
         <option key={lang.value} value={lang.value}>
           {lang.title}