synapse-react-client 4.0.5 → 4.0.6

package/dist/components/SynapseTable/SynapseTable.js

@@ -1,17 +1,17 @@
-import { jsx as r, Fragment as Y, jsxs as Z } from "react/jsx-runtime";
+import { jsx as a, Fragment as Z, jsxs as $ } from "react/jsx-runtime";
 import "../../synapse-client/SynapseClient.js";
 import "@sage-bionetworks/synapse-client/generated/models/ErrorResponseCode";
 import "@sage-bionetworks/synapse-client/generated/models/TwoFactorAuthErrorResponse";
 import "@sage-bionetworks/synapse-client/util/SynapseClientError";
-import { ColumnTypeEnum as $ } from "@sage-bionetworks/synapse-types";
+import { ColumnTypeEnum as o } from "@sage-bionetworks/synapse-types";
 import "../../utils/functions/EntityTypeUtils.js";
 import "../../utils/SynapseConstants.js";
 import "lodash-es";
 import "@sage-bionetworks/synapse-client/util/synapseClientFetch";
 import "@tanstack/react-query";
 import "../../utils/PermissionLevelToAccessType.js";
-import { useMemo as s, useState as oo } from "react";
-import { useSynapseContext as eo } from "../../utils/context/SynapseContext.js";
+import { useMemo as l, useState as ee } from "react";
+import { useSynapseContext as oe } from "../../utils/context/SynapseContext.js";
 import "use-deep-compare-effect";
 import "@mui/material";
 import "../../utils/hooks/useCookiePreferences.js";
@@ -28,124 +28,153 @@ import "lodash-es/xorWith";
 import "react-router";
 import "@sage-bionetworks/synapse-client";
 import "../../utils/types/IsType.js";
