@sonardigital/carbon-ui 1.1.49 → 1.1.52

package/package.json

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

package/src/components/layout/Modal/components/ModalContent.tsx

@@ -0,0 +1,44 @@
+import { Modal, Stack, SxProps } from '@mui/material';
+import React from 'react';
+import { useModalContext } from '../hooks/useModalContext';
+
+interface ModalContentProps {
+  children: React.ReactElement;
+  sx?: SxProps;
+}
+
+export function ModalContent({ children, sx }: ModalContentProps): React.ReactElement {
+  const { isOpen, close } = useModalContext();
+
+  return (
+    <Modal onClose={close} open={isOpen}>
+      <Stack
+        bgcolor="background.default"
+        paddingY={1}
+        zIndex={1200}
+        border="none"
+        sx={{
+          borderRadius: 2,
+          position: 'absolute',
+          top: '50%',
+          left: '50%',
+          outline: 'none',
+          transform: 'translate(-50%, -50%)',
+          boxSizing: 'border-box',
+          padding: 5,
+          minHeight: {
+            sx: 500,
+            sm: 300,
+          },
+          minWidth: {
+            xs: '100%',
+            sm: 600,
+          },
+          ...sx,
+        }}
+      >
+        {children}
+      </Stack>
+    </Modal>
+  );
+}

package/src/components/layout/Modal/components/ModalTrigger.tsx

@@ -0,0 +1,17 @@
+import { Stack } from '@mui/material';
+import React from 'react';
+import { useModalContext } from '../hooks/useModalContext';
+
+interface ModalTriggerProps {
+  children: React.ReactNode;
+}
+
+export function ModalTrigger({ children }: ModalTriggerProps): React.ReactElement {
+  const { open } = useModalContext();
+
+  return (
+    <Stack sx={{ position: 'relative' }} onClick={open}>
+      {children}
+    </Stack>
+  );
+}

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

@@ -0,0 +1,2 @@
+export * from './ModalTrigger';
+export * from './ModalContent';

package/src/components/layout/Modal/hooks/index.ts

@@ -0,0 +1,2 @@
+export * from './useModal';
+export * from './useModalContext';

package/src/components/layout/Modal/hooks/useModal.ts

@@ -0,0 +1,19 @@
+import { useState } from 'react';
+import { ModalContextType } from '../provider/ModalContext';
+
+export const useModal = (props?: { isOpen?: boolean }): ModalContextType => {
+  const [isOpen, setIsOpen] = useState(props?.isOpen || false);
+
+  const open = (): void => {
+    setIsOpen(true);
+  };
+  const close = (): void => {
+    setIsOpen(false);
+  };
+
+  return {
+    isOpen,
+    open,
+    close,
+  };
+};

package/src/components/layout/Modal/hooks/useModalContext.ts

@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import ModalContext, { ModalContextType } from '../provider/ModalContext';
+
+export const useModalContext = (): ModalContextType => {
+  const context = useContext(ModalContext);
+
+  if (!context) {
+    throw new Error('useModal must be used within a DialogProvider');
+  }
+  return context;
+};

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

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

package/src/components/layout/Modal/provider/ModalContext.ts

@@ -0,0 +1,15 @@
+import { Context, createContext } from 'react';
+
+export interface ModalContextType {
+  isOpen: boolean;
+  open: () => void;
+  close: () => void;
+}
+
+const ModalContext: Context<ModalContextType> = createContext<ModalContextType>({
+  isOpen: false,
+  open: () => {},
+  close: () => {},
+});
+
+export default ModalContext;

package/src/components/layout/Modal/provider/ModalProvider.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useModal } from '../hooks/useModal';
+import ModalContext from './ModalContext';
+
+interface ModalProviderProps {
+  children: React.ReactNode;
+  methods: ReturnType<typeof useModal>;
+}
+
+export function ModalProvider({
+  methods,
+  children,
+}: ModalProviderProps): React.ReactElement<ModalProviderProps> {
+  return <ModalContext.Provider value={methods}>{children}</ModalContext.Provider>;
+}

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

@@ -0,0 +1,2 @@
+export * from './ModalProvider';
+export * from './ModalContext';

package/src/components/layout/index.ts

@@ -3,3 +3,4 @@ export * from './Dropdown';
 export * from './ScrollToTop/ScrollToTop';
 export * from './error-boundary';
 export * from './delay';
+export * from './Modal';