@coveord/plasma-mantine 47.7.0 → 47.9.0

package/dist/esm/components/prompt/Prompt.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/prompt/Prompt.tsx"],"sourcesContent":["import {createStyles, Modal, ModalProps} from '@mantine/core';\nimport {Children, ReactElement, ReactNode} from 'react';\nimport {PromptFooter} from './PromptFooter';\n\nconst useStyles = createStyles((theme) => {\n    const white = '#fff';\n    return {\n        body: {\n            padding: 0,\n        },\n        modalType: {overflow: 'hidden', width: 550},\n        innerBody: {\n            padding: `${theme.spacing.md}px ${theme.spacing.xl}px ${theme.spacing.lg}px`,\n        },\n        header: {\n            padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,\n            width: '100%',\n            borderBottom: `1px solid ${theme.colors.gray[3]}`,\n            fontSize: theme.headings.sizes.h4.fontSize,\n            lineHeight: theme.headings.sizes.h4.fontSize,\n        },\n        default: {},\n        success: {backgroundColor: theme.colors.lime[6], color: white},\n        warning: {backgroundColor: theme.colors.yellow[5], color: white},\n        critical: {\n            backgroundColor: theme.colors.red[6],\n            color: white,\n        },\n        info: {backgroundColor: theme.colors.navy[5], color: white},\n        whiteClose: {color: white, '&:hover': {backgroundColor: 'transparent'}},\n    };\n});\n\nexport interface PromptProps extends ModalProps {\n    variant: 'default' | 'success' | 'warning' | 'critical' | 'info';\n    children: ReactNode;\n}\ninterface PromptType {\n    (props: PromptProps): ReactElement;\n    Footer: typeof PromptFooter;\n}\n\nexport const Prompt: PromptType = ({children, variant, size, ...otherProps}) => {\n    const {classes, cx} = useStyles();\n    const defaultVariant = variant === 'default';\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n\n    const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);\n    const footer = convertedChildren.find((child) => child.type === PromptFooter);\n\n    const classNames = {\n        header: cx(classes.header, classes[variant]),\n        close: !defaultVariant && classes.whiteClose,\n        body: classes.body,\n        modal: !defaultVariant && classes.modalType,\n    };\n\n    return (\n        <Modal padding={0} classNames={classNames} size={defaultVariant ? size : 'sm'} {...otherProps}>\n            <div className={classes.innerBody}>{otherChildren}</div>\n            {footer}\n        </Modal>\n    );\n};\n\nPrompt.Footer = PromptFooter;\n"],"names":["createStyles","Modal","Children","PromptFooter","useStyles","theme","white","body","padding","modalType","overflow","width","innerBody","spacing","md","xl","lg","header","borderBottom","colors","gray","fontSize","headings","sizes","h4","lineHeight","default","success","backgroundColor","lime","color","warning","yellow","critical","red","info","navy","whiteClose","Prompt","children","variant","size","otherProps","classes","cx","defaultVariant","convertedChildren","toArray","otherChildren","filter","child","type","footer","find","classNames","close","modal","div","className","Footer"],"mappings":"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"}

package/dist/esm/components/prompt/PromptFooter.js

@@ -0,0 +1,15 @@
+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 { StickyFooter } from "../sticky-footer";
+export var PromptFooter = function(_param) /*#__PURE__*/ {
+    var children = _param.children, otherProps = _object_without_properties(_param, [
+        "children"
+    ]);
+    return _jsx(StickyFooter, _object_spread_props(_object_spread({}, otherProps), {
+        children: children
+    }));
+};
+
+//# sourceMappingURL=PromptFooter.js.map

