@sonardigital/carbon-ui 1.1.36 → 1.1.38

package/package.json

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

package/src/components/form/fields/form-list/FormList.tsx

@@ -77,7 +77,7 @@ export function FormList({
             <IconButton
               size="large"
               disabled={arrayFields.length === maxItems}
-              sx={{ marginTop: 30, cursor: 'default' }}
+              sx={{ marginTop: 3, cursor: 'default' }}
             >
               <CheckOutlined sx={{ width: 20, height: 20 }} />
             </IconButton>

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

@@ -0,0 +1,12 @@
+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,35 +1,27 @@
-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'> {
-  children: React.ReactNode;
+interface PopoverProviderProps extends Omit<MenuProps, 'open'> {
+   children: React.ReactNode;
 }
 
-export function DropdownPopover({ children, ...props }: PopoverProviderProps): React.ReactElement {
-  const methods = useDropdownContext();
+export function DropdownPopover({
+   children,
+   ...props
+}: PopoverProviderProps): React.ReactElement {
+   const methods = useDropdownContext();
 
-  return (
-    <Popover
-      open={methods.isOpen}
-      anchorEl={methods.anchorEl}
-      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',
-      }}
-      {...props}
-    >
-      {children}
-    </Popover>
-  );
+   return (
+      <Menu
+         anchorEl={methods.anchorEl}
+         open={methods.isOpen}
+         onClose={methods.close}
+         sx={{ mt: 1, gap: 1, ...props?.sx }}
+         slots={{ transition: Collapse }}
+         {...props}
+      >
+         {children}
+      </Menu>
+   );
 }

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

@@ -3,25 +3,36 @@ import React from 'react';
 import { useDropdownContext } from '../hooks/useDropdownContext';
 
 interface DropdownTriggerProps {
-  children: React.ReactNode;
-  onClick?: () => void;
+   children: React.ReactNode;
+   onClick?: () => void;
 }
 
-export function DropdownTrigger({ children, onClick }: DropdownTriggerProps): React.ReactElement {
-  const { open, setAnchorEl } = useDropdownContext();
+export function DropdownTrigger({
+   children,
+   onClick,
+}: DropdownTriggerProps): React.ReactElement {
+   const { open, setAnchorEl } = useDropdownContext();
 
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    if (event.detail === 0) {
-      return;
-    }
-    setAnchorEl(event.currentTarget);
-    open();
-    if (onClick) onClick();
-  };
+   const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {
+      if (event.detail === 0) {
+         return;
+      }
+      setAnchorEl(event.currentTarget);
+      open();
+      if (onClick) onClick();
+   };
 
-  return (
-    <ButtonBase sx={{ posiion: 'relative' }} disableRipple onClick={handleClick}>
-      {children}
-    </ButtonBase>
-  );
+   return (
+      <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,22 +1,22 @@
 import { useState } from 'react';
-import { DropdownContextType } from '../context/DropdownContext';
+import { DropdownContextType } from '../provider/DropdownContext';
 
 interface DropdownHookProps {
-  onClose?: () => void;
+   onClose?: () => void;
 }
 
 export const useDropdown = (props?: DropdownHookProps): DropdownContextType => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+   const [isOpen, setIsOpen] = useState(false);
+   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
-  const toggle = (): void => setIsOpen((prev) => !prev);
-  const open = (): void => {
-    setIsOpen(true);
-  };
-  const close = (): void => {
-    setIsOpen(false);
-    if (props?.onClose) props.onClose();
-  };
+   const toggle = (): void => setIsOpen(prev => !prev);
+   const open = (): void => {
+      setIsOpen(true);
+   };
+   const close = (): void => {
+      setIsOpen(false);
+      if (props?.onClose) props.onClose();
+   };
 
-  return { isOpen, toggle, open, close, anchorEl, setAnchorEl };
+   return { isOpen, toggle, open, close, anchorEl, setAnchorEl };
 };

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

@@ -1,11 +1,13 @@
 import { useContext } from 'react';
-import DropdownContext, { DropdownContextType } from '../context/DropdownContext';
+import DropdownContext, {
+   DropdownContextType,
+} from '../provider/DropdownContext';
 
 export const useDropdownContext = (): DropdownContextType => {
-  const context = useContext(DropdownContext);
+   const context = useContext(DropdownContext);
 
-  if (!context) {
-    throw new Error('useDropdown must be used within a DropdownProvider');
-  }
-  return context;
+   if (!context) {
+      throw new Error('useDropdown must be used within a DropdownProvider');
+   }
+   return context;
 };

package/src/components/layout/Dropdown/provider/DropdownProvider.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ClickAwayListener, Stack } from '@mui/material';
+import { useDropdown } from '../hooks/useDropdown';
+import DropdownContext from '../provider/DropdownContext';
+
+interface DropdownProviderProps {
+   methods?: ReturnType<typeof useDropdown>;
+   children: React.ReactNode;
+   onClose?: () => void;
+}
+
+export function DropdownProvider({
+   methods,
+   children,
+   onClose,
+}: DropdownProviderProps): React.ReactElement<DropdownProviderProps> {
+   const defaultMethods = useDropdown({ onClose: onClose });
+
+   return (
+      <DropdownContext.Provider value={methods ?? defaultMethods}>
+         <ClickAwayListener
+            onClickAway={methods ? methods.close : defaultMethods.close}
+         >
+            <Stack
+               flexDirection="column"
+               position="relative"
+               width="auto"
+               height="auto"
+            >
+               {children}
+            </Stack>
+         </ClickAwayListener>
+      </DropdownContext.Provider>
+   );
+}

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,

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

@@ -1,28 +0,0 @@
-import React from 'react';
-import { ClickAwayListener, Stack } from '@mui/material';
-import { useDropdown } from '../hooks/useDropdown';
-import DropdownContext from '../context/DropdownContext';
-
-interface DropdownProviderProps {
-  methods?: ReturnType<typeof useDropdown>;
-  children: React.ReactNode;
-  onClose?: () => void;
-}
-
-export function DropdownProvider({
-  methods,
-  children,
-  onClose,
-}: DropdownProviderProps): React.ReactElement<DropdownProviderProps> {
-  const defaultMethods = useDropdown({ onClose: onClose });
-
-  return (
-    <DropdownContext.Provider value={methods ?? defaultMethods}>
-      <ClickAwayListener onClickAway={methods ? methods.close : defaultMethods.close}>
-        <Stack flexDirection="column" position="relative" width="auto" height="auto">
-          {children}
-        </Stack>
-      </ClickAwayListener>
-    </DropdownContext.Provider>
-  );
-}