Remove focus-visible package (#2535)

reflex/components/chakra/base.py

@@ -15,7 +15,6 @@ class ChakraComponent(Component):
     library = "@chakra-ui/react@2.6.1"
     lib_dependencies: List[str] = [
         "@chakra-ui/system@2.5.7",
-        "focus-visible@5.2.0",
         "framer-motion@10.16.4",
     ]
 
@@ -26,25 +25,6 @@ class ChakraComponent(Component):
             (60, "ChakraProvider"): chakra_provider,
         }
 
-    def get_imports(self) -> imports.ImportDict:
-        """Chakra requires focus-visible and imported into each page.
-
-        This allows the GlobalStyle defined by the ChakraProvider to hide the blue border.
-
-        Returns:
-            The imports for the component.
-        """
-        return imports.merge_imports(
-            super().get_imports(),
-            {
-                "": {
-                    imports.ImportVar(
-                        tag="focus-visible/dist/focus-visible", install=False
-                    )
-                }
-            },
-        )
-
     def _get_style(self) -> dict:
         """Get the style for the component.
 
@@ -65,25 +45,11 @@ class ChakraComponent(Component):
             dep: [imports.ImportVar(tag=None, render=False)]
             for dep in [
                 "@chakra-ui/system@2.5.7",
-                "focus-visible@5.2.0",
                 "framer-motion@10.16.4",
             ]
         }
 
 
-class Global(Component):
-    """The emotion/react Global styling component."""
-
-    library = "@emotion/react@^11.11.0"
-    lib_dependencies: List[str] = [
-        "@emotion/styled@^11.11.0",
-    ]
-
-    tag = "Global"
-
-    styles: Var[str]
-
-
 class ChakraProvider(ChakraComponent):
     """Top level Chakra provider must be included in any app using chakra components."""
 
@@ -99,7 +65,6 @@ class ChakraProvider(ChakraComponent):
             A new ChakraProvider component.
         """
         return super().create(
-            Global.create(styles=Var.create("GlobalStyles", _var_is_local=False)),
             theme=Var.create("extendTheme(theme)", _var_is_local=False),
         )
 
@@ -111,22 +76,8 @@ class ChakraProvider(ChakraComponent):
         _imports.setdefault("/utils/theme.js", []).append(
             imports.ImportVar(tag="theme", is_default=True),
         )
-        _imports.setdefault(Global.__fields__["library"].default, []).append(
-            imports.ImportVar(tag="css", is_default=False),
-        )
         return _imports
 
-    def _get_custom_code(self) -> str | None:
-        return """
-const GlobalStyles = css`
-  /* Hide the blue border around Chakra components. */
-  .js-focus-visible :focus:not([data-focus-visible-added]) {
-    outline: none;
-    box-shadow: none;
-  }
-`;
-"""
-
     @staticmethod
     @lru_cache(maxsize=None)
     def _get_app_wrap_components() -> dict[tuple[int, str], Component]:

reflex/components/chakra/base.pyi

@@ -14,7 +14,6 @@ from reflex.utils import imports
 from reflex.vars import Var
 
 class ChakraComponent(Component):
-    def get_imports(self) -> imports.ImportDict: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -95,88 +94,6 @@ class ChakraComponent(Component):
         """
         ...
 
-class Global(Component):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        styles: Optional[Union[Var[str], str]] = None,
-        style: Optional[Style] = None,
-        key: Optional[Any] = None,
-        id: Optional[Any] = None,
-        class_name: Optional[Any] = None,
-        autofocus: Optional[bool] = None,
-        _rename_props: Optional[Dict[str, str]] = None,
-        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
-        on_blur: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_context_menu: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_double_click: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_focus: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_down: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_enter: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_leave: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_move: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_out: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_over: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_mouse_up: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_scroll: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        on_unmount: Optional[
-            Union[EventHandler, EventSpec, list, function, BaseVar]
-        ] = None,
-        **props
-    ) -> "Global":
-        """Create the component.
-
-        Args:
-            *children: The children of the component.
-            style: The style of the component.
-            key: A unique key for the component.
-            id: The id for the component.
-            class_name: The class name for the component.
-            autofocus: Whether the component should take the focus once the page is loaded
-            _rename_props: props to change the name of
-            custom_attrs: custom attribute
-            **props: The props of the component.
-
-        Returns:
-            The component.
-
-        Raises:
-            TypeError: If an invalid child is passed.
-        """
-        ...
-
 class ChakraProvider(ChakraComponent):
     @overload
     @classmethod

tests/test_app.py

@@ -1273,7 +1273,6 @@ def test_app_wrap_priority(compilable_app):
         "return ("
         "<Box>"
         "<ChakraProvider theme={extendTheme(theme)}>"
-        "<Global styles={GlobalStyles}/>"
         "<ChakraColorModeProvider>"
         "<Text>"
         "<Fragment2>"