npm - @coveord/plasma-mantine - Versions diffs - 48.22.3 → 48.23.0 - Mend

@coveord/plasma-mantine 48.22.3 → 48.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (90) hide show

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

	@@ -1 +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":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","globalFilter","className","mb","rightSection","height","onChange"],"mappings":"AAAA;;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAgC,gBAAgB;AAG/E,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BjB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,~~wCAAIA~~;~~gBAAWC~~,~~cAAcH~~;;;~~IACtE~~;IAEA,qBACI,KAACvB;~~QACG2B~~,~~WAAWV~~,QAAQb,OAAO;QAC1BO,aAAaA;~~QACbiB~~,IAAG;QACHC,4BAAc,~~KAAC/B~~;~~YAAegC~~,QAAQ;YAAIH,~~WAAWT~~,GAAI,qBAACD,QAAQX,KAAK,EAAG,CAACa,~~MAAMO~~,YAAY;;~~QAC7FH~~,OAAOJ,~~MAAMO~~,YAAY;QACzBK,~~UAAUV~~;OACNN;AAGhB,EAAE"}
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) => ({\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":["SearchSize16Px","createStyles","TextInput","useTable","useStyles","theme","wrapper","marginBottom","empty","color","colors","gray","TableFilter","placeholder","classNames","styles","unstyled","others","name","classes","cx","state","setState","handleSearchChange","event","value","currentTarget","prevState","pagination","pageIndex","pageSize","globalFilter","className","mb","rightSection","height","onChange"],"mappings":"AAAA;;;;;AAAA,SAAQA,cAAc,QAAO,8BAA8B;AAC3D,SAAQC,YAAY,EAAEC,SAAS,QAAgC,gBAAgB;AAG/E,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,SAAS;YACLC,cAAc;QAClB;QACAC,OAAO;YACHC,OAAOJ,MAAMK,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAYA,OAAO,IAAMC,cAAmD,iBAM1D;oCALFC,aAAAA,8CAAc,4CACdC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAsBZ,aAAAA,UAAU,IAAI,EAAE;QAACc,MAAM;QAAeJ,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,IAAjFG,UAAef,WAAfe,SAASC,KAAMhB,WAANgB;IAChB,IAA0BjB,YAAAA,YAAnBkB,QAAmBlB,UAAnBkB,OAAOC,WAAYnB,UAAZmB;IAEd,IAAMC,qBAAqB,SAACC,OAAyC;QACjE,IAAM,AAACC,QAASD,MAAME,aAAa,CAA5BD;QACPH,SAAS,SAACK;mBAA2B,wCAC9BA;gBACHC,YAAYD,UAAUC,UAAU,GAC1B;oBAACC,WAAW;oBAAGC,UAAUH,UAAUC,UAAU,CAACE,QAAQ;gBAAA,IACtDH,UAAUC,UAAU;gBAC1BG,cAAcN;;;IAEtB;IAEA,qBACI,KAACvB;QACG8B,WAAWb,QAAQb,OAAO;QAC1BO,aAAaA;QACboB,IAAG;QACHC,4BAAc,KAAClC;YAAemC,QAAQ;YAAIH,WAAWZ,GAAI,qBAACD,QAAQX,KAAK,EAAG,CAACa,MAAMU,YAAY;;QAC7FN,OAAOJ,MAAMU,YAAY;QACzBK,UAAUb;OACNN;AAGhB,EAAE"}

package/dist/esm/components/table/TableHeader.js CHANGED Viewed

@@ -1,8 +1,10 @@
 import _object_spread from "@swc/helpers/src/_object_spread.mjs";
 import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createStyles, Group } from "@mantine/core";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CrossSize16Px } from "@coveord/plasma-react-icons";
+import { Button, createStyles, Group, Space, Tooltip } from "@mantine/core";
+import { useTable } from "./useTable";
 var useStyles = createStyles(function(theme) {
     return {
         root: {
@@ -10,7 +12,7 @@ var useStyles = createStyles(function(theme) {
             top: 0,
             zIndex: 13,
             backgroundColor: theme.colors.gray[1],
-            borderBottom: "1px solid ".concat(theme.colors.gray[4])
+            borderBottom: "1px solid ".concat(theme.colors.gray[3])
         }
     };
 });
@@ -21,18 +23,48 @@ export var TableHeader = function(_param) {
         "unstyled",
         "children"
     ]);
+    var _useTable = useTable(), getSelectedRows = _useTable.getSelectedRows, multiRowSelectionEnabled = _useTable.multiRowSelectionEnabled, clearSelection = _useTable.clearSelection;
     var classes = useStyles(null, {
         name: "TableHeader",
         classNames: classNames,
         styles: styles,
         unstyled: unstyled
     }).classes;
-    return /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
+    var selectedRows = getSelectedRows();
+    return multiRowSelectionEnabled ? /*#__PURE__*/ _jsxs(Group, {
+        position: "apart",
+        className: classes.root,
+        children: [
+            selectedRows.length > 0 ? /*#__PURE__*/ _jsx(Tooltip, {
+                label: "Unselect all",
+                children: /*#__PURE__*/ _jsxs(Button, {
+                    onClick: clearSelection,
+                    ml: "lg",
+                    variant: "subtle",
+                    leftIcon: /*#__PURE__*/ _jsx(CrossSize16Px, {
+                        height: 16
+                    }),
+                    children: [
+                        selectedRows.length,
+                        " selected"
+                    ]
+                })
+            }) : /*#__PURE__*/ _jsx(Space, {}),
+            /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
+                position: "right",
+                spacing: "lg",
+                px: "md",
+                py: "sm"
+            }, others), {
+                children: children
+            }))
+        ]
+    }) : /*#__PURE__*/ _jsx(Group, _object_spread_props(_object_spread({
         position: "right",
         spacing: "lg",
-        className: classes.root,
         px: "md",
-        py: "sm"
+        py: "sm",
+        className: classes.root
     }, others), {
         children: children
     }));

