@cahyo-dimas/freeday 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 Semua perubahan penting dicatat di sini. Format longgar mengikuti
 [Keep a Changelog](https://keepachangelog.com/); tiap versi = git tag.
 
+## [1.9.0] — 2026-07-28
+Follow-ups to 1.8.0's `FdyTable` (improvement notes #25/#26). Additive — the #25 change **widens** a
+generic bound, so every call site that compiled before still compiles.
+
+### Fixed
+- **`FdyTable` now accepts `interface`-typed rows.** The row generic was constrained to
+  `Record<string, unknown>`, to which a TypeScript `interface` is never assignable (interfaces get no
+  implicit index signature) — so a normally-typed DTO array failed to compile and `FdyTable` was
+  effectively unusable in a strict-TS app. Widened the bound to `object` in both adapters; the row type
+  now **infers** correctly (`cell-*` slots / `renderCell` are properly typed) and no cast is pushed
+  onto consumers. The component never indexes rows directly — all access goes through the
+  already-unconstrained core, which is unchanged.
+
+### Added
+- **`FdyTable` row activation (opt-in).** `rowActivatable` makes rows focusable and emits
+  `row-activate` (Vue) / calls `onRowActivate` (React) on click, or Enter/Space while the row itself is
+  focused — a control inside a cell keeps its own event (the `target !== currentTarget` guard). Adds a
+  `rowClass(row)` hook for per-row state (e.g. a selected row) and a `.fdy-table__row--activatable`
+  class (pointer + `:focus-visible` ring; hover tint is already inherited from the base row rule).
+  Replaces the hand-rolled `<tr tabindex="0" @click @keydown>` + duplicated row CSS consumers were
+  each re-writing.
+
 ## [1.8.0] — 2026-07-28
 Release **1.8 — framework-safe data table, modal/drawer wrappers, and a monospace utility**.
 Non-breaking, purely additive. No existing selector, markup, or enhancer changed.

package/README.id.md

@@ -5,7 +5,7 @@
 > **Lebih banyak _free day_ buat dev — UI kit-nya sudah siap pakai.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.8.0)
