fix(striker-ui): add dialog with header, add wide option to dialog

striker-ui/components/ConfirmDialog.tsx

@@ -10,12 +10,7 @@ import {
   useRef,
 } from 'react';
 
-import {
+import { DialogActionArea, DialogScrollBox, DialogWithHeader } from './Dialog';
-  Dialog,
-  DialogActionArea,
-  DialogHeader,
-  DialogScrollBox,
-} from './Dialog';
 import FlexBox from './FlexBox';
 import sxstring from '../lib/sxstring';
 import { BodyText } from './Text';
@@ -46,6 +41,7 @@ const ConfirmDialog: ForwardRefExoticComponent<
       scrollBoxProps,
       showClose,
       titleText,
+      wide,
       // Dependents
       content = children,
     },
@@ -77,13 +73,15 @@ const ConfirmDialog: ForwardRefExoticComponent<
     );
 
     return (
-      <Dialog
+      <DialogWithHeader
         dialogProps={dialogProps}
+        header={titleText}
         loading={loading}
         openInitially={openInitially}
         ref={dialogRef}
+        showClose={showClose}
+        wide={wide}
       >
-        <DialogHeader showClose={showClose}>{titleText}</DialogHeader>
         <FlexBox {...contentContainerProps}>
           {bodyElement}
           {preActionArea}
@@ -109,7 +107,7 @@ const ConfirmDialog: ForwardRefExoticComponent<
             }}
           />
         </FlexBox>
-      </Dialog>
+      </DialogWithHeader>
     );
   },
 );

striker-ui/components/Dialog/Dialog.tsx

@@ -26,6 +26,7 @@ const Dialog: ForwardRefExoticComponent<
     dialogProps = {},
     loading,
     openInitially = false,
+    wide,
   } = props;
 
   const {
@@ -52,10 +53,11 @@ const Dialog: ForwardRefExoticComponent<
 
   const paperSx = useMemo<SxProps<Theme>>(
     () => ({
+      minWidth: wide ? { xs: 'calc(100%)', md: '50em' } : null,
       overflow: 'visible',
       ...externalPaperSx,
     }),
-    [externalPaperSx],
+    [externalPaperSx, wide],
   );
 
   useImperativeHandle(

striker-ui/components/Dialog/DialogWithHeader.tsx

@@ -0,0 +1,43 @@
+import {
+  ForwardRefExoticComponent,
+  PropsWithChildren,
+  RefAttributes,
+  forwardRef,
+} from 'react';
+
+import Dialog from './Dialog';
+import DialogHeader from './DialogHeader';
+
+const DialogWithHeader: ForwardRefExoticComponent<
+  PropsWithChildren<DialogWithHeaderProps> &
+    RefAttributes<DialogForwardedRefContent>
+> = forwardRef<DialogForwardedRefContent, DialogWithHeaderProps>(
+  (props, ref) => {
+    const {
+      children,
+      dialogProps,
+      header,
+      loading,
+      openInitially,
+      showClose,
+      wide,
+    } = props;
+
+    return (
+      <Dialog
+        dialogProps={dialogProps}
+        loading={loading}
+        openInitially={openInitially}
+        ref={ref}
+        wide={wide}
+      >
+        <DialogHeader showClose={showClose}>{header}</DialogHeader>
+        {children}
+      </Dialog>
+    );
+  },
+);
+
+DialogWithHeader.displayName = 'DialogWithHeader';
+
+export default DialogWithHeader;

striker-ui/components/Dialog/index.tsx

@@ -2,10 +2,12 @@ import Dialog from './Dialog';
 import DialogActionGroup from './DialogActionGroup';
 import DialogHeader from './DialogHeader';
 import DialogScrollBox from './DialogScrollBox';
+import DialogWithHeader from './DialogWithHeader';
 
 export {
   Dialog,
   DialogActionGroup as DialogActionArea,
   DialogHeader,
   DialogScrollBox,
+  DialogWithHeader,
 };

striker-ui/components/FormDialog.tsx

@@ -57,20 +57,12 @@ const FormDialog: ForwardRefExoticComponent<
 
     return (
       <ConfirmDialog
-        dialogProps={{
+        dialogProps={dialogProps}
-          ...dialogProps,
-          PaperProps: {
-            ...dialogProps?.PaperProps,
-            sx: {
-              minWidth: { xs: '90%', md: '50em' },
-              ...dialogProps?.PaperProps?.sx,
-            },
-          },
-        }}
         contentContainerProps={formBodyProps}
         proceedButtonProps={{ ...proceedButtonProps, type: 'submit' }}
         scrollContent={scrollContent}
         scrollBoxProps={formScrollBoxProps}
+        wide
         {...restProps}
         ref={ref}
       >

striker-ui/types/ConfirmDialog.d.ts

@@ -19,8 +19,7 @@ type ConfirmDialogOptionalProps = {
   scrollBoxProps?: import('@mui/material').BoxProps;
 };
 
-type ConfirmDialogProps = DialogProps &
+type ConfirmDialogProps = Omit<DialogWithHeaderProps, 'header'> &
-  DialogHeaderProps &
   ConfirmDialogOptionalProps & {
     actionProceedText: string;
     titleText: import('react').ReactNode;

striker-ui/types/Dialog.d.ts

@@ -7,20 +7,13 @@ type DialogOptionalProps = {
   dialogProps?: Partial<import('@mui/material').DialogProps>;
   loading?: boolean;
   openInitially?: boolean;
+  wide?: boolean;
 };
 
 type DialogProps = DialogOptionalProps;
 
 type DialogForwardedRefContent = DialogContextContent;
 
-/** DialogHeader */
-
-type DialogHeaderOptionalProps = {
-  showClose?: boolean;
-};
-
-type DialogHeaderProps = DialogHeaderOptionalProps;
-
 /** DialogActionGroup */
 
 type ButtonClickEventHandler = Exclude<
@@ -41,3 +34,18 @@ type DialogActionGroupOptionalProps = {
 };
 
 type DialogActionGroupProps = DialogActionGroupOptionalProps;
+
+/** DialogHeader */
+
+type DialogHeaderOptionalProps = {
+  showClose?: boolean;
+};
+
+type DialogHeaderProps = DialogHeaderOptionalProps;
+
+/** DialogWithHeader */
+
+type DialogWithHeaderProps = DialogProps &
+  DialogHeaderProps & {
+    header: import('react').ReactNode;
+  };