@pgcorp/ui-kit 0.1.0

package/src/components/shared/data-display/SVirtualList.css

@@ -0,0 +1,24 @@
+@reference "../../../styles/reference.css";
+
+.s-virtual-list {
+  @apply w-full min-w-0;
+  overflow-anchor: none;
+}
+
+.s-virtual-list:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}
+
+.s-virtual-list__spacer {
+  @apply pointer-events-none w-full;
+}
+
+.s-virtual-list__item {
+  @apply box-border w-full min-w-0;
+}
+
+.s-virtual-list__item:focus-visible {
+  outline: var(--s-focus-ring-width) solid var(--s-focus-ring-strong-color);
+  outline-offset: var(--s-focus-ring-inset-offset);
+}

package/src/components/shared/data-display/SVirtualList.ts

@@ -0,0 +1,19 @@
+/** Ключ элемента виртуального списка. / Virtual-list item key. */
+export type SVirtualListItemKey = string | number
+
+/**
+ * Публичный контракт виртуального списка с измеряемыми строками.
+ * Public contract for a virtual list with measured rows.
+ */
+export interface SVirtualListProps<Item = unknown> {
+  items: readonly Item[]
+  /** Оценочная высота строки до фактического измерения ResizeObserver. / Estimated row height before ResizeObserver measurement. */
+  itemSize: number
+  overscan?: number
+  height?: number | null
+  /** Устойчивый доменный ключ; индекс массива не является допустимым fallback. / Stable domain key; an array index is not a valid fallback. */
+  itemKey: (item: Item) => SVirtualListItemKey
+  itemLabel: (item: Item, index: number) => string
+  accessibleLabel: string
+  externalScrollTarget?: HTMLElement | null
+}

package/src/components/shared/data-display/SVirtualList.vue

