@coveord/plasma-mantine 48.18.1 → 48.22.3

package/dist/esm/components/sticky-footer/StickyFooter.js

@@ -29,7 +29,8 @@ export var StickyFooter = function(_param) {
                 children: /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
                     position: "right",
                     spacing: "xs",
-                    py: "md",
+                    pt: "md",
+                    pb: "md",
                     px: "xl"
                 }, others), {
                     children: children

package/dist/esm/components/sticky-footer/StickyFooter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Divider, Group} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nexport interface StickyFooterProps extends DefaultProps {\n    /**\n     * Whether a border is render on top of the footer\n     */\n    borderTop?: boolean;\n}\n\nconst useStyles = createStyles(() => ({\n    footer: {\n        position: 'sticky',\n        bottom: 0,\n        zIndex: 1,\n        backgroundColor: 'white',\n    },\n}));\n\nexport const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({\n    borderTop,\n    children,\n    ...others\n}) => {\n    const {classes} = useStyles();\n\n    return (\n        <>\n            {borderTop ? <Divider size=\"xs\" /> : null}\n            <Box className={classes.footer}>\n                <Group position=\"right\" spacing=\"xs\" py=\"md\" px=\"xl\" {...others}>\n                    {children}\n                </Group>\n            </Box>\n        </>\n    );\n};\n"],"names":["Box","createStyles","Divider","Group","useStyles","footer","position","bottom","zIndex","backgroundColor","StickyFooter","borderTop","children","others","classes","size","className","spacing","py","px"],"mappings":"AAAA;;;;AAAA,SAAQA,GAAG,EAAEC,YAAY,EAAgBC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AAU9E,IAAMC,YAAYH,aAAa;WAAO;QAClCI,QAAQ;YACJC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,iBAAiB;QACrB;IACJ;;AAEA,OAAO,IAAMC,eAAwE,iBAI/E;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAM,AAACE,UAAWV,YAAXU;IAEP,qBACI;;YACKH,0BAAY,KAACT;gBAAQa,MAAK;iBAAU,IAAI;0BACzC,KAACf;gBAAIgB,WAAWF,QAAQT,MAAM;0BAC1B,cAAA,KAACF;oBAAMG,UAAS;oBAAQW,SAAQ;oBAAKC,IAAG;oBAAKC,IAAG;mBAASN;8BACpDD;;;;;AAKrB,EAAE"}
+{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {Box, createStyles, DefaultProps, Divider, Group} from '@mantine/core';\nimport {FunctionComponent, PropsWithChildren} from 'react';\n\nexport interface StickyFooterProps extends DefaultProps {\n    /**\n     * Whether a border is render on top of the footer\n     */\n    borderTop?: boolean;\n}\n\nconst useStyles = createStyles(() => ({\n    footer: {\n        position: 'sticky',\n        bottom: 0,\n        zIndex: 1,\n        backgroundColor: 'white',\n    },\n}));\n\nexport const StickyFooter: FunctionComponent<PropsWithChildren<StickyFooterProps>> = ({\n    borderTop,\n    children,\n    ...others\n}) => {\n    const {classes} = useStyles();\n\n    return (\n        <>\n            {borderTop ? <Divider size=\"xs\" /> : null}\n            <Box className={classes.footer}>\n                <Group position=\"right\" spacing=\"xs\" pt=\"md\" pb=\"md\" px=\"xl\" {...others}>\n                    {children}\n                </Group>\n            </Box>\n        </>\n    );\n};\n"],"names":["Box","createStyles","Divider","Group","useStyles","footer","position","bottom","zIndex","backgroundColor","StickyFooter","borderTop","children","others","classes","size","className","spacing","pt","pb","px"],"mappings":"AAAA;;;;AAAA,SAAQA,GAAG,EAAEC,YAAY,EAAgBC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AAU9E,IAAMC,YAAYH,aAAa;WAAO;QAClCI,QAAQ;YACJC,UAAU;YACVC,QAAQ;YACRC,QAAQ;YACRC,iBAAiB;QACrB;IACJ;;AAEA,OAAO,IAAMC,eAAwE,iBAI/E;QAHFC,mBAAAA,WACAC,kBAAAA,UACGC;QAFHF;QACAC;;IAGA,IAAM,AAACE,UAAWV,YAAXU;IAEP,qBACI;;YACKH,0BAAY,KAACT;gBAAQa,MAAK;iBAAU,IAAI;0BACzC,KAACf;gBAAIgB,WAAWF,QAAQT,MAAM;0BAC1B,cAAA,KAACF;oBAAMG,UAAS;oBAAQW,SAAQ;oBAAKC,IAAG;oBAAKC,IAAG;oBAAKC,IAAG;mBAASP;8BAC5DD;;;;;AAKrB,EAAE"}

package/dist/esm/components/table/TableFilter.js

@@ -1,6 +1,7 @@
 import _define_property from "@swc/helpers/src/_define_property.mjs";
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { SearchSize16Px } from "@coveord/plasma-react-icons";
 import { createStyles, TextInput } from "@mantine/core";
@@ -15,9 +16,19 @@ var useStyles = createStyles(function(theme) {
         }
     };
 });
-export var TableFilter = function(param) {
-    var _param_placeholder = param.placeholder, placeholder = _param_placeholder === void 0 ? "Search by any field" : _param_placeholder;
-    var _useStyles = useStyles(), classes = _useStyles.classes, cx = _useStyles.cx;
+export var TableFilter = function(_param) {
+    var _param_placeholder = _param.placeholder, placeholder = _param_placeholder === void 0 ? "Search by any field" : _param_placeholder, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, others = _object_without_properties(_param, [
+        "placeholder",
+        "classNames",
+        "styles",
+        "unstyled"
+    ]);
+    var _useStyles = useStyles(null, {
+        name: "TableHeader",
+        classNames: classNames,
+        styles: styles,
+        unstyled: unstyled
+    }), classes = _useStyles.classes, cx = _useStyles.cx;
     var _useTable = useTable(), state = _useTable.state, setState = _useTable.setState;
     var handleSearchChange = function(event) {
         var value = event.currentTarget.value;
@@ -27,7 +38,7 @@ export var TableFilter = function(param) {
             });
         });
     };
