@coveord/plasma-mantine 48.22.3 → 48.23.0

package/dist/cjs/components/code-editor/CodeEditor.js

@@ -119,9 +119,7 @@ var CodeEditor = function(props) {
     }, labelProps), {
         children: label
     })) : null;
-    var _description = description ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Description, _objectSpreadProps(_objectSpread({
-        mt: "xs"
-    }, descriptionProps), {
+    var _description = description ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Description, _objectSpreadProps(_objectSpread({}, descriptionProps), {
         children: description
     })) : null;
     var _error = error ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Error, _objectSpreadProps(_objectSpread({

package/dist/cjs/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, useMonaco} 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 [registered, setRegistered] = useState(false);\n    const monaco = useMonaco();\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    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (monaco && language === 'xml' && !registered) {\n            XML.register(monaco);\n            setRegistered(true);\n        }\n    }, [monaco, language]);\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 mt=\"xs\" {...descriptionProps}>\n            {description}\n        </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) => {\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":["CodeEditor","useStyles","createStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","registered","setRegistered","monaco","useMonaco","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","loadLocalMonaco","monacoInstance","loader","config","useEffect","XML","register","_label","Input","Label","_description","Description","mt","_error","Error","Space","h","_header","Box","_copyButton","Group","position","CopyButton","timeout","copied","copy","Tooltip","withArrow","ActionIcon","color","onClick","CheckSize16Px","CopySize16Px","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","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    Selectors,\n    Space,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useUncontrolled} from '@mantine/hooks';\nimport Editor, {loader, useMonaco} 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 [registered, setRegistered] = useState(false);\n    const monaco = useMonaco();\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    useEffect(() => {\n        if (monacoLoader === 'local') {\n            loadLocalMonaco();\n        } else {\n            setLoaded(true);\n        }\n    }, []);\n\n    useEffect(() => {\n        if (monaco && language === 'xml' && !registered) {\n            XML.register(monaco);\n            setRegistered(true);\n        }\n    }, [monaco, language]);\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) => {\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":["CodeEditor","useStyles","createStyles","theme","root","editor","border","colors","gray","borderRadius","defaultRadius","backgroundColor","colorScheme","white","black","height","defaultProps","language","monacoLoader","defaultValue","minHeight","props","useComponentDefaultProps","onChange","onFocus","value","label","required","labelProps","error","errorProps","description","descriptionProps","maxHeight","disabled","others","useState","loaded","setLoaded","registered","setRegistered","monaco","useMonaco","classes","useUncontrolled","finalValue","_value","handleChange","useParentHeight","parentHeight","ref","loadLocalMonaco","monacoInstance","loader","config","useEffect","XML","register","_label","Input","Label","_description","Description","_error","Error","mt","Space","h","_header","Box","_copyButton","Group","position","CopyButton","timeout","copied","copy","Tooltip","withArrow","ActionIcon","color","onClick","CheckSize16Px","CopySize16Px","_editor","p","pl","className","Editor","defaultLanguage","options","minimap","enabled","wordWrap","wrappingStrategy","scrollBeyondLastLine","formatOnPaste","fontSize","fontSizes","xs","readOnly","tabSize","onMount","onDidFocusEditorText","onDidBlurEditorText","getAction","run","Center","Loader","Stack","justify","spacing","sx","Math","max"],"mappings":"AAAA;;;;+BAqFaA;;;eAAAA;;;;;;;;;;;gCArF6B;oBAiBnC;qBACuB;2DACU;sBACa;sBAEvB;mBACZ;AAElB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,MAAM,CAAC;QACPC,QAAQ;YACJC,QAAQ,AAAC,aAAiC,OAArBH,MAAMI,MAAM,CAACC,IAAI,CAAC,EAAE;YACzCC,cAAcN,MAAMO,aAAa;YACjCC,iBAAiBR,MAAMS,WAAW,KAAK,UAAUT,MAAMU,KAAK,GAAGV,MAAMW,KAAK;YAC1EC,QAAQ;QACZ;IACJ;;AA6CA,IAAMC,eAAyC;IAC3CC,UAAU;IACVC,cAAc;IACdC,cAAc;IACdC,WAAW;AACf;AAEO,IAAMpB,aAAiD,SAACqB,OAAU;IACrE,IAkBIC,4BAAAA,IAAAA,8BAAwB,EAAC,cAAcN,cAAcK,QAjBrDJ,WAiBAK,0BAjBAL,UACAE,eAgBAG,0BAhBAH,cACAI,WAeAD,0BAfAC,UACAC,UAcAF,0BAdAE,SACAC,QAaAH,0BAbAG,OACAC,QAYAJ,0BAZAI,OACAC,WAWAL,0BAXAK,UACAC,aAUAN,0BAVAM,YACAC,QASAP,0BATAO,OACAC,aAQAR,0BARAQ,YACAC,cAOAT,0BAPAS,aACAC,mBAMAV,0BANAU,kBACAZ,YAKAE,0BALAF,WACAa,YAIAX,0BAJAW,WACAC,WAGAZ,0BAHAY,UACAhB,eAEAI,0BAFAJ,cACGiB,kCACHb;QAjBAL;QACAE;QACAI;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAZ;QACAa;QACAC;QACAhB;;IAGJ,IAA4BkB,2BAAAA,IAAAA,gBAAQ,EAAC,KAAK,OAAnCC,SAAqBD,cAAbE,YAAaF;IAC5B,IAAoCA,4BAAAA,IAAAA,gBAAQ,EAAC,KAAK,OAA3CG,aAA6BH,eAAjBI,gBAAiBJ;IACpC,IAAMK,SAASC,IAAAA,gBAAS;IACxB,IAAyBzC,aAAAA,aAAlB0C,UAAkB1C,WAAlB0C,SAASxC,QAASF,WAATE;IAChB,IAA+ByC,kCAAAA,IAAAA,sBAAe,EAAS;QACnDnB,OAAAA;QACAN,cAAAA;QACAI,UAAAA;QACAsB,YAAY;IAChB,QALOC,SAAwBF,qBAAhBG,eAAgBH;IAM/B,IAA4BI,kCAAAA,IAAAA,uBAAe,SAApCC,eAAqBD,qBAAPE,MAAOF;IAE5B,IAAMG;mBAAkB,kBAAA,WAAY;gBAC1BC;;;;wBAAiB;;4BAAM;6EAAA,QAAO;;;;wBAA9BA,iBAAiB;wBACvBC,aAAM,CAACC,MAAM,CAAC;4BAACb,QAAQW;wBAAc;wBACrCd,UAAU,IAAI;;;;;;QAClB;wBAJMa;;;;IAMNI,IAAAA,iBAAS,EAAC,WAAM;QACZ,IAAIrC,iBAAiB,SAAS;YAC1BiC;QACJ,OAAO;YACHb,UAAU,IAAI;QAClB,CAAC;IACL,GAAG,EAAE;IAELiB,IAAAA,iBAAS,EAAC,WAAM;QACZ,IAAId,UAAUxB,aAAa,SAAS,CAACsB,YAAY;YAC7CiB,QAAG,CAACC,QAAQ,CAAChB;YACbD,cAAc,IAAI;QACtB,CAAC;IACL,GAAG;QAACC;QAAQxB;KAAS;IAErB,IAAMyC,SAAShC,sBACX,qBAACiC,WAAK,CAACC,KAAK;QAACjC,UAAUA;OAAcC;kBAChCF;UAEL,IAAI;IAER,IAAMmC,eAAe9B,4BACjB,qBAAC4B,WAAK,CAACG,WAAW,uCAAK9B;kBAAmBD;UAC1C,IAAI;IAER,IAAMgC,SAASlC,sBACX,qBAAC8B,WAAK,CAACK,KAAK;QAACC,IAAG;OAASnC;kBACpBD;wBAGL,qBAACqC,WAAK;QAACC,GAAE;MACZ;IAED,IAAMC,UACFV,UAAUG,6BACN,sBAACQ,SAAG;;YACCX;YACAG;;SAEL,IAAI;IAEZ,IAAMS,4BACF,qBAACC,WAAK;QAACC,UAAS;kBACZ,cAAA,qBAACC,gBAAU;YAAChD,OAAOqB;YAAQ4B,SAAS;sBAC/B;oBAAEC,eAAAA,QAAQC,aAAAA;qCACP,qBAACC,aAAO;oBAACnD,OAAOiD,SAAS,WAAW,MAAM;oBAAEG,SAAS;oBAACN,UAAS;8BAC3D,cAAA,qBAACO,gBAAU;wBAACC,OAAOL,SAAS,SAAS,MAAM;wBAAEM,SAASL;kCACjDD,uBAAS,qBAACO,+BAAa;4BAACnE,QAAQ;2CAAS,qBAACoE,8BAAY;4BAACpE,QAAQ;0BAAM;;;;;;IAQ9F,IAAMqE,UAAU/C,uBACZ,qBAACgC,SAAG;QAACgB,GAAE;QAAKC,IAAG;QAAKC,WAAW5C,QAAQtC,MAAM;kBACzC,cAAA,qBAACmF,cAAM;YACHC,iBAAiBxE;YACjBd,OAAOA,MAAMS,WAAW,KAAK,UAAU,UAAU,SAAS;YAC1D8E,SAAS;gBACLC,SAAS;oBAACC,SAAS,KAAK;gBAAA;gBACxBC,UAAU;gBACVC,kBAAkB;gBAClBC,sBAAsB,KAAK;gBAC3BC,eAAe,IAAI;gBACnBC,UAAU9F,MAAM+F,SAAS,CAACC,EAAE;gBAC5BC,UAAUlE;gBACVmE,SAAS;YACb;YACA5E,OAAOqB;YACPvB,UAAUwB;YACVuD,SAAS,SAACjG,QAAW;gBACjBA,OAAOkG,oBAAoB,CAAC/E;gBAC5BnB,OAAOmG,mBAAmB,eAAC,kBAAA,WAAY;;;;gCACnC;;oCAAMnG,OAAOoG,SAAS,CAAC,gCAAgCC,GAAG;;;gCAA1D;;;;;;gBACJ;YACJ;;uBAIR,qBAACC,YAAM;QAACpB,WAAW5C,QAAQtC,MAAM;kBAC7B,cAAA,qBAACuG,YAAM;MAEd;IAED,qBACI,sBAACC,WAAK;QACFC,SAAQ;QACRvB,WAAW5C,QAAQvC,IAAI;QACvB2G,SAAS;QACTC,IAAI;YAACjG,QAAQkG,KAAKC,GAAG,CAACjE,cAAc7B;YAAYa,WAAAA;QAAS;QACzDiB,KAAKA;OACDf;;YAEHiC;YACAE;YACAc;YACArB;;;AAGb"}

package/dist/cjs/components/collection/Collection.js

@@ -86,8 +86,8 @@ var Collection = function(props) {
     var _error = error ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Input.Error, _objectSpreadProps(_objectSpread({}, errorProps), {
         children: error
     })) : null;
-    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
-        spacing: "xs",
+    var _header = _label || _description ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Box, {
+        mb: "sm",
         children: [
             _label,
             _description
@@ -137,24 +137,22 @@ var Collection = function(props) {
             direction: "vertical",
             droppableId: collectionID,
             children: function(provided) {
-                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, _objectSpreadProps(_objectSpread(_objectSpreadProps(_objectSpread({}, provided.droppableProps), {
+                return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Box, _objectSpreadProps(_objectSpread(_objectSpreadProps(_objectSpread({}, provided.droppableProps), {
                     ref: provided.innerRef,
                     className: cx(classes.root, className)
                 }), others), {
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
-                        children: [
-                            _header,
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
-                                spacing: spacing,
-                                children: [
-                                    items,
-                                    provided.placeholder,
-                                    _addButton,
-                                    _error
-                                ]
-                            })
-                        ]
-                    })
+                    children: [
+                        _header,
+                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_core.Stack, {
+                            spacing: spacing,
+                            children: [
+                                items,
+                                provided.placeholder,
+                                _addButton,
+                                _error
+                            ]
+                        })
+                    ]
                 }));
             }
         })

