@bagelink/vue 1.0.16 → 1.0.18

package/dist/style.css

@@ -4404,20 +4404,20 @@ body:has(.bg-dark.is-active) {
   background: transparent;
 }
 
-.fixed-columns[data-v-f204ab99] {
+.fixed-columns[data-v-147c95d0] {
 	border-right: 2px solid var(--border-color);
 }
-.spreadsheet table[data-v-f204ab99] {
+table[data-v-147c95d0] {
 	border-collapse: collapse;
 }
-.spreadsheet th[data-v-f204ab99], .spreadsheet td[data-v-f204ab99] {
+th[data-v-147c95d0], td[data-v-147c95d0] {
 	border: 1px solid var(--border-color);
 	padding: 0.1rem 0.5rem;
 	min-width: 80px;
 	background: var(--bgl-white);
 	user-select: none;
 }
-.spreadsheet th[data-v-f204ab99] {
+th[data-v-147c95d0] {
 	background: var(--input-bg);
 	white-space: nowrap;
 	position: relative;
@@ -4425,27 +4425,27 @@ body:has(.bg-dark.is-active) {
 	font-weight: 500;
 	text-align: start;
 }
-.spreadsheet th .bgl_icon-font[data-v-f204ab99]{
+th .bgl_icon-font[data-v-147c95d0]{
 	vertical-align: middle;
 }
-.spreadsheet td.selected[data-v-f204ab99] {
+td.selected[data-v-147c95d0] {
 	background: var(--bgl-primary-light);
 }
-.spreadsheet td.locked[data-v-f204ab99] {
+td.locked[data-v-147c95d0] {
 	background: var(--bgl-gray-light);
 	cursor: default;
 }
-.spreadsheet td.locked.selected[data-v-f204ab99] {
+td.locked.selected[data-v-147c95d0] {
 	background: var(--bgl-primary-light);
 }
-.spreadsheet td[data-v-f204ab99] {
+td[data-v-147c95d0] {
 	height: 40px;
 	vertical-align: middle;
 }
-.spreadsheet td[data-v-f204ab99]:has(img){
+td[data-v-147c95d0]:has(img){
 	padding: 0;
 }
-.spreadsheet td span[data-v-f204ab99]{
+td span[data-v-147c95d0]{
 	display: block;
     display: -webkit-box;
     max-width: 100%;
@@ -4455,7 +4455,7 @@ body:has(.bg-dark.is-active) {
     -webkit-line-clamp: 1;
 	word-break: break-all;
 }
-.spreadsheet input[data-v-f204ab99] {
+input[data-v-147c95d0] {
 	width: 100%;
 	border: none;
 	background: transparent;
@@ -4464,37 +4464,63 @@ body:has(.bg-dark.is-active) {
 	min-height: 0;
 	min-width: 0;
 }
-.spreadsheet input[data-v-f204ab99]:focus {
+input[data-v-147c95d0]:focus {
 	outline: 2px solid var(--bgl-primary);
 	outline-offset: 6px;
 }
-.spreadsheet th.sortable[data-v-f204ab99] {
+th.sortable[data-v-147c95d0] {
 	cursor: pointer;
 }
-.row-number-header[data-v-f204ab99], .row-number[data-v-f204ab99] {
+.row-number-header[data-v-147c95d0], .row-number[data-v-147c95d0] {
 	width: fit-content;
 	min-width: fit-content !important;
 	padding: 0.1rem 0.7rem !important;
 }
-.spreadsheet td .bgl-checkbox[data-v-f204ab99]{
+td .bgl-checkbox[data-v-147c95d0]{
 	margin: 0;
 	text-align: center;
 	justify-content: center;
 }
-.spreadsheet td[data-v-f204ab99]:has(.bgl-checkbox){
+td[data-v-147c95d0]:has(.bgl-checkbox){
 	text-align: center;
 	background: var(--input-bg);
 }
-.spreadsheet td[data-v-f204ab99]:has(:checked){
+td[data-v-147c95d0]:has(:checked){
 	background: var(--bgl-primary-light);
 }
-.spreadsheetCellPlaceHolder[data-v-f204ab99]{
+.spreadsheetCellPlaceHolder[data-v-147c95d0]{
 	height: 0px;
 	overflow: hidden;
 	opacity: 0;
 	pointer-events: none;
 	user-select: none;
 }
+.th-content[data-v-147c95d0] {
+	position: relative;
+	display: flex;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+.resize-handle[data-v-147c95d0] {
+	position: absolute;
+	right: -8px;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	z-index: 100;
+	cursor: col-resize;
+	background: transparent;
+	transition: background 0.2s;
+}
+.resize-handle[data-v-147c95d0]:hover {
+	background: var(--bgl-primary);
+}
+
+/* Spreadsheet container styles */
+.spreadsheet[data-v-e4d0dbbe] {
+	user-select: none;
+}
 
 .zoomer-debug[data-v-379819e1] {
 	position: fixed;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Spreadsheet/Index.vue

@@ -1,6 +1,9 @@
 <script lang="ts" setup>
-import { Btn, Icon, CheckInput, TextInput } from '@bagelink/vue'
-import { computed, ref, watch, nextTick } from 'vue'
+import type { VNode } from 'vue'
+import { Btn, Icon, CheckInput, TextInput, localRef } from '@bagelink/vue'
+import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
+import Dropdown from '../Dropdown.vue'
+import SpreadsheetTable from './SpreadsheetTable.vue'
 
 // Define column configuration types
 type ColumnFormat = 'text' | 'number' | 'currency' | 'date' | 'percentage' | 'image' | 'boolean'
@@ -91,6 +94,9 @@ function emitUpdate() {
 	emit('update:modelValue', localRows.value.map(row => unflattenObject({ ...row })))
 }
 
+// After other ref declarations but before the columns computed property
+const visibleColumns = ref<string[]>([])
+
 // Sort state
 const sortColumn = ref<string | null>(null)
 const sortDirection = ref<'asc' | 'desc'>('asc')
@@ -178,7 +184,7 @@ function isCellEditable(columnKey: string): boolean {
 	return !(column?.locked ?? false)
 }
 
-// Sort rows by column
+// Update the sortByColumn function to preserve column visibility
 function sortByColumn(columnKey: string) {
 	const column = columns.value.find(col => col.key === columnKey)
 	if (!column?.sortable) return
@@ -202,8 +208,16 @@ function sortByColumn(columnKey: string) {
 		return aVal < bVal ? -modifier : modifier
 	})
 
+	// Save the current visibleColumns state
+	const currentVisibleColumns = [...visibleColumns.value]
+
 	localRows.value = sorted
 	emitUpdate()
+
+	// Restore the visibleColumns state after the update
+	nextTick(() => {
+		visibleColumns.value = currentVisibleColumns
+	})
 }
 
 // Variables to handle cell selection
@@ -356,13 +370,25 @@ function updateCell(rowIndex: number, key: string, newValue: string | boolean) {
 	emitUpdate()
 }
 
-// Update the fixed and scrollable columns computed properties to filter out hidden columns
+// After other ref declarations but before computed properties
+// const visibleColumns = ref<string[]>([])
+
+// After the columns computed property
+// Initialize visibleColumns with all columns when columns change
+watch(() => columns.value, (newColumns) => {
+	if (newColumns.length > 0 && visibleColumns.value.length === 0) {
+		visibleColumns.value = newColumns.filter(col => !col.hidden).map(col => col.key)
+	}
+})
+
+// Update the fixedColumns computed property
 const fixedColumns = computed(() => {
-	return columns.value.filter(col => col.fixed && !col.hidden)
+	return columns.value.filter(col => col.fixed && !col.hidden && visibleColumns.value.includes(col.key))
 })
 
+// Update the scrollableColumns computed property
 const scrollableColumns = computed(() => {
-	return columns.value.filter(col => !col.fixed && !col.hidden)
+	return columns.value.filter(col => !col.fixed && !col.hidden && visibleColumns.value.includes(col.key))
 })
 
 // Update createEmptyRow to use defaultValue from column config
@@ -418,7 +444,16 @@ async function copySelection() {
 	}
 }
 
-// Paste function using Navigator Clipboard API
+// Add a ref for the search input
+const searchInputRef = ref<any>(null)
+
+// Add a method to check if the search input is focused
+function isSearchFocused(): boolean {
+	const inputElement = searchInputRef.value?.$el?.querySelector('input')
+	return document.activeElement === inputElement
+}
+
+// Update the pasteSelection function to handle search focus
 async function pasteSelection() {
 	if (!selectionStart.value) return
 
@@ -461,6 +496,17 @@ async function pasteSelection() {
 	}
 }
 
+// Create a handler for paste events at the container level
+function handleContainerPaste(event: ClipboardEvent) {
+	if (isSearchFocused()) {
+		// If search is focused and spreadsheet has a selection, override default behavior
+		if (selectionStart.value) {
+			event.preventDefault()
+			pasteSelection()
+		}
+	}
+}
+
 // Add a variable to track the original value before editing
 const editingOriginalValue = ref<string | null>(null)
 
@@ -543,8 +589,8 @@ function handleCellKeyDown(event: KeyboardEvent, row: number, col: number) {
 // Update keyboard shortcuts to include undo/redo
 function handleSpreadsheetKeyDown(event: KeyboardEvent) {
 	// Don't intercept keyboard shortcuts when editing a cell
-	if (editingCell.value) return
-
+	if (editingCell.value || isSearchFocused()) return
+	console.log('handleSpreadsheetKeyDown', event)
 	const isCtrlOrCmd = event.ctrlKey || event.metaKey
 
 	if (isCtrlOrCmd) {
@@ -593,6 +639,64 @@ const filteredRows = computed(() => {
 		})
 	})
 })
+
+// Add after other ref declarations
+const columnWidths = ref<Map<string, number>>(new Map())
+const isResizing = ref(false)
+const resizingColumn = ref<string | null>(null)
+const startX = ref<number>(0)
+const startWidth = ref<number>(0)
+
+// Add after other function declarations
+function handleResizeStart(e: MouseEvent, columnKey: string) {
+	isResizing.value = true
+	resizingColumn.value = columnKey
+	startX.value = e.pageX
+
+	// Find the column header element
+	const columnHeader = (e.target as HTMLElement).closest('th')
+	if (!columnHeader) return
+
+	// Get the actual computed width of the column
+	const computedWidth = columnHeader.getBoundingClientRect().width
+	const currentWidth = columnWidths.value.get(columnKey) || computedWidth
+	startWidth.value = currentWidth
+
+	// Add event listeners for mousemove and mouseup
+	document.addEventListener('mousemove', handleResizeMove)
+	document.addEventListener('mouseup', handleResizeEnd)
+}
+
+function handleResizeMove(e: MouseEvent) {
+	if (!isResizing.value || !resizingColumn.value) return
+
+	e.preventDefault()
+
+	const diff = e.pageX - startX.value
+	const newWidth = Math.max(80, startWidth.value + diff) // Keep minimum width of 80px
+
+	columnWidths.value.set(resizingColumn.value, newWidth)
+}
+
+function handleResizeEnd() {
+	isResizing.value = false
+	resizingColumn.value = null
+
+	// Remove event listeners
+	document.removeEventListener('mousemove', handleResizeMove)
+	document.removeEventListener('mouseup', handleResizeEnd)
+}
+
+// Clean up event listeners when component is unmounted
+onUnmounted(() => {
+	document.removeEventListener('mousemove', handleResizeMove)
+	document.removeEventListener('mouseup', handleResizeEnd)
+})
+
+// Add a computed property for visible column options
+const columnOptions = computed(() => {
+	return columns.value.filter(col => !col.hidden)
+})
 </script>
 
 <template>
@@ -600,7 +704,22 @@ const filteredRows = computed(() => {
 		<div class="flex gap-05 py-05 justify-content-end m_flex-wrap">
 			<label v-if="label" class="label me-auto">{{ label }}</label>
 			<div class="flex gap-075">
-				<TextInput v-model="search" icon="search" placeholder="Search" class="m-0 max-w200px" />
+				<Dropdown flat thin icon="view_column">
+					<div class="p-05">
+						<div class="flex space-between">
+							<Btn flat thin small value="Select All" @click="visibleColumns = columnOptions.map(col => col.key)" />
+							<Btn flat thin small value="Clear All" @click="visibleColumns = []" />
+						</div>
+						<CheckInput
+							v-for="col in columnOptions"
+							:key="col.key"
+							v-model="visibleColumns"
+							:value="col.key"
+							:label="col.label || col.key"
+						/>
+					</div>
+				</Dropdown>
+				<TextInput ref="searchInputRef" v-model="search" icon="search" placeholder="Search" class="m-0 max-w200px" />
 				<Btn v-tooltip="'Paste'" flat thin round icon="paste" @click="pasteSelection" />
 				<Btn v-tooltip="'copy'" flat thin round icon="copy" @click="copySelection" />
 				<Btn v-tooltip="'Undo'" flat thin round icon="undo" :disabled="!canUndo" @click="undo" />
@@ -610,156 +729,57 @@ const filteredRows = computed(() => {
 		<div class="spreadsheet" @mouseup="handleMouseUp">
 			<div class="flex w-100p relative">
 				<!-- Fixed Columns -->
-				<table v-if="fixedColumns.length" class="fixed-columns sticky z-2 start-0 bg-white">
-					<thead>
-						<tr>
-							<th class="row-number-header bg-white" />
-							<th
-								v-for="col in fixedColumns"
-								:key="col.key"
-							>
-								<span @click="col.sortable && sortByColumn(col.key)">
-									{{ col.label || col.key }}
-								</span>
-								<Icon
-									v-if="sortColumn === col.key"
-									class="line-height-0 transition-400"
-									name="keyboard_arrow_down" :class="{ 'rotate-180': sortDirection === 'desc' }"
-								/>
-							</th>
-						</tr>
-					</thead>
-					<tbody>
-						<tr v-for="(row, rowIndex) in filteredRows" :key="rowIndex">
-							<td class="row-number txt-center hover user-select-none pointer txt12 regular" @click="selectEntireRow(rowIndex)">
-								{{ rowIndex + 1 }}
-							</td>
-							<td
-								v-for="col in fixedColumns"
-								:key="col.key"
-								:class="{
-									selected: isCellSelected(rowIndex, fixedColumns.indexOf(col)),
-									locked: !isCellEditable(col.key),
-								}"
-								:style="{ width: col.width }"
-								:tabindex="col.hidden ? undefined : 0"
-								@mousedown="handleMouseDown(rowIndex, fixedColumns.indexOf(col))"
-								@mouseover="handleMouseOver(rowIndex, fixedColumns.indexOf(col))"
-								@focusin="handleMouseOver(rowIndex, fixedColumns.indexOf(col))"
-								@dblclick="startEditing(rowIndex, fixedColumns.indexOf(col))"
-								@keydown="handleCellKeyDown($event, rowIndex, fixedColumns.indexOf(col))"
-							>
-								<template v-if="editingCell && editingCell.row === rowIndex && editingCell.col === fixedColumns.indexOf(col)">
-									<input
-										:ref="el => setInputRef(el, `cell-${rowIndex}-${fixedColumns.indexOf(col)}`)"
-										:value="row[col.key]"
-										type="text"
-										class="spreadsheet-input"
-										@input="(e: Event) => updateCell(rowIndex, col.key, (e.target as HTMLInputElement).value)"
-										@blur="handleStopEditingAndBlur(false)"
-										@keydown.enter.prevent="handleStopEditingAndBlur(false)"
-										@keydown.esc.prevent="handleStopEditingAndBlur(true)"
-										@mousedown.stop
-									>
-									<span class="spreadsheet-cell spreadsheetCellPlaceHolder">{{ formatCellValue(row[col.key], col.format) }}</span>
-								</template>
-								<template v-else>
-									<template v-if="col.format === 'image'">
-										<div class="h40px w-100p flex align-items-center justify-content-center overflow-hidden">
-											<img class=" w-100p h-100p contain radius-05" :src="row[col.key]" :alt="col.label || col.key">
-										</div>
-									</template>
-									<template v-else-if="col.format === 'boolean'">
-										<CheckInput
-											:modelValue="!!row[col.key]"
-											:disabled="!isCellEditable(col.key)"
-											@update:modelValue="(value: boolean | any[] | undefined) => updateCell(rowIndex, col.key, !!value)"
-											@mousedown.stop
-										/>
-									</template>
-									<template v-else>
-										<span class="spreadsheet-cell">{{ formatCellValue(row[col.key], col.format) }}</span>
-									</template>
-								</template>
-							</td>
-						</tr>
-					</tbody>
-				</table>
+				<SpreadsheetTable
+					v-if="fixedColumns.length"
+					:columns="fixedColumns"
+					:rows="filteredRows"
+					:is-fixed="true"
+					:show-row-numbers="true"
+					:column-widths="columnWidths"
+					:sort-column="sortColumn"
+					:sort-direction="sortDirection"
+					:selection-start="selectionStart"
+					:selection-end="selectionEnd"
+					:editing-cell="editingCell"
+					:base-column-index="0"
+					class="sticky z-2 start-0 bg-white"
+					@sortColumn="sortByColumn"
+					@resizeStart="handleResizeStart"
+					@selectRow="selectEntireRow"
+					@cellMouseDown="handleMouseDown"
+					@cellMouseOver="handleMouseOver"
+					@cellEditStart="startEditing"
+					@cellKeyDown="handleCellKeyDown"
+					@updateCell="updateCell"
+					@stopEditing="handleStopEditingAndBlur"
+					@setInputRef="setInputRef"
+				/>
 
 				<!-- Scrollable Columns -->
 				<div class="flex-shrink flex-grow overflow-x">
-					<table class="w-100p">
-						<thead>
-							<tr>
-								<th v-if="!fixedColumns.length" class="row-number-header bg-white" />
-								<th
-									v-for="col in scrollableColumns"
-									:key="col.key"
-								>
-									<span @click="col.sortable && sortByColumn(col.key)">
-										{{ col.label || col.key }}
-									</span>
-
-									<Icon v-if="sortColumn === col.key" name="keyboard_arrow_down" class="line-height-0 inline-block" :class="{ 'rotate-180': sortColumn === col.key && sortDirection === 'desc' }" />
-								</th>
-							</tr>
-						</thead>
-						<tbody>
-							<tr v-for="(row, rowIndex) in filteredRows" :key="rowIndex">
-								<td v-if="!fixedColumns.length" class="row-number txt-center hover user-select-none pointer txt12 regular" @click="selectEntireRow(rowIndex)">
-									{{ rowIndex + 1 }}
-								</td>
-								<td
-									v-for="(col, colIndex) in scrollableColumns"
-									:key="col.key"
-									:class="{
-										selected: isCellSelected(rowIndex, fixedColumns.length + colIndex),
-										locked: !isCellEditable(col.key),
-									}"
-									:style="{ width: col.width }"
-									:tabindex="col.hidden ? undefined : 0"
-									@mousedown="handleMouseDown(rowIndex, fixedColumns.length + colIndex)"
-									@mouseover="handleMouseOver(rowIndex, fixedColumns.length + colIndex)"
-									@focusin="handleMouseOver(rowIndex, fixedColumns.length + colIndex)"
-									@dblclick="startEditing(rowIndex, fixedColumns.length + colIndex)"
-									@keydown="handleCellKeyDown($event, rowIndex, fixedColumns.length + colIndex)"
-								>
-									<template v-if="editingCell && editingCell.row === rowIndex && editingCell.col === (fixedColumns.length + colIndex)">
-										<input
-											:ref="el => setInputRef(el, `cell-${rowIndex}-${fixedColumns.length + colIndex}`)"
-											:value="row[col.key]"
-											type="text"
-											class="spreadsheet-input"
-											@input="(e: Event) => updateCell(rowIndex, col.key, (e.target as HTMLInputElement).value)"
-											@blur="handleStopEditingAndBlur(false)"
-											@keydown.enter.prevent="handleStopEditingAndBlur(false)"
-											@keydown.esc.prevent="handleStopEditingAndBlur(true)"
-											@mousedown.stop
-										>
-										<span class="spreadsheet-cell spreadsheetCellPlaceHolder">{{ formatCellValue(row[col.key], col.format) }}</span>
-									</template>
-									<template v-else>
-										<template v-if="col.format === 'image'">
-											<div v-if="row[col.key]" class="h40px w-100p flex align-items-center justify-content-center overflow-hidden">
-												<img class=" w-100p h-100p contain radius-05" :src="row[col.key]" :alt="col.label || col.key">
-											</div>
-										</template>
-										<template v-else-if="col.format === 'boolean'">
-											<CheckInput
-												:modelValue="!!row[col.key]"
-												:disabled="!isCellEditable(col.key)"
-												@update:modelValue="(value: boolean | any[] | undefined) => updateCell(rowIndex, col.key, !!value)"
-												@mousedown.stop
-											/>
-										</template>
-										<template v-else>
-											<span class="spreadsheet-cell">{{ formatCellValue(row[col.key], col.format) }}</span>
-										</template>
-									</template>
-								</td>
-							</tr>
-						</tbody>
-					</table>
+					<SpreadsheetTable
+						:columns="scrollableColumns"
+						:rows="filteredRows"
+						:is-fixed="false"
+						:show-row-numbers="!fixedColumns.length"
+						:column-widths="columnWidths"
+						:sort-column="sortColumn"
+						:sort-direction="sortDirection"
+						:selection-start="selectionStart"
+						:selection-end="selectionEnd"
+						:editing-cell="editingCell"
+						:base-column-index="fixedColumns.length"
+						@sortColumn="sortByColumn"
+						@resizeStart="handleResizeStart"
+						@selectRow="selectEntireRow"
+						@cellMouseDown="handleMouseDown"
+						@cellMouseOver="handleMouseOver"
+						@cellEditStart="startEditing"
+						@cellKeyDown="handleCellKeyDown"
+						@updateCell="updateCell"
+						@stopEditing="handleStopEditingAndBlur"
+						@setInputRef="setInputRef"
+					/>
 				</div>
 			</div>
 			<Btn v-if="allowAddRow" outline thin round icon="add" value="Add Row" class="mt-05" @click="addRow" />
@@ -768,97 +788,8 @@ const filteredRows = computed(() => {
 </template>
 
 <style scoped>
-.fixed-columns {
-	border-right: 2px solid var(--border-color);
-}
-.spreadsheet table {
-	border-collapse: collapse;
-}
-.spreadsheet th, .spreadsheet td {
-	border: 1px solid var(--border-color);
-	padding: 0.1rem 0.5rem;
-	min-width: 80px;
-	background: var(--bgl-white);
-	user-select: none;
-}
-.spreadsheet th {
-	background: var(--input-bg);
-	white-space: nowrap;
-	position: relative;
-	padding: 0.25rem 0.5rem;
-	font-weight: 500;
-	text-align: start;
-}
-.spreadsheet th .bgl_icon-font{
-	vertical-align: middle;
-}
-.spreadsheet td.selected {
-	background: var(--bgl-primary-light);
-}
-.spreadsheet td.locked {
-	background: var(--bgl-gray-light);
-	cursor: default;
-}
-.spreadsheet td.locked.selected {
-	background: var(--bgl-primary-light);
-}
-.spreadsheet td {
-	height: 40px;
-	vertical-align: middle;
-}
-.spreadsheet td:has(img){
-	padding: 0;
-}
-.spreadsheet td span{
-	display: block;
-    display: -webkit-box;
-    max-width: 100%;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    -webkit-line-clamp: 1;
-	word-break: break-all;
-}
-.spreadsheet input {
-	width: 100%;
-	border: none;
-	background: transparent;
-	padding: 0;
-	margin: 0;
-	min-height: 0;
-	min-width: 0;
-}
-.spreadsheet input:focus {
-	outline: 2px solid var(--bgl-primary);
-	outline-offset: 6px;
-}
-.spreadsheet th.sortable {
-	cursor: pointer;
-}
-.row-number-header, .row-number {
-	width: fit-content;
-	min-width: fit-content !important;
-	padding: 0.1rem 0.7rem !important;
-}
-.spreadsheet td .bgl-checkbox{
-	margin: 0;
-	text-align: center;
-	justify-content: center;
-
-}
-.spreadsheet td:has(.bgl-checkbox){
-	text-align: center;
-	background: var(--input-bg);
-}
-.spreadsheet td:has(:checked){
-	background: var(--bgl-primary-light);
-}
-
-.spreadsheetCellPlaceHolder{
-	height: 0px;
-	overflow: hidden;
-	opacity: 0;
-	pointer-events: none;
+/* Spreadsheet container styles */
+.spreadsheet {
 	user-select: none;
 }
 </style>