@basic-ui/core 0.0.59 → 0.0.61

package/src/Tree/TreeHeader.tsx

@@ -0,0 +1,9 @@
+import { forwardRef } from 'react';
+
+import type { TreeHeaderProps } from './types';
+
+export const TreeHeader = forwardRef<HTMLDivElement, TreeHeaderProps>(
+  function TreeHeader() {
+    return null;
+  }
+);

package/src/Tree/TreeItem.tsx

@@ -0,0 +1,9 @@
+import { forwardRef } from 'react';
+
+import type { TreeItemProps } from './types';
+
+export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(
+  function TreeItem() {
+    return null;
+  }
+);

package/src/Tree/TreeItemContent.tsx

@@ -0,0 +1,91 @@
+import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useContext,
+} from 'react';
+
+import { TreeItemRenderContext } from './context';
+import type {
+  TreeItemContentProps,
+  TreeItemRenderContextValue,
+} from './types';
+import { wrapEvent } from '../utils';
+
+export const TreeItemContent = forwardRef<
+  HTMLDivElement,
+  TreeItemContentProps
+>(function TreeItemContent(props, forwardedRef) {
+  const { as: Comp = 'div', innerAs, children, ...otherProps } = props;
+  const context = useContext(TreeItemRenderContext);
+
+  if (!context) {
+    return (
+      <Comp ref={forwardedRef} as={innerAs} {...otherProps}>
+        {children}
+      </Comp>
+    );
+  }
+
+  return (
+    <Comp ref={forwardedRef} as={innerAs} {...otherProps}>
+      {Children.map(children, (child) => enhanceSlottedChild(child, context))}
+    </Comp>
+  );
+});
+
+function enhanceSlottedChild(
+  child: ReactNode,
+  context: TreeItemRenderContextValue
+) {
+  if (!isValidElement(child)) {
+    return child;
+  }
+
+  const element = child as ReactElement<any>;
+  const slot = (element.props as { slot?: string }).slot;
+  if (slot === 'chevron') {
+    return cloneElement(element, {
+      'aria-expanded': context.item.hasChildItems
+        ? context.isExpanded
+        : undefined,
+      'aria-label': context.isExpanded ? 'Collapse' : 'Expand',
+      'aria-labelledby': context.rowId,
+      disabled: context.isDisabled || !context.item.hasChildItems,
+      tabIndex: -1,
+      onClick: wrapEvent(element.props.onClick, context.toggleExpanded),
+      onKeyDown: wrapEvent(
+        element.props.onKeyDown,
+        (event: KeyboardEvent<any>) => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            context.toggleExpanded(event);
+          }
+        }
+      ),
+    });
+  }
+
+  if (slot === 'selection') {
+    return cloneElement(element, {
+      checked: context.isSelected,
+      disabled: !context.canSelect,
+      'aria-label': 'Select',
+      'aria-labelledby': context.rowId,
+      tabIndex: -1,
+      onClick: wrapEvent(element.props.onClick, (event: MouseEvent<any>) => {
+        event.stopPropagation();
+      }),
+      onChange: wrapEvent(element.props.onChange, context.toggleSelection),
+    });
+  }
+
+  if (slot === 'drag') {
+    return cloneElement(element, {
+      'data-tree-drag-handle': '',
+    });
+  }
+
+  return child;
+}

package/src/Tree/TreeSection.tsx

@@ -0,0 +1,9 @@
+import { forwardRef } from 'react';
+
+import type { TreeSectionProps } from './types';
+
+export const TreeSection = forwardRef<HTMLDivElement, TreeSectionProps>(
+  function TreeSection() {
+    return null;
+  }
+);

package/src/Tree/collection.tsx