package/dist/esm/components/table/TableHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {createStyles, DefaultProps, Group, Selectors} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'sticky',\n top: 0,\n zIndex: 13, // skeleton is 11\n backgroundColor: theme.colors.gray[1],\n borderBottom: `1px solid ${theme.colors.gray[4]}`,\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n return (\n <Group position=\"~~right~~\" ~~spacing~~=\"lg\" ~~className~~={~~classes~~.~~root~~} px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n );\n};\n"],"names":["createStyles","Group","useStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","TableHeader","classNames","styles","unstyled","children","others","classes","name","~~spacing~~","className","px","py"],"mappings":"AAAA;;;;AAAA,SAAQA,YAAY,EAAgBC,KAAK,~~QAAkB~~,gBAAgB;~~AAG3E~~,IAAMC,~~YAAYF~~,aAAa,~~SAACG~~;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOA,OAAO,IAAME,cAAmD,iBAM1D;QALFC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAM,~~AAACE~~,~~UAAWhB~~,UAAU,IAAI,EAAE;~~QAACiB~~,MAAM;~~QAAeN~~,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,~~GAA7EG~~;IACP,~~qBACI~~,~~KAACjB~~;~~QAAMI~~,~~UAAS~~;~~QAAQe~~,~~SAAQ~~;~~QAAKC~~,WAAWH,~~QAAQd~~,IAAI;~~QAAEkB~~,IAAG;QAAKC,IAAG;~~OAASN~~;kBAC7ED~~;;AAGb~~,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/table/TableHeader.tsx"],"sourcesContent":["import {CrossSize16Px} from '@coveord/plasma-react-icons';\nimport {Button, createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';\nimport {FunctionComponent, ReactNode} from 'react';\n\nimport {useTable} from './useTable';\n\nconst useStyles = createStyles((theme) => ({\n root: {\n position: 'sticky',\n top: 0,\n zIndex: 13, // skeleton is 11\n backgroundColor: theme.colors.gray[1],\n borderBottom: `1px solid ${theme.colors.gray[3]}`,\n },\n}));\n\ntype TableHeaderStylesNames = Selectors<typeof useStyles>;\ninterface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {\n /* Children of header (ie: actions, datepicker, etc.) */\n children?: ReactNode;\n}\nexport const TableHeader: FunctionComponent<TableHeaderProps> = ({\n classNames,\n styles,\n unstyled,\n children,\n ...others\n}) => {\n const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();\n const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});\n const selectedRows = getSelectedRows();\n return multiRowSelectionEnabled ? (\n <Group position=\"apart\" className={classes.root}>\n {selectedRows.length > 0 ? (\n <Tooltip label=\"Unselect all\">\n <Button onClick={clearSelection} ml=\"lg\" variant=\"subtle\" leftIcon={<CrossSize16Px height={16} />}>\n {selectedRows.length} selected\n </Button>\n </Tooltip>\n ) : (\n <Space />\n )}\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" {...others}>\n {children}\n </Group>\n </Group>\n ) : (\n <Group position=\"right\" spacing=\"lg\" px=\"md\" py=\"sm\" className={classes.root} {...others}>\n {children}\n </Group>\n );\n};\n"],"names":["CrossSize16Px","Button","createStyles","Group","Space","Tooltip","useTable","useStyles","theme","root","position","top","zIndex","backgroundColor","colors","gray","borderBottom","TableHeader","classNames","styles","unstyled","children","others","getSelectedRows","multiRowSelectionEnabled","clearSelection","classes","name","selectedRows","className","length","label","onClick","ml","variant","leftIcon","height","spacing","px","py"],"mappings":"AAAA;;;;AAAA,SAAQA,aAAa,QAAO,8BAA8B;AAC1D,SAAQC,MAAM,EAAEC,YAAY,EAAgBC,KAAK,EAAaC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAGnG,SAAQC,QAAQ,QAAO,aAAa;AAEpC,IAAMC,YAAYL,aAAa,SAACM;WAAW;QACvCC,MAAM;YACFC,UAAU;YACVC,KAAK;YACLC,QAAQ;YACRC,iBAAiBL,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;YACrCC,cAAc,AAAC,aAAiC,OAArBR,MAAMM,MAAM,CAACC,IAAI,CAAC,EAAE;QACnD;IACJ;;AAOA,OAAO,IAAME,cAAmD,iBAM1D;QALFC,oBAAAA,YACAC,gBAAAA,QACAC,kBAAAA,UACAC,kBAAAA,UACGC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,IAAoEf,YAAAA,YAA7DiB,kBAA6DjB,UAA7DiB,iBAAiBC,2BAA4ClB,UAA5CkB,0BAA0BC,iBAAkBnB,UAAlBmB;IAClD,IAAM,AAACC,UAAWnB,UAAU,IAAI,EAAE;QAACoB,MAAM;QAAeT,YAAAA;QAAYC,QAAAA;QAAQC,UAAAA;IAAQ,GAA7EM;IACP,IAAME,eAAeL;IACrB,OAAOC,yCACH,MAACrB;QAAMO,UAAS;QAAQmB,WAAWH,QAAQjB,IAAI;;YAC1CmB,aAAaE,MAAM,GAAG,kBACnB,KAACzB;gBAAQ0B,OAAM;0BACX,cAAA,MAAC9B;oBAAO+B,SAASP;oBAAgBQ,IAAG;oBAAKC,SAAQ;oBAASC,wBAAU,KAACnC;wBAAcoC,QAAQ;;;wBACtFR,aAAaE,MAAM;wBAAC;;;+BAI7B,KAAC1B,UACJ;0BACD,KAACD;gBAAMO,UAAS;gBAAQ2B,SAAQ;gBAAKC,IAAG;gBAAKC,IAAG;eAASjB;0BACpDD;;;uBAIT,KAAClB;QAAMO,UAAS;QAAQ2B,SAAQ;QAAKC,IAAG;QAAKC,IAAG;QAAKV,WAAWH,QAAQjB,IAAI;OAAMa;kBAC7ED;OAER;AACL,EAAE"}

package/dist/esm/components/table/TablePerPage.js CHANGED Viewed

