50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1o6_421saitt-.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Te278,"use client" import * as React from "react" import { useXlsxViewer, useXlsxViewerController, useXlsxViewerThumbnails, useXlsxViewerZoom, XlsxViewer, XlsxViewerProvider, type XlsxCellAddress, type XlsxScrollerRenderProps, type XlsxSheetData, type XlsxTableHeaderMenuRenderProps, type XlsxViewerController, } from "@extend-ai/react-xlsx" import { ScrollArea as ScrollAreaPrimitive } from "radix-ui" import { createPortal } from "react-dom" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover" import { ScrollArea as InlineScrollArea, ScrollBar, } from "@/components/ui/scroll-area" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" import { Separator } from "@/components/ui/separator" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { IconPlaceholder } from "@/components/icon-placeholder" const XLSX_LOADING_INDICATOR_DELAY_MS = 300 const XLSX_DROPDOWN_Z_INDEX_CLASS = "z-40" const XLSX_SEARCH_BATCH_ROW_COUNT = 500 const XLSX_SEARCH_DEBOUNCE_MS = 300 const XLSX_GRID_HEADER_HEIGHT = 24 const XLSX_GRID_ROW_HEADER_WIDTH = 40 const XLSX_MAX_FILE_SIZE_BYTES = 50 * 1024 * 1024 const ZOOM_OPTIONS = [10, 25, 50, 75, 100, 125, 150, 175, 200, 400] as const // Stable reference so the thumbnails memo isn't invalidated on every render // (e.g. by selection changes), which would recompute every sheet thumbnail. const XLSX_SHEET_TAB_THUMBNAIL_OPTIONS = { resolution: { maxHeight: 360, maxWidth: 560, }, } as const type UploadedWorkbook = { buffer: ArrayBuffer fileName: string identity: string } type XlsxSearchResult = { cell: XlsxCellAddress displayValue: string formula?: string sheetIndex: number sheetName: string workbookSheetIndex: number } type XlsxBatchCell = { col?: unknown formula?: unknown value?: unknown } type XlsxBatchRow = { cells?: unknown index?: unknown } function formatWorkbookName(fileName: string | undefined, url: string) { if (fileName?.trim()) return fileName const pathname = url.split("?")[0] ?? "" const rawName = pathname.split("/").pop() ?? "workbook.xlsx" try { return decodeURIComponent(rawName) } catch { return rawName } } function ensureWorkbookExtension(fileName: string) { const lowerFileName = fileName.toLowerCase() return lowerFileName.endsWith(".xlsx") || lowerFileName.endsWith(".xls") ? fileName : `${fileName}.xlsx` } function downloadWorkbookBuffer(buffer: ArrayBuffer, fileName: string) { const resolvedFileName = ensureWorkbookExtension(fileName) const blob = new Blob([buffer], { type: resolvedFileName.toLowerCase().endsWith(".xls") ? "application/vnd.ms-excel" : "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet", }) const url = URL.createObjectURL(blob) const anchor = document.createElement("a") anchor.href = url anchor.download = resolvedFileName anchor.rel = "noopener" document.body.append(anchor) anchor.click() anchor.remove() window.setTimeout(() => URL.revokeObjectURL(url), 0) } function normalizeSearchText(value: unknown) { return typeof value === "string" ? value : value === null || value === undefined ? "" : String(value) } function cellValueToSearchText(value: unknown) { if (!value || typeof value !== "object") return normalizeSearchText(value) const record = value as { asBoolean?: () => boolean | null asError?: () => string | null asNumber?: () => number | null asText?: () => string | null is_boolean?: boolean is_empty?: boolean is_error?: boolean is_number?: boolean is_text?: boolean } if (record.is_empty) return "" if (record.is_error) return record.asError?.() ?? "" if (record.is_text) return record.asText?.() ?? "" if (record.is_number) return normalizeSearchText(record.asNumber?.()) if (record.is_boolean) return record.asBoolean?.() ? "TRUE" : "FALSE" return normalizeSearchText(value) } function getCellSearchText( controller: XlsxViewerController, sheet: XlsxSheetData, row: number, col: number ) { const worksheet = controller.workbook?.getSheet(sheet.workbookSheetIndex) if (!worksheet) return { displayValue: "", formula: "" } const formula = worksheet.getFormulaAt(row, col) ?? "" const cachedFormulaValue = formula ? sheet.cachedFormulaValues[cellAddressToA1({ row, col })] : undefined const formatted = worksheet.getFormattedValueAt(row, col) if ( formatted && !(formula && cachedFormulaValue !== undefined && formatted.startsWith("#")) ) { return { displayValue: formatted, formula } } const calculated = worksheet.getCalculatedValueAt(row, col) const displayValue = formula && cachedFormulaValue !== undefined && calculated.is_error ? cachedFormulaValue : cellValueToSearchText(calculated) return { displayValue, formula } } function getBatchRows(rows: unknown): XlsxBatchRow[] { return Array.isArray(rows) ? (rows as XlsxBatchRow[]) : [] } function getBatchCells(row: XlsxBatchRow): XlsxBatchCell[] { return Array.isArray(row.cells) ? (row.cells as XlsxBatchCell[]) : [] } function cellMatchesQuery( displayValue: string, formula: string, query: string ) { return ( displayValue.toLowerCase().includes(query) || formula.toLowerCase().includes(query) ) } function cellAddressToA1({ col, row }: XlsxCellAddress) { let columnNumber = col + 1 let columnName = "" while (columnNumber > 0) { const remainder = (columnNumber - 1) % 26 columnName = String.fromCharCode(65 + remainder) + columnName columnNumber = Math.floor((columnNumber - 1) / 26) } return `${columnName}${row + 1}` } async function findXlsxSearchResults( controller: XlsxViewerController, rawQuery: string ) { const query = rawQuery.trim().toLowerCase() if (!query) return [] const results: XlsxSearchResult[] = [] for (const [sheetIndex, sheet] of controller.sheets.entries()) { const startRow = Math.max(0, sheet.minUsedRow) const endRow = Math.max(startRow, sheet.maxUsedRow) const visibleCols = sheet.visibleCols.filter( (col) => col >= sheet.minUsedCol && col <= sheet.maxUsedCol ) const visibleRowSet = new Set(sheet.visibleRows) const visibleColSet = new Set(visibleCols) if (!visibleCols.length || sheet.maxUsedRow < sheet.minUsedRow) continue const worksheet = controller.workbook?.getSheet(sheet.workbookSheetIndex) const worksheetWithBatch = worksheet as | { getRowsBatch?: ( startRow: number, rowCount: number, options?: Record ) => unknown } | undefined for ( let batchStartRow = startRow; batchStartRow <= endRow; batchStartRow += XLSX_SEARCH_BATCH_ROW_COUNT ) { const rowCount = Math.min( XLSX_SEARCH_BATCH_ROW_COUNT, endRow - batchStartRow + 1 ) const rows = controller.getRowsBatchAsync ? await controller.getRowsBatchAsync( sheet.workbookSheetIndex, batchStartRow, rowCount ) : worksheetWithBatch?.getRowsBatch?.(batchStartRow, rowCount, { includeFormulas: true, useFormattedValues: true, }) if (rows) { for (const rowEntry of getBatchRows(rows)) { const row = Number(rowEntry.index) if (!Number.isInteger(row) || !visibleRowSet.has(row)) { continue } for (const cellEntry of getBatchCells(rowEntry)) { const col = Number(cellEntry.col) if (!Number.isInteger(col) || !visibleColSet.has(col)) continue const displayValue = normalizeSearchText(cellEntry.value) const formula = normalizeSearchText(cellEntry.formula) if (!cellMatchesQuery(displayValue, formula, query)) continue results.push({ cell: { row, col }, displayValue, formula, sheetIndex, sheetName: sheet.name, workbookSheetIndex: sheet.workbookSheetIndex, }) } } continue } if (!worksheet) continue const batchEndRow = batchStartRow + rowCount - 1 for (const row of sheet.visibleRows) { if (row < batchStartRow || row > batchEndRow) continue for (const col of visibleCols) { const { displayValue, formula } = getCellSearchText( controller, sheet, row, col ) if (!cellMatchesQuery(displayValue, formula, query)) continue results.push({ cell: { row, col }, displayValue, formula, sheetIndex, sheetName: sheet.name, workbookSheetIndex: sheet.workbookSheetIndex, }) } } } } return results } function sumAxisBefore(values: number[], endIndex: number, zoomFactor: number) { let total = 0 for (let index = 0; index < endIndex; index += 1) { total += (values[index] ?? 0) * zoomFactor } return total } function scrollXlsxCellIntoView({ controller, result, viewport, }: { controller: XlsxViewerController result: XlsxSearchResult viewport: HTMLDivElement | null }) { if (!viewport) return const sheet = controller.sheets[result.sheetIndex] if (!sheet) return const rowIndex = sheet.visibleRows.indexOf(result.cell.row) const colIndex = sheet.visibleCols.indexOf(result.cell.col) if (rowIndex < 0 || colIndex < 0) return const zoomFactor = Math.max(0.1, controller.zoomScale / 100) const headerHeight = XLSX_GRID_HEADER_HEIGHT * zoomFactor const rowHeaderWidth = XLSX_GRID_ROW_HEADER_WIDTH * zoomFactor const rowStart = headerHeight + sumAxisBefore(sheet.rowHeights, rowIndex, zoomFactor) const colStart = rowHeaderWidth + sumAxisBefore(sheet.colWidths, colIndex, zoomFactor) const rowHeight = (sheet.rowHeights[rowIndex] ?? sheet.defaultRowHeightPx) * zoomFactor const colWidth = (sheet.colWidths[colIndex] ?? sheet.defaultColWidthPx) * zoomFactor const rowEnd = rowStart + rowHeight const colEnd = colStart + colWidth let nextTop = viewport.scrollTop let nextLeft = viewport.scrollLeft const visibleTop = viewport.scrollTop + headerHeight const visibleLeft = viewport.scrollLeft + rowHeaderWidth const visibleBottom = viewport.scrollTop + viewport.clientHeight const visibleRight = viewport.scrollLeft + viewport.clientWidth if (rowStart < visibleTop) { nextTop = rowStart - headerHeight } else if (rowEnd > visibleBottom) { nextTop = rowEnd - viewport.clientHeight } if (colStart < visibleLeft) { nextLeft = colStart - rowHeaderWidth } else if (colEnd > visibleRight) { nextLeft = colEnd - viewport.clientWidth } viewport.scrollTo({ left: Math.max(0, nextLeft), top: Math.max(0, nextTop), behavior: "auto", }) } function useDelayedLoadingIndicator(isLoading: boolean, delayMs: number) { const [showSpinner, setShowSpinner] = React.useState(false) const [previousIsLoading, setPreviousIsLoading] = React.useState(isLoading) if (previousIsLoading !== isLoading) { setPreviousIsLoading(isLoading) setShowSpinner(false) } React.useEffect(() => { if (!isLoading) return const timeoutId = window.setTimeout(() => { setShowSpinner(true) }, delayMs) return () => window.clearTimeout(timeoutId) }, [delayMs, isLoading]) return isLoading && showSpinner } function ToolbarTooltip({ label, children, }: { label: string children: React.ReactNode }) { return ( {children} {label} ) } function ViewerLoadingSurface({ showSpinner = true, }: { showSpinner?: boolean }) { return (

