@coveord/plasma-mantine 48.18.0 → 48.21.0

package/src/components/modal-wizard/ModalWizard.tsx

@@ -1,10 +1,26 @@
-import {Button, Modal, ModalProps, Progress} from '@mantine/core';
+import {Box, Button, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';
 import {Children, ReactElement, useMemo, useState} from 'react';
 import {StickyFooter} from '../sticky-footer';
 import {ModalWizardStep} from './ModalWizardStep';
 import {Header} from '../header';
 
-interface ModalWizardProps extends Omit<ModalProps, 'centered' | 'title'> {
+const useStyles = createStyles(() => ({
+    modal: {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    body: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+    },
+}));
+
+type ModalWizardStylesNames = Selectors<typeof useStyles>;
+
+interface ModalWizardProps
+    extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,
+        Omit<ModalProps, 'centered' | 'title'> {
     /**
      * The label of the cancel button
      *
@@ -85,9 +101,22 @@ export const ModalWizard: ModalWizardType = ({
     isDirty,
     handleDirtyState,
     classNames,
+    className,
+    styles,
+    unstyled,
     children,
     ...modalProps
 }) => {
+    const {
+        classes: {modal, body},
+        cx,
+    } = useStyles(null, {
+        name: 'ModalWizard',
+        classNames,
+        styles,
+        unstyled,
+    });
+
     const [currentStepIndex, setCurrentStepIndex] = useState(0);
     const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);
 
@@ -116,11 +145,10 @@ export const ModalWizard: ModalWizardType = ({
     };
 
     const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);
-
     return (
         <Modal
             opened={opened}
-            classNames={classNames}
+            classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}
             centered
             title={
                 <Header
@@ -143,39 +171,42 @@ export const ModalWizard: ModalWizardType = ({
         >
             {currentStep.props.showProgressBar && <Progress color="teal" size="lg" value={getProgressMemo} />}
             {currentStep}
-            <StickyFooter py={0} px={0} pt="sm" borderTop>
-                <Button
-                    name={isFirstStep ? cancelButtonLabel : previousButtonLabel}
-                    disabled={false}
-                    size="sm"
-                    variant="outline"
-                    onClick={() => {
-                        if (isFirstStep) {
-                            closeModalWizard();
-                        } else {
-                            onPrevious?.();
-                            setCurrentStepIndex(currentStepIndex - 1);
-                        }
-                    }}
-                >
-                    {isFirstStep ? cancelButtonLabel : previousButtonLabel}
-                </Button>
-
-                <Button
-                    disabled={!isValid}
-                    size="sm"
-                    onClick={() => {
-                        if (isLastStep) {
-                            onFinish ? onFinish() : onClose();
-                        } else {
-                            onNext?.();
-                            setCurrentStepIndex(currentStepIndex + 1);
-                        }
-                    }}
-                >
-                    {isLastStep ? finishButtonLabel : nextButtonLabel}
-                </Button>
-            </StickyFooter>
+            <Box
+                sx={(theme) => ({
+                    marginTop: 'auto',
+                })}
+            >
+                <StickyFooter px={0} pt="sm" pb={0} borderTop>
+                    <Button
+                        name={isFirstStep ? cancelButtonLabel : previousButtonLabel}
+                        variant="outline"
+                        onClick={() => {
+                            if (isFirstStep) {
+                                closeModalWizard();
+                            } else {
+                                onPrevious?.();
+                                setCurrentStepIndex(currentStepIndex - 1);
+                            }
+                        }}
+                    >
+                        {isFirstStep ? cancelButtonLabel : previousButtonLabel}
+                    </Button>
+
+                    <Button
+                        disabled={!isValid}
+                        onClick={() => {
+                            if (isLastStep) {
+                                onFinish ? onFinish() : onClose();
+                            } else {
+                                onNext?.();
+                                setCurrentStepIndex(currentStepIndex + 1);
+                            }
+                        }}
+                    >
+                        {isLastStep ? finishButtonLabel : nextButtonLabel}
+                    </Button>
+                </StickyFooter>
+            </Box>
         </Modal>
     );
 };

package/src/components/modal-wizard/ModalWizardStep.tsx

@@ -41,11 +41,10 @@ export interface ModalWizardStepProps {
      * @default true
      */
     countsAsProgress?: boolean;
+    children: ReactElement<any, any>;
 }
 
-const ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => (
-    <div>{children}</div>
-);
+const ModalWizardStep: FunctionComponent<PropsWithChildren<ModalWizardStepProps>> = ({children}) => children;
 
 ModalWizardStep.defaultProps = {
     showProgressBar: true,

package/src/components/sticky-footer/StickyFooter.tsx

@@ -28,7 +28,7 @@ export const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps
         <>
             {borderTop ? <Divider size="xs" /> : null}
             <Box className={classes.footer}>
-                <Group position="right" spacing="xs" py="md" px="xl" {...others}>
+                <Group position="right" spacing="xs" pt="md" pb="md" px="xl" {...others}>
                     {children}
                 </Group>
             </Box>

package/dist/cjs/components/collection/Colllection.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/collection/Colllection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":"AAAA;;;;+BAIA;;;eAAA;;;oBAJ2B;IAI3B,WAAeA,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ"}

package/dist/definitions/components/collection/Colllection.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Colllection.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/collection/Colllection.styles.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,sBAAsB;CAAG;;;;;;AAE1C,wBASI"}

package/dist/esm/components/collection/Colllection.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/collection/Colllection.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport interface CollectionStylesParams {}\n\nexport default createStyles((theme) => ({\n    root: {},\n    item: {\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        alignItems: 'baseline',\n    },\n    itemDragging: {\n        boxShadow: theme.shadows.sm,\n    },\n}));\n"],"names":["createStyles","theme","root","item","backgroundColor","colorScheme","white","black","alignItems","itemDragging","boxShadow","shadows","sm"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAI3C,eAAeA,aAAa,SAACC;WAAW;QACpCC,MAAM,CAAC;QACPC,MAAM;YACFC,iBAAiBH,MAAMI,WAAW,KAAK,UAAUJ,MAAMK,KAAK,GAAGL,MAAMM,KAAK;YAC1EC,YAAY;QAChB;QACAC,cAAc;YACVC,WAAWT,MAAMU,OAAO,CAACC,EAAE;QAC/B;IACJ;GAAI"}