@@ -0,0 +1,361 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    ref="container"
+    class="s-virtual-list"
+    :style="containerStyle"
+    :data-item-size="itemSize"
+    :data-viewport-height="height ?? undefined"
+    role="list"
+    :aria-label="accessibleLabel"
+    tabindex="0"
+    @scroll.passive="updateViewport"
+  >
+    <div class="s-virtual-list__spacer" :style="spacerStyle" aria-hidden="true" />
+    <div
+      v-for="entry in visibleEntries"
+      :key="entry.key"
+      :ref="renderedItemRef(entry.key)"
+      class="s-virtual-list__item"
+      :style="itemStyle(entry.index)"
+      :data-virtual-index="entry.index"
+      role="listitem"
+      :aria-label="resolveItemLabel(entry.item, entry.index)"
+      :aria-posinset="entry.index + 1"
+      :aria-setsize="items.length"
+      tabindex="-1"
+    >
+      <slot
+        :item="entry.item"
+        :index="entry.index"
+        :position="entry.index + 1"
+        :set-size="items.length"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T">
+import {
+  computed,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  type VNodeRef,
+  watch,
+} from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract'
+import type { SVirtualListItemKey, SVirtualListProps } from './SVirtualList'
+
+defineOptions({ inheritAttrs: false })
+
+type Alignment = 'auto' | 'start' | 'center' | 'end'
+type StyleObject = Record<string, string>
+
+const props = withDefaults(defineProps<SVirtualListProps<T>>(), {
+  overscan: 8,
+  height: null,
+  externalScrollTarget: null,
+})
+
+defineSlots<{
+  default(props: { item: T; index: number; position: number; setSize: number }): unknown
+}>()
+
+const container = ref<HTMLElement | null>(null)
+const ownedAttrs = useOwnedAttrs({ component: 'SVirtualList', owner: 'virtual list viewport' })
+useInteractiveLeafRegistration({ owner: 'SVirtualList' })
+const scrollTop = ref(0)
+const viewportHeight = ref(0)
+const measurements = ref(new Map<SVirtualListItemKey, number>())
+const renderedItemsByKey = new Map<SVirtualListItemKey, HTMLElement>()
+const renderedItemKeysByElement = new Map<HTMLElement, SVirtualListItemKey>()
+const renderedItemRefs = new Map<SVirtualListItemKey, VNodeRef>()
+let resizeObserver: ResizeObserver | null = null
+let boundExternalTarget: HTMLElement | null = null
+
+const isExternal = computed(() => props.externalScrollTarget !== null)
+
+function describeItemKey(key: SVirtualListItemKey): string {
+  return `${typeof key}:${JSON.stringify(key)}`
+}
+
+function validateItemKey(candidate: unknown, index: number): asserts candidate is SVirtualListItemKey {
+  if (typeof candidate === 'string') {
+    if (candidate.trim().length === 0) {
+      throw new TypeError(`SVirtualList itemKey returned an empty string for item at index ${index}`)
+    }
+    return
+  }
+  if (typeof candidate === 'number') {
+    if (!Number.isFinite(candidate)) {
+      throw new TypeError(`SVirtualList itemKey returned a non-finite number for item at index ${index}`)
+    }
+    return
+  }
+  throw new TypeError(`SVirtualList itemKey returned unsupported ${typeof candidate} key for item at index ${index}`)
+}
+
+function resolveItemLabel(item: T, index: number): string {
+  return props.itemLabel(item, index)
+}
+
+const itemKeys = computed(() => {
+  const seen = new Set<SVirtualListItemKey>()
+  return props.items.map((item, index) => {
+    const key: unknown = props.itemKey(item)
+    validateItemKey(key, index)
+    if (seen.has(key)) {
+      throw new TypeError(`SVirtualList itemKey returned duplicate key ${describeItemKey(key)} at index ${index}`)
+    }
+    seen.add(key)
+    return key
+  })
+})
+const itemKeyIndexes = computed(() => new Map(itemKeys.value.map((key, index) => [key, index])))
+const itemSizes = computed(() => itemKeys.value.map((key) => measurements.value.get(key) ?? props.itemSize))
+const offsets = computed(() => {
+  const values = new Array<number>(props.items.length + 1)
+  values[0] = 0
+  for (let index = 0; index < props.items.length; index += 1) {
+    values[index + 1] = (values[index] ?? 0) + (itemSizes.value[index] ?? props.itemSize)
+  }
+  return values
+})
+const totalHeight = computed(() => offsets.value[props.items.length] ?? 0)
+
+const containerStyle = computed<StyleObject>(() => {
+  if (isExternal.value) {
+    const externalStyle: StyleObject = {
+      position: 'relative',
+      overflow: 'visible',
+      height: `${totalHeight.value}px`,
+    }
+    return externalStyle
+  }
+  const internalStyle: StyleObject = {
+    position: 'relative',
+    overflowY: 'auto',
+    height: typeof props.height === 'number' && props.height > 0 ? `${props.height}px` : '100%',
+  }
+  return internalStyle
+})
+const spacerStyle = computed<StyleObject>(() => ({ height: `${totalHeight.value}px` }))
+
+function indexAtOffset(offset: number): number {
+  let low = 0
+  let high = props.items.length
+  while (low < high) {
+    const middle = Math.floor((low + high) / 2)
+    if ((offsets.value[middle + 1] ?? totalHeight.value) <= offset) low = middle + 1
+    else high = middle
+  }
+  return Math.min(low, Math.max(props.items.length - 1, 0))
+}
+
+const firstVisibleIndex = computed(() => props.items.length === 0 ? 0 : indexAtOffset(scrollTop.value))
+const lastVisibleIndex = computed(() => props.items.length === 0
+  ? -1
+  : indexAtOffset(scrollTop.value + viewportHeight.value))
+const startIndex = computed(() => Math.max(0, firstVisibleIndex.value - props.overscan))
+const endIndex = computed(() => Math.min(props.items.length, lastVisibleIndex.value + props.overscan + 1))
+const visibleEntries = computed(() => props.items.slice(startIndex.value, endIndex.value).map((item, localIndex) => {
+  const index = startIndex.value + localIndex
+  return { item, index, key: itemKeys.value[index] as SVirtualListItemKey }
+}))
+
+function itemStyle(index: number): StyleObject {
+  return {
+    position: 'absolute',
+    top: `${offsets.value[index] ?? 0}px`,
+    left: '0',
+    right: '0',
+    minHeight: `${props.itemSize}px`,
+  }
+}
+
+function externalOffset(): number {
+  const target = props.externalScrollTarget
+  const root = container.value
+  if (!target || !root) return 0
+  return root.getBoundingClientRect().top - target.getBoundingClientRect().top + target.scrollTop
+}
+
+function updateViewport(): void {
+  const target = props.externalScrollTarget ?? container.value
+  if (!target) return
+  viewportHeight.value = target.clientHeight
+  scrollTop.value = Math.max(0, target.scrollTop - (isExternal.value ? externalOffset() : 0))
+}
+
+function preserveAnchor(index: number, delta: number): void {
+  if (index >= firstVisibleIndex.value || delta === 0) return
+  const target = props.externalScrollTarget ?? container.value
+  if (target) target.scrollTop += delta
+}
+
+function unregisterRenderedItem(key: SVirtualListItemKey): void {
+  const element = renderedItemsByKey.get(key)
+  if (!element) return
+  const registeredKey = renderedItemKeysByElement.get(element)
+  if (registeredKey !== key) {
+    throw new Error(
+      `SVirtualList rendered item registry mismatch for key ${describeItemKey(key)}: element belongs to ${registeredKey === undefined ? 'no key' : describeItemKey(registeredKey)}`,
+    )
+  }
+  resizeObserver?.unobserve(element)
+  renderedItemsByKey.delete(key)
+  renderedItemKeysByElement.delete(element)
+}
+
+function registerRenderedItem(key: SVirtualListItemKey, element: HTMLElement): void {
+  const index = itemKeyIndexes.value.get(key)
+  if (index === undefined) {
+    throw new Error(`SVirtualList received a rendered item ref for stale key ${describeItemKey(key)}`)
+  }
+  const existingElement = renderedItemsByKey.get(key)
+  if (existingElement && existingElement !== element) {
+    throw new Error(`SVirtualList rendered item key collision for ${describeItemKey(key)} at index ${index}`)
+  }
+  const existingKey = renderedItemKeysByElement.get(element)
+  if (existingKey !== undefined && existingKey !== key) {
+    throw new Error(
+      `SVirtualList rendered item element collision between ${describeItemKey(existingKey)} and ${describeItemKey(key)}`,
+    )
+  }
+  if (existingElement === element) return
+  renderedItemsByKey.set(key, element)
+  renderedItemKeysByElement.set(element, key)
+  resizeObserver?.observe(element)
+}
+
+function renderedItemRef(key: SVirtualListItemKey): VNodeRef {
+  const existingRef = renderedItemRefs.get(key)
+  if (existingRef) return existingRef
+  const itemRef: VNodeRef = (target) => {
+    if (target === null) {
+      unregisterRenderedItem(key)
+      return
+    }
+    if (!(target instanceof HTMLElement)) {
+      throw new TypeError(`SVirtualList rendered item ref for ${describeItemKey(key)} must resolve to an HTMLElement`)
+    }
+    registerRenderedItem(key, target)
+  }
+  renderedItemRefs.set(key, itemRef)
+  return itemRef
+}
+
+function measureEntry(entry: ResizeObserverEntry): void {
+  if (entry.target === container.value || entry.target === props.externalScrollTarget) {
+    updateViewport()
+    return
+  }
+  if (!(entry.target instanceof HTMLElement)) {
+    throw new TypeError('SVirtualList received a ResizeObserver entry for a non-HTMLElement target')
+  }
+  const key = renderedItemKeysByElement.get(entry.target)
+  if (key === undefined || renderedItemsByKey.get(key) !== entry.target) {
+    throw new Error('SVirtualList received a ResizeObserver entry for an unregistered rendered item')
+  }
+  const index = itemKeyIndexes.value.get(key)
+  if (index === undefined) {
+    throw new Error(`SVirtualList received a ResizeObserver entry for stale key ${describeItemKey(key)}`)
+  }
+  const size = entry.borderBoxSize[0]?.blockSize ?? entry.contentRect.height
+  if (!Number.isFinite(size) || size <= 0 || measurements.value.get(key) === size) return
+  const previous = measurements.value.get(key) ?? props.itemSize
+  const next = new Map(measurements.value)
+  next.set(key, size)
+  measurements.value = next
+  preserveAnchor(index, size - previous)
+}
+
+function scrollToIndex(index: number, alignment: Alignment = 'auto'): void {
+  if (!Number.isInteger(index) || index < 0 || index >= props.items.length) {
+    throw new RangeError(`SVirtualList index ${index} is outside 0..${Math.max(props.items.length - 1, 0)}`)
+  }
+  const target = props.externalScrollTarget ?? container.value
+  if (!target) return
+  const start = offsets.value[index] ?? 0
+  const end = offsets.value[index + 1] ?? start + props.itemSize
+  const viewportStart = scrollTop.value
+  const viewportEnd = viewportStart + viewportHeight.value
+  let nextOffset = start
+  if (alignment === 'end') nextOffset = end - viewportHeight.value
+  if (alignment === 'center') nextOffset = start - (viewportHeight.value - (end - start)) / 2
+  if (alignment === 'auto' && start >= viewportStart && end <= viewportEnd) return
+  if (alignment === 'auto' && end > viewportEnd) nextOffset = end - viewportHeight.value
+  target.scrollTop = Math.max(0, nextOffset + (isExternal.value ? externalOffset() : 0))
+  updateViewport()
+}
+
+async function focusItem(index: number, alignment: Alignment = 'auto'): Promise<void> {
+  const key = itemKeys.value[index]
+  scrollToIndex(index, alignment)
+  await nextTick()
+  if (key === undefined || itemKeyIndexes.value.get(key) === undefined) {
+    throw new Error(`SVirtualList focusItem key ${key === undefined ? `at index ${index}` : describeItemKey(key)} became stale before focus`)
+  }
+  const currentIndex = itemKeyIndexes.value.get(key)
+  if (currentIndex !== index) {
+    throw new Error(
+      `SVirtualList focusItem key ${describeItemKey(key)} moved from index ${index} to ${currentIndex} before focus`,
+    )
+  }
+  const element = renderedItemsByKey.get(key)
+  if (!element) {
+    throw new Error(`SVirtualList focusItem has no rendered item registration for key ${describeItemKey(key)} at index ${index}`)
+  }
+  if (renderedItemKeysByElement.get(element) !== key) {
+    throw new Error(`SVirtualList focusItem found a stale rendered item registration for key ${describeItemKey(key)}`)
+  }
+  element.focus()
+}
+
+defineExpose({ scrollToIndex, focusItem })
+
+function bindExternalTarget(target: HTMLElement | null): void {
+  boundExternalTarget?.removeEventListener('scroll', updateViewport)
+  if (boundExternalTarget) resizeObserver?.unobserve(boundExternalTarget)
+  boundExternalTarget = target
+  boundExternalTarget?.addEventListener('scroll', updateViewport, { passive: true })
+  if (boundExternalTarget) resizeObserver?.observe(boundExternalTarget)
+  updateViewport()
+}
+
+onMounted(() => {
+  if (typeof ResizeObserver !== 'undefined') {
+    resizeObserver = new ResizeObserver((entries) => entries.forEach(measureEntry))
+    if (container.value) resizeObserver.observe(container.value)
+    for (const element of renderedItemsByKey.values()) resizeObserver.observe(element)
+  }
+  bindExternalTarget(props.externalScrollTarget)
+  updateViewport()
+})
+
+watch(() => props.externalScrollTarget, bindExternalTarget)
+watch(() => itemKeys.value, (keys) => {
+  const activeKeys = new Set(keys)
+  measurements.value = new Map([...measurements.value].filter(([key]) => activeKeys.has(key)))
+  for (const key of renderedItemsByKey.keys()) {
+    if (!activeKeys.has(key)) unregisterRenderedItem(key)
+  }
+  for (const key of renderedItemRefs.keys()) {
+    if (!activeKeys.has(key)) renderedItemRefs.delete(key)
+  }
+  updateViewport()
+})
+
+onBeforeUnmount(() => {
+  boundExternalTarget?.removeEventListener('scroll', updateViewport)
+  resizeObserver?.disconnect()
+  renderedItemsByKey.clear()
+  renderedItemKeysByElement.clear()
+  renderedItemRefs.clear()
+})
+</script>
+
+<style lang="postcss" src="./SVirtualList.css" scoped></style>

