Data DisplayDmduskmoonimplemented6 demos

DmTruncate

DmTruncate shortens long text with overflow details, tooltips, and optional copying.

Import@duskmoon-dev/components/dm-truncate

1API sections

13documented props

4behavior scenarios

Key API

showOverflowTagoverflowContentemptyValueoverflowPercenttooltipPropsisShowPopover

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

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe 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

DmTruncate is most often configured through `showOverflowTag`, `overflowContent`, `emptyValue`, `overflowPercent`.

Covered behavior

Renders emptyValue and custom class names

Feature Demos

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

Preview

DuskMoon Dm Truncate

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { DmTruncate } from "@duskmoon-dev/components/dm-truncate";

export function Example() {
  return (<DmTruncate>DuskMoon Dm Truncate</DmTruncate>);
}

Preview

DuskMoon Dm Truncate

Renders emptyValue and custom class names

test-backed

DmTruncate scenario from the component test coverage: renders emptyvalue and custom class names.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTruncate } from "@duskmoon-dev/components/dm-truncate";

export function DmTruncateRendersEmptyValueAndCustomDemo() {
  return (<DmTruncate>DuskMoon Dm Truncate</DmTruncate>);
}

Preview

DuskMoon Dm Truncate

Detects single-line overflow and shows overflow tag tooltip

test-backed

DmTruncate scenario from the component test coverage: detects single-line overflow and shows overflow tag tooltip.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTruncate } from "@duskmoon-dev/components/dm-truncate";

export function DmTruncateDetectsSingleLineOverflowDemo() {
  return (<DmTruncate>DuskMoon Dm Truncate</DmTruncate>);
}

Preview

DuskMoon Dm Truncate

Uses text tooltip when overflow tag is disabled

test-backed

DmTruncate scenario from the component test coverage: uses text tooltip when overflow tag is disabled.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTruncate } from "@duskmoon-dev/components/dm-truncate";

export function DmTruncateUsesTextTooltipWhenDemo() {
  return (<DmTruncate>DuskMoon Dm Truncate</DmTruncate>);
}

Preview

DuskMoon Dm Truncate

Copies string content

test-backed

DmTruncate scenario from the component test coverage: copies string content.

Source

import "@duskmoon-dev/components/styles.css";
import { DmTruncate } from "@duskmoon-dev/components/dm-truncate";

export function DmTruncateCopiesStringContentDemo() {
  return (<DmTruncate>DuskMoon Dm Truncate</DmTruncate>);
}

Preview

Sunshine Theme

DuskMoon Dm Truncate

Moonlight Theme

DuskMoon Dm Truncate

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">
  <DmTruncate>DuskMoon Dm Truncate</DmTruncate>
</div>

<div data-theme="moonlight">
  <DmTruncate>DuskMoon Dm Truncate</DmTruncate>
</div>

API

The API reference below lists every parsed exported type or interface for DmTruncate. Start with `showOverflowTag`, `overflowContent`, `emptyValue`, `overflowPercent` for common usage.

Types: packages/components/src/components/dm-truncate/DmTruncate.types.tsScenarios: packages/components/src/components/dm-truncate/DmTruncate.test.tsx

DmTruncatePropsinterface extends Omit< ComponentPropsWithoutRef<"div">, "children" | "onCopy" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures DmTruncate.
`showOverflowTag`	`boolean`	No	showOverflowTag configures DmTruncate.
`overflowContent`	`ReactNode \| ((value: string) => ReactNode)`	No	overflowContent configures DmTruncate.
`emptyValue`	`ReactNode`	No	emptyValue configures DmTruncate.
`overflowPercent`	`number`	No	overflowPercent configures DmTruncate.
`tooltipProps`	`Partial<TooltipProps>`	No	tooltipProps configures DmTruncate.
`isShowPopover`	`boolean`	No	isShowPopover configures DmTruncate.
`copyable`	`boolean`	No	copyable configures DmTruncate.
`maxLines`	`number`	No	maxLines configures DmTruncate.
`tooltipPreserveLineBreak`	`boolean`	No	tooltipPreserveLineBreak configures DmTruncate.
`textClassName`	`string`	No	textClassName configures DmTruncate.
`textStyle`	`CSSProperties`	No	textStyle configures DmTruncate.
`onCopy`	`(value: string) => void`	No	onCopy configures DmTruncate.