@seed-design/react-field 1.0.0 → 1.0.1

package/lib/{Field-12s-C77so-rw.js → Field-12s-D99__Wte.js}

@@ -4,6 +4,7 @@ import { composeRefs } from '@radix-ui/react-compose-refs';
 import { elementProps, dataAttr, inputProps, labelProps, ariaAttr, mergeProps } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import { useId, useState, useCallback, createContext, useContext, forwardRef } from 'react';
+import { useSupports } from '@seed-design/react-supports';
 
 const getLabelId = (id)=>`field:${id}:label`;
 const getInputId = (id)=>`field:${id}:input`;
@@ -51,6 +52,7 @@ function useFieldState() {
 function useField(props) {
     const id = useId();
     const { disabled = false, invalid = false, readOnly = false, required = false } = props;
+    const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
     const { refs, renderedElements, isHovered, isActive, isFocused, isFocusVisible, setIsHovered, setIsActive, setIsFocused, setIsFocusVisible } = useFieldState();
     const ariaDescribedBy = [
         renderedElements.description ? getDescriptionId(id) : false,
@@ -113,15 +115,21 @@ function useField(props) {
         }),
         inputHandlers: inputProps({
             onChange: (event)=>{
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             },
             onBlur () {
                 setIsFocused(false);
-                setIsFocusVisible(false);
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(false);
+                }
             },
             onFocus (event) {
                 setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             }
         }),
         descriptionProps: elementProps({

package/lib/{Field-12s-DIDZP1t4.cjs → Field-12s-t41MRyBm.cjs}

@@ -4,6 +4,7 @@ var reactComposeRefs = require('@radix-ui/react-compose-refs');
 var domUtils = require('@seed-design/dom-utils');
 var reactPrimitive = require('@seed-design/react-primitive');
 var react = require('react');
+var reactSupports = require('@seed-design/react-supports');
 
 const getLabelId = (id)=>`field:${id}:label`;
 const getInputId = (id)=>`field:${id}:input`;
@@ -51,6 +52,7 @@ function useFieldState() {
 function useField(props) {
     const id = react.useId();
     const { disabled = false, invalid = false, readOnly = false, required = false } = props;
+    const isFocusVisibleSupported = reactSupports.useSupports("selector(:focus-visible)");
     const { refs, renderedElements, isHovered, isActive, isFocused, isFocusVisible, setIsHovered, setIsActive, setIsFocused, setIsFocusVisible } = useFieldState();
     const ariaDescribedBy = [
         renderedElements.description ? getDescriptionId(id) : false,
@@ -113,15 +115,21 @@ function useField(props) {
         }),
         inputHandlers: domUtils.inputProps({
             onChange: (event)=>{
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             },
             onBlur () {
                 setIsFocused(false);
-                setIsFocusVisible(false);
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(false);
+                }
             },
             onFocus (event) {
                 setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             }
         }),
         descriptionProps: domUtils.elementProps({

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Field12s = require('./Field-12s-DIDZP1t4.cjs');
+var Field12s = require('./Field-12s-t41MRyBm.cjs');
 
 var Field_namespace = {
   __proto__: null,

package/lib/index.js

@@ -1,5 +1,5 @@
-import { F as FieldDescription, a as FieldErrorMessage, b as FieldLabel, c as FieldRoot } from './Field-12s-C77so-rw.js';
-export { u as useFieldContext } from './Field-12s-C77so-rw.js';
+import { F as FieldDescription, a as FieldErrorMessage, b as FieldLabel, c as FieldRoot } from './Field-12s-D99__Wte.js';
+export { u as useFieldContext } from './Field-12s-D99__Wte.js';
 
 var Field_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-field",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -29,7 +29,8 @@
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@seed-design/dom-utils": "1.0.0",
-    "@seed-design/react-primitive": "1.0.0"
+    "@seed-design/react-primitive": "1.0.0",
+    "@seed-design/react-supports": "0.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",

package/src/useField.test.tsx

@@ -92,6 +92,11 @@ const Field = forwardRef<HTMLDivElement, TestFieldProps>(
 Field.displayName = "Field";
 
 describe("Field components", () => {
+  global.CSS = {
+    // @ts-expect-error
+    supports: (_k, _v) => true,
+  };
+
   describe("basic functionality", () => {
     it("should render as a label element", () => {
       const { getByTestId } = setUp(

package/src/useField.ts

@@ -1,6 +1,7 @@
 import { ariaAttr, dataAttr, elementProps, inputProps, labelProps } from "@seed-design/dom-utils";
 import { useCallback, useId, useState } from "react";
 import { getDescriptionId, getErrorMessageId, getInputId, getLabelId } from "./dom";
+import { useSupports } from "@seed-design/react-supports";
 
 function useFieldState() {
   const [isHovered, setIsHovered] = useState(false);
@@ -72,6 +73,8 @@ export function useField(props: UseFieldProps) {
   const id = useId();
   const { disabled = false, invalid = false, readOnly = false, required = false } = props;
 
+  const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
+
   const {
     refs,
     renderedElements,
@@ -157,15 +160,21 @@ export function useField(props: UseFieldProps) {
     }),
     inputHandlers: inputProps({
       onChange: (event) => {
-        setIsFocusVisible(event.target.matches(":focus-visible"));
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(event.target.matches(":focus-visible"));
+        }
       },
       onBlur() {
         setIsFocused(false);
-        setIsFocusVisible(false);
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(false);
+        }
       },
       onFocus(event) {
         setIsFocused(true);
-        setIsFocusVisible(event.target.matches(":focus-visible"));
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(event.target.matches(":focus-visible"));
+        }
       },
     }),