carbon-components-svelte/src/TreeView/TreeViewNode.svelte.d.ts

Svelte implementation of the Carbon Design System

import { SvelteComponentTyped } from "svelte";

/**
 * Computes the depth of a tree leaf node relative to <ul role="tree" />.
 * Returns the depth of the node (0-based, where 0 is the root level).
 * @example
 *  ```svelte
 *  import { computeTreeLeafDepth } from 'carbon-components-svelte/TreeView/TreeViewNode.svelte';
 *  let nodeElement;
 *  $: depth = computeTreeLeafDepth(nodeElement);
 *
 *  <li bind:this={nodeElement}>Node at depth {depth}</li>
 *  ```
 */
export declare function computeTreeLeafDepth(node: HTMLLIElement | null): number;

/**
 * Finds the nearest parent tree node
 */
export declare function findParentTreeNode(node: HTMLElement | null): null | HTMLElement;

export type TreeNode<Id = (string|number)> = import('./TreeView.svelte').TreeNode<Id>;

export type TreeViewNodeProps<Node extends TreeNode<any> = TreeNode<any>, Icon = any> = {
  /**
   * @generics Node,Icon
   * @default false
   */
  leaf?: boolean;

  /**
   * @default ""
   */
  id?: Node["id"];

  /**
   * @default ""
   */
  text?: string;

  /**
   * @default false
   */
  disabled?: boolean;

  /**
   * Specify the URL the TreeNode links to.
   * @default undefined
   */
  href?: string | undefined;

  /**
   * Specify the link target.
   * @default undefined
   */
  target?: string | undefined;

  /**
   * Specify the icon to render.
   * @default undefined
   */
  icon?: Icon;

  children?: (this: void, ...args: [{
        node: Node & {
          expanded: false;
          leaf: boolean;
          selected: boolean;
        }
      }]) => void;
};

export default class TreeViewNode<Node extends TreeNode<any> = TreeNode<any>, Icon = any> extends SvelteComponentTyped<
  TreeViewNodeProps<Node,Icon>,
  Record<string, any>,
  {
    default: {
      node: Node & {
        expanded: false;
        leaf: boolean;
        selected: boolean;
      }
    };
  }
> {}