-import { useGetEntity as to } from "../../synapse-queries/entity/useEntity.js";
-import { useReactTable as no, getCoreRowModel as ro, createColumnHelper as so } from "@tanstack/react-table";
-import { useAtomValue as io } from "jotai";
-import { ModalDownload as lo } from "../ModalDownload/ModalDownload.js";
-import { useQueryContext as ao } from "../QueryContext/QueryContext.js";
-import { useQueryVisualizationContext as mo } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
-import { isRowSelectionVisibleAtom as uo } from "../QueryWrapper/TableRowSelectionState.js";
-import co from "../TanStackTable/StyledTanStackTable.js";
-import { SynapseTableContext as po } from "./SynapseTableContext.js";
-import { rowSelectionColumn as R, addToDownloadListColumn as A, directDownloadColumn as V, accessColumn as E, TableDataCell as Co, TableDataColumnHeader as wo } from "./SynapseTableRenderers.js";
-import { isEntityViewOrDatasetOrCollection as fo, isFileViewOrDataset as ho, isSortableColumn as bo } from "./SynapseTableUtils.js";
-import { usePrefetchResourcesInTable as yo } from "./usePrefetchTableData.js";
-import { useTableSort as So } from "./useTableSort.js";
-const To = [], Do = so();
-function pe(i) {
-  const { showDownloadColumn: m, hideDownload: M } = i, {
-    rowSet: o,
-    isLoadingNewPage: N,
-    customColumns: C = To,
-    showAccessColumn: u,
-    showExternalAccessIcon: w,
-    showAccessColumnHeader: f,
-    showDirectDownloadColumn: O = m,
-    hideAddToDownloadListColumn: P = M,
-    columnLinks: h
-  } = i, {
-    entityId: q,
-    versionNumber: B,
-    getCurrentQueryRequest: b,
-    fileIdColumnName: l,
-    fileVersionColumnName: y
-  } = ao(), d = s(
-    () => b(),
-    [b]
-  ), n = o.headers, { data: a } = to(q, B), { columnsToShowInTable: S, NoContentPlaceholder: L } = mo(), H = s(
+import { useGetEntity as te } from "../../synapse-queries/entity/useEntity.js";
+import { useReactTable as ne, getCoreRowModel as re, createColumnHelper as se } from "@tanstack/react-table";
+import { useAtomValue as ie } from "jotai";
+import { ModalDownload as ae } from "../ModalDownload/ModalDownload.js";
+import { useQueryContext as le } from "../QueryContext/QueryContext.js";
+import { useQueryVisualizationContext as me } from "../QueryVisualizationWrapper/QueryVisualizationContext.js";
+import { isRowSelectionVisibleAtom as ue } from "../QueryWrapper/TableRowSelectionState.js";
+import ce from "../TanStackTable/StyledTanStackTable.js";
+import { SynapseTableContext as de } from "./SynapseTableContext.js";
+import { rowSelectionColumn as x, addToDownloadListColumn as L, directDownloadColumn as N, accessColumn as V, TableDataCell as pe, TableDataColumnHeader as Ce } from "./SynapseTableRenderers.js";
+import { isEntityViewOrDatasetOrCollection as fe, isFileViewOrDataset as we, isSortableColumn as Se } from "./SynapseTableUtils.js";
+import { usePrefetchResourcesInTable as Te } from "./usePrefetchTableData.js";
+import { useTableSort as Ie } from "./useTableSort.js";
+const De = [];
+function he(r, s) {
+  const m = r.toLowerCase();
+  if (m.includes("name") || m.includes("description"))
+    return 250;
+  switch (s) {
+    case o.ENTITYID:
+    case o.ENTITYID_LIST:
+    case o.USERID:
+    case o.USERID_LIST:
+    case o.FILEHANDLEID:
+    case o.EVALUATIONID:
+    case o.SUBMISSIONID:
+      return 180;
+    case o.DATE:
+    case o.DATE_LIST:
+      return 120;
+    case o.STRING:
+    case o.STRING_LIST:
+      return 100;
+    default:
+      return 60;
+  }
+}
+const ye = se();
+function Co(r) {
+  const { showDownloadColumn: s, hideDownload: m } = r, {
+    rowSet: t,
+    isLoadingNewPage: O,
+    customColumns: w = De,
+    showAccessColumn: d,
+    showExternalAccessIcon: S,
+    showAccessColumnHeader: T,
+    showDirectDownloadColumn: v = s,
+    hideAddToDownloadListColumn: B = m,
+    columnLinks: I
+  } = r, {
+    entityId: P,
+    versionNumber: q,
+    getCurrentQueryRequest: D,
+    fileIdColumnName: u,
+    fileVersionColumnName: h
+  } = le(), p = l(
+    () => D(),
+    [D]
+  ), i = t.headers, { data: c } = te(P, q), { columnsToShowInTable: y, NoContentPlaceholder: z } = me(), H = l(
     () => ({
-      columnLinks: h,
-      showExternalAccessIcon: w
+      columnLinks: I,
+      showExternalAccessIcon: S
     }),
-    [h, w]
-  ), { isAuthenticated: z } = eo(), [F, Q] = oo(!1), { sort: U, setSort: j } = So(), c = io(uo), T = !!(u && a && (fo(a) && v(o) || l)), D = a && z && (ho(a) && v(o) || l), g = !!(D && O), x = !!(D && !P && !c), k = l ? o.headers.findIndex((e) => e.name == l) : void 0, W = y ? o.headers.findIndex((e) => e.name == y) : void 0, _ = s(
+    [I, S]
+  ), { isAuthenticated: U } = oe(), [_, F] = ee(!1), { sort: G, setSort: Q } = Ie(), C = ie(ue), b = !!(d && c && (fe(c) && M(t) || u)), g = c && U && (we(c) && M(t) || u), E = !!(g && v), R = !!(g && !B && !C), j = u ? t.headers.findIndex((e) => e.name == u) : void 0, k = h ? t.headers.findIndex((e) => e.name == h) : void 0, W = l(
     () => [
-      ...C,
-      R,
-      A,
-      V,
+      ...w,
+      x,
+      L,
+      N,
       {
-        ...E,
-        header: u && f ? "Access" : ""
+        ...V,
+        header: d && T ? "Access" : ""
       },
-      ...n.map((e, t) => Do.accessor((p) => p.values[t], {
+      ...i.map((e, n) => ye.accessor((f) => f.values[n], {
         id: e.name,
-        enableSorting: bo(e.columnType),
+        enableSorting: Se(e.columnType),
         enableResizing: !0,
-        header: wo,
-        cell: Co
+        minSize: he(
+          e.name,
+          e.columnType
+        ),
+        header: Ce,
+        cell: pe
       })) ?? []
     ],
-    [C, n, u, f]
-  ), I = s(
+    [w, i, d, T]
+  ), A = l(
     () => ({
-      [R.id]: c,
-      [A.id]: x,
-      [V.id]: g,
-      [E.id]: T
+      [x.id]: C,
+      [L.id]: R,
+      [N.id]: E,
+      [V.id]: b
     }),
     [
-      c,
-      T,
-      x,
-      g
+      C,
+      b,
+      R,
+      E
     ]
-  ), G = s(
-    () => n.reduce((e, t) => ({
+  ), Y = l(
+    () => i.reduce((e, n) => ({
       ...e,
-      [t.name]: S.includes(t.name)
-    }), I),
-    [S, n, I]
-  ), { dataHasBeenPrefetched: J } = yo(o), K = N || !J, X = no({
-    data: o.rows,
-    columns: _,
-    getCoreRowModel: ro(),
+      [n.name]: y.includes(n.name)
+    }), A),
+    [y, i, A]
+  ), { dataHasBeenPrefetched: J } = Te(t), K = O || !J, X = ne({
+    data: t.rows,
+    columns: W,
+    defaultColumn: { minSize: 60 },
+    getCoreRowModel: re(),
     manualSorting: !0,
     manualFiltering: !0,
-    onSortingChange: j,
+    onSortingChange: Q,
     enableMultiSort: !0,
     columnResizeMode: "onChange",
     state: {
-      sorting: U,
-      columnVisibility: G
+      sorting: G,
+      columnVisibility: Y
     },
     meta: {
-      rowSet: o,
+      rowSet: t,
       // make the rowEntityIDColumnIndex available to all cell renderers
-      rowEntityIDColumnIndex: k,
-      rowEntityVersionColumnIndex: W,
+      rowEntityIDColumnIndex: j,
+      rowEntityVersionColumnIndex: k,
       renderPlaceholderData: K,
       getWrapInExpandableTd: (e) => {
-        const t = n.find(
-          (p) => p.name === e.column.id
+        const n = i.find(
+          (f) => f.name === e.column.id
         );
-        return !!(t && /* JSON handles its own overflow*/
-        t.columnType !== $.JSON);
+        return !!(n && /* JSON handles its own overflow*/
+        n.columnType !== o.JSON);
       }
     }
   });
-  return o ? !((o.rows?.length ?? 0) > 0) && (d.query.offset === 0 || d.query.offset == null) ? /* @__PURE__ */ r(L, {}) : /* @__PURE__ */ r(po.Provider, { value: H, children: /* @__PURE__ */ Z("div", { children: [
-    F && /* @__PURE__ */ r(
-      lo,
+  return t ? !((t.rows?.length ?? 0) > 0) && (p.query.offset === 0 || p.query.offset == null) ? /* @__PURE__ */ a(z, {}) : /* @__PURE__ */ a(de.Provider, { value: H, children: /* @__PURE__ */ $("div", { children: [
+    _ && /* @__PURE__ */ a(
+      ae,
       {
         onClose: () => {
-          Q(!1);
+          F(!1);
         },
-        queryBundleRequest: d
+        queryBundleRequest: p
       }
     ),
-    /* @__PURE__ */ r(
-      co,
+    /* @__PURE__ */ a(
+      ce,
       {
         styledTableContainerProps: {
           className: "SynapseTable",
@@ -157,12 +186,13 @@ function pe(i) {
         autoColumnSizing: !0
       }
     )
-  ] }) }) : /* @__PURE__ */ r(Y, {});
+  ] }) }) : /* @__PURE__ */ a(Z, {});
 }
-function v(i) {
-  return !!i.rows?.every((m) => !!m.rowId);
+function M(r) {
+  return !!r.rows?.every((s) => !!s.rowId);
 }
 export {
-  pe as SynapseTable
+  Co as SynapseTable,
+  he as getColumnMinSize
 };
 //# sourceMappingURL=SynapseTable.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseTable.js","sources":["../../../src/components/SynapseTable/SynapseTable.tsx"],"sourcesContent":["import { useGetEntity } from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils'\nimport {\n  ColumnTypeEnum,\n  Row,\n  RowSet,\n  Table,\n} from '@sage-bionetworks/synapse-types'\nimport {\n  Cell,\n  ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table'\nimport { useAtomValue } from 'jotai'\nimport { useMemo, useState } from 'react'\nimport { LabelLinkConfig } from '../CardContainerLogic'\nimport ModalDownload from '../ModalDownload/ModalDownload'\nimport { useQueryContext } from '../QueryContext'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { isRowSelectionVisibleAtom } from '../QueryWrapper/TableRowSelectionState'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { SynapseTableContext } from './SynapseTableContext'\nimport {\n  accessColumn,\n  addToDownloadListColumn,\n  directDownloadColumn,\n  rowSelectionColumn,\n  TableDataCell,\n  TableDataColumnHeader,\n} from './SynapseTableRenderers'\nimport {\n  isEntityViewOrDatasetOrCollection,\n  isFileViewOrDataset,\n  isSortableColumn,\n} from './SynapseTableUtils'\nimport { usePrefetchResourcesInTable } from './usePrefetchTableData'\nimport { useTableSort } from './useTableSort'\n\nconst DEFAULT_CUSTOM_COLUMNS: ColumnDef<Row, any>[] = []\n\nexport type SynapseTableConfiguration = Pick<\n  SynapseTableProps,\n  | 'showAccessColumn'\n  | 'showExternalAccessIcon'\n  | 'showAccessColumnHeader'\n  | 'showDownloadColumn'\n  | 'hideDownload'\n  | 'showDirectDownloadColumn'\n  | 'hideAddToDownloadListColumn'\n  | 'columnLinks'\n  | 'customColumns'\n>\n\nexport type SynapseTableProps = {\n  /** The row data shown in the table. */\n  rowSet: RowSet\n  /** Whether a new page of data is being loaded */\n  isLoadingNewPage: boolean\n  /** Custom columns to render in the table */\n  customColumns?: ColumnDef<Row, any>[]\n  /** If true and entity is a view or dataset, renders a column that represents if the caller has permission to download the entity represented by the row */\n  showAccessColumn?: boolean\n  /**\n   * If true, the component will show enhanced UI for the case where\n   * - the entity is a FileEntity, AND\n   * - the caller has permission to fetch the dataFileHandle, AND\n   * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n   * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk  contexts if possible.\n   * @default false\n   */\n  showExternalAccessIcon?: boolean\n  showAccessColumnHeader?: boolean\n  /** @deprecated use showDirectDownloadColumn */\n  showDownloadColumn?: boolean\n  /** @deprecated use hideAddToDownloadListColumn */\n  hideDownload?: boolean\n  /** If true and entity is a file view or dataset, renders a column that allows the logged-in user to directly download the file, if they have permission */\n  showDirectDownloadColumn?: boolean\n  /** If true, the add to download list column will be hidden */\n  hideAddToDownloadListColumn?: boolean\n  /** Configuration to override cell renderers with e.g. a link to a portals detail page */\n  columnLinks?: LabelLinkConfig\n}\n\nconst columnHelper = createColumnHelper<Row>()\n\nexport function SynapseTable(props: SynapseTableProps) {\n  const { showDownloadColumn, hideDownload } = props\n  const {\n    rowSet,\n    isLoadingNewPage,\n    customColumns = DEFAULT_CUSTOM_COLUMNS,\n    showAccessColumn,\n    showExternalAccessIcon,\n    showAccessColumnHeader,\n    showDirectDownloadColumn = showDownloadColumn,\n    hideAddToDownloadListColumn = hideDownload,\n    columnLinks,\n  } = props\n  const {\n    entityId,\n    versionNumber,\n    getCurrentQueryRequest,\n    fileIdColumnName,\n    fileVersionColumnName,\n  } = useQueryContext()\n  const queryRequest = useMemo(\n    () => getCurrentQueryRequest(),\n    [getCurrentQueryRequest],\n  )\n\n  const selectColumns = rowSet.headers\n\n  const { data: entity } = useGetEntity<Table>(entityId, versionNumber)\n\n  const { columnsToShowInTable, NoContentPlaceholder } =\n    useQueryVisualizationContext()\n  const synapseTableContext = useMemo(\n    () => ({\n      columnLinks,\n      showExternalAccessIcon,\n    }),\n    [columnLinks, showExternalAccessIcon],\n  )\n  const { isAuthenticated } = useSynapseContext()\n\n  const [isExportTableDownloadOpen, setIsExportTableDownloadOpen] =\n    useState(false)\n\n  const { sort, setSort } = useTableSort()\n  const isRowSelectionVisible = useAtomValue(isRowSelectionVisibleAtom)\n\n  const isShowingAccessColumn: boolean = Boolean(\n    showAccessColumn &&\n      entity &&\n      ((isEntityViewOrDatasetOrCollection(entity) && allRowsHaveId(rowSet)) ||\n        fileIdColumnName),\n  )\n  const rowsAreDownloadable =\n    entity &&\n    isAuthenticated &&\n    ((isFileViewOrDataset(entity) && allRowsHaveId(rowSet)) || fileIdColumnName)\n\n  const isShowingDirectDownloadColumn = Boolean(\n    rowsAreDownloadable && showDirectDownloadColumn,\n  )\n\n  const isShowingAddToV2DownloadListColumn: boolean = Boolean(\n    rowsAreDownloadable &&\n      !hideAddToDownloadListColumn &&\n      !isRowSelectionVisible,\n  )\n  const rowEntityIDColumnIndex = fileIdColumnName\n    ? rowSet.headers.findIndex(col => col.name == fileIdColumnName)\n    : undefined\n  const rowEntityVersionColumnIndex = fileVersionColumnName\n    ? rowSet.headers.findIndex(col => col.name == fileVersionColumnName)\n    : undefined\n\n  const columns = useMemo(\n    () => [\n      ...customColumns,\n      rowSelectionColumn,\n      addToDownloadListColumn,\n      directDownloadColumn,\n      {\n        ...accessColumn,\n        header: showAccessColumn && showAccessColumnHeader ? 'Access' : '',\n      },\n      ...(selectColumns.map((selectColumn, index) => {\n        return columnHelper.accessor(row => row.values[index], {\n          id: selectColumn.name,\n          enableSorting: isSortableColumn(selectColumn.columnType),\n          enableResizing: true,\n          header: TableDataColumnHeader,\n          cell: TableDataCell,\n        })\n      }) ?? []),\n    ],\n    [customColumns, selectColumns, showAccessColumn, showAccessColumnHeader],\n  )\n\n  const prependColumnVisibility: VisibilityState = useMemo(\n    () => ({\n      [rowSelectionColumn.id as string]: isRowSelectionVisible,\n      [addToDownloadListColumn.id as string]:\n        isShowingAddToV2DownloadListColumn,\n      [directDownloadColumn.id as string]: isShowingDirectDownloadColumn,\n      [accessColumn.id as string]: isShowingAccessColumn,\n    }),\n    [\n      isRowSelectionVisible,\n      isShowingAccessColumn,\n      isShowingAddToV2DownloadListColumn,\n      isShowingDirectDownloadColumn,\n    ],\n  )\n\n  // Transform our `columnsToShowInTable` to @tanstack/react-table's `VisibilityState`\n  const columnVisibility: VisibilityState = useMemo(\n    () =>\n      selectColumns.reduce((prev: VisibilityState, curr) => {\n        return {\n          ...prev,\n          [curr.name]: columnsToShowInTable.includes(curr.name),\n        }\n      }, prependColumnVisibility),\n    [columnsToShowInTable, selectColumns, prependColumnVisibility],\n  )\n\n  const { dataHasBeenPrefetched } = usePrefetchResourcesInTable(rowSet)\n  const renderTableDataPlaceholder = isLoadingNewPage || !dataHasBeenPrefetched\n\n  const table = useReactTable({\n    data: rowSet.rows,\n    columns,\n    getCoreRowModel: getCoreRowModel(),\n    manualSorting: true,\n    manualFiltering: true,\n    onSortingChange: setSort,\n    enableMultiSort: true,\n    columnResizeMode: 'onChange',\n    state: {\n      sorting: sort,\n      columnVisibility: columnVisibility,\n    },\n    meta: {\n      rowSet,\n      // make the rowEntityIDColumnIndex available to all cell renderers\n      rowEntityIDColumnIndex,\n      rowEntityVersionColumnIndex,\n      renderPlaceholderData: renderTableDataPlaceholder,\n      getWrapInExpandableTd: (cell: Cell<Row, unknown>) => {\n        const selectColumn = selectColumns.find(\n          cm => cm.name === cell.column.id,\n        )\n        return Boolean(\n          selectColumn &&\n            /* JSON handles its own overflow*/\n            selectColumn.columnType !== ColumnTypeEnum.JSON,\n        )\n      },\n    },\n  })\n\n  /**\n   * Display the view\n   */\n  if (!rowSet) {\n    return <></>\n  }\n  const hasResults = (rowSet.rows?.length ?? 0) > 0\n  // Show the No Results UI if the current page has no rows, and this is the first page of data (offset === 0 or null/undefined).\n  if (\n    !hasResults &&\n    (queryRequest.query.offset === 0 || queryRequest.query.offset == null)\n  ) {\n    return <NoContentPlaceholder />\n  }\n\n  return (\n    <SynapseTableContext.Provider value={synapseTableContext}>\n      <div>\n        {isExportTableDownloadOpen && (\n          <ModalDownload\n            onClose={() => {\n              setIsExportTableDownloadOpen(false)\n            }}\n            queryBundleRequest={queryRequest}\n          />\n        )}\n        <StyledTanStackTable\n          styledTableContainerProps={{\n            className: 'SynapseTable',\n            ['data-testid']: 'SynapseTable',\n            density: 'default',\n          }}\n          table={table}\n          fullWidth={false}\n          autoColumnSizing={true}\n        />\n      </div>\n    </SynapseTableContext.Provider>\n  )\n}\n\n/**\n * If this is a view/dataset and rows have an ID, then rows represent individual objects in Synapse.\n * Presence of row IDs also indicates that the query is also necessarily not summary data, e.g. the query does\n * not include an operation like GROUP BY, DISTINCT, etc., that would cause rows to not map 1:1 to Synapse Entities\n */\nfunction allRowsHaveId(rowSet: RowSet): boolean {\n  return Boolean(rowSet.rows?.every(row => !!row.rowId))\n}\n"],"names":["DEFAULT_CUSTOM_COLUMNS","columnHelper","createColumnHelper","SynapseTable","props","showDownloadColumn","hideDownload","rowSet","isLoadingNewPage","customColumns","showAccessColumn","showExternalAccessIcon","showAccessColumnHeader","showDirectDownloadColumn","hideAddToDownloadListColumn","columnLinks","entityId","versionNumber","getCurrentQueryRequest","fileIdColumnName","fileVersionColumnName","useQueryContext","queryRequest","useMemo","selectColumns","entity","useGetEntity","columnsToShowInTable","NoContentPlaceholder","useQueryVisualizationContext","synapseTableContext","isAuthenticated","useSynapseContext","isExportTableDownloadOpen","setIsExportTableDownloadOpen","useState","sort","setSort","useTableSort","isRowSelectionVisible","useAtomValue","isRowSelectionVisibleAtom","isShowingAccessColumn","isEntityViewOrDatasetOrCollection","allRowsHaveId","rowsAreDownloadable","isFileViewOrDataset","isShowingDirectDownloadColumn","isShowingAddToV2DownloadListColumn","rowEntityIDColumnIndex","col","rowEntityVersionColumnIndex","columns","rowSelectionColumn","addToDownloadListColumn","directDownloadColumn","accessColumn","selectColumn","index","row","isSortableColumn","TableDataColumnHeader","TableDataCell","prependColumnVisibility","columnVisibility","prev","curr","dataHasBeenPrefetched","usePrefetchResourcesInTable","renderTableDataPlaceholder","table","useReactTable","getCoreRowModel","cell","cm","ColumnTypeEnum","SynapseTableContext","jsx","ModalDownload","StyledTanStackTable","Fragment"],"mappings":"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"}
+{"version":3,"file":"SynapseTable.js","sources":["../../../src/components/SynapseTable/SynapseTable.tsx"],"sourcesContent":["import { useGetEntity } from '@/synapse-queries'\nimport { useSynapseContext } from '@/utils'\nimport {\n  ColumnTypeEnum,\n  Row,\n  RowSet,\n  Table,\n} from '@sage-bionetworks/synapse-types'\nimport {\n  Cell,\n  ColumnDef,\n  createColumnHelper,\n  getCoreRowModel,\n  useReactTable,\n  VisibilityState,\n} from '@tanstack/react-table'\nimport { useAtomValue } from 'jotai'\nimport { useMemo, useState } from 'react'\nimport { LabelLinkConfig } from '../CardContainerLogic'\nimport ModalDownload from '../ModalDownload/ModalDownload'\nimport { useQueryContext } from '../QueryContext'\nimport { useQueryVisualizationContext } from '../QueryVisualizationWrapper'\nimport { isRowSelectionVisibleAtom } from '../QueryWrapper/TableRowSelectionState'\nimport StyledTanStackTable from '../TanStackTable/StyledTanStackTable'\nimport { SynapseTableContext } from './SynapseTableContext'\nimport {\n  accessColumn,\n  addToDownloadListColumn,\n  directDownloadColumn,\n  rowSelectionColumn,\n  TableDataCell,\n  TableDataColumnHeader,\n} from './SynapseTableRenderers'\nimport {\n  isEntityViewOrDatasetOrCollection,\n  isFileViewOrDataset,\n  isSortableColumn,\n} from './SynapseTableUtils'\nimport { usePrefetchResourcesInTable } from './usePrefetchTableData'\nimport { useTableSort } from './useTableSort'\n\nconst DEFAULT_CUSTOM_COLUMNS: ColumnDef<Row, any>[] = []\n\n/**\n * Returns the minimum column width (in px) for a Synapse table column\n * based on its type and name.\n */\nexport function getColumnMinSize(\n  columnName: string,\n  columnType: ColumnTypeEnum,\n): number {\n  const nameLower = columnName.toLowerCase()\n  if (nameLower.includes('name') || nameLower.includes('description')) {\n    return 250\n  }\n  switch (columnType) {\n    case ColumnTypeEnum.ENTITYID:\n    case ColumnTypeEnum.ENTITYID_LIST:\n    case ColumnTypeEnum.USERID:\n    case ColumnTypeEnum.USERID_LIST:\n    case ColumnTypeEnum.FILEHANDLEID:\n    case ColumnTypeEnum.EVALUATIONID:\n    case ColumnTypeEnum.SUBMISSIONID:\n      return 180\n    case ColumnTypeEnum.DATE:\n    case ColumnTypeEnum.DATE_LIST:\n      return 120\n    case ColumnTypeEnum.STRING:\n    case ColumnTypeEnum.STRING_LIST:\n      return 100\n    default:\n      return 60\n  }\n}\n\nexport type SynapseTableConfiguration = Pick<\n  SynapseTableProps,\n  | 'showAccessColumn'\n  | 'showExternalAccessIcon'\n  | 'showAccessColumnHeader'\n  | 'showDownloadColumn'\n  | 'hideDownload'\n  | 'showDirectDownloadColumn'\n  | 'hideAddToDownloadListColumn'\n  | 'columnLinks'\n  | 'customColumns'\n>\n\nexport type SynapseTableProps = {\n  /** The row data shown in the table. */\n  rowSet: RowSet\n  /** Whether a new page of data is being loaded */\n  isLoadingNewPage: boolean\n  /** Custom columns to render in the table */\n  customColumns?: ColumnDef<Row, any>[]\n  /** If true and entity is a view or dataset, renders a column that represents if the caller has permission to download the entity represented by the row */\n  showAccessColumn?: boolean\n  /**\n   * If true, the component will show enhanced UI for the case where\n   * - the entity is a FileEntity, AND\n   * - the caller has permission to fetch the dataFileHandle, AND\n   * - the dataFileHandle is an instance of ExternalFileHandleInterface (i.e. the file is not controlled by Synapse)\n   * Note that this requires an additional API call that cannot be batched, so it should be avoided in bulk  contexts if possible.\n   * @default false\n   */\n  showExternalAccessIcon?: boolean\n  showAccessColumnHeader?: boolean\n  /** @deprecated use showDirectDownloadColumn */\n  showDownloadColumn?: boolean\n  /** @deprecated use hideAddToDownloadListColumn */\n  hideDownload?: boolean\n  /** If true and entity is a file view or dataset, renders a column that allows the logged-in user to directly download the file, if they have permission */\n  showDirectDownloadColumn?: boolean\n  /** If true, the add to download list column will be hidden */\n  hideAddToDownloadListColumn?: boolean\n  /** Configuration to override cell renderers with e.g. a link to a portals detail page */\n  columnLinks?: LabelLinkConfig\n}\n\nconst columnHelper = createColumnHelper<Row>()\n\nexport function SynapseTable(props: SynapseTableProps) {\n  const { showDownloadColumn, hideDownload } = props\n  const {\n    rowSet,\n    isLoadingNewPage,\n    customColumns = DEFAULT_CUSTOM_COLUMNS,\n    showAccessColumn,\n    showExternalAccessIcon,\n    showAccessColumnHeader,\n    showDirectDownloadColumn = showDownloadColumn,\n    hideAddToDownloadListColumn = hideDownload,\n    columnLinks,\n  } = props\n  const {\n    entityId,\n    versionNumber,\n    getCurrentQueryRequest,\n    fileIdColumnName,\n    fileVersionColumnName,\n  } = useQueryContext()\n  const queryRequest = useMemo(\n    () => getCurrentQueryRequest(),\n    [getCurrentQueryRequest],\n  )\n\n  const selectColumns = rowSet.headers\n\n  const { data: entity } = useGetEntity<Table>(entityId, versionNumber)\n\n  const { columnsToShowInTable, NoContentPlaceholder } =\n    useQueryVisualizationContext()\n  const synapseTableContext = useMemo(\n    () => ({\n      columnLinks,\n      showExternalAccessIcon,\n    }),\n    [columnLinks, showExternalAccessIcon],\n  )\n  const { isAuthenticated } = useSynapseContext()\n\n  const [isExportTableDownloadOpen, setIsExportTableDownloadOpen] =\n    useState(false)\n\n  const { sort, setSort } = useTableSort()\n  const isRowSelectionVisible = useAtomValue(isRowSelectionVisibleAtom)\n\n  const isShowingAccessColumn: boolean = Boolean(\n    showAccessColumn &&\n      entity &&\n      ((isEntityViewOrDatasetOrCollection(entity) && allRowsHaveId(rowSet)) ||\n        fileIdColumnName),\n  )\n  const rowsAreDownloadable =\n    entity &&\n    isAuthenticated &&\n    ((isFileViewOrDataset(entity) && allRowsHaveId(rowSet)) || fileIdColumnName)\n\n  const isShowingDirectDownloadColumn = Boolean(\n    rowsAreDownloadable && showDirectDownloadColumn,\n  )\n\n  const isShowingAddToV2DownloadListColumn: boolean = Boolean(\n    rowsAreDownloadable &&\n      !hideAddToDownloadListColumn &&\n      !isRowSelectionVisible,\n  )\n  const rowEntityIDColumnIndex = fileIdColumnName\n    ? rowSet.headers.findIndex(col => col.name == fileIdColumnName)\n    : undefined\n  const rowEntityVersionColumnIndex = fileVersionColumnName\n    ? rowSet.headers.findIndex(col => col.name == fileVersionColumnName)\n    : undefined\n\n  const columns = useMemo(\n    () => [\n      ...customColumns,\n      rowSelectionColumn,\n      addToDownloadListColumn,\n      directDownloadColumn,\n      {\n        ...accessColumn,\n        header: showAccessColumn && showAccessColumnHeader ? 'Access' : '',\n      },\n      ...(selectColumns.map((selectColumn, index) => {\n        return columnHelper.accessor(row => row.values[index], {\n          id: selectColumn.name,\n          enableSorting: isSortableColumn(selectColumn.columnType),\n          enableResizing: true,\n          minSize: getColumnMinSize(\n            selectColumn.name,\n            selectColumn.columnType as ColumnTypeEnum,\n          ),\n          header: TableDataColumnHeader,\n          cell: TableDataCell,\n        })\n      }) ?? []),\n    ],\n    [customColumns, selectColumns, showAccessColumn, showAccessColumnHeader],\n  )\n\n  const prependColumnVisibility: VisibilityState = useMemo(\n    () => ({\n      [rowSelectionColumn.id as string]: isRowSelectionVisible,\n      [addToDownloadListColumn.id as string]:\n        isShowingAddToV2DownloadListColumn,\n      [directDownloadColumn.id as string]: isShowingDirectDownloadColumn,\n      [accessColumn.id as string]: isShowingAccessColumn,\n    }),\n    [\n      isRowSelectionVisible,\n      isShowingAccessColumn,\n      isShowingAddToV2DownloadListColumn,\n      isShowingDirectDownloadColumn,\n    ],\n  )\n\n  // Transform our `columnsToShowInTable` to @tanstack/react-table's `VisibilityState`\n  const columnVisibility: VisibilityState = useMemo(\n    () =>\n      selectColumns.reduce((prev: VisibilityState, curr) => {\n        return {\n          ...prev,\n          [curr.name]: columnsToShowInTable.includes(curr.name),\n        }\n      }, prependColumnVisibility),\n    [columnsToShowInTable, selectColumns, prependColumnVisibility],\n  )\n\n  const { dataHasBeenPrefetched } = usePrefetchResourcesInTable(rowSet)\n  const renderTableDataPlaceholder = isLoadingNewPage || !dataHasBeenPrefetched\n\n  const table = useReactTable({\n    data: rowSet.rows,\n    columns,\n    defaultColumn: { minSize: 60 },\n    getCoreRowModel: getCoreRowModel(),\n    manualSorting: true,\n    manualFiltering: true,\n    onSortingChange: setSort,\n    enableMultiSort: true,\n    columnResizeMode: 'onChange',\n    state: {\n      sorting: sort,\n      columnVisibility: columnVisibility,\n    },\n    meta: {\n      rowSet,\n      // make the rowEntityIDColumnIndex available to all cell renderers\n      rowEntityIDColumnIndex,\n      rowEntityVersionColumnIndex,\n      renderPlaceholderData: renderTableDataPlaceholder,\n      getWrapInExpandableTd: (cell: Cell<Row, unknown>) => {\n        const selectColumn = selectColumns.find(\n          cm => cm.name === cell.column.id,\n        )\n        return Boolean(\n          selectColumn &&\n            /* JSON handles its own overflow*/\n            selectColumn.columnType !== ColumnTypeEnum.JSON,\n        )\n      },\n    },\n  })\n\n  /**\n   * Display the view\n   */\n  if (!rowSet) {\n    return <></>\n  }\n  const hasResults = (rowSet.rows?.length ?? 0) > 0\n  // Show the No Results UI if the current page has no rows, and this is the first page of data (offset === 0 or null/undefined).\n  if (\n    !hasResults &&\n    (queryRequest.query.offset === 0 || queryRequest.query.offset == null)\n  ) {\n    return <NoContentPlaceholder />\n  }\n\n  return (\n    <SynapseTableContext.Provider value={synapseTableContext}>\n      <div>\n        {isExportTableDownloadOpen && (\n          <ModalDownload\n            onClose={() => {\n              setIsExportTableDownloadOpen(false)\n            }}\n            queryBundleRequest={queryRequest}\n          />\n        )}\n        <StyledTanStackTable\n          styledTableContainerProps={{\n            className: 'SynapseTable',\n            ['data-testid']: 'SynapseTable',\n            density: 'default',\n          }}\n          table={table}\n          fullWidth={false}\n          autoColumnSizing={true}\n        />\n      </div>\n    </SynapseTableContext.Provider>\n  )\n}\n\n/**\n * If this is a view/dataset and rows have an ID, then rows represent individual objects in Synapse.\n * Presence of row IDs also indicates that the query is also necessarily not summary data, e.g. the query does\n * not include an operation like GROUP BY, DISTINCT, etc., that would cause rows to not map 1:1 to Synapse Entities\n */\nfunction allRowsHaveId(rowSet: RowSet): boolean {\n  return Boolean(rowSet.rows?.every(row => !!row.rowId))\n}\n"],"names":["DEFAULT_CUSTOM_COLUMNS","getColumnMinSize","columnName","columnType","nameLower","ColumnTypeEnum","columnHelper","createColumnHelper","SynapseTable","props","showDownloadColumn","hideDownload","rowSet","isLoadingNewPage","customColumns","showAccessColumn","showExternalAccessIcon","showAccessColumnHeader","showDirectDownloadColumn","hideAddToDownloadListColumn","columnLinks","entityId","versionNumber","getCurrentQueryRequest","fileIdColumnName","fileVersionColumnName","useQueryContext","queryRequest","useMemo","selectColumns","entity","useGetEntity","columnsToShowInTable","NoContentPlaceholder","useQueryVisualizationContext","synapseTableContext","isAuthenticated","useSynapseContext","isExportTableDownloadOpen","setIsExportTableDownloadOpen","useState","sort","setSort","useTableSort","isRowSelectionVisible","useAtomValue","isRowSelectionVisibleAtom","isShowingAccessColumn","isEntityViewOrDatasetOrCollection","allRowsHaveId","rowsAreDownloadable","isFileViewOrDataset","isShowingDirectDownloadColumn","isShowingAddToV2DownloadListColumn","rowEntityIDColumnIndex","col","rowEntityVersionColumnIndex","columns","rowSelectionColumn","addToDownloadListColumn","directDownloadColumn","accessColumn","selectColumn","index","row","isSortableColumn","TableDataColumnHeader","TableDataCell","prependColumnVisibility","columnVisibility","prev","curr","dataHasBeenPrefetched","usePrefetchResourcesInTable","renderTableDataPlaceholder","table","useReactTable","getCoreRowModel","cell","cm","SynapseTableContext","jsx","ModalDownload","StyledTanStackTable","Fragment"],"mappings":"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"}

package/dist/components/TextField/TextField.css

@@ -0,0 +1 @@
+._labelRow_xvkho_1{display:flex;align-items:baseline;gap:6px;margin-bottom:4px}._inputLabel_xvkho_8{position:relative!important;font-weight:700;margin-bottom:0;pointer-events:unset}._helperText_xvkho_15{font-weight:500;color:var(--synapse-gray-600)}

package/dist/components/TextField/TextField.d.ts

@@ -1,5 +1,5 @@
 import { TextFieldProps as MuiTextFieldProps } from '@mui/material';
-export type TextFieldProps = Pick<MuiTextFieldProps, 'autoComplete' | 'autoFocus' | 'disabled' | 'error' | 'fullWidth' | 'id' | 'inputProps' | 'label' | 'maxRows' | 'minRows' | 'multiline' | 'onBlur' | 'onChange' | 'placeholder' | 'required' | 'rows' | 'sx' | 'type' | 'value'> & {
+export type TextFieldProps = Pick<MuiTextFieldProps, 'autoComplete' | 'autoFocus' | 'disabled' | 'error' | 'fullWidth' | 'helperText' | 'id' | 'inputProps' | 'label' | 'maxRows' | 'minRows' | 'multiline' | 'onBlur' | 'onChange' | 'placeholder' | 'required' | 'rows' | 'sx' | 'type' | 'value'> & {
     noWrapInFormControl?: boolean;
 };
 /**

package/dist/components/TextField/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAGL,cAAc,IAAI,iBAAiB,EACpC,MAAM,eAAe,CAAA;AAGtB,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,iBAAiB,EACf,cAAc,GACd,WAAW,GACX,UAAU,GACV,OAAO,GACP,WAAW,GACX,IAAI,GACJ,YAAY,GACZ,OAAO,GACP,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,UAAU,GACV,aAAa,GACb,UAAU,GACV,MAAM,GACN,IAAI,GACJ,MAAM,GACN,OAAO,CACV,GAAG;IAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAErC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,2CAoCtD"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/components/TextField/TextField.tsx"],"names":[],"mappings":"AACA,OAAO,EAIL,cAAc,IAAI,iBAAiB,EAEpC,MAAM,eAAe,CAAA;AAItB,MAAM,MAAM,cAAc,GAAG,IAAI,CAC/B,iBAAiB,EACf,cAAc,GACd,WAAW,GACX,UAAU,GACV,OAAO,GACP,WAAW,GACX,YAAY,GACZ,IAAI,GACJ,YAAY,GACZ,OAAO,GACP,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,UAAU,GACV,aAAa,GACb,UAAU,GACV,MAAM,GACN,IAAI,GACJ,MAAM,GACN,OAAO,CACV,GAAG;IAAE,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAA;AAErC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,cAAc,2CA2CtD"}

package/dist/components/TextField/TextField.js

@@ -1,34 +1,36 @@
-import { jsx as t, Fragment as m, jsxs as d } from "react/jsx-runtime";
-import { StyledFormControl as a } from "../styled/StyledFormControl.js";
-import { InputLabel as c, InputBase as s } from "@mui/material";
-import { useId as u, useMemo as f } from "react";
-function I(e) {
-  const n = u(), { noWrapInFormControl: o, label: h, ...l } = e, i = f(
-    () => o ? (r) => /* @__PURE__ */ t(m, { children: r.children }) : (r) => /* @__PURE__ */ t(a, { fullWidth: !0, sx: { my: 1 }, children: r.children }),
-    [o]
+import { jsx as r, Fragment as c, jsxs as i } from "react/jsx-runtime";
+import { StyledFormControl as s } from "../styled/StyledFormControl.js";
+import { Box as h, InputLabel as u, Typography as f, InputBase as x } from "@mui/material";
+import n from "./TextField.module.scss.js";
+import { useId as b, useMemo as p } from "react";
+function N(e) {
+  const o = b(), { noWrapInFormControl: a, label: y, helperText: t, ...m } = e, d = p(
+    () => a ? (l) => /* @__PURE__ */ r(c, { children: l.children }) : (l) => /* @__PURE__ */ r(s, { fullWidth: !0, sx: { my: 1 }, children: l.children }),
+    [a]
   );
-  return /* @__PURE__ */ d(i, { children: [
-    e.label && /* @__PURE__ */ t(
-      c,
-      {
-        htmlFor: e.id || n,
-        sx: {
-          fontWeight: 700,
-          mb: "4px",
-          pointerEvents: "unset",
-          "&::after": ({ palette: r }) => ({
-            content: e.required ? '"*"' : void 0,
-            marginLeft: "3px",
-            color: r.secondary.main
-          })
-        },
-        children: e.label
-      }
-    ),
-    /* @__PURE__ */ t(s, { id: n, ...l })
+  return /* @__PURE__ */ i(d, { children: [
+    (e.label || t) && /* @__PURE__ */ i(h, { className: n.labelRow, children: [
+      e.label && /* @__PURE__ */ r(
+        u,
+        {
+          htmlFor: e.id || o,
+          className: n.inputLabel,
+          sx: {
+            "&::after": ({ palette: l }) => ({
+              content: e.required ? '"*"' : void 0,
+              marginLeft: "3px",
+              color: l.secondary.main
+            })
+          },
+          children: e.label
+        }
+      ),
+      t && /* @__PURE__ */ r(f, { variant: "body2", className: n.helperText, children: t })
+    ] }),
+    /* @__PURE__ */ r(x, { id: o, ...m })
   ] });
 }
 export {
-  I as default
+  N as default
 };
 //# sourceMappingURL=TextField.js.map

package/dist/components/TextField/TextField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport {\n  InputBase,\n  InputLabel,\n  TextFieldProps as MuiTextFieldProps,\n} from '@mui/material'\nimport { PropsWithChildren, useId, useMemo } from 'react'\n\nexport type TextFieldProps = Pick<\n  MuiTextFieldProps,\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'disabled'\n  | 'error'\n  | 'fullWidth'\n  | 'id'\n  | 'inputProps'\n  | 'label'\n  | 'maxRows'\n  | 'minRows'\n  | 'multiline'\n  | 'onBlur'\n  | 'onChange'\n  | 'placeholder'\n  | 'required'\n  | 'rows'\n  | 'sx'\n  | 'type'\n  | 'value'\n> & { noWrapInFormControl?: boolean }\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n */\nexport default function TextField(props: TextFieldProps) {\n  const id = useId()\n  const { noWrapInFormControl, label, ...rest } = props\n  const Wrapper = useMemo(\n    () =>\n      noWrapInFormControl\n        ? (props: PropsWithChildren<object>) => <>{props.children}</>\n        : (props: PropsWithChildren<object>) => (\n            <StyledFormControl fullWidth sx={{ my: 1 }}>\n              {props.children}\n            </StyledFormControl>\n          ),\n    [noWrapInFormControl],\n  )\n  return (\n    <Wrapper>\n      {props.label && (\n        <InputLabel\n          htmlFor={props.id || id}\n          sx={{\n            fontWeight: 700,\n            mb: '4px',\n            pointerEvents: 'unset',\n            '&::after': ({ palette }) => ({\n              content: props.required ? '\"*\"' : undefined,\n              marginLeft: '3px',\n              color: palette.secondary.main,\n            }),\n          }}\n        >\n          {props.label}\n        </InputLabel>\n      )}\n      <InputBase id={id} {...rest}></InputBase>\n    </Wrapper>\n  )\n}\n"],"names":["TextField","props","id","useId","noWrapInFormControl","label","rest","Wrapper","useMemo","StyledFormControl","jsx","InputLabel","palette","InputBase"],"mappings":";;;;AAkCA,SAAwBA,EAAUC,GAAuB;AACvD,QAAMC,IAAKC,EAAA,GACL,EAAE,qBAAAC,GAAqB,OAAAC,GAAO,GAAGC,MAASL,GAC1CM,IAAUC;AAAA,IACd,MACEJ,IACI,CAACH,6BAAwC,UAAAA,EAAM,UAAS,IACxD,CAACA,wBACEQ,GAAA,EAAkB,WAAS,IAAC,IAAI,EAAE,IAAI,KACpC,UAAAR,EAAM,SAAA,CACT;AAAA,IAER,CAACG,CAAmB;AAAA,EAAA;AAEtB,2BACGG,GAAA,EACE,UAAA;AAAA,IAAAN,EAAM,SACL,gBAAAS;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAASV,EAAM,MAAMC;AAAA,QACrB,IAAI;AAAA,UACF,YAAY;AAAA,UACZ,IAAI;AAAA,UACJ,eAAe;AAAA,UACf,YAAY,CAAC,EAAE,SAAAU,SAAe;AAAA,YAC5B,SAASX,EAAM,WAAW,QAAQ;AAAA,YAClC,YAAY;AAAA,YACZ,OAAOW,EAAQ,UAAU;AAAA,UAAA;AAAA,QAC3B;AAAA,QAGD,UAAAX,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,IAGX,gBAAAS,EAACG,GAAA,EAAU,IAAAX,GAAS,GAAGI,EAAA,CAAM;AAAA,EAAA,GAC/B;AAEJ;"}
+{"version":3,"file":"TextField.js","sources":["../../../src/components/TextField/TextField.tsx"],"sourcesContent":["import StyledFormControl from '@/components/styled/StyledFormControl'\nimport {\n  Box,\n  InputBase,\n  InputLabel,\n  TextFieldProps as MuiTextFieldProps,\n  Typography,\n} from '@mui/material'\nimport styles from './TextField.module.scss'\nimport { PropsWithChildren, useId, useMemo } from 'react'\n\nexport type TextFieldProps = Pick<\n  MuiTextFieldProps,\n  | 'autoComplete'\n  | 'autoFocus'\n  | 'disabled'\n  | 'error'\n  | 'fullWidth'\n  | 'helperText'\n  | 'id'\n  | 'inputProps'\n  | 'label'\n  | 'maxRows'\n  | 'minRows'\n  | 'multiline'\n  | 'onBlur'\n  | 'onChange'\n  | 'placeholder'\n  | 'required'\n  | 'rows'\n  | 'sx'\n  | 'type'\n  | 'value'\n> & { noWrapInFormControl?: boolean }\n\n/**\n * A styled text field built using MUI components and designed to match the Sage Design System (SDS) input fields.\n */\nexport default function TextField(props: TextFieldProps) {\n  const id = useId()\n  const { noWrapInFormControl, label: _label, helperText, ...rest } = props\n  const Wrapper = useMemo(\n    () =>\n      noWrapInFormControl\n        ? (props: PropsWithChildren<object>) => <>{props.children}</>\n        : (props: PropsWithChildren<object>) => (\n            <StyledFormControl fullWidth sx={{ my: 1 }}>\n              {props.children}\n            </StyledFormControl>\n          ),\n    [noWrapInFormControl],\n  )\n  return (\n    <Wrapper>\n      {(props.label || helperText) && (\n        <Box className={styles.labelRow}>\n          {props.label && (\n            <InputLabel\n              htmlFor={props.id || id}\n              className={styles.inputLabel}\n              sx={{\n                '&::after': ({ palette }) => ({\n                  content: props.required ? '\"*\"' : undefined,\n                  marginLeft: '3px',\n                  color: palette.secondary.main,\n                }),\n              }}\n            >\n              {props.label}\n            </InputLabel>\n          )}\n          {helperText && (\n            <Typography variant=\"body2\" className={styles.helperText}>\n              {helperText}\n            </Typography>\n          )}\n        </Box>\n      )}\n      <InputBase id={id} {...rest}></InputBase>\n    </Wrapper>\n  )\n}\n"],"names":["TextField","props","id","useId","noWrapInFormControl","_label","helperText","rest","Wrapper","useMemo","StyledFormControl","jsxs","Box","styles","jsx","InputLabel","palette","Typography","InputBase"],"mappings":";;;;;AAsCA,SAAwBA,EAAUC,GAAuB;AACvD,QAAMC,IAAKC,EAAA,GACL,EAAE,qBAAAC,GAAqB,OAAOC,GAAQ,YAAAC,GAAY,GAAGC,MAASN,GAC9DO,IAAUC;AAAA,IACd,MACEL,IACI,CAACH,6BAAwC,UAAAA,EAAM,UAAS,IACxD,CAACA,wBACES,GAAA,EAAkB,WAAS,IAAC,IAAI,EAAE,IAAI,KACpC,UAAAT,EAAM,SAAA,CACT;AAAA,IAER,CAACG,CAAmB;AAAA,EAAA;AAEtB,2BACGI,GAAA,EACG,UAAA;AAAA,KAAAP,EAAM,SAASK,MACf,gBAAAK,EAACC,GAAA,EAAI,WAAWC,EAAO,UACpB,UAAA;AAAA,MAAAZ,EAAM,SACL,gBAAAa;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAASd,EAAM,MAAMC;AAAA,UACrB,WAAWW,EAAO;AAAA,UAClB,IAAI;AAAA,YACF,YAAY,CAAC,EAAE,SAAAG,SAAe;AAAA,cAC5B,SAASf,EAAM,WAAW,QAAQ;AAAA,cAClC,YAAY;AAAA,cACZ,OAAOe,EAAQ,UAAU;AAAA,YAAA;AAAA,UAC3B;AAAA,UAGD,UAAAf,EAAM;AAAA,QAAA;AAAA,MAAA;AAAA,MAGVK,uBACEW,GAAA,EAAW,SAAQ,SAAQ,WAAWJ,EAAO,YAC3C,UAAAP,EAAA,CACH;AAAA,IAAA,GAEJ;AAAA,IAEF,gBAAAQ,EAACI,GAAA,EAAU,IAAAhB,GAAS,GAAGK,EAAA,CAAM;AAAA,EAAA,GAC/B;AAEJ;"}

package/dist/components/TextField/TextField.module.scss

@@ -0,0 +1,18 @@
+.labelRow {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  margin-bottom: 4px;
+}
+
+.inputLabel {
+  position: relative !important;
+  font-weight: 700;
+  margin-bottom: 0;
+  pointer-events: unset;
+}
+
+.helperText {
+  font-weight: 500;
+  color: var(--synapse-gray-600);
+}

package/dist/components/TextField/TextField.module.scss.js

@@ -0,0 +1,12 @@
+import './TextField.css';const e = "_labelRow_xvkho_1", l = "_inputLabel_xvkho_8", t = "_helperText_xvkho_15", o = {
+  labelRow: e,
+  inputLabel: l,
+  helperText: t
+};
+export {
+  o as default,
+  t as helperText,
+  l as inputLabel,
+  e as labelRow
+};
+//# sourceMappingURL=TextField.module.scss.js.map

package/dist/components/TextField/TextField.module.scss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/components/styled/HoverPopover.css

@@ -1 +1 @@
-._triggerWrapper_9prk2_1{display:inline-block}._paper_9prk2_5{display:flex;flex-direction:column;overflow:hidden}
+._triggerWrapper_5sipe_1{display:inline-flex;align-items:center}._paper_5sipe_6{display:flex;flex-direction:column;overflow:hidden}

package/dist/components/styled/HoverPopover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HoverPopover.d.ts","sourceRoot":"","sources":["../../../src/components/styled/HoverPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EAMZ,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAGtE,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAiCvE,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;IAChD,cAAc,EAAE,SAAS,CAAA;IACzB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,qBAAqB,CAAA;IAEjC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,SAAS,CAAA;QAClB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;QAC5B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;QAChC,OAAO,EAAE,MAAM,IAAI,CAAA;QACnB,8DAA8D;QAC9D,YAAY,CAAC,EAAE,OAAO,CAAA;KACvB,CAAA;CACF,CAAC,CAAA;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,cAAc,EACd,KAAK,EACL,SAAmB,EACnB,QAAc,EACd,QAAc,EACd,SAAe,EACf,YAAY,GACb,EAAE,iBAAiB,2CAgFnB"}
+{"version":3,"file":"HoverPopover.d.ts","sourceRoot":"","sources":["../../../src/components/styled/HoverPopover.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EAMZ,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAA;AAGtE,MAAM,MAAM,qBAAqB,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAiCvE,MAAM,MAAM,iBAAiB,GAAG,iBAAiB,CAAC;IAChD,cAAc,EAAE,SAAS,CAAA;IACzB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,qBAAqB,CAAA;IAEjC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC1B,gEAAgE;IAChE,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE;QACb,OAAO,EAAE,SAAS,CAAA;QAClB,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAA;QAC5B,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAA;QAChC,OAAO,EAAE,MAAM,IAAI,CAAA;QACnB,8DAA8D;QAC9D,YAAY,CAAC,EAAE,OAAO,CAAA;KACvB,CAAA;CACF,CAAC,CAAA;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,cAAc,EACd,KAAK,EACL,SAAmB,EACnB,QAAc,EACd,QAAc,EACd,SAAe,EACf,YAAY,GACb,EAAE,iBAAiB,2CAiFnB"}

package/dist/components/styled/HoverPopover.js

@@ -1,5 +1,5 @@
 import { jsxs as s, Fragment as O, jsx as e } from "react/jsx-runtime";
-import { Box as z, Popover as C, DialogTitle as E, DialogContent as b, DialogActions as k, Button as L } from "@mui/material";
+import { Box as E, Popover as z, DialogTitle as C, DialogContent as b, DialogActions as k, Button as L } from "@mui/material";
 import { useState as M, useRef as S } from "react";
 import u from "./HoverPopover.module.scss.js";
 function T(t) {
@@ -46,7 +46,7 @@ function y({
   }, { anchorOrigin: d, transformOrigin: v } = T(h);
   return /* @__PURE__ */ s(O, { children: [
     /* @__PURE__ */ e(
-      z,
+      E,
       {
         component: "span",
         onMouseEnter: (x) => {
@@ -58,7 +58,7 @@ function y({
       }
     ),
     /* @__PURE__ */ s(
-      C,
+      z,
       {
         open: c !== null,
         anchorEl: c,
@@ -68,17 +68,18 @@ function y({
         disableAutoFocus: !0,
         disableEnforceFocus: !0,
         disableScrollLock: !0,
+        sx: { pointerEvents: "none" },
         slotProps: {
           backdrop: { sx: { pointerEvents: "none" } },
           paper: {
             onMouseEnter: i,
             onMouseLeave: a,
             className: u.paper,
-            sx: { maxWidth: g, minWidth: m }
+            sx: { maxWidth: g, minWidth: m, pointerEvents: "auto" }
           }
         },
         children: [
-          l && /* @__PURE__ */ e(E, { sx: { fontSize: "18px", padding: "16px 10px" }, children: l }),
+          l && /* @__PURE__ */ e(C, { sx: { fontSize: "18px", padding: "16px 10px" }, children: l }),
           /* @__PURE__ */ e(b, { sx: { maxHeight: f, padding: "10px" }, children: p }),
           r && /* @__PURE__ */ e(k, { sx: { paddingX: "10px" }, children: /* @__PURE__ */ e(
             L,

package/dist/components/styled/HoverPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"HoverPopover.js","sources":["../../../src/components/styled/HoverPopover.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  ButtonProps,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Popover,\n  PopoverOrigin,\n} from '@mui/material'\nimport { PropsWithChildren, ReactNode, useRef, useState } from 'react'\nimport styles from './HoverPopover.module.scss'\n\nexport type HoverPopoverPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nfunction getOrigins(placement: HoverPopoverPlacement): {\n  anchorOrigin: PopoverOrigin\n  transformOrigin: PopoverOrigin\n} {\n  switch (placement) {\n    case 'top':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'center' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'center' },\n      }\n    case 'bottom':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },\n        transformOrigin: { vertical: 'top', horizontal: 'center' },\n      }\n    case 'left':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'left' },\n        transformOrigin: { vertical: 'center', horizontal: 'right' },\n      }\n    case 'right':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'right' },\n        transformOrigin: { vertical: 'center', horizontal: 'left' },\n      }\n  }\n}\n\n/** Delay in ms before the popover closes after the mouse leaves the trigger or popover */\nconst CLOSE_DELAY_MS = 150\n\nexport type HoverPopoverProps = PropsWithChildren<{\n  popoverContent: ReactNode\n  /** Optional title rendered as a sticky header above the scrollable content */\n  title?: string\n  placement?: HoverPopoverPlacement\n\n  maxWidth?: string | number\n  minWidth?: string | number\n  /** Max height of the scrollable content area. Default 400px. */\n  maxHeight?: string | number\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    /** If true, closes the popover after the button is clicked */\n    closeOnClick?: boolean\n  }\n}>\n\n/**\n * A popover that opens when the user hovers over the trigger child and remains\n * open as long as the mouse is over either the trigger or the popover itself.\n * The content area is scrollable, avoiding any interaction with browser scroll.\n */\nexport function HoverPopover({\n  children,\n  popoverContent,\n  title,\n  placement = 'right',\n  maxWidth = 500,\n  minWidth = 300,\n  maxHeight = 400,\n  actionButton,\n}: HoverPopoverProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const cancelClose = () => {\n    if (closeTimeoutRef.current !== null) {\n      clearTimeout(closeTimeoutRef.current)\n      closeTimeoutRef.current = null\n    }\n  }\n\n  const scheduleClose = () => {\n    cancelClose()\n    closeTimeoutRef.current = setTimeout(() => {\n      setAnchorEl(null)\n    }, CLOSE_DELAY_MS)\n  }\n\n  const { anchorOrigin, transformOrigin } = getOrigins(placement)\n\n  return (\n    <>\n      <Box\n        component=\"span\"\n        onMouseEnter={e => {\n          cancelClose()\n          setAnchorEl(e.currentTarget)\n        }}\n        onMouseLeave={scheduleClose}\n        className={styles.triggerWrapper}\n      >\n        {children}\n      </Box>\n      <Popover\n        open={anchorEl !== null}\n        anchorEl={anchorEl}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        onClose={() => setAnchorEl(null)}\n        disableAutoFocus\n        disableEnforceFocus\n        disableScrollLock\n        slotProps={{\n          backdrop: { sx: { pointerEvents: 'none' } },\n          paper: {\n            onMouseEnter: cancelClose,\n            onMouseLeave: scheduleClose,\n            className: styles.paper,\n            sx: { maxWidth, minWidth },\n          },\n        }}\n      >\n        {title && (\n          <DialogTitle sx={{ fontSize: '18px', padding: '16px 10px' }}>\n            {title}\n          </DialogTitle>\n        )}\n        <DialogContent sx={{ maxHeight, padding: '10px' }}>\n          {popoverContent}\n        </DialogContent>\n        {actionButton && (\n          <DialogActions sx={{ paddingX: '10px' }}>\n            <Button\n              color={actionButton.color ?? 'primary'}\n              variant={actionButton.variant ?? 'contained'}\n              fullWidth\n              onClick={() => {\n                actionButton.onClick()\n                if (actionButton.closeOnClick) {\n                  setAnchorEl(null)\n                }\n              }}\n            >\n              {actionButton.content}\n            </Button>\n          </DialogActions>\n        )}\n      </Popover>\n    </>\n  )\n}\n"],"names":["getOrigins","placement","CLOSE_DELAY_MS","HoverPopover","children","popoverContent","title","maxWidth","minWidth","maxHeight","actionButton","anchorEl","setAnchorEl","useState","closeTimeoutRef","useRef","cancelClose","scheduleClose","anchorOrigin","transformOrigin","jsxs","Fragment","jsx","Box","e","styles","Popover","DialogTitle","DialogContent","DialogActions","Button"],"mappings":"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"}
+{"version":3,"file":"HoverPopover.js","sources":["../../../src/components/styled/HoverPopover.tsx"],"sourcesContent":["import {\n  Box,\n  Button,\n  ButtonProps,\n  DialogActions,\n  DialogContent,\n  DialogTitle,\n  Popover,\n  PopoverOrigin,\n} from '@mui/material'\nimport { PropsWithChildren, ReactNode, useRef, useState } from 'react'\nimport styles from './HoverPopover.module.scss'\n\nexport type HoverPopoverPlacement = 'top' | 'bottom' | 'left' | 'right'\n\nfunction getOrigins(placement: HoverPopoverPlacement): {\n  anchorOrigin: PopoverOrigin\n  transformOrigin: PopoverOrigin\n} {\n  switch (placement) {\n    case 'top':\n      return {\n        anchorOrigin: { vertical: 'top', horizontal: 'center' },\n        transformOrigin: { vertical: 'bottom', horizontal: 'center' },\n      }\n    case 'bottom':\n      return {\n        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },\n        transformOrigin: { vertical: 'top', horizontal: 'center' },\n      }\n    case 'left':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'left' },\n        transformOrigin: { vertical: 'center', horizontal: 'right' },\n      }\n    case 'right':\n      return {\n        anchorOrigin: { vertical: 'center', horizontal: 'right' },\n        transformOrigin: { vertical: 'center', horizontal: 'left' },\n      }\n  }\n}\n\n/** Delay in ms before the popover closes after the mouse leaves the trigger or popover */\nconst CLOSE_DELAY_MS = 150\n\nexport type HoverPopoverProps = PropsWithChildren<{\n  popoverContent: ReactNode\n  /** Optional title rendered as a sticky header above the scrollable content */\n  title?: string\n  placement?: HoverPopoverPlacement\n\n  maxWidth?: string | number\n  minWidth?: string | number\n  /** Max height of the scrollable content area. Default 400px. */\n  maxHeight?: string | number\n  actionButton?: {\n    content: ReactNode\n    color?: ButtonProps['color']\n    variant?: ButtonProps['variant']\n    onClick: () => void\n    /** If true, closes the popover after the button is clicked */\n    closeOnClick?: boolean\n  }\n}>\n\n/**\n * A popover that opens when the user hovers over the trigger child and remains\n * open as long as the mouse is over either the trigger or the popover itself.\n * The content area is scrollable, avoiding any interaction with browser scroll.\n */\nexport function HoverPopover({\n  children,\n  popoverContent,\n  title,\n  placement = 'right',\n  maxWidth = 500,\n  minWidth = 300,\n  maxHeight = 400,\n  actionButton,\n}: HoverPopoverProps) {\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null)\n\n  const cancelClose = () => {\n    if (closeTimeoutRef.current !== null) {\n      clearTimeout(closeTimeoutRef.current)\n      closeTimeoutRef.current = null\n    }\n  }\n\n  const scheduleClose = () => {\n    cancelClose()\n    closeTimeoutRef.current = setTimeout(() => {\n      setAnchorEl(null)\n    }, CLOSE_DELAY_MS)\n  }\n\n  const { anchorOrigin, transformOrigin } = getOrigins(placement)\n\n  return (\n    <>\n      <Box\n        component=\"span\"\n        onMouseEnter={e => {\n          cancelClose()\n          setAnchorEl(e.currentTarget)\n        }}\n        onMouseLeave={scheduleClose}\n        className={styles.triggerWrapper}\n      >\n        {children}\n      </Box>\n      <Popover\n        open={anchorEl !== null}\n        anchorEl={anchorEl}\n        anchorOrigin={anchorOrigin}\n        transformOrigin={transformOrigin}\n        onClose={() => setAnchorEl(null)}\n        disableAutoFocus\n        disableEnforceFocus\n        disableScrollLock\n        sx={{ pointerEvents: 'none' }}\n        slotProps={{\n          backdrop: { sx: { pointerEvents: 'none' } },\n          paper: {\n            onMouseEnter: cancelClose,\n            onMouseLeave: scheduleClose,\n            className: styles.paper,\n            sx: { maxWidth, minWidth, pointerEvents: 'auto' },\n          },\n        }}\n      >\n        {title && (\n          <DialogTitle sx={{ fontSize: '18px', padding: '16px 10px' }}>\n            {title}\n          </DialogTitle>\n        )}\n        <DialogContent sx={{ maxHeight, padding: '10px' }}>\n          {popoverContent}\n        </DialogContent>\n        {actionButton && (\n          <DialogActions sx={{ paddingX: '10px' }}>\n            <Button\n              color={actionButton.color ?? 'primary'}\n              variant={actionButton.variant ?? 'contained'}\n              fullWidth\n              onClick={() => {\n                actionButton.onClick()\n                if (actionButton.closeOnClick) {\n                  setAnchorEl(null)\n                }\n              }}\n            >\n              {actionButton.content}\n            </Button>\n          </DialogActions>\n        )}\n      </Popover>\n    </>\n  )\n}\n"],"names":["getOrigins","placement","CLOSE_DELAY_MS","HoverPopover","children","popoverContent","title","maxWidth","minWidth","maxHeight","actionButton","anchorEl","setAnchorEl","useState","closeTimeoutRef","useRef","cancelClose","scheduleClose","anchorOrigin","transformOrigin","jsxs","Fragment","jsx","Box","e","styles","Popover","DialogTitle","DialogContent","DialogActions","Button"],"mappings":"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"}

package/dist/components/styled/HoverPopover.module.scss

@@ -1,5 +1,6 @@
 .triggerWrapper {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
 }
 
 .paper {

package/dist/components/styled/HoverPopover.module.scss.js

@@ -1,4 +1,4 @@
-import './HoverPopover.css';const r = "_triggerWrapper_9prk2_1", p = "_paper_9prk2_5", e = {
+import './HoverPopover.css';const r = "_triggerWrapper_5sipe_1", p = "_paper_5sipe_6", e = {
   triggerWrapper: r,
   paper: p
 };