@threadlabs/looma 0.19.1 → 0.21.0

package/vue/UiEditorTableOverlay.vue

@@ -1,15 +1,44 @@
-<!-- Generated by HTML Next 1.0.0-alpha.7 for Vue 3.5. Do not edit. -->
+<!-- Generated by HTML Next 1.0.0-alpha.12 for Vue 3.5. Do not edit. -->
 <script setup lang="ts">
-import { ref } from 'vue'
-import * as controllerModule from '../components/ui-editor-table-overlay/ui-editor-table-overlay.js'
+import { computed, defineComponent, getCurrentInstance, h, ref, watchSyncEffect } from 'vue'
+import type { PropType, VNode } from 'vue'
 import { createDispatch, useComponentHost } from './host'
+import { checkedProp } from './props'
 import UiIcon from './UiIcon.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(
-  defineProps<{
-    geometry?: {
+const props = defineProps({
+  geometry: {
+    type: null as unknown as PropType<
+      {
+        readonly rowBoundaries: readonly (number)[]
+        readonly columnBoundaries: readonly (number)[]
+        readonly activeCell: {
+          readonly left: number
+          readonly top: number
+          readonly width: number
+          readonly height: number
+          readonly rowIndex: number
+          readonly columnIndex: number
+        } | null
+        readonly hoveredCell?: {
+          readonly left: number
+          readonly top: number
+          readonly width: number
+          readonly height: number
+          readonly rowIndex: number
+          readonly columnIndex: number
+        } | null
+      } | null
+    >,
+    default: null,
+  },
+  open: { type: null as unknown as PropType<boolean | null>, default: false },
+})
+const checkedProps = computed(() => ({
+  geometry: checkedProp<
+    {
       readonly rowBoundaries: readonly (number)[]
       readonly columnBoundaries: readonly (number)[]
       readonly activeCell: {
@@ -28,37 +57,185 @@ const props = withDefaults(
         readonly rowIndex: number
         readonly columnIndex: number
       } | null
-    } | null
-    open?: boolean
-  }>(),
-  {
-    open: false,
+    }
+  >(
+    props['geometry'],
+    {
+      kind: 'object',
+      fields: [{
+        name: 'rowBoundaries',
+        type: { kind: 'list', item: { kind: 'terminal', name: 'number' } },
+        optional: false,
+      }, {
+        name: 'columnBoundaries',
+        type: { kind: 'list', item: { kind: 'terminal', name: 'number' } },
+        optional: false,
+      }, {
+        name: 'activeCell',
+        type: {
+          kind: 'union',
+          members: [{
+            kind: 'object',
+            fields: [
+              { name: 'left', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'top', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'width', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'height', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'rowIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+              { name: 'columnIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+            ],
+            open: false,
+          }, { kind: 'terminal', name: 'null' }],
+        },
+        optional: false,
+      }, {
+        name: 'hoveredCell',
+        type: {
+          kind: 'union',
+          members: [{
+            kind: 'object',
+            fields: [
+              { name: 'left', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'top', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'width', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'height', type: { kind: 'terminal', name: 'number' }, optional: false },
+              { name: 'rowIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+              { name: 'columnIndex', type: { kind: 'terminal', name: 'integer' }, optional: false },
+            ],
+            open: false,
+          }, { kind: 'terminal', name: 'null' }],
+        },
+        optional: true,
+      }],
+      open: false,
+    },
+    false,
+    'geometry',
+    undefined,
+    undefined,
+  ),
+  open: checkedProp<boolean>(
+    props['open'],
+    { kind: 'terminal', name: 'boolean' },
+    false,
+    'open',
+    undefined,
+    undefined,
+  ) as boolean,
+}))
+void checkedProps.value
+watchSyncEffect(() => {
+  void checkedProps.value
+})
+function nativeAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
+  const names = Object.keys(attrs)
+  if (!names.some((name) => Object.hasOwn(Object.prototype, name))) return attrs
+  return Object.fromEntries(names.map((name) => [
+    Object.hasOwn(Object.prototype, name)
+      ? name === '__proto__' ? '__Proto__' : name[0]!.toUpperCase() + name.slice(1)
+      : name,
+    attrs[name],
+  ]))
+}
+const KeyedFailure = defineComponent({
+  props: { error: { type: null, required: true } },
+  setup(props) {
+    return () => {
+      throw props.error
+    }
   },
-)
+})
+const KeyedBoundary = defineComponent({
+  setup(_props, { slots }) {
+    let last: VNode[] = []
+    return () => {
+      try {
+        last = slots.default?.() ?? []
+        return last
+      } catch (error) {
+        if (
+          !(error instanceof Error)
+          || (error as Error & { diagnostic?: { code?: string } }).diagnostic?.code !== 'HR004'
+        ) throw error
+        if (typeof window === 'undefined') throw error
+        return [...last, h(KeyedFailure, { error })]
+      }
+    }
+  },
+})
+const componentInstance = getCurrentInstance()
+function reflectedProp(
+  name: string,
+  kebab: string,
+  value: unknown,
+  fallback: string | undefined,
+  bound: boolean,
+  separator?: string,
+): string | undefined {
+  const incoming = componentInstance?.vnode.props
+  if (
+    !bound
+    && (incoming === null || incoming === undefined
+      || (!Object.hasOwn(incoming, name) && !Object.hasOwn(incoming, kebab)))
+  ) return fallback
+  if (value === null || value === undefined) return undefined
+  return Array.isArray(value) && separator !== undefined
+    ? value.join(separator)
+    : typeof value === 'object'
+    ? JSON.stringify(value)
+    : String(value)
+}
+const hydrationInstance = getCurrentInstance()
 const emit = defineEmits<{
-  action: [
-    detail: {
-      readonly action: 'add-row-before' | 'add-row-after' | 'add-column-before' | 'add-column-after'
-      readonly boundaryIndex: number
-    } | {
-      readonly action: 'select-row' | 'select-column'
-      readonly rowIndex: number
-      readonly columnIndex: number
-    } | {
-      readonly action: 'reorder-row' | 'reorder-column'
-      readonly fromIndex: number
-      readonly toIndex: number
-    } | {
-      readonly action: 'open-cell-menu' | 'open-row-menu' | 'open-column-menu'
-      readonly rowIndex: number
-      readonly columnIndex: number
-      readonly anchor: {
-        readonly left: number
-        readonly top: number
-        readonly right: number
-        readonly bottom: number
+  'add-row-before': [event: CustomEvent<{ readonly boundaryIndex: number }>]
+  'add-row-after': [event: CustomEvent<{ readonly boundaryIndex: number }>]
+  'add-column-before': [event: CustomEvent<{ readonly boundaryIndex: number }>]
+  'add-column-after': [event: CustomEvent<{ readonly boundaryIndex: number }>]
+  'select-row': [event: CustomEvent<{ readonly rowIndex: number; readonly columnIndex: number }>]
+  'select-column': [event: CustomEvent<{ readonly rowIndex: number; readonly columnIndex: number }>]
+  'reorder-row': [event: CustomEvent<{ readonly fromIndex: number; readonly toIndex: number }>]
+  'reorder-column': [event: CustomEvent<{ readonly fromIndex: number; readonly toIndex: number }>]
+  'open-cell-menu': [
+    event: CustomEvent<
+      {
+        readonly rowIndex: number
+        readonly columnIndex: number
+        readonly anchor: {
+          readonly left: number
+          readonly top: number
+          readonly right: number
+          readonly bottom: number
+        }
       }
-    },
+    >,
+  ]
+  'open-row-menu': [
+    event: CustomEvent<
+      {
+        readonly rowIndex: number
+        readonly columnIndex: number
+        readonly anchor: {
+          readonly left: number
+          readonly top: number
+          readonly right: number
+          readonly bottom: number
+        }
+      }
+    >,
+  ]
+  'open-column-menu': [
+    event: CustomEvent<
+      {
+        readonly rowIndex: number
+        readonly columnIndex: number
+        readonly anchor: {
+          readonly left: number
+          readonly top: number
+          readonly right: number
+          readonly bottom: number
+        }
+      }
+    >,
   ]
 }>()
 
@@ -108,136 +285,230 @@ const active = ref<
   } | null
 >(null)
 const activeKey = ref('')
-
-const isActionDetail = (detail: unknown): boolean =>
-  (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-    && ((detail as Record<string, unknown>)['action'] === 'add-row-before'
-      || (detail as Record<string, unknown>)['action'] === 'add-row-after'
-      || (detail as Record<string, unknown>)['action'] === 'add-column-before'
-      || (detail as Record<string, unknown>)['action'] === 'add-column-after')
-    && Number.isInteger((detail as Record<string, unknown>)['boundaryIndex'])
-    && Object.keys(detail as object).every((key) => ['action', 'boundaryIndex'].includes(key)))
-  || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-    && ((detail as Record<string, unknown>)['action'] === 'select-row'
-      || (detail as Record<string, unknown>)['action'] === 'select-column')
-    && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
-    && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
-    && Object.keys(detail as object).every((key) =>
-      ['action', 'rowIndex', 'columnIndex'].includes(key)
-    ))
-  || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-    && ((detail as Record<string, unknown>)['action'] === 'reorder-row'
-      || (detail as Record<string, unknown>)['action'] === 'reorder-column')
-    && Number.isInteger((detail as Record<string, unknown>)['fromIndex'])
-    && Number.isInteger((detail as Record<string, unknown>)['toIndex'])
-    && Object.keys(detail as object).every((key) =>
-      ['action', 'fromIndex', 'toIndex'].includes(key)
-    ))
-  || (detail !== null && typeof detail === 'object' && !Array.isArray(detail)
-    && ((detail as Record<string, unknown>)['action'] === 'open-cell-menu'
-      || (detail as Record<string, unknown>)['action'] === 'open-row-menu'
-      || (detail as Record<string, unknown>)['action'] === 'open-column-menu')
-    && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
-    && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
-    && ((detail as Record<string, unknown>)['anchor'] !== null
-      && typeof (detail as Record<string, unknown>)['anchor'] === 'object'
-      && !Array.isArray((detail as Record<string, unknown>)['anchor'])
-      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left']
-          === 'number'
-        && Number.isFinite(
-          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left'],
-        ))
-      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top']
-          === 'number'
-        && Number.isFinite(
-          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top'],
-        ))
-      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right']
-          === 'number'
-        && Number.isFinite(
-          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right'],
-        ))
-      && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)[
-            'bottom'
-          ] === 'number'
-        && Number.isFinite(
-          ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['bottom'],
-        ))
-      && Object.keys((detail as Record<string, unknown>)['anchor'] as object).every((key) =>
-        ['left', 'top', 'right', 'bottom'].includes(key)
+let guardedPrevious: any
+const guarded = computed(() => {
+  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
+    return guardedPrevious
+  }
+  return guardedPrevious = hovered.value?.rowIndex
+})
+let guardedBindingPrevious: any
+const guardedBinding = computed(() => {
+  if (
+    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
+  ) return guardedBindingPrevious
+  return guardedBindingPrevious = hovered.value?.columnIndex
+})
+let guardedBinding2Previous: any
+const guardedBinding2 = computed(() => {
+  if (!(hovered.value?.['rowIndex'] == null || Number.isInteger(hovered.value?.['rowIndex']))) {
+    return guardedBinding2Previous
+  }
+  return guardedBinding2Previous = hovered.value?.rowIndex
+})
+let guardedBinding3Previous: any
+const guardedBinding3 = computed(() => {
+  if (
+    !(hovered.value?.['columnIndex'] == null || Number.isInteger(hovered.value?.['columnIndex']))
+  ) return guardedBinding3Previous
+  return guardedBinding3Previous = hovered.value?.columnIndex
+})
+let guardedBinding4Previous: any
+const guardedBinding4 = computed(() => {
+  if (!(active.value?.['rowIndex'] == null || Number.isInteger(active.value?.['rowIndex']))) {
+    return guardedBinding4Previous
+  }
+  return guardedBinding4Previous = active.value?.rowIndex
+})
+let guardedBinding5Previous: any
+const guardedBinding5 = computed(() => {
+  if (!(active.value?.['columnIndex'] == null || Number.isInteger(active.value?.['columnIndex']))) {
+    return guardedBinding5Previous
+  }
+  return guardedBinding5Previous = active.value?.columnIndex
+})
+const hydrationNode = hydrationInstance?.vnode.el
+if (
+  typeof window !== 'undefined' && hydrationNode != null
+  && (!(hydrationNode instanceof Element) || hydrationNode.localName !== ('div'))
+) {
+  throw Object.assign(
+    new Error('HR005: Server markup for <ui-editor-table-overlay> has an incompatible root.'),
+    {
+      name: 'HtmlDiagnosticError',
+      diagnostic: Object.freeze({
+        code: 'HR005',
+        message: 'Server markup for <ui-editor-table-overlay> has an incompatible root.',
+      }),
+    },
+  )
+}
+
+const isAddRowBeforeDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Number.isInteger((detail as Record<string, unknown>)['boundaryIndex'])
+  && Object.keys(detail as object).every((key) => ['boundaryIndex'].includes(key))
+const isSelectRowDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
+  && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
+  && Object.keys(detail as object).every((key) => ['rowIndex', 'columnIndex'].includes(key))
+const isReorderRowDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Number.isInteger((detail as Record<string, unknown>)['fromIndex'])
+  && Number.isInteger((detail as Record<string, unknown>)['toIndex'])
+  && Object.keys(detail as object).every((key) => ['fromIndex', 'toIndex'].includes(key))
+const isOpenCellMenuDetail = (detail: unknown): boolean =>
+  detail !== null && typeof detail === 'object' && !Array.isArray(detail)
+  && Number.isInteger((detail as Record<string, unknown>)['rowIndex'])
+  && Number.isInteger((detail as Record<string, unknown>)['columnIndex'])
+  && ((detail as Record<string, unknown>)['anchor'] !== null
+    && typeof (detail as Record<string, unknown>)['anchor'] === 'object'
+    && !Array.isArray((detail as Record<string, unknown>)['anchor'])
+    && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left']
+        === 'number'
+      && Number.isFinite(
+        ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['left'],
+      ))
+    && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top']
+        === 'number'
+      && Number.isFinite(
+        ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['top'],
       ))