package/dist/cjs/components/collection/Collection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    Button,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Collection.styles';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        defaultValue,\n        onChange,\n        onRemoveItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const collectionID = useId('dnd-droppable');\n\n    const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n    const hasOnlyOneItem = values.length === 1;\n    const removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\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    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <Stack spacing=\"xs\">\n                {_label}\n                {_description}\n            </Stack>\n        ) : null;\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(values) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => append(newItem)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        <Stack>\n                            {_header}\n                            <Stack spacing={spacing}>\n                                {items}\n                                {provided.placeholder}\n                                {_addButton}\n                                {_error}\n                            </Stack>\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","_label","Input","Label","_description","Description","_error","Error","_header","Stack","items","map","item","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Box","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","placeholder"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/collection/Collection.tsx"],"sourcesContent":["import {AddSize16Px} from '@coveord/plasma-react-icons';\nimport {\n    Box,\n    Button,\n    DefaultProps,\n    Group,\n    Input,\n    InputWrapperBaseProps,\n    MantineNumberSize,\n    Selectors,\n    Stack,\n    Tooltip,\n    useComponentDefaultProps,\n} from '@mantine/core';\nimport {useId} from '@mantine/hooks';\nimport {ReactNode} from 'react';\nimport {DragDropContext, Droppable} from 'react-beautiful-dnd';\nimport {useControlledList} from '../../hooks';\nimport {CollectionItem} from './CollectionItem';\nimport useStyles from './Collection.styles';\n\ninterface CollectionProps<T>\n    extends Omit<InputWrapperBaseProps, 'inputContainer' | 'inputWrapperOrder'>,\n        DefaultProps<Selectors<typeof useStyles>> {\n    /**\n     * The default value each new item should have\n     */\n    newItem: T;\n    /**\n     * A render function called for each item passed in the `value` prop.\n     *\n     * @param item The current item's value\n     * @param index The current item's index\n     */\n    children: (item: T, index: number) => ReactNode;\n    /**\n     * The list of items to display inside the collection\n     *\n     * @default []\n     */\n    value?: T[];\n    /**\n     * The initial items of the collection (for uncontrolled usage only)\n     */\n    defaultValue?: T[];\n    /**\n     * Unused, has no effect\n     */\n    onFocus?: () => void;\n    /**\n     * Function called whenever the value needs to be updated\n     *\n     * @param value The whole list of items after the change\n     */\n    onChange?: (value: T[]) => void;\n    /**\n     * Function called after an item is removed from the collection using the remove button\n     *\n     * @param itemIndex The index of the item that was removed\n     */\n    onRemoveItem?: (itemIndex: number) => void;\n    /**\n     * Whether the collection should have drag and drop behavior enabled\n     *\n     * @default false\n     */\n    draggable?: boolean;\n    /**\n     * Whether the collection is disabled, or in other words in read only mode\n     *\n     * @default false\n     */\n    disabled?: boolean;\n    /**\n     * Function that determines if the add item button should be enabled given the current items of the collection.\n     * The button is always enabled if this props remains undefined\n     *\n     * @param values The current items of the collection\n     */\n    allowAdd?: (values: T[]) => boolean;\n    /**\n     * The label of the add item button\n     *\n     * @default \"Add item\"\n     */\n    addLabel?: string;\n    /**\n     * The tooltip text displayed when hovering over the disabled add item button\n     *\n     * @default 'There is already an empty item'\n     */\n    addDisabledTooltip?: string;\n    /**\n     * The spacing between the colleciton items\n     *\n     * @default 'xs'\n     */\n    spacing?: MantineNumberSize;\n    /**\n     * Whether the collection is required. When required is true, the collection will hide the remove button if there is only one item\n     *\n     * @default false\n     */\n    required?: boolean;\n}\n\nconst defaultProps: Partial<CollectionProps<unknown>> = {\n    draggable: false,\n    addLabel: 'Add item',\n    addDisabledTooltip: 'There is already an empty item',\n    disabled: false,\n    spacing: 'xs',\n    required: false,\n};\n\nexport const Collection = <T,>(props: CollectionProps<T>) => {\n    const {\n        value,\n        defaultValue,\n        onChange,\n        onRemoveItem,\n        disabled,\n        draggable,\n        children,\n        spacing,\n        required,\n        newItem,\n        addLabel,\n        addDisabledTooltip,\n        allowAdd,\n        label,\n        labelProps,\n        description,\n        descriptionProps,\n        error,\n        errorProps,\n\n        // Style props\n        classNames,\n        className,\n        styles,\n        unstyled,\n\n        ...others\n    } = useComponentDefaultProps('Collection', defaultProps as CollectionProps<T>, props);\n    const {classes, cx} = useStyles(null, {classNames, name: 'Collection', styles, unstyled});\n    const collectionID = useId('dnd-droppable');\n\n    const [values, {append, remove, reorder}] = useControlledList({value, onChange, defaultValue});\n    const hasOnlyOneItem = values.length === 1;\n    const removeItem = (index: number) => () => {\n        remove(index);\n        onRemoveItem?.(index);\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    const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;\n    const _header =\n        _label || _description ? (\n            <Box mb=\"sm\">\n                {_label}\n                {_description}\n            </Box>\n        ) : null;\n\n    const items = values.map((item, index) => (\n        <CollectionItem\n            key={index}\n            disabled={disabled}\n            draggable={draggable}\n            index={index}\n            onRemove={removeItem(index)}\n            styles={styles}\n            removable={!(required && hasOnlyOneItem)}\n        >\n            {children(item, index)}\n        </CollectionItem>\n    ));\n\n    const addAllowed = allowAdd?.(values) ?? true;\n\n    const _addButton = disabled ? null : (\n        <Group>\n            <Tooltip label={addDisabledTooltip} disabled={addAllowed}>\n                <Box>\n                    <Button\n                        variant=\"subtle\"\n                        leftIcon={<AddSize16Px height={16} />}\n                        onClick={() => append(newItem)}\n                        disabled={!addAllowed}\n                    >\n                        {addLabel}\n                    </Button>\n                </Box>\n            </Tooltip>\n        </Group>\n    );\n\n    return (\n        <DragDropContext\n            onDragEnd={({destination, source}) => reorder({from: source.index, to: destination?.index || 0})}\n        >\n            <Droppable direction=\"vertical\" droppableId={collectionID}>\n                {(provided) => (\n                    <Box\n                        {...provided.droppableProps}\n                        ref={provided.innerRef}\n                        className={cx(classes.root, className)}\n                        {...others}\n                    >\n                        {_header}\n                        <Stack spacing={spacing}>\n                            {items}\n                            {provided.placeholder}\n                            {_addButton}\n                            {_error}\n                        </Stack>\n                    </Box>\n                )}\n            </Droppable>\n        </DragDropContext>\n    );\n};\n"],"names":["Collection","defaultProps","draggable","addLabel","addDisabledTooltip","disabled","spacing","required","props","useComponentDefaultProps","value","defaultValue","onChange","onRemoveItem","children","newItem","allowAdd","label","labelProps","description","descriptionProps","error","errorProps","classNames","className","styles","unstyled","others","useStyles","name","classes","cx","collectionID","useId","useControlledList","values","append","remove","reorder","hasOnlyOneItem","length","removeItem","index","_label","Input","Label","_description","Description","_error","Error","_header","Box","mb","items","map","item","CollectionItem","onRemove","removable","addAllowed","_addButton","Group","Tooltip","Button","variant","leftIcon","AddSize16Px","height","onClick","DragDropContext","onDragEnd","destination","source","from","to","Droppable","direction","droppableId","provided","droppableProps","ref","innerRef","root","Stack","placeholder"],"mappings":"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"}

