@sanity/ui 2.0.0-alpha.18 → 2.0.0-alpha.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "2.0.0-alpha.18",
+  "version": "2.0.0-alpha.19",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
   "source": "./src/index.ts",

package/src/primitives/textInput/textInput.tsx

@@ -70,6 +70,10 @@ export interface TextInputProps {
   suffix?: React.ReactNode
   type?: TextInputType
   weight?: ThemeFontWeightKey
+  /**
+   * @beta
+   */
+  unstableDisableFocusRing?: boolean
 }
 
 const CLEAR_BUTTON_BOX_STYLE: React.CSSProperties = {zIndex: 2}
@@ -165,6 +169,7 @@ export const TextInput = forwardRef(function TextInput(
     customValidity,
     type = 'text',
     weight,
+    unstableDisableFocusRing,
     ...restProps
   } = props
 
@@ -221,6 +226,7 @@ export const TextInput = forwardRef(function TextInput(
     () => (
       <Presentation
         $hasPrefix={$hasPrefix}
+        $unstableDisableFocusRing={unstableDisableFocusRing}
         $hasSuffix={$hasSuffix}
         $radius={radius}
         $scheme={rootTheme.scheme}
@@ -259,6 +265,7 @@ export const TextInput = forwardRef(function TextInput(
       $hasClearButton,
       $hasPrefix,
       $hasSuffix,
+      unstableDisableFocusRing,
     ],
   )
 

package/src/styles/input/textInputStyle.ts

@@ -24,6 +24,7 @@ export interface TextInputRepresentationStyleProps {
   $hasSuffix?: boolean
   $scheme: ThemeColorSchemeKey
   $tone: CardTone
+  $unstableDisableFocusRing?: boolean
 }
 
 const ROOT_STYLE = css`
@@ -129,7 +130,7 @@ export function textInputFontSizeStyle(props: TextInputInputStyleProps & ThemePr
 export function textInputRepresentationStyle(
   props: TextInputRepresentationStyleProps & ThemeProps,
 ): ReturnType<typeof css> {
-  const {$hasPrefix, $hasSuffix, $scheme, $tone, theme} = props
+  const {$hasPrefix, $hasSuffix, $scheme, $tone, $unstableDisableFocusRing, theme} = props
   const {input} = theme.sanity
   const {focusRing} = input.text
   const color = theme.sanity.color.input
@@ -182,14 +183,18 @@ export function textInputRepresentationStyle(
       /* focused */
       *:not(:disabled):focus + & {
         &[data-border] {
-          --input-box-shadow: ${focusRingStyle({
-            border: {color: color.default.enabled.border, width: input.border.width},
-            focusRing,
-          })};
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({
+                border: {color: color.default.enabled.border, width: input.border.width},
+                focusRing,
+              })};
         }
 
         &:not([data-border]) {
-          --input-box-shadow: ${focusRingStyle({focusRing})};
+          --input-box-shadow: ${$unstableDisableFocusRing
+            ? undefined
+            : focusRingStyle({focusRing})};
         }
       }