@stisocial/ui 0.2.0 → 0.3.0

package/dist/components/DataGrid/DataGrid.css

@@ -0,0 +1,170 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-DataGrid-scroll-73001 {
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-surface);
+  }
+
+  .sti-DataGrid-table-97302 {
+    --sti-datagrid-row-h: var(--sti-row-h);
+    --sti-datagrid-px: var(--sti-space-3);
+    border-collapse: separate;
+    border-spacing: 0;
+    inline-size: 100%;
+    min-inline-size: max-content;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-DataGrid-table-97302[data-size="sm"] {
+    --sti-datagrid-row-h: calc(var(--sti-row-h) - var(--sti-space-2));
+    --sti-datagrid-px: var(--sti-space-2);
+  }
+
+  .sti-DataGrid-heading-2812a {
+    block-size: var(--sti-datagrid-row-h);
+    padding: var(--sti-space-1) var(--sti-datagrid-px);
+    border-block-end: var(--sti-border-width) solid var(--sti-border);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-semibold);
+    letter-spacing: var(--sti-tracking-label);
+    text-align: start;
+    white-space: nowrap;
+  }
+
+  .sti-DataGrid-heading-2812a + .sti-DataGrid-heading-2812a {
+    border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  .sti-DataGrid-table-97302[data-sticky] .sti-DataGrid-heading-2812a {
+    z-index: var(--sti-z-raised);
+    position: sticky;
+    inset-block-start: 0;
+  }
+
+  .sti-DataGrid-heading-2812a[data-align="end"], .sti-DataGrid-cell-8ae08[data-align="end"] {
+    text-align: end;
+  }
+
+  .sti-DataGrid-cell-8ae08 {
+    block-size: var(--sti-datagrid-row-h);
+    min-inline-size: 6rem;
+    padding: var(--sti-space-1) var(--sti-datagrid-px);
+    border-block-end: var(--sti-border-width) solid var(--sti-border-subtle);
+    font-weight: var(--sti-font-weight-regular);
+    text-align: start;
+    white-space: nowrap;
+    cursor: default;
+    outline: none;
+    position: relative;
+  }
+
+  .sti-DataGrid-cell-8ae08 + .sti-DataGrid-cell-8ae08 {
+    border-inline-start: var(--sti-border-width) solid var(--sti-border-subtle);
+  }
+
+  th.sti-DataGrid-cell-8ae08 {
+    font-weight: var(--sti-font-weight-medium);
+  }
+
+  .sti-DataGrid-cell-8ae08[data-align="end"] {
+    font-family: var(--sti-font-numeric);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-DataGrid-row-19135:last-child > .sti-DataGrid-cell-8ae08 {
+    border-block-end: 0;
+  }
+
+  .sti-DataGrid-cell-8ae08[data-editable] {
+    cursor: cell;
+  }
+
+  @media (hover: hover) {
+    .sti-DataGrid-cell-8ae08[data-editable]:hover:not([data-editing]) {
+      background: var(--sti-bg-surface-hover);
+    }
+  }
+
+  .sti-DataGrid-table-97302:focus-within .sti-DataGrid-cell-8ae08[data-active] {
+    box-shadow: inset 0 0 0 var(--sti-focus-ring-width) var(--sti-focus-ring);
+  }
+
+  .sti-DataGrid-cell-8ae08[data-editing] {
+    background: var(--sti-bg-canvas);
+    padding: 0;
+  }
+
+  .sti-DataGrid-cell-8ae08[data-invalid] {
+    box-shadow: inset 0 0 0 var(--sti-focus-ring-width) var(--sti-fg-danger);
+  }
+
+  .sti-DataGrid-editor-8d29b {
+    box-sizing: border-box;
+    inline-size: 100%;
+    block-size: var(--sti-datagrid-row-h);
+    padding: 0 var(--sti-datagrid-px);
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    background: none;
+    border: 0;
+    outline: none;
+  }
+
+  .sti-DataGrid-error-b7274 {
+    z-index: var(--sti-z-raised);
+    max-inline-size: 20rem;
+    padding: var(--sti-space-1) var(--sti-space-2);
+    border-radius: var(--sti-radius-sm);
+    background: var(--sti-bg-danger-subtle);
+    color: var(--sti-fg-danger);
+    font-size: var(--sti-font-size-xs);
+    font-weight: var(--sti-font-weight-medium);
+    white-space: normal;
+    position: absolute;
+    inset-block-start: 100%;
+    inset-inline-start: 0;
+  }
+
+  .sti-DataGrid-none-ade87 {
+    color: var(--sti-fg-muted);
+  }
+
+  .sti-DataGrid-srOnly-df37f {
+    clip-path: inset(50%);
+    white-space: nowrap;
+    block-size: 1px;
+    inline-size: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+  }
+
+  @media (pointer: coarse) {
+    .sti-DataGrid-table-97302 {
+      --sti-datagrid-row-h: var(--sti-control-h-md);
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-DataGrid-scroll-73001 {
+      border-color: canvastext;
+    }
+
+    .sti-DataGrid-table-97302:focus-within .sti-DataGrid-cell-8ae08[data-active] {
+      outline: var(--sti-focus-ring-width) solid Highlight;
+      outline-offset: calc(var(--sti-focus-ring-width) * -1);
+      box-shadow: none;
+    }
+
+    .sti-DataGrid-cell-8ae08[data-invalid] {
+      outline-color: mark;
+    }
+  }
+}

package/dist/components/DataGrid/DataGrid.d.ts

@@ -0,0 +1,46 @@
+import { ScrollAreaMaxHeight } from "../ScrollArea/ScrollArea.js";
+import { ReactNode } from "react";
+export type DataGridValue = string | number | null;
+export interface DataGridColumn<T> {
+  id: string;
+  /** Başlık (düz metin). */
+  header: string;
+  /** Hücrenin değeri. */
+  value: (row: T) => DataGridValue;
+  /** Düzenleyici: metin, sayı ya da seçim (`options`). */
+  type?: "text" | "number" | "select";
+  options?: readonly {
+    value: string;
+    label: string;
+  }[];
+  /** Düzenlenebilir mi (varsayılan evet; satır başlığı sütunu hariç). */
+  isEditable?: boolean;
+  /** Satırın adı olan sütun (ekran okuyucu satırı bununla anar). İlk sütun varsayılandır. */
+  isRowHeader?: boolean;
+  /** Hata metni ya da geçerliyse `null`. */
+  validate?: (value: DataGridValue, row: T) => string | null;
+  /** Görünüş (düzenleme dışında); verilmezse sayı biçimlenir, seçimde etiket yazılır. */
+  cell?: (row: T) => ReactNode;
+  align?: "start" | "end";
+}
+export interface DataGridProps<T> {
+  rows: readonly T[];
+  columns: readonly DataGridColumn<T>[];
+  getRowId: (row: T) => string;
+  /** Tablonun adı (zorunlu). */
+  label: string;
+  /** Hücre kaydedilince (doğrulamadan geçtiyse). */
+  onCellChange: (rowId: string, columnId: string, value: DataGridValue) => void;
+  size?: "sm" | "md";
+  maxHeight?: ScrollAreaMaxHeight;
+  isReadOnly?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Düzenlenebilir veri ızgarası (APG Data Grid): oklarla hücreler arasında gezilir; Enter, F2 ya da
+ * yazmaya başlamak düzenler; Enter kaydedip aşağı, Tab kaydedip yana geçer, Escape vazgeçer;
+ * Delete hücreyi boşaltır. Ctrl+C / Ctrl+V hücre kopyalar ve yapıştırır. Doğrulama hatasında
+ * düzenleyici açık kalır ve hata hemen okunur. Değerler metin, sayı ya da seçimdir.
+ */
+export declare function DataGrid<T>({ rows, columns, getRowId, label, onCellChange, size, maxHeight, isReadOnly, className, id }: DataGridProps<T>): import("react").JSX.Element;

package/dist/components/DataGrid/DataGrid.js

@@ -0,0 +1,311 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { ScrollArea } from "../ScrollArea/ScrollArea.js";
+import DataGrid_module_default from "./DataGrid.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+// src/components/DataGrid/DataGrid.tsx
+/** APG Data Grid: tablo öğeleri etkileşimli ızgara rolüyle (hücreler gridcell olur). */
+const GRID_ROLE = "grid";
+/**
+* Düzenlenebilir veri ızgarası (APG Data Grid): oklarla hücreler arasında gezilir; Enter, F2 ya da
+* yazmaya başlamak düzenler; Enter kaydedip aşağı, Tab kaydedip yana geçer, Escape vazgeçer;
+* Delete hücreyi boşaltır. Ctrl+C / Ctrl+V hücre kopyalar ve yapıştırır. Doğrulama hatasında
+* düzenleyici açık kalır ve hata hemen okunur. Değerler metin, sayı ya da seçimdir.
+*/
+function DataGrid({ rows, columns, getRowId, label, onCellChange, size = "md", maxHeight, isReadOnly = false, className, id }) {
+	const t = useMessages();
+	const fmt = useFormatter();
+	const uid = useId();
+	const table = useRef(null);
+	const [active, setActive] = useState({
+		r: 0,
+		c: 0
+	});
+	const [editing, setEditing] = useState(null);
+	const focusCell = useRef(false);
+	const closed = useRef(false);
+	const rowHeader = (columns.find((c) => c.isRowHeader) ?? columns[0])?.id;
+	const editable = (c) => !isReadOnly && c !== void 0 && (c.isEditable ?? c.id !== rowHeader);
+	useEffect(() => {
+		if (!focusCell.current) return;
+		focusCell.current = false;
+		const cell = table.current?.querySelector(`[data-pos="${active.r}:${active.c}"]`);
+		if (editing) cell?.querySelector("input, select")?.focus();
+		else cell?.focus();
+	}, [active, editing === null]);
+	const moveTo = (r, c) => {
+		focusCell.current = true;
+		setActive({
+			r: Math.max(0, Math.min(rows.length - 1, r)),
+			c: Math.max(0, Math.min(columns.length - 1, c))
+		});
+	};
+	const raw = (r, c) => {
+		const row = rows[r];
+		const col = columns[c];
+		return row && col ? col.value(row) : null;
+	};
+	const startEdit = (initial) => {
+		const col = columns[active.c];
+		if (!editable(col)) return;
+		const v = raw(active.r, active.c);
+		focusCell.current = true;
+		closed.current = false;
+		setEditing({
+			draft: initial ?? (v === null ? "" : String(v)),
+			error: null
+		});
+	};
+	const parse = (col, draft) => {
+		if (draft.trim() === "") return null;
+		if (col.type === "number") {
+			const n = fmt.parseNumber(draft);
+			return n === null || Number.isNaN(n) ? void 0 : n;
+		}
+		return draft;
+	};
+	/** Kaydeder; geçersizse hata gösterir ve false döner. */
+	const commit = (pos, draft) => {
+		const col = columns[pos.c];
+		const row = rows[pos.r];
+		if (!col || !row) return true;
+		const value = parse(col, draft);
+		if (value === void 0) {
+			setEditing({
+				draft,
+				error: t.dataGridNotANumber
+			});
+			return false;
+		}
+		const error = col.validate?.(value, row) ?? null;
+		if (error) {
+			setEditing({
+				draft,
+				error
+			});
+			return false;
+		}
+		if (value !== col.value(row)) onCellChange(getRowId(row), col.id, value);
+		return true;
+	};
+	const onGridKey = (e) => {
+		if (editing) return;
+		const { r, c } = active;
+		const ctrl = e.ctrlKey || e.metaKey;
+		const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+		const fn = {
+			ArrowDown: () => moveTo(r + 1, c),
+			ArrowUp: () => moveTo(r - 1, c),
+			ArrowRight: () => moveTo(r, c + (rtl ? -1 : 1)),
+			ArrowLeft: () => moveTo(r, c + (rtl ? 1 : -1)),
+			Home: () => ctrl ? moveTo(0, 0) : moveTo(r, 0),
+			End: () => ctrl ? moveTo(rows.length - 1, columns.length - 1) : moveTo(r, columns.length - 1),
+			PageDown: () => moveTo(r + 10, c),
+			PageUp: () => moveTo(r - 10, c),
+			Enter: () => startEdit(),
+			F2: () => startEdit(),
+			Delete: () => {
+				const col = columns[c];
+				if (editable(col)) commitOrAnnounce({
+					r,
+					c
+				}, "");
+			},
+			Backspace: () => {
+				const col = columns[c];
+				if (editable(col)) commitOrAnnounce({
+					r,
+					c
+				}, "");
+			}
+		}[e.key];
+		if (fn) {
+			e.preventDefault();
+			fn();
+			return;
+		}
+		if (e.key.length === 1 && !ctrl && !e.altKey && columns[c]?.type !== "select") {
+			if (!editable(columns[c])) return;
+			e.preventDefault();
+			startEdit(e.key);
+		}
+	};
+	const commitOrAnnounce = (pos, draft) => {
+		if (!commit(pos, draft)) focusCell.current = true;
+	};
+	const onEditorKey = (e) => {
+		if (!editing) return;
+		if (e.key === "Escape") {
+			e.preventDefault();
+			focusCell.current = true;
+			closed.current = true;
+			setEditing(null);
+			return;
+		}
+		if (e.key === "Enter" || e.key === "Tab") {
+			e.preventDefault();
+			if (!commit(active, editing.draft)) return;
+			closed.current = true;
+			setEditing(null);
+			if (e.key === "Enter") moveTo(active.r + (e.shiftKey ? -1 : 1), active.c);
+			else moveTo(active.r, active.c + (e.shiftKey ? -1 : 1));
+		}
+	};
+	const onEditorBlur = () => {
+		if (closed.current || !editing) {
+			closed.current = false;
+			return;
+		}
+		if (commit(active, editing.draft)) setEditing(null);
+	};
+	const onCopy = (e) => {
+		if (editing) return;
+		const v = raw(active.r, active.c);
+		e.clipboardData.setData("text/plain", v === null ? "" : String(v));
+		e.preventDefault();
+	};
+	const onPaste = (e) => {
+		if (editing || !editable(columns[active.c])) return;
+		e.preventDefault();
+		const text = e.clipboardData.getData("text/plain").replace(/\r?\n$/, "");
+		commitOrAnnounce(active, text);
+	};
+	const display = (col, row) => {
+		if (col.cell) return col.cell(row);
+		const v = col.value(row);
+		if (v === null || v === "") return /* @__PURE__ */ jsx("span", {
+			className: DataGrid_module_default.none,
+			children: "—"
+		});
+		if (col.type === "select") return col.options?.find((o) => o.value === String(v))?.label ?? v;
+		if (typeof v === "number") return fmt.number(v);
+		return v;
+	};
+	const errorId = `${uid}-error`;
+	return /* @__PURE__ */ jsx(ScrollArea, {
+		label,
+		orientation: maxHeight ? "both" : "horizontal",
+		maxHeight,
+		className: [DataGrid_module_default.scroll, className].filter(Boolean).join(" "),
+		children: /* @__PURE__ */ jsxs("table", {
+			id,
+			ref: table,
+			role: GRID_ROLE,
+			"aria-label": label,
+			"aria-rowcount": rows.length + 1,
+			"aria-colcount": columns.length,
+			className: DataGrid_module_default.table,
+			"data-size": size,
+			"data-sticky": maxHeight ? "" : void 0,
+			onKeyDown: onGridKey,
+			onCopy,
+			onPaste,
+			children: [/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", {
+				"aria-rowindex": 1,
+				children: columns.map((col, c) => /* @__PURE__ */ jsxs("th", {
+					scope: "col",
+					"aria-colindex": c + 1,
+					className: DataGrid_module_default.heading,
+					"data-align": col.align ?? (col.type === "number" ? "end" : void 0),
+					children: [col.header, editable(col) ? null : /* @__PURE__ */ jsx("span", {
+						className: DataGrid_module_default.srOnly,
+						children: ` (${t.dataGridReadOnly})`
+					})]
+				}, col.id))
+			}) }), /* @__PURE__ */ jsx("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsx("tr", {
+				"aria-rowindex": r + 2,
+				className: DataGrid_module_default.row,
+				children: columns.map((col, c) => {
+					const isActive = active.r === r && active.c === c;
+					const isEditing = isActive && editing !== null;
+					const canEdit = editable(col);
+					const Tag = col.id === rowHeader ? "th" : "td";
+					return /* @__PURE__ */ jsx(Tag, {
+						scope: col.id === rowHeader ? "row" : void 0,
+						"aria-colindex": c + 1,
+						"aria-readonly": canEdit ? void 0 : true,
+						tabIndex: isActive && !isEditing ? 0 : -1,
+						"data-pos": `${r}:${c}`,
+						"data-active": isActive ? "" : void 0,
+						"data-editing": isEditing ? "" : void 0,
+						"data-editable": canEdit ? "" : void 0,
+						"data-invalid": isEditing && editing?.error ? "" : void 0,
+						"data-align": col.align ?? (col.type === "number" ? "end" : void 0),
+						className: DataGrid_module_default.cell,
+						onMouseDown: () => {
+							if (isEditing) return;
+							if (editing && !commit(active, editing.draft)) return;
+							setEditing(null);
+							setActive({
+								r,
+								c
+							});
+						},
+						onFocus: () => {
+							if (!isActive && !editing) setActive({
+								r,
+								c
+							});
+						},
+						onDoubleClick: () => {
+							setActive({
+								r,
+								c
+							});
+							if (canEdit) {
+								const v = col.value(row);
+								focusCell.current = true;
+								closed.current = false;
+								setEditing({
+									draft: v === null ? "" : String(v),
+									error: null
+								});
+							}
+						},
+						children: isEditing && editing ? /* @__PURE__ */ jsxs(Fragment, { children: [col.type === "select" ? /* @__PURE__ */ jsxs("select", {
+							className: DataGrid_module_default.editor,
+							"aria-label": template(t.dataGridEdit, { column: col.header }),
+							"aria-invalid": editing.error ? true : void 0,
+							"aria-errormessage": editing.error ? errorId : void 0,
+							value: editing.draft,
+							onChange: (e) => setEditing({
+								draft: e.target.value,
+								error: null
+							}),
+							onKeyDown: onEditorKey,
+							onBlur: onEditorBlur,
+							children: [/* @__PURE__ */ jsx("option", {
+								value: "",
+								children: "—"
+							}), col.options?.map((o) => /* @__PURE__ */ jsx("option", {
+								value: o.value,
+								children: o.label
+							}, o.value))]
+						}) : /* @__PURE__ */ jsx("input", {
+							className: DataGrid_module_default.editor,
+							"aria-label": template(t.dataGridEdit, { column: col.header }),
+							"aria-invalid": editing.error ? true : void 0,
+							"aria-errormessage": editing.error ? errorId : void 0,
+							inputMode: col.type === "number" ? "decimal" : void 0,
+							value: editing.draft,
+							onChange: (e) => setEditing({
+								draft: e.target.value,
+								error: null
+							}),
+							onKeyDown: onEditorKey,
+							onBlur: onEditorBlur
+						}), editing.error ? /* @__PURE__ */ jsx("span", {
+							id: errorId,
+							role: "alert",
+							className: DataGrid_module_default.error,
+							children: editing.error
+						}) : null] }) : display(col, row)
+					}, col.id);
+				})
+			}, getRowId(row))) })]
+		})
+	});
+}
+export { DataGrid };

package/dist/components/DataGrid/DataGrid.module.js

@@ -0,0 +1,14 @@
+import './DataGrid.css';
+// src/components/DataGrid/DataGrid.module.css
+var DataGrid_module_default = {
+	"scroll": "sti-DataGrid-scroll-73001",
+	"table": "sti-DataGrid-table-97302",
+	"heading": "sti-DataGrid-heading-2812a",
+	"cell": "sti-DataGrid-cell-8ae08",
+	"row": "sti-DataGrid-row-19135",
+	"editor": "sti-DataGrid-editor-8d29b",
+	"error": "sti-DataGrid-error-b7274",
+	"none": "sti-DataGrid-none-ade87",
+	"srOnly": "sti-DataGrid-srOnly-df37f"
+};
+export { DataGrid_module_default as default };

package/dist/components/DataGrid/index.d.ts

@@ -0,0 +1,2 @@
+import { DataGrid, DataGridColumn, DataGridProps, DataGridValue } from "./DataGrid.js";
+export { DataGrid, DataGridColumn, DataGridProps, DataGridValue };