synapse-react-client 4.0.34 → 4.0.36

package/dist/components/SynapseChat/SynapseChatMessage.js

@@ -20,27 +20,28 @@ function s(t, n) {
 	}, [c, u]), { traceEvents: o };
 }
 function c(e) {
-	let { userMessage: r, chatJobId: i, onSendChat: a, agentAvatar: c, userAvatar: l, scrollIntoView: u, animateEntry: d, isAwaitingResponse: f, pendingAttachments: p } = e, { data: m } = n(i), h = m?.requestBody, g = m?.responseBody, _ = m?.errorMessage, { traceEvents: v } = s(i, !!i && (!m?.jobState || m.jobState == "PROCESSING")), y = h?.attachments?.map((e) => {
-		let t = e.fileHandleId, n = g?.attachmentStatuses?.find((e) => e.fileHandleId === t), r = p?.find((e) => e.fileHandleId === t);
+	let { userMessage: r, chatJobId: i, onSendChat: a, agentAvatar: c, userAvatar: l, scrollIntoView: u, animateEntry: d, isAwaitingResponse: f, showLoadingIcon: p, pendingAttachments: m } = e, { data: h } = n(i), g = h?.requestBody, _ = h?.responseBody, v = h?.errorMessage, { traceEvents: y } = s(i, !!i && (!h?.jobState || h.jobState == "PROCESSING")), b = g?.attachments?.map((e) => {
+		let t = e.fileHandleId, n = _?.attachmentStatuses?.find((e) => e.fileHandleId === t), r = m?.find((e) => e.fileHandleId === t);
 		return {
 			fileHandleId: t,
 			fileName: n?.fileName ?? r?.fileName,
 			contentType: n?.contentType ?? r?.contentType
 		};
-	}) ?? p;
+	}) ?? m;
 	return /* @__PURE__ */ o(t, {
 		agentAvatar: c,
 		userAvatar: l,
 		userMessage: r,
-		chatResponseText: g?.responseText,
-		chatResponseTrace: v,
-		chatErrorReason: _,
+		chatResponseText: _?.responseText,
+		chatResponseTrace: y,
+		chatErrorReason: v,
 		onSendChat: a,
 		scrollIntoView: u,
 		animateEntry: d,
 		isAwaitingResponse: f,
-		attachments: y,
-		attachmentStatuses: g?.attachmentStatuses
+		showLoadingIcon: p,
+		attachments: b,
+		attachmentStatuses: _?.attachmentStatuses
 	});
 }
 //#endregion

