tharaday 0.7.2 → 0.7.3

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/semantic.css

@@ -50,6 +50,9 @@
   --ds-border-default: var(--ds-border-1);
   --ds-surface-disabled: var(--ds-ref-surface-disabled);
 
+  /* Overlay */
+  --ds-overlay: rgba(0, 0, 0, 0.5);
+
   /* Skeleton */
   --ds-skeleton: var(--ds-ref-skeleton);
   --ds-skeleton-highlight: var(--ds-ref-skeleton-highlight);

package/src/styles/tokens.css

@@ -258,8 +258,19 @@
   --ds-space-14: 3.5rem; /* 56px */
   --ds-space-16: 4rem; /* 64px */
 
+  /* --- CONTENT WIDTH SCALE --- */
+
+  --ds-content-width-sm: 25rem; /* 400px — notifications, small modals */
+  --ds-content-width-md: 37.5rem; /* 600px — default modal */
+  --ds-content-width-lg: 50rem; /* 800px — large modal */
+  --ds-content-width-xl: 62.5rem; /* 1000px — xl modal */
+  --ds-content-width-2xl: 75rem; /* 1200px — page/nav max-width */
+
   /* --- BORDERS & SHADOWS --- */
 
+  --ds-border-width: 0.0625rem; /* 1px */
+  --ds-border-width-2: 0.125rem; /* 2px */
+
   --ds-radius-sm: 0.25rem;
   --ds-radius-md: 0.5rem;
   --ds-radius-lg: 1rem;
@@ -269,6 +280,10 @@
   --ds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
   --ds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 
+  /* --- COMPONENT TOKENS --- */
+
+  --ds-checkbox-size: 1.125rem; /* 18px — checkbox and radio control box */
+
   /* --- ANIMATION --- */
 
   --ds-transition-fast: 150ms ease;