update UI dependencies

hyperglass/ui/components/footer/footer.tsx

@@ -53,7 +53,7 @@ export const Footer: React.FC = () => {
           {web.external_link.title}
         </Button>
       </If>
-      {!isMobile && <Flex p={0} flex="0 0 auto" maxWidth="100%" mr="auto" />}
+      {!isMobile && <Flex p={0} flex="1 0 auto" maxWidth="100%" mr="auto" />}
       <If c={web.credit.enable}>
         <FooterButton
           side="right"

hyperglass/ui/components/header/title.tsx

@@ -10,7 +10,7 @@ import { Logo } from './logo';
 
 import type { TTitle, TTitleWrapper, TDWrapper, TMWrapper } from './types';
 
-const AnimatedVStack = motion.custom(VStack);
+const AnimatedVStack = motion(VStack);
 
 /**
  * Title wrapper for mobile devices, breakpoints sm & md.

hyperglass/ui/components/output/fields.tsx

@@ -122,7 +122,7 @@ export const Communities: React.FC<TCommunities> = (props: TCommunities) => {
         </Tooltip>
       </If>
       <If c={communities.length !== 0}>
-        <Menu preventOverflow fixed>
+        <Menu preventOverflow>
           <MenuButton>
             <Icon as={More} />
           </MenuButton>

hyperglass/ui/components/results/individual.tsx

@@ -27,7 +27,7 @@ import { ResultHeader } from './header';
 
 import type { TResult, TErrorLevels } from './types';
 
-const AnimatedAccordionItem = motion.custom(AccordionItem);
+const AnimatedAccordionItem = motion(AccordionItem);
 
 const AccordionHeaderWrapper = chakra('div', {
   baseStyle: {

hyperglass/ui/components/util/animated.tsx

@@ -8,7 +8,7 @@ import type { BoxProps } from '@chakra-ui/react';
  * Combined Chakra + Framer Motion component.
  * @see https://chakra-ui.com/guides/integrations/with-framer
  */
-export const AnimatedDiv = motion.custom(
+export const AnimatedDiv = motion(
   forwardRef<BoxProps, React.ElementType<BoxProps>>((props, ref) => {
     const chakraProps = Object.fromEntries(
       Object.entries(props).filter(([key]) => !isValidMotionProp(key)),

hyperglass/ui/next.config.js

@@ -11,4 +11,7 @@ module.exports = {
     _HYPERGLASS_CONFIG_: config._HYPERGLASS_CONFIG_,
     _HYPERGLASS_FAVICONS_: config._HYPERGLASS_FAVICONS_,
   },
+  future: {
+    webpack5: true,
+  },
 };

hyperglass/ui/package.json

@@ -18,23 +18,23 @@
   },
   "browserslist": "> 0.25%, not dead",
   "dependencies": {
-    "@chakra-ui/react": "^1.3.3",
+    "@chakra-ui/react": "^1.5.2",
     "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
+    "@emotion/styled": "^11.3.0",
     "@hookform/resolvers": "1.3.0",
-    "@hookstate/core": "^3.0.6",
+    "@hookstate/core": "^3.0.7",
     "@hookstate/persistence": "^3.0.0",
     "@meronex/icons": "^4.0.0",
     "dagre": "^0.8.5",
     "dayjs": "^1.10.4",
-    "framer-motion": "^3.7.0",
+    "framer-motion": "^4.1.8",
     "lodash": "^4.17.15",
-    "next": "^10.0.7",
+    "next": "^10.1.3",
     "palette-by-numbers": "^0.1.5",
-    "react": "^17.0.1",
+    "react": "^17.0.2",
     "react-countdown": "^2.2.1",
     "react-device-detect": "^1.15.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-fast-compare": "^3.2.0",
     "react-flow-renderer": "^8.2.3",
     "react-ga": "^3.3.0",