@sonardigital/carbon-ui 1.1.37 → 1.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sonardigital/carbon-ui",
-  "version": "1.1.37",
+  "version": "1.1.39",
   "description": "",
   "main": "src/index.ts",
   "files": [

package/src/components/layout/Dropdown/components/DropdownItem.tsx

@@ -0,0 +1,8 @@
+import { MenuItem } from '@mui/material';
+import { useDropdown } from 'src/components/layout';
+
+export function DropdownItem({ children }: { children: React.ReactNode }): React.ReactElement {
+  const methods = useDropdown();
+
+  return <MenuItem onClick={methods.close}>{children}</MenuItem>;
+}

package/src/components/layout/Dropdown/components/DropdownPopover.tsx

@@ -1,8 +1,8 @@
-import { Popover, PopoverProps } from '@mui/material';
+import { Collapse, Menu, MenuProps } from '@mui/material';
 import React from 'react';
 import { useDropdownContext } from '../hooks/useDropdownContext';
 
-interface PopoverProviderProps extends Omit<PopoverProps, 'open'> {
+interface PopoverProviderProps extends Omit<MenuProps, 'open'> {
   children: React.ReactNode;
 }
 
@@ -10,26 +10,15 @@ export function DropdownPopover({ children, ...props }: PopoverProviderProps): R
   const methods = useDropdownContext();
 
   return (
-    <Popover
-      open={methods.isOpen}
+    <Menu
       anchorEl={methods.anchorEl}
+      open={methods.isOpen}
       onClose={methods.close}
-      sx={{ marginTop: 0.8, borderRadius: 0, width: '100%' }}
-      anchorPosition={{
-        top: 0,
-        left: 0,
-      }}
-      transformOrigin={{
-        vertical: 'top',
-        horizontal: 'right',
-      }}
-      anchorOrigin={{
-        vertical: 'bottom',
-        horizontal: 'right',
-      }}
+      sx={{ mt: 1, gap: 1, ...props?.sx }}
+      slots={{ transition: Collapse }}
       {...props}
     >
       {children}
-    </Popover>
+    </Menu>
   );
 }

package/src/components/layout/Dropdown/components/DropdownTrigger.tsx

@@ -20,7 +20,15 @@ export function DropdownTrigger({ children, onClick }: DropdownTriggerProps): Re
   };
 
   return (
-    <ButtonBase sx={{ posiion: 'relative' }} disableRipple onClick={handleClick}>
+    <ButtonBase
+      sx={{
+        position: 'relative',
+        width: '100%',
+        justifyContent: 'start',
+      }}
+      disableRipple
+      onClick={handleClick}
+    >
       {children}
     </ButtonBase>
   );

package/src/components/layout/Dropdown/components/index.ts

@@ -1,3 +1,3 @@
-export * from './DropdownProvider';
 export * from './DropdownTrigger';
 export * from './DropdownPopover';
+export * from './DropdownItem';

package/src/components/layout/Dropdown/hooks/useDropdown.ts

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { DropdownContextType } from '../context/DropdownContext';
+import { DropdownContextType } from '../provider/DropdownContext';
 
 interface DropdownHookProps {
   onClose?: () => void;

package/src/components/layout/Dropdown/hooks/useDropdownContext.ts

@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import DropdownContext, { DropdownContextType } from '../context/DropdownContext';
+import DropdownContext, { DropdownContextType } from '../provider/DropdownContext';
 
 export const useDropdownContext = (): DropdownContextType => {
   const context = useContext(DropdownContext);

package/src/components/layout/Dropdown/index.ts

@@ -1,2 +1,3 @@
 export * from './components';
 export * from './hooks';
+export * from './provider';

package/src/components/layout/Dropdown/{components → provider}/DropdownProvider.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ClickAwayListener, Stack } from '@mui/material';
 import { useDropdown } from '../hooks/useDropdown';
-import DropdownContext from '../context/DropdownContext';
+import DropdownContext from '../provider/DropdownContext';
 
 interface DropdownProviderProps {
   methods?: ReturnType<typeof useDropdown>;

package/src/components/layout/Dropdown/provider/index.ts

@@ -0,0 +1,2 @@
+export * from './DropdownProvider';
+export * from './DropdownContext';

package/src/theme/constants/components.ts

@@ -17,6 +17,7 @@ const borderRadius = 1;
 export const components: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme> = {
   MuiMenuItem: {
     defaultProps: {
+      disableRipple: true,
       sx: {
         padding: 1.1,
         paddingX: 1.5,