@@ -0,0 +1,371 @@
+import type { ReactElement, ReactNode } from 'react';
+import { Children, Fragment, isValidElement, useMemo } from 'react';
+
+import { TreeHeader } from './TreeHeader';
+import { TreeItem } from './TreeItem';
+import { TreeSection } from './TreeSection';
+import type {
+  ParsedTreeItem,
+  ParsedTreeNode,
+  ParsedTreeSection,
+  TreeHeaderProps,
+  TreeItemProps,
+  TreeKey,
+  TreeProps,
+  TreeSectionProps,
+  TreeVisibleRow,
+} from './types';
+
+export interface TreeCollectionState {
+  parsedTree: ParsedTreeNode[];
+  allItems: ParsedTreeItem[];
+  visibleItems: ParsedTreeItem[];
+  visibleRows: TreeVisibleRow[];
+}
+
+export function useTreeCollection(
+  children: ReactNode,
+  options: {
+    expandedKeys?: Iterable<TreeKey>;
+    renderLoadingState?: TreeProps['renderLoadingState'];
+  } = {}
+): TreeCollectionState {
+  const expandedKeys = useMemo(
+    () => new Set(options.expandedKeys ?? []),
+    [options.expandedKeys]
+  );
+  const parsedTree = useMemo(() => parseTreeChildren(children), [children]);
+  const allItems = useMemo(() => flattenAllItems(parsedTree), [parsedTree]);
+  const visibleItems = useMemo(
+    () => flattenVisibleItems(parsedTree, expandedKeys),
+    [expandedKeys, parsedTree]
+  );
+  const visibleRows = useMemo(
+    () => flattenVisibleRows(parsedTree, expandedKeys, options.renderLoadingState),
+    [expandedKeys, options.renderLoadingState, parsedTree]
+  );
+
+  return {
+    parsedTree,
+    allItems,
+    visibleItems,
+    visibleRows,
+  };
+}
+
+export function parseTreeChildren(children: ReactNode): ParsedTreeNode[] {
+  const nodes: ParsedTreeNode[] = [];
+  let itemIndex = 0;
+
+  const visitChild = (child: ReactNode, index: number) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    if (isFragmentElement(child)) {
+      Children.forEach(child.props.children, visitChild);
+      return;
+    }
+
+    if (isTreeSectionElement(child)) {
+      const section = parseTreeSection(child, index);
+      nodes.push(section);
+      return;
+    }
+
+    if (isTreeItemElement(child)) {
+      const item = parseTreeItem(child, {
+        level: 1,
+        parentKey: null,
+        index: itemIndex,
+        posInSet: itemIndex + 1,
+        setSize: countTreeItems(children),
+        path: [itemIndex],
+      });
+      itemIndex += 1;
+      nodes.push(item);
+    }
+  };
+
+  Children.forEach(children, visitChild);
+
+  return nodes;
+}
+
+export function flattenAllItems(nodes: ParsedTreeNode[]): ParsedTreeItem[] {
+  const items: ParsedTreeItem[] = [];
+  const append = (item: ParsedTreeItem) => {
+    items.push(item);
+    item.childItems.forEach(append);
+  };
+
+  nodes.forEach((node) => {
+    if (node.type === 'item') {
+      append(node);
+    } else {
+      node.items.forEach(append);
+    }
+  });
+
+  return items;
+}
+
+export function flattenVisibleItems(
+  nodes: ParsedTreeNode[],
+  expandedKeys: Set<TreeKey>
+): ParsedTreeItem[] {
+  const items: ParsedTreeItem[] = [];
+  const append = (item: ParsedTreeItem) => {
+    items.push(item);
+    if (expandedKeys.has(item.key)) {
+      item.childItems.forEach(append);
+    }
+  };
+
+  nodes.forEach((node) => {
+    if (node.type === 'item') {
+      append(node);
+    } else {
+      node.items.forEach(append);
+    }
+  });
+
+  return items;
+}
+
+export function flattenVisibleRows(
+  nodes: ParsedTreeNode[],
+  expandedKeys: Set<TreeKey>,
+  renderLoadingState: TreeProps['renderLoadingState']
+): TreeVisibleRow[] {
+  const rows: TreeVisibleRow[] = [];
+  const append = (item: ParsedTreeItem) => {
+    rows.push({
+      type: 'item',
+      key: item.key,
+      item,
+    });
+    if (expandedKeys.has(item.key)) {
+      item.childItems.forEach(append);
+      if (shouldRenderLoadingRow(item, renderLoadingState)) {
+        rows.push({
+          type: 'loading',
+          key: `${item.keyString}-loading`,
+          item,
+          level: item.level + 1,
+        });
+      }
+    }
+  };
+
+  nodes.forEach((node) => {
+    if (node.type === 'section') {
+      if (node.header) {
+        rows.push({
+          type: 'section',
+          key: node.key,
+          section: node,
+        });
+      }
+      node.items.forEach(append);
+    } else {
+      append(node);
+    }
+  });
+
+  return rows;
+}
+
+export function shouldRenderLoadingRow(
+  item: ParsedTreeItem,
+  renderLoadingState: TreeProps['renderLoadingState']
+) {
+  return Boolean(
+    renderLoadingState &&
+      item.hasChildItems &&
+      item.childItems.length === 0 &&
+      item.props.isLoading
+  );
+}
+
+function parseTreeSection(
+  element: ReactElement<TreeSectionProps>,
+  sectionIndex: number
+): ParsedTreeSection {
+  const childrenArray = Children.toArray(element.props.children);
+  let header: ReactNode = null;
+  let headerProps: TreeHeaderProps = {};
+  const itemElements: ReactElement<TreeItemProps>[] = [];
+
+  const visitChild = (child: ReactNode) => {
+    if (!isValidElement(child)) {
+      return;
+    }
+
+    if (isFragmentElement(child)) {
+      Children.forEach(child.props.children, visitChild);
+    } else if (isTreeHeaderElement(child)) {
+      header = child.props.children;
+      headerProps = child.props;
+    } else if (isTreeItemElement(child)) {
+      itemElements.push(child);
+    }
+  };
+
+  childrenArray.forEach(visitChild);
+
+  const items = itemElements.map((itemElement, index) =>
+    parseTreeItem(itemElement, {
+      level: 1,
+      parentKey: null,
+      index,
+      posInSet: index + 1,
+      setSize: itemElements.length,
+      path: [sectionIndex, index],
+    })
+  );
+
+  return {
+    type: 'section',
+    key: `section-${sectionIndex}`,
+    header,
+    headerProps,
+    sectionProps: element.props,
+    items,
+  };
+}
+
+function parseTreeItem(
+  element: ReactElement<TreeItemProps>,
+  options: {
+    level: number;
+    parentKey: TreeKey | null;
+    index: number;
+    posInSet: number;
+    setSize: number;
+    path: number[];
+  }
+): ParsedTreeItem {
+  const { content, childElements } = splitTreeItemChildren(element.props);
+  const key = element.props.id ?? options.path.join('.');
+  const childItems = childElements.map((childElement, index) =>
+    parseTreeItem(childElement, {
+      level: options.level + 1,
+      parentKey: key,
+      index,
+      posInSet: index + 1,
+      setSize: childElements.length,
+      path: [...options.path, index],
+    })
+  );
+  const textValue =
+    element.props.textValue ??
+    getTextValue(element.props.title) ??
+    getTextValue(content) ??
+    '';
+
+  if (process.env.NODE_ENV !== 'production' && !textValue) {
+    console.warn(
+      'A textValue, title, or text content is required for <TreeItem> elements to support typeahead.'
+    );
+  }
+
+  return {
+    type: 'item',
+    key,
+    keyString: String(key),
+    level: options.level,
+    index: options.index,
+    posInSet: options.posInSet,
+    setSize: options.setSize,
+    parentKey: options.parentKey,
+    content,
+    textValue,
+    disabled: element.props.disabled || element.props.isDisabled || false,
+    hasChildItems: element.props.hasChildItems || childItems.length > 0,
+    childItems,
+    props: element.props,
+  };
+}
+
+function splitTreeItemChildren(props: TreeItemProps) {
+  const childElements: ReactElement<TreeItemProps>[] = [];
+  const contentChildren: ReactNode[] = [];
+
+  const visitChild = (child: ReactNode) => {
+    if (isValidElement(child) && isTreeItemElement(child)) {
+      childElements.push(child);
+    } else if (isValidElement(child) && isTreeSectionElement(child)) {
+      Children.forEach(child.props.children, (sectionChild) => {
+        visitChild(sectionChild);
+      });
+    } else if (isValidElement(child) && isFragmentElement(child)) {
+      Children.forEach(child.props.children, visitChild);
+    } else if (child !== null && child !== undefined) {
+      contentChildren.push(child);
+    }
+  };
+
+  Children.forEach(props.children, visitChild);
+
+  return {
+    content: props.title ?? contentChildren,
+    childElements,
+  };
+}
+
+function countTreeItems(children: ReactNode) {
+  let count = 0;
+  const visitChild = (child: ReactNode) => {
+    if (isValidElement(child) && isTreeItemElement(child)) {
+      count += 1;
+    } else if (isValidElement(child) && isFragmentElement(child)) {
+      Children.forEach(child.props.children, visitChild);
+    }
+  };
+
+  Children.forEach(children, visitChild);
+  return count;
+}
+
+function getTextValue(node: ReactNode): string | undefined {
+  if (typeof node === 'string' || typeof node === 'number') {
+    return String(node);
+  }
+
+  if (Array.isArray(node)) {
+    const text = node
+      .map((child) => getTextValue(child))
+      .filter(Boolean)
+      .join('');
+    return text || undefined;
+  }
+
+  if (isValidElement(node)) {
+    return getTextValue((node as ReactElement<any>).props.children);
+  }
+
+  return undefined;
+}
+
+function isTreeItemElement(
+  child: ReactNode
+): child is ReactElement<TreeItemProps> {
+  return isValidElement(child) && child.type === TreeItem;
+}
+
+function isTreeSectionElement(
+  child: ReactNode
+): child is ReactElement<TreeSectionProps> {
+  return isValidElement(child) && child.type === TreeSection;
+}
+
+function isTreeHeaderElement(
+  child: ReactNode
+): child is ReactElement<TreeHeaderProps> {
+  return isValidElement(child) && child.type === TreeHeader;
+}
+
+function isFragmentElement(child: ReactNode): child is ReactElement<{ children?: ReactNode }> {
+  return isValidElement(child) && child.type === Fragment;
+}

