@coveord/plasma-mantine 49.3.4 → 49.3.5

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/table/Table.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\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            '& tbody td': {\n                verticalAlign: 'top',\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        rowCollapsibleButtonCell: {\n            textAlign: 'right',\n            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,\n        },\n\n        row: {\n            '&:hover': {\n                backgroundColor: rowBackgroundColor,\n            },\n        },\n    };\n});\n\nexport default useStyles;\n"],"names":["createStyles","useStyles","theme","hasHeader","multiRowSelectionEnabled","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","table","width","paddingLeft","spacing","xl","verticalAlign","header","position","top","backgroundColor","black","white","transition","zIndex","content","left","right","bottom","borderBottom","gray","rowSelected","undefined","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAO3C,IAAMC,YAAYD,aAAwC,SAACE,cAAiD;QAAzCC,kBAAAA,WAAWC,iCAAAA;IAC1E,IAAMC,qBACFH,MAAMI,WAAW,KAAK,SAChBJ,MAAMK,EAAE,CAACC,IAAI,CAACN,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,YAAY,CAAC,CAAC,EAAE;IAC7C,OAAO;QACHC,OAAO;YACHC,OAAO;YACP,4CAA4C;gBACxCC,aAAaX,MAAMY,OAAO,CAACC,EAAE;YACjC;YACA,cAAc;gBACVC,eAAe;YACnB;QACJ;QAEAC,QAAQ;YACJC,UAAU;YACVC,KAAKhB,YAAY,KAAK,CAAC;YACvBiB,iBAAiBlB,MAAMI,WAAW,KAAK,SAASJ,MAAMmB,KAAK,GAAGnB,MAAMoB,KAAK;YACzEC,YAAY;YACZC,QAAQ;YAER,YAAY;gBACRC,SAAS;gBACTP,UAAU;gBACVQ,MAAM;gBACNC,OAAO;gBACPC,QAAQ;gBACRC,cAAc,AAAC,aAAiC,OAArB3B,MAAMO,MAAM,CAACqB,IAAI,CAAC,EAAE;YACnD;QACJ;QAEAC,aAAa;YACTX,iBAAiBhB,2BAA2B4B,YAAY3B,kBAAkB;QAC9E;QAEA4B,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,GAA4BjC,OAA1BA,MAAMY,OAAO,CAACsB,EAAE,GAAG,GAAE,OAAsB,OAAjBlC,MAAMY,OAAO,CAACuB,EAAE,EAAC;QAC3D;QAEAC,KAAK;YACD,WAAW;gBACPlB,iBAAiBf;YACrB;QACJ;IACJ;AACJ;AAEA,eAAeJ,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "49.3.4",
+  "version": "49.3.5",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -24,7 +24,7 @@
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.34.0",
     "react-beautiful-dnd": "13.1.1",
-    "@coveord/plasma-react-icons": "49.2.2",
+    "@coveord/plasma-react-icons": "49.3.5",
     "@coveord/plasma-tokens": "48.25.0"
   },
   "devDependencies": {
@@ -35,7 +35,7 @@
     "@mantine/form": "5.9.2",
     "@mantine/hooks": "5.9.2",
     "@mantine/modals": "5.9.2",
-    "@swc/cli": "0.1.57",
+    "@swc/cli": "0.1.61",
     "@swc/core": "1.3.31",
     "@swc/jest": "0.2.23",
     "@testing-library/dom": "8.18.1",

package/src/components/collection/CollectionItem.tsx

@@ -19,7 +19,7 @@ interface CollectionItemSharedProps extends DefaultProps<Selectors<typeof useSty
 const RemoveButton: FunctionComponent<{
     onClick: React.MouseEventHandler<HTMLButtonElement>;
 }> = ({onClick}) => (
-    <ActionIcon variant="subtle" onClick={onClick} color="action">
+    <ActionIcon sx={{alignSelf: 'center'}} variant="subtle" onClick={onClick} color="action">
         <RemoveSize16Px height={16} />
     </ActionIcon>
 );
@@ -69,7 +69,7 @@ const DraggableCollectionItem: FunctionComponent<PropsWithChildren<CollectionIte
                     {...provided.draggableProps}
                     className={cx(classes.item, {[classes.itemDragging]: isDragging})}
                 >
-                    <div {...provided.dragHandleProps}>
+                    <div {...provided.dragHandleProps} style={{alignSelf: 'center'}}>
                         <DragAndDropSize16Px height={16} />
                     </div>
                     {children}

package/src/components/table/Table.styles.ts

@@ -0,0 +1,58 @@
+import {createStyles} from '@mantine/core';
+
+interface TableStylesParams {
+    hasHeader: boolean;
+    multiRowSelectionEnabled: boolean;
+}
+
+const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
+    const 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, th:first-of-type > *': {
+                paddingLeft: theme.spacing.xl,
+            },
+            '& tbody td': {
+                verticalAlign: 'top',
+            },
+        },
+
+        header: {
+            position: 'sticky',
+            top: hasHeader ? 69 : 0,
+            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
+            transition: 'box-shadow 150ms ease',
+            zIndex: 12, // skeleton is 11
+
+            '&::after': {
+                content: '""',
+                position: 'absolute',
+                left: 0,
+                right: 0,
+                bottom: 0,
+                borderBottom: `1px solid ${theme.colors.gray[2]}`,
+            },
+        },
+
+        rowSelected: {
+            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
+        },
+
+        rowCollapsibleButtonCell: {
+            textAlign: 'right',
+            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
+        },
+
+        row: {
+            '&:hover': {
+                backgroundColor: rowBackgroundColor,
+            },
+        },
+    };
+});
+
+export default useStyles;

package/src/components/table/Table.tsx

@@ -1,4 +1,4 @@
-import {Box, Center, Collapse, createStyles, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
+import {Box, Center, Collapse, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
 import {useForm} from '@mantine/form';
 import {useClickOutside, useDidUpdate} from '@mantine/hooks';
 import {
@@ -15,6 +15,7 @@ import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
 import {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';
 
+import useStyles from './Table.styles';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
 import {onTableChangeEvent, TableContext, TableFormType} from './TableContext';
@@ -29,61 +30,6 @@ import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
 
-interface TableStylesParams {
-    hasHeader: boolean;
-    multiRowSelectionEnabled: boolean;
-}
-
-const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
-    const 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, th:first-of-type > *': {
-                paddingLeft: theme.spacing.xl,
-            },
-            '& tbody td': {
-                verticalAlign: 'top',
-            },
-        },
-
-        header: {
-            position: 'sticky',
-            top: hasHeader ? 69 : 0,
-            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
-            transition: 'box-shadow 150ms ease',
-            zIndex: 12, // skeleton is 11
-
-            '&::after': {
-                content: '""',
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                bottom: 0,
-                borderBottom: `1px solid ${theme.colors.gray[2]}`,
-            },
-        },
-
-        rowSelected: {
-            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
-        },
-
-        rowCollapsibleButtonCell: {
-            textAlign: 'right',
-            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
-        },
-
-        row: {
-            '&:hover': {
-                backgroundColor: rowBackgroundColor,
-            },
-        },
-    };
-});
-
 export interface TableProps<T> {
     /**
      * Data to display in the table