@@ -13,9 +13,10 @@ export var TablePerPage = function(param) {
     var updatePerPage = function(newPerPage) {
         setState(function(prevState) {
             return _object_spread_props(_object_spread({}, prevState), {
-                pagination: _object_spread_props(_object_spread({}, prevState.pagination), {
+                pagination: {
+                    pageIndex: 0,
                     pageSize: parseInt(newPerPage, 10)
-                })
+                }
             });
         });
     };

package/dist/esm/components/table/TablePerPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n /*\n The label displayed before the control\n \n @default Results per page\n /\n label?: string;\n /\n The per page choices to display\n \n @default [25, 50, 100]\n */\n values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n label = 'Results per page',\n values = [25, 50, 100],\n}) => {\n const {state, setState} = useTable();\n\n const updatePerPage = (newPerPage: string) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: {~~...prevState.pagination~~, pageSize: parseInt(newPerPage, 10)},\n }));\n };\n\n return (\n <Group>\n <Text>{label}</Text>\n <SegmentedControl\n value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n onChange={updatePerPage}\n data={values.map((value) => value.toString())}\n color=\"action\"\n size=\"md\"\n />\n </Group>\n );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":"AAAA;;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAI5D,SAAQC,QAAQ,QAAO,aAAa;AAiBpC,OAAO,IAAMC,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAY,~~wCAAID,UAAUC,UAAU~~;~~oBAAEC~~,UAAUC,~~SAASJ~~,YAAY~~;;;;IAE7E~~;QAMmBH;IAJnB,qBACI,MAACP;;0BACG,KAACE;0BAAMG;;0BACP,KAACJ;~~gBACGc~~,~~OAAOR~~,CAAAA,sCAAAA,MAAMK,UAAU,~~CAACC~~,QAAQ,CAACG,QAAQ,~~gBAAlCT~~,iDAAAA,sCAAwCD,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,~~CAACU~~,QAAQ,EAAE;gBACrEC,~~UAAUR~~;~~gBACVS~~,~~MAAMZ~~,~~OAAOa~~,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;~~AAEFjB~~,~~aAAakB~~,YAAY,GAAG"}
1	+ {"version":3,"sources":["../../../../src/components/table/TablePerPage.tsx"],"sourcesContent":["import {Group, SegmentedControl, Text} from '@mantine/core';\nimport {TableState} from '@tanstack/react-table';\nimport {FunctionComponent} from 'react';\n\nimport {useTable} from './useTable';\n\ninterface TablePerPageProps {\n /*\n The label displayed before the control\n \n @default Results per page\n /\n label?: string;\n /\n The per page choices to display\n \n @default [25, 50, 100]\n */\n values?: number[];\n}\n\nexport const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({\n label = 'Results per page',\n values = [25, 50, 100],\n}) => {\n const {state, setState} = useTable();\n\n const updatePerPage = (newPerPage: string) => {\n setState((prevState: TableState) => ({\n ...prevState,\n pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},\n }));\n };\n\n return (\n <Group>\n <Text>{label}</Text>\n <SegmentedControl\n value={state.pagination.pageSize.toString() ?? values?.[1].toString()}\n onChange={updatePerPage}\n data={values.map((value) => value.toString())}\n color=\"action\"\n size=\"md\"\n />\n </Group>\n );\n};\n\nTablePerPage.DEFAULT_SIZE = 50;\n"],"names":["Group","SegmentedControl","Text","useTable","TablePerPage","label","values","state","setState","updatePerPage","newPerPage","prevState","pagination","pageIndex","pageSize","parseInt","value","toString","onChange","data","map","color","size","DEFAULT_SIZE"],"mappings":"AAAA;;;AAAA,SAAQA,KAAK,EAAEC,gBAAgB,EAAEC,IAAI,QAAO,gBAAgB;AAI5D,SAAQC,QAAQ,QAAO,aAAa;AAiBpC,OAAO,IAAMC,eAA8E,gBAGrF;6BAFFC,OAAAA,kCAAQ,yDACRC,QAAAA,oCAAS;QAAC;QAAI;QAAI;KAAI;IAEtB,IAA0BH,YAAAA,YAAnBI,QAAmBJ,UAAnBI,OAAOC,WAAYL,UAAZK;IAEd,IAAMC,gBAAgB,SAACC,YAAuB;QAC1CF,SAAS,SAACG;mBAA2B,wCAC9BA;gBACHC,YAAY;oBAACC,WAAW;oBAAGC,UAAUC,SAASL,YAAY;gBAAG;;;IAErE;QAMmBH;IAJnB,qBACI,MAACP;;0BACG,KAACE;0BAAMG;;0BACP,KAACJ;gBACGe,OAAOT,CAAAA,sCAAAA,MAAMK,UAAU,CAACE,QAAQ,CAACG,QAAQ,gBAAlCV,iDAAAA,sCAAwCD,mBAAAA,oBAAAA,KAAAA,IAAAA,MAAQ,CAAC,EAAE,CAACW,QAAQ,EAAE;gBACrEC,UAAUT;gBACVU,MAAMb,OAAOc,GAAG,CAAC,SAACJ;2BAAUA,MAAMC,QAAQ;;gBAC1CI,OAAM;gBACNC,MAAK;;;;AAIrB,EAAE;AAEFlB,aAAamB,YAAY,GAAG"}

package/dist/esm/components/table/TableSelectableColumn.js ADDED Viewed

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Checkbox, Tooltip } from "@mantine/core";
+/**
+ * Generic column to use when your table needs multi selection of rows
+ */ export var TableSelectableColumn = {
+    id: "select",
+    enableSorting: false,
+    header: function(param) {
+        var table = param.table;
+        var label = table.getIsAllRowsSelected() ? "Unselect all from this page" : "Select all from this page";
+        return /*#__PURE__*/ _jsx(Tooltip, {
+            label: label,
+            children: /*#__PURE__*/ _jsx(Checkbox, {
+                checked: table.getIsAllPageRowsSelected(),
+                indeterminate: table.getIsSomePageRowsSelected(),
+                onChange: table.getToggleAllPageRowsSelectedHandler(),
+                sx: {
+                    display: "flex"
+                },
+                "aria-label": label
+            })
+        });
+    },
+    cell: function(param) {
+        var row = param.row;
+        return /*#__PURE__*/ _jsx(Checkbox, {
+            checked: row.getIsSelected(),
+            indeterminate: row.getIsSomeSelected(),
+            onChange: row.getToggleSelectedHandler(),
+            sx: {
+                display: "flex"
+            },
+            "aria-label": "Select row"
+        });
+    }
+};
+//# sourceMappingURL=TableSelectableColumn.js.map

package/dist/esm/components/table/TableSelectableColumn.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/table/TableSelectableColumn.tsx"],"sourcesContent":["import {Checkbox, Tooltip} from '@mantine/core';\nimport {ColumnDef} from '@tanstack/table-core';\n\n/**\n * Generic column to use when your table needs multi selection of rows\n */\nexport const TableSelectableColumn: ColumnDef<unknown> = {\n id: 'select',\n enableSorting: false,\n header: ({table}) => {\n const label = table.getIsAllRowsSelected() ? 'Unselect all from this page' : 'Select all from this page';\n return (\n <Tooltip label={label}>\n <Checkbox\n checked={table.getIsAllPageRowsSelected()}\n indeterminate={table.getIsSomePageRowsSelected()}\n onChange={table.getToggleAllPageRowsSelectedHandler()}\n sx={{display: 'flex'}}\n aria-label={label}\n />\n </Tooltip>\n );\n },\n cell: ({row}) => (\n <Checkbox\n checked={row.getIsSelected()}\n indeterminate={row.getIsSomeSelected()}\n onChange={row.getToggleSelectedHandler()}\n sx={{display: 'flex'}}\n aria-label=\"Select row\"\n />\n ),\n};\n"],"names":["Checkbox","Tooltip","TableSelectableColumn","id","enableSorting","header","table","label","getIsAllRowsSelected","checked","getIsAllPageRowsSelected","indeterminate","getIsSomePageRowsSelected","onChange","getToggleAllPageRowsSelectedHandler","sx","display","aria-label","cell","row","getIsSelected","getIsSomeSelected","getToggleSelectedHandler"],"mappings":"AAAA;AAAA,SAAQA,QAAQ,EAAEC,OAAO,QAAO,gBAAgB;AAGhD;;CAEC,GACD,OAAO,IAAMC,wBAA4C;IACrDC,IAAI;IACJC,eAAe,KAAK;IACpBC,QAAQ,gBAAa;YAAXC,cAAAA;QACN,IAAMC,QAAQD,MAAME,oBAAoB,KAAK,gCAAgC,2BAA2B;QACxG,qBACI,KAACP;YAAQM,OAAOA;sBACZ,cAAA,KAACP;gBACGS,SAASH,MAAMI,wBAAwB;gBACvCC,eAAeL,MAAMM,yBAAyB;gBAC9CC,UAAUP,MAAMQ,mCAAmC;gBACnDC,IAAI;oBAACC,SAAS;gBAAM;gBACpBC,cAAYV;;;IAI5B;IACAW,MAAM;YAAEC,YAAAA;6BACJ,KAACnB;YACGS,SAASU,IAAIC,aAAa;YAC1BT,eAAeQ,IAAIE,iBAAiB;YACpCR,UAAUM,IAAIG,wBAAwB;YACtCP,IAAI;gBAACC,SAAS;YAAM;YACpBC,cAAW;;;AAGvB,EAAE"}

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

