synapse-react-client 4.0.35 → 4.0.37

package/dist/components/SynapseTable/usePrefetchTableData.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrefetchTableData.js","names":[],"sources":["../../../src/components/SynapseTable/usePrefetchTableData.ts"],"sourcesContent":["import {\n  useGetEntity,\n  useGetEntityHeaders,\n  useGetFileBatch,\n  useGetRestrictionInformationBatch,\n  useGetUserGroupHeaders,\n} from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils'\nimport { getFieldIndex, getTypeIndices } from '@/utils/functions/queryUtils'\nimport { goToPage as transformQueryToGoToPage } from '@/utils/hooks/useImmutableTableQuery/TableQueryReducerActions'\nimport {\n  ColumnTypeEnum,\n  FileHandleAssociateType,\n  FileHandleAssociation,\n  QueryBundleRequest,\n  ReferenceList,\n  RestrictableObjectType,\n  RowSet,\n  Table,\n} from '@sage-bionetworks/synapse-types'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { cloneDeep } from 'lodash-es'\nimport { useCallback, useMemo } from 'react'\nimport { useQueryContext } from '../QueryContext'\nimport { getTableQueryUseQueryOptions } from '../QueryWrapper/TableQueryUseQueryOptions'\nimport { useGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport {\n  isEntityViewOrDatasetOrCollection,\n  isFileViewOrDataset,\n} from './SynapseTableUtils'\n\nfunction usePrefetchFileHandleData(rowSet: RowSet) {\n  const { entityId, versionNumber } = useQueryContext()\n\n  const { data: entity } = useGetEntity<Table>(entityId, versionNumber)\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  const fileHandleIdColumnIndices = getTypeIndices(\n    ColumnTypeEnum.FILEHANDLEID,\n    queryMetadata?.selectColumns,\n  )\n\n  let fileHandlesToPrefetch: FileHandleAssociation[] = []\n\n  // Now add all IDs from the entity ID columns\n  if (entity && rowSet && queryMetadata && queryMetadata.selectColumns) {\n    fileHandlesToPrefetch = rowSet.rows.reduce(\n      (prev: FileHandleAssociation[], curr) => {\n        fileHandleIdColumnIndices.forEach(index => {\n          const value = curr.values[index]\n          if (value) {\n            const selectColumn = queryMetadata?.selectColumns![index]\n            if (\n              isFileViewOrDataset(entity) &&\n              selectColumn.name === 'dataFileHandleId'\n            ) {\n              // The association is the entity\n              prev.push({\n                fileHandleId: value,\n                associateObjectId: String(curr.rowId),\n                associateObjectType: FileHandleAssociateType.FileEntity,\n              })\n            } else {\n              // The association is the table entity\n              prev.push({\n                fileHandleId: value,\n                associateObjectId: entity.id!,\n                associateObjectType: FileHandleAssociateType.TableEntity,\n              })\n            }\n          }\n        })\n        return prev\n      },\n\n      fileHandlesToPrefetch,\n    )\n  }\n\n  return useGetFileBatch(\n    {\n      requestedFiles: fileHandlesToPrefetch,\n      includeFileHandles: true,\n      includePreSignedURLs: false,\n      includePreviewPreSignedURLs: false,\n    },\n    {\n      enabled: fileHandlesToPrefetch.length > 0,\n    },\n  )\n}\n\nfunction useGetEntitiesInTable(rowSet: RowSet) {\n  const { entityId, versionNumber } = useQueryContext()\n  const { data: entity } = useGetEntity<Table>(entityId, versionNumber)\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  let entitiesInTable: ReferenceList = []\n\n  // If this is a file view/dataset, collect all the row IDs; they correspond to entities that we'll end up fetching\n  if (entity && isEntityViewOrDatasetOrCollection(entity)) {\n    entitiesInTable = rowSet.rows.reduce((prev: ReferenceList, curr) => {\n      const { rowId, versionNumber } = curr\n      if (rowId) {\n        prev.push({\n          targetId: `syn${rowId}`,\n          targetVersionNumber: versionNumber,\n        })\n      }\n      return prev\n    }, entitiesInTable)\n  }\n\n  let entityIdColumnIndices = getTypeIndices(\n    ColumnTypeEnum.ENTITYID,\n    queryMetadata?.selectColumns,\n  )\n\n  if (entity && isEntityViewOrDatasetOrCollection(entity)) {\n    // If this is a view/dataset, we don't need to fetch the entities in the entity ID column\n    // Collecting the row IDs in the last step was sufficient\n    const idColumnIndex = getFieldIndex('id', queryMetadata)\n    entityIdColumnIndices = entityIdColumnIndices.filter(\n      index => index !== idColumnIndex,\n    )\n  }\n\n  const entityIdListColumnIndices = getTypeIndices(\n    ColumnTypeEnum.ENTITYID_LIST,\n    queryMetadata?.selectColumns,\n  )\n\n  entitiesInTable = rowSet.rows.reduce((prev: ReferenceList, curr) => {\n    // Get all IDs from the entity ID columns\n    entityIdColumnIndices.forEach(index => {\n      const value = curr.values[index]\n      if (\n        value &&\n        !prev.find(e => e.targetId === value && e.targetVersionNumber == null)\n      ) {\n        prev.push({ targetId: value })\n      }\n    })\n    // Get all IDs from the entity ID list columns\n    entityIdListColumnIndices.forEach(index => {\n      const value = curr.values[index]\n      if (value) {\n        const ids = JSON.parse(value) as string[]\n        ids.forEach(id => {\n          if (\n            id &&\n            !prev.find(e => e.targetId === id && e.targetVersionNumber == null)\n          ) {\n            prev.push({ targetId: id })\n          }\n        })\n      }\n    })\n\n    return prev\n  }, entitiesInTable)\n\n  return entitiesInTable\n}\n\nfunction usePrefetchEntityData(entitiesToPrefetch: ReferenceList) {\n  return useGetEntityHeaders(entitiesToPrefetch, {\n    enabled: entitiesToPrefetch.length > 0,\n  })\n}\n\nfunction usePrefetchUserGroupHeaderData(rowSet: RowSet) {\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  const userIdColumnIndices = getTypeIndices(\n    ColumnTypeEnum.USERID,\n    queryMetadata?.selectColumns,\n  )\n\n  const userIdListColumnIndices = getTypeIndices(\n    ColumnTypeEnum.USERID_LIST,\n    queryMetadata?.selectColumns,\n  )\n\n  const principalIdsToPrefetch: string[] = rowSet.rows.reduce(\n    (prev: string[], curr) => {\n      // Add all IDs from the USERID columns\n      userIdColumnIndices.forEach(index => {\n        const value = curr.values[index]\n        if (value && !prev.includes(value)) {\n          prev.push(value)\n        }\n      })\n      // Add all IDs from the USERID_LIST columns\n      userIdListColumnIndices.forEach(index => {\n        const value = curr.values[index]\n        if (value) {\n          const userIds = JSON.parse(value) as number[]\n          userIds.forEach(userId => {\n            if (!prev.includes(String(userId))) {\n              prev.push(String(userId))\n            }\n          })\n        }\n      })\n      return prev\n    },\n    [],\n  )\n\n  return useGetUserGroupHeaders(principalIdsToPrefetch, {\n    enabled: principalIdsToPrefetch.length > 0,\n  })\n}\n\nfunction usePrefetchEntityRestrictionData(entitiesToPrefetch: ReferenceList) {\n  // This information only varies by entity ID, not version number. The restriction information is the same for all versions.\n  const uniqueEntityIds = useMemo(() => {\n    const entityIds = entitiesToPrefetch.map(e => e.targetId)\n    // Dedupe the list in case there were duplicates, e.g. there were multiple versions of the same entity\n    return Array.from(new Set(entityIds))\n  }, [entitiesToPrefetch])\n\n  return useGetRestrictionInformationBatch(\n    {\n      objectIds: uniqueEntityIds,\n      restrictableObjectType: RestrictableObjectType.ENTITY,\n    },\n    {\n      enabled: entitiesToPrefetch.length > 0,\n    },\n  )\n}\n\n/**\n * Uses react-query to prefetch data rendered by SynapseTable. Each SynapseTableCell instance load data to render rich\n * content (e.g. entity data) for the cell based on its column type. This hook uses react-query hooks that will\n * fetch and de-normalize batch requests, so when the SynapseTableCell component renders, the data is already loaded\n * in the cache. In practice, this avoids Synapse backend throttling and 'waterfall' content rendering.\n */\nexport function usePrefetchResourcesInTable(rowSet: RowSet): {\n  dataHasBeenPrefetched: boolean\n} {\n  const entitiesToPrefetch = useGetEntitiesInTable(rowSet)\n  const { isLoading: isLoadingEntityData } =\n    usePrefetchEntityData(entitiesToPrefetch)\n  const { isLoading: isLoadingEntityRestrictionData } =\n    usePrefetchEntityRestrictionData(entitiesToPrefetch)\n  const { isLoading: isLoadingFileHandleData } =\n    usePrefetchFileHandleData(rowSet)\n  const { isLoading: isLoadingUserGroupData } =\n    usePrefetchUserGroupHeaderData(rowSet)\n\n  return {\n    dataHasBeenPrefetched:\n      !isLoadingEntityData &&\n      !isLoadingEntityRestrictionData &&\n      !isLoadingFileHandleData &&\n      !isLoadingUserGroupData,\n  }\n}\n\n/**\n * Uses react-query to prefetch an entire page of row data.\n *\n * @returns A function that will prefetch the data for a given page number.\n */\nexport function usePrefetchTableRows(): (pageNumber: number) => Promise<void> {\n  const { keyFactory, accessToken } = useSynapseContext()\n  const { currentQueryRequest, getRowDataQueryOptionsForPage } =\n    useQueryContext()\n  const queryClient = useQueryClient()\n\n  // locked column does not matter for row data\n  const lockedColumn = undefined\n  return useCallback(\n    (pageNumber: number) => {\n      let rowDataQueryOptions\n      if (getRowDataQueryOptionsForPage) {\n        // Use the context-provided factory (e.g. SearchQueryWrapper) to avoid calling\n        // the standard table query API with a synthetic entity ID.\n        rowDataQueryOptions = getRowDataQueryOptionsForPage(pageNumber)\n      } else {\n        // Standard table query path\n        const queryWithUpdatedPage = transformQueryToGoToPage(\n          { type: 'goToPage', pageNumber },\n          cloneDeep(currentQueryRequest) as QueryBundleRequest,\n        )\n        rowDataQueryOptions = getTableQueryUseQueryOptions(\n          queryWithUpdatedPage,\n          lockedColumn,\n          keyFactory,\n          accessToken,\n        ).rowDataQueryOptions\n      }\n\n      // Finally, prefetch the data\n      return queryClient.prefetchQuery(rowDataQueryOptions)\n    },\n    [\n      accessToken,\n      currentQueryRequest,\n      getRowDataQueryOptionsForPage,\n      keyFactory,\n      lockedColumn,\n      queryClient,\n    ],\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"usePrefetchTableData.js","names":[],"sources":["../../../src/components/SynapseTable/usePrefetchTableData.ts"],"sourcesContent":["import {\n  useGetEntity,\n  useGetEntityHeaders,\n  useGetFileBatch,\n  useGetRestrictionInformationBatch,\n  useGetUserGroupHeaders,\n} from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils'\nimport { getFieldIndex, getTypeIndices } from '@/utils/functions/queryUtils'\nimport { goToPage as transformQueryToGoToPage } from '@/utils/hooks/useImmutableTableQuery/TableQueryReducerActions'\nimport {\n  ColumnTypeEnum,\n  FileHandleAssociateType,\n  FileHandleAssociation,\n  QueryBundleRequest,\n  ReferenceList,\n  RestrictableObjectType,\n  RowSet,\n  Table,\n} from '@sage-bionetworks/synapse-types'\nimport { useQueryClient } from '@tanstack/react-query'\nimport { cloneDeep } from 'lodash-es'\nimport { useCallback, useMemo } from 'react'\nimport { useQueryContext } from '../QueryContext'\nimport { getTableQueryUseQueryOptions } from '../QueryWrapper/TableQueryUseQueryOptions'\nimport { useGetQueryMetadata } from '../QueryWrapper/useGetQueryMetadata'\nimport {\n  isEntityViewOrDatasetOrCollection,\n  isFileViewOrDataset,\n} from './SynapseTableUtils'\n\nfunction usePrefetchFileHandleData(rowSet: RowSet) {\n  const { entityId, versionNumber } = useQueryContext()\n\n  const { data: entity } = useGetEntity<Table>(entityId, versionNumber)\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  const fileHandleIdColumnIndices = getTypeIndices(\n    ColumnTypeEnum.FILEHANDLEID,\n    queryMetadata?.selectColumns,\n  )\n\n  let fileHandlesToPrefetch: FileHandleAssociation[] = []\n\n  // Now add all IDs from the entity ID columns\n  if (entity && rowSet && queryMetadata?.selectColumns) {\n    fileHandlesToPrefetch = rowSet.rows.reduce(\n      (prev: FileHandleAssociation[], curr) => {\n        fileHandleIdColumnIndices.forEach(index => {\n          const value = curr.values[index]\n          if (value) {\n            const selectColumn = queryMetadata?.selectColumns![index]\n            if (\n              isFileViewOrDataset(entity) &&\n              selectColumn.name === 'dataFileHandleId'\n            ) {\n              // The association is the entity\n              prev.push({\n                fileHandleId: value,\n                associateObjectId: String(curr.rowId),\n                associateObjectType: FileHandleAssociateType.FileEntity,\n              })\n            } else {\n              // The association is the table entity\n              prev.push({\n                fileHandleId: value,\n                associateObjectId: entity.id!,\n                associateObjectType: FileHandleAssociateType.TableEntity,\n              })\n            }\n          }\n        })\n        return prev\n      },\n\n      fileHandlesToPrefetch,\n    )\n  }\n\n  return useGetFileBatch(\n    {\n      requestedFiles: fileHandlesToPrefetch,\n      includeFileHandles: true,\n      includePreSignedURLs: false,\n      includePreviewPreSignedURLs: false,\n    },\n    {\n      enabled: fileHandlesToPrefetch.length > 0,\n    },\n  )\n}\n\nfunction useGetEntitiesInTable(rowSet: RowSet) {\n  const { entityId, versionNumber } = useQueryContext()\n  const { data: entity } = useGetEntity<Table>(entityId, versionNumber)\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  let entitiesInTable: ReferenceList = []\n\n  // If this is a file view/dataset, collect all the row IDs; they correspond to entities that we'll end up fetching\n  if (entity && isEntityViewOrDatasetOrCollection(entity)) {\n    entitiesInTable = rowSet.rows.reduce((prev: ReferenceList, curr) => {\n      const { rowId, versionNumber } = curr\n      if (rowId) {\n        prev.push({\n          targetId: `syn${rowId}`,\n          targetVersionNumber: versionNumber,\n        })\n      }\n      return prev\n    }, entitiesInTable)\n  }\n\n  let entityIdColumnIndices = getTypeIndices(\n    ColumnTypeEnum.ENTITYID,\n    queryMetadata?.selectColumns,\n  )\n\n  if (entity && isEntityViewOrDatasetOrCollection(entity)) {\n    // If this is a view/dataset, we don't need to fetch the entities in the entity ID column\n    // Collecting the row IDs in the last step was sufficient\n    const idColumnIndex = getFieldIndex('id', queryMetadata)\n    entityIdColumnIndices = entityIdColumnIndices.filter(\n      index => index !== idColumnIndex,\n    )\n  }\n\n  const entityIdListColumnIndices = getTypeIndices(\n    ColumnTypeEnum.ENTITYID_LIST,\n    queryMetadata?.selectColumns,\n  )\n\n  entitiesInTable = rowSet.rows.reduce((prev: ReferenceList, curr) => {\n    // Get all IDs from the entity ID columns\n    entityIdColumnIndices.forEach(index => {\n      const value = curr.values[index]\n      if (\n        value &&\n        !prev.find(e => e.targetId === value && e.targetVersionNumber == null)\n      ) {\n        prev.push({ targetId: value })\n      }\n    })\n    // Get all IDs from the entity ID list columns\n    entityIdListColumnIndices.forEach(index => {\n      const value = curr.values[index]\n      if (value) {\n        const ids = JSON.parse(value) as string[]\n        ids.forEach(id => {\n          if (\n            id &&\n            !prev.find(e => e.targetId === id && e.targetVersionNumber == null)\n          ) {\n            prev.push({ targetId: id })\n          }\n        })\n      }\n    })\n\n    return prev\n  }, entitiesInTable)\n\n  return entitiesInTable\n}\n\nfunction usePrefetchEntityData(entitiesToPrefetch: ReferenceList) {\n  return useGetEntityHeaders(entitiesToPrefetch, {\n    enabled: entitiesToPrefetch.length > 0,\n  })\n}\n\nfunction usePrefetchUserGroupHeaderData(rowSet: RowSet) {\n  const { data: queryMetadata } = useGetQueryMetadata()\n\n  const userIdColumnIndices = getTypeIndices(\n    ColumnTypeEnum.USERID,\n    queryMetadata?.selectColumns,\n  )\n\n  const userIdListColumnIndices = getTypeIndices(\n    ColumnTypeEnum.USERID_LIST,\n    queryMetadata?.selectColumns,\n  )\n\n  const principalIdsToPrefetch: string[] = rowSet.rows.reduce(\n    (prev: string[], curr) => {\n      // Add all IDs from the USERID columns\n      userIdColumnIndices.forEach(index => {\n        const value = curr.values[index]\n        if (value && !prev.includes(value)) {\n          prev.push(value)\n        }\n      })\n      // Add all IDs from the USERID_LIST columns\n      userIdListColumnIndices.forEach(index => {\n        const value = curr.values[index]\n        if (value) {\n          const userIds = JSON.parse(value) as number[]\n          userIds.forEach(userId => {\n            if (!prev.includes(String(userId))) {\n              prev.push(String(userId))\n            }\n          })\n        }\n      })\n      return prev\n    },\n    [],\n  )\n\n  return useGetUserGroupHeaders(principalIdsToPrefetch, {\n    enabled: principalIdsToPrefetch.length > 0,\n  })\n}\n\nfunction usePrefetchEntityRestrictionData(entitiesToPrefetch: ReferenceList) {\n  // This information only varies by entity ID, not version number. The restriction information is the same for all versions.\n  const uniqueEntityIds = useMemo(() => {\n    const entityIds = entitiesToPrefetch.map(e => e.targetId)\n    // Dedupe the list in case there were duplicates, e.g. there were multiple versions of the same entity\n    return Array.from(new Set(entityIds))\n  }, [entitiesToPrefetch])\n\n  return useGetRestrictionInformationBatch(\n    {\n      objectIds: uniqueEntityIds,\n      restrictableObjectType: RestrictableObjectType.ENTITY,\n    },\n    {\n      enabled: entitiesToPrefetch.length > 0,\n    },\n  )\n}\n\n/**\n * Uses react-query to prefetch data rendered by SynapseTable. Each SynapseTableCell instance load data to render rich\n * content (e.g. entity data) for the cell based on its column type. This hook uses react-query hooks that will\n * fetch and de-normalize batch requests, so when the SynapseTableCell component renders, the data is already loaded\n * in the cache. In practice, this avoids Synapse backend throttling and 'waterfall' content rendering.\n */\nexport function usePrefetchResourcesInTable(rowSet: RowSet): {\n  dataHasBeenPrefetched: boolean\n} {\n  const entitiesToPrefetch = useGetEntitiesInTable(rowSet)\n  const { isLoading: isLoadingEntityData } =\n    usePrefetchEntityData(entitiesToPrefetch)\n  const { isLoading: isLoadingEntityRestrictionData } =\n    usePrefetchEntityRestrictionData(entitiesToPrefetch)\n  const { isLoading: isLoadingFileHandleData } =\n    usePrefetchFileHandleData(rowSet)\n  const { isLoading: isLoadingUserGroupData } =\n    usePrefetchUserGroupHeaderData(rowSet)\n\n  return {\n    dataHasBeenPrefetched:\n      !isLoadingEntityData &&\n      !isLoadingEntityRestrictionData &&\n      !isLoadingFileHandleData &&\n      !isLoadingUserGroupData,\n  }\n}\n\n/**\n * Uses react-query to prefetch an entire page of row data.\n *\n * @returns A function that will prefetch the data for a given page number.\n */\nexport function usePrefetchTableRows(): (pageNumber: number) => Promise<void> {\n  const { keyFactory, accessToken } = useSynapseContext()\n  const { currentQueryRequest, getRowDataQueryOptionsForPage } =\n    useQueryContext()\n  const queryClient = useQueryClient()\n\n  // locked column does not matter for row data\n  const lockedColumn = undefined\n  return useCallback(\n    (pageNumber: number) => {\n      let rowDataQueryOptions\n      if (getRowDataQueryOptionsForPage) {\n        // Use the context-provided factory (e.g. SearchQueryWrapper) to avoid calling\n        // the standard table query API with a synthetic entity ID.\n        rowDataQueryOptions = getRowDataQueryOptionsForPage(pageNumber)\n      } else {\n        // Standard table query path\n        const queryWithUpdatedPage = transformQueryToGoToPage(\n          { type: 'goToPage', pageNumber },\n          cloneDeep(currentQueryRequest) as QueryBundleRequest,\n        )\n        rowDataQueryOptions = getTableQueryUseQueryOptions(\n          queryWithUpdatedPage,\n          lockedColumn,\n          keyFactory,\n          accessToken,\n        ).rowDataQueryOptions\n      }\n\n      // Finally, prefetch the data\n      return queryClient.prefetchQuery(rowDataQueryOptions)\n    },\n    [\n      accessToken,\n      currentQueryRequest,\n      getRowDataQueryOptionsForPage,\n      keyFactory,\n      lockedColumn,\n      queryClient,\n    ],\n  )\n}\n"],"mappings":"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"}

package/dist/components/TableColumnSchemaEditor/TableColumnSchemaFormReducer.js

@@ -64,11 +64,11 @@ function m(e, t) {
 }
 function h(r, i) {
 	let { columnModelIndex: s, jsonSubColumnModelIndex: c, newColumnType: l } = r, u;
-	if (i && i[s]) u = i[s].jsonSubColumns && c !== void 0 ? a(i[s].jsonSubColumns[c]) : a(i[s]);
+	if (i?.[s]) u = i[s].jsonSubColumns && c !== void 0 ? a(i[s].jsonSubColumns[c]) : a(i[s]);
 	else throw Error("Cannot change column model type for a column that does not exist");
 	u.columnType = l, !t(l) && "maximumSize" in u && delete u.maximumSize, !e(l) && "maximumListLength" in u && delete u.maximumListLength, "enumValues" in u && delete u.enumValues, "defaultValue" in u && delete u.defaultValue;
 	let d = n(l, !!c);
-	"facetType" in u && (d === null || !d.includes(u.facetType)) && delete u.facetType, "jsonSubColumns" in u && l !== o.JSON && delete u.jsonSubColumns, i && i[s] && (i[s].jsonSubColumns && c !== void 0 ? i[s].jsonSubColumns[c] = u : i[s] = u);
+	"facetType" in u && (d === null || !d.includes(u.facetType)) && delete u.facetType, "jsonSubColumns" in u && l !== o.JSON && delete u.jsonSubColumns, i?.[s] && (i[s].jsonSubColumns && c !== void 0 ? i[s].jsonSubColumns[c] = u : i[s] = u);
 }
 function g(e) {
 	return c(e) ? e.map((e) => ({
@@ -89,11 +89,11 @@ function g(e) {
 }
 function _(e, t) {
 	let { columnModelIndex: n, jsonSubColumnModelIndex: r, value: i } = e;
-	t && t[n] && (t[n].jsonSubColumns && r !== void 0 ? t[n].jsonSubColumns[r] = i : t[n] = i);
+	t?.[n] && (t[n].jsonSubColumns && r !== void 0 ? t[n].jsonSubColumns[r] = i : t[n] = i);
 }
 function v(e, t) {
 	let { columnModelIndex: n, jsonSubColumnModelIndex: r } = e;
-	if (t && t[n]) if (t[n].jsonSubColumns && r !== void 0) {
+	if (t?.[n]) if (t[n].jsonSubColumns && r !== void 0) {
 		let e = t[n].jsonSubColumns[r];
 		t[n].jsonSubColumns[r] = {
 			...e,

package/dist/components/TableColumnSchemaEditor/TableColumnSchemaFormReducer.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableColumnSchemaFormReducer.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaFormReducer.ts"],"sourcesContent":["import { ColumnModel, ColumnTypeEnum } from '@sage-bionetworks/synapse-types'\nimport { atomWithReducer } from 'jotai/utils'\nimport { cloneDeep } from 'lodash-es'\nimport {\n  canHaveMaxListLength,\n  canHaveSize,\n  configureFacetsForType,\n  DEFAULT_STRING_SIZE,\n  findMatchingColumnModel,\n  isFormDataValueSmallerThanRecommendedValue,\n} from './TableColumnSchemaEditorUtils'\nimport {\n  ColumnModelFormData,\n  JsonSubColumnModelFormData,\n} from './Validators/ColumnModelValidator'\n\nexport function getIsAllSelected(formData: ColumnModelFormData[]) {\n  return (\n    formData.length > 0 &&\n    formData.every(\n      cm =>\n        // Is selected\n        cm.isSelected &&\n        // And all subcolumns are selected (true if there are no subcolumns)\n        (cm.jsonSubColumns ?? []).every(\n          (jsc: JsonSubColumnModelFormData) => jsc.isSelected,\n        ),\n    )\n  )\n}\n\nexport function getNumberOfSelectedItems(formData: ColumnModelFormData[]) {\n  return formData.reduce((acc, curr) => {\n    if (curr.isSelected) {\n      acc += 1\n    }\n    if (curr.jsonSubColumns) {\n      curr.jsonSubColumns.forEach((jsc: JsonSubColumnModelFormData) => {\n        if (jsc.isSelected) {\n          acc += 1\n        }\n      })\n    }\n    return acc\n  }, 0)\n}\n\nexport function getDefaultColumnModelFormData(): ColumnModelFormData {\n  return {\n    name: '',\n    columnType: ColumnTypeEnum.STRING,\n    maximumSize: DEFAULT_STRING_SIZE,\n    isOriginallyDefaultColumn: false,\n    isSelected: false,\n  }\n}\n\nexport function getDefaultJsonSubColumnFormData(): JsonSubColumnModelFormData {\n  return {\n    name: '',\n    jsonPath: '',\n    columnType: ColumnTypeEnum.STRING,\n    facetType: 'enumeration',\n    isSelected: false,\n  }\n}\n\n/**\n * In the provided array, move items up where the predicate evaluates to true\n * @param arr the array to reorder\n * @param predicate a function that returns true if the item should be moved up\n * @returns - a new array with the reordered items\n */\nfunction moveSelectedItemsUp<T = unknown>(\n  arr: T[],\n  predicate: (item: T) => boolean,\n) {\n  const newArr = [...arr]\n  newArr.forEach((item, index) => {\n    // For each item that should move up, swap it with the previous item\n    if (\n      // Cannot move index 0 up\n      index > 0 &&\n      // Only move if the predicate matches\n      predicate(item) &&\n      // If the previous item should also move, skip the swap\n      !predicate(newArr[index - 1])\n    ) {\n      // swap the items\n      const temp = newArr[index - 1]\n      newArr[index - 1] = newArr[index]\n      newArr[index] = temp\n    }\n  })\n  return newArr\n}\n\n/**\n * In the provided array, move items down where the predicate evaluates to true\n * @param arr the array to reorder\n * @param predicate a function that returns true if the item should be moved down\n * @returns - a new array with the reordered items\n */\nfunction moveSelectedItemsDown<T = unknown>(\n  arr: T[],\n  predicate: (item: T) => boolean,\n) {\n  const newArr = [...arr]\n  // Start from the end and work backwards, otherwise items could be moved more than once\n  for (let i = newArr.length - 1; i >= 0; i--) {\n    const item = newArr[i]\n    if (\n      // Cannot move the last item down\n      i < newArr.length - 1 &&\n      // Only move if the predicate matches\n      predicate(item) &&\n      // If the next item should also be moved, don't swap\n      !predicate(newArr[i + 1])\n    ) {\n      // swap the items\n      const temp = newArr[i]\n      newArr[i] = newArr[i + 1]\n      newArr[i + 1] = temp\n    }\n  }\n  return newArr\n}\n\ntype TableColumnSchemaFormReducerAction =\n  | {\n      type: 'setValue'\n      value: ColumnModelFormData[]\n    }\n  | {\n      type: 'toggleSelect'\n      columnModelIndex: number\n      jsonSubColumnModelIndex?: number\n    }\n  | { type: 'toggleSelectAll' }\n  | {\n      type: 'appendColumn'\n    }\n  | {\n      type: 'appendJsonSubColumn'\n      columnModelIndex: number\n    }\n  | {\n      type: 'setColumnModelValue'\n      columnModelIndex: number\n      jsonSubColumnModelIndex?: number\n      value: ColumnModelFormData | JsonSubColumnModelFormData\n    }\n  | {\n      type: 'changeColumnModelType'\n      newColumnType: ColumnTypeEnum\n      columnModelIndex: number\n      jsonSubColumnModelIndex?: number\n    }\n  | {\n      type: 'move'\n      from: {\n        columnModelIndex: number\n        jsonSubColumnModelIndex?: number\n      }\n      to: { columnModelIndex: number; jsonSubColumnModelIndex?: number }\n    }\n  | {\n      type: 'moveUp'\n    }\n  | {\n      type: 'moveDown'\n    }\n  | {\n      type: 'delete'\n    }\n  | {\n      type: 'updateColumnSizesToRecommendedValues'\n      annotationColumnModels: ColumnModel[]\n    }\n\nfunction updateColumnSizesToRecommendedValues(\n  action: {\n    type: 'updateColumnSizesToRecommendedValues'\n    annotationColumnModels: ColumnModel[]\n  },\n  prevState: ColumnModelFormData[],\n): ColumnModelFormData[] {\n  const { annotationColumnModels } = action\n  return prevState.map(cm => {\n    // Note: no need to check JSON subcolumns, because Views cannot have JSON data!\n\n    // Find the closest match between passed column model and current column model with name and type\n    const defaultAnnotationModel = annotationColumnModels\n      ? findMatchingColumnModel(annotationColumnModels, cm)\n      : undefined\n\n    if (defaultAnnotationModel == null) {\n      // No matching annotation column, so do not change it\n      return cm\n    }\n\n    if (\n      isFormDataValueSmallerThanRecommendedValue(\n        cm.maximumSize,\n        defaultAnnotationModel.maximumSize,\n      )\n    ) {\n      cm = { ...cm, maximumSize: defaultAnnotationModel.maximumSize }\n    }\n\n    if (\n      isFormDataValueSmallerThanRecommendedValue(\n        cm.maximumListLength,\n        defaultAnnotationModel.maximumListLength,\n      )\n    ) {\n      cm = {\n        ...cm,\n        maximumListLength: defaultAnnotationModel.maximumListLength,\n      }\n    }\n    return cm\n  })\n}\n\nfunction changeColumnModelType(\n  action: {\n    type: 'changeColumnModelType'\n    newColumnType: ColumnTypeEnum\n    columnModelIndex: number\n    jsonSubColumnModelIndex?: number\n  },\n  prevState: ColumnModelFormData[],\n) {\n  const { columnModelIndex, jsonSubColumnModelIndex, newColumnType } = action\n  let newColumnModelValue: ColumnModelFormData | JsonSubColumnModelFormData\n\n  // Create a copy of the selected column model\n  if (prevState && prevState[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      newColumnModelValue = cloneDeep(\n        prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex],\n      )\n    } else {\n      newColumnModelValue = cloneDeep(prevState[columnModelIndex])\n    }\n  } else {\n    throw new Error(\n      'Cannot change column model type for a column that does not exist',\n    )\n  }\n\n  // Update the column model. Remove fields that no longer make sense for the new column type\n  newColumnModelValue.columnType = newColumnType\n  if (!canHaveSize(newColumnType) && 'maximumSize' in newColumnModelValue) {\n    delete newColumnModelValue.maximumSize\n  }\n  if (\n    !canHaveMaxListLength(newColumnType) &&\n    'maximumListLength' in newColumnModelValue\n  ) {\n    delete newColumnModelValue.maximumListLength\n  }\n\n  // Remove default and restricted values unconditionally since they may not adhere to the new column type\n  if ('enumValues' in newColumnModelValue) {\n    delete newColumnModelValue.enumValues\n  }\n  if ('defaultValue' in newColumnModelValue) {\n    delete newColumnModelValue.defaultValue\n  }\n\n  const allowedFacetTypes = configureFacetsForType(\n    newColumnType,\n    !!jsonSubColumnModelIndex,\n  )\n  if (\n    'facetType' in newColumnModelValue &&\n    (allowedFacetTypes === null ||\n      !allowedFacetTypes.includes(newColumnModelValue.facetType))\n  ) {\n    delete newColumnModelValue.facetType\n  }\n\n  if (\n    'jsonSubColumns' in newColumnModelValue &&\n    newColumnType !== ColumnTypeEnum.JSON\n  ) {\n    delete newColumnModelValue.jsonSubColumns\n  }\n\n  // Replace the value\n  if (prevState && prevState[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex] =\n        newColumnModelValue as JsonSubColumnModelFormData\n    } else {\n      prevState[columnModelIndex] = newColumnModelValue as ColumnModelFormData\n    }\n  }\n}\n\nfunction toggleSelectAll(prevState: ColumnModelFormData[]) {\n  const allSelected = getIsAllSelected(prevState)\n  if (allSelected) {\n    return prevState.map(cm => ({\n      ...cm,\n      jsonSubColumns: cm.jsonSubColumns?.map(jsc => ({\n        ...jsc,\n        isSelected: false,\n      })),\n      isSelected: false,\n    }))\n  } else {\n    return prevState.map(cm => ({\n      ...cm,\n      jsonSubColumns: cm.jsonSubColumns?.map(jsc => ({\n        ...jsc,\n        isSelected: true,\n      })),\n      isSelected: true,\n    }))\n  }\n}\n\nfunction setColumnModelValue(\n  action: {\n    type: 'setColumnModelValue'\n    columnModelIndex: number\n    jsonSubColumnModelIndex?: number\n    value: ColumnModelFormData | JsonSubColumnModelFormData\n  },\n  prevState: ColumnModelFormData[],\n) {\n  const { columnModelIndex, jsonSubColumnModelIndex, value } = action\n  if (prevState && prevState[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex] =\n        value as JsonSubColumnModelFormData\n    } else {\n      prevState[columnModelIndex] = value as ColumnModelFormData\n    }\n  }\n}\n\nfunction toggleSelect(\n  action: {\n    type: 'toggleSelect'\n    columnModelIndex: number\n    jsonSubColumnModelIndex?: number\n  },\n  prevState: ColumnModelFormData[],\n) {\n  const { columnModelIndex, jsonSubColumnModelIndex } = action\n  if (prevState && prevState[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      const cm =\n        prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex]\n      prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex] = {\n        ...cm,\n        isSelected: !cm.isSelected,\n      }\n    } else {\n      const cm = prevState[columnModelIndex]\n      prevState[columnModelIndex] = { ...cm, isSelected: !cm.isSelected }\n    }\n  }\n}\n\nfunction deleteColumnModel(prevState: ColumnModelFormData[]) {\n  return prevState\n    .filter(cm => !cm.isSelected)\n    .map(cm => {\n      if (cm.jsonSubColumns) {\n        cm = {\n          ...cm,\n          jsonSubColumns: cm.jsonSubColumns.filter(\n            (jsc: JsonSubColumnModelFormData) => !jsc.isSelected,\n          ),\n        }\n      }\n      return cm\n    })\n}\n\n/**\n * Returns a new, shallowly-cloned array that moves the object from the `fromIndex` to the `toIndex`.\n * Derived from https://stackoverflow.com/a/6470794/9723359\n *\n * Returns the same array if the `fromIndex` and `toIndex` are the same.\n * @param arrayToReorder\n * @param fromIndex\n * @param toIndex\n */\nfunction moveElementInArray<T = unknown>(\n  arrayToReorder: Array<T>,\n  fromIndex: number,\n  toIndex: number,\n): Array<T> {\n  if (fromIndex == toIndex) {\n    return arrayToReorder\n  }\n  const newArray = [...arrayToReorder]\n  const elementToMove = newArray[fromIndex]\n  newArray.splice(fromIndex, 1)\n  newArray.splice(toIndex, 0, elementToMove)\n  return newArray\n}\n\n/**\n * Moves a column model or jsonSubColumn from the `from` index to the `to` index\n * @param action\n * @param prevState\n */\nfunction moveColumnModel(\n  action: {\n    type: 'move'\n    from: { columnModelIndex: number; jsonSubColumnModelIndex?: number }\n    to: { columnModelIndex: number; jsonSubColumnModelIndex?: number }\n  },\n  prevState: ColumnModelFormData[],\n): ColumnModelFormData[] {\n  const { from, to } = action\n  const arrayToReorder =\n    from.jsonSubColumnModelIndex !== undefined\n      ? prevState[from.columnModelIndex].jsonSubColumns!\n      : prevState\n\n  const fromIndex =\n    from.jsonSubColumnModelIndex !== undefined\n      ? from.jsonSubColumnModelIndex\n      : from.columnModelIndex\n\n  const toIndex =\n    to.jsonSubColumnModelIndex !== undefined\n      ? to.jsonSubColumnModelIndex\n      : to.columnModelIndex\n\n  // Move the element\n  const newArray = moveElementInArray<unknown>(\n    arrayToReorder,\n    fromIndex,\n    toIndex,\n  ) as ColumnModelFormData[] | JsonSubColumnModelFormData[]\n\n  if (from.jsonSubColumnModelIndex !== undefined) {\n    // If we moved a jsonSubColumn, update state to use the new, reordered array\n    prevState[from.columnModelIndex].jsonSubColumns =\n      newArray as JsonSubColumnModelFormData[]\n    return prevState\n  } else {\n    // Otherwise, return the new, reordered array of column models\n    return newArray as ColumnModelFormData[]\n  }\n}\n\nexport function reducer(\n  prevState: ColumnModelFormData[],\n  action: TableColumnSchemaFormReducerAction,\n) {\n  switch (action.type) {\n    case 'setValue':\n      prevState = action.value\n      break\n    case 'toggleSelectAll': {\n      prevState = toggleSelectAll(prevState)\n      break\n    }\n    case 'setColumnModelValue': {\n      setColumnModelValue(action, prevState)\n      break\n    }\n    case 'changeColumnModelType': {\n      changeColumnModelType(action, prevState)\n      break\n    }\n\n    case 'appendColumn':\n      prevState.push(getDefaultColumnModelFormData())\n      break\n    case 'appendJsonSubColumn': {\n      const { columnModelIndex } = action\n      prevState[columnModelIndex] = {\n        ...prevState[columnModelIndex],\n        jsonSubColumns: [\n          ...(prevState[columnModelIndex].jsonSubColumns ?? []),\n          getDefaultJsonSubColumnFormData(),\n        ],\n      }\n      break\n    }\n    case 'toggleSelect': {\n      toggleSelect(action, prevState)\n      break\n    }\n    case 'delete':\n      prevState = deleteColumnModel(prevState)\n      break\n    case 'move': {\n      prevState = moveColumnModel(action, prevState)\n      break\n    }\n    case 'moveUp':\n      prevState = moveSelectedItemsUp(prevState, cm => cm.isSelected)\n      prevState.forEach(cm => {\n        if (cm.jsonSubColumns) {\n          cm.jsonSubColumns = moveSelectedItemsUp(\n            cm.jsonSubColumns,\n            jsc => jsc.isSelected,\n          )\n        }\n      })\n      break\n    case 'moveDown':\n      prevState = moveSelectedItemsDown(prevState, cm => cm.isSelected)\n      prevState.forEach(cm => {\n        if (cm.jsonSubColumns) {\n          cm.jsonSubColumns = moveSelectedItemsDown(\n            cm.jsonSubColumns,\n            jsc => jsc.isSelected,\n          )\n        }\n      })\n      break\n    case 'updateColumnSizesToRecommendedValues':\n      prevState = updateColumnSizesToRecommendedValues(action, prevState)\n      break\n    default:\n      throw new Error(`Unexpected action`, action)\n  }\n  return [...prevState]\n}\n\nexport const tableColumnSchemaFormDataAtom = atomWithReducer<\n  ColumnModelFormData[],\n  TableColumnSchemaFormReducerAction\n>([], reducer)\n"],"mappings":"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"}
+{"version":3,"file":"TableColumnSchemaFormReducer.js","names":[],"sources":["../../../src/components/TableColumnSchemaEditor/TableColumnSchemaFormReducer.ts"],"sourcesContent":["import { ColumnModel, ColumnTypeEnum } from '@sage-bionetworks/synapse-types'\nimport { atomWithReducer } from 'jotai/utils'\nimport { cloneDeep } from 'lodash-es'\nimport {\n  canHaveMaxListLength,\n  canHaveSize,\n  configureFacetsForType,\n  DEFAULT_STRING_SIZE,\n  findMatchingColumnModel,\n  isFormDataValueSmallerThanRecommendedValue,\n} from './TableColumnSchemaEditorUtils'\nimport {\n  ColumnModelFormData,\n  JsonSubColumnModelFormData,\n} from './Validators/ColumnModelValidator'\n\nexport function getIsAllSelected(formData: ColumnModelFormData[]) {\n  return (\n    formData.length > 0 &&\n    formData.every(\n      cm =>\n        // Is selected\n        cm.isSelected &&\n        // And all subcolumns are selected (true if there are no subcolumns)\n        (cm.jsonSubColumns ?? []).every(\n          (jsc: JsonSubColumnModelFormData) => jsc.isSelected,\n        ),\n    )\n  )\n}\n\nexport function getNumberOfSelectedItems(formData: ColumnModelFormData[]) {\n  return formData.reduce((acc, curr) => {\n    if (curr.isSelected) {\n      acc += 1\n    }\n    if (curr.jsonSubColumns) {\n      curr.jsonSubColumns.forEach((jsc: JsonSubColumnModelFormData) => {\n        if (jsc.isSelected) {\n          acc += 1\n        }\n      })\n    }\n    return acc\n  }, 0)\n}\n\nexport function getDefaultColumnModelFormData(): ColumnModelFormData {\n  return {\n    name: '',\n    columnType: ColumnTypeEnum.STRING,\n    maximumSize: DEFAULT_STRING_SIZE,\n    isOriginallyDefaultColumn: false,\n    isSelected: false,\n  }\n}\n\nexport function getDefaultJsonSubColumnFormData(): JsonSubColumnModelFormData {\n  return {\n    name: '',\n    jsonPath: '',\n    columnType: ColumnTypeEnum.STRING,\n    facetType: 'enumeration',\n    isSelected: false,\n  }\n}\n\n/**\n * In the provided array, move items up where the predicate evaluates to true\n * @param arr the array to reorder\n * @param predicate a function that returns true if the item should be moved up\n * @returns - a new array with the reordered items\n */\nfunction moveSelectedItemsUp<T = unknown>(\n  arr: T[],\n  predicate: (item: T) => boolean,\n) {\n  const newArr = [...arr]\n  newArr.forEach((item, index) => {\n    // For each item that should move up, swap it with the previous item\n    if (\n      // Cannot move index 0 up\n      index > 0 &&\n      // Only move if the predicate matches\n      predicate(item) &&\n      // If the previous item should also move, skip the swap\n      !predicate(newArr[index - 1])\n    ) {\n      // swap the items\n      const temp = newArr[index - 1]\n      newArr[index - 1] = newArr[index]\n      newArr[index] = temp\n    }\n  })\n  return newArr\n}\n\n/**\n * In the provided array, move items down where the predicate evaluates to true\n * @param arr the array to reorder\n * @param predicate a function that returns true if the item should be moved down\n * @returns - a new array with the reordered items\n */\nfunction moveSelectedItemsDown<T = unknown>(\n  arr: T[],\n  predicate: (item: T) => boolean,\n) {\n  const newArr = [...arr]\n  // Start from the end and work backwards, otherwise items could be moved more than once\n  for (let i = newArr.length - 1; i >= 0; i--) {\n    const item = newArr[i]\n    if (\n      // Cannot move the last item down\n      i < newArr.length - 1 &&\n      // Only move if the predicate matches\n      predicate(item) &&\n      // If the next item should also be moved, don't swap\n      !predicate(newArr[i + 1])\n    ) {\n      // swap the items\n      const temp = newArr[i]\n      newArr[i] = newArr[i + 1]\n      newArr[i + 1] = temp\n    }\n  }\n  return newArr\n}\n\ntype TableColumnSchemaFormReducerAction =\n  | {\n      type: 'setValue'\n      value: ColumnModelFormData[]\n    }\n  | {\n      type: 'toggleSelect'\n      columnModelIndex: number\n      jsonSubColumnModelIndex?: number\n    }\n  | { type: 'toggleSelectAll' }\n  | {\n      type: 'appendColumn'\n    }\n  | {\n      type: 'appendJsonSubColumn'\n      columnModelIndex: number\n    }\n  | {\n      type: 'setColumnModelValue'\n      columnModelIndex: number\n      jsonSubColumnModelIndex?: number\n      value: ColumnModelFormData | JsonSubColumnModelFormData\n    }\n  | {\n      type: 'changeColumnModelType'\n      newColumnType: ColumnTypeEnum\n      columnModelIndex: number\n      jsonSubColumnModelIndex?: number\n    }\n  | {\n      type: 'move'\n      from: {\n        columnModelIndex: number\n        jsonSubColumnModelIndex?: number\n      }\n      to: { columnModelIndex: number; jsonSubColumnModelIndex?: number }\n    }\n  | {\n      type: 'moveUp'\n    }\n  | {\n      type: 'moveDown'\n    }\n  | {\n      type: 'delete'\n    }\n  | {\n      type: 'updateColumnSizesToRecommendedValues'\n      annotationColumnModels: ColumnModel[]\n    }\n\nfunction updateColumnSizesToRecommendedValues(\n  action: {\n    type: 'updateColumnSizesToRecommendedValues'\n    annotationColumnModels: ColumnModel[]\n  },\n  prevState: ColumnModelFormData[],\n): ColumnModelFormData[] {\n  const { annotationColumnModels } = action\n  return prevState.map(cm => {\n    // Note: no need to check JSON subcolumns, because Views cannot have JSON data!\n\n    // Find the closest match between passed column model and current column model with name and type\n    const defaultAnnotationModel = annotationColumnModels\n      ? findMatchingColumnModel(annotationColumnModels, cm)\n      : undefined\n\n    if (defaultAnnotationModel == null) {\n      // No matching annotation column, so do not change it\n      return cm\n    }\n\n    if (\n      isFormDataValueSmallerThanRecommendedValue(\n        cm.maximumSize,\n        defaultAnnotationModel.maximumSize,\n      )\n    ) {\n      cm = { ...cm, maximumSize: defaultAnnotationModel.maximumSize }\n    }\n\n    if (\n      isFormDataValueSmallerThanRecommendedValue(\n        cm.maximumListLength,\n        defaultAnnotationModel.maximumListLength,\n      )\n    ) {\n      cm = {\n        ...cm,\n        maximumListLength: defaultAnnotationModel.maximumListLength,\n      }\n    }\n    return cm\n  })\n}\n\nfunction changeColumnModelType(\n  action: {\n    type: 'changeColumnModelType'\n    newColumnType: ColumnTypeEnum\n    columnModelIndex: number\n    jsonSubColumnModelIndex?: number\n  },\n  prevState: ColumnModelFormData[],\n) {\n  const { columnModelIndex, jsonSubColumnModelIndex, newColumnType } = action\n  let newColumnModelValue: ColumnModelFormData | JsonSubColumnModelFormData\n\n  // Create a copy of the selected column model\n  if (prevState?.[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      newColumnModelValue = cloneDeep(\n        prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex],\n      )\n    } else {\n      newColumnModelValue = cloneDeep(prevState[columnModelIndex])\n    }\n  } else {\n    throw new Error(\n      'Cannot change column model type for a column that does not exist',\n    )\n  }\n\n  // Update the column model. Remove fields that no longer make sense for the new column type\n  newColumnModelValue.columnType = newColumnType\n  if (!canHaveSize(newColumnType) && 'maximumSize' in newColumnModelValue) {\n    delete newColumnModelValue.maximumSize\n  }\n  if (\n    !canHaveMaxListLength(newColumnType) &&\n    'maximumListLength' in newColumnModelValue\n  ) {\n    delete newColumnModelValue.maximumListLength\n  }\n\n  // Remove default and restricted values unconditionally since they may not adhere to the new column type\n  if ('enumValues' in newColumnModelValue) {\n    delete newColumnModelValue.enumValues\n  }\n  if ('defaultValue' in newColumnModelValue) {\n    delete newColumnModelValue.defaultValue\n  }\n\n  const allowedFacetTypes = configureFacetsForType(\n    newColumnType,\n    !!jsonSubColumnModelIndex,\n  )\n  if (\n    'facetType' in newColumnModelValue &&\n    (allowedFacetTypes === null ||\n      !allowedFacetTypes.includes(newColumnModelValue.facetType))\n  ) {\n    delete newColumnModelValue.facetType\n  }\n\n  if (\n    'jsonSubColumns' in newColumnModelValue &&\n    newColumnType !== ColumnTypeEnum.JSON\n  ) {\n    delete newColumnModelValue.jsonSubColumns\n  }\n\n  // Replace the value\n  if (prevState?.[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex] =\n        newColumnModelValue as JsonSubColumnModelFormData\n    } else {\n      prevState[columnModelIndex] = newColumnModelValue as ColumnModelFormData\n    }\n  }\n}\n\nfunction toggleSelectAll(prevState: ColumnModelFormData[]) {\n  const allSelected = getIsAllSelected(prevState)\n  if (allSelected) {\n    return prevState.map(cm => ({\n      ...cm,\n      jsonSubColumns: cm.jsonSubColumns?.map(jsc => ({\n        ...jsc,\n        isSelected: false,\n      })),\n      isSelected: false,\n    }))\n  } else {\n    return prevState.map(cm => ({\n      ...cm,\n      jsonSubColumns: cm.jsonSubColumns?.map(jsc => ({\n        ...jsc,\n        isSelected: true,\n      })),\n      isSelected: true,\n    }))\n  }\n}\n\nfunction setColumnModelValue(\n  action: {\n    type: 'setColumnModelValue'\n    columnModelIndex: number\n    jsonSubColumnModelIndex?: number\n    value: ColumnModelFormData | JsonSubColumnModelFormData\n  },\n  prevState: ColumnModelFormData[],\n) {\n  const { columnModelIndex, jsonSubColumnModelIndex, value } = action\n  if (prevState?.[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex] =\n        value as JsonSubColumnModelFormData\n    } else {\n      prevState[columnModelIndex] = value as ColumnModelFormData\n    }\n  }\n}\n\nfunction toggleSelect(\n  action: {\n    type: 'toggleSelect'\n    columnModelIndex: number\n    jsonSubColumnModelIndex?: number\n  },\n  prevState: ColumnModelFormData[],\n) {\n  const { columnModelIndex, jsonSubColumnModelIndex } = action\n  if (prevState?.[columnModelIndex]) {\n    if (\n      prevState[columnModelIndex].jsonSubColumns &&\n      jsonSubColumnModelIndex !== undefined\n    ) {\n      const cm =\n        prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex]\n      prevState[columnModelIndex].jsonSubColumns[jsonSubColumnModelIndex] = {\n        ...cm,\n        isSelected: !cm.isSelected,\n      }\n    } else {\n      const cm = prevState[columnModelIndex]\n      prevState[columnModelIndex] = { ...cm, isSelected: !cm.isSelected }\n    }\n  }\n}\n\nfunction deleteColumnModel(prevState: ColumnModelFormData[]) {\n  return prevState\n    .filter(cm => !cm.isSelected)\n    .map(cm => {\n      if (cm.jsonSubColumns) {\n        cm = {\n          ...cm,\n          jsonSubColumns: cm.jsonSubColumns.filter(\n            (jsc: JsonSubColumnModelFormData) => !jsc.isSelected,\n          ),\n        }\n      }\n      return cm\n    })\n}\n\n/**\n * Returns a new, shallowly-cloned array that moves the object from the `fromIndex` to the `toIndex`.\n * Derived from https://stackoverflow.com/a/6470794/9723359\n *\n * Returns the same array if the `fromIndex` and `toIndex` are the same.\n * @param arrayToReorder\n * @param fromIndex\n * @param toIndex\n */\nfunction moveElementInArray<T = unknown>(\n  arrayToReorder: Array<T>,\n  fromIndex: number,\n  toIndex: number,\n): Array<T> {\n  if (fromIndex == toIndex) {\n    return arrayToReorder\n  }\n  const newArray = [...arrayToReorder]\n  const elementToMove = newArray[fromIndex]\n  newArray.splice(fromIndex, 1)\n  newArray.splice(toIndex, 0, elementToMove)\n  return newArray\n}\n\n/**\n * Moves a column model or jsonSubColumn from the `from` index to the `to` index\n * @param action\n * @param prevState\n */\nfunction moveColumnModel(\n  action: {\n    type: 'move'\n    from: { columnModelIndex: number; jsonSubColumnModelIndex?: number }\n    to: { columnModelIndex: number; jsonSubColumnModelIndex?: number }\n  },\n  prevState: ColumnModelFormData[],\n): ColumnModelFormData[] {\n  const { from, to } = action\n  const arrayToReorder =\n    from.jsonSubColumnModelIndex !== undefined\n      ? prevState[from.columnModelIndex].jsonSubColumns!\n      : prevState\n\n  const fromIndex =\n    from.jsonSubColumnModelIndex !== undefined\n      ? from.jsonSubColumnModelIndex\n      : from.columnModelIndex\n\n  const toIndex =\n    to.jsonSubColumnModelIndex !== undefined\n      ? to.jsonSubColumnModelIndex\n      : to.columnModelIndex\n\n  // Move the element\n  const newArray = moveElementInArray<unknown>(\n    arrayToReorder,\n    fromIndex,\n    toIndex,\n  ) as ColumnModelFormData[] | JsonSubColumnModelFormData[]\n\n  if (from.jsonSubColumnModelIndex !== undefined) {\n    // If we moved a jsonSubColumn, update state to use the new, reordered array\n    prevState[from.columnModelIndex].jsonSubColumns =\n      newArray as JsonSubColumnModelFormData[]\n    return prevState\n  } else {\n    // Otherwise, return the new, reordered array of column models\n    return newArray as ColumnModelFormData[]\n  }\n}\n\nexport function reducer(\n  prevState: ColumnModelFormData[],\n  action: TableColumnSchemaFormReducerAction,\n) {\n  switch (action.type) {\n    case 'setValue':\n      prevState = action.value\n      break\n    case 'toggleSelectAll': {\n      prevState = toggleSelectAll(prevState)\n      break\n    }\n    case 'setColumnModelValue': {\n      setColumnModelValue(action, prevState)\n      break\n    }\n    case 'changeColumnModelType': {\n      changeColumnModelType(action, prevState)\n      break\n    }\n\n    case 'appendColumn':\n      prevState.push(getDefaultColumnModelFormData())\n      break\n    case 'appendJsonSubColumn': {\n      const { columnModelIndex } = action\n      prevState[columnModelIndex] = {\n        ...prevState[columnModelIndex],\n        jsonSubColumns: [\n          ...(prevState[columnModelIndex].jsonSubColumns ?? []),\n          getDefaultJsonSubColumnFormData(),\n        ],\n      }\n      break\n    }\n    case 'toggleSelect': {\n      toggleSelect(action, prevState)\n      break\n    }\n    case 'delete':\n      prevState = deleteColumnModel(prevState)\n      break\n    case 'move': {\n      prevState = moveColumnModel(action, prevState)\n      break\n    }\n    case 'moveUp':\n      prevState = moveSelectedItemsUp(prevState, cm => cm.isSelected)\n      prevState.forEach(cm => {\n        if (cm.jsonSubColumns) {\n          cm.jsonSubColumns = moveSelectedItemsUp(\n            cm.jsonSubColumns,\n            jsc => jsc.isSelected,\n          )\n        }\n      })\n      break\n    case 'moveDown':\n      prevState = moveSelectedItemsDown(prevState, cm => cm.isSelected)\n      prevState.forEach(cm => {\n        if (cm.jsonSubColumns) {\n          cm.jsonSubColumns = moveSelectedItemsDown(\n            cm.jsonSubColumns,\n            jsc => jsc.isSelected,\n          )\n        }\n      })\n      break\n    case 'updateColumnSizesToRecommendedValues':\n      prevState = updateColumnSizesToRecommendedValues(action, prevState)\n      break\n    default:\n      throw new Error(`Unexpected action`, action)\n  }\n  return [...prevState]\n}\n\nexport const tableColumnSchemaFormDataAtom = atomWithReducer<\n  ColumnModelFormData[],\n  TableColumnSchemaFormReducerAction\n>([], reducer)\n"],"mappings":"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"}

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

@@ -13,6 +13,13 @@ export type StyledTanStackTableProps<TData = unknown, TRowType = Row<TData>> = {
      * Defaults to false (fixed layout).
      */
     autoColumnSizing?: boolean;
+    /**
+     * When true, renders an additional horizontal scrollbar above the table (in addition to the
+     * browser's native scrollbar below it), synced to the same scroll position. Useful for wide
+     * tables where the bottom scrollbar may be far from the viewport's visible area.
+     * @default false
+     */
+    showTopScrollbar?: boolean;
     slots?: StyledTanStackTableSlots<TData, TRowType>;
     slotProps?: StyledTanStackTableSlotProps<TData, TRowType>;
 } & Pick<TableBodyProps<TData, TRowType>, 'rows' | 'rowTransform'>;

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

@@ -1 +1 @@
-{"version":3,"file":"StyledTanStackTable.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0CAA0C,CAAA;AACjD,OAAO,EAGL,GAAG,EACH,KAAK,EACN,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAgC,cAAc,EAAE,MAAM,aAAa,CAAA;AAM1E,OAAO,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAEhF,MAAM,MAAM,wBAAwB,CAAC,KAAK,GAAG,OAAO,EAAE,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI;IAC7E,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yBAAyB,CAAC,EAAE,yBAAyB,CAAA;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,4BAA4B,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;CAC1D,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAA;AAElE;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,EACrB,KAAK,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,2CA0LjD"}
+{"version":3,"file":"StyledTanStackTable.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,yBAAyB,EAC1B,MAAM,0CAA0C,CAAA;AAGjD,OAAO,EAGL,GAAG,EACH,KAAK,EACN,MAAM,uBAAuB,CAAA;AAE9B,OAAO,EAAgC,cAAc,EAAE,MAAM,aAAa,CAAA;AAM1E,OAAO,EAAE,4BAA4B,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAA;AAGhF,MAAM,MAAM,wBAAwB,CAAC,KAAK,GAAG,OAAO,EAAE,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI;IAC7E,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAA;IACnB,yBAAyB,CAAC,EAAE,yBAAyB,CAAA;IACrD,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,KAAK,CAAC,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,4BAA4B,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAA;CAC1D,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,cAAc,CAAC,CAAA;AAElE;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CACzC,KAAK,GAAG,OAAO,EACf,QAAQ,GAAG,GAAG,CAAC,KAAK,CAAC,EACrB,KAAK,EAAE,wBAAwB,CAAC,KAAK,EAAE,QAAQ,CAAC,2CAkOjD"}

package/dist/components/TanStackTable/StyledTanStackTable.js

@@ -1,80 +1,100 @@
 import { StyledTableContainer as e } from "../styled/StyledTableContainer.js";
 import { getColumnSizeCssVariable as t, getCommonPinningStyles as n, getHeaderSizeCssVariable as r } from "./TanStackTableUtils.js";
 import { MemoizedTableBody as i, TableBody as a } from "./TableBody.js";
-import { useLayoutEffect as o, useMemo as s, useRef as c, useState as l } from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { flexRender as f } from "@tanstack/react-table";
+import { useSyncedTopScrollbar as o } from "./useSyncedTopScrollbar.js";
+import { useLayoutEffect as s, useMemo as c, useRef as l, useState as u } from "react";
+import { Box as d } from "@mui/material";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { flexRender as h } from "@tanstack/react-table";
+import { useForkRef as g } from "@mui/material/utils";
 //#region src/components/TanStackTable/StyledTanStackTable.tsx
-function p(p) {
-	let { table: m, styledTableContainerProps: h, fullWidth: g = !0, autoColumnSizing: _ = !1, slots: v = {}, slotProps: y = {} } = p, { Thead: b = "thead", Th: x = "th", Table: S = "table", ...C } = v, { Table: w = {}, Thead: T = {}, Th: E = {}, ...D } = y, O = {
-		table: m,
-		slots: C,
-		slotProps: D,
-		rows: p.rows,
-		rowTransform: p.rowTransform
-	}, k = c(null), A = m.getState().columnVisibility, [j, M] = l(null), N = !_ || j?.columns === m.options.columns && j?.columnVisibility === A;
-	o(() => {
-		if (!_ || N || !k.current) return;
-		let e = k.current.querySelectorAll(":scope > thead > tr:first-child > th"), t = m.getFlatHeaders(), n = {};
+function _(_) {
+	let { table: v, styledTableContainerProps: y, fullWidth: b = !0, autoColumnSizing: x = !1, showTopScrollbar: S = !1, slots: C = {}, slotProps: w = {} } = _, { Thead: T = "thead", Th: E = "th", Table: D = "table", ...O } = C, { Table: k = {}, Thead: A = {}, Th: j = {}, ...M } = w, N = {
+		table: v,
+		slots: O,
+		slotProps: M,
+		rows: _.rows,
+		rowTransform: _.rowTransform
+	}, P = l(null), { containerRef: F, topScrollRef: I, targetWidth: L, handleTopScroll: R, handleBottomScroll: z } = o(P, S), { ref: B, onScroll: V, ...H } = y ?? {}, U = g(F, B), W = v.getState().columnVisibility, [G, K] = u(null), q = !x || G?.columns === v.options.columns && G?.columnVisibility === W;
+	s(() => {
+		if (!x || q || !P.current) return;
+		let e = P.current.querySelectorAll(":scope > thead > tr:first-child > th"), t = v.getFlatHeaders(), n = {};
 		t.forEach((t, r) => {
 			let i = e[r];
 			i && (n[t.column.id] = Math.ceil(i.getBoundingClientRect().width));
-		}), Object.keys(n).length > 0 && (m.setColumnSizing(n), M({
-			columns: m.options.columns,
-			columnVisibility: A
+		}), Object.keys(n).length > 0 && (v.setColumnSizing(n), K({
+			columns: v.options.columns,
+			columnVisibility: W
 		}));
 	}, [
-		_,
-		A,
-		N,
-		m
+		x,
+		W,
+		q,
+		v
 	]);
-	let P = s(() => {
-		let e = m.getFlatHeaders(), n = {};
+	let J = c(() => {
+		let e = v.getFlatHeaders(), n = {};
 		for (let i = 0; i < e.length; i++) {
 			let a = e[i];
 			n[r(a.id)] = a.getSize(), n[t(a.column.id)] = a.column.getSize();
 		}
 		return n;
 	}, [
-		m.getState().columnSizingInfo,
-		m.getState().columnSizing,
-		m.getState().columnVisibility
-	]), F;
-	F = g ? "100%" : N ? `${m.getTotalSize()}px` : "max-content";
-	let I = m.getState().columnSizingInfo.isResizingColumn ? i : a;
-	return /* @__PURE__ */ u(e, {
-		...h,
-		children: /* @__PURE__ */ d(S, {
-			...w,
-			ref: k,
+		v.getState().columnSizingInfo,
+		v.getState().columnSizing,
+		v.getState().columnVisibility
+	]), Y;
+	Y = b ? "100%" : q ? `${v.getTotalSize()}px` : "max-content";
+	let X = v.getState().columnSizingInfo.isResizingColumn ? i : a;
+	function Z(e) {
+		V?.(e), S && z(e);
+	}
+	return /* @__PURE__ */ m(f, { children: [S && /* @__PURE__ */ p(d, {
+		ref: I,
+		onScroll: R,
+		sx: {
+			overflowX: "auto",
+			overflowY: "hidden",
+			height: "16px"
+		},
+		children: /* @__PURE__ */ p(d, { sx: {
+			width: L,
+			height: "1px"
+		} })
+	}), /* @__PURE__ */ p(e, {
+		...H,
+		ref: U,
+		onScroll: Z,
+		children: /* @__PURE__ */ m(D, {
+			...k,
+			ref: P,
 			style: {
-				...P,
-				tableLayout: N ? "fixed" : "auto",
-				width: F,
-				...w.style
+				...J,
+				tableLayout: q ? "fixed" : "auto",
+				width: Y,
+				...k.style
 			},
-			children: [/* @__PURE__ */ u(b, {
-				...T,
-				children: m.getHeaderGroups().map((e) => /* @__PURE__ */ u("tr", { children: e.headers.map((e) => /* @__PURE__ */ d(x, {
+			children: [/* @__PURE__ */ p(T, {
+				...A,
+				children: v.getHeaderGroups().map((e) => /* @__PURE__ */ p("tr", { children: e.headers.map((e) => /* @__PURE__ */ m(E, {
 					colSpan: e.colSpan,
-					...E,
+					...j,
 					style: {
-						...N && { width: `calc(var(${r(e.id)}) * 1px)` },
+						...q && { width: `calc(var(${r(e.id)}) * 1px)` },
 						...n(e.column),
-						...E.style
+						...j.style
 					},
-					children: [e.isPlaceholder ? null : f(e.column.columnDef.header, e.getContext()), e.column.getCanResize() && /* @__PURE__ */ u("div", {
+					children: [e.isPlaceholder ? null : h(e.column.columnDef.header, e.getContext()), e.column.getCanResize() && /* @__PURE__ */ p("div", {
 						className: `resizer ${e.column.getIsResizing() ? "isResizing" : ""}`,
 						onMouseDown: e.getResizeHandler(),
 						onTouchStart: e.getResizeHandler()
 					})]
 				}, e.id)) }, e.id))
-			}), /* @__PURE__ */ u(I, { ...O })]
+			}), /* @__PURE__ */ p(X, { ...N })]
 		})
-	});
+	})] });
 }
 //#endregion
-export { p as default };
+export { _ as default };
 
 //# sourceMappingURL=StyledTanStackTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StyledTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"sourcesContent":["import {\n  StyledTableContainer,\n  StyledTableContainerProps,\n} from '@/components/styled/StyledTableContainer'\nimport {\n  ColumnSizingState,\n  flexRender,\n  Row,\n  Table,\n} from '@tanstack/react-table'\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { MemoizedTableBody, TableBody, TableBodyProps } from './TableBody'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n  getHeaderSizeCssVariable,\n} from './TanStackTableUtils'\nimport { StyledTanStackTableSlotProps, StyledTanStackTableSlots } from './types'\n\nexport type StyledTanStackTableProps<TData = unknown, TRowType = Row<TData>> = {\n  table: Table<TData>\n  styledTableContainerProps?: StyledTableContainerProps\n  fullWidth?: boolean\n  /**\n   * When true, uses `table-layout: auto` so the browser sizes columns to fit their content.\n   * Column sizes from TanStack act as minimum widths, and columns expand to fit wider content.\n   * Resizing still works — dragging a column sets a new minimum width.\n   * Defaults to false (fixed layout).\n   */\n  autoColumnSizing?: boolean\n  slots?: StyledTanStackTableSlots<TData, TRowType>\n  slotProps?: StyledTanStackTableSlotProps<TData, TRowType>\n} & Pick<TableBodyProps<TData, TRowType>, 'rows' | 'rowTransform'>\n\n/**\n * Component that renders a styled table using @tanstack/react-table. Pass your table instance into the component and\n * it will render the table with the appropriate headers and rows.\n */\nexport default function StyledTanStackTable<\n  TData = unknown,\n  TRowType = Row<TData>,\n>(props: StyledTanStackTableProps<TData, TRowType>) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    autoColumnSizing = false,\n    slots = {},\n    slotProps = {},\n  } = props\n  const {\n    Thead = 'thead',\n    Th = 'th',\n    Table = 'table',\n    ...tableBodySlots\n  } = slots\n  const {\n    Table: tableSlotProps = {},\n    Thead: theadSlotProps = {},\n    Th: thSlotProps = {},\n    ...tableBodySlotProps\n  } = slotProps\n\n  const tableBodyProps: TableBodyProps<TData, TRowType> = {\n    table,\n    slots: tableBodySlots,\n    slotProps: tableBodySlotProps,\n    rows: props.rows!,\n    rowTransform: props.rowTransform!,\n  }\n\n  /**\n   * When autoColumnSizing is true we do a two-phase render:\n   *  1. Render with table-layout: auto and no width constraints so the browser\n   *     natively sizes each column to its content.\n   *  2. After the first paint, measure each <th> and write the real pixel widths\n   *     into TanStack's columnSizing state, then switch to table-layout: fixed.\n   *\n   * This gives content-based initial sizes while still allowing the user to drag\n   * a column narrower than its content.\n   */\n  const tableRef = useRef<HTMLTableElement>(null)\n\n  // Track what columns+visibility combination was last measured so we know when\n  // a re-measurement is needed (e.g. columns change or visibility is toggled).\n  const columnVisibility = table.getState().columnVisibility\n  const [lastMeasuredState, setLastMeasuredState] = useState<{\n    columns: typeof table.options.columns\n    columnVisibility: typeof columnVisibility\n  } | null>(null)\n\n  // hasMeasured is true when auto-sizing is disabled (nothing to do) OR when the\n  // current columns+visibility matches the last measured snapshot.\n  const hasMeasured =\n    !autoColumnSizing ||\n    (lastMeasuredState?.columns === table.options.columns &&\n      lastMeasuredState?.columnVisibility === columnVisibility)\n\n  // After the browser has laid out the auto-sized table, capture the widths and\n  // switch to fixed layout so that the user can resize below the content width.\n  // useLayoutEffect runs synchronously after DOM mutations, before the browser\n  // paints, which is required for accurate DOM measurements.\n  useLayoutEffect(() => {\n    if (!autoColumnSizing || hasMeasured || !tableRef.current) return\n\n    const ths = tableRef.current.querySelectorAll(\n      ':scope > thead > tr:first-child > th',\n    )\n    const headers = table.getFlatHeaders()\n    const newSizes: ColumnSizingState = {}\n    headers.forEach((header, i) => {\n      const th = ths[i] as HTMLElement | undefined\n      if (th) {\n        newSizes[header.column.id] = Math.ceil(th.getBoundingClientRect().width)\n      }\n    })\n    if (Object.keys(newSizes).length > 0) {\n      table.setColumnSizing(newSizes)\n      setLastMeasuredState({\n        columns: table.options.columns,\n        columnVisibility,\n      })\n    }\n  }, [autoColumnSizing, columnVisibility, hasMeasured, table])\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   *\n   * See https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\n   */\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders()\n    const colSizes: { [key: string]: number } = {}\n    for (let i = 0; i < headers.length; i++) {\n      const header = headers[i]\n      colSizes[getHeaderSizeCssVariable(header.id)] = header.getSize()\n      colSizes[getColumnSizeCssVariable(header.column.id)] =\n        header.column.getSize()\n    }\n    return colSizes\n    // Intentionally limit the dependencies to only recompute when the column sizes change\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    table.getState().columnSizingInfo,\n    table.getState().columnSizing,\n    table.getState().columnVisibility, // If a column is added, its width should be recalculated\n  ])\n\n  // Before measurement: let the browser shrink the table to content width so we\n  // can read accurate sizes. After measurement: use the exact measured total.\n  let tableWidth: string\n  if (fullWidth) {\n    tableWidth = '100%'\n  } else if (!hasMeasured) {\n    tableWidth = 'max-content'\n  } else {\n    tableWidth = `${table.getTotalSize()}px`\n  }\n\n  /* When resizing any column we will render this special memoized version of our table body */\n  const TableBodyElement = table.getState().columnSizingInfo.isResizingColumn\n    ? MemoizedTableBody\n    : TableBody\n\n  return (\n    <StyledTableContainer {...styledTableContainerProps}>\n      <Table\n        {...tableSlotProps}\n        ref={tableRef}\n        style={{\n          ...columnSizeVars,\n          // Pre-measurement: auto layout so the browser can size columns to content.\n          // Post-measurement: fixed layout so the user can resize below content width.\n          tableLayout: hasMeasured ? 'fixed' : 'auto',\n          width: tableWidth,\n          ...tableSlotProps['style'],\n        }}\n      >\n        <Thead {...theadSlotProps}>\n          {table.getHeaderGroups().map(headerGroup => {\n            return (\n              <tr key={headerGroup.id}>\n                {headerGroup.headers.map(header => (\n                  <Th\n                    key={header.id}\n                    colSpan={header.colSpan}\n                    {...thSlotProps}\n                    style={{\n                      // Pre-measurement: no width hint — let the browser size freely.\n                      // Post-measurement: exact width from the measured/resized value.\n                      ...(hasMeasured && {\n                        width: `calc(var(${getHeaderSizeCssVariable(\n                          header.id,\n                        )}) * 1px)`,\n                      }),\n                      ...getCommonPinningStyles(header.column),\n                      ...thSlotProps['style'],\n                    }}\n                  >\n                    {header.isPlaceholder\n                      ? null\n                      : flexRender(\n                          header.column.columnDef.header,\n                          header.getContext(),\n                        )}\n                    {header.column.getCanResize() && (\n                      <div\n                        className={`resizer ${\n                          header.column.getIsResizing() ? 'isResizing' : ''\n                        }`}\n                        onMouseDown={header.getResizeHandler()}\n                        onTouchStart={header.getResizeHandler()}\n                      />\n                    )}\n                  </Th>\n                ))}\n              </tr>\n            )\n          })}\n        </Thead>\n        <TableBodyElement<TData, TRowType> {...tableBodyProps} />\n      </Table>\n    </StyledTableContainer>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"StyledTanStackTable.js","names":[],"sources":["../../../src/components/TanStackTable/StyledTanStackTable.tsx"],"sourcesContent":["import {\n  StyledTableContainer,\n  StyledTableContainerProps,\n} from '@/components/styled/StyledTableContainer'\nimport { Box } from '@mui/material'\nimport { useForkRef } from '@mui/material/utils'\nimport {\n  ColumnSizingState,\n  flexRender,\n  Row,\n  Table,\n} from '@tanstack/react-table'\nimport { UIEvent, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { MemoizedTableBody, TableBody, TableBodyProps } from './TableBody'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n  getHeaderSizeCssVariable,\n} from './TanStackTableUtils'\nimport { StyledTanStackTableSlotProps, StyledTanStackTableSlots } from './types'\nimport { useSyncedTopScrollbar } from './useSyncedTopScrollbar'\n\nexport type StyledTanStackTableProps<TData = unknown, TRowType = Row<TData>> = {\n  table: Table<TData>\n  styledTableContainerProps?: StyledTableContainerProps\n  fullWidth?: boolean\n  /**\n   * When true, uses `table-layout: auto` so the browser sizes columns to fit their content.\n   * Column sizes from TanStack act as minimum widths, and columns expand to fit wider content.\n   * Resizing still works — dragging a column sets a new minimum width.\n   * Defaults to false (fixed layout).\n   */\n  autoColumnSizing?: boolean\n  /**\n   * When true, renders an additional horizontal scrollbar above the table (in addition to the\n   * browser's native scrollbar below it), synced to the same scroll position. Useful for wide\n   * tables where the bottom scrollbar may be far from the viewport's visible area.\n   * @default false\n   */\n  showTopScrollbar?: boolean\n  slots?: StyledTanStackTableSlots<TData, TRowType>\n  slotProps?: StyledTanStackTableSlotProps<TData, TRowType>\n} & Pick<TableBodyProps<TData, TRowType>, 'rows' | 'rowTransform'>\n\n/**\n * Component that renders a styled table using @tanstack/react-table. Pass your table instance into the component and\n * it will render the table with the appropriate headers and rows.\n */\nexport default function StyledTanStackTable<\n  TData = unknown,\n  TRowType = Row<TData>,\n>(props: StyledTanStackTableProps<TData, TRowType>) {\n  const {\n    table,\n    styledTableContainerProps,\n    fullWidth = true,\n    autoColumnSizing = false,\n    showTopScrollbar = false,\n    slots = {},\n    slotProps = {},\n  } = props\n  const {\n    Thead = 'thead',\n    Th = 'th',\n    Table = 'table',\n    ...tableBodySlots\n  } = slots\n  const {\n    Table: tableSlotProps = {},\n    Thead: theadSlotProps = {},\n    Th: thSlotProps = {},\n    ...tableBodySlotProps\n  } = slotProps\n\n  const tableBodyProps: TableBodyProps<TData, TRowType> = {\n    table,\n    slots: tableBodySlots,\n    slotProps: tableBodySlotProps,\n    rows: props.rows!,\n    rowTransform: props.rowTransform!,\n  }\n\n  /**\n   * When autoColumnSizing is true we do a two-phase render:\n   *  1. Render with table-layout: auto and no width constraints so the browser\n   *     natively sizes each column to its content.\n   *  2. After the first paint, measure each <th> and write the real pixel widths\n   *     into TanStack's columnSizing state, then switch to table-layout: fixed.\n   *\n   * This gives content-based initial sizes while still allowing the user to drag\n   * a column narrower than its content.\n   */\n  const tableRef = useRef<HTMLTableElement>(null)\n\n  const {\n    containerRef,\n    topScrollRef,\n    targetWidth: tableRenderedWidth,\n    handleTopScroll,\n    handleBottomScroll,\n  } = useSyncedTopScrollbar(tableRef, showTopScrollbar)\n\n  // Merge our own container ref/onScroll with any that the caller passed via\n  // styledTableContainerProps, rather than one clobbering the other.\n  const {\n    ref: callerContainerRef,\n    onScroll: callerOnScroll,\n    ...restContainerProps\n  } = styledTableContainerProps ?? {}\n  const mergedContainerRef = useForkRef(containerRef, callerContainerRef)\n\n  // Track what columns+visibility combination was last measured so we know when\n  // a re-measurement is needed (e.g. columns change or visibility is toggled).\n  const columnVisibility = table.getState().columnVisibility\n  const [lastMeasuredState, setLastMeasuredState] = useState<{\n    columns: typeof table.options.columns\n    columnVisibility: typeof columnVisibility\n  } | null>(null)\n\n  // hasMeasured is true when auto-sizing is disabled (nothing to do) OR when the\n  // current columns+visibility matches the last measured snapshot.\n  const hasMeasured =\n    !autoColumnSizing ||\n    (lastMeasuredState?.columns === table.options.columns &&\n      lastMeasuredState?.columnVisibility === columnVisibility)\n\n  // After the browser has laid out the auto-sized table, capture the widths and\n  // switch to fixed layout so that the user can resize below the content width.\n  // useLayoutEffect runs synchronously after DOM mutations, before the browser\n  // paints, which is required for accurate DOM measurements.\n  useLayoutEffect(() => {\n    if (!autoColumnSizing || hasMeasured || !tableRef.current) return\n\n    const ths = tableRef.current.querySelectorAll(\n      ':scope > thead > tr:first-child > th',\n    )\n    const headers = table.getFlatHeaders()\n    const newSizes: ColumnSizingState = {}\n    headers.forEach((header, i) => {\n      const th = ths[i] as HTMLElement | undefined\n      if (th) {\n        newSizes[header.column.id] = Math.ceil(th.getBoundingClientRect().width)\n      }\n    })\n    if (Object.keys(newSizes).length > 0) {\n      table.setColumnSizing(newSizes)\n      setLastMeasuredState({\n        columns: table.options.columns,\n        columnVisibility,\n      })\n    }\n  }, [autoColumnSizing, columnVisibility, hasMeasured, table])\n\n  /**\n   * Instead of calling `column.getSize()` on every render for every header\n   * and especially every data cell (very expensive),\n   * we will calculate all column sizes at once at the root table level in a useMemo\n   * and pass the column sizes down as CSS variables to the <table> element.\n   *\n   * See https://tanstack.com/table/v8/docs/guide/column-sizing#advanced-column-resizing-performance\n   */\n  const columnSizeVars = useMemo(() => {\n    const headers = table.getFlatHeaders()\n    const colSizes: { [key: string]: number } = {}\n    for (let i = 0; i < headers.length; i++) {\n      const header = headers[i]\n      colSizes[getHeaderSizeCssVariable(header.id)] = header.getSize()\n      colSizes[getColumnSizeCssVariable(header.column.id)] =\n        header.column.getSize()\n    }\n    return colSizes\n    // Intentionally limit the dependencies to only recompute when the column sizes change\n    // oxlint-disable-next-line react-hooks/exhaustive-deps\n  }, [\n    table.getState().columnSizingInfo,\n    table.getState().columnSizing,\n    table.getState().columnVisibility, // If a column is added, its width should be recalculated\n  ])\n\n  // Before measurement: let the browser shrink the table to content width so we\n  // can read accurate sizes. After measurement: use the exact measured total.\n  let tableWidth: string\n  if (fullWidth) {\n    tableWidth = '100%'\n  } else if (!hasMeasured) {\n    tableWidth = 'max-content'\n  } else {\n    tableWidth = `${table.getTotalSize()}px`\n  }\n\n  /* When resizing any column we will render this special memoized version of our table body */\n  const TableBodyElement = table.getState().columnSizingInfo.isResizingColumn\n    ? MemoizedTableBody\n    : TableBody\n\n  function handleContainerScroll(e: UIEvent<HTMLDivElement>) {\n    callerOnScroll?.(e)\n    if (showTopScrollbar) {\n      handleBottomScroll(e)\n    }\n  }\n\n  return (\n    <>\n      {showTopScrollbar && (\n        <Box\n          ref={topScrollRef}\n          onScroll={handleTopScroll}\n          sx={{ overflowX: 'auto', overflowY: 'hidden', height: '16px' }}\n        >\n          <Box sx={{ width: tableRenderedWidth, height: '1px' }} />\n        </Box>\n      )}\n      <StyledTableContainer\n        {...restContainerProps}\n        ref={mergedContainerRef}\n        onScroll={handleContainerScroll}\n      >\n        <Table\n          {...tableSlotProps}\n          ref={tableRef}\n          style={{\n            ...columnSizeVars,\n            // Pre-measurement: auto layout so the browser can size columns to content.\n            // Post-measurement: fixed layout so the user can resize below content width.\n            tableLayout: hasMeasured ? 'fixed' : 'auto',\n            width: tableWidth,\n            ...tableSlotProps['style'],\n          }}\n        >\n          <Thead {...theadSlotProps}>\n            {table.getHeaderGroups().map(headerGroup => {\n              return (\n                <tr key={headerGroup.id}>\n                  {headerGroup.headers.map(header => (\n                    <Th\n                      key={header.id}\n                      colSpan={header.colSpan}\n                      {...thSlotProps}\n                      style={{\n                        // Pre-measurement: no width hint — let the browser size freely.\n                        // Post-measurement: exact width from the measured/resized value.\n                        ...(hasMeasured && {\n                          width: `calc(var(${getHeaderSizeCssVariable(\n                            header.id,\n                          )}) * 1px)`,\n                        }),\n                        ...getCommonPinningStyles(header.column),\n                        ...thSlotProps['style'],\n                      }}\n                    >\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                      {header.column.getCanResize() && (\n                        <div\n                          className={`resizer ${\n                            header.column.getIsResizing() ? 'isResizing' : ''\n                          }`}\n                          onMouseDown={header.getResizeHandler()}\n                          onTouchStart={header.getResizeHandler()}\n                        />\n                      )}\n                    </Th>\n                  ))}\n                </tr>\n              )\n            })}\n          </Thead>\n          <TableBodyElement<TData, TRowType> {...tableBodyProps} />\n        </Table>\n      </StyledTableContainer>\n    </>\n  )\n}\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TableCellRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/TableCellRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAc,MAAM,uBAAuB,CAAA;AAOxD,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,2CA8BpE"}
+{"version":3,"file":"TableCellRenderer.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/TableCellRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAc,MAAM,uBAAuB,CAAA;AAOxD,wBAAgB,iBAAiB,CAAC,CAAC,GAAG,OAAO,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,OAAO,CAAC,2CA6BpE"}

package/dist/components/TanStackTable/TableCellRenderer.js

@@ -5,7 +5,7 @@ import { jsx as i } from "react/jsx-runtime";
 import { flexRender as a } from "@tanstack/react-table";
 //#region src/components/TanStackTable/TableCellRenderer.tsx
 function o(o) {
-	let s = o.getContext().table.options.meta?.getWrapInExpandableTd, c = s && s(o) ? e : "td", l = o.getContext().table.options.meta?.renderPlaceholderData;
+	let s = o.getContext().table.options.meta?.getWrapInExpandableTd, c = s?.(o) ? e : "td", l = o.getContext().table.options.meta?.renderPlaceholderData;
 	return /* @__PURE__ */ i(c, {
 		style: {
 			width: `calc(var(${t(o.column.id)}) * 1px)`,

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

@@ -1 +1 @@
-{"version":3,"file":"TableCellRenderer.js","names":[],"sources":["../../../src/components/TanStackTable/TableCellRenderer.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { Cell, flexRender } from '@tanstack/react-table'\nimport ExpandableTableDataCell from '../SynapseTable/ExpandableTableDataCell'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n} from './TanStackTableUtils'\n\nexport function TableCellRenderer<T = unknown>(cell: Cell<T, unknown>) {\n  const getWrapInExpandableTd =\n    cell.getContext().table.options.meta?.getWrapInExpandableTd\n  const wrapInExpandableTd =\n    getWrapInExpandableTd && getWrapInExpandableTd(cell)\n  const TableDataCellElement = wrapInExpandableTd\n    ? ExpandableTableDataCell\n    : 'td'\n\n  const renderPlaceholderData =\n    cell.getContext().table.options.meta?.renderPlaceholderData\n\n  return (\n    <TableDataCellElement\n      key={cell.id}\n      style={{\n        width: `calc(var(${getColumnSizeCssVariable(cell.column.id)}) * 1px)`,\n        textAlign: cell.column.columnDef.meta?.textAlign,\n        ...getCommonPinningStyles(cell.column),\n      }}\n    >\n      {renderPlaceholderData ? (\n        <p>\n          <Skeleton width={'80%'} height={'20px'} />\n        </p>\n      ) : (\n        flexRender(cell.column.columnDef.cell, cell.getContext())\n      )}\n    </TableDataCellElement>\n  )\n}\n"],"mappings":";;;;;;AAQA,SAAgB,EAA+B,GAAwB;CACrE,IAAM,IACJ,EAAK,WAAW,EAAE,MAAM,QAAQ,MAAM,uBAGlC,IADJ,KAAyB,EAAsB,CAAI,IAEjD,IACA,MAEE,IACJ,EAAK,WAAW,EAAE,MAAM,QAAQ,MAAM;CAExC,OACE,kBAAC,GAAD;EAEE,OAAO;GACL,OAAO,YAAY,EAAyB,EAAK,OAAO,EAAE,EAAE;GAC5D,WAAW,EAAK,OAAO,UAAU,MAAM;GACvC,GAAG,EAAuB,EAAK,MAAM;EACvC;YAEC,IACC,kBAAC,KAAD,EAAA,UACE,kBAAC,GAAD;GAAU,OAAO;GAAO,QAAQ;EAAS,CAAA,EACxC,CAAA,IAEH,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,WAAW,CAAC;CAEtC,GAdf,EAAK,EAcU;AAE1B"}
+{"version":3,"file":"TableCellRenderer.js","names":[],"sources":["../../../src/components/TanStackTable/TableCellRenderer.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { Cell, flexRender } from '@tanstack/react-table'\nimport ExpandableTableDataCell from '../SynapseTable/ExpandableTableDataCell'\nimport {\n  getColumnSizeCssVariable,\n  getCommonPinningStyles,\n} from './TanStackTableUtils'\n\nexport function TableCellRenderer<T = unknown>(cell: Cell<T, unknown>) {\n  const getWrapInExpandableTd =\n    cell.getContext().table.options.meta?.getWrapInExpandableTd\n  const wrapInExpandableTd = getWrapInExpandableTd?.(cell)\n  const TableDataCellElement = wrapInExpandableTd\n    ? ExpandableTableDataCell\n    : 'td'\n\n  const renderPlaceholderData =\n    cell.getContext().table.options.meta?.renderPlaceholderData\n\n  return (\n    <TableDataCellElement\n      key={cell.id}\n      style={{\n        width: `calc(var(${getColumnSizeCssVariable(cell.column.id)}) * 1px)`,\n        textAlign: cell.column.columnDef.meta?.textAlign,\n        ...getCommonPinningStyles(cell.column),\n      }}\n    >\n      {renderPlaceholderData ? (\n        <p>\n          <Skeleton width={'80%'} height={'20px'} />\n        </p>\n      ) : (\n        flexRender(cell.column.columnDef.cell, cell.getContext())\n      )}\n    </TableDataCellElement>\n  )\n}\n"],"mappings":";;;;;;AAQA,SAAgB,EAA+B,GAAwB;CACrE,IAAM,IACJ,EAAK,WAAW,EAAE,MAAM,QAAQ,MAAM,uBAElC,IADqB,IAAwB,CAAI,IAEnD,IACA,MAEE,IACJ,EAAK,WAAW,EAAE,MAAM,QAAQ,MAAM;CAExC,OACE,kBAAC,GAAD;EAEE,OAAO;GACL,OAAO,YAAY,EAAyB,EAAK,OAAO,EAAE,EAAE;GAC5D,WAAW,EAAK,OAAO,UAAU,MAAM;GACvC,GAAG,EAAuB,EAAK,MAAM;EACvC;YAEC,IACC,kBAAC,KAAD,EAAA,UACE,kBAAC,GAAD;GAAU,OAAO;GAAO,QAAQ;EAAS,CAAA,EACxC,CAAA,IAEH,EAAW,EAAK,OAAO,UAAU,MAAM,EAAK,WAAW,CAAC;CAEtC,GAdf,EAAK,EAcU;AAE1B"}

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

@@ -0,0 +1,13 @@
+import { RefObject, UIEvent } from 'react';
+/**
+ * Keeps an optional top scrollbar in sync with a scrollable container's horizontal scroll
+ * position, sized to match the rendered width of `targetRef`'s element (e.g. a `<table>`).
+ */
+export declare function useSyncedTopScrollbar(targetRef: RefObject<HTMLElement | null>, enabled: boolean): {
+    containerRef: RefObject<HTMLDivElement | null>;
+    topScrollRef: RefObject<HTMLDivElement | null>;
+    targetWidth: number;
+    handleTopScroll: (e: UIEvent<HTMLDivElement>) => void;
+    handleBottomScroll: (e: UIEvent<HTMLDivElement>) => void;
+};
+//# sourceMappingURL=useSyncedTopScrollbar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSyncedTopScrollbar.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/useSyncedTopScrollbar.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAoB,MAAM,OAAO,CAAA;AAE5D;;;GAGG;AACH,wBAAgB,qBAAqB,CACnC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EACxC,OAAO,EAAE,OAAO;;;;yBAaY,OAAO,CAAC,cAAc,CAAC;4BAWpB,OAAO,CAAC,cAAc,CAAC;EAkBvD"}

package/dist/components/TanStackTable/useSyncedTopScrollbar.js

@@ -0,0 +1,32 @@
+import { useRef as e, useState as t } from "react";
+import { useResizeObserver as n } from "@react-hookz/web";
+//#region src/components/TanStackTable/useSyncedTopScrollbar.ts
+function r(r, i) {
+	let a = e(null), o = e(null), s = e(null), [c, l] = t(0);
+	n(r, (e) => l(e.target.offsetWidth), i);
+	function u(e) {
+		if (s.current === "bottom") {
+			s.current = null;
+			return;
+		}
+		s.current = "top", a.current && (a.current.scrollLeft = e.currentTarget.scrollLeft);
+	}
+	function d(e) {
+		if (s.current === "top") {
+			s.current = null;
+			return;
+		}
+		s.current = "bottom", o.current && (o.current.scrollLeft = e.currentTarget.scrollLeft);
+	}
+	return {
+		containerRef: a,
+		topScrollRef: o,
+		targetWidth: c,
+		handleTopScroll: u,
+		handleBottomScroll: d
+	};
+}
+//#endregion
+export { r as useSyncedTopScrollbar };
+
+//# sourceMappingURL=useSyncedTopScrollbar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSyncedTopScrollbar.js","names":[],"sources":["../../../src/components/TanStackTable/useSyncedTopScrollbar.ts"],"sourcesContent":["import { useResizeObserver } from '@react-hookz/web'\nimport { RefObject, UIEvent, useRef, useState } from 'react'\n\n/**\n * Keeps an optional top scrollbar in sync with a scrollable container's horizontal scroll\n * position, sized to match the rendered width of `targetRef`'s element (e.g. a `<table>`).\n */\nexport function useSyncedTopScrollbar(\n  targetRef: RefObject<HTMLElement | null>,\n  enabled: boolean,\n) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const topScrollRef = useRef<HTMLDivElement>(null)\n  const scrollSyncSourceRef = useRef<'top' | 'bottom' | null>(null)\n  const [targetWidth, setTargetWidth] = useState(0)\n\n  useResizeObserver(\n    targetRef,\n    entry => setTargetWidth((entry.target as HTMLElement).offsetWidth),\n    enabled,\n  )\n\n  function handleTopScroll(e: UIEvent<HTMLDivElement>) {\n    if (scrollSyncSourceRef.current === 'bottom') {\n      scrollSyncSourceRef.current = null\n      return\n    }\n    scrollSyncSourceRef.current = 'top'\n    if (containerRef.current) {\n      containerRef.current.scrollLeft = e.currentTarget.scrollLeft\n    }\n  }\n\n  function handleBottomScroll(e: UIEvent<HTMLDivElement>) {\n    if (scrollSyncSourceRef.current === 'top') {\n      scrollSyncSourceRef.current = null\n      return\n    }\n    scrollSyncSourceRef.current = 'bottom'\n    if (topScrollRef.current) {\n      topScrollRef.current.scrollLeft = e.currentTarget.scrollLeft\n    }\n  }\n\n  return {\n    containerRef,\n    topScrollRef,\n    targetWidth,\n    handleTopScroll,\n    handleBottomScroll,\n  }\n}\n"],"mappings":";;;AAOA,SAAgB,EACd,GACA,GACA;CACA,IAAM,IAAe,EAAuB,IAAI,GAC1C,IAAe,EAAuB,IAAI,GAC1C,IAAsB,EAAgC,IAAI,GAC1D,CAAC,GAAa,KAAkB,EAAS,CAAC;CAEhD,EACE,IACA,MAAS,EAAgB,EAAM,OAAuB,WAAW,GACjE,CACF;CAEA,SAAS,EAAgB,GAA4B;EACnD,IAAI,EAAoB,YAAY,UAAU;GAC5C,EAAoB,UAAU;GAC9B;EACF;EAEA,AADA,EAAoB,UAAU,OAC1B,EAAa,YACf,EAAa,QAAQ,aAAa,EAAE,cAAc;CAEtD;CAEA,SAAS,EAAmB,GAA4B;EACtD,IAAI,EAAoB,YAAY,OAAO;GACzC,EAAoB,UAAU;GAC9B;EACF;EAEA,AADA,EAAoB,UAAU,UAC1B,EAAa,YACf,EAAa,QAAQ,aAAa,EAAE,cAAc;CAEtD;CAEA,OAAO;EACL;EACA;EACA;EACA;EACA;CACF;AACF"}

package/dist/components/TermsAndConditions/TermsAndConditions.js

@@ -14,7 +14,7 @@ function f({ termsAndConditionsTableID: f, termsAndConditionsTableVersion: p, on
 		concreteType: "org.sagebionetworks.repo.model.table.QueryBundleRequest"
 	}, { staleTime: Infinity }, !0), S = x && b.status == 404;
 	S && m(!0), r(() => {
-		if (v && v.queryResult && v.queryResult.queryResults) {
+		if (v?.queryResult?.queryResults) {
 			let { rows: e, headers: t } = v.queryResult.queryResults, n = t.findIndex((e) => e.name === "icon"), r = t.findIndex((e) => e.name === "label"), i = t.findIndex((e) => e.name === "description"), a = [];
 			e.forEach((e) => {
 				let { values: t } = e, o = {

package/dist/components/TermsAndConditions/TermsAndConditions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TermsAndConditions.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditions.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n  BUNDLE_MASK_QUERY_RESULTS,\n  URL_TERMS_CONDITIONS_AGREEMENT,\n} from '@/utils/SynapseConstants'\nimport { Alert, AlertTitle, Button, Link, Typography } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport TermsAndConditionsItem, {\n  LoadingItem,\n  tcItem,\n} from './TermsAndConditionsItem'\n\nexport type TermsAndConditionsProps = {\n  onFormChange: (formComplete: boolean) => void\n  termsAndConditionsTableID: string\n  termsAndConditionsTableVersion: string\n  hideLinkToFullTC?: boolean\n}\n\nfunction TermsAndConditions({\n  termsAndConditionsTableID,\n  termsAndConditionsTableVersion,\n  onFormChange,\n  hideLinkToFullTC = false,\n}: TermsAndConditionsProps) {\n  const [tcList, setTcList] = useState<tcItem[]>([])\n  // Fetch the table data\n  const { data, isLoading, error, isError } = useGetFullTableQueryResults(\n    {\n      entityId: termsAndConditionsTableID,\n      query: {\n        sql: `SELECT * FROM ${termsAndConditionsTableID}.${termsAndConditionsTableVersion} ORDER BY order asc`,\n      },\n      partMask: BUNDLE_MASK_QUERY_RESULTS,\n      concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    },\n    { staleTime: Infinity },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const isTermsAndConditionsTableNotFound = isError && error.status == 404\n\n  if (isTermsAndConditionsTableNotFound) {\n    // \"Pledge\" Synapse table is unavailable on this stack.  Allow agreement to the terms, but we will show a warning below\n    onFormChange(true)\n  }\n\n  // update tcList when data changes (transform)\n  useEffect(() => {\n    if (data && data.queryResult && data.queryResult.queryResults) {\n      const { rows, headers } = data.queryResult.queryResults\n      const iconColIndex = headers.findIndex(col => col.name === 'icon')\n      const labelColIndex = headers.findIndex(col => col.name === 'label')\n      const descriptionColIndex = headers.findIndex(\n        col => col.name === 'description',\n      )\n      const newTcList: tcItem[] = []\n      rows.forEach(row => {\n        const { values } = row\n        const item: tcItem = {\n          iconFileHandleId: values[iconColIndex] ?? '',\n          label: values[labelColIndex] ?? '',\n          description: values[descriptionColIndex] ?? '',\n        }\n        newTcList.push(item)\n      })\n      setTcList(newTcList)\n      const checkboxCount = newTcList.length\n      setCheckboxChecked(getInitialCheckboxState(checkboxCount))\n      // disabled all checkbox except the first one\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, 1),\n      )\n    }\n  }, [data])\n\n  const sageTermsOfService =\n    'https://www.synapse.org/TrustCenter:TermsOfService'\n  const trustCenter = 'https://sagebionetworks.org/trust-center'\n  const getInitialCheckboxState = (checkboxCount: number) =>\n    Array.from(Array(checkboxCount).fill(false))\n  let mounted = true\n\n  // State variables\n  const [checkboxChecked, setCheckboxChecked] = useState<boolean[]>([])\n  const [checkboxEnabled, setCheckboxEnabled] = useState<boolean[]>([])\n\n  useEffect(() => {\n    if (mounted) {\n      checkFormCompleted()\n    }\n    return () => {\n      mounted = false\n    }\n  }, [checkboxEnabled, checkboxChecked])\n\n  // Placeholder function to check if all checkboxes are checked and agreement is signed\n  const checkFormCompleted = () => {\n    const allCheckboxChecked =\n      checkboxChecked.length > 0 && !checkboxChecked.includes(false)\n    onFormChange(allCheckboxChecked)\n  }\n\n  const updateCheckboxState = (id: number) => {\n    const newState = !checkboxChecked[id]\n    const checkboxCount = checkboxChecked.length\n    if (newState) {\n      // if the checkbox is checked (i.e. newState is true)\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n      if (id + 2 <= tcList.length) {\n        setCheckboxEnabled(\n          getInitialCheckboxState(checkboxCount).fill(true, 0, id + 2),\n        )\n      }\n    } else {\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id),\n      )\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n    }\n  }\n\n  return (\n    <section className=\"terms-conditions\">\n      <h3 className=\"page-header\">Pledge</h3>\n      <form>\n        <label>\n          I affirm my commitment to Sage&apos;s{' '}\n          <Link target=\"_blank\" href={sageTermsOfService}>\n            Terms of Service\n          </Link>{' '}\n          and policies for responsible research and data handling (\n          <Link target=\"_blank\" href={trustCenter}>\n            Trust Center\n          </Link>\n          ), including:\n        </label>\n        {isTermsAndConditionsTableNotFound && (\n          <Alert severity=\"warning\">\n            <AlertTitle>Source data unavailable</AlertTitle>\n            <Typography variant=\"body1\">\n              We are unable to display the source table content for the Synapse\n              Pledge at this time. Please review the full{' '}\n              <Link target=\"_blank\" href={sageTermsOfService}>\n                {' '}\n                Terms of Service{' '}\n              </Link>{' '}\n              carefully before proceeding. By clicking \"Agree And Continue,\" you\n              confirm that you have read and understood the Terms and Conditions\n              for use.\n            </Typography>\n          </Alert>\n        )}\n        <ul className=\"term-list\">\n          {isLoading && <LoadingItem numLoadingItems={6} />}\n          {tcList.length > 0 &&\n            tcList.map((item, i) => {\n              return (\n                <TermsAndConditionsItem\n                  key={`tc-item-${i}`}\n                  item={item}\n                  id={i}\n                  checked={checkboxChecked[i]}\n                  enabled={checkboxEnabled[i]}\n                  termsAndConditionsTableID={termsAndConditionsTableID}\n                  onChange={updateCheckboxState}\n                />\n              )\n            })}\n        </ul>\n        {!hideLinkToFullTC && (\n          <div className=\"view-terms\">\n            <Button\n              variant={'contained'}\n              href={URL_TERMS_CONDITIONS_AGREEMENT}\n              target=\"_blank\"\n            >\n              View Complete Terms and Conditions for Use\n            </Button>\n          </div>\n        )}\n      </form>\n    </section>\n  )\n}\n\nexport default TermsAndConditions\n"],"mappings":"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"}
+{"version":3,"file":"TermsAndConditions.js","names":[],"sources":["../../../src/components/TermsAndConditions/TermsAndConditions.tsx"],"sourcesContent":["import { useGetFullTableQueryResults } from '@/synapse-queries'\nimport {\n  BUNDLE_MASK_QUERY_RESULTS,\n  URL_TERMS_CONDITIONS_AGREEMENT,\n} from '@/utils/SynapseConstants'\nimport { Alert, AlertTitle, Button, Link, Typography } from '@mui/material'\nimport { useEffect, useState } from 'react'\nimport TermsAndConditionsItem, {\n  LoadingItem,\n  tcItem,\n} from './TermsAndConditionsItem'\n\nexport type TermsAndConditionsProps = {\n  onFormChange: (formComplete: boolean) => void\n  termsAndConditionsTableID: string\n  termsAndConditionsTableVersion: string\n  hideLinkToFullTC?: boolean\n}\n\nfunction TermsAndConditions({\n  termsAndConditionsTableID,\n  termsAndConditionsTableVersion,\n  onFormChange,\n  hideLinkToFullTC = false,\n}: TermsAndConditionsProps) {\n  const [tcList, setTcList] = useState<tcItem[]>([])\n  // Fetch the table data\n  const { data, isLoading, error, isError } = useGetFullTableQueryResults(\n    {\n      entityId: termsAndConditionsTableID,\n      query: {\n        sql: `SELECT * FROM ${termsAndConditionsTableID}.${termsAndConditionsTableVersion} ORDER BY order asc`,\n      },\n      partMask: BUNDLE_MASK_QUERY_RESULTS,\n      concreteType: 'org.sagebionetworks.repo.model.table.QueryBundleRequest',\n    },\n    { staleTime: Infinity },\n    true, // force this query to be run as the anonymous user (without an access token)\n  )\n\n  const isTermsAndConditionsTableNotFound = isError && error.status == 404\n\n  if (isTermsAndConditionsTableNotFound) {\n    // \"Pledge\" Synapse table is unavailable on this stack.  Allow agreement to the terms, but we will show a warning below\n    onFormChange(true)\n  }\n\n  // update tcList when data changes (transform)\n  useEffect(() => {\n    if (data?.queryResult?.queryResults) {\n      const { rows, headers } = data.queryResult.queryResults\n      const iconColIndex = headers.findIndex(col => col.name === 'icon')\n      const labelColIndex = headers.findIndex(col => col.name === 'label')\n      const descriptionColIndex = headers.findIndex(\n        col => col.name === 'description',\n      )\n      const newTcList: tcItem[] = []\n      rows.forEach(row => {\n        const { values } = row\n        const item: tcItem = {\n          iconFileHandleId: values[iconColIndex] ?? '',\n          label: values[labelColIndex] ?? '',\n          description: values[descriptionColIndex] ?? '',\n        }\n        newTcList.push(item)\n      })\n      setTcList(newTcList)\n      const checkboxCount = newTcList.length\n      setCheckboxChecked(getInitialCheckboxState(checkboxCount))\n      // disabled all checkbox except the first one\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, 1),\n      )\n    }\n  }, [data])\n\n  const sageTermsOfService =\n    'https://www.synapse.org/TrustCenter:TermsOfService'\n  const trustCenter = 'https://sagebionetworks.org/trust-center'\n  const getInitialCheckboxState = (checkboxCount: number) =>\n    Array.from(Array(checkboxCount).fill(false))\n  let mounted = true\n\n  // State variables\n  const [checkboxChecked, setCheckboxChecked] = useState<boolean[]>([])\n  const [checkboxEnabled, setCheckboxEnabled] = useState<boolean[]>([])\n\n  useEffect(() => {\n    if (mounted) {\n      checkFormCompleted()\n    }\n    return () => {\n      mounted = false\n    }\n  }, [checkboxEnabled, checkboxChecked])\n\n  // Placeholder function to check if all checkboxes are checked and agreement is signed\n  const checkFormCompleted = () => {\n    const allCheckboxChecked =\n      checkboxChecked.length > 0 && !checkboxChecked.includes(false)\n    onFormChange(allCheckboxChecked)\n  }\n\n  const updateCheckboxState = (id: number) => {\n    const newState = !checkboxChecked[id]\n    const checkboxCount = checkboxChecked.length\n    if (newState) {\n      // if the checkbox is checked (i.e. newState is true)\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n      if (id + 2 <= tcList.length) {\n        setCheckboxEnabled(\n          getInitialCheckboxState(checkboxCount).fill(true, 0, id + 2),\n        )\n      }\n    } else {\n      setCheckboxChecked(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id),\n      )\n      setCheckboxEnabled(\n        getInitialCheckboxState(checkboxCount).fill(true, 0, id + 1),\n      )\n    }\n  }\n\n  return (\n    <section className=\"terms-conditions\">\n      <h3 className=\"page-header\">Pledge</h3>\n      <form>\n        <label>\n          I affirm my commitment to Sage&apos;s{' '}\n          <Link target=\"_blank\" href={sageTermsOfService}>\n            Terms of Service\n          </Link>{' '}\n          and policies for responsible research and data handling (\n          <Link target=\"_blank\" href={trustCenter}>\n            Trust Center\n          </Link>\n          ), including:\n        </label>\n        {isTermsAndConditionsTableNotFound && (\n          <Alert severity=\"warning\">\n            <AlertTitle>Source data unavailable</AlertTitle>\n            <Typography variant=\"body1\">\n              We are unable to display the source table content for the Synapse\n              Pledge at this time. Please review the full{' '}\n              <Link target=\"_blank\" href={sageTermsOfService}>\n                {' '}\n                Terms of Service{' '}\n              </Link>{' '}\n              carefully before proceeding. By clicking \"Agree And Continue,\" you\n              confirm that you have read and understood the Terms and Conditions\n              for use.\n            </Typography>\n          </Alert>\n        )}\n        <ul className=\"term-list\">\n          {isLoading && <LoadingItem numLoadingItems={6} />}\n          {tcList.length > 0 &&\n            tcList.map((item, i) => {\n              return (\n                <TermsAndConditionsItem\n                  key={`tc-item-${i}`}\n                  item={item}\n                  id={i}\n                  checked={checkboxChecked[i]}\n                  enabled={checkboxEnabled[i]}\n                  termsAndConditionsTableID={termsAndConditionsTableID}\n                  onChange={updateCheckboxState}\n                />\n              )\n            })}\n        </ul>\n        {!hideLinkToFullTC && (\n          <div className=\"view-terms\">\n            <Button\n              variant={'contained'}\n              href={URL_TERMS_CONDITIONS_AGREEMENT}\n              target=\"_blank\"\n            >\n              View Complete Terms and Conditions for Use\n            </Button>\n          </div>\n        )}\n      </form>\n    </section>\n  )\n}\n\nexport default TermsAndConditions\n"],"mappings":"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"}

package/dist/components/Webhook/CreateWebhookModal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateWebhookModal.d.ts","sourceRoot":"","sources":["../../../src/components/Webhook/CreateWebhookModal.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAIL,OAAO,EAER,MAAM,kCAAkC,CAAA;AAUzC,KAAK,uBAAuB,GAAG;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAgCD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA+TxE"}
+{"version":3,"file":"CreateWebhookModal.d.ts","sourceRoot":"","sources":["../../../src/components/Webhook/CreateWebhookModal.tsx"],"names":[],"mappings":"AAsBA,OAAO,EAIL,OAAO,EAER,MAAM,kCAAkC,CAAA;AAUzC,KAAK,uBAAuB,GAAG;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAgCD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA8TxE"}

package/dist/components/Webhook/CreateWebhookModal.js

@@ -72,7 +72,7 @@ function j(p) {
 	function fe() {
 		j && ue(j.id);
 	}
-	let $ = Q && Q.errorResponse && "errorCode" in Q.errorResponse && Q.errorResponse.errorCode === te.UNSUPPORTED_WEBHOOK_DOMAIN, pe = j && j.verificationStatus === ie.VERIFIED ? A : c;
+	let $ = Q?.errorResponse && "errorCode" in Q.errorResponse && Q.errorResponse.errorCode === te.UNSUPPORTED_WEBHOOK_DOMAIN, pe = j && j.verificationStatus === ie.VERIFIED ? A : c;
 	return /* @__PURE__ */ E(n, {
 		open: M,
 		title: "Create New Webhook",