+[![Release](https://img.shields.io/badge/release-v1.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.9.0)
 
 UI KIT yang token-driven & framework-agnostic — satu sumber kebenaran untuk warna, tipografi,
 spasi, dan komponen. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/README.md

@@ -5,7 +5,7 @@
 > **More free days for devs — the UI kit is ready to use.**
 
 [![Live docs](https://img.shields.io/badge/docs-live-2050d8?style=flat-square)](https://cahyo-dimas.github.io/freeday-ui-kit/)
-[![Release](https://img.shields.io/badge/release-v1.8.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.8.0)
+[![Release](https://img.shields.io/badge/release-v1.9.0-0078d4?style=flat-square)](https://github.com/cahyo-dimas/freeday-ui-kit/tree/v1.9.0)
 
 A token-driven, framework-agnostic UI kit — one source of truth for color, typography,
 spacing, and components. Blueprint: `docs/superpowers/specs/2026-07-21-freeday-ui-kit-design.md`.

package/adapters/react/components/FdyTable.tsx

@@ -29,7 +29,7 @@ import { FdyTableFilter } from './FdyTableFilter';
 //     `onSortChange` / `onFiltersChange` / `onPageChange` for the caller to feed back into its query.
 // Column filters (text/enum/number/date) apply live; in server mode, debounce the callback if needed.
 
-export interface FdyTableProps<Row extends Record<string, unknown>> {
+export interface FdyTableProps<Row extends object> {
   columns: ReadonlyArray<FdyTableColumn<Row>>;
   rows: ReadonlyArray<Row>;
   rowKey: (row: Row) => string | number;
@@ -51,9 +51,15 @@ export interface FdyTableProps<Row extends Record<string, unknown>> {
   renderCell?: (column: FdyTableColumn<Row>, row: Row, value: unknown) => ReactNode;
   toolbar?: ReactNode;
   empty?: ReactNode;
+  /** Opt in to row activation: rows become focusable and call `onRowActivate` on click/Enter/Space. */
+  rowActivatable?: boolean;
+  /** Per-row class hook, e.g. to mark a selected row. */
+  rowClass?: (row: Row) => string | undefined;
+  /** A row was activated (click, or Enter/Space while the row itself is focused). */
+  onRowActivate?: (row: Row) => void;
 }
 
-export function FdyTable<Row extends Record<string, unknown>>(props: FdyTableProps<Row>): JSX.Element {
+export function FdyTable<Row extends object>(props: FdyTableProps<Row>): JSX.Element {
   const serverPaged: boolean = props.page != null;
   const sortControlled: boolean = serverPaged || props.sort !== undefined;
   const filtersControlled: boolean = serverPaged || props.filters !== undefined;
@@ -143,6 +149,21 @@ export function FdyTable<Row extends Record<string, unknown>>(props: FdyTablePro
   function alignStyle(col: FdyTableColumn<Row>): CSSProperties | undefined {
     return col.align !== undefined ? { textAlign: col.align } : undefined;
   }
+  function rowClassName(row: Row): string | undefined {
+    const cls: string = [props.rowClass?.(row), props.rowActivatable === true ? 'fdy-table__row--activatable' : undefined]
+      .filter(Boolean)
+      .join(' ');
+    return cls === '' ? undefined : cls;
+  }
+  // Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+  // event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
+  // stopPropagation, matching the pattern consumers hand-roll today.
+  function onRowKeydown(e: React.KeyboardEvent<HTMLTableRowElement>, row: Row): void {
+    if (props.rowActivatable !== true || e.target !== e.currentTarget) return;
+    if (e.key !== 'Enter' && e.key !== ' ') return;
+    e.preventDefault();
+    props.onRowActivate?.(row);
+  }
   function renderCellContent(col: FdyTableColumn<Row>, row: Row): ReactNode {
     if (props.renderCell !== undefined) {
       const custom: ReactNode = props.renderCell(col, row, cellValue(row, col));
@@ -192,7 +213,15 @@ export function FdyTable<Row extends Record<string, unknown>>(props: FdyTablePro
               </tr>
             ) : (
               displayRows.map((row: Row): JSX.Element => (
-                <tr key={props.rowKey(row)}>
+                <tr
+                  key={props.rowKey(row)}
+                  className={rowClassName(row)}
+                  tabIndex={props.rowActivatable ? 0 : undefined}
+                  onClick={(): void => {
+                    if (props.rowActivatable === true) props.onRowActivate?.(row);
+                  }}
+                  onKeyDown={(e): void => onRowKeydown(e, row)}
+                >
                   {props.columns.map((col: FdyTableColumn<Row>): JSX.Element => (
                     <td key={col.key} className={cellClass(col)} style={alignStyle(col)}>{renderCellContent(col, row)}</td>
                   ))}

package/adapters/vue/components/FdyTable.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts" generic="Row extends Record<string, unknown>">
+<script setup lang="ts" generic="Row extends object">
 import { computed, ref, watch, type ComputedRef, type Ref } from 'vue';
 import {
   cellValue,
@@ -44,12 +44,18 @@ const props = defineProps<{
   loading?: boolean;
   emptyText?: string;
   ariaLabel?: string;
+  /** Opt in to row activation: rows become focusable and emit `row-activate` on click/Enter/Space. */
+  rowActivatable?: boolean;
+  /** Per-row class hook, e.g. to mark a selected row. */
+  rowClass?: (row: Row) => string | undefined;
 }>();
 
 const emit = defineEmits<{
   'update:sort': [sort: FdySortState | null];
   'update:filters': [filters: FdyFilterMap];
   'update:page': [page: FdyPageState];
+  /** A row was activated (click, or Enter/Space while the row itself is focused). */
+  'row-activate': [row: Row];
 }>();
 
 const internalSort: Ref<FdySortState | null> = ref(null);
@@ -162,6 +168,22 @@ function cellClass(col: FdyTableColumn<Row>): string | undefined {
 function alignStyle(col: FdyTableColumn<Row>): Record<string, string> | undefined {
   return col.align !== undefined ? { textAlign: col.align } : undefined;
 }
+
+function rowClasses(row: Row): Array<string | undefined> {
+  return [props.rowClass?.(row), props.rowActivatable === true ? 'fdy-table__row--activatable' : undefined];
+}
+function onRowClick(row: Row): void {
+  if (props.rowActivatable === true) emit('row-activate', row);
+}
+// Enter/Space activate only when the row itself is focused — a control inside a cell keeps its own
+// event (the `event.target !== event.currentTarget` guard). Click relies on inner controls calling
+// stopPropagation, matching the pattern consumers hand-roll today.
+function onRowKeydown(e: KeyboardEvent, row: Row): void {
+  if (props.rowActivatable !== true || e.target !== e.currentTarget) return;
+  if (e.key !== 'Enter' && e.key !== ' ') return;
+  e.preventDefault();
+  emit('row-activate', row);
+}
 </script>
 
 <template>
@@ -202,7 +224,15 @@ function alignStyle(col: FdyTableColumn<Row>): Record<string, string> | undefine
               <slot name="empty">{{ emptyText ?? 'No data' }}</slot>
             </td>
           </tr>
-          <tr v-for="row in displayRows" v-else :key="rowKey(row)">
+          <tr
+            v-for="row in displayRows"
+            v-else
+            :key="rowKey(row)"
+            :class="rowClasses(row)"
+            :tabindex="rowActivatable ? 0 : undefined"
+            @click="onRowClick(row)"
+            @keydown="onRowKeydown($event, row)"
+          >
             <td v-for="col in columns" :key="col.key" :class="cellClass(col)" :style="alignStyle(col)">
               <slot :name="`cell-${col.key}`" :row="row" :value="cellValue(row, col)">{{ cellText(row, col) }}</slot>
             </td>

package/dist/freeday.bundle.css

@@ -1219,6 +1219,10 @@ a { color: var(--color-primary); }
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+.fdy-table__row--activatable{cursor:pointer;}
+.fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}

package/dist/freeday.css

@@ -874,6 +874,10 @@ a { color: var(--color-primary); }
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+.fdy-table__row--activatable{cursor:pointer;}
+.fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cahyo-dimas/freeday",
-  "version": "1.8.0",
+  "version": "1.9.0",
   "description": "Freeday — token-driven, framework-agnostic UI KIT (design source-of-truth).",
   "type": "module",
   "license": "MIT",

package/src/components/table.css

@@ -15,6 +15,10 @@
 .fdy-table__num{text-align:right;font-variant-numeric:tabular-nums;font-family:var(--font-mono);}
 /* Loading / empty state cell (FdyTable spans it across all columns). */
 .fdy-table__state{text-align:center;color:var(--color-text-muted);padding:var(--space-6) var(--space-4);}
+/* Activatable row (FdyTable rowActivatable): pointer + keyboard focus ring. The hover tint already
+   comes from the base `.fdy-table tbody tr:hover` rule, so this only adds the affordance + focus. */
+.fdy-table__row--activatable{cursor:pointer;}
+.fdy-table__row--activatable:focus-visible{outline:2px solid var(--color-primary);outline-offset:-2px;}
 .fdy-table th[aria-sort]{cursor:pointer;}
 .fdy-table th[aria-sort="ascending"]::after{content:" ↑";color:var(--color-primary);}
 .fdy-table th[aria-sort="descending"]::after{content:" ↓";color:var(--color-primary);}