package/dist/components/SynapseChat/SynapseChatMessage.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapseChatMessage.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatMessage.tsx"],"sourcesContent":["import SynapseChatInteraction from '@/components/SynapseChat/SynapseChatInteraction'\nimport usePollAsynchronousJob from '@/synapse-queries/asynchronous/usePollAsynchronousJob'\nimport { useGetChatAgentTraceEvents } from '@/synapse-queries/chat/useChat'\nimport {\n  AgentChatRequest,\n  AgentChatResponse,\n} from '@sage-bionetworks/synapse-client'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useCallback, useEffect, useState } from 'react'\nimport { ChatAttachment } from './utils/types'\n\nfunction useTraceEvent(chatJobId: string | undefined, enabled: boolean) {\n  const [traceEvents, setTraceEvents] = useState<TraceEvent[]>([])\n\n  const appendTraceEvents = useCallback((newEvents: TraceEvent[]) => {\n    setTraceEvents(prev => {\n      return [...prev, ...newEvents]\n    })\n  }, [])\n\n  const latestTraceEvent = traceEvents.at(traceEvents.length - 1)\n  const { data: newTraceEvents } = useGetChatAgentTraceEvents(\n    {\n      jobId: chatJobId ?? '',\n      newerThanTimestamp: latestTraceEvent?.timestamp,\n    },\n    {\n      enabled: enabled,\n      refetchInterval: 1000, // Re-fetch every second if enabled\n      refetchIntervalInBackground: true, // Continue polling even when the tab is not active\n    },\n  )\n  useEffect(() => {\n    if (newTraceEvents && newTraceEvents.page.length > 0) {\n      appendTraceEvents(newTraceEvents.page)\n\n      // send trace events to the console to ease agent debugging\n      // if the trace events do not contain the latest event, add the events to the array\n      console.debug(newTraceEvents.page)\n    }\n  }, [appendTraceEvents, newTraceEvents])\n\n  return {\n    traceEvents,\n  }\n}\n\ntype SynapseChatMessageProps = {\n  agentAvatar: React.ReactNode\n  userAvatar: React.ReactNode\n  /** Known at send time; never re-derived from the polled job so the bubble never renders empty. */\n  userMessage: string\n  /** Undefined until the async job has been registered for this interaction. */\n  chatJobId?: string\n  onSendChat?: (message: string) => void\n  scrollIntoView?: boolean\n  animateEntry?: boolean\n  isAwaitingResponse?: boolean\n  /**\n   * Attachments sent with this message. This information is not available in any API request/response\n   * until the job has finished processing, so this prop is used to optimistically render the attachment\n   * chips in the message bubble until the response arrives.\n   */\n  pendingAttachments?: ChatAttachment[]\n}\n\nexport default function SynapseChatMessage(props: SynapseChatMessageProps) {\n  const {\n    userMessage,\n    chatJobId,\n    onSendChat,\n    agentAvatar,\n    userAvatar,\n    scrollIntoView,\n    animateEntry,\n    isAwaitingResponse,\n    pendingAttachments,\n  } = props\n  const { data: asyncJobStatus } = usePollAsynchronousJob(chatJobId)\n\n  const chatRequest = asyncJobStatus?.requestBody as AgentChatRequest\n  const chatResponse = asyncJobStatus?.responseBody as\n    | AgentChatResponse\n    | undefined\n  const chatError = asyncJobStatus?.errorMessage\n\n  // enabled if the job has been registered and has not finished processing\n  const enableTrace =\n    !!chatJobId &&\n    (!asyncJobStatus?.jobState || asyncJobStatus.jobState == 'PROCESSING')\n  const { traceEvents } = useTraceEvent(chatJobId, enableTrace)\n\n  const attachments =\n    chatRequest?.attachments?.map(attachment => {\n      const fileHandleId = attachment.fileHandleId!\n      const status = chatResponse?.attachmentStatuses?.find(\n        s => s.fileHandleId === fileHandleId,\n      )\n      const pending = pendingAttachments?.find(\n        a => a.fileHandleId === fileHandleId,\n      )\n      // Prefer the server-resolved metadata once the job's response arrives. Fall back to what\n      // was optimistically sent (`pending`) so the chip doesn't lose its filename between the\n      // job being registered and its response arriving.\n      return {\n        fileHandleId,\n        fileName: status?.fileName ?? pending?.fileName,\n        contentType: status?.contentType ?? pending?.contentType,\n      }\n    }) ?? pendingAttachments\n\n  return (\n    <SynapseChatInteraction\n      agentAvatar={agentAvatar}\n      userAvatar={userAvatar}\n      userMessage={userMessage}\n      chatResponseText={chatResponse?.responseText}\n      chatResponseTrace={traceEvents}\n      chatErrorReason={chatError}\n      onSendChat={onSendChat}\n      scrollIntoView={scrollIntoView}\n      animateEntry={animateEntry}\n      isAwaitingResponse={isAwaitingResponse}\n      attachments={attachments}\n      attachmentStatuses={chatResponse?.attachmentStatuses}\n    />\n  )\n}\n"],"mappings":";;;;;;AAWA,SAAS,EAAc,GAA+B,GAAkB;CACtE,IAAM,CAAC,GAAa,KAAkB,EAAuB,CAAC,CAAC,GAEzD,IAAoB,GAAa,MAA4B;EACjE,GAAe,MACN,CAAC,GAAG,GAAM,GAAG,CAAS,CAC9B;CACH,GAAG,CAAC,CAAC,GAEC,IAAmB,EAAY,GAAG,EAAY,SAAS,CAAC,GACxD,EAAE,MAAM,MAAmB,EAC/B;EACE,OAAO,KAAa;EACpB,oBAAoB,GAAkB;CACxC,GACA;EACW;EACT,iBAAiB;EACjB,6BAA6B;CAC/B,CACF;CAWA,OAVA,QAAgB;EACd,AAAI,KAAkB,EAAe,KAAK,SAAS,MACjD,EAAkB,EAAe,IAAI,GAIrC,QAAQ,MAAM,EAAe,IAAI;CAErC,GAAG,CAAC,GAAmB,CAAc,CAAC,GAE/B,EACL,eACF;AACF;AAqBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EACJ,gBACA,cACA,eACA,gBACA,eACA,mBACA,iBACA,uBACA,0BACE,GACE,EAAE,MAAM,MAAmB,EAAuB,CAAS,GAE3D,IAAc,GAAgB,aAC9B,IAAe,GAAgB,cAG/B,IAAY,GAAgB,cAM5B,EAAE,mBAAgB,EAAc,GAFpC,CAAC,CAAC,MACD,CAAC,GAAgB,YAAY,EAAe,YAAY,aACC,GAEtD,IACJ,GAAa,aAAa,KAAI,MAAc;EAC1C,IAAM,IAAe,EAAW,cAC1B,IAAS,GAAc,oBAAoB,MAC/C,MAAK,EAAE,iBAAiB,CAC1B,GACM,IAAU,GAAoB,MAClC,MAAK,EAAE,iBAAiB,CAC1B;EAIA,OAAO;GACL;GACA,UAAU,GAAQ,YAAY,GAAS;GACvC,aAAa,GAAQ,eAAe,GAAS;EAC/C;CACF,CAAC,KAAK;CAER,OACE,kBAAC,GAAD;EACe;EACD;EACC;EACb,kBAAkB,GAAc;EAChC,mBAAmB;EACnB,iBAAiB;EACL;EACI;EACF;EACM;EACP;EACb,oBAAoB,GAAc;CACnC,CAAA;AAEL"}
+{"version":3,"file":"SynapseChatMessage.js","names":[],"sources":["../../../src/components/SynapseChat/SynapseChatMessage.tsx"],"sourcesContent":["import SynapseChatInteraction from '@/components/SynapseChat/SynapseChatInteraction'\nimport usePollAsynchronousJob from '@/synapse-queries/asynchronous/usePollAsynchronousJob'\nimport { useGetChatAgentTraceEvents } from '@/synapse-queries/chat/useChat'\nimport {\n  AgentChatRequest,\n  AgentChatResponse,\n} from '@sage-bionetworks/synapse-client'\nimport { TraceEvent } from '@sage-bionetworks/synapse-types'\nimport { useCallback, useEffect, useState } from 'react'\nimport { ChatAttachment } from './utils/types'\n\nfunction useTraceEvent(chatJobId: string | undefined, enabled: boolean) {\n  const [traceEvents, setTraceEvents] = useState<TraceEvent[]>([])\n\n  const appendTraceEvents = useCallback((newEvents: TraceEvent[]) => {\n    setTraceEvents(prev => {\n      return [...prev, ...newEvents]\n    })\n  }, [])\n\n  const latestTraceEvent = traceEvents.at(traceEvents.length - 1)\n  const { data: newTraceEvents } = useGetChatAgentTraceEvents(\n    {\n      jobId: chatJobId ?? '',\n      newerThanTimestamp: latestTraceEvent?.timestamp,\n    },\n    {\n      enabled: enabled,\n      refetchInterval: 1000, // Re-fetch every second if enabled\n      refetchIntervalInBackground: true, // Continue polling even when the tab is not active\n    },\n  )\n  useEffect(() => {\n    if (newTraceEvents && newTraceEvents.page.length > 0) {\n      appendTraceEvents(newTraceEvents.page)\n\n      // send trace events to the console to ease agent debugging\n      // if the trace events do not contain the latest event, add the events to the array\n      console.debug(newTraceEvents.page)\n    }\n  }, [appendTraceEvents, newTraceEvents])\n\n  return {\n    traceEvents,\n  }\n}\n\ntype SynapseChatMessageProps = {\n  agentAvatar: React.ReactNode\n  userAvatar: React.ReactNode\n  /** Known at send time; never re-derived from the polled job so the bubble never renders empty. */\n  userMessage: string\n  /** Undefined until the async job has been registered for this interaction. */\n  chatJobId?: string\n  onSendChat?: (message: string) => void\n  scrollIntoView?: boolean\n  animateEntry?: boolean\n  isAwaitingResponse?: boolean\n  showLoadingIcon?: boolean\n  /**\n   * Attachments sent with this message. This information is not available in any API request/response\n   * until the job has finished processing, so this prop is used to optimistically render the attachment\n   * chips in the message bubble until the response arrives.\n   */\n  pendingAttachments?: ChatAttachment[]\n}\n\nexport default function SynapseChatMessage(props: SynapseChatMessageProps) {\n  const {\n    userMessage,\n    chatJobId,\n    onSendChat,\n    agentAvatar,\n    userAvatar,\n    scrollIntoView,\n    animateEntry,\n    isAwaitingResponse,\n    showLoadingIcon,\n    pendingAttachments,\n  } = props\n  const { data: asyncJobStatus } = usePollAsynchronousJob(chatJobId)\n\n  const chatRequest = asyncJobStatus?.requestBody as AgentChatRequest\n  const chatResponse = asyncJobStatus?.responseBody as\n    | AgentChatResponse\n    | undefined\n  const chatError = asyncJobStatus?.errorMessage\n\n  // enabled if the job has been registered and has not finished processing\n  const enableTrace =\n    !!chatJobId &&\n    (!asyncJobStatus?.jobState || asyncJobStatus.jobState == 'PROCESSING')\n  const { traceEvents } = useTraceEvent(chatJobId, enableTrace)\n\n  const attachments =\n    chatRequest?.attachments?.map(attachment => {\n      const fileHandleId = attachment.fileHandleId!\n      const status = chatResponse?.attachmentStatuses?.find(\n        s => s.fileHandleId === fileHandleId,\n      )\n      const pending = pendingAttachments?.find(\n        a => a.fileHandleId === fileHandleId,\n      )\n      // Prefer the server-resolved metadata once the job's response arrives. Fall back to what\n      // was optimistically sent (`pending`) so the chip doesn't lose its filename between the\n      // job being registered and its response arriving.\n      return {\n        fileHandleId,\n        fileName: status?.fileName ?? pending?.fileName,\n        contentType: status?.contentType ?? pending?.contentType,\n      }\n    }) ?? pendingAttachments\n\n  return (\n    <SynapseChatInteraction\n      agentAvatar={agentAvatar}\n      userAvatar={userAvatar}\n      userMessage={userMessage}\n      chatResponseText={chatResponse?.responseText}\n      chatResponseTrace={traceEvents}\n      chatErrorReason={chatError}\n      onSendChat={onSendChat}\n      scrollIntoView={scrollIntoView}\n      animateEntry={animateEntry}\n      isAwaitingResponse={isAwaitingResponse}\n      showLoadingIcon={showLoadingIcon}\n      attachments={attachments}\n      attachmentStatuses={chatResponse?.attachmentStatuses}\n    />\n  )\n}\n"],"mappings":";;;;;;AAWA,SAAS,EAAc,GAA+B,GAAkB;CACtE,IAAM,CAAC,GAAa,KAAkB,EAAuB,CAAC,CAAC,GAEzD,IAAoB,GAAa,MAA4B;EACjE,GAAe,MACN,CAAC,GAAG,GAAM,GAAG,CAAS,CAC9B;CACH,GAAG,CAAC,CAAC,GAEC,IAAmB,EAAY,GAAG,EAAY,SAAS,CAAC,GACxD,EAAE,MAAM,MAAmB,EAC/B;EACE,OAAO,KAAa;EACpB,oBAAoB,GAAkB;CACxC,GACA;EACW;EACT,iBAAiB;EACjB,6BAA6B;CAC/B,CACF;CAWA,OAVA,QAAgB;EACd,AAAI,KAAkB,EAAe,KAAK,SAAS,MACjD,EAAkB,EAAe,IAAI,GAIrC,QAAQ,MAAM,EAAe,IAAI;CAErC,GAAG,CAAC,GAAmB,CAAc,CAAC,GAE/B,EACL,eACF;AACF;AAsBA,SAAwB,EAAmB,GAAgC;CACzE,IAAM,EACJ,gBACA,cACA,eACA,gBACA,eACA,mBACA,iBACA,uBACA,oBACA,0BACE,GACE,EAAE,MAAM,MAAmB,EAAuB,CAAS,GAE3D,IAAc,GAAgB,aAC9B,IAAe,GAAgB,cAG/B,IAAY,GAAgB,cAM5B,EAAE,mBAAgB,EAAc,GAFpC,CAAC,CAAC,MACD,CAAC,GAAgB,YAAY,EAAe,YAAY,aACC,GAEtD,IACJ,GAAa,aAAa,KAAI,MAAc;EAC1C,IAAM,IAAe,EAAW,cAC1B,IAAS,GAAc,oBAAoB,MAC/C,MAAK,EAAE,iBAAiB,CAC1B,GACM,IAAU,GAAoB,MAClC,MAAK,EAAE,iBAAiB,CAC1B;EAIA,OAAO;GACL;GACA,UAAU,GAAQ,YAAY,GAAS;GACvC,aAAa,GAAQ,eAAe,GAAS;EAC/C;CACF,CAAC,KAAK;CAER,OACE,kBAAC,GAAD;EACe;EACD;EACC;EACb,kBAAkB,GAAc;EAChC,mBAAmB;EACnB,iBAAiB;EACL;EACI;EACF;EACM;EACH;EACJ;EACb,oBAAoB,GAAc;CACnC,CAAA;AAEL"}

package/dist/components/SynapseChat/SynapsePortalChatDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SynapsePortalChatDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapsePortalChatDialog.tsx"],"names":[],"mappings":"AACA,OAAoB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAE7D,MAAM,MAAM,4BAA4B,GAAG,gBAAgB,GAAG;IAC5D,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,OAAO,EACP,GAAG,eAAe,EACnB,EAAE,4BAA4B,2CAc9B;AAED,eAAe,uBAAuB,CAAA"}
+{"version":3,"file":"SynapsePortalChatDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseChat/SynapsePortalChatDialog.tsx"],"names":[],"mappings":"AACA,OAAoB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAE7D,MAAM,MAAM,4BAA4B,GAAG,gBAAgB,GAAG;IAC5D,IAAI,EAAE,OAAO,CAAA;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,EACtC,IAAI,EACJ,OAAO,EACP,GAAG,eAAe,EACnB,EAAE,4BAA4B,2CAgB9B;AAED,eAAe,uBAAuB,CAAA"}

package/dist/components/SynapseChat/SynapsePortalChatDialog.js

@@ -7,12 +7,13 @@ function r({ open: r, onClose: i, ...a }) {
 		open: r,
 		onClose: i,
 		title: a.chatbotName || "SynapseChat",
+		variant: a.variant,
 		children: /* @__PURE__ */ n(e, {
 			hideTitle: !0,
 			textboxPositionOffset: "16px",
 			...a
 		})
-	});
+	}, a.variant);
 }
 //#endregion
 export { r as SynapsePortalChatDialog, r as default };