package/dist/cjs/components/table/Table.js

@@ -31,13 +31,16 @@ var _tableHeader = require("./TableHeader");
 var _tablePagination = require("./TablePagination");
 var _tablePerPage = require("./TablePerPage");
 var _tablePredicate = require("./TablePredicate");
+var _tableSelectableColumn = require("./TableSelectableColumn");
 var _th = require("./Th");
-var useStyles = (0, _core.createStyles)(function(theme, param, getRef) {
-    var hasHeader = param.hasHeader;
+var _useRowSelection = require("./useRowSelection");
+var useStyles = (0, _core.createStyles)(function(theme, param) {
+    var hasHeader = param.hasHeader, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
+    var rowBackgroundColor = theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors[theme.primaryColor][0];
     return {
         table: {
             width: "100%",
-            "& td:first-of-type": {
+            "& td:first-of-type, th:first-of-type > *": {
                 paddingLeft: theme.spacing.xl
             }
         },
@@ -47,12 +50,6 @@ var useStyles = (0, _core.createStyles)(function(theme, param, getRef) {
             backgroundColor: theme.colorScheme === "dark" ? theme.black : theme.white,
             transition: "box-shadow 150ms ease",
             zIndex: 12,
-            "& tr th:first-of-type button": {
-                paddingLeft: theme.spacing.xl
-            },
-            "& tr th:first-of-type div": {
-                paddingLeft: theme.spacing.xl
-            },
             "&::after": {
                 content: '""',
                 position: "absolute",
@@ -63,15 +60,23 @@ var useStyles = (0, _core.createStyles)(function(theme, param, getRef) {
             }
         },
         rowSelected: {
-            ref: getRef("rowSelected")
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor
         },
-        row: _defineProperty({}, "&:hover, &.".concat(getRef("rowSelected")), {
-            backgroundColor: theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2) : theme.colors[theme.primaryColor][0]
-        })
+        rowSelectionCheckboxCell: {
+            verticalAlign: "middle"
+        },
+        rowCollapsibleButtonCell: {
+            textAlign: "right"
+        },
+        row: {
+            "&:hover": {
+                backgroundColor: rowBackgroundColor
+            }
+        }
     };
 });
 var Table = function(param) {
-    var data = param.data, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction;
+    var data = param.data, getRowId = param.getRowId, noDataChildren = param.noDataChildren, getExpandChildren = param.getExpandChildren, _param_initialState = param.initialState, initialState = _param_initialState === void 0 ? {} : _param_initialState, columns = param.columns, onMount = param.onMount, onChange = param.onChange, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? false : _param_loading, doubleClickAction = param.doubleClickAction, multiRowSelectionEnabled = param.multiRowSelectionEnabled;
     var convertedChildren = _react.Children.toArray(children);
     var header = convertedChildren.find(function(child) {
         return child.type === _tableHeader.TableHeader;
@@ -94,7 +99,8 @@ var Table = function(param) {
         }
     });
     var _useStyles = useStyles({
-        hasHeader: !!header
+        hasHeader: !!header,
+        multiRowSelectionEnabled: multiRowSelectionEnabled
     }), cx = _useStyles.cx, classes = _useStyles.classes;
     var _ref2;
     var table = (0, _reactTable.useReactTable)({
@@ -104,9 +110,13 @@ var Table = function(param) {
             }
         }),
         data: data,
-        columns: columns,
+        columns: multiRowSelectionEnabled ? [
+            _tableSelectableColumn.TableSelectableColumn
+        ].concat(columns) : columns,
         getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
         manualPagination: true,
+        enableMultiRowSelection: !!multiRowSelectionEnabled,
+        getRowId: getRowId,
         getRowCanExpand: function(row) {
             return (_ref2 = !!(getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original))) !== null && _ref2 !== void 0 ? _ref2 : false;
         }
@@ -118,18 +128,18 @@ var Table = function(param) {
             onStateChange: setState
         });
     });
+    var _useRowSelection1 = (0, _useRowSelection.useRowSelection)(table), clearSelection = _useRowSelection1.clearSelection, getSelectedRow = _useRowSelection1.getSelectedRow, getSelectedRows = _useRowSelection1.getSelectedRows;
     var triggerChange = function() {
         return onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread({}, state, form.values));
     };
     (0, _react.useEffect)(function() {
         onMount === null || onMount === void 0 ? void 0 : onMount(_objectSpread({}, state, form.values));
     }, []);
-    var outsideClickRef = (0, _hooks.useClickOutside)(function() {
-        table.resetRowSelection(true);
-    });
     (0, _hooks.useDidUpdate)(function() {
         triggerChange();
-        clearSelection();
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
     }, [
         state.globalFilter,
         state.sorting,
@@ -144,20 +154,11 @@ var Table = function(param) {
             });
         });
     }, []);
