import { createContext , useContext , useMemo } from "react" ; import { ListGridTemplate , useGridTemplateStyles } from "./styles" ; export const ListContext = createContext < "body" | "head" | "foot" > ( "body" ) ; export const ListGridContext = createContext < ListGridTemplate > ( [ "1fr" ] ) ; export const useListContext = ( ) => useContext ( ListContext ) ; export const useListGridContext = ( ) => useContext ( ListGridContext ) ; export function useGridStyles ( ) { const gridTemplate = useListGridContext ( ) ; const props = useMemo ( ( ) => ( { width : gridTemplate } ) , [ gridTemplate ] ) ; return useGridTemplateStyles ( props ) ; }