@coveord/plasma-mantine 56.12.0 → 56.13.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.
- package/.turbo/turbo-build.log +4 -4
- package/.turbo/turbo-test.log +112 -106
- package/dist/.tsbuildinfo +1 -1
- package/dist/cjs/components/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/cjs/components/Skeleton/Skeleton.js +1 -0
- package/dist/cjs/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/cjs/components/Table/table-column/TableActionsColumn.d.ts.map +1 -1
- package/dist/cjs/components/Table/table-column/TableActionsColumn.js +1 -1
- package/dist/cjs/components/Table/table-column/TableActionsColumn.js.map +1 -1
- package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.d.ts +2 -2
- package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.d.ts.map +1 -1
- package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.js +10 -13
- package/dist/cjs/components/Table/table-columns-selector/TableColumnsSelector.js.map +1 -1
- package/dist/esm/components/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/esm/components/Skeleton/Skeleton.js +2 -0
- package/dist/esm/components/Skeleton/Skeleton.js.map +1 -1
- package/dist/esm/components/Table/table-column/TableActionsColumn.d.ts.map +1 -1
- package/dist/esm/components/Table/table-column/TableActionsColumn.js +2 -2
- package/dist/esm/components/Table/table-column/TableActionsColumn.js.map +1 -1
- package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.d.ts +2 -2
- package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.d.ts.map +1 -1
- package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.js +8 -10
- package/dist/esm/components/Table/table-columns-selector/TableColumnsSelector.js.map +1 -1
- package/package.json +3 -3
- package/src/components/Skeleton/Skeleton.ts +4 -0
- package/src/components/Table/table-column/TableActionsColumn.tsx +2 -5
- package/src/components/Table/table-columns-selector/TableColumnsSelector.tsx +8 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAC,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.ts"],"sourcesContent":["import {Skeleton} from '@mantine/core';\n\nSkeleton.displayName = 'Skeleton';\n\nexport {Skeleton, type SkeletonFactory, type SkeletonProps} from '@mantine/core';\n"],"names":["Skeleton","displayName"],"mappings":";;;;+BAIQA;;;eAAAA,cAAQ;;;oBAJO;AAEvBA,cAAQ,CAACC,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableActionsColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAK5D,OAAO,
|
|
1
|
+
{"version":3,"file":"TableActionsColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAK5D,OAAO,EAAuB,2BAA2B,EAAC,MAAM,mDAAmD,CAAC;AAEpH,MAAM,WAAW,sBAAsB;IACnC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,2BAA2B,CAAC;CAC3D;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAiBjD,CAAC"}
|
|
@@ -31,7 +31,7 @@ var TableActionsColumn = {
|
|
|
31
31
|
return null;
|
|
32
32
|
}
|
|
33
33
|
var options = typeof rowConfigurable === 'boolean' ? {} : rowConfigurable;
|
|
34
|
-
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableColumnsSelector.
|
|
34
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_TableColumnsSelector.TableColumnsSelector, {
|
|
35
35
|
table: table,
|
|
36
36
|
options: options
|
|
37
37
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"sourcesContent":["import {MoreSize16Px} from '@coveord/plasma-react-icons';\nimport {useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent} from 'react';\nimport {TableActionsList, TableActionsListProps} from '../table-actions/TableActionsList.js';\n\nimport {useTableContext} from '../TableContext.js';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"sourcesContent":["import {MoreSize16Px} from '@coveord/plasma-react-icons';\nimport {useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent} from 'react';\nimport {TableActionsList, TableActionsListProps} from '../table-actions/TableActionsList.js';\n\nimport {useTableContext} from '../TableContext.js';\nimport {TableColumnsSelector, TableColumnsSelectorOptions} from '../table-columns-selector/TableColumnsSelector.js';\n\nexport interface TableActionsColumnMeta {\n /**\n * When set to `true` or an options object, displays a column selector button in the actions column header.\n * Allows users to show/hide columns in the table.\n *\n * @example\n * // Simple usage\n * options={{ meta: { rowConfigurable: true } }}\n *\n * // With options\n * options={{ meta: { rowConfigurable: { maxSelectableColumns: 5 } } }}\n */\n rowConfigurable?: boolean | TableColumnsSelectorOptions;\n}\n\n/**\n * Generic column to use when your table needs actions on rows\n */\nexport const TableActionsColumn: ColumnDef<unknown> = {\n id: 'actions',\n enableSorting: false,\n enableHiding: false,\n meta: {\n controlColumn: true,\n },\n header: ({table}) => {\n const rowConfigurable = (table.options.meta as TableActionsColumnMeta)?.rowConfigurable;\n if (!rowConfigurable) {\n return null;\n }\n const options = typeof rowConfigurable === 'boolean' ? {} : rowConfigurable;\n return <TableColumnsSelector table={table} options={options} />;\n },\n size: 84, // 16px padding left + 28px ActionIcon + 40px padding right\n cell: (info) => <ActionsMenu info={info} />,\n};\n\ninterface TableActionsColumnProps extends Omit<TableActionsListProps, 'actions'> {\n info: CellContext<unknown, unknown>;\n}\n\nconst defaultProps: Partial<TableActionsColumnProps> = {\n label: 'Actions',\n icon: <MoreSize16Px height={16} />,\n};\n\nconst ActionsMenu: FunctionComponent<TableActionsColumnProps> = (props) => {\n const {getRowActions} = useTableContext();\n\n const {info, ...others} = useProps('PlasmaTableActionsColumn', defaultProps, props);\n\n const actionsElements = getRowActions([info.row.original]);\n return <TableActionsList actions={actionsElements} variant=\"combined\" {...others} />;\n};\n"],"names":["TableActionsColumn","id","enableSorting","enableHiding","meta","controlColumn","header","table","rowConfigurable","options","TableColumnsSelector","size","cell","info","ActionsMenu","defaultProps","label","icon","MoreSize16Px","height","props","getRowActions","useTableContext","useProps","others","actionsElements","row","original","TableActionsList","actions","variant"],"mappings":";;;;+BA2BaA;;;eAAAA;;;;;;gCA3Bc;oBACJ;gCAG+B;4BAExB;oCACkC;AAoBzD,IAAMA,qBAAyC;IAClDC,IAAI;IACJC,eAAe;IACfC,cAAc;IACdC,MAAM;QACFC,eAAe;IACnB;IACAC,QAAQ;YAAEC,cAAAA;YACmBA;QAAzB,IAAMC,mBAAmBD,sBAAAA,MAAME,OAAO,CAACL,IAAI,cAAlBG,0CAAD,AAACA,oBAA+CC,eAAe;QACvF,IAAI,CAACA,iBAAiB;YAClB,OAAO;QACX;QACA,IAAMC,UAAU,OAAOD,oBAAoB,YAAY,CAAC,IAAIA;QAC5D,qBAAO,qBAACE,0CAAoB;YAACH,OAAOA;YAAOE,SAASA;;IACxD;IACAE,MAAM;IACNC,MAAM,SAACC;6BAAS,qBAACC;YAAYD,MAAMA;;;AACvC;AAMA,IAAME,eAAiD;IACnDC,OAAO;IACPC,oBAAM,qBAACC,8BAAY;QAACC,QAAQ;;AAChC;AAEA,IAAML,cAA0D,SAACM;IAC7D,IAAM,AAACC,gBAAiBC,IAAAA,6BAAe,IAAhCD;IAEP,IAA0BE,YAAAA,IAAAA,cAAQ,EAAC,4BAA4BR,cAAcK,QAAvE,AAACP,OAAmBU,UAAnBV,MAASW,sCAAUD;QAAnBV;;IAEP,IAAMY,kBAAkBJ,cAAc;QAACR,KAAKa,GAAG,CAACC,QAAQ;KAAC;IACzD,qBAAO,qBAACC,kCAAgB;QAACC,SAASJ;QAAiBK,SAAQ;OAAeN;AAC9E"}
|
|
@@ -23,9 +23,9 @@ export interface TableColumnsSelectorOptions {
|
|
|
23
23
|
*/
|
|
24
24
|
alwaysVisibleTooltip?: string;
|
|
25
25
|
}
|
|
26
|
-
export interface
|
|
26
|
+
export interface TableColumnsSelectorProps {
|
|
27
27
|
table: Table<unknown>;
|
|
28
28
|
options?: TableColumnsSelectorOptions;
|
|
29
29
|
}
|
|
30
|
-
export declare const
|
|
30
|
+
export declare const TableColumnsSelector: ({ table, options }: TableColumnsSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
31
|
//# sourceMappingURL=TableColumnsSelector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAGhE,MAAM,WAAW,2BAA2B;IACxC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,oBAAoB,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,yBAAyB;IACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAUD,eAAO,MAAM,oBAAoB,GAAI,oBAAkB,yBAAyB,4CAgF/E,CAAC"}
|
|
@@ -2,18 +2,16 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
Object.defineProperty(exports, "
|
|
5
|
+
Object.defineProperty(exports, "TableColumnsSelector", {
|
|
6
6
|
enumerable: true,
|
|
7
7
|
get: function() {
|
|
8
|
-
return
|
|
8
|
+
return TableColumnsSelector;
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
var _object_spread = require("@swc/helpers/_/_object_spread");
|
|
12
|
-
var _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
|
|
13
12
|
var _jsxruntime = require("react/jsx-runtime");
|
|
14
13
|
var _plasmareacticons = require("@coveord/plasma-react-icons");
|
|
15
14
|
var _core = require("@mantine/core");
|
|
16
|
-
var _hooks = require("@mantine/hooks");
|
|
17
15
|
var _reacttable = require("@tanstack/react-table");
|
|
18
16
|
var _ActionIcon = require("../../ActionIcon/ActionIcon");
|
|
19
17
|
var DEFAULT_OPTIONS = {
|
|
@@ -23,10 +21,9 @@ var DEFAULT_OPTIONS = {
|
|
|
23
21
|
limitReachedTooltip: 'You have reached the maximum display limit.',
|
|
24
22
|
alwaysVisibleTooltip: 'This column is always visible.'
|
|
25
23
|
};
|
|
26
|
-
var
|
|
24
|
+
var TableColumnsSelector = function(param) {
|
|
27
25
|
var table = param.table, options = param.options;
|
|
28
26
|
var _$_object_spread = _object_spread._({}, DEFAULT_OPTIONS, options), maxSelectableColumns = _$_object_spread.maxSelectableColumns, footer = _$_object_spread.footer, limitReachedTooltip = _$_object_spread.limitReachedTooltip, alwaysVisibleTooltip = _$_object_spread.alwaysVisibleTooltip;
|
|
29
|
-
var _useDisclosure = _sliced_to_array._((0, _hooks.useDisclosure)(false), 2), opened = _useDisclosure[0], _useDisclosure_ = _useDisclosure[1], toggle = _useDisclosure_.toggle, close = _useDisclosure_.close;
|
|
30
27
|
var allColumns = table.getAllLeafColumns();
|
|
31
28
|
var filteredColumns = allColumns.filter(function(column) {
|
|
32
29
|
var _column_columnDef_meta;
|
|
@@ -74,17 +71,17 @@ var TableColumnsSelectorHeader = function(param) {
|
|
|
74
71
|
}, column.id);
|
|
75
72
|
});
|
|
76
73
|
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Popover, {
|
|
77
|
-
opened: opened,
|
|
78
|
-
onClose: close,
|
|
79
74
|
position: "bottom-end",
|
|
80
75
|
shadow: "md",
|
|
81
76
|
children: [
|
|
82
77
|
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Popover.Target, {
|
|
83
|
-
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
78
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Tooltip, {
|
|
79
|
+
label: "Edit columns",
|
|
80
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ActionIcon.ActionIcon.Tertiary, {
|
|
81
|
+
"aria-label": "settings",
|
|
82
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconSettings, {
|
|
83
|
+
height: 16
|
|
84
|
+
})
|
|
88
85
|
})
|
|
89
86
|
})
|
|
90
87
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon';\n\nexport interface TableColumnsSelectorOptions {\n /**\n * The maximum number of columns that can be selected at the same time.\n * If defined a footer will render with the remaining number of columns that can be selected.\n * Must be a positive integer (greater than 0).\n */\n maxSelectableColumns?: number;\n /**\n * The content to display in the footer when maxSelectableColumns is defined.\n * Can be a string or a function that receives the maxSelectableColumns value.\n * @default (max) => `You can display up to ${max} columns.`\n */\n footer?: string | ((maxSelectableColumns: number) => string);\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n * @default 'You have reached the maximum display limit.'\n */\n limitReachedTooltip?: string;\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n * @default 'This column is always visible.'\n */\n alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorProps {\n table: Table<unknown>;\n options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n footer: (maxSelectableColumns: number) => string;\n} = {\n footer: (max) => `You can display up to ${max} columns.`,\n limitReachedTooltip: 'You have reached the maximum display limit.',\n alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelector = ({table, options}: TableColumnsSelectorProps) => {\n const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n ...DEFAULT_OPTIONS,\n ...options,\n };\n\n const allColumns = table.getAllLeafColumns();\n const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n // Validate maxSelectableColumns - must be a positive integer to be effective\n const effectiveMaxColumns =\n maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n if (filteredColumns.length <= 0) {\n return null;\n }\n\n const getColumnState = (column: (typeof filteredColumns)[number]) => {\n const alwaysVisible = !column.getCanHide();\n const isDisabled =\n (effectiveMaxColumns !== undefined &&\n selectedColumnsCount >= effectiveMaxColumns &&\n !column.getIsVisible()) ||\n alwaysVisible;\n const isVisible = column.getIsVisible() || alwaysVisible;\n return {alwaysVisible, isDisabled, isVisible};\n };\n\n const columnOptions = filteredColumns.map((column) => {\n const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n return (\n <Tooltip\n label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n disabled={!isDisabled}\n position=\"left\"\n key={column.id}\n >\n <div>\n <Checkbox\n label={flexRender(column.columnDef.header, {\n table,\n column,\n header: {column} as Header<unknown, unknown>,\n })}\n name={column.id}\n checked={isVisible}\n disabled={isDisabled}\n onChange={column.getToggleVisibilityHandler()}\n />\n </div>\n </Tooltip>\n );\n });\n\n return (\n <Popover position=\"bottom-end\" shadow=\"md\">\n <Popover.Target>\n <Tooltip label=\"Edit columns\">\n <ActionIcon.Tertiary aria-label=\"settings\">\n <IconSettings height={16} />\n </ActionIcon.Tertiary>\n </Tooltip>\n </Popover.Target>\n <Popover.Dropdown miw={270} pb=\"xs\">\n <ScrollArea.Autosize mah={200} type=\"auto\">\n <Stack gap=\"xs\">{columnOptions}</Stack>\n </ScrollArea.Autosize>\n {effectiveMaxColumns && (\n <>\n <Divider my=\"xs\" mx=\"-sm\" />\n <Text size=\"sm\" c=\"dimmed\">\n {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n </Text>\n </>\n )}\n </Popover.Dropdown>\n </Popover>\n );\n};\n"],"names":["TableColumnsSelector","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","table","options","maxSelectableColumns","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","columnOptions","map","Tooltip","label","disabled","position","div","Checkbox","flexRender","header","name","id","checked","onChange","getToggleVisibilityHandler","Popover","shadow","Target","ActionIcon","Tertiary","aria-label","IconSettings","height","Dropdown","miw","pb","ScrollArea","Autosize","mah","type","Stack","gap","Divider","my","mx","Text","size","c"],"mappings":";;;;+BA2CaA;;;eAAAA;;;;;gCA3Cc;oBACgD;0BACnC;0BACf;AAgCzB,IAAMC,kBAEF;IACAC,QAAQ,SAACC;eAAQ,AAAC,yBAA4B,OAAJA,KAAI;;IAC9CC,qBAAqB;IACrBC,sBAAsB;AAC1B;AAEO,IAAML,uBAAuB;QAAEM,cAAAA,OAAOC,gBAAAA;IACzC,IAAkF,mBAAA,qBAC3EN,iBACAM,UAFAC,uBAA2E,iBAA3EA,sBAAsBN,SAAqD,iBAArDA,QAAQE,sBAA6C,iBAA7CA,qBAAqBC,uBAAwB,iBAAxBA;IAK1D,IAAMI,aAAaH,MAAMI,iBAAiB;IAC1C,IAAMC,kBAAkBF,WAAWG,MAAM,CAAC,SAACC;YAAYA;eAAD,GAACA,yBAAAA,OAAOC,SAAS,CAACC,IAAI,cAArBF,6CAAAA,uBAAuBG,aAAa;;IAC3F,IAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,SAACC;eAAWA,OAAOK,YAAY;OAAIC,MAAM;IAE7F,6EAA6E;IAC7E,IAAMC,sBACFZ,yBAAyBa,aAAab,uBAAuB,IAAIA,uBAAuBa;IAE5F,IAAIV,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,IAAMG,iBAAiB,SAACT;QACpB,IAAMU,gBAAgB,CAACV,OAAOW,UAAU;QACxC,IAAMC,aACF,AAACL,wBAAwBC,aACrBJ,wBAAwBG,uBACxB,CAACP,OAAOK,YAAY,MACxBK;QACJ,IAAMG,YAAYb,OAAOK,YAAY,MAAMK;QAC3C,OAAO;YAACA,eAAAA;YAAeE,YAAAA;YAAYC,WAAAA;QAAS;IAChD;IAEA,IAAMC,gBAAgBhB,gBAAgBiB,GAAG,CAAC,SAACf;QACvC,IAA+CS,kBAAAA,eAAeT,SAAvDU,gBAAwCD,gBAAxCC,eAAeE,aAAyBH,gBAAzBG,YAAYC,YAAaJ,gBAAbI;QAElC,qBACI,qBAACG,aAAO;YACJC,OAAOP,gBAAgBlB,uBAAuBD;YAC9C2B,UAAU,CAACN;YACXO,UAAS;sBAGT,cAAA,qBAACC;0BACG,cAAA,qBAACC,cAAQ;oBACLJ,OAAOK,IAAAA,sBAAU,EAACtB,OAAOC,SAAS,CAACsB,MAAM,EAAE;wBACvC9B,OAAAA;wBACAO,QAAAA;wBACAuB,QAAQ;4BAACvB,QAAAA;wBAAM;oBACnB;oBACAwB,MAAMxB,OAAOyB,EAAE;oBACfC,SAASb;oBACTK,UAAUN;oBACVe,UAAU3B,OAAO4B,0BAA0B;;;WAZ9C5B,OAAOyB,EAAE;IAiB1B;IAEA,qBACI,sBAACI,aAAO;QAACV,UAAS;QAAaW,QAAO;;0BAClC,qBAACD,aAAO,CAACE,MAAM;0BACX,cAAA,qBAACf,aAAO;oBAACC,OAAM;8BACX,cAAA,qBAACe,sBAAU,CAACC,QAAQ;wBAACC,cAAW;kCAC5B,cAAA,qBAACC,8BAAY;4BAACC,QAAQ;;;;;0BAIlC,sBAACP,aAAO,CAACQ,QAAQ;gBAACC,KAAK;gBAAKC,IAAG;;kCAC3B,qBAACC,gBAAU,CAACC,QAAQ;wBAACC,KAAK;wBAAKC,MAAK;kCAChC,cAAA,qBAACC,WAAK;4BAACC,KAAI;sCAAM/B;;;oBAEpBP,qCACG;;0CACI,qBAACuC,aAAO;gCAACC,IAAG;gCAAKC,IAAG;;0CACpB,qBAACC,UAAI;gCAACC,MAAK;gCAAKC,GAAE;0CACb,OAAO9D,WAAW,aAAaA,OAAOkB,uBAAuBlB;;;;;;;;AAO1F"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/Skeleton/Skeleton.ts"],"names":[],"mappings":"AAIA,OAAO,EAAC,QAAQ,EAAE,KAAK,eAAe,EAAE,KAAK,aAAa,EAAC,MAAM,eAAe,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Skeleton/Skeleton.ts"],"sourcesContent":["import {Skeleton} from '@mantine/core';\n\nSkeleton.displayName = 'Skeleton';\n\nexport {Skeleton, type SkeletonFactory, type SkeletonProps} from '@mantine/core';\n"],"names":["Skeleton","displayName"],"mappings":"AAAA,SAAQA,QAAQ,QAAO,gBAAgB;AAEvCA,SAASC,WAAW,GAAG;AAEvB,SAAQD,QAAQ,QAAiD,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableActionsColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAK5D,OAAO,
|
|
1
|
+
{"version":3,"file":"TableActionsColumn.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAc,SAAS,EAAC,MAAM,sBAAsB,CAAC;AAK5D,OAAO,EAAuB,2BAA2B,EAAC,MAAM,mDAAmD,CAAC;AAEpH,MAAM,WAAW,sBAAsB;IACnC;;;;;;;;;;OAUG;IACH,eAAe,CAAC,EAAE,OAAO,GAAG,2BAA2B,CAAC;CAC3D;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAAS,CAAC,OAAO,CAiBjD,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { MoreSize16Px } from '@coveord/plasma-react-icons';
|
|
|
3
3
|
import { useProps } from '@mantine/core';
|
|
4
4
|
import { TableActionsList } from '../table-actions/TableActionsList.js';
|
|
5
5
|
import { useTableContext } from '../TableContext.js';
|
|
6
|
-
import {
|
|
6
|
+
import { TableColumnsSelector } from '../table-columns-selector/TableColumnsSelector.js';
|
|
7
7
|
/**
|
|
8
8
|
* Generic column to use when your table needs actions on rows
|
|
9
9
|
*/ export const TableActionsColumn = {
|
|
@@ -19,7 +19,7 @@ import { TableColumnsSelectorHeader } from '../table-columns-selector/TableColum
|
|
|
19
19
|
return null;
|
|
20
20
|
}
|
|
21
21
|
const options = typeof rowConfigurable === 'boolean' ? {} : rowConfigurable;
|
|
22
|
-
return /*#__PURE__*/ _jsx(
|
|
22
|
+
return /*#__PURE__*/ _jsx(TableColumnsSelector, {
|
|
23
23
|
table: table,
|
|
24
24
|
options: options
|
|
25
25
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"sourcesContent":["import {MoreSize16Px} from '@coveord/plasma-react-icons';\nimport {useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent} from 'react';\nimport {TableActionsList, TableActionsListProps} from '../table-actions/TableActionsList.js';\n\nimport {useTableContext} from '../TableContext.js';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Table/table-column/TableActionsColumn.tsx"],"sourcesContent":["import {MoreSize16Px} from '@coveord/plasma-react-icons';\nimport {useProps} from '@mantine/core';\nimport {CellContext, ColumnDef} from '@tanstack/table-core';\nimport {FunctionComponent} from 'react';\nimport {TableActionsList, TableActionsListProps} from '../table-actions/TableActionsList.js';\n\nimport {useTableContext} from '../TableContext.js';\nimport {TableColumnsSelector, TableColumnsSelectorOptions} from '../table-columns-selector/TableColumnsSelector.js';\n\nexport interface TableActionsColumnMeta {\n /**\n * When set to `true` or an options object, displays a column selector button in the actions column header.\n * Allows users to show/hide columns in the table.\n *\n * @example\n * // Simple usage\n * options={{ meta: { rowConfigurable: true } }}\n *\n * // With options\n * options={{ meta: { rowConfigurable: { maxSelectableColumns: 5 } } }}\n */\n rowConfigurable?: boolean | TableColumnsSelectorOptions;\n}\n\n/**\n * Generic column to use when your table needs actions on rows\n */\nexport const TableActionsColumn: ColumnDef<unknown> = {\n id: 'actions',\n enableSorting: false,\n enableHiding: false,\n meta: {\n controlColumn: true,\n },\n header: ({table}) => {\n const rowConfigurable = (table.options.meta as TableActionsColumnMeta)?.rowConfigurable;\n if (!rowConfigurable) {\n return null;\n }\n const options = typeof rowConfigurable === 'boolean' ? {} : rowConfigurable;\n return <TableColumnsSelector table={table} options={options} />;\n },\n size: 84, // 16px padding left + 28px ActionIcon + 40px padding right\n cell: (info) => <ActionsMenu info={info} />,\n};\n\ninterface TableActionsColumnProps extends Omit<TableActionsListProps, 'actions'> {\n info: CellContext<unknown, unknown>;\n}\n\nconst defaultProps: Partial<TableActionsColumnProps> = {\n label: 'Actions',\n icon: <MoreSize16Px height={16} />,\n};\n\nconst ActionsMenu: FunctionComponent<TableActionsColumnProps> = (props) => {\n const {getRowActions} = useTableContext();\n\n const {info, ...others} = useProps('PlasmaTableActionsColumn', defaultProps, props);\n\n const actionsElements = getRowActions([info.row.original]);\n return <TableActionsList actions={actionsElements} variant=\"combined\" {...others} />;\n};\n"],"names":["MoreSize16Px","useProps","TableActionsList","useTableContext","TableColumnsSelector","TableActionsColumn","id","enableSorting","enableHiding","meta","controlColumn","header","table","rowConfigurable","options","size","cell","info","ActionsMenu","defaultProps","label","icon","height","props","getRowActions","others","actionsElements","row","original","actions","variant"],"mappings":";AAAA,SAAQA,YAAY,QAAO,8BAA8B;AACzD,SAAQC,QAAQ,QAAO,gBAAgB;AAGvC,SAAQC,gBAAgB,QAA8B,uCAAuC;AAE7F,SAAQC,eAAe,QAAO,qBAAqB;AACnD,SAAQC,oBAAoB,QAAoC,oDAAoD;AAiBpH;;CAEC,GACD,OAAO,MAAMC,qBAAyC;IAClDC,IAAI;IACJC,eAAe;IACfC,cAAc;IACdC,MAAM;QACFC,eAAe;IACnB;IACAC,QAAQ,CAAC,EAACC,KAAK,EAAC;QACZ,MAAMC,kBAAmBD,MAAME,OAAO,CAACL,IAAI,EAA6BI;QACxE,IAAI,CAACA,iBAAiB;YAClB,OAAO;QACX;QACA,MAAMC,UAAU,OAAOD,oBAAoB,YAAY,CAAC,IAAIA;QAC5D,qBAAO,KAACT;YAAqBQ,OAAOA;YAAOE,SAASA;;IACxD;IACAC,MAAM;IACNC,MAAM,CAACC,qBAAS,KAACC;YAAYD,MAAMA;;AACvC,EAAE;AAMF,MAAME,eAAiD;IACnDC,OAAO;IACPC,oBAAM,KAACrB;QAAasB,QAAQ;;AAChC;AAEA,MAAMJ,cAA0D,CAACK;IAC7D,MAAM,EAACC,aAAa,EAAC,GAAGrB;IAExB,MAAM,EAACc,IAAI,EAAE,GAAGQ,QAAO,GAAGxB,SAAS,4BAA4BkB,cAAcI;IAE7E,MAAMG,kBAAkBF,cAAc;QAACP,KAAKU,GAAG,CAACC,QAAQ;KAAC;IACzD,qBAAO,KAAC1B;QAAiB2B,SAASH;QAAiBI,SAAQ;QAAY,GAAGL,MAAM;;AACpF"}
|
|
@@ -23,9 +23,9 @@ export interface TableColumnsSelectorOptions {
|
|
|
23
23
|
*/
|
|
24
24
|
alwaysVisibleTooltip?: string;
|
|
25
25
|
}
|
|
26
|
-
export interface
|
|
26
|
+
export interface TableColumnsSelectorProps {
|
|
27
27
|
table: Table<unknown>;
|
|
28
28
|
options?: TableColumnsSelectorOptions;
|
|
29
29
|
}
|
|
30
|
-
export declare const
|
|
30
|
+
export declare const TableColumnsSelector: ({ table, options }: TableColumnsSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
31
|
//# sourceMappingURL=TableColumnsSelector.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TableColumnsSelector.d.ts","sourceRoot":"","sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqB,KAAK,EAAC,MAAM,uBAAuB,CAAC;AAGhE,MAAM,WAAW,2BAA2B;IACxC;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,CAAC,CAAC,oBAAoB,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;IAC7D;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;CACjC;AAED,MAAM,WAAW,yBAAyB;IACtC,KAAK,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IACtB,OAAO,CAAC,EAAE,2BAA2B,CAAC;CACzC;AAUD,eAAO,MAAM,oBAAoB,GAAI,oBAAkB,yBAAyB,4CAgF/E,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { IconSettings } from '@coveord/plasma-react-icons';
|
|
3
3
|
import { Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip } from '@mantine/core';
|
|
4
|
-
import { useDisclosure } from '@mantine/hooks';
|
|
5
4
|
import { flexRender } from '@tanstack/react-table';
|
|
6
5
|
import { ActionIcon } from '../../ActionIcon/ActionIcon';
|
|
7
6
|
const DEFAULT_OPTIONS = {
|
|
@@ -9,12 +8,11 @@ const DEFAULT_OPTIONS = {
|
|
|
9
8
|
limitReachedTooltip: 'You have reached the maximum display limit.',
|
|
10
9
|
alwaysVisibleTooltip: 'This column is always visible.'
|
|
11
10
|
};
|
|
12
|
-
export const
|
|
11
|
+
export const TableColumnsSelector = ({ table, options })=>{
|
|
13
12
|
const { maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip } = {
|
|
14
13
|
...DEFAULT_OPTIONS,
|
|
15
14
|
...options
|
|
16
15
|
};
|
|
17
|
-
const [opened, { toggle, close }] = useDisclosure(false);
|
|
18
16
|
const allColumns = table.getAllLeafColumns();
|
|
19
17
|
const filteredColumns = allColumns.filter((column)=>!column.columnDef.meta?.controlColumn);
|
|
20
18
|
const selectedColumnsCount = filteredColumns.filter((column)=>column.getIsVisible()).length;
|
|
@@ -57,17 +55,17 @@ export const TableColumnsSelectorHeader = ({ table, options })=>{
|
|
|
57
55
|
}, column.id);
|
|
58
56
|
});
|
|
59
57
|
return /*#__PURE__*/ _jsxs(Popover, {
|
|
60
|
-
opened: opened,
|
|
61
|
-
onClose: close,
|
|
62
58
|
position: "bottom-end",
|
|
63
59
|
shadow: "md",
|
|
64
60
|
children: [
|
|
65
61
|
/*#__PURE__*/ _jsx(Popover.Target, {
|
|
66
|
-
children: /*#__PURE__*/ _jsx(
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
62
|
+
children: /*#__PURE__*/ _jsx(Tooltip, {
|
|
63
|
+
label: "Edit columns",
|
|
64
|
+
children: /*#__PURE__*/ _jsx(ActionIcon.Tertiary, {
|
|
65
|
+
"aria-label": "settings",
|
|
66
|
+
children: /*#__PURE__*/ _jsx(IconSettings, {
|
|
67
|
+
height: 16
|
|
68
|
+
})
|
|
71
69
|
})
|
|
72
70
|
})
|
|
73
71
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/Table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {IconSettings} from '@coveord/plasma-react-icons';\nimport {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';\nimport {flexRender, Header, Table} from '@tanstack/react-table';\nimport {ActionIcon} from '../../ActionIcon/ActionIcon';\n\nexport interface TableColumnsSelectorOptions {\n /**\n * The maximum number of columns that can be selected at the same time.\n * If defined a footer will render with the remaining number of columns that can be selected.\n * Must be a positive integer (greater than 0).\n */\n maxSelectableColumns?: number;\n /**\n * The content to display in the footer when maxSelectableColumns is defined.\n * Can be a string or a function that receives the maxSelectableColumns value.\n * @default (max) => `You can display up to ${max} columns.`\n */\n footer?: string | ((maxSelectableColumns: number) => string);\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because of the limit.\n * @default 'You have reached the maximum display limit.'\n */\n limitReachedTooltip?: string;\n /**\n * The tooltip to display when the user hovers over a disabled checkbox because a column cannot be hidden.\n * @default 'This column is always visible.'\n */\n alwaysVisibleTooltip?: string;\n}\n\nexport interface TableColumnsSelectorProps {\n table: Table<unknown>;\n options?: TableColumnsSelectorOptions;\n}\n\nconst DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {\n footer: (maxSelectableColumns: number) => string;\n} = {\n footer: (max) => `You can display up to ${max} columns.`,\n limitReachedTooltip: 'You have reached the maximum display limit.',\n alwaysVisibleTooltip: 'This column is always visible.',\n};\n\nexport const TableColumnsSelector = ({table, options}: TableColumnsSelectorProps) => {\n const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {\n ...DEFAULT_OPTIONS,\n ...options,\n };\n\n const allColumns = table.getAllLeafColumns();\n const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);\n const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n // Validate maxSelectableColumns - must be a positive integer to be effective\n const effectiveMaxColumns =\n maxSelectableColumns !== undefined && maxSelectableColumns > 0 ? maxSelectableColumns : undefined;\n\n if (filteredColumns.length <= 0) {\n return null;\n }\n\n const getColumnState = (column: (typeof filteredColumns)[number]) => {\n const alwaysVisible = !column.getCanHide();\n const isDisabled =\n (effectiveMaxColumns !== undefined &&\n selectedColumnsCount >= effectiveMaxColumns &&\n !column.getIsVisible()) ||\n alwaysVisible;\n const isVisible = column.getIsVisible() || alwaysVisible;\n return {alwaysVisible, isDisabled, isVisible};\n };\n\n const columnOptions = filteredColumns.map((column) => {\n const {alwaysVisible, isDisabled, isVisible} = getColumnState(column);\n\n return (\n <Tooltip\n label={alwaysVisible ? alwaysVisibleTooltip : limitReachedTooltip}\n disabled={!isDisabled}\n position=\"left\"\n key={column.id}\n >\n <div>\n <Checkbox\n label={flexRender(column.columnDef.header, {\n table,\n column,\n header: {column} as Header<unknown, unknown>,\n })}\n name={column.id}\n checked={isVisible}\n disabled={isDisabled}\n onChange={column.getToggleVisibilityHandler()}\n />\n </div>\n </Tooltip>\n );\n });\n\n return (\n <Popover position=\"bottom-end\" shadow=\"md\">\n <Popover.Target>\n <Tooltip label=\"Edit columns\">\n <ActionIcon.Tertiary aria-label=\"settings\">\n <IconSettings height={16} />\n </ActionIcon.Tertiary>\n </Tooltip>\n </Popover.Target>\n <Popover.Dropdown miw={270} pb=\"xs\">\n <ScrollArea.Autosize mah={200} type=\"auto\">\n <Stack gap=\"xs\">{columnOptions}</Stack>\n </ScrollArea.Autosize>\n {effectiveMaxColumns && (\n <>\n <Divider my=\"xs\" mx=\"-sm\" />\n <Text size=\"sm\" c=\"dimmed\">\n {typeof footer === 'function' ? footer(effectiveMaxColumns) : footer}\n </Text>\n </>\n )}\n </Popover.Dropdown>\n </Popover>\n );\n};\n"],"names":["IconSettings","Checkbox","Divider","Popover","ScrollArea","Stack","Text","Tooltip","flexRender","ActionIcon","DEFAULT_OPTIONS","footer","max","limitReachedTooltip","alwaysVisibleTooltip","TableColumnsSelector","table","options","maxSelectableColumns","allColumns","getAllLeafColumns","filteredColumns","filter","column","columnDef","meta","controlColumn","selectedColumnsCount","getIsVisible","length","effectiveMaxColumns","undefined","getColumnState","alwaysVisible","getCanHide","isDisabled","isVisible","columnOptions","map","label","disabled","position","div","header","name","id","checked","onChange","getToggleVisibilityHandler","shadow","Target","Tertiary","aria-label","height","Dropdown","miw","pb","Autosize","mah","type","gap","my","mx","size","c"],"mappings":";AAAA,SAAQA,YAAY,QAAO,8BAA8B;AACzD,SAAQC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,IAAI,EAAEC,OAAO,QAAO,gBAAgB;AAC3F,SAAQC,UAAU,QAAsB,wBAAwB;AAChE,SAAQC,UAAU,QAAO,8BAA8B;AAgCvD,MAAMC,kBAEF;IACAC,QAAQ,CAACC,MAAQ,CAAC,sBAAsB,EAAEA,IAAI,SAAS,CAAC;IACxDC,qBAAqB;IACrBC,sBAAsB;AAC1B;AAEA,OAAO,MAAMC,uBAAuB,CAAC,EAACC,KAAK,EAAEC,OAAO,EAA4B;IAC5E,MAAM,EAACC,oBAAoB,EAAEP,MAAM,EAAEE,mBAAmB,EAAEC,oBAAoB,EAAC,GAAG;QAC9E,GAAGJ,eAAe;QAClB,GAAGO,OAAO;IACd;IAEA,MAAME,aAAaH,MAAMI,iBAAiB;IAC1C,MAAMC,kBAAkBF,WAAWG,MAAM,CAAC,CAACC,SAAW,CAACA,OAAOC,SAAS,CAACC,IAAI,EAAEC;IAC9E,MAAMC,uBAAuBN,gBAAgBC,MAAM,CAAC,CAACC,SAAWA,OAAOK,YAAY,IAAIC,MAAM;IAE7F,6EAA6E;IAC7E,MAAMC,sBACFZ,yBAAyBa,aAAab,uBAAuB,IAAIA,uBAAuBa;IAE5F,IAAIV,gBAAgBQ,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,MAAMG,iBAAiB,CAACT;QACpB,MAAMU,gBAAgB,CAACV,OAAOW,UAAU;QACxC,MAAMC,aACF,AAACL,wBAAwBC,aACrBJ,wBAAwBG,uBACxB,CAACP,OAAOK,YAAY,MACxBK;QACJ,MAAMG,YAAYb,OAAOK,YAAY,MAAMK;QAC3C,OAAO;YAACA;YAAeE;YAAYC;QAAS;IAChD;IAEA,MAAMC,gBAAgBhB,gBAAgBiB,GAAG,CAAC,CAACf;QACvC,MAAM,EAACU,aAAa,EAAEE,UAAU,EAAEC,SAAS,EAAC,GAAGJ,eAAeT;QAE9D,qBACI,KAAChB;YACGgC,OAAON,gBAAgBnB,uBAAuBD;YAC9C2B,UAAU,CAACL;YACXM,UAAS;sBAGT,cAAA,KAACC;0BACG,cAAA,KAACzC;oBACGsC,OAAO/B,WAAWe,OAAOC,SAAS,CAACmB,MAAM,EAAE;wBACvC3B;wBACAO;wBACAoB,QAAQ;4BAACpB;wBAAM;oBACnB;oBACAqB,MAAMrB,OAAOsB,EAAE;oBACfC,SAASV;oBACTI,UAAUL;oBACVY,UAAUxB,OAAOyB,0BAA0B;;;WAZ9CzB,OAAOsB,EAAE;IAiB1B;IAEA,qBACI,MAAC1C;QAAQsC,UAAS;QAAaQ,QAAO;;0BAClC,KAAC9C,QAAQ+C,MAAM;0BACX,cAAA,KAAC3C;oBAAQgC,OAAM;8BACX,cAAA,KAAC9B,WAAW0C,QAAQ;wBAACC,cAAW;kCAC5B,cAAA,KAACpD;4BAAaqD,QAAQ;;;;;0BAIlC,MAAClD,QAAQmD,QAAQ;gBAACC,KAAK;gBAAKC,IAAG;;kCAC3B,KAACpD,WAAWqD,QAAQ;wBAACC,KAAK;wBAAKC,MAAK;kCAChC,cAAA,KAACtD;4BAAMuD,KAAI;sCAAMvB;;;oBAEpBP,qCACG;;0CACI,KAAC5B;gCAAQ2D,IAAG;gCAAKC,IAAG;;0CACpB,KAACxD;gCAAKyD,MAAK;gCAAKC,GAAE;0CACb,OAAOrD,WAAW,aAAaA,OAAOmB,uBAAuBnB;;;;;;;;AAO1F,EAAE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coveord/plasma-mantine",
|
|
3
|
-
"version": "56.
|
|
3
|
+
"version": "56.13.0",
|
|
4
4
|
"description": "A Plasma flavoured Mantine theme",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"plasma",
|
|
@@ -81,8 +81,8 @@
|
|
|
81
81
|
"fast-deep-equal": "3.1.3",
|
|
82
82
|
"lodash.defaultsdeep": "4.6.1",
|
|
83
83
|
"monaco-editor": "0.55.1",
|
|
84
|
-
"@coveord/plasma-
|
|
85
|
-
"@coveord/plasma-
|
|
84
|
+
"@coveord/plasma-react-icons": "56.8.1",
|
|
85
|
+
"@coveord/plasma-tokens": "56.8.1"
|
|
86
86
|
},
|
|
87
87
|
"devDependencies": {
|
|
88
88
|
"@mantine/carousel": "8.3.10",
|
|
@@ -5,10 +5,7 @@ import {FunctionComponent} from 'react';
|
|
|
5
5
|
import {TableActionsList, TableActionsListProps} from '../table-actions/TableActionsList.js';
|
|
6
6
|
|
|
7
7
|
import {useTableContext} from '../TableContext.js';
|
|
8
|
-
import {
|
|
9
|
-
TableColumnsSelectorHeader,
|
|
10
|
-
TableColumnsSelectorOptions,
|
|
11
|
-
} from '../table-columns-selector/TableColumnsSelector.js';
|
|
8
|
+
import {TableColumnsSelector, TableColumnsSelectorOptions} from '../table-columns-selector/TableColumnsSelector.js';
|
|
12
9
|
|
|
13
10
|
export interface TableActionsColumnMeta {
|
|
14
11
|
/**
|
|
@@ -41,7 +38,7 @@ export const TableActionsColumn: ColumnDef<unknown> = {
|
|
|
41
38
|
return null;
|
|
42
39
|
}
|
|
43
40
|
const options = typeof rowConfigurable === 'boolean' ? {} : rowConfigurable;
|
|
44
|
-
return <
|
|
41
|
+
return <TableColumnsSelector table={table} options={options} />;
|
|
45
42
|
},
|
|
46
43
|
size: 84, // 16px padding left + 28px ActionIcon + 40px padding right
|
|
47
44
|
cell: (info) => <ActionsMenu info={info} />,
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import {IconSettings} from '@coveord/plasma-react-icons';
|
|
2
2
|
import {Checkbox, Divider, Popover, ScrollArea, Stack, Text, Tooltip} from '@mantine/core';
|
|
3
|
-
import {useDisclosure} from '@mantine/hooks';
|
|
4
3
|
import {flexRender, Header, Table} from '@tanstack/react-table';
|
|
5
4
|
import {ActionIcon} from '../../ActionIcon/ActionIcon';
|
|
6
5
|
|
|
@@ -29,7 +28,7 @@ export interface TableColumnsSelectorOptions {
|
|
|
29
28
|
alwaysVisibleTooltip?: string;
|
|
30
29
|
}
|
|
31
30
|
|
|
32
|
-
export interface
|
|
31
|
+
export interface TableColumnsSelectorProps {
|
|
33
32
|
table: Table<unknown>;
|
|
34
33
|
options?: TableColumnsSelectorOptions;
|
|
35
34
|
}
|
|
@@ -42,14 +41,12 @@ const DEFAULT_OPTIONS: Omit<TableColumnsSelectorOptions, 'footer'> & {
|
|
|
42
41
|
alwaysVisibleTooltip: 'This column is always visible.',
|
|
43
42
|
};
|
|
44
43
|
|
|
45
|
-
export const
|
|
44
|
+
export const TableColumnsSelector = ({table, options}: TableColumnsSelectorProps) => {
|
|
46
45
|
const {maxSelectableColumns, footer, limitReachedTooltip, alwaysVisibleTooltip} = {
|
|
47
46
|
...DEFAULT_OPTIONS,
|
|
48
47
|
...options,
|
|
49
48
|
};
|
|
50
49
|
|
|
51
|
-
const [opened, {toggle, close}] = useDisclosure(false);
|
|
52
|
-
|
|
53
50
|
const allColumns = table.getAllLeafColumns();
|
|
54
51
|
const filteredColumns = allColumns.filter((column) => !column.columnDef.meta?.controlColumn);
|
|
55
52
|
const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;
|
|
@@ -101,11 +98,13 @@ export const TableColumnsSelectorHeader = ({table, options}: TableColumnsSelecto
|
|
|
101
98
|
});
|
|
102
99
|
|
|
103
100
|
return (
|
|
104
|
-
<Popover
|
|
101
|
+
<Popover position="bottom-end" shadow="md">
|
|
105
102
|
<Popover.Target>
|
|
106
|
-
<
|
|
107
|
-
<
|
|
108
|
-
|
|
103
|
+
<Tooltip label="Edit columns">
|
|
104
|
+
<ActionIcon.Tertiary aria-label="settings">
|
|
105
|
+
<IconSettings height={16} />
|
|
106
|
+
</ActionIcon.Tertiary>
|
|
107
|
+
</Tooltip>
|
|
109
108
|
</Popover.Target>
|
|
110
109
|
<Popover.Dropdown miw={270} pb="xs">
|
|
111
110
|
<ScrollArea.Autosize mah={200} type="auto">
|