@xyo-network/react-table 5.2.2 → 5.2.3

package/dist/browser/index.mjs

@@ -36,7 +36,7 @@ var TableFooterExRoot = styled2(TableFooter, {
   shouldForwardProp: /* @__PURE__ */ __name((propName) => propName !== "scrollable", "shouldForwardProp"),
   slot: "Root"
 })(({ variant, theme }) => ({
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.vars.palette.background.default,
   bottom: "unset",
   position: "relative",
   ...variant === "scrollable" && {

package/dist/browser/index.mjs.map

@@ -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.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 '@xyo-network/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 '@xyo-network/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport { TableHeightContext } from './Context.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  }, [defaultVisibleRows, rowHeight, visibleRows, additionalRows])\n\n  const formattedHeight = useMemo(() => (height === undefined ? undefined : `${height}${heightFormat}`), [height, heightFormat])\n\n  const value = useMemo(() => ({\n    height: formattedHeight, provided: true, 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 '@xyo-network/react-shared'\n\nimport { TableHeightContext } from './Context.ts'\n\nexport const useTableHeight = (required = false) => useContextEx(TableHeightContext, 'TableHeight', required)\n"],"mappings":";;;;AACA,SAASA,QAAQC,iBAAiB;AAM3B,IAAMC,cAAcC,OAAOC,WAAW;EAAEC,MAAM;EAAsBC,mBAAmBC,wBAAAA,SAAQA,SAAS,aAAjBA;AAA6B,CAAA,EACzH,CAAC,EAAEC,YAAY,KAAI,OAAQ;EAAE,GAAIA,aAAa;IAAEC,iBAAiB;EAAc;AAAG,EAAA;;;ACPpF,SAASC,aAAa;AAEtB,OAAOC,WAAW;AAQlB,IAAMC,eAAuC,wBAAC,EAAEC,UAAU,GAAGC,MAAAA,MAAO;AAClE,SACE,sBAAA,cAACC,OAAUD,OACRD,QAAAA;AAGP,GAN6C;AAQ7CD,aAAaI,cAAc;AAEpB,IAAMC,iBAAyC,wBAAC,EACrDC,SAASL,UAAU,GAAGC,MAAAA,MACvB;AACC,SACE,sBAAA,cAACF,cAAAA;IAAaO,cAAcD,YAAY;IAAe,GAAGJ;KACvDD,QAAAA;AAGP,GARsD;AAUtDI,eAAeD,cAAc;AAEtB,IAAMI,UAAUH;;;AChCvB,SAASI,UAAAA,SAAQC,mBAAmB;AAEpC,OAAOC,YAAW;AAIlB,IAAMC,oBAAoBC,QAAOC,aAAa;EAC5CC,MAAM;EACNC,mBAAmBC,wBAAAA,aAAYA,aAAa,cAAzBA;EACnBC,MAAM;AACR,CAAA,EAAuB,CAAC,EAAEC,SAASC,MAAK,OAAQ;EAC9CC,iBAAiBD,MAAME,QAAQC,WAAWC;EAC1CC,QAAQ;EACRC,UAAU;EACV,GAAIP,YAAY,gBAAgB;IAC9BM,QAAQ;IACRC,UAAU;EACZ;AACF,EAAA;AAMO,IAAMC,gBAA8C,wBAAC,EAAEC,UAAU,GAAGC,MAAAA,MAAY,gBAAAC,OAAA,cAAClB,mBAAsBiB,OAAQD,QAAAA,GAA3D;;;ACzB3D,SAASG,uBAAuB;AAIzB,IAAMC,qBAAqBD,gBAAAA;;;ACJlC,SAASE,qBAAqB;AAG9B,OAAOC,UAASC,SAASC,gBAAgB;AAWlC,IAAMC,sBAA0D,wBAAC,EACtEC,UACAC,iBAAiB,GACjBC,oBACAC,eAAe,KAAI,MACpB;AACC,QAAM,CAACC,aAAaC,cAAAA,IAAkBC,cAAcJ,kBAAAA;AACpD,QAAM,CAACK,WAAWC,YAAAA,IAAgBC,SAAAA;AAElC,QAAMC,SAASC,QAAQ,MAAA;AACrB,QAAIJ,cAAcK,UAAaR,gBAAgBQ,QAAW;AACxD,aAAOL,aAAaH,cAAcH;IACpC;EACF,GAAG;IAACC;IAAoBK;IAAWH;IAAaH;GAAe;AAE/D,QAAMY,kBAAkBF,QAAQ,MAAOD,WAAWE,SAAYA,SAAY,GAAGF,MAAAA,GAASP,YAAAA,IAAiB;IAACO;IAAQP;GAAa;AAE7H,QAAMW,QAAQH,QAAQ,OAAO;IAC3BD,QAAQG;IAAiBE,UAAU;IAAMR;IAAWC;IAAcH;IAAgBD;EACpF,IAAI;IAACS;IAAiBN;IAAWC;IAAcH;IAAgBD;GAAY;AAE3E,SACE,gBAAAY,OAAA,cAACC,oBAAAA;IAAmBH;KACjBd,QAAAA;AAGP,GA1BuE;;;ACdvE,SAASkB,oBAAoB;AAItB,IAAMC,iBAAiB,wBAACC,WAAW,UAAUC,aAAaC,oBAAoB,eAAeF,QAAAA,GAAtE;","names":["styled","TableCell","TableCellEx","styled","TableCell","name","shouldForwardProp","prop","noBgColor","backgroundColor","Table","React","TableExInner","children","props","Table","displayName","TableExWithRef","variant","stickyHeader","TableEx","styled","TableFooter","React","TableFooterExRoot","styled","TableFooter","name","shouldForwardProp","propName","slot","variant","theme","backgroundColor","palette","background","default","bottom","position","TableFooterEx","children","props","React","createContextEx","TableHeightContext","useResetState","React","useMemo","useState","TableHeightProvider","children","additionalRows","defaultVisibleRows","heightFormat","visibleRows","setVisibleRows","useResetState","rowHeight","setRowHeight","useState","height","useMemo","undefined","formattedHeight","value","provided","React","TableHeightContext","useContextEx","useTableHeight","required","useContextEx","TableHeightContext"]}
+{"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 '@xyo-network/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 '@xyo-network/react-shared'\nimport type { PropsWithChildren } from 'react'\nimport React, { useMemo, useState } from 'react'\n\nimport { TableHeightContext } from './Context.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  }, [defaultVisibleRows, rowHeight, visibleRows, additionalRows])\n\n  const formattedHeight = useMemo(() => (height === undefined ? undefined : `${height}${heightFormat}`), [height, heightFormat])\n\n  const value = useMemo(() => ({\n    height: formattedHeight, provided: true, 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 '@xyo-network/react-shared'\n\nimport { TableHeightContext } from './Context.ts'\n\nexport const useTableHeight = (required = false) => useContextEx(TableHeightContext, 'TableHeight', required)\n"],"mappings":";;;;AACA,SAASA,QAAQC,iBAAiB;AAM3B,IAAMC,cAAcC,OAAOC,WAAW;EAAEC,MAAM;EAAsBC,mBAAmBC,wBAAAA,SAAQA,SAAS,aAAjBA;AAA6B,CAAA,EACzH,CAAC,EAAEC,YAAY,KAAI,OAAQ;EAAE,GAAIA,aAAa;IAAEC,iBAAiB;EAAc;AAAG,EAAA;;;ACPpF,SAASC,aAAa;AAEtB,OAAOC,WAAW;AAQlB,IAAMC,eAAuC,wBAAC,EAAEC,UAAU,GAAGC,MAAAA,MAAO;AAClE,SACE,sBAAA,cAACC,OAAUD,OACRD,QAAAA;AAGP,GAN6C;AAQ7CD,aAAaI,cAAc;AAEpB,IAAMC,iBAAyC,wBAAC,EACrDC,SAASL,UAAU,GAAGC,MAAAA,MACvB;AACC,SACE,sBAAA,cAACF,cAAAA;IAAaO,cAAcD,YAAY;IAAe,GAAGJ;KACvDD,QAAAA;AAGP,GARsD;AAUtDI,eAAeD,cAAc;AAEtB,IAAMI,UAAUH;;;AChCvB,SAASI,UAAAA,SAAQC,mBAAmB;AAEpC,OAAOC,YAAW;AAIlB,IAAMC,oBAAoBC,QAAOC,aAAa;EAC5CC,MAAM;EACNC,mBAAmBC,wBAAAA,aAAYA,aAAa,cAAzBA;EACnBC,MAAM;AACR,CAAA,EAAuB,CAAC,EAAEC,SAASC,MAAK,OAAQ;EAC9CC,iBAAiBD,MAAME,KAAKC,QAAQC,WAAWC;EAC/CC,QAAQ;EACRC,UAAU;EACV,GAAIR,YAAY,gBAAgB;IAC9BO,QAAQ;IACRC,UAAU;EACZ;AACF,EAAA;AAMO,IAAMC,gBAA8C,wBAAC,EAAEC,UAAU,GAAGC,MAAAA,MAAY,gBAAAC,OAAA,cAACnB,mBAAsBkB,OAAQD,QAAAA,GAA3D;;;ACzB3D,SAASG,uBAAuB;AAIzB,IAAMC,qBAAqBD,gBAAAA;;;ACJlC,SAASE,qBAAqB;AAG9B,OAAOC,UAASC,SAASC,gBAAgB;AAWlC,IAAMC,sBAA0D,wBAAC,EACtEC,UACAC,iBAAiB,GACjBC,oBACAC,eAAe,KAAI,MACpB;AACC,QAAM,CAACC,aAAaC,cAAAA,IAAkBC,cAAcJ,kBAAAA;AACpD,QAAM,CAACK,WAAWC,YAAAA,IAAgBC,SAAAA;AAElC,QAAMC,SAASC,QAAQ,MAAA;AACrB,QAAIJ,cAAcK,UAAaR,gBAAgBQ,QAAW;AACxD,aAAOL,aAAaH,cAAcH;IACpC;EACF,GAAG;IAACC;IAAoBK;IAAWH;IAAaH;GAAe;AAE/D,QAAMY,kBAAkBF,QAAQ,MAAOD,WAAWE,SAAYA,SAAY,GAAGF,MAAAA,GAASP,YAAAA,IAAiB;IAACO;IAAQP;GAAa;AAE7H,QAAMW,QAAQH,QAAQ,OAAO;IAC3BD,QAAQG;IAAiBE,UAAU;IAAMR;IAAWC;IAAcH;IAAgBD;EACpF,IAAI;IAACS;IAAiBN;IAAWC;IAAcH;IAAgBD;GAAY;AAE3E,SACE,gBAAAY,OAAA,cAACC,oBAAAA;IAAmBH;KACjBd,QAAAA;AAGP,GA1BuE;;;ACdvE,SAASkB,oBAAoB;AAItB,IAAMC,iBAAiB,wBAACC,WAAW,UAAUC,aAAaC,oBAAoB,eAAeF,QAAAA,GAAtE;","names":["styled","TableCell","TableCellEx","styled","TableCell","name","shouldForwardProp","prop","noBgColor","backgroundColor","Table","React","TableExInner","children","props","Table","displayName","TableExWithRef","variant","stickyHeader","TableEx","styled","TableFooter","React","TableFooterExRoot","styled","TableFooter","name","shouldForwardProp","propName","slot","variant","theme","backgroundColor","vars","palette","background","default","bottom","position","TableFooterEx","children","props","React","createContextEx","TableHeightContext","useResetState","React","useMemo","useState","TableHeightProvider","children","additionalRows","defaultVisibleRows","heightFormat","visibleRows","setVisibleRows","useResetState","rowHeight","setRowHeight","useState","height","useMemo","undefined","formattedHeight","value","provided","React","TableHeightContext","useContextEx","useTableHeight","required","useContextEx","TableHeightContext"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-table",
-  "version": "5.2.2",
+  "version": "5.2.3",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -39,20 +39,20 @@
   "module": "dist/browser/index.mjs",
   "types": "dist/types/index.d.ts",
   "dependencies": {
-    "@xylabs/react-hooks": "^6.2.1",
-    "@xyo-network/react-shared": "^5.2.2"
+    "@xylabs/react-hooks": "^6.2.8",
+    "@xyo-network/react-shared": "^5.2.3"
   },
   "devDependencies": {
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
     "@storybook/react": "^8.6.12",
     "@types/react": "^19.1.2",
-    "@xylabs/ts-scripts-yarn3": "^6.2.1",
-    "@xylabs/tsconfig-react": "^6.2.1",
-    "@xyo-network/react-storybook": "^5.2.2",
+    "@xylabs/ts-scripts-yarn3": "^6.3.5",
+    "@xylabs/tsconfig-react": "^6.3.5",
+    "@xyo-network/react-storybook": "^5.2.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "react-router-dom": "^7.5.0",
+    "react-router-dom": "^7.5.1",
     "storybook": "^8.6.12",
     "typescript": "^5.8.3"
   },

package/src/components/TableEx/TableEx.stories.tsx

@@ -58,7 +58,7 @@ const Template: StoryFn<typeof TableEx> = (args) => {
             count={25}
             page={1}
             rowsPerPage={5}
-            style={{ borderTop: '1px solid', borderTopColor: theme.palette.divider }}
+            style={{ borderTop: '1px solid', borderTopColor: theme.vars.palette.divider }}
             SelectProps={{
               inputProps: { 'aria-label': 'rows per page' },
               native: true,

package/src/components/TableEx/TableFooterEx.tsx

@@ -10,7 +10,7 @@ const TableFooterExRoot = styled(TableFooter, {
   shouldForwardProp: propName => propName !== 'scrollable',
   slot: 'Root',
 })<TableFooterExProps>(({ variant, theme }) => ({
-  backgroundColor: theme.palette.background.default,
+  backgroundColor: theme.vars.palette.background.default,
   bottom: 'unset',
   position: 'relative',
   ...(variant === 'scrollable' && {

package/src/global.d.ts

@@ -0,0 +1 @@
+import type {} from '@mui/material/themeCssVarsAugmentation'