@cyber-harbour/ui 1.0.72 → 1.0.74

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-harbour/ui",
-  "version": "1.0.72",
+  "version": "1.0.74",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",

package/src/Core/ContextMenu/ContextMenu.tsx

@@ -19,6 +19,7 @@ interface ContextMenuProps {
   hasBorder?: boolean;
   maxHeight?: number;
   matchAnchorWidth?: boolean;
+  anchorIcon?: any;
 }
 
 export const ContextMenu = ({
@@ -36,6 +37,7 @@ export const ContextMenu = ({
   hasBorder = true,
   maxHeight = 500,
   matchAnchorWidth = false,
+  anchorIcon,
 }: ContextMenuProps) => {
   const [anchorWidth, setAnchorWidth] = useState<number>(0);
   const buttonRef = useRef<HTMLButtonElement | null>(null);
@@ -66,6 +68,7 @@ export const ContextMenu = ({
         zIndex: `${9999}`,
         width: anchorWidth && matchAnchorWidth ? `${anchorWidth}px` : undefined,
       }}
+      containerClassName="cb-ui-context-menu"
     >
       <StyledButton
         onClick={onClick}
@@ -78,11 +81,12 @@ export const ContextMenu = ({
         $hasBorder={hasBorder}
       >
         <StyledAnchor>{anchor}</StyledAnchor>
-        {isOpen ? (
-          <ChevronUpIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
-        ) : (
-          <ChevronDownIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
-        )}
+        {anchorIcon ||
+          (isOpen ? (
+            <ChevronUpIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
+          ) : (
+            <ChevronDownIcon width={theme.contextMenu.icon.size} height={theme.contextMenu.icon.size} />
+          ))}
       </StyledButton>
     </Popover>
   );

package/src/Core/Drawer/Drawer.tsx

@@ -36,7 +36,8 @@ const DrawerWithOutclick = ({ onClose, children, width, header }: DrawerProps) =
       if (
         drawerRef.current &&
         !drawerRef.current.contains(target) &&
-        !target.closest('.react-tiny-popover-container')
+        !target.closest('.cb-ui-context-menu') &&
+        !target.closest('.cb-ui-backdrop')
       ) {
         onClose();
       }

package/src/Core/Modal/Modal.tsx

@@ -0,0 +1,116 @@
+import styled from 'styled-components';
+import { Overlay } from '../Overlay';
+import { createStyledComponent, FabricComponent, generatePropertySpaceStyle, propToRem, pxToRem } from '../../Theme';
+
+type ModalProps = {
+  onClose: () => void;
+  width?: number;
+  children: any;
+  isNested?: boolean;
+};
+
+interface ModalChildrenProps extends FabricComponent<Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>> {
+  children: any;
+}
+
+export const Modal = ({ children, onClose, isNested = false, width }: ModalProps) => {
+  return (
+    <Overlay onOutsideClick={onClose} isLocked={!isNested}>
+      <StyledContainer $width={width}>{children}</StyledContainer>
+    </Overlay>
+  );
+};
+
+export const ModalHeader = createStyledComponent<ModalChildrenProps>(
+  styled.div(({ theme, p = theme.modal.padding, px, pl, pr }) => {
+    const left = pl || px || p;
+    const right = pr || px || p;
+    return `
+    grid-area: modal-header;
+    position: relative;
+    &::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: ${typeof left === 'string' ? left : pxToRem(left)};
+        right: ${typeof right === 'string' ? right : pxToRem(right)};
+        height: ${pxToRem(1)};
+        background-color: ${theme.modal.borderColor};
+    }
+
+    ${generatePropertySpaceStyle(theme, 'padding', p)};
+  `;
+  }),
+  {
+    ignoreStyles: ['padding'],
+  }
+);
+
+export const ModalBody = createStyledComponent<ModalChildrenProps>(
+  styled.div(
+    ({ theme, p = theme.modal.padding }) => `
+    grid-area: modal-body;
+    max-height: 100%;
+    overflow-y: auto;
+    ${generatePropertySpaceStyle(theme, 'padding', p)};
+  `
+  ),
+  {
+    ignoreStyles: ['padding'],
+  }
+);
+
+export const ModalFooter = createStyledComponent<ModalChildrenProps>(
+  styled.div(({ theme, p = theme.modal.padding, px, pl, pr }) => {
+    const left = pl || px || p;
+    const right = pr || px || p;
+    return `
+    grid-area: modal-footer;
+     position: relative;
+     &::after {
+        content: '';
+        position: absolute;
+        top: ${pxToRem(1)};
+        left: ${typeof left === 'string' ? left : pxToRem(left)};
+        right: ${typeof right === 'string' ? right : pxToRem(right)};
+        height: ${pxToRem(1)};
+        background-color: ${theme.modal.borderColor};
+    }
+    ${generatePropertySpaceStyle(theme, 'padding', p)};
+  `;
+  }),
+  {
+    ignoreStyles: ['padding'],
+  }
+);
+
+const StyledContainer = styled.div<{ $width?: number }>(
+  ({ theme, $width = theme.modal.width }) => `
+  display: grid;
+   grid-template-areas:
+    "modal-header"
+    "modal-body"
+    "modal-footer";
+  grid-template-rows: auto 1fr auto;
+  position: absolute;
+  z-index:${theme.zIndex.modal};
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: ${theme.modal.background};
+  @media (min-width: ${theme.breakpoints.m}px) {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: auto;
+    max-height: 90dvh;
+    width: ${propToRem($width, theme.baseSize)};
+    max-width: 90vw;
+    border: 1px solid ${theme.modal.borderColor};
+    box-shadow: ${theme.modal.shadow};
+    border-radius: ${theme.modal.borderRadius};
+  }
+`
+);

package/src/Core/Modal/index.ts

@@ -0,0 +1 @@
+export * from './Modal';

package/src/Core/Overlay/Overlay.tsx

@@ -12,14 +12,16 @@ export type OverlayProps = {
   appendPosition?: Position;
   prepend?: any;
   prependPosition?: Position;
+  isLocked?: boolean;
 };
 
 export const Overlay = createComponent<OverlayProps>(
-  ({ children, onOutsideClick, prepend, append, prependPosition, appendPosition, ...props }) => {
-    useBodyScrollLock(true);
+  ({ children, onOutsideClick, prepend, append, prependPosition, appendPosition, isLocked = true, ...props }) => {
+    useBodyScrollLock(isLocked);
     return createPortal(
       <Container
         {...props}
+        className="cb-ui-backdrop"
         onClick={(e) => {
           if (e.target === e.currentTarget && onOutsideClick) {
             onOutsideClick();

package/src/Core/index.ts

@@ -24,3 +24,4 @@ export * from './Drawer';
 export * from './Tooltip';
 export * from './ContentLoader';
 export * from './Overlay';
+export * from './Modal';

package/src/Theme/themes/dark.ts

@@ -992,6 +992,14 @@ export const darkThemePx: Theme = {
     gap: 6,
     background: 'rgba(0, 0, 0, 0.5)',
   },
+  modal: {
+    padding: 20,
+    width: 545,
+    shadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
+    borderColor: '#1E2226',
+    background: '#0F1317',
+    borderRadius: 8,
+  },
 };
 
 export const darkTheme = convertPaletteToRem(darkThemePx, darkThemePx.baseSize) as DefaultTheme;

package/src/Theme/themes/light.ts

@@ -991,6 +991,14 @@ export const lightThemePx: Theme = {
     gap: 6,
     background: 'rgba(16, 16, 16, 0.1)',
   },
+  modal: {
+    padding: 20,
+    width: 545,
+    shadow: '0px 0px 10px 0px rgba(0, 0, 0, 0.25)',
+    borderColor: '#EBEBEB',
+    background: '#FFFFFF',
+    borderRadius: 8,
+  },
 };
 
 export const lightTheme = convertPaletteToRem(lightThemePx, lightThemePx.baseSize) as DefaultTheme;

package/src/Theme/types.ts

@@ -335,6 +335,14 @@ export type Theme = {
     background: string;
     gap: string | number;
   };
+  modal: {
+    padding: string | number;
+    width: number;
+    shadow: string;
+    borderColor: string;
+    background: string;
+    borderRadius: string | number;
+  };
 };
 
 //TODO check and refactoring

package/src/Theme/utils.ts

@@ -88,8 +88,8 @@ const IGNORE_CONVERT_KEYS: Record<string, string[] | boolean> = {
  */
 export const propToRem = (value: number | string, baseSize: number = 16): string => {
   // Check if value ends with units that should not be converted to rem
-  if (typeof value === 'string' && /(%|d?vh|d?vw)$/.test(value.trim())) {
-    return value; // Return percentage and viewport values as-is
+  if (typeof value === 'string' && /(%|d?vh|d?vw|d?rem)$/.test(value.trim())) {
+    return value; // Return percentage, viewport and rem values as-is
   }
 
   const numericValue = typeof value === 'string' ? parseFloat(value) : value;