-    && Object.keys(detail as object).every((key) =>
-      ['action', 'rowIndex', 'columnIndex', 'anchor'].includes(key)
+    && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right']
+        === 'number'
+      && Number.isFinite(
+        ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['right'],
+      ))
+    && (typeof ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['bottom']
+        === 'number'
+      && Number.isFinite(
+        ((detail as Record<string, unknown>)['anchor'] as Record<string, unknown>)['bottom'],
+      ))
+    && Object.keys((detail as Record<string, unknown>)['anchor'] as object).every((key) =>
+      ['left', 'top', 'right', 'bottom'].includes(key)
     ))
+  && Object.keys(detail as object).every((key) =>
+    ['rowIndex', 'columnIndex', 'anchor'].includes(key)
+  )
 const dispatch = createDispatch(root, emit as (name: string, detail: unknown) => void, {
   checks: {
-    action: isActionDetail,
+    'add-row-before': isAddRowBeforeDetail,
+    'add-row-after': isAddRowBeforeDetail,
+    'add-column-before': isAddRowBeforeDetail,
+    'add-column-after': isAddRowBeforeDetail,
+    'select-row': isSelectRowDetail,
+    'select-column': isSelectRowDetail,
+    'reorder-row': isReorderRowDetail,
+    'reorder-column': isReorderRowDetail,
+    'open-cell-menu': isOpenCellMenuDetail,
+    'open-row-menu': isOpenCellMenuDetail,
+    'open-column-menu': isOpenCellMenuDetail,
   },
 })
 