{showSpinner ? : null}

) } function WorkbookFileActionsMenu({ isDark, onDownload, onIsDarkChange, onUploadClick, showDownloadButton, showNightRenderToggle = false, showUploadButton, }: { isDark?: boolean onDownload?: () => void onIsDarkChange?: (checked: boolean) => void onUploadClick: () => void showDownloadButton: boolean showNightRenderToggle?: boolean showUploadButton: boolean }) { const showThemeControl = showNightRenderToggle && Boolean(onIsDarkChange) const showFileActions = (showDownloadButton && onDownload) || showUploadButton if (!showThemeControl && !showFileActions) return null return ( {showThemeControl ? ( <> onIsDarkChange?.(checked === true)} className={cn("justify-between")} > Dark mode {showFileActions ? : null} ) : null} {showDownloadButton && onDownload ? ( Download ) : null} {showUploadButton ? ( Upload ) : null} ) } export function renderXlsxScroller({ children, viewportProps, }: XlsxScrollerRenderProps) { return ( {children} ) } export function WorkbookTableHeaderMenu({ direction, sortAscending, sortDescending, triggerIcon, triggerProps, }: XlsxTableHeaderMenuRenderProps) { const [open, setOpen] = React.useState(false) return ( { if (value === "ascending") { sortAscending() } else { sortDescending() } setOpen(false) }} > Sort ascending Sort descending ) } function WorkbookSearchPopover({ viewportRef, }: { viewportRef: React.RefObject }) { const controller = useXlsxViewer() const [searchDraft, setSearchDraft] = React.useState("") const [searchQuery, setSearchQuery] = React.useState("") const [searchResults, setSearchResults] = React.useState( [] ) const [activeResultIndex, setActiveResultIndex] = React.useState(0) const [isSearching, setIsSearching] = React.useState(false) const controllerRef = React.useRef(controller) const searchRequestIdRef = React.useRef(0) const appliedResultKeyRef = React.useRef("") const activeResult = searchResults[activeResultIndex] ?? null const activeResultKey = activeResult ? `${activeResult.workbookSheetIndex}:${activeResult.cell.row}:${activeResult.cell.col}` : "" const controlsDisabled = controller.isLoading || Boolean(controller.error) || !controller.sheets.length const hasActiveQuery = Boolean(searchQuery.trim()) const resultLabel = isSearching ? "Searching" : !hasActiveQuery ? "No search" : searchResults.length ? `${activeResultIndex + 1} / ${searchResults.length}` : "No results" React.useEffect(() => { controllerRef.current = controller }, [controller]) const runSearch = React.useCallback((rawQuery: string) => { const nextQuery = rawQuery.trim() const requestId = searchRequestIdRef.current + 1 searchRequestIdRef.current = requestId appliedResultKeyRef.current = "" setSearchQuery(nextQuery) setActiveResultIndex(0) if (!nextQuery) { setSearchResults([]) setIsSearching(false) return } setIsSearching(true) void findXlsxSearchResults(controllerRef.current, nextQuery) .then((nextResults) => { if (searchRequestIdRef.current !== requestId) return setSearchResults(nextResults) }) .catch(() => { if (searchRequestIdRef.current !== requestId) return setSearchResults([]) }) .finally(() => { if (searchRequestIdRef.current !== requestId) return setIsSearching(false) }) }, []) React.useEffect(() => { if (!searchDraft.trim()) return const timeoutId = window.setTimeout(() => { runSearch(searchDraft) }, XLSX_SEARCH_DEBOUNCE_MS) return () => window.clearTimeout(timeoutId) }, [runSearch, searchDraft]) const handleSearchDraftChange = (nextDraft: string) => { searchRequestIdRef.current += 1 setSearchDraft(nextDraft) if (!nextDraft.trim()) { runSearch("") return } setIsSearching(true) } const clearSearch = React.useCallback(() => { searchRequestIdRef.current += 1 setSearchDraft("") setSearchQuery("") setSearchResults([]) setActiveResultIndex(0) setIsSearching(false) appliedResultKeyRef.current = "" controller.clearSelection() }, [controller]) const goToRelativeResult = React.useCallback( (direction: 1 | -1) => { if (!searchResults.length) return setActiveResultIndex((currentIndex) => { return ( (currentIndex + direction + searchResults.length) % searchResults.length ) }) }, [searchResults.length] ) React.useEffect(() => { return () => { searchRequestIdRef.current += 1 } }, []) React.useEffect(() => { if (!activeResult) return if (controller.activeSheetIndex !== activeResult.sheetIndex) { appliedResultKeyRef.current = "" controller.setActiveSheetIndex(activeResult.sheetIndex) return } if (appliedResultKeyRef.current === activeResultKey) return appliedResultKeyRef.current = activeResultKey controller.selectCell(activeResult.cell) const frame = window.requestAnimationFrame(() => { scrollXlsxCellIntoView({ controller, result: activeResult, viewport: viewportRef.current, }) }) return () => window.cancelAnimationFrame(frame) }, [ activeResult, activeResultKey, controller, controller.activeSheetIndex, viewportRef, ]) return (

handleSearchDraftChange(event.target.value)} onKeyDown={(event) => { if (event.key !== "Enter") return event.preventDefault() if (event.shiftKey && searchResults.length) { goToRelativeResult(-1) } else if (searchResults.length) { goToRelativeResult(1) } else if (searchDraft.trim()) { runSearch(searchDraft) } }} />

{searchResults.length ? ( <> {activeResultIndex + 1} {` / ${searchResults.length}`} ) : ( resultLabel )}

{activeResult ? (

{activeResult.sheetName}!{cellAddressToA1(activeResult.cell)}

) : null}

) } function WorkbookToolbar({ isDark, onDownload, onIsDarkChange, onUploadClick, showDownloadButton = true, showNightRenderToggle, showUploadButton = true, toolbarActions, viewportRef, workbookIdentity, }: { isDark: boolean onDownload?: () => void onIsDarkChange: (checked: boolean) => void onUploadClick: () => void showDownloadButton?: boolean showNightRenderToggle: boolean showUploadButton?: boolean toolbarActions?: React.ReactNode viewportRef: React.RefObject workbookIdentity: string }) { const { canZoomIn, canZoomOut, setZoomScale, zoomIn, zoomOut, zoomScale } = useXlsxViewerZoom() const currentZoom = Math.round(zoomScale) React.useEffect(() => { setZoomScale(100) }, [setZoomScale, workbookIdentity]) return (

{toolbarActions ? ( <> {toolbarActions} ) : null} {(showDownloadButton && onDownload) || showUploadButton || showNightRenderToggle ? ( <> ) : null}

) } function WorkbookStandaloneToolbar({ onUploadClick, showUploadButton = true, toolbarActions, }: { onUploadClick: () => void showUploadButton?: boolean toolbarActions?: React.ReactNode }) { return (

{toolbarActions ? <>{toolbarActions} : null} {showUploadButton ? ( <> {toolbarActions ? ( ) : null} ) : null}

) } type WorkbookSheetTab = { name: string workbookSheetIndex: number } type WorkbookSheetTabsInnerProps = { activeSheetIndex: number onActiveSheetIndexChange: (index: number) => void sheets: WorkbookSheetTab[] } export function WorkbookSheetTabs({ workbookIdentity, }: { workbookIdentity: string }) { const { activeSheetIndex, setActiveSheetIndex, sheets } = useXlsxViewer() const handleActiveSheetIndexChange = React.useCallback( (index: number) => setActiveSheetIndex(index), [setActiveSheetIndex] ) return ( ) } const WorkbookSheetTabsInner = React.memo(function WorkbookSheetTabsInner({ activeSheetIndex, onActiveSheetIndexChange, sheets, }: WorkbookSheetTabsInnerProps) { const [visiblePreviewIndex, setVisiblePreviewIndex] = React.useState< number | null >(null) const [previewPosition, setPreviewPosition] = React.useState({ left: 0, top: 0, }) const { thumbnails } = useXlsxViewerThumbnails( XLSX_SHEET_TAB_THUMBNAIL_OPTIONS ) const [thumbnailUrls, setThumbnailUrls] = React.useState< Record >({}) const scrollRef = React.useRef(null) const itemRefs = React.useRef>({}) const openTimeoutRef = React.useRef | null>( null ) const closeTimeoutRef = React.useRef | null>( null ) const previewWidth = 220 const previewHeight = (previewWidth * 7) / 11 const previewGap = 12 const previewOpenDelayMs = 500 const clearOpenTimeout = React.useCallback(() => { if (openTimeoutRef.current) { clearTimeout(openTimeoutRef.current) openTimeoutRef.current = null } }, []) const clearCloseTimeout = React.useCallback(() => { if (closeTimeoutRef.current) { clearTimeout(closeTimeoutRef.current) closeTimeoutRef.current = null } }, []) const getPreviewPosition = React.useCallback( (sheetIndex: number) => { const item = itemRefs.current[sheetIndex] if (!item || typeof window === "undefined") { return { left: 0, top: 0 } } const itemRect = item.getBoundingClientRect() const centeredLeft = itemRect.left + itemRect.width / 2 - previewWidth / 2 const minLeft = 8 const maxLeft = Math.max(minLeft, window.innerWidth - previewWidth - 8) const left = Math.max(minLeft, Math.min(centeredLeft, maxLeft)) const top = Math.max(8, itemRect.top - previewHeight - previewGap) return { left, top } }, [previewHeight] ) const updatePreviewPosition = React.useCallback( (sheetIndex: number) => { setPreviewPosition(getPreviewPosition(sheetIndex)) }, [getPreviewPosition] ) const handleItemEnter = React.useCallback( (sheetIndex: number) => { clearCloseTimeout() const nextPreviewPosition = getPreviewPosition(sheetIndex) if (visiblePreviewIndex !== null) { clearOpenTimeout() setPreviewPosition(nextPreviewPosition) setVisiblePreviewIndex(sheetIndex) return } clearOpenTimeout() openTimeoutRef.current = setTimeout(() => { setPreviewPosition(nextPreviewPosition) setVisiblePreviewIndex(sheetIndex) }, previewOpenDelayMs) }, [ clearCloseTimeout, clearOpenTimeout, getPreviewPosition, visiblePreviewIndex, ] ) const handleContainerLeave = React.useCallback(() => { clearOpenTimeout() clearCloseTimeout() closeTimeoutRef.current = setTimeout(() => { setVisiblePreviewIndex(null) }, 80) }, [clearCloseTimeout, clearOpenTimeout]) React.useEffect(() => { return () => { clearOpenTimeout() clearCloseTimeout() } }, [clearCloseTimeout, clearOpenTimeout]) React.useEffect(() => { thumbnails.forEach((thumbnail) => { setThumbnailUrls((current) => { if (current[thumbnail.sheetIndex]) return current const canvas = document.createElement("canvas") canvas.width = thumbnail.width canvas.height = thumbnail.height if (!thumbnail.paint(canvas)) return current return { ...current, [thumbnail.sheetIndex]: canvas.toDataURL("image/png"), } }) }) }, [thumbnails]) React.useEffect(() => { if (visiblePreviewIndex === null) return const handleReposition = () => updatePreviewPosition(visiblePreviewIndex) handleReposition() const scrollElement = scrollRef.current window.addEventListener("resize", handleReposition) scrollElement?.addEventListener("scroll", handleReposition, { passive: true, }) return () => { window.removeEventListener("resize", handleReposition) scrollElement?.removeEventListener("scroll", handleReposition) } }, [updatePreviewPosition, visiblePreviewIndex]) // The preview card portals to document.body, so it outlives the tab // strip's own visibility: when the viewer is hidden or reparented under // the cursor (keep-alive preview pools, a closing dialog) no mouseleave // fires and the card would hang on screen. While the preview is open, // poll the strip's effective visibility and dismiss as soon as it stops // being shown. React.useEffect(() => { if (visiblePreviewIndex === null) return const dismissWhenHidden = () => { const element = scrollRef.current const isVisible = Boolean( element?.isConnected && (element.checkVisibility?.({ checkVisibilityCSS: true }) ?? true) ) if (isVisible) return clearOpenTimeout() clearCloseTimeout() setVisiblePreviewIndex(null) } const interval = setInterval(dismissWhenHidden, 200) return () => clearInterval(interval) }, [clearCloseTimeout, clearOpenTimeout, visiblePreviewIndex]) if (sheets.length <= 1) return null const previewSheet = visiblePreviewIndex === null ? null : sheets[visiblePreviewIndex] const previewUrl = visiblePreviewIndex === null ? null : (thumbnailUrls[visiblePreviewIndex] ?? null) return (

onActiveSheetIndexChange(Number(value))} className="gap-0" >

{sheets.map((sheet, index) => ( { itemRefs.current[index] = node }} value={String(index)} className="max-w-48 flex-none" onMouseEnter={() => handleItemEnter(index)} > {sheet.name} ))}

