@xyo-network/react-table 7.5.7 → 7.5.11
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/dist/browser/components/TableEx/TableCellEx.d.ts +2 -1
- package/dist/browser/components/TableEx/TableCellEx.d.ts.map +1 -1
- package/dist/browser/index.mjs +31 -48
- package/dist/browser/index.mjs.map +1 -1
- package/package.json +48 -30
- package/src/components/TableEx/TableCellEx.tsx +0 -10
- package/src/components/TableEx/TableEx.stories.tsx +0 -93
- package/src/components/TableEx/TableEx.tsx +0 -34
- package/src/components/TableEx/TableFooterEx.tsx +0 -26
- package/src/components/TableEx/index.ts +0 -4
- package/src/components/TableEx/types/TableExVariants.ts +0 -1
- package/src/components/TableEx/types/index.ts +0 -1
- package/src/components/index.ts +0 -1
- package/src/context/TableHeight/Context.ts +0 -5
- package/src/context/TableHeight/Provider.tsx +0 -42
- package/src/context/TableHeight/State.ts +0 -10
- package/src/context/TableHeight/index.ts +0 -4
- package/src/context/TableHeight/use.ts +0 -5
- package/src/context/index.ts +0 -1
- package/src/global.d.ts +0 -1
- package/src/index.ts +0 -3
- package/src/types/TableHead.ts +0 -11
- package/src/types/index.ts +0 -1
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { TableCellProps } from '@mui/material';
|
|
2
|
+
import type React from 'react';
|
|
2
3
|
export interface TableCellExProps extends TableCellProps {
|
|
3
4
|
noBgColor?: boolean;
|
|
4
5
|
}
|
|
5
|
-
export declare const TableCellEx:
|
|
6
|
+
export declare const TableCellEx: React.FC<TableCellExProps>;
|
|
6
7
|
//# sourceMappingURL=TableCellEx.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TableCellEx.d.ts","sourceRoot":"","sources":["../../../../src/components/TableEx/TableCellEx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;
|
|
1
|
+
{"version":3,"file":"TableCellEx.d.ts","sourceRoot":"","sources":["../../../../src/components/TableEx/TableCellEx.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAEnD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,MAAM,WAAW,gBAAiB,SAAQ,cAAc;IACtD,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB;AAED,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAElD,CAAA"}
|
package/dist/browser/index.mjs
CHANGED
|
@@ -1,39 +1,32 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
|
|
3
|
-
|
|
4
1
|
// src/components/TableEx/TableCellEx.tsx
|
|
5
2
|
import { styled, TableCell } from "@mui/material";
|
|
6
|
-
var TableCellEx = styled(TableCell, {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
})(({ noBgColor = true }) => ({
|
|
10
|
-
...noBgColor && {
|
|
11
|
-
backgroundColor: "transparent"
|
|
12
|
-
}
|
|
13
|
-
}));
|
|
3
|
+
var TableCellEx = styled(TableCell, { name: "TableCellNoBgColor", shouldForwardProp: (prop) => prop !== "noBgColor" })(
|
|
4
|
+
({ noBgColor = true }) => ({ ...noBgColor && { backgroundColor: "transparent" } })
|
|
5
|
+
);
|
|
14
6
|
|
|
15
7
|
// src/components/TableEx/TableEx.tsx
|
|
16
8
|
import { Table } from "@mui/material";
|
|
17
|
-
import
|
|
18
|
-
var TableExInner =
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
-
}
|
|
9
|
+
import { jsx } from "react/jsx-runtime";
|
|
10
|
+
var TableExInner = ({ children, ...props }) => {
|
|
11
|
+
return /* @__PURE__ */ jsx(Table, { ...props, children });
|
|
12
|
+
};
|
|
21
13
|
TableExInner.displayName = "TableExInner";
|
|
22
|
-
var TableExWithRef =
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
14
|
+
var TableExWithRef = ({
|
|
15
|
+
variant,
|
|
16
|
+
children,
|
|
17
|
+
...props
|
|
18
|
+
}) => {
|
|
19
|
+
return /* @__PURE__ */ jsx(TableExInner, { stickyHeader: variant === "scrollable", ...props, children });
|
|
20
|
+
};
|
|
28
21
|
TableExWithRef.displayName = "TableEx";
|
|
29
22
|
var TableEx = TableExWithRef;
|
|
30
23
|
|
|
31
24
|
// src/components/TableEx/TableFooterEx.tsx
|
|
32
25
|
import { styled as styled2, TableFooter } from "@mui/material";
|
|
33
|
-
import
|
|
26
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
34
27
|
var TableFooterExRoot = styled2(TableFooter, {
|
|
35
28
|
name: "TableFooterEx",
|
|
36
|
-
shouldForwardProp:
|
|
29
|
+
shouldForwardProp: (propName) => propName !== "scrollable",
|
|
37
30
|
slot: "Root"
|
|
38
31
|
})(({ variant, theme }) => ({
|
|
39
32
|
backgroundColor: theme.vars.palette.background.default,
|
|
@@ -44,7 +37,7 @@ var TableFooterExRoot = styled2(TableFooter, {
|
|
|
44
37
|
position: "sticky"
|
|
45
38
|
}
|
|
46
39
|
}));
|
|
47
|
-
var TableFooterEx =
|
|
40
|
+
var TableFooterEx = ({ children, ...props }) => /* @__PURE__ */ jsx2(TableFooterExRoot, { ...props, children });
|
|
48
41
|
|
|
49
42
|
// src/context/TableHeight/Context.ts
|
|
50
43
|
import { createContextEx } from "@xylabs/react-shared";
|
|
@@ -52,24 +45,22 @@ var TableHeightContext = createContextEx();
|
|
|
52
45
|
|
|
53
46
|
// src/context/TableHeight/Provider.tsx
|
|
54
47
|
import { useResetState } from "@xylabs/react-hooks";
|
|
55
|
-
import
|
|
56
|
-
|
|
48
|
+
import { useMemo, useState } from "react";
|
|
49
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
50
|
+
var TableHeightProvider = ({
|
|
51
|
+
children,
|
|
52
|
+
additionalRows = 0,
|
|
53
|
+
defaultVisibleRows,
|
|
54
|
+
heightFormat = "px"
|
|
55
|
+
}) => {
|
|
57
56
|
const [visibleRows, setVisibleRows] = useResetState(defaultVisibleRows);
|
|
58
57
|
const [rowHeight, setRowHeight] = useState();
|
|
59
58
|
const height = useMemo(() => {
|
|
60
59
|
if (rowHeight !== void 0 && visibleRows !== void 0) {
|
|
61
60
|
return rowHeight * (visibleRows + additionalRows);
|
|
62
61
|
}
|
|
63
|
-
}, [
|
|
64
|
-
|
|
65
|
-
rowHeight,
|
|
66
|
-
visibleRows,
|
|
67
|
-
additionalRows
|
|
68
|
-
]);
|
|
69
|
-
const formattedHeight = useMemo(() => height === void 0 ? void 0 : `${height}${heightFormat}`, [
|
|
70
|
-
height,
|
|
71
|
-
heightFormat
|
|
72
|
-
]);
|
|
62
|
+
}, [rowHeight, visibleRows, additionalRows]);
|
|
63
|
+
const formattedHeight = useMemo(() => height === void 0 ? void 0 : `${height}${heightFormat}`, [height, heightFormat]);
|
|
73
64
|
const value = useMemo(() => ({
|
|
74
65
|
height: formattedHeight,
|
|
75
66
|
provided: true,
|
|
@@ -77,21 +68,13 @@ var TableHeightProvider = /* @__PURE__ */ __name(({ children, additionalRows = 0
|
|
|
77
68
|
setRowHeight,
|
|
78
69
|
setVisibleRows,
|
|
79
70
|
visibleRows
|
|
80
|
-
}), [
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
setRowHeight,
|
|
84
|
-
setVisibleRows,
|
|
85
|
-
visibleRows
|
|
86
|
-
]);
|
|
87
|
-
return /* @__PURE__ */ React3.createElement(TableHeightContext, {
|
|
88
|
-
value
|
|
89
|
-
}, children);
|
|
90
|
-
}, "TableHeightProvider");
|
|
71
|
+
}), [formattedHeight, rowHeight, setRowHeight, setVisibleRows, visibleRows]);
|
|
72
|
+
return /* @__PURE__ */ jsx3(TableHeightContext, { value, children });
|
|
73
|
+
};
|
|
91
74
|
|
|
92
75
|
// src/context/TableHeight/use.ts
|
|
93
76
|
import { useContextEx } from "@xylabs/react-shared";
|
|
94
|
-
var useTableHeight =
|
|
77
|
+
var useTableHeight = (required = false) => useContextEx(TableHeightContext, "TableHeight", required);
|
|
95
78
|
export {
|
|
96
79
|
TableCellEx,
|
|
97
80
|
TableEx,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/components/TableEx/TableCellEx.tsx","../../src/components/TableEx/TableEx.tsx","../../src/components/TableEx/TableFooterEx.tsx","../../src/context/TableHeight/Context.ts","../../src/context/TableHeight/Provider.tsx","../../src/context/TableHeight/use.ts"],"sourcesContent":["import type { TableCellProps } from '@mui/material'\nimport { styled, TableCell } from '@mui/material'\n\nexport interface TableCellExProps extends TableCellProps {\n noBgColor?: boolean\n}\n\nexport const TableCellEx = styled(TableCell, { name: 'TableCellNoBgColor', shouldForwardProp: prop => prop !== 'noBgColor' })<TableCellExProps>(\n ({ noBgColor = true }) => ({ ...(noBgColor && { backgroundColor: 'transparent' }) }),\n)\n","import type { TableProps } from '@mui/material'\nimport { Table } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nexport interface TableExProps extends PropsWithChildren, TableProps {\n variant?: TableExVariants\n}\n\nconst TableExInner: React.FC<TableExProps> = ({ children, ...props }) => {\n return (\n <Table {...props}>\n {children}\n </Table>\n )\n}\n\nTableExInner.displayName = 'TableExInner'\n\nexport const TableExWithRef: React.FC<TableExProps> = ({\n variant, children, ...props\n}) => {\n return (\n <TableExInner stickyHeader={variant === 'scrollable'} {...props}>\n {children}\n </TableExInner>\n )\n}\n\nTableExWithRef.displayName = 'TableEx'\n\nexport const TableEx = TableExWithRef\n","import type { TableFooterProps } from '@mui/material'\nimport { styled, TableFooter } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nconst TableFooterExRoot = styled(TableFooter, {\n name: 'TableFooterEx',\n shouldForwardProp: propName => propName !== 'scrollable',\n slot: 'Root',\n})<TableFooterExProps>(({ variant, theme }) => ({\n backgroundColor: theme.vars.palette.background.default,\n bottom: 'unset',\n position: 'relative',\n ...(variant === 'scrollable' && {\n bottom: 0,\n position: 'sticky',\n }),\n}))\n\nexport interface TableFooterExProps extends PropsWithChildren, TableFooterProps {\n variant?: TableExVariants\n}\n\nexport const TableFooterEx: React.FC<TableFooterExProps> = ({ children, ...props }) => <TableFooterExRoot {...props}>{children}</TableFooterExRoot>\n","import { createContextEx } from '@xylabs/react-shared'\n\nimport type { TableHeightState } from './State.ts'\n\nexport const TableHeightContext = createContextEx<TableHeightState>()\n","import { useResetState } from '@xylabs/react-hooks'\nimport type { ContextExProviderProps } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport { TableHeightContext } from './Context.ts'\nimport type { TableHeightState } from './State.ts'\n\nexport interface TableHeightProviderProps extends ContextExProviderProps, PropsWithChildren {\n /** @field Account for optional header and footer rows */\n additionalRows?: number\n defaultVisibleRows?: number\n heightFormat?: string\n}\n\nexport const TableHeightProvider: React.FC<TableHeightProviderProps> = ({\n children,\n additionalRows = 0,\n defaultVisibleRows,\n heightFormat = 'px',\n}) => {\n const [visibleRows, setVisibleRows] = useResetState(defaultVisibleRows)\n const [rowHeight, setRowHeight] = useState<number | undefined>()\n\n const height = useMemo(() => {\n if (rowHeight !== undefined && visibleRows !== undefined) {\n return rowHeight * (visibleRows + additionalRows)\n }\n }, [
|
|
1
|
+
{"version":3,"sources":["../../src/components/TableEx/TableCellEx.tsx","../../src/components/TableEx/TableEx.tsx","../../src/components/TableEx/TableFooterEx.tsx","../../src/context/TableHeight/Context.ts","../../src/context/TableHeight/Provider.tsx","../../src/context/TableHeight/use.ts"],"sourcesContent":["import type { TableCellProps } from '@mui/material'\nimport { styled, TableCell } from '@mui/material'\nimport type React from 'react'\n\nexport interface TableCellExProps extends TableCellProps {\n noBgColor?: boolean\n}\n\nexport const TableCellEx: React.FC<TableCellExProps> = styled(TableCell, { name: 'TableCellNoBgColor', shouldForwardProp: prop => prop !== 'noBgColor' })<TableCellExProps>(\n ({ noBgColor = true }) => ({ ...(noBgColor && { backgroundColor: 'transparent' }) }),\n)\n","import type { TableProps } from '@mui/material'\nimport { Table } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nexport interface TableExProps extends PropsWithChildren, TableProps {\n variant?: TableExVariants\n}\n\nconst TableExInner: React.FC<TableExProps> = ({ children, ...props }) => {\n return (\n <Table {...props}>\n {children}\n </Table>\n )\n}\n\nTableExInner.displayName = 'TableExInner'\n\nexport const TableExWithRef: React.FC<TableExProps> = ({\n variant, children, ...props\n}) => {\n return (\n <TableExInner stickyHeader={variant === 'scrollable'} {...props}>\n {children}\n </TableExInner>\n )\n}\n\nTableExWithRef.displayName = 'TableEx'\n\nexport const TableEx = TableExWithRef\n","import type { TableFooterProps } from '@mui/material'\nimport { styled, TableFooter } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport React from 'react'\n\nimport type { TableExVariants } from './types/index.ts'\n\nconst TableFooterExRoot = styled(TableFooter, {\n name: 'TableFooterEx',\n shouldForwardProp: propName => propName !== 'scrollable',\n slot: 'Root',\n})<TableFooterExProps>(({ variant, theme }) => ({\n backgroundColor: theme.vars.palette.background.default,\n bottom: 'unset',\n position: 'relative',\n ...(variant === 'scrollable' && {\n bottom: 0,\n position: 'sticky',\n }),\n}))\n\nexport interface TableFooterExProps extends PropsWithChildren, TableFooterProps {\n variant?: TableExVariants\n}\n\nexport const TableFooterEx: React.FC<TableFooterExProps> = ({ children, ...props }) => <TableFooterExRoot {...props}>{children}</TableFooterExRoot>\n","import { createContextEx } from '@xylabs/react-shared'\n\nimport type { TableHeightState } from './State.ts'\n\nexport const TableHeightContext = createContextEx<TableHeightState>()\n","import { useResetState } from '@xylabs/react-hooks'\nimport type { ContextExProviderProps } from '@xylabs/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport { TableHeightContext } from './Context.ts'\nimport type { TableHeightState } from './State.ts'\n\nexport interface TableHeightProviderProps extends ContextExProviderProps, PropsWithChildren {\n /** @field Account for optional header and footer rows */\n additionalRows?: number\n defaultVisibleRows?: number\n heightFormat?: string\n}\n\nexport const TableHeightProvider: React.FC<TableHeightProviderProps> = ({\n children,\n additionalRows = 0,\n defaultVisibleRows,\n heightFormat = 'px',\n}) => {\n const [visibleRows, setVisibleRows] = useResetState(defaultVisibleRows)\n const [rowHeight, setRowHeight] = useState<number | undefined>()\n\n const height = useMemo(() => {\n if (rowHeight !== undefined && visibleRows !== undefined) {\n return rowHeight * (visibleRows + additionalRows)\n }\n }, [rowHeight, visibleRows, additionalRows])\n\n const formattedHeight = useMemo(() => (height === undefined ? undefined : `${height}${heightFormat}`), [height, heightFormat])\n\n const value: TableHeightState = useMemo(() => ({\n height: formattedHeight, provided: true as const, rowHeight, setRowHeight, setVisibleRows, visibleRows,\n }), [formattedHeight, rowHeight, setRowHeight, setVisibleRows, visibleRows])\n\n return (\n <TableHeightContext value={value}>\n {children}\n </TableHeightContext>\n )\n}\n","import { useContextEx } from '@xylabs/react-shared'\n\nimport { TableHeightContext } from './Context.ts'\n\nexport const useTableHeight = (required = false) => useContextEx(TableHeightContext, 'TableHeight', required)\n"],"mappings":";AACA,SAAS,QAAQ,iBAAiB;AAO3B,IAAM,cAA0C,OAAO,WAAW,EAAE,MAAM,sBAAsB,mBAAmB,UAAQ,SAAS,YAAY,CAAC;AAAA,EACtJ,CAAC,EAAE,YAAY,KAAK,OAAO,EAAE,GAAI,aAAa,EAAE,iBAAiB,cAAc,EAAG;AACpF;;;ACTA,SAAS,aAAa;AAYlB;AAFJ,IAAM,eAAuC,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM;AACvE,SACE,oBAAC,SAAO,GAAG,OACR,UACH;AAEJ;AAEA,aAAa,cAAc;AAEpB,IAAM,iBAAyC,CAAC;AAAA,EACrD;AAAA,EAAS;AAAA,EAAU,GAAG;AACxB,MAAM;AACJ,SACE,oBAAC,gBAAa,cAAc,YAAY,cAAe,GAAG,OACvD,UACH;AAEJ;AAEA,eAAe,cAAc;AAEtB,IAAM,UAAU;;;AChCvB,SAAS,UAAAA,SAAQ,mBAAmB;AAwBmD,gBAAAC,YAAA;AAlBvF,IAAM,oBAAoBD,QAAO,aAAa;AAAA,EAC5C,MAAM;AAAA,EACN,mBAAmB,cAAY,aAAa;AAAA,EAC5C,MAAM;AACR,CAAC,EAAsB,CAAC,EAAE,SAAS,MAAM,OAAO;AAAA,EAC9C,iBAAiB,MAAM,KAAK,QAAQ,WAAW;AAAA,EAC/C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,GAAI,YAAY,gBAAgB;AAAA,IAC9B,QAAQ;AAAA,IACR,UAAU;AAAA,EACZ;AACF,EAAE;AAMK,IAAM,gBAA8C,CAAC,EAAE,UAAU,GAAG,MAAM,MAAM,gBAAAC,KAAC,qBAAmB,GAAG,OAAQ,UAAS;;;ACzB/H,SAAS,uBAAuB;AAIzB,IAAM,qBAAqB,gBAAkC;;;ACJpE,SAAS,qBAAqB;AAG9B,SAAgB,SAAS,gBAAgB;AAkCrC,gBAAAC,YAAA;AAtBG,IAAM,sBAA0D,CAAC;AAAA,EACtE;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,eAAe;AACjB,MAAM;AACJ,QAAM,CAAC,aAAa,cAAc,IAAI,cAAc,kBAAkB;AACtE,QAAM,CAAC,WAAW,YAAY,IAAI,SAA6B;AAE/D,QAAM,SAAS,QAAQ,MAAM;AAC3B,QAAI,cAAc,UAAa,gBAAgB,QAAW;AACxD,aAAO,aAAa,cAAc;AAAA,IACpC;AAAA,EACF,GAAG,CAAC,WAAW,aAAa,cAAc,CAAC;AAE3C,QAAM,kBAAkB,QAAQ,MAAO,WAAW,SAAY,SAAY,GAAG,MAAM,GAAG,YAAY,IAAK,CAAC,QAAQ,YAAY,CAAC;AAE7H,QAAM,QAA0B,QAAQ,OAAO;AAAA,IAC7C,QAAQ;AAAA,IAAiB,UAAU;AAAA,IAAe;AAAA,IAAW;AAAA,IAAc;AAAA,IAAgB;AAAA,EAC7F,IAAI,CAAC,iBAAiB,WAAW,cAAc,gBAAgB,WAAW,CAAC;AAE3E,SACE,gBAAAA,KAAC,sBAAmB,OACjB,UACH;AAEJ;;;ACzCA,SAAS,oBAAoB;AAItB,IAAM,iBAAiB,CAAC,WAAW,UAAU,aAAa,oBAAoB,eAAe,QAAQ;","names":["styled","jsx","jsx"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xyo-network/react-table",
|
|
3
|
-
"version": "7.5.
|
|
3
|
+
"version": "7.5.11",
|
|
4
4
|
"description": "Common React library for all XYO projects that use React",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"xyo",
|
|
@@ -36,45 +36,63 @@
|
|
|
36
36
|
},
|
|
37
37
|
"./package.json": "./package.json"
|
|
38
38
|
},
|
|
39
|
-
"module": "dist/browser/index.mjs",
|
|
40
|
-
"types": "dist/browser/index.d.ts",
|
|
41
39
|
"files": [
|
|
42
40
|
"dist",
|
|
43
|
-
"
|
|
41
|
+
"README.md"
|
|
44
42
|
],
|
|
45
|
-
"dependencies": {
|
|
46
|
-
"@xylabs/react-hooks": "~7.1.17",
|
|
47
|
-
"@xylabs/react-shared": "~7.1.17"
|
|
48
|
-
},
|
|
49
43
|
"devDependencies": {
|
|
50
|
-
"@mui/
|
|
51
|
-
"@
|
|
52
|
-
"@
|
|
44
|
+
"@mui/material": "^7.3.10",
|
|
45
|
+
"@opentelemetry/api": "^1.9.1",
|
|
46
|
+
"@opentelemetry/sdk-trace-base": "^2.7.0",
|
|
47
|
+
"@storybook/react-vite": "~10.3.5",
|
|
48
|
+
"@types/node": "~25.6.0",
|
|
53
49
|
"@types/react": "^19.2.14",
|
|
54
|
-
"@xylabs/
|
|
55
|
-
"@xylabs/
|
|
56
|
-
"@xylabs/
|
|
57
|
-
"@xylabs/
|
|
58
|
-
"@xylabs/
|
|
59
|
-
"@
|
|
60
|
-
"
|
|
61
|
-
"
|
|
62
|
-
"react
|
|
63
|
-
"
|
|
50
|
+
"@xylabs/react-async-effect": "~7.1.20",
|
|
51
|
+
"@xylabs/react-hooks": "~7.1.20",
|
|
52
|
+
"@xylabs/react-promise": "~7.1.20",
|
|
53
|
+
"@xylabs/react-shared": "~7.1.20",
|
|
54
|
+
"@xylabs/sdk-js": "^5.0.100",
|
|
55
|
+
"@xylabs/toolchain": "~7.11.9",
|
|
56
|
+
"@xylabs/tsconfig": "^7.11.9",
|
|
57
|
+
"@xylabs/tsconfig-dom": "^7.11.9",
|
|
58
|
+
"@xylabs/tsconfig-react": "~7.11.9",
|
|
59
|
+
"@xyo-network/boundwitness-model": "^5.5.1",
|
|
60
|
+
"@xyo-network/payload-model": "^5.5.1",
|
|
61
|
+
"async-mutex": "^0.5.0",
|
|
62
|
+
"axios": "^1.15.2",
|
|
63
|
+
"bn.js": "^5.2.3",
|
|
64
|
+
"buffer": "^6.0.3",
|
|
65
|
+
"chalk": "^5.6.2",
|
|
66
|
+
"esbuild": "~0.28.0",
|
|
67
|
+
"eslint": "^10.2.1",
|
|
68
|
+
"ethers": "^6.16.0",
|
|
69
|
+
"pako": "^2.1.0",
|
|
70
|
+
"react": "^19.2.5",
|
|
71
|
+
"react-dom": "^19.2.5",
|
|
72
|
+
"storybook": "^10.3.5",
|
|
64
73
|
"typescript": "^5.9.3",
|
|
65
|
-
"vite": "
|
|
66
|
-
"zod": "^4.3.6"
|
|
74
|
+
"vite": "^8.0.10",
|
|
75
|
+
"zod": "^4.3.6",
|
|
76
|
+
"@xyo-network/react-storybook": "~7.5.11"
|
|
67
77
|
},
|
|
68
78
|
"peerDependencies": {
|
|
69
|
-
"@mui/
|
|
70
|
-
"@
|
|
71
|
-
"react": "
|
|
72
|
-
"react-
|
|
73
|
-
"react-
|
|
74
|
-
"
|
|
79
|
+
"@mui/material": "^7.3.10",
|
|
80
|
+
"@opentelemetry/sdk-trace-base": "^2.7.0",
|
|
81
|
+
"@xylabs/react-async-effect": "~7.1.20",
|
|
82
|
+
"@xylabs/react-hooks": "~7.1.20",
|
|
83
|
+
"@xylabs/react-shared": "~7.1.20",
|
|
84
|
+
"async-mutex": "^0.5.0",
|
|
85
|
+
"bn.js": "^5.2.3",
|
|
86
|
+
"buffer": "^6.0.3",
|
|
87
|
+
"chalk": "^5.6.2",
|
|
88
|
+
"ethers": "^6.16.0",
|
|
89
|
+
"pako": "^2.1.0",
|
|
90
|
+
"react": "^19.2.5",
|
|
91
|
+
"react-dom": "^19.2.5",
|
|
92
|
+
"zod": "^4.3.6"
|
|
75
93
|
},
|
|
76
94
|
"publishConfig": {
|
|
77
95
|
"access": "public"
|
|
78
96
|
},
|
|
79
97
|
"docs": "dist/docs.json"
|
|
80
|
-
}
|
|
98
|
+
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { TableCellProps } from '@mui/material'
|
|
2
|
-
import { styled, TableCell } from '@mui/material'
|
|
3
|
-
|
|
4
|
-
export interface TableCellExProps extends TableCellProps {
|
|
5
|
-
noBgColor?: boolean
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export const TableCellEx = styled(TableCell, { name: 'TableCellNoBgColor', shouldForwardProp: prop => prop !== 'noBgColor' })<TableCellExProps>(
|
|
9
|
-
({ noBgColor = true }) => ({ ...(noBgColor && { backgroundColor: 'transparent' }) }),
|
|
10
|
-
)
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
TableBody, TableCell, TableHead, TablePagination, TableRow, useTheme,
|
|
3
|
-
} from '@mui/material'
|
|
4
|
-
import type {
|
|
5
|
-
Decorator, Meta, StoryFn,
|
|
6
|
-
} from '@storybook/react-vite'
|
|
7
|
-
import { WithRefDecorator } from '@xyo-network/react-storybook'
|
|
8
|
-
import React from 'react'
|
|
9
|
-
|
|
10
|
-
import { TableCellEx } from './TableCellEx.tsx'
|
|
11
|
-
import { TableEx } from './TableEx.tsx'
|
|
12
|
-
import { TableFooterEx } from './TableFooterEx.tsx'
|
|
13
|
-
|
|
14
|
-
const ScrollableDecorator: Decorator = (Story, args) => (
|
|
15
|
-
<div style={{
|
|
16
|
-
height: 'calc(100vh - 2rem)', inset: 0, position: 'absolute',
|
|
17
|
-
}}
|
|
18
|
-
>
|
|
19
|
-
<Story {...args} />
|
|
20
|
-
</div>
|
|
21
|
-
)
|
|
22
|
-
|
|
23
|
-
const StorybookEntry = {
|
|
24
|
-
argTypes: {},
|
|
25
|
-
component: TableEx,
|
|
26
|
-
parameters: { docs: { page: null } },
|
|
27
|
-
title: 'shared/TableEx',
|
|
28
|
-
} as Meta<typeof TableEx>
|
|
29
|
-
|
|
30
|
-
const Template: StoryFn<typeof TableEx> = (args) => {
|
|
31
|
-
const { variant } = args
|
|
32
|
-
const theme = useTheme()
|
|
33
|
-
const tableRows = [...Array(100).keys()]
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<TableEx {...args}>
|
|
37
|
-
<TableHead>
|
|
38
|
-
<TableRow>
|
|
39
|
-
<TableCellEx>Heading 1</TableCellEx>
|
|
40
|
-
<TableCellEx>Heading 2</TableCellEx>
|
|
41
|
-
</TableRow>
|
|
42
|
-
</TableHead>
|
|
43
|
-
<TableBody>
|
|
44
|
-
{tableRows.map(row => (
|
|
45
|
-
<TableRow key={row}>
|
|
46
|
-
<TableCell>
|
|
47
|
-
Row
|
|
48
|
-
{row}
|
|
49
|
-
</TableCell>
|
|
50
|
-
<TableCell>Cell 2</TableCell>
|
|
51
|
-
</TableRow>
|
|
52
|
-
))}
|
|
53
|
-
</TableBody>
|
|
54
|
-
<TableFooterEx variant={variant}>
|
|
55
|
-
<TableRow>
|
|
56
|
-
<TablePagination
|
|
57
|
-
rowsPerPageOptions={[5, 10, 25, { label: 'All', value: -1 }]}
|
|
58
|
-
count={25}
|
|
59
|
-
page={1}
|
|
60
|
-
rowsPerPage={5}
|
|
61
|
-
style={{ borderTop: '1px solid', borderTopColor: theme.vars.palette.divider }}
|
|
62
|
-
SelectProps={{
|
|
63
|
-
inputProps: { 'aria-label': 'rows per page' },
|
|
64
|
-
native: true,
|
|
65
|
-
}}
|
|
66
|
-
onPageChange={() => {
|
|
67
|
-
return
|
|
68
|
-
}}
|
|
69
|
-
onRowsPerPageChange={() => {
|
|
70
|
-
return
|
|
71
|
-
}}
|
|
72
|
-
/>
|
|
73
|
-
</TableRow>
|
|
74
|
-
</TableFooterEx>
|
|
75
|
-
</TableEx>
|
|
76
|
-
)
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
const Default = Template.bind({})
|
|
80
|
-
Default.args = {}
|
|
81
|
-
|
|
82
|
-
const WithRef = Template.bind({})
|
|
83
|
-
WithRef.decorators = [WithRefDecorator]
|
|
84
|
-
|
|
85
|
-
const WithScrollable = Template.bind({})
|
|
86
|
-
WithScrollable.args = { variant: 'scrollable' }
|
|
87
|
-
WithScrollable.decorators = [ScrollableDecorator]
|
|
88
|
-
|
|
89
|
-
export {
|
|
90
|
-
Default, WithRef, WithScrollable,
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
export default StorybookEntry
|
|
@@ -1,34 +0,0 @@
|
|
|
1
|
-
import type { TableProps } from '@mui/material'
|
|
2
|
-
import { Table } from '@mui/material'
|
|
3
|
-
import type { PropsWithChildren } from 'react'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
import type { TableExVariants } from './types/index.ts'
|
|
7
|
-
|
|
8
|
-
export interface TableExProps extends PropsWithChildren, TableProps {
|
|
9
|
-
variant?: TableExVariants
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
const TableExInner: React.FC<TableExProps> = ({ children, ...props }) => {
|
|
13
|
-
return (
|
|
14
|
-
<Table {...props}>
|
|
15
|
-
{children}
|
|
16
|
-
</Table>
|
|
17
|
-
)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
TableExInner.displayName = 'TableExInner'
|
|
21
|
-
|
|
22
|
-
export const TableExWithRef: React.FC<TableExProps> = ({
|
|
23
|
-
variant, children, ...props
|
|
24
|
-
}) => {
|
|
25
|
-
return (
|
|
26
|
-
<TableExInner stickyHeader={variant === 'scrollable'} {...props}>
|
|
27
|
-
{children}
|
|
28
|
-
</TableExInner>
|
|
29
|
-
)
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
TableExWithRef.displayName = 'TableEx'
|
|
33
|
-
|
|
34
|
-
export const TableEx = TableExWithRef
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import type { TableFooterProps } from '@mui/material'
|
|
2
|
-
import { styled, TableFooter } from '@mui/material'
|
|
3
|
-
import type { PropsWithChildren } from 'react'
|
|
4
|
-
import React from 'react'
|
|
5
|
-
|
|
6
|
-
import type { TableExVariants } from './types/index.ts'
|
|
7
|
-
|
|
8
|
-
const TableFooterExRoot = styled(TableFooter, {
|
|
9
|
-
name: 'TableFooterEx',
|
|
10
|
-
shouldForwardProp: propName => propName !== 'scrollable',
|
|
11
|
-
slot: 'Root',
|
|
12
|
-
})<TableFooterExProps>(({ variant, theme }) => ({
|
|
13
|
-
backgroundColor: theme.vars.palette.background.default,
|
|
14
|
-
bottom: 'unset',
|
|
15
|
-
position: 'relative',
|
|
16
|
-
...(variant === 'scrollable' && {
|
|
17
|
-
bottom: 0,
|
|
18
|
-
position: 'sticky',
|
|
19
|
-
}),
|
|
20
|
-
}))
|
|
21
|
-
|
|
22
|
-
export interface TableFooterExProps extends PropsWithChildren, TableFooterProps {
|
|
23
|
-
variant?: TableExVariants
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
export const TableFooterEx: React.FC<TableFooterExProps> = ({ children, ...props }) => <TableFooterExRoot {...props}>{children}</TableFooterExRoot>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type TableExVariants = 'scrollable' | 'normal'
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './TableExVariants.ts'
|
package/src/components/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './TableEx/index.ts'
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { useResetState } from '@xylabs/react-hooks'
|
|
2
|
-
import type { ContextExProviderProps } from '@xylabs/react-shared'
|
|
3
|
-
import type { PropsWithChildren } from 'react'
|
|
4
|
-
import React, { useMemo, useState } from 'react'
|
|
5
|
-
|
|
6
|
-
import { TableHeightContext } from './Context.ts'
|
|
7
|
-
import type { TableHeightState } from './State.ts'
|
|
8
|
-
|
|
9
|
-
export interface TableHeightProviderProps extends ContextExProviderProps, PropsWithChildren {
|
|
10
|
-
/** @field Account for optional header and footer rows */
|
|
11
|
-
additionalRows?: number
|
|
12
|
-
defaultVisibleRows?: number
|
|
13
|
-
heightFormat?: string
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export const TableHeightProvider: React.FC<TableHeightProviderProps> = ({
|
|
17
|
-
children,
|
|
18
|
-
additionalRows = 0,
|
|
19
|
-
defaultVisibleRows,
|
|
20
|
-
heightFormat = 'px',
|
|
21
|
-
}) => {
|
|
22
|
-
const [visibleRows, setVisibleRows] = useResetState(defaultVisibleRows)
|
|
23
|
-
const [rowHeight, setRowHeight] = useState<number | undefined>()
|
|
24
|
-
|
|
25
|
-
const height = useMemo(() => {
|
|
26
|
-
if (rowHeight !== undefined && visibleRows !== undefined) {
|
|
27
|
-
return rowHeight * (visibleRows + additionalRows)
|
|
28
|
-
}
|
|
29
|
-
}, [defaultVisibleRows, rowHeight, visibleRows, additionalRows])
|
|
30
|
-
|
|
31
|
-
const formattedHeight = useMemo(() => (height === undefined ? undefined : `${height}${heightFormat}`), [height, heightFormat])
|
|
32
|
-
|
|
33
|
-
const value: TableHeightState = useMemo(() => ({
|
|
34
|
-
height: formattedHeight, provided: true, rowHeight, setRowHeight, setVisibleRows, visibleRows,
|
|
35
|
-
}), [formattedHeight, rowHeight, setRowHeight, setVisibleRows, visibleRows])
|
|
36
|
-
|
|
37
|
-
return (
|
|
38
|
-
<TableHeightContext value={value}>
|
|
39
|
-
{children}
|
|
40
|
-
</TableHeightContext>
|
|
41
|
-
)
|
|
42
|
-
}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import type { ContextExState } from '@xylabs/react-shared'
|
|
2
|
-
import type { Dispatch, SetStateAction } from 'react'
|
|
3
|
-
|
|
4
|
-
export type TableHeightState = ContextExState<{
|
|
5
|
-
height?: string
|
|
6
|
-
rowHeight?: number
|
|
7
|
-
setRowHeight?: Dispatch<SetStateAction<number | undefined>>
|
|
8
|
-
setVisibleRows?: Dispatch<SetStateAction<number | undefined>>
|
|
9
|
-
visibleRows?: number
|
|
10
|
-
}>
|
package/src/context/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './TableHeight/index.ts'
|
package/src/global.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import '@mui/material/themeCssVarsAugmentation'
|
package/src/index.ts
DELETED
package/src/types/TableHead.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { TableCellProps } from '@mui/material'
|
|
2
|
-
|
|
3
|
-
export interface TableHeadCell {
|
|
4
|
-
align?: 'left' | 'right' | 'center'
|
|
5
|
-
disablePadding: boolean
|
|
6
|
-
id: string
|
|
7
|
-
label: string
|
|
8
|
-
numeric: boolean
|
|
9
|
-
showOnMobile: boolean
|
|
10
|
-
width?: TableCellProps['width']
|
|
11
|
-
}
|
package/src/types/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './TableHead.ts'
|