@coveord/plasma-mantine 50.0.2 → 51.0.0

package/dist/esm/components/code-editor/CodeEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: theme.fontSizes.xs,\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(onFocus);\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_copyButton}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","Box","Center","CopyButton","createStyles","Group","Input","Loader","Space","Stack","Tooltip","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useParentHeight","XML","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","classes","finalValue","_value","handleChange","parentHeight","ref","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","_label","Label","_description","Description","_error","Error","mt","h","_header","_copyButton","position","timeout","copied","copy","withArrow","color","onClick","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","spacing","sx","Math","max"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/code-editor/CodeEditor.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {\n    ActionIcon,\n    Box,\n    Center,\n    CopyButton,\n    createStyles,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    Loader,\n    px,\n    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, Monaco} from '@monaco-editor/react';\nimport {FunctionComponent, useEffect, useState} from 'react';\n\nimport {useParentHeight} from '../../hooks';\nimport {XML} from './languages/xml';\n\nconst useStyles = createStyles((theme) => ({\n    root: {},\n    editor: {\n        border: `1px solid ${theme.colors.gray[2]}`,\n        borderRadius: theme.defaultRadius,\n        backgroundColor: theme.colorScheme === 'light' ? theme.white : theme.black,\n        height: '100%',\n    },\n}));\n\ninterface CodeEditorProps\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The language syntax of the editor\n     *\n     * @default 'plaintext'\n     */\n    language?: 'plaintext' | 'json' | 'markdown' | 'python' | 'xml';\n    /** Default value for uncontrolled input */\n    defaultValue?: string;\n    /** Value for controlled input */\n    value?: string;\n    /** onChange value for controlled input */\n    onChange?(value: string): void;\n    /** Called whenever the code editor gets the focus */\n    onFocus?(): void;\n    /**\n     * The minimal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height is too short, it will use this value as minimum.\n     *\n     * @default 300\n     */\n    minHeight?: number;\n    /**\n     * The maximal height of the CodeEditor (label and description included)\n     *\n     * By default the CodeEditor is adjusted to fill its parent height.\n     * In the case where the parent height would be too high for your liking, you can use this prop to set a maximum.\n     */\n    maxHeight?: number;\n    disabled?: boolean;\n    /**\n     * Defines how the monaco editor files will be loaded.\n     * Note that using `'local'` requires [some additional configuration](https://github.com/suren-atoyan/monaco-react#use-monaco-editor-as-an-npm-package).\n     *\n     * @default 'local'\n     */\n    monacoLoader?: 'cdn' | 'local';\n}\n\nconst defaultProps: Partial<CodeEditorProps> = {\n    language: 'plaintext',\n    monacoLoader: 'local',\n    defaultValue: '',\n    minHeight: 300,\n};\n\nexport const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {\n    const {\n        language,\n        defaultValue,\n        onChange,\n        onFocus,\n        value,\n        label,\n        required,\n        labelProps,\n        error,\n        errorProps,\n        description,\n        descriptionProps,\n        minHeight,\n        maxHeight,\n        disabled,\n        monacoLoader,\n        ...others\n    } = useComponentDefaultProps('CodeEditor', defaultProps, props);\n    const [loaded, setLoaded] = useState(false);\n    const {classes, theme} = useStyles();\n    const [_value, handleChange] = useUncontrolled<string>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: '',\n    });\n    const [parentHeight, ref] = useParentHeight();\n\n    const loadLocalMonaco = async () => {\n        const monacoInstance = await import('monaco-editor');\n        loader.config({monaco: monacoInstance});\n        setLoaded(true);\n    };\n\n    const registerLanguages = (monaco: Monaco) => {\n        if (monaco && language === 'xml') {\n            XML.register(monaco);\n        }\n    };\n\n    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    const _label = label ? (\n        <Input.Label required={required} {...labelProps}>\n            {label}\n        </Input.Label>\n    ) : null;\n\n    const _description = description ? (\n        <Input.Description {...descriptionProps}>{description}</Input.Description>\n    ) : null;\n\n    const _error = error ? (\n        <Input.Error mt=\"xs\" {...errorProps}>\n            {error}\n        </Input.Error>\n    ) : (\n        <Space h=\"xs\" />\n    );\n\n    const _header =\n        _label || _description ? (\n            <Box>\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const _copyButton = (\n        <Group position=\"right\">\n            <CopyButton value={_value} timeout={2000}>\n                {({copied, copy}) => (\n                    <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"right\">\n                        <ActionIcon color={copied ? 'lime' : 'gray'} onClick={copy}>\n                            {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n                        </ActionIcon>\n                    </Tooltip>\n                )}\n            </CopyButton>\n        </Group>\n    );\n\n    const _editor = loaded ? (\n        <Box p=\"md\" pl=\"xs\" className={classes.editor}>\n            <Editor\n                defaultLanguage={language}\n                theme={theme.colorScheme === 'light' ? 'light' : 'vs-dark'}\n                options={{\n                    minimap: {enabled: false},\n                    wordWrap: 'on',\n                    wrappingStrategy: 'advanced',\n                    scrollBeyondLastLine: false,\n                    formatOnPaste: true,\n                    fontSize: px(theme.fontSizes.xs),\n                    readOnly: disabled,\n                    tabSize: 2,\n                }}\n                value={_value}\n                onChange={handleChange}\n                onMount={(editor, monaco) => {\n                    registerLanguages(monaco);\n                    editor.onDidFocusEditorText(onFocus);\n                    editor.onDidBlurEditorText(async () => {\n                        await editor.getAction('editor.action.formatDocument').run();\n                    });\n                }}\n            />\n        </Box>\n    ) : (\n        <Center className={classes.editor}>\n            <Loader />\n        </Center>\n    );\n\n    return (\n        <Stack\n            justify=\"flex-start\"\n            className={classes.root}\n            spacing={0}\n            sx={{height: Math.max(parentHeight, minHeight), maxHeight}}\n            ref={ref}\n            {...others}\n        >\n            {_header}\n            {_copyButton}\n            {_editor}\n            {_error}\n        </Stack>\n    );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","Box","Center","CopyButton","createStyles","Group","Input","Loader","px","Space","Stack","Tooltip","useComponentDefaultProps","useUncontrolled","Editor","loader","useEffect","useState","useParentHeight","XML","useStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","CodeEditor","props","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","loaded","setLoaded","classes","finalValue","_value","handleChange","parentHeight","ref","loadLocalMonaco","monacoInstance","config","monaco","registerLanguages","register","_label","Label","_description","Description","_error","Error","mt","h","_header","_copyButton","position","timeout","copied","copy","withArrow","color","onClick","_editor","p","pl","className","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","justify","spacing","sx","Math","max"],"mappings":"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"}

package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js

@@ -2,7 +2,7 @@ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Center, Group, Space } from "@mantine/core";
-import { RangeCalendar } from "@mantine/dates";
+import { DatePicker } from "@mantine/dates";
 import { useForm } from "@mantine/form";
 import { Button } from "../button";
 import { DateRangePickerPresetSelect } from "./DateRangePickerPresetSelect";
