diff --git a/reflex/components/chakra/base.py b/reflex/components/chakra/base.py index 2244be898b..9e1f3f6983 100644 --- a/reflex/components/chakra/base.py +++ b/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 @@ def _get_app_wrap_components() -> dict[tuple[int, str], 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 @@ def _get_dependencies_imports(cls) -> imports.ImportDict: 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 @@ def create(cls) -> Component: 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 @@ def _get_imports(self) -> imports.ImportDict: _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]: diff --git a/reflex/components/chakra/base.pyi b/reflex/components/chakra/base.pyi index bdfe142b29..44a1fd4a12 100644 --- a/reflex/components/chakra/base.pyi +++ b/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 diff --git a/tests/test_app.py b/tests/test_app.py index b9a0184343..756b701faa 100644 --- a/tests/test_app.py +++ b/tests/test_app.py @@ -1273,7 +1273,6 @@ def page(): "return (" "" "" - "" "" "" ""