-useComponentHost(controllerModule.default, {
+useComponentHost(() => import('../components/ui-editor-table-overlay/ui-editor-table-overlay.js'), {
   root,
   dispatch,
-  props,
+  controllerSource: {
+    specifier: '../components/ui-editor-table-overlay/ui-editor-table-overlay.js',
+    definition: './components/ui-editor-table-overlay/ui-editor-table-overlay.html',
+  },
+  props: checkedProps,
   state: { rows, cols, hovered, active, activeKey },
 })
+
+function text(value: unknown): string {
+  if (Array.isArray(value)) return value.map(text).join(' ')
+  return value === null || value === undefined || typeof value === 'object' ? '' : String(value)
+}
+
+function uniqueKeys<T>(
+  items: readonly T[],
+  keyOf: (
+    item: T,
+    index: number,
+    loop: { index: number; first: boolean; last: boolean; count: number },
+  ) => unknown,
+): readonly T[] {
+  const seen = new Set<unknown>()
+  for (let index = 0; index < items.length; index += 1) {
+    const key = keyOf(items[index]!, index, {
+      index,
+      first: index === 0,
+      last: index === items.length - 1,
+      count: items.length,
+    })
+    if (seen.has(key)) {
+      const message = `A keyed list produced duplicate key \`${text(key)}\`.`
+      throw Object.assign(new Error(`HR004: ${message}`), {
+        name: 'HtmlDiagnosticError',
+        diagnostic: Object.freeze({ code: 'HR004', message }),
+      })
+    }
+    seen.add(key)
+  }
+  return items
+}
 </script>
 
 <template>
   <div
     data-component="ui-editor-table-overlay"
     aria-label="Table controls"
-    v-bind="$attrs"
-    :hidden="!open"
+    v-bind="nativeAttrs($attrs)"
+    :hidden="!checkedProps.open"
+    :data-geometry="reflectedProp('geometry', 'geometry', checkedProps.geometry, undefined, false)"
+    :data-open="reflectedProp('open', 'open', checkedProps.open, undefined, false)"
     ref="root"
   >
     <div class="rows">
-      <div
-        v-for="control in rows"
-        :key="control.key"
-        class="control row"
-        :data-control-key="control.key"
-        :class="{ active: control.key === activeKey }"
-        :style="{ top: control.offset }"
-      >
-        <span class="line" aria-hidden="true"></span>
-        <span class="guide" data-ui-guide="" aria-hidden="true"></span>
-        <button
-          type="button"
-          class="handle"
-          :data-ui-affordance="control.affordance"
-          :data-action="control.action"
-          :data-boundary-index="control.index"
-          :aria-label="control.label"
+      <KeyedBoundary><div
+          v-for="control in uniqueKeys(rows, (control, index, loop) => control.key)"
+          :key="control.key"
+          class="control row"
+          :data-control-key="control.key"
+          :class="{ active: control.key === activeKey }"
+          :style="{ top: control.offset }"
         >
-          <UiIcon name="plus" />
-          <span class="tooltip" role="tooltip">{{ control.label }}</span>
-        </button>
-      </div>
+          <span class="line" aria-hidden="true"></span>
+          <span class="guide" data-ui-guide="" aria-hidden="true"></span>
+          <button
+            type="button"
+            class="handle"
+            :data-ui-affordance="control.affordance"
+            :data-action="control.action"
+            :data-boundary-index="control.index"
+            :aria-label="control.label"
+          >
+            <UiIcon name="plus" />
+            <span class="tooltip" role="tooltip">{{ control.label }}</span>
+          </button>
+        </div></KeyedBoundary>
     </div>
     <div class="cols">
-      <div
-        v-for="control in cols"
-        :key="control.key"
-        class="control col"
-        :data-control-key="control.key"
-        :class="{ active: control.key === activeKey }"
-        :style="{ left: control.offset }"
-      >
-        <span class="line" aria-hidden="true"></span>
-        <span class="guide" data-ui-guide="" aria-hidden="true"></span>
-        <button
-          type="button"
-          class="handle"
-          :data-ui-affordance="control.affordance"
-          :data-action="control.action"
-          :data-boundary-index="control.index"
-          :aria-label="control.label"
+      <KeyedBoundary><div
+          v-for="control in uniqueKeys(cols, (control, indexLoop, loop) => control.key)"
+          :key="control.key"
+          class="control col"
+          :data-control-key="control.key"
+          :class="{ active: control.key === activeKey }"
+          :style="{ left: control.offset }"
         >
-          <UiIcon name="plus" />
-          <span class="tooltip" role="tooltip">{{ control.label }}</span>
-        </button>
-      </div>
+          <span class="line" aria-hidden="true"></span>
+          <span class="guide" data-ui-guide="" aria-hidden="true"></span>
+          <button
+            type="button"
+            class="handle"
+            :data-ui-affordance="control.affordance"
+            :data-action="control.action"
+            :data-boundary-index="control.index"
+            :aria-label="control.label"
+          >
+            <UiIcon name="plus" />
+            <span class="tooltip" role="tooltip">{{ control.label }}</span>
+          </button>
+        </div></KeyedBoundary>
     </div>
     <template v-if="hovered"><button
         type="button"
@@ -245,9 +516,9 @@ useComponentHost(controllerModule.default, {
         data-action="select-row"
         title="Drag row to reorder; click for actions"
         aria-label="Row actions"
-        :data-row-index="hovered?.rowIndex"
-        :data-column-index="hovered?.columnIndex"
-        :style="{ top: hovered?.rowOffset }"
+        :data-row-index="guarded"
+        :data-column-index="guardedBinding"
+        :style="{ top: hovered?.rowOffset ?? undefined }"
       >
         <span class="glyph"><UiIcon name="grip-vertical" /></span>
       </button>
@@ -257,9 +528,9 @@ useComponentHost(controllerModule.default, {
         data-action="select-column"
         title="Drag column to reorder; click for actions"
         aria-label="Column actions"
-        :data-row-index="hovered?.rowIndex"
-        :data-column-index="hovered?.columnIndex"
-        :style="{ left: hovered?.columnOffset }"
+        :data-row-index="guardedBinding2"
+        :data-column-index="guardedBinding3"
+        :style="{ left: hovered?.columnOffset ?? undefined }"
       >
         <span class="glyph"><UiIcon name="grip-horizontal" /></span>
       </button></template>
@@ -270,9 +541,9 @@ useComponentHost(controllerModule.default, {
       data-action="open-cell-menu"
       title="Cell actions"
       aria-label="Cell actions"
-      :data-row-index="active?.rowIndex"
-      :data-column-index="active?.columnIndex"
-      :style="{ left: active?.menuLeft, top: active?.menuTop }"
+      :data-row-index="guardedBinding4"
+      :data-column-index="guardedBinding5"
+      :style="{ left: active?.menuLeft ?? undefined, top: active?.menuTop ?? undefined }"
     >
       <UiIcon name="chevron-down" />
     </button>