{typeof document !== "undefined" && previewSheet && visiblePreviewIndex !== null && previewUrl ? createPortal(

{/* eslint-disable-next-line @next/next/no-img-element -- Workbook sheet previews are generated runtime image URLs. */} {`${previewSheet.name}

, document.body ) : null}

) }) export function XlsxWorkbookSurface({ className, isDark, onDownload, onIsDarkChange, onUploadClick, renderTableHeaderMenu, showDownloadButton = true, showNightRenderToggle, showToolbar = true, showUploadButton = true, toolbarActions, workbookIdentity, }: { className?: string isDark: boolean onDownload?: () => void onIsDarkChange: (checked: boolean) => void onUploadClick: () => void renderTableHeaderMenu: ( props: XlsxTableHeaderMenuRenderProps ) => React.ReactNode showDownloadButton?: boolean showNightRenderToggle: boolean showToolbar?: boolean showUploadButton?: boolean toolbarActions?: React.ReactNode workbookIdentity: string }) { const { error } = useXlsxViewer() const viewportRef = React.useRef(null) const renderSearchableScroller = React.useCallback( ({ children, viewportProps }: XlsxScrollerRenderProps) => ( {children} ), [] ) return (

{showToolbar ? ( ) : null}

File too large

This workbook exceeds the display limit. Download it to view the full file.

} loadingState={} renderScroller={renderSearchableScroller} errorState={

{error?.message ?? "Unable to display workbook."}

} renderTableHeaderMenu={renderTableHeaderMenu} />

) } export function XlsxViewerPreview({ className, fileName, isDark, onIsDarkChange, showDownload = true, showToolbar = true, showUpload = true, src, toolbarActions, }: { className?: string fileName?: string isDark: boolean onIsDarkChange: (isDark: boolean) => void showDownload?: boolean showToolbar?: boolean showUpload?: boolean src?: string toolbarActions?: React.ReactNode }) { return ( ) } function XlsxViewerContent({ className, effectiveIsDark, fileName, setNightRenderEnabled, shouldRenderNightMode, showDownload, showToolbar = true, showUpload, toolbarActions, url, }: { className?: string effectiveIsDark: boolean fileName?: string setNightRenderEnabled: (checked: boolean) => void shouldRenderNightMode: boolean showDownload: boolean showToolbar?: boolean showUpload: boolean toolbarActions?: React.ReactNode url?: string }) { const fileInputRef = React.useRef(null) const [uploadedWorkbook, setUploadedWorkbook] = React.useState(null) const sourceFileName = React.useMemo( () => url ? formatWorkbookName(fileName, url) : (fileName ?? "workbook.xlsx"), [fileName, url] ) const displayFileName = React.useMemo( () => uploadedWorkbook?.fileName ?? sourceFileName, [sourceFileName, uploadedWorkbook?.fileName] ) const workbookIdentity = React.useMemo( () => uploadedWorkbook?.identity ?? `${url ?? "empty"}::${displayFileName}`, [displayFileName, uploadedWorkbook?.identity, url] ) const [workbookBuffer, setWorkbookBuffer] = React.useState(null) const [loadError, setLoadError] = React.useState() const shouldShowLoadingSpinner = useDelayedLoadingIndicator( !workbookBuffer && !loadError && !uploadedWorkbook, XLSX_LOADING_INDICATOR_DELAY_MS ) React.useEffect(() => { let isCurrent = true async function loadWorkbook(): Promise { if (!url) return try { const response = await fetch(url) if (!response.ok) { throw new Error(`Failed to fetch XLSX (${response.status})`) } const nextWorkbookBuffer = await response.arrayBuffer() if (!isCurrent) return setWorkbookBuffer(nextWorkbookBuffer) } catch (error) { if (!isCurrent) return setLoadError( error instanceof Error ? error.message : "Unknown XLSX load error" ) } } void loadWorkbook() return () => { isCurrent = false } }, [url]) async function handleUpload(event: React.ChangeEvent) { const file = event.target.files?.[0] event.target.value = "" if (!file) return const buffer = await file.arrayBuffer() setLoadError(undefined) setUploadedWorkbook({ buffer, fileName: file.name, identity: `${file.name}-${file.size}-${file.lastModified}`, }) } const activeBuffer = uploadedWorkbook?.buffer ?? workbookBuffer const activeFileName = uploadedWorkbook?.fileName ?? displayFileName const activeIdentity = workbookIdentity if (!url && !uploadedWorkbook) { return (

fileInputRef.current?.click()} showUploadButton={showUpload} toolbarActions={toolbarActions} />

Upload a workbook to preview

Pass an XLSX URL with the src prop or upload a file.

) } if (loadError && !activeBuffer) { return (

fileInputRef.current?.click()} showUploadButton={showUpload} toolbarActions={toolbarActions} />

Unable to display workbook

{loadError}

) } if (!activeBuffer) { return (

fileInputRef.current?.click()} showUploadButton={showUpload} toolbarActions={toolbarActions} />

) } return (

downloadWorkbookBuffer(activeBuffer, activeFileName)} onIsDarkChange={setNightRenderEnabled} onUploadClick={() => fileInputRef.current?.click()} renderTableHeaderMenu={(props) => ( )} showDownloadButton={showDownload} showNightRenderToggle={shouldRenderNightMode} showToolbar={showToolbar} showUploadButton={showUpload} toolbarActions={toolbarActions} workbookBuffer={activeBuffer} workbookIdentity={activeIdentity} />

) } function XlsxWorkbookLoadedViewer({ className, fileName, isDark, onDownload, onIsDarkChange, onUploadClick, renderTableHeaderMenu, showDownloadButton, showNightRenderToggle, showToolbar = true, showUploadButton, toolbarActions, workbookBuffer, workbookIdentity, }: { className?: string fileName: string isDark: boolean onDownload: () => void onIsDarkChange: (checked: boolean) => void onUploadClick: () => void renderTableHeaderMenu: ( props: XlsxTableHeaderMenuRenderProps ) => React.ReactNode showDownloadButton: boolean showNightRenderToggle: boolean showToolbar?: boolean showUploadButton: boolean toolbarActions?: React.ReactNode workbookBuffer: ArrayBuffer workbookIdentity: string }) { const controller = useXlsxViewerController( React.useMemo( () => ({ allowResizeInReadOnly: true, file: workbookBuffer, fileName, maxFileSizeBytes: XLSX_MAX_FILE_SIZE_BYTES, readOnly: true, useWorker: true, }), [fileName, workbookBuffer] ) ) return ( ) } function InlineScrollArea2({ className, children, orientation = "both", scrollFade = false, scrollbarGutter = false, scrollbarOverflowOnly = false, viewportClassName, viewportProps, viewportRef, ...props }: InlineScrollAreaProps) { const localViewportRef = React.useRef(null) const { className: viewportPropsClassName, ref: viewportPropsRef, style: viewportStyle, ...resolvedViewportProps } = viewportProps ?? {} const resolvedViewportStyle = { ...viewportStyle } delete resolvedViewportStyle.overflow const composedViewportRef = React.useMemo( () => InlineComposeRefs(localViewportRef, viewportPropsRef, viewportRef), [viewportPropsRef, viewportRef] ) React.useEffect(() => { const viewport = localViewportRef.current if (!viewport || !scrollFade) return const updateOverflow = () => { const x = Math.abs(viewport.scrollLeft) const y = Math.max(0, viewport.scrollTop) const overflow = { "x-start": x, "x-end": Math.max(0, viewport.scrollWidth - viewport.clientWidth - x), "y-start": y, "y-end": Math.max(0, viewport.scrollHeight - viewport.clientHeight - y), } for (const [edge, value] of Object.entries(overflow)) { viewport.style.setProperty( `--scroll-area-overflow-${edge}`, `${value}px` ) } } const observer = new ResizeObserver(updateOverflow) observer.observe(viewport) if (viewport.firstElementChild) observer.observe(viewport.firstElementChild) viewport.addEventListener("scroll", updateOverflow, { passive: true }) updateOverflow() return () => { observer.disconnect() viewport.removeEventListener("scroll", updateOverflow) } }, [scrollFade]) if ( !viewportProps && !viewportRef && !viewportClassName && !scrollFade && !scrollbarGutter && !scrollbarOverflowOnly ) { return ( [data-orientation=vertical]]:hidden", className )} > {children} {orientation !== "vertical" ? ( ) : null} ) } return ( {children} {orientation !== "horizontal" ? ( ) : null} {orientation !== "vertical" ? ( ) : null} {orientation === "both" ? : null} ) } type InlineScrollAreaProps = React.ComponentProps< typeof ScrollAreaPrimitive.Root > & { orientation?: "vertical" | "horizontal" | "both" scrollFade?: boolean scrollbarGutter?: boolean scrollbarOverflowOnly?: boolean viewportClassName?: string viewportProps?: React.ComponentProps viewportRef?: React.Ref } function InlineComposeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (!ref) continue if (typeof ref === "function") ref(node) else ref.current = node } } } function InlineSpinner({ className, ...props }: InlineRegistryIconProps) { return ( ) } type InlineRegistryIconProps = Omit< React.ComponentProps<"svg">, "children" | "strokeWidth" > & { strokeWidth?: number } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@extend-ai/react-xlsx@0.16.4",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40extend-ai%2Freact-xlsx","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@extend-ai/react-xlsx@0.16.4"}]]}]}],["$","li","radix-ui@^1.4.3",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/radix-ui","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"radix-ui@^1.4.3"}]]}]}]]}],["$","$L50",null,{"namespace":"@catalogs","registryDependencies":["https://ui.shadcn.com/r/styles/radix-nova/utils.json","https://ui.shadcn.com/r/styles/radix-nova/button.json","https://ui.shadcn.com/r/styles/radix-nova/dropdown-menu.json","https://ui.shadcn.com/r/styles/radix-nova/input.json","https://ui.shadcn.com/r/styles/radix-nova/popover.json","https://ui.shadcn.com/r/styles/radix-nova/scroll-area.json","https://ui.shadcn.com/r/styles/radix-nova/select.json","https://ui.shadcn.com/r/styles/radix-nova/separator.json","https://ui.shadcn.com/r/styles/radix-nova/tabs.json","https://ui.shadcn.com/r/styles/radix-nova/tooltip.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/extend/xlsx-viewer.tsx","content":"$52","type":"registry:ui","target":"@components/extend/xlsx-viewer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]