@@ -54,14 +54,17 @@ export var DateRangePickerInlineCalendar = function(param) {
             /*#__PURE__*/ _jsx(Center, {
                 py: "sm",
                 px: "md",
-                children: /*#__PURE__*/ _jsx(RangeCalendar, _object_spread({
-                    amountOfMonths: 2,
+                children: /*#__PURE__*/ _jsx(DatePicker, _object_spread({
+                    numberOfColumns: 2,
+                    type: "range",
                     styles: {
-                        cell: {
-                            textAlign: "center"
+                        calendar: {
+                            cell: {
+                                textAlign: "center"
+                            }
                         }
                     },
-                    firstDayOfWeek: "sunday",
+                    firstDayOfWeek: 0,
                     allowSingleDateInRange: true
                 }, rangeCalendarProps, calendarInputProps))
             }),

package/dist/esm/components/date-range-picker/DateRangePickerInlineCalendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarApply = () => {\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group\n                align=\"center\"\n                spacing=\"xs\"\n                grow\n                px=\"md\"\n                py=\"sm\"\n                sx={(theme) => ({\n                    borderBottom: `1px solid ${theme.colors.gray[2]}`,\n                })}\n            >\n                <EditableDateRangePicker {...calendarInputProps} startProps={startProps} endProps={endProps} />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <RangeCalendar\n                    amountOfMonths={2}\n                    styles={{cell: {textAlign: 'center'}}}\n                    firstDayOfWeek=\"sunday\"\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                />\n            </Center>\n\n            <Group\n                position=\"right\"\n                spacing=\"xs\"\n                px=\"md\"\n                py=\"sm\"\n                sx={(theme) => ({\n                    borderTop: `1px solid ${theme.colors.gray[2]}`,\n                })}\n            >\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","RangeCalendar","useForm","Button","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","align","spacing","grow","px","py","sx","theme","borderBottom","colors","gray","w","amountOfMonths","styles","cell","textAlign","firstDayOfWeek","allowSingleDateInRange","position","borderTop","size","onClick","variant"],"mappings":";;;AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAA8BC,aAAa,QAA2B,iBAAiB;AACvF,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,SAAQC,MAAM,QAAO,YAAY;AACjC,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAmChG,OAAO,IAAMC,gCAAgC,gBAQH;QAPtCC,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOZ,QAAQ;QACjBa,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,IAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,IAAMC,kBAAkB,WAAM;QAC1B,IAAI,CAACL,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF,CAAC;QACDR,QAAQM,KAAKM,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAACjB;gBACGsB,OAAM;gBACNC,SAAQ;gBACRC,IAAI;gBACJC,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZC,cAAc,AAAC,aAAiC,OAArBD,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBACnD;;;kCAEA,KAACzB,iEAA4BY;wBAAoBN,YAAYA;wBAAYC,UAAUA;;oBAClFF,wBACG;;0CACI,KAACV;gCAAM+B,GAAE;;0CACT,KAAC3B;gCAA4BM,SAASA;+BAAaO;;yBAEvD,IAAI;;;0BAGZ,KAACnB;gBAAO2B,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACvB;oBACG+B,gBAAgB;oBAChBC,QAAQ;wBAACC,MAAM;4BAACC,WAAW;wBAAQ;oBAAC;oBACpCC,gBAAe;oBACfC,sBAAsB;mBAClBxB,oBACAI;;0BAIZ,MAAClB;gBACGuC,UAAS;gBACThB,SAAQ;gBACRE,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZY,WAAW,AAAC,aAAiC,OAArBZ,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBAChD;;;kCAEA,KAAC3B;wBAAOqC,MAAK;wBAAKC,SAAStB;kCAAiB;;kCAG5C,KAAChB;wBAAOuC,SAAQ;wBAAUF,MAAK;wBAAKC,SAAShC;kCAAU;;;;;;AAMvE,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerInlineCalendar.tsx"],"sourcesContent":["import {Center, Group, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useForm} from '@mantine/form';\n\nimport {Button} from '../button';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\nexport type DateRangePickerValue = [Date | null, Date | null];\nexport interface DateRangePickerInlineCalendarProps\n    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /**\n     * Initial selected range\n     */\n    initialRange: DateRangePickerValue;\n    /**\n     * Function called when the user applies the new date range\n     *\n     * @param range the newly selected dates\n     */\n    onApply: (range: DateRangePickerValue) => void;\n    /**\n     * Function called when the user click on the cancel button\n     */\n    onCancel: () => void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n    /**\n     * Props for RangeCalendar displayed in the popover\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerInlineCalendar = ({\n    initialRange,\n    onApply,\n    onCancel,\n    presets,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerInlineCalendarProps) => {\n    const form = useForm({\n        initialValues: {\n            dates: initialRange,\n        },\n    });\n    const calendarInputProps = form.getInputProps('dates');\n\n    const onCalendarApply = () => {\n        if (!form.values.dates[1]) {\n            form.values.dates[1] = form.values.dates[0]; // when date range is the same day\n        }\n        onApply(form.values.dates);\n    };\n\n    return (\n        <>\n            <Group\n                align=\"center\"\n                spacing=\"xs\"\n                grow\n                px=\"md\"\n                py=\"sm\"\n                sx={(theme) => ({\n                    borderBottom: `1px solid ${theme.colors.gray[2]}`,\n                })}\n            >\n                <EditableDateRangePicker {...calendarInputProps} startProps={startProps} endProps={endProps} />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect presets={presets} {...calendarInputProps} />\n                    </>\n                ) : null}\n            </Group>\n\n            <Center py=\"sm\" px=\"md\">\n                <DatePicker\n                    numberOfColumns={2}\n                    type=\"range\"\n                    styles={{calendar: {cell: {textAlign: 'center'}}}}\n                    firstDayOfWeek={0}\n                    allowSingleDateInRange\n                    {...rangeCalendarProps}\n                    {...calendarInputProps}\n                />\n            </Center>\n\n            <Group\n                position=\"right\"\n                spacing=\"xs\"\n                px=\"md\"\n                py=\"sm\"\n                sx={(theme) => ({\n                    borderTop: `1px solid ${theme.colors.gray[2]}`,\n                })}\n            >\n                <Button size=\"xs\" onClick={onCalendarApply}>\n                    Apply\n                </Button>\n                <Button variant=\"outline\" size=\"xs\" onClick={onCancel}>\n                    Cancel\n                </Button>\n            </Group>\n        </>\n    );\n};\n"],"names":["Center","Group","Space","DatePicker","useForm","Button","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerInlineCalendar","initialRange","onApply","onCancel","presets","startProps","endProps","rangeCalendarProps","form","initialValues","dates","calendarInputProps","getInputProps","onCalendarApply","values","align","spacing","grow","px","py","sx","theme","borderBottom","colors","gray","w","numberOfColumns","type","styles","calendar","cell","textAlign","firstDayOfWeek","allowSingleDateInRange","position","borderTop","size","onClick","variant"],"mappings":";;;AAAA,SAAQA,MAAM,EAAEC,KAAK,EAAEC,KAAK,QAAO,gBAAgB;AACnD,SAA2BC,UAAU,QAAO,iBAAiB;AAC7D,SAAQC,OAAO,QAAO,gBAAgB;AAEtC,SAAQC,MAAM,QAAO,YAAY;AACjC,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AAuChG,OAAO,IAAMC,gCAAgC,gBAQH;QAPtCC,qBAAAA,cACAC,gBAAAA,SACAC,iBAAAA,UACAC,gBAAAA,SACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAAMC,OAAOZ,QAAQ;QACjBa,eAAe;YACXC,OAAOT;QACX;IACJ;IACA,IAAMU,qBAAqBH,KAAKI,aAAa,CAAC;IAE9C,IAAMC,kBAAkB,WAAM;QAC1B,IAAI,CAACL,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE;YACvBF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,GAAGF,KAAKM,MAAM,CAACJ,KAAK,CAAC,EAAE,EAAE,kCAAkC;QACnF,CAAC;QACDR,QAAQM,KAAKM,MAAM,CAACJ,KAAK;IAC7B;IAEA,qBACI;;0BACI,MAACjB;gBACGsB,OAAM;gBACNC,SAAQ;gBACRC,IAAI;gBACJC,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZC,cAAc,AAAC,aAAiC,OAArBD,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBACnD;;;kCAEA,KAACzB,iEAA4BY;wBAAoBN,YAAYA;wBAAYC,UAAUA;;oBAClFF,wBACG;;0CACI,KAACV;gCAAM+B,GAAE;;0CACT,KAAC3B;gCAA4BM,SAASA;+BAAaO;;yBAEvD,IAAI;;;0BAGZ,KAACnB;gBAAO2B,IAAG;gBAAKD,IAAG;0BACf,cAAA,KAACvB;oBACG+B,iBAAiB;oBACjBC,MAAK;oBACLC,QAAQ;wBAACC,UAAU;4BAACC,MAAM;gCAACC,WAAW;4BAAQ;wBAAC;oBAAC;oBAChDC,gBAAgB;oBAChBC,sBAAsB;mBAClB1B,oBACAI;;0BAIZ,MAAClB;gBACGyC,UAAS;gBACTlB,SAAQ;gBACRE,IAAG;gBACHC,IAAG;gBACHC,IAAI,SAACC;2BAAW;wBACZc,WAAW,AAAC,aAAiC,OAArBd,MAAME,MAAM,CAACC,IAAI,CAAC,EAAE;oBAChD;;;kCAEA,KAAC3B;wBAAOuC,MAAK;wBAAKC,SAASxB;kCAAiB;;kCAG5C,KAAChB;wBAAOyC,SAAQ;wBAAUF,MAAK;wBAAKC,SAASlC;kCAAU;;;;;;AAMvE,EAAE"}

package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js

@@ -1,12 +1,12 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { RangeCalendar } from "@mantine/dates";
 import { Group, Popover, Space } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
 import { useClickOutside, useUncontrolled } from "@mantine/hooks";
 import { useState } from "react";
-import { EditableDateRangePicker } from "./EditableDateRangePicker";
 import { DateRangePickerPresetSelect } from "./DateRangePickerPresetSelect";
+import { EditableDateRangePicker } from "./EditableDateRangePicker";
 export var DateRangePickerPopoverCalendar = function(param) {
     var presets = param.presets, value = param.value, defaultValue = param.defaultValue, onChange = param.onChange, startProps = param.startProps, endProps = param.endProps, rangeCalendarProps = param.rangeCalendarProps;
     var _useState = _sliced_to_array(useState(false), 2), opened = _useState[0], setOpened = _useState[1];
@@ -61,15 +61,18 @@ export var DateRangePickerPopoverCalendar = function(param) {
                 onChange: setOpened,
                 trapFocus: true,
                 children: /*#__PURE__*/ _jsx(Popover.Dropdown, {
-                    children: /*#__PURE__*/ _jsx(RangeCalendar, _object_spread({
+                    children: /*#__PURE__*/ _jsx(DatePicker, _object_spread({
                         ref: ref,
+                        type: "range",
                         styles: {
-                            cell: {
-                                textAlign: "center"
+                            calendar: {
+                                cell: {
+                                    textAlign: "center"
+                                }
                             }
                         },
-                        amountOfMonths: 2,
-                        firstDayOfWeek: "sunday",
+                        numberOfColumns: 2,
+                        firstDayOfWeek: 0,
                         allowSingleDateInRange: true,
                         value: _value,
                         onChange: onCalendarChange

package/dist/esm/components/date-range-picker/DateRangePickerPopoverCalendar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';\nimport {Group, Popover, Space} from '@mantine/core';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\nimport {DateRangePickerPresetSelect, DateRangePickerPreset} from './DateRangePickerPresetSelect';\n\ninterface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DateRangePickerValue;\n    /** Value for controlled input */\n    value?: DateRangePickerValue;\n    /** onChange value for controlled input */\n    onChange?(value: DateRangePickerValue): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;\n}\n\nexport const DateRangePickerPopoverCalendar = <T extends unknown>({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps<T>) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DateRangePickerValue) => {\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Group align=\"center\">\n                <EditableDateRangePicker\n                    value={_value}\n                    onChange={handleChange}\n                    onFocus={() => setOpened(true)}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                    </>\n                ) : null}\n            </Group>\n\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Dropdown>\n                    <RangeCalendar\n                        ref={ref}\n                        styles={{cell: {textAlign: 'center'}}}\n                        amountOfMonths={2}\n                        firstDayOfWeek=\"sunday\"\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["RangeCalendar","Group","Popover","Space","useClickOutside","useUncontrolled","useState","EditableDateRangePicker","DateRangePickerPresetSelect","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","finalValue","_value","handleChange","onCalendarChange","dates","align","onFocus","w","trapFocus","Dropdown","styles","cell","textAlign","amountOfMonths","firstDayOfWeek","allowSingleDateInRange"],"mappings":";;;AAAA,SAA8BA,aAAa,QAA2B,iBAAiB;AACvF,SAAQC,KAAK,EAAEC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AACpD,SAAQC,eAAe,EAAEC,eAAe,QAAO,iBAAiB;AAChE,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,SAAQC,uBAAuB,QAAqC,4BAA4B;AAChG,SAAQC,2BAA2B,QAA8B,gCAAgC;AA2BjG,OAAO,IAAMC,iCAAiC,gBAQA;QAP1CC,gBAAAA,SACAC,cAAAA,OACAC,qBAAAA,cACAC,iBAAAA,UACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAA4BV,6BAAAA,SAAS,KAAK,OAAnCW,SAAqBX,cAAbY,YAAaZ;IAC5B,IAAMa,MAAMf,gBAAgB;eAAMc,UAAU,KAAK;;IAEjD,IAA+Bb,oCAAAA,gBAAsC;QACjEM,OAAAA;QACAC,cAAAA;QACAC,UAAAA;QACAO,YAAY;YAAC,IAAI;YAAE,IAAI;SAAC;IAC5B,QALOC,SAAwBhB,qBAAhBiB,eAAgBjB;IAO/B,IAAMkB,mBAAmB,SAACC,OAAgC;QACtDF,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeE;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,IAAI,EAAE;YACnBN,UAAU,KAAK;QACnB,CAAC;IACL;IAEA,qBACI;;0BACI,MAACjB;gBAAMwB,OAAM;;kCACT,KAAClB;wBACGI,OAAOU;wBACPR,UAAUS;wBACVI,SAAS;mCAAMR,UAAU,IAAI;;wBAC7BJ,YAAYA;wBACZC,UAAUA;;oBAEbL,wBACG;;0CACI,KAACP;gCAAMwB,GAAE;;0CACT,KAACnB;gCAA4BE,SAASA;gCAASC,OAAOU;gCAAQR,UAAUS;;;yBAE5E,IAAI;;;0BAGZ,KAACpB;gBAAQe,QAAQA;gBAAQJ,UAAUK;gBAAWU,SAAS;0BACnD,cAAA,KAAC1B,QAAQ2B,QAAQ;8BACb,cAAA,KAAC7B;wBACGmB,KAAKA;wBACLW,QAAQ;4BAACC,MAAM;gCAACC,WAAW;4BAAQ;wBAAC;wBACpCC,gBAAgB;wBAChBC,gBAAe;wBACfC,sBAAsB;wBACtBxB,OAAOU;wBACPR,UAAUU;uBACNP;;;;;AAM5B,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx"],"sourcesContent":["import {Group, Popover, Space} from '@mantine/core';\nimport {CalendarBaseProps, DatePicker} from '@mantine/dates';\nimport {useClickOutside, useUncontrolled} from '@mantine/hooks';\nimport {useState} from 'react';\n\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\nimport {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';\nimport {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';\n\ninterface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {\n    /** Default value for uncontrolled input */\n    defaultValue?: DateRangePickerValue;\n    /** Value for controlled input */\n    value?: DateRangePickerValue;\n    /** onChange value for controlled input */\n    onChange?(value: DateRangePickerValue): void;\n    /**\n     * The presets to display\n     *\n     * @default {}\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     */\n    presets?: Record<string, DateRangePickerPreset>;\n\n    /**\n     * Props for RangeCalendar\n     */\n    rangeCalendarProps?: Omit<\n        CalendarBaseProps,\n        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'\n    >;\n}\n\nexport const DateRangePickerPopoverCalendar = <T extends unknown>({\n    presets,\n    value,\n    defaultValue,\n    onChange,\n    startProps,\n    endProps,\n    rangeCalendarProps,\n}: DateRangePickerPopoverCalendarProps<T>) => {\n    const [opened, setOpened] = useState(false);\n    const ref = useClickOutside(() => setOpened(false));\n\n    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({\n        value,\n        defaultValue,\n        onChange,\n        finalValue: [null, null],\n    });\n\n    const onCalendarChange = (dates: DateRangePickerValue) => {\n        handleChange?.(dates);\n        if (dates[1] !== null) {\n            setOpened(false);\n        }\n    };\n\n    return (\n        <>\n            <Group align=\"center\">\n                <EditableDateRangePicker\n                    value={_value}\n                    onChange={handleChange}\n                    onFocus={() => setOpened(true)}\n                    startProps={startProps}\n                    endProps={endProps}\n                />\n                {presets ? (\n                    <>\n                        <Space w=\"sm\" />\n                        <DateRangePickerPresetSelect presets={presets} value={_value} onChange={handleChange} />\n                    </>\n                ) : null}\n            </Group>\n\n            <Popover opened={opened} onChange={setOpened} trapFocus>\n                <Popover.Dropdown>\n                    <DatePicker\n                        ref={ref}\n                        type=\"range\"\n                        styles={{calendar: {cell: {textAlign: 'center'}}}}\n                        numberOfColumns={2}\n                        firstDayOfWeek={0}\n                        allowSingleDateInRange\n                        value={_value}\n                        onChange={onCalendarChange}\n                        {...rangeCalendarProps}\n                    />\n                </Popover.Dropdown>\n            </Popover>\n        </>\n    );\n};\n"],"names":["Group","Popover","Space","DatePicker","useClickOutside","useUncontrolled","useState","DateRangePickerPresetSelect","EditableDateRangePicker","DateRangePickerPopoverCalendar","presets","value","defaultValue","onChange","startProps","endProps","rangeCalendarProps","opened","setOpened","ref","finalValue","_value","handleChange","onCalendarChange","dates","align","onFocus","w","trapFocus","Dropdown","type","styles","calendar","cell","textAlign","numberOfColumns","firstDayOfWeek","allowSingleDateInRange"],"mappings":";;;AAAA,SAAQA,KAAK,EAAEC,OAAO,EAAEC,KAAK,QAAO,gBAAgB;AACpD,SAA2BC,UAAU,QAAO,iBAAiB;AAC7D,SAAQC,eAAe,EAAEC,eAAe,QAAO,iBAAiB;AAChE,SAAQC,QAAQ,QAAO,QAAQ;AAG/B,SAA+BC,2BAA2B,QAAO,gCAAgC;AACjG,SAAQC,uBAAuB,QAAqC,4BAA4B;AA8BhG,OAAO,IAAMC,iCAAiC,gBAQA;QAP1CC,gBAAAA,SACAC,cAAAA,OACAC,qBAAAA,cACAC,iBAAAA,UACAC,mBAAAA,YACAC,iBAAAA,UACAC,2BAAAA;IAEA,IAA4BV,6BAAAA,SAAS,KAAK,OAAnCW,SAAqBX,cAAbY,YAAaZ;IAC5B,IAAMa,MAAMf,gBAAgB;eAAMc,UAAU,KAAK;;IAEjD,IAA+Bb,oCAAAA,gBAAsC;QACjEM,OAAAA;QACAC,cAAAA;QACAC,UAAAA;QACAO,YAAY;YAAC,IAAI;YAAE,IAAI;SAAC;IAC5B,QALOC,SAAwBhB,qBAAhBiB,eAAgBjB;IAO/B,IAAMkB,mBAAmB,SAACC,OAAgC;QACtDF,yBAAAA,0BAAAA,KAAAA,IAAAA,aAAeE;QACf,IAAIA,KAAK,CAAC,EAAE,KAAK,IAAI,EAAE;YACnBN,UAAU,KAAK;QACnB,CAAC;IACL;IAEA,qBACI;;0BACI,MAAClB;gBAAMyB,OAAM;;kCACT,KAACjB;wBACGG,OAAOU;wBACPR,UAAUS;wBACVI,SAAS;mCAAMR,UAAU,IAAI;;wBAC7BJ,YAAYA;wBACZC,UAAUA;;oBAEbL,wBACG;;0CACI,KAACR;gCAAMyB,GAAE;;0CACT,KAACpB;gCAA4BG,SAASA;gCAASC,OAAOU;gCAAQR,UAAUS;;;yBAE5E,IAAI;;;0BAGZ,KAACrB;gBAAQgB,QAAQA;gBAAQJ,UAAUK;gBAAWU,SAAS;0BACnD,cAAA,KAAC3B,QAAQ4B,QAAQ;8BACb,cAAA,KAAC1B;wBACGgB,KAAKA;wBACLW,MAAK;wBACLC,QAAQ;4BAACC,UAAU;gCAACC,MAAM;oCAACC,WAAW;gCAAQ;4BAAC;wBAAC;wBAChDC,iBAAiB;wBACjBC,gBAAgB;wBAChBC,sBAAsB;wBACtB1B,OAAOU;wBACPR,UAAUU;uBACNP;;;;;AAM5B,EAAE"}

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js

@@ -2,10 +2,9 @@ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { isSameDate } from "@mantine/dates";
 import { Select } from "@mantine/core";
-import { useState, useEffect } from "react";
 import dayjs from "dayjs";
+import { useEffect, useState } from "react";
 export var DateRangePickerPresetSelect = function(param) {
     var presets = param.presets, value = param.value, onChange = param.onChange, _param_selectProps = param.selectProps, selectProps = _param_selectProps === void 0 ? {} : _param_selectProps;
     var selectData = Object.entries(presets).map(function(param) {
@@ -19,7 +18,7 @@ export var DateRangePickerPresetSelect = function(param) {
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
             var selected = Object.entries(presets).find(function(param) {
                 var _param = _sliced_to_array(param, 2), id = _param[0], range = _param[1].range;
-                return dayjs(range[0]).isSame(value[0]) && isSameDate(range[1], value[1]);
+                return dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]);
             });
             if (selected) {
                 return selected[0];

package/dist/esm/components/date-range-picker/DateRangePickerPresetSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {DateRangePickerValue, isSameDate} from '@mantine/dates';\nimport {Select, SelectItem, SelectProps} from '@mantine/core';\nimport {useState, useEffect} from 'react';\nimport dayjs from 'dayjs';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n    const selectData: SelectItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && isSameDate(range[1]!, value[1]!)\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n        />\n    );\n};\n"],"names":["isSameDate","Select","useState","useEffect","dayjs","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data"],"mappings":";;;;AAAA,SAA8BA,UAAU,QAAO,iBAAiB;AAChE,SAAQC,MAAM,QAAgC,gBAAgB;AAC9D,SAAQC,QAAQ,EAAEC,SAAS,QAAO,QAAQ;AAC1C,OAAOC,WAAW,QAAQ;AAc1B,OAAO,IAAMC,8BAA8B,gBAKC;QAJxCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA2BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;iDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEpG,IAAMC,oBAAoB,WAAM;QAC5B,IAAIT,KAAK,CAAC,EAAE,KAAK,IAAI,IAAIA,KAAK,CAAC,EAAE,KAAK,IAAI,IAAIH,MAAMG,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOb,MAAMG,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,IAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC;yDAAEC,gBAAI,AAACC,kBAAAA;uBAAYjB,MAAMiB,KAAK,CAAC,EAAE,EAAGC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKP,WAAWqB,KAAK,CAAC,EAAE,EAAGd,KAAK,CAAC,EAAE;;YAE1F,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB,CAAC;QACL,CAAC;QACD,OAAO,IAAI;IACf;IAEA,IAA4ChB,6BAAAA,SAAwBc,0BAA7DO,iBAAqCrB,cAArBsB,oBAAqBtB;IAE5CC,UAAU,WAAM;QACZ,IAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB,CAAC;IACL,GAAG;QAAClB;KAAM;IAEV,IAAMmB,iBAAiB,SAACC,UAAmC;QACvD,IAAMN,QAAQf,OAAO,CAACqB,SAAS,CAACN,KAAK;QACrCb,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWa;IACf;IAEA,qBACI,KAACpB;QACGc,OAAM;QACNa,aAAY;OACRnB;QACJF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;;AAGlB,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/DateRangePickerPresetSelect.tsx"],"sourcesContent":["import {Select, SelectItem, SelectProps} from '@mantine/core';\nimport dayjs from 'dayjs';\nimport {useEffect, useState} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface DateRangePickerPreset {\n    label: string;\n    range: DateRangePickerValue;\n}\n\ninterface DateRangePickerPresetsSelectProps<T> {\n    presets: Record<string, DateRangePickerPreset>;\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;\n}\n\nexport const DateRangePickerPresetSelect = <T extends unknown>({\n    presets,\n    value,\n    onChange,\n    selectProps = {},\n}: DateRangePickerPresetsSelectProps<T>) => {\n    const selectData: SelectItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));\n\n    const getSelectedPreset = () => {\n        if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {\n            const selected = Object.entries(presets).find(\n                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!)\n            );\n            if (selected) {\n                return selected[0];\n            }\n        }\n        return null;\n    };\n\n    const [selectedPreset, setSelectedPreset] = useState<string | null>(getSelectedPreset());\n\n    useEffect(() => {\n        const newPreset = getSelectedPreset();\n        if (newPreset !== selectedPreset) {\n            setSelectedPreset(newPreset);\n        }\n    }, [value]);\n\n    const onChangePreset = (presetId: keyof typeof presets) => {\n        const range = presets[presetId].range as any;\n        onChange?.(range);\n    };\n\n    return (\n        <Select\n            label=\"Date range\"\n            placeholder=\"Select a date range\"\n            {...selectProps}\n            value={selectedPreset}\n            onChange={onChangePreset}\n            data={selectData}\n        />\n    );\n};\n"],"names":["Select","dayjs","useEffect","useState","DateRangePickerPresetSelect","presets","value","onChange","selectProps","selectData","Object","entries","map","val","label","getSelectedPreset","unix","selected","find","id","range","isSame","selectedPreset","setSelectedPreset","newPreset","onChangePreset","presetId","placeholder","data"],"mappings":";;;;AAAA,SAAQA,MAAM,QAAgC,gBAAgB;AAC9D,OAAOC,WAAW,QAAQ;AAC1B,SAAQC,SAAS,EAAEC,QAAQ,QAAO,QAAQ;AAe1C,OAAO,IAAMC,8BAA8B,gBAKC;QAJxCC,gBAAAA,SACAC,cAAAA,OACAC,iBAAAA,qCACAC,aAAAA,8CAAc,CAAC;IAEf,IAAMC,aAA2BC,OAAOC,OAAO,CAACN,SAASO,GAAG,CAAC;iDAAEC,iBAAK,AAACC,kBAAAA;eAAa;YAACR,OAAOO;YAAKC,OAAAA;QAAK;;IAEpG,IAAMC,oBAAoB,WAAM;QAC5B,IAAIT,KAAK,CAAC,EAAE,KAAK,IAAI,IAAIA,KAAK,CAAC,EAAE,KAAK,IAAI,IAAIL,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,OAAOf,MAAMK,KAAK,CAAC,EAAE,EAAEU,IAAI,IAAI;YAC7F,IAAMC,WAAWP,OAAOC,OAAO,CAACN,SAASa,IAAI,CACzC;yDAAEC,gBAAI,AAACC,kBAAAA;uBAAYnB,MAAMmB,KAAK,CAAC,EAAE,EAAGC,MAAM,CAACf,KAAK,CAAC,EAAE,KAAKL,MAAMK,KAAK,CAAC,EAAE,EAAGe,MAAM,CAACf,KAAK,CAAC,EAAE;;YAE5F,IAAIW,UAAU;gBACV,OAAOA,QAAQ,CAAC,EAAE;YACtB,CAAC;QACL,CAAC;QACD,OAAO,IAAI;IACf;IAEA,IAA4Cd,6BAAAA,SAAwBY,0BAA7DO,iBAAqCnB,cAArBoB,oBAAqBpB;IAE5CD,UAAU,WAAM;QACZ,IAAMsB,YAAYT;QAClB,IAAIS,cAAcF,gBAAgB;YAC9BC,kBAAkBC;QACtB,CAAC;IACL,GAAG;QAAClB;KAAM;IAEV,IAAMmB,iBAAiB,SAACC,UAAmC;QACvD,IAAMN,QAAQf,OAAO,CAACqB,SAAS,CAACN,KAAK;QACrCb,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAWa;IACf;IAEA,qBACI,KAACpB;QACGc,OAAM;QACNa,aAAY;OACRnB;QACJF,OAAOgB;QACPf,UAAUkB;QACVG,MAAMnB;;AAGlB,EAAE"}

package/dist/esm/components/date-range-picker/EditableDateRangePicker.js

@@ -1,7 +1,6 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
-import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DatePicker } from "@mantine/dates";
+import { DateInput } from "@mantine/dates";
 import dayjs from "dayjs";
 export var EditableDateRangePicker = function(param) {
     var value = param.value, onChange = param.onChange, onFocus = param.onFocus, _param_separator = param.separator, separator = _param_separator === void 0 ? "to" : _param_separator, _param_startProps = param.startProps, startProps = _param_startProps === void 0 ? {} : _param_startProps, _param_endProps = param.endProps, endProps = _param_endProps === void 0 ? {} : _param_endProps;
@@ -19,35 +18,37 @@ export var EditableDateRangePicker = function(param) {
     };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({
-                allowFreeInput: true,
+            /*#__PURE__*/ _jsx(DateInput, {
                 clearable: false,
-                label: "Start"
-            }, startProps), {
+                label: "Start",
                 value: value === null || value === void 0 ? void 0 : value[0],
                 onChange: onChangeStart,
                 onFocus: onFocus,
-                styles: _object_spread_props(_object_spread({}, startProps.styles), {
-                    dropdown: {
-                        display: "none"
+                popoverProps: {
+                    styles: {
+                        dropdown: {
+                            display: "none"
+                        }
                     }
-                })
-            })),
+                },
+                styles: _object_spread({}, startProps.styles)
+            }),
             separator,
-            /*#__PURE__*/ _jsx(DatePicker, _object_spread_props(_object_spread({
-                allowFreeInput: true,
+            /*#__PURE__*/ _jsx(DateInput, {
                 clearable: false,
-                label: "End"
-            }, endProps), {
+                label: "End",
                 value: value === null || value === void 0 ? void 0 : value[1],
                 onChange: onChangeEnd,
                 onFocus: onFocus,
-                styles: _object_spread_props(_object_spread({}, endProps.styles), {
-                    dropdown: {
-                        display: "none"
+                popoverProps: {
+                    styles: {
+                        dropdown: {
+                            display: "none"
+                        }
                     }
-                })
-            }))
+                },
+                styles: _object_spread({}, endProps.styles)
+            })
         ]
     });
 };

package/dist/esm/components/date-range-picker/EditableDateRangePicker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {ReactNode} from 'react';\n\nexport interface EditableDateRangePickerProps {\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    onFocus?: () => void;\n    separator?: ReactNode;\n    /**\n     * Props for the start input\n     */\n    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n    /**\n     * Props for the end input\n     */\n    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n    value,\n    onChange,\n    onFocus,\n    separator = 'to',\n    startProps = {},\n    endProps = {},\n}: EditableDateRangePickerProps) => {\n    const onChangeStart = (date: Date) => {\n        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n    };\n    const onChangeEnd = (date: Date) => {\n        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n    };\n\n    return (\n        <>\n            <DatePicker\n                allowFreeInput\n                clearable={false}\n                label=\"Start\"\n                {...startProps}\n                value={value?.[0]}\n                onChange={onChangeStart}\n                onFocus={onFocus}\n                styles={{...startProps.styles, dropdown: {display: 'none'}}}\n            />\n            {separator}\n            <DatePicker\n                allowFreeInput\n                clearable={false}\n                label=\"End\"\n                {...endProps}\n                value={value?.[1]}\n                onChange={onChangeEnd}\n                onFocus={onFocus}\n                styles={{...endProps.styles, dropdown: {display: 'none'}}}\n            />\n        </>\n    );\n};\n"],"names":["DatePicker","dayjs","EditableDateRangePicker","value","onChange","onFocus","separator","startProps","endProps","onChangeStart","date","startOf","toDate","onChangeEnd","endOf","allowFreeInput","clearable","label","styles","dropdown","display"],"mappings":";;;AAAA,SAAQA,UAAU,QAA8C,iBAAiB;AACjF,OAAOC,WAAW,QAAQ;AAkB1B,OAAO,IAAMC,0BAA0B,gBAOH;QANhCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,kCACAC,WAAAA,0CAAY,mDACZC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,gBAAgB,SAACC,MAAe;QAClCN,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW;YAACH,MAAMS,MAAMC,OAAO,CAAC,OAAOC,MAAM;YAAIT,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;SAAC;IAChE;IACA,IAAMU,cAAc,SAACH,MAAe;QAChCN,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW;YAACD,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;YAAEF,MAAMS,MAAMI,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,KAACZ;gBACGe,cAAc;gBACdC,WAAW,KAAK;gBAChBC,OAAM;eACFV;gBACJJ,OAAOA,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUK;gBACVJ,SAASA;gBACTa,QAAQ,wCAAIX,WAAWW,MAAM;oBAAEC,UAAU;wBAACC,SAAS;oBAAM;;;YAE5Dd;0BACD,KAACN;gBACGe,cAAc;gBACdC,WAAW,KAAK;gBAChBC,OAAM;eACFT;gBACJL,OAAOA,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTa,QAAQ,wCAAIV,SAASU,MAAM;oBAAEC,UAAU;wBAACC,SAAS;oBAAM;;;;;AAIvE,EAAE"}
+{"version":3,"sources":["../../../../src/components/date-range-picker/EditableDateRangePicker.tsx"],"sourcesContent":["import {DateInput, DatePickerProps} from '@mantine/dates';\nimport dayjs from 'dayjs';\nimport {ReactNode} from 'react';\nimport {DateRangePickerValue} from './DateRangePickerInlineCalendar';\n\nexport interface EditableDateRangePickerProps {\n    value: DateRangePickerValue;\n    onChange?(value: DateRangePickerValue): void;\n    onFocus?: () => void;\n    separator?: ReactNode;\n    /**\n     * Props for the start input\n     */\n    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n    /**\n     * Props for the end input\n     */\n    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;\n}\n\nexport const EditableDateRangePicker = ({\n    value,\n    onChange,\n    onFocus,\n    separator = 'to',\n    startProps = {},\n    endProps = {},\n}: EditableDateRangePickerProps) => {\n    const onChangeStart = (date: Date) => {\n        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);\n    };\n    const onChangeEnd = (date: Date) => {\n        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);\n    };\n\n    return (\n        <>\n            <DateInput\n                clearable={false}\n                label=\"Start\"\n                value={value?.[0]}\n                onChange={onChangeStart}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...startProps.styles}}\n            />\n            {separator}\n            <DateInput\n                clearable={false}\n                label=\"End\"\n                value={value?.[1]}\n                onChange={onChangeEnd}\n                onFocus={onFocus}\n                popoverProps={{styles: {dropdown: {display: 'none'}}}}\n                styles={{...endProps.styles}}\n            />\n        </>\n    );\n};\n"],"names":["DateInput","dayjs","EditableDateRangePicker","value","onChange","onFocus","separator","startProps","endProps","onChangeStart","date","startOf","toDate","onChangeEnd","endOf","clearable","label","popoverProps","styles","dropdown","display"],"mappings":";;AAAA,SAAQA,SAAS,QAAwB,iBAAiB;AAC1D,OAAOC,WAAW,QAAQ;AAmB1B,OAAO,IAAMC,0BAA0B,gBAOH;QANhCC,cAAAA,OACAC,iBAAAA,UACAC,gBAAAA,kCACAC,WAAAA,0CAAY,mDACZC,YAAAA,4CAAa,CAAC,+CACdC,UAAAA,wCAAW,CAAC;IAEZ,IAAMC,gBAAgB,SAACC,MAAe;QAClCN,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW;YAACH,MAAMS,MAAMC,OAAO,CAAC,OAAOC,MAAM;YAAIT,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;SAAC;IAChE;IACA,IAAMU,cAAc,SAACH,MAAe;QAChCN,qBAAAA,sBAAAA,KAAAA,IAAAA,SAAW;YAACD,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;YAAEF,MAAMS,MAAMI,KAAK,CAAC,OAAOF,MAAM;SAAG;IAC9D;IAEA,qBACI;;0BACI,KAACZ;gBACGe,WAAW,KAAK;gBAChBC,OAAM;gBACNb,OAAOA,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUK;gBACVJ,SAASA;gBACTY,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ,mBAAIX,WAAWW,MAAM;;YAEhCZ;0BACD,KAACN;gBACGe,WAAW,KAAK;gBAChBC,OAAM;gBACNb,OAAOA,kBAAAA,mBAAAA,KAAAA,IAAAA,KAAO,CAAC,EAAE;gBACjBC,UAAUS;gBACVR,SAASA;gBACTY,cAAc;oBAACC,QAAQ;wBAACC,UAAU;4BAACC,SAAS;wBAAM;oBAAC;gBAAC;gBACpDF,QAAQ,mBAAIV,SAASU,MAAM;;;;AAI3C,EAAE"}

package/dist/esm/components/header/Header.js

@@ -71,7 +71,8 @@ var HeaderBreadcrumbs = function(param) {
             return {
                 breadcrumb: {
                     fontSize: theme.fontSizes.sm,
-                    fontWeight: 300
+                    fontWeight: 300,
+                    color: theme.colors.action[6]
                 },
                 separator: {
                     color: theme.colors.gray[5]

package/dist/esm/components/header/Header.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Flex, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {Children, FunctionComponent, ReactElement, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the modal variant when displaying the header inside a modal\n     *\n     * @default 'page'\n     */\n    variant?: 'page' | 'modal';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\ninterface HeaderType {\n    (props: HeaderProps): ReactElement;\n    Breadcrumbs: typeof HeaderBreadcrumbs;\n    Actions: typeof HeaderActions;\n    DocAnchor: typeof HeaderDocAnchor;\n}\n\nexport const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor\n    );\n    return (\n        <>\n            <Group\n                position=\"apart\"\n                p={variant === 'page' ? 'xl' : undefined}\n                pb={variant === 'page' ? 'lg' : undefined}\n                {...others}\n            >\n                <Stack spacing={0}>\n                    {breadcrumbs}\n                    <Flex align=\"center\">\n                        <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>\n                            {otherChildren}\n                        </Title>\n                        {docAnchor}\n                    </Flex>\n                    <Text size={variant === 'page' ? 'md' : 'sm'} color=\"gray.6\">\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider size=\"xs\" /> : null}\n        </>\n    );\n};\n\nconst HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (\n    <Breadcrumbs\n        styles={(theme) => ({\n            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},\n            separator: {color: theme.colors.gray[5]},\n        })}\n    >\n        {children}\n    </Breadcrumbs>\n);\n\nconst HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing=\"sm\">{children}</Group>;\n\nexport interface HeaderDocAnchorProps {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: string;\n}\n\nconst HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (\n    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"right\">\n        <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\">\n            <QuestionSize16Px height={16} />\n        </Anchor>\n    </Tooltip>\n);\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["QuestionSize16Px","Anchor","Breadcrumbs","Divider","Flex","Group","Stack","Text","Title","Tooltip","Children","Header","description","borderBottom","children","variant","others","convertedChildren","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","position","p","undefined","pb","spacing","align","order","color","size","styles","theme","breadcrumb","fontSize","fontSizes","sm","fontWeight","separator","colors","gray","href","docLink","label","docLinkTooltipLabel","disabled","inline","target","ml","height","Actions","DocAnchor"],"mappings":";;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAAEC,WAAW,EAAgBC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AACnH,SAAQC,QAAQ,QAAmD,QAAQ;AA8B3E,OAAO,IAAMC,SAAqB,iBAAwE;QAAtEC,qBAAAA,aAAaC,sBAAAA,cAAcC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA1DJ;QAAaC;QAAcC;QAAUC;;IACrE,IAAME,oBAAoBP,SAASQ,OAAO,CAACJ;IAC3C,IAAMK,cAAcF,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC;;IACrE,IAAMC,UAAUP,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG;;IACjE,IAAMC,YAAYT,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK;;IACnE,IAAMC,gBAAgBX,kBAAkBY,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,qBAAqBF,MAAMC,IAAI,KAAKG,iBAAiBJ,MAAMC,IAAI,KAAKK;;IAElG,qBACI;;0BACI,MAACtB;gBACGyB,UAAS;gBACTC,GAAGhB,YAAY,SAAS,OAAOiB,SAAS;gBACxCC,IAAIlB,YAAY,SAAS,OAAOiB,SAAS;eACrChB;;kCAEJ,MAACV;wBAAM4B,SAAS;;4BACXf;0CACD,MAACf;gCAAK+B,OAAM;;kDACR,KAAC3B;wCAAM4B,OAAOrB,YAAY,SAAS,IAAI,CAAC;wCAAEsB,OAAOtB,YAAY,SAAS,WAAWiB,SAAS;kDACrFJ;;oCAEJF;;;0CAEL,KAACnB;gCAAK+B,MAAMvB,YAAY,SAAS,OAAO,IAAI;gCAAEsB,OAAM;0CAC/CzB;;;;oBAGRY;;;YAEJX,6BAAe,KAACV;gBAAQmC,MAAK;iBAAU,IAAI;;;AAGxD,EAAE;AAEF,IAAMf,oBAA8D;QAAET,iBAAAA;yBAClE,KAACZ;QACGqC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;gBAAG;gBAC1DC,WAAW;oBAACT,OAAOG,MAAMO,MAAM,CAACC,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAEClC;;;AAIT,IAAMW,gBAA0D;QAAEX,iBAAAA;yBAAc,KAACT;QAAM6B,SAAQ;kBAAMpB;;;AAcrG,IAAMa,kBAA2D;QAAEsB,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,KAAC1C;QAAQ0C,OAAOC;QAAqBC,UAAU,CAACD;QAAqBtB,UAAS;kBAC1E,cAAA,KAAC7B;YAAOqD,MAAM;YAACL,MAAMC;YAASK,QAAO;YAASC,IAAG;sBAC7C,cAAA,KAACxD;gBAAiByD,QAAQ;;;;;AAKtC9C,OAAOT,WAAW,GAAGqB;AACrBZ,OAAO+C,OAAO,GAAGjC;AACjBd,OAAOgD,SAAS,GAAGhC"}
+{"version":3,"sources":["../../../../src/components/header/Header.tsx"],"sourcesContent":["import {QuestionSize16Px} from '@coveord/plasma-react-icons';\nimport {Anchor, Breadcrumbs, DefaultProps, Divider, Flex, Group, Stack, Text, Title, Tooltip} from '@mantine/core';\nimport {Children, FunctionComponent, ReactElement, ReactNode} from 'react';\n\nexport interface HeaderProps extends DefaultProps {\n    /**\n     * The description text displayed inside the header underneath the title\n     */\n    description?: ReactNode;\n    /**\n     * Whether the header should have a border on the bottom\n     */\n    borderBottom?: boolean;\n    /**\n     * Use the modal variant when displaying the header inside a modal\n     *\n     * @default 'page'\n     */\n    variant?: 'page' | 'modal';\n    /**\n     * The title of the header.\n     */\n    children: ReactNode;\n}\n\ninterface HeaderType {\n    (props: HeaderProps): ReactElement;\n    Breadcrumbs: typeof HeaderBreadcrumbs;\n    Actions: typeof HeaderActions;\n    DocAnchor: typeof HeaderDocAnchor;\n}\n\nexport const Header: HeaderType = ({description, borderBottom, children, variant = 'page', ...others}) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const breadcrumbs = convertedChildren.find((child) => child.type === HeaderBreadcrumbs);\n    const actions = convertedChildren.find((child) => child.type === HeaderActions);\n    const docAnchor = convertedChildren.find((child) => child.type === HeaderDocAnchor);\n    const otherChildren = convertedChildren.filter(\n        (child) => child.type !== HeaderBreadcrumbs && child.type !== HeaderActions && child.type !== HeaderDocAnchor\n    );\n    return (\n        <>\n            <Group\n                position=\"apart\"\n                p={variant === 'page' ? 'xl' : undefined}\n                pb={variant === 'page' ? 'lg' : undefined}\n                {...others}\n            >\n                <Stack spacing={0}>\n                    {breadcrumbs}\n                    <Flex align=\"center\">\n                        <Title order={variant === 'page' ? 1 : 3} color={variant === 'page' ? 'gray.5' : undefined}>\n                            {otherChildren}\n                        </Title>\n                        {docAnchor}\n                    </Flex>\n                    <Text size={variant === 'page' ? 'md' : 'sm'} color=\"gray.6\">\n                        {description}\n                    </Text>\n                </Stack>\n                {actions}\n            </Group>\n            {borderBottom ? <Divider size=\"xs\" /> : null}\n        </>\n    );\n};\n\nconst HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (\n    <Breadcrumbs\n        styles={(theme) => ({\n            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300, color: theme.colors.action[6]},\n            separator: {color: theme.colors.gray[5]},\n        })}\n    >\n        {children}\n    </Breadcrumbs>\n);\n\nconst HeaderActions: FunctionComponent<{children: ReactNode}> = ({children}) => <Group spacing=\"sm\">{children}</Group>;\n\nexport interface HeaderDocAnchorProps {\n    /**\n     * A href pointing to documentation related to the current panel.\n     * When provided, an info icon is rendered next to the title as link to this documentation\n     */\n    href: string;\n    /**\n     * The tooltip text shown when hovering over the doc link icon\n     */\n    label?: string;\n}\n\nconst HeaderDocAnchor: FunctionComponent<HeaderDocAnchorProps> = ({href: docLink, label: docLinkTooltipLabel}) => (\n    <Tooltip label={docLinkTooltipLabel} disabled={!docLinkTooltipLabel} position=\"right\">\n        <Anchor inline href={docLink} target=\"_blank\" ml=\"xs\">\n            <QuestionSize16Px height={16} />\n        </Anchor>\n    </Tooltip>\n);\n\nHeader.Breadcrumbs = HeaderBreadcrumbs;\nHeader.Actions = HeaderActions;\nHeader.DocAnchor = HeaderDocAnchor;\n"],"names":["QuestionSize16Px","Anchor","Breadcrumbs","Divider","Flex","Group","Stack","Text","Title","Tooltip","Children","Header","description","borderBottom","children","variant","others","convertedChildren","toArray","breadcrumbs","find","child","type","HeaderBreadcrumbs","actions","HeaderActions","docAnchor","HeaderDocAnchor","otherChildren","filter","position","p","undefined","pb","spacing","align","order","color","size","styles","theme","breadcrumb","fontSize","fontSizes","sm","fontWeight","colors","action","separator","gray","href","docLink","label","docLinkTooltipLabel","disabled","inline","target","ml","height","Actions","DocAnchor"],"mappings":";;;;AAAA,SAAQA,gBAAgB,QAAO,8BAA8B;AAC7D,SAAQC,MAAM,EAAEC,WAAW,EAAgBC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AACnH,SAAQC,QAAQ,QAAmD,QAAQ;AA8B3E,OAAO,IAAMC,SAAqB,iBAAwE;QAAtEC,qBAAAA,aAAaC,sBAAAA,cAAcC,kBAAAA,kCAAUC,SAAAA,sCAAU,yBAAWC;QAA1DJ;QAAaC;QAAcC;QAAUC;;IACrE,IAAME,oBAAoBP,SAASQ,OAAO,CAACJ;IAC3C,IAAMK,cAAcF,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKC;;IACrE,IAAMC,UAAUP,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKG;;IACjE,IAAMC,YAAYT,kBAAkBG,IAAI,CAAC,SAACC;eAAUA,MAAMC,IAAI,KAAKK;;IACnE,IAAMC,gBAAgBX,kBAAkBY,MAAM,CAC1C,SAACR;eAAUA,MAAMC,IAAI,KAAKC,qBAAqBF,MAAMC,IAAI,KAAKG,iBAAiBJ,MAAMC,IAAI,KAAKK;;IAElG,qBACI;;0BACI,MAACtB;gBACGyB,UAAS;gBACTC,GAAGhB,YAAY,SAAS,OAAOiB,SAAS;gBACxCC,IAAIlB,YAAY,SAAS,OAAOiB,SAAS;eACrChB;;kCAEJ,MAACV;wBAAM4B,SAAS;;4BACXf;0CACD,MAACf;gCAAK+B,OAAM;;kDACR,KAAC3B;wCAAM4B,OAAOrB,YAAY,SAAS,IAAI,CAAC;wCAAEsB,OAAOtB,YAAY,SAAS,WAAWiB,SAAS;kDACrFJ;;oCAEJF;;;0CAEL,KAACnB;gCAAK+B,MAAMvB,YAAY,SAAS,OAAO,IAAI;gCAAEsB,OAAM;0CAC/CzB;;;;oBAGRY;;;YAEJX,6BAAe,KAACV;gBAAQmC,MAAK;iBAAU,IAAI;;;AAGxD,EAAE;AAEF,IAAMf,oBAA8D;QAAET,iBAAAA;yBAClE,KAACZ;QACGqC,QAAQ,SAACC;mBAAW;gBAChBC,YAAY;oBAACC,UAAUF,MAAMG,SAAS,CAACC,EAAE;oBAAEC,YAAY;oBAAKR,OAAOG,MAAMM,MAAM,CAACC,MAAM,CAAC,EAAE;gBAAA;gBACzFC,WAAW;oBAACX,OAAOG,MAAMM,MAAM,CAACG,IAAI,CAAC,EAAE;gBAAA;YAC3C;;kBAECnC;;;AAIT,IAAMW,gBAA0D;QAAEX,iBAAAA;yBAAc,KAACT;QAAM6B,SAAQ;kBAAMpB;;;AAcrG,IAAMa,kBAA2D;QAAEuB,AAAMC,gBAAND,MAAeE,AAAOC,4BAAPD;yBAC9E,KAAC3C;QAAQ2C,OAAOC;QAAqBC,UAAU,CAACD;QAAqBvB,UAAS;kBAC1E,cAAA,KAAC7B;YAAOsD,MAAM;YAACL,MAAMC;YAASK,QAAO;YAASC,IAAG;sBAC7C,cAAA,KAACzD;gBAAiB0D,QAAQ;;;;;AAKtC/C,OAAOT,WAAW,GAAGqB;AACrBZ,OAAOgD,OAAO,GAAGlC;AACjBd,OAAOiD,SAAS,GAAGjC"}

package/dist/esm/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,36 +3,36 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-1g2mfqe"
+    class="mantine-Group-root mantine-ogmezo"
   >
     <div
-      class="mantine-Stack-root mantine-1fod3h5"
+      class="mantine-Stack-root mantine-1178y6y"
     >
       <div
-        class="mantine-Breadcrumbs-root mantine-16ttirm"
+        class="mantine-Breadcrumbs-root mantine-1ujbd2v"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-1mpiak2"
+          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-se7e6j"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-1mpiak2"
+          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-se7e6j"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           Three
         </a>
@@ -41,13 +41,13 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         class="mantine-xg7kom"
       >
         <h1
-          class="mantine-Text-root mantine-Title-root mantine-jqzr1h"
+          class="mantine-Text-root mantine-Title-root mantine-14ccmdx"
         >
           Title
         </h1>
       </div>
       <div
-        class="mantine-Text-root mantine-1qppuo4"
+        class="mantine-Text-root mantine-vti01c"
       />
     </div>
   </div>

package/dist/esm/components/modal-wizard/ModalWizard.js

@@ -11,7 +11,7 @@ import { StickyFooter } from "../sticky-footer";
 import { ModalWizardStep } from "./ModalWizardStep";
 var useStyles = createStyles(function() {
     return {
-        modal: {
+        content: {
             display: "flex",
             flexDirection: "column"
         },
@@ -23,7 +23,7 @@ var useStyles = createStyles(function() {
     };
 });
 export var ModalWizard = function(_param) {
-    var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, className = _param.className, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, modalProps = _object_without_properties(_param, [
+    var _param_cancelButtonLabel = _param.cancelButtonLabel, cancelButtonLabel = _param_cancelButtonLabel === void 0 ? "Cancel" : _param_cancelButtonLabel, _param_nextButtonLabel = _param.nextButtonLabel, nextButtonLabel = _param_nextButtonLabel === void 0 ? "Next" : _param_nextButtonLabel, _param_previousButtonLabel = _param.previousButtonLabel, previousButtonLabel = _param_previousButtonLabel === void 0 ? "Previous" : _param_previousButtonLabel, _param_finishButtonLabel = _param.finishButtonLabel, finishButtonLabel = _param_finishButtonLabel === void 0 ? "Finish" : _param_finishButtonLabel, opened = _param.opened, onNext = _param.onNext, onPrevious = _param.onPrevious, onClose = _param.onClose, onFinish = _param.onFinish, isDirty = _param.isDirty, handleDirtyState = _param.handleDirtyState, classNames = _param.classNames, styles = _param.styles, unstyled = _param.unstyled, children = _param.children, modalProps = _object_without_properties(_param, [
         "cancelButtonLabel",
         "nextButtonLabel",
         "previousButtonLabel",
@@ -36,7 +36,6 @@ export var ModalWizard = function(_param) {
         "isDirty",
         "handleDirtyState",
         "classNames",
-        "className",
         "styles",
         "unstyled",
         "children"
@@ -47,7 +46,7 @@ export var ModalWizard = function(_param) {
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
-    }), _useStyles_classes = _useStyles.classes, modal = _useStyles_classes.modal, body = _useStyles_classes.body, cx = _useStyles.cx;
+    }), _useStyles_classes = _useStyles.classes, content = _useStyles_classes.content, body = _useStyles_classes.body, cx = _useStyles.cx;
     var _useState = _sliced_to_array(useState(0), 2), currentStepIndex = _useState[0], setCurrentStepIndex = _useState[1];
     var modalSteps = Children.toArray(children).filter(function(child) {
         return child.type === ModalWizardStep;
@@ -103,7 +102,7 @@ export var ModalWizard = function(_param) {
     return /*#__PURE__*/ _jsxs(Modal, _object_spread_props(_object_spread({
         opened: opened,
         classNames: {
-            modal: cx(modal, classNames === null || classNames === void 0 ? void 0 : classNames.modal),
+            content: cx(content, classNames === null || classNames === void 0 ? void 0 : classNames.content),
             body: cx(body, classNames === null || classNames === void 0 ? void 0 : classNames.body)
         },
         centered: true,
@@ -127,7 +126,7 @@ export var ModalWizard = function(_param) {
                     }) : null,
                     /*#__PURE__*/ _jsx(Header.Actions, {
                         children: /*#__PURE__*/ _jsx(CloseButton, {
-                            "aria-label": modalProps.closeButtonLabel,
+                            "aria-label": "close-modal",
                             onClick: function() {
                                 return handleClose(true);
                             }

package/dist/esm/components/modal-wizard/ModalWizard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n    modal: {\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    body: {\n        flex: 1,\n        display: 'flex',\n        flexDirection: 'column',\n    },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n    extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n        Omit<ModalProps, 'centered' | 'title'> {\n    /**\n     * The label of the cancel button\n     *\n     * @default \"Cancel\"\n     */\n    cancelButtonLabel?: string;\n\n    /**\n     * The label of the next button\n     *\n     * @default \"Next\"\n     */\n    nextButtonLabel?: string;\n\n    /**\n     * The label of the previous button\n     *\n     * @default \"Previous\"\n     */\n    previousButtonLabel?: string;\n\n    /**\n     * The label of the finish button\n     *\n     * @default \"Finish\"\n     */\n    finishButtonLabel?: string;\n\n    /**\n     * A callback function that is executed when the user clicks on the next button\n     */\n    onNext?: () => unknown;\n\n    /**\n     * A callback function that is executed when the user clicks on the previous button\n     */\n    onPrevious?: () => unknown;\n\n    /**\n     * A function that is executed when user completes all the steps.\n     *\n     * @param close A function that closes the modal when called.\n     */\n    onFinish?: () => unknown;\n\n    /**\n     * Determine if user interacted with any steps in the modal wizard\n     */\n    isDirty?: () => boolean;\n\n    /**\n     * A function to confirm close if the state is dirty before closing\n     */\n    handleDirtyState?: () => boolean;\n\n    /**\n     * Children to display in modal wizard\n     * */\n    children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n    (props: ModalWizardProps): ReactElement;\n\n    Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n    cancelButtonLabel = 'Cancel',\n    nextButtonLabel = 'Next',\n    previousButtonLabel = 'Previous',\n    finishButtonLabel = 'Finish',\n    opened,\n    onNext,\n    onPrevious,\n    onClose,\n    onFinish,\n    isDirty,\n    handleDirtyState,\n    classNames,\n    className,\n    styles,\n    unstyled,\n    children,\n    ...modalProps\n}) => {\n    const {\n        classes: {modal, body},\n        cx,\n    } = useStyles(null, {\n        name: 'ModalWizard',\n        classNames,\n        styles,\n        unstyled,\n    });\n\n    const [currentStepIndex, setCurrentStepIndex] = useState(0);\n    const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n    const numberOfSteps = modalSteps.length;\n    const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n    const isFirstStep = currentStepIndex === 0;\n    const isLastStep = currentStepIndex === numberOfSteps - 1;\n    const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n    const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n    useEffect(() => {\n        if (opened) {\n            setCurrentStepIndex(0);\n        }\n    }, [opened]);\n\n    const handleClose = (confirmDirty: boolean) => {\n        if (confirmDirty) {\n            const isModalDirty = isDirty?.() ?? false;\n            if (isModalDirty) {\n                const discardChanges = handleDirtyState?.() ?? true;\n                if (!discardChanges) {\n                    return;\n                }\n            }\n        }\n        onClose?.();\n    };\n\n    const getProgress = (currStepIndex: number) => {\n        const validSteps = modalSteps.filter(\n            (step, index) => step.props.countsAsProgress && index <= currStepIndex\n        ).length;\n        return (validSteps / numberOfStepsCountAsProgress) * 100;\n    };\n\n    const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n        prop: P\n    ): ResolveStep<ModalWizardStepProps[P]> =>\n        typeof currentStep.props[prop] === 'function'\n            ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n            : currentStep.props[prop];\n\n    const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n    return (\n        <Modal\n            opened={opened}\n            classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}\n            centered\n            onClose={() => handleClose(true)}\n            withCloseButton={false}\n            padding={0}\n            {...modalProps}\n        >\n            <Header p=\"lg\" pr=\"md\" variant=\"modal\" description={resolveStepDependentProp('description')}>\n                {resolveStepDependentProp('title')}\n                {resolveStepDependentProp('docLink') ? (\n                    <Header.DocAnchor\n                        href={resolveStepDependentProp('docLink')}\n                        label={resolveStepDependentProp('docLinkTooltipLabel')}\n                    />\n                ) : null}\n                <Header.Actions>\n                    <CloseButton aria-label={modalProps.closeButtonLabel} onClick={() => handleClose(true)} />\n                </Header.Actions>\n            </Header>\n            {currentStep.props.showProgressBar && (\n                <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgressMemo} />\n            )}\n            <Box p=\"lg\">{currentStep}</Box>\n            <Box\n                sx={{\n                    marginTop: 'auto',\n                }}\n            >\n                <StickyFooter borderTop>\n                    <Button\n                        name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                        variant=\"outline\"\n                        onClick={() => {\n                            if (isFirstStep) {\n                                handleClose(true);\n                            } else {\n                                onPrevious?.();\n                                setCurrentStepIndex(currentStepIndex - 1);\n                            }\n                        }}\n                    >\n                        {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                    </Button>\n\n                    <Button\n                        disabled={!isValid}\n                        onClick={() => {\n                            if (isLastStep) {\n                                onFinish?.() ?? handleClose(false);\n                            } else {\n                                onNext?.();\n                                setCurrentStepIndex(currentStepIndex + 1);\n                            }\n                        }}\n                    >\n                        {isLastStep ? finishButtonLabel : nextButtonLabel}\n                    </Button>\n                </StickyFooter>\n            </Box>\n        </Modal>\n    );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","CloseButton","createStyles","Modal","Progress","Children","useEffect","useMemo","useState","Button","Header","StickyFooter","ModalWizardStep","useStyles","modal","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","className","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","handleClose","confirmDirty","isModalDirty","discardChanges","getProgress","currStepIndex","validSteps","resolveStepDependentProp","prop","getProgressMemo","centered","withCloseButton","padding","p","pr","variant","description","DocAnchor","href","label","Actions","aria-label","closeButtonLabel","onClick","showProgressBar","color","size","radius","value","sx","marginTop","borderTop","disabled","Step"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/modal-wizard/ModalWizard.tsx"],"sourcesContent":["import {Box, CloseButton, createStyles, DefaultProps, Modal, ModalProps, Progress, Selectors} from '@mantine/core';\nimport {Children, ReactElement, useEffect, useMemo, useState} from 'react';\n\nimport {Button} from '../button';\nimport {Header} from '../header';\nimport {StickyFooter} from '../sticky-footer';\nimport {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';\n\nconst useStyles = createStyles(() => ({\n    content: {\n        display: 'flex',\n        flexDirection: 'column',\n    },\n    body: {\n        flex: 1,\n        display: 'flex',\n        flexDirection: 'column',\n    },\n}));\n\ntype ModalWizardStylesNames = Selectors<typeof useStyles>;\n\nexport interface ModalWizardProps\n    extends Omit<DefaultProps<ModalWizardStylesNames>, 'classNames' | 'styles'>,\n        Omit<ModalProps, 'centered' | 'title'> {\n    /**\n     * The label of the cancel button\n     *\n     * @default \"Cancel\"\n     */\n    cancelButtonLabel?: string;\n\n    /**\n     * The label of the next button\n     *\n     * @default \"Next\"\n     */\n    nextButtonLabel?: string;\n\n    /**\n     * The label of the previous button\n     *\n     * @default \"Previous\"\n     */\n    previousButtonLabel?: string;\n\n    /**\n     * The label of the finish button\n     *\n     * @default \"Finish\"\n     */\n    finishButtonLabel?: string;\n\n    /**\n     * A callback function that is executed when the user clicks on the next button\n     */\n    onNext?: () => unknown;\n\n    /**\n     * A callback function that is executed when the user clicks on the previous button\n     */\n    onPrevious?: () => unknown;\n\n    /**\n     * A function that is executed when user completes all the steps.\n     *\n     * @param close A function that closes the modal when called.\n     */\n    onFinish?: () => unknown;\n\n    /**\n     * Determine if user interacted with any steps in the modal wizard\n     */\n    isDirty?: () => boolean;\n\n    /**\n     * A function to confirm close if the state is dirty before closing\n     */\n    handleDirtyState?: () => boolean;\n\n    /**\n     * Children to display in modal wizard\n     * */\n    children?: Array<ReturnType<typeof ModalWizardStep>>;\n}\n\ninterface ModalWizardType {\n    (props: ModalWizardProps): ReactElement;\n\n    Step: typeof ModalWizardStep;\n}\n\nexport const ModalWizard: ModalWizardType = ({\n    cancelButtonLabel = 'Cancel',\n    nextButtonLabel = 'Next',\n    previousButtonLabel = 'Previous',\n    finishButtonLabel = 'Finish',\n    opened,\n    onNext,\n    onPrevious,\n    onClose,\n    onFinish,\n    isDirty,\n    handleDirtyState,\n    classNames,\n    styles,\n    unstyled,\n    children,\n    ...modalProps\n}) => {\n    const {\n        classes: {content, body},\n        cx,\n    } = useStyles(null, {\n        name: 'ModalWizard',\n        classNames,\n        styles,\n        unstyled,\n    });\n\n    const [currentStepIndex, setCurrentStepIndex] = useState(0);\n    const modalSteps = (Children.toArray(children) as ReactElement[]).filter((child) => child.type === ModalWizardStep);\n\n    const numberOfSteps = modalSteps.length;\n    const numberOfStepsCountAsProgress = modalSteps.filter((step) => step.props.countsAsProgress).length;\n    const isFirstStep = currentStepIndex === 0;\n    const isLastStep = currentStepIndex === numberOfSteps - 1;\n    const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];\n\n    const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};\n\n    useEffect(() => {\n        if (opened) {\n            setCurrentStepIndex(0);\n        }\n    }, [opened]);\n\n    const handleClose = (confirmDirty: boolean) => {\n        if (confirmDirty) {\n            const isModalDirty = isDirty?.() ?? false;\n            if (isModalDirty) {\n                const discardChanges = handleDirtyState?.() ?? true;\n                if (!discardChanges) {\n                    return;\n                }\n            }\n        }\n        onClose?.();\n    };\n\n    const getProgress = (currStepIndex: number) => {\n        const validSteps = modalSteps.filter(\n            (step, index) => step.props.countsAsProgress && index <= currStepIndex\n        ).length;\n        return (validSteps / numberOfStepsCountAsProgress) * 100;\n    };\n\n    const resolveStepDependentProp = <P extends keyof ModalWizardStepProps>(\n        prop: P\n    ): ResolveStep<ModalWizardStepProps[P]> =>\n        typeof currentStep.props[prop] === 'function'\n            ? currentStep.props[prop](currentStepIndex + 1, numberOfSteps)\n            : currentStep.props[prop];\n\n    const getProgressMemo = useMemo(() => getProgress(currentStepIndex), [currentStepIndex]);\n    return (\n        <Modal\n            opened={opened}\n            classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}\n            centered\n            onClose={() => handleClose(true)}\n            withCloseButton={false}\n            padding={0}\n            {...modalProps}\n        >\n            <Header p=\"lg\" pr=\"md\" variant=\"modal\" description={resolveStepDependentProp('description')}>\n                {resolveStepDependentProp('title')}\n                {resolveStepDependentProp('docLink') ? (\n                    <Header.DocAnchor\n                        href={resolveStepDependentProp('docLink')}\n                        label={resolveStepDependentProp('docLinkTooltipLabel')}\n                    />\n                ) : null}\n                <Header.Actions>\n                    <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />\n                </Header.Actions>\n            </Header>\n            {currentStep.props.showProgressBar && (\n                <Progress color=\"navy.5\" size=\"sm\" radius={0} value={getProgressMemo} />\n            )}\n            <Box p=\"lg\">{currentStep}</Box>\n            <Box\n                sx={{\n                    marginTop: 'auto',\n                }}\n            >\n                <StickyFooter borderTop>\n                    <Button\n                        name={isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                        variant=\"outline\"\n                        onClick={() => {\n                            if (isFirstStep) {\n                                handleClose(true);\n                            } else {\n                                onPrevious?.();\n                                setCurrentStepIndex(currentStepIndex - 1);\n                            }\n                        }}\n                    >\n                        {isFirstStep ? cancelButtonLabel : previousButtonLabel}\n                    </Button>\n\n                    <Button\n                        disabled={!isValid}\n                        onClick={() => {\n                            if (isLastStep) {\n                                onFinish?.() ?? handleClose(false);\n                            } else {\n                                onNext?.();\n                                setCurrentStepIndex(currentStepIndex + 1);\n                            }\n                        }}\n                    >\n                        {isLastStep ? finishButtonLabel : nextButtonLabel}\n                    </Button>\n                </StickyFooter>\n            </Box>\n        </Modal>\n    );\n};\n\nModalWizard.Step = ModalWizardStep;\n"],"names":["Box","CloseButton","createStyles","Modal","Progress","Children","useEffect","useMemo","useState","Button","Header","StickyFooter","ModalWizardStep","useStyles","content","display","flexDirection","body","flex","ModalWizard","cancelButtonLabel","nextButtonLabel","previousButtonLabel","finishButtonLabel","opened","onNext","onPrevious","onClose","onFinish","isDirty","handleDirtyState","classNames","styles","unstyled","children","modalProps","currentStep","name","classes","cx","currentStepIndex","setCurrentStepIndex","modalSteps","toArray","filter","child","type","numberOfSteps","length","numberOfStepsCountAsProgress","step","props","countsAsProgress","isFirstStep","isLastStep","index","isValid","validateStep","handleClose","confirmDirty","isModalDirty","discardChanges","getProgress","currStepIndex","validSteps","resolveStepDependentProp","prop","getProgressMemo","centered","withCloseButton","padding","p","pr","variant","description","DocAnchor","href","label","Actions","aria-label","onClick","showProgressBar","color","size","radius","value","sx","marginTop","borderTop","disabled","Step"],"mappings":"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"}

package/dist/esm/components/table/Table.styles.js

@@ -32,7 +32,7 @@ var useStyles = createStyles(function(theme, param) {
         },
         rowCollapsibleButtonCell: {
             textAlign: "right",
-            padding: "".concat(theme.spacing.xs / 2, "px ").concat(theme.spacing.sm, "px !important")
+            padding: "calc(".concat(theme.spacing.xs, "/2) ").concat(theme.spacing.sm, " !important")
         },
         row: {
             "&:hover": {