package/dist/esm/components/prompt/PromptFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/prompt/PromptFooter.tsx"],"sourcesContent":["import {FunctionComponent} from 'react';\nimport {StickyFooter, StickyFooterProps} from '../sticky-footer';\n\nexport interface PromptFooterProps extends StickyFooterProps {}\n\nexport const PromptFooter: FunctionComponent<PromptFooterProps> = ({children, ...otherProps}) => (\n    <StickyFooter {...otherProps}>{children}</StickyFooter>\n);\n"],"names":["StickyFooter","PromptFooter","children","otherProps"],"mappings":"AAAA;;;;AACA,SAAQA,YAAY,QAA0B,kBAAkB,CAAC;AAIjE,OAAO,IAAMC,YAAY,GAAyC,+BAC9D;QADgEC,QAAQ,UAARA,QAAQ,EAAKC,UAAU;QAAvBD,UAAQ;;WACxE,KAACF,YAAY,0CAAKG,UAAU;kBAAGD,QAAQ;OAAgB;AAAD,CACzD,CAAC"}

package/dist/esm/components/prompt/index.js

@@ -0,0 +1,3 @@
+export * from "./Prompt";
+
+//# sourceMappingURL=index.js.map

package/dist/esm/components/prompt/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/prompt/index.ts"],"sourcesContent":["export * from './Prompt';\n"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Divider, Group, Paper} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\ninterface 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        maxHeight: '80px',\n    },\n}));\n\nexport const StickyFooter: FunctionComponent<StickyFooterProps> = ({borderTop, children, ...others}) => {\n    const {classes} = useStyles();\n\n    return (\n        <Paper className={classes.footer}>\n            {borderTop ? <Divider size=\"xs\" /> : null}\n            <Group position=\"right\" spacing=\"xs\" py=\"md\" px=\"xl\" {...others}>\n                {children}\n            </Group>\n        </Paper>\n    );\n};\n"],"names":["createStyles","Divider","Group","Paper","useStyles","footer","position","bottom","zIndex","maxHeight","StickyFooter","borderTop","children","others","classes","className","size","spacing","py","px"],"mappings":"AAAA;;;;AAAA,SAAQA,YAAY,EAAgBC,OAAO,EAAEC,KAAK,EAAEC,KAAK,QAAO,eAAe,CAAC;AAUhF,IAAMC,SAAS,GAAGJ,YAAY,CAAC;WAAO;QAClCK,MAAM,EAAE;YACJC,QAAQ,EAAE,QAAQ;YAClBC,MAAM,EAAE,CAAC;YACTC,MAAM,EAAE,CAAC;YACTC,SAAS,EAAE,MAAM;SACpB;KACJ;CAAC,CAAC,AAAC;AAEJ,OAAO,IAAMC,YAAY,GAAyC,iBAAsC;QAApCC,SAAS,UAATA,SAAS,EAAEC,QAAQ,UAARA,QAAQ,EAAKC,MAAM;QAA9BF,WAAS;QAAEC,UAAQ;;IACnF,IAAM,AAACE,OAAO,GAAIV,SAAS,EAAE,CAAtBU,OAAO,AAAe,AAAC;IAE9B,qBACI,MAACX,KAAK;QAACY,SAAS,EAAED,OAAO,CAACT,MAAM;;YAC3BM,SAAS,iBAAG,KAACV,OAAO;gBAACe,IAAI,EAAC,IAAI;cAAG,GAAG,IAAI;0BACzC,KAACd,KAAK;gBAACI,QAAQ,EAAC,OAAO;gBAACW,OAAO,EAAC,IAAI;gBAACC,EAAE,EAAC,IAAI;gBAACC,EAAE,EAAC,IAAI;eAAKN,MAAM;0BAC1DD,QAAQ;eACL;;MACJ,CACV;AACN,CAAC,CAAC"}
+{"version":3,"sources":["../../../../src/components/sticky-footer/StickyFooter.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Divider, Group, Paper} from '@mantine/core';\nimport {FunctionComponent} 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        maxHeight: '80px',\n    },\n}));\n\nexport const StickyFooter: FunctionComponent<StickyFooterProps> = ({borderTop, children, ...others}) => {\n    const {classes} = useStyles();\n\n    return (\n        <Paper className={classes.footer}>\n            {borderTop ? <Divider size=\"xs\" /> : null}\n            <Group position=\"right\" spacing=\"xs\" py=\"md\" px=\"xl\" {...others}>\n                {children}\n            </Group>\n        </Paper>\n    );\n};\n"],"names":["createStyles","Divider","Group","Paper","useStyles","footer","position","bottom","zIndex","maxHeight","StickyFooter","borderTop","children","others","classes","className","size","spacing","py","px"],"mappings":"AAAA;;;;AAAA,SAAQA,YAAY,EAAgBC,OAAO,EAAEC,KAAK,EAAEC,KAAK,QAAO,eAAe,CAAC;AAUhF,IAAMC,SAAS,GAAGJ,YAAY,CAAC;WAAO;QAClCK,MAAM,EAAE;YACJC,QAAQ,EAAE,QAAQ;YAClBC,MAAM,EAAE,CAAC;YACTC,MAAM,EAAE,CAAC;YACTC,SAAS,EAAE,MAAM;SACpB;KACJ;CAAC,CAAC,AAAC;AAEJ,OAAO,IAAMC,YAAY,GAAyC,iBAAsC;QAApCC,SAAS,UAATA,SAAS,EAAEC,QAAQ,UAARA,QAAQ,EAAKC,MAAM;QAA9BF,WAAS;QAAEC,UAAQ;;IACnF,IAAM,AAACE,OAAO,GAAIV,SAAS,EAAE,CAAtBU,OAAO,AAAe,AAAC;IAE9B,qBACI,MAACX,KAAK;QAACY,SAAS,EAAED,OAAO,CAACT,MAAM;;YAC3BM,SAAS,iBAAG,KAACV,OAAO;gBAACe,IAAI,EAAC,IAAI;cAAG,GAAG,IAAI;0BACzC,KAACd,KAAK;gBAACI,QAAQ,EAAC,OAAO;gBAACW,OAAO,EAAC,IAAI;gBAACC,EAAE,EAAC,IAAI;gBAACC,EAAE,EAAC,IAAI;eAAKN,MAAM;0BAC1DD,QAAQ;eACL;;MACJ,CACV;AACN,CAAC,CAAC"}

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

