tekivex-ui 2.2.0 → 2.3.0

package/src/components/TkxAnchor.tsx

@@ -0,0 +1,193 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface AnchorLink {
+  key: string;
+  href: string;
+  title: string;
+  children?: AnchorLink[];
+}
+
+export interface TkxAnchorProps {
+  items: AnchorLink[];
+  offsetTop?: number;
+  getCurrentAnchor?: (activeLink: string) => string;
+  onChange?: (currentLink: string) => void;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function flattenLinks(items: AnchorLink[]): AnchorLink[] {
+  const result: AnchorLink[] = [];
+  for (const item of items) {
+    result.push(item);
+    if (item.children) result.push(...flattenLinks(item.children));
+  }
+  return result;
+}
+
+function getAnchorId(href: string): string {
+  return href.startsWith('#') ? href.slice(1) : href;
+}
+
+// ── Link Item ────────────────────────────────────────────────────────────────
+
+function AnchorItem({
+  item,
+  activeKey,
+  depth,
+  onClick,
+  theme,
+  reducedMotion,
+}: {
+  item: AnchorLink;
+  activeKey: string;
+  depth: number;
+  onClick: (href: string) => void;
+  theme: ReturnType<typeof useTheme>;
+  reducedMotion: boolean;
+}) {
+  const isActive = item.key === activeKey;
+  const safeTitle = sanitizeString(item.title);
+
+  return (
+    <li role="none" style={{ listStyle: 'none' }}>
+      <a
+        role="treeitem"
+        aria-current={isActive ? 'location' : undefined}
+        href={item.href}
+        onClick={(e) => {
+          e.preventDefault();
+          onClick(item.href);
+        }}
+        className={tkx('block text-sm py-1 no-underline')}
+        style={{
+          paddingLeft: 12 + depth * 16,
+          color: isActive ? theme.primary : theme.textMuted,
+          fontWeight: isActive ? 600 : 400,
+          borderLeft: `2px solid ${isActive ? theme.primary : 'transparent'}`,
+          transition: reducedMotion ? 'none' : 'color 0.15s ease, border-color 0.15s ease',
+        }}
+      >
+        {safeTitle}
+      </a>
+      {item.children && item.children.length > 0 && (
+        <ul role="group" style={{ margin: 0, padding: 0 }}>
+          {item.children.map((child) => (
+            <AnchorItem
+              key={child.key}
+              item={child}
+              activeKey={activeKey}
+              depth={depth + 1}
+              onClick={onClick}
+              theme={theme}
+              reducedMotion={reducedMotion}
+            />
+          ))}
+        </ul>
+      )}
+    </li>
+  );
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxAnchor({
+  items,
+  offsetTop = 0,
+  getCurrentAnchor,
+  onChange,
+}: TkxAnchorProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const [activeKey, setActiveKey] = useState(items[0]?.key ?? '');
+  const isScrolling = useRef(false);
+
+  const flat = flattenLinks(items);
+
+  const updateActive = useCallback(() => {
+    if (isScrolling.current) return;
+
+    let current = flat[0]?.key ?? '';
+    for (const link of flat) {
+      const id = getAnchorId(link.href);
+      const el = document.getElementById(id);
+      if (el) {
+        const top = el.getBoundingClientRect().top;
+        if (top <= offsetTop + 10) {
+          current = link.key;
+        }
+      }
+    }
+
+    if (getCurrentAnchor) {
+      current = getCurrentAnchor(current);
+    }
+
+    if (current !== activeKey) {
+      setActiveKey(current);
+      onChange?.(current);
+    }
+  }, [flat, offsetTop, getCurrentAnchor, activeKey, onChange]);
+
+  useEffect(() => {
+    window.addEventListener('scroll', updateActive, { passive: true });
+    updateActive();
+    return () => window.removeEventListener('scroll', updateActive);
+  }, [updateActive]);
+
+  const handleClick = useCallback(
+    (href: string) => {
+      const id = getAnchorId(href);
+      const el = document.getElementById(id);
+      if (!el) return;
+
+      isScrolling.current = true;
+      const top = el.getBoundingClientRect().top + window.scrollY - offsetTop;
+      window.scrollTo({ top, behavior: reducedMotion ? 'auto' : 'smooth' });
+
+      // Find the link by href and set active
+      const link = flat.find((l) => l.href === href);
+      if (link) {
+        setActiveKey(link.key);
+        onChange?.(link.key);
+      }
+
+      setTimeout(() => {
+        isScrolling.current = false;
+      }, 800);
+    },
+    [flat, offsetTop, reducedMotion, onChange],
+  );
+
+  return (
+    <nav
+      role="tree"
+      aria-label="Anchor navigation"
+      className={tkx('font-sans')}
+      style={{
+        borderLeft: `1px solid ${theme.border}`,
+        padding: '4px 0',
+      }}
+    >
+      <ul role="group" style={{ margin: 0, padding: 0 }}>
+        {items.map((item) => (
+          <AnchorItem
+            key={item.key}
+            item={item}
+            activeKey={activeKey}
+            depth={0}
+            onClick={handleClick}
+            theme={theme}
+            reducedMotion={reducedMotion}
+          />
+        ))}
+      </ul>
+    </nav>
+  );
+}

package/src/components/TkxCascader.tsx

@@ -0,0 +1,276 @@
+import { useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useTheme } from '../themes';
+import { sanitizeString } from '../engine/security';
+import { useReducedMotion } from '../hooks';
+import { tkx } from '../engine/tkx';
+
+// ── Types ────────────────────────────────────────────────────────────────────
+
+export interface CascaderOption {
+  value: string;
+  label: string;
+  children?: CascaderOption[];
+  disabled?: boolean;
+}
+
+export interface TkxCascaderProps {
+  options: CascaderOption[];
+  value?: string[];
+  onChange?: (value: string[], selectedOptions: CascaderOption[]) => void;
+  placeholder?: string;
+  label?: string;
+  multiple?: boolean;
+}
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function getColumns(
+  options: CascaderOption[],
+  selected: string[],
+): CascaderOption[][] {
+  const columns: CascaderOption[][] = [options];
+  let current = options;
+  for (const val of selected) {
+    const found = current.find((o) => o.value === val);
+    if (found?.children?.length) {
+      columns.push(found.children);
+      current = found.children;
+    } else {
+      break;
+    }
+  }
+  return columns;
+}
+
+function getSelectedOptions(
+  options: CascaderOption[],
+  values: string[],
+): CascaderOption[] {
+  const result: CascaderOption[] = [];
+  let current = options;
+  for (const val of values) {
+    const found = current.find((o) => o.value === val);
+    if (found) {
+      result.push(found);
+      current = found.children ?? [];
+    } else break;
+  }
+  return result;
+}
+
+function getLabelPath(options: CascaderOption[], values: string[]): string {
+  return getSelectedOptions(options, values)
+    .map((o) => sanitizeString(o.label))
+    .join(' / ');
+}
+
+// ── Component ────────────────────────────────────────────────────────────────
+
+export function TkxCascader({
+  options,
+  value = [],
+  onChange,
+  placeholder = 'Select...',
+  label,
+  multiple = false,
+}: TkxCascaderProps) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const [open, setOpen] = useState(false);
+  const [hoverPath, setHoverPath] = useState<string[]>(value);
+  const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0, width: 0 });
+
+  const safeLabel = label ? sanitizeString(label) : undefined;
+  const safePlaceholder = sanitizeString(placeholder);
+  const displayText = value.length > 0 ? getLabelPath(options, value) : '';
+
+  // Position dropdown
+  useEffect(() => {
+    if (!open || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    setDropdownPos({
+      top: rect.bottom + 4 + window.scrollY,
+      left: rect.left + window.scrollX,
+      width: Math.max(rect.width, 200),
+    });
+  }, [open]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (
+        !triggerRef.current?.contains(e.target as Node) &&
+        !dropdownRef.current?.contains(e.target as Node)
+      ) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, [open]);
+
+  const handleSelect = useCallback(
+    (colIdx: number, opt: CascaderOption) => {
+      if (opt.disabled) return;
+      const newPath = [...hoverPath.slice(0, colIdx), opt.value];
+      setHoverPath(newPath);
+
+      // If leaf node (no children), commit selection
+      if (!opt.children?.length) {
+        const selected = getSelectedOptions(options, newPath);
+        onChange?.(newPath, selected);
+        if (!multiple) setOpen(false);
+      }
+    },
+    [hoverPath, options, onChange, multiple],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setOpen(false);
+        triggerRef.current?.focus();
+      } else if (e.key === 'Enter' || e.key === ' ') {
+        if (!open) {
+          e.preventDefault();
+          setOpen(true);
+        }
+      }
+    },
+    [open],
+  );
+
+  const columns = getColumns(options, hoverPath);
+
+  const dropdown = open
+    ? createPortal(
+        <div
+          ref={dropdownRef}
+          role="tree"
+          aria-label={safeLabel ?? 'Cascader options'}
+          className={tkx('flex rounded-lg border overflow-hidden')}
+          style={{
+            position: 'absolute',
+            zIndex: 9999,
+            top: dropdownPos.top,
+            left: dropdownPos.left,
+            backgroundColor: theme.surface,
+            borderColor: theme.border,
+            boxShadow: `0 4px 16px ${theme.bg}80`,
+            animation: reducedMotion ? 'none' : 'tkxFadeIn 0.15s ease',
+          }}
+        >
+          {columns.map((col, colIdx) => (
+            <ul
+              key={colIdx}
+              role="group"
+              className={tkx('m-0 p-0 overflow-auto')}
+              style={{
+                listStyle: 'none',
+                minWidth: 160,
+                maxHeight: 260,
+                borderRight: colIdx < columns.length - 1 ? `1px solid ${theme.border}` : 'none',
+              }}
+            >
+              {col.map((opt) => {
+                const isSelected = hoverPath[colIdx] === opt.value;
+                const safeOptLabel = sanitizeString(opt.label);
+                return (
+                  <li
+                    key={opt.value}
+                    role="treeitem"
+                    aria-selected={isSelected}
+                    aria-disabled={opt.disabled || undefined}
+                    aria-expanded={opt.children?.length ? isSelected : undefined}
+                    className={tkx('flex items-center justify-between px-3 py-2 cursor-pointer text-sm')}
+                    style={{
+                      backgroundColor: isSelected ? theme.surfaceAlt : 'transparent',
+                      color: opt.disabled ? theme.textMuted : theme.text,
+                      opacity: opt.disabled ? 0.5 : 1,
+                      cursor: opt.disabled ? 'not-allowed' : 'pointer',
+                    }}
+                    onClick={() => handleSelect(colIdx, opt)}
+                    onMouseEnter={() => {
+                      if (!opt.disabled) {
+                        setHoverPath((prev) => [...prev.slice(0, colIdx), opt.value]);
+                      }
+                    }}
+                  >
+                    <span>{safeOptLabel}</span>
+                    {opt.children && opt.children.length > 0 && (
+                      <svg
+                        width="12"
+                        height="12"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        aria-hidden="true"
+                        style={{ color: theme.textMuted, flexShrink: 0 }}
+                      >
+                        <path d="M10 6l6 6-6 6V6z" />
+                      </svg>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          ))}
+        </div>,
+        document.body,
+      )
+    : null;
+
+  return (
+    <div className={tkx('relative font-sans')} onKeyDown={handleKeyDown}>
+      {safeLabel && (
+        <label
+          className={tkx('block text-sm font-medium mb-1')}
+          style={{ color: theme.text }}
+        >
+          {safeLabel}
+        </label>
+      )}
+
+      <button
+        ref={triggerRef}
+        type="button"
+        role="combobox"
+        aria-expanded={open}
+        aria-haspopup="tree"
+        aria-label={safeLabel ?? 'Cascader'}
+        className={tkx('w-full flex items-center justify-between rounded-lg border px-3 py-2 text-sm cursor-pointer')}
+        style={{
+          backgroundColor: theme.surface,
+          borderColor: open ? theme.primary : theme.border,
+          color: displayText ? theme.text : theme.textMuted,
+          outline: 'none',
+          minHeight: 38,
+          textAlign: 'left',
+        }}
+        onClick={() => setOpen((v) => !v)}
+      >
+        <span className={tkx('truncate')}>{displayText || safePlaceholder}</span>
+        <svg
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="currentColor"
+          aria-hidden="true"
+          style={{
+            color: theme.textMuted,
+            transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: reducedMotion ? 'none' : 'transform 0.2s ease',
+            flexShrink: 0,
+          }}
+        >
+          <path d="M7 10l5 5 5-5H7z" />
+        </svg>
+      </button>
+
+      {dropdown}
+    </div>
+  );
+}

package/src/components/TkxDataGrid.tsx

@@ -4,6 +4,7 @@ import {
   useRef,
   useMemo,
   useId,
+  useEffect,
   type ReactNode,
   type CSSProperties,
   type MouseEvent as ReactMouseEvent,
@@ -46,6 +47,10 @@ export interface TkxDataGridProps<T = any> {
   compact?: boolean;
   maxHeight?: number | string;
   onRowClick?: (row: T) => void;
+  /** Enable virtual scrolling. Defaults to auto (enabled when data has 50+ rows and maxHeight is set). */
+  virtualScroll?: boolean;
+  /** Row height in pixels for virtual scrolling calculations. Default: 40 */
+  rowHeight?: number;
 }
 
 // ── Sort icon ─────────────────────────────────────────────────────────────────
@@ -156,11 +161,51 @@ export function TkxDataGrid<T = any>({
   compact = false,
   maxHeight,
   onRowClick,
+  virtualScroll,
+  rowHeight = 40,
 }: TkxDataGridProps<T>) {
   const theme = useTheme();
   const reduced = useReducedMotion();
   const gridId = useId();
 
+  // ── Virtual scroll ────────────────────────────────────────────────────
+
+  const OVERSCAN = 10;
+  const isVirtual =
+    virtualScroll !== undefined
+      ? virtualScroll
+      : maxHeight !== undefined && data.length >= 50;
+
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerHeight, setContainerHeight] = useState(0);
+
+  const handleScroll = useCallback(() => {
+    if (!scrollContainerRef.current) return;
+    setScrollTop(scrollContainerRef.current.scrollTop);
+  }, []);
+
+  useEffect(() => {
+    if (!isVirtual || !scrollContainerRef.current) return;
+    const el = scrollContainerRef.current;
+    setContainerHeight(el.clientHeight);
+    const ro = new ResizeObserver(() => {
+      setContainerHeight(el.clientHeight);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [isVirtual]);
+
+  const totalHeight = data.length * rowHeight;
+  const startIndex = isVirtual
+    ? Math.max(0, Math.floor(scrollTop / rowHeight) - OVERSCAN)
+    : 0;
+  const endIndex = isVirtual
+    ? Math.min(data.length, Math.ceil((scrollTop + containerHeight) / rowHeight) + OVERSCAN)
+    : data.length;
+  const visibleData = isVirtual ? data.slice(startIndex, endIndex) : data;
+  const offsetY = startIndex * rowHeight;
+
   // ── Sort state ──────────────────────────────────────────────────────────
 
   const [sortKey, setSortKey] = useState<string | null>(null);
@@ -281,6 +326,8 @@ export function TkxDataGrid<T = any>({
       }}
     >
       <div
+        ref={scrollContainerRef}
+        onScroll={isVirtual ? handleScroll : undefined}
         style={{
           maxHeight: maxHeight ?? 'none',
           overflowX: 'auto',
@@ -427,7 +474,15 @@ export function TkxDataGrid<T = any>({
                   </td>
                 </tr>
               ) : (
-                data.map((row, rowIndex) => {
+                <>
+                {/* Top spacer for virtual scrolling */}
+                {isVirtual && offsetY > 0 && (
+                  <tr aria-hidden="true">
+                    <td colSpan={totalCols} style={{ height: offsetY, padding: 0, border: 'none' }} />
+                  </tr>
+                )}
+                {visibleData.map((row, i) => {
+                  const rowIndex = startIndex + i;
                   const id = getRowId(row, rowKey);
                   const isSelected = selectedSet.has(id);
                   const isStriped = striped && rowIndex % 2 === 1;
@@ -448,6 +503,7 @@ export function TkxDataGrid<T = any>({
                         transition: reduced
                           ? 'none'
                           : 'background-color 120ms ease',
+                        ...(isVirtual ? { height: rowHeight, boxSizing: 'border-box' } : {}),
                       }}
                       onMouseEnter={
                         onRowClick
@@ -529,7 +585,14 @@ export function TkxDataGrid<T = any>({
                       })}
                     </tr>
                   );
-                })
+                })}
+                {/* Bottom spacer for virtual scrolling */}
+                {isVirtual && endIndex < data.length && (
+                  <tr aria-hidden="true">
+                    <td colSpan={totalCols} style={{ height: (data.length - endIndex) * rowHeight, padding: 0, border: 'none' }} />
+                  </tr>
+                )}
+                </>
               )}
             </tbody>
           )}