@applica-software-guru/react-admin 1.4.226 → 1.5.230

package/src/components/Layout/Provider.tsx

@@ -1,11 +1,11 @@
+import { useMenuContext } from '@/components/Layout/MenuProvider';
+import { useThemeContext } from '@/components/Layout/ThemeProvider';
+import { ChangePasswordForm } from '@/components/ra-forms';
+import { IApplicaAuthProvider } from '@applica-software-guru/iam-client/dist/types';
 import { Dialog, useMediaQuery, useTheme } from '@mui/material';
+import _ from 'lodash';
 import { UseGetIdentityResult, useAuthProvider, useGetIdentity } from 'ra-core';
 import { createContext, forwardRef, useCallback, useContext, useEffect, useMemo, useReducer, useState } from 'react';
-import { useMenuConfig, useThemeConfig } from '../../hooks';
-
-import { ChangePasswordForm } from '../ra-forms';
-import _ from 'lodash';
-import { IApplicaAuthProvider } from '@applica-software-guru/iam-client/dist/types';
 
 enum LayoutActionType {
   UPDATE_MEDIA = 'updateMedia',
@@ -78,8 +78,8 @@ type ILayoutContext = {
 };
 
 function reducer(state: ILayoutState, action: ILayoutAction) {
-  const newState = _.clone(state),
-    { type, payload } = action;
+  const newState = _.clone(state);
+  const { type, payload } = action;
   switch (type) {
     case LayoutActionType.UPDATE_MEDIA: {
       const media = _.chain(newState.media).clone().extend(payload).value();
@@ -107,55 +107,53 @@ function reducer(state: ILayoutState, action: ILayoutAction) {
 }
 
 const DefaultState: ILayoutState = {
-    drawer: {
-      open: true,
-      width: 260,
-      handleDrawerToggle: () => {}
-    },
-    media: {
-      downMd: false,
-      downLg: false,
-      downXl: false,
-      horizontal: false
-    },
-    logo: {},
-    notifications: {
-      enable: true,
-      resource: 'entities/notification'
-    },
-    theme: {
-      iconColor: 'grey.300',
-      iconColorOpen: 'grey.100'
-    }
+  drawer: {
+    open: true,
+    width: 260,
+    handleDrawerToggle: () => {}
   },
-  LayoutContext = createContext<ILayoutContext | undefined>(undefined);
+  media: {
+    downMd: false,
+    downLg: false,
+    downXl: false,
+    horizontal: false
+  },
+  logo: {},
+  notifications: {
+    enable: true,
+    resource: 'entities/notification'
+  },
+  theme: {
+    iconColor: 'grey.300',
+    iconColorOpen: 'grey.100'
+  }
+};
+const LayoutContext = createContext<ILayoutContext | undefined>(undefined);
 
 function LayoutProvider(props: ILayoutProviderProps) {
   const authProvider = useAuthProvider<IApplicaAuthProvider>();
-  const identity = useGetIdentity() as UseGetIdentityResult,
-    theme = useTheme(),
-    downMd = useMediaQuery(theme.breakpoints.down('md')),
-    downLg = useMediaQuery(theme.breakpoints.down('lg')),
-    downXl = useMediaQuery(theme.breakpoints.down('xl')),
-    //@ts-ignore
-    { miniDrawer, isHorizontalLayout, menuOrientation, drawerWidth } = useThemeConfig(),
-    isHorizontal = isHorizontalLayout(menuOrientation) && !downLg,
-    //@ts-ignore
-    { drawerOpen, openDrawer } = useMenuConfig(),
-    handleDrawerToggle = useCallback(() => {
-      openDrawer(!drawerOpen);
-    }, [drawerOpen, openDrawer]),
-    [needToChangePassword, setNeedToChangePassword] = useState(false),
-    [state, dispatch] = useReducer(
-      reducer,
-      _.chain(DefaultState)
-        .clone()
-        .merge({ drawer: { open: !miniDrawer || drawerOpen } })
-        .value()
-    ),
-    handlePasswordChange = useCallback(() => setNeedToChangePassword(false), []),
-    value = useMemo(() => ({ state, dispatch }), [state, dispatch]),
-    { logoIcon, logoMain, enableNotification, notification } = props;
+  const identity = useGetIdentity() as UseGetIdentityResult;
+  const theme = useTheme();
+  const downMd = useMediaQuery(theme.breakpoints.down('md'));
+  const downLg = useMediaQuery(theme.breakpoints.down('lg'));
+  const downXl = useMediaQuery(theme.breakpoints.down('xl'));
+  const { miniDrawer, isHorizontalLayout, themeDirection, drawerWidth } = useThemeContext();
+  const isHorizontal = isHorizontalLayout(themeDirection) && !downLg;
+  const { drawerOpen, openDrawer } = useMenuContext();
+  const handleDrawerToggle = useCallback(() => {
+    openDrawer(!drawerOpen);
+  }, [drawerOpen, openDrawer]);
+  const [needToChangePassword, setNeedToChangePassword] = useState(false);
+  const [state, dispatch] = useReducer(
+    reducer,
+    _.chain(DefaultState)
+      .clone()
+      .merge({ drawer: { open: !miniDrawer || drawerOpen } })
+      .value()
+  );
+  const handlePasswordChange = useCallback(() => setNeedToChangePassword(false), []);
+  const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+  const { logoIcon, logoMain, enableNotification, notification } = props;
 
   useEffect(() => {
     dispatch({
@@ -167,7 +165,7 @@ function LayoutProvider(props: ILayoutProviderProps) {
         horizontal: isHorizontal
       }
     });
-  }, [menuOrientation, downMd, downLg, downXl]);
+  }, [downMd, downLg, downXl, isHorizontal]);
 
   useEffect(() => {
     dispatch({
@@ -184,6 +182,7 @@ function LayoutProvider(props: ILayoutProviderProps) {
     if (!miniDrawer) {
       openDrawer(!downXl);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [downXl, miniDrawer]);
 
   useEffect(() => {
@@ -242,7 +241,12 @@ function withLayoutProvider<P, T>(Component: React.ComponentType<P>) {
   return forwardRef((props: P & ILayoutProviderProps, ref: React.ForwardedRef<T>) => {
     const { logoIcon, logoMain, enableNotification, notification } = props;
     return (
-      <LayoutProvider logoIcon={logoIcon} logoMain={logoMain} enableNotification={enableNotification} notification={notification}>
+      <LayoutProvider
+        logoIcon={logoIcon}
+        logoMain={logoMain}
+        enableNotification={enableNotification}
+        notification={notification}
+      >
         <Component ref={ref} {...props} />
       </LayoutProvider>
     );
@@ -252,7 +256,9 @@ function withLayoutProvider<P, T>(Component: React.ComponentType<P>) {
 function useLayoutContext(): ILayoutContext {
   const context = useContext(LayoutContext);
   if (context === undefined) {
-    throw new Error('[Layout] useLayoutContext: context undefined. Please provide a valid LayoutContext using LayoutProvider');
+    throw new Error(
+      '[Layout] useLayoutContext: context undefined. Please provide a valid LayoutContext using LayoutProvider'
+    );
   }
   return context;
 }
@@ -289,7 +295,6 @@ export type { ILayoutProviderProps };
 
 export {
   LayoutProvider,
-  withLayoutProvider,
   useLayoutContext,
   useLayoutDispatch,
   useLayoutDrawerState,
@@ -297,5 +302,6 @@ export {
   useLayoutMediaState,
   useLayoutNotificationsState,
   useLayoutState,
-  useLayoutThemeState
+  useLayoutThemeState,
+  withLayoutProvider
 };

package/src/components/Layout/ThemeProvider.tsx

@@ -0,0 +1,161 @@
+import { useLocalStorage } from '@/hooks';
+import { PropsWithChildren, createContext, useContext } from 'react';
+
+type ThemeMode = 'light' | 'dark';
+type ThemeOrientation = 'vertical' | 'horizontal';
+
+type ThemeDirection = 'ltr' | 'rtl';
+
+type ThemePresetColor =
+  | 'default'
+  | 'theme1'
+  | 'theme2'
+  | 'theme3'
+  | 'theme4'
+  | 'theme5'
+  | 'theme6'
+  | 'theme7'
+  | 'theme8';
+
+type ThemeFontFamily =
+  | `'Inter', sans-serif`
+  | `'Poppins', sans-serif`
+  | `'Roboto', sans-serif`
+  | `'Public Sans', sans-serif`;
+
+type ThemeConfig = {
+  fontFamily: ThemeFontFamily;
+  menuOrientation: ThemeOrientation;
+  miniDrawer: boolean;
+  container: boolean;
+  mode: ThemeMode;
+  presetColor: ThemePresetColor;
+  themeDirection: ThemeDirection;
+  appDefaultPath: string;
+  drawerWidth: number;
+  horizontalMaxItems: number;
+  spacing: number;
+
+  setFontFamily: (fontFamily: ThemeFontFamily) => void;
+  setMenuOrientation: (menuOrientation: ThemeOrientation) => void;
+  setMiniDrawer: (miniDrawer: boolean) => void;
+  setContainer: (container: boolean) => void;
+  setMode: (mode: ThemeMode) => void;
+  setPresetColor: (presetColor: ThemePresetColor) => void;
+  setThemeDirection: (themeDirection: ThemeDirection) => void;
+  setAppDefaultPath: (appDefaultPath: string) => void;
+  setDrawerWidth: (drawerWidth: number) => void;
+  setHorizontalMaxItems: (horizontalMaxItems: number) => void;
+  isVerticalLayout: (layout: ThemeDirection) => boolean;
+  isHorizontalLayout: (layout: ThemeDirection) => boolean;
+};
+
+type ThemeProvierProps = PropsWithChildren<{ initialConfig: ThemeConfig }>;
+
+function notImplemented(): void {
+  throw new Error('Method must be implemented');
+}
+
+const initialState: ThemeConfig = {
+  fontFamily: `'Inter', sans-serif`,
+  menuOrientation: 'vertical',
+  miniDrawer: false,
+  container: false,
+  mode: 'light',
+  presetColor: 'theme4',
+  themeDirection: 'ltr',
+  appDefaultPath: '/',
+  drawerWidth: 260,
+  horizontalMaxItems: 6,
+  spacing: 2,
+
+  setFontFamily: notImplemented,
+  setMenuOrientation: notImplemented,
+  setMiniDrawer: notImplemented,
+  setContainer: notImplemented,
+  setMode: notImplemented,
+  setPresetColor: notImplemented,
+  setThemeDirection: notImplemented,
+  setAppDefaultPath: notImplemented,
+  setDrawerWidth: notImplemented,
+  setHorizontalMaxItems: notImplemented,
+  isVerticalLayout: (_) => false,
+  isHorizontalLayout: (_) => false
+};
+
+function isVerticalLayout(layout: ThemeDirection) {
+  return layout === ('vertical' as ThemeDirection);
+}
+function isHorizontalLayout(layout: ThemeDirection) {
+  return layout === ('horizontal' as ThemeDirection);
+}
+
+const ThemeContext = createContext(initialState);
+
+function ThemeProvider({ initialConfig, children }: ThemeProvierProps): JSX.Element {
+  const [config, setConfig] = useLocalStorage('theme-config', { ...initialState, ...initialConfig });
+  function setFontFamily(fontFamily: ThemeFontFamily) {
+    setConfig((config: ThemeConfig) => ({ ...config, fontFamily }));
+  }
+  function setMenuOrientation(menuOrientation: ThemeOrientation) {
+    setConfig((config: ThemeConfig) => ({ ...config, menuOrientation }));
+  }
+  function setMiniDrawer(miniDrawer: boolean) {
+    setConfig((config: ThemeConfig) => ({ ...config, miniDrawer }));
+  }
+  function setContainer(container: boolean) {
+    setConfig((config: ThemeConfig) => ({ ...config, container }));
+  }
+  function setMode(mode: ThemeMode) {
+    setConfig((config: ThemeConfig) => ({ ...config, mode }));
+  }
+  function setPresetColor(presetColor: ThemePresetColor) {
+    setConfig((config: ThemeConfig) => ({ ...config, presetColor }));
+  }
+  function setThemeDirection(themeDirection: ThemeDirection) {
+    setConfig((config: ThemeConfig) => ({ ...config, themeDirection }));
+  }
+  function setAppDefaultPath(appDefaultPath: string) {
+    setConfig((config: ThemeConfig) => ({ ...config, appDefaultPath }));
+  }
+  function setDrawerWidth(drawerWidth: number) {
+    setConfig((config: ThemeConfig) => ({ ...config, drawerWidth }));
+  }
+  function setHorizontalMaxItems(horizontalMaxItems: number) {
+    setConfig((config: ThemeConfig) => ({ ...config, horizontalMaxItems }));
+  }
+  return (
+    <ThemeContext.Provider
+      value={{
+        ...(config as ThemeConfig),
+
+        setFontFamily,
+        setMenuOrientation,
+        setMiniDrawer,
+        setContainer,
+        setMode,
+        setPresetColor,
+        setThemeDirection,
+        setAppDefaultPath,
+        setDrawerWidth,
+        setHorizontalMaxItems,
+
+        isVerticalLayout,
+        isHorizontalLayout
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+}
+
+function useThemeContext(): ThemeConfig {
+  return useContext(ThemeContext);
+}
+
+function useThemeConfig(): ThemeConfig {
+  return useThemeContext();
+}
+
+export type { ThemeConfig, ThemeDirection, ThemeFontFamily, ThemeMode, ThemeOrientation, ThemePresetColor };
+export { ThemeContext, ThemeProvider, useThemeConfig, useThemeContext };

package/src/components/Layout/ThemeToggler.tsx

@@ -1,8 +1,8 @@
-import { SunOutlined, MoonOutlined } from '@ant-design/icons';
-import { useThemeConfig } from '../../hooks';
 import { HeaderToggleButton } from './Header';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { MoonOutlined, SunOutlined } from '@ant-design/icons';
 
-const ThemeToggler = () => {
+function ThemeToggler(): JSX.Element {
   const { mode, setMode } = useThemeConfig();
 
   return (
@@ -15,6 +15,6 @@ const ThemeToggler = () => {
       {mode === 'dark' ? <SunOutlined /> : <MoonOutlined />}
     </HeaderToggleButton>
   );
-};
+}
 
 export { ThemeToggler };

package/src/components/Layout/Wrapper.tsx

@@ -1,8 +1,9 @@
+import { useSx } from '@/hooks';
 import { Box, BoxProps } from '@mui/material';
 import { ForwardedRef, forwardRef } from 'react';
-import { useSx } from '../../hooks';
 
 type ILayoutWrapperProps = BoxProps;
+
 const LayoutWrapper = forwardRef((props: ILayoutWrapperProps, ref: ForwardedRef<HTMLElement>) => {
   const sx = useSx(props, { display: 'flex', width: '100%' });
 

package/src/components/Layout/index.ts

@@ -1,12 +1,14 @@
-export { Layout as default, type ILayoutProps } from './Layout';
 export * from './Content';
-export * from './Footer';
 export * from './Drawer';
+export * from './Error';
+export * from './Footer';
 export * from './Header';
 export * from './HorizontalBar';
-export * from './Navigation';
+export * from './Layout';
+export * from './MenuProvider';
 export * from './NavMenu';
+export * from './Navigation';
 export * from './Provider';
-export * from './Wrapper';
-export * from './Error';
+export * from './ThemeProvider';
 export * from './ThemeToggler';
+export * from './Wrapper';

package/src/components/Loadable.tsx

@@ -0,0 +1,12 @@
+import { Loader } from '@/components/Loader';
+import { Suspense } from 'react';
+
+function Loadable(Component: any) {
+  return (props: any) => (
+    <Suspense fallback={<Loader />}>
+      <Component {...props} />
+    </Suspense>
+  );
+}
+
+export { Loadable };

package/src/components/{Loader.jsx → Loader.tsx}

@@ -1,4 +1,4 @@
-import LinearProgress from '@mui/material/LinearProgress';
+import { LinearProgress } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
 const LoaderWrapper = styled('div')(({ theme }) => ({
@@ -12,10 +12,12 @@ const LoaderWrapper = styled('div')(({ theme }) => ({
   }
 }));
 
-const Loader = () => (
-  <LoaderWrapper>
-    <LinearProgress color="primary" />
-  </LoaderWrapper>
-);
+function Loader() {
+  return (
+    <LoaderWrapper>
+      <LinearProgress color="primary" />
+    </LoaderWrapper>
+  );
+}
 
-export default Loader;
+export { Loader };

package/src/components/Logo.tsx

@@ -0,0 +1,26 @@
+import logoIcon from '@/assets/logo-icon.png';
+import logoMain from '@/assets/logo-main.png';
+import { useThemeConfig } from '@/components/Layout/ThemeProvider';
+import { ButtonBase, SxProps } from '@mui/material';
+import { Link } from 'react-router-dom';
+
+const defaultIcon = <img src={logoIcon} alt="Applica" width="20px" />;
+const defaultMain = <img src={logoMain} alt="Applica" width="100px" />;
+type LogoProps = {
+  isIcon: boolean;
+  sx: SxProps;
+  to: string;
+  logoIcon: React.ReactNode;
+  logoMain: React.ReactNode;
+};
+function Logo({ isIcon, sx, to, logoIcon = defaultIcon, logoMain = defaultMain }: LogoProps) {
+  const { appDefaultPath } = useThemeConfig();
+  return (
+    <ButtonBase disableRipple component={Link} to={!to ? appDefaultPath : to} sx={sx}>
+      {isIcon ? logoIcon : logoMain}
+    </ButtonBase>
+  );
+}
+
+export { Logo };
+export type { LogoProps };

package/src/components/MainCard.tsx

@@ -1,8 +1,5 @@
-// @ts-ignore
 import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
 import { SxProps, lighten, useTheme } from '@mui/material/styles';
-
-import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
 
 const headerSX = {
@@ -10,7 +7,7 @@ const headerSX = {
   '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }
 };
 
-export type MainCardProps = {
+type MainCardProps = {
   /**
    * Indicates if the card must be rendered with a border.
    */
@@ -114,7 +111,8 @@ const MainCard = forwardRef(
           border: border ? '1px solid' : 'none',
           borderRadius: 1,
           borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
-          boxShadow: boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
+          boxShadow:
+            boxShadow && (!border || theme.palette.mode === 'dark') ? shadow || theme.customShadows.z1 : 'inherit',
           ':hover': {
             boxShadow: boxShadow ? shadow || theme.customShadows.z1 : 'inherit'
           },
@@ -139,39 +137,24 @@ const MainCard = forwardRef(
           ...sx
         }}
       >
-        {!darkTitle && title && (
-          /** @ts-ignore */
+        {!darkTitle && title ? (
+          // @ts-ignore
           <CardHeader sx={headerSX} title={title} action={secondary} subheader={subheader} />
-        )}
-        {/** @ts-ignore */}
-        {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h4">{title}</Typography>} action={secondary} />}
-        {title && divider && <Divider />}
-        {content && <CardContent sx={contentSX}>{children}</CardContent>}
+        ) : null}
+        {darkTitle && title ? (
+          <CardHeader
+            sx={headerSX}
+            title={<Typography variant="h4">{title as any}</Typography>}
+            action={secondary as any}
+          />
+        ) : null}
+        {title && divider ? <Divider /> : null}
+        {content ? <CardContent sx={contentSX}>{children}</CardContent> : null}
         {!content && children}
       </Card>
     );
-
-    // @ts-ignore-end
   }
 );
 
-MainCard.propTypes = {
-  border: PropTypes.bool,
-  boxShadow: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  subheader: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  content: PropTypes.bool,
-  contentClass: PropTypes.string,
-  contentSX: PropTypes.object,
-  darkTitle: PropTypes.bool,
-  divider: PropTypes.bool,
-  elevation: PropTypes.number,
-  secondary: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-  shadow: PropTypes.string,
-  sx: PropTypes.object,
-  title: PropTypes.oneOfType([PropTypes.node, PropTypes.string, PropTypes.object]),
-  modal: PropTypes.bool,
-  color: PropTypes.oneOf(['default', 'primary', 'secondary'])
-};
-
-export default MainCard;
+export { MainCard };
+export type { MainCardProps };

package/src/components/MainIcon.tsx

@@ -1,17 +1,20 @@
 import { Stack, Typography } from '@mui/material';
-export type MainIconProps = {
+
+type MainIconProps = {
   title: string;
 };
-const MainIcon = ({ title }: MainIconProps) => (
-  <Stack direction="row">
-    <Typography variant="h2" sx={{ fontWeight: 'regular', letterSpacing: -2.5 }}>
-      a.
-    </Typography>
-    &nbsp;
-    <Typography variant="h2" sx={{ fontWeight: 'bold' }}>
-      {title}
-    </Typography>
-  </Stack>
-);
-
-export default MainIcon;
+function MainIcon({ title }: MainIconProps) {
+  return (
+    <Stack direction="row">
+      <Typography variant="h2" sx={{ fontWeight: 'regular', letterSpacing: -2.5 }}>
+        a.
+      </Typography>
+      &nbsp;
+      <Typography variant="h2" sx={{ fontWeight: 'bold' }}>
+        {title}
+      </Typography>
+    </Stack>
+  );
+}
+export { MainIcon };
+export type { MainIconProps };

package/src/components/MenuPopover/{MenuPopover.jsx → MenuPopover.tsx}

@@ -1,10 +1,17 @@
-import { Popover } from '@mui/material';
-import PropTypes from 'prop-types';
-import React from 'react';
 import { StyledArrow } from './styles';
-import getPosition from './getPosition';
+import { getPosition } from '@/components/MenuPopover/getPosition';
+import { Arrow } from '@/components/MenuPopover/types';
+import { Popover } from '@mui/material';
+import { PropsWithChildren } from 'react';
+
+type MenuPopoverProps = PropsWithChildren<{
+  open: HTMLElement;
+  arrow?: Arrow;
+  disabledArrow?: boolean;
+  sx?: object;
+}>;
 
-const MenuPopover = ({ open, children, arrow = 'top-right', disabledArrow, sx, ...other }) => {
+function MenuPopover({ open, children, arrow = 'top-right', disabledArrow, sx, ...other }: MenuPopoverProps) {
   const { style, anchorOrigin, transformOrigin } = getPosition(arrow);
 
   return (
@@ -31,32 +38,11 @@ const MenuPopover = ({ open, children, arrow = 'top-right', disabledArrow, sx, .
       }}
       {...other}
     >
+      {/** @ts-ignore */}
       {!disabledArrow && <StyledArrow arrow={arrow} />}
-
       {children}
     </Popover>
   );
-};
-
-MenuPopover.propTypes = {
-  sx: PropTypes.object,
-  open: PropTypes.object,
-  children: PropTypes.node,
-  disabledArrow: PropTypes.bool,
-  arrow: PropTypes.oneOf([
-    'top-left',
-    'top-center',
-    'top-right',
-    'bottom-left',
-    'bottom-center',
-    'bottom-right',
-    'left-top',
-    'left-center',
-    'left-bottom',
-    'right-top',
-    'right-center',
-    'right-bottom'
-  ])
-};
+}
 
-export default MenuPopover;
+export { MenuPopover };

package/src/components/MenuPopover/{getPosition.jsx → getPosition.tsx}

@@ -1,4 +1,14 @@
-export default function getPosition(arrow) {
+import { Arrow } from '@/components/MenuPopover/types';
+
+type VerticalType = number | 'top' | 'bottom' | 'center';
+type HorizontalType = number | 'left' | 'right' | 'center';
+type GetPositionResultProps = {
+  style: Record<string, number>;
+  anchorOrigin: { vertical: VerticalType; horizontal: HorizontalType };
+  transformOrigin: { vertical: VerticalType; horizontal: HorizontalType };
+};
+
+function getPosition(arrow: Arrow): GetPositionResultProps {
   let props;
 
   switch (arrow) {
@@ -94,5 +104,7 @@ export default function getPosition(arrow) {
       };
   }
 
-  return props;
+  return props as GetPositionResultProps;
 }
+
+export { getPosition };

package/src/components/MenuPopover/index.tsx

@@ -0,0 +1,3 @@
+export * from './MenuPopover';
+export * from './getPosition';
+export * from './styles';