Dm DuskMoon React
DuskMoon workflow duskmoon implemented 5 demos

DmTree

DmTree documents the DmTree export from duskmoon.

Import @duskmoon-dev/components/dm-tree
9 API sections
53 documented props
3 behavior scenarios
Key API
titlekeylabelicondisabledonClick

Usage

When to use

  • Use it in DuskMoon application screens that need a packaged, opinionated workflow component.
  • Reach for the lower-level standard component when the screen needs custom composition.

Implementation notes

Stylesheet Import @duskmoon-dev/components/styles.css once in the app or docs shell.
State Start with default props for static examples, then switch to controlled props when state must be shared.
Theme The preview inherits the active DuskMoon data-theme value from the docs layout.

Features

DuskMoon workflow wrapper

Wraps lower-level primitives into a higher-level DuskMoon-prefixed workflow API.

Application defaults

Examples show the defaults and composition points expected by internal DuskMoon app screens.

Primary API surface

DmTree is most often configured through `title`, `key`, `label`, `icon`.

Covered behavior

Normalizes fieldNames and emits Dm onChange payload

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview
  • Root Node
    • Child Node 1
    • Child Node 2

Basic usage

authored

Import the component stylesheet and DmTree from its package subpath, then render it with the core props.

Source
import "@duskmoon-dev/components/styles.css";
import { DmTree } from "@duskmoon-dev/components/dm-tree";

export function Example() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}
Preview
  • Root Node
    • Child Node 1
    • Child Node 2

Normalizes fieldNames and emits Dm onChange payload

test-backed

DmTree scenario from the component test coverage: normalizes fieldnames and emits dm onchange payload.

Source
import "@duskmoon-dev/components/styles.css";
import { DmTree } from "@duskmoon-dev/components/dm-tree";

export function DmTreeNormalizesFieldNamesAndEmitsDemo() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}
Preview
  • Root Node
    • Child Node 1
    • Child Node 2

Supports search, all item, and item toolbar actions

test-backed

DmTree scenario from the component test coverage: supports search, all item, and item toolbar actions.

Source
import "@duskmoon-dev/components/styles.css";
import { DmTree } from "@duskmoon-dev/components/dm-tree";

export function DmTreeSupportsSearchAllItemDemo() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}
Preview
  • Root Node
    • Child Node 1
    • Child Node 2

Renders top toolbar, loading, empty, and option tree variants

test-backed

DmTree scenario from the component test coverage: renders top toolbar, loading, empty, and option tree variants.

Source
import "@duskmoon-dev/components/styles.css";
import { DmTree } from "@duskmoon-dev/components/dm-tree";

export function DmTreeRendersTopToolbarLoadingDemo() {
  return (<DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>);
}
Preview
Sunshine Theme
  • Root Node
    • Child Node 1
    • Child Node 2
Moonlight Theme
  • Root Node
    • Child Node 1
    • Child Node 2

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source
<div data-theme="sunshine">
  <DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>
</div>