-    return /*#__PURE__*/ _jsx(TextInput, {
+    return /*#__PURE__*/ _jsx(TextInput, _object_spread({
         className: classes.wrapper,
         placeholder: placeholder,
         mb: "md",
@@ -37,7 +48,7 @@ export var TableFilter = function(param) {
         }),
         value: state.globalFilter,
         onChange: handleSearchChange
-    });
+    }, others));
 };
 
 //# sourceMappingURL=TableFilter.js.map

package/dist/esm/components/table/TableFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ninterface TableFilterProps {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder = 'Search by any field'}) => {\n    const {classes, cx} = useStyles();\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n        />\n    );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","className","mb","rightSection","height","onChange"],"mappings":"AAAA;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAO,gBAAgB;AAGtD,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAWA,OAAO,IAAMC,cAAmD,gBAA2C;mCAAzCC,aAAAA,8CAAc;IAC5E,IAAsBT,aAAAA,aAAfU,UAAeV,WAAfU,SAASC,KAAMX,WAANW;IAChB,IAA0BZ,YAAAA,YAAnBa,QAAmBb,UAAnBa,OAAOC,WAAYd,UAAZc;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,KAAClB;QACGsB,WAAWV,QAAQR,OAAO;QAC1BO,aAAaA;QACbY,IAAG;QACHC,4BAAc,KAAC1B;YAAe2B,QAAQ;YAAIH,WAAWT,GAAI,qBAACD,QAAQN,KAAK,EAAG,CAACQ,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBK,UAAUV;;AAGtB,EAAE"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","className","mb","rightSection","height","onChange"],"mappings":"AAAA;;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAgC,gBAAgB;AAG/E,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BjB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,KAACvB;QACG2B,WAAWV,QAAQb,OAAO;QAC1BO,aAAaA;QACbiB,IAAG;QACHC,4BAAc,KAAC/B;YAAegC,QAAQ;YAAIH,WAAWT,GAAI,qBAACD,QAAQX,KAAK,EAAG,CAACa,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBK,UAAUV;OACNN;AAGhB,EAAE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "48.18.1",
+  "version": "48.22.3",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

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/src/components/table/TableFilter.tsx

@@ -1,5 +1,5 @@
 import {SearchSize16Px} from '@coveord/plasma-react-icons';
-import {createStyles, TextInput} from '@mantine/core';
+import {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';
 import {TableState} from '@tanstack/react-table';
 import {ChangeEvent, FunctionComponent} from 'react';
 import {useTable} from './useTable';
@@ -13,7 +13,8 @@ const useStyles = createStyles((theme) => ({
     },
 }));
 
-interface TableFilterProps {
+type TableFilterStylesNames = Selectors<typeof useStyles>;
+interface TableFilterProps extends DefaultProps<TableFilterStylesNames> {
     /**
      * The placeholder for the filter input
      *
@@ -22,8 +23,14 @@ interface TableFilterProps {
     placeholder?: string;
 }
 
-export const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder = 'Search by any field'}) => {
-    const {classes, cx} = useStyles();
+export const TableFilter: FunctionComponent<TableFilterProps> = ({
+    placeholder = 'Search by any field',
+    classNames,
+    styles,
+    unstyled,
+    ...others
+}) => {
+    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const {state, setState} = useTable();
 
     const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -39,6 +46,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({placeholder =
             rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}
             value={state.globalFilter}
             onChange={handleSearchChange}
+            {...others}
         />
     );
 };