synapse-react-client 4.0.32 → 4.0.34

package/dist/components/TanStackTable/ColumnHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnHeader.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeader.tsx"],"sourcesContent":["import { HeaderContext } from '@tanstack/react-table'\nimport { Box, IconButton, Tooltip } from '@mui/material'\nimport { HelpTwoTone } from '@mui/icons-material'\nimport IconSvg from '../IconSvg'\nimport { ReactNode, useCallback } from 'react'\nimport { ColumnHeaderEnumFilter } from './ColumnHeaderEnumFilter'\n\ntype ColumnHeaderProps = {\n  title?: string\n  helpText?: ReactNode\n  additionalButtons?: ReactNode\n  wrap?: boolean\n\n  // TODO: Replace with props that can be passed to a reusable filter control\n  filterControl?: ReactNode\n}\n\n/**\n * Styled table column header component for use with @tanstack/react-table, with extra optional props for additional\n * UI features\n */\nexport default function ColumnHeader<TData = unknown, TValue = unknown>(\n  props: ColumnHeaderProps & HeaderContext<TData, TValue>,\n) {\n  const {\n    column,\n    title = props.column.id,\n    wrap = false,\n    helpText,\n    filterControl: filterControlFromProps,\n    additionalButtons,\n  } = props\n\n  const getFilterControl = useCallback(() => {\n    if (filterControlFromProps) {\n      return filterControlFromProps\n    }\n    if (column.getCanFilter()) {\n      if (column.columnDef.meta?.filterVariant === 'enumeration') {\n        return <ColumnHeaderEnumFilter column={column} title={title} />\n      }\n      // As needed, extend ColumnMeta.filterVariant to support other types of filters\n      console.warn(\n        `column.getCanFilter() was true for column ID: ${column.id} but no filterControlFromProps was passed and component for filterVariant: ${column.columnDef.meta?.filterVariant} is not implemented`,\n      )\n    }\n    return <></>\n  }, [column, filterControlFromProps, title])\n\n  const filterControl = getFilterControl()\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignContent: 'center',\n        alignItems: 'center',\n        justifyContent: 'space-between',\n        overflow: 'hidden',\n        minWidth: 0,\n      }}\n    >\n      <span\n        style={{\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: wrap ? 'pre-wrap' : 'nowrap',\n          minWidth: 0,\n        }}\n        title={title}\n      >\n        {title}\n      </span>\n      <Box\n        role={'menubar'}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          height: '22px',\n          ml: 2,\n          gap: 0.25,\n        }}\n      >\n        {helpText && (\n          <Tooltip title={helpText} placement={'top'}>\n            <IconButton size={'small'}>\n              <HelpTwoTone fontSize={'inherit'} />\n            </IconButton>\n          </Tooltip>\n        )}\n        {column.getCanFilter() && filterControl}\n        {column.getCanSort() && (\n          <Tooltip title={`Sort by ${title}`} placement={'top'}>\n            <IconButton\n              role=\"button\"\n              size={'small'}\n              aria-label={`Sort by ${title}`}\n              tabIndex={0}\n              onKeyPress={() => column.toggleSorting()}\n              onClick={() => column.toggleSorting()}\n            >\n              <IconSvg\n                icon={column.getIsSorted() === 'asc' ? 'sortUp' : 'sortDown'}\n                wrap={false}\n                sx={{\n                  color: column.getIsSorted() ? 'primary.main' : 'grey.700',\n                  backgroundColor: 'none',\n                }}\n              />\n            </IconButton>\n          </Tooltip>\n        )}\n        {additionalButtons}\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAqBA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,WACA,WAAQ,EAAM,OAAO,IACrB,UAAO,IACP,aACA,eAAe,GACf,yBACE,GAkBE,IAhBmB,QAAkB;EACzC,IAAI,GACF,OAAO;EAET,IAAI,EAAO,aAAa,GAAG;GACzB,IAAI,EAAO,UAAU,MAAM,kBAAkB,eAC3C,OAAO,kBAAC,GAAD;IAAgC;IAAe;GAAQ,CAAA;GAGhE,QAAQ,KACN,iDAAiD,EAAO,GAAG,6EAA6E,EAAO,UAAU,MAAM,cAAc,oBAC/K;EACF;EACA,OAAO,kBAAA,GAAA,CAAI,CAAA;CACb,GAAG;EAAC;EAAQ;EAAwB;CAAK,CAEnB,EAAiB;CAEvC,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,cAAc;GACd,YAAY;GACZ,gBAAgB;GAChB,UAAU;GACV,UAAU;EACZ;YARF,CAUE,kBAAC,QAAD;GACE,OAAO;IACL,UAAU;IACV,cAAc;IACd,YAAY,IAAO,aAAa;IAChC,UAAU;GACZ;GACO;aAEN;EACG,CAAA,GACN,kBAAC,GAAD;GACE,MAAM;GACN,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,IAAI;IACJ,KAAK;GACP;aARF;IAUG,KACC,kBAAC,GAAD;KAAS,OAAO;KAAU,WAAW;eACnC,kBAAC,GAAD;MAAY,MAAM;gBAChB,kBAAC,GAAD,EAAa,UAAU,UAAY,CAAA;KACzB,CAAA;IACL,CAAA;IAEV,EAAO,aAAa,KAAK;IACzB,EAAO,WAAW,KACjB,kBAAC,GAAD;KAAS,OAAO,WAAW;KAAS,WAAW;eAC7C,kBAAC,GAAD;MACE,MAAK;MACL,MAAM;MACN,cAAY,WAAW;MACvB,UAAU;MACV,kBAAkB,EAAO,cAAc;MACvC,eAAe,EAAO,cAAc;gBAEpC,kBAAC,GAAD;OACE,MAAM,EAAO,YAAY,MAAM,QAAQ,WAAW;OAClD,MAAM;OACN,IAAI;QACF,OAAO,EAAO,YAAY,IAAI,iBAAiB;QAC/C,iBAAiB;OACnB;MACD,CAAA;KACS,CAAA;IACL,CAAA;IAEV;GACE;IACF;;AAET"}
+{"version":3,"file":"ColumnHeader.js","names":[],"sources":["../../../src/components/TanStackTable/ColumnHeader.tsx"],"sourcesContent":["import { HeaderContext } from '@tanstack/react-table'\nimport { Box, IconButton, Tooltip } from '@mui/material'\nimport { HelpTwoTone } from '@mui/icons-material'\nimport IconSvg from '../IconSvg'\nimport { ReactNode, useCallback } from 'react'\nimport { ColumnHeaderEnumFilter } from './ColumnHeaderEnumFilter'\n\ntype SortIconRendererParams = {\n  isSorted: 'asc' | 'desc' | false\n}\n\ntype ColumnHeaderProps = {\n  title?: string\n  helpText?: ReactNode\n  additionalButtons?: ReactNode\n  wrap?: boolean\n  sortIconRenderer?: (params: SortIconRendererParams) => ReactNode\n  iconPlacement?: 'left' | 'right'\n  iconColor?: string\n  iconSize?: string | number\n\n  // TODO: Replace with props that can be passed to a reusable filter control\n  filterControl?: ReactNode\n}\n\n/**\n * Styled table column header component for use with @tanstack/react-table, with extra optional props for additional\n * UI features\n */\nexport default function ColumnHeader<TData = unknown, TValue = unknown>(\n  props: ColumnHeaderProps & HeaderContext<TData, TValue>,\n) {\n  const {\n    column,\n    title = props.column.id,\n    wrap = false,\n    helpText,\n    filterControl: filterControlFromProps,\n    additionalButtons,\n    sortIconRenderer,\n    iconPlacement = 'right',\n    iconColor,\n    iconSize,\n  } = props\n\n  const getFilterControl = useCallback(() => {\n    if (filterControlFromProps) {\n      return filterControlFromProps\n    }\n    if (column.getCanFilter()) {\n      if (column.columnDef.meta?.filterVariant === 'enumeration') {\n        return <ColumnHeaderEnumFilter column={column} title={title} />\n      }\n      // As needed, extend ColumnMeta.filterVariant to support other types of filters\n      console.warn(\n        `column.getCanFilter() was true for column ID: ${column.id} but no filterControlFromProps was passed and component for filterVariant: ${column.columnDef.meta?.filterVariant} is not implemented`,\n      )\n    }\n    return <></>\n  }, [column, filterControlFromProps, title])\n\n  const filterControl = getFilterControl()\n  const isSorted = column.getIsSorted()\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        alignContent: 'center',\n        alignItems: 'center',\n        ...(iconPlacement === 'right' && {\n          justifyContent: 'space-between',\n        }),\n        overflow: 'hidden',\n        minWidth: 0,\n      }}\n    >\n      <span\n        style={{\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          whiteSpace: wrap ? 'pre-wrap' : 'nowrap',\n          minWidth: 0,\n        }}\n        title={title}\n      >\n        {title}\n      </span>\n      <Box\n        role={'menubar'}\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          height: '22px',\n          ml: iconPlacement === 'left' ? 1 : 2,\n          gap: 0.25,\n        }}\n      >\n        {helpText && (\n          <Tooltip title={helpText} placement={'top'}>\n            <IconButton size={'small'}>\n              <HelpTwoTone fontSize={'inherit'} />\n            </IconButton>\n          </Tooltip>\n        )}\n        {column.getCanFilter() && filterControl}\n        {column.getCanSort() && (\n          <Tooltip title={`Sort by ${title}`} placement={'top'}>\n            <IconButton\n              role=\"button\"\n              size={'small'}\n              aria-label={`Sort by ${title}`}\n              tabIndex={0}\n              onKeyPress={() => column.toggleSorting()}\n              onClick={() => column.toggleSorting()}\n            >\n              {sortIconRenderer ? (\n                sortIconRenderer({ isSorted })\n              ) : (\n                <IconSvg\n                  icon={isSorted === 'asc' ? 'sortUp' : 'sortDown'}\n                  wrap={false}\n                  sx={{\n                    color:\n                      iconColor ?? (isSorted ? 'primary.main' : 'grey.700'),\n                    backgroundColor: 'none',\n                    ...(iconSize && { fontSize: iconSize }),\n                  }}\n                />\n              )}\n            </IconButton>\n          </Tooltip>\n        )}\n        {additionalButtons}\n      </Box>\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AA6BA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,WACA,WAAQ,EAAM,OAAO,IACrB,UAAO,IACP,aACA,eAAe,GACf,sBACA,qBACA,mBAAgB,SAChB,cACA,gBACE,GAkBE,IAhBmB,QAAkB;EACzC,IAAI,GACF,OAAO;EAET,IAAI,EAAO,aAAa,GAAG;GACzB,IAAI,EAAO,UAAU,MAAM,kBAAkB,eAC3C,OAAO,kBAAC,GAAD;IAAgC;IAAe;GAAQ,CAAA;GAGhE,QAAQ,KACN,iDAAiD,EAAO,GAAG,6EAA6E,EAAO,UAAU,MAAM,cAAc,oBAC/K;EACF;EACA,OAAO,kBAAA,GAAA,CAAI,CAAA;CACb,GAAG;EAAC;EAAQ;EAAwB;CAAK,CAEnB,EAAiB,GACjC,IAAW,EAAO,YAAY;CAEpC,OACE,kBAAC,GAAD;EACE,IAAI;GACF,SAAS;GACT,cAAc;GACd,YAAY;GACZ,GAAI,MAAkB,WAAW,EAC/B,gBAAgB,gBAClB;GACA,UAAU;GACV,UAAU;EACZ;YAVF,CAYE,kBAAC,QAAD;GACE,OAAO;IACL,UAAU;IACV,cAAc;IACd,YAAY,IAAO,aAAa;IAChC,UAAU;GACZ;GACO;aAEN;EACG,CAAA,GACN,kBAAC,GAAD;GACE,MAAM;GACN,IAAI;IACF,SAAS;IACT,YAAY;IACZ,QAAQ;IACR,IAAI,MAAkB,SAAS,IAAI;IACnC,KAAK;GACP;aARF;IAUG,KACC,kBAAC,GAAD;KAAS,OAAO;KAAU,WAAW;eACnC,kBAAC,GAAD;MAAY,MAAM;gBAChB,kBAAC,GAAD,EAAa,UAAU,UAAY,CAAA;KACzB,CAAA;IACL,CAAA;IAEV,EAAO,aAAa,KAAK;IACzB,EAAO,WAAW,KACjB,kBAAC,GAAD;KAAS,OAAO,WAAW;KAAS,WAAW;eAC7C,kBAAC,GAAD;MACE,MAAK;MACL,MAAM;MACN,cAAY,WAAW;MACvB,UAAU;MACV,kBAAkB,EAAO,cAAc;MACvC,eAAe,EAAO,cAAc;gBAEnC,IACC,EAAiB,EAAE,YAAS,CAAC,IAE7B,kBAAC,GAAD;OACE,MAAM,MAAa,QAAQ,WAAW;OACtC,MAAM;OACN,IAAI;QACF,OACE,MAAc,IAAW,iBAAiB;QAC5C,iBAAiB;QACjB,GAAI,KAAY,EAAE,UAAU,EAAS;OACvC;MACD,CAAA;KAEO,CAAA;IACL,CAAA;IAEV;GACE;IACF;;AAET"}

package/dist/components/TanStackTable/StyledVirtualTanStackTable.d.ts

@@ -4,6 +4,14 @@ import { TrProps } from './types';
 type StyledVirtualTanStackTableProps<T = unknown> = Omit<StyledTanStackTableProps<T, VirtualItem>, 'slots' | 'rows' | 'rowTransform'> & {
     rowVirtualizer: Virtualizer<any, any>;
     onTableContainerScroll?: (target: EventTarget) => void;
+    /**
+     * When true, alternating rows are given a striped background. Unlike {@link StyledTableContainerProps.noStripedRows},
+     * this does not rely on CSS `:nth-of-type`, since a virtualized row's position in the DOM is not
+     * guaranteed to match its data index as rows are mounted/unmounted while scrolling. Instead, this
+     * stripes rows based on the `data-index` attribute that {@link VirtualizedTr} sets on each `<tr>`.
+     * @default false
+     */
+    striped?: boolean;
 };
 /**
  * A table row component modified to be used with @tanstack/react-virtual.

package/dist/components/TanStackTable/StyledVirtualTanStackTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StyledVirtualTanStackTable.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/StyledVirtualTanStackTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGlE,OAA4B,EAC1B,wBAAwB,EACzB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEjC,KAAK,+BAA+B,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CACtD,wBAAwB,CAAC,CAAC,EAAE,WAAW,CAAC,EACxC,OAAO,GAAG,MAAM,GAAG,cAAc,CAClC,GAAG;IACF,cAAc,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IACrC,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;CACvD,CAAA;AAOD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,GAAG,OAAO,EAC3C,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,2CAmBnC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,CAAC,GAAG,OAAO,EAC5D,KAAK,EAAE,+BAA+B,CAAC,CAAC,CAAC,2CAsE1C"}
+{"version":3,"file":"StyledVirtualTanStackTable.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/StyledVirtualTanStackTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAGlE,OAA4B,EAC1B,wBAAwB,EACzB,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAA;AAEjC,KAAK,+BAA+B,CAAC,CAAC,GAAG,OAAO,IAAI,IAAI,CACtD,wBAAwB,CAAC,CAAC,EAAE,WAAW,CAAC,EACxC,OAAO,GAAG,MAAM,GAAG,cAAc,CAClC,GAAG;IACF,cAAc,EAAE,WAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;IACrC,sBAAsB,CAAC,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,IAAI,CAAA;IACtD;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAqBD;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,GAAG,OAAO,EAC3C,KAAK,EAAE,OAAO,CAAC,KAAK,EAAE,WAAW,CAAC,2CAmBnC;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,0BAA0B,CAAC,CAAC,GAAG,OAAO,EAC5D,KAAK,EAAE,+BAA+B,CAAC,CAAC,CAAC,2CA4E1C"}

package/dist/components/TanStackTable/StyledVirtualTanStackTable.js

@@ -4,12 +4,18 @@ import n, { useContext as r } from "react";
 import { noop as i } from "lodash-es";
 import { jsx as a } from "react/jsx-runtime";
 //#region src/components/TanStackTable/StyledVirtualTanStackTable.tsx
-var o = n.createContext(void 0);
-function s(e) {
-	let { row: t, tableRow: n, ...i } = e, s = r(o);
+var o = { [[
+	1,
+	3,
+	5,
+	7,
+	9
+].map((e) => `&[data-index$="${e}"]:not([aria-selected="true"])`).join(", ")]: { backgroundColor: "var(--synapse-background-color-gray)" } }, s = n.createContext(void 0);
+function c(e) {
+	let { row: t, tableRow: n, ...i } = e, o = r(s);
 	return /* @__PURE__ */ a("tr", {
 		"data-index": t.index,
-		ref: (e) => s?.measureElement(e),
+		ref: (e) => o?.measureElement(e),
 		...i,
 		style: {
 			...i.style,
@@ -21,32 +27,35 @@ function s(e) {
 		}
 	});
 }
-function c(n) {
-	let { table: r, styledTableContainerProps: c, fullWidth: l = !0, rowVirtualizer: u, slotProps: d = {}, onTableContainerScroll: f = i } = n, p = u.getVirtualItems();
-	return /* @__PURE__ */ a(o.Provider, {
-		value: u,
+function l(n) {
+	let { table: r, styledTableContainerProps: l, fullWidth: u = !0, rowVirtualizer: d, slotProps: f = {}, onTableContainerScroll: p = i, striped: m = !1 } = n, h = d.getVirtualItems();
+	return /* @__PURE__ */ a(s.Provider, {
+		value: d,
 		children: /* @__PURE__ */ a(t, {
 			table: r,
-			rows: p,
+			rows: h,
 			rowTransform: (e) => r.getRowModel().rows[e.index],
-			fullWidth: l,
+			fullWidth: u,
 			styledTableContainerProps: {
 				noStripedRows: !0,
-				...c,
+				...l,
 				style: {
 					overflow: "auto",
 					position: "relative",
-					...c?.style
+					...l?.style
 				},
-				sx: { "thead > tr": {
-					display: "flex",
-					width: "100%"
-				} },
-				onScroll: (e) => f(e.target)
+				sx: [
+					{ "thead > tr": {
+						display: "flex",
+						width: "100%"
+					} },
+					m && { "tbody > tr": o },
+					l?.sx
+				].flat().filter(Boolean),
+				onScroll: (e) => p(e.target)
 			},
-			...c,
-			slots: { Tr: s },
-			slotProps: e(d, {
+			slots: { Tr: c },
+			slotProps: e(f, {
 				Table: { style: { display: "grid" } },
 				Thead: { style: {
 					display: "grid",
@@ -57,7 +66,7 @@ function c(n) {
 				Th: { style: { display: "flex" } },
 				Tbody: { style: {
 					display: "grid",
-					height: `${u.getTotalSize()}px`,
+					height: `${d.getTotalSize()}px`,
 					position: "relative"
 				} }
 			})
@@ -65,6 +74,6 @@ function c(n) {
 	});
 }
 //#endregion
-export { s as VirtualizedTr, c as default };
+export { c as VirtualizedTr, l as default };
 
 //# sourceMappingURL=StyledVirtualTanStackTable.js.map

package/dist/components/TanStackTable/StyledVirtualTanStackTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledVirtualTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledVirtualTanStackTable.tsx"],"sourcesContent":["import { mergeSlotProps } from '@/utils/slots/SlotUtils'\nimport { VirtualItem, Virtualizer } from '@tanstack/react-virtual'\nimport { noop } from 'lodash-es'\nimport React, { useContext } from 'react'\nimport StyledTanStackTable, {\n  StyledTanStackTableProps,\n} from './StyledTanStackTable'\n\nimport { TrProps } from './types'\n\ntype StyledVirtualTanStackTableProps<T = unknown> = Omit<\n  StyledTanStackTableProps<T, VirtualItem>,\n  'slots' | 'rows' | 'rowTransform'\n> & {\n  rowVirtualizer: Virtualizer<any, any>\n  onTableContainerScroll?: (target: EventTarget) => void\n}\n\n// Context to pass the row virtualizer to the Tr component\nconst RowVirtualizerContext = React.createContext<\n  Virtualizer<any, any> | undefined\n>(undefined)\n\n/**\n * A table row component modified to be used with @tanstack/react-virtual.\n */\nexport function VirtualizedTr<TData = unknown>(\n  props: TrProps<TData, VirtualItem>,\n) {\n  const { row: virtualItem, tableRow: _tableRow, ...rest } = props\n  const rowVirtualizer = useContext(RowVirtualizerContext)\n  return (\n    <tr\n      data-index={virtualItem.index} // needed for dynamic row height measurement\n      ref={node => rowVirtualizer?.measureElement(node)} //measure dynamic row height\n      {...rest}\n      style={{\n        ...rest.style,\n        display: 'flex',\n        position: 'absolute',\n        transform: `translateY(${virtualItem.start}px)`, //this should always be a `style` as it changes on scroll\n        width: '100%',\n        alignItems: 'center',\n      }}\n    />\n  )\n}\n\n/**\n * Stylized table component that is compatible with @tanstack/react-table and @tanstack/react-virtual to display a\n * virtualized table, i.e. a table that uses a virtualizer to only render the DOM nodes that contain data that is visible\n * within the viewport. For cases where the table rows do not need to be virtualized, use {@link StyledTanStackTable}.\n */\nexport default function StyledVirtualTanStackTable<T = unknown>(\n  props: StyledVirtualTanStackTableProps<T>,\n) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    rowVirtualizer,\n    slotProps = {},\n    onTableContainerScroll = noop,\n  } = props\n\n  const virtualRows = rowVirtualizer.getVirtualItems()\n\n  return (\n    <RowVirtualizerContext.Provider value={rowVirtualizer}>\n      <StyledTanStackTable<T, VirtualItem>\n        table={table}\n        rows={virtualRows}\n        rowTransform={row => table.getRowModel().rows[row.index]}\n        fullWidth={fullWidth}\n        styledTableContainerProps={{\n          noStripedRows: true,\n          ...styledTableContainerProps,\n          style: {\n            overflow: 'auto', //our scrollable table container\n            position: 'relative', //needed for sticky header\n            ...styledTableContainerProps?.style,\n          },\n          sx: {\n            'thead > tr': {\n              display: 'flex',\n              width: '100%',\n            },\n          },\n          onScroll: e => onTableContainerScroll(e.target),\n        }}\n        {...styledTableContainerProps}\n        slots={{\n          Tr: VirtualizedTr,\n        }}\n        slotProps={mergeSlotProps(slotProps, {\n          Table: {\n            style: {\n              display: 'grid',\n            },\n          },\n          Thead: {\n            style: {\n              display: 'grid',\n              position: 'sticky',\n              top: 0,\n              zIndex: 1,\n            },\n          },\n          Th: {\n            style: {\n              display: 'flex',\n            },\n          },\n          Tbody: {\n            style: {\n              display: 'grid',\n              height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n              position: 'relative', //needed for absolute positioning of rows\n            },\n          },\n        })}\n      />\n    </RowVirtualizerContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AAmBA,IAAM,IAAwB,EAAM,cAElC,KAAA,CAAS;AAKX,SAAgB,EACd,GACA;CACA,IAAM,EAAE,KAAK,GAAa,UAAU,GAAW,GAAG,MAAS,GACrD,IAAiB,EAAW,CAAqB;CACvD,OACE,kBAAC,MAAD;EACE,cAAY,EAAY;EACxB,MAAK,MAAQ,GAAgB,eAAe,CAAI;EAChD,GAAI;EACJ,OAAO;GACL,GAAG,EAAK;GACR,SAAS;GACT,UAAU;GACV,WAAW,cAAc,EAAY,MAAM;GAC3C,OAAO;GACP,YAAY;EACd;CACD,CAAA;AAEL;AAOA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,UACA,8BACA,eAAY,IACZ,mBACA,eAAY,CAAC,GACb,4BAAyB,MACvB,GAEE,IAAc,EAAe,gBAAgB;CAEnD,OACE,kBAAC,EAAsB,UAAvB;EAAgC,OAAO;YACrC,kBAAC,GAAD;GACS;GACP,MAAM;GACN,eAAc,MAAO,EAAM,YAAY,EAAE,KAAK,EAAI;GACvC;GACX,2BAA2B;IACzB,eAAe;IACf,GAAG;IACH,OAAO;KACL,UAAU;KACV,UAAU;KACV,GAAG,GAA2B;IAChC;IACA,IAAI,EACF,cAAc;KACZ,SAAS;KACT,OAAO;IACT,EACF;IACA,WAAU,MAAK,EAAuB,EAAE,MAAM;GAChD;GACA,GAAI;GACJ,OAAO,EACL,IAAI,EACN;GACA,WAAW,EAAe,GAAW;IACnC,OAAO,EACL,OAAO,EACL,SAAS,OACX,EACF;IACA,OAAO,EACL,OAAO;KACL,SAAS;KACT,UAAU;KACV,KAAK;KACL,QAAQ;IACV,EACF;IACA,IAAI,EACF,OAAO,EACL,SAAS,OACX,EACF;IACA,OAAO,EACL,OAAO;KACL,SAAS;KACT,QAAQ,GAAG,EAAe,aAAa,EAAE;KACzC,UAAU;IACZ,EACF;GACF,CAAC;EACF,CAAA;CAC6B,CAAA;AAEpC"}
+{"version":3,"file":"StyledVirtualTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledVirtualTanStackTable.tsx"],"sourcesContent":["import { mergeSlotProps } from '@/utils/slots/SlotUtils'\nimport { SxProps, Theme } from '@mui/material'\nimport { VirtualItem, Virtualizer } from '@tanstack/react-virtual'\nimport { noop } from 'lodash-es'\nimport React, { useContext } from 'react'\nimport StyledTanStackTable, {\n  StyledTanStackTableProps,\n} from './StyledTanStackTable'\n\nimport { TrProps } from './types'\n\ntype StyledVirtualTanStackTableProps<T = unknown> = Omit<\n  StyledTanStackTableProps<T, VirtualItem>,\n  'slots' | 'rows' | 'rowTransform'\n> & {\n  rowVirtualizer: Virtualizer<any, any>\n  onTableContainerScroll?: (target: EventTarget) => void\n  /**\n   * When true, alternating rows are given a striped background. Unlike {@link StyledTableContainerProps.noStripedRows},\n   * this does not rely on CSS `:nth-of-type`, since a virtualized row's position in the DOM is not\n   * guaranteed to match its data index as rows are mounted/unmounted while scrolling. Instead, this\n   * stripes rows based on the `data-index` attribute that {@link VirtualizedTr} sets on each `<tr>`.\n   * @default false\n   */\n  striped?: boolean\n}\n\n// The last digit of a `data-index` that identifies an odd row, e.g. matches indices 1, 3, 11, 23.\nconst ODD_ROW_LAST_DIGITS = [1, 3, 5, 7, 9]\n\nconst stripedRowsSx = {\n  // Exclude selected rows so this doesn't outrank a caller's own `[aria-selected=\"true\"]`\n  // background rule (emotion's `sx` classes are more specific than a single class+attribute\n  // selector, e.g. EntityFinder's `.EntityFinderDetailsViewRow[aria-selected='true']`).\n  [ODD_ROW_LAST_DIGITS.map(\n    digit => `&[data-index$=\"${digit}\"]:not([aria-selected=\"true\"])`,\n  ).join(', ')]: {\n    backgroundColor: 'var(--synapse-background-color-gray)',\n  },\n}\n\n// Context to pass the row virtualizer to the Tr component\nconst RowVirtualizerContext = React.createContext<\n  Virtualizer<any, any> | undefined\n>(undefined)\n\n/**\n * A table row component modified to be used with @tanstack/react-virtual.\n */\nexport function VirtualizedTr<TData = unknown>(\n  props: TrProps<TData, VirtualItem>,\n) {\n  const { row: virtualItem, tableRow: _tableRow, ...rest } = props\n  const rowVirtualizer = useContext(RowVirtualizerContext)\n  return (\n    <tr\n      data-index={virtualItem.index} // needed for dynamic row height measurement\n      ref={node => rowVirtualizer?.measureElement(node)} //measure dynamic row height\n      {...rest}\n      style={{\n        ...rest.style,\n        display: 'flex',\n        position: 'absolute',\n        transform: `translateY(${virtualItem.start}px)`, //this should always be a `style` as it changes on scroll\n        width: '100%',\n        alignItems: 'center',\n      }}\n    />\n  )\n}\n\n/**\n * Stylized table component that is compatible with @tanstack/react-table and @tanstack/react-virtual to display a\n * virtualized table, i.e. a table that uses a virtualizer to only render the DOM nodes that contain data that is visible\n * within the viewport. For cases where the table rows do not need to be virtualized, use {@link StyledTanStackTable}.\n */\nexport default function StyledVirtualTanStackTable<T = unknown>(\n  props: StyledVirtualTanStackTableProps<T>,\n) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    rowVirtualizer,\n    slotProps = {},\n    onTableContainerScroll = noop,\n    striped = false,\n  } = props\n\n  const virtualRows = rowVirtualizer.getVirtualItems()\n\n  return (\n    <RowVirtualizerContext.Provider value={rowVirtualizer}>\n      <StyledTanStackTable<T, VirtualItem>\n        table={table}\n        rows={virtualRows}\n        rowTransform={row => table.getRowModel().rows[row.index]}\n        fullWidth={fullWidth}\n        styledTableContainerProps={{\n          noStripedRows: true,\n          ...styledTableContainerProps,\n          style: {\n            overflow: 'auto', //our scrollable table container\n            position: 'relative', //needed for sticky header\n            ...styledTableContainerProps?.style,\n          },\n          sx: [\n            {\n              'thead > tr': {\n                display: 'flex',\n                width: '100%',\n              },\n            },\n            striped && { 'tbody > tr': stripedRowsSx },\n            styledTableContainerProps?.sx,\n          ]\n            .flat()\n            .filter(Boolean) as SxProps<Theme>,\n          onScroll: e => onTableContainerScroll(e.target),\n        }}\n        slots={{\n          Tr: VirtualizedTr,\n        }}\n        slotProps={mergeSlotProps(slotProps, {\n          Table: {\n            style: {\n              display: 'grid',\n            },\n          },\n          Thead: {\n            style: {\n              display: 'grid',\n              position: 'sticky',\n              top: 0,\n              zIndex: 1,\n            },\n          },\n          Th: {\n            style: {\n              display: 'flex',\n            },\n          },\n          Tbody: {\n            style: {\n              display: 'grid',\n              height: `${rowVirtualizer.getTotalSize()}px`, //tells scrollbar how big the table is\n              position: 'relative', //needed for absolute positioning of rows\n            },\n          },\n        })}\n      />\n    </RowVirtualizerContext.Provider>\n  )\n}\n"],"mappings":";;;;;;AA8BA,IAAM,IAAgB,GAInB;CAN0B;CAAG;CAAG;CAAG;CAAG;AAMtC,EAAoB,KACnB,MAAS,kBAAkB,EAAM,+BACnC,EAAE,KAAK,IAAI,IAAI,EACb,iBAAiB,uCACnB,EACF,GAGM,IAAwB,EAAM,cAElC,KAAA,CAAS;AAKX,SAAgB,EACd,GACA;CACA,IAAM,EAAE,KAAK,GAAa,UAAU,GAAW,GAAG,MAAS,GACrD,IAAiB,EAAW,CAAqB;CACvD,OACE,kBAAC,MAAD;EACE,cAAY,EAAY;EACxB,MAAK,MAAQ,GAAgB,eAAe,CAAI;EAChD,GAAI;EACJ,OAAO;GACL,GAAG,EAAK;GACR,SAAS;GACT,UAAU;GACV,WAAW,cAAc,EAAY,MAAM;GAC3C,OAAO;GACP,YAAY;EACd;CACD,CAAA;AAEL;AAOA,SAAwB,EACtB,GACA;CACA,IAAM,EACJ,UACA,8BACA,eAAY,IACZ,mBACA,eAAY,CAAC,GACb,4BAAyB,GACzB,aAAU,OACR,GAEE,IAAc,EAAe,gBAAgB;CAEnD,OACE,kBAAC,EAAsB,UAAvB;EAAgC,OAAO;YACrC,kBAAC,GAAD;GACS;GACP,MAAM;GACN,eAAc,MAAO,EAAM,YAAY,EAAE,KAAK,EAAI;GACvC;GACX,2BAA2B;IACzB,eAAe;IACf,GAAG;IACH,OAAO;KACL,UAAU;KACV,UAAU;KACV,GAAG,GAA2B;IAChC;IACA,IAAI;KACF,EACE,cAAc;MACZ,SAAS;MACT,OAAO;KACT,EACF;KACA,KAAW,EAAE,cAAc,EAAc;KACzC,GAA2B;IAC7B,EACG,KAAK,EACL,OAAO,OAAO;IACjB,WAAU,MAAK,EAAuB,EAAE,MAAM;GAChD;GACA,OAAO,EACL,IAAI,EACN;GACA,WAAW,EAAe,GAAW;IACnC,OAAO,EACL,OAAO,EACL,SAAS,OACX,EACF;IACA,OAAO,EACL,OAAO;KACL,SAAS;KACT,UAAU;KACV,KAAK;KACL,QAAQ;IACV,EACF;IACA,IAAI,EACF,OAAO,EACL,SAAS,OACX,EACF;IACA,OAAO,EACL,OAAO;KACL,SAAS;KACT,QAAQ,GAAG,EAAe,aAAa,EAAE;KACzC,UAAU;IACZ,EACF;GACF,CAAC;EACF,CAAA;CAC6B,CAAA;AAEpC"}

package/dist/components/TanStackTable/useFetchNextPageOnScrollToBottom.d.ts

@@ -0,0 +1,21 @@
+/** Once the user has scrolled within this many pixels of the bottom, fetch the next page. */
+export declare const SCROLL_FETCH_THRESHOLD_PX = 500;
+export type UseFetchNextPageOnScrollToBottomParams = {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
+    fetchNextPage?: () => Promise<unknown>;
+    /**
+     * Re-checks the scroll position whenever this changes, in case the container is already
+     * scrolled to the bottom -- e.g. on mount, or right after a fetch resolves with data that
+     * didn't fill the container.
+     */
+    data: unknown;
+};
+/**
+ * Returns a scroll-event callback that fetches the next page of a paginated/infinite query once
+ * `containerRef`'s element is within {@link SCROLL_FETCH_THRESHOLD_PX} of its bottom. Also
+ * re-runs that check whenever `data` changes.
+ */
+export declare function useFetchNextPageOnScrollToBottom(params: UseFetchNextPageOnScrollToBottomParams): (containerRefElement?: HTMLDivElement | null) => void;
+//# sourceMappingURL=useFetchNextPageOnScrollToBottom.d.ts.map

package/dist/components/TanStackTable/useFetchNextPageOnScrollToBottom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchNextPageOnScrollToBottom.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/useFetchNextPageOnScrollToBottom.ts"],"names":[],"mappings":"AAEA,6FAA6F;AAC7F,eAAO,MAAM,yBAAyB,MAAM,CAAA;AAE5C,MAAM,MAAM,sCAAsC,GAAG;IACnD,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACpD,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAA;IACtC;;;;OAIG;IACH,IAAI,EAAE,OAAO,CAAA;CACd,CAAA;AAED;;;;GAIG;AACH,wBAAgB,gCAAgC,CAC9C,MAAM,EAAE,sCAAsC,0BAMrB,cAAc,GAAG,IAAI,UAsB/C"}

package/dist/components/TanStackTable/useFetchNextPageOnScrollToBottom.js

@@ -0,0 +1,22 @@
+import { useCallback as e, useEffect as t } from "react";
+//#region src/components/TanStackTable/useFetchNextPageOnScrollToBottom.ts
+var n = 500;
+function r(n) {
+	let { containerRef: r, hasNextPage: i, isFetchingNextPage: a, fetchNextPage: o, data: s } = n, c = e((e) => {
+		if (e) {
+			let { scrollHeight: t, scrollTop: n, clientHeight: r } = e;
+			t - n - r < 500 && !a && i && o && o();
+		}
+	}, [
+		o,
+		a,
+		i
+	]);
+	return t(() => {
+		c(r.current);
+	}, [s, c]), c;
+}
+//#endregion
+export { n as SCROLL_FETCH_THRESHOLD_PX, r as useFetchNextPageOnScrollToBottom };
+
+//# sourceMappingURL=useFetchNextPageOnScrollToBottom.js.map

package/dist/components/TanStackTable/useFetchNextPageOnScrollToBottom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFetchNextPageOnScrollToBottom.js","names":[],"sources":["../../../src/components/TanStackTable/useFetchNextPageOnScrollToBottom.ts"],"sourcesContent":["import { useCallback, useEffect } from 'react'\n\n/** Once the user has scrolled within this many pixels of the bottom, fetch the next page. */\nexport const SCROLL_FETCH_THRESHOLD_PX = 500\n\nexport type UseFetchNextPageOnScrollToBottomParams = {\n  containerRef: React.RefObject<HTMLDivElement | null>\n  hasNextPage?: boolean\n  isFetchingNextPage?: boolean\n  fetchNextPage?: () => Promise<unknown>\n  /**\n   * Re-checks the scroll position whenever this changes, in case the container is already\n   * scrolled to the bottom -- e.g. on mount, or right after a fetch resolves with data that\n   * didn't fill the container.\n   */\n  data: unknown\n}\n\n/**\n * Returns a scroll-event callback that fetches the next page of a paginated/infinite query once\n * `containerRef`'s element is within {@link SCROLL_FETCH_THRESHOLD_PX} of its bottom. Also\n * re-runs that check whenever `data` changes.\n */\nexport function useFetchNextPageOnScrollToBottom(\n  params: UseFetchNextPageOnScrollToBottomParams,\n) {\n  const { containerRef, hasNextPage, isFetchingNextPage, fetchNextPage, data } =\n    params\n\n  const fetchMoreOnBottomReached = useCallback(\n    (containerRefElement?: HTMLDivElement | null) => {\n      if (containerRefElement) {\n        const { scrollHeight, scrollTop, clientHeight } = containerRefElement\n        if (\n          scrollHeight - scrollTop - clientHeight < SCROLL_FETCH_THRESHOLD_PX &&\n          !isFetchingNextPage &&\n          hasNextPage &&\n          fetchNextPage\n        ) {\n          void fetchNextPage()\n        }\n      }\n    },\n    [fetchNextPage, isFetchingNextPage, hasNextPage],\n  )\n\n  useEffect(() => {\n    fetchMoreOnBottomReached(containerRef.current)\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [data, fetchMoreOnBottomReached])\n\n  return fetchMoreOnBottomReached\n}\n"],"mappings":";;AAGA,IAAa,IAA4B;AAoBzC,SAAgB,EACd,GACA;CACA,IAAM,EAAE,iBAAc,gBAAa,uBAAoB,kBAAe,YACpE,GAEI,IAA2B,GAC9B,MAAgD;EAC/C,IAAI,GAAqB;GACvB,IAAM,EAAE,iBAAc,cAAW,oBAAiB;GAClD,AACE,IAAe,IAAY,IAAA,OAC3B,CAAC,KACD,KACA,KAEA,EAAmB;EAEvB;CACF,GACA;EAAC;EAAe;EAAoB;CAAW,CACjD;CAOA,OALA,QAAgB;EACd,EAAyB,EAAa,OAAO;CAE/C,GAAG,CAAC,GAAM,CAAwB,CAAC,GAE5B;AACT"}

package/dist/components/dataaccess/AccessRequirementDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccessRequirementDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dataaccess/AccessRequirementDashboard.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,8BAA8B,aAAa,CAAA;AACxD,eAAO,MAAM,mCAAmC,qBAAqB,CAAA;AACrE,eAAO,MAAM,4BAA4B,eAAe,CAAA;AACxD,eAAO,MAAM,wBAAwB,SAAS,CAAA;AAE9C,MAAM,MAAM,+BAA+B,GAAG;IAC5C,mCAAmC,CAAC,EAAE,MAAM,IAAI,CAAA;CACjD,CAAA;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,+BAA+B,2CA0MvC;AAED,eAAe,0BAA0B,CAAA"}
+{"version":3,"file":"AccessRequirementDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/dataaccess/AccessRequirementDashboard.tsx"],"names":[],"mappings":"AAcA,eAAO,MAAM,8BAA8B,aAAa,CAAA;AACxD,eAAO,MAAM,mCAAmC,qBAAqB,CAAA;AACrE,eAAO,MAAM,4BAA4B,eAAe,CAAA;AACxD,eAAO,MAAM,wBAAwB,SAAS,CAAA;AAE9C,MAAM,MAAM,+BAA+B,GAAG;IAC5C,mCAAmC,CAAC,EAAE,MAAM,IAAI,CAAA;CACjD,CAAA;AAED,wBAAgB,0BAA0B,CACxC,KAAK,EAAE,+BAA+B,2CA8MvC;AAED,eAAe,0BAA0B,CAAA"}

package/dist/components/dataaccess/AccessRequirementDashboard.js

@@ -7,86 +7,86 @@ import { AccessRequirementTable as a } from "./AccessRequirementTable.js";
 import { useCallback as o, useEffect as s, useMemo as c, useState as l } from "react";
 import { omitBy as u } from "lodash-es";
 import { Grid as d, InputAdornment as f, TextField as p, Typography as m } from "@mui/material";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { EntityType as _ } from "@sage-bionetworks/synapse-client";
-import { SearchOutlined as v } from "@mui/icons-material";
-import { useLocation as y, useNavigate as b } from "react-router";
-import { useDebouncedState as x } from "@react-hookz/web";
+import { Fragment as h, jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { EntityType as v } from "@sage-bionetworks/synapse-client";
+import { SearchOutlined as y } from "@mui/icons-material";
+import { useLocation as b, useNavigate as x } from "react-router";
+import { useDebouncedState as S } from "@react-hookz/web";
 //#region src/components/dataaccess/AccessRequirementDashboard.tsx
-var S = "nameOrID", C = "relatedProjectId", w = "reviewerId", T = "type";
-function E(E) {
-	let { onCreateNewAccessRequirementClicked: D } = E, O = y(), k = c(() => new URLSearchParams(O.search), [O.search]), A = b(), [j, M] = x(k.get("nameOrID") ?? "", 500), [N, P] = x(k.get("relatedProjectId") ?? void 0, 500), [F, I] = x(k.get("reviewerId") ?? void 0, 500), [L, R] = l(k.get("type") ?? void 0), z = c(() => !!(N && !e.exec(N)), [N]), [B, V] = l(!1);
+var C = "nameOrID", w = "relatedProjectId", T = "reviewerId", E = "type";
+function D(D) {
+	let { onCreateNewAccessRequirementClicked: O } = D, k = b(), A = c(() => new URLSearchParams(k.search), [k.search]), j = x(), [M, N] = S(A.get("nameOrID") ?? "", 500), [P, F] = S(A.get("relatedProjectId") ?? void 0, 500), [I, L] = S(A.get("reviewerId") ?? void 0, 500), [R, z] = l(A.get("type") ?? void 0), B = c(() => !!(P && !e.exec(P)), [P]), [V, H] = l(!1);
 	s(() => {
 		let e = u({
-			[S]: j,
-			[C]: N,
-			[w]: F,
-			[T]: L
+			[C]: M,
+			[w]: P,
+			[T]: I,
+			[E]: R
 		}, (e) => e === void 0 || e === ""), t = new URLSearchParams(e);
-		A({
-			pathname: O.pathname,
+		j({
+			pathname: k.pathname,
 			search: t.toString()
 		}, { replace: !0 });
 	}, [
+		M,
+		P,
+		I,
+		R,
 		j,
-		N,
-		F,
-		L,
-		A,
-		O.pathname
+		k.pathname
 	]);
-	let H = o((e) => {
-		I(e || void 0);
-	}, [I]);
+	let U = o((e) => {
+		L(e || void 0);
+	}, [L]);
 	return /* @__PURE__ */ g("div", {
 		className: "AccessRequirementDashboard",
-		children: [
-			/* @__PURE__ */ h(i, {
+		children: /* @__PURE__ */ _(h, { children: [
+			/* @__PURE__ */ g(i, {
 				configuration: {
 					initialScope: n.ALL_PROJECTS,
 					initialContainer: null,
 					selectMultiple: !1,
-					selectableTypes: [_.project],
+					selectableTypes: [v.project],
 					treeOnly: !0
 				},
-				show: B,
+				show: V,
 				onCancel: () => {
-					V(!1);
+					H(!1);
 				},
 				title: "Select Project to Filter Access Requirements",
 				promptCopy: "Select a project to find Access Requirements that are associated with that project. Access Requirements will be found if the Access Requirement is applied to the project, or if it is applied to any item inside the project.",
 				onConfirm: (e) => {
-					P(e[0].targetId), V(!1);
+					F(e[0].targetId), H(!1);
 				},
 				confirmButtonCopy: "Select"
 			}),
-			/* @__PURE__ */ g(d, {
+			/* @__PURE__ */ _(d, {
 				component: "form",
 				container: !0,
 				spacing: 2,
 				className: "InputPanel",
 				children: [
-					/* @__PURE__ */ h(d, {
+					/* @__PURE__ */ g(d, {
 						size: {
 							xs: 12,
 							md: 4
 						},
-						children: /* @__PURE__ */ h(p, {
+						children: /* @__PURE__ */ g(p, {
 							label: "Filter by Access Requirement Name or ID",
 							id: "ar-name-filter",
 							type: "text",
 							fullWidth: !0,
 							placeholder: "Search for an Access Requirement Name or ID",
 							onChange: (e) => {
-								M(e.target.value);
+								N(e.target.value);
 							},
-							slotProps: { input: { endAdornment: /* @__PURE__ */ h(f, {
+							slotProps: { input: { endAdornment: /* @__PURE__ */ g(f, {
 								position: "end",
-								children: /* @__PURE__ */ h(v, {})
+								children: /* @__PURE__ */ g(y, {})
 							}) } }
 						})
 					}),
-					/* @__PURE__ */ g(d, {
+					/* @__PURE__ */ _(d, {
 						size: {
 							xs: 12,
 							md: 4
@@ -96,58 +96,58 @@ function E(E) {
 							gap: "5px",
 							alignItems: "stretch"
 						},
-						children: [/* @__PURE__ */ h(p, {
+						children: [/* @__PURE__ */ g(p, {
 							label: "Filter by Project",
 							id: "project-id-filter",
 							type: "text",
 							fullWidth: !0,
 							placeholder: "Enter a project SynID",
-							error: z,
-							helperText: z ? "Value must be a Synapse ID, e.g. \"syn1234\"" : void 0,
+							error: B,
+							helperText: B ? "Value must be a Synapse ID, e.g. \"syn1234\"" : void 0,
 							onChange: (e) => {
 								let t = e.target.value;
-								P(t === "" ? void 0 : t);
+								F(t === "" ? void 0 : t);
 							}
-						}), /* @__PURE__ */ h(r, {
+						}), /* @__PURE__ */ g(r, {
 							variant: "outlined",
 							color: "primary",
 							onClick: () => {
-								V(!0);
+								H(!0);
 							},
 							children: "Browse"
 						})]
 					}),
-					/* @__PURE__ */ g(d, {
+					/* @__PURE__ */ _(d, {
 						size: {
 							xs: 12,
 							md: 4
 						},
-						children: [/* @__PURE__ */ h(m, {
+						children: [/* @__PURE__ */ g(m, {
 							component: "label",
 							variant: "smallText2",
 							htmlFor: "reviewer-filter",
 							children: "Filter by Reviewer"
-						}), /* @__PURE__ */ h(t, {
+						}), /* @__PURE__ */ g(t, {
 							inputId: "reviewer-filter",
 							placeholder: "Search for a username or team name",
-							defaultValue: F,
-							onChange: H
+							defaultValue: I,
+							onChange: U
 						})]
 					})
 				]
 			}),
-			/* @__PURE__ */ h(a, {
-				nameOrID: j,
-				relatedProjectId: N,
-				reviewerId: F,
-				onCreateNewAccessRequirementClicked: D,
-				typeFilter: L,
-				onTypeFilterChange: R
+			/* @__PURE__ */ g(a, {
+				nameOrID: M,
+				relatedProjectId: P,
+				reviewerId: I,
+				onCreateNewAccessRequirementClicked: O,
+				typeFilter: R,
+				onTypeFilterChange: z
 			})
-		]
+		] })
 	});
 }
 //#endregion
-export { S as AR_NAME_OR_ID_SEARCH_PARAM_KEY, T as AR_TYPE_SEARCH_PARAM_KEY, E as AccessRequirementDashboard, E as default, C as RELATED_PROJECT_ID_SEARCH_PARAM_KEY, w as REVIEWER_ID_SEARCH_PARAM_KEY };
+export { C as AR_NAME_OR_ID_SEARCH_PARAM_KEY, E as AR_TYPE_SEARCH_PARAM_KEY, D as AccessRequirementDashboard, D as default, w as RELATED_PROJECT_ID_SEARCH_PARAM_KEY, T as REVIEWER_ID_SEARCH_PARAM_KEY };
 
 //# sourceMappingURL=AccessRequirementDashboard.js.map

package/dist/components/dataaccess/AccessRequirementDashboard.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccessRequirementDashboard.js","names":[],"sources":["../../../src/components/dataaccess/AccessRequirementDashboard.tsx"],"sourcesContent":["import { InputSizedButton } from '@/components/styled/InputSizedButton'\nimport { SYNAPSE_ENTITY_ID_REGEX } from '@/utils/functions/RegularExpressions'\nimport { SearchOutlined } from '@mui/icons-material'\nimport { Grid, InputAdornment, TextField, Typography } from '@mui/material'\nimport { useDebouncedState } from '@react-hookz/web'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport { omitBy } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useLocation, useNavigate } from 'react-router'\nimport { EntityFinderModal } from '../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../EntityFinder/tree/EntityTree'\nimport UserSearchBox from '../UserSearchBox/UserSearchBox'\nimport { AccessRequirementTable } from './AccessRequirementTable'\n\nexport const AR_NAME_OR_ID_SEARCH_PARAM_KEY = 'nameOrID'\nexport const RELATED_PROJECT_ID_SEARCH_PARAM_KEY = 'relatedProjectId'\nexport const REVIEWER_ID_SEARCH_PARAM_KEY = 'reviewerId'\nexport const AR_TYPE_SEARCH_PARAM_KEY = 'type'\n\nexport type AccessRequirementDashboardProps = {\n  onCreateNewAccessRequirementClicked?: () => void\n}\n\nexport function AccessRequirementDashboard(\n  props: AccessRequirementDashboardProps,\n) {\n  // Amount of time to wait after an input value changes before sending a new request\n  const INPUT_CHANGE_DEBOUNCE_DELAY_MS = 500\n\n  const { onCreateNewAccessRequirementClicked } = props\n\n  const location = useLocation()\n  const urlSearchParams = useMemo(\n    () => new URLSearchParams(location.search),\n    [location.search],\n  )\n  const navigate = useNavigate()\n\n  /**\n   * When an input changes, update the props passed to the table and update the search params.\n   *\n   * Debounced to prevent firing many queries while the user is entering text.\n   */\n  const [nameOrID, setNameOrID] = useDebouncedState<string>(\n    urlSearchParams.get(AR_NAME_OR_ID_SEARCH_PARAM_KEY) ?? '',\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n  const [relatedProjectId, setRelatedProjectId] = useDebouncedState<\n    string | undefined\n  >(\n    urlSearchParams.get(RELATED_PROJECT_ID_SEARCH_PARAM_KEY) ?? undefined,\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n  const [reviewerId, setReviewerId] = useDebouncedState<string | undefined>(\n    urlSearchParams.get(REVIEWER_ID_SEARCH_PARAM_KEY) ?? undefined,\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n  const [typeFilter, setTypeFilter] = useState<string | undefined>(\n    urlSearchParams.get(AR_TYPE_SEARCH_PARAM_KEY) ?? undefined,\n  )\n\n  const projectFilterFieldIsError: boolean = useMemo(\n    () =>\n      !!(relatedProjectId && !SYNAPSE_ENTITY_ID_REGEX.exec(relatedProjectId)),\n    [relatedProjectId],\n  )\n\n  const [showEntityFinder, setShowEntityFinder] = useState(false)\n\n  // Update the QueryParams when the filter state changes\n  useEffect(() => {\n    // Don't include undefined/empty parameters\n    const params = omitBy(\n      {\n        // Sync the search params state with the debounced props\n        [AR_NAME_OR_ID_SEARCH_PARAM_KEY]: nameOrID,\n        [RELATED_PROJECT_ID_SEARCH_PARAM_KEY]: relatedProjectId,\n        [REVIEWER_ID_SEARCH_PARAM_KEY]: reviewerId,\n        [AR_TYPE_SEARCH_PARAM_KEY]: typeFilter, // typeFilter state is not debounced\n      },\n      item => item === undefined || item === '',\n    ) as Record<string, string>\n\n    // Add the new params to the URL\n    // Replace history because intuitively, the user has not navigated to a new page\n    const paramsObject = new URLSearchParams(params)\n    navigate(\n      {\n        pathname: location.pathname,\n        search: paramsObject.toString(),\n      },\n      { replace: true },\n    )\n  }, [\n    nameOrID,\n    relatedProjectId,\n    reviewerId,\n    typeFilter,\n    navigate,\n    location.pathname,\n  ])\n\n  const onReviewerChange = useCallback(\n    (selected: string | null) => {\n      if (selected) {\n        setReviewerId(selected)\n      } else {\n        setReviewerId(undefined)\n      }\n    },\n    [setReviewerId],\n  )\n\n  return (\n    <div className=\"AccessRequirementDashboard\">\n      <EntityFinderModal\n        configuration={{\n          initialScope: FinderScope.ALL_PROJECTS,\n          initialContainer: null,\n          selectMultiple: false,\n          selectableTypes: [EntityType.project],\n          treeOnly: true,\n        }}\n        show={showEntityFinder}\n        onCancel={() => {\n          setShowEntityFinder(false)\n        }}\n        title={'Select Project to Filter Access Requirements'}\n        promptCopy={\n          'Select a project to find Access Requirements that are associated with that project. Access Requirements will be found if the Access Requirement is applied to the project, or if it is applied to any item inside the project.'\n        }\n        onConfirm={selected => {\n          setRelatedProjectId(selected[0].targetId)\n          setShowEntityFinder(false)\n        }}\n        confirmButtonCopy={'Select'}\n      />\n      <Grid component={'form'} container spacing={2} className=\"InputPanel\">\n        <Grid size={{ xs: 12, md: 4 }}>\n          <TextField\n            label=\"Filter by Access Requirement Name or ID\"\n            id=\"ar-name-filter\"\n            type=\"text\"\n            fullWidth\n            placeholder=\"Search for an Access Requirement Name or ID\"\n            onChange={e => {\n              setNameOrID(e.target.value)\n            }}\n            slotProps={{\n              input: {\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    <SearchOutlined />\n                  </InputAdornment>\n                ),\n              },\n            }}\n          />\n        </Grid>\n        <Grid\n          size={{ xs: 12, md: 4 }}\n          sx={{\n            display: 'flex',\n            gap: '5px',\n            alignItems: 'stretch',\n          }}\n        >\n          <TextField\n            label=\"Filter by Project\"\n            id=\"project-id-filter\"\n            type=\"text\"\n            fullWidth\n            placeholder=\"Enter a project SynID\"\n            error={projectFilterFieldIsError}\n            helperText={\n              projectFilterFieldIsError\n                ? 'Value must be a Synapse ID, e.g. \"syn1234\"'\n                : undefined\n            }\n            onChange={e => {\n              const newValue = e.target.value\n              if (newValue === '') {\n                setRelatedProjectId(undefined)\n              } else {\n                setRelatedProjectId(newValue)\n              }\n            }}\n          />\n          <InputSizedButton\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => {\n              setShowEntityFinder(true)\n            }}\n          >\n            Browse\n          </InputSizedButton>\n        </Grid>\n        <Grid size={{ xs: 12, md: 4 }}>\n          <Typography\n            component=\"label\"\n            variant=\"smallText2\"\n            htmlFor=\"reviewer-filter\"\n          >\n            Filter by Reviewer\n          </Typography>\n          <UserSearchBox\n            inputId=\"reviewer-filter\"\n            placeholder=\"Search for a username or team name\"\n            defaultValue={reviewerId}\n            onChange={onReviewerChange}\n          />\n        </Grid>\n      </Grid>\n      <AccessRequirementTable\n        nameOrID={nameOrID}\n        relatedProjectId={relatedProjectId}\n        reviewerId={reviewerId}\n        onCreateNewAccessRequirementClicked={\n          onCreateNewAccessRequirementClicked\n        }\n        typeFilter={typeFilter}\n        onTypeFilterChange={setTypeFilter}\n      />\n    </div>\n  )\n}\n\nexport default AccessRequirementDashboard\n"],"mappings":"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"}
+{"version":3,"file":"AccessRequirementDashboard.js","names":[],"sources":["../../../src/components/dataaccess/AccessRequirementDashboard.tsx"],"sourcesContent":["import { InputSizedButton } from '@/components/styled/InputSizedButton'\nimport { SYNAPSE_ENTITY_ID_REGEX } from '@/utils/functions/RegularExpressions'\nimport { SearchOutlined } from '@mui/icons-material'\nimport { Grid, InputAdornment, TextField, Typography } from '@mui/material'\nimport { useDebouncedState } from '@react-hookz/web'\nimport { EntityType } from '@sage-bionetworks/synapse-client'\nimport { omitBy } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useLocation, useNavigate } from 'react-router'\nimport { EntityFinderModal } from '../EntityFinder/EntityFinderModal'\nimport { FinderScope } from '../EntityFinder/tree/EntityTree'\nimport UserSearchBox from '../UserSearchBox/UserSearchBox'\nimport { AccessRequirementTable } from './AccessRequirementTable'\n\nexport const AR_NAME_OR_ID_SEARCH_PARAM_KEY = 'nameOrID'\nexport const RELATED_PROJECT_ID_SEARCH_PARAM_KEY = 'relatedProjectId'\nexport const REVIEWER_ID_SEARCH_PARAM_KEY = 'reviewerId'\nexport const AR_TYPE_SEARCH_PARAM_KEY = 'type'\n\nexport type AccessRequirementDashboardProps = {\n  onCreateNewAccessRequirementClicked?: () => void\n}\n\nexport function AccessRequirementDashboard(\n  props: AccessRequirementDashboardProps,\n) {\n  // Amount of time to wait after an input value changes before sending a new request\n  const INPUT_CHANGE_DEBOUNCE_DELAY_MS = 500\n\n  const { onCreateNewAccessRequirementClicked } = props\n\n  const location = useLocation()\n  const urlSearchParams = useMemo(\n    () => new URLSearchParams(location.search),\n    [location.search],\n  )\n  const navigate = useNavigate()\n\n  /**\n   * When an input changes, update the props passed to the table and update the search params.\n   *\n   * Debounced to prevent firing many queries while the user is entering text.\n   */\n  const [nameOrID, setNameOrID] = useDebouncedState<string>(\n    urlSearchParams.get(AR_NAME_OR_ID_SEARCH_PARAM_KEY) ?? '',\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n  const [relatedProjectId, setRelatedProjectId] = useDebouncedState<\n    string | undefined\n  >(\n    urlSearchParams.get(RELATED_PROJECT_ID_SEARCH_PARAM_KEY) ?? undefined,\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n  const [reviewerId, setReviewerId] = useDebouncedState<string | undefined>(\n    urlSearchParams.get(REVIEWER_ID_SEARCH_PARAM_KEY) ?? undefined,\n    INPUT_CHANGE_DEBOUNCE_DELAY_MS,\n  )\n  const [typeFilter, setTypeFilter] = useState<string | undefined>(\n    urlSearchParams.get(AR_TYPE_SEARCH_PARAM_KEY) ?? undefined,\n  )\n\n  const projectFilterFieldIsError: boolean = useMemo(\n    () =>\n      !!(relatedProjectId && !SYNAPSE_ENTITY_ID_REGEX.exec(relatedProjectId)),\n    [relatedProjectId],\n  )\n\n  const [showEntityFinder, setShowEntityFinder] = useState(false)\n\n  // Update the QueryParams when the filter state changes\n  useEffect(() => {\n    // Don't include undefined/empty parameters\n    const params = omitBy(\n      {\n        // Sync the search params state with the debounced props\n        [AR_NAME_OR_ID_SEARCH_PARAM_KEY]: nameOrID,\n        [RELATED_PROJECT_ID_SEARCH_PARAM_KEY]: relatedProjectId,\n        [REVIEWER_ID_SEARCH_PARAM_KEY]: reviewerId,\n        [AR_TYPE_SEARCH_PARAM_KEY]: typeFilter, // typeFilter state is not debounced\n      },\n      item => item === undefined || item === '',\n    ) as Record<string, string>\n\n    // Add the new params to the URL\n    // Replace history because intuitively, the user has not navigated to a new page\n    const paramsObject = new URLSearchParams(params)\n    navigate(\n      {\n        pathname: location.pathname,\n        search: paramsObject.toString(),\n      },\n      { replace: true },\n    )\n  }, [\n    nameOrID,\n    relatedProjectId,\n    reviewerId,\n    typeFilter,\n    navigate,\n    location.pathname,\n  ])\n\n  const onReviewerChange = useCallback(\n    (selected: string | null) => {\n      if (selected) {\n        setReviewerId(selected)\n      } else {\n        setReviewerId(undefined)\n      }\n    },\n    [setReviewerId],\n  )\n\n  const accessRequirementsPanel = (\n    <>\n      <EntityFinderModal\n        configuration={{\n          initialScope: FinderScope.ALL_PROJECTS,\n          initialContainer: null,\n          selectMultiple: false,\n          selectableTypes: [EntityType.project],\n          treeOnly: true,\n        }}\n        show={showEntityFinder}\n        onCancel={() => {\n          setShowEntityFinder(false)\n        }}\n        title={'Select Project to Filter Access Requirements'}\n        promptCopy={\n          'Select a project to find Access Requirements that are associated with that project. Access Requirements will be found if the Access Requirement is applied to the project, or if it is applied to any item inside the project.'\n        }\n        onConfirm={selected => {\n          setRelatedProjectId(selected[0].targetId)\n          setShowEntityFinder(false)\n        }}\n        confirmButtonCopy={'Select'}\n      />\n      <Grid component={'form'} container spacing={2} className=\"InputPanel\">\n        <Grid size={{ xs: 12, md: 4 }}>\n          <TextField\n            label=\"Filter by Access Requirement Name or ID\"\n            id=\"ar-name-filter\"\n            type=\"text\"\n            fullWidth\n            placeholder=\"Search for an Access Requirement Name or ID\"\n            onChange={e => {\n              setNameOrID(e.target.value)\n            }}\n            slotProps={{\n              input: {\n                endAdornment: (\n                  <InputAdornment position=\"end\">\n                    <SearchOutlined />\n                  </InputAdornment>\n                ),\n              },\n            }}\n          />\n        </Grid>\n        <Grid\n          size={{ xs: 12, md: 4 }}\n          sx={{\n            display: 'flex',\n            gap: '5px',\n            alignItems: 'stretch',\n          }}\n        >\n          <TextField\n            label=\"Filter by Project\"\n            id=\"project-id-filter\"\n            type=\"text\"\n            fullWidth\n            placeholder=\"Enter a project SynID\"\n            error={projectFilterFieldIsError}\n            helperText={\n              projectFilterFieldIsError\n                ? 'Value must be a Synapse ID, e.g. \"syn1234\"'\n                : undefined\n            }\n            onChange={e => {\n              const newValue = e.target.value\n              if (newValue === '') {\n                setRelatedProjectId(undefined)\n              } else {\n                setRelatedProjectId(newValue)\n              }\n            }}\n          />\n          <InputSizedButton\n            variant=\"outlined\"\n            color=\"primary\"\n            onClick={() => {\n              setShowEntityFinder(true)\n            }}\n          >\n            Browse\n          </InputSizedButton>\n        </Grid>\n        <Grid size={{ xs: 12, md: 4 }}>\n          <Typography\n            component=\"label\"\n            variant=\"smallText2\"\n            htmlFor=\"reviewer-filter\"\n          >\n            Filter by Reviewer\n          </Typography>\n          <UserSearchBox\n            inputId=\"reviewer-filter\"\n            placeholder=\"Search for a username or team name\"\n            defaultValue={reviewerId}\n            onChange={onReviewerChange}\n          />\n        </Grid>\n      </Grid>\n      <AccessRequirementTable\n        nameOrID={nameOrID}\n        relatedProjectId={relatedProjectId}\n        reviewerId={reviewerId}\n        onCreateNewAccessRequirementClicked={\n          onCreateNewAccessRequirementClicked\n        }\n        typeFilter={typeFilter}\n        onTypeFilterChange={setTypeFilter}\n      />\n    </>\n  )\n\n  return (\n    <div className=\"AccessRequirementDashboard\">{accessRequirementsPanel}</div>\n  )\n}\n\nexport default AccessRequirementDashboard\n"],"mappings":"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"}

package/dist/components/dataaccess/EDucTemplateTable.d.ts

@@ -0,0 +1,3 @@
+export declare function EDucTemplateTable(): import("react/jsx-runtime").JSX.Element;
+export default EDucTemplateTable;
+//# sourceMappingURL=EDucTemplateTable.d.ts.map

package/dist/components/dataaccess/EDucTemplateTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EDucTemplateTable.d.ts","sourceRoot":"","sources":["../../../src/components/dataaccess/EDucTemplateTable.tsx"],"names":[],"mappings":"AAiKA,wBAAgB,iBAAiB,4CAuEhC;AAED,eAAe,iBAAiB,CAAA"}