@adecore/ui 0.16.0 → 0.17.0-beta.2

package/src/tree/parts.tsx

@@ -0,0 +1,170 @@
+import type { MouseEvent, KeyboardEvent, PointerEvent } from 'react';
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { ChevronRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox as UICheckbox, type CheckboxProps } from '../Checkbox.tsx';
+import { Icon } from '../Icon.tsx';
+import { treeRowStyle } from './style.ts';
+
+export type TreeRootProps = useRender.ComponentProps<'div'>;
+
+export function TreeRoot({ render, className, ref, children, ...props }: TreeRootProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            role: 'tree',
+            ...props,
+            className: clsx('adecore-tree', className),
+            children: (
+                <>
+                    <style>{treeRowStyle('.adecore-tree-row')}</style>
+                    {children}
+                </>
+            )
+        }
+    });
+}
+
+export type TreeRowProps = useRender.ComponentProps<'div'> & {
+    level?: number;
+    selected?: boolean;
+    joinedStart?: boolean;
+    joinedEnd?: boolean;
+    interactive?: boolean;
+};
+
+export function TreeRow({
+    level = 1,
+    selected = false,
+    joinedStart = false,
+    joinedEnd = false,
+    interactive = true,
+    render,
+    className,
+    ref,
+    style,
+    children,
+    ...props
+}: TreeRowProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            role: 'treeitem',
+            'aria-level': level,
+            'aria-selected': selected,
+            ...props,
+            'data-selected': selected,
+            'data-joined-start': joinedStart,
+            'data-joined-end': joinedEnd,
+            'data-interactive': interactive,
+            className: clsx('adecore-tree-row', className),
+            style: { paddingInlineStart: 4 + (Math.max(1, level) - 1) * 16, ...style },
+            children: (
+                <>
+                    {Array.from({ length: Math.max(0, level - 1) }, (_, index) => (
+                        <span key={index} aria-hidden className="adecore-tree-guide" style={{ insetInlineStart: 11 + index * 16 }} />
+                    ))}
+                    {children}
+                </>
+            )
+        }
+    });
+}
+
+export type TreeChevronSlotProps = useRender.ComponentProps<'span'>;
+
+export function TreeChevronSlot({ render, className, ref, ...props }: TreeChevronSlotProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: { 'aria-hidden': true, ...props, className: clsx('adecore-tree-chevron-slot', className) }
+    });
+}
+
+export type TreeChevronProps = useRender.ComponentProps<'button'> & {
+    expanded: boolean;
+    onExpandedChange?(expanded: boolean): void;
+};
+
+export function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }: TreeChevronProps) {
+    const { t } = useTranslation('ui');
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'button',
+        props: {
+            type: 'button',
+            tabIndex: -1,
+            'aria-label': t(expanded ? 'tree.collapse' : 'tree.expand'),
+            ...props,
+            className: clsx('adecore-tree-chevron-slot', className),
+            onClick: (event: MouseEvent<HTMLButtonElement>) => {
+                event.stopPropagation();
+                onClick?.(event);
+                if (!event.defaultPrevented) {
+                    onExpandedChange?.(!expanded);
+                }
+            },
+            onDoubleClick: (event: MouseEvent<HTMLButtonElement>) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            children: <Icon icon={ChevronRight} size={12} className={expanded ? 'rotate-90' : undefined} />
+        }
+    });
+}
+
+export type TreeLabelProps = useRender.ComponentProps<'span'>;
+export function TreeLabel({ render, className, ref, ...props }: TreeLabelProps) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-label', className) } });
+}
+
+export type TreeDecorationProps = useRender.ComponentProps<'span'>;
+export function TreeDecoration({ render, className, ref, ...props }: TreeDecorationProps) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-decoration', className) } });
+}
+
+export type TreeControlProps = useRender.ComponentProps<'span'>;
+export function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }: TreeControlProps) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            'data-tree-control': true,
+            className: clsx('adecore-tree-control', className),
+            onClick: (event: MouseEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onClick?.(event);
+            },
+            onDoubleClick: (event: MouseEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            onKeyDown: (event: KeyboardEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onKeyDown?.(event);
+            },
+            onPointerDown: (event: PointerEvent<HTMLSpanElement>) => {
+                event.stopPropagation();
+                onPointerDown?.(event);
+            }
+        }
+    });
+}
+
+export type TreeCheckboxProps = CheckboxProps;
+export function TreeCheckbox(props: TreeCheckboxProps) {
+    return (
+        <TreeControl>
+            <UICheckbox {...props} />
+        </TreeControl>
+    );
+}

package/src/tree/style.ts

@@ -0,0 +1,30 @@
+export const TREE_ROW_HEIGHT = 25;
+
+export function treeRowStyle(selector: string, selected = 'data-selected'): string {
+    return `
+        ${selector} {
+            box-sizing: border-box;
+            display: flex;
+            position: relative;
+            align-items: center;
+            height: var(--tree-row-height, 25px);
+            min-width: 0;
+            gap: var(--tree-row-gap, 6px);
+            border: 0;
+            border-radius: var(--tree-row-radius, 6px);
+            background: transparent;
+            background-clip: padding-box;
+            color: var(--text);
+            font-family: var(--font-sans);
+            font-size: var(--text-xs);
+            line-height: var(--tree-row-height, 25px);
+            text-align: start;
+            outline: none;
+        }
+        ${selector}[data-interactive="true"]:hover { background: var(--surface-hover); }
+        ${selector}[${selected}="true"] { background: var(--surface-active); color: var(--text); }
+        ${selector}[data-joined-start="true"] { border-start-start-radius: 0; border-start-end-radius: 0; }
+        ${selector}[data-joined-end="true"] { border-end-start-radius: 0; border-end-end-radius: 0; }
+        ${selector}:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+    `;
+}