fix render error when rendering select element; change max device per…

… group count to 9; closes #237

hyperglass/ui/components/query-location.tsx

@@ -1,13 +1,13 @@
+import { Flex, Stack, Wrap, chakra } from '@chakra-ui/react';
 import { useMemo } from 'react';
-import { Wrap, Stack, Flex, chakra } from '@chakra-ui/react';
 import { useFormContext } from 'react-hook-form';
-import { Select, LocationCard } from '~/components';
+import { LocationCard, Select } from '~/components';
+import { isMultiValue, isSingleValue } from '~/components/select';
 import { useConfig } from '~/context';
 import { useFormState } from '~/hooks';
-import { isMultiValue, isSingleValue } from '~/components/select';
 
-import type { DeviceGroup, SingleOption, OptionGroup, FormData, OnChangeArgs } from '~/types';
 import type { SelectOnChange } from '~/components/select';
+import type { DeviceGroup, FormData, OnChangeArgs, OptionGroup, SingleOption } from '~/types';
 
 /** Location option type alias for future extensions. */
 export type LocationOption = SingleOption;
@@ -66,7 +66,7 @@ export const QueryLocation = (props: QueryLocationProps): JSX.Element => {
     }
     const groups = options.length;
     const maxOptionsPerGroup = Math.max(...options.map(opt => opt.options.length));
-    const showCards = groups < 5 && maxOptionsPerGroup < 6;
+    const showCards = groups < 5 && maxOptionsPerGroup < 9;
     return showCards ? 'cards' : 'select';
   }, [options, locationDisplayMode]);
 

hyperglass/ui/components/select/select.tsx

@@ -1,32 +1,33 @@
+import { useDisclosure } from '@chakra-ui/react';
 import { createContext, forwardRef, useContext } from 'react';
 import ReactSelect from 'react-select';
-import { useDisclosure } from '@chakra-ui/react';
 import { useColorMode } from '~/hooks';
 import { Option } from './option';
 import {
-  useRSTheme,
-  useMenuStyle,
-  useMenuPortal,
-  useOptionStyle,
+  useContainerStyle,
   useControlStyle,
+  useIndicatorSeparatorStyle,
   useMenuListStyle,
+  useMenuPortal,
+  useMenuStyle,
+  useMultiValueLabelStyle,
+  useMultiValueRemoveStyle,
   useMultiValueStyle,
+  useOptionStyle,
   usePlaceholderStyle,
+  useRSTheme,
   useSingleValueStyle,
-  useMultiValueLabelStyle,
-  useMultiValueRemoveStyle,
-  useIndicatorSeparatorStyle,
 } from './styles';
 import { isSingleValue } from './types';
 
 import type {
-  Props as ReactSelectProps,
   MultiValue,
   OnChangeValue,
+  Props as ReactSelectProps,
   SelectInstance,
 } from 'react-select';
 import type { SingleOption } from '~/types';
-import type { SelectProps, SelectContextProps } from './types';
+import type { SelectContextProps, SelectProps } from './types';
 
 const SelectContext = createContext<SelectContextProps>({} as SelectContextProps);
 export const useSelectContext = (): SelectContextProps => useContext(SelectContext);
@@ -51,6 +52,7 @@ export const Select = forwardRef(
       }
     };
 
+    const container = useContainerStyle<Opt, IsMulti>({ colorMode });
     const menu = useMenuStyle<Opt, IsMulti>({ colorMode });
     const menuList = useMenuListStyle<Opt, IsMulti>({ colorMode });
     const control = useControlStyle<Opt, IsMulti>({ colorMode });
@@ -75,9 +77,10 @@ export const Select = forwardRef(
           isMulti={isMulti}
           theme={rsTheme}
           components={{ Option, ...components }}
-          menuPortalTarget={document?.body ?? undefined}
+          menuPortalTarget={typeof document !== 'undefined' ? document.body : undefined}
           ref={ref}
           styles={{
+            container,
             menu,
             option,
             control,

hyperglass/ui/components/select/styles.ts

@@ -1,19 +1,27 @@
-/* eslint-disable react-hooks/exhaustive-deps */
-import { useCallback } from 'react';
 import { useToken } from '@chakra-ui/react';
 import { mergeWith } from '@chakra-ui/utils';
+/* eslint-disable react-hooks/exhaustive-deps */
+import { useCallback } from 'react';
 import {
-  useMobile,
-  useColorValue,
   useColorToken,
+  useColorValue,
+  useMobile,
   useOpposingColor,
   useOpposingColorCallback,
 } from '~/hooks';
 import { useSelectContext } from './select';
 
 import * as ReactSelect from 'react-select';
 import type { SingleOption } from '~/types';
-import type { RSStyleCallbackProps, RSThemeFunction, RSStyleFunction } from './types';
+import type { RSStyleCallbackProps, RSStyleFunction, RSThemeFunction } from './types';
+
+export const useContainerStyle = <Opt extends SingleOption, IsMulti extends boolean>(
+  props: RSStyleCallbackProps,
+): RSStyleFunction<'container', Opt, IsMulti> => {
+  return useCallback((base, state) => {
+    return { width: '100%' };
+  }, []);
+};
 
 export const useControlStyle = <Opt extends SingleOption, IsMulti extends boolean>(
   props: RSStyleCallbackProps,