Update UI dependencies

hyperglass/ui/components/form/field.tsx

@@ -13,7 +13,9 @@ export const FormField: React.FC<TField> = (props: TField) => {
   const errorColor = useColorValue('red.500', 'red.300');
   const opacity = useBooleanValue(hiddenLabels, 0, undefined);
 
-  const { errors } = useFormContext();
+  const {
+    formState: { errors },
+  } = useFormContext();
 
   const error = name in errors && (errors[name] as FieldError);
 

hyperglass/ui/components/form/queryLocation.tsx

@@ -27,7 +27,9 @@ export const QueryLocation: React.FC<TQuerySelectField> = (props: TQuerySelectFi
   const { onChange, label } = props;
 
   const { networks } = useConfig();
-  const { errors } = useFormContext();
+  const {
+    formState: { errors },
+  } = useFormContext();
   const { selections } = useLGState();
   const { exportState } = useLGMethods();
 

hyperglass/ui/components/form/queryTarget.tsx

@@ -58,7 +58,7 @@ export const QueryTarget: React.FC<TQueryTarget> = (props: TQueryTarget) => {
 
   return (
     <>
-      <input hidden readOnly name={name} ref={register} value={queryTarget.value} />
+      <input {...register} hidden readOnly value={queryTarget.value} />
       <If c={queryType.value === 'bgp_community' && queries.bgp_community.mode === 'select'}>
         <Select
           size="lg"

hyperglass/ui/components/form/queryType.tsx

@@ -16,7 +16,9 @@ function buildOptions(queryTypes: TQuery[]): TSelectOption[] {
 export const QueryType: React.FC<TQuerySelectField> = (props: TQuerySelectField) => {
   const { onChange, label } = props;
   const { queries } = useConfig();
-  const { errors } = useFormContext();
+  const {
+    formState: { errors },
+  } = useFormContext();
   const { selections } = useLGState();
   const { exportState } = useLGMethods();
 

hyperglass/ui/components/form/types.ts

@@ -1,6 +1,6 @@
 import type { FormControlProps } from '@chakra-ui/react';
-import type { Control } from 'react-hook-form';
-import type { TDeviceVrf, TBGPCommunity, OnChangeArgs } from '~/types';
+import type { UseFormRegister } from 'react-hook-form';
+import type { TDeviceVrf, TBGPCommunity, OnChangeArgs, TFormData } from '~/types';
 
 export interface TField extends FormControlProps {
   name: string;
@@ -25,13 +25,13 @@ export interface TCommunitySelect {
   name: string;
   onChange: OnChange;
   communities: TBGPCommunity[];
-  register: Control['register'];
+  register: UseFormRegister<TFormData>;
 }
 
 export interface TQueryTarget {
   name: string;
   placeholder: string;
-  register: Control['register'];
+  register: UseFormRegister<TFormData>;
   onChange(e: OnChangeArgs): void;
 }
 

hyperglass/ui/components/layout/frame.tsx

@@ -38,15 +38,15 @@ export const Frame: React.FC<TFrame> = (props: TFrame) => {
       >
         <Header resetForm={handleReset} />
         <Flex
-          px={2}
+          px={4}
           py={0}
-          w="100%"
           as="main"
           align="center"
           flex="1 1 auto"
           justify="start"
           flexDir="column"
           textAlign="center"
+          w={{ base: '100%', lg: 'calc(100% - 1rem)' }}
           {...props}
         />
         <Footer />

hyperglass/ui/components/lookingGlass.tsx

@@ -18,7 +18,7 @@ import {
 } from '~/components';
 import { useConfig } from '~/context';
 import { useStrf, useGreeting, useDevice, useLGState, useLGMethods } from '~/hooks';
-import { isQueryType, isQueryContent, isString } from '~/types';
+import { isQueryType, isQueryContent, isString, isQueryField } from '~/types';
 
 import type { TFormData, TDeviceVrf, OnChangeArgs } from '~/types';
 
@@ -206,7 +206,11 @@ export const LookingGlass: React.FC = () => {
 
   function handleChange(e: OnChangeArgs): void {
     // Signal the field & value to react-hook-form.
-    setValue(e.field, e.value);
+    if (isQueryField(e.field)) {
+      setValue(e.field, e.value);
+    } else {
+      throw new Error(`Field '${e.field}' is not a valid form field.`);
+    }
 
     if (e.field === 'query_location' && Array.isArray(e.value)) {
       handleLocChange(e.value);
@@ -244,10 +248,10 @@ export const LookingGlass: React.FC = () => {
   }, [queryVrf.value, queryLocation.value, queryType.value]);
 
   useEffect(() => {
-    register({ name: 'query_location', required: true });
-    register({ name: 'query_target', required: true });
-    register({ name: 'query_type', required: true });
-    register({ name: 'query_vrf' });
+    register('query_location', { required: true });
+    register('query_target', { required: true });
+    register('query_type', { required: true });
+    register('query_vrf');
   }, [register]);
 
   return (