@seed-design/react-checkbox 0.0.4 → 1.0.1

package/lib/{Checkbox-12s-BeV5Lkaw.js → Checkbox-12s-B22GIIyy.js}

@@ -4,6 +4,7 @@ import { elementProps, dataAttr, inputProps, labelProps, visuallyHidden, mergePr
 import { Primitive } from '@seed-design/react-primitive';
 import { useState, useRef, useEffect, createContext, useContext, forwardRef } from 'react';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useSupports } from '@seed-design/react-supports';
 import { composeRefs } from '@radix-ui/react-compose-refs';
 
 function useCheckboxState(props) {
@@ -53,6 +54,7 @@ function useCheckboxState(props) {
 }
 function useCheckbox(props) {
     const { refs, isIndeterminate, setIsChecked, isChecked, setIsHovered, isHovered, setIsActive, isActive, setIsFocused, isFocused, setIsFocusVisible, isFocusVisible } = useCheckboxState(props);
+    const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
     const stateProps = elementProps({
         "data-checked": dataAttr(isChecked),
         "data-indeterminate": dataAttr(isIndeterminate),
@@ -107,15 +109,21 @@ function useCheckbox(props) {
             ...stateProps,
             onChange (event) {
                 setIsChecked(event.currentTarget.checked);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             },
             onFocus (event) {
                 setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             },
             onBlur () {
                 setIsFocused(false);
-                setIsFocusVisible(false);
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(false);
+                }
             },
             onKeyDown (event) {
                 if (event.key === " ") {

package/lib/{Checkbox-12s-Y3jZEb8V.cjs → Checkbox-12s-B9wGaaeq.cjs}

@@ -4,6 +4,7 @@ var domUtils = require('@seed-design/dom-utils');
 var reactPrimitive = require('@seed-design/react-primitive');
 var react = require('react');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
+var reactSupports = require('@seed-design/react-supports');
 var reactComposeRefs = require('@radix-ui/react-compose-refs');
 
 function useCheckboxState(props) {
@@ -53,6 +54,7 @@ function useCheckboxState(props) {
 }
 function useCheckbox(props) {
     const { refs, isIndeterminate, setIsChecked, isChecked, setIsHovered, isHovered, setIsActive, isActive, setIsFocused, isFocused, setIsFocusVisible, isFocusVisible } = useCheckboxState(props);
+    const isFocusVisibleSupported = reactSupports.useSupports("selector(:focus-visible)");
     const stateProps = domUtils.elementProps({
         "data-checked": domUtils.dataAttr(isChecked),
         "data-indeterminate": domUtils.dataAttr(isIndeterminate),
@@ -107,15 +109,21 @@ function useCheckbox(props) {
             ...stateProps,
             onChange (event) {
                 setIsChecked(event.currentTarget.checked);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             },
             onFocus (event) {
                 setIsFocused(true);
-                setIsFocusVisible(event.target.matches(":focus-visible"));
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(event.target.matches(":focus-visible"));
+                }
             },
             onBlur () {
                 setIsFocused(false);
-                setIsFocusVisible(false);
+                if (isFocusVisibleSupported) {
+                    setIsFocusVisible(false);
+                }
             },
             onKeyDown (event) {
                 if (event.key === " ") {

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Checkbox12s = require('./Checkbox-12s-Y3jZEb8V.cjs');
+var Checkbox12s = require('./Checkbox-12s-B9wGaaeq.cjs');
 
 var Checkbox_namespace = {
   __proto__: null,

package/lib/index.d.ts

@@ -72,7 +72,7 @@ declare function useCheckbox(props: UseCheckboxProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -354,7 +354,7 @@ declare function useCheckbox(props: UseCheckboxProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -638,7 +638,7 @@ declare function useCheckbox(props: UseCheckboxProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;
@@ -923,7 +923,7 @@ declare function useCheckbox(props: UseCheckboxProps): {
         results?: number | undefined | undefined;
         security?: string | undefined | undefined;
         unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | undefined | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
         popoverTarget?: string | undefined | undefined;
         inert?: boolean | undefined | undefined;

package/lib/index.js

@@ -1,5 +1,5 @@
-import { C as CheckboxControl, a as CheckboxHiddenInput, b as CheckboxRoot } from './Checkbox-12s-BeV5Lkaw.js';
-export { u as useCheckboxContext } from './Checkbox-12s-BeV5Lkaw.js';
+import { C as CheckboxControl, a as CheckboxHiddenInput, b as CheckboxRoot } from './Checkbox-12s-B22GIIyy.js';
+export { u as useCheckboxContext } from './Checkbox-12s-B22GIIyy.js';
 
 var Checkbox_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-checkbox",
-  "version": "0.0.4",
+  "version": "1.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -29,8 +29,9 @@
   "dependencies": {
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "1.2.2",
-    "@seed-design/dom-utils": "0.0.2",
-    "@seed-design/react-primitive": "0.0.3"
+    "@seed-design/dom-utils": "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/useCheckbox.test.tsx

@@ -32,6 +32,11 @@ function Checkbox(props: CheckboxRootProps) {
 }
 
 describe("useCheckbox", () => {
+  global.CSS = {
+    // @ts-expect-error
+    supports: (_k, _v) => true,
+  };
+
   it("should render the checkbox correctly", () => {
     const { getByRole } = setUp(<Checkbox />);
     const checkbox = getByRole("checkbox");

package/src/useCheckbox.ts

@@ -8,6 +8,7 @@ import {
   labelProps,
   visuallyHidden,
 } from "@seed-design/dom-utils";
+import { useSupports } from "@seed-design/react-supports";
 
 interface UseCheckboxStateProps {
   checked?: boolean;
@@ -89,6 +90,8 @@ export function useCheckbox(props: UseCheckboxProps) {
     isFocusVisible,
   } = useCheckboxState(props);
 
+  const isFocusVisibleSupported = useSupports("selector(:focus-visible)");
+
   const stateProps = elementProps({
     "data-checked": dataAttr(isChecked),
     "data-indeterminate": dataAttr(isIndeterminate),
@@ -148,15 +151,21 @@ export function useCheckbox(props: UseCheckboxProps) {
       ...stateProps,
       onChange(event) {
         setIsChecked(event.currentTarget.checked);
-        setIsFocusVisible(event.target.matches(":focus-visible"));
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(event.target.matches(":focus-visible"));
+        }
       },
       onFocus(event) {
         setIsFocused(true);
-        setIsFocusVisible(event.target.matches(":focus-visible"));
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(event.target.matches(":focus-visible"));
+        }
       },
       onBlur() {
         setIsFocused(false);
-        setIsFocusVisible(false);
+        if (isFocusVisibleSupported) {
+          setIsFocusVisible(false);
+        }
       },
       onKeyDown(event) {
         if (event.key === " ") {

package/src/useCheckboxContext.tsx

@@ -9,7 +9,9 @@ export const CheckboxProvider = CheckboxContext.Provider;
 
 export function useCheckboxContext<T extends boolean | undefined = true>({
   strict = true,
-}: { strict?: T } = {}): T extends false ? UseCheckboxContext | null : UseCheckboxContext {
+}: {
+  strict?: T;
+} = {}): T extends false ? UseCheckboxContext | null : UseCheckboxContext {
   const context = useContext(CheckboxContext);
   if (!context && strict) {
     throw new Error("useCheckboxContext must be used within a Checkbox");