@@ -5,25 +5,15 @@ import { defaultColumnSizing, flexRender } from "@tanstack/react-table";
 var useStyles = createStyles(function(theme) {
     return {
         th: {
-            padding: "0 !important",
             fontWeight: "400 !important",
+            padding: "0 !important",
             color: theme.black + "!important",
-            button: {
-                padding: "8px 16px",
-                div: {
-                    padding: "0px !important"
-                }
-            },
-            div: {
-                padding: "8px 16px"
-            }
-        },
-        noSort: {
-            padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.md, "px")
+            verticalAlign: "middle"
         },
         control: {
             width: "100%",
-            padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.md, "px"),
+            padding: "".concat(theme.spacing.xs, "px ").concat(theme.spacing.sm, "px"),
+            whiteSpace: "nowrap",
             "&:hover": {
                 backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[6] : theme.colors.gray[2]
             }
@@ -53,7 +43,6 @@ export var Th = function(param) {
                 width: width
             },
             children: /*#__PURE__*/ _jsx(Text, {
-                className: classes.noSort,
                 size: "xs",
                 children: flexRender(header.column.columnDef.header, header.getContext())
             })
@@ -73,6 +62,7 @@ export var Th = function(param) {
             className: classes.control,
             children: /*#__PURE__*/ _jsxs(Group, {
                 position: "apart",
+                noWrap: true,
                 children: [
                     /*#__PURE__*/ _jsx(Text, {
                         size: "xs",

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n ~~padding~~: '0 !important',\n ~~fontWeight~~: '~~400~~ !important' ~~as any~~,\n color: theme.black + '!important',\n ~~button~~: ~~{\n padding:~~ '~~8px 16px~~',\n ~~div: {\n padding: '0px !important',\n },\n },\n div: {\n padding: '8px 16px',\n },\n~~ },\n\n ~~noSort: {\n padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n },\n\n~~ control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.md}px`,\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text ~~className={classes.noSort}~~ size=\"xs\"~~>\n~~ {flexRender(header.column.columnDef.header, header.getContext())}\n </Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted();\n const Icon = SortingIcons[sortingOrder \|\| header.column.getFirstSortDir()];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\">\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","~~padding~~","~~fontWeight~~","color","black","~~button~~","~~div~~","~~noSort~~","spacing","xs","md","~~control~~","~~width","~~backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","sx","action","height"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,SAAS;YACTC,~~YAAY;YACZC,~~OAAOJ,MAAMK,KAAK,GAAG;YACrBC,~~QAAQ~~;~~gBACJJ,SAAS~~;~~gBACTK,KAAK;oBACDL,SAAS;gBACb;YACJ;YACAK,KAAK;gBACDL,SAAS;YACb;QACJ;QAEAM,QAAQ;YACJN,SAAS,AAAC,GAAwBF,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;QACvD;~~QAEAC,SAAS;YACLC,OAAO;~~YACPX~~,SAAS,AAAC,~~GAAwBF~~,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;~~YAEnD~~,WAAW;~~gBACPG~~,~~iBAAiBd~~,~~MAAMe~~,WAAW,KAAK,~~SAASf~~,~~MAAMgB~~,MAAM,CAACC,IAAI,CAAC,EAAE,~~GAAGjB~~,~~MAAMgB~~,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,~~KAAK7B~~;~~IACL8B~~,~~MAAM7B~~;AACV;AAEA,~~IAAM8B~~,gBAAgB;IAClBF,KAAK;IACLC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,~~UAAWzB~~,~~YAAXyB~~;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,~~IAAMd~~,~~QAAQY~~,~~SAAS5B~~,~~oBAAoB4B~~,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,~~KAAC7B~~;~~YAAG8B~~,WAAWP,~~QAAQvB~~,EAAE;~~YAAE+B~~,OAAO;~~gBAACnB~~,OAAAA;YAAK;sBACpC,cAAA,~~KAAClB~~;~~gBAAKoC~~,~~WAAWP,QAAQhB,MAAM;gBAAEiB,~~MAAK;~~0BACjC3B~~,~~WAAWyB~~,OAAOG,MAAM,CAACO,SAAS,CAACV,MAAM,EAAEA,OAAOW,UAAU;;;~~IAI7E~~,CAAC;IAED,IAAMC,SAASZ,OAAOG,MAAM,CAACU,uBAAuB;IACpD,IAAMC,eAAed,OAAOG,MAAM,CAACY,WAAW;IAC9C,IAAMC,OAAOrB,YAAY,CAACmB,gBAAgBd,OAAOG,MAAM,CAACc,eAAe,GAAG;IAE1E,qBACI,~~KAACvC~~;~~QAAG8B~~,WAAWP,~~QAAQvB~~,EAAE;~~QAAE+B~~,OAAO;~~YAACnB~~,OAAAA;QAAK;~~QAAG4B~~,aAAWJ,eAAehB,aAAa,CAACgB,aAAa,GAAG,MAAM;kBACrG,cAAA,~~KAACzC~~;~~YAAe8C~~,SAASP;YAAQJ,WAAWP,~~QAAQZ~~,OAAO;sBACvD,cAAA,~~MAAClB~~;~~gBAAMiD~~,UAAS;;~~kCACZ~~,KAAChD;~~wBAAK8B~~,MAAK;~~kCAAM3B~~,~~WAAWyB~~,OAAOG,MAAM,CAACO,SAAS,CAACV,MAAM,EAAEA,OAAOW,UAAU;;kCAC7E,~~KAAC1C~~;wBAAOoD,IAAI,SAAC5C;mCAAW;gCAACI,~~OAAOiC~~,~~eAAerC~~,~~MAAMgB~~,MAAM,~~CAAC6B~~,MAAM,CAAC,EAAE,~~GAAGjB~~,SAAS;4BAAA;;kCAC7E,cAAA,KAACW;~~4BAAKO~~,QAAQ;;;;;;;AAMtC,EAAE"}
1	+ {"version":3,"sources":["../../../../src/components/table/Th.tsx"],"sourcesContent":["import {ArrowHeadDownSize16Px, ArrowHeadUpSize16Px} from '@coveord/plasma-react-icons';\nimport {Center, createStyles, Group, Text, UnstyledButton} from '@mantine/core';\nimport {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';\n\nconst useStyles = createStyles((theme) => ({\n th: {\n fontWeight: '400 !important' as any,\n padding: '0 !important',\n color: theme.black + '!important',\n verticalAlign: 'middle',\n },\n\n control: {\n width: '100%',\n padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,\n whiteSpace: 'nowrap',\n\n '&:hover': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[6] : theme.colors.gray[2],\n },\n },\n}));\n\ninterface ThProps<T> {\n header: Header<T, unknown>;\n}\n\nconst SortingIcons = {\n asc: ArrowHeadDownSize16Px,\n desc: ArrowHeadUpSize16Px,\n};\n\nconst SortingLabels = {\n asc: 'ascending',\n desc: 'descending',\n} as const;\n\nexport const Th = <T,>({header}: ThProps<T>) => {\n const {classes} = useStyles();\n const size = header.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n\n if (header.isPlaceholder) {\n return null;\n }\n\n if (!header.column.getCanSort()) {\n return (\n <th className={classes.th} style={{width}}>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n </th>\n );\n }\n\n const onSort = header.column.getToggleSortingHandler();\n const sortingOrder = header.column.getIsSorted();\n const Icon = SortingIcons[sortingOrder \|\| header.column.getFirstSortDir()];\n\n return (\n <th className={classes.th} style={{width}} aria-sort={sortingOrder ? SortingLabels[sortingOrder] : 'none'}>\n <UnstyledButton onClick={onSort} className={classes.control}>\n <Group position=\"apart\" noWrap>\n <Text size=\"xs\">{flexRender(header.column.columnDef.header, header.getContext())}</Text>\n <Center sx={(theme) => ({color: sortingOrder ? theme.colors.action[8] : undefined})}>\n <Icon height={14} />\n </Center>\n </Group>\n </UnstyledButton>\n </th>\n );\n};\n"],"names":["ArrowHeadDownSize16Px","ArrowHeadUpSize16Px","Center","createStyles","Group","Text","UnstyledButton","defaultColumnSizing","flexRender","useStyles","theme","th","fontWeight","padding","color","black","verticalAlign","control","width","spacing","xs","sm","whiteSpace","backgroundColor","colorScheme","colors","gray","SortingIcons","asc","desc","SortingLabels","Th","header","classes","size","column","getSize","undefined","isPlaceholder","getCanSort","className","style","columnDef","getContext","onSort","getToggleSortingHandler","sortingOrder","getIsSorted","Icon","getFirstSortDir","aria-sort","onClick","position","noWrap","sx","action","height"],"mappings":"AAAA;AAAA,SAAQA,qBAAqB,EAAEC,mBAAmB,QAAO,8BAA8B;AACvF,SAAQC,MAAM,EAAEC,YAAY,EAAEC,KAAK,EAAEC,IAAI,EAAEC,cAAc,QAAO,gBAAgB;AAChF,SAAQC,mBAAmB,EAAEC,UAAU,QAAe,wBAAwB;AAE9E,IAAMC,YAAYN,aAAa,SAACO;WAAW;QACvCC,IAAI;YACAC,YAAY;YACZC,SAAS;YACTC,OAAOJ,MAAMK,KAAK,GAAG;YACrBC,eAAe;QACnB;QAEAC,SAAS;YACLC,OAAO;YACPL,SAAS,AAAC,GAAwBH,OAAtBA,MAAMS,OAAO,CAACC,EAAE,EAAC,OAAsB,OAAjBV,MAAMS,OAAO,CAACE,EAAE,EAAC;YACnDC,YAAY;YAEZ,WAAW;gBACPC,iBAAiBb,MAAMc,WAAW,KAAK,SAASd,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE,GAAGhB,MAAMe,MAAM,CAACC,IAAI,CAAC,EAAE;YAC/F;QACJ;IACJ;;AAMA,IAAMC,eAAe;IACjBC,KAAK5B;IACL6B,MAAM5B;AACV;AAEA,IAAM6B,gBAAgB;IAClBF,KAAK;IACLC,MAAM;AACV;AAEA,OAAO,IAAME,KAAK,gBAA8B;QAAxBC,eAAAA;IACpB,IAAM,AAACC,UAAWxB,YAAXwB;IACP,IAAMC,OAAOF,OAAOG,MAAM,CAACC,OAAO;IAClC,IAAMlB,QAAQgB,SAAS3B,oBAAoB2B,IAAI,GAAGA,OAAOG,SAAS;IAElE,IAAIL,OAAOM,aAAa,EAAE;QACtB,OAAO,IAAI;IACf,CAAC;IAED,IAAI,CAACN,OAAOG,MAAM,CAACI,UAAU,IAAI;QAC7B,qBACI,KAAC5B;YAAG6B,WAAWP,QAAQtB,EAAE;YAAE8B,OAAO;gBAACvB,OAAAA;YAAK;sBACpC,cAAA,KAACb;gBAAK6B,MAAK;0BAAM1B,WAAWwB,OAAOG,MAAM,CAACO,SAAS,CAACV,MAAM,EAAEA,OAAOW,UAAU;;;IAGzF,CAAC;IAED,IAAMC,SAASZ,OAAOG,MAAM,CAACU,uBAAuB;IACpD,IAAMC,eAAed,OAAOG,MAAM,CAACY,WAAW;IAC9C,IAAMC,OAAOrB,YAAY,CAACmB,gBAAgBd,OAAOG,MAAM,CAACc,eAAe,GAAG;IAE1E,qBACI,KAACtC;QAAG6B,WAAWP,QAAQtB,EAAE;QAAE8B,OAAO;YAACvB,OAAAA;QAAK;QAAGgC,aAAWJ,eAAehB,aAAa,CAACgB,aAAa,GAAG,MAAM;kBACrG,cAAA,KAACxC;YAAe6C,SAASP;YAAQJ,WAAWP,QAAQhB,OAAO;sBACvD,cAAA,MAACb;gBAAMgD,UAAS;gBAAQC,MAAM;;kCAC1B,KAAChD;wBAAK6B,MAAK;kCAAM1B,WAAWwB,OAAOG,MAAM,CAACO,SAAS,CAACV,MAAM,EAAEA,OAAOW,UAAU;;kCAC7E,KAACzC;wBAAOoD,IAAI,SAAC5C;mCAAW;gCAACI,OAAOgC,eAAepC,MAAMe,MAAM,CAAC8B,MAAM,CAAC,EAAE,GAAGlB,SAAS;4BAAA;;kCAC7E,cAAA,KAACW;4BAAKQ,QAAQ;;;;;;;AAMtC,EAAE"}

package/dist/esm/components/table/useRowSelection.js ADDED Viewed

@@ -0,0 +1,48 @@
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_spread_props from "@swc/helpers/src/_object_spread_props.mjs";
+import _sliced_to_array from "@swc/helpers/src/_sliced_to_array.mjs";
+import { functionalUpdate } from "@tanstack/table-core";
+import { useState } from "react";
+export var useRowSelection = function(table) {
+    var _useState = _sliced_to_array(useState({}), 2), rowSelection = _useState[0], setRowSelection = _useState[1];
+    table.setOptions(function(prev) {
+        return _object_spread_props(_object_spread({}, prev), {
+            onRowSelectionChange: function(rowSelectionUpdater) {
+                table.setState(function(old) {
+                    var selectedRowsIds = functionalUpdate(rowSelectionUpdater, old["rowSelection"]);
+                    setRowSelection(function(current) {
+                        var currentRowsById = table.getRowModel().rowsById;
+                        return Object.keys(selectedRowsIds).reduce(function(memo, rowId) {
+                            if (current[rowId]) {
+                                memo[rowId] = current[rowId];
+                            } else {
+                                memo[rowId] = currentRowsById[rowId].original;
+                            }
+                            return memo;
+                        }, {});
+                    });
+                    return _object_spread_props(_object_spread({}, old), {
+                        rowSelection: selectedRowsIds
+                    });
+                });
+            }
+        });
+    });
+    var clearSelection = function() {
+        table.resetRowSelection(true);
+    };
+    var getSelectedRows = function() {
+        return Object.values(rowSelection);
+    };
+    var _getSelectedRows_;
+    var getSelectedRow = function() {
+        return (_getSelectedRows_ = getSelectedRows()[0]) !== null && _getSelectedRows_ !== void 0 ? _getSelectedRows_ : null;
+    };
+    return {
+        clearSelection: clearSelection,
+        getSelectedRow: getSelectedRow,
+        getSelectedRows: getSelectedRows
+    };
+};
+//# sourceMappingURL=useRowSelection.js.map

package/dist/esm/components/table/useRowSelection.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../src/components/table/useRowSelection.ts"],"sourcesContent":["import {functionalUpdate, Table} from '@tanstack/table-core';\nimport {useState} from 'react';\n\nexport const useRowSelection = <T>(table: Table<T>) => {\n const [rowSelection, setRowSelection] = useState<Record<string, T>>({});\n\n table.setOptions((prev) => ({\n ...prev,\n onRowSelectionChange: (rowSelectionUpdater) => {\n table.setState((old) => {\n const selectedRowsIds = functionalUpdate(rowSelectionUpdater, old['rowSelection']);\n setRowSelection((current) => {\n const currentRowsById = table.getRowModel().rowsById;\n return Object.keys(selectedRowsIds).reduce((memo, rowId) => {\n if (current[rowId]) {\n memo[rowId] = current[rowId];\n } else {\n memo[rowId] = currentRowsById[rowId].original;\n }\n return memo;\n }, {} as Record<string, T>);\n });\n\n return {\n ...old,\n rowSelection: selectedRowsIds,\n };\n });\n },\n }));\n\n const clearSelection = () => {\n table.resetRowSelection(true);\n };\n\n const getSelectedRows = () => Object.values(rowSelection);\n\n const getSelectedRow = () => getSelectedRows()[0] ?? null;\n\n return {\n clearSelection,\n getSelectedRow,\n getSelectedRows,\n };\n};\n"],"names":["functionalUpdate","useState","useRowSelection","table","rowSelection","setRowSelection","setOptions","prev","onRowSelectionChange","rowSelectionUpdater","setState","old","selectedRowsIds","current","currentRowsById","getRowModel","rowsById","Object","keys","reduce","memo","rowId","original","clearSelection","resetRowSelection","getSelectedRows","values","getSelectedRow"],"mappings":"AAAA;;;AAAA,SAAQA,gBAAgB,QAAc,uBAAuB;AAC7D,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,OAAO,IAAMC,kBAAkB,SAAIC,OAAoB;IACnD,IAAwCF,6BAAAA,SAA4B,CAAC,QAA9DG,eAAiCH,cAAnBI,kBAAmBJ;IAExCE,MAAMG,UAAU,CAAC,SAACC;eAAU,wCACrBA;YACHC,sBAAsB,SAACC,qBAAwB;gBAC3CN,MAAMO,QAAQ,CAAC,SAACC,KAAQ;oBACpB,IAAMC,kBAAkBZ,iBAAiBS,qBAAqBE,GAAG,CAAC,eAAe;oBACjFN,gBAAgB,SAACQ,SAAY;wBACzB,IAAMC,kBAAkBX,MAAMY,WAAW,GAAGC,QAAQ;wBACpD,OAAOC,OAAOC,IAAI,CAACN,iBAAiBO,MAAM,CAAC,SAACC,MAAMC,OAAU;4BACxD,IAAIR,OAAO,CAACQ,MAAM,EAAE;gCAChBD,IAAI,CAACC,MAAM,GAAGR,OAAO,CAACQ,MAAM;4BAChC,OAAO;gCACHD,IAAI,CAACC,MAAM,GAAGP,eAAe,CAACO,MAAM,CAACC,QAAQ;4BACjD,CAAC;4BACD,OAAOF;wBACX,GAAG,CAAC;oBACR;oBAEA,OAAO,wCACAT;wBACHP,cAAcQ;;gBAEtB;YACJ;;;IAGJ,IAAMW,iBAAiB,WAAM;QACzBpB,MAAMqB,iBAAiB,CAAC,IAAI;IAChC;IAEA,IAAMC,kBAAkB;eAAMR,OAAOS,MAAM,CAACtB;;QAEfqB;IAA7B,IAAME,iBAAiB;eAAMF,CAAAA,oBAAAA,iBAAiB,CAAC,EAAE,cAApBA,+BAAAA,oBAAwB,IAAI;;IAEzD,OAAO;QACHF,gBAAAA;QACAI,gBAAAA;QACAF,iBAAAA;IACJ;AACJ,EAAE"}

package/dist/esm/theme/Theme.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { ArrowHeadRightSize24Px, InfoSize24Px } from "@coveord/plasma-react-icon
 import { color } from "@coveord/plasma-tokens";
 import { PlasmaColors } from "./PlasmaColors";
 export var plasmaTheme = {
+    // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts
     colorScheme: "light",
     fontFamily: "canada-type-gibson, sans-serif",
     black: color.primary.gray[9],
@@ -90,9 +91,7 @@ export var plasmaTheme = {
             styles: function(theme, params) {
                 return {
                     root: {
-                        "&": {
-                            fontWeight: 400
-                        },
+                        fontWeight: 400,
                         backgroundColor: params.variant === "outline" ? "white" : undefined
                     }
                 };
@@ -124,21 +123,27 @@ export var plasmaTheme = {
         InputWrapper: {
             defaultProps: {
                 withAsterisk: false
-            }
-        },
-        TextInput: {
-            defaultProps: {
-                radius: 8
             },
             styles: function(theme) {
                 return {
+                    label: {
+                        marginBottom: theme.spacing.xs,
+                        lineHeight: "20px"
+                    },
                     description: {
-                        fontSize: "inherit",
-                        paddingBottom: theme.spacing.xs
+                        lineHeight: "20px",
+                        fontSize: theme.fontSizes.sm,
+                        color: theme.colors.gray[7],
+                        marginBottom: theme.spacing.xs
                     }
                 };
             }
         },
+        TextInput: {
+            defaultProps: {
+                radius: 8
+            }
+        },
         Tooltip: {
             defaultProps: {
                 color: "navy",

package/dist/esm/theme/Theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n spacing: {\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: (theme) => ({\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n },\n }),\n },\n Button: {\n styles: (theme, params: ButtonStylesParams) => ({\n root: {\n ~~'&': {~~fontWeight: 400},\n backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n },\n }),\n },\n Modal: {\n styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n modal: {\n width: fullScreen\n ? undefined\n : theme.fn.size({size, sizes: {xs: 320, sm: 440, md: '45%', lg: 1334, xl: '85%'}}),\n },\n }),\n defaultProps: {\n overlayColor: color.primary.navy[9],\n overlayOpacity: 0.9,\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n ~~},\n TextInput~~: {\n ~~defaultProps~~: {\n ~~radius~~: 8,\n ~~},\n styles~~: ~~(theme) => ({\~~n description: {\n ~~fontSize~~: '~~inherit~~',\n ~~paddingBottom~~: theme.spacing.xs,\n },\n }),\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n },\n },\n Breadcrumbs: {\n defaultProps: {\n separator: <ArrowHeadRightSize24Px height={24} />,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","~~TextInput~~","~~radius~~","description","~~paddingBottom~~","Tooltip","withArrow","withinPortal","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding"],"mappings":"AAAA;;AAAA,SAAQA,sBAAsB,EAAEC,YAAY,QAAO,8BAA8B;AACjF,SAAQC,KAAK,QAAO,yBAAyB;AAG7C,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,OAAO,IAAMC,cAAoC;~~IAC7CC~~,aAAa;IACbC,YAAY;IACZC,OAAOL,MAAMM,OAAO,CAACC,IAAI,CAAC,EAAE;IAC5BC,eAAe;IACfC,SAAS;QACLC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAC,cAAc;IACdC,UAAU;QACNZ,YAAY;QACZa,YAAY;QACZC,OAAO;YACHC,IAAI;gBAACC,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DC,IAAI;gBAACH,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DE,IAAI;gBAACJ,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DG,IAAI;gBAACL,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DI,IAAI;gBAACN,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DK,IAAI;gBAACP,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;QAChE;IACJ;IACAM,SAAS;QACLlB,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAe,QAAQ5B;IACR6B,YAAY;QACRC,OAAO;YACHC,cAAc;gBACVC,oBAAM,KAAClC;oBAAamC,QAAQ;;gBAC5BlC,OAAO;YACX;YACAmC,QAAQ;gBACJC,OAAO;oBACHnB,YAAY;gBAChB;YACJ;QACJ;QACAoB,OAAO;YACHF,QAAQ,SAACG;uBAAW;oBAChBC,MAAM;wBACF,2BAA2B;4BAACC,eAAe;4BAAWxC,OAAOsC,MAAMT,MAAM,CAACtB,IAAI,CAAC,EAAE;wBAAA;oBACrF;gBACJ;;QACJ;QACAkC,QAAQ;YACJN,QAAQ,SAACG,OAAOI;uBAAgC;oBAC5CH,MAAM;~~wBACF~~,~~KAAK;4BAACtB,~~YAAY;~~wBAAG;wBACrB0B~~,iBAAiBD,OAAOE,OAAO,KAAK,YAAY,UAAUtB,SAAS;oBACvE;gBACJ;;QACJ;QACAuB,OAAO;YACHV,QAAQ,SAACG;oBAAQQ,aAAAA,MAAMC,mBAAAA;uBAAoC;oBACvDC,OAAO;wBACHC,OAAOF,aACDzB,YACAgB,MAAMY,EAAE,CAACJ,IAAI,CAAC;4BAACA,MAAAA;4BAAM5B,OAAO;gCAACR,IAAI;gCAAKC,IAAI;gCAAKC,IAAI;gCAAOC,IAAI;gCAAMC,IAAI;4BAAK;wBAAC,EAAE;oBAC1F;gBACJ;;YACAkB,cAAc;gBACVmB,cAAcnD,MAAMM,OAAO,CAAC8C,IAAI,CAAC,EAAE;gBACnCC,gBAAgB;YACpB;QACJ;QACAC,cAAc;YACVtB,cAAc;gBACVuB,cAAc,KAAK;YACvB;~~QACJ~~;~~QACAC~~,~~WAAW~~;~~YACPxB~~,~~cAAc~~;~~gBACVyB~~,~~QAAQ~~;~~YACZ~~;~~YACAtB~~,~~QAAQ~~,~~SAACG~~;~~uBAAW;oBAChBoB~~,~~aAAa~~;~~wBACTtC~~,~~UAAU~~;~~wBACVuC~~,~~eAAerB~~,MAAM7B,OAAO,CAACC,EAAE;~~oBACnC~~;gBACJ;;QACJ;QACAkD,SAAS;~~YACL5B~~,cAAc;gBACVhC,OAAO;~~gBACP6D~~,WAAW,IAAI;gBACfC,cAAc,IAAI;YACtB;QACJ;QACAC,aAAa;~~YACT/B~~,cAAc;~~gBACVgC~~,yBAAW,~~KAAClE~~;oBAAuBoC,QAAQ;;YAC/C;QACJ;~~QACA+B~~,QAAQ;~~YACJjC~~,cAAc;gBACVY,SAAS;gBACT5C,OAAO;YACX;QACJ;~~QACAkE~~,iBAAiB;~~YACb/B~~,QAAQ;~~gBACJgC~~,MAAM;oBACFC,WAAW;gBACf;YACJ;QACJ;QACAC,QAAQ;~~YACJrC~~,cAAc;gBACVhC,OAAO;YACX;YACAmC,QAAQ,SAACG;uBAAW;oBAChBC,MAAM,mBACCD,MAAMY,EAAE,~~CAACoB~~,KAAK,CAAC;wBACdC,gBAAgB;~~wBAChBvE~~,OAAOsC,MAAMT,MAAM,~~CAAC2C~~,MAAM,CAAC,EAAE;oBACjC;gBAER;;QACJ;QACAC,UAAU;~~YACNzC~~,cAAc;~~gBACVyB~~,QAAQ;YACZ;QACJ;~~QACAiB~~,MAAM;~~YACFvC~~,QAAQ;uBAAO;oBACXI,MAAM;~~wBACFoC~~,eAAe;oBACnB;gBACJ;;QACJ;QACAC,OAAO;~~YACHzC~~,QAAQ;~~gBACJ0C~~,cAAc;oBACVC,SAAS;oBACTC,YAAY;gBAChB;YACJ;QACJ;QACAC,SAAS;~~YACLhD~~,cAAc;~~gBACViD~~,QAAQ;gBACRpB,WAAW,IAAI;YACnB;QACJ;QACAqB,OAAO;~~YACH/C~~,QAAQ;gBACJI,MAAM;~~oBACF4C~~,eAAe;oBACfC,SAAS;~~oBACTnE~~,YAAY;gBAChB;YACJ;QACJ;IACJ;AACJ,EAAE"}
1	+ {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {ArrowHeadRightSize24Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n spacing: {\n xs: 8,\n sm: 16,\n md: 24,\n lg: 32,\n xl: 40,\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: 48, lineHeight: '56px', fontWeight: undefined},\n h2: {fontSize: 32, lineHeight: '40px', fontWeight: undefined},\n h3: {fontSize: 28, lineHeight: '40px', fontWeight: undefined},\n h4: {fontSize: 24, lineHeight: '32px', fontWeight: undefined},\n h5: {fontSize: 18, lineHeight: '28px', fontWeight: undefined},\n h6: {fontSize: 16, lineHeight: '24px', fontWeight: undefined},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: (theme) => ({\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em', color: theme.colors.gray[9]},\n },\n }),\n },\n Button: {\n styles: (theme, params: ButtonStylesParams) => ({\n root: {\n fontWeight: 400,\n backgroundColor: params.variant === 'outline' ? 'white' : undefined,\n },\n }),\n },\n Modal: {\n styles: (theme, {size, fullScreen}: ModalStylesParams) => ({\n modal: {\n width: fullScreen\n ? undefined\n : theme.fn.size({size, sizes: {xs: 320, sm: 440, md: '45%', lg: 1334, xl: '85%'}}),\n },\n }),\n defaultProps: {\n overlayColor: color.primary.navy[9],\n overlayOpacity: 0.9,\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n lineHeight: '20px',\n },\n description: {\n lineHeight: '20px',\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n },\n },\n Breadcrumbs: {\n defaultProps: {\n separator: <ArrowHeadRightSize24Px height={24} />,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n },\n};\n"],"names":["ArrowHeadRightSize24Px","InfoSize24Px","color","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","lineHeight","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","theme","root","letterSpacing","Button","params","backgroundColor","variant","Modal","size","fullScreen","modal","width","fn","overlayColor","navy","overlayOpacity","InputWrapper","withAsterisk","label","marginBottom","description","fontSizes","TextInput","radius","Tooltip","withArrow","withinPortal","Breadcrumbs","separator","Loader","DateRangePicker","cell","textAlign","Anchor","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding"],"mappings":"AAAA;;AAAA,SAAQA,sBAAsB,EAAEC,YAAY,QAAO,8BAA8B;AACjF,SAAQC,KAAK,QAAO,yBAAyB;AAG7C,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,OAAO,IAAMC,cAAoC;IAC7C,2HAA2H;IAC3HC,aAAa;IACbC,YAAY;IACZC,OAAOL,MAAMM,OAAO,CAACC,IAAI,CAAC,EAAE;IAC5BC,eAAe;IACfC,SAAS;QACLC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAC,cAAc;IACdC,UAAU;QACNZ,YAAY;QACZa,YAAY;QACZC,OAAO;YACHC,IAAI;gBAACC,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DC,IAAI;gBAACH,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DE,IAAI;gBAACJ,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DG,IAAI;gBAACL,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DI,IAAI;gBAACN,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;YAC5DK,IAAI;gBAACP,UAAU;gBAAIC,YAAY;gBAAQJ,YAAYK;YAAS;QAChE;IACJ;IACAM,SAAS;QACLlB,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAe,QAAQ5B;IACR6B,YAAY;QACRC,OAAO;YACHC,cAAc;gBACVC,oBAAM,KAAClC;oBAAamC,QAAQ;;gBAC5BlC,OAAO;YACX;YACAmC,QAAQ;gBACJC,OAAO;oBACHnB,YAAY;gBAChB;YACJ;QACJ;QACAoB,OAAO;YACHF,QAAQ,SAACG;uBAAW;oBAChBC,MAAM;wBACF,2BAA2B;4BAACC,eAAe;4BAAWxC,OAAOsC,MAAMT,MAAM,CAACtB,IAAI,CAAC,EAAE;wBAAA;oBACrF;gBACJ;;QACJ;QACAkC,QAAQ;YACJN,QAAQ,SAACG,OAAOI;uBAAgC;oBAC5CH,MAAM;wBACFtB,YAAY;wBACZ0B,iBAAiBD,OAAOE,OAAO,KAAK,YAAY,UAAUtB,SAAS;oBACvE;gBACJ;;QACJ;QACAuB,OAAO;YACHV,QAAQ,SAACG;oBAAQQ,aAAAA,MAAMC,mBAAAA;uBAAoC;oBACvDC,OAAO;wBACHC,OAAOF,aACDzB,YACAgB,MAAMY,EAAE,CAACJ,IAAI,CAAC;4BAACA,MAAAA;4BAAM5B,OAAO;gCAACR,IAAI;gCAAKC,IAAI;gCAAKC,IAAI;gCAAOC,IAAI;gCAAMC,IAAI;4BAAK;wBAAC,EAAE;oBAC1F;gBACJ;;YACAkB,cAAc;gBACVmB,cAAcnD,MAAMM,OAAO,CAAC8C,IAAI,CAAC,EAAE;gBACnCC,gBAAgB;YACpB;QACJ;QACAC,cAAc;YACVtB,cAAc;gBACVuB,cAAc,KAAK;YACvB;YACApB,QAAQ,SAACG;uBAAW;oBAChBkB,OAAO;wBACHC,cAAcnB,MAAM7B,OAAO,CAACC,EAAE;wBAC9BW,YAAY;oBAChB;oBACAqC,aAAa;wBACTrC,YAAY;wBACZD,UAAUkB,MAAMqB,SAAS,CAAChD,EAAE;wBAC5BX,OAAOsC,MAAMT,MAAM,CAACtB,IAAI,CAAC,EAAE;wBAC3BkD,cAAcnB,MAAM7B,OAAO,CAACC,EAAE;oBAClC;gBACJ;;QACJ;QACAkD,WAAW;YACP5B,cAAc;gBACV6B,QAAQ;YACZ;QACJ;QACAC,SAAS;YACL9B,cAAc;gBACVhC,OAAO;gBACP+D,WAAW,IAAI;gBACfC,cAAc,IAAI;YACtB;QACJ;QACAC,aAAa;YACTjC,cAAc;gBACVkC,yBAAW,KAACpE;oBAAuBoC,QAAQ;;YAC/C;QACJ;QACAiC,QAAQ;YACJnC,cAAc;gBACVY,SAAS;gBACT5C,OAAO;YACX;QACJ;QACAoE,iBAAiB;YACbjC,QAAQ;gBACJkC,MAAM;oBACFC,WAAW;gBACf;YACJ;QACJ;QACAC,QAAQ;YACJvC,cAAc;gBACVhC,OAAO;YACX;YACAmC,QAAQ,SAACG;uBAAW;oBAChBC,MAAM,mBACCD,MAAMY,EAAE,CAACsB,KAAK,CAAC;wBACdC,gBAAgB;wBAChBzE,OAAOsC,MAAMT,MAAM,CAAC6C,MAAM,CAAC,EAAE;oBACjC;gBAER;;QACJ;QACAC,UAAU;YACN3C,cAAc;gBACV6B,QAAQ;YACZ;QACJ;QACAe,MAAM;YACFzC,QAAQ;uBAAO;oBACXI,MAAM;wBACFsC,eAAe;oBACnB;gBACJ;;QACJ;QACAC,OAAO;YACH3C,QAAQ;gBACJ4C,cAAc;oBACVC,SAAS;oBACTC,YAAY;gBAChB;YACJ;QACJ;QACAC,SAAS;YACLlD,cAAc;gBACVmD,QAAQ;gBACRpB,WAAW,IAAI;YACnB;QACJ;QACAqB,OAAO;YACHjD,QAAQ;gBACJI,MAAM;oBACF8C,eAAe;oBACfC,SAAS;oBACTrE,YAAY;gBAChB;YACJ;QACJ;IACJ;AACJ,EAAE"}

package/package.json CHANGED Viewed

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

package/src/components/code-editor/CodeEditor.tsx CHANGED Viewed

@@ -143,9 +143,7 @@ export const CodeEditor: FunctionComponent<CodeEditorProps> = (props) => {
     ) : null;
     const _description = description ? (
-        <Input.Description mt="xs" {...descriptionProps}>
-            {description}
-        </Input.Description>
+        <Input.Description {...descriptionProps}>{description}</Input.Description>
     ) : null;
     const _error = error ? (

package/src/components/collection/Collection.tsx CHANGED Viewed

@@ -165,10 +165,10 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
     const _error = error ? <Input.Error {...errorProps}>{error}</Input.Error> : null;
     const _header =
         _label || _description ? (
-            <Stack spacing="xs">
+            <Box mb="sm">
                 {_label}
                 {_description}
-            </Stack>
+            </Box>
         ) : null;
     const items = values.map((item, index) => (
@@ -216,14 +216,12 @@ export const Collection = <T,>(props: CollectionProps<T>) => {
                         className={cx(classes.root, className)}
                         {...others}
                     >
-                        <Stack>
-                            {_header}
-                            <Stack spacing={spacing}>
-                                {items}
-                                {provided.placeholder}
-                                {_addButton}
-                                {_error}
-                            </Stack>
+                        {_header}
+                        <Stack spacing={spacing}>
+                            {items}
+                            {provided.placeholder}
+                            {_addButton}
+                            {_error}
                         </Stack>
                     </Box>
                 )}