@@ -11,19 +11,7 @@ export var TableDateRangePicker = function(param) {
     var ref = _sliced_to_array(useState(false), 2), opened = ref[0], setOpened = ref[1];
     var form = useTable().form;
     var onApply = function(dates) {
-        if (dates[0] !== null && dates[1] !== null) {
-            form.setFieldValue("dateRange", dates);
-        } else if (dates[1] === null) {
-            form.setFieldValue("dateRange", [
-                dates[0],
-                dates[0]
-            ]);
-        } else {
-            form.setFieldValue("dateRange", [
-                dates[1],
-                dates[1]
-            ]);
-        }
+        form.setFieldValue("dateRange", dates);
         setOpened(false);
     };
     var onCancel = function() {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover, Button} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './useTable';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        if (dates[0] !== null && dates[1] !== null) {\n            form.setFieldValue('dateRange', dates);\n        } else if (dates[1] === null) {\n            form.setFieldValue('dateRange', [dates[0], dates[0]]);\n        } else {\n            form.setFieldValue('dateRange', [dates[1], dates[1]]);\n        }\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <>\n            {formatedRange}\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                        <CalendarSize24Px width={24} height={24} />\n                    </Button>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["CalendarSize24Px","Popover","Button","dayjs","useState","DateRangePickerInlineCalendar","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/TableDateRangePicker.tsx"],"sourcesContent":["import {CalendarSize24Px} from '@coveord/plasma-react-icons';\nimport {Popover, Button} from '@mantine/core';\nimport {DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {FunctionComponent, useState} from 'react';\nimport {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';\nimport {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';\nimport {useTable} from './useTable';\n\ninterface TableDateRangePickerProps\n    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {\n    /**\n     * An object containing date presets.\n     * If empty the preset dropdown won't be shown\n     *\n     * @example\n     * {\n     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},\n     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}\n     * }\n     * @default {}\n     */\n    presets?: Record<string, DateRangePickerPreset>;\n}\n\nexport const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({\n    presets = {},\n    rangeCalendarProps,\n}) => {\n    const [opened, setOpened] = useState(false);\n    const {form} = useTable();\n\n    const onApply = (dates: DateRangePickerValue) => {\n        form.setFieldValue('dateRange', dates);\n        setOpened(false);\n    };\n    const onCancel = () => {\n        setOpened(false);\n    };\n\n    const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');\n    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;\n\n    return (\n        <>\n            {formatedRange}\n            <Popover opened={opened} onChange={setOpened}>\n                <Popover.Target>\n                    <Button variant=\"outline\" color=\"gray\" onClick={() => setOpened(true)} px=\"xs\">\n                        <CalendarSize24Px width={24} height={24} />\n                    </Button>\n                </Popover.Target>\n                <Popover.Dropdown p={0}>\n                    <DateRangePickerInlineCalendar\n                        initialRange={form.values.dateRange}\n                        onApply={onApply}\n                        onCancel={onCancel}\n                        presets={presets}\n                        rangeCalendarProps={rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["CalendarSize24Px","Popover","Button","dayjs","useState","DateRangePickerInlineCalendar","useTable","TableDateRangePicker","presets","rangeCalendarProps","opened","setOpened","form","onApply","dates","setFieldValue","onCancel","formatDate","date","format","formatedRange","values","dateRange","onChange","Target","variant","color","onClick","px","width","height","Dropdown","p","initialRange"],"mappings":"AAAA;;AAAA,SAAQA,gBAAgB,QAAO,6BAA6B,CAAC;AAC7D,SAAQC,OAAO,EAAEC,MAAM,QAAO,eAAe,CAAC;AAE9C,OAAOC,KAAK,MAAM,OAAO,CAAC;AAC1B,SAA2BC,QAAQ,QAAO,OAAO,CAAC;AAClD,SAAQC,6BAA6B,QAA2C,sBAAsB,CAAC;AAEvG,SAAQC,QAAQ,QAAO,YAAY,CAAC;AAkBpC,OAAO,IAAMC,oBAAoB,GAAiD,gBAG5E;yBAFFC,OAAO,EAAPA,OAAO,yBAAG,EAAE,WAAA,EACZC,kBAAkB,SAAlBA,kBAAkB;IAElB,IAA4BL,GAAe,oBAAfA,QAAQ,CAAC,KAAK,CAAC,IAAA,EAApCM,MAAM,GAAeN,GAAe,GAA9B,EAAEO,SAAS,GAAIP,GAAe,GAAnB,AAAoB;IAC5C,IAAM,AAACQ,IAAI,GAAIN,QAAQ,EAAE,CAAlBM,IAAI,AAAc,AAAC;IAE1B,IAAMC,OAAO,GAAG,SAACC,KAA2B,EAAK;QAC7CF,IAAI,CAACG,aAAa,CAAC,WAAW,EAAED,KAAK,CAAC,CAAC;QACvCH,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,AAAC;IACF,IAAMK,QAAQ,GAAG,WAAM;QACnBL,SAAS,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC,AAAC;IAEF,IAAMM,UAAU,GAAG,SAACC,IAAU;eAAKf,KAAK,CAACe,IAAI,CAAC,CAACC,MAAM,CAAC,cAAc,CAAC;KAAA,AAAC;IACtE,IAAMC,aAAa,GAAG,AAAC,EAAA,CAA4CH,MAAoC,CAA9EA,UAAU,CAACL,IAAI,CAACS,MAAM,CAACC,SAAS,CAAC,CAAC,CAAC,CAAC,EAAC,KAAG,CAAuC,CAAA,MAAA,CAArCL,UAAU,CAACL,IAAI,CAACS,MAAM,CAACC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAE,AAAC;IAE1G,qBACI;;YACKF,aAAa;0BACd,MAACnB,OAAO;gBAACS,MAAM,EAAEA,MAAM;gBAAEa,QAAQ,EAAEZ,SAAS;;kCACxC,KAACV,OAAO,CAACuB,MAAM;kCACX,cAAA,KAACtB,MAAM;4BAACuB,OAAO,EAAC,SAAS;4BAACC,KAAK,EAAC,MAAM;4BAACC,OAAO,EAAE;uCAAMhB,SAAS,CAAC,IAAI,CAAC;6BAAA;4BAAEiB,EAAE,EAAC,IAAI;sCAC1E,cAAA,KAAC5B,gBAAgB;gCAAC6B,KAAK,EAAE,EAAE;gCAAEC,MAAM,EAAE,EAAE;8BAAI;0BACtC;sBACI;kCACjB,KAAC7B,OAAO,CAAC8B,QAAQ;wBAACC,CAAC,EAAE,CAAC;kCAClB,cAAA,KAAC3B,6BAA6B;4BAC1B4B,YAAY,EAAErB,IAAI,CAACS,MAAM,CAACC,SAAS;4BACnCT,OAAO,EAAEA,OAAO;4BAChBG,QAAQ,EAAEA,QAAQ;4BAClBR,OAAO,EAAEA,OAAO;4BAChBC,kBAAkB,EAAEA,kBAAkB;0BACxC;sBACa;;cACb;;MACX,CACL;AACN,CAAC,CAAC"}

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

@@ -7,7 +7,16 @@ var useStyles = createStyles(function(theme) {
         th: {
             padding: "0 !important",
             fontWeight: "400 !important",
-            color: theme.black + "!important"
+            color: theme.black + "!important",
+            button: {
+                padding: "8px 16px",
+                div: {
+                    padding: "0px !important"
+                }
+            },
+            div: {
+                padding: "8px 16px"
+            }
         },
         noSort: {
             padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.md, "px")

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        padding: '0 !important',\n        fontWeight: '400 !important' as any,\n        color: theme.black + '!important',\n    },\n\n    noSort: {\n        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowHeadDownSize16Px,\n    desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text className={classes.noSort} size=\"xs\">\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted();\n    const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\">\n                    <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n                    <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","padding","fontWeight","color","black","noSort","spacing","xs","md","control","width","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","sx","action","height"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n    th: {\n        padding: '0 !important',\n        fontWeight: '400 !important' as any,\n        color: theme.black + '!important',\n        button: {\n            padding: '8px 16px',\n            div: {\n                padding: '0px !important',\n            },\n        },\n        div: {\n            padding: '8px 16px',\n        },\n    },\n\n    noSort: {\n        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n    },\n\n    control: {\n        width: '100%',\n        padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n\n        '&:hover': {\n            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n        },\n    },\n}));\n\ninterface ThProps<T> {\n    header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n    asc: ArrowHeadDownSize16Px,\n    desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n    asc: 'ascending',\n    desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n    const {classes} = useStyles();\n    const size = header.column.getSize();\n    const width = size !== defaultColumnSizing.size ? size : undefined;\n\n    if (header.isPlaceholder) {\n        return null;\n    }\n\n    if (!header.column.getCanSort()) {\n        return (\n            <th className={classes.th} style={{width}}>\n                <Text className={classes.noSort} size=\"xs\">\n                    {flexRender(header.column.columnDef.header, header.getContext())}\n                </Text>\n            </th>\n        );\n    }\n\n    const onSort = header.column.getToggleSortingHandler();\n    const sortingOrder = header.column.getIsSorted();\n    const Icon = SortingIcons[sortingOrder || header.column.getFirstSortDir()];\n\n    return (\n        <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n            <UnstyledButton onClick={onSort} className={classes.control}>\n                <Group position=\"apart\">\n                    <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n                    <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n                        <Icon height={14} />\n                    </Center>\n                </Group>\n            </UnstyledButton>\n        </th>\n    );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","padding","fontWeight","color","black","button","div","noSort","spacing","xs","md","control","width","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","sx","action","height"],"mappings":"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"}

package/package.json

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

package/src/components/date-range-picker/EditableDateRangePicker.tsx

@@ -1,4 +1,5 @@
 import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';
+import dayjs from 'dayjs';
 import {ReactNode} from 'react';
 
 export interface EditableDateRangePickerProps {
@@ -24,11 +25,11 @@ export const EditableDateRangePicker = ({
     startProps = {},
     endProps = {},
 }: EditableDateRangePickerProps) => {
-    const onChangeStart = (date: Date | null) => {
-        onChange?.([date, value?.[1] ?? null]);
+    const onChangeStart = (date: Date) => {
+        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);
     };
-    const onChangeEnd = (date: Date | null) => {
-        onChange?.([value?.[0] ?? null, date]);
+    const onChangeEnd = (date: Date) => {
+        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);
     };
 
     return (

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -1,4 +1,5 @@
 import {render, screen, userEvent} from '@test-utils';
+import dayjs from 'dayjs';
 
 import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
 
@@ -86,6 +87,9 @@ describe('DateRangePickerInlineCalendar', () => {
 
         userEvent.click(screen.getByRole('button', {name: 'Apply'}));
 
-        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 14)]);
+        expect(onApply).toHaveBeenCalledWith([
+            dayjs(new Date(2022, 0, 8)).startOf('day').toDate(),
+            dayjs(new Date(2022, 0, 14)).endOf('day').toDate(),
+        ]);
     });
 });

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -96,6 +96,6 @@ describe('DateRangePickerPopoverCalendar', () => {
         userEvent.clear(endInput);
         userEvent.type(endInput, 'Jan 14, 2022');
 
-        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T00:00:00.000Z"]');
+        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
     });
 });