package/src/components/shared/data-display/json.ts

@@ -0,0 +1,136 @@
+/** JSON scalar according to the JSON data model. / JSON-скаляр по модели данных JSON. */
+export type JsonScalar = string | number | boolean | null
+
+/** JSON object with recursively exact values. / JSON-объект с рекурсивно точными значениями. */
+export type JsonObject = { readonly [key: string]: JsonValue }
+
+/** JSON array with recursively exact values. / JSON-массив с рекурсивно точными значениями. */
+export type JsonArray = readonly JsonValue[]
+
+/** Value representable by JSON without coercion or omission. / Значение, представимое JSON без преобразования или пропуска. */
+export type JsonValue = JsonScalar | JsonObject | JsonArray
+
+/** Escapes one RFC 6901 reference token. / Экранирует один reference token по RFC 6901. */
+export function escapeJsonPointerToken(token: string): string {
+  return token.replaceAll('~', '~0').replaceAll('/', '~1')
+}
+
+/** Appends a reference token to an RFC 6901 JSON Pointer. / Добавляет reference token к JSON Pointer по RFC 6901. */
+export function appendJsonPointer(pointer: string, token: string): string {
+  return `${pointer}/${escapeJsonPointerToken(token)}`
+}
+
+function pointerCoordinate(pointer: string): string {
+  return `JSON Pointer ${JSON.stringify(pointer)}`
+}
+
+function unsupportedValueMessage(component: string, value: unknown, pointer: string): string {
+  return `${component}: unsupported ${typeof value} value at ${pointerCoordinate(pointer)}`
+}
+
+function assertArray(
+  value: unknown[],
+  component: string,
+  pointer: string,
+  activeContainers: Set<object>,
+): void {
+  const keys = Reflect.ownKeys(value)
+  if (keys.some((key) => typeof key === 'symbol')) {
+    throw new TypeError(`${component}: symbol properties are not representable at ${pointerCoordinate(pointer)}`)
+  }
+
+  for (const key of keys) {
+    if (typeof key !== 'string') {
+      throw new TypeError(`${component}: symbol properties are not representable at ${pointerCoordinate(pointer)}`)
+    }
+    if (key === 'length') continue
+    const index = Number(key)
+    if (!Number.isInteger(index) || index < 0 || String(index) !== key || index >= value.length) {
+      throw new TypeError(`${component}: non-JSON array property at ${pointerCoordinate(appendJsonPointer(pointer, key))}`)
+    }
+  }
+
+  for (let index = 0; index < value.length; index += 1) {
+    const itemPointer = appendJsonPointer(pointer, String(index))
+    const descriptor = Object.getOwnPropertyDescriptor(value, String(index))
+    if (!descriptor) {
+      throw new TypeError(`${component}: sparse array item at ${pointerCoordinate(itemPointer)}`)
+    }
+    if ('get' in descriptor || 'set' in descriptor) {
+      throw new TypeError(`${component}: accessor property at ${pointerCoordinate(itemPointer)}`)
+    }
+    assertJsonValueAt(descriptor.value, component, itemPointer, activeContainers)
+  }
+}
+
+function assertObject(
+  value: object,
+  component: string,
+  pointer: string,
+  activeContainers: Set<object>,
+): void {
+  const prototype = Object.getPrototypeOf(value)
+  if (prototype !== Object.prototype && prototype !== null) {
+    throw new TypeError(`${component}: expected a plain JSON object at ${pointerCoordinate(pointer)}`)
+  }
+
+  const keys = Reflect.ownKeys(value)
+  if (keys.some((key) => typeof key === 'symbol')) {
+    throw new TypeError(`${component}: symbol properties are not representable at ${pointerCoordinate(pointer)}`)
+  }
+
+  for (const key of keys) {
+    if (typeof key !== 'string') {
+      throw new TypeError(`${component}: symbol properties are not representable at ${pointerCoordinate(pointer)}`)
+    }
+    const propertyPointer = appendJsonPointer(pointer, key)
+    const descriptor = Object.getOwnPropertyDescriptor(value, key)
+    if (!descriptor) {
+      throw new TypeError(`${component}: unavailable property at ${pointerCoordinate(propertyPointer)}`)
+    }
+    if (!descriptor.enumerable) {
+      throw new TypeError(`${component}: non-enumerable property at ${pointerCoordinate(propertyPointer)}`)
+    }
+    if ('get' in descriptor || 'set' in descriptor) {
+      throw new TypeError(`${component}: accessor property at ${pointerCoordinate(propertyPointer)}`)
+    }
+    assertJsonValueAt(descriptor.value, component, propertyPointer, activeContainers)
+  }
+}
+
+function assertJsonValueAt(
+  value: unknown,
+  component: string,
+  pointer: string,
+  activeContainers: Set<object>,
+): asserts value is JsonValue {
+  if (value === null || typeof value === 'string' || typeof value === 'boolean') return
+  if (typeof value === 'number') {
+    if (!Number.isFinite(value)) {
+      throw new TypeError(`${component}: expected a finite number at ${pointerCoordinate(pointer)}`)
+    }
+    if (Object.is(value, -0)) {
+      throw new TypeError(`${component}: negative zero is not exactly representable at ${pointerCoordinate(pointer)}`)
+    }
+    return
+  }
+  if (typeof value !== 'object') {
+    throw new TypeError(unsupportedValueMessage(component, value, pointer))
+  }
+  if (activeContainers.has(value)) {
+    throw new TypeError(`${component}: cyclic reference at ${pointerCoordinate(pointer)}`)
+  }
+
+  activeContainers.add(value)
+  if (Array.isArray(value)) assertArray(value, component, pointer, activeContainers)
+  else assertObject(value, component, pointer, activeContainers)
+  activeContainers.delete(value)
+}
+
+/**
+ * Verifies that a runtime value is exact JSON without JSON.stringify coercions.
+ * Проверяет, что runtime-значение является точным JSON без преобразований JSON.stringify.
+ */
+export function assertJsonValue(value: unknown, component = 'JSON value'): asserts value is JsonValue {
+  assertJsonValueAt(value, component, '', new Set<object>())
+}

