tharaday 0.7.2 → 0.7.4

package/src/components/Tree/Tree.test.tsx

@@ -0,0 +1,116 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tree } from './Tree.tsx';
+
+const objectData = { name: 'Alice', age: 30, address: { city: 'Warsaw', zip: '00-001' } };
+
+describe('Tree', () => {
+  it('renders a tree widget', () => {
+    render(<Tree data={objectData} />);
+    expect(screen.getByRole('tree')).toBeInTheDocument();
+  });
+
+  it('renders top-level keys as treeitems', () => {
+    render(<Tree data={objectData} />);
+    const items = screen.getAllByRole('treeitem');
+    const labels = items.map((el) => el.textContent);
+    expect(labels.some((t) => t?.includes('name'))).toBe(true);
+    expect(labels.some((t) => t?.includes('age'))).toBe(true);
+  });
+
+  it('renders leaf values inline', () => {
+    render(<Tree data={{ score: 42 }} />);
+    expect(screen.getByText('42')).toBeInTheDocument();
+  });
+
+  it('collapses nested objects by default', () => {
+    render(<Tree data={objectData} />);
+    expect(screen.queryByText('Warsaw')).not.toBeInTheDocument();
+  });
+
+  it('expands a branch on click', async () => {
+    render(<Tree data={objectData} />);
+    const addressItem = screen
+      .getAllByRole('treeitem')
+      .find((el) => el.textContent?.includes('address'))!;
+    await userEvent.click(addressItem);
+    expect(screen.getByText('Warsaw')).toBeInTheDocument();
+  });
+
+  it('collapses an expanded branch on click', async () => {
+    render(<Tree data={objectData} defaultExpanded />);
+    const addressItem = screen
+      .getAllByRole('treeitem')
+      .find((el) => el.textContent?.includes('address'))!;
+    await userEvent.click(addressItem);
+    expect(screen.queryByText('Warsaw')).not.toBeInTheDocument();
+  });
+
+  it('sets aria-expanded on branch items', () => {
+    render(<Tree data={objectData} />);
+    const addressItem = screen
+      .getAllByRole('treeitem')
+      .find((el) => el.textContent?.includes('address'))!;
+    expect(addressItem).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('sets correct aria-level on top-level items', () => {
+    render(<Tree data={objectData} />);
+    const items = screen.getAllByRole('treeitem');
+    items.forEach((item) => expect(item).toHaveAttribute('aria-level', '1'));
+  });
+
+  it('expands all branches when defaultExpanded is true', () => {
+    render(<Tree data={objectData} defaultExpanded />);
+    expect(screen.getByText('Warsaw')).toBeInTheDocument();
+  });
+
+  it('navigates down with ArrowDown', async () => {
+    render(<Tree data={objectData} />);
+    const items = screen.getAllByRole('treeitem');
+    items[0].focus();
+    await userEvent.keyboard('{ArrowDown}');
+    expect(document.activeElement).toBe(items[1]);
+  });
+
+  it('navigates up with ArrowUp', async () => {
+    render(<Tree data={objectData} />);
+    const items = screen.getAllByRole('treeitem');
+    items[1].tabIndex = 0;
+    items[1].focus();
+    await userEvent.keyboard('{ArrowUp}');
+    expect(document.activeElement).toBe(items[0]);
+  });
+
+  it('expands a branch with ArrowRight', async () => {
+    render(<Tree data={objectData} />);
+    const addressItem = screen
+      .getAllByRole('treeitem')
+      .find((el) => el.textContent?.includes('address'))!;
+    addressItem.focus();
+    await userEvent.keyboard('{ArrowRight}');
+    expect(addressItem).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('collapses a branch with ArrowLeft', async () => {
+    render(<Tree data={objectData} defaultExpanded />);
+    const addressItem = screen
+      .getAllByRole('treeitem')
+      .find((el) => el.textContent?.startsWith('address'))!;
+    addressItem.focus();
+    await userEvent.keyboard('{ArrowLeft}');
+    expect(addressItem).toHaveAttribute('aria-expanded', 'false');
+  });
+
+  it('renders array data with indexed items', () => {
+    render(<Tree data={['x', 'y', 'z']} />);
+    expect(screen.getByText('x')).toBeInTheDocument();
+    expect(screen.getByText('y')).toBeInTheDocument();
+  });
+
+  it('renders null value', () => {
+    render(<Tree data={{ val: null }} />);
+    expect(screen.getByText('null')).toBeInTheDocument();
+  });
+});

package/src/components/Tree/Tree.tsx

@@ -1,4 +1,6 @@
 import clsx from 'clsx';
+import { useEffect, useRef } from 'react';
+import type { KeyboardEvent } from 'react';
 import type { TreeProps } from './Tree.types';
 import styles from './Tree.module.css';
 import { TreeItem } from './TreeItem';
@@ -11,14 +13,76 @@ export const Tree = ({
   collapseIcon,
   ...props
 }: TreeProps) => {
+  const treeRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const first = treeRef.current?.querySelector<HTMLElement>('[role="treeitem"]');
+    if (first) {
+      first.tabIndex = 0;
+    }
+  }, []);
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    const tree = treeRef.current;
+    if (!tree) {
+      return;
+    }
+    const items = Array.from(tree.querySelectorAll<HTMLElement>('[role="treeitem"]'));
+    if (items.length === 0) {
+      return;
+    }
+    const current = items.find((el) => el.tabIndex === 0) ?? items[0];
+    const idx = items.indexOf(current);
+
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (idx < items.length - 1) {
+          current.tabIndex = -1;
+          items[idx + 1].tabIndex = 0;
+          items[idx + 1].focus();
+        }
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        if (idx > 0) {
+          current.tabIndex = -1;
+          items[idx - 1].tabIndex = 0;
+          items[idx - 1].focus();
+        }
+        break;
+      case 'Home':
+        e.preventDefault();
+        current.tabIndex = -1;
+        items[0].tabIndex = 0;
+        items[0].focus();
+        break;
+      case 'End':
+        e.preventDefault();
+        current.tabIndex = -1;
+        items[items.length - 1].tabIndex = 0;
+        items[items.length - 1].focus();
+        break;
+    }
+  };
+
   return (
-    <div className={clsx(styles.root, className)} {...props}>
+    <div
+      ref={treeRef}
+      role="tree"
+      className={clsx(styles.root, className)}
+      onKeyDown={handleKeyDown}
+      {...props}
+    >
       <TreeItem
         data={data}
         defaultExpanded={defaultExpanded}
         expandIcon={expandIcon}
         collapseIcon={collapseIcon}
         isRoot
+        level={1}
+        setSize={1}
+        posInSet={1}
       />
     </div>
   );

package/src/components/Tree/TreeItem.module.css

@@ -1,25 +1,32 @@
-.list {
-  list-style: none;
-  padding-left: var(--ds-space-4);
-  margin: 0;
+.item {
+  outline: none;
 }
 
-.item {
-  margin: 0;
+.item:focus-visible > .itemHeader {
+  box-shadow:
+    0 0 0 2px var(--ds-ring-offset),
+    0 0 0 4px var(--ds-ring);
+  border-radius: var(--ds-radius-sm);
 }
 
 .itemHeader {
   display: flex;
   align-items: center;
   min-height: var(--ds-space-6);
+  padding: 0 var(--ds-space-1);
+  border-radius: var(--ds-radius-sm);
+  cursor: default;
 }
 
-.toggleButton {
-  background: none;
-  border: none;
-  padding: 0;
-  margin: 0;
+.branch > .itemHeader {
   cursor: pointer;
+}
+
+.itemHeader:hover {
+  background-color: var(--ds-surface-1);
+}
+
+.toggleIcon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -27,11 +34,6 @@
   width: var(--ds-space-5);
   height: var(--ds-space-5);
   flex-shrink: 0;
-  transition: transform var(--ds-transition-fast);
-}
-
-.toggleButton:hover {
-  color: var(--ds-text-1);
 }
 
 .key {
@@ -50,14 +52,6 @@
   margin-left: var(--ds-space-1);
 }
 
-.collapsibleContent {
-  display: none;
-}
-
-.expanded {
-  display: block;
-}
-
-.rootList {
-  padding-left: 0;
+.childGroup {
+  padding-left: var(--ds-space-4);
 }

package/src/components/Tree/TreeItem.tsx

@@ -1,8 +1,21 @@
 import clsx from 'clsx';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import type { FocusEvent, KeyboardEvent, MouseEvent } from 'react';
 import type { TreeItemProps } from './TreeItem.types';
 import styles from './TreeItem.module.css';
 
+function focusTreeItem(item: HTMLElement) {
+  const tree = item.closest('[role="tree"]');
+  if (!tree) {
+    return;
+  }
+  tree.querySelectorAll<HTMLElement>('[role="treeitem"]').forEach((el) => {
+    el.tabIndex = -1;
+  });
+  item.tabIndex = 0;
+  item.focus();
+}
+
 export const TreeItem = ({
   data,
   label,
@@ -10,14 +23,91 @@ export const TreeItem = ({
   expandIcon,
   collapseIcon,
   isRoot,
+  level,
+  setSize,
+  posInSet,
 }: TreeItemProps) => {
   const [isExpanded, setIsExpanded] = useState(isRoot ? true : (defaultExpanded ?? false));
+  const itemRef = useRef<HTMLDivElement>(null);
 
   const isObject = data !== null && typeof data === 'object';
   const hasChildren =
-    isObject && (Array.isArray(data) ? data.length > 0 : Object.keys(data).length > 0);
+    isObject && (Array.isArray(data) ? data.length > 0 : Object.keys(data as object).length > 0);
+
+  const childLevel = isRoot ? level : level + 1;
+
+  const getChildren = (): { key: string; value: unknown }[] => {
+    if (!isObject) {
+      return [];
+    }
+    if (Array.isArray(data)) {
+      return (data as unknown[]).map((v, i) => ({ key: String(i), value: v }));
+    }
+    return Object.entries(data as Record<string, unknown>).map(([k, v]) => ({ key: k, value: v }));
+  };
 
-  const toggle = () => setIsExpanded(!isExpanded);
+  const children = getChildren();
+
+  const handleClick = (e: MouseEvent) => {
+    e.stopPropagation();
+    if (hasChildren) {
+      setIsExpanded((prev) => !prev);
+    }
+    if (itemRef.current) {
+      focusTreeItem(itemRef.current);
+    }
+  };
+
+  const handleFocus = (e: FocusEvent) => {
+    e.stopPropagation();
+    if (!itemRef.current) {
+      return;
+    }
+    const tree = itemRef.current.closest('[role="tree"]');
+    if (!tree) {
+      return;
+    }
+    tree.querySelectorAll<HTMLElement>('[role="treeitem"]').forEach((el) => {
+      el.tabIndex = -1;
+    });
+    itemRef.current.tabIndex = 0;
+  };
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        if (hasChildren) {
+          setIsExpanded((prev) => !prev);
+        }
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        e.stopPropagation();
+        if (hasChildren && !isExpanded) {
+          setIsExpanded(true);
+        } else if (hasChildren && isExpanded) {
+          const firstChild = itemRef.current?.querySelector<HTMLElement>('[role="treeitem"]');
+          if (firstChild) {
+            focusTreeItem(firstChild);
+          }
+        }
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.stopPropagation();
+        if (hasChildren && isExpanded) {
+          setIsExpanded(false);
+        } else {
+          const parent = itemRef.current?.parentElement?.closest<HTMLElement>('[role="treeitem"]');
+          if (parent) {
+            focusTreeItem(parent);
+          }
+        }
+        break;
+    }
+  };
 
   const defaultExpandIcon = (
     <svg
@@ -49,98 +139,73 @@ export const TreeItem = ({
     </svg>
   );
 
-  const renderContent = () => {
+  const renderLeafContent = () => {
     if (data === undefined) {
       return <span className={styles.empty}>undefined</span>;
     }
-
     if (data === null) {
       return <span className={styles.empty}>null</span>;
     }
-
     if (typeof data !== 'object') {
       return <span className={styles.value}>{String(data)}</span>;
     }
-
-    if (Array.isArray(data)) {
-      if (data.length === 0) {
-        return <span className={styles.empty}>[]</span>;
-      }
-      return (
-        <ul
-          className={clsx(
-            styles.list,
-            styles.collapsibleContent,
-            isExpanded && styles.expanded,
-            isRoot && styles.rootList
-          )}
-        >
-          {data.map((item, index) => (
-            <li key={index} className={styles.item}>
-              <TreeItem
-                data={item}
-                defaultExpanded={defaultExpanded}
-                expandIcon={expandIcon}
-                collapseIcon={collapseIcon}
-              />
-            </li>
-          ))}
-        </ul>
-      );
+    if (Array.isArray(data) && (data as unknown[]).length === 0) {
+      return <span className={styles.empty}>[]</span>;
     }
-
-    if (Object.keys(data).length === 0) {
-      return <span className={styles.empty}>{}</span>;
+    if (!Array.isArray(data) && Object.keys(data as object).length === 0) {
+      return <span className={styles.empty}>{'{}'}</span>;
     }
-
-    return (
-      <ul
-        className={clsx(
-          styles.list,
-          styles.collapsibleContent,
-          isExpanded && styles.expanded,
-          isRoot && styles.rootList
-        )}
-      >
-        {Object.entries(data).map(([key, value]) => (
-          <li key={key} className={styles.item}>
-            <TreeItem
-              label={key}
-              data={value}
-              defaultExpanded={defaultExpanded}
-              expandIcon={expandIcon}
-              collapseIcon={collapseIcon}
-            />
-          </li>
-        ))}
-      </ul>
-    );
+    return null;
   };
 
+  const childrenNodes = children.map((child, index) => (
+    <TreeItem
+      key={child.key}
+      label={Array.isArray(data) ? undefined : child.key}
+      data={child.value}
+      defaultExpanded={defaultExpanded}
+      expandIcon={expandIcon}
+      collapseIcon={collapseIcon}
+      level={childLevel}
+      setSize={children.length}
+      posInSet={index + 1}
+    />
+  ));
+
+  if (isRoot) {
+    return hasChildren ? <>{childrenNodes}</> : <>{renderLeafContent()}</>;
+  }
+
   return (
-    <div>
-      {!isRoot && (
-        <div className={styles.itemHeader}>
-          {hasChildren ? (
-            <button
-              type="button"
-              className={styles.toggleButton}
-              onClick={toggle}
-              aria-expanded={isExpanded}
-            >
-              {isExpanded
-                ? (collapseIcon ?? defaultCollapseIcon)
-                : (expandIcon ?? defaultExpandIcon)}
-            </button>
-          ) : (
-            <div className={styles.toggleButton} aria-hidden="true" />
-          )}
-          {label && <span className={styles.key}>{label}:</span>}
-          {!hasChildren && renderContent()}
+    <div
+      ref={itemRef}
+      role="treeitem"
+      aria-expanded={hasChildren ? isExpanded : undefined}
+      aria-level={level}
+      aria-setsize={setSize}
+      aria-posinset={posInSet}
+      tabIndex={-1}
+      className={clsx(styles.item, hasChildren && styles.branch)}
+      onClick={handleClick}
+      onFocus={handleFocus}
+      onKeyDown={handleKeyDown}
+    >
+      <div className={styles.itemHeader}>
+        <span className={styles.toggleIcon} aria-hidden="true">
+          {hasChildren
+            ? isExpanded
+              ? (collapseIcon ?? defaultCollapseIcon)
+              : (expandIcon ?? defaultExpandIcon)
+            : null}
+        </span>
+        {label !== undefined && <span className={styles.key}>{label}:</span>}
+        {!hasChildren && renderLeafContent()}
+      </div>
+      {hasChildren && isExpanded && (
+        <div role="group" className={styles.childGroup}>
+          {childrenNodes}
         </div>
       )}
-      {hasChildren && renderContent()}
-      {isRoot && !hasChildren && <div className={styles.itemHeader}>{renderContent()}</div>}
     </div>
   );
 };

package/src/components/Tree/TreeItem.types.ts

@@ -13,4 +13,10 @@ export interface TreeItemProps {
   collapseIcon?: ReactNode;
   /** Whether the tree item is a root element */
   isRoot?: boolean;
+  /** ARIA level (depth in the tree, 1-based) */
+  level: number;
+  /** Total number of siblings at this level */
+  setSize: number;
+  /** 1-based position among siblings */
+  posInSet: number;
 }

package/src/styles/ds.css

@@ -1,12 +1,17 @@
-/* Layered Design Tokens (foundation -> theme refs -> semantics) */
-@import 'tokens.css';
-@import 'themes/light.css';
-@import 'themes/dark.css';
-@import 'themes/retro-light.css';
-@import 'themes/retro-dark.css';
-@import 'themes/sanzo-152-light.css';
-@import 'themes/sanzo-152-dark.css';
-@import 'semantic.css';
+/* Explicit layer order: tokens < theme */
+@layer ds.tokens, ds.theme;
+
+/* Design tokens: primitives (palette.css, tokens.css) → theme semantics (themes/*.css) */
+@import 'palette.css' layer(ds.tokens);
+@import 'tokens.css' layer(ds.tokens);
+@import 'themes/retro-palette.css' layer(ds.tokens);
+@import 'themes/sanzo-152-palette.css' layer(ds.tokens);
+@import 'themes/light.css' layer(ds.theme);
+@import 'themes/dark.css' layer(ds.theme);
+@import 'themes/retro-light.css' layer(ds.theme);
+@import 'themes/retro-dark.css' layer(ds.theme);
+@import 'themes/sanzo-152-light.css' layer(ds.theme);
+@import 'themes/sanzo-152-dark.css' layer(ds.theme);
 
 :root {
   font-family: var(--ds-font-family-base);

package/src/styles/palette.css

@@ -0,0 +1,71 @@
+:root {
+  /* Neutral */
+  --ds-p-neutral-0: #ffffff;
+  --ds-p-neutral-50: #fafafa;
+  --ds-p-neutral-100: #f5f5f5;
+  --ds-p-neutral-200: #eeeeee;
+  --ds-p-neutral-300: #e0e0e0;
+  --ds-p-neutral-400: #a5a5ae;
+  --ds-p-neutral-500: #7b7b85;
+  --ds-p-neutral-600: #63636e;
+  --ds-p-neutral-700: #424249;
+  --ds-p-neutral-800: #323237;
+  --ds-p-neutral-900: #242429;
+  --ds-p-neutral-950: #09090b;
+
+  /* Blue */
+  --ds-p-blue: #637ab3;
+  --ds-p-blue-50: color-mix(in srgb, var(--ds-p-blue) 10%, #ffffff);
+  --ds-p-blue-100: color-mix(in srgb, var(--ds-p-blue) 20%, #ffffff);
+  --ds-p-blue-200: color-mix(in srgb, var(--ds-p-blue) 35%, #ffffff);
+  --ds-p-blue-300: color-mix(in srgb, var(--ds-p-blue) 55%, #ffffff);
+  --ds-p-blue-400: color-mix(in srgb, var(--ds-p-blue) 75%, #ffffff);
+  --ds-p-blue-500: var(--ds-p-blue);
+  --ds-p-blue-600: color-mix(in srgb, var(--ds-p-blue) 85%, #000000);
+  --ds-p-blue-700: color-mix(in srgb, var(--ds-p-blue) 70%, #000000);
+  --ds-p-blue-800: color-mix(in srgb, var(--ds-p-blue) 55%, #000000);
+  --ds-p-blue-900: color-mix(in srgb, var(--ds-p-blue) 40%, #000000);
+  --ds-p-blue-950: color-mix(in srgb, var(--ds-p-blue) 25%, #000000);
+
+  /* Green */
+  --ds-p-green: #64af76;
+  --ds-p-green-50: color-mix(in srgb, var(--ds-p-green) 10%, #ffffff);
+  --ds-p-green-100: color-mix(in srgb, var(--ds-p-green) 20%, #ffffff);
+  --ds-p-green-200: color-mix(in srgb, var(--ds-p-green) 35%, #ffffff);
+  --ds-p-green-300: color-mix(in srgb, var(--ds-p-green) 55%, #ffffff);
+  --ds-p-green-400: color-mix(in srgb, var(--ds-p-green) 75%, #ffffff);
+  --ds-p-green-500: var(--ds-p-green);
+  --ds-p-green-600: color-mix(in srgb, var(--ds-p-green) 85%, #000000);
+  --ds-p-green-700: color-mix(in srgb, var(--ds-p-green) 70%, #000000);
+  --ds-p-green-800: color-mix(in srgb, var(--ds-p-green) 55%, #000000);
+  --ds-p-green-900: color-mix(in srgb, var(--ds-p-green) 40%, #000000);
+  --ds-p-green-950: color-mix(in srgb, var(--ds-p-green) 25%, #000000);
+
+  /* Red */
+  --ds-p-red: #d55a5a;
+  --ds-p-red-50: color-mix(in srgb, var(--ds-p-red) 10%, #ffffff);
+  --ds-p-red-100: color-mix(in srgb, var(--ds-p-red) 20%, #ffffff);
+  --ds-p-red-200: color-mix(in srgb, var(--ds-p-red) 35%, #ffffff);
+  --ds-p-red-300: color-mix(in srgb, var(--ds-p-red) 55%, #ffffff);
+  --ds-p-red-400: color-mix(in srgb, var(--ds-p-red) 75%, #ffffff);
+  --ds-p-red-500: var(--ds-p-red);
+  --ds-p-red-600: color-mix(in srgb, var(--ds-p-red) 85%, #000000);
+  --ds-p-red-700: color-mix(in srgb, var(--ds-p-red) 70%, #000000);
+  --ds-p-red-800: color-mix(in srgb, var(--ds-p-red) 55%, #000000);
+  --ds-p-red-900: color-mix(in srgb, var(--ds-p-red) 40%, #000000);
+  --ds-p-red-950: color-mix(in srgb, var(--ds-p-red) 25%, #000000);
+
+  /* Orange */
+  --ds-p-orange: #bf914f;
+  --ds-p-orange-50: color-mix(in srgb, var(--ds-p-orange) 10%, #ffffff);
+  --ds-p-orange-100: color-mix(in srgb, var(--ds-p-orange) 20%, #ffffff);
+  --ds-p-orange-200: color-mix(in srgb, var(--ds-p-orange) 35%, #ffffff);
+  --ds-p-orange-300: color-mix(in srgb, var(--ds-p-orange) 55%, #ffffff);
+  --ds-p-orange-400: color-mix(in srgb, var(--ds-p-orange) 75%, #ffffff);
+  --ds-p-orange-500: var(--ds-p-orange);
+  --ds-p-orange-600: color-mix(in srgb, var(--ds-p-orange) 85%, #000000);
+  --ds-p-orange-700: color-mix(in srgb, var(--ds-p-orange) 70%, #000000);
+  --ds-p-orange-800: color-mix(in srgb, var(--ds-p-orange) 55%, #000000);
+  --ds-p-orange-900: color-mix(in srgb, var(--ds-p-orange) 40%, #000000);
+  --ds-p-orange-950: color-mix(in srgb, var(--ds-p-orange) 25%, #000000);
+}