package/src/components/date-range-picker/__tests__/EditableDateRangePicker.spec.tsx

@@ -42,6 +42,6 @@ describe('EditableDateRangePicker', () => {
         userEvent.clear(endInput);
         userEvent.type(endInput, 'Jan 14, 2022');
 
-        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T00:00:00.000Z"]');
+        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T23:59:59.999Z"]');
     });
 });

package/src/components/index.ts

@@ -6,4 +6,5 @@ export * from './sticky-footer';
 export * from './header';
 export * from './inline-confirm';
 export * from './table';
+export * from './prompt';
 export * from './modal-wizard';

package/src/components/prompt/Prompt.tsx

@@ -0,0 +1,66 @@
+import {createStyles, Modal, ModalProps} from '@mantine/core';
+import {Children, ReactElement, ReactNode} from 'react';
+import {PromptFooter} from './PromptFooter';
+
+const useStyles = createStyles((theme) => {
+    const white = '#fff';
+    return {
+        body: {
+            padding: 0,
+        },
+        modalType: {overflow: 'hidden', width: 550},
+        innerBody: {
+            padding: `${theme.spacing.md}px ${theme.spacing.xl}px ${theme.spacing.lg}px`,
+        },
+        header: {
+            padding: `${theme.spacing.md}px ${theme.spacing.xl}px`,
+            width: '100%',
+            borderBottom: `1px solid ${theme.colors.gray[3]}`,
+            fontSize: theme.headings.sizes.h4.fontSize,
+            lineHeight: theme.headings.sizes.h4.fontSize,
+        },
+        default: {},
+        success: {backgroundColor: theme.colors.lime[6], color: white},
+        warning: {backgroundColor: theme.colors.yellow[5], color: white},
+        critical: {
+            backgroundColor: theme.colors.red[6],
+            color: white,
+        },
+        info: {backgroundColor: theme.colors.navy[5], color: white},
+        whiteClose: {color: white, '&:hover': {backgroundColor: 'transparent'}},
+    };
+});
+
+export interface PromptProps extends ModalProps {
+    variant: 'default' | 'success' | 'warning' | 'critical' | 'info';
+    children: ReactNode;
+}
+interface PromptType {
+    (props: PromptProps): ReactElement;
+    Footer: typeof PromptFooter;
+}
+
+export const Prompt: PromptType = ({children, variant, size, ...otherProps}) => {
+    const {classes, cx} = useStyles();
+    const defaultVariant = variant === 'default';
+    const convertedChildren = Children.toArray(children) as ReactElement[];
+
+    const otherChildren = convertedChildren.filter((child) => child.type !== PromptFooter);
+    const footer = convertedChildren.find((child) => child.type === PromptFooter);
+
+    const classNames = {
+        header: cx(classes.header, classes[variant]),
+        close: !defaultVariant && classes.whiteClose,
+        body: classes.body,
+        modal: !defaultVariant && classes.modalType,
+    };
+
+    return (
+        <Modal padding={0} classNames={classNames} size={defaultVariant ? size : 'sm'} {...otherProps}>
+            <div className={classes.innerBody}>{otherChildren}</div>
+            {footer}
+        </Modal>
+    );
+};
+
+Prompt.Footer = PromptFooter;