package/src/Tree/context.ts

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+import type { TreeItemRenderContextValue } from './types';
+
+export const TreeItemRenderContext =
+  createContext<TreeItemRenderContextValue | null>(null);

package/src/Tree/index.ts

@@ -0,0 +1,7 @@
+export * from './collection';
+export * from './Tree';
+export * from './TreeHeader';
+export * from './TreeItem';
+export * from './TreeItemContent';
+export * from './TreeSection';
+export type * from './types';

package/src/Tree/styles.css

@@ -0,0 +1,135 @@
+.TreeStory-frame {
+  min-height: 360px;
+  padding: 48px;
+  background: white;
+  color: #1f1f1f;
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+.TreeStory-frame [data-tree] {
+  box-sizing: border-box;
+  width: 280px;
+  margin: 0;
+  padding: 4px;
+  border: 1px solid #d8d8d8;
+  background: white;
+  color: #1f1f1f;
+  outline: 0;
+}
+
+.TreeStory-frame [data-tree][data-focus-visible] {
+  outline: 2px solid #1f1f1f;
+  outline-offset: 2px;
+}
+
+.TreeStory-frame [role='rowgroup'] {
+  display: block;
+}
+
+.TreeStory-frame [role='rowheader'] {
+  padding: 0.5rem 0.75rem;
+  color: #777;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.TreeStory-frame [data-tree-item] {
+  display: flex;
+  align-items: center;
+  min-height: 2rem;
+  outline: 0;
+  cursor: default;
+  user-select: none;
+}
+
+.TreeStory-frame [data-tree-item] > [role='gridcell'],
+.TreeStory-frame [data-tree-loading-row] > [role='gridcell'] {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  width: 100%;
+  min-width: 0;
+  padding: 0.375rem 0.75rem;
+  padding-left: calc(0.75rem + (var(--tree-item-level, 1) - 1) * 1rem);
+}
+
+.TreeStory-frame [data-tree-loading-row] {
+  color: #777;
+}
+
+.TreeStory-frame [data-tree-item][data-has-child-items] > [role='gridcell']::before {
+  content: '>';
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  color: #777;
+  transition: transform 120ms ease;
+}
+
+.TreeStory-frame [data-tree-item][data-expanded] > [role='gridcell']::before {
+  transform: rotate(90deg);
+}
+
+.TreeStory-frame [data-tree-item] > [role='gridcell']:has([slot='chevron'])::before {
+  content: none;
+}
+
+.TreeStory-frame [data-tree-item][data-focused],
+.TreeStory-frame [data-tree-item]:hover:not([data-disabled]) {
+  background: #f0f0f0;
+}
+
+.TreeStory-frame [data-tree-item][data-selected] {
+  background: #1f1f1f;
+  color: white;
+}
+
+.TreeStory-frame [data-tree-item][data-selected][data-focused] {
+  background: #1f1f1f;
+  color: white;
+}
+
+.TreeStory-frame [data-tree-item][data-disabled] {
+  color: #777;
+  cursor: not-allowed;
+}
+
+.TreeStory-frame [slot='chevron'],
+.TreeStory-frame [slot='drag'] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+}
+
+.TreeStory-frame [slot='chevron'] {
+  transition: transform 120ms ease;
+}
+
+.TreeStory-frame [data-tree-item][data-expanded] [slot='chevron'] {
+  transform: rotate(90deg);
+}
+
+.TreeStory-frame [slot='selection'] {
+  width: 1rem;
+  height: 1rem;
+  margin: 0;
+}
+
+.TreeStory-frame [slot='drag'],
+.TreeStory-frame [data-tree-drag-handle] {
+  margin-left: auto;
+  color: #777;
+}