<div data-theme="moonlight">
  <DmTree
  treeData={[
    {
      key: "root",
      title: "Root Node",
      children: [
        { key: "child-1", title: "Child Node 1" },
        { key: "child-2", title: "Child Node 2" }
      ]
    }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for DmTree. Start with `title`, `key`, `label`, `icon` for common usage.

Types: packages/components/src/components/dm-tree/DmTree.types.ts Scenarios: packages/components/src/components/dm-tree/DmTree.test.tsx
DmTreeFieldNames interface extends < TDataNode extends DmTreeDataNode = TreeDataNode, >
Prop Type Required Description
title keyof TDataNode | string No title configures DmTree.
key keyof TDataNode | string No key configures DmTree.
children keyof TDataNode | string No children configures DmTree.
DmTreeToolbarButton interface extends < TDataNode extends DmTreeDataNode = TreeDataNode, >
Prop Type Required Description
label ReactNode Yes label configures DmTree.
icon ReactNode No icon configures DmTree.
disabled boolean No disabled configures DmTree.
onClick ( No onClick configures DmTree.
selectedKey TreeKey | undefined, Yes selectedKey configures DmTree.
getSelectedItem () => TDataNode | undefined, Yes getSelectedItem configures DmTree.
DmTreeItemAction interface extends < TDataNode extends DmTreeDataNode = TreeDataNode, >
Prop Type Required Description
icon ReactNode Yes icon configures DmTree.
title string No title configures DmTree.
disabled boolean | ((item: TDataNode) => boolean) No disabled configures DmTree.
show boolean | ((item: TDataNode) => boolean) No show configures DmTree.
onClick (item: TDataNode) => void No onClick configures DmTree.
DmTreeAllItem interface
Prop Type Required Description
value TreeKey Yes value configures DmTree.
label ReactNode Yes label configures DmTree.
DmTreeCommonProps interface extends < TDataNode extends DmTreeDataNode = TreeDataNode, > extends Omit< TreeProps<TreeDataNode>, "treeData" | "children" | "onChange" | "onSelect" | "titleRender" >
Prop Type Required Description
treeData TDataNode[] Yes treeData configures DmTree.
selectedKey TreeKey No selectedKey configures DmTree.
showAll boolean No showAll configures DmTree.
allItem DmTreeAllItem No allItem configures DmTree.
selectedKey TreeKey | undefined, Yes selectedKey configures DmTree.
getSelectedItem () => TDataNode | undefined, Yes getSelectedItem configures DmTree.
selectedKey TreeKey | undefined, Yes selectedKey configures DmTree.
getSelectedItem () => TDataNode | undefined, Yes getSelectedItem configures DmTree.
customTopToolbar ReactNode No customTopToolbar configures DmTree.
itemToolbarAlwaysShow boolean No itemToolbarAlwaysShow configures DmTree.
beforeSelect ( No beforeSelect configures DmTree.
selectItem TDataNode, Yes selectItem configures DmTree.
selectedKey TreeKey, Yes selectedKey configures DmTree.
beforeSelectKey TreeKey | undefined, Yes beforeSelectKey configures DmTree.
onChange ( No onChange configures DmTree.
selectItem TDataNode | undefined, Yes selectItem configures DmTree.
selectKey TreeKey | undefined, Yes selectKey configures DmTree.
beforeSelectKey TreeKey | undefined, Yes beforeSelectKey configures DmTree.
loading boolean No loading configures DmTree.
showSearch boolean No showSearch configures DmTree.
searchPlaceholder string No searchPlaceholder configures DmTree.
customSearch (event: React.ChangeEvent<HTMLInputElement>) => void No customSearch configures DmTree.
beforeIcon ReactNode | ((item: TDataNode) => ReactNode) No beforeIcon configures DmTree.
emptyNode ReactNode No emptyNode configures DmTree.
width number | string No width configures DmTree.
minNodeWidth number | string No minNodeWidth configures DmTree.
fieldNames DmTreeFieldNames<TDataNode> No fieldNames configures DmTree.
DmTreeOptionItem interface extends < TDataNode extends DmTreeDataNode = TreeDataNode, > extends Omit<DmTabsItem, "children">
Prop Type Required Description
loading boolean No loading configures DmTree.
TreeSetting DmTreeCommonProps<TDataNode> Yes TreeSetting configures DmTree.
DmTreeOptionProps interface extends < TDataNode extends DmTreeDataNode = TreeDataNode, > extends Omit<ComponentProps<"div">, "onChange">
Prop Type Required Description
isTabTree true Yes isTabTree configures DmTree.
items DmTreeOptionItem<TDataNode>[] Yes items configures DmTree.
defaultActiveKey string No defaultActiveKey configures DmTree.
activeKey string No activeKey configures DmTree.
clearOtherSelection boolean No clearOtherSelection configures DmTree.
width number | string No width configures DmTree.
minNodeWidth number | string No minNodeWidth configures DmTree.
onChange (activeKey: string) => void No onChange configures DmTree.
DmTreeDataNode type 
Record<string, unknown> & { key?: TreeKey
DmTreeComponent type 
<TDataNode extends DmTreeDataNode = TreeDataNode>( props: DmTreeProps<TDataNode>, ) => ReactElement | null