fix(menu): use default export

jest.config.js

@@ -3,12 +3,7 @@ module.exports = {
   transformIgnorePatterns: ['/node_modules/'],
   testPathIgnorePatterns: ['/node_modules/', 'lib', '/test/'],
   transform: {
-    '^.+\\.(ts|tsx)?$': 'babel-jest',
-  },
-  globals: {
-    'ts-jest': {
-      tsConfigFile: 'tsconfig.json',
-    },
+    '^.+\\.(ts|tsx|js|jsx)?$': 'babel-jest',
   },
   testMatch: ['**/__tests__/*.+(ts|tsx|js)'],
   moduleFileExtensions: ['ts', 'tsx', 'js'],

src/lab/Menu/Menu.tsx → src/NewMenu/Menu.tsx

@@ -1,21 +1,31 @@
 import React, { FunctionComponent, useRef, useState } from 'react';
-import { config, useChain, useSpring } from 'react-spring/hooks';
+import { config, useChain, useSpring } from 'react-spring/hooks.cjs';
 
-import Backdrop from '../../Backdrop';
-import Flex from '../../Grid/Flex';
+import Backdrop from '../Backdrop';
+import Flex from '../Grid/Flex';
 
 import MenuContext from './MenuContext';
+import MenuDivider from './MenuDivider';
+import MenuItem from './MenuItem';
+import SubMenu from './SubMenu';
 import { AnimatedSubMenuWrapper } from './styles';
 
 const spring = { ...config.stiff, precision: 0.1 };
 
-const Menu: FunctionComponent<any> = ({
-  children,
-  defaultActiveSubId = null,
-  defaultActiveItemId = null,
-}) => {
+export interface IMenuProps {
+  defaultActiveSubId?: string;
+  defaultActiveItemId?: string;
+}
+
+const Menu: FunctionComponent<IMenuProps> & {
+  SubMenu: typeof SubMenu;
+  Divider: typeof MenuDivider;
+  Item: typeof MenuItem;
+} = ({ children, defaultActiveSubId = null, defaultActiveItemId = null }) => {
   const [subMenuVisible, setSubMenuVisible] = useState(false);
-  const [activeSubId, setActiveSubId] = useState(defaultActiveSubId);
+  const [activeSubId, setActiveSubId] = useState<string | null>(
+    defaultActiveSubId
+  );
   const [activeItemId, setActiveItemId] = useState(defaultActiveItemId);
 
   const subMenuSpringRef = useRef(null);
@@ -82,4 +92,8 @@ const Menu: FunctionComponent<any> = ({
   );
 };
 
+Menu.Divider = MenuDivider;
+Menu.SubMenu = SubMenu;
+Menu.Item = MenuItem;
+
 export default Menu;

src/lab/Menu/MenuContext.ts → src/NewMenu/MenuContext.ts

@@ -2,9 +2,9 @@ import { createContext } from 'react';
 
 const MenuContext = createContext<{
   subMenuVisible: boolean;
-  activeSubId: string;
+  activeSubId: string | null;
   setActiveSubId: (subId: string | null) => void;
-  activeItemId: string;
+  activeItemId: string | null;
   setActiveItemId: (itemId: string) => void;
   subMenuContentSpringProps: any;
 }>({

src/lab/Menu/MenuDivider.tsx → src/NewMenu/MenuDivider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import Box from '../../Grid/Box';
-import Flex from '../../Grid/Flex';
+import Box from '../Grid/Box';
+import Flex from '../Grid/Flex';
 
 const MenuDivider = () => (
   <Flex

src/lab/Menu/MenuItem.tsx → src/NewMenu/MenuItem.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent, useContext } from 'react';
 
-import Box from '../../Grid/Box';
-import Icon from '../../Icon';
+import Box from '../Grid/Box';
+import Icon from '../Icon';
 
 import MenuContenx from './MenuContext';
 import { StyledMenuItem } from './styles';

src/lab/Menu/SubMenu.tsx → src/NewMenu/SubMenu.tsx

@@ -5,9 +5,9 @@ import React, {
   useState,
 } from 'react';
 
-import Flex from '../../Grid/Flex';
-import Icon, { IconType } from '../../Icon';
-import Tooltip from '../../Tooltip';
+import Flex from '../Grid/Flex';
+import Icon, { IconType } from '../Icon';
+import Tooltip from '../Tooltip';
 
 import MenuContext from './MenuContext';
 import SubMenuContent from './SubMenuContent';

src/lab/Menu/SubMenuContent.tsx → src/NewMenu/SubMenuContent.tsx

@@ -6,7 +6,7 @@ import React, {
   useState,
 } from 'react';
 
-import Box from '../../Grid/Box';
+import Box from '../Grid/Box';
 
 import { AnimatedSubMenuContentWrapper } from './styles';
 

src/lab/Menu/styles.ts → src/NewMenu/styles.ts

@@ -1,9 +1,9 @@
 import styled, { css } from 'styled-components';
-import { animated } from 'react-spring/hooks';
+import { animated } from 'react-spring/hooks.cjs';
 
 import tag from 'utils/CleanTag';
 
-import Box from '../../Grid/Box';
+import Box from '../Grid/Box';
 
 const SubMenuWrapper = styled(tag.div)`
   position: absolute;

src/__tests__/index.spec.ts

@@ -18,6 +18,7 @@ import {
   Mention,
   Menu,
   Modal,
+  NewMenu,
   Popconfirm,
   Popover,
   Radio,
@@ -61,6 +62,7 @@ describe('index', () => {
     expect(Menu).toBeDefined();
     expect(Mention).toBeDefined();
     expect(message).toBeDefined();
+    expect(NewMenu).toBeDefined();
     expect(Modal).toBeDefined();
     expect(Popconfirm).toBeDefined();
     expect(Popover).toBeDefined();

src/index.ts

@@ -17,6 +17,7 @@ export { default as Label } from './Form/Label';
 export { default as Menu } from './Menu';
 export { default as Mention } from './Mention';
 export { default as message } from './message';
+export { default as NewMenu } from './NewMenu';
 export { default as Modal } from './Modal';
 export { default as Popconfirm } from './Popconfirm';
 export { default as Popover } from './Popover';

typings/index.d.ts

@@ -2,3 +2,4 @@ import 'jest-dom/extend-expect';
 
 import './custom-typings';
 import './styled';
+import './react-spring';