package/dist/components/SynapseChat/SynapsePortalChatDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"SynapsePortalChatDialog.js","names":[],"sources":["../../../src/components/SynapseChat/SynapsePortalChatDialog.tsx"],"sourcesContent":["import DraggableDialog from '../DraggableDialog/DraggableDialog'\nimport SynapseChat, { SynapseChatProps } from './SynapseChat'\n\nexport type SynapsePortalChatDialogProps = SynapseChatProps & {\n  open: boolean\n  onClose: () => void\n}\n\n/**\n * A dialog that wraps SynapseChat with externally-controlled open/close state.\n * Only shown when the user is logged in and the PORTAL_CHAT feature flag is enabled.\n */\nexport function SynapsePortalChatDialog({\n  open,\n  onClose,\n  ...chatDialogProps\n}: SynapsePortalChatDialogProps) {\n  return (\n    <DraggableDialog\n      open={open}\n      onClose={onClose}\n      title={chatDialogProps.chatbotName || 'SynapseChat'}\n    >\n      <SynapseChat\n        hideTitle={true}\n        textboxPositionOffset=\"16px\"\n        {...chatDialogProps}\n      />\n    </DraggableDialog>\n  )\n}\n\nexport default SynapsePortalChatDialog\n"],"mappings":";;;;AAYA,SAAgB,EAAwB,EACtC,SACA,YACA,GAAG,KAC4B;CAC/B,OACE,kBAAC,GAAD;EACQ;EACG;EACT,OAAO,EAAgB,eAAe;YAEtC,kBAAC,GAAD;GACE,WAAW;GACX,uBAAsB;GACtB,GAAI;EACL,CAAA;CACc,CAAA;AAErB"}
+{"version":3,"file":"SynapsePortalChatDialog.js","names":[],"sources":["../../../src/components/SynapseChat/SynapsePortalChatDialog.tsx"],"sourcesContent":["import DraggableDialog from '../DraggableDialog/DraggableDialog'\nimport SynapseChat, { SynapseChatProps } from './SynapseChat'\n\nexport type SynapsePortalChatDialogProps = SynapseChatProps & {\n  open: boolean\n  onClose: () => void\n}\n\n/**\n * A dialog that wraps SynapseChat with externally-controlled open/close state.\n * Only shown when the user is logged in and the PORTAL_CHAT feature flag is enabled.\n */\nexport function SynapsePortalChatDialog({\n  open,\n  onClose,\n  ...chatDialogProps\n}: SynapsePortalChatDialogProps) {\n  return (\n    <DraggableDialog\n      key={chatDialogProps.variant}\n      open={open}\n      onClose={onClose}\n      title={chatDialogProps.chatbotName || 'SynapseChat'}\n      variant={chatDialogProps.variant}\n    >\n      <SynapseChat\n        hideTitle={true}\n        textboxPositionOffset=\"16px\"\n        {...chatDialogProps}\n      />\n    </DraggableDialog>\n  )\n}\n\nexport default SynapsePortalChatDialog\n"],"mappings":";;;;AAYA,SAAgB,EAAwB,EACtC,SACA,YACA,GAAG,KAC4B;CAC/B,OACE,kBAAC,GAAD;EAEQ;EACG;EACT,OAAO,EAAgB,eAAe;EACtC,SAAS,EAAgB;YAEzB,kBAAC,GAAD;GACE,WAAW;GACX,uBAAsB;GACtB,GAAI;EACL,CAAA;CACc,GAXV,EAAgB,OAWN;AAErB"}

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseTable.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseTable/SynapseTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,GAAG,EACH,MAAM,EAEP,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAEL,SAAS,EAKV,MAAM,uBAAuB,CAAA;AAG9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAyBvD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,cAAc,GACzB,MAAM,CAuBR;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,iBAAiB,EACf,kBAAkB,GAClB,wBAAwB,GACxB,wBAAwB,GACxB,oBAAoB,GACpB,cAAc,GACd,0BAA0B,GAC1B,6BAA6B,GAC7B,aAAa,GACb,eAAe,CAClB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,gBAAgB,EAAE,OAAO,CAAA;IACzB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAA;IACrC,2JAA2J;IAC3J,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2JAA2J;IAC3J,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,8DAA8D;IAC9D,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,yFAAyF;IACzF,WAAW,CAAC,EAAE,eAAe,CAAA;CAC9B,CAAA;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA2MpD"}
+{"version":3,"file":"SynapseTable.d.ts","sourceRoot":"","sources":["../../../src/components/SynapseTable/SynapseTable.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,cAAc,EACd,GAAG,EACH,MAAM,EAEP,MAAM,iCAAiC,CAAA;AACxC,OAAO,EAEL,SAAS,EAKV,MAAM,uBAAuB,CAAA;AAG9B,OAAO,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAA;AAyBvD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,UAAU,EAAE,MAAM,EAClB,UAAU,EAAE,cAAc,GACzB,MAAM,CAuBR;AAED,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,iBAAiB,EACf,kBAAkB,GAClB,wBAAwB,GACxB,wBAAwB,GACxB,oBAAoB,GACpB,cAAc,GACd,0BAA0B,GAC1B,6BAA6B,GAC7B,aAAa,GACb,eAAe,CAClB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,uCAAuC;IACvC,MAAM,EAAE,MAAM,CAAA;IACd,iDAAiD;IACjD,gBAAgB,EAAE,OAAO,CAAA;IACzB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,SAAS,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,CAAA;IACrC,2JAA2J;IAC3J,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;OAOG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,sBAAsB,CAAC,EAAE,OAAO,CAAA;IAChC,+CAA+C;IAC/C,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,kDAAkD;IAClD,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,2JAA2J;IAC3J,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,8DAA8D;IAC9D,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,yFAAyF;IACzF,WAAW,CAAC,EAAE,eAAe,CAAA;CAC9B,CAAA;AAID,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4MpD"}

package/dist/components/SynapseTable/SynapseTable.js

@@ -123,7 +123,8 @@ function w(S) {
 			},
 			table: ve,
 			fullWidth: !1,
-			autoColumnSizing: !0
+			autoColumnSizing: !0,
+			showTopScrollbar: !0
 		})] })
 	}) : /* @__PURE__ */ v(_, {});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"SynapseTable.js","names":[],"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"],"mappings":"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"}
