feat(components): ⚡ use useWebFocusRing hook, to remove the outline s…

…tyle when mouse click on web
adaptui · Mar 27, 2024 · ccf8d42 · ccf8d42
1 parent 87f3227
commit ccf8d42
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 25 deletions.
diff --git a/src/components/button/Button.tsx b/src/components/button/Button.tsx
@@ -16,9 +16,9 @@ import {
   generateBoxShadow,
   styleAdapter,
   useHaptic,
-  useOnFocus,
   useOnHover,
   useScaleAnimation,
+  useWebFocusRing,
 } from "../../utils";
 import { createIcon } from "../create-icon";
 import { Icon } from "../icon";
@@ -129,7 +129,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
     const { handlers, animatedStyle } = useScaleAnimation();
     const hapticMedium = useHaptic("medium");
     const { onHoverIn, onHoverOut, hovered } = useOnHover();
-    const { onFocus, onBlur, focused } = useOnFocus();
+    const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
 
     const iconAspectRatio = 1;
 
@@ -285,6 +285,12 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
     return (
       <AnimatedBox style={animatedStyle}>
         <Touchable
+          /**
+           * * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
+           * * and the specific styling provided for the web platform,
+           * * which includes outline and boxShadow properties not defined in the ViewStyle type.
+           */
+          // @ts-ignore
           style={(touchState: PressableStateCallbackType) => {
             return [
               ts(
@@ -307,10 +313,10 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
                     : "",
                 ),
               ),
-              focused.value
+              Platform.OS === "web" ? buttonTheme.web : {},
+              isFocusVisible && isFocused
                 ? Platform.select({
                     web: {
-                      outline: 0,
                       boxShadow: `${generateBoxShadow(
                         buttonTheme.themeColor[themeColor]?.[variant]?.container
                           ?.focus?.offset,
@@ -334,8 +340,7 @@ const RNButton: React.FC<Partial<ButtonProps>> = forwardRef<
           // Web Callbacks
           onHoverIn={onHoverIn}
           onHoverOut={onHoverOut}
-          onFocus={onFocus}
-          onBlur={onBlur}
+          {...focusProps}
           // Web Callbacks
           // A11y Props
           accessible

diff --git a/src/components/checkbox/Checkbox.tsx b/src/components/checkbox/Checkbox.tsx
@@ -23,9 +23,9 @@ import {
   generateBoxShadow,
   styleAdapter,
   useHaptic,
-  useOnFocus,
   useOnHover,
   useScaleAnimation,
+  useWebFocusRing,
 } from "../../utils";
 import { mergeRefs } from "../../utils/mergeRefs";
 import { createIcon } from "../create-icon";
@@ -132,7 +132,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
   } = props;
 
   const { onHoverIn, onHoverOut, hovered } = useOnHover();
-  const { onFocus, onBlur, focused } = useOnFocus();
+  const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
   const { handlers, animatedStyle } = useScaleAnimation();
   const hapticSelection = useHaptic();
 
@@ -363,8 +363,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
         // Web Callbacks
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}
-        onFocus={onFocus}
-        onBlur={onBlur}
+        {...focusProps}
         // Web Callbacks
         // A11y Props
         accessibilityLabel={accessibilityLabel}
@@ -375,6 +374,12 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
         accessibilityValue={{ text: props?.value }}
         onAccessibilityTap={handleChange}
         // A11y Props
+        /**
+         * * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
+         * * and the specific styling provided for the web platform,
+         * * which includes outline and boxShadow properties not defined in the ViewStyle type.
+         */
+        // @ts-ignore
         style={(touchState: PressableStateCallbackType) => [
           ts(
             cx(
@@ -394,7 +399,8 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
                 : "",
             ),
           ),
-          focused.value
+          Platform.OS === "web" ? checkboxTheme.web : {},
+          isFocusVisible && isFocused
             ? Platform.select({
                 web: {
                   outline: 0,
@@ -440,7 +446,7 @@ const RNCheckbox: React.FC<Partial<CheckboxProps>> = forwardRef<
           children({
             pressed: touchState.pressed,
             isHovered: !!hovered.value,
-            isFocussed: !!focused.value,
+            isFocussed: !!(isFocusVisible && isFocused),
           })
         }
       </Touchable>

diff --git a/src/components/radio/Radio.tsx b/src/components/radio/Radio.tsx
@@ -15,9 +15,9 @@ import {
   generateBoxShadow,
   styleAdapter,
   useHaptic,
-  useOnFocus,
   useOnHover,
   useScaleAnimation,
+  useWebFocusRing,
 } from "../../utils";
 import { mergeRefs } from "../../utils/mergeRefs";
 
@@ -86,7 +86,7 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
   ]) as unknown as React.MutableRefObject<null>;
 
   const { onHoverIn, onHoverOut, hovered } = useOnHover();
-  const { onFocus, onBlur, focused } = useOnFocus();
+  const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
   const hapticSelection = useHaptic();
   const { handlers, animatedStyle } = useScaleAnimation();
   const state = useRadioGroupContext();
@@ -278,9 +278,13 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
         // Web Callbacks
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}
-        onFocus={onFocus}
-        onBlur={onBlur}
         // Web Callbacks
+        /**
+         * * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
+         * * and the specific styling provided for the web platform,
+         * * which includes outline and boxShadow properties not defined in the ViewStyle type.
+         */
+        // @ts-ignore
         style={(touchState: PressableStateCallbackType) => [
           ts([
             cx(
@@ -298,10 +302,10 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
                 : "",
             ),
           ]),
-          focused.value
+          Platform.OS === "web" ? radioTheme.web : {},
+          isFocused && isFocusVisible
             ? Platform.select({
                 web: {
-                  outline: 0,
                   boxShadow: hasOnlyLabel
                     ? `${generateBoxShadow(
                         radioTheme.themeColor[themeColor]?.label?.focus?.offset,
@@ -348,12 +352,13 @@ const RNRadio: React.FC<Partial<RadioProps>> = forwardRef<
         })}
         focusable={Platform.OS === "web" ? focusable : undefined}
         {...(description ? {} : handlers)}
+        {...focusProps}
       >
         {(touchState: PressableStateCallbackType) =>
           children({
             pressed: touchState.pressed,
             isHovered: !!hovered.value,
-            isFocussed: !!focused.value,
+            isFocussed: !!(isFocused && isFocusVisible),
           })
         }
       </Touchable>

diff --git a/src/components/tag/Tag.tsx b/src/components/tag/Tag.tsx
@@ -17,9 +17,9 @@ import {
   RenderPropType,
   styleAdapter,
   useHaptic,
-  useOnFocus,
   useOnHover,
   useScaleAnimation,
+  useWebFocusRing,
 } from "../../utils";
 import { createIcon } from "../create-icon";
 import { Icon } from "../icon";
@@ -87,7 +87,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
   const tagTheme = useTheme("tag");
 
   const { onHoverIn, onHoverOut, hovered } = useOnHover();
-  const { onFocus, onBlur, focused } = useOnFocus();
+  const { focusProps, isFocusVisible, isFocused } = useWebFocusRing();
   const { handlers, animatedStyle } = useScaleAnimation();
   const hapticSelection = useHaptic();
 
@@ -193,6 +193,12 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
     <AnimatedBox style={animatedStyle}>
       <Touchable
         ref={ref}
+        /**
+         * * The TypeScript error arises due to an inconsistency between the expected ViewStyle type
+         * * and the specific styling provided for the web platform,
+         * * which includes outline and boxShadow properties not defined in the ViewStyle type.
+         */
+        // @ts-ignore
         style={(touchState: PressableStateCallbackType) => [
           ts(
             cx(
@@ -211,10 +217,10 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
                 : "",
             ),
           ),
-          focused.value
+          Platform.OS === "web" ? tagTheme.web : {},
+          isFocusVisible && isFocused
             ? Platform.select({
                 web: {
-                  outline: 0,
                   boxShadow: `${generateBoxShadow(
                     tagTheme.themeColor[themeColor]?.[variant]?.container?.focus
                       ?.offset,
@@ -237,8 +243,7 @@ const RNTag: React.FC<Partial<TagProps>> = forwardRef<
         // Web Callbacks
         onHoverIn={onHoverIn}
         onHoverOut={onHoverOut}
-        onFocus={onFocus}
-        onBlur={onBlur}
+        {...focusProps}
         // Web Callbacks
         accessible
         accessibilityRole="button"