package/src/components/shared/data-display/table.ts

@@ -0,0 +1,76 @@
+import type {
+  ScrollableViewportMaxBlockSize,
+  TableColumnInlineSize,
+  TableColumnMinInlineSize,
+} from '../../../internal/semanticSizing'
+
+export type STableRowKey = string | number
+export type STableAlignment = 'left' | 'center' | 'right'
+export type STableRowState = 'default' | 'inserted' | 'updated' | 'deleted'
+export type STableCellState = 'default' | 'pending'
+export type STableSurface = 'bordered' | 'plain'
+export type STableMinWidth = 'content' | 'md' | 'lg'
+export type STableDensity = 'default' | 'compact'
+export type STableColumnContent = 'field' | 'value' | 'slot'
+
+interface STableColumnBase<Field extends string> {
+  field: Field
+  header: string
+  width?: TableColumnInlineSize
+  minWidth?: TableColumnMinInlineSize
+  align?: STableAlignment
+}
+
+type STableFieldColumn<Field extends string> = STableColumnBase<Field> & {
+  content?: 'field'
+  value?: never
+}
+
+type STableValueColumn<Row extends object, Field extends string> = STableColumnBase<Field> & {
+  content?: 'value'
+  value: (row: Row) => unknown
+}
+
+type STableSlotColumn<Field extends string> = STableColumnBase<Field> & {
+  content: 'slot'
+  value?: never
+}
+
+/**
+ * Столбец напрямую читает typed field строки; derived field обязан предоставить value resolver.
+ * A column reads a typed row field directly; a derived field must provide a value resolver.
+ */
+export type STableColumn<
+  Row extends object = Record<string, unknown>,
+  Field extends string = Extract<keyof Row, string>,
+> = STableValueColumn<Row, Field>
+  | STableSlotColumn<Field>
+  | (Field extends Extract<keyof Row, string> ? STableFieldColumn<Field> : never)
+
+/** Публичный generic-контракт таблицы. / Public generic table contract. */
+export interface STableProps<
+  Row extends object,
+  RowKey extends STableRowKey,
+  Field extends string,
+> {
+  columns: readonly STableColumn<Row, Field>[]
+  data: readonly Row[]
+  getRowKey: (row: Row) => RowKey
+  loading?: boolean
+  loadingMessage?: string
+  errorMessage?: string
+  emptyMessage?: string
+  selectedRowKey?: RowKey
+  maxHeight?: ScrollableViewportMaxBlockSize
+  density?: STableDensity
+  surface?: STableSurface
+  minWidth?: STableMinWidth
+  rowState?: (row: Row) => STableRowState
+  cellState?: (row: Row, column: STableColumn<Row, Field>) => STableCellState
+  /** Accessible name без visible owner. / Accessible name when there is no visible owner. */
+  ariaLabel?: string
+  /** DOM id visible owner, mutually exclusive with ariaLabel. / DOM id of the visible owner, mutually exclusive with ariaLabel. */
+  ariaLabelledby?: string
+  /** DOM id supplemental status/diagnostic owner. / DOM id of a supplemental status/diagnostic owner. */
+  ariaDescribedby?: string
+}

package/src/components/shared/database/SDataGrid.css

@@ -0,0 +1,3 @@
+@reference "../../../styles/reference.css";
+
+.s-data-grid__value { @apply block min-w-0 truncate; }