-    var clearSelection = function() {
-        setState(function(prevState) {
-            return _objectSpreadProps(_objectSpread({}, prevState), {
-                rowSelection: {}
-            });
-        });
-    };
-    var _ref3;
-    var getSelectedRow = (0, _react.useCallback)(function() {
-        var _table_getSelectedRowModel_flatRows, _table_getSelectedRowModel_flatRows_;
-        return (_ref3 = (_table_getSelectedRowModel_flatRows = table.getSelectedRowModel().flatRows) === null || _table_getSelectedRowModel_flatRows === void 0 ? void 0 : (_table_getSelectedRowModel_flatRows_ = _table_getSelectedRowModel_flatRows[0]) === null || _table_getSelectedRowModel_flatRows_ === void 0 ? void 0 : _table_getSelectedRowModel_flatRows_.original) !== null && _ref3 !== void 0 ? _ref3 : null;
-    }, [
-        state.rowSelection
-    ]);
+    var outsideClickRef = (0, _hooks.useClickOutside)(function() {
+        if (!multiRowSelectionEnabled) {
+            clearSelection();
+        }
+    });
     if (!data) {
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Center, {
             sx: {
@@ -166,11 +167,6 @@ var Table = function(param) {
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Loader, {})
         });
     }
-    var toggleRowSelection = function(row) {
-        table.setRowSelection(function() {
-            return _defineProperty({}, row.id, !row.getIsSelected());
-        });
-    };
     var rows = table.getRowModel().rows.map(function(row) {
         var _ref;
         var rowChildren = (_ref = getExpandChildren === null || getExpandChildren === void 0 ? void 0 : getExpandChildren(row.original)) !== null && _ref !== void 0 ? _ref : null;
@@ -178,19 +174,22 @@ var Table = function(param) {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)("tr", {
                     onClick: function() {
-                        return toggleRowSelection(row);
+                        return row.toggleSelected();
                     },
                     onDoubleClick: function() {
                         return doubleClickAction === null || doubleClickAction === void 0 ? void 0 : doubleClickAction(row.original);
                     },
                     className: cx(classes.row, _defineProperty({}, classes.rowSelected, row.getIsSelected())),
+                    "aria-selected": row.getIsSelected(),
                     children: row.getVisibleCells().map(function(cell) {
                         var size = cell.column.getSize();
                         var width = size !== _reactTable.defaultColumnSizing.size ? size : undefined;
+                        var _obj;
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)("td", {
                             style: {
                                 width: width
                             },
+                            className: cx((_obj = {}, _defineProperty(_obj, classes.rowSelectionCheckboxCell, cell.column.id === _tableSelectableColumn.TableSelectableColumn.id), _defineProperty(_obj, classes.rowCollapsibleButtonCell, cell.column.id === _tableCollapsibleColumn.TableCollapsibleColumn.id), _obj)),
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Skeleton, {
                                 visible: loading,
                                 sx: !loading ? {
@@ -206,13 +205,15 @@ var Table = function(param) {
                         colSpan: columns.length + 1,
                         style: {
                             padding: 0,
-                            borderBottomColor: row.getIsExpanded() ? undefined : "transparent"
+                            borderTop: row.getIsExpanded() ? undefined : "none"
                         },
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Collapse, {
                             in: row.getIsExpanded(),
-                            px: "sm",
-                            py: "xs",
-                            children: rowChildren
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Box, {
+                                px: "sm",
+                                py: "xs",
+                                children: rowChildren
+                            })
                         })
                     })
                 }) : null
@@ -228,9 +229,11 @@ var Table = function(param) {
                 setState: setState,
                 clearFilters: clearFilters,
                 getSelectedRow: getSelectedRow,
+                getSelectedRows: getSelectedRows,
                 clearSelection: clearSelection,
                 form: form,
-                containerRef: outsideClickRef
+                containerRef: outsideClickRef,
+                multiRowSelectionEnabled: multiRowSelectionEnabled
             },
             children: [
                 header,

package/dist/cjs/components/table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport {InitialTableState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {Th} from './Th';\n\nconst useStyles = createStyles<string, {hasHeader: boolean}>((theme, {hasHeader}, getRef) => ({\n    table: {\n        width: '100%',\n        '& td:first-of-type': {\n            paddingLeft: theme.spacing.xl,\n        },\n    },\n\n    header: {\n        position: 'sticky',\n        top: hasHeader ? 69 : 0,\n        backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n        transition: 'box-shadow 150ms ease',\n        zIndex: 12, // skeleton is 11\n        '& tr th:first-of-type button': {\n            paddingLeft: theme.spacing.xl,\n        },\n        '& tr th:first-of-type div': {\n            paddingLeft: theme.spacing.xl,\n        },\n\n        '&::after': {\n            content: '\"\"',\n            position: 'absolute',\n            left: 0,\n            right: 0,\n            bottom: 0,\n            borderBottom: `1px solid ${theme.colors.gray[2]}`,\n        },\n    },\n\n    rowSelected: {\n        ref: getRef('rowSelected'),\n    },\n\n    row: {\n        [`&:hover, &.${getRef('rowSelected')}`]: {\n            backgroundColor:\n                theme.colorScheme === 'dark'\n                    ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n                    : theme.colors[theme.primaryColor][0],\n        },\n    },\n}));\n\ninterface TableProps<T> {\n    /**\n     * Data to display in the table\n     */\n    data: T[];\n    /**\n     * Columns to display in the table.\n     *\n     * @see https://tanstack.com/table/v8/docs/guide/column-defs\n     */\n    columns: Array<ColumnDef<T>>;\n    /**\n     * Function called when the table mounts\n     *\n     * @param state the state of the table\n     */\n    onMount?: onTableChangeEvent;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent;\n    /**\n     * Function that generates the expandable content of a row\n     * Return null for rows that don't need to be expandable\n     *\n     * @param datum the row for which the children should be generated.\n     */\n    getExpandChildren?: (datum: T) => ReactNode;\n    /**\n     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n     */\n    noDataChildren?: ReactNode;\n    /**\n     * Whether the table is loading or not\n     *\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n     *\n     * @example\n     * <Table ...>\n     *     <Table.Header>\n     *         <div>Hello</div>\n     *     </Table.Header>\n     * </Table>\n     */\n    children?: ReactNode;\n\n    /**\n     * Initial state of the table\n     */\n    initialState?: InitialTableState & Partial<TableFormType>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n}\n\ninterface TableType {\n    <T>(props: TableProps<T>): ReactElement;\n    Actions: typeof TableActions;\n    Filter: typeof TableFilter;\n    Footer: typeof TableFooter;\n    Header: typeof TableHeader;\n    Pagination: typeof TablePagination;\n    PerPage: typeof TablePerPage;\n    Predicate: typeof TablePredicate;\n    CollapsibleColumn: typeof TableCollapsibleColumn;\n    DateRangePicker: typeof TableDateRangePicker;\n}\n\nexport const Table: TableType = <T,>({\n    data,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n\n    const {cx, classes} = useStyles({hasHeader: !!header});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: true,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n    });\n    const [state, setState] = useState<TableState>(table.initialState);\n    table.setOptions((prev) => ({\n        ...prev,\n        state,\n        onStateChange: setState,\n    }));\n\n    const triggerChange = () => onChange?.({...state, ...form.values});\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n    }, []);\n\n    const outsideClickRef = useClickOutside(() => {\n        table.resetRowSelection(true);\n    });\n\n    useDidUpdate(() => {\n        triggerChange();\n        clearSelection();\n    }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    const clearSelection = () => {\n        setState((prevState) => ({...prevState, rowSelection: {}}));\n    };\n\n    const getSelectedRow = useCallback(\n        () => table.getSelectedRowModel().flatRows?.[0]?.original ?? null,\n        [state.rowSelection]\n    );\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const toggleRowSelection = (row: Row<T>) => {\n        table.setRowSelection(() => ({[row.id]: !row.getIsSelected()}));\n    };\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => toggleRowSelection(row)}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td key={cell.id} style={{width}}>\n                                <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </Skeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={columns.length + 1}\n                            style={{padding: 0, borderBottomColor: row.getIsExpanded() ? undefined : 'transparent'}}\n                        >\n                            <Collapse in={row.getIsExpanded()} px=\"sm\" py=\"xs\">\n                                {rowChildren}\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                }}\n            >\n                {header}\n                <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                    <thead className={classes.header}>\n                        {table.getHeaderGroups().map((headerGroup) => (\n                            <tr key={headerGroup.id}>\n                                {headerGroup.headers.map((columnHeader) => (\n                                    <Th key={columnHeader.id} header={columnHeader} />\n                                ))}\n                            </tr>\n                        ))}\n                    </thead>\n                    <tbody>\n                        {rows.length ? (\n                            rows\n                        ) : (\n                            <tr>\n                                <td colSpan={columns.length}>{noDataChildren}</td>\n                            </tr>\n                        )}\n                    </tbody>\n                </MantineTable>\n                {footer}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","getRef","hasHeader","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","colorScheme","black","white","transition","zIndex","content","left","right","bottom","borderBottom","colors","gray","rowSelected","ref","row","fn","rgba","primaryColor","data","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","getCoreRowModel","manualPagination","getRowCanExpand","original","useState","state","setState","setOptions","prev","onStateChange","triggerChange","values","useEffect","outsideClickRef","useClickOutside","resetRowSelection","useDidUpdate","clearSelection","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","rowSelection","getSelectedRow","getSelectedRowModel","flatRows","Center","sx","flexGrow","Loader","toggleRowSelection","setRowSelection","id","getIsSelected","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","onDoubleClick","className","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","undefined","td","style","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","padding","borderBottomColor","getIsExpanded","Collapse","in","px","py","Box","TableContext","Provider","value","containerRef","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","TableCollapsibleColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/table/Table.tsx"],"sourcesContent":["import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';\nimport {useForm} from '@mantine/form';\nimport {useClickOutside, useDidUpdate} from '@mantine/hooks';\nimport {\n    ColumnDef,\n    defaultColumnSizing,\n    flexRender,\n    getCoreRowModel,\n    Row,\n    TableState,\n    useReactTable,\n} from '@tanstack/react-table';\nimport {CoreOptions, InitialTableState} from '@tanstack/table-core';\nimport defaultsDeep from 'lodash.defaultsdeep';\nimport {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';\n\nimport {TableActions} from './TableActions';\nimport {TableCollapsibleColumn} from './TableCollapsibleColumn';\nimport {onTableChangeEvent, TableContext, TableFormType} from './TableContext';\nimport {TableDateRangePicker} from './TableDateRangePicker';\nimport {TableFilter} from './TableFilter';\nimport {TableFooter} from './TableFooter';\nimport {TableHeader} from './TableHeader';\nimport {TablePagination} from './TablePagination';\nimport {TablePerPage} from './TablePerPage';\nimport {TablePredicate} from './TablePredicate';\nimport {TableSelectableColumn} from './TableSelectableColumn';\nimport {Th} from './Th';\nimport {useRowSelection} from './useRowSelection';\n\ninterface TableStylesParams {\n    hasHeader: boolean;\n    multiRowSelectionEnabled: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {\n    const rowBackgroundColor =\n        theme.colorScheme === 'dark'\n            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n            : theme.colors[theme.primaryColor][0];\n    return {\n        table: {\n            width: '100%',\n            '& td:first-of-type, th:first-of-type > *': {\n                paddingLeft: theme.spacing.xl,\n            },\n        },\n\n        header: {\n            position: 'sticky',\n            top: hasHeader ? 69 : 0,\n            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,\n            transition: 'box-shadow 150ms ease',\n            zIndex: 12, // skeleton is 11\n\n            '&::after': {\n                content: '\"\"',\n                position: 'absolute',\n                left: 0,\n                right: 0,\n                bottom: 0,\n                borderBottom: `1px solid ${theme.colors.gray[2]}`,\n            },\n        },\n\n        rowSelected: {\n            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n        },\n\n        rowSelectionCheckboxCell: {\n            verticalAlign: 'middle',\n        },\n\n        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\ninterface TableProps<T> {\n    /**\n     * Data to display in the table\n     */\n    data: T[];\n    /**\n     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.\n     */\n    getRowId?: CoreOptions<T>['getRowId'];\n    /**\n     * Columns to display in the table.\n     *\n     * @see https://tanstack.com/table/v8/docs/guide/column-defs\n     */\n    columns: Array<ColumnDef<T>>;\n    /**\n     * Function called when the table mounts\n     *\n     * @param state the state of the table\n     */\n    onMount?: onTableChangeEvent;\n    /**\n     * Function called when the table should update\n     *\n     * @param state the state of the table\n     */\n    onChange?: onTableChangeEvent;\n    /**\n     * Function that generates the expandable content of a row\n     * Return null for rows that don't need to be expandable\n     *\n     * @param datum the row for which the children should be generated.\n     */\n    getExpandChildren?: (datum: T) => ReactNode;\n    /**\n     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table\n     */\n    noDataChildren?: ReactNode;\n    /**\n     * Whether the table is loading or not\n     *\n     * @default false\n     */\n    loading?: boolean;\n    /**\n     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`\n     *\n     * @example\n     * <Table ...>\n     *     <Table.Header>\n     *         <div>Hello</div>\n     *     </Table.Header>\n     * </Table>\n     */\n    children?: ReactNode;\n\n    /**\n     * Initial state of the table\n     */\n    initialState?: InitialTableState & Partial<TableFormType>;\n    /**\n     * Action passed when user double clicks on a row\n     */\n    doubleClickAction?: (datum: T) => void;\n    /**\n     * Whether the user can select multiple rows in order to perform actions in bulk\n     *\n     * @default false\n     */\n    multiRowSelectionEnabled?: boolean;\n}\n\ninterface TableType {\n    <T>(props: TableProps<T>): ReactElement;\n    Actions: typeof TableActions;\n    Filter: typeof TableFilter;\n    Footer: typeof TableFooter;\n    Header: typeof TableHeader;\n    Pagination: typeof TablePagination;\n    PerPage: typeof TablePerPage;\n    Predicate: typeof TablePredicate;\n    DateRangePicker: typeof TableDateRangePicker;\n    CollapsibleColumn: typeof TableCollapsibleColumn;\n}\n\nexport const Table: TableType = <T,>({\n    data,\n    getRowId,\n    noDataChildren,\n    getExpandChildren,\n    initialState = {},\n    columns,\n    onMount,\n    onChange,\n    children,\n    loading = false,\n    doubleClickAction,\n    multiRowSelectionEnabled,\n}: TableProps<T>) => {\n    const convertedChildren = Children.toArray(children) as ReactElement[];\n    const header = convertedChildren.find((child) => child.type === TableHeader);\n    const footer = convertedChildren.find((child) => child.type === TableFooter);\n\n    const {predicates, dateRange, ...initialStateWithoutForm} = initialState;\n    const form = useForm<TableFormType>({\n        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},\n    });\n    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});\n\n    const table = useReactTable({\n        initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),\n        data,\n        columns: multiRowSelectionEnabled ? [TableSelectableColumn as ColumnDef<T>].concat(columns) : columns,\n        getCoreRowModel: getCoreRowModel(),\n        manualPagination: true,\n        enableMultiRowSelection: !!multiRowSelectionEnabled,\n        getRowId,\n        getRowCanExpand: (row: Row<T>) => !!getExpandChildren?.(row.original) ?? false,\n    });\n    const [state, setState] = useState<TableState>(table.initialState);\n    table.setOptions((prev) => ({\n        ...prev,\n        state,\n        onStateChange: setState,\n    }));\n    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);\n\n    const triggerChange = () => onChange?.({...state, ...form.values});\n\n    useEffect(() => {\n        onMount?.({...state, ...form.values});\n    }, []);\n\n    useDidUpdate(() => {\n        triggerChange();\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    }, [state.globalFilter, state.sorting, state.pagination, form.values]);\n\n    const clearFilters = useCallback(() => {\n        form.setFieldValue('predicates', {});\n        setState((prevState) => ({...prevState, globalFilter: ''}));\n    }, []);\n\n    const outsideClickRef = useClickOutside(() => {\n        if (!multiRowSelectionEnabled) {\n            clearSelection();\n        }\n    });\n\n    if (!data) {\n        return (\n            <Center sx={{flexGrow: 1}}>\n                <Loader />\n            </Center>\n        );\n    }\n\n    const rows = table.getRowModel().rows.map((row) => {\n        const rowChildren = getExpandChildren?.(row.original) ?? null;\n\n        return (\n            <Fragment key={row.id}>\n                <tr\n                    onClick={() => row.toggleSelected()}\n                    onDoubleClick={() => doubleClickAction?.(row.original)}\n                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}\n                    aria-selected={row.getIsSelected()}\n                >\n                    {row.getVisibleCells().map((cell) => {\n                        const size = cell.column.getSize();\n                        const width = size !== defaultColumnSizing.size ? size : undefined;\n                        return (\n                            <td\n                                key={cell.id}\n                                style={{width}}\n                                className={cx({\n                                    [classes.rowSelectionCheckboxCell]: cell.column.id === TableSelectableColumn.id,\n                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n                                })}\n                            >\n                                <Skeleton visible={loading} sx={!loading ? {borderRadius: 0} : undefined}>\n                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}\n                                </Skeleton>\n                            </td>\n                        );\n                    })}\n                </tr>\n                {rowChildren ? (\n                    <tr>\n                        <td\n                            colSpan={columns.length + 1}\n                            style={{padding: 0, borderTop: row.getIsExpanded() ? undefined : 'none'}}\n                        >\n                            <Collapse in={row.getIsExpanded()}>\n                                <Box px=\"sm\" py=\"xs\">\n                                    {rowChildren}\n                                </Box>\n                            </Collapse>\n                        </td>\n                    </tr>\n                ) : null}\n            </Fragment>\n        );\n    });\n\n    return (\n        <Box ref={outsideClickRef}>\n            <TableContext.Provider\n                value={{\n                    onChange: triggerChange,\n                    state,\n                    setState,\n                    clearFilters,\n                    getSelectedRow,\n                    getSelectedRows,\n                    clearSelection,\n                    form,\n                    containerRef: outsideClickRef,\n                    multiRowSelectionEnabled,\n                }}\n            >\n                {header}\n                <MantineTable className={classes.table} horizontalSpacing=\"sm\" verticalSpacing=\"xs\" pb=\"sm\">\n                    <thead className={classes.header}>\n                        {table.getHeaderGroups().map((headerGroup) => (\n                            <tr key={headerGroup.id}>\n                                {headerGroup.headers.map((columnHeader) => (\n                                    <Th key={columnHeader.id} header={columnHeader} />\n                                ))}\n                            </tr>\n                        ))}\n                    </thead>\n                    <tbody>\n                        {rows.length ? (\n                            rows\n                        ) : (\n                            <tr>\n                                <td colSpan={columns.length}>{noDataChildren}</td>\n                            </tr>\n                        )}\n                    </tbody>\n                </MantineTable>\n                {footer}\n            </TableContext.Provider>\n        </Box>\n    );\n};\n\nTable.Actions = TableActions;\nTable.Filter = TableFilter;\nTable.Footer = TableFooter;\nTable.Header = TableHeader;\nTable.Pagination = TablePagination;\nTable.Predicate = TablePredicate;\nTable.PerPage = TablePerPage;\nTable.Predicate = TablePredicate;\nTable.CollapsibleColumn = TableCollapsibleColumn;\nTable.DateRangePicker = TableDateRangePicker;\n"],"names":["Table","useStyles","createStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowSelectionCheckboxCell","verticalAlign","rowCollapsibleButtonCell","textAlign","row","data","getRowId","noDataChildren","getExpandChildren","initialState","columns","onMount","onChange","children","loading","doubleClickAction","convertedChildren","Children","toArray","find","child","type","TableHeader","footer","TableFooter","predicates","dateRange","initialStateWithoutForm","form","useForm","initialValues","cx","classes","useReactTable","defaultsDeep","pagination","pageSize","TablePerPage","DEFAULT_SIZE","TableSelectableColumn","concat","getCoreRowModel","manualPagination","enableMultiRowSelection","getRowCanExpand","original","useState","state","setState","setOptions","prev","onStateChange","useRowSelection","clearSelection","getSelectedRow","getSelectedRows","triggerChange","values","useEffect","useDidUpdate","globalFilter","sorting","clearFilters","useCallback","setFieldValue","prevState","outsideClickRef","useClickOutside","Center","sx","flexGrow","Loader","rows","getRowModel","map","rowChildren","Fragment","tr","onClick","toggleSelected","onDoubleClick","className","getIsSelected","aria-selected","getVisibleCells","cell","size","column","getSize","defaultColumnSizing","td","style","id","TableCollapsibleColumn","Skeleton","visible","borderRadius","flexRender","columnDef","getContext","colSpan","length","padding","borderTop","getIsExpanded","Collapse","in","Box","px","py","ref","TableContext","Provider","value","containerRef","MantineTable","horizontalSpacing","verticalSpacing","pb","thead","getHeaderGroups","headerGroup","headers","columnHeader","Th","tbody","Actions","TableActions","Filter","TableFilter","Footer","Header","Pagination","TablePagination","Predicate","TablePredicate","PerPage","CollapsibleColumn","DateRangePicker","TableDateRangePicker"],"mappings":"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"}

package/dist/cjs/components/table/TableActions.js

@@ -12,13 +12,13 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _useTable = require("./useTable");
 var TableActions = function(param) {
     var children = param.children;
-    var getSelectedRow = (0, _useTable.useTable)().getSelectedRow;
-    var selectedRow = getSelectedRow();
-    if (!selectedRow) {
+    var _useTable1 = (0, _useTable.useTable)(), getSelectedRows = _useTable1.getSelectedRows, multiRowSelectionEnabled = _useTable1.multiRowSelectionEnabled;
+    var selectedRows = getSelectedRows();
+    if (selectedRows.length <= 0) {
         return null;
     }
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-        children: children(selectedRow)
+        children: children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])
     });
 };
 

package/dist/cjs/components/table/TableActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row\n     *\n     * @param datum the data of the selected row\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: (datum: T) => ReactNode;\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRow} = useTable();\n    const selectedRow = getSelectedRow();\n\n    if (!selectedRow) {\n        return null;\n    }\n\n    return <>{children(selectedRow)}</>;\n};\n"],"names":["TableActions","children","getSelectedRow","useTable","selectedRow"],"mappings":"AAAA;;;;+BA0BaA;;;eAAAA;;;;wBAzBU;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAM,AAACC,iBAAkBC,IAAAA,kBAAQ,IAA1BD;IACP,IAAME,cAAcF;IAEpB,IAAI,CAACE,aAAa;QACd,OAAO,IAAI;IACf,CAAC;IAED,qBAAO;kBAAGH,SAASG;;AACvB"}
+{"version":3,"sources":["../../../../src/components/table/TableActions.tsx"],"sourcesContent":["import {ReactElement, ReactNode} from 'react';\nimport {useTable} from './useTable';\n\ninterface TableActionsProps<T> {\n    /**\n     * Function that return components for the selected row or selected rows when multi row selection is enabled\n     *\n     * @param datum the data of the selected row(s)\n     * @example\n     * <Table.Actions<MyType>>\n     *     {(datum: MyType) => (\n     *         <Button\n     *             component={Link}\n     *             to={`edit/${datum.id}`}\n     *             leftIcon={<EditSize24Px />}\n     *             variant=\"subtle\"\n     *             color=\"navyBlue.8\"\n     *         >\n     *             Edit\n     *         </Button>\n     *     )}\n     * </Table.Actions>\n     */\n    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);\n}\n\nexport const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {\n    const {getSelectedRows, multiRowSelectionEnabled} = useTable();\n    const selectedRows = getSelectedRows();\n\n    if (selectedRows.length <= 0) {\n        return null;\n    }\n\n    return <>{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</>;\n};\n"],"names":["TableActions","children","useTable","getSelectedRows","multiRowSelectionEnabled","selectedRows","length"],"mappings":"AAAA;;;;+BA0BaA;;;eAAAA;;;;wBAzBU;AAyBhB,IAAMA,eAAe,gBAAwD;QAAlDC,iBAAAA;IAC9B,IAAoDC,aAAAA,IAAAA,kBAAQ,KAArDC,kBAA6CD,WAA7CC,iBAAiBC,2BAA4BF,WAA5BE;IACxB,IAAMC,eAAeF;IAErB,IAAIE,aAAaC,MAAM,IAAI,GAAG;QAC1B,OAAO,IAAI;IACf,CAAC;IAED,qBAAO;kBAAGL,SAASG,2BAA2BC,eAAeA,YAAY,CAAC,EAAE;;AAChF"}

package/dist/cjs/components/table/TableCollapsibleColumn.js

@@ -13,8 +13,8 @@ var _plasmaReactIcons = require("@coveord/plasma-react-icons");
 var _core = require("@mantine/core");
 var TableCollapsibleColumn = {
     id: "collapsible",
-    header: "",
     enableSorting: false,
+    header: "",
     cell: function(info) {
         var handler = info.row.getToggleExpandedHandler();
         var onClick = function(e) {

package/dist/cjs/components/table/TableCollapsibleColumn.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {Button} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/**\n * Generic column to use when your table need collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    id: 'collapsible',\n    header: '',\n    enableSorting: false,\n    cell: (info) => {\n        const handler = info.row.getToggleExpandedHandler();\n        const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n            handler();\n        };\n\n        return info.row.getCanExpand() ? (\n            <Button onClick={onClick} variant=\"subtle\" size=\"xs\">\n                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n            </Button>\n        ) : null;\n    },\n};\n"],"names":["TableCollapsibleColumn","id","header","enableSorting","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","Button","variant","size","getIsExpanded","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":"AAAA;;;;+BAQaA;;;eAAAA;;;;gCAR4C;oBACpC;AAOd,IAAMA,yBAA6C;IACtDC,IAAI;IACJC,QAAQ;IACRC,eAAe,KAAK;IACpBC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,qBAACC,YAAM;YAACJ,SAASA;YAASK,SAAQ;YAASC,MAAK;sBAC3CV,KAAKE,GAAG,CAACS,aAAa,mBAAK,qBAACC,qCAAmB,sBAAM,qBAACC,uCAAqB,KAAG;aAEnF,IAAI;IACZ;AACJ"}
+{"version":3,"sources":["../../../../src/components/table/TableCollapsibleColumn.tsx"],"sourcesContent":["import {ArrowHeadDownSize24Px, ArrowHeadUpSize24Px} from '@coveord/plasma-react-icons';\nimport {Button} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\nimport {MouseEvent as ReactMouseEvent} from 'react';\n\n/**\n * Generic column to use when your table needs collapsible rows\n */\nexport const TableCollapsibleColumn: ColumnDef<unknown> = {\n    id: 'collapsible',\n    enableSorting: false,\n    header: '',\n    cell: (info) => {\n        const handler = info.row.getToggleExpandedHandler();\n        const onClick = (e: ReactMouseEvent<HTMLButtonElement>) => {\n            e.stopPropagation();\n            handler();\n        };\n\n        return info.row.getCanExpand() ? (\n            <Button onClick={onClick} variant=\"subtle\" size=\"xs\">\n                {info.row.getIsExpanded() ? <ArrowHeadUpSize24Px /> : <ArrowHeadDownSize24Px />}\n            </Button>\n        ) : null;\n    },\n};\n"],"names":["TableCollapsibleColumn","id","enableSorting","header","cell","info","handler","row","getToggleExpandedHandler","onClick","e","stopPropagation","getCanExpand","Button","variant","size","getIsExpanded","ArrowHeadUpSize24Px","ArrowHeadDownSize24Px"],"mappings":"AAAA;;;;+BAQaA;;;eAAAA;;;;gCAR4C;oBACpC;AAOd,IAAMA,yBAA6C;IACtDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ;IACRC,MAAM,SAACC,MAAS;QACZ,IAAMC,UAAUD,KAAKE,GAAG,CAACC,wBAAwB;QACjD,IAAMC,UAAU,SAACC,GAA0C;YACvDA,EAAEC,eAAe;YACjBL;QACJ;QAEA,OAAOD,KAAKE,GAAG,CAACK,YAAY,mBACxB,qBAACC,YAAM;YAACJ,SAASA;YAASK,SAAQ;YAASC,MAAK;sBAC3CV,KAAKE,GAAG,CAACS,aAAa,mBAAK,qBAACC,qCAAmB,sBAAM,qBAACC,uCAAqB,KAAG;aAEnF,IAAI;IACZ;AACJ"}

package/dist/cjs/components/table/TableContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n    /**\n     * Object containing the table predicates and their selected values\n     *\n     * @example {type: \"LONG\", origin: \"system\"}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Selected date range in the table\n     *\n     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n     */\n    dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n    /**\n     * Function to call when the table needs an update\n     */\n    onChange: () => void;\n    /**\n     * Internal state of the table\n     *\n     * @see https://tanstack.com/table/v8/docs/api/core/table#state\n     */\n    state: TableState;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState) => TableState>;\n    /**\n     * Function that clears the filter and predicates\n     */\n    clearFilters: () => void;\n    /**\n     * Function that returns the selected row if any\n     */\n    getSelectedRow: () => any | null;\n    /**\n     * Function that clear the selected row\n     */\n    clearSelection: () => void;\n    /**\n     * Form used to handle predicates and dateRange\n     */\n    form: UseFormReturnType<TableFormType>;\n    /**\n     * Table container ref\n     */\n    containerRef: RefObject<HTMLDivElement>;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["TableContext","createContext"],"mappings":"AAAA;;;;+BA2DaA;;;eAAAA;;;qBAxDoC;AAwD1C,IAAMA,6BAAeC,IAAAA,oBAAa,EAA0B,IAAI"}
+{"version":3,"sources":["../../../../src/components/table/TableContext.tsx"],"sourcesContent":["import {DateRangePickerValue} from '@mantine/dates';\nimport {UseFormReturnType} from '@mantine/form';\nimport {TableState} from '@tanstack/react-table';\nimport {createContext, Dispatch, RefObject} from 'react';\n\nexport type onTableChangeEvent = (params: TableState & TableFormType) => void;\n\nexport type TableFormType = {\n    /**\n     * Object containing the table predicates and their selected values\n     *\n     * @example {type: \"LONG\", origin: \"system\"}\n     */\n    predicates: Record<string, string>;\n    /**\n     * Selected date range in the table\n     *\n     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]\n     */\n    dateRange: DateRangePickerValue;\n};\n\ntype TableContextType = {\n    /**\n     * Function to call when the table needs an update\n     */\n    onChange: () => void;\n    /**\n     * Internal state of the table\n     *\n     * @see https://tanstack.com/table/v8/docs/api/core/table#state\n     */\n    state: TableState;\n    /**\n     * Function to update the table state\n     */\n    setState: Dispatch<(prevState: TableState) => TableState>;\n    /**\n     * Function that clears the filter and predicates\n     */\n    clearFilters: () => void;\n    /**\n     * Function that returns the selected row if any.\n     */\n    getSelectedRow: () => any | null;\n    /**\n     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.\n     */\n    getSelectedRows: () => any[];\n    /**\n     * Function that clear the selected row\n     */\n    clearSelection: () => void;\n    /**\n     * Form used to handle predicates and dateRange\n     */\n    form: UseFormReturnType<TableFormType>;\n    /**\n     * Table container ref\n     */\n    containerRef: RefObject<HTMLDivElement>;\n    multiRowSelectionEnabled: boolean;\n};\n\nexport const TableContext = createContext<TableContextType | null>(null);\n"],"names":["TableContext","createContext"],"mappings":"AAAA;;;;+BAgEaA;;;eAAAA;;;qBA7DoC;AA6D1C,IAAMA,6BAAeC,IAAAA,oBAAa,EAA0B,IAAI"}

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

@@ -44,6 +44,10 @@ var TableFilter = function(_param) {
         var value = event.currentTarget.value;
         setState(function(prevState) {
             return _objectSpreadProps(_objectSpread({}, prevState), {
+                pagination: prevState.pagination ? {
+                    pageIndex: 0,
+                    pageSize: prevState.pagination.pageSize
+                } : prevState.pagination,
                 globalFilter: value
             });
         });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({...prevState, globalFilter: value}));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","name","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":"AAAA;;;;+BAyBaA;;;eAAAA;;;;;;;;gCAzBgB;oBACkC;wBAGxC;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAAIA;gBAAWC,cAAcH;;;IACtE;IAEA,qBACI,qBAACI,eAAS;QACNC,WAAWZ,QAAQZ,OAAO;QAC1BM,aAAaA;QACbmB,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWX,GAAI,oBAACD,QAAQV,KAAK,EAAG,CAACa,MAAMO,YAAY;;QAC7FH,OAAOJ,MAAMO,YAAY;QACzBO,UAAUZ;OACNP;AAGhB"}
+{"version":3,"sources":["../../../../src/components/table/TableFilter.tsx"],"sourcesContent":["import {SearchSize16Px} from '@coveord/plasma-react-icons';\nimport {createStyles, TextInput, Selectors, DefaultProps} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {ChangeEvent, FunctionComponent} from 'react';\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n    wrapper: {\n        marginBottom: '0 !important',\n    },\n    empty: {\n        color: theme.colors.gray[4],\n    },\n}));\n\ntype TableFilterStylesNames = Selectors<typeof useStyles>;\ninterface TableFilterProps extends DefaultProps<TableFilterStylesNames> {\n    /**\n     * The placeholder for the filter input\n     *\n     * @default \"Search by any field\"\n     */\n    placeholder?: string;\n}\n\nexport const TableFilter: FunctionComponent<TableFilterProps> = ({\n    placeholder = 'Search by any field',\n    classNames,\n    styles,\n    unstyled,\n    ...others\n}) => {\n    const {classes, cx} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n    const {state, setState} = useTable();\n\n    const handleSearchChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const {value} = event.currentTarget;\n        setState((prevState: TableState) => ({\n            ...prevState,\n            pagination: prevState.pagination\n                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}\n                : prevState.pagination,\n            globalFilter: value,\n        }));\n    };\n\n    return (\n        <TextInput\n            className={classes.wrapper}\n            placeholder={placeholder}\n            mb=\"md\"\n            rightSection={<SearchSize16Px height={14} className={cx({[classes.empty]: !state.globalFilter})} />}\n            value={state.globalFilter}\n            onChange={handleSearchChange}\n            {...others}\n        />\n    );\n};\n"],"names":["TableFilter","useStyles","createStyles","theme","wrapper","marginBottom","empty","color","colors","gray","placeholder","classNames","styles","unstyled","others","name","classes","cx","useTable","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","TextInput","className","mb","rightSection","SearchSize16Px","height","onChange"],"mappings":"AAAA;;;;+BAyBaA;;;eAAAA;;;;;;;;gCAzBgB;oBACkC;wBAGxC;AAEvB,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYO,IAAMT,cAAmD,iBAM1D;oCALFU,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BC,aAAAA,IAAAA,kBAAQ,KAA3BC,QAAmBD,WAAnBC,OAAOC,WAAYF,WAAZE;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,qCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,qBAACO,eAAS;QACNC,WAAWf,QAAQZ,OAAO;QAC1BM,aAAaA;QACbsB,IAAG;QACHC,4BAAc,qBAACC,gCAAc;YAACC,QAAQ;YAAIJ,WAAWd,GAAI,oBAACD,QAAQV,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBO,UAAUf;OACNP;AAGhB"}