+{"version":3,"file":"SynapseTable.js","names":[],"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          showTopScrollbar={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"],"mappings":"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"}

package/dist/components/SynapseTable/export/ExternalPlatformActionsRequiredPrecheck.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExternalPlatformActionsRequiredPrecheck.d.ts","sourceRoot":"","sources":["../../../../src/components/SynapseTable/export/ExternalPlatformActionsRequiredPrecheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,MAAM,eAAe,CAAA;AAgBvD,OAAO,EAEL,wBAAwB,EACzB,MAAM,sCAAsC,CAAA;AAc7C,MAAM,MAAM,4CAA4C,GAAG;IAEzD,gBAAgB,EAAE,wBAAwB,CAAA;IAE1C,0BAA0B,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAExD,kBAAkB,EAAE,MAAM,IAAI,CAAA;CAC/B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uCAAuC,CAC7D,KAAK,EAAE,4CAA4C,2CAgJpD"}
+{"version":3,"file":"ExternalPlatformActionsRequiredPrecheck.d.ts","sourceRoot":"","sources":["../../../../src/components/SynapseTable/export/ExternalPlatformActionsRequiredPrecheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAc,MAAM,eAAe,CAAA;AAgBvD,OAAO,EAEL,wBAAwB,EACzB,MAAM,sCAAsC,CAAA;AAc7C,MAAM,MAAM,4CAA4C,GAAG;IAEzD,gBAAgB,EAAE,wBAAwB,CAAA;IAE1C,0BAA0B,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;IAExD,kBAAkB,EAAE,MAAM,IAAI,CAAA;CAC/B,CAAA;AAED,MAAM,CAAC,OAAO,UAAU,uCAAuC,CAC7D,KAAK,EAAE,4CAA4C,2CA8IpD"}

package/dist/components/SynapseTable/export/ExternalPlatformActionsRequiredPrecheck.js

@@ -20,66 +20,66 @@ function x(e) {
 	return `SendTo${g(e.replace("\\s", ""))}ButtonFromConfirmationDialog`;
 }
 function S(g) {
-	let { selectedPlatform: S, onConfirmButtonPropsChange: C, onSuccessfulExport: w } = g, T = c[S], { getCurrentQueryRequest: E, onViewSharingSettingsClicked: D, hasResettableFilters: O, fileIdColumnName: k, fileVersionColumnName: A, fileNameColumnName: j } = t(), { data: M, isLoading: N } = n(), P = o(), F = a(), I = i(), { unitDescription: L } = r(), [R, z] = h(void 0), B = m(() => {
+	let { selectedPlatform: S, onConfirmButtonPropsChange: C, onSuccessfulExport: w } = g, T = c[S], { getCurrentQueryRequest: E, hasResettableFilters: D, fileIdColumnName: O, fileVersionColumnName: k, fileNameColumnName: A } = t(), { data: j, isLoading: M } = n(), N = o(), P = a(), F = i(), { unitDescription: I } = r(), [L, R] = h(void 0), z = m(() => {
 		let e = E();
-		return I && F && M?.selectColumns && (e.query.additionalFilters = [...e.query.additionalFilters || [], s(F, P, M.selectColumns)]), e;
+		return F && P && j?.selectColumns && (e.query.additionalFilters = [...e.query.additionalFilters || [], s(P, N, j.selectColumns)]), e;
 	}, [
 		E,
-		I,
 		F,
-		M?.selectColumns,
-		P
-	]), { exportToCavatica: V, exportToTerra: H, exportToPluto: U, exportToPlutoDev: W, exportToADWorkbench: G } = l({
-		queryBundleRequest: B,
-		selectColumns: M?.selectColumns,
-		fileIdColumnName: k,
-		fileVersionColumnName: A,
-		fileNameColumnName: j
-	}), K = `Send ${d(O, I, P, M?.queryCount, L)} to ${T.name}`, q = f(async () => {
+		P,
+		j?.selectColumns,
+		N
+	]), { exportToCavatica: B, exportToTerra: V, exportToPluto: H, exportToPlutoDev: U, exportToADWorkbench: W } = l({
+		queryBundleRequest: z,
+		selectColumns: j?.selectColumns,
+		fileIdColumnName: O,
+		fileVersionColumnName: k,
+		fileNameColumnName: A
+	}), G = `Send ${d(D, F, N, j?.queryCount, I)} to ${T.name}`, K = f(async () => {
 		switch (S) {
 			case "cavatica":
-				await V();
+				await B();
 				break;
 			case "terra":
-				await H();
+				await V();
 				break;
 			case "pluto":
-				await U();
+				await H();
 				break;
 			case "plutodev":
-				await W();
+				await U();
 				break;
 			case "adworkbench":
-				await G();
+				await W();
 				break;
 		}
 		w();
 	}, [
+		B,
 		V,
 		H,
 		U,
-		W,
 		w,
 		S,
-		G
+		W
 	]);
 	return p(() => {
 		C({
 			id: x(S),
-			children: K,
-			disabled: N || R !== 0,
+			children: G,
+			disabled: M || L !== 0,
 			onClick: () => {
-				q();
+				K();
 			}
 		});
 	}, [
-		R,
+		L,
+		G,
+		M,
 		K,
-		N,
-		q,
 		C,
 		S
-	]), N ? /* @__PURE__ */ y(e, { numRows: 4 }) : /* @__PURE__ */ b(v, { children: [
+	]), M ? /* @__PURE__ */ y(e, { numRows: 4 }) : /* @__PURE__ */ b(v, { children: [
 		/* @__PURE__ */ b(_, {
 			variant: "body1",
 			sx: {
@@ -103,10 +103,9 @@ function S(g) {
 			]
 		}),
 		/* @__PURE__ */ y(u, {
-			queryBundleRequest: B,
-			columnModels: M?.columnModels ?? [],
-			onNumberOfRequiredActionsChanged: z,
-			onViewSharingSettingsClicked: D
+			queryBundleRequest: z,
+			columnModels: j?.columnModels ?? [],
+			onNumberOfRequiredActionsChanged: R
 		}),
 		/* @__PURE__ */ b(_, {
 			variant: "body1",

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

@@ -1 +1 @@
-{"version":3,"file":"ExternalPlatformActionsRequiredPrecheck.js","names":[],"sources":["../../../../src/components/SynapseTable/export/ExternalPlatformActionsRequiredPrecheck.tsx"],"sourcesContent":["import { ButtonProps, Typography } from '@mui/material'\nimport { upperFirst } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useExportTableQueryToAnalysisPlatform } from '../../../synapse-queries/entity/useExportTableQueryToAnalysisPlatform'\nimport { getPrimaryKeyINFilter } from '../../../utils/functions/QueryFilterUtils'\nimport { TableQueryActionsRequired } from '../../DownloadCart/TableQueryActionsRequired'\nimport { useQueryContext } from '../../QueryContext'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper/index'\nimport {\n  useHasSelectedRowsAtomValue,\n  useRowSelectionPrimaryKeyAtomValue,\n  useSelectedRowsAtomValue,\n} from '../../QueryWrapper/TableRowSelectionState'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { SkeletonParagraph } from '../../Skeleton/index'\nimport { getNumberOfResultsToInvokeActionCopy } from '../TopLevelControls/TopLevelControlsUtils'\nimport {\n  EXTERNAL_ANALYSIS_PLATFORMS,\n  ExternalAnalysisPlatform,\n} from './ExternalAnalysisPlatformsConstants'\n\n/**\n * Get the ID of the confirm button for the selected platform, used in Google Tag Manager\n * @param selectedPlatform\n */\nfunction getConfirmButtonId(\n  selectedPlatform: ExternalAnalysisPlatform,\n): string {\n  return `SendTo${upperFirst(\n    selectedPlatform.replace('\\\\s', ''),\n  )}ButtonFromConfirmationDialog`\n}\n\nexport type ExternalPlatformActionsRequiredPrecheckProps = {\n  /* The external analysis platform that the user selected */\n  selectedPlatform: ExternalAnalysisPlatform\n  /* Callback to propagate the current confirm button appearance and behavior */\n  onConfirmButtonPropsChange: (props: ButtonProps) => void\n  /* Callback invoked when export to the external platform succeeds */\n  onSuccessfulExport: () => void\n}\n\nexport default function ExternalPlatformActionsRequiredPrecheck(\n  props: ExternalPlatformActionsRequiredPrecheckProps,\n) {\n  const { selectedPlatform, onConfirmButtonPropsChange, onSuccessfulExport } =\n    props\n  const platform = EXTERNAL_ANALYSIS_PLATFORMS[selectedPlatform]\n\n  const {\n    getCurrentQueryRequest,\n    onViewSharingSettingsClicked,\n    hasResettableFilters,\n    fileIdColumnName,\n    fileVersionColumnName,\n    fileNameColumnName,\n  } = useQueryContext()\n\n  const { data: queryMetadata, isLoading } = useGetQueryMetadata()\n  const selectedRows = useSelectedRowsAtomValue()\n  const rowSelectionPrimaryKey = useRowSelectionPrimaryKeyAtomValue()\n  const hasSelectedRows = useHasSelectedRowsAtomValue()\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  const [numberOfRequiredActions, setNumberOfRequiredActions] = useState<\n    number | undefined\n  >(undefined)\n\n  const queryFilteredBySelection = useMemo(() => {\n    const request = getCurrentQueryRequest()\n    if (\n      hasSelectedRows &&\n      rowSelectionPrimaryKey &&\n      queryMetadata?.selectColumns\n    ) {\n      request.query.additionalFilters = [\n        ...(request.query.additionalFilters || []),\n        getPrimaryKeyINFilter(\n          rowSelectionPrimaryKey,\n          selectedRows,\n          queryMetadata.selectColumns,\n        ),\n      ]\n    }\n    return request\n  }, [\n    getCurrentQueryRequest,\n    hasSelectedRows,\n    rowSelectionPrimaryKey,\n    queryMetadata?.selectColumns,\n    selectedRows,\n  ])\n\n  const {\n    exportToCavatica,\n    exportToTerra,\n    exportToPluto,\n    exportToPlutoDev,\n    exportToADWorkbench,\n  } = useExportTableQueryToAnalysisPlatform({\n    queryBundleRequest: queryFilteredBySelection,\n    selectColumns: queryMetadata?.selectColumns,\n    fileIdColumnName,\n    fileVersionColumnName,\n    fileNameColumnName,\n  })\n\n  const confirmButtonText = `Send ${getNumberOfResultsToInvokeActionCopy(\n    hasResettableFilters,\n    hasSelectedRows,\n    selectedRows,\n    queryMetadata?.queryCount,\n    unitDescription,\n  )} to ${platform.name}`\n\n  const onConfirmButtonClick = useCallback(async () => {\n    switch (selectedPlatform) {\n      case 'cavatica':\n        await exportToCavatica()\n        break\n      case 'terra':\n        await exportToTerra()\n        break\n      case 'pluto':\n        await exportToPluto()\n        break\n      case 'plutodev':\n        await exportToPlutoDev()\n        break\n      case 'adworkbench':\n        await exportToADWorkbench()\n        break\n    }\n    onSuccessfulExport()\n  }, [\n    exportToCavatica,\n    exportToTerra,\n    exportToPluto,\n    exportToPlutoDev,\n    onSuccessfulExport,\n    selectedPlatform,\n    exportToADWorkbench,\n  ])\n\n  useEffect(() => {\n    onConfirmButtonPropsChange({\n      id: getConfirmButtonId(selectedPlatform),\n      children: confirmButtonText,\n      disabled: isLoading || numberOfRequiredActions !== 0,\n      onClick: () => {\n        void onConfirmButtonClick()\n      },\n    })\n  }, [\n    numberOfRequiredActions,\n    confirmButtonText,\n    isLoading,\n    onConfirmButtonClick,\n    onConfirmButtonPropsChange,\n    selectedPlatform,\n  ])\n\n  if (isLoading) return <SkeletonParagraph numRows={4} />\n\n  return (\n    <>\n      <Typography variant=\"body1\" sx={{ fontWeight: 700, my: '10px' }}>\n        Before sending the selected data to {platform.name}:\n      </Typography>\n      <Typography variant=\"body1\" sx={{ marginBottom: '10px' }}>\n        You must meet all requirements to download the selected data. You must\n        take the following actions before we can send this data to{' '}\n        {platform.name}.\n      </Typography>\n      <TableQueryActionsRequired\n        queryBundleRequest={queryFilteredBySelection}\n        columnModels={queryMetadata?.columnModels ?? []}\n        onNumberOfRequiredActionsChanged={setNumberOfRequiredActions}\n        onViewSharingSettingsClicked={onViewSharingSettingsClicked}\n      />\n      <Typography variant=\"body1\" sx={{ fontWeight: 700, marginTop: '15px' }}>\n        When completed, click “Send to {platform.name}“ to finish the process\n        outside this application. You will be redirected to {platform.name}.\n      </Typography>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,SAAS,EACP,GACQ;CACR,OAAO,SAAS,EACd,EAAiB,QAAQ,OAAO,EAAE,CACpC,EAAE;AACJ;AAWA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,qBAAkB,+BAA4B,0BACpD,GACI,IAAW,EAA4B,IAEvC,EACJ,2BACA,iCACA,yBACA,qBACA,0BACA,0BACE,EAAgB,GAEd,EAAE,MAAM,GAAe,iBAAc,EAAoB,GACzD,IAAe,EAAyB,GACxC,IAAyB,EAAmC,GAC5D,IAAkB,EAA4B,GAE9C,EAAE,uBAAoB,EAA6B,GAEnD,CAAC,GAAyB,KAA8B,EAE5D,KAAA,CAAS,GAEL,IAA2B,QAAc;EAC7C,IAAM,IAAU,EAAuB;EAevC,OAbE,KACA,KACA,GAAe,kBAEf,EAAQ,MAAM,oBAAoB,CAChC,GAAI,EAAQ,MAAM,qBAAqB,CAAC,GACxC,EACE,GACA,GACA,EAAc,aAChB,CACF,IAEK;CACT,GAAG;EACD;EACA;EACA;EACA,GAAe;EACf;CACF,CAAC,GAEK,EACJ,qBACA,kBACA,kBACA,qBACA,2BACE,EAAsC;EACxC,oBAAoB;EACpB,eAAe,GAAe;EAC9B;EACA;EACA;CACF,CAAC,GAEK,IAAoB,QAAQ,EAChC,GACA,GACA,GACA,GAAe,YACf,CACF,EAAE,MAAM,EAAS,QAEX,IAAuB,EAAY,YAAY;EACnD,QAAQ,GAAR;GACE,KAAK;IACH,MAAM,EAAiB;IACvB;GACF,KAAK;IACH,MAAM,EAAc;IACpB;GACF,KAAK;IACH,MAAM,EAAc;IACpB;GACF,KAAK;IACH,MAAM,EAAiB;IACvB;GACF,KAAK;IACH,MAAM,EAAoB;IAC1B;EACJ;EACA,EAAmB;CACrB,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAsBD,OApBA,QAAgB;EACd,EAA2B;GACzB,IAAI,EAAmB,CAAgB;GACvC,UAAU;GACV,UAAU,KAAa,MAA4B;GACnD,eAAe;IACb,EAA0B;GAC5B;EACF,CAAC;CACH,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAEG,IAAkB,kBAAC,GAAD,EAAmB,SAAS,EAAI,CAAA,IAGpD,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAY,SAAQ;GAAQ,IAAI;IAAE,YAAY;IAAK,IAAI;GAAO;aAA9D;IAAiE;IAC1B,EAAS;IAAK;GACzC;;EACZ,kBAAC,GAAD;GAAY,SAAQ;GAAQ,IAAI,EAAE,cAAc,OAAO;aAAvD;IAA0D;IAEG;IAC1D,EAAS;IAAK;GACL;;EACZ,kBAAC,GAAD;GACE,oBAAoB;GACpB,cAAc,GAAe,gBAAgB,CAAC;GAC9C,kCAAkC;GACJ;EAC/B,CAAA;EACD,kBAAC,GAAD;GAAY,SAAQ;GAAQ,IAAI;IAAE,YAAY;IAAK,WAAW;GAAO;aAArE;IAAwE;IACtC,EAAS;IAAK;IACO,EAAS;IAAK;GACzD;;CACZ,EAAA,CAAA;AAEN"}
+{"version":3,"file":"ExternalPlatformActionsRequiredPrecheck.js","names":[],"sources":["../../../../src/components/SynapseTable/export/ExternalPlatformActionsRequiredPrecheck.tsx"],"sourcesContent":["import { ButtonProps, Typography } from '@mui/material'\nimport { upperFirst } from 'lodash-es'\nimport { useCallback, useEffect, useMemo, useState } from 'react'\nimport { useExportTableQueryToAnalysisPlatform } from '../../../synapse-queries/entity/useExportTableQueryToAnalysisPlatform'\nimport { getPrimaryKeyINFilter } from '../../../utils/functions/QueryFilterUtils'\nimport { TableQueryActionsRequired } from '../../DownloadCart/TableQueryActionsRequired'\nimport { useQueryContext } from '../../QueryContext'\nimport { useQueryVisualizationContext } from '../../QueryVisualizationWrapper/index'\nimport {\n  useHasSelectedRowsAtomValue,\n  useRowSelectionPrimaryKeyAtomValue,\n  useSelectedRowsAtomValue,\n} from '../../QueryWrapper/TableRowSelectionState'\nimport { useGetQueryMetadata } from '../../QueryWrapper/useGetQueryMetadata'\nimport { SkeletonParagraph } from '../../Skeleton/index'\nimport { getNumberOfResultsToInvokeActionCopy } from '../TopLevelControls/TopLevelControlsUtils'\nimport {\n  EXTERNAL_ANALYSIS_PLATFORMS,\n  ExternalAnalysisPlatform,\n} from './ExternalAnalysisPlatformsConstants'\n\n/**\n * Get the ID of the confirm button for the selected platform, used in Google Tag Manager\n * @param selectedPlatform\n */\nfunction getConfirmButtonId(\n  selectedPlatform: ExternalAnalysisPlatform,\n): string {\n  return `SendTo${upperFirst(\n    selectedPlatform.replace('\\\\s', ''),\n  )}ButtonFromConfirmationDialog`\n}\n\nexport type ExternalPlatformActionsRequiredPrecheckProps = {\n  /* The external analysis platform that the user selected */\n  selectedPlatform: ExternalAnalysisPlatform\n  /* Callback to propagate the current confirm button appearance and behavior */\n  onConfirmButtonPropsChange: (props: ButtonProps) => void\n  /* Callback invoked when export to the external platform succeeds */\n  onSuccessfulExport: () => void\n}\n\nexport default function ExternalPlatformActionsRequiredPrecheck(\n  props: ExternalPlatformActionsRequiredPrecheckProps,\n) {\n  const { selectedPlatform, onConfirmButtonPropsChange, onSuccessfulExport } =\n    props\n  const platform = EXTERNAL_ANALYSIS_PLATFORMS[selectedPlatform]\n\n  const {\n    getCurrentQueryRequest,\n    hasResettableFilters,\n    fileIdColumnName,\n    fileVersionColumnName,\n    fileNameColumnName,\n  } = useQueryContext()\n\n  const { data: queryMetadata, isLoading } = useGetQueryMetadata()\n  const selectedRows = useSelectedRowsAtomValue()\n  const rowSelectionPrimaryKey = useRowSelectionPrimaryKeyAtomValue()\n  const hasSelectedRows = useHasSelectedRowsAtomValue()\n\n  const { unitDescription } = useQueryVisualizationContext()\n\n  const [numberOfRequiredActions, setNumberOfRequiredActions] = useState<\n    number | undefined\n  >(undefined)\n\n  const queryFilteredBySelection = useMemo(() => {\n    const request = getCurrentQueryRequest()\n    if (\n      hasSelectedRows &&\n      rowSelectionPrimaryKey &&\n      queryMetadata?.selectColumns\n    ) {\n      request.query.additionalFilters = [\n        ...(request.query.additionalFilters || []),\n        getPrimaryKeyINFilter(\n          rowSelectionPrimaryKey,\n          selectedRows,\n          queryMetadata.selectColumns,\n        ),\n      ]\n    }\n    return request\n  }, [\n    getCurrentQueryRequest,\n    hasSelectedRows,\n    rowSelectionPrimaryKey,\n    queryMetadata?.selectColumns,\n    selectedRows,\n  ])\n\n  const {\n    exportToCavatica,\n    exportToTerra,\n    exportToPluto,\n    exportToPlutoDev,\n    exportToADWorkbench,\n  } = useExportTableQueryToAnalysisPlatform({\n    queryBundleRequest: queryFilteredBySelection,\n    selectColumns: queryMetadata?.selectColumns,\n    fileIdColumnName,\n    fileVersionColumnName,\n    fileNameColumnName,\n  })\n\n  const confirmButtonText = `Send ${getNumberOfResultsToInvokeActionCopy(\n    hasResettableFilters,\n    hasSelectedRows,\n    selectedRows,\n    queryMetadata?.queryCount,\n    unitDescription,\n  )} to ${platform.name}`\n\n  const onConfirmButtonClick = useCallback(async () => {\n    switch (selectedPlatform) {\n      case 'cavatica':\n        await exportToCavatica()\n        break\n      case 'terra':\n        await exportToTerra()\n        break\n      case 'pluto':\n        await exportToPluto()\n        break\n      case 'plutodev':\n        await exportToPlutoDev()\n        break\n      case 'adworkbench':\n        await exportToADWorkbench()\n        break\n    }\n    onSuccessfulExport()\n  }, [\n    exportToCavatica,\n    exportToTerra,\n    exportToPluto,\n    exportToPlutoDev,\n    onSuccessfulExport,\n    selectedPlatform,\n    exportToADWorkbench,\n  ])\n\n  useEffect(() => {\n    onConfirmButtonPropsChange({\n      id: getConfirmButtonId(selectedPlatform),\n      children: confirmButtonText,\n      disabled: isLoading || numberOfRequiredActions !== 0,\n      onClick: () => {\n        void onConfirmButtonClick()\n      },\n    })\n  }, [\n    numberOfRequiredActions,\n    confirmButtonText,\n    isLoading,\n    onConfirmButtonClick,\n    onConfirmButtonPropsChange,\n    selectedPlatform,\n  ])\n\n  if (isLoading) return <SkeletonParagraph numRows={4} />\n\n  return (\n    <>\n      <Typography variant=\"body1\" sx={{ fontWeight: 700, my: '10px' }}>\n        Before sending the selected data to {platform.name}:\n      </Typography>\n      <Typography variant=\"body1\" sx={{ marginBottom: '10px' }}>\n        You must meet all requirements to download the selected data. You must\n        take the following actions before we can send this data to{' '}\n        {platform.name}.\n      </Typography>\n      <TableQueryActionsRequired\n        queryBundleRequest={queryFilteredBySelection}\n        columnModels={queryMetadata?.columnModels ?? []}\n        onNumberOfRequiredActionsChanged={setNumberOfRequiredActions}\n      />\n      <Typography variant=\"body1\" sx={{ fontWeight: 700, marginTop: '15px' }}>\n        When completed, click “Send to {platform.name}“ to finish the process\n        outside this application. You will be redirected to {platform.name}.\n      </Typography>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAyBA,SAAS,EACP,GACQ;CACR,OAAO,SAAS,EACd,EAAiB,QAAQ,OAAO,EAAE,CACpC,EAAE;AACJ;AAWA,SAAwB,EACtB,GACA;CACA,IAAM,EAAE,qBAAkB,+BAA4B,0BACpD,GACI,IAAW,EAA4B,IAEvC,EACJ,2BACA,yBACA,qBACA,0BACA,0BACE,EAAgB,GAEd,EAAE,MAAM,GAAe,iBAAc,EAAoB,GACzD,IAAe,EAAyB,GACxC,IAAyB,EAAmC,GAC5D,IAAkB,EAA4B,GAE9C,EAAE,uBAAoB,EAA6B,GAEnD,CAAC,GAAyB,KAA8B,EAE5D,KAAA,CAAS,GAEL,IAA2B,QAAc;EAC7C,IAAM,IAAU,EAAuB;EAevC,OAbE,KACA,KACA,GAAe,kBAEf,EAAQ,MAAM,oBAAoB,CAChC,GAAI,EAAQ,MAAM,qBAAqB,CAAC,GACxC,EACE,GACA,GACA,EAAc,aAChB,CACF,IAEK;CACT,GAAG;EACD;EACA;EACA;EACA,GAAe;EACf;CACF,CAAC,GAEK,EACJ,qBACA,kBACA,kBACA,qBACA,2BACE,EAAsC;EACxC,oBAAoB;EACpB,eAAe,GAAe;EAC9B;EACA;EACA;CACF,CAAC,GAEK,IAAoB,QAAQ,EAChC,GACA,GACA,GACA,GAAe,YACf,CACF,EAAE,MAAM,EAAS,QAEX,IAAuB,EAAY,YAAY;EACnD,QAAQ,GAAR;GACE,KAAK;IACH,MAAM,EAAiB;IACvB;GACF,KAAK;IACH,MAAM,EAAc;IACpB;GACF,KAAK;IACH,MAAM,EAAc;IACpB;GACF,KAAK;IACH,MAAM,EAAiB;IACvB;GACF,KAAK;IACH,MAAM,EAAoB;IAC1B;EACJ;EACA,EAAmB;CACrB,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAsBD,OApBA,QAAgB;EACd,EAA2B;GACzB,IAAI,EAAmB,CAAgB;GACvC,UAAU;GACV,UAAU,KAAa,MAA4B;GACnD,eAAe;IACb,EAA0B;GAC5B;EACF,CAAC;CACH,GAAG;EACD;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,GAEG,IAAkB,kBAAC,GAAD,EAAmB,SAAS,EAAI,CAAA,IAGpD,kBAAA,GAAA,EAAA,UAAA;EACE,kBAAC,GAAD;GAAY,SAAQ;GAAQ,IAAI;IAAE,YAAY;IAAK,IAAI;GAAO;aAA9D;IAAiE;IAC1B,EAAS;IAAK;GACzC;;EACZ,kBAAC,GAAD;GAAY,SAAQ;GAAQ,IAAI,EAAE,cAAc,OAAO;aAAvD;IAA0D;IAEG;IAC1D,EAAS;IAAK;GACL;;EACZ,kBAAC,GAAD;GACE,oBAAoB;GACpB,cAAc,GAAe,gBAAgB,CAAC;GAC9C,kCAAkC;EACnC,CAAA;EACD,kBAAC,GAAD;GAAY,SAAQ;GAAQ,IAAI;IAAE,YAAY;IAAK,WAAW;GAAO;aAArE;IAAwE;IACtC,EAAS;IAAK;IACO,EAAS;IAAK;GACzD;;CACZ,EAAA,CAAA;AAEN"}

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/TanStackTableUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TanStackTableUtils.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/TanStackTableUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,UAExD;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,UAExD;AAID,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,aAAa,CAqBzE"}
+{"version":3,"file":"TanStackTableUtils.d.ts","sourceRoot":"","sources":["../../../src/components/TanStackTable/TanStackTableUtils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAA;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAErC,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,UAExD;AAED,wBAAgB,wBAAwB,CAAC,QAAQ,EAAE,MAAM,UAExD;AAID,wBAAgB,sBAAsB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,CAAC,GAAG,aAAa,CAsBzE"}

package/dist/components/TanStackTable/TanStackTableUtils.js

@@ -7,16 +7,16 @@ function t(e) {
 }
 function n(e) {
 	let t = e.getIsPinned(), n = t === "left" && e.getIsLastColumn("left"), r = t === "right" && e.getIsFirstColumn("right");
-	return {
-		background: t ? "inherit" : void 0,
+	return t ? {
+		background: "inherit",
 		boxShadow: n ? "-4px 0 4px -4px gray inset" : r ? "4px 0 4px -4px gray inset" : void 0,
 		left: t === "left" ? `${e.getStart("left")}px` : void 0,
 		right: t === "right" ? `${e.getAfter("right")}px` : void 0,
-		opacity: t ? .95 : 1,
-		position: t ? "sticky" : "relative",
+		opacity: .95,
+		position: "sticky",
 		width: e.getSize(),
-		zIndex: +!!t
-	};
+		zIndex: 1
+	} : {};
 }
 //#endregion
 export { e as getColumnSizeCssVariable, n as getCommonPinningStyles, t as getHeaderSizeCssVariable };