package/src/components/prompt/PromptFooter.tsx

@@ -0,0 +1,8 @@
+import {FunctionComponent} from 'react';
+import {StickyFooter, StickyFooterProps} from '../sticky-footer';
+
+export interface PromptFooterProps extends StickyFooterProps {}
+
+export const PromptFooter: FunctionComponent<PromptFooterProps> = ({children, ...otherProps}) => (
+    <StickyFooter {...otherProps}>{children}</StickyFooter>
+);

package/src/components/prompt/__tests__/Prompt.spec.tsx

@@ -0,0 +1,29 @@
+import {render, screen} from '@test-utils';
+import {Prompt} from '../Prompt';
+
+describe('Prompt', () => {
+    it('displays the title, body and close button', () => {
+        render(
+            <Prompt variant="default" opened onClose={jest.fn()} title="title modal">
+                content modal
+                <Prompt.Footer>footer content</Prompt.Footer>
+            </Prompt>
+        );
+        expect(screen.getByText(/content modal/i)).toBeInTheDocument();
+        expect(screen.getByText(/footer content/i)).toBeInTheDocument();
+        expect(screen.getByText(/title modal/i)).toBeInTheDocument();
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+
+    it('calls onClose when clicking on the close button', () => {
+        const onClose = jest.fn();
+        render(
+            <Prompt variant="default" opened onClose={onClose} title="title modal">
+                content modal
+            </Prompt>
+        );
+
+        screen.getByRole('button').click();
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+});

package/src/components/prompt/index.ts

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

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

@@ -1,7 +1,7 @@
 import {createStyles, DefaultProps, Divider, Group, Paper} from '@mantine/core';
 import {FunctionComponent} from 'react';
 
-interface StickyFooterProps extends DefaultProps {
+export interface StickyFooterProps extends DefaultProps {
     /**
      * Whether a border is render on top of the footer
      */

package/src/components/table/TableDateRangePicker.tsx

@@ -31,13 +31,7 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
     const {form} = useTable();
 
     const onApply = (dates: DateRangePickerValue) => {
-        if (dates[0] !== null && dates[1] !== null) {
-            form.setFieldValue('dateRange', dates);
-        } else if (dates[1] === null) {
-            form.setFieldValue('dateRange', [dates[0], dates[0]]);
-        } else {
-            form.setFieldValue('dateRange', [dates[1], dates[1]]);
-        }
+        form.setFieldValue('dateRange', dates);
         setOpened(false);
     };
     const onCancel = () => {

package/src/components/table/Th.tsx

@@ -7,6 +7,15 @@ const useStyles = createStyles((theme) => ({
         padding: '0 !important',
         fontWeight: '400 !important' as any,
         color: theme.black + '!important',
+        button: {
+            padding: '8px 16px',
+            div: {
+                padding: '0px !important',
+            },
+        },
+        div: {
+            padding: '8px